:root{
    --brand:#c2818f;        /* メインのくすみピンク（元#cd909eより少し濃いめ） */
    --brand-soft:#e3bfc8;   /* 診療マーク（薄ピンク）*/
    --brand-deep:#b46b7c;   /* 見出し用のやや濃いピンク（--brandと同系色、明度のみ低め）*/
    --bg:#faedf0;           /* ページ背景（くすみを抑え、少し濃いめにしたピンク） */
    --bg-blue:#eef2f4;      /* ページ背景の薄いピンクを、1箇所だけ薄いブルーグレーに変える用 */
    --ink:#2c3a4f;          /* 基本文字（アクセスボタンの--grayと同系統の色味に寄せたブルーグレー） */
    --gray:#3a4a66;         /* 濃いブルーグレー（元#444444から青みを足したもの） */
    --gray-light:#8b9ab0;   /* 休診マーク（同上、青みを足したもの） */
    --chip:#edf0f1;         /* メニュータグ背景 */
    --white:#ffffff;
    --maxw:390px;           /* デザイン基準幅 */

    /* ============================================================
       デザイントークン（下層ページと共有する土台）
       ※この段階では定義のみ。既存の直書き値は未置換のため、
         追加しても見た目は変わりません。値を確定してから置換します。
       ============================================================ */

    /* --- ボーダー系 --- */
    --line:#f3e4e8;         /* セクション区切りの薄線／トップページ診療案内の背景（彩度を少し上げたピンク） */
    --line-soft:#ecdadf;    /* リスト内の区切り線 */

    /* --- 余白（8pxベースのスケール）--- */
    --space-2:8px;
    --space-3:12px;
    --space-4:16px;
    --space-5:20px;
    --space-6:24px;         /* 左右の基準パディング（gutter）*/
    --space-7:28px;
    --space-9:36px;
    --space-14:56px;
    --space-18:72px;        /* セクション上下の標準余白 */
    --space-20:80px;        /* セクション上下の広め余白 */
    --gutter:var(--space-6);
    --section-y:var(--space-18);

    /* --- 角丸 --- */
    --radius-sm:8px;        /* カード・タグ枠 */
    --radius-md:16px;       /* 画像・院内グリッド */
    --radius-lg:24px;       /* 写真（スタッフ等）*/
    --radius-xl:32px;       /* ヒーロー */
    --radius-pill:999px;    /* ボタン・丸マーク */

    /* --- フォント --- */
    --font-jp:'Zen Kaku Gothic New','Noto Sans JP',sans-serif;
    --font-en:'Inter',sans-serif;

    /* --- 文字サイズ（役割ベース）--- */
    --fs-eyebrow:9.7px;     /* セクション上のEN小見出し */
    --fs-caption:12px;      /* キャプション・補足 */
    --fs-label:13px;        /* ボタン内・ラベル */
    --fs-body:14px;         /* 本文（標準）*/
    --fs-body-lg:16px;      /* 本文（大）・リード */
    --fs-h3:20px;           /* 見出し（小）*/
    --fs-h2:24px;           /* 見出し（中）*/
    --fs-h1:26px;           /* キャッチ */

    /* --- ウエイト（このフォントの実装ウエイトは 400/500/700/900）--- */
    --fw-regular:400;
    --fw-medium:500;
    --fw-bold:700;
    --fw-black:900;
  }

  *{box-sizing:border-box;margin:0;padding:0;}
  /* bodyだけでなくhtmlにも背景色を指定。iOS Safari等の端末で下（または上）に
     引っぱりすぎた際の伸縮スクロール（バウンス）で、html本来の白色が
     一瞬見えてしまう（ページ下部が際限なく白くスクロールできるように感じる）のを防ぐ */
  html{-webkit-text-size-adjust:100%;background:var(--bg);}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Zen Kaku Gothic New','Noto Sans JP',sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}

  /* ステージ：デザイン基準幅で中央寄せ。それ以上は左右に余白 */
  .stage{
    width:100%;
    max-width:var(--maxw);
    margin:0 auto;
    background:var(--bg);
    position:relative;
    overflow:hidden;
  }

  /* ---- プレースホルダー共通 ---- */
  .ph{
    background:
      repeating-linear-gradient(45deg, #f3e9eb 0 10px, #f8f1f3 10px 20px);
    border:1px dashed #ddc7cd;
    border-radius:var(--radius-sm);
    display:flex;align-items:center;justify-content:center;
    color:#b28e98;font-size:11px;letter-spacing:.05em;
    text-align:center;
  }
  .ph.circle{border-radius:var(--radius-pill);}

  /* ---- セクション境界の波カーブ（優しい印象を出すための装飾。装飾のみなのでaria-hiddenで隠す）----
     直前のセクションの最後（もしくは次のセクションの直前）に挟み、
     svgのfillを「次にくる背景色」に合わせることで、波の上に次のセクションが
     覗いているように見せている。preserveAspectRatio="none"で幅いっぱいに伸ばしている */
  .wave-divider{display:block;line-height:0;width:100%;}
  .wave-divider svg{display:block;width:100%;height:40px;}
  /* 波の曲線より上（塗りつぶされない部分）は、直前のセクションの背景色を
     div自体の背景に指定しておく。指定がないと、タブレット幅でbodyの背景色
     （ピンクがかった色）が透けて見えてしまうため（例：FV下にピンクの帯が出る問題） */
  .wave-divider.from-white{background:var(--white);}
  .wave-divider.from-bg{background:var(--bg);}
  .wave-divider.from-bg-blue{background:var(--bg-blue);}
  .wave-divider.to-white path{fill:var(--white);}
  .wave-divider.to-bg path{fill:var(--bg);}
  .wave-divider.to-bg-blue path{fill:var(--bg-blue);}
  .wave-divider.to-about path{fill:#fcf8f9;} /* ABOUTセクションの背景色（FVのピンクより一段階薄いピンク）に合わせる */

  /* ============ ヘッダー ============ */
  .header{
    position:relative;
    padding:36px var(--gutter) 0;
    display:flex;align-items:center;justify-content:space-between;gap:16px;
  }
  .logo{
    height:58px;flex:1;max-width:269px;
  }
  .logo .site-logo{height:58px;width:auto;display:block;}
  /* ハンバーガーアイコンのみを白い丸ボタンに載せる、軽めの見せ方（PCと共通仕様） */
  .menu-btn{
    display:flex;align-items:center;justify-content:center;
    width:52px;height:52px;flex-shrink:0;
    border-radius:50%;background:#fff;
    box-shadow:0 4px 16px rgba(37,37,37,.14);
    border:none;cursor:pointer;
  }
  .menu-btn:hover{transform:scale(1.06);}
  .menu-btn .bars{width:20px;height:14px;display:flex;flex-direction:column;justify-content:space-between;}
  .menu-btn .bars span{display:block;height:2px;background:var(--brand);border-radius:2px;}
  .menu-btn .label{display:none;}

  /* PCヘッダー用（デスクトップ幅でのみ表示。モバイルでは非表示） */
  .header-actions{display:none;}
  .header-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:13px 24px;border-radius:var(--radius-pill);
    font-family:var(--font-jp);font-size:13.5px;font-weight:700;letter-spacing:.08em;
    white-space:nowrap;color:#fff;
    transition:opacity .25s ease;
  }
  .header-btn:hover,.header-btn:focus-visible{opacity:.8;}
  .header-btn.access{background:var(--gray);}
  .header-btn.tel{background:var(--brand);font-family:var(--font-en);letter-spacing:.03em;}
  /* 汎用の .ico{color:var(--brand)}（治療メニュー等で使用）が効いてしまい、
     ピンク背景の上でアイコンが同化して見えなくなるため、白で明示的に上書き */
  .header-btn .ico{width:16px;height:16px;flex-shrink:0;display:inline-flex;color:#fff;}
  .header-btn .ico svg{width:100%;height:100%;display:block;}
  /* ハンバーガーアイコンのみを白い丸ボタンに載せる、軽めの見せ方 */
  .header-menu{
    display:flex;align-items:center;justify-content:center;
    width:52px;height:52px;flex-shrink:0;
    border-radius:50%;background:#fff;
    box-shadow:0 4px 16px rgba(37,37,37,.14);
    cursor:pointer;
    transition:transform .25s ease;
  }
  .header-menu:hover{transform:scale(1.06);}
  .header-menu .bars{width:20px;height:14px;display:flex;flex-direction:column;justify-content:space-between;}
  .header-menu .bars span{display:block;height:2px;background:var(--brand);border-radius:2px;}
  .header-menu .label{display:none;}

  /* ============ FV / ヒーロー ============ */
  .fv{position:relative;padding:34px var(--gutter) 0;}
  /* 葉・花のあしらい（.deco-item、z-index:1）が文字の上に重なってしまわないよう、
     テキスト側を明示的に前面（z-index:2）に固定する */
  .fv-text{position:relative;z-index:2;}
  .fv-catch{
    color:var(--brand);
    font-weight:500;
    font-size:22px;
    line-height:1.7;
    letter-spacing:.08em;
    margin-bottom:16px;
  }
  .fv-sub{
    color:var(--ink);
    font-size:15px;
    line-height:1.9;
    letter-spacing:.03em;
    margin-bottom:22px;
  }
  /* 資格バッジ */
  /* 資格（区切り線テキスト） */
  .credentials{
    position:relative;z-index:2; /* 左下の葉のあしらい（.deco-leaf-fv-left）より前面に */
    display:flex;flex-wrap:wrap;
    column-gap:14px;row-gap:6px;
    margin:18px 0 26px;
    color:var(--gray);
    font-size:12px;font-weight:500;letter-spacing:.04em;
  }
  .credentials span{position:relative;}
  .credentials span:not(:last-child)::after{
    content:"";
    position:absolute;
    right:-7px;top:50%;transform:translateY(-50%);
    width:1px;height:12px;
    background:var(--gray);
    opacity:.4;
  }
  /* PC専用の複製（コピー本文の直下に表示するため）。モバイル・タブレットでは非表示 */
  .credentials-desktop{display:none;}
  .fv-spacer{display:none;}
  /* ヒーロー画像 */
  .fv-hero-wrap{position:relative;margin-bottom:20px;}
  .fv-hero{
    position:relative;
    width:100%;
    aspect-ratio:346/350;
    border-radius:20px;               /* ヒーロー角丸（やや角張り）*/
  }
  /* あしらい（水彩イラスト）。fv-heroはoverflow:hiddenで画像を角丸クリップしているため、
     はみ出して漂わせたいあしらいはfv-hero-wrap側に置き、fv-heroの外に配置する。
     右のリーフはfv-hero-wrap基準、左のリーフはfv全体（position:relative）基準で配置。
     0%〜18%は位置・透明度とも固定し、消えている時間をあえて長く保つ「間」にしている。
     ループの継ぎ目（100%→0%）も透明度0同士なので見えない */
  .deco-item{
    position:absolute;
    pointer-events:none;
    user-select:none;
    z-index:1;
    animation:decoFall 16s ease-in-out infinite;
  }
  .deco-leaf-fv{
    width:92px;
    top:-22px;
    right:-14px;
  }
  /* 左は右と同じサイズで、FVセクションからABOUTセクションへ落ちていくよう、
     右よりずっと大きい距離を落下させている */
  .deco-leaf-fv-left{
    width:92px;
    left:-14px;
    bottom:10px;
    animation-name:decoFallLeft;
    animation-delay:-8s;
  }
  /* 花はリーフと違い「落ちる」のではなく、その場でゆっくり漂う動き。
     3つそれぞれサイズ・位置・動く方向・周期・開始タイミング（負のdelay）をずらして、
     全体としてランダムに漂っているように見せている */
  .deco-flower-fv{
    width:78px;
    bottom:40px;
    left:-10px;
    animation-name:decoFloat;
    animation-duration:8s;
  }
  .deco-flower-fv-2{
    width:46px;
    top:24px;
    left:-18px;
    animation-name:decoFloat2;
    animation-duration:9.5s;
    animation-delay:-3s;
  }
  @keyframes decoFall{
    0%,18%{transform:translate(0,-14%) rotate(-6deg);opacity:0;}
    30%{opacity:.5;}
    60%{transform:translate(-16px,60%) rotate(8deg);opacity:.5;}
    88%{opacity:.5;}
    100%{transform:translate(10px,130%) rotate(-10deg);opacity:0;}
  }
  @keyframes decoFallLeft{
    0%,18%{transform:translate(0,-10%) rotate(-6deg);opacity:0;}
    30%{opacity:.5;}
    60%{transform:translate(-20px,150%) rotate(8deg);opacity:.5;}
    88%{opacity:.5;}
    100%{transform:translate(14px,300%) rotate(-10deg);opacity:0;}
  }
  @keyframes decoFloat{
    0%,100%{transform:translate(0,0) rotate(-8deg);opacity:.5;}
    50%{transform:translate(-14px,-24px) rotate(8deg);opacity:.75;}
  }
  @keyframes decoFloat2{
    0%,100%{transform:translate(0,0) rotate(6deg);opacity:.45;}
    50%{transform:translate(13px,-15px) rotate(-9deg);opacity:.7;}
  }

  /* ===== 固定メニューボタン ===== */
  /* ヘッダーロゴ（padding-top 36px + 高さ58px = 94px）と下端を揃える */
  .menu-fixed{
    position:fixed; top:0; left:50%; transform:translateX(-50%);
    width:100%; max-width:var(--maxw);
    height:94px;
    display:flex; justify-content:flex-end; align-items:flex-end;
    padding:0 var(--gutter);
    z-index:60; pointer-events:none;
    transition:height .25s ease;
  }
  .menu-fixed .menu-btn{pointer-events:auto; transition:width .25s ease, height .25s ease, transform .25s ease;}
  /* 少しスクロールしたら控えめなサイズ・位置に切り替える（body.is-scrolledはJSで付与） */
  body.is-scrolled .menu-fixed{height:56px;}
  body.is-scrolled .menu-btn{width:44px;height:44px;}
  body.is-scrolled .menu-btn .bars{width:17px;height:12px;}

  /* ===== 全画面メニュー ===== */
  /* top/leftを指定しないと、HTML上の実際の位置（フッターより後ろ）が表示位置になり、
     クリックでフォーカスが移る際にブラウザがその位置までスクロールしてしまうため固定する */
  .nav-toggle{position:absolute; top:0; left:0; width:1px; height:1px; opacity:0; pointer-events:none;}
  /* PCではメニューパネルの背後に暗幕として表示（モバイルでは非表示） */
  .nav-backdrop{display:none;}
  .nav-overlay{
    position:fixed; inset:0; z-index:70;
    background:var(--brand); color:#fff;
    display:flex; flex-direction:column; justify-content:center;
    padding:72px 40px;
    opacity:0; visibility:hidden;
    transition:opacity .4s ease, visibility .4s ease;
  }
  .nav-toggle:checked ~ .nav-overlay{opacity:1; visibility:visible;}
  .nav-close{
    position:absolute; top:28px; right:24px;
    width:40px; height:40px; cursor:pointer;
  }
  .nav-close::before,.nav-close::after{
    content:""; position:absolute; top:50%; left:8px;
    width:24px; height:1.5px; background:#fff; border-radius:2px;
  }
  .nav-close::before{transform:rotate(45deg);}
  .nav-close::after{transform:rotate(-45deg);}
  .nav-list{list-style:none; display:flex; flex-direction:column;}
  .nav-list a{
    display:block; color:#fff; text-decoration:none;
    font-family:var(--font-jp); font-size:16px; font-weight:500; letter-spacing:.12em;
    padding:11px 2px;
    border-bottom:1px solid rgba(255,255,255,.25);
    transition:opacity .25s ease,padding-left .25s ease;
  }
  .nav-list a:hover,.nav-list a:focus-visible{opacity:.7;padding-left:8px;}
  .nav-list li.nav-tel-wrap{display:flex; justify-content:center; margin-top:28px;}
  .nav-list .nav-tel{
    display:inline-flex; flex-direction:column; align-items:center; gap:3px;
    background:#fff; color:var(--brand);
    border:none; border-radius:16px;
    padding:11px 34px;
  }
  .nav-list .nav-tel-label{font-family:var(--font-jp); font-weight:500; font-size:12px; letter-spacing:.14em;}
  .nav-list .nav-tel-num{display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
    font-family:var(--font-en); font-weight:700; font-size:21px; letter-spacing:.03em;}
  .nav-list .nav-tel-ico{width:18px; height:18px; display:inline-flex;}
  .nav-list .nav-tel-ico svg{width:100%; height:100%;}
  .nav-list a .en{
    display:block; font-family:var(--font-en); font-size:8.5px;
    letter-spacing:.22em; opacity:.7; margin-top:2px;
  }

  /* ===== ヒーロー scroll 誘導 ===== */
  .scroll-cue{
    position:absolute; left:16px; bottom:16px; z-index:2;
    display:flex; flex-direction:column; align-items:center; gap:9px;
    color:var(--brand);
  }
  .scroll-cue-txt{
    font-family:var(--font-en); font-size:10px; letter-spacing:.25em; text-transform:uppercase;
    writing-mode:vertical-rl; text-orientation:mixed;
    text-shadow:0 1px 2px rgba(255,255,255,.55);
  }
  .scroll-cue-line{
    position:relative; width:1px; height:56px;
    background:rgba(205,144,158,.45); overflow:hidden;
  }
  .scroll-cue-line::after{
    content:""; position:absolute; left:0; top:0; width:100%; height:45%;
    background:var(--brand);
    animation:scrollCue 1.8s cubic-bezier(.7,0,.3,1) infinite;
  }
  @keyframes scrollCue{
    0%{transform:translateY(-110%);}
    70%{transform:translateY(235%);}
    100%{transform:translateY(235%);}
  }
  .scroll-cue-arrow{width:9px; height:6px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));}
  @media (prefers-reduced-motion:reduce){
    .scroll-cue-line::after{animation:none;}
    .deco-item{animation:none;opacity:.5;transform:none;}
  }

  /* ============ 画面下固定バー ============ */
  .fixed-bar{
    position:fixed;
    left:50%;
    transform:translateX(-50%);
    bottom:12px;
    width:calc(100% - 24px);
    max-width:calc(var(--maxw) - 24px);
    display:flex;align-items:center;justify-content:center;gap:14px;
    background:var(--white);
    box-shadow:0 6px 22px rgba(0,0,0,.30);
    border:1px solid var(--brand);
    border-radius:var(--radius-pill);
    padding:9px 20px;
    z-index:50;
    transition:transform .3s ease, opacity .3s ease;
  }
  .fixed-bar.hidden{
    transform:translateX(-50%) translateY(140%);
    opacity:0;
    pointer-events:none;
  }
  .fixed-bar .tel{display:flex;align-items:center;gap:8px;}
  .fixed-bar .tel .ico{width:26px;height:26px;color:var(--brand);flex-shrink:0;}
  .fixed-bar .tel .num{font-family:'Inter',sans-serif;font-weight:500;font-size:18px;letter-spacing:.05em;transition:opacity .25s ease;}
  .fixed-bar .tel .num:hover,.fixed-bar .tel .num:focus-visible{opacity:.7;}
  .fixed-bar .divider{color:var(--ink);font-weight:300;font-size:26px;opacity:.5;}
  .fixed-bar .access{color:var(--brand);font-weight:700;font-size:13px;line-height:1.4;text-align:center;transition:opacity .25s ease;}
  .fixed-bar .access:hover,.fixed-bar .access:focus-visible{opacity:.7;}
  /* バー分の余白をページ末尾に確保 */
  .stage{padding-bottom:88px;}

  /* ============ セクション共通 ============ */
  section{padding:0 var(--gutter);}
  /* スクロールで画面内に入ったら、末尾のJS（IntersectionObserver）が
     is-visibleを付与してふわっと表示する。動きの検知はCSSだけでは
     信頼して実現できないため、最小限のJSを使っている */
  .reveal{opacity:0;transform:translateY(24px);transition:opacity 1.1s ease,transform 1.1s ease;}
  .reveal.is-visible{opacity:1;transform:none;}
  /* 上の@media(prefers-reduced-motion:reduce)ブロックより後（同じ詳細度のため
     ソース順で後にある方が勝つ）に置かないと、reduced-motion環境でも
     .revealがopacity:0のまま表示されなくなってしまう */
  @media (prefers-reduced-motion:reduce){
    .reveal{opacity:1;transform:none;transition:none;}
  }
  .sec-head{margin-bottom:16px;}
  .sec-head .en{
    font-family:'Inter',sans-serif;font-weight:600;
    font-size:9.7px;letter-spacing:.14em;color:var(--brand);
    display:flex;align-items:center;gap:8px;margin-bottom:4px;
  }
  .sec-head .en::before{content:"";width:32px;height:2px;background:var(--brand);border-radius:2px;}
  .sec-head .ja{color:var(--gray);font-weight:500;font-size:16px;letter-spacing:.14em;}

  /* お知らせ */
  .news{padding-top:48px;}
  /* トップページのプレビューのみ：見出し下の余白を狭く（news-list.htmlの一覧ページには影響させない） */
  .page-home .news .sec-head{margin-bottom:6px;}
  .news-list{margin-top:20px;}
  .news-item{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--line-soft);transition:opacity .25s ease;}
  a.news-item:hover,a.news-item:focus-visible{opacity:.7;}
  .news-item-body{flex:1;min-width:0;}
  .news-date{color:var(--brand);font-weight:500;font-size:13px;letter-spacing:.08em;margin-bottom:6px;}
  .news-title{color:var(--gray);font-weight:500;font-size:15px;letter-spacing:.04em;line-height:1.5;}
  .news-item-arrow{width:16px;height:16px;color:var(--brand);flex-shrink:0;transition:transform .25s ease;}
  a.news-item:hover .news-item-arrow,a.news-item:focus-visible .news-item-arrow{transform:translateX(4px);}
  .news-more{display:block;margin-top:16px;margin-bottom:32px;text-align:right;color:var(--gray);font-size:12px;letter-spacing:.06em;}
  /* PC専用の丸型矢印ボタン。モバイル・タブレットではテキストの「→」を使う */
  .news-more-arrow-ico{display:none;}

  /* 所在地 + 診療時間 */
  /* 左の葉のあしらい（.deco-leaf-fv-left、z-index:1）がFVから大きく落ちてくる途中で
     このセクションの文字と重なってしまうため、常に葉より前面に来るよう固定する */
  .access-block{position:relative;z-index:2;padding-top:28px;}
  .access-addr{font-weight:500;font-size:12.6px;letter-spacing:.1em;margin-top:14px;}
  .map-link{
    display:inline-flex;align-items:center;gap:12px;
    margin:var(--space-9) 0;                              /* リンクボタン上下余白（広め）*/
    background:var(--white);
    border:1px solid var(--ink);
    color:var(--ink);
    border-radius:var(--radius-pill);
    padding:14px 32px;                                    /* btn-lineと同じ大きさ */
    font-size:16px;font-weight:500;letter-spacing:.09em;  /* btn-lineと同じ */
  }
  /* マップ下の「大きなマップで見る」ボタンのみ、上の余白を狭く。
     PCでは.btn-center{margin-top:40px}という共通ルールが後から効いてしまうため、
     ラッパー側にもクラス2つ分の詳細度で明示的に0を指定して打ち消している */
  .map-large-link.btn-center{margin-top:0;}
  .map-large-link .map-link{margin-top:10px;}
  .map-link-ico{width:20px;height:20px;flex-shrink:0;}
  .map-link-arrow{width:20px;height:20px;flex-shrink:0;}
  .hours-card{
    background:var(--white);
    border-radius:var(--radius-sm);
    padding:23px 17px;
  }
  /* PC専用の複製（FV左カラム下部に表示するため）。モバイル・タブレットでは非表示 */
  .hours-card-fv{display:none;}
  .access-info-fv{display:none;}
  .news-fv{display:none;}
  .hours-panel{
    margin:var(--space-7) calc(-1 * var(--gutter)) 0;   /* 上にTELとの間隔／左右いっぱい */
    background:var(--brand-soft);
    border-radius:0;
    padding:var(--space-9) var(--gutter) var(--space-14);
  }
  .hours-table{width:100%;border-collapse:collapse;}
  .hours-table th,.hours-table td{padding:0;text-align:center;font-weight:400;}
  /* width:1%+nowrapで「内容の幅ぴったりまで縮める」古典的なテーブルの手法。
     この列を必要最小限まで狭めることで、残りの曜日7列に余った幅が回り、
     曜日同士の間隔が自然に広がる */
  .hours-table th:first-child,.hours-table td:first-child{width:1%;padding-right:6px;}
  /* 曜日7列の幅を揃える（「日祝」だけ2文字のため、指定しないと自動的に幅が広がり
     「土」の右の余白だけ広く見えてしまう） */
  .hours-table th:not(:first-child),.hours-table td:not(:first-child){width:13%;}
  .hours-table thead th:first-child{
    text-align:left;font-family:'Zen Kaku Gothic New';font-weight:700;
    font-size:12.6px;letter-spacing:.1em;white-space:nowrap;
  }
  .hours-table thead th{
    font-family:'Noto Sans JP';font-size:11.8px;color:var(--ink);
    padding-bottom:6px;letter-spacing:.1em;
  }
  .hours-table tbody{border-top:1px solid #d8d8d8;border-bottom:1px solid #d8d8d8;}
  .hours-table tbody td:first-child{
    text-align:left;font-size:13.5px;font-weight:700;letter-spacing:.13em;color:var(--ink);white-space:nowrap;
  }
  .hours-table tbody tr td{padding:5px 0;}
  .hours-table tbody tr:first-child td{padding-top:11px;}
  .hours-table tbody tr:last-child td{padding-bottom:11px;}
  .hours-table .mk{font-weight:700;font-size:14px;}
  .hours-table .mk.on{color:var(--brand);}
  .hours-table .mk.tri{color:var(--brand);}
  .hours-table .mk.off{color:var(--gray-light);font-size:11px;}
  .hours-note{margin-top:10px;font-size:13.5px;font-weight:700;letter-spacing:.1em;color:var(--ink);}
  .hours-note b{color:var(--brand);font-weight:900;}

  /* ABOUT */
  /* FVの背景ピンク（--bg）より一段階薄いピンクに */
  .about{background:#fcf8f9;padding-top:var(--space-20);padding-bottom:var(--section-y);scroll-margin-top:24px;}
  /* テキストは全ブレークポイント共通で中央揃え（写真はPCのみ左右に配置するため、モバイル・タブレットでは非表示） */
  .about-text{text-align:center;}
  .about-en{
    font-family:'Inter',sans-serif;font-weight:600;font-size:9.7px;letter-spacing:.14em;
    color:var(--brand);display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:6px;
  }
  .about-en::before{display:none;}
  .about-text > .accent{display:block;margin-bottom:20px;}
  .about-title{color:var(--gray);font-weight:500;font-size:22px;line-height:1.7;letter-spacing:.14em;margin-bottom:24px;}
  .about-lead{font-size:16px;line-height:1.94;letter-spacing:.03em;color:var(--ink);margin-bottom:28px;}
  /* 「はじめての方へ」ボタン上の余白を、共通の.btn-line余白（36px）より少し狭める */
  .about-text .btn-line{margin-top:20px;}
  /* 写真4枚はPC（1280px〜）でテキストの左右にランダムに配置するための素材。
     モバイル・タブレットでは情報量を絞るため非表示にする */
  .about-figs{display:none;}
  .btn-line{
    display:inline-flex;align-items:center;justify-content:center;gap:17px;
    margin:var(--space-9) 0;                              /* リンクボタン上下余白（広め）*/
    background:var(--white);border:1px solid var(--ink);border-radius:var(--radius-pill);
    padding:14px 32px;font-weight:500;font-size:16px;letter-spacing:.09em;
    transition:background .25s ease,color .25s ease,border-color .25s ease;
  }
  .btn-line:hover,.btn-line:focus-visible{
    background:var(--ink);border-color:var(--ink);color:#fff;
  }
  .btn-line:hover .arrow,.btn-line:focus-visible .arrow{transform:translateX(4px);}
  .btn-line .arrow{width:20px;height:20px;transition:transform .25s ease;}
  /* 親.btn-lineのgap(17px)はアイコン⇔テキスト間には広すぎるため、右マージンで詰めている */
  .btn-line .ico{width:18px;height:18px;flex-shrink:0;margin-right:-8px;}
  /* トップページの「症状やお悩みから探す」だけ、共通ボタンから少し変化をつけるための塗りつぶし版 */
  .btn-line.btn-fill{background:var(--gray);border-color:var(--gray);color:#fff;}
  .btn-line.btn-fill:hover,.btn-line.btn-fill:focus-visible{background:var(--ink);border-color:var(--ink);color:#fff;}
  .btn-line.btn-fill .ico{color:#fff;}
  /* 2つのボタンの幅を、長い方（症状やお悩みから探す）に揃える。
     display:gridで1列にし、列幅をmax-content（＝最も広いボタンの幅）にすることで、
     短い方のボタン（詳しく見る）もgridの初期値justify-items:stretchで同じ幅まで広がる */
  .treatment-ctas{display:grid;grid-template-columns:max-content;justify-content:center;gap:16px;margin:var(--space-9) 0;}
  .treatment-ctas .btn-line{margin:0;}
  /* 支給アイコン（viewBox 79.35×117.03、縦長）は正方形の枠だと小さく収まりすぎるため、
     実際の縦横比に合わせた専用サイズにしている */
  .btn-line .beginner-ico{width:13px;height:19px;color:var(--ink);transition:color .25s ease;}
  /* ホバー時は背景が濃色に反転するため、黒のままだと視認できなくなるのを防ぐ */
  .btn-line:hover .beginner-ico,.btn-line:focus-visible .beginner-ico{color:#fff;}

  /* 診療メニューページ：ページ導入（見出し＋リード文） */
  .treatment-intro{padding-top:48px;padding-bottom:44px;}
  .page-lead{
    font-size:16px;line-height:1.94;letter-spacing:.03em;color:var(--ink);
  }
  /* リード文の直後だけ、共通の.treatment上余白を狭める（トップページの.treatmentには影響しない） */
  .treatment-intro + .treatment{padding-top:16px;border-top:1px solid var(--line-soft);}
  /* リード文の下に置く、症状検索・診療メニュー一覧へのクイックリンク */
  .treatment-intro .treat-menu-grid{max-width:400px;margin:28px auto 0;}
  .treatment-intro .treat-menu-link{padding:15px 16px;font-size:15px;border-color:var(--brand);color:var(--brand);}
  .treatment-intro .treat-menu-link:hover,.treatment-intro .treat-menu-link:focus-visible{background:var(--brand);border-color:var(--brand);color:#fff;}
  .treatment-intro .treat-menu-link:hover .arrow,.treatment-intro .treat-menu-link:focus-visible .arrow{color:#fff;}

  /* はじめての方へページ：ページ導入 */
  .first-visit-intro{padding-top:48px;padding-bottom:12px;}
  .first-visit-intro .btn-center{margin-top:10px;}
  /* ご予約・ご来院にあたっての簡単な案内ボックス */
  .first-visit-notice{padding:0 var(--gutter) var(--space-9);}
  .first-visit-notice-box{
    display:flex;align-items:stretch;gap:14px;
    max-width:560px;margin:0 auto;
    background:#f1d7dd;border-radius:var(--radius-md);
    padding:24px 22px;
    box-shadow:0 4px 20px rgba(37,37,37,.06);
  }
  /* 案内文と同じ高さになるよう、svg自体をheight:100%で伸ばす（幅は正方形比率で自動追従） */
  /* テキスト2行分くらいの高さに固定（フォントサイズ14px×line-height1.9×2行 ≒ 53px） */
  .first-visit-notice-ico{flex-shrink:0;align-self:center;width:53px;height:53px;color:var(--brand);}
  .first-visit-notice-ico svg{width:100%;height:100%;display:block;}
  .first-visit-notice-box p{font-size:14px;line-height:1.9;letter-spacing:.03em;color:var(--ink);}
  /* ご予約案内の下に置く、初診の流れ・FAQ・アクセスへのクイックリンク（診療案内ページと同じ箱型リンクを流用） */
  .first-visit-quicklinks{max-width:560px;margin:0 auto;grid-template-columns:1fr;}
  .first-visit-intro .first-visit-quicklinks{margin-top:44px;}
  .first-visit-quicklinks .treat-menu-link{padding:15px 16px;font-size:15px;border-color:var(--brand);color:var(--brand);}
  .first-visit-quicklinks .treat-menu-link:hover,.first-visit-quicklinks .treat-menu-link:focus-visible{background:var(--brand);border-color:var(--brand);color:#fff;}
  .first-visit-quicklinks .treat-menu-link:hover .arrow,.first-visit-quicklinks .treat-menu-link:focus-visible .arrow{color:#fff;}

  /* 診療メニュー */
  /* 薄いピンク背景（元に戻す場合はvar(--white)に戻すだけでOK） */
  .treatment{background:var(--bg);padding-top:var(--section-y);padding-bottom:var(--space-20);}
  /* トップページだけ、他のセクションの薄いピンク（--bg）より一段階濃いピンクに。
     元は--line（区切り線と共用のトークン）を流用していたが、彩度を上げてくすみを抑えたいのは
     ここだけのため、区切り線に影響しないよう専用の値に切り替えている */
  .page-home .treatment{background:#f5e2e7;}
  .center-head{text-align:center;margin-bottom:40px;}
  .center-head .en{
    font-family:'Inter',sans-serif;font-weight:600;font-size:9.7px;letter-spacing:.14em;
    color:var(--brand);margin-bottom:6px;
  }
  /* 中央揃えの見出しで共通利用する、EN文字下のアクセントライン */
  .accent{width:48px;height:2px;background:var(--brand);border-radius:2px;margin:0 auto 6px;}
  /* お知らせ(.sec-head)と同じ書式（色・太さ・字間）に統一。配置（中央揃え）だけが違う */
  .center-head .ja{color:var(--gray);font-weight:500;font-size:16px;letter-spacing:.14em;}

  .treat-card{
    position:relative;
    margin-bottom:14px;text-align:center;
    border-radius:var(--radius-md);
    padding:36px 24px;
    transition:transform .3s ease;
  }
  .treat-card:last-child{margin-bottom:0;}
  .treat-card:hover{transform:translateY(-4px);}
  /* カード全体を診療案内ページへのリンクにする（タグだけは上に重ねて個別リンクとして残す） */
  .treat-card-link{position:absolute;inset:0;z-index:1;}
  .ico{color:var(--brand);}
  .ico svg{width:100%;height:100%;display:block;}
  .ico img{width:100%;height:100%;object-fit:contain;display:block;}
  .treat-card .ico{width:70px;height:77px;margin:0 auto 18px;}
  .treat-card .word{font-size:30px;letter-spacing:.1em;margin-bottom:14px;font-weight:400;color:var(--gray);}
  /* 説明文・メニュー部分は左揃えのまま、塊としては画面中央にくるように幅を絞って中央寄せ */
  .treat-card .desc{font-size:16px;line-height:1.5;letter-spacing:.03em;text-align:left;margin:0 auto 20px;max-width:280px;}
  .treat-card .menu-label{font-size:13px;text-align:left;margin:0 auto 14px;max-width:280px;letter-spacing:-.03em;}
  .tags{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:14px 7px;max-width:280px;margin:0 auto;}
  .tag{
    background:var(--chip);color:#767676;border-radius:var(--radius-pill);
    padding:6px 20px;font-size:12px;font-weight:700;letter-spacing:.03em;white-space:nowrap;
  }
  .btn-center{display:flex;justify-content:center;}

  /* 診療メニューページ：カードではなく、区切り線だけの一覧形式（診療メニューページのみ） */
  .treat-list{margin-top:40px;}
  .treat-item{padding:32px 0;border-bottom:1px solid var(--line-soft);scroll-margin-top:100px;}
  .treat-item:first-child{padding-top:0;}
  .treat-item:last-child{border-bottom:none;padding-bottom:0;}
  .treat-item-head{
    display:flex;align-items:center;gap:14px;
    font-size:28px;font-weight:400;letter-spacing:.08em;color:var(--gray);
    margin-bottom:16px;
    white-space:nowrap;
  }
  .treat-item-head .ico{width:46px;height:50px;flex-shrink:0;margin:0;}
  .treat-item .tagline{font-size:15px;font-weight:700;letter-spacing:.04em;color:var(--brand);margin-bottom:12px;}
  .treat-item .desc{font-size:16px;line-height:1.9;letter-spacing:.03em;color:var(--ink);margin-bottom:20px;}
  .treat-item .menu-label{font-size:13px;letter-spacing:-.03em;color:var(--ink);margin-bottom:12px;}
  .treat-item .tags{max-width:none;margin:0;}
  /* 診療メニューページ：タグをトップページより目立つ「選べるメニュー項目」のボックスに（元に戻す場合は
     HTML側のコメントを参照。このCSSブロック自体は.tagsと独立しているので削除しなくても影響しない） */
  .treat-menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px;}
  .treat-menu-link{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius-sm);
    padding:12px 14px;font-size:14px;font-weight:500;letter-spacing:.02em;color:var(--ink);
    transition:border-color .25s ease,background .25s ease;
  }
  .treat-menu-link .arrow{width:14px;height:14px;color:var(--brand);flex-shrink:0;transition:transform .25s ease;}
  .treat-menu-link:hover,.treat-menu-link:focus-visible{border-color:var(--brand);background:var(--bg);}
  .treat-menu-link:hover .arrow,.treat-menu-link:focus-visible .arrow{transform:translateX(4px);}

  /* 診療メニューページ：守る/治す/整えるの下に挟む1枚のアクセント写真（ページの余白を埋める用） */
  .treatment-accent-photo{padding:0 var(--gutter);margin-top:-56px;}
  .treatment-accent-photo img{
    width:100%;aspect-ratio:16/7;object-fit:cover;
    border-radius:var(--radius-md);display:block;
    box-shadow:0 4px 20px rgba(37,37,37,.06);
  }

  /* 診療メニューページ：症状やお悩みから探す */
  .symptom-finder{background:var(--white);padding-top:var(--section-y);padding-bottom:var(--section-y);scroll-margin-top:24px;}
  .symptom-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:32px;}
  /* お悩みラベルはリンク先の数に関わらず常に同じ見た目にして、フォントを統一している。
     右上の三角は折り紙の角のようなワンポイント。overflow:hiddenで角丸からはみ出さないようにしている。
     イラストを外した分の余白は詰めず、padding-topで確保している */
  .symptom-box{
    position:relative;
    display:flex;flex-direction:column;
    background:var(--bg);border-radius:var(--radius-md);
    padding:36px 20px 32px;
    overflow:hidden;
  }
  .symptom-box::before{
    content:"";
    position:absolute;
    top:18px;right:18px;
    width:14px;height:14px;
    background:var(--brand-soft);
    clip-path:polygon(100% 0, 0 0, 100% 100%);
  }
  .symptom-box-label{
    font-size:15px;font-weight:500;line-height:1.5;letter-spacing:.03em;color:var(--ink);
    padding-bottom:16px;margin-bottom:14px;border-bottom:1px solid var(--line-soft);
  }
  .symptom-box-links{display:flex;flex-direction:column;gap:10px;}
  .symptom-box-link{
    display:inline-flex;align-items:center;gap:8px;
    font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--ink);
    transition:opacity .25s ease;
  }
  .symptom-box-link .arrow{width:16px;height:16px;color:var(--brand);flex-shrink:0;transition:transform .25s ease;}
  .symptom-box-link:hover,.symptom-box-link:focus-visible{opacity:.65;}
  .symptom-box-link:hover .arrow,.symptom-box-link:focus-visible .arrow{transform:translateX(4px);}

  /* 診療メニューページ：各診療メニューについて（アコーディオン形式。FAQと同じ<details>の仕組み）。
     セクション自体はページの地の色（--bg）のままにして、白いアコーディオンの箱が浮くようにしている
     （症状セクションの白背景と自然にコントラストがつくので、区切り線は不要になった） */
  .treat-detail{background:var(--line);padding-top:var(--section-y);padding-bottom:var(--section-y);scroll-margin-top:24px;}
  .treat-detail-list{margin-top:36px;}
  .treat-detail-item{background:var(--white);border-radius:var(--radius-sm);margin-bottom:12px;overflow:hidden;}
  .treat-detail-item:last-child{margin-bottom:0;}
  .treat-detail-title{
    display:flex;align-items:center;gap:10px;
    padding:18px 20px;cursor:pointer;list-style:none;
    font-size:16px;font-weight:500;letter-spacing:.06em;color:var(--ink);
    transition:background .25s ease;
    scroll-margin-top:90px; /* アンカーでジャンプした際、項目が画面の一番上ぎりぎりにならないよう余白を持たせる（フッターからのリンク等を考慮し広めに） */
  }
  .treat-detail-title:hover,.treat-detail-title:focus-visible{background:var(--line-soft);}
  /* ブラウザ既定の青いフォーカスリング（#リンクでの遷移時など）をブランドカラーに差し替え */
  .treat-detail-title:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;}
  .treat-detail-item[open] .treat-detail-title{background:var(--line-soft);}
  .treat-detail-title::-webkit-details-marker{display:none;}
  .treat-detail-title .ico{width:16px;height:16px;flex-shrink:0;}
  .treat-detail-title .plus{margin-left:auto;color:var(--brand);transition:transform .2s;flex-shrink:0;}
  .treat-detail-item[open] .treat-detail-title .plus{transform:rotate(45deg);}
  .treat-detail-desc{padding:14px 20px 20px 46px;font-size:15px;line-height:1.9;letter-spacing:.03em;color:var(--ink);}
  .treat-detail-desc.ph{margin:14px 20px 20px 46px;padding:16px;font-size:12px;}
  /* 料金など情報量が多い項目だけ、専用ページへのリンクを説明文の下に添える */
  .treat-detail-more{
    display:inline-flex;align-items:center;gap:6px;
    margin:-8px 20px 20px 46px;
    font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--brand);
    transition:opacity .25s ease;
  }
  .treat-detail-more .arrow{width:14px;height:14px;flex-shrink:0;transition:transform .25s ease;}
  .treat-detail-more:hover,.treat-detail-more:focus-visible{opacity:.7;}
  .treat-detail-more:hover .arrow,.treat-detail-more:focus-visible .arrow{transform:translateX(4px);}

  /* 診療メニュー項目の専用ページ（予防歯科など、料金・複数コースがある項目）共通コンポーネント */
  .program-intro{padding-top:48px;padding-bottom:12px;}
  /* スマホ・タブレットのみ：見出しとパンくずの間にページ幅いっぱいの区切り線を挟む。
     .breadcrumb自体はsectionのgutter分内側に入っているため、負のマージン+同幅のpaddingで
     ボーダーだけを画面幅いっぱいに広げつつ、中身（パンくず文字）の位置は変えないようにしている */
  .breadcrumb{
    display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:6px;
    font-size:12px;letter-spacing:.02em;color:var(--gray);
    margin-top:20px;margin-bottom:20px;
    margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));
    padding-left:var(--gutter);padding-right:var(--gutter);
    padding-top:16px;border-top:1px solid var(--line-soft);
    box-sizing:border-box;
  }
  .breadcrumb a{color:var(--brand);text-decoration:underline;text-underline-offset:2px;transition:opacity .25s ease;}
  .breadcrumb a:hover,.breadcrumb a:focus-visible{opacity:.7;}
  .breadcrumb-sep{color:var(--gray-light);}
  .breadcrumb-current{color:var(--ink);}
  /* 左寄せ見出し（.sec-head）の下や、見出しのない記事ページで使う左寄せ版 */
  .breadcrumb-left{justify-content:flex-start;}
  .program-intro .treat-menu-grid{grid-template-columns:1fr;max-width:460px;margin-left:auto;margin-right:auto;}
  .program-intro .treat-menu-link{padding:15px 16px;font-size:15px;border-color:var(--brand);color:var(--brand);}
  .program-intro .treat-menu-link:hover,.program-intro .treat-menu-link:focus-visible{background:var(--brand);border-color:var(--brand);color:#fff;}
  .program-intro .treat-menu-link:hover .arrow,.program-intro .treat-menu-link:focus-visible .arrow{color:#fff;}
  /* 罫線は使わず、直後に白いカードが並ぶこと自体で区切りが伝わるため余白だけで対応 */
  .program-section{background:var(--bg);padding-top:12px;padding-bottom:var(--section-y);}
  .program-list{margin-top:32px;}
  .program-card{
    scroll-margin-top:24px;
    background:var(--white);border-radius:var(--radius-md);
    padding:28px 24px;margin-bottom:20px;
    box-shadow:0 4px 20px rgba(37,37,37,.06);
  }
  .program-card:last-child{margin-bottom:0;}
  /* 見出し左の縦線でアクセントをつける */
  .program-title{
    position:relative;padding-left:14px;
    font-size:18px;font-weight:700;letter-spacing:.06em;color:var(--ink);margin-bottom:14px;
  }
  .program-title::before{
    content:"";position:absolute;left:0;top:3px;bottom:3px;
    width:3px;background:var(--brand);border-radius:2px;
  }
  /* タイトルの右に所要時間を並べる（背景なし・アイコン＋テキスト） */
  .program-title-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin-bottom:14px;}
  .program-title-row .program-title{margin-bottom:0;}
  .program-time{display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:700;color:var(--ink);letter-spacing:.02em;}
  .program-time-ico{display:inline-flex;flex-shrink:0;color:var(--brand);}
  .program-time-ico svg{width:15px;height:15px;display:block;}
  .program-desc{font-size:15px;line-height:1.9;letter-spacing:.03em;color:var(--ink);margin-bottom:12px;}
  .program-desc:last-of-type{margin-bottom:0;}
  /* 内容はホームページの「初診の流れ」と同じ、番号＋縦線でつなぐステップ形式 */
  .program-flow{margin-top:16px;}
  .program-flow-item{display:flex;gap:12px;padding-bottom:16px;position:relative;}
  .program-flow-item:last-child{padding-bottom:0;}
  .program-flow-item:not(:last-child)::before{
    content:"";position:absolute;left:13px;top:28px;bottom:-2px;width:2px;background:var(--line-soft);
  }
  .program-flow-num{
    flex-shrink:0;width:26px;height:26px;border-radius:var(--radius-pill);background:var(--brand);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-family:'Inter',sans-serif;font-weight:700;font-size:12px;z-index:1;
  }
  .program-flow-body{padding-top:3px;font-size:16px;line-height:1.7;color:var(--ink);letter-spacing:.02em;}
  .program-flow-note{font-size:12px;color:var(--gray);}

  .price-section{margin-top:40px;}
  .price-section-title{font-size:16px;font-weight:500;letter-spacing:.06em;color:var(--ink);margin-bottom:16px;}
  /* 料金一覧内の各コースの区切り見出し（カード見出しと同じ左線アクセントを小さく） */
  .price-group{margin-bottom:24px;}
  .price-group:last-child{margin-bottom:0;}
  .price-group-title{
    position:relative;padding-left:12px;
    font-size:14px;font-weight:700;letter-spacing:.04em;color:var(--ink);margin-bottom:10px;
  }
  .price-group-title::before{
    content:"";position:absolute;left:0;top:2px;bottom:2px;
    width:2px;background:var(--brand);border-radius:1px;
  }
  .price-list{background:var(--white);border-radius:10px;overflow:hidden;}
  .price-list-row{
    display:flex;justify-content:space-between;align-items:baseline;gap:12px;
    padding:16px 20px;border-bottom:1px solid var(--line-soft);
    font-size:14px;
  }
  .price-list-row:last-child{border-bottom:none;}
  .price-list-name{color:var(--ink);letter-spacing:.02em;}
  .price-list-time{color:var(--gray);font-size:12px;margin-left:4px;}
  .price-list-amount{font-family:'Inter',sans-serif;font-weight:700;color:var(--gray);font-size:15px;flex-shrink:0;}

  /* 医院の特徴 */
  .features{padding-top:var(--section-y);padding-bottom:var(--section-y);}
  .feat-grid{
    display:grid;grid-template-columns:1fr 1fr;
    gap:44px 19px;margin-top:40px;
  }
  .feat{display:flex;flex-direction:column;align-items:center;text-align:center;}
  /* 全体を元の85%程度に縮小（90px→77px） */
  .feat .ico{width:100%;max-width:77px;aspect-ratio:1/1.2;margin-bottom:16px;display:flex;align-items:center;justify-content:center;}
  .feat .ico img{width:100%;height:100%;object-fit:contain;display:block;}
  .feat .cap{font-family:'Zen Kaku Gothic New';font-weight:500;font-size:14px;line-height:1.35;letter-spacing:.14em;}
  /* スマホ・タブレットでは、幅に合わせて自然に改行させたい2箇所だけ強制改行を外す（PCでは元通り改行） */
  .feat-cap-br{display:none;}
  /* アイコンごとのサイズ感の調整。transform:scaleなのでスマホ・PCどちらの基準サイズでも
     同じ倍率で効き、縮小したものは枠内に自然と余白ができる */
  .ico-scale-up-20{transform:scale(1.2);}
  .ico-scale-down-20{transform:scale(.8);}
  .ico-scale-down-5{transform:scale(.95);}
  /* 土曜診療：元の-10%(scale .9)からさらに95% => scale .855 */
  .ico-scale-down-14-5{transform:scale(.855);}

  /* ============ 医師・スタッフ紹介 ============ */
  .staff{background:var(--white);padding-top:var(--section-y);padding-bottom:var(--section-y);}
  .staff-card{margin-top:36px;}
  .staff-photo{width:100%;max-width:210px;margin:0 auto 20px;aspect-ratio:3/4;border-radius:var(--radius-lg);overflow:hidden;background:#fff;}
  .staff-photo img{width:100%;height:100%;object-fit:cover;display:block;}
  .staff-role{color:var(--brand);font-weight:700;font-size:13px;letter-spacing:.1em;margin-bottom:6px;}
  .staff-name{font-size:22px;font-weight:500;letter-spacing:.08em;margin-bottom:4px;}
  .staff-name .en{font-family:'Inter',sans-serif;font-size:12px;color:var(--gray);letter-spacing:.1em;margin-left:8px;}

  /* 院長挨拶（続きを読む） */
  .greeting{margin-top:16px;}
  .greeting p{font-size:14px;line-height:2;letter-spacing:.03em;color:var(--ink);}
  .greeting-lead{position:relative;}
  .greeting-toggle{position:absolute;opacity:0;pointer-events:none;}
  /* 続き：閉じている時は数行だけ見せてフェード */
  .greeting-more{
    max-height:3.6em;              /* 約2行分だけ見せる */
    overflow:hidden;
    margin-top:1em;
    transition:max-height .45s ease;
    -webkit-mask-image:linear-gradient(to bottom, #000 30%, transparent 100%);
    mask-image:linear-gradient(to bottom, #000 30%, transparent 100%);
  }
  .greeting-more p + p{margin-top:1em;}
  /* 開いた時 */
  .greeting-toggle:checked ~ .greeting-more{
    max-height:60em;
    -webkit-mask-image:none;
    mask-image:none;
  }
  .greeting-btn{
    display:inline-flex;align-items:center;gap:8px;
    margin-top:10px;cursor:pointer;
    color:var(--brand);font-size:13px;font-weight:700;letter-spacing:.08em;
    user-select:none;
  }
  .greeting-btn .sign{
    display:inline-flex;align-items:center;justify-content:center;
    width:20px;height:20px;border-radius:var(--radius-pill);
    border:1.5px solid var(--brand);line-height:1;
    transition:transform .3s ease;
  }
  .greeting-btn .sign svg{width:9px;height:9px;display:block;
    stroke:var(--brand);stroke-width:2;stroke-linecap:round;}
  .greeting-btn .txt-close{display:none;}
  .greeting-toggle:checked ~ .greeting-btn .txt-open{display:none;}
  .greeting-toggle:checked ~ .greeting-btn .txt-close{display:inline;}
  .greeting-toggle:checked ~ .greeting-btn .sign{transform:rotate(135deg);}

  /* 院長 略歴・所属 */
  .career{
    margin-top:var(--space-7);
    border-top:1px solid var(--line-soft);
  }
  .career-summary{
    list-style:none;cursor:pointer;
    display:flex;align-items:center;gap:8px;
    padding:var(--space-4) 0;
    font-family:var(--font-jp);
    font-size:var(--fs-label);font-weight:var(--fw-medium);
    letter-spacing:.1em;color:var(--brand);
  }
  .career-summary::-webkit-details-marker{display:none;}
  .career-summary .sign{
    margin-left:auto;
    display:inline-flex;align-items:center;justify-content:center;
    width:20px;height:20px;border-radius:var(--radius-pill);
    border:1.5px solid var(--brand);line-height:1;
    transition:transform .3s ease;
  }
  .career-summary .sign svg{width:9px;height:9px;display:block;
    stroke:var(--brand);stroke-width:2;stroke-linecap:round;}
  .career[open] .career-summary .sign{transform:rotate(135deg);}
  .career-body{padding-bottom:var(--space-5);}
  .career-group + .career-group{margin-top:var(--space-5);}
  .career-label{
    font-family:var(--font-jp);
    font-size:12px;font-weight:var(--fw-medium);
    letter-spacing:.16em;color:var(--brand);
    margin-bottom:6px;
  }
  .career-list{list-style:none;}
  .career-list li{
    font-size:13px;line-height:1.5;letter-spacing:.02em;
    color:var(--ink);padding:3px 0;
  }

  /* 画像の枠内フィット */
  .fv-hero{overflow:hidden;}
  .fv-hero-img{width:100%;height:100%;object-fit:cover;display:block;}
  .fv-hero::after{
    content:""; position:absolute; inset:0; z-index:1;
    border-radius:inherit; pointer-events:none;
    background:linear-gradient(160deg, rgba(205,144,158,.30), rgba(205,144,158,.10) 55%, rgba(205,144,158,.24));
    mix-blend-mode:multiply;
  }
  /* 蛍光灯特有の黄緑かぶりを抑え、彩度を少し落として落ち着いたトーンに補正 */
  /* 写真の質感を揃えるため、ブランドカラーのうっすらとした色かぶりを重ねる
     （box-shadowのinsetを使うと、divで囲わずimgタグ自体にオーバーレイをかけられる） */
  .about-figs img{width:100%;object-fit:cover;border-radius:var(--radius-sm);display:block;margin:0;filter:saturate(.85) contrast(1.08) brightness(1.04);box-shadow:inset 0 0 0 999px rgba(194,129,143,.34);}
  .clinic-grid img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius-md);display:block;transition:transform .4s ease;}
  .clinic-grid img.wide{grid-column:1 / -1;aspect-ratio:16/9;}
  .clinic-grid img:hover{transform:scale(1.04);}

  /* ============ 院内・設備紹介 ============ */
  .clinic{background:var(--white);padding-top:var(--section-y);padding-bottom:var(--section-y);}
  .clinic-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:36px;}
  .indoorview{margin-top:32px;}
  .indoorview-label{
    display:flex;align-items:center;gap:8px;
    font-size:14px;font-weight:700;letter-spacing:.06em;color:var(--ink);margin-bottom:12px;
  }
  .indoorview-label::before{content:"";width:20px;height:2px;background:var(--brand);border-radius:2px;}
  .indoorview-frame{
    position:relative;
    border-radius:var(--radius-md);overflow:hidden;line-height:0;
    box-shadow:0 2px 10px rgba(0,0,0,.06);
  }
  /* クリックするまでは地図の操作（ドラッグ・ホイールでのズーム等）を無効にし、
     ページのスクロールがインドアビュー上で引っかからないようにする */
  .indoorview-frame iframe{display:block;width:100%;pointer-events:none;}
  .indoorview-toggle{position:absolute;opacity:0;pointer-events:none;}
  .indoorview-overlay{
    position:absolute;inset:0;z-index:1;
    display:flex;align-items:center;justify-content:center;
    background:rgba(37,37,37,.28);
    color:#fff;font-size:13px;font-weight:500;letter-spacing:.08em;
    text-align:center;cursor:pointer;
    transition:opacity .3s ease;
  }
  .indoorview-toggle:checked ~ .indoorview-overlay{opacity:0;pointer-events:none;}
  .indoorview-toggle:checked ~ iframe{pointer-events:auto;}

  /* ============ 初診の流れ ============ */
  .flow{background:var(--white);padding-top:var(--section-y);padding-bottom:var(--section-y);border-top:1px solid var(--line);scroll-margin-top:24px;}
  .flow-list{margin-top:36px;position:relative;}
  .flow-item{display:flex;gap:16px;padding-bottom:28px;position:relative;}
  .flow-item:not(:last-child)::before{
    content:"";position:absolute;left:18px;top:40px;bottom:-4px;width:2px;background:var(--line-soft);
  }
  .flow-num{
    flex-shrink:0;width:38px;height:38px;border-radius:var(--radius-pill);background:var(--brand);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-family:'Inter',sans-serif;font-weight:700;font-size:15px;z-index:1;
  }
  .flow-body{padding-top:4px;}
  .flow-body h3{font-size:16px;font-weight:700;letter-spacing:.06em;margin-bottom:6px;}
  .flow-body p{font-size:14px;line-height:1.8;letter-spacing:.03em;color:var(--gray);}

  /* ============ よくある質問 ============ */
  .faq{padding-top:var(--section-y);padding-bottom:var(--section-y);scroll-margin-top:24px;}
  .faq-list{margin-top:36px;}
  .faq-item{background:var(--white);border-radius:var(--radius-sm);margin-bottom:12px;overflow:hidden;}
  .faq-q{
    display:flex;align-items:center;gap:12px;padding:18px 20px;cursor:pointer;list-style:none;
    font-size:15px;font-weight:500;letter-spacing:.04em;
    transition:background .25s ease;
  }
  .faq-q:hover,.faq-q:focus-visible{background:var(--line-soft);}
  .faq-q::-webkit-details-marker{display:none;}
  .faq-q .mark{color:var(--brand);font-weight:700;font-size:18px;flex-shrink:0;}
  .faq-q .plus{margin-left:auto;color:var(--brand);transition:transform .2s;flex-shrink:0;}
  .faq-item[open] .faq-q .plus{transform:rotate(45deg);}
  .faq-a{padding:12px 20px 20px 52px;font-size:14px;line-height:1.9;color:var(--gray);letter-spacing:.03em;}
  .faq-note{margin-top:28px;text-align:center;font-size:13px;line-height:1.8;color:var(--gray);letter-spacing:.02em;}
  .faq-note-tel{color:var(--brand);text-decoration:underline;text-underline-offset:2px;transition:opacity .25s ease;}
  .faq-note-tel:hover,.faq-note-tel:focus-visible{opacity:.7;}

  /* ============ アクセス ============ */
  .access-sec{background:var(--bg);padding-top:var(--section-y);padding-bottom:0;scroll-margin-top:24px;}
  .map{width:100%;aspect-ratio:16/10;border-radius:var(--radius-md);margin:36px 0 16px;overflow:hidden;}
  /* Googleマップの色味を、サイトのグレイッシュ＆ピンクのトーンに寄せる（埋め込み方式のためCSSのfilterで調整） */
  .map iframe{display:block;width:100%;height:100%;filter:saturate(.55);}
  /* 下層ページ用：フッター上に添えるアクセス、地図はトップページより控えめな高さに */
  /* 一覧・記事本文とマップの境目に区切り線とゆとりを追加 */
  .access-sec-compact{border-top:1px solid var(--line);padding-top:var(--space-20);}
  .access-sec-compact .map{aspect-ratio:16/7;}
  .info-table{width:100%;border-collapse:collapse;font-size:14px;}
  .info-table th,.info-table td{text-align:left;padding:12px 0;border-bottom:1px solid var(--line);vertical-align:top;letter-spacing:.04em;}
  .info-table th{width:90px;color:var(--brand);font-weight:700;white-space:nowrap;}
  .info-table td{color:var(--ink);line-height:1.7;}
  .info-table .tel-link{
    color:var(--ink);
    border-bottom:1px dashed var(--brand);
    padding-bottom:1px;
    letter-spacing:.04em;
  }

  /* ============ 予約・お問い合わせ ============ */
  /* ============ トピックス ============ */
  /* トピックス一覧ページでは、他の下層ページ（お知らせ・診療案内等）と同じくページ全体を
     ピンク背景のまま統一する（以前は白背景にしていたが、ヘッダー直下だけピンクが
     ロゴぎりぎりで途切れて見える不具合があったため）。トップページのプレビューは
     元々白背景で問題なかったため、そちらだけ以下で元に戻している */
  .topics{padding-top:48px;padding-bottom:var(--section-y);}
  .page-home .topics{background:var(--white);}
  .topics-list{margin-top:36px;display:flex;flex-direction:column;gap:20px;}
  .topic-card{display:flex;gap:14px;align-items:flex-start;}
  /* トップページのみ、スマホ・タブレットではサムネが見づらいため非表示に（トピックス一覧ページには影響しない） */
  .page-home .topic-thumb{display:none;}
  .topic-thumb{flex-shrink:0;width:96px;aspect-ratio:16/9;border-radius:var(--radius-sm);overflow:hidden;}
  .topic-thumb .ph{height:100%;font-size:10px;border-radius:var(--radius-sm);transition:transform .35s ease;}
  .topic-card:hover .topic-thumb .ph,.topic-card:focus-visible .topic-thumb .ph{transform:scale(1.08);}
  .topic-body{flex:1;min-width:0;padding-top:2px;}
  .topic-meta{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
  .topic-cat{
    font-size:10px;font-weight:700;letter-spacing:.06em;
    padding:3px 10px;border-radius:var(--radius-pill);white-space:nowrap;
  }
  .topic-cat.media{background:#f1e3e7;color:var(--brand);}
  .topic-cat.topic{background:var(--brand-soft);color:var(--white);}
  .topic-date{font-family:'Inter',sans-serif;font-size:12px;color:var(--gray);letter-spacing:.04em;}
  .topic-title{
    font-size:14px;line-height:1.6;letter-spacing:.03em;color:var(--ink);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    transition:color .25s ease;
  }
  .topic-card:hover .topic-title,.topic-card:focus-visible .topic-title{color:var(--brand);}
  .topics-more{display:block;margin-top:28px;text-align:right;font-size:12px;letter-spacing:.06em;color:var(--gray);}

  /* お知らせ・トピックス共通：記事詳細ページのテンプレート */
  .article{padding-top:48px;padding-bottom:var(--section-y);}
  .article-meta{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
  .article-title{font-size:20px;font-weight:500;line-height:1.6;letter-spacing:.04em;color:var(--ink);margin-bottom:24px;}
  /* 記事に付けるタグ（.tagコンポーネントを流用、中央寄せの制約は外す） */
  .article-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;}
  .article-thumb{width:100%;aspect-ratio:16/5;border-radius:var(--radius-md);overflow:hidden;margin-bottom:28px;}
  .article-thumb .ph{height:100%;font-size:13px;}
  .article-body{font-size:16px;line-height:1.9;letter-spacing:.03em;color:var(--ink);}
  .article-body p{margin-bottom:20px;}
  .article-body p:last-child{margin-bottom:0;}
  /* セルフチェックなどのチェックリスト */
  .article-checklist{list-style:none;margin:0 0 20px;}
  .article-checklist li{position:relative;padding-left:26px;margin-bottom:10px;}
  .article-checklist li:last-child{margin-bottom:0;}
  .article-checklist li::before{content:"";position:absolute;left:0;top:8px;width:15px;height:15px;border:1.6px solid var(--brand);border-radius:4px;}
  /* 歯周病セルフチェックなど、実際にチェックできるインタラクティブ版（装飾用の::beforeは使わず本物のcheckboxを見た目だけ差し替える） */
  .article-checklist-interactive li{padding-left:0;}
  .article-checklist-interactive li::before{display:none;}
  .article-checkbox-item{display:flex;align-items:flex-start;gap:10px;cursor:pointer;}
  .article-checkbox-input{position:absolute;width:1px;height:1px;margin:0;opacity:0;overflow:hidden;clip:rect(0,0,0,0);}
  .article-checkbox-box{
    flex-shrink:0;width:18px;height:18px;margin-top:2px;
    border:1.6px solid var(--brand);border-radius:4px;
    position:relative;transition:background .2s ease;
  }
  .article-checkbox-input:checked + .article-checkbox-box{background:var(--brand);}
  .article-checkbox-input:checked + .article-checkbox-box::after{
    content:"";position:absolute;left:5px;top:1px;width:5px;height:9px;
    border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
  }
  .article-checkbox-input:focus-visible + .article-checkbox-box{outline:2px solid var(--brand);outline-offset:2px;}
  .article-checkbox-text{font-size:15px;line-height:1.6;color:var(--ink);}
  .periodontal-check-btn{
    display:block;margin:24px auto 0;
    background:var(--brand);color:#fff;border:none;border-radius:var(--radius-pill);
    padding:14px 32px;font-size:15px;font-weight:500;letter-spacing:.05em;
    cursor:pointer;transition:background .25s ease;
    font-family:inherit;
  }
  .periodontal-check-btn:hover,.periodontal-check-btn:focus-visible{background:var(--brand-deep);}
  .periodontal-result{margin-top:24px;background:var(--white);border-radius:var(--radius-md);padding:20px 22px;box-shadow:0 4px 20px rgba(37,37,37,.06);}
  .periodontal-result-level{font-size:16px;font-weight:700;color:var(--brand);margin-bottom:8px;letter-spacing:.03em;}
  .periodontal-result-text{font-size:14px;line-height:1.9;color:var(--ink);}
  /* 原稿が届くまでの間、本文の分量感を示すためのプレースホルダー領域 */
  .article-body-ph{min-height:220px;line-height:1.8;padding:24px;}
  /* ボタンが2つ以上並ぶ記事（メディア掲載情報など）でも余白が均等になるよう、gapで間隔を管理 */
  .article-cta{margin-top:40px;display:flex;flex-direction:column;align-items:flex-start;gap:16px;}
  .article-cta .btn-line{margin:0;}
  .article-back{margin-top:48px;}
  /* トピックス記事のように.article-ctaが直前にある場合は、間隔を詰める */
  .article-cta + .article-back{margin-top:14px;}

  .cta-sec{background:var(--brand);color:#fff;text-align:center;padding:var(--space-14) var(--gutter);}
  .cta-sec .en{font-family:'Inter',sans-serif;font-weight:600;font-size:10px;letter-spacing:.2em;opacity:.9;margin-bottom:8px;}
  .cta-sec h2{font-size:24px;font-weight:500;letter-spacing:.1em;margin-bottom:8px;}
  .cta-sec p{font-size:14px;line-height:1.9;letter-spacing:.04em;opacity:.95;margin-bottom:28px;}
  .cta-tel{background:#fff;border-radius:var(--radius-md);padding:22px;margin-bottom:14px;}
  .cta-tel .lbl{color:var(--brand);font-size:12px;font-weight:700;letter-spacing:.1em;margin-bottom:6px;}
  .cta-tel .num{display:inline-flex;align-items:center;gap:8px;color:var(--gray);font-family:'Inter',sans-serif;font-weight:700;font-size:28px;letter-spacing:.04em;transition:color .25s ease;}
  .cta-tel .num-ico{width:22px;height:22px;flex-shrink:0;}
  .cta-tel .num-ico svg{width:100%;height:100%;display:block;}
  .cta-tel .num:hover,.cta-tel .num:focus-visible{color:var(--brand);}
  .cta-tel .hours{color:var(--gray);font-size:12px;margin-top:4px;letter-spacing:.06em;}
  footer{background:var(--ink);color:#fff;padding:40px var(--gutter) 32px;}
  .foot-logo{font-family:'Inter',sans-serif;font-weight:700;font-size:16px;letter-spacing:.1em;margin-bottom:20px;}
  .foot-nav{display:flex;flex-wrap:wrap;gap:12px 24px;margin-bottom:28px;}
  .foot-nav a{font-size:13px;letter-spacing:.06em;opacity:.9;transition:opacity .25s ease;}
  .foot-nav a:hover,.foot-nav a:focus-visible{opacity:.6;}
  .foot-menu{border-top:1px solid rgba(255,255,255,.15);padding-top:24px;margin-bottom:28px;}
  .foot-menu-head{display:flex;align-items:baseline;gap:10px;margin-bottom:16px;}
  .foot-menu-head .en{font-family:'Inter',sans-serif;font-weight:600;font-size:10px;letter-spacing:.16em;color:var(--brand-soft);}
  .foot-menu-head .ja{font-size:14px;font-weight:500;letter-spacing:.08em;}
  .foot-menu-list{
    list-style:none;
    display:grid;grid-template-columns:1fr 1fr;
    gap:12px 20px;
  }
  .foot-menu-list a{
    display:inline-block;
    font-size:13px;letter-spacing:.05em;opacity:.85;
    padding-left:14px;position:relative;
  }
  .foot-menu-list a::before{
    content:"";position:absolute;left:0;top:.5em;
    width:5px;height:5px;border-radius:var(--radius-pill);background:var(--brand-soft);
  }
  .foot-copy{font-size:11px;letter-spacing:.08em;opacity:.6;border-top:1px solid rgba(255,255,255,.15);padding-top:20px;}

  /* ==========================================================
     タブレット（768px〜1279px）
     スマホ版の1カラム構成のまま、コンテンツ幅だけ少し広げる。
     多カラム化はせず、スマホ版の世界観を維持する。
     ========================================================== */
  @media (min-width:768px) and (max-width:1279px){
    :root{--maxw:660px;}
    html{background:#f3e9eb;}
    body{background:#f3e9eb;padding:24px 0;}
    .stage{box-shadow:0 12px 40px rgba(205,144,158,.22);}
    /* bodyの上余白(24px)分、.stageごと下にずれるため、
       画面基準で固定されている開閉ボタンも同じ分だけ下げてロゴと揃える */
    .menu-fixed{top:24px;}

    /* ---- 診療メニューページ：アイコン+タイトルを左列に固定配置 ---- */
    .treat-item{display:flex;align-items:center;gap:28px;}
    .treat-item-head{flex:0 0 auto;width:190px;margin-bottom:0;font-size:30px;}
    .treat-item-head .ico{width:52px;height:57px;}
    .treat-item-body{flex:1;min-width:0;}
  }

  /* ==========================================================
     デスクトップ（1280px〜、1440px程度を基準）
     スマホ版の枠を解除し、ブランドサイトとしての
     本格的なワイドレイアウトに切り替える。
     ========================================================== */
  @media (min-width:1280px){
    :root{
      --maxw:none;
      /* 左右の余白：最低56px、コンテンツ幅は最大1240px程度に中央寄せ */
      --gutter:max(56px, calc((100% - 1240px) / 2));
      --section-y:128px;

      --fs-eyebrow:11px;
      --fs-caption:14px;
      --fs-label:14px;
      --fs-body:16px;
      --fs-body-lg:18px;
      --fs-h3:24px;
      --fs-h2:34px;
      --fs-h1:44px;
    }

    body{background:var(--bg);padding:0;}
    .stage{box-shadow:none;overflow:visible;}

    /* ---- セクション境界の波カーブ ---- */
    .wave-divider svg{height:90px;}

    /* ---- ヘッダー ---- */
    .header{padding-top:24px;padding-bottom:24px;border-bottom:1px solid var(--line);}
    .logo{flex:0 0 auto;max-width:none;height:76px;}
    /* max-width:100%（グローバル指定）でアスペクト比が崩れないよう明示的に解除 */
    .logo .site-logo{height:76px;max-width:none;}
    /* メニュー・アクセス・電話番号ボタンはスクロールしても常に追従表示。
       position:stickyは親要素(.header)がスクロールで画面外に出ると
       追従できなくなるため、position:fixedに戻して常時固定にする */
    .header-actions{
      display:flex;align-items:center;gap:14px;
      position:fixed;top:30px;right:var(--gutter);
      z-index:60;
    }
    .menu-fixed{display:none;}
    .fixed-bar{display:none;}

    /* ---- 全画面メニュー：右側パネル＋暗幕 ---- */
    .nav-backdrop{
      display:block;position:fixed;inset:0;z-index:65;
      background:rgba(37,37,37,.45);
      opacity:0;visibility:hidden;cursor:pointer;
      transition:opacity .4s ease, visibility .4s ease;
    }
    .nav-toggle:checked ~ .nav-backdrop{opacity:1;visibility:visible;}
    .nav-overlay{
      left:auto;right:0;width:520px;max-width:90vw;
      padding:120px 64px 64px;
      box-shadow:-24px 0 60px rgba(0,0,0,.18);
    }
    .nav-close{top:40px;right:40px;}
    .nav-list a{font-size:18px;padding:16px 2px;}
    .nav-list li.nav-tel-wrap{margin-top:36px;}

    /* ---- FV：左にコピー、右にヒーロー画像 ----
       資格バッジをコピー本文の直下に表示するため、fv-text内にPC専用の複製
      （credentials-desktop）を表示し、元の位置にあるcredentials-mobileは隠す。
       これにより「テキスト行」「資格行」の2行にまたがせる必要がなくなり、
       画像の高さに引っ張られてテキスト周りに余白ができる問題も避けられる */
    .fv{
      display:grid;
      grid-template-columns:minmax(380px, 460px) 1fr;
      grid-template-areas:"text image";
      column-gap:80px;
      align-items:start;
      padding-top:72px;
      padding-bottom:96px;
    }
    /* fv-textを行の高さいっぱいに広げ（stretch）、内部をflex columnにして
       診療時間表(.hours-card-fv)を下端に配置する。
       以前はhours-card-fv側のmargin-top:autoだけで余白を作っていたが、
       PC幅を狭めてコピーが折り返すと資格の高さが伸びて余白が0まで潰れ、
       資格と診療時間表がくっついてしまっていた。そのため可変の余白を
       専用のスペーサー（.fv-spacer、flex-grow）に担わせ、hours-card-fv側には
       常に確保される最低限のmargin-topを固定で持たせている */
    .fv-text{
      grid-area:text;
      align-self:stretch;
      display:flex;
      flex-direction:column;
    }
    /* paddingでh1の内側に余白を作る（marginだとブロックの開始位置ごと下がってしまうため） */
    .fv-catch{font-size:32px;line-height:1.6;letter-spacing:.06em;margin-bottom:32px;padding-top:130px;}
    .fv-sub{margin-bottom:0;}
    .credentials-mobile{display:none;}
    .credentials-desktop{display:flex;margin:18px 0 0;}
    .fv-spacer{display:block;flex:1 1 auto;min-height:24px;}
    .hours-card-fv{display:block;margin-top:0;padding:18px 17px;}
    .access-info-fv{display:block;margin-top:14px;}
    .access-info-fv .access-addr{margin-top:0;}
    .access-info-fv .btn-center{justify-content:flex-start;margin:14px 0 0;}
    .fv-hero-wrap{grid-area:image;margin-bottom:0;}
    .fv-hero{width:100%;aspect-ratio:4/5;border-radius:32px;}
    .deco-leaf-fv{width:150px;top:-36px;right:-30px;}
    .deco-leaf-fv-left{width:150px;left:-40px;bottom:20px;}
    .deco-flower-fv{width:130px;bottom:70px;left:-30px;}
    .deco-flower-fv-2{width:80px;top:40px;left:-40px;}
    /* Googleマップボタンの下に、お知らせを控えめな1行で表示 */
    .news-fv{
      display:flex;align-items:baseline;flex-wrap:wrap;gap:14px;
      margin-top:16px;padding-bottom:16px;font-size:14px;
      border-bottom:1px dashed var(--line-soft);
    }
    .news-fv-label{color:var(--brand);font-weight:700;letter-spacing:.1em;font-size:13px;}
    .news-fv-link{display:flex;align-items:baseline;gap:14px;transition:opacity .25s ease;}
    .news-fv-link:hover,.news-fv-link:focus-visible{opacity:.7;}
    .news-fv-date{color:var(--gray);}
    .news-fv-title{color:var(--ink);}
    .news-fv-more{margin-left:auto;color:var(--gray);font-size:12px;letter-spacing:.06em;}

    /* ---- お知らせ：FV内に控えめに表示するため、独立したセクションはPCで非表示 ----
       元の「見出し大きめ・2カラム」版は下にコメントアウトで残しています。
       元に戻す場合は、このブロックの内容を削除し、コメントを外すだけでOK
       （その場合、index.html側の.news-fvも不要になるので合わせて調整してください）。

    .news{
      display:flex;
      align-items:flex-start;
      gap:64px;
      padding-bottom:var(--section-y);
      border-bottom:1px solid var(--line);
    }
    .sec-head{flex:0 0 300px;margin-bottom:0;}
    .sec-head .en,.center-head .en{font-size:13px;}
    .sec-head .ja,.center-head .ja{font-size:36px;}
    .news-body{flex:1;}
    .news-item{display:flex;align-items:baseline;gap:32px;padding:22px 0;}
    .news-date{margin-bottom:0;font-size:15px;}
    .news-title{font-size:17px;}
    .news-more{
      display:flex;align-items:center;justify-content:flex-end;gap:16px;
      margin-top:24px;font-size:14px;
    }
    .news-more-arrow-txt{display:none;}
    .news-more-arrow-ico{
      display:flex;align-items:center;justify-content:center;
      width:46px;height:46px;flex-shrink:0;
      border-radius:50%;background:var(--brand);color:#fff;
    }
    .news-more-arrow-ico svg{width:18px;height:18px;}
    */

    /* PCでの見出しサイズ（EN 13px・JA 32px）は左揃え・中央揃え共通のフォーマット。
       特徴・医師紹介など他セクションで引き続き使用 */
    .sec-head .en,.center-head .en{font-size:13px;}
    .sec-head .ja,.center-head .ja{font-size:28px;}
    /* PC表示では英語ラベル下の下線と見出しの間の余白を広げる（ABOUT以外の.center-head/.sec-head全般） */
    .accent{margin-bottom:16px;}
    /* トップページのみ、お知らせの内容はFV側に移したためPCでは元のセクションを非表示にする。
       .page-homeで絞らないと、news-list.html等の他ページの.newsまで消えてしまうため注意 */
    .page-home .news{display:none;}

    /* ---- 所在地・診療時間：内容は全てFV側に移したため、PCではセクションごと非表示 ---- */
    .page-home .access-block{display:none;}

    /* ---- ABOUT：中央のテキストに対して、写真4枚を左右にランダムな配置で添える ---- */
    .about{
      position:relative;
      padding-top:120px;
      padding-bottom:120px;
      min-height:680px;
    }
    .about-text{
      position:relative;
      z-index:2;
      max-width:640px;
      margin:0 auto;
      text-align:center;
    }
    .about-en{font-size:14px;}
    .about-title{font-size:32px;margin-bottom:32px;}
    .about-title-br{display:none;}
    .about-lead{font-size:17px;margin-bottom:0;}
    .btn-center{margin-top:40px;}

    /* 写真4枚は中央のテキストを避けつつ、左右にランダムな高さ・大きさで配置。
       絶対配置の基準は.aboutのパディングボックス（.aboutの余白の外側）になるため、
       各写真のtop値に「.aboutの上余白120px＋見出し上のラベル・アクセントライン分」を
       あらかじめ足し込み、写真の最上部が見出し「きれいも健康も〜」の高さに揃うようにしている */
    .about-figs{
      display:block;
      position:absolute;
      inset:0;
      z-index:1;
      pointer-events:none;
    }
    /* .about-figs img{width:100%;...}という共通ルール（詳細度: クラス1+要素1）が別箇所にあり、
       単純な.about-fig-staff等（クラス1つ）だとそちらに負けて幅指定が効かないため、
       .about-figsを前に付けてクラス2つ分の詳細度に上げている */
    .about-figs .about-fig{
      position:absolute;
      object-fit:cover;
      border-radius:24px;
      margin:0;
      box-shadow:inset 0 0 0 999px rgba(194,129,143,.34);
    }
    .about-figs .about-fig-staff{top:170px;left:20px;width:240px;aspect-ratio:4/3;}
    .about-figs .about-fig-aroma{top:430px;left:60px;width:190px;aspect-ratio:3/2;}
    /* 右側：上＝小さい院内インテリア、下＝大きい診療風景 */
    .about-figs .about-fig-3{top:180px;right:20px;width:170px;aspect-ratio:4/3;}
    .about-figs .about-fig-treatment{top:410px;right:70px;width:240px;aspect-ratio:4/3;}

    /* ---- 医院の特徴：4列×2行のゆったりしたグリッドに ---- */
    .features{padding-top:160px;padding-bottom:160px;}
    .features .center-head{margin-bottom:64px;}
    .feat-grid{
      grid-template-columns:repeat(4, 1fr);
      gap:56px 40px;
      max-width:1000px;
      margin:64px auto 0;
    }
    .feat .ico{max-width:94px;margin-bottom:20px;}
    .feat .cap{font-size:15px;}
    .feat-cap-br{display:inline;} /* PCでは元の位置で改行を復活 */

    /* ---- 医師紹介：左に写真、右にテキストの2カラムに ---- */
    .staff{padding-top:160px;padding-bottom:160px;}
    .staff-card{
      display:grid;
      grid-template-columns:340px 1fr;
      gap:72px;
      align-items:start;
      max-width:1000px;
      margin:64px auto 0;
    }
    .staff-photo{max-width:none;margin:0;aspect-ratio:3/4;}
    .staff-role{font-size:14px;}
    .staff-name{font-size:28px;}
    .greeting{margin-top:24px;}
    .greeting p{font-size:15px;}
    /* PCでは十分な余白があるため、続きを読む形式ではなく全文表示にする */
    .greeting-more{max-height:none;-webkit-mask-image:none;mask-image:none;}
    .greeting-btn{display:none;}

    /* ---- 院内紹介：大小差のあるギャラリー配置に ---- */
    .clinic{padding-top:160px;padding-bottom:160px;}
    .clinic-grid{
      grid-template-columns:repeat(3, 1fr);
      gap:20px;
      max-width:820px;
      margin:64px auto 0;
    }
    /* 受付写真を大きく2列×2行分、待合ラウンジ・院内の様子は自動配置で右側に縦に並ぶ */
    .clinic-grid img.wide{grid-column:1 / 3;grid-row:1 / 3;aspect-ratio:1/1;}
    .clinic-grid img:not(.wide){aspect-ratio:1/1;}
    .indoorview{max-width:820px;margin:56px auto 0;}
    .indoorview-frame iframe{height:360px;}

    /* ---- 診療メニュー：カードタイプ（試作）----
       行ごとに整列する元の版（display:contents使用）は下にコメントアウトで
       残しています。元に戻す場合は、このブロックを削除しコメントを外してください。

    .treat-grid{
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      grid-template-rows:repeat(5, auto);
      grid-auto-flow:column;
      align-items:start;
      column-gap:48px;
      max-width:1080px;
      margin:88px auto 0;
    }
    .treat-card{display:contents;}
    .treat-card .word{font-size:40px;align-self:center;}
    .treat-card .desc{font-size:17px;text-align:left;align-self:center;max-width:none;margin-left:0;margin-right:0;}
    .treat-card .menu-label{text-align:left;align-self:start;max-width:none;margin-left:0;margin-right:0;}
    .treat-card .tags{justify-content:flex-start;align-self:start;max-width:none;margin-left:0;margin-right:0;}
    .treat-card .ico{width:85px;height:94px;}
    .ico-scale-up-15{transform:scale(1.15);}
    .treatment .btn-center{margin-top:64px;}
    */

    /* ---- 診療メニューページ：ページ導入 ---- */
    .treatment-intro{padding-top:96px;padding-bottom:56px;}
    .page-lead{max-width:560px;margin:0 auto;text-align:center;font-size:17px;}
    .treatment-intro + .treatment{padding-top:32px;}
    .treatment-intro .treat-menu-grid{grid-template-columns:repeat(2, 1fr);max-width:520px;margin-top:40px;}
    .treatment-intro .treat-menu-link{padding:18px 20px;font-size:16px;}

    /* ---- はじめての方へページ ---- */
    .first-visit-intro{padding-top:96px;padding-bottom:16px;}
    .first-visit-intro .page-lead{max-width:none;white-space:nowrap;}
    .first-visit-notice{padding-bottom:var(--space-14);}
    .first-visit-notice-box{max-width:720px;padding:28px 32px;}
    .first-visit-quicklinks{grid-template-columns:repeat(3, 1fr);max-width:720px;}
    .first-visit-intro .first-visit-quicklinks{margin-top:56px;}
    .first-visit-quicklinks .treat-menu-link{padding:18px 20px;font-size:16px;}
    .first-visit-notice-ico{width:58px;height:58px;}
    .first-visit-notice-box p{font-size:15px;}

    .treatment{padding-top:160px;padding-bottom:160px;}
    /* 3つ横並びのまま、塊全体は少し小さめに */
    .treat-grid{
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      gap:32px;
      align-items:stretch;
      max-width:940px;
      margin:88px auto 0;
    }
    /* カードの背景・影は無しに（枠なしでアイコン・文字だけ並べる） */
    .treat-card{
      display:flex;flex-direction:column;align-items:center;
      border-radius:var(--radius-md);
      padding:38px 26px;
      margin-bottom:0;
    }
    .treat-card .word{font-size:32px;}
    /* PCでは列幅いっぱいの左揃えに戻す（モバイル用の幅絞り込みを解除） */
    .treat-card .desc{
      font-size:16px;text-align:left;align-self:stretch;
      max-width:none;margin-left:0;margin-right:0;
    }
    .treat-card .menu-label{align-self:stretch;text-align:left;max-width:none;margin-left:0;margin-right:0;}
    .treat-card .tags{align-self:stretch;justify-content:flex-start;max-width:none;margin-left:0;margin-right:0;}
    /* アイコン全体を120%に拡大（71x78→85x94） */
    .treat-card .ico{width:70px;height:77px;}
    /* 「整える」のアイコンだけさらに115% */
    .ico-scale-up-15{transform:scale(1.15);}
    .treatment .treatment-ctas{margin-top:64px;}
    /* PCでは2つのボタンを横並びに（幅を揃える必要はないため、通常のflexに戻す） */
    .treatment-ctas{display:flex;flex-direction:row;justify-content:center;gap:24px;}
    .treatment-ctas .btn-line{margin:0;}

    /* ---- 診療メニューページ：一覧の幅を絞って中央寄せ、アイコン+タイトルを左列に固定配置 ---- */
    .treat-list{max-width:900px;margin:64px auto 0;}
    .treat-item{display:flex;align-items:center;gap:40px;padding:52px 0;}
    .treat-item-head{flex:0 0 auto;width:260px;margin-bottom:0;font-size:44px;gap:20px;}
    .treat-item-head .ico{width:74px;height:81px;}
    .treat-item-body{flex:1;min-width:0;}
    .treat-item .tagline{font-size:16px;}
    .treat-item .desc{font-size:17px;}
    .treat-menu-grid{grid-template-columns:repeat(3, 1fr);gap:12px;margin-top:8px;}
    .treat-menu-link{padding:14px 16px;font-size:14px;}

    /* ---- 診療メニューページ：アクセント写真 ---- */
    .treatment-accent-photo{max-width:1080px;margin:-96px auto 0;padding:0;}
    .treatment-accent-photo img{aspect-ratio:3/1;border-radius:var(--radius-lg);}

    /* ---- 診療メニューページ：症状やお悩みから探す ---- */
    .symptom-finder{padding-top:160px;padding-bottom:160px;}
    .symptom-grid{grid-template-columns:repeat(3, 1fr);gap:20px;max-width:900px;margin:48px auto 0;}
    .symptom-box{padding:112px 28px 56px;}
    .symptom-box::before{width:18px;height:18px;}
    .symptom-box-label{font-size:17px;padding-bottom:20px;margin-bottom:18px;}
    .symptom-box-link{font-size:14px;}

    /* ---- 診療メニューページ：各診療メニューについて（幅を絞って中央寄せ） ---- */
    .treat-detail{padding-top:160px;padding-bottom:160px;}
    .treat-detail-list{max-width:900px;margin:56px auto 0;}
    .treat-detail-title{padding:22px 28px;font-size:18px;scroll-margin-top:120px;}
    .treat-detail-desc{padding:18px 28px 26px 54px;font-size:16px;}
    .treat-detail-desc.ph{margin:18px 28px 26px 54px;}
    .treat-detail-more{margin:-10px 28px 26px 54px;font-size:14px;}

    /* ---- 診療メニュー項目の専用ページ：幅を絞って中央寄せ ---- */
    .program-intro{padding-top:96px;padding-bottom:16px;}
    /* PCでは区切り線を入れず、中央揃えの元の見た目に戻す */
    .breadcrumb{
      font-size:13px;justify-content:center;
      margin-left:0;margin-right:0;padding-left:0;padding-right:0;
      padding-top:0;border-top:none;
    }
    .program-intro .treat-menu-grid{grid-template-columns:repeat(3, 1fr);max-width:680px;}
    .program-intro .treat-menu-link{padding:18px 20px;font-size:16px;}
    .program-card{scroll-margin-top:40px;}
    .program-section{padding-top:16px;padding-bottom:160px;}
    .program-list{max-width:760px;margin:40px auto 0;}
    .program-card{padding:40px;}
    .program-title{font-size:22px;}
    .program-time{font-size:15px;}
    .program-time-ico svg{width:16px;height:16px;}
    .program-desc{font-size:16px;}
    .program-flow-body{font-size:17px;}
    .price-section{max-width:760px;margin:56px auto 0;}
    .price-group-title{font-size:15px;}

    /* ---- 初診の流れ：縦のタイムラインのまま、幅だけ絞って中央寄せ ---- */
    .flow{padding-top:160px;padding-bottom:160px;}
    .flow-list{max-width:700px;margin:64px auto 0;}
    .flow-body h3{font-size:17px;}
    .flow-body p{font-size:15px;}

    /* ---- よくある質問：初診の流れと同じ幅に揃える ---- */
    .faq{padding-top:160px;padding-bottom:160px;}
    .faq-list{max-width:700px;margin:64px auto 0;}
    .faq-q{font-size:16px;}
    .faq-a{padding-top:16px;font-size:15px;}
    .faq-note{margin-top:36px;font-size:14px;}

    /* ---- アクセス：院内紹介と同じ幅（1000px）に揃える ---- */
    .access-sec{padding-bottom:160px;}
    .map{aspect-ratio:3/1;max-width:1000px;margin-left:auto;margin-right:auto;}
    .info-table{max-width:1000px;margin:0 auto;}
    /* 下層ページ用：フッター上に添えるアクセスは地図の高さのみ控えめに（幅はトップページと同じ） */
    .access-sec-compact{padding-top:120px;}
    .access-sec-compact .map{aspect-ratio:16/7;}

    /* 地図の下、診療時間・住所テーブルを横並び2カラムに（診療時間を左に） */
    .access-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:40px;
      align-items:start;
      max-width:1000px;
      margin:0 auto;
    }
    .access-grid .info-table{max-width:none;margin:0;order:1;}
    /* 2カラム内では edge-to-edge の帯にせず、独立したカードにする（背景のピンクは削除） */
    .access-grid .hours-panel{
      order:-1;
      margin:0;
      background:none;
      border-radius:var(--radius-md);
      padding:var(--space-3) 0 0;
    }

    /* ---- お知らせ一覧：診療案内ページと同じ上余白に揃える ---- */
    .news{padding-top:96px;}
    /* ---- お知らせ一覧：読みやすい幅に収めて中央寄せ、日付とタイトルを横並びに ---- */
    .news-list{max-width:760px;margin-left:auto;margin-right:auto;}
    .news-item{gap:24px;padding:26px 0;}
    .news-item-body{display:flex;align-items:baseline;gap:28px;}
    .news-date{font-size:15px;margin-bottom:0;}
    .news-title{font-size:17px;}
    .news-item-arrow{width:18px;height:18px;}

    /* ---- トピックス：横並びリストから雑誌風の4列グリッドに ---- */
    /* PCでは従来通り白背景のまま（スマホ・タブレットのみピンクに変更したため、ここで元に戻す） */
    .topics{padding-top:96px;padding-bottom:160px;background:var(--white);}
    .topics-list{
      display:grid;
      grid-template-columns:repeat(4, 1fr);
      gap:32px;
      max-width:1000px;
      margin:64px auto 0;
    }
    .topic-card{flex-direction:column;align-items:stretch;gap:16px;}
    /* PCではトップページでもサムネを表示に戻す */
    .page-home .topic-thumb{display:block;}
    .topic-thumb{width:100%;}
    .topic-body{padding-top:0;}
    .topic-title{font-size:15px;}
    .topics-more{max-width:1000px;margin:40px auto 0;}

    /* ---- お知らせ・トピックス共通：記事詳細ページの幅を絞って中央寄せ ----
       .articleは<section>なので、全セクション共通の左右gutter（画面幅に応じて広がる）を
       そのまま受け継ぐと、max-widthでの中央寄せと二重に効いて、画面を広げるほど
       本文の実質幅がどんどん狭くなってしまう。ここではgutterを0にして
       max-width+margin:autoだけで中央寄せする */
    .article{padding-top:96px;padding-bottom:160px;padding-left:0;padding-right:0;max-width:900px;margin-left:auto;margin-right:auto;}
    .article-title{font-size:28px;}
    .article-body{font-size:17px;}
    .article-cta{flex-direction:row;flex-wrap:wrap;gap:20px;}
    .article-checklist li{padding-left:30px;}
    .article-checklist li::before{top:8px;width:16px;height:16px;}

    /* ---- 予約・お問い合わせ：見出しを他セクションと同じフォーマットに ---- */
    .cta-sec .en{font-size:13px;}
    .cta-sec h2{font-size:36px;}
    .cta-sec-br{display:none;}
    .cta-tel{max-width:520px;margin:0 auto 14px;}
    .cta-tel .num{font-size:36px;}
    .cta-tel .num-ico{width:28px;height:28px;}
  }