html {
    overflow-x: hidden;

        .btn__cta {
        padding: var(--Size-Space-12) 44px var(--Size-Space-12) var(--Size-Space-24);
        border-radius: 9999px;
        border: none;
        position: relative;
        background-image: linear-gradient(135deg, #83b5c7, #5975d6);
        transition: color 0.5s ease;

        & a {
            text-decoration: none;
            font-size: clamp(12px, 1.25vw, 16px);
            white-space: nowrap;
            line-height: var(--Typography-LineHeight-160);
            font-weight: 700;
            color: var(--Color-Semantic-Text-Common-White);
        }

        & a::before {
            content: '';
            width: 6px;
            height: 6px;
            border: 0;
            border-top: solid 2px var(--Color-Semantic-Icon-White);
            border-right: solid 2px var(--Color-Semantic-Icon-White);
            transform: rotate(45deg);
            position: absolute;
            top: 0;
            right: var(--Size-Space-24);
            bottom: 0;
            margin: auto;
        }
        }

        .btn__cta:hover {
            background-image: linear-gradient(135deg, var(--Color-Semantic-Background-Common-Black), var(--Color-Semantic-Background-Common-Black));
            cursor: pointer;
        }

        header {
            position: fixed;
            display: block;
            left: 0;
            right: 0;
            margin: var(--Size-Space-32);
            z-index: 999;

            & .header__pc {
                padding: var(--Size-Space-12) var(--Size-Space-16);
                border-radius: 9999px;
                box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.1);
                display: flex;
                gap: var(--Size-Space-32);
                background-color: var(--Color-Semantic-Background-Common-White);

                & .header__logo {
                    flex: 1;
                    margin: var(--Size-Space-8) 0 var(--Size-Space-8) var(--Size-Space-24);

                    & img {
                        width: auto;
                        height: 100%;
                    }
                }

                & .header__nav {
                    list-style: none;
                    display: flex;
                    gap: var(--Size-Space-24);

                    & a {
                        text-decoration: none;
                        font-size: clamp(12px, 1.25vw, 14px);
                        white-space: nowrap;
                        line-height: var(--Typography-LineHeight-180);
                        font-weight: 700;
                        color: var(--Color-Semantic-Text-Common-Base);
                    }

                    & a:hover{
                        text-decoration: underline;
                    }
                }
            }

            & .header__sp {
                display: none;
            }
        }

        main {
            .mv {
                padding-top: var(--Size-Space-168);
                padding-left: 12.8vw;
                position: relative;
                display: flex;
                align-items: center;
                gap: var(--Size-Space-24);

                & .mv__content {
                    & img:first-child {
                        display: block;
                    } 

                    & img:nth-child(2) {
                        display: none;
                    } 

                    & button {
                        margin: var(--Size-Space-32) 0;
                    }
                }

                & .mv__img {
                flex: 1;
                /* height: 480px; */
                overflow: hidden;

                & img {
                    border-radius: 160px 0 0 var(--Size-BorderRadius-8);
                    width: 100%;
                    object-fit: cover;
                }
                }

                & .mv__img::before {
                    content: url(/img/pc/mv_deco.svg);
                    position: absolute;
                    top: 0;
                    right: 75%;
                    width: 642px;
                    height: 223px;
                    z-index: -100;
                }

                & .mv__img::after {
                    content: "";
                    position: absolute;
                    bottom: var(--Size-Space-40);
                    inset: 0 -618px 0 0;
                    margin: auto;
                    width: clamp(411px, 50%, 615px);
                    height: clamp(278px, 50%, 416px);
                    height: 20vw;
                    max-height: 400px;
                    background: center;
                    background-image: url(/img/pc/mv_comment.png);
                    background-size: contain;
                    background-repeat: no-repeat;
                }
            }

            .section__trouble {
                padding: var(--Size-Space-80) 12.8vw;
                text-align: center;

                & img {
                    width: 100%;
                    max-width: 1080px;
                    height: auto;
                }

                & img:first-child {
                    display: inline-block;
                }

                & img:last-child {
                    display: none;
                }
            }

            .section__solution {
                padding: var(--Size-Space-80) 12.8vw;
                text-align: center;
                background-image: linear-gradient(135deg, #5975d6, #83b5c7);
                border-radius: 0 var(--Size-Space-240) 0 0;

                & img {
                    width: 100%;
                    max-width: 1080px;
                    height: auto;
                }

                & img:first-child {
                    display: inline-block;
                }

                & img:last-child {
                    display: none;
                }
            }

            .section__merit {
            padding: var(--Size-Space-80) 12.8vw;
            text-align: center;

                & img {
                    width: 100%;
                    max-width: 1080px;
                    height: auto;
                }

                & img:first-child {
                    display: inline-block;
                }

                & img:last-child {
                    display: none;
                }
            }

            .section__price {
            padding: var(--Size-Space-80) 12.8vw 20rem;
            text-align: center;
            background-color: #E7EEF4;
            border-radius: 0 var(--Size-Space-240) 0 0;

                & img {
                    width: 100%;
                    max-width: 1080px;
                    height: auto;
                }
                
                & img:first-child {
                    display: inline-block;
                }

                & img:last-child {
                    display: none;
                }
            }
        }

        footer {
            background-image: linear-gradient(135deg, #5975d6, #83b5c7);
            border-radius: var(--Size-Space-240) var(--Size-Space-240) 0 0;
            text-align: center;
            margin-top: -16rem;

            & .footer__content {
                width: auto;
                max-width: 1100px;
                display: flex;
                justify-content: space-around;
                align-items: flex-start;
                gap: 40px;
                margin: 0 auto;
                padding:var(--Size-Space-128) 10vw var(--Size-Space-40);

                & img {
                flex: 1;
                object-fit: contain;
                width: 100%;
                max-width: 623px;
                min-width: 480px;
                height: auto;
                display: block;
                }

                & img:nth-child(2) {
                    display: none;
                } 

                & .footer__txt {
                    min-width: 400px;

                    & .btn__cta {
                    padding: var(--Size-Space-12) 44px var(--Size-Space-12) var(--Size-Space-24);
                    border-radius: 9999px;
                    border: none;
                    position: relative;
                    background-image: none;
                    background-color: var(--Color-Semantic-Background-Common-White);
                    border: 1px solid #5D7BD4;
                    transition: color 0.5s ease;
                    white-space: nowrap;

                    & a {
                        text-decoration: none;
                        font-size: clamp(12px, 1.25vw, 16px);
                        line-height: var(--Typography-LineHeight-160);
                        font-weight: 700;
                        color: #5D7BD4;
                    }

                    & a::before {
                        content: '';
                        width: 6px;
                        height: 6px;
                        border: 0;
                        border-top: solid 2px #5D7BD4;
                        border-right: solid 2px #5D7BD4;
                        transform: rotate(45deg);
                        position: absolute;
                        top: 0;
                        right: var(--Size-Space-24);
                        bottom: 0;
                        margin: auto;
                    }
                    }

                    & .btn__cta:hover {
                    background-image: linear-gradient(135deg, var(--Color-Semantic-Background-Common-Black), var(--Color-Semantic-Background-Common-Black));
                    cursor: pointer;
                    border: 1px solid var(--Color-Semantic-Text-Common-Base);

                    & a {
                        color: var(--Color-Semantic-Text-Common-White);
                    }

                    & a::before {
                        border-top: solid 2px var(--Color-Semantic-Text-Common-White);
                        border-right: solid 2px var(--Color-Semantic-Text-Common-White);
                    }
                    }

                    & .btn__cta::before {
                    content: "";
                    position: absolute;
                    bottom: var(--Size-Space-32);
                    left: 50%;
                    transform: translateX(-50%);
                    margin: 0 auto;
                    width: clamp(240px, 100%, 300px);
                    height: clamp(32px, 100%, 48px);
                    background: center;
                    background-image: url(/img/pc/footer_cta-deco.svg);
                    background-size: contain;
                    background-repeat: no-repeat;
                    }

                    & .footer__divider {
                    height: 1px;
                    position: relative;
                    margin: var(--Size-Space-32) 0 var(--Size-Space-24);
                    }

                    & .footer__divider::before {
                    content: "";
                    background-image: linear-gradient(to right, var(--Color-Semantic-Text-Common-White), var(--Color-Semantic-Text-Common-White) 3px, transparent 3px, transparent 8px);
                    background-size: 8px 1px;
                    background-repeat: repeat-x;
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    }

                    & .footer__info {
                        display: flex;
                        gap: var(--Size-Space-24);

                        & img {
                            flex: 1;
                            width: auto;
                            max-width: 210px;
                            min-width: 80px;
                            height: auto;
                        }

                        & .footer__link {
                            color: #2F3A78;
                            font-size: clamp(12px, 1.25vw, 14px);
                            text-align: center;

                            & p {
                                margin: 0 0 4px 0;
                            }

                            & a {
                                position: relative;
                                color: #2F3A78;
                            }

                            & a::before {
                                content: url(/img/icon_exLink.svg);
                                position: absolute;
                                bottom: 0;
                                left: -1rem;
                                width: var(--Size-Space-12);
                                height: auto;
                            }
                        }
                    }
                }
            }

            & .footer__illust {
                overflow: hidden;
                width: 100%;
                display: flex;
                justify-content: center;
            }

            & .footer__caption {
                text-align: center;
                padding: var(--Size-Space-12) 0;
                background-color: #5D7BD4;

                & p {
                    color: var(--Color-Semantic-Text-Common-White);
                    font-size: var(--Typography-FontSize-10);
                    line-height: var(--Typography-LineHeight-150);
                }
            }
        }

    @media screen and (max-width: 960px) {
        header {
            margin: 0;

            & .header__pc {
                display: none;
            }

            & .header__sp {
                padding: var(--Size-Space-16);
                display: flex;
                gap: var(--Size-Space-32);
                background-color: var(--Color-Semantic-Background-Common-White);

                & .header__logo {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-end;

                    & img {
                        width: 100%;
                        max-width: var(--Size-Space-128);
                        height: auto;
                    }
                }

                #sp-hamburger {
                    background-color: transparent;
                    position: relative;
                    height: var(--Size-Space-40);
                    width: var(--Size-Space-40);
                    z-index: 100;

                    .header__hamburger-icon span {
                        position: absolute;
                        left: var(--Size-Space-8);
                        width: 24px;
                        height: 2px;
                        background-color: black;
                        border-radius: 8px;
                        transition: ease 0.75s;
                    }

                    .header__hamburger-icon span:nth-of-type(1) {
                        top: var(--Size-Space-8);
                    }

                    .header__hamburger-icon span:nth-of-type(2) {
                        top: 50%;
                    }

                    .header__hamburger-icon span:nth-of-type(3) {
                        bottom: var(--Size-Space-8);
                    }

                    .open span:nth-of-type(1) {
                        top: 50%;
                        transform: rotate(45deg);
                    }
                
                    .open span:nth-of-type(2) {
                        opacity: 0;
                    }
                
                    .open span:nth-of-type(3) {
                        top: 50%;
                        transform: rotate(-45deg); 
                    }
                }

                .header__nav {
                    display: none;
                    z-index: 99;
                    position: absolute;
                    top: var(--Size-Space-72);
                    left: 0;
                    width: 100%;
                    max-width: calc(100% - var(--Size-Space-32));
                    background: var(--Color-Semantic-Background-Common-White);
                    border-top: 1px solid var(--Color-Semantic-Border-Line-1);
                    padding: var(--Size-Space-16);

                    & ul {
                        list-style: none;
                        padding: 0;
                        margin: 0;
                    }

                    & li {
                        padding: var(--Size-Space-16) 0;
                        font-size: 18px;
                        font-weight: var(--Typography-FontWeight-700);
                        background-image: linear-gradient(to right, white, white 10px, transparent 10px, transparent 15px);
                        background-size: 20px 1px;
                        background-repeat: repeat-x;
                        background-position: center bottom;
                        border-bottom: 1px solid var(--Color-Semantic-Border-Line-1);
                    }

                    & a {
                        color: var(--Color-Semantic-Text-Common-Base);
                        text-decoration: none;
                    }

                    .btn__cta {
                        padding: var(--Size-Space-12) 44px var(--Size-Space-12) var(--Size-Space-24);
                        border-radius: 9999px;
                        border: none;
                        position: relative;
                        background-image: linear-gradient(135deg, #83b5c7, #5975d6);
                        transition: color 0.5s ease;
                        width: 100%;
                        margin-top: 16px;

                        & a {
                            text-decoration: none;
                            font-size: var(--Typography-FontSize-16);
                            white-space: nowrap;
                            line-height: var(--Typography-LineHeight-160);
                            font-weight: 700;
                            color: var(--Color-Semantic-Text-Common-White);
                        }
                    
                        & a::before {
                            content: '';
                            width: 6px;
                            height: 6px;
                            border: 0;
                            border-top: solid 2px var(--Color-Semantic-Icon-White);
                            border-right: solid 2px var(--Color-Semantic-Icon-White);
                            transform: rotate(45deg);
                            position: absolute;
                            top: 0;
                            right: var(--Size-Space-24);
                            bottom: 0;
                            margin: auto;
                        }
                    }
                }

                .header__nav-overlay {
                    display: none;
                    content:"";
                    position: absolute;
                    z-index: 1;
                    width: 100vw;
                    height: calc(100vh - 4.5rem);
                    top: var(--Size-Space-72);
                    left: 0;
                    background-color: var(--Color-Semantic-Background-Common-Black);
                    opacity: 0.1;
                }
            }
        }

        main {
            .mv {
                padding-top: var(--Size-Space-80);
                padding-left: 0;
                padding-right: 0;
                position: relative;
                display: flex;
                flex-direction: column-reverse;

                & .mv__content {
                    width: calc(100% - var(--Size-Space-32));

                    & img:first-child {
                        display: none;
                    } 

                    & img:nth-child(2) {
                        width: 100%;
                        display: block;
                    } 

                    & button {
                        width: 100%;
                        margin: var(--Size-Space-16) 0;

                        & a {
                            font-size: var(--Typography-FontSize-16);
                        }
                    }
                }

                & .mv__img {
                    height: 480px;
                    width: 100%;
                    overflow: hidden;

                    & img {
                        border-radius: 160px 0 0 var(--Size-BorderRadius-8);
                        width: 100%;
                        object-fit: cover;
                    }
                }

                & .mv__img::before {
                    display: none;
                }

                & .mv__img::after {
                    content: "";
                    position: absolute;
                    inset: 16vw 0 0 -14vw;
                    margin: 0 auto;
                    height: 50vw;
                    max-height: 230px;
                    background: center;
                    background-image: url(/img/pc/mv_comment.png);
                    background-size: contain;
                    background-repeat: no-repeat;
                }
            }

            .section__trouble {
                padding: var(--Size-Space-80) var(--Size-Space-16);
                text-align: center;

                & img {
                    width: 100%;
                    height: auto;
                }

                & img:first-child {
                    display: none;
                }

                & img:last-child {
                    display: block;
                }
            }

            .section__solution {
                padding: var(--Size-Space-80) var(--Size-Space-16);
                text-align: center;
                border-radius: 0 var(--Size-Space-80) 0 0;

                & img {
                    width: 100%;
                    height: auto;
                }

                & img:first-child {
                    display: none;
                }

                & img:last-child {
                    display: block;
                }
            }

            .section__merit {
                padding: var(--Size-Space-80) var(--Size-Space-16);
                text-align: center;

                & img {
                    width: 100%;
                    height: auto;
                }

                & img:first-child {
                    display: none;
                }

                & img:last-child {
                    display: block;
                }
            }

            .section__price {
                padding: var(--Size-Space-80) var(--Size-Space-16) var(--Size-Space-168) var(--Size-Space-16);
                text-align: center;
                border-radius: 0 var(--Size-Space-80) 0 0;

                & img {
                    width: 100%;
                    height: auto;
                }

                & img:first-child {
                    display: none;
                }

                & img:last-child {
                    display: block;
                }
            }
        }

        footer {
            border-radius: var(--Size-Space-80) var(--Size-Space-80) 0 0;
            margin-top: -4rem;

            & .footer__content {
                width: auto;
                max-width: 1100px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: flex-start;
                gap: var(--Size-Space-64);
                margin: 0 auto;
                padding:var(--Size-Space-80) var(--Size-Space-16) var(--Size-Space-40);

                & img {
                flex: 1;
                object-fit: contain;
                width: 100%;
                max-width: 623px;
                min-width: 480px;
                height: auto;
                display: none;
                }

                & img:nth-child(2) {
                    display: block;
                    width: 100%;
                    min-width: auto;

                } 

                & .footer__txt {
                    min-width: 0;
                    width: 100%;

                    & .btn__cta {
                        padding: var(--Size-Space-24);
                        width: 100%;

                        & a {
                            text-decoration: none;
                            font-size: var(--Typography-FontSize-16);
                            line-height: var(--Typography-LineHeight-160);
                            font-weight: 700;
                            color: #5D7BD4;
                        }

                        & a::before {
                            right: var(--Size-Space-24);
                        }
                    }

                    & .btn__cta::before {
                        bottom: var(--Size-Space-56);
                    }

                    & .footer__info {
                        align-items: center;

                        & img {
                            display: block;
                        }

                        & .footer__link {
                            font-size: 0.875rem;
                        }
                    }
                }
            }

            & .footer__illust {
                overflow: hidden;
                width: 100%;
                display: flex;
                justify-content: center;
            }

            & .footer__caption {
                text-align: center;
                padding: var(--Size-Space-12) 0;
                background-color: #5D7BD4;

                & p {
                    color: var(--Color-Semantic-Text-Common-White);
                    font-size: var(--Typography-FontSize-10);
                    line-height: var(--Typography-LineHeight-150);
                    margin: 0 auto;
                }
            }
        }
    }

}