#vision, #vision section { padding-block: var(--pad-7) 0; }
#vision .vision-block {
    height: auto;
    aspect-ratio: 1200 / 360;
    background: url(../_img/about/about-title-block-green.svg) no-repeat center / contain; 
    padding: var(--pad-5);
}
#vision h3 {
    width: 140px;
    height: auto;
    aspect-ratio: 140 / 43;
    font-size: 1.25em;
    background: url(../_img/about/about-radius-box-gray.svg) no-repeat center / contain;
    margin-inline: auto;
    top: -1rem;
}
#vision #our-vision { padding-bottom: 0; }
#our-vision p {
    margin-top: var(--space-5);
    line-height: 2;
}
#vision #corporate-vision { padding-bottom: 0;}
#corporate-vision > div {
    width: fit-content;
    max-width: 840px;
    border: var(--border-base);
    padding: var(--pad-6) var(--pad-6) var(--pad-4);
}
#corporate-vision h4 {
    width: 140px;
    height: 43px;
    line-height: 43px;
    font-size: 1.25em;
    background: url(../_img/about/about-radius-box-green.svg) no-repeat center / contain;
    position: absolute;
    top: -21px;
    left: var(--pad-6);
}
#corporate-vision figure {
    width: 287px;
    height: 224px;
}

/* ===== 学童保育ワオキッズとは ===== */
#philosophy .title-group figure {
    --figure-w: 116px;
    --figure-h: 100px;
}
#philosophy .title-group .section-title { gap: var(--gap-2); }

#philosophy dl { 
    grid-template-columns: auto auto;
    row-gap: var(--gap-3);
}
#philosophy dl dt .round-box { 
    color: var(--color-black); 
    padding: .1em 1em;
    border-width: 1px;
    font-weight: normal;
}
#basic-philosophy { 
    padding: var(--pad-7); 
    overflow: hidden;
}
#philosophy h4 + p { 
    font-size: 1.5em;
    margin-top: var(--space-2);
}
#basic-philosophy .pic-left { 
    width: clamp(305px, 45vw, 550px);
    height: auto;
    aspect-ratio: 550 / 274;
    margin-top: var(--space-5); 
}
#basic-philosophy .pic-right {
    width: clamp(500px, 40vw, 627px);
    height: auto;
    aspect-ratio: 1 / 1;
    position: absolute;
    top: -50px;
    right: -220px;
}
#waokids-approach { padding-block: var(--pad-3) 0; }
#waokids-approach h4 { margin-top: var(--space-2); }
#waokids-approach h4 + p { margin-top: 0; }
#waokids-approach figure {
    width: clamp(350px, 32vw, 493px);
    height: auto;
    aspect-ratio: 493 / 463;
}
#about .ribbon-block { 
    max-width: 957px;
    width: 100%;
    --ribbon-h: 81px;
    font-size: 1.76em;
}
#about .ribbon-block .text-large { 
    font-size: 1.66em;
    top: 2px;
    margin-right: .5rem;
}

/* ===== ワオキッズの特徴　#strengths ===== */
#strengths { padding-bottom: var(--pad-5); }
#strengths .title-group figure {
    --figure-w: 116px;
    --figure-h: 100px;
}
#strengths .title-group .section-title { gap: var(--gap-2); }
.strengths-list { margin-top: var(--space-5); }
.strengths-list article { width: 360px; }
.strengths-list article > section { padding: 0;}
.strengths-list article .quote {
    width: 360px;
    height: 180px;
    color: var(--color-black);
    border: var(--border-base);
    border-color: var(--color-white);
    border-width: 1px;
}
.strengths-list article .quote::before, 
.strengths-list article .quote::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    margin: auto;
}
.strengths-list article .quote::before {
    background-color: var(--bgc);
    width: calc(100% - 7px);
    height: calc(100% - 2px);
    z-index: 1;
}
.strengths-list article .quote::after {
    background: url(../_img/about/about-quote.svg) no-repeat center / contain;
    z-index: 2;
}
.strengths-list article .quote * { z-index: 3; }
.strengths-list article .quote p:first-child { 
    font-size: 1.6em; 
    padding-bottom: 0;
}
.strengths-list article .quote p:nth-child(2) {
    font-size: 1.125em; 
}
.strengths-list article .quote .title-line { 
    border-bottom:solid 6px var(--color-black);
    padding-inline: .1rem;
}
.strengths-list article h4 {
    font-size: 1.75em;
    margin-top: var(--space-1);
}
.strengths-list article p,
.strengths-list article ul { font-size: 14px; }
.strengths-list article ul { margin-block: var(--space-1); }
.strengths-list article .radius-box {
    border-radius: var(--radius);
    padding: var(--pad-3);
}
.strengths-list article:not(:first-of-type) .radius-box { padding: var(--pad-2)}
.strengths-list article .radius-box h5 {
    background-color: var(--bgc);
    color: var(--color-black);
    display: inline-block;
    padding-block: 6px;
    padding-inline: .5em;
    font-size: 1rem;
}
.strengths-list article .radius-box h5::before,
.strengths-list article .radius-box h5::after {
    content: '';
    display: block;
    width: calc(100% + 2px);
    height: 2px;
    background-color: var(--color-black);
    border-radius: var(--radius-inner);
    position: absolute;
    inset: 0;
    left: -1px;
    margin: auto;
}
.strengths-list article .radius-box h5::before { bottom: unset; }
.strengths-list article .radius-box h5::after { top: unset; }


/* =====  ===== */
#about .centering-box {
    flex-direction: column;
    gap: var(--gap-2);
    margin-top: var(--space-5);
}

@media (max-width: 920px) {
    #basic-philosophy .flex { 
        flex-direction: column
        ;}
    #basic-philosophy .pic-right {
        position: relative;
        left: 0;
        margin-top: var(--space-2);
    }

    #about .ribbon-block {
        font-size: 1rem;
        line-height: 1.2;
    }
    #about .ribbon-block .ribbon-text {top: -4px;}
}

@media (max-width: 780px) {
    .partition-vertical::before { display: none;}
}

@media (max-width: 720px) {
    #vision h3 {
        width: 110px;
        font-size: 1em;
    }
    #vision .vision-block { gap: 0;}
     #vision .vision-block picture img { height: auto;}

     #our-vision p { margin-top: var(--space-2);}
     #vision #corporate-vision { 
        flex-direction: column;
        align-items: center;
    }

    #philosophy { padding-top: 100px;}

    #basic-philosophy { padding: 4%;}

}