/* career.css — 就航地・数字の詳細・2社の比較・カード保存の枠（career.html だけが読む）。
 * ★2026-10-26 P12.130：入口の画面（見出しの写真・会社のカード）は無い ── その見た目も外した。
 *
 * ・色は pv-tokens.css のトークンだけ。ここに色の値を直書きしない
 *   （ダークは [data-theme="dark"] がトークンごと差し替える。ここでは何もしない）。
 *   紺の面と写真の上の字は、ライトでもダークでも白 ── white と color-mix で作る。
 * ・会社の色は HTML が --cr-co で渡す（出どころは airlines-meta.js）。
 * ・動かすのは transform と opacity だけ。
 * ・字は 12px 以上・押す場所は 44px 以上（assert-career.mjs が見ている）。
 * ・数字はここに1つも無い。棒の長さも HTML が --w で渡す（gen-career.mjs）。
 */

.cr{
  max-width:1040px;margin:0 auto;
  --cr-on:white;
  --cr-on-2:color-mix(in srgb, white 74%, transparent);
  --cr-on-3:color-mix(in srgb, white 58%, transparent);
  --cr-hair:color-mix(in srgb, white 11%, transparent);
  /* 粒子（紺の面と入口の写真に薄く重ねる）。 */
  --cr-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}
/* 5社ぶんを全部置いて、選ばれた分だけ見せている。display を持つ部品にも必ず効かせる。 */
.cr [hidden]{display:none !important}
/* 画面には出さず、読み上げにだけ残す（社名・職位）。 */
.cr-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
       overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

.cr-view{animation:cr-in .36s var(--pv-ease) both}
@keyframes cr-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.cr-h1{font-weight:800;letter-spacing:-.03em;line-height:1.2;color:var(--pv-ink)}
.cr-h1:focus{outline:none}

.cr a:focus-visible,.cr button:focus-visible,.cr summary:focus-visible{
  outline:2px solid var(--pv-accent);outline-offset:2px;border-radius:8px}

.cr-ic{flex:none;transition:transform .22s var(--pv-ease)}

/* 略号の札（写真の上）。 */
.cr-code{position:absolute;z-index:1;left:10px;bottom:10px;padding:3px 8px;border-radius:8px;
         background:color-mix(in srgb, white 94%, transparent);color:var(--pv-navy);
         font:800 12px/1.45 Inter,sans-serif;letter-spacing:.07em}

/* 札（推定／求人の掲載額／公式募集例／条件つきの給与例）。 */
.cr-tag{display:inline-block;padding:1px 8px;border-radius:999px;white-space:nowrap;
        background:var(--pv-surface);border:1px solid var(--pv-accent-line);color:var(--pv-accent-ink);
        font-size:12px;font-weight:700;line-height:1.5}

/* 写真の箱（比較の札・概要の写真）。 */
.cr-opt-p img,.cr-hero img{display:block;width:100%;height:100%;object-fit:cover}
.cr-opt-p::before,.cr-hero::before{content:"";position:absolute;inset:0;pointer-events:none}
.cr-opt-p::after,.cr-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  mix-blend-mode:multiply;background:color-mix(in srgb, var(--pv-navy) 14%, transparent)}

.cr-else{margin-top:14px}
.cr-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;
         color:var(--pv-accent-ink);font-size:14px;font-weight:700;text-decoration:none}
.cr-link:active,.cr-back:active,.cr-card-n:active{opacity:.6}
/* 会社ページの該当タブへの入口（会社ごと）。狭い画面は1社1行（行ぜんたいが押せる）・広い画面は2社を横に。 */
.cr-gos{display:grid;margin-top:12px;padding-top:4px;border-top:1px solid var(--pv-line)}
.cr-go{display:flex;gap:8px;min-height:44px;color:var(--pv-ink)}
.cr-go-n{min-width:0}
.cr-go-t{margin-left:auto;flex:none;color:var(--pv-accent-ink)}
.cr-go .cr-ic{flex:none;color:var(--pv-accent-ink)}
.cr-panel .cr-gos{margin-top:8px;padding-top:0;border-top-color:var(--cr-hair)}
.cr-panel .cr-go{color:var(--cr-on)}
.cr-panel .cr-go-t,.cr-panel .cr-go .cr-ic{color:var(--cr-on-2)}
.cr .cr-panel .cr-go:focus-visible{outline-color:var(--cr-on);border-radius:var(--pv-r-sm)}
/* 年収の板の足は、会社ごとに1行：社名・税の扱い・「詳しく」（★2026-10-25 オーナー P12.106）。入れ物（.cr-ft）の格子の線を、
   リンク（社名と「詳しく」）が subgrid で借り、税の扱いの字（.cr-tx ── リンクの外）はリンクの空けた列に置く。字はリンクの上に重なるので、
   押すのはリンク（pointer-events）。狭い画面では、税の扱いは社名の下に寄せる（社名を細くしない）。 */
.cr-gos .cr-ft{display:grid;grid-template-columns:[d] auto [n] minmax(0,1fr) [g] auto [i] auto [e];column-gap:0;align-items:center;min-height:0}
.cr-ft > .cr-go{grid-row:1;grid-column:d / e;display:grid;grid-template-columns:subgrid;column-gap:0}
.cr-ft > .cr-go > .cr-dot{grid-column:d;margin-right:8px}
.cr-ft > .cr-go > .cr-go-n{grid-column:n;padding-right:12px}
.cr-ft > .cr-go > .cr-go-t{grid-column:g;margin:0}
.cr-ft > .cr-go > .cr-ic{grid-column:i;margin-left:8px}
.cr-tx{grid-row:2;grid-column:n / e;margin:-12px 0 6px;font-size:12px;line-height:1.5;color:var(--cr-on-3);pointer-events:none}
@media (min-width:760px){
  .cr-gos .cr-ft{grid-template-columns:[d] auto [n] minmax(0,max-content) [x] minmax(7em,1fr) [g] auto [i] auto [e]}
  .cr-gos .cr-ft:not(:has(.cr-tx)){grid-template-columns:[d] auto [n] minmax(0,1fr) [x] 0 [g] auto [i] auto [e]}
  .cr-tx{grid-row:1;grid-column:x;margin:0;padding-right:12px}
}
/* ★2026-10-29：税の扱いを社名と同じ行に置くのは、足（会社ごとの1行）に社名・税の扱い・「詳しく」が並ぶ幅のときだけ。
   左メニューが出る 1001px では足が 374px しかなく、長い社名（スイス インターナショナル エアラインズ）が税の扱いの字（最小 7em）に押されて
   3行に折れた ── 足の入れ物（.cr-gos ── 2社ぶん）が 860px に満たないあいだは、上の狭い形と同じく税の扱いを社名の下へ寄せる（社名を細くしない）。
   幅は画面ではなく箱で測る（左メニューが出ると、広い画面でも箱は狭い）。999px までは年収の板が別の形（下の「スマホ（〜759px）の年収の板」）なので触らない。 */
@supports (container-type:inline-size){
  @media (min-width:1000px){
    .cr-panel .cr-gos:has(.cr-tx){container-type:inline-size}
  }
  @container (max-width:859.98px){
    .cr-gos .cr-ft{grid-template-columns:[d] auto [n] minmax(0,1fr) [g] auto [i] auto [e]}
    .cr-tx{grid-row:2;grid-column:n / e;margin:-12px 0 6px;padding-right:0}
  }
}

.cr-credits{margin-top:20px;font-size:12px;line-height:1.8;color:var(--pv-ink-3)}
.cr-credit{margin-right:10px}
.cr-credits a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.cr-credits a:hover{color:var(--pv-ink)}
.cr-credits a:active{opacity:.6}

/* ── 会社の概要 ─────────────────────────────────────────────────── */
.cr-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px 10px;margin-bottom:8px}
.cr-top .cr-back{margin-right:auto}
.cr-back{display:inline-flex;align-items:center;gap:4px;min-height:44px;margin-left:-4px;padding-right:10px;
         color:var(--pv-ink-2);font-size:14px;font-weight:600;text-decoration:none}
.cr-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;
        border-radius:999px;background:var(--pv-accent-dark);color:var(--cr-on);
        font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap;
        box-shadow:0 1px 2px color-mix(in srgb, var(--pv-navy) 14%, transparent),
                   0 10px 20px -12px color-mix(in srgb, var(--pv-accent-dark) 80%, transparent);
        transition:transform .22s var(--pv-ease)}
.cr .cr-btn:focus-visible{border-radius:999px}

.cr-cols{display:grid;gap:14px}
.cr-hero{position:relative;isolation:isolate;overflow:hidden;height:168px;margin:0;
         border-radius:var(--pv-r-lg);background:var(--pv-navy);box-shadow:var(--pv-shadow)}
.cr-hero img{position:absolute;inset:0;z-index:-2}
.cr-hero::before{z-index:-1;background:
  radial-gradient(90% 70% at 0% 100%, color-mix(in srgb, var(--pv-navy) 84%, transparent) 0%, transparent 64%),
  linear-gradient(0deg, color-mix(in srgb, var(--pv-navy) 70%, transparent) 0%, transparent 58%)}
.cr-hero::after{z-index:-1}
.cr-hero .cr-code{top:14px;left:14px;bottom:auto}
.cr-hero-n{position:absolute;left:16px;right:16px;bottom:14px;color:var(--cr-on);font-size:24px}

.cr-pay{padding:16px 16px 14px;border-radius:var(--pv-r-lg);
        background:var(--pv-accent-soft);border:1px solid var(--pv-accent-line)}
.cr-pay-h{color:var(--pv-accent-ink);font-size:13px;font-weight:700;letter-spacing:.02em}
.cr-nums{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:8px}
.cr-num{display:flex;flex-direction:column;min-width:0;padding-right:8px}
.cr-num + .cr-num{padding:0 0 0 10px;border-left:1px solid var(--pv-accent-line)}
.cr-num-r{font-size:13px;font-weight:700;color:var(--pv-ink)}
.cr-num-v{margin-top:2px;color:var(--pv-ink);white-space:nowrap;
          font:800 clamp(18px, 6.1vw, 26px)/1.2 Inter,'Noto Sans JP',sans-serif;
          letter-spacing:-.03em;font-variant-numeric:tabular-nums}
/* この額は折り返さない。字数の多い通貨（「〜AED 674K」）でも列に収まる大きさにしてある。
   ★字の大きさは画面の幅ではなく、額が入る箱（.cr-nums）の幅から決める。
     画面が広くても箱が広いとは限らない ── 写真と2列に並ぶ幅（900px〜）では箱が半分になり、
     左メニューが出る 1001px がいちばん狭い。広い画面で 40px に固定していた頃、AED に切り替えると
     額が列からはみ出し、900〜1024px ではページごと横に溢れていた（2026-10-04）。
   上の clamp と下の1行は、箱の幅で測れない古いブラウザ向けの控え（どの幅でも収まる小さめの値）。
   ⚠️ 大きくするときは、全部の通貨で見る（assert-career.mjs が狭い幅と広い幅の両方で測っている）。 */
@media (max-width:359px){.cr-num-v{font-size:18px}}
@supports (font-size:1cqi){
  .cr-nums{container-type:inline-size}
  .cr-num-v{font-size:clamp(18px, 7.2cqi, 36px)}
}
.cr-num-k{display:flex;flex-wrap:wrap;align-items:center;gap:3px 6px;margin-top:6px;font-size:12px;line-height:1.6;color:var(--pv-ink-2)}

/* 小さい棒。目盛は 0 から。棒に載せるのは推定年収だけ（会社が公表した額は .cr-pub の一覧に在る）。 */
.cr-mini{margin-top:14px;padding-top:12px;border-top:1px solid var(--pv-accent-line)}
.cr-mini-row{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:8px;min-height:24px}
.cr-mini-l{font-size:12px;font-weight:700;color:var(--pv-ink-2)}
.cr-track{position:relative;display:block;height:12px;border-radius:4px;
          background-color:color-mix(in srgb, var(--pv-ink) 7%, transparent);
          background-image:linear-gradient(90deg, color-mix(in srgb, var(--pv-ink) 16%, transparent) 1px, transparent 1px);
          background-size:calc(100% / var(--cr-div)) 100%}
.cr-fill{position:absolute;left:0;top:0;bottom:0;width:var(--w);border-radius:inherit;
         --c1:var(--pv-blue-ink);--c2:var(--pv-blue);
         background:linear-gradient(90deg, var(--c1), var(--c2));
         transform-origin:left center;animation:cr-grow .8s var(--pv-ease) .1s backwards}
@keyframes cr-grow{from{transform:scaleX(0)}}
.cr-fill.is-fo{--c1:var(--pv-accent-dark);--c2:var(--pv-accent)}
.cr-axis{display:grid;grid-template-columns:1fr auto 1fr;margin-top:6px;
         font-size:12px;line-height:1.4;color:var(--pv-ink-3);font-variant-numeric:tabular-nums}
.cr-axis span:last-child{text-align:right}
.cr-mini .cr-axis{margin-left:72px}
/* いちばん狭い画面（〜339px）では、まんなかの目盛の字を出さない。
   字数の多い通貨（「AED 462K」）だと右端の字とのあいだが 3px しか無く、1つの数に見えた（2026-10-04）。
   棒の中の目盛線は残るので、半分の位置は今までどおり読める。場所は取ったまま＝両端の字は動かない。
   ⚠️ 箱の幅（@container）で書かない。この幅の端末は古く、箱の幅で測れないブラウザが多い。 */
@media (max-width:339px){.cr-mini .cr-axis span:nth-child(2){visibility:hidden}}
.cr-tax{margin-top:10px;font-size:12px;line-height:1.5;color:var(--pv-ink-2)}

/* 会社が公表している金額。 */
.cr-pub{margin-top:14px;padding:18px 16px 6px;border-radius:var(--pv-r-lg);
        background:var(--pv-surface);border:1px solid var(--pv-line);box-shadow:var(--pv-shadow)}
.cr-h2{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--pv-ink)}
.cr-none{padding:8px 0 12px;font-size:14px;color:var(--pv-ink-3)}
.cr-grp{margin-top:14px;padding-top:14px;border-top:1px solid var(--pv-line)}
.cr-h2 + .cr-grp{margin-top:10px;padding-top:0;border-top:0}
.cr-grp-k{font-size:13px;font-weight:600;line-height:1.7;color:var(--pv-ink-2)}
.cr-figs{margin-top:4px}
.cr-fig{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:9px 0;
        border-top:1px solid var(--pv-line-soft)}
.cr-fig:first-child{border-top:0}
.cr-fig dt{min-width:0;font-size:13px;line-height:1.5;color:var(--pv-ink-2)}
.cr-fig dd{flex:none;text-align:right}
.cr-fig b{color:var(--pv-ink);font:700 16px/1.4 Inter,'Noto Sans JP',sans-serif;
          letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.cr-orig{display:block;font-size:12px;line-height:1.5;color:var(--pv-ink-3);font-variant-numeric:tabular-nums}
.cr-leave{padding-bottom:8px;font-size:13px;line-height:1.7;color:var(--pv-ink-2)}
.cr-more{border-top:1px solid var(--pv-line-soft)}
.cr-basis{margin-top:14px;border-top-color:var(--pv-line)}
/* 応募条件の行で終わる組のあとは、行そのものが上下に余白を持っているので、間を足さない。 */
.cr-grp:has(> .cr-more:last-child) + .cr-grp,
.cr-grp:has(> .cr-more:last-child) + .cr-basis{margin-top:0}
.cr-more summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;
                 cursor:pointer;list-style:none;color:var(--pv-accent-ink);font-size:13px;font-weight:700}
.cr-more summary::-webkit-details-marker{display:none}
.cr-more summary::after{content:"";flex:none;width:8px;height:8px;margin-right:4px;
                        border-right:2px solid currentColor;border-bottom:2px solid currentColor;
                        transform:translateY(-2px) rotate(45deg);transition:transform .22s var(--pv-ease)}
.cr-more[open] > summary::after{transform:translateY(2px) rotate(225deg)}
.cr-more summary:active{opacity:.6}
.cr-more > p,.cr-notes,.cr-srcs{font-size:13px;line-height:1.7;color:var(--pv-ink-2)}
.cr-more > p{padding-bottom:12px}
.cr-notes,.cr-srcs{display:grid;gap:8px;padding-bottom:12px;list-style:none}
.cr-notes li{position:relative;padding-left:14px}
.cr-notes li::before{content:"";position:absolute;left:2px;top:.72em;width:4px;height:4px;border-radius:50%;background:var(--pv-ink-3)}
.cr-fx{padding-bottom:12px;font-size:12px;line-height:1.7;color:var(--pv-ink-3)}
.cr-srcs a{display:block;color:var(--pv-accent-ink);font-weight:600;text-underline-offset:2px}
.cr-srcs a:hover{color:var(--pv-ink)}
.cr-srcs a:active{opacity:.6}
.cr-srcs span{display:block;font-size:12px;color:var(--pv-ink-3)}

/* ── 2社の比較 ─────────────────────────────────────────────────── */
.cr-cmp-h{margin:0 0 12px;font-size:24px}
.cr-pick{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.cr-side{position:relative;overflow:hidden;border-radius:var(--pv-r-lg);background:var(--pv-surface);
         border:1px solid var(--pv-line);box-shadow:var(--pv-shadow);transition:transform .24s var(--pv-ease)}
.cr-opt{position:relative;display:block;border-bottom:4px solid var(--cr-co)}
/* 高さの下限 96px ── まんなかの入れ替えボタン（44px）が、略号の札と社名に掛からない高さ。
   390px 幅ではもともとこの高さ。それより狭いと 16:9 では足りず、札の角と社名の頭がボタンの下に入っていた（2026-10-04）。 */
/* max-width:100% ── 縦横比の箱は、高さの下限（96px・写真の無い札の 140px / 168px）に合わせて横へも広がる。広がると箱が札より広くなり、
   中の社名（★2026-10-25 から箱の中に置く）が札の右の外へ切れる。札の幅は .cr-side の幅のまま。 */
.cr-opt-p{position:relative;isolation:isolate;display:block;overflow:hidden;aspect-ratio:16/9;max-width:100%;min-height:96px;background:var(--pv-navy)}
.cr-opt-p::before{background:linear-gradient(0deg, color-mix(in srgb, var(--pv-navy) 82%, transparent) 0%, transparent 62%)}
.cr-opt .cr-code{top:10px;bottom:auto}
.cr-opt-n{position:absolute;z-index:1;left:10px;right:8px;bottom:9px;display:flex;align-items:center;gap:4px;
          color:var(--cr-on);font-size:clamp(12px, 3.2vw, 16px);font-weight:800;line-height:1.3;letter-spacing:-.02em;
          overflow-wrap:anywhere}
.cr-opt-n .cr-ic{width:13px;height:13px}
/* 狭い画面（〜351px）では、いちばん長い社名（キャセイパシフィック）と矢印が1行に並ばない。
   語の途中で折れて2行になり、頭の字が入れ替えボタンの下に入っていた（2026-10-04）。
   社名に1行ぜんぶを渡し、矢印は略号の札へ移す（「押せば選び直せる」の目印は残す）。
   ⚠️ 箱の幅（@container）で書かない。この幅の端末は古く、箱の幅で測れないブラウザが多い。 */
@media (max-width:351px){
  .cr-opt-n{right:6px}
  .cr-opt-n .cr-ic{display:none}
  .cr-opt .cr-code::after{content:"";display:inline-block;width:5px;height:5px;margin:0 1px 2px 6px;
                          border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
}
/* 押す所は透明なボタン（カード全体）。見えているのは写真のカード。 */
.cr-pickb{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:inherit;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cr .cr-pickb:focus-visible{outline:none}
.cr-ring{position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;opacity:0;
         box-shadow:inset 0 0 0 2px var(--pv-accent), inset 0 0 0 4px color-mix(in srgb, white 82%, transparent);
         transition:opacity .15s var(--pv-ease)}
.cr-pickb:focus-visible + .cr-ring{opacity:1}
/* 2社を選ぶ面。開いているあいだ、後ろのページを動かさない（career.js が html に付けて外す）。
   幅をとるスクロールバーの画面（Windows など）では、隠したバーのぶん後ろのページが横へずれないよう、バーの幅を空けたままにする
   （空けられないブラウザでは、career.js が測った幅 --cr-sb を右に足す）。 */
html.cr-sheeting{overflow:hidden;scrollbar-gutter:stable;padding-right:var(--cr-sb,0px)}
/* margin:auto は面をまんなかに置く（ページの頭の * の margin:0 が、ブラウザの既定の auto を消すので書き戻す）。 */
.cr-sheet{width:min(480px, calc(100% - 32px));max-height:min(640px, 80vh);margin:auto;padding:0;border:1px solid var(--pv-line);border-radius:var(--pv-r-lg);background:var(--pv-surface);color:var(--pv-ink);box-shadow:var(--pv-shadow);overflow:hidden;overscroll-behavior:contain}
.cr-sheet[open]{display:flex;flex-direction:column}
/* 後ろの地。色は紺のトークン（::backdrop に変数が届かない古いブラウザでは黒）、濃さは opacity（色の直書きをしない）。 */
.cr-sheet::backdrop{background:var(--pv-navy, black);opacity:.56}
.cr-sheet-top{display:flex;align-items:center;gap:8px;padding:14px 8px 6px 18px}
.cr-sheet-h{flex:1;min-width:0;margin:0;font-size:15px;font-weight:700;letter-spacing:-.01em}
.cr-sheet-x{flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--pv-ink-2);cursor:pointer;transition:opacity .16s var(--pv-ease),transform .16s var(--pv-ease)}
.cr-sheet-x:hover{opacity:.7}
.cr-sheet-x:active{transform:scale(.92)}
.cr-sheet-l{flex:1;min-height:0;margin:0;padding:0 8px calc(10px + env(safe-area-inset-bottom, 0px));list-style:none;overflow-y:auto;overscroll-behavior:contain}
.cr-pk{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:6px 10px;border:0;border-radius:var(--pv-r-sm);background:transparent;color:var(--pv-ink);font:inherit;font-size:14px;text-align:left;cursor:pointer;transition:opacity .16s var(--pv-ease),transform .16s var(--pv-ease)}
.cr-pk-n{flex:1;min-width:0;word-break:keep-all;overflow-wrap:anywhere}
.cr-pk-c{flex:none;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--pv-ink-3)}
@media (hover:hover){.cr-pk:hover{background:var(--pv-bg-sub)}}
.cr-pk:active{transform:scale(.985)}
.cr-pk[aria-current="true"]{background:var(--pv-accent-soft);color:var(--pv-accent-ink);font-weight:700}
/* 選べない会社（もう片方の会社）は、乗せても押しても動かない（上の hover・active より後ろに置く）。 */
.cr-pk:disabled{opacity:.38;cursor:default;background:transparent;transform:none}
@media (max-width:759px){.cr-sheet{width:100%;max-width:100%;max-height:86vh;max-height:86dvh;margin:auto 0 0;border-bottom:0;border-radius:var(--pv-r-lg) var(--pv-r-lg) 0 0}}
@media (prefers-reduced-motion:no-preference){.cr-sheet[open]{animation:cr-sheet-in .22s var(--pv-ease)}}
@keyframes cr-sheet-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.cr-pk-gl{margin:0}
.cr-pk-g{margin:0;padding:12px 10px 4px;font-size:12px;font-weight:700;color:var(--pv-ink-3)}
/* ロゴの札（会社ページの社名の左と同じ描き方 ── 同じ部品 airline-logo.mjs が書く .pvg-logo。career.html は pv-glance.css を
   読まないので、ここで描く）。白い地に元の縦横比のまま。読めなかったとき・ロゴの無い会社は、同じ大きさの会社の色の四角に頭文字。
   この白はトークンに無い（ロゴの絵が白い地の上で描かれている）。 */
.cr .pvg-logo{--lg-h:22px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:var(--lg-h);min-width:var(--lg-h);max-width:64px;padding:2px 5px;overflow:hidden;border-radius:var(--pv-r-sm);background:white;border:1px solid var(--pv-line)}
.cr .pvg-logo > img{display:block;height:100%;width:auto;max-width:100%;object-fit:contain}
.cr .pvg-logo > .pvg-mono{display:none}
.cr .pvg-logo.is-mono,.cr .pvg-logo.is-fail{width:var(--lg-h);max-width:none;padding:0;border:0;background:var(--cr-co)}
.cr .pvg-logo.is-mono > .pvg-mono,.cr .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)}
.cr .pvg-logo.is-fail > img{display:none}
/* 選ぶ面の1行：ロゴの枠の幅をそろえる（社名の頭が縦にそろう）。 */
.cr-pk-lg{flex:none;display:flex;align-items:center;width:64px;height:24px}
/* 写真の無い会社の札。地はサイトの紺・会社の色を左上からにじませる。上の段にロゴと「選び直せる」印、下に社名（行の幅ぜんぶ）。 */
.cr-opt-x .cr-opt-p{background:radial-gradient(120% 150% at 0% 0%, color-mix(in srgb, var(--cr-co) 52%, var(--pv-navy)) 0%, var(--pv-navy) 66%)}
.cr-opt-x .cr-opt-p::before{display:none}
/* ★2026-10-26 段階5 compare-all-14（P12.122）：台帳に写真の在る会社は、この札の地にその会社の写真（career.js が置く・is-ph）。写真の札と同じく、
   社名の側を紺で沈めて白い字を読めるようにする（沈め方は写真の札の ::before ── 幅ごとの向きもそのまま）。 */
.cr-opt-x.is-ph .cr-opt-p::before{display:block}
.cr-opt-lg{position:absolute;z-index:1;left:8px;top:10px;display:flex;align-items:center;gap:6px;color:var(--cr-on)}
.cr-opt-lg .cr-ic{flex:none;width:13px;height:13px}
.cr-opt-lg .pvg-logo{--lg-h:24px;max-width:72px}
.cr-opt-x .cr-opt-n{word-break:keep-all}
/* 社名の字は 12px（このページの下限）。幅に合わせて大きくしない ── 13字の1語（日本トランスオーシャン航空）が 390px で1行に入る。 */
@media (max-width:759px){.cr-opt-x .cr-opt-n{left:8px;right:6px;font-size:12px}}
.cr-opt-t{min-width:0}
/* スマホ（〜759px）の札は低い2段（★2026-10-25 オーナー P12.110「スマホの画面も比較の年収のカードデカすぎるだろ。画面いっぱいじゃねーか」・
   同じ日の「航空会社名のカードももっと小さくていい」）：上の段に略号かロゴ（写真の無い会社は「選び直せる」印も）、下の段に社名（12px・2行まで ──
   374px 以下で3行になる社名だけ3行）。高さは中身なり（下限 64px ＋ 色の線 4px ＝ 68px・3行で 84px まで）── 2枚は同じ行の高さにそろう
   （.cr-pick の格子が2枚を同じ高さに伸ばす）。写真とクレジットはそのまま（写真は札の地）。
   入れ替えボタンは、2枚のあいだの上の段の高さに置く（押せる所は 44px のまま・描く丸は 30px）── 右の札の上の段は、その丸のぶんだけ内側を空け
   （略号・ロゴを丸の外へ）、社名の段はボタンの丸より下から始める。どちらの札の字も、ボタン（押せる所の丸）に掛からない（assert-career.mjs が測る）。 */
@media (max-width:759px){
  .cr-side{display:flex;flex-direction:column}
  .cr-opt:not([hidden]){flex:1 0 auto;display:flex;flex-direction:column}
  .cr-opt-p{flex:1 0 auto;display:flex;flex-direction:column;justify-content:space-between;gap:5px;aspect-ratio:auto;min-height:64px;padding:5px 7px 4px}
  .cr-opt-p > img{position:absolute;inset:0;z-index:-1}
  .cr-opt .cr-code{position:relative;inset:auto;align-self:flex-start;padding:2px 7px}
  .cr-opt-n,.cr-opt-x .cr-opt-n{position:relative;inset:auto;font-size:12px;line-height:1.15}
  .cr-opt-lg{position:relative;inset:auto;align-self:flex-start}
  .cr-opt-lg .pvg-logo{--lg-h:22px;max-width:64px}
  .cr-side[data-side="b"] .cr-opt .cr-code,.cr-side[data-side="b"] .cr-opt-lg{margin-left:12px}
}
/* 「選び直せる」印（▼）は、写真の札と写真の無い札で同じ所（★2026-10-25 WP-compare-all-12・オーナーの「そろえる」）：352px からは社名の後ろ
   （写真の札も写真の無い札も、社名の中の ▼）。写真の無い札の社名は長いことがあるので、スマホ（〜759px）では ▼ を社名の字の流れに置く
   （最後の行の字のすぐ後ろ ── 横に列を取らない ＝ 社名の行が増えない）。〜351px は両方とも上の段（写真の札は略号の札の中の印・
   写真の無い札はロゴの段の ▼ ── 上の「狭い画面（〜351px）」の決まりが社名の中の ▼ を隠す）。 */
@media (min-width:352px){.cr-opt-x .cr-opt-lg > .cr-ic{display:none}}
@media (min-width:352px) and (max-width:759px){
  .cr-opt-x .cr-opt-n{display:block}
  .cr-opt-x .cr-opt-n > .cr-ic{display:inline-block;margin-left:4px;vertical-align:-2px}
}
/* 広い画面（760px〜）の札は低い1行（★2026-10-25 オーナー P12.106「会社名とこの年収比較でpc 画面いっぱいに使うの勿体なさすぎる」）：
   略号かロゴ → 社名 → 「選び直せる」印。写真の会社は写真とクレジットをそのまま、社名の下地は左からの紺。写真の無い会社は、会社の色を
   にじませた低い紺の面（空の大きな箱にしない）。入れ替えボタンは2枚のあいだの溝（56px）に入れる ── 札の中身に掛からない。
   印（▼）は社名の中の ▼（写真の無い札も ── ★WP-compare-all-12。ロゴの段の ▼ は 351px までの印）。ロゴの段は display:contents で1行に並ぶ。
   ★同じ日のオーナー「航空会社名のカードももっと小さくていい。大きすぎる」（WP-compare-all-11）：高さ 56px ＋ 色の線 4px ＝ 60px（64px まで）。
   2行になる長い社名もこの高さに入る（15px × 1.3 × 2 ＋ 上下 8px）。 */
@media (min-width:760px){
  .cr-pick{gap:56px}
  .cr-opt-p{display:flex;align-items:center;gap:10px;aspect-ratio:auto;min-height:56px;padding:8px 14px}
  .cr-opt-p > img{position:absolute;inset:0;z-index:-1}
  .cr-opt-p::before{background:linear-gradient(90deg, color-mix(in srgb, var(--pv-navy) 86%, transparent) 0%,
                                                   color-mix(in srgb, var(--pv-navy) 52%, transparent) 46%, transparent 78%)}
  .cr-opt .cr-code{position:relative;inset:auto;flex:none}
  .cr-opt-n{position:relative;inset:auto;flex:0 1 auto;min-width:0;font-size:16px}
  .cr-opt-n .cr-ic{width:14px;height:14px}
  .cr-opt-x .cr-opt-p{background:linear-gradient(90deg, color-mix(in srgb, var(--cr-co) 34%, var(--pv-navy)) 0%, var(--pv-navy) 74%)}
  .cr-opt-x .cr-opt-lg{display:contents}
  .cr-opt-x .cr-opt-lg > *{position:relative;z-index:1}
  .cr-opt-x .cr-opt-n{order:1;font-size:15px}
  .cr-opt-lg .pvg-logo{--lg-h:28px;max-width:96px;padding:3px 7px}
  .cr .pvg-logo.is-mono > .pvg-mono,.cr .pvg-logo.is-fail > .pvg-mono{font-size:13px}
}
/* 選ぶ面の検索の欄と、見つからないときの1行（CA-3b2）。欄の字は 16px ── スマホで欄を押したとき、画面ごと拡大されない。
   見た目は航空会社一覧の検索の欄と同じく、ブラウザの既定の飾りを外す（appearance）。 */
.cr-sheet-q{margin:0 14px 8px;min-height:48px;padding:0 14px;border:1px solid var(--pv-line);border-radius:var(--pv-r-sm);background:var(--pv-bg-sub);color:var(--pv-ink);font:inherit;font-size:16px;-webkit-appearance:none;appearance:none}
.cr .cr-sheet-q:focus-visible{outline:2px solid var(--pv-accent);outline-offset:1px}
.cr-sheet-0{margin:0;padding:18px 18px 22px;font-size:14px;color:var(--pv-ink-2)}
/* 絞っても面の高さを変えない ── 打つたびに欄が上下へ動かない・スマホでは面が下へ縮んで欄が文字盤の後ろへ隠れない。
   高さは上の上限と同じ値（全社が並ぶときは今までと同じ大きさ）。 */
.cr-sheet{height:min(640px, 80vh)}
@media (max-width:759px){.cr-sheet{height:86vh;height:86dvh}}
/* 見つからないときの1行は、欄のすぐ下に見せる（一覧は空のまま残りの高さをとるので、HTML の順のままだと面の下端へ離れる）。 */
.cr-sheet-l{order:1}
.cr-swap{position:absolute;z-index:4;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;
         display:grid;place-items:center;border-radius:50%;cursor:pointer;
         background:var(--pv-surface);border:1px solid var(--pv-line);color:var(--pv-ink);
         box-shadow:var(--pv-shadow-lift);transition:transform .32s var(--pv-ease)}
.cr .cr-swap:focus-visible{border-radius:50%}
/* スマホの入れ替えボタン（★P12.110）：押せる所は 44px の丸のまま、描く丸は 30px（::before）。置き場所は2枚のあいだの上の段（上の札の説明）。 */
@media (max-width:759px){
  .cr-swap{top:-11px;margin:0 0 0 -22px;isolation:isolate;background:transparent;border:0;box-shadow:none}
  .cr-swap::before{content:"";position:absolute;z-index:-1;left:7px;top:7px;width:30px;height:30px;box-sizing:border-box;border-radius:50%;
                   background:var(--pv-surface);border:1px solid var(--pv-line);box-shadow:var(--pv-shadow-lift)}
  .cr-swap .cr-ic{width:14px;height:14px}
}
/* ── 比較：掲載している全社 ───────────────────────────── */
/* 社名は語の切れ目（「・」の後ろ・空白・「（」の前）でだけ折る。1語が行より長いときだけ、はみ出さずに語の中で折る。
   ⚠️ 行の社名の中にタグを入れて折らない（check-salary.mjs が社名を1続きの字として読む）。 */
.cr-row-co,.cr-go-n{word-break:keep-all;overflow-wrap:anywhere}

.cr-panel{position:relative;isolation:isolate;overflow:hidden;margin-top:14px;padding:18px 16px 16px;
          border-radius:var(--pv-r-lg);background:var(--pv-navy);border:1px solid var(--cr-hair);
          color:var(--cr-on);box-shadow:var(--pv-shadow-lift)}
.cr-panel::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(90% 60% at 100% 0%, color-mix(in srgb, var(--pv-blue) 24%, transparent), transparent 70%),
  radial-gradient(90% 70% at 0% 100%, color-mix(in srgb, var(--pv-accent) 16%, transparent), transparent 70%),
  var(--cr-grain)}
.cr-panel-h{font-size:18px;font-weight:800;letter-spacing:-.02em;line-height:1.3}
/* 見出しの行：「年収」と、行がどれも推定のときの1行「推定年収　機種の指定なし」（★2026-10-25 P12.106 ── 行ごとの札をここへ1回にまとめた）。 */
.cr-panel-top{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.cr-role{margin-top:14px;font-size:13px;font-weight:700;color:var(--cr-on-2)}
.cr-pair{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.cr-row-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.cr-row-co{display:inline-flex;align-items:center;gap:7px;min-width:0;font-size:13px;font-weight:600;color:var(--cr-on-2)}
.cr-dot{flex:none;width:8px;height:8px;border-radius:50%;background:color-mix(in srgb, var(--cr-co) 66%, white)}
.cr-row-v{flex:none;color:var(--cr-on);white-space:nowrap;
          font:800 24px/1.15 Inter,'Noto Sans JP',sans-serif;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
/* いちばん狭い画面（〜339px）では、長い社名と額が1行に並ばず、社名が語の途中で折れていた（2026-10-04）。 */
@media (max-width:339px){.cr-row-co{font-size:12px}.cr-row-v{font-size:20px}}
.cr-row-k{display:flex;flex-wrap:wrap;align-items:center;gap:3px 6px;margin-top:3px;font-size:12px;line-height:1.6;color:var(--cr-on-3)}
/* 行の札（「推定」）：並べた行がどれも推定のあいだは、画面では見出しの1行が1回だけ言い、行の札は読み上げにだけ残す（1行ずつ聞いても
   推定と分かる）。推定でない種類の行（data-kind）が見えているあいだは、どの行も自分の札を見せ、見出しの1行は出さない
   （推定でない額に「推定年収」と言わない）。★2026-10-25 P12.106 */
.cr-panel .cr-row-k{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.cr-panel:has(.cr-row[data-kind]:not([hidden])) .cr-row-k{position:static;width:auto;height:auto;margin:3px 0 0;overflow:visible;clip:auto;clip-path:none;white-space:normal}
.cr-panel:has(.cr-row[data-kind]:not([hidden])) .cr-tgt{display:none}
.cr-panel .cr-tag{background:color-mix(in srgb, white 9%, transparent);
                  border-color:color-mix(in srgb, white 16%, transparent);color:var(--cr-on-2)}
.cr-panel .cr-track{height:16px;margin-top:6px;border-radius:5px;
                    background-color:color-mix(in srgb, white 8%, transparent);
                    background-image:linear-gradient(90deg, color-mix(in srgb, white 16%, transparent) 1px, transparent 1px)}
/* 紺の上でも読めるように、会社の色を白へ寄せる（キャセイの深い緑がそのままだと沈む）。 */
.cr-row .cr-fill{--c1:color-mix(in srgb, var(--cr-co) 78%, white);--c2:color-mix(in srgb, var(--cr-co) 48%, white)}
.cr-panel .cr-axis{margin-top:10px;color:var(--cr-on-3)}
.cr-tgt{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;margin:0;font-size:12px;line-height:1.5;font-weight:500;color:var(--cr-on-3)}
.cr-tgt-k{padding:1px 8px;border-radius:999px;background:color-mix(in srgb, white 9%, transparent);
          border:1px solid color-mix(in srgb, white 16%, transparent);color:var(--cr-on-2);font-weight:700}
/* 目盛の写し（右の列の棒の下 ── スマホだけ・下の囲み）。 */
.cr-axis2{display:none}
/* スマホ（〜759px）の年収の板は、上の2枚の札と同じ2列（★2026-10-25 オーナー P12.110「スマホの画面も比較の年収のカードデカすぎるだろ。
   画面いっぱいじゃねーか」）：左の列＝左の札の会社・右の列＝右の札の会社（行は career.js が左の会社・右の会社の順に置き直す）。
   列の幅と位置は札の中身にそろう（板も札も 枠 1px ＋ 内側の空き 7px・列のあいだ 26px ＝ 札のあいだ 10px ＋ 両側の 8px ×2）。
   職位ごとに小さい見出しを1行・その下に2つの欄（額 20px と、その下の短い棒 ── 2つの欄は同じ幅 ＝ 同じ目盛・棒は 0 から）。
   社名は欄の中にもう一度書かない（上の札が言っている）── 行の社名と足の社名は読み上げにだけ残す（1行ずつ聞いても、どの会社か分かる）。
   目盛は列ごと（左の列は見えている1本の .cr-axis・右の列はそのすぐ後ろの写し .cr-axis2）── 0 と右端の2つだけ（まんなかの字は出さない）。
   足は1行：2つの「詳しく →」をそれぞれの列の下に並べ、税の扱いは同じ列の下の字（押せる 44px の帯の中 ── 押すのはリンク）。
   推定でない種類の行（data-kind）の札は、欄の中の額と棒のあいだに出る（上の決まりのまま）。
   ★2026-10-25 WP-compare-all-12：タブレット（760〜999px）も同じ2列（3つ目の形を作らない・欄の中に社名を書かない）── 1行1社の形は 1000px から。
   列を札の中身にそろえる幅（板の内側の空きと列のあいだ）だけ、下の「タブレットの年収の板」が札の大きさに合わせて替える。
   税の扱いの字は2行まで（長い字 ── オマーン ── で板を伸ばさない）。字は1字も削らない：全文は要素の中にそのまま在り（読み上げは全文）、
   入れ物の title にも同じ字を置き、同じ字はその行の「詳しく →」の先（会社ページ）にも在る。 */
@media (max-width:999px){
  .cr-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:26px;margin-top:10px;padding:8px 7px 2px}
  .cr-panel > *{grid-column:1 / -1}
  .cr-panel-h{font-size:16px}
  .cr-role{margin-top:6px;font-size:12px;line-height:1.4}
  .cr-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:26px;margin-top:2px}
  .cr-panel .cr-row-h > .cr-row-co,.cr-panel .cr-ft > .cr-go > .cr-go-n{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .cr-panel .cr-row-h{display:block}
  .cr-panel .cr-row-v{display:block;font-size:20px}
  .cr-panel .cr-track{height:8px;margin-top:5px;border-radius:3px}
  .cr-panel > .cr-axis{grid-column:1;grid-template-columns:auto minmax(0,1fr);margin-top:5px;white-space:nowrap}
  .cr-panel > .cr-axis:not([hidden]) + .cr-axis2{display:grid;grid-template-columns:auto minmax(0,1fr);grid-column:2;margin-top:5px;white-space:nowrap;
    font-size:12px;line-height:1.4;color:var(--cr-on-3);font-variant-numeric:tabular-nums}
  .cr-axis2 > :last-child{text-align:right}
  .cr-panel > .cr-axis > :nth-child(2),.cr-panel > .cr-axis2 > :nth-child(2){display:none}
  .cr-panel .cr-gos{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:26px;margin-top:4px}
  .cr-panel .cr-gos .cr-ft{display:flex;flex-direction:column;align-items:stretch;gap:0;min-width:0}
  .cr-panel .cr-ft > .cr-go{display:flex;align-items:flex-start;gap:6px;padding-top:3px;line-height:1.4}
  .cr-panel .cr-ft > .cr-go > .cr-dot{margin:6px 0 0}
  .cr-panel .cr-ft > .cr-go > .cr-go-t{margin:0}
  .cr-panel .cr-ft > .cr-go > .cr-ic{margin:2px 0 0}
  .cr-panel .cr-tx{position:relative;margin:-20px 0 2px 14px;line-height:1.3;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
}
/* 色の近い2社（★2026-10-25 P12.110 ── 色の近い2社は、色のほかでも見分けられる・どの幅でも）：career.js が、2社の色の座標（OKLab）の
   距離が data-near-max より小さいときだけ比較の画面に data-near を立てる。そのあいだ、右の会社（並びの2つ目 ── 行と足は career.js が
   左の会社・右の会社の順に置き直す）の 点は輪・棒は薄い色に縁取り・札の色の線は破線。
   ⚠️ 斜線の模様は使わない（このページで斜線の棒は「求人の上限」の印 ── 上限でない額に斜線を付けない）。 */
.cr-cmp[data-near] .cr-side[data-side="b"] .cr-opt{border-bottom-style:dashed}
.cr-cmp[data-near] .cr-pair > .cr-row:not([hidden]) ~ .cr-row:not([hidden]) .cr-fill{
  background:color-mix(in srgb, var(--cr-co) 28%, transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--cr-co) 72%, white)}
.cr-cmp[data-near] :is(.cr-pair, .cr-gos) > [data-airline]:not([hidden]) ~ [data-airline]:not([hidden]) .cr-dot{
  background:transparent;box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--cr-co) 66%, white)}
/* 同じ手がかりを、下の生きた欄（提出された年収・口コミ・月の働き方・待遇 ── career-live.js が描く会社の札 .crl-co）の右の会社の点にも
   （★2026-10-25 WP-compare-all-12）。決まりは上と同じ data-near の1つ（色の近さを測り直さない）。形は3つ ── 2列の見出しの2つ目の札・
   会社ごとに上下の形の2つ目の会社・口コミの要約の右の列（data-col="2"）。
   ⚠️ career-live.css には書かない ── 会社ページ 222枚がその版の指紋（?v=）を持っていて、直すと全部を作り直すことになる。
   比較の画面（.cr-cmp）は career.html にしか無いので、ここに置けば効く所は同じ。 */
.cr-cmp[data-near] .crl-cmp-head > .crl-co + .crl-co::before,
.cr-cmp[data-near] .crl-split-c + .crl-split-c > .crl-co::before,
.cr-cmp[data-near] .crl-sum2-c[data-col="2"] > .crl-co::before,
.cr-cmp[data-near] .crl-yd-lg > .crl-co + .crl-co::before,
.cr-cmp[data-near] .crl-yd-d[data-col="2"]::before,
.cr-cmp[data-near] .crl-rate-rv > .crl-cmp-sc + .crl-cmp-sc > .crl-co::before{background:transparent;box-shadow:inset 0 0 0 2px var(--crl-co,var(--pv-ink-3))}
/* ★2026-10-25 WP-compare-all-14（絵の本 #13）：同じ札（.crl-co）で、社名が折れる長い会社（スイス インターナショナル エアラインズ）でも、
   色の点だけが1行目に残らない ── 社名の塊（.crl-co-n）の幅は「いちばん長い1語」から始めて残りの行を埋める（width:min-content ＋ 伸びる）。
   点の横に1語が入る限り、社名は点の右で語の切れ目ごとに折れる。点は1行目の高さのまんなか。
   1語が点の横に入らない時だけ、今までどおり社名ごと次の行へ（語の途中で折らない・字を小さくしない ── career-live.css の決まりのまま）。
   ⚠️ career-live.css には書かない（上と同じ理由 ── 会社ページ 222枚の ?v=）。 */
.cr-cmp .crl .crl-co{align-items:flex-start}
.cr-cmp .crl .crl-co::before{margin-top:calc((1.4em - 8px) / 2)}
.cr-cmp .crl .crl-co-n{flex:1 1 auto;width:min-content}
/* 拠点の街の家賃の箱の点にも同じ輪（★2026-10-25 WP-compare-all-13 F2 ── エミレーツ｜JAL では、家賃の欄だけ JAL の点が塗りのままで、
   エミレーツの箱に見えた）。決まりは上と同じ data-near の1つ。箱は career.js が左の会社・右の会社の順に置き直すので、見えている2つめの箱
   （家賃の箱か、下の「資料を確認できていません」の箱）が右の会社。右の会社にだけ箱が在り左の会社に箱を出さない時（data-only="b"）は、その1つ。 */
.cr-cmp[data-near] .cr-rentbs > :is(.cr-rentb, .cr-rentn):not([hidden]) ~ :is(.cr-rentb, .cr-rentn):not([hidden]) .cr-dot,
.cr-cmp[data-near] .cr-rentbs[data-only="b"] > .cr-rentb:not([hidden]) .cr-dot{
  background:transparent;box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--cr-co) 66%, white)}
/* 家賃の箱が片方の会社にだけ在るとき、もう片方の列の箱（★2026-10-25 WP-compare-all-13 F2）。字は会社ページの暮らしの板と同じ1行
   （「家賃の資料を確認できていません」）。社名と色は career.js が写す。見た目は家賃の箱と同じ面（中身は1行だけ）。 */
.cr-rentn{min-width:0;padding:12px 14px;border-radius:var(--pv-r);background:var(--pv-surface-2);border:1px solid var(--pv-line-soft)}
.cr-rentn[hidden]{display:none}
.cr-rentn-n{font-weight:inherit}
.cr-rentn-t{margin-top:6px;font-size:13px;line-height:1.6;color:var(--pv-ink-3)}
@media (min-width:700px){ .cr-rentn{padding:14px 16px} }
/* 家賃の箱の「何の家賃か」の札は、入りきらなければ札の中で折り返す（★2026-10-25 WP-compare-all-13 ── 英語の「Average agreed rent (calculated by this site)」
   が 320px で画面の外へ 4px 出ていた ＝ assert-header.mjs の「ページが横に溢れていない」が赤。この作業の前の HEAD から）。字は削らない。
   1行の札の見た目は今までと同じ（角の丸みは1行の札の高さの半分）。 */
.cr-rentb-k .cr-tag{max-width:100%;white-space:normal;border-radius:11px}
/* 拠点の街の家賃の棒（★2026-10-26 オーナー P12.131「比較の拠点の家賃はちゃんと棒グラフ書いてね」）：間取りの行ごとに、額の下に1本。
   長さは HTML の --w（並べた2つの箱で1本の物差し ── 円に直した額。選び直すたびに career.js が決め直す）。色はその会社の色（--cr-co ──
   年収の棒と同じ仲間。箱は明るい面なので白へ寄せすぎない）。絵だけ（aria-hidden）── 額の字は上の行のまま。目盛の字は置かない（新しい数を出さない）。 */
.cr-rentb-l .cr-rbar{grid-column:1 / -1;position:relative;display:block;height:8px;margin-top:6px;border-radius:4px;overflow:hidden;
  background-color:color-mix(in srgb, var(--pv-ink) 7%, transparent)}
.cr-rentb-l .cr-rbar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w);border-radius:inherit;
  background:linear-gradient(90deg, var(--cr-co), color-mix(in srgb, var(--cr-co) 62%, white));
  transform-origin:left center;animation:cr-grow .8s var(--pv-ease) .1s backwards}
/* 色の近い2社：右の会社の箱の棒にも、年収の棒と同じ手がかり（薄い色に縁取り ── 上の data-near の決まりの1つ）。 */
.cr-cmp[data-near] .cr-rentbs > :is(.cr-rentb, .cr-rentn):not([hidden]) ~ .cr-rentb:not([hidden]) .cr-rbar::before,
.cr-cmp[data-near] .cr-rentbs[data-only="b"] > .cr-rentb:not([hidden]) .cr-rbar::before{
  background:color-mix(in srgb, var(--cr-co) 28%, transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--cr-co) 72%, white)}
/* 口コミのカード（抜粋・本文）は、スマホ（〜759px）では2社を上下に全幅で並べる（★2026-10-25 WP-compare-all-13 F1 ── 半分の幅では
   1行が数文字で折れて縦に長くなっていた）。どちらの会社のカードかは、マスの頭の札（career-live.js の rvCell ── 列の頭と同じ社名の札）が言う。
   カードの無い会社のマス（空のマス）は出さない（その会社の「投稿はまだありません」は、すぐ上の評価のマスが言っている）。
   広い画面（760px〜）は今までどおり2列・マスの頭の札は出さない。比較の画面（.cr-cmp）は career.html にしか無いので、ここに置く（WP-compare-all-12 と同じ理由）。 */
.cr-cmp .crl-rv-co{display:none}
@media (max-width:759px){
  .cr-cmp .crl-cmp-sub.crl-rate-rv{grid-template-columns:minmax(0,1fr);row-gap:14px}
  .cr-cmp .crl-rate-rv > .crl-cmp-sc:has(> .crl-blank){display:none}
  .cr-cmp .crl-rate-rv > .crl-cmp-sc:not(:has(> .crl-blank)) ~ .crl-cmp-sc:not(:has(> .crl-blank)){padding-top:14px;border-top:1px solid var(--pv-line-soft)}
  .cr-cmp .crl-rv-co{display:flex;margin-bottom:8px}
  /* 390px でカードの字の幅を 300px 以上に（1行に日本語でおよそ20字）── カードの左右の空きを 10px に・スクロールの枠の右の空きは外す（スマホの
     スクロールの印は字に重なって出る） */
  .cr-cmp .crl-rate-rv .crl-rev{padding-left:10px;padding-right:10px}
  .cr-cmp .crl-rate-rv .crl-rv-scroll{padding-right:0}
}
/* ★2026-10-31 比較の1件ずつの口コミの畳み（career-live.js の cmp-revs）── オーナー「要約の前に口コミの詳細がきちゃってる。詳細は開いたら見える形で十分」。
   読む順は 評価 → 要約 → この畳み（最初は閉じている）。字のある投稿が2社とも無いときは欄を畳む。
   ⚠️ display:none にしない ── 見えていない欄は取りに行かない（career-live.js の shown()）ので、会社を選び直したときに描き直されなくなる。
   要約の欄（career-live.css の cmp-summary）と同じ、高さ 0 の畳み方。 */
.cr-cmp .crl[data-live="cmp-revs"]{margin-top:14px;padding-top:4px;border-top:1px solid var(--pv-line-soft)}
.cr-cmp .crl[data-live="cmp-revs"][data-state="empty"]{height:0;min-height:0;margin:0;padding:0;border:0;overflow:hidden}
.cr-cmp .crl[data-live="cmp-revs"][data-state="empty"] > *{visibility:hidden}
/* 2社とも読めないときの失敗の顔（error・off）も畳む ── そのとき評価の欄が「いま読み出せません」と「やり直す」を1つずつ言っている（同じ箱で同じ1行を重ねない） */
.cr-cmp .crl[data-live="cmp-revs"]:is([data-state="error"],[data-state="off"]){height:0;min-height:0;margin:0;padding:0;border:0;overflow:hidden}
.cr-cmp .crl[data-live="cmp-revs"]:is([data-state="error"],[data-state="off"]) > *{display:none}
.cr-cmp .crl-rv-fold > .crl-cmp{margin-top:4px}
.cr-cmp .crl-rv-fold > .crl-lock{margin-top:10px}
/* スマホ（〜759px）はカードの頭に社名の札が出る（上の rvCell の規則）── 畳みの中の列の頭の札は出さない（同じ札を2回並べない） */
@media (max-width:759px){.cr-cmp .crl-rv-fold > .crl-cmp > .crl-cmp-head{display:none}}
/* ★2026-10-31 比較の月の勤務の帯（career-live.js の cmpBars）── オーナー「月の働き方も比較のグラフにできない？数字だけじゃなくて」。
   会社ページの帯（career-live.css の .crl-wb）の部品と目盛をそのまま使い、職位ごとに2社の行を上下に並べる：職位の名前｜点｜帯｜数字｜単位。
   帯と点はその会社の色（行の --crl-co）。同じ色の2社（data-near）は、2社目を輪郭だけにする（上の札の輪の点・家賃の棒と同じ手がかり）。
   比較の画面（.cr-cmp）は career.html にしか無いので、ここに置く（career-live.css の規則は会社ページの帯のまま）。 */
.cr-cmp .crl-cmp > .crl-wb2{margin-top:12px}
.cr-cmp .crl-wb-g{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:4px 8px}
.cr-cmp .crl-wb-g + .crl-wb-g{margin-top:2px;padding-top:6px;border-top:1px solid var(--pv-line-soft)}
.cr-cmp .crl-wb-g > .crl-wb-p{grid-row:1 / span 2;grid-column:1}
.cr-cmp .crl-wb-g > .crl-wb-r{grid-column:2;grid-template-columns:8px minmax(0,1fr) 72px 30px;gap:0 8px}
.cr-cmp .crl-wb-g > .crl-wb-r > *{grid-area:auto}
.cr-cmp .crl-wb-g > .crl-wb-r > .crl-none,
.cr-cmp .crl-wb-g > .crl-wb-r > .crl-wb-o{grid-column:2 / -1}
.cr-cmp .crl-wb-co{position:relative;width:8px;height:8px;border-radius:50%;background:var(--crl-co,var(--pv-ink-3))}
.cr-cmp .crl-wb2 .crl-wb-b{background:var(--crl-co,var(--pv-accent))}
.cr-cmp[data-near] .crl-wb2 .crl-wb-r[data-col="2"] .crl-wb-co{background:transparent;box-shadow:inset 0 0 0 2px var(--crl-co,var(--pv-ink-3))}
.cr-cmp[data-near] .crl-wb2 .crl-wb-r[data-col="2"] .crl-wb-b{background:color-mix(in srgb, var(--crl-co) 28%, transparent);box-shadow:inset 0 0 0 1.5px var(--crl-co)}
.cr-cmp .crl-wb-g:lang(en){grid-template-columns:76px minmax(0,1fr)}
/* 狭い枠（〜339px）では、職位の名前を行の上へ（帯に幅を渡す） */
@container crlwb (width < 340px){
  .cr-cmp .crl-wb-g,.cr-cmp .crl-wb-g:lang(en){grid-template-columns:minmax(0,1fr)}
  .cr-cmp .crl-wb-g > .crl-wb-p{grid-row:auto}
  .cr-cmp .crl-wb-g > .crl-wb-r{grid-column:1}
}
@media (forced-colors:active){
  .cr-cmp .crl-wb-co{forced-color-adjust:none;background:CanvasText}
}
/* ★2026-10-25 英語の EN-9：英語の比較（en/career.html）の6角形の左右の列。英語の名前（CAT_FULL_EN の「Compensation」）は 76px の列に入らず、
   語の途中で折れていた（「Compensatio／n」）。英語のときだけ左右の列を広げ、図の列の幅は日本語と同じ（300 − 2×76 − 16 ＝ 340 − 2×96 − 16 ＝ 132px）。
   career-live.css には書かない（222枚の会社ページがその指紋を持つ ── WP-compare-all-12 と同じ理由）。比較の6角形はこの1枚の中にだけ在る。 */
@supports (container-type:inline-size){
  @container (min-width:560px){
    .crl-cmp .crl-radar:lang(en){grid-template-columns:96px minmax(0,1fr) 96px;max-width:340px}
  }
}

.cr-cards{display:grid;gap:14px;margin-top:14px}
.cr-card{padding:4px 16px 6px;border-radius:var(--pv-r-lg);background:var(--pv-surface);
         border:1px solid var(--pv-line);border-top:4px solid var(--cr-co);box-shadow:var(--pv-shadow)}
.cr-card-n{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;
           color:var(--pv-ink);font-size:16px;font-weight:800;letter-spacing:-.01em;text-decoration:none}
.cr-card .cr-pub{margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.cr-card .cr-h2{font-size:13px;color:var(--pv-ink-2)}

/* ── 概要の中のタブ（タブを持つ会社だけ） ───────────────────────────
   写真 → タブ → 中身。写真とタブは、タブを替えても同じ場所に残る。 */
.cr-deep > .cr-hero{height:132px}
.cr-tabs{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:4px;margin-top:12px;padding:4px;
         border-radius:var(--pv-r);background:var(--pv-surface);border:1px solid var(--pv-line);box-shadow:var(--pv-shadow)}
.cr-tab{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:44px;padding:4px 6px;
        border-radius:var(--pv-r-sm);color:var(--pv-ink-2);text-align:center;text-decoration:none;
        font-size:13px;font-weight:700;line-height:1.3;letter-spacing:-.01em}
/* いま居るタブ：面と字の色と、下の線の3つで分かる（色だけに頼らない）。 */
.cr-tab[aria-current="page"]{background:var(--pv-accent-soft);color:var(--pv-accent-ink);font-weight:800;
                             box-shadow:inset 0 0 0 1px var(--pv-accent-line)}
.cr-tab::after{content:"";position:absolute;left:22%;right:22%;bottom:5px;height:2px;border-radius:2px;
               background:var(--pv-accent);opacity:0;transform:scaleX(.4);
               transition:opacity .22s var(--pv-ease), transform .22s var(--pv-ease)}
.cr-tab[aria-current="page"]::after{opacity:1;transform:none}
.cr .cr-tab:focus-visible{border-radius:var(--pv-r-sm)}
.cr-tab:active{opacity:.6}
.cr-tabp{margin-top:12px}
.cr-tabp > :first-child{margin-top:0}

/* 節の箱（口コミ・REAL PAY・月の働き方・就航地 …）。中身は別の部品が入れる。 */
.cr-sec,.cr-topic{margin-top:14px;padding:18px 16px 16px;border-radius:var(--pv-r-lg);
                  background:var(--pv-surface);border:1px solid var(--pv-line);box-shadow:var(--pv-shadow)}
.cr-sec > .cr-h2 + *,.cr-topic > .cr-h2 + *{margin-top:10px}
.cr-sec > .cr-else{margin-top:6px;margin-bottom:-8px}
.cr-ph{color:var(--pv-ink-3);font-size:14px}

/* 年収（押せる行：職位 ＋ 額 ＋ 札 ＋ 棒）。押すと、その数字の詳細へ。 */
.cr-bars{margin-top:4px}
.cr-bar{position:relative;isolation:isolate;display:block;margin:0 -10px;padding:10px 10px 12px;
        border-radius:var(--pv-r);color:inherit;text-decoration:none}
.cr-bar::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
        opacity:0;transition:opacity .2s var(--pv-ease)}
.cr-bar::before{background:color-mix(in srgb, var(--pv-accent) 11%, transparent)}
.cr .cr-bar:focus-visible{border-radius:var(--pv-r)}
.cr-bar-h{display:grid;grid-template-columns:minmax(0,1fr) auto 16px;grid-template-areas:"r v ic" "k v ic";
          align-items:center;column-gap:8px}
.cr-bar-r{grid-area:r;font-size:13px;font-weight:700;color:var(--pv-ink)}
.cr-bar-k{grid-area:k;display:flex;flex-wrap:wrap;align-items:center;gap:3px 6px;margin-top:4px;
          font-size:12px;line-height:1.6;color:var(--pv-ink-2)}
/* 額は折り返さない。大きさは画面の幅ではなく、額が入る箱（.cr-bars）の幅で決める（.cr-num-v と同じ理由）。 */
.cr-bar-v{grid-area:v;justify-self:end;color:var(--pv-ink);white-space:nowrap;
          font:800 clamp(18px, 5.6vw, 24px)/1.2 Inter,'Noto Sans JP',sans-serif;
          letter-spacing:-.03em;font-variant-numeric:tabular-nums}
@media (max-width:359px){.cr-bar-v{font-size:18px}}
@supports (font-size:1cqi){
  .cr-bars{container-type:inline-size}
  .cr-bar-v{font-size:clamp(18px, 6.6cqi, 30px)}
}
.cr-bar-h > .cr-ic{grid-area:ic;color:var(--pv-ink-3)}
.cr-bar .cr-track{margin-top:8px}
.cr-bar[data-role="fo"] .cr-fill{--c1:var(--pv-accent-dark);--c2:var(--pv-accent)}
.cr-bars > .cr-axis{margin-top:2px}

/* ほかのタブへの入口（概要のいちばん下）。 */
.cr-ents{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:10px;margin-top:6px}
.cr-ent{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:52px;padding:6px 14px;
        border-radius:var(--pv-r);background:var(--pv-surface);border:1px solid var(--pv-line);box-shadow:var(--pv-shadow);
        color:var(--pv-ink);font-size:14px;font-weight:700;line-height:1.3;letter-spacing:-.01em;text-decoration:none;
        transition:transform .24s var(--pv-ease)}
.cr-ent .cr-ic{color:var(--pv-accent-ink)}
.cr .cr-ent:focus-visible{border-radius:var(--pv-r)}

/* 勤務・待遇：題ごとの箱と、「答える」の行。 */
.cr-topics{display:grid;gap:14px;margin-top:14px;align-items:start}
.cr-topic{margin-top:0;padding-bottom:6px}
.cr-asks{margin-top:10px;list-style:none}
.cr-asks li{border-top:1px solid var(--pv-line-soft)}
.cr-ask{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:6px 0;
        color:var(--pv-accent-ink);font-size:13px;font-weight:600;line-height:1.5;text-decoration:none}
.cr-ask:active,.cr-dest:active{opacity:.6}

/* 暮らし・ステイ：就航地（都市名 ＋ 空港の3レター）。 */
.cr-dests{display:grid;grid-template-columns:repeat(auto-fill, minmax(128px, 1fr));gap:8px;list-style:none}
.cr-dest{display:flex;flex-direction:column;justify-content:center;gap:1px;min-height:56px;padding:7px 12px;
         border-radius:var(--pv-r-sm);background:var(--pv-surface-2);border:1px solid var(--pv-line);
         color:var(--pv-ink);text-decoration:none;transition:transform .22s var(--pv-ease)}
.cr-dest-n{font-size:14px;font-weight:700;line-height:1.35;letter-spacing:-.01em;overflow-wrap:anywhere}
.cr-dest-c,.cr-stay-c{font-family:Inter,sans-serif;font-weight:800;letter-spacing:.08em}
.cr-dest-c{font-size:12px;line-height:1.4;color:var(--pv-ink-3)}
.cr .cr-dest:focus-visible{border-radius:var(--pv-r-sm)}
.cr-dests + .cr-srcs{margin-top:14px;padding-bottom:0}

/* ── 就航地の1枚 ───────────────────────────────────────────────── */
.cr-stay-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:28px}
.cr-stay-c{padding:2px 8px;border-radius:8px;background:var(--pv-surface);border:1px solid var(--pv-line);
           color:var(--pv-ink-2);font-size:13px;line-height:1.5}
.cr-stay-n{margin-top:4px;font-size:14px;line-height:1.6;color:var(--pv-ink-2)}

/* ── 数字の詳細（その数字自身：額 → 対象・内訳・算出方法・出典・時点） ── */
.cr-det-h,.cr-cardv-h{margin:0 0 12px;font-size:24px}
.cr-det-top{padding:16px 16px 14px;border-radius:var(--pv-r-lg);background:var(--pv-accent-soft);border:1px solid var(--pv-accent-line)}
.cr-det-n{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.cr-det-v{color:var(--pv-ink);white-space:nowrap;
          font:800 clamp(26px, 8.4vw, 40px)/1.15 Inter,'Noto Sans JP',sans-serif;
          letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.cr-det-n .cr-orig{display:inline;white-space:nowrap}
.cr-det-k{display:flex;flex-wrap:wrap;align-items:center;gap:3px 6px;flex-basis:100%;
          font-size:12px;line-height:1.6;color:var(--pv-ink-2)}
.cr-det-top .cr-track{height:14px;margin-top:14px}
.cr-facts{margin-top:14px;padding:4px 16px;border-radius:var(--pv-r-lg);
          background:var(--pv-surface);border:1px solid var(--pv-line);box-shadow:var(--pv-shadow)}
.cr-fact{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:12px;padding:13px 0;border-top:1px solid var(--pv-line-soft)}
.cr-fact:first-child{border-top:0}
.cr-fact dt{font-size:13px;font-weight:700;line-height:1.7;color:var(--pv-ink-2)}
.cr-fact dd{min-width:0;font-size:14px;line-height:1.7;color:var(--pv-ink);overflow-wrap:anywhere}
.cr-fact dd small{display:block;font-size:12px;line-height:1.6;color:var(--pv-ink-3)}
.cr-fact .cr-more{margin-top:8px}
.cr-fact .cr-notes,.cr-fact .cr-srcs,.cr-fact .cr-fx{padding-bottom:0}
.cr-fact .cr-notes + .cr-fx{margin-top:8px}
.cr-det > .cr-else{margin-top:8px}

/* ── 2社の比較に足した部品 ─────────────────────────────────────── */
.cr-row{display:block}
/* 会社ごとのカードの見出し（社名の行）。 */
.cr-card-h{font-size:inherit;font-weight:inherit}

/* ── 指で触れない端末だけ、乗せたときの動き ─────────────────────── */
@media (hover:hover){
  .cr-link:hover .cr-ic,.cr-card-n:hover .cr-ic{transform:translateX(3px)}
  .cr-back:hover .cr-ic{transform:translateX(-3px)}
  .cr-btn:hover{transform:translateY(-1px)}
  .cr-side:hover{transform:translateY(-2px)}
  .cr-swap:hover{transform:rotate(180deg)}
  .cr-more summary:hover::after{transform:translateY(0) rotate(45deg)}
  .cr-more[open] > summary:hover::after{transform:translateY(0) rotate(225deg)}
  .cr-tab:hover{color:var(--pv-ink)}
  .cr-tab[aria-current="page"]:hover{color:var(--pv-accent-ink)}
  .cr-bar:hover::before{opacity:1}
  .cr-bar:hover .cr-ic,.cr-ent:hover .cr-ic,.cr-ask:hover .cr-ic{transform:translateX(3px)}
  .cr-ent:hover,.cr-dest:hover{transform:translateY(-2px)}
  .cr-ask:hover{color:var(--pv-ink)}
}

/* ── 押したときの沈み ──────────────────────────────────────────────
   ⚠️ 上の「乗せたとき」より後ろに置く。同じ強さなので、前に置くと
   マウスで押しているあいだも乗せたときの形が勝ち、押した手応えが消える。 */
.cr-btn:active{transform:scale(.97)}
.cr-side:active{transform:scale(.985)}
.cr-swap:active{transform:rotate(180deg) scale(.92)}
.cr-bar:active{transform:scale(.99)}
.cr-bar:active::before{opacity:1}
.cr-ent:active,.cr-dest:active{transform:scale(.98)}

/* ── 広い画面 ─────────────────────────────────────────────────── */
@media (min-width:760px){
  .cr-gos{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px}
  .cr-hero{height:248px}
  .cr-hero-n{font-size:28px}
  .cr-hero .cr-code{top:16px;left:16px}
  /* 比較の見出しまわりは詰める（字は同じ・空きだけ減らす ── P12.106）。戻るのリンクは押せる高さ 44px のまま。 */
  .cr-cmp > .cr-back{margin-bottom:-6px}
  .cr-cmp-h{margin-bottom:10px}
  .cr-panel{padding:16px 22px 4px}
  .cr-cards{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:16px}
  .cr-cards[data-only="b"] > .cr-card:not([hidden]){grid-column:2}
  .cr-pub{padding:22px 22px 8px}
  .cr-pay{padding:22px 22px 18px}
  .cr-deep > .cr-hero{height:200px}
  .cr-tabs{max-width:520px}
  .cr-tab{font-size:14px}
  .cr-sec,.cr-topic{padding:22px 22px 20px}
  .cr-topic{padding-bottom:8px}
  .cr-bar{margin:0 -12px;padding:12px 12px 14px}
  .cr-ents{max-width:520px}
  .cr-topics{grid-template-columns:repeat(auto-fit, minmax(280px, 1fr))}
  .cr-dests{grid-template-columns:repeat(auto-fill, minmax(148px, 1fr));gap:10px}
  .cr-det-h,.cr-cardv-h{font-size:28px}
  .cr-stay-h{font-size:32px}
  .cr-det-top{padding:22px 22px 18px}
  .cr-facts{padding:6px 22px}
  .cr-fact{grid-template-columns:96px minmax(0,1fr);column-gap:20px;padding:15px 0}
}
/* タブレットの年収の板（★2026-10-25 WP-compare-all-12・760〜999px）：形はスマホと同じ2列（上の「スマホ（〜759px）の年収の板」の囲みが 999px まで効く）。
   札がこの幅では広い画面の形（枠 1px ＋ 内側の空き 14px・札のあいだ 56px）なので、列をその中身にそろえる ──
   板の内側の空き 14px・列のあいだ 86px（＝ 札のあいだ 56px ＋ 両側の 15px）。上下の空きはスマホのまま。税の扱いの字に右の空きを足さない。 */
@media (min-width:760px) and (max-width:999px){
  .cr-panel{padding:8px 14px 2px}
  .cr-panel,.cr-pair,.cr-panel .cr-gos{column-gap:86px}
  .cr-panel .cr-tx{padding-right:0}
}
@media (min-width:900px){
  .cr-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
  .cr-hero{height:auto;min-height:320px}
  .cr-hero-n{left:22px;bottom:20px;font-size:30px}
  .cr-pay{display:flex;flex-direction:column;padding:26px 26px 20px}
  .cr-pay-h{font-size:14px}
  .cr-nums{margin:12px 0 20px}
  .cr-mini{margin-top:auto;padding-top:16px}
  .cr-mini-row{min-height:30px}
  .cr-pay .cr-track{height:14px}
  .cr-deep > .cr-hero{height:220px;min-height:0}
}
/* 比較の棒は1社1行（★2026-10-25 P12.106 ── 低く詰めた・1000px から ── WP-compare-all-12：999px まではスマホと同じ2列）：
   左の列に職位の見出し、その右に 社名・棒・金額。札は、見せるとき（推定でない行が在るとき）だけ社名の下。
   ★WP-compare-all-12：社名の列は、並べた2社の社名に要るだけの幅（板の格子の列を、職位ごとの行の入れ物と行が subgrid で借りる ──
   見えている2社の社名が列の幅を決める・隠れている会社の行は数えない）。上限 --cr-nw は、掲載している全社でいちばん長い社名
   （スイス インターナショナル エアラインズ・13px で点と合わせて約 256px）が1行に入る幅。短い社名どうしなら棒はカードのまんなかから
   （WP-compare-all-11 のオーナーの「まんなかの空き」）、スイスでも 1440px で折れない。棒の列は1本（機長も副操縦士も同じ幅 ＝ 同じ目盛）で、
   目盛は同じ列に置く（両端が棒の土台にそろう）。 */
@media (min-width:1000px){
  .cr-panel{--cr-nw:264px;--cr-vw:136px;display:grid;grid-template-columns:72px fit-content(var(--cr-nw)) minmax(0,1fr) var(--cr-vw);column-gap:16px;align-items:start}
  .cr-panel > *{grid-column:1 / -1}
  .cr-panel > .cr-role{grid-column:1;margin:0;padding-top:7px;line-height:1.4}
  .cr-panel > .cr-pair{grid-column:2 / -1;display:grid;grid-template-columns:subgrid;gap:2px 16px;margin-top:0}
  .cr-panel > .cr-axis{grid-column:3;margin:4px 0 0}
  .cr-panel-top{margin-bottom:10px}
  .cr-pair + .cr-role,.cr-pair + .cr-role + .cr-pair{margin-top:10px}
  .cr-row{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;column-gap:16px;align-items:center;min-height:32px}
  .cr-row-h{display:contents}
  .cr-row-co{grid-column:1;grid-row:1;font-size:13px;line-height:1.35}
  .cr-row .cr-track{grid-column:2;grid-row:1;height:10px;margin-top:0;border-radius:4px}
  .cr-row-v{grid-column:3;grid-row:1;text-align:right;font-size:22px}
  .cr-panel:has(.cr-row[data-kind]:not([hidden])) .cr-row-k{grid-column:1;grid-row:2;margin:0}
  .cr-panel:has(.cr-row[data-kind]:not([hidden])) .cr-row .cr-track,
  .cr-panel:has(.cr-row[data-kind]:not([hidden])) .cr-row-v{grid-row:1 / span 2}
}

@media (prefers-reduced-motion:reduce){
  .cr-view,.cr-fill,.cr-rbar::before{animation:none}
  .cr *,.cr *::before,.cr *::after{transition:none}
}