:root{--ink:#14202b;--mut:#5b6b78;--line:#dde3e8;--bg:#f6f8fa;--acc:#1f5f5b;--acc2:#e6f2ef;--warn:#9a4a00;--warnbg:#fff4e5;--bad:#a8221a}
*{box-sizing:border-box}body{margin:0;font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP",sans-serif;color:var(--ink);background:#fff}
.wrap{max-width:980px;margin:0 auto;padding:0 16px}.top{border-bottom:1px solid var(--line);padding:10px 0}.top .wrap{display:flex;justify-content:space-between;align-items:center;gap:10px}
.brand{font-weight:800;color:var(--ink);text-decoration:none}select,input{font:inherit;padding:7px 9px;border:1px solid #c8d0d7;border-radius:6px;background:#fff;min-width:0}
.hero{background:linear-gradient(180deg,#eaf4f1,#fff);padding:22px 0 8px}h1{font-size:30px;line-height:1.2;margin:0 0 8px}.sub{color:var(--mut);margin:0 0 10px}
.fix{background:#fff;border-left:4px solid var(--acc);padding:8px 12px;margin:0 0 14px;font-weight:600}
.btn{display:inline-block;border:1px solid var(--acc);color:var(--acc);background:#fff;border-radius:8px;padding:9px 14px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
.btn.primary{background:var(--acc);color:#fff}.cta{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.calc{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;align-items:start}
.debt{display:grid;grid-template-columns:1.4fr 1fr .7fr 1fr;gap:6px;margin-bottom:6px}.debt input{width:100%}.hdr{font-size:12px;color:var(--mut)}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.opts label{display:flex;flex-direction:column;font-size:14px;gap:3px}
.big{background:var(--acc2);border:1px solid #b8d9d2;border-radius:12px;padding:14px 16px}.big .when{font-size:36px;font-weight:800;color:var(--acc);line-height:1.1}
.big p{margin:4px 0}.kv{display:grid;grid-template-columns:1fr auto;gap:2px 12px;margin-top:8px;font-size:15px}.kv b{text-align:right}
.order{margin:8px 0 0;padding-left:20px;font-size:14px}.note{color:var(--mut);font-size:13px}.warn{background:var(--warnbg);border:1px solid #f3c98b;color:var(--warn);border-radius:8px;padding:8px 10px;margin:8px 0;font-size:14px}
.ok{color:var(--acc);font-weight:600}.bad{color:var(--bad);font-weight:600}
section{padding:20px 0;border-top:1px solid var(--line)}h2{font-size:22px;margin:0 0 8px}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;padding:0;list-style:none}.tabs li b{display:block}
.shot{width:100%;height:auto;border:1px solid var(--line);border-radius:8px}figure{margin:0}figcaption{font-size:13px;color:var(--mut)}
.keybox{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}.foot{color:var(--mut);font-size:13px;padding:16px 0 40px}
canvas{width:100%;height:120px;display:block;margin-top:8px}
@media (max-width:760px){.calc,.tabs{grid-template-columns:1fr}h1{font-size:24px}.big .when{font-size:30px}.debt{grid-template-columns:1fr 1fr}.debt.hdr{display:none}}
.debt>*{min-width:0;width:100%}.calc>*{min-width:0}
[hidden]{display:none!important}
/* hub injects nav.yj-lang at top:8px right:12px on placed app pages — leave room so it does not cover our language select */
header.top{padding-top:40px}