/* PV-DIR-DATA ── 一覧のカード・検索・結果の見出し・比較の盆（directory-data の持ち場。ほかの持ち場は自分の印の中だけを直す） */
.wd-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
#airline-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--pv-s-2);list-style:none;margin:0;padding:0}
.wd-li{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;row-gap:var(--pv-s-1);padding:var(--pv-s-2);background:var(--pv-surface);border:1px solid var(--pv-line);border-radius:var(--pv-r);box-shadow:var(--pv-shadow);transition:transform .2s var(--pv-ease)}
.wd-li[hidden]{display:none}
@supports (grid-template-rows:subgrid){.wd-li{grid-row:span 3;grid-template-rows:subgrid}}
/* カードの頭は2段：上 ＝ ロゴ（左）と矢印（右）／下 ＝ 社名と2行目。社名にカードの横幅を全部渡す
   （ロゴの横に並べていた頃は、狭いカードで社名が「キャセイパシフィッ／ク」と語の途中で折れていた ── WP-dd-9） */
.wd-go{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"logo chev" "names names";align-items:center;gap:8px 10px;min-height:48px;color:inherit;text-decoration:none;outline:none}
.wd-go::after{content:"";position:absolute;inset:0;border-radius:var(--pv-r)}   /* カード全体がリンク。足もとの段（.wd-foot）だけは上に乗る */
.wd-li:has(.wd-go:hover){transform:translateY(-2px)}
.wd-go:hover .wd-name{text-decoration:underline;text-underline-offset:3px}
.wd-go:focus-visible::after{outline:2px solid var(--pv-accent);outline-offset:2px}
.wd-li:has(.wd-go:active){transform:translateY(0) scale(.99)}
.wd-go:active .wd-name{opacity:.7}
/* ロゴの札：高さはそろえ、幅は絵の縦横比のまま（幅と高さの属性 ＝ airline-logo-sizes.mjs の表）。横に長い字だけのロゴ（JAC など）も、
   上の段の幅いっぱいまで広がって読める大きさになる（社名の横に置いていた頃は 84px に詰められて字が潰れていた） */
.wd-logo{grid-area:logo;min-width:0;display:flex;align-items:center;height:32px}
.wd-logo .pvg-logo{--lg-h:32px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:var(--lg-h);min-width:var(--lg-h);max-width:100%;padding:3px 6px;overflow:hidden;border-radius:var(--pv-r-sm);background:#fff;border:1px solid var(--pv-line)}
.wd-logo .pvg-logo>img{display:block;height:100%;width:auto;max-width:100%;object-fit:contain}
.wd-logo .pvg-logo>.pvg-mono{display:none}
.wd-logo .pvg-logo.is-mono,.wd-logo .pvg-logo.is-fail{width:var(--lg-h);max-width:none;padding:0;border:0;background:var(--pvg-c,var(--pv-accent))}
.wd-logo .pvg-logo.is-mono>.pvg-mono,.wd-logo .pvg-logo.is-fail>.pvg-mono{display:grid;place-items:center;width:100%;height:100%;font-size:.72rem;font-weight:800;line-height:1;letter-spacing:.02em;color:var(--pvg-mono-ink,#fff)}
.wd-logo .pvg-logo.is-fail>img{display:none}
.wd-names{grid-area:names;min-width:0;display:flex;flex-direction:column;gap:2px}
/* 社名は語の途中で折らない（折れてよいのは空白・「・」の後ろ・括弧の前だけ ＝ keep-all）。それでも入らないときの最後の手は「…」。
   text-spacing-trim:space-all ＝ 行末の「）」を詰めて測らない（詰めて「入る」と決めた行が 3px はみ出し、「（FD…」と切れていた） */
.wd-name{font-size:.9rem;font-weight:700;line-height:1.3;letter-spacing:-.01em;color:var(--pv-ink);word-break:keep-all;overflow-wrap:normal;text-spacing-trim:space-all;overflow:hidden;text-overflow:ellipsis}
.wd-meta{display:flex;align-items:baseline;gap:6px;min-width:0}
.wd-sub{min-width:0;font-size:.7rem;color:var(--pv-ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wd-code{flex:none;padding:0 6px;border-radius:999px;border:1px solid var(--pv-line);font-size:.64rem;font-weight:800;line-height:16px;letter-spacing:.02em;color:var(--pv-ink-2)}
.wd-chev{grid-area:chev;width:7px;height:7px;margin:0 6px 0 0;border-top:2px solid var(--pv-ink-3);border-right:2px solid var(--pv-ink-3);transform:rotate(45deg)}
.wd-figs{display:grid;align-content:start;gap:6px;padding-top:var(--pv-s-1);border-top:1px solid var(--pv-line-soft)}
.wd-fig{display:flex;align-items:baseline;justify-content:space-between;gap:var(--pv-s-1);margin:0;font-size:.72rem;line-height:1.35;color:var(--pv-ink-3)}
.wd-v{flex:none;font-size:.95rem;font-weight:800;letter-spacing:-.01em;color:var(--pv-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.wd-foot{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:var(--pv-s-1);min-height:44px}
.wd-tags{display:flex;flex-wrap:wrap;gap:4px;min-width:0}
@media (prefers-reduced-motion:reduce){.wd-li{transition:none}}
/* 検索欄（見出しのすぐ下）・結果の見出し・見つからないときの押せるもの。入力欄は枠いっぱい（どこを押しても入力できる） */
.wd-search{position:relative;display:flex;align-items:stretch;gap:var(--pv-s-1);max-width:640px;min-height:56px;margin:var(--pv-s-3) auto 0;padding:0 8px 0 0;background:var(--pv-surface);border:1px solid var(--pv-line);border-radius:var(--pv-r);box-shadow:var(--pv-shadow);text-align:left}
.wd-search:focus-within{border-color:var(--pv-accent);outline:2px solid var(--pv-accent);outline-offset:2px;box-shadow:var(--pv-shadow-lift)}
.wd-search-ic{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--pv-ink-3);pointer-events:none}
/* ⚠️ 16px を下げない（iOS は 16px 未満の入力欄に触れるとページごと拡大して戻らない。2026-08-27 実測）。
   ブラウザの消すボタン（×）は隠さない ── 指の画面では「検索だけを消す」ただ1つの手段。隠すのは下の2か所だけ（どちらも消す字が無い時か、
   別の × が並ぶ時） */
.wd-search-in{flex:1;min-width:0;padding:0 4px 0 48px;background:none;border:0;outline:none;font:inherit;font-size:1.0625rem;line-height:1.4;color:var(--pv-ink);text-overflow:ellipsis;appearance:none;-webkit-appearance:none}
.wd-search-in::placeholder{color:var(--pv-ink-3)}
/* マウスの画面で地域の札（×つき）が欄に出ている時だけ、ブラウザの × を出さない（×が2つ並ぶと、どちらが何を消すか分からない ── WP-dd-9）。
   検索の字は Esc か「絞り込みを解除」で消える。指の画面・札の無い時は今までどおり */
@media (hover:hover) and (pointer:fine){.wd-search:has(.wd-scope:not([hidden])) .wd-search-in::-webkit-search-cancel-button{display:none}}
/* 欄が空のあいだ（例の字が出ている時）は、消す字が無い。ブラウザは見えない × の場所を空けたままにして例の字を「…」で切るので、その間だけ畳む */
.wd-search-in:placeholder-shown::-webkit-search-cancel-button{display:none}
/* いちばん狭い画面（〜360px）は虫めがねを少し左へ寄せ、例の字（英語 «Search by airline or country»）が 320px でも切れない幅を空ける */
@media (max-width:360px){.wd-search-ic{left:14px}.wd-search-in{padding:0 0 0 42px}}
.wd-scope{flex:none;align-self:center;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border-radius:999px;border:1px solid var(--pv-accent-line);background:var(--pv-accent-soft);color:var(--pv-accent-ink);font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;transition:transform .18s var(--pv-ease),opacity .18s var(--pv-ease)}
.wd-clear,.wd-else-b{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border-radius:var(--pv-r-sm);border:1px solid var(--pv-line);background:var(--pv-surface);color:var(--pv-ink-2);font:inherit;font-size:.78rem;font-weight:700;cursor:pointer;transition:transform .18s var(--pv-ease),opacity .18s var(--pv-ease)}
.wd-else-n{font-weight:500;color:var(--pv-ink-3);font-variant-numeric:tabular-nums}
.wd-else{display:contents}
.wd-scope[hidden],.wd-clear[hidden],.wd-else-b[hidden],#wd-none[hidden]{display:none}
.wd-scope:hover,.wd-clear:hover,.wd-else-b:hover{transform:translateY(-1px)}
.wd-scope:focus-visible,.wd-clear:focus-visible,.wd-else-b:focus-visible{outline:2px solid var(--pv-accent);outline-offset:2px}
.wd-scope:active,.wd-clear:active,.wd-else-b:active{transform:translateY(0) scale(.97)}
.wd-rh{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--pv-s-1);margin-left:auto}
.wd-rh-name{margin:0;font-size:.95rem;font-weight:800;letter-spacing:-.01em;color:var(--pv-ink)}
.wd-rh-name:focus{outline:none}
.wd-rh-name:focus-visible{outline:2px solid var(--pv-accent);outline-offset:2px}
.wd-rh-n{font-size:.8rem;color:var(--pv-ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.wd-empty-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--pv-s-1);margin-top:var(--pv-s-2)}
.wd-q #wd-explore{display:none}
/* 古い地図の上の一言（地図の中に置く ＝ 地図と一緒に隠れる：打っているあいだ・?q= で開いた時・台本が動かない時 ── WP-dd-9） */
.wd-map-hint{margin:0;padding:10px 12px 8px;text-align:center;font-size:.85rem;line-height:1.5;color:var(--pv-ink-2)}
/* 盆の「レベリング比較」を押した直後は、押した所に図が来ても、マウスが本当に動くまで図の吹き出しを出さない（pv-directory.js の calm） */
#lvl-wa-tip.wd-calm{display:none}
@media (pointer:coarse){.wd-scope,.wd-clear,.wd-else-b{min-height:44px}}
@media (prefers-reduced-motion:reduce){.wd-scope,.wd-clear,.wd-else-b{transition:none}}
/* 比べる印（カードの足もとの右）── WP-dmap-10：小さなチェックから、はっきりした切り替えのボタンへ（押す前「＋ 比較」・押した後「✓ 比較中」。
   押したかは aria-pressed、見える字はこの規則が入れ替える）。押せる高さは 44px・見える丸い札は 32px（::before が描く）。
   足せない時（aria-disabled）は灰色に加えて、なぜかを持つ（aria-describedby ＝ 比較リストの決まりの行・title ── 台本が書く） */
/* ★2026-10-29 オーナー「各カードの比較のボタンがわかりづらいからもう少し大きく」── 字 14px・見える札も 44px いっぱい・緑の縁と字（押す前）／
   緑の塗りと白い字（押した後）。字は「＋ 比較に追加」／「✓ 比較中」（gen-directory.mjs の WORDS） */
.wd-cmp{position:relative;isolation:isolate;flex:none;display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:44px;min-width:128px;margin-right:-2px;padding:0 16px;border:0;background:none;color:var(--pv-accent-ink);font:inherit;font-size:.875rem;font-weight:800;line-height:1;white-space:nowrap;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform .18s var(--pv-ease)}
.wd-cmp::before{content:"";position:absolute;inset:0;z-index:-1;border:1.5px solid color-mix(in oklab,var(--pv-accent) 70%,var(--pv-surface));border-radius:999px;background:var(--pv-surface);box-shadow:0 1px 2px color-mix(in oklab,var(--pv-accent-dark) 10%,transparent)}
.wd-cmp-on{display:none}
.wd-cmp[aria-pressed="true"]{color:#fff}
.wd-cmp[aria-pressed="true"]::before{border-color:var(--pv-accent-dark);background:var(--pv-accent-dark)}
.wd-cmp[aria-pressed="true"] .wd-cmp-on{display:inline}
.wd-cmp[aria-pressed="true"] .wd-cmp-off{display:none}
.wd-cmp:hover{color:var(--pv-accent-ink);transform:translateY(-1px)}
.wd-cmp:hover::before{border-color:var(--pv-accent);background:var(--pv-accent-soft)}
.wd-cmp[aria-pressed="true"]:hover{color:#fff}
.wd-cmp[aria-pressed="true"]:hover::before{border-color:var(--pv-accent-dark);background:var(--pv-accent-dark)}
.wd-cmp:focus-visible{outline:none}
.wd-cmp:focus-visible::before{outline:2px solid var(--pv-accent);outline-offset:2px}
.wd-cmp:active{transform:scale(.97)}
.wd-cmp[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.wd-cmp[aria-disabled="true"]{color:var(--pv-ink-2)}
.wd-cmp[aria-disabled="true"]::before{border-color:var(--pv-line);box-shadow:none}
.wd-cmp[aria-disabled="true"]:hover,.wd-cmp[aria-disabled="true"]:active{color:var(--pv-ink-2);transform:none}
.wd-cmp[aria-disabled="true"]:hover::before{border-color:var(--pv-line);background:var(--pv-surface)}
/* 比較リスト（#wd-tray）── WP-dmap-10（オーナー：チェックを付けた会社は右に社名が出る・検索で絞って足せる）。行と候補は台本が作る。
   狭い画面（〜1000px）：画面の下に貼りつく盆（1社から）。畳んだ形 ＝ 1行（題・何社目か・次の1手だけ）／開いた形（is-open）＝ 行・欄を開くボタン・
   決まりの行・2つのボタン。「＋ 会社を追加」は下から出る板（is-adding：決まりの行・欄と候補だけ）。広い画面（1001px〜）：カードの右に貼りつくリスト
   （#wd-body.is-list。台本が付ける ＝ 台本が動かない時はカードが横いっぱいのまま）。0社でも出て、欄はいつもリストの中 */
.wd-tray{position:sticky;bottom:var(--pv-s-2);z-index:40;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;margin-top:var(--pv-s-2);padding:6px 8px 6px 14px;background:var(--pv-surface);border:1px solid var(--pv-line);border-radius:var(--pv-r);box-shadow:var(--pv-shadow-lift)}
.wd-tray[hidden],.wd-cl-close[hidden],.wd-cl-empty[hidden],.wd-cl-opts[hidden],.wd-cl-none[hidden],.wd-cl-why[hidden]{display:none}
.wd-cl-head{position:relative;display:flex;align-items:center;gap:8px;min-width:0;min-height:44px}
.wd-cl-tt{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;min-width:0}
.wd-cl-h{margin:0;font-size:.9rem;font-weight:800;letter-spacing:-.01em;line-height:1.3;color:var(--pv-ink);white-space:nowrap}
.wd-tray-n{font-size:.8rem;font-weight:700;line-height:1.3;color:var(--pv-ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
/* ★2026-10-29 オーナー「したの比較するボタンもわかりづらい」── 畳んだ盆（狭い画面）に、選んだ会社の略号を札で並べる（何が入っているかが1行で分かる）。
   札は台本（tray()）が cmp から作る・読み上げには出さない（行と数は今までどおり）。開いた盆と広い画面のリストは行が社名を持つので出さない */
.wd-tray-chips{display:none}
.wd-tray-chip{display:inline-flex;align-items:center;gap:4px;min-height:24px;padding:0 6px;border:1px solid var(--pv-line);border-radius:999px;background:var(--pv-surface-2);font:800 10.5px/1 Inter,sans-serif;letter-spacing:.01em;color:var(--pv-ink)}
.wd-tray-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ac,var(--pv-accent))}
.wd-cl-fold,.wd-cl-close,.wd-cl-x{flex:none;display:inline-grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:999px;background:none;color:var(--pv-ink-2);cursor:pointer;transition:transform .18s var(--pv-ease)}
.wd-cl-fold,.wd-cl-close{margin-left:auto}
.wd-cl-fold::after{content:"";position:absolute;inset:0}   /* 題の行のどこを押しても開く・畳む */
.wd-cl-fold svg{transition:transform .22s var(--pv-ease)}
.wd-tray.is-open .wd-cl-fold svg{transform:rotate(180deg)}
.wd-cl-close,.wd-cl-x{position:relative}
.wd-cl-close::before,.wd-cl-close::after,.wd-cl-x::before,.wd-cl-x::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.6px;border-radius:1px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}
.wd-cl-close::after,.wd-cl-x::after{transform:translate(-50%,-50%) rotate(-45deg)}
.wd-cl-fold:hover,.wd-cl-close:hover{color:var(--pv-ink);background:var(--pv-surface-2)}
.wd-cl-x{color:var(--pv-ink-3)}
.wd-cl-x:hover{color:var(--pv-ink);background:var(--pv-surface)}
.wd-cl-body{grid-column:1 / -1;display:flex;flex-direction:column;gap:10px;min-height:0}
.wd-cl-empty{margin:0;font-size:.8rem;line-height:1.6;color:var(--pv-ink-2);word-break:keep-all;overflow-wrap:anywhere}
.wd-tray-list{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.wd-tray-list:empty{display:none}
/* 行と候補の頭はカードと同じ2段：上 ＝ ロゴ（左）と ×／略号（右）・下 ＝ 社名。社名に行の横幅を全部渡す
   （ロゴの横に並べていた頃は、リストの幅で「シンガポール航／空」「キャセイパシフィッ／ク」と語の途中で折れ、国旗だけが1行目に残っていた）。
   社名の折り方はカードの社名（.wd-name）と同じ決まり ＝ keep-all・最後の手は「…」・行末の「）」を詰めて測らない */
.wd-cl-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"logo x" "t t";align-items:center;gap:4px 8px;padding:8px 4px 8px 10px;border-radius:var(--pv-r-sm);background:var(--pv-surface-2)}
.wd-logo.wd-cl-logo{grid-area:logo;height:24px}
.wd-logo.wd-cl-logo .pvg-logo{--lg-h:24px;padding:2px 5px}
.wd-cl-row > .wd-cl-x{grid-area:x;margin:-6px 0}   /* 押せる広さ（36px）はそのまま・上の段の高さはロゴの 24px */
.wd-cl-t{grid-area:t;display:flex;flex-direction:column;gap:2px;min-width:0;padding-right:6px}
.wd-cl-name{min-width:0;font-size:.84rem;font-weight:700;line-height:1.35;color:var(--pv-ink);word-break:keep-all;overflow-wrap:normal;text-spacing-trim:space-all;overflow:hidden;text-overflow:ellipsis}
.wd-cl-note{font-size:.72rem;line-height:1.45;color:var(--pv-ink-3);word-break:keep-all;overflow-wrap:anywhere}
/* 会社を足す欄（ページの検索と同じ道具で候補を出す。字は 16px を下げない ── iOS が拡大して戻らない） */
.wd-cl-add{display:flex;flex-direction:column;gap:6px;min-height:0}
.wd-cl-q{box-sizing:border-box;width:100%;min-height:44px;padding:0 12px;border:1px solid var(--pv-line);border-radius:var(--pv-r-sm);background:var(--pv-surface);color:var(--pv-ink);font:inherit;font-size:16px;line-height:1.4;outline:none;appearance:none;-webkit-appearance:none}
.wd-cl-q::placeholder{color:var(--pv-ink-3)}
.wd-cl-q:hover{border-color:var(--pv-accent-line)}
.wd-cl-q:focus,.wd-cl-q:focus-visible{border-color:var(--pv-accent);box-shadow:0 0 0 3px var(--pv-accent-soft)}
.wd-cl-opts{margin:0;padding:4px;list-style:none;max-height:272px;overflow:auto;overscroll-behavior:contain;border:1px solid var(--pv-line);border-radius:var(--pv-r-sm);background:var(--pv-surface);box-shadow:var(--pv-shadow)}
.wd-cl-opt{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"logo oc" "name name";align-items:center;gap:3px 8px;min-height:40px;padding:6px 8px;border-radius:8px;cursor:pointer;transition:transform .14s var(--pv-ease)}
.wd-cl-opt > .wd-cl-name{grid-area:name}
.wd-cl-opt:hover{background:var(--pv-surface-2)}
.wd-cl-opt[aria-selected="true"]{background:var(--pv-accent-soft)}
.wd-cl-opt:active{transform:scale(.99)}
.wd-cl-opt[aria-disabled="true"]{cursor:default}
.wd-cl-opt[aria-disabled="true"]:not(.is-on){opacity:.5;cursor:not-allowed}
.wd-cl-oc{grid-area:oc;font-size:.7rem;font-weight:700;color:var(--pv-ink-3);white-space:nowrap}
.wd-cl-opt.is-on .wd-cl-oc{color:var(--pv-accent-ink)}
.wd-cl-none{margin:0;padding:4px 2px;font-size:.8rem;line-height:1.5;color:var(--pv-ink-3)}
/* 決まりの行（ページに1つ）と、段の無い社の理由。押せない物を押すと強める（is-ping。次に何か変わると戻る） */
.wd-cl-rule,.wd-cl-why{margin:0;font-size:.74rem;line-height:1.55;color:var(--pv-ink-3);word-break:keep-all;overflow-wrap:anywhere}
.wd-cl-rule.is-ping,.wd-cl-why.is-ping{font-weight:700;color:var(--pv-ink)}
/* 2つのボタン（と、狭い画面の「＋ 会社を追加」）。押せない時は灰色の面（aria-disabled。「航空会社を比較」は行き先も外れる） */
.wd-cl-acts{display:flex;align-items:center;gap:8px;min-width:0}
.wd-cl-open,.wd-tray-two,.wd-tray-lvl{flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 14px;border-radius:var(--pv-r-sm);border:1px solid var(--pv-line);background:var(--pv-surface);color:var(--pv-ink);font:inherit;font-size:.82rem;font-weight:700;white-space:nowrap;text-decoration:none;cursor:pointer;transition:transform .18s var(--pv-ease),opacity .18s var(--pv-ease)}
.wd-tray-two,.wd-tray-lvl{border-color:var(--pv-accent-dark);background:var(--pv-accent-dark);color:#fff}
.wd-tray-two::after{content:"→";margin-left:5px;font-weight:800}
.wd-tray.is-two .wd-tray-lvl{border-color:var(--pv-line);background:var(--pv-surface);color:var(--pv-ink)}
.wd-tray .wd-tray-two[aria-disabled="true"],.wd-tray .wd-tray-lvl[aria-disabled="true"]{border-color:var(--pv-line-soft);background:var(--pv-surface-2);color:var(--pv-ink-3);cursor:not-allowed}
.wd-cl-open:hover,.wd-tray-two:not([aria-disabled="true"]):hover,.wd-tray-lvl:not([aria-disabled="true"]):hover{transform:translateY(-1px)}
.wd-cl-open:focus-visible,.wd-tray-two:focus-visible,.wd-tray-lvl:focus-visible,.wd-cl-fold:focus-visible,.wd-cl-close:focus-visible,.wd-cl-x:focus-visible{outline:2px solid var(--pv-accent);outline-offset:2px}
.wd-cl-open:active,.wd-tray-two:not([aria-disabled="true"]):active,.wd-tray-lvl:not([aria-disabled="true"]):active,.wd-cl-fold:active,.wd-cl-close:active,.wd-cl-x:active{transform:scale(.96)}
@media (pointer:coarse){.wd-cl-open,.wd-tray-two,.wd-tray-lvl{min-height:44px}.wd-cl-close,.wd-cl-x{width:44px;height:44px}.wd-cl-row > .wd-cl-x{margin:-10px 0}.wd-cl-opt{min-height:48px}}
@media (max-width:1000px){
  .wd-tray:not(.is-open):not(.is-adding) .wd-tray-chips:not(:empty){display:inline-flex;flex-wrap:wrap;gap:4px}
  .wd-tray:not(.is-open):not(.is-adding) .wd-cl-tt:has(.wd-tray-chips:not(:empty)){column-gap:0;flex:1 1 auto}
  .wd-tray:not(.is-open):not(.is-adding) .wd-cl-head:has(.wd-tray-chips:not(:empty)){gap:0}
  .wd-tray:not(.is-open):not(.is-adding) .wd-cl-tt:has(.wd-tray-chips:not(:empty)) :is(.wd-cl-h,.wd-tray-n){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .wd-tray:not(.is-open):not(.is-adding) .wd-cl-acts > .is-main{min-height:48px;padding:0 14px;font-size:.9rem}
  .wd-tray:not(.is-open):not(.is-adding) .wd-cl-body{display:none}
  .wd-tray:not(.is-open):not(.is-adding) .wd-cl-acts > :not(.is-main){display:none}
  .wd-tray:not(.is-adding) .wd-cl-add{display:none}
  .wd-tray.is-open{padding:6px 12px 12px 14px}
  .wd-tray.is-open .wd-cl-head,.wd-tray.is-open .wd-cl-acts{grid-column:1 / -1}
  .wd-tray.is-open .wd-cl-body{max-height:min(44vh,340px);overflow:auto;overscroll-behavior:contain}
  .wd-tray.is-open .wd-cl-acts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .wd-tray.is-open .wd-cl-open{grid-column:1 / -1}
  .wd-tray.is-open .wd-cl-acts > *{min-width:0;padding:4px 10px;white-space:normal;text-align:center;line-height:1.2}
  /* 下から出る板（決まりの行・欄と候補だけ）。ページは後ろで止める（html.wd-lock）。暗い幕は ::before・板の地は ::after（幕が板の地の上に来ない並び） */
  .wd-tray.is-adding{position:fixed;top:12vh;right:0;bottom:0;left:0;z-index:260;display:flex;flex-direction:column;align-items:stretch;gap:10px;margin:0;padding:8px 16px calc(16px + env(safe-area-inset-bottom));border:0;border-radius:var(--pv-r-lg) var(--pv-r-lg) 0 0;background:transparent;box-shadow:none;animation:wd-cl-in .2s var(--pv-ease)}
  .wd-tray.is-adding::before{content:"";position:fixed;inset:0;z-index:-1;background:color-mix(in oklab,var(--pv-navy) 55%,transparent)}
  .wd-tray.is-adding::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--pv-surface);box-shadow:var(--pv-shadow-lift)}
  .wd-tray.is-adding .wd-cl-body,.wd-tray.is-adding .wd-cl-add{flex:1;min-height:0;max-height:none}   /* 候補は板の下まで（開いた盆の高さの上限を板に持ち込まない） */
  .wd-tray.is-adding :is(.wd-cl-empty,.wd-tray-list,.wd-cl-acts,.wd-cl-fold){display:none}
  /* 決まりの行は板の中でも出す（欄の上）。押せない候補を指で押すと、ここが強まり、段の無い社なら理由の行も出る
     （板の中で隠していた頃は、灰色の候補を押しても何も起きなかった ── 指には title が出ない） */
  .wd-tray.is-adding :is(.wd-cl-rule,.wd-cl-why){order:-1}
  .wd-tray.is-adding .wd-cl-opts{flex:0 1 auto;max-height:none;min-height:0}
}
@media (min-width:1001px){
  #wd-body.is-list{display:grid;grid-template-columns:minmax(0,1fr) 296px;column-gap:var(--pv-s-3);align-items:start}
  #wd-body.is-list > #airline-grid,#wd-body.is-list > #no-results{grid-column:1}
  #wd-body.is-list > #wd-tray{grid-column:2;grid-row:1 / span 2;position:sticky;top:88px;bottom:auto;display:flex;flex-direction:column;align-items:stretch;gap:12px;max-height:calc(100vh - 104px);margin:0;padding:16px}
  .wd-cl-fold,.wd-cl-open,.wd-cl-close{display:none}
  .wd-cl-body{overflow:auto;overscroll-behavior:contain;margin:0 -6px;padding:2px 6px}
  .wd-cl-acts{display:grid;gap:8px}
  .wd-cl-acts .wd-tray-two,.wd-cl-acts .wd-tray-lvl{min-height:44px}
}
/* 1001〜1279px（左のメニューが出てカードの箱がいちばん狭い幅）はリストを少し細く・カードの最小幅を少し小さく ＝ カードは2列のまま
   （リストを足す前は3列。リストに 296px を渡すと1列になっていた） */
@media (min-width:1001px) and (max-width:1279px){
  #wd-body.is-list{grid-template-columns:minmax(0,1fr) 264px;column-gap:var(--pv-s-2)}
  #wd-body.is-list > #airline-grid{grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
}
@keyframes wd-cl-in{from{opacity:0}}
html.wd-lock{overflow:hidden;overflow-anchor:none}
@media (prefers-reduced-motion:reduce){.wd-cmp,.wd-cl-fold,.wd-cl-fold svg,.wd-cl-close,.wd-cl-x,.wd-cl-opt,.wd-cl-open,.wd-tray-two,.wd-tray-lvl{transition:none}.wd-tray.is-adding{animation:none}}
/* /PV-DIR-DATA */
/* ── wam: 地図と地域のまとめ（directory-map の持ち場。地域のまとめの下の段 05b の規則は、この塊の後ろの自分の印の中）── */
.wam{container-type:inline-size;container-name:wam;max-width:1280px;margin:0 auto var(--pv-s-2);padding:0 20px}
/* 1枚の面（見本 sketch-v4 の地）：切り替え・地図・カードを載せる。広い画面は地図の右にカード（340px）・切り替えは面の右上、
   700〜999px は地図の下にカード・切り替えは地図の左下（海の上）、それより狭い画面は 切り替え → 地図 → カード（カードは選ぶか触れるまで閉じている） */
.wam-g{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:start;padding:12px;border:1px solid var(--pv-line);border-radius:var(--pv-r-lg);background:radial-gradient(120% 90% at 88% 0%,var(--pv-accent-soft) 0%,transparent 55%),radial-gradient(90% 80% at 0% 100%,var(--pv-line-soft) 0%,transparent 60%),var(--pv-surface);box-shadow:0 1px 2px color-mix(in oklab,var(--pv-accent-dark) 7%,transparent),0 14px 36px -16px color-mix(in oklab,var(--pv-accent-dark) 22%,transparent)}
[data-theme="dark"] .wam-g{box-shadow:var(--pv-shadow)}
.wam-card{display:flex;flex-direction:column;gap:var(--pv-s-1);min-width:0;padding:12px 2px 0;border-top:1px solid var(--pv-line-soft);scroll-margin:86px 0 16px}
/* 700〜999px：カードは地図の下・中は2列（額の行｜散らばり）── 横いっぱいに伸ばすと、札と額が 700px 離れる */
@container wam (min-width:700px){
  .wam-g{padding:14px 16px}
  .wam-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px;align-content:start}
  .wam-h,.wam-cond{grid-column:1 / -1}
  .wam-panel .wam-sps{margin-top:0}
}
@container wam (min-width:1000px){
  .wam-panel{display:block}
  .wam-panel .wam-sps{margin-top:6px}
  .wam-g{grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"map sw" "map card";gap:10px 32px;padding:14px 24px 10px 18px}   /* 上下を詰めて、1440×780 で面が丸ごと最初の1画面に入る（WP-dmap-7） */
  .wam-mc{grid-area:map;align-self:center}
  .wam-card{grid-area:card;padding:0;border-top:0}
}
.wam-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,252px),1fr));gap:var(--pv-s-1) var(--pv-s-2);align-items:start;min-width:0}
.wam-panels{display:grid;min-width:0}
.wam-panel{grid-area:1 / 1;min-width:0;visibility:hidden}   /* 9枚を1つの升に重ねる＝カードの高さが入れ替わらない */
.wam-panel.is-shown{visibility:visible}
.wam-h{margin:0;font:800 18px/1.3 Inter,'Noto Sans JP',sans-serif;letter-spacing:-.01em;color:var(--pv-ink)}
.wam-k{margin:4px 0 0;font:700 11px/1.4 Inter,'Noto Sans JP',sans-serif;letter-spacing:.04em;color:var(--pv-blue-ink)}
.wam-def{margin:2px 0 6px;font-size:12px;line-height:1.5;color:var(--pv-ink-3)}
.wam-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--pv-s-1);margin:0;padding:2px 0}
.wam-rk{min-width:0;font:600 13px/1.25 Inter,'Noto Sans JP',sans-serif;color:var(--pv-ink-2)}
.wam-n{font:700 17px/1.2 Inter,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--pv-ink-2);white-space:nowrap}
/* 選んだ職位（区域の data-pos）の行を大きく・その職位の帯だけを見せる */
.wam[data-pos="cap"] .wam-row[data-pos="cap"] .wam-rk,.wam[data-pos="fo"] .wam-row[data-pos="fo"] .wam-rk{font-weight:700;color:var(--pv-ink)}
.wam[data-pos="cap"] .wam-row[data-pos="cap"] .wam-n,.wam[data-pos="fo"] .wam-row[data-pos="fo"] .wam-n{font-size:28px;font-weight:800;letter-spacing:-.03em;color:var(--pv-accent-ink)}
/* 帯2本も1つの升に重ねる（職位を替えてもカードの高さが変わらない）。見せる1本は visibility:inherit ＝ 隠れたカードの中では隠れたまま */
.wam-sps{display:grid;min-width:0;margin:6px 0 4px}
.wam-sp{grid-area:1 / 1;min-width:0;visibility:hidden}
.wam[data-pos="cap"] .wam-sp[data-pos="cap"],.wam[data-pos="fo"] .wam-sp[data-pos="fo"]{visibility:inherit}
.wam-sp-rk{display:none;margin:8px 0 0;font:700 12px/1.3 Inter,'Noto Sans JP',sans-serif;color:var(--pv-ink-2)}   /* 台本なしで帯が2本並ぶときだけ出る */
/* 散らばりの帯（P12.101）：0 から始まる1本の目盛（右端は axisOf）・1,000万ごとの線・最低〜最高の帯・1社に1つの点・平均の印 */
.wam-track{position:relative;display:block;height:12px;margin:10px 0 4px;border-radius:999px;background:linear-gradient(90deg,var(--pv-line) 1px,transparent 1px) 0 0/calc(100% / var(--wam-n,7)) 100% repeat-x,var(--pv-bg-sub)}
.wam-track > i{position:absolute;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--pv-accent-ink);box-shadow:0 0 0 1.5px var(--pv-surface)}   /* 1社の点 */
.wam-track > .wam-band{top:1px;bottom:1px;left:var(--a);width:calc(var(--b) - var(--a));min-width:2px;height:auto;margin:0;border-radius:999px;background:var(--pv-accent-line);box-shadow:none}
.wam-track > .wam-mean{top:-4px;bottom:-4px;width:2px;height:auto;margin:0 0 0 -1px;border-radius:2px;background:var(--pv-ink);box-shadow:none}
.wam-ax{display:flex;justify-content:space-between;margin:0;font:500 10px/1.4 Inter,sans-serif;font-variant-numeric:tabular-nums;color:var(--pv-ink-3)}
.wam-mm{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--pv-s-2);margin-top:6px}
.wam-lo,.wam-hi{display:flex;flex-direction:column;min-width:0}
.wam-hi{align-items:flex-end;text-align:right}
.wam-mm-k{font-size:11px;line-height:1.4;color:var(--pv-ink-3)}
.wam-mm-v{font:800 15px/1.25 Inter,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--pv-ink);white-space:nowrap}
.wam-who{margin:2px 0 0;padding:0;list-style:none;font-size:11.5px;line-height:1.45;color:var(--pv-ink-2)}
.wam-who li{display:inline}
.wam-who li + li::before{content:'・';color:var(--pv-ink-3)}
.wam-w{display:flex;align-items:baseline;gap:6px;margin:8px 0 0;font-size:12px;line-height:1.4;color:var(--pv-ink-3)}
.wam-w-v{font-weight:700;font-variant-numeric:tabular-nums;color:var(--pv-ink)}
.wam-cond > summary{display:inline-flex;align-items:center;gap:4px;min-height:32px;list-style:none;cursor:pointer;font:600 12px/1 Inter,'Noto Sans JP',sans-serif;color:var(--pv-ink-2);transition:opacity .18s var(--pv-ease)}
.wam-cond > summary::-webkit-details-marker{display:none}
.wam-cond > summary::after{content:'';width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .18s var(--pv-ease)}
.wam-cond[open] > summary::after{transform:translateY(1px) rotate(225deg)}
.wam-cond > summary:hover{color:var(--pv-accent-ink)}
.wam-cond > summary:focus-visible{outline:2px solid var(--pv-accent);outline-offset:2px;border-radius:4px}
.wam-cond > summary:active{opacity:.7}
@media (pointer:coarse){.wam-cond > summary{min-height:44px}}
.wam-cl{margin:4px 0 8px;font-size:12px;line-height:1.6;color:var(--pv-ink-2)}
.wam-cl dt{margin-top:6px;font-weight:700;color:var(--pv-ink-3)}
.wam-cl dd{margin:0}
.wam-names{margin:0;padding:0;list-style:none}
.wam-names li{display:inline}
.wam-names li + li::before{content:'・';color:var(--pv-ink-3)}
@container wam (max-width:999px){.wam[data-rest="none"]:not(.is-open) .wam-card{display:none}}
/* 閉じたカード（WP-dmap-8 D1 → WP-dmap-11 で区域 1000px 未満ぜんぶへ広げた）：カードが閉じているあいだ、切り替えの右に、いま見せている地域
   （指している・選びかけ・選んだ ── 開いた時は「すべて」）の名前と選んだ職位の額（1行目）、その職位の最低と最高（2行目）だけを出す
   （シート W2「地域の名前・推定・最低〜最高を1〜2行で」）。中身はカードの札と額そのもの（新しい字も額も作らない。職位の札は読み上げにだけ残す）。
   置くのは切り替えと同じ行（地図の上 ＝ 陸に掛からない・面を高くしない）。箱はその行の右の升いっぱい（地域を替えても箱は動かない）。
   行の高さは切り替えが決める（箱は升に重ねて置き、行の上下のまんなかに寄せる ── WP-dmap-11 の直し：英語の 360px では1〜2行が3行になって切り替えより
   高く、カードを開くと行が低くなって地図が 7px 下がった。開け閉めで地図の枠を動かさない）。
   台本が動いて切り替えが見えているときだけ（台本なしは <noscript> の規則のまま）。
   地図に触れるか地域を選ぶと、カードは地図の下の部分に重なる板として開く（is-open ── 下の wam-stage の塊の「カードが開いた時」の規則。地図の枠は動かない）。
   地図の濃さは職位ごとに 0〜1 で塗るので、職位を替えて変わるのが見えるのはこの額 */
@container wam (max-width:999px){
  .wam[data-rest="none"]:not(.is-open) .wam-g:has(> .wam-pos:not([hidden])){grid-template-columns:auto minmax(0,1fr);align-items:center}
  .wam[data-rest="none"]:not(.is-open) .wam-g:has(> .wam-pos:not([hidden])) > .wam-mc{grid-column:1 / -1}
  .wam[data-rest="none"]:not(.is-open) .wam-g:has(> .wam-pos:not([hidden])) > .wam-card{display:block;position:absolute;grid-row:1 / 2;grid-column:2 / 3;left:0;right:0;top:50%;transform:translateY(-50%);min-width:0;padding:0;border-top:0}   /* 線を両端とも書く（重ねて置く箱の auto の端は面の縁になる） */
  .wam[data-rest="none"]:not(.is-open) .wam-g:has(> .wam-pos:not([hidden])) :is(.wam-cols,.wam-panels){display:block}
  .wam[data-rest="none"]:not(.is-open) .wam-g:has(> .wam-pos:not([hidden])) :is(.wam-panel:not(.is-shown),.wam-k,.wam-def,.wam-cond,.wam-row,.wam-sp-rk,.wam-track,.wam-ax,.wam-who,.wam-w){display:none}
  .wam[data-rest="none"]:not(.is-open) .wam-g:has(> .wam-pos:not([hidden])) .wam-panel.is-shown{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-end;column-gap:8px}
  .wam[data-rest="none"]:not(.is-open) .wam-g:has(> .wam-pos:not([hidden])) .wam-panel.is-shown .wam-est{display:contents}
  .wam[data-rest="none"]:not(.is-open) .wam-g:has(> .wam-pos:not([hidden])) .wam-h{font-size:13px;font-weight:700;color:var(--pv-ink-2)}
  .wam[data-rest="none"][data-pos="cap"]:not(.is-open) .wam-g:has(> .wam-pos:not([hidden])) .wam-row[data-pos="cap"],
  .wam[data-rest="none"][data-pos="fo"]:not(.is-open) .wam-g:has(> .wam-pos:not([hidden])) .wam-row[data-pos="fo"]{display:block;padding:0}
  .wam[data-rest="none"]:not(.is-open) .wam-g:has(> .wam-pos:not([hidden])) .wam-rk{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .wam[data-rest="none"]:not(.is-open) .wam-g:has(> .wam-pos:not([hidden])) .wam-row .wam-n{font-size:20px}
  .wam[data-rest="none"]:not(.is-open) .wam-g:has(> .wam-pos:not([hidden])) .wam-sps{flex:0 0 100%;margin:1px 0 0}
  .wam[data-rest="none"]:not(.is-open) .wam-g:has(> .wam-pos:not([hidden])) .wam-mm{flex-wrap:wrap;justify-content:flex-end;gap:0 8px;margin:0}   /* 狭い幅（320px・英語の円）では最低と最高が2行に */
  .wam[data-rest="none"]:not(.is-open) .wam-g:has(> .wam-pos:not([hidden])) :is(.wam-lo,.wam-hi){flex-direction:row;align-items:baseline;gap:4px}
  .wam[data-rest="none"]:not(.is-open) .wam-g:has(> .wam-pos:not([hidden])) .wam-mm-k{font-size:10.5px}
  .wam[data-rest="none"]:not(.is-open) .wam-g:has(> .wam-pos:not([hidden])) .wam-mm-v{font-size:11.5px;font-weight:700}
}
@media (prefers-reduced-motion:reduce){.wam-cond > summary,.wam-cond > summary::after{transition:none}}
/* 「機長｜副操縦士」の切り替え（P12.100）── hidden で出荷し、台本が動いたときだけ見せる。押した方（aria-pressed）が区域の data-pos を決める。
   面の先頭の子（地図の上の1行 ── 区域 1000px 未満は、右に閉じたカードの1〜2行が並ぶ）・1000px 以上は面の右上の升（カードの上）。
   ダークでは押した方を緑の面と縁で塗る（字の色だけの違いにしない ── リード P12.112） */
.wam-card{position:relative}
.wam-pos{display:inline-flex;align-self:start;justify-self:start;gap:2px;padding:3px;border-radius:999px;background:var(--pv-bg-sub);box-shadow:inset 0 0 0 1px var(--pv-line)}
.wam-pos[hidden]{display:none}
.wam-pb{min-height:32px;padding:0 12px;border:0;border-radius:999px;background:transparent;color:var(--pv-ink-2);font:600 12.5px/1 Inter,'Noto Sans JP',sans-serif;white-space:nowrap;cursor:pointer;transition:transform .18s var(--pv-ease)}
.wam-pb:hover{color:var(--pv-ink)}
.wam-pb:focus-visible{outline:2px solid var(--pv-accent);outline-offset:2px}
.wam-pb:active{transform:scale(.97)}
.wam-pb[aria-pressed="true"]{background:var(--pv-surface);color:var(--pv-accent-ink);box-shadow:var(--pv-shadow)}
[data-theme="dark"] .wam-pb[aria-pressed="true"]{background:var(--pv-accent-soft);box-shadow:inset 0 0 0 1px var(--pv-accent-line)}
@media (pointer:coarse){.wam-pb{min-height:44px}}
@media (prefers-reduced-motion:reduce){.wam-pb{transition:none}.wam-pb:active{transform:none}}
/* 700〜999px の切り替えは、WP-dmap-7 から地図の左下に重ねていた（地図が箱の比のままだった頃）。WP-dmap-11 で地図が画面を埋めるようになり、
   切り替えはスマホと同じ地図の上の行に戻した（陸に掛からないのは assert-directory-ui.mjs の map-fit／map-first の onLand が見る） */
@container wam (min-width:1000px){.wam-pos{grid-area:sw;justify-self:end}}
/* 地域の9つのボタン（DM3）── 見た目はここ1か所（NEED-10）。押した見た目は [aria-pressed="true"] だけ。
   820px までは小さめのボタンで折り返す（WP-dmap-9・オーナー #8「切れないようにして」── 前は1本の横にすべる列で、右の端が切れていた） */
#region-strip{display:flex;gap:var(--pv-s-1);margin:0 0 var(--pv-s-2)}
@media (min-width:821px){#region-strip{flex-wrap:wrap}}
#region-strip .rstrip-btn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:1px solid var(--pv-line);border-radius:999px;background:var(--pv-surface);color:var(--pv-ink-2);font:600 13px/1 Inter,'Noto Sans JP',sans-serif;white-space:nowrap;cursor:pointer;transition:transform .18s var(--pv-ease)}
#region-strip .rstrip-n{font-weight:500;font-size:12px;color:var(--pv-ink-3);font-variant-numeric:tabular-nums}
#region-strip .rstrip-btn:hover,#region-strip .rstrip-btn.is-hot{border-color:var(--pv-accent-line);background:var(--pv-accent-soft);color:var(--pv-ink)}
#region-strip .rstrip-btn:hover{transform:translateY(-1px)}
#region-strip .rstrip-btn:focus-visible{outline:2px solid var(--pv-accent);outline-offset:2px}
#region-strip .rstrip-btn:active{transform:scale(.97)}
#region-strip .rstrip-btn[aria-pressed="true"]{border-color:var(--pv-accent-dark);background:var(--pv-accent-dark);color:#fff}
#region-strip .rstrip-btn[aria-pressed="true"] .rstrip-n{color:#fff;opacity:.8}
@media (max-width:820px){#region-strip{flex-wrap:wrap;gap:6px}#region-strip .rstrip-btn{flex:none;min-height:40px;padding:0 10px;gap:5px;font-size:12.5px}}
/* 横にすべる帯の端（WP-dmap-8 D2）：続きが在る側の端をうすく消す（字は足さない）。どちらの端かは台本が data-edge に書く（l・r・l r）。
   WP-dmap-9 から地域のボタンはどの幅でも折り返す（すべらない ＝ 台本は data-edge を書かない）。盆の社名の札の列（.wd-tray-list）も WP-dmap-10 で
   縦に並ぶ行になった（すべらない）── この3行は、帯が横にすべる形に戻った時のために残してある */
#region-strip[data-edge="r"]{-webkit-mask-image:linear-gradient(90deg,black calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,black calc(100% - 40px),transparent)}
#region-strip[data-edge="l"]{-webkit-mask-image:linear-gradient(90deg,transparent,black 40px);mask-image:linear-gradient(90deg,transparent,black 40px)}
#region-strip[data-edge="l r"]{-webkit-mask-image:linear-gradient(90deg,transparent,black 40px,black calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent,black 40px,black calc(100% - 40px),transparent)}
/* 折り返す幅（821px から）で2行になるときは、半分（5つ目の後ろ）で行を変える ── 最後の行に1つだけ残さない（英語の 1001 で「Latin America」だけが
   2行目だった）。付けるのは台本（is-bal ＝ そのままでは2行になる時だけ）。行のあいだは1行ぶんの間隔のまま（見えない区切りの行が1つ入るので半分ずつ） */
#region-strip.is-bal{row-gap:calc(var(--pv-s-1) / 2)}
#region-strip.is-bal::after{content:"";flex-basis:100%;order:1}
#region-strip.is-bal .rstrip-btn:nth-child(n+6){order:2}
/* スマホの幅で3行になるときは3つずつ（WP-dmap-9。最後の行に1つだけ残さない ── 前は「中南米」だけが3行目）。付けるのは台本（is-bal3） */
#region-strip.is-bal3{row-gap:3px}
#region-strip.is-bal3::before{content:"";flex-basis:100%;order:1}
#region-strip.is-bal3::after{content:"";flex-basis:100%;order:3}
#region-strip.is-bal3 .rstrip-btn:nth-child(n+4){order:2}
#region-strip.is-bal3 .rstrip-btn:nth-child(n+7){order:4}
@media (pointer:coarse){#region-strip .rstrip-btn{min-height:44px}}
@media (prefers-reduced-motion:reduce){#region-strip .rstrip-btn{transition:none}#region-strip .rstrip-btn:hover,#region-strip .rstrip-btn:active{transform:none}}
/* ── wam-map ── */
/* 点で描く地図（P12.100・見本 sketch-v4）。色は pv-tokens.css だけ（ライトとダークの両方）：淡い緑 --wam-lo 〜 濃い緑 --wam-hi。
   ダークでは高い方ほど明るい緑（--pv-teal）＝ 光って見える。光る層の色 --wam-glow（ダークはいちばん高い地域より明るくするため、
   --pv-teal に文字の色 --pv-ink を少し混ぜる）・まわりの光の濃さ --wam-aura */
.wam{--wam-lo:var(--pv-accent-line);--wam-hi:var(--pv-accent-dark);--wam-glow:var(--pv-accent);--wam-aura:.2}
[data-theme="dark"] .wam{--wam-hi:var(--pv-teal);--wam-glow:color-mix(in oklab,var(--pv-teal) 72%,var(--pv-ink));--wam-aura:.18}
.wam-mc{min-width:0}
.wam-map{aspect-ratio:1000 / 446;scroll-margin-top:86px;position:relative;touch-action:pan-y;-webkit-user-select:none;user-select:none}   /* 地図の箱（directory-map.mjs の VIEWBOX）と同じ比。ボタンの置き場（relative）・1本の指はページのスクロール（WP-dmap-9） */
/* 区域 1000px 未満は、地図を面の縁から縁まで（面の内側の余白 12px の外まで ── WP-dmap-9「スマホで見ると小さい」）。
   枠の高さは wam-stage の塊が決める（WP-dmap-11：最初の1画面を埋める） */
@container wam (max-width:999px){.wam-map{margin:0 -12px}}
.wam-svg{display:block;width:100%;height:100%;overflow:visible;-webkit-tap-highlight-color:transparent}
/* 塗りの決まり（D10）：点の見た目は地域の <g> に付けて path が受け継ぐ。.wam-land を名指す規則で fill / stroke を決めない
   （<use> の写しがそれを持ってしまい、光る層・当たりの層が自分の線を持てなくなる） */
.wam-r{fill:none;stroke:var(--wam-hi);stroke:color-mix(in oklab,var(--wam-hi) calc(var(--t,.5) * 100%),var(--wam-lo));stroke-width:3.7;stroke-linecap:round;stroke-dasharray:0 5.2;pointer-events:none}
.wam[data-pos="cap"] .wam-r{--t:var(--c)}
.wam[data-pos="fo"] .wam-r{--t:var(--f)}
.wam-nl{fill:none;stroke:var(--pv-ink-3);stroke-opacity:.22;stroke-width:3.1;stroke-linecap:round;stroke-dasharray:0 5.2;pointer-events:none}
/* 当たり（点と点のあいだも答える太い透明な線）。日本の大きい丸は指のときだけ */
.wam-hit{fill:transparent;stroke:none;pointer-events:all;cursor:pointer}
.wam-hl use{fill:none;stroke:transparent;stroke-width:5.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:stroke}
.wam-hl .wam-hit-n{cursor:auto}
.wam-hit-t{pointer-events:none}
@media (pointer:coarse){.wam-hit-t{pointer-events:all}}
/* 光る層（P12.102）：指した・押した・選んだ地域の点が明るくなり、まわりがほのかに光る。動くのは opacity だけ */
.wam-ol{pointer-events:none}
.wam-halo,.wam-lit{fill:none;opacity:0;pointer-events:none;stroke-linecap:round;stroke-linejoin:round;transition:opacity .45s var(--pv-ease)}
.wam-halo{stroke:var(--wam-glow);stroke-opacity:var(--wam-aura);stroke-width:11}
.wam-lit{stroke:var(--wam-glow);stroke-width:4.3;stroke-dasharray:0 5.2}
.wam-o.is-hot .wam-halo,.wam-o.is-hot .wam-lit{opacity:.8}
.wam-svg:has(.wam-hit:active) .wam-o.is-hot .wam-lit{opacity:1}
.wam-o.is-on .wam-halo,.wam-o.is-on .wam-lit{opacity:1}
.wam-ring{fill:none;stroke:var(--pv-accent-ink);stroke-width:1;stroke-dasharray:2 3;opacity:.45;pointer-events:none;transition:opacity .45s var(--pv-ease)}
.wam-o.is-hot .wam-ring,.wam-o.is-on .wam-ring{opacity:1}
/* 地図の下の1行：一言（左）と凡例（右）。凡例は選んでいる職位の1本だけ（8地域の平均のいちばん低い所〜高い所） */
.wam-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;margin-top:6px}
.wam-hint{margin:0;font:500 12px/1.5 Inter,'Noto Sans JP',sans-serif;color:var(--pv-ink-3)}
/* 指の画面では出さない：一言は「クリック」の言葉（WP-dmap-7）。指は触れたらその場で選ぶ（2026-10-29 から ── pv-directory.js） */
@media (pointer:coarse){.wam-hint{display:none}}
.wam-key{display:none;align-items:center;gap:8px;margin:0 0 0 auto;font:600 11px/1.4 Inter,'Noto Sans JP',sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--pv-ink-2)}
.wam[data-pos="cap"] .wam-key[data-pos="cap"],.wam[data-pos="fo"] .wam-key[data-pos="fo"]{display:inline-flex}
.wam-kb{display:block;flex:none;width:72px;height:6px;border-radius:999px;background:linear-gradient(90deg,var(--wam-lo),var(--wam-hi));background:linear-gradient(in oklab 90deg,var(--wam-lo),var(--wam-hi))}
@media (prefers-reduced-motion:reduce){.wam-halo,.wam-lit,.wam-ring{transition:none}}
/* 動かせる地図（WP-dmap-9・オーナー「地図自体を自分で動かせるようにしたい（windy みたいに）」）。動くのは地図の層を包む g.wam-z の
   transform だけ（台本が書く）。ボタンで拡大・縮小する時だけ滑らかに（動きを減らす設定では瞬時）。拡大しているあいだは枠の外を切る。
   ページの中の指：2本は台本が地図に使う・1本は1倍のあいだページのスクロール（pan-y）、拡大しているあいだは地図のもの（.is-z ── WP-dmap-11 W6） */
.wam-z{transform-origin:0 0}
.wam-z.is-glide{transition:transform .32s var(--pv-ease)}
.wam-map.is-z{overflow:hidden;cursor:grab;touch-action:none}   /* 拡大しているあいだは1本の指も地図（WP-dmap-11 W6）── 1倍に戻ればページのスクロール */
.wam-map.is-drag,.wam-map.is-drag .wam-hit{cursor:grabbing}
.wam-map:focus{outline:none}
.wam-map:focus-visible{outline:2px solid var(--pv-accent);outline-offset:2px}
/* 拡大・縮小・元に戻す：地図の枠の右の縁の、丸いボタンの縦の列（WP-dmap-11 W3・windy の右の列）。どの画面も 44px。置くのは右上 ── 右の縁の
   まんなかから下はニューギニア・オーストラリア・ニュージーランドの陸。右上の2つ（1倍の時の 拡大・縮小）が覆う緯度で陸がいちばん右まで来るのは
   カムチャツカ（箱の x 858 ＋ 点の半径 1.85）と日本（x 853）。スマホの幅では世界が枠の幅いっぱい（x 860 ＝ 幅の 86%）なので、右の余白 10px のままだと
   幅 400px 未満で列がその点に掛かった（WP-dmap-11 のチェッカー：360×640 で日本の点が2つ）。だから右の余白は「幅の 14% − 46px」（10px まで・2px より狭くしない）
   ＝ 列の左の縁がいつも x 860 より 2px 右（360 で 4.4px・375 で 6.5px・390 で 8.6px・400px からは 10px）。縦は枠の上から 106px まで ── 枠の上の海の帯の中か、
   その緯度（x 860 より右に陸の無い所）。どの大きさでも陸の点に掛からないことは assert-directory-ui.mjs の onLand が見る（切り替えの箱と一緒に） */
.wam-zc{position:absolute;right:clamp(2px,14cqi - 46px,10px);top:10px;z-index:2;display:flex;flex-direction:column;gap:8px}
.wam-zc[hidden],.wam-zb[hidden],.wam-zh[hidden]{display:none}
.wam-zb{position:relative;display:block;width:44px;height:44px;padding:0;border:1px solid var(--pv-line);border-radius:50%;background:var(--pv-surface);color:var(--pv-ink-2);box-shadow:var(--pv-shadow);cursor:pointer;transition:transform .18s var(--pv-ease)}
.wam-zb:hover{color:var(--pv-ink);border-color:var(--pv-accent-line)}
.wam-zb:focus-visible{outline:2px solid var(--pv-accent);outline-offset:2px}
.wam-zb:active{transform:scale(.94)}
.wam-zb[aria-disabled="true"]{color:var(--pv-ink-3);cursor:default}
.wam-zb[aria-disabled="true"]:active{transform:none}
/* 印は線だけで描く（地図の塊に <svg> を足さない ── M16）。＋ − ・まるい矢印 */
.wam-zb::before,.wam-zb::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;border-radius:1px;background:currentColor}
.wam-zb[data-z="in"]::after{width:2px;height:14px;margin:-7px 0 0 -1px}
.wam-zb[data-z="out"]::after,.wam-zb[data-z="reset"]::after{display:none}
.wam-zb[data-z="reset"]::before{width:12px;height:12px;margin:-7px 0 0 -7px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;background:none}
.wam-zb[data-z="reset"]::after{display:block;width:0;height:0;margin:-9px 0 0 1px;border:4px solid transparent;border-left-color:currentColor;border-radius:0;background:none}
/* 指で触れた最初の1回だけ「2本の指で動かせます」（字は塊の中・出し入れは台本・消えるのは動きの終わり） */
.wam-zh{position:absolute;left:50%;top:50%;z-index:2;max-width:calc(100% - 32px);margin:0;padding:8px 14px;border-radius:999px;background:color-mix(in oklab,var(--pv-ink) 84%,transparent);color:var(--pv-bg);font:600 13px/1.4 Inter,'Noto Sans JP',sans-serif;text-align:center;pointer-events:none;opacity:0;transform:translate(-50%,-50%)}
.wam-zh.is-on{animation:wam-zh 2.4s var(--pv-ease) both}
@keyframes wam-zh{0%{opacity:0}12%{opacity:1}80%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.wam-z.is-glide,.wam-zb{transition:none}.wam-zh.is-on{animation-timing-function:steps(1,end)}}
/* 板（区域 1000px 未満で開いたカード ── 下の wam-stage の塊）の閉じるボタン。カードの先頭・hidden で出荷・台本が地図を動かす時だけ hidden を外す。
   見えるのは板の時だけ（ほかの形のカードには出さない）。印は線（×）── 地図の塊に <svg> を足さない（M16）。地の色を持つ。
   置き場所は板のいちばん上の、× と同じ高さ（44px）の地域の名前の行の中（その行は板の中をスクロールしても上に貼りつき、地の色を持つ ── 下の is-open の規則）。
   スクロールした中身はその行の下を通り、× の下は通らない（前は × が行より 15px 下まで出ていて、額や社名が × の下を通った ── チェッカー2 の GAP A。
   assert-directory-ui.mjs の map-tap の板の行・class A：開いた時・半分・終わりで × の箱がどの字にも掛からない） */
.wam-sx{display:none;position:absolute;top:0;right:4px;z-index:2;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--pv-surface);color:var(--pv-ink-2);cursor:pointer;transition:transform .18s var(--pv-ease)}
.wam-sx:hover{color:var(--pv-ink);background:var(--pv-bg-sub)}
.wam-sx:focus-visible{outline:2px solid var(--pv-accent);outline-offset:-4px}
.wam-sx:active{transform:scale(.94)}
.wam-sx::before,.wam-sx::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;margin:-1px 0 0 -8px;border-radius:1px;background:currentColor;transform:rotate(45deg)}
.wam-sx::after{transform:rotate(-45deg)}
@keyframes wam-sheet{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.wam-sx{transition:none}.wam-sx:active{transform:none}}
/* ── /wam-map ── */
.wam-slot{display:none;min-width:0}
/* ── wam-stage（WP-dmap-11・オーナー「ケータイ画面の次のキャリアを選択するの文字デカすぎ。なんなら最初の画面はこの部分いらないでしょ。
   最初にもう地図どん。windy みたいに。」）── 最初の1画面 ＝ ヘッダーの下から画面の下の縁まで（.wd-stage・100dvh − ヘッダー）を、
   上の帯（検索欄 #wa-hero）・地図（#wd-explore：切り替えの行・地図の枠・凡例）・下の帯（地域のボタンと結果の数 #filter-bar）の3段で埋める。
   地図の枠は残った高さを全部もらい、世界は枠の中に1倍で丸ごと（縦の余りは静かな海）。帯は地図に重ねない段 ＝ 陸はいつも上の帯と下の帯のあいだ
   （assert-directory-ui.mjs の map-first・class A）。効くのは、台本が地図を動かしている時（拡大のボタンの列が見えている ＝ .wam-zc:not([hidden])）で、
   検索していない時（html.wd-q でない）だけ。台本なし・検索中は今までどおり上から並ぶ（検索中は地図が消え、帯・地域のボタン・結果の見出しのすぐ下にカード）。
   区域 1000px 未満でカードが開く（is-open）と、カードは地図の下の部分に重なる板になる（面も地図の枠も動かない ── 下の is-open の規則）。
   見出し（h1）は帯の先頭で .wd-vh（ページの本当の見出しのまま・読み上げる）。社数の1行（.wd-lede）は面の下 */
.wd-stage{padding-top:var(--pv-topbar,71px)}   /* 固定のヘッダーの下から（前は見出しの帯の padding 110px） */
#wa-hero{padding:16px 20px 12px}
.wd-band{max-width:1280px;margin:0 auto}
#wa-hero .wd-search{margin:0 auto}
.wd-lede{margin:var(--pv-s-3) auto var(--pv-s-1);font-size:.85rem;line-height:1.6;color:var(--pv-ink-3)}
.wd-q .wd-lede{display:none}
html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])){display:flex;flex-direction:column;box-sizing:border-box;min-height:100vh;min-height:100dvh;border-bottom:1px solid var(--pv-line);background:radial-gradient(120% 70% at 85% 0%,var(--pv-accent-soft) 0%,transparent 55%),var(--pv-surface)}
html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) #wa-hero{flex:none;padding:8px 12px 6px}
html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) #wa-hero .wd-search{max-width:none;min-height:50px}
html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) #wd-explore{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) .wam{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;max-width:none;margin:0;padding:0}
html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) .wam-g{flex:1 1 auto;min-height:0;grid-template-rows:auto 1fr;align-items:stretch;padding:0 12px;border:0;border-radius:0;background:none;box-shadow:none}
html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) .wam-g > .wam-pos{align-self:center}
html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) .wam-g > .wam-mc{align-self:stretch;display:flex;flex-direction:column;min-height:0}
/* 地図の枠：残った高さを全部もらう（下限 ＝ 世界の高さ。区域いっぱいの幅で 1000 / 446）。svg は枠いっぱいに重ねる（position:absolute）──
   svg そのものの高さ（幅 × 箱の比）を枠の中身の高さにしない。中身の高さを持つと、面は「100dvh より高い中身」として下へ伸び、
   横に広くて縦が短い画面（1024×690）で下の帯が最初の1画面の外へ押し出される（実際に踏んだ） */
html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) .wam-map{flex:1 1 auto;aspect-ratio:auto;min-height:calc(100cqi * .446)}
html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) .wam-svg{position:absolute;inset:0}
html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) .wam-foot{flex:none;margin:2px 0 4px}
html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) .wam-key{flex:1 1 auto;margin:0}
html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) .wam-kb{flex:1 1 auto;width:auto;min-width:72px}   /* 凡例は横いっぱいの細い帯（シート W4） */
html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) #filter-bar{flex:none;max-width:none;margin:0;padding:8px 12px;border-top:1px solid var(--pv-line-soft)}
html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) #region-strip{margin:0 0 4px}
html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) #region-strip .rstrip-btn{padding:0 10px;gap:5px;font-size:12.5px}   /* 下の帯の小さめのボタン（シート W4「compact」） */
@media (max-width:480px){html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) #region-strip{gap:5px}html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) #region-strip .rstrip-btn{padding:0 8px;gap:4px;font-size:12px}html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) #region-strip .rstrip-n{font-size:11px}}
/* 下にもっと在る印（シート W5「112社 ↓」）：結果の見出しの行の後ろに下向きの小さな山（字は足さない）。
   「絞り込みを解除」はこの行には出さない（WP-dmap-11 の直し）── 地域を選ぶとこの行に 40〜44px のボタンが増えて下の帯が 17〜21px 高くなり、
   その分だけ地図が縮んで世界が動いた（選ぶと同時に開く板の後ろで地図が動く）。最初の1画面では、すぐ上の「すべて」のボタンと検索欄の中の地域の札が
   同じことをする。検索中（html.wd-q）と見つからない時の「絞り込みを解除」はそのまま */
html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) #wd-rh{justify-content:center;margin:0}
html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) #wd-rh::after{content:"";order:1;align-self:center;width:7px;height:7px;margin:0 2px 4px;border-right:2px solid var(--pv-ink-3);border-bottom:2px solid var(--pv-ink-3);transform:rotate(45deg)}
html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) #wd-rh .wd-clear{display:none}
/* 区域 700〜999px（iPad の横向き 1024×690 など、横に広くて縦が短い画面）：地図の枠の下限は世界の高さの 8 割（それより低い時だけ世界も縮む）。
   世界は 1倍で丸ごと枠の中のまま（下の帯を最初の1画面の外へ押し出さない） */
@container wam (min-width:700px) and (max-width:999px){
  html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) .wam-map{min-height:calc(100cqi * .446 * .8)}
}
/* 区域 1000px 未満でカードが開いた時（is-open ── 地図に指で触れた・地域を選んだ）：カードは下から出る板（シート W2「bottom sheet」・WP-dmap-11 の直し）。
   板は地図の枠と凡例の升（面の 2 行目）の下の縁に置き、地図の下の部分に重なる。地図の枠の大きさも位置も変えない・ページを動かさない・下の帯はそのまま
   （前は枠が世界の高さまで縮み、面が下へ伸びてページが動き、触れた地域が指の下から 200px 離れた ── チェッカーの GAP 1）。
   高さは中身まで、ただし升の高さ − 114px まで（枠の上から 10 ＋ 44 ＋ 8 ＋ 44 ＝ 106px の拡大・縮小の列に掛からない ── 拡大しているあいだだけ出る
   「元に戻す」は小さい画面では板の下になる。縮小で戻れる）。中だけがスクロールする（指の端末では、下の「小さい形」の規則で中身は名前と2つの額だけ）。
   右上の × と Esc で閉じる（切り替えの右の1〜2行に戻る）。× は板のいちばん上の地域の名前の行の中 ── 行は × と同じ高さ（44px・板の上の余白は 0 にして
   その分を行に回した ＝ 名前の字の位置は前と同じ）で、上に貼りつき地の色を持つ。中身はこの行の下を通るので、× がどの字にも掛からない（チェッカー2 の GAP A）。
   1行目の高さは開いても閉じても切り替えの高さ（閉じたカードの1〜2行は行の高さを決めない ── 上の「閉じたカード」の規則）＝ 開け閉めで地図が上下しない */
@container wam (max-width:999px){
  html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) .wam.is-open .wam-card{position:absolute;grid-row:2 / 3;grid-column:1 / -1;left:-12px;right:-12px;bottom:0;z-index:3;box-sizing:border-box;max-height:calc(100% - 114px);gap:0;padding:0 14px;border:1px solid var(--pv-line);border-bottom:0;border-radius:var(--pv-r-lg) var(--pv-r-lg) 0 0;background:var(--pv-surface);box-shadow:0 -1px 2px color-mix(in oklab,var(--pv-accent-dark) 6%,transparent),0 -18px 40px -20px color-mix(in oklab,var(--pv-accent-dark) 28%,transparent);animation:wam-sheet .2s var(--pv-ease) both}
  html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) .wam.is-open .wam-cols{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:8px}
  html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) .wam.is-open .wam-h{position:sticky;top:0;z-index:1;display:flex;align-items:center;box-sizing:border-box;min-height:44px;padding-right:40px;background:var(--pv-surface)}   /* 板の中をスクロールしても地域の名前の行は上に残る。高さは × と同じ 44px（× はこの行の中） */
  html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) .wam.is-open .wam-sx:not([hidden]){display:block}
  /* ★2026-10-29 オーナー「表示が大きすぎる」── 板は小さい形：地域の名前の行（× ）・「掲載◯社の推定年収の平均」の1行・機長と副操縦士の額を横に2つ。
     散らばりの帯・最低と最高・条件/出典は板に出さない（絞った会社は下のカードそのもの。広い画面のカードには今までどおり全部ある）。
     板は地図の下の縁に貼りつき、高さは中身まで（約 120px ── 前は地図の下半分を覆っていた）。
     小さい形は指で触る端末だけ（any-pointer:coarse）── マウスの狭い画面（左のメニューが出る 1001px など）は今までどおり全部を出す */
  @media (any-pointer:coarse){
    html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) .wam.is-open .wam-card{padding:0 14px 10px}
    html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) .wam.is-open :is(.wam-k,.wam-sps,.wam-cond){display:none}
    html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) .wam.is-open .wam-cols{padding-bottom:0}
    html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) .wam.is-open .wam-panel{display:block}
    html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) .wam.is-open .wam-h{font-size:16px}
    html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) .wam.is-open .wam-est{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px}
    html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) .wam.is-open .wam-def{grid-column:1 / -1;margin:0 0 4px}
    html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) .wam.is-open .wam-row{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;padding:0}
    html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) .wam.is-open .wam-rk{font-size:12px}
    html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) .wam.is-open .wam-n,
    html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) .wam.is-open .wam-row .wam-n{font-size:20px;letter-spacing:-.02em}
  }
  html[data-theme="dark"]:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) .wam.is-open .wam-card{box-shadow:0 -1px 0 var(--pv-line),0 -18px 40px -16px rgba(0,0,0,.55)}
}
@media (prefers-reduced-motion:reduce){html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) .wam.is-open .wam-card{animation:none}}
@container wam (min-width:1000px){
  html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) .wam-g{grid-template-rows:auto minmax(0,1fr);padding:10px 24px 4px 18px}
  html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) .wam-map{min-height:calc((100cqi - 414px) * .446)}   /* 地図の列の幅（区域 − 余白 42 − カード 340 − 間 32）で 1000 / 446 */
  html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) .wam-card{min-height:0;overflow:auto}
}
@media (min-width:768px){
  html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) #wa-hero{padding:10px 24px 6px 18px}
  html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) #wa-hero .wd-search{max-width:560px;margin:0}
  /* 地域のボタンと結果の数を1行に（入らない幅では結果の数が次の行へ回り、ボタンは横いっぱいの1行のまま） */
  html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) #filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;padding:8px 24px 8px 18px}
  html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) #region-strip{flex:1 1 auto;min-width:0;margin:0}
  html:not(.wd-q) .wd-stage:has(.wam-zc:not([hidden])) #wd-rh{flex:none;margin-left:auto}
}
/* ── /wam-stage ── */
/* ── /wam ── */
/* スペイン語のページ（2026-11-02・多言語化）：表示の切り替え（Lista de tarjetas ／ Comparación normalizada）が英語より長く、
   幅 320〜360px で横にはみ出した。スペイン語のページだけ、ボタンを詰めて折り返す（日英には効かない） */
html[lang^="es"] .view-toggle{flex-wrap:wrap;max-width:100%}
html[lang^="es"] .view-btn{padding:8px 10px}
/* 並べ替え（2026-11-03・オーナー「a-z・年収順（上→下・下→上）・よく見られている順にできるようにして」）──
   表示の切り替えと同じ行の右（広い画面はカードの列の右端にそろえる ＝ 右の比較リストの上に出さない）。狭い画面は次の行に折り返す。
   触れる画面と狭い画面は字を 16px（iOS が触れた瞬間に拡大しない ── assert-header.mjs の 7） */
.wd-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--pv-s-1) var(--pv-s-2)}
.wd-sort{position:relative;display:inline-flex;align-items:center;gap:var(--pv-s-1);max-width:100%;min-width:0;margin-left:auto;font-size:.8125rem;font-weight:600;color:var(--pv-ink-2)}
.wd-sort-l{flex:none;white-space:nowrap}
.wd-sort[hidden]{display:none}
.wd-sort-in{appearance:none;-webkit-appearance:none;min-height:40px;min-width:0;max-width:100%;flex:0 1 auto;padding:0 34px 0 14px;text-overflow:ellipsis;border:1px solid var(--pv-line);border-radius:10px;background:var(--pv-surface);color:var(--pv-ink);font:inherit;font-size:.875rem;font-weight:600;cursor:pointer;box-shadow:var(--pv-shadow);transition:transform .2s var(--pv-ease)}
.wd-sort-ic{position:absolute;right:12px;top:50%;width:12px;height:12px;margin-top:-6px;pointer-events:none;color:var(--pv-ink-3)}
.wd-sort-in:hover{border-color:var(--pv-accent-line);transform:translateY(-1px)}
.wd-sort-in:focus-visible{outline:2px solid var(--pv-accent);outline-offset:2px}
.wd-sort-in:active{transform:scale(.98)}
@media (pointer:coarse),(max-width:820px){.wd-sort-in{font-size:16px}}
@media (min-width:1001px){html:has(#wd-body.is-list) .wd-bar{padding-right:calc(1.25rem + 296px + var(--pv-s-3))}}
@media (min-width:1001px) and (max-width:1279px){html:has(#wd-body.is-list) .wd-bar{padding-right:calc(1.25rem + 264px + var(--pv-s-2))}}
@media (prefers-reduced-motion:reduce){.wd-sort-in{transition:none}.wd-sort-in:hover,.wd-sort-in:active{transform:none}}