/* ハレルカ — 晴れ空トーン（設計書 §0-16）
 *
 * 白 × スカイブルー #58B4E8系 × サンセットオレンジ #F2803B系（1画面1〜2箇所まで）。
 * 背景の空色は晴れ確率に連動して JS が --sky-top / --sky-bottom を書き換える。
 *
 * UIテク（reference_ui_microinteractions）：
 *   #1 text-wrap balance/pretty ／ #3 font-smoothing ／ #4 tabular-nums（数値すべて）
 *   #5 多層box-shadow ／ #9 中断可能なtransition ／ #10 stagger ／ #12 結果カード骨格の固定高
 */

/* 空色をアニメーションさせるには、色として型を登録しておく必要がある
   （未登録のカスタムプロパティは transition が効かず、色が瞬間で切り替わる）。
   @property 非対応ブラウザでは単に瞬時切り替えになるだけで、表示は壊れない。 */
@property --sky-top {
  syntax: "<color>";
  inherits: true;
  initial-value: #dcf0fb;
}
@property --sky-bottom {
  syntax: "<color>";
  inherits: true;
  initial-value: #a9dcf5;
}

:root {
  --sky-top: #dcf0fb;
  --sky-bottom: #a9dcf5;

  --blue: #58b4e8;
  --blue-deep: #2176b8;
  --blue-ink: #123a55;
  --orange: #f2803b;

  --ink: #16303f;
  --ink-soft: #4a6274;
  --ink-faint: #7d92a1;
  --paper: #ffffff;
  --paper-sunken: #f2f7fa;
  --line: #d9e5ec;

  --radius: 16px;
  --wrap: 1080px;
}

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

html {
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 62%, #eef5f8 100%);
  background-attachment: fixed;
  transition: --sky-top .6s ease, --sky-bottom .6s ease;
}

body {
  margin: 0;
  font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-wrap: pretty;
}

h1, h2, h3 { text-wrap: balance; line-height: 1.4; }

.num, .temps, .temp-range, .rank-val, .card-period, input[type="range"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

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

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── ヘッダー ─────────────────────────────── */

.site-header { padding: 26px 0 14px; }
.site-header .wrap { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--blue-ink); }
.brand-mark {
  width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, #ffd88a 0%, #f8b34a 46%, var(--orange) 100%);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .55), 0 2px 10px rgba(242, 128, 59, .35);
}
.brand-name { font-size: 27px; font-weight: 800; letter-spacing: .06em; }
/* h1（ページの主題）。見た目はブランド名の下に添えるタグラインのまま */
.tagline { margin: 0; font-size: 14.5px; font-weight: 500; line-height: 1.5; color: var(--ink-soft); }

/* ── タブ ─────────────────────────────────── */

.tabs { display: flex; gap: 8px; margin: 8px 0 18px; }
.tab {
  flex: 1 1 0; padding: 13px 10px; border: 0; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 15.5px;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, .58);
  border-radius: 12px 12px 0 0;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.tab[aria-selected="true"] {
  color: var(--blue-ink);
  background: var(--paper);
  box-shadow: 0 -1px 0 rgba(18, 58, 85, .05), 0 -6px 18px rgba(18, 58, 85, .07);
}
.tab:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 2px; }

.panel { animation: fade .3s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.alert {
  margin: 0 0 14px; padding: 12px 14px; border-radius: 10px;
  background: #fdecea; color: #8a2b20; font-size: 14.5px;
}

/* ── 選択エリア ───────────────────────────── */

.picker {
  display: grid; grid-template-columns: 1.9fr 1fr; gap: 20px;
  padding: 18px; margin-bottom: 16px;
  background: var(--paper); border-radius: var(--radius);
  box-shadow: 0 1px 1px rgba(18, 58, 85, .05), 0 4px 12px rgba(18, 58, 85, .06), 0 12px 32px rgba(18, 58, 85, .05);
}
.picker-title { margin: 0 0 10px; font-size: 15px; font-weight: 800; color: var(--blue-ink); }

.search {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 15px;
  border: 1.5px solid var(--line); border-radius: 10px; background: var(--paper-sunken);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.search:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(88, 180, 232, .25); }

.spot-list {
  list-style: none; margin: 10px 0 0; padding: 4px;
  /* 観光地13件だけで埋まる高さにすると「都道府県の代表地点」が画面外になり、
     47都道府県を選べること自体が伝わらない。次の見出しと数行が覗く高さにする。 */
  max-height: 302px; overflow-y: auto; scrollbar-gutter: stable;
  display: flex; flex-wrap: wrap; gap: 6px;
  background: var(--paper-sunken); border-radius: 10px;
}
.spot-group {
  flex: 1 0 100%; margin: 6px 2px 2px; font-size: 12px; font-weight: 700;
  color: var(--ink-faint); letter-spacing: .04em;
}
.spot-btn {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 6px 11px; font: inherit; font-size: 14px; cursor: pointer;
  color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--line); border-radius: 999px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.spot-btn:hover { border-color: var(--blue); background: #f0f9ff; }
.spot-btn.is-active { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }
.spot-btn.is-active .spot-sub { color: rgba(255, 255, 255, .8); }
.spot-btn:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 2px; }
.spot-sub { font-size: 11.5px; color: var(--ink-faint); }
.spot-empty { margin: 10px 2px 0; font-size: 14px; color: var(--ink-soft); }

.date-row { display: flex; gap: 8px; }
.date-sel {
  flex: 1 1 0; padding: 10px 12px; font: inherit; font-size: 16px;
  border: 1.5px solid var(--line); border-radius: 10px; background: var(--paper-sunken);
}
.date-sel:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(88, 180, 232, .25); }

.jumps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip {
  padding: 6px 12px; font: inherit; font-size: 13.5px; cursor: pointer;
  color: var(--ink-soft); background: var(--paper-sunken);
  border: 1.5px solid var(--line); border-radius: 999px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.chip:hover { border-color: var(--blue); color: var(--blue-deep); }

.picker-note {
  margin-top: 14px; padding: 12px 14px;
  background: var(--paper-sunken); border-radius: 10px;
}
.picker-note p { margin: 0 0 6px; font-size: 13px; line-height: 1.65; color: var(--ink-soft); }
.picker-note p:last-child { margin-bottom: 0; }
.picker-note b { color: var(--ink); }

/* ── 結果カード ───────────────────────────── */

.card {
  background: var(--paper); border-radius: var(--radius); padding: 22px;
  box-shadow: 0 1px 1px rgba(18, 58, 85, .05), 0 5px 14px rgba(18, 58, 85, .07), 0 18px 44px rgba(18, 58, 85, .07);
}
/* 骨格の高さを確保して、地点や日付を変えてもレイアウトが跳ねないようにする */
.card-body { min-height: 640px; }

.card-head { margin-bottom: 6px; }
.card-spot { margin: 0; font-size: 28px; font-weight: 800; color: var(--blue-ink); }
.card-station { margin: 2px 0 0; font-size: 13px; color: var(--ink-faint); }
.card-date { margin: 6px 0 0; font-size: 17px; font-weight: 700; color: var(--ink-soft); }

.ring-wrap { display: flex; justify-content: center; padding: 10px 0 6px; }
.ring {
  --pct: 0;
  position: relative; width: 190px; height: 190px; border-radius: 50%;
  background:
    conic-gradient(var(--blue-deep) calc(var(--pct) * 1%), rgba(88, 180, 232, .16) 0);
  display: grid; place-items: center;
  transition: background .12s linear;
}
.ring::after {
  content: ""; position: absolute; inset: 21px; border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 0 1px 3px rgba(18, 58, 85, .09);
}
.ring-inner { position: relative; z-index: 1; text-align: center; line-height: 1.15; }
.ring-inner b {
  font-size: 58px; font-weight: 800; color: var(--blue-ink);
  font-variant-numeric: tabular-nums;
}
.ring-unit { font-size: 22px; font-weight: 700; color: var(--blue-ink); margin-left: 2px; }
.ring-cap { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-soft); }

.card-detail > * { animation: rise .34s ease both; }
.card-detail > *:nth-child(2) { animation-delay: .04s; }
.card-detail > *:nth-child(3) { animation-delay: .08s; }
.card-detail > *:nth-child(4) { animation-delay: .12s; }
.card-detail > *:nth-child(5) { animation-delay: .16s; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.sec-title {
  margin: 20px 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .06em;
  color: var(--ink-faint); border-bottom: 1px solid var(--line); padding-bottom: 5px;
}
.sec-title--lg { font-size: 15px; color: var(--blue-ink); }

.breakdown {
  display: flex; height: 26px; border-radius: 7px; overflow: hidden;
  background: var(--paper-sunken); min-height: 26px;
}
.bd-seg { display: block; transition: width .3s ease; }
.bd-legend {
  list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin: 9px 0 0; padding: 0; font-size: 13.5px; color: var(--ink-soft);
  min-height: 24px;
}
.bd-legend b { font-variant-numeric: tabular-nums; color: var(--ink); }
.bd-swatch { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; }
/* 高さを固定して、雪の有無でカードが伸び縮みしないようにする（CLS抑制） */
.snow-note { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-soft); min-height: 24px; }

.temps { display: flex; gap: 20px; margin: 0; font-size: 17px; }
.temp b { font-size: 30px; font-weight: 800; }
.temp--hi b { color: var(--orange); }
.temp--lo b { color: var(--blue-deep); }
.temp-range { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-faint); min-height: 21px; }
.wear { display: flex; align-items: center; gap: 9px; margin: 10px 0 0; font-size: 15px; min-height: 30px; }
.wear-icon { font-size: 24px; line-height: 1; }

.best { min-height: 132px; }
.best-head { margin: 0 0 10px; font-size: 15px; }
.best-head b { color: var(--blue-ink); }
.best-bars {
  list-style: none; display: flex; align-items: flex-end; gap: 5px;
  margin: 0; padding: 0; height: 92px;
}
.best-bar {
  flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; height: 100%; cursor: pointer; border-radius: 5px 5px 0 0;
  transition: background .15s ease;
}
.best-bar:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 2px; }
.best-bar:hover { background: rgba(88, 180, 232, .12); }
.best-bar-fill { width: 100%; border-radius: 4px 4px 0 0; transition: height .3s ease; }
.best-bar-label { font-size: 11px; color: var(--ink-faint); padding-top: 3px; font-variant-numeric: tabular-nums; }
.best-bar.is-current .best-bar-label { font-weight: 800; color: var(--ink); }
.best-bar.is-best .best-bar-fill { box-shadow: inset 0 0 0 2px var(--orange); }

.card-note { margin: 18px 0 0; font-size: 13px; color: var(--ink-soft); min-height: 20px; }
.card-disclaimer {
  margin: 8px 0 0; padding: 9px 12px; font-size: 12.5px; line-height: 1.6;
  color: var(--ink-soft); background: var(--paper-sunken);
  border-left: 3px solid var(--blue); border-radius: 0 8px 8px 0;
}
.card-period { margin: 6px 0 0; font-size: 12px; color: var(--ink-faint); }

.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.btn {
  padding: 10px 18px; font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer;
  color: var(--blue-ink); background: var(--paper);
  border: 1.5px solid var(--line); border-radius: 10px;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:hover { border-color: var(--blue); background: #f0f9ff; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 2px; }
.btn--primary { color: #fff; background: var(--blue-deep); border-color: var(--blue-deep); }
.btn--primary:hover { background: #1a63a0; border-color: #1a63a0; }
.btn--ghost { background: transparent; }
.share-msg { margin: 8px 0 0; font-size: 13px; color: var(--ink-soft); min-height: 20px; }

/* ── 地図（モードB） ─────────────────────────── */

.map-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.map-date-line { margin: 0; font-size: 16px; color: var(--ink-soft); }
.map-date-line b { font-size: 22px; color: var(--blue-ink); }

/* 地図と、凡例・ランキングの2カラム（地図の右に余白を残さない） */
.map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.map-main { min-width: 0; }
.map-side { min-width: 0; }
.map-side .sec-title:first-child { margin-top: 10px; }

.map-box {
  position: relative; margin: 10px auto 6px; padding: 10px;
  background: var(--paper); border-radius: var(--radius);
  box-shadow: 0 1px 1px rgba(18, 58, 85, .05), 0 5px 14px rgba(18, 58, 85, .07);
  /* 比率を先に確保して読み込み中のガタつきを消す */
  aspect-ratio: 1000 / 1130.5;
  max-height: 72vh;
}
.map { width: 100%; height: 100%; display: block; }
.map .pref {
  stroke: #ffffff; stroke-width: 1.1; stroke-linejoin: round;
  transition: opacity .12s ease;
}
.map .pref:hover { opacity: .75; cursor: pointer; }
.map .inset-frame { fill: none; stroke: var(--line); stroke-width: 1.4; }
.map .inset-label { font-size: 17px; fill: var(--ink-faint); font-family: inherit; }

.map-tip {
  position: absolute; z-index: 3; pointer-events: none;
  padding: 5px 10px; font-size: 13px; font-variant-numeric: tabular-nums;
  color: #fff; background: rgba(18, 58, 85, .92); border-radius: 7px; white-space: nowrap;
}

.scrubber { margin: 12px 0 4px; }
.slider { width: 100%; accent-color: var(--blue-deep); height: 26px; }
.scrub-ticks {
  display: flex; justify-content: space-between;
  font-size: 11.5px; color: var(--ink-faint); margin-top: -4px;
}
.scrub-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.scrub-hint { margin: 0; font-size: 12.5px; color: var(--ink-faint); }

.legend { margin: 4px 0 12px; }
.legend-list { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; }
.legend-item { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-soft); }
.legend-swatch { width: 15px; height: 15px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .06); }
.legend-range { font-variant-numeric: tabular-nums; }

.rank-list { list-style: none; margin: 0; padding: 0; }
.rank-item {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  border-bottom: 1px solid var(--line); font-size: 14.5px;
}
.rank-item.is-clickable { cursor: pointer; border-radius: 8px; transition: background .15s ease; }
.rank-item.is-clickable:hover { background: rgba(88, 180, 232, .12); }
.rank-item.is-clickable:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: -2px; }
.rank-no {
  width: 22px; height: 22px; flex: none; display: grid; place-items: center;
  font-size: 12px; font-weight: 800; color: #fff; background: var(--blue); border-radius: 50%;
}
.rank-name { flex: 1 1 auto; }
.rank-val { font-weight: 800; color: var(--blue-ink); }
.rank-note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-faint); }
.rank-note b { color: var(--ink); }
.map-note { margin: 14px 0 0; font-size: 12.5px; color: var(--ink-faint); }

/* ── FAQ ───────────────────────────────────── */

.faq {
  margin: 26px 0 0; padding: 20px 22px;
  background: var(--paper); border-radius: var(--radius);
  box-shadow: 0 1px 1px rgba(18, 58, 85, .05), 0 4px 12px rgba(18, 58, 85, .06);
}
.faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq details:last-of-type { border-bottom: 0; }
.faq summary {
  cursor: pointer; padding: 10px 2px; font-size: 15px; font-weight: 700; color: var(--blue-ink);
  list-style-position: outside;
}
.faq summary:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 2px; border-radius: 6px; }
.faq p { margin: 0 0 12px; font-size: 14.5px; color: var(--ink-soft); }
.faq .url { word-break: break-all; }

/* ── 持ちもののリンク（Amazon検索・気温帯連動） ─────── */

.gear-box {
  margin: 16px 0 0; padding: 16px 18px 14px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(18, 58, 85, .04), 0 6px 18px rgba(18, 58, 85, .05);
}
.gear-box[hidden] { display: none; }
.gear-title {
  margin: 0 0 10px; font-size: 14.5px; font-weight: 700; color: var(--ink);
  display: flex; align-items: center; gap: 8px;
}
/* 広告であることをひと目で（景表法・ステマ規制の明示）。オレンジは1画面1〜2箇所の
   枠内なので、ここで使うのは結果カードの外に1つだけ。 */
.pr-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  color: #fff; background: var(--orange);
  padding: 2px 7px; border-radius: 999px;
}
.gear-list {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.gear-list a {
  display: inline-block; padding: 7px 13px;
  font-size: 13.5px; text-decoration: none;
  color: var(--blue-ink); background: var(--paper-sunken);
  border: 1px solid var(--line); border-radius: 999px;
  transition: background .16s ease, border-color .16s ease;
}
.gear-list a:hover { background: #e6f2f9; border-color: var(--blue); }
.gear-list a:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 2px; }
.gear-sub { margin: 11px 0 0; font-size: 13px; color: var(--ink-soft); line-height: 1.7; }
.gear-note { margin: 10px 0 0; font-size: 11.5px; color: var(--ink-faint); line-height: 1.6; }

/* 記事ページ（spot / guide / about）の中に置く同じ枠 */
.article .gear-box { margin: 22px 0; }
.article .gear-list a { text-decoration: none; }

/* Amazonのサービス紹介（縦並び・説明つき） */
.bounty-box {
  margin: 22px 0; padding: 16px 18px 14px;
  background: var(--paper-sunken); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.bounty-title {
  margin: 0 0 10px; font-size: 14.5px; font-weight: 700; color: var(--ink);
  display: flex; align-items: center; gap: 8px;
}
.bounty-list { margin: 0; padding-left: 1.2em; }
.bounty-list li { margin: 0 0 7px; font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); }
.bounty-list li:last-child { margin-bottom: 0; }
.bounty-list a { font-weight: 600; }

/* ── 広告枠（空なら余白ゼロ） ─────────────────── */

.ad-slot { display: none; }
.ad-slot:not(:empty) {
  display: block; margin: 18px 0 0; min-height: 280px; text-align: center; overflow: hidden;
}
.ad-slot--footer:not(:empty) { margin: 24px 0 0; }
.ad-slot--spot:not(:empty) { margin: 26px 0; }

/* ── フッター ─────────────────────────────── */

.site-footer { margin-top: 32px; padding: 22px 0 34px; background: rgba(255, 255, 255, .72); }
.disclaimer {
  margin: 0 0 10px; padding: 11px 14px; font-size: 13px; line-height: 1.7;
  color: var(--ink); background: #fff8ef;
  border-left: 4px solid var(--orange); border-radius: 0 8px 8px 0;
}
.credit { margin: 3px 0; font-size: 11.5px; color: var(--ink-faint); word-break: break-all; }
.copyright { margin: 12px 0 0; font-size: 11.5px; color: var(--ink-faint); }

/* ── 読みもののページ（guide / how-to / about / privacy / terms / contact / spot） ── */

.article {
  background: var(--paper); border-radius: var(--radius);
  padding: 26px 32px 32px;
  box-shadow: 0 1px 2px rgba(18, 58, 85, .06), 0 8px 24px rgba(18, 58, 85, .07);
}
.article h1 { margin: 0 0 6px; font-size: 27px; font-weight: 800; color: var(--blue-ink); }
.article h2 {
  margin: 38px 0 12px; padding-bottom: 7px; font-size: 19px; font-weight: 800;
  color: var(--blue-ink); border-bottom: 2px solid var(--line);
}
.article h3 { margin: 26px 0 8px; font-size: 16px; font-weight: 800; color: var(--ink); }
.article p { margin: 0 0 14px; font-size: 15px; color: var(--ink-soft); }
.article ul, .article ol { margin: 0 0 16px; padding-left: 1.4em; font-size: 15px; color: var(--ink-soft); }
.article li { margin: 0 0 6px; }
.article a { color: var(--blue-deep); }
.article strong, .article b { color: var(--ink); }
.article code {
  padding: 1px 5px; font-size: .92em; background: var(--paper-sunken);
  border-radius: 4px; word-break: break-all;
}
.lead { font-size: 16px !important; color: var(--ink) !important; }

/* パンくず（spotページ・guide等） */
.breadcrumb { margin: 0 0 14px; font-size: 12.5px; color: var(--ink-faint); }
.breadcrumb a { color: var(--ink-soft); }
.breadcrumb span { margin: 0 6px; }

/* 目次 */
.toc { margin: 18px 0 26px; padding: 14px 18px; background: var(--paper-sunken); border-radius: 10px; }
.toc h2 { margin: 0 0 8px; padding: 0; font-size: 14px; border: 0; }
.toc ul { margin: 0; padding-left: 1.2em; font-size: 14px; }
.toc li { margin: 0 0 4px; }

/* 出典ブロック（spot・guide の末尾に常設） */
.src-block {
  margin: 30px 0 0; padding: 14px 16px; font-size: 12.5px; line-height: 1.8;
  color: var(--ink-faint); background: var(--paper-sunken); border-radius: 10px;
}
.src-block p { margin: 0 0 4px; font-size: 12.5px; color: inherit; }
.src-block p:last-child { margin: 0; }
.src-block .url { word-break: break-all; }

/* ツールへ戻す導線 */
.cta-box {
  margin: 30px 0 0; padding: 20px 22px; text-align: center;
  background: linear-gradient(160deg, #eaf6fd, #d9eefb); border-radius: 12px;
}
.cta-box p { margin: 0 0 12px; font-size: 15px; color: var(--ink); }
/* 記事本文の中でボタンとして使う a。`.article a`（詳細度 0,1,1）が `.btn--primary`
   （0,1,0）に勝ってしまい、青背景に青文字＝読めないボタンになる。ここで打ち消す。 */
.article a.btn { text-decoration: none; color: var(--blue-ink); }
.article a.btn--primary { color: #fff; }

/* 表 */
.article table {
  width: 100%; margin: 0 0 18px; border-collapse: collapse; font-size: 14px;
}
.article th, .article td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); }
.article th { color: var(--blue-ink); background: var(--paper-sunken); font-weight: 700; }
.table-scroll { overflow-x: auto; }

/* ── spotページの図（build_pages.py が生成） ───────── */

/* 年間カレンダー：12行（月）×31列（日） */
.cal { margin: 0 0 8px; overflow-x: auto; }
.cal-grid { display: grid; grid-template-columns: 2.4em repeat(31, minmax(13px, 1fr)); gap: 2px; min-width: 560px; }
.cal-head { font-size: 10px; color: var(--ink-faint); text-align: center; line-height: 1.2; }
.cal-mon { font-size: 11px; color: var(--ink-soft); align-self: center; }
.cal-cell { aspect-ratio: 1 / 1; border-radius: 2px; }
.cal-cell--none { background: transparent; }
.cal-legend { display: flex; align-items: center; gap: 6px; margin: 0 0 20px; font-size: 11.5px; color: var(--ink-faint); }
.cal-legend i { display: inline-block; width: 16px; height: 12px; border-radius: 2px; }

/* 月別バー（晴れ確率）＋気温 */
.month-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.month-table th, .month-table td { padding: 5px 8px; border-bottom: 1px solid var(--line); }
.month-table td.mt-bar { width: 45%; }
.mt-track { height: 12px; background: var(--paper-sunken); border-radius: 6px; overflow: hidden; }
.mt-fill { height: 100%; border-radius: 6px; }
.mt-num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* ベスト旅行週 */
.weeks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 18px; }
.week-card {
  padding: 14px 16px; background: var(--paper-sunken); border-radius: 10px;
  border-top: 3px solid var(--blue);
}
.week-rank { margin: 0 0 4px; font-size: 11.5px; font-weight: 800; color: var(--orange); letter-spacing: .08em; }
.week-range { margin: 0 0 2px !important; font-size: 15px !important; font-weight: 800; color: var(--blue-ink) !important; }
.week-val { margin: 0 !important; font-size: 13px !important; font-variant-numeric: tabular-nums; }

/* ── フォーム（contact） ─────────────────────── */

.form-field { margin: 0 0 16px; }
.field-label { display: block; margin: 0 0 5px; font-size: 13.5px; font-weight: 700; color: var(--blue-ink); }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: 9px 11px; font: inherit; font-size: 15px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 9px;
}
.form-field textarea { resize: vertical; line-height: 1.7; }
.form-field input:focus-visible, .form-field select:focus-visible, .form-field textarea:focus-visible {
  outline: 3px solid var(--blue-deep); outline-offset: 1px;
}
.hint-sm { margin: 4px 0 0; font-size: 12px; color: var(--ink-faint); text-align: right; }
.turnstile-slot { margin: 0 0 16px; min-height: 66px; }
.status { margin: 10px 0 0; font-size: 14px; color: var(--ink-soft); min-height: 22px; }
.status.is-error { color: #b4462a; }
.form-note { font-size: 13px !important; color: var(--ink-faint) !important; }

/* ── トップの回遊リンク ─────────────────────── */

.faq-more { margin: 16px 2px 0; font-size: 14px; }
.faq-more a { color: var(--blue-deep); }
.spot-links { margin: 30px 0 0; }
.link-list {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 10px 0 0; padding: 0;
}
.link-list a {
  display: inline-block; padding: 6px 13px; font-size: 14px; text-decoration: none;
  color: var(--blue-deep); background: var(--paper);
  border: 1px solid var(--line); border-radius: 999px;
}
.link-list a:hover { border-color: var(--blue); }

/* ── フッター（全ページ共通の追加分） ──────────── */

.footer-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; font-size: 12.5px; }
.footer-nav a { color: var(--ink-soft); }
/* お問い合わせは最下部の小さいリンク1本だけ（独立管理ポリシー §3） */
.footer-contact { margin: 10px 0 0; font-size: 11.5px; }
.footer-contact a { color: var(--ink-faint); }

/* ── モバイル ─────────────────────────────── */

@media (max-width: 760px) {
  .article { padding: 20px 18px 26px; }
  .article h1 { font-size: 23px; }
  .weeks { grid-template-columns: 1fr; gap: 8px; }
  /* 年間カレンダーは1画面に31日ぶん収める。横スクロールにすると、スクロールできること
     自体に気づかれず「17日以降がない図」に見えてしまう（実機で確認）。 */
  .cal-grid { min-width: 0; grid-template-columns: 1.9em repeat(31, minmax(0, 1fr)); gap: 1px; }
  .cal-mon { font-size: 9.5px; }
  .cal-head { font-size: 8.5px; }
  .month-table th, .month-table td { padding: 5px 4px; }
  .picker { grid-template-columns: 1fr; padding: 14px; }
  .spot-list { max-height: 236px; }
  .card { padding: 16px; }
  .card-body { min-height: 660px; }
  .card-spot { font-size: 24px; }
  .ring { width: 168px; height: 168px; }
  .ring-inner b { font-size: 52px; }
  .map-layout { grid-template-columns: 1fr; gap: 6px; }
  .map-box { max-height: none; }
  .legend-list { flex-direction: row; flex-wrap: wrap; gap: 6px 16px; }
  .actions .btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}