@charset "utf-8";

/* 全体 */
:root {
    --serif: "Noto Serif", serif;
    --sans: "Noto Sans JP", sans-serif;
    --roboto: "Roboto", sans-serif;
    --corinthia: "Corinthia", cursive;
    --advent: "Advent Pro", sans-serif;
    --mplus: "M PLUS Rounded 1c", sans-serif;
    --primary-color: #4B6DAA;
    --accent-color: #D8B890;
}

* {
    box-sizing: border-box;
    appearance: none;
    padding: 0;
    margin: 0;
}

html,
body {
    margin: 0;
    padding: 0;
    color: #555;
    font-family: var(--serif);
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 1.5;
    word-break: normal;
    overflow-wrap: break-word;
    font-feature-settings: "palt";
}

img {
    width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
}

li {
    list-style: none;
}

.abr {
    display: inline-block;
}
.pen {
    pointer-events: none;
}
.no_wbr {
    word-break: normal;
    overflow-wrap: normal;
}

@media (min-width: 1280px) {
    .pc_none {
        display: none !important;
    }

    .tb_only {
        display: none !important;
    }
}

@media (max-width: 1279px) {
    .pc_only {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1279px) {
    .tb_none {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .sp_only {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .sp_none {
        display: none !important;
    }

    .tb_only {
        display: none !important;
    }
}

/*ふわっと出現*/
.fade-up,
.fade-left,
.fade-right {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-left {
    transform: translateX(-50px);
}

.fade-right {
    transform: translateX(50px);
}

.show {
    opacity: 1;
    transform: translate(0, 0);
}

.fadein01 {
    opacity: 0;
    transform: translateY(24px);
    filter: blur(5px);
    transition: .7s;
}

.fadein01.go {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}


.block_inner {
    width: 1280px;
    max-width: 95%;
    margin: 0 auto;
}

@media screen and (max-width:1279px) {
    .block_inner {
        max-width: 93.125%;
    }
}

@media screen and (max-width:799px) {
    .block_inner {
        max-width: 88%;
    }
}



section {
    overflow: hidden;
    position: relative;
}

.section_inner {
    margin: auto;
}

@media (max-width: 1279px) {}

@media (max-width: 799px) {}

.section_en {
    color: #bbb;
    font-size: 87px;
    font-family: 'Corinthia';
    line-height: 1;
    position: relative;
    margin-bottom: 0.5em;
}

.section_en::after {
    content: "";
    position: absolute;
    display: block;
    width: 0.5em;
    height: 1px;
    background-color: #aaa;
    left: 0;
    bottom: 0em;
}

.section_title {
    font-weight: 400;
    line-height: 200%;
    font-size: clamp(40px, 5.21vw + 8px, 56px);
    line-height: 1.2;
    margin-bottom: 1em;
}

.section_title-c {
    color: var(--primary-color);
}

.section_title-sub {
    font-size: .8em;
}

.section_title:has(+ .section_subtitle) {
    margin-bottom: 16px;
}

.section_subtitle {
    font-size: 48px;
}

.section_subtitle-c {
    color: var(--accent-color);
}

.section_subtitle-sub {
    font-size: 0.8em;
}


.section_lead {
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: 200%;
    margin-bottom: 64px;
    text-align: center;
    font-family: var(--sans);
}


@media (max-width: 1279px) {
    .section_title {
        font-size: 44px;
    }

    .section_subtitle {
        font-size: 40px;
    }

}

@media (max-width: 767px) {
    .section_title {
        font-size: 9vw;
    }

    .section_subtitle {
        font-size: max(23px, 5.5vw);
    }

}














.btn_phone {
    background: white;
    flex: 0 1 340px;
    color: #868686;
    font-family: var(--sans);
    font-size: 16px;
    letter-spacing: 0.23px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.header_menu_btns_phone_title {
    margin-bottom: 4px;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: .25em;
}

.header_menu_btns_phone_number,
.introduction_reservation_btn-tel-number {
    color: #868686;
    font-size: 40px;
    line-height: 1;
    letter-spacing: 0.1em;
    display: flex;
    justify-content: center;
    gap: 0px;
    font-family: var(--advent);
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
    margin-bottom: 4px;
    align-items: center;
    white-space: nowrap;
}

.header_menu_btns_phone_number::before,
.introduction_reservation_btn-tel-number::before,
.cta_btn_phone_title::before {
    content: "";
    display: block;
    width: auto;
    height: 1.2em;
    background-image: url("../img/icon-tel.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    aspect-ratio: 40 / 48;
}

.header_menu_btns_phone_time {
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 120%;
}

.header_menu_btns_phone_time-sub {
    font-size: .8em;
}

.header_menu_btns_phone_time_note {
    font-size: 16px;
    line-height: 1;
    border: 1px solid #ccc;
    display: inline-block;
    padding: .25em .75em;
    margin-left: .5em;
}

@media (max-width: 1279px) {
    .btn_phone {
        display: none;
    }
}

.btn_web,
.btn_implant,
.introduction_reservation_btn-web {
    font-family: var(--sans);
    background: #9DB1C1;
    flex: 0 0 304px;
    color: white;
    font-size: 14px;
    letter-spacing: 0.23px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding-top: 0;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.btn_implant, .cta_btn_implant {
    background-color: #40566D;
}

.header_menu_btns_web_title,
.introduction_reservation_btn-web-text {
    font-size: 28px;
    font-family: 'Advent Pro';
}

.header_menu_btns_web_title-sub,
.introduction_reservation_btn-web-text-sub {
    font-size: 0.7em;
    letter-spacing: .1em;
    margin-left: .1em;
}

.header_menu_btns_web_main,
.header_menu_btns_implant_main,
.introduction_reservation_btn-web-main {
    font-size: 44px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.23px;
    display: flex;
    justify-content: center;
    gap: 16px;
    align-items: center;
    position: relative;
    font-family: 'Advent Pro';
}

.header_menu_btns_implant_main {
    font-size: 27px;
    line-height: 1.2;
}

.cta_btn_implant .header_menu_btns_implant_main {
    font-size: 38px;
}

.header_menu_btns_web_main::before,
.introduction_reservation_btn-web-main::before {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    background-image: url("../img/icon-web.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.header_menu_btns_implant_main::before {
    width: 33px;
    height: 62px;
    background-image: url("/assets/img/common/icon-implant.svg");
}

.header_menu_btns_web_main-text {
    display: flex;
    align-items: center;
    letter-spacing: .05em;
}

.header_menu_btns_web_main-sub,
.introduction_reservation_btn-web-main-sub {
    font-size: 0.8em;
}

.header_menu_btns_web_sub {
    font-family: var(--corinthia), cursive;
    font-weight: 200;
    font-style: normal;
    font-size: 28px;
}

@media (max-width: 1279px) {
    .btn_web {
        display: none;
    }
}


@media (max-width: 799px) {
    .header_menu_btns {
        flex-shrink: 0;
        max-width: none;
    }
    .cta_btn_implant .header_menu_btns_implant_main {
        font-size: 24px;
    }
}














.contact.cta {
    background-image: url("/assets/img/top/contact-bg-pc.webp");
    padding-top: 64px;
}
.contact .cta_btns {
    gap: 32px;;
}
.contact_section_en {
    font-size: 120px;
    margin-bottom: 0;
    width: fit-content;
    margin-left: auto;
}

.contact_section_en::after {
    width: 50vw;
    height: 2px;
    background-color: #bebebe;
    bottom: .15em;
}

.contact_section_title {
    color: #A3A3A3;
    font-size: 24px;
    text-align: right;
    margin-bottom: 80px;
}

.contact_cta_btn_implant .header_menu_btns_implant_main {
    font-size: min(30px, 2.3vw);
}

@media (max-width: 1279px) {
    .contact {
        background-image: url("/assets/img/top/contact-bg-tb.webp");
    }

    .contact_section_en {
        font-size: 64px;
    }

    .contact_section_title {
        font-size: 16px;
    }
}

@media (max-width: 767px) {
    .contact {
        background-image: url("/assets/img/top/contact-bg-sp.webp");
    }
}


.btn_phone.cta_btn_phone, .btn_web.cta_btn_web, .btn_implant.cta_btn_implant {
    flex: 1;
    padding: 16px 8px;
    justify-content: center;
    position: relative;
    min-height: 160px;
}


















            .cta {
                background-image: url("/assets/img/top/cta-bg-pc.webp");
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center;
                padding-block: 120px 64px;
            }

            .cta_section_inner {
                max-width: 1280px;
                width: calc(100% - 80px);
                margin-inline: auto;
            }

            .cta_section_title {
                color: #282D32;
                font-size: 48px;
                font-weight: 400;
                font-family: var(--serif);
                text-align: center;
                margin-bottom: 1.5em;
            }

            .cta_section_lead {
                color: #444;
                font-size: 20px;
                font-family: var(--sans);
                line-height: 2;
                text-align: center;
                margin-bottom: 80px;
            }

            .cta_btns {
                display: flex;
                gap: 144px;
                margin-bottom: 80px;
            }

            .cta_btn_phone,
            .cta_btn_web,
            .cta_btn_implant {
                flex: 1;
                padding: 16px 8px;
                justify-content: space-around;
                position: relative;
                min-height: 160px;
            }

            .cta_btn_phone {
                background-color: rgba(255, 255, 255, .9);
            }

            .cta_btn_web {
                background-color: rgb(154 175 191);
            }

            .cta_btn_phone::before,
            .cta_btn_web::before,
            .cta_btn_implant::before,
            .cta_btn_phone::after,
            .cta_btn_web::after,
            .cta_btn_implant::after {
                content: "";
                display: block;
                position: absolute;
                width: 7.5%;
                height: 2px;
                top: 50%;
                right: 5%;
                transform: translateY(-50%);
                background-color: #868686;
            }

            .cta_btn_web::before,
            .cta_btn_web::after,
            .cta_btn_implant::before,
            .cta_btn_implant::after {
                background-color: #fff;
            }

            .cta_btn_phone::after,
            .cta_btn_web::after,
            .cta_btn_implant::after {
                width: 10px;
                height: 10px;
                transform: translate(50%, -50%);
                border-radius: 50%;
            }

            .cta_btn_phone .header_menu_btns_phone_title {
                font-size: 19px;
            }

            .cta_btn_phone .header_menu_btns_phone_number {
                font-size: 48px;
                font-weight: 500;
                letter-spacing: 0;
            }

            .cta_btn_phone .header_menu_btns_phone_time {
                font-size: 20px;
            }

            .cta_btn_web .header_menu_btns_web_title {
                font-size: 32px;
            }

            .cta_btn_web .header_menu_btns_web_main {

            }

            .cta_btn_web .header_menu_btns_web_sub {
                font-size: 32px;
            }

            .cta_btn_web .header_menu_btns_web_main-text {
                letter-spacing: 0.1em;
            }


            
            .cta_logo_image {
                max-width: 100%;
                width: auto;
                margin-inline: auto;
            }

            @media (max-width: 1279px) {
                .cta {
                    background-image: url("/assets/img/top/cta-bg-tb.webp");
                    padding-block: 96px 48px;
                }

                .cta_section_inner {
                    max-width: 800px;
                }

                .cta_section_title {
                    font-size: 40px;
                }

                .cta_btns {
                    flex-direction: column;
                    gap: 40px;
                    max-width: 568px;
                    margin-inline: auto;
                }

                .btn_phone.cta_btn_phone,
                .btn_web.cta_btn_web,
                .btn_implant.cta_btn_implant {
                    display: flex;
                    min-height: 112px;
                }

            }

            @media (max-width: 767px) {
                .cta {
                    background-image: url("/assets/img/top/cta-bg-sp.webp");
                    padding-block: 64px 40px;
                }

                .cta_section_inner {
                    max-width: 500px;
                    width: calc(100% - 48px);
                }

                .cta_section_title {
                    font-size: 20px;
                }

                .cta_section_lead {
                    font-size: 16px;
                    text-align: left;
                    margin-bottom: 40px;
                }

                .cta_btns {
                    gap: 24px;
                    margin-bottom: 56px;
                }

                .cta_btn_phone::before,
                .cta_btn_web::before,
                .cta_btn_phone::after,
                .cta_btn_web::after {
                    display: none;
                }

                .cta_btn_phone_title {
                    color: #868686;
                    font-size: 22px;
                    font-weight: 400;
                    display: flex !important;
                    align-items: center;
                    gap: .25em;
                    line-height: 1;
                }

                .header_menu_btns_phone_time {
                    display: grid;
                    grid-template-columns: auto auto;
                }

                .header_menu_btns_phone_time_note {
                    grid-column: 1 / 3;
                    border: none;
                    margin: 0;
                    justify-self: center;
                    position: relative;
                    width: 100%;
                }

                .header_menu_btns_phone_time_note-text {
                    position: relative;
                    padding: 0 .5em;

                }

                .header_menu_btns_phone_time_note::before {
                    content: "";
                    display: block;
                    width: 125%;
                    height: 1px;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, 0);
                    z-index: 0;
                    background: linear-gradient(to right, #868686 30%, transparent 30%, transparent 70%, #868686 70%, #868686)
                }

                .cta_btn_phone_title::before {
                    height: 1.5em;
                }

                .cta_btn_phone .header_menu_btns_phone_time {
                    font-size: 17px;
                }

                .cta_btn_web .header_menu_btns_web_main {
                    font-size: 28px;
                }

                .cta_btn_web .header_menu_btns_web_sub {
                    font-size: 24px;
                }

            }





            










/* スクリーンリーダー・クローラ用（視覚的に非表示） */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}