:root{--paper:#f7f5ef;--ink:#23342e;--muted:#5e6a64;--line:#c8d0c7;--green:#225f50;--mint:#d9e9dd;--amber:#d79b46;--white:#fffefa;--danger:#9b3c32}*{box-sizing:border-box}html{font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;color:var(--ink);background:var(--paper)}body{margin:0}.page{max-width:1180px;margin:auto;padding:0 28px}.masthead{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px 0;border-bottom:1px solid var(--line)}.masthead p{margin:0;color:var(--muted);font-size:13px}.brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:.04em}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border:2px solid var(--green);border-radius:50%;color:var(--green);font-family:Georgia,serif;font-size:22px}.intro{padding:58px 0 46px;max-width:780px}.section-tag{color:var(--green);font-size:13px;font-weight:800;letter-spacing:.08em;margin:0 0 17px}.intro h1{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:clamp(38px,5vw,66px);line-height:1.25;letter-spacing:-.035em;margin:0 0 18px;font-weight:700}.lead{color:var(--muted);font-size:16px;line-height:1.8;margin:0;max-width:660px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(350px,.92fr);gap:28px;align-items:start}.input-panel,.result-panel{background:var(--white);border:1px solid var(--line);padding:30px;border-radius:5px}.result-panel{background:#e9eee8;border-color:#bccbbf;position:sticky;top:20px}h2{font-size:22px;line-height:1.4;margin:0 0 8px}.panel-help,.field-note{color:var(--muted);font-size:13px;line-height:1.7}.panel-help{margin:0 0 26px}.field-note{margin:20px 0 0}fieldset{margin:0;padding:0;border:0}fieldset+fieldset{margin-top:30px}legend{display:block;width:100%;font-weight:800;border-bottom:2px solid var(--ink);padding:0 0 8px;margin-bottom:17px}.fields{display:grid;gap:16px}.fields label{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px;font-weight:700}.input-wrap{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:160px}.input-wrap input{font:700 20px "Yu Gothic",Meiryo,sans-serif;text-align:right;width:125px;padding:9px 10px;border:1px solid #9daaa0;border-radius:3px;background:#fff;color:var(--ink)}.input-wrap span{width:20px;color:var(--muted);font-size:13px}.input-wrap input:focus-visible,summary:focus-visible{outline:3px solid var(--amber);outline-offset:2px}.hero-result{background:var(--green);color:#fff;padding:25px 25px 22px;margin:22px 0 30px;border-radius:3px}.hero-result>p:first-child{font-size:13px;font-weight:700;margin:0 0 9px}.hero-number{display:flex;align-items:baseline;gap:10px}.hero-number strong{font-family:Georgia,"Yu Mincho",serif;font-size:clamp(58px,7vw,90px);line-height:1.05;font-weight:500;letter-spacing:-.05em}.hero-number span{font-size:16px}.hero-detail{color:#deeee2;font-size:13px;line-height:1.6;margin:13px 0 0}.compare-head{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px;font-weight:800;border-bottom:1px solid #b6c4b9;padding-bottom:10px;margin-bottom:16px}.change-label{color:var(--green)}.change-label.negative{color:var(--danger)}.bar-row{display:grid;grid-template-columns:48px 1fr 88px;gap:10px;align-items:center;font-size:13px;margin:13px 0}.bar-row strong{text-align:right;font-size:15px}.bar-track{background:#cbd9ce;height:16px;border-radius:2px;overflow:hidden}.bar{height:100%;width:0;transition:width .2s ease}.old-bar{background:#839b88}.new-bar{background:var(--green)}.insight{border-top:1px solid #b6c4b9;margin-top:23px;padding-top:17px;line-height:1.7;font-weight:700;font-size:14px}.calculation-detail{border-top:1px solid #b6c4b9;margin-top:20px;padding-top:15px;font-size:13px;line-height:1.7;color:var(--muted)}summary{cursor:pointer;color:var(--green);font-weight:800}.calculation-detail p{margin:10px 0 0}.error{color:var(--danger);font-size:14px;line-height:1.6;font-weight:700;margin-top:20px}.explain{display:grid;grid-template-columns:220px 1fr;gap:22px;padding:45px 0;border-bottom:1px solid var(--line)}.explain h2{font-family:"Yu Mincho",serif;font-size:26px}.explain p{max-width:720px;font-size:14px;line-height:1.9;color:var(--muted);margin:0}footer{padding:24px 0 36px;color:var(--muted);font-size:12px}footer span{margin:0 5px}@media(max-width:800px){.workspace{grid-template-columns:1fr}.result-panel{position:static}.intro{padding:45px 0 35px}.explain{grid-template-columns:1fr;gap:4px}}@media(max-width:520px){.page{padding:0 16px}.masthead{padding:18px 0}.masthead p{display:none}.input-panel,.result-panel{padding:22px}.fields label{font-size:13px}.input-wrap{min-width:135px}.input-wrap input{width:102px;font-size:18px}.bar-row{grid-template-columns:42px 1fr 75px;gap:6px}.bar-row strong{font-size:13px}}@media(prefers-reduced-motion:reduce){.bar{transition:none}}