/* 植ビルクリニック 共通デザイン設定（全ページ共有） */
/* ================================================================
   🚨 守ること（作業前に必ず読む）
   1. CSSはこの styles.css 1本だけ。HTMLのページの中に <style> を書かない。
   2. このファイルを変えたら、全11ページの styles.css?v=YYYYMMDDnn を一括で上げる。
      　sed -i '' 's/v=旧/v=新/g' *.html
      　上げ忘れると、患者さんの画面には古い見た目のままキャッシュ（前に読み込んだ控え）が出る。
   3. 新しい部品は必ず「スマホ用の @media ブロックより前」に書く（下の注意書きを参照）。
   4. 🆕 画像を差し替えるときは、ファイル名そのものを変える（2026-07-30 追加）。
      　例：clinic-waiting.jpg → clinic-waiting-2.jpg のように連番を足す。
      　理由＝画像には上の「?v=」のような版番号を付けていないので、同じ名前で上書きしても
      　患者さんの端末は前に読み込んだ古い画像を出し続ける。名前を変えれば必ず新しい方が出る。
      　差し替えたら、その画像を使っている全ページの src を書き換えること（grepで確認）。
   5. 日本語の本文に text-align:justify / text-wrap:pretty / text-wrap:balance / .nb を使わない。
      　改行の調整は line-break: strict だけ。
   ================================================================ */
    :root {
      --paper: #fffdf8;
      --cream: #f3ead8;
      --cream-soft: #f9f3e7;
      --green: #4f7a55;
      --green-deep: #3a5e41;
      --green-soft: #e8efe6;
      --ink: #36403a;
      --ink-soft: #5f6961;   /* 2026-07-30：クリーム/淡い緑の帯の上で4.06〜4.39:1だったため濃く（最小4.70:1）*/
      --line: #e0d7c3;
      --shadow: 0 10px 30px rgba(58, 94, 65, .12);
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 96px; }
    @media (max-width: 900px) { html { scroll-padding-top: 72px; } }
    /* 動きを減らす設定の方への配慮：ヘッダー等のアニメを止める */
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .topbar, .topbar nav a, .topbar a.brand, .topbar .tel-mini, .hamburger span, .to-top, .mobile-menu { transition: none !important; }
      /* ファーストビューの登場演出も止める（2026-07-28） */
      .hero-bg, .hero-left > *, .hero-copy { animation: none !important; }
      .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
      .tel-cta, .tel-cta img { transition: none !important; }
      .tel-cta:hover { transform: none !important; }
      .tel-cta:hover img { transform: none !important; }
    }
    body {
      font-family: "Noto Sans JP", sans-serif;
      color: var(--ink); background: var(--paper);
      line-height: 1.8; -webkit-font-smoothing: antialiased;
      /* 日本語の禁則処理を厳しく（「。」「、」や小さい「っ」が行頭に来ないように） */
      line-break: strict;
    }
    /* ⚠️両端揃え(justify)は不採用＝文字間隔が間延びして読みにくくなるため（2026-07-16 院長判断）。
       改行の質は line-break:strict（上）と .nb（分断させたくない語句）で担保する。 */
    /* 「本文へスキップ」＝キーボードだけで操作する方（読み上げソフトの利用者など）が、
       毎ページでメニューを読み飛ばして本文へ飛べるようにするリンク。2026-07-30 追加。
       ふだんは画面の外に隠れていて、Tabキーで選ばれたときだけ左上に現れる（マウス操作の方には見えない）。 */
    .skip-link { position: fixed; top: -100px; left: 12px; z-index: 300;
      background: var(--green-deep); color: #fff; font-size: 14.5px; font-weight: 700;
      padding: 12px 20px; border-radius: 0 0 12px 12px; letter-spacing: .04em;
      box-shadow: 0 4px 14px rgba(58,94,65,.3); transition: top .18s ease; }
    .skip-link:focus { top: 0; }
    img { display: block; max-width: 100%; }
    /* 2026-07-30：全画像に loading="lazy"（画面に近づいてから読む指定）を付けたため、
       読み込み前は高さが 0 になり、あとから表示がガタつく（ずれる）ようになった。
       下のアイコンはすべて正方形の画像なので、縦横比を先に伝えて枠を確保しておく。
       ⚠️ 新しいアイコンを足したときも、必ずここに追加すること（写真は各所で aspect-ratio 済み）。 */
    .topbar nav a img, .mm-brand img, .mm-item img, .navcard img, .tel-cta img,
    .news-leaf img, .feat-leaf img, .feat-panel img, .serv-icon img,
    .info-panel-icon, .hero-mark, .intro-tel img { aspect-ratio: 1 / 1; }
    a { color: inherit; text-decoration: none; }

    .draft-flag {
      background: #b4543a; color: #fff; text-align: center;
      font-size: 13px; letter-spacing: .04em; padding: 7px 12px;
      cursor: pointer;                            /* クリックで一時的に隠せる（再読み込みで戻る） */
    }
    .draft-flag:hover { background: #a04a32; }

    /* ===== スクロールで出る横帯ヘッダー ===== */
    .topbar {
      position: fixed; top: 0; left: 0; right: 0; z-index: 50;
      background: rgba(255,253,248,.85); border-bottom: 1px solid var(--line);
      -webkit-backdrop-filter: saturate(1.1) blur(10px); backdrop-filter: saturate(1.1) blur(10px);
      box-shadow: 0 4px 18px rgba(58,94,65,.07);
      transform: translateY(-100%); transition: transform .35s ease;
    }
    .topbar.show { transform: translateY(0); }
    /* 下層ページ（内科など）は横帯ヘッダーを最初から常時表示（トップのようにスクロールで出す動きは使わない） */
    .subpage .topbar { position: sticky; transform: none; }
    .page-intro { max-width: 1180px; margin: 0 auto; padding: clamp(26px,3.5vw,46px) clamp(22px,4vw,48px) clamp(34px,4.5vw,56px); }
    /* 記事ページ（お知らせの各件）＝中身がパンくずだけなので、見出し・説明文ぶんの余白を詰める（2026-07-28） */
    .page-intro-slim { padding-top: clamp(20px,2.2vw,26px); padding-bottom: clamp(20px,2.2vw,26px); }
    .page-intro-slim .breadcrumb { margin-bottom: 0; }
    /* 下層ページのセクションは全幅の帯にして背景色を交互に（トップと同じ作り） */
    .med-band { padding: clamp(52px,6.5vw,92px) 0; }
    .med-band .band-inner { max-width: 1180px; margin: 0 auto; padding: 0 clamp(22px,4vw,48px); }
    .band-cream { background: var(--cream-soft); }
    .band-green { background: #eaf1e5; }
    .band-inner .med-sec { margin-top: 0; }
    /* ⚠️ 上の指定は「帯の中の最初のセクション」用。帯の中に2つ目のセクションを入れると
       そちらまで余白ゼロになり、見出しが直上のカードにくっつく。2つ目は入れ子で置くので
       （兄弟ではなく子）セレクタは "+" ではなく子孫指定にすること（2026-07-28） */
    .band-inner .med-sec .med-sec { margin-top: clamp(56px,6.4vw,88px); }
    .breadcrumb { font-size: 12.5px; color: var(--ink-soft); letter-spacing: .02em; margin-bottom: clamp(24px,3.2vw,40px); }
    .breadcrumb a { transition: color .2s; }
    .breadcrumb a:hover { color: var(--green); }
    .breadcrumb .sep { margin: 0 9px; color: #636f5d; }   /* 2026-07-30：1.50:1 → 4.80:1 */
    .breadcrumb .cur { color: var(--green-deep); }
    /* リード文の幅（2026-07-28 見直し）＝880px(1行48字)は目線の移動が長かったので760px(約42字)に。
       トップの院長あいさつ本文を37字に絞ったのと同じ考え方。下層ページ全体に効く。 */
    /* 2026-07-31（院長指示・A案）＝下層ページ冒頭のリード文を中央ぞろえに。
       中央ぞろえの見出しの下で、この .page-lead だけが左ぞろえで軸がずれて見えていた
       （サイト内の他の導入文＝.exam-intro / .visit-lead はすべて中央）。
       ⚠️ 中央ぞろえが許されるのは2〜3行に収まる短い導入文まで。長い段落は左ぞろえ（下の .partner-intro 参照）。
       ⚠️ スマホは行数が増えて行頭がずれるため左ぞろえのまま＝@media(max-width:900px) 側で上書きしている。 */
    .page-lead { max-width: 760px; margin: 16px auto 0; color: var(--ink-soft); font-size: clamp(14px,1.1vw,15px); line-height: 2; text-align: center; }

    /* ページ見出し直下の横長写真（2026-07-28 新設・内科ページから使用）
       ⚠️ 写真はAIで作り直したものがあり掲示物の文字がダミー＝大きく引き伸ばさない。
          低めの帯（PCで16:5）にして文字が読めないサイズに収めること。 */
    .page-photo { max-width: 1180px; margin: clamp(30px,3.4vw,44px) auto 0; border-radius: 18px; overflow: hidden; box-shadow: 0 8px 26px rgba(120,100,60,.10); }
    .page-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 5; object-fit: cover; object-position: center 55%; }
    @media (max-width: 760px) { .page-photo { border-radius: 14px; } .page-photo img { aspect-ratio: 4 / 3; } }
    /* 下層ページ内のセクション見出し（ページ見出しより一段小さい・中央＋緑の下線） */
    .med-sec { margin-top: clamp(44px,5.5vw,72px); }
    .med-sec-head { text-align: center; margin-bottom: clamp(30px,3.6vw,46px); }
    .med-sec-title { font-family: "Noto Serif JP", serif; font-weight: 700; font-size: clamp(20px,1.9vw,26px); color: var(--green-deep); letter-spacing: .1em; }
    .med-sec-title::after { content: ""; display: block; width: 46px; height: 3px; background: var(--green); border-radius: 2px; margin: 14px auto 0; }
    .symptom-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,2vw,24px); }
    .symptom-card { background: #fff; border: 1px solid #ece3d0; border-radius: 16px; padding: clamp(22px,2.4vw,30px) clamp(20px,2.2vw,28px); box-shadow: 0 6px 20px rgba(120,100,60,.06); }
    .symptom-card h3 { font-family: "Noto Serif JP", serif; font-weight: 700; font-size: 17px; color: var(--green-deep); letter-spacing: .06em; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid #ece3d0; }
    .symptom-card ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
    .symptom-card li { position: relative; padding-left: 18px; font-size: 14px; color: var(--ink); line-height: 1.7; }
    .symptom-card li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--green-soft); border: 1.5px solid var(--green); }
    .symptom-note { font-size: 12.5px; color: var(--ink-soft); margin-top: 13px; line-height: 1.7; }
    .symptom-foot { text-align: center; margin-top: clamp(22px,2.8vw,32px); color: var(--ink-soft); font-size: clamp(13.5px,1.05vw,14.5px); line-height: 1.9; }
    @media (max-width: 760px) { .symptom-grid { grid-template-columns: 1fr; } }
    /* 受診のご案内（緑の囲みボックス） */
    .visit-box { background: var(--green-soft); border: 1px solid #cfe0cc; border-radius: 16px; padding: clamp(26px,3vw,40px) clamp(22px,3vw,44px); max-width: 860px; margin: 0 auto; }
    .visit-lead { font-size: clamp(14.5px,1.15vw,16px); color: var(--green-deep); font-weight: 500; line-height: 1.95; text-align: center; }
    .visit-note { margin-top: 14px; text-align: center; font-size: 13px; color: var(--ink-soft); line-height: 1.85; }
    /* 2026-08-09（院長指示）＝※が3行以上ならぶ注記は .note-list を足して行の頭を揃える。
       (1) 各項目を .nl で1ブロックにし、折り返した2行目以降を「※ 」の分だけ字下げ
           （＝ぶら下がりインデント。どこで項目が変わるか目で分かるようになる）
       (2) PC(901px〜)は中央ぞろえだと行頭が毎行ずれる（実測1280pxで406〜541pxの範囲でバラバラ）
           → 左ぞろえにして、かたまりごと中央に置く。⚠️スマホ(〜900px)は既に左ぞろえなので幅は縛らない
             （縛るとタブレットで中途半端に中央へ寄る）。
       (3) 幅と左の余白は上のカード（.visit-items）と同じ値にして、「※」が
           カードの中の文字と同じ縦のラインに並ぶようにしている。 */
    .visit-note.note-list .nl { display: block; padding-left: 1.5em; text-indent: -1.5em; }
    /* 🚨 text-indent は中の要素にも受け継がれる。文中リンクは inline-block なので
       そのままだと「リンクの中の1行目」にもマイナスの字下げが効き、行頭が21px左へずれる
       （小児科の「内科のご案内」で実際に発生・行頭43px→24px）。ここで打ち消す。 */
    .visit-note.note-list .nl a { text-indent: 0; }
    @media (min-width: 901px) {
      .visit-note.note-list { text-align: left; max-width: 900px; margin-left: auto; margin-right: auto; padding-left: clamp(20px,2.4vw,30px); }
    }
    /* 文節のまとまりを改行位置に（日本語が単語の途中で切れるのを防ぐ・全端末対応） */
    .nb { white-space: nowrap; }
    .visit-items { margin-top: clamp(18px,2.4vw,26px); background: #fff; border-radius: 12px; padding: clamp(18px,2vw,24px) clamp(20px,2.4vw,30px); }
    /* トップ「初めての方へ」限定＝カード2枚を横並び（2026-07-28）。他ページの .visit-items は縦のまま */
    .visit-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px,2vw,26px); margin-top: clamp(18px,2.4vw,26px); }
    .visit-cols .visit-items { margin-top: 0; }
    @media (max-width: 900px) { .visit-cols { grid-template-columns: 1fr; gap: 16px; } }
    .visit-items h3 { font-size: 14px; color: var(--green-deep); font-weight: 700; letter-spacing: .06em; margin-bottom: 13px; }
    .visit-items ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
    .visit-items li { position: relative; padding-left: 20px; font-size: 14px; color: var(--ink); line-height: 1.75; }
    .visit-items li::before { content: ""; position: absolute; left: 0; top: .58em; width: 8px; height: 8px; border-radius: 50%; background: var(--green-soft); border: 1.5px solid var(--green); }
    .visit-items strong { font-weight: 700; color: var(--green-deep); }
    /* 2枚並びカード（訪問診療などカードが2つのセクション用） */
    .visit-items ul.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 26px; }

    /* ワクチン一覧（2026-07-28 新設・案A／内科の「予防接種」から使用）
       旧＝幅1180pxのカードに小さな丸印の2列リストで、左右も列の間もスカスカだった。
       → 1件ずつ淡い緑の帯にして 2列×5行。カード幅も900pxに絞る。
       ⚠️ .visit-items は持ち物リストなど他でも使うので、必ず .vax を付けた時だけ効かせること。
       ※小児科の予防接種（3種）はまだ旧スタイルのまま＝小児科ページの見直し時に .vax を付ける。 */
    .visit-items.vax { max-width: 900px; margin-left: auto; margin-right: auto; padding: clamp(24px,2.6vw,32px) clamp(20px,2.4vw,30px); }
    .visit-items.vax h3 { font-size: clamp(15px,1.3vw,16px); padding-bottom: 12px; margin-bottom: clamp(14px,1.6vw,18px); border-bottom: 1px solid #dfe8da; }
    .visit-items.vax ul.two-col { gap: 10px 16px; }
    /* 3種類のとき（小児科）＝2列だと右に1つ余るので横一列に（2026-07-28） */
    .visit-items.vax ul.two-col.three-col { grid-template-columns: repeat(3,1fr); }
    @media (max-width: 900px) { .visit-items.vax ul.two-col.three-col { grid-template-columns: 1fr; } }
    .visit-items.vax li { padding: 12px 16px 12px 38px; background: var(--green-soft); border-radius: 10px; font-size: clamp(14px,1.15vw,14.5px); line-height: 1.6; }
    .visit-items.vax li::before { left: 16px; top: 50%; transform: translateY(-50%); width: 9px; height: 9px; background: #fff; border: 2px solid var(--green); }
    /* 2026-07-30（第4段）＝「上下中央」だと2行になった項目だけ丸が行間に浮いてしまうため、
       狭い画面では1行目の高さに固定する（padding-top 12px ＋ 行の高さ24px の中心＝17.5px） */
    @media (max-width: 420px) { .visit-items.vax li::before { top: 17.5px; transform: none; } }
    @media (max-width: 760px) { .visit-items ul.two-col { grid-template-columns: 1fr; } }
    /* ==== 内科ページ格上げ（.checked で他ページに影響させず適用） ==== */
    /* ② 症状カードの項目を緑チェック丸に */
    .symptom-grid.checked .symptom-card li { padding-left: 28px; line-height: 1.85; }
    .symptom-grid.checked .symptom-card li::before {
      top: .1em; left: 0; width: 19px; height: 19px; border: none;
      background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
      box-shadow: 0 1px 4px rgba(79,122,85,.28);
    }
    /* ご相談の流れ（番号付きステップ） */
    .flow { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(14px,1.8vw,20px); }
    .flow-step { display: flex; gap: clamp(16px,2vw,22px); align-items: flex-start; background: #fff; border: 1px solid #ece3d0; border-radius: 16px; padding: clamp(20px,2.3vw,26px) clamp(20px,2.4vw,30px); box-shadow: 0 6px 20px rgba(120,100,60,.06); }
    .flow-num { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; background: var(--green); color: #fff; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 19px; letter-spacing: 0; display: flex; align-items: center; justify-content: center; }
    .flow-body h3 { font-family: "Noto Serif JP", serif; font-weight: 700; font-size: 16px; color: var(--green-deep); margin-bottom: 8px; letter-spacing: .04em; line-height: 1.5; }
    .flow-body p { font-size: 13.5px; color: var(--ink); line-height: 1.9; }
    @media (max-width: 760px) { .flow-step { padding: 18px 18px; gap: 14px; } .flow-num { width: 36px; height: 36px; font-size: 20px; } }
    /* ===== 訪問診療ページ専用デザイン ===== */
    /* 導入：リード強化＋電話リンク */
    .page-intro .page-lead { color: var(--ink); font-size: clamp(15px,1.2vw,16px); }
    .page-intro .page-lead strong { color: var(--green-deep); font-weight: 700; }
    .intro-tel-wrap { text-align: center; }
    .intro-tel { display: inline-flex; align-items: center; gap: 9px; margin: clamp(16px,2vw,22px) auto 0; color: var(--green-deep); font-weight: 700; font-family: "Noto Serif JP", serif; font-size: clamp(18px,1.7vw,22px); letter-spacing: .03em; }
    .intro-tel img { width: 27px; height: 27px; }
    .intro-tel small { font-family: "Noto Sans JP", sans-serif; font-weight: 500; font-size: 12px; color: var(--ink-soft); letter-spacing: .04em; margin-left: 2px; }
    .area-note { max-width: 720px; margin: clamp(18px,2vw,24px) auto 0; text-align: center; font-size: 13.5px; color: var(--ink-soft); line-height: 1.9; }
    /* 診療日：週間カレンダー */
    .week { display: grid; grid-template-columns: repeat(7,1fr); gap: clamp(6px,1vw,10px); max-width: 600px; margin: 0 auto; align-items: stretch; }
    .week-day { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(12px,1.6vw,18px) 0; border-radius: 12px; background: var(--paper); border: 1px solid #ece3d0; color: var(--ink-soft); font-size: clamp(14px,1.4vw,16px); font-weight: 500; }
    .week-day.on { background: var(--green); border-color: var(--green); color: #fff; font-weight: 700; font-size: clamp(19px,2.4vw,27px); box-shadow: 0 8px 18px rgba(79,122,85,.28); }
    .week-day.on small { font-size: 10px; font-weight: 500; letter-spacing: .12em; margin-top: 3px; opacity: .92; }
    /* 2026-07-30（第4段）＝小さい画面では7列だと1マス34pxしかなく、木曜の「訪問」が
       2文字ずつ2行に潰れていた。→ 4列＋3列の2段に組み替え（2段目は中央ぞろえ）。
       1マス34px → 約64pxになる。 */
    @media (max-width: 420px) {
      .week { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 300px; }
      .week-day { flex: 0 0 calc((100% - 18px) / 4); }
    }
    /* 「訪問」の10pxは小さすぎるためスマホでは12pxに（PC版は10pxのまま＝7/28承認の見た目を維持） */
    @media (max-width: 900px) { .week-day.on small { font-size: 12px; } }
    .week-cap { max-width: 620px; margin: clamp(20px,2.4vw,28px) auto 0; text-align: center; font-size: clamp(14px,1.1vw,15px); color: var(--ink); line-height: 2; }
    .week-cap strong { color: var(--green-deep); font-weight: 700; }
    /* 診療内容：看取りの静かなカード */
    /* 2026-07-28：640pxだと45字の文が2行になり最終行が数文字だけ残っていたため 720px に。
       内科の「院内でできる検査」「予防接種」の2文が1行に収まる。小児科の予防接種(51字)は2行のまま。 */
    .care-lead { text-align: center; max-width: 720px; margin: 0 auto clamp(22px,2.6vw,32px); color: var(--ink); font-size: clamp(14px,1.1vw,15px); line-height: 1.95; }
    /* ご相談の流れ
       2026-07-31（院長指示）＝カードをつなぐ縦線はPC版・スマホとも出さない（削除）。
       カードの間の余白だけで区切りが伝わるため。position:relative と padding-left は
       カードの見た目を保つために残す（縦線のためだけの指定ではない）。 */
    .flow-timeline .flow-step { position: relative; padding-left: 22px; }
    @media (max-width: 760px) { .flow-timeline .flow-step { padding-left: 18px; } }
    /* 電話相談CTA */
    /* 2026-07-28：中の持ち物リストの2件目(44字)が2行になっていたため 640→780px に。
       ⚠️ 幅を広げると houmon / about の説明文まで広がるので、説明文だけ640pxに固定して
          （下の .contact-cta-sub）カードだけが広がるようにしている。 */
    .contact-cta { text-align: center; max-width: 780px; margin: 0 auto; }
    /* 締めブロックの見出し（2026-07-28）＝他のセクション見出し(.med-sec-title)と同じ緑バーを足して体裁を統一。
       文字サイズも 27px → 26px に合わせた。naika/houmon/about の3ページに効く。 */
    .contact-cta-title { font-family: "Noto Serif JP", serif; font-weight: 700; font-size: clamp(20px,1.9vw,26px); color: var(--green-deep); letter-spacing: .1em; }
    .contact-cta-title::after { content: ""; display: block; width: 46px; height: 3px; background: var(--green); border-radius: 2px; margin: 14px auto 0; }
    .contact-cta-sub { max-width: 640px; margin: 18px auto 0; color: var(--ink); font-size: clamp(14px,1.1vw,15px); }
    .contact-tel { display: inline-flex; align-items: center; justify-content: center; gap: 12px; background: var(--green); color: #fff; border-radius: 13px; padding: 16px 26px; box-shadow: var(--shadow); margin: clamp(22px,2.6vw,30px) auto 0; }
    .contact-tel:hover { background: var(--green-deep); }
    .contact-tel img { width: 46px; height: 46px; background: #fff; border-radius: 50%; padding: 7px; flex: none; }
    .contact-tel .num { font-family: "Noto Serif JP", serif; font-weight: 700; font-size: clamp(23px,2.2vw,30px); letter-spacing: .03em; line-height: 1; }
    .contact-hours { margin-top: 14px; font-size: 12.5px; color: var(--ink-soft); }
    .contact-cta .visit-items { text-align: left; margin-top: clamp(22px,2.6vw,30px); }
    /* 導入ヒーロー（左テキスト／右イラスト） */
    /* 対象となる方：チェックリスト（✓は緑丸に白チェックを焼き込み＝ズレない） */
    .checklist { list-style: none; max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(14px,1.8vw,20px); }
    .checklist li { position: relative; padding-left: 44px; font-size: clamp(15px,1.25vw,17px); color: var(--ink); line-height: 1.85; font-weight: 500; }
    .checklist li::before { content: ""; position: absolute; left: 0; top: .1em; width: 28px; height: 28px; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 17px 17px no-repeat; box-shadow: 0 2px 6px rgba(79,122,85,.25); }
    /* チェックリスト2列版（小児科の症状など項目が多いとき） */
    /* 3列版（小児科の症状など・PCは3列／タブレット2列／スマホ1列） */
    .checklist.cols-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,1.8vw,22px) clamp(24px,2.8vw,40px); max-width: 940px; }
    @media (max-width: 820px) { .checklist.cols-3 { grid-template-columns: 1fr 1fr; max-width: 640px; } }
    @media (max-width: 520px) { .checklist.cols-3 { grid-template-columns: 1fr; max-width: 400px; } }
    .checklist-note { max-width: 820px; margin: clamp(22px,2.6vw,32px) auto 0; text-align: center; color: var(--ink-soft); font-size: clamp(13.5px,1.05vw,14.5px); line-height: 1.9; }
    /* 症状リストを白パネルに入れる（小児科） */
    .symptom-panel { max-width: 940px; margin: 0 auto; background: #fff; border: 1px solid #ece3d0; border-radius: 18px; box-shadow: 0 6px 22px rgba(120,100,60,.06); padding: clamp(30px,3.4vw,46px) clamp(26px,3.4vw,52px); }
    .symptom-panel .checklist { max-width: none; }
    /* メッセージ枠（保護者の方へ など短い文章を白カードで） */

    /* 説明パネル（2026-07-28 新設・案3c-A／内科の「地域の医療機関との連携」から使用）
       .msg-box（白＋左辺だけ緑線）は控えめすぎたので、アイコン＋小見出し＋区切り線＋影を強めた形に。
       ほかのページでも使い回せる汎用部品。※.msg-box は小児科でまだ使っているので残置。 */
    .info-panel { max-width: 820px; margin: 0 auto; background: #fff; border: 1px solid #ece3d0; border-radius: 20px; padding: clamp(28px,3.2vw,42px) clamp(24px,3.2vw,46px); box-shadow: 0 12px 32px rgba(120,100,60,.13); }
    .info-panel-head { display: flex; align-items: center; gap: clamp(12px,1.4vw,18px); padding-bottom: clamp(16px,1.8vw,20px); margin-bottom: clamp(18px,2vw,24px); border-bottom: 1px solid #ece3d0; }
    .info-panel-icon { width: clamp(46px,4.4vw,56px); height: auto; flex: none; }
    .info-panel h3 { font-family: "Noto Serif JP", serif; font-weight: 700; font-size: clamp(16.5px,1.5vw,19px); color: var(--green-deep); letter-spacing: .04em; line-height: 1.6; }
    .info-panel p { font-size: clamp(14px,1.1vw,15.5px); color: var(--ink); line-height: 2.05; }
    .info-panel-link { display: inline-flex; align-items: center; gap: 8px; margin-top: clamp(18px,2vw,24px); font-size: 14.5px; font-weight: 700; color: var(--green); letter-spacing: .03em; transition: color .2s; }
    .info-panel-link .arw { transition: transform .25s ease; }
    .info-panel-link:hover { color: var(--green-deep); }
    .info-panel-link:hover .arw { transform: translateX(4px); }
    @media (max-width: 620px) { .info-panel-head { align-items: flex-start; } }
    /* 対応エリア：色面マップ（地名を大きく） */
    .zone-map { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px,1.8vw,20px); max-width: 720px; margin: 0 auto; }
    /* 2026-07-28：濃い緑のベタ塗り＋白文字はサイト内で質感が浮いていたため、
       他セクションと同じ「白いカード＋緑のアクセント」に変更。左右で緑の濃さを変えていた
       .z1/.z2 の出し分けも廃止（意味があるように見えて実際は無かった）。 */
    .zone-block { background: #fff; border: 1px solid #ece3d0; border-radius: 18px; padding: clamp(32px,4vw,52px) 18px; text-align: center; color: var(--green-deep); box-shadow: 0 8px 24px rgba(120,100,60,.10); }
    .zone-block .pin { width: 38px; height: 38px; margin: 0 auto 14px; display: block; }
    .zone-city { font-family: "Noto Serif JP", serif; font-weight: 700; font-size: clamp(27px,3.4vw,40px); letter-spacing: .06em; line-height: 1.2; }
    .zone-part { margin-top: 10px; font-size: clamp(15px,1.4vw,17px); font-weight: 500; color: var(--ink-soft); }
    @media (max-width: 420px) { .zone-map { grid-template-columns: 1fr; } }
    /* 導入：アイコンを「訪問診療」の左横に（中央そろえ） */
    .hero-title-row { display: flex; align-items: center; justify-content: center; gap: clamp(10px,1.4vw,16px); }
    .hero-title-icon { width: clamp(40px,4.4vw,52px); height: auto; flex: none; }
    /* 診療内容：慢性・看取りを同じ形・同じ幅のカードにそろえる */
    .care-list { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(16px,2vw,22px); }
    .care-item { background: #fff; border: 1px solid #ece3d0; border-radius: 16px; padding: clamp(24px,2.8vw,34px) clamp(22px,2.6vw,38px); box-shadow: 0 6px 20px rgba(120,100,60,.06); }
    .care-item h3 { font-family: "Noto Serif JP", serif; font-weight: 700; font-size: clamp(16.5px,1.5vw,19px); color: var(--green-deep); letter-spacing: .04em; line-height: 1.6; margin-bottom: 12px; }
    .care-item-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
    .care-item-head .care-icon { width: clamp(42px,4vw,50px); height: auto; flex: none; }
    .care-item-head h3 { margin-bottom: 0; }
    .care-item p { font-size: clamp(14px,1.05vw,15px); color: var(--ink); line-height: 2; }
    /* 2026-07-28：高さを91px→76pxに（上下の余白12→10px・ロゴ54→46px・アイコン30→24px） */
    .topbar-inner { max-width: 1560px; margin: 0 auto; padding: 10px clamp(30px, 4vw, 60px); display: flex; align-items: center; gap: clamp(18px, 2.4vw, 40px); }
    .topbar .brand { font-family: "Noto Serif JP", serif; font-weight: 700; font-size: clamp(23px, 2vw, 30px); color: var(--green-deep); letter-spacing: .05em; transition: color .2s; display: flex; align-items: center; }
    .topbar .brand img { height: 46px; width: auto; display: block; transition: opacity .2s; }
    .topbar a.brand:hover, .topbar a.brand:focus-visible { color: var(--green); }
    .topbar a.brand:hover img, .topbar a.brand:focus-visible img { opacity: .82; }
    .topbar nav { margin-left: auto; display: flex; align-items: center; }
    .topbar nav a { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--ink); font-size: 14.5px; font-weight: 500; letter-spacing: .02em; padding: 3px clamp(16px, 2vw, 30px); position: relative; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 6px; transition: color .2s, text-decoration-color .25s; }
    .topbar nav > * { position: relative; }
    .topbar nav > * + *::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 36px; background: var(--line); }
    .topbar nav a img { width: 24px; height: 24px; }
    .topbar nav a:hover, .topbar nav a:focus-visible { color: var(--green); text-decoration-color: var(--green); }
    .topbar nav a[aria-current="page"] { color: var(--green-deep); text-decoration-color: var(--green); font-weight: 700; }
    /* いま見ているセクションを光らせる（トップページ内・2026-07-28） */
    .topbar nav a.is-current { color: var(--green-deep); text-decoration-color: var(--green); font-weight: 700; }

    /* 診療案内 ドロップダウン（PCのみ・ホバー/フォーカスで内科・小児科・訪問診療を表示） */
    .nav-drop { position: relative; display: flex; align-items: center; }
    .nav-caret { display: inline-block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; margin-left: 6px; vertical-align: middle; opacity: .55; transition: transform .2s, opacity .2s; }
    .nav-drop:hover .nav-caret, .nav-drop:focus-within .nav-caret { transform: rotate(180deg); opacity: 1; }
    .nav-drop-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 152px; background: #fff; border: 1px solid #ece3d0; border-radius: 12px; box-shadow: var(--shadow); padding: 8px; display: flex; flex-direction: column; gap: 2px; opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s; z-index: 60; }
    .nav-drop-menu::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
    .nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(2px); }
    .topbar nav .nav-drop-menu a { display: block; padding: 12px 18px; border-radius: 8px; color: var(--ink); font-size: 14.5px; font-weight: 500; letter-spacing: .04em; text-align: center; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; }
    .topbar nav .nav-drop-menu a:hover, .topbar nav .nav-drop-menu a:focus-visible { background: var(--green-soft); color: var(--green-deep); }
    /* キーボード操作時だけ出る緑のフォーカス枠（マウスでは出ない） */
    .topbar nav a:focus-visible, .topbar a.brand:focus-visible, .topbar .tel-mini:focus-visible, .hamburger:focus-visible, .mobile-menu a:focus-visible, .mm-close:focus-visible { outline: 2.5px solid var(--green); outline-offset: 3px; }
    /* 2026-07-28：ヘッダーの電話は「いちばん押してほしい場所」なので緑のベタ塗りに
       （フッターは枠線のまま＝役割の強弱を分ける） */
    .topbar .tel-mini { display: flex; align-items: center; gap: 9px; border: 1.5px solid var(--green); background: var(--green); color: #fff; padding: 9px 20px; border-radius: 999px; font-weight: 700; font-size: 17px; font-family: "Noto Serif JP", serif; letter-spacing: .02em; margin-left: clamp(14px, 1.8vw, 30px); box-shadow: 0 4px 12px rgba(58,94,65,.18); transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
    .topbar .tel-mini:hover { background: var(--green-deep); border-color: var(--green-deep); transform: translateY(-2px); box-shadow: 0 7px 16px rgba(58,94,65,.26); }
    .topbar .tel-mini img { width: 20px; height: 20px; background: #fff; border-radius: 50%; padding: 3px; box-sizing: content-box; }

    /* ===== ハンバーガーボタン（スマホのみ表示・角丸四角） ===== */
    .hamburger { display: none; margin-left: auto; flex: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 48px; height: 48px; border: none; border-radius: 13px; background: var(--green); cursor: pointer; }
    .hamburger span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; }

    /* ===== スマホ用 電話ボタン（ヘッダー右・ハンバーガーの左隣） ===== */

    /* ===== スマホ用 全画面メニュー ===== */
    .mobile-menu {
      position: fixed; inset: 0; z-index: 100; background: var(--cream-soft);
      /* iPhone Safariの下部バーが出ている時も、その分を除いた高さにする（バーの裏に隠れない） */
      height: 100dvh;
      display: flex; flex-direction: column;
      padding: 18px 20px calc(22px + env(safe-area-inset-bottom));
      opacity: 0; visibility: hidden; transform: translateY(-8px);
      transition: opacity .28s ease, transform .28s ease, visibility .28s;
      /* 2026-07-30：全体をスクロールさせるのをやめ、一覧(.mm-list)だけスクロールさせる。
         → 項目が増えても画面が低くても、電話ボタン(.mm-tel)が必ず画面の一番下に残る。
         （ヘッダーの受話器ボタンを外したので、ここが電話への唯一の入口になった） */
      overflow: hidden;
    }
    .mobile-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
    .mm-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
    .mm-brand { display: flex; align-items: center; gap: 10px; font-family: "Noto Serif JP", serif; font-weight: 700; font-size: 22px; color: var(--green-deep); letter-spacing: .04em; }
    .mm-brand img { width: 52px; height: auto; flex: none; }
    .mm-close { width: 48px; height: 48px; flex: none; border: none; border-radius: 13px; background: var(--green); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
    .mm-close svg { width: 20px; height: 20px; }
    .mm-head { flex: none; }
    /* 一覧だけがスクロールする領域。上下に少し余白を入れて、切れているのが分かるようにする */
    .mm-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
      display: flex; flex-direction: column; gap: 12px; padding-bottom: 6px; }
    .mm-item { display: flex; align-items: center; gap: 16px; background: var(--paper); border-radius: 14px; padding: 15px 20px; min-height: 64px; box-shadow: 0 4px 14px rgba(120,100,60,.06); transition: background .15s; }
    .mm-item img { width: 40px; height: 40px; flex: none; }
    .mm-item span { font-family: "Noto Serif JP", serif; font-weight: 700; font-size: 17px; color: var(--green-deep); letter-spacing: .04em; }
    .mm-item:active { background: var(--green-soft); }
    .mm-sublist { display: flex; flex-direction: column; gap: 8px; margin: 2px 0; padding-left: 22px; }
    .mm-subitem { display: flex; align-items: center; gap: 12px; background: var(--paper); border-radius: 12px; padding: 13px 18px; min-height: 54px; box-shadow: 0 3px 10px rgba(120,100,60,.05); transition: background .15s; }
    .mm-subitem::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--green-soft); border: 1.5px solid var(--green); }
    .mm-subitem span { font-family: "Noto Serif JP", serif; font-weight: 700; font-size: 15.5px; color: var(--green-deep); letter-spacing: .04em; }
    .mm-subitem:active { background: var(--green-soft); }
    /* その他の項目（診療時間・お知らせ・施設基準等・プライバシーポリシー）
       ＝上のカードより控えめな見た目にして、「知りたいこと」と「手続き情報」を分ける */
    .mm-minor { margin-top: 14px; padding-top: 13px; border-top: 1px dashed #c3cfba;
      display: flex; flex-direction: column; gap: 2px; }
    .mm-minoritem { display: flex; align-items: center; min-height: 46px; padding: 6px 20px;
      border-radius: 10px; transition: background .15s; }
    .mm-minoritem span { font-size: 14.5px; font-weight: 500; color: var(--ink); letter-spacing: .03em; }
    .mm-minoritem::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%;
      background: var(--green); margin-right: 11px; opacity: .55; }
    .mm-minoritem:active { background: var(--green-soft); }

    /* 電話ボタン＝一覧の外側にあるので、スクロールしても必ず画面の一番下に残る */
    .mm-tel { flex: none; margin-top: 12px; margin-bottom: 6px; display: flex; align-items: center; justify-content: center; gap: 12px; background: var(--green-deep); color: #fff; border-radius: 14px; padding: 18px; font-family: "Noto Serif JP", serif; font-weight: 700; font-size: 22px; letter-spacing: .03em; box-shadow: 0 10px 24px rgba(58,94,65,.22); }
    .mm-tel svg { width: 24px; height: 24px; flex: none; }
    /* 画面が低いとき（iPhoneの下部バーが出ている等）＝電話ボタンまで1画面に収める */
    @media (max-height: 720px) {
      .mm-head { margin-bottom: 10px; }
      .mm-list { gap: 8px; margin-bottom: 12px; }
      .mm-item { min-height: 52px; padding: 10px 18px; }
      .mm-item img { width: 32px; height: 32px; }
      .mm-item span { font-size: 16px; }
      .mm-subitem { min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
      .mm-tel { padding: 13px; font-size: 20px; }
      .mm-minor { margin-top: 10px; padding-top: 10px; }
      .mm-minoritem { min-height: 40px; padding-top: 4px; padding-bottom: 4px; }
    }

    /* ===== ファーストビュー ===== */
    .hero { position: relative; min-height: 100vh; overflow: hidden; }
    /* 左パネルの幅（2026-07-30 第4段で連続化）
       旧＝35%固定＋「1080px以下だけ40%」だったため、画面を1080→1100pxに広げると
       左パネルが432px→385pxと逆に縮む段差ができていた。
       → max(35%, 360px) にして段差を解消。1280px以上は35%＝7/28承認どおりの数値のまま、
         狭い側は360pxで下げ止まる（901pxでの40%＝360pxと同じ）。 */
    .hero-bg { position: absolute; top: 0; bottom: 0; left: max(35%, 360px); right: 0; background: url("assets/hero-doctor.jpg") 100% 22%/cover no-repeat; }
    /* ============================================================
       ヒーローの写真カルーセル（2026-07-30・院長要望）
       スマホでだけ「診察室の院長 → 外観 → 待合室」の3枚を横スワイプで見せる。
       ⚠️ PC版は1枚のまま（7/28に院長承認済みの見た目を変えない）＝ここでは display:none。
       ⚠️ JSが動くときだけ出す（html.js方式）。JSが読めない環境では今までどおり
          .hero-bg の背景写真1枚が出るので、写真が消える事故が起きない。
       ============================================================ */
    .hero-slides, .hero-dots { display: none; }

    /* コピーを写真の左（明るくぼけた部分）へ移したので、ベールは左端だけ薄くかける。
       右側は写真をそのまま見せる（2026-07-28） */
    .hero-bg::after { content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(255,253,248,.72) 0%, rgba(255,253,248,.5) 20%, rgba(255,253,248,.18) 38%, rgba(255,253,248,0) 52%); }

    /* 左パネル（まっすぐカット） */
    .hero-left {
      position: absolute; top: 0; bottom: 0; left: 0; width: max(35%, 360px);
      background: linear-gradient(160deg, var(--cream-soft), var(--cream));
      border-right: 1px solid var(--line);
      padding: 52px clamp(22px, 2vw, 36px) 44px clamp(22px, 2vw, 36px);
      display: flex; flex-direction: column; justify-content: center; align-items: center; gap: clamp(18px, 2.2vh, 26px); z-index: 2;
    }
    .hero-head { text-align: center; }
    /* 院名の左にロゴマーク（2026-07-28） */
    .hero-brand { display: flex; align-items: center; justify-content: center; gap: clamp(8px, .9vw, 14px); }
    .hero-mark { width: clamp(40px, 3.6vw, 58px); height: auto; flex: none; }
    .hero-name { font-family: "Noto Serif JP", serif; font-weight: 700; font-size: clamp(26px, 2.4vw, 40px); color: var(--green-deep); letter-spacing: .04em; line-height: 1.2; }
    .hero-depts { font-size: clamp(15px, 1.2vw, 17px); color: var(--ink); font-weight: 500; letter-spacing: .12em; margin-top: 6px; }
    .hero-depts span { margin: 0 .7em; color: #736848; }   /* 2026-07-30：1.96:1 → 4.62:1 */

    /* ナビ 2×2 カード */
    .navcards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 320px; }
    .navcard {
      background: var(--paper); border: 1px solid var(--line); border-radius: 13px;
      padding: 12px 6px 9px; text-align: center; transition: .2s;
      display: flex; flex-direction: column; align-items: center; gap: 3px;
    }
    .navcard:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: #cdbf9f; }
    .navcard img { width: 78px; height: 78px; }
    .navcard span { font-weight: 700; font-size: 15px; color: var(--green-deep); }

    /* 電話ボタン（シンプル） */
    .tel-cta { display: flex; align-items: center; justify-content: center; gap: 12px; background: var(--green); color: #fff; border-radius: 13px; padding: 13px 18px; width: 100%; max-width: 320px; box-shadow: var(--shadow); transition: background .25s ease, transform .25s ease, box-shadow .25s ease; }
    /* カーソルを乗せたときの動き（2026-07-28）＝メニューカードと同じ「浮き上がる」動きで統一 */
    .tel-cta:hover { background: var(--green-deep); transform: translateY(-3px); box-shadow: 0 12px 24px rgba(79,122,85,.3); }
    .tel-cta:active { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(79,122,85,.28); }
    .tel-cta img { width: 46px; height: 46px; background: #fff; border-radius: 50%; padding: 7px; flex: none; transition: transform .3s ease; }
    .tel-cta:hover img { transform: scale(1.07) rotate(-7deg); }
    .tel-cta .num { font-family: "Noto Serif JP", serif; font-weight: 700; font-size: clamp(23px, 2.2vw, 30px); letter-spacing: .03em; line-height: 1; }

    /* 診療時間表 */
    .hours { width: 100%; max-width: 372px; text-align: center; }
    .hours h2 { font-size: 15px; color: var(--green-deep); font-weight: 700; letter-spacing: .06em; margin-bottom: 8px; }
    .hours table { width: 100%; border-collapse: collapse; font-size: 12.5px; background: var(--paper); border-radius: 10px; overflow: hidden; }
    .hours th, .hours td { border: 1px solid var(--line); padding: 6px 2px; text-align: center; }
    .hours thead th { background: var(--green-soft); color: var(--green-deep); font-weight: 700; }
    .hours tbody th { background: var(--cream-soft); font-weight: 700; font-size: 11.5px; white-space: nowrap; }
    .hours td.x { color: #8a6a5f; }   /* 2026-07-30：2.18:1で読めなかったため 4.80:1 に。休診の見落とし＝誤来院を防ぐ */
    .hours td.v { color: var(--green); font-size: 11px; }
    .hours .note { font-size: 10.5px; color: var(--ink-soft); margin-top: 8px; line-height: 1.7; letter-spacing: -.01em; }
    .hours .closed { font-weight: 700; color: var(--ink); }

    /* ===== 2026-07-30 ①「※火曜の午後は16:00開始」を見落とさせない（案A・スマホのみ）=====
       ⚠️ PC版は 2026-07-28 に完成しており、ファーストビューが1画面に収まる設計。
          この帯をPCにも出すと左パネルが画面からはみ出すため、スマホ限定にしている。
          PCでは .hi は「ただの改行」として働く＝作業前とまったく同じ見た目。 */
    .hours .note .hi, .foot-hours .note .hi { display: block; }

    /* ===== 2026-07-30 ②「本日は診療日か」の一行帯（案A・トップのスマホのみ）=====
       スマホで来る方がいちばん知りたい「今日やっているか」を、表を読み解かずに分かるように。
       内容は下の表の言い換えだけ＝新しい情報は足していない（誘導の言葉も入れない）。
       ⚠️ PCでは非表示（上と同じ理由＝ファーストビューが1画面に収まらなくなる）。 */
    .today-bar {
      display: none;                 /* PCでは出さない。スマホ用の @media で display:flex にする */
      align-items: center; gap: 9px;
      background: var(--green-soft); border-radius: 10px;
      padding: 9px 11px; margin-bottom: 11px;
    }
    .today-bar .tb-label {
      flex: none; background: var(--green-deep); color: #fff;
      font-weight: 700; font-size: 11px; letter-spacing: .08em;
      padding: 5px 8px; border-radius: 6px; line-height: 1;
    }
    /* 文字は中央ぞろえ（2026-07-30 院長指示）。2行になる火曜は改行位置を指定してあるので行の頭はそろう */
    .today-bar .tb-text { font-weight: 700; font-size: 13px; line-height: 1.55; color: var(--green-deep); text-align: center; }
    /* 札と文字のかたまりを帯の中央に置く */
    .today-bar { justify-content: center; }
    /* 狭い画面（〜359px）だけ有効な改行。広い画面では1行に収まるので改行しない */
    .today-bar .w-br { display: none; }
    @media (max-width: 359px) { .today-bar .w-br { display: inline; } }
    /* 休診の日は、診療日と見まちがえないよう色を変える（緑＝診療／赤茶＝休診） */
    .today-bar.is-closed { background: #f6e9e4; }
    .today-bar.is-closed .tb-label { background: #8a6a5f; }
    .today-bar.is-closed .tb-text { color: #7a5a50; }
    /* 祝日が木曜・日曜に重なる日は、どちらが優先か確認できていないため断定しない（生成り＝中立の色）*/
    .today-bar.is-unknown, .today-bar.is-notice { background: var(--cream); }
    .today-bar.is-unknown .tb-label, .today-bar.is-notice .tb-label { background: #7d7460; }
    .today-bar.is-unknown .tb-text, .today-bar.is-notice .tb-text { color: #5f5747; }

    /* キャッチコピー＝写真の左側にたて書き（2026-07-28）
       院長先生と重ならない位置。右から左へ2列（日本語のたて書きの読み順） */
    .hero-copy { position: absolute; z-index: 3; left: 40%; top: 50%; transform: translateY(-50%); }
    .hero-copy .lead { writing-mode: vertical-rl; font-family: "Noto Serif JP", serif; font-weight: 600; font-size: clamp(24px, 2.5vw, 38px); letter-spacing: .1em; line-height: 1.72; max-height: 68vh; }
    .hero-copy .lead span { display: block; }
    .hero-copy .lead .g { color: #56864f; }
    .hero-copy .lead .d { color: var(--ink); }

    /* 画面の高さが低いノートパソコン向け＝左パネルを1画面に収める（2026-07-28）
       ⚠️ 2026-07-30：760pxだと 1366×768 のノートPCが対象外ではみ出していた（1280×800・1440×900も）。
          → 920pxに広げて768/800/900も対象にした。1920×1080は従来どおり対象外（余裕あり）。 */
    @media (min-width: 901px) and (max-height: 920px) {
      .hero-left { padding-top: 32px; padding-bottom: 28px; gap: 14px; }
      .navcard { padding: 9px 6px 7px; }
      .navcard img { width: 64px; height: 64px; }
      .tel-cta { padding: 10px 16px; }
      .tel-cta img { width: 40px; height: 40px; }
      .hours h2 { margin-bottom: 6px; }
      .hours th, .hours td { padding: 4px 2px; }
      .hours .note { margin-top: 6px; }
    }
    /* 縦がとくに短いノートPC（1366×768 など）＝上の一段だけでは18px足りなかったのでもう一段詰める */
    @media (min-width: 901px) and (max-height: 790px) {
      .hero-left { padding-top: 22px; padding-bottom: 20px; }
      .navcard img { width: 56px; height: 56px; }
      .hours th, .hours td { padding: 3px 2px; }
    }

    /* ===== スクロールで現れる演出（2026-07-28・全セクションで使い回せる共通部品） =====
       .reveal を付けた要素が画面に入ったら、下からふわっと浮き上がる。一度出たら以降は動かない。
       JSが動く環境でだけ隠す（html.js）ので、万一JSが読めなくても内容は必ず表示される。 */
    .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); }
    .js .reveal.reveal-delay { transition-delay: .15s; }
    /* 横並びのカードを左から順に出すとき用 */
    .js .reveal.reveal-d2 { transition-delay: .12s; }
    .js .reveal.reveal-d3 { transition-delay: .24s; }
    .js .reveal.is-visible { opacity: 1; transform: none; }

    /* ===== ファーストビューの登場演出（2026-07-28）＝ふわっと浮き上がる ===== */
    @keyframes heroRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
    @keyframes heroCopyRise { from { opacity: 0; transform: translateY(calc(-50% + 18px)); } to { opacity: 1; transform: translateY(-50%); } }
    @keyframes heroPhotoIn { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
    /* fill-mode は backwards（both だと演出後も transform が固定され、
       電話ボタンなどのカーソルを乗せたときの動きが効かなくなる）。 */
    .hero-bg { animation: heroPhotoIn 2.2s cubic-bezier(.22,.61,.36,1) backwards; }
    .hero-left > * { animation: heroRise .8s cubic-bezier(.22,.61,.36,1) backwards; }
    .hero-left > *:nth-child(1) { animation-delay: .15s; }
    .hero-left > *:nth-child(2) { animation-delay: .25s; }
    .hero-left > *:nth-child(3) { animation-delay: .35s; }
    .hero-left > *:nth-child(4) { animation-delay: .45s; }
    .hero-copy { animation: heroCopyRise 1s cubic-bezier(.22,.61,.36,1) .5s both; }

    /* ===== お知らせ ===== */
    .news { background: var(--cream-soft); padding: clamp(48px,4vw,58px) 0; }
    /* 2026-07-28：見出しを上部中央へ（他セクションと同じ縦積み）＋緑バーを追加 */
    .news-inner { max-width: 1180px; margin: 0 auto; padding: 0 clamp(22px, 4vw, 48px); }
    .news-head { text-align: center; margin-bottom: clamp(28px, 3vw, 42px); }
    .news-leaf { display: flex; justify-content: center; margin-bottom: 8px; }
    .news-leaf img { width: 58px; height: auto; }
    .news-title { font-family: "Noto Serif JP", serif; font-weight: 700; font-size: clamp(26px, 2.4vw, 34px); color: var(--green); letter-spacing: .18em; }
    .news-title::after { content: ""; display: block; width: 42px; height: 3px; background: var(--green); border-radius: 2px; margin: 14px auto 0; }
    .news-en { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: .32em; color: var(--ink-soft); margin-top: 10px; padding-left: .32em; }
    /* リストは中央寄せ。横いっぱいだとタイトルが短く間延びするため幅を絞る */
    .news-body { max-width: 900px; margin: 0 auto; }
    /* 中央に寄せると輪郭がぼやけるため、リストの上下にも線を入れて「ひとつの表」に見せる */
    .news-list { list-style: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .news-item + .news-item { border-top: 1px solid var(--line); }
    .news-item a { display: flex; align-items: center; gap: 22px; padding: 18px 8px; border-radius: 10px; transition: .2s; }
    .news-item a:hover { background: rgba(255,255,255,.6); }
    .news-item a:hover .news-ttl { color: var(--green); }
    .news-date { flex: none; font-family: "Noto Sans JP", sans-serif; font-weight: 500; font-size: 15px; letter-spacing: .04em; color: var(--ink-soft); min-width: 96px; }
    /* ⚠️ .news-cat（「お知らせ」などの分類タグ）は 2026-07-28 に廃止（院長判断＝案B）。
       理由＝今後はお知らせ中心の投稿になる見込みで、3件とも同じ分類になり意味を持たないため。
       トップ・一覧・記事の全9か所からHTMLごと削除済み。将来分類を分けたくなったら復活させる。 */
    .news-ttl { color: var(--ink); font-size: clamp(15px, 1.15vw, 17px); font-weight: 500; transition: .2s; }
    .news-foot { text-align: center; margin-top: 32px; }
    /* 「お知らせ一覧をみる」＝緑ベタの角丸四角ボタン（ヘッダーのボタンと同じ形） */
    .news-more { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 0 28px; border-radius: 13px; background: var(--green-deep); color: #fff; font-family: "Noto Serif JP", serif; font-weight: 700; font-size: 16.5px; letter-spacing: .06em; box-shadow: 0 6px 16px rgba(58,94,65,.2); transition: background .2s, transform .2s, box-shadow .2s; }
    .news-more .circ { font-size: 18px; transition: transform .2s; }
    .news-more:hover, .news-more:focus-visible { background: var(--green); box-shadow: 0 8px 20px rgba(58,94,65,.26); }
    .news-more:hover .circ { transform: translateX(3px); }

    /* ===== お知らせ一覧ページ（news.html／各件は記事ページへ飛ぶ） ===== */
    .newsfull { max-width: 840px; margin: 0 auto; }
    /* 上下の線は .news-list 側で引くようになったため、ここでは重ねない（2026-07-28） */
    .news-list-page .news-item a { padding: 20px 10px; }
    /* お知らせページのリード文をPCで中央ぞろえ（スマホは左ぞろえのまま） */
    .lead-center { text-align: center; }
    @media (max-width: 900px) { .lead-center { text-align: left; } }

    /* ===== お知らせ記事ページ（news-01〜03.html） ===== */
    .news-article { max-width: 840px; margin: 0 auto; }
    .news-article-head { text-align: center; margin-bottom: clamp(30px,3.4vw,46px); padding-bottom: clamp(24px,3vw,36px); border-bottom: 1px solid var(--line); }
    .news-article-meta { display: flex; justify-content: center; align-items: center; gap: 16px; margin-bottom: 16px; }
    .news-article-ttl { font-family: "Noto Serif JP", serif; font-weight: 700; font-size: clamp(21px,2.3vw,31px); color: var(--green-deep); letter-spacing: .05em; line-height: 1.5; }
    .news-article-body p { font-size: clamp(14px,1.1vw,15px); color: var(--ink); line-height: 2; }
    .news-article-body p + p { margin-top: 16px; }
    .news-article-body strong { font-weight: 700; color: var(--green-deep); }
    .news-back { text-align: center; margin-top: clamp(38px,4.2vw,58px); }
    /* 2026-07-28：緑の丸＋テキスト（サイト内で唯一の形）をやめ、
       診療案内の「詳しく見る→」やフッターの電話と同じ「緑の枠線ボタン」に統一。
       ホバーで緑ベタに反転＋矢印が左へ動く。 */
    .news-back-link { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 30px; border: 1.5px solid var(--green); border-radius: 12px; color: var(--green); font-weight: 700; font-size: 15px; letter-spacing: .04em; transition: background .25s ease, color .25s ease; }
    .news-back-link .circ { font-size: 17px; line-height: 1; transition: transform .25s ease; }
    .news-back-link:hover, .news-back-link:focus-visible { background: var(--green); color: #fff; }
    .news-back-link:hover .circ { transform: translateX(-4px); }

    /* ===== 施設基準等／プライバシーポリシー（文書ページ） ===== */
    .info-doc { max-width: 860px; margin: 0 auto; }
    .info-intro { max-width: 860px; margin: 0 auto clamp(30px,3.4vw,44px); font-size: clamp(14px,1.1vw,15px); color: var(--ink); line-height: 2; }
    .info-block + .info-block { margin-top: clamp(30px,3.4vw,48px); padding-top: clamp(30px,3.4vw,48px); border-top: 1px solid var(--line); }
    .info-block h2 { font-family: "Noto Serif JP", serif; font-weight: 700; font-size: clamp(17px,1.6vw,21px); color: var(--green-deep); letter-spacing: .05em; line-height: 1.5; margin-bottom: 16px; padding-left: 14px; border-left: 4px solid var(--green); }
    .info-block p { font-size: clamp(14px,1.1vw,15px); color: var(--ink); line-height: 2; }
    .info-block p + p { margin-top: 12px; }
    .info-block ul { list-style: none; margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
    .info-block ul li { position: relative; padding-left: 20px; font-size: clamp(14px,1.1vw,15px); color: var(--ink); line-height: 1.85; }
    .info-block ul li::before { content: ""; position: absolute; left: 0; top: .72em; width: 7px; height: 7px; border-radius: 50%; background: var(--green-soft); border: 1.5px solid var(--green); }
    /* 「準備中／本番で差し替え」の注記（点線枠） */
    /* ⚠️ .info-todo（制作メモの点線ボックス）は 2026-07-28 に廃止（院長判断＝案C）。
       理由＝患者さん向けの本文に紛れて見え、公開前に消し忘れる危険があったため。
       同じ内容は各ページ上部の赤い「仮組み」帯に書かれており、画面から情報は失われていない。
       残る確認事項（文書料の金額／最終更新日／制定日）は司令塔memoryの公開前チェックに記録済み。 */

    /* 子見出し（2026-07-28 新設・施設基準等ページ）
       「厚生労働大臣が定める掲示事項」で列挙した4項目の"詳細"が、親の見出しと同じ大きさで
       並んでいて親子関係が分からなかった。→ 一段下げて階層を示す。 */
    .info-block-sub { padding-left: clamp(0px,2vw,28px); }
    .info-block-sub h2 { font-size: clamp(15px,1.35vw,17.5px); padding-left: 12px; border-left-width: 3px; border-left-color: #a9c4a4; }
    @media (max-width: 620px) { .info-block-sub { padding-left: 0; } }
    /* 自費費用などの簡易表 */
    .fee-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: clamp(13.5px,1.05vw,14.5px); background: var(--paper); border-radius: 10px; overflow: hidden; }
    .fee-table th, .fee-table td { border: 1px solid var(--line); padding: 12px 16px; text-align: left; color: var(--ink); }
    .fee-table thead th { background: var(--green-soft); color: var(--green-deep); font-weight: 700; }
    .fee-table tbody th { background: #fcfaf4; font-weight: 500; white-space: nowrap; }
    .info-updated { text-align: right; max-width: 860px; margin: clamp(30px,3.4vw,44px) auto 0; font-size: 13px; color: var(--ink-soft); line-height: 1.8; }

    /* ===== 当院の特徴 ===== */
    .feature { position: relative; padding: clamp(48px,4vw,58px) 0; background: var(--green-soft); }
    .feat-inner { max-width: 1180px; margin: 0 auto; padding: 0 clamp(22px,4vw,48px); }
    .feat-head { text-align: center; margin-bottom: clamp(28px,3vw,42px); }
    .feat-leaf { display: flex; justify-content: center; margin-bottom: 8px; }
    .feat-leaf img { width: 58px; height: auto; }
    .feat-title { font-family: "Noto Serif JP", serif; font-weight: 700; font-size: clamp(26px,2.4vw,34px); color: var(--green); letter-spacing: .18em; }
    .feat-title::after { content: ""; display: block; width: 42px; height: 3px; background: var(--green); border-radius: 2px; margin: 14px auto 0; }
    .feat-en { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: .32em; color: var(--ink-soft); margin-top: 10px; }
    .feat-lead { margin-top: 16px; color: var(--ink-soft); font-size: clamp(14px,1.1vw,15px); }
    /* スマホでだけ改行させたいときの目印。PC版では「ただの空白」として働き、見た目は変わらない。
       ⚠️ 使ってよいのは中央ぞろえの短い文だけ（左ぞろえの本文に改行を固定すると右端がガタつく）。 */
    .sp-br { display: none; }
    /* 2026-07-28：画像パネルを小さく（42%→34%・4:3→正方形）してセクション全体の縦を圧縮。
       裏の緑の四角は「外側の下」に向きを統一。 */
    .feat-list { display: flex; flex-direction: column; gap: clamp(36px,3.8vw,52px); }
    .feat-row { display: flex; align-items: center; gap: clamp(30px,4.5vw,64px); }
    .feat-row:nth-child(even) { flex-direction: row-reverse; }
    .feat-visual { flex: 0 0 30%; position: relative; z-index: 0; }
    .feat-panel { position: relative; border-radius: 20px; background: linear-gradient(145deg, #dfe9da, var(--cream-soft)); aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); overflow: hidden; }
    .feat-panel img { width: 64%; height: auto; }
    .feat-visual::before { content: ""; position: absolute; border-radius: 18px; background: #c8dcc2; width: 64%; height: 74%; z-index: -1; bottom: -18px; }
    .feat-row:nth-child(odd) .feat-visual::before { left: -18px; }
    .feat-row:nth-child(even) .feat-visual::before { right: -18px; }
    .feat-body { flex: 1; }
    .feat-ttl { display: flex; align-items: center; gap: 14px; font-family: "Noto Serif JP", serif; font-weight: 700; font-size: clamp(20px,2vw,27px); color: var(--ink); line-height: 1.45; margin-bottom: 16px; }
    .feat-ttl::before { content: ""; flex: none; width: 5px; height: 1.1em; border-radius: 3px; background: var(--green); }
    .feat-desc { color: var(--ink); font-size: clamp(14px,1.05vw,15.5px); line-height: 1.95; }

    /* 診療案内 */
    .services { background: var(--cream-soft); padding: clamp(48px,4vw,58px) 0; }
    .serv-inner { max-width: 1180px; margin: 0 auto; padding: 0 clamp(22px,4vw,48px); }
    .serv-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(18px,2vw,28px); }
    .serv-card { display: flex; flex-direction: column; align-items: center; text-align: center; background: #fff; border: 1px solid #ece3d0; border-radius: 18px; padding: clamp(28px,3vw,40px) clamp(20px,2vw,28px); text-decoration: none; color: inherit; box-shadow: 0 6px 20px rgba(120,100,60,.07); transition: transform .25s, box-shadow .25s; }
    .serv-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(120,100,60,.14); }
    /* ⚠️ .reveal.is-visible の transform:none に負けないよう、同じ要素にホバーを効かせるときは
       .is-visible を含めて指定を強くする（2026-07-28・カードが浮かなくなる不具合の対策） */
    .js .serv-card.reveal.is-visible:hover { transform: translateY(-4px); }
    .serv-icon img { width: 98px; height: auto; }
    .serv-name { font-family: "Noto Serif JP", serif; font-weight: 700; font-size: clamp(19px,1.6vw,23px); color: var(--green-deep); margin: 14px 0 10px; letter-spacing: .1em; }
    .serv-desc { color: var(--ink); font-size: 14px; line-height: 1.95; flex: 1; }
    /* 2026-07-28：文字リンク → 緑の枠線ボタン（カード幅いっぱい）。ホバーで緑ベタに反転＋矢印が右へ */
    .serv-more { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 44px; margin-top: 18px; border: 1.5px solid var(--green); border-radius: 10px; color: var(--green); font-weight: 700; font-size: 14.5px; letter-spacing: .04em; transition: background .25s ease, color .25s ease; }
    .serv-more .arw { transition: transform .25s ease; }
    .serv-card:hover .serv-more, .serv-card:focus-visible .serv-more { background: var(--green); color: #fff; }
    .serv-card:hover .serv-more .arw { transform: translateX(4px); }

    /* ===== 院長あいさつ ===== */
    .greeting { background: var(--green-soft); padding: clamp(48px,4vw,58px) 0; }
    .greet-inner { max-width: 1180px; margin: 0 auto; padding: 0 clamp(22px,4vw,48px); }
    /* 2026-07-28：本文を短くしたので、写真は3:4で固定し、写真と文章を上下中央そろえにする */
    .greet-main { display: flex; gap: clamp(30px,4vw,56px); align-items: center; }
    .greet-photo { flex: 0 0 37%; }
    .greet-photo img { width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; object-position: center 28%; border-radius: 18px; box-shadow: var(--shadow); }
    .greet-text { flex: 1; min-width: 0; max-width: 580px; }
    .greet-role { font-size: 14px; color: var(--ink-soft); letter-spacing: .08em; }
    .greet-name { font-family: "Noto Serif JP", serif; font-weight: 700; font-size: clamp(24px,2.3vw,33px); color: var(--ink); letter-spacing: .04em; margin-top: 4px; }
    .greet-name .en { font-family: "Noto Sans JP", sans-serif; font-weight: 500; font-size: clamp(14px,1.1vw,16px); color: var(--green); letter-spacing: .06em; margin-left: 14px; }
    .greet-catch { border-left: 4px solid var(--green); padding-left: 18px; font-family: "Noto Serif JP", serif; font-weight: 700; font-size: clamp(19px,1.9vw,26px); color: var(--ink); line-height: 1.6; margin: clamp(22px,2.4vw,32px) 0 clamp(20px,2.2vw,28px); }
    .greet-body p { color: var(--ink-soft); font-size: clamp(14px,1.05vw,15.5px); line-height: 2; }
    .greet-body p + p { margin-top: 1.1em; }
    .greet-body strong { font-weight: 700; color: var(--green-deep); }
    /* 「くわしいごあいさつ・経歴を見る」＝診療案内カードのボタンと同じ緑の枠線ボタン（幅は文字ぶんだけ） */
    .greet-more { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; margin-top: clamp(22px,2.4vw,30px); padding: 0 26px; border: 1.5px solid var(--green); border-radius: 10px; color: var(--green); font-weight: 700; font-size: 14.5px; letter-spacing: .04em; transition: background .25s ease, color .25s ease; }
    .greet-more .arw { transition: transform .25s ease; }
    .greet-more:hover, .greet-more:focus-visible { background: var(--green); color: #fff; }
    .greet-more:hover .arw { transform: translateX(4px); }

    /* ===== アクセス ===== */
    /* 初めての方へ（トップ内セクション・帯はクリーム／中身はvisit-box系を再利用） */
    .firstvisit { background: var(--cream-soft); padding: clamp(48px,4vw,58px) 0; }
    .first-inner { max-width: 1180px; margin: 0 auto; padding: 0 clamp(22px,4vw,48px); }

    /* ===== 院内のご案内（写真帯・全幅） 2026-07-28 ===== */
    /* 背景色を持たない帯なので、クリーム⇄緑のセクション交互リズムを崩さない */
    .clinic-photos { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; background: var(--line); }
    .clinic-photos figure { position: relative; margin: 0; overflow: hidden; }
    .clinic-photos img { display: block; width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover; object-position: center; }
    /* 受付は右寄りに写っているため、トリミングを右へ寄せる／待合室は右端の柱を避けて左へ */
    .clinic-photos figure:first-child img { object-position: 72% center; }
    .clinic-photos figure:nth-child(2) img { object-position: 40% center; }
    .clinic-photos figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 18px 13px; color: #fff; font-size: clamp(13px,1.1vw,15px); font-weight: 700; letter-spacing: .08em; text-align: center; text-shadow: 0 1px 3px rgba(40,34,24,.5); background: linear-gradient(180deg, rgba(48,42,32,0) 0%, rgba(48,42,32,.5) 55%, rgba(48,42,32,.76) 100%); }

    /* ===== 下層ページのセクション内に置く写真 2026-07-28 ===== */
    /* about専用の写真枠（レントゲン室）
       ⚠️ 2026-07-28：一度16:5の横長帯にしたが、レントゲン装置は「上のヘッド〜下の寝台」まで
          縦いっぱいに写っているため、横長に切ると必ずどちらかが見切れる（16:9でもヘッドが切れる）。
          → 原本と同じ 3:2 に戻した。幅は検査カード(920px)より少し狭い720pxで、大きくなりすぎない。
          🔑 教訓＝「他ページと形を揃える」より「被写体が収まるか」が先。写真ごとに原本の比率を見る。 */
    .sec-photo { max-width: 720px; margin: clamp(26px,3.2vw,38px) auto 0; }
    .sec-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; border-radius: 18px; box-shadow: 0 8px 26px rgba(120,100,60,.10); }
    @media (max-width: 760px) { .sec-photo img { border-radius: 14px; } }
    .sec-photo figcaption { margin-top: 10px; text-align: center; font-size: 13px; color: var(--ink-soft); letter-spacing: .03em; }
    /* 検査の注記が写真の直後に来るので、間隔を確保 */
    .sec-photo + .exam-note { margin-top: clamp(18px,2vw,24px); }

    /* ===== アクセス：外観・駐車場の写真 2026-07-28 ===== */
    .access-photos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,2vw,24px); margin-top: clamp(28px,3.4vw,42px); }
    .access-photos figure { margin: 0; }
    .access-photos img { display: block; width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; border-radius: 14px; box-shadow: var(--shadow); }
    .access-photos figcaption { margin-top: 10px; text-align: center; font-size: 13px; color: var(--ink-soft); letter-spacing: .03em; }

    .access { background: var(--green-soft); padding: clamp(48px,4vw,58px) 0; }
    .access-inner { max-width: 1180px; margin: 0 auto; padding: 0 clamp(22px,4vw,48px); }
    /* 2026-07-28：地図を主役にするため、情報表は上寄せ・地図は高さ380pxへ */
    .access-main { display: flex; gap: clamp(28px,4vw,52px); align-items: flex-start; }
    .access-info { flex: 1; min-width: 0; }
    .access-list { list-style: none; }
    .access-row { display: flex; gap: clamp(14px,1.4vw,22px); padding: 22px 4px; border-bottom: 1px solid var(--line); }
    .access-row:first-child { border-top: 1px solid var(--line); }
    .access-row dt { flex: none; width: 76px; font-weight: 700; color: var(--green-deep); font-size: 15px; letter-spacing: .04em; }
    .access-row dd { flex: 1; color: var(--ink); font-size: clamp(14px,1.05vw,15.5px); line-height: 1.85; }
    .access-row dd .sub { display: block; font-size: 13px; color: var(--ink-soft); line-height: 1.7; margin-top: 3px; }
    /* 2026-07-31：バス欄に最寄バス停を追加（案A）。太字の1行目＝降りるバス停、.sub＝行き方。 */
    .access-row dd strong { display: block; font-weight: 700; color: var(--green-deep); }
    /* 2026-07-30：320pxの端末で住所が「東京都昭島市郷地町2-36-」と番地の途中で切れていた。
       原因＝中身に使える幅が178pxしかなく、住所の179pxにあと1px足りなかった。
       → 見出し（住所/駐車場/バス）の幅を76→64pxにして、中身を190pxに広げる。
       ⚠️ この指定は必ず上の `.access-row dt { width: 76px }` より「後ろ」に置くこと
          （同じ強さなので、前に書くと負けて効かない）。 */
    /* 2026-07-31：バス欄を「「昭島団地」バス停 徒歩2分」の1行に収めるため、さらに詰める。
       実測＝この文字列は192px、dt64pxのとき中身は190pxで2px足りなかった。
       dtを56pxにすると中身は198px（「駐車場」は47pxなので56pxに収まる）。 */
    @media (max-width: 420px) { .access-row dt { width: 56px; } }
    .access-map { flex: 0 0 50%; }
    .access-map iframe { width: 100%; height: 380px; border: 0; border-radius: 18px; box-shadow: var(--shadow); display: block; }

    /* 2026-07-30 地図の「ふた」＝スマホでスクロールが地図に取られるのを防ぐ。PCでは出さない */
    .map-wrap { position: relative; }
    .map-cover { display: none; }

    /* 2026-07-30 地図の下の「Googleマップで経路を見る →」 */
    .map-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
      padding: 10px 2px; font-size: 14px; font-weight: 700; color: var(--green);
      letter-spacing: .03em; transition: color .2s; }
    .map-link .arw { transition: transform .25s ease; }
    .map-link:hover { color: var(--green-deep); }
    .map-link:hover .arw { transform: translateX(3px); }

    /* 2026-07-30 ページ内の目次（施設基準等）＝見出しが8つ並んで探せなかったため */
    .page-toc { max-width: 860px; margin: 0 auto clamp(28px,3.2vw,42px); background: #fff;
      border: 1px solid #ece3d0; border-radius: 16px; padding: clamp(20px,2.2vw,26px) clamp(22px,2.6vw,32px);
      box-shadow: 0 6px 20px rgba(120,100,60,.06); }
    .page-toc-h { font-family: "Noto Serif JP", serif; font-weight: 700; font-size: 15.5px;
      color: var(--green-deep); letter-spacing: .06em; padding-bottom: 11px; margin-bottom: 8px;
      border-bottom: 1px solid #f0e9da; }
    .page-toc ul { list-style: none; }
    .page-toc li { position: relative; }
    .page-toc a { display: block; padding: 9px 2px 9px 17px; font-size: 14.5px; color: var(--ink);
      line-height: 1.6; transition: color .2s; }
    .page-toc a::before { content: ""; position: absolute; left: 0; top: 1.15em;
      width: 5px; height: 5px; border-radius: 50%; background: var(--green); opacity: .6; }
    .page-toc a:hover { color: var(--green); }
    .page-toc ul ul { padding-left: 18px; }
    .page-toc ul ul a { font-size: 13.5px; color: var(--ink-soft); }

    /* ===== フッター ===== */
    .site-footer { background: var(--cream-soft); border-top: 1px solid var(--line); color: var(--ink); padding: clamp(40px,5vw,64px) 0 0; }
    .footer-inner { max-width: 1180px; margin: 0 auto; padding: 0 clamp(22px,4vw,48px); display: grid; grid-template-columns: minmax(300px, 1fr) 1.5fr; gap: clamp(32px,5vw,80px); align-items: start; }
    /* 左：基本情報 */
    .foot-logo { width: clamp(170px, 16vw, 200px); height: auto; aspect-ratio: 512 / 304; display: block; margin-bottom: 20px; }
    .foot-corp { font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; line-height: 1.7; }
    .foot-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 24px 0 24px; }
    .foot-tags span { font-size: 12.5px; color: var(--green-deep); background: #fff; border: 1px solid #d9e4d2; border-radius: 6px; padding: 3px 12px; letter-spacing: .04em; }
    .foot-addr { font-size: 13.5px; color: var(--ink); line-height: 1.85; }
    /* 2026-07-28：電話を「押せるボタン」に。文字のままだとスマホでタップしても発信できなかった */
    .foot-map-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--green); letter-spacing: .03em; transition: color .2s; }
    .foot-map-link .arw { transition: transform .25s ease; }
    .foot-map-link:hover { color: var(--green-deep); }
    .foot-map-link:hover .arw { transform: translateX(3px); }
    .foot-tel-btn { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 54px; margin-top: 16px; padding: 0 24px; border: 1.5px solid var(--green); border-radius: 12px; font-family: "Noto Serif JP", serif; font-weight: 700; font-size: clamp(20px,1.8vw,25px); color: var(--green-deep); letter-spacing: .03em; transition: background .25s ease, color .25s ease; }
    .foot-tel-btn svg { width: 22px; height: 22px; flex: none; }
    .foot-tel-btn:hover, .foot-tel-btn:focus-visible { background: var(--green); color: #fff; }
    .foot-fax { margin-top: 9px; font-size: 13.5px; color: var(--ink-soft); }
    /* 右：リンク3列＋診療時間表 */
    .foot-right { display: flex; flex-direction: column; gap: clamp(28px,3.2vw,44px); }
    .foot-hours h2 { font-size: 14px; color: var(--green-deep); font-weight: 700; letter-spacing: .06em; margin-bottom: 9px; }
    .foot-hours table { width: 100%; border-collapse: collapse; font-size: 12.5px; background: var(--paper); border-radius: 8px; overflow: hidden; }
    .foot-hours th, .foot-hours td { border: 1px solid var(--line); padding: 7px 4px; text-align: center; }
    .foot-hours thead th { background: var(--green-soft); color: var(--green-deep); font-weight: 700; }
    .foot-hours tbody th { background: var(--cream-soft); font-weight: 700; font-size: 11.5px; white-space: nowrap; }
    .foot-hours td.x { color: #8a6a5f; }   /* 2026-07-30：2.18:1で読めなかったため 4.80:1 に。休診の見落とし＝誤来院を防ぐ */
    .foot-hours .note { font-size: 11.5px; color: var(--ink-soft); margin-top: 8px; line-height: 1.7; }
    .foot-hours .closed { font-weight: 700; color: var(--ink); }
    /* リンク3列 */
    .foot-links { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,1.6vw,26px); }
    .foot-col-h { font-family: "Noto Serif JP", serif; font-weight: 700; font-size: 15.5px; color: var(--green-deep); letter-spacing: .06em; margin-bottom: 14px; }
    .foot-col ul { list-style: none; }
    .foot-col li + li { margin-top: 11px; }
    .foot-col a { font-size: 13.5px; color: var(--ink); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 5px; transition: color .2s, text-decoration-color .25s; }
    .foot-col a:hover, .foot-col a:focus-visible { color: var(--green); text-decoration-color: var(--green); }
    .foot-col a:focus-visible { outline: 2.5px solid var(--green); outline-offset: 3px; border-radius: 3px; }
    .foot-copy { text-align: center; font-size: 12px; color: var(--ink-soft); letter-spacing: .06em; margin-top: clamp(34px,4vw,52px); padding: 18px 0; border-top: 1px solid #d9e4d2; }

    /* ===== トップへ戻るボタン ===== */
    .to-top {
      position: fixed; right: clamp(18px, 2.5vw, 32px); bottom: clamp(20px, 3vw, 32px); z-index: 55;
      width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
      background: var(--green); color: #fff; box-shadow: var(--shadow);
      display: flex; align-items: center; justify-content: center;
      opacity: 0; visibility: hidden; transform: translateY(12px);
      transition: opacity .3s ease, transform .3s ease, visibility .3s, background .2s;
    }
    .to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
    .to-top.show:hover { background: var(--green-deep); transform: translateY(-4px); box-shadow: 0 14px 26px rgba(58,94,65,.28); }
    .to-top svg { width: 22px; height: 22px; transition: transform .25s ease; }
    .to-top.show:hover svg { transform: translateY(-3px); }


    /* ============================================================
       ⚠️ 並び順についての大事な注意（2026-07-30）
       CSSは「同じ強さなら後に書いたほうが勝つ」ため、下の @media（スマホ用）より
       あとにPC用の部品を書くと、スマホ用の指定が効かなくなる。
       実際、下記の当院についてページ専用の部品は元々スマホ用ブロックのあとに
       置かれていて、本文サイズの底上げ（15px）が届いていなかった。
       → 新しい部品を足すときは必ず「スマホ用ブロックより前」に書くこと。
       ============================================================ */
    /* ============================================================
       当院について（about.html）専用の部品
       2026-07-28：about.html のページ内に直接書かれていた55行をここへ移動。
       11ページ中このページだけ共通ファイルの外にあり、共通の修正が届かなかったため
       （実際 .prof に古いデザインが残っていた）。見た目は変えていない。
       ============================================================ */
    /* ===== 当院についてページ限定 ===== */
    /* あいさつ：中央そろえの帯内に写真＋本文 */
    .about-greet { max-width: 1000px; margin: 0 auto; }
    /* 2026-07-28：写真(3:4固定=492px)より本文(593px)が101px長く、上下中央そろえのせいで
       写真の上下に約50pxずつ余白が空いて「サイズが合っていない」状態だった。
       → about だけ写真を本文の高さいっぱいに伸ばす（トップは本文を180字に短くしたので3:4のままでよい）。
       ⚠️ トップの .greet-photo は共通部品なので、必ず .about-greet 配下に限定して上書きすること。 */
    .about-greet { align-items: stretch; }
    .about-greet .greet-photo { align-self: stretch; }
    .about-greet .greet-photo img { height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center 28%; }
    /* スマホは縦積みになるので元の比率に戻す（上の指定の方が強いので打ち消しが必要） */
    @media (max-width: 900px) {
      .about-greet { align-items: center; }
      .about-greet .greet-photo { align-self: auto; }
      .about-greet .greet-photo img { height: auto; aspect-ratio: 4/5; }
    }
    /* 院長略歴ボックス */
    /* 2026-07-28：左辺だけの緑線(border-left:4px)をやめ、他の白カード(.exam-card/.partner-card2)と同じ枠・影に統一 */
    .prof { max-width: 920px; margin: 0 auto; background: #fff; border: 1px solid #ece3d0; border-radius: 16px; padding: clamp(26px,3vw,40px) clamp(24px,3.4vw,50px); box-shadow: 0 6px 20px rgba(120,100,60,.06); }
    .prof-name { font-family: "Noto Serif JP", serif; font-weight: 700; font-size: clamp(19px,1.8vw,24px); color: var(--green-deep); letter-spacing: .05em; }
    .prof-name .ruby { font-size: 13px; color: var(--ink-soft); font-weight: 500; margin-left: 12px; letter-spacing: .06em; }
    .prof-table { width: 100%; border-collapse: collapse; margin-top: clamp(18px,2vw,24px); }
    .prof-table th, .prof-table td { text-align: left; vertical-align: top; padding: 12px 6px; border-bottom: 1px solid var(--line); font-size: clamp(13.5px,1.05vw,15px); line-height: 1.8; }
    .prof-table tr:first-child th, .prof-table tr:first-child td { border-top: 1px solid var(--line); }
    .prof-table th { white-space: nowrap; width: 184px; font-weight: 700; color: var(--green-deep); letter-spacing: .03em; }
    .prof-table td { color: var(--ink); }
    @media (max-width: 560px) {
      .prof-table, .prof-table tbody, .prof-table tr, .prof-table th, .prof-table td { display: block; width: auto; }
      .prof-table th { border-bottom: none; padding-bottom: 2px; }
      .prof-table td { padding-top: 2px; padding-bottom: 14px; }
      .prof-table tr:first-child td { border-top: none; }
    }
    /* 沿革：白いカードを縦線でつなぐ年表（2026-07-28 案Cで作り直し）
       旧＝帯の上に文字が直接乗っているだけで、他セクション（すべて白カード）と質感が揃わず
           年号と本文の間も空きすぎてスカスカだった。
       新＝訪問診療の「ご相談の流れ」と同じ形にして、サイト内の見た目を増やさずに揃えた。 */
    .hist { --hist-gap: clamp(16px,2vw,22px); max-width: 820px; margin: 0 auto; list-style: none; display: flex; flex-direction: column; gap: var(--hist-gap); }
    /* align-items:stretch ＋ レール(.hist-rail)の中で上下中央 ＝ 丸が必ずカードの高さの真ん中に来る。
       2026-07-28：以前は flex-start で丸がカードの上端に付いていた（院長指摘）。
       🔑 カードの高さが変わっても中央を保てるよう、丸は「カードと同じ高さのレール」の中で中央そろえにする。 */
    .hist-item { display: flex; gap: clamp(18px,2.2vw,26px); align-items: stretch; }
    .hist-rail { position: relative; flex: none; width: 44px; display: flex; align-items: center; justify-content: center; }
    /* つなぎ線。レール全体＋下の余白ぶんまで引き、丸（不透明・手前）が重なった部分を隠す仕組み。
       最初は丸の中心から下だけ／最後は丸の中心より上だけ引く。
       ⚠️ 2026-07-28：当初は「過去は薄く→現在へ向かって濃く」のグラデーションにしたが、
          線は1本ずつ独立しているため色の変化が線ごとにリセットされ、
          区切りで色が食い違って見えた（院長指摘）。→ 単色に統一。
       🔑 教訓＝分割された要素に「全体を通したグラデーション」は掛けられない。単色にするか、
          背景を持つ1本の要素にまとめるかのどちらか。 */
    .hist-rail::before { content: ""; position: absolute; left: 50%; margin-left: -1px; width: 2px; top: 0; bottom: calc(-1 * var(--hist-gap)); background: #c9dbc4; }
    .hist-item:first-child .hist-rail::before { top: 50%; }
    .hist-item:last-child .hist-rail::before { top: 0; bottom: 50%; }
    .hist-dot { width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 2px solid var(--green); display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; box-shadow: 0 3px 10px rgba(79,122,85,.16); }
    .hist-dot::before { content: ""; width: 13px; height: 13px; border-radius: 50%; background: var(--green); }
    /* 最後の「現在」だけ塗りつぶし＋外側のリングで「いまここ」を示す */
    .hist-item.is-now .hist-dot { background: var(--green); box-shadow: 0 0 0 5px rgba(79,122,85,.13), 0 4px 14px rgba(79,122,85,.28); }
    .hist-item.is-now .hist-dot::before { background: #fff; }

    .hist-body { flex: 1; min-width: 0; background: #fff; border: 1px solid #ece3d0; border-radius: 16px; padding: clamp(20px,2.2vw,26px) clamp(22px,2.6vw,32px); box-shadow: 0 6px 20px rgba(120,100,60,.06); }
    .hist-item.is-now .hist-body { background: var(--green-soft); border-color: #cfe0cc; }
    .hist-head { display: flex; align-items: baseline; gap: 13px; padding-bottom: 12px; margin-bottom: 13px; border-bottom: 1px solid #f0e9da; }
    .hist-item.is-now .hist-head { border-bottom-color: #cfe0cc; }
    /* 2026-07-28（院長指示）＝西暦の書体を明朝(Cormorant)からゴシック(Noto Sans JP)へ。
       ゴシックは同じpxでも明朝より太く大きく見えるため、32px→27pxに下げて重さを合わせている。
       「現在」も同じゴシックにし、日本語は字面が大きいぶん21pxで視覚の重さを揃える。 */
    .hist-num { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: clamp(22px,2.2vw,27px); color: var(--green); line-height: 1; letter-spacing: .04em; }
    .hist-num.jp { font-size: clamp(17px,1.7vw,21px); letter-spacing: .1em; color: var(--green-deep); }
    .hist-era { font-size: 12.5px; font-weight: 700; color: var(--green-deep); background: var(--green-soft); padding: 5px 13px; border-radius: 999px; letter-spacing: .04em; white-space: nowrap; }
    .hist-item.is-now .hist-era { background: #fff; }
    .hist-text { font-size: clamp(14px,1.1vw,15px); color: var(--ink); line-height: 1.95; }
    @media (max-width: 560px) {
      .hist-item { gap: 14px; }
      .hist-dot { width: 36px; height: 36px; }
      .hist-dot::before { width: 11px; height: 11px; }
      .hist-head { flex-wrap: wrap; gap: 8px 11px; }
    }
    /* 院内でできる検査：カード式 */
    .exam-intro, .partner-intro { max-width: 800px; margin: 0 auto clamp(26px,3.2vw,38px); text-align: center; font-size: clamp(14px,1.1vw,15px); color: var(--ink); line-height: 2; }
    /* 2026-07-31（院長指示・A案）＝.partner-intro だけ左ぞろえに。約160字＝PCで3行あり、
       中央ぞろえだと行頭が 241px / 247px / 303px とバラバラで目で追いにくかった。
       スマホでは 2026-07-30 に同じ理由で左ぞろえ済み＝PC版にその考え方が届いていなかった。
       1行48字は目線の移動が長いので箱も 800→680px（約41字）に。
       ⚠️ .exam-intro（1〜2行の短い導入文）は中央ぞろえのまま＝この行より上に置くこと。 */
    .partner-intro { max-width: 680px; text-align: left; }
    .exam-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: clamp(16px,2vw,22px); max-width: 920px; margin: 0 auto; }
    .exam-card { background: #fff; border: 1px solid #ece3d0; border-radius: 16px; padding: clamp(22px,2.5vw,30px) clamp(22px,2.4vw,32px); box-shadow: 0 6px 20px rgba(120,100,60,.06); }
    /* 2026-07-28：.exam-card.full（4枚目だけ幅いっぱい）は廃止＝3枚目の右が空いて並びがガタついていたため。
       4枚とも同じ幅の2列×2行に揃えた。 */
    /* 2026-07-30（第4段）＝display:flex をやめて .checklist li と同じ「絶対配置」方式に揃えた。
       ⚠️ 当初「flexだから折り返せずにはみ出す」と見立てたが、実際に撮って確認したところ
          flexでも折り返しており、見た目のはみ出しは無かった。数値上の7px（320px「レントゲン検査
          （X線検査）」）／5px（375px「上部消化管内視鏡検査（胃カメラ）」）の正体は
          全角の「）」の文字幅で、字の形は左半分にあるため目には出ない。
          → block化は「作りをサイト内で統一する」ための変更（見た目は同じ）。
          文字が右端ギリギリで窮屈な点は、下の @media で字下げを詰めて解消している。 */
    .exam-card h3 { display: block; position: relative; padding-left: 37px; font-family: "Noto Serif JP", serif; font-weight: 700; font-size: clamp(15.5px,1.3vw,17.5px); color: var(--green-deep); letter-spacing: .02em; line-height: 1.5; margin-bottom: 12px; }
    .exam-card h3::before { content: ""; position: absolute; left: 0; top: .18em; width: 25px; height: 25px; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 15px 15px no-repeat; box-shadow: 0 2px 6px rgba(79,122,85,.25); }
    .exam-card p { padding-left: 37px; font-size: clamp(13px,1.05vw,14.5px); color: var(--ink); line-height: 1.95; }
    .exam-note { max-width: 920px; margin: clamp(18px,2vw,24px) auto 0; text-align: center; font-size: 13px; color: var(--ink-soft); line-height: 1.8; }
    /* 狭い画面では見出しの字下げを37→30px・チェックの丸を25→22pxに詰めて、
       文字が入る幅を7px広げる（「（エコー検査）」などが右端ギリギリだったため）。2026-07-30 */
    @media (max-width: 620px) {
      .exam-grid { grid-template-columns: 1fr; }
      .exam-card p { padding-left: 0; }
      .exam-card h3 { padding-left: 30px; }
      .exam-card h3::before { width: 22px; height: 22px; background-size: 13px 13px; top: .22em; }
    }
    /* 提携病院：法人名＋病院名＋所在地バッジ */
    .partner-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,2vw,22px); max-width: 960px; margin: 0 auto; }
    .partner-card2 { display: flex; flex-direction: column; align-items: center; text-align: center; background: #fff; border: 1px solid #ece3d0; border-radius: 16px; padding: clamp(26px,2.8vw,36px) clamp(18px,2vw,24px); box-shadow: 0 6px 20px rgba(120,100,60,.06); }
    .partner-corp { min-height: 2.6em; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--ink-soft); line-height: 1.6; letter-spacing: .02em; }
    .partner-name { margin-top: 4px; margin-bottom: 20px; font-family: "Noto Serif JP", serif; font-weight: 700; font-size: clamp(17px,1.6vw,20px); color: var(--green-deep); letter-spacing: .03em; line-height: 1.5; }
    .partner-loc { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; background: var(--green-soft); color: var(--green-deep); font-size: 12.5px; font-weight: 700; padding: 7px 15px; border-radius: 999px; letter-spacing: .03em; }
    .partner-loc .pin { width: 13px; height: 13px; flex: none; }
    .partner-note { max-width: 960px; margin: clamp(22px,2.6vw,30px) auto 0; text-align: center; font-size: 13px; color: var(--ink-soft); line-height: 1.8; }
    /* かかりつけ医としての取り組み → 提携病院へのつなぎ文 */
    .partner-lead2 { margin-top: clamp(34px,3.8vw,50px); }
    /* 2026-08-08：画像診断の連携先＝カード1枚だけなので中央に1列で置く。
       .partner-grid より後ろに書く＝あとから書いた指定が勝つ（CSSの並び順の鉄則）。 */
    .partner-grid-1 { grid-template-columns: 1fr; max-width: 440px; }
    /* 2026-08-08：法人名が2行のカード（昭島病院）があるため、病院名の高さを全カードで揃える。
       .partner-corp の min-height:2.6em より後ろに書く＝あとから書いた指定が勝つ。 */
    .partner-corp { min-height: 3.4em; }
    /* 2026-08-08：予防接種の「事前のお電話が必要です」を強調（院長先生のご指示） */
    .visit-note strong, .contact-hours strong, .care-lead strong { font-weight: 700; color: var(--green-deep); }
    @media (max-width: 720px) { .partner-grid { grid-template-columns: 1fr; max-width: 440px; } .partner-corp { min-height: 0; } .partner-name { margin-bottom: 16px; } }
    /* CTA：スマホでは指定改行を出さず自然に折り返す */
    @media (max-width: 560px) { .cta-br { display: none; } }

    /* ===== スマホ ===== */
    @media (max-width: 900px) {
      /* ヘッダー：最初から表示＋ハンバーガー */
      .topbar { position: sticky; transform: none; box-shadow: 0 2px 12px rgba(58,94,65,.06); }
      .topbar nav { display: none; }
      .topbar .tel-mini { display: none; }
      .topbar .brand { white-space: nowrap; }
      .topbar .brand img { height: 40px; }
      .topbar-inner { padding: 10px 16px; gap: 0; }

      /* 2026-07-30（院長指示）＝ヘッダーの受話器ボタンは外した。ヘッダーは「ロゴ＋メニュー」の1段。
         電話番号はハンバーガーメニューの一番下の緑のボタンに集約している（.mm-tel）。
         ⚠️ 復活させたくなった場合＝2026-07-24 に .tel-sp（48×48・受話器のみ）として入れていた。
            ただし320pxではロゴの「ク」と重なるので、戻すならロゴを34pxに下げること。 */
      .hamburger { display: flex; margin-left: auto; }

      /* ヒーロー：ヘッダー下→診療科→コピー→斜め画像→診療時間 の縦並び */
      .hero { min-height: auto; display: flex; flex-direction: column; background: linear-gradient(160deg, var(--cream-soft), var(--cream)); }
      .hero-left { display: contents; }           /* 中身を .hero 直下に並べる */
      /* 2026-07-30（院長要望）＝キャッチコピーを中央ぞろえにしたので、
         すぐ上の診療科（内科｜小児科｜訪問診療）も中央に揃える */
      .hero-head { order: 1; text-align: center; padding: 16px 22px 0; }
      .hero-brand { display: none; }              /* 院名＋ロゴはヘッダーに出るため非表示 */
      .hero-depts { font-size: 16px; letter-spacing: .1em; margin-top: 0; }
      /* スマホは position:static なので、PC用の「上下中央そろえ」を使う演出は使わない */
      /* 2026-07-30（院長要望）＝スマホのキャッチコピーは左ぞろえ→中央ぞろえ */
      .hero-copy { order: 2; position: static; transform: none; max-width: 100%; text-align: center; padding: 6px 22px 14px; animation-name: heroRise; animation-duration: .8s; animation-delay: .3s; }
      /* スマホは横書きに戻す（たて書きはPCのファーストビュー限定） */
      /* 2026-07-30（第4段）＝24px固定だと320pxの端末で「子どもから、おとなま／で。」のように
         最後の1〜2文字だけが次の行に落ちていた（サイトの顔なので影響が大きい）。
         画面幅に合わせて縮む指定に変更＝375pxでは6.4vw＝24pxちょうどで従来と同じ。 */
      .hero-copy .lead { writing-mode: horizontal-tb; max-height: none; font-size: clamp(20px, 6.4vw, 25px); letter-spacing: .02em; line-height: 1.55; }
      .hero-copy .lead br { display: none; }
      .hero-bg { order: 3; position: relative; left: 0; right: 0; width: 100%; height: 300px; background-position: 72% 26%; }
      .hero-bg::after { display: none; }          /* 画像をクリーンに */

      /* --- 写真カルーセル（3枚を横スワイプ）2026-07-30 -----------------------
         横スワイプは scroll-snap（ブラウザ標準のスライド機能）で作っている。
         JSは「丸印の同期」と「5秒ごとの自動送り」だけなので、指の動きは常になめらか。
         🔑 2枚目・3枚目の写真は読み込みが終わってから(.is-ready)差し込む
            ＝最初の表示を重くしないため（1枚目は今までと同じ hero-doctor.jpg）。 */
      .js .hero-slides { display: flex; position: absolute; inset: 0; z-index: 1;
        overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch; scrollbar-width: none; }
      .js .hero-slides::-webkit-scrollbar { display: none; }
      .js .hero-slide { flex: 0 0 100%; scroll-snap-align: center; background-size: cover; background-repeat: no-repeat; }
      .js .hero-slide.s1 { background-image: url("assets/hero-doctor.jpg"); background-position: 72% 26%; }
      .js .hero-slides.is-ready .hero-slide.s2 { background-image: url("assets/clinic-exterior.jpg"); background-position: 52% 58%; }
      .js .hero-slides.is-ready .hero-slide.s3 { background-image: url("assets/clinic-waiting.jpg"); background-position: 50% 55%; }

      /* 丸印＝いま何枚目か。写真の明るさに負けないよう、下端にごく薄い影を敷く。
         押しどころは44×44pxを確保し、見える丸は9pxに留めている。 */
      .js .hero-dots { display: flex; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
        justify-content: center; gap: 2px; background: linear-gradient(to top, rgba(0,0,0,.22), rgba(0,0,0,0)); }
      .js .hero-dot { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
        background: none; border: 0; padding: 0; cursor: pointer; }
      .js .hero-dot::before { content: ""; width: 9px; height: 9px; border-radius: 50%;
        background: rgba(255,255,255,.62); box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: background .2s, transform .2s; }
      .js .hero-dot.is-on::before { background: #fff; transform: scale(1.3); }
      .js .hero-dot:focus-visible { outline: 2.5px solid #fff; outline-offset: -6px; border-radius: 12px; }
      .tel-cta { display: none; }                 /* PC用の大きな電話ボタンは出さない */
      /* 2026-07-30（院長要望）＝スマホでは行き先ボタン4つを出さない。
         ハンバーガーメニューと中身がまったく同じ4項目で、ヘッダーは画面上部に貼り付いて
         常についてくるため、重複していた（高さ154pxぶんの節約）。
         ⚠️ PC版の左パネルでは唯一の入口なので必須＝非表示にするのはスマホだけ。
         ⚠️ 戻したくなったときは display:grid に戻せばよい（下の指定はそのまま残してある）。 */
      .navcards { display: none; order: 5; grid-template-columns: 1fr 1fr; gap: 10px;
        width: auto; max-width: none; margin: 12px 16px 4px; }
      .navcard { flex-direction: row; justify-content: flex-start; gap: 11px;
        min-height: 64px; padding: 10px 14px; border-radius: 14px; }
      .navcard img { width: 38px; height: 38px; }
      .navcard span { font-size: 14px; letter-spacing: .02em; }
      @media (max-width: 359px) { .navcard span { font-size: 13px; } .navcard img { width: 34px; height: 34px; } }
      .hours { order: 4; width: auto; max-width: none; margin: 22px 16px 10px; background: var(--paper); border-radius: 16px; padding: 16px 14px; box-shadow: var(--shadow); }


      /* お知らせ（スマホ） */
      /* 見出しは「当院の特徴」と同じ中央ぞろえ（葉→タイトル→緑バー→NEWS の縦積み） */
      .news-leaf img { width: 52px; }
      .news-title { font-size: 25px; letter-spacing: .12em; }
      .news-title::after { margin-top: 12px; }
      .news-en { margin-top: 8px; }
      .news-item a { flex-wrap: wrap; gap: 10px 14px; padding: 14px 4px; }
      .news-ttl { flex-basis: 100%; }
      /* 「お知らせ一覧をみる」ボタンはスマホでは中央に */
      .news-foot { text-align: center; margin-top: 26px; }

      /* 当院の特徴（スマホ） */
      /* 2026-07-31（院長指示）＝本文の最後と次の絵カードの間隔が詰まりすぎて、
         どこで1つの話が終わったのかが分かりにくかった。
         実測＝組の中（絵→見出し）24px に対し、組と組の間が40pxしかなく差は1.7倍だけ。
         → 組と組の間を 40→68px（2.8倍）に。組の中の24pxは変えないので見た目の雰囲気は保たれる。 */
      .feat-list { gap: 68px; }
      .feat-row, .feat-row:nth-child(even) { flex-direction: column; gap: 24px; }
      /* 2026-07-30（院長指示）＝カードとアイコンの大きさが合っていなかった。
         旧＝カード331×248pxにアイコン212px（カード幅の64%）で、左右に大きく余白が空いていた。
         新＝カードを260×195pxに小さくし、アイコンを78%に上げて、カードをきちんと埋める。
         ⚠️ PC版は無変更（カード幅30%・アイコン64%のまま）。 */
      .feat-visual { flex: none; width: 100%; max-width: 260px; margin: 0 auto; }
      .feat-panel img { width: 78%; }
      /* 差し色ブロックの出っぱりを控えめにして、カードと見出しの間に余白を確保 */
      .feat-row:nth-child(odd) .feat-visual::before { left: -14px; bottom: -14px; }
      .feat-row:nth-child(even) .feat-visual::before { right: -14px; top: -14px; }
      .feat-body { width: 100%; }
      /* 2026-07-30（院長指示）＝見出しを1行に収める。20px→18px。
         あわせて文言も2つ短くした（読点を1つ削除／「みなさま」を削除）＝320pxの小さいiPhoneでも
         3つとも1行に収まる（実測 216 / 252 / 233px ＜ 使える幅257px）。 */
      .feat-ttl { justify-content: flex-start; font-size: 18px; }
      .sp-br { display: inline; }

      /* 診療案内（スマホ） */
      .serv-grid { grid-template-columns: 1fr; gap: 16px; }

      /* 院長あいさつ（スマホ） */
      .greet-main { flex-direction: column; gap: 24px; }
      .greet-photo { width: 100%; max-width: 340px; margin: 0 auto; }
      .greet-photo img { height: auto; aspect-ratio: 4/5; object-position: center 28%; }
      .greet-text { padding-top: 0; }

      /* 院内のご案内（スマホ）＝縦長になりすぎないよう横長トリミング */
      .clinic-photos { grid-template-columns: 1fr; gap: 2px; }
      .clinic-photos img { aspect-ratio: 16/10; }
      .clinic-photos figcaption { padding: 22px 14px 10px; }

      /* アクセス（スマホ） */
      .access-photos { grid-template-columns: 1fr; }
      /* 2026-07-31（院長指摘「各項目の線が左に寄っている」）＝真因は align-items。
         横並び用に付けていた `align-items: flex-start`（上端で揃える）が縦積みにしても効いたままで、
         縦積みでは「幅を中身の分だけに縮める」意味になり、住所欄だけ幅が足りていなかった。
         実測＝375pxで 地図・写真は331pxなのに 住所リストは316px＝区切り線が右で15px短かった。
         → 縦積みのときは stretch（幅いっぱいに伸ばす）に戻す。 */
      .access-main { flex-direction: column; gap: 24px; align-items: stretch; }
      .access-map { width: 100%; }
      /* 地図は「場所の雰囲気をつかむ」用途。詳しく見る方は下のリンクからアプリへ移るので低めに */
      .access-map iframe { height: 260px; }
      .map-cover { display: flex; align-items: flex-end; justify-content: center;
        position: absolute; inset: 0; z-index: 2; border: 0; border-radius: 18px;
        background: transparent; cursor: pointer; padding-bottom: 14px;
        -webkit-tap-highlight-color: transparent; }
      .map-cover span { background: rgba(255,253,248,.94); color: var(--green-deep);
        font-size: 12.5px; font-weight: 700; letter-spacing: .03em;
        padding: 7px 14px; border-radius: 999px; box-shadow: 0 3px 10px rgba(58,94,65,.18); }
      .map-cover.is-off { display: none; }
      .map-link { padding: 11px 2px; font-size: 15px; }
      .page-toc ul ul a { font-size: 14px; }

      /* フッター（スマホ） */
      .footer-inner { grid-template-columns: 1fr; gap: 30px; }
      .foot-corp { font-size: 13.5px; }

      /* 2026-07-30：スマホでは「診療時間」をリンク集より前に出す。
         いちばん探される2つ（電話ボタン・診療時間）が隣に並び、リンク集は後ろに回る。
         旧＝リンク3列(515px)を全部通り過ぎた先に診療時間があった。
         ⚠️ .foot-right の中の順番だけを入れ替える指定なのでPC版は無変更（実測確認済み）。 */
      .foot-right { display: flex; flex-direction: column; }
      .foot-hours { order: 1; }
      .foot-links { order: 2; }
      /* フッターの縦の長さを詰める（お知らせ記事ではフッターがページの6割を占めていた）。
         ⚠️ リンクの高さは44px以上を保つこと（指で押せる最小サイズ）。 */
      .foot-logo { width: 140px; margin-bottom: 14px; }
      .foot-tags { margin: 16px 0 16px; }
      .footer-inner { gap: 24px; }
      .foot-col { padding: 11px 0 12px; }
      .foot-col-h { margin-bottom: 9px; }
      .foot-col a { padding: 11px 2px; }
      .foot-copy { margin-top: 26px; padding: 14px 0; }

      /* 左に寄って右が空くアンバランスを解消＝基本情報は中央ぞろえ */
      .foot-info { text-align: center; }
      .foot-logo { margin-left: auto; margin-right: auto; }
      .foot-tags { justify-content: center; }
      .foot-hours h2 { text-align: center; }

      /* ============================================================
         フッターのリンク集＝1枚のグレー角丸カードにまとめる（2026-07-30 院長要望）
         旧＝「当院について」「診療案内」「その他」の3つに分かれ、見出し3つ＋カード3枚で
             532pxを使っていた（フッター全体1340px＝どのページでも同じ高さ）。
             見出しの区切りは狭い画面では冗長なので、9項目を2列に流し込む1枚に統一。
         🔑 やり方＝`.foot-col` と その中の `ul` を display:contents にして箱の存在を消し、
            9つの項目を `.foot-links` のマス目に直接並べる。PC版は3列のまま無変更。
         ============================================================ */
      .foot-links { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px;
        background: #e8eae1; border-radius: 14px; padding: 6px 16px; }
      .foot-col, .foot-col ul { display: contents; }
      .foot-col-h { display: none; }
      .foot-col li { border-top: 1px solid rgba(90,80,50,.13); }
      /* 上の1行（＝1列目の1・2番目）だけ区切り線なし */
      .foot-links .foot-col:first-child li:nth-child(-n+2) { border-top: none; }
      /* 旧ルール（各グループの3つめを横いっぱい）は1枚にまとめたので打ち消す */
      .foot-links .foot-col li:nth-child(3):last-child { grid-column: auto; }
      /* 9項目＝2列だと最後の1つが余るので、いちばん最後だけ横いっぱいに */
      .foot-links .foot-col:last-child li:last-child { grid-column: 1 / -1; }
      .foot-col li + li { margin-top: 0; }
      .foot-col a { display: block; padding: 12px 2px; font-size: 14.5px; color: var(--ink); text-align: center; }

      /* 診療時間表・注釈をスマホで読みやすく（高齢の患者さん向け） */
      .hours table, .foot-hours table { font-size: 14px; }
      .hours tbody th, .foot-hours tbody th { font-size: 13px; white-space: normal; }
      .hours td.v { font-size: 13px; }
      .hours .note, .foot-hours .note { font-size: 14px; letter-spacing: 0; }
      /* ① ※の一行を淡い緑の帯で強調（スマホのみ） */
      .hours td.mk, .foot-hours td.mk { color: var(--green-deep); font-weight: 700; }
      .hours .note .hi, .foot-hours .note .hi {
        background: var(--green-soft); color: var(--green-deep);
        font-weight: 700; border-radius: 8px; padding: 7px 10px; margin: 7px 0 6px;
        letter-spacing: 0; text-align: center;
      }
      /* ② 本日の帯を表示（スマホのみ） */
      .today-bar { display: flex; padding: 10px 12px; }
      .today-bar .tb-text { font-size: 13.5px; }
      .foot-hours .note { text-align: center; }            /* スマホは注釈を中央寄せ */

      /* トップへ戻る（電話バーを外したので通常位置に） */
      .to-top { bottom: calc(18px + env(safe-area-inset-bottom)); width: 46px; height: 46px; }

      /* === スマホ高品質化 2026-07-24 =========================== */

      /* B. 本文の文字を大きく（高齢の患者さんが読みやすいように 14px → 15px） */
      .feat-desc, .feat-lead, .serv-desc, .greet-body p, .page-lead,
      .symptom-card li, .visit-items li, .flow-body p,
      .care-lead, .care-item p, .week-cap,
      .contact-cta-sub, .access-row dd, .info-block p, .info-block ul li,
      .news-article-body p, .info-intro, .checklist li {
        font-size: 15px;
      }
      /* 2026-07-30：当院について/内科の部品も同じ15pxに（第0段で並び順を直したので効くようになった）。
         これまでは 12〜13.5px のまま取り残され、同じ画面に4種類の文字サイズが混在していた。 */
      .exam-card p, .hist-text, .exam-intro, .partner-intro,
      .info-panel p, .visit-items.vax li, .prof-table th, .prof-table td { font-size: 15px; }
      .exam-note, .partner-note { font-size: 14px; }
      .partner-corp { font-size: 13.5px; }
      /* 2026-07-30：中央ぞろえの長い文は、行の頭が毎行ずれて読みにくい（320pxで最大9行）。
         スマホでは左ぞろえに。⚠️ 2〜3行に収まる短文（.visit-lead / .greet-catch）は中央のまま。 */
      .partner-intro, .exam-intro, .care-lead, .week-cap, .contact-cta-sub,
      .area-note, .checklist-note, .symptom-foot, .exam-note, .partner-note { text-align: left; }
      /* 2026-07-31：.page-lead をPCで中央ぞろえにしたので、スマホは明示的に左へ戻す。
         スマホでは4〜6行になり、中央だと行頭が毎行ずれて読みにくいため（上と同じ理由）。 */
      .page-lead { text-align: left; }
      /* 2026-07-31：.visit-note がこの見直しから漏れていた（中央ぞろえのまま320pxで4行）。 */
      .visit-note { text-align: left; }
      /* 2026-07-31（院長指示）＝訪問診療「診療内容」のリード文だけは中央ぞろえに戻す。
         改行位置を固定した短い2行なので、行頭がずれる問題は起きない。
         ⚠️ 上の左ぞろえの指定より「後ろ」に置くこと（同じ強さなので後が勝つ）。 */
      .care-lead.lead-c { text-align: center; }
      /* 注釈・補足はワンサイズ下だが、こちらも少しだけ底上げ */
      .symptom-note, .visit-note, .area-note, .checklist-note, .symptom-foot,
      .foot-addr, .contact-hours { font-size: 14px; }

      /* ============================================================
         セクション見出しをスマホ仕様に（2026-07-30 院長要望）
         旧＝葉っぱ58px → タイトル → 下線 → 英語23px の縦積みで223px。
             トップページに6か所あり、見出しだけで1,187pxを使っていて縦に間延びしていた。
         新＝葉っぱを36pxにしてタイトルの左へ横並び／装飾の英語表記は出さない／
             緑の下線は「葉っぱ＋タイトル」の行の中央に置く。223px → 123px。
         🔑 下線を行の中央に置くために、.feat-head を折り返しありのflexにして
            ::after を「幅いっぱいの箱の中央に46pxの緑線」として描いている
            （タイトルの ::after のままだと、葉っぱのぶん右にずれて見える）。
         ⚠️ PC版は縦積みのまま無変更。
         ⚠️ 診療科ページ（内科/小児科/訪問診療）の見出しは中身が
            .hero-title-row（アイコン＋タイトル）＋英語 なので、英語が消えて下線が付く。
         ============================================================ */
      .feat-head, .news-head { display: flex; flex-wrap: wrap; align-items: center;
        justify-content: center; column-gap: 10px; row-gap: 0; }
      .feat-leaf, .news-leaf { width: 36px; margin: 0; flex: none; }
      .feat-leaf img, .news-leaf img { width: 36px; height: 36px; }
      .feat-title, .news-title { margin: 0; }
      .feat-title::after, .news-title::after { display: none; }
      .feat-head::after, .news-head::after { content: ""; flex: 0 0 100%; height: 3px; margin-top: 12px;
        background: linear-gradient(var(--green), var(--green)) center / 46px 3px no-repeat; }
      .feat-en, .news-en { display: none; }
      .feat-lead { order: 1; flex: 0 0 100%; margin-top: 16px; }

      /* D. 見出しの行間を詰める（2行になったときの間延びを解消） */
      .news-title, .feat-title, .med-sec-title, .greet-name, .serv-name,
      .contact-cta-title, .zone-city, .symptom-card h3, .flow-body h3,
      .care-item h3, .visit-items h3, .foot-col-h { line-height: 1.45; }

      /* ============================================================
         2026-07-30（第5段）＝スクロールで現れる演出をスマホ向けに調整
         reveal-delay / -d2 / -d3 は「PCで横に並んだカードを左から順に出す」ための時間差。
         スマホは縦に積まれるので、1枚ごとに何も起きない待ち時間になるだけ → 時間差をなくす。
         動きの時間も0.8秒→0.5秒、持ち上げ幅も18px→12pxにして、指の動きに素直について来るようにした。
         ⚠️ 動きを減らす設定（prefers-reduced-motion）と html.js 方式はそのまま。 */
      .js .reveal { transition-duration: .5s; transform: translateY(12px); }
      .js .reveal.reveal-delay, .js .reveal.reveal-d2, .js .reveal.reveal-d3 { transition-delay: 0s; }

      /* 2026-07-30（第5段）＝帯の上下の余白 52px → 40px（スマホのみ）。
         1ページに帯が5〜6本あるので、継ぎ目だけで520px以上を使っていた。
         ⚠️ サイト全体の印象が変わる調整なので、院長の確認を取ること。戻すときはこの3行を消すだけ。 */
      .med-band { padding: 40px 0; }

      /* C. 押せる範囲を広げる（パンくず・本文中の電話リンク） */
      .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; }
      .breadcrumb a, .breadcrumb span { display: inline-block; padding: 11px 2px; margin: -2px 0; }
      .intro-tel { padding: 8px 6px; }
      /* 文中リンクも指で押しやすい高さに（行の高さは変えずに当たり判定だけ広げる） */
      .visit-note a, .symptom-note a, .checklist-note a, .info-block p a {
        display: inline-block; padding: 10px 2px; margin: -10px 0; }

      /* ============================================================
         2026-07-30（第4段）＝押しどころを44px以上に揃える
         考え方＝padding（内側の余白）で当たり判定を広げ、同じぶんだけ
         マイナスのmargin（外側の余白）で引き戻す。→ 見た目の高さは変わらない。
         ⚠️ スマホ限定にしてある＝PC版（7/28に院長承認済み）は一切変えない。
         ============================================================ */
      /* ヘッダーの院名ロゴ 40px → 46px */
      .topbar .brand { padding: 3px 0; margin: -3px 0; }
      /* フッター「地図・アクセスを見る →」 25px → 45px（いちばん深刻だった） */
      .foot-map-link { padding: 10px 2px; margin: 2px -2px -10px; }
      /* 内科「主なご紹介先の病院を見る →」 26px → 46px */
      .info-panel-link { padding: 10px 2px; margin: 8px -2px -10px; }
      /* 施設基準等ページの目次 40〜41px → 46px（丸印も同じ3pxぶん下げて文字と揃える） */
      .page-toc a { padding-top: 12px; padding-bottom: 12px; }
      .page-toc a::before { top: calc(1.15em + 3px); }

      /* ============================================================
         2026-07-31（院長の実機確認 6回目）＝折り返しと余白の調整
         ============================================================ */

      /* 【内科・小児科】小見出しが2行になっていた真因＝左のアイコンが幅を奪っていた。
         実測＝320pxで見出しに使える幅は168pxしかなかった（パネルの内側は228pxある）。
         2026-07-31（院長指示）＝アイコンと見出しは「横並びのまま1行」に収める。
           360px以上＝アイコン44px＋すき間12px → 使える幅212px（見出し189px）で1行。
           359px以下＝下の @media でアイコン34px・文字16pxに落として1行を保つ。
         ⚠️ 上の `@media (max-width:620px){ align-items: flex-start }` を打ち消すため、
            1行になったいまは中央そろえに戻す（この指定は620pxのブロックより後ろにある）。 */
      .info-panel-head { align-items: center; gap: 12px; }
      .info-panel-icon { width: 44px; }

      /* アクセスのバス欄の補足行も、他の注釈と同じ14pxに揃える */
      .access-row dd .sub { font-size: 14px; }

      /* 【訪問診療】対応エリアのカード＝間延びしていたので詰める。
         2026-07-31（院長「余白がまだ気になる」）＝ピンを市名の左に横並びにして、縦積みをやめた。
         実測 194px →(7/31 1回目)160px →(今回)約104px。上下の余白も20→16pxに。 */
      .zone-block { padding: 16px 18px; }
      .zone-block .pin { width: 26px; height: 26px; margin: 0; }
      /* ピン＋市名を1行に。地域名はその下。 */
      .zone-head { display: flex; align-items: center; justify-content: center; gap: 8px; }
      .zone-block .zone-part { margin-top: 4px; }

      /* 【訪問診療】訪問日＝木のマスだけ「訪問」の文字で背が高く（85px）、
         2段目（金土日）は51pxで、段によって大きさが違って見えていた。
         → 7つとも同じ高さ（85px）に揃え、文字は上下中央に置く。 */
      .week-day { min-height: 85px; }

      /* 【訪問診療】ご相談の流れ
         ①数字は下端の線に乗るため、丸の中心より1.1px下に見えていた → 1px持ち上げて光学的に中央へ。
         ②丸数字20px／見出し16pxとサイズがバラバラだった → 見出しに合わせて16pxに。
         ③つなぎの点線は高さ14px・2pxで点が3つしか出ず中途半端だった
           → 丸数字と同じ緑の細い実線にして高さ22pxに。 */
      .flow-num { font-size: 16px; line-height: 1; padding-bottom: 1px; }
    }

    /* ===== いちばん小さいiPhone（320〜359px）===== */
    /* 2026-07-31：内科・小児科の小見出しを「アイコンと横並びで1行」に保つための調整。
       320pxではパネルの内側が228pxしかなく、アイコン44px＋すき間12pxだと残り172pxで入らない。
       → アイコン32px・すき間8px・文字16pxにして、見出しに186pxを渡す（必要なのは183px）。
       🚨 最初アイコン34px＋すき間10pxにしたら、渡せる幅が182pxで **1pxだけ足りず** 2行のままだった
          （7/30のアクセスの住所とまったく同じ落とし穴）。必ず実測して確かめること。
       ⚠️ 上の @media (max-width:900px) より後ろに置くこと（同じ強さなので後が勝つ）。 */
    @media (max-width: 359px) {
      .info-panel-head { gap: 8px; }
      .info-panel-icon { width: 32px; }
      .info-panel h3 { font-size: 16px; }
    }

    /* ===== タブレット（中間幅・901〜1080px）===== */
    @media (max-width: 1080px) and (min-width: 901px) {
      /* 2026-07-30：ここにあった .hero-left{width:40%} / .hero-bg{left:40%} は削除。
         幅の段差の原因だった（上の max(35%, 360px) で連続的に効かせている）。 */
      .footer-inner { grid-template-columns: 1fr; gap: clamp(28px, 4vw, 44px); }
    }