@charset "utf-8";

*, *::before, *::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root{
    --fontSizeBase: 1.4rem;
    --lineHeight: 1.5;
    --colorTextBase: #222;
    --colorMain: #F0ADB6;
    --colorSubA: #C8A0A6;
    --colorSubB: #FBF5F5;
    --colorAccent: #f77d8d;
    --colorBg: #FBFBFB;
    --colorWhite: #fff;
    --widthBase: 108rem;
    --widthSmall: 80rem;
    --widthMin: 60rem;
    --paddingMain: 10.8rem;
    --paddingSide: 5vw;
    --fontTypeB: "Roboto", sans-serif;

    @media(min-width: 768px){
        --fontSizeBase: 1.6rem;
    }
}
html{
    font-size: 62.5%;
    scroll-behavior: smooth;
}
body{
    font-size: var(--fontSizeBase);
    line-height: var(--lineHeight);
    color: var(--colorTextBase);
    font-family: "Noto Serif JP", sans-serif;
    font-optical-sizing: auto;
    font-feature-settings: "palt";
    position: relative;
    font-weight: 500;
}
body.open-menu{
    overflow: hidden;
}
a{
    text-decoration: none;
    color: inherit;
}
img{
    display: block;
    max-width: 100%;
    height: auto;
}
li{
    list-style: none;
}
small{
    font-size: inherit;
}
body.open-menu :is(.header, .main, .footer) {
    scrollbar-gutter: stable;
    overflow: auto;
}
.main{
    input:is([type=email], [type=text], [type=tel]), textarea{
        width: 100%;
        font: inherit;
        font-size: inherit;
        outline: none;
        border: .1rem solid #a5a5a5;
        padding: 1.2rem;
        display: block;
    }
    textarea{
        resize: none;
        height: 10em;
    }
    .btn{
        border: none;
        display: block;
        width: 100%;
        max-width: 24rem;
        font: inherit;
        font-size: 1.4rem;
        cursor: pointer;
        background: var(--colorMain);
        color: var(--colorWhite);
        text-align: center;
        padding: 2rem;
        border-radius: .4rem;
    }
}
.container{
    max-width: var(--widthBase);
    margin-inline: auto;
    padding: var(--paddingMain) var(--paddingSide);
    box-sizing: content-box;
}
.title-decoration{
    text-transform: uppercase;
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    color: var(--colorMain);
    line-height: 1;
    font-family: var(--fontTypeB);
    letter-spacing: .2rem;
    padding-left: .2rem;
}
.section-title{
    font-size: calc(var(--fontSizeBase) * 2);
    margin-top: .8rem;
    text-align: center;
    line-height: 1;
    margin-bottom: 6rem;
}

/* header */
body.open-menu .header{
    z-index: 999;
}
.header{
    position: sticky;
    top: 0;
    z-index: 9;
    background: var(--colorWhite);
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;

    @media(min-width: 1120px){
        position: static;
        background: transparent;
        padding-top: 0;
        padding-bottom: 0;
    }

    h1{
        font-size: 2rem;

        @media(min-width: 1120px){
            font-size: 2.8rem;
        }
    }

    .header-container{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: var(--paddingSide);
        padding-right: var(--paddingSide);

        @media(min-width: 1120px){
            padding-right: 0;
        }

        .nav{
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: var(--colorMain);
            color: var(--colorWhite);
            display: flex;
            align-items: center;
            opacity: 1;
            transition: opacity .3s, display .3s allow-discrete;

            @starting-style{
                opacity: 0;
            }

            @media(min-width: 1120px){
                position: static;
                background: transparent;
                color: var(--colorTextBase);
                transition: none;
                opacity: 1;
            }
            ul{
                display: flex;
                flex-direction: column;
                width: 100%;
                padding-left: var(--paddingSide);
                padding-right: var(--paddingSide);

                @media(min-width: 1120px) {
                    flex-direction: row;
                    width: auto;
                    padding-left: 0;
                    padding-right: 0;
                }

                a{
                    display: block;
                    padding: 1.2rem 2rem;
                    border-bottom: .1rem solid;

                    @media(min-width: 1120px){
                        border: none;
                        padding: 2.4rem 2rem;
                        transition: .4s;

                        &:hover{
                            color: var(--colorAccent);
                        }

                        &.to-contact{
                            padding: 2.4rem 2.8rem;
                            background: var(--colorMain);
                            color: var(--colorWhite);

                            &:hover{
                                opacity: .8;
                                color: var(--colorWhite);
                            }
                        }
                    }
                }
            }
        }

        .menu-toggle-icon{
            width: 2.8rem;
            position: relative;
            z-index: 999;

            @media(min-width: 1120px){
                display: none;
            }

            & > div{
                cursor: pointer;
            }

            .to-close{
                display: none;

                svg{
                    fill: var(--colorWhite);
                }
            }

            svg{
                display: block;
            }
        }
    }
}
body.open-menu{
    .header{
        .menu-toggle-icon{
            .to-open{
                display: none;
            }
            .to-close{
                display: block;
            }
        }
    }
}
body:not(.open-menu){
    .header .header-container .nav{
        display: none;
        opacity: 0;

        @media(min-width: 1120px){
            opacity: 1;
            display: block;
        }
    }
}

/* main */
.main{
    .main-visual{
        position: relative;

        .main-img img{
            @media(min-width: 768px){
                min-height: 65rem;
                object-fit: cover;
                object-position: center right;
            }
        }

        .main-visual-container{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            display: flex;
            align-items: flex-end;

            @media(min-width: 768px){
                align-items: center;
            }

            .inner{
                max-width: var(--widthBase);
                margin-inline: auto;
                padding-left: var(--paddingSide);
                padding-right: var(--paddingSide);
                box-sizing: content-box;
                padding-bottom: 4.8rem;

                @media(min-width: 768px){
                    padding-bottom: 0;
                }

                img{
                    max-width: clamp(26rem, 45%, 48rem);
                }

                .btn-flex{
                    display: flex;
                    column-gap: 1.2rem;
                    margin-top: 4rem;

                    @media(min-width: 768px){
                        column-gap: 2rem;
                    }

                    a{
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        column-gap: .8rem;
                        color: var(--colorWhite);
                        padding: 1.6rem .8rem;
                        flex: 1;
                        font-size: 1.2rem;
                        transition: opacity .4s;

                        &:hover{
                            opacity: .8;
                        }

                        @media(min-width: 768px){
                            flex: 0 0 28rem;
                            padding: 1.6rem;
                            font-size: 1.4rem;
                        }

                        &.web{
                            background: var(--colorSubA);
                        }

                        &.line{
                            background: #06C755;
                        }

                        img{
                            max-width: 2.4rem;
                            @media(min-width: 768px){
                                max-width: 3.2rem;
                            }
                        }
                    }
                }
            }
        }
    }

    .section-1{
        .points-area{
            display: flex;
            column-gap: 2rem;
            row-gap: 4.8rem;
            flex-direction: column;

            @media(min-width: 768px){
                flex-direction: row;
            }

            > .point{
                flex: 1;

                .point-decoration{
                    color: var(--colorWhite);
                    background: var(--colorMain);
                    text-align: center;
                    padding: 1.2rem;
                    margin-bottom: 1.2rem;
                }
                .point-title{
                    text-align: center;
                    margin-bottom: 1.2rem;
                    color: var(--colorAccent);
                }

                .text{
                    margin-top: 1.2rem;
                    font-size: 1.4rem;
                    letter-spacing: .2rem;
                    line-height: 1.75;
                }
            }
        }
    }
    .section-2{
        background: var(--colorBg);
        .favorites-area{
            display: flex;
            flex-wrap: wrap;
            max-width: var(--widthMin);
            margin-inline: auto;
            column-gap: 2rem;
            row-gap: 2rem;

            @media(min-width: 768px){
                column-gap: 2.4rem;
                row-gap: 3.2rem;
            }

            .favorite{
                flex: 100%;
                background: var(--colorMain);
                color: var(--colorWhite);
                text-align: center;
                padding: 2rem .8rem;
                flex: 0 0 calc(50% - 1.2rem);
                display: flex;
                flex-direction: column;
                row-gap: 2rem;

                @media(min-width: 768px){
                    padding: 2rem;
                }

                h3{
                    span{
                        display: block;
                        font-size: .75em;
                    }
                }

                .icon{
                    max-width: 6rem;
                    margin-inline: auto;

                    @media(min-width: 768px){
                        max-width: 12rem;
                    }
                }
            }
        }
    }
    .section-3{
        .before-after-area{
            display: flex;
            justify-content: center;
            align-items: center;
            column-gap: 1.2rem;
            max-width: var(--widthMin);
            margin-inline: auto;
            /* flex-direction: column; */

            @media(min-width: 768px){
                /* flex-direction: row; */
                column-gap: 3.2rem;
            }

            .before .banner{
                background: #ddd;
            }
            .after .banner{
                background: var(--colorMain);
            }
            .banner{
                padding: 1.2rem;
                margin-bottom: 1.2rem;
            }

            .arrow{
                /* border: 1.2rem solid var(--colorMain);
                border-bottom-color: transparent;
                border-left-color: transparent;
                border-right-color: transparent;
                translate: 0 .6rem;

                @media(min-width: 768px){ */
                    translate: .6rem 3rem;
                    border: 1.2rem solid var(--colorMain);
                    border-top-color: transparent;
                    border-bottom-color: transparent;
                    border-right-color: transparent;
                /* } */
            }
            .before, .after{
                flex: 1;
                text-align: center;
            }
        }
    }
    .section-4{
        background: var(--colorBg);
        .price-area{
            max-width: var(--widthSmall);
            margin-inline: auto;

            .table{
                width: 100%;
                border-collapse: collapse;

                th, td{
                    border-right: .2rem solid var(--colorMain);
                    border-top: .1rem solid var(--colorMain);
                    padding: 2.4rem;
                }
                th{
                    border-left: .2rem solid var(--colorMain);
                    text-align: left;
                    background: var(--colorSubB);
                }
                td{
                    text-align: right;
                    background: var(--colorWhite);
                }
                tbody > tr:first-of-type{
                    th, td{
                        border-top-width: .2rem;
                    }
                }
                tbody > tr:last-of-type{
                    th, td{
                        border-bottom: .2rem solid var(--colorMain);
                    }
                }
            }
        }
    }
    .section-5{
        .doctor-area{
            max-width: var(--widthSmall);
            margin-inline: auto;

            @media(min-width: 768px){
                display: flex;
                align-items: flex-end;
                column-gap: 4.8rem;
                padding-bottom: 8rem;
            }

            .img-area{
                flex: 2;
                position: relative;
                z-index: 3;
            }
            .text-area{
                flex: 3;
                position: relative;
                z-index: 2;
                margin-top: 4rem;

                @media(min-width: 768px){
                    margin-top: 0;
                }

                li{
                    display: flex;

                    & > div:first-of-type{
                        flex: 0 0 5em;
                        margin-right: .5em;
                        font-weight: 700;

                        @media(min-width: 768px){
                            text-align: right;
                        }
                    }

                    & + li{
                        margin-top: .4rem;
                    }
                }

                &::after{
                    @media(min-width: 768px){
                        content: '';
                        display: block;
                        position: absolute;
                        top: -8rem;
                        right: 0;
                        left: -12rem;
                        bottom: -8rem;
                        z-index: -1;
                        background: var(--colorSubB);
                    }
                }
            }
        }
    }
    .section-6{
        background: var(--colorBg);
        .flow-area{
            width: fit-content;
            margin-inline: auto;
            display: flex;
            flex-direction: column;
            row-gap: 4rem;

            .flow{
                display: flex;
                column-gap: 2.4rem;

                @media(min-width: 768px){
                    column-gap: 4rem;
                }

                .number{
                    align-self: baseline;
                    background: var(--colorSubA);
                    font-size: 2rem;
                    display: flex;
                    line-height: 1;
                    justify-content: center;
                    align-items: center;
                    width: 4.4rem;
                    height: 4.4rem;
                    flex: 0 0 4.4rem;
                    color: var(--colorWhite);
                }

                .content{
                    h3{
                        height: 4.4rem;
                        margin-bottom: 1.2rem;
                        display: flex;
                        align-items: center;
                    }

                    .text{
                        line-height: 2;
                        letter-spacing: .1rem;
                    }
                }
            }
        }
    }
    .section-7{
        .contact-form{
            max-width: var(--widthSmall);
            margin-inline: auto;

            .field{
                display: flex;
                flex-direction: column;
                column-gap: 2rem;

                @media(min-width: 768px){
                    flex-direction: row;
                }

                .label{
                    padding-bottom: .8rem;

                    @media(min-width: 768px){
                        padding-top: 1.2rem;
                        padding-bottom: 0;
                        flex: 0 0 12rem;
                    }
                }
                .input-area{
                    flex: 1;
                }

                & + .field{
                    margin-top: 2.4rem;
                }
            }

            .btn-area{
                margin-top: 4.8rem;

                .btn{
                    margin-inline: auto;
                }
            }
        }
    }
}

/* footer */
.footer{
    padding-top: 3.2rem;
    padding-bottom: 3.2rem;
    background: var(--colorMain);
    color: var(--colorWhite);

    small{
        font-size: 1.2rem;
        text-align: center;
        display: block;
    }
}