/* まちの通勤・通学流動くらべ(tsukin-ds 0.1.0 / 流線図): 紺の地に、流入(青緑)と流出(朱)の 2 色の帯。他の地域型サイトの CSS とは別。外部のフォント・画像は読まない(OS の標準フォント) */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--base);color:var(--ink);font:16px/1.75 "Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo","Noto Sans JP",system-ui,sans-serif;font-feature-settings:"palt"}
a{color:var(--in);text-underline-offset:3px}a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:3px}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:8px 14px;z-index:30}.skip:focus{left:8px;top:8px}
.u{font-size:.72em;color:var(--muted);margin-left:.25em;font-weight:500;letter-spacing:0}
h1,h2,h3{line-height:1.35;margin:0 0 .6em}h1{font-size:clamp(1.55rem,3.2vw+.6rem,2.35rem);letter-spacing:.01em}h2{font-size:clamp(1.25rem,1.4vw+.9rem,1.65rem)}h3{font-size:1.05rem}
main:focus{outline:0}
/* ヘッダー */
.hd{background:var(--ink);color:#fff}.hdIn{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;padding-top:12px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}.mark{width:38px;height:38px;flex:none}
.brandTx{display:flex;flex-direction:column;line-height:1.25}.brandName{font-weight:700;font-size:1.05rem}.brandSub{font-size:.76rem;color:#b9cadb}
.nav ul{display:flex;flex-wrap:wrap;gap:2px 4px;list-style:none;margin:0;padding:0}.nav a{display:block;padding:6px 10px;color:#e3edf6;text-decoration:none;font-size:.9rem;border-radius:6px}.nav a:hover{background:#17324d;color:#fff}.nav a.navNat{border:1px solid #4d6c8a}
.spectrum{height:6px;display:flex}.spectrum i{flex:1}.spIn{background:linear-gradient(90deg,#0b7a7c,#35c3c1)}.spOut{background:linear-gradient(90deg,#ff7a59,#b8381e)}
/* ヒーロー・見出し領域 */
.hero{background:linear-gradient(180deg,#0b1f33 0,#12304b 100%);color:#fff;padding:28px 0 36px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-60px;top:-30px;width:520px;height:260px;opacity:.18;background:
 radial-gradient(ellipse at 0 50%,#35c3c1 0 2px,transparent 3px) 0 0/22px 22px,
 linear-gradient(100deg,transparent 0,#35c3c1 40%,#f2b134 52%,#ff7a59 70%,transparent 100%);-webkit-mask:radial-gradient(ellipse at 60% 50%,#000 20%,transparent 70%);mask:radial-gradient(ellipse at 60% 50%,#000 20%,transparent 70%);pointer-events:none}
.hero .wrap{position:relative;z-index:1}.hero .lead,.hero .src,.hero .src a{color:#d5e3f0}.hero a{color:#8fe3e2}
.heroSm{padding-bottom:28px}.hero .u,.hero .kpi .u{color:#b9cadb}
.eyebrow{margin:10px 0 6px;font-size:.84rem;letter-spacing:.06em;color:#9fd9d8;font-weight:600}
.lead{font-size:1.04rem;max-width:62em;margin:0 0 14px}
.pageHead{background:#fff;border-bottom:1px solid var(--line);padding:18px 0 22px}.pageHead .lead{color:var(--muted)}
.crumb ol{display:flex;flex-wrap:wrap;gap:4px;list-style:none;margin:0;padding:0;font-size:.82rem}.crumb li+li::before{content:"/";margin-right:4px;opacity:.6}.hero .crumb a{color:#b9dede}
.src{font-size:.82rem;color:var(--muted);margin:10px 0 0}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:18px 0 6px}
.kpi{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:12px 14px}
.pageHead .kpi{background:var(--base);border-color:var(--line)}
.kpi dt{font-size:.78rem;color:#b9cadb;margin:0}.pageHead .kpi dt{color:var(--muted)}.kpi dd{margin:2px 0 0}
.kv{display:block;font-size:1.65rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.3}.ks{display:block;font-size:.76rem;color:#b9cadb}.pageHead .ks{color:var(--muted)}
.finger{margin:12px 0 4px;max-width:760px}.fingerL{font-size:.78rem;color:#b9cadb;margin:4px 0 0}
/* セクション */
.sec{padding:34px 0}.sec.alt{background:var(--sand)}
.note{color:var(--muted);font-size:.92rem;margin:0 0 14px;max-width:62em}.prose{max-width:60em}.prose ul,.prose ol{padding-left:1.3em}
.two{display:grid;grid-template-columns:1fr 1fr;gap:22px}.three{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
/* 順位の棒 */
.rk{list-style:none;margin:0 0 6px;padding:0}.rk li{display:grid;grid-template-columns:2em minmax(5em,1.1fr) minmax(40px,1.6fr) auto;gap:8px;align-items:center;padding:5px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.rkN{color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}.rkName{overflow-wrap:anywhere}.rkBar{display:block;height:10px;background:#dfe8ef;border-radius:5px;overflow:hidden}.rkBar i{display:block;height:100%;border-radius:5px;background:var(--ink)}
.rkBar i.bIn{background:var(--in)}.rkBar i.bOut{background:repeating-linear-gradient(135deg,var(--out) 0 5px,#d9684c 5px 8px)}
.rkV{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.dirIn{color:var(--in);font-weight:700}.dirOut{color:var(--out);font-weight:700}
/* 内訳の帯・凡例 */
.stkList{display:grid;gap:8px}.stkRow{display:grid;grid-template-columns:minmax(6em,13em) 1fr;gap:12px;align-items:center;margin-bottom:8px}.stkL{margin:0;font-size:.92rem;font-weight:600}
.stk{display:flex;height:22px;border-radius:6px;overflow:hidden;background:#d6e0e8;border:1px solid var(--line)}.sg{display:block;height:100%}
.cSelf{background:#0b1f33}.cPref{background:#35c3c1}.cXpref{background:repeating-linear-gradient(135deg,#b8381e 0 6px,#e0694a 6px 10px)}.cUnk{background:#c9d3dc}
.lg{display:flex;flex-wrap:wrap;gap:6px 16px;list-style:none;margin:10px 0 18px;padding:0;font-size:.84rem}.lg li{display:flex;align-items:center;gap:6px}.sw{display:inline-block;width:18px;height:12px;border-radius:3px;border:1px solid rgba(0,0,0,.15)}
/* 表 */
.scroll{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--paper);margin:10px 0 18px}.scroll:focus-visible{outline-offset:-2px}
table.t{border-collapse:collapse;width:100%;font-size:.92rem;font-variant-numeric:tabular-nums}.t caption{text-align:left;padding:10px 12px;font-weight:700;caption-side:top}
.t th,.t td{padding:8px 10px;border-top:1px solid var(--line);text-align:left;vertical-align:middle}.t thead th{background:#e6eef4;font-size:.8rem;border-top:0;white-space:normal}.t .num{text-align:right}.t tbody th{font-weight:600}
.t tbody th[scope=row]{white-space:nowrap;min-width:9em}.scroll table.t{min-width:560px}.chordHint{display:none}
.t tr.sumRow th,.t tr.sumRow td{background:#f0f5f9;font-weight:700}
.t tr.grp th{font-weight:700}.t tr.sub th,.t tr.sub td{font-size:.85rem;color:var(--muted);border-top:1px dotted var(--line);padding-top:4px;padding-bottom:4px}.t tr.sub th{font-weight:400;padding-left:1.6em}
.aggNote{background:#e6f4f4;border:1px solid #b9dede;border-radius:10px;padding:10px 14px;margin:0 0 14px;font-size:.92rem;max-width:62em}
.zeroNote{background:#fff7e0;border:1px solid var(--amber);border-radius:10px;padding:10px 14px;margin:12px 0;color:var(--ink);max-width:62em}
.sb{all:unset;cursor:pointer;display:inline-flex;gap:4px;align-items:center;font:inherit;font-weight:700;color:inherit;text-align:inherit}.sb:focus-visible{outline:3px solid var(--focus)}.sbI::after{content:"↕";opacity:.45}.sb[data-dir=asc] .sbI::after{content:"▲";opacity:1}.sb[data-dir=desc] .sbI::after{content:"▼";opacity:1}
.bal{display:inline-block;position:relative;width:96px;height:10px;background:#e1e9ef;border-radius:5px;vertical-align:middle;margin-left:8px}.bal::before{content:"";position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:var(--muted)}.bal i{position:absolute;top:0;height:100%}.balIn{background:var(--in)}.balOut{background:var(--out)}
/* 図(流れ) */
.figFlow,.figChord{margin:8px 0 18px}.figFlow figcaption{font-size:.84rem;color:var(--muted);margin-top:6px}
svg.flow{display:block;width:100%;height:auto;max-width:880px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:12px}
svg.chord{max-width:700px}
.rb{stroke-width:.6}.rbIn{fill:rgba(11,122,124,.32);stroke:#0b7a7c}.rbOut{fill:rgba(184,56,30,.30);stroke:#b8381e;stroke-dasharray:3 2}.rb.rest{fill-opacity:.12}.rb:hover{fill-opacity:.6}
.nd.ndIn{fill:#0b7a7c}.nd.ndOut{fill:#b8381e}.nd.rest{fill:#8ea1b3}.ndC{fill:#0b1f33}.cn{fill:#fff;font-size:13px;font-weight:700}
.nl{font-size:12.5px;fill:#0b1f33}.nl .nv,.nv{fill:#455a6e;font-size:11.5px;font-variant-numeric:tabular-nums}.ch{font-size:12.5px;font-weight:700;fill:#0b1f33}.sn{font-size:11.5px;fill:#455a6e}
a:hover .nl{text-decoration:underline}
.cr{fill-opacity:.45;stroke:#fff;stroke-width:.4}.cr:hover{fill-opacity:.85}.ca{stroke:#fff;stroke-width:.5}.cl{font-size:11px;fill:#0b1f33}
.flowList{display:none;grid-template-columns:1fr;gap:16px;margin-top:10px}
/* ほか部品 */
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:14px 0 0;padding:0}.chips a,.chips li{font-size:.88rem}.chips>li>a{display:inline-block;padding:5px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;text-decoration:none}.chips>li>a:hover{border-color:var(--in)}
.cmp .chips li{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 12px;border:1px solid var(--line);border-radius:999px;background:#fff}.chipX{all:unset;cursor:pointer;width:22px;height:22px;text-align:center;border-radius:50%;background:#e6eef4}.chipX:focus-visible{outline:3px solid var(--focus)}
.pg{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;list-style:none;margin:10px 0 0;padding:0}.pg a{display:grid;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;text-decoration:none;height:100%}.pg a:hover{border-color:var(--in)}.pgN{font-weight:700}.pgV{font-size:.86rem;color:var(--ink)}.pgT{font-size:.78rem;color:var(--muted)}
.facts{padding-left:1.2em;max-width:60em}.facts li{margin:0 0 .55em}
.near{list-style:none;margin:0 0 8px;padding:0}.near li{display:flex;flex-direction:column;padding:7px 0;border-bottom:1px solid var(--line)}.near span{font-size:.82rem;color:var(--muted)}
.filters{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:end;margin:6px 0 14px}.filters label{display:flex;flex-direction:column;gap:3px;font-size:.84rem;font-weight:600}
input[type=search],select{font:inherit;padding:8px 10px;border:1px solid #8aa0b3;border-radius:8px;background:#fff;color:var(--ink);min-height:40px}
.btn{display:inline-block;font:inherit;font-weight:700;padding:9px 18px;border-radius:8px;border:1px solid var(--ink);background:var(--ink);color:#fff;text-decoration:none;cursor:pointer}.btn:hover{background:#17324d;color:#fff}
.finder{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin-bottom:10px}.finder label{font-weight:700;width:100%}
.count{margin:0;font-size:.86rem;color:var(--muted)}
.results{list-style:none;margin:0;padding:0}.results li{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;padding:9px 4px;border-bottom:1px solid var(--line)}.results a{text-decoration:none;display:flex;gap:10px;font-weight:600}.rP{font-weight:400;color:var(--muted)}.rV{font-size:.84rem;color:var(--muted)}
.dl{display:grid;grid-template-columns:9em 1fr;gap:8px 16px}.dl dt{font-weight:700}.dl dd{margin:0}code.hash{font-size:.76rem;word-break:break-all}
.pairBox{margin-top:8px}
/* 注意・フッター */
.safety{background:#fff7e0;border-top:3px solid var(--amber);padding:18px 0}.safetyH{font-size:1rem;margin:0 0 8px}.safety ul{margin:0;padding-left:1.2em;font-size:.88rem}.safety li{margin-bottom:.3em}
.ft{background:var(--ink);color:#d5e3f0;padding:28px 0 22px}.ft a{color:#8fe3e2}.ftTop{display:flex;flex-wrap:wrap;gap:20px 40px;justify-content:space-between}.ftName{font-weight:700;font-size:1.1rem;margin:0;color:#fff}.ftLead{margin:4px 0 0;font-size:.9rem;max-width:30em}.ftLinks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(10em,1fr));gap:4px 24px;font-size:.9rem}
.disc{font-size:.8rem;color:#a9bdd0;margin:18px 0 6px}.ftLast{font-size:.8rem;margin:0;color:#a9bdd0}
@media (max-width:900px){.two,.three{grid-template-columns:1fr}.stkRow{grid-template-columns:1fr;gap:4px}}
@media (max-width:720px){
 .wrap{padding:0 16px}svg.flowSvg{display:none}.flowList{display:grid}
 .kv{font-size:1.4rem}.kpis{grid-template-columns:1fr 1fr}.hero::after{display:none}
 .rk li{grid-template-columns:1.6em 1fr auto;grid-template-areas:"n name v" ". bar bar"}.rkN{grid-area:n}.rkName{grid-area:name}.rkV{grid-area:v}.rkBar{grid-area:bar}
 .dl{grid-template-columns:1fr}.ftLinks{grid-template-columns:1fr 1fr}.bal{width:64px}
 svg.chord,.chordOnly{display:none}.chordHint{display:block}
}
@media (prefers-reduced-motion:no-preference){.rb,.cr{transition:fill-opacity .15s}}
@media print{.hd,.ft,.nav{display:none}}