/*
 * 画面のレイアウト。色・サイズはすべて tokens.css の変数を参照する。
 * スマートフォンからの流入が大半のため、モバイル優先で組む。
 */

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.7;
}

.container {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-4);
}

/*
 * スマートフォンからの流入が大半のため、既定をモバイル幅で組む。
 * デスクトップでは1カラムのまま widen せず、グリッドで横幅を使う
 * （42remの単一カラムをPCで見せると10年前のブログに見える）。
 */
@media (min-width: 48rem) {
  .container {
    padding: var(--space-6);
  }
}

@media (min-width: 64rem) {
  .container {
    max-width: 74rem;
  }

  /* 入力: 地域と家族構成を左右に並べる */
  #diagnose-form > .card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-8);
    padding: var(--space-6);
  }

  /* 備蓄リスト: 段階の中を2列に */
  .step {
    padding: var(--space-6);
  }

  .step-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-8);
  }

  /* 72時間は4区分を横に並べる */
  #timeline-card {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
  }

  /* 未回答の案内は2列 */
  .assumption-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-8);
  }

  /* サービス説明の3ポイントを横に並べる */
  .intro {
    padding: var(--space-6) var(--space-8);
  }

  .intro-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
  }

  .intro-points li {
    padding: 0;
  }
}

/* --- 見出し --- */

/*
 * ヒーロー。
 *
 * 単色の面はブランドの主張にはなるが、それだけだと「役所の書類」に見える。
 * 面・模様・光・粒子の4層を重ねて奥行きを作る。層はすべて装飾で、情報は載せない。
 *   1. 深緑のベース（ブランドの面）
 *   2. 等高線（扱っている対象そのものを質感にする。無意味な幾何模様は敷かない）
 *   3. 光のにじみ（メッシュ状に複数の放射グラデーションを重ねる）
 *   4. 微細な粒子（インラインSVGのノイズ。外部画像を読み込まない）
 */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /*
   * 面は「1枚の深緑」に見せる。
   *
   * 放射グラデーションを何枚も重ねると、それぞれの減衰が終わる位置に境目ができ、
   * 面が2色に割れて見える。奥行きは、1枚の大きく淡いにじみだけで作る。
   *
   * 明るい側は #235E45 が上限。これより明るくすると
   * --color-on-brand-muted（#BFD8CC）が4.5:1を割る。実測で逆算した値。
   */
  background:
    radial-gradient(120% 90% at 12% 0%, #235E45 0%, transparent 70%),
    linear-gradient(165deg, var(--color-surface-brand) 0%, var(--color-surface-brand-deep) 100%);
  color: var(--color-on-brand);
  padding: var(--space-6) var(--space-4) var(--space-8);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* 背景の層はまとめて最背面へ送る */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.hero-contour {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-contour path {
  fill: none;
  stroke: var(--color-on-brand);
  stroke-width: 1;
  opacity: 0.07;
}

/*
 * 光のにじみ。
 * ここも1枚だけにする。複数置くと、それぞれの縁が面の中に線として現れる。
 * 色はCTAの残光だけに絞り、ブランドの深緑に別の色味を混ぜない。
 */
.hero::before {
  content: '';
  position: absolute;
  inset: -20%;
  z-index: -1;
  background: radial-gradient(60% 45% at 16% 2%, rgba(245, 197, 67, 0.13), transparent 72%);
  pointer-events: none;
}

/*
 * 粒子。平滑なグラデーションだけだと画面が「つるつる」して安っぽく見える。
 * 外部画像を読み込まずに済むよう、SVGのノイズをそのままデータURIで埋める。
 */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  pointer-events: none;
}

/*
 * 中央揃えをやめ、読み出しの起点を左に固定する。
 * すべてを中央に置くと視線の始点が行ごとに動き、長い文章ほど読みにくくなる。
 */
.hero-inner {
  position: relative;
  max-width: var(--content-width);
  margin: 0 auto;
  text-align: left;
}

/* --- 防災士 ＋ AI の役割分担 --- */

/*
 * 深緑の上に淡い面を2つ並べる。ここでCTAの黄色を面に使うと押す場所が分からなくなるため、
 * 面は白の透過だけで組み、役割名だけをCTA色で立たせる。
 */
.hero-duo {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) auto 0;
  max-width: 34rem;
  text-align: left;
}

/*
 * 狭い画面では役割名と説明を1行に並べる。
 * 縦に積むとヒーローだけで画面の8割を占め、入力欄に届かなくなるため。
 */
.hero-duo-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
}

.hero-duo-role {
  flex: 0 0 auto;
  margin: 0;
  font-weight: 900;
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  color: var(--color-cta);
}

.hero-duo-text {
  margin: 0;
  /* 日本語を文節で折り返す。未対応ブラウザは無視するだけで、従来どおり折り返す */
  word-break: auto-phrase;
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-on-brand-muted);
}

.hero-duo-text strong {
  color: var(--color-on-brand);
}

.hero-duo-join {
  margin: 0;
  text-align: center;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-on-brand-muted);
}

.hero-duo-note {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  color: var(--color-on-brand-muted);
}

/*
 * 横幅があるときは、本文と見本カードを左右に置く。
 * 中央に1本だけ積むより、視線が「主張 → 実物」と一度で流れる。
 */
@media (min-width: 64rem) {
  .hero {
    padding-top: var(--space-8);
  }

  /* 見本カードを外したので、ヒーローは1カラムのまま横幅だけ広げる */
  .hero-inner {
    max-width: 48rem;
  }


  .hero-title {
    font-size: clamp(2.4rem, 4.2vw, 3.6rem);
  }
}

/* 横幅があるときは2つを左右に並べ、間に結合記号を置く */
@media (min-width: 40rem) {
  .hero-duo {
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: var(--space-3);
  }

  .hero-duo-item {
    display: block;
  }

  .hero-duo-role {
    margin-bottom: var(--space-1);
  }

  .hero-duo-join {
    align-self: center;
    font-size: var(--text-lg);
  }
}

.hero-badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.hero-badges li {
  font-size: var(--text-xs);
  font-weight: 700;
  padding: var(--space-1) var(--space-3);
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}

.hero-badges strong {
  color: var(--color-cta);
}

/*
 * 結果表示中はヒーローをロゴだけに圧縮する。
 * コピーと約束は診断前の材料であり、結果ページでは結果そのものを主役にする。
 */
/*
 * 結果画面ではヒーローの深緑をやめる。
 * 同じ深緑の日数カードが重なると境界が曖昧になり、主役が埋もれるため。
 */
/*
 * 結果画面のヒーローはロゴだけになる。
 * 初回訪問向けに取ってある余白がそのまま残ると、
 * ロゴと結果のあいだに用のない空白が88pxできる。
 */
body.is-result .hero {
  background: var(--color-bg);
  color: var(--color-primary);
  padding-bottom: var(--space-3);
  border-radius: 0;
}

body.is-result .hero-brand {
  margin-bottom: 0;
}

/* ヒーローと内容を離すための余白も、ここでは要らない */
body.is-result main.container {
  margin-top: 0;
}

/* 背景の層も一緒に畳む。淡い地の上に残すと汚れに見える */
body.is-result .hero::before,
body.is-result .hero::after,
body.is-result .hero-bg {
  display: none;
}

/* 結果を見ているあいだは、ヒーローをロゴだけに畳む。再開の入口も要らない */
body.is-result .hero-lead,
body.is-result .hero-duo,
body.is-result .hero-duo-note,
body.is-result .hero-badges,
body.is-result .resume-card,
body.is-result .resume-actions {
  display: none;
}

/* ロゴだけを残すので、左寄せの組みから中央へ戻す */
body.is-result .hero-inner {
  text-align: center;
}


/* フォームをヒーローに重ねて「浮いている」ように見せる */
/*
 * ヒーローとフォームは重ねない。
 *
 * カードをヒーローに食い込ませると、カードの左右に深緑が「耳」として残り、
 * その先がヒーローの角丸で終わるため歪な形になる。
 * 幅が変わるたびに耳の太さも変わり、狙って作った形に見えない。
 *
 * 深緑の面はそこで終わらせ、内容は余白を置いて始める。
 * 面の切り替わりは、重ねて誤魔化すより、はっきり分けたほうが落ち着く。
 */
main.container {
  position: relative;
  margin-top: var(--space-6);
}

/* 見出しは書体の強さだけで立たせる。線の装飾は使わない */
.section-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-xl);
  letter-spacing: 0.02em;
  margin: var(--space-8) 0 var(--space-3);
}

/* 開閉の操作要素はすべて44pxのタップ領域を確保する */
summary {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  cursor: pointer;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

/*
 * 開閉の矢印。
 *
 * すべての details に同じ形・同じ位置で付ける。
 * 「ここを押せば続きが出る」という合図は、場所ごとに形が違うと合図として働かない。
 * 既定の三角は summary を flex にすると消えるブラウザがあるため、自前で描く。
 * 色は currentColor に任せ、置かれた文脈の文字色に自動で追従させる。
 */
summary::after {
  content: '';
  flex-shrink: 0;
  width: 0.5em;
  height: 0.5em;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
  opacity: 0.65;
}

details[open] > summary::after {
  transform: rotate(-135deg);
}

@media (prefers-reduced-motion: reduce) {
  summary::after {
    transition: none;
  }
}

/* --- セクション見出し（運営元サイトと同じ組み） --- */

/*
 * 日本語の見出しの背後に、同じ意味の英字を輪郭線だけで敷く。
 * 面積のわりに情報量が無い見出し周りに、余白としての表情を作る組み方で、
 * 運営元（winthree.jp）と同じ語彙にそろえている。
 * 透かしは装飾なので、マークアップ側で aria-hidden にして読み上げから外す。
 */
/*
 * 透かしは見出し要素の「外」に置く。
 * 中に入れると、読み上げからは aria-hidden で外せても、
 * クローラは見出し本文の一部として読んでしまう。
 */
.section-heading {
  position: relative;
  padding-top: 1.15em;
}

.section-heading > h2,
.section-heading > h3 {
  margin: 0;
}

.section-ghost {
  position: absolute;
  top: 0;
  left: -0.06em;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.1em;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--color-primary) 22%, transparent);
  pointer-events: none;
  user-select: none;
}

.section-heading > h2,
.section-heading > h3 {
  position: relative;
}

/*
 * 見出しの下線。運営元の「三方よし」を表す3色をそのまま使う。
 * すべての見出しに一律で付けることで装飾に留め、
 * リスクの度合いを示す暖色との意味の衝突を避ける。
 */
.section-heading::after {
  content: '';
  display: block;
  width: 60px;
  height: 6px;
  margin-top: var(--space-3);
  border-radius: 999px;
  background: var(--brand-rule);
}

/* 透かしは狭い画面では見出しに重なって読みにくくなるため、控えめにする */
@media (max-width: 30rem) {
  .section-ghost {
    font-size: 1.7em;
  }
}

/* --- 学ぶ：スクロールで読み進める防災の基礎（DESIGN.md 8） --- */

/*
 * ここは「探す」ページではなく「読む」ページなので、組版を切り替える。
 * 診断より下に置き、入力に到達する前に離脱させない。
 */
.learn {
  margin-top: var(--space-8);
  padding-top: var(--space-8);
}

/* 結果を見ているときは学習セクションを畳む。読み物が結果の下に続くと終わりが見えない */
body.is-result .learn {
  display: none;
}

.learn-eyebrow {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-primary);
}

.learn-heading {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 6vw, 2.25rem);
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.learn-lead {
  /* 日本語は1行が長いと読み進められなくなるため上限を設ける */
  max-width: 32em;
  margin: 0 0 var(--space-8);
  font-size: var(--text-base);
  line-height: 1.9;
  color: var(--color-text-muted);
}

.learn-lead strong {
  color: var(--color-text);
}

.learn-lead + .learn-lead {
  margin-top: calc(-1 * var(--space-6));
}

/* 数字の出どころ。本文に括弧で挟むと、主張そのものが読みにくくなる */
.learn-note {
  max-width: 32em;
  margin: calc(-1 * var(--space-6)) 0 var(--space-8);
  font-size: var(--text-xs);
  line-height: 1.8;
  color: var(--color-text-muted);
}

/* --- 章 --- */

/*
 * 1章＝1つの気づき。見出し・本文・図の順を全章で固定し、
 * 見出しだけを拾い読みしても筋が通るようにする。
 */
.chapter {
  padding: var(--space-8) 0;
}

.chapter + .chapter {
  /* 線ではなく余白で章を切る。区切り線を入れると読み物が書類に見える */
  padding-top: var(--space-8);
}

.chapter-index {
  margin: 0 0 var(--space-2);
  font-weight: 900;
  font-size: var(--text-lg);
  color: var(--color-primary);
  opacity: 0.45;
}

.chapter-title {
  margin: 0 0 var(--space-3);
  word-break: auto-phrase;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 4.6vw, 1.5rem);
  line-height: 1.5;
}

.chapter-body {
  max-width: 32em;
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.9;
  color: var(--color-text-muted);
}

.chapter-body strong {
  color: var(--color-text);
  font-weight: 700;
}

.chapter-figure {
  margin: var(--space-6) 0 0;
}

.chapter-figure figcaption {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--color-text-muted);
}

/* --- 章に添える写真 --- */

/*
 * 写真は「実際の様子」を伝えるためだけに置く。
 * 仕組みの説明は図（SVG）の役目で、両方を同じ強さで並べるとどちらも読まれない。
 * 図のあとに、図では出せない質感を1枚だけ添える形にとどめる。
 *
 * width/height を必ず指定する。読み込み前に場所が確保されないと
 * 下の内容が飛ぶ（CLS）。
 */
.chapter-photo {
  margin: var(--space-4) 0 0;
}

.chapter-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(30, 71, 54, 0.05), 0 8px 24px -14px rgba(30, 71, 54, 0.2);
}

.chapter-photo figcaption {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--color-text-muted);
}

/* --- 図解 --- */

/*
 * 図は静止状態で完成している。SVGの中に色を直書きせず、すべてトークンを参照する。
 * 図だけで伝えている情報は本文かキャプションにも文章で書く。
 * 座標は scripts では作らず、寸法の根拠を持つものは domain の定数と一致させる。
 */
.fig {
  display: block;
  width: 100%;
  height: auto;
  background: var(--color-bg-sub);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: 0 1px 2px rgba(30, 71, 54, 0.05), 0 8px 24px -14px rgba(30, 71, 54, 0.2);
}

.fig text {
  font-family: inherit;
  fill: var(--color-text);
}

text.fig-muted {
  fill: var(--color-text-muted);
}

.fig-label-base { fill: var(--color-primary); }
.fig-label-mid { fill: var(--color-alert-mid); }
.fig-label-high { fill: var(--color-alert-high); }

/* 軸と目盛り。図の骨格であり、情報そのものではないので細く静かに置く */
.fig-axis-line {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 1.5;
}

.fig-grid {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}

/* --- 図1 備蓄日数：長さが日数に比例する --- */

.fig-track { fill: var(--color-bg); }
.fig-bar-base { fill: var(--color-primary); opacity: 0.4; }
.fig-bar-mid { fill: var(--color-alert-mid); opacity: 0.6; }
.fig-bar-high { fill: var(--color-alert-high); }

/* --- 図2 表層地盤：振幅の比が増幅率と一致する --- */

.fig-wave {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.fig-wave-base { stroke: var(--color-primary); }
.fig-wave-high { stroke: var(--color-alert-high); }

.fig-surface {
  fill: none;
  stroke: var(--color-text);
  stroke-width: 1.5;
}

.fig-layer-base { fill: var(--color-primary); opacity: 0.18; }
.fig-layer-high { fill: var(--color-alert-mid); opacity: 0.28; }
.fig-bedrock { fill: var(--color-text-muted); opacity: 0.18; }

/* 基盤から届く揺れ。左右で同じ大きさに描く */
.fig-input {
  fill: none;
  stroke: var(--color-text-muted);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- 図3 降灰：距離帯と灰の量は別の軸なので描き分ける --- */

.fig-ash { stroke: none; fill: var(--color-alert-high); }
.fig-ash-1 { opacity: 0.42; }
.fig-ash-2 { opacity: 0.24; }
.fig-ash-3 { opacity: 0.12; }

/* 距離のリングは灰の濃さと無関係。破線にして別軸であることを示す */
.fig-ring {
  fill: none;
  stroke: var(--color-text-muted);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  opacity: 0.55;
}

/*
 * 距離ラベルは濃さの違う灰の上に乗るため、下地の色に左右されないよう
 * 図の背景色でフチを取る。塗りより先にフチを描いて文字を痩せさせない。
 */
text.fig-ring-label {
  fill: var(--color-text);
  stroke: var(--color-bg-sub);
  stroke-width: 3;
  paint-order: stroke fill;
  font-weight: 700;
}

.fig-volcano { fill: var(--color-text); }

.fig-wind {
  fill: none;
  stroke: var(--color-text-muted);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- 図4 断面：どこで起き、どこまで届くか --- */

.fig-sea { fill: var(--color-primary); opacity: 0.16; }
.fig-plate-land { fill: var(--color-text-muted); opacity: 0.16; }
.fig-plate-ocean { fill: var(--color-text-muted); opacity: 0.3; }
.fig-town { fill: var(--color-primary); }
.fig-source-trench { fill: var(--color-alert-high); opacity: 0.75; }
.fig-source-inland { fill: var(--color-alert-mid); }

/* 揺れの届く範囲。等高線のように何本か引いて広がりの差を見せる */
.fig-reach {
  fill: none;
  stroke-width: 1.5;
  stroke-dasharray: 4 5;
}

.fig-reach-wide { stroke: var(--color-alert-high); opacity: 0.5; }

/* ラベルを図の外周へ逃がすときの引き出し線 */
.fig-leader {
  fill: none;
  stroke: var(--color-text-muted);
  stroke-width: 1;
  opacity: 0.6;
}
.fig-reach-local { stroke: var(--color-alert-mid); opacity: 0.7; }

/* --- 図5 復旧曲線：公表値をそのまま点で打つ --- */

.fig-line {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
}

.fig-line-power { stroke: var(--color-primary); }
.fig-line-water { stroke: var(--color-alert-high); }

.fig-dot { stroke: var(--color-bg-sub); stroke-width: 2; }
.fig-dot-power { fill: var(--color-primary); }
.fig-dot-water { fill: var(--color-alert-high); }

.fig-threshold {
  fill: none;
  stroke: var(--color-text-muted);
  stroke-width: 1;
  stroke-dasharray: 5 4;
  opacity: 0.7;
}

/* --- 図7 年表（噴火と地震） --- */

.fig-eruption {
  fill: none;
  stroke: var(--color-alert-high);
  stroke-width: 1.5;
  opacity: 0.5;
}

.fig-eruption-dot { fill: var(--color-alert-high); }

.fig-quake-line {
  fill: none;
  stroke: var(--color-text-muted);
  stroke-width: 1.5;
  opacity: 0.5;
}

.fig-quake-dot { fill: var(--color-text-muted); }

/* 1707年から現在までの空白。この図の主役 */
.fig-gap {
  fill: none;
  stroke: var(--color-alert-high);
  stroke-width: 2;
  stroke-dasharray: 6 4;
}

/* --- 図6 ローリングストック --- */

.fig-cycle {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.55;
}

.fig-step { fill: var(--color-primary-weak); }
text.fig-step-label { fill: var(--color-primary); }

/*
 * 読み物の途中から診断へ戻る道。
 * 主導線ではないので面を持たせず、字だけで置く。
 * ここで引き止める意図はなく、読むのをやめてよいことを伝えるためにある。
 */
.learn-jump {
  margin: var(--space-6) 0 0;
  text-align: center;
}

.learn-jump-button {
  min-height: var(--tap-min);
  padding: 0 var(--space-3);
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--color-primary);
  background: none;
  border: none;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

/* --- 学びの締めと診断への導線 --- */

/*
 * まとめの帯。運営元サイトの「お知らせ」帯と同じドットの地を敷く。
 * 面を単色で塗るより密度が出て、ここから下が別のまとまりだと分かる。
 * ドットは装飾なので、文字とのコントラストに影響しない濃さに抑える。
 */
.learn-summary {
  margin-top: var(--space-8);
  padding: var(--space-6) var(--space-4);
  background-color: var(--color-primary-weak);
  background-image:
    radial-gradient(color-mix(in srgb, var(--color-primary) 22%, transparent) 1px, transparent 1px),
    radial-gradient(color-mix(in srgb, var(--brand-win-2) 18%, transparent) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px;
  background-position: 0 0, 20px 20px;
  border-radius: var(--radius-lg);
}

.learn-summary-title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
  color: var(--color-primary);
}

.learn-points {
  margin: 0;
  padding: 0;
  list-style: none;
}

.learn-points li {
  padding: var(--space-3) 0;
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--color-text-muted);
}

.learn-point-title {
  display: block;
  font-weight: 700;
  color: var(--color-text);
}

.learn-cta {
  margin-top: var(--space-6);
  text-align: center;
}

.learn-cta-text {
  margin: 0 0 var(--space-3);
  font-size: var(--text-base);
  font-weight: 700;
}

/* デスクトップでは本文と図を左右に置き、章ごとに向きを入れ替える */
@media (min-width: 64rem) {
  /*
   * 本文・図・写真の3つを置くため、列と行を明示する。
   * order で並べ替えると、写真が空いた場所へ勝手に流れて図と別の列に落ちる。
   */
  .chapter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: start;
    gap: var(--space-6) var(--space-8);
  }

  .chapter-text {
    grid-column: 1;
    grid-row: 1;
  }

  /* 図と写真は同じ列に積む。写真は図の補足なので、離すと関係が読めない */
  .chapter-figure {
    grid-column: 2;
    grid-row: 1;
  }

  .chapter-photo {
    grid-column: 2;
    grid-row: 2;
  }

  /* 章ごとに左右を入れ替える。導入文があるため nth-child ではなく article を数える */
  .chapter:nth-of-type(even) .chapter-text {
    grid-column: 2;
  }

  .chapter:nth-of-type(even) .chapter-figure,
  .chapter:nth-of-type(even) .chapter-photo {
    grid-column: 1;
  }

  .learn-summary {
    padding: var(--space-8);
  }

  .learn-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
  }
}

/* --- カード --- */

/* 枠線は使わない。区切りは面の色・影・余白で表現する（線だらけの箱は野暮ったい） */
.card {
  background: var(--color-bg-sub);
  border: none;
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  box-shadow: 0 2px 14px rgba(30, 71, 54, 0.08);
}

/* --- フォーム --- */

.field {
  margin-bottom: var(--space-4);
}

.field-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.field-hint {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 400;
  margin-top: var(--space-1);
}

/* 入力要素は既定の書体・文字サイズを引き継がせる（チェックボックス等も含む） */
input,
select,
button {
  font-family: inherit;
  font-size: inherit;
}

select,
input[type="number"],
input[type="text"] {
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3);
  /* iOSで入力時に拡大されるのを防ぐため16px以上を維持する */
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-bg-sub);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

select:focus,
input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.field-error {
  color: var(--color-danger);
  font-size: var(--text-xs);
  margin-top: var(--space-1);
}

/* input[type="number"] と詳細度をそろえないと枠線の指定が届かない */
select.input-error,
input.input-error {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-danger) 18%, transparent);
}

/*
 * 年齢区分ごとの人数入力。
 * ラベルを上に置くと5区分で3行ぶんの高さになり、診断ボタンが画面外へ押し出される。
 * ラベルを左、入力を右に並べて縦を詰める。
 */
.member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--space-2) var(--space-4);
}

.member-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.member-item .field-label {
  margin-bottom: 0;
  font-weight: 400;
}

/* 人数はセレクト。幅を固定して、区分ごとに欄の位置がそろうようにする */
.member-item select {
  width: 4.5rem;
  flex: 0 0 4.5rem;
  text-align: right;
}

/* --- ボタン --- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

/*
 * 診断CTAは黄。緑の世界観の中で最も目を引かせる（東京備蓄ナビの黄ボタンと同じ狙い）。
 * リスクの暖色と混同しないよう、黄はこのボタンとヒーローの強調のみに使う。
 */
.button-primary {
  width: 100%;
  min-height: 56px;
  font-weight: 900;
  font-size: var(--text-lg);
  letter-spacing: 0.04em;
  color: var(--color-on-cta);
  background: linear-gradient(135deg, #F7CE52 0%, var(--color-cta-hover) 100%);
  border-radius: 999px;
  box-shadow: 0 10px 24px -8px rgba(235, 181, 32, 0.55);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
  .button-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -8px rgba(235, 181, 32, 0.6);
  }
}

.button-primary:hover {
  background: var(--color-cta-hover);
}

.button-primary:active {
  background: var(--color-cta-hover);
  transform: translateY(1px);
}

.button-primary:disabled {
  background: var(--color-text-muted);
  cursor: not-allowed;
}

.button-secondary {
  color: var(--color-text);
  background: var(--color-bg-sub);
  border-color: var(--color-border);
}

.button-secondary:hover {
  background: var(--color-bg);
}

/* --- 詳しく答える（任意項目） --- */

details.optional-inputs {
  border-radius: var(--radius-xl);
  background: var(--color-bg-sub);
  margin-bottom: var(--space-4);
  box-shadow: 0 2px 14px rgba(30, 71, 54, 0.08);
}

details.optional-inputs > summary {
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
}

details.optional-inputs[open] > summary {
  border-bottom: 1px solid var(--color-border);
}

.optional-body {
  padding: var(--space-4);
}

/* --- 結果: 概要 --- */

/* 緑面の上でも注記が読めるようにする */
.summary-days .source-note {
  color: var(--color-on-brand-muted);
}

/* 結果の主役。深緑の面に白抜きで、数字を主役にする */
.summary-days {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: var(--space-6) var(--space-4);
  background: linear-gradient(160deg, var(--color-surface-brand) 0%, var(--color-surface-brand-deep) 100%);
  border: none;
  color: var(--color-on-brand);
}

.summary-days::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(24rem 12rem at 50% 30%, rgba(245, 197, 67, 0.14), transparent 65%);
  pointer-events: none;
}

.summary-days > * {
  position: relative;
}

/*
 * 日数と後ろの語を1行に並べる。
 * 日数はこの画面の結論なので大きく出すが、そのために縦を3行使う必要はない。
 */
/*
 * 市区町村を選ばなかったときの断り書き。
 * この地名は利用者の住所ではないので、目立つ位置で伝える。
 */
/* 「この地域で想定されること」の補助文字。見出しの直下に置き、本文より一段落とす */
.risk-note {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--color-text-muted);
}

.summary-days-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-1);
  margin: var(--space-1) 0 var(--space-4);
}

.summary-days-number {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 14vw, 4rem);
  font-weight: 900;
  line-height: 1.05;
  color: var(--color-cta);
}

.summary-days-caption {
  /* 地名と世帯構成の途中で折り返さないよう、日本語を文節で切る */
  word-break: auto-phrase;
  display: block;
  font-size: var(--text-sm);
  color: var(--color-on-brand-muted);
}

.weakness-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
}

/* --- タイムライン --- */

.timeline-phase {
  margin-bottom: var(--space-4);
}

.timeline-phase-label {
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-primary);
}

.timeline-actions {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-4);
}

/* --- 備蓄リスト --- */

/* 品目1件は縦に積む。区切りはごく薄い線1本のみ（走査の助けとして最小限） */
.item-row {
  display: block;
  padding: var(--space-4) 0;
  border-bottom: 1px solid rgba(30, 71, 54, 0.08);
}

.item-row:last-child {
  border-bottom: none;
}

.item-check {
  width: 24px;
  height: 24px;
  min-width: 24px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* 「84L」が何人・何日分なのかを、リストの入口で一度だけ言う */
.items-basis {
  margin: 0 0 var(--space-1);
  font-size: var(--text-sm);
  font-weight: 700;
}

/* --- 買い物リストの要約と絞り込み --- */

/*
 * 33品目に答えたあと「結局なにを買えばいいのか」を探すことになるため、
 * 全体の進み具合と、足りないものだけに絞る手段をリストの手前に置く。
 */
.items-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary-weak);
  border-radius: var(--radius-md);
}

.items-progress {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 700;
}

.items-filter {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  font-size: var(--text-sm);
  cursor: pointer;
}

.items-filter input {
  width: 24px;
  height: 24px;
  min-width: 24px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.items-filter:has(input:disabled) {
  color: var(--color-text-muted);
  cursor: default;
}

/* 絞り込みで外れた行と段階 */
.is-filtered-out {
  display: none;
}

/* --- 品目1行 --- */

/*
 * 補助ラベルが多いと「何が必要か」が読み取れなくなる。
 * 品目名と必要量だけを大きく置き、それ以外は小さく静かに扱う。
 */
/*
 * 品目名が長いと数量が折り返しに巻き込まれて読めなくなるため、
 * グリッドで「名前は折り返す列」「数量は縮まない列」に分ける。
 */
.item-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-3);
}

/*
 * 行の主役は品目名。押してほしいのは「その品物」であって数量ではない。
 * 数量を名前より大きくすると、何の商品の行なのかが読み取れなくなる。
 */
.item-name {
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: 1.4;
  min-width: 0;
}

/*
 * この世帯にとっての最優先品目（3〜5件）に引く印。
 *
 * 蛍光ペンで線を引いたように、文字の下半分だけを塗る。
 * 全体を塗ると文字のコントラストが落ち、帯にしか見えなくなる。
 * mark要素の既定（黄色い背景＋黒文字）は打ち消し、面ではなく線として見せる。
 *
 * 伝わるのは「印の有無」であって色の違いではないので、色覚に依存しない。
 * 文字色は変えないため、コントラストは印の無い品目と同じ。
 */
mark.item-name {
  /*
   * gridの1列目は余白まで伸びるため、そのまま塗ると文字の右にも線が続く。
   * 文字の幅ぶんだけに収め、長い品目名は列の幅で折り返させる。
   */
  width: max-content;
  max-width: 100%;
  background: linear-gradient(
    transparent 62%,
    color-mix(in srgb, var(--color-warning) 32%, transparent) 62%
  );
  color: inherit;
}

/* 印の色は用途で変える。既定は「どの災害でも要る」と地震（＝多数派）。 */
mark.item-name.is-for-volcano {
  background: linear-gradient(
    transparent 62%,
    color-mix(in srgb, var(--color-purpose-volcano) 26%, transparent) 62%
  );
}

mark.item-name.is-for-flood {
  background: linear-gradient(
    transparent 62%,
    color-mix(in srgb, var(--color-purpose-flood) 26%, transparent) 62%
  );
}

/*
 * 用途のラベル。印を付けていない品目にも出る。
 * 「なぜ自分のリストにこれが入っているのか」に答えるのが役目なので、
 * 印（＝優先度）とは独立して付ける。
 */
.item-purpose {
  margin-right: var(--space-2);
  padding: 1px var(--space-2);
  border: 1px solid currentcolor;
  border-radius: var(--radius-sm);
  font-weight: 700;
  white-space: nowrap;
}

.item-purpose.is-for-volcano {
  color: var(--color-purpose-volcano);
}

.item-purpose.is-for-flood {
  color: var(--color-purpose-flood);
}

/* 必要量は名前に添える情報。右端で数字が縦に揃い、走査はできる状態を保つ */
.item-need-value {
  flex-shrink: 0;
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/*
 * どういう物かの補足。名前より静かに置く。
 * 下に余白を取り、名前と補足を1つのまとまりとして操作から切り離す。
 * ここが混ざると「何の品目の行か」が読み取れなくなる。
 */
.item-note {
  margin: var(--space-1) 0 var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* --- 必要量の見せ方 --- */

/*
 * 数字だけを置くと、それが必要量なのか手持ちなのかが読み取れない。
 * 「必要」を必ず添え、値は名前より静かに置く（主役は品目名）。
 */
.item-need {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  flex-shrink: 0;
  white-space: nowrap;
}

.item-need-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/*
 * 右上の1枠は、そのときいちばん行動につながる数字を出す。
 * 未回答のうちは必要量を静かに、答えて足りないと分かったら強く。
 * 「必要」と「あと」を別の場所に置くと、買う量のほうが小さく出て主従が逆になる。
 */
.item-need-value {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-text-muted);
}

/* 不足はこの行でいちばん行動につながる数字なので、名前と同じ大きさまで上げる */
.item-need-value.is-short {
  font-size: var(--text-lg);
  color: var(--color-alert-mid);
}

.item-need-value.is-enough {
  font-size: var(--text-sm);
  color: var(--color-success);
}

/* --- 手持ちの回答 --- */

.item-input-control {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.item-have-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  cursor: pointer;
}

/*
 * 数を打たせず選ばせる。32品目に正確な数を入力できる人はいない。
 * 基底の `select { width: 100% }` に負けないよう親クラスを重ねる。
 */
.item-input-control .item-have-select {
  width: auto;
  flex: 0 0 auto;
  min-width: 5.5rem;
  font-size: var(--text-sm);
  text-align: right;
}

/*
 * 探す条件。
 * 個別商品を推さない代わりに、どういう基準で探しているのかを開示する。
 * 買う導線の一部なので、リンクと同じタイミングで出す。
 */
.item-search {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* 充足した行は、右上の緑だけで分かる。行全体の背景色は重ねない */
.item-row.is-enough .item-name {
  color: var(--color-text-muted);
}

.item-search-label {
  flex-shrink: 0;
}

.item-search-value {
  font-weight: 700;
  color: var(--color-text);
}

/* 単位はセレクトの外に1つだけ置く。選択肢ごとに繰り返さない */
.item-unit {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}



.item-row.is-enough {
  background: var(--color-primary-weak);
  border-radius: var(--radius-md);
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}



/* --- 未回答の案内 --- */

/*
 * 項目ごとに「仮定した内容」「答えると変わること」を並べると文字の壁になる。
 * 名前だけをチップで見せ、詳しい説明はツールチップと追加入力側に委ねる。
 */
.assumption-heading {
  margin: 0 0 var(--space-3);
  font-weight: 700;
  font-size: var(--text-base);
}

.assumption-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.assumption-chip {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-3);
  background: var(--color-bg);
  border-radius: 999px;
}

.assumption-lead {
  margin: var(--space-3) 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* --- 詳細・出典・免責 --- */

.detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.detail-table th,
.detail-table td {
  text-align: left;
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.detail-table th {
  width: 40%;
  color: var(--color-text-muted);
  font-weight: 600;
}

.source-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.pr-label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
}

.disclosure {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* 免責は法的に必要だが、4段落を常時見せると文字の壁になるため畳む */
.disclosure-summary {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.disclosure p {
  margin: var(--space-2) 0;
}

/* --- 診断中の表示 --- */

/*
 * 診断中も画面は動かさない。
 * フォームを消して別の場所にくるくるを出すと、押した瞬間に景色が変わり、
 * 何が起きたのか分からなくなる。ボタン自体が状態を示す。
 */
.button-spinner {
  width: 1.1em;
  height: 1.1em;
  margin-right: var(--space-2);
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}

/* 動きを止めている人には、回さずに濃淡だけで進行を示す */
@media (prefers-reduced-motion: reduce) {
  .button-spinner {
    animation: none;
    border-top-color: currentColor;
    opacity: 0.5;
  }
}

.button-primary[aria-busy='true'] {
  cursor: progress;
}

/* 待ち時間の豆知識。ボタンの真下に出す */
.status-tip-card {
  margin-top: var(--space-3);
  padding: var(--space-4);
  text-align: left;
}

.status-tip-label {
  margin: 0 0 var(--space-1);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-primary);
}

.status-tip {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.8;
}

/* 起動に失敗したときだけ出す */
.status {
  margin-top: var(--space-6);
  text-align: center;
}

.status-text {
  margin: 0;
  font-size: var(--text-base);
  color: var(--color-danger);
}

/* --- 買い物リスト（段階購入） --- */

/*
 * 備蓄は一度に揃えられる金額ではないため、買う順番を段階に分けて示す。
 * 「全部で36件」ではなく「まず今週この5件」に見えることが行動につながる。
 */
/* 段階カード。左の色帯だけ残し、囲みの線は持たない */
.step {
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

/* 段階の見出し。閉じていても件数と進捗が読めるようにする */
.step-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-height: var(--tap-min);
}

.step-header .step-progress-text {
  margin-left: auto;
}

.step-number {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: var(--space-1) var(--space-2);
  background: color-mix(in srgb, currentColor 12%, transparent);
  border-radius: var(--radius-sm);
}

.step-title {
  font-size: var(--text-lg);
  font-weight: 700;
}

.step-when {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* 緊急度はSTEPチップの色で示す（縦線の装飾は使わない） */
.step-1 .step-number {
  color: var(--color-alert-high);
}

.step-2 .step-number {
  color: var(--color-alert-mid);
}

.step-3 .step-number {
  color: var(--color-text-muted);
}

/* 揃い終わった段階は緑で示す。緑＝良い状態という意味づけを一貫させる */
.step.is-complete {
  background: var(--color-primary-weak);
}

.step-progress {
  margin: var(--space-3) 0;
}

.step-progress-text {
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
}

.step-progress-track {
  height: 8px;
  background: var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.step-progress-fill {
  height: 100%;
  background: var(--color-success);
  transform-origin: left center;
}

.step-done-mark {
  color: var(--color-success);
  font-weight: 700;
}

/* --- 補助クラス（インラインstyleを置き換える） --- */

.center-note {
  text-align: center;
  margin-top: var(--space-3);
}

.button-block {
  width: 100%;
}

/* 出典のリンク。文字は小さいままタップ領域だけ44pxを確保する */
.source-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.source-list-item {
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--color-border);
}

.source-list-item:last-child {
  border-bottom: none;
}

.source-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--color-primary);
  font-weight: 600;
}

/* --- 「もっと詳しく知る」（既定は閉じる） --- */

/*
 * 主動線は「備蓄日数 → チェックリスト → 買う」の3つ。
 * 知識や解説をその流れに挟むと情報過多になり、買うところまで到達しなくなる。
 * 知りたい人だけが開ける形にして、主動線の見通しを保つ。
 */
.knowledge {
  border-bottom: 1px solid var(--color-border);
}

.knowledge:last-child {
  border-bottom: none;
}

.knowledge > summary {
  padding: var(--space-3) 0;
  font-weight: 600;
  gap: var(--space-2);
}

.knowledge-body {
  padding: 0 0 var(--space-4);
}

/* 弱点は閉じたままでも読めるよう、見出しとして目立たせる */
.knowledge-weakness > summary {
  color: var(--color-alert-mid);
}

/* 品目のカテゴリ。段階で優先度は自明なので、代わりに分類を添える */
/* --- この地域で想定されること（統計タイル） --- */

/*
 * 文章のカードを縦に積むのではなく、数字を主役にしたタイルを敷き詰める。
 * 「震度6強」「32km」を見出しサイズで見せ、説明は添え物にする。
 */
#risk-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

#risk-summary .source-note {
  grid-column: 1 / -1;
  margin: var(--space-1) 0 0;
}

/* デスクトップでは4列のベントーに（基本定義より後に書き、カスケードで確実に勝たせる） */
@media (min-width: 64rem) {
  #risk-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
  }
}

.risk-tile {
  background: var(--color-bg-sub);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  box-shadow: 0 1px 2px rgba(30, 71, 54, 0.05), 0 8px 24px -12px rgba(30, 71, 54, 0.18);
}

@media (hover: hover) {
  .risk-tile {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }

  .risk-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgba(30, 71, 54, 0.06), 0 16px 32px -12px rgba(30, 71, 54, 0.24);
  }
}

.risk-severity {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: var(--space-1) var(--space-2);
  background: color-mix(in srgb, currentColor 12%, transparent);
  border-radius: var(--radius-sm);
}

.risk-high .risk-severity {
  color: var(--color-alert-high);
}

.risk-medium .risk-severity {
  color: var(--color-alert-mid);
}

.risk-low .risk-severity {
  color: var(--color-text-muted);
}

.risk-tile-title {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
}

.risk-tile-value {
  margin: var(--space-1) 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.6rem, 6.5vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
}

/* 根拠は畳んでおく。見出しと数字だけで現象が伝わる状態を保つ */
.risk-detail > summary {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  opacity: 0.85;
}

/*
 * そのリスクが備蓄日数に効いたかどうか（spec 3.7.5）。
 * 効く要因と効かない要因を同じ見た目で並べると、
 * 津波が日数を押し上げているように読めてしまう。
 */
.risk-tile-effect {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
}

.risk-tile-effect.is-counted {
  color: var(--color-primary);
}

.risk-tile-note {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* --- 購入リンク --- */

/*
 * 買ってもらうことが目的なので、リストの各行から直接飛べるようにする。
 * 個別商品ではなく検索結果へ送るため「探す」と表記し、断定を避ける。
 */
/* 根拠は読みたい人だけが開く。本文と同じ強さで置くと品目名と競合する */
.item-detail > summary {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/*
 * 購入リンクは行幅いっぱいに広げない。
 * 2つの帯が積み上がると品目名より目立ち、リストが「ボタンの壁」に見えてしまう。
 * 内容ぶんの幅にとどめ、タップ領域だけは44pxを保つ。
 */
.item-buy {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* 行の重心を上へ寄せる。買う導線は補助であって、行の主役ではない */
/*
 * 購入ボタンが1つも無いとき（アフィリエイト未設定の店しかない場合）は、
 * 枠ごと消す。空のまま置くと margin だけが残り、行ごとに隙間ができる。
 */
.item-buy:empty {
  display: none;
}

.item-buy .button-buy {
  min-height: var(--tap-min);
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
}

.button-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: var(--tap-min);
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  color: var(--color-primary);
  background: var(--color-primary-weak);
}

/*
 * 最初に押してほしい方を枠線で示す。塗りにはしない。
 * 塗りつぶすとこの行でいちばん強い要素になり、品目名より先に目が行く。
 * 押せることは枠線と文字色で足りる。
 */
.button-buy-rakuten {
  color: var(--color-primary);
  background: none;
  box-shadow: inset 0 0 0 1.5px var(--color-primary);
}

@media (hover: hover) {
  .button-buy-rakuten:hover {
    background: var(--color-primary-weak);
  }
}

/* もう一方は面を持たせず、字だけで静かに置く */
.button-buy-amazon {
  padding: 0 var(--space-2);
  background: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.button-buy-rakuten:hover {
  background: var(--color-primary-hover);
}

/* --- スクロールで現れる（reduced-motion では無効） --- */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
  }

  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* --- 図がスクロールに合わせて育つ（段階的強化・DESIGN.md 8 の層3） --- */

/*
 * 未対応ブラウザ（2026年時点でFirefoxはフラグ裏）では、この @supports ごと無視され
 * 図は完成した状態で表示される。情報はここに一切載せない。
 * 動かすのは transform と stroke-dashoffset だけで、レイアウトを起こさない。
 */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /*
     * 進行はすべて「要素が画面に入り切るまで」に完了させる（entry 100%）。
     * 棒の長さや折れ線はデータそのものなので、途中で止まったまま静止すると
     * 「そこで値が終わっている」と誤読される。見えている図は必ず完成形にする。
     */

    /* 図1の棒：長さは日数に比例しているので、左から伸ばす */
    .fig-bar {
      transform-origin: left center;
      animation: fig-grow-x linear both;
      animation-timeline: view();
      animation-range: entry 20% entry 100%;
    }

    /* 図5の復旧曲線：発災側から描かれる */
    .fig-line {
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      animation: fig-draw linear both;
      animation-timeline: view();
      animation-range: entry 20% entry 100%;
    }

    /* 図3の降灰：火山を起点に外へ広がる。凡例の四角(rect)は動かさない */
    circle.fig-ash,
    path.fig-ash {
      transform-box: fill-box;
      transform-origin: center;
      animation: fig-spread linear both;
      animation-timeline: view();
      animation-range: entry 20% entry 100%;
    }
  }
}

@keyframes fig-grow-x {
  from { transform: scaleX(0.04); }
  to { transform: scaleX(1); }
}

@keyframes fig-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

/*
 * opacity は各層の濃さそのものなので、ここで触ってはいけない。
 * アニメーションの終端値は宣言済みの opacity を上書きし、層の濃淡が潰れる。
 */
@keyframes fig-spread {
  from { transform: scale(0.3); }
  to { transform: scale(1); }
}

/* --- 端末内保存（再開カードと削除） --- */

/*
 * 再開ボタン。
 *
 * 診断済みの人にとって、初回向けの売り込みはもう役目を終えている。
 * とはいえヒーローの上に居座るので、場所は取らせたくない。
 * かといって畳んでしまうと、保存があることに気づかれない。
 *
 * 両立させるため、**ボタン自体に何が保存されているかを載せる**。
 * 開いて確かめる必要がなく、押す前に地域・日数・進み具合が分かる。
 * カード全体が1つの押せる領域なので、中に別のボタンを置かない。
 */
.resume-card {
  display: block;
  width: 100%;
  max-width: 34rem;
  margin: var(--space-4) 0 var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: rgba(9, 28, 21, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  border: none;
  border-radius: var(--radius-lg);
  backdrop-filter: blur(8px);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

@media (hover: hover) {
  .resume-card {
    transition: background-color 0.2s ease;
  }

  .resume-card:hover {
    background: rgba(9, 28, 21, 0.6);
  }
}

.resume-eyebrow {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-cta);
}

/* 地域と進み具合を1行に。押す前に何が保存されているかが読める */
.resume-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.resume-place {
  font-weight: 700;
  font-size: var(--text-base);
  line-height: 1.4;
  color: var(--color-on-brand);
}

.resume-progress-text {
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-on-brand-muted);
}

/* 進み具合はボタンの下辺に細く敷く。行を増やさずに量を示す */
.resume-progress {
  display: block;
  height: 4px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  overflow: hidden;
}

.resume-progress-fill {
  display: block;
  height: 100%;
  background: var(--color-cta);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.resume-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  max-width: 34rem;
  margin: 0 auto var(--space-2);
}

/* 主導線ではないので面を持たせない。ただしタップ領域は確保する */
.button-quiet {
  min-height: var(--tap-min);
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-on-brand-muted);
  background: none;
  border: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/*
 * 再開カードを出しているあいだは、初回向けの説明を畳む。
 * 一度診断した人に同じ売り込みを読ませない。
 */
body.has-saved .hero-lead,
body.has-saved .hero-duo,
body.has-saved .hero-duo-note,
body.has-saved .hero-badges {
  display: none;
}

body.has-saved .hero-title {
  font-size: clamp(1.4rem, 5vw, 1.9rem);
}

@media (prefers-reduced-motion: reduce) {
  .resume-progress-fill {
    transition: none;
  }
}

/*
 * 取り消しの操作。
 * 押し間違えると保存が消えるので、目立たせないが押せることは分かるようにする。
 * 面は持たせず、色と下線だけで示す。
 */
/*
 * fieldset はブラウザ既定で立体的な枠と余白を持つ。
 * ここでは見出し（legend）と入力をまとめる意味づけだけに使うので、見た目は div と同じにする。
 */
.fieldset-reset {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: none;
}

/*
 * チェックボックスの1行。
 * label 全体を押せるようにし、指で押せる高さを確保する。
 */
.choice-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  cursor: pointer;
}

.choice-row:hover {
  color: var(--color-primary);
}

/* 品目の詳細。読みたい人だけが開くので、本文より一段落ち着かせる */
.item-detail-body > p {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-text-muted);
}

.item-detail-body > p:last-child {
  margin-bottom: 0;
}

/* 分類と計算式は補足なので、本文よりさらに小さくする */
.item-detail-category,
.item-basis {
  font-size: var(--text-xs);
}

.button-text-danger {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 var(--space-3);
  font-family: inherit;
  font-size: var(--text-xs);
  color: var(--color-danger);
  background: none;
  border: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* --- ユーティリティ --- */

/*
 * 状態を表すクラスはファイルの最後に置く。
 * 同じ詳細度なら後に書いた規則が勝つため、途中に置くと
 * 後から追加したコンポーネント側の display 指定に負けて効かなくなる。
 */
.is-hidden {
  display: none;
}

/*
 * 結果画面のh1も、消さずにここへ相乗りさせる。
 * 見た目から外すだけで、文書構造としては見出しレベル1を残す必要があるため。
 */
.visually-hidden,
body.is-result .hero-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- フッター（運営情報・免責・出典） --- */

/*
 * 診断の前でも読める位置に置く。結果を出すまで運営者が分からない状態にしない。
 * 面は深緑に戻して本編と切り、ここから下は「サイトの説明」だと分かるようにする。
 */
.footer {
  margin-top: var(--space-8);
  padding: var(--space-8) var(--space-4);
  background: var(--color-surface-brand-deep);
  color: var(--color-on-brand-muted);
}

.footer-inner {
  max-width: var(--content-width);
  margin: 0 auto;
}

.footer-block + .footer-block {
  margin-top: var(--space-6);
}

.footer-block-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-on-brand);
}

.footer-line {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  line-height: 1.9;
}

.footer-line:last-child {
  margin-bottom: 0;
}

.footer-sources {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-sources li + li {
  margin-top: var(--space-1);
}

/* 出典と問い合わせはタップ領域を確保する。小さい字のリンクは押せないと意味がない */
.footer-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-size: var(--text-xs);
  color: var(--color-on-brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-updated {
  margin: var(--space-6) 0 0;
  font-size: var(--text-xs);
  color: var(--color-on-brand-muted);
}

@media (min-width: 64rem) {
  .footer-inner {
    max-width: 68rem;
  }

  /* 横幅があるときは説明を並べ、縦に長い帯にしない */
  .footer-block-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
  }
}