@charset "UTF-8";
/*===========================================================================
*   sub
===========================================================================*/
#sub .sub_fv {
    position:relative;
    margin-bottom:90px;
    width:100%;
    height:250px;

    & i {
        display:inline-block;
        margin-inline:0.25em;
        width:0.75em;
        height:1lh;
        vertical-align:bottom;
        background:url(../../img/icon_cross.svg) no-repeat center / contain;
    }
    & img { width:100%; height:100%; object-fit:cover; object-position:center bottom}
    & .catch {
        position:absolute;
        inset:50% auto auto calc((100% - var(--content-width-large)) / 2);
        translate:0 -50%;
        color:#fff;
        font-family:var(--noto-sans);
        font-weight:bold;
        /* viewport:768-1000px  30-40px */
        font-size:clamp(1.875rem, calc(-0.194rem + 4.31vw), 2.5rem);
        letter-spacing:0.25em;
    }
    & .catch small {
        display:block;
        font-family:var(--noto-serif);
        /* viewport:768-1000px  19.5-26px */
        font-size:clamp(1.219rem, calc(-0.126rem + 2.802vw), 1.625rem);
        font-weight:normal;
        letter-spacing:0.1em;
    }
}

/*==================================================
*   sub / lecture
==================================================*/
#sub.lecture {

    & .per {
        justify-content:start;
        padding-inline:calc((100% - var(--content-width-large)) / 2);
    }
    & .lecture_info {
        container:lecture_info / inline-size;
        padding-block:1rem 0;

        & img { width:100%;}
        & .info_box {
            --row-gap:clamp(3.5rem, calc(-3.056rem + 13.657vw), 7.188rem); /* viewport:768-1200px  56-115px */
            --column-gap:clamp(2.625rem, calc(-2.153rem + 9.954vw), 5.313rem);/* viewport:768-1200px  42-85px */

            display:grid;
            grid-template-columns:repeat(2, 1fr);
            gap:var(--row-gap) var(--column-gap);
            /* viewport:768-1000px  45-60px */
            margin-top:clamp(2.813rem, calc(-0.291rem + 6.466vw), 3.75rem);
        }

        /* box1 */
        & .box1 > *:not(:first-child) { margin-top:1.5rem;}
        & .box1 p {
            /* viewport:768-1000px  20-22px */
            font-size:clamp(1.25rem, calc(0.836rem + 0.862vw), 1.375rem);
        }
        & .box1 p:last-of-type {
            /* viewport:768-1000px  18-20px */
            font-size:clamp(1.125rem, calc(0.711rem + 0.862vw), 1.25rem);
            color:var(--blue);
            font-family:var(--noto-sans);
        }
        & .box1 li {
            padding:0.25em 0.5em;
            /* viewort:768-1000px  18-20px */
            font-size:clamp(1.125rem, calc(0.711rem + 0.862vw), 1.25rem);
            font-family:var(--noto-sans);
        }
        & .box1 li:nth-child(odd) { background-color:#DCDDDD;}
        & .box1 li:nth-child(even) { background-color:#F7F8F8;}

        /* box2 */
        & .box2 { container:box2 / inline-size;}
        & .box2 .day { display:flex; flex-wrap:wrap; align-items:baseline; gap:1rem;}
        & .box2 .day + .day { margin-top:1rem;}
        & .box2 .day .label {
            width:7em;
            /* viewort:768-1000px  22-26px */
            font-size:clamp(1.375rem, calc(0.547rem + 1.724vw), 1.625rem);
            text-align-last:justify;
            padding-inline:0.75em;
            border-radius:1rem;
        }
        & .box2 :nth-child(1 of .day) .label { background-color:#D2E2ED; color:#607BC3;}
        & .box2 :nth-child(2 of .day) .label { background-color:#E4E4E4;}
        & .box2 .day div:not(.label) {
            /* viewport:768-1000px  24-28px */
            font-size:clamp(1.5rem, calc(0.672rem + 1.724vw), 1.75rem);
        }
        & .box2 p {
            margin-top:1em;
            /* viewport:768-1000px  26-30px */
            font-size:clamp(1.625rem, calc(0.797rem + 1.724vw), 1.875rem);
        }
        & .box2 small { font-size:14px; font-family:var(--noto-sans);}
        & .box2 .price_wrap {
            /* viewport:768-1000px  48-64px */
            --box2-gap:clamp(3rem, calc(-0.31rem + 6.897vw), 4rem);

            display:flex;
            margin-top:2rem;
            gap:var(--box2-gap);
        }
        & .box2 .price_wrap dl {
            font-family:var(--noto-sans);
            /* viewport:768-1000px  18-20px */
            font-size:clamp(1.125rem, calc(0.711rem + 0.862vw), 1.25rem);
        }
        & .box2 .price_wrap dl:last-of-type:before { 
            width:1px;
            height:100%;
            inset:0 calc(100% + var(--box2-gap) / 2) auto auto;
            background-color:currentColor;
        }
        & .box2 .price_wrap dt { margin-bottom:0.5rem; color:var(--blue);}

        @container box2 (width < 450px) {
            .box2 .price_wrap { flex-direction:column;}
            .box2 .price_wrap dl:last-of-type:before {
                width:100%;
                height:1px;
                inset:auto 0 calc(100% + var(--box2-gap) / 2) auto;
            }
        }

        /* box3 */
        & .box3 {
            padding-block:1rem;
            font-family:var(--noto-sans);
            /* viewport:768-1000px  18-20px */
            font-size:clamp(1.125rem, calc(0.711rem + 0.862vw), 1.25rem);
        }
        & .box3:before {
            width:1px;
            height:100%;
            background-color:#000;
            inset:0 calc(100% + var(--column-gap) / 2) auto auto;

        }
        & .box3 dd { margin-top:1em;}
    }

    & .info_other {
        margin-top:2.5rem;
        width:100%;
        font-family:var(--noto-sans);

        & tr { border-top:solid 1px;}
        & :is(th, td) { padding-block:0.75rem;}
        & th {
            padding-right:1em;
            width:13em;
            color:var(--blue);
            text-align:start;
            /* viewport:768-1000px  20-22px */
            font-size:clamp(1.25rem, calc(0.836rem + 0.862vw), 1.375rem);
            vertical-align:top;
        }
        & td {
            /* viewport:768-1000px  16-18px */
            font-size:clamp(1rem, calc(0.586rem + 0.862vw), 1.125rem);
        }
        & td li {
            --indent:1em;

            padding-left:var(--indent);
            text-indent:calc(var(--indent) * -1);
        }
        & td li:before { content:"●"; font-size:inherit;}
        & tr:last-of-type td p { font-family:var(--noto-serif);}
        & tr:last-of-type td p:nth-of-type(1) { font-size:clamp(1.688rem, calc(-0.175rem + 3.879vw), 2.25rem); /* viewport:768-1000px  27-36px */;}
        & tr:last-of-type td p:nth-of-type(2) { font-size:clamp(1.406rem, calc(-0.145rem + 3.233vw), 1.875rem); /* viewport:768-1000px  22.5-30px */;}
        & tr:last-of-type td p:nth-of-type(3) { font-size:clamp(1.219rem, calc(-0.126rem + 2.802vw), 1.625rem); /* viewport:768-1000px  19.5-26px */;}
    }
}


@media (max-width: 1000px) {
    #sub.lecture .lecture_info .info_box { grid-template-columns:1fr;}
    #sub.lecture .lecture_info .box3:before { 
        width:100%;
        height:1px;
        inset:auto 0 calc(100% + var(--row-gap) / 2) auto;
    }
}
@media (max-width: 768px) {
}

@container lecture_info (width < 600px){
    #sub.lecture .info_other {
        & :is(th, td) { display:block; width:100%;}
        & td { padding-top:0;}
    }
}



/*==================================================
*   sub / style, activity
==================================================*/
#sub:is(.style, .activity) {
    --main-color:var(--blue);
    --sub-color:var(--blue-light);
    --table-color:#fff;

    & .sub_fv .catch { font-family:var(--noto-serif);}

    &  .d_6m,  .d_6m + .content_box { --main-color:#4F95AB; --sub-color:#D9E6E8; --table-color:#F3F8F8;}
    &  .d_7m,  .d_7m + .content_box { --main-color:#5D86CD; --sub-color:#D9E6F2; --table-color:#F0F4F8;}
    & .d_10m, .d_10m + .content_box { --main-color:#6C74A9; --sub-color:#CECDDF; --table-color:#F5F0F6;}
    &    .ct,    .ct + .content_box { --main-color:#B49184; --sub-color:#E3D6D1; --table-color:#F4EFED;}
    &    .ac,    .ac + .content_box { --main-color:#929C00; --sub-color:#DCDBA2; --table-color:#F7F7EA;}
    &  .pool,  .pool + .content_box { --main-color:#4F95AB; --sub-color:#D9E6E8; --table-color:#F0F4F8;}

    & .per { color:var(--main-color); background-color:var(--sub-color);}
    & .per:not(:first-of-type) {
        /* viewport:768-1000px  105-140px */
        margin-top:clamp(6.563rem, calc(-0.679rem + 15.086vw), 8.75rem);
    }
    & a.btn { margin:2rem auto; background-color:var(--main-color); color:#fff; border:none;}
    & a.btn:after { background-color:currentColor;}
    & .content_box {

        & h2 { margin-top:3rem;}
        & h2:not(:first-of-type) {
            /* viewport:768-1000px  105-140px */
            margin-top:clamp(6.563rem, calc(-0.679rem + 15.086vw), 8.75rem);
        }
        & p {
            /* viewport:768-1000px  16.5-22px */
            font-size:clamp(1.031rem, calc(-0.107rem + 2.371vw), 1.375rem);
            margin-top:0.5em;
        }
        & img {
            /* viewport:768-1000px  36-48px */
            margin-top:clamp(2.25rem, calc(-0.233rem + 5.172vw), 3rem);
        }
        & table {
            /* viewport:768-1000px  48-64px */
            margin-top:clamp(3rem, calc(-0.31rem + 6.897vw), 4rem);
            width:100%;
            font-family:var(--noto-sans);
        }
        & table tr { border-top:solid 1px #000;}
        & table tr:last-of-type { border-bottom:solid 1px #000;}
        & table tr:nth-child(odd) :is(th, td) { background-color:var(--table-color);}
        & table :is(th, td) { padding:0.5rem 1rem;}
        & table th {
            width:260px;
            color:var(--main-color);
            /* viewport:768-1000px  20-22px */
            font-size:clamp(1.25rem, calc(0.836rem + 0.862vw), 1.375rem);
            font-weight:normal;
            text-align:start;
        }
        & table td {
            /* viewpotr:768-1000px  16-18px */
            font-size:clamp(1rem, calc(0.586rem + 0.862vw), 1.125rem);
        }
        & table span.tel { color:var(--main-color); font-weight:bold;}
    }
}
@media (width < 768px){
    #sub:is(.style, .activity) .content_box {

        & table :is(th, td) { display:block; width:100%;}
        & table th { text-align:center;}
        & table td { padding-top:0;}
    }
}