@charset "UTF-8";
/* ============================================================
   せきや歯科クリニック オリジナルテーマ — main.css
   Elementor版のデザインシステムを継承
   ============================================================ */

:root {
    /* カラー（Elementorグローバルカラーより） */
    --c-primary: #56B46C;        /* ブランドグリーン */
    --c-primary-dark: #3f9c55;
    --c-primary-light: #e8f5ec;
    --c-accent: #C9FF00;         /* ライムアクセント */
    --c-brown: #776649;          /* ロゴ文字色 */
    --c-cream: #FFFEE5;
    --c-pale: #F5F2B7;
    --c-gray: #54595F;
    --c-text: #3a3a3a;
    --c-muted: #777;
    --c-line: #e3e3e3;
    --c-white: #fff;

    /* フォント */
    --f-sans: "Noto Sans JP", -apple-system, "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    --f-serif: "Noto Serif JP", "Hiragino Mincho ProN", serif;

    /* レイアウト */
    --container: 1120px;
    --radius: 14px;
    --shadow: 0 6px 24px rgba(0, 0, 0, .08);
}

/* ----- リセット ----- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--f-sans);
    color: var(--c-text);
    line-height: 1.8;
    background: var(--c-white);
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; vertical-align: bottom; }
a { color: inherit; text-decoration: none; transition: opacity .2s, color .2s, background .2s; }
a:hover { opacity: .85; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.4; font-weight: 700; }

.container { width: min(100% - 40px, var(--container)); margin-inline: auto; }

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

/* ============================================================
   セクション見出し
   ============================================================ */
.section-title {
    text-align: center;
    font-family: var(--f-serif);
    font-size: clamp(1.5rem, 4vw, 2.1rem);
    color: var(--c-primary-dark);
    margin-bottom: 2.5rem;
}
.section-title__en {
    display: block;
    font-family: var(--f-sans);
    font-size: .8rem;
    letter-spacing: .25em;
    color: var(--c-primary);
    font-weight: 600;
    margin-bottom: .4rem;
}
.section-title--light, .section-title--light .section-title__en { color: var(--c-white); }
.section-title--left { text-align: left; }

/* 点線アンダーライン付き見出し（診療科目など） */
.section-title--dotted { margin-bottom: 3rem; }
.section-title--dotted::after {
    content: ""; display: block; width: 360px; max-width: 80%; margin: 1rem auto 0;
    border-bottom: 2px dotted #b8bdb0;
}

/* ============================================================
   ボタン
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .9rem 2rem;
    border-radius: 999px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    transition: transform .15s, box-shadow .2s, background .2s;
}
.btn--primary { background: var(--c-primary); color: var(--c-white); box-shadow: 0 6px 16px rgba(86, 180, 108, .35); }
.btn--primary:hover { background: var(--c-primary-dark); opacity: 1; transform: translateY(-2px); }
.btn--outline { background: transparent; color: var(--c-primary-dark); border: 2px solid var(--c-primary); }
.btn--outline:hover { background: var(--c-primary); color: var(--c-white); opacity: 1; }
.btn--tel { flex-direction: column; gap: 0; background: var(--c-white); color: var(--c-primary-dark); border: 2px solid var(--c-primary); }
.btn--tel:hover { opacity: 1; transform: translateY(-2px); }
.btn__tel-label { font-size: .7rem; font-weight: 500; }
.btn__tel-num { font-size: 1.3rem; font-weight: 700; letter-spacing: .02em; }

/* ============================================================
   ヘッダー（上段：診療時間／ロゴ／電話・アクセス）
   ============================================================ */
/* 上段は追従させない（スクロールで流れる）。ナビ帯だけ固定する分割追従型。 */
.site-header { position: relative; z-index: 90; background: var(--c-white); }
.header-top__inner {
    width: min(100% - 32px, 1400px);
    margin-inline: auto;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    gap: 1rem; padding: .55rem 0;
}

/* ヘッダー内の診療時間（コンパクト） */
.header-top__hours { justify-self: start; }
.header-top__hours .hours-table,
.header-top__hours .hours-table th,
.header-top__hours .hours-table td { font-weight: 700; }
.header-top__hours .hours-table { font-size: .7rem; }
.header-top__hours .hours-table th,
.header-top__hours .hours-table td { border-width: 1.5px; padding: .25rem .4rem; }
.header-top__hours .hours-table thead th { font-size: .72rem; }
.header-top__hours .hours-table__time { font-size: .64rem; }
.header-top__hours .hours-table__time span { font-size: .87rem; }
.header-top__hours .hours-table td.is-open { font-size: .95rem; }

/* ロゴ（パンダ＋HTMLテキスト・中央） */
.site-logo { justify-self: center; }
.site-logo__link { display: inline-flex; align-items: center; gap: .8rem; }
.site-logo__mark { width: 76px; height: 76px; }
.site-logo__text { display: flex; flex-direction: column; line-height: 1.12; }
.site-logo__jp { font-family: 'M PLUS Rounded 1c', var(--f-sans); font-weight: 700; font-size: clamp(2.0rem, 4vw - 0.5rem, 4.2rem); color: var(--c-brown); letter-spacing: .02em; white-space: nowrap; }
.site-logo__en { font-size: 1.28rem; letter-spacing: .3em; color: var(--c-brown); opacity: .8; }

/* 電話・アクセス（右） */
.header-top__contact { justify-self: end; }
.header-tel { display: inline-flex; align-items: center; gap: .6rem; color: var(--c-primary-dark); }
.header-tel:hover { opacity: 1; }
.header-tel__icon { color: var(--c-primary); display: inline-flex; }
.header-tel__body { display: flex; flex-direction: column; }
.header-tel__num { font-size: 1.55rem; font-weight: 700; line-height: 1.05; letter-spacing: .01em; white-space: nowrap; }
.header-tel__access { font-size: .78rem; color: var(--c-muted); white-space: nowrap; }

/* ============================================================
   グローバルナビ（クリーム色帯・区切り線・ドロップダウン）
   ============================================================ */
.global-nav { position: sticky; top: 0; z-index: 100; background: var(--c-cream); border-top: 1px solid #efe9c4; box-shadow: 0 2px 8px rgba(0, 0, 0, .06); }
.global-nav__inner { width: min(100% - 40px, var(--container)); margin-inline: auto; }
.global-nav .nav-menu { display: flex; align-items: stretch; justify-content: center; }
.global-nav .nav-menu > li { position: relative; }
.global-nav .nav-menu > li + li { border-left: 1px dotted #cfc89a; }
.global-nav .nav-menu > li > a {
    display: flex; align-items: center; gap: .35rem;
    font-family: var(--f-serif); font-weight: 600; font-size: 1.02rem;
    color: var(--c-brown); padding: 1rem 1.6rem; position: relative;
}
.global-nav .nav-menu > li > a:hover { color: var(--c-primary-dark); opacity: 1; }
.global-nav .nav-menu > li > a::after {
    content: ""; position: absolute; left: 1.6rem; right: 1.6rem; bottom: .65rem; height: 2px;
    background: var(--c-primary); transform: scaleX(0); transition: transform .25s;
}
.global-nav .nav-menu > li.current-menu-item > a::after,
.global-nav .nav-menu > li > a:hover::after { transform: scaleX(1); }
.global-nav .nav-menu > li.current-menu-item > a { color: var(--c-primary-dark); }
.nav-caret { font-size: .6rem; }

/* ドロップダウン */
.global-nav .sub-menu {
    position: absolute; top: 100%; left: 0; min-width: 200px; z-index: 50;
    background: var(--c-white); box-shadow: var(--shadow); border-radius: 0 0 8px 8px;
    padding: .4rem 0; opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .2s, transform .2s, visibility .2s;
}
.global-nav .menu-item-has-children:hover .sub-menu,
.global-nav .menu-item-has-children:focus-within .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.global-nav .sub-menu a { display: block; padding: .65rem 1.4rem; font-size: .92rem; color: var(--c-text); }
.global-nav .sub-menu a:hover { background: var(--c-primary-light); color: var(--c-primary-dark); opacity: 1; }

/* ハンバーガー（SVGアイコン） */
.nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer; color: var(--c-primary-dark); }
.nav-toggle svg { display: block; }
.nav-toggle .nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

/* ============================================================
   ヒーロー
   ============================================================ */
.hero {
    position: relative;
    min-height: clamp(440px, 50vw, 720px);
    overflow: hidden;
    isolation: isolate;
}
/* 背景スライドショー（写真を全面にクリア表示。下部は緑帯を残す） */
.hero__slideshow { position: absolute; inset: 0 0 90px 0; z-index: -2; background: var(--c-primary-light); }
.hero__slide {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0; transition: opacity 1s ease-in-out;
}
.hero__slide.is-active { opacity: 1; }

/* 下部の緑帯 */
.hero__base { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: -1; background: var(--c-primary); }

/* ポイント（3バッジ＋竹・本番と同一の画像／右下） */
.hero__points {
    position: absolute; right: clamp(10px, 4vw, 60px); bottom: 6px; z-index: 2;
    width: clamp(300px, 46vw, 620px);
}
.hero__points img { width: 100%; height: auto; display: block; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .12)); }

/* ============================================================
   診療時間テーブル（画像をHTML化）
   ============================================================ */
.hours-table { width: 100%; border-collapse: collapse; text-align: center; font-weight: 600; }
.hours-table th, .hours-table td { border: 2px solid var(--c-primary); padding: .55rem .3rem; }
.hours-table thead th { background: var(--c-primary); color: var(--c-white); font-size: .95rem; }
.hours-table__corner { background: var(--c-white) !important; border-color: var(--c-primary); }
.hours-table__time { background: var(--c-primary-light); font-size: .8rem; color: var(--c-primary-dark); white-space: nowrap; }
.hours-table__time span { display: block; font-size: 1.08rem; font-weight: 500; }
.hours-table td.is-open { color: var(--c-primary); font-size: 1.15rem; }
.hours-table td.is-closed { color: var(--c-muted); }
.hours-note { font-size: .78rem; color: var(--c-muted); margin: .8rem 0 0; line-height: 1.6; }

/* ============================================================
   お知らせ
   ============================================================ */
.news { background: var(--c-cream); padding: clamp(2.5rem, 5vw, 3.5rem) 0; }
.news__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.news__main { display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; align-items: stretch; }
.news__label {
    background: var(--c-brown); color: #e7eecf;
    font-family: var(--f-serif); font-style: italic; font-size: 1.5rem; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    padding: 0 1.2rem; margin: 0; min-height: 100%;
}
.news__list { display: flex; flex-direction: column; justify-content: center; }
.news__item { border-bottom: 1px dotted #d8d2a8; }
.news__link { display: block; padding: .7rem .2rem; transition: background .2s; }
.news__link:hover { opacity: 1; background: rgba(255, 255, 255, .5); }
.news__text { display: block; margin: 0 0 .2rem; font-weight: 600; font-size: .95rem; color: var(--c-text); }
.news__link:hover .news__text { color: var(--c-primary-dark); }
.news__date { display: block; color: var(--c-muted); font-size: .78rem; }
.news__hours .hours-note { color: var(--c-muted); }
.news__more { text-align: right; margin: .6rem 0 0; }
.news__more a { color: var(--c-primary-dark); font-size: .85rem; font-weight: 600; }

/* ============================================================
   診療科目（円アイコン横並び）
   ============================================================ */
.services { padding: clamp(3rem, 6vw, 4.5rem) 0; background: var(--c-white); }
.services__row { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1rem, 3vw, 2.4rem); }
.service-item { text-align: center; }
.service-item__link { display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.service-item__link:hover { opacity: 1; }
.service-item__icon img { width: clamp(76px, 8vw, 104px); height: auto; border-radius: 50%; transition: transform .3s; }
.service-item__link:hover .service-item__icon img { transform: translateY(-4px); }
.service-item__title { font-size: .95rem; color: var(--c-text); font-weight: 600; }
.service-item__link:hover .service-item__title { color: var(--c-primary-dark); }

/* ============================================================
   特徴（白カード＋写真・横4列）
   ============================================================ */
.features {
    padding: clamp(3rem, 6vw, 5rem) 0;
    background-color: #f7fbf8;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* タイトルの緑楕円装飾 */
.section-title--ellipse .section-title__deco { position: relative; display: inline-block; padding: .35em 1.6em; z-index: 0; }
.section-title--ellipse .section-title__deco::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    border: 2px solid var(--c-primary); border-radius: 50%;
    transform: scaleX(1.05); opacity: .55;
}

.features__list {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem;
    align-items: stretch;
}
.feature-card {
    position: relative;
    background: var(--c-white);
    border-radius: 6px;
    box-shadow: var(--shadow);
    padding: 2.6rem 1.3rem 1.6rem;
    text-align: left;
}
.feature-card__num {
    position: absolute; top: .6rem; left: 0; right: 0;
    text-align: center;
    font-family: var(--f-serif); font-weight: 400;
    font-size: 2.4rem; line-height: 1; color: #c9cdc9;
}
.feature-card__photo { margin: 0 0 1rem; border-radius: 4px; overflow: hidden; aspect-ratio: 3 / 2; }
.feature-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feature-card__title {
    font-family: var(--f-serif); font-size: 1.12rem; color: var(--c-text);
    margin-bottom: .6rem; padding-bottom: .5rem; border-bottom: 1px solid var(--c-line);
}
.feature-card__desc { font-size: .85rem; margin: 0; color: var(--c-text); }

.features__more { text-align: center; margin-top: 2.4rem; }

/* ============================================================
   院内紹介（ギャラリー）
   ============================================================ */
.clinic-gallery { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--c-white); overflow: hidden; }
.section-lead { text-align: center; color: var(--c-muted); font-size: .95rem; margin: -1.8rem 0 3rem; }
.gallery__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 5%; max-width: 1000px; margin-inline: auto; align-items: start; }
.gallery-item { position: relative; margin-bottom: 2.5rem; }
.gallery-item:nth-child(even) { margin-top: 3.5rem; }      /* 右列を下へずらす千鳥配置 */
.gallery-item__photo { margin: 0; border-radius: 4px; overflow: hidden; aspect-ratio: 3 / 2; box-shadow: var(--shadow); }
.gallery-item__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.gallery-item:hover .gallery-item__photo img { transform: scale(1.04); }

/* 半透明の緑円バッジ（タイトル＋説明） */
.gallery-badge {
    position: absolute; z-index: 2;
    width: clamp(155px, 17vw, 215px); aspect-ratio: 1; border-radius: 50%;
    background: rgba(86, 180, 108, .85); color: var(--c-white);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 1rem;
}
.gallery-badge--br { right: -18px; bottom: -30px; }        /* 左列写真：右下 */
.gallery-badge--tl { left: -18px; top: -30px; }            /* 右列写真：左上 */
.gallery-badge__title { font-family: var(--f-serif); font-weight: 700; font-size: clamp(1.05rem, 1.5vw, 1.35rem); margin-bottom: .5rem; }
.gallery-badge__desc { font-size: clamp(.72rem, .92vw, .82rem); line-height: 1.55; }

/* ============================================================
   院長メッセージ
   ============================================================ */
.message { padding: clamp(3rem, 6vw, 5rem) 0; }
.message__inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: center; }
/* 入口サイン＋院長切り抜きの合成 */
.message__photo { position: relative; margin: 0; }
.message__photo-bg { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); display: block; }
.message__photo-dr { position: absolute; left: 2%; bottom: 0; width: 64%; height: auto; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .25)); }
.message__body p { margin: 0 0 1.2rem; }
.message__sign { font-family: var(--f-serif); font-weight: 600; color: var(--c-brown); }
.message__sign-en { font-style: italic; font-weight: 400; font-size: .85rem; color: var(--c-muted); margin-left: .6rem; }

/* ============================================================
   アクセス（地図）
   ============================================================ */
.access { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--c-white); }
.access__inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2.5rem; align-items: stretch; }
.access__map { position: relative; min-height: 340px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.access__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.access__info { display: flex; flex-direction: column; justify-content: center; gap: 1.4rem; }
.access__list { margin: 0; }
.access__list div { display: flex; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--c-line); }
.access__list dt { min-width: 5em; font-weight: 600; color: var(--c-primary-dark); margin: 0; }
.access__list dd { margin: 0; }
.access__list a { color: var(--c-primary-dark); font-weight: 700; }

/* ============================================================
   CTA
   ============================================================ */
.cta {
    padding: clamp(3rem, 6vw, 4.5rem) 0;
    background: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark));
    color: var(--c-white); text-align: center;
}
.cta__title { font-family: var(--f-serif); font-size: clamp(1.4rem, 4vw, 2rem); margin-bottom: .6rem; }
.cta__text { margin: 0 0 1.8rem; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.cta .btn--primary { background: var(--c-white); color: var(--c-primary-dark); }
.cta .btn--tel { background: transparent; color: var(--c-white); border-color: var(--c-white); }

/* ============================================================
   フッター
   ============================================================ */
.site-footer { background: var(--c-cream); color: var(--c-text); padding: 3rem 0 1.5rem; }
.site-footer__inner {
    width: min(100% - 40px, var(--container)); margin-inline: auto;
    display: grid; grid-template-columns: 1fr 1.3fr; gap: 2.5rem; align-items: start;
}
.site-footer__mark { width: 92px; height: 92px; }
.site-footer__name { font-family: 'M PLUS Rounded 1c', var(--f-sans); font-size: 1.4rem; font-weight: 700; color: var(--c-brown); margin: .6rem 0 .1rem; }
.site-footer__en { font-size: .7rem; letter-spacing: .2em; color: var(--c-brown); opacity: .7; margin: 0; }
.site-footer__address { margin: 1.2rem 0 0; }
.site-footer__address div { display: flex; gap: 1rem; padding: .4rem 0; border-bottom: 1px solid rgba(0, 0, 0, .1); }
.site-footer__address dt { min-width: 5em; font-weight: 600; color: var(--c-primary-dark); margin: 0; }
.site-footer__address dd { margin: 0; }
.site-footer__address a { color: var(--c-primary-dark); font-weight: 700; }
.site-footer__hours-title { font-family: var(--f-serif); color: var(--c-primary-dark); margin-bottom: 1rem; }
/* フッターの診療時間表（見やすさと大きさのバランス） */
.site-footer__hours .hours-table th, .site-footer__hours .hours-table td { padding: .6rem .35rem; }
.site-footer__hours .hours-table thead th { font-size: 1.12rem; }
.site-footer__hours .hours-table__time { font-size: .96rem; }
.site-footer__hours .hours-table__time span { font-size: 1.3rem; }
.site-footer__hours .hours-table td.is-open { font-size: 1.35rem; }
.site-footer__hours .hours-table td.is-closed { font-size: 1.2rem; }
.site-footer__hours .hours-note { font-size: .88rem; margin-top: 1rem; }

.site-footer__copy { text-align: center; font-size: .78rem; color: var(--c-muted); margin: 2rem 0 0; }

/* ============================================================
   モバイル固定 電話ボタン（スマホのみ）
   ============================================================ */
.mobile-callbar { display: none; }
@media (max-width: 768px) {
    .mobile-callbar {
        display: flex; align-items: center; justify-content: center; gap: .6rem;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
        background: var(--c-primary); color: var(--c-white);
        padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
        box-shadow: 0 -3px 14px rgba(0, 0, 0, .18);
    }
    .mobile-callbar:hover { opacity: 1; }
    .mobile-callbar__icon { display: inline-flex; }
    .mobile-callbar__body { display: flex; flex-direction: column; line-height: 1.15; }
    .mobile-callbar__label { font-size: .7rem; font-weight: 500; }
    .mobile-callbar__num { font-size: 1.35rem; font-weight: 700; letter-spacing: .02em; }
    /* 固定バーに隠れないよう余白 */
    body { padding-bottom: 64px; }
}

/* ============================================================
   下層ページ共通：ページバナー
   ============================================================ */
.page-banner { background-size: cover; background-position: center; padding: clamp(3rem, 8vw, 6rem) 0; text-align: center; }
.page-banner__inner { width: min(100% - 40px, var(--container)); margin-inline: auto; }
.page-banner__title { font-family: var(--f-serif); font-size: clamp(1.9rem, 5vw, 2.8rem); color: var(--c-brown); }
.page-banner__en { font-size: .78rem; letter-spacing: .3em; color: var(--c-primary-dark); opacity: .85; margin: .5rem 0 0; }
.page-banner__sub { font-size: 1rem; color: var(--c-gray); margin: 1rem 0 0; }

/* アクセス：全幅マップ */
.access-map { width: 100%; line-height: 0; }
.access-map iframe { display: block; width: 100%; height: clamp(320px, 42vw, 460px); border: 0; }

/* アクセス：医院情報テーブル */
.info-table { width: 100%; border-collapse: collapse; margin: 0 auto; max-width: 860px; font-size: .95rem; }
.info-table th, .info-table td { border: 1px solid #cfe3d3; padding: 1rem 1.4rem; text-align: left; vertical-align: middle; }
.info-table__head { background: var(--c-primary); color: var(--c-white); font-weight: 700; font-size: 1rem; }
.info-table tbody th:not(.info-table__head) { background: #eef7f0; color: var(--c-gray); font-weight: 700; white-space: nowrap; width: 26%; text-align: center; }
.info-table__note { font-size: .82rem; color: var(--c-gray); }

/* アクセス：駐車場 */
.access-parking { max-width: 860px; margin: 2.4rem auto 0; }
.access-parking__label { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--c-gray); margin: 0 0 1rem; }
.access-parking__icon { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; background: var(--c-gray); color: var(--c-white); border-radius: 3px; font-size: .8rem; font-weight: 700; }
.access-parking__photo { text-align: center; }
.access-parking__photo img { max-width: 560px; width: 100%; height: auto; border-radius: 4px; }

/* 当院について：診療理念 */
.philosophy { padding: clamp(3rem, 6vw, 5rem) 0; }
.philosophy__inner { display: grid; grid-template-columns: 1.2fr .8fr; gap: 3rem; align-items: center; }
.philosophy__catch { font-family: var(--f-serif); font-size: 1.2rem; color: var(--c-primary-dark); font-weight: 700; margin: 0 0 1.2rem; }
.philosophy__body p { margin: 0 0 1.2rem; }
.philosophy__photo { margin: 0; }
.philosophy__photo img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); }

/* 当院について：特徴（画像＋テキストの交互行） */
.about-features { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--c-primary-light); }
.feature-rows { display: flex; flex-direction: column; gap: 2.5rem; max-width: 980px; margin-inline: auto; }
.feature-row { display: flex; align-items: stretch; background: var(--c-white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.feature-row--reverse { flex-direction: row-reverse; }
.feature-row__photo { margin: 0; flex: 0 0 44%; }
.feature-row__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feature-row__body { flex: 1 1 56%; padding: 1.8rem 2rem; }
.feature-row__title { font-family: var(--f-serif); font-size: 1.12rem; color: var(--c-primary-dark); margin-bottom: .8rem; line-height: 1.55; }
.feature-row__body p { margin: 0 0 1.2rem; font-size: .88rem; }

/* 当院について：医療機器・設備 */
.equipment { padding: clamp(3rem, 6vw, 5rem) 0; }
.equipment__intro { max-width: 820px; margin: 0 auto 2.6rem; text-align: center; }
.equipment__intro p:not(.philosophy__catch) { font-size: .92rem; text-align: left; }
.equipment__list { display: flex; flex-direction: column; gap: 2.5rem; max-width: 980px; margin-inline: auto; }
.equip-card { display: flex; align-items: center; gap: 2.5rem; }
.equip-card--reverse { flex-direction: row-reverse; }
.equip-card__photo {
    margin: 0; flex: 0 0 34%; height: 260px;
    display: flex; align-items: center; justify-content: center;
    background: var(--c-primary-light); border-radius: 10px; padding: 1rem;
}
.equip-card__photo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.equip-card__body { flex: 1 1 auto; }
.equip-card__title { font-family: var(--f-serif); font-size: 1.35rem; color: var(--c-primary-dark); border-bottom: 2px solid var(--c-primary-light); padding-bottom: .5rem; margin-bottom: .9rem; }
.equip-card__sub { font-size: .95rem; color: var(--c-brown); margin: 1rem 0 .3rem; padding-left: .6rem; border-left: 3px solid var(--c-primary); }
.equip-card__body p { font-size: .88rem; margin: 0 0 .6rem; }

/* 当院について：コロナ対策 */
.covid { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--c-primary-light); }
.covid__inner { display: grid; grid-template-columns: 1.4fr .6fr; gap: 2.5rem; align-items: start; }
.covid__body > p { margin: 0 0 1.2rem; }
.covid__block { background: var(--c-white); border-radius: var(--radius); padding: 1.2rem 1.5rem; margin-bottom: 1.2rem; }
.covid__head { font-size: 1rem; color: var(--c-primary-dark); margin-bottom: .6rem; }
.covid__list { margin: 0; padding-left: 1.2rem; }
.covid__list li { list-style: disc; font-size: .85rem; margin-bottom: .35rem; }
.covid__photo { margin: 0; position: sticky; top: 90px; }
.covid__photo img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); }

/* ============================================================
   診療科目ページ 共通コンポーネント
   ============================================================ */
/* 緑のピル見出し（当院の一般歯科 など） */
.svc-pill {
    display: block; width: fit-content; margin: 0 auto 2.5rem;
    background: var(--c-primary); color: var(--c-white);
    font-family: var(--f-serif); font-size: clamp(1.2rem, 2.6vw, 1.6rem);
    padding: .6rem 2.4rem; border-radius: 999px; text-align: center;
}

/* トピックのインデックス（写真カードのグリッド） */
.svc-index { padding: clamp(3rem, 6vw, 4.5rem) 0; background: var(--c-primary-light); }
.svc-index__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; max-width: 900px; margin-inline: auto; }
.svc-index-card { background: var(--c-white); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); }
.svc-index-card__link { display: block; }
.svc-index-card__link:hover { opacity: 1; }
.svc-index-card__photo { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.svc-index-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.svc-index-card__link:hover .svc-index-card__photo img { transform: scale(1.06); }
.svc-index-card__label { display: block; text-align: center; font-weight: 600; color: var(--c-primary-dark); padding: .8rem .4rem; font-size: .95rem; }

/* トピック本文ブロック */
.svc-block { padding: clamp(2.8rem, 6vw, 4.5rem) 0; scroll-margin-top: 80px; }
.svc-block--alt { background: #f7fbf8; }
.svc-block__title { font-family: var(--f-serif); font-size: clamp(1.5rem, 3.5vw, 2rem); color: var(--c-primary-dark); text-align: center; margin-bottom: 2rem; position: relative; }
.svc-block__title::after { content: ""; display: block; width: 60px; height: 3px; background: var(--c-primary); margin: .8rem auto 0; border-radius: 2px; }
.svc-block .container { max-width: 880px; }
.svc-sub { font-family: var(--f-serif); font-size: 1.2rem; color: var(--c-brown); margin: 2rem 0 .8rem; padding-left: .7rem; border-left: 4px solid var(--c-primary); }
.svc-subsub { font-size: 1.02rem; color: var(--c-primary-dark); font-weight: 700; margin: 1.4rem 0 .4rem; }
.svc-subsub::before { content: "◆"; color: var(--c-primary); font-size: .7em; margin-right: .4rem; vertical-align: middle; }
.svc-block p { margin: 0 0 1.2rem; }

/* 進行段階ボックス（C0〜C4） */
.stage { display: flex; gap: 1.6rem; background: var(--c-white); border: 1px solid var(--c-line); border-radius: 10px; padding: 1.4rem; margin-bottom: 1.4rem; align-items: flex-start; }
.stage__photo { flex: 0 0 200px; margin: 0; border-radius: 8px; overflow: hidden; }
.stage__photo img { width: 100%; height: auto; display: block; }
.stage__body { flex: 1 1 auto; }
.stage__label { font-size: 1.1rem; color: var(--c-primary-dark); margin-bottom: .5rem; }
.stage__body p { margin: 0 0 .8rem; font-size: .9rem; }

/* セクション内の図版（CT画像など） */
.svc-figure { margin: 0 0 1.4rem; text-align: center; }
.svc-figure img { max-width: min(100%, 440px); height: auto; border-radius: 10px; box-shadow: var(--shadow); }

/* 治療法カラー */
.treat { background: var(--c-primary-light); border-radius: 8px; padding: .9rem 1.1rem; }
.treat__label { display: inline-block; font-weight: 700; color: var(--c-white); background: var(--c-primary); font-size: .78rem; padding: .15rem .8rem; border-radius: 999px; margin-bottom: .4rem; }
.treat p { margin: 0; font-size: .88rem; }

/* メリット・デメリット */
.md { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 1.4rem; }
.md__col { background: var(--c-white); border: 1px solid var(--c-line); border-radius: 10px; padding: 1.2rem 1.4rem; }
.md__title { font-size: 1rem; margin-bottom: .6rem; color: var(--c-text); }
.md__col ul { padding-left: 1.2rem; }
.md__col li { list-style: disc; font-size: .85rem; margin-bottom: .35rem; }

/* 画像＋テキスト（入れ歯・ブリッジ導入） */
.svc-media { display: flex; gap: 1.8rem; align-items: center; margin-bottom: 1.4rem; }
.svc-media__photo { flex: 0 0 42%; margin: 0; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); }
.svc-media__photo img { width: 100%; height: auto; display: block; }
/* 縦長写真を顔中心の正方形にトリミング（右の余白を抑える） */
.svc-media__photo--face { flex-basis: 300px; aspect-ratio: 1 / 1; }
.svc-media__photo--face img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
/* 縦長の切り抜き機器などを小さく（幅を半分に）。透過なので影・背景なし */
.svc-media__photo--sm { flex-basis: 26%; box-shadow: none; border-radius: 0; overflow: visible; }
.svc-media__photo--sm img { max-height: 360px; width: auto; margin-inline: auto; }
.svc-media__body { flex: 1 1 auto; }

/* 情報ボックス（総入れ歯・部分入れ歯 / 各種見出し付き解説） */
.info-box { background: var(--c-white); border: 1px solid var(--c-line); border-left: 4px solid var(--c-primary); border-radius: 6px; padding: 1.1rem 1.4rem; margin-bottom: 1rem; }
.info-box__title { font-size: 1.05rem; color: var(--c-primary-dark); margin-bottom: .4rem; }
.info-box p { margin: 0; font-size: .9rem; }

/* チェック/ドットのリスト（原因・症状・適応など） */
.svc-list { background: var(--c-primary-light); border-radius: 10px; padding: 1.2rem 1.6rem; margin: 0 0 1.4rem; list-style: none; }
.svc-list li { position: relative; padding: .35rem 0 .35rem 1.6rem; font-size: .92rem; border-bottom: 1px dotted #cfe3d5; }
.svc-list li:last-child { border-bottom: 0; }
.svc-list li::before { content: "✓"; position: absolute; left: 0; color: var(--c-primary); font-weight: 700; }

/* 番号付き解説ブロック（全身との関係 等） */
.num-list { counter-reset: n; display: grid; gap: 1rem; margin: 0 0 1.4rem; }
.num-item { position: relative; background: var(--c-white); border: 1px solid var(--c-line); border-radius: 10px; padding: .8rem 1.2rem .8rem 3rem; }
.num-item::before { counter-increment: n; content: counter(n); position: absolute; left: .8rem; top: .85rem; width: 1.6rem; height: 1.6rem; background: var(--c-primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; }
.num-item__title { font-size: 1rem; color: var(--c-primary-dark); margin: 0 0 .25rem; }
.num-item p { margin: 0; font-size: .88rem; }

/* 料金表 */
.price-table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; font-size: .9rem; }
.price-table th, .price-table td { border: 1px solid var(--c-line); padding: .7rem .9rem; text-align: center; }
.price-table thead th { background: var(--c-primary); color: #fff; font-weight: 600; }
.price-table .price-table__fee { font-weight: 400; color: var(--c-text); }

/* リスク項目のラベル（ホワイトニング「避けた方が良い方」等） */
.note-box .risk-label { display: block; font-weight: 700; color: var(--c-gray); margin-top: .3rem; }

/* 料金案内：目次 */
.price-index { background: var(--c-primary-light); padding: 1.6rem 0; }
.price-index__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }
.price-index__list a { display: inline-block; background: var(--c-white); border: 1px solid var(--c-primary); color: var(--c-primary-dark); font-weight: 600; padding: .5rem 1.4rem; border-radius: 999px; font-size: .9rem; }
.price-index__list a:hover { background: var(--c-primary); color: var(--c-white); opacity: 1; }

/* 矯正の料金タイプ区切り */
.ortho-type--sep { margin-top: 2.5rem; padding-top: 2rem; border-top: 2px dashed var(--c-line); }

/* 注意書き（リスク・副作用） */
.note-box { background: #f6f2ea; border: 1px solid #e2d8c2; border-radius: 10px; padding: 1.1rem 1.4rem; margin: 0 0 1.4rem; }
.note-box__title { font-size: .95rem; color: var(--c-brown); margin-bottom: .5rem; }
.note-box p, .note-box li { font-size: .84rem; }
.note-box ul { padding-left: 1.2rem; }
.note-box li { list-style: disc; margin-bottom: .35rem; }

/* 症例ボックス */
.case-box { background: var(--c-white); border: 1px solid var(--c-line); border-radius: 10px; padding: 1.4rem 1.6rem; margin: 0 0 1.4rem; }
.case-box__title { font-family: var(--f-serif); color: var(--c-primary-dark); font-size: 1.15rem; margin-bottom: .8rem; }
.case-meta { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.case-meta span { background: var(--c-primary-light); color: var(--c-primary-dark); font-size: .98rem; font-weight: 700; padding: .38rem 1rem; border-radius: 999px; }
.case-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0; }
.case-photos figure { margin: 0; border-radius: 8px; overflow: hidden; border: 1px solid var(--c-line); }
.case-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 600px) { .case-photos { grid-template-columns: 1fr; } }

/* ============================================================
   院長・スタッフ紹介
   ============================================================ */
.director-hero { background-size: cover; background-position: center; padding: clamp(1.4rem, 3vw, 2.4rem) 0 0; overflow: hidden; }
.director-hero__inner { display: flex; align-items: flex-end; justify-content: center; gap: clamp(2rem, 6vw, 5rem); }
.director-hero__name { text-align: center; align-self: center; padding-bottom: clamp(1.5rem, 4vw, 3rem); }
.director-hero__role { display: inline-block; color: var(--c-primary-dark); font-weight: 600; font-size: 1.25rem; letter-spacing: .12em; }
.director-hero__jp { font-family: var(--f-serif); font-size: clamp(2.6rem, 6vw, 3.6rem); color: var(--c-brown); margin: .3rem 0 .3rem; }
.director-hero__en { font-size: 1.05rem; font-weight: 700; letter-spacing: .2em; color: var(--c-primary-dark); opacity: .85; }
.director-hero__photo { margin: 0; flex: 0 0 auto; display: block; }
.director-hero__photo img { width: clamp(220px, 26vw, 330px); height: auto; display: block; vertical-align: bottom; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .18)); }

/* 画像＋テキスト（画像を右に） */
.svc-media--reverse { flex-direction: row-reverse; }

/* 院長あいさつ：笹の背景装飾（右側） */
.intro-greeting { position: relative; overflow: hidden; }
.intro-greeting::before {
    content: ""; position: absolute; top: 4rem; right: -40px; bottom: 0; width: 300px; z-index: 0;
    background: url("images/bamboo.png") right top / 240px auto repeat-y;
    opacity: .18; pointer-events: none;
}
.intro-greeting .container { position: relative; z-index: 1; }

/* 見出し（全幅・緑・下線） */
.intro-head { font-family: var(--f-serif); font-size: clamp(1.3rem, 3vw, 1.7rem); color: var(--c-primary-dark); margin: 2.4rem 0 1.4rem; padding: 0 0 .7rem .8rem; border-left: 4px solid var(--c-primary); border-bottom: 1px solid #d6ead9; }
.intro-head:first-of-type { margin-top: .5rem; }

/* テキスト＋画像の横並び（上揃え） */
.intro-row { display: flex; align-items: flex-start; gap: 2.5rem; margin-bottom: 1rem; }
.intro-row--reverse { flex-direction: row-reverse; }
.intro-row__text { flex: 1 1 auto; }
.intro-row__text p { margin: 0; }
.intro-row__photo { flex: 0 0 42%; margin: 0; border-radius: 6px; overflow: hidden; box-shadow: var(--shadow); }
.intro-row__photo img { width: 100%; height: auto; display: block; }

/* 経歴タイムライン */
.timeline { margin: 0; max-width: 760px; }
.timeline__row { display: grid; grid-template-columns: 15em 1fr; gap: 1rem; padding: .9rem 0; border-bottom: 1px dotted var(--c-line); }
.timeline dt { font-weight: 700; color: var(--c-primary-dark); margin: 0; }
.timeline dd { margin: 0; }

/* スタッフ在籍人数 */
.staff-list { max-width: 420px; margin: 0; }
.staff-list li { display: flex; justify-content: space-between; align-items: center; padding: .8rem 1.2rem; border-bottom: 1px solid var(--c-line); }
.staff-list li span { font-weight: 700; color: var(--c-primary-dark); }

/* ============================================================
   投稿・固定ページ 本文
   ============================================================ */
.page-content { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.container--narrow { width: min(100% - 40px, 820px); }

.post-single__head { text-align: center; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 2px solid var(--c-primary-light); }
.post-single__date { color: var(--c-primary); font-weight: 600; font-size: .9rem; }
.post-single__title { font-family: var(--f-serif); font-size: clamp(1.4rem, 3.5vw, 2rem); color: var(--c-brown); margin-top: .4rem; }
.post-single__thumb { margin: 0 0 1.8rem; }
.post-single__thumb img { width: 100%; border-radius: var(--radius); }
.post-single__back { text-align: center; margin-top: 2.5rem; }

.entry-body { line-height: 1.9; }
.entry-body h2 { font-family: var(--f-serif); font-size: 1.35rem; color: var(--c-primary-dark); margin: 2rem 0 .8rem; padding-left: .7rem; border-left: 4px solid var(--c-primary); }
.entry-body h3 { font-size: 1.15rem; color: var(--c-brown); margin: 1.6rem 0 .6rem; }
.entry-body p { margin: 0 0 1.2rem; }
.entry-body a { color: var(--c-primary-dark); text-decoration: underline; }
.entry-body img { height: auto; border-radius: 8px; }
.entry-body ul, .entry-body ol { margin: 0 0 1.2rem; padding-left: 1.4rem; }
.entry-body ul li { list-style: disc; }
.entry-body table { width: 100%; border-collapse: collapse; margin: 0 0 1.2rem; }
.entry-body th, .entry-body td { border: 1px solid var(--c-line); padding: .6rem .8rem; }

/* お知らせ本文：休診スケジュールなどの共通パーツ */
.notice-lead { margin: 0 0 1.6rem; text-align: center; }
.notice-heading { font-family: var(--f-serif); font-size: 1.3rem; color: var(--c-primary-dark); text-align: center; margin: 2rem 0 1.2rem; padding: 0; border: 0; }
.notice-schedule { list-style: none !important; margin: 0 auto 1.6rem !important; padding: 0 !important; max-width: 560px; border-top: 1px solid #d9e6dc; }
.notice-schedule li { list-style: none !important; display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.2rem; padding: .85rem .4rem; border-bottom: 1px solid #d9e6dc; text-align: center; }
.notice-schedule .notice-date { font-weight: 700; color: var(--c-gray); }
.notice-schedule .notice-desc { color: var(--c-text); }
.notice-closing { margin: 0; color: var(--c-gray); text-align: center; }

/* お知らせ一覧（page-news.php） */
.news-archive { list-style: none; margin: 0; padding: 0; border-top: 1px solid #e2e8e2; }
.news-archive__item { border-bottom: 1px solid #e2e8e2; }
.news-archive__link { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1.6rem; padding: 1.2rem .4rem; transition: background .15s; }
.news-archive__link:hover { background: #f6faf6; opacity: 1; }
.news-archive__date { color: var(--c-primary); font-weight: 600; font-size: .9rem; min-width: 6em; }
.news-archive__title { color: var(--c-text); font-weight: 500; }
.news-archive__empty { text-align: center; color: var(--c-gray); }

/* ページネーション */
.pagination { margin-top: 2.5rem; }
.pagination .page-numbers { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; padding: 0; margin: 0; }
.pagination .page-numbers a, .pagination .page-numbers span {
    display: inline-flex; align-items: center; justify-content: center; min-width: 2.4rem; height: 2.4rem;
    padding: 0 .6rem; border: 1px solid #cdd9ce; border-radius: 4px; color: var(--c-primary-dark); font-size: .9rem;
}
.pagination .page-numbers .current { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.pagination .page-numbers a:hover { background: var(--c-primary-light); opacity: 1; }

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 980px) {
    /* ヘッダー上段を縦並びに：診療時間は隠し、ロゴ＋電話 */
    .header-top__inner { grid-template-columns: auto 1fr; gap: 1rem; padding: .6rem 0; }
    .header-top__hours { display: none; }
    .site-logo { justify-self: start; }
    .site-logo__jp { font-size: 1.6rem; }
    .site-logo__en { font-size: .78rem; letter-spacing: .18em; }
    .site-logo__mark { width: 60px; height: 60px; }
    .header-top__contact { justify-self: end; }
    .header-tel__num { font-size: 1.4rem; }
}

@media (max-width: 880px) {
    .news__inner { grid-template-columns: 1fr; gap: 1.8rem; }
    .access__inner { grid-template-columns: 1fr; gap: 1.6rem; }
    .message__inner { grid-template-columns: 1fr; gap: 2rem; }
    .philosophy__inner { grid-template-columns: 1fr; gap: 2rem; }
    .covid__inner { grid-template-columns: 1fr; gap: 1.8rem; }
    .covid__photo { position: static; max-width: 420px; }
    .feature-row, .feature-row--reverse { flex-direction: column; }
    .feature-row__photo { flex-basis: auto; aspect-ratio: 3 / 2; }
    .director-hero__inner { flex-direction: column-reverse; gap: 1.5rem; }
    .intro-row, .intro-row--reverse { flex-direction: column; gap: 1.2rem; }
    .intro-row__photo { flex-basis: auto; width: 100%; max-width: 480px; }
    .intro-greeting::before { display: none; }
    .timeline__row { grid-template-columns: 1fr; gap: .2rem; }
    .timeline dt { color: var(--c-primary-dark); }
    .equip-card, .equip-card--reverse { flex-direction: column; gap: 1.2rem; }
    .equip-card__photo { flex-basis: auto; width: 100%; height: 240px; }
    .svc-index__grid { grid-template-columns: repeat(2, 1fr); }
    .stage { flex-direction: column; }
    .stage__photo { flex-basis: auto; width: 100%; max-width: 320px; margin-inline: auto; }
    .svc-media { flex-direction: column; }
    .svc-media__photo { flex-basis: auto; width: 100%; }
    .message__photo { max-width: 460px; margin-inline: auto; }
    .site-footer__inner { grid-template-columns: 1fr; }
    .features__list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    /* モバイルは上段（ロゴ＋ハンバーガー）を固定してメニューに常にアクセス可 */
    .site-header { position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 8px rgba(0, 0, 0, .06); }
    /* 右上の電話番号は不要（下部の固定電話ボタンに集約） */
    .header-top__contact { display: none; }
    /* 上段はロゴのみ（左）。ハンバーガーは画面右上に固定配置 */
    .header-top__inner { display: flex; align-items: center; justify-content: flex-start; width: min(100% - 24px, 1400px); padding-right: 52px; }
    .nav-toggle { display: flex; position: fixed; top: 16px; right: 8px; z-index: 110; }
    .global-nav {
        position: fixed; inset: 0 0 0 auto; width: min(78vw, 320px);
        background: var(--c-white); box-shadow: -4px 0 24px rgba(0, 0, 0, .12);
        transform: translateX(100%); transition: transform .3s; z-index: 200;
        padding: 5rem 1.5rem 2rem; overflow-y: auto; border-top: 0;
    }
    .global-nav__inner { width: 100%; }
    body.nav-open .global-nav { transform: translateX(0); }
    /* 開いたメニュー（z-index:200）より前面に出し、右上に「×」を見せる */
    body.nav-open .nav-toggle { right: 8px; top: 16px; z-index: 300; background: var(--c-cream); border-radius: 50%; color: var(--c-primary-dark); }
    .global-nav .nav-menu { flex-direction: column; align-items: stretch; }
    .global-nav .nav-menu > li + li { border-left: 0; }
    .global-nav .nav-menu > li > a { display: block; padding: .9rem .4rem; border-bottom: 1px solid var(--c-line); }
    .global-nav .nav-menu > li > a::after { display: none; }
    /* モバイルではサブメニューを常時展開 */
    .global-nav .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; padding: 0 0 .4rem; }
    .global-nav .sub-menu a { padding-left: 1.4rem; color: var(--c-muted); }
    .nav-caret { display: none; }
    /* 開いている間は背景のページをスクロールさせない */
    body.nav-open { overflow: hidden; }
    /* ログイン中は管理バー（46px）の下にボタンを置く */
    .admin-bar .nav-toggle { top: 62px; }
    /* ログイン中はメニューを開いても×を管理バーの下に出し、ヘッダーも管理バーの下にそろえる */
    body.admin-bar.nav-open .nav-toggle { top: 62px; }
    .admin-bar .site-header { top: 46px; }


    .nav-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .4); opacity: 0; visibility: hidden; transition: opacity .3s; z-index: 150; }
    body.nav-open .nav-overlay { opacity: 1; visibility: visible; }
}

@media (max-width: 600px) {
    .header-tel__access { display: none; }
    /* 600px以下は管理バーがスクロールで流れるので、ヘッダーは上端に付ける */
    .admin-bar .site-header { top: 0; }
    .cta__actions { flex-direction: column; }
    .cta .btn { width: 100%; }
    .hours-table th, .hours-table td { padding: .45rem .15rem; font-size: .85rem; }
    .hours-table__time { font-size: .7rem; }
    /* フッターの診療時間表がはみ出してページ幅が広がらないようにする（詳細度の高いフッター用指定を上書き） */
    .site-footer__hours .hours-table th,
    .site-footer__hours .hours-table td { padding: .45rem .15rem; }
    .site-footer__hours .hours-table thead th { font-size: .9rem; }
    .site-footer__hours .hours-table__time { font-size: .75rem; }
    .site-footer__hours .hours-table__time span { font-size: .95rem; }
    .site-footer__hours .hours-table td.is-open { font-size: 1.1rem; }
    .site-footer__hours .hours-table td.is-closed { font-size: 1rem; }
    .news__item { gap: .5rem; }
    .features__list { grid-template-columns: 1fr; }
    .gallery__grid { grid-template-columns: 1fr; gap: 0; max-width: 420px; }
    .gallery-item { margin-bottom: 3.5rem; }
    .gallery-item:nth-child(even) { margin-top: 0; }
    .gallery-badge { width: 150px; padding: .8rem; }
    .gallery-badge--br { right: 6px; bottom: -26px; }
    .gallery-badge--tl { left: 6px; top: auto; bottom: -26px; }   /* モバイルは全て下寄せで統一 */
    .hero { min-height: 420px; }
    .hero__points { right: 50%; transform: translateX(50%); bottom: 8px; width: min(94%, 460px); }
    .svc-index__grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
    .md { grid-template-columns: 1fr; }
}

/* スマホ幅（〜430px）：医院名とメニューボタンの間に余白を確保 */
@media (max-width: 430px) {
    .site-logo__link { gap: .6rem; }
    .site-logo__mark { width: 52px; height: 52px; }
    .site-logo__jp { font-size: min(6.2vw, 1.6rem); }
    .site-logo__en { font-size: .7rem; letter-spacing: .14em; }
}

/* ============================================================
   スマホ（〜767px）の個別調整（2026-11 レビュー反映）
   ============================================================ */
/* スマホだけ改行する <br class="sp-only"> */
.sp-only { display: none; }

/* 診療時間の注記：SP用の「※」はフッターのSPだけで出す */
.hours-note__mark { display: none; }

/* 本文の下の「〇〇についてはこちら」ボタン（歯周病ページ）：中央揃え・上に余白 */
.svc-block .svc-more { text-align: center; margin: 2rem 0 1.2rem; }

@media (max-width: 767px) {
    .sp-only { display: inline; }

    /* 院内紹介「せきや歯科クリニックの／特徴」：2行に合わせて楕円の上下を広げ、左右を詰める */
    .section-title--ellipse .section-title__deco--sp2 { padding: .75em .9em; }

    /* 「〇〇についてはこちら」ボタン：上の余白を詰め、タップしやすい幅に広げる */
    .svc-block .svc-more { margin-top: 1.5rem; }
    .svc-more .btn { width: min(100%, 320px); padding-inline: 1rem; }

    /* フッターの診療時間表（SP）：時間列を約30%に詰め、月〜土は等幅、「日・祝」は1行に収める */
    .site-footer__hours .hours-table { table-layout: fixed; }
    .site-footer__hours .hours-table thead th { width: 9.5%; font-size: .85rem; white-space: nowrap; padding-inline: 0; }
    .site-footer__hours .hours-table thead th.hours-table__corner { width: 28%; }
    .site-footer__hours .hours-table thead th:last-child { width: 15%; }
    .site-footer__hours .hours-table__corner { background: var(--c-primary) !important; }
    .site-footer__hours .hours-table__time { font-size: .68rem; padding-inline: .1rem; }
    .site-footer__hours .hours-table__time span { font-size: .82rem; }
    /* 注記は1項目ずつ改行（休診日 → 祝日のある週の木曜 → 電話受付の順） */
    .site-footer__hours .hours-note { display: flex; flex-direction: column; gap: .15rem; }
    .site-footer__hours .hours-note__sep { display: none; }
    .site-footer__hours .hours-note__mark { display: inline; }
    .site-footer__hours .hours-note__item--thu { order: 1; }
    .site-footer__hours .hours-note__item--tel { order: 2; }

    /* 院長紹介のメインビジュアル：写真を大きく右下に置き（下端を背景の下端に揃える）、名前は写真の上に白い帯で重ねる */
    .director-hero { padding-top: 1rem; }
    .director-hero__inner { display: grid; grid-template-columns: 1fr; gap: 0; align-items: end; }
    .director-hero__name, .director-hero__photo { grid-area: 1 / 1; }
    .director-hero__photo { justify-self: end; margin-right: -20px; }
    .director-hero__photo img { width: min(80vw, 360px); }
    .director-hero__name {
        position: relative; z-index: 1; justify-self: start; align-self: end;
        margin-bottom: 1.2rem; padding: .7rem 1.1rem .8rem;
        background: rgba(255, 255, 255, .85); border-radius: 10px;
    }
}

/* いちばん狭い端末（〜359px）：フッターの表の時間の文字が枠にかからないようにする */
@media (max-width: 359px) {
    .site-footer__hours .hours-table thead th.hours-table__corner { width: 31%; }
    .site-footer__hours .hours-table thead th:not(.hours-table__corner):not(:last-child) { width: 9%; }
    .site-footer__hours .hours-table__time span { font-size: .76rem; }
}