/* cocouv — 県・都市ページ共通スタイル（旧: 各ページのインライン<style>） */
body { display:block; }
.hero-top { display:flex; align-items:center; justify-content:space-between; padding:14px 22px; border-bottom:1px solid var(--border); background:var(--panel); }
.crumb { max-width:900px; margin:0 auto; padding:14px 22px 0; font-size:12px; color:var(--text2); }
.crumb a { color:var(--text2); text-decoration:none; }
.crumb a:hover { color:var(--accent); }

.pref-hero { max-width:none; margin:14px 0 0; padding:34px max(22px,calc((100% - 900px)/2 + 22px)) 30px; text-align:left; color:#fff;
  background:linear-gradient(90deg,rgba(12,15,36,.9) 0%,rgba(12,15,36,.62) 55%,rgba(12,15,36,.25) 100%),url(hero-sky.jpg) 72% 40%/cover no-repeat #0c0f24; }
.pref-hero h1 { font-size:clamp(28px,5.2vw,44px); font-weight:900; line-height:1.25; letter-spacing:-.01em; color:#fff; text-shadow:0 1px 16px rgba(0,0,0,.35); }
.pref-hero h1 .accent { color:inherit; text-shadow:none; }
.pref-hero p { color:rgba(255,255,255,.88); font-size:14px; margin:12px 0 0; max-width:600px; line-height:1.85; }

/* 現在値カード＝計器。数値を主役にし、下にUV定規(ruler.js)を置く */
.now-wrap { max-width:900px; margin:18px auto 6px; padding:0 22px; }
.now-card { text-align:left; padding:20px 22px 22px; border-radius:6px; }
.now-card-city { font-size:14px; font-weight:700; color:var(--text2); margin:0; }
.now-card-val { font-size:clamp(72px,18vw,112px); font-weight:800; line-height:1; margin:4px 0 8px; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.now-card-level { font-size:13px; }
.now-card-advice { font-size:13px; margin-top:12px; }

.uv-ruler { margin-top:18px; }
.uv-ruler-bar { position:relative; display:flex; height:10px; border-radius:2px; overflow:visible; }
.uv-ruler-bar i { display:block; height:100%; }
.uv-ruler-bar i:first-child { border-radius:2px 0 0 2px; }
.uv-ruler-bar i:nth-child(5) { border-radius:0 2px 2px 0; }
.uv-ruler-pin { position:absolute; top:-6px; width:0; height:0; transform:translateX(-50%); transition:left .5s; border-left:6px solid transparent; border-right:6px solid transparent; border-top:8px solid var(--text); }
.uv-ruler-pin::after { content:''; position:absolute; left:-1px; top:6px; width:2px; height:12px; background:var(--text); }
.uv-ruler-ticks { position:relative; height:16px; margin-top:6px; font:600 11px/1 'Outfit',sans-serif; color:var(--text2); }
.uv-ruler-ticks span { position:absolute; transform:translateX(-50%); }
.uv-ruler-ticks span:first-child { transform:none; }

.pref-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; max-width:900px; margin:20px auto; padding:0 22px; }
.pref-cell { background:var(--panel); border:1px solid var(--border); border-radius:6px; padding:12px 14px; text-align:left; }
.pref-cell .pc-city { font-size:13px; font-weight:700; margin-bottom:6px; color:var(--text2); }
.pref-cell .pc-val { font-size:32px; font-weight:800; font-family:'Outfit',sans-serif; line-height:1; font-variant-numeric:tabular-nums; }
.pref-cell .pc-lv { display:inline-block; margin-top:8px; padding:2px 10px; border-radius:3px; font-size:12px; font-weight:700; color:#fff; }
.status-bar { max-width:900px; margin:6px auto 8px; padding:0 22px; text-align:left; font-size:11px; color:var(--text2); border:0; }

.cta { display:inline-block; background:var(--accent); color:var(--bg); font-weight:800; font-size:15px; padding:12px 28px; border-radius:4px; text-decoration:none; box-shadow:none; }
.cta:hover { filter:brightness(1.1); }
.pref-links { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-start; margin:10px 0 4px; }
.pref-link { background:transparent; border:1px solid var(--border); border-radius:4px; padding:6px 12px; font-size:13px; color:var(--text); text-decoration:none; }
.pref-link:hover { border-color:var(--accent); color:var(--accent); }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { .uv-ruler-pin { transition:none; } }