:root{
  --bg:#f6f4ef; --card:#ffffff; --ink:#1f2a28; --sub:#5d6966; --line:#e3e0d8;
  --accent:#1d6b58; --on-accent:#ffffff; --accent-soft:#e3f0eb; --warn:#a2421f; --warn-soft:#fbece5;
  --c1:#1d6b58; --c2:#c07a17; --c3:#3f6fb0; --c4:#9aa3a1;
  --s1:#1d6b58; --s2:#c07a17; --s3:#3f6fb0; --s4:#a8467a; --s5:#6f8f2a; --s6:#7a6a58;
  --radius:14px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#141917; --card:#1d2422; --ink:#e9eeec; --sub:#9aa7a3; --line:#2e3835;
    --accent:#5fc3a5; --on-accent:#0e1f1a; --accent-soft:#1f3a33; --warn:#f0936c; --warn-soft:#3a251d;
    --c1:#5fc3a5; --c2:#e6a646; --c3:#7fa8e6; --c4:#6c7774;
    --s1:#5fc3a5; --s2:#e6a646; --s3:#7fa8e6; --s4:#e08ab8; --s5:#a9c96a; --s6:#b8a690;
  }
}
:root[data-theme="dark"]{
  --bg:#141917; --card:#1d2422; --ink:#e9eeec; --sub:#9aa7a3; --line:#2e3835;
  --accent:#5fc3a5; --on-accent:#0e1f1a; --accent-soft:#1f3a33; --warn:#f0936c; --warn-soft:#3a251d;
  --c1:#5fc3a5; --c2:#e6a646; --c3:#7fa8e6; --c4:#6c7774;
  --s1:#5fc3a5; --s2:#e6a646; --s3:#7fa8e6; --s4:#e08ab8; --s5:#a9c96a; --s6:#b8a690;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
  font-size:15px;line-height:1.6;-webkit-text-size-adjust:100%}
h1,h2,.big,.total{font-family:"Zen Maru Gothic",sans-serif}
.wrap{max-width:560px;margin:0 auto;padding:0 16px 48px}
header{padding:18px 0 6px}
header h1{margin:0;font-size:22px;letter-spacing:.02em}
header p{margin:2px 0 0;color:var(--sub);font-size:13px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-top:14px}
h2{font-size:17px;margin:0 0 10px;display:flex;align-items:baseline;gap:6px}
h2 .muted{font-weight:400}
.h2row{display:flex;justify-content:space-between;align-items:baseline}
.muted{color:var(--sub);font-size:13px}
.step{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:12px;font-family:inherit;flex:none;align-self:center}

/* パターンの切り替え */
.modes{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:4px;margin-top:10px}
.modes button{border:none;background:none;color:var(--sub);font:inherit;font-size:14px;font-weight:600;padding:9px 4px;border-radius:9px;cursor:pointer;line-height:1.3}
.modes button small{display:block;font-weight:400;font-size:11px}
.modes button.on{background:var(--accent);color:var(--on-accent)}

/* 入力の共通 */
label{display:block;font-size:12px;color:var(--sub)}
input,select{width:100%;font-size:16px;padding:9px 10px;border:1px solid var(--line);border-radius:9px;
  background:var(--bg);color:var(--ink);font-family:inherit}
input:focus,select:focus{outline:2px solid var(--accent);outline-offset:-1px}
.unit{position:relative}
.unit span{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--sub);font-size:13px;pointer-events:none}
.unit input{padding-right:34px}
.bigin input{font-size:24px;font-weight:700;padding:10px 40px 10px 12px;font-family:"Zen Maru Gothic",sans-serif}
.bigin span{font-size:15px}
.minwarn{color:var(--warn)}
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:4px}
.chips.m12{grid-template-columns:repeat(6,1fr)}
.chip{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;padding:6px 0;font-size:12px;cursor:pointer;font-family:inherit}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.goalrow{display:grid;grid-template-columns:1.2fr 1fr;gap:8px}

/* 今の借入残高 */
.total{font-size:30px;font-weight:700;line-height:1.2}
.bar{display:flex;height:12px;border-radius:6px;overflow:hidden;margin:12px 0 8px;gap:2px;background:var(--line)}
.srow{display:flex;gap:8px;align-items:center;padding:5px 0;font-size:13px;border-top:1px solid var(--line)}
.srow:first-of-type{border-top:none}
.srow .nm{flex:1;min-width:0}
.srow .v{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.srow .r{color:var(--sub);font-size:12px;width:44px;text-align:right}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none}
.stats{display:flex;gap:16px;flex-wrap:wrap;margin-top:6px;font-size:12px;color:var(--sub)}
.stats b{display:block;font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}

/* シミュレーション */
.hero{background:var(--accent);color:var(--on-accent);border-radius:12px;padding:14px}
.hero .label{font-size:13px;opacity:.85}
.hero .big{font-size:28px;font-weight:700;line-height:1.25;margin:2px 0}
.hero .row{display:flex;gap:16px;margin-top:8px;flex-wrap:wrap}
.hero .row div{font-size:13px}
.hero .row b{display:block;font-size:18px}
.save{margin-top:10px;background:rgba(255,255,255,.16);border-radius:10px;padding:8px 10px;font-size:13px}
.vs{display:flex;justify-content:space-between;gap:8px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.22);line-height:1.4}
.vs span:last-child{text-align:right;font-weight:700;white-space:nowrap}
.vs small{display:block;font-size:11px;font-weight:400;opacity:.85}
.gain{margin-top:6px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:3px;margin:12px 0 10px}
.seg button{border:none;background:none;color:var(--sub);font:inherit;font-size:14px;font-weight:600;padding:8px 4px;border-radius:8px;cursor:pointer}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.chart{width:100%;height:auto;display:block}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--sub);margin-top:6px}
.legend .dot{margin-right:5px;vertical-align:0}
.subh{font-size:14px;font-weight:700;margin:16px 0 4px}

/* 振り分け */
.phase{border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px}
.phase.first{border:2px solid var(--accent)}
.ph-h{font-size:13px;font-weight:700;margin-bottom:4px}
.ph-h span{font-weight:400;color:var(--sub)}
.arow{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px dashed var(--line);font-size:14px}
.arow:first-of-type{border-top:none}
.arow .name{flex:1;min-width:0}
.arow .amt{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.arow .sub{display:block;font-size:11px;color:var(--sub);font-weight:400}
.focus{font-size:10px;background:var(--accent);color:var(--on-accent);border-radius:4px;padding:1px 5px;margin-left:4px;white-space:nowrap}
.ph-done{margin-top:6px;font-size:12px;color:var(--accent);font-weight:700}
.ph-sum{display:flex;justify-content:space-between;font-size:12px;color:var(--sub);border-top:1px solid var(--line);margin-top:4px;padding-top:6px}
.more{display:block;width:100%;background:none;border:none;color:var(--accent);font:inherit;font-size:13px;font-weight:600;padding:8px;cursor:pointer}

/* 月ごとの残高 */
.mhead,.mrow summary{display:grid;grid-template-columns:1fr 1fr 1.15fr 14px;gap:6px;font-variant-numeric:tabular-nums;font-size:13px}
.mhead{color:var(--sub);font-size:11px;padding:4px 0}
.mhead span:not(:first-child),.mrow summary span:not(:first-child){text-align:right}
.mrow{border-top:1px solid var(--line)}
.mrow summary{padding:8px 0;cursor:pointer;list-style:none}
.mrow summary::-webkit-details-marker{display:none}
.mrow summary .c{color:var(--sub)}
.mrow[open] summary .c{transform:rotate(90deg)}
.mrow.bonus summary span:nth-child(2)::after{content:"★";color:var(--c2);font-size:10px;margin-left:2px}
.mrow.done summary span:first-child{color:var(--accent);font-weight:700}
.mdet{padding:0 0 8px 8px;font-size:12px;color:var(--sub)}
.mdet div{display:grid;grid-template-columns:1fr auto auto;gap:10px;padding:2px 0;font-variant-numeric:tabular-nums}

/* 借入の一覧 */
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:4px 0 12px}
.qchip{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:10px;padding:8px 4px;font:inherit;font-size:12px;cursor:pointer;line-height:1.3}
.qchip:active{background:var(--accent-soft)}
.qchip b{color:var(--accent);margin-right:2px}
details.howto{background:var(--accent-soft);border-radius:10px;padding:10px 12px;margin-bottom:12px;font-size:13px}
details.howto summary{font-weight:700;color:var(--accent);cursor:pointer}
details.howto p{margin:8px 0 4px}
details.howto ul{margin:4px 0;padding-left:18px}
details.howto dt{font-weight:700;margin-top:8px}
details.howto dd{margin:0}
.debt{border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:8px}
.debt.open{border-color:var(--accent)}
.mini-row{display:flex;width:100%;align-items:center;gap:10px;background:none;border:none;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.mini-row .nm{flex:1;min-width:0;font-weight:600}
.mini-row .v{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.mini-row small{display:block;font-weight:400;color:var(--sub);font-size:11px}
.mini-row .chev{color:var(--sub);font-size:18px}
.mini-row .need{color:var(--warn);font-size:12px;font-weight:600}
.debt .top{display:flex;gap:8px;align-items:center}
.debt .top select{flex:1;font-weight:600}
.del{border:none;background:none;color:var(--sub);font-size:20px;line-height:1;padding:4px 6px;cursor:pointer}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.full{grid-column:1 / -1}
.tag{font-size:10px;background:var(--accent-soft);color:var(--accent);border-radius:4px;padding:0 4px;margin-left:4px}
.hint{font-size:11px;color:var(--sub);margin-top:4px;line-height:1.5}
.warnline{margin-top:8px;font-size:12px;color:var(--warn);background:var(--warn-soft);border-radius:8px;padding:6px 8px}
.done-btn{margin-top:10px;width:100%;padding:9px;border-radius:9px;border:none;background:var(--accent);color:var(--on-accent);font:inherit;font-weight:600;cursor:pointer}
.btn{display:block;width:100%;padding:11px;border-radius:10px;border:1.5px dashed var(--line);background:none;
  color:var(--accent);font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
.linkbtn{background:none;border:none;color:var(--sub);text-decoration:underline;font-size:12px;cursor:pointer;padding:0;font-family:inherit}
.addlink{background:none;border:none;color:var(--accent);font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:0}

/* 提案 */
.tips{list-style:none;margin:0;padding:0}
.tips li{padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.tips li:first-child{border-top:none;padding-top:0}
.tips .t{font-size:12px;color:var(--accent);font-weight:700;display:block}
.tips b{font-variant-numeric:tabular-nums}

/* 比較 */
.cmp{width:100%;border-collapse:collapse;font-size:14px}
.cmp th{font-weight:500;color:var(--sub);font-size:12px;text-align:right;padding:4px 0}
.cmp th:first-child{text-align:left}
.cmp td{padding:9px 0 9px 8px;border-top:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;vertical-align:top}
.cmp td:first-child{text-align:left;white-space:normal;padding-left:0}
.cmp .dot{margin-right:6px;vertical-align:0}
.best{font-size:11px;background:var(--accent-soft);color:var(--accent);border-radius:6px;padding:1px 6px;margin-left:4px;white-space:nowrap}

/* 相談先 */
.help a{color:var(--accent)}
.help li{margin:4px 0}
.ad{margin-top:10px;border:1px dashed var(--line);border-radius:10px;padding:12px;font-size:13px;color:var(--sub);text-align:center}
.pr{font-size:11px;border:1px solid var(--line);border-radius:4px;padding:0 4px;margin-right:4px}
footer{margin-top:24px;font-size:12px;color:var(--sub)}

/* 共通の部品（ヘッダー・フッター・説明ページ） */
.site-header{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.site-header a{color:inherit;text-decoration:none}
.prose h1{font-size:22px;margin:0 0 12px}
.prose h2{font-size:17px;margin:20px 0 8px;display:block}
.prose p,.prose li{font-size:14px}
.prose a{color:var(--accent)}
.crumbs{font-size:12px;color:var(--sub);margin-top:12px}
.crumbs a{color:var(--sub)}
.site-footer{margin-top:28px;padding-top:16px;border-top:1px solid var(--line);font-size:12px;color:var(--sub)}
.site-footer nav{display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:8px}
.site-footer a{color:var(--sub)}
.btnlink{display:inline-block;margin-top:8px;padding:10px 16px;border-radius:10px;background:var(--accent);color:var(--on-accent);text-decoration:none;font-weight:600}

/* まとめて入力 */
details.bulk{border:1.5px solid var(--accent);border-radius:10px;padding:10px 12px;margin-bottom:12px;font-size:13px}
details.bulk summary{font-weight:700;color:var(--accent);cursor:pointer;font-size:14px}
textarea{width:100%;font-size:16px;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink);font-family:inherit;line-height:1.6;resize:vertical}
textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}
#bulkPreview{margin-top:8px}
.bp-row{display:flex;justify-content:space-between;gap:8px;padding:5px 0;border-top:1px dashed var(--line);font-size:13px}
.bp-row:first-child{border-top:none}
.bp-row b{font-variant-numeric:tabular-nums;white-space:nowrap}
.bp-head{font-weight:700;color:var(--accent);margin-bottom:2px}
.done-btn:disabled{opacity:.45;cursor:default}
.samplenote{background:var(--warn-soft);color:var(--warn);border-radius:8px;padding:8px 10px;font-size:13px;margin:0 0 12px}
.sampletag{font-size:10px;background:var(--warn-soft);color:var(--warn);border-radius:4px;padding:0 5px;margin-left:6px;font-weight:600;vertical-align:1px}

/* はじめての設定画面 */
.is-setup .main-only{display:none!important}
.is-setup #debtCard .step,.is-setup #sampleNote{display:none}
.steps{list-style:none;display:flex;gap:8px;margin:12px 0 0;padding:0;font-size:13px;color:var(--sub)}
.steps li{flex:1;display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:6px 10px}
.steps li b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--line);color:var(--sub);font-size:12px;flex:none}
.steps li.on{border-color:var(--accent);color:var(--accent);font-weight:700}
.steps li.on b{background:var(--accent);color:var(--on-accent)}
#setupBar{position:sticky;bottom:0;z-index:5;margin:14px -16px 0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line);text-align:center}
#setupBar .done-btn{margin-top:0;padding:13px;font-size:16px}
#setupBar .linkbtn{margin-top:8px;font-size:13px}
.editlink{display:block;width:100%;margin-top:10px;padding:9px;border-radius:9px;border:1px solid var(--line);background:none;color:var(--accent);font:inherit;font-size:14px;font-weight:600;cursor:pointer}

/* ① 今の借金：追加の道具は折りたたむ */
details.addtools{margin-top:4px}
details.addtools>summary{list-style:none;display:block;text-align:center;padding:11px;border-radius:10px;border:1.5px dashed var(--line);color:var(--accent);font-size:14px;font-weight:600;cursor:pointer}
details.addtools>summary::-webkit-details-marker{display:none}
details.addtools[open]>summary{margin-bottom:12px;border-style:solid}
#summary{margin-bottom:10px}
#summary:empty{display:none}
.is-setup #summary,.is-setup details.addtools>summary{display:none}
.is-setup #setupBar{margin-top:0}
/* 一覧の行は詰めて、結果までの距離を短くする */
.debt:not(.open){padding:8px 12px;margin-bottom:6px}
.debt:not(.open) .mini-row .nm{font-size:14px;line-height:1.35}
.debt:not(.open) .mini-row .v{font-size:14px}
#debtCard details.howto{margin:10px 0 0}
#debtCard .stats{margin-top:2px}

/* 払う額を変えたらどうなるか */
#scen{margin-top:10px;display:grid;gap:6px}
.scn{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;text-align:left;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);font:inherit;padding:10px 12px;cursor:pointer}
.scn.on{border:2px solid var(--accent);background:var(--accent-soft);padding:9px 11px}
.scn .l b{display:block;font-size:14px}
.scn .l small{font-size:12px;color:var(--sub)}
.scn .r{text-align:right;white-space:nowrap}
.scn .r b{display:block;font-size:16px;font-family:"Zen Maru Gothic",sans-serif;font-variant-numeric:tabular-nums}
.scn .r small{font-size:12px;color:var(--sub);font-variant-numeric:tabular-nums}
.scn .now{font-size:10px;background:var(--accent);color:var(--on-accent);border-radius:4px;padding:1px 5px;margin-left:6px;font-weight:600;vertical-align:1px}
details.fold{margin-top:4px;border-top:1px solid var(--line);padding-top:8px}
details.fold>summary{color:var(--accent);font-size:13px;font-weight:600;cursor:pointer}

/* 提案のカード */
.tipgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tip{display:block;text-align:left;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);font:inherit;padding:11px 12px;min-width:0}
button.tip{cursor:pointer}
.tip.wide{grid-column:1 / -1;background:var(--accent-soft);border-color:transparent}
.tip .t{display:block;font-size:12px;color:var(--sub);line-height:1.4}
.tip .big{display:block;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:19px;line-height:1.3;color:var(--accent);margin:2px 0;overflow-wrap:anywhere}
.tip.wide .big{font-size:21px}
.tip .sub{display:block;font-size:12px;color:var(--sub);line-height:1.45;font-variant-numeric:tabular-nums}
.tip .go{display:block;font-size:11px;color:var(--accent);font-weight:700;margin-top:5px}
.tip{display:flex;flex-direction:column;justify-content:flex-start}
.tip .big{font-size:20px}
.tip .go{margin-top:auto;padding-top:5px}

/* 返済の足しをためる */
.td-money{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}
.td-money .addbtn{padding:10px 14px;border-radius:9px;border:1px solid var(--accent);background:none;color:var(--accent);font:inherit;font-weight:600;cursor:pointer;white-space:nowrap}
.pot{margin-top:10px;background:var(--accent-soft);border-radius:10px;padding:10px 12px;font-size:13px}
.pot b{font-variant-numeric:tabular-nums}
.pot .big{display:block;font-family:"Zen Maru Gothic",sans-serif;font-size:20px;font-weight:700;color:var(--accent)}
.pot .done-btn{margin-top:8px}

/* 返済日 */
.rrow{display:grid;grid-template-columns:1fr 104px;gap:8px;align-items:center;padding:6px 0;border-top:1px solid var(--line);font-size:14px}
.rrow:first-child{border-top:none}
.rrow small{display:block;font-size:12px;color:var(--sub)}
.rrow select{padding:7px 8px;font-size:15px}

.gcal a{color:var(--accent)}

/* ヘッダーのリンク */
.topnav{margin-left:auto;display:flex;gap:12px;font-size:13px}
.topnav a{color:var(--accent);font-weight:600;text-decoration:none}

/* ご意見・要望のフォーム */
.contact-form label{margin-top:8px;font-size:12px}
.contact-form label:first-child{margin-top:0}
.contact-form select,.contact-form input,.contact-form textarea{margin-top:3px}
.contact-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-form a{color:var(--accent)}
.contact-msg{margin:8px 0 0;min-height:1em}

/* コラム */
.collist{display:grid;gap:8px}
.colcard{display:block;border:1px solid var(--line);border-radius:12px;padding:11px 12px;text-decoration:none;color:var(--ink);background:var(--bg)}
.colcard b{display:block;font-size:15px;line-height:1.45;margin:2px 0}
.colcard small{display:block;font-size:12px;color:var(--sub);line-height:1.5}
.cat{display:inline-block;font-size:11px;font-weight:700;color:var(--accent);background:var(--accent-soft);border-radius:4px;padding:1px 6px}
.btnlink.ghost{background:none;color:var(--accent);border:1px solid var(--line);display:block;text-align:center;margin-top:10px}
.article .meta{font-size:12px;color:var(--sub);margin:0 0 6px}
.article h1{font-size:23px;line-height:1.4}
.article h2{font-size:18px;margin:26px 0 8px;padding-top:14px;border-top:1px solid var(--line)}
.article h3{font-size:15px;margin:16px 0 6px}
.article p,.article li{font-size:15px;line-height:1.85}
.article ul,.article ol{padding-left:22px;margin:8px 0}
.article li{margin:3px 0}
.tablewrap{overflow-x:auto;margin:10px 0}
.article table{border-collapse:collapse;font-size:13px;min-width:100%}
.article th,.article td{border:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top;line-height:1.5}
.article th{background:var(--bg);white-space:nowrap}
.cta{margin-top:14px;background:var(--accent);color:var(--on-accent);border-radius:var(--radius);padding:16px}
.cta b{display:block;font-family:"Zen Maru Gothic",sans-serif;font-size:18px}
.cta span{display:block;font-size:13px;opacity:.9;margin:4px 0 8px}
.cta .btnlink{background:var(--card);color:var(--accent);margin-top:2px}

/* 足しを作る方法 */
details.earn{border-top:1px solid var(--line);padding:9px 0;font-size:14px}
details.earn summary{font-weight:600;cursor:pointer}
details.earn p{margin:6px 0 0;font-size:13px;color:var(--sub);line-height:1.6}
.prlinks{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.prlink{display:inline-flex;align-items:center;border:1px solid var(--accent);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:600;color:var(--accent);text-decoration:none}

/* ---- 記事：題の画像・わかること・目次・マーカー ---- */
:root{--mark:#ffe680;--figbg:#eef5f2}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--mark:#5c5210;--figbg:#1a2623}}
:root[data-theme="dark"]{--mark:#5c5210;--figbg:#1a2623}
.eyecatch{margin:12px 0 16px;border-radius:14px;background:var(--accent);padding:10px;position:relative}
.eyecatch::before{content:"";position:absolute;inset:10px;border-radius:9px;background:var(--card)}
.eyecatch>*{position:relative}
.eyecatch{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:170px;text-align:center}
.eyecatch .eyecat{font-size:12px;font-weight:700;color:var(--on-accent);background:var(--accent);border-radius:999px;padding:2px 12px;margin-bottom:8px}
.eyecatch b{font-family:"Zen Maru Gothic",sans-serif;font-size:30px;line-height:1.3;color:var(--accent);padding:0 18px}
.eyecatch em{font-style:normal;font-family:"Zen Maru Gothic",sans-serif;font-size:22px;font-weight:700;line-height:1.35;color:var(--ink);padding:0 18px}
.article strong{background:linear-gradient(transparent 58%,var(--mark) 58%);font-weight:700}
.pointbox{margin:16px 0;background:var(--figbg);border-radius:12px;padding:14px}
.pointbox>b{display:block;text-align:center;font-family:"Zen Maru Gothic",sans-serif;font-size:16px;margin-bottom:8px}
.pointbox ul{list-style:none;margin:0!important;padding:10px 12px!important;background:var(--card);border-radius:9px}
.pointbox li{position:relative;padding-left:20px;margin:6px 0!important;font-size:14px!important;line-height:1.6!important;font-weight:600}
.pointbox li::before{content:"";position:absolute;left:3px;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.toc{margin:16px 0;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.toc>b{display:block;font-size:14px;margin-bottom:4px}
.toc ol{margin:0!important;padding-left:20px!important}
.toc li{font-size:14px!important;line-height:1.6!important;margin:4px 0!important}
.toc a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.article h2{border-top:none;padding:8px 12px;border-left:5px solid var(--accent);background:var(--figbg);border-radius:0 8px 8px 0;margin-top:30px}

/* ---- 記事の中の図 ---- */
.fig{margin:18px 0;border-radius:14px;background:var(--figbg);overflow:hidden;border:1px solid var(--line)}
.fig figcaption{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:var(--on-accent);font-family:"Zen Maru Gothic",sans-serif;font-size:16px;font-weight:700;line-height:1.4;padding:10px 12px;text-align:center}
.fig figcaption svg{width:22px;height:22px;flex:none;fill:currentColor}
.figbody{padding:14px}
.fig i.warn{background:var(--warn)!important}
.fig i.p0{background:var(--accent)}.fig i.p1{background:var(--c3)}.fig i.p2{background:var(--c2)}
/* 横棒 */
.fb{background:var(--card);border-radius:10px;padding:10px 12px;margin-top:8px}
.fb:first-child{margin-top:0}
.fb .fl{display:block;font-size:13px;font-weight:600;line-height:1.4}
.fb .ft{display:block;height:18px;border-radius:9px;background:var(--line);overflow:hidden;margin:6px 0 4px}
.fb .ft i{display:block;height:100%;border-radius:9px;background:var(--accent)}
.fb .fv{display:block;font-family:"Zen Maru Gothic",sans-serif;font-size:18px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;line-height:1.3}
.fb .fv.warn{color:var(--warn)}
/* 内訳の帯 */
.fs{display:flex;height:44px;border-radius:10px;overflow:hidden;gap:3px}
.fs i{display:grid;place-items:center;height:100%;font-style:normal;min-width:36px}
.fs i b{color:#fff;font-size:15px;font-family:"Zen Maru Gothic",sans-serif}
.fk{display:grid;gap:6px;margin-top:10px}
.fk span{display:flex;align-items:center;gap:8px;background:var(--card);border-radius:9px;padding:8px 12px;font-size:14px;font-weight:600}
.fk i{width:12px;height:12px;border-radius:50%;flex:none}
.fk b{margin-left:auto;font-family:"Zen Maru Gothic",sans-serif;font-size:17px;font-variant-numeric:tabular-nums}
/* STEP の流れ */
.fsteps{list-style:none;margin:0!important;padding:0!important}
.fsteps li{position:relative;display:flex;align-items:center;gap:10px;background:var(--card);border-radius:10px;padding:10px 12px;margin:0 0 22px!important;line-height:1.45!important}
.fsteps li:last-child{margin-bottom:0!important}
.fsteps li:not(:last-child)::after{content:"";position:absolute;left:50%;bottom:-17px;margin-left:-11px;border:11px solid transparent;border-top:11px solid var(--accent);border-bottom:none}
.stepno{flex:none;width:46px;height:46px;border-radius:8px;background:var(--accent);color:var(--on-accent);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:9px;font-weight:700;line-height:1;letter-spacing:.04em}
.stepno b{font-size:20px;font-family:"Zen Maru Gothic",sans-serif;line-height:1.1}
.steptx b{display:block;font-size:15px}
.steptx small{display:block;font-size:12px;color:var(--sub);margin-top:2px}
/* 並べて比べる */
.fcmp{display:grid;gap:8px}
.fcmp.n2{grid-template-columns:1fr 1fr}
.fcmp.n3{grid-template-columns:1fr}
.fcard{background:var(--card);border-radius:10px;overflow:hidden;border:2px solid var(--accent)}
.fcard.c1{border-color:var(--c3)}.fcard.c2{border-color:var(--c2)}.fcard.warn{border-color:var(--warn)}
.fct{display:block;text-align:center;color:#fff;background:var(--accent);font-family:"Zen Maru Gothic",sans-serif;font-size:15px;padding:6px 8px;line-height:1.35}
.fcard.c1 .fct{background:var(--c3)}.fcard.c2 .fct{background:var(--c2)}.fcard.warn .fct{background:var(--warn)}
.fcr{display:block;padding:7px 10px;border-top:1px dashed var(--line);text-align:center;line-height:1.4}
.fct+.fcr{border-top:none}
.fcr small{display:block;font-size:11px;color:var(--sub)}
.fcr em{font-style:normal;font-weight:700;font-size:15px;font-variant-numeric:tabular-nums}
.fconcl{position:relative;margin-top:24px;background:var(--card);border:2px solid var(--accent);border-radius:10px;padding:10px 12px;text-align:center;font-weight:700;font-size:14px;line-height:1.5}
.fconcl::before{content:"";position:absolute;left:50%;top:-19px;margin-left:-11px;border:11px solid transparent;border-top:11px solid var(--accent);border-bottom:none}

/* ---- 残高を自動で進めたお知らせ ---- */
.rolled{background:var(--accent-soft);border:1.5px solid var(--accent);border-radius:12px;padding:12px;margin:0 0 12px}
.rolled>b{display:block;font-size:14px;color:var(--accent)}
.rolled .rollnum{font-size:15px;color:var(--sub);margin:4px 0}
.rolled .rollnum strong{font-size:22px;color:var(--ink)}
.rolled .rolldone{font-weight:700;color:var(--accent);margin-bottom:4px}
.rolled p{font-size:13px;line-height:1.6;color:var(--sub);margin:0 0 8px}
.rollbtn{display:flex;gap:8px}
.rollbtn button{flex:1;padding:10px;border-radius:10px;border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);font:inherit;font-weight:700;cursor:pointer}
.rollbtn #rollUndo{background:none;color:var(--accent)}
.autonote{font-size:12px;color:var(--sub);margin:8px 0 0}

/* ---- 記事の絵（lib/art.mjs） ---- */
.art{width:64px;height:64px;flex:none;display:block}
.art .bg{fill:var(--art-bg,var(--accent-soft))}
.art .k{fill:var(--accent)}.art .s{fill:var(--accent-soft)}.art .g{fill:var(--c2)}.art .i{fill:var(--ink)}.art .w{fill:var(--card)}
.art .r{fill:var(--warn)}.art .b{fill:var(--c3)}.art .m{fill:var(--line)}.art .skin{fill:#f3c9a5}
.art .ol{stroke:var(--art-bg,var(--accent-soft));stroke-width:2.5}.art .ol2{stroke:var(--sub);stroke-width:2}
.art .rj{stroke:var(--warn);stroke-width:7;stroke-linejoin:round}
.art .ln{fill:none;stroke-linecap:round;stroke-linejoin:round}
.art .si{stroke:var(--ink)}.art .sw{stroke:var(--card)}.art .sg{stroke:var(--c2)}
.fig{--art-bg:var(--card)}
.eyecatch .eyeart{display:flex;gap:14px;margin-top:12px}
.eyecatch .eyeart .art{width:76px;height:76px}
.eyecatch{padding:26px 10px 24px}
.pointbox>b{display:flex;align-items:center;justify-content:center;gap:8px}
.pointbox>b .art{width:40px;height:40px;--art-bg:var(--card)}
.fscene{display:flex;align-items:flex-start;justify-content:center;gap:4px}
.ftile{flex:1 1 0;min-width:0;max-width:120px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.ftile .art{width:100%;max-width:72px;height:auto;aspect-ratio:1}
.ftile b{font-size:13px;line-height:1.4}
.ftile small{font-size:11px;line-height:1.4;color:var(--sub)}
.fop{flex:none;font-size:18px;font-weight:700;color:var(--accent);padding-top:22px}
.colcard{display:flex;align-items:center;gap:10px}
.colcard .art{width:52px;height:52px;--art-bg:var(--card)}
.colcardtx{min-width:0;flex:1}
.cta{position:relative}
.cta .art{width:56px;height:56px;--art-bg:var(--card);margin:0 auto 6px}