@charset "UTF-8";
/* ==================================================================
   02-machi 専用スタイルシート（2026-07-18 CSS完全分離）
   このテンプレートのCSSはこのファイル1本がすべて。他テンプレートとは独立に編集してよい。
   構成：共通レイアウト（旧base.css） → テーマ変数（旧theme-machi.css） → このテンプレート固有の上書き
   ================================================================== */

/* ==========================================================================
   鍼灸ホームページ 共通ベースCSS
   全テンプレート共通のレイアウト・コンポーネント定義。
   色・フォント・角丸などは theme-*.css の CSS変数で切り替える。
   このファイルは原則テンプレート間で共有し、修正は全サイトへ一括反映する。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. デザイントークン（デフォルト値／theme-*.css で上書き）
   -------------------------------------------------------------------------- */
/* 数値は実サイト（harikyu-evergreen.jp）を getComputedStyle で実測した値。
   コメントの「実測」は測定値そのもの。 */
:root {
  /* ------------------------------------------------------------------
     カラー：ヒアリングシートの「カラー3色選定」に対応
     顧客が選んだ3色がそのまま入る変数。theme-*.css で上書きする。
     ------------------------------------------------------------------ */
  --color-main: #7fbe25;        /* メインカラー（実測 rgb(127,190,37)） */
  --color-sub: #d6e9ca;         /* サブカラー（実測 rgb(214,233,202)／丸バッジ地） */
  --color-sub2: #5a8a17;        /* サブ2カラー（ホバー用・実測なし） */

  /* ------------------------------------------------------------------
     ★ 用途別の派生カラー（2026-07-16 追加）★

     顧客が選んだ色を、そのまま文字色や「白文字の下地」に使ってはいけない。
     ヒアリングシートは3色を自由に選べる設計なので、明るい色を選ばれると
     文字が読めないサイトが出来上がる。実測したところ：

       選ばれる色      生の色を文字に   白文字を載せる   （必要 4.5:1）
       黄緑(実測値)      2.15:1        2.26:1
       水色             1.85:1        1.93:1
       ピンク            2.22:1        2.34:1
       黄               1.38:1        1.43:1   ← ほぼ読めない
       濃紺            10.32:1       11.27:1   ← 濃い色を選んだ人だけ運良く通る

     つまり「Evergreenの緑が悪い」のではなく、量産の仕組みとして穴が空いていた。
     そこで用途を3つに分け、文字が乗るものは color-mix で自動的に暗くする。
     選ばれた色の色相はそのまま残るので、見た目のテーマ色は変わらない。

       --color-main … 装飾専用。文字を持たないものだけ（にじみ／円の縁／罫／枠線）
       --color-ink  … 地の上に置く文字（見出し・ラベル・リンク・電話番号）
       --color-fill … 白文字を載せる下地（ボタン・pill・番号・営業時間表の見出し）

     この比率は主要な色相8種（黄緑・水色・ピンク・黄・橙・紫・濃紺・赤）で
     検証済み。全色 4.5:1 以上になる。比率を上げる（＝明るくする）ときは
     必ず一番厳しい「黄」で測り直すこと。黄が通れば他は通る。
     ------------------------------------------------------------------ */
  --color-ink: color-mix(in srgb, var(--color-main) 45%, #14200a);
  --color-fill: color-mix(in srgb, var(--color-main) 38%, #14200a);

  /* ホバー・LINEボタン用。3色目（--color-sub2）から同じ考え方で導出する。
     sub2 も生のままだと白文字 4.13:1 で未達だった（＝ホバーした瞬間に読めない）。 */
  --color-ink-2: color-mix(in srgb, var(--color-sub2) 62%, #14200a);
  --color-fill-2: color-mix(in srgb, var(--color-sub2) 54%, #14200a);

  /* 【ブラッシュアップ｜ひだまり堂】
     本文は純黒(実測)だと硬く読み疲れる。さらにひだまり堂は本文を無彩色にせず
     テーマ色と同じ色相の濃色（実測 rgb(125,65,19)＝地色の黄と同系の焦げ茶）に
     している。無彩色の黒を1色だけ混ぜるより、紙面全体が1つの色で締まる。
     色相をテーマ変数から取るので、テーマを差し替えても関係が崩れない。 */
  --color-text: color-mix(in srgb, var(--color-main) 16%, #26261f);
  --color-text-nav: color-mix(in srgb, var(--color-main) 14%, #454540);
  /* 補助文字（日付・注記・署名・単位）。
     #8d8d86 を種にしていたが実測 3.05:1 で未達だった。11〜13pxの小さい字が多く、
     ここが読めないと「日付」「※注意書き」が消える。#666660 まで落として 4.86:1。 */
  --color-text-light: color-mix(in srgb, var(--color-main) 12%, #666660);
  --color-border: color-mix(in srgb, var(--color-main) 14%, #e2e0d6);

  /* --color-sub（淡い地）の上に載せる文字色。
     実測は「サブ地 #d6e9ca にメインカラー #7fbe25 の文字」だが、
     この組み合わせのコントラスト比は 1.76:1 しかなく、実際ほとんど読めていない
     （通常サイズの文字に必要なのは 4.5:1）。バッジ・資格タグ・カテゴリなど
     全部これだったので、mainの色相を保ったまま暗くした専用トークンを用意する。
     main 40% で 5.18:1。テーマ色を変えても比率の関係は保たれる。 */
  --color-on-sub: color-mix(in srgb, var(--color-main) 40%, #1e2b06);

  /* 【ブラッシュアップ｜ひだまり堂】
     地色は白ではなく生成り（実測 rgb(255,251,236)）。白地は清潔だが硬く、
     鍼灸院の「和らぐ」トーンと合わない。ここもテーマ色をごく少量含ませて
     色相を揃える。--color-white はロゴ地やカード地として別に残す。 */
  --color-bg: color-mix(in srgb, var(--color-main) 4%, #fffdf6);
  --color-bg-alt: color-mix(in srgb, var(--color-main) 9%, #fffdf6);
  --color-white: #ffffff;

  /* フッター：メインカラーのベタ塗りは面積が大きく圧が強いため、
     メインカラーをごく少量含む暗色に。テーマ色を変えても破綻しない。 */
  --color-footer: color-mix(in srgb, var(--color-main) 18%, #21261f);
  --color-footer-text: rgba(255, 255, 255, 0.92);
  /* フッターの住所・コピーライト。
     実測の 0.55 は Evergreen の緑なら 4.59:1 で辛うじて通るが、フッター地が
     `color-mix(main 18%, 暗色)` なので、**明るいメインカラーを選ばれると地が持ち上がり**、
     黄で 4.20:1／水色で 4.44:1 と未達に落ちる。0.68 なら主要6色すべてで 5.5〜7.6:1。
     ここは theme に依存して壊れる箇所なので、色を足すときは必ず測り直すこと。 */
  --color-footer-muted: rgba(255, 255, 255, 0.68);

  /* 【ブラッシュアップ｜ひだまり堂】書体を明朝へ
     Evergreen の実測は游ゴシック（Webフォント不使用）。
     ひだまり堂の品の良さはほぼ明朝と字間・行間で出ている（実測：明朝スタック／
     letter-spacing 1.2px／line-height 1.8）。鍼灸は東洋医学で、身体をゆっくり
     整える施術。ゴシックの直截さより明朝の落ち着きのほうが商材と合う。
     ゴシックに戻す場合は下の3変数を差し替えるだけでよい。
     Webフォントは引き続き不使用（表示速度と、院ごとの環境差を避けるため）。 */
  --font-base: "游明朝", YuMincho, "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", "MS PMincho", serif;
  --font-en: "Times New Roman", var(--font-base);  /* 英字にセリフを合わせる */
  --font-size-base: 17px;       /* 実測18px。明朝は同サイズだと大きく見えるため1px落とす */
  --line-height-base: 1.9;      /* 実測1.5 → ひだまり堂の実測1.8に寄せ、明朝の可読性を確保 */
  --letter-spacing-base: 0.06em;/* 実測normal → ひだまり堂の実測1.2px 相当 */

  /* レイアウト（実測） */
  --container: 1130px;          /* 実測 1130px（内側 padding 0 12px → 本文 1106px） */
  --container-wide: 1690px;     /* 実測：ヘッダー内側 1690px */
  --header-height: 139px;       /* 実測 139px */
  --section-gap: 80px;          /* 実測 section padding 80px 0 */
  --heading-gap: 80px;          /* 実測：見出しブロックの下マージン 80px */
  --page-hero-height: 497px;    /* 実測：下層ページのヘッダー画像 497px */
  --radius: 0px;

  /* ------------------------------------------------------------------
     コンポーネントトークン
     テンプレートごとに骨格の数値が変わる。theme-*.css で上書きする。
     ここを変数にしてあるので、theme を差し替えるだけで
     「同じHTMLのまま別テンプレートの見え方」になる。
     ＝提案書P16「カラー・フォント・レイアウトのパラメータ化」
     ------------------------------------------------------------------ */
  --logo-w: 250px;              /* ロゴ幅（実測 250px） */
  --nav-pad-x: 45px;            /* ナビ左右padding（実測 45px） */
  --nav-en-size: 14px;          /* ナビ英字（実測 14px） */
  --nav-jp-size: 12px;          /* ナビ日本語（実測 12px） */

  --label-size: 14px;           /* 英語ラベル（実測 14px） */
  --heading-size: 24px;         /* 日本語見出し（実測 24px） */
  --heading-weight: 400;        /* 実測 400 */
  /* 【変更】実測normal → 0.14em。明朝は字面が小さく、実測のまま詰めると
     見出しが本文と同じ密度になって効かない。ひだまり堂も見出しに字間を振っている */
  --heading-ls: 0.14em;
  --heading-color: var(--color-ink);

  --page-title-size: 60px;      /* ページ見出し（実測 60px） */
  --page-title-weight: 500;     /* 実測 500 */
  --page-title-ls: 0.1em;       /* 【変更】実測normal → 0.1em（明朝に合わせて開ける） */

  /* ボタン
     Evergreen実測 230×56 と、ひだまり堂実測 230×56 が偶然一致していた。
     サイズは触らず、角丸だけ 0 → 5px（ひだまり堂の実測値）にして角を落とす。 */
  --btn-w: 230px;               /* 実測 230px（両サイト一致） */
  --btn-h: 56px;                /* 実測 56px（両サイト一致） */
  --btn-size: 16px;             /* ボタン文字（実測 16px） */
  --btn-radius: 5px;            /* 【変更】Evergreen実測0px → ひだまり堂実測5px */
  /* 枠線ボタン（MORE）。生の --color-main だと文字も枠線も 2.07:1 しかなく、
     ボタンだと気づけない。文字は 4.5:1、枠線もUI部品として 3:1 が要るので ink にする。
     ここは --btn-color 経由なので、セレクタを目で追うだけでは見落とす箇所だった。 */
  --btn-border: 1px solid var(--color-ink);
  --btn-bg: transparent;
  --btn-color: var(--color-ink);

  --badge-size: 100px;          /* 丸バッジ（実測 100px） */
  --badge-font: 16px;           /* 実測 16px */

  --table-label-w: 174px;       /* 施術テーブルのラベル幅（実測 174px） */
  --table-font: 16px;           /* 実測 16px */

  --body-color-sub: var(--color-text-nav);

  /* その他 */
  --transition: 0.3s ease;
}

/* --------------------------------------------------------------------------
   2. リセット
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* 2026-07-18：SPで「ページ全体が微妙に右へずれる／中央のはずの要素が左に見える」報告。
   正体は横幅超過の要素が1つでもあると body が viewport より広がり、
   中央揃えが「広がった body の中央」＝画面上では左寄りに見える、という現象。
   クリップで底止めしつつ（対症）、超過要素そのものも潰す（原因）。 */
html, body { overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-base);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; vertical-align: bottom; border: 0; }
a { color: inherit; text-decoration: none; transition: opacity var(--transition); }
a:hover { opacity: 0.7; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure { margin: 0; }
table { border-collapse: collapse; width: 100%; }

/* --------------------------------------------------------------------------
   3. 汎用
   -------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 12px; }  /* 実測 12px */
.container--wide { max-width: var(--container-wide); }
/* 読み物・一覧のように、横に伸ばすと視線移動が長くなるものを絞る */
.container--narrow { max-width: 880px; }

.section { padding-block: var(--section-gap); }
.section--alt { background: var(--color-bg-alt); }

/* ------------------------------------------------------------------
   【改良】セクションの切れ目
   本家はセクション境界がすべて白背景で、どこで切れているか分からない。
   1セクションおきに淡い面を敷いて、リズムを作る。
   ------------------------------------------------------------------ */
.section:nth-of-type(even) { background: var(--color-bg-alt); }

/* 【改良】セクションの導入に細い区切り線。見出しの上に置く */
.section-rule {
  display: block;
  width: 1px;
  height: 48px;
  margin: 0 auto 40px;
  background: linear-gradient(to bottom, transparent, var(--color-main));
}

/* 縦書き（本テーマの特徴的な表現） */
.vertical { writing-mode: vertical-rl; text-orientation: upright; }

/* --------------------------------------------------------------------------
   4. 見出し
   -------------------------------------------------------------------------- */
/* 見出しブロック（英語ラベル＋日本語見出し＋下線）
   実測：H2 24px/w400/緑、margin-bottom 8px。ブロック全体の下マージン 80px */
.heading-block { text-align: center; margin-bottom: var(--heading-gap); }

/* 英語ラベル（CONCEPT / MENU など）
   書体は --font-label（無ければ --font-en）。03 はここだけ筆記体（Caveat）にする。
   --font-en ごと筆記体にすると電話番号や日付まで筆記体になって読めないため、
   ラベル専用の変数を分けてある。--label-transform で大文字/小文字も変えられる
   （03 は筆記体に大文字が合わないので lowercase）。 */
.label-en {
  display: block;
  font-family: var(--font-label, var(--font-en));
  font-size: var(--label-size);   /* 実測 14px */
  letter-spacing: var(--heading-ls);
  text-transform: var(--label-transform, none);
  color: var(--heading-color);
  margin-bottom: 4px;
}

/* 日本語見出し＋下線 */
.heading {
  position: relative;
  display: inline-block;
  font-size: var(--heading-size);     /* 実測 24px */
  font-weight: var(--heading-weight); /* 実測 400 */
  letter-spacing: var(--heading-ls);  /* 実測 normal */
  color: var(--heading-color);        /* 実測 rgb(127,190,37) */
  margin-bottom: 8px;       /* 実測 8px */
  padding-bottom: 12px;
}
/* 【ブラッシュアップ｜ひだまり堂】見出し下の罫
   元は 28px のベタ罫。硬い線が明朝の下に付くと浮く。
   両端が地に溶けるグラデーションにして、水彩のにじみと同じ語彙に揃える。 */
.heading::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--heading-color) 50%, transparent);
  transform: translateX(-50%);
}
.heading--dark { color: var(--color-text); }

/* 【02】見出しの順序を反転する（日本語 → 英字）
   01 は「英字ラベル → 日本語見出し」、02（杜の里の実測）は「日本語30px緑 → 英字14px暗色」で
   上下が逆。HTMLの順序は共通のまま、column-reverse で見た目だけ入れ替える。
   「英語ラベル＋日本語見出し」という全体ルールは崩さずに、テンプレートの個性を出せる。 */
.heading-block--flip {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
}
.heading-block--flip .label-en {
  margin-bottom: 0;
  margin-top: 10px;
  color: var(--color-text);   /* 実測：英字は緑ではなく本文色 */
  /* --font-label を尊重する（03の筆記体）。ここで var(--font-en) を直書きすると
     flip を使うテンプレート全部でラベル書体の差し替えが効かなくなる（実際になった） */
  font-family: var(--font-label, var(--font-en));
  letter-spacing: 0.12em;
}
.heading-block--flip .heading { margin-bottom: 0; padding-bottom: 0; }
.heading-block--flip .heading::after { display: none; }   /* 実測：罫は無い。英字がその役割 */

/* 左寄せで使う版（お知らせセクションなど） */
.heading-block--left { text-align: left; align-items: flex-start; margin-bottom: 0; }

/* --------------------------------------------------------------------------
   5. ボタン
   -------------------------------------------------------------------------- */
/* 実測：MORE は 230×56 の枠線ボタン。fs16px / border 1px solid 緑 / padding 15px 0 */
.btn, .more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: var(--btn-w);         /* 実測 230px */
  min-height: var(--btn-h);    /* 実測 56px */
  padding: 15px 0;             /* 実測 15px 0 */
  font-family: var(--font-en);
  font-size: var(--btn-size);  /* 実測 16px */
  letter-spacing: 0.08em;      /* 【変更】実測normal → ひだまり堂実測1.2px相当 */
  border: var(--btn-border);   /* 実測 1px solid rgb(127,190,37) */
  border-radius: var(--btn-radius);
  color: var(--btn-color);     /* 実測 rgb(127,190,37) */
  background: var(--btn-bg);
  transition: background var(--transition), color var(--transition);
}
.btn:hover, .more:hover { background: var(--color-fill); color: var(--color-white); opacity: 1; }

.btn--fill { background: var(--color-fill); color: var(--color-white); }
.btn--fill:hover { background: var(--color-fill-2); border-color: var(--color-fill-2); }

/* 【ブラッシュアップ｜ひだまり堂】ボタン頭の小さな三角
   ひだまり堂は全ボタンの文字左に小さな ▶ を置いている。
   「押せる」ことが枠線や色に頼らず一目で分かるうえ、
   明朝の静かな面に小さな図形が1つ入ると間が締まる。
   擬似要素なのでHTMLは変えずに全ボタンへ一括で乗る。 */
.btn::before, .more::before {
  content: "";
  flex-shrink: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent currentColor;
}

/* MORE を左寄せで置くブロック用 */
.more-wrap { margin-top: 40px; }

/* --------------------------------------------------------------------------
   5-b. 【ブラッシュアップ｜ひだまり堂】水彩のにじみ
   ひだまり堂は背景に、輪郭のぼけた黄色い円をいくつも散らしている。
   写真が少なくても面が持ち、かつ主張しない。
   ＝素材が集まらない院でもテンプレートが成立する（引き継ぎメモの詰まりどころ）。
   実装は radial-gradient。画像を持たないので、テーマ色を変えれば色も追従する。
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   セクションの背景に写真を薄く敷く（実測：杜の里の topFeatureBg）
   01 の .statement は「写真を主役にして白文字を乗せる」全幅帯だが、
   こちらは逆で「写真は地として薄く、上に通常のコンテンツが乗る」型。
   写真が主役ではないので、opacity は文字が確実に読める range に抑える。
   -------------------------------------------------------------------------- */
.section--bg { position: relative; overflow: hidden; }
.section--bg > .container { position: relative; z-index: 1; }
.section--bg__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.12;   /* これ以上濃くすると上の本文のコントラストが落ちる */
}
/* 写真の上に地色のベールを重ねて、写真の明暗が本文に影響しないようにする */
.section--bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: color-mix(in srgb, var(--color-bg-alt) 72%, transparent);
}

.bloom-field { position: relative; overflow: hidden; }
.bloom-field > .container,
.bloom-field > .bloom-field__inner { position: relative; z-index: 1; }

.bloom {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  /* 中心が濃く外側へ溶ける。単色ベタの円にしないのがポイント。
     2026-07-16：circle-fig のにじみと合わせてトーンダウン（42%→24%） */
  background: radial-gradient(
    circle at 38% 34%,
    color-mix(in srgb, var(--color-main) 24%, transparent) 0%,
    color-mix(in srgb, var(--color-main) 12%, transparent) 45%,
    transparent 72%
  );
  filter: blur(8px);
}
/* 大きさと位置のバリエーション。数値に意味はなく、散らすためのもの */
.bloom--a { width: 220px; height: 220px; top: -70px; left: 6%; }
.bloom--b { width: 120px; height: 120px; top: 12%; right: 14%; }
.bloom--c { width: 300px; height: 300px; bottom: -120px; right: -60px; opacity: 0.7; }
.bloom--d { width: 90px; height: 90px; bottom: 18%; left: 3%; }

/* --------------------------------------------------------------------------
   5-c. 【ブラッシュアップ｜ひだまり堂】円形マスク画像＋にじみの縁
   ひだまり堂は本文まわりの写真をすべて円に抜き、まわりに水彩の縁を敷いている。
   角のある写真が並ぶより柔らかく、鍼灸院の来院前の緊張を下げる方向に効く。
   写真の縦横比を問わず成立するので、回収する素材の条件も緩くなる。
   -------------------------------------------------------------------------- */
.circle-fig {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
}
/* 画像の下に敷く、ひとまわり大きいにじみ。
   2026-07-16 指示：「濃すぎる・違和感がある」→ 雰囲気程度まで減衰（30%→12%）。
   実写を入れて初めて濃さが目立った。存在は残す（消すと円の縁が硬くなる）。 */
.circle-fig::before {
  content: "";
  position: absolute;
  inset: -4%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--color-main) 12%, transparent) 58%,
    color-mix(in srgb, var(--color-main) 4%, transparent) 80%,
    transparent 92%
  );
  filter: blur(6px);
}
.circle-fig > img,
.circle-fig > .ph {
  position: relative;
  z-index: 1;
  width: 92%;
  height: 92%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
}
/* プレースホルダを円に入れる場合、破線の角丸も円に合わせる */
.circle-fig > .ph { border-radius: 50%; }

/* 既存コンポーネントへの適用。
   .split__img img などの既存宣言（詳細度 0-1-1）を後勝ちで潰すため、
   クラス2つ（0-2-1）で書く。ここを消せば全部が元の角のある写真に戻る。 */
.split__img.circle-fig { flex: 0 0 460px; }
.split__img.circle-fig > img { width: 92%; height: 92%; }

.reason__img.circle-fig { margin-bottom: 24px; }
.reason__img.circle-fig > img { width: 92%; height: 92%; aspect-ratio: 1 / 1; margin-bottom: 0; }

.blog-card__img.circle-fig > img { width: 92%; height: 92%; }

.doctor__img.circle-fig > img { width: 92%; height: 92%; aspect-ratio: 1 / 1; }

/* 【02】円で抜かない版。
   円は 01（ひだまり堂由来）の個性なので、角ゴ・直線的な 02 では使わない。
   共有の body_greetings() / body_blog() が両方から呼ばれるため、
   写真の抜き方はテンプレートごとに切り替える必要がある。 */
.rect-fig > img { border-radius: var(--radius); object-fit: cover; }
.news__thumb.rect-fig > img { width: 100%; height: 100%; aspect-ratio: 1 / 1; }
.doctor__img.rect-fig > img { width: 100%; aspect-ratio: 3 / 4; }

/* --------------------------------------------------------------------------
   5-d. 【ブラッシュアップ｜ひだまり堂】スクロールで浮かび上がる
   ひだまり堂は各ブロックが fadeInDown で入ってくる（wow.js）。
   ライブラリは足さず IntersectionObserver で同じことをする。
   prefers-reduced-motion では無効化する。

   ⚠️ .reveal は素で opacity:0 にしてはいけない。
      そう書くと、JSが落ちた・読み込まれなかった・Observerが発火しなかった、の
      どれか1つで本文が全部消えたページが顧客に出る。
      そこで「隠す」のは JS が生きている証拠として <html> に .js-reveal が
      付いたときだけにする。JSなしなら最初から見えている状態が既定。
   -------------------------------------------------------------------------- */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   6. ヘッダー
   -------------------------------------------------------------------------- */
/* 地を生成りにしたので、ヘッダーだけ白のままだと境目に線が出る。
   ページ全体と同じ地色にして継ぎ目を消す（ひだまり堂も同様に地と一体） */
/* 2026-07-18 指示：ヘッダーは全テンプレートで追随（sticky）。
   ※ html/body の overflow-x は hidden ではなく clip を使っているので sticky が効く。
     hidden に変えると sticky が壊れるので注意 */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--color-main) 12%, transparent);
}
/* 実測：header 高さ139px / padding 15px 0 */
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--container-wide);   /* 実測 1690px */
  margin-inline: auto;
  padding: 15px 12px;                  /* 実測 15px 0（左右は12pxで担保） */
}

.header__logo { flex-shrink: 0; }
/* ロゴSVGは実テキスト幅のviewBoxになった（2026-07-18）ので、
   幅ではなく高さで指定し、幅は縦横比なりに任せる */
.header__logo img { width: auto; height: 92px; }   /* 実測 高さ92 */

.header__right { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
/* ナビ最後の項目の右padding分だけ食い込ませて、ナビの文字とCTAボタンの右端を揃える */
.header__right .nav { margin-right: calc(var(--nav-pad-x) * -1); }

/* ヘッダーCTA */
.header__cta { display: flex; gap: 12px; }
.header__cta a {
  display: inline-flex;
  align-items: center;
  /* 2026-07-17：ラベルが短いテンプレート（02/03の「WEB予約」）で、min-width の余りが
     ボタン内の右側に空白として見えていた（謎の余白の正体）。中央寄せで解消 */
  justify-content: center;
  gap: 8px;
  min-width: 164px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color-white);
  background: var(--color-fill);
  border-radius: var(--radius);
}
.header__cta svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }

/* グローバルナビ */
.nav__list { display: flex; align-items: center; }
.nav__item { position: relative; }
.nav__item + .nav__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 28px;
  background: var(--color-border);
  transform: translateY(-50%) rotate(20deg);
}
/* 実測：nav a は 134×42 / padding 0 45px / fs12px */
.nav__link { display: block; padding: 0 var(--nav-pad-x); text-align: center; font-size: var(--nav-jp-size); }
.nav__en {
  display: block;
  font-family: var(--font-en);
  font-size: var(--nav-en-size);   /* 実測 14px */
  letter-spacing: normal;       /* 実測 normal */
  color: var(--color-ink);     /* 実測 rgb(127,190,37) */
  line-height: 1.5;
}
.nav__jp {
  display: block;
  font-size: var(--nav-jp-size);   /* 実測 12px */
  color: var(--color-text-nav); /* 実測 rgb(55,55,55) */
  line-height: 1.5;
}
.nav__link.is-current .nav__en,
.nav__link:hover .nav__en { color: var(--color-ink-2); }

/* ハンバーガー（SPのみ） */
.hamburger {
  position: relative;
  z-index: 100;   /* ドロワー（z-index:99）より上。開いたとき×として押せるように */
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.hamburger span {
  display: block;
  width: 24px; height: 1px;
  margin: 6px auto;
  background: var(--color-text);
  transition: transform var(--transition), opacity var(--transition);
}
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ドロワー内の閉じるボタン・CTA。PCでは存在しない扱い */
.nav__close, .nav__drawer-cta { display: none; }

/* --------------------------------------------------------------------------
   7. 追従サイドCTA
   -------------------------------------------------------------------------- */
.side-cta {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.side-cta__item {
  display: block;
  padding: 24px 12px;
  writing-mode: vertical-rl;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.15em;
  color: var(--color-white);
  background: var(--color-fill);
  border-radius: 4px 0 0 4px;
}
/* 縦書きではインライン要素が下方向に流れるため、
   inline-block の擬似要素がテキストの「下」に出る */
.side-cta__item::after {
  content: "";
  display: inline-block;
  margin-top: 12px;
  width: 7px; height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(-45deg); /* 右向きの「›」 */
}
.side-cta__item--sub { background: var(--color-fill-2); }

/* --------------------------------------------------------------------------
   8. ヒーロー（トップ）
   -------------------------------------------------------------------------- */
.hero { position: relative; height: 76vh; min-height: 480px; overflow: hidden; }
/* 写真の明るさに関わらずキャッチコピー（白）が読めるようにするオーバーレイ。
   実写に差し替えた後も可読性を担保する。 */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.18) 55%, rgba(0, 0, 0, 0.1) 100%);
}
.hero__copy, .hero__arrow { z-index: 2; }
.hero__slides { position: absolute; inset: 0; }
.hero__slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero__slide.is-active { opacity: 1; }
.hero__copy {
  position: absolute;
  left: 12%;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0.3em;
  line-height: 1.9;
  color: var(--color-white);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.hero__arrow {
  position: absolute;
  top: 50%;
  width: 40px; height: 40px;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform: translateY(-50%);
}
.hero__arrow::before {
  content: "";
  display: block;
  width: 16px; height: 16px;
  margin-inline: auto;
  border-left: 2px solid var(--color-white);
  border-bottom: 2px solid var(--color-white);
}
.hero__arrow--prev { left: 24px; }
.hero__arrow--prev::before { transform: rotate(45deg); }
.hero__arrow--next { right: 24px; }
.hero__arrow--next::before { transform: rotate(-135deg); }

/* --------------------------------------------------------------------------
   8-b. 【02】サイドバー型ヒーロー
   実測（c-morinosato.com）：topMain 1905×780 / 内側 1720px。
   左に院の情報を全部積み、右にビジュアル。

   なぜこの型が鍼灸院に効くか：
     患者が最初に知りたいのは「どこで・いつやっていて・いくらで・どう予約するか」。
     01 の全幅スライダーはその情報がスクロールの下にある。この型は
     診療時間表・電話・予約ボタン・症状別の入口が、開いた瞬間に全部見えている。
     地域密着型（＝比較検討ではなく「近所だから行く」）と噛み合う。
   -------------------------------------------------------------------------- */
.side-hero {
  display: grid;
  grid-template-columns: 300px 1fr;   /* 実測：サイドバー約300px */
  gap: 48px;
  align-items: start;
  max-width: var(--container-wide);   /* 実測 1720px */
  margin-inline: auto;
  padding: 40px 24px 64px;
}

/* --- 左：院の情報 --- */
.side-hero__aside { display: flex; flex-direction: column; align-items: center; }
.side-hero__logo img { width: 240px; }
.side-hero__depts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 18px 0 20px;
  font-size: 12px;
  color: var(--color-text-nav);
}
/* 実測：診療科目を「｜」で区切って並べる */
.side-hero__depts li + li::before { content: "｜"; margin: 0 2px; opacity: 0.5; }

/* --- 症状・目的別の入口チップ ---
   旧：縦積みアイコンタイル2×3（151×97）＝参照元の実測そのままで「寄せすぎ」だった
   （2026-07-16 指示）。横型チップ（アイコン左・ラベル・矢印右）の縦1列に作り替え。
   入口が6つ・アイコンで内容が分かる、という機能は変えていない。 --- */
.tile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  width: 100%;
}
.tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 30px 11px 14px;
  text-align: left;
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color var(--transition), transform var(--transition);
}
.tile::after {
  content: "›";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  color: var(--color-ink);
}
.tile:hover { border-color: var(--color-main); transform: translateX(2px); opacity: 1; }
.tile__icon { width: 26px; height: 26px; flex-shrink: 0; fill: none; stroke: var(--color-ink); stroke-width: 1.6; }

/* --- 予約ボタン（2026-07-17：電話CTA廃止でWeb予約のみに） --- */
.side-hero__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 12px; }
.side-hero__cta--single { grid-template-columns: 1fr; }
.side-hero__cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 50px;                    /* 実測 50px */
  padding: 8px;
  font-size: 14px;                     /* 実測 14px */
  letter-spacing: 0.02em;
  color: var(--color-white);
  background: var(--color-fill);
  border-radius: var(--radius);
}
.side-hero__cta svg { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; }
/* 実測：電話ボタンだけ地が暗い（#002A1D）。予約と役割が違うことを色で分ける */
.side-hero__cta a.is-tel { background: var(--color-footer); font-family: var(--font-en); font-size: 15px; }

.side-hero__hours { width: 100%; margin-top: 20px; }
.side-hero__hours .hours { max-width: none; font-size: 13px; }   /* 実測 13px */
.side-hero__note { margin-top: 8px; font-size: 11px; line-height: 1.7; color: var(--color-text-nav); }

/* --- 右：ビジュアル ---
   写真を絶対配置で敷き、キャッチは白いカードに乗せて左下に重ねる。

   経緯：
   ①キャッチ→写真の縦積み → 写真が下へ離れて「キャッチだけ浮く」（§8-4）
   ②参照元と同じ「左上を斜めに切った三角の余白に重ねる」 → 成立はしたが、
     2026-07-16「あまりにも寄せすぎ」の指摘。斜めカットは参照元の顔だった
   ③現在：写真は素直な角丸のまま、キャッチを白いカードに乗せて左下に重ねる。
     カードは写真の左端から少しはみ出させて、面の前後関係を作る */
.side-hero__main {
  position: relative;
  min-height: 620px;
}
.side-hero__copy-card {
  position: absolute;
  z-index: 1;
  left: -28px;                 /* 写真からはみ出させる */
  bottom: 44px;
  max-width: min(60%, 560px);
  padding: 28px 36px;
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.10);
}
.side-hero__copy {
  /* カードの中なので実測46pxではなく一回り絞る。2行で収まる大きさ */
  font-size: 32px;
  font-weight: var(--page-title-weight);  /* 実測 700 */
  line-height: 1.5;
  letter-spacing: var(--page-title-ls);
  color: var(--color-ink);
  margin-bottom: 8px;
}
.side-hero__sub {
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--color-ink);
}
.side-hero__slides {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: var(--radius);
}
.side-hero__slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.side-hero__slide.is-active { opacity: 1; }

/* --------------------------------------------------------------------------
   9. 下層ページヒーロー
   -------------------------------------------------------------------------- */
/* 実測：ヘッダー画像は <img> で全幅・高さ497px。その上に H2 60px/w500/緑 が重なる */
.page-hero {
  position: relative;
  display: grid;
  place-items: center;
  height: var(--page-hero-height);   /* 実測 497px */
  overflow: hidden;
}
.page-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 見出しを読ませるために写真を覆うベール。
   白で覆うと生成りの地との間に色差が出るので、地色そのもので覆う */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-bg) 62%, transparent);
}
.page-hero__title {
  position: relative;
  font-family: var(--font-en);
  font-size: var(--page-title-size);     /* 実測 60px */
  font-weight: var(--page-title-weight); /* 実測 500 */
  letter-spacing: var(--page-title-ls);  /* 実測 normal */
  text-transform: uppercase;    /* 実測：HTMLは小文字、表示は大文字 */
  color: var(--color-ink);     /* 実測 rgb(127,190,37) */
}

/* --------------------------------------------------------------------------
   10. コンテンツブロック（画像＋テキストの左右交互）
   -------------------------------------------------------------------------- */
.block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 64px;
  margin-bottom: 96px;
}
.block:last-child { margin-bottom: 0; }
.block--reverse .block__img { order: 2; }
.block__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.block__body { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.block__title { font-size: 18px; font-weight: 500; letter-spacing: 0.15em; }
.block__text { font-size: 14px; }

/* 縦書きブロック（ABOUTページ）
   ⚠️ これは 01（明朝・和）専用。02 のような角ゴのテンプレートで使うと、
   縦組みが右端へ押しやられて画像との間に大穴が空き、max-height 380px で
   本文があふれて読めなくなる。build.py 側で 01 のときだけ付けること。 */
.block--vertical .block__body {
  writing-mode: vertical-rl;
  align-items: flex-start;
  max-height: 380px;
  gap: 40px;
}
.block--vertical .block__title { font-weight: 700; letter-spacing: 0.2em; }

/* 【02】横組みの通常ブロック。読み物として素直に読める */
.block:not(.block--vertical) .block__title { font-size: 26px; font-weight: 700; line-height: 1.6; letter-spacing: 0.04em; }
.block:not(.block--vertical) .block__text { font-size: 15px; }

/* --------------------------------------------------------------------------
   11. メニュー（MENUページ）
   -------------------------------------------------------------------------- */
.menu-item { margin-bottom: 96px; }
.menu-item:last-child { margin-bottom: 0; }

.menu-item__head {
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 48px;
  align-items: start;
  margin-bottom: 40px;
}
.menu-item__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
/* 2026-07-17：円形バッジ廃止にあわせて見出しを主役に（大きく＋下罫） */
.menu-item__title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-ink);
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--color-sub);
}

/* 丸バッジ　実測：100×100 / radius 50% / bg rgb(214,233,202) / fs16px / 緑文字 */
.badge {
  display: grid;
  place-items: center;
  width: var(--badge-size); height: var(--badge-size);
  margin-bottom: 24px;
  border-radius: 50%;
  font-size: var(--badge-font);
  letter-spacing: normal;
  color: var(--color-on-sub);
  background: var(--color-sub);
}
.menu-item__desc { font-size: 16px; }

/* 施術詳細テーブル
   実測：行高 48px／ラベル幅 174px・fs16px・w700・緑・padding 10px 100px 10px 10px
         値 fs16px・黒・padding 10px 0 10px 20px */
.menu-table th,
.menu-table td {
  font-size: var(--table-font);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-main);
}
.menu-table th {
  width: var(--table-label-w);
  padding: 10px 100px 10px 10px;
  font-weight: 700;
  color: var(--color-ink);
  white-space: nowrap;
}
.menu-table td {
  padding: 10px 0 10px 20px;
  color: var(--color-text);
}
.menu-table tr:first-child th,
.menu-table tr:first-child td { border-top: 1px solid var(--color-main); }

/* --------------------------------------------------------------------------
   12. 情報テーブル（院概要など）
   -------------------------------------------------------------------------- */
.info-table th,
.info-table td {
  padding: 22px 8px;
  font-size: 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}
.info-table th { width: 240px; font-weight: 500; }

/* 営業時間テーブル */
.hours { max-width: 420px; font-size: 13px; text-align: center; }
.hours th {
  padding: 8px;
  font-weight: 500;
  color: var(--color-white);
  background: var(--color-fill);
  border: 1px solid var(--color-white);
}
.hours td { padding: 10px 8px; border: 1px solid var(--color-border); }
.hours .hours__time { color: var(--color-white); background: var(--color-fill); border-color: var(--color-white); }

/* --------------------------------------------------------------------------
   12-b. 3つのPOINT（横並びカード）
   -------------------------------------------------------------------------- */
.points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.point { text-align: center; }
.point__num {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  margin: 0 auto 24px;
  border-radius: 50%;
  font-family: var(--font-en);
  font-size: 22px;
  color: var(--color-white);
  background: var(--color-fill);
}
.point__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}
.point__title em { font-style: normal; color: var(--color-ink); }
.point__text { font-size: 13px; text-align: left; }

/* POINT の写真（2026-07-16 追加）。番号バッジを写真の下端に少し重ねて、
   写真とバッジを1つのまとまりとして読ませる。抜き方は fig_mod（円／角丸）に従う */
.point__img { width: min(100%, 220px); margin: 0 auto; }
.point__img > img, .point__img > .ph { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.point__img.circle-fig > img, .point__img.circle-fig > .ph { width: 92%; height: 92%; }
.point__img + .point__num { margin-top: -32px; position: relative; z-index: 2; }

/* --------------------------------------------------------------------------
   12-c. 症状ブロック
   -------------------------------------------------------------------------- */
.symptom {
  display: grid;                       /* 2026-07-16：写真つき2カラムに */
  grid-template-columns: 240px 1fr;
  gap: 40px;
  align-items: center;
  padding: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-white);
}
.symptom + .symptom { margin-top: 32px; }
/* 2枚目はカードごと画像を右に。同じ型が続く単調さを避ける。
   nth-child は使わない（heading-block が同じ親にいて数えがずれる） */
.symptom + .symptom { grid-template-columns: 1fr 240px; }
.symptom + .symptom .symptom__fig { order: 2; }
.symptom__fig { width: 100%; }
.symptom__fig > img, .symptom__fig > .ph { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.symptom__fig.circle-fig > img, .symptom__fig.circle-fig > .ph { width: 92%; height: 92%; }
.symptom__title {
  padding-bottom: 14px;
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-sub);
}
.symptom__text { font-size: 14px; margin-bottom: 16px; }
.symptom__list { font-size: 14px; }
.symptom__list li { position: relative; padding-left: 20px; }
.symptom__list li::before {
  content: "";
  position: absolute;
  left: 4px; top: 0.95em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-main);
}

/* --------------------------------------------------------------------------
   12-d. FAQ（details/summary：JS不要・キーボード操作可）
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--color-border); }
.faq__item { border-bottom: 1px solid var(--color-border); }
.faq__q {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 48px 24px 8px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::before {
  content: "Q";
  flex-shrink: 0;
  font-family: var(--font-en);
  font-size: 18px;
  color: var(--color-ink);
  line-height: 1.5;
}
/* 開閉アイコン */
.faq__q::after {
  content: "";
  position: absolute;
  right: 16px; top: 32px;
  width: 10px; height: 10px;
  border-right: 1px solid var(--color-text-light);
  border-bottom: 1px solid var(--color-text-light);
  transform: rotate(45deg);
  transition: transform var(--transition);
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg); }
.faq__q:hover { color: var(--color-ink); }

.faq__a {
  display: flex;
  gap: 16px;
  padding: 0 48px 28px 8px;
  font-size: 14px;
}
.faq__a::before {
  content: "A";
  flex-shrink: 0;
  font-family: var(--font-en);
  font-size: 18px;
  color: var(--color-text-light);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   12-e. 施術の流れ（縦ステップ）
   -------------------------------------------------------------------------- */
.flow { position: relative; }
.flow__item {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 32px;
  padding-bottom: 48px;
}
.flow__item:last-child { padding-bottom: 0; }
/* ステップ間の縦線 */
.flow__item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 31px; top: 64px; bottom: 0;
  width: 1px;
  background: var(--color-sub);
}
.flow__num {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  font-family: var(--font-en);
  font-size: 20px;
  color: var(--color-on-sub);
  background: var(--color-sub);
}
.flow__body { padding-top: 8px; }
.flow__title { font-size: 15px; font-weight: 700; margin-bottom: 12px; letter-spacing: 0.1em; }
.flow__text { font-size: 14px; }

/* --------------------------------------------------------------------------
   12-e2. 脇に縦位置写真を置く2カラム（2026-07-16 追加）
   About の FAQ・施術の流れは長い1カラムで、文字だけが延々続いていた。
   縦位置の写真を sticky で添えて、スクロール中も面が持つようにする。
   写真はページの脇役なので fig_mod（円）にはしない（円は主役の抜き方）。
   -------------------------------------------------------------------------- */
.aside-split {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 56px;
  align-items: start;
}
.aside-split--rev { grid-template-columns: 1fr 360px; }
.aside-split__fig { position: sticky; top: 100px; }
.aside-split__fig > img, .aside-split__fig > .ph {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   12-e3. 写真つき道順（2026-07-16 追加・アクセスページ）
   -------------------------------------------------------------------------- */
.section-lead { text-align: center; font-size: 14px; margin-bottom: 48px; }
.route-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}
.route-step { text-align: center; }
.route-step__fig { margin-bottom: -20px; }
.route-step__fig > img, .route-step__fig > .ph {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}
.route-step__num {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  margin: 0 auto 12px;
  position: relative;
  z-index: 2;
  border-radius: 50%;
  font-family: var(--font-en);
  font-size: 16px;
  color: var(--color-white);
  background: var(--color-fill);
}
.route-step__title { font-size: 15px; font-weight: 700; letter-spacing: 0.1em; margin-bottom: 10px; }
.route-step__text { font-size: 13px; text-align: left; }

/* --------------------------------------------------------------------------
   12-f. CTA帯
   -------------------------------------------------------------------------- */
.cta {
  padding-block: 72px;
  text-align: center;
  background: var(--color-sub);
}
.cta__title { font-size: 18px; font-weight: 500; letter-spacing: 0.1em; margin-bottom: 12px; }
/* CTA帯の地は --color-sub（淡い色面）。--color-text-light だと 3.99:1 で未達になるため、
   一段濃い --color-text-nav（6.04:1）を使う。見出しより控えめ、という役割は保てる。 */
.cta__note { font-size: 12px; color: var(--color-text-nav); margin-bottom: 32px; }
.cta__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; }
.cta__tel { font-family: var(--font-en); font-size: 30px; letter-spacing: 0.05em; color: var(--color-ink-2); }

/* --------------------------------------------------------------------------
   12-g. パンくず
   -------------------------------------------------------------------------- */
.breadcrumb { padding: 16px 0; font-size: 11px; color: var(--color-text-light); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; }
.breadcrumb li + li::before { content: "›"; margin-right: 8px; }

/* --------------------------------------------------------------------------
   12-h. 画像プレースホルダ
   ヒアリングシート「素材・写真」で回収する写真の差し込み位置を明示する。
   -------------------------------------------------------------------------- */
.ph {
  display: grid;
  place-items: center;
  gap: 6px;
  aspect-ratio: 3 / 2;
  border: 1px dashed color-mix(in srgb, var(--color-main) 45%, #fff);
  border-radius: var(--radius);
  background: var(--color-sub);
  color: var(--color-on-sub);   /* サブ地の上なので on-sub。生の sub2 だと 3.2:1 で読めない */
  text-align: center;
}
.ph__label { font-size: 13px; font-weight: 500; letter-spacing: 0.1em; }
.ph__meta { font-family: var(--font-en); font-size: 11px; opacity: 0.7; }
.ph--square { aspect-ratio: 1 / 1; }
.ph--wide { aspect-ratio: 16 / 9; }

/* --------------------------------------------------------------------------
   12-m. Evergreen TOP 用の実測レイアウト
   実サイトは Bootstrap の12カラム。container 1130 / col padding 0 12px。
   row は左右 -12px のネガティブマージンで相殺している。
   -------------------------------------------------------------------------- */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: -12px;      /* 実測：col の padding 12px を相殺 */
}
.col { padding-inline: 12px; }
.col-6 { width: 50%; }       /* 実測：MENU は 565px ×2 */
.col-3 { width: 25%; }       /* 実測：BLOG は 283px ×4 */

/* --- CONCEPT：画像541×454が左、テキストが右（実測 x400 / x1005） --- */
.split { display: flex; align-items: flex-start; gap: 64px; }
.split__img { flex: 0 0 541px; }             /* 実測 541px */
.split__img img { width: 541px; height: 454px; object-fit: cover; }
.split__body { flex: 1; padding-top: 40px; }
.split__label {
  font-size: 16px;                            /* 実測 16px */
  font-weight: 400;
  color: var(--color-ink);                   /* 実測 rgb(127,190,37) */
  margin-bottom: 24px;
}
.split__title {
  font-size: 20px;                            /* 実測 20px */
  font-weight: 700;                           /* 実測 700 */
  color: var(--color-text);                   /* 実測 rgb(0,0,0) */
  margin-bottom: 32px;
}
.split__text { font-size: 16px; margin-bottom: 40px; }

/* 反転：こだわり・GREETINGS はテキストが左、画像541×687が右（実測） */
.split--reverse .split__img { order: 2; flex: 0 0 541px; }
.split--reverse .split__img img { height: 687px; }   /* 実測 687px */

/* --- MENU：2カラム。各カラムは 230×345 の縦長画像＋右にテキスト（実測） --- */
.menu2 { display: flex; align-items: flex-start; gap: 20px; }
.menu2__img { flex: 0 0 230px; }             /* 実測 230px */
.menu2__img img { width: 230px; height: 345px; object-fit: cover; }
.menu2__body { flex: 1; }                    /* 実測 291px */
.menu2__title {
  font-size: 20px;                            /* 実測 20px */
  font-weight: 700;                           /* 実測 700 */
  color: var(--color-text);
  margin-bottom: 24px;
}
.menu2__text { font-size: 16px; margin-bottom: 32px; }

/* --------------------------------------------------------------------------
   TOPのお知らせ（縦組みラベル＋リスト）
   実測の4カラムカードから完全に組み替えたブロック。意図：

   1. TOPのお知らせは「読ませる」より「更新されている＝生きている院」を伝える枠。
      カード4枚だと本数が見えず、面積のわりに情報が少ない。行にすると
      日付が縦に並ぶので「最近も動いている」が一目で分かる。
   2. 4カラムカードは 259×259 の写真を4点要求する。行のサムネなら小さく、
      写真が弱くても成立する。ヒアリングで回収する素材のハードルが下がる。
   3. ひだまり堂の縦組みセクションラベル（実測：幅35pxの列に1文字ずつ折る）を
      ここで回収している。TOPで1箇所だけ縦組みが入ると、明朝の紙面が締まる。

   見出しは「英語ラベル＋日本語見出し」の全体ルールを守ったまま、
   向きと寄せだけ変えている。
   -------------------------------------------------------------------------- */
.news {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 0 64px;
  align-items: start;
}

/* 左：縦組みの見出しだけ。
   MOREボタンはここに置かないこと。縦組みラベルの下にぶら下げると、
   右のリストのどこにも属さない浮いた位置になる。
   セクション下の中央（.section-more）に置く。 */
.news__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.news__head .label-en { margin-bottom: 0; }
.news__title {
  writing-mode: vertical-rl;
  font-size: var(--heading-size);
  font-weight: var(--heading-weight);
  letter-spacing: 0.3em;             /* 縦組みは字間を広く取らないと詰まって見える */
  color: var(--heading-color);
}

/* 【02】縦組みをやめて横組みにする版。
   縦組みは 01（明朝・和）の個性なので、角ゴの 02 では使わない。
   実測（杜の里）も横組みの「日本語30px ＋ 英字14px」だった。 */
.news--flat .news { align-items: start; }
.news--flat .news__title { writing-mode: horizontal-tb; letter-spacing: var(--heading-ls); }
.news--flat .news__head { align-items: flex-start; text-align: left; }
/* 02 はサムネを出さない（お知らせは文字だけで足りる）。
   .news__link は 88px のサムネ列を前提にしたグリッドなので、
   サムネが無いまま使うと 88px の空カラムが残り、本文が 1fr に押し込まれて
   1文字ずつ折り返す。列指定ごと上書きすること。 */
.news--flat .news__link { grid-template-columns: 1fr; gap: 4px; }
.news--flat .news__meta { flex-wrap: wrap; }

/* 右：お知らせの行 */
.news__list { border-top: 1px solid var(--color-border); }
.news__item { border-bottom: 1px solid var(--color-border); }
.news__link {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 28px;
  align-items: center;
  padding: 22px 8px;
}
.news__link:hover { opacity: 1; }
.news__link:hover .news__headline { color: var(--color-ink); }

.news__thumb { width: 88px; }
.news__thumb.circle-fig > img { width: 92%; height: 92%; }

.news__meta { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.news__date {
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--color-text-light);
}
.news__cat {
  padding: 2px 14px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--color-on-sub);
  background: var(--color-sub);
  border-radius: 30px;
}
.news__headline {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  transition: color var(--transition);
}

/* --- ブログ一覧のカードグリッド
   2026-07-16 指示：「サムネイルが見やすい一覧にしたい」→ リスト型（88px円サムネ）を
   やめてカード型へ。旧・実測4カラム（283×372/帯43px）から、サムネを主役にした
   3カラムへ再設計した。画像の抜き方は fig_mod（01=円/02=角丸）で、ここでは決めない。 --- */
.blog-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 36px;
}
.blog-card { display: block; }
.blog-card__link { display: block; }
.blog-card__link:hover { opacity: 1; }
.blog-card__img { margin-bottom: 16px; }
.blog-card__img img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.blog-card__meta { display: flex; align-items: center; gap: 12px; }
.blog-card__date {
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--color-text-muted, #9a9a9a);
}
.blog-card__cat {
  display: inline-block;
  padding: 2px 14px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--color-on-sub);
  background: var(--color-sub);
  border-radius: 30px;   /* .news__cat と同じ丸み */
}
.blog-card__title {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-text-nav);
  transition: color 0.25s;
}
.blog-card__link:hover .blog-card__title { color: var(--color-ink); }

/* セクション内の中央MORE（実測：MENUの下に1つ） */
.section-more { display: flex; justify-content: center; margin-top: 40px; }

/* ==========================================================================
   【ブラッシュアップ】ここから下は本家にない／本家から変えた改良コンポーネント
   意図：店舗の信頼性を上げる。鍼灸院は「痛くないか」「誰がやるのか」が
        来院前の最大の不安なので、そこを潰す要素を足している。
   ========================================================================== */

/* --------------------------------------------------------------------------
   R-0. MENUカード
   本家は縦長写真＋長文で、患者がいちばん知りたい「時間」「料金」が
   TOPからは分からなかった。カード化してスペックを前に出す。
   -------------------------------------------------------------------------- */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.menu-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  transition: border-color var(--transition), transform var(--transition);
}
.menu-card:hover {
  border-color: var(--color-main);
  transform: translateY(-4px);
  opacity: 1;
}
.menu-card__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.menu-card__body { display: flex; flex-direction: column; flex: 1; padding: 28px 24px 24px; }

/* 「誰向けか」を最初に出す */
.menu-card__target {
  display: inline-block;
  align-self: flex-start;
  padding: 3px 12px;
  margin-bottom: 14px;
  font-size: 12px;
  color: var(--color-on-sub);
  background: var(--color-sub);
}
.menu-card__title { font-size: 19px; font-weight: 700; margin-bottom: 18px; }

/* 時間・料金 */
.menu-card__spec {
  display: flex;
  gap: 28px;
  padding: 14px 0;
  margin-bottom: 16px;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.menu-card__spec dt { font-size: 11px; color: var(--color-text-light); margin-bottom: 2px; }
.menu-card__spec dd { margin: 0; font-size: 14px; }
.menu-card__spec strong {
  font-family: var(--font-en);
  font-size: 24px;
  font-weight: 500;
  color: var(--color-ink);
}
.menu-card__spec span { font-size: 11px; color: var(--color-text-light); margin-left: 4px; }

.menu-card__text { flex: 1; font-size: 14px; color: var(--color-text-nav); margin-bottom: 18px; }
.menu-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-ink);
}
.menu-card__link::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   R-0b. カテゴリフィルタ（ブログ）
   -------------------------------------------------------------------------- */
.cat-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 48px;
}
.cat-filter a {
  display: block;
  padding: 8px 22px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--color-text-nav);
  border: 1px solid var(--color-border);
  border-radius: 30px;   /* .pill / .news__cat と同じ丸みに揃える */
}
.cat-filter a:hover,
.cat-filter .is-current {
  color: var(--color-white);
  background: var(--color-fill);
  border-color: var(--color-main);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   R-1. 選ばれる理由（3点）
   本家の「こだわり」は画像＋長文1本で、要点が読み取れなかった。
   3点に分解して、流し読みでも強みが伝わるようにする。
   -------------------------------------------------------------------------- */
.reasons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.reason { text-align: center; }
.reason__num {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  margin-bottom: 20px;
  border-radius: 50%;
  font-family: var(--font-en);
  font-size: 14px;
  color: var(--color-white);
  background: var(--color-fill);
}
.reason__img img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-bottom: 24px;
}
.reason__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
  margin-bottom: 14px;
}
.reason__text { font-size: 15px; text-align: left; color: var(--color-text-nav); }

/* --------------------------------------------------------------------------
   R-2. 院長紹介
   本家は「こだわり」と全く同じ画像＋テキストの型で、
   同じデザインのセクションが2つ並んでいた。
   ここは「誰が施術するのか」を伝える最重要ブロックなので、
   顔・氏名・資格・署名を持つ専用の型にして差別化する。
   -------------------------------------------------------------------------- */
.doctor {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 64px;
  align-items: start;
  padding: 56px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
}
.doctor__img img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.doctor__role {
  font-size: 13px;
  letter-spacing: 0.15em;
  color: var(--color-ink);
  margin-bottom: 10px;
}
.doctor__name {
  font-size: 26px;
  font-weight: 500;
  margin-bottom: 6px;
}
.doctor__name span { font-size: 14px; color: var(--color-text-light); margin-left: 12px; }

/* 資格：信頼の根拠として明示 */
.doctor__creds { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 28px; }
.doctor__creds li {
  padding: 5px 14px;
  font-size: 12px;
  color: var(--color-on-sub);
  background: var(--color-sub);
}
.doctor__msg { font-size: 15px; margin-bottom: 28px; }
.doctor__sign { font-size: 13px; color: var(--color-text-light); }

/* --------------------------------------------------------------------------
   R-3. 不安を解消する帯（「痛くない？」への先回り）
   -------------------------------------------------------------------------- */
.assure {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
}
.assure__item {
  padding: 32px 24px;
  text-align: center;
  background: var(--color-white);
}
.assure__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 10px;
}
.assure__text { font-size: 14px; color: var(--color-text-nav); }

/* --------------------------------------------------------------------------
   12-i. お知らせバー（ヘッダー直下の1行告知）
   -------------------------------------------------------------------------- */
.notice-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 12px 24px;
  font-size: 14px;
  background: var(--color-sub);
  color: var(--color-text);
}
.notice-bar__label {
  flex-shrink: 0;
  padding: 2px 14px;
  font-size: 12px;
  color: var(--color-white);
  background: var(--color-fill);
  border-radius: 30px;
}
.notice-bar__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --------------------------------------------------------------------------
   12-j. ステートメント帯（濃色ベタ＋大きな白文字）
   実測：H2 37px / letter-spacing 8.88px / 白 / 濃色地
   -------------------------------------------------------------------------- */
/* TOPで唯一、全幅に写真を敷くセクション。
   カード・円・生成りの面が続いたあとに写真が1枚全幅で入ると、
   ページに息継ぎができる。院の空気を写真1枚で見せる枠。

   【変更】元は `background: var(--color-main)` のベタ塗り＋画像 opacity 0.28 で、
   ほぼ緑一色に画像がうっすら乗るだけだった。フッターで既に同じ判断をしているとおり、
   彩度の高い色を全幅に敷くとコンテンツより主張する。ここは写真を主役にしたい枠なので、
   地は暗色にして画像をしっかり出し、可読性はスクリムで担保する。 */
.statement {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 460px;
  padding: 96px 24px;
  text-align: center;
  background: var(--color-footer);   /* フッターと同じ、mainを18%含む暗色 */
  overflow: hidden;
}
.statement__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.55;                     /* 【変更】0.28 → 0.55。写真として読ませる */
}
/* 写真の明暗に関わらず白文字が読めるようにするスクリム。
   実写に差し替えた後も可読性が壊れないための保険。 */
.statement::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--color-footer) 55%, transparent) 0%,
    color-mix(in srgb, var(--color-footer) 75%, transparent) 100%
  );
}
.statement__body { position: relative; z-index: 1; max-width: 720px; }
.statement__title {
  font-size: 34px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.2em;
  color: var(--color-white);
  margin-bottom: 32px;
}
.statement__text {
  font-size: 15px;
  line-height: 2.2;
  color: rgba(255, 255, 255, 0.9);
}

/* --------------------------------------------------------------------------
   12-k. 〇つの柱（3列カード）
   実測：grid 300px 300px 300px / gap 0 80px / コンテナ1060px
   -------------------------------------------------------------------------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 300px);   /* 実測 300px×3 */
  justify-content: center;
  gap: 56px 80px;                            /* 実測 gap 0 80px（縦は読み物として付与） */
}
.pillar { text-align: center; }
.pillar__icon {
  display: grid;
  place-items: center;
  width: 96px; height: 96px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--color-sub);
  color: var(--color-on-sub);
  font-size: 26px;
}
.pillar__title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-ink);
  margin-bottom: 14px;
}
.pillar__text { font-size: 14px; text-align: left; }
/* 特徴セルの縦位置写真（2026-07-16 追加）。数字バッジは写真の下端に重ねる */
.pillar__img > img, .pillar__img > .ph {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
}
.pillar__img + .pillar__icon {
  width: 64px; height: 64px;
  margin-top: -32px;
  position: relative;
  z-index: 2;
  font-size: 20px;
  border: 3px solid var(--color-bg-alt);   /* 写真との境に地色の縁 */
}

/* --------------------------------------------------------------------------
   院内ギャラリーのマーキー（2026-07-16 追加・02のTOP）
   参照元の topGallery（24枚・90s の無限スクロール。実測）の考え方を取った。
   「院内が見える写真が延々流れる」＝入る前に中が分かる安心感。
   トラックには同じ8枚を2周入れてあり、半分（-50%）動かしてループする。
   -------------------------------------------------------------------------- */
.gallery-marquee { overflow: hidden; padding-block: 24px 72px; }
.gallery-marquee__track {
  display: flex;
  align-items: center;
  gap: 20px;
  width: max-content;
  animation: gallery-scroll 60s linear infinite;
}
.gallery-marquee__item { flex-shrink: 0; }
.gallery-marquee__item img, .gallery-marquee__item .ph {
  display: block;
  height: 240px;
  width: auto;
  object-fit: cover;
  border-radius: var(--radius);
}
@keyframes gallery-scroll {
  to { transform: translateX(-50%); }
}
/* 動きに酔う人への配慮＋JSに依存しない保険。止めて横スクロールにする */
@media (prefers-reduced-motion: reduce) {
  .gallery-marquee { overflow-x: auto; }
  .gallery-marquee__track { animation: none; }
}

/* ==========================================================================
   【02下層】杜の里踏襲の about / medical / access / news（2026-07-17）
   ========================================================================== */

/* ページ内アンカーナビ（実測：about冒頭のジャンプナビ） */
.section-nav { padding: 28px 16px 0; }
.section-nav .pill-list { justify-content: center; }

/* 施術理念（実測：番号つき3項目・中央） */
.philosophy {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1000px;
  margin-inline: auto;
}
.philosophy__item { text-align: center; }
/* 2026-07-17：理念にも写真を（指示）。番号バッジを写真の下端に重ねる */
.philosophy__img { margin-bottom: 0; }
.philosophy__img img, .philosophy__img .ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.philosophy__img + .philosophy__num { margin-top: -28px; position: relative; z-index: 2; border: 3px solid var(--color-bg); }
.philosophy__num {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  margin: 0 auto 18px;
  border-radius: 50%;
  font-family: var(--font-en);
  font-size: 20px;
  color: var(--color-white);
  background: var(--color-fill);
}
.philosophy__text { font-size: 14px; text-align: left; }

/* 当院の特徴（実測：番号＋見出し＋本文＋内包リスト。写真は一部の項目のみ） */
.feature-catch { display: inline-block; font-size: 20px; font-weight: 700; color: var(--color-ink); margin-bottom: 8px; }
.feature-rows { max-width: 1000px; margin-inline: auto; }
.feature-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  padding-block: 36px;
  border-bottom: 1px solid var(--color-border);
}
.feature-row:last-child { border-bottom: 0; }
.feature-row__num {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  font-family: var(--font-en);
  font-size: 20px;
  color: var(--color-on-sub);
  background: var(--color-sub);
}
.feature-row__title { font-size: 18px; font-weight: 700; letter-spacing: 0.06em; color: var(--color-ink); margin-bottom: 12px; }
.feature-row__text { font-size: 14px; }
.feature-row__body .symptom__list { margin-top: 12px; }
.feature-row__img { grid-row: span 2; align-self: start; width: 220px; }
.feature-row__img img, .feature-row__img .ph { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.feature-row:has(.feature-row__img) { grid-template-columns: 56px 1fr 220px; }

/* 受付担当表・注記 */
.staff-table td, .staff-table th { font-size: 13px; }
.table-note { margin-top: 12px; font-size: 12px; color: var(--color-text-nav); }

/* チップの羅列（お支払い方法／こんな症状ありませんか？） */
.chips-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.chip {
  padding: 8px 18px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--color-ink);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 999px;
}

/* 「こんな症状ありませんか？」ボックス（実測：medical冒頭の白ボックス） */
.check-box {
  padding: 40px;
  text-align: center;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.check-box__title { font-size: 18px; font-weight: 700; letter-spacing: 0.08em; color: var(--color-ink); margin-bottom: 24px; }
.check-box__note { margin-top: 24px; font-size: 13px; color: var(--color-text-nav); }
.check-box .symptom__list { display: inline-block; text-align: left; margin-top: 16px; }

/* 対応症状リストの2カラム版（menu-table の中で使う） */
.symptom__list--cols { columns: 2; column-gap: 32px; }

/* スタッフカード（実測：医師紹介2人の型を簡易化） */
.staff-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  max-width: 900px;
  margin-inline: auto;
}
.staff-card {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 24px;
  align-items: start;
  padding: 28px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.staff-card__img { grid-row: span 3; }
.staff-card__img img, .staff-card__img .ph { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.staff-card__role { font-size: 12px; color: var(--color-ink); }
.staff-card__name { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.staff-card__name span { display: block; font-size: 11px; font-weight: 400; color: var(--color-text-light); }
.staff-card__text { font-size: 13px; }

/* 2枚版の道順（電車の方） */
.route-steps--two { grid-template-columns: repeat(2, 1fr); max-width: 860px; margin-inline: auto; }

/* 診療科セクション型のメニュー詳細（実測：medical の「科目見出し帯＋説明＋主な疾患」）
   2026-07-17「メニューのデザインが全サイト同じに見える」への対応。02専用の型 */
.med-section { margin-bottom: 56px; }   /* 2026-07-17：72pxは下の余白が空きすぎた */
.med-section:last-of-type { margin-bottom: 0; }
.med-section__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  margin-bottom: 28px;
  color: var(--color-white);
  background: var(--color-fill);
  border-radius: var(--radius);
}
.med-section__title { font-size: 20px; font-weight: 700; letter-spacing: 0.06em; }
.med-section__tag { font-size: 12px; opacity: 0.85; }
/* 2026-07-17：画像は左・テキストは右に（指示）。文字サイズも一回り上げ、
   画像とテキストの高さ差で下に余白が見えないよう中央揃えに */
.med-section__grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 20px;
}
.med-section__img img, .med-section__img .ph { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
.med-section__desc { font-size: 15.5px; line-height: 1.9; margin-bottom: 20px; }
.med-section__meta { display: flex; gap: 36px; margin-bottom: 14px; }
.med-section__meta div { display: flex; align-items: baseline; gap: 10px; }
.med-section__meta dt { font-size: 13px; color: var(--color-ink); font-weight: 700; }
.med-section__meta dd { font-size: 18px; font-weight: 700; }
.med-section__steps { font-size: 13.5px; color: var(--color-text-nav); }
.disease-box {
  padding: 24px 28px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.disease-box__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 12px;
}
.disease-box__list { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13px; }
.disease-box__list li { position: relative; padding-left: 16px; }
.disease-box__list li::before {
  content: "";
  position: absolute;
  left: 2px; top: 0.85em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-main);
}

/* ==========================================================================
   【03】親しみ・ファミリー（yubihari.com の骨格を実測。配色・イラストは取っていない）
   ========================================================================== */

/* --------------------------------------------------------------------------
   F-1. 手紙型ヒーロー
   実測：写真なし。中央にキャッチ→あいさつ文（lh 2.6 相当のゆったり組み）、
   左右に小さなイラストが浮く。ボタンが1つも無いのが特徴（まず読ませる）。
   写真素材が無い院でも成立する型でもある。
   -------------------------------------------------------------------------- */
.letter-hero {
  position: relative;
  padding: 120px 24px 96px;
  text-align: center;
  overflow: hidden;
}
.letter-hero__title {
  font-size: var(--page-title-size);
  font-weight: var(--page-title-weight);
  letter-spacing: var(--page-title-ls);
  line-height: 1.7;
  color: var(--color-ink);
  margin-bottom: 48px;
}
.letter-hero__text {
  font-size: 15px;
  line-height: 2.6;             /* 実測相当。手紙のゆったり感はほぼ行間で出る */
  letter-spacing: 0.06em;
}
/* 実測：イラストは小さめ（130〜170px）で、本文ブロックの「すぐ脇」に
   上下をずらして置かれている。画面端に大きく置くと悪目立ちする（2026-07-17 指摘）。 */
.letter-hero__illust {
  position: absolute;
  width: 150px;
  pointer-events: none;
}
.letter-hero__illust img, .letter-hero__illust .ph { width: 100%; height: auto; }
.letter-hero__illust--a { left: max(16px, calc(50% - 560px)); top: 38%; }
.letter-hero__illust--b { right: max(16px, calc(50% - 560px)); bottom: 10%; }

/* 下層ページ用の手紙ブロック（理念・コンセプト・アクセスの案内文） */
.letter-hero--page { padding: 72px 24px 40px; }
.letter-hero--page .letter-hero__title { font-size: 26px; margin-bottom: 32px; }

/* --------------------------------------------------------------------------
   F-2. 世代カード3枚
   実測は「事業3本柱カード」：白い角丸カード＋見出し＋写真＋説明＋色違いの丸ボタン。
   ボタンの色違いは、テーマから導出した3系統（fill / fill-2 / footer）で出す。
   生の3色を直接ボタンに使わない（§3-4：明るい色だと白文字が読めなくなる）。
   -------------------------------------------------------------------------- */
.family-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.family-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: var(--radius);
  padding: 36px 28px;
  text-align: center;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05);
}
.family-card__icon { width: 84px; margin: 0 auto 14px; }
.family-card__icon img, .family-card__icon .ph { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.family-card__title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-ink);
  margin-bottom: 20px;
}
.family-card__img { margin-bottom: 20px; }
.family-card__img img, .family-card__img .ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.family-card__text { font-size: 14px; text-align: left; margin-bottom: 28px; }
.family-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  align-self: center;
  margin-top: auto;            /* カードの高さが揃わなくてもボタンは下端に */
  min-height: 46px;
  padding: 0 30px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--color-white);
}
.family-card__btn::after { content: "→"; }
.family-card__btn--1 { background: var(--color-fill); }
.family-card__btn--2 { background: var(--color-fill-2); }
.family-card__btn--3 { background: var(--color-footer); }

/* --------------------------------------------------------------------------
   F-3. お知らせの白パネル
   実測：日誌は白い大きな角丸パネルの中にある。生成りの地に白い面で「紙」を作る型。
   -------------------------------------------------------------------------- */
.news-panel {
  background: var(--color-white);
  border-radius: calc(var(--radius) * 1.5);
  padding: 64px 8%;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04);
}
.news-panel .heading-block { margin-bottom: 32px; }
.news-panel .section-more { margin-top: 32px; }

/* --------------------------------------------------------------------------
   F-4. セルフケアだより
   実測はSNS発信コーナー（淡色パネル＋イラスト＋紹介文）。キャラクターは固有IPなので
   取らず、「院長がセルフケアのコツを発信する」枠として同じ型だけ使う。
   -------------------------------------------------------------------------- */
.selfcare {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 56px;
  align-items: center;
  background: var(--color-sub);
  border-radius: calc(var(--radius) * 1.5);
  padding: 56px 7%;
  color: var(--color-on-sub);   /* 淡い面の上なので on-sub（§3-4） */
}
.selfcare__illust img, .selfcare__illust .ph { width: 100%; height: auto; }
.selfcare__title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}
.selfcare__text { font-size: 14px; margin-bottom: 28px; }
.selfcare__links { display: flex; flex-wrap: wrap; gap: 16px; }

/* --------------------------------------------------------------------------
   F-5. 料金ダイジェスト（TOP）と料金リスト（menu）
   2026-07-17：TOPの「セルフケアだより」を廃止して料金ダイジェストに差し替え。
   参照元の料金ページ（メニュー名＋金額＋説明の簡潔なリスト）の型。
   -------------------------------------------------------------------------- */
.price-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.price-card {
  display: block;
  padding: 32px 28px;
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05);
  transition: transform 0.25s;
}
.price-card:hover { transform: translateY(-3px); opacity: 1; }
.price-card__target { font-size: 12px; color: var(--color-ink); margin-bottom: 6px; }
.price-card__title { font-size: 17px; font-weight: 700; letter-spacing: 0.06em; margin-bottom: 14px; color: var(--color-text); }
.price-card__price { color: var(--color-ink); margin-bottom: 2px; }
.price-card__price strong { font-size: 28px; font-weight: 700; letter-spacing: 0.02em; }
.price-card__price span { font-size: 12px; color: var(--color-text-nav); }
.price-card__mins { font-size: 12px; color: var(--color-text-nav); margin-bottom: 14px; }
.price-card__text { font-size: 13px; color: var(--color-text); }
.price-note { max-width: 720px; margin: 32px auto 0; font-size: 13px; text-align: center; color: var(--color-text-nav); }

/* 料金リスト（menu）。2026-07-17：ピルをやめ、左右2カラムの「お品書き」型に。
   金額は右カラムで右揃え・nowrap（改行で崩れない） */
.price-list { border-top: 1px solid var(--color-border); }
.price-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 48px;
  align-items: start;
  padding: 32px 8px;
  border-bottom: 1px solid var(--color-border);
}
.price-row__tag { font-size: 12px; letter-spacing: 0.08em; color: var(--color-ink); margin-bottom: 4px; }
.price-row__name { font-size: 17px; font-weight: 700; letter-spacing: 0.06em; margin-bottom: 10px; }
.price-row__text { font-size: 13.5px; color: var(--color-text); }
.price-row__amount { text-align: right; white-space: nowrap; }
.price-row__price strong { font-size: 30px; font-weight: 700; color: var(--color-ink); letter-spacing: 0.02em; }
.price-row__price span { font-size: 12px; color: var(--color-text-nav); }
.price-row__mins { font-size: 12px; color: var(--color-text-nav); margin-top: 2px; }

/* --------------------------------------------------------------------------
   F-6. 症状タイル・道具カード・ケース別の流れ（menu＝参照元 shinkyu の構成）
   -------------------------------------------------------------------------- */
.stile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.stile {
  padding: 28px 16px 24px;
  text-align: center;
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}
.stile__illust { width: 84px; margin: 0 auto 14px; }
.stile__illust img, .stile__illust .ph { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.stile__label { font-size: 15px; font-weight: 700; letter-spacing: 0.04em; margin-bottom: 10px; }
.stile__badge {
  display: inline-block;
  padding: 2px 14px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--color-on-sub);
  background: var(--color-sub);
  border-radius: 999px;
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.tool-card { text-align: center; }
.tool-card__img { margin-bottom: 14px; }
.tool-card__img img, .tool-card__img .ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tool-card__name { font-size: 15px; font-weight: 700; letter-spacing: 0.04em; margin-bottom: 8px; color: var(--color-ink); }
.tool-card__text { font-size: 13px; text-align: left; }

.flow-tracks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.flow-track {
  padding: 32px 28px;
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}
.flow-track__title {
  padding-bottom: 12px;
  margin-bottom: 18px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-ink);
  text-align: center;
  border-bottom: 1px solid var(--color-sub);
}
.flow-track__steps { counter-reset: step; font-size: 13.5px; }
.flow-track__steps li {
  counter-increment: step;
  position: relative;
  padding: 8px 0 8px 34px;
}
.flow-track__steps li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 8px;
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  font-family: var(--font-en);
  font-size: 12px;
  color: var(--color-on-sub);
  background: var(--color-sub);
}

/* --------------------------------------------------------------------------
   F-7. 手記（about）・日誌（blog）・お越しになる方法（access）
   -------------------------------------------------------------------------- */
.essay {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 56px;
  align-items: start;
  max-width: 1000px;
  margin-inline: auto;
}
.essay__fig { position: sticky; top: 100px; }
.essay__fig img, .essay__fig .ph { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); }
.essay__para { font-size: 15px; line-height: 2.3; margin-bottom: 2em; }
.essay__sign { text-align: right; font-size: 15px; font-weight: 700; color: var(--color-ink); }

/* 2026-07-17：サムネイルをカード内へ（2カラム・左サムネ） */
.diary-entry {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  align-items: start;
  padding: 36px 6%;
  margin-bottom: 28px;
  background: var(--color-white);
  border-radius: calc(var(--radius) * 1.5);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04);
}
.diary-entry__thumb img, .diary-entry__thumb .ph { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.diary-entry__title { font-size: 18px; font-weight: 700; margin: 10px 0 14px; }
.diary-entry__title .news__headline { font-size: inherit; color: var(--color-ink); }
.diary-entry__excerpt { font-size: 14px; margin-bottom: 16px; }
.diary-entry__more { font-size: 13px; color: var(--color-ink); }

.ways {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.way {
  padding: 32px 28px;
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}
.way__title {
  padding-bottom: 10px;
  margin-bottom: 14px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-sub);
}
.way__text { font-size: 14px; }

/* ==========================================================================
   【04】スポーツ・機能改善（stars-s.com の骨格。配色・星モチーフは取っていない）
   ========================================================================== */

/* 見出しの型：リードの両端に線、大見出しの下に太罫 */
.heading-block--bar .label-en {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  color: var(--color-ink);
  font-weight: 600;
}
.heading-block--bar .label-en::before,
.heading-block--bar .label-en::after {
  content: "";
  width: 56px;
  height: 2px;
  background: var(--color-ink);
}
.heading-block--bar .heading { padding-bottom: 14px; }
.heading-block--bar .heading::after {
  width: 100%;
  height: 4px;
  filter: none;
  background: var(--color-ink);
}

/* マーカーハイライト（見出し・キャッチ用） */
mark, .marker-line {
  background: linear-gradient(transparent 62%, var(--color-sub) 62%);
  color: inherit;
  padding: 0 2px;
}

/* 三角形の幾何アクセント */
.tri {
  position: absolute;
  z-index: 1;
  width: 0; height: 0;
  pointer-events: none;
}
.tri--tl { top: 0; left: 0; border-top: 130px solid var(--color-sub); border-right: 130px solid transparent; }
.tri--br { bottom: 0; right: 0; border-bottom: 130px solid color-mix(in srgb, var(--color-main) 24%, transparent); border-left: 130px solid transparent; }

/* ヒーロー（全幅写真＋マーカーキャッチ） */
.sp-hero { position: relative; overflow: hidden; }
.sp-hero__img img, .sp-hero__img .ph { display: block; width: 100%; height: min(72vh, 640px); object-fit: cover; }
.sp-hero__copy {
  position: absolute;
  left: max(24px, 8%);
  bottom: 64px;
  z-index: 2;
}
.sp-hero__copy h1 {
  font-size: var(--page-title-size);
  font-weight: 700;
  letter-spacing: var(--page-title-ls);
  line-height: 1.9;
  color: var(--color-text);
}
.sp-hero__copy .marker-line {
  background: linear-gradient(transparent 8%, var(--color-white) 8%, var(--color-white) 92%, transparent 92%);
  box-decoration-break: clone;
  padding: 2px 12px;
}
.sp-hero__sub {
  display: inline-block;
  margin-top: 16px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-white);
  background: var(--color-fill);
}

/* こだわりカード（数字バッジ＋＼リード／＋マーカー見出し） */
.kd-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px 32px;
}
.kd-card { text-align: center; }
.kd-card__img { position: relative; margin-bottom: 20px; }
.kd-card__img img, .kd-card__img .ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.kd-card__num {
  position: absolute;
  top: -18px; left: -10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  font-family: var(--font-en);
  font-size: 20px;
  font-weight: 600;
  color: var(--color-white);
  background: var(--color-fill);
  /* 星ではなく、角を落とした四角を45度に（参照元の星バッジは固有モチーフなので使わない） */
  transform: rotate(45deg);
  border-radius: 8px;
}
.kd-card__num { line-height: 1; }
.kd-card__img .kd-card__num > * { transform: rotate(-45deg); }
.kd-card__lead { font-size: 13px; font-weight: 700; color: var(--color-ink); margin-bottom: 6px; }
.kd-card__title { font-size: 19px; font-weight: 700; letter-spacing: 0.06em; margin-bottom: 12px; }
.kd-card__text { font-size: 13.5px; text-align: left; }

/* お悩み2択（チェックリスト＋オフセット影ボタン） */
.worries {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  max-width: 980px;
  margin-inline: auto;
}
.worry { text-align: center; }
.worry__title {
  display: block;
  padding: 12px;
  margin-bottom: 24px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-ink);
  border: 2px solid var(--color-ink);
  background: var(--color-white);
}
.worry__list {
  display: inline-block;
  text-align: left;
  margin-bottom: 28px;
}
.worry__list li {
  position: relative;
  padding: 6px 0 6px 38px;
  font-size: 15px;
  font-weight: 700;
}
.worry__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 22px; height: 22px;
  background: var(--color-fill);
}
.worry__list li::after {
  content: "";
  position: absolute;
  left: 5px; top: 11px;
  width: 12px; height: 7px;
  border-left: 3px solid var(--color-white);
  border-bottom: 3px solid var(--color-white);
  transform: rotate(-45deg);
}
.worry__btn {
  display: block;
  padding: 16px 12px;
  color: var(--color-white);
  box-shadow: 6px 6px 0 color-mix(in srgb, var(--color-main) 30%, transparent);
  transition: transform 0.2s, box-shadow 0.2s;
}
.worry__btn:hover { transform: translate(3px, 3px); box-shadow: 3px 3px 0 color-mix(in srgb, var(--color-main) 30%, transparent); opacity: 1; }
.worry__btn--a { background: var(--color-fill); }
.worry__btn--b { background: var(--color-fill-2); }
.worry__btn-sub { display: block; font-size: 12px; margin-bottom: 4px; }
.worry__btn-main { display: block; font-size: 18px; font-weight: 700; letter-spacing: 0.06em; }

/* 流れ（6ステップ・数字大きめ） */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
}
.step { border-top: 3px solid var(--color-ink); padding-top: 14px; }
.step__num { font-family: var(--font-en); font-size: 30px; font-weight: 600; color: var(--color-ink); line-height: 1; margin-bottom: 8px; }
.step__title { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.step__text { font-size: 13.5px; }

/* 3つのお約束 */
.promises {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.promise {
  padding: 32px 28px;
  text-align: center;
  background: var(--color-white);
  border: 2px solid var(--color-ink);
}
.promise__num { font-size: 13px; font-weight: 700; color: var(--color-ink); margin-bottom: 12px; }
.promise__num span { font-family: var(--font-en); font-size: 26px; margin-left: 6px; }
.promise__title { font-size: 17px; font-weight: 700; margin-bottom: 12px; }
.promise__text { font-size: 13.5px; text-align: left; }

/* 症状グループ／メニューグループ／機器 */
.sym-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.sym-group { padding: 28px; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius); }
.sym-group__title {
  padding-bottom: 10px;
  margin-bottom: 16px;
  font-size: 17px;
  font-weight: 700;
  color: var(--color-ink);
  border-bottom: 3px solid var(--color-sub);
}
.chips-box--left { justify-content: flex-start; }
.menu-group { margin-bottom: 48px; }
.menu-group__title {
  padding: 10px 20px;
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-white);
  background: var(--color-fill);
}
.machines { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.machine { text-align: center; }
.machine__img img, .machine__img .ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); margin-bottom: 12px; }
.machine__name { font-size: 15px; font-weight: 700; margin-bottom: 8px; color: var(--color-ink); }
.machine__text { font-size: 13px; text-align: left; }

/* ==========================================================================
   【05】上質・ミニマル（yard-dental.com の骨格。配色・ロゴは取っていない）
   ========================================================================== */

/* 見出しの型：○ラベル＋短い下線 */
.heading-block--dot { text-align: left; }
.heading-block--dot .label-en {
  position: relative;
  display: block;
  width: fit-content;
  padding-left: 20px;
  padding-bottom: 14px;
  margin-bottom: 28px;
  font-style: italic;
  letter-spacing: 0.12em;
  border-bottom: 1px solid var(--color-text);
  color: var(--color-text);
}
.heading-block--dot .label-en::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5em;
  width: 9px; height: 9px;
  border: 1.5px solid var(--color-ink);
  border-radius: 50%;
}
.heading-block--dot .heading { color: var(--color-text); }
.heading-block--dot .heading::after { display: none; }

/* 透かし英字（セクションの背景に巨大なセリフ英字） */
.wm-field { position: relative; overflow: hidden; }
.wm-field > .container { position: relative; z-index: 1; }
.wm {
  position: absolute;
  z-index: 0;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-en);
  font-style: italic;
  font-size: clamp(120px, 16vw, 240px);
  line-height: 1;
  white-space: nowrap;
  color: color-mix(in srgb, var(--color-main) 9%, transparent);
  pointer-events: none;
}

/* アーチ型の写真マスク（上端が半円） */
.arch-fig img, .arch-fig .ph {
  width: 100%;
  aspect-ratio: 7 / 9;
  object-fit: cover;
  border-radius: 999px 999px 0 0;
}

/* ヒーロー（インセット写真＋透かしロゴ） */
.mn-hero { position: relative; padding: 48px 3% 0; }
.mn-hero__img img, .mn-hero__img .ph { display: block; width: 100%; height: min(78vh, 680px); object-fit: cover; }
.mn-hero__wm {
  position: absolute;
  top: 8px;
  left: 6%;
  z-index: 2;
  font-family: var(--font-en);
  font-style: italic;
  font-size: clamp(100px, 14vw, 200px);
  line-height: 1;
  color: color-mix(in srgb, var(--color-white) 72%, transparent);
  pointer-events: none;
}
.mn-hero__copy { position: absolute; left: 9%; bottom: 56px; z-index: 2; color: var(--color-white); }
.mn-hero__copy h1 {
  font-size: var(--page-title-size);
  font-weight: var(--page-title-weight);
  letter-spacing: var(--page-title-ls);
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.35);
}
.mn-hero__sub { margin-top: 10px; font-family: var(--font-en); font-style: italic; font-size: 16px; letter-spacing: 0.14em; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); }

/* 詩的メッセージ（アーチ写真＋短い行） */
.poem {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 88px;
  align-items: start;
}
.poem__fig { margin-top: 24px; }
.poem__line { font-size: 15px; line-height: 2.4; margin-bottom: 2.2em; }
.mn-name { font-size: 24px; font-weight: 500; letter-spacing: 0.14em; margin-bottom: 32px; }
.mn-name span { display: block; margin-top: 8px; font-size: 12px; letter-spacing: 0.08em; color: var(--color-text-light); }

/* 透かし数字の特徴カード */
.numcards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.numcard { position: relative; }
.numcard__img img, .numcard__img .ph { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; }
.numcard__num {
  position: absolute;
  top: 96px;
  right: 8px;
  z-index: 2;
  font-family: var(--font-en);
  font-size: 96px;
  line-height: 1;
  color: color-mix(in srgb, var(--color-white) 82%, transparent);
  pointer-events: none;
}
.numcard__title { margin-top: 20px; font-size: 17px; font-weight: 500; letter-spacing: 0.1em; margin-bottom: 10px; }
.numcard__text { font-size: 13.5px; }

/* 「〜したい」カード */
.wishes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.wish {
  display: flex;
  align-items: center;
  min-height: 96px;
  padding: 20px 26px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  transition: border-color 0.25s;
}
.wish:hover { border-color: var(--color-main); opacity: 1; }

/* 空間ギャラリー */
.space { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.space__item img, .space__item .ph { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.space__item figcaption { margin-top: 10px; font-size: 12px; letter-spacing: 0.1em; color: var(--color-text-light); }

/* メニュー詳細（アーチ写真＋テキスト） */
.mn-menu {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 72px;
  align-items: center;
  padding-block: 56px;
  border-bottom: 1px solid var(--color-border);
}
.mn-menu:last-of-type { border-bottom: 0; }
.mn-menu--rev .mn-menu__fig { order: 2; }
.mn-menu__en { font-family: var(--font-en); font-style: italic; font-size: 19px; letter-spacing: 0.12em; color: var(--color-ink); margin-bottom: 6px; }
.mn-menu__name { font-size: 22px; font-weight: 500; letter-spacing: 0.12em; margin-bottom: 10px; }
.mn-menu__spec { font-size: 14px; color: var(--color-ink); margin-bottom: 16px; }
.mn-menu__text { font-size: 14px; margin-bottom: 18px; }
.mn-menu__targets { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 12.5px; color: var(--color-text-nav); }
.mn-menu__targets li { position: relative; padding-left: 14px; }
.mn-menu__targets li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.75em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-main);
}

/* --------------------------------------------------------------------------
   12-l. 診療内容（pillボタンの並び）
   実測：pill 304×42 / radius 30px / 濃色地 / 白文字 / 16px
   -------------------------------------------------------------------------- */
.pill-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 実測は 304px 固定幅だったが、メニュー名が長いと2行に折れてピルが崩れる
     （2026-07-17 指摘）。文字量に合わせた可変幅＋改行禁止に変更 */
  width: auto;
  min-width: 180px;
  padding-inline: 32px;
  white-space: nowrap;
  height: 42px;              /* 実測 42px */
  font-size: 15px;
  letter-spacing: 0.05em;
  color: var(--color-white);
  background: var(--color-fill);
  border-radius: 30px;       /* 実測 30px */
  transition: background var(--transition);
}
.pill:hover { background: var(--color-fill-2); opacity: 1; }

/* メニューページ内のアンカーナビ。
   メニューが増えるほど「まず全体像、次に目的の1つへ」が要る。
   ページ内リンクなので scroll-behavior: smooth（html側）が効く。 */
.menu-nav { margin-bottom: 80px; }
.menu-nav .pill { position: relative; padding-right: 34px; }
.menu-nav .pill::after {
  content: "";
  position: absolute;
  right: 20px;
  width: 6px; height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);   /* 下向きの「⌄」＝この先にある */
}

/* アンカーで飛んだとき、見出しがビューポート最上端に貼り付かないようにする */
.menu-item { scroll-margin-top: 32px; }

/* --------------------------------------------------------------------------
   13. ブログ
   -------------------------------------------------------------------------- */
.post-list { border-top: 1px solid var(--color-border); }
.post {
  display: grid;
  grid-template-columns: 140px 110px 1fr;
  gap: 24px;
  align-items: center;
  padding: 22px 8px;
  border-bottom: 1px solid var(--color-border);
}
.post__cat {
  justify-self: start;
  padding: 3px 14px;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--color-white);
  background: var(--color-fill);
  border-radius: 2px;
}
.post__date { font-family: var(--font-en); font-size: 13px; color: var(--color-text-light); }
.post__title { font-size: 14px; }

/* ページネーション */
.pager { display: flex; justify-content: center; gap: 8px; margin-top: 56px; }
.pager a, .pager span {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  font-family: var(--font-en);
  font-size: 13px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.pager .is-current { color: var(--color-white); background: var(--color-fill); border-color: var(--color-main); }

/* --------------------------------------------------------------------------
   14. アクセス／フッター
   -------------------------------------------------------------------------- */
/* 2026-07-18：地図の高さは右カラム（情報）の高さに揃える（stretch＋height:100%） */
.access-map { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: stretch; }
.access-map iframe { width: 100%; height: 100%; min-height: 380px; border: 0; filter: grayscale(0.2); }
.access-info { display: flex; flex-direction: column; gap: 24px; }
.access-info__logo img { width: auto; height: 54px; }
.access-info__address { font-size: 14px; }

/* --------------------------------------------------------------------------
   14-b. 地図＋営業時間ブロック（実測：フッター直前に全ページ共通で入る）
   -------------------------------------------------------------------------- */
.access-block { padding-block: var(--section-gap); }
.access-block__inner {
  display: grid;
  grid-template-columns: 541px 1fr;   /* 実測：地図 541px */
  gap: 56px;
  align-items: stretch;   /* 2026-07-18：地図の高さを右カラムに追従させる */
}
/* 2026-07-18：地図の高さは右カラムの高さに揃える */
.access-block__map { height: 100%; }
.access-block__map iframe {
  width: 100%;
  height: 100%;
  min-height: 380px;
  border: 0;
}
.access-block__info { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
/* 右カラムの院情報リスト（2026-07-18：「右カラムが寂しい」指摘で追加。
   電話CTA廃止後に営業時間表とボタンだけになっていた） */
.access-block__list { width: 100%; border-top: 1px solid var(--color-border); }
.access-block__list > div {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 16px;
  padding: 11px 4px;
  font-size: 13.5px;
  border-bottom: 1px solid var(--color-border);
}
.access-block__list dt { font-weight: 700; color: var(--color-ink); }
.access-block__list dd { color: var(--color-text); }

.hours__note { font-size: 12px; color: var(--color-text-light); }

.access-block__tel { margin-top: 8px; }
.access-block__tel-label { font-size: 15px; margin-bottom: 6px; }
.access-block__tel-num {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 32px;
  font-weight: 500;
  color: var(--color-ink);
  line-height: 1.2;
}
.access-block__tel-num svg { width: 26px; height: 26px; fill: currentColor; }
.access-block__tel-hours { margin-top: 8px; font-size: 14px; color: var(--color-text-nav); }

/* 幅広ボタン（ネット予約） */
.btn--wide { width: 100%; max-width: 400px; }
.btn svg, .more svg { width: 18px; height: 18px; fill: currentColor; }

/* --------------------------------------------------------------------------
   14-c. フッター（実測：メインカラーのベタ帯）
   -------------------------------------------------------------------------- */
/* 【ブラッシュアップ】
   本家はメインカラーのベタ塗り＋白パネルに嵌めたロゴだった。
   ・彩度の高い緑を全幅で敷くと目に痛く、コンテンツより主張してしまう
   ・白パネルは「ロゴを貼り付けた」ように見え、作りが安く見える
   → 暗色ベースに変え、ロゴは白抜き（filter）で地に馴染ませる。 */
.footer {
  padding-block: 64px 28px;
  background: var(--color-footer);
  color: var(--color-footer-text);
}
.footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  padding-bottom: 40px;
  margin-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
/* 白パネルをやめ、ロゴ自体を白抜きにする */
.footer__logo img {
  width: auto;
  height: 76px;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
.footer__brand-note {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.9;
  color: var(--color-footer-muted);
}

/* フッターナビは白抜き。区切りの斜線は暗背景で目立ちすぎるので消す */
.nav--footer .nav__en { color: var(--color-footer-text); }
.nav--footer .nav__jp { color: var(--color-footer-muted); }
.nav--footer .nav__item + .nav__item::before { display: none; }
.nav--footer .nav__link { padding: 6px 26px; }   /* 2026-07-18：項目間を広げて押しやすく */
.nav--footer .nav__link:hover .nav__en { color: var(--color-white); }

.footer__cta { display: flex; justify-content: center; gap: 20px; margin-bottom: 40px; }
.btn--ghost {
  width: 260px;
  color: var(--color-footer-text);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.btn--ghost:hover {
  background: var(--color-white);
  color: var(--color-footer);
  border-color: var(--color-white);
}

.footer__copy {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-align: center;
  color: var(--color-footer-muted);
}

/* --------------------------------------------------------------------------
   15. レスポンシブ
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .header__logo img { height: 62px; }
  .nav__link { padding: 4px 14px; }
  .menu-item__head { grid-template-columns: 340px 1fr; gap: 32px; }
}

@media (max-width: 900px) {
  :root { --section-gap: 72px; }

  .hamburger { display: block; }

  .header__inner { padding: 12px 16px; }
  .header__logo img { height: 52px; }   /* 文字入りCTAと共存できる高さ（375px画面対策） */
  .header__right { flex-direction: row; align-items: center; gap: 8px; }
  /* 2026-07-18：font-size:0 のアイコンだけボタンをやめて、
     文字入りの小さなピル型に（全テンプレート共通） */
  .header__cta a {
    min-width: 0;
    padding: 8px 14px;
    gap: 6px;
    font-size: 11px;
    letter-spacing: 0.04em;
    border-radius: 999px;
  }
  .header__cta svg { width: 20px; height: 20px; }

  /* SPナビ：ドロワー（2026-07-18 デザイン見直し。
     ・×ボタンを内蔵：ヘッダーのハンバーガーはスクロールで画面外に出るため、
       それだけに頼ると閉じられなくなる（実際になっていた）
     ・項目間を罫線＋大きめのタップ領域に
     ・最下部にWeb予約のCTA */
  /* 2026-07-18：縦中央寄せだと画面の高さ次第で上に大きな空白が出る、
     左右余白も広すぎるとの指摘 → 上寄せ（×ボタンの下から開始）＋左右5%に変更 */
  .nav {
    position: fixed;
    top: 0;
    bottom: 0;   /* 高さはdvh指定ではなく上下ピン留め。dvhが実画面より短い環境で
                    下端に隙間ができ、フッターナビが透けて見えた（2026-07-18） */
    left: 0;
    /* inset:0 だと環境によって fixed の基準がビューポートより広く取られ、
       右側が見切れることがあった（DevToolsエミュレーションで実際に発生）。
       幅はビューポート単位で明示する */
    width: 100vw;
    width: 100dvw;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 110;   /* stickyヘッダー（z:100）より上に。ドロワーが下に潜ると×が隠れる */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 28px;
    padding: 84px 5% 32px;
    background: var(--color-bg);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
  }
  .nav.is-open { opacity: 1; visibility: visible; }
  /* 閉じるボタンは .nav 基準の absolute ではなく viewport 基準の fixed に。
     （DevToolsのデバイスエミュレーション等でスクロールバー幅ぶん右へずれ、
       半分見切れる現象があった） */
  .nav__close {
    display: grid;
    place-items: center;
    position: fixed;
    top: 14px;
    right: 14px;
    width: 44px;
    height: 44px;
    font-size: 26px;
    line-height: 1;
    color: var(--color-ink);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 50%;
  }
  /* ドロワーが開いている間はヘッダーのハンバーガー（×化）を消して、
     閉じる操作を .nav__close に一本化（同じ角に×が2つ出ていた） */
  .hamburger.is-open { opacity: 0; pointer-events: none; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav__item + .nav__item::before { display: none; }
  .nav__item { border-bottom: 1px solid var(--color-border); }
  .nav__item:first-child { border-top: 1px solid var(--color-border); }
  .nav__link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 8px;
  }
  .nav__en { font-size: 16px; }
  .nav__jp { font-size: 12px; }
  .nav__drawer-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    font-size: 14px;
    letter-spacing: 0.08em;
    color: var(--color-white);
    background: var(--color-fill);
    border-radius: var(--btn-radius);
  }

  /* 2026-07-18：PC用の gap:12px が残って下端バーのボタン間に隙間が出ていた。
     SPは隙間なしで並べ、境目は白の細線で示す */
  .side-cta { top: auto; bottom: 0; left: 0; right: 0; flex-direction: row; transform: none; gap: 0; }
  .side-cta__item { flex: 1; display: flex; align-items: center; justify-content: center; writing-mode: horizontal-tb; padding: 14px; border-radius: 0; }
  .side-cta__item + .side-cta__item { border-left: 1px solid color-mix(in srgb, var(--color-white) 30%, transparent); }
  .side-cta__item::after { display: none; }

  .hero { height: 60vh; }
  .hero__copy { left: 8%; font-size: 22px; }

  /* スライダーの矢印はSPでは下端の右へ逃がす。
     PCは copy が left:12%、矢印が left:24px で当たらないが、
     SPは copy が left:8%（390px画面で31px）まで寄る一方、矢印は 24px〜64px。
     縦組みキャッチの左端の列と正面衝突して、文字の上に矢印が乗る。
     矢印を消すと自動送りを止める手段がなくなるので、位置だけ変える。 */
  .hero__arrow { top: auto; bottom: 14px; transform: none; }
  .hero__arrow--prev { left: auto; right: 68px; }
  .hero__arrow--next { right: 16px; }

  .page-hero { height: 240px; }
  .page-hero__title { font-size: 36px; }

  .block, .block--reverse .block__img { grid-template-columns: 1fr; gap: 24px; order: 0; }
  .block--vertical .block__body { writing-mode: horizontal-tb; max-height: none; gap: 20px; }

  .menu-item__head { grid-template-columns: 1fr; gap: 24px; }
  .menu-table th { width: 108px; }
  .menu-table th, .menu-table td { padding: 14px 4px; font-size: 13px; }

  .info-table th, .info-table td { display: block; width: 100%; }
  .info-table th { padding-bottom: 4px; border-bottom: 0; color: var(--color-ink); }

  .post { grid-template-columns: 90px 1fr; gap: 8px 16px; }
  .post__title { grid-column: 1 / -1; }

  .points { grid-template-columns: 1fr; gap: 48px; }
  .point__img { width: min(100%, 200px); }
  /* 症状カード：SPは縦積み。2枚目の左右反転も解除 */
  .symptom,
  .symptom + .symptom { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
  .symptom + .symptom .symptom__fig { order: 0; }
  .symptom__fig { width: min(100%, 200px); margin-inline: auto; }
  /* FAQ・流れの脇写真：SPは本文の上に1枚。sticky も解除 */
  .aside-split,
  .aside-split--rev { grid-template-columns: 1fr; gap: 32px; }
  .aside-split__fig { position: static; width: min(100%, 320px); margin-inline: auto; }
  .aside-split--rev .aside-split__fig { order: -1; }
  .aside-split__fig > img, .aside-split__fig > .ph { aspect-ratio: 4 / 3; }
  /* 道順：SPは1列 */
  .route-steps { grid-template-columns: 1fr; gap: 40px; }
  .section-lead { margin-bottom: 36px; text-align: left; }
  .flow__item { grid-template-columns: 48px 1fr; gap: 20px; padding-bottom: 32px; }
  .flow__num { width: 48px; height: 48px; font-size: 16px; }
  .flow__item:not(:last-child)::before { left: 23px; top: 48px; }
  .cta__tel { font-size: 24px; }
  .faq__q { padding: 18px 40px 18px 4px; font-size: 14px; }
  .faq__a { padding: 0 40px 22px 4px; }

  .access-map { grid-template-columns: 1fr; gap: 32px; }
  .access-map iframe { height: 280px; }

  /* 地図＋営業時間ブロック */
  .access-block__inner { grid-template-columns: 1fr; gap: 32px; }
  .access-block__map iframe { height: 280px; }
  .access-block__tel-num { font-size: 26px; }
  .btn--wide { max-width: none; }

  /* TOPの実測レイアウト */
  .split { flex-direction: column; gap: 24px; }
  .split--reverse .split__img { order: 0; }
  .split__img, .split--reverse .split__img { flex: 1 1 auto; }
  .split__img img { width: 100%; height: auto; }
  .split--reverse .split__img img { height: auto; }
  .split__body { padding-top: 0; }

  /* ------------------------------------------------------------------
     円形マスクのSP対応（ここを消すとスマホが壊れる）

     1. `.split__img.circle-fig { flex: 0 0 460px }` は詳細度 0-2-0。
        すぐ上の `.split__img { flex: 1 1 auto }` は 0-1-0 で負けるため、
        メディアクエリの中に書いても効かず、460px のまま残る。
        → 390px の画面で横スクロールが出る。クラス2つで書いて詳細度を合わせる。
     2. 1カラムになると円が画面幅いっぱい（≒366px）まで膨らみ、
        円1つでファーストビューが埋まる。上限を決めて中央に置く。
     ------------------------------------------------------------------ */
  .split__img.circle-fig { flex: 0 0 auto; width: min(100%, 320px); margin-inline: auto; }
  .reason__img.circle-fig { width: min(100%, 240px); margin-inline: auto; }
  .doctor__img.circle-fig { width: min(100%, 260px); margin-inline: auto; }

  .col-6, .col-3 { width: 100%; }
  .menu2 { gap: 16px; }
  .menu2__img { flex: 0 0 140px; }
  .menu2__img img { width: 140px; height: 210px; }

  /* ブログ一覧カード：SPは2カラム。サムネが主役なので1カラムまでは落とさない */
  .blog-cards { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
  .blog-card__title { font-size: 14px; }

  /* 【02】サイドバー型ヒーロー：SPでは1カラムに。
     順序は「ビジュアル → 院の情報」にする。スマホで最初に画面を埋めるのは
     写真であるべきで、いきなり診療時間表が出るとサイトの印象が決まらない。 */
  .side-hero { grid-template-columns: 1fr; gap: 28px; padding: 24px 16px 40px; }
  /* SPではキャッチカードを写真の下端に少し食い込ませた静的配置に戻す。
     PCの「左へはみ出す」は画面が狭いと成立しないため */
  .side-hero__main { order: -1; min-height: 0; padding-top: 0; display: flex; flex-direction: column; }
  .side-hero__copy { font-size: 24px; }
  .side-hero__sub { font-size: 11px; }
  .side-hero__slides { position: static; aspect-ratio: 4 / 3; }
  .side-hero__copy-card {
    position: static;
    max-width: none;
    margin: -36px 12px 0;   /* 写真に少し重ねる */
    padding: 20px 22px;
  }
  .side-hero__logo img { width: 180px; }
  /* チップは1列のまま。全幅のタップ領域のほうが押しやすい */
  .tile { font-size: 12px; }
  .tile__icon { width: 24px; height: 24px; }
  /* 院内ギャラリー */
  .gallery-marquee { padding-block: 8px 48px; }
  .gallery-marquee__item img, .gallery-marquee__item .ph { height: 160px; }

  /* 2026-07-18：背景の水彩の円（bloom）はSPでは非表示。
     1カラムに畳んだレイアウトでは円の位置が本文に重なって「ずれて見える」ため */
  .bloom { display: none; }

  /* 2026-07-18：PCで左寄せデザインのブロック（コンセプト・施術者紹介・当院について等）は、
     SPで縦積みになったときテキストは左寄せのまま、MOREボタンだけ中央に置く（全テンプレート共通） */
  .split__body .more,
  .more-wrap .more,
  .doctor__body .more,
  .block__body .more {
    display: flex;
    margin-inline: auto;
  }

  /* 【03】手紙型ヒーロー：SPはイラストを消して手紙だけにする。
     浮かせたまま縮めると本文に重なり、静的配置にすると手紙の前に割り込むため */
  .letter-hero { padding: 64px 20px 56px; }
  .letter-hero__title { font-size: 24px; margin-bottom: 32px; }
  /* 中央組み＋<br>の固定改行はSPでは行が不揃いに割れるので、左組み・自然折返しに */
  .letter-hero__text { text-align: left; line-height: 2.2; }
  .letter-hero__text br { display: none; }
  .letter-hero__illust { display: none; }

  /* 【03】世代カード・お知らせパネル */
  .family-cards { grid-template-columns: 1fr; gap: 24px; }
  .news-panel { padding: 40px 20px; }
  .selfcare { grid-template-columns: 1fr; gap: 28px; padding: 36px 24px; }
  .selfcare__illust { width: min(60%, 240px); margin-inline: auto; }
  .selfcare__links .btn { width: 100%; }

  /* 【02下層】（2026-07-17） */
  .philosophy { grid-template-columns: 1fr; gap: 32px; }
  .philosophy__img { width: min(100%, 280px); margin-inline: auto; }
  .med-section__grid { grid-template-columns: 1fr; gap: 20px; }
  .med-section__bar { flex-wrap: wrap; gap: 6px 16px; padding: 12px 16px; }
  .med-section__meta { flex-direction: column; gap: 6px; }
  .disease-box { padding: 18px 16px; }
  .disease-box__list { flex-direction: column; gap: 8px; }
  .feature-row,
  .feature-row:has(.feature-row__img) { grid-template-columns: 40px 1fr; gap: 16px; }
  .feature-row__num { width: 40px; height: 40px; font-size: 15px; }
  .feature-row__img { grid-row: auto; grid-column: 2; width: min(100%, 220px); }
  .staff-cards { grid-template-columns: 1fr; gap: 20px; }
  .staff-card { grid-template-columns: 96px 1fr; padding: 20px; gap: 16px; }
  .check-box { padding: 24px 16px; }
  .symptom__list--cols { columns: 1; }
  .route-steps--two { grid-template-columns: 1fr; }

  /* 【03下層】（2026-07-17） */
  .letter-hero--page { padding: 48px 20px 24px; }
  .letter-hero--page .letter-hero__title { font-size: 21px; }
  .price-cards { grid-template-columns: 1fr; gap: 20px; }
  .stile-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .stile { padding: 20px 10px 18px; }
  .tool-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .flow-tracks { grid-template-columns: 1fr; gap: 20px; }
  .essay { grid-template-columns: 1fr; gap: 28px; }
  .essay__fig { position: static; width: min(70%, 280px); margin-inline: auto; }
  .essay__para { line-height: 2.1; }
  /* 【04】（2026-07-18） */
  .kd-cards { grid-template-columns: 1fr; gap: 44px; }
  .worries { grid-template-columns: 1fr; gap: 36px; }
  .steps { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .promises { grid-template-columns: 1fr; gap: 20px; }
  .sym-groups { grid-template-columns: 1fr; gap: 20px; }
  .machines { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .sp-hero__img img, .sp-hero__img .ph { height: 420px; }
  .sp-hero__copy { bottom: 32px; }
  .sp-hero__copy h1 { font-size: 26px; }
  .tri--tl { border-top-width: 70px; border-right-width: 70px; }
  .tri--br { border-bottom-width: 70px; border-left-width: 70px; }

  /* 【05】（2026-07-18） */
  .poem { grid-template-columns: 1fr; gap: 40px; }
  .poem__fig { width: min(70%, 300px); margin-inline: auto; }
  .poem__line { line-height: 2.2; margin-bottom: 1.8em; }
  .numcards { grid-template-columns: 1fr; gap: 36px; }
  .numcard__num { font-size: 72px; top: auto; bottom: 48px; }
  .wishes { grid-template-columns: 1fr; gap: 12px; }
  .wish { min-height: 0; }
  .space { grid-template-columns: 1fr; gap: 24px; }
  .mn-menu { grid-template-columns: 1fr; gap: 28px; padding-block: 40px; }
  .mn-menu--rev .mn-menu__fig { order: 0; }
  .mn-menu__fig { width: min(70%, 280px); margin-inline: auto; }
  .mn-hero { padding: 16px 0 0; }
  .mn-hero__img img, .mn-hero__img .ph { height: 60vh; }
  .mn-hero__wm { font-size: 80px; }
  .mn-hero__copy h1 { font-size: 22px; }
  .wm { font-size: 88px; }

  /* 日誌カード：SPはサムネを上に */
  .diary-entry { grid-template-columns: 1fr; gap: 16px; padding: 24px 20px; }
  .diary-entry__thumb { width: min(50%, 180px); }
  /* 料金：SPは縦積み。金額は左寄せに戻す */
  .price-row { grid-template-columns: 1fr; gap: 4px; }
  .price-row__amount { text-align: left; }
  .price-row__price strong { font-size: 24px; }
  .ways { grid-template-columns: 1fr; gap: 20px; }

  /* ステートメント帯（背景画像） */
  .statement { min-height: 340px; padding: 64px 20px; }
  .statement__title { font-size: 22px; letter-spacing: 0.16em; margin-bottom: 24px; }
  .statement__text { font-size: 14px; line-height: 2; }

  /* TOPのお知らせ：縦組みをやめて横組みの見出しに戻す。
     SPは横幅が足りず、縦組みラベルを置くと本文の幅を食うため。 */
  .news { grid-template-columns: 1fr; gap: 28px; }
  .news__head { flex-direction: column; align-items: center; gap: 6px; }
  .news__title { writing-mode: horizontal-tb; letter-spacing: var(--heading-ls); }
  .news__link { grid-template-columns: 64px 1fr; gap: 16px; padding: 18px 4px; }
  .news__thumb { width: 64px; }
  .news__meta { gap: 10px; }
  .news__headline { font-size: 14px; }

  /* ブラッシュアップで追加したコンポーネント */
  .menu-grid { grid-template-columns: 1fr; gap: 24px; }
  .reasons { grid-template-columns: 1fr; gap: 40px; }
  .assure { grid-template-columns: 1fr; }
  .doctor { grid-template-columns: 1fr; gap: 28px; padding: 28px; }
  .doctor__img img { aspect-ratio: 4 / 3; }
  .doctor__name { font-size: 22px; }
  .doctor__name span { display: block; margin-left: 0; }
  .cat-filter { gap: 8px; margin-bottom: 32px; }
  .cat-filter a { padding: 6px 16px; font-size: 12px; }

  /* フッター（2026-07-18 デザイン見直し：ロゴとサブテキストは中央揃え、
     ナビは2列グリッド＋罫線＋大きめタップ領域に） */
  .footer__top { flex-direction: column; align-items: center; text-align: center; gap: 36px; }
  /* ロゴは <a> の箱の幅に関わらず、中の img 自体を中央に置く
     （a がインラインだと前後の空白ぶん img が左に寄って見える環境があった） */
  .footer__logo { display: block; width: 100%; }
  .footer__logo img { display: block; margin-inline: auto; }
  .footer__brand-note { text-align: center; }
  .footer__cta { flex-direction: column; justify-content: stretch; }
  .btn--ghost { width: 100%; }
  .nav--footer {
    position: static;
    opacity: 1;
    visibility: visible;
    display: block;
    background: transparent;
    width: 100%;
    /* ⚠️ ドロワー用 .nav の padding / width / height を必ず打ち消すこと。
       ここを忘れるとフッターナビの上下に巨大な謎の余白が出る（実際に出た） */
    padding: 0;
    gap: 0;
    height: auto;
    bottom: auto;
    overflow: visible;
    /* ⚠️ z-index も必ず打ち消す。親（.footer__top）が flex のため、
       static でも z-index が効いてしまい（flexアイテムの仕様）、
       ドロワーの上にフッターナビが透けて描画された（実際に起きた） */
    z-index: auto;
  }
  /* ドロワーが開いている間は背面ページのスクロールを禁止（JSに加えてCSSでも保険） */
  html:has(.nav.is-open) { overflow: hidden; }
  .nav--footer .nav__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    width: 100%;
  }
  .nav--footer .nav__item { border-bottom: 1px solid color-mix(in srgb, var(--color-white) 16%, transparent); }
  .nav--footer .nav__item:first-child { border-top: 0; }
  .nav--footer .nav__item:nth-child(-n+2) { border-top: 1px solid color-mix(in srgb, var(--color-white) 16%, transparent); }
  .nav--footer .nav__item:nth-child(odd) { border-right: 1px solid color-mix(in srgb, var(--color-white) 16%, transparent); }
  /* タップ領域は大きく（高さ約56px）。文字も一回り大きく */
  .nav--footer .nav__link { justify-content: center; align-items: baseline; gap: 10px; padding: 18px 8px; }
  .nav--footer .nav__en { font-size: 15px; }
  .nav--footer .nav__jp { font-size: 12px; }

  body { padding-bottom: 52px; } /* SP追従CTA分の余白 */
}

/* ==========================================================================
   テンプレート02：街の鍼灸院（machi）

   ターゲット：地域密着型。肩こり・腰痛・整体。幅広い年齢層。
   軸：「分かりやすさ」。診療時間と電話と予約が、常に目に入るところにある。

   参照元：c-morinosato.com（クリニック杜の里）
   ------------------------------------------------------------------
   ⚠️ 参照元は他社が制作した他社サイトです。**複製ではありません。**
   取ったのは骨格・型・余白・数値（getComputedStyle で実測）。
   取っていないのは、配色・ロゴ・原稿・写真・固有のイラスト。

   配色を取らないのは権利の話だけが理由ではありません。配色はヒアリングシートで
   顧客が3色選ぶ変数なので、テンプレートに固定色を持たせる設計自体に反します。
   ------------------------------------------------------------------

   01 Evergreen との差分（同じ base.css の上で、変数だけで別物にしている）：

     項目          01 Evergreen        02 街の鍼灸院
     ------------------------------------------------------------
     書体          游明朝（和・静か）    Zen Kaku Gothic New（角ゴ・親しみ）
     本文          17px / 1.9 / 0.06em  16px / 1.8 / normal
     コンテナ       1130px              1240px
     角丸          5px                 10px
     見出しの順序    英字 → 日本語        日本語 → 英字（★上下が逆）
     見出しサイズ    24px                30px
     ボタン         230×56              151×50
     写真          円形マスク＋水彩       角丸の矩形
     ヒーロー       全幅スライダー        左サイドバー固定＋右ビジュアル
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------
     カラー：ヒアリングシートの「カラー3色選定」の受け皿。
     ここは顧客が選んだ色に差し替わる。下の値はデモ用の初期値でしかない。
     文字色・白文字の下地は base.css が color-mix で自動導出するので、
     ここには「生の3色」だけを置くこと（--color-ink 等をここで固定しない）。
     -------------------------------------------------------------------- */
  /* 2026-07-16：たかふみさんの指示で青に変更。
     参照元（杜の里）の実測は teal `#349F87` だったが、これは「参照元の色」であって
     テンプレートが持つべき色ではない。01 が緑なので、02 は青にして
     テンプレート同士の見分けもつくようにしている。
     顧客が3色を選べば、ここは丸ごと差し替わる。 */
  --color-main: #2f7fc4;   /* メインカラー */
  --color-sub: #e8f1f9;    /* サブカラー：淡い面（バッジ地・CTA帯） */
  --color-sub2: #1b5a90;   /* サブ2カラー：ホバー用（mainの暗色版） */

  --radius: 10px;          /* 実測：タイル・ボタン・写真すべて 10px */

  /* --------------------------------------------------------------------
     書体
     実測は Zen Kaku Gothic New（Google Fonts / SIL OFL・商用可）。
     01 は Webフォント不使用だが、02 は角ゴの丸みが世界観そのものなので読み込む。
     読み込みは build.py の SITES["webfont"] が出力する。
     -------------------------------------------------------------------- */
  --font-base: "Zen Kaku Gothic New", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, メイリオ, Meiryo, sans-serif;
  --font-en: "Roboto Condensed", "Zen Kaku Gothic New", sans-serif;  /* 実測：英数字だけ別書体 */
  --font-size-base: 16px;        /* 実測 16px */
  --line-height-base: 1.8;       /* 実測 28.8px / 16px */
  --letter-spacing-base: normal; /* 実測 normal */

  /* レイアウト（実測） */
  --container: 1240px;           /* 実測 1240px */
  --container-wide: 1720px;      /* 実測：ヒーロー内側 1720px */

  /* 見出し（実測：日本語 30px 緑 ＋ 英字 14px 暗色）
     01 とは色もサイズも順序も違う。順序は build.py 側で .heading-block--flip を付けて反転する */
  --label-size: 14px;            /* 実測 14px */
  --heading-size: 30px;          /* 実測 30px */
  --heading-weight: 700;
  --heading-ls: 0.05em;          /* 実測 1.5px / 30px */

  --page-title-size: 46px;       /* 実測：キャッチ 46px */
  --page-title-weight: 700;      /* 実測 700 */
  --page-title-ls: 0.05em;       /* 実測 2.3px / 46px */

  /* ボタン（実測 151×50 / radius 10px / 14px） */
  --btn-w: 200px;                /* 実測151pxはサイドバー内の寸法。本文中のボタンは広く取る */
  --btn-h: 50px;                 /* 実測 50px */
  --btn-size: 14px;              /* 実測 14px */
  --btn-radius: var(--radius);   /* 実測 10px */

  --badge-size: 88px;
  --table-label-w: 150px;
  --table-font: 15px;
}

/* ==========================================================================
   【02固有】ドロワー・フッター（2026-07-18 CSS分離時に確定）
   02は「分かりやすさ・タイル」の世界観。ドロワーはTOPの症状タイルと同じ
   白いカード型に、フッターナビも角丸カードにする。
   ========================================================================== */
@media (max-width: 900px) {
  .nav:not(.nav--footer) { padding-top: 76px; gap: 20px; }
  .nav:not(.nav--footer) .nav__list { gap: 10px; }
  .nav:not(.nav--footer) .nav__item { border: 0; }
  .nav:not(.nav--footer) .nav__item:first-child { border: 0; }
  .nav:not(.nav--footer) .nav__link {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 16px 18px;
  }
  .nav:not(.nav--footer) .nav__link:active { border-color: var(--color-main); }

  .nav--footer .nav__list { gap: 10px; }
  .nav--footer .nav__item,
  .nav--footer .nav__item:nth-child(-n+2),
  .nav--footer .nav__item:nth-child(odd) { border: 0; }
  .nav--footer .nav__link {
    background: color-mix(in srgb, var(--color-white) 9%, transparent);
    border-radius: var(--radius);
  }
}

/* --------------------------------------------------------------------------
   アクセスブロックの院名ロゴ（2026-07-18 指示：もっと大きく、SPでは中央揃え）
   -------------------------------------------------------------------------- */
.access-info__logo img { height: 80px; }
@media (max-width: 900px) {
  .access-info__logo { width: 100%; }
  .access-info__logo img { display: block; margin-inline: auto; height: 72px; }
}

/* ==========================================================================
   【02固有】ヘッダー・フッター（2026-07-18 共通ビルダー解体。杜の里踏襲）
   ========================================================================== */
/* ヘッダー：白地・日本語のみのナビ */
.header--machi .nav__jp { font-size: 15px; font-weight: 500; color: var(--color-text); }
.header--machi .nav__link:hover .nav__jp { color: var(--color-ink); }
.header--machi .nav__item + .nav__item::before { display: none; }
.header--machi .nav__link { padding: 8px 18px; }

/* フッター：情報フッター（院名・住所・時間表・予約・ナビ・地図） */
.footer--machi { background: var(--color-footer); }
.fm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; margin-bottom: 40px; }
.fm-depts { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 16px 0 14px; font-size: 12px; color: var(--color-footer-muted); }
.fm-depts li + li::before { content: "｜"; margin: 0 6px; opacity: 0.5; }
.fm-addr { font-size: 13px; line-height: 2; color: var(--color-footer-text); }
.fm-hours .hours { max-width: none; }
.fm-hours .hours__note { color: var(--color-footer-muted); }
.fm-btns { display: flex; gap: 12px; margin-top: 18px; }
.fm-btns .btn { width: auto; min-width: 170px; }
.fm-btns .btn:not(.btn--fill) { color: var(--color-footer-text); border-color: var(--color-footer-muted); }
.footer--machi .nav--footer { position: static; opacity: 1; visibility: visible; margin: 0 0 28px; }
.footer--machi .nav--footer .nav__jp { font-size: 13px; color: var(--color-footer-text); }
.fm-map iframe { width: 100%; height: 220px; border: 0; display: block; margin-bottom: 28px; filter: grayscale(0.3); }

@media (max-width: 900px) {
  .fm-grid { grid-template-columns: 1fr; gap: 28px; }
  .fm-btns { flex-direction: column; }
  .fm-btns .btn { width: 100%; }
}

/* ==========================================================================
   【02固有】2026-07-18 総点検の調整
   ========================================================================== */
/* ヒーローのタイル：4枚（お悩み→施術内容の実在アンカーへ）。ラベル2段組み */
.tile__label { display: block; }
.tile__label em {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: var(--color-ink);
  margin-top: 2px;
}
.tile { padding: 13px 30px 13px 14px; }

/* 当院について「特徴」：縦長画像すぎてテキスト下に余白が出ていた →
   横位置4:3・上揃えをやめて中央揃えに */
.feature-row,
.feature-row:has(.feature-row__img) { align-items: center; }
.feature-row__img { width: 280px; grid-row: auto; align-self: center; }
.feature-row__img img, .feature-row__img .ph { aspect-ratio: 4 / 3; }

/* フッターの予約ボタン：塗り色がフッター背景と近くて埋もれていた →
   白ベタ＋文字色で明確に浮かせる */
.footer--machi .fm-btns .btn--fill {
  background: var(--color-white);
  color: var(--color-ink);
  border: 0;
}
.footer--machi .fm-btns .btn--fill:hover { background: var(--color-sub); opacity: 1; }

/* ==========================================================================
   【02固有】メインビジュアルの参照回帰（2026-07-18）
   - TOPはヘッダーのPCナビを出さない（サイドバーのタイルがナビ。参照元の型）
   - キャッチは写真の左上（参照元の位置。形は白カードのまま＝斜めカットは取らない）
   - スライダーは自動切り替え＋右端の縦ドット
   ========================================================================== */
/* ==========================================================================
   【02固有】2026-07-21 指示分
   ========================================================================== */

/* ① 右端の追随CTA（WEBで予約/LINEで予約）はPCでは出さない。
   ヘッダーに常時WEB予約ボタンがあるので重複（指示）。SPの下部バーは残す */
@media (min-width: 901px) {
  .side-cta { display: none; }
}
/* LINE予約ボタンは一旦非表示（2026-07-21 指示。復活させる時はこの1行を消す） */
.side-cta__item--sub { display: none; }

/* TOPの診療案内カード → menu.html#menu-N の着地点。sticky/fixedヘッダーに隠れない余白 */
.med-section, #flow { scroll-margin-top: 120px; }

/* ④ SPの各種レイアウト調整（2026-07-21 指示・スマホ実機確認より） */
@media (max-width: 900px) {
  /* 当院の特徴：PCの repeat(3, 300px) のままだと画面外にはみ出して
     1個しか見えない状態だった → 縦に3つ並べる */
  .pillars { grid-template-columns: 1fr; gap: 40px; }
  .pillar__img { max-width: 320px; margin-inline: auto; }

  /* about導入の「痛くなったら、すぐ来られる場所に。」は中央揃えのまま維持
     （共通SPルールが .section-lead を左揃えにするため、02のこの段落だけ戻す） */
  .section-lead:has(.feature-catch) { text-align: center; }

  /* 番号つきカード（当院の特徴）：番号を上・内容を下の縦並びに。番号も一回り大きく。
     2026-07-21 追指示：番号・タイトル・画像は中央揃え、本文とリストだけ左揃え
     （2行以上になるテキストは中央だと読みにくいため） */
  .feature-row,
  .feature-row:has(.feature-row__img) { grid-template-columns: 1fr; gap: 14px; }
  .feature-row__num { width: 48px; height: 48px; font-size: 18px; margin-inline: auto; }
  .feature-row__title { text-align: center; }
  .feature-row__img { grid-column: auto; margin-inline: auto; }
  .feature-row__text, .feature-row__body .symptom__list { text-align: left; }

  /* TOPのお知らせ見出し（お知らせ／NEWS）はSPでは中央揃え（2026-07-21 追指示）。
     TOPのお知らせは .news--flat なので、その左寄せ指定（1368行）より強い詳細度で上書きする */
  .news__head, .news--flat .news__head { align-items: center; text-align: center; }
  .news__head .heading-block { text-align: center; align-items: center; }

  /* スタッフカードも同様に縦並び（写真上・テキスト下） */
  .staff-card { grid-template-columns: 1fr; }
  .staff-card .staff-card__img { width: min(100%, 200px); margin-inline: auto; }
  .staff-card { text-align: center; }
  .staff-card .staff-card__name span { display: block; }

  /* アクセスページの「ご予約はこちら」はSPでは中央に
     （greetings下部などの .access-info を使う箇所も同じ扱い）。
     ※基底 .btn は幅200px固定・左右padding 0 の設計なので、width:fit-content にすると
       文字幅まで潰れて小さくなる（2026-07-21 指摘）。幅とflexは基底のまま、
       margin-inline:auto で中央に置くだけにする */
  .access-info .btn,
  .access-block .btn { display: flex; margin-inline: auto; }
  /* inline-flexのままだと margin:auto が効かないので block-level の flex にする。
     幅は基底の var(--btn-w) がそのまま生きる（＝サイズは他のボタンと同一） */
}

/* ② ヘッダーはロゴ＋ナビ＋WEB予約の1行（参照元と同じ並び。ボタンはナビの右隣）。
   旧：ボタンがナビの上の2段組だった */
@media (min-width: 901px) {
  .header--machi .header__right { flex-direction: row; align-items: center; gap: 28px; }
  .header--machi .header__right .nav { order: 1; margin-right: 0; }
  .header--machi .header__cta { order: 2; }
}

/* ③ 下層ページヘッダー（page-hero--machi）：参照元 /about/ の実測踏襲。
   パンくず右上12px、左に日本語ページ名40px/700（メインカラー）＋英字14px。
   写真は指示（2026-07-21「下層は背景画像を入れる」）により残し、
   地色のベール（.page-hero::before を継承）で「地の上に緑の見出し」の見えを作る */
.page-hero--machi {
  display: block;
  /* 基底 .page-hero の place-items:center が display:block でも
     子の中央寄せ・shrink-wrap として効き続ける（Chromeのブロックレイアウト整列）。
     明示的に解除しないと子の幅が内容分まで潰れる（実測でハマった） */
  place-items: normal;
  height: 360px;
}
.page-hero--machi .page-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-wide);
  height: 100%;
  margin-inline: auto;
  padding: 0 24px;
}
.page-hero--machi .page-hero__bc {
  position: absolute;
  top: 28px;
  right: 24px;
  display: flex;
  align-items: center;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--color-text-nav);
}
.page-hero--machi .page-hero__bc a { color: inherit; }
.page-hero--machi .page-hero__bc li + li::before { content: "—"; margin: 0 10px; opacity: 0.6; }
.page-hero--machi .page-hero__text {
  position: absolute;
  left: 24px;
  bottom: 72px;
}
.page-hero--machi .page-hero__jp {
  font-size: 40px;                       /* 実測 40px / 700 / ls 2px */
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-ink);
}
.page-hero--machi .page-hero__en {
  margin-top: 10px;
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-text);
}
/* パンくずはヒーロー内（右上）に移したので、直後の従来パンくず帯は出さない */
.page-hero--machi + .breadcrumb { display: none; }
@media (max-width: 900px) {
  .page-hero--machi { height: 210px; }
  .page-hero--machi .page-hero__bc { top: 14px; right: 16px; }
  .page-hero--machi .page-hero__text { left: 16px; bottom: 32px; }
  .page-hero--machi .page-hero__jp { font-size: 26px; }
  .page-hero--machi .page-hero__en { margin-top: 6px; font-size: 12px; }
}

/* TOPのヘッダーは「静止時は無し・スクロールで出現」（参照元実測 .gHeader-scrolled：
   fixed＋opacity/visibility 0.4s のフェードイン。ロゴ＋ナビ＋WEB予約を全部載せる）。
   静止時のロゴはサイドバー上部（.side-hero__logo）が担う。
   SPは常時表示に戻す：静止時にハンバーガーまで消えるとメニューを開けなくなる */
.header--machi-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s, visibility 0.4s;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}
.header--machi-fixed.is-scrolled {
  opacity: 1;
  visibility: visible;
}
@media (max-width: 900px) {
  .header--machi-fixed {
    position: sticky;
    opacity: 1;
    visibility: visible;
    transition: none;
    box-shadow: none;
  }
}
/* サイドバー上部のロゴ（TOPの静止時はこれが唯一のロゴ） */
.side-hero__logo { margin-bottom: 22px; }
@media (max-width: 900px) {
  /* SPはヘッダーが常時表示でロゴを持つため、サイドバー側は出さない（二重になる） */
  .side-hero__logo { display: none; }
}

/* 参照元のキャッチは写真左上に大きく載る。カードは残しつつ文字を一段大きく */
.side-hero__copy-card { top: 40px; bottom: auto; }
@media (min-width: 901px) {
  .side-hero__copy { font-size: 38px; line-height: 1.45; }
  .side-hero__copy-card { padding: 30px 40px; }
}
.side-hero__dots {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.side-hero__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-white) 65%, transparent);
  cursor: pointer;
}
.side-hero__dot.is-active { background: var(--color-white); }

@media (max-width: 900px) {
  .side-hero__copy-card { margin: -36px 12px 0; }   /* SPは従来どおり写真下に重ねる */
  /* SPは写真が static 配置になり、絶対配置のドットはカードに重なるため出さない。
     スライダー自体は自動で切り替わり続ける */
  .side-hero__dots { display: none; }
}

/* ==========================================================================
   【02固有】ブログ詳細ページ（blog-detail.html）2026-07-21 指示で追加
   参照元（杜の里）のnews詳細と同じテキスト中心の実務的な記事。
   ========================================================================== */
.article {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 44px 48px;
}
.article__meta { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--color-text-nav); }
.article__cat {
  padding: 2px 14px;
  font-size: 12px;
  color: var(--color-ink);
  background: color-mix(in srgb, var(--color-sub) 18%, var(--color-white));
  border-radius: 999px;
}
.article__title {
  margin-top: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--color-border);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--color-ink);
}
.article__lead { margin-top: 22px; font-size: 15px; line-height: 2.1; }
.article__subhead {
  margin: 38px 0 14px;
  padding: 8px 0 8px 14px;
  border-left: 4px solid var(--color-sub);
  background: color-mix(in srgb, var(--color-sub) 8%, var(--color-white));
  font-size: 17px;
  font-weight: 700;
  color: var(--color-ink);
}
.article__para { font-size: 14px; line-height: 2.1; }
.article__para + .article__para { margin-top: 14px; }
.article__note { margin-top: 30px; font-size: 12px; color: var(--color-text-nav); }
.article__sign { margin-top: 16px; text-align: right; font-size: 13px; color: var(--color-ink); }
@media (max-width: 900px) {
  .article { padding: 22px 16px; }
  .article__title { font-size: 19px; }
  .article__subhead { font-size: 15px; }
}


/* --------------------------------------------------------------------------
   【02固有】ブログ詳細の2カラム化（2026-07-21 指示：サイドバー＋サムネイル。
   デザインは02専用。01のサイドバーとはクラス名が同じでも別実装＝このファイルだけが正）
   PC＝本文＋右サイドバー300px／SPは縦並び（本文→サイドバー）
   -------------------------------------------------------------------------- */
.article-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  align-items: start;
}
.side-widget {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 22px;
}
.side-widget + .side-widget { margin-top: 20px; }
.side-widget__title {
  padding: 8px 0 8px 12px;
  margin-bottom: 14px;
  border-left: 4px solid var(--color-sub);
  background: color-mix(in srgb, var(--color-sub) 8%, var(--color-white));
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-ink);
}
.side-widget__cats li + li,
.side-widget__archive li + li { border-top: 1px solid var(--color-border); }
.side-widget__cats a,
.side-widget__archive a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 2px;
  font-size: 13px;
  color: var(--color-text);
}
.side-widget__cats a:hover,
.side-widget__archive a:hover { color: var(--color-ink); }
.side-widget__cats a span {
  min-width: 26px;
  text-align: center;
  font-size: 11px;
  color: var(--color-white);
  background: var(--color-fill);
  border-radius: 999px;
}
.side-widget__recent li + li { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-border); }
.side-widget__recent a { display: flex; gap: 12px; align-items: flex-start; }
.side-widget__thumb { flex: 0 0 72px; width: 72px; }
.side-widget__thumb img, .side-widget__thumb .ph { width: 72px; height: 54px; object-fit: cover; border-radius: var(--radius); }
.side-widget__recent time { font-size: 11px; color: var(--color-text-nav); }
.side-widget__recent p { margin-top: 2px; font-size: 12px; line-height: 1.7; color: var(--color-text); }
.side-widget__recent a:hover p { color: var(--color-ink); }
.side-widget--hours .hours { width: 100%; }
.side-widget--hours .hours th, .side-widget--hours .hours td { font-size: 11px; padding: 6px 2px; }
.side-widget__note { margin-top: 10px; font-size: 11px; line-height: 1.8; color: var(--color-text-nav); }
.side-widget--cta { text-align: center; background: color-mix(in srgb, var(--color-sub) 10%, var(--color-white)); }
.side-widget__cta-text { margin-bottom: 14px; font-size: 13px; line-height: 1.9; font-weight: 700; color: var(--color-ink); }
.side-widget--cta .btn { width: 100%; }
@media (max-width: 900px) {
  .article-layout { grid-template-columns: 1fr; gap: 28px; }
}

/* 「お知らせの一覧へもどる」等の .more：基底が幅200px固定・左右padding 0 のため、
   文字数の多い日本語ラベルだと窮屈に見える（2026-07-21 指摘）。
   幅は文字に合わせて可変にし、左右にきちんと余白を取る */
.section-more .more {
  width: auto;
  min-width: var(--btn-w);
  padding-left: 40px;
  padding-right: 40px;
}

/* よくある質問の開閉アニメーション補助（2026-07-21 指示「ヌルっと」）。
   高さとフェードは共通JS（main.js）が Web Animations API で行う。
   ここではアニメーション中に中身がはみ出さないようにするだけ */
.faq__item .faq__a { overflow: hidden; }
.faq__item summary { transition: color 0.25s ease; }