/* ============================================================
   module.css — ツール共通スタイル（フォーム＋年次結果テーブル等）
   「入力フォーム→試算結果」型ツールで共有。common.css の後に読み込む。
   固有ページ用CSSは、2〜3ツール出揃って明らかに固有と分かってから作る方針。
   カラバリは各ツール側で :root 変数を上書きして対応する。
   ============================================================ */
  :root{
    --navy:#16324f; --navy-2:#22496e; --ink:#1a2330; --paper:#f4f6f8;
    --line:#dde2e8; --pos:#0f7a52; --neg:#c0392b; --neg-soft:#fdeceb;
    --bridge:#fff6de; --bridge-line:#e8c766; --death:#e4e8ee; --death-line:#d98282; --death-edge:#a7b2c1;
    --short:#fcdcdc; --short-line:#e06666;
    --muted:#5c6675; --accent:#c9963f; --ins:#2d6ca8; --warn:#8a3a3a;   /* muted:共通で濃く（可読性改善） */
  }
  *{box-sizing:border-box;}
  body{margin:0;background:var(--paper);color:var(--ink);
    font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif;
    font-feature-settings:"palt" 1;-webkit-font-smoothing:antialiased;line-height:1.6;}
  .wrap{max-width:1200px;margin:0 auto;padding:20px 16px 70px;}
  header.top{padding:8px 2px 16px;border-bottom:2px solid var(--navy);margin-bottom:18px;}
  .eyebrow{font-size:11px;letter-spacing:.24em;color:var(--accent);font-weight:700;}
  h1{font-size:48px;margin:0;letter-spacing:.01em;line-height:1.15;transition:font-size .18s ease;}
  h1 .subttl{font-weight:400;font-size:16px;color:var(--muted);}
  .scrolled .page-head h1{font-size:24px;}
  .intro{font-size:13px;color:#42505f;line-height:1.85;max-width:74ch;}
  .intro em{color:var(--navy);font-style:normal;font-weight:700;}

  /* 各コンテンツ間の上マージン */

  /* リード：見出しは全幅、その下で本文6：画像4 */
  .lead-cols{display:flex;align-items:center;gap:28px;}
  .lead-body{flex:6 1 0;min-width:0;}
  .lead-body .lead-text{max-width:none;}
  .lead-media{flex:4 1 0;min-width:0;}
  .lead-media img{width:100%;height:auto;display:block;border-radius:14px;box-shadow:0 6px 22px rgba(22,50,79,.14);}
  @media(max-width:760px){ .lead-cols{flex-direction:column;align-items:stretch;gap:16px;} }

  /* このツールで得られるもの：左テキスト／右スクショ */
  .gained-cols{display:flex;gap:28px;align-items:flex-start;}
  .gained-body{flex:6 1 0;min-width:0;}
  .gained-body .lead-text{max-width:none;margin:0 0 4px;}
  .gained-media{flex:4 1 0;min-width:0;}
  .gained-media img{width:100%;height:auto;display:block;border-radius:12px;border:1px solid var(--line);box-shadow:0 6px 22px rgba(22,50,79,.14);}
  /* 得られるもの：用語(dt=太字20px)＋説明(dd=nml-txt=通常のp) */
  .gained-body dl{margin:0;}
  .gained-body dt{font-size:20px;font-weight:700;color:var(--navy);margin:18px 0 4px;}
  .gained-body dt:first-child{margin-top:0;}
  @media(max-width:760px){ .gained-cols{flex-direction:column;} .gained-media{flex-basis:auto;max-width:360px;align-self:center;} .gained-body dt{font-size:16px;} }

  /* 汎用アコーディオン（全幅ボックス・見出し常時表示・既定は閉）。中に何か隠れていると分かる体裁 */
  .acc{border:1px solid var(--line);border-radius:12px;background:#fff;margin:16px 0;overflow:hidden;}
  .acc-head{width:100%;display:flex;align-items:center;gap:12px;padding:14px 16px;background:#f2f6fa;border:0;cursor:pointer;font:inherit;text-align:left;color:var(--navy);transition:background .15s;}
  .acc-head:hover{background:#e8eff6;}
  .acc-title{flex:1;min-width:0;font-size:15.5px;font-weight:800;letter-spacing:.01em;}
  .acc-ic{position:relative;flex:none;width:24px;height:24px;border-radius:50%;background:var(--navy);}
  .acc-ic::before,.acc-ic::after{content:"";position:absolute;top:50%;left:50%;width:11px;height:2.5px;background:#fff;border-radius:2px;transform:translate(-50%,-50%);transition:opacity .2s;}
  .acc-ic::after{transform:translate(-50%,-50%) rotate(90deg);}
  .acc.is-open .acc-ic::after{opacity:0;}   /* ＋ → − */
  .acc-body{padding:16px;}
  .acc-body[hidden]{display:none;}
  .acc-body > *:first-child{margin-top:0;}
  #introBody > .lead .nml-h2{margin-top:0;}
  /* 計算根拠アコーディオンの中身 */
  .konkyo h3{font-size:15px;font-weight:800;color:var(--navy);margin:18px 0 8px;}
  .konkyo ul{margin:0 0 6px;padding-left:1.2em;}
  .konkyo li{font-size:13.5px;line-height:1.85;color:var(--ink);margin-bottom:5px;}
  .konkyo > p{font-size:13.5px;line-height:1.85;}

  .panel{background:#fff;border:1px solid var(--line);border-radius:10px;padding:15px 16px;margin-bottom:14px;}
  .panel > h3, .seikatsu-sub > h3{font-size:18px;letter-spacing:.02em;color:var(--navy);margin:0 0 12px;font-weight:700;}
  /* h3直下の説明文（旧：h3内にネストしていた .hint を独立した<p>に）*/
  .h3-desc{font-size:15px;letter-spacing:0;color:var(--muted);font-weight:400;line-height:1.55;margin:-7px 0 12px;}
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px 14px;}
  .asset-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));}
  .field{display:flex;flex-direction:column;gap:3px;margin-bottom:10px;}
  label{font-size:11px;color:var(--muted);line-height:1.4;}
  input,select{font:inherit;font-size:16px;height:36px;padding:4px 8px;border:1px solid var(--line);border-radius:6px;
    width:100%;font-variant-numeric:tabular-nums;background:#fff;}
  input:focus,select:focus{outline:2px solid var(--navy-2);outline-offset:-1px;border-color:var(--navy-2);}

  .member{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 12px;
    padding:8px 0;border-bottom:1px dashed var(--line);}
  .member .field{flex:0 0 auto;margin-bottom:0;}
  .member .in-unit{flex-wrap:nowrap;}   /* 家族行は折り返さない（給与の万円がinputの右に収まる）*/
  .fw-name{width:120px;} .fw-age{width:116px;} .fw-edu{width:160px;} .fw-sal{width:150px;} .fw-sex{width:76px;} .fw-priv{width:auto;} .fw-salend{width:104px;}
  .priv-chk{display:flex;gap:10px;height:36px;align-items:center;}
  .priv-chk label{display:inline-flex;align-items:center;gap:3px;font-size:13px;color:var(--ink);cursor:pointer;}
  .priv-chk input{width:auto;height:auto;}
  .edu-note{font-size:11.5px;color:var(--muted);line-height:1.7;margin:10px 0 0;}
  .chk-line{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink);margin-bottom:10px;cursor:pointer;}
  .chk-line input{width:auto;height:auto;}
  .member.spouse.off{opacity:.45;}
  .rowhint{font-size:11px;color:var(--muted);padding-bottom:9px;}
  .nospouse{display:flex;flex-direction:column;justify-content:flex-end;}
  .nospouse .chk{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--ink);
    white-space:nowrap;height:36px;cursor:pointer;}
  .nospouse .chk input{width:auto;height:auto;}
  /* 「亡くなった場合を試算する人」トグル */
  .death-select{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;padding:6px 0 10px;}
  .death-select:empty{display:none;}
  .death-select .ds-label{font-size:13px;font-weight:700;color:var(--navy);}
  .death-select .ds-btns{display:inline-flex;border:1.5px solid var(--navy);border-radius:8px;overflow:hidden;}
  .death-select .ds-btns button{border:0;background:#fff;color:var(--navy);font-weight:700;font-size:14px;padding:7px 24px;cursor:pointer;transition:background .15s,color .15s;}
  .death-select .ds-btns button + button{border-left:1.5px solid var(--navy);}
  .death-select .ds-btns button.on{background:var(--navy);color:#fff;}
  /* 行の氏名ラベル横に付く「亡くなる人」バッジ */
  .dead-badge{display:inline-block;margin-left:6px;font-size:10.5px;font-weight:700;color:var(--neg);background:#fbe9e7;border:1px solid #f0c2bb;border-radius:999px;padding:1px 7px;vertical-align:middle;}
  /* 配偶者なしチェック（行の外に常時表示）*/
  .nospouse-row{padding:6px 0 2px;}
  .nospouse-row .chk{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink);cursor:pointer;}
  .nospouse-row .chk input{width:auto;height:auto;}
  .member .rm{flex:0 0 auto;border:1px solid var(--line);background:#fff;border-radius:6px;
    padding:0 12px;height:36px;cursor:pointer;font:inherit;font-size:13px;color:var(--neg);}
  .addbtn{border:1px dashed var(--navy-2);background:#fff;color:var(--navy);border-radius:7px;
    padding:7px 12px;cursor:pointer;font:inherit;font-size:12.5px;font-weight:700;margin-top:10px;}
  .subgroup{border:1px solid var(--line);border-radius:8px;padding:11px 12px;}
  .subgroup h3{font-size:12px;margin:0 0 9px;color:var(--ink);font-weight:700;}
  /* 見た目は common.css の .note/.sub-note に統一。ここはフィールド直下に詰める位置調整のみ */
  .sub-note{margin:-4px 0 8px;}
  /* 入力の右に単位／補助を表示（ラベルから単位を外す）。バッジ等が収まらなければ折り返す（入力幅は維持）*/
  .in-unit{display:flex;align-items:center;gap:6px 8px;flex-wrap:wrap;}
  .in-unit input{flex:1 1 auto;min-width:0;}
  .unit-sfx{flex:0 0 auto;font-size:12px;color:var(--muted);white-space:nowrap;}
  /* 年入力の「＝本人◯歳」バッジ（軽い枠） */
  .age-badge{flex:0 0 auto;font-size:11px;color:#5a6675;background:#fff;border:1px solid var(--line);
    border-radius:5px;padding:1px 7px;white-space:nowrap;}
  .age-badge:empty{display:none;}
  /* PCでは入力枠を140pxに統一（住宅ローン以下のフォーム。家族＝.memberは対象外）*/
  @media(min-width:641px){
    .grid .field input, .grid .field select,
    .three-col .field input, .three-col .field select,
    .two-col .field input,
    .seikatsu-inputs .field input{ width:130px; flex:0 0 auto; }
  }
  .cap-alert{font-size:11.5px;color:var(--warn);font-weight:600;line-height:1.6;margin:6px 0 4px;
    background:#fbeeee;border:1px solid #e6c3c3;border-radius:6px;padding:6px 9px;}
  /* 試算結果の免責（目立たせるが穏やかなアンバー系） */
  /* 試算結果トップの注記（脱ボックス・流し読み用の控えめなグレー注記）*/
  .disclaimer{font-size:12px;color:var(--muted);line-height:1.75;margin:0 0 18px;}
  .disclaimer strong{color:#5a6472;font-weight:600;}
  /* 入力モード（かんたん/くわしい）*/
  .mode-toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;margin:2px 0 4px;background:#fff;}
  .mode-toggle button{border:0;background:#fff;color:var(--muted);font-weight:700;font-size:13px;padding:7px 20px;cursor:pointer;transition:background .15s,color .15s;}
  .mode-toggle button.on{background:var(--navy);color:#fff;}
  .mode-note{font-size:12px;color:var(--muted);margin:6px 0 18px;line-height:1.6;}
  body.form-simple .adv-only{display:none !important;}
  .dan-line{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:12px;color:var(--ink);flex-wrap:wrap;}
  .two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  .three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}
  .three-col .subgroup .toggle-row{margin-bottom:14px;}
  .panel-row{display:grid;grid-template-columns:1fr 3fr;gap:14px;align-items:stretch;}
  .panel-row .panel{margin-bottom:14px;}
  @media(max-width:760px){ .panel-row{grid-template-columns:1fr;} .three-col{grid-template-columns:1fr;} }
  /* 死亡時やること（副産物：折りたたみアコーディオン・年次表の下）*/
  .todo-box{border:1px solid var(--line);border-radius:10px;background:#fff;margin:18px 0;overflow:hidden;}
  .todo-box > summary{cursor:pointer;list-style:none;padding:12px 16px;font-size:13.5px;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:8px;}
  .todo-box > summary::-webkit-details-marker{display:none;}
  .todo-box > summary::before{content:"＋";color:var(--ins);font-size:13px;font-weight:700;}
  .todo-box[open] > summary::before{content:"−";}
  .todo-box[open] > summary{border-bottom:1px solid var(--line);}
  .todo-box ul{margin:0;padding:12px 16px 14px 2.2em;}
  .todo-box li{font-size:13px;color:#4a4535;margin:3px 0;line-height:1.6;}
  /* 補填/月 列（不足を何で埋めたか） */
  .fillcol .fill{color:var(--ins);font-weight:700;}
  .fillcol .src{display:block;font-size:10px;color:var(--muted);white-space:nowrap;}
  .toggle-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;}
  .toggle-row button{font:inherit;font-size:12px;padding:6px 11px;border:1px solid var(--line);
    background:#fff;border-radius:6px;cursor:pointer;}
  .toggle-row button.on{background:var(--navy);color:#fff;border-color:var(--navy);}
  /* 「なし／未加入」を選択中は控えめな警告色（紺と同トーンの赤）。あり＝紺のまま。住宅ローン・余剰金は対象外 */
  #nisaMode button[data-v="off"].on, #idecoMode button[data-v="off"].on, #dcMode button[data-v="off"].on,
  #bankMode button[data-v="off"].on, #pensionMode button[data-v="off"].on, #shunyuMode button[data-v="off"].on,
  #shiboMode button[data-v="off"].on, #danMode button[data-v="off"].on, #gakushiMode button[data-v="off"].on{background:var(--warn);border-color:var(--warn);}
  .checkline{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink);margin-bottom:8px;}
  .checkline input{width:auto;}
  .collapse-h{background:none;border:none;color:var(--navy);font:inherit;font-size:12px;font-weight:700;
    cursor:pointer;padding:4px 0;}

  /* death year picker */
  .death-panel{background:linear-gradient(180deg,#1a3a5c,#16324f);color:#fff;border:none;}
  .death-panel > h3{color:#cfe0f0;}
  .death-panel .h3-desc{color:#9fb6cd;}
  .yr-btns{display:flex;flex-wrap:wrap;gap:6px;}
  .yr-btns button{font:inherit;font-size:12px;padding:6px 9px;border:1px solid #34557a;
    background:#1d3f61;border-radius:7px;cursor:pointer;color:#dbe6f2;font-variant-numeric:tabular-nums;line-height:1.15;}
  .yr-btns button small{display:block;font-size:9.5px;color:#93aac2;margin-top:1px;}
  .yr-btns button:hover{border-color:#6d93ba;}
  .yr-btns button.on{background:#fff;color:var(--navy);border-color:#fff;font-weight:700;}
  .yr-btns button.on small{color:#5a748f;}
  .yr-btns button.alive.on{background:#bfe6cf;color:#0f5a3a;border-color:#bfe6cf;}

  /* save bar */
  /* 保存について（チップス枠：水色背景＋青帯） */
  .save-box{background:#eef5fb;border:1px solid #cfe0f0;
    border-radius:10px;padding:14px 16px;margin:6px 0 20px;}
  .save-head{font-size:16px;color:var(--navy);font-weight:700;}
  .save-toggle{display:flex;align-items:center;gap:12px;width:100%;background:none;border:none;cursor:pointer;font:inherit;padding:0;margin:0 0 10px;text-align:left;}
  .save-caret{font-size:12px;font-weight:600;color:var(--ins);}
  .save-desc{font-size:12.5px;color:#41505f;line-height:1.85;margin:12px 0 0;}
  .save-desc[hidden]{display:none;}
  .hidden-file{display:none;}
  .savebar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:0;}
  .savebar button{display:inline-flex;align-items:center;}
  .btn-ic{width:15px;height:15px;margin-right:6px;flex:0 0 auto;}
  .savebar button{font:inherit;font-size:12.5px;padding:8px 13px;border-radius:7px;cursor:pointer;border:1px solid var(--line);background:#fff;}
  .savebar .primary{background:var(--navy);color:#fff;border-color:var(--navy);}
  .savebar .danger{color:var(--neg);border-color:#e6b8b3;}
  .savebar .status{font-size:11.5px;color:var(--muted);margin-left:auto;}

  /* cost + summary */
  .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:16px;}
  .card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;}
  .card .k{font-size:11px;letter-spacing:.06em;color:var(--muted);font-weight:700;}
  .card .v{font-size:23px;font-weight:800;margin-top:5px;font-variant-numeric:tabular-nums;line-height:1.15;color:var(--navy);}
  .card .v.sm{font-size:16px;}
  .card .v .unit{font-size:13px;font-weight:400;color:var(--muted);}
  .card .note{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.45;}
  /* 判定カードだけ塗って主役に（＝目線をここへ誘導）。他はプレーンな白カード */
  .card.ok{background:#eefaf3;border-color:var(--pos);border-width:1.5px;}
  .card.ok .v{color:var(--pos);font-size:26px;}
  .card.bad{background:#fdf2f1;border-color:var(--neg);border-width:1.5px;}
  .card.bad .v{color:var(--neg);font-size:26px;}

  /* モード切替（逆算／必要額） */
  .mode-switch{display:inline-flex;gap:0;border:1px solid var(--navy);border-radius:8px;overflow:hidden;margin:0 0 14px;}
  .mode-switch button{font:inherit;font-size:13px;font-weight:700;padding:8px 16px;border:none;background:#fff;color:var(--navy);cursor:pointer;}
  .mode-switch button.on{background:var(--navy);color:#fff;}
  .seikatsu-sub{margin-top:12px;}
  .seikatsu-sub .sub-note{margin:4px 0 8px;}
  .surplus-group{margin-top:12px;}
  .gakushi-group{margin-top:12px;}
  .gakushi-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px;max-width:420px;}
  .seikatsu-inputs{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:8px;}
  .seikatsu-inputs .field label{font-size:12px;font-weight:700;color:var(--navy);}
  /* 下端追従のミニ結果バー（入力中に答えの変化を見せる）*/
  .result-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;gap:12px;
    background:#fff;border-top:3px solid var(--navy);box-shadow:0 -4px 16px rgba(22,50,79,.12);
    padding:9px 16px;cursor:pointer;max-width:1200px;margin:0 auto;}
  .result-bar[hidden]{display:none;}
  .result-bar .rb-icon{font-size:20px;line-height:1;}
  .result-bar .rb-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0;}
  .result-bar .rb-main{font-weight:800;font-size:15px;}
  .result-bar .rb-sub{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .result-bar .rb-right{margin-left:auto;display:flex;align-items:center;gap:16px;}
  .result-bar .rb-fig{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;white-space:nowrap;
    padding-left:16px;border-left:1px solid var(--line);}
  .result-bar .rb-fig .rb-num{font-size:16px;font-weight:800;color:var(--navy);}
  .result-bar .rb-fig .rb-lab{font-size:10.5px;color:var(--muted);}
  .result-bar .rb-go{font-size:12px;font-weight:700;color:var(--ins);white-space:nowrap;}
  .result-bar.rb-ok{border-top-color:var(--pos);}   .result-bar.rb-ok .rb-main{color:var(--pos);}
  .result-bar.rb-bad{border-top-color:var(--neg);}  .result-bar.rb-bad .rb-main{color:var(--neg);}
  .result-bar.rb-bad .rb-fig .rb-num{color:var(--neg);}
  /* SP：数値チップは省スペースのため隠し、判定＋シナリオを優先 */
  @media (max-width:600px){ .result-bar .rb-fig{display:none;} }
  /* 変化フラッシュ：値が変わった瞬間、バーを一瞬ハイライト＋数字をポップさせ「今のは自分の操作の反応」と気づかせる */
  .result-bar.rb-flash{animation:rb-flash-tint .5s ease-out;}
  .result-bar.rb-flash .rb-num,.result-bar.rb-flash .rb-main{animation:rb-flash-pop .45s ease-out;}
  @keyframes rb-flash-tint{0%{background:#fff3df;}100%{background:#fff;}}
  @keyframes rb-flash-pop{0%{transform:scale(1);}30%{transform:scale(1.16);}100%{transform:scale(1);}}
  /* 初回コーチマーク：入力が結果に効くことを一度だけ言葉で教える吹き出し（バー上に追従） */
  .rb-hint{position:fixed;left:0;right:0;bottom:62px;z-index:61;max-width:1200px;margin:0 auto;
    padding:0 16px;display:flex;justify-content:flex-end;pointer-events:none;}
  .rb-hint[hidden]{display:none;}
  .rb-hint .rb-hint-inner{pointer-events:auto;position:relative;background:var(--navy);color:#fff;
    font-size:12.5px;font-weight:700;padding:8px 10px 8px 13px;border-radius:9px;
    box-shadow:0 6px 18px rgba(22,50,79,.28);display:flex;align-items:center;gap:6px;animation:rb-hint-in .3s ease-out;}
  .rb-hint .rb-hint-inner::after{content:"";position:absolute;bottom:-6px;right:44px;
    border:6px solid transparent;border-bottom:0;border-top-color:var(--navy);}
  .rb-hint .rb-hint-x{border:0;background:transparent;color:#fff;font-size:15px;line-height:1;cursor:pointer;opacity:.85;padding:0 2px;}
  @keyframes rb-hint-in{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
  /* アニメを控える設定のOSでは動きを止める（アクセシビリティ配慮） */
  @media (prefers-reduced-motion:reduce){
    .result-bar.rb-flash,.result-bar.rb-flash .rb-num,.result-bar.rb-flash .rb-main,.rb-hint .rb-hint-inner{animation:none;}
  }
  /* 答えブロック（結論ヒーロー）：試算結果の主役 */
  .verdict{border:1.5px solid var(--line);border-radius:14px;padding:18px 20px;margin:4px 0 18px;}
  .verdict-scenario{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--muted);margin-bottom:4px;}
  .verdict-main{display:flex;align-items:center;gap:10px;font-size:26px;font-weight:800;line-height:1.25;}
  .verdict-icon{font-size:24px;line-height:1;}
  .verdict-lead{font-size:14px;font-weight:700;color:var(--ink);line-height:1.7;margin-top:10px;}
  .verdict-lead b,.verdict-lead strong{font-weight:700;} /* 既定のbolderで900相当に太くなるのを防ぎ、地の文と同じ太字に */
  .verdict-body{font-size:12.5px;color:#41505f;line-height:1.8;margin-top:6px;}
  .verdict--ok{background:#eefaf3;border-color:var(--pos);}   .verdict--ok .verdict-main{color:var(--pos);}
  .verdict--warn{background:#fff7e8;border-color:#e3ad45;}    .verdict--warn .verdict-main{color:#b3801e;}
  .verdict--bad{background:#fdf2f1;border-color:var(--neg);}  .verdict--bad .verdict-main{color:var(--neg);}
  @media(max-width:680px){ .verdict-main{font-size:22px;} .verdict-icon{font-size:20px;} }
  /* 資産推移グラフ */
  #chartBox{margin:4px 0 8px;}
  #chartBox svg{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:10px;background:#fff;}
  .chart-cap{font-size:11.5px;color:var(--muted);margin:6px 0 0;display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
  .ch-key{display:inline-block;width:14px;height:10px;border-radius:2px;margin-right:4px;vertical-align:middle;}
  .ch-asset{background:rgba(22,50,79,.35);border:1px solid #16324f;}
  .ch-death{width:0;height:12px;border-left:2px dashed #9aa4ad;border-radius:0;}
  .ch-short{background:rgba(192,57,43,.18);border:1px solid #c0392b;}
  /* 必要保障の目安・アドバイス／逆算の誘導（旧・現在は未使用）*/
  .advice{background:#eef5fb;border:1px solid #cfe0f0;border-radius:10px;padding:14px 16px;margin:0 0 16px;}
  .advice-lead{font-weight:800;color:var(--navy);font-size:14px;margin-bottom:6px;}
  .advice-body{font-size:12.5px;color:#41505f;line-height:1.8;}
  .cta{display:inline-block;margin-top:10px;background:var(--accent);color:#fff;font-weight:700;font-size:13px;
    text-decoration:none;padding:9px 16px;border-radius:8px;}
  .cta:hover{filter:brightness(1.05);}
  .result-head{font-size:16px;font-weight:800;color:var(--navy);margin:24px 0 10px;}

  /* 使い方 */
  .howto{position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;
    padding:20px 22px 22px;margin:80px 0 24px;}
  .howto .nml-h2{margin:0 0 14px;}
  .howto-bubble{position:absolute;top:-16px;left:78px;z-index:2;background:var(--accent);color:#fff;
    font-size:14px;font-weight:800;letter-spacing:.02em;padding:6px 14px;border-radius:999px;
    transform:rotate(-3deg);box-shadow:0 3px 7px rgba(0,0,0,.18);white-space:nowrap;}
  .howto-bubble::after{content:"";position:absolute;left:26px;bottom:-5px;width:12px;height:12px;
    background:var(--accent);transform:rotate(45deg);}
  /* ステップ(左・常に縦組み)と結果(右)を左右に。SPでは上下に積む */
  .howto-cols{display:flex;align-items:flex-start;gap:20px;margin:4px 0 0;}
  .howto-steps{flex:5 1 0;min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:6px;margin:0;}
  .howto-step{display:flex;flex-direction:row;align-items:center;text-align:left;gap:12px;
    padding:14px 12px;background:var(--paper);border:1px solid var(--line);border-radius:8px;
    font-size:13.5px;line-height:1.55;color:var(--ink);}
  .howto-num{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;
    font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;}
  .howto-arrow{flex:0 0 auto;width:26px;height:26px;color:var(--accent);align-self:center;transform:rotate(90deg);}
  .howto-result{flex:6 1 0;min-width:0;margin:0;border:2px solid var(--accent);border-radius:10px;
    background:#fff8ec;padding:14px 16px 6px;}
  .howto-result h3{margin:0 0 8px;font-size:16px;font-weight:800;color:var(--accent-dark,#a9782b);}
  .howto-result ul{margin:0 0 8px;padding-left:20px;font-size:14px;color:var(--ink);line-height:1.7;}
  .howto-result ul ul{margin:4px 0;font-size:13px;color:var(--muted);}
  .howto-result strong{color:var(--navy);}
  @media(max-width:600px){
    .howto-cols{flex-direction:column;gap:0;}
    .howto-result{margin-top:16px;}
  }
  .tbl-cap{font-size:11.5px;color:var(--muted);margin:0 0 6px;}
  .tablewrap{overflow:auto;max-height:62vh;border:1px solid var(--line);border-radius:10px;background:#fff;-webkit-overflow-scrolling:touch;}
  /* border-collapseだと固定列(sticky)で罫線が消える/出るため separate にして各セルに罫線を持たせる */
  table{border-collapse:separate;border-spacing:0;width:100%;font-size:12px;white-space:nowrap;}
  thead th{background:var(--navy);color:#fff;font-weight:600;padding:8px 9px;text-align:center;white-space:nowrap;line-height:1.3;
    position:sticky;top:0;font-size:11px;z-index:5;border-bottom:1px solid var(--line);}
  td.freeze{background:#fff;}   /* 横スクロール時に固定する左側列（通常行は白／死亡・つなぎ行は既存ルールが優先）*/
  th.freeze-edge, td.freeze-edge{box-shadow:2px 0 4px rgba(22,50,79,.10);}  /* 固定列と横スクロール域の境界 */
  thead th.lft{text-align:center;}
  thead th.asset{background:var(--navy-2);}
  /* 年次表：資産/収入/支出のグループ見出し（クリックで開閉）＋合計。ヘッダーで色分け、本文は淡く */
  th.grp-btn{cursor:pointer;user-select:none;}
  th.grp-open{border-bottom:0;}   /* 開いた群のみ：合計/内訳行との間に線を入れず高さをそろえる（畳んだ群はrowspan列と同じく下線あり） */
  thead th.g-stk{background:#8f6f2e;}   /* 資産＝アンバー */
  thead th.g-liab{background:#5c4b4c;}  /* ローン残高＝負債（くすんだ小豆） */
  thead th.g-inc{background:#2f6f4d;}   /* 収入＝グリーン */
  thead th.g-exp{background:#8f474a;}   /* 支出＝レッド系 */
  thead th.sum{font-weight:800;}
  .grp-btn .ind{display:inline-block;min-width:14px;height:14px;line-height:13px;text-align:center;border:1px solid rgba(255,255,255,.6);border-radius:3px;font-weight:800;margin-right:5px;font-size:11px;}
  tbody td.stk{background:#fdf8f0;} tbody td.inc{background:#f3f9f5;} tbody td.exp{background:#fdf4f4;} tbody td.liab{background:#f7f2f2;}
  tbody td.sum{font-weight:700;}
  thead th.g-fam{background:var(--navy-2);}   /* 家族グループ見出し（資産などと同じ色付き見出し）*/
  tbody td{padding:6px 7px;text-align:right;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;}
  tbody td.lft{text-align:left;white-space:normal;}
  tbody td.evt{text-align:left;white-space:normal;min-width:135px;font-size:11px;color:#3a4658;}
  tbody td.memo{text-align:left;white-space:normal;min-width:150px;font-size:11px;color:#5a5330;}
  .yrcol{font-weight:700;color:var(--navy);}
  tbody tr.alive td{color:#5f6b7a;}
  tbody tr.alive td.yrcol{color:#33506e;}
  tbody tr.deathyr td{background:var(--death);}
  tbody tr.deathyr td.lft:first-child{box-shadow:inset 3px 0 0 var(--death-edge);}
  tbody tr.bridge td{background:var(--bridge);}
  tbody tr.bridge.deathyr td{background:#e7ebf1;}
  /* 生活費不足中（収入＋備えで賄えない）＝赤の警告。死亡年・つなぎ期より優先 */
  tbody tr.short td{background:var(--short);}
  tbody tr.short td.lft:first-child{box-shadow:inset 3px 0 0 var(--short-line);}
  .pos{color:var(--pos);font-weight:600;} .neg{color:var(--neg);font-weight:600;}
  .dash{color:#c4ccd6;} .lump{color:var(--ins);font-weight:700;}
  .insbal{color:var(--ins);font-weight:600;} .depleted{color:var(--neg);font-weight:700;}
  .cleared{color:var(--pos);font-size:10.5px;}
  .tag{display:inline-block;font-size:9.5px;padding:1px 6px;border-radius:20px;color:#fff;font-weight:700;margin:1px 0 0;}
  .tag.death{background:var(--death-line);} .tag.bridge{background:var(--bridge-line);color:#5a4510;}
  .todo{color:#7a2e2e;font-size:10.5px;line-height:1.5;}

  .legend{display:flex;flex-wrap:wrap;gap:12px 18px;margin:14px 0 0;font-size:12px;color:#41505f;
    background:#fff;border:1px solid var(--line);border-radius:8px;padding:11px 14px;}
  .legend span{display:inline-flex;align-items:center;gap:6px;}
  .sw{width:15px;height:15px;border-radius:3px;border:1px solid #b9c2cd;display:inline-block;flex:0 0 auto;}
  .sw-death{background:var(--death);} .sw-short{background:var(--short);}
  .sw-bridge{background:var(--bridge);} .sw-alive{background:#dbe0e7;}
  /* アフィリ出し分け（現在はダミー表示） */
  .aff-head{font-size:12.5px;font-weight:700;color:var(--navy);margin:18px 0 8px;display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;}
  .aff-state{font-size:10.5px;font-weight:600;color:var(--muted);}
  .aff-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;}
  .aff-card{display:flex;flex-direction:column;gap:4px;padding:13px 14px;border:1px solid var(--line);border-radius:10px;
    background:#fff;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s,transform .15s;}
  .aff-card:hover{border-color:var(--accent);box-shadow:0 5px 16px rgba(201,150,63,.16);transform:translateY(-2px);}
  .aff-primary{border-color:var(--accent);border-width:2px;background:#fff8ec;}
  .aff-tag{font-size:10px;font-weight:800;letter-spacing:.04em;color:#fff;background:var(--accent);align-self:flex-start;border-radius:20px;padding:2px 9px;}
  .aff-title{font-size:14px;font-weight:800;color:var(--navy);line-height:1.4;}
  .aff-desc{font-size:11.5px;color:#4a5766;line-height:1.6;}
  .aff-cta{font-size:12.5px;font-weight:700;color:var(--ins);margin-top:2px;}
  .aff-dummy{font-size:10px;color:var(--muted);}
  /* 実アフィリ枠（A8等・単一カード。リンク文言は原文のまま／周りは自前コピー） */
  .aff-card2{margin:18px 0 0;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:#fbfcfd;}
  .aff-card2 .aff-tag{background:var(--muted);}
  .aff-card2 .aff-title{display:block;margin:8px 0 4px;font-size:16px;}
  .aff-card2 .aff-desc{display:block;margin:0 0 12px;font-size:12.5px;}
  /* テキスト素材：塗りつぶしのCTAボタン体裁＝押せると一目で分かる（矢印はCSS装飾でA8文言は不変）。
     全幅だとバーに見えるので最大幅を約半分に絞り中央寄せ。モバイルは自動で100% */
  .aff-link{text-align:center;}
  .aff-link a{display:inline-block;width:fit-content;max-width:100%;text-align:center;background:var(--cta);border:0;color:#fff;text-decoration:none;border-radius:10px;padding:13px 24px;font-weight:800;font-size:13.5px;line-height:1.5;box-shadow:0 4px 14px rgba(238,111,30,.28);transition:background .15s,transform .15s,box-shadow .15s;}
  .aff-link a::after{content:" →";font-weight:800;}
  .aff-link a:hover{background:var(--cta-dark);transform:translateY(-2px);box-shadow:0 7px 20px rgba(238,111,30,.36);}
  .aff-link a:active{transform:translateY(0);box-shadow:0 3px 10px rgba(238,111,30,.3);}
  /* バナー素材のとき：ボタン体裁を外して画像を中央寄せ表示 */
  .aff-link.is-banner{text-align:center;}
  .aff-link.is-banner a{display:inline-block;background:none;border:0;border-radius:0;padding:0;box-shadow:none;transition:transform .15s,box-shadow .15s;}
  .aff-link.is-banner a::after{content:none;}
  .aff-link.is-banner a:hover{background:none;transform:translateY(-2px);}
  .aff-link.is-banner img{max-width:100%;height:auto;border-radius:10px;box-shadow:0 5px 16px rgba(22,50,79,.14);}
  .notes{font-size:12px;color:var(--muted);line-height:1.8;margin-top:14px;}   /* やることboxとの間の区切り線は不要(box同士)なので削除 */
  .notes-head{font-size:12.5px;font-weight:700;color:var(--navy);margin:0 0 8px;}
  /* 計算の前提・用語：全体を1つのアコーディオンで初期は畳む（やること todo-box と同じ体裁）*/
  .notes-box{border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden;}
  .notes-box > summary{cursor:pointer;list-style:none;padding:12px 16px;font-size:13px;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:8px;}
  .notes-box > summary::-webkit-details-marker{display:none;}
  .notes-box > summary::before{content:"＋";color:var(--ins);font-size:13px;font-weight:700;}
  .notes-box[open] > summary::before{content:"−";}
  .notes-box[open] > summary{border-bottom:1px solid var(--line);}
  .notes-inner{padding:12px 16px 14px;}
  /* 項目はアコーディオンをやめ、見出し＋本文のベタ表示（外側が1つのアコーディオン）*/
  .note-block{margin:0 0 14px;padding:0 0 14px;border-bottom:1px solid var(--line);}
  .note-block:last-of-type{margin-bottom:0;padding-bottom:0;border-bottom:0;}
  .note-block h4{font-size:12.5px;font-weight:700;color:var(--navy);margin:0 0 4px;}
  .note-body{font-size:12px;color:#41505f;line-height:1.9;}
  .note-body b{color:var(--navy);}
  .note-sub{display:block;margin-top:8px;font-size:11px;color:#7a8794;}
  .notes-more{margin:12px 0 0;font-size:12px;}
  .notes-more a{color:var(--ins);}
  .notes b{color:var(--ink);}
  /* 右→下 の出し分け（既定PC） */
  .sp-only{display:none;}
  /* 固定列の名前は3文字以上で折り返し、列幅を圧縮 */
  thead th.nm{white-space:normal;word-break:break-word;line-height:1.2;max-width:4.5em;}
  @media(max-width:640px){
    h1{font-size:22px;}
    h1 .subttl{font-size:12px;}
    .scrolled .page-head h1{font-size:18px;}   /* 追従時は基本より小さく（逆転防止） */
    .two-col{grid-template-columns:1fr;}
    .card .v{font-size:19px;}
    .member,.member.child{grid-template-columns:1fr 1fr;}
    /* 「右の」→「下の」 */
    .pc-only{display:none;} .sp-only{display:inline;}
    /* セクション間マージンを圧縮（PCの80pxはスマホでは過剰） */
    .nml-h2{margin-top:44px;}
    .howto{margin-top:44px;}
    .save-head{font-size:15px;}
    .howto-bubble{font-size:12px;left:56px;}
    /* 死亡年齢ボタン：スマホでは折り返さず横1列にして、座布団からはみ出す分は横スクロール */
    .yr-btns{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:5px;}
    .yr-btns button{flex:0 0 auto;}
    /* テーブル全体を小さく＋固定列を極力コンパクトに */
    table{font-size:11px;}
    thead th{padding:6px 5px;font-size:10px;}
    tbody td{padding:5px 5px;}
    td.freeze, th.freeze{padding-left:4px;padding-right:4px;}
    thead th.nm{max-width:3.2em;font-size:9.5px;}
    .result-head{font-size:15px;}
  }