@charset "UTF-8";
/* ひとり親ライフチョイス・シミュレータ  共通スタイル
   スマートフォンを基準に作り、画面が広いときだけ広げる。 */

:root {
  --bg: #f7f8fa;
  --panel: #ffffff;
  --ink: #1b2733;
  --ink-sub: #52616f;
  --line: #dde3ea;
  --accent: #1f6f8b;
  --accent-dark: #14526a;
  --accent-soft: #e8f2f6;
  --ok: #1c7a4a;
  --ok-soft: #e6f4ec;
  --warn: #8a5a00;
  --warn-soft: #fdf3de;
  --danger: #a32020;
  --danger-soft: #fdecec;
  --check: #4a4a8a;
  --check-soft: #ececf7;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(20, 35, 50, .10);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 0 5rem;
  background: var(--bg);
  color: var(--ink);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 0 1rem; }

/* ---- 退避ボタン ---- */
.escape-bar {
  position: sticky; top: 0; z-index: 100;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem .7rem;
}
.escape-bar .brand { font-size: .8rem; color: var(--ink-sub); flex: 1; }
.escape-btn {
  background: #33414f; color: #fff; border: 0; border-radius: 999px;
  padding: .45rem 1rem; font-size: .85rem; font-weight: 700; cursor: pointer;
  white-space: nowrap;
}
.escape-btn:hover { background: #1b2733; }
.escape-note { font-size: .75rem; color: var(--ink-sub); margin: .3rem 0 0; }

/* ---- 見出し ---- */
h1 { font-size: 1.35rem; line-height: 1.5; margin: 1.2rem 0 .3rem; }
h2 { font-size: 1.12rem; margin: 2rem 0 .6rem; padding-bottom: .3rem; border-bottom: 2px solid var(--accent); }
h3 { font-size: 1rem; margin: 1.4rem 0 .4rem; }
.lead { color: var(--ink-sub); font-size: .92rem; margin: .2rem 0 1rem; }

/* ---- パネル・カード ---- */
.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem; margin: 1rem 0;
  box-shadow: var(--shadow);
}
.panel.tight { padding: .8rem; }

/* ---- フォーム ---- */
fieldset { border: 0; padding: 0; margin: 0 0 1.2rem; }
legend { font-weight: 700; font-size: .98rem; padding: 0; margin-bottom: .4rem; }
label { display: block; font-size: .9rem; font-weight: 600; margin: .8rem 0 .2rem; }
input[type="number"], input[type="text"], select {
  width: 100%; padding: .6rem .7rem; font-size: 1rem;
  border: 1px solid #b9c4cf; border-radius: 8px; background: #fff; color: var(--ink);
}
input:focus, select:focus, button:focus-visible {
  outline: 3px solid #9ecbdc; outline-offset: 1px;
}
.hint { font-size: .78rem; color: var(--ink-sub); margin: .2rem 0 0; }
.row { display: flex; gap: .6rem; flex-wrap: wrap; }
.row > * { flex: 1 1 8rem; }
.inline-choice { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .3rem; }
.inline-choice label {
  flex: 1 1 6rem; margin: 0; font-weight: 500; font-size: .88rem;
  border: 1px solid #b9c4cf; border-radius: 8px; padding: .5rem .6rem;
  background: #fff; cursor: pointer; text-align: center;
}
.inline-choice input { margin-right: .3rem; }
.inline-choice label:has(input:checked) {
  background: var(--accent-soft); border-color: var(--accent); font-weight: 700;
}

button.primary {
  display: block; width: 100%; margin: 1.2rem 0 0;
  background: var(--accent); color: #fff; border: 0; border-radius: 8px;
  padding: .9rem 1rem; font-size: 1.05rem; font-weight: 700; cursor: pointer;
}
button.primary:hover { background: var(--accent-dark); }
button.ghost {
  background: #fff; color: var(--accent-dark); border: 1px solid var(--accent);
  border-radius: 8px; padding: .5rem .9rem; font-size: .85rem; font-weight: 700; cursor: pointer;
}
button.ghost:hover { background: var(--accent-soft); }

/* 子ども入力の行 */
.child-row { display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: .5rem; }
.child-row .child-label { flex: 0 0 4.5rem; font-size: .85rem; font-weight: 600; padding-bottom: .6rem; }
/* 年齢の欄は、生まれ月の欄に押しつぶされないように、下限の幅を決めておく */
.child-row input[type="number"] { flex: 1 1 6rem; min-width: 5.5rem; }
.child-row .child-month { flex: 0 1 11rem; min-width: 8.5rem; margin: 0; }
@media (max-width: 420px) {
  .child-row .child-month { flex: 1 1 100%; margin-left: 5rem; }
}

/* ---- ツールチップ（用語の補足） ---- */
.term {
  border-bottom: 1px dotted var(--accent); cursor: help; position: relative;
}
.term::after {
  content: attr(data-tip);
  position: absolute; left: 0; top: 1.7em; z-index: 60;
  width: min(20rem, 78vw); padding: .55rem .7rem;
  background: #22323f; color: #fff; font-size: .78rem; font-weight: 400; line-height: 1.6;
  border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.25);
  opacity: 0; visibility: hidden; transition: opacity .12s;
  white-space: normal; text-align: left;
}
.term:hover::after, .term:focus::after { opacity: 1; visibility: visible; }

/* ---- 判定ラベル ---- */
.badge {
  display: inline-block; font-size: .74rem; font-weight: 700;
  padding: .12rem .55rem; border-radius: 999px; white-space: nowrap;
}
.badge.likely { background: var(--ok-soft); color: var(--ok); }
.badge.check { background: var(--check-soft); color: var(--check); }
.badge.unlikely { background: #eef1f4; color: var(--ink-sub); }
.badge.info { background: var(--accent-soft); color: var(--accent-dark); }

/* ---- 制度カード ---- */
.prog {
  border: 1px solid var(--line); border-left: 5px solid #cfd8e0;
  border-radius: var(--radius); background: #fff; padding: .8rem .9rem; margin: .7rem 0;
}
.prog.likely { border-left-color: var(--ok); }
.prog.check { border-left-color: var(--check); }
.prog.unlikely { border-left-color: #cfd8e0; opacity: .78; }
.prog h4 { margin: 0 0 .3rem; font-size: 1rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.prog .amount { font-size: 1.02rem; font-weight: 700; color: var(--accent-dark); margin: .2rem 0; }
.prog p { margin: .3rem 0; font-size: .88rem; }
.prog .apply { font-size: .84rem; color: var(--ink-sub); }
.prog .src { font-size: .74rem; color: var(--ink-sub); margin-top: .45rem; border-top: 1px dashed var(--line); padding-top: .35rem; }
.prog .src a { color: var(--accent-dark); }
.cat-head { font-size: .82rem; font-weight: 700; color: var(--ink-sub); margin: 1.4rem 0 .2rem; }

/* ---- 警告 ---- */
.pit { border-radius: var(--radius); padding: .9rem 1rem; margin: .8rem 0; border: 1px solid; }
.pit.red { background: var(--danger-soft); border-color: #eec3c3; }
.pit.yellow { background: var(--warn-soft); border-color: #ecd9ac; }
.pit h4 { margin: 0 0 .35rem; font-size: 1rem; }
.pit.red h4 { color: var(--danger); }
.pit.yellow h4 { color: var(--warn); }
.pit p { margin: .35rem 0; font-size: .89rem; }
.pit .stance {
  background: rgba(255,255,255,.75); border-left: 3px solid #9aa7b3;
  padding: .5rem .7rem; margin: .5rem 0; font-size: .86rem; border-radius: 0 6px 6px 0;
}
.pit .stance .stance-tag { display: block; font-size: .72rem; font-weight: 700; color: var(--ink-sub); }
.pit .roi { font-size: .86rem; background: rgba(255,255,255,.75); border-radius: 6px; padding: .5rem .7rem; margin: .5rem 0; }
.pit ul { margin: .35rem 0; padding-left: 1.2rem; font-size: .87rem; }
.pit .src { font-size: .74rem; color: var(--ink-sub); margin-top: .5rem; }

/* ---- グラフ ---- */
/* グラフは、パソコンでもスマートフォンでも、横スクロールなしで収める。
   中の座標は viewBox のままなので、幅にあわせて縮むだけ。 */
.chart-box { margin: .6rem 0; }
.chart-box svg { display: block; width: 100%; max-width: 100%; height: auto; }
.legend {
  display: flex; gap: .35rem .9rem; flex-wrap: wrap;
  font-size: .82rem; line-height: 1.5; margin: .3rem 0 .6rem;
}
/* 1つの項目は、途中で改行させずにまとめて折り返す */
.legend > span { display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; }
.legend .swatch { flex: 0 0 auto; }
@media (max-width: 480px) {
  .legend { font-size: .76rem; gap: .3rem .7rem; }
}
.swatch { width: 1.1rem; height: .22rem; border-radius: 2px; display: inline-block; }

table.compare { width: 100%; border-collapse: collapse; font-size: .85rem; margin: .6rem 0; }
table.compare th, table.compare td { border: 1px solid var(--line); padding: .4rem .5rem; text-align: right; }
table.compare th { background: #eef2f6; text-align: center; }
table.compare td:first-child, table.compare th:first-child { text-align: left; }

.slider-row { display: flex; align-items: center; gap: .7rem; margin: .6rem 0; }
.slider-row input[type="range"] { flex: 1; }
.slider-row output { font-weight: 700; min-width: 4.5rem; text-align: right; }

/* ---- プロンプト ---- */
.prompt-card { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: .8rem .9rem; margin: .8rem 0; }
.prompt-card h4 { margin: 0 0 .3rem; font-size: .98rem; }
.prompt-card textarea {
  width: 100%; min-height: 9rem; font-size: .8rem; line-height: 1.6;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  border: 1px solid #b9c4cf; border-radius: 8px; padding: .6rem; background: #fbfcfd; color: var(--ink);
  resize: vertical;
}
.copy-row { display: flex; align-items: center; gap: .6rem; margin-top: .4rem; }
.copy-msg { font-size: .8rem; color: var(--ok); }

.notice { background: var(--accent-soft); border: 1px solid #bcd9e4; border-radius: var(--radius); padding: .8rem 1rem; font-size: .87rem; margin: 1rem 0; }
.notice ul { margin: .4rem 0; padding-left: 1.2rem; }
.notice h4 { margin: 0 0 .3rem; font-size: .95rem; }

.disclaimer { font-size: .8rem; color: var(--ink-sub); border-top: 1px solid var(--line); margin-top: 2.5rem; padding-top: .8rem; }

.stage { display: none; }
.stage.shown { display: block; animation: fade .25s ease-out; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.nav { font-size: .85rem; margin: .6rem 0; }
.nav a { color: var(--accent-dark); margin-right: 1rem; }

@media (min-width: 700px) {
  body { font-size: 17px; }
  h1 { font-size: 1.6rem; }
}

/* ---- グラフの見方の切りかえ ---- */
.view-switch { display: flex; gap: .5rem; flex-wrap: wrap; margin: .6rem 0 .4rem; }
.view-switch button { flex: 1 1 12rem; }

/* ---- まずやること（チェックリスト） ---- */
.checklist {
  background: var(--accent-soft); border: 1px solid #bcd9e4;
  border-radius: var(--radius); padding: 1rem; margin: 0 0 1.4rem;
}
.checklist h3 { border: 0; }
.checklist ul { list-style: none; margin: .5rem 0; padding: 0; }
.checklist li {
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: .55rem .7rem; margin-bottom: .45rem;
  display: flex; align-items: flex-start; gap: .5rem; flex-wrap: wrap;
}
.checklist label { display: flex; align-items: flex-start; gap: .55rem; margin: 0; flex: 1 1 12rem; font-weight: 500; font-size: .95rem; cursor: pointer; }
.checklist input[type="checkbox"] { width: 1.25rem; height: 1.25rem; margin: .18rem 0 0; flex: 0 0 auto; accent-color: var(--accent); }
.checklist input:checked + span { text-decoration: line-through; color: var(--ink-sub); }
.checklist a.jump { font-size: .8rem; color: var(--accent-dark); white-space: nowrap; align-self: center; }

/* ---- 警告の折りたたみ ---- */
.pit details { margin-top: .2rem; }
.pit summary {
  cursor: pointer; font-size: .85rem; font-weight: 700; color: var(--ink-sub);
  list-style: none; padding: .2rem 0;
}
.pit summary::-webkit-details-marker { display: none; }
.pit summary::before { content: '▶ '; font-size: .75rem; }
.pit details[open] summary::before { content: '▼ '; }
.pit summary:hover { color: var(--ink); }
.pit .pit-detail { padding-top: .4rem; border-top: 1px dashed rgba(0,0,0,.12); margin-top: .3rem; }

.prog:target { outline: 3px solid var(--accent); outline-offset: 2px; }
table.compare caption { padding-bottom: .25rem; }

/* ---- 落とし穴チェック ---- */
.checklist.danger-list { background: var(--warn-soft); border-color: #ecd9ac; }
.checklist.danger-list input[type="checkbox"] { accent-color: var(--warn); }

/* ---- 資産カーブの見出しボックス ---- */
.headline-box {
  background: var(--warn-soft); border: 2px solid #e0b860; border-radius: var(--radius);
  padding: 1rem; margin: 0 0 1rem;
}
.headline-box.ok { background: var(--ok-soft); border-color: #9dcdb2; }
.headline-box .big { font-size: 1.12rem; font-weight: 700; margin: 0 0 .4rem; line-height: 1.6; }
/* いちばん見せたい数字。ここだけ大きく、まわりは静かにする */
.headline-box .headline-num {
  margin: 0; line-height: 1.1; font-size: 1.3rem; font-weight: 700; color: var(--warn);
  font-variant-numeric: tabular-nums;
}
.headline-box .headline-num strong { font-size: 2.6rem; letter-spacing: -.02em; }
.headline-box p { margin: .35rem 0; font-size: .92rem; }
.headline-box a.jump-big { font-weight: 700; }

/* ---- 進路プラン ---- */
.plan-child { border: 1px solid var(--line); border-radius: 8px; padding: .6rem .7rem; margin-bottom: .5rem; background: #fff; }
.plan-head { margin: 0 0 .4rem; font-size: .88rem; font-weight: 700; color: var(--ink-sub); }
.plan-row { display: flex; align-items: center; gap: .6rem; margin-bottom: .35rem; }
.plan-row .plan-label { flex: 0 0 4rem; font-size: .85rem; font-weight: 600; }
.plan-row select { flex: 1; font-size: .9rem; padding: .45rem .5rem; }

/* ---- 利用中の制度 ---- */
.badge.used { background: var(--ok); color: #fff; }
.prog.used { border-left-color: var(--ok); background: #fbfefc; }
#used-programs label { text-align: left; font-size: .84rem; flex: 1 1 9rem; }

/* ---- 資産カーブまわり ---- */
.band-line {
  background: var(--ok-soft); border-left: 4px solid var(--ok);
  padding: .55rem .8rem; border-radius: 0 8px 8px 0; margin: .5rem 0; font-size: .92rem;
}
.deficit-line { font-size: 1.05rem; line-height: 1.7; }
.hint.cutoff { background: #f1f4f7; border-radius: 8px; padding: .55rem .7rem; }
details.explain { margin: .5rem 0 1rem; }
details.explain > summary {
  cursor: pointer; font-size: .88rem; font-weight: 700; color: var(--accent-dark);
  list-style: none; padding: .5rem .7rem; background: #fff;
  border: 1px solid var(--line); border-radius: 8px;
}
details.explain > summary::-webkit-details-marker { display: none; }
details.explain > summary::before { content: '▶ '; font-size: .75rem; }
details.explain[open] > summary::before { content: '▼ '; }
details.explain > summary:hover { background: var(--accent-soft); }
/* 参考資料のたたみ。中身のパネルは、たたみの中では枠を重ねない */
details.explain.ref { margin: .8rem 0; }
details.explain.ref > .panel { margin: .4rem 0 0; box-shadow: none; }
details.explain.ref > .notice { margin: .4rem 0 0; }
details.explain.fold > summary { font-weight: 600; color: var(--ink); }
details.explain.ref > .assumption-box { margin: .4rem 0 0; }
details.explain.prompt-fold { margin: .4rem 0 0; }
details.explain.prompt-fold > textarea { margin-top: .4rem; }

/* ---- 足りないぶんを埋める手 ---- */
.gap-amount { font-size: 1.02rem; }
ol.gap-list { padding-left: 1.3rem; margin: .6rem 0; }
ol.gap-list li { margin-bottom: .7rem; font-size: .89rem; line-height: 1.7; }
ol.gap-list li.strong { background: rgba(255,255,255,.8); border-radius: 6px; padding: .5rem .6rem; }
ol.gap-list a { color: var(--accent-dark); }
ol.gap-list.folded li:nth-child(n+4) { display: none; }
button.gap-more { margin: .2rem 0 .6rem; }

@media (max-width: 420px) {
  .legend { font-size: .78rem; gap: .5rem; }
}

/* ---- 崖の一覧（グラフの番号に対応） ---- */
.cliff-list { background: #fffaf0; border: 1px solid #ecd9ac; border-radius: 8px; padding: .6rem .8rem; margin: .5rem 0; }
.cliff-head { margin: 0 0 .3rem; font-size: .82rem; font-weight: 700; color: var(--warn); }
.cliff-list ol { margin: 0; padding-left: 0; list-style: none; counter-reset: cliff; }
.cliff-list li { counter-increment: cliff; font-size: .87rem; margin-bottom: .25rem; display: flex; gap: .45rem; align-items: baseline; }
.cliff-list .cliff-no::before {
  content: counter(cliff); display: inline-flex; align-items: center; justify-content: center;
  width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--warn); color: #fff;
  font-size: .7rem; font-weight: 700; flex: 0 0 auto;
}

/* ---- 生活費のうちわけ ---- */
details.breakdown { margin: .4rem 0 1rem; }
.cost-rows { margin: .5rem 0; }
.cost-row { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.cost-row label { flex: 1 1 8rem; margin: 0; font-size: .87rem; font-weight: 600; }
.cost-row input { flex: 0 0 8rem; }
.cost-total { font-size: .92rem; background: var(--accent-soft); border-radius: 8px; padding: .5rem .7rem; margin: .5rem 0; }
.cost-share-head, .cost-advice-head { font-size: .85rem; font-weight: 700; margin: .7rem 0 .3rem; color: var(--ink-sub); }
ul.cost-share { list-style: none; margin: 0; padding: 0; }
ul.cost-share li { display: flex; align-items: center; gap: .5rem; font-size: .84rem; margin-bottom: .28rem; }
ul.cost-share .cost-name { flex: 0 0 6.5rem; }
ul.cost-share .cost-bar { flex: 1; height: .6rem; background: #e8edf2; border-radius: 999px; overflow: hidden; }
ul.cost-share .cost-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
ul.cost-share .cost-pct { flex: 0 0 2.4rem; text-align: right; font-weight: 700; }
ul.cost-advice-list { margin: .3rem 0; padding-left: 1.2rem; font-size: .87rem; }
ul.cost-advice-list li { margin-bottom: .4rem; line-height: 1.7; }
ul.cost-ref { list-style: none; margin: 0; padding: 0; font-size: .84rem; }
ul.cost-ref li { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .22rem; }
ul.cost-ref .cost-ref-v { font-weight: 700; }
ul.cost-ref .cost-ref-b { color: var(--ink-sub); }

/* ---- あなたの場合の道筋 ---- */
.path-block { background: #fff; border: 2px solid var(--accent); border-radius: var(--radius); padding: 1rem; margin: 1.2rem 0; }
.path-block h3 { margin: 0 0 .2rem; border: 0; color: var(--accent-dark); }
.path-item { border-top: 1px solid var(--line); padding-top: .7rem; margin-top: .7rem; }
.path-item:first-of-type { border-top: 0; padding-top: 0; }
.path-head { display: flex; gap: .5rem; align-items: baseline; font-weight: 700; font-size: .98rem; margin: 0 0 .3rem; line-height: 1.6; }
.path-no { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--accent); color: #fff; font-size: .8rem; }
.path-body { margin: 0 0 .3rem; font-size: .89rem; line-height: 1.75; }
.path-link { margin: 0; font-size: .85rem; }
.path-link a { color: var(--accent-dark); font-weight: 700; }
#training-box { margin-top: .6rem; }
.track-record { background: var(--ok-soft); border-left: 4px solid var(--ok); border-radius: 0 6px 6px 0;
  padding: .55rem .75rem; font-size: .86rem; line-height: 1.75; margin: .5rem 0; }

/* ---- このグラフの前提 ---- */
.assumption-box { background: #f6f8fa; border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; margin: 1rem 0; }
.assumption-box h4 { margin: 0 0 .4rem; font-size: .92rem; color: var(--ink-sub); }
.assumption-box ul { margin: 0; padding-left: 1.2rem; }
.assumption-box li { font-size: .85rem; line-height: 1.75; margin-bottom: .35rem; }
.warn-inline { background: var(--warn-soft); border-radius: 4px; padding: 0 .25rem; font-weight: 700; color: var(--warn); }

/* ---- 記入例が入ったときの、光ってから元にもどる演出 ---- */
#form-area input[type="number"],
#form-area input[type="text"],
#form-area select {
  transition: background-color 1.6s ease-out;
}
#form-area .inline-choice label,
.checklist label {
  transition: background-color 1.6s ease-out;
}
#form-area .flash,
#form-area .inline-choice label.flash {
  background-color: #ffe9a8;
  transition: background-color 0s;
}
.hint.shown-note {
  background: var(--warn-soft); border-left: 4px solid #e0b860;
  border-radius: 0 8px 8px 0; padding: .55rem .75rem; font-size: .88rem;
}
@media (prefers-reduced-motion: reduce) {
  #form-area input, #form-area select, #form-area .inline-choice label { transition: none; }
  #form-area .flash { background-color: transparent; }
}

/* ---- 足りないことのお知らせカード ---- */
.alert-card {
  background: var(--danger-soft); border: 2px solid #e4a9a9;
  border-radius: var(--radius); padding: .9rem 1rem; margin: .8rem 0 1rem;
}
.alert-head {
  margin: 0 0 .35rem; font-size: 1.08rem; font-weight: 700; line-height: 1.6; color: var(--danger);
}
.alert-head::before { content: '！ '; }
.alert-body { margin: 0 0 .5rem; font-size: .9rem; line-height: 1.75; }
.alert-good {
  background: var(--ok-soft); border-left: 4px solid var(--ok); border-radius: 0 6px 6px 0;
  padding: .5rem .7rem; margin: .5rem 0; font-size: .89rem; line-height: 1.75; color: var(--ok);
}
.alert-warn-more {
  background: var(--warn-soft); border-left: 4px solid #e0b860; border-radius: 0 6px 6px 0;
  padding: .5rem .7rem; margin: .5rem 0; font-size: .87rem; line-height: 1.75;
}
.alert-actions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: .6rem; }
.alert-actions .alert-cta { width: auto; margin: 0; padding: .7rem 1.1rem; font-size: .95rem; }
.alert-actions .alert-sub { font-size: .86rem; color: var(--accent-dark); font-weight: 700; }
@media (max-width: 599px) {
  .alert-actions .alert-cta { width: 100%; }
  .alert-actions { gap: .55rem; }
}

/* ---- 目を引くボタン（ゆっくり脈打つ） ---- */
.alert-cta.pulse {
  position: relative;
  animation: cta-pulse 1.8s ease-in-out infinite;
}
@keyframes cta-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(31, 111, 139, .55); }
  70%  { box-shadow: 0 0 0 12px rgba(31, 111, 139, 0); }
  100% { box-shadow: 0 0 0 0 rgba(31, 111, 139, 0); }
}

/* ---- 線が左から伸びる ---- */
.chart-box path.draw-in { animation: draw-line 1.1s ease-out forwards; }
@keyframes draw-line { to { stroke-dashoffset: 0; } }
.chart-box .fade-in { animation: fade-in-late .5s ease-out .85s both; }
@keyframes fade-in-late { from { opacity: 0; } to { opacity: 1; } }

.quiet-cta { margin: .4rem 0 0; }

/* 動きを減らす設定のときは、動かさずに枠で強調する */
@media (prefers-reduced-motion: reduce) {
  .alert-cta.pulse {
    animation: none;
    box-shadow: 0 0 0 3px rgba(31, 111, 139, .45);
    outline: 2px solid var(--accent-dark);
    outline-offset: 2px;
  }
  .chart-box path.draw-in { animation: none; stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .chart-box .fade-in { animation: none; opacity: 1; }
}

/* ベータ版の表示 */
.beta-badge {
  display: inline-block; font-size: 0.55em; font-weight: 700;
  color: #fff; background: #e8710a; border-radius: 6px;
  padding: 2px 8px; vertical-align: middle; margin-left: 6px;
}
.beta-note { font-size: 0.85rem; color: #666; margin-top: 2px; }

/* ---- 返さなくていいお金／あとで返すお金 ---- */
.badge.grant { background: var(--ok-soft); color: var(--ok); border: 1px solid #9dcdb2; }
.badge.loan { background: var(--warn-soft); color: var(--warn); border: 1px solid #e0b860; }
.misunderstanding {
  background: var(--ok-soft); border-left: 4px solid var(--ok); border-radius: 0 6px 6px 0;
  padding: .5rem .7rem; margin: .5rem 0; font-size: .87rem; line-height: 1.75;
}
.support-amount { color: var(--ok); }

/* ---- 家計のうちわけ表 ---- */
.balance-block { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; margin: 1rem 0; }
.balance-block h3 { margin: 0 0 .2rem; border: 0; }
.balance-controls { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .6rem 0; }
.balance-controls select { width: auto; flex: 0 0 auto; }
.balance-scenario { display: flex; gap: .35rem; flex-wrap: wrap; margin-left: auto; }
.balance-events { background: var(--warn-soft); border-left: 4px solid #e0b860; border-radius: 0 8px 8px 0; padding: .55rem .75rem; margin: .6rem 0; }
.balance-events-head { margin: 0 0 .2rem; font-size: .82rem; font-weight: 700; color: var(--warn); }
.balance-events ul { margin: 0; padding-left: 1.1rem; font-size: .87rem; }
.balance-events li { margin-bottom: .2rem; line-height: 1.7; }
table.balance { width: 100%; border-collapse: collapse; font-size: .87rem; margin: .5rem 0; }
table.balance td, table.balance th { border-bottom: 1px solid var(--line); padding: .4rem .5rem; text-align: left; vertical-align: top; }
table.balance .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.balance tr.sec th { background: #eef2f6; font-size: .82rem; color: var(--ink-sub); }
table.balance tr.zero td { color: var(--ink-sub); }
table.balance tr.sum td { font-weight: 700; background: #fafbfc; }
table.balance tr.total td { font-weight: 700; font-size: 1rem; border-top: 2px solid var(--ink); border-bottom: 0; }
table.balance tr.total.minus td { color: var(--danger); }
table.balance tr.total.plus td { color: var(--ok); }
.why { display: block; font-size: .76rem; color: var(--ink-sub); line-height: 1.6; }
.balance-minus { color: var(--danger); font-weight: 700; }
@media (max-width: 599px) { .balance-scenario { margin-left: 0; } }

/* ---- 年を選ぶつまみ ---- */
.balance-controls { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .6rem 0 .3rem; }
.balance-controls label { margin: 0; font-size: .88rem; flex: 0 0 auto; }
.balance-age {
  font-size: 1.15rem; font-weight: 700; color: var(--accent-dark);
  min-width: 4rem; text-align: center; background: var(--accent-soft);
  border-radius: 999px; padding: .1rem .7rem;
}
#balance-year {
  flex: 1 1 100%; width: 100%; margin: .3rem 0 0;
  -webkit-appearance: none; appearance: none;
  height: 2.4rem; background: transparent; cursor: pointer;
}
#balance-year::-webkit-slider-runnable-track {
  height: .5rem; border-radius: 999px; background: #dbe3ea;
}
#balance-year::-moz-range-track { height: .5rem; border-radius: 999px; background: #dbe3ea; }
#balance-year::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 2rem; height: 2rem; margin-top: -.75rem; border-radius: 50%;
  background: var(--accent); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
#balance-year::-moz-range-thumb {
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--accent); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
#balance-year:focus-visible { outline: 3px solid #9ecbdc; outline-offset: 2px; }
.balance-scenario { display: flex; gap: .35rem; flex-wrap: wrap; margin: .2rem 0 .6rem; }

/* ---- 子どもごとの内訳 ---- */
table.balance tr.child-row td { padding-top: .2rem; padding-bottom: .2rem; font-size: .84rem; color: var(--ink-sub); border-bottom: 0; }
table.balance tr.child-row td:first-child { padding-left: 1.2rem; }
table.balance .child-mark { color: var(--accent); margin-right: .3rem; }
table.balance .num.subtotal { font-weight: 700; }
details.explain > .explain-body { padding: .2rem .2rem 0; }
.red-zone-note { line-height: 1.8; }

/* ---- 奨学金の見取り図 ---- */
.scholarship-map h3 { border: 0; }
table.map-table { width: 100%; border-collapse: collapse; font-size: .86rem; margin: .6rem 0; }
table.map-table th, table.map-table td { border: 1px solid var(--line); padding: .5rem .6rem; text-align: left; vertical-align: top; }
table.map-table thead th { background: #eef2f6; text-align: center; }
table.map-table tbody th { background: #f6f8fa; white-space: nowrap; width: 5rem; }
.lever { background: var(--ok-soft); border-left: 4px solid var(--ok); border-radius: 0 8px 8px 0; padding: .7rem .85rem; margin: .8rem 0; }
.lever-head { margin: 0 0 .3rem; font-weight: 700; font-size: 1rem; color: var(--ok); }
.lever p { font-size: .88rem; line-height: 1.75; margin: .3rem 0; }
.lever-example { background: rgba(255,255,255,.75); border-radius: 6px; padding: .5rem .7rem; }
.lever-diff { color: var(--danger); font-size: 1.02rem; }
.loan-sim { background: var(--warn-soft); border: 1px solid #e0b860; border-radius: var(--radius); padding: .8rem .9rem; margin: .8rem 0; }
.loan-sim-head { margin: 0 0 .3rem; font-weight: 700; font-size: 1rem; color: var(--warn); }
.loan-sim p { font-size: .88rem; line-height: 1.75; margin: .35rem 0; }
.loan-order { background: rgba(255,255,255,.8); border-radius: 6px; padding: .5rem .7rem; font-weight: 700; }

/* ============================================================
   つぎにやること（4つの章）
   ============================================================ */
#guide { display: none; }
#guide.shown { display: block; }

.step-title {
  margin: 1.6rem 0 .5rem; font-size: 1.15rem; color: var(--ink);
  border-bottom: 2px solid var(--accent-soft); padding-bottom: .35rem;
}

/* 身の安全 */
.safety { display: none; }
.safety.shown { display: block; }
.safety {
  background: var(--danger-soft); border: 1px solid #e2b3b3;
  border-left: 5px solid var(--danger);
  border-radius: var(--radius); padding: .8rem .9rem; margin: 1.4rem 0;
}
.safety h3 { margin: 0 0 .4rem; font-size: 1.02rem; color: var(--danger); }
.safety p, .safety li { font-size: .88rem; line-height: 1.8; }
.safety-tel { font-weight: 700; background: rgba(255,255,255,.75); border-radius: 6px; padding: .5rem .7rem; }
.safety-escape { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 0; }

/* 持ち帰るもののまとめ */
.finish { display: none; }
.finish.shown { display: block; }
.finish {
  background: var(--ok-soft); border: 1px solid #b9dcc7; border-radius: var(--radius);
  padding: 1rem; margin: 1.6rem 0 .5rem;
}
.finish h3 { margin: 0 0 .5rem; color: var(--ok); font-size: 1.1rem; }
.finish-head { font-weight: 700; margin: .6rem 0 .2rem; }
.finish-first {
  background: rgba(255,255,255,.85); border-radius: 6px; padding: .6rem .8rem;
  font-size: .95rem; line-height: 1.8;
}

/* 制度カードは、閉じたときは1行だけ */
details.prog > summary {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  cursor: pointer; list-style: none; padding: .1rem 0;
}
details.prog > summary::-webkit-details-marker { display: none; }
details.prog > summary::before {
  content: '▶'; font-size: .65rem; color: var(--ink-sub); flex: 0 0 auto;
  transition: transform .15s;
}
details.prog[open] > summary::before { transform: rotate(90deg); }
.prog-name { font-weight: 700; flex: 1 1 60%; line-height: 1.5; }
.prog-amount { font-size: .84rem; font-weight: 700; white-space: nowrap; }
.prog-amount.plus { color: var(--ok); }
.prog-amount.check { color: var(--check); font-weight: 400; }
.prog-amount.none { color: var(--ink-sub); font-weight: 400; }
.prog-detail { margin-top: .5rem; border-top: 1px dashed var(--line); padding-top: .5rem; }
.prog-badges { margin: 0 0 .4rem; }

/* 金額欄の下に小さく出す、もう一方の単位への読み替え。
   円の欄には「= 11.0万円」、万円の欄には「= 2,000,000円」。
   万円と円が混ざっていて分かりにくい、と教わって足した（2026/9/6）。 */
.money-read {
  font-size: .78rem; color: var(--ink-sub);
  margin: .15rem 0 0; min-height: 1em;
  font-variant-numeric: tabular-nums;
}
.money-read:empty { min-height: 0; }

/* 「その年の家計を見る」の、大事な3つの数字。
   前は表のいちばん下にあって、スクロールしないと残りが見えなかった（issue #3）。 */
.balance-summary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: .5rem; margin: .6rem 0;
}
.bs-cell {
  display: flex; flex-direction: column; gap: .15rem;
  border: 1px solid var(--line); border-radius: 10px;
  padding: .5rem .65rem; background: #fff;
}
.bs-label { font-size: .76rem; color: var(--ink-sub); }
.bs-num { font-size: 1.02rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.bs-cell.bs-main { background: var(--accent-soft); border-color: var(--accent-dark); }
.bs-cell.bs-main .bs-num { font-size: 1.2rem; }
.bs-cell.minus .bs-num { color: var(--danger); }
.balance-detail { margin: .5rem 0; }
.balance-detail summary { cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--accent-dark); }