/* ==========================================================================
   整体院カラダらくに — 共通スタイル
   デザイン方針: 過度な演出を避け、見やすさ・表示速度を最優先(CLAUDE.md参照)
   2026-08-05: ヒーロー部分のみ、集客実績のある競合(整体院楽-GAKU-)のフォント
   の太さ・縁取り・サイズ感を参考に強めた(院長の明示的な指示)。--font-display参照。
   ========================================================================== */

:root {
  --color-brown: #a06e64;
  --color-brown-dark: #7c544b;
  --color-brown-light: #f3e9e5;
  --color-mint: #6eb4aa;
  --color-mint-dark: #4f8f86;
  --color-mint-light: #eaf5f3;
  --color-bg: #faf6f1;
  --color-surface: #ffffff;
  --color-text: #3a2e28;
  --color-text-muted: #6b5f58;
  --color-border: #e8ded4;
  --color-accent-warm: #c85a45;
  --color-accent-teal: #16887a;
  --radius: 14px;
  --shadow: 0 4px 20px rgba(122, 90, 70, 0.08);
  --max-width: 1080px;
  --font: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Yu Gothic Medium", "Noto Sans JP", Meiryo, sans-serif;
  --font-display: "M PLUS Rounded 1c", var(--font);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.75;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--color-brown-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.5; margin: 0 0 0.6em; font-weight: 700; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.4em; }
li { margin-bottom: 0.4em; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- ヘッダー ---------- */
/* ---------- 上部の案内バー（2026-08-07 追加）----------
   専門領域とアクセス・営業時間を最初の1行で伝える。GAKUの上部バナーの型。 */
.topbar {
  background: #ffffff;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.82rem;
  line-height: 1.5;
}

.topbar__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.topbar__lead { margin: 0; font-weight: 700; color: var(--color-text); }
.topbar__sep { color: var(--color-border); margin: 0 6px; }
.topbar__hours { margin: 0; color: #6b6b6b; white-space: nowrap; }
.topbar__gap { display: inline-block; width: 1.4em; }

@media (max-width: 900px) {
  .topbar__hours { display: none; }
  .topbar__inner { padding: 7px 16px; justify-content: center; }
  .topbar__lead { font-size: 0.72rem; text-align: center; }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 246, 241, 0.95);
  backdrop-filter: saturate(180%) blur(6px);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.brand {
  display: flex;
  align-items: center;
  flex: none;
}
.brand:hover { text-decoration: none; }
.brand__img { height: 46px; width: auto; display: block; flex: none; }

/* 2026-08-15: 画像ロゴに再変更。2026-08-07に「モバイルで縮小されすぎて
   バッジが読めない」ため一度テキストに戻した経緯があり、今回はモバイル時の
   表示の高さをPCより大きく確保することで再発を防ぐ(build_brand.py参照)。 */
@media (max-width: 640px) {
  .brand__img { height: 58px; }
}

.nav {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  justify-content: center;
}

.nav a {
  color: var(--color-text);
  font-size: 0.86rem;
  white-space: nowrap;
}
.nav a:hover { color: var(--color-brown-dark); text-decoration: none; }

.nav__dropdown { position: relative; }
.nav__dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 8px;
  min-width: 180px;
}
.nav__dropdown:hover .nav__dropdown-menu,
.nav__dropdown:focus-within .nav__dropdown-menu { display: block; }
.nav__dropdown-menu a {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 0.88rem;
}
.nav__dropdown-menu a:hover { background: var(--color-mint-light); text-decoration: none; }

.header-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.header-cta__btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.8rem;
  color: #fff;
  white-space: nowrap;
}
.header-cta__btn:hover { text-decoration: none; opacity: 0.9; }
.header-cta__btn--book { background: var(--color-mint); }
.header-cta__btn--line { background: #06C755; }
.header-cta__btn--tel { background: var(--color-brown); }

.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--color-mint);
  color: #fff;
  font-weight: 700;
  font-size: 0.92rem;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.btn:hover { background: var(--color-mint-dark); text-decoration: none; transform: translateY(-1px); }
.btn--outline {
  background: transparent;
  border: 1.5px solid var(--color-brown);
  color: var(--color-brown-dark);
}
.btn--outline:hover { background: var(--color-brown-light); }
.btn--small { padding: 8px 16px; font-size: 0.85rem; }
.btn--line { background: #06C755; }
.btn--line:hover { background: #05a648; }
.btn--block { display: block; width: 100%; text-align: center; }

/* ---------- クイックCTA(画像バナーボタン。文字は画像に焼き込み済み・build_cta.py) ---------- */
.quick-cta {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}
.quick-cta__item {
  display: block;
  flex: 0 1 190px;
  min-width: 150px;
  max-width: 200px;
  transition: transform 0.15s ease;
}
.quick-cta__item:hover { text-decoration: none; transform: translateY(-3px); }
.quick-cta__item picture,
.quick-cta__item img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 560px) {
  /* 🔴 2026-08-13、スマホでは非表示にした（院長の指示）。
     画面下部に固定の「電話／予約／LINE予約」バー(.floating-cta)が常時出ているため、
     ページ内にも同じ3ボタンを置くと重複し、スクロール量が伸びて離脱につながる。
     PC・タブレットには固定バーが無いので、そちらは従来どおり表示する。
     ★ボタン自体は消していない（display:noneのみ）。戻したくなったらここを外す。 */
  .quick-cta { display: none; }

  /* 以下は表示に戻したときのための設定（横長版の画像に自動で切り替わり縦積みになる）。
     画像に影のにじみ用の透過マージンがあるため gap0＋マイナスmarginで詰めている */
  .quick-cta { flex-direction: column; align-items: stretch; gap: 0; }
  .quick-cta__item { max-width: none; min-width: 0; }
  .quick-cta__item + .quick-cta__item { margin-top: -26px; }
}

/* ---------- お問い合わせページ: 電話/LINE大型バナー ---------- */
.contact-banners {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 28px;
}
.contact-banners__item {
  display: block;
  transition: transform 0.15s ease;
}
.contact-banners__item img {
  display: block;
  width: 100%;
  height: auto;
}
.contact-banners__item:hover { transform: translateY(-3px); }

/* ---------- 電話の注記（留守番電話のご案内・2026-08-17 院長の指示） ----------
   電話バナー(.contact-banners)と予約3ボタン(.quick-cta / .cta-band__actions)の
   下に同じ一文を置く。文言はどのページでも共通。 */
/* 幅は「1文が1行に収まる」ように決めている（最長29文字＝約400px）。
   広げると文の途中で折れて「折り返／しご連絡」のように1文字が行頭に落ちる。 */
.tel-note {
  max-width: 560px;
  margin: 12px auto 0;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  text-align: center;
}
/* スマホ用の追い込み改行。PCでは無効にして1文1行のままにする */
.tel-note__br-sp { display: none; }
/* 電話バナーとLINEバナーの間に挟まるので、上下の間隔は詰める */
.contact-banners .tel-note { margin: 2px auto 6px; }
/* CTA帯（濃い背景）の中では文字色を明るくする */
.cta-band .tel-note { color: #eafaf6; }

@media (max-width: 560px) {
  /* 予約3ボタン(.quick-cta)はスマホで非表示にしているため、その下の注記も一緒に隠す */
  .tel-note--cta { display: none; }
  /* ページ末尾の「バナーだけの帯」は中身が全部消えるので、帯ごと隠して空白を残さない
     （2026-08-20、アクセスページのCTA帯をバナー化したときに追加） */
  section.cta-tail { display: none; }
  /* 狭い画面では1文も入りきらないので、意味の切れ目でもう一段折る */
  .tel-note__br-sp { display: inline; }
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 44px;
  height: 44px;
  background: var(--color-brown-dark);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  padding: 6px;
  flex: none;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 1px;
  background: #fff;
  margin: 3px 0;
  transition: 0.2s;
}

/* ---------- フローティングCTA(モバイル) ---------- */
.floating-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 16px rgba(122,90,70,0.12);
}
.floating-cta__inner {
  display: flex;
}
.floating-cta a {
  flex: 1;
  text-align: center;
  padding: 13px 6px;
  font-weight: 700;
  font-size: 0.85rem;
}
.floating-cta a:hover { text-decoration: none; }
.floating-cta .tel-link { background: var(--color-brown); color: #fff; }
.floating-cta .book-link { background: var(--color-mint); color: #fff; }
.floating-cta .line-link { background: #06C755; color: #fff; }

/* ---------- 上部案内バナー（画像1枚版・2026-08-06） ---------- */
.hero-topbar {
  line-height: 0;
}
.hero-topbar__img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- ヒーロー（画像1枚版・2026-08-06） ---------- */
.hero-ad {
  background: var(--color-brown-light);
  line-height: 0;
}
.hero-ad__img {
  width: 100%;
  height: auto;
  display: block;
}
/* ★2026-08-17、院長の指示。上部バーの営業時間(.topbar__hours)は900px以下で非表示に
   なっており、スマホだと営業時間・定休が分からなかった。ヒーロー画像の直下に同じ内容を
   出す（PCは上部バーに出ているので非表示にして重複を避ける）。 */
.hero-ad__hours { display: none; }
@media (max-width: 900px) {
  .hero-ad__hours {
    display: block;
    margin: 0;
    padding: 10px 16px;
    background: #ffffff;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.7;
    text-align: center;
  }
  /* 1行に詰め込むと読みにくいので「営業時間」と「不定休・完全予約制」で改行する */
  .hero-ad__hours .hero-ad__hours-br { display: block; }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- ヒーロー旧版（写真は等身大のまま・左右分割） ---------- */
.hero-v2 {
  background: var(--color-brown-light);
}
.hero-v2__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 540px;
}
.hero-v2__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 50px 32px 50px 20px;
  max-width: 640px;
  margin-left: auto;
}
.hero-v2__media {
  position: relative;
  overflow: hidden;
}
.hero-v2__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  display: block;
}
.hero-v2__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}
.hero-v2__tags a {
  display: inline-block;
  background: #fff;
  border: 1.5px solid var(--color-brown);
  color: var(--color-brown-dark);
  font-size: 1rem;
  font-weight: 700;
  padding: 8px 20px;
  border-radius: 999px;
}
.hero-v2__tags a:hover { background: var(--color-brown-light); text-decoration: none; }
.hero-v2__eyebrow {
  color: var(--color-mint-dark);
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 10px;
}
.hero-v2__proof {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 4px;
  width: fit-content;
  background: var(--color-mint-light);
  color: var(--color-mint-dark);
  font-weight: 700;
  font-size: 1.05rem;
  padding: 9px 22px 9px 20px;
  border-radius: 999px;
  margin: 0 0 22px;
}
.hero-v2__proof::after {
  content: "";
  position: absolute;
  left: 28px;
  bottom: -7px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 8px solid var(--color-mint-light);
}
.hero-v2__proof-num {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--color-accent-teal);
  line-height: 1;
  -webkit-text-stroke: 2.5px #fff;
  paint-order: stroke fill;
}
.hero-v2 h1 {
  font-family: var(--font-display);
  color: var(--color-text);
  font-size: 3rem;
  font-weight: 900;
  line-height: 1.5;
  margin: 0 0 26px;
}
.hero-v2__pain {
  color: var(--color-accent-warm);
  -webkit-text-stroke: 2px #fff;
  paint-order: stroke fill;
}
.hero-v2__highlight {
  display: inline-block;
  color: var(--color-accent-teal);
  font-size: 1.25em;
  -webkit-text-stroke: 3px #fff;
  paint-order: stroke fill;
}
.hero-v2__badges {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.hero-v2__badges li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  flex: 1 1 170px;
  background: #fff;
  border: 2px solid var(--color-brown);
  border-radius: 14px;
  padding: 14px 10px;
  box-shadow: 0 4px 12px rgba(58,46,40,0.10);
}
.hero-v2__badges-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-mint-light);
  font-size: 1.4rem;
  line-height: 1;
}
.hero-v2__badges-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.35;
}
.hero-v2__badges-text strong {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-brown-dark);
}
.hero-v2__badges-text span {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-weight: 700;
}
.hero-v2__proof-line {
  margin: 16px 0 0;
  font-weight: 700;
  color: var(--color-brown-dark);
  font-size: 1rem;
}

.page-hero {
  background: linear-gradient(180deg, var(--color-brown-light), var(--color-bg));
  padding: 44px 0 30px;
  text-align: center;
}
.page-hero h1 { font-size: 1.7rem; }
.page-hero p { color: var(--color-text-muted); max-width: 640px; margin: 0 auto; }

/* ---------- セクション共通 ---------- */
section { padding: 46px 0; }
section.tight { padding: 30px 0; }
.section-title {
  font-size: 1.75rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 30px;
  letter-spacing: 0.01em;
}
.section-title small {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--color-mint-dark);
  margin-bottom: 8px;
}
@media (max-width: 560px) {
  .section-title { font-size: 1.45rem; }
}

/* ---------- アクセス誘導リンク(トップ・簡易版) ---------- */
.access-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-mint-dark);
  padding: 10px 22px;
  border: 1.5px solid var(--color-mint);
  border-radius: 999px;
  transition: background 0.15s ease, transform 0.15s ease;
}
.access-link:hover {
  background: var(--color-mint-light);
  text-decoration: none;
  transform: translateY(-1px);
}
.access-link .arrow { font-weight: 700; }
.bg-surface { background: var(--color-surface); }
.bg-mint-light { background: var(--color-mint-light); }

/* ---------- カード / グリッド ---------- */
.grid {
  display: grid;
  gap: 20px;
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px;
}
.card h3 { color: var(--color-brown-dark); font-size: 1.05rem; }

.feature-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* 写真は本文ブロックと同程度の高さにし、"読ませるより見せる"バランスにする */
.feature-card__image {
  width: 100%;
  height: 168px;
  object-fit: cover;
  flex: none;
}
/* 縦長写真(人物のバストアップ等)で顔が切れないよう上寄せする */
.feature-card__image--top { object-position: center 12%; }
.feature-card__body { padding: 20px 22px 22px; }
.feature-card h3 {
  font-size: 1rem;
  color: var(--color-brown-dark);
  display: flex;
  align-items: center;
  gap: 8px;
}
.feature-card p { color: var(--color-text-muted); font-size: 0.92rem; margin: 0; }

.symptom-link-card {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px 22px;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.symptom-link-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  text-decoration: none;
}
.symptom-link-card h3 { margin: 0 0 6px; color: var(--color-text); font-size: 1.02rem; }
.symptom-link-card p { margin: 0; color: var(--color-text-muted); font-size: 0.88rem; }
.symptom-link-card .arrow { color: var(--color-mint-dark); font-weight: 700; }

/* ---------- お悩み症状カード（写真＋文字・2026-08-11） ----------
   トップの「こんなお悩みありませんか」で使った実写を、症状別リンクにも流用する。
   構造は .feature-card と同じ（写真168px + 本文）。 */
.symptom-photo-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.symptom-photo-card:hover {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
  transform: translateY(-2px);
  text-decoration: none;
}
.symptom-photo-card__image {
  width: 100%;
  height: 168px;
  object-fit: cover;
  flex: none;
}
/* 2026-08-12、矢印を外し中央揃えに変更(院長指示)。
   見出しはflex中央、本文もtext-align:centerで揃える。 */
.symptom-photo-card__body { padding: 20px 22px 22px; text-align: center; }
.symptom-photo-card__body h3 {
  margin: 0 0 6px;
  color: var(--color-text);
  font-size: 1.02rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.symptom-photo-card__body p { margin: 0; color: var(--color-text-muted); font-size: 0.88rem; }
.symptom-photo-card .arrow { color: var(--color-mint-dark); font-weight: 700; }

/* ---------- お悩みリスト ---------- */
.worry-list { list-style: none; padding: 0; margin: 0 0 1.5em; }
.worry-list li {
  position: relative;
  padding: 8px 0 8px 28px;
  border-bottom: 1px dashed var(--color-border);
  line-height: 1.5;
}
.worry-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-mint-dark);
  font-weight: 700;
}

/* ---------- お悩みカード(トップのみ・2026-08-07) ----------
   画像は build_worry.py で生成（640×440・文字入り）。
   旧 .worry-list--visual（丸写真62px）は下に残置。他ページで使う可能性があるため。 */
.worry-cards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.worry-cards picture { display: block; }
.worry-cards img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(122, 90, 70, 0.18);
}

@media (max-width: 720px) {
  /* 🔴 2026-08-13、1列→2列に変更（院長の指示）。
     1列だと1枚が大きく、4つ見るのに3スクロール必要で離脱の原因になっていた。
     2列にすると1枚の幅が半分になるため、画像はHTML側の<picture>で
     「正方形＋文字を大きくしたスマホ専用版(worry-card-sp-*)」に差し替えている。
     ★ここを1列に戻すなら、画像も横長版に戻すこと（セットで意味を持つ）。 */
  .worry-cards { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* --- 写真つきお悩みリスト(旧・未使用) ---
   MENU/流れ/特徴は「四角いカード」なので、ここは「丸」にして役割の違いを見た目で分ける。
   2列×2行で縦幅を抑え、1画面に収める。 */
.worry-list--visual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 28px;
}
.worry-list--visual li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  border-bottom: none;
}
.worry-list--visual li::before {
  position: static;
  flex: none;
  font-size: 0.95rem;
}
.worry-list--visual img {
  width: 62px;
  height: 62px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(122, 90, 70, 0.16);
}
.worry-list--visual span { font-size: 0.95rem; }

/* ---------- 番号つき原因/アプローチ解説 ---------- */
.reason-block {
  border-left: 3px solid var(--color-mint);
  padding: 4px 0 4px 20px;
  margin: 22px 0;
}
.reason-block h3 { font-size: 1.05rem; color: var(--color-brown-dark); }

/* 原因の説明に添える図解（2026-08-18追加）。
   作り直しは `python web/build_lp_figure.py`。
   スマホでは横幅の都合で図の文字が小さくなるため、画像自体をリンクにして
   押すと原寸で開くようにしている（口コミのスクショと同じ考え方）。 */
.reason-figure {
  display: block;
  margin: 14px 0 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #ffffff;
  transition: transform 0.2s ease;
}
.reason-figure:hover { transform: translateY(-2px); }
.reason-figure img { display: block; width: 100%; height: auto; }
.citation {
  display: block;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 10px;
}

.approach-list {
  background: var(--color-mint-light);
  border-radius: var(--radius);
  padding: 22px 26px;
}
.approach-list h3 { color: var(--color-mint-dark); }
/* 2026-08-15、各項目に説明文（strong+br+本文）を足したため、項目間に余白を入れて
   1項目ずつ読めるようにした。1行だけの箇条書きに戻す場合はこの2行を消してよい。 */
.approach-list li { margin-bottom: 12px; }
.approach-list li:last-child { margin-bottom: 0; }

/* ---------- セルフケア ---------- */
.selfcare {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 18px;
  background: var(--color-surface);
}
.selfcare h3 { font-size: 1rem; margin-bottom: 10px; }
.selfcare ul { margin-bottom: 0; }

.note-box {
  background: #fbf1e8;
  border: 1px solid #ecd9c4;
  border-radius: 10px;
  padding: 16px 20px;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 20px 0;
}
.note-box strong { color: var(--color-text); }

/* ---------- メニュー詳細カード(menu.html、写真つき) ---------- */
.menu-detail-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.menu-detail-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  background: var(--color-surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.menu-detail-card__image {
  width: 100%;
  height: 100%;
  min-height: 160px;
  object-fit: cover;
}
.menu-detail-card__body {
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* word-break:auto-phrase = 長いコース名がカタカナ語の途中で割れるのを防ぐ（未対応ブラウザは無視される） */
.menu-detail-card__body h3 { margin: 0 0 12px; font-size: 1.18rem; word-break: auto-phrase; }
.menu-detail-card__meta {
  display: flex;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
}
.menu-detail-card__meta .time { color: var(--color-text-muted); font-size: 0.92rem; }
.menu-detail-card__meta .price { font-size: 2rem; font-weight: 700; color: var(--color-brown-dark); line-height: 1.3; }
.menu-detail-card__meta .price .small { font-size: 0.9rem; font-weight: 500; color: var(--color-text-muted); }

@media (max-width: 640px) {
  .menu-detail-card { grid-template-columns: 1fr; }
  .menu-detail-card__image { aspect-ratio: 16 / 9; min-height: 0; }
  .menu-detail-card__body { padding: 14px 18px 18px; }
}

/* ---------- CTA帯 ---------- */
.cta-band {
  text-align: center;
  background: var(--color-brown);
  color: #fff;
  padding: 40px 20px;
  border-radius: var(--radius);
}
.cta-band h2 { color: #fff; font-size: 1.3rem; }
.cta-band p { color: #f6ece8; }
.cta-band .btn { background: #fff; color: var(--color-brown-dark); }
.cta-band .btn:hover { background: var(--color-mint-light); }

/* ---------- MENUカード(写真付き) ---------- */
.menu-featured {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 18px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.menu-featured:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 26px rgba(122, 90, 70, 0.14);
  text-decoration: none;
}
/* 2026-08-16、トップはこのカード1枚だけになったので下の余白を切る。
   スマホ側の .menu-featured{margin-bottom:12px} より後勝ちさせるため2クラス指定。 */
.menu-featured.menu-featured--only { margin-bottom: 0; }
.menu-featured__image {
  width: 100%;
  aspect-ratio: 1080 / 420;
  height: auto;
  object-fit: cover;
}
.menu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.menu-grid--sub { grid-template-columns: repeat(3, 1fr); }
.menu-card {
  display: block;
  background: var(--color-surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.menu-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 26px rgba(122, 90, 70, 0.14);
  text-decoration: none;
}
.menu-card__image {
  width: 100%;
  aspect-ratio: 560 / 420;
  height: auto;
  object-fit: cover;
}
/* コース名のテキスト。PC・タブレットでは画像内の文字が読めるので出さない。
   スマホ(560px以下)だけ、画像が小さくなる代わりに表示する(2026-08-13) */
.menu-card__label { display: none; }

/* ---------- お客様の声(コラージュ) ---------- */
.voice-headline {
  display: block;
  width: 100%;
  max-width: 620px;
  height: auto;
  margin: 0 auto 24px;
}
.voice-collage {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
/* トップの声セクション。★2026-08-16、院長の指示で「見出しバナー(.voice-headline)＋
   写真コラージュ(.voice-collage)＋テキストリンク(.voice-more)」の3点を、
   1枚のバナー(build_voice_hero.py)に統合した。上の3つのルールはトップでは未使用。
   バナー全体が /voice.html へのリンクなので、押せると分かるよう hover で浮かせる。 */
.voice-hero-link {
  display: block;
  border-radius: var(--radius);
  transition: transform 0.2s ease;
}
.voice-hero-link:hover { transform: translateY(-3px); }
.voice-hero {
  display: block;
  width: 100%;
  height: auto;
}
/* 肩LPに貼るGoogle口コミのスクリーンショット（2026-08-17）。
   画像自体に白いカードと影が入っているので、こちら側では枠を足さない。 */
.lp-review-shot {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto 14px;
}
/* 声ページへの導線。文字リンクだと押せると気づかれないため、
   バナーと同じ質感のボタンにして指で押せる大きさを確保する(2026-08-12) */
.voice-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 999px;
  background: linear-gradient(180deg, #84cabf 0%, #34746c 100%);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(58, 46, 40, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.voice-more:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(58, 46, 40, 0.22);
  text-decoration: none;
  color: #fff;
}
.voice-more .arrow { color: #fff; flex-shrink: 0; }
@media (max-width: 560px) {
  /* 幅いっぱいに使い、折り返しても矢印が縦中央に来るようにする */
  .voice-more { display: flex; padding: 15px 20px; font-size: 0.98rem; text-align: left; }
}

/* ---------- 施術の流れ(Flow) ---------- */
.flow-grid {
  display: grid;
  /* 2026-08-13、STEP5「再評価」を新設して6ステップになったため5列→6列 */
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  background: var(--color-mint-light);
  border-radius: var(--radius);
  padding: 22px 18px;
}
.flow-step { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.flow-step picture { display: block; }
.flow-step__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.flow-step:hover .flow-step__image {
  transform: translateY(-3px);
  box-shadow: 0 8px 26px rgba(122, 90, 70, 0.14);
}

/* ---------- 料金テーブル ---------- */
.price-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.price-table th, .price-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.92rem;
}
.price-table th {
  background: var(--color-brown-light);
  color: var(--color-brown-dark);
  font-weight: 700;
}
.price-table tr:last-child td { border-bottom: none; }
.price-table .price { font-weight: 700; color: var(--color-brown-dark); white-space: nowrap; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- アクセス(情報＋地図の2カラム) ---------- */
.access-panel {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 30px;
  align-items: stretch;
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow);
}
.access-name {
  font-size: 1.2rem;
  text-align: center;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--color-brown-light);
}
.access-addr { text-align: center; line-height: 2; margin-bottom: 20px; }
.access-addr a { font-weight: 700; }

.access-points {
  background: var(--color-mint-light);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 22px;
}
.access-points h3 {
  font-size: 0.95rem;
  color: var(--color-mint-dark);
  text-align: center;
  margin-bottom: 10px;
}
.access-points ul { list-style: none; padding: 0; margin: 0; }
.access-points li {
  position: relative;
  padding-left: 24px;
  font-size: 0.9rem;
  margin-bottom: 6px;
}
.access-points li:last-child { margin-bottom: 0; }
.access-points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-mint-dark);
  font-weight: 700;
}

.hours-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.hours-table th, .hours-table td {
  border: 1px solid var(--color-border);
  padding: 9px 4px;
  text-align: center;
  font-size: 0.85rem;
}
.hours-table thead th {
  background: var(--color-brown-light);
  color: var(--color-brown-dark);
  font-weight: 700;
}
.hours-table tbody th {
  background: var(--color-bg);
  font-weight: 700;
  white-space: nowrap;
  padding-left: 10px;
  padding-right: 10px;
}
.hours-table td { color: var(--color-text-muted); }
.hours-table td.is-open { color: var(--color-mint-dark); font-weight: 700; }

.access-note {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin: 10px 0 0;
}

.access-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 22px;
}

/* 地図の下の道案内の注意（2026-08-25、院長の指示で赤文字にしてマップのある場所すべてに置いた）。
   ★カーナビが裏の細い道へ案内してしまうため、地図を見た直後に必ず目に入る位置に置く。
     文言は access.html の「ご来院にあたって」と同じものを使う（片方だけ直さないこと）。 */
.map-warn {
  color: #c0392b;
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.75;
  margin: 12px 0 0;
}

/* ★flex column にしているのは、地図の下に .map-warn を確実に置くため（2026-08-25）。
   前は iframe が height:100% で親の高さを丸ごと占めており、下に段落を足すと枠から
   はみ出して読めなかった。 */
.access-map {
  min-height: 380px;
  display: flex;
  flex-direction: column;
}
.access-map iframe {
  width: 100%;
  flex: 1 1 auto;
  min-height: 380px;
  border: 0;
  border-radius: 10px;
  display: block;
}

/* ---------- FAQ ---------- */
.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  padding: 16px 20px;
  font-weight: 700;
  list-style: none;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: "Q"; color: #fff; background: var(--color-mint); border-radius: 50%; width: 22px; height: 22px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; }
.faq-item[open] summary { border-bottom: 1px solid var(--color-border); }
.faq-item .faq-a { padding: 4px 20px 18px 52px; color: var(--color-text-muted); font-size: 0.94rem; }

/* ---------- ギャラリー ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.gallery-grid img, .gallery-grid .placeholder {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 10px;
}
.gallery-grid .placeholder {
  background: #ece3da;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 12px;
}
.gallery-caption { font-size: 0.85rem; color: var(--color-text-muted); text-align: center; margin-top: 6px; }

/* ---------- 声(testimonial) ---------- */
.voice-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 26px 28px;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
  position: relative;
}
.voice-card::before {
  content: "\201C";
  font-size: 3rem;
  color: var(--color-mint-light);
  position: absolute;
  top: 6px;
  left: 16px;
  line-height: 1;
}
.voice-card p { position: relative; z-index: 1; }
.voice-disclaimer { font-size: 0.78rem; color: var(--color-text-muted); }

/* ---------- Googleの口コミ画面をそのまま貼る（2026-08-17・院長の指示） ----------
   ★書き起こしのテキストで載せると「お店が自分で書いた文章」に見えてしまい、
     口コミの信用が伝わらない。実際のGoogleの画面（★の数・投稿時期・オーナー返信つき）を
     スクリーンショットのまま貼ること。文字を打ち直したカードに戻さない。
   ★元画像は static/images/reviews/。差し替えるときは同名で上書きすれば入れ替わる。
   ★スマホでは横幅の都合で文字が小さくなるため、画像自体をリンクにして
     タップすると原寸で開くようにしている（.review-shot は <a>）。 */
.review-shots {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
}
.review-shot {
  display: block;
  width: 100%;
  max-width: 800px;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.review-shot:hover { transform: translateY(-2px); }
.review-shot img { display: block; width: 100%; height: auto; }
/* 「押すと大きく表示されます」の注記。
   スマホでは口コミ画像の文字が縮んで小さくなるので、この注記が大きいと
   画像より目立ってしまう。あくまで添え書きの大きさに抑えること。 */
.review-shot__zoom {
  display: block;
  margin-top: 4px;
  font-size: 0.68rem;
  color: var(--color-text-muted);
  text-align: right;
  opacity: 0.7;
}
@media (max-width: 720px) {
  /* 画像を1pxでも広く見せたいので、カードの内側の余白を詰める */
  .review-shot { padding: 8px 8px 6px; }
  .review-shots { gap: 12px; }
}

/* ---------- 写真つきお客様の声（2026-08-15追加・掲載許諾済み） ---------- */
.voice-photo-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 20px;
  overflow: hidden;
}
.voice-photo-card img { width: 100%; height: auto; display: block; }
.voice-photo-card__body { padding: 16px 22px 20px; }
.voice-photo-card__tag {
  display: inline-block;
  font-size: 0.78rem;
  color: var(--color-mint-dark);
  font-weight: 700;
  margin-bottom: 4px;
}
/* ★2026-08-16、院長の指示でボードの文字を全文書き起こして載せるようにしたため、
   補足あつかい(0.85rem・薄い色)から、本文として読める大きさ・濃さに引き上げた。 */
.voice-photo-card__note {
  font-size: 0.98rem;
  line-height: 1.9;
  color: var(--color-text);
  margin: 0;
}
.voice-photo-card__signature {
  display: block;
  margin-top: 10px;
  font-size: 0.88rem;
  color: var(--color-text-muted);
  text-align: right;
}

/* ---------- フッター ---------- */
.site-footer {
  background: #efe6de;
  padding: 40px 0 24px;
  margin-top: 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.footer-brand img { width: 34px; height: 34px; }
.site-footer h4 { font-size: 0.85rem; color: var(--color-brown-dark); margin-bottom: 10px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 8px; font-size: 0.88rem; }
.site-footer a { color: var(--color-text); }
.footer-note { font-size: 0.78rem; color: var(--color-text-muted); border-top: 1px solid #ddccbd; padding-top: 16px; }
.copyright { font-size: 0.78rem; color: var(--color-text-muted); text-align: center; margin-top: 12px; }

/* ---------- ユーティリティ ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.muted { color: var(--color-text-muted); }
.small { font-size: 0.85rem; }
.stack > * + * { margin-top: 14px; }
.badge {
  display: inline-block;
  background: var(--color-mint-light);
  color: var(--color-mint-dark);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
/* 院長紹介(about.html)。2026-08-16、院長の指示で写真を半分に縮小。
   1fr 1fr だと写真が500×751pxになり、横の経歴が縦中央に浮いて余白だらけだった。
   写真を250pxに固定し、上端を揃えて本文と並べる。全体の幅も絞って行長を整える。 */
.owner-intro {
  grid-template-columns: 215px 1fr;
  gap: 32px;
  align-items: start;
  max-width: 880px;
  margin: 0 auto;
}
.owner-intro img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
/* 写真(215px幅＝高さ323px)と経歴ブロックの高さが揃うよう、行間を開けて調整している。
   文言や写真を変えたら高さがズレるので、そのときはこの数値も測り直すこと。 */
.owner-intro h3 { margin-top: 0; }
.owner-intro li { margin-bottom: 12px; }
.owner-intro ul { margin-bottom: 1.2em; }
.breadcrumb { font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 6px; }
.breadcrumb a { color: var(--color-text-muted); }

/* ---------- レスポンシブ ---------- */
@media (max-width: 860px) {
  .nav { display: none; }
  .header-cta { display: none; }
  .nav-toggle { display: flex; margin-left: auto; }
  .floating-cta { display: block; }
  body { padding-bottom: 58px; }
  .footer-grid { grid-template-columns: 1fr; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: 1fr; }
  /* 縦積みになると写真が横幅いっぱい(350px)に戻ってしまうので上限を付ける */
  .owner-intro { grid-template-columns: 1fr; gap: 18px; max-width: 480px; }
  .owner-intro img { max-width: 220px; }
  .hero-v2__inner { grid-template-columns: 1fr; min-height: 0; }
  .hero-v2__media { order: -1; aspect-ratio: 3 / 2; }
  .hero-v2__media img { object-position: center center; }
  .hero-v2__content { max-width: none; margin-left: 0; padding: 32px 20px; }
  .hero-v2 h1 { font-size: 2.1rem; }
  .menu-grid { grid-template-columns: repeat(2, 1fr); }
  .menu-grid--sub { grid-template-columns: repeat(3, 1fr); }
  .flow-grid { grid-template-columns: repeat(2, 1fr); padding: 24px 18px; }
  .feature-card__image { height: 150px; }
  .access-panel { grid-template-columns: 1fr; gap: 24px; padding: 24px 20px; }
  .access-map, .access-map iframe { min-height: 300px; }
}

@media (max-width: 560px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .page-hero h1, .hero h1 { font-size: 1.4rem; }
  section { padding: 34px 0; }
  .menu-grid { grid-template-columns: 1fr 1fr; }
  .worry-list--visual { grid-template-columns: 1fr; gap: 4px; }
  .worry-list--visual img { width: 56px; height: 56px; }
  .worry-list--visual span { font-size: 0.92rem; }

  /* ==========================================================================
     🔴 2026-08-13「1セクション＝1画面」への圧縮（院長の指示）
     スマホでスクロールが長すぎて離脱につながるため、主要セクションを
     おおむね1画面(≒660px)に収まる形に組み替えた。
     ★ここを触るときは web/mobile_test/preview.html で必ず見た目を確認すること。
     ========================================================================== */

  /* --- 施術の流れ: 上3つ・下3つ（6ステップ） --- */
  /* 1枚が約108px幅になるため、画像はHTML側の<picture>で
     「見出しだけを大きく入れたスマホ用(flow-step-sp-*)」に差し替えている */
  .flow-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px 12px; }

  /* --- SYMPTOMS: 写真が上・文字が下 → 「写真左・文字右」の帯型に --- */
  /* 縦積みのままだと1枚300px×3枚で1.6画面あった。帯型なら1枚約112px */
  .symptom-photo-card { flex-direction: row; align-items: stretch; }
  .symptom-photo-card__image { width: 112px; height: auto; min-height: 100px; }
  .symptom-photo-card__body {
    padding: 12px 14px;
    text-align: left;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .symptom-photo-card__body h3 { justify-content: flex-start; font-size: 1rem; margin-bottom: 4px; }
  .symptom-photo-card__body p { font-size: 0.78rem; line-height: 1.6; }

  /* --- 当院の特徴: 2列×3行・写真＋見出しだけ（説明文は非表示） --- */
  .feature-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .feature-grid .feature-card__image { height: 82px; }
  .feature-grid .feature-card__body { padding: 8px 9px 10px; }
  .feature-grid .feature-card h3 { font-size: 0.8rem; margin: 0; line-height: 1.4; }
  .feature-grid .feature-card p { display: none; }
  /* 特徴以外(.grid--3など)のカードは従来どおり本文を出す */
  .feature-card__image { height: 190px; }
  .feature-card__body { padding: 18px 18px 20px; }

  /* --- MENU: サブ3枚を横並び。画像の文字は潰れるのでテキストのコース名を出す --- */
  .menu-grid--sub { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .menu-featured { margin-bottom: 12px; }
  .menu-card__label {
    display: block;
    padding: 7px 6px 9px;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    color: var(--color-text);
  }

  /* --- ご来院(ACCESS): 住所・営業時間・地図を1画面で見渡せるように詰める --- */
  .access-section { padding: 24px 0; }
  .access-section .section-title { margin-bottom: 12px; }
  .access-section .small { font-size: 0.72rem; line-height: 1.6; }
  /* 地図の下の「経路を調べる」「初めての方へ」は行間だけ詰める（押しやすさは維持） */
  .access-section .text-center { margin-top: 10px !important; }
  .access-panel { padding: 14px 12px; gap: 12px; }
  .access-name { font-size: 1rem; margin-bottom: 5px; }
  .access-addr { font-size: 0.82rem; line-height: 1.6; margin-bottom: 9px; }
  /* 「ご来院しやすい環境です」の3項目は、見出しを外して横並びの短い行にする。
     縦積みの箇条書きだと157px使っており、地図と営業時間が画面から押し出されていた */
  .access-points { padding: 9px 12px; margin-bottom: 10px; }
  .access-points h3 { display: none; }
  .access-points ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1px 12px;
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: 1.5;
  }
  /* 🔴 通常時の li は position:relative＋padding-left:24px で ✓ を絶対配置している。
     横並びにするときは position を戻さないと行が重なって高さが倍増する（実際に発生した） */
  .access-points li { position: static; padding-left: 0; margin: 0; font-size: 0.75rem; }
  .access-points li::before { position: static; margin-right: 4px; }
  .hours-table th, .hours-table td { padding: 3px 2px; font-size: 0.68rem; }
  .access-note { font-size: 0.67rem; line-height: 1.5; margin: 1px 0; }
  .access-map, .access-map iframe { min-height: 160px; }

  /* 料金表: 列幅を固定しないと「内容」列が極端に狭くなり
     文字が縦に1文字ずつ折り返される（2026-08-02修正） */
  .price-table { table-layout: fixed; }
  .price-table th, .price-table td { padding: 10px 8px; font-size: 0.8rem; }
  .price-table th:nth-child(1), .price-table td:nth-child(1) { width: 23%; }
  .price-table th:nth-child(2), .price-table td:nth-child(2) { width: 37%; }
  .price-table th:nth-child(3), .price-table td:nth-child(3) { width: 14%; }
  .price-table th:nth-child(4), .price-table td:nth-child(4) { width: 26%; }
}

/* ---------- ブログ ---------- */
.blog-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  align-items: start;
}

/* 一覧ページ: カード形式のリスト */
.blog-list { display: flex; flex-direction: column; gap: 20px; }
.blog-list-item {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px;
}
.blog-list-item__thumb { border-radius: 10px; overflow: hidden; align-self: start; }
.blog-list-item__thumb img { width: 100%; height: 140px; object-fit: cover; }
.blog-list-item__body { min-width: 0; }
.blog-list-item__body h3 { margin: 4px 0 8px; }
.blog-list-item__body .badge { margin-bottom: 6px; }

/* 個別記事ページ */
.blog-article__img {
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  margin: 0 auto;
  max-height: 480px;
  width: auto;
  max-width: 100%;
}

/* 解剖図など「読ませる図」。写真と違い高さで縮めると図の中の文字が読めなくなるため、
   max-height をかけず本文の幅いっぱいに置く（2026-08-21・背中の記事の縦積み図で必要になった） */
.blog-article__figure {
  display: block;
  width: 100%;
  height: auto;
  margin: 24px auto;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

/* サイドバー(一覧・個別共通) */
.blog-sidebar { display: flex; flex-direction: column; gap: 20px; }
.blog-sidebar__block {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px;
}
.blog-sidebar__block h4 {
  font-size: 0.92rem;
  color: var(--color-brown-dark);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-mint-light);
}
.blog-sidebar__list { list-style: none; margin: 0; padding: 0; }
.blog-sidebar__list li { margin-bottom: 10px; }
.blog-sidebar__list li:last-child { margin-bottom: 0; }
.blog-sidebar__list a { display: block; font-size: 0.85rem; line-height: 1.5; }
.blog-sidebar__date { display: block; font-size: 0.72rem; color: var(--color-text-muted); }
.blog-sidebar__list--plain li { font-size: 0.85rem; color: var(--color-text); }

.blog-author-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px 20px;
  text-align: center;
}
.blog-author-card__photo {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 12%;
  margin: 0 auto 12px;
}
.blog-author-card__title { font-size: 0.75rem; color: var(--color-text-muted); margin: 0 0 4px; }
.blog-author-card__name { font-weight: 700; margin: 0 0 10px; }
.blog-author-card__kana { display: block; font-size: 0.72rem; font-weight: 400; color: var(--color-text-muted); margin-top: 2px; }
.blog-author-card__comment { font-size: 0.85rem; color: var(--color-text-muted); margin: 0 0 16px; line-height: 1.7; }

/* 記事本文の見出し(2026-08-15)
   SEO対応で記事にh2を入れ始めたため。ブラウザ既定のh2は大きすぎて
   ページ内の他の見出し(.section-title)と competing するのでここで整える。
   cta-band内のh2は従来どおりの見た目に戻す。 */
.blog-article h2 {
  font-size: 1.3rem;
  margin: 40px 0 14px;
  padding-left: 14px;
  border-left: 5px solid var(--color-mint);
}
.blog-article .cta-band h2 {
  font-size: 1.4rem;
  margin: 0 0 0.6em;
  padding-left: 0;
  border-left: none;
}
/* h2の中の小見出し（2026-09-19・肩甲骨の間の痛みの記事で初めて使った）。
   h2 の左の線と競わないよう、線は引かず色と太さだけで立てる */
.blog-article h3 {
  font-size: 1.08rem;
  margin: 28px 0 10px;
  color: var(--color-brown-dark);
}
.blog-article ul { margin-bottom: 1.4em; }
.blog-article li { line-height: 1.9; }

@media (max-width: 900px) {
  .blog-layout { grid-template-columns: 1fr; }
  .blog-sidebar { order: 2; }
}

@media (max-width: 560px) {
  .blog-list-item { grid-template-columns: 1fr; }
  .blog-list-item__thumb img { height: 180px; }
  .blog-article__img { max-height: 260px; }
  .blog-article h2 { font-size: 1.15rem; margin-top: 32px; }
}

/* ---------- モバイルナビ(開いた状態) ---------- */
.nav.is-open {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-surface);
  padding: 10px 20px 20px;
  border-bottom: 1px solid var(--color-border);
  gap: 4px;
}
.nav.is-open .nav__dropdown-menu {
  display: block;
  position: static;
  border: none;
  box-shadow: none;
  padding-left: 12px;
}
.nav.is-open a { padding: 10px 0; }

/* ==========================================================
   症状別LP（2026-08-13）
   templates/symptoms/*.html と templates/_partials/lp.html で使用。
   ========================================================== */

/* ---------- ①ファーストビュー（2026-08-14 全面改稿） ----------
   院長の指摘「縦に読むのに横に並べたら視線が割れる」を受け、左右2カラムを廃止して
   縦一本に変更。見出しは写真に焼き込み（Photoshop）、実績・バッジ・予約をその下に積む。
   バッジと数字の意匠はトップのヒーロー（build_hero.py の draw_badges）に合わせている。 */
.lp-crumb {
  background: var(--color-brown-light);
  padding: 9px 0;
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.lp-hero { padding: 0; }
.lp-hero__img { display: block; width: 100%; height: auto; }

.lp-proof {
  background: linear-gradient(180deg, var(--color-brown-light), var(--color-bg));
  padding: 32px 0 44px;
  text-align: center;
}
.lp-proof__eyebrow {
  display: inline-block;
  background: var(--color-brown);
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  border-radius: 999px;
  padding: 5px 18px;
  margin-bottom: 14px;
}
/* 実績の数字はトップのヒーロー（build_hero.py の draw_headline）と同じ意匠に揃える。
   ★丸ゴシック（--font-display）だと「かわいすぎる」と院長の指摘（2026-08-14）。
   トップは 游ゴシックBold＋ミント→ティールのグラデ＋白フチ。それをCSSで再現している。 */
.lp-proof__record {
  font-family: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  color: var(--color-text);
  font-size: 1.2rem;
  line-height: 1;
  margin-bottom: 22px;
}
.lp-proof__record strong {
  font-size: 4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 8px;
  background: linear-gradient(180deg, #6eb4aa 0%, #16887a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* 白フチ＋落ち影。drop-shadowは文字の形に沿うので、白を重ねると縁取りになる */
  filter:
    drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #fff)
    drop-shadow(0 3px 3px rgba(0, 0, 0, 0.22));
}
.lp-proof__record em { font-style: normal; font-size: 1.05rem; }
.lp-proof__lead {
  color: var(--color-text);
  line-height: 2;
  margin: 0 auto 28px;
  max-width: 720px;
  text-align: left;
}
.lp-proof__lead p { margin-bottom: 14px; }
.lp-proof__lead p:last-child { margin-bottom: 0; }
.lp-badges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 240px));
  justify-content: center;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0 auto 26px;
}
.lp-badges li {
  background: linear-gradient(180deg, #ffffff, #f7eee6);
  border: 2px solid var(--color-brown);
  border-radius: 12px;
  padding: 16px 10px 14px;
}
.lp-badges svg {
  width: 26px;
  height: 26px;
  color: var(--color-brown);
  display: block;
  margin: 0 auto 8px;
}
.lp-badges strong {
  display: block;
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.35;
}
.lp-badges span {
  display: block;
  font-size: 0.75rem;
  color: #787878;
  margin-top: 4px;
}
.lp-proof__price {
  color: var(--color-text-muted);
  margin-bottom: 22px;
}
.lp-proof__price strong { color: var(--color-accent-warm); font-size: 1.35rem; }
.lp-proof__price span { font-size: 0.88rem; }
.lp-proof .quick-cta { margin-top: 0; }

@media (max-width: 700px) {
  .lp-proof { padding: 26px 0 36px; }
  .lp-proof__record strong { font-size: 2.6rem; }
  .lp-proof__lead br { display: none; }
  /* 3段積みだと縦に伸びるので、アイコン左・文字右の横型に畳む */
  .lp-badges {
    grid-template-columns: 1fr;
    gap: 10px;
    max-width: 340px;
  }
  .lp-badges li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 12px;
    align-items: center;
    text-align: left;
    padding: 12px 16px;
  }
  .lp-badges svg { grid-row: 1 / 3; margin: 0; }
  .lp-badges strong { font-size: 0.9rem; }
  .lp-badges span { margin-top: 0; }
}

/* ---------- 症状LPの見出し ----------
   2026-08-14、症状ページ内で「中央揃え・ラベルあり(共通パーツ)」と「左揃え・ラベルなし
   (症状固有)」の2形式が混在していたため統一した。左揃え＋英字ラベル＋縦のアクセント。
   ※他ページの .section-title（中央揃え）は変えていない。症状LPだけに .lp-title を足す。 */
/* ★2026-08-14、院長の指示で「色地に白文字の帯」に変更。
   線だけでは弱く、セクションの切れ目が分かりにくかったため。
   競合（飯塚メディケア整骨院）がオレンジ帯でやっているのと同じ手法を、当院の色で。 */
.lp-title {
  text-align: left;
  background: linear-gradient(135deg, var(--color-brown), var(--color-brown-dark));
  color: #fff;
  border-radius: 8px;
  padding: 15px 22px 16px;
  font-size: 1.5rem;
  line-height: 1.4;
  box-shadow: 0 3px 12px rgba(122, 90, 70, 0.18);
}
.lp-title small {
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 4px;
}
@media (max-width: 560px) {
  .lp-title { font-size: 1.2rem; padding: 13px 16px 14px; }
}

/* 実績（地域名＋臨床実績）を枠で囲んで塊にする */
.lp-proof__box {
  display: inline-block;
  background: var(--color-surface);
  border: 2px solid var(--color-brown);
  border-radius: 14px;
  padding: 18px 34px 20px;
  margin-bottom: 26px;
  box-shadow: var(--shadow);
}
@media (max-width: 560px) {
  .lp-proof__box { padding: 16px 20px 18px; }
}

/* ---------- ②-B 今まで試してきたこと（LP内） ----------
   お悩みリスト（worry-list＝チェック）と見分けがつくよう、こちらは箱で並べる。 */
.tried-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 22px 0 26px;
}
.tried-list li {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 13px 16px 13px 40px;
  position: relative;
  font-size: 0.95rem;
}
.tried-list li::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  border: 2px solid var(--color-brown);
  border-radius: 3px;
  opacity: 0.5;
}
@media (max-width: 640px) {
  .tried-list { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------- 症状LPの写真枠（2026-08-15追加） ----------
   「文章を読ませる構造になっていて写真が足りない」という院長の指摘への対応。
   角は立てる（症状LPの方針・次回作業_症状LP.md 項目2）。キャプションは事実だけを書くこと。
   ★入れる写真の選定は 写真撮影リスト_症状LP.md を見る。撮影待ちの枠には何も置かない
     （施術写真を評価セクションに流用すると、書いてあることと写っているものがズレるため）。 */
/* 2026-08-31、院長の指示で表示幅を絞った。それまで本文幅(760px)いっぱいに出していたため
   写真1枚で画面の大半が埋まり、セクション全体が一度のスクロールで見えなくなっていた。
   写真は切らずに縮小するだけにとどめている（人物が切れるため object-fit は使わない）。 */
.lp-photo { margin: 22px auto 4px; max-width: 460px; }
.lp-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}
.lp-photo figcaption {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-top: 8px;
  line-height: 1.75;
}

/* ---------- ④評価の手順（LP内） ----------
   「いきなり揉まない」ことが伝わるよう、番号を大きく打って順序を見せる。 */
.assess-steps {
  counter-reset: assess;
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
}
.assess-steps li {
  counter-increment: assess;
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px 24px 20px 74px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.assess-steps li::before {
  content: counter(assess);
  position: absolute;
  left: 22px;
  top: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-mint);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.assess-steps h3 {
  font-size: 1.05rem;
  margin: 0 0 8px;
  color: var(--color-brown-dark);
}
.assess-steps p { margin: 0; }
.assess-steps p.small { margin-top: 8px; }

/* 各ステップの写真（2026-08-29、院長の指示で首LP・五十肩LPに撮影写真を入れた）。
   角は立てる（症状LPの方針）。写真を渡していないページには何も出ない。 */
.assess-steps .step-photo { margin: 14px 0 0; }
.assess-steps .step-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}
/* 2026-08-31、院長の指示。写真を本文の下に積んだことでカード1枚が570pxまで伸び、
   4ステップで4画面分のスクロールになっていた。本文の横に置いて、写真を入れる前の
   高さ（テキストだけの状態）に近づけている。
   ★写真の無いステップ（肩LP・頭痛LP）は :has() が外れて従来どおり1カラムのまま。 */
@media (min-width: 561px) {
  .assess-steps li:has(.step-photo) {
    display: grid;
    grid-template-columns: 1fr 250px;
    grid-template-rows: auto 1fr;
    column-gap: 22px;
  }
  .assess-steps li:has(.step-photo) > h3 { grid-column: 1; grid-row: 1; }
  .assess-steps li:has(.step-photo) > p { grid-column: 1; grid-row: 2; }
  .assess-steps li:has(.step-photo) > .step-photo {
    grid-column: 2;
    grid-row: 1 / -1;
    margin: 0;
    align-self: center;
  }
}

@media (max-width: 560px) {
  .assess-steps li { padding: 12px 14px; margin-bottom: 10px; }
  .assess-steps li::before {
    position: static;
    margin-bottom: 6px;
    width: 26px;
    height: 26px;
    font-size: 0.95rem;
  }
  .assess-steps h3 { font-size: 0.95rem; margin: 0 0 4px; }
  .assess-steps p { font-size: 0.88rem; line-height: 1.55; }
  .assess-steps p.small { margin-top: 5px; font-size: 0.78rem; }
  .assess-steps .step-photo { margin-top: 10px; }
}

/* ---------- ⑦院長紹介（LP内） ---------- */
.owner-block {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 28px 30px;
  box-shadow: var(--shadow);
}
.owner-name {
  font-weight: 700;
  color: var(--color-brown-dark);
  margin-bottom: 14px;
}
.owner-block h3 {
  margin-top: 22px;
  font-size: 1.05rem;
}
.owner-block ul { margin-top: 10px; }
.owner-block li { margin-bottom: 12px; }

/* 施術担当者カード（症状LP）。2026-08-17、院長の指示で長文を撤去し顔＋名前だけにした。
   写真の高さは撤去前の本文7行ぶん(≒230px)。元画像は666×1000なので幅は約153pxになる。 */
.owner-card { text-align: center; }
.owner-card__photo {
  width: auto;
  height: 230px;
  object-fit: cover;
  display: block;
  margin: 0 auto 16px;
}
.owner-card .owner-name { margin-bottom: 2px; font-size: 0.95rem; }
.owner-card__fullname {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--lp-teal-dk);
  margin: 0 0 18px;
}
.owner-card__fullname span { font-size: 0.85rem; font-weight: 400; }
.owner-card p:last-child { margin-bottom: 0; }

/* ---------- ⑧料金（LP内） ---------- */
.price-card {
  background: var(--color-surface);
  border: 2px solid var(--color-mint);
  border-radius: var(--radius);
  padding: 24px 26px;
  text-align: center;
  box-shadow: var(--shadow);
}
.price-card__label {
  display: inline-block;
  background: var(--color-mint);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 4px 16px;
  margin-bottom: 12px;
}
.price-card__name {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 8px;
}
.price-card__figure {
  font-size: 1.15rem;
  margin-bottom: 8px;
}
.price-card__figure strong {
  font-size: 1.7rem;
  color: var(--color-accent-warm);
}

@media (max-width: 560px) {
  .owner-block { padding: 22px 20px; }
  .price-card { padding: 20px 18px; }
  .price-card__figure strong { font-size: 1.45rem; }
}

/* ==========================================================
   症状LP 改訂（2026-08-14・院長の指示）
   ① 丸角を全部やめる（柔らかさより「信頼性」を出す）
   ② 茶色をやめ、カラダらくにのミント〜ティールのグラデを明るめにして使う
   ③ 上下の余白を詰めてすっきりさせる
   ④ CTAバンドの間延びを解消
   ※ .lp-sec を付けた症状LPのセクションだけに効く。他ページは従来のまま。
   ========================================================== */
:root {
  --lp-mint: #5fbfb2;        /* 既存 #6eb4aa を明るく */
  --lp-teal: #2a9d8c;        /* 既存 #16887a を明るく */
  --lp-teal-dk: #1f8677;
  --lp-grad: linear-gradient(135deg, #5fbfb2 0%, #2a9d8c 100%);
}

/* ---- ① 角を立てる（症状LP配下すべて） ---- */
.lp-sec, .lp-sec *, .lp-crumb, .lp-proof__box, .lp-title { border-radius: 0 !important; }
/* 評価ステップの番号だけは丸を残さず四角のまま統一する */
.assess-steps li::before { border-radius: 0 !important; }

/* ---- ③ 余白を詰める ---- */
.lp-sec { padding: 34px 0; }
.lp-sec.tight { padding: 22px 0; }
.lp-proof { padding: 26px 0 32px; }
.lp-title { margin-bottom: 22px; }

/* ---- ② 色：茶色 → 明るいミント〜ティール ---- */
.lp-title {
  background: var(--lp-grad);
  box-shadow: none;
  border-left: 6px solid var(--lp-teal-dk);
}
.lp-proof__box {
  border: 2px solid var(--lp-teal);
  /* ① 左右・上下が空きすぎという指摘を受けて詰めた */
  padding: 12px 22px 14px;
  margin-bottom: 20px;
}
.lp-proof__eyebrow {
  background: var(--lp-teal);
  padding: 4px 14px;
  margin-bottom: 8px;
}
.lp-proof__record { margin-bottom: 0; }
/* ★background はショートハンドなので、書き換えると background-clip:text が消えて
   数字ではなく箱全体が塗り潰される（2026-08-14に実際に踏んだ）。必ず一緒に指定する。 */
.lp-proof__record strong {
  background: var(--lp-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lp-badges li { border: 2px solid var(--lp-teal); background: #fff; }
.lp-badges svg { color: var(--lp-teal); }
.tried-list li::before { border-color: var(--lp-teal); }
.assess-steps li { border: 1px solid var(--color-border); border-left: 5px solid var(--lp-teal); }
.assess-steps li::before { background: var(--lp-teal); }
.assess-steps h3 { color: var(--lp-teal-dk); }
.owner-name { color: var(--lp-teal-dk); }
.price-card { border: 2px solid var(--lp-teal); }
.price-card__label { background: var(--lp-teal); }
.lp-sec .btn--outline { border-color: var(--lp-teal); color: var(--lp-teal-dk); }

/* ---- ④ CTAバンド：間延びを解消し、文字だけで寂しくならないようにする ---- */
/* 🔴 2026-08-16、院長より「クオリティを上げて」「文字が小さい」と指摘され作り直し。
   ・背景: ベタ塗り → グラデーション＋光沢(band-gloss.png)＋2層の影。
     質感は承認済みの build_cta.py / build_contact_cta.py に合わせた。
   ・見出し: CSSテキスト(1.22rem≒19.5px) → Photoshop製の画像(40px相当)。
     スマホは2行版に差し替える(1行画像を縮小すると逆に小さくなるため)。
     生成は `python web/build_cta_band.py`。
   ・ボタン: フラットな白ピル＋絵文字(💬📞) → 承認済みの予約3ボタン画像を流用。
     絵文字は環境依存で崩れるため使わない方針。 */
/* 帯の色は、上に乗る予約3ボタン(ミント/緑/ブラウン)が沈まない濃さにする。
   明るいティール(#37a696等)だとミントの「ネットで予約する」が帯に溶けた。 */
.lp-sec .cta-band {
  background:
    url("/static/images/cta/band-gloss.png") 0 0 / 100% 100% no-repeat,
    linear-gradient(135deg, #155e52 0%, #08352f 100%);
  padding: 34px 24px 28px;
  box-shadow: 0 4px 14px rgba(18, 58, 52, 0.16), 0 16px 36px rgba(18, 58, 52, 0.12);
}
.lp-sec .cta-band h2 { font-size: 1.22rem; margin-bottom: 6px; }
.lp-sec .cta-band p { color: #eafaf6; font-size: 0.9rem; margin-bottom: 14px; }
.lp-sec .cta-band .btn { background: #fff; color: var(--lp-teal-dk); font-weight: 700; }
.lp-sec .cta-band .btn:hover { background: #eafaf6; }

/* 見出し画像。992px幅(帯の内側の最大幅)で作ってあるので width:100% で原寸になる。
   画像自体に影のにじみ用の余白(級数の0.5倍)が入っているのでmarginは控えめでよい */
.lp-sec .cta-band .cta-band__heading { margin: 0 0 12px; }
.cta-band__heading img { width: 100%; height: auto; }
.lp-sec .cta-band .cta-band__lead {
  color: #d9f2ec;
  font-size: 1rem;
  margin: 0 0 16px;
}

/* 予約3ボタン。.quick-cta と同じ画像を使うが、スマホで非表示にしない点だけ違う
   (帯の中にボタンが無いと帯の意味が無くなるため) */
/* ボタン画像は影のにじみ用に上下左右へ約12.7%の透明マージンを持っている
   (804pxの画像に対しカード本体は600px)。そのぶん見た目の余白が二重になるので、
   ・枠は 290px にしてカード本体が実寸(約216px)で出るようにし
   ・上下はマイナスmarginで透明マージンを打ち消す
   ・左右のgapは0（透明マージン同士で十分な間隔になる） */
.cta-band__actions {
  display: flex;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  margin: -22px 0 -18px;
}
.cta-band__item {
  display: block;
  flex: 0 1 290px;
  max-width: 290px;
  transition: transform 0.15s ease;
}
.cta-band__item:hover { transform: translateY(-3px); text-decoration: none; }
.cta-band__item picture,
.cta-band__item img { display: block; width: 100%; height: auto; }

.cta-band__note {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 18px;
  font-size: 0.95rem;
  color: #eafaf6;
}

/* ---- ⑧ キャンペーンバナー ---- */
.lp-banner { margin: 0 auto 18px; max-width: 560px; }
.lp-banner img { display: block; width: 100%; height: auto; }

@media (max-width: 560px) {
  .lp-sec { padding: 26px 0; }
  .lp-proof__box { padding: 10px 16px 12px; }
  .cta-band__note { gap: 10px; font-size: 0.85rem; }

  /* 2026-08-16: 帯の中の予約3ボタンは横長版に切り替えて縦積みにする。
     画像に影のにじみ用の透過マージンがあるため gap0＋マイナスmarginで詰める
     (.quick-cta と同じ手口)。 */
  .lp-sec .cta-band { padding: 24px 18px 22px; }
  .lp-sec .cta-band .cta-band__heading { margin-bottom: 6px; }
  /* 横長版は透明マージンが小さい（368pxの画像に対しカード本体340px）ので、
     PC用のマイナスmarginは効かせず0に戻す */
  .cta-band__actions { flex-direction: column; align-items: stretch; gap: 0; margin: 0; }
  .cta-band__item { flex: none; max-width: none; }
  .cta-band__item + .cta-band__item { margin-top: -26px; }
}

/* 🔴 2026-08-15: スマホで1スクロールあたりの情報量が少なすぎ、離脱ポイントになる
   と院長より指摘。行間・項目間の余白を詰めて情報密度を上げる。 */
@media (max-width: 560px) {
  body { line-height: 1.68; }
  .worry-list li { padding: 7px 0 7px 26px; }
  p { margin: 0 0 0.85em; }
}