/* くらしの計算帳 共通スタイル（1a カード型＋1b 追従帯） */
:root{
  --bg:#f4f5f7;--card:#fff;--ink:#1a1d21;--sub:#5c6672;--mute:#79838f;
  --line:#e2e6ea;--line2:#eef1f4;--field:#c9d2db;
  --main:#2a5f8f;--main-dk:#1d456a;--main-bg:#eef4fa;
  --up:#b4553f;--down:#2f6b4f;--soft:#f4f6f8;
  --w-bg:#f6f5f2;--w-card:#f1efe9;--w-line:#ded9cd;--w-ink:#3c3a33;--w-sub:#6f6b5f;--w-inner:#faf8f4;
  --safe:#eef2ee;--safe-line:#d3ddd3;--safe-ink:#33463a;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#15181c;--card:#1e2227;--ink:#e8ebee;--sub:#a9b2bc;--mute:#8d97a2;
  --line:#2e343b;--line2:#272c32;--field:#48525c;
  --main:#6ea3d4;--main-dk:#9cc3e8;--main-bg:#1f2b37;
  --up:#e08a74;--down:#7cc39e;--soft:#252a30;
  --w-bg:#18181a;--w-card:#232220;--w-line:#3a3731;--w-ink:#e4e0d6;--w-sub:#b1ab9d;--w-inner:#2a2825;
  --safe:#1f2a22;--safe-line:#34463a;--safe-ink:#bcd6c3;
}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI",Meiryo,sans-serif;
  font-size:16px;line-height:1.7}
a{color:var(--main)}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--main);outline-offset:2px}
.wrap{max-width:720px;margin:0 auto;padding:16px 18px 40px}
.site-h{background:var(--main);color:#fff}
.site-h a{color:#fff;text-decoration:none}
.site-h .in{max-width:720px;margin:0 auto;padding:12px 18px}
.logo{font-size:18px;font-weight:700;letter-spacing:.02em}
.page-h{background:var(--card);border-bottom:1px solid var(--line)}
.page-h .in{max-width:720px;margin:0 auto;padding:14px 18px}
.crumb{font-size:13px;color:var(--mute)}
.crumb a{color:var(--mute)}
h1{font-size:21px;line-height:1.4;margin:0}
h2{font-size:17px;margin:0 0 8px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin-top:14px}
.note{font-size:13px;color:var(--mute);margin:0 0 12px}
.fields{display:flex;flex-direction:column;gap:14px}
.field label{display:block;font-size:15px;font-weight:700;margin-bottom:6px}
.field .row{display:flex;align-items:center;gap:10px}
.field input,.field select{flex:1;width:100%;min-width:0;height:56px;border:1.5px solid var(--field);border-radius:10px;background:var(--card);padding:0 14px;font-size:22px;font-weight:700}
.field input[type=text],.field input[type=date],.field select{font-size:18px;font-weight:500}
.field .unit{font-size:16px;color:var(--sub);min-width:44px}
.btns{display:flex;gap:10px;margin-top:16px}
.btn{height:52px;border-radius:10px;border:1.5px solid var(--field);background:var(--card);font-size:16px;padding:0 18px;cursor:pointer}
.btn.primary{flex:1;background:var(--main);border-color:var(--main);color:#fff;font-weight:700;font-size:17px}
.btn.danger{color:var(--up)}
.res-label{font-size:14px;color:var(--sub)}
.res-big{display:flex;align-items:baseline;gap:6px;margin-top:2px;color:var(--main-dk)}
.res-big b{font-size:46px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.res-big span{font-size:20px;font-weight:700}
.grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:14px}
.grid>div{background:var(--card);padding:12px 10px}
.grid .k{font-size:13px;color:var(--mute)}
.grid .v{font-size:19px;font-weight:700}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:1fr 1fr 1fr}
.stick{position:sticky;top:0;z-index:5;background:var(--main-dk);color:#fff;display:none;padding:10px 18px;font-size:15px}
.stick.on{display:block}
.stick .in{max-width:720px;margin:0 auto;display:flex;justify-content:space-between;align-items:baseline}
.stick b{font-size:20px}
.tbl-w{overflow-x:auto;border:1px solid var(--line);border-radius:8px}
table.cmp{border-collapse:collapse;width:100%;min-width:320px;font-size:15px}
.cmp th,.cmp td{padding:10px 8px;text-align:right;border-top:1px solid var(--line2);white-space:nowrap}
.cmp thead th{background:var(--soft);font-size:13px;color:var(--sub);border-top:0}
.cmp th:first-child,.cmp td:first-child{text-align:left;font-weight:700}
.cmp tr.cur{background:var(--main-bg)}
.cmp td.cur{font-weight:700}
.cmp small{display:block;font-size:12px;font-weight:400}
.up{color:var(--up)}.down{color:var(--down)}.mute{color:var(--mute)}
.formula{background:var(--soft);border-radius:8px;padding:12px;margin-top:12px;font-size:15px;line-height:1.9}
details.faq{border-top:1px solid var(--line2);padding:12px 0}
details.faq summary{font-size:15px;font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"＋";color:var(--mute)}
details.faq[open] summary::after{content:"－"}
details.faq p{margin:8px 0 0;font-size:15px;color:var(--sub)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips a{border:1px solid var(--line);border-radius:999px;padding:10px 14px;font-size:15px;color:var(--ink);text-decoration:none;background:var(--card)}
.ad{margin-top:14px}
.ad:empty{display:none}
.hero{background:var(--main);color:#fff;padding:0 0 22px}
.hero .in{max-width:720px;margin:0 auto;padding:0 18px}
.hero p{margin:0;font-size:14px;opacity:.92}
.search{margin-top:14px;display:flex;align-items:center;gap:10px;background:#fff;border-radius:10px;padding:0 14px;height:52px}
.search input{flex:1;border:0;outline:0;font-size:16px;background:transparent;color:#1a1d21;height:100%}
.search span{color:#7a8794;font-size:18px}
.sec-t{font-size:15px;font-weight:700;color:var(--sub);margin:22px 0 10px}
.cats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cats a{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 12px;min-height:64px;text-decoration:none;color:var(--ink)}
.cats b{display:block;font-size:16px}.cats span{font-size:13px;color:var(--mute)}
.list{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.list a,.list .soon{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px;min-height:52px;border-top:1px solid var(--line2);color:var(--ink);text-decoration:none}
.list>:first-child{border-top:0}
.list a::after{content:"›";color:var(--mute)}
.list .soon{color:var(--mute)}
.list small{color:var(--mute);font-size:13px}
.site-f{max-width:720px;margin:0 auto;padding:24px 18px 40px;font-size:13px;color:var(--mute)}
.site-f a{color:var(--mute)}
body.memorial{background:var(--w-bg)}
.safe{background:var(--safe);border:1px solid var(--safe-line);border-radius:10px;padding:14px;font-size:14px;color:var(--safe-ink)}
.fam-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:22px 0 10px}
.fam-h h2{font-size:15px;color:var(--sub);margin:0}
.fam-h .rule{flex:1;height:1px;background:var(--w-line)}
.linkbtn{background:none;border:0;color:var(--main);font-size:15px;cursor:pointer;padding:8px 0}
.person{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:12px}
.person.gone{background:var(--w-card);border-color:var(--w-line);color:var(--w-ink)}
.p-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.p-name{font-size:19px;font-weight:700}
.p-rel{font-size:12px;color:var(--w-sub);border:1px solid var(--w-line);border-radius:4px;padding:2px 8px}
.p-meta{font-size:14px;color:var(--mute);margin-top:2px}
.gone .p-meta{color:var(--w-sub)}
.p-next{margin-top:10px;font-size:14px}
.hoyo-next{background:var(--w-inner);border:1px solid var(--w-line);border-radius:8px;padding:12px;margin-top:12px}
.hoyo-next .k{font-size:13px;color:var(--w-sub)}
.hoyo-next .t{font-size:20px;font-weight:700}
.hoyo-next .s{font-size:14px;color:var(--w-sub)}
.hoyo{margin-top:12px;font-size:14px;line-height:2.1}
.hoyo div{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid var(--w-line)}
.hoyo .done{color:var(--w-sub)}
.hoyo .nx{font-weight:700}
details.more summary{font-size:14px;color:var(--w-sub);cursor:pointer;margin-top:8px}
.p-act{margin-top:8px;text-align:right}
.p-act button{background:none;border:0;color:var(--mute);font-size:14px;cursor:pointer;padding:6px 0 6px 14px;text-decoration:underline}
.empty{background:var(--card);border:1px dashed var(--field);border-radius:12px;padding:18px;color:var(--sub);font-size:15px}
dialog{border:0;border-radius:14px;padding:0;width:min(520px,94vw);background:var(--card);color:var(--ink)}
dialog::backdrop{background:rgba(0,0,0,.45)}
dialog form{padding:18px}
.seg{display:flex;border:1.5px solid var(--field);border-radius:10px;overflow:hidden}
.seg label{flex:1;margin:0;text-align:center;padding:12px 6px;font-weight:500;cursor:pointer;font-size:16px;position:relative}
.seg input{position:absolute;opacity:0}
.seg label:has(input:checked){background:var(--main-bg);color:var(--main);font-weight:700}
.hint{font-size:13px;color:var(--mute);margin-top:4px}
.tools-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.tools-row .btn{flex:1;font-size:15px}
[hidden]{display:none!important}
.field .seg label{margin:0;display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 6px;font-size:16px}