@charset "Shift_JIS";

h1 {
    position: absolute;
    width: calc(1 / var(--base) * 100vw);
    height: calc(1 / var(--base) * 100vw);
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.btn-custom {
    color: #FFF !important;
    font-weight: 600;
    text-decoration: none !important;
}

/*パンくず*/
#breadCrumbArea {
    margin-top: 142px;

}

.hero {
    max-width: 100%;
    overflow-x: clip;
    background: var(--pale-cyan);

    picture,
    img {
        width: 100%;
        object-fit: cover;
    }

    .hero_img {
        background: #FFF;
        position: relative;
        clip-path: inset(-100vmax 0);

        .hero_img_1 {
            position: absolute;
            width: calc(232/var(--base)*100vw);
            height: calc(232/var(--base)*100vw);
            left: calc(-84/var(--base)*100vw);
            bottom: calc(-148/var(--base)*100vw);
        }

        .hero_img_2 {
            position: absolute;
            width: calc(232/var(--base)*100vw);
            height: calc(232/var(--base)*100vw);
            right: calc(-64/var(--base)*100vw);
            bottom: calc(-50/var(--base)*100vw);
        }
    }
}

.overview {
    padding: calc(111 / var(--base) * 100vw) 0 calc(101 / var(--base) * 100vw);
    background: var(--pale-cyan);

    .overview__inner {
        padding: 0 calc(96 / var(--base) * 100vw);
        display: flex;
        flex-direction: column;
        gap: calc(56 / var(--base) * 100vw);

        .overview-card {
            position: relative;
            padding: calc(62 / var(--base) * 100vw) calc(46 / var(--base) * 100vw) calc(56 / var(--base) * 100vw);
            border-radius: calc(24 / var(--base) * 100vw);
            background: var(--white);

            .overview-card__pill {
                position: absolute;
                position: absolute;
                top: calc(-39 / var(--base) * 100vw);
                left: 50%;
                transform: translateX(-50%);
                width: min(100%, calc(696 / var(--base) * 100vw));
                min-height: calc(78 / var(--base) * 100vw);
                margin: 0 auto;
                padding: calc(13 / var(--base) * 100vw) calc(20 / var(--base) * 100vw) calc(17 / var(--base) * 100vw);
                border-radius: calc(100 / var(--base) * 100vw);
                color: var(--white);
                background: var(--blue);
                font-size: calc(36 / var(--base) * 100vw);
                font-weight: 800;
                letter-spacing: 0;
                line-height: calc(32 / var(--base) * 100vw);
                display: flex;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;
            }

            .overview-card__lead {
                color: var(--text-black);
                font-size: calc(24 / var(--base) * 100vw);
                font-weight: 700;
                letter-spacing: 0;
                line-height: calc(32 / var(--base) * 100vw);
                text-align: center;
            }

            .overview-card__period {
                margin: calc(45 / var(--base) * 100vw) auto 0;
                width: min(100%, calc(895 / var(--base) * 100vw));
                display: grid;
                grid-template-columns: calc(253 / var(--base) * 100vw) 1fr;
                gap: calc(16.3 / var(--base) * 100vw);
                color: var(--blue);

                .overview-card__period__text {
                    width: 100%;
                    padding: calc(4.6 / var(--base) * 100vw) 0 calc(7 / var(--base) * 100vw);
                    /* display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: calc(22 / var(--base) * 100vw); */
                    border-top: calc(1.2 / var(--base) * 100vw) solid var(--blue);
                    border-bottom: calc(1.2 / var(--base) * 100vw) solid var(--blue);
                    /* font-size: calc(20 / var(--base) * 100vw); */
                    font-size: calc(18 / var(--base) * 100vw);
                    font-weight: 700;
                    letter-spacing: calc(-0.6 / var(--base) * 100vw);
                    line-height: calc(27 / var(--base) * 100vw);
                    box-sizing: border-box;
                }

                img {
                    object-fit: cover;
                }
            }

            .case-title {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: calc(20 / var(--base) * 100vw);
                margin-top: calc(58 / var(--base) * 100vw);
                color: var(--blue);
                font-size: calc(30 / var(--base) * 100vw);
                font-weight: 700;
                letter-spacing: 0;
                line-height: calc(32 / var(--base) * 100vw);

                &::before,
                &::after {
                    width: calc(142 / var(--base) * 100vw);
                    height: calc(3 / var(--base) * 100vw);
                    background-color: var(--blue);
                    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='3' viewBox='0 0 12 3'%3E%3Cpath d='M1.5 1.5H7.5' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / calc(12 / var(--base) * 100vw) calc(3 / var(--base) * 100vw) repeat-x;
                    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='3' viewBox='0 0 12 3'%3E%3Cpath d='M1.5 1.5H7.5' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / calc(12 / var(--base) * 100vw) calc(3 / var(--base) * 100vw) repeat-x;
                    content: "";
                    box-sizing: border-box;
                }
            }

            .case-grid {
                display: grid;
                grid-template-columns: repeat(3, minmax(0, calc(348 / var(--base) * 100vw)));
                gap: calc(20 / var(--base) * 100vw);
                margin-top: calc(20 / var(--base) * 100vw);

                .case-card {
                    height: 100%;
                    overflow: hidden;
                    border-radius: calc(24 / var(--base) * 100vw);
                    background: var(--white);
                    box-shadow: 0 calc(3 / var(--base) * 100vw) calc(6 / var(--base) * 100vw) var(--shadow);

                    img {
                        aspect-ratio: 348 / 286;
                        object-fit: cover;
                    }

                    .case-card__body {
                        min-height: calc(374 / var(--base) * 100vw);
                        padding: calc(19 / var(--base) * 100vw) calc(30 / var(--base) * 100vw) calc(33 / var(--base) * 100vw) calc(24 / var(--base) * 100vw);
                        color: var(--text-black);
                        position: relative;

                        h3 {
                            font-size: calc(28 / var(--base) * 100vw);
                            font-weight: 700;
                            letter-spacing: 0;
                            line-height: calc(29 / var(--base) * 100vw);
                            display: flex;
                            gap: calc(11 / var(--base) * 100vw);
                        }

                        .case-card__tag {
                            margin-top: calc(16 / var(--base) * 100vw);
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            width: calc(148 / var(--base) * 100vw);
                            height: calc(32 / var(--base) * 100vw);
                            padding: calc(4 / var(--base) * 100vw) 0;
                            border-radius: calc(100 / var(--base) * 100vw);
                            color: var(--white);
                            background: var(--gradient-cyan-pink-btn);
                            font-size: calc(18 / var(--base) * 100vw);
                            font-weight: 700;
                            letter-spacing: 0;
                            line-height: calc(20 / var(--base) * 100vw);
                            box-sizing: border-box;
                        }

                        ul {
                            margin-top: calc(7 / var(--base) * 100vw);
                            text-align: left;

                            li {
                                position: relative;
                                padding-left: calc(20 / var(--base) * 100vw);
                                font-size: calc(24 / var(--base) * 100vw);
                                font-weight: 400;
                                letter-spacing: 0;
                                line-height: calc(34 / var(--base) * 100vw);

                                &::before {
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    content: "\30FB";
                                    box-sizing: border-box;
                                }
                            }
                        }

                        p {
                            position: absolute;
                            right: calc(25 / var(--base) * 100vw);
                            bottom: calc(36 / var(--base) * 100vw);
                            margin: 0;
                            font-size: calc(24 / var(--base) * 100vw);
                            font-weight: 400;
                            letter-spacing: 0;
                            line-height: calc(34 / var(--base) * 100vw);
                            text-align: right;
                        }
                    }
                }

                .case-card:hover {
                    text-decoration: none;
                }
            }
        }
    }
}

.usage {
    background: var(--white);

    .usage__inner {
        padding: calc(65.5 / var(--base) * 100vw) calc(152 / var(--base) * 100vw) calc(96.5 / var(--base) * 100vw);

        .slash-title {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: calc(7 / var(--base) * 100vw);
            color: var(--pink);
            font-size: calc(36 / var(--base) * 100vw);
            font-weight: 800;
            text-align: center;

            &::before,
            &::after {
                width: calc(42 / var(--base) * 100vw);
                height: calc(5 / var(--base) * 100vw);
                transform: rotate(45deg);
                border-radius: calc(999 / var(--base) * 100vw);
                background: var(--pink);
                content: "";
                box-sizing: border-box;
            }

            &::after {
                transform: rotate(-45deg);
                box-sizing: border-box;
            }
        }

        .flow {
            margin-top: calc(45 / var(--base) * 100vw);
            display: grid;
            grid-template-columns: 1fr calc(20 / var(--base) * 100vw) 1fr calc(20 / var(--base) * 100vw) 1fr;
            gap: calc(9 / var(--base) * 100vw);
            align-items: center;
            height: 100%;

            .flow__arrow {
                width: calc(23 / var(--base) * 100vw);
                height: calc(18 / var(--base) * 100vw);
                background: var(--blue);
                border: none;
                clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
                rotate: 90deg;
            }

            .flow-card {
                position: relative;
                overflow: visible;
                border-radius: calc(20 / var(--base) * 100vw);
                background: var(--white);
                box-shadow: 0 calc(3 / var(--base) * 100vw) calc(6 / var(--base) * 100vw) var(--shadow);
                text-align: center;

                h3 {
                    border-radius: calc(20 / var(--base) * 100vw) calc(20 / var(--base) * 100vw) 0 0;
                    padding: 0;
                    color: var(--white);
                    font-size: calc(22 / var(--base) * 100vw);
                    font-weight: 700;
                    letter-spacing: 0;
                    line-height: calc(22 / var(--base) * 100vw);
                    min-height: calc(42 / var(--base) * 100vw);
                    place-content: center;
                }

                .flow-card__inner {
                    padding: calc(11 / var(--base) * 100vw) calc(24 / var(--base) * 100vw) calc(20 / var(--base) * 100vw);
                    display: flex;
                    flex-direction: column;
                    gap: calc(9 / var(--base) * 100vw);

                    p {
                        color: var(--text-black);
                        font-size: calc(18 / var(--base) * 100vw);
                        font-weight: 700;
                        letter-spacing: 0;
                        line-height: calc(23 / var(--base) * 100vw);
                    }

                    img {
                        aspect-ratio: 282 / 186;
                        margin: 0 auto;
                        object-fit: cover;
                    }

                    strong {
                        margin-top: calc(10 / var(--base) * 100vw);
                        display: block;
                        text-align: center;
                        color: #121212;
                        font-size: calc(28 / var(--base) * 100vw);
                        font-weight: 700;
                        letter-spacing: 0;
                        line-height: calc(28 / var(--base) * 100vw);
                    }
                }

                .sale20 {
                    position: absolute;
                    top: calc(-32 / var(--base) * 100vw);
                    right: calc(-24 / var(--base) * 100vw);
                    display: grid;
                    width: calc(96 / var(--base) * 100vw);
                    height: calc(100.23 / var(--base) * 100vw);
                    place-items: center;
                }
            }

            .flow-card--cyan h3 {
                background: var(--cyan);
            }

            .flow-card--purple h3 {
                background: var(--purple);
            }

            .flow-card--pink h3 {
                background: var(--pink);
            }
        }

        .discount {
            margin-top: calc(28 / var(--base) * 100vw);
            display: grid;
            grid-template-columns: 1fr min(32.723vw, calc(447 / var(--base) * 100vw));
            gap: calc(14 / var(--base) * 100vw);
            align-items: center;
            padding: calc(35 / var(--base) * 100vw) calc(56 / var(--base) * 100vw) calc(36 / var(--base) * 100vw);
            border-radius: calc(20 / var(--base) * 100vw);
            background: var(--yellow);
            box-sizing: border-box;

            p {
                color: var(--pink);
                font-size: calc(32 / var(--base) * 100vw);
                font-weight: 800;
                letter-spacing: 0;
                line-height: calc(40 / var(--base) * 100vw);
            }

            img {
                object-fit: cover;
            }
        }

        .usage__note {
            margin-top: calc(16 / var(--base) * 100vw);
            color: var(--text-black);
            font-size: calc(16 / var(--base) * 100vw);
            font-weight: 400;
            letter-spacing: 0;
            line-height: calc(30 / var(--base) * 100vw);
            text-align: center;
        }

        .terms {
            margin-top: calc(47 / var(--base) * 100vw);

            h2 {
                color: var(--blue);
                font-size: calc(36 / var(--base) * 100vw);
                font-weight: 800;
                letter-spacing: 0;
                line-height: calc(32 / var(--base) * 100vw);
                text-align: center;
            }

            dl {
                overflow: hidden;
                /* width: 100%; */
                max-width: calc(978 / var(--base) * 100vw);
                margin: calc(28 / var(--base) * 100vw) auto 0;
                border: calc(4 / var(--base) * 100vw) solid var(--blue);
                border-radius: calc(20 / var(--base) * 100vw);

                >div {
                    display: grid;
                    grid-template-columns: calc(286 / var(--base) * 100vw) 1fr;

                    dd {
                        text-align: left;
                    }

                    &:not(:first-child) {
                        dt {
                            border-top: calc(2 / var(--base) * 100vw) solid var(--white);
                        }

                        dd {
                            border-top: calc(2 / var(--base) * 100vw) solid var(--blue);
                        }
                    }
                }
            }

            dt {
                display: grid;
                place-items: center;
                padding: calc(28 / var(--base) * 100vw) calc(20 / var(--base) * 100vw);
                color: var(--white);
                background: var(--blue);
                font-size: calc(24 / var(--base) * 100vw);
                font-weight: 700;
                letter-spacing: 0;
                line-height: calc(32 / var(--base) * 100vw);
                text-align: center;
            }

            dd {
                padding: calc(28 / var(--base) * 100vw);
                color: var(--text-black);


                li {
                    font-size: calc(24 / var(--base) * 100vw);
                    font-weight: 400;
                    letter-spacing: 0;
                    line-height: calc(30 / var(--base) * 100vw);
                    padding-left: calc(23 / var(--base) * 100vw);
                    text-indent: calc(-24 / var(--base) * 100vw);

                    &::before {
                        content: "\30FB";
                        box-sizing: border-box;
                    }
                }

                p {
                    margin-top: calc(6 / var(--base) * 100vw);
                    padding-left: calc(23 / var(--base) * 100vw);
                    font-size: calc(16 / var(--base) * 100vw);
                    font-weight: 400;
                    letter-spacing: 0;
                    line-height: calc(21 / var(--base) * 100vw);
                }
            }
        }
    }
}

.contact {
    position: relative;
    min-height: calc(577 / var(--base) * 100vw);
    padding: calc(74 / var(--base) * 100vw) 0 calc(78 / var(--base) * 100vw);
    background: linear-gradient(180deg, #BAE3F9 0%, #ebd7e842 100%);
    overflow: hidden;
    box-sizing: border-box;

    .contact__img {
        position: absolute;
        pointer-events: none;
        object-fit: cover;

        &.contact__firework--left {
            top: calc(66 / var(--base) * 100vw);
            left: calc(49 / var(--base) * 100vw);
            width: calc(224 / var(--base) * 100vw);
        }

        &.contact__firework--right {
            top: calc(-15 / var(--base) * 100vw);
            right: calc(35 / var(--base) * 100vw);
            width: calc(213 / var(--base) * 100vw);
        }

        &.contact__flag--left {
            bottom: 0;
            left: 0;
            width: calc(196 / var(--base) * 100vw);
        }

        &.contact__flag--right {
            right: 0;
            bottom: 0;
            width: calc(196 / var(--base) * 100vw);
        }
    }

    .contact__inner {
        position: relative;
        padding: 0 calc(236 / var(--base) * 100vw);
        width: 100%;
        box-sizing: border-box;

        .contact__message {
            position: relative;
            display: grid;
            width: min(100%, calc(608 / var(--base) * 100vw));
            min-height: calc(125 / var(--base) * 100vw);
            margin: 0 auto;
            place-items: center;
            border-radius: calc(20 / var(--base) * 100vw);
            background: var(--white);

            .contact_text {
                width: calc(449.77 / var(--base) * 100vw);
                height: calc(73.56 / var(--base) * 100vw);
                object-fit: cover;
            }

            .contact__hito {
                position: absolute;
                object-fit: cover;

                &.contact__hito--left {
                    top: calc(6 / var(--base) * 100vw);
                    left: calc(-133 / var(--base) * 100vw);
                    width: calc(209 / var(--base) * 100vw);
                }

                &.contact__hito--right {
                    top: calc(-1.3 / var(--base) * 100vw);
                    right: calc(-140 / var(--base) * 100vw);
                    width: calc(248.59 / var(--base) * 100vw);
                    transform: rotate(8deg);
                }
            }
        }

        .contact__btn {
            width: 100%;
            margin-top: calc(20 / var(--base) * 100vw);
            display: flex;
            flex-direction: column;
            gap: calc(16 / var(--base) * 100vw);
            font-size: calc(30 / var(--base) * 100vw);
            font-weight: 700;
            letter-spacing: 0;
            line-height: calc(40 / var(--base) * 100vw);

            a {
                display: flex;
                padding: calc(20 / var(--base) * 100vw) calc(60 / var(--base) * 100vw);
                gap: calc(5.6 / var(--base) * 100vw);
                place-content: center;
                box-sizing: border-box;
            }

            .contact__cyan_icon {
                width: calc(31.81 / var(--base) * 100vw);
                height: calc(31.81 / var(--base) * 100vw);
                object-fit: cover;
            }

            .contact__pink_icon {
                width: calc(38.3 / var(--base) * 100vw);
                height: calc(38.85 / var(--base) * 100vw);
                object-fit: cover;
            }
        }
    }
}

@media screen and (max-width: 767px) {

    /*パンくず*/
    #breadCrumbArea {
        margin: 0;
    }

    .hero {

        .hero_img {

            .hero_img_1 {
                position: absolute;
                width: calc(100/var(--base)*100vw);
                height: calc(100/var(--base)*100vw);
                left: calc(-36/var(--base)*100vw);
                bottom: calc(-62/var(--base)*100vw);
            }

            .hero_img_2 {
                position: absolute;
                width: calc(94/var(--base)*100vw);
                height: calc(94/var(--base)*100vw);
                right: calc(-30/var(--base)*100vw);
                bottom: calc(-28/var(--base)*100vw);
            }
        }
    }

    .overview {
        padding: calc(69 / var(--base) * 100vw) 0 calc(56 / var(--base) * 100vw);

        .overview__inner {
            padding: 0 calc(12 / var(--base) * 100vw);
            gap: calc(36 / var(--base) * 100vw);

            a {
                line-height: calc(20 / var(--base) * 100vw);
                box-sizing: border-box;
            }

            .overview-card {
                padding: calc(49 / var(--base) * 100vw) calc(12 / var(--base) * 100vw) calc(36 / var(--base) * 100vw);
                border-radius: calc(16 / var(--base) * 100vw);

                .overview-card__pill {
                    top: calc(-33 / var(--base) * 100vw);
                    width: min(100%, calc(250 / var(--base) * 100vw));
                    min-height: calc(66 / var(--base) * 100vw);
                    padding: calc(10 / var(--base) * 100vw) calc(14 / var(--base) * 100vw);
                    border-radius: calc(100 / var(--base) * 100vw);
                    font-size: calc(20 / var(--base) * 100vw);
                    letter-spacing: 0;
                    line-height: calc(24 / var(--base) * 100vw);
                    text-align: center;
                }

                .overview-card__lead {
                    font-size: calc(17 / var(--base) * 100vw);
                    line-height: calc(24 / var(--base) * 100vw);
                }

                .overview-card__period {
                    width: min(100%, calc(322 / var(--base) * 100vw));
                    margin-top: calc(28 / var(--base) * 100vw);
                    grid-template-columns: 1fr;
                    gap: calc(16 / var(--base) * 100vw);

                    .overview-card__period__text {
                        width: min(100%, calc(206 / var(--base) * 100vw));
                        min-height: calc(31 / var(--base) * 100vw);
                        margin: 0 auto;
                        padding: calc(5 / var(--base) * 100vw) 0;
                        gap: calc(17 / var(--base) * 100vw);
                        border-top-width: calc(1.2 / var(--base) * 100vw);
                        border-bottom-width: calc(1.2 / var(--base) * 100vw);
                        font-size: calc(15 / var(--base) * 100vw);
                        line-height: calc(21 / var(--base) * 100vw);
                    }

                    img {
                        width: 100%;
                        margin: 0 auto;
                    }
                }

                .case-title {
                    gap: calc(18 / var(--base) * 100vw);
                    margin-top: calc(52 / var(--base) * 100vw);
                    font-size: calc(18 / var(--base) * 100vw);
                    line-height: calc(24 / var(--base) * 100vw);

                    &::before,
                    &::after {
                        width: calc(21 / var(--base) * 100vw);
                        height: calc(3 / var(--base) * 100vw);
                        -webkit-mask-size: calc(10.5 / var(--base) * 100vw) calc(3 / var(--base) * 100vw);
                        mask-size: calc(10.5 / var(--base) * 100vw) calc(3 / var(--base) * 100vw);
                        box-sizing: border-box;
                    }
                }

                .case-grid {
                    grid-template-columns: 1fr;
                    grid-auto-rows: calc(420 / var(--base) * 100vw);
                    gap: calc(16 / var(--base) * 100vw);
                    margin-top: calc(9 / var(--base) * 100vw);

                    .case-card {
                        border-radius: calc(16 / var(--base) * 100vw);

                        img {
                            aspect-ratio: 327 / 180;
                        }

                        .case-card__body {
                            min-height: calc(236 / var(--base) * 100vw);
                            padding: calc(13 / var(--base) * 100vw) calc(25 / var(--base) * 100vw) calc(18 / var(--base) * 100vw) calc(19 / var(--base) * 100vw);

                            h3 {
                                font-size: calc(18 / var(--base) * 100vw);
                                line-height: calc(24 / var(--base) * 100vw);
                                gap: calc(7.2 / var(--base) * 100vw);
                            }

                            .case-card__tag {
                                width: calc(116 / var(--base) * 100vw);
                                height: calc(28 / var(--base) * 100vw);
                                margin-top: calc(12 / var(--base) * 100vw);
                                padding: calc(4 / var(--base) * 100vw) calc(16 / var(--base) * 100vw) calc(5 / var(--base) * 100vw);
                                font-size: calc(14 / var(--base) * 100vw);
                                line-height: calc(14 / var(--base) * 100vw);
                            }

                            ul {
                                margin-top: calc(7 / var(--base) * 100vw);

                                li {
                                    padding-left: calc(15 / var(--base) * 100vw);
                                    font-size: calc(17 / var(--base) * 100vw);
                                    line-height: calc(24 / var(--base) * 100vw);
                                }
                            }

                            p {
                                position: unset;
                                /* right: calc(25 / var(--base) * 100vw);
                                bottom: calc(18 / var(--base) * 100vw); */
                                font-size: calc(17 / var(--base) * 100vw);
                                line-height: calc(22 / var(--base) * 100vw);
                            }
                        }
                    }
                }
            }
        }
    }

    .usage {

        .usage__inner {
            padding: calc(36 / var(--base) * 100vw) calc(24 / var(--base) * 100vw) calc(56 / var(--base) * 100vw);

            .slash-title {
                /* gap: calc(26 / var(--base) * 100vw); */
                font-size: calc(20 / var(--base) * 100vw);
                line-height: calc(22 / var(--base) * 100vw);

                &::before,
                &::after {
                    width: calc(26 / var(--base) * 100vw);
                    height: calc(3 / var(--base) * 100vw);
                    box-sizing: border-box;
                }
            }

            .flow {
                width: 100%;
                margin: calc(18 / var(--base) * 100vw) auto 0;
                display: flex;
                flex-direction: column;
                gap: calc(10 / var(--base) * 100vw);

                .flow__arrow {
                    width: calc(17.49 / var(--base) * 100vw);
                    height: calc(13.69 / var(--base) * 100vw);
                    rotate: 180deg;
                }

                .flow-card {
                    width: 100%;
                    border-radius: calc(20 / var(--base) * 100vw);
                    box-shadow: 0 calc(2 / var(--base) * 100vw) calc(5 / var(--base) * 100vw) var(--shadow);

                    h3 {
                        min-height: calc(42 / var(--base) * 100vw);
                        /* padding: calc(10 / var(--base) * 100vw) calc(10 / var(--base) * 100vw) calc(8 / var(--base) * 100vw); */
                        padding: 0;
                        border-radius: calc(20 / var(--base) * 100vw) calc(20 / var(--base) * 100vw) 0 0;
                        font-size: calc(18 / var(--base) * 100vw);
                        line-height: calc(23 / var(--base) * 100vw);
                    }

                    .flow-card__inner {
                        padding: calc(7 / var(--base) * 100vw) calc(12 / var(--base) * 100vw) calc(13 / var(--base) * 100vw);
                        gap: calc(8 / var(--base) * 100vw);

                        p {
                            font-size: calc(16 / var(--base) * 100vw);
                            line-height: calc(21 / var(--base) * 100vw);
                        }

                        img {
                            width: min(100%, calc(282 / var(--base) * 100vw));
                            aspect-ratio: 282 / 186;
                        }

                        strong {
                            margin-top: calc(-1 / var(--base) * 100vw);
                            font-size: calc(22 / var(--base) * 100vw);
                            line-height: calc(28 / var(--base) * 100vw);
                        }
                    }

                    .sale20 {
                        top: calc(-13 / var(--base) * 100vw);
                    }
                }
            }

            .discount {
                width: 100%;
                margin: calc(20 / var(--base) * 100vw) auto 0;
                display: block;
                padding: calc(24 / var(--base) * 100vw) calc(12 / var(--base) * 100vw) calc(28 / var(--base) * 100vw) calc(24 / var(--base) * 100vw);
                border-radius: calc(20 / var(--base) * 100vw);
                text-align: center;

                p {
                    font-size: calc(18 / var(--base) * 100vw);
                    line-height: calc(24 / var(--base) * 100vw);
                }

                picture {
                    display: block;
                    width: 100%;
                    margin: calc(11.5 / var(--base) * 100vw) auto 0;
                }
            }

            .usage__note {
                width: 100%;
                margin: calc(12 / var(--base) * 100vw) auto 0;
                font-size: calc(12 / var(--base) * 100vw);
                line-height: calc(18 / var(--base) * 100vw);
            }

            .terms {
                width: 100%;
                margin: calc(38 / var(--base) * 100vw) auto 0;

                h2 {
                    font-size: calc(20 / var(--base) * 100vw);
                    line-height: calc(27 / var(--base) * 100vw);
                }

                dl {
                    margin-top: calc(9 / var(--base) * 100vw);
                    border-width: calc(3 / var(--base) * 100vw);
                    border-radius: calc(16 / var(--base) * 100vw);

                    >div {
                        grid-template-columns: calc(112 / var(--base) * 100vw) 1fr;

                        &:not(:first-child) {
                            dt {
                                border-top-width: calc(2 / var(--base) * 100vw);
                            }

                            dd {
                                border-top-width: calc(2 / var(--base) * 100vw);
                            }
                        }
                    }
                }

                dt {
                    padding: calc(30 / var(--base) * 100vw) 0;
                    font-size: calc(16 / var(--base) * 100vw);
                    line-height: calc(22 / var(--base) * 100vw);
                }

                dd {
                    padding: calc(20 / var(--base) * 100vw) 0 calc(14 / var(--base) * 100vw);

                    li {
                        padding: 0 calc(17 / var(--base) * 100vw) 0 calc(21 / var(--base) * 100vw);
                        text-indent: calc(-18 / var(--base) * 100vw);
                        font-size: calc(17 / var(--base) * 100vw);
                        line-height: calc(23 / var(--base) * 100vw);
                    }

                    p {
                        margin-top: calc(1 / var(--base) * 100vw);
                        padding-left: calc(26 / var(--base) * 100vw);
                        font-size: calc(12 / var(--base) * 100vw);
                        line-height: calc(18 / var(--base) * 100vw);
                    }
                }
            }
        }
    }

    .contact {
        min-height: calc(466 / var(--base) * 100vw);
        padding: calc(82 / var(--base) * 100vw) calc(24 / var(--base) * 100vw) calc(98 / var(--base) * 100vw);

        .contact__img {
            &.contact__firework--left {
                top: calc(13 / var(--base) * 100vw);
                left: 0;
                width: calc(112 / var(--base) * 100vw);
            }

            &.contact__firework--right {
                top: calc(-7 / var(--base) * 100vw);
                right: 0;
                width: calc(97 / var(--base) * 100vw);
            }

            &.contact__flag--left,
            &.contact__flag--right {
                width: calc(89 / var(--base) * 100vw);
            }
        }

        .contact__inner {
            padding: 0;

            .contact__message {
                width: 100%;
                min-height: calc(80 / var(--base) * 100vw);
                border-radius: calc(16 / var(--base) * 100vw);
                background: transparent;
                overflow: visible;
                z-index: 2;

                &::before {
                    position: absolute;
                    inset: 0;
                    z-index: 1;
                    border-radius: inherit;
                    background: var(--white);
                    content: "";
                    box-sizing: border-box;
                }

                .contact_text {
                    position: relative;
                    z-index: 2;
                    width: calc(271.47 / var(--base) * 100vw);
                    height: auto;
                }

                .contact__hito {
                    z-index: 0;

                    &.contact__hito--left {
                        top: calc(-70 / var(--base) * 100vw);
                        left: calc(12 / var(--base) * 100vw);
                        width: calc(115 / var(--base) * 100vw);
                    }

                    &.contact__hito--right {
                        top: calc(-67 / var(--base) * 100vw);
                        right: calc(9 / var(--base) * 100vw);
                        width: calc(132.76 / var(--base) * 100vw);
                        transform: rotate(4deg);
                    }
                }
            }

            .contact__btn {
                width: 100%;
                margin: calc(10 / var(--base) * 100vw) auto 0;
                gap: calc(8 / var(--base) * 100vw);
                font-size: calc(18 / var(--base) * 100vw);
                line-height: calc(24 / var(--base) * 100vw);

                a {
                    gap: calc(5 / var(--base) * 100vw);
                    padding: calc(25 / var(--base) * 100vw) calc(45 / var(--base) * 100vw) calc(23 / var(--base) * 100vw) calc(20 / var(--base) * 100vw);
                    align-items: flex-start;
                }

                .contact__cyan_icon {
                    width: calc(20.41 / var(--base) * 100vw);
                    height: calc(20.41 / var(--base) * 100vw);
                }

                .contact__pink_icon {
                    width: calc(23.14 / var(--base) * 100vw);
                    height: calc(23.48 / var(--base) * 100vw);
                }
            }
        }
    }

}