@charset "utf-8";
/* プログラムページ専用CSS。共通CSSの後に読み込みます。 */
#program .program-features, #program .program-materials {
    width:  min(1120px, 92%);
    margin:  0 auto;
    font-size:  23px;
    font-weight:  500;
    line-height:  normal;
}

#program .program-feature {
    margin:  0 auto 48px;
}

#program .program-feature p {
    text-align:  center;
    margin:  0;
}

#program .program-pill {
    width:  fit-content;
    max-width:  100%;
    min-width:  324px;
    margin:  0 auto 28px;
    padding:  8px 32px;
    border-radius:  999px;
    background:  #24b0ec;
    color:  #fff;
    font-size:  30px;
    font-weight:  500;
    line-height:  1.5;
    text-align:  center;
    box-shadow:  0 5px 10px #b3cbd5;
}

#program .program-five-intro {
    text-align:  center;
    font-size:  23px;
    font-weight:  500;
    color:  #797b7c;
    margin:  0 0 36px;
}

#program .program-materials {
    margin-top:  60px;
    margin-bottom:  70px;
}

#program .program-material {
    padding:  30px;
    margin-bottom:  28px;
    background:  #fff;
    border:  2px solid #c9edf9;
    border-radius:  24px;
}

#program .program-material h3 {
    display:  flex;
    align-items:  center;
    gap:  16px;
    font-size:  25px;
    font-weight:  700;
    color:  #24b0ec;
    line-height:  1.5;
    margin:  0 0 26px;
    padding-bottom:  14px;
    border-bottom:  4px dashed #c9edf9;
}

#program .program-material h3 small {
    display:  block;
    font-size:  20px;
    font-weight:  500;
}

#program .program-number {
    flex:  0 0 48px;
    height:  48px;
    border-radius:  50%;
    background:  #24b0ec;
    color:  #fff;
    text-align:  center;
    line-height:  48px;
}

#program .program-material-grid {
    display:  grid;
    grid-template-columns:  minmax(0, .85fr) minmax(0, 1.15fr);
    align-items:  center;
    gap:  32px;
}

#program .program-material figure {
    margin:  0;
    padding:  12px;
    border-radius:  18px;
    background:  #e1f7ff;
}

#program .program-material img {
    width:  100%;
    height:  auto;
    display:  block;
    border-radius:  10px;
}

#program .program-material:first-of-type figure {
    width:  100%;
    max-width:  330px;
    margin:  auto;
}

#program .program-material-body {
    font-size:  20px;
}

#program .program-material-body p {
    margin:  0 0 1em;
}

#program .program-material-body p:last-child {
    margin-bottom:  0;
}

#program .program-material-lead {
    color:  #24b0ec;
    font-weight:  700;
}

/* 参考ページの５領域のスタイルをそのまま使用 */
#program_list01 {
    width:  1092px;
    height:  auto;
    margin:  75px auto;
}

#program_list01 h4.title {
    width:  432px;
    height:  68px;
    color:  white;
    background:  #fc90ac;
    text-align:  center;
    line-height:  68px;
    font-size:  40px;
    margin:  0 auto 60px;
    border-radius:  30px;
    filter:  drop-shadow(0 5px 10px #d5d3b3);
    -webkit-filter:  drop-shadow(0 5px 10px #d5d3b3);
}

.program_list_block .sub_title {
    text-align:  center;
    font-size:  40px;
    margin-bottom:  30px;
    letter-spacing:  0.4em;
    color:  white;
    -webkit-text-stroke:  5px #fc90ac;
    paint-order:  stroke;
    filter:  drop-shadow(1px 1px 1px #fc90ac);
    -webkit-filter:  drop-shadow(1px 1px 1px #fc90ac);
    font-weight:  600;
    line-height:  1.28;
}

.program_list_block .sub_title.fst {
    margin-bottom:  10px;
}

.program_list_block .five_regions_text {
    text-align:  center;
    font-size:  42px;
    color:  #868584;
    margin-bottom:  30px;
    font-weight:  600;
    letter-spacing:  0.2em;
}

.program_list_block .five_regions_text span:nth-child(1),
.program_list_block .five_regions_text span:nth-child(6),
.program_list_block .five_regions_text span:nth-child(12) {
    color:  #ee7185;
}

.program_list_block .five_regions_text span:nth-child(2),
.program_list_block .five_regions_text span:nth-child(7),
.program_list_block .five_regions_text span:nth-child(13) {
    color:  #d780ea;
}

.program_list_block .five_regions_text span:nth-child(3),
.program_list_block .five_regions_text span:nth-child(9),
.program_list_block .five_regions_text span:nth-child(14) {
    color:  #578dce;
}

.program_list_block .five_regions_text span:nth-child(4),
.program_list_block .five_regions_text span:nth-child(10),
.program_list_block .five_regions_text span:nth-child(12) {
    color:  #57d17c;
}

.program_list_block .five_regions_text span:nth-child(5),
.program_list_block .five_regions_text span:nth-child(11) {
    color:  #f4995a;
}

.program_list_block .program_box {
    width:  100%;
    height:  380px;
    background:  white;
    font-size:  23px;
    border:  1px solid #fc90ac;
    border-radius:  20px;
    margin-bottom:  68px;
    display:  flex;
    justify-content:  space-around;
    align-items:  center;
    padding:  10px;
}

.program_list_block .program_box.pt1 {
    height:  auto;
    padding:  30px;
}

.program_list_block .program_box.pt1 .detail p > span {
    color:  white;
    margin-left:  10px;
    font-size:  27px;
}

.program_list_block .program_box.pt1 .img_box {
    width:  400px;
}

.program_list_block .program_box.pt1 .img_box img {
    width:  100%;
    display:  block;
}

.program_list_block .program_box.pt2.col01 {
    border-color:  rgb(232, 80, 143);
}

.program_list_block .program_box.pt2.col02 {
    border-color:  #2ab1e8;
}

.program_list_block .program_box.pt2.col03 {
    border-color:  #da5168;
}

.program_list_block .program_box.pt2.col04 {
    border-color:  #415fab;
}

.program_list_block .program_box.pt2.col05 {
    border-color:  #ed7041;
}

.program_list_block .program_box:last-child, .program_list_block .program_box.pt2:last-child {
    margin-bottom:  90px;
}

.program_list_block .program_box.pt2 {
    width:  100%;
    height:  auto;
    background:  white;
    font-size:  23px;
    border:  1px solid #fc90ac;
    border-radius:  20px;
    margin-bottom:  68px;
    display:  flex;
    justify-content:  space-around;
    align-items:  center;
    padding:  45px 90px;
}

.program_list_block .program_box div.pc {
    padding-top:  15px;
}

.program_list_block .program_box .detail {
    width:  418px;
    height:  auto;
    color:  #868584;
}

.program_list_block .program_box.pt2 .detail {
    width:  100%;
    color:  #868584;
    margin:  0 auto;
}

.program_list_block .program_box .detail p {
    width:  100%;
    height:  48px;
    color:  white;
    background:  #fc90ac;
    font-size:  27px;
    line-height:  48px;
    margin-bottom:  25px;
    letter-spacing:  0.04em;
    display:  flex;
    align-items:  center;
    justify-content:  center;
}

.program_box.pt2.col01 .detail p {
    background:  rgb(232, 80, 143);
}

.program_box.pt2.col02 .detail p {
    background:  #2ab1e8;
}

.program_box.pt2.col03 .detail p {
    background:  #da5168;
}

.program_box.pt2.col04 .detail p {
    background:  #415fab;
}

.program_box.pt2.col05 .detail p {
    background:  #ed7041;
}

.program_list_block .program_box .detail p span {
    margin-left:  5px;
}

.program_list_block .program_box:nth-child(2n+1) p span {
    margin-left:  0;
    margin-right:  5px;
}

.program_list_block .program_box.pt1 .detail .example {
    display:  block;
    font-size:  20px;
    margin-top:  10px;
}

.program_list_block .program_box.list01 {
    border:  1px solid #66ba5a;
}

.program_list_block .program_box.list01 .img_box {
    width:  540px;
}

.program_list_block .program_box.list01 .detail p {
    background:  #66ba5a;
}

.program_list_block .program_box.list01 .detail .example {
    color:  #66ba5a;
}

.program_list_block .program_box.list02 {
    border:  1px solid #d780ea;
    color:  #d780ea;
}

.program_list_block .program_box.list02 .detail p {
    background:  #d780ea;
}

.program_list_block .program_box.list02 .detail .example {
    color:  #d780ea;
}

.program_list_block .program_box.list03 {
    border:  1px solid #f4995a;
    color:  #f4995a;
}

.program_list_block .program_box.list03 .detail p {
    background:  #f4995a;
}

.program_list_block .program_box.list03 .detail .example {
    color:  #f4995a;
}

.program_list_block .program_box.list04 {
    border:  1px solid #ee7185;
    color:  #ee7185;
}

.program_list_block .program_box.list04 .detail p {
    background:  #ee7185;
}

.program_list_block .program_box.list04 .detail .example {
    color:  #ee7185;
}

.program_list_block .program_box.list05 {
    border:  1px solid #578dce;
    color:  #578dce;
}

.program_list_block .program_box.list05 .detail p {
    background:  #578dce;
}

.program_list_block .program_box.list05 .detail .example {
    color:  #578dce;
}

@media screen and (max-width: 1160px) {
    #program_list01 {
        width:  94.13vw;
    }

}

@media screen and (max-width: 900px) {
    #program_list01 {
        width:  92.88vw;
        height:  auto;
        margin:  10vw auto 12.8vw;
    }

    #program_list01 h4.title {
        width:  80.44vw;
        height:  13vw;
        text-align:  center;
        line-height:  13vw;
        font-size:  6.15vw;
        margin:  0 auto 6.7vw;
        border-radius:  5.55vw;
        filter:  drop-shadow(0 0.67vw 1.33vw #d5d3b3);
        -webkit-filter:  drop-shadow(0 0.67vw 1.33vw #d5d3b3);
    }

    .program_list_block .sub_title {
        font-size:  6.15vw;
        -webkit-text-stroke-width:  0.6vw;
        paint-order:  stroke;
        margin-bottom:  6.4vw;
    }

    .program_list_block .sub_title.fst {
        margin-bottom:  3.2vw;
    }

    .program_list_block .five_regions_text {
        font-size:  6.8vw;
        margin-bottom:  6.8vw;
    }

    .program_list_block .program_box {
        width:  100%;
        height:  92.88vw;
        background:  white;
        font-size:  3.84vw;
        border-radius:  2.22vw;
        margin-bottom:  6.8vw;
        display:  block;
        padding:  6.66vw 4.88vw 0;
    }

    .program_list_block .program_box.pt1, .program_list_block .program_box.pt2 {
        width:  100%;
        height:  auto;
        font-size:  3.84vw;
        border-radius:  2.22vw;
        margin-bottom:  6.8vw;
        padding:  6.66vw 4.88vw;
    }

    .program_list_block .program_box.pt1 .detail .example {
        font-size:  3.2vw;
    }

    .program_list_block .program_box.pt1 .img_box {
        width:  72.8vw;
        margin:  10px auto 0;
    }

    .program_list_block .program_box.list01 .img_box {
        width:  80.88vw;
    }

    .program_list_block .program_box:last-child,.program_list_block .program_box.pt2:last-child {
        margin-bottom:  13.6vw;
    }

    .program_list_block .program_box .detail {
        width:  100%;
        height:  auto;
        letter-spacing:  0.05em;
    }

    .program_list_block .program_box .detail p, .program_list_block .program_box.pt2 .detail p {
        width:  100%;
        height:  12.88vw;
        color:  white;
        font-size:  6.15vw;
        margin-bottom:  7.22vw;
        letter-spacing:  0.04em;
        display:  flex;
        align-items:  center;
        justify-content:  center;
    }

    .program_list_block .program_box .detail p span {
        display:  none;
    }

    .program_list_block .program_box:nth-child(2n+1) p span {
        margin-left:  0;
        margin-right:  0;
    }

    .program_list_block .program_box .sp img {
        height:  auto;
        margin:  0 auto;
    }

    .program_list_block .program_box.list01 img {
        width:  61.33vw;
    }

    .program_list_block .program_box.list02 img {
        width:  53vw;
        margin-top:  2.22vw;
    }

    .program_list_block .program_box.list03 img {
        width:  49.33vw;
        margin-top:  2.22vw;
    }

    #program_list .program_box.list04 img {
        width:  52.66vw;
        margin-top:  2.22vw;
    }

    .program_list_block .program_box.list05 img {
        width:  52.22vw;
        margin-top:  4vw;
    }

    .program_list_block .program_box.list06 img {
        width:  55.88vw;
        margin-top:  4vw;
    }

}

@media screen and (max-width: 900px) {
    #program .program-features, #program .program-materials, #program .program-five-intro {
        font-size:  3.84vw;
        line-height:  1.6;
    }

    #program .program-feature {
        margin-bottom:  8vw;
    }

    #program .program-pill {
        min-width:  0;
        width:  fit-content;
        padding:  8px 24px;
        font-size:  5.5vw;
        margin-bottom:  6vw;
    }

    #program .program-five-intro {
        margin:  0 0 6vw;
    }

    #program .program-materials {
        margin-top:  9vw;
        margin-bottom:  10vw;
    }

    #program .program-material {
        padding:  20px;
        border-radius:  18px;
    }

    #program .program-material h3 {
        font-size:  5vw;
        gap:  12px;
    }

    #program .program-material h3 small {
        font-size:  3.84vw;
    }

    #program .program-material-grid {
        grid-template-columns:  minmax(0, 1fr);
        gap:  22px;
    }

    #program .program-material-body {
        font-size:  3.84vw;
        line-height:  1.6;
    }

    #program .program-material:first-of-type figure {
        max-width:  290px;
    }

}

/* 冒頭の３つの青帯を、最長見出しに合わせた幅に統一 */
#program .program-feature .program-pill {
    width: calc(17em + 64px);
    max-width: 100%;
}

@media screen and (max-width: 900px) {
    #program .program-feature .program-pill {
        width: 100%;
    }
}

/* スマートフォンのみ、冒頭の説明文の周りを背景色でぼかす */
@media screen and (max-width: 900px) {
    #program .program-feature p {
        text-shadow:
            0 0 2px #e1f7ff,
            0 0 4px #e1f7ff,
            0 0 6px #e1f7ff,
            0 0 8px #e1f7ff,
            2px 0 4px #e1f7ff,
            -2px 0 4px #e1f7ff,
            0 2px 4px #e1f7ff,
            0 -2px 4px #e1f7ff;
    }
}

/* 写真を削除した４領域は、説明文の幅を広げて中央に配置 */
#program_list01 .program_box.program-text-only {
    display: block;
}

#program_list01 .program-text-only .detail {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

#program_list01 .program-text-only .detail p > span {
    display: none;
}