:root { --ink:#17212b; --muted:#5f6b74; --line:#d7dde0; --green:#0d5b32; --green-light:#e8f2eb; --paper:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; line-height:1.65; }
a { color:var(--green); }
.source-ref { margin-left:8px; font-size:.78rem; font-weight:700; white-space:nowrap; }
.site-header { min-height:70px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 4vw; }
.brand { color:var(--green); font-size:1.25rem; font-weight:800; letter-spacing:-.03em; text-decoration:none; }
nav { display:flex; gap:28px; font-size:.9rem; } nav a { color:var(--ink); text-decoration:none; } nav a:hover { color:var(--green); }
main { max-width:1440px; margin:auto; }
.hero { padding:72px 4vw 56px; display:grid; grid-template-columns:minmax(0, .93fr) minmax(450px, 1.07fr); gap:64px; align-items:center; }
h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:24px; font-size:clamp(2.55rem, 4.2vw, 4.5rem); letter-spacing:-.065em; line-height:1.14; } h2 { color:var(--green); margin-bottom:3px; font-size:1.35rem; letter-spacing:-.035em; } h3 { margin-bottom:8px; font-size:1.05rem; }
.hero-copy p { max-width:600px; color:#3e4a53; font-size:1.05rem; }
.calculator { border:1px solid #bac4c8; border-radius:12px; padding:32px; text-align:center; }
.calculator-controls { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:end; text-align:left; }
label, legend { display:block; margin-bottom:7px; font-size:.9rem; font-weight:700; } input[type="number"] { width:100%; border:1px solid #aeb9be; border-radius:8px; padding:12px 14px; color:var(--ink); font:inherit; font-size:1.25rem; }
.billing-note { min-height:53px; border:1px solid #aeb9be; border-radius:8px; padding:8px 12px; display:flex; flex-direction:column; justify-content:center; } .billing-note span { font-size:.82rem; font-weight:700; } .billing-note strong { color:var(--green); } .billing-note small { color:var(--muted); font-size:.7rem; }
.result-label { margin:40px 0 0; font-size:1rem; font-weight:700; } output { display:block; color:var(--green); font-size:clamp(4rem, 8vw, 6rem); font-weight:800; letter-spacing:-.075em; line-height:1.1; } .plan-summary { margin:8px 0 0; color:var(--muted); font-size:.93rem; }
.section { padding:36px 4vw 55px; } .section-heading { margin-bottom:16px; } .section-heading p { margin:0; color:#3e4a53; }
.plan-table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:10px; } table { width:100%; min-width:760px; border-collapse:collapse; text-align:left; } th,td { border-bottom:1px solid var(--line); padding:16px 18px; } th { background:#f7f9f8; color:var(--green); font-size:.84rem; } tbody tr:last-child td { border-bottom:0; } tbody tr[data-selected="true"] { background:var(--green-light); } td:first-child { font-weight:750; } .note { margin:10px 0 0; color:var(--muted); font-size:.8rem; }
.credits { border-top:1px solid var(--line); } .credit-examples { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .credit-examples article { min-height:160px; padding:24px; border:1px solid var(--line); border-radius:10px; } .credit-examples p { color:var(--muted); font-size:.9rem; } .credit-examples strong { color:var(--green); }
.sources { padding:40px 4vw; border-top:1px solid var(--line); background:#f7f9f8; } .sources > p { margin:0 0 16px; color:#3e4a53; } .source-table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:10px; background:#fff; } .source-table { min-width:900px; } .source-table td { vertical-align:top; font-size:.9rem; } .source-table td:first-child { color:var(--green); } footer { padding:20px 4vw; color:var(--muted); font-size:.8rem; text-align:center; }
@media (max-width:800px) { .site-header { padding:16px 5vw; align-items:flex-start; flex-direction:column; } nav { gap:16px; flex-wrap:wrap; } .hero { padding:48px 5vw 35px; grid-template-columns:1fr; gap:32px; } h1 { font-size:2.6rem; } .section,.sources { padding-left:5vw; padding-right:5vw; } .calculator-controls,.credit-examples { grid-template-columns:1fr; } .calculator { padding:22px; } .result-label { margin-top:28px; } }