/*
 * 鉄道マップ全国版 — テキストコンテンツページ共通スタイル
 *
 * 適用範囲: /about, /privacy, /terms, /faq, /routes/*, /topics/*, /trips/* など
 *           マップ画面 (/) には適用しない (index.html は専用CSS)。
 *
 * 設計方針:
 *  - 読みやすさ最優先。max-width 720px のシングルカラム
 *  - 日本語フォントは OS 標準を使用 (BlinkMacSystemFont / Hiragino)
 *  - 色は薄いブルー基調 (#2563eb)。マップ画面と同系統で統一感
 *  - レスポンシブ: 600px以下でパディング・フォントサイズ調整
 */

:root {
  --color-bg: #fafafa;
  --color-surface: #ffffff;
  --color-text: #1a202c;
  --color-text-muted: #64748b;
  --color-accent: #2563eb;
  --color-accent-hover: #1d4ed8;
  --color-border: #e2e8f0;
  --color-warning-bg: #fef3c7;
  --color-warning-border: #f59e0b;
  --max-width: 720px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", "Helvetica Neue", Arial, sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.75;
}
img { max-width: 100%; height: auto; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-hover); text-decoration: underline; }

/* ─────────────────────────────────────────────────────────────
   サイトヘッダー (全コンテンツページ共通)
   ───────────────────────────────────────────────────────────── */
.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; z-index: 100;
}
.site-header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 12px 16px;
  display: flex; align-items: center;
  gap: 24px; flex-wrap: wrap;
}
.site-logo {
  font-size: 16px; font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.02em;
}
.site-logo:hover { color: var(--color-text); text-decoration: none; }
.site-nav { display: flex; gap: 20px; font-size: 14px; }
.site-nav a {
  color: var(--color-text-muted); font-weight: 500;
}
.site-nav a:hover { color: var(--color-accent); text-decoration: none; }
.site-nav a[aria-current="page"] {
  color: var(--color-accent); font-weight: 600;
}
/* ハンバーガーボタン。デスクトップでは常に非表示。
   スマホ(≤600px)かつ JS 有効時のみ表示（site-nav.js が html.js を付与）。
   アイコンは ☰ グリフに依存せず CSS で3本バーを描画（環境差で消えない）。 */
.nav-toggle {
  display: none;            /* 表示切替は ≤600px の html.js ルールで行う */
  position: relative;
  align-items: center; justify-content: center;
  width: 40px; height: 36px; padding: 0;
  border: 1px solid var(--color-text-muted); border-radius: 8px;
  background: var(--color-surface); cursor: pointer;
  font-size: 0;             /* button 内の ☰ テキストを視覚的に隠す（aria-labelで読み上げ担保） */
}
.nav-toggle::before {
  content: ""; width: 18px; height: 2px; border-radius: 2px;
  background: var(--color-text);
  box-shadow: 0 -6px 0 var(--color-text), 0 6px 0 var(--color-text);
}

/* ─────────────────────────────────────────────────────────────
   パンくず
   ───────────────────────────────────────────────────────────── */
.breadcrumb {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 12px 16px 0;
  font-size: 13px;
  color: var(--color-text-muted);
}
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb__separator { margin: 0 6px; opacity: 0.5; }

/* ─────────────────────────────────────────────────────────────
   記事本体
   ───────────────────────────────────────────────────────────── */
.article {
  max-width: var(--max-width);
  margin: 16px auto 32px;
  padding: 32px 28px 40px;
  background: var(--color-surface);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.article h1 {
  font-size: 28px; line-height: 1.4;
  margin: 0 0 8px;
}
.article h2 {
  font-size: 22px; line-height: 1.4;
  margin: 36px 0 14px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--color-border);
}
.article h3 {
  font-size: 17px; line-height: 1.4;
  margin: 24px 0 10px;
}
.article p { margin: 0 0 16px; }
.article ul, .article ol { margin: 0 0 16px; padding-left: 24px; }
.article li { margin-bottom: 6px; }
.article blockquote {
  margin: 16px 0;
  padding: 12px 16px;
  border-left: 4px solid var(--color-accent);
  background: var(--color-bg);
  color: var(--color-text-muted);
}
.article table {
  width: 100%; border-collapse: collapse;
  margin: 16px 0; font-size: 14px;
}
.article th, .article td {
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  text-align: left; vertical-align: top;
}
.article th { background: var(--color-bg); font-weight: 600; }
.article code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--color-bg);
  padding: 2px 6px;
  border-radius: 3px;
}

.page-meta {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0 0 24px;
}

/* ─────────────────────────────────────────────────────────────
   記事冒頭のヒーロー画像
   ・OGP 画像（assets/og/{slug}.jpg）を記事本文の冒頭にも掲載するためのラッパー
   ・サムネ画像が用意されている記事のみ使用。未指定の記事では <figure> ごと省略
   ───────────────────────────────────────────────────────────── */
/* 記事ヒーロー（テキストサムネ）はページ内では非表示（PC・スマホ共通）。
   サムネの本来の役割は OGP/SNS カード（<head> の <meta> 側）に限定する。
   本文冒頭の hero はすぐ上の h1 と同内容の繰り返しで、初期画面を占有して
   「要点3つ」を画面外へ押し下げてしまうため省略し、読むハードルを下げる。
   2026-06 ファーストビュー最適化。再表示したい場合は display:block に戻す。 */
.article-hero {
  display: none;
  margin: 4px 0 24px;
}
.article-hero img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 6px;
}

/* ─────────────────────────────────────────────────────────────
   トップページ（記事中心ランディング）
   ・サイト訪問者に「マップ＆コンテンツが両方そろうブログ的サイト」と
     すぐに伝わるよう、ヒーロー＋カテゴリ別カードグリッド構成
   ・ASP/SEO 観点で content-rich なホームを実現するための専用スタイル
   ───────────────────────────────────────────────────────────── */
.home {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 16px;
}
.home-hero {
  text-align: center;
  margin: 16px 0 28px;
  padding: 36px 20px 32px;
  background: linear-gradient(135deg, #dbeafe 0%, #ede9fe 100%);
  border-radius: 12px;
}
.home-hero__title {
  font-size: 32px;
  line-height: 1.3;
  margin: 0 0 10px;
  letter-spacing: 0.02em;
}
.home-hero__tagline {
  font-size: 17px;
  font-weight: 600;
  color: #475569;
  margin: 0 0 14px;
}
.home-hero__desc {
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text);
  margin: 0 auto 22px;
  max-width: 540px;
}
.home-hero__cta {
  display: inline-block;
  background: var(--color-accent);
  color: white !important;
  padding: 14px 32px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 16px;
}
.home-hero__cta:hover {
  background: var(--color-accent-hover);
  text-decoration: none;
}

.home-section {
  margin: 36px 0;
  padding: 0 2px;
}
.home-section > h2 {
  font-size: 22px;
  line-height: 1.4;
  margin: 0 0 14px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--color-border);
}
.home-section__more {
  text-align: right;
  font-size: 14px;
  margin: 14px 0 0;
}
.home-section__placeholder {
  color: var(--color-text-muted);
  font-size: 14px;
  margin: 10px 0 0;
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
  margin: 16px 0 0;
}
.article-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}
.article-card a {
  display: block;
  color: var(--color-text);
}
.article-card a:hover {
  text-decoration: none;
}
.article-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}
.article-card__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.article-card__body {
  padding: 14px 16px 16px;
}
.article-card__cat {
  font-size: 11px;
  color: var(--color-accent);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0 0 4px;
  text-transform: uppercase;
}
.article-card__title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 6px;
  line-height: 1.4;
  color: var(--color-text);
}
.article-card__desc {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.6;
}

.home-about {
  margin: 40px 0 24px;
  padding: 24px 26px;
  background: var(--color-surface);
  border-radius: 8px;
  border: 1px solid var(--color-border);
}
.home-about h2 {
  font-size: 19px;
  margin: 0 0 12px;
  border: none;
  padding: 0;
}
.home-about p {
  font-size: 14px;
  margin: 0 0 12px;
  line-height: 1.8;
}
.home-about p:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  .home { padding: 0 12px; }
  .home-hero { padding: 28px 16px 28px; margin-top: 12px; }
  .home-hero__title { font-size: 26px; }
  .home-hero__tagline { font-size: 15px; }
  .home-hero__desc { font-size: 13.5px; }
  .home-hero__cta { padding: 12px 28px; font-size: 15px; }
  .home-section > h2 { font-size: 19px; }
  .article-grid { grid-template-columns: 1fr; gap: 16px; }
  .home-about { padding: 20px 20px; }
}

/* ─────────────────────────────────────────────────────────────
   記事 TTS (Text-to-Speech) ウィジェット
   ・記事ページの右下に折りたたみ式の音声読み上げボタン
   ・収納時は丸い FAB、展開時はコントロールパネル
   ・読み上げ中の段落／バルーンをハイライト
   ───────────────────────────────────────────────────────────── */
.tts-widget {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 1000;
  font-family: inherit;
}

.tts-widget__fab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--color-accent);
  color: white;
  border: none;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  font-family: inherit;
}
.tts-widget__fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  background: var(--color-accent-hover);
}
.tts-widget__fab-icon { font-size: 14px; line-height: 1; }

.tts-widget[data-state="expanded"] .tts-widget__fab { display: none; }
.tts-widget[data-state="collapsed"] .tts-widget__panel { display: none; }

.tts-widget__panel {
  width: 250px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
  padding: 14px 16px 12px;
  border: 1px solid var(--color-border);
}

.tts-widget__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.tts-widget__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
}
.tts-widget__close {
  background: none;
  border: none;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 4px 8px;
  border-radius: 4px;
  font-family: inherit;
}
.tts-widget__close:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

.tts-widget__controls {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}
.tts-widget__controls button {
  flex: 1;
  min-height: 34px;
  padding: 6px 4px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--color-border);
  background: white;
  border-radius: 6px;
  cursor: pointer;
  color: var(--color-text);
  white-space: nowrap;
  font-family: inherit;
}
.tts-widget__controls button:hover { background: var(--color-bg); }
.tts-widget__play,
.tts-widget__pause {
  background: var(--color-accent) !important;
  color: white !important;
  border-color: var(--color-accent) !important;
}
.tts-widget__play:hover,
.tts-widget__pause:hover {
  background: var(--color-accent-hover) !important;
  border-color: var(--color-accent-hover) !important;
}
.tts-widget__skip { flex: 0 0 36px; min-width: 36px; }

.tts-widget__rate {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.tts-widget__rate label {
  font-size: 12px;
  color: var(--color-text-muted);
}
.tts-widget__rate select {
  flex: 1;
  padding: 5px 8px;
  font-size: 13px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: white;
  font-family: inherit;
  color: var(--color-text);
}

.tts-widget__note {
  margin: 0;
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* センテンス単位ハイライト（カラオケ風追従） */
.tts-sentence {
  /* base span — 通常は無装飾 */
}
.tts-sentence.tts-reading {
  background: linear-gradient(180deg, transparent 58%, #fef08a 58%);
  border-radius: 2px;
  transition: background 0.15s ease;
}
/* バルーン内のセンテンスハイライト（吹き出しの背景と区別するため濃いめ） */
.speech__bubble .tts-sentence.tts-reading {
  background: #fde047;
  padding: 0 3px;
  margin: 0 -3px;
  border-radius: 3px;
}
/* テーブル行（センテンス wrap しないブロック）はブロック単位でハイライト */
tr.tts-reading {
  background: #fef9c3 !important;
}
tr.tts-reading td, tr.tts-reading th { background: transparent; }

@media (max-width: 600px) {
  .tts-widget {
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  /* スマホでは FAB を丸ボタンに */
  .tts-widget__fab {
    padding: 0;
    width: 52px;
    height: 52px;
    justify-content: center;
    border-radius: 50%;
  }
  .tts-widget__fab-icon { font-size: 18px; }
  .tts-widget__fab-label { display: none; }
  .tts-widget__panel { width: 230px; }
}

/* ─────────────────────────────────────────────────────────────
   マップへの誘導 CTA (記事中・記事末に挿入)
   ───────────────────────────────────────────────────────────── */
.map-cta {
  margin: 32px 0;
  padding: 24px;
  background: linear-gradient(135deg, #dbeafe 0%, #ede9fe 100%);
  border-radius: 10px;
  text-align: center;
}
.map-cta__title {
  font-size: 17px; font-weight: 700;
  margin: 0 0 8px;
  color: #1e293b;
}
.map-cta__desc {
  margin: 0 0 16px;
  color: #475569;
  font-size: 14px;
}
.map-cta__button {
  display: inline-block;
  background: var(--color-accent);
  color: white !important;
  padding: 10px 24px;
  border-radius: 6px;
  font-weight: 600; font-size: 14px;
}
.map-cta__button:hover {
  background: var(--color-accent-hover);
  text-decoration: none;
}

/* ─────────────────────────────────────────────────────────────
   アフィリエイト CTA (記事内に1つだけ置く控えめな行動喚起ブロック)
   ・本文テキストリンクとは別に、まとめ前後で1回だけ使う想定
   ・⚠ ASP規約の「リンク本体(<a>)改変禁止」に抵触しないよう、提供リンクの
     <a> はそのまま置き、外側(.affiliate-cta a)からCSSでボタン化する
   ・色は案件別に .affiliate-cta--{brand} で上書きする想定（既定は楽天向け赤系）
   ───────────────────────────────────────────────────────────── */
.affiliate-cta {
  margin: 28px 0; padding: 20px 18px; text-align: center;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 10px;
}
.affiliate-cta__label {
  font-size: 15px; font-weight: 700; color: var(--color-text);
  margin: 0 0 14px;
}
/* 提供リンク <a> は改変禁止のため、親から装飾してボタン化する */
.affiliate-cta a {
  display: inline-block; background: #bf0000; color: #fff !important;
  padding: 12px 28px; border-radius: 8px; font-weight: 700; font-size: 16px;
  text-decoration: none; max-width: 100%;
}
.affiliate-cta a:hover { background: #a00000; text-decoration: none; }
.affiliate-cta__note {
  font-size: 11px; color: var(--color-text-muted); margin: 12px 0 0;
}

/* 2案件並列CTA（例: 楽天＋じゃらん）。ブロック内に <a> を2つ直接置くと
   等幅2カラムのボタンになる（余白12px）。__label/__note は全幅行、
   モバイルは縦積み。 */
.affiliate-cta--duo {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
  gap: 12px;
}
.affiliate-cta--duo .affiliate-cta__label,
.affiliate-cta--duo .affiliate-cta__note { flex-basis: 100%; margin: 0; }
.affiliate-cta--duo a { flex: 1 1 0; min-width: 0; margin: 0; }
/* 2番目のボタン＝じゃらん想定。提供リンク <a> に class を付けられない
   （byte一致厳守）ため nth-of-type(2) でフックして色分けする。
   白文字のコントラスト比4.5:1以上を満たす濃いオレンジを使用
   （淡いオレンジは不可: #d35400=4.17:1でNG。採用 #c2410c=5.18:1 / hover #9a3412=7.31:1）。
   ⚠ ブロック内に他の <a>（note内リンク等）を置くと nth-of-type がずれるので置かない。 */
.affiliate-cta--duo a:nth-of-type(2) { background: #c2410c; }
.affiliate-cta--duo a:nth-of-type(2):hover { background: #9a3412; }

/* ─────────────────────────────────────────────────────────────
   注意書きバナー (情報の鮮度・正確性を明示)
   ───────────────────────────────────────────────────────────── */
.disclaimer {
  margin: 20px 0;
  padding: 12px 16px;
  background: var(--color-warning-bg);
  border-left: 4px solid var(--color-warning-border);
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.disclaimer strong { color: #92400e; }

/* ─────────────────────────────────────────────────────────────
   スピーチバルーン (記事中に挟む読者代弁コメント)
   ・サイト運営者の素朴な反応を見出しの前後に挟むことで、
     淡々と続く解説文の "AIっぽさ" を破り E-E-A-T を強化する。
   ・記事執筆時は .speech--draft を付けたプレースホルダを置く。
     コメント入力後に --draft を外して本番表示に。
   ───────────────────────────────────────────────────────────── */
.speech {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 22px 0;
  max-width: 92%;
}
.speech__avatar {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px;
  background: #fef3c7;
  border-radius: 50%;
  flex-shrink: 0;
}
.speech__bubble {
  position: relative;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 14px;
  padding: 10px 16px;
  font-size: 14px;
  line-height: 1.65;
  color: #44403c;
}
/* 吹き出しの三角しっぽ (アバター側) */
.speech__bubble::before,
.speech__bubble::after {
  content: '';
  position: absolute;
  top: 14px;
  width: 0; height: 0;
  border-style: solid;
}
.speech__bubble::before {
  left: -8px;
  border-width: 6px 8px 6px 0;
  border-color: transparent #fed7aa transparent transparent;
}
.speech__bubble::after {
  left: -7px;
  border-width: 6px 8px 6px 0;
  border-color: transparent #fff7ed transparent transparent;
}

/* DRAFT 状態: 未編集が一目で分かる派手なスタイル。
   コメント入力後は HTML から speech--draft クラスを外す。 */
.speech--draft .speech__bubble {
  background: #fef9c3;
  border: 2px dashed #eab308;
  color: #854d0e;
  font-style: italic;
}
.speech--draft .speech__bubble::before {
  border-color: transparent #eab308 transparent transparent;
}
.speech--draft .speech__bubble::after { display: none; }

@media (max-width: 600px) {
  .speech { gap: 8px; margin: 18px 0; }
  .speech__avatar { width: 34px; height: 34px; font-size: 19px; }
  .speech__bubble { font-size: 13px; padding: 8px 12px; }
}

/* ─────────────────────────────────────────────────────────────
   お問い合わせフォーム (Google Forms iframe ラッパー)
   ───────────────────────────────────────────────────────────── */
.contact-form {
  margin: 20px 0;
}
.contact-form iframe {
  width: 100%;
  min-height: 820px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  display: block;
}
.contact-form__fallback {
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ─────────────────────────────────────────────────────────────
   関連リンクセクション (記事末に配置)
   ───────────────────────────────────────────────────────────── */
.related {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}
.related h2 {
  font-size: 18px;
  margin: 0 0 16px;
  padding: 0; border: none;
}
.related ul { list-style: none; padding: 0; margin: 0; }
.related li {
  border-bottom: 1px solid var(--color-border);
  padding: 12px 0;
}
.related li:last-child { border-bottom: none; }
.related a {
  display: block; font-weight: 600;
}
.related__desc {
  font-size: 13px; color: var(--color-text-muted);
  font-weight: normal;
  margin-top: 2px;
}

/* ─────────────────────────────────────────────────────────────
   サイトフッター (全コンテンツページ共通)
   ───────────────────────────────────────────────────────────── */
.site-footer {
  margin-top: 48px;
  padding: 40px 16px 24px;
  background: #1f2937;
  color: #cbd5e1;
  font-size: 13px;
}
.site-footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}
.site-footer h4 {
  color: white;
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
}
.site-footer__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: #cbd5e1; }
.site-footer a:hover { color: white; }
.site-footer__notice {
  font-size: 12px; color: #94a3b8;
  line-height: 1.6;
}
.site-footer__copyright {
  border-top: 1px solid #374151;
  padding-top: 20px; margin-top: 8px;
  text-align: center;
  color: #94a3b8;
  font-size: 12px;
}

/* ─────────────────────────────────────────────────────────────
   レスポンシブ (スマホ・タブレット縦)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .article {
    margin: 0 0 16px;
    border-radius: 0;
    padding: 24px 18px 32px;
    box-shadow: none;
  }
  .article h1 { font-size: 23px; }
  .article h2 { font-size: 19px; margin-top: 28px; }
  .article h3 { font-size: 16px; }
  .site-header__inner { gap: 16px; padding: 10px 14px; position: relative; }
  .site-logo { font-size: 15px; }

  /* --- no-JS フォールバック: ナビを1行の横スクロールに（各項目の2行折返しを防ぐ） --- */
  .site-nav {
    gap: 14px; font-size: 13px;
    flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; max-width: 100%;
  }
  .site-nav a { white-space: nowrap; flex: 0 0 auto; }

  /* --- JS 有効時: ハンバーガー化（ファーストビューを縦に広く使う） --- */
  html.js .nav-toggle { display: inline-flex; margin-left: auto; }
  html.js .site-nav {
    display: none; position: absolute; top: 100%; right: 12px;
    flex-direction: column; gap: 0; overflow: visible;
    min-width: 200px; padding: 6px 0; margin-top: 4px;
    background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  }
  html.js .site-nav.open { display: flex; }
  html.js .site-nav a { padding: 10px 18px; }

  .breadcrumb { padding: 10px 14px 0; font-size: 12px; }
  .map-cta { padding: 20px 16px; }
  .affiliate-cta a { display: block; padding: 14px; }
  .affiliate-cta--duo { flex-direction: column; }
  .affiliate-cta--duo a { flex: 0 0 auto; width: 100%; }
  .site-footer__cols { grid-template-columns: 1fr; gap: 24px; }
}

/* ─────────────────────────────────────────────────────────────
   要点3つまとめ（記事冒頭・最初のh2前）
   ・結論を早く知りたい / 長文が苦手な読者向けの "まずはここだけ" ボックス
   ・青基調（--color-accent）。✅マーカーは ::before で自動付与
   ───────────────────────────────────────────────────────────── */
.keypoints {
  border: 2px solid var(--color-accent);
  border-radius: 12px;
  margin: 22px 0 28px;
  overflow: hidden;
  background: #eff5ff;
}
.keypoints__title {
  background: var(--color-accent);
  color: #fff; font-weight: 800; font-size: 15px;
  margin: 0; padding: 10px 16px; letter-spacing: .02em;
}
.keypoints ul { list-style: none; margin: 0; padding: 14px 16px; }
.keypoints li {
  position: relative; padding-left: 1.8em; margin: .55em 0;
  font-size: 15.5px; line-height: 1.7;
}
.keypoints li::before { content: "✅"; position: absolute; left: 0; top: .05em; }