/* 全体 */
: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: #60A8B0;
    --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;
}

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

a {
    text-decoration: none;
}

li {
    list-style: none;
}

.abr {
    display: inline-block;
}

.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);
}











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);
    }

}





















/*　header　*/
.header_menu {
    display: flex;
    position: fixed;
    top: 0;
    z-index: 9;
    justify-content: space-between;
    width: 100%;
    flex: 1 1 auto;
    gap: 0;
    /*transition: background 0.3s ease;*/
    transition: .3s;
    z-index: 1000;
    height: auto;
    background: transparent;
}
.header_menu-logo-note {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5;
    margin-inline: auto;
    width: fit-content;
}
.header_menu-logo-note.diactive {
    display: none;
}

.btn_phone-small {
    display: block;
    font-size: 0.9em;
    text-align: right;
}
.header_menu.scrolled {
}

@media (max-width: 767px) {
    .header_menu {
        /*background: rgba(255, 255, 255, 0.4);
        justify-content: space-between;
        backdrop-filter: blur(6px);*/
        height: 80px;
        max-height: 80px;
    }
    .header_menu-logo-wrap {
        width: 100%;
    }
}

.header_menu h1 {
    max-width: clamp(384px, 35vw, 664px);
    aspect-ratio: 664 / 176;
    background-color: var(--primary-color);
    padding: 0.5vw 1vw;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media (max-width: 767px) {
    .header_menu {
        position: sticky;
    }
    .header_menu h1 {
        padding: 8px;
        max-width: 100%;
        max-height: 80px;
        aspect-ratio: auto;
        width: 100%;
        background-color: rgb(96 168 176 / 90%);
    }
    .header_menu_logo {
        /*height: 100%;
        width: auto;*/
        height: auto;
        /* width: min(314px, 30vw); */
    }
}

.scrolled .static_logo {
    /* height: 0; */
    /* visibility: hidden; */
    /* display: block; */
}
.static_logo .header_menu_logo {
    transition: .3s;
}
.scrolled .static_logo .header_menu_logo {
    transform: translateY(-25vw);
}
.scrolled.header_menu {
    height: 5.2vw;
}
.header_menu_btns .btn_phone,
.header_menu_btns .btn_web {
    transition: .3s;
}
.scrolled .header_menu_btns .btn_phone,
.scrolled .header_menu_btns .btn_web {
    transform: translateY(-25vw);
}

@media (max-width: 1279px) {
    .scrolled .static_logo .header_menu_logo {
        transform: translateY(-50vw);
    }
    .scrolled.header_menu h1 {
        max-width: clamp(268px, 21.2vw, 371px);
    }
    .scrolled.header_menu {
        height: 7.4vw;
    }
}
@media (max-width: 799px) {
    .scrolled.header_menu {
        height: 60px;
    }
}

.header_menu_btns {
    display: flex;
    flex-shrink: 0;
    max-width: calc(100% - 371px - 32px);
    max-height: 120px;
}

.btn_phone {
    background: white;
    flex: 0 0 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, .introduction_reservation_btn-web {
    font-family: var(--sans);
    background: var(--primary-color);
    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: 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.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, .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_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_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;
    }
}










/* mv */
.mv {
    width: 100%;
    position: relative;
}

.mv_bg {
    position: relative;
    height: auto;
    width: 100%;
}

.mv_bg img {
    position: relative;
    aspect-ratio: 1920 / 1152;
    height: fit-content;
    width: 100%;
    left: 0;
    top: 0;
    display: block;
    z-index: 1;
}

.mv_frame {
    position: absolute;
    right: 0;
    left: 0;
    height: auto;
    display: grid;
    place-content: center;
    z-index: 3;
    top: auto;
    bottom: 113px;
    margin: auto;
    justify-items: center;
    gap: 16px;
    text-shadow: 0 3px 4px rgba(0, 0, 0, .25);
}

.mv_frame .mv_line {
    background: rgba(255, 255, 255, 0.32);
    padding: 16px 2vw;
    white-space: nowrap;
    font-size: 96px;
    color: #fff;
    line-height: 1;
}

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

.mv_line-note {
    color: #88C8D0;
    font-size: 56px;
    display: flex;
    gap: 1.5em;
    text-shadow: 0 1px 2px rgba(255,255,255,.8);
}

.mv_line-note-sub {
    font-size: 0.8em;
    color: #fff;
}


.mv_nav {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: fit-content;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 5%;
    padding: 32px;
    background: rgb(96 168 176 / 80%);
    z-index: 3;
}

.mv_nav_item {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
    line-height: 1.4;
    text-align: center;
}

.mv_nav_item:hover {
    color: rgba(255, 255, 255, 0.8);
}

.mv_nav-item_name {
    letter-spacing: 0.05em;
}

.mv_nav-item_en {
    display: block;
    font-size: .5em;
    font-family: 'Noto Sans JP', sans-serif;
}

@media (max-width: 1279px) {
    .mv_bg img {
        aspect-ratio: 1536 / 1408;
        object-fit: contain;
        width: 100%;
    }

    .mv_nav {
        display: none;
    }

        .mv_frame {
            bottom: 40px;
        }

    .mv_frame .mv_line {
        font-size: 8vw;
        margin-bottom: 0;
    }
        .mv_line-note {
            font-size: 4vw;
        }
.mv_nav {
    display: none;
}

}

@media (max-width: 767px) {
    .mv_bg img {
        position: relative;
        aspect-ratio: 780 / 624;
        height: fit-content;
        width: 100%;
        left: 0;
        top: 0;
        display: block;
        z-index: 1;
    }
    .mv_frame {
    bottom: 16px;
    gap: 8px;
    }
    .mv_frame .mv_line {
        padding: 0.1em 0.2em;
        text-align: center;
    }
}

















.introduction {
    background-image: url("/assets/img/top/introduction-bg-pc.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.introduction_section_inner {
    padding: 0;
}
.introduction_section_en::first-letter {
    color: var(--accent-color);
}
.introduction_contents {
    width: calc(max(50%, 600px) + 160px);
    background-color: rgba(255, 255, 255, .88);
    margin-left: auto;
    padding: 120px 40px 120px 160px;
    clip-path: polygon(160px 0, 100% 0, 100% 100%, 0px 100%);
}
.introduction_clinic_infos {
    margin-bottom: 80px;
}
.introduction_clinic_info {
    font-size: 40px;
    display: flex;
    align-items: center;
    gap: .25em;
    --clinic-info-margin-base: -0.25em;
    margin-left: var(--clinic-info-margin-base);
    counter-increment: number;
    color: #444;
}
.introduction_clinic_info:nth-child(2) {
    margin-left: calc(var(--clinic-info-margin-base) * 2);
}
.introduction_clinic_info:nth-child(3) {
    margin-left: calc(var(--clinic-info-margin-base) * 3);
}
.introduction_clinic_info:nth-child(4) {
    margin-left: calc(var(--clinic-info-margin-base) * 4);
}

.introduction_clinic_info::before {
    content: "";
    aspect-ratio: 48 / 38;
    background-image: url("../img/top/icon_check_simple.webp");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: auto;
    height: .6em;
    display: inline-block;
    vertical-align: middle;
}
.introduction_reservation_btns {
    display: flex;
    gap: 24px;
    margin-left: -64px;
}
.introduction_reservation_btn-tel {
    border: 1px solid #D9D9D9;
    display: block;
    padding: 16px 32px;
    max-width: 304px;
    background-color: #fff;
    flex: 1;
}
.introduction_reservation_btn-tel-text {
    font-weight: 400;
    position: relative;
}
.introduction_reservation_btn-tel-text::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: #BEBEBE;
    position: absolute;
    bottom: 50%;
    left: 0;
}
.introduction_reservation_btn-tel-text-str {
    display: inline-block;
    background-color: #fff;
    padding-inline: 0.5em 1em;
    position: relative;
    z-index: 1;
}

.introduction_reservation_btn-tel-number {
    font-size: 38px;
}

.introduction_reservation_btn-web {
    max-width: 304px;
    background-color: var(--primary-color);
    display: block;
    padding: 16px 32px;
    min-height: 104px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex: 1;
}

.introduction_title {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-feature-settings: initial;
    width: 200px;
    font-size: 64px;
}

.introduction_title-main, .introduction_title-sub {
    padding: 0.5em 0.25em;
    background-color: #fff;
    display: block;
    height: fit-content;
    line-height: 1;
}

.introduction_title-main {
    color: var(--primary-color);
    white-space: nowrap;
    display: block;
}
.introduction_title-sub {
    font-size: 0.625em;
    margin-block-end: 0.25em;
    margin-inline-start: -1em;
}

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

    .introduction_contents {
        width: 100%;
        background-color: transparent;
        margin-left: auto;
        padding: 80px 0;
        clip-path: none;
    }
    .introduction_content_block {
        width: 100%;
        background-color: rgba(255, 255, 255, .88);
        margin-left: auto;
        padding: 80px 16px 80px 80px;
        clip-path: polygon(80px 0, 100% 0, 100% 100%, 0px 100%);
    }

    .introduction_content_block-inner {
        max-width: 624px;
        margin-inline: auto;
        margin-right: -24px;
    }

    .introduction_section_en {
        width: fit-content;
        margin-inline: auto;
        color: #fff;
        text-shadow: 0 2px 3px rgba(0,0,0,.2);
    }

    .introduction_section_en::after {
        left: 50%;
        transform: translateX(-50%);
        background-color: #fff;
    }








}

@media (max-width: 767px) {
    .introduction {
        background-image: url("/assets/img/top/introduction-bg-sp.webp");
    }
        .introduction_content_block {
            padding: 80px 24px 80px 80px;
        }
        .introduction_content_block-inner {
            margin-right: auto;
        }
        .introduction_clinic_infos {
            margin-bottom: 40px;
        }
        .introduction_clinic_info {
            font-size: max(20px, 5.3vw);
            gap: 0.75em;
        }
.introduction_reservation_btns {
    gap: 16px;
    margin-left: -24px;
}
.introduction_reservation_btn-tel, .introduction_reservation_btn-web {
    min-width: 144px;
    height: 49px;
    padding: 8px 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: auto;
}
.introduction_reservation_btn-tel-number, .introduction_reservation_btn-web-text {
    display: none;
}

.introduction_reservation_btn-tel-text-str {
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-inline: 0;
}
.introduction_reservation_btn-tel-text-str::before {
    content: "";
    display: flex;
    background-color: transparent;
    width: auto;
    height: 1.5em;
    aspect-ratio: 40 / 48;
    background-image: url(../img/icon-tel.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    align-items: center;
}
.introduction_reservation_btn-tel-text::after {
    display: none;
}
.introduction_reservation_btn-web-main {
    font-size: 20px;
    gap: 0.5em;
}
.introduction_reservation_btn-web-main::before {
    aspect-ratio: 1;
    height: 1.2em;
    width: auto;
}



}






















.director_introduction {
    background-color: #fff;
}

.director_introduction_section_inner {
    padding: 0;
}

.director_introduction_title {
    background-color: rgba(255,255,255,.75);
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-feature-settings: initial;
    font-size: 64px;
    position: absolute;
    top: 0;
    right: 20%;
    padding: .5em .25em;
    height: fit-content;
    line-height: 1;
}
.director_introduction_title-c {
    color: var(--accent-color);
}

.director_introduction_images-wrapper {
        width: calc(max(50%, 600px) + 160px);
        margin-left: auto;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 160px 100%);
        overflow: hidden;
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
}
.director_introduction_image {
    height: 100%;
    object-fit: cover;
}

.director_introduction_content {
    padding: 96px 80px 80px;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-feature-settings: initial;
    min-height: 1000px;
    margin-right: calc(max(50%, 600px) + 160px);
    margin-left: auto;
}
.director_introduction_content-text {
    font-size: 18px;
    font-weight: 300;
    line-height: 2;
    font-family: var(--sans);
    margin-block-end: 2em;
}

.director_introduction_content-director {
    text-align: end;
}

.director_introduction_content-director-address {
    font-size: 18px;
    font-family: var(--sans);
    font-weight: 300;
}

.director_introduction_content-director-name {
    color: var(--accent-color);
    font-size: 48px;
}


.chairman_introduction {
    background-color: #F4F6F5;
}
.chairman_introduction_images-wrapper {
    width: calc(max(40%, 500px) + 160px);
    margin-left: auto;
    clip-path: polygon(0 0, 100% 0, calc(100% - 160px) 100%, 0 100%);
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

.chairman_introduction_content {
    margin-left: calc(43% + 40px);
    margin-right: auto;
    padding: 96px 80px 80px 0;
}

.chairman_introduction_image {
    object-position: left;
    object-position: 15%;
}

.chairman_introduction_title {
    right: 5%;
    background-color: transparent;
    padding: 0;
    font-size: 4vw;
}

.chairman_introduction_title-text {
    background-color: rgba(255, 255, 255, .75);
    display: block;
    padding: .5em .25em;
}
.chairman_introduction_title-text + .chairman_introduction_title-text {
    margin-block-start: .25em;
}

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

@media (max-width: 1279px) {
    .director_introduction_images-wrapper {
        position: static;
        width: 100%;
        clip-path: none;
    }
.director_introduction_title {
    font-size: 48px;
    right: 8vw;
}

.director_introduction_images-wrapper {
    aspect-ratio: 768 / 560;
}

.director_introduction_content {
    writing-mode: horizontal-tb;
    width: 100%;
    max-width: 800px;
    margin-inline: auto;
    padding: 64px 40px 120px;
    min-height: auto;
}



.chairman_introduction_images-wrapper {
    position: static;
    width: 100%;
    clip-path: none;
}

}

@media (max-width: 767px) {
.director_introduction_title {
    font-size: 34px;
}
.director_introduction_images-wrapper {
    aspect-ratio: 390 / 284;
}
.director_introduction_content {
    padding: 40px 24px 80px;
}
.director_introduction_content-director-name {
    font-size: 40px;
}

}










.microscope {
    padding-block: 120px 0;
    position: relative;
}
.microscope::before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-image: radial-gradient(#f8f8f8 2px, transparent 2px), radial-gradient(#f8f8f8 2px, transparent 2px);
    background-color: #ffffff;
    background-position: 0 0, 8px 8px;
    background-size: 16px 16px;
    z-index: -1;
}
.microscope_section-header {
    max-width: 1280px;
    margin-inline: auto;
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    align-items: start;
    width: calc(100% - 80px);
}
.microscope_section_en {
    color: var(--accent-color);
}
.microscope_section_en::after {
    width: 100%;
    background: linear-gradient(to right, #fff, var(--accent-color));
    width: 150%;
    left: auto;
    right: 0;
}

.microscope_card-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 80px;
}

.microscope_card-item:nth-child(1) {
    margin-top: 120px;
}
.microscope_card-item:nth-child(3) {
    margin-top: -120px;
}

.microscope_card-content {
    padding: 32px 40px;
    background-color: #F5F0E4;
}
.microscope_card-item:nth-child(even) .microscope_card-content {
    background-color: #EFEFEF;
}
.microscope_card-title {
    color: var(--primary-color);
    font-size: 32px;
    margin-bottom: 1em;
}
.microscope_card-text {
    font-size: 18px;
    line-height: 1.8;
    font-family: var(--sans);
}


@media (max-width: 1279px) {
    .microscope {
        background: linear-gradient(to bottom, #F5F5F5, transparent 50%);
        padding-block: 80px;
    }
    .microscope::before {
        display: none;
    }
    .microscope_section_inner {
        max-width: 800px;
        width: calc(100% - 80px);
    }
    .microscope_section-header {
        display: block;
        width: 100%;
    }
    .microscope_section_en {
        display: none;
    }

    .microscope_card-list {
        gap: 40px;
    }
    .microscope_card-list {
        grid-template-columns: 1fr;
        margin-top: 72px;
    }
    .microscope_card-item {
        max-width: 640px;
    }
    .microscope_card-item:nth-child(odd) {
        margin: 0 auto 0 -16px;
    }

    .microscope_card-item:nth-child(even) {
        margin: 0 -16px 0 auto;
    }




}

@media (max-width: 767px) {
    .microscope_section_inner {
        max-width: 500px;
        width: calc(100% - 48px);
    }
    .microscope_card-list {
        margin-top: 56px;
        gap: 32px;
    }

    .microscope_card-item {
        maxm-width: 500px;
        margin: 0 !important;
    }

    .microscope_card-content {
        padding: 24px;
    }
    .microscope_card-title {
        font-size: max(22px, 5.6vw);
        margin-bottom: 0.5em;
    }

    .microscope_card-text {
        font-size: 16px;
    }
}










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

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













/* info */
.info-wrap {
    position: relative;
}

.info {
    background: #f8f6f4;
    position: relative;
    padding-top: clamp(24px, 3.12vw + 7px, 48px);
}

@media (max-width: 1279px) {
    .info {
        background-image: url("../img/top/info_image01-tb.webp");
        background-size: cover;
        background-position: center;
    }
}
@media (max-width: 799px) {
    .info {
        background-image: none;
        padding-top: 380px;
    }
}


.info h3 {
    font-style: normal;
    font-weight: 400;
    line-height: 200%;
    font-size: 0;
    vertical-align: sub;
}

.info h3 span {
    line-height: 160%;
}

.info ul {
    font-style: normal;
    font-weight: 400;
    line-height: 200%;
    font-size: 0;
    vertical-align: sub;
    display: flex;
    flex-direction: column;
}

.info li span {
    line-height: 160%;
}

.info_clm {
    display: flex;
    position: relative;
    overflow: hidden;
}

.info_clm>*:last-child {
    padding-bottom: 64px;
}

@media (max-width: 799px) {
    .info_clm {
        margin-top: 32px;
        background-image: url("../img/top/info_image01-sp.webp");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: top;
        }
.info_clm>*:last-child {
    padding-bottom: 40px;
}

    }

@media (max-width: 799px) {
    .info_clm {
        flex-direction: column;
    }

    .info_clm img {
        margin-top: 32px;
    }

    .info .section_title_bar {
        display: none;
    }
}

.info_image {
    flex: 1 1 calc(60% - 32px);
    /* transform: skewX(-10deg); */
    clip-path: polygon(0% 0, 100% 0, 80% 100%, 0% 100%);
    overflow: hidden;
    background-image: url("../img/top/info_image01-pc.webp");
    background-position: left;
    background-size: cover;
    height: 100%;
    position: absolute;
    left: 0;
    right: 50vw;
    top: 0;
    z-index: 3;
}

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

.info_content {
    font-size: 0;
    flex: 1 1 calc(80% - 32px);
    padding-left: 5vw;
    position: relative;
    margin-right: -40px;
    margin-left: 30vw;
    z-index: 4;
    margin-top: 48px;
    text-align: left;
    z-index: 10;
    margin-bottom: 48px;
        padding-block: 80px;
}

@media (max-width: 1279px) {
    .info_content {
        margin-left: 0;
    }
}

@media (max-width: 799px) {
    .info_content {
        left: 0;
        margin-left: 0;
        padding-block: 40px;
    }
}

.info_content::before {
    content: "";
    background: rgba(255, 255, 255, 0.7);
    clip-path: polygon(17% 0, 100% 0, 100% 100%, 0% 100%);
    position: absolute;
    right: 0;
    left: 0;
    z-index: 4;
    height: 100%;
    z-index: -1;
    top: 0;
}

.info_content h3 {
    margin-bottom: 24px;
}

.info_content_line1 {
    padding-left: 17vw;
    height: 64px;
    width: 80vw;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
}

.info_content_line2 {
    padding-left: 15.5vw;
    height: 64px;
    width: 80vw;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
}

.info_content_line3 {
    padding-left: 14vw;
    margin-bottom: 16px;
    width: 76vw;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
}

.info_content_line4 {
    padding-left: 11.5vw;
    margin-bottom: 16px;
    width: 76vw;
}

.info_content_line5 {
    padding-left: 10vw;
    margin-bottom: 16px;
    width: 73vw;
}

.info_content_line6 {
    padding-left: 8.5vw;
    margin-bottom: 40px;
    width: 75vw;
}

@media (max-width: 799px) {
    .info_content_line1 {
        padding-left: 15vw;
        height: 64px;
        width: auto;
    }

    .info_content_line2 {
        padding-left: 13vw;
        height: 64px;
        width: 95vw;
    }

    .info_content_line3 {
        padding-left: 11vw;
        margin-bottom: 16px;
        width: 89vw;
    }

    .info_content_line4 {
        padding-left: 9vw;
        margin-bottom: 16px;
        width: 90vw;
    }

    .info_content_line5 {
        padding-left: 7vw;
        margin-bottom: 16px;
        width: 90vw;
    }

    .info_content_line6 {
        padding-left: 5vw;
        margin-bottom: 0;
        width: 90vw;
    }
}

.info_checkicon {
    display: flex;
}

.info_checkicon::before {
    content: "";
    display: inline-block;
    background-image: url("../img/top/icon_check_simple.webp");
    background-repeat: no-repeat;
    background-size: contain;
    width: auto;
    height: 32px;
    aspect-ratio: 24 / 19;
    margin-right: 16px;
    vertical-align: middle;
}

@media (max-width: 799px) {
    .info_checkicon::before {
        height: 20px;
        margin-right: 12px;
    }
}

.info_font_24px {
    font-size: clamp(13px, 1.62vw + 7px, 24px);
    line-height: 130%;
    font-weight: 300;
}

.info_font_33px {
    font-size: clamp(18px, 2.25vw + 7px, 33px);
    line-height: 130%;
    font-weight: 300;
}

.info_font_36px {
    font-size: clamp(24px, 3vw + 7px, 36px);
    line-height: 130%;
    font-weight: 300;
}

.info_font_40px {
    font-size: clamp(22px, 2.75vw + 7px, 40px);
    line-height: 130%;
    font-weight: 300;
}

.info_font_48px {
    font-size: clamp(28px, 4vw + 7px, 48px);
    line-height: 130%;
    font-weight: 300;
}

.info_buttons {
    display: flex;
    gap: 32px;
    justify-content: center;
    align-items: center;
    width: 70%;
    margin: auto;
    margin-left: 5%;
}

.info_buttons>* {
    flex: 1 1 300px;
}

@media (max-width: 799px) {
    .info_buttons {
        display: none;
    }
}

.info_button_phone {
    background: white;

    color: #868686;
    font-size: 23px;
    letter-spacing: 0.23px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    height: 110px;
    border: 1px solid #d9d9d9;
}

.info_button_phone>*:nth-child(1) {
    color: #231814;

    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 22.4px */
    display: flex;
    flex-direction: row;
    gap: 0;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
    gap: 16px;
}

.info_button_phone>*:nth-child(1)::after {
    content: "";

    border-bottom: 1px solid #bebebe;
    height: 1px;
    display: grid;
    place-content: center;
    width: 100px;
}

.info_button_phone>*:nth-child(2) {
    color: #868686;

    font-family: var(--roboto);
    font-size: 31px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%;
    max-width: 320px;
}

.info_button_phone>*:nth-child(2)::before {
    content: "";
    flex: 0 0 40px;
    background-image: url("../img/top/icon_smartphone.webp");
    background-size: contain;
    background-repeat: no-repeat;
    width: 32px;
    height: 40px;
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
}

.info_button_web {
    background: #b09767;
    color: white;
    display: flex;
    flex-direction: row;
    text-align: center;

    justify-content: center;
    align-items: center;
    height: 110px;
    gap: 24px;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}

.info_button_web>*:nth-child(1)::before {
    content: "";
    flex: 0 0 40px;
    background-image: url("../img/top/icon_web.webp");
    background-size: contain;
    background-repeat: no-repeat;
    width: 32px;
    height: 40px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}

.info_buttons_sp {
    display: none;
}

.info_buttons_sp>* {
    flex: 1 1 300px;
    padding: 0 4px;
}

@media (max-width: 799px) {
.info_buttons_sp {
        display: flex;
        gap: max(16px, 3vw);
        justify-content: center;
        align-items: center;
        width: calc(100% - 32px);
        margin: auto;
        max-width: 560px;
    }
}

.info_button_phone_sp {
    background: white;

    color: #868686;
    font-size: 23px;
    letter-spacing: 0.23px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    height: 70px;
    border: 1px solid #d9d9d9;
}

.info_button_phone_sp>*:nth-child(1) {
    color: #231814;

    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 22.4px */
    display: flex;
    flex-direction: row;
    gap: 0;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
}

.info_button_phone_sp>*:nth-child(1) {
    color: #868686;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%;
    max-width: 320px;
}

.info_button_phone_sp>*:nth-child(1)::before {
    content: "";
    flex: 0 0 40px;
    background-image: url("../img/top/icon_smartphone.webp");
    background-size: contain;
    background-repeat: no-repeat;
    width: 32px;
    height: 40px;
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
}

.info_button_web_sp {
    background: #b09767;
    color: white;
    display: flex;
    flex-direction: row;
    text-align: center;

    justify-content: center;
    align-items: center;
    height: 70px;
    gap: 24px;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}

.info_button_web_sp>*:nth-child(1)::before {
    content: "";
    flex: 0 0 40px;
    background-image: url("../img/top/icon_web.webp");
    background-size: contain;
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}

/*concern*/
.concern {
    background-image: url("../img/top/concern_bg-pc.webp");
    background-position: center;
    background-size: cover;
}

.concern .section_inner {
    padding-bottom: 120px;
}
@media (max-width: 1279px) {
    .concern {
        background-image: url("../img/top/concern_bg-tb.webp");
    }
}@media (max-width: 799px) {
    .concern {
        background-image: url("../img/top/concern_bg-sp.webp");
    }
}
@media (max-width: 799px) {
    .concern .section_inner {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 80px;
    }
}

.concern .section_title {
    font-size: 0;
    line-height: 160%;
    margin-bottom: 80px;
}

@media (max-width: 799px) {
.concern .section_title {
        margin-bottom: 40px;
    }
}
.concern_list {
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
    justify-content: center;
    align-items: center;
}

@media (max-width: 799px) {
    .concern_list {
        flex-direction: column;
        gap: 16px;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        max-width: 500px;
            margin-inline: auto;
    }
}

.concern_list_item {
    flex: 0 0 calc((100% - 48px * 2) / 3);
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 0;
    height: fit-content;
    text-align: center;
    background-color: white;
}

@media (max-width: 799px) {
    .concern_list_item {
        flex: 1 1 100%;
        flex-direction: row;
        gap: 24px;
    }
}

.concern_list_item img {
    border-radius: 0;
}

@media (max-width: 799px) {
    .concern_list_item img {
        width: min(250px, 50vw);
        height: auto;
        aspect-ratio: 16 / 10;
        object-fit: cover;
    }

    .concern_list_item p {
        text-align: left;
        line-height: 1.5;
    }
}

.concern_bottomtext {
    padding: 24px;
    max-width: 860px;
    margin: auto;
    margin-top: 64px;
    text-align: center;
    background: #b4874d;
    font-weight: 600;
    color: white;
    position: relative;
    width: calc(100% - 32px);
}

@media (max-width: 799px) {
    .concern_bottomtext {
        text-align: left;
        word-break: normal;
        overflow-wrap: normal;
    }
}

.concern_bottomtext::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: url("../img/top/dot.webp");
    opacity: 0.4;
}

.button-wrap {
    display: flex;
    justify-content: center;
    margin-top: 80px;
    max-width: 425px;
        margin-inline: auto;
        width: 100%;
}


.solution {
    background-image: url("../img/top/solution_bg-pc.webp");
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #F5F3ED;
    position: relative;
}

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

@media (max-width: 799px) {
    .solution {
        background-image: url("../img/top/solution_bg-sp.webp");
        background-size: contain;
        background-position: top;
    }
}

.solution_implant_image {
    position: absolute;
    top: 10%;
    left: 67%;
    z-index: 1;
    width: fit-content;
    height: fit-content;
}
@media (max-width: 1279px) {
    .solution_implant_image {
        display: none;
    }
}
.solution_font_32px {
    font-size: clamp(22px, 2.75vw + 7px, 32px);
    line-height: 130%;
    font-weight: 300;
}

.solution_font_36px {
    font-size: clamp(24px, 3vw + 7px, 36px);
    line-height: 130%;
    font-weight: 300;
}

.solution_font_64px {
    font-size: clamp(36px, 4.5vw + 7px, 64px);
    line-height: 130%;
    font-style: normal;
    font-weight: 300;
}

.solution .section_inner {
    padding-top: 0;
}

@media (max-width: 1024px) {
    .solution .section_inner {
        padding: 0;
    }
}

.solution_title {
    writing-mode: vertical-rl;
    text-orientation: upright;
    display: flex;
    flex-direction: column;
    font-size: 0;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
    margin: auto;
    margin-top: 0;
}

.solution_title>* {
    padding: 32px 0;
}

.solution_clm {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 64px;
    max-width: 440px;
    width: calc(100% - 32px);
    margin-inline: auto;
    margin-bottom: 80px;
}

@media (max-width: 1024px) {
    .solution_clm {
        margin: 0 auto;
        display: grid;
        place-content: center;
        gap: 0;
    }
}

.solution_text {
    flex: 1 1 40%;
    margin: 0 auto 40px;
    word-break: normal;
    overflow-wrap: normal;
    font-family: var(--sans);
}

@media (max-width: 1024px) {
    .solution_text {
        flex: 1 1 100%;
        padding: 24px;
    }
}

.solution_empty {
    width: 30%;
}

.solution_image {
    width: 30%;
}

@media (max-width: 1024px) {
    .solution_image {
        display: none;
    }
}

.solution_images {
    padding: 80px 0;
    background-color: rgba(255, 255, 255, 0.4);
}

.solution_images-inner {
    display: flex;
        justify-content: center;
        gap: min(40px, 2.1vw);
        margin-inline: auto;
}

@media (max-width: 1279px) {
.solution_images-inner {
    max-width: calc(613 / 800 * 100vw);
    width: calc(100% - 32px);
}
}

.solution_images-link {
    position: relative;
}
.solution_images-link::after {
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    bottom: 8px;
    right: 8px;
    background-color: rgba(255,255,255, 0.5);
}
.solution_images-link-image {
    filter: brightness(0.5);
    transition: .3s;
}
.solution_images-link:hover .solution_images-link-image {
    filter: brightness(1);
}
.solution_images-link-text {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    color: #fff;
    font-family: 'Noto Sans JP';
    font-size: 17px;
    font-weight: 500;
    z-index: 1;
    line-height: 1.4;
    text-align: center;
    width: 100%;
    letter-spacing: 0.1em;
    padding: 0 16px;
    letter-spacing: 0.1em;
}
@media (max-width: 799px) {
    .solution_images-link::after {
        width: min(40px, 6vw);
        height: min(40px, 6vw);
        bottom: min(8px, 1vw);
        right: min(8px, 1vw);
    }
}

/* price */
.price {
    background-image: url("../img/top/slash.webp");
    background-position: center;
    background-repeat: repeat;
}

.price .section_inner {
    max-width: 1680px;
    width: calc(100% - 32px);
    padding-bottom: 120px;
}
@media (max-width: 799px) {
.price .section_inner {
        padding-bottom: 80px;
    }
}
.price_subtitle {
    color: #444;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.96px;
}

.price .section_lead {
    text-align: left;
    max-width: 500px;
    margin-inline: auto;
}

.price_list {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: clamp(16px, 2.08vw + 5px, 36px);
    width: 100%;
}

@media (max-width: 799px) {
    .price_list {
        flex-direction: column;
        max-width: 500px;
            margin-inline: auto;
    }
}

.price_list>* {
    flex: 0 0 calc((100% - 72px) / 3);
    text-align: center;
    border: 1px solid #b1b1b1;
    background: #fff;
    padding: clamp(8px, 1.04vw + 7px, 36px);
}

@media (max-width: 799px) {
    .price_list>* {
        flex: 1;
        padding: 16px;
    }
}

@media (max-width: 799px) {
.price_list .inner {
        display: flex;
        justify-content: start;
        gap: 16px;
        align-items: center;
    }
}

.price_list figure {
    background-color: #dfd6c0;
    display: grid;
    place-content: center;
    aspect-ratio: 1 / 1;
    max-width: 120px;
    margin: 0 auto 24px auto;
    border-radius: 999px;
}

@media (max-width: 799px) {
    .price_list figure {
        margin-bottom: 0;
        margin-inline: 0;
    }
}
.price_list figure img {
    width: 70%;
    margin: auto;
}

.price_list h3 {
    color: #3e3e3e;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 200%;
    /* 40px */
    letter-spacing: 1.399px;
}

.price_list p {
    color: #3e3e3e;
    text-align: center;

    font-family: var(--serif);
    font-size: 16px;
    font-weight: 300;
    line-height: 200%;
    letter-spacing: 1.399px;
}

@media (max-width: 799px) {
    .price_list h3, .price_list p {
        text-align: left;
    }
}

/* risk */
.risk {
    overflow: hidden;
    position: relative;
}

.risk::before {
    content: "";
    background-image: url("../img/top/risk_bg-pc-re.webp");
    background-position: right;
    background-size: cover;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

@media (max-width: 1279px) {
    .risk::before {
    background-image: none;
    }
}

@media (max-width: 799px) {
    .risk::before {
        content: "";
        display: none;
    }
}

.risk .section_inner {
    position: relative;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 2.5fr 1fr;
    grid-template-rows: auto auto auto;
    padding-bottom: 96px;
}

.risk_cell1 {
    grid-column: 1;
    grid-row: 1 / span 2;
    /* 2行にまたがる */
}

.risk_cell2 {
    grid-column: 2;
    grid-row: 1;
    /* 1行目 */
}

.risk_cell3 {
    grid-column: 2;
    grid-row: 2;
    /* 2行目 */
}

.risk_cell4 {
    grid-column: 3;
    grid-row: 1 / span 3;
    align-self: end;
    /* 2行にまたがる */
}
.risk_cell5 {
    grid-column: 2;
    grid-row: 3;
}


@media (max-width: 1279px) {
    .risk .section_inner {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
    }

    .risk_cell1 {
        grid-row: 2;
        width: 100%;
        grid-column: 1 / -1;
        /* グリッドの全列にまたがる */
        position: relative;
        display: flex;
        justify-content: flex-start;
        /* 横方向を左寄せ */
        align-items: flex-start;
    }

    .risk_cell1::before {
        content: "";
        background-image: url("../img/top/risk_bg-tb-re.webp");
        background-position: right;
        background-size: cover;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100vw;
        height: 90%;
        z-index: -1;
        /* 背景として後ろに */
    }

    .risk_cell2 {
        grid-row: 1;
        grid-column: 1;
        /* 先頭に移動 */
    }

    .risk_cell3 {
        grid-row: 3;
        grid-column: 1;
        width: calc(100% - 32px);
    }

    .risk_cell4 {
        grid-row: 4;
        grid-column: 1;
        margin-top: 80px;
    }
    .risk_cell5 {
        grid-row: 5;
        grid-column: 1;
        width: 100%;
    }
}

.risk .section_title, .pamphlet .section_title, .achievements .section_title {
    color: #231814;
    text-align: center;
    font-size: clamp(40px, 5vw + 7px, 48px);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 4.8px;
    margin-bottom: 32px;
    padding-top: 1em;
    position: relative;
}

.risk .section_title::before, .pamphlet .section_title::before, .achievements .section_title::before {
    content: "";
    display: block;
    width: 3em;
    border-top: 1px solid #444;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

@media (max-width: 799px) {
    .risk .section_inner {
        padding-top: 40px;
        padding-bottom: 80px;
    }

    .risk .section_title, .pamphlet .section_title {
        margin-top: 40px;
        font-size: clamp(24px, 3vw + 7px, 28px);
    }
    .risk_cell1::before {
        content: "";
        background-image: url("../img/top/risk_bg-sp-re.webp");
        background-position: right;
        background-size: cover;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100vw;
        height: 90%;
        z-index: -1;
        /* 背景として後ろに */
    }
}

.risk_font_40px {
    font-size: clamp(24px, 3vw + 7px, 40px);
}

.risk .section_lead {
    margin-bottom: 32px;
    font-size: 16px;
}

@media (max-width: 799px) {
    .risk .section_lead {
        margin: auto;
        font-size: 15px;
        text-align: left;
        word-break: normal;
        overflow-wrap: normal;
        padding: 24px;
    }
}

.risk_catchcopy {
    writing-mode: vertical-rl;
    text-orientation: upright;
    display: flex;
    gap: 24px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: fit-content;
}

@media (max-width: 1200px) {
    .risk_catchcopy {
        transform-origin: top right;
        gap: 12px;
    }
}

@media (max-width: 1279px) {
    .risk_catchcopy {
        transform-origin: top right;
        justify-content: flex-end;
        align-items: flex-start;
        position: relative;
        left: 0;
        top: 0;
        gap: 10px;
        margin: auto;
        width: 95%;
        z-index: 3;
    }

}

.risk_catchcopy>* {
    padding: 48px 16px;
    color: #fff;
    text-align: center;
    font-size: clamp(16px, 2vw + 7px, 35px);
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    word-break: normal;
    overflow-wrap: normal;
    background-color: rgba(178, 153, 95, 0.7);
}

@media (max-width: 1279px) {
.risk_catchcopy>* {
        word-break: keep-all;
    }
}

@media (max-width: 799px) {
    .risk_catchcopy>* {
        text-align: center;
        padding: 40px 8px;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 100%;
    }
}

.risk_catchcopy>*:nth-child(1) {
    margin-top: 0;
}

.risk_catchcopy>*:nth-child(2) {
    margin-top: 78px;
}

.risk_catchcopy>*:nth-child(3) {
    margin-top: 156px;
}

@media (max-width: 1279px) {
    .risk .section_inner>* {
        margin-inline: auto;
    }
}

@media (max-width: 799px) {
    .risk .section_inner>* {
        margin: auto;
    }
}

.risk_list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(auto, auto);
    gap: 32px;
    margin: auto;
}

@media (max-width: 799px) {
    .risk_list {
        display: flex;
        flex-direction: column;
        padding: 24px;
    }
}

.risk_list>* {
    display: grid;
    place-content: center;
    border: 1px solid #b1b1b1;
    text-align: center;
    background: rgba(255, 255, 255, 0.7);
    padding: 48px;
    color: #231814;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
}

.risk_desc {
    display: inline-block;
    position: relative;
    padding: 24px;
    font-family: var(--sans);
    backdrop-filter: blur(10px);
}

.risk_desc::before {
    content: "";
    width: calc(100% + 24px);
    height: calc(100% + 24px);
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    border-top: 1px solid #281614;
    border-left: 1px solid #281614;
}

.risk_desc::after {
    content: "";
    width: calc(100% + 24px);
    height: calc(100% + 24px);
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    border-bottom: 1px solid #281614;
    border-right: 1px solid #281614;
}

@media (max-width: 1279px) {
    .risk_desc {
        width: 90vw;
        color: #b4874d;
        text-align: center;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 140%;
        max-width: 600px;
    }
.risk_desc::before {
    border-top: 1px solid #b4874d;
    border-left: 1px solid #b4874d;
}
.risk_desc::after {
    border-bottom: 1px solid #b4874d;
    border-right: 1px solid #b4874d;
}
}

@media (max-width: 799px) {
    .risk_desc {
        width: 90vw;
        /* 22.4px */
        height: fit-content;
        display: grid;
        place-content: center;
        margin: 0 auto 0 auto;
        padding: 24px;
        position: relative;
        height: 240px;
    }

    .risk_desc::before {
        content: "";
        width: 90vw;
        height: 155px;
        display: block;
        position: absolute;
        left: 0;
        right: -24px;
        top: 0;
        bottom: -24px;
        margin: auto;
        border-top: 1px solid #b4874d;
        border-left: 1px solid #b4874d;
    }

    .risk_desc::after {
        content: "";
        width: 90vw;
        height: 155px;
        display: block;
        position: absolute;
        left: -24px;
        right: 0;
        top: -24px;
        bottom: 0;
        margin: auto;
        border-bottom: 1px solid #b4874d;
        border-right: 1px solid #b4874d;
    }

    .risk .button-wrap {
        margin-top: 40px;
    }
}

.pamphlet {
    background-color: #F5F3ED;
}
.pamphlet .section_inner {
    padding-bottom: 120px;
}
.pamphlet-contents {
    display: grid;
    grid-template-columns: minmax(auto, 682px) minmax(auto, 846px);
    grid-template-rows: auto auto;
    gap: 0 min(72px, 3.75vw);
    align-items: start;
    justify-content: center;
    max-width: calc(682px + 846px + 32px);
    width: 100%;
    margin-left: auto;
}
.pamphlet-item01 {
    grid-column: 1;
    grid-row: 1;
    text-align: center;
}
.pamphlet-item02 {
    grid-column: 2;
    grid-row: 1 / 3;
}
.pamphlet-item03 {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
}
.pamphlet-section-text {
    font-size: 22px;;
}
.pamphlet .section_title {
    line-height: 1.4;
}
.pamphlet-section-sub {
    font-size: 0.85em;
}
.pamphlet-section-c {
    color: #B2995F;
}
@media (max-width: 1279px) {
    .pamphlet-contents {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 40px;
    }
    .pamphlet-item01 {
        grid-column: 1;
        grid-row: 1;
    }
    .pamphlet-item02 {
        grid-column: 1;
        grid-row: 2;
        max-width: 80%;
        margin-inline: auto;
    }
    .pamphlet-item03 {
        grid-column: 1;
        grid-row: 3;
        justify-self: stretch;
        margin-top: 40px;
    }
}
@media (max-width: 799px) {
.pamphlet .section_inner {
    padding-bottom: 80px;
}
.pamphlet .section_title {
    margin-top: 0;
}
.pamphlet-section-text {
    font-size: max(16px, 3vw);
}
}

/* number */
.number {
    position: relative;
    background-image: url(../img/top/slash.webp);
        background-position: center;
        background-repeat: repeat;
}

.number::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-image: url("../img/top/number_bg-pc.webp");
    background-position: 25% 0;
    background-size: cover;
    overflow: hidden;
    z-index: -1;
}
@media (max-width: 1279px) {
    .number::before {
        background-image: url("../img/top/number_bg-tb.webp");
        background-position: left;
        background-size: cover;
    }
}
@media (max-width: 799px) {
    .number::before {
        background-image: url("../img/top/number_bg-sp.webp");
        background-position: top;
        background-size: 100%;
        background-repeat: no-repeat;
    }
}

.number .section_inner {
    display: flex;
    padding: 0;
}

.number .inner-left {
    margin: auto;
    width: 55%;
}

.number .inner-right {
    margin: auto;
    padding: 96px 0;
    width: 45%;
}
.number-inner::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 37%;
    right: 0;
    top: 0%;
    bottom: 0%;
    background-color: rgba(245, 242, 240, 0.7);
    clip-path: polygon(17% 0, 100% 0, 100% 100%, 0% 100%);
    z-index: -1;
}


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

    .number .inner-right {
        margin-right: 5%;
        width: auto;
    }
        .number-inner::before {
            left: 30%;
        }
}

@media (max-width: 799px) {
    .number {
        padding: 24px;
        position: relative;
        z-index: 3;
    }

    .number-inner::before {
        display: none;
    }
    .number .section_inner {
        padding-top: 50vw;
        flex-direction: column;
        position: relative;
        z-index: 5;
    }

    .number .inner-left {
        height: 200px;
        width: 100%;
    }

    .number .inner-right {
        margin: auto;
        padding: 24px;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.7);
    }
}

.number .section_title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 580px;
    gap: 0;
}

@media (max-width: 799px) {
    .number .section_title {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        max-width: 580px;
        margin: auto;
        margin-bottom: 32px;
        gap: 0;
    }
}

.number_title01::before {
    content: "";
    display: inline-block;
    background-image: url("../img/top/logo-mini.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: auto;
    height: 1em;
    aspect-ratio: 61 / 49;
    margin-right: 0.5em;
}

.number_title02 {
    display: flex;
    align-items: baseline;
}

@media (max-width: 799px) {
    .number_title01 {
        font-size: 19px;
    }

    .number_title02>*:nth-child(1) {
        font-size: 32px;
    }

    .number_title02>*:nth-child(2) {
        font-size: 26px;
    }

    .number_title03 {
        font-size: 32px;
    }
}

.number .section_title>* {
    padding: 0;
    font-weight: 400;
}

.number_title-sub {
    font-size: 0.75em;
}

.number ul {
    display: grid;
    grid-template-columns: auto;
    gap: 16px;
    position: relative;
    right: 0;
    z-index: 5;
    font-size: 0;
    max-width: 575px;
}

@media (max-width: 799px) {
    .number ul {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin: auto;
        width: 100%;
    }
}

.number ul>* {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: #5C5C5C;

}

.number ul>*>span {
    display: grid;
    place-content: center;
    font-weight: 500;
}

.number .column {
    display: flex;
    flex-direction: column;
    line-height: 100%;
}

.number .baseline {
    position: relative;
    margin-bottom: -15px;
}

.number_font_24px {
    font-size: clamp(18px, 2.25vw + 7px, 24px);
    line-height: 130%;
    font-weight: 300;
}

.number_font_32px {
    font-size: clamp(18px, 2.25vw + 7px, 32px);
    line-height: 130%;
    font-weight: 300;
}

.number_font_64px {
    font-size: clamp(36px, 4.5vw + 7px, 64px);
    line-height: 130%;
    font-style: normal;
    font-weight: 300;
}


.achievements, .specialist {
    position: relative;
    background-image: url(../img/top/slash.webp);
    background-position: center;
    background-repeat: repeat;
}
.achievements .section_title-sub, .specialist .section_title-sub {
    font-size: 0.75em;
}
.achievements .section_title-c, .specialist .section_title-c {
    color: #B4874D;
}
.achievement02 {
    background-image: url(../img/top/achievements-bg-pc.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 120px;
}
.achievement02-title {
    writing-mode: vertical-rl;
    text-orientation: upright;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    margin: auto;
    margin-top: 0;
}
.achievement02-title-line {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.8);
    padding: .75em .5em;
    font-size: 68px;
    word-break: keep-all;
}
.achievement02-title-sub {
    font-size: 0.75em;
}
.achievement02-title-c {
    color: #B4874D;
}

@media (max-width: 1279px) {
    .achievement02 {
        background-image: url(../img/top/achievements-bg-tb.webp);
        padding-bottom: 100px;
    }
        .achievement02-title-line {
            font-size: 48px;
        }
}
@media (max-width: 799px) {
    .achievement02 {
        background-image: url(../img/top/achievements-bg-sp.webp);
    }
                .achievement02-title-line {
                    font-size: 32px;
                }
    .section_lead {
        text-align: justify;
        width: calc(100% - 48px);
        margin-inline: auto;
    }
}

.specialist-bg {
    position: relative;
    margin-top: 80px;
    background-image: url("../img/top/specialist-bg-pc.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 80px 0;
    width: 100%;
}

.specialist-content {
    position: relative;
    max-width: 1200px;
    margin-inline: auto;
    min-height: fit-content;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: row;
}

.specialist-profile {
    padding: 60px 40px 40px;
    position: relative;
    z-index: 1;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-feature-settings: initial;
    flex: 0 0 auto;
    align-self: flex-end;
}

.specialist-message {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-feature-settings: initial;    margin-bottom: 40px;
    position: relative;
    z-index: 3;
    flex: 0 1 auto;
    margin-right: auto;
}

.specialist-title {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
}

.specialist-title-vertical {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-feature-settings: initial;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 24px 16px;
    font-size: 65px;
    font-weight: 400;
    line-height: 1em;
    letter-spacing: 0.1em;
    color: #231814;
    text-align: center;
}
.specialist-title-vertical-c {
    color: #AD8527;
}
.specialist-name-kanji {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    margin-bottom: 24px;
    gap: 0.2em;
    justify-content: end;
}

.specialist-name-family,
.specialist-name-given {
    font-size: 51px;
    font-weight: 400;
    line-height: 1em;
    color: #896216;
    text-align: right;
}

.specialist-credentials {
    margin-bottom: 32px;
}

.specialist-hospital {
    font-size: 20px;
    font-weight: 400;
    line-height: 1em;
    color: #333;
    margin-left: 0.5em;
}

.specialist-qualification {
    font-size: 19px;
    font-weight: 400;
    line-height: 1em;
    color: #333;
    margin-left: 1em;
}

.specialist-message p {
    font-size: 21px;
    font-weight: 400;
    line-height: 1.2em;
    color: #333;
    padding: 0 8px;
    margin: 0;
    word-break: keep-all;
    text-shadow: 2px 2px 0px rgba(255, 255, 255, .8);
}

.specialist-message p:first-child {
    margin-top: 0;
}

.specialist-image-btn {
    position: relative;
    margin-inline: auto;
    min-height: 400px;
    padding: 80px 40px;
    background-color: #F1EDEA;
}

.specialist-image-item {
    position: absolute;
}

.specialist-image-item:nth-child(1) {
    top: 0;
    left: 55%;
    z-index: 3;
    transform: translateY(-50%);
}

.specialist-image-item:nth-child(2) {
    top: -30%;
    left: 30%;
    z-index: 2;
}

.specialist-image-item:nth-child(3) {
    top: 0;
    right: 69%;
    z-index: 1;
}

.specialist-image-item img {
    width: auto;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

.specialist-image-btn .button-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    z-index: 2;
}

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

    .specialist-content {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        padding: 0 24px;
        position: static;
    }

    .specialist-profile {
        grid-row: 1;
        justify-self: center;
        writing-mode: horizontal-tb;
        text-orientation: mixed;
        text-align: right;
        padding: 40px 24px;
        border-radius: 8px;
        max-width: 500px;
        width: 100%;
        order: 1;
        position: absolute;
        bottom: -80px;
        right: 24px;
        transform: translateY(100%);
    }

    .specialist-title {
        position: absolute;
        top: 49px;
        right: 24px;
        z-index: 2;
        order: 3;
    }

    .specialist-title-vertical {
        font-size: 48px;
        padding: 16px 12px;
        letter-spacing: 0.1em;
    }

    .specialist-message {
        grid-row: 2;
        writing-mode: vertical-rl;
        text-orientation: upright;
        justify-self: start;
        margin: 0;
        max-width: 300px;
        position: relative;
        left: 34px;
        order: 2;
    }

    .specialist-message p {
        font-size: 21px;
        line-height: 1em;
    }

    .specialist-name-kanji {
        justify-content: end;
        margin-bottom: 16px;
    }

    .specialist-name-family,
    .specialist-name-given {
        font-size: 42px;
    }

    .specialist-credentials {
        text-align: right;
        margin-bottom: 16px;
    }

    .specialist-hospital {
        font-size: 26px;
        margin-bottom: 8px;
    }

    .specialist-qualification {
        font-size: 24px;
        line-height: 1.4;
    }

    .specialist-image-btn {
        padding: 40px 24px 80px;
        min-height: auto;
        background-color: #F1EDEA;
        position: relative;
    }

.specialist-image-item:nth-child(1) {
    top: 0;
    left: 65%;
}
 .specialist-image-item:nth-child(2) {
 top: 0;
     left: 30%;
 }

.specialist-image-item:nth-child(3) {
    top: 28%;
    right: auto;
    left: 18%;
}
    .specialist-image-item img {
        max-width: 227px;
        height: auto;
    }

    .specialist-image-btn .button-wrap {
        display: flex;
        justify-content: center;
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        margin-top: clamp(240px, calc(100% * ((300 - 240) / (1279 - 390)) + 240px - (390px * ((300 - 240) / (1279 - 390)))), 300px);
    }
}
 @media (max-width: 1050px) {
     .specialist-image-item:nth-child(2) {
         left: 15%;
     }
 }

 @media (max-width: 850px) {
     .specialist-image-item:nth-child(2) {
         left: 5%;
     }
.specialist-image-item:nth-child(3) {
    top: 35%;
    left: 10%;
}
    }
@media (max-width: 799px) {
    .specialist .section_title {
        font-size: clamp(32px, 5.21vw + 8px, 56px);
    }

    .specialist-content {
    }

    .specialist-doctor img {
        max-width: 90%;
    }

    .specialist-title-vertical {
        font-size: 28px;
        padding: 12px 8px;
    }

    .specialist-name-family,
    .specialist-name-given {
        font-size: 24px;
    }

    .specialist-hospital {
        font-size: 15px;
    }

    .specialist-qualification {
        font-size: 14px;
        line-height: 1.4;
    }

        .specialist-message {
        position: relative;
        left: auto;
        top: auto;
    }

    .specialist-message p {
        font-size: 14px;
        padding: 0 4px;
    }

    .specialist-profile {
        padding: 24px 16px;
    }

    .specialist-images {
        justify-content: center;
        gap: 8px;
        flex-direction: column;
        align-items: center;
    }

.specialist-image-item img {
    max-width: 100%;
    width: max(120px, 32vw);
}
}


/* インプラント専門コラム */
.implant-column {
    background-color: #FFFFFF;
    padding: 120px 0;
}

.implant-column .section_inner {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 72px;
}

.implant-column-header {
    text-align: center;
    margin-bottom: 80px;
}

.implant-column-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 24px;
}

.implant-column-circles {
    display: flex;
    gap: 2px;
}

.circle {
    width: 75.87px;
    height: 75.87px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 28px;
    color: #FFFFFF;
}

.circle-1, .circle-3 {
    background-color: #B2995F;
}

.circle-2, .circle-4 {
    background-color: #CFB985;
}



.implant-column-title-main {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 49px;
    line-height: 1.4em;
    color: #231814;
    display: block;
    margin-bottom: 8px;
}

.implant-column-title-main-c {
    color: #AD8527;
}

.implant-column-title-sub {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.4em;
    letter-spacing: 0.06em;
    color: #C6AAB8;
    display: block;
}

.implant-column-description {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 20px;
    line-height: 2em;
    color: #444444;
    margin-top: 48px;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}

.implant-column-articles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    margin-bottom: 80px;
    align-items: start;
}

.implant-column-article {
    background-color: #FFFFFF;
    border-radius: 0;
    overflow: hidden;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.implant-column-article:hover {
    transform: translateY(-5px);
}

.implant-column-article:nth-child(2) {
    margin-top: 48px;
}

.article-image {
    width: 100%;
    height: 332px;
    overflow: hidden;
}

.article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-content {
    background-color: #FFFFFF;
    padding: 40px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20%;
}

.article-title {
    font-family: var(--sans);
    font-weight: 300;
    font-size: 18.59px;
    line-height: 1.6em;
    color: #231814;
    flex: 1;
    text-align: left;
    margin: 0;
    max-width: 70%;
    margin-left: auto;
}

.article-arrow {
    flex-shrink: 0;
}

.article-arrow svg {
    width: 7.86px;
    height: 15.71px;
}



/* タブレット用レスポンシブ */
@media (max-width: 1279px) {
    .implant-column {
        background-color: #F5F3ED;
        padding: 80px 0;
    }

.implant-column .section_inner {
    max-width: 100%;
    padding: 0;
}

    .implant-column-header {
        margin-bottom: 60px;
    }

    .implant-column-badge {
        margin-bottom: 24px;
    }

    .circle {
        width: 49.23px;
        height: 49.23px;
        font-size: 18px;
    }



    .implant-column-title-main {
        font-size: 32px;
    }

    .implant-column-description {
        font-size: 20px;
        max-width: 555px;
        text-align: left;
        margin-top: 32px;
    }

    .implant-column-articles {
        gap: 0;
        margin-bottom: 60px;
    }
.implant-column-article {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

    .article-image {
        height: 158.64px;
    }

    .article-content {
        padding: 24px 20px;
    }

    .article-title {
        font-size: 16px;
    }

    .article-arrow svg {
        width: 3.75px;
        height: 7.5px;
    }
}

/* スマートフォン用レスポンシブ */
@media (max-width: 799px) {
    .implant-column {
        background-color: #F5F3ED;
        padding: 80px 0;
    }

    .implant-column .section_inner {
        padding: 0 16px;
    }

    .implant-column-header {
        margin-bottom: 40px;
    }

    .implant-column-badge {
        margin-bottom: 24px;
    }

    .circle {
        width: 49.23px;
        height: 49.23px;
        font-size: 18px;
    }



    .implant-column-title-main {
        font-size: 32px;
    }

    .implant-column-description {
        font-size: 20px;
        text-align: justify;
        margin-top: 32px;
    }

    .implant-column-articles {
        grid-template-columns: 1fr;
        gap: 0;
        margin-bottom: 40px;
        max-width: 390px;
            margin-inline: auto;
    }

    .implant-column-article {
        display: grid;
        grid-template-columns: 164.3px 1fr;
        grid-template-rows: 1fr;
        box-shadow: none;
        background: linear-gradient(180deg, #FFFFFF 0%, #EBEBEBE8 100%);
    }

        .implant-column-article:nth-child(2) {
           margin-top: 0;
        }

    .implant-column-article:last-child {
        margin-bottom: 0;
    }

    .article-image {
        grid-column: 1;
        height: 166px;
        width: 164.3px;
    }

    .article-content {
        grid-column: 2;
        padding: 16px;
        background: linear-gradient(180deg, #FFFFFF 0%, #EBEBEBE8 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
    }

    .article-title {
        font-size: 16px;
        line-height: 1.6em;
        text-align: justify;
        max-width: 149px;
    }

    .article-arrow {
        margin-top: 24px;
    }

    .article-arrow svg {
        width: 7.86px;
        height: 15.71px;
    }
}

/* case */
.case {
    background-image: url("../img/top/case_bg-pc.webp");
    background-size: cover;
    background-position: -3vw center;
    height: fit-content;
}

.case .section_inner {
    max-width: 1680px;
    width: calc(100% - 72px);
    margin-inline: auto;
    padding-bottom: 120px;
}

.case-contents {
    max-width: 1220px;
    margin-left: auto;
}

.case .section_title {
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: flex-start;
    align-items: flex-start;
}

.case .section_title>* {
    line-height: 110%;
}

.case_content {
    padding-top: 72px;
}
.case_list {
    display: flex;
    flex-wrap: wrap;
    font-family: var(--sans);
    gap: min(72px, 4vw);
}

.case_list>* {
    flex: 1 1 calc(45% - 8px);
    min-width: 0;
}


.case_list img {
    width: 100%;
    display: block;
}

.case_list figure {
    display: flex;
}

.case_list h3 {
    color: #2e2e2e;
    font-size: 30.2px;
    font-style: normal;
    font-weight: 400;
    line-height: 30.16px;
    /* 99.868% */
    letter-spacing: 2.413px;
    margin-bottom: 20px;
    font-family: var(--serif);
    display: flex;
}

.case_list h3 span {
    background-color: #b2995f;
    color: white;
    padding: 12px 40px;
    display: inline-block;
    margin-right: 12px;
}
.case_list h3 > em {
    font-style: normal;
    font-size: 24px;
    text-shadow: 0px 0px 16px rgba(255, 255, 255, 1), 0px 0px 16px rgba(255, 255, 255, 1),0px 0px 16px rgba(255, 255, 255, 1), 0px 0px 16px rgba(255, 255, 255, 1);
}
.case_list h3 i {
    font-style: normal;
    color: rgba(178, 153, 95, 1);
}
.case__white {
    padding: 16px 20px 32px;
    background: rgba(255,255,255,0.88);
}
.case_list p {
    font-weight: 400;
}
.case_section-title-c {
    color: #B4874D;
}
.case__detail {
    display: block;
    padding-left: 1em;
    text-indent: -1em;
    font-size: 15px;
    line-height: 1.6;
    color: #3E3E3E;
}
.case_desc {
    margin-top: 16px;
    font-size: 20px;
    font-weight: 400;
    font-family: var(--sans);
}

.case_note {
    display: flex;
    width: 100%;
    justify-content: start;
    margin-top: 0;
    font-family: var(--sans);
}

.case_note>* {
    min-width: 0;
}

.case_note::before {
    content: "※";
}

@media (max-width: 1279px) {
    .case {
        background-image: url("../img/top/case_bg-tb.webp");
        background-position: left top;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .case-contents-header {
        max-width: 60%;
        margin-left: auto;
    }
}

@media (max-width: 799px) {
    .case {
        background-image: url("../img/top/case_bg-sp.webp");
        position: relative;
        background-color: #F3EDE2;
    }

    .case .section_inner {
        width: 100%;
        padding-bottom: 80px;
    }

    .case-contents-header {
        max-width: 100%;
    }

    .case_content {
        position: relative;
        width: 100%;
        z-index: 5;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #F3EDE2 100%);
    }

    .case .section_title {
        gap: 8px;
        justify-content: flex-start;
        align-items: flex-start;
        writing-mode: vertical-rl;
        text-orientation: upright;
        width: fit-content;
        margin-left: auto;
        margin-right: 10%;
    }

    .case .section_title .font_64px {
        color: #231814;
        font-size: 32px;
        font-style: normal;
        font-weight: 400;
        line-height: 110%;
        letter-spacing: 7.131px;
    }

    .case .section_title .font_92px {
        color: #b4874d;
        font-size: 40px;
        font-style: normal;
        font-weight: 400;
        line-height: 100%;
        letter-spacing: 8px;
    }

    .case-contents-heaeder-text {
        background-color: rgba(255, 255, 255, 0.4);
        padding: 24px 16px;
    }

    .case_desc {
        padding-inline: 0;
        margin-bottom: 16px;
    }

    .case_note {
        position: relative;
        line-height: 1.4;
    }

    .case_content {
        /*background-color: rgba(255, 255, 255, 0.4);*/
        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #F3EDE2 100%);
        padding-inline: 16px;
        padding-top: 24px;
    }
    .case_list {
        flex-direction: column;
        gap: 40px;
        flex-wrap: nowrap;
    }

    .case_list>* {
        flex: 1 1 100%;
    }

    .case_list img, .case_list p {
        padding-inline: 0;
    }
    .case__detail .sp_only {
        display: none;
    }
    .case_list h3 span {
        padding: 0;
        text-align-last: center;
        width: 4em;
        font-size: 18px;
        padding-bottom: 0;
        margin-right: 8px;
        justify-content: center;
        display: flex;
        align-items: center;
        line-height: 1;
    }
    .case__white {
        background: unset;
        padding: 8px 0 0;
    }
    .case_list h3 > em {
        font-size: 16px;
        line-height: 1.2;
        text-shadow: unset;
    }
}

@media (max-width: 767px) {
    .case__detail .sp_only {
        display: block;
    }
    .case__detail:has(.sp_only) {
        padding-left: 0;
        text-indent: 0;
    }
}


/* attempt */
.attempt {
    overflow: hidden;
    background-color: #f5f3ed;
}

.attempt .section_inner {
    padding: 0 0 120px;
    max-width: 1760px;
    width: calc(100% - 32px);
}

@media (max-width: 1279px) {
    .attempt .section_inner {
        padding: 0 0 80px;
    }
}

@media (max-width: 1279px) {
    .attempt .section_inner {
        width: 100%;
    }
}

.attempt .section_title {
    background-image: url("../img/top/attempt_bg-pc.webp");
    background-size: cover;
    background-position: center;
    height: fit-content;
    display: grid;
    place-content: center;
    position: relative;
}

@media (max-width: 1279px) {
    .attempt .section_title {
    background-image: url("../img/top/attempt_bg-tb.webp");
    }
}

@media (max-width: 799px) {
    .attempt .section_title {
        background-image: url("../img/top/attempt_bg-sp.webp");
        aspect-ratio: 390 / 221;
    }
}

.attemplt_section_title-c {
    color: #B0A070;
}
.attempt .font_48px {
    font-weight: 400;
}
.attempt .section_title_circle {
    padding: 24px;
    color: #231814;
    font-size: 65px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: 1.95px;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.88);
    aspect-ratio: 1 / 1;
    max-width: 780px;
    height: auto;
    width: 100%;
    display: grid;
    place-content: center;
    margin: auto;
    position: relative;
    margin-top: -48px;
    margin-bottom: 48px;
}

@media (max-width: 1279px) {
    .attempt .section_title_circle {
        font-size: min(65px, 5vw);
    }
}

@media (max-width: 799px) {
.attempt .section_title_circle {
        transform: scale(1);
        transform-origin: top center;
        margin: auto;
        font-size: max(34px, 9vw);
        width: 100%;
        left: 50%;
        right: auto;
        bottom: 0;
        transform: translate(-50%, 60%);
        position: absolute;
        aspect-ratio: 1 /1;
        display: block;
        max-width: 79%;
    }

    .attempt .section_title_circle .font_48px {
        font-size: 0.8em;
    }
        .attemplt_section_title-c {
            font-size: 1.2em;
        }
}

.attempt_number {
    background: #baac82;
    color: white;
    font-size: 32px;
    font-family: var(--roboto);
    font-weight: 400;
    aspect-ratio: 1 / 1;
    width: 174px;
    height: 174px;
    display: grid;
    place-content: center;
    padding: 12px;
    text-align: center;
}

@media (max-width: 799px) {
    .attempt_number {
        font-size: 21px;
        width: 88px;
        height: 88px;
        padding: 0;
        aspect-ratio: 1 / 1;
    }
}

.attempt_number>span {
    font-size: 64px;
    font-weight: 500;
    margin-top: 24px;
    text-align: center;
}

@media (max-width: 799px) {
    .attempt_number>span {
        font-size: 32px;
        margin-top: 0;
    }
}

.attempt_alphabet {
    color: #d9d9d9;
    font-family: Arial;
    font-size: clamp(40px, 5vw + 7px, 80px);
    font-style: italic;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 2.17px;
    margin-right: 12px;
    margin-left: 12px;
}

@media (max-width: 799px) {
    .attempt .section_title_circle .section_title_alphabet {
        margin-top: -56px;
    }
}

.attempt_list {
    position: relative;
}

@media (max-width: 799px) {
.attempt_list {
        margin-top: 36vw;
    }
.attempt_list li {
    padding-inline: 16px;
}
}

.attempt_list li:nth-child(odd) {
    margin-right: 120px;
}

@media (max-width: 1279px) {
    .attempt_list li:nth-child(odd) {
        margin-right: 0;
    }
}

.attempt_list li:nth-child(odd) .attempt_number {
    position: absolute;
    left: 18px;
    top: -36px;
}

.attempt_list li:nth-child(odd) .attempt_alphabet {
    position: absolute;
    right: 0;
    top: -36px;
}

.attempt_list li:nth-child(even) {
    margin-left: 120px;
}

@media (max-width: 1279px) {
    .attempt_list li:nth-child(even) {
        margin-left: 0;
    }
}

.attempt_list li:nth-child(even) .attempt_number {
    position: absolute;
    right: 18px;
    top: -36px;
}

.attempt_list li:nth-child(even) .attempt_alphabet {
    position: absolute;
    left: 0;
    top: -36px;
}

@media (max-width: 1279px) {
    .attempt_list li:nth-child(odd) .attempt_alphabet, .attempt_list li:nth-child(even) .attempt_alphabet {
        top: 0;
        transform: translateY(-100%);
    }
}
@media (max-width: 799px) {
    .attempt_list li:nth-child(odd) .attempt_alphabet, .attempt_list li:nth-child(even) .attempt_alphabet {
        font-size: 32px;
    }
}

.attempt_list li {
    background: white;
    position: relative;
    margin-top: 96px;
}

.attempt_list h3 {
    color: #333;
    font-size: clamp(36px, 4.5vw + 7px, 62px);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 2px;
    margin-top: 64px;
}

@media (max-width: 1279px) {
    .attempt_list h3 {
        margin-top: 0;
    }
}

@media (max-width: 799px) {
    .attempt_list h3 {
        font-size: 32px;
    }
}

.attempt_image {
    margin-top: 96px;
    flex: 1;
    position: relative;
}

.attempt_image img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    min-width: 240px;
    position: relative;
    width: clamp(360px, 45.05vw + 7px, 700px);
    top: 0;
}

@media (max-width: 799px) {
    .attempt_list li:nth-child(odd) .attempt_image {
        margin-top: -30px;
        right: 20px;
        min-width: 0;
        flex: 1;
        position: absolute;
        top: -40px;
    }

    .attempt_list li:nth-child(even) .attempt_image {
        margin-top: -30px;
        left: 20px;
        min-width: 0;
        flex: 1;
        position: absolute;
        top: -40px;
    }

    .attempt_list li .attempt_image img {
        position: relative;
        aspect-ratio: 16 / 10;
        object-fit: cover;
        right: 0;
        width: 200px;
    }
}

.attempt_item_header {
    writing-mode: vertical-rl;
    position: absolute;
    top: 160px;
    right: -200px;
    text-align: end;
    font-feature-settings: initial;
}

@media (max-width: 1279px) {
.attempt_item_header {
    position: static;
    writing-mode: horizontal-tb;
    text-align: start;
}
.attempt_item_header + h3 {
    background-color: #F5F3ED;
    padding: .5em 1em;
    margin-block: .5em;
}
.attempt_item_header+h3 .font_48px, .attempt_item_header+h3 .font_64px {
    font-size: 24px;
}
}

@media (max-width: 799px) {
    h3.attempt_item_header_a {
        font-size: 20px;
    }
        h3.attempt_item_header_a .beige{
            font-size: 1.8em;
        }
    .attempt_item_header+h3 {
        padding: .5em;
    }
.attempt_item_header+h3 .font_48px, .attempt_item_header+h3 .font_64px {
    font-size: clamp(20px, 5vw, 28px);
}
}

.attempt_text {
    min-width: 560px;
}


@media (max-width: 1279px) {
    .attempt_text, .attempt_list li:nth-child(odd) .attempt_text {
        margin-top: 40px;
        max-width: 800px;
        width: 100%;
            margin-inline: auto;
    }
}

@media (max-width: 799px) {
    .attempt_text {
        min-width: 300px;
        flex: 2;
        position: relative;
        left: 0;
        right: 0;
        margin: 0;
    }
        .attempt_text, .attempt_list li:nth-child(odd) .attempt_text {
            margin-top: 0;
        }

}

.attempt_subtitle {
    color: #444;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 200%;
}

@media (max-width: 799px) {
    .attempt_subtitle {
        padding-top: 12px;
    }
}

.attempt_desc {
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 200%;
    word-break: normal;
    overflow-wrap: normal;
}

@media (max-width: 799px) {
    .attempt_desc {
        padding-top: 12px;
        font-size: clamp(16px, 4.1vw, 22px);
    }
}

.attempt_item_header-child {
    font-size: 0.4em;
    line-height: 1.5;
    font-family: var(--sans)
}

@media (max-width: 1279px) {
    .attempt_item_header-child {
            font-size: 0.25em;
    }
}

.attempt_border {
    border: none;
    height: 2px;
    border-bottom: 1px solid #444;
    display: block;
    margin: 32px auto;
    appearance: none;
}

@media (max-width: 799px) {
.attempt_border {
    margin-block: 24px
}
}


.attempt_list li .attempt_item_content {
    display: flex;
    position: relative;
    gap: clamp(16px, 1.25vw + 7px, 48px);
    max-width: calc(100% - 6%);
    margin-left: auto;
}

.attempt_list li:nth-child(odd) .attempt_item_content {
    left: 200px;
    margin-left: 0;
    margin-right: auto;
}

.attempt_list li:nth-child(even) .attempt_item_content {
    flex-direction: row-reverse;
    right: 200px;
}

@media (max-width: 1279px) {
        .attempt_list li:nth-child(odd) .attempt_item_content, .attempt_list li:nth-child(even) .attempt_item_content {
        flex-direction: column-reverse;
        left: 0;
            right: 0;
            margin-inline: auto;
            max-width: 100%;
            padding-inline: 24px;
        }
}

@media (max-width: 799px) {
    .attempt_list li:nth-child(odd) .attempt_item_content {
        right: 0;
        left: 0;
        padding: 24px;
    }
        .attempt_list li:nth-child(odd) .attempt_item_content, .attempt_list li:nth-child(even) .attempt_item_content {
        right: 0;
        left: 0;
        padding: 0;
    }
}
.attempt_item_content > * {
    flex: 1;
}

.attempt_content_clm {
    display: flex;
    gap: 24px;
    margin-bottom: 64px;
    align-items: stretch;
    justify-content: space-between;
}

.attempt_content_clm>* {
    min-width: 0;
    flex: 1 1 calc(50% - 24px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
}

.attempt_content_clm h4 {
    color: #464646;
    text-align: center;

    font-style: normal;
    font-weight: 350;
    line-height: 140%;
    letter-spacing: 2.17px;
    flex: 0 0 100px;
    display: grid;
    place-content: center;
    font-family: var(--sans);
    font-size: clamp(16px, 1vw + 7px, 27px);
}

.attempt_content_clm_text {
    background: #f5f3ed;
    padding: 32px;
    flex: 1 1 auto;
    word-break: normal;
    overflow-wrap: normal;
    font-size: clamp(13px, 1.62vw + 7px, 16px);
}

@media (max-width: 1279px) {
    .attempt_content_clm {
        max-width: 640px;
        flex-direction: column;
        margin-inline: auto;
    }
    .attempt_content_clm>* {
        display: grid;
        grid-template-columns: calc(35% - 8px) calc(65% - 8px);
        grid-template-rows: auto 1fr auto;
        gap: 16px;
    }
    .attempt_content_clm div>picture {
        grid-row: 1 / 4;
        grid-column: 1;
    }

    .attempt_content_clm div>h4 {
        grid-row: 1;
            grid-column: 2;
            place-content: baseline;
        text-align: left;
        }
    .attempt_content_clm div>.attempt_content_clm_text {
        grid-row: 2;
            grid-column: 2;
        }
        .attempt_content_clm div>.attempt_a_link {
        grid-row: 3;
            grid-column: 2;
        }

    }

@media (max-width: 799px) {
    .attempt_content_clm {
        flex-direction: column;
        justify-content: space-between;
        align-items: stretch;
        padding: 0;
        margin-bottom: 40px;
    }

    .attempt_content_clm>* {
        display: grid;
        grid-template-columns: calc(35% - 8px) calc(65% - 8px);
        grid-template-rows: auto 1fr auto;
        gap: 8px 16px;
    }

    .attempt_content_clm figure {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .attempt_content_clm figure img {
        width: 110px;
        height: 124px;
        object-fit: cover;
        object-position: center;
        display: block;
    }

    .attempt_content_clm h4 {
        text-align: left;
        grid-column: 2;
        grid-row: 1;
        display: block;
        width: 100%;
        font-size: 16px;
    }

    .attempt_content_clm_text {
        grid-column: 2;
        grid-row: 2;
        text-align: left;
        padding: 12px;
        line-height: 1.5;
    }
}

.attempt_item_content_img img {
    object-fit: cover;
    aspect-ratio: 16 / 9;
}

.attempt_content_clm figure {
    flex: 0 0 140px;
}

.attempt_item_mimg {
    margin-top: 64px;
}

@media (max-width: 1279px) {
    .attempt_item_mimg {
        margin-top: 0;
        max-width: calc(100% - 240px);
    }
    .attempt_list li:nth-child(odd) .attempt_item_mimg {
        margin-left: auto;
    }
    attempt_list li:nth-child(even) .attempt_item_mimg {
        margin-right: auto;
    }
}

@media (max-width: 799px) {
.attempt_item_mimg {
        max-width: calc(100% - 120px);
    }
}

.attempt_a_link {
    font-weight: 500;
    text-align: right;
}

.attempt_a_link::after {
    content: "";
    display: inline-block;
    width: 16.41px;
    height: 16.41px;
    background-color: #2E2E2E;
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg width='9' height='10' viewBox='0 0 9 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 2.5C2.5 2.2 2.7 2 3 2C3.2 2 3.4 2.1 3.5 2.2L7.3 4.7C7.6 4.9 7.6 5.1 7.3 5.3L3.5 7.8C3.4 7.9 3.2 8 3 8C2.7 8 2.5 7.8 2.5 7.5V2.5Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 9px 10px;
    margin-left: 8px;
    vertical-align: middle;
}


/* team */
.team {
    overflow: hidden;
    background-image: url("/assets/img/top/team_bg-pc.webp");
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #ebebeb;
    padding-bottom: 120px;
}

.team_clm_wrapper {
    margin-top: 80px;
}
.team .section_title {
    text-align: left;
}

.team_image {
    position: relative;
}

.team_image .team_image_circle {
    position: absolute;
    bottom: -360px;
    right: 12%;
    margin: auto;
    max-width: 600px;
    width: 100%;
    z-index: 2;
}

.team_content {
    position: relative;
}

.team_content::before {
    position: static;
    display: block;
    width: 100%;
    aspect-ratio: 1920 / 872;
    z-index: 0;
    content: "";
}

.team_section_inner {
    padding: 0;
    max-width: 1280px;
    width: calc(100% - 80px);
}

.team_clm {
    display: flex;
    align-items: center;
    margin-bottom: 80px;
}

.team_clm_text {
    flex: 2;
}

.team_clm_img {
    flex: 1;
    max-width: 500px;
}

.team_list-title {
    font-size: 27px;
    font-family: var(--sans);
    border-bottom: 1px solid #C5C5C5;
    padding-bottom: .25em;
}

.team_list {
    margin-top: 32px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.team_list>li {
    display: flex;
    gap: 24px;
    align-items: center;
    font-size: min(32px, 2.9vw);
    flex: 0 0 calc(50% - 12px);
}

.team_list>li::before {
    display: block;
    background-position: center;
    background-size: cover;
    content: "";
    background-image: url("/assets/img/top/team_icon_check.svg");
    width: auto;
    height: 1em;
    aspect-ratio: 14 / 23;
}
.team_list-text-sub {
    font-size: .8em;
}

.team_list_name-sub {
    font-size: 0.75em;
}

.team h3 {
    color: #231814;
    font-size: clamp(28px, 1.75vw + 7px, 52px);
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: 1px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.team_footer_list {
    position: relative;
    display: flex;
    gap: 24px;
    margin: auto;
    margin-top: 56px;
}

.team_footer_list>* {
    display: flex;
    gap: 12px;
    background-color: white;
    padding: 12px;
    align-items: center;
    justify-content: space-between;
    flex: 1;
}

.team_footer_list_sub {
    font-size: 0.75em;
}
.team_footer_visual {
    margin-top: -80px;
}

.team_font_14px {
    font-size: clamp(10px, 1.25vw + 7px, 14px);
    line-height: 130%;
    font-style: normal;
    font-weight: 300;
}

.team_font_22px {
    font-size: clamp(14px, 1.75vw + 7px, 20px);
    line-height: 110%;
    font-weight: 300;
    text-align: left;
}

.team_font_48px {
    font-size: clamp(32px, 4vw + 7px, 40px);
    line-height: 130%;
    font-weight: 300;
    white-space: nowrap;
}

.team_font_52px {
    font-size: clamp(34px, 4.25vw + 7px, 52px);
    line-height: 130%;
    font-style: normal;
    font-weight: 300;
}

.team_font_82px {
    font-size: clamp(36px, 4.5vw + 7px, 74px);
    line-height: 130%;
    font-style: normal;
    font-weight: 300;
}

.team_font_92px {
    font-size: clamp(60px, 7.5vw + 7px, 92px);
    line-height: 130%;
    font-style: normal;
    font-weight: 300;
}

.team_font_22px {
    white-space: nowrap;
}
.team_footer_list_title-c {
    color: var(--primary-color);
}
.team_section_title {
    letter-spacing: -0.1em;
}
@media (max-width: 1279px) {
    .team {
        background-image: url("/assets/img/top/team_bg-tb.webp");
    }

.team_content::before {
    aspect-ratio: 1536 / 872;
}

.team_section_inner {
    max-width: 800px;
}
.team_clm {
    flex-direction: column;
    margin-bottom: 0;
}
    .team_footer_list>* {
        flex-direction: column;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0;
        text-align: center;
        padding: 8px 4px;
    }
.team_footer_list {
    gap: max(16px, 2.1vw);
}
.team_font_82px {
    font-size: max(36px, 4.5vw);
}
.team_font_48px {
    font-size: max(22px, 2.7vw);
}
.team_font_22px {
    font-size: max(14px, 1.7vw);
}

}

@media (max-width: 767px) {
    .team {
            background-image: url("/assets/img/top/team_bg-sp.webp");
        }
.team_content::before {
    aspect-ratio: 780 / 537;
}
.team_section_inner {
    max-width: 560px;
    width: calc(100% - 48px);
}
.team_image .team_image_circle {
        position: absolute;
        bottom: -100px;
        right: 5%;
        margin: auto;
        max-width: 240px;
        width: 100%;
        z-index: 2;
    }
    .team_clm {
        gap: 0;
        display: block;
    }
    .team_clm_img {
        margin-top: 16px;
        max-width: 300px;
            justify-self: center;
    }
        .team_list {
            gap: 16px;
            margin-top: 24px;
            grid-template-columns: auto 1fr;
        }
    .team_list>li {
        gap: 10px;
        font-size: max(16px, 4vw);
        flex: 0 0 calc(50% - 8px);
    }
    .team_list>li::before {
    }
    .team h3 {
        font-size: 24px;
        text-align: center;
        margin-top: 24px;
    }
    ul.team_footer_list {
        flex-wrap: wrap;
    }
    .team_footer_list>* {
        min-width: calc(50% - 40px);
    }

}









/* 診療案内 */
.medical-services {
    background-color: #ffffff;
    background-image: linear-gradient(90deg, #0000000a 1px, transparent 1px), linear-gradient(#0000000a 1px, transparent 1px);
    background-position: 0 0;
    background-size: 10px 10px;
    padding: 120px 0;
    position: relative;
}

.medical-services .section_inner {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    padding: 0 16px;
}

.medical-services-header {
    text-align: center;
}

.medical-services-title {
    line-height: 1.2;
    font-size: inherit;
}
.medical-services-title-main {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 68px;
    letter-spacing: 0.032em;
    color: #231814;
}

.medical-services-title-sub {
    font-size: .75em;
}

.medical-services-title-c {
    color: var(--primary-color);
}

.medical-services-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: min(60px, 3.3vw);
    max-width: 1650px;
    margin: 0 auto;
    align-items: start;
}

.medical-card {
    background: #FFFFFF;
    border: 1px solid #60A8B0;
    position: relative;
    padding: 56px min(56px, 3vw) 72px;
}

.medical-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #60a8b066;
    z-index: -1;
    transform: rotate(4deg);
    transform-origin: 10% 90%;
}

.medical-card-adult {
    margin-top: 0;
}

.medical-card-adult {
    margin-top: 100px;
    padding-bottom: 40px;
}

.medical-card-elderly {
    margin-top: 0;
}

.medical-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.medical-card-header {
    background: #FFFFFF;
    text-align: center;
    margin-bottom: 24px;
}

.medical-card-image {
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-bottom: 24px;
}

.medical-card-description {
    font-family: var(--sans);
    font-weight: 300;
    font-size: 16px;
    line-height: 2;
    color: #231816;
    margin: 0;
    background: #FFFFFF;
}

.medical-card-title {
    font-family: var(--sans);
    font-weight: 400;
    font-size: 34.3px;
    line-height: 0.9em;
    color: #000000;
    margin-bottom: 8px;
}

.medical-card-subtitle {
    font-family: var(--sans);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.06em;
    color: #D2B887;
}

.medical-card-adult .medical-card-subtitle {
    color: #D2B887;
}

.medical-card-child .medical-card-subtitle {
    color: #E2A1C2;
}

.medical-card-elderly .medical-card-subtitle {
    color: #7CC1D2;
}


/* タブレット用レスポンシブスタイル */
@media (max-width: 1279px) {
    .medical-services {
        padding: 80px 0;
    }

    .medical-services .section_inner {
        padding: 0 40px;
    }

    .medical-services-title-main {
        font-size: 56px;
    }

    .medical-services-header {
        margin-bottom: 60px;
    }

    .medical-services-cards {
        grid-template-columns: 1fr;
        gap: 40px;
        max-width: 800px;
    }

    .medical-card {
        display: grid;
        grid-template-columns: 180px 1fr;
        grid-template-rows: auto auto;
        gap: 8px 24px;
        max-width: 675px;
        margin: 0 auto;
        padding: 24px 32px 32px 24px;
    }

    .medical-card::before {
        transform-origin: center;
    }

    .medical-card-adult,
    .medical-card-child,
    .medical-card-elderly {
        margin-top: 0;
    }

    .medical-card-header {
        grid-column: 2;
        grid-row: 1;
        display: flex;
            gap: 16px;
            align-items: center;
        margin-bottom: 0;
    }

    .medical-card-image {
        grid-column: 1;
        grid-row: 1 / 3;
        margin-bottom: 0;
    }

    .medical-card-description {
        grid-column: 2;
        grid-row: 2;
    }

    .medical-card-title {
        font-size: 30px;
        margin-bottom: 0;
    }

    .medical-card-subtitle {
        font-size: 19.5px;
    }

    .medical-card-description {
        font-size: 17px;
    }
    .medical-card {
        padding: 24px 20px 29px 24px;
    }
}

/* スマートフォン用レスポンシブスタイル */
@media (max-width: 767px) {
    .medical-services {
        padding: 80px 0;
    }

    .medical-services .section_inner {
        padding: 0 16px;
    }

    .medical-services-title-main {
        font-size: 32px;
    }

    .medical-services-header {
    }

    .medical-services-cards {
        gap: 30px;
        max-width: 390px;
    }

    .medical-card {
        grid-template-columns: auto;
        grid-template-rows: auto auto auto;
        max-width: 390px;
        gap: min(24px, 3.1vw);
    }

    .medical-card-header {
        grid-column: 1;
        grid-row: 1;
        gap: 8px;
        flex-direction: column;
    }

    .medical-card-image {
        grid-column: 1;
        grid-row: 2;
        height: auto;
        width: 100%;
    }

    .medical-card-description {
        grid-column: 2;
        grid-row: 2;
    }

    .medical-card-title {
        font-size: 20px;
    }

    .medical-card-subtitle {
        font-size: 13px;
    }

    .medical-card-description {
        font-size: 14px;
        grid-column: 1;
        grid-row: 3;
    }
}

/* クリニック案内 */
.clinic-menu {
    background-color: #F8F8F8;
    padding: 120px 0;
}

.clinic-menu .section_inner {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 60px;
}

.clinic-menu-header {
    text-align: center;
    margin-bottom: 80px;
}

.clinic-menu-title-sub {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 25px;
    line-height: 1.44em;
    color: #373737;
    display: block;
}

.clinic-menu-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 40px;
    max-width: 1800px;
    margin: 0 auto;
}

.clinic-menu-item {
    position: relative;
    transition: transform 0.3s ease;
}

.clinic-menu-link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.clinic-menu-link:hover {
    transform: translateY(-5px);
}

.clinic-menu-image {
    position: relative;
    width: 100%;
    aspect-ratio: 274 / 270;
    overflow: hidden;
    border-radius: 0;
}

.clinic-menu-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1;
    transition: opacity 0.3s ease;
}

.clinic-menu-link:hover .clinic-menu-image::before {
    opacity: 0;
}

.clinic-menu-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.clinic-menu-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--sans);
    font-weight: 500;
    font-size: 18px;
    line-height: 2em;
    color: #FFFFFF;
    text-align: center;
    margin: 0;
    z-index: 2;
    white-space: nowrap;
}

/* タブレット用レスポンシブスタイル */
@media (max-width: 1279px) {
    .clinic-menu {
        padding: 80px 0;
    }

    .clinic-menu .section_inner {
        padding: 0 40px;
    }

    .clinic-menu-header {
        margin-bottom: 60px;
    }

    .clinic-menu-title-sub {
        font-size: 25px;
    }

    .clinic-menu-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 32px;
        max-width: 800px;
    }

    .clinic-menu-image {
        aspect-ratio: 221 / 218;
    }
}

/* スマートフォン用レスポンシブスタイル */
@media (max-width: 799px) {
    .clinic-menu {
        padding: 80px 0;
    }

    .clinic-menu .section_inner {
        padding: 0 16px;
    }

    .clinic-menu-header {
        margin-bottom: 40px;
    }

    .clinic-menu-title-sub {
        font-size: 20px;
        line-height: 1.2em;
    }

    .clinic-menu-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 16px;
        max-width: 390px;
    }

    .clinic-menu-image {
        aspect-ratio: 109 / 108;
    }

    .clinic-menu-text {
        font-size: 14px;
        line-height: 2em;
        bottom: 10px;
    }
}


/* ============================================
   PICK UP Section
   ============================================ */

.pickup {
background-color: #ffffff;
    background-image: linear-gradient(90deg, #0000000a 1px, transparent 1px), linear-gradient(#0000000a 1px, transparent 1px);
    background-position: 0 0;
    background-size: 7px 7px;
    position: relative;
}

.pickup .section_inner {
    padding: 120px 0;
}
.pickup-header {
    text-align: center;
    margin-bottom: 80px;
}

.pickup-underline {
    width: 71px;
    height: 1px;
    background-color: #444444;
    margin: 20px auto 0;
}

/* 治療関連画像グリッド */
.pickup-treatment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1600px;
    width: calc(100% - 32px);
    margin: 0 auto 40px;
}

/* バナー画像グリッド */
.pickup-banner-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 1410px;
    width: calc(100% - 32px);
    margin: 0 auto;
}

.pickup-item {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.pickup-item:hover {
    transform: translateY(-5px);
}

.pickup-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 治療関連画像のスタイル */
.pickup-treatment,
.pickup-orthodontics,
.pickup-pediatric {
    aspect-ratio: 486 / 490;
}

/* バナー画像のスタイル */
.pickup-banner {
    aspect-ratio: 672 / 269;
}


/* タブレット対応 */
@media (max-width: 1279px) {
    .pickup .section_inner {
        padding: 80px 0;
    }
    .pickup-header {
        margin-bottom: 60px;
    }

    .pickup-treatment-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
        max-width: 800px;
        width: calc(100% - 48px);
        margin: 0 auto 32px;
    }

    .pickup-banner-grid {
        gap: 32px;
        max-width: 800px;
        width: calc(100% - 48px);
        margin: 0 auto;
    }

    .pickup-treatment,
    .pickup-orthodontics,
    .pickup-pediatric {
        aspect-ratio: 225 / 226;
    }

    .pickup-banner {
        aspect-ratio: 351 / 140;
    }
}

/* スマートフォン対応 */
@media (max-width: 799px) {
    .pickup-header {
        margin-bottom: 40px;
    }

    .pickup-treatment-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, auto);
        gap: max(16px, 4.1vw);
        max-width: 375px;
        width: calc(100% - 32px);
        margin: 0 auto max(16px, 4.1vw);
    }

    .pickup-treatment-grid .pickup-item:nth-child(3) {
        grid-column: 1 / 3;
        justify-self: center;
        width: calc(50% - 8px);
    }

    .pickup-banner-grid {
        grid-template-columns: 1fr;
        gap: max(16px, 4.1vw);
        max-width: 375px;
        width: calc(100% - 32px);
        margin: 0 auto;
    }

    .pickup-treatment,
    .pickup-orthodontics,
    .pickup-pediatric {
        aspect-ratio: 321 / 322;
    }

    .pickup-banner {
        aspect-ratio: 292 / 117;
    }
}

.instagram_section_inner {
    padding-block: 120px;
}

.instagram-title-img,
.instagram-contents-img {
    width: auto;
    margin-inline: auto;
}

.instagram-title-img {
    max-width: 255px;
}

.instagram-section_title {
    margin-bottom: 40px;
}

.instagram-contents {
    width: calc(100% - 32px);
    margin-inline: auto;
}

.instagram__area-list {
    max-width: 1600px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.gallery-item img {
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center;
}

/* タブレット対応 */
@media (max-width: 1279px) {
.instagram__area-list {
    grid-template-columns: repeat(4, 1fr);
}
.gallery-item:nth-child(n+9) {
    display: none;
}
}

/* スマートフォン対応 */
@media (max-width: 799px) {
    .instagram_section_inner {
            padding-block: 80px;
        }

        .instagram-title-img {
            max-width: 170px;
        }
.instagram__area-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.gallery-item:nth-child(n+9) {
    display: block;
}
.gallery-item:nth-child(n+10) {
    display: none;
}
}

/* ============================================
   NEWS Section
   ============================================ */

.news {
    background-color: #F8F8F8;
    position: relative;
}

.news .section_inner {
    padding: 120px 0;
    max-width: 1400px;
    width: calc(100% - 80px);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
}

.news-header {
    text-align: left;
    flex-shrink: 0;
    width: 200px;
}

.news-title {
    font-family: Tinos, serif;
    font-size: 36px;
    font-weight: 400;
    letter-spacing: 0.1em;
    color: #BBBBBB;
    margin-bottom: 20px;
}

.news-subtitle {
    font-family: var(--sans);
    font-size: 19px;
    font-weight: 400;
    line-height: 1.58;
    color: #3B3B3B;
    margin: 0;
}

.news-content {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 60px;
    flex: 1;
    position: relative;
}

.news-articles-container {
    flex: 1;
    max-width: 555px;
    position: relative;
}

.news-article {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.news-article.active {
    opacity: 1;
    visibility: visible;
    position: relative;
}

.news-date-badge {
    background-color: #B2995F;
    border-radius: 4px;
    padding: 6px 28px;
    flex-shrink: 0;
}

.news-date {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    color: #FFFFFF;
}

.news-item {
    flex: 1;
}

.news-item-title {
    font-family: var(--sans);
    font-size: 19px;
    font-weight: 500;
    line-height: 1.58;
    color: #3B3B3B;
    margin: 0 0 12px 0;
}

.news-item-text {
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 400;
    line-height: 2;
    color: #3B3B3B;
    margin: 0;
}

.news-decoration {
    position: relative;
    flex-shrink: 0;
}

.news-icon {
    width: 25px;
    height: 39px;
    position: relative;
}

.news-icon-top,
.news-icon-bottom {
    width: 25px;
    height: 14px;
    background-color: #B2995F;
    position: absolute;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.news-icon-top:hover,
.news-icon-bottom:hover {
    background-color: #9A8350;
}

.news-icon-top {
    top: 0;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.news-icon-bottom {
    bottom: 0;
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}

.news-content::before {
    content: '';
    position: absolute;
    left: -30px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 169px;
    background-color: #D3CCCB;
}

.news-button {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.news-link {
    display: inline-block;
    padding: 24px 54px;
    border: 1px solid #231816;
    font-family: var(--sans);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.76;
    color: #231816;
    text-decoration: none;
    transition: all 0.3s ease;
}

.news-link:hover {
    background-color: #231816;
    color: #FFFFFF;
}

/* タブレット対応 */
@media (max-width: 1279px) {
    .news .section_inner {
        padding: 80px 0;
        width: calc(100% - 48px);
        flex-direction: column;
        align-items: center;
        gap: 60px;
    }

    .news-header {
        text-align: center;
        width: auto;
    }

    .news-content {
        gap: 32px;
    }

    .news-button {
        justify-content: center;
    }

    .news-articles-container {
        max-width: 434px;
    }

    .news-article {
        align-items: flex-start;
        gap: 16px;
    }

    .news-date-badge {
        order: -1;
    }

    .news-item {
        text-align: left;
        order: 0;
    }

    .news-decoration {
        order: 1;
    }

    .news-content::before {
        display: none;
    }

    .news-link {
        padding: 24px 54px;
        font-size: 15px;
    }

}
/* スマートフォン対応 */
@media (max-width: 799px) {
    .news .section_inner {
        padding: 60px 0 80px;
        width: calc(100% - 32px);
        gap: 40px;
    }

    .news-content {
        gap: 24px;
    }

    .news-article {
        align-items: flex-start;
        gap: 12px;
    }

    .news-item {
        max-width: none;
    }

    .news-item-text {
        text-align: left;
    }

    .news-link {
        padding: 24px 54px;
        font-size: 15px;
        width: 199px;
        text-align: center;
    }

}

.clinic-services {
    background-color: #fff;
}
.clinic-services_list li:nth-child(odd) .attempt_item_header {
    right: auto;
    left: -200px;
}

.clinic-services .attempt_alphabet {
    color: #DFD7BF;
}

.clinic-services .attempt_content_clm {
    margin-bottom: 0;
}

.clinic-services .attempt_item_header {
    text-align: start;
    line-height: 1.2;
}
.attempt_item_header-sub {
    font-size: 0.5em;
}

.clinic-services_item_header .beige {
    margin-inline-start: 0.25em;
}

.clinic-services .attempt_number {
    font-size: 26px;
    line-height: 1.5;
}

@media (max-width: 799px) {
    .clinic-services .attempt_list {
        margin-top: 0.25em;
    }
}

@media (max-width: 799px) {
.clinic-services .attempt_number {
    font-size: 15px;
}
.clinic-services .attempt_list {
    margin-top: 0;
}
.attempt_item_header-sub {
    font-size: inherit;
}
.clinic-services_item_header .beige {
    margin-inline-start: 0;
    display: block;
}
}


/* ============================================
   Reservation Calendar Styles
   ============================================ */

.reservation-calendar {
    top: 0;
    right: 0;
    z-index: 10;
    margin-top: 0;
    margin-right: 100px;
    z-index: 11;
    width: 582px;
    height: 220px;
    background: transparent;
    transition: 0.3s ease-in-out;
    z-index: 1000;
    display: flex;
}
.reservation-calendar.calendar-visible {
    right: 0;
    transform: translateX(calc(-100% + 84px));
}

.calendar-container {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    max-width: 100%;
    display: flex;
}

.reservation-calendar.calendar-visible .calendar-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 24px;
    color: #666;
    z-index: 1;
}
.calendar-top-header {
    display: flex;
    margin-bottom: 0;
    background: #FFFFFF;
    position: relative;


    justify-content: center;
    align-items: flex-start;
    min-height: 220px;
    padding: 16px 0;
    width: 82px;
    border-radius: 40px 0 0 0;
    transition: background-color 0.3s ease;
    cursor: pointer;
    flex-shrink: 0;
}

.calendar-top-header:hover {
    background-color: rgba(255, 255, 255, 1);
}

.calendar-top-header::after {
    content: '';
    position: absolute;
    top: 24px;
    right: -1px;
    width: 1px;
    height: calc(100% - 48px);
    background: #BFBFBF;
    display: block;
}

.calendar-left-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


.calendar-title-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.calendar-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.calendar-icon-img {
    width: 100%;
    height: 100%;
    display: block;
}

.calendar-main-title {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1em;
    color: #4D4D4D;
    text-align: center;
    margin: 0;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    line-height: 1.2;
    width: 15px;
    height: 140px;
    white-space: nowrap;
}

.calendar-content {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    padding: 24px 64px 24px 24px;
    border-top: none;
    position: relative;
}

.calendar-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    line-height: 1;
}

.calendar-table-center {
    display: flex;
    align-items: center;
    gap: 1em;
    flex: 1;
    justify-content: space-around;
}

.calendar-table-title {
    font-family: 'Noto Serif JP', sans-serif;
    font-size: 17px;
    color: #000000;
    font-weight: 400;
}

.calendar-subtitle {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 12px;
    color: #444444;
    margin: 0;
    text-align: right;
}

@media (max-width: 1279px) {
    .calendar-wrapper {
        width: 70px;
    }

    .reservation-calendar {
        width: 570px;
    }

    .calendar-top-header {
        width: 70px;
    }

    .calendar-container {
        width: 500px;
    }
    .reservation-calendar.calendar-visible {
        transform: translateX(calc(-100% + 70px));
    }
}

@media (max-width: 799px) {
    .reservation-calendar {
        width: auto;
        height: auto;
    }
        .calendar-top-header {
            width: 3em;
            padding-block: 32px;
        }
        .calendar-top-header::after {
            right: 0;
        }
    .calendar-container {
        width: auto;
        height: 100%;
        border-radius: 8px 8px 0 0;
        margin-top: 0;
    }
    .calendar-close-btn {
        display: none;
    }
        .calendar-table-header {
            gap: 0;
            margin-bottom: 8px;
        }
        .calendar-table-title {
            font-size: 12px;
        }
}

.date-number {
    font-family: 'Noto Serif JP', sans-serif;
    font-size: 14px;
    color: #444444;
    display: block;
    line-height: 1;
}

.date-day {
    position: relative;
}

.day-bg {
    display: inline-block;
    background: #F0F0F0;
    border: 1px solid #AAAAAA;
    padding: 4px 8px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 10px;
    color: #444444;
    min-width: 40px;
    text-align: center;
    line-height: 1.4;
}

.date-day.saturday .day-bg {
    background: #1F76A8;
    color: #FFFFFF;
}


.reservation-table {
    width: calc(100% + 16px);
    border-collapse: separate;
    border-spacing: 8px;
    margin-inline: -8px;
    background: transparent;
}

.reservation-table th,
.reservation-table td {
    border: none;
    text-align: center;
    vertical-align: middle;
    position: relative;
    padding: 0;
    width: calc((100% - 48px) / 7);
    height: auto;
    aspect-ratio: 1 / 1;
}

.time-header {
    border: none;
}

.reservation-table th {
    font-family: 'Noto Serif JP', sans-serif;
    font-size: 14px;
    color: #444444;
    font-weight: 400;
    padding: 0;
    vertical-align: top;
}

.date-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    height: 100%;
    justify-content: space-between;
}

.date-number {
    font-family: 'Noto Serif JP', sans-serif;
    font-size: 14px;
    color: #444444;
    font-weight: 400;
}

.day-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 100%;
}

.day-bg {
    display: inline-block;
    background: #F0F0F0;
    border: none;
    padding: 2px 12px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 10px;
    color: #444444;
    min-width: 30px;
    text-align: center;
    width: 100%;
}

.day-bg.saturday {
    background: #1F76A8;
    color: #FFFFFF;
}

.header-phone-icons {
    display: flex;
    gap: 2px;
    margin-top: 2px;
}

.header-phone-icons .phone-icon {
    width: 8px;
    height: 8px;
}

.slot-cell .phone-icon {
    width: 12px;
    height: 12px;
}

.reservation-table td.time-label {
    background: transparent;
    padding: 0;
}

.reservation-table td.slot-cell {
    background: transparent;
    padding: 0;
}

/* ボックススタイル */
.time-box {
    display: flex;
    width: 100%;
    height: 100%;
    background: #F8F8F8;
    border: 1px solid #BFBFBF;
    border-radius: 4px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px;
    color: #444444;
    font-weight: 400;
    align-items: center;
    justify-content: center;
}

.slot-box {
    display: flex;
    width: 100%;
    border: 1px solid #BFBFBF;
    border-radius: 4px;
    font-size: 14px;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.available-box {
    background: #FFFFFF;
    border-color: #AAAAAA;
    color: #231816;
    cursor: pointer;
}

.unavailable-box {
    background: #F0F0F0;
    border-color: #C9C9C9;
    color: #6E6E6E;
}

.phone-box {
    background: #F0F0F0;
    border-color: #C9C9C9;
    color: #6E6E6E;
}
.slot-box, .time-box {
    height: 40px;
}
.slot-cell.clickable .available-box:hover {
    background: #B2995F;
    color: #FFFFFF;
    border-color: #B2995F;
}

.calendar-legend {
    display: flex;
    align-items: center;
    gap: 8px;
}
.legend-item {
    display: flex;
}
.legend-phone-icon {
    width: 12px;
    height: 12px;
}

.legend-text {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 11px;
    color: #4D4D4D;
    line-height: 1.2;
}



.nav-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nav-btn:hover {
    background: #B2995F;
}

.nav-btn-icon {
    width: 12px;
    height: 12px;
    transition: filter 0.3s ease;
}

.nav-btn:hover .nav-btn-icon {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}


.calendar-onepoint {
    position: absolute;
    bottom: 0;
    right: 8px;
    z-index: 1;
}

.onepoint-image {
    width: auto;
    height: auto;
    display: block;
    opacity: 0.8;
}

@media (max-width: 1279px) {
    .reservation-calendar {
        position: relative;
        margin: 0 auto;
        display: flex;
        justify-content: center;
    }
}

/* スマートフォン: セクションとして表示 */
@media (max-width: 799px) {
    .calendar-content {
        padding: 24px 16px 64px 8px;
    }
        .reservation-table {
            margin-inline: -4px;
                border-spacing: 4px;
        }
}

/* ============================================
   Fixed Sidebar Styles
   ============================================ */

.fixed-sidebar {
    position: fixed;
    right: -82px;
    bottom: 24px;
    z-index: 999;
    width: 82px;
    transition: 0.3s ease-in-out;
}
.fixed-sidebar.show {
    right: 0;
}

.sidebar-reservation {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

.reservation-header {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 220px;
    padding: 16px 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 40px 0 0 0;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.3s ease;
}

.reservation-header:hover {
    background-color: rgba(255, 255, 255, 1);
}


.reservation-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.reservation-text {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1em;
    color: #4D4D4D;
    text-align: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    margin: 0;
    width: 15px;
    height: 140px;
    white-space: nowrap;
}

.reservation-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    gap: 24px;
    padding: 16px 0;
    background-color: #B2995F;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.3s ease;
}

.reservation-button:hover {
    background-color: #9A8350;
}

.web-icon {
    width: 36px;
    height: 25px;
}

.web-reservation-text {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.2em;
    color: #FFFFFF;
    text-align: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    margin: 0;
    width: 12px;
    height: 84px;
}

.sidebar-instagram {
    width: 82px;
    height: 78px;
    background: linear-gradient(135deg, #833AB4 0%, #FD1D1D 25%, #FCB045 50%, #FFDC80 75%, #833AB4 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Instagram背景画像がある場合 */
.sidebar-instagram::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
/*    background: url('assets/img/instagram-bg.jpg') center/cover; */
    opacity: 0.6;
    z-index: 1;
}

.instagram-icon {
    position: relative;
    z-index: 2;
}

.sidebar-instagram:hover {
    transform: scale(1.05);
}

.instagram-icon {
    width: 48px;
    height: 48px;
}

/* タブレット対応 */
@media (max-width: 1279px) {
    .fixed-sidebar {
        width: 70px;
    }

    .reservation-text {
        font-size: 14px;
    }

    .reservation-button {
    }

    .web-reservation-text {
        font-size: 15px;
    }

    .sidebar-instagram {
        width: 70px;
        height: 66px;
    }

    .instagram-icon {
        width: 40px;
        height: 40px;
        position: relative;
        z-index: 2;
    }
    .fixed-sidebar {
        bottom: unset;
        top: 50%;
        transform: translateY(-50%);
    }
    .reservation-button, .sidebar-instagram {
        display: none;
    }
}

/* スマートフォンでは非表示 */
@media (max-width: 799px) {
    .fixed-sidebar {
        position: absolute;
            top: 145vw;
            bottom: auto;
            left: 0;
            right: unset;
                width: 100%;
                padding: 8px;
                transform: translateY(0);
    }
    .fixed-sidebar.show {
	    right: unset;
	}
        .calendar-wrapper {
            width: 100%;
        }
    .reservation-button, .sidebar-instagram {
        display: none;
    }
}

/* ============================================
   SP Bottom Bar Styles
   ============================================ */

.sp-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #FFFFFF;
    display: none;
    z-index: 1000;
    height: 54px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.sp-bottom-bar.show {
    transform: translateY(0);
}

.bottom-bar-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
    padding: 8px 4px;
    transition: background-color 0.3s ease;
    height: 100%;
    gap: 4px;
}

.bottom-bar-item.line-item {
    background-color: #39AD36;
}

.bottom-bar-item.line-item:hover {
    background-color: #2E8B2A;
}

.bottom-bar-item.web-item {
    background-color: #C48F30;
}

.bottom-bar-item.web-item:hover {
    background-color: #A67825;
}

.bottom-bar-item.phone-item {
    background-color: #FFFFFF;
}

.bottom-bar-item.phone-item:hover {
    background-color: #F5F5F5;
}

.bottom-bar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
}

.bottom-bar-text {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    color: #FFFFFF;
    text-align: center;
}

.bottom-bar-item.line-item .bottom-bar-text {
    color: #FFFFFF;
}

.bottom-bar-item.web-item .bottom-bar-text {
    color: #FFFFFF;
}

.bottom-bar-item.phone-item .bottom-bar-text {
    color: #333333;
}

/* スマートフォンでのみ表示 */
@media (max-width: 799px) {
    .sp-bottom-bar {
        display: flex;
    }
}

/* ============================================
   Drawer Menu Styles
   ============================================ */

/* ドロワー開閉時のbody制御 */
body.drawer-open {
    /* overflow: hidden; 一旦コメントアウト */
}

/* ドロワーメニューの基本設定 */
.drawer-sp {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 0;
    width: 332px;
    height: 702px;
    max-height: 90vh;
    position: fixed;
    top: -1000vh;
    right: 0;
    z-index: 999997;
    transition: 0.5s ease-out;
    border-radius: 0;
    display: flex;
    flex-direction: column;
}

@media (max-width: 799px) {
    #drawer.drawer .drawer-sp {
        top: 0;
    }
}
/* ドロワーヘッダー */
.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 27px;
    border-bottom: 1px solid #aaaaaa;
    height: 80px;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 1;
    flex-shrink: 0;
}

.dw-logo {
    width: 219px;
    height: 39px;
    margin: 0;
}

.dw-logo img {
    width: 100%;
    height: auto;
}

.drawer-close {
    background: none;
    border: none;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 12px;
    font-weight: 300;
    color: #333333;
    cursor: pointer;
    padding: 0;
    margin-top: 25px;
}

/* ドロワーコンテンツ */
.drawer-content {
    padding: 20px 28px;
    flex: 1;
    overflow-y: auto;
}

/* メインメニューエリア */
.drawer-main-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin-bottom: 32px;
}

.drawer-menu-item {
    background-color: #ffffff;
    border-radius: 4px;
    box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.25);
    width: calc(50% - 5.5px);
    height: 87px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: 0.3s ease;
}

.drawer-menu-item:hover {
    transform: translateY(-2px);
    box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.3);
}

.drawer-menu-icon {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.drawer-menu-icon img {
    width: auto;
    height: auto;
    opacity: 0.75;
}

.drawer-menu-text {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #333333;
    text-align: center;
}

/* アコーディオンメニュー */
.drawer-accordion {
    width: 100%;
}

.accordion-item {
    border-bottom: 1px solid #aaaaaa;
}

.accordion-header {
    background: none;
    border: none;
    width: 100%;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #333333;
    text-align: left;
    transition: 0.3s ease;
    gap: 12px;
}

.accordion-header:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.accordion-header span {
    flex: 1;
}

.accordion-arrow {
    width: 8px;
    height: 16px;
    position: relative;
    transition: 0.3s ease;
}

.accordion-arrow::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 16px;
    background-color: #000000;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.accordion-item.active .accordion-arrow {
    transform: rotate(90deg);
}

/* アコーディオンコンテンツ */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background-color: rgba(255, 255, 255, 0.8);
}

.accordion-item.active .accordion-content {
    max-height: 1000px;
}

.accordion-menu-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
}

.accordion-menu-item {
    background-color: #ffffff;
    border-radius: 4px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
    padding: 18px 24px;
    text-decoration: none;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 15px;
    font-weight: 300;
    color: #333333;
    line-height: 1.6;
    position: relative;
    transition: 0.3s ease;
}

.accordion-menu-item::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 24px;
    transform: translateY(-50%);
    width: 5.5px;
    height: 11px;
    background-color: #838383;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.accordion-menu-item:hover {
    background-color: #f8f8f8;
    transform: translateX(4px);
}

/* レスポンシブ対応 */
@media (max-width: 799px) {
    #drawer {
        width: 95vw;
        max-width: 360px;
        right: 0;
        height: auto;
        max-height: calc(100vh - 80px);
    }

    .drawer-header {
        padding: 8px;
    }

    .drawer-content {
        padding: 16px 20px;
    }

    .drawer-menu-text {
        font-size: 14px;
    }

    .accordion-header {
        font-size: 15px;
        padding: 10px 12px;
    }

    .accordion-menu-list {
        padding: 16px;
        gap: 12px;
    }

    .accordion-menu-item {
        padding: 14px 18px;
        font-size: 14px;
    }
}

/* PC用ドロワーメニュー */
.drawer-pc {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    max-height: calc(90%);
    z-index: 9999;
    transition: all 0.3s ease;
    transform: translateY(-100%);
    max-width: 1270px;
}

@media (min-width: 800px) {
    #drawer.drawer .drawer-pc {
        transform: translateY(0);
    }
}
.drawer-pc-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #E4E0D7;
}

.drawer-pc-content {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 120px 120px 60px 60px;
    overflow-y: auto;
}

.drawer-pc-section {
    margin-bottom: 60px;
}

.drawer-pc-section:last-child {
    margin-bottom: 0;
}

.drawer-pc-section-title {
    font-family: 'Noto Serif JP', serif;
    font-size: 24px;
    font-weight: 300;
    color: #231816;
    margin-bottom: 16px;
    letter-spacing: 0.1em;
    line-height: 1.6;
    position: relative;
}

.drawer-pc-section-title::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #B2995F;
    z-index: 0;
}
.drawer-pc-section-title span {
    display: inline-block;
    padding-right: 1em;
    background-color: #E4E0D7;
    z-index: 2;
        position: relative;
}
.drawer-pc-menu-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: min(30px, 3vw);
}

.drawer-pc-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #231816;
    transition: all 0.3s ease;
    position: relative;
    max-width: 191px;
}

.drawer-pc-menu-item:hover {
    transform: translateY(-2px);
}

.drawer-pc-menu-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.drawer-pc-menu-item:hover img {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.drawer-pc-menu-item span {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 15px;
    font-weight: 350;
    text-align: center;
    line-height: 1.6;
}

/* Coming Soon オーバーレイ */
.drawer-pc-menu-item.coming-soon {
    position: relative;
}

@media (max-width: 1200px) {
    .drawer-pc-section-title {
        font-size: 22px;
    }

    .drawer-pc-menu-item span {
        font-size: 14px;
    }
}

/* タブレット以下では非表示 */
@media (max-width: 799px) {
    .drawer-pc {
        display: none;
    }
}