/* 試作3号（統合版）の見せ方：スマホを主に、パソコンも読みやすく
   色は3つの意味だけ：緑＝もらうお金／赤＝払うお金・危ない期限／黄＝確認が必要（条件しだい）。リンクは青 */
:root {
  --bg: #f6f6f3; --surface: #ffffff; --text: #1d2321; --muted: #5d6763; --line: #e3e5e1;
  --get: #1f7a4d; --get-soft: #e6f3ec; --pay: #b4372e; --pay-soft: #fbe9e7; --chk: #9a6a00; --chk-soft: #fbf1d9;
  --link: #1f5fbf; --brand: #1f4f46; --brand-soft: #e5efeb;
  --accent: var(--brand); --accent-soft: var(--brand-soft);
  --ok: var(--get); --ok-soft: var(--get-soft); --ng: var(--pay); --ng-soft: var(--pay-soft); --warn: var(--chk); --warn-soft: var(--chk-soft);
  --r: 14px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141716; --surface: #1d2120; --text: #e8ecea; --muted: #a3ada9; --line: #2e3533;
    --get: #5cc38f; --get-soft: #1b3127; --pay: #ef8a80; --pay-soft: #3a2422; --chk: #e2b552; --chk-soft: #362c17;
    --link: #7fb0ff; --brand: #8fd1c1; --brand-soft: #1f302b;
  }
}
body { line-height: 1.7; }
a { color: var(--link); }
.nv { max-width: 720px; margin: 0 auto; padding: 8px 16px 80px; }
.nv-note { font-size: 13px; color: var(--muted); margin: 8px 0; }
.sec { font-size: 18px; margin: 22px 0 8px; }
.in { color: var(--get); } .out { color: var(--pay); }

/* ---------- 画面の切り替え（質問／結果／一覧） ---------- */
.wz-top, .wz-nav, .ls-top, .ls-nav, .nv-intro { display: none; }
body[data-mode="wizard"] .wz-top, body[data-mode="wizard"] .wz-nav { display: block; }
body[data-mode="wizard"].first .nv-intro { display: block; }
body[data-mode="list"] .ls-top { display: block; }
body[data-mode="list"] .ls-nav { display: block; }
body[data-mode="result"] .qform, body:not([data-mode="result"]) #result { display: none; }
.qhead { display: none; }

/* ---------- 質問（1画面1問） ---------- */
.nv-intro { padding-top: 12px; }
.nv-intro h1 { font-size: 22px; line-height: 1.45; margin: 4px 0 6px; }
.nv-intro .lead { margin: 0 0 12px; font-size: 14.5px; }
.nv-intro .free-note { font-size: 13.5px; }
.wz-top { padding-top: 16px; }
.wz-track { height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.wz-track i { display: block; height: 100%; width: 0; background: var(--brand); transition: width .2s; }
.wz-k { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
body[data-mode="wizard"] .qform section.step:not(.cur) { display: none; }
body[data-mode="wizard"] #more > summary, body[data-mode="wizard"] #more > .hint { display: none; }
body[data-mode="wizard"] .qform .profile-bar { display: none; }
body[data-mode="wizard"].first .qform .profile-bar { display: block; }
body[data-mode="wizard"] .qform .step { background: none; border: 0; padding: 4px 0 0; margin: 0; box-shadow: none; }
body[data-mode="wizard"] .qform .step h2 { font-size: 23px; line-height: 1.45; margin: 4px 0 10px; display: block; }
body[data-mode="wizard"] .qform .step h2 .num { display: none; }
body[data-mode="wizard"] .qform .step h2 .opt { font-size: 12px; font-weight: 700; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; vertical-align: 4px; margin-left: 4px; }
body[data-mode="wizard"] .qform .hint { font-size: 14px; margin: 0 0 14px; }
body[data-mode="wizard"] .qform .choices { display: grid; gap: 10px; flex-direction: column; }
body[data-mode="wizard"] .qform .choices span { display: block; font-size: 16.5px; padding: 14px 16px; border-radius: var(--r); border: 1.5px solid var(--line); background: var(--surface); line-height: 1.5; text-align: left; }
body[data-mode="wizard"] .qform .step.touched .choices input:checked + span { border-color: var(--brand); background: var(--brand-soft); color: var(--text); }
/* 質問では、本人がまだ選んでいない問いは何も選ばれていない見た目にする（計算は既定の「わからない」などで行う） */
body[data-mode="wizard"] .qform .step:not(.touched) .choices input:checked + span { border-color: var(--line); background: var(--surface); color: var(--text); font-weight: inherit; box-shadow: none; }
.wz-skip { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); text-align: right; }
.wz-skip:empty { display: none; }
body[data-mode="wizard"] .qform .sit-choices span { display: flex; flex-direction: column; gap: 2px; }
body[data-mode="wizard"] .qform .sit-choices span b { font-size: 17px; }
body[data-mode="wizard"] .qform .sit-choices span small { font-size: 13px; }
body[data-mode="wizard"] .qform .inline input, body[data-mode="wizard"] .qform #area { font-size: 19px; padding: 11px 14px; border-radius: var(--r); border: 1.5px solid var(--line); background: var(--surface); color: var(--text); min-height: 52px; }
body[data-mode="wizard"] .qform .inline input { width: 100%; max-width: 260px; }
body[data-mode="wizard"] .qform .inline.sub { flex-wrap: wrap; font-size: 15px; margin-top: 12px; }
body[data-mode="wizard"] .qform .inline.sub > span:first-child { flex: 1 0 100%; color: var(--text); font-weight: 700; }
.wz-nav { padding: 20px 0 8px; }
.wz-err { margin: 0 0 8px; min-height: 1em; color: var(--pay); font-weight: 700; font-size: 14px; }
.wz-err:empty { display: none; }
.wz-btns { display: flex; justify-content: space-between; gap: 10px; }
.wz-back, .wz-next { font: inherit; font-weight: 700; font-size: 16px; padding: 12px 22px; border-radius: 999px; cursor: pointer; }
.wz-back { border: 1px solid var(--line); background: var(--surface); color: var(--muted); }
.wz-back[hidden] + .wz-next { margin-left: auto; }
.wz-next { border: 0; background: var(--brand); color: var(--surface); min-width: 130px; }
.wz-link { display: block; font: inherit; font-size: 14px; margin-top: 18px; background: none; border: 0; color: var(--link); text-decoration: underline; cursor: pointer; padding: 0; }
.wz-link[hidden] { display: none; }

/* ---------- 一覧で直す ---------- */
.ls-top h1 { font-size: 21px; margin: 16px 0 4px; }
body[data-mode="list"] #more > summary { pointer-events: none; }
body[data-mode="list"] #more > summary::before { content: ""; }
body[data-mode="list"] .qform { padding-bottom: 72px; }
.ls-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 10px 16px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(6px); text-align: center; border-top: 1px solid var(--line); }
.ls-nav .wz-next { width: 100%; max-width: 420px; }

/* ---------- 結果：条件の要約 ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 0 6px; }
.chip-c { font: inherit; font-size: 12.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; white-space: nowrap; }
.chip-c.edit { color: var(--link); border-color: currentColor; }
@media (max-width: 959px) {
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
  .chips::-webkit-scrollbar { display: none; }
}
.more-btn { display: flex; margin-bottom: 14px !important; flex-direction: column; gap: 2px; width: 100%; text-align: left; font: inherit; margin: 6px 0 4px; padding: 10px 14px; border-radius: var(--r); border: 1.5px dashed var(--chk); background: var(--chk-soft); color: var(--text); cursor: pointer; }
.more-btn b { color: var(--chk); font-size: 14.5px; }
.more-btn b::after { content: " →"; }
.more-btn span { font-size: 12.5px; color: var(--muted); }

/* ---------- 結果：結論カード ---------- */
.hero { background: var(--surface); border-radius: 20px; padding: 20px 18px; margin: 8px 0 16px; box-shadow: 0 1px 0 var(--line); }
.h-k { margin: 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.h-l { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.h-v { margin: 0; font-size: 40px; font-weight: 800; color: var(--get); line-height: 1.2; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.h-items { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.h-items li { display: flex; align-items: center; gap: 6px; }
.h-items b { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.h-btn { font: inherit; font-weight: 700; margin-top: 8px; padding: 8px 16px; border-radius: 999px; border: 0; background: var(--brand); color: var(--surface); cursor: pointer; }
.h-first { margin-top: 16px; padding: 14px 16px; border-radius: var(--r); background: var(--bg); }
.h-fl { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.h-ft { margin: 2px 0 0; font-size: 18px; font-weight: 800; line-height: 1.45; }
.h-due { margin: 2px 0 0; font-size: 14px; font-weight: 700; }
.h-due.warn, .a-d.warn { color: var(--pay); }
.h-worst { margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.h-worst b { color: var(--pay); white-space: nowrap; }
.h-legend { margin: 12px 0 0; font-size: 11.5px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.mk { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 12px; font-weight: 800; flex: 0 0 auto; line-height: 1; }
.mk.s-yes { color: var(--get); background: var(--get-soft); }
.mk.s-dep { color: var(--chk); background: var(--chk-soft); }
.mk.s-no { color: var(--muted); background: var(--line); }

/* ---------- 結果：タブ ---------- */
.seg { position: sticky; top: 52px; z-index: 5; display: flex; gap: 4px; padding: 5px; background: var(--line); border-radius: 999px; margin: 0 0 12px; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button { flex: 1 0 auto; font: inherit; font-size: 13.5px; font-weight: 700; padding: 7px 12px; border-radius: 999px; border: 0; background: transparent; color: var(--muted); cursor: pointer; white-space: nowrap; }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.panel { min-height: 200px; }

/* ---------- 予定とやること（時間の線＋チェック） ---------- */
.plan-h { margin: 4px 0 12px; }
.prog { margin: 0; font-size: 14px; color: var(--muted); }
.prog b { font-size: 20px; color: var(--get); }
.chk-bar { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; margin: 2px 0 0; }
.chk-bar i { display: block; height: 100%; background: var(--get); }
.tl { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 2px solid var(--line); margin-left: 7px; }
.tl-m { position: relative; padding: 0 0 18px 12px; }
.tl-m::before { content: ""; position: absolute; left: -25px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 3px solid var(--line); box-sizing: border-box; }
.tl-m.now::before { border-color: var(--brand); background: var(--brand); }
.tl-m.past > .tl-h { color: var(--muted); }
.tl-h { margin: 0; font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.today { font-size: 11px; font-weight: 700; color: var(--surface); background: var(--brand); border-radius: 999px; padding: 1px 8px; }
.tl-money { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 2px 0 6px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tl-money .net { font-weight: 600; color: var(--muted); }
.tl-money .net.out { color: var(--pay); }
.tl-money .job { color: var(--link); }
.tl-ev { list-style: none; margin: 0; padding: 0; background: var(--surface); border-radius: var(--r); overflow: hidden; }
.tl-ev > li { border-bottom: 1px solid var(--line); }
.tl-ev > li:last-child { border-bottom: 0; }
.tl-ev .ev { display: grid; grid-template-columns: 30px 40px 1fr; gap: 0 8px; padding: 9px 12px; font-size: 14px; color: var(--muted); }
.tl-ev .ev .tl-d { grid-column: 2; }
.tl-ev .ev .tl-t { grid-column: 3; }
.tl-ev .ev.k-milestone { color: var(--link); font-weight: 700; }
.tl-ev .ev.k-deadline { color: var(--text); }
.tl-ev .ev small { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }
.tl-ev .past { opacity: .5; }
.tl-d { font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13.5px; }
.tag-pay, .tag-est { font-style: normal; font-size: 11px; font-weight: 700; border-radius: 4px; padding: 0 5px; margin-left: 6px; vertical-align: 1px; white-space: nowrap; }
.tag-pay { color: var(--pay); background: var(--pay-soft); }
.tag-est { color: var(--muted); background: var(--line); }
/* やること（チェックできる） */
.act { display: grid; grid-template-columns: 30px 1fr; align-items: start; padding-left: 12px; }
.act .ck { width: 22px; height: 22px; margin: 11px 0 0; accent-color: var(--get); cursor: pointer; }
.act details > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 40px 1fr; gap: 0 8px; padding: 9px 12px 9px 0; }
.act details > summary::-webkit-details-marker { display: none; }
.tl-ev.solo .act details > summary { grid-template-columns: 1fr; }
.act summary .tl-d { grid-row: 1 / span 2; padding-top: 1px; }
.a-t { font-weight: 700; font-size: 15px; line-height: 1.5; }
.a-t::after { content: "▾"; font-size: 11px; color: var(--muted); margin-left: 6px; }
.act details[open] .a-t::after { content: "▴"; }
.a-d { grid-column: 2; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.tl-ev.solo .a-d { grid-column: 1; }
.act.hi .a-t { color: var(--text); }
.act.done .a-t { color: var(--muted); text-decoration: line-through; }
.act.done .tag-pay { display: none; }
.a-body { padding: 0 12px 12px 0; font-size: 14px; }
.a-body p { margin: 0 0 6px; }
.a-body dl { display: grid; grid-template-columns: 52px 1fr; gap: 2px 8px; margin: 8px 0; }
.a-body dt { font-weight: 700; color: var(--muted); }
.a-body dd { margin: 0; }
.a-lk a { font-weight: 700; }
.a-sys { font-size: 12.5px; color: var(--muted); }
.tools-bar { margin-top: 16px; }

/* ---------- お金 ---------- */
.get { list-style: none; margin: 0 0 8px; padding: 0; background: var(--surface); border-radius: var(--r); }
.get li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.get li:last-child { border-bottom: 0; }
.g-n { display: flex; flex-direction: column; font-weight: 700; line-height: 1.5; min-width: 0; }
.g-n small { font-weight: 400; color: var(--muted); font-size: 12px; }
.g-n small.cond { color: var(--chk); }
.get b { margin-left: auto; font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.f-head { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.f-head > div { background: var(--surface); border-radius: var(--r); padding: 10px 12px; border: 0; }
.f-v.in { color: var(--get); } .f-v.out { color: var(--pay); }
.f-in { fill: var(--get); } .f-out { fill: var(--pay); } .l-in { background: var(--get) !important; } .l-out { background: var(--pay) !important; }
.f-strat li.best { border-color: var(--get); background: var(--get-soft); }
@media (max-width: 600px) { .f-head { grid-template-columns: 1fr 1fr; } .f-head > div:last-child { grid-column: 1 / -1; } .f-v { font-size: 18px; } }

/* ---------- くわしく：制度ごと ---------- */
.sys-list { background: var(--surface); border-radius: var(--r); overflow: hidden; margin-bottom: 10px; }
details.sys { border-bottom: 1px solid var(--line); }
details.sys:last-child { border-bottom: 0; }
details.sys > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
details.sys > summary::-webkit-details-marker { display: none; }
details.sys > summary b { margin-left: auto; white-space: nowrap; }
.sys-b { padding: 0 14px 14px 44px; font-size: 14px; }
.sys-b .c-act { margin: 10px 0; }
.sum-k { font-size: 13.5px; color: var(--muted); margin: 0 0 8px; }

/* 共通の見た目を新しい色に合わせる */
.r2 { margin: 18px 0; }
.r2-h { font-size: 18px; }
.lk-g.pub { border-color: var(--get); background: var(--get-soft); }
.lk-note a, .lk-src a, .lk li a, .lk-cat a { color: var(--link); }
.disclaimer { margin-top: 28px; }

/* ---------- パソコン ---------- */
@media (min-width: 960px) {
  .nv { max-width: 880px; }
  body[data-mode="wizard"] .qform, .wz-top, .wz-nav, .nv-intro { max-width: 600px; margin-left: auto; margin-right: auto; }
  body[data-mode="wizard"] .qform .step h2 { font-size: 26px; }
  .hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 6px 28px; padding: 26px 28px; }
  .hero .h-k { grid-column: 1 / -1; }
  .hero > .h-l, .hero > .h-v, .hero > .h-items, .hero > .h-btn { grid-column: 1; }
  .hero > .h-first { grid-column: 2; grid-row: 2 / span 2; margin-top: 0; align-self: start; }
  .hero > .h-worst { grid-column: 2; grid-row: 4; align-self: start; margin: 0; padding: 0 4px; }
  .hero > .h-legend { grid-column: 1 / -1; }
  .h-v { font-size: 48px; }
  .seg button { font-size: 14.5px; padding: 8px 14px; }
  .tl-ev .ev, .act details > summary { font-size: 15px; }
  .act details > summary { grid-template-columns: 44px 1fr auto; align-items: baseline; }
  .act details > summary .a-d { grid-column: 3; grid-row: 1; text-align: right; }
  .tl-ev.solo .act details > summary { grid-template-columns: 1fr auto; }
  .tl-ev.solo .a-d { grid-column: 2; }
}

/* ---------- 印刷 ---------- */
@media print {
  .chips, .more-btn, .seg, .wz-top, .wz-nav, .ls-nav, .qform { display: none !important; }
  .panel[hidden] { display: block !important; }
  .panel { break-before: page; }
  .panel:first-of-type { break-before: auto; }
}

/* ---------- 見本（A・B・C）の部品にそろえる ---------- */
.sec small { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-left: 4px; }
.sec small.out { color: var(--pay); }
.nv-tip { font-size: 13.5px; line-height: 1.7; margin: 10px 0; padding: 10px 12px; border-radius: 10px; border-left: 4px solid var(--chk); background: var(--chk-soft); }
.get li.best { background: var(--get-soft); }
.g-n small.good { color: var(--get); font-weight: 700; }
.get.mado .g-n small { font-size: 12.5px; }
details.fold { background: var(--surface); border-radius: var(--r); margin: 10px 0; }
details.fold > summary { cursor: pointer; padding: 10px 14px; font-weight: 700; font-size: 14px; color: var(--text); }
details.fold > :not(summary) { padding: 0 14px 12px; font-size: 13.5px; }
details.fold ul { margin: 0; padding-left: 1.4em; color: var(--muted); }
/* 月ごとの出入り（横の棒） */
.mm { list-style: none; margin: 0; padding: 10px 14px; background: var(--surface); border-radius: var(--r); display: grid; gap: 6px; }
.mm li { display: grid; grid-template-columns: 52px 1fr 84px; align-items: center; gap: 8px; font-size: 13px; }
.mm li.worst { background: var(--pay-soft); border-radius: 8px; margin: 0 -6px; padding: 2px 6px; }
.mm-m small { display: block; font-size: 10.5px; color: var(--link); }
.mm-bars, .cv-bars { display: grid; gap: 2px; }
.mm-bars i, .cv-bars i { display: block; height: 7px; border-radius: 4px; min-width: 2px; }
.mm-bars i.in, .mm-leg i.in { background: var(--get); }
.mm-bars i.out, .mm-leg i.out { background: var(--pay); }
.mm-n { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.mm-n small { font-weight: 400; color: var(--muted); }
.mm li.neg .mm-n { color: var(--pay); }
.mm li.job { color: var(--muted); }
.mm-leg { font-size: 12px; color: var(--muted); margin: 6px 0; }
.mm-leg i { display: inline-block; width: 12px; height: 7px; border-radius: 3px; margin: 0 4px 0 8px; }
.mm-leg i:first-child { margin-left: 0; }
/* 就職時期ごとの受け取り（横の棒） */
.cv { list-style: none; margin: 0; padding: 10px 14px; background: var(--surface); border-radius: var(--r); display: grid; gap: 4px; }
.cv li { display: grid; grid-template-columns: 64px 1fr 104px; align-items: center; gap: 8px; font-size: 13px; padding: 3px 0; }
.cv li.sel { background: var(--brand-soft); border-radius: 8px; margin: 0 -6px; padding: 3px 6px; }
.cv-m small { display: block; font-size: 10.5px; color: var(--brand); font-weight: 700; }
.cv-bars { display: flex; gap: 0; }
.cv-bars i { height: 10px; border-radius: 0; }
.cv-bars i:first-child { border-radius: 5px 0 0 5px; } .cv-bars i:last-child { border-radius: 0 5px 5px 0; } .cv-bars i:only-child { border-radius: 5px; }
.cv-bars i.ben, .mm-leg i.ben { background: var(--get); }
.cv-bars i.ben.r60 { background: color-mix(in srgb, var(--get) 70%, var(--surface)); }
.cv-bars i.ben.r0 { background: color-mix(in srgb, var(--get) 40%, var(--surface)); }
.cv-bars i.sal, .mm-leg i.sal { background: color-mix(in srgb, var(--muted) 45%, var(--surface)); }
.cv-n { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3; }
.cv-n.top { color: var(--get); }
.cv-n small { display: block; font-size: 10.5px; font-weight: 400; color: var(--muted); }
/* 良くする */
.better { list-style: none; margin: 0 0 10px; padding: 0; background: var(--surface); border-radius: var(--r); overflow: hidden; }
.better li { padding: 12px 14px; border-bottom: 1px solid var(--line); border-left: 4px solid var(--chk); }
.better li:last-child { border-bottom: 0; }
.better li.better { border-left-color: var(--get); }
.better li.warn { border-left-color: var(--pay); }
.b-k { margin: 0; font-size: 12px; font-weight: 700; color: var(--muted); }
.better li.better .b-k { color: var(--get); } .better li.warn .b-k { color: var(--pay); } .better li.tip .b-k { color: var(--chk); }
.b-t { margin: 2px 0 0; font-weight: 700; line-height: 1.5; }
.b-e { margin: 2px 0 0; font-size: 14px; }
.b-d { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.b-more > summary { cursor: pointer; font-size: 12.5px; color: var(--link); margin-top: 4px; }
/* 退職日の比較（項目ごとに候補を横に並べる） */
.hk-dates { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.hk-dates label { display: flex; flex-direction: column; font-size: 12px; color: var(--muted); font-weight: 700; }
.hk-dates input { font: inherit; font-size: 15px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.hk2 { list-style: none; margin: 0 0 10px; padding: 0; background: var(--surface); border-radius: var(--r); }
.hk2 > li { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.hk2 > li:last-child { border-bottom: 0; }
.hk2-k { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.hk2-v { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; }
.hk2-v > div { border: 1.5px solid var(--line); border-radius: 10px; padding: 6px 8px; font-size: 13.5px; line-height: 1.5; }
.hk2-v > div.best { border-color: var(--get); background: var(--get-soft); }
.hk2-d { display: block; font-size: 11px; color: var(--muted); font-weight: 700; }
.hk2-d em { font-style: normal; color: var(--brand); margin-left: 4px; }
.hk2-x { font-weight: 700; }
.hk2-x small { display: block; font-weight: 400; font-size: 11.5px; color: var(--muted); }
/* 仕事・学び直しのリンク */
.lk-wrap { display: grid; gap: 10px; }
.lk-g { background: var(--surface); border: 0; border-radius: var(--r); padding: 12px 14px; }
.lk-g.pub { background: var(--get-soft); }
details.lk-g > summary { cursor: pointer; list-style: none; }
details.lk-g > summary::-webkit-details-marker { display: none; }
details.lk-g > summary::after { content: "開く ▾"; font-size: 12px; color: var(--link); margin-left: 8px; font-weight: 700; }
details.lk-g[open] > summary::after { content: "閉じる ▴"; }
details.lk-g.fold > :not(summary) { padding: 0; }
.lk-h { margin: 0; font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.lk-n { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 600; }
.lk-note { margin: 6px 0 8px; font-size: 12.5px; }
.lk-cat { margin: 12px 0 2px; font-size: 12px; font-weight: 700; color: var(--muted); border: 0; padding: 0; }
.lk { gap: 0; }
.lk li { display: block; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.lk li:last-child { border-bottom: 0; }
.lk li a { font-weight: 700; color: var(--link); }
.lk-w, .lk.crs .lk-w { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.lk-f { font-size: 11px; color: var(--muted); margin-left: 6px; }
.lk-warn { border-left-color: var(--chk); background: var(--chk-soft); border-radius: 10px; }
/* くわしく */
.g-h { font-size: 13.5px; font-weight: 700; color: var(--muted); margin: 14px 0 6px; }
.ix { display: grid; gap: 0; background: var(--surface); border-radius: var(--r); overflow: hidden; }
.ix-item { padding: 12px 14px; border: 0; border-bottom: 1px solid var(--line); border-left: 4px solid var(--chk); border-radius: 0; background: none; font-size: 14px; }
.ix-item:last-child { border-bottom: 0; }
.ix-item p { margin: 0; }
.ix-t { font-weight: 700; margin-bottom: 2px !important; }
.lk-more > summary { font-weight: 700; }
.ix-t::before { content: none !important; }

/* 正確さの状態 */
.h-acc { margin: 8px 0 0; font-size: 11.5px; color: var(--muted); grid-column: 1 / -1; }
.h-acc.warn { color: var(--chk); font-weight: 700; }
.flag { margin: 0 0 8px; padding: 8px 10px; border-radius: 10px; background: var(--chk-soft); color: var(--text); font-size: 13px; border-left: 4px solid var(--chk); }
.get.acc .g-n small { font-size: 13px; color: var(--text); font-weight: 400; }

/* ---------- 細部の調整（2026-11-05） ---------- */
/* A1：タブはスマホでは短い名前にして、6つとも見えるように（名前の長さに合わせて幅を配る） */
.seg .tl-short { display: none; }
@media (max-width: 959px) {
  .seg { overflow: visible; }
  .seg { gap: 2px; padding: 4px; }
  .seg button { flex: 1 1 auto; min-width: 0; padding: 8px 3px; font-size: 12.5px; letter-spacing: -.02em; }
  .seg .tl-long { display: none; }
  .seg .tl-short { display: inline; }
}
/* A2：リンクではない予定（退職日・就職など）はリンクの青を使わない */
.tl-ev .ev.k-milestone { color: var(--text); }
/* A4：小さすぎる文字を読める大きさに */
.h-legend { font-size: 12.5px; gap: 6px; }
.h-acc { font-size: 12.5px; line-height: 1.6; }
.h-acc a { white-space: nowrap; }
.chip-c { font-size: 13.5px; }
.g-n small, .a-sys, .lk-w, .r-b small { font-size: 12.5px; }
/* A6：退職日の比較を読みやすく（候補が3つならスマホでは2列＋1列） */
.hk2-v { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.hk2-v > div { font-size: 14.5px; padding: 8px 10px; }
.hk2-d { font-size: 12px; }
.hk2-x small { font-size: 12.5px; }
.hk-dates label { font-size: 13px; }
.hk-dates input { min-height: 44px; font-size: 16px; }
/* A9：指で押しやすい大きさ（目安44px） */
.chip-c { min-height: 36px; padding: 6px 12px; }
.seg button { min-height: 40px; }
details.fold > summary, details.lk-g > summary, .b-more > summary { min-height: 44px; display: flex; align-items: center; }
.b-more > summary { min-height: 36px; }
.act .ck { width: 24px; height: 24px; }
.act details > summary { min-height: 48px; }
.lk li a { display: inline-block; padding: 3px 0; }
.wz-link { padding: 8px 0; }

/* ---- 失業保険・再就職手当をくわしく（お金のタブ）---- */
.kh { display: grid; gap: 10px; margin: 8px 0 12px; }
@media (min-width: 760px) { .kh { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
.kh-c { border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--surface); margin: 8px 0 10px; }
.kh .kh-c { margin: 0; }
.kh-l { margin: 0 0 2px; font-size: 13px; font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.kh-h { margin: 2px 0 4px; font-weight: 700; }
.kh-v { margin: 0; font-size: 28px; font-weight: 900; color: var(--get); line-height: 1.25; font-variant-numeric: tabular-nums; }
.kh-v.no { color: var(--muted); font-size: 22px; }
.kh-s { margin: 2px 0 0; font-size: 13.5px; }
.kh-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: #ececec; margin: 10px 0 4px; }
.kh-bar i, .kh-lg i { display: block; }
.kh-lg { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; font-size: 12px; color: var(--muted); }
.kh-lg span { display: inline-flex; align-items: center; gap: 4px; }
.kh-lg i { width: 10px; height: 10px; border-radius: 3px; }
.kh-bar .proc, .kh-lg .proc { background: #9a9a9a; } .kh-bar .wait, .kh-lg .wait { background: #c9b98a; } .kh-bar .restr, .kh-lg .restr { background: #d98c5f; } .kh-bar .pay, .kh-lg .pay { background: var(--get); }
.kh-n { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.kh-basis { font-size: 13.5px; padding-left: 1.2em; }

/* ---- ふるさと納税のタブ ---- */
.fz-in { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 12px; }
@media (max-width: 520px) { .fz-in { grid-template-columns: 1fr; } }
.fz-in label { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; font-weight: 700; }
.fz-iv { display: flex; align-items: center; gap: 6px; font-weight: 400; }
.fz-iv input { font: inherit; font-size: 16px; min-height: 44px; padding: 6px 10px; border: 2px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); width: 100%; min-width: 0; }
.fz-hero { background: var(--surface); border-radius: 18px; padding: 18px; margin: 0 0 14px; border: 2px solid var(--line); }
html[data-design="k"] .fz-hero { border-color: #0b0b0b; box-shadow: 6px 6px 0 #0b0b0b; }
.fz-cmp { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.fz-cmp li { display: grid; grid-template-columns: 7.5em 1fr auto; align-items: center; gap: 8px; font-size: 13.5px; }
.fz-cmp i { display: block; height: 10px; border-radius: 5px; background: #0b0b0b; min-width: 2px; }
.fz-cmp li.you i { background: var(--get); }
.fz-cmp b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fz-don { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 700; }
.fz-don.ok { background: var(--get-soft); color: var(--get); }
.fz-don.over { background: var(--pay-soft); color: var(--pay); }
.fz-proc { border: 2px solid var(--line); border-radius: 14px; padding: 14px 16px; margin: 0 0 16px; background: var(--surface); }
html[data-design="k"] .fz-proc { border-color: #0b0b0b; }
.fz-proc .k { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.fz-proc .t { margin: 2px 0 6px; font-size: 20px; font-weight: 900; }
.fz-proc ul { margin: 0; padding-left: 1.2em; font-size: 14px; }
.fz-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.fz-tbl th, .fz-tbl td { padding: 6px 4px; border-bottom: 1px solid #e5e5e5; text-align: left; vertical-align: top; }
.fz-tbl td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fz-src { font-size: 12.5px; padding-left: 1.2em; }