/* ==== mv ==== */
.mv {
    overflow: hidden;
    z-index: 1;
}
.mv > .width-limiter {
    height: calc(100vh - var(--header-offset));
    max-width: var(--container-main) !important;
    z-index: 3;
}
.mv-copy {
    position: absolute;
    left: 20px;
    bottom: var(--pad-8);
}
.mv-copy .text-large picture { display: block; }
.mv-copy .text-large picture img {
    width: 100%;
    object-fit: cover;
}
.mv-copy .text-small { margin-top: var(--space-3); }
/* == 新年度募集状況 == */
a:has(.button-enrollment) {
    display: inline-block;
    position: absolute;
    right: 20px;
    bottom: 45px;
    margin:0;
}
a:has(.button-enrollment):hover .button-enrollment { background-color: rgba(237, 65, 153, 1); }
.button-enrollment {
	--size: 280px;
    --circle-bg: rgba(237, 65, 153, .9);
}
.button-enrollment figure {
    width: 77px;
    height: 46px;
    line-height: 0;
}
.button-enrollment > p:not(.button) {
    font-size: 3.2rem;
    text-align: center;
    line-height: 1.5;
    font-weight: bold;
    margin: 0;
}
.button-enrollment > p:not(.button) > span {
    display: block;
    font-size: 0.64em;
    line-height: 1;
    font-weight: normal;
}
/* == 新年度募集状況 - ボタン部分 == */
.button-enrollment a:has(.button) {
    font-size: 0.3em;
    color: var(--color-white);
    margin: 0;
    z-index: 1;
}
.button-enrollment .button.button-small {
	--button-w: 88px;
	--button-h: 33px;
}
.button-enrollment .button.button-small .text-block .ja { font-size: 15px;}

/* ===== News - お知らせ ===== */
#news { padding: calc(var(--section-space) / 2) 0;}
.section-title.news .en { 
    font-size: 1.75em;
    font-weight: bold;
}
.section-title.news .ja { font-size: 0.875em; }
#news .news-list > li {
    max-width: 300px;
    height:100%;
    font-size: 14px;
    padding-inline: var(--pad-2);
    border-left: var(--border-base);
    border-width: .5px;
}
#news .news-list > li a {
    height:100%;
    display:block;
}
#news .news-list > li:last-child {
    border-right: var(--border-base);
    border-width: .5px;
}


/* ===== ワオキッズの募集状況 ===== */
#enrollment-status {  background-color: var(--main-color); }
#enrollment-status .width-limiter { padding-inline:0; }

/* 黒いカッコの線の部分 */
.status-block {
    background-color: var(--color-gray);
    border-radius: 10px;
    position: relative;
    container-type: inline-size;
}
@container (max-width: 520px) { 
  #enrollment-status .status-block--bottom::before,
  #enrollment-status .status-block--bottom::after,
  #enrollment-status .status-block--top::before,
  #enrollment-status .status-block--top::after {
    display: none;
  }
}
.status-block::before,
.status-block::after {
    content: '';
    display: block;
    width: 100%;
    height: 6px;
    background-color: var(--color-black);
    position: absolute;
    left: 0;
    right: 0;
    margin: 0;
    border-radius: 0 0 10px 10px;
}
.status-block::before { top: 0; }
.status-block::after { bottom: 0; }
.status-block--top {
    padding-block: var(--pad-8) var(--pad-4);
    padding-inline: var(--pad-5); 
}
.status-block--top::before, 
.status-block--top::after,
.status-block--bottom::before, 
.status-block--bottom::after {
    content: '';
    display: block;
    width: 6px;
    height: 409px;
    background-color: var(--color-black);
    position: absolute;
    border-radius: 0 0 10px 10px;
}
.status-block--top::before {
    top: 0;
    left: 0;
    border-radius: 10px 10px 0 10px;
}
.status-block--top::after {
    top: 0;
    right: 0;
    border-radius: 10px 10px 10px 0;
}
.status-block--bottom::before {
    bottom: 0;
    left: 0;
    border-radius: 0 0 0 10px;
}
.status-block--bottom::after {
    bottom: 0;
    right: 0;
    border-radius: 0 0 10px 0;
}
/* ===== 募集状況の年度表示 ===== */
.status-block .year {
    display: block;
    width: 136px;
    height: 123px;
    background: url(../_img/index/ribbon.svg) no-repeat center / contain;
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    padding-top: 20px;
    position: absolute;
    left: 55px;
    top: -10px;
}
.status-block .year > span {
    display: block;
    font-size: .4em;
    line-height: 1.8;
    letter-spacing: 2em;
    text-indent: 2em;
}
/* ===== 募集状況の見出し ===== */
.status-block h2 {
    font-size: 1.8em;
    max-width: 472px;
    text-align: center;
    background-color: var(--color-gray);
    border-radius: 5px;
    padding-block: .2em;
    position: absolute;
    left: 0;
    right: 0;
    top: -20px;
    margin: auto;
    --border-height: 55px;
}
.status-block h2::before,
.status-block h2::after {
    content: '';
    display: flex;
    justify-content: center;
    align-items: center;
    width: 6px;
    height: var(--border-height);
    background-color: var(--color-black);
    border-radius: 50rem;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}
.status-block h2::before { left: 0; }
.status-block h2::after { right: 0; }
/* ===== テーブル部分 ===== */
#enrollment-status .table-list { margin-bottom: var(--space-1); }
#enrollment-status .table-header { margin-bottom: 1rem;}
#enrollment-status ul li span {display: block;}
#enrollment-status ul li span.radius-box {
    height: clamp(25px, 1.8vw, 30px);
    font-size: clamp(10px, 0.7vw, 13px);
    padding: 4px;
    border: var(--border-base);
    border-width: 1px;
    border-radius: 5px;
    margin: 0 auto
}
#enrollment-status ul li .button_animation { 
    margin-top: 0;
    margin-inline: auto;
}
#enrollment-status ul li .address {
    display: block;
    font-size: clamp(9px, 0.96vw, 0.88em);
}
#enrollment-status ul li .school-block::before,
#enrollment-status ul li div::after {
    content: '';
    display: block;
    background-color: var(--color-black);
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}
#enrollment-status ul li .school-block::before {
    width: 6px;
    height: 60px;
    border-radius: var(--button-radius);
    left: -1.1em;
}
#enrollment-status ul li .partition::after {
    width: 1px;
    height: 60px;
    right: -.5rem;
}
#enrollment-status ul li .school {
    font-size: clamp(14px, 1.22vw, 1.25em);
    font-weight: bold;
}

/* ===== 募集状況のボタン ===== */
#enrollment-status table tbody td .btn_animation {
    --button-w: 80px;
    --button-h: 30px;
    --trigger-button: 30px;
}

/* ===== テーブル下のステータスリスト ===== */
#enrollment-status .status-list { margin-left: -2em; }
#enrollment-status .status-list span.status::after { display: none; }
#enrollment-status .status-list span.status {
    --size: 40px;
    width: var(--size);
    height: var(--size);
}

#enrollment-status .status-list span.status.ended + span { letter-spacing: 1.5em; }

/* ===== 募集状況枠外用 ===== */
#enrollment-status .status-notice span.status::after { display: none; }
#enrollment-status .status-notice { font-size: .87em; }
#enrollment-status .status-notice span.status {
    --size: 40px;
    width: var(--size);
    height: var(--size);
    margin-block: 0;
}
#enrollment-status .status-notice span.status.ended + span { letter-spacing: 1.5em; }

/* ===== //ここまで 募集状況  ===== */
/* ===== About - ワオキッズを知る ===== */
#about {
    overflow-x: hidden;
    padding-bottom: 190px;
    z-index: 0;
}
#about::before,
#about::after {
    content: '';
    display: block;
    width: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: auto;
    z-index: -10;
}
#about::before {
    --size: 1650px;
    width: var(--size);
    height: var(--size);
    background-color: var(--color-gray);
    border-radius: var(--radius-inner);
    z-index: -5;
    top: -300px;
    bottom: unset;
}
#about::after {
    top: unset;
    bottom: 0;
    height: 1000px;
    background: url(../_img/index/about-bg.webp) no-repeat bottom center / cover;
}
/* ===== #about レイアウト PC用 ===== */
#about .about-block {
    grid-template-rows: repeat(3, auto);
    row-gap: var(--gap-7);
    column-gap: 0;
}
#about .after-school-block {
    width: clamp(370px, 50vw, 550px);
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    padding-right: 4%;
    margin-left: auto;
}
#about .results-block {
    width: clamp(370px, 50vw, 550px);
    padding-left: var(--pad-4);
    grid-column: 3 / 5;
    grid-row: 1 / 2;
}
#about .title-group {
    grid-column: 1 / 5;
    grid-row: 3;
    margin-top: var(--space-1);
}
#about .center-text { 
    --ribbon-h: 60px;
    line-height: var(--ribbon-h); 
}
#about .center-text.first {
    grid-column: 1 / 2;
    grid-row: 2;
}
#about .center-text.ribbon-block {
    grid-column: 2/4;
    grid-row: 2;
    width: 613px;
}
#about .center-text.last {
    grid-column: 4 / 5;
    grid-row: 2;
}
/* ===== #about -　見出し ===== */
#about .title-group {
    --border-w: 6px;
    --border-h: 40px;
    --shift: -2px;
}
#about .title-group h2 .h2-inner {
    width: 240px;
    height: 180px;
    background-color: var(--color-white);
    font-size: 1.875rem;
    gap: var(--gap-1);
}
#about .title-group h2 .en {
    text-transform: uppercase;
    font-weight: bold;
}
#about .title-group h2 .ja { color: var(--color-pink); }
/* ===== #about 見出しのカッコ部分 ===== */
#about .title-group [class*="brackets"]::before,
#about .title-group [class*="brackets"]::after {
    content: '';
    display: block;
    width: var(--border-w);
    height: var(--border-h);
    border-radius: var(--radius-inner);
    background-color: var(--color-black);
    position: absolute;
    z-index: 1;
}
#about .title-group [class*="brackets"]::after {
    width: var(--border-h);
    height: var(--border-w);
}
#about .title-group .brackets-top::before,
#about .title-group .brackets-top::after {
    top: var(--shift);
    left: var(--shift);
}
#about .title-group .brackets-top--right,
#about .title-group .brackets-bottom--right {
    display: block;
    width: var(--border-h);
    height: var(--border-h);
    position: absolute;
    top: var(--shift);
    right: var(--shift);
}
#about .title-group .brackets-top--right::before { right:0; }

#about .title-group .brackets-bottom::before,
#about .title-group .brackets-bottom::after {
    bottom: var(--shift);
    left: var(--shift);
}
#about .title-group .brackets-bottom--right {
    top: unset;
    bottom: var(--shift);
}
#about .title-group .brackets-bottom--right::before {
    top: 0;
    right:0;
}
#about .title-group .brackets-bottom--right::after { bottom: 0; }

#about .concept-block .catch-copy {
    font-size: 1.8em;
    font-weight: bold;
    margin-top: var(--space-1);
    letter-spacing: 0.012em;
}
#about .concept-block .catch-text {
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 0.2em;
}
/* ===== #about ピンクの吹き出し部分 ===== */
#about .bubble {
    background-color: var(--color-pink);
    top: -40px;
    right: 90px;
}
/* ===== 数字部分 ===== */
#about .number::before, #about .number::after {
    content: '';
    display: block;
    position: absolute;
}

/* ===== #about After School ===== */
#about .after-school-block .number::before {
    width: 129px;
    height: 180px;
    background: url(../_img/index/about-afterschool01.svg) no-repeat center / contain;
    right: 0px;
    top: -120px;
}
#about .after-school-block .number::after {
    width: 190px;
    height: 116px;
    background: url(../_img/index/about-afterschool02.svg) no-repeat center / contain;
    right: 20px;
    bottom: 40px;    
}

/* ===== #about 利用実績 ===== */
#about .results-block::before { /*PCの時縦ライン*/
    content: '';
    display: block;
    width: 4px;
    height: 375px;
    background-color: var(--color-black);
    border-radius: var(--radius-inner);
    position: absolute;
    top: 20px;
    left: -2px;
    margin: auto;
}
#about .results-block .number::before {
    content: '';
    display: block;
    width: clamp(100px, 40vw ,169px);
    aspect-ratio: 169 / 195;
    background: url(../_img/index/about-usage-results01.svg) no-repeat;
    position: absolute;
    top: -60px;
    left: calc(90% + 60px);
}
#about .text {
    grid-template-columns: 120px 1fr;
    grid-template-rows: 1fr 1fr;
    margin-bottom: var(--space-1);
}
 #about .text > figure {
    width: 80px;
    height: 80px;
 }
#about .text > span {
    display: block;
    font-family: "Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",system-ui,sans-serif;
}
#about .large-text {
    display: inline-block;
    font-size: 1.75em;
    grid-column: 2;
    grid-row: 1;
}
#about .small-text {
    font-size: 1rem;
    letter-spacing: 0.06em;

    grid-column: 2;
    grid-row: 2;
}

#about .number { text-transform: uppercase; }
#about .number > span {
    display: block;
    font-size: 1.9em;
    line-height: 2;
    letter-spacing: .06em;
}
#about .results-block > .text { margin-bottom: var(--space-3); }
#about .results-block > .number { display: inline-block; }
#about .results-block > .number > span > span {
    display: block;
    line-height: 1.5;
}
/* ===== 中央リボン等 ===== */
.center-text { font-size: 1.4em; letter-spacing: 0; }

/* ===== 5つのリンク ===== */
.about-list {
    gap: var(--gap-3);
    margin-top: var(--space-4);
}
.about-list li * { margin-top: 0; }
.about-list li .button.button-circle {
    --size: 210px;
    font-weight: bold;
    font-size: 1.2em;
    --circle-bg: var(--color-white);
    justify-content: space-between;
    padding-block: var(--pad-3);
}
.about-list li figure.about {
    width: 44px;
    height: 36px;
}
.about-list li figure.benefit {
    width: 37px;
    height: 41px;
}
.about-list li figure.daily {
    width: 54px;
    height: 30px;
}
.about-list li figure.learning {
    width: 49px;
    height: 47px;
}
.about-list li figure.after-school {
    width: 38px;
    height: 38px;
}
.about-list li .button.button-circle:hover span.trigger::before { transform: translateX(calc(-1 * (var(--trigger-button) / 4))); }
.about-list li .button.button-small:hover span.trigger::before { transform: unset; }

#about .button.button-default { --button-w: 360px; }
/* ===== Support - ワオキッズに入る ===== */
#support {
    background-color: var(--color-yellow);
    padding-block: var(--pad-9) var(--pad-8);
}
#support .bubble {
    width: 340px;
    height: 50px;
    background-color: var(--color-white);
    top: -20px;
    left: 250px;
}
#support .title-group { display: inline-block; }
#support .title-group::after {
    content: '';
    display: block;
    width: clamp(233px, 20vw, 291px);
    height: 231px;
    background: url(../_img/index/support-illust.svg) no-repeat;
    position: absolute;
    top: 0px;
    left: calc(100% + 291px);
}

/* ===== #support - ステップ1.2.3 ===== */
#support .support-list {
    margin-left: 0;
    margin-top: var(--space-7);
}
#support .support-list li article {
    width: 360px;
    height: 240px;
    background:url(../_img/index/step-bg.svg) no-repeat top center / contain;
    padding-block: var(--pad-2);
    padding-inline: var(--pad-4);
}
#support .support-list article.step3 { padding-inline: var(--pad-4) var(--pad-2);}
#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;
}
#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: var(--pos-b);
    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-b: 20px;
    --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-b: 20px;
    --pos-r: 65px;
}
#support .support-list article.step3::after {
    --icon-size-w: 92px;
    --icon-size-h: 94px;
    --icon-image: url(../_img/index/icon-info-session.svg);
    --pos-b: 12px;
    --pos-r: 60px;
}
/* ===== support button===== */
#support .support-list article .button_animation { margin-top: calc(var(--space-1) / 2); }
#support .button.button-middle {
    --button-w: 120px;
    --button-h: 30px;
}

#support .button-simple {
    --simple-w: 430px;
    --simple-h: 80px;
    --font-size: clamp(1em, calc(1em + 1vw), 1.5em);
    border-width: 5.6px;
}
#support .button-simple > .icon.fees {
    --icon-w: 36px;
    --icon-h: 47px;
    --icon-img: url(../_img/index/icon-fees.svg);
    position: absolute;
    left: 2rem;
}
#support .button-simple .icon.faq {
    --icon-w: 48px;
    --icon-h: 55px;
    --icon-img: url(../_img/index/icon-faq.svg);
    position: absolute;
    left: 2rem;
} 
#support .support-link-list { margin-top: clamp(var(--space-4), 2vw, var(--space-5));}
#support .centering-box { margin-top: clamp(var(--space-3), 2vw, var(--space-5));; }


/* ===== Location - ワオキッズの拠点 ===== */
#location {
    background-color: var(--color-light-gray);
    padding: 0;
}
#location .map {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
#location iframe {
    width: 100%;
    height: calc(100% + 300px);
    position: relative;
    top: -150px;
}
#location .main-content {
    max-width: 700px;
    padding: var(--pad-10) var(--pad-6);
    padding-bottom: 295px;
}
#location .main-content .title-group .bubble {
    --bubble-w: 269px;
    background-color: var(--color-white);
    left: 160px;
    top: -10px;
}
#location figure {
    width: clamp(90px, 10vw, 148px);
    aspect-ratio: 148 / 154;
    position: absolute;
    bottom: -600px;
    right:  0;
}
#location .location-block {
    padding: 0;
    margin-top: var(--space-5);
}
#location .location-block h3 { font-size: 1.25em; }
#location .location-list .button.button-simple {
    min-width: unset;
    --simple-w: clamp(108px, 1vw, 116px);
    line-height: 36px;
    aspect-ratio: 116 / 36;
    padding: 0; 
    font-size: clamp(14px, 1vw, 1em);
    font-weight: normal;
}
#location .centering-box {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 120px;
    margin: auto;    
}

/* ===== interview - 親子インタビュー ===== */
#interview .title-group + figure{
    width: clamp(133px,35vw ,254px);
    aspect-ratio: 254 / 227;
}
#interview .title-group { margin-bottom: var(--space-4); }
#interview .title-group .bubble {
    --bubble-w: 269px;
    background-color: var(--color-pink);
    top: -20px;
    left: 230px;
}
#interview .swiper-wrapper { padding-top: 60px; }
#interview .autoSlider::before {
    content:'';
    display: block;
    width: 100vw;
    height: 387px;
    background: url(../_img/index/interview-bg.svg) repeat-x center / cover;
    position: absolute;
    left: 0;
    top: 0;
}
#interview .interview-block {
    display: inline-block;
    padding-inline: var(--pad-3);
    padding-block: var(--pad-3) var(--pad-5) !important;
}
#interview .interview-block > figure {
    --figure-size: 240px;
    width: var(--figure-size);
    height: var(--figure-size);
    border-radius: var(--radius-inner);
    overflow: hidden;
    padding: 8px;
    border: var(--border-base);
    border-width: 6px;
    background-color: var(--color-white);
}
#interview .interview-block > figure img {
    --figure-size: 213px;
    width: var(--figure-size);
    height: var(--figure-size);
    border-radius: var(--radius-inner);
    object-fit: cover;
}
#interview .interview-block > figure figcaption {
    --figure-size: 213px;
    width: var(--figure-size);
    height: var(--figure-size);
    background-color: rgba(251, 217, 235, .8);
    border-radius: var(--radius-inner);
    font-size: 14px;
    position: absolute;
    inset: 0;
    top: 1px;
    margin: auto;
    display: none;
}
#interview .interview-block > figure figcaption > span { font-size: 1.28em; }
#interview .interview-block > figure figcaption{ transition: all .2s ease;}
#interview .interview-block:hover > figure figcaption { 
    display: flex;
    transition: all .2s ease;
}
#interview .interview-block .comment-block {
    font-size: 0.875rem;
    z-index: 0;
}
#interview .interview-block .comment-block .num-block {
    max-width: 187px;
    font-weight: 600;
    text-transform: uppercase;
    margin-inline: auto;
}
#interview .interview-block .comment-block .num-block .num { font-size: 1.875em; }
#interview .interview-block .comment-block .comment {
    background: url(../_img/index/bubble03.svg) no-repeat top center / 100%;
    padding-top: 40px;
    font-size: 1em;

    position: absolute;
    inset: 0;
    top: 12px;
    bottom: unset;
    margin: auto;
    z-index: -1;
}
#interview .centering-box { margin-top: var(--space-5); }

/* ===== staff - ワオキッズのスタッフ ===== */
#staff {
    overflow-x: hidden;
    border-top:solid 4px var(--color-black);
}
#staff::before {
    content: '';
    display: block;
    width: 100%;
    height: 88%;
    background-color: var(--color-gray);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
#staff .staff-container { min-height: 587px; }
#staff .title-group .bubble {
    --bubble-w: 269px;
    background-color: var(--color-yellow);
    top: -30px;
    left: 300px;/*15vw*/
}
#staff .staff-img {
    width: clamp(353px, 41.6vw, 600px);
    height: clamp(288px, 25vw ,360px);
    border-radius: var(--staff-img-radius);
    border: var(--border-base);
    border-width: 6px;
    overflow: hidden;
}
#staff .staff-img img { object-fit: cover; }

/* ===== staff - 上部グループ ===== */
#staff .staff-container.first .staff-img {
    --staff-img-radius: 50rem 0 0 50rem;
    border-right: none;
    position: absolute;
    top: -30px;
    right: 0;
    margin-right: calc(50% - 50vw);
}
#staff .staff-container.first .staff-group {
    position: absolute;
    bottom: clamp(30px, 1vw, -20px);
    left: -20px;
}
#staff .staff-container.first .staff-group figure:first-child {
    width: clamp(268px, 27vw, 315px);
    height: auto;
}
#staff .staff-container.first .staff-group figure:last-child {
    width: clamp(325px, 24vw, 342.5px);
    height: auto;
    position: relative;
    bottom: -20px;
}
#staff .staff-container.second .staff-group figure:first-child {
    width: clamp(330px, 27vw, 315px);
    height: auto;
}
#staff .staff-container.second .staff-group figure:last-child {
    width: clamp(289px, 21vw, 304px);
    height: auto;
}
#staff .staff-container.second .staff-img {
    --staff-img-radius: 0 50rem 50rem 0;
    border-left: none;
    margin-left: calc(50% - 50vw);
    position: absolute;
    left: 0;
    top: 50px;
}
#staff .staff-container.second .staff-group {
    justify-content: end;
    align-items: end;
    position: relative;
    top: -50px;
    right: clamp(0, 4vw, -60px);
}

#staff .link-block {
    position: absolute;
    inset: 0;
    top: unset;
    bottom: 0px;
    margin: auto;
    --simple-w: 420px;
    --simple-h: 100px;
}
#staff .link-block .icon.recruit {
    --icon-w: 69px;
    --icon-h: 89px;
    position: relative;
    bottom: -6px;
    left: -45px;
}
#staff .link-block .button.button-simple {
    --blank-size: 22.5px; 
    font-size: 1.2em;
    line-height: 1.2;
}
#staff .link-block .button.button-simple .en { 
    display: block;
    font-weight: normal;
}

/* ===== official sns - ワオキッズのSNS ===== */
#sns { padding:var(--pad-6) 0; }
#sns::before,
#sns::after {
    content: '';
    display: block;
    width: 50vw;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: -1;
}
#sns::before {
    background-color: var(--color-light-green);
    left: 0;
}
#sns::after {
    background-color: var(--color-light-pink);
    right: 0;
}
#sns .section-title .en { font-size: 1.25em; }

#sns .sns-title-group::before {
    content: '';
    display: inline-block;
    width: 90px;
    height: 85px;
    background: url(../_img/index/icon-sns.svg) no-repeat;
}
#sns .section-title .en.instagram { color: var(--sns-instagram); }
#sns .section-title .en.line { color: var(--sns-line); }
#sns .section-title .en.line > span { margin-right: calc(var(--space-1) / 2); }
#sns .section-title .en.line img { vertical-align: unset; }
#sns .button.button-simple {
    --simple-w: 300px;
    --simple-h: 60px;
    gap: var(--gap-2);
    justify-content: start;
    text-transform: capitalize;
    letter-spacing: 0.1em;
}
#sns .button.button-simple .arrow { margin-left: auto; }

#sns .trisite.graph ul {
    margin-top:var(--wide-padding);
}
#sns .trisite.graph ul li {
    width:240px;
    height:240px;
    margin:0 4px;
}


/* ===== contact - 各種お問い合わせ ===== */
#contact { background-color: var(--color-gray); }
#contact .contact-group {
    grid-template-columns:330px 1fr 1fr;
    max-width: 930px;
    justify-content: center;
    column-gap: var(--gap-8);
    margin-inline: auto;
    position: relative;
    left: -50px;
}
#contact .contact-group .contact-free-call { display: block;}
#contact .contact-group article > figure {
    --size: 120px;
    width: var(--size);
    height: var(--size);
    margin-inline: auto;
}
#contact .contact-group .notice { gap: var(--gap-2);}
#contact .contact-group article h3 { font-size: 1rem; }
#contact .contact-group .notice .tel { color: var(--color-pink); }




/* ========================================
**　レスポンシブ **
=========================================== */
@media (min-width: 1500px) {
     #about { padding-bottom: 300px;}gb
     #about::after { height: 1100px;}

}
@media (max-width: 1259px) {
    .mv-copy .text-small picture {
        display: block;
        height: 100%;
    }
    .mv-copy .text-small picture img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}
@media (max-width: 1186px) {
    #about .after-school-block {
        max-width: 500px;
        padding-right: 0;
    }
    #about .after-school-block .number {
        padding-top: 90px;
        margin-top: 28px;
    }
    #about .after-school-block .number::before {
        width: 103px;
        height: 144px;
        top: 10px;
    }
    #about .after-school-block .number::after {
        background-image: url(../_img/index/about-after-school-sp02.svg);
        width: 197px;
        height: 61px;
        right: unset;
        left: 10px;
        top: 10px;
        z-index: 0;
    }
}

@media (max-width: 1090px) {
    /* ========================================
    // #enrollment-status 1090
    =========================================== */

    #enrollment-status .status-notice--wrap { padding-inline: var(--padding); }
    #enrollment-status .status-cancel { justify-content: start; }
    #enrollment-status .status-ended { align-self: start;}

    /* ========================================
    // #staff 1090
    =========================================== */
    #staff::before {
        height: 100%;
        padding-bottom: 0;
    }
    #staff .staff-container { min-height: unset; }
    #staff .staff-container.first .staff-group  {
        position: relative;
        left: unset;
        justify-content: start;
        margin-top: 0;
    }
    #staff .staff-container.first .staff-group figure:last-child {
        right: unset;
        left: unset;
    }
    #staff .staff-container.first .staff-img, 
    #staff .staff-container.second .staff-img {
        position: relative !important;
        top: unset;
    }
    #staff .staff-container.first .staff-img {
        margin-top: var(--space-2);
        margin-left: auto;
    }
    #staff .staff-container.second {
        margin-top: var(--margin);
    }
    #staff .staff-container.second .staff-group {
        --gap:var(--gap-2);
        right: clamp(0px, 4vw, -60px);
    }
    #staff .link-block {
        position: relative;
        margin-top: var(--space-3) !important;
    }

    /* ========================================
    //SNS
    =========================================== */
    #sns { margin-top: 0; }
}

@media (max-width: 990px) {
    /* ========================================
    // #interview
    =========================================== */
    #interview p > br:first-child { display: block !important; }
    #interview .width-limiter::after {
        position: relative;
        bottom: -20px;
        background-position: bottom;
    }
}
@media (max-width: 920px) {
    /* ========================================
    // mv 920
    =========================================== */
    .mv-copy {
        bottom: unset;
        top: 25px;
    }
    .mv-copy img {
        width: 100%;
        height: 100%;
    }
    .mv-copy .text-large {
        width: clamp(184px, 49vw, 451px);
        aspect-ratio: 184 / 142;
    }
    .mv-copy .text-small {
        width: clamp(196px, 35vw, 506px);
        aspect-ratio: 197 / 69;
        padding-left: 1rem;
    }

    /* ===== 新年度募集状況 920 ===== */
    a:has(.button-enrollment) {
        bottom: 20px;
        right:10px;
        scale: 0.9;
    }
    .button-enrollment {
        --size: 160px;
        gap: 5px;
    }
    .button-enrollment.button.button-circle {
        gap: var(--gap-1);
        padding-block: var(--pad-1);
    }
    .button-enrollment > p:not(.button) { font-size: 1.85em; }
    .button-enrollment > p:not(.button) > span { font-size: 0.75em; }
    .button-enrollment figure {
        width: 44px;
        height: 26px;
    }
    .button-enrollment .button.button-small {
        --button-w: 50px;
        --button-h: 18px;
        margin-top: 0;
        padding: 10px 7px;
    }
    .button-enrollment .button.button-small .text-block .ja { 
        font-size: 10px;
        line-height: 1;
    }
    #enrollment-status { overflow: hidden; }
    /* ========================================
    // #news 920
    =========================================== */
    #news { padding-top: var(--pad-4); }
    #news > div > div {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    #news .news-list {
        flex-direction: column;
        row-gap: var(--gap-4);
        margin-left: 0;
    }
    #news .news-list li {
        max-width: unset;
        border-right: var(--border-base);
        border-width: .5px;
    }
    .status-block--top { padding-inline: 4%; padding-block: 80px var(--pad-4);}
    /* ========================================
    // 募集状況の年度表示  920px
    =========================================== */
    .status-block .year {
        font-size: 2rem;
        width: 108px;
        height: 98px;
        left: 4%;
        top: -20px;
    }
    #enrollment-status .table-list {
        font-size: 14px;
        --gap: var(--gap-4);
        padding-left:.5em;
    }
    #enrollment-status .table-list ul li:not(.table-header) { --gap: 0;}
    #enrollment-status .table-list .g2 { flex: 1;}
    #enrollment-status ul li .partition::after { right: 0;}
    #enrollment-status ul .btn_animation {
        --button-w: 80px;
        --button-h: 30px;
        --trigger-button: 30px;
    }
    .status {
    --size: 56px;
    }
   /* ========================================
    // 募集中のステータス　下部
   =========================================== */
    .enrollment-status--meta {
        --gap: 0;
        margin-top: var(--space-1);
    }
    #enrollment-status .status-list {
        margin-left: 0;
        font-size: 12px;
        gap: .8em;
        letter-spacing: 0;
    }
    #enrollment-status .status-list li { gap:5px; font-size: 10px; }
    #enrollment-status .status-list li:last-child { gap:.5em; }
    #enrollment-status .status-list span.status {  --size: 30px; }
    #enrollment-status .status-list span.status.ended + span { letter-spacing: 0; }
    #enrollment-status .status-notice > div { margin-top: var(--space-1); }

    /* ========================================
    /* ===== about 920 =====
    =========================================== */
    #about { padding-inline: 4%; }
    #about .about-block {
        display: flex;
        flex-direction: column;
        align-items: center;
        row-gap: var(--gap-5);
    }
    #about .after-school-block {
        margin-left: unset;
        margin-top: var(--space-3);
    }
    #about .title-group {
        flex-direction: column;
        align-items: center;
    }
    #about .title-group h2 .h2-inner {
        width: 232px;
        height: 116px;
    }
    #about .title-group h2 .h2-inner .en,
    #about .title-group h2 .h2-inner .ja {
        font-size: 22px;
    }
    #about .concept-block { text-align: center; }
    #about .concept-block .logo {
        width: 278px;
        height: 59px;
        margin-inline: auto;
    }
    #about .concept-block .logo img {
        width: 100%;
        height: 100%;
    }
    #about .concept-block .catch-text { margin-top: var(--space-1); }
    #about .bubble {
        position: absolute;
        right: 0;
        left: unset;
    }

    /* ===== about - after school ===== */
    #about {
        padding-top: var(--pad-5);
        padding-bottom: 230px;
        background-color: var(--color-gray);
        z-index: -1;
    }
    #about::before {
        top: unset;
        bottom: 270px;
    }
    #about::after {
        height: 500px;
        background: url(../_img/index/about-bg-s.webp) no-repeat;
        background-size: 100%;
        background-position: center top;
    }
    #about .text { grid-template-columns: 100px 1fr; }
    #about .text::before { --size: 80px; }
    #about .large-text {
        font-size: 1.45em !important;
        letter-spacing: 0;
    }
    #about .small-text { font-size: 0.875em !important; }

    /* ===== #about after-school ===== */
    #about .results-block .bubble { top: -10px; }
    #about .results-block::before { top: -40px; }
    #about .large-text img {
        width: 218px;
        height: 77px;
    }

    /* ===== about センターリボンと文字 ===== */
    #about .center-text {
        text-align: center;
        font-size: 1.19em;
    }
    
    #about .center-text.last { order: 1;}
    .ribbon-block { order: 2;}
    .ribbon-block::before {
        height: 80px;
        background-image: url(../_img/index/ribbon-green-sp.svg);
    }
    #about .center-text .ribbon-text {
        width: 350px;
        display: block;
        padding: 0;
        font-size: 1em;
        line-height: 1.5;
    }
    #about .center-text .ribbon-text br { display: block !important; }

    /* ===== about 5つのリンク ===== */
    .about-list li .button.button-circle {
        --size: 160px;
        font-size: 1rem;
        justify-content: center;
        gap: var(--gap-1);
    }
    /* ===== about results-block 利用実績 ===== */
    #about .results-block {
        padding-left: 0;
        padding-top: 28px;
    }

    #about .results-block::before {/*罫線なし*/
        width: 100%;
        height: 4px;
    }
    #about .results-block .number {
        display: flex;
        padding-top: 0;
        margin-top: var(--space-1);
    }
    #about .results-block .number img {
        width: 233px;
        height: 72px;
    }
    #about .results-block .number::before {
        width: 100px;
        height: 127px;
        top: -20px;
        left: 70%;       
    }
    #about .results-block figure { margin-top: 0; }

    #about .centering-box { margin-top: var(--space-4); }

    /* ========================================
    /* ===== support ===== 920px
    =========================================== */
    #support .title-group::after { left: 100%; }
    #support .support-list { --gap: 100px; }
    #support a:has(.button-simple) {  width: 100%; }
    #support .button-simple { --simple-button-w: 100%; }
    /* ========================================
    /* ===== location =====　920px
    =========================================== */
    #location .map { height: calc(100vh - var(--header-offset)); }
    #location .main-content {
        padding-inline: 4%;
        padding-top: var(--pad-1);
    }
    #location figure { bottom: -70px; }

    /* ========================================
    /* ===== staff =====
    =========================================== */
    #staff .title-group .bubble {
        top: 30px;
        left: 170px;
    }
    #staff .flex:has(> .container) { flex-direction: row;}
    #staff .staff-container.second .staff-group {
        top: 0;
        right: 0;
    }
    /* ========================================
    // #contact 920
    =========================================== */
    #contact .contact-group { left: 0; }
}
@media (max-width: 880px) {
    #contact .contact-group { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    #news .button.button-middle span.trigger::after { display: none; }
    /* ========================================
    // #enrollment-status 768
    =========================================== */
    /* ===== 募集状況の見出し ===== */
    .status-block h2 {
        --border-height: 78px;
        width: fit-content;
        height: var(--border-height);
        font-size: 1.5em;
        line-height:  var(--border-height);
        padding: .2em .5em;
        left: unset;
        right: 8%;
    }

    /* ========================================
    // #staff 768
    =========================================== */

    #support .bubble {
        top: 0;
        left: unset;
    }
    #staff .link-block {
        --gap: var(--gap-3);
        position: relative;
        margin-top: var(--space-3);   
    }
    /* ========================================
    // #interview 768
    =========================================== */
    #interview .title-group .bubble {
        top: 10px;
        left: 120px;
    }
    /* ========================================
    // sns 768
    =========================================== */
    #sns .sns-title-group { margin-top: var(--space-2); }
}
@media (max-width: 720px) {
    #enrollment-status .table-list { --gap: 0; }
    #enrollment-status ul .school-block { padding-right: .5em;}
    #enrollment-status ul:nth-child(2) .table-header { display: none; }
    #enrollment-status ul .status { margin-block: .5em; }
    #enrollment-status .table-header { --gap: var(--gap-1)}
    
    /* ===== #about ===== */
    #about::after { background-size: 125%;}

}
@media (max-width: 620px) {
    /* ========================================
    // #support 620
    =========================================== */
    #support .title-group::after {
        position: relative;
        top: 20px;
        left: calc(100% - 250px);
    }
}
@media (max-width: 580px) {
    /* ========================================
    // #interview 580
    =========================================== */
    #interview .width-limiter{ display: block; }
    #interview .width-limiter::after {
        position: absolute;
        bottom: -70px;
        right: 0;
    }
    #interview .title-group + figure {
        position: absolute;
        bottom: -60px;
        right: 0;
    }
}
@media (max-width: 520px) {
    .mv > .width-limiter {
        height: calc(100svh - var(--header-offset) - 40px);
    }

    /* ===== #fv ===== */
    .mv-copy .text-small { padding-left: .5rem;}
    /* ========================================
    // #enrollment-status 520
    =========================================== */
    /* ===== 募集状況の見出し 520 ===== */
    .status-block h2 {
        width: 165.6px;
        line-height: 1.4;
        padding-block: .5em .5em;
        left: unset;
        right: 8%;
    }
    /* ===== 募集状況のボタン 520 ===== */
    
    #enrollment-status ul li .partition::after { right: 0; }
    #enrollment-status ul li .btn_animation {
        --button-w: 56px;
        --button-h: 21px;
        --trigger-button: 21px;
        display: inline-flex;
    }
    #enrollment-status table tbody tr td span.school-block { padding-right: 0; }
    #enrollment-status table thead th span {
        font-size: 9px;
        width: 70px;
    }
    #enrollment-status table tbody tr td { padding-inline: 0; }
    #enrollment-status table tbody tr td span.school-block::before { 
        width: 4.5px;
        left: -10px;
    }
    #enrollment-status table tbody td span.school { font-size: 14px; }
    #enrollment-status table tbody td span.address { font-size: 9.8px;
    letter-spacing: 0; }
    #enrollment-status ul li .button.button-small {
        --button-w: 56px;
        --button-h: 21px;
        padding-left: 8px;
    }
    #enrollment-status .button.button-small .text-block .ja { font-size: 10px; }

    /* ===== 枠した募集状況の解説 520 ===== */
        .status-block { border-radius: 0; }
    .status-block::after { display: none; }
    .status-notice--wrap {
        background-color: var(--color-gray);
        margin-top: 0;
        padding-bottom: var(--pad-5);
    }
    .status-notice--wrap::after {
        content: '';
        display: block;
        width: 100%;
        height: 6px;
        background-color: var(--color-black);
        position: absolute;
        inset: 0;
        top: unset;
        margin: 0;
        border-radius: 0;
    }
    .enrollment-status--meta p { font-size: 13px; }
    #enrollment-status .status-list span.status { margin-block: 0; }
    #enrollment-status .status-notice span.status,
    #enrollment-status .status-notice span.status.waitlist::before { --size: 20px;}
    #enrollment-status .status-notice span.status.ended { margin-right: var(--space-1); }

    /* ========================================
    //#about 520
    =========================================== */
    #about { padding-inline: 0; }
    #about::after { height: 430px; background-size: 150%; }
    #about .after-school-block,
    #about .results-block { padding-inline: 4%;}
    #about .bubble {
        left: unset !important; 
        right: 15px;
        top: -40px !important;
    }
    #about .results-block .bubble { top: 0 !important;}
    #about .center-text.last { height: 40px;}
    #about .about-list { gap: 15px; }
    #about .button.button-default {
        --button-w: 288px;
        --button-h: 80px;
    }

    /* ========================================
    // #support 520
    =========================================== */
    #support { padding-block: var(--pad-4) var(--pad-7);}
    #support .title-group .bubble {
        font-size: 12px;
        padding: 1em 1em .9em;
        width: fit-content;
        height: 30px;
    }
    #support .title-group::after {
        top: -30px;
        left: calc(100% - 180px);
        letter-spacing: 0;
    }
    #support .support-list { margin-top: var(--space-4); }
    #support .support-link-list { gap: var(--gap-4); }

    #support .button-simple > .icon.fees,
    #support .button-simple .icon.faq { position: relative;
    left: 0;}
    #support .button-simple { 
        justify-content: start;
        gap: var(--gap-5);
        
    }
    
    /* ========================================
    // #location 520
    =========================================== */
    #location figure { right: var(--pad-1); }

    /* ========================================
    // #interview
    =========================================== */
    #interview { padding-top: var(--pad-6);}

    /* ========================================
    // #staff
    =========================================== */
    #staff { padding-top: var(--pad-6);}
    #staff .staff-container.second .staff-img { margin-top: var(--space-3); }
    #staff .link-block .button.button-simple {
        --simple-h: 80px;
        font-size: 1em;
    }
    #staff .link-block .icon.recruit {
        --icon-w: 55px;
        --icon-h: 71px;
        --blank: 18px;
        left: -20px;
    }
    #staff .link-block span.blank { margin-left: calc(var(--space-1) / 2);}

}
@media (max-width: 390px) {
    #location .location-list.half-gap { gap: 10px; }
}