@charset "UTF-8";

/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
/**
 * CONTENTS............目次
 * COMMON..............共通パーツ
 * HEADER..............ヘッダーパーツ
 * FOOTER..............フッターパーツ
 * PROGRESS_BAR........プログレスバー
 * MAIN................メインコンテンツ
 */





/*------------------------------------*\
    $COMMON
\*------------------------------------*/
body {
    display: flex;
    flex-direction: column;
    width: 100%;
}


.overlay {
    display: none;
}
.overlay.is-active {
    position: fixed;
    inset: 0;
    display: block;
    background-color: rgb(0 0 0 / 0.2);
}


.hide {
    display: none !important;
}





/*------------------------------------*\
    $HEADER
\*------------------------------------*/
.header {
    padding-block: var(--px5);
    padding-inline: var(--px10);
    border-image-source: linear-gradient(#464b52, #464b52);
    border-image-slice: 0 fill;
    border-image-outset: 0 100vw;
    color: white;
}

    .header__logo {
        height: var(--px20);
    }
    .header__logo > img {
        height: 100%;
    }

    .header__row {
        display: flex;
        align-items: center;
        column-gap: var(--px10);
    }
    .header__row + .header__row {
        margin-top: var(--px1);
    }

        .header__txt {
            font-size: var(--font11);
            line-height: calc(40 / 22);
            white-space: nowrap;
        }

            .header__txt__large {
                font-size: var(--font13);
            }
            .header__txt__blue {
                color: #92d5db;
            }
            .header__txt__pink {
                color: #e69091;
            }





/*------------------------------------*\
    $FOOTER
\*------------------------------------*/
.footer {
    padding-top: var(--px10);
    padding-inline: var(--px10);
    padding-bottom: var(--px7);
    border-image-source: linear-gradient(#000000, #000000);
    border-image-slice: 0 fill;
    border-image-outset: 0 100vw;
    color: white;
    font-size: var(--font10);
    text-align: center;
}

    .footer__nav {
        display: flex;
        justify-content: center;
        align-items: center;
        column-gap: 1.5em;
        line-height: 1.5;
    }

        .footer__nav__link {
            text-decoration: underline;
        }


    .footer__copyright {
        margin-top: 0.8em;
        line-height: 1;
    }


    .footer__dialog {
        position: fixed;
        inset: 0;
        width: clamp(325px, 100vw * (325 / 375), 443.733px);
        height: fit-content;
        margin: auto;
        text-align: left;
        animation-name: dialogOpen;
        animation-duration: 1s;
        animation-delay: 0.3s;
        animation-timing-function: var(--easeOutQuart);
        animation-fill-mode: both;
    }
    .footer__dialog::backdrop {
        background-color: rgb(0 0 0 / 0.5);
    }

        .footer__dialog__container {
            width: 100%;
            height: clamp(425px, 100vw * (425 / 375), 580.267px);
            padding-top: var(--px26);
            padding-inline: var(--px22);
            padding-bottom: var(--px40);
            border-radius: var(--px10);
            background-color: #ffffff;
            color: #333333;
        }

            .footer__dialog__wrap {
                height: 100%;
                overflow-y: auto;
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .footer__dialog__wrap::-webkit-scrollbar {
                display: none;
            }

                .footer__dialog__title {
                    display: flex;
                    align-items: center;
                    column-gap: var(--px18);
                    width: fit-content;
                    margin-inline: auto;
                    font-size: var(--font24);
                    line-height: 1.25;
                }

                    .footer__dialog__title::before {
                        content: "";
                        aspect-ratio: 1 / 1;
                        display: block;
                        width: var(--px22);
                        background-color: #94d5db;
                    }


                .footer__dialog__text {
                    margin-top: var(--px18);
                    font-size: var(--font12);
                    font-weight: 400;
                    line-height: calc(44.8 / 24);
                }


        .footer__dialog__btn {
            aspect-ratio: 270 / 45;
            display: block;
            width: clamp(270px, 100vw * (270 / 375), 368.64px);
            margin-top: var(--px16);
            margin-inline: auto;
            border-radius: var(--px5);
            background-color: #c2bec2;
            color: #ffffff;
            font-size: var(--font18);
            line-height: 2.5;
            text-align: center;
        }





/*------------------------------------*\
    $PROGRESS_BAR
\*------------------------------------*/
.progress {
    --progressPrimary: #d2d2d2;
    --progressAccent : #ffaa8f;
    position: relative;
    width: max-content;
    margin-top: var(--px48);
    margin-inline: auto;
    margin-bottom: var(--px24);
}

    .progress__list {
        display: flex;
        justify-content: center;
        align-items: center;
        column-gap: var(--px39);
    }
    .progress__list--low {
        display: flex;
        justify-content: center;
        align-items: center;
        column-gap: var(--px43);
    }

        .progress__item {
            position: relative;
            aspect-ratio: 1 / 1;
            width: var(--px12);
            border-radius: 100%;
            background-color: var(--progressPrimary);
        }
        .progress__item.is-active {
            background-color: var(--progressAccent);
            transition: background-color 0s .15s var(--linear);
        }

            .progress__item:not(:first-child)::before {
                content: "";
                position: absolute;
                top: 50%;
                right: 50%;
                transform: translateY(-50%);
                width: var(--px52);
                height: var(--px3);
                background-image: linear-gradient(90deg, var(--progressAccent) 50%, var(--progressPrimary) 50%);
                background-repeat: no-repeat;
                background-position: 100% 0%;
                background-size: 200%;
                transition: background-position .15s var(--linear);
            }
            .progress__item.is-active:not(:first-child)::before {
                background-position: 0% 0%;
            }

            .progress__num {
                position: absolute;
                top: clamp(-40.96px, -100vw * (30 / 375), -30px);
                left: 50%;
                transform: translateX(-50%);
                color: var(--progressPrimary);
                font-size: var(--font10);
                line-height: 1;
            }
            .progress__item.is-active .progress__num {
                color: var(--progressAccent);
            }

                .progress__num strong {
                    font-size: var(--font14);
                }


    .progress__icon {
        aspect-ratio: 106 / 127;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate(-22.917%, -50%);
        display: block;
        width: var(--px24);
        background-image: url(../images/icon-dog.webp);
        background-repeat: no-repeat;
        background-size: contain;
        transition: .15s var(--linear);
        --iconHalf: clamp(6.256px, 100vw * (6.256 / 375), 8.542px);
    }
    .progress__list:has(> .progress__item.is-active + .progress__item.is-active) + .progress__icon {
        left: calc(16.667% - var(--iconHalf));
    }
    .progress__list:has(> .progress__item.is-active + .progress__item.is-active + .progress__item.is-active) + .progress__icon {
        left: calc(33.333% - var(--iconHalf));
    }
    .progress__list:has(> .progress__item.is-active + .progress__item.is-active + .progress__item.is-active + .progress__item.is-active) + .progress__icon {
        left: calc(50% - var(--iconHalf));
    }
    .progress__list:has(> .progress__item.is-active + .progress__item.is-active + .progress__item.is-active + .progress__item.is-active + .progress__item.is-active) + .progress__icon {
        left: calc(66.667% - var(--iconHalf));
    }
    .progress__list:has(> .progress__item.is-active + .progress__item.is-active + .progress__item.is-active + .progress__item.is-active + .progress__item.is-active + .progress__item.is-active) + .progress__icon {
        left: calc(83.333% - var(--iconHalf));
    }
    .progress__list:has(> .progress__item.is-active + .progress__item.is-active + .progress__item.is-active + .progress__item.is-active + .progress__item.is-active + .progress__item.is-active + .progress__item.is-active) + .progress__icon {
        left: calc(100% - var(--iconHalf));
    }

    .progress__list--low:has(> .progress__item.is-active + .progress__item.is-active) + .progress__icon {
        left: calc(20% - var(--iconHalf));
    }
    .progress__list--low:has(> .progress__item.is-active + .progress__item.is-active + .progress__item.is-active) + .progress__icon {
        left: calc(40% - var(--iconHalf));
    }
    .progress__list--low:has(> .progress__item.is-active + .progress__item.is-active + .progress__item.is-active + .progress__item.is-active) + .progress__icon {
        left: calc(60% - var(--iconHalf));
    }
    .progress__list--low:has(> .progress__item.is-active + .progress__item.is-active + .progress__item.is-active + .progress__item.is-active + .progress__item.is-active) + .progress__icon {
        left: calc(80% - var(--iconHalf));
    }
    .progress__list--low:has(> .progress__item.is-active + .progress__item.is-active + .progress__item.is-active + .progress__item.is-active + .progress__item.is-active + .progress__item.is-active) + .progress__icon {
        left: calc(100% - var(--iconHalf));
    }





/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
.main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
}

    .main__footer {
        white-space: nowrap;
    }

        .main__footer__top {
            padding-inline: var(--px10);
            border-image-source: linear-gradient(#fdfff2, #fdfff2);
            border-image-slice: 0 fill;
            border-image-outset: 0 100vw;
            color: #007187;
            font-size: var(--font12);
            line-height: 2.5;
            text-align: right;
        }

        .main__footer__bottom {
            padding-inline: var(--px10);
            border-image-source: linear-gradient(#f5f5f5, #f5f5f5);
            border-image-slice: 0 fill;
            border-image-outset: 0 100vw;
            color: #6b6b6b;
            font-size: var(--font10);
            line-height: 2.9;
            text-align: center;
        }



.fv {
    position: relative;
    /* aspect-ratio: 750 / 360; */
    height: clamp(180px, 100vw * (180 / 375), 245.76px);
    background-image:
        image-set(
            url(../images/fv.webp) 1x,
            url(../images/fv@2x.webp) 2x
        );
    background-image:
        -webkit-image-set(
            url(../images/fv.webp) 1x,
            url(../images/fv@2x.webp) 2x
        );
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: cover;
    color: #333333;
    font-weight: 500;
    overflow: hidden;
    transition: height .3s .3s var(--easeOutQuart);
}
.fv.is-remove {
    height: clamp(140px, 100vw * (140 / 375), 191.147px);
}
.fv--modifier.is-remove {
    height: clamp(180px, 100vw * (180 / 375), 245.76px);
}


    .fv__txt {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 100%;
        padding-inline: 9.6%;
        /* padding-bottom: clamp(44.5px, 100vw * (44.5 / 375), 89px); */
        font-size: var(--font20);
        line-height: 1.6;
    }
    .fv--modifier .fv__txt {
        padding-inline: 8%;
        font-size: var(--font16);
        line-height: 1.4;
    }

        .fv__txt strong {
            color: #da9639;
            font-size: var(--font32);
        }

        .fv__option {
            display: inline-block;
            width: calc(100% * (212 / 315));
            margin-top: var(--px6);
        }



.contents {
    flex-grow: 1;
    min-height: calc(90dvh - clamp(143px, 100vw * (143 / 375), 195.243px));
    padding-inline: 11.2%;
}


/* Dialog */
.start {
    position: fixed;
    inset: 0;
    width: clamp(325px, 100vw * (325 / 375), 443.733px);
    height: max-content;
    padding-top: var(--px27);
    padding-inline: var(--px22);
    padding-bottom: var(--px30);
    margin: auto;
    border-radius: var(--px5);
    background-color: #ffffff;
    pointer-events: visible;
    animation-name: dialogOpen;
    animation-duration: 1s;
    animation-delay: 0.3s;
    animation-timing-function: var(--easeOutQuart);
    animation-fill-mode: both;
}
@keyframes dialogOpen {
    from {
        transform: translateY(10vh);
        transform: translateY(10dvh);
        opacity: 0;
    }
    to {
        transform: none;
        opacity: 1;
    }
}

.start::backdrop {
    background-color: black;
    animation-name: dialogBackdrop;
    animation-duration: 0.3s;
    animation-timing-function: var(--easeOutQuart);
    animation-fill-mode: both;
}
@keyframes dialogBackdrop {
    from {
        background-color: transparent;
    }
    to {
        background-color: rgb(0 0 0 / 0.5);
    }
}

    .start__catchphrase {
        width: fit-content;
        padding-inline: var(--px13);
        margin-inline: auto;
        border-radius: 99px;
        background-color: #ffeecd;
        color: #da9639;
        font-size: var(--font12);
        line-height: calc(55 / 24);
    }

    .start__txt {
        margin-top: 0.5em;
        color: #666666;
        font-size: var(--px18);
        line-height: 1.5;
        text-align: center;
    }

    .start__content {
        position: relative;
        margin-top: var(--px15);
        filter: drop-shadow(0 var(--px2) clamp(3.5px, 100vw * (3.5 / 375), 4.779px) rgb(0 0 0 / 0.2)) drop-shadow(0 clamp(3.5px, 100vw * (3.5 / 375), 4.779px) clamp(3.5px, 100vw * (3.5 / 375), 4.779px) rgb(0 0 0 / 0.2));
    }
    .start__content::before {
        content: "";
        aspect-ratio: 106 / 127;
        position: absolute;
        top: clamp(-5.461px, -100vw * (4 / 375), -4px);
        right: clamp(-23.893, -100vw * (17.5 / 375), -17.5px);
        display: block;
        width: var(--px45);
        background-image: url(../images/icon-dog.webp);
        background-repeat: no-repeat;
        background-size: contain;
        pointer-events: none;
    }

        .start__btn {
            aspect-ratio: 560 / 220;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: var(--px5);
            background-color: var(--startBtnColor, #666666);
            color: white;
            font-size: var(--font18);
            box-shadow: 0 var(--px3) 0 var(--startBtnEdgeColor, #333333);
        }
        .start__btn + .start__btn {
            margin-top: var(--px16);
        }
        .start__btn--orange {
            --startBtnColor: #da9639;
            --startBtnEdgeColor: #b06022;
        }
        .start__btn--blue {
            --startBtnColor: #65b6be;
            --startBtnEdgeColor: #367f88;
        }



/* Section */
.section {
    position: relative;
    display: none;
    padding-bottom: var(--px28);
    animation-name: slideInLeft;
    animation-duration: 0.3s;
    animation-delay: 0.15s;
    animation-timing-function: var(--easeOutQuart);
    animation-fill-mode: both;
}
.section.is-active {
    display: block;
}
.section + .section.is-active {
    animation-name: slideInRight;
}
@keyframes slideInLeft {
    from {
        left: -20%;
        opacity: 0;
    }
    to {
        left: 0;
        opacity: 1;
    }
}
@keyframes slideInRight {
    from {
        right: -20%;
        opacity: 0;
    }
    to {
        right: 0;
        opacity: 1;
    }
}

    .section__title {
        position: relative;
        padding-inline: 1.333em;
        color: #666666;
        font-size: var(--px18);
        line-height: 1.25;
    }
    .section__title::before {
        content: "";
        aspect-ratio: 1 / 1;
        position: absolute;
        top: 0.125em;
        left: 0;
        width: 1em;
        background-color: #94d5db;
    }

    .section__txt {
        padding-left: 2em;
        margin-top: var(--px2);
        color: #666666;
        font-size: var(--font12);
        line-height: 1.5;
    }

    .section__grid {
        position: relative;
        margin-top: var(--px14);
        filter: drop-shadow(clamp(1.5px, 100vw * (1.5 / 375), 2.048px) clamp(1.5px, 100vw * (1.5 / 375), 2.048px) clamp(3.5px, 100vw * (3.5 / 375), 4.779px) rgb(0 0 0 / 0.2)) drop-shadow(clamp(2.5px, 100vw * (2.5 / 375), 3.413px) clamp(2.5px, 100vw * (2.5 / 375), 3.413px) clamp(3.5px, 100vw * (3.5 / 375), 4.779px) rgb(0 0 0 / 0.2));
    }

        .section__grid__wrap {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-column-gap: var(--px10);
            grid-row-gap: var(--px12);
            overflow: hidden;
            transition: height .3s var(--easeOutQuart);
        }
        .section__grid:has(~ .toggle-btn) .section__grid__wrap {
            height: clamp(236px, 100vw * (236 / 375), 322.219px);
        }
        .section__grid:has(~ .toggle-btn).is-active .section__grid__wrap {
            height: clamp(439px, 100vw * (439 / 375), 599.381px);
        }

            .section__grid__column--wide,
            .section__grid__column--error {
                grid-column: 2 span;
            }
            .section__grid__column--error {
                grid-column: 2 span;
            }

                :is(
                    .section__grid__column,
                    .section__grid__column--wide,
                    .section__grid__column--error
                ) input {
                    display: none;
                }

                .section__grid__frame {
                    aspect-ratio: 140.5 / 112;
                    display: block;
                    border: var(--px1) solid #333333;
                    border-radius: var(--px5);
                    background-color: white;
                    color: #666666;
                    transition: .3s var(--easeOutQuart);
                    overflow: hidden;
                    transition-property: border-color, background-color, color;
                }
                .section__grid__column--wide .section__grid__frame {
                    aspect-ratio: 291 / 67;
                }
                .section__grid.is-checked .section__grid__frame {
                    border-color: transparent;
                    background-color: #ebebeb;
                }
                :is(input[type=checkbox], input[type=radio]):checked + .section__grid__frame {
                    border-color: #ff328d;
                    background-color: #ff328d;
                    color: #ffffff;
                }

                    .section__grid__img {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        row-gap: var(--px1);
                        height: 100%;
                        font-size: var(--font14);
                        line-height: 1.2;
                        text-align: center;
                    }
                    .section__grid__column--wide .section__grid__img {
                        flex-direction: row;
                        column-gap: var(--px6);
                    }

                        .section__grid__img img {
                            aspect-ratio: 158 / 117;
                            width: clamp(79px, 100vw * (79 / 375), 107.861px);
                            margin-inline: auto;
                        }
                        .section__grid__column--wide .section__grid__img img {
                            aspect-ratio: 86 / 86;
                            width: var(--px43);
                            margin-inline: 0;
                        }
                        .section__grid.is-checked :is(input[type=checkbox], input[type=radio]):not(:checked) + .section__grid__frame .section__grid__img img {
                            filter: saturate(0%) brightness(131%);
                        }

                            .section__grid__img figcaption {
                                display: flex;
                                align-items: flex-end;
                                min-height: var(--px25);
                            }


    .section__caution {
        position: relative;
        display: none;
        width: 100%;
        margin-top: var(--px15);
        border-radius: var(--px5);
        background-color: #fcecec;
        color: #ff0100;
        font-size: var(--font14);
        line-height: calc(59 / 28);
        text-align: center;
    }
    .section__caution.is-active {
        display: block;
    }

        .section__caution::before {
            content: "";
            position: absolute;
            bottom: 100%;
            left: clamp(8.5px, 100vw * (8.5 / 375), 11.605px);
            border-inline: clamp(5.5px, 100vw * (5.5 / 375), 7.509px) solid transparent;
            border-bottom: clamp(8.5px, 100vw * (8.5 / 375), 11.605px) solid #fcecec;
        }


    .section__controls {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: var(--px28);
    }
    .section__controls:has(> .section__controls__submit) {
        margin-top: clamp(104px, 100vw * (104 / 375), 141.995);
        margin-inline: clamp(-28.672px, -100vw * (21 / 375), -21px);
    }

        .section__controls__cover {
            position: fixed;
            inset: 0;
            z-index: 10;
            background-color: rgb(0 0 0 / 0.3);
            opacity: 0;
            pointer-events: none;
            transition: opacity .3s var(--easeOutQuart);
        }
        .section__controls.is-active .section__controls__cover {
            opacity: 1;
            pointer-events: visible;
        }

        .section__controls__btn {
            position: relative;
            z-index: 11;
            width: clamp(270px, 100vw * (270 / 375), 368.64px);
            margin-inline: auto;
            border: var(--px1) solid #d3d3d3;
            border-radius: var(--px5);
            background-color: #e4e3e4;
            color: #ffffff;
            font-size: var(--font18);
            line-height: calc(44 / 18);
            text-align: center;
            overflow: hidden;
        }
        .section__controls__btn.is-active {
            border-color: transparent;
            background-image: linear-gradient(#0e9eb4, #0c8193);
            filter: drop-shadow(clamp(1.5px, 100vw * (1.5 / 375), 2.048px) clamp(1.5px, 100vw * (1.5 / 375), 2.048px) clamp(3.5px, 100vw * (3.5 / 375), 4.779px) rgb(0 0 0 / 0.2)) drop-shadow(clamp(2.5px, 100vw * (2.5 / 375), 3.413px) clamp(2.5px, 100vw * (2.5 / 375), 3.413px) clamp(3.5px, 100vw * (3.5 / 375), 4.779px) rgb(0 0 0 / 0.2));
        }

            .section__controls__btn::before {
                content: "";
                position: absolute;
                top: 50%;
                right: var(--px17);
                transform: translateY(-50%);
                border-block: var(--px7) solid transparent;
                border-left: var(--px14) solid #ffffff;
            }

            .section__controls__btn.is-active::after {
                content: "";
                position: absolute;
                z-index: -1;
                left: -30%;
                top: -50%;
                display: block;
                width: clamp(50px, 100vw * (50 / 375), 68.267px);
                height: clamp(100px, 100vw * (100 / 375), 136.533px);
                transform: rotate(30deg);
                background-image: linear-gradient(90deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 1) 50%, rgb(255 255 255 / 0) 100%);
                animation: shiny 3s infinite var(--linear);
            }
            @keyframes shiny {
                0% {
                    left: -30%;
                }
                20% {
                    left: 120%;
                }
                100% {
                    left: 120%;
                }
            }
    

        .section__controls__mini-btn {
            color: #666666;
            font-size: var(--font12);
            line-height: 1.5;
            text-decoration: underline;
        }

        .section__controls__submit {
            position: relative;
            z-index: 11;
            width: clamp(271px, 100vw * (271 / 375), 370px);
            opacity: 0.5;
            pointer-events: none;
            overflow: hidden;
        }
        .section__controls__submit.is-active {
            opacity: 1;
            pointer-events: visible;
        }

            .section__controls__submit.is-active::after {
                content: "";
                position: absolute;
                left: -30%;
                top: -50%;
                display: block;
                width: clamp(50px, 100vw * (50 / 375), 68.267px);
                height: clamp(150px, 100vw * (100 / 375), 204.8px);
                transform: rotate(30deg);
                background-image: linear-gradient(90deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 1) 50%, rgb(255 255 255 / 0) 100%);
                animation: shiny 3s infinite var(--linear);
            }


        /* .section__controls__submit-arrow {
            aspect-ratio: 83 / 84;
            position: absolute;
            z-index: 11;
            top: clamp(-101.035px, -100vw * (74 / 375), -74px);
            left: 50%;
            transform: translateX(-50%);
            display: none;
            width: clamp(41.5px, 100vw * (41.5 / 375), 56.661px);
            clip-path: polygon(26.506% 0, 73.494% 0, 73.494% 52.381%, 100% 52.381%, 50% 100%, 0 52.381%, 26.506% 52.381%);
            pointer-events: none;
            animation-name: blink;
            animation-duration: 1.5s;
            animation-timing-function: var(--easeOutQuart);
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }
        .section__controls.is-active .section__controls__submit-arrow {
            display: block;
        }
        @keyframes blink {
            from {
                opacity: 1;                    
            }
            to {
                opacity: 0;
            }
        } */

            .section__controls__submit-arrow::before {
                content: "";
                position: absolute;
                top: 0;
                left: 50%;
                transform: translateX(-50%);
                width: var(--px20);
                height: var(--px25);
                background-color: #92cbec;
            }
            .section__controls__submit-arrow::after {
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                border-inline: clamp(20.75, 100vw * (20.75 / 375), 28.331) solid transparent;
                border-top: var(--px20) solid #92cbec;
            }


    .section__content {
        margin-top: var(--px20);
    }

        .section__block + .section__block {
            margin-top: var(--px26);
        }

        .section__label {
            display: flex;
            align-items: center;
            column-gap: var(--px8);
            margin-bottom: var(--px9);
        }

            .section__label__icon {
                aspect-ratio: 30 / 44;
                display: block;
                width: var(--px15);
                height: var(--px22);
                background-repeat: no-repeat;
                background-position: 0 50%;
                background-size: contain;
            }
            .section__label__icon.icon-human {
                background-image: url(../images/icon-human.webp);
            }
            .section__label__icon.icon-box {
                background-image: url(../images/icon-box.webp);
            }
            .section__label__icon.icon-phone {
                background-image: url(../images/icon-phone.webp);
            }


        .section__input {
            aspect-ratio: 582 / 122;
            position: relative;
            display: flex;
            align-items: center;
            column-gap: var(--px10);
            padding-right: var(--px24);
            padding-left: var(--px17);
            border: var(--px1) solid #ff509d;
            border-radius: var(--px5);
            background-color: #feffc7;
            white-space: nowrap;
        }
        .section__input.is-true {
            background-color: #ffffff;
        }

            .section__input > strong {
                margin-left: clamp(-8.192px, -100vw * (6 / 375), -6rem);
                color: #94d5db;
                font-size: var(--font24);
            }
            .section__input > span {
                color: #666666;
                font-size: var(--font18);
            }

            .section__input > input {
                flex-grow: 1;
                width: 1px;
                color: #000000;
                font-size: var(--font18);
            }
            .section__input > span + input {
                padding-left: var(--px30);
            }
            .section__input > input::placeholder {
                color: #999999;
                font-size: var(--font14);
            }
            .section__input.is-true > input {
                background-color: #ffffff;
            }
            .section__input.is-true > :is(
                input:-webkit-autofill,
                input:-webkit-autofill:hover,
                input:-webkit-autofill:focus,
                input:-webkit-autofill:active
            ) {
                -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
                -webkit-text-fill-color: inherit !important;
            }


            .section__input__placeholder {
                position: absolute;
                top: 50%;
                left: var(--px24);
                transform: translateY(-50%);
                color: #999999;
                font-size: var(--font14);
                line-height: 2;
                white-space: nowrap;
                transition: .3s var(--easeOutQuart);
                transition-property: top, left, transform, color, font-size;
                pointer-events: none;
            }
            .section__input > strong ~ .section__input__placeholder {
                left: var(--px45);
            }
            .section__input > span ~ .section__input__placeholder {
                left: clamp(93px, 100vw * (93 / 375), 126.976px);
            }
            :is(
                input:focus,
                input:not(:placeholder-shown)
             ) ~ .section__input__placeholder {
                top: var(--px2);
                left: var(--px12);
                transform: none;
                color: #ff328d;
                font-size: var(--font10);
            }

            .section__input__counter {
                position: absolute;
                top: clamp(-15.019px, -100vw * (11 / 375), -11rem);
                right: var(--px8);
                padding-inline: 1em;
                border-radius: 99px;
                background-color: #f2f2f2;
                color: #666666;
                font-size: var(--font10);
                line-height: 2;
                white-space: nowrap;
            }

                .section__input__counter__hide {
                    display: none;
                }
                .section__input__counter__hide.is-active {
                    display: inline;
                    color: #ff0100;
                }


        .section__input--mini {
            display: none;
        }
        .section__input--mini.is-active {
            display: block;
            margin-top: var(--px12);
        }

            .section__input--mini > input {
                display: block;
                width: 100%;
                padding-inline: var(--px16);
                border-bottom: var(--px1) solid #cccccc;
                color: #333333;
                font-size: var(--font15);
                line-height: calc(38 / 15);
            }
            .section__input--mini > input:placeholder-shown {
                padding-inline: 0;
            }
            .section__input--mini > input::placeholder {
                color: #999999;
            }
            .section__input--mini > :is(
                input:-webkit-autofill,
                input:-webkit-autofill:hover,
                input:-webkit-autofill:focus,
                input:-webkit-autofill:active
            ) {
                -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
                -webkit-text-fill-color: inherit !important;
            }


        .section__input--small {
            display: block;
            margin-top: var(--px15);
        }

            .section__input--small > input {
                display: block;
                width: 100%;
                padding-inline: var(--px16);
                color: #333333;
                font-size: var(--font15);
                line-height: calc(23 / 15);
            }
            .section__input--small > input::placeholder {
                color: #cccccc;
            }
            .section__input--small > :is(
                input:-webkit-autofill,
                input:-webkit-autofill:hover,
                input:-webkit-autofill:focus,
                input:-webkit-autofill:active
            ) {
                -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
                -webkit-text-fill-color: inherit !important;
            }


.toggle-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: var(--px1);
    width: fit-content;
    min-width: clamp(180px, 100vw * (180 / 375), 245.76px);
    height: var(--px30);
    padding-right: clamp(14.5px, 100vw * (14.5 / 375), 19.797px);
    padding-left: var(--px20);
    margin-top: var(--px15);
    margin-inline: auto;
    border-radius: 99px;
    background-color: #f2f2f2;
    color: #555555;
    font-size: var(--font12);
}

    .toggle-btn::after {
        content: "";
        aspect-ratio: 1 / 1;
        transform: rotate(180deg);
        display: block;
        width: var(--px15);
        background-image: url(../images/icon-toggle.svg);
        background-repeat: no-repeat;
        background-size: contain;
    }
    .toggle-btn.is-active::after {
        transform: none;
    }



.bubble {
    display: grid;
    grid-template-columns: clamp(73px, 100vw * (73 / 375), 99.669px) 1fr;
    grid-column-gap: var(--px18);
    align-items: end;
    margin-inline: clamp(-12.288px, 100vw * (9 / 375), -9px);
    margin-bottom: var(--px28);
}

    .bubble__image {
        padding-bottom: clamp(1.5px, 100vw * (1.5 / 375), 2.048px);
    }

    .bubble__txt {
        position: relative;
        display: flex;
        align-items: center;
        min-height: clamp(88px, 100vw * (88 / 375), 120.149px);
        padding: var(--px18);
        border-radius: var(--px4);
        background-color: #eaf7f8;
        color: #555555;
        font-size: var(--font11);
        line-height: 1.6;
    }

        .bubble__txt::before {
            content: "";
            position: absolute;
            top: 50%;
            right: 100%;
            transform: translateY(-50%);
            border-block: clamp(5.5px, 100vw * (5.5 / 375), 7.509px) solid transparent;
            border-right: var(--px8) solid #eaf7f8;
        }


.lock-text {
    width: fit-content;
    padding-left: 1.5em;
    margin-inline: auto;
    margin-bottom: clamp(12.5px, 100vw * (12.5 / 375), 17.067px);
    background-image: url(../images/icon-key.webp);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 1.05em;
    color: #666666;
    font-size: var(--font10);
    line-height: 1.5;
}


.address {
    position: relative;
    overflow: hidden;
}

    .address__wrap {
        height: 0;
        transition: height .3s var(--easeOutQuart);
    }

        .address__block {
            margin-top: var(--px8);
        }

            .address__block select {
                display: block;                
                width: 100%;
                padding-right: var(--px32);
                padding-left: var(--px15);
                border-bottom: var(--px1) solid #cccccc;
                background-image: url(../images/icon-select-arrow.svg);
                background-repeat: no-repeat;
                background-position: calc(100% - clamp(11.5px, 100vw * (11.5 / 375), 15.701px)) 50%;
                background-size: clamp(9.5px, 100vw * (9.5 / 375), 12.971px);
                color: #999999;
                font-size: var(--font15);
                line-height: calc(92 / 30);
            }


.point {
    display: grid;
    grid-template-columns: clamp(49.5px, 100vw * (49.5 / 375), 67.584px) 1fr;
    grid-column-gap: var(--px17);
    align-items: center;
    margin-top: var(--px40);
    margin-left: clamp(-2.048px, -100vw * (1.5 / 375), -1.5px);
}

    .point__image {
        aspect-ratio: 99 / 117;
        margin-top: clamp(-11.605px, -100vw * (8.5 / 375), -8.5px);
        background-image: url(../images/icon-point.webp);
        background-repeat: no-repeat;
        background-position: 0 50%;
        background-size: contain;
    }

    .point__txt {
        position: relative;
        display: flex;
        align-items: center;
        padding-block: var(--px13);
        padding-right: var(--px10);
        padding-left: var(--px16);
        border-radius: var(--px4);
        background-color: #eaf7f8;
        color: #555555;
        font-size: var(--font11);
        line-height: 1.6;
    }

        .point__txt strong {
            color: #ff509d;
            font-size: var(--font13);
        }

        .point__txt::before {
            content: "";
            position: absolute;
            top: 50%;
            right: 100%;
            transform: translateY(-50%);
            border-block: clamp(5.5px, 100vw * (5.5 / 375), 7.509px) solid transparent;
            border-right: var(--px8) solid #eaf7f8;
        }