@charset "UTF-8";

#nibako {
    --main-color:#289BB9;
    --section-radius:150px;
    --section-margin-top:60px;
    --section-padding-inline:5em;
    max-width:1128px;
    /* font-feature-settings:"palt"; */
    margin-inline:auto;
}
#nibako [class*="nibako_"] {
    width:100%;
    padding-block:3.75em;
    font-family:'Noto Sans JP',sans-serif;
}

#nibako *,
#nibako *:before,
#nibako *:after {
    box-sizing:border-box;
    margin:0;
    padding:0;
}
#nibako * {
    font-size:16px;
    line-height:1.35;
}
#nibako img { max-width:100%; height:auto; vertical-align:bottom;}
#nibako :where(ul, ol) { list-style:none;}
#nibako a { text-decoration:none;}
#nibako a[href^="tel"] { pointer-events:none;}
#nibako a:where(:link, :visited) { color:inherit;}

/* 共通パーツ */
#nibako ul.cation li { font-size:12px; padding-left:1em; text-indent:-1em;}
#nibako ul.cation li:before { content:"※"; font-size:1em;}

#nibako h4 {
    font-size:16px;
    text-align:center;
    margin-bottom:4.5em;

    & :where(strong, small) { display:block;}
    & strong {
        position:relative;
        font-size:2em;
        padding-bottom:0.5em;
        margin-bottom:0.8125em;
    }
    & strong:after {
        content:"";
        position:absolute;
        display:block;
        width:1.875em;
        aspect-ratio:60/5;
        background-color:var(--main-color);
        inset:auto 0 0 0;
        margin-inline:auto;
    }
    & small {
        font-size:1.25em;
    }
}
#nibako a.nibako_btn {
    --trans-range:0.25em;
    --color-bg:#289BB9;
    --color-shadow:#247A90;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.25em;
    padding:1em;
    width:min(250px, 100%);
    color:#fff;
    font-weight:bold;
    text-align:center;
    letter-spacing:0.05em;
    background-color:var(--color-bg);                               
    border-radius:0.75em;
    filter:drop-shadow(0px 0.25em 0px var(--color-shadow));
    transition:translate 0.5s ease, filter 0.5s ease;

    &[target="_blank"]:after {
        content:"";
        display:block;
        width:0.95em;
        aspect-ratio:1;
        background:url(svg/icon_blank.svg) no-repeat center / contain;
    }

    &:focus { translate:0 var(--trans-range); filter:drop-shadow(0px 0px 0px var(--color-shadow));}
    @media(any-hover:hover) { &:hover { translate:0 var(--trans-range); filter:drop-shadow(0px 0px 0px var(--color-shadow));}}
    @media(any-hover:none) { &:active { translate:0 var(--trans-range); filter:drop-shadow(0px 0px 0px var(--color-shadow));}}
}

@media only screen and (width <= 896px) {
    #nibako {
        --section-radius:70px;
        --section-padding-inline:1.5em;
    }
    #nibako [class*="nibako_"] {
        width:100%;
        padding-inline:5%;
    }
    #nibako h4 {
        
        & small {
            font-size:1.125em;
        }
    }
    #nibako a[href^="tel"] { pointer-events:auto;}
}


/* =============== FV (.nibako_fv) =============== */
#nibako .nibako_fv {
    position:relative;
    padding:0;
    margin-bottom:3.75em;

    & img { width:100%;}
    & ul {
        position:absolute;
        inset:auto 0 0 auto;
    }
}

@media only screen and (width <= 896px) {
    #nibako .nibako_fv {
        max-width:90%;
        padding-top:1.5em;
        margin-inline:auto;

        & ul {
            position:static;
            margin:1em 1em 0;
        }
    }
}

/* =============== Nibakoの特徴 (.nibako_feature) =============== */
#nibako .nibako_feature {
    background-color:#FEFCF7;

    & .f_block {
        display:flex;
        justify-content:center;
        align-items:center;
        gap:0 3.75em;

        & > * { width:500px;}
        & + .f_block { margin-top:5em;}
        & img { aspect-ratio:5/3;}
        & .f_title {
            display:grid;
            place-items:center;
            margin-inline:0 auto;
            margin-bottom:1.25em;
            padding-inline-end:1em;
            width:295px;
            aspect-ratio:295/48;
            background-color:var(--main-color);
            color:#fff;
            font-size:1.5em;
            font-weight:bold;
            border-radius:8px;
        }
        & .f_catch {
            color:var(--main-color);
            font-size:1.625em;
        }
        & .f_text {
            margin-top:0.88em;
            font-size:1.125em;
        }
    }
    & .f_block.reverse {
        flex-direction:row-reverse;

        & li:nth-child(2) { text-align:end;}
        & .f_title { margin-inline:auto 0;}
    }

    & .f_official {
        margin-top:80px;

        & > * {
            width:fit-content;
            margin-inline:auto;
        }
        & .f_o_title {
            margin-bottom:1.25em;
            font-size:2em;
            font-weight:bold;
            color:var(--main-color);
        }
        & .f_o_btn {
            display:block;
            padding:0.5em 1.25em;
            font-size:1.5em;
            color:var(--main-color);
            background-color:#fff;
            border:solid 3px var(--main-color);
            border-radius:1lh;
            filter:drop-shadow(3px 3px 3px rgba(0,0,0,16%));
        }
    }
}

@media only screen and (width <= 896px) {
    #nibako .nibako_feature {

        & .f_block {
            flex-direction:column;

            & li { display:contents;}
            & picture {
                order:2;
                max-width:80%;
            }
            & .f_title {
                order:1;
                padding:0;
                margin-inline:auto;
            }
            & .f_catch {
                order:3;
                font-size:1.25em;
                text-align:center;
                margin-block:1em;
            }
            & .f_text {
                order:4;
                font-size:1em;
                margin:0;
            }
        }
        & .f_block.reverse {
            flex-direction:column;

            & li:nth-child(2) {
                text-align:unset;
            }

            & .f_title {
                margin-inline:auto;
            }
        }
        & .f_official {

            & .f_o_title {
                margin-bottom:0.75em;
            }
            & .f_o_btn {
                font-size:1.125em;
            }
        }
    }
}



/* =============== ご利用者様の声 (.nibako_voice) =============== */
#nibako .nibako_voice {
    position:relative;
    margin-top:var(--section-margin-top);
    padding-inline:var(--section-padding-inline);
    border-radius:var(--section-radius);
    background-color:#F1F9F9;

    &:before {
        content:"";
        position:absolute;
        display:block;
        width:16.5em;
        aspect-ratio:263/186;
        background:url(png/nibako_voice_car.png) no-repeat center / contain;
        inset:0 0 auto auto;
    }

    & .v_block {
        display:flex;
        /* display:grid;
        grid-template-columns:repeat(2, 460px); */
        justify-content:space-between;
        flex-wrap:wrap;
        gap:5em 0;
        margin-bottom:6.25em;

        & > * { flex-basis:460px;}

        & li {
            display:grid;
            grid-template-rows:subgrid;
            grid-row:span 5;
            padding:2rem;
            border-radius:3rem;
            background-color:#d5ebee;
        }
        & .v_name {
            position:relative;
            width:fit-content;
            margin-bottom:1.66em;
            padding:1em 1.66em;
            background-color:#fff;
            font-size:1.125em;
            font-weight:bold;
            line-height:1.8;
            color:var(--main-color);
            border:solid 4px var(--main-color);
            border-radius:20px;
            filter:drop-shadow(4px 4px 0 var(--main-color));

            & strong {
                font-size:1.66em;
                padding-right:0.125em;
            }
            &:before {
                --w:1em;

                content:"";
                position:absolute;
                display:block;
                width:var(--w);
                height:calc(var(--w) / 2 * tan(60deg));
                background:url(svg/icon_cap.svg) no-repeat center / contain;
                inset:100% auto auto 3em;
            }
        }
        & .v_img {
            margin-inline:auto;
            margin-bottom:1.5em;
            position:relative;

            & img {
                width:370px;
                aspect-ratio:37/30;
                /* border-radius:100px; */
            }
        }
        & .v_img_sub img {
            position:absolute;
            display:block;
            width:40%;
            aspect-ratio:1;
            inset:auto -4rem -1rem auto;
            border-radius:100%;
            border:solid 2px #fff;
        }
        & .v_catch {
            margin-bottom:1.66em;
            font-size:1.5em;
        
            & mark {
                position:relative;
                display:block;
                width:fit-content;
                margin-inline:auto;
                padding-inline:1.5em;
                font-size:inherit;
                font-weight:bold;
                text-align:center;
                line-height:1.5;
                background:none;

                &:before {
                    --h:0.5lh;

                    content:"";
                    position:absolute;
                    display:block;
                    width:100%;
                    height:var(--h);
                    background-color:var(--main-color);
                    border-radius:var(--h);
                    inset:auto auto 0 50%;
                    translate:-50% 0;
                    opacity:0.2;
                }
            }
        }
        & .v_text {
            font-size:1.125em;
            text-align:justify;
        }
        & .v_sns {
            display:flex;
            align-items:center;
            gap:0 3em;
            margin-top:3em;

            & a {
                position:relative;
                display:block;
                min-width:80px;
                padding:0.33em 0.66em;
                background-color:#fff;
                border-radius:1lh;
                font-size:0.9375em;
                font-weight:bold;
                text-align:center;
                box-shadow:3px 3px 6px rgba(0,0,0,0.35);

                &[class] {
                    --before-gap:10px;
                    margin-left:calc(3em + var(--before-gap));
                }
                &[class]:before {
                    content:"";
                    position:absolute;
                    width:3em;
                    aspect-ratio:1/1;
                    background:url() no-repeat center / contain;
                    inset:50% calc(100% + var( --before-gap)) auto auto;
                    translate:0 -50%;
                }
                &.insta:before { background-image:url(svg/icon_instagram.svg);}
                &.hp:before { background-image:url(svg/icon_hp.svg);}
            }
        }
    }

    & .v_follow {
        text-align:center;

        & .v_title {
            color:var(--main-color);
            font-size:2em;
            font-weight:bold;
            margin-bottom:1.25em;
        }
        & a {
            display:flex;
            align-items:center;
            gap:0 0.45em;
            width:fit-content;
            margin:0 auto 1.25em;
            padding:0.5em 1.25em;
            background-color:#fff;
            color:var(--main-color);
            font-size:1.375em;
            line-height:1.35;
            border-radius:1lh;
            border:solid 3px var(--main-color);

            &:after {
                content:"";
                display:block;
                height:1.25em;
                aspect-ratio:1/1;
                background:url(svg/icon_instagram.svg) no-repeat center / contain;
            }
        }
    }
}

@media only screen and (width <= 896px) {
    #nibako .nibako_voice {

        &:before {
            width:7em;
            inset:auto auto 100% 50%;
            translate:-50% 50%;
        }

        & .v_block {
            flex-direction:column;
            /* grid-template-columns:auto; */
            gap:3em 0;

            & li {
                display:block;
                padding:2rem 1rem;
                border-radius:2rem;
            }
            & .v_name {
                margin-inline:auto;
                padding:0.75em 1.25em;
                width:max(270px, 80%);
                font-size:1em;
                text-align:center;
            }
            & .v_img {
                text-align:center;
            }
            & .v_img img {
                width:100%;
            }
            & .v_img_sub img {
                width:40%;
                inset:auto -3rem -1rem auto;
            }
            & .v_catch {
                font-size:1.125em;
            }
            & .v_catch mark {
                padding-inline:1em;
            }
            & .v_text {
                font-size:1em;
            }
            & .v_sns {
                justify-content:space-between;
                gap:0;
                margin-top:2em;
            }
        }
    }
}


/* =============== こんな方におススメ (.nibako_reco) =============== */
#nibako .nibako_reco {
    background-color:#F4FFF4;

    & .reco_block {
        counter-reset:rb_title 0;

        display:grid;
        grid-template-columns:500px 250px;
        justify-content:center;
        align-items:center;
        gap:60px 100px;
        direction:rtl;

        & .rb_text {
            direction:ltr;
            text-align:start;
        }
        & .rb_title {
            margin-bottom:0.769em;
            font-size:1.625em;
        }
        & .rb_title:before {
            counter-increment:rb_title;
            content:counter(rb_title) ".";
            color:var(--main-color);
            font-size:1.38em;
            font-weight:bold;
        }
    }
}

@media only screen and (width <= 896px) {
    #nibako .nibako_reco {
        & .reco_block {
            grid-template-columns:auto;
    
            & .rb_img {
                justify-self:center;
                width:85%;
            }
            & .rb_title {
                font-size:1.5em;
            }
        }
    }
}

/* =============== お問い合わせ (.nibako_contact) =============== */
#nibako .nibako_contact {
    margin-top:var(--section-margin-top);
    padding-bottom:6.25em;
    padding-inline:var(--section-padding-inline);
    background-color:#F9F3E4;
    border-radius:var(--section-radius);

    & .c_details {
        display:flex;
        justify-content:space-evenly;

        & li {
            text-align:center;
        }
        & .c_title {
            margin-bottom:1lh;
            font-size:1.375em;
            font-weight:bold;
        }
        & .c_phone {
            display:flex;
            align-items:center;
            justify-content:center;
            gap:10px;
            width:360px;
            aspect-ratio:36/7;
            margin-bottom:0.625em;
            font-size:2em;
            color:var(--main-color);
            background-color:#fff;
            border:solid 3px var(--main-color);
            border-radius:10lh;
            filter:drop-shadow(3px 3px 3px rgba(0,0,0,0.15));
        }
        & .c_phone:before {
            content:"";
            display:block;
            height:1lh;
            aspect-ratio:1/1;
            background:url(svg/icon_phone.svg) no-repeat center / contain;
        }
        & .c_form {
            display:flex;
            align-items:center;
            justify-content:center;
            gap:10px;
            width:360px;
            aspect-ratio:36/7;
            margin-bottom:0.625em;
            font-size:1.5em;
            font-weight:bold;
            color:var(--main-color);
            background-color:#fff;
            border:solid 3px var(--main-color);
            border-radius:10lh;
            filter:drop-shadow(3px 3px 3px rgba(0,0,0,0.15));
        }
        & .c_form:before {
            content:"";
            display:block;
            height:1lh;
            aspect-ratio:1/1;
            background:url(svg/icon_doc.svg) no-repeat center / contain;
        }
    }

}

@media only screen and (width <= 896px) {
    #nibako .nibako_contact {

        & .c_details {
            flex-direction:column;
            gap:4.5em;

            & :is(.c_phone, .c_form) {
                width:min(323px, 100%);
                margin-inline:auto;
            }
        }
    }
}


/* =============== オプション (.nibako_option) =============== */
#nibako .nibako_option {
    --pink-dark:#D15A5A;
    --pink:#FFD4D4;
    --pink-light:#FFF6F6;
    
    position:relative;
    padding-inline:var(--section-padding-inline);
    border-radius:var(--section-radius);
    background-color:var(--pink-light);

    & h4 { margin-bottom:2.5em;}
    & .grid_block {
        position:relative;
        display:grid;
        grid-template-columns:repeat(2, 430px);
        grid-template-rows:repeat(3, auto) 1fr;
        justify-content:space-between;

        &:after {
            content:"";
            position:absolute;
            inset:auto 0 calc(100% + 1em) auto;
            display:block;
            width:min(212px, 25%);
            aspect-ratio:258/146;
            background:image-set(
                url(img_add202512/option_abs.webp) type("image/webp"),
                url(img_add202512/option_abs.png)
            ) no-repeat center / contain;
        }

        & li {
            display:grid;
            grid-template-rows:subgrid;
            grid-row:span 4;
        }
    }
    & .o_name mark {
        position:relative;
        display:block;
        width:fit-content;
        margin-inline:auto;
        padding-inline:0.5em;
        font-size:1.625em;
        font-weight:bold;
        color:#D15A5A;
        background:none;
        z-index:0;

        &:before {
            content:"";
            position:absolute;
            inset:auto auto 0 50%;
            translate:-50% 50%;
            display:block;
            width:100%;
            height:0.33lh;
            border-radius:100vmax;
            background-color:var(--pink);
            z-index:-1;
        }
    }
    & p {
        width:fit-content;
        max-width:calc(100% - 2em);
        margin:1.2222em auto 3.0555em;
        font-size:1.125em;
    }
    & img {
        --shadow-range:1rem;
        width:430px;
        translate:calc(var(--shadow-range) * -1) calc(var(--shadow-range) * -1);
        filter:drop-shadow(var(--shadow-range) var(--shadow-range) 0px var(--pink));
        border-radius:1rem;
    }
    & .o_price {
        position:relative;
        margin-top:4em;
        z-index:0;

        &:before {
            content:"";
            position:absolute;
            inset:auto auto 0 50%;
            translate:-50% 0;
            display:block;
            width:calc(100% / 3 * 2);
            height:calc(100% + 2.25em);
            border-radius:100%;
            background-color:#fff;
        }

        & dt {
            position:absolute;
            inset:auto auto 100% 50%;
            translate:-50% 50%;
            display:flex;
            flex-direction:column;
            align-items:center;
            color:var(--pink-dark);
            font-size:1.625em;
            font-weight:bold;
            line-height:1.2;
            z-index:1;

            &:before {
                content:"";
                position:absolute;
                inset:auto auto 100% 50%;
                translate:-50% 0;
                display:block;
                width:2em;
                aspect-ratio:55/31;
                background:url(https://www.kochi-daihatsu.co.jp/-/media/Project/Dmc%20Tenants/DD%20Tenant/kochi/nibako/option/price2.png) no-repeat center / contain;
            }
            & small { font-size:0.5em; line-height:inherit;}
        }
        & dd {
            position:relative;
            display:grid;
            grid-template-columns:auto 1fr auto;
            gap:1em 1rem;
            padding:58px 6.5% 28px;
            background-color:#fff;
            border-radius:1rem;

            &:before, &:after {
                content:"";
                position:absolute;
                inset-block:0 auto;
                display:block;
                width:65px;
                aspect-ratio:65/40;
                background:url(https://www.kochi-daihatsu.co.jp/-/media/Project/Dmc%20Tenants/DD%20Tenant/kochi/nibako/option/price1.png) no-repeat center / contain;
            }
            &:before { inset-inline:0 auto;}
            &:after { inset-inline:auto 0; scale:-1 1;}
        }
        & .dots {
            display:grid;
            grid-template-columns:subgrid;
            align-items:center;
            grid-column:span 3;

            & div:first-of-type { font-size:1.125em;}
            & div:last-of-type { font-size:1.5em; text-align:end;}
            & small { font-size:0.6666em;}
            & i {
                --dots-r:2px;
                --dots-space:6px;

                display:block;
                height:calc(var(--dots-r) * 2);
                background:radial-gradient(
                    circle,
                    var(--pink-dark) var(--dots-r),
                    transparent var(--dots-r)
                ) repeat-x left bottom / calc(var(--dots-r) * 2 + var(--dots-space)) calc(var(--dots-r) * 2);
            }
        }
    }
    & .option_details {
        margin-inline:auto;
        padding:3.125em 1em;
        background-color:#fff;
        border-radius:3.125em;

        & .details_type { width:fit-content; margin-inline:auto; font-size:20px; font-weight:bold;}
        & .details_visual {
            display:flex;
            justify-content:center;
            gap:2em;
            width:min(770px, 100%);
            margin:40px auto 20px;

            & img { filter:none; translate:none;}
            & img:where(:nth-of-type(odd)) { align-self:end;}
            & img:nth-of-type(1) { width:270px; margin-bottom:1em;}
            & img:nth-of-type(2) { width:75px}
            & img:nth-of-type(3) { width:345px;}
            /* & img:nth-of-type(1) { width:35%; margin-bottom:1em;}
            & img:nth-of-type(2) { width:10%;}
            & img:nth-of-type(3) { width:45%;} */
        }
        & p { width:min(75%, 100%); font-size:16px;}
        & .nibako_btn { margin-inline:auto;}

        & + h4 { margin-top:6.25em;}
    }
}

@media only screen and (width <= 896px) {
    #nibako .nibako_option {

        &:before { width:7em; inset:auto auto 100% 50%; translate:-50% 50%;}
        & h4 { margin-bottom:4em;}
        & h4 strong { font-size:1.625em;}
        & .grid_block { grid-template-columns:min(430px, 100%); justify-content:center;}
        & .grid_block:after { position:static; margin:56px auto 0; width:184px;}
        & .grid_block li + li { margin-top:7rem;}

        & .option_details .details_visual {
            flex-direction:column;

            & img { align-self:center;}
            & img:nth-of-type(1) { width:250px;}
            & img:nth-of-type(2) { rotate:90deg;}
            & img:nth-of-type(3) { width:320px;}
        }
    }
}



/* =============== fv (.nibako_intro_fv) =============== */
#nibako .nibako_intro_fv {
    padding-block:1em;
    
    & img { width:100%;}
}
#nibako .nibako_intro {

    & .grid_block {
        display:grid;
        grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
        grid-template-rows:auto auto auto 1fr;
        gap:2.25em;

        & li { grid-row:span 4; display:grid; grid-template-rows:subgrid; gap:0px;}
        & img { border-radius:10px;}
        & .catch { margin-block:1em; color:#FF7300; font-weight:bold; font-size:1.125em; text-align:center;}
        & .nibako_btn { margin:25px auto 0;}
    }
}

@media only screen and (width <= 896px) {
    #nibako .nibako_intro_fv {
        padding:0;
    }
    #nibako .nibako_intro {
        & .grid_block {
            gap:5em 2.25em;
        }
        & .grid_blcok li { grid-template-columns:unset;}
    }
}


/* =============== 価格 (.nibako_price) =============== */
#nibako .nibako_price {
    position:relative;
    margin-top:var(--section-margin-top);
    padding-inline:var(--section-padding-inline);
    background-color:#FFFBF0;
    border-radius:var(--section-radius);

    & .grid_block {
        display:grid;
        grid-template-columns:repeat(2, 1fr);
        justify-content:center;
        gap:60px;
    }
    & .price_block {
        border-radius:20px;
        overflow:clip;

        & > dt {
            padding-block:0.75em;
            background-color:#FFE8AE;
            font-size:21px;
            font-weight:bold;
            text-align:center;
        }
        & > dd {
            padding:10px 1em 1.5em;
            background-color:#fff;

            & .compensation {
                display:grid;
                grid-template-columns:90px auto;
                align-items:center;
                gap:20px;
                width:fit-content;
                margin-inline:auto;
                font-weight:bold;

                & dt {
                    padding-inline:0.5em;
                    line-height:2;
                    border:solid 1px #F49F4A;
                    border-radius:3px;
                    text-align:center;
                }
                & dd strong { font-size:1.25em;}
                & dd small { font-weight:normal;}
            }
        }
        & .price {
            width:fit-content;
            margin:0 auto 1.25em;
            padding:0 1.1em 0.75em;
            color:#FF7300;
            font-size:20px;
            font-weight:bold;
            background:radial-gradient(circle, currentColor 3px, transparent 3px) repeat-x left bottom / 15px 6px;

            & strong { font-size:1.8em;}
            & small { font-size:0.9em; font-weight:normal;}
        }
    }
    & .caution {
        display:flex;
        justify-content:center;
        gap:1em;
        margin-top:2em;
        font-size:14px;

        & p { font-size:1em;}
    }
    & .abs {
        position:absolute;
        inset:33px auto auto 84px;
        display:block;
        width:174px;
    }
}
@media only screen and (width <= 896px) {
    #nibako .nibako_price {
        
        & h4 strong { font-size:1.625em;}
        & .grid_block { grid-template-columns:1fr;}
        & .price_block {

            & .price { padding-inline:0;}
            & > dd .compensation {
                grid-template-columns:80px auto;
                gap:0.75em;

                & dt { font-size:13px;}
                & dd { font-size:14px;}
            }
        }
        & .caution { flex-direction:column; width:fit-content; margin-inline:auto;}
        & .abs { position:static; margin:20px auto 30px;}
    }
}





/* =============== ユーザーサポートサービス (.nibako_support) =============== */
#nibako .nibako_support {
    margin-top:var(--section-margin-top);
    padding-inline:var(--section-padding-inline);
    background-color:#F4FFF4;
    border-radius:var(--section-radius);

    & .support_details {
        display:flex;
        padding:30px 12px;
        background-color:#fff;
        border-radius:50px;

        & li {
            display:flex;
            flex-direction:column;
            justify-content:center;
            align-items:center;
            padding-inline:40px;

            &:where(:nth-of-type(1)) { gap:30px;}
            &:where(:nth-of-type(2)) { gap:35px;}
            &:where(:nth-of-type(3), :nth-of-type(4)) { gap:32px;}
            & + li { background:radial-gradient(circle, #B0B0B0 3px, transparent 3px) repeat-y left top / 6px 15px;}
            & p { text-align:center;}
        }
    }
    & .support_flow_intro {
        margin-block:40px 30px;
        font-size:18px;
        text-align:center;
        font-weight:bold;
    }
    & .support_flow_steps {
        display:flex;
        justify-content:center;
        gap:25px;

        & dl {
            --c:#72AF72;

            display:grid;
            grid-template-columns:auto 1fr;
            align-items:center;
            width:290px;
            height:50px;
            border:solid 1px var(--c);
            border-radius:5px;
            overflow:clip;
            background-color:#fff;
            text-align:center;
        }
        & dt {
            position:relative;
            padding-inline:0.25em;
            align-content:center;
            height:100%;
            background-color:var(--c);
            font-weight:bold;
            color:#fff;
            font-size:14px;
            line-height:1;

            &:after {
                content:"";
                position:absolute;
                inset:0 auto auto 100%;
                width:0.75em;
                height:100%;
                background-color:var(--c);
                clip-path:polygon(0 0, 100% 50%, 0 100%);
            }
            & .num { font-size:2em; line-height:inherit;}
        }
        & dd {
            color:#0C550C;
            font-weight:bold;
            font-size:18px;
            text-align:center;
        }
    }
    & .nibako_btn { width:min(350px, 100%); margin:50px auto 30px; font-size:18px;}
    & .nibako_btn + p { text-align:center; font-size:12px;}
}
@media only screen and (width <= 896px) {
    #nibako .nibako_support {
        & h4 { margin-bottom:3em;}
        & h4 strong { font-size:1.625em;}
        & .support_details {
            flex-direction:column;

            & li { padding:40px 0;}
            & li + li { background-repeat:repeat-x; background-size:15px 6px;}
            & li:nth-of-type(1) img { width:110px; height:160px;}
            & li:nth-of-type(2) img { width:220px; height:101px;}
            & li:nth-of-type(3) img { width:121px; height:150px;}
            & li:nth-of-type(4) img { width:114px; height:150px;}
        }
        & .support_flow_steps { flex-direction:column; align-items:center;}
        & .nibako_btn + p { width:min(360px, 100%); margin-inline:auto; text-align:start;}
    }
}