/* ひとっとび — 空港の案内サイン：夜の空港の紺と、サインの黄色。角は立て、ぼかした影は付けない。
   黄色は「選んでいる・いちばん大事」だけに使い、運航期間の注意は朱の枠で分ける（同じ色に2つの意味を持たせない）。
   コード・距離・件数は B612 Mono（航空機のコックピット表示のために作られた書体）で揃える */
:root{
  --navy:#0f1f3a;
  --paper:#f2f4f7; --sheet:#ffffff; --ink:#0f1b2d; --ink2:#34425a; --ink3:#56647a;
  --line:#d8dee6; --line2:#a3aebb; --ctl:#66758b;
  --bar:#0f1f3a; --bar-ink:#ffffff; --bar-ink2:#d3dbe7;
  --sign:#0f1f3a; --sign-ink:#ffffff; --sign-hi:#ffc629; --sign-mute:#aebad0;
  --seg:#0f1f3a; --seg-ink:#ffffff; --seg-n:#ffc629; --seg-n-ink:#0f1f3a;
  --accent:#ffc629; --accent-ink:#0f1f3a; --mark:#ffc629;
  --route:#0f1f3a; --route-soft:#fff3c4; --route-ink:#0f1f3a;
  --ok:#00703c; --warn:#b03a0e; --warn-soft:#fdeee7;
  --tile:#0f1f3a; --tile-ink:#ffffff;
  --sea:#dfe6ee; --land:#fbfcfd; --coast:#aebccb; --halo:#fbfcfd; --pt:#8795a8;
  --flat:6px 6px 0 rgba(15,31,58,.16);
  --code:'B612 Mono',ui-monospace,'Consolas',monospace;
  --body:'BIZ UDPGothic','Hiragino Sans','Yu Gothic',sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0a1322; --sheet:#111d31; --ink:#eef2f7; --ink2:#c5cfdc; --ink3:#9aa8ba;
    --line:#22314a; --line2:#3a4d6a; --ctl:#7f90a8;
    --bar:#07101e; --bar-ink:#ffffff; --bar-ink2:#c9d3e0;
    --sign:#16243a; --sign-ink:#eef2f7; --sign-hi:#ffc629; --sign-mute:#9aa8ba;
    --seg:#ffc629; --seg-ink:#0f1f3a; --seg-n:#0f1f3a; --seg-n-ink:#ffc629;
    --route:#ffc629; --route-soft:#2b2812; --route-ink:#ffc629; --mark:#6b5510;
    --ok:#4fc58c; --warn:#ff9466; --warn-soft:#3a1a0e;
    --tile:#2a3b57; --tile-ink:#eef2f7;
    --sea:#07101e; --land:#16243a; --coast:#2c3f5c; --halo:#16243a; --pt:#6f809a;
    --flat:6px 6px 0 rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  --paper:#0a1322; --sheet:#111d31; --ink:#eef2f7; --ink2:#c5cfdc; --ink3:#9aa8ba;
  --line:#22314a; --line2:#3a4d6a; --ctl:#7f90a8;
  --bar:#07101e; --bar-ink:#ffffff; --bar-ink2:#c9d3e0;
  --sign:#16243a; --sign-ink:#eef2f7; --sign-hi:#ffc629; --sign-mute:#9aa8ba;
  --seg:#ffc629; --seg-ink:#0f1f3a; --seg-n:#0f1f3a; --seg-n-ink:#ffc629;
  --route:#ffc629; --route-soft:#2b2812; --route-ink:#ffc629; --mark:#6b5510;
  --ok:#4fc58c; --warn:#ff9466; --warn-soft:#3a1a0e;
  --tile:#2a3b57; --tile-ink:#eef2f7;
  --sea:#07101e; --land:#16243a; --coast:#2c3f5c; --halo:#16243a; --pt:#6f809a;
  --flat:6px 6px 0 rgba(0,0,0,.55);
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);background:var(--paper);font-family:var(--body);font-size:16px;line-height:1.75;font-feature-settings:"palt" 1}
/* 日本語は文節の切れ目（build.py / app.js が入れる <wbr>）でだけ折り返す。入りきらない長い語だけは折る。行頭の小さい「ゃ」や句読点は禁則 */
body{word-break:keep-all;overflow-wrap:break-word;line-break:strict}
a{color:var(--route-ink);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--sheet);color:var(--ink);padding:8px 12px;z-index:30}
.skip:focus{left:8px}
.wrap{max-width:1160px;margin:0 auto;padding:0 16px}

/* ヘッダー：黒いサインの帯＋黄色の下線 */
.top{background:var(--bar);color:var(--bar-ink);border-bottom:4px solid var(--accent)}
.top .wrap{display:flex;align-items:center;gap:12px;min-height:58px}
.top :focus-visible{outline-color:var(--accent)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--bar-ink);font-weight:700;font-size:1.12rem;letter-spacing:.08em}
.logo svg{width:30px;height:30px;display:block}
.top nav{margin-left:auto;display:flex;gap:2px;align-items:center}
.top nav a{color:var(--bar-ink2);text-decoration:none;font-size:.88rem;padding:10px;min-height:44px;display:inline-flex;align-items:center}
.top nav a:hover{color:var(--bar-ink);text-decoration:underline;text-underline-offset:5px}
@media (max-width:480px){.top nav a.nav-about{display:none}.top nav a{padding:10px 6px}}
.logo,.top nav a{white-space:nowrap}
.theme{border:1px solid #5b6d88;background:transparent;color:var(--bar-ink);width:44px;min-width:44px;flex-shrink:0;height:44px;cursor:pointer;font-size:1rem;margin-left:6px}
.theme:hover{border-color:var(--bar-ink)}

/* 見出し */
.hero{padding:30px 0 8px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0;padding:0 14px 0 0;background:var(--sign);color:var(--sign-ink);font-weight:700;font-size:.9rem;letter-spacing:.06em;line-height:1}
.eyebrow .pict{display:grid;place-items:center;width:34px;height:34px;background:var(--sign-hi)}
.eyebrow .pict svg{width:22px;height:22px;fill:var(--sign)}
.eb-code{font-family:var(--code);font-size:1.02rem;letter-spacing:.1em;color:var(--sign-hi);background:transparent}
h1{font-size:clamp(1.55rem,4.6vw,2.55rem);line-height:1.32;margin:.45em 0 .35em;text-wrap:balance;letter-spacing:.01em;font-weight:700}
.lead{color:var(--ink2);margin:0 0 6px;max-width:44em;text-wrap:pretty}
.lead b{background:linear-gradient(transparent 62%,var(--mark) 62%);color:var(--ink)}   /* ダークは帯を沈めて白文字を読ませる */
.asof{font-size:.82rem;color:var(--ink3);margin:8px 0 0}
@media (max-width:600px){.hero{padding:14px 0 0}.eyebrow{font-size:.8rem}h1{font-size:1.45rem;margin:.35em 0 .25em}.lead{font-size:.9rem;line-height:1.6}.hero .asof{display:none}}

/* 検索 */
.finder{position:relative;z-index:10;background:var(--sheet);border:1px solid var(--line2);border-top:4px solid var(--ink);padding:16px 18px 14px;margin:18px 0 20px}
.search{display:grid;grid-template-columns:1.1fr 1fr;gap:14px 20px}
@media (max-width:760px){.search{grid-template-columns:1fr}.finder{padding:14px 14px 12px}}
.lbl{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.92rem;margin-bottom:8px}
.lbl .step{display:inline-grid;place-items:center;width:26px;height:26px;background:var(--sign);color:var(--sign-hi);font-family:var(--code);font-size:.8rem;letter-spacing:0}
.lbl .opt{font-weight:400;font-size:.8rem;color:var(--ink3);margin-left:2px}
.cb{position:relative;flex:1;min-width:0}
.cb .ico{position:absolute;left:14px;top:50%;width:20px;height:20px;margin-top:-10px;fill:var(--ink3);pointer-events:none}
.cb input{width:100%;min-height:54px;font:inherit;font-size:1.05rem;font-weight:700;color:var(--ink);background:var(--sheet);border:2px solid var(--ctl);border-radius:0;padding:8px 46px 8px 44px;text-overflow:ellipsis}
.cb input::placeholder{color:var(--ink3);opacity:1;font-weight:400;font-size:.95rem}
.cb input:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px var(--accent)}
.cb-x{position:absolute;right:5px;top:50%;margin-top:-22px;width:44px;height:44px;border:0;background:transparent;color:var(--ink2);font-size:1.25rem;cursor:pointer}
.cb-x:hover{background:var(--paper);color:var(--ink)}
.cb-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:40;margin:0;padding:4px 0;list-style:none;background:var(--sheet);border:2px solid var(--ink);box-shadow:var(--flat);max-height:min(56vh,440px);overflow-y:auto;overscroll-behavior:contain}
.cb-list ul{list-style:none;margin:0;padding:0}
.cb-gl{display:block;position:sticky;top:-4px;z-index:1;background:var(--paper);font-size:.74rem;font-weight:700;letter-spacing:.14em;color:var(--ink2);padding:6px 16px 4px;border-bottom:1px solid var(--line)}
.cb-list [role="option"]{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:6px 16px;cursor:pointer;border-left:4px solid transparent}
.cb-list [role="option"]:hover{background:var(--paper)}
.cb-list [role="option"][aria-selected="true"]{background:var(--route-soft);border-left-color:var(--ink)}
.op-n{font-weight:700}
.op-m{font-size:.8rem;color:var(--ink3);white-space:nowrap;font-family:var(--code)}
.cb-note{padding:8px 16px;font-size:.82rem;color:var(--ink3)}
.home-row{display:flex;gap:8px}
.btn-geo{display:inline-flex;align-items:center;gap:6px;min-height:54px;padding:0 14px;border:2px solid var(--ctl);border-radius:0;background:var(--sheet);color:var(--ink);font:inherit;font-weight:700;cursor:pointer;white-space:nowrap}
.btn-geo .ico{width:20px;height:20px;fill:currentColor}
.btn-geo:hover{border-color:var(--ink);background:var(--paper)}
@media (max-width:380px){.btn-geo span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.btn-geo{padding:0 14px}}
.note{font-size:.86rem;color:var(--ink2);margin:6px 0 0;min-height:0}
.note:empty{margin:0}
.note.is-echo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.finder > .go{margin:12px 0 0;padding-top:10px;border-top:1px solid var(--line)}
.picks{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.picks:empty{display:none}
.pick{min-height:44px;padding:0 12px;border:1px solid var(--ctl);border-radius:0;background:var(--sheet);color:var(--ink);font:inherit;cursor:pointer}
.pick:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.quick{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;padding:0;list-style:none}
.quick button{min-height:44px;padding:0 13px;border:1px solid var(--line2);border-radius:0;background:transparent;color:var(--ink);font:inherit;font-size:.88rem;cursor:pointer}
.quick button:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.quick .ql{font-size:.78rem;color:var(--ink3);align-self:center;margin-right:2px;font-weight:700;letter-spacing:.12em}

/* 結果：左に答えと一覧、右に地図（スマホは 答え→地図→一覧 で、地図は上に貼り付く） */
.results{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,46%);grid-template-rows:auto 1fr;grid-template-areas:"ans map" "list map";gap:16px 24px;align-items:start}
.answer{grid-area:ans}
.list{grid-area:list;min-width:0}
.map{grid-area:map;position:sticky;top:14px;margin:0;height:min(calc(100vh - 28px),780px);min-height:420px;display:flex;flex-direction:column;background:var(--sea);border:1px solid var(--line2);overflow:hidden}
.map-canvas{flex:1;min-height:0;position:relative}
@media (max-width:860px){
  .results{grid-template-columns:1fr;grid-template-areas:"ans" "map" "list";gap:12px}
  .map{top:0;z-index:5;height:clamp(200px,32vh,300px);height:clamp(200px,32svh,300px);min-height:0;margin:0 -16px;border-left:0;border-right:0;border-bottom:2px solid var(--ink)}
}

/* 答え：案内サインのパネル（ライトは黒地に黄、ダークは黄地に黒） */
.answer{background:var(--sign);color:var(--sign-ink);padding:14px 18px 14px;border:1px solid var(--sign)}
:root[data-theme="dark"] .answer{border-color:var(--line2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .answer{border-color:var(--line2)}}
.answer:empty{display:none}
.answer :focus-visible{outline-color:var(--sign-hi)}
.ans-k{margin:0;font-size:.84rem;color:var(--sign-mute);font-weight:700;letter-spacing:.04em}
.ans-v{margin:.1em 0 .2em;font-size:clamp(1.15rem,3.4vw,1.55rem);line-height:1.4;font-weight:700;text-wrap:balance}
.ans-v b{color:var(--sign-hi)}
.ans-m{margin:0;color:var(--sign-ink);opacity:.86;font-size:.92rem}
.ans-m2{margin-top:2px;opacity:.7}
.ans-alt{margin:10px 0 0;padding-top:10px;border-top:1px solid color-mix(in srgb,var(--sign-ink) 28%,transparent);font-size:.9rem}
.linkbtn{display:inline-flex;align-items:center;min-height:44px;vertical-align:middle;background:none;border:0;padding:0 2px;margin:0 2px;color:var(--route-ink);text-decoration:underline;text-underline-offset:3px;font:inherit;font-weight:700;cursor:pointer}
.answer .linkbtn{color:var(--sign-hi);opacity:1}

/* タブ：選んでいる方をサインの色で塗る */
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px;background:var(--sheet);border:1px solid var(--line2);margin:0 0 8px}
.tabs [role="tab"]{display:flex;flex-wrap:wrap;align-items:center;align-content:center;justify-content:center;gap:0 10px;min-height:56px;padding:4px 10px;border:2px solid var(--line2);background:var(--sheet);
  color:var(--ink);font:inherit;font-weight:700;cursor:pointer;transition:background-color .12s,border-color .12s,transform .06s}
.tabs [role="tab"]:hover{border-color:var(--ink);background:var(--paper)}
.tabs [role="tab"]:active{transform:translateY(1px)}
.tabs [role="tab"][aria-selected="true"]{background:var(--seg);border-color:var(--seg);color:var(--seg-ink);cursor:default}
.tabs [role="tab"][aria-selected="true"]:active{transform:none}
.tabs [role="tab"]:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.tabs .n{display:inline-grid;place-items:center;min-width:30px;height:26px;padding:0 7px;font-family:var(--code);font-size:.95rem;font-weight:700;background:var(--line);color:var(--ink)}
.tabs [aria-selected="true"] .n{background:var(--seg-n);color:var(--seg-n-ink)}
.tabs-sub{flex-basis:100%;text-align:center;font-size:.76rem;font-weight:400;line-height:1.3;color:var(--ink2)}
.tabs [aria-selected="true"] .tabs-sub{color:inherit;opacity:.85}
.empty{padding:18px;background:var(--sheet);border:1px dashed var(--line2);color:var(--ink2);margin:12px 0 0}
.fine{font-size:.84rem;color:var(--ink3);margin:10px 0 0}
.hint{font-size:.86rem;color:var(--ink2);margin:10px 0 4px}

/* 一覧：出発案内の行。左端のコードは搭乗口の番号札 */
.stubs{list-style:none;margin:3px 0 0;padding:0;display:grid;gap:3px}
.stub{position:relative;display:grid;grid-template-columns:84px minmax(0,1fr) auto;grid-template-areas:"code name dist" "code body body";column-gap:16px;row-gap:4px;
  background:var(--sheet);padding:12px 14px 12px 0;transition:background-color .15s;animation:rowin .3s ease both}
.stubs .stub:nth-child(2){animation-delay:.03s}.stubs .stub:nth-child(3){animation-delay:.06s}.stubs .stub:nth-child(4){animation-delay:.09s}.stubs .stub:nth-child(5){animation-delay:.12s}
.stub:hover{background:color-mix(in srgb,var(--route-soft) 45%,var(--sheet))}
.stub.is-sel{background:color-mix(in srgb,var(--route-soft) 55%,var(--sheet));box-shadow:inset 0 0 0 2px var(--ink)}
.stub-hit{position:absolute;inset:0;z-index:1;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer}
.stub-hit:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
.stub-code{grid-area:code;align-self:stretch;margin:-12px 0;display:flex;align-items:center;justify-content:center;background:var(--tile);color:var(--tile-ink);
  font-family:var(--code);font-weight:700;font-size:1.45rem;letter-spacing:.06em;transform-origin:50% 0;animation:flap .42s cubic-bezier(.2,.75,.25,1) both;animation-delay:inherit}
.stub.is-sel .stub-code{background:var(--accent);color:var(--accent-ink)}
.stub-code{flex-direction:column;gap:2px}
.stub.is-sel .stub-code::after{content:"地図";font:700 .62rem/1 var(--body);letter-spacing:.08em;opacity:.85}
.stub-code.is-name{font-family:var(--body);font-size:.92rem;letter-spacing:0;text-align:center;padding:0 4px;line-height:1.3}
@keyframes rowin{from{opacity:0}to{opacity:1}}
@keyframes flap{from{transform:perspective(360px) rotateX(-86deg)}to{transform:none}}
.stub,.stub-code{animation:none}
.is-fresh .stub{animation:rowin .3s ease both}
.is-fresh .stub-code{animation:flap .42s cubic-bezier(.2,.75,.25,1) both;animation-delay:inherit}
@media (prefers-reduced-motion:reduce){.is-fresh .stub,.is-fresh .stub-code{animation:none}.stub{transition:none}}
.stub-name{grid-area:name;font-weight:700;line-height:1.45}
.stub-name .pref{display:inline-block;margin-left:8px;font-weight:400;font-size:.84rem;color:var(--ink3)}
.stub-name .tag{display:inline-flex;align-items:center;margin-left:8px;padding:0 7px;min-height:22px;background:var(--tile);color:var(--tile-ink);font-size:.74rem;font-weight:700;vertical-align:2px}
.stub-dist{grid-area:dist;font-family:var(--code);font-size:1.02rem;font-weight:700;color:var(--ink);white-space:nowrap}
.stub-body{grid-area:body}
.leg{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:2px}
.chip{display:inline-flex;align-items:center;min-height:24px;padding:0 7px;border:1px solid var(--line2);color:var(--ink2);font-size:.84rem;font-weight:700}
.op{font-size:.83rem;color:var(--ink3)}
td .lab{font-size:.84rem;font-weight:700;padding:0 5px;background:var(--warn-soft);color:var(--warn);box-shadow:inset 0 0 0 1.5px var(--warn)}
td .lab.lab-start{background:transparent;color:var(--ink2);padding:0;font-weight:400}
.badge{display:inline-flex;align-items:center;min-height:26px;padding:0 8px;font-size:.8rem;font-weight:700;background:var(--line);color:var(--ink)}
.badge-warn{background:var(--warn-soft);color:var(--warn);box-shadow:inset 0 0 0 1.5px var(--warn)}
.badge-ok{background:transparent;color:var(--ok);box-shadow:inset 0 0 0 1.5px var(--ok)}
/* 乗り継ぎ：①区間 ②区間 を行で見せる */
.via{margin:0 0 4px;font-size:.9rem;color:var(--ink2)}
.via b{color:var(--ink)}
.route{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.seg{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:4px 10px}
.seg-n{display:none}   /* 順番は「→」で足りる（HTML の span は aria-hidden のまま残す） */
.seg-od{font-weight:700;white-space:nowrap}
.seg-od .to{margin:0 5px;color:var(--ink3);font-weight:400}
.seg-c{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.flags{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.alts{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line2)}
.alts-l{font-size:.8rem;color:var(--ink3);margin-right:2px}
.alt{min-height:44px;padding:0 14px;border:2px solid var(--line2);border-radius:0;background:var(--sheet);color:var(--ink);font:inherit;font-size:.88rem;cursor:pointer}
.alt:hover{border-color:var(--ink);background:var(--paper)}
.alt[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper);font-weight:700}
.alts-more{font-size:.8rem;color:var(--ink3)}
.more{display:block;width:100%;min-height:50px;margin-top:12px;border:2px solid var(--ink);border-radius:0;background:var(--sheet);color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
.more:hover{background:var(--ink);color:var(--paper)}
@media (max-width:520px){
  .stub{grid-template-columns:62px minmax(0,1fr);grid-template-areas:"code name" "code dist" "body body";column-gap:12px;padding:12px 12px 12px 0}
  .stub-code{font-size:1.12rem;margin:-12px 0 0;align-self:start;height:auto;min-height:58px}
  .stub-dist{font-size:.95rem}
  .stub-body{padding-left:12px}
  .seg{grid-template-columns:minmax(0,1fr)}
  .seg-c{grid-column:1}
}

/* 地図 */
.chart{display:block;width:100%;height:100%;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.map.is-drag .chart{cursor:grabbing}
.map.is-zoomed .chart{touch-action:none}
.chart .sea{fill:var(--sea)}
.chart .land{fill:var(--land);stroke:var(--coast);stroke-width:.8;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.chart .arc{fill:none;stroke:var(--route);stroke-opacity:.26;stroke-width:1.3;vector-effect:non-scaling-stroke}
.chart .arc.sel{stroke-opacity:1;stroke-width:3.2;stroke-linecap:round}
.chart .arrow{fill:var(--route)}
.chart .ground{stroke:var(--ok);stroke-width:2.6;stroke-dasharray:1 6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.chart .pt{fill:var(--pt)}
.chart .pt.on{fill:var(--ink);stroke:var(--land);stroke-width:1.6;vector-effect:non-scaling-stroke}
.chart .pt.on2{fill:var(--ink2)}
.chart .pt.hub{fill:var(--land);stroke:var(--route);stroke-width:3;vector-effect:non-scaling-stroke}
.chart .pt-hit{fill:transparent}
.chart [data-map-o]{cursor:pointer}
.chart .pin path{fill:var(--accent);stroke:var(--navy);stroke-width:1.6}
.chart .pin circle{fill:var(--navy)}
.chart .homemk circle{fill:var(--ok);stroke:var(--land);stroke-width:2}
.chart .homemk path{fill:#fff}
.chart text{font-family:var(--body);font-weight:700;fill:var(--ink);paint-order:stroke;stroke:var(--halo);stroke-linejoin:round;dominant-baseline:central}
.chart .lb.dim{fill:var(--ink2);font-weight:400}
.chart .lb.dest,.chart .lb.hub{fill:var(--route-ink)}
.chart .lb.home{fill:var(--ok)}
/* 拡大・縮小ボタン（地図の右上） */
.map-ctl{position:absolute;top:10px;right:10px;z-index:2;display:flex;flex-direction:column;background:var(--sign);box-shadow:var(--flat)}
.map-ctl button{width:44px;height:44px;border:0;background:transparent;color:var(--sign-ink);font-family:var(--code);font-size:1.3rem;font-weight:700;line-height:1;cursor:pointer;padding:0}
.map-ctl button+button{border-top:1px solid color-mix(in srgb,var(--sign-ink) 26%,transparent)}
.map-ctl button:hover{background:color-mix(in srgb,var(--sign-ink) 14%,transparent)}
.map-ctl button:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.map-ctl .map-fit{font-family:var(--body);font-size:.74rem;letter-spacing:.04em}
.legend{display:flex;flex-wrap:wrap;gap:2px 14px;margin:0;padding:8px 12px;list-style:none;font-size:.78rem;line-height:1.5;color:var(--ink2);background:var(--sheet);border-top:1px solid var(--line2)}
.legend li{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;flex-shrink:0}
.legend svg{width:16px;height:16px;flex-shrink:0}
.legend svg[viewBox^="0 0 28"]{width:22px}
.lg-pin{fill:var(--accent);stroke:var(--navy);stroke-width:1.4}
.lg-pin+circle{fill:var(--navy)}
.lg-pt{fill:var(--ink)}
.lg-arc{fill:none;stroke:var(--route);stroke-width:2.6;stroke-linecap:round}
.lg-home{fill:var(--ok)}
.lg-ground{stroke:var(--ok);stroke-width:2.6;stroke-dasharray:1 5;stroke-linecap:round}
@media (max-width:860px){
  .legend{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:0 12px;padding:4px 16px;font-size:.74rem;line-height:1.4}
  .legend::-webkit-scrollbar{display:none}
  .map-ctl{flex-direction:row;top:auto;bottom:8px;right:8px}
  .map-ctl button+button{border-top:0;border-left:1px solid color-mix(in srgb,var(--sign-ink) 26%,transparent)}
  .tabs{position:sticky;top:var(--maph,0px);z-index:4;margin:0 -16px 8px;padding:6px 16px;border-left:0;border-right:0;background:var(--paper)}
  .legend li .t{display:none}
  .legend li::after{content:attr(data-s)}
  .legend{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
}
@media (max-width:760px){.finder.has-dest .quick{display:none}}
.tab-note{margin:10px 0}

/* 静的な一覧（空港ページ） */
.section{margin:40px 0}
h2{font-size:1.28rem;line-height:1.45;margin:0 0 14px;padding-bottom:8px;border-bottom:2px solid var(--ink);display:flex;align-items:baseline;gap:10px}
h2::before{content:"";flex-shrink:0;width:12px;height:12px;background:var(--accent);box-shadow:inset 0 0 0 1.5px var(--navy);transform:translateY(-1px)}
h3{font-size:1rem;margin:22px 0 8px;letter-spacing:.06em}
details.static>summary{list-style:none;cursor:pointer}
details.static>summary::-webkit-details-marker{display:none}
details.static>summary h2{min-height:44px}
details.static>summary h2::after{content:"開く ＋";content:"開く ＋"/"";margin-left:auto;flex-shrink:0;font-size:.8rem;font-weight:700;letter-spacing:.06em;color:var(--ink2);white-space:nowrap}
details.static[open]>summary h2::after{content:"閉じる −";content:"閉じる −"/""}
details.static>summary:hover h2::after{color:var(--ink)}
details.static:not([open])>summary h2{margin-bottom:0}
.table-wrap{overflow-x:auto;background:var(--sheet);border:1px solid var(--line2)}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.82rem;color:var(--sign-ink);background:var(--sign);white-space:nowrap;letter-spacing:.06em}
tr:last-child td{border-bottom:0}
td .code{font-family:var(--code);font-weight:700;letter-spacing:.04em;margin-right:8px;color:var(--ink)}
.reg{font-size:.8rem;color:var(--ink3);white-space:nowrap;font-weight:700}
.dir{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:0 18px;list-style:none;padding:0;margin:0}
.dir a{display:flex;gap:10px;align-items:baseline;min-height:44px;padding:9px 4px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.dir a:hover{background:var(--route-soft)}
.dir .code{font-family:var(--code);font-weight:700;font-size:.86rem;color:var(--ink);min-width:2.8em}
.dir .cnt{margin-left:auto;font-size:.78rem;color:var(--ink3);white-space:nowrap}
.prose p{max-width:46em}
.steps{margin:0 0 12px;padding-left:1.6em;max-width:46em}
.steps li{margin:2px 0}
.faq dt{font-weight:700;margin-top:16px}
.faq dd{margin:4px 0 0}
.crumb{font-size:.85rem;color:var(--ink3);margin:18px 0 0}
.crumb a{color:var(--ink2)}

/* フッター */
.foot{margin-top:60px;border-top:2px solid var(--ink);padding:22px 0 40px;font-size:.88rem;color:var(--ink2)}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 16px}
.foot nav a{color:var(--ink2);min-height:44px;display:inline-flex;align-items:center}
.foot .src{margin:10px 0 0;font-size:.8rem;color:var(--ink3)}
.ad-slot:empty{display:none}

/* スマホ幅では空港ページの表を縦並びのカードにする（4列が潰れて備考が1文字ずつ折り返すのを防ぐ） */
@media (max-width:600px){
  .table-wrap table,.table-wrap tbody,.table-wrap tr,.table-wrap td{display:block;width:100%}
  .table-wrap thead{display:none}
  .table-wrap tr{padding:10px 14px;border-bottom:1px solid var(--line)}
  .table-wrap tr:last-child{border-bottom:0}
  .table-wrap td{border:0;padding:2px 0}
  .table-wrap td:first-child:empty{display:none}
  .table-wrap td:nth-child(2){font-weight:700}
  .table-wrap td:nth-child(4){font-size:.85rem;color:var(--ink2)}
}

/* === ui-polish v1 : reference_ui_microinteractions テク①③ === */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4{text-wrap:balance}
p,li,dd,figcaption{text-wrap:pretty}
/* === /ui-polish === */

/* ダーク：サインの面（01/02 の札・表の見出し行・小見出しの札）が紙と溶けないよう細い輪郭を付ける */
:root[data-theme="dark"] .lbl .step,:root[data-theme="dark"] th,:root[data-theme="dark"] .eyebrow{box-shadow:inset 0 0 0 1px var(--line2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lbl .step,:root:not([data-theme="light"]) th,:root:not([data-theme="light"]) .eyebrow{box-shadow:inset 0 0 0 1px var(--line2)}}