@charset "UTF-8";

/* ==================================================
   01. カラー・共通設定
================================================== */

:root {
    --color-main: #ec8761;
    --color-main-rgb: 236, 135, 97;
    --color-cream: #f9f1e1;
    --color-white: #fff;
    --color-black: #000;
}

html {
    overflow-x: hidden;
}

body,
p,
a,
span,
li,
th,
td,
h1,
h2,
h3,
h4,
h5,
h6,
button,
input,
textarea,
select {
    font-family: 'M PLUS Rounded 1c', "Yu Gothic", "YuGothic", sans-serif !important;
}

body,
p {
    color: var(--color-black);
    line-height: 1.8rem !important;
}

.border {
    border-width: 2px !important;
}

.bg-lightblue {
    background: var(--color-cream) !important;
}

.bg-white {
    background: var(--color-white) !important;
}

.bg-info,
.btn-info {
    background-color: var(--color-main) !important;
    border-color: var(--color-main) !important;
}

.text-info,
a.text-info,
.navbar-light .navbar-nav .nav-link.text-info {
    color: var(--color-black) !important;
}

.btn-info,
.btn-info:hover,
.btn-info:focus {
    color: var(--color-black) !important;
}

/* ==================================================
   02. 半円背景・見出し装飾
   ※元テンプレートのhalf構造は維持
================================================== */

.half-white:after {
    background-color: var(--color-white) !important;
}

.half-lightblue:after {
    background: var(--color-cream) !important;
}

.half-info:after {
    background: var(--color-main) !important;
}

.half {
    width: 120%;
    height: 150px;
    border-top-left-radius: 50% 120px;
    border-top-right-radius: 50% 120px;
    position: absolute;
    top: 0;
    left: -10%;
}

.half:after {
    content: ' ';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
}

section.position-relative {
    overflow: visible;
}

section.position-relative > .text-center,
section.position-relative > .container,
section.position-relative > .container-fluid {
    position: relative;
    z-index: 1;
}

.dot {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

.dot:before,
.dot:after {
    font-family: "Font Awesome 5 Free";
    content: "\f111";
    font-size: 1.2rem;
    color: var(--color-main) !important;
    padding: 0 10px;
    vertical-align: middle;
}

h2,
h2.h3,
.h3.dot {
    color: var(--color-black) !important;
}

h2.h3,
.h3.dot {
    font-size: 2rem !important;
    line-height: 1.6 !important;
}

section .h3.dot {
    padding-top: 0.75rem !important;
    padding-bottom: 2rem !important;
    margin-bottom: 0 !important;
}

section .container-fluid > .container.pt-5,
section .container.pt-5 {
    padding-top: 2rem !important;
}

.body-text-area p {
    font-weight: 400 !important;
}
/* ==================================================
   03. ヘッダー・TOPロゴ・キャンペーン
================================================== */

header .container-fluid {
    height: 92vh;
    min-height: 660px;
    width: 100%;
    background: url(../img/image-top.jpg);
    background-size: cover;
    background-position: 50% 100%;
}

.hero-logo,
.hero-catch,
.hero-campaign {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    text-align: center;
}

.hero-logo {
    top: 3%;
}

.hero-logo img {
    width: min(36vw, 420px);
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.hero-catch {
    top: 28%;
    width: min(92%, 900px);
}

.hero-catch .catch-copy {
    position: static !important;
    margin: 0 !important;
    padding-top: 0 !important;
    line-height: 1.35 !important;
    color: var(--color-white);
    text-align: center;
}

.hero-campaign {
    top: 55%;
    width: min(92%, 900px);
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 14px;
    flex-wrap: nowrap;
}

.campaign-item {
    width: 50%;
    max-width: 420px;
    background: rgba(255, 255, 255, 0.94);
    border: 2px solid var(--color-main);
    border-radius: 20px;
    padding: 12px 18px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    color: var(--color-black);
}

.campaign-label {
    display: inline-block;
    background: var(--color-main);
    color: var(--color-black);
    font-weight: bold;
    border-radius: 999px;
    padding: 4px 16px;
    margin-bottom: 6px;
}

.campaign-item p {
    margin-bottom: 0;
    font-weight: bold;
    line-height: 1.5rem !important;
    color: var(--color-black);
}

/* ==================================================
   04-1. 旧案：電話・受付情報を通常メニュー内へ統合
   ※現在の方針では未使用候補。削除判断は別途確認。
================================================== */

.mod-gnav .nav-contact-item {
    flex: 1.15;
}

.mod-gnav .nav-contact-link {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
}

.nav-contact-tel {
    display: block;
    font-weight: 700;
    line-height: 1.25 !important;
    white-space: nowrap;
}

.nav-contact-hours {
    display: block;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.2 !important;
    white-space: nowrap;
}

@media screen and (max-width: 1199px) {
    .nav-contact-hours {
        font-size: 0.66rem;
    }
}

@media screen and (max-width: 991px) {
    .mod-gnav .nav-contact-item {
        flex: 1.2;
    }

    .nav-contact-tel {
        font-size: 0.9rem;
    }

    .nav-contact-hours {
        font-size: 0.6rem;
    }
}

@media screen and (max-width: 767.98px) {
    .mod-gnav .nav-contact-link {
        gap: 1px;
    }

    .nav-contact-tel {
        font-size: 0.95rem;
    }

    .nav-contact-hours {
        font-size: 0.78rem;
        white-space: normal;
    }
}

.mod-gnav.is-fixed .nav-contact-hours {
    font-size: 0.64rem;
}

@media screen and (max-width: 767.98px) {
    .mod-gnav.is-fixed .nav-contact-tel {
        font-size: 0.9rem;
    }

    .mod-gnav.is-fixed .nav-contact-hours {
        font-size: 0.72rem;
    }
}

/* ==================================================
   04. 通常グローバルナビ・院名ロゴ文字
================================================== */

.logo-text-area {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.2 !important;
    text-align: center;
    padding: 10px 24px;
}

.logo-sub {
    display: block;
    font-size: 1.35rem;
    font-weight: bold;
    color: var(--color-black);
    line-height: 1.25 !important;
    white-space: nowrap;
}

.logo-main {
    display: block;
    font-size: 2.75rem;
    font-weight: bold;
    color: var(--color-black);
    line-height: 1.25 !important;
    white-space: nowrap;
}

.mod-gnav .navbar {
    margin-bottom: 0 !important;
}

.mod-gnav .navbar-nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 10px;
}

.mod-gnav .nav-item {
    flex: 1;
}

.mod-gnav .nav-link {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 12px 14px !important;

    background-color: var(--color-white);
    color: var(--color-black) !important;

    /* 茶色系の縁取り */
    border: 1px solid rgba(120, 78, 48, 0.45);

    border-radius: 999px;
    text-align: center;
    font-weight: 700;
    line-height: 1.35rem !important;
    white-space: nowrap;
    text-decoration: none;

    font-family: 'Zen Maru Gothic', "Yu Gothic", "YuGothic", sans-serif !important;
    font-size: 1.05rem;
    letter-spacing: 0.04em;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

.mod-gnav .nav-link:hover,
.mod-gnav .nav-link:focus {
    background-color: var(--color-cream);
    color: var(--color-black) !important;
    text-decoration: none;
}

.breadcrumb {
    background: transparent;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: '>';
    color: var(--color-white);
}

/* ==================================================
   05. index共通：プロフィール・院内・営業予定・予約ボタン
================================================== */

main p,
main p.h6,
main h3,
main h4,
main h5 {
    color: var(--color-black);
}

#profile .profile-text {
    color: var(--color-black);
}

#profile .profile-photo-col {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 15px !important;
    padding-right: 15px !important;
    overflow: visible;
}

#profile .profile-oval-img {
    display: block !important;
    width: 88% !important;
    max-width: 420px !important;
    height: 560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 50% / 45% !important;
}

.qualification-img {
    border-radius: 18px;
}

.balloon,
.balloon-s {
    position: absolute;
    z-index: 10;
    overflow: visible !important;
    background-color: var(--color-main) !important;
    color: var(--color-black) !important;
}

.balloon {
    width: 130px;
    height: 130px;
    top: -50px;
    left: -20px;
    font-size: 15px;
}

.balloon-s {
    width: 110px;
    height: 110px;
    top: -20px;
    left: -20px;
    font-size: 14px;
}

.balloon:before,
.balloon-s:before {
    content: "";
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-left: 30px solid var(--color-main);
    z-index: -1;
    transform: rotate(45deg);
}

.balloon p,
.balloon-s p {
    padding-top: 8px !important;
    font-weight: 500 !important;
    line-height: 1.4rem !important;
    color: var(--color-black) !important;
    margin-bottom: 0 !important;
}

.schedule-table th,
.schedule-table td {
    vertical-align: middle !important;
    text-align: center;
    white-space: nowrap;
    border-color: rgba(var(--color-main-rgb), 0.35) !important;
}

.schedule-table tbody tr:last-child th,
.schedule-table tbody tr:last-child td {
    border-bottom: 1px solid rgba(var(--color-main-rgb), 0.35) !important;
}

.schedule-table thead th {
    background-color: var(--color-main) !important;
    color: var(--color-black) !important;
    font-weight: bold;
}

.schedule-sp {
    display: none;
}

.schedule-note {
    font-size: 1.6rem !important;
    line-height: 1.9rem !important;
    font-weight: 500;
}

.reserve-btn {
    display: inline-block !important;
    min-width: 320px;
    padding: 14px 42px !important;
    background-color: var(--color-main) !important;
    border: 2px solid var(--color-main) !important;
    color: var(--color-black) !important;
    border-radius: 999px !important;
    font-size: 1.15rem !important;
    font-weight: bold !important;
    line-height: 1.5 !important;
    text-align: center !important;
    text-decoration: none !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.reserve-btn:hover,
.reserve-btn:focus {
    background-color: var(--color-cream) !important;
    border-color: var(--color-main) !important;
    color: var(--color-black) !important;
    text-decoration: none !important;
}

/* ==================================================
   06. menu.html専用
================================================== */

.page-menu .course-title-with-image {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    line-height: 1.4 !important;
}

.page-menu .course-title-icon {
    width: 50px;
    height: auto;
    display: inline-block;
}

.page-menu .course-lead-title {
    color: var(--color-black) !important;
    line-height: 1.7 !important;
    text-align: center;
}

.page-menu .menu-course-img {
    width: 100% !important;
    height: 240px !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 18px;
    border: 1px solid rgba(var(--color-main-rgb), 0.55);
    background: var(--color-white);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.page-menu #course .col-md-4 h3 {
    font-size: 1.35rem !important;
    line-height: 1.7 !important;
    font-weight: bold !important;
}

.page-menu #course .col-md-4 h3:before {
    content: "●";
    color: var(--color-main);
    margin-right: 8px;
    font-size: 0.85em;
    vertical-align: middle;
}

.page-menu #course .col-md-4 p.h6 {
    font-size: 1.08rem !important;
    line-height: 2rem !important;
    font-weight: 500 !important;
}

.page-menu .menu-disease-section {
    position: relative;
    overflow: visible;
}

.page-menu .menu-disease-box {
    margin-bottom: 0;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.page-menu .menu-disease-title {
    margin-bottom: 22px;
    text-align: center;
    font-size: 1.6rem !important;
    font-weight: bold !important;
    color: var(--color-black);
    line-height: 1.8 !important;
}

.page-menu .menu-disease-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.page-menu .menu-disease-table {
    width: 100%;
    min-width: 720px;
    table-layout: fixed;
    border-collapse: collapse;
    margin-bottom: 0;
    background: var(--color-white);
}

.page-menu .menu-disease-table th,
.page-menu .menu-disease-table td {
    vertical-align: top;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(var(--color-main-rgb), 0.35);
    font-size: 1.2rem !important;
    line-height: 1.8 !important;
    color: var(--color-black);
    background: var(--color-white) !important;
}

.page-menu .menu-disease-table thead th {
    background: var(--color-cream) !important;
    color: var(--color-black) !important;
    font-size: 1.05rem !important;
    font-weight: bold !important;
    text-align: center;
}

.page-menu .menu-disease-table tbody th {
    width: 28%;
    color: var(--color-black) !important;
    font-weight: bold !important;
    text-align: left;
}

.page-menu .menu-disease-table td {
    width: 72%;
    text-align: left;
}

.page-menu .menu-disease-table tr:last-child th,
.page-menu .menu-disease-table tr:last-child td {
    border-bottom: 1px solid rgba(var(--color-main-rgb), 0.35);
}

/* ==================================================
   07. 治療料金セクション
================================================== */

.treatment-price-box {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 34px 28px;
    background: var(--color-white);
    border: 2px solid rgba(var(--color-main-rgb), 0.45);
    border-radius: 24px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.treatment-main-price {
    margin-bottom: 24px;
    font-size: 1.65rem;
    line-height: 1.7;
    font-weight: bold;
    color: var(--color-black);
}

.treatment-price-note {
    margin-bottom: 28px;
    font-size: 1.08rem;
    line-height: 2rem !important;
    color: var(--color-black);
}

.treatment-price-table-wrap {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 28px;
}

.treatment-price-table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: collapse;
    background: var(--color-white);
}

.treatment-price-table th,
.treatment-price-table td {
    padding: 14px 18px;
    border-top: 1px solid rgba(var(--color-main-rgb), 0.35) !important;
    border-bottom: 1px solid rgba(var(--color-main-rgb), 0.35);
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--color-black);
    vertical-align: middle;
}

.treatment-price-table tr:last-child th,
.treatment-price-table tr:last-child td {
    border-bottom: 1px solid rgba(var(--color-main-rgb), 0.35);
}

.treatment-price-table th {
    width: 40%;
    font-weight: bold;
    text-align: center;
    background: var(--color-cream);
}

.treatment-price-table td {
    width: 60%;
    text-align: center;
    background: var(--color-white);
    font-weight: 500;
}

.treatment-sub-title {
    margin-top: 28px;
    margin-bottom: 18px;
    font-size: 1.35rem;
    line-height: 1.7;
    font-weight: bold;
    color: var(--color-black);
}

.treatment-visit-price {
    margin-top: 18px;
    margin-bottom: 0;
    font-size: 1.18rem;
    line-height: 1.9rem !important;
    font-weight: 500;
    color: var(--color-black);
}

/* ==================================================
   08. フッター
================================================== */

footer,
footer p,
footer a,
footer li,
footer span,
footer .text-white {
    color: var(--color-black) !important;
}

/* ==================================================
   09. レスポンシブ調整：TOPヘッダー・通常ナビ・各ページ共通
================================================== */

@media screen and (max-width: 1199px) {
    .logo-sub {
        font-size: 1.05rem;
    }

    .logo-main {
        font-size: 2rem;
    }
    
    .hero-logo img {
        width: 400px;
        max-width: 58vw;
    }

    .mod-gnav .navbar-nav {
        gap: 8px;
    }

    .mod-gnav .nav-link {
        padding: 10px 10px !important;
        font-size: 1.2rem;
    }
}

@media screen and (max-width: 991px) {
    .logo-sub {
        font-size: 1.3rem;
    }

    .logo-main {
        font-size: 1.8rem;
    }
    
    .hero-logo img {
        width: 400px;
        max-width: 58vw;
    }

    .mod-gnav .nav-link {
        font-size: 1rem;
        padding: 9px 8px !important;
    }

    #profile .profile-oval-img {
        width: 82% !important;
        max-width: 360px !important;
        height: 480px !important;
    }

    .page-menu .menu-course-img {
        height: 200px !important;
    }
    
    #sec2 h2.h3 {
        font-size: 1.9rem !important;
        line-height: 1.5 !important;
    }
}

@media screen and (max-width: 767.98px) {
    header .container-fluid {
        height: auto;
        min-height: 80vh;
        padding-top: 24px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .hero-logo,
    .hero-catch,
    .hero-campaign {
        position: static;
        left: auto;
        top: auto;
        transform: none;
        width: 92%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .hero-logo {
        margin-bottom: 12px;
    }

    .hero-logo img {
        width: 300px;
        max-width: 58vw;
    }

    .hero-catch {
        margin-bottom: 14px;
    }

    .hero-catch .catch-copy {
        font-size: 1.35rem !important;
        line-height: 1.45 !important;
        padding-top: 0 !important;
    }

    .hero-campaign {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 24px;
    }

    .campaign-item {
        width: 100%;
        max-width: 100%;
        padding: 10px 12px;
        border-radius: 14px;
    }

    .campaign-label {
        font-size: 0.9rem;
        padding: 3px 12px;
    }

    .campaign-item p {
        font-size: 0.95rem;
        line-height: 1.5rem !important;
    }

    .logo-text-area {
        width: 100%;
    }

    .logo-sub {
    font-size: 1.1rem;
    line-height: 1.15 !important;
    white-space: nowrap;
}

    .logo-main {
    font-size: 1.4rem;
    line-height: 1.15 !important;
    white-space: nowrap;
}
    
        .mod-gnav {
        position: static !important;
        width: 100%;
        margin-top: 0;
    }

    .mod-gnav .navbar-nav {
        display: block;
        gap: 0;
        padding-top: 12px;
    }

    .mod-gnav .nav-item {
        width: 100%;
        margin-bottom: 8px;
    }

    .mod-gnav .nav-link {
        width: 100%;
        min-height: auto;
        padding: 12px 16px !important;
        font-size: 0.95rem;
        border-radius: 999px;
    }

        .mod-gnav .navbar {
        position: relative;
    }

body:not(.has-scroll-banner) .mod-gnav #Navbar {
    position: fixed;
    top: 46%;
    left: 50%;
    right: auto;
    z-index: 10010;

    width: min(320px, calc(100vw - 32px));
    max-height: calc(100vh - 80px);
    overflow-y: auto;

    margin-top: 0;
    padding: 16px 14px;

    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(var(--color-main-rgb), 0.4);
    border-radius: 22px;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
    
    transform: translate(-50%, -50%);

}
    
    body:not(.has-scroll-banner) .mod-gnav #Navbar:not(.show) {
    display: none;
}

    body:not(.has-scroll-banner) .mod-gnav #Navbar.show {
    display: block;
}
    

    #Navbar .nav-link {
        background: var(--color-cream) !important;
        color: var(--color-black) !important;
        border: 1px solid rgba(var(--color-main-rgb), 0.5);
        font-weight: 500;
        letter-spacing: 0.04em;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
    }

    #Navbar .nav-link:hover,
    #Navbar .nav-link:focus {
        background: var(--color-main) !important;
        color: var(--color-black) !important;
    }

    h2.h3,
    .h3.dot {
        font-size: 1.45rem !important;
        line-height: 1.5 !important;
        word-break: normal;
        overflow-wrap: break-word;
    }
    
    #sec2 h2.h3 {
        font-size: 1.4rem !important;
        line-height: 1.5 !important;
    }
    
    #sec4 > .container-fluid.bg-lightblue {
        margin-top: -1.5rem !important;
        padding-top: 1.2rem !important;
    }

    section .h3.dot {
        padding-top: 0.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    section .container-fluid > .container.pt-5,
    section .container.pt-5 {
        padding-top: 1.5rem !important;
    }

    /* 半円装飾：スマホでは左右ぶれを抑え、アーチをゆるめる */
    section.position-relative {
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }

    section.position-relative > .half {
        width: 120% !important;
        left: -10% !important;
        height: 92px !important;
        border-top-left-radius: 50% 68px !important;
        border-top-right-radius: 50% 68px !important;
    }

    #profile .profile-oval-img {
        width: 78% !important;
        max-width: 280px !important;
        height: 360px !important;
    }

    .balloon,
    .balloon-s {
        width: 120px;
        height: 120px;
        top: -60px;
        left: 4px;
        font-size: 14px;
    }

    .balloon:before,
    .balloon-s:before {
        bottom: -4px;
        right: -4px;
    }

    .schedule-pc {
        display: none !important;
    }

    .schedule-sp {
        display: block !important;
    }

    .schedule-card {
        background: var(--color-white);
        border: 1px solid rgba(var(--color-main-rgb), 0.55);
        border-radius: 16px;
        padding: 14px 16px;
        margin-bottom: 12px;
    }

    .schedule-day {
        background: var(--color-main);
        color: var(--color-black);
        font-weight: bold;
        border-radius: 999px;
        padding: 6px 12px;
        margin-bottom: 10px;
        text-align: center;
    }

    .schedule-time {
        color: var(--color-black);
        text-align: center;
        line-height: 1.7rem;
    }

    .schedule-note {
        font-size: 1rem !important;
        line-height: 1.7rem !important;
    }

    .reserve-btn {
        width: 100%;
        min-width: auto;
        padding: 14px 20px !important;
        font-size: 1.05rem !important;
    }

    .page-menu .course-title-with-image {
        gap: 10px;
        line-height: 1.5 !important;
    }

    .page-menu .course-title-icon {
        width: 48px;
    }
    .page-menu #course > .container-fluid.bg-lightblue {
        margin-top: -2.3rem !important;
        padding-top: 1.4rem !important;
    }
    #sec2 > .container-fluid.bg-lightblue {
        margin-top: -1.8rem !important;
        padding-top: 1.2rem !important;
    }
    
    .page-menu #course .row.justify-content-center.pb-4 {
        margin-top: 0 !important;
        padding-bottom: 1rem !important;
    }
    .page-menu .course-lead-title {
        font-size: 1.25rem !important;
        line-height: 1.6 !important;
    }

    .page-menu .menu-course-img {
        height: 220px !important;
    }

    .page-menu #course .col-md-4 h3 {
        font-size: 1.2rem !important;
        line-height: 1.6 !important;
    }

    .page-menu #course .col-md-4 p.h6 {
        font-size: 1rem !important;
        line-height: 1.85rem !important;
    }

    .page-menu .menu-disease-title {
        font-size: 1rem !important;
        line-height: 1.7 !important;
        margin-bottom: 18px;
    }

    .page-menu .menu-disease-table-wrap {
        overflow-x: hidden !important;
    }

    .page-menu .menu-disease-table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed !important;
    }

    .page-menu .menu-disease-table tbody th {
        width: 34% !important;
    }

    .page-menu .menu-disease-table td {
        width: 66% !important;
    }

    .page-menu .menu-disease-table th,
    .page-menu .menu-disease-table td {
        padding: 8px 6px !important;
        font-size: 0.8rem !important;
        line-height: 1.55 !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

    .page-menu .menu-disease-table thead th {
        font-size: 0.84rem !important;
    }

    .treatment-price-box {
        padding: 24px 16px;
        border-radius: 18px;
    }

    .treatment-main-price {
        font-size: 1.3rem;
        line-height: 1.6;
    }

    .treatment-price-note {
        font-size: 1rem;
        line-height: 1.75rem !important;
    }

    .treatment-price-table th,
    .treatment-price-table td {
        padding: 11px 10px;
        font-size: 1rem;
        line-height: 1.6;
    }

    .treatment-sub-title {
        font-size: 1.18rem;
    }

    .treatment-visit-price {
        font-size: 1rem;
        line-height: 1.7rem !important;
    }
}

@media screen and (max-width: 390px) {
    .logo-sub {
        font-size: 1rem !important;
    }

    .logo-main {
        font-size: 1.3rem !important;
    }

    h2.h3,
    .h3.dot {
        font-size: 1.22rem !important;
        line-height: 1.45 !important;
        padding-left: 0.4rem !important;
        padding-right: 0.4rem !important;
    }

    section.position-relative > .half {
        height: 84px !important;
        border-top-left-radius: 50% 60px !important;
        border-top-right-radius: 50% 60px !important;
    }

    .page-menu .menu-disease-table th,
    .page-menu .menu-disease-table td {
        padding: 7px 5px !important;
        font-size: 0.76rem !important;
        line-height: 1.5 !important;
    }
}

/* ==================================================
   本文専用：文字サイズ調整
================================================== */

@media screen and (min-width: 768px) {
    .body-text-area p,
    .body-text-area p.h6 {
        font-size: 1.2rem !important;
        line-height: 2.1rem !important;
    }
}

@media screen and (max-width: 767.98px) {
    .body-text-area p,
    .body-text-area p.h6 {
        font-size: 1rem !important;
        line-height: 1.75rem !important;
    }
}

/* ==================================================
   本文 p.h6：文字サイズ調整
================================================== */

main p.h6 {
    font-size: 1.3rem !important;
    line-height: 1.8rem !important;
}

/* スマホ調整 */
@media screen and (max-width: 767.98px) {
    main p.h6 {
        font-size: 1rem !important;
        line-height: 1.75rem !important;
    }
}

/* ==================================================
   PC版：サイト全体の文字を少し太くする
================================================== */

@media screen and (min-width: 768px) {
    body,
    p,
    a,
    li,
    th,
    td,
    span,
    button {
        font-weight: 420;
    }
}

/* ==================================================
   トップに戻るボタン
   ※位置・大きさは変数で調整
================================================== */

:root {
    --page-top-size: 48px;
    --page-top-right: 24px;
    --page-top-bottom: 80px;
    --page-top-font-size: 1rem;
}

#page-top {
    display: none;
    position: fixed;
    right: var(--page-top-right);
    bottom: var(--page-top-bottom);
    z-index: 9999;
}

#page-top a {
    display: flex;
    align-items: center;
    justify-content: center;

    width: var(--page-top-size);
    height: var(--page-top-size);

    background: var(--color-main);
    color: var(--color-black);

    border-radius: 50%;
    text-decoration: none;

    font-size: var(--page-top-font-size);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

#page-top a:hover,
#page-top a:focus {
    background: var(--color-cream);
    color: var(--color-black);
    text-decoration: none;
}

/* ==================================================
   スマホ版：オレンジ半円の自然なカーブと横はみ出しカット
================================================== */

@media screen and (max-width: 767.98px) {
    :root {
        --sp-orange-half-height: 96px;
        --sp-orange-half-radius: 62px;
    }

    .half-clip {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: var(--sp-orange-half-height);
        overflow: hidden;
        z-index: 0;
    }

    .half-clip .half.bg-info {
        width: 120% !important;
        left: -10% !important;
        height: var(--sp-orange-half-height) !important;
        border-top-left-radius: 50% var(--sp-orange-half-radius) !important;
        border-top-right-radius: 50% var(--sp-orange-half-radius) !important;
    }
}

/* ==================================================
   スマホ版：ヘッダー院名帯と半円の縦隙間調整
================================================== */

@media screen and (max-width: 767.98px) {
    .mod-gnav .position-relative.pt-5 {
        padding-top: 1.8rem !important;
    }
}

/* ==================================================
   スマホ版：院名テキストボックス上部角の飛び出し防止
================================================== */

@media screen and (max-width: 767.98px) {
    .mod-gnav .position-relative.pt-5 > .container > .position-relative.text-center.bg-info {
        border-top-left-radius: 28px;
        border-top-right-radius: 28px;
        overflow: hidden;
    }
}

/* ==================================================
   スマホ横向き：ヘッダー内要素の縦詰め
================================================== */

@media screen and (max-width: 767.98px) and (orientation: landscape) {
    header .container-fluid {
        min-height: 100vh;
        padding-top: 10px;
    }

    .hero-logo {
        margin-bottom: 6px;
    }

    .hero-logo img {
        width: 160px;
        max-width: 28vw;
    }

    .hero-campaign {
        flex-direction: row;
        gap: 8px;
        margin-bottom: 10px;
    }

    .campaign-item {
        padding: 6px 10px;
        border-radius: 12px;
    }

    .campaign-label {
        font-size: 0.75rem;
        padding: 2px 10px;
        margin-bottom: 3px;
    }

    .campaign-item p {
        font-size: 0.78rem;
        line-height: 1.2rem !important;
    }
}

/* ==================================================
   スマホ版：本文テキストを左寄せにする
================================================== */

@media screen and (max-width: 767.98px) {
    .body-text-area {
        text-align: left !important;
    }

    .body-text-area p,
    .body-text-area p.h6 {
        text-align: left !important;
    }
}

/* ==================================================
   スマホ版：見出し左右の●を非表示
================================================== */

@media screen and (max-width: 767.98px) {
    .dot:before,
    .dot:after {
        content: none !important;
        display: none !important;
    }

    .dot {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}

/* ==================================================
   menu冒頭タイトル：半円より前面に表示
================================================== */

.page-menu #course > .container.text-center.position-relative.bg-lightblue {
    position: relative;
    z-index: 5;
}

.page-menu #course .course-title-with-image {
    position: relative;
    z-index: 6;
}

/* ==================================================
   スマホ版：TOP冒頭「志茂駅周辺にお住いの皆様へ」背景割れ補正
================================================== */

@media screen and (max-width: 767.98px) {
    body:not(.page-menu) main > section:first-child > .container.text-center.position-relative.bg-lightblue {
        width: 100% !important;
        max-width: 100% !important;
    }

    body:not(.page-menu) main > section:first-child > .container-fluid.bg-lightblue {
        margin-top: -1.4rem !important;
        padding-top: 1.2rem !important;
    }
}

/* ==================================================
   PC・タブレット通常メニュー：ふんわり立体ボタン
   ※スマホ格納メニューには適用しない
================================================== */

@media screen and (min-width: 768px) {
    .mod-gnav .nav-link {
        background: linear-gradient(180deg, #ffffff 0%, #fff7ef 100%) !important;
        border: 1px solid rgba(120, 78, 48, 0.35) !important;
        border-radius: 999px;

        box-shadow:
            0 5px 0 rgba(120, 78, 48, 0.18),
            0 8px 14px rgba(0, 0, 0, 0.08);

        color: var(--color-black) !important;
        font-weight: 700;
        letter-spacing: 0.04em;

        transition: transform 0.18s ease, box-shadow 0.18s ease;
    }

    .mod-gnav .nav-link:hover,
    .mod-gnav .nav-link:focus {
        background: linear-gradient(180deg, #fffaf5 0%, var(--color-cream) 100%) !important;
        color: var(--color-black) !important;
        text-decoration: none;
        transform: translateY(2px);

        box-shadow:
            0 2px 0 rgba(120, 78, 48, 0.2),
            0 5px 10px rgba(0, 0, 0, 0.11);
    }
}

/* ==================================================
   10. first.html専用：初めての方へ
================================================== */

/* first.html 専用：初めての方へ */
.first-page-main .section-inner-narrow {
    max-width: 1400px;
}

.first-story-box {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    min-height: 520px;
    background-image:
        linear-gradient(90deg, rgba(255, 251, 246, 0.98) 0%, rgba(255, 251, 246, 0.96) 32%, rgba(255, 251, 246, 0.88) 46%, rgba(255, 251, 246, 0.52) 60%, rgba(255, 251, 246, 0.12) 74%, rgba(255, 251, 246, 0) 100%),
        url('../img/dd4f71_25ddcdb5f8484db19a41164e5ed0e099.avif');
     background-size: auto 100%;
    background-position: 100% center;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.first-story-content {
    max-width: 60%;
    padding: 52px 48px;
    position: relative;
    z-index: 1;
}

.first-story-heading {
    font-size: 2rem;
    line-height: 1.6 !important;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 1.5rem;
}

.first-story-content p {
    font-size: 1.08rem;
    line-height: 2.05rem !important;
    font-weight: 500;
    margin-bottom: 1.35rem;
    color: var(--color-black);
}

.first-profile-card {
    background: #fffdfb;
    border: 1px solid rgba(var(--color-main-rgb), 0.22);
    border-radius: 24px;
    padding: 42px 38px;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.05);
}

.first-profile-card h3 {
    font-size: 1.8rem;
    line-height: 1.6 !important;
    color: var(--color-black);
}

.first-profile-card p,
.first-profile-card li {
    font-size: 1.05rem;
    line-height: 1.95rem !important;
    font-weight: 500;
    color: var(--color-black);
}

.first-profile-list,
.first-profile-meta {
    list-style: none;
    margin: 0;
    padding: 0;
}

.first-profile-block-title {
    font-size: 1.15rem;
    line-height: 1.7 !important;
    font-weight: 700;
    margin-top: 1.3rem;
    margin-bottom: 0.4rem;
    color: var(--color-black);
}

.first-contact-section .first-contact-visual-wrap {
    margin-top: 2rem;
    text-align: center;
}

.first-contact-section .first-contact-visual {
    width: 90%;
    max-width: 1000px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    border-radius: 24px;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.06);
    display: block;
    transform: none;
}

.first-contact-visual {
    width: 100%;
    border-radius: 24px;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.06);
    display: block;
}

@media screen and (max-width: 991.98px) {
    .first-story-box {
        min-height: auto;
        background-image:
            linear-gradient(180deg, rgba(255, 251, 246, 0.97) 0%, rgba(255, 251, 246, 0.92) 55%, rgba(255, 251, 246, 0.78) 100%),
            url('../img/dd4f71_25ddcdb5f8484db19a41164e5ed0e099.avif');
        background-position: center center;
    }

    .first-story-content {
        max-width: 100%;
        padding: 38px 28px;
    }
}

@media screen and (max-width: 767.98px) {
    .first-story-heading {
        font-size: 1.55rem;
        line-height: 1.55 !important;
    }

    .first-story-content p {
        font-size: 1rem;
        line-height: 1.9rem !important;
    }

    .first-profile-card {
        padding: 30px 22px;
    }

    .first-profile-card h3 {
        font-size: 1.5rem;
    }

    .first-profile-card p,
    .first-profile-card li {
        font-size: 1rem;
        line-height: 1.85rem !important;
    }
}

/* firstページ：ベージュ背景の案内画像セクション下部用 */
.footer-bg-cream {
    background-color: var(--color-cream) !important;
}

.footer-bg-cream footer {
    background-color: var(--color-cream) !important;
}

/* firstページ：スマホ時のフッター上部案内画像調整 */
@media screen and (max-width: 767.98px) {
    .first-contact-section .first-contact-visual-wrap {
        margin-top: 0;
    }

    .first-contact-section .first-contact-visual {
        width: 100%;
        max-width: none;
    }
}

/* ==================================================
   11. customer.html専用：お客様の声
================================================== */

.customer-bubble-section {
    overflow: hidden;
}

.customer-bubble-wrap {
    position: relative;
    overflow: hidden;
    width: 99vw;
    max-width: 99vw;
    left: 50%;
    transform: translateX(-50%);
    min-height: 520px;
}

.customer-bubble-area {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
    
}

.customer-bubble {
    position: absolute;
    display: block;
    width: var(--bubble-size, 90px);
    height: var(--bubble-size, 90px);
    object-fit: cover;
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
    animation: customerBubbleFloat var(--bubble-duration, 9s) ease-in-out forwards;
}

/* customer.html：お客様の声パーツの横幅調整 */
#customer-voice-list .container {
    max-width: 1320px;
}

@keyframes customerBubbleFloat {
    0% {
        opacity: 0;
        transform: translate3d(0, 60px, 0) scale(0.82);
    }

    15% {
        opacity: 0.78;
    }

    80% {
        opacity: 0.62;
    }

    100% {
        opacity: 0;
        transform: translate3d(var(--bubble-x, 20px), -360px, 0) scale(1.08);
    }
}

@media screen and (max-width: 767.98px) {
    .customer-bubble-wrap {
        width: 99vw;
        max-width: 99vw;
        left: 45%;
        transform: translateX(-50%);
        min-height: 380px;
    }

    .customer-bubble {
        width: var(--bubble-size-sp, 58px);
        height: var(--bubble-size-sp, 58px);
    }
}

.customer-voice-card {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
    padding: 34px 40px !important;
    border-color: rgba(var(--color-main-rgb), 0.35) !important;
    border-radius: 24px !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.05);
}

.customer-voice-images {
    position: relative;
}

/* 画像が1枚だけのとき */
.customer-voice-images .customer-voice-img:only-child {
    position: static;
    width: 100%;
    height: auto;
    display: block;
    border-radius: 18px;
    border: 1px solid rgba(var(--color-main-rgb), 0.28);
    background: transparent;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

/* 画像が2枚あるときだけ重ねる */
.customer-voice-images:has(.customer-voice-img:nth-child(2)) {
    min-height: 400px;
}

.customer-voice-images:has(.customer-voice-img:nth-child(2)) .customer-voice-img {
    position: absolute;
    width: 72%;
    height: auto;
    display: block;
    border-radius: 18px;
    border: 1px solid rgba(var(--color-main-rgb), 0.28);
    background: transparent;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

.customer-voice-images:has(.customer-voice-img:nth-child(2)) .customer-voice-img:first-child {
    top: 0;
    left: 0;
    z-index: 2;
}

.customer-voice-images:has(.customer-voice-img:nth-child(2)) .customer-voice-img:nth-child(2) {
    top: 130px;
    right: 0;
    z-index: 1;
}

.customer-voice-text p:last-child {
    margin-bottom: 0 !important;
}

@media screen and (max-width: 767.98px) {
    .customer-voice-images {
        margin-bottom: 18px;
    }

    .customer-voice-img {
        height: 210px;
    }
}

#customer-voice-list .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
}

.customer-voice-card h3 {
    font-size: 1.45rem !important;
    line-height: 1.7 !important;
    margin-bottom: 1rem !important;
}

.customer-voice-card p.h6 {
    font-size: 1.08rem !important;
    line-height: 2rem !important;
    margin-bottom: 1rem !important;
}

@media screen and (max-width: 767.98px) {
    .customer-voice-card {
        padding: 24px 18px !important;
    }

    .customer-voice-card h3 {
        font-size: 1.2rem !important;
    }

    .customer-voice-card p.h6 {
        font-size: 1rem !important;
        line-height: 1.85rem !important;
    }
}

/* ==================================================
   18. スクロール後専用トップメニューバナー
   ※白背景固定バナー・開閉メニュー・電話付箋・SNSリンク
================================================== */

.scroll-top-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10020;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 78px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid rgba(186, 157, 120, 0.34);
    box-shadow:
        0 10px 30px rgba(80, 60, 35, 0.08),
        0 2px 10px rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.28s ease, opacity 0.28s ease;
}

body.has-scroll-banner .scroll-top-banner {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.scroll-top-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: var(--color-black);
    text-decoration: none;
}

.scroll-top-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(180deg, #fffdfa 0%, #f8f2e9 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 4px 12px rgba(120, 95, 65, 0.10);
}

.scroll-top-logo img {
    display: block;
    width: auto;
    height: 42px;
}

.scroll-top-name {
    display: block;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.35 !important;
    letter-spacing: 0.03em;
    white-space: nowrap;
    color: #2f2720;
}

.scroll-top-brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    line-height: 1.25 !important;
}

.scroll-top-access {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.25 !important;
    letter-spacing: 0.03em;
    color: #5a4a3c;
    white-space: nowrap;
}

.scroll-top-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    line-height: 1.2 !important;
}

.scroll-top-hours {
    display: block;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.2 !important;
    color: #5a4a3c;
    white-space: nowrap;
}

.scroll-top-actions {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
}

.scroll-top-tel {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.2 !important;
    white-space: nowrap;
    color: #3a312a;
}

.scroll-top-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    min-height: 42px;
    padding: 8px 20px 8px 20px;
    background: linear-gradient(180deg, #fffdfa 0%, #f6efe5 100%);
    border: 1px solid rgba(186, 157, 120, 0.5);
    border-radius: 999px;
    color: #2f2720;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 5px 12px rgba(120, 95, 65, 0.10);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.scroll-top-menu-btn:hover,
.scroll-top-menu-btn:focus {
    background: linear-gradient(180deg, #fffefc 0%, #f4eadc 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        0 7px 16px rgba(120, 95, 65, 0.13);
    transform: translateY(-1px);
    outline: none;
}

.scroll-top-menu-text {
    display: block;
    width: 100%;
    min-width: 0;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1 !important;
    letter-spacing: 0.12em;
    text-align: center;
    color: #2f2720;
}

.scroll-top-menu-btn .navbar-toggler-icon {
    display: none;
}

@media screen and (max-width: 767.98px) {
    .scroll-top-access {
        font-size: 0.6rem;
        line-height: 1.15 !important;
    }

    .scroll-top-info {
        align-items: flex-end;
    }

    .scroll-top-hours {
        display: none;
    }

    .scroll-top-tel {
        font-size: 0.68rem;
        line-height: 1.15 !important;
    }
}

/* ==================================================
   18-1. 右側付箋型コンタクトボタン
   ※PC・タブレット用
================================================== */

.side-contact-tabs {
    position: fixed;
    top: 90px;
    right: -6px;
    z-index: 10019;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    transition: transform 0.28s ease, opacity 0.28s ease;
}

.side-contact-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 58px;
    min-height: 74px;
    padding: 8px 6px 8px 8px;
    color: #3a2f23 !important;
    border: 1px solid rgba(160, 125, 80, 0.38);
    border-right: none;
    border-radius: 18px 0 0 18px;
    text-decoration: none !important;
    box-shadow:
        0 8px 16px rgba(110, 85, 55, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.52);
    line-height: 1 !important;
}

.side-contact-tab i {
    font-size: 1.15rem;
    line-height: 1 !important;
}

.side-contact-tab span {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1 !important;
    letter-spacing: 0.04em;
}

.side-contact-phone {
    background: linear-gradient(180deg, #f3e2c7 0%, #e9c58f 100%);
}

.side-contact-reserve {
    background: linear-gradient(180deg, #fff0d8 0%, #f0b980 100%);
}

.side-contact-line {
    background: linear-gradient(180deg, #dff5dc 0%, #8fd48a 100%);
}

.side-contact-tab:hover,
.side-contact-tab:focus {
    color: #3a2f23 !important;
    text-decoration: none !important;
    transform: translateX(-4px);
}


/* ==================================================
   18-2. スマホ下部固定コンタクトボタン
================================================== */

.sp-bottom-contact {
    display: none;
}

@media screen and (max-width: 767.98px) {
    .side-contact-tabs {
        display: none;
    }

    .sp-bottom-contact {
        position: fixed;
        left: 8px;
        right: 8px;
        bottom: 8px;
        z-index: 10030;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        padding: 6px;
        background: rgba(255, 255, 255, 0.94);
        border: 1px solid rgba(186, 157, 120, 0.34);
        border-radius: 18px;
        box-shadow:
            0 10px 26px rgba(80, 60, 35, 0.14),
            0 2px 10px rgba(0, 0, 0, 0.05);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .sp-bottom-contact-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-height: 52px;
        padding: 7px 6px;
        color: #2f2720 !important;
        background: linear-gradient(180deg, #fffdfa 0%, #f6efe5 100%);
        border: 1px solid rgba(186, 157, 120, 0.42);
        border-radius: 14px;
        text-decoration: none !important;
        line-height: 1 !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.96),
            0 4px 10px rgba(120, 95, 65, 0.08);
    }

    .sp-bottom-contact-btn i {
        font-size: 1.15rem;
        line-height: 1 !important;
    }

    .sp-bottom-contact-btn span {
        display: block;
        font-size: 0.7rem;
        font-weight: 700;
        line-height: 1 !important;
        letter-spacing: 0.04em;
    }

    body {
        padding-bottom: 78px;
    }
}

@media screen and (max-width: 390px) {
    .sp-bottom-contact {
        left: 6px;
        right: 6px;
        bottom: 6px;
        gap: 5px;
        padding: 5px;
        border-radius: 16px;
    }

    .sp-bottom-contact-btn {
        min-height: 48px;
        padding: 6px 4px;
    }

    .sp-bottom-contact-btn i {
        font-size: 1.05rem;
    }

    .sp-bottom-contact-btn span {
        font-size: 0.66rem;
    }
}

/* 18-2. スクロール後バナー用の開閉メニュー */
body.has-scroll-banner #Navbar {
    position: fixed !important;
    top: 88px !important;
    left: 14px !important;
    right: 14px !important;
    z-index: 10018 !important;
    display: block !important;
    width: auto !important;
    max-height: calc(100vh - 108px);
    overflow-y: auto;
    padding: 18px 16px !important;
    background: rgba(255, 255, 255, 0.97) !important;
    border: 1px solid rgba(186, 157, 120, 0.34) !important;
    border-radius: 24px !important;
    box-shadow:
        0 18px 42px rgba(90, 65, 35, 0.12),
        0 6px 18px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-18px);
    transition:
        opacity 0.24s ease,
        visibility 0.24s ease,
        transform 0.24s ease;
}

body.has-scroll-banner #Navbar.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

body.has-scroll-banner #Navbar .navbar-nav {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.has-scroll-banner #Navbar .nav-item {
    width: 100% !important;
    margin-bottom: 10px !important;
}

body.has-scroll-banner #Navbar .nav-item:last-child {
    margin-bottom: 0 !important;
}

body.has-scroll-banner #Navbar .nav-link {
    width: 100% !important;
    min-height: auto !important;
    padding: 13px 18px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #fffdfa 0%, #f7f1e8 100%) !important;
    border: 1px solid rgba(186, 157, 120, 0.34) !important;
    color: #2f2720 !important;
    text-align: center !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 4px 10px rgba(120, 95, 65, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

body.has-scroll-banner #Navbar .nav-link:hover,
body.has-scroll-banner #Navbar .nav-link:focus {
    background: linear-gradient(180deg, #fffefc 0%, #f4eadc 100%) !important;
    color: #2f2720 !important;
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        0 6px 12px rgba(120, 95, 65, 0.08);
}

/* 18-3. SNSリンク */
.nav-sns-item {
    flex: 0 0 100% !important;
}

.nav-sns-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    padding-top: 12px;
}

.nav-sns-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: linear-gradient(180deg, #fffdfa 0%, #f6efe5 100%);
    color: #2f2720 !important;
    border: 1px solid rgba(186, 157, 120, 0.4);
    border-radius: 50%;
    text-decoration: none !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 5px 12px rgba(120, 95, 65, 0.08);
}

.nav-sns-link i {
    font-size: 1.2rem;
}

.nav-sns-link:hover,
.nav-sns-link:focus {
    background: linear-gradient(180deg, #fffefc 0%, #f3e8d8 100%);
    color: #2f2720 !important;
    text-decoration: none !important;
}

/* 18-4. PC通常ナビ側のSNS表示調整 */
@media screen and (min-width: 768px) {
    .mod-gnav .nav-sns-item {
        flex: 0 0 auto !important;
    }

    .mod-gnav .nav-sns-links {
        padding-top: 0;
    }

    .mod-gnav .nav-sns-link {
        width: 40px;
        height: 40px;
    }
}

/* 18-5. スクロール後固定メニュー：スマホ調整 */
@media screen and (max-width: 767.98px) {
    .scroll-top-banner {
        height: 68px;
        padding: 8px 10px;
    }

    .scroll-top-brand {
        gap: 8px;
        max-width: calc(100% - 145px);
    }

    .scroll-top-logo {
        width: 46px;
        height: 46px;
    }

    .scroll-top-logo img {
        height: 36px;
    }

    .scroll-top-name {
        font-size: 0.8rem;
        line-height: 1.2 !important;
        white-space: normal;
    }

    .scroll-top-actions {
        gap: 6px;
    }

    .scroll-top-tel {
    padding: 0;
    font-size: 0.72rem;
    }
    
    .scroll-top-menu-btn {
        min-width: 78px;
        min-height: 38px;
        padding: 7px 14px;
    }

    .scroll-top-menu-text {
        font-size: 0.74rem;
        letter-spacing: 0.08em;
    }

    body.has-scroll-banner #Navbar {
        top: 68px !important;
        left: 10px !important;
        right: 10px !important;
        max-height: calc(100vh - 96px);
        padding: 16px 12px !important;
    }
}

@media screen and (max-width: 390px) {
    .scroll-top-name {
        font-size: 0.72rem;
    }

    .scroll-top-tel {
    font-size: 0.66rem;
    padding: 0;
    }

    .scroll-top-menu-btn {
        min-width: 72px;
        padding: 7px 10px;
    }

    .scroll-top-menu-text {
        font-size: 0.68rem;
    }
}

/* ==================================================
   19. 営業時間案内：シンプル表
   ※現在のschedule.html形式によって使用有無を確認
================================================== */
.schedule-simple-box {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.schedule-info-table {
    border-collapse: collapse;
    border: 2px solid rgba(var(--color-main-rgb), 0.35);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.05);
}

.schedule-info-table th,
.schedule-info-table td {
    vertical-align: middle !important;
    padding: 18px 22px !important;
    border-color: rgba(var(--color-main-rgb), 0.35) !important;
    font-size: 1.25rem !important;
    line-height: 1.7 !important;
}

.schedule-info-table th {
    width: 34%;
    background: var(--color-main) !important;
    color: var(--color-black) !important;
    font-weight: bold;
    white-space: nowrap;
}

.schedule-info-table td {
    width: 66%;
    background: var(--color-white) !important;
    color: var(--color-black) !important;
    font-weight: 700;
}

.schedule-small-note {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.95rem;
    font-weight: 500;
}

@media screen and (max-width: 767.98px) {
    .schedule-info-table th,
    .schedule-info-table td {
        display: block;
        width: 100%;
        padding: 14px 16px !important;
        font-size: 1.05rem !important;
    }

    .schedule-info-table th {
        border-bottom: none !important;
    }

    .schedule-info-table td {
        border-top: none !important;
    }

    .schedule-small-note {
        font-size: 0.9rem;
    }
}

/* ==================================================
   PC・タブレット：画面高さが低い時のTOP表示調整
   ※campaignは中央ではなく、やや下寄りに表示
================================================== */

@media screen and (min-width: 768px) and (max-height: 760px) {
    .hero-logo {
        top: 2%;
    }

    .hero-logo img {
        width: min(28vw, 320px);
    }

    .hero-catch {
        top: 22%;
    }

    .hero-campaign {
        top: 45%;
    }

    .campaign-item {
        padding: 8px 14px;
        border-radius: 16px;
    }

    .campaign-label {
        padding: 3px 12px;
        margin-bottom: 4px;
        font-size: 0.85rem;
    }

    .campaign-item p {
        font-size: 0.9rem;
        line-height: 1.35rem !important;
    }
}

.access-map {
    width: 100%;
    max-width: 100%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

.access-map iframe {
    display: block;
    width: 100%;
    height: 360px;
}

@media screen and (max-width: 767.98px) {
    .access-map iframe {
        height: 280px;
    }
}

@media screen and (max-width: 767.98px) {
    .mod-gnav .navbar-toggler {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 6px 10px;
        line-height: 1;
    }

    .mod-gnav .navbar-toggler-label {
        display: block;
        font-size: 0.68rem;
        font-weight: 700;
        line-height: 1 !important;
        letter-spacing: 0.06em;
        color: var(--color-black);
    }
}

@media screen and (max-width: 767.98px) {
    .schedule-sp-table {
        width: 100%;
        table-layout: fixed;
        margin-bottom: 0;
    }

    .schedule-sp-table th,
    .schedule-sp-table td {
        padding: 8px 4px !important;
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        white-space: nowrap;
    }

    .schedule-sp-table th {
        background-color: var(--color-main) !important;
        color: var(--color-black) !important;
        font-weight: bold;
    }

    .schedule-sp-table td {
        background-color: var(--color-white) !important;
        color: var(--color-black) !important;
        font-weight: 700;
    }
}

.schedule-note-wrap {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}