/* 適用レイヤー */
@layer base, components, utilities;
/* ベース */
@layer base {
}
/* コンポーネント */
@layer components {
}
/* ユーティリティ */
@layer utilities {
}

body{
    position: relative;
    &:after{
        content: "";
        display: block;
        width: 100%;
        height: 100vh;
        background: url(../img/bg-main.jpg) top center / cover;
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
        @media (max-width: 767px) {
            background: url(../img/bg-main-sp.jpg) top center / cover;
        }
    }
}

.text-link{
    font-weight: bold;
    color: #ff7382;
    transition: .3s;
    &:hover{
        opacity: 0.7;
    }
}

.kutto-mv{
    width: calc(100% + 6rem);
    margin-left: -3.8rem;
    padding-top: 5rem;
    @media (max-width: 767px) {
        width: 100%;
        padding: 0 1rem 2rem;
        margin-left: 0;
    }
    img{
        width: 100%;
        height: auto;
    }
}

.ctn-kutto-wrap{
    width: 68.5rem;
    margin-inline: auto;
    color: #354973;
    @media (max-width: 767px) {
        width: 100%;
    }
}

.ctn-main-wrap{
    box-shadow: 0px 10px 10px 0px #00000033;
    @media (max-width: 767px) {
        box-shadow: none;
    }
    .ctn-bg01, .ctn-bg02{
        padding: 7rem 4.8rem;
        @media (max-width: 767px) {
            padding: 6rem 5%;
        }
    }
    .ctn-bg01{
        background: rgba(255,255,255,0.5);
    }
    .ctn-bg02{
        background: rgba(255,255,255,0.85);
    }
    .ctn-about{
        margin-top: -52px;
        padding-top: 7.8rem;
        padding-bottom: 7rem;
        @media (max-width: 767px) {
            margin-top: 0;
            padding-top: 4rem;
            padding-bottom: 4rem;
        }
    }
}

.kutto-btn{
    width: 28rem;
    margin-inline: auto;
    display: block;
    padding: 1rem 0;
    border-radius: 100vmax;
    background: #494E9C;
    font-size: 2rem;
    text-align: center;
    color: #fff;
    transition: .3s;
    @media (max-width: 767px) {
        width: 90%;
        font-size: 1.6rem;
    }
}

.kutto-btn:hover{
    opacity: 0.8;
}

.entry{
    background: #FF7382;
}

.title-serif{
    font-family: "Noto Serif JP", serif;
    font-size: 4.4rem;
    font-weight: 600;
    color: #494E9C;
    text-shadow: 1px 1px 0 #9d9d9d;
    text-align: center;
    @media (max-width: 767px) {
        font-size: 3.4rem;
    }
}

.kutto-sub-title{
    width: max-content;
    margin-inline: auto;
    font-size: 2.8rem;
    font-weight: bold;
    text-align: center;
    letter-spacing: 0.15em;
    @media (max-width: 767px) {
        width: 100%;
        font-size: 2.4rem;
    }
    span{
        position: relative;
        z-index: 1;
    }
}

.kutto-sub-title span:after{
    content: "";
    display: block;
    width: 100%;
    height: 15px;
    background: rgba(239, 143, 153, 0.5);
    position: absolute;
    bottom: -6px;
    left: -2px;
    z-index: -1;
}

.white-box{
    padding: 2.8rem;
    background: rgba(255,255,255,0.7);
    border-radius: 20px;
    box-shadow: 0px 2px 6px 0px #7B7B7B40;
    position: relative;
    + .white-box{
        margin-top: 3rem;
    }
    p{
        font-size: 1.8rem;
        line-height: 2;
        @media (max-width: 767px) {
            font-size: 1.4rem;
            text-align: left;
        }
        span{
            font-size: 2rem;
            font-weight: bold;
            @media (max-width: 767px) {
                font-size: 1.6rem;
            }
        }
    }
    .white-box-title{
        margin-bottom: 1.6rem;
        text-align: center;
        .age{
            padding: 0 10px;
            border: 1px solid #6cbb80;
            border-radius: 4px;

            @media (max-width: 767px) {
                padding: 0 8px;
            }
            p{
                font-family: "Noto Serif JP", serif;
                font-size: 2rem;
                font-weight: bold;
                @media (max-width: 767px) {
                    font-size: 1.6rem;
                }
                span{
                    font-size: 1.6rem;
                    @media (max-width: 767px) {
                        font-size: 1.2rem;
                    }
                }
            }
        }
        .title{
            p{
                border-bottom: 2px solid #adb9d5;
                font-size: 4rem;
                font-weight: bold;
                line-height: 1.8;
                letter-spacing: 0.15em;
                @media (max-width: 767px) {
                    font-size: 2.4rem;                
                }
                span{
                    font-size: 3.2rem;
                    @media (max-width: 767px) {
                        font-size: 1.8rem;                
                    }
                }
            }
        }
    }
    .flex{
        display: flex;
        align-items: center;
        gap: 3rem;
        box-shadow: none;
        @media (max-width: 767px) {
            flex-direction: column;
            gap: 2rem;
            text-align: center;
        }
        .img-wrap{
            width: 40%;
            img{
                width: 100%;
                height: auto;
            }
        }
        .desc-wrap{
            width: 60%;
        }
        @media (max-width: 767px) {
            .img-wrap, .desc-wrap{
                width: 100%;
            }
        }
    }
    .tag-step{
        display: block;
        width: max-content;
        padding: 0 2rem;
        background: #ef8f99;
        border-radius: 6px;
        font-family: "Noto Serif JP", serif;
        font-size: 2rem;
        font-weight: 700;
        text-transform: uppercase;
        color: #fff;
        position: absolute;
        top: -15px;
        left: 26px;
        @media (max-width: 767px) {
            font-size: 1.6rem;
        }
    }
    .step-number{
        font-family: "Noto Serif JP", serif;
        font-size: 2.5rem;
        @media (max-width: 767px) {
            font-size: 2rem;
        }
    }

}

.white-box:has(.flex){
    padding: 4rem 2.8rem;
    + .white-box{
        margin-top: 5rem;
    }
}

.campaign-box{
    padding: 7rem 4rem 4rem;
    background: #FFDCE4;
    border-radius: 20px;
    position: relative;
    @media (max-width: 767px) {
        padding: 5rem 4% 4rem;
    }
    .icon-entry{
        width: 11rem;
        position: absolute;
        top: -18px;
        left: -30px;
        @media (max-width: 767px) {
            width: 8rem;
            top: -20px;
            left: -10px;
        }
    }
    .tag-position{
        position: absolute;
        top: -20px;
        right: 50%;
        transform: translateX(50%);
    }
    .campaign-overview-text{
        position: relative;
        p{
            margin-bottom: 5rem;
            font-size: 2.2rem;
            font-weight: bold;
            text-align: center;
            line-height: 1.3;
            @media (max-width: 767px) {
                margin-bottom: 4rem;
                font-size: 1.6rem;
            }
            span{
                font-size: 3.2rem;
                @media (max-width: 767px) {
                    font-size: 2.2rem;
                }
            }
            .pink{
                font-family: "Roboto", sans-serif;
                color: #ff7382;
            }
            .entry-num{
                margin: 0 2px;
                font-family: "Roboto", sans-serif;
                font-size: 8.6rem;
                color: #ff7382;
                @media (max-width: 767px) {
                    font-size: 4.3rem;
                }
            }
        }
        .icon-item{
            width: 11rem;
            position: absolute;
            top: 26px;
            right: -58px;
            @media (max-width: 767px) {
                width: 6rem;
                top: 22px;
                right: -34px;
            }
        }
    }
    .campaign-overview01,.campaign-overview02{
        p{
            font-size: 2.2rem;
            font-weight: bold;
            text-align: center;
            @media (max-width: 767px) {
                font-size: 1.4rem;
            }
        }
    }
    .campaign-overview01{
        p{
            line-height: 1.4;
            span{
                font-size: 4.4rem;
                color: #ff7382;
                @media (max-width: 767px) {
                    font-size: 2rem;
                }
            }
        }
    }
    .campaign-overview02{
        position: relative;
        p{
            line-height: 1.6;
            span{
                font-size: 3rem;
                letter-spacing: 0.1em;
                @media (max-width: 767px) {
                    font-size: 2rem;
                }
            }
            .pink{
                color: #ff7382;
            }
        }
        .icon-phone{
            width: 6rem;
            position: absolute;
            bottom: -29px;
            left: -16px;
            @media (max-width: 767px) {
                width: 5rem;
                bottom: -37px;
                left: -12px;
            }
        }

    }
    .ctn-campaign{
        padding: 3rem 4rem;
        background: #FFFCF6;
        position: relative;
        @media (max-width: 767px) {
            padding: 3rem 1rem;
        }
        + .ctn-campaign{
            margin-top: 5rem;
        }
        .entry-detail-wrap{
            margin-bottom: 2.4rem;
            padding-bottom: 2.4rem;
            border-bottom: 2px solid #e5e5e5;
        }
        .title-tag{
            display: block;
            width: max-content;
            margin-inline: auto;
            margin-bottom: 1.4rem;
            padding: 5px 1rem;
            background: #ffb302;
            border-radius: 10px;
            color: #fff;
            p{
                font-size: 2rem;
                font-weight: bold;
                color: #fff;
                @media (max-width: 767px) {
                    font-size: 1.4rem;
                }
            }
        }
        .desc-text{
            font-size: 2.4rem;
            font-weight: bold;
            text-align: center;
             @media (max-width: 767px) {
                font-size: 1.6rem;
            }
        }
        .entry-detail01{
            position: relative;
            span{
                margin-left: 5px;
                font-size: 3.2rem;
                @media (max-width: 767px) {
                    font-size: 2rem;
                }
                .color-pink{
                    margin-left: 0;
                    font-family: "Roboto", sans-serif;
                    color: #ff7382;
                }
            }
            .icon-item{
                width: 11rem;
                position: absolute;
                bottom: -14px;
                right: -54px;

                @media (max-width: 767px) {
                    width: 7rem;
                    top: 21px;
                    right: -24px;
                }
            }
        }
        .entry-detail02{
            .desc-text{
                line-height: 1.3;
                span{
                    font-family: "Roboto", sans-serif;
                    font-size: 8.6rem;
                    color: #ff7382;
                    @media (max-width: 767px) {
                        padding: 0 5px;
                        font-size: 4.3rem;
                    }
                }
            }
            .info{
                margin-top: 1rem;
                padding: 1.6rem 2rem;
                background: #fff;
                font-size: 1.8rem;
                font-weight: bold;
                text-align: center;
                @media (max-width: 767px) {
                    font-size: 1.4rem;
                }
            }
        }
        .entry-detail04{
            margin-bottom: 0;
            border-bottom: none;
            @media (max-width: 767px) {
                padding-bottom: 0;
            }
            .desc-text{
                width: max-content;
                margin-inline: auto;
                font-family: "Roboto", sans-serif;
                font-size: 3.6rem;
                text-align: left;
                line-height: 1.3;
                @media (max-width: 767px) {
                    font-size: 2rem;
                }
                span{
                    font-size: 2.5rem;
                    @media (max-width: 767px) {
                        font-size: 1.4rem;
                    }
                }
                .year{
                    font-size: 2rem;
                    @media (max-width: 767px) {
                        font-size: 1.6rem;
                    }
                }
            }
        }
    }
}

.blue-box{
    padding: 4rem 5rem;
    background: rgba(206, 242, 255, 0.6);
    border-radius: 20px;
    border: 2px solid #fff;
    box-shadow: 0px 2px 6px 0px #7B7B7B40;
    @media (max-width: 767px) {
        padding: 3rem 2rem;
    }
    .hf-flex{
        gap: 4rem;
        @media (max-width: 767px) {
            flex-direction: column;
            gap: 0;
        }
    }

    .img-wrap{
        width: 40%;
        @media (max-width: 767px) {
            margin-bottom: 2rem;
        }
        img{
            width: 100%;
            height: auto;
        }
    }
    .desc-wrap{
        width: 60%;
        span{
            margin-right: 1rem;
            font-weight: 600;
        }
        .item-title{
            font-family: "Roboto", sans-serif;
            margin-bottom: 3rem;
            line-height: 2;
            @media (max-width: 767px) {
                margin-bottom: 1rem;
                line-height: 1.6;
            }
            span{
                font-size: 3.2rem;
                @media (max-width: 767px) {
                    font-size: 3rem;
                }
            }
        }
        .price{
            span{
                font-family: "Roboto", sans-serif;
                font-size: 4rem;
                @media (max-width: 767px) {
                    font-size: 2.6rem;
                }
            }
        }
    }
    @media (max-width: 767px) {
        .img-wrap, .desc-wrap{
            width: 100%;
        }
    }
}

.table-wrap{
    width: 100%;
    border: 1px solid #c8c8c8;
    text-align: center;
    tr{
        border-bottom: 1px solid #c8c8c8;
    }
    .table-head{
        font-weight: bold;
        border-bottom: 2px solid #546a9a;
        .eyekutto{
            color: #FF7382;
        }
    }
    td,th{
        padding: 1.4rem 2rem;
        @media (max-width: 767px) {
            padding: 1rem 5px;
            font-size: 1.3rem;
        }
    }
    td:nth-child(2n + 1){
        font-weight: bold;
    }
}


.ctn-bg02:has(.blue-box){
    padding: 7rem 4.8rem 14rem;
    @media (max-width: 767px) {
        padding: 5rem 5% 7rem;
    }
}

.ctn-reason{
    h2{
        width: 90%;
        margin-inline: auto;
        margin-bottom: 3rem;
    }
    .box-title{
        width: max-content;
        margin-inline: auto;
        margin-bottom: 3rem;
        border-bottom: 2px solid #adb9d5;
        font-weight: bold;
        text-align: center;
        line-height: 1.4;
        letter-spacing: 0.1em;
        @media (max-width: 767px) {
            width: 100%;
        }
    }
    .box01-title{
        span{
            letter-spacing: 0;
            margin-right: 5px;
        }
    }
    .box01-title,.box02-title{
        font-size: 4.8rem;
        @media (max-width: 767px) {
            font-size: 3rem;
        }
        span{
            font-size: 6.4rem;
            @media (max-width: 767px) {
                font-size: 4.2rem;
            }
        }
    }
    .box03-title{
        font-size: 3.2rem;
        line-height: 1.6;
        @media (max-width: 767px) {
            font-size: 1.8rem;
        }
        span{
            font-size: 4.4rem;
            @media (max-width: 767px) {
                font-size: 2.2rem;
            }
        }
    }
}

.ctn-age{
    .white-box{
        @media (max-width: 767px) {
            padding: 2rem 3rem;
            & .flex{
                gap: 5px;
            }
        }
    }
}

.ctn-point{
    img{
        width: 90%;
        margin-inline: auto;
        @media (max-width: 767px) {
            width: 100%;
        }
        + img{
            margin-top: 4rem;
        }
    }
}

.ctn-quality{
    text-align: center;
    img{
        width: 85%;
        margin-inline: auto;
    }
    p{
        margin-top: 4rem;
        color: #000;
        line-height: 2;
    }
}



.sns-wrap{
    padding: 7rem 0;
    background: #fdf2ee;
    color: #918380;
    text-align: center;
    @media (max-width: 767px) {
        padding: 5rem 0;
    }
    p{
        margin-bottom: 3rem;
        line-height: 2;
    }
    ul{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 4rem;
        @media (max-width: 767px) {
            width: 80%;
            margin-inline: auto;
            gap: 2rem;
        }
        li{
            width: 6rem;
            &:nth-child(3){
                img{
                    width: 80%;
                    height: auto;
                }
            }
            img{
                width: 95%;
                height: auto;
            }
        }
    }
}

.ctn-review{
    .title-serif{
        font-size: 3.6rem;
    }
}

/*------- swiper -------*/

.swiper{
    padding-left: 12rem;
    @media (max-width: 767px) {
        padding-left: 3rem;
    }
}

.swiper-wrapper{
    padding-bottom: 6rem;
}

.swiper-slide{
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 6px #91838040;
    .review-swiper-desc{
        margin-top: 2rem;
        font-size: 1.2rem;
        line-height: 2;
    }
}

.review-swiper-inner{
    padding: 2rem 2rem 3rem;
}

.swiper-pagination {
    display: flex;
    justify-content: center;
    gap: 2rem;
    position: absolute;
    bottom: 16px;
}

.swiper-pagination-bullet {
    opacity: 1;
    height: 18px;
    width: 18px;
    border-radius: 100vmax;
}
.swiper-pagination-bullet {
    background-color: #9aadd5;
}

.swiper-pagination-bullet-active {
    background-color: #354973;
}