/* ========================================
// 上部　navigation
=========================================== */
.sub-nav-wrap {
    --sub-nav-bg: var(--main-color);
    --sub-nav-h: 60px;
}
.sub-nav ul { height: inherit; }
.sub-nav li {
    width: 173px;
    height: 50%;
    border-right: var(--border-base);
    border-width: 1px;
}
.sub-nav li a {
    display: block;
    width: 100%;
    height: 100%;
}
.sub-nav li a:hover { color: var(--color-white); }


main h3 { font-size: clamp(2em, 3vw, 2.25em); font-weight: 900; }
.text-large { font-size: clamp(1.15em, 1.5vw, 1.25em); }
.text-small { font-size: 14px; }
.text-medium { font-size: clamp(1rem, 1.3vw, 1.125em); }
/* ========================================
// #fv
=========================================== */
#fv { padding-block: var(--pad-4) var(--pad-4); }
#fv .bubble {
    --bubble-w: fit-content;
    padding-inline: 1em;
    left: 300px;
    top: -10px !important;
}
#support #fv.index-fv .title-group figure {
    width:20%;
    z-index: 10;

    img {
        width:100%;
        height:auto;
    }
}
#support #fv:not(.index-fv) .title-group figure {
    height:110px;
    z-index: 10;

    img {
        width:auto;
        height:100%;
    }
}

/* ===== #entry-target ワオキッズの入会対象 ===== */
#entry-target { background-color: var(--bgc); }
#entry-target .quote-block { 
    padding: var(--pad-4) var(--pad-5);
    background-color: var(--color-white);
    margin-top: var(--space-5);
}
#entry-target .quote-block > span {
    display: inline-block;
    width: 42px;
    height: 42px;
    background: url(../_img/support/part-quote.svg);
    position: absolute;
}
#entry-target .quote-block > span.left-top { top: -1px; left: -1px;}
#entry-target .quote-block > span.right-top { 
    top: -1px; right: -1px;
    transform: rotate(90deg);
}
#entry-target .quote-block > span.right-bottom { 
    bottom: -1px; right: -1px;
    transform: rotate(-180deg);
}
#entry-target .quote-block > span.left-bottom { 
    bottom: -1px; left: -1px;
    transform: rotate(270deg);
}
#entry-target .quote-block section { padding-block: var(--pad-4) 0; height: 100%; }
#entry-target .quote-block .button_animation { margin-top: 0; }
#entry-target .quote-block .button.button-small {
    --button-w: 160px;
    --button-h: 35.5px;
    letter-spacing: 0;
}



#entry-limited .radius-box  {
    border: var(--border-base);
    border-width: 2px;
    border-color: var(--main-color);
    --bgc: var(--color-white);
    border-radius: var(--radius);
    padding: var(--pad-2);
}

#entry-vision { top: -6px;}
#entry-vision .radius-box {
    border-radius: var(--radius);
    padding: var(--pad-2) var(--pad-4) var(--pad-3);
    margin-top: var(--space-2);
}
#entry-vision .round-box {
    display: inline-block;
    --round-w: fit-content;
    --round-h: 21px;
    --bgc: var(--color-white);
    line-height: normal;
    font-size: 11px;
    border-width: 2.9px;
    padding-inline: 1em;
}
#entry-vision .radius-box p:last-child { margin-top: var(--space-2); }
#entry-vision .round-box span { vertical-align: middle;}
#entry-vision.button { margin-top: auto;}

/* ===== 3つの項目 ===== */
#about-waokids { padding-bottom: 0; }
#support .support-list p:has(.text-line) { font-size: 1.625em;}
#support .support-list .text-line {
    display: inline-block;
    background-image: linear-gradient(transparent 53%, var(--line-color) 0%);
}
#support .support-list .icon.arrow::before {
    display: block;
    width: 25px;
    height: 30px;
    background: url(../_img/support/about-arrow.svg) no-repeat center / contain;
    margin: var(--space-1) auto; 
}
#support .support-list li article {
    width: 360px;
    height: 240px;
    aspect-ratio: 360 / 240;
    background:url(../_img/support/about-bg.svg) no-repeat top center / contain;
    padding-block: var(--pad-3);
    padding-inline: var(--pad-6);
}
#support .support-list article.step3 { padding-inline: var(--pad-5) var(--pad-3);}
#support .support-list article .step {
    position: absolute;
    right: 50px;
    top: -68px;
    --size: 108px;
    width: var(--size);
    height: var(--size);
}
#support .support-list article .list-block {
    display: inline-block;
    margin-top: 1rem;
}
#support .support-list article h3 { 
    font-size: 2.35em;
    letter-spacing: 0.12em;
}
#support .support-list article h3 > span {
    display: block;
    font-size: 0.95rem;
    margin-bottom: .5rem;
    letter-spacing: 0.05em;
}
#support .support-list article[class*=step]::after {
    content: '';
    display: block;
    width: var(--icon-size-w);
    height: var(--icon-size-h);
    background: var(--icon-image) no-repeat center / contain;
    position: absolute;
    bottom: 65px;
    right: var(--pos-r);
}
#support .support-list article.step1::after {
    --icon-size-w: 86px;
    --icon-size-h: 71px;
    --icon-image: url(../_img/index/icon-request-info.svg);
    --pos-r: 40px;
}
#support .support-list article.step2::after {
    --icon-size-w: 59px;
    --icon-size-h: 73px;
    --icon-image: url(../_img/index/icon-school-tour.svg);
    --pos-r: 55px;
}
#support .support-list article.step3::after {
    --icon-size-w: 92px;
    --icon-size-h: 94px;
    --icon-image: url(../_img/index/icon-info-session.svg);
    --pos-r: 60px;
}
#support .support-list .button_animation { margin-top: var(--space-1);}


/* ===== #entry-step ===== */
#entry-step { padding-bottom: 0; }
#entry-step > div > ul { background-color: var(--bgc); margin-top: var(--pad-5); }
#entry-step > div > ul > li { padding: var(--pad-6) var(--pad-5);  line-height: 2;}
#entry-step h4 { font-size: clamp(1.4em, 1.2vw, 1.625em); }
#entry-step h4 > span { font-size: 2em; margin-right: 1rem;}
#entry-step .step1 figure {
    width: 191px;
    height: 142px;
}
#entry-step .step1 .button.button-simple { 
    --simple-h: 80px;
    --simple-w: 100%;
    max-width: 430px;
    justify-content: start;
    gap: var(--gap-3);
    padding-left: 2em;
    font-size: 1.5em;
}
#entry-step .step1 .info::before {
    background-image: url(../_img/support/info-yellow.svg);
}
#entry-step .step2 figure {
    width: 210px;
    height: 167px;
}
#entry-step .step3 figure {
    width: 212px;
    gap: 182px;
}
#entry-step .step3 .round-box {
    max-width: 416px;
    width: 100%;
    height: 42px;
    border-width: 2px;
    background-color: var(--color-white);
}
#entry-step .line-dashed:not(.step3)::after {
    content: '';
    display: block;
    width: 100%;
    height: 5px;
    background: url(../_img/support/line-dashed.svg) no-repeat center / contain;
    bottom: calc(-1 * var(--pad-6));
}


#entry-price {
    padding-top:40px;
}


/* ===== pre kids club ===== */
#pre-kids-club .main-block::before,
#pre-kids-club .main-block::after {
    content: '';
    display: block;
    width: calc(100% + 4px);
    height: 4px;
    background-color: var(--color-black);
    border-radius: var(--radius-inner);
    position: absolute;
    inset: 0;
    left: -2px; 
    margin: auto;
}
#pre-kids-club .main-block::before { bottom: unset; }
#pre-kids-club .main-block::after { top: unset; }

#pre-kids-club h3 {
    display: inline-block;
    background-color: var(--main-color);
    font-size: 1.8em;
    padding: var(--pad-3) var(--pad-6);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -65px;
}
#pre-kids-club h3 .en {
    display: block;
    text-transform: uppercase;
    font-size: 0.625em;
    font-weight: normal;
    margin-bottom: calc(var(--space-1) / 2);
}
#pre-kids-club h3::before,
#pre-kids-club h3::after {
    content: '';
    display: block;
    width: 4px;
    height: calc(100% + 4px);
    background-color: var(--color-black);
    border-radius: var(--radius-inner);
    position: absolute;
    inset: 0;
    margin: auto;
}
#pre-kids-club h3::before { right: unset;}
#pre-kids-club h3::after { left: unset;}

#pre-kids-club section:not(:last-of-type) { padding-block: var(--section-space) 0; }
#pre-kids-club > .width-limiter .main-block {
    padding-inline: var(--pad-9);
    padding-top: var(--pad-3);
}
#pre-kids-club section .round-box {
    --round-w: fit-content;
    --round-h: 41px;
    border: none;
    padding-inline: var(--pad-2);
    font-size: 1.5em;
}
#pre-kids-club section p { line-height: 2;}
#pre-kids-club section .dot-original { margin-left: 1rem; }
#pre-kids-club section .dot-original li { 
    text-indent: 1rem;
    margin-bottom: calc(var(--space-1) / 2);
}
#pre-kids-club section .dot-original li::before {
    content: '';
    display: block;
    width: 1rem;
    height: 1rem;
    border: var(--border-base);
    border-width: 3px;
    background-color: var(--main-color);
    border-radius: var(--radius-inner);
    position: absolute;
    left: -1em;
    top: 4px;
}
#pre-kids-club section .dot-original li span { display: block; margin-bottom: var(--space-1);}


.support-cta { padding-bottom: var(--pad-9);}
.support-cta .button.button-simple {
    --simple-w: 430px;
    --simple-h: 80px;
    font-size: 1.5em;
    margin-top: var(--space-1);
}
.support-cta .button.button-simple .icon { 
    transform: translateX(-100%);
}



/* ===== 共通ヘッダー ===== */
.section-wrap { 
    overflow-x: hidden;
    overflow-y: visible;
}
/* ===== fv ===== */
#fv .title-group figure {
    --figure-w: 113px;
    --figure-h: 110px;
}
#fv .title-group .section-title .en { --title-en: 1.5em;}

/* 共通レイアウト */
/* ===== appeal ===== */
#appeal { 
    padding-top: var(--pad-6);
}
#appeal h3 {
    font-size: 1.875em;
    line-height: 2;
}

#appeal figure.main-photo {
    width: clamp(550px, 10vw, 627px);
    height: auto;
    aspect-ratio: 1 / 1;
    position: absolute;
    top: -250px;
    right: -240px;
    z-index: -1;
}

.block-bottom {margin-top: var(--space-8);}


@media (max-width:920px) {
    #entry-target .quote-block { height: auto;}
}
@media (max-width:820px) {
    #fv .bubble {
        left:auto !important;
        right:0;
    }
}
@media (max-width: 520px) {
    .sub-nav li:last-of-type { border-left: var(--border-base); border-width: 1px;}

    #support #fv:not(.index-fv) {
        padding-top:0;
    }
    #support #fv:not(.index-fv) .title-group figure {
        height: auto;
        padding-bottom:20px;
    }

    #support #fv .title-group { --gap: 0; flex-direction: column; align-items: start;}
    #entry-target .quote-block { margin-top: var(--pad-4);}
    #entry-target .quote-block { padding-inline: var(--pad-2); }
    #entry-target .quote-block picture { display: block; }
    #entry-target .quote-block picture img { width: 100%;height: 100%;}

    #support .support-list li article { 
        width: 100%;
        max-width: 360px;
        margin-inline: auto;
        height: 100%;
        padding-inline: var(--pad-4);
    }
    #support .support-list article.step3 { padding-inline: var(--pad-3) var(--pad-2); }

    #entry-step > div > ul > li { padding-inline: var(--pad-3);}
    #entry-step .step1 .button.button-simple { font-size: 1.1rem;}
    #entry-step .step3 .round-box {
        height: auto;
        font-size: 1rem;
        padding: var(--pad-2);
    }

    #pre-kids-club {
        margin-top:40px;
    }
    #pre-kids-club section { padding-block: var(--pad-5)}
    #pre-kids-club h3 {
        font-size: 1.2em;
        width: 90%;
        padding: var(--pad-1);
    }
    #pre-kids-club > .width-limiter .main-block { padding-inline: 8%;}
    #pre-kids-club section .round-box { 
        font-size: 1rem; 
        height: auto;
        line-height: 1.5;
        padding:var(--pad-1);
    }
    #pre-kids-club section .dot-original {font-size: 14px; margin-left: 0;}
    #pre-kids-club section .dot-original li { text-indent: 7px;}
    .line-quote::before, .line-quote { line-height: 1.2;}
    .line-quote::before, .line-quote::after { height: 3em; position: absolute;}
    .line-quote::before {
        top: 0;
        left: 30px;
    }
    .line-quote::after { 
        top: 0px;
        right: 30px;
    }


    /* ===== 共通ヘッダー部分 520 ===== */

    #fv.index-fv { padding-top: 0;}
   #fv:not(.index-fv) { padding-bottom: 0;}
   #fv .title-group { 
        flex-direction: column-reverse;
        gap: var(--gap-2);
    }
   #fv div:has( > .bubble ) { gap: var(--gap-2);}

   #fv .title-group figure { align-self: center; }
   #fv .title-group .ja {  font-size: 1.98em; }

    #support #fv.index-fv .title-group figure {
        width: 60%;
        height:auto;
        top:-20px;
    }

    #appeal figure.main-photo {
        position: relative;
        top: 0;
        right: 0;
        width: 100%;
    }

    #appeal h3 { font-size: 1.5em;}

}