/* 主要5社の会社ページの最上部 ── 社名の行（.pvg-hero）と、給与・勤務・待遇・暮らし（.pvg）。
   書くのは gen-airline-glance.mjs。ここは見た目だけ。

   ・色はトークンだけ（pv-tokens.css）。会社の色は HTML が --pvg-c で渡す。
   ・段組みは「画面の幅」ではなく「箱の幅」で決める（@container pvg）。
     左メニューが出る 1001px で箱がいちばん狭くなるので、画面の幅で切ると狭い箱に広い段組みが入る。
   ・.pvg と .pvg-hero の外には1つも書かない（ほかの107社のページに効かせない）。
   ⚠️ 直したら node gen-airline-glance.mjs（HTML が読む ?v= を付け直す）。 */

/* ── 社名の行（写真を置かない）──────────────────────── */
.hero-airline.pvg-hero{
  padding:86px 0 10px!important;margin-bottom:0!important;
  background:none!important;overflow:visible;
}
.pvg-hero .pvg-id{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
/* 社名と、その下の拠点・星は1つの箱（ボタンの列はこの箱の右か下 ── 下の「タブのある会社ページ」の ★2026-10-26） */
.pvg-hero .pvg-who{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.pvg-hero .pvg-name{
  display:grid;grid-template-columns:minmax(0,auto) auto 1fr;align-items:center;column-gap:10px;row-gap:2px;
  padding-left:12px;border-left:3px solid var(--pvg-c,var(--pv-accent));
}
.hero-airline.pvg-hero h1{
  margin:0;font-size:22px!important;line-height:1.2!important;font-weight:800;letter-spacing:-.03em;
  color:var(--pv-ink)!important;background:none!important;
  -webkit-background-clip:border-box!important;background-clip:border-box!important;
  -webkit-text-fill-color:currentColor!important;
  overflow-wrap:anywhere;
}
.pvg-hero .pvg-code{
  justify-self:start;padding:2px 8px;border-radius:7px;
  font:700 12px/1.4 Inter,sans-serif;letter-spacing:.08em;
  color:var(--pv-ink-2);background:var(--pv-surface);border:1px solid var(--pv-line);
}
/* 1行に入らない幅では2行まで（途中で「…」と切らない） */
.pvg-hero .pvg-sub{
  grid-column:1/-1;margin:0;font-size:12.5px;line-height:1.5;color:var(--pv-ink-3)!important;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.pvg-hero .pvg-meta{display:flex;flex-wrap:wrap;align-items:center;gap:2px 14px;min-height:26px;padding-left:15px}
/* 社名の下の星の欄は、読む前（—）・読んでいる最中・答えが来た後で、同じ大きさを取る（高さ 44px ＝ 答えの押せる行の高さ・
   幅 170px ＝ 答えの行が入る幅。狭い画面で答えが次の行へ回るなら、読む前から次の行に居る）。
   大きさが変わると、下のタブの帯が開いた直後に 44px 下がって 26px 上がり、「暮らし・家族」を押した指が帯の外に落ちて
   タブが切り替わらなかった（2026-10-18 実測・WP-polish-b B2）。読んでいる最中の骨組みは、ここでは幅が 0 で見えていなかった。 */
.pvg-hero .crl[data-live="stars"]{min-height:44px;min-width:min(170px,100%)}
.pvg-hero .crl[data-live="stars"][data-state="loading"] .crl-sk{display:none}
.pvg-hero .pvg-base{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--pv-ink-2)}
.pvg-hero .pvg-base b{font:700 12px/1 Inter,sans-serif;letter-spacing:.06em;color:var(--pv-ink)}
.pvg-hero .pvg-base .pvg-ic{color:var(--pvg-c,var(--pv-accent))}
/* 星と実件数。0件のときは言葉を畳み、「匿名で口コミを書く」だけを残す（見本の点数を混ぜない） */
.pvg-hero .crl{display:flex;align-items:center;gap:10px;font-size:13px;line-height:1.4}
.pvg-hero .crl[data-state="empty"] .crl-msg{display:none}
/* 「評価未取得」「n件の評価」は語の途中で折らない（狭い画面で「評価未取｜得」と割れていた） */
.pvg-hero .crl .crl-cnt{white-space:nowrap}
.pvg-hero .crl .crl-score{margin:0}
.pvg-hero .crl .crl-foot{margin:0;padding:0;border:0}
.pvg-hero .crl .crl-link{position:relative;min-height:26px;font-size:12.5px}
/* 行の丈は詰めたまま、押せる範囲だけ 44px にする（上は社名の行で、押せるものが無い。下は比較のボタンに掛けない） */
.pvg-hero .crl .crl-link::after{content:"";position:absolute;inset:-14px 0 -4px}
/* 読めない時：社名の行では色の板を外して1行にする。
   板と 44px のボタンのままだと行が 55px 伸び、スマホで「暮らし」が最初の1画面から落ちる。
   見える丈は 26px・押せる範囲は見えない面で 44px（上の「口コミを書く」と同じ作り）。 */
.pvg-hero .crl[data-state="error"]{flex-wrap:nowrap;justify-content:flex-start;gap:8px;padding:0;background:none}
.pvg-hero .crl[data-state="error"] .crl-msg{font-size:12px;white-space:nowrap}
.pvg-hero .crl .crl-retry{position:relative;min-height:26px;padding:0 10px;font-size:12.5px;white-space:nowrap}
.pvg-hero .crl .crl-retry::after{content:"";position:absolute;inset:-16px -1px -4px}
.pvg-hero .pvg-acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pvg-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;
  border-radius:999px;border:1px solid var(--pv-cta-dark);
  font-size:13px;font-weight:700;letter-spacing:.02em;text-decoration:none;white-space:nowrap;
  color:var(--pv-cta-dark-ink);background:var(--pv-cta-dark);
  position:relative;transition:transform .25s var(--pv-ease);
}
/* 浮いたときの影は別の面に持たせて、濃さだけを動かす（動かすのは transform と opacity だけ） */
.pvg-btn::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;box-shadow:var(--pv-shadow-lift);opacity:0;transition:opacity .25s var(--pv-ease)}
.pvg-btn:hover{background:var(--pv-cta-dark-hover);transform:translateY(-1px)}
.pvg-btn:hover::after{opacity:1}
.pvg-btn:active{transform:translateY(0) scale(.98)}
.pvg-btn:focus-visible{outline:2px solid var(--pv-accent);outline-offset:2px}
.pvg-btn-ghost{color:var(--pv-ink);background:var(--pv-surface);border-color:var(--pv-line)}
.pvg-btn-ghost:hover{background:var(--pv-surface-2);border-color:var(--pv-ink-3)}
/* 2行の入口「Give & Get／…」の形は、ここには無い ── サイト共通の pv-gg.css（2026-10-08 オーナーのご指示）。
   字を書くのは gen-airline-glance.mjs（評価の1枚）・career-live.js（給与の1枚）・airline-reviews-ui.js（口コミの錠前）。
   上の行を小さく・薄くする指定や、左寄せ・四角い角をここへ足し戻さない。
   下の1行だけは、古い部品が手元に残っている人のため（共有の JS は最大4時間ぶん古い）── 2行が横に並ばないようにする。 */
.pvg-gg > span{display:block}
@media (min-width:700px){
  .hero-airline.pvg-hero{padding:92px 0 12px!important}
  .hero-airline.pvg-hero h1{font-size:26px!important}
  .pvg-hero .pvg-id{grid-template-columns:minmax(0,1fr) auto;column-gap:24px;row-gap:6px;align-items:center}
  .pvg-hero .pvg-acts{grid-column:2;grid-row:1;grid-template-columns:auto auto;align-self:center}
  .pvg-hero .pvg-sub{font-size:13px}
}
@media (max-width:640px){
  .hero-airline.pvg-hero{padding:78px 0 2px!important}
  .pvg-hero .pvg-id,.pvg-hero .pvg-who{gap:4px}
  /* スマホでは1行に入りきらず途中で切れるので出さない（同じ中身は下の「会社」の欄に在る）。
     ⚠️ 要素は消さない ── airline-base.js が検索向けの説明をここから読む */
  .pvg-hero .pvg-sub{display:none}
  /* 拠点と星を1行に収める（2行に割れると、最初の1画面から「暮らし」が押し出される） */
  .pvg-hero .pvg-meta{gap:2px 10px}
  .pvg-hero .crl .crl-score{gap:2px 6px}
  .pvg-hero .crl .crl-stars{font-size:14px}
  .pvg-hero .crl .crl-avg{font-size:16px}
}

/* ── 土台 ───────────────────────────────────────────── */
.pvg{
  --pvg-gap:8px;--pvg-pad:16px;
  container:pvg/inline-size;display:block;margin-top:8px!important;
  color:var(--pv-ink);font-size:14px;line-height:1.6;
}
.pvg *,.pvg *::before,.pvg *::after{box-sizing:border-box}
.pvg p,.pvg h2,.pvg h3,.pvg ul,.pvg ol,.pvg dl,.pvg dd,.pvg figure{margin:0;padding:0}
.pvg ul,.pvg ol{list-style:none}
.pvg-vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pvg-ic{flex:none;width:16px;height:16px}
.pvg-ic-s{width:14px;height:14px}

/* 面は3段：下地（ページ）→ 箱（.pvg-card）→ 浮いた板（.pvg-panel） */
.pvg-card{
  position:relative;min-width:0;padding:var(--pvg-pad);
  background:var(--pv-surface);border:1px solid var(--pv-line);border-radius:var(--pv-r-lg);
  box-shadow:var(--pv-shadow);
}
.pvg-hd{display:flex;align-items:center;gap:8px;min-width:0}
.pvg-ico{
  flex:none;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:9px;
  color:var(--pv-accent-ink);background:var(--pv-accent-soft);
}
.pvg-eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;line-height:1.4;color:var(--pv-ink-2)}
.pvg-hsub{margin-left:auto;font-size:12px;color:var(--pv-ink-3)}
.pvg-chip{
  margin-left:auto;padding:1px 9px;border-radius:999px;font-size:12px;font-weight:600;line-height:1.5;
  color:var(--pv-ink-2);background:var(--pv-bg-sub);border:1px solid var(--pv-line-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pvg-k{font-size:12px;font-weight:600;line-height:1.45;color:var(--pv-ink-3)}
.pvg-note{font-size:12px;line-height:1.5;color:var(--pv-ink-3)}
.pvg-k,.pvg-note{text-wrap:pretty}
.pvg-lead .pvg-k{text-wrap:balance}
.pvg-none{color:var(--pv-ink-3)}
.pvg-tag{
  display:inline-block;margin-left:5px;padding:0 5px;border-radius:6px;vertical-align:.14em;
  font-size:12px;font-weight:700;letter-spacing:.04em;line-height:1.5;
  color:var(--pv-gold-ink);background:var(--pv-gold-soft);border:1px solid var(--pv-gold-line);
}
.pvg-tag-q{color:var(--pv-ink-3);background:var(--pv-bg-sub);border-color:var(--pv-line-soft);letter-spacing:0}
.pvg-yen{margin-left:2px;font-size:max(12px,.82em);font-weight:500;color:var(--pv-ink-3);white-space:nowrap}
/* 選んだ通貨が原文と同じなら、目安は同じ額の言い直しになる（AED 40,000（約AED 40K））ので出さない。
   原文に在りうる通貨のうち、切替メニューに出るのはこの2つだけ */
.pvg .pvg-yen[data-cur="AED"]:has(.pv-cur[data-cur-on="AED"]),
.pvg .pvg-yen[data-cur="USD"]:has(.pv-cur[data-cur-on="USD"]){display:none}
.pvg-orig{display:block;font:500 12px/1.5 Inter,sans-serif;letter-spacing:.01em;color:var(--pv-ink-3)}
.pvg-quiet{font-size:12.5px;line-height:1.7;color:var(--pv-ink-3)}

/* ── 棒（0 から始まる・どのページも同じ目盛）────────────── */
/* 目盛の線は 1,000万ごと（--pvg-n ＝ 目盛の上端を 1,000万で割った数。ページが持つ） */
.pvg-track{
  position:relative;display:block;height:6px;border-radius:999px;overflow:hidden;
  background:
    linear-gradient(90deg,var(--pv-line) 1px,transparent 1px) 0 0/calc(100% / var(--pvg-n,4)) 100%,
    var(--pv-bg-sub);
}
.pvg-bar{position:relative;display:block;height:100%;min-width:4px;border-radius:999px}
/* 棒にするのは推定年収だけ（会社が公表している金額には棒を付けない ＝ 物差しの違う額を同じ目盛に並べない） */
/* 色は深い金（2026-10-07 オーナーのご指示「黒の給与額＋深みのある金色のバー」）。会社の色にしない・濃淡を付けない。
   ダークでは同じトークンが明るい金に変わる（pv-tokens.css） */
.pvg-bar-est{background:var(--pv-star)}
.pvg-axis{margin-top:10px!important;font-size:12px;line-height:1.5;color:var(--pv-ink-3)}

/* ── いちばん上：給与／勤務・待遇・暮らし ── */
.pvg-top{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--pvg-gap);margin-top:var(--pvg-gap)}
/* 年収の段：給与の1枚（推定年収＋提出された年収）｜パイロットによる評価スコア。
   横に並ぶのは PC の概要だけ。スマホ・iPad と、給与・口コミのタブでは縦に1列（狭い列に押し込まない） */
.pvg-payrow{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--pvg-gap);margin-top:var(--pvg-gap)}
.pvg > .pvg-more-grid:first-child{margin-top:0}
.pvg-trio{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}

/* 給与 */
.pvg-pay{display:flex;flex-direction:column}
.pvg-pay{padding:10px 14px 2px}
.pvg-pay > .pvg-hd .pvg-ico{width:24px;height:24px;border-radius:8px}
/* いちばん狭い画面（320px）では、給与の見出しの絵を外して税の札に幅を渡す（札の字を「…」で切らない） */
@container pvg (max-width:289.98px){ .pvg-pay > .pvg-hd .pvg-ico{display:none} }
/* ★2026-10-25 WP-compare-all-13 F3：税の札の字を「…」で切らない（英語の「Tax-free (no personal income tax in the UAE)」・オマーンの長い字が
   スマホで途中から消えていた）。入りきらない字は札の中で折り返す（字は1つも削らない）。角の丸みは1行の札の高さの半分 ＝ 1行の札の見た目は今までと同じ。 */
.pvg-pay > .pvg-hd .pvg-chip{flex:0 1 auto;min-width:0;border-radius:11px;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:break-word;text-wrap:pretty}
.pvg-ranks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px;margin-top:4px}
/* 職位の名前が「◯◯の推定年収」まで言う（額の真上で、何の額かが読める）。
   誰の推定かの1行は、広い欄でだけ棒の下に出す ── スマホの最初の1画面は 給与 → 勤務 → 待遇 → 暮らし で埋まるので、
   同じ言葉が在る下の説明に任せる。 */
.pvg-pay > .pvg-estk{display:none;font-size:12px;line-height:1.5;color:var(--pv-ink-3)}
.pvg-rank{min-width:0;container-type:inline-size}
/* 字の大きさは職位の欄の幅で決める（いちばん狭い画面でも「副操縦士の推定年収」が1行に収まる。下限は 12px） */
.pvg-rk{font-size:13.5px;font-size:clamp(12px,9.2cqi,13.5px);font-weight:600;line-height:1.5;white-space:nowrap;color:var(--pv-ink-2)}
.pvg-rk-s{font-weight:500;color:var(--pv-ink-3)}
/* 額：読みやすい黒・太すぎない（2026-10-07 オーナーのご指示「大きすぎ・太すぎ」。800 → 600・上限 34px → 28px）。
   色は字の色のトークン ＝ ダークでは明るくなる。名前と説明は中立の色 */
.pvg-big{
  font:600 26px/1.2 Inter,'Noto Sans JP',sans-serif;font-size:clamp(20px,14cqi,28px);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--pv-ink);
}
.pvg-rank > .pvg-track{margin-top:6px}
/* 会社が公表している金額 ── 棒を付けない。左に「誰の・何の額か」、右に額 */
/* 狭い欄では、見出し＋1件1行だけ（箱の地・前提の1行・外貨の原文は、広い欄と下の説明に在る）。
   ⚠️ ここを高くすると、スマホの最初の1画面から「暮らし」が押し出される（assert-airline-glance.mjs が測っている）。 */
.pvg-pub{margin-top:6px}
/* 提出された年収のすぐ下に来る時は、線で分ける（推定・提出・会社の公表は、物差しが別） */
.pvg-rp + .pvg-pub{margin-top:12px;padding-top:10px;border-top:1px solid var(--pv-line-soft)}
.pvg-pub li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:0 12px}
.pvg-pk{font-size:12.5px;line-height:1.6;color:var(--pv-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pvg-pk b{margin-right:6px;font-weight:600;color:var(--pv-ink)}
/* ★2026-10-31 訓練生の行は名前が長い（「自社養成パイロット訓練生・大卒／高等専門学校（専攻科）卒（入社時）」）── 1行に詰めて「…」で切らず、折り返す */
.pvg-pub li[data-kind="trainee"] .pvg-pk{white-space:normal;overflow:visible;text-wrap:pretty;overflow-wrap:anywhere}
.pvg-pv{
  font:600 14px/1.4 Inter,'Noto Sans JP',sans-serif;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;color:var(--pv-ink);
}
.pvg-pn{grid-column:1 / -1;font-size:12px;line-height:1.5;color:var(--pv-ink-3);text-wrap:pretty}
.pvg-pub > .pvg-note,.pvg-pub .pvg-pn,.pvg-pub .pvg-orig{display:none}

/* 畳んだ説明（給与の「誰の・何を含んだ・いつの金額か」・就航地の残り・質問の束） */
.pvg-dt{margin-top:auto;padding-top:8px}
.pvg-dt > summary,.pvg-topic > summary{
  display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;list-style:none;
  font-size:12.5px;font-weight:600;color:var(--pv-accent-ink);border-radius:10px;
}
.pvg-dt > summary::-webkit-details-marker,.pvg-topic > summary::-webkit-details-marker{display:none}
.pvg-dt > summary .pvg-chev,.pvg-topic > summary .pvg-chev{margin-left:auto;transition:transform .25s var(--pv-ease)}
.pvg-dt[open] > summary .pvg-chev,.pvg-topic[open] > summary .pvg-chev{transform:rotate(180deg)}
/* ⚠️ 会社ページには、FAQ の「＋」を「×」にするための決まり（details[open] summary span を45度回す）が元からある。
   ここの見出しの字まで回ってしまうので、.pvg の中では打ち消す（あちらより強く書く）。 */
.pvg details[open] > summary span,.pvg-hero details[open] > summary span{transform:none;transition:none}
/* ★2026-10-29 同じ決まりは display:inline-block も付ける ── 開いた話題の札（広い箱）で、名前と「質問 N問」が横に並んで1つの字に見えていた
   （「勤務スケジュール質問 10問」）。札の名前は1行・その下に小さい字、の形に戻す（閉じた札と同じ形）。 */
.pvg details[open] > summary .pvg-tp-n{display:block}
.pvg details[open] > summary .pvg-tp-m{display:flex}
.pvg-dt > summary:hover,.pvg-topic > summary:hover{color:var(--pv-accent-dark)}
.pvg-dt > summary:focus-visible,.pvg-topic > summary:focus-visible{outline:2px solid var(--pv-accent);outline-offset:2px}
.pvg-dt > summary:active,.pvg-topic > summary:active{opacity:.75}
/* scroll-margin-top … 住所（#kyuyo-konkyo）で直接開くと、ブラウザが読み込みの終わりに自分でここへ寄せ直す。
   これが無いと頭が固定ヘッダーとタブの帯の下に潜る（pv-glance.js の near が置いた位置を上書きする。768px 以上で実測） */
.pvg-paydt{border-top:1px solid var(--pv-line-soft);margin-top:4px;padding-top:0;scroll-margin-top:140px}
.pvg-paydt .pvg-axis{margin-top:8px!important}
.pvg-body{padding:4px 0 6px}

/* 条件の一覧（箱が広ければ自分で段を増やす） */
.pvg-dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:0 20px}
.pvg-dl > div{min-width:0;padding:9px 0;border-top:1px solid var(--pv-line-soft)}
.pvg-dl dt{font-size:12px;font-weight:600;line-height:1.5;color:var(--pv-ink-3)}
/* 札の付いた見出しだけ丈が伸びて、横に並ぶ値の頭がずれるのを止める（札は行の中に収める） */
.pvg-dl dt > .pvg-tag,.pvg-stats dt > .pvg-tag{margin-left:6px;padding-block:0;line-height:16px;vertical-align:0}
.pvg-dl dd b{display:block;font-size:14px;font-weight:700;line-height:1.5;color:var(--pv-ink);overflow-wrap:anywhere}
.pvg-dl dd small{display:block;font-size:12px;line-height:1.55;color:var(--pv-ink-3)}
/* 注記の日付は途中で折らない（「2025年1月／1日」「1 January／2025」にしない）。印を付けるのは pv-glance.js の keepDates の1か所 */
.pvg-nw{white-space:nowrap}
.pvg-notes{margin-top:10px!important;display:grid;gap:4px}
.pvg-notes li{position:relative;padding-left:12px;font-size:12px;line-height:1.6;color:var(--pv-ink-3)}
.pvg-notes li::before{content:"";position:absolute;left:2px;top:.72em;width:4px;height:4px;border-radius:50%;background:var(--pv-line)}
.pvg-srcs{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-top:10px!important;font-size:12px;line-height:1.6;color:var(--pv-ink-3)}
.pvg-srcs > span{font-weight:700;letter-spacing:.08em}
.pvg-srcs small{font-size:inherit}
.pvg a.pvg-src,.pvg figcaption a{color:var(--pv-ink-2);text-decoration:underline;text-decoration-color:var(--pv-line);text-underline-offset:3px;overflow-wrap:anywhere}
.pvg a.pvg-src:hover,.pvg figcaption a:hover{color:var(--pv-accent-ink);text-decoration-color:currentColor}
.pvg a.pvg-src:focus-visible,.pvg figcaption a:focus-visible{outline:2px solid var(--pv-accent);outline-offset:2px;border-radius:4px}
.pvg a.pvg-src:active,.pvg figcaption a:active{opacity:.7}
.pvg-fx{margin-top:8px!important;font-size:12px;line-height:1.6;color:var(--pv-ink-3)}
.pvg-askh{display:flex;align-items:baseline;gap:8px;margin:14px 0 6px!important;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--pv-ink-2)}
.pvg-askh small{font-size:12px;font-weight:500;letter-spacing:0;color:var(--pv-ink-3)}
.pvg-body > .pvg-askh:first-child,.pvg-panel > .pvg-hd + .pvg-askh{margin-top:6px!important}

/* 勤務・待遇・暮らしの欄（狭い箱 ＝ 横1行。絵と名前｜条件を1つ｜開く） */
.pvg-cell{
  display:grid;grid-template-columns:46px minmax(0,1fr) 32px;align-items:center;column-gap:10px;
  padding:5px 12px;
  transition:transform .25s var(--pv-ease);
}
.pvg-cell::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;box-shadow:var(--pv-shadow-lift);opacity:0;transition:opacity .25s var(--pv-ease)}
.pvg-cell:hover{transform:translateY(-1px);border-color:var(--pv-accent-line)}
.pvg-cell:hover::before{opacity:1}
.pvg-cell:has(.pvg-more:active){transform:scale(.995)}
.pvg-cell:has(.pvg-more:focus-visible){outline:2px solid var(--pv-accent);outline-offset:2px}
.pvg-cell.is-open{border-color:var(--pv-accent-line)}
.pvg-cell > .pvg-hd{flex-direction:column;align-items:center;gap:1px}
.pvg-cell .pvg-ico{width:26px;height:26px}
.pvg-cell .pvg-eyebrow{font-size:12px;letter-spacing:.08em;white-space:nowrap}
.pvg-lead{min-width:0}
.pvg-v{font-size:16px;font-weight:700;line-height:1.4;letter-spacing:-.01em;color:var(--pv-ink);overflow-wrap:anywhere}
.pvg-v.is-long{font-size:14.5px;letter-spacing:-.02em}
/* 見出しの補いの語（団地の名前など）。狭い箱では下の表の中だけに出す */
.pvg-opt{display:none}
.pvg-lead .pvg-note{display:none}
.pvg-also,.pvg-qs{display:none}
.pvg-more{
  display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;cursor:pointer;
  font:inherit;color:var(--pv-accent-ink);background:var(--pv-accent-soft);
}
.pvg-more > span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pvg-more::after{content:"";position:absolute;inset:0;border-radius:var(--pv-r-lg)}   /* 欄ぜんぶが押せる */
.pvg-more:focus-visible{outline:none}
.pvg-more .pvg-chev{transition:transform .25s var(--pv-ease)}
.pvg-more[aria-expanded="true"] .pvg-chev{transform:rotate(180deg)}
/* 欄に乗ると、開く向きへ矢印が少し寄る（欄ぜんぶが押せるので、乗る場所は欄） */
.pvg-cell:hover .pvg-more .pvg-chev{transform:translateY(2px)}
.pvg-cell:hover .pvg-more[aria-expanded="true"] .pvg-chev{transform:rotate(180deg) translateY(2px)}

/* 欄の中身の板 */
.pvg-panel{box-shadow:var(--pv-shadow-lift);border-color:var(--pv-accent-line)}
.pvg-panel[hidden]{display:none}
.pvg-panel > .pvg-hd{margin-bottom:4px}
.pvg-ptitle{font-size:14px;font-weight:700;color:var(--pv-ink)}
.pvg-x{
  position:relative;margin-left:auto;display:inline-grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;cursor:pointer;
  color:var(--pv-ink-2);background:var(--pv-bg-sub);transition:transform .2s var(--pv-ease);
}
.pvg-x::after{content:"";position:absolute;inset:-4px}   /* 丸は 36px のまま、押せる範囲は 44px */
.pvg-x:hover{background:var(--pv-line-soft);color:var(--pv-ink)}
.pvg-x:active{transform:scale(.94)}
.pvg-x:focus-visible{outline:2px solid var(--pv-accent);outline-offset:2px}
.pvg-ans{margin-top:4px}
.pvg-ans .crl{font-size:13px}
/* ── 勤務・訓練の面（話題ごとに1枚。淡い面と見出しで分ける。色は面の下地と見出しの印だけ） ── */
.pvg-sfs-note{margin:0 0 10px!important}
.pvg-sfs{display:grid;gap:12px}
.pvg-sf{min-width:0;padding:14px 14px 12px;border:1px solid var(--pv-line-soft);border-radius:var(--pv-r);background:var(--pv-bg-sub)}
.pvg-sf-h{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.pvg-sf-i{display:inline-flex;flex:none;color:var(--pv-accent-ink)}
.pvg-sf-i svg{width:18px;height:18px}
.pvg-sf-t{margin:0;font-size:15px;line-height:1.4;font-weight:700;letter-spacing:-.01em;color:var(--pv-ink)}
.pvg-sf-h small{font-size:12px;color:var(--pv-ink-3)}
.pvg-sf-pub > .pvg-askh,.pvg-sf-got > .pvg-askh{margin:10px 0 4px!important}
.pvg-sf-none{margin:0!important}
.pvg-sf .crl{font-size:13px}
.pvg-sf-add{display:flex;flex-wrap:wrap;gap:0 20px;margin:10px 0 0!important}
.pvg-sf-scope{margin:8px 0 0!important}
/* 「同じ条件で開きます」は、月の勤務の欄が鍵の文を出しているあいだだけ */
.crl[data-live="work"]:not([data-state="locked"]) + .pvg-sf-scope{display:none}
.pvg-sfs:has(.crl[data-live="fact"][data-quiet="1"][data-state="off"]) .pvg-sf-scope{display:none}   /* 集計の欄が「準備中」のあいだも出さない（開くものがまだ無い） */
/* 集計の欄が黙っているあいだは、その見出しも出さない（空の見出しを残さない） */
.pvg-sf-got:has(> .crl[data-live="fact"][data-quiet="1"][data-state="locked"]) > .pvg-askh{display:none}
.pvg-moved{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;margin:0 0 10px!important}
@container pvg (min-width:860px){
  .pvg-sfs{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .pvg-sf[data-sf="month"]{grid-column:1 / -1}
}

/* ── 暮らし：街の写真カード（写真 → 街の名前 → 家賃 → 空港 → 詳細）──
   ・段の数はカードの数に合わせる（箱の幅が許すのは 2／3／4／5 段まで。数は生成側が --tg-a〜d に書く）。
   ・カードは押すところ（button）。選んだ街の詳細だけが下に出る
     （切り替えるのは pv-glance.js。動かなければ、どの街の詳細も縦に並んだまま）。
   ・写真は 2:1・高さ 96〜168px に切って置く（台帳の縦横がどうであっても、箱の形は変わらない）。
   ・写真の上に重ねる色もトークンから作る（色を直に書かない）。 */
.pvg h4{margin:0;padding:0}
.pvg-liv{min-width:0}
/* 街の写真は、高さで決める（カードの数で段が変わっても、行の高さが今より高くならない）。就航地のカード（.pvg-cgrid）は今までどおり 4:3 */
.pvg-tgrid .pvg-town-ph{aspect-ratio:2/1;min-height:96px;max-height:168px}
.pvg-liv-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px}
.pvg-liv-2{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:12px}
.pvg-liv-2 > .pvg-tds{margin-top:0}
.pvg-liv > .pvg-ev{margin-top:10px}
.pvg-way-fs{display:flex;flex-wrap:wrap;gap:4px 18px}
.pvg-way-f{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px}
.pvg-way-f > b{font-size:14px;font-weight:700;line-height:1.5;font-variant-numeric:tabular-nums;color:var(--pv-ink)}
.pvg-way-f > small{font-size:12px;line-height:1.5;color:var(--pv-ink-3)}
.pvg-evl .pvg-notes li > span{margin-right:8px}
/* 移動の記録：行の名前（字のまま）と数字のあいだを空ける（「…ターミナル駅¥520」と続けて読ませない） */
[data-pvg-towns] .pvg-evl li[data-way-src] > span:first-of-type{margin-left:8px}
.pvg-evl .pvg-notes li > span[data-way-warn],.pvg-evl .pvg-notes li > span[data-ref-basis]{display:block;margin-right:0}
.pvg-refl{display:grid;gap:2px;margin-top:4px}
.pvg-refl > li{display:flex;flex-wrap:wrap;gap:0 10px}
/* 家賃の棒（都市に1組・選んだ街の詳細のとなり）。3つの列（名前・棒・額）は長さで決める（max-content にしない）
   ＝ どの間取りの組でも・どの通貨でも、棒の土台が同じ長さ。名前と額の列の長さは生成側が --rb-n・--rb-v に書く。
   スクリプトが動かなければ（data-js が無い）、全部の間取りの組が縦に並び、切り替えのボタンは出さない。 */
.pvg-rb{min-width:0;padding:14px 14px 10px;font-size:12.5px;background:var(--pv-surface-2);border:1px solid var(--pv-line);border-radius:var(--pv-r)}
.pvg-rb-hd{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px}
.pvg-rb .pvg-askh{margin:0!important}
/* 暮らしの見出し（「家賃」＋物差しの小さな字）。小さな字が1行に入らないときは次の行へ送る
   （送らないと「家賃」の2字が縦に割れる。物差しの名前が長い都市で、狭い列・狭い画面のとき） */
[data-pvg-towns] .pvg-askh{flex-wrap:wrap;row-gap:2px}
.pvg-rb-sw{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--pv-bg-sub);border:1px solid var(--pv-line-soft)}
.pvg-rb:not([data-js]) .pvg-rb-sw{display:none}
.pvg .pvg-rb-b{position:relative;min-width:44px;min-height:32px;margin:0;padding:0 12px;border:0;border-radius:999px;background:none;cursor:pointer;
  font:700 12.5px/1 Inter,'Noto Sans JP',sans-serif;color:var(--pv-ink-2);-webkit-tap-highlight-color:transparent;transition:transform .2s var(--pv-ease)}
.pvg-rb-b::after{content:"";position:absolute;inset:-6px 0}                      /* 見える丈は 32px・押せる範囲は 44px */
.pvg .pvg-rb-b:hover{color:var(--pv-ink)}
.pvg .pvg-rb-b:active{transform:scale(.96)}
.pvg .pvg-rb-b:focus-visible{outline:2px solid var(--pv-accent);outline-offset:2px}
.pvg .pvg-rb-b[aria-pressed="true"]{background:var(--pv-surface);color:var(--pv-accent-ink);box-shadow:var(--pv-shadow)}
.pvg-rb-g{margin-top:10px}
.pvg-rb-g[hidden]{display:none}
.pvg-rb-t{font-size:12px;font-weight:700;color:var(--pv-ink-2)}
.pvg-rb[data-js] .pvg-rb-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.pvg-rb-rows{margin:0;padding:0;list-style:none}
.pvg-rb-row,.pvg-rb-axis{display:grid;grid-template-columns:var(--rb-n,8em) minmax(0,1fr) var(--rb-v,9em);column-gap:10px;align-items:center}
.pvg-rb-row{padding:8px 0;border-top:1px solid var(--pv-line-soft)}
.pvg-rb-n{min-width:0;font-weight:600;line-height:1.4;color:var(--pv-ink-2);overflow-wrap:anywhere}
.pvg-rb-n > small{display:block;font-size:12px;font-weight:500;color:var(--pv-ink-3)}
.pvg-rb-row[data-on] .pvg-rb-n{font-weight:800;color:var(--pv-ink)}
.pvg-rb-track{display:block;height:10px;border-radius:999px;background:var(--pv-bg-sub);overflow:hidden}
.pvg-rb-fill{display:block;height:100%;min-width:4px;border-radius:999px;background:var(--pv-accent)}
.pvg-rb-v{min-width:0;font-size:13.5px;font-weight:700;line-height:1.4;text-align:right;font-variant-numeric:tabular-nums;color:var(--pv-ink);white-space:nowrap}
.pvg-rb-v .pvg-yen{display:block;margin-left:0}
/* 団地ごとの家賃の、額の下の件数（「58件」） */
.pvg-rb-c{display:block;font-size:12px;font-weight:500;line-height:1.4;color:var(--pv-ink-3)}
.pvg-rb-x{grid-column:2/-1;justify-self:end;font-size:13.5px}
.pvg-rb-axis{padding-top:2px}
.pvg-rb-ax{grid-column:2;display:flex;justify-content:space-between;gap:8px;font-size:12px;line-height:1.5;color:var(--pv-ink-3)}
.pvg-rb-ax > i{font-style:normal;text-align:right}
.pvg-rb-ax .pvg-yen{display:block;margin-left:0}
.pvg-rb-s{display:flex;flex-wrap:wrap;gap:0 10px;margin-top:8px!important;font-size:12px;line-height:1.6;color:var(--pv-ink-3)}
@container pvg (max-width:479.98px){
  /* 間取りの切り替えは、3つの語（東京の 1LDK/2K/2DK・2LDK/3K/3DK・3LDK/4K～）が電話の幅の箱に1行で入らない ── 箱からはみ出さずに折り返す。
     行の間の 12px は、押せる範囲（上下 6px ずつ）が次の行のボタンと重ならないため。 */
  .pvg-rb-sw{display:flex;flex-wrap:wrap;row-gap:12px;border-radius:18px}
  .pvg .pvg-rb-b{flex:1 1 auto}
  .pvg-rb-row,.pvg-rb-axis{grid-template-columns:minmax(0,1fr) var(--rb-v,9em)}
  .pvg-rb-n{grid-column:1/-1}
  .pvg-rb-x{grid-column:1/-1;justify-self:start}
  .pvg-rb-ax{grid-column:1}
}
@container pvg (min-width:1040px){ .pvg-liv-2.has-rb{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start} }
.pvg-tgrid{display:grid;grid-template-columns:repeat(var(--tg-a,2),minmax(0,1fr));gap:10px}
.pvg-tgrid > li{display:flex;min-width:0}
.pvg .pvg-town{
  position:relative;display:flex;flex-direction:column;width:100%;min-width:0;margin:0;padding:0;overflow:hidden;
  cursor:pointer;text-align:left;font:inherit;color:var(--pv-ink);-webkit-tap-highlight-color:transparent;
  background:var(--pv-surface);border:1px solid var(--pv-line);border-radius:var(--pv-r);box-shadow:var(--pv-shadow);
  transition:transform .25s var(--pv-ease);
}
.pvg .pvg-town:hover{border-color:var(--pv-accent-line);box-shadow:var(--pv-shadow-lift);transform:translateY(-2px)}
.pvg .pvg-town:active{transform:scale(.985)}
.pvg .pvg-town:focus-visible{outline:2px solid var(--pv-accent);outline-offset:2px}
.pvg .pvg-town[aria-pressed="true"]{border-color:var(--pv-accent);box-shadow:0 0 0 1px var(--pv-accent),var(--pv-shadow-lift)}
.pvg-town-ph{position:relative;flex:none;display:block;width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--pv-bg-sub)}
.pvg-town-ph > img{display:block;width:100%;height:100%;object-fit:cover}
.pvg-town-ph::after{
  content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;
  background:linear-gradient(to top,color-mix(in srgb,var(--pv-navy) 30%,transparent),transparent 48%);
}
.pvg-town-ph.is-none{display:grid;place-items:center;padding:8px;background:radial-gradient(120% 90% at 0 0,var(--pv-accent-soft),transparent 62%),var(--pv-bg-sub)}
.pvg-town-ph.is-none::after{content:none}
.pvg-town-ph.is-none > b{font-size:18px;font-weight:800;line-height:1.3;letter-spacing:.04em;text-align:center;color:var(--pv-ink-3);overflow-wrap:anywhere}
.pvg-town-b{display:flex;flex-direction:column;flex:1;min-width:0;padding:10px 12px 6px}
.pvg-town-n{font-size:15px;font-weight:800;line-height:1.35;letter-spacing:-.01em;color:var(--pv-ink);overflow-wrap:anywhere}
.pvg-town-s{font:500 12px/1.45 Inter,'Noto Sans JP',sans-serif;color:var(--pv-ink-3);overflow-wrap:anywhere}
.pvg-town-r{display:flex;flex-direction:column;margin-top:8px;font-size:14px;font-weight:700;line-height:1.45;font-variant-numeric:tabular-nums;color:var(--pv-ink)}
.pvg-town-r > small{font-size:12px;font-weight:600;line-height:1.5;color:var(--pv-ink-3)}
.pvg-town-r .pvg-yen{display:block;margin-left:0;white-space:normal}
.pvg-town-a{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;margin-top:6px;font-size:12px;line-height:1.5;color:var(--pv-ink-2)}
.pvg-town-go{display:inline-flex;align-items:center;gap:2px;margin-top:auto;padding-top:8px;min-height:30px;font-size:12.5px;font-weight:600;color:var(--pv-accent-ink)}
/* 空港の3字と、移動の手段の札 */
.pvg-code3,.pvg-mode{
  flex:none;display:inline-block;padding:0 6px;border-radius:6px;font-style:normal;white-space:nowrap;
  font:700 12px/1.6 Inter,'Noto Sans JP',sans-serif;border:1px solid var(--pv-line-soft);
}
.pvg-code3{letter-spacing:.06em;color:var(--pv-ink-2);background:var(--pv-bg-sub)}
.pvg-mode{color:var(--pv-accent-ink);background:var(--pv-accent-soft);border-color:var(--pv-accent-line)}

/* 街ごとの詳細（家賃を間取りごとに・空港までの移動・出典・追加） */
.pvg-tds{display:grid;gap:10px;margin-top:12px}
.pvg-td{min-width:0;padding:14px 14px 4px;background:var(--pv-surface-2);border:1px solid var(--pv-line);border-radius:var(--pv-r);scroll-margin-top:140px}
.pvg-td-h > h4{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;font-size:17px;font-weight:800;line-height:1.4;letter-spacing:-.02em;color:var(--pv-ink)}
.pvg-td-h > h4 > small{font:500 12.5px/1.5 Inter,'Noto Sans JP',sans-serif;letter-spacing:0;color:var(--pv-ink-3)}
.pvg-td-h > p{margin-top:2px!important;font-size:12.5px;line-height:1.6;color:var(--pv-ink-2);text-wrap:pretty}
.pvg-td-g{display:grid;grid-template-columns:minmax(0,1fr);gap:0 32px}
.pvg-td-c{min-width:0}
.pvg-td .pvg-askh{margin-top:12px!important}
.pvg-kv > div{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 12px;padding:8px 0;border-top:1px solid var(--pv-line-soft)}
.pvg-kv dt{font-size:12.5px;font-weight:600;line-height:1.5;color:var(--pv-ink-2)}
.pvg-kv dd{margin-left:auto;font-size:14px;font-weight:700;line-height:1.5;text-align:right;font-variant-numeric:tabular-nums;color:var(--pv-ink)}
.pvg-way > li{display:grid;grid-template-columns:minmax(0,1fr);justify-items:start;gap:3px;padding:8px 0;border-top:1px solid var(--pv-line-soft)}
.pvg-way-t{display:flex;flex-wrap:wrap;gap:4px}
.pvg-way-l{font-size:12.5px;line-height:1.55;color:var(--pv-ink-2);text-wrap:pretty}
.pvg-way > li > b{font-size:14px;font-weight:700;line-height:1.5;color:var(--pv-ink);overflow-wrap:anywhere}
.pvg-way > li.is-none .pvg-way-l{color:var(--pv-ink-3)}
/* 暮らしの字は、語の途中で折らない（P12.55：「アル・ラハ・ビー｜チ」「ターミナ｜ルA」「掲｜載分」「マッ｜プ」「1｜寝室」）。
   就航地の街の名前（.pvg-cgrid .pvg-town-n）と同じ keep-all ＝ 折れるのは「・」のあと・空白・括弧の前だけ。
   字は1文字も変えない。それでも入らない長い塊だけは、入る所で折れる（はみ出さない） */
.pvg-liv .pvg-town-n,.pvg-way-l,.pvg-rb-s > span,
.pvg-cell[data-cell="living"] .pvg-k,.pvg-cell[data-cell="living"] .pvg-note,.pvg-cell[data-cell="living"] .pvg-also span{word-break:keep-all;overflow-wrap:anywhere}
.pvg-way > li.is-none .pvg-mode{color:var(--pv-ink-3);background:var(--pv-bg-sub);border-color:var(--pv-line-soft)}
.pvg-way > li > .pvg-link{margin:-3px 0 -8px}
/* 「出典」を開くと：根拠・条件・時点 */
.pvg-ev{margin-top:6px}
.pvg-evl{display:grid;gap:10px;padding:2px 0 10px}
.pvg-evl > div{display:grid;grid-template-columns:3em minmax(0,1fr);gap:10px}
/* 英語のページ（2026-10-26 WP-en-11a）：見出しの字（Conditions・Getting there・Reference）が 3em の列に収まらず、中身の字に重なっていた
   （easyJet の家賃の板・390）。英語では見出しを上・中身をその下に置く。日本語のページの並びは今までどおり（:lang(en) の中だけ） */
.pvg-evl:lang(en) > div{grid-template-columns:minmax(0,1fr);gap:2px}
.pvg-evl dt{font-size:12px;font-weight:700;letter-spacing:.08em;line-height:1.6;color:var(--pv-ink-2)}
.pvg-evl dd{min-width:0;font-size:12px;line-height:1.6;color:var(--pv-ink-3)}
.pvg-evl dd.pvg-srcs,.pvg-evl dd > .pvg-notes{margin-top:0!important}
.pvg-evl .pvg-notes b{margin-right:6px;font-weight:600;color:var(--pv-ink-2)}
.pvg-evl dd > span{display:block}
.pvg-evl dd > span > b{margin-right:8px;font-weight:600;color:var(--pv-ink-2)}
/* 住むエリアの見出しの行に置く「＋住みやすい街を追加」。行の組み方は .pvg-liv-h（見出しが左・入口が右・狭い箱では下へ回る）。
   語の途中で折らない。字の大きさ・太さは、下の .pvg .pvg-link（同じ強さ・あとに在る）に負けないよう、2つの印で書く */
.pvg-liv-h > .pvg-askh{margin-bottom:0!important}
.pvg .pvg-link.pvg-liv-add{flex:none;white-space:nowrap;font-size:13px;font-weight:700}
/* 会員が挙げた街。欄が空（まだ1件も無い・見せるものが無い）のあいだは、見出しごと出さない。
   ⚠️ 隠すのは外の箱で、読み終わって空だった時だけ。欄そのものを、まだ・読み込み中のあいだに隠さない
      （career-live.js は「見えている箱」だけを取りに行く ＝ 隠すと永遠に読み込まれない）。 */
.pvg-liv-got{margin-top:14px}
.pvg-liv-got > .pvg-askh{margin:0 0 6px!important}
.pvg-liv-got:has(> .crl[data-state="empty"]){display:none}
/* 写真の出典（作者名とライセンス名。CC BY / BY-SA の写真を使う条件） */
.pvg-phl{display:grid;gap:4px;padding:0 0 10px}
.pvg-phl li{display:flex;flex-wrap:wrap;gap:0 10px;font-size:12px;line-height:1.7;color:var(--pv-ink-3)}
.pvg-phl li > b{font-weight:600;color:var(--pv-ink-2)}
.pvg-phl li > span{min-width:0;overflow-wrap:anywhere}
@container pvg (min-width:560px){
  .pvg-tgrid{grid-template-columns:repeat(var(--tg-b,3),minmax(0,1fr));gap:12px}
}
@container pvg (min-width:720px){
  .pvg-td{padding:18px 20px 6px}
  .pvg-td-g:not(.is-one){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
}
@container pvg (min-width:860px){
  .pvg-tgrid{grid-template-columns:repeat(var(--tg-c,4),minmax(0,1fr))}
}
@container pvg (min-width:1040px){
  .pvg-tgrid{grid-template-columns:repeat(var(--tg-d,5),minmax(0,1fr))}
}

/* 匿名で答える入口（質問の名前を見せる） */
.pvg-ask ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px}
.pvg-ask a{
  display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:6px 12px;
  border:1px solid var(--pv-line);border-radius:12px;background:var(--pv-surface);
  font-size:13px;font-weight:600;line-height:1.4;color:var(--pv-ink);text-decoration:none;
  transition:transform .2s var(--pv-ease);
}
.pvg-ask a .pvg-ic{color:var(--pv-ink-3)}
.pvg-ask a:hover{border-color:var(--pv-accent-line);background:var(--pv-accent-soft);transform:translateY(-1px)}
.pvg-ask a:active{transform:scale(.985)}
.pvg-ask a:focus-visible{outline:2px solid var(--pv-accent);outline-offset:2px}

/* ── 提出された年収（REAL PAY）── 給与の1枚の中、推定年収のすぐ下（2026-10-07 オーナーのご指示で1枚に統合）──
   推定と提出は物差しが別なので、線と見出しで分ける。出すのは3行まで（行数は欄の data-top。残りは REAL PAY の画面）。
   行と板の形は career-live.js・career-live.css が持つ。
   ★鍵の無い人の行に額は無い（サーバーが送っていない。ぼかしではない）。ここは置き方だけで、何も隠さない */
.pvg-rp{margin-top:12px;padding-top:12px;border-top:1px solid var(--pv-line-soft)}
.pvg .pvg-rp-h{display:flex;align-items:baseline;gap:8px;margin-bottom:4px;font-size:13px;font-weight:700;line-height:1.5;color:var(--pv-ink)}
.pvg-rp-h small{font:600 12px/1.5 Inter,sans-serif;letter-spacing:.1em;color:var(--pv-ink-3)}
.pvg-rp .crl{font-size:13.5px}
.pvg-rp > .crl > .crl-rows{margin-bottom:10px}
.pvg-rp .crl-lock{width:fit-content;max-width:100%}
/* 件数は添え書き。額より目立たせない */
.pvg-rp .crl-count{margin-bottom:2px;line-height:1.6}
.pvg-rp .crl-count b{font-size:14px;font-weight:600;line-height:1.6;letter-spacing:0}
/* ★概要では短い入口にする（2026-10-08 オーナーのご指示「ぼかし3行や同じ入口の繰り返しで縦長にしすぎない」）。
   鍵の無い人 ── 件数と「給与の提出で開きます」を1行に並べ、伏せた行は見本の1行だけ。
   鍵の開いた人 ── 新しい2行。給与・待遇のタブでは、どちらも今までどおり3行（行そのものは欄の data-top が決める）。
   ⚠️ ここは同じ中身の「何行めまで見せるか」だけ。額・職位は、鍵の無い人の行にそもそも入っていない。
   ⚠️ 欄（.crl）そのものを display:none にしない（career-live.js は見えている箱だけを取りに行く）。 */
.pvg-at-overview .pvg-rp > .crl[data-state="locked"] > .crl-rows > .crl-row:nth-child(n+2){display:none}
/* ★2026-10-30 鍵の開いた人の行は畳み（提出された数字を見る）の中 ── 概要でも欄が持つ3行がそのまま畳みに入る（数を減らさない） */
/* 件数の横に札が丸ごと入らない時は、札が件数の下の段へ丸ごと下りる（折り返す行。字は小さくしない・途中で折らない）。
   ★段を下ろす幅を「箱の幅」で決めない ── 札の長さは読む人で違う（「給与の提出で開きます」10字／
     「年収データの解放が切れています」15字・英語はもっと長い）。2026-10-25 まで 296px の境目は10字の札に合わせてあり、
     期限切れの札は 351・375px の画面で「す」「います」だけが次の行へ落ちていた。並び（件数 → 札 → 行 → 足元）は order。
   段のあいだ：件数と札 6px（下りた時）・札と行 8px（6 ＋ 2）・行と足元 10px（6 ＋ 4）＝ 今までと同じ。 */
.pvg-rp > .crl[data-state="locked"]{display:flex;flex-wrap:wrap;align-items:center;column-gap:12px;row-gap:6px}
.pvg-rp > .crl[data-state="locked"] > .crl-count{order:1;margin-bottom:0}
.pvg-rp > .crl[data-state="locked"] > .crl-lock{order:2;flex:0 1 auto;margin:0;padding:6px 10px}
/* 下りても箱より長い札（英語の期限切れの札は 320px の画面で 251px ＞ 箱 242px）は、2行を同じくらいの長さに折る（最後の1語だけを残さない） */
.pvg-rp > .crl[data-state="locked"] > .crl-lock > span{text-wrap:balance}
.pvg-rp > .crl[data-state="locked"] > .crl-rows{order:3;flex:1 0 100%;margin-top:2px;margin-bottom:4px}
/* 図の影絵（2026-10-30・字も数字も無い決まった形）は伏せた行のすぐ下・足元の上（並びは行と同じ段 ＝ 書いた順） */
.pvg-rp > .crl[data-state="locked"] > .crl-pv-lk{order:3;flex:1 0 100%;margin-bottom:4px}
.pvg-rp > .crl[data-state="locked"] > .crl-foot{order:4;flex:1 0 100%}

/* ── 会社・募集・ステイ・ひとつ教えて（どれも横いっぱいの帯）── */
.pvg-more-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--pvg-gap);margin-top:var(--pvg-gap)}
.pvg-more-grid > .pvg-card{display:flex;flex-direction:column}
.pvg-more-grid > .pvg-card > .pvg-hd{margin-bottom:8px}
.pvg-more-grid .crl{font-size:13.5px}
/* ── 評価スコア＋口コミ ── 給与の1枚の横（狭い画面ではすぐ下）。2026-10-07 オーナーのご指示 ──
   ★置くのは 総合点 と 6角形の図 の2つだけ（2026-10-06「デカデカと…入れる必要ないけど、パッと見てわかるようにして」「レーダー図はいれて」）。
     棒を足し戻さない（同じ6つの数字が2回並び、欄が倍の高さになる）。
   形は2つ。どちらになるかは「この箱の幅」で決まる（画面の幅ではない ── PC の概要では、箱は半分の幅しか無い）。
     狭い箱（スマホ・PC の概要）：総合点 → 図 → 要約 → 口コミの抜粋 → 書く入口 を縦に
     広い箱（iPad・口コミのタブ）：左に 総合点と図、右に 要約 → 抜粋 → 書く入口
   数字を描くのは career-live.js（出し方は airline-reviews-ui.js の1か所）。ここは置き方だけ */
.pvg-rv-card{display:flex;flex-direction:column;container:pvgrv/inline-size}
.pvg-rv-card > .pvg-hd{margin-bottom:8px}
.pvg-rv-card .crl{font-size:13.5px}
.pvg-rv-in{flex:1 1 auto;display:flex;flex-direction:column;min-width:0}
.pvg-rv-in > .crl[data-live="score"]{min-height:120px}
.pvg-rv-in > .crl[data-live="score"][data-state="empty"]{min-height:0}
/* 投稿が0件の時、書く入口は下のボタン1つだけ（欄が自分で出す「匿名で口コミを書く」と二重にしない）。
   欄そのものは消さない ── 消すと career-live.js が二度と取りに行かない */
.pvg-rv-in > .crl[data-live="score"][data-state="empty"] .crl-foot{display:none}
/* 口コミの要約：答えを待つあいだ（idle・loading）も、1行ぶんの高さ（44px）を取っておく ＝ 答えが来ても下が動かない。
   1行で済む状態（ログイン／鍵／少ない／まだ無い／未接続）はどれも同じ 44px。伸びるのは「開いている」ときだけ。
   44px は、いちばん高い1行（ログインの入口 44px）を測った数。欄は content-box ＝ 44px は上の余白と罫線の内側
   （ページ全体は border-box なので、戻すと狭い箱で答えが来た時に余白と罫線のぶん 15px 動く）。
   畳むのは2つの時だけ ── 上の評価が「まだありません」の時（0件のページに、同じ意味の文を2つ並べない）と、
   上の評価も要約も読めなかった時（同じ知らせと「やり直す」を2つ重ねない。上の欄が出している）。
   ⚠️ display:none や visibility:hidden で欄そのものを消さない（career-live.js は見えている箱だけを取りに行く）。 */
.pvg-rv-in > .crl[data-live="summary"]{min-height:44px;box-sizing:content-box}
.pvg-rv-in > .crl[data-live="summary"][data-state="empty"] > .crl-msg{min-height:44px}
.pvg-rv-in > .crl[data-live="summary"][data-state="locked"] > .crl-lock{min-height:44px;box-sizing:border-box}
.pvg-rv-in > .crl[data-live="score"][data-state="empty"] ~ .crl[data-live="summary"]:not([data-state="open"]):not([data-state="locked"]),
.pvg-rv-in > .crl[data-live="score"][data-state="error"] ~ .crl[data-live="summary"][data-state="error"]{height:0;min-height:0;margin:0;padding:0;border:0;overflow:hidden}
.pvg-rv-in > .crl[data-live="score"][data-state="empty"] ~ .crl[data-live="summary"]:not([data-state="open"]):not([data-state="locked"]) > *,
.pvg-rv-in > .crl[data-live="score"][data-state="error"] ~ .crl[data-live="summary"][data-state="error"] > *{display:none}
.pvg-rv-in > .crl[data-live="reviews"]{display:flex;flex-direction:column;margin-top:14px}
.pvg-rv-in > .crl[data-live="reviews"] > .crl-revs{margin-top:0}
/* 抜粋は「いつ・どの区分・先頭の文」まで。ほかに触れている区分の札は、口コミのタブの一覧に在る */
.pvg-rv-in .crl-rev > .crl-chips{display:none}
.pvg-rv-in .crl-lock{width:fit-content;max-width:100%}
/* ★概要の抜粋は新しい1件だけ（一覧は口コミのタブ）。要約の欄がすでに「口コミの投稿で開きます」と言っている時は、
   同じ意味の錠前の1行をもう1つ重ねない（2026-10-08）。要約の欄が鍵・ログインの1行を出していない時（少ない／まだ無い／未接続）は、下の1行が残る */
.pvg-rv-in .crl-revs > .crl-rev:nth-child(n+2){display:none}
.pvg-rv-in > .crl[data-live="summary"][data-state="locked"] ~ .crl[data-live="reviews"] .crl-lock{display:none}
.pvg-rv-in > .crl[data-live="summary"][data-state="locked"] ~ .crl[data-live="reviews"] [data-crl-login]{display:none}
/* ⚠️ 口コミが無い時、下の欄は高さを 0 にするだけ。display:none にすると career-live.js が二度と取りに行かない。 */
.pvg-rv-in > .crl[data-live="reviews"][data-state="empty"]{flex:none;height:0;min-height:0;margin:0;overflow:hidden}
/* 書く入口は箱の底（横に並ぶ給与の1枚のほうが高い時も、底でそろう） */
.pvg-rv-in > .pvg-rv-cta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:auto;padding-top:16px}
.pvg-rv-cta > span{font-size:12px;color:var(--pv-ink-3)}
/* 入口の字は置き場で変わる：概要「口コミを解放する」／口コミのタブ「全ての口コミデータを解放する」。
   どちらを出すかは下の「出す・隠す」の節。JS が動かなければ概要の字 */
.pvg-rv-in > .pvg-rv-cta-reviews{display:none}

.pvg .crl-sc{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
/* 総合：点数｜星｜人数 を1行に */
.pvg .crl-sc-sum{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.pvg .crl-sc-avg{display:flex;align-items:baseline;gap:5px;margin:0;line-height:1}
.pvg .crl-sc-avg b{font:700 28px/1 Inter,'Noto Sans JP',sans-serif;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--pv-ink)}
.pvg .crl-sc-avg span{font-size:13px;font-weight:600;color:var(--pv-ink-3)}
.pvg .crl-sc-cnt{margin:0;font-size:12px;line-height:1.5;color:var(--pv-ink-2)}
/* 6角形の図：まんなかに図、名前と点数は図のまわりに置く（上・右上・右下・下・左下・左上） */
.pvg .crl-radar{
  display:grid;grid-template-columns:60px minmax(0,1fr) 60px;grid-template-rows:auto 1fr 1fr auto;
  align-items:center;gap:4px 8px;width:100%;max-width:272px;margin-inline:auto;
}
.pvg .crl-radar-svg{grid-column:2;grid-row:2 / span 2;display:block;width:100%;height:auto;aspect-ratio:1;overflow:visible}
.pvg .crl-radar-ring{fill:none;stroke:var(--pv-line);stroke-width:1;vector-effect:non-scaling-stroke}
.pvg .crl-radar-axis{stroke:var(--pv-line);stroke-width:1;vector-effect:non-scaling-stroke}
.pvg .crl-radar-shape{fill:var(--pv-gold-soft);stroke:var(--pv-star);stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.pvg .crl-radar-dot{fill:var(--pv-star)}
.pvg .crl-radar-l{display:flex;flex-direction:column;min-width:0;font-size:12px;line-height:1.35;color:var(--pv-ink-2)}
.pvg .crl-radar-l b{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--pv-ink)}
/* 名前は語の途中で折らない ── 折れるのは表の名前の折れてよい所（<wbr>「給与・報酬の｜納得度」）だけ（2026-10-25）。英語は空白で折れる */
.pvg .crl-radar-l > span{word-break:keep-all}
.pvg .crl-radar-l[data-i="0"],.pvg .crl-radar-l[data-i="3"]{grid-column:1 / -1;flex-direction:row;align-items:baseline;justify-content:center;gap:6px}
.pvg .crl-radar-l[data-i="0"]{grid-row:1}
.pvg .crl-radar-l[data-i="3"]{grid-row:4}
.pvg .crl-radar-l[data-i="1"]{grid-column:3;grid-row:2}
.pvg .crl-radar-l[data-i="2"]{grid-column:3;grid-row:3}
.pvg .crl-radar-l[data-i="5"]{grid-column:1;grid-row:2;align-items:flex-end;text-align:right}
.pvg .crl-radar-l[data-i="4"]{grid-column:1;grid-row:3;align-items:flex-end;text-align:right}
/* 会社ページの図（2026-10-21 オーナー「必ず多角形のレーダーの図を載せて」「なにもないところは平均の3.0で塗っておいて」P12.95・P12.96）。
   枠と6つの名前は HTML に在り、点数で塗るまでは 3.0 の面（is-ph）。★2026-10-26 オーナー「評価スコアがない場合も、ある時と同じ色にして。点数はつけなくていい」── 色は点数のある面と同じ・点の丸と数字は置かない。
   名前は古いページの言葉（「給与・報酬の納得度」まで）なので、左右の列を少し広げる。総合点・知らせの下に間をあける */
.pvg .pvg-radar{grid-template-columns:76px minmax(0,1fr) 76px;max-width:300px;margin-top:12px}
.pvg .crl-radar-shape.is-ph{fill:var(--pv-gold-soft);stroke:var(--pv-star);stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
/* 広い箱：左に 総合点と図（幅は決め打ち ＝ 読み込みの前後で右の欄が動かない）、右に 要約 → 口コミの抜粋 → 書く入口。
   右の3つはひとかたまりで、図より短ければ図の高さのまんなかに・長ければ上から並ぶ（上下の 1fr が余りを半分ずつ受ける）。
   ⚠️ .pvg-rv-in の子は5つ（score・summary・reviews・入口2つ）。6つめを足すなら grid-row を決める（決めないと上の 1fr の段に入る）。 */
@container pvgrv (min-width:600px){
  .pvg-rv-in{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:1fr auto auto auto 1fr;align-items:start;column-gap:32px}
  .pvg-rv-in:has(> .crl[data-live="score"][data-state="empty"]){grid-template-rows:auto auto auto auto}
  .pvg-rv-in > .crl[data-live="score"]{grid-column:1;grid-row:1 / -1;width:272px}
  .pvg-rv-in > .crl[data-live="score"] ~ *{grid-column:2}
  /* 投稿が無いとき：左の列を畳まず、案内を横いっぱいに1行で出す（幅 0 にすると字が1文字ずつ縦に並ぶ） */
  .pvg-rv-in > .crl[data-live="score"][data-state="empty"]{grid-column:1 / -1;grid-row:1;width:auto}
  .pvg-rv-in > .crl[data-live="score"][data-state="empty"] ~ *{grid-column:1 / -1}
  .pvg-rv-in > .crl[data-live="summary"]{grid-row:2;margin:0 0 14px}
  .pvg-rv-in > .crl[data-live="summary"]:not([data-state="error"]){padding-top:0;border-top:0}
  .pvg-rv-in > .crl[data-live="reviews"]{grid-row:3;margin-top:0}
  .pvg-rv-in > .crl[data-live="reviews"]:not([data-state="empty"]){margin-bottom:14px}
  .pvg-rv-in > .crl[data-live="reviews"] > .crl-revs{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .pvg-rv-in > .pvg-rv-cta{grid-row:4;margin-top:0;padding-top:0}
  .pvg-rv-in > .crl[data-live="score"][data-state="empty"] ~ .pvg-rv-cta{padding-top:12px}
}
/* 会社概要：見出し → 紹介の本文 → 小さな写真｜最初の4つの値 → 写真のクレジット
   → 「会社情報」（開くと紹介の続き・数字ぜんぶ・機材・出どころ）。
   写真は小さいまま（主役にしない）。図の箱そのものは置かず、絵とクレジットを別々の段に置く。
   ★紹介の本文（2026-10-07 オーナーのご指示）── 下に在った「◯◯について」の節から移した字。開かなくても読める場所に置く
     （4つの数字だけで会社紹介を済ませない）。行数で切らない */
.pvg-more-grid > .pvg-co{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:12px;align-items:start}
.pvg-co > .pvg-hd{grid-column:1 / -1;grid-row:1}
.pvg-co > .pvg-about{grid-column:1 / -1;grid-row:2;margin-bottom:10px;font-size:13px;line-height:1.75;color:var(--pv-ink-2);text-wrap:pretty}
.pvg-co > .pvg-photo{display:contents}
/* ★2026-10-08 写真の箱の形を決めない ── 元の写真の形のまま出す（JAL の写真は 16:9。3:2 の箱へ押し込むと
     左右が 16% ずつ切れて、機首が欠けていた）。高さは width・height の属性から決まるので、読み込む前後で動かない。
     ⚠️ aspect-ratio を足し戻さない／右の列の丈まで伸ばさない。 */
.pvg-co > .pvg-photo > img{grid-column:1;grid-row:3;display:block;width:100%;height:auto;object-fit:cover;border-radius:var(--pv-r-sm);background:var(--pv-bg-sub)}
/* クレジットは写真の段のすぐ下（「会社情報」より上）。「会社情報」の下に置くと、開いたときに写真から何画面も離れる */
.pvg-co > .pvg-photo > figcaption{grid-column:1 / -1;grid-row:4;padding-top:4px;font-size:12px;line-height:1.5;color:var(--pv-ink-3)}
.pvg-keys{grid-column:2;grid-row:3;display:grid;grid-template-columns:minmax(0,1fr);min-width:0}
.pvg-co:not(:has(> .pvg-photo)) > .pvg-keys{grid-column:1 / -1}
/* 写真の無い会社の1枚（全社へ広げる c・2026-10-21）：写真の列を取らず、見出し → 紹介 → 4つの値 → 「会社情報」を上から1列に */
.pvg-more-grid > .pvg-co.pvg-co-np{display:block}
.pvg-co.pvg-co-np > .pvg-keys{margin-top:2px}
.pvg-keys > div{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0;padding:2px 0}
.pvg-keys dt{flex:1 1 0;min-width:4em;font-size:12px;line-height:1.6;color:var(--pv-ink-3)}
.pvg-keys dd{flex:0 1 auto;max-width:66%;font:600 13px/1.5 Inter,'Noto Sans JP',sans-serif;font-variant-numeric:tabular-nums;text-align:right;color:var(--pv-ink)}
.pvg-co > .pvg-co-more{grid-column:1 / -1;grid-row:5;margin-top:4px;padding-top:0}
.pvg-co-more > summary small{font-size:12px;font-weight:500;color:var(--pv-ink-3)}
.pvg-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
.pvg-stats > div{min-width:0;padding:10px 0 11px;border-top:1px solid var(--pv-line-soft)}
.pvg-stats dt{font-size:12px;font-weight:600;line-height:1.5;color:var(--pv-ink-3)}
.pvg-stats dd b{display:block;margin-top:1px;font:700 19px/1.3 Inter,'Noto Sans JP',sans-serif;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--pv-ink);overflow-wrap:anywhere}
.pvg-stats > div[data-long] dd b{font-size:15px;line-height:1.45;letter-spacing:0}
.pvg-stats > div[data-mid] dd b{font-size:16px;line-height:1.5}
.pvg-stats dd small{display:block;margin-top:2px;font-size:12px;line-height:1.55;color:var(--pv-ink-3);text-wrap:pretty}
.pvg-fleet > .pvg-askh{margin-top:12px!important}
/* 畳んだ出どころ */
.pvg-srcd{margin-top:auto;padding-top:4px}
.pvg-srcd > summary{font-size:12px;color:var(--pv-ink-2)}
.pvg-srcd > summary small{font-size:12px;font-weight:500;color:var(--pv-ink-3)}
.pvg-srcd > .pvg-srcs{margin:0 0 6px!important}
.pvg-chips{display:flex;flex-wrap:wrap;gap:6px}
.pvg-chips li{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;line-height:1.6;color:var(--pv-ink-2);background:var(--pv-bg-sub);border:1px solid var(--pv-line-soft)}
.pvg-chips b{font:700 12px/1 Inter,sans-serif;color:var(--pv-ink)}
/* ── 就航地・ステイ ── 都市の写真のカードを並べる（見た目は「暮らし」の街のカードと同じ部品）──
   ・概要には一部だけ出す。全部の一覧は「ステイ先」のタブ（同じカードを2度出さない）。
     ⚠️ 既定は「全部の一覧を出す・一部を隠す」。pv-glance.js が動かないときに、一覧が1つも消えないため。
   ・都市を選ぶと、一覧を隠して詳細（#pvg-city）を出す。hidden で切り替える ──
     .pvg-more-grid > .pvg-card の display:flex が hidden を上書きするので、[hidden] の決まりを必ず持つ。
   ・並びは地域ごと。人気・便数の順ではない（順位を作らない）。 */
.pvg-stay,.pvg-cd{scroll-margin-top:132px}
.pvg-more-grid > .pvg-card[hidden]{display:none}
.pvg-stay-base{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:13px;color:var(--pv-ink-2)}
.pvg-stay-base b{font-weight:700;color:var(--pv-ink)}
.pvg-stay-base .pvg-ic{color:var(--pvg-c,var(--pv-accent))}
.pvg-st-teaser{display:none}
.pvg-at-overview .pvg-st-teaser{display:block}
.pvg-at-overview .pvg-st-full{display:none}
.pvg .pvg-st-teaser > .pvg-askh{flex-wrap:wrap;margin:8px 0!important}
.pvg .pvg-st-more{margin-top:12px}
.pvg-st-more > .pvg-btn{width:100%}
/* ★2026-10-29 幅いっぱいのボタンは字を折り返す（.pvg-btn は nowrap）。英語の「See the destinations we confirmed (35 airports)」が
   320 の画面で4px はみ出し、ページごと横に揺れていた（ジェットスター・スイス）。 */
.pvg-st-more > .pvg-btn,.pvg-st-all > .pvg-btn{white-space:normal;text-align:center;line-height:1.35;padding-block:8px;gap:6px}
.pvg-st-more > .pvg-btn svg,.pvg-st-all > .pvg-btn svg{flex-shrink:0}
.pvg-cgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pvg-cgrid > li{display:flex;min-width:0}
.pvg-cgrid > li[hidden]{display:none}
.pvg-cteaser > li:nth-child(n+5){display:none}                  /* 2列 × 2段 */
.pvg .pvg-city{text-decoration:none}
/* 街の名前は、どの幅でも語の途中で折らない（3列になった直後の 648〜674px でも「デンパサール（バリ｜島）」になっていた）。
   折れてよい所は生成側が <wbr> で渡す（gen-airline-glance.mjs の cityName）。それでも入らない名前だけ、入る所で折れる */
.pvg-cgrid .pvg-town-n{word-break:keep-all}
.pvg-city-k{display:flex;align-items:flex-start;justify-content:space-between;gap:6px;min-width:0;margin-bottom:4px}
.pvg-city-k > small{min-width:0;font-size:12px;font-weight:600;line-height:1.7;color:var(--pv-ink-3);overflow-wrap:anywhere}
.pvg-city-t{align-self:flex-start;flex:none;margin-top:6px;padding:0 8px;border-radius:999px;white-space:nowrap;
            font-size:12px;font-weight:600;line-height:1.7;color:var(--pv-ink-2);background:var(--pv-bg-sub);border:1px solid var(--pv-line-soft)}
.pvg-city-t[hidden]{display:none}
/* 探す欄と、地域の札 */
.pvg-st-full{margin-top:12px}
.pvg-st-bar{display:grid;gap:10px}
.pvg-st-find{position:relative;display:flex;align-items:center;min-width:0}
.pvg-st-find > .pvg-ic{position:absolute;left:12px;color:var(--pv-ink-3);pointer-events:none}
.pvg-st-find > input{
  width:100%;min-width:0;min-height:44px;margin:0;padding:0 12px 0 36px;-webkit-appearance:none;appearance:none;
  font:500 16px/1.4 Inter,'Noto Sans JP',sans-serif;color:var(--pv-ink);
  background:var(--pv-surface);border:1px solid var(--pv-line);border-radius:var(--pv-r-sm);
}
.pvg-st-find > input::placeholder{color:var(--pv-ink-3)}
.pvg-st-find > input:hover{border-color:var(--pv-ink-3)}
.pvg-st-find > input:active{background:var(--pv-surface-2)}
.pvg-st-find > input:focus-visible{outline:2px solid var(--pv-accent);outline-offset:1px;border-color:var(--pv-accent)}
/* 狭い画面では横へ送る（折ると3段になり、一覧が下がる）。上下の余白は、押せる範囲と外枠が切れないため */
.pvg-st-rg{display:flex;gap:6px;min-width:0;margin:-6px -2px;padding:6px 2px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pvg-st-rg::-webkit-scrollbar{display:none}
.pvg-pill{
  position:relative;flex:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;margin:0;padding:0 14px;border-radius:999px;cursor:pointer;
  font:600 13px/1 'Noto Sans JP',Inter,sans-serif;white-space:nowrap;color:var(--pv-ink-2);-webkit-tap-highlight-color:transparent;
  background:var(--pv-surface);border:1px solid var(--pv-line);transition:transform .2s var(--pv-ease);
}
.pvg-pill::after{content:"";position:absolute;inset:-5px -1px}  /* 見える丈は 36px・押せる丈は 44px */
.pvg-pill > small{font:600 12px/1 Inter,sans-serif;font-variant-numeric:tabular-nums;color:var(--pv-ink-3)}
.pvg-pill:hover{border-color:var(--pv-accent-line);transform:translateY(-1px)}
.pvg-pill:active{transform:scale(.97)}
.pvg-pill:focus-visible{outline:2px solid var(--pv-accent);outline-offset:2px}
.pvg-pill[aria-pressed="true"]{color:var(--pv-accent-ink);background:var(--pv-accent-soft);border-color:var(--pv-accent)}
.pvg-pill[aria-pressed="true"] > small{color:var(--pv-accent-ink)}
.pvg .pvg-st-n{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 16px;margin:8px 0 4px;font-size:13px;color:var(--pv-ink-2)}
.pvg-st-n b{margin-right:3px;font:800 18px/1.3 Inter,sans-serif;font-variant-numeric:tabular-nums;color:var(--pv-ink)}
.pvg .pvg-st-none{margin-top:10px}
.pvg .pvg-st-all{margin-top:16px;text-align:center}
.pvg-st-all[hidden]{display:none}
.pvg-st-all > .pvg-btn{width:100%}
.pvg-st-none[hidden]{display:none}
.pvg-st-full > .pvg-dt{margin-top:12px}
/* 写真のクレジットは一覧の箱の外に置く ＝ 概要（就航地の一部）でも見える。
   作者名とライセンス名を示すことが使う条件の写真を、クレジットの無い画面に出さない。 */
.pvg-stay > .pvg-phc{margin-top:0}
.pvg-at-overview .pvg-stay > .pvg-phc{margin-top:8px}
/* 都市の詳細 */
.pvg .pvg-cd-back{margin:-8px 0 4px}
.pvg-cd-top{display:grid;gap:14px}
.pvg-cd-ph{aspect-ratio:16/9;border-radius:var(--pv-r)}
.pvg-cd-ph.is-none > b{font-size:28px}
.pvg-cd-b{display:flex;flex-direction:column;gap:4px;min-width:0}
.pvg-cd-b > .pvg-city-k{align-items:center;justify-content:flex-start;gap:8px;margin-bottom:0}
.pvg-cd-b > .pvg-city-k > .pvg-city-t{align-self:center;margin-top:0}
.pvg .pvg-cd-n{font-size:22px;font-weight:800;line-height:1.3;letter-spacing:-.02em;color:var(--pv-ink);overflow-wrap:anywhere;outline:0}
.pvg .pvg-cd-n:focus-visible{outline:2px solid var(--pv-accent);outline-offset:4px;border-radius:4px}
.pvg .pvg-cd-note{margin-top:6px;text-wrap:pretty}
.pvg-cd-links{display:flex;flex-wrap:wrap;gap:0 24px}
.pvg-cd-cr{font-size:12px;line-height:1.6;color:var(--pv-ink-3);overflow-wrap:anywhere}
.pvg-cd-cr[hidden]{display:none}
.pvg-cd-cr a{color:inherit;text-underline-offset:2px}
.pvg-cd-cr a:hover{color:var(--pv-ink-2)}
.pvg-cd-cr a:focus-visible{outline:2px solid var(--pv-accent);outline-offset:2px;border-radius:4px}
.pvg-cd-sec{margin-top:16px;padding-top:2px;border-top:1px solid var(--pv-line-soft)}
.pvg .pvg-cd-sec > .pvg-askh{flex-wrap:wrap;margin:12px 0 10px!important;font-size:13px}
/* ホテルの欄（career-stay.css）の押すもの。あちらの外枠は career.html の中だけに掛かるので、ここで同じ形を当てる */
.pvg .crs-act:focus-visible,.pvg .crs-btn:focus-visible,.pvg .crs-map:focus-visible,.pvg .crs-ph:focus-visible{outline:2px solid var(--pv-accent);outline-offset:2px;border-radius:999px}
.pvg .crs-btn:focus-visible{outline-offset:3px}   /* 塗ったボタンは 3px（career-stay.css と同じ・送るボタン .pvc-send と同じ） */
.pvg .crs-ph:focus-visible{border-radius:var(--pv-r-sm)}
/* 列の数は箱の幅で決める（2 → 3 → 4。5列にはしない ＝ 写真が小さくなりすぎる）。概要に出す枚数も同じ刻み */
@container pvg (min-width:560px){
  .pvg-cgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .pvg-cteaser > li:nth-child(n+5){display:flex}
  .pvg-cteaser > li:nth-child(n+7){display:none}                /* 3列 × 2段 */
  .pvg-st-rg{flex-wrap:wrap;overflow:visible}
  .pvg-st-more > .pvg-btn{width:auto}
  .pvg-st-all > .pvg-btn{width:auto;min-width:280px}
}
@container pvg (min-width:720px){
  .pvg-cd-top{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:24px}
  .pvg-st-bar{grid-template-columns:minmax(220px,300px) minmax(0,1fr);align-items:center;gap:16px}
}
@container pvg (min-width:860px){
  .pvg-cgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pvg-cteaser > li:nth-child(n+5){display:none}                /* 4列 × 1段 */
}
/* カードが狭いあいだ（2列のあいだと、3列になった直後）は、3レターを写真の右上に出す ── 字の箱が 88〜150px しか無く、
   国名と同じ行に置くと「オーストラリア」「サウジアラビア」が語の途中で折れる（5社 × 〜414px の画面で実際に折れていた）。
   箱が 155px を超えたら（＝ いちばん長い国名8字と札が1行に並ぶ）、国名の行の右に在る（上の決まりのまま）。
   写真の無いカードは、写真の所に3レターが大きく出ている ＝ 札は見せない（読み上げには残す）。 */
@container pvg (max-width:599.98px){
  .pvg-cgrid .pvg-city-k{display:block}
  .pvg-cgrid .pvg-city-k > small{display:block}
  .pvg-cgrid .pvg-city-k > .pvg-code3{
    position:absolute;top:8px;right:8px;z-index:1;color:var(--pv-ink);background:var(--pv-surface);border-color:var(--pv-line);
    box-shadow:0 1px 2px color-mix(in srgb,var(--pv-navy) 16%,transparent),0 6px 14px -6px color-mix(in srgb,var(--pv-navy) 30%,transparent);
  }
  .pvg-cgrid .pvg-town-ph.is-none + .pvg-town-b .pvg-code3{width:1px;height:1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);box-shadow:none}
  /* 行き先の字は、語の途中で折らない（「ホテル・おす｜すめ」になっていた）。折れるのは「・」のあとだけ */
  .pvg-cgrid .pvg-town-go{font-size:12px;word-break:keep-all;overflow-wrap:anywhere}
}
/* いちばん狭い画面（〜335px）：「ニュージーランド」（8字 ＝ 96px）を1行に入れる */
@container pvg (max-width:287.98px){
  .pvg-cgrid .pvg-town-b{padding-left:8px;padding-right:8px}
  .pvg-cgrid .pvg-city-k > small{letter-spacing:-.02em}
}
.pvg-foot{margin-top:10px!important}
.pvg .pvg-link{
  display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;border:0;background:none;cursor:pointer;
  font:600 12.5px/1.4 'Noto Sans JP',Inter,sans-serif;color:var(--pv-accent-ink);text-decoration:none;
}
.pvg .pvg-link:hover{color:var(--pv-accent-ink);text-decoration:underline;text-underline-offset:3px}
.pvg .pvg-link:active{opacity:.7}
.pvg .pvg-link:focus-visible{outline:2px solid var(--pv-accent);outline-offset:2px;border-radius:6px}
/* 「◯◯のこと、ひとつ教えて。」の見出しの行 ── 見出しと「項目の一覧から足す」が横に入らない箱では、入口が下の行へ下りる（右寄せのまま）。
   見出しが折れるのは「…のこと、」と「ひとつ教えて。」のあいだだけ（2つの span が、それぞれ1かたまり）。
   16em ＝ 見出しがこれより狭くなる前に入口を下ろす幅（5社でいちばん長い前半「キャセイパシフィックのこと、」が1行に入る）。
   ⚠️ これを小さくすると、入口が横に残ったまま見出しが社名の途中で折れる（12em で、幅 414・430 の画面の3社がそうなった）。 */
.pvg-askc > .pvg-hd{flex-wrap:wrap;row-gap:0}
.pvg-askc > .pvg-hd .pvg-eyebrow{flex:1 1 16em}
.pvg-askc > .pvg-hd .pvg-eyebrow > span{display:inline-block;max-width:100%}
.pvg-topics{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:12px}
/* 集まった回答は、話題の上の1つの欄にまとめる（話題ごとに置くと、回答のある列だけ質問が下がる）。
   ⚠️ この欄を display:none で隠さない。career-live.js は「見えている箱」だけを取りに行くので、消すと永遠に読み込まれない。 */
.pvg-got{margin-top:12px}
.pvg-got > .pvg-askh{margin:0 0 6px!important}
.pvg-got .crl{font-size:13px}
.pvg-got .crl-fact:last-child{border-bottom:0}
/* 質問の行は、話題の札より一段軽く（枠なし・細い字・行のあいだに細い線）。話題の名前が先に目に入るように。
   ⚠️ 触れた時の地と枠は、ここで言い直す（上の行が .pvg-ask a:hover と同じ強さで後ろに在るので、言い直さないと黙って消える）。
   ⚠️ 触れた時の決まりに transform を書かない（none でも、ほかの動きでも同じ ── 押した時の決まりより強いので、押した時の縮みまで消える）。 */
.pvg-askc .pvg-ask ul{grid-template-columns:minmax(0,1fr);gap:0}
.pvg-askc .pvg-ask li + li{border-top:1px solid var(--pv-line-soft)}
.pvg-askc .pvg-ask a{padding:6px 8px 6px 12px;border-color:transparent;background:none;font-weight:500;color:var(--pv-ink-2)}
.pvg-askc .pvg-ask a:hover{border-color:var(--pv-accent-line);background:var(--pv-accent-soft);color:var(--pv-ink)}
.pvg-askc .pvg-askmore{padding-left:13px}
/* 「ほか◯問」は、質問を最初の4つに絞っている広い箱でだけ出す */
.pvg .pvg-askmore{display:none}
/* 話題の札 ── 淡い緑の面＋枠＋絵＋濃い緑の名前。色だけで見分けさせない（絵と枠と字の大きさが在る）。
   名前は 700（日本語の字は 400／500／700 しか読み込んでいない。800 にすると英字だけ太くなる）。
   ⚠️ 触れた時の字の色を言い直してある（言い直さないと、暗い画面で作り直していない色に替わる）。 */
.pvg-topic > summary{gap:10px;min-height:56px;padding:9px 12px;border:1px solid var(--pv-accent-line);border-radius:var(--pv-r);background:var(--pv-accent-soft);font-size:12px;font-weight:500;line-height:1.5;color:var(--pv-ink-2)}
.pvg-topic > summary .pvg-ico{background:var(--pv-surface)}
.pvg-topic > summary:hover{color:var(--pv-ink-2);border-color:var(--pv-accent-ink)}
.pvg-topic > summary:hover .pvg-tp-n,a.pvg-topic-a:hover .pvg-tp-n{text-decoration:underline;text-underline-offset:3px}
.pvg-tp{display:block;flex:1 1 0;min-width:0}
.pvg-tp-n{display:block;font-size:15px;font-weight:700;line-height:1.35;color:var(--pv-accent-ink);overflow-wrap:break-word}
.pvg-tp-m{display:flex;flex-wrap:wrap;gap:0 10px;word-break:keep-all;overflow-wrap:break-word}
.pvg-tp-q{white-space:nowrap;font-variant-numeric:tabular-nums}
/* 「ホテル・レストラン」は答える話題ではない ＝ 緑にしない（白い面・灰色の枠・名前は黒）。
   ⚠️ 矢印の決まりは「直下の絵」だけに掛ける（子孫に掛けると、左の絵の箱の中の絵まで右へ寄る）。 */
a.pvg-topic-a{display:flex;align-items:center;gap:10px;min-height:56px;padding:9px 12px;border:1px solid var(--pv-line);border-radius:var(--pv-r);background:var(--pv-surface);text-decoration:none;font-size:12px;font-weight:500;line-height:1.5;color:var(--pv-ink-2)}
a.pvg-topic-a .pvg-tp-n{color:var(--pv-ink)}
a.pvg-topic-a > .pvg-ic{flex:none;margin-left:auto;color:var(--pv-ink-3)}
a.pvg-topic-a:hover{border-color:var(--pv-accent-line)}
a.pvg-topic-a:active{opacity:.7}
a.pvg-topic-a:focus-visible{outline:2px solid var(--pv-accent);outline-offset:2px}

/* 口コミの区分の入口（口コミの部品が #pvg-revcats へ入れる。余白だけ合わせる） */
.pvg #airline-review-cats > div{max-width:none!important;padding:0!important}
.pvg #pvg-revcats:not(:empty){margin-top:20px}
.pvg #airline-review-cats .rcg-count{font-size:12px}
/* 区分のボタンは古い部品のもの。この節の中では、動かすのを位置だけにして、押した・選んだが分かるようにする */
.pvg #airline-review-cats .rcg-card{transition:transform .2s var(--pv-ease)}
.pvg #airline-review-cats .rcg-card:hover{border-color:var(--pv-accent-line)}
.pvg #airline-review-cats .rcg-card:focus-visible{outline:2px solid var(--pv-accent);outline-offset:2px}
.pvg #airline-review-cats .rcg-card:active{transform:scale(.98)}
/* 6枚なので、iPad から上は3列×2段。古い部品の4列は、iPad の幅で1枚が細くなり「ワークライフバランス」が4行に折れていた。
   3列なら、名前は語の途中では折らない。折れるのは語の切れ目（airline-reviews-ui.js の CAT_WBR）だけ
   ── 700〜800px では10文字の名前が1行に入らない（1枚の中の字の箱が 91〜125px・名前は 128px）。
   ⚠️ overflow-wrap を normal にしない。折れる所が1つも無くなり、名前が隣の件数の上へはみ出す（2026-10-09 に実際にそうなっていた）。
   699px までは2列に固定する。古い部品の「入るだけ並べる」は 488px から3列・638px から4列になり、
   640px で「ワークライフバランス」が5行に折れていた（2026-10-09 に測った）。
   479px までは件数を名前の下へ回し、右の矢印を出さない ── 1枚が 131〜210px しか無く、横に並べると
   名前の箱が3文字ぶんになる（360px で6枚中5枚が語の途中で折れていた）。 */
.pvg #airline-review-cats .rcg-label{word-break:keep-all;overflow-wrap:anywhere}
@media (min-width:700px){
  .pvg #airline-review-cats .rcg-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:699.98px){
  .pvg #airline-review-cats .rcg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:479.98px){
  .pvg #airline-review-cats .rcg-card{flex-wrap:wrap;align-content:center;row-gap:2px;padding:12px 10px}
  .pvg #airline-review-cats .rcg-count{flex:0 0 100%;padding-left:28px}
  .pvg #airline-review-cats .rcg-chevron{display:none}
}
/* 口コミの一覧（古い部品が描く）の押せるもの：絞り込みの札・投稿のボタン・ログインの入口・出典のリンク。
   マウスを載せた時の見た目しか無かったので、キーボードで選んだ時と押した時を足す */
.pvg-rvl .rcf-chip:focus-visible,.pvg-rvl .btn-review-post:focus-visible,.pvg-rvl .rv-gate-login:focus-visible,.pvg-rvl .rv-src a:focus-visible{outline:2px solid var(--pv-accent);outline-offset:2px}
.pvg-rvl .rv-sum-tag{display:inline-flex;align-items:center;min-height:20px;margin:0 0 6px;padding:0 8px;border-radius:999px;background:var(--pv-accent-soft);color:var(--pv-accent-ink);font-size:12px;font-weight:600}
.pvg-rvl .rcf-chip:active,.pvg-rvl .btn-review-post:active,.pvg-rvl .rv-gate-login:active,.pvg-rvl .rv-src a:active{opacity:.7}
.pvg-rvl .rv-src a:hover{text-decoration:underline}
/* 1枚ごとの錠前のボタンは置かない（airline-reviews-ui.js の cardCta）。説明の1行が箱の最後になるので、下の空きを詰める */
.pvg-rvl .rv-srv-note:last-child{margin-bottom:0}
/* 一覧のいちばん下の「メンバー限定データ」。カードの中の箱なので、狭い画面では左右の空きを詰める。
   320px で、ボタンの字の箱が「口コミデータを」の1語より 2px 狭くなり、語の途中で折れていた（余白が 画面24＋カード16＋箱24＋ボタン26 と4重）。
   ⚠️ ボタンの側（pv-gg.css）を小さくしない。置き場の箱を広げる。 */
@media (max-width:400px){
  .pvg-rvl .rv-post-gate{padding-left:14px;padding-right:14px}
}
/* 説明の下の空き。airline-base.css の 18px は、上の「.pvg p{margin:0}」に負けて 0 になっていた（説明とボタンがくっつく） */
.pvg-rvl .rv-gate-desc{margin-bottom:18px;text-wrap:pretty}
/* ★2026-10-09 「続きを読む」の錠前の小窓（airline-reviews-ui.js の readMoreGateTabbed。<body> の直下に出る ＝ .pvg の外）。
   入口のボタンは pv-gg.css のまま。ここは箱・閉じる・ログインの入口だけ。
   ⚠️ ここに .pv-gg の規則を書かない（形が置き場ごとに変わる）。狭い画面は箱の左右の空きを詰めて、ボタンの字の箱を広げる。
   ⚠️ うしろの幕の色は JS の側（ここには色の直書きを置かない）。 */
.pvg-rmg{box-sizing:border-box;padding:16px}
.pvg-rmg-box{position:relative;box-sizing:border-box;width:100%;max-width:380px;max-height:100%;overflow:auto;padding:44px 24px 24px;border:1px solid var(--pv-border);border-radius:18px;background:var(--pv-surface);color:var(--pv-text);text-align:center;box-shadow:var(--pv-shadow-lift)}
.pvg-rmg-x{position:absolute;top:4px;right:4px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;color:var(--pv-text-muted);font:inherit;font-size:18px;line-height:1;cursor:pointer;transition:transform .2s var(--pv-ease)}
.pvg-rmg-x:hover{color:var(--pv-text);background:var(--pv-surface-soft)}
.pvg-rmg-x:active{transform:scale(.92)}
.pvg-rmg-x:focus-visible,.pvg-rmg-login:focus-visible{outline:2px solid var(--pv-accent);outline-offset:2px}
.pvg-rmg-ic{margin-bottom:10px;font-size:28px;line-height:1}
.pvg-rmg-t{margin:0 0 8px;font-size:16px;font-weight:700;line-height:1.5;color:var(--pv-text);text-wrap:balance;word-break:keep-all;overflow-wrap:anywhere}
.pvg-rmg-d{margin:0 0 20px;font-size:13px;line-height:1.7;color:var(--pv-text-muted);text-wrap:pretty}
.pvg-rmg-d strong{font-weight:700;color:var(--pv-text)}
.pvg-rmg-login{display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:6px;font-size:13px;color:var(--pv-text-muted);text-decoration:underline;text-underline-offset:2px}
.pvg-rmg-login:hover{color:var(--pv-text)}
.pvg-rmg-login:active{opacity:.7}
.pvg-rmg-fine{margin:6px 0 0;font-size:12px;line-height:1.6;color:var(--pv-text-muted)}
@media (max-width:400px){
  .pvg-rmg-box{padding-left:14px;padding-right:14px}
}

/* ── 箱が広いとき ───────────────────────────────────── */
/* iPad 縦・横：左に給与（広め）／右に勤務・待遇・暮らしを縦に3つ。板は横いっぱい */
@container pvg (min-width:640px){
  .pvg{--pvg-gap:12px}
  .pvg-pay{padding:var(--pvg-pad) var(--pvg-pad) 6px}
  .pvg-cell{grid-template-columns:54px minmax(0,1fr) 32px;column-gap:12px;padding:12px 12px 12px 14px}
  .pvg-lead .pvg-note{display:block}
  .pvg-opt{display:inline}
  .pvg-pay > .pvg-hd .pvg-ico{width:28px;height:28px;border-radius:9px}
  /* 給与の欄は右の3つと同じ高さまで伸びる。説明の入口は欄の底に置く（勤務・待遇・暮らしの入口と同じ高さにそろう） */
  .pvg-paydt{margin-top:auto}
  .pvg-pay > .pvg-estk{display:block;margin-top:8px}
  .pvg-ranks{margin-top:10px}
  .pvg-rank > .pvg-track{margin-top:8px}
  .pvg-pub{
    margin-top:14px;margin-bottom:10px;padding:9px 14px 7px;border-radius:var(--pv-r-sm);
    background:var(--pv-surface-soft);border:1px solid var(--pv-line-soft);
  }
  .pvg-pub li{padding:5px 0}
  .pvg-pub li + li{border-top:1px dashed var(--pv-line)}
  .pvg-pk{line-height:1.5;white-space:normal;overflow:visible;text-wrap:pretty}
  .pvg-pv{font-size:16px}
  .pvg-pub > .pvg-note{display:block;padding-bottom:3px}
  .pvg-pub .pvg-pn,.pvg-pub .pvg-orig{display:block}
  .pvg-rp{margin-top:16px;padding-top:14px}
  .pvg-rp + .pvg-pub{margin-top:14px;padding-top:9px;border-top:1px solid var(--pv-line-soft)}
  .pvg-panel{padding:18px 20px}
  .pvg-ranks{gap:0 22px}
  /* その下は、どれも横いっぱいの帯（丈の違う箱を横に並べると、短い箱が長い箱の丈まで伸びて大きく空く） */
  /* 会社：写真は細い帯のまま。数字は3つずつ */
  .pvg-more-grid > .pvg-co{grid-template-columns:168px minmax(0,1fr);column-gap:20px}
  .pvg-co > .pvg-hd{grid-column:2}
  .pvg-co > .pvg-about{grid-column:2;font-size:13.5px}
  /* 写真のクレジットは写真のすぐ下（左の列の中）。幅いっぱいの1行にしない ── そのぶん年収が上がる。
     図の箱ごと左の列に置くので、クレジットは写真がどんな形でもその真下に来る（写真の高さを決め打ちして下げない） */
  .pvg-co > .pvg-photo{display:block;grid-column:1;grid-row:1 / span 4;align-self:start;margin:0;min-width:0}
  .pvg-co > .pvg-photo > figcaption{padding-top:2px;overflow-wrap:anywhere}
  .pvg-co > .pvg-co-more{grid-column:2;grid-row:4}
  .pvg-keys{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
  .pvg-keys > div{display:block;padding:5px 0}
  .pvg-keys dd{max-width:none;font-size:16px;text-align:left}
  /* 「会社情報」を開いているあいだは、同じ4つを上にもう一度並べない（開いた中に注記つきで全部在る） */
  .pvg-co:has(> .pvg-co-more[open]) > .pvg-keys{display:none}
  .pvg-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px}
  .pvg-stats dd b,.pvg-stats > div[data-mid] dd b{font-size:21px;line-height:1.3}
  .pvg-stats > div[data-long] dd b{font-size:15.5px}
  .pvg-jobs .pvg-dl{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 24px}
  /* ひとつ教えて：話題を横に並べ、質問の名前を最初から見せる（開くのは pv-glance.js。動かなくても畳んだまま使える） */
  .pvg-got .crl-facts{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
  .pvg-got .crl-fact{border-bottom:0}
  .pvg-topics{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
  .pvg-topics > a.pvg-topic-a{grid-column:1 / -1}
  .pvg-askc[data-flat] .pvg-topic > summary{cursor:default;pointer-events:none}
  .pvg-askc[data-flat] .pvg-topic > summary .pvg-chev{display:none}
  .pvg-askc[data-flat] .pvg-body{padding:4px 0 0}
  .pvg-askc[data-flat] .pvg-topic:not([data-all]) .pvg-ask li:nth-child(n+5){display:none}
  .pvg-askc[data-flat] .pvg-topic:not([data-all]) .pvg-askmore{display:inline-flex;margin-top:2px}
}
@container pvg (min-width:800px){
  /* 会社の4つの数字は横に1列（iPad 横・左メニューが出る幅。2段に折ると年収が最初の1画面から出る） */
  .pvg-keys{grid-template-columns:repeat(4,minmax(0,auto));justify-content:start;gap:0 32px}
}
/* PC：給与＋勤務・待遇・暮らしを同じ高さで横に4つ。給与は右の1枚の 1.32倍（額が2つ並ぶぶんだけ広い）。
   ⚠️ 給与をこれより広げない ── 右の3枚が狭くなって縦に伸び、その丈に合わせて給与の箱の中が空く
   （5 : 2.45 だった頃、5社とも 96〜177px 空いていた） */
@container pvg (min-width:1040px){
  .pvg{--pvg-gap:14px;--pvg-pad:18px}
  /* 会社：左に写真・右に見出しと数字。機材と出どころは、その下に横いっぱい。
     ⚠️ 写真を右の丈まで伸ばさない（横が切れて機首と尾翼が欠ける）。丈は数字の列の数で合わせる */
  .pvg-more-grid > .pvg-co{grid-template-columns:220px minmax(0,1fr);column-gap:28px;padding:20px 22px}
  .pvg-keys{grid-template-columns:repeat(4,minmax(0,auto));justify-content:start;gap:0 52px}
  .pvg-keys dd{font-size:17px;line-height:1.4}
  .pvg-co > .pvg-about{max-width:60em;font-size:14px}
  .pvg-co .pvg-fleet{margin-top:14px;border-top:1px solid var(--pv-line-soft)}
  .pvg-stats dd b,.pvg-stats > div[data-mid] dd b{font-size:23px}
  .pvg-stats > div[data-long] dd b{font-size:16px}
  .pvg-got .crl-facts{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* ★2026-10-29 話題は6つ（勤務スケジュール・通勤・Staff Travel・機長昇格・訓練・キャリア・休暇・手当）── 3つずつ2段（4列だと下の段が2つだけ余る） */
  .pvg-topics{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* ★2026-10-25 WP-compare-all-14（絵の本 #12）：給与の1枚と評価の1枚は、それぞれ中身の丈（隣の丈まで伸ばさない）。
     伸ばすと、給与の1枚の畳んだ説明（.pvg-dt の margin-top:auto）が底へ押され、「REAL PAY で全部見る」の下が大きく空いていた。 */
  .pvg-payrow{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .pvg-payrow:has(.pvg-rv-in > .crl[data-live="score"][data-state="empty"]) > .pvg-rv-card{align-self:start}
  .pvg-top{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"work ben live" "panel panel panel"}
  .pvg-trio{display:contents}
  .pvg-cell[data-cell="work"]{grid-area:work}
  .pvg-cell[data-cell="benefits"]{grid-area:ben}
  .pvg-cell[data-cell="living"]{grid-area:live}
  .pvg-panel{grid-area:panel}
  .pvg-cell{display:flex;flex-direction:column;align-items:stretch;padding:var(--pvg-pad)}
  .pvg-cell > .pvg-hd{flex-direction:row;gap:8px}
  .pvg-cell .pvg-eyebrow{font-size:12px;letter-spacing:.14em}
  .pvg-lead{margin-top:12px}
  .pvg-v{font-size:19px;line-height:1.35}
  .pvg-v.is-long{font-size:17px}
  .pvg-lead .pvg-note{margin-top:3px}
  .pvg-also{display:grid;margin-top:12px!important}
  .pvg-also li{display:grid;gap:1px;padding:7px 0;border-top:1px solid var(--pv-line-soft)}
  .pvg-also span{font-size:12px;line-height:1.45;color:var(--pv-ink-3)}
  .pvg-also b{font-size:13px;font-weight:700;line-height:1.45;color:var(--pv-ink);overflow-wrap:anywhere}
  .pvg-v .pvg-yen{display:block;margin:1px 0 0;font-size:12px}
  /* 欄の中から、その話題の質問へ直接進む（狭い箱では、開いた板の中に同じ入口がある） */
  .pvg-qs{display:block;margin-top:12px}
  .pvg-qh{font-size:12px;font-weight:700;letter-spacing:.08em;line-height:1.5;color:var(--pv-ink-3)}
  .pvg-qs a{
    position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;
    border-top:1px solid var(--pv-line-soft);
    font-size:12.5px;font-weight:600;line-height:1.4;color:var(--pv-ink);text-decoration:none;
    transition:transform .2s var(--pv-ease);
  }
  .pvg-qs li:first-child a{border-top:0}
  .pvg-qs a .pvg-ic{color:var(--pv-ink-3);transition:transform .2s var(--pv-ease)}
  .pvg-qs a:hover{color:var(--pv-accent-ink)}
  .pvg-qs a:hover .pvg-ic{color:currentColor;transform:translateX(2px)}
  .pvg-qs a:active{transform:scale(.99)}
  .pvg-qs a:focus-visible{outline:2px solid var(--pv-accent);outline-offset:2px;border-radius:6px}
  .pvg-more{
    display:flex;align-items:center;justify-content:space-between;width:auto;height:auto;min-height:44px;
    margin-top:auto;padding:8px 0 0;border-top:1px solid var(--pv-line-soft);border-radius:0;background:none;
    font-size:12.5px;font-weight:600;
  }
  .pvg-more > span{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
  .pvg-also + .pvg-more,.pvg-lead + .pvg-more,.pvg-qs + .pvg-more{margin-top:auto}
  .pvg-qs + .pvg-more{margin-top:auto;padding-top:8px}
  .pvg-panel{padding:20px 22px}
}

@media (prefers-reduced-motion:reduce){
  .pvg *,.pvg *::before,.pvg *::after,.pvg-hero *,.pvg-hero *::before,.pvg-hero *::after,.pvg-rmg *,.pvg-rmg *::before,.pvg-rmg *::after{transition:none!important}
}
/* 広い PC：会社の数字を4つずつ（2段に収まり、写真の丈とそろう） */
@container pvg (min-width:1180px){
  .pvg-co .pvg-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pvg-co .pvg-stats > div[data-mid] dd b{font-size:18px;line-height:1.5}
}

/* ══ タブのある会社ページ（先行5社）════════════════════
   帯は社名の行のすぐ下（書くのは gen-airline-glance.mjs の TABBED）。
   どのタブに居るかは <body class="pvg-at-…"> の1つだけで、出す・隠すはここが決める。
   pv-glance.js が動かなければ、その印が付かない ＝ 全部見える。 */

/* 社名：左にロゴ・その右に社名・社名の右に略号の札、社名の下に副題（2026-10-21 オーナー「航空会社名のタイトルの左横はロゴにしてね」）。
   左の色の線は置かない。ロゴの札の高さは社名の1行め（狭い画面 28px・広い画面 32px）で、社名を押しつぶさない（幅に上限）。
   狭い画面（〜699px）では略号の札を社名のすぐ下へ回す ── 右に置くと、ボタンの列のある会社で社名の欄が細くなり、
   「全日本空輸」が語の途中で折れる（全社へ広げる b で見た「1字ずつ折れる」の手前）。 */
.pvg-hero-t .pvg-name{grid-template-columns:auto minmax(0,auto) 1fr;column-gap:10px;row-gap:4px;align-items:start;padding-left:0;border-left:0}
.pvg-hero-t .pvg-name > .pvg-logo{grid-column:1;grid-row:1}
.pvg-hero-t .pvg-name > h1{grid-column:2;grid-row:1}
.pvg-hero-t .pvg-code{grid-column:3;grid-row:1;align-self:start;justify-self:start;margin-top:4px;font-size:12px;line-height:20px;padding:1px 8px}
.pvg-hero-t .pvg-name > .pvg-sub{grid-column:2 / -1;grid-row:2}
.pvg-hero-t .pvg-meta{padding-left:0}
/* ★社名の行の並び（2026-10-26 オーナー「会社名がケータイ画面とか細くなると縦長になるの直して」P12.132）。
   前は狭い画面で、社名の右に2つのボタンが縦に並び、330px の画面で社名が5字ずつの列になって7行に折れた（ジェットスター）。
   いまは、社名と拠点・星の箱（.pvg-who）がボタンより先に横幅を取る:
   ・700px から：折り返す並び。社名の箱は 480px より細くならない（＝ ロゴがいちばん広い会社でも社名に 10字ぶん。
     iPad の縦（768〜820px）ではボタンが下の行へ回る ── 420px にしていたあいだ、長い社名がそこで4行に折れた。
     上げすぎると 1001px（左メニューで箱がいちばん狭い 809px）でもボタンが下へ回る ── 809 − 24 − ボタン 272 ＝ 513px が上限）。
     〜1000px では、社名の折れない切れ目のいちばん長いものも1行に入る（min-width:auto ＝ 中身の最小幅。下の minmax(min-content,…) がそれを箱へ渡す）。
     入らなければ、ボタンが社名の箱の下の行へ回る ── 画面の幅ではなく箱の幅で決まる。
     入るとき（1001・1440 の会社ページはどれも）は、今までと同じ位置（社名の箱 ＝ 箱の幅 − ボタン − 24px）。
   ・スマホ（〜699px）：下の @media で、ボタンはいつも社名の箱の下の1行。
   ・〜1000px では、社名を語の切れ目（空白・「・」のあと・括弧の前）でだけ折る（就航地の街の名前と同じ keep-all）。1行に入らない長い語だけ、入る所で折る
     （break-word は中身の最小幅を変えない ＝ 上の「切れ目が入る幅」の計算が狂わない。anywhere にしない）。
     1001px から上は今までの折り方のまま（社名の長い会社の 1001px の絵を今日と同じにする。そこでは社名の欄が十分に広い）。
     ロゴの列は max-content ── 社名の列が切れ目の幅から始まると、ロゴの列と残りの幅を分け合ってロゴが縮んだ（琉球エアーコミューター 117 → 102px）。 */
.pvg-hero-t .pvg-id{display:flex;flex-wrap:wrap;align-items:center;column-gap:24px;row-gap:12px}
.pvg-hero-t .pvg-who{flex:1 1 480px}
.pvg-hero-t .pvg-acts{flex:none}
.pvg-hero-t .pvg-acts:empty{display:none}
@media (max-width:1000.98px){
  .pvg-hero-t .pvg-name{grid-template-columns:max-content minmax(min-content,auto) 1fr}
  .hero-airline.pvg-hero-t h1{word-break:keep-all;overflow-wrap:break-word}
}
/* ロゴの札：白い地に元の縦横比のまま（トップのレベリング図と同じ描き方）。ロゴの絵は白い地の上で描かれているので、暗い色の画面でも白
   （この白はトークンに無い）。読めなかったとき・ロゴの無い会社は、同じ大きさの会社の色の四角に頭文字。
   1行めの真ん中にそろえる（社名の行の高さ 1.2em と札の高さの差の半分だけ上へ）。 */
.pvg-logo{
  --lg-h:28px;--pvg-logo-bg:white;
  display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  height:var(--lg-h);min-width:var(--lg-h);max-width:76px;padding:3px 6px;overflow:hidden;
  border-radius:var(--pv-r-sm);background:var(--pvg-logo-bg);border:1px solid var(--pv-line);
  font-size:20px;margin-top:calc(.6em - var(--lg-h) / 2);
}
.pvg-logo > img{display:block;height:100%;width:auto;max-width:100%;object-fit:contain}
.pvg-logo > .pvg-mono{display:none}
.pvg-logo.is-mono,.pvg-logo.is-fail{width:var(--lg-h);max-width:none;padding:0;border:0;background:var(--pvg-c,var(--pv-accent))}
.pvg-logo.is-mono > .pvg-mono,.pvg-logo.is-fail > .pvg-mono{
  display:grid;place-items:center;width:100%;height:100%;
  font:800 12px/1 Inter,sans-serif;letter-spacing:.02em;color:var(--pvg-mono-ink,white);
}
.pvg-logo.is-fail > img{display:none}
@media (min-width:700px){
  .pvg-logo{--lg-h:32px;max-width:136px;padding:3px 8px;font-size:26px}
  .pvg-logo.is-mono > .pvg-mono,.pvg-logo.is-fail > .pvg-mono{font-size:13px}
}

/* 社名の横の2つ：カードを保存（薄い緑）／他社と比較（緑の面） */
.pvg-hero-t .pvg-btn{gap:7px;border-radius:var(--pv-r-sm)}
.pvg-hero-t .pvg-btn-save{color:var(--pv-accent-ink);background:var(--pv-accent-soft);border-color:var(--pv-accent-line)}
.pvg-hero-t .pvg-btn-save:hover{background:var(--pv-accent-soft);border-color:var(--pv-accent)}
/* 緑の面はライトでもダークでも同じ色（pv-tokens.css）＝ 上に載る字も両方で白。この白はトークンに無い */
.pvg-hero-t .pvg-btn-cmp{--pvg-on:white;color:var(--pvg-on);background:var(--pv-accent-dark);border-color:var(--pv-accent-dark)}
.pvg-hero-t .pvg-btn-cmp:hover{background:var(--pv-accent-dark)}
@media (max-width:699.98px){
  /* スマホ：2つのボタンは、いつも社名の箱の下の1行に横に半分ずつ（社名と拠点・星に横幅をぜんぶ渡す。上の ★2026-10-26） */
  .pvg-hero-t .pvg-id{display:grid;grid-template-columns:minmax(0,1fr);row-gap:10px}
  .pvg-hero-t .pvg-acts{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pvg-hero-t .pvg-btn{min-height:36px;padding:0 12px;font-size:12px}
  .pvg-hero-t .pvg-btn::before{content:"";position:absolute;inset:-6px 0}   /* 見える丈は 36px・押せる丈は 46px（枠の外へ上下 5px ずつ ＝ 上の拠点・星の行とのあいだ 10px を分け合う） */
  .hero-airline.pvg-hero-t h1{font-size:20px!important}
  .pvg-hero-t .pvg-name{grid-template-columns:auto minmax(0,1fr);column-gap:10px}
  .pvg-hero-t .pvg-code{grid-column:2;grid-row:2;margin-top:0;font-size:12px;line-height:18px}
  .pvg-hero-t .pvg-name > .pvg-sub{grid-column:2;grid-row:3}
  /* 読めなかった時の「いま読み出せません｜やり直す」は、入らなければ2行にする。
     1行のままだと、〜351px の画面で「やり直す」が右の2つのボタンの下へもぐって押せなかった */
  .pvg-hero-t .crl[data-state="error"]{flex-wrap:wrap;gap:4px 8px}
}
/* いちばん狭い画面（〜359px）だけ、社名を 18px に。切れ目の無い10字の社名（キャセイパシフィック）が1行に入る
   （20px のままだと 320px の画面で「キャセイパシフィッ｜ク」と、最後の1字だけが次の行へ落ちた） */
@media (max-width:359.98px){
  .hero-airline.pvg-hero-t h1{font-size:18px!important}
  .pvg-hero-t .pvg-logo{font-size:18px}   /* ロゴの札の高さの中心を、社名の1行めの中心に合わせたまま（.pvg-logo の margin-top は em） */
}

/* タブの帯（ヘッダーのすぐ下に貼り付く） */
/* 地はページの地をそのまま借りる（会社ページの地はトークンではなく airline-base.css が決めている） */
.pvg-tabbar{position:sticky;top:var(--pv-topbar,72px);z-index:90;margin-top:4px;background-color:inherit}
.pvg-tabbar *,.pvg-tabbar *::before,.pvg-tabbar *::after{box-sizing:border-box}
.pvg-tabrow{display:flex;align-items:center;gap:12px;min-width:0;box-shadow:inset 0 -1px 0 var(--pv-line)}
/* ★帯が入りきらない幅では、続きが在る側の端を薄くして小さい矢印を置く（2026-10-08 オーナーのご指示
   「タブ名が途中で切れて気付けない」）。どちらの端に続きが在るかは pv-glance.js が実際に測って
   枠の data-more（"l"・"r"・"l r"）へ書く。入りきる幅では何も付かない ＝ 印も出ない。
   ⚠️ 印は飾り（押せない）。押すのはタブそのもので、選んだタブは JS が帯のまんなかへ寄せる。 */
.pvg-tabwrap{position:relative;flex:1 1 auto;display:flex;min-width:0}
.pvg-tabwrap::before,.pvg-tabwrap::after{
  content:"";position:absolute;top:50%;z-index:1;width:7px;height:7px;margin-top:-4px;pointer-events:none;
  border-top:2px solid var(--pv-ink-2);border-right:2px solid var(--pv-ink-2);opacity:0;transition:opacity .2s var(--pv-ease);
}
.pvg-tabwrap::after{right:3px;transform:rotate(45deg)}
.pvg-tabwrap::before{left:3px;transform:rotate(-135deg)}
.pvg-tabwrap[data-more~="r"]::after,.pvg-tabwrap[data-more~="l"]::before{opacity:1}
.pvg-tabwrap[data-more="r"] > .pvg-tabs{-webkit-mask-image:linear-gradient(to right,black calc(100% - var(--pvg-fade)),transparent calc(100% - 12px));mask-image:linear-gradient(to right,black calc(100% - var(--pvg-fade)),transparent calc(100% - 12px))}
.pvg-tabwrap[data-more="l"] > .pvg-tabs{-webkit-mask-image:linear-gradient(to left,black calc(100% - var(--pvg-fade)),transparent calc(100% - 12px));mask-image:linear-gradient(to left,black calc(100% - var(--pvg-fade)),transparent calc(100% - 12px))}
.pvg-tabwrap[data-more="l r"] > .pvg-tabs{-webkit-mask-image:linear-gradient(to right,transparent 12px,black var(--pvg-fade),black calc(100% - var(--pvg-fade)),transparent calc(100% - 12px));mask-image:linear-gradient(to right,transparent 12px,black var(--pvg-fade),black calc(100% - var(--pvg-fade)),transparent calc(100% - 12px))}
.pvg-tabs{--pvg-fade:40px;flex:1 1 auto;display:flex;align-items:stretch;gap:26px;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;scroll-padding-inline:44px}
.pvg-tabs::-webkit-scrollbar{display:none}
.pvg-tabs > a{
  position:relative;flex:none;display:inline-flex;align-items:center;gap:7px;min-height:48px;padding:0 1px;
  font:500 14px/1.2 'Noto Sans JP',Inter,sans-serif;white-space:nowrap;text-decoration:none;color:var(--pv-ink-2);
}
.pvg-tabs > a::before{content:"";position:absolute;inset:0 -10px}          /* 押せる範囲を左右に広げる */
.pvg-tabs > a{scroll-margin-inline:10px}                                    /* 帯が横に流れてタブを画面へ寄せる時、広げた分ごと入れる（端で切らない） */
.pvg-tabs > a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px 2px 0 0;
  background:var(--pv-accent);opacity:0;transition:opacity .2s var(--pv-ease);
}
.pvg-tabs > a:hover{color:var(--pv-ink)}
.pvg-tabs > a:active{opacity:.7}
.pvg-tabs > a:focus-visible{outline:2px solid var(--pv-accent);outline-offset:-2px;border-radius:6px}
.pvg-tabs > a[aria-current="page"]{font-weight:700;color:var(--pv-accent-ink)}
.pvg-tabs > a[aria-current="page"]::after{opacity:1}
.pvg-tabs .pvg-ic{flex:none;width:16px;height:16px}
.pvg-add{
  position:relative;flex:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;cursor:pointer;
  border-radius:var(--pv-r-sm);border:1px solid var(--pv-accent-line);
  font:700 13px/1 'Noto Sans JP',Inter,sans-serif;white-space:nowrap;
  color:var(--pv-accent-ink);background:var(--pv-accent-soft);transition:transform .2s var(--pv-ease);
}
.pvg-add::before{content:"";position:absolute;inset:-6px 0}                 /* 見える丈は 36px・押せる丈は 46px（inset は枠線の内側から測る ＝ 枠の外へは 5px） */
.pvg-add > b{font-weight:700}
.pvg-add:hover{border-color:var(--pv-accent);transform:translateY(-1px)}
.pvg-add:active{transform:translateY(0) scale(.98)}
.pvg-add:focus-visible{outline:2px solid var(--pv-accent);outline-offset:2px}
@media (max-width:699.98px){
  /* スマホ：絵を外して字だけ・入りきらない分は横に送る */
  /* 先頭の「概要」は2文字 ＝ 幅 28px。左へ広げた押せる範囲が、横に流れる帯の左端で切れないように、帯を 10px 左へ広げる（字の位置は動かない） */
  .pvg-tabwrap{margin-left:-10px}
  .pvg-tabs{gap:20px;padding-left:10px}
  .pvg-tabs > a{min-height:44px;font-size:13px}
  .pvg-tabs .pvg-ic{display:none}
  .pvg-add{padding:0 12px}
  .pvg-add .pvg-add-w{display:none}
}
@media (min-width:700px) and (max-width:899.98px){
  /* iPad 縦：6つのタブを1列に全部見せる（「ステイ先」が追加ボタンの下へ隠れていた）。ボタンの字を短くし、間を少し詰める */
  .pvg-tabs{gap:22px}
  .pvg-add .pvg-add-w{display:none}
}
@media (min-width:700px) and (max-width:759.98px){
  /* iPad mini 縦（744）など：絵を付けたままだと最後の「ステイ先」が 11px だけ切れる。絵を外して6つとも入れる */
  .pvg-tabs .pvg-ic{display:none}
}

/* 昔からの節の小さい字の注記：切れ目の無い長い英字（採用窓口のメールアドレス）が箱から出ない。
   キャセイの概要が、320px の画面でこの1行のためにページごと横へ 5px 広がっていた。
   入らない語だけを折る（break-word ＝ 箱の幅の決まり方は変えない）。
   ⚠️ 節ぜんぶに掛けない。掛けていたあいだ、2列の機材カードの機種名（A321neo・B737/767）が字の途中で折れた。 */
.glass[data-pvg-pane] .text-xs{overflow-wrap:break-word}
/* 下に残っている昔からの節（よくある質問）の押せるもの ── 質問の行とリンク。
   載せた・押した・キーボードで選んだ、の3つが分かるようにする。説明の字（押せないもの）には付けない */
.glass[data-pvg-pane] summary:hover,.glass[data-pvg-pane] a[href]:hover{opacity:.82}
.glass[data-pvg-pane] summary:active,.glass[data-pvg-pane] a[href]:active{opacity:.64}
.glass[data-pvg-pane] summary:focus-visible,.glass[data-pvg-pane] a[href]:focus-visible{outline:2px solid var(--pv-accent);outline-offset:2px;border-radius:6px}
/* 同じ節の表：iPad から上では、機種名と路線の札を字の途中で折らない（狭い画面は表ごと横に流すので、そこでは掛けない） */
@media (min-width:700px){
  .glass[data-pvg-pane] td > span.font-bold,.glass[data-pvg-pane] .tag{white-space:nowrap}
}
/* 出す・隠す：いまのタブの名前が data-pvg-pane に無いものは出さない */
.pvg-at-overview [data-pvg-pane]:not([data-pvg-pane~="overview"]),
.pvg-at-pay [data-pvg-pane]:not([data-pvg-pane~="pay"]),
.pvg-at-reviews [data-pvg-pane]:not([data-pvg-pane~="reviews"]),
.pvg-at-work [data-pvg-pane]:not([data-pvg-pane~="work"]),
.pvg-at-life [data-pvg-pane]:not([data-pvg-pane~="life"]),
.pvg-at-stay [data-pvg-pane]:not([data-pvg-pane~="stay"]){display:none!important}

/* 概要のほかのタブ：最上段の4つ組をやめて、出ているものを縦に1列。
   そのタブの本文になった板は閉じられない（× を出さない）・浮いた板ではなく普通の箱にする */
.pvg-at-pay .pvg-top,.pvg-at-work .pvg-top,.pvg-at-life .pvg-top{grid-template-columns:minmax(0,1fr);grid-template-areas:none}
.pvg-at-pay .pvg-top .pvg-panel,.pvg-at-work .pvg-top .pvg-panel,.pvg-at-life .pvg-top .pvg-panel{grid-area:auto}
.pvg-at-pay .pvg-panel,.pvg-at-work .pvg-panel,.pvg-at-life .pvg-panel{box-shadow:var(--pv-shadow);border-color:var(--pv-line)}
.pvg-at-pay .pvg-panel .pvg-x,.pvg-at-work .pvg-panel .pvg-x,.pvg-at-life .pvg-panel .pvg-x{display:none}
/* 口コミのタブ：抜粋は出さない（すぐ下に一覧が在る）。入口の字は「全ての口コミデータを解放する」のほう */
.pvg-at-reviews .pvg-rv-in > .crl[data-live="reviews"]{display:none}
.pvg-at-reviews .pvg-rv-in > .pvg-rv-cta-overview{display:none}
.pvg-at-reviews .pvg-rv-in > .pvg-rv-cta-reviews{display:flex}
/* 給与・口コミのタブ：年収の段に出ているのは1枚だけ ＝ 横いっぱいに使う */
.pvg-at-pay .pvg-payrow,.pvg-at-reviews .pvg-payrow{grid-template-columns:minmax(0,1fr)}
/* そのタブでいちばん上に来る段は、上の余白を取らない */
.pvg-at-pay .pvg-payrow,.pvg-at-work .pvg-top,.pvg-at-life .pvg-top,.pvg-at-reviews .pvg-payrow,.pvg-at-stay .pvg-g-st{margin-top:0}
.pvg-rvl{margin-top:var(--pvg-gap)}
.pvg-rvl > .pvg-hd{margin-bottom:12px}

@media (prefers-reduced-motion:reduce){
  .pvg-tabbar *,.pvg-tabbar *::before,.pvg-tabbar *::after{transition:none!important}
}

/* ── 勤続年数ごとの基本給（.pvg-ps・★2026-11-02）──────────────
   棒は HTML の箱（SVG にしない ＝ 角が伸びない・目盛の円の字を通貨切替が読める）。
   機長 ＝ 会社の色を字の色（--pv-ink）へ寄せた色・副操縦士 ＝ 会社の色を面の色（--pv-surface）へ寄せた色。
   明るい画面では「濃い機長・薄い副操縦士」、暗い画面では「明るい機長・沈んだ副操縦士」になる（どちらも2本の差は大きいまま）。
   暗い画面の書き分けは持たない（トークンがダークで替わる ＝ 棒も一緒に替わる）。字は字の色だけ（棒の色を字に使わない）。 */
.pvg-ps{--ps-ca:color-mix(in srgb,var(--pvg-c,var(--pv-accent)) 72%,var(--pv-ink));--ps-fo:color-mix(in srgb,var(--pvg-c,var(--pv-accent)) 50%,var(--pv-surface))}
.pvg-ps > .pvg-hd{flex-wrap:wrap;row-gap:6px}
.pvg-ps-seg{display:inline-flex;flex-wrap:wrap;align-self:flex-start;gap:2px;margin:10px 0 2px;padding:3px;border-radius:999px;background:var(--pv-bg-sub);border:1px solid var(--pv-line-soft)}
.pvg-ps-seg button{padding:6px 12px;border:0;border-radius:999px;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--pv-ink-3);cursor:pointer;transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.pvg-ps-seg button:hover{color:var(--pv-ink)}
.pvg-ps-seg button:active{transform:scale(.97)}
.pvg-ps-seg button:focus-visible{outline:2px solid var(--pv-accent);outline-offset:2px}
.pvg-ps-seg button[aria-pressed="true"]{color:var(--pv-ink);background:var(--pv-surface);box-shadow:var(--pv-shadow)}
.pvg-ps-pick{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:12px 0 2px;font-size:13px;font-weight:600;color:var(--pv-ink-2)}
.pvg-ps-sel{min-width:0;max-width:100%;padding:8px 36px 8px 14px;border:1px solid var(--pv-line);border-radius:999px;font:inherit;font-size:16px;font-weight:600;color:var(--pv-ink);
  background:var(--pv-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  -webkit-appearance:none;appearance:none;cursor:pointer;box-shadow:var(--pv-shadow);transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.pvg-ps-sel:hover{border-color:var(--pv-ink-3)}
.pvg-ps-sel:focus-visible{outline:2px solid var(--pv-accent);outline-offset:2px}
.pvg-ps-sel:active{transform:scale(.99)}
.pvg-ps-t{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:12px}
.pvg-ps-t[hidden]{display:none}
.pvg-ps-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pvg-ps-tile{min-width:0;padding:12px 14px;border:1px solid var(--pv-line);border-radius:14px}
.pvg-ps-k{display:flex;align-items:center;gap:6px;margin:0;font-size:12.5px;font-weight:600;color:var(--pv-ink-2)}
.pvg-ps-sw{flex:none;width:10px;height:10px;border-radius:3px;background:var(--ps-ca)}
.pvg-ps-sw.pvg-ps-fo{background:var(--ps-fo)}
.pvg-ps-g{margin:2px 0 0;font-size:26px;font-weight:800;line-height:1.25;letter-spacing:-.03em;color:var(--pv-ink)}
.pvg-ps-g small{display:inline-block;margin-left:3px;font-size:13px;font-weight:600;letter-spacing:0;white-space:nowrap;color:var(--pv-ink-3)}
.pvg-ps-r{margin:4px 0 0;font-size:12.5px;line-height:1.55;color:var(--pv-ink-3);font-variant-numeric:tabular-nums}
.pvg-ps-plot{position:relative;min-width:0;padding-left:52px}
.pvg-ps-grid{position:absolute;left:0;right:0;top:18px;height:200px;pointer-events:none}
.pvg-ps-grid > span{position:absolute;left:52px;right:0;border-top:1px solid var(--pv-line-soft)}
.pvg-ps-grid > span > i{position:absolute;right:calc(100% + 6px);top:-8px;font-style:normal;font-size:12px;line-height:16px;white-space:nowrap;color:var(--pv-ink-3);font-variant-numeric:tabular-nums}
.pvg-ps-cols{position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));align-items:end}
.pvg-ps-col{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:18px 0 0;border:0;border-radius:10px;background:none;font:inherit;cursor:pointer}
.pvg-ps-col:hover{background:color-mix(in srgb,var(--pv-bg-sub) 60%,transparent)}
.pvg-ps-col:active .pvg-ps-bars{transform:scaleY(.985)}
.pvg-ps-col:focus-visible{outline:2px solid var(--pv-accent);outline-offset:1px}
.pvg-ps-col[aria-pressed="true"]{background:var(--pv-bg-sub)}
.pvg-ps-bars{display:flex;align-items:flex-end;justify-content:center;gap:2px;width:100%;height:200px;transform-origin:bottom;transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.pvg-ps-b{width:min(12px,calc(50% - 3px));min-height:0;border-radius:4px 4px 0 0;background:var(--ps-ca)}
.pvg-ps-b.pvg-ps-fo{background:var(--ps-fo)}
.pvg-ps-x{padding-bottom:4px;font-size:12px;line-height:16px;color:var(--pv-ink-3);font-variant-numeric:tabular-nums}
.pvg-ps-col[aria-pressed="true"] .pvg-ps-x{font-weight:700;color:var(--pv-ink)}
.pvg-ps-ax{margin:4px 0 0;text-align:center;font-size:12px;color:var(--pv-ink-3)}
.pvg-ps-ax span::before{content:"・"}
.pvg-ps-read{display:grid;grid-template-columns:auto 1fr 1fr;gap:4px 16px;align-items:start;padding:14px 16px;border-radius:14px;background:var(--pv-bg-sub)}
.pvg-ps-read[hidden]{display:none}
.pvg-ps-yr{margin:2px 0 0;font-size:15px;font-weight:700;color:var(--pv-ink)}
.pvg-ps-pr{display:flex;flex-direction:column;gap:1px;min-width:0}
.pvg-ps-pr .pvg-ps-k{font-size:12px;font-weight:500;color:var(--pv-ink-3)}
.pvg-ps-pr .pvg-ps-sw{width:8px;height:8px;border-radius:2px}
.pvg-ps-v{margin:0;font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--pv-ink)}
.pvg-ps-d{display:flex;flex-direction:column;margin:0;white-space:nowrap;font-size:13px;font-weight:600;color:var(--pv-accent-ink)}
.pvg-ps-d small{font-size:12px;font-weight:500;color:var(--pv-ink-3)}
.pvg-ps-note{margin:12px 0 0;font-size:12.5px;line-height:1.7;color:var(--pv-ink-3)}
/* 13年より多い表（FedEx・UPS の15段）は、狭い箱で偶数年の数字を間引く（選んだ年は出す）── 数字どうしがくっつくため */
@container pvg (max-width:559.98px){.pvg-ps-many .pvg-ps-col:nth-child(even):not([aria-pressed="true"]) .pvg-ps-x{visibility:hidden}}
@container pvg (max-width:419.98px){.pvg-ps-plot{padding-left:44px}.pvg-ps-grid > span{left:44px}.pvg-ps-g{font-size:22px}.pvg-ps-ax span{display:block}.pvg-ps-ax span::before{content:none}}
@container pvg (min-width:860px){
  .pvg-ps-t{grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"plot tiles" "plot reads";grid-template-rows:auto 1fr;column-gap:28px;row-gap:12px;align-items:start}
  .pvg-ps-tiles{grid-area:tiles}
  .pvg-ps-plot{grid-area:plot}
  .pvg-ps-reads{grid-area:reads}
  .pvg-ps-read{grid-template-columns:1fr 1fr;grid-template-areas:"yr yr";gap:10px 16px;padding:16px 18px}
  .pvg-ps-read .pvg-ps-yr{grid-area:yr}
  .pvg-ps-grid,.pvg-ps-bars{height:300px}
}

/* ── 調べた条件（米国の会社・2026-11-02）──────────────────────────
   us-terms.mjs の行を、タブごとに1枚。一覧の見た目は「会社が公表している条件」と同じ（.pvg-dl）。
   下の1行は、行ごとの出典リンクが無いことの代わりに、誰が何からまとめたかを言う。 */
.pvg-tm .pvg-dl{margin-top:4px}
.pvg-tm-src{margin-top:10px;font-size:12px;line-height:1.6;color:var(--pv-ink-3)}
/* 米国の住宅地の詳細：紹介の下に、3寝室の戸建ての掲載例（成約ではない ── 字で言う）。紹介より一段控えめ */
.pvg-td-h > p.pvg-td-more{margin-top:4px!important;font-size:12px;color:var(--pv-ink-3)}

/* ── 暮らし：都市のタブ（都市が2つ以上の会社。★2026-11-03 オーナー「複数ある都市を羅列ではなく、タブとかにして選んだらその都市見れるようにして」）──
   見た目は就航地の地域の札（.pvg-pill）と同じ。狭い箱では横へ送る（折ると何段にもなり、都市の欄が下がる）・広い箱では折り返して全部見せる。
   切り替えるのは pv-glance.js（data-js が付く）。動かなければタブは出ず、都市の欄が縦に並んだまま。 */
.pvg-lvt{display:flex;gap:6px;min-width:0;margin:-6px -2px 10px;padding:6px 2px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;--lvt-fade:36px}
.pvg-lvt::-webkit-scrollbar{display:none}
.pvg-livs:not([data-js]) > .pvg-lvt{display:none}
.pvg-livs > .pvg-liv[hidden]{display:none}
.pvg-lvt > .pvg-pill[aria-selected="true"]{color:var(--pv-accent-ink);background:var(--pv-accent-soft);border-color:var(--pv-accent)}
.pvg-lvt > .pvg-pill[aria-selected="true"] > small{color:var(--pv-accent-ink)}
.pvg-lvt[data-more="r"]{-webkit-mask-image:linear-gradient(to right,black calc(100% - var(--lvt-fade)),transparent);mask-image:linear-gradient(to right,black calc(100% - var(--lvt-fade)),transparent)}
.pvg-lvt[data-more="l"]{-webkit-mask-image:linear-gradient(to left,black calc(100% - var(--lvt-fade)),transparent);mask-image:linear-gradient(to left,black calc(100% - var(--lvt-fade)),transparent)}
.pvg-lvt[data-more="l r"]{-webkit-mask-image:linear-gradient(to right,transparent,black var(--lvt-fade),black calc(100% - var(--lvt-fade)),transparent);mask-image:linear-gradient(to right,transparent,black var(--lvt-fade),black calc(100% - var(--lvt-fade)),transparent)}
@container pvg (min-width:700px){ .pvg-lvt{flex-wrap:wrap;overflow:visible} .pvg-lvt[data-more]{-webkit-mask-image:none;mask-image:none} }

/* ★2026-11-07「＋ フォロー」── ボタンの列の先頭。形は .pvg-btn と同じ大きさ（オーナー「カードを保存とかと同じボタンの大きさにして」）。
   class は pvg-btn にしない（押せる2つの数を見ている検査を崩さない）ので、形だけここで同じにする。押すのは pv-follow.js。 */
.pvg-follow{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 18px;
  border-radius:999px;border:1px solid var(--pv-line);font-family:inherit;
  font-size:13px;font-weight:700;letter-spacing:.02em;white-space:nowrap;cursor:pointer;
  color:var(--pv-ink);background:var(--pv-surface);
  position:relative;transition:transform .25s var(--pv-ease);
}
.pvg-follow::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;box-shadow:var(--pv-shadow-lift);opacity:0;transition:opacity .25s var(--pv-ease)}
.pvg-follow:hover{transform:translateY(-1px)}
.pvg-follow:hover::after{opacity:1}
.pvg-follow:active{transform:translateY(0) scale(.98)}
.pvg-follow:focus-visible{outline:2px solid var(--pv-accent);outline-offset:2px}
.pvg-follow-ic{font-size:15px;line-height:1}
.pvg-follow.is-on{color:var(--pv-accent-ink);border-color:var(--pv-accent)}
.pvg-hero-t .pvg-follow{border-radius:var(--pv-r-sm)}
.pvg-follow-note{grid-column:1/-1;font-size:12px;color:var(--pv-ink-3)}
.pvg-hero .pvg-acts.pvg-acts-3{grid-template-columns:repeat(3,auto)}
.pvg-hero .pvg-acts.pvg-acts-1{grid-template-columns:auto}
@media (max-width:699.98px){
  /* スマホ：3つを1行に3等分（今までの2つの半分ずつと同じ丈・同じ字の大きさ） */
  .pvg-hero-t .pvg-acts.pvg-acts-3,.pvg-hero .pvg-acts.pvg-acts-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .pvg-hero-t .pvg-acts-3 .pvg-btn{padding:0 8px}
  .pvg-follow{min-height:36px;padding:0 8px;font-size:12px}
  .pvg-hero-t .pvg-follow{border-radius:var(--pv-r-sm)}
  .pvg-follow::before{content:"";position:absolute;inset:-6px 0}
  .pvg-hero .pvg-acts.pvg-acts-1{grid-template-columns:minmax(0,1fr)}
}
/* いちばん狭い画面：ボタンの中の小さな絵を外して、字を1行に残す */
@media (max-width:399.98px){
  .pvg-hero-t .pvg-acts-3 .pvg-btn > svg,.pvg-hero-t .pvg-acts-3 .pvg-btn > .pvg-ic{display:none}
}