/* ==========================================================================
   生活習慣病LP — 患者向け独立レイアウト
   医療法人社団季邦会 / kihokai-recruit theme
   --------------------------------------------------------------------------
   すべて .lp 名前空間に閉じる。採用サイト側の components.css は読み込まない
   前提だが、万が一同時に読まれても衝突しないようにする。

   読者は健診で数値を指摘された 40〜70代が中心。
   本文サイズ・行間・コントラスト・タップ領域を採用サイトより一段引き上げる。
   ========================================================================== */

.lp {
  /* --- 色（variables.css のブランドトークンを継承しつつ患者向けに調整） --- */
  --lp-green: var(--primary-green, #2f7d57);
  --lp-green-deep: #245f43;
  --lp-green-dark: #1b4632;
  --lp-green-tint: #eaf3ee;
  --lp-green-line: #cfe2d8;

  --lp-ink: #16211c;
  --lp-body: #2c3531;
  --lp-muted: #5c6763;

  --lp-paper: #ffffff;
  --lp-sand: #faf7f2;   /* 温かい方の背景 */
  --lp-mist: #f2f7f4;   /* 涼しい方の背景 */
  --lp-line: #e2e8e5;

  /* 数値・注意喚起にだけ使うアクセント。CTAには使わない */
  --lp-alert: #9c5a12;   /* 白地・琥珀地の双方で 4.5:1 を満たす濃さ */
  --lp-alert-bg: #fdf6ea;
  --lp-alert-line: #ecd9b8;

  /* --- タイポ --- */
  --lp-fs-body: clamp(1rem, 0.96rem + 0.3vw, 1.125rem);
  --lp-fs-lead: clamp(1.06rem, 1rem + 0.45vw, 1.25rem);
  --lp-fs-h2: clamp(1.5rem, 1.2rem + 1.5vw, 2.15rem);
  --lp-fs-h3: clamp(1.15rem, 1.06rem + 0.5vw, 1.4rem);
  --lp-fs-hero: clamp(1.85rem, 1.3rem + 2.9vw, 3.05rem);
  --lp-lh: 1.9;

  /* --- レイアウト --- */
  --lp-max: 1080px;
  --lp-narrow: 760px;
  --lp-gutter: clamp(1.15rem, 4vw, 2rem);
  --lp-sec-y: clamp(3.25rem, 7vw, 5.75rem);

  --lp-r-sm: 10px;
  --lp-r: 16px;
  --lp-r-lg: 22px;
  --lp-r-pill: 999px;

  /* 影とヒーローの地色。拠点ブランドを当てるときはここごと差し替える */
  --lp-shadow-rgb: 22, 33, 28;
  --lp-sh: 0 2px 10px rgba(var(--lp-shadow-rgb), 0.05);
  --lp-sh-lg: 0 12px 34px rgba(var(--lp-shadow-rgb), 0.10);

  /* CTA は構造色と別トークンにする。拠点ブランドでは差し色を当てて主役にする */
  --lp-cta-bg: var(--lp-green);
  --lp-cta-bg-hover: var(--lp-green-deep);
  --lp-cta-fg: #ffffff;
  --lp-cta-shadow: 0 6px 18px rgba(47, 125, 87, 0.28);
  --lp-cta-shadow-hi: 0 10px 24px rgba(47, 125, 87, 0.34);
  /* 濃色面（最終CTA）に置く白ボタンのホバー地色 */
  --lp-oncolor-btn-hover: #f3faf6;
  --lp-hero-glow: rgba(47, 125, 87, 0.13);
  --lp-hero-from: #f7fbf9;
  --lp-hero-to: #eef5f1;
  --lp-mark: rgba(47, 125, 87, 0.22);

  color: var(--lp-body);
  font-size: var(--lp-fs-body);
  line-height: var(--lp-lh);
  background: var(--lp-paper);
  /* 追従CTAバー（SP）の下に本文が隠れないように */
  padding-bottom: 0;
}

.lp *,
.lp *::before,
.lp *::after { box-sizing: border-box; }

/* 素の要素に当てる規則は :where() で詳細度を 0 にしておく。
   `.lp p`（0,1,1）のまま書くと `.lp-final__title`（0,1,0）のような
   コンポーネント側の色指定に勝ってしまい、濃色面の上に濃い文字が乗る。 */
:where(.lp) p { color: inherit; }
.lp p { margin: 0 0 1em; }
.lp p:last-child { margin-bottom: 0; }

:where(.lp) :is(h1, h2, h3, h4) { color: var(--lp-ink); }
.lp :is(h1, h2, h3, h4) {
  font-family: var(--font-heading, "Noto Serif JP", serif);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0.02em;
  margin: 0 0 0.6em;
}

:where(.lp) a { color: var(--lp-green-deep); }
:where(.lp) a:hover { color: var(--lp-green-dark); }

.lp ul, .lp ol { list-style: none; margin: 0; padding: 0; }

.lp strong { font-weight: 700; }
:where(.lp) strong { color: var(--lp-ink); }

/* --------------------------------------------------------------------------
   レイアウト部品
   -------------------------------------------------------------------------- */
.lp-container {
  width: 100%;
  max-width: var(--lp-max);
  margin-inline: auto;
  padding-inline: var(--lp-gutter);
}
.lp-container--narrow { max-width: var(--lp-narrow); }

.lp-section { padding-block: var(--lp-sec-y); }
.lp-section--sand { background: var(--lp-sand); }
.lp-section--mist { background: var(--lp-mist); }
.lp-section--tight { padding-block: clamp(2.25rem, 5vw, 3.5rem); }

.lp-sec-head {
  text-align: center;
  max-width: 40rem;
  margin: 0 auto clamp(2rem, 4.5vw, 3rem);
}
.lp-sec-head__eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--lp-green-deep);
  background: var(--lp-green-tint);
  border-radius: var(--lp-r-pill);
  padding: 0.4em 1.1em;
  margin-bottom: 1rem;
  line-height: 1.6;
}
.lp-sec-head__title {
  font-size: var(--lp-fs-h2);
  margin-bottom: 0.5em;
}
.lp-sec-head__lead {
  color: var(--lp-muted);
  font-size: var(--lp-fs-body);
  margin: 0;
}

/* --------------------------------------------------------------------------
   ボタン
   -------------------------------------------------------------------------- */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 56px;
  padding: 0.85em 1.9em;
  border-radius: var(--lp-r-pill);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.4;
  text-decoration: none;
  text-align: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}
.lp-btn:hover { transform: translateY(-2px); }
.lp-btn:focus-visible { outline: 3px solid var(--lp-green-deep); outline-offset: 3px; }

.lp-btn--primary {
  background: var(--lp-cta-bg);
  color: var(--lp-cta-fg);
  box-shadow: var(--lp-cta-shadow);
}
.lp-btn--primary:hover { background: var(--lp-cta-bg-hover); color: var(--lp-cta-fg); box-shadow: var(--lp-cta-shadow-hi); }

.lp-btn--ghost {
  background: #fff;
  color: var(--lp-green-deep);
  border: 2px solid var(--lp-green-line);
}
.lp-btn--ghost:hover { border-color: var(--lp-green); background: var(--lp-green-tint); color: var(--lp-green-dark); }

.lp-btn--block { width: 100%; }

.lp-btn__note {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  opacity: 0.85;
  letter-spacing: 0.02em;
}

.lp-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.lp-icon { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* --------------------------------------------------------------------------
   ヘッダー（LP専用・最小構成）
   -------------------------------------------------------------------------- */
.lp-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--lp-line);
}
.lp-header__inner {
  max-width: var(--lp-max);
  margin-inline: auto;
  padding: 0.7rem var(--lp-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.lp-header__brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; min-width: 0; }
.lp-header__logo { height: 38px; width: auto; display: block; }
.lp-header__names { display: flex; flex-direction: column; min-width: 0; }
.lp-header__org {
  font-family: var(--font-heading, serif);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--lp-ink);
  line-height: 1.35;
  white-space: nowrap;
}
.lp-header__sub {
  font-size: 0.72rem;
  color: var(--lp-muted);
  letter-spacing: 0.04em;
  line-height: 1.4;
  white-space: nowrap;
}
.lp-header__actions { display: flex; align-items: center; gap: 0.6rem; }
.lp-header__tel {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-en, sans-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--lp-green-deep);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.lp-header__cta {
  min-height: 44px;
  padding: 0.5em 1.35em;
  font-size: 0.95rem;
}

@media (max-width: 860px) {
  .lp-header__sub { display: none; }
  .lp-header__tel { display: none; }
}
@media (max-width: 560px) {
  .lp-header__org { font-size: 0.85rem; }
  .lp-header__logo { height: 32px; }
  .lp-header__cta { padding: 0.5em 1.05em; font-size: 0.875rem; }
}

/* --------------------------------------------------------------------------
   ヒーロー
   -------------------------------------------------------------------------- */
.lp-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 520px at 88% -12%, var(--lp-hero-glow), transparent 62%),
    linear-gradient(178deg, var(--lp-hero-from) 0%, var(--lp-hero-to) 100%);
  /* ショートハンドは color 成分を含まないと background-color を初期値へ戻すので、必ず後に置く */
  background-color: var(--lp-hero-to);
  padding-block: clamp(2.75rem, 6.5vw, 5rem) clamp(3rem, 7vw, 5.25rem);
}
.lp-hero__arcs {
  position: absolute;
  right: -8%;
  top: -18%;
  width: min(620px, 62vw);
  height: auto;
  opacity: 0.5;
  pointer-events: none;
  color: var(--lp-green);
}
.lp-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
.lp-hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--lp-green-dark);
  background: #fff;
  border: 1px solid var(--lp-green-line);
  border-radius: var(--lp-r-pill);
  padding: 0.45em 1.1em;
  margin-bottom: 1.15rem;
  line-height: 1.5;
}
.lp-hero__title {
  font-size: var(--lp-fs-hero);
  line-height: 1.42;
  letter-spacing: 0.01em;
  margin-bottom: 0.65em;
}
.lp-hero__title em {
  font-style: normal;
  background: linear-gradient(transparent 62%, var(--lp-mark) 62%);
  padding-inline: 0.06em;
}
.lp-hero__lead {
  font-size: var(--lp-fs-lead);
  color: var(--lp-body);
  margin-bottom: 1.75rem;
  max-width: 30rem;
}
.lp-hero .lp-btn-row { margin-bottom: 1.5rem; }

.lp-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.35rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--lp-green-line);
}
.lp-hero__trust li {
  display: flex;
  align-items: center;
  gap: 0.45em;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--lp-green-dark);
  line-height: 1.6;
}
.lp-hero__trust .lp-icon { width: 1.05em; height: 1.05em; color: var(--lp-green); }

/* 健診結果カード（イメージ図） */
.lp-result {
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-lg);
  box-shadow: var(--lp-sh-lg);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  transform: rotate(-1.1deg);
}
.lp-result__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.85rem;
  margin-bottom: 0.4rem;
  border-bottom: 2px solid var(--lp-green-tint);
}
.lp-result__title {
  font-family: var(--font-heading, serif);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--lp-ink);
  margin: 0;
}
.lp-result__meta { font-size: 0.72rem; color: var(--lp-muted); letter-spacing: 0.04em; }

.lp-result__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.55rem 0.75rem;
  padding: 0.72rem 0;
  border-bottom: 1px dashed var(--lp-line);
}
.lp-result__row:last-of-type { border-bottom: 0; }
.lp-result__label { font-size: 0.9rem; color: var(--lp-muted); font-weight: 500; }
.lp-result__value {
  font-family: var(--font-en, sans-serif);
  font-size: 1.28rem;
  font-weight: 700;
  color: var(--lp-ink);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.lp-result__flag {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--lp-alert);
  background: var(--lp-alert-bg);
  border: 1px solid var(--lp-alert-line);
  border-radius: var(--lp-r-pill);
  padding: 0.25em 0.75em;
  white-space: nowrap;
  line-height: 1.5;
}
.lp-result__stamp {
  margin-top: 1.1rem;
  padding: 0.8rem 1rem;
  background: var(--lp-alert-bg);
  border: 1px dashed var(--lp-alert-line);
  border-radius: var(--lp-r-sm);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--lp-alert);
  text-align: center;
  line-height: 1.6;
}
.lp-result__note {
  margin-top: 0.7rem;
  font-size: 0.72rem;
  color: var(--lp-muted);
  text-align: right;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .lp-hero__grid { grid-template-columns: 1fr; }
  .lp-hero__lead { max-width: none; }
  .lp-result { transform: none; max-width: 30rem; margin-inline: auto; }
  .lp-hero__arcs { opacity: 0.3; }
}

/* --------------------------------------------------------------------------
   チェックリスト（こんな指摘、ありませんか）
   -------------------------------------------------------------------------- */
.lp-checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 0.85rem;
}
.lp-checks li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r);
  padding: 1.1rem 1.25rem;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--lp-body);
  box-shadow: var(--lp-sh);
}
.lp-checks__mark {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: 0.18rem;
  border-radius: 50%;
  background: var(--lp-green-tint);
  color: var(--lp-green-deep);
  display: grid;
  place-items: center;
}
.lp-checks__mark .lp-icon { width: 0.95rem; height: 0.95rem; stroke-width: 2.6; }

.lp-checks-after {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  text-align: center;
  font-size: var(--lp-fs-lead);
  font-family: var(--font-heading, serif);
  font-weight: 600;
  color: var(--lp-green-dark);
  line-height: 1.85;
}

/* --------------------------------------------------------------------------
   放置するとどうなるか
   -------------------------------------------------------------------------- */
.lp-risk {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1rem;
}
.lp-risk__card {
  background: #fff;
  border: 1px solid var(--lp-line);
  border-top: 4px solid var(--lp-alert-line);
  border-radius: var(--lp-r);
  padding: clamp(1.25rem, 3vw, 1.6rem);
  box-shadow: var(--lp-sh);
}
.lp-risk__name {
  font-size: var(--lp-fs-h3);
  margin-bottom: 0.35em;
}
.lp-risk__mech {
  font-size: 0.9rem;
  color: var(--lp-muted);
  margin-bottom: 1rem;
  line-height: 1.8;
}
.lp-risk__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.55em;
  font-size: 0.95rem;
  line-height: 1.75;
  padding: 0.35rem 0;
  color: var(--lp-body);
}
.lp-risk__list li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 0.72em;
  border-radius: 50%;
  background: var(--lp-alert);
}

.lp-turn {
  margin-top: clamp(2rem, 4.5vw, 3rem);
  background: var(--lp-green-dark);
  color: #fff;
  border-radius: var(--lp-r-lg);
  padding: clamp(1.75rem, 4.5vw, 2.75rem);
  text-align: center;
}
.lp-turn h3 {
  color: #fff;
  font-size: var(--lp-fs-h3);
  margin-bottom: 0.6em;
}
.lp-turn p {
  color: rgba(255, 255, 255, 0.9);
  max-width: 42rem;
  margin-inline: auto;
  font-size: var(--lp-fs-body);
}

/* --------------------------------------------------------------------------
   基準値のめやす（表）
   -------------------------------------------------------------------------- */
.lp-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r);
  background: #fff;
  box-shadow: var(--lp-sh);
}
.lp-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.lp-table th,
.lp-table td {
  padding: 0.95rem 1.1rem;
  text-align: left;
  border-bottom: 1px solid var(--lp-line);
  line-height: 1.7;
  vertical-align: middle;
}
.lp-table thead th {
  background: var(--lp-green-tint);
  color: var(--lp-green-dark);
  font-family: var(--font-body, sans-serif);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.lp-table tbody tr:last-child th,
.lp-table tbody tr:last-child td { border-bottom: 0; }
.lp-table tbody th {
  font-family: var(--font-body, sans-serif);
  font-weight: 700;
  color: var(--lp-ink);
  white-space: nowrap;
}
.lp-table__num {
  font-family: var(--font-en, sans-serif);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--lp-alert);
  white-space: nowrap;
}
.lp-table__sub { display: block; font-size: 0.8rem; color: var(--lp-muted); font-weight: 500; }

.lp-note {
  margin-top: 1rem;
  font-size: 0.82rem;
  color: var(--lp-muted);
  line-height: 1.85;
}
.lp-note--boxed {
  background: var(--lp-mist);
  border: 1px solid var(--lp-green-line);
  border-radius: var(--lp-r-sm);
  padding: 1rem 1.15rem;
}

/* --------------------------------------------------------------------------
   診療の3本柱
   -------------------------------------------------------------------------- */
.lp-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
}
.lp-pillar {
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-lg);
  padding: clamp(1.5rem, 3.5vw, 2rem);
  box-shadow: var(--lp-sh);
  display: flex;
  flex-direction: column;
}
.lp-pillar__icon {
  width: 3rem;
  height: 3rem;
  border-radius: 14px;
  background: var(--lp-green-tint);
  color: var(--lp-green-deep);
  display: grid;
  place-items: center;
  margin-bottom: 1.1rem;
}
.lp-pillar__icon .lp-icon { width: 1.5rem; height: 1.5rem; }
.lp-pillar__title { font-size: var(--lp-fs-h3); margin-bottom: 0.5em; }
.lp-pillar__text { font-size: 0.95rem; color: var(--lp-muted); line-height: 1.85; margin-bottom: 1.1rem; }
.lp-pillar__facts { margin-top: auto; border-top: 1px solid var(--lp-line); padding-top: 0.9rem; }
.lp-pillar__facts li {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--lp-green-dark);
  line-height: 1.7;
  padding: 0.22rem 0;
}
.lp-pillar__facts .lp-icon { width: 0.95em; height: 0.95em; margin-top: 0.42em; flex: none; color: var(--lp-green); stroke-width: 2.6; }

/* --------------------------------------------------------------------------
   受診の流れ
   -------------------------------------------------------------------------- */
.lp-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1rem;
}
.lp-flow__step {
  position: relative;
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r);
  padding: 1.5rem 1.35rem 1.35rem;
  box-shadow: var(--lp-sh);
}
/* 番号バッジは要素として出す（接頭辞を STEP / 段階 など内容に合わせて変えられるように） */
.lp-flow__badge {
  position: absolute;
  top: -0.72rem;
  left: 1.25rem;
  font-family: var(--font-en, sans-serif);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #fff;
  background: var(--lp-green);
  border-radius: var(--lp-r-pill);
  padding: 0.3em 0.9em;
  line-height: 1.6;
}
.lp-flow__title { font-size: 1.08rem; margin-bottom: 0.4em; }
.lp-flow__text { font-size: 0.9rem; color: var(--lp-muted); line-height: 1.8; margin: 0; }

.lp-bring {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  background: #fff;
  border: 1px solid var(--lp-green-line);
  border-radius: var(--lp-r);
  padding: clamp(1.35rem, 3.5vw, 1.85rem);
}
.lp-bring__title {
  display: flex;
  align-items: center;
  gap: 0.55em;
  font-size: 1.05rem;
  margin-bottom: 0.9em;
}
.lp-bring__title .lp-icon { width: 1.2em; height: 1.2em; color: var(--lp-green); }
.lp-bring__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.6rem 1.25rem;
}
.lp-bring__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.55em;
  font-size: 0.95rem;
  line-height: 1.75;
}
.lp-bring__list .lp-icon { width: 1em; height: 1em; margin-top: 0.4em; flex: none; color: var(--lp-green); stroke-width: 2.6; }
.lp-bring__hint { display: block; font-size: 0.82rem; color: var(--lp-muted); font-weight: 500; }

/* --------------------------------------------------------------------------
   検査でわかること
   -------------------------------------------------------------------------- */
.lp-exams {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
}
.lp-exam {
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r);
  padding: 1.35rem 1.4rem;
  box-shadow: var(--lp-sh);
}
.lp-exam__name {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 1.02rem;
  margin-bottom: 0.45em;
}
.lp-exam__name .lp-icon { width: 1.15em; height: 1.15em; color: var(--lp-green); }
.lp-exam__text { font-size: 0.9rem; color: var(--lp-muted); line-height: 1.8; margin: 0; }

/* --------------------------------------------------------------------------
   クリニック一覧（コンバージョンの主戦場）
   -------------------------------------------------------------------------- */
.lp-clinics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20.5rem), 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
}
.lp-clinic {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-lg);
  padding: clamp(1.35rem, 3vw, 1.75rem);
  box-shadow: var(--lp-sh);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.lp-clinic:hover { box-shadow: var(--lp-sh-lg); transform: translateY(-3px); border-color: var(--lp-green-line); }

.lp-clinic__badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.7rem; }
.lp-clinic__badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: var(--lp-r-pill);
  padding: 0.3em 0.85em;
  line-height: 1.6;
  background: var(--lp-green-tint);
  color: var(--lp-green-dark);
}
.lp-clinic__badge--accent { background: var(--lp-alert-bg); color: var(--lp-alert); border: 1px solid var(--lp-alert-line); }

.lp-clinic__name { font-size: var(--lp-fs-h3); margin-bottom: 0.15em; }
.lp-clinic__area { font-size: 0.82rem; color: var(--lp-muted); margin-bottom: 1rem; }

.lp-clinic__meta { border-top: 1px solid var(--lp-line); padding-top: 0.9rem; margin-bottom: 1rem; }
.lp-clinic__meta-row {
  display: grid;
  grid-template-columns: 1.35rem 1fr;
  gap: 0.7rem;
  padding: 0.42rem 0;
  font-size: 0.9rem;
  line-height: 1.75;
}
.lp-clinic__meta-row .lp-icon { width: 1.15rem; height: 1.15rem; margin-top: 0.35em; color: var(--lp-green); }
.lp-clinic__hours { font-variant-numeric: tabular-nums; }

.lp-clinic__points { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.15rem; }
.lp-clinic__point {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--lp-green-dark);
  background: var(--lp-mist);
  border: 1px solid var(--lp-green-line);
  border-radius: var(--lp-r-sm);
  padding: 0.3em 0.7em;
  line-height: 1.6;
}

.lp-clinic__actions { margin-top: auto; display: grid; gap: 0.6rem; }
.lp-clinic__actions .lp-btn { min-height: 52px; font-size: 1rem; }
.lp-clinic__tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-en, sans-serif);
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.lp-clinic__site {
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--lp-muted);
  text-decoration: none;
  padding: 0.35rem;
}
.lp-clinic__site:hover { color: var(--lp-green-deep); text-decoration: underline; }

/* 訪問診療の受け皿 */
.lp-homecare {
  margin-top: clamp(1.5rem, 3.5vw, 2.25rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  background: var(--lp-green-tint);
  border: 1px solid var(--lp-green-line);
  border-radius: var(--lp-r);
  padding: clamp(1.25rem, 3vw, 1.75rem);
}
.lp-homecare__icon {
  flex: none;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: #fff;
  color: var(--lp-green-deep);
  display: grid; place-items: center;
}
.lp-homecare__icon .lp-icon { width: 1.5rem; height: 1.5rem; }
.lp-homecare__body { flex: 1 1 18rem; }
.lp-homecare__title { font-size: 1.05rem; margin-bottom: 0.3em; }
.lp-homecare__text { font-size: 0.92rem; color: var(--lp-body); margin: 0; line-height: 1.8; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.lp-faq { display: grid; gap: 0.75rem; }
.lp-faq__item {
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r);
  box-shadow: var(--lp-sh);
  overflow: hidden;
}
.lp-faq__item[open] { border-color: var(--lp-green-line); }
.lp-faq__q {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.15rem 1.35rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading, serif);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--lp-ink);
}
.lp-faq__q::-webkit-details-marker { display: none; }
.lp-faq__q:hover { background: var(--lp-mist); }
.lp-faq__q:focus-visible { outline: 3px solid var(--lp-green-deep); outline-offset: -3px; }
.lp-faq__q-mark {
  flex: none;
  font-family: var(--font-en, sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--lp-green);
  line-height: 1.7;
}
.lp-faq__q-text { flex: 1; }
.lp-faq__chev {
  flex: none;
  width: 1.2rem; height: 1.2rem;
  margin-top: 0.35em;
  color: var(--lp-green);
  transition: transform 0.22s ease;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.lp-faq__item[open] .lp-faq__chev { transform: rotate(180deg); }
.lp-faq__a {
  padding: 0 1.35rem 1.3rem;
  margin-left: 1.9rem;
  font-size: 0.95rem;
  color: var(--lp-body);
  line-height: 1.9;
}

/* --------------------------------------------------------------------------
   最終CTA
   -------------------------------------------------------------------------- */
.lp-final {
  background:
    radial-gradient(760px 340px at 12% 0%, rgba(255, 255, 255, 0.14), transparent 60%),
    linear-gradient(160deg, var(--lp-green-deep) 0%, var(--lp-green-dark) 100%);
  /* 同上。グラデーションが描けない場合でも濃色地が残るようにする */
  background-color: var(--lp-green-dark);
  color: #fff;
  text-align: center;
}
.lp-final__title { color: #fff; font-size: var(--lp-fs-h2); margin-bottom: 0.55em; }
.lp-final__lead {
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--lp-fs-lead);
  max-width: 36rem;
  margin: 0 auto 2rem;
}
.lp-final .lp-btn-row { justify-content: center; }
.lp-final .lp-btn--primary { background: #fff; color: var(--lp-green-dark); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22); }
.lp-final .lp-btn--primary:hover { background: var(--lp-oncolor-btn-hover); color: var(--lp-green-dark); }
.lp-final .lp-btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.lp-final .lp-btn--ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; color: #fff; }

/* --------------------------------------------------------------------------
   監修・注記・フッター
   -------------------------------------------------------------------------- */
.lp-supervisor {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r);
  padding: clamp(1.35rem, 3vw, 1.85rem);
}
.lp-supervisor__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--lp-green-deep);
  margin-bottom: 0.5rem;
}
.lp-supervisor__name {
  font-family: var(--font-heading, serif);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--lp-ink);
  margin-bottom: 0.15em;
}
.lp-supervisor__role { font-size: 0.85rem; color: var(--lp-muted); margin-bottom: 0.85rem; }
.lp-supervisor__text { font-size: 0.9rem; color: var(--lp-body); line-height: 1.85; margin: 0; }
.lp-supervisor__body { flex: 1 1 20rem; }

.lp-disclaimer {
  margin-top: 1.25rem;
  font-size: 0.8rem;
  color: var(--lp-muted);
  line-height: 1.9;
}
.lp-disclaimer li { padding: 0.15rem 0; padding-left: 1.1em; position: relative; }
.lp-disclaimer li::before { content: "※"; position: absolute; left: 0; }

.lp-footer {
  background: var(--lp-green-dark);
  color: rgba(255, 255, 255, 0.82);
  padding-block: clamp(2.25rem, 5vw, 3rem);
  font-size: 0.9rem;
}
.lp-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1.75rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.lp-footer__title {
  color: #fff;
  font-size: 1rem;
  margin-bottom: 0.7em;
}
.lp-footer p { color: rgba(255, 255, 255, 0.82); line-height: 1.9; }
.lp-footer__links { display: flex; flex-direction: column; gap: 0.45rem; }
.lp-footer a { color: rgba(255, 255, 255, 0.86); text-decoration: none; }
.lp-footer a:hover { color: #fff; text-decoration: underline; }
.lp-footer__bottom {
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.66);
}

/* --------------------------------------------------------------------------
   追従CTA（SP）
   -------------------------------------------------------------------------- */
.lp-sticky {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  display: none;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid var(--lp-line);
  box-shadow: 0 -4px 18px rgba(var(--lp-shadow-rgb), 0.10);
}
.lp-sticky .lp-btn { flex: 1; min-height: 52px; padding-inline: 0.75em; font-size: 0.98rem; }

@media (max-width: 860px) {
  .lp-sticky { display: flex; }
  .lp { padding-bottom: 5.25rem; }
}

/* --------------------------------------------------------------------------
   スクロール表示アニメーション（motion 配慮つき）

   既定は「見えている」状態。<head> のスクリプトが .lp-js を立てたときだけ
   初期状態を伏せる。JSが無効・失敗した場合や、描画前のサムネイル取得でも
   本文が空白にならないようにするため。
   -------------------------------------------------------------------------- */
.lp-js .lp-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.lp-js .lp-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .lp-js .lp-reveal { opacity: 1; transform: none; transition: none; }
  .lp-btn:hover, .lp-clinic:hover { transform: none; }
  .lp * { scroll-behavior: auto !important; }
}

/* アンカー着地位置がヘッダーに隠れないように */
.lp [id] { scroll-margin-top: 84px; }

/* ==========================================================================
   拠点別LP（リスティング広告用）専用コンポーネント
   ========================================================================== */

/* --- 中間CTAバンド --- */
.lp-band { background: var(--lp-green-tint); }
.lp-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.25rem, 3vw, 2rem);
  background: #fff;
  border: 1px solid var(--lp-green-line);
  border-radius: var(--lp-r-lg);
  padding: clamp(1.5rem, 3.5vw, 2.15rem);
  box-shadow: var(--lp-sh-lg);
}
.lp-band__body { flex: 1 1 17rem; }
.lp-band__title { font-size: var(--lp-fs-h3); margin-bottom: 0.35em; }
.lp-band__text { font-size: 0.92rem; color: var(--lp-muted); margin: 0; line-height: 1.8; }
.lp-band__actions { flex: 0 1 auto; display: grid; gap: 0.6rem; min-width: min(100%, 15rem); }
.lp-band__actions .lp-btn { width: 100%; }

/* --- アクセス・診療時間 --- */
.lp-access {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
}
.lp-access__info,
.lp-access__hours {
  /* グリッド項目の既定は min-width:auto。中の診療時間表（min-width:30rem）に
     押し広げられて、内側の overflow-x:auto が効かずページごと横に伸びていた。 */
  min-width: 0;
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-lg);
  padding: clamp(1.35rem, 3vw, 1.85rem);
  box-shadow: var(--lp-sh);
}
.lp-access__name { font-size: var(--lp-fs-h3); margin-bottom: 1rem; }
.lp-access__row {
  display: grid;
  grid-template-columns: 1.35rem 1fr;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--lp-line);
  font-size: 0.95rem;
  line-height: 1.8;
}
.lp-access__row .lp-icon { width: 1.2rem; height: 1.2rem; margin-top: 0.4em; color: var(--lp-green); }
.lp-access__row p { margin: 0; }
.lp-access__addr { margin: 0 0 0.35rem; }
.lp-access__map { font-size: 0.88rem; font-weight: 600; }
.lp-access__tel {
  font-family: var(--font-en, sans-serif);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
}
.lp-access__closed {
  margin-top: 0.9rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--lp-alert);
  background: var(--lp-alert-bg);
  border: 1px solid var(--lp-alert-line);
  border-radius: var(--lp-r-sm);
  padding: 0.6rem 0.9rem;
  line-height: 1.7;
}

/* 診療時間表 */
.lp-hours-table { min-width: 30rem; font-size: 0.92rem; }
.lp-hours-table thead th:not(:first-child),
.lp-hours-table__cell { text-align: center; width: 2.75rem; }
.lp-hours-table tbody th { font-size: 0.88rem; white-space: nowrap; }
.lp-hours-table th,
.lp-hours-table td { padding: 0.75rem 0.5rem; }
.lp-hours-table tbody th { padding-left: 1rem; }
.lp-hours-table__on { color: var(--lp-green); font-weight: 700; }
.lp-hours-table__off { color: var(--lp-muted); }

@media (max-width: 900px) {
  .lp-access { grid-template-columns: 1fr; }
}

/* 拠点別LPのヘッダーはロゴ＋院名まで。リンクにしない（離脱防止） */
.lp-clinic-lp .lp-header__brand { cursor: default; }


/* ==========================================================================
   拠点ブランドテーマ
   --------------------------------------------------------------------------
   広告用LPは、着地したあとに「広告で見たクリニックのページだ」と分かることが
   コンバージョンに効く。拠点ごとに .lp-brand-{key} を body に付けて、
   .lp のトークンだけを差し替える。コンポーネントのCSSには一切触らない。
   ========================================================================== */

/* --- 神保町駅前内科クリニック ---------------------------------------------
   公式サイト（SWELL）の設定値から採取：
     --color_header_bg / --color_footer_bg / --color_link : #6f1419（濃いワイン）
     --color_footer_text                                  : #f8ebce（クリーム）
     --color_main                                         : #cb251c（差し色の赤）
     --color_htag                                         : #931d3f（見出しの梅紫）

   明度を三層に分ける：
     ペーパー #fffdfa  →  クリーム帯 #f6e9d2  →  濃色面 #4a0f13
   前の版は背景がすべて95〜100%の明度に固まっていてセクションが分離しなかった。

   差し色の赤は CTA だけに使う。構造色（ワイン）と役割を分けることで、
   押す場所が一目で分かるようにする。公式サイトも赤をWEB予約ボタンに当てている。
   「要再検査」等のフラグは琥珀色のまま残す（ブランドの赤と混ざると警告に見えなくなる）。
   -------------------------------------------------------------------------- */
.lp-brand-jimbocho {
  /* 構造色：ワイン */
  --lp-green: #6f1419;
  --lp-green-deep: #561014;
  --lp-green-dark: #4a0f13;
  --lp-green-tint: #f6e6e2;
  --lp-green-line: #dcc3a4;

  /* 文字：ほぼ黒に振ってコントラストを稼ぐ */
  --lp-ink: #1d1214;
  --lp-body: #2f2224;
  --lp-muted: #61504f;

  /* 三層の地色。sand と mist の明度差・色相差をはっきりさせる */
  --lp-paper: #fffdfa;
  --lp-sand: #f6e9d2;
  --lp-mist: #f9efec;
  --lp-line: #e0d0bd;

  --lp-shadow-rgb: 45, 22, 25;
  --lp-sh: 0 2px 10px rgba(var(--lp-shadow-rgb), 0.07);
  --lp-sh-lg: 0 14px 36px rgba(var(--lp-shadow-rgb), 0.14);

  /* CTA：差し色の赤。白文字とのコントラスト 5.5:1 */
  --lp-cta-bg: #cb251c;
  --lp-cta-bg-hover: #a31a13;
  --lp-cta-fg: #ffffff;
  --lp-cta-shadow: 0 6px 18px rgba(203, 37, 28, 0.30);
  --lp-cta-shadow-hi: 0 12px 26px rgba(203, 37, 28, 0.40);
  --lp-oncolor-btn-hover: #fdf1ec;

  /* ヒーローは薄いグラデーションではなく、クリームへ落とす */
  --lp-hero-glow: rgba(111, 20, 25, 0.13);
  --lp-hero-from: #fffaf1;
  --lp-hero-to: #f2e0c3;
  --lp-mark: rgba(203, 37, 28, 0.26);

  --lp-alert: #9c5a12;
  --lp-alert-bg: #fdf4e5;
  --lp-alert-line: #e6cfa8;
}

/* 見出しはブランドの梅紫寄りのワイン。本文の墨色と役割を分ける */
.lp-brand-jimbocho .lp-sec-head__title,
.lp-brand-jimbocho .lp-hero__title,
.lp-brand-jimbocho .lp-risk__name,
.lp-brand-jimbocho .lp-pillar__title,
.lp-brand-jimbocho .lp-clinic__name,
.lp-brand-jimbocho .lp-access__name { color: #7a1226; }

/* 濃色面はクリームの文字を乗せる（ブランドの組み合わせそのもの） */
.lp-brand-jimbocho .lp-final__lead { color: #f3e2c4; }
.lp-brand-jimbocho .lp-turn p { color: #f1e0c2; }
.lp-brand-jimbocho .lp-footer { color: #eddcbe; }
.lp-brand-jimbocho .lp-footer p { color: #e3d1b1; }
.lp-brand-jimbocho .lp-footer a { color: #f8ebce; }
.lp-brand-jimbocho .lp-footer__bottom { color: #cdb894; }

/* ラベル類は濃いワインで、クリーム地の上でもはっきり読ませる */
.lp-brand-jimbocho .lp-sec-head__eyebrow { color: #7a1226; background: #f6e6e2; }
.lp-brand-jimbocho .lp-hero__tag { color: #6f1419; border-color: #dcc3a4; }
.lp-brand-jimbocho .lp-hero__trust li { color: #561014; }

/* カードはクリーム帯の上に白で置き、輪郭を効かせる */
.lp-brand-jimbocho .lp-section--sand .lp-risk__card,
.lp-brand-jimbocho .lp-section--sand .lp-exam,
.lp-brand-jimbocho .lp-section--mist .lp-pillar,
.lp-brand-jimbocho .lp-section--mist .lp-faq__item { border-color: #e6d3bb; }

/* STEP バッジは差し色ではなく構造色。CTA と競合させない */
.lp-brand-jimbocho .lp-flow__badge { background: #6f1419; }

/* 院ロゴ入りヘッダー：ロゴと WEB予約 ボタンを、どの画面幅でも必ず両方出す。
   ヘッダー自体は position: sticky なので、スクロールしても予約ボタンが常に見える。

   神保町のロゴは 613x64 の横長で、高さ1pxあたり約9.6pxの幅を食う。
   段階的に高さを落として、いちばん狭い画面でもボタンと並ぶようにしている。
     375px幅の内訳：余白37 + ロゴ211(高さ22px) + 間隔10 + ボタン約72 = 330px < 375px */
.lp-header__logo--clinic { height: 44px; width: auto; max-width: 100%; }
.lp-header--clinic-logo .lp-header__org { display: none; }
.lp-header--clinic-logo .lp-header__sub { font-size: 0.76rem; }
.lp-header--clinic-logo .lp-header__brand { min-width: 0; flex: 0 1 auto; overflow: hidden; }
.lp-header--clinic-logo .lp-header__actions { flex: none; }
.lp-header--clinic-logo .lp-header__cta { white-space: nowrap; }

@media (max-width: 900px) {
  .lp-header--clinic-logo .lp-header__sub { display: none; }
  .lp-header__logo--clinic { height: 38px; }
}
@media (max-width: 680px) {
  .lp-header__logo--clinic { height: 30px; }
  .lp-header--clinic-logo .lp-header__inner { gap: 0.6rem; }
  .lp-header--clinic-logo .lp-header__cta {
    min-height: 40px;
    padding: 0.45em 0.9em;
    font-size: 0.85rem;
  }
}
@media (max-width: 430px) {
  .lp-header__logo--clinic { height: 22px; }
  .lp-header--clinic-logo .lp-header__cta {
    min-height: 38px;
    padding: 0.45em 0.75em;
    font-size: 0.8rem;
  }
}


/* --- 地図の埋め込み ------------------------------------------------------- */
.lp-access__mapwrap {
  margin-top: clamp(1rem, 2.5vw, 1.5rem);
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-lg);
  overflow: hidden;
  box-shadow: var(--lp-sh);
}
.lp-access__mapwrap iframe {
  display: block;
  width: 100%;
  height: clamp(260px, 40vw, 380px);
  border: 0;
}

/* 電話導線を出さない拠点では、CTAが1本になる。
   追従バーとボタン行が間延びしないように整える。 */
.lp-sticky .lp-btn:only-child { flex: 1; }
.lp-hero .lp-btn-row:has(.lp-btn:only-child) .lp-btn { min-width: min(100%, 22rem); }


/* --- 白抜きロゴの拠点向け：濃色ヘッダー -----------------------------------
   神保町の公式ロゴはアートワークが #ffffff の白抜きで、公式サイトの
   ヘッダー地色（#6f1419）に乗せる前提で作られている。
   明るいヘッダーに置くと完全に見えないため、同じ濃色地を用意する。

   この地色の上では、本文用の赤CTA（#cb251c）はコントラストが 2.1:1 しかなく
   ボタンとして浮かない。ヘッダーのCTAだけ白抜きに反転させる（10.7:1）。
   -------------------------------------------------------------------------- */
.lp-header--dark {
  color: #fff;
  background: var(--lp-green);
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  backdrop-filter: none;
}
.lp-header--dark .lp-header__org { color: #fff; }
.lp-header--dark .lp-header__sub { color: rgba(248, 235, 206, 0.85); }
.lp-header--dark .lp-header__tel { color: #f8ebce; }

.lp-header--dark .lp-header__cta,
.lp-header--dark .lp-header__cta:hover {
  background: #fff;
  color: var(--lp-green-dark);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}
.lp-header--dark .lp-header__cta:hover { background: #fdf1ec; }
.lp-header--dark .lp-header__cta:focus-visible { outline-color: #fff; }


/* --- 拠点カードの疾患ごとの一言（疾患別ハブLP） --- */
.lp-clinic__note {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--lp-green-dark);
  background: var(--lp-green-tint);
  border-left: 3px solid var(--lp-green);
  border-radius: 0 var(--lp-r-sm) var(--lp-r-sm) 0;
  padding: 0.55rem 0.85rem;
  margin: 0 0 1rem;
  line-height: 1.7;
}

/* =====================================================================
   拠点ブランド：街のクリニック立川・村山（/diabetes/tachikawa/）
   公式サイト（tamagawa-josui.com）の配色：ティール #1B9A9C／茶 #572E04／差し色の赤 #C92E43。
   ティールは白文字と 3.5:1 しか取れないので、構造色は一段濃い #146f71（5.4:1）に振る。
   ロゴは白地用（茶文字）なのでヘッダーは白のまま。
   ===================================================================== */
.lp-brand-tachikawa {
  --lp-green: #146f71;
  --lp-green-deep: #105a5c;
  --lp-green-dark: #0c4647;
  --lp-green-tint: #e4f4f4;
  --lp-green-line: #bfe1e1;

  --lp-ink: #23180d;
  --lp-body: #3a2c1e;
  --lp-muted: #6a5b4b;

  --lp-paper: #ffffff;
  --lp-sand: #f8f2e6;
  --lp-mist: #ecf7f6;
  --lp-line: #e3dccf;

  --lp-shadow-rgb: 20, 60, 60;
  --lp-sh: 0 2px 10px rgba(var(--lp-shadow-rgb), 0.06);
  --lp-sh-lg: 0 14px 36px rgba(var(--lp-shadow-rgb), 0.13);

  /* CTA：公式サイトの差し色の赤。白文字とのコントラスト 5.8:1 */
  --lp-cta-bg: #c92e43;
  --lp-cta-bg-hover: #a8243a;
  --lp-cta-fg: #ffffff;
  --lp-cta-shadow: 0 6px 18px rgba(201, 46, 67, 0.28);
  --lp-cta-shadow-hi: 0 12px 26px rgba(201, 46, 67, 0.38);
  --lp-oncolor-btn-hover: #fdf3ef;

  --lp-hero-glow: rgba(27, 154, 156, 0.14);
  --lp-hero-from: #fffdf8;
  --lp-hero-to: #e6f4f2;
  --lp-mark: rgba(201, 46, 67, 0.26);

  --lp-alert: #9c5a12;
  --lp-alert-bg: #fdf6ea;
  --lp-alert-line: #ecd9b8;
}

/* 見出しはロゴの茶。本文の墨色と役割を分ける */
.lp-brand-tachikawa .lp-sec-head__title,
.lp-brand-tachikawa .lp-hero__title,
.lp-brand-tachikawa .lp-risk__name,
.lp-brand-tachikawa .lp-pillar__title,
.lp-brand-tachikawa .lp-clinic__name,
.lp-brand-tachikawa .lp-access__name { color: #572e04; }

/* ラベル類はティール */
.lp-brand-tachikawa .lp-sec-head__eyebrow { color: #146f71; background: #e4f4f4; }
.lp-brand-tachikawa .lp-hero__tag { color: #146f71; border-color: #bfe1e1; }
.lp-brand-tachikawa .lp-hero__trust li { color: #105a5c; }

/* カードはクリーム帯・ミスト帯の上に白で置き、輪郭を効かせる */
.lp-brand-tachikawa .lp-section--sand .lp-risk__card,
.lp-brand-tachikawa .lp-section--sand .lp-exam,
.lp-brand-tachikawa .lp-section--mist .lp-pillar,
.lp-brand-tachikawa .lp-section--sand .lp-faq__item { border-color: #e0d6c3; }

/* STEP バッジは構造色。CTA の赤と競合させない */
.lp-brand-tachikawa .lp-flow__badge { background: #146f71; }

/* 立川のロゴは 372x99（幅/高さ 3.76）。神保町（9.6）より短いので既定の高さ制御で収まる。
   ただし8列の診療時間表（月〜祝）は狭い画面で横スクロールにする */
.lp-brand-tachikawa .lp-hours-table th,
.lp-brand-tachikawa .lp-hours-table td { white-space: nowrap; }