:root { --ink:#17201d; --cream:#f5f2e9; --paper:#fffdf7; --green:#155f4b; --lime:#c9ec64; --orange:#f39a54; --muted:#68736e; --line:#d9ddd4; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif; }
a { color:inherit; }
.hero { position:relative; overflow:hidden; color:#f9f7ef; background:var(--green); padding:30px max(5vw,24px) 0; }
.hero::before { content:""; position:absolute; width:560px; height:560px; right:-150px; top:-270px; border:1px solid rgba(255,255,255,.18); border-radius:50%; box-shadow:0 0 0 90px rgba(255,255,255,.035),0 0 0 180px rgba(255,255,255,.025); }
nav { position:relative; z-index:1; max-width:1320px; margin:auto; display:flex; align-items:center; justify-content:space-between; }
.nav-links { display:flex; align-items:center; gap:24px; }
.brand { text-decoration:none; font-size:12px; font-weight:800; letter-spacing:.13em; }
.brand span { display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; margin-right:12px; color:var(--green); background:var(--lime); border-radius:50%; font-size:13px; letter-spacing:.05em; }
.source-link { text-decoration:none; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.55); font-size:13px; }
.source-link span { margin-left:8px; }
.hero-copy { position:relative; z-index:1; max-width:1320px; margin:86px auto 56px; }
.eyebrow { margin:0 0 18px; color:var(--lime); font:700 11px/1.3 ui-monospace,SFMono-Regular,monospace; letter-spacing:.2em; }
h1 { margin:0; max-width:900px; font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:clamp(48px,7.8vw,104px); font-weight:500; line-height:1.08; letter-spacing:-.05em; }
h1 em { color:var(--lime); font-style:normal; }
.lead { max-width:540px; margin:32px 0 0; color:#d6e1dc; font-size:15px; line-height:1.9; }
.summary-grid { position:relative; z-index:1; max-width:1320px; margin:auto; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(255,255,255,.25); }
.summary-grid>div { padding:26px 28px 30px; border-right:1px solid rgba(255,255,255,.2); }
.summary-grid>div:first-child { padding-left:0; }
.summary-grid>div:last-child { border:0; }
.summary-grid span { display:block; margin-bottom:10px; color:#b9cbc4; font-size:11px; font-weight:700; letter-spacing:.08em; }
.summary-grid strong { font:600 38px/1 ui-monospace,SFMono-Regular,monospace; }
.summary-grid small { margin-left:8px; color:#d6e1dc; font-size:11px; }
.summary-note strong { font-size:19px; }
.summary-note small { display:block; margin:8px 0 0; }
.dashboard { max-width:1440px; margin:auto; padding:86px max(5vw,24px) 100px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:28px; }
.eyebrow.dark { color:var(--green); margin-bottom:10px; }
h2 { margin:0; font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:42px; font-weight:600; }
.section-heading>p { margin:0 0 5px; color:var(--muted); font:12px ui-monospace,SFMono-Regular,monospace; }
.sort-panel { margin:0 0 22px; padding:22px; border:1px solid var(--line); background:rgba(255,253,247,.55); }
.sort-panel>p { margin:0 0 12px; color:var(--green); font-size:11px; font-weight:800; letter-spacing:.12em; }
.sort-buttons { display:flex; flex-wrap:wrap; gap:9px; }
.sort-buttons button { min-height:52px; padding:0 20px; border:1px solid #bcc8c2; border-radius:3px; color:var(--ink); background:var(--paper); font-family:inherit; font-size:13px; font-weight:700; line-height:1.2; cursor:pointer; transition:background .18s,color .18s,border-color .18s,transform .18s; }
.sort-buttons button:nth-child(2),.sort-buttons button:nth-child(3) { min-width:180px; font-size:15px; }
.sort-buttons button small { display:block; margin-top:4px; color:var(--muted); font-size:9px; font-weight:600; }
.sort-buttons button:hover { border-color:var(--green); transform:translateY(-1px); }
.sort-buttons button:focus-visible { outline:3px solid rgba(21,95,75,.22); outline-offset:2px; }
.sort-buttons button.active { border-color:var(--green); color:#fff; background:var(--green); }
.sort-buttons button.active small { color:var(--lime); }
.controls { display:grid; grid-template-columns:minmax(240px,1fr) 220px; gap:12px; }
.controls label { position:relative; }
.controls input,.controls select { width:100%; height:52px; border:1px solid var(--line); border-radius:3px; background:var(--paper); color:var(--ink); font:inherit; font-size:13px; outline:none; }
.controls input:focus,.controls select:focus { border-color:var(--green); box-shadow:0 0 0 2px rgba(21,95,75,.12); }
.controls input { padding:0 18px 0 45px; }
.controls select { padding:0 38px 0 16px; }
.search>span { position:absolute; left:17px; top:12px; z-index:1; color:var(--green); font-size:24px; transform:rotate(-15deg); }
.legend { display:flex; flex-wrap:wrap; gap:20px; margin:20px 0 30px; color:var(--muted); font-size:11px; }
.legend span { display:flex; align-items:center; gap:7px; }
.dot { width:8px; height:8px; border-radius:50%; background:#adb5b1; }
.dot.achieved,.progress i.achieved { background:var(--green); }.dot.steady,.progress i.steady { background:#77a93f; }.dot.attention,.progress i.attention { background:var(--orange); }
.kpi-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.kpi-card { min-width:0; display:flex; flex-direction:column; min-height:420px; padding:23px; border:1px solid var(--line); border-radius:4px; background:var(--paper); transition:transform .2s,box-shadow .2s; }
.kpi-card:hover { transform:translateY(-3px); box-shadow:0 14px 34px rgba(26,45,37,.08); }
.card-top { display:flex; align-items:center; gap:10px; min-width:0; }
.status { flex:none; padding:5px 8px; border-radius:2px; color:white; background:#9aa29e; font-size:10px; font-weight:700; }.status.achieved{background:var(--green)}.status.steady{background:#77a93f}.status.attention{background:var(--orange)}
.policy { overflow:hidden; color:var(--muted); font-size:10px; white-space:nowrap; text-overflow:ellipsis; }
.kpi-card h3 { min-height:52px; margin:18px 0 20px; font-size:16px; line-height:1.65; }
.measure-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.measure-row>div { min-width:0; }
.measure-label { display:block; margin-bottom:6px; color:var(--muted); font-size:10px; }
.measure-label b { margin-left:4px; color:var(--green); font-weight:600; }
.measure-row strong { display:block; overflow:hidden; font:700 20px/1.2 ui-monospace,SFMono-Regular,monospace; white-space:nowrap; text-overflow:ellipsis; }
.target-value { padding-left:16px; border-left:1px solid var(--line); }
.progress-head { display:flex; justify-content:space-between; margin-top:25px; font-size:10px; color:var(--muted); }.progress-head b{color:var(--ink);font:700 13px ui-monospace,SFMono-Regular,monospace}
.progress { height:7px; margin-top:8px; overflow:hidden; background:#e3e6df; border-radius:20px; }.progress i{display:block;height:100%;background:#aab1ad;border-radius:20px;}
.trend-row { height:132px; margin-top:auto; padding-top:14px; border-top:1px solid #e9ebe5; color:var(--muted); font-size:9px; }
.chart-legend { display:flex; gap:15px; margin-bottom:2px; }
.chart-legend span { display:flex; align-items:center; gap:5px; }
.chart-legend i { display:inline-block; width:16px; height:0; border-top:2px solid var(--green); }
.chart-legend .target-line { border-color:var(--orange); border-top-style:dashed; }
.line-chart { display:block; width:100%; height:96px; }
.message { padding:60px 24px; text-align:center; border:1px solid var(--line); background:var(--paper); color:var(--muted); }.message.error{color:#a04d32}
footer { display:flex; justify-content:space-between; gap:30px; padding:48px max(5vw,24px); color:#d4ded9; background:#102e26; font-size:11px; line-height:1.8; } footer b{color:var(--lime);font-size:13px;letter-spacing:.1em} footer p{margin:8px 0 0} footer a{text-decoration-color:rgba(212,222,217,.45);text-underline-offset:3px} footer a:hover{color:var(--lime)}
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
[hidden] { display:none!important; }
@media(max-width:1000px){.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.summary-grid{grid-template-columns:repeat(2,1fr)}.summary-grid>div:nth-child(2){border-right:0}.summary-grid>div:first-child{padding-left:20px}.controls{grid-template-columns:1fr 180px}}
@media(max-width:680px){.hero{padding-left:20px;padding-right:20px}.nav-links{gap:12px}.source-link{font-size:10px}.source-link span{display:none}.hero-copy{margin:64px auto 46px}.lead{font-size:13px}.summary-grid{margin-left:-20px;margin-right:-20px}.summary-grid>div{padding:20px}.summary-grid strong{font-size:29px}.summary-note strong{font-size:15px}.dashboard{padding:64px 16px 72px}.section-heading{align-items:start}.section-heading>p{margin-top:20px}h2{font-size:34px}.sort-panel{padding:15px}.sort-buttons{display:grid;grid-template-columns:1fr 1fr}.sort-buttons button,.sort-buttons button:nth-child(2),.sort-buttons button:nth-child(3){min-width:0;padding:0 10px;font-size:12px}.sort-buttons button:nth-child(2),.sort-buttons button:nth-child(3){font-size:14px}.controls{grid-template-columns:1fr}.legend{gap:12px}.kpi-grid{grid-template-columns:1fr}.kpi-card{min-height:400px}footer{flex-direction:column}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}