.width-limiter:has(.first-block) {
    padding-top: var(--pad-7);
}
.title-line::after { bottom: -5px; }
.text-justify { text-align-last: justify;}
.font-exbold { font-weight: 900; }

.first-block {
    max-width: 600px;
    border: var(--border-base);
    border-width: 6px;
    padding-block: var(--pad-4);
    margin-inline: auto;
}
.first-block > p {
    background-color: var(--color-white);
    position: absolute;
    inset: 0;
    bottom: unset;
    top: -20%;
    margin: auto;
    font-size: 1rem;
    width: fit-content;
    padding-inline: 2rem;
    text-align: center;
}
.first-block .line-quote { z-index: 2;}
.first-block .line-quote::before,
.first-block .line-quote::after {
    position: absolute;
    height: 49px;
    width: 6px;
    border-radius: 0;
    bottom: 0;
}
.first-block .line-quote::before {
    left: 0.7rem;
    transform: rotate(336deg);
}
.first-block .line-quote::after {
    right: 1rem;
    transform: rotate(-336deg);
}
.first-block .bg-yellow { background-color: var(--bgc); }
.first-block > div {
    font-size: clamp(2rem, calc(2rem - 0.5vw), 2rem);
    gap: var(--gap-1);
    padding-block: 2px;
    padding-inline: 8%;
}
.first-block .icon-idea {
    max-width: 65px;
    aspect-ratio: 65 / 75;
}
.fv-pic {
    width: clamp(250px, 30vw, 337px);
    max-width: 337px;
    aspect-ratio: 337 / 267;
}

#about-afterschool { padding-top: var(--pad-2);}
#about-afterschool h3 + div {
    margin-top: var(--space-3);
    line-height: 2;
}
#about-afterschool h3 + div > p { margin-top: var(--space-3);}


.about__block { padding-block: var(--pad-4); }
.about__block h3 {
    display: inline-block;
    font-size: clamp(1em, 1.1vw, 1.125em);
    z-index: 0;
    padding-inline: 1.5em;
    padding-block: 1em;
}
.about__block h3::before {
    content: '';
    display: block;
    background: url(../_img/about/afterschool/title-bg-green.svg) no-repeat center / contain;
    position: absolute;
    inset: 0;
    margin: auto;
    z-index: -1;
}
.about__block.pink h3::before {
    background-image: url(../_img/about/afterschool/title-bg-pink.svg);
}
.about__block .radius-box { 
    border-radius: 10px;
    padding: 1rem 1.5rem;
}
.about__block .flex > * { align-self: stretch; }

#about-yokohama .g1 .num {
    font-size: 1.875em;
    flex: 0 40px;
}
#about-yokohama .g1 .num::after {
    content: '';
    display: block;
    width: 2px;
    height: 100%;
    background-color: var(--color-black);
    position: absolute;
    inset: 0;
    margin: auto;
    left: unset;
}
#about-yokohama .g6 {
    padding-left: 1rem;
    padding-top: 0;
    align-self: center;
}
#about-yokohama p { 
    padding-top: var(--space-1);
    line-height: 2;
}

#about-kawasaki { padding-block: var(--pad-2); }
#about-kawasaki .flex { height: 100%;}
#about-kawasaki p {
    margin-top: var(--space-1);
    line-height: 2;
}
#about-kawasaki .flex p { 
    margin-top: 0;
    align-self: center;
}

#about-kawasaki .button.button-middle { 
    width: fit-content; 
    font-size: 14px;
}
#about-kawasaki .button.button-middle > span:not(.trigger) { 
    padding-right: var(--pad-5);
    display: flex;
    align-items: center;
    gap: var(--gap-1);
}
#about-kawasaki .button.button-middle .blank {
    background-image: url(../_img/about/afterschool/icon-blank-white.svg);
    --blank-size: 1em; 
}


#reason h3 + p { margin-top: var(--space-3); }
#reason p {
    margin-top: var(--space-2);
    line-height: 2;
}
#reason section { 
    padding: var(--pad-4);
    margin-block: var(--space-4);
}
#reason h4 { font-size: 1.25em;}


#compare {
    overflow: hidden;
}
.table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}
table {
  width: 1080px;
  border-collapse: collapse;
  border: var(--border-base);
  border-width: 2px;
  text-align: center;
}

th,
td {
  border: var(--border-base);
  border-width: 1px;
  padding: 8px;
}

.bg-white { --bgc: var(--color-white); }
.bg-green-soft { background-color: var(--benefit-soft-green) !important;}

/* thead 全体の上下を太く */
thead th {
  background-color: var(--bgc);
  border-bottom: var(--border-base);
  border-bottom-width: 2px;
  font-weight: 500;
}

tbody tr:nth-child(odd) > * { background-color: rgb(247, 247, 247); }
tbody tr:nth-child(even) > * { background-color: var(--color-white); }

thead tr:first-child th {
  border-top: var(--border-base);
  border-top-width: 2px;
}
thead tr:last-child th {
  border-bottom: var(--border-base);
  border-bottom-width: 2px;
  font-size: 1.43em;
}
tbody th { 
    padding-inline: var(--pad-3);
    max-width: 150px;
}
tbody td { background-color: var(--bgc); }
th.vertical-top { vertical-align: text-top; }
th > span {
    display: block;
    width: 100px;
    margin-inline: auto;
    font-size: 18px;
}


#waokids-life { 
    z-index: 0;
    padding-top: 70px !important;
    margin-top: var(--space-6) !important;
}
#waokids-life h4 {
    display: inline-block;
    padding: 1rem 3rem;
    z-index: 2;
    position: absolute;
    top: -25px;
    left: 40px;
}
#waokids-life h4::before {
    content: '';
    display: block;
    background: url(../_img/about/afterschool/title-bg-yellow.svg) no-repeat center / contain;
    position: absolute;
    inset: 0;
    top: 5px;
    margin: auto;
    z-index: -1;
}
#waokids-life figure {
    max-width: 240px;
    aspect-ratio: 240 / 180;
}
#waokids-life p { margin-top: 0 !important;}
#waokids-life .flex p { font-size: 14px; line-height: 1.8;}
#waokids-life .flex * {align-self: stretch;}
#waokids-life .line-quote {
    min-width: 217px;
    max-width: 220px;
}
#waokids-life .line-quote::before,
#waokids-life .line-quote::after {
    position: absolute;
    height: 49px;
    width: 2px;
    border-radius: 0;
    bottom: 0;
    font-size: 1.25em;
}
#waokids-life .line-quote::before {
    left: 1rem;
    transform: rotate(336deg);
}
#waokids-life .line-quote::after {
    right: 1rem;
    transform: rotate(-336deg);
}


#criterion { padding: 0;}
#criterion p {
    margin-top: var(--space-3);
    line-height: 2;
}
#criterion .criterion-list { margin-top: var(--space-3);}
#criterion .criterion-list article {
    flex: 0 373px;
    padding: var(--pad-3);
    align-self: stretch;
    margin-top: var(--space-3);
}
#criterion .criterion-list > .radius-box::after {
    content: '';
    display: block;
    width: calc(100% + 4px);
    height: 157px;
    background-color: var(--color-white);
    position: absolute;
    inset: 0;
    left: -2px;
    margin: auto;
}
#criterion .criterion-list .radius-box {
    border: var(--border-base);
    border-width: 2px;
    border-radius: 10px;
}
#criterion .criterion-list h4 {
    position: absolute;
    inset: 0;
    margin: auto;
    bottom: unset;
    width: 195px;
    top: -25px;
    background-color: var(--color-white);
}
#criterion .criterion-list h4 .bg-yellow {
    background-color: var(--bgc);
    flex:0  50px;
}
#criterion .criterion-list h4 > span { 
    align-self: stretch;
    border-radius: 10px 0 0 10px;
    padding: .5em;
}
#criterion .criterion-list h4 + p { 
    z-index: 1;
    font-size: 14px;
    margin-top: var(--space-2);
}


/* ===== 入園についてのご案内 ===== */
#admission { padding-bottom: 0; }
#admission .bubble {
    --bubble-w: fit-content;
    --bubble-h: 34px;
    font-size: 14px;
    padding-inline: .5em;
    right: 0;
    left: 0 !important;
    top: -20px !important;
    margin: auto;
}
#admission ul { margin-top: var(--space-5); }
#admission li {
    width: 360px;
}
#admission li::before,
#admission li::after {
    content: '';
    display: block;
    width: 4px;
    height: 100%;
    background: url(../_img/location/border-dashed.svg) no-repeat center / contain;
    position: absolute;
    left: -1px;
    top: 5px;
    bottom: 0;
    margin: auto;
}
#admission li::after {
    left: unset;
    right: -1px;
}
#admission li h4 { font-size: 1.75em; }
#admission li p:not(.bubble) { font-size: 14px; }
#admission li a { 
    display: block;
    padding-block: var(--space-1);
}
#admission .admission-1 { background-color: rgb(238, 245, 205); }
#admission .admission-2 { background-color: rgb(254, 250, 204); }
#admission .admission-3 { background-color: rgb(254, 217, 235); }
#admission .button.button-small {
    --button-w: 120px;
    --button-h: 30px;
    margin-top: var(--space-1);
}

@media (max-width: 1200px) {
   #admission ul {
        justify-content: center;
        row-gap: var(--gap-7);
    } 
}
@media (max-width: 920px) {
    .width-limiter:has( .first-block ) > .flex {
        flex-direction: column;
    }
    .first-block > p { 
        font-size: 12px;
        top: -30px;
    }


    #admission li h4 { margin-top: calc(var(--space-1) / 2); }
}

@media (max-width: 720px) {
    .first-block > div { font-size: 1.8rem; }
    .first-block > p { 
        top: -25px;
    }
}

@media (max-width: 520px) {
    
    .first-block > p {
        width: 85%;
        text-align: left;
        top: -20px;
    }
    .first-block > div {
        margin-top: var(--space-2);
    }
    table { font-size: 14px; }

    #admission .bubble {
        top: -40px !important;
    }
    #waokids-life .flex * {justify-content: center;}
}