:root {
    --benefit-pink: rgb(241, 103, 173);
    --benefit-soft-pink: rgb(250, 217, 235);
    --benefit-soft-green: rgb(238, 245, 205);
    --benefit-soft-yellow: rgb(254, 250, 204);
}
.bg-pink-light { background-color: var(--benefit-pink); }
.bg-pink-soft { background-color: var(--benefit-soft-pink); }
.bg-green-soft { background-color: var(--benefit-soft-green); }
.bg-yellow-soft { background-color: var(--benefit-soft-green); }



#about .bg-pink-soft { margin-top: var(--space-5);}
#about div:has( > .ribbon-block) { padding-block: var(--pad-6); }
#about .ribbon-block {
    --max-w: 957px;
    --ribbon-h: 75px;
}
#about .ribbon-block span.partition-vertical::before { 
    inset: 0;
    left: unset;
    right: calc(-1 * var(--gap-3));
    margin: auto;
    height: 50%;
}

/* 見出し部分*/
.benefit-block::before,.benefit-block::after {
    content: '';
    display: block;
    width: 95%;
    height: 4px;
    background-color: var(--color-black);
    position: absolute;
    inset: 0;
    margin: auto;
}
.benefit-block::before { bottom: unset; }
.benefit-block::after { top: unset;}
.benefit-block .benefit-title { 
    max-width: 356px;
    width: 100%;
    aspect-ratio: 360 / 336;
    border-right: var(--border-base);
    font-size: 1.5rem;
    padding: var(--pad-4) var(--pad-4);
}
.benefit-block .benefit-title p {
    position: absolute;
    top: -25px;
    left: 6%;
}
.benefit-block .benefit-title h3 { top: -5px; }
.benefit-block .benefit-title figure {
    width: 76px;
    height: 60px;
    position: absolute;
    bottom: 10%;
    right: 10%;
}
.benefit-block .benefit-right {
    padding: var(--pad-2) var(--pad-4);
}
.benefit-block .benefit-right .text-point { font-size: 1.4em; }
.benefit-block .benefit-right .point-notice { 
    font-size: 1.125em;
    margin-top: var(--space-2);
}
.benefit-block .benefit-right ol { 
    font-size: 1.125em;
    margin-top: var(--space-2);
}

/* ===== その1保育 ===== */
#benefit01 section { padding-bottom: var(--pad-2); }
#benefit-vision { padding-bottom:0;}
#benefit-vision > div > .flex { flex-direction: row-reverse;}
#benefit-vision > div > .flex > div { max-width: 60%;}
#benefit-vision .photo-right {
    max-width: 600px;
    width: clamp(300px, 50vw, 600px);
    height: auto;
    position: absolute;
    left: -220px;
}
#benefit-vision h4 + p { margin-top: var(--space-4); }
#benefit-vision #vision { padding: var(--pad-3) var(--pad-4);}
#benefit-vision .radius-box {
    border: var(--border-base);
    margin-top: var(--pad-5);
    border-width: 2px;
    border-radius: var(--radius);
}
#benefit-vision .radius-box h5 {
    width: 140px;
    height: 43px;
    line-height: 43px;
    font-size: 1.25em;
    background: url(../_img/about/benefit/benefit-01-title.svg) no-repeat center / contain;
}
#benefit-vision .radius-box + div { margin-top: var(--space-4);}
#benefit-vision .line-quote { text-indent: 1em;}
#benefit-vision .line-quote::before, #benefit-vision .line-quote::after { width: 3px; }
#benefit-vision .line-quote::before { transform:rotate(333deg); }
#benefit-vision .line-quote::after { transform:rotate(-333deg); }

/* ===== その1 : 安全・安心な環境 ===== */
#safety { padding-top: var(--pad-4);}
#safety .radius-box { 
    margin-top: var(--space-4);
    padding: var(--pad-4);
}
#safety .radius-box::before {
    content: '';
    display: block;
    width: clamp(100px, 12vw, 182px);
    height: auto;
    aspect-ratio: 182 / 207;
    background: url(../_img/about/benefit/benefit-01-pic.svg) no-repeat center / contain;
    position: absolute;
    top: clamp(-160px, -6vw, -70px);
    right: -30px;
}
#safety .radius-box.grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr));
    justify-content: center;
}
#safety .radius-box li { 
    padding-top: var(--pad-8);
    font-size: 14px;
    max-width: 310px;
    margin-inline: auto;
}
#safety .radius-box li > figure {
    width: 90%;
    position: absolute;
    inset: 0;
    bottom: unset;
    margin: auto;
    z-index: 1;
}
#safety .radius-box li .bg-pink-light {
    padding-block: var(--pad-2);
    margin-top: calc(var(--space-1) / 2);
}
#safety .radius-box li .bg-pink-light p { gap: var(--gap-1); } 
#safety .radius-box li > div:last-of-type {
    padding-top: var(--pad-2);
    background-color: var(--color-gray);
    z-index: 2;
}
#safety .benefit-arrow::after {
    content: '';
    display: block;
    width: 22px;
    height: 25px;
    background: url(../_img/about/benefit/benefit-01-safety-arrow.svg) no-repeat center / contain;
    position: absolute;
    inset: 0;
    top: -110px;
    right: -47px;
    left: unset;
    margin: auto;
}

/* ===== その2 多彩なプログラム ===== */
#benefit02 { padding: 0;  }
#benefit02 .benefit-block .benefit-message { 
    line-height: 2;
    margin-top: var(--space-2);
}
#benefit-program { overflow: hidden; padding-bottom: var(--pad-5); }
#benefit-program > div:first-of-type { flex-direction: row-reverse; }
#benefit-program > div:first-of-type > div { max-width: 60%;}
#benefit-program > div:first-of-type figure { 
    width: clamp(500px, 40vw, 627px);
    aspect-ratio: 627 / 760;
    position: absolute;
    left: -220px;
}
#benefit-program div:not(:last-of-type) div:has(> .benefit02-tab-header) { margin-top: var(--space-5); }
#benefit-program .benefit02-tab-header {
    border-bottom: var(--border-base);
    border-width: 3px;
}
#benefit-program .benefit02-tab {
    border: var(--border-base);
    border-bottom: 0;
    border-width: 3px;
    background-color: #fff;
    background-image: linear-gradient(var(--main-color) 25%,transparent 0%);
    padding-inline: 1rem;
    padding-block: 1rem 0;
    gap: var(--gap-4);
    left: 1.5em;
}
#benefit-program .benefit02-tab-header + p { 
    margin-top: var(--space-3);
    line-height: 2;
}
#benefit-program .benefit02-tab-header .button.button-small {
    --button-w: 180px;
    letter-spacing: 0;
}
#benefit-program .radius-box { padding: var(--pad-3); }
#benefit-program .radius-box > .round-box {
    --round-w: fit-content;
    --round-h: 27px;
    background-color: var(--color-black);
    color: var(--color-white);
    border: none;
    padding-inline: 1em;
}
#benefit-program .radius-box ul { margin-top: var(--space-1);}
#benefit-program > div:last-of-type > div {
    width: 55%;
    margin-top: var(--space-2);
}
#benefit-program > div:last-of-type .program-pic {
    width: clamp(500px, 40vw, 627px);
    height: auto;
    aspect-ratio: 1 / 1;
    position: absolute;
    right: -190px;
    top: var(--space-2);
}
#benefit-program > div:last-of-type .radius-box > p { 
    font-size: 14px; 
    line-height: 2;
    margin-top: var(--space-2);
}
#benefit-program > div:last-of-type .radius-box .round-box {
    background-color: var(--color-white);
    border: none;
    font-size: 14px;
    padding-inline: .5rem;
    gap: calc(var(--gap-1) / 2);
}
#benefit-program > div:last-of-type .radius-box .round-box figure {
    width: 39px;
    height: 39px;
}
#benefit-program > div:last-of-type .radius-box .round-box > .en { 
    font-size: 10px;
    text-transform: uppercase;
    margin-right: .6rem;
    width: 50px;
}
#benefit-program > div:last-of-type .radius-box .round-box > .en::after {
    content: '';
    display: block;
    width: 2px;
    height: 44px;
    background-color: var(--bgc);
    position: absolute;
    inset: 0;
    right: -.4rem;
    margin: auto;
    left: unset;
}
#benefit-program > div:last-of-type .radius-box .round-box.spring { --bgc: var(--main-color); }
#benefit-program > div:last-of-type .radius-box .round-box.autumn { --bgc: rgb(231, 66, 153); }
#benefit-program > div:last-of-type .radius-box .round-box.summer { --bgc: var(--color-yellow); }
#benefit-program > div:last-of-type .radius-box .round-box.winter { 
    --bgc: rgb(0, 160, 233);
    letter-spacing: 0;
}

/* ===== その3 環境とサービス ===== */
#benefit03, #benefit03 section { padding-bottom: 0;}
#benefit03 .benefit-block .benefit-message { 
    margin-top: var(--space-2); 
    line-height: 2;
}
#benefit03 h4 + p { 
    margin-top: var(--space-3);
    line-height: 2;
}
.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: 280px;
    height: 240px;
}
.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-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);
}
#benefit03 .admission h4 + p { margin-top: var(--space-1);}

#benefit03 .choice .width-limiter:nth-child(2) { margin-top: var(--space-5);}


#benefit-support > div > .flex { flex-direction: row-reverse;}
#benefit-support > div > .flex > div { width: 60%;}
#benefit-support figure {
    width: clamp(500px, 40vw, 627px);
    height: auto;
    aspect-ratio: 629 / 933;
    position: absolute;
    left: -220px;
    top: -100px;
}
#benefit-support dl { grid-template-columns: auto auto; margin-top: var(--space-5);}
#benefit-support dl .radius-box {
    border: var(--border-base);
    border-width: 2px;
    width: 120px;
    height: 60px;
    border-radius: var(--radius);
    font-size: 15px;
}
#benefit-support dl dd { font-size: 14px; }
#benefit-support dl + .radius-box {
    padding: var(--pad-2);
    border-radius: var(--radius);
    font-size: 15px;
    
}
.yellow-option { 
    background-color: var(--color-yellow);
    border-radius: var(--radius-inner);
    font-size: 14px;
    padding-inline: 1em;
    line-height: 1.2;
}
#benefit-in-out > div > .radius-box { padding: var(--pad-3);}
#benefit-in-out .inout-list-title {
    border:var(--border-base);
    border-width: 2px;
    width: 166px;
    height: 240px;
    border-radius: var(--radius);
    padding: calc(var(--space-1) / 2);
}
#benefit-in-out .inout-list-title p:first-child {
    margin-top: var(--space-3);
}
#benefit-in-out .inout-list-title .radius-box { 
    border: none;
    border-radius: var(--radius);
}
#benefit-in-out .inout-list li {
    width: 240px;
    padding: 50px 22px 20px 20px;
}
#benefit-in-out .inout-list li span {font-size: 1.8em; line-height: 1;}
#benefit-in-out .inout-list li p {font-size: 14px; letter-spacing: 0;}
#benefit-in-out .inout-list li.inout-step01 {
    background: url(../_img/about/benefit/benefit-03-step01.svg) no-repeat center top / 100%;
}
#benefit-in-out .inout-list li.inout-step02 {
    background: url(../_img/about/benefit/benefit-03-step02.svg) no-repeat center top / 100%;
}
#benefit-in-out .inout-list li.inout-step03 {
    background: url(../_img/about/benefit/benefit-03-step03.svg) no-repeat center top / 100%;
}
.in-out-arrow::after {
    content: '';
    display: block;
    width: 55px;
    height: 43px;
    background: url(../_img/about/benefit/benefit-03-step-arrow.svg) no-repeat center / contain;
    position: absolute;
    inset: 0;
    right: -75px;
    left: unset;
    margin: auto;
}
#benefit-facility .facility-main-photo {
    width: 420px;
    height: 240px;
}
#benefit-facility ul { padding: var(--pad-4); }
#benefit-facility ul li figure {
    max-width: 240px;
    height: 150px;
    aspect-ratio: 240 / 150;
}
#benefit-facility ul li p { font-size: 14px;}

#benefit03 + .about-common--footer { padding-top: 0; }
#benefit03 + .about-common--footer > div > ul { margin-top: var(--space-3);}


@media (max-width: 1148px) {
    #safety .radius-box li {
        padding-top: 75px;
        max-width: 310px;
    }
    #safety .radius-box li .bg-pink-light p { flex-direction: column; } 
    .grid.clear-tb {
        grid-template-columns: repeat(1, 1fr);
    }
}
@media (max-width: 920px) {
    #benefit-vision > div > .flex,
    #benefit-support > div > .flex,
    #benefit-program > div:first-of-type,
     #benefit-program > div:last-of-type { flex-direction: column;}
    #benefit-vision > div > .flex > div { max-width: 100%;}
    #benefit-vision .photo-right { 
        position: relative;
        left: 0;
        margin-top: var(--space-2);
    }

    #benefit-program > div:first-of-type > div { max-width: 100%;}
    #benefit-program > div:first-of-type figure {
        position: relative;
        left: 0;
        width: 100%;
        margin-top: var(--space-2);
    }


    #benefit-program > div:last-of-type > div { width: 100%;}
    #benefit-program > div:last-of-type .program-pic {
        position: relative;
        right: 0;
        top: 0;
        width: 100%;
        margin-top: var(--space-2);
    }

    #benefit-support > div > .flex > div { width: 100%;}
    #benefit-support figure { 
        position: relative; 
        width: 100%;
        left: 0;
        top: 0;
        margin-top: var(--space-2);
    }

    .choice .flex.clear-tb { flex-direction: column; gap: var(--gap-5);}
   

    .ribbon-block { 
        font-size: 1rem;
        line-height: 1.5;
        gap: 0;
    }
    .ribbon-block .flex.clear-tb { flex-direction: column; }
    .ribbon-block p { gap: 0;}
    .ribbon-block p span { font-size: 14px;}
    .ribbon-block .partition-vertical::before { display: none;}
}

@media (max-width: 720px) {
    /* ===== 選ばれる理由の見出し ===== */
    .benefit-block .benefit-title { 
        border-right: none;
        border-bottom: var(--border-base);
    }
}
@media (max-width: 520px) {
    .title-line { font-size: 1.2em; display: block; }
    /* ===== 選ばれる理由の見出し ===== */
    .benefit-block::before,.benefit-block::after { width: 85%; }
    .benefit-block .benefit-right .text-point {font-size: 1.2em;}
    .benefit-block .benefit-right .point-notice { font-size: 1rem;}
    .benefit-block .benefit-right ol { font-size: 14px; }


    /* ===== benefit01 ===== */
    #benefit-vision .line-quote { font-size: 15px ;}
    
    #benefit-vision h4 + p { margin-top: var(--space-1);}
    #benefit-vision #vision { margin-top: var(--space-1);}

    #safety .radius-box::before { width: 122px; top: -100px; right: -10px; }


    #safety .radius-box li > figure { width: 100%;}
    #safety .radius-box li { padding-top: 80px;}

    .admission li {
        height: auto;
        padding-bottom:20px;

        h4 {
            margin-top:20px;
        }
    }

    /* ===== 02 520 ===== */
    #benefit-program .benefit02-tab { left: .5em;}
    #benefit-program .benefit02-tab-header { gap: 0;}


    #benefit03 .admission { margin-top: var(--space-3); }

    #benefit-in-out .inout-list-title {
        width: 240px;
        height:auto;
    }
    #benefit-in-out .inout-list li { padding-bottom: 50px;}
    .in-out-arrow::after {
        transform: rotate(90deg);
        width: 30px;
        height: 35px;
        right: 0;
        left: 0;
        top: unset;
        bottom: -27px;
    }
    #benefit-in-out .inout-list li.inout-step02 span {
        margin-bottom: .5rem;
    }



}