/* career-live.css — 生きた欄（.crl-*）の見た目。
   色は pv-tokens.css のトークンだけ（ここに色の値を書かない）。動かすのは transform と opacity だけ。
   状態ごとに見た目と言葉を分けてある:
     loading ＝ 骨組み ／ empty（0件）＝ 淡い1行 ／ locked（鍵が無い）＝ 錠の帯 ／
     error（通信が落ちた）＝ 橙の帯とやり直すボタン ／ off（サーバーに口が無い）＝ 点線の札「準備中」 ／
     未取得（その項目を運ぶ道が無い）＝ 点線の小さな札。 */

.crl{position:relative;min-width:0;font-size:14px;line-height:1.7;color:var(--pv-ink)}
.crl-ph{color:var(--pv-ink-3)}
.crl-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.crl-ic{flex:none}

/* 口コミが0件のとき、言葉は星の欄が出す（同じ文を2回出さない） */
.crl[data-live="reviews"][data-state="empty"]{display:none}
/* 落ちたときも同じ（「やり直す」は落ちた欄を全部やり直すので、帯は1本で足りる）。
   会社ページの評価スコアの1枚では、評価と口コミのあいだに要約の欄が在る ＝ すぐ隣ではない（~ で見る。2026-10-25 まで + で、
   評価も口コミも読めなかった時に帯と「やり直す」が2つずつ出ていた）。隠した欄も「やり直す」で取り直す（retryAll が先に idle へ戻す）。 */
.crl[data-live="stars"][data-state="error"] + .crl[data-live="reviews"][data-state="error"],
.crl[data-live="score"][data-state="error"] ~ .crl[data-live="reviews"][data-state="error"]{display:none}
/* 比較：評価も要約も読めなかったとき、同じ知らせと「やり直す」を2つ重ねない（上の欄が出している。やり直すと両方取り直す）。
   片方の会社だけ読めなかったときも、ボタンは上の欄の1つ（「読めなかった」の1語は、それぞれの欄がその会社の所で言う）。
   片方の欄は2社とも・もう片方は1社だけ読めなかったときも、帯と「やり直す」は箱に1つ（帯を出している欄のボタンを残す。
   どのボタンも、読めなかった欄を全部取り直す）。 */
.crl[data-live="cmp-stars"][data-state="error"] + .crl[data-live="cmp-summary"][data-state="error"]{height:0;min-height:0;margin:0;padding:0;border:0;overflow:hidden}
.crl[data-live="cmp-stars"][data-state="error"] + .crl[data-live="cmp-summary"][data-state="error"] > *,
.crl[data-live="cmp-stars"][data-part="1"] + .crl[data-live="cmp-summary"][data-part="1"] > .crl-retry,
.crl[data-live="cmp-stars"][data-state="error"] + .crl[data-live="cmp-summary"][data-part="1"] > .crl-retry,
.crl[data-live="cmp-stars"][data-part="1"]:has(+ .crl[data-live="cmp-summary"][data-state="error"]) > .crl-retry{display:none}

/* ── loading ── */
.crl-sk{display:grid;gap:8px;padding:6px 0}
.crl-sk i{display:block;height:14px;border-radius:7px;background:var(--pv-line);animation:crl-pulse 1.1s var(--pv-ease) infinite alternate}
.crl-sk i:nth-child(1){width:58%}
.crl-sk i:nth-child(2){width:86%}
.crl-sk i:nth-child(3){width:42%}
@keyframes crl-pulse{from{opacity:.35}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.crl-sk i{animation:none}}

/* ── 言葉の1行 ── */
.crl-msg{margin:0;font-size:13px;color:var(--pv-ink-2)}

/* empty ＝ 0件 */
.crl[data-state="empty"] .crl-msg{display:flex;align-items:center;gap:8px;min-height:32px;color:var(--pv-ink-3)}
.crl[data-state="empty"] .crl-msg::before{content:'';flex:none;width:6px;height:6px;border-radius:50%;border:1px solid var(--pv-ink-3)}

/* error ＝ 通信が落ちた */
.crl[data-state="error"]{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;padding:8px 8px 8px 14px;border-radius:var(--pv-r-sm);background:var(--pv-orange-soft)}
.crl[data-state="error"] .crl-msg{font-weight:700;color:var(--pv-orange-ink)}
.crl-retry{appearance:none;-webkit-appearance:none;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--pv-line);background:var(--pv-surface);color:var(--pv-ink);font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:transform .18s var(--pv-ease),opacity .18s var(--pv-ease)}
@media (hover:hover){.crl-retry:hover{opacity:.78}}
.crl-retry:active{transform:scale(.97)}
.crl-retry:focus-visible{outline:2px solid var(--pv-accent);outline-offset:2px}

/* off ＝ サーバーに口がまだ無い */
.crl[data-state="off"] .crl-msg{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border:1px dashed var(--pv-ink-3);border-radius:999px;font-size:12px;font-weight:700;color:var(--pv-ink-3)}

/* locked ＝ 鍵が無い（値は来ていない） */
.crl-lock{display:flex;align-items:center;gap:8px;margin:0;padding:10px 12px;border-radius:var(--pv-r-sm);background:var(--pv-surface-soft);border:1px solid var(--pv-line);font-size:13px;font-weight:700;color:var(--pv-ink-2)}
.crl-lock .crl-ic{color:var(--pv-ink-3)}
.crl-rows + .crl-lock,.crl-revs + .crl-lock,.crl-facts + .crl-lock,.crl-cmp + .crl-lock{margin-top:10px}
/* 答えるカード（自分の会社への回答が足りない人）。鍵の1行のすぐ下。入口は、今までの黒い丸いボタンのまま（押せる形を新しく足さない） */
.crl-lock + .crl-give{margin-top:10px}
.crl-give{display:grid;gap:6px}
.crl-give-h{margin:0;font-size:14px;line-height:1.5;font-weight:700;color:var(--pv-ink)}
.crl-give-n{margin:0;font-size:12px;line-height:1.6;font-variant-numeric:tabular-nums;color:var(--pv-ink-3)}

/* 未取得 ＝ その項目を運ぶ道が無い／その側に無い */
.crl-none{display:inline-flex;align-items:center;align-self:flex-start;min-height:24px;padding:0 8px;border:1px dashed var(--pv-line);border-radius:6px;font-size:12px;color:var(--pv-ink-3);white-space:nowrap}
/* 片方の会社だけ読めなかったとき（もう片方は出ている）。色は欄ごと落ちたときの帯と同じ。
   「準備中」はこの組を持たない ＝ 今までの点線の札のまま（失敗の色にしない）。 */
.crl-side-err{border-style:solid;border-color:transparent;background:var(--pv-orange-soft);color:var(--pv-orange-ink);font-weight:700;white-space:normal}
.crl-blank{display:block;min-height:1px}
.crl[data-part="1"] > .crl-retry{margin-top:10px}
/* 「やり直す」のあと、押した人のフォーカスを受け取る欄（押せるものではないので、輪は描かない） */
.crl[tabindex="-1"]:focus{outline:none}

/* ── 入口 ── */
.crl-foot{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;margin-top:6px}
.crl-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}
.crl-link .crl-ic{transition:transform .18s var(--pv-ease)}
@media (hover:hover){
  .crl-link:hover{text-decoration:underline;text-underline-offset:3px}
  .crl-link:hover .crl-ic{transform:translateX(3px)}
}
.crl-link:active{opacity:.7}
.crl-cta{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;background:var(--pv-cta-dark);color:var(--pv-cta-dark-ink);font-size:14px;font-weight:700;text-decoration:none;transition:transform .18s var(--pv-ease),opacity .18s var(--pv-ease)}
.crl-cta .crl-ic{transition:transform .18s var(--pv-ease)}
@media (hover:hover){
  .crl-cta:hover{opacity:.88}
  .crl-cta:hover .crl-ic{transform:translateX(3px)}
}
.crl-cta:active{transform:scale(.98)}
/* 2行の入口「Give & Get／…」（会社ページ）の形は、ここには無い ── サイト共通の pv-gg.css（2026-10-08）。
   上の行を小さく・薄くする指定や、左寄せ・四角い角をここへ足し戻さない。 */
.crl-link:focus-visible,.crl-cta:focus-visible{outline:2px solid var(--pv-accent);outline-offset:2px;border-radius:8px}
.crl-cta:focus-visible{border-radius:999px}

/* ── 札 ── */
.crl-chip{display:inline-flex;align-items:center;min-height:22px;padding:0 9px;border-radius:999px;background:var(--pv-surface-soft);border:1px solid var(--pv-line);font-size:12px;font-weight:700;line-height:1.3;color:var(--pv-ink-2);white-space:nowrap}
.crl-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0}
/* 口コミの区分の札（名前は表 CAT_FULL の名前）は、箱からはみ出さない（2026-10-25）。入らない時だけ、名前の折れてよい所（<wbr>）で2行に。
   日本語は word-break:keep-all ＝ 語の途中では折れない（英語は空白で折れる）。形（余白・角の丸み）は上の札のまま */
.crl-rev .crl-chip{max-width:100%;box-sizing:border-box;white-space:normal;word-break:keep-all}

/* ── REAL PAY の行（1行＝1人） ── */
.crl-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--pv-line)}
.crl-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--pv-line)}
.crl-row[data-mask]{grid-template-columns:minmax(0,1fr)}
/* 会社ページの鍵の無い行：開いた行と同じ骨組み。職位・機材・年収の場所は、ぼかした板。
   ⚠️ 板の中は最初から空（置いた数字を霞ませているのではない。サーバーが値を送っていない）。
   ⚠️ 板の幅は固定。値や桁数から作らない（幅が動くと、それ自体が数の手がかりになる）。 */
.crl-row[data-mask="line"]{grid-template-columns:minmax(0,1fr) auto}
.crl-row[data-mask="line"] .crl-row-b{align-items:center}
.crl-plate{display:block;flex:none;width:86px;height:14px;border-radius:999px;background:color-mix(in srgb,var(--pv-ink) 30%,transparent);filter:blur(4px)}
.crl-plate-a{width:52px;height:12px}
.crl-plate-b{width:44px;height:12px}
.crl-count{margin:0 0 8px;font-size:12px;color:var(--pv-ink-3)}
.crl-count b{margin:0 1px;font:700 20px/1.2 Inter,sans-serif;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--pv-ink)}
.crl-row-a{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0}
.crl-row-b{display:flex;align-items:baseline;justify-content:flex-end;gap:6px;white-space:nowrap}
.crl-row-c{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px;font-size:12px;color:var(--pv-ink-3)}
.crl-pos{font-size:14px;font-weight:700;color:var(--pv-ink)}
.crl-sub{font-size:12px;color:var(--pv-ink-2)}
.crl-k{font-size:12px;color:var(--pv-ink-3)}
.crl-amt{font-size:18px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--pv-ink)}
.crl-amt[data-none]{font-weight:400;color:var(--pv-ink-3)}
.crl-far{font-size:14px;line-height:1;color:var(--pv-orange-ink);cursor:help}
.crl-vf{display:inline-flex;align-items:center;gap:4px}
.crl-vf[data-v]{font-weight:700;color:var(--pv-accent-ink)}

/* ── 勤務（月の勤務の集計。幅だけ） ── */
.crl-work{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:10px}
.crl-wk{display:flex;flex-direction:column;gap:6px;min-width:0;padding:12px;border:1px solid var(--pv-line);border-radius:var(--pv-r-sm);background:var(--pv-surface)}
.crl-wk-k{font-size:13px;font-weight:700;color:var(--pv-ink)}
.crl-unit{margin-left:6px;font-size:12px;font-weight:400;color:var(--pv-ink-3)}
.crl-wk-v{display:grid;gap:4px;margin:0}
.crl-wk-r{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:24px}
.crl-wk-r dt{flex:none;font-size:12px;color:var(--pv-ink-3)}
.crl-wk-r dd{margin:0;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--pv-ink)}
.crl-wk-r dd.crl-none{align-self:center;font-weight:400}
/* ── 月の勤務を枠で（会社ページの面だけ：data-bars="1"）──
   6つの項目の枠。枠の中は 職位｜帯｜数字｜単位 の1行ずつ。
   ★帯の軸のいちばん短い長さは 96px（日・泊の軸は 31 目盛 × 3px ＝ 93 を切り上げ。時間の軸は 5 時間が 2px）。
     枠のいちばん狭い幅 304px ＝ 96 ＋ 職位 56 ＋ 数字 72 ＋ 単位 30 ＋ すき間 8×3 ＋ 内側の余白 12×2 ＋ 罫線 1×2。
     列の幅（56 / 72 / 30）を変えたら、304（下の @container の境も同じ数）と 618 を計算し直す。
   ★数字と単位の列の幅を auto に戻さない（行ごと・枠ごとに軸の長さが変わり、同じ単位の帯を見比べられなくなる）。
   2列まで（見本の並び：時間どうし・日数どうしが横に並ぶ）。入れ物が 618px（304×2＋すき間10）より狭ければ1列。
   入れ物が 304px より狭いとき（スマホ）は、帯を数字の下の段へ移す ＝ 帯は 96px より短くならない。 */
.crl-wb{container:crlwb / inline-size;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,max(304px,calc(50% - 5px))),1fr));gap:10px}
.crl-wb-c{display:grid;align-content:start;gap:6px;min-width:0;padding:12px;border:1px solid var(--pv-line);border-radius:var(--pv-r-sm);background:var(--pv-surface)}
.crl-wb-r{display:grid;grid-template-columns:56px minmax(0,1fr) 72px 30px;align-items:center;gap:0 8px;min-height:24px}
.crl-wb-p{font-size:12px;color:var(--pv-ink-3);white-space:nowrap}
.crl-wb-tr{position:relative;display:block;height:10px;border-radius:5px;background:var(--pv-line);overflow:hidden}
.crl-wb-b{position:absolute;top:0;bottom:0;left:min(var(--f),calc(100% - 4px));width:max(var(--w),4px);border-radius:5px;background:var(--pv-accent)}
.crl-wb-tr.is-over::after{content:"";position:absolute;top:0;bottom:0;right:0;width:10px;background:repeating-linear-gradient(135deg,var(--pv-ink) 0 2px,var(--pv-surface) 2px 4px)}
.crl-wb-n{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;color:var(--pv-ink)}
.crl-wb-u{font-size:12px;white-space:nowrap;color:var(--pv-ink-3)}
.crl-wb-o{grid-column:2 / -1;justify-self:end;font-size:12px;line-height:1.4;color:var(--pv-ink-3)}
.crl-wb-r > .crl-none{grid-column:2 / -1;justify-self:end;font-size:13px;color:var(--pv-ink-3)}
.crl-wb-cap{display:flex;flex-wrap:wrap;gap:0 12px;margin:10px 0 0;font-size:12px;line-height:1.6;color:var(--pv-ink-3)}
.crl-wb-sc{font-variant-numeric:tabular-nums}
@container crlwb (width < 304px){
  .crl-wb-r{grid-template-columns:56px minmax(0,1fr) 30px;gap:4px 8px}
  .crl-wb-p{grid-area:1 / 1}
  .crl-wb-n{grid-area:1 / 2}
  .crl-wb-u{grid-area:1 / 3}
  .crl-wb-tr{grid-area:2 / 1 / auto / -1}
  .crl-wb-o{grid-area:3 / 1 / auto / -1}
  .crl-wb-r > .crl-none{grid-area:1 / 2 / auto / -1}
}
/* 英語のページ（2026-10-24 WP-en-5）：職位の名前「First Officer」は 67px（12px の字）で、56px の列から帯へ 3px かぶっていた。
   英語だけ名前の列を 76px に（日本語の「副操縦士」48px と同じ 16px のすき間）。列の幅は固定のまま（帯の長さを行ごとに変えない）。
   英語の枠のいちばん狭い幅は 324px ＝ 96 ＋ 職位 76 ＋ 数字 72 ＋ 単位 30 ＋ すき間 8×3 ＋ 内側の余白 12×2 ＋ 罫線 1×2（並びの最小と、段を移す境も同じ数）。
   日本語のページには1つも当たらない（:lang(en)）。 */
.crl-wb:lang(en){grid-template-columns:repeat(auto-fit,minmax(min(100%,max(324px,calc(50% - 5px))),1fr))}
.crl-wb-r:lang(en){grid-template-columns:76px minmax(0,1fr) 72px 30px}
@container crlwb (width < 324px){
  .crl-wb-r:lang(en){grid-template-columns:76px minmax(0,1fr) 30px;gap:4px 8px}
  .crl-wb-p:lang(en){grid-area:1 / 1}
  .crl-wb-n:lang(en){grid-area:1 / 2}
  .crl-wb-u:lang(en){grid-area:1 / 3}
  .crl-wb-tr:lang(en){grid-area:2 / 1 / auto / -1}
  .crl-wb-o:lang(en){grid-area:3 / 1 / auto / -1}
  .crl-wb-r:lang(en) > .crl-none{grid-area:1 / 2 / auto / -1}
}
@media (forced-colors:active){
  .crl-wb-tr{border:1px solid CanvasText}
  .crl-wb-b{background:Highlight;forced-color-adjust:none}
}
/* 鍵の文を繰り返さない欄：開いていないときは欄ごと出さない（同じ板の月の勤務の欄が言う） */
.crl[data-quiet="1"][data-state="locked"]{display:none}
/* 比較の中では、職位の名前を値のすぐ左へ寄せる（列の幅いっぱいに離さない） */
.crl-cmp-c .crl-wk-r{justify-content:flex-start;gap:10px}
.crl-cmp-c .crl-wk-r dt{min-width:4.5em}

/* ── 会員の補足（読めるものが在るときだけ出る） ── */
.crl[data-live="notes"] > .crl-ph,
.crl[data-live="notes"] > .crl-sk{display:none}
.crl[data-live="notes"][data-state="empty"],
.crl[data-live="notes"][data-state="error"],
.crl[data-live="notes"][data-state="off"]{display:none}
.crl[data-live="notes"][data-state="open"]{margin-top:14px}
.crl .crl-note-h{margin:14px 0 6px;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--pv-ink-2)}
.crl[data-live="notes"] > .crl-note-h{margin-top:0}
.crl-notes{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.crl-note{min-width:0;padding:10px 12px;border:1px solid var(--pv-line);border-radius:var(--pv-r-sm);background:var(--pv-surface)}
.crl-note-k{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0;font-size:12px;font-weight:700;line-height:1.5;color:var(--pv-ink-2)}
.crl-note-me{display:inline-flex;align-items:center;min-height:20px;padding:0 8px;border-radius:999px;background:var(--pv-accent-soft);font-size:12px;font-weight:700;color:var(--pv-accent-ink)}
.crl .crl-note-t{margin:4px 0 0;font-size:13px;line-height:1.7;color:var(--pv-ink);white-space:pre-line;overflow-wrap:anywhere}

/* 会員が挙げた街（人数の多い順。数字はサーバーの答えのまま） */
.crl .crl-town-h{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--pv-ink-2)}
.crl-town-me > .crl-note-h{margin-top:0}
.crl-town-me + .crl-town-h,.crl-town-me + .crl-lock{margin-top:14px}
.crl-towns{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));align-items:start}
.crl-town{min-width:0;padding:10px 12px;border:1px solid var(--pv-line);border-radius:var(--pv-r-sm);background:var(--pv-surface)}
.crl-town-k{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:0}
.crl-town-n{min-width:0;font-size:14px;font-weight:700;line-height:1.4;color:var(--pv-ink);overflow-wrap:anywhere}
.crl-town-c{margin-left:auto;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--pv-ink-2)}
.crl .crl-town-l{margin:10px 0 4px;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--pv-ink-3)}
.crl-town-tx{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.crl-town-t{font-size:13px;line-height:1.7;color:var(--pv-ink-2);overflow-wrap:anywhere}
.crl-town-t > .crl-note-me{margin-left:8px}
.crl-town-own{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.crl-town-own > li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-height:44px}
.crl-town-st{padding:2px 9px;border-radius:999px;border:1px solid var(--pv-line);font-size:12px;font-weight:700;color:var(--pv-ink-3)}
.crl-town-ed{appearance:none;-webkit-appearance:none;min-width:44px;min-height:44px;justify-content:center;padding:0 4px;border:0;background:none;font:inherit;font-size:13px;font-weight:700;cursor:pointer}

/* ── 2社を並べる（同じ形・同じ色。勝ち負けを付けない） ── */
.crl-cmp{display:grid}
.crl-cmp-head,.crl-cmp-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 14px}
.crl-cmp-head{padding-bottom:8px;border-bottom:1px solid var(--pv-line)}
.crl-co{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;min-width:0;font-size:12px;font-weight:700;line-height:1.4;color:var(--pv-ink-2)}
.crl-co::before{content:'';flex:none;width:8px;height:8px;border-radius:50%;background:var(--crl-co,var(--pv-ink-3))}
/* 社名は語の途中で折らない（2026-10-23：320px で「キャセイパシフィ／ック」）。色の点の横に入らなければ、名前ごと次の行へ送る。
   折るのは語の切れ目（空白・「・」・括弧の前）だけ。それでも列より長い1語は、末尾を「…」で切る（列の外へはみ出さない・字を小さくしない） */
.crl-co-n{min-width:0;max-width:100%;word-break:keep-all;overflow-wrap:normal;overflow:hidden;text-overflow:ellipsis}
.crl-cmp-row{padding:10px 0;border-bottom:1px solid var(--pv-line-soft)}
.crl-cmp-k{grid-column:1 / -1;font-size:13px;font-weight:700;line-height:1.5;color:var(--pv-ink)}
.crl-cmp-c{display:flex;flex-direction:column;min-width:0}
/* 片方の会社だけ開いているとき：2列をやめて上下に並べる（開いていない側に空の列を作らない） */
.crl-split{display:grid;gap:14px}
.crl-split-c{display:grid;gap:8px;min-width:0}
.crl-split-c + .crl-split-c{padding-top:14px;border-top:1px solid var(--pv-line-soft)}
/* 「月の働き方」のすぐ下の回答の欄（data-quiet）：開いていない時・並べる行が無い時は何も言わない（すぐ上の欄が言っている）。
   ⚠️ display:none にしない ── 比較は2社を選び直せる。消えた箱は取り直されない（career-live.js は見えている箱だけを取りに行く）。 */
.crl[data-live="cmp-facts"][data-quiet="1"] > .crl-ph,
.crl[data-live="cmp-facts"][data-quiet="1"] > .crl-sk{display:none}
.crl[data-live="cmp-facts"][data-quiet="1"][data-state="open"],
.crl[data-live="cmp-facts"][data-quiet="1"][data-state="off"],
.crl[data-live="cmp-facts"][data-quiet="1"][data-state="error"]{margin-top:14px}
.crl[data-live="cmp-facts"][data-quiet="1"][data-state="open"]{padding-top:14px;border-top:1px solid var(--pv-line-soft)}
.crl[data-live="cmp-facts"][data-quiet="1"][data-state="locked"],
.crl[data-live="cmp-facts"][data-quiet="1"][data-state="empty"],
.crl[data-live="cmp-work"][data-state="off"] + .crl[data-live="cmp-facts"][data-quiet="1"][data-state="off"],
.crl[data-live="cmp-work"][data-state="error"] + .crl[data-live="cmp-facts"][data-quiet="1"][data-state="error"]{display:block;height:0;min-height:0;margin:0;padding:0;border:0;overflow:hidden}
.crl[data-live="cmp-work"][data-state="off"] + .crl[data-live="cmp-facts"][data-quiet="1"][data-state="off"] > *,
.crl[data-live="cmp-work"][data-state="error"] + .crl[data-live="cmp-facts"][data-quiet="1"][data-state="error"] > *{display:none}
/* 片方の会社だけ開いているときも同じ：開いた会社に並べる行が無ければ（「まだ集計がありません」の1行だけ）、その会社の部分は出さない
   （すぐ上の「月の働き方」の欄が、その会社のことを言っている ── 1つの箱に同じ1行を2回出さない）。
   出す部分が1つも残らなければ（並べる行も、読めなかった会社の1行も無い）、欄ごと高さ 0（上と同じ畳み方）。 */
.crl[data-live="cmp-facts"][data-quiet="1"] .crl-split-c:has(> .crl-msg){display:none}
.crl[data-live="cmp-facts"][data-quiet="1"] .crl-split-c:has(> .crl-msg) + .crl-split-c{padding-top:0;border-top:0}
.crl[data-live="cmp-facts"][data-quiet="1"][data-state="open"]:has(> .crl-split):not(:has(> .crl-split .crl-facts, > .crl-split .crl-none)){display:block;height:0;min-height:0;margin:0;padding:0;border:0;overflow:hidden}

/* ── 口コミ ── */
.crl-score{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;margin:0}
.crl-stars{position:relative;display:inline-block;font-size:16px;line-height:1;color:var(--pv-line);white-space:nowrap}
.crl-stars::before{content:'★★★★★'}
.crl-stars::after{content:'★★★★★';position:absolute;left:0;top:0;width:var(--crl-fill,0%);overflow:hidden;color:var(--pv-star)}
.crl-avg{font-size:18px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.crl-cnt{font-size:12px;color:var(--pv-ink-2)}
/* 会社ページ：点数の付いた投稿がまだ無いときは、輪郭だけの星（0点の星ではない） */
.crl-stars[data-none]{color:var(--pv-ink-3)}
.crl-stars[data-none]::before{content:'☆☆☆☆☆'}
.crl-stars[data-none]::after{content:none}
/* 比較の口コミ：星・点数・「n件の評価」の次の行に「会員の投稿 n件」（2つの数を同じ行に並べない） */
.crl-rate{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.crl-posts{margin:0;font-size:12px;line-height:1.5;color:var(--pv-ink-3)}
/* 投稿が無い会社・読めなかった会社の1語は、狭い列では折り返す（1行に固定しない） */
.crl-rate > .crl-none{white-space:normal;padding:2px 8px;line-height:1.5}
/* 評価の続きの行（6角形・口コミの抜粋）。列は評価の行と同じ2つ。評価の行とのあいだに線を引かない（同じ会社の評価の続き） */
.crl-cmp-sub{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 14px;padding:4px 0 12px;border-bottom:1px solid var(--pv-line-soft)}
.crl-cmp-sc{display:flex;flex-direction:column;min-width:0}
.crl-cmp-row:has(+ .crl-cmp-sub),.crl-cmp-sub:has(+ .crl-cmp-sub){border-bottom:0}
.crl-rate-rv .crl-revs{margin:0}
/* 口コミの鍵のある人：その会社のマスの中で、ほかの人の投稿をスクロールして読む枠（新しい順・本文のまま）。
   枠の外のページは動かさない（overscroll-behavior）。キーボードで入れる枠なので、入った時は枠に輪を出す */
.crl-rv-scroll{display:grid;gap:4px;max-height:420px;overflow-y:auto;overscroll-behavior:contain;padding:2px 4px 2px 0;border-radius:var(--pv-r-sm)}
.crl-rv-scroll:focus-visible{outline:2px solid var(--pv-accent);outline-offset:2px}
.crl-rv-scroll > .crl-revs{margin:0}
.crl-rev-full .crl-rev-text{display:block;-webkit-line-clamp:unset;overflow:visible}
.crl-rev:focus-visible{outline:2px solid var(--pv-accent);outline-offset:2px}
.crl-rev:focus:not(:focus-visible){outline:none}
button.crl-rv-more{appearance:none;-webkit-appearance:none;justify-self:start;margin:0;padding:0;border:0;background:none;font:inherit;font-size:13px;font-weight:700;color:var(--pv-accent-ink);cursor:pointer}
@media (hover:hover){button.crl-rv-more:hover .crl-ic{transform:translateY(2px)}}
/* 2社とも投稿が無いとき：1つの文の下に、社名の札と淡い6角形の格子（文と格子のあいだを少し空ける） */
.crl[data-live="cmp-stars"] > .crl-msg + .crl-cmp{margin-top:8px}
/* ── 比較の6角形（2社を同じ形・同じ色で）──
   線と面は会社ページ（pv-glance.css の .pvg .crl-radar-*）と同じ値の写し。片方だけ直すと黙って別物になる。
   点数で塗れない会社は、会社ページと同じ 3.0 の面（is-ph）。★2026-10-26 オーナー：色は点数のある面と同じ・点の丸と数字は置かない。
   既定は狭い箱の形：上に図、下に6分類の名前と点数を1行ずつ。欄が広いとき（560px〜）だけ、会社ページと同じ「図のまわりに名前」
   （名前は古いページの言葉 ──「給与・報酬の納得度」まで ── なので、会社ページと同じく左右の列を 76px に広げる）。
   ⚠️ 既定を広い形にしない。箱の幅で測れないブラウザは既定のまま出る（狭い箱で名前が図に重ならない）。 */
.crl-rate-fig .crl-cmp-sc{align-items:center}
.crl-cmp .crl-radar{display:grid;grid-template-columns:minmax(0,1fr);gap:2px 8px;width:100%;max-width:272px;margin:0 auto}
.crl-cmp .crl-radar-svg{display:block;width:100%;max-width:148px;height:auto;aspect-ratio:1;margin:0 auto 6px;overflow:visible}
.crl-cmp .crl-radar-ring{fill:none;stroke:var(--pv-line);stroke-width:1;vector-effect:non-scaling-stroke}
.crl-cmp .crl-radar-axis{stroke:var(--pv-line);stroke-width:1;vector-effect:non-scaling-stroke}
.crl-cmp .crl-radar-shape{fill:var(--pv-gold-soft);stroke:var(--pv-star);stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.crl-cmp .crl-radar-dot{fill:var(--pv-star)}
.crl-cmp .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}
.crl-cmp .crl-radar-l{display:flex;flex-wrap:wrap;align-items:baseline;align-items:last baseline;justify-content:space-between;gap:0 8px;min-width:0;font-size:12px;line-height:1.5;color:var(--pv-ink-2)}
/* 名前は残りの幅いっぱい・入らない時は名前の折れてよい所（<wbr>）で折れて、点数は同じ行の右に残る（「ワークライフ／バランス 4.3」・2026-10-25） */
.crl-cmp .crl-radar-l span{flex:1 1 0;min-width:0;word-break:keep-all;overflow-wrap:anywhere}
.crl-cmp .crl-radar-l b{flex:none;margin-left:auto;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--pv-ink)}
@supports (container-type:inline-size){
  .crl[data-live="cmp-stars"]{container-type:inline-size}
  @container (min-width:560px){
    .crl-cmp .crl-radar{grid-template-columns:76px minmax(0,1fr) 76px;grid-template-rows:auto 1fr 1fr auto;align-items:center;gap:4px 8px;max-width:300px}
    .crl-cmp .crl-radar-svg{grid-column:2;grid-row:2 / span 2;max-width:none;margin:0}
    .crl-cmp .crl-radar-l{flex-direction:column;flex-wrap:nowrap;align-items:flex-start;justify-content:flex-start;gap:0;line-height:1.35}
    .crl-cmp .crl-radar-l span{flex:0 1 auto}
    .crl-cmp .crl-radar-l b{margin-left:0;font-size:14px}
    .crl-cmp .crl-radar-l[data-i="0"],.crl-cmp .crl-radar-l[data-i="3"]{grid-column:1 / -1;flex-direction:row;align-items:baseline;justify-content:center;gap:6px}
    .crl-cmp .crl-radar-l[data-i="0"]{grid-row:1}
    .crl-cmp .crl-radar-l[data-i="3"]{grid-row:4}
    .crl-cmp .crl-radar-l[data-i="1"]{grid-column:3;grid-row:2}
    .crl-cmp .crl-radar-l[data-i="2"]{grid-column:3;grid-row:3}
    .crl-cmp .crl-radar-l[data-i="5"]{grid-column:1;grid-row:2;align-items:flex-end;text-align:right}
    .crl-cmp .crl-radar-l[data-i="4"]{grid-column:1;grid-row:3;align-items:flex-end;text-align:right}
  }
}
/* 会社ページ：星の行は「口コミ」のタブへの入口 */
a.crl-score-a{display:inline-flex;flex-wrap:nowrap;gap:8px;min-height:44px;color:var(--pv-ink);text-decoration:none;border-radius:8px}
a.crl-score-a .crl-ic{flex:none;color:var(--pv-ink-3);transition:transform .18s var(--pv-ease)}
@media (hover:hover){
  a.crl-score-a:hover .crl-cnt{color:var(--pv-accent-ink);text-decoration:underline;text-underline-offset:3px}
  a.crl-score-a:hover .crl-ic{transform:translateX(3px)}
}
a.crl-score-a:active{opacity:.7}
a.crl-score-a:focus-visible{outline:2px solid var(--pv-accent);outline-offset:2px}

/* ── 口コミの要約（会社ページ）──
   要約が無い会社がほとんどなので、読み込み中の骨組みは出さない（出して消えると、欄が跳ねる）。
   箱そのものは消さない ── 画面に居ないと取りに行けない。 */
.crl[data-live="summary"] > .crl-ph,
.crl[data-live="summary"] > .crl-sk{display:none}
.crl[data-live="summary"][data-state="idle"],
.crl[data-live="summary"][data-state="loading"],
.crl[data-live="summary"][data-state="open"],
.crl[data-live="summary"][data-state="locked"],
.crl[data-live="summary"][data-state="empty"]{margin-top:14px;padding-top:14px;border-top:1px solid var(--pv-line-soft)}
.crl[data-live="summary"][data-state="error"]{margin-top:14px}
.crl[data-live="summary"][data-state="locked"]{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.crl-sum-title{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--pv-ink-2)}
.crl-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px 24px}
.crl-sum-col{min-width:0}
.crl-sum-h{display:flex;align-items:center;gap:8px;margin:0 0 2px;font-size:13px;font-weight:700;color:var(--pv-ink)}
.crl-sum-h::before{content:'';flex:none;width:8px;height:8px;border-radius:50%;background:var(--pv-accent)}
.crl-sum-col[data-kind="concern"] .crl-sum-h::before{background:var(--pv-orange-ink)}
.crl-sum-ul{list-style:none;margin:0;padding:0}
.crl-sum-li{display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 0;border-top:1px solid var(--pv-line-soft);font-size:14px;line-height:1.6;color:var(--pv-ink)}
.crl-sum-li:first-child{border-top:0}
.crl-sum-t{flex:1;min-width:0;overflow-wrap:anywhere}
/* 全体の傾向の段落（2026-10-30）。見出しの下・良い点の上 */
/* .crl を前に付けるのは、会社ページの .pvg p（余白を0にする決まり）に負けないため */
/* ★オーナー「要約のまとめも囲うとかして読みやすく」── 見出し「まとめ」つきの枠。比較の会社ごとの枠の中では白い面で浮かせる */
.crl .crl-sum-ovb{margin:0 0 16px;padding:12px 16px 14px;border:1px solid var(--pv-line);border-radius:10px;background:var(--pv-surface-2)}
.crl .crl-sum-ovk{display:block;margin:0 0 4px;font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--pv-ink-2)}
.crl .crl-sum-ov{margin:0;padding:0;font-size:15px;line-height:1.8;color:var(--pv-ink)}
.crl .crl-sum2-c .crl-sum-ovb{margin:0;padding:10px 12px 12px;background:var(--pv-surface)}
.crl .crl-sum2-c .crl-sum-ov{font-size:14px;line-height:1.75}
/* 「話題：説明」の話題（2026-10-30）。見出しとして1行目に・「：」は見えなくするだけ */
.crl-sum-k{display:block;font-size:12px;font-weight:800;line-height:1.5;letter-spacing:.02em;color:var(--pv-ink)}
.crl-sum-sep{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.crl-sum-col[data-kind="good"] .crl-sum-k{color:var(--pv-accent-ink)}
.crl-sum-col[data-kind="concern"] .crl-sum-k{color:var(--pv-orange-ink)}
a.crl-sum-a{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-12px;color:var(--pv-ink-3);border-radius:50%}
a.crl-sum-a .crl-ic{transition:transform .18s var(--pv-ease)}
@media (hover:hover){
  a.crl-sum-a:hover{color:var(--pv-accent-ink)}
  a.crl-sum-a:hover .crl-ic{transform:translateX(3px)}
}
a.crl-sum-a:active{opacity:.7}
a.crl-sum-a:focus-visible{outline:2px solid var(--pv-accent);outline-offset:-4px}
.crl-sum-by{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:8px 0 0;font-size:12px;color:var(--pv-ink-2)}
.crl-sum-ai{display:inline-flex;align-items:center;min-height:20px;padding:0 8px;border-radius:999px;background:var(--pv-accent-soft);color:var(--pv-accent-ink);font-weight:600;letter-spacing:.02em}
/* ── 口コミの要約（比較・会社ごと）──
   待っているあいだも1行ぶん（44px）取っておく ＝ 1行の答え（ログイン／鍵／少ない／まだ無い／準備中）が来ても下が動かない。
   会社ページの要約の欄（pv-glance.css）と同じ決め方：欄は content-box で 44px、1行の顔はどれも 44px の高さ（2026-10-23 に測った：
   40px のままだと、答えが来た時に下が 9〜19px 動いた）。骨組みは出さない。
   ⚠️ 箱そのものを display:none にしない（2社を選び直した時に取りに行けない）。畳むときは高さ 0。 */
.crl[data-live="cmp-summary"]{min-height:44px;box-sizing:content-box}
.crl[data-live="cmp-summary"][data-state="locked"] > .crl-lock{min-height:44px;box-sizing:border-box}
.crl[data-live="cmp-summary"] > .crl-ph,
.crl[data-live="cmp-summary"] > .crl-sk{display:none}
.crl[data-live="cmp-summary"][data-state="idle"],
.crl[data-live="cmp-summary"][data-state="loading"],
.crl[data-live="cmp-summary"][data-state="open"],
.crl[data-live="cmp-summary"][data-state="locked"]{margin-top:14px;padding-top:14px;border-top:1px solid var(--pv-line-soft)}
.crl[data-live="cmp-summary"][data-state="error"]{margin-top:14px}
.crl[data-live="cmp-summary"][data-state="locked"]{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
/* 静かな1行（少ない／まだ無い／準備中）だけの欄は畳んでおく。出すのは、すぐ上の評価の欄に「点数の付いた投稿がある会社」か
   「読めなかった会社」が描かれている時だけ（投稿の無い会社に、同じ意味の文を2つ並べない）。
   印（data-rated）を持つのは、評価を2社ぶん描いた格子だけ ── 2社とも投稿が無い時の淡い6角形の格子は印を持たない ＝ 畳んだまま。
   :has() を知らないブラウザはこの下の3つの規則を捨てる ＝ 畳んだまま（言い過ぎない側へ倒れる）。 */
.crl[data-live="cmp-summary"][data-state="empty"]{height:0;min-height:0;margin:0;padding:0;border:0;overflow:hidden}
.crl[data-live="cmp-summary"][data-state="empty"] > *{visibility:hidden}
.crl-sum2-c[data-quiet]{display:none}
.crl[data-live="cmp-stars"]:has(> .crl-cmp[data-rated]:not([data-rated="00"])) + .crl[data-live="cmp-summary"][data-state="empty"]{height:auto;min-height:44px;margin-top:14px;padding-top:14px;border-top:1px solid var(--pv-line-soft);overflow:visible}
.crl[data-live="cmp-stars"]:has(> .crl-cmp[data-rated]:not([data-rated="00"])) + .crl[data-live="cmp-summary"][data-state="empty"] > *{visibility:visible}
.crl[data-live="cmp-stars"]:has(> .crl-cmp[data-rated]:not([data-rated^="0"])) + .crl[data-live="cmp-summary"] .crl-sum2-c[data-quiet][data-col="1"],
.crl[data-live="cmp-stars"]:has(> .crl-cmp[data-rated]:not([data-rated$="0"])) + .crl[data-live="cmp-summary"] .crl-sum2-c[data-quiet][data-col="2"]{display:grid}
/* 静かな1行の見た目は、欄の状態ではなく行そのもの（data-why）で決める ＝ 会社ごとの枠の中でも同じ形。「準備中」は集計の欄と同じ点線の札 */
.crl[data-live="cmp-summary"] .crl-msg[data-why]{display:flex;align-items:center;gap:8px;min-height:32px;color:var(--pv-ink-3)}
.crl[data-live="cmp-summary"] .crl-msg[data-why]::before{content:'';flex:none;width:6px;height:6px;border-radius:50%;border:1px solid var(--pv-ink-3)}
.crl[data-live="cmp-summary"] > .crl-msg[data-why]{min-height:44px}
.crl[data-live="cmp-summary"] .crl-msg[data-why="off"]{display:inline-flex;min-height:28px;padding:0 12px;border:1px dashed var(--pv-ink-3);border-radius:999px;font-size:12px;font-weight:700}
.crl[data-live="cmp-summary"] .crl-msg[data-why="off"]::before{content:none}
.crl-sum2{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.crl-sum2-c{display:grid;gap:8px;align-content:start;min-width:0}
.crl-sum2-c .crl-sum-li{min-height:0;padding:6px 0}
/* ★2026-10-29 オーナー「比較の口コミの要約が読みづらい。文ではなく、枠？視覚的に読みづらい」── 会社ごとに1つの枠・その中で「良い点」と
   「気になる点」を印（＋ 緑／！ 橙）つきの見出しで分け、1点ずつを左に色の帯を持つ小さな枠に入れる（線で区切った文の続きにしない）。
   文はサーバーの要約のまま（1文字も変えない・並べ替えない）。静かな1行（data-quiet）の出し入れは上の規則のまま */
.crl-sum2-c:not([data-quiet]){gap:12px;padding:14px;border:1px solid var(--pv-line);border-radius:var(--pv-r);background:var(--pv-surface-2)}
.crl-sum2-c:not([data-quiet]) > .crl-co{padding:0 0 10px;border-bottom:1px solid var(--pv-line-soft);font-size:14px;color:var(--pv-ink)}
.crl-sum2-c .crl-sum-col{display:grid;gap:6px}
.crl-sum2-c .crl-sum-h{gap:8px;margin:0;font-size:13px}
.crl-sum2-c .crl-sum-h::before{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--pv-accent-soft);color:var(--pv-accent-ink);font:800 13px/1 Inter,sans-serif;content:'＋'}
.crl-sum2-c .crl-sum-col[data-kind="concern"] .crl-sum-h::before{background:var(--pv-orange-soft);color:var(--pv-orange-ink);content:'！'}
.crl-sum2-c .crl-sum-ul{display:grid;gap:6px}
.crl-sum2-c .crl-sum-li{padding:8px 12px;border:1px solid var(--pv-line-soft);border-left:3px solid var(--pv-accent);border-radius:8px;background:var(--pv-surface);font-size:14px;line-height:1.65}
.crl-sum2-c .crl-sum-li:first-child{border-top:1px solid var(--pv-line-soft)}
.crl-sum2-c .crl-sum-col[data-kind="concern"] .crl-sum-li{border-left-color:var(--pv-orange)}
/* ★2026-10-30 オーナー「会社ページの要約も比較みたいにして。読みづらい」── 会社ページも同じ形（印つきの見出し・1点ずつ左に色の帯の枠）。
   比較と違うのは、点の右に口コミへの矢印（44px の押せる幅）があることだけ。 */
/* 1列に積む（2列だと PC の右の欄で1つの枠が細くなり、1行に十数字しか入らない） */
.crl[data-live="summary"] .crl-sum{grid-template-columns:minmax(0,1fr);gap:16px}
.crl[data-live="summary"] .crl-sum-by{margin-top:12px}
.crl[data-live="summary"] .crl-sum-col{display:grid;gap:8px;align-content:start}
.crl[data-live="summary"] .crl-sum-h{gap:8px;margin:0;font-size:13px}
.crl[data-live="summary"] .crl-sum-h::before{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--pv-accent-soft);color:var(--pv-accent-ink);font:800 13px/1 Inter,sans-serif;content:'＋'}
.crl[data-live="summary"] .crl-sum-col[data-kind="concern"] .crl-sum-h::before{background:var(--pv-orange-soft);color:var(--pv-orange-ink);content:'！'}
.crl[data-live="summary"] .crl-sum-ul{display:grid;gap:8px}
.crl[data-live="summary"] .crl-sum-li{padding:10px 4px 10px 14px;border:1px solid var(--pv-line-soft);border-left:3px solid var(--pv-accent);border-radius:8px;background:var(--pv-surface);font-size:14px;line-height:1.7}
.crl[data-live="summary"] .crl-sum-li:first-child{border-top:1px solid var(--pv-line-soft)}
.crl[data-live="summary"] .crl-sum-col[data-kind="concern"] .crl-sum-li{border-left-color:var(--pv-orange)}
.crl[data-live="summary"] a.crl-sum-a{margin-right:0}
.crl-sum2-c .crl-sum-by{margin:0}
@supports (container-type:inline-size){
  .crl[data-live="cmp-summary"]{container-type:inline-size}
  @container (min-width:560px){
    .crl-sum2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 24px}
    .crl-sum2-c[data-col="1"]{grid-column:1}
    .crl-sum2-c[data-col="2"]{grid-column:2}
  }
}
/* 要約の欄が「ログインが必要です」か「要約は口コミの投稿で開きます」を言っている時は、すぐ下の口コミの畳みの錠前の1行
   （「口コミの投稿で開きます」）を重ねない ── 会社ページの評価スコアのカードと同じ（pv-glance.css 2026-10-08）。口コミの Give & Get は残す。
   ★2026-10-31：錠前の1行は評価の欄から、要約の下の畳み（cmp-revs）へ移った */
.crl[data-live="cmp-summary"][data-state="locked"] + .crl[data-live="cmp-revs"] .crl-rv-fold > .crl-lock{display:none}
/* ★2026-11-01 オーナー「Give & Get 口コミを解放する では？」：要約の板が口コミの Give & Get を出しているあいだ、すぐ下の口コミの畳みの
   Give & Get は出さない（入口は1つ） */
.crl[data-live="cmp-summary"][data-state="locked"] + .crl[data-live="cmp-revs"] > .crl-foot{display:none}
/* 評価の欄が格子で終わっている時（口コミの鍵のある人など ── 下に錠前の1行も入口も無い）は、格子の最後の行の線が区切り。
   要約の欄の上にもう1本引かない（細い線を2本重ねない）。読めなかった時の帯（error）は線を持たないので触らない */
.crl[data-live="cmp-stars"]:has(> .crl-cmp:last-child) + .crl[data-live="cmp-summary"][data-state]:not([data-state="error"]){margin-top:0;border-top:0}
@media (prefers-reduced-motion:reduce){a.crl-score-a .crl-ic,a.crl-sum-a .crl-ic{transition:none}}

.crl-revs{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.crl-rev{display:grid;gap:8px;padding:12px 14px;border:1px solid var(--pv-line);border-radius:var(--pv-r);background:var(--pv-surface)}
.crl-rev-when{margin:0;font-size:12px;color:var(--pv-ink-3)}
.crl-rev-cat{min-width:0}
.crl-rev-text{margin:4px 0 0;font-size:14px;line-height:1.7;color:var(--pv-ink);overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
/* 抜粋の終わりの「…」は、サーバーが切った時だけ付けている（pv_review_clip）。ここで足さない ──「……」にしない・切っていない字に付けない
   （2026-10-25 まで会社ページだけ ::after で足していた。比較は 10-22 から外してあった）。 */
.crl-rev-clip{display:block;color:var(--pv-ink-2)}

/* ── 待遇の集計 ── */
.crl-facts{display:grid;border-top:1px solid var(--pv-line)}
.crl-fact{display:grid;gap:2px;padding:10px 0;border-bottom:1px solid var(--pv-line-soft)}
.crl-fact-k{font-size:12px;line-height:1.5;color:var(--pv-ink-2)}
.crl-fact.is-sub{margin-left:12px;padding-left:10px;border-left:2px solid var(--pv-line-soft)}
.crl-fact.is-ctx{padding-bottom:4px;border-bottom:0}
.crl-ans{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;min-width:0}
.crl-ans-v{font-size:15px;font-weight:700;color:var(--pv-ink);overflow-wrap:anywhere}
.crl-ans-m{display:inline-flex;flex-wrap:wrap;gap:0 8px;font-size:12px;color:var(--pv-ink-3)}
.crl-how{font-weight:700;color:var(--pv-ink-2)}

/* ── 比較：提出された年収（会社ごとの件数。★2026-10-31 中央値と1件ずつの行は外した ── 残るのは件数と図）── */
.crl-pc{display:flex;flex-direction:column;min-width:0}
.crl-pc > .crl-msg{display:flex;align-items:center;min-height:32px;margin:0;color:var(--pv-ink-3)}
.crl-cmp-c .crl-foot .crl-link > span{word-break:keep-all;overflow-wrap:anywhere}   /* 半分の幅の「REAL PAY で全部見る」：折るのは空白のところだけ（「る」1字を次の行へ落とさない） */
/* ── 畳み（details.crl-more ＞ summary.crl-more-s。比較の「口コミを読む」）── */
.crl-more-s{display:inline-flex;align-items:center;gap:6px;min-height:44px;cursor:pointer;list-style:none;color:var(--pv-accent-ink);font-size:13px;font-weight:700}
.crl-more-s::-webkit-details-marker{display:none}
.crl-more-s .crl-ic{transition:transform .18s var(--pv-ease)}
.crl-more[open] > .crl-more-s .crl-ic{transform:rotate(180deg)}
@media (hover:hover){.crl-more-s:hover{text-decoration:underline;text-underline-offset:3px}}
.crl-more-s:active{opacity:.7}
.crl-more-s:focus-visible{outline:2px solid var(--pv-accent);outline-offset:2px;border-radius:8px}
@media (prefers-reduced-motion:reduce){.crl-more-s .crl-ic{transition:none}}
.crl-def{margin:10px 0 0;font-size:12px;line-height:1.7;color:var(--pv-ink-3)}
/* ── 昇格後の年数ごとの年収の図（比較の「提出された年収」・career-live.js の ydBlock・2026-10-29）──
   y は 0 からの1本の目盛（2つの図で同じ）・横の線は薄く・段の境は点線。点は 10px（会社の色・地の色の輪 2px）、押せる広さは 24px。
   点を指す・押すと（指はタップ）額の札が出る。札は枠の外へ出ない向きに置く（左の2段は左寄せ・右の2段は右寄せ） */
.crl-yd{container-type:inline-size}
.crl-yd-lg{display:flex;flex-wrap:wrap;gap:4px 16px;margin:6px 0 0}
.cr-cmp .crl .crl-yd-lg > .crl-co{align-items:center}
.cr-cmp .crl .crl-yd-lg > .crl-co::before{margin-top:0}
.cr-cmp .crl .crl-yd-lg > .crl-co > .crl-co-n{flex:0 1 auto;width:auto}
.crl-yd-figs{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-top:10px}
@container (min-width:560px){.crl-yd-figs{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 28px}}
.crl-yd-f{margin:0;min-width:0}
.crl-yd-h{margin:0 0 8px;font:700 13px/1.4 Inter,'Noto Sans JP',sans-serif;color:var(--pv-ink)}
.crl-yd-plot{display:grid;grid-template-columns:60px minmax(0,1fr);column-gap:8px}
.crl-yd-y{position:relative;height:168px}
.crl-yd-t{position:absolute;right:0;transform:translateY(50%);font:500 10.5px/1 Inter,'Noto Sans JP',sans-serif;font-variant-numeric:tabular-nums;color:var(--pv-ink-3);white-space:nowrap}
.crl-yd-a{position:relative;height:168px}
.crl-yd-g{position:absolute;left:0;right:0;height:0;border-top:1px solid var(--pv-line-soft)}
.crl-yd-g:first-of-type{border-top-color:var(--pv-line)}
.crl-yd-s{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed var(--pv-line-soft)}
.crl-yd-d{position:absolute;z-index:1;width:24px;height:24px;margin:0 0 -12px -12px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.crl-yd-d::before{content:'';position:absolute;left:7px;top:7px;width:10px;height:10px;border-radius:50%;background:var(--crl-co,var(--pv-ink-3));box-shadow:0 0 0 2px var(--pv-surface);transition:transform .18s var(--pv-ease)}
.crl-yd-d::after{content:attr(data-tip);position:absolute;bottom:26px;left:50%;z-index:2;box-sizing:border-box;width:max-content;max-width:200px;padding:6px 10px;border-radius:8px;background:var(--pv-ink);color:var(--pv-bg);font:600 12px/1.45 Inter,'Noto Sans JP',sans-serif;text-align:left;white-space:normal;box-shadow:0 6px 18px -8px color-mix(in oklab,var(--pv-ink) 60%,transparent);opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,4px);transition:opacity .16s var(--pv-ease),transform .16s var(--pv-ease)}
.crl-yd-d[data-edge="l"]::after{left:0;transform:translate(0,4px)}
.crl-yd-d[data-edge="r"]::after{left:auto;right:0;transform:translate(0,4px)}
.crl-yd-d:is(:hover,:focus)::after{opacity:1;visibility:visible;transform:translate(-50%,0)}
.crl-yd-d[data-edge]:not([data-edge="c"]):is(:hover,:focus)::after{transform:translate(0,0)}
.crl-yd-d:is(:hover,:focus){z-index:3}
.crl-yd-d:hover::before{transform:scale(1.3)}
.crl-yd-d:active::before{transform:scale(.9)}
.crl-yd-d:focus{outline:none}
.crl-yd-d:focus-visible::before{box-shadow:0 0 0 2px var(--pv-surface),0 0 0 4px var(--pv-accent)}
.crl-yd-x{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:8px 0 0 68px;font:500 10.5px/1.3 Inter,'Noto Sans JP',sans-serif;color:var(--pv-ink-3);text-align:center}
.crl-yd-x > span{min-width:0;overflow-wrap:anywhere}
.crl-yd-ax{margin:4px 0 0 68px;font-size:11px;line-height:1.4;color:var(--pv-ink-3);text-align:center}
.crl-yd-tt{margin:0;font:700 14px/1.5 Inter,'Noto Sans JP',sans-serif;color:var(--pv-ink)}
.crl-yd-note{margin:8px 0 0;font-size:12px;line-height:1.7;color:var(--pv-ink-3)}
@media (prefers-reduced-motion:reduce){.crl-yd-d::before,.crl-yd-d::after{transition:none}}
/* ── カード（2026-10-30 オーナー「グラフと表の間がよくわからないからカードみたいな形にしてよ」）── 年収の幅・年数の図・内訳の円（会社ページと比較）と、
   鍵の無い人の影絵のカードの枠。枠・角丸 12px・中の余白・下地はトークン・色味のある薄い2層の影（平らな1枚の影にしない） */
.crl-rg,.crl-yd,.crl-dn,.crl-dn2,.crl-gh-card{box-sizing:border-box;min-width:0;padding:14px 16px;border:1px solid var(--pv-line);border-radius:12px;background:var(--pv-surface);box-shadow:0 1px 2px color-mix(in srgb,var(--pv-accent-ink) 6%,transparent),0 10px 24px -16px color-mix(in srgb,var(--pv-accent-ink) 30%,transparent)}
.crl-cmp > .crl-rg,.crl-cmp > .crl-yd,.crl-cmp > .crl-dn2{margin-top:12px}
/* 1社の図（会社ページ・2026-10-30）── 凡例なし・点は会社の色（島が無い会社ページでは緑）。目盛と段の字は 12px（会社ページの字の下限）。
   帯（25〜75%）は淡い緑の面・中央値は濃い緑の線。名前（25%・中央値・75%）は右の端の列に、額は図の下の1行に */

.crl-yd[data-n="1"] .crl-yd-tt{margin-top:0}
.crl-yd[data-n="1"] .crl-yd-figs{grid-template-columns:minmax(0,1fr);margin-top:8px}
.crl-yd[data-n="1"] .crl-yd-d::before{background:var(--crl-co,var(--pv-accent))}
.crl-yd[data-n="1"] .crl-yd-d::after{max-width:168px}
.crl-yd[data-n="1"] .crl-yd-t,.crl-yd[data-n="1"] .crl-yd-x{font-size:12px}
.crl-yd[data-n="1"] .crl-yd-ax,.crl-yd[data-n="1"] .crl-yd-note{font-size:12px}
/* 目盛の字：ふだんは「〜5年」。狭い1社の図だけ「〜5」にして「（年）」を軸の名前へ（字が語の途中で折れない）。比較（data-n なし）は今のまま。
   字は 12px のまま（会社ページの字は 12px 以上）。幅は右の端の名前（25%・中央値・75%）を外して作る ── 額は上の「年収の幅」のカードと図の下の1行が言っている */
.crl-yd-xs,.crl-yd-axs{display:none}
@container (max-width:460px){
  .crl-yd[data-n="1"] .crl-yd-xl,.crl-yd[data-n="1"] .crl-yd-axl{display:none}
  .crl-yd[data-n="1"] .crl-yd-axs{display:inline}
  /* 短い目盛は段の左の区切りの上に（0・5・10・15・20〜）。段のまん中に「10〜15」を詰めると、狭い幅で字が折れる */
  .crl-yd[data-n="1"] .crl-yd-x > span{text-align:left}
  .crl-yd[data-n="1"] .crl-yd-xs{display:inline-block;transform:translateX(-50%);white-space:nowrap}
  .crl-yd[data-n="1"] .crl-yd-f[data-band] .crl-yd-plot{grid-template-columns:60px minmax(0,1fr)}
  .crl-yd[data-n="1"] .crl-yd-r{display:none}
  .crl-yd[data-n="1"] .crl-yd-f[data-band] .crl-yd-x,.crl-yd[data-n="1"] .crl-yd-f[data-band] .crl-yd-ax{margin-right:0}
}
/* 1社の図の点は会社の色。濃い色の会社（キャセイの深い緑など）がダークの地に沈まないよう、細い輪を足す */
.crl-yd[data-n="1"] .crl-yd-d::before{box-shadow:0 0 0 2px var(--pv-surface),0 0 0 3px color-mix(in srgb,var(--pv-ink) 32%,transparent)}
.crl-yd[data-n="1"] .crl-yd-d:focus-visible::before{box-shadow:0 0 0 2px var(--pv-surface),0 0 0 4px var(--pv-accent)}
.crl-yd-f[data-band] .crl-yd-plot{grid-template-columns:60px minmax(0,1fr) 48px}
.crl-yd-f[data-band] .crl-yd-x,.crl-yd-f[data-band] .crl-yd-ax{margin-right:56px}
.crl-yd-bd{position:absolute;left:0;right:0;background:color-mix(in srgb,var(--pv-accent) 14%,transparent);border-top:1px dashed color-mix(in srgb,var(--pv-accent) 50%,transparent);border-bottom:1px dashed color-mix(in srgb,var(--pv-accent) 50%,transparent)}
.crl-yd-md{position:absolute;left:0;right:0;height:0;border-top:2px solid var(--pv-accent-ink)}
.crl-yd-r{position:relative;height:168px}
.crl-yd-rl{position:absolute;left:0;transform:translateY(50%);font:600 12px/1 Inter,'Noto Sans JP',sans-serif;color:var(--pv-ink-2);white-space:nowrap}
.crl-yd-rl[data-k="med"]{font-weight:800;color:var(--pv-accent-ink)}
.crl-yd-key{margin:8px 0 0;font-size:12px;line-height:1.7;color:var(--pv-ink-2)}
.crl-yd-kv{white-space:nowrap}
.crl-yd-kv b{font-weight:700;font-variant-numeric:tabular-nums;color:var(--pv-ink)}
.crl-yd-kv[data-k="med"] .crl-yd-kk{font-weight:700;color:var(--pv-accent-ink)}

/* ── 会社ページの、給与の鍵の開いた人の図（2026-10-30）── 件数の下・行の上。職位の切り替えは1つ（図とドーナツで同じ職位） */
.crl-pv{container-type:inline-size;display:grid;gap:14px;min-width:0;margin:2px 0 14px}
.crl-pv[hidden]{display:none}
/* 年数の図と内訳の円の器。広い時（PC・iPad）だけ左右に並べる（2026-10-30 オーナー）。片方しか無い時は1列ぜんぶ。
   器が 900px に届かない時（PC の概要のタブ・iPad）は半分ずつ ── 円の側が細いと項目の名前が2行に折れる */
.crl-pv-g{display:grid;gap:14px;min-width:0}
@container (min-width:560px){
  .crl-pv-g{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 24px;align-items:start}
  .crl-pv-g > :only-child{grid-column:1 / -1}
}
@container (min-width:900px){
  .crl-pv-g{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}
}
.crl-pv-pos{display:inline-flex;justify-self:start;gap:2px;padding:3px;border:1px solid var(--pv-line);border-radius:999px;background:var(--pv-surface-soft)}
.crl-pv-pb{appearance:none;-webkit-appearance:none;min-height:44px;padding:0 18px;border:0;border-radius:999px;background:none;color:var(--pv-ink-2);font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:transform .18s var(--pv-ease),opacity .18s var(--pv-ease)}
.crl-pv-pb[aria-pressed="true"]{background:var(--pv-surface);color:var(--pv-ink);box-shadow:0 1px 2px color-mix(in srgb,var(--pv-ink) 8%,transparent),0 6px 14px -8px color-mix(in srgb,var(--pv-ink) 28%,transparent)}
@media (hover:hover){.crl-pv-pb:hover{opacity:.78}}
.crl-pv-pb:active{transform:scale(.97)}
.crl-pv-pb:focus-visible{outline:2px solid var(--pv-accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.crl-pv-pb{transition:none}}

/* ── 月の給与の内訳（ドーナツ）── 色は区分ごとに決まった色（JS の DN_COL ＝ 給与の円と同じ）。下地の輪と字はトークン */
.crl-dn{display:grid;gap:8px;min-width:0}
.crl-dn-h{margin:0;font:700 14px/1.5 Inter,'Noto Sans JP',sans-serif;color:var(--pv-ink)}
.crl-dn-f{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;min-width:0}
.crl-dn-svg{flex:none;display:block;width:112px;height:112px}
.crl-dn-bg{stroke:var(--pv-line-soft)}
.crl-dn-lg{flex:1 1 200px;min-width:0;display:grid;gap:4px;margin:0;padding:0;list-style:none}
.crl-dn-li{display:grid;grid-template-columns:10px minmax(0,1fr) auto auto;align-items:baseline;gap:0 8px;font-size:13px;line-height:1.5;color:var(--pv-ink-2)}
.crl-dn-c{align-self:center;width:10px;height:10px;border-radius:3px}
.crl-dn-n{min-width:0;overflow-wrap:anywhere}
.crl-dn-p{font-weight:700;font-variant-numeric:tabular-nums;text-align:right;color:var(--pv-ink)}
.crl-dn-a{min-width:4.5em;font-size:12px;font-variant-numeric:tabular-nums;text-align:right;color:var(--pv-ink-3)}
.crl-dn > .crl-def{margin:0}

/* ── 比較：会社ごとの年収の幅（25〜75% の箱・中央値の印）と、2社の内訳 ── */

.crl-rg[hidden],.crl-dn2[hidden]{display:none}
.crl-rg-tt{margin:0;font:700 14px/1.5 Inter,'Noto Sans JP',sans-serif;color:var(--pv-ink)}
.crl-rg-p{margin-top:8px}
.crl-rg-h{margin:0 0 2px;font-size:13px;font-weight:700;line-height:1.5;color:var(--pv-ink-2)}
.crl-rg-r{display:grid;gap:4px;min-width:0;padding:6px 0}
.crl-rg-t{position:relative;height:16px;border:1px solid var(--pv-line-soft);border-radius:999px;background:var(--pv-surface-soft)}
.crl-rg-b{position:absolute;top:2px;bottom:2px;border-radius:999px;background:color-mix(in srgb,var(--crl-co,var(--pv-accent)) 40%,transparent)}
.crl-rg-m{position:absolute;top:-4px;bottom:-4px;width:3px;margin-left:-1.5px;border-radius:2px;background:var(--crl-co,var(--pv-accent-ink))}
.crl-rg-r > .crl-yd-key{margin:0}
.crl-dn2{display:grid;gap:10px}
.crl-dn2 > .crl-def{margin:0}
.crl-dn2-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 14px}
.crl-dn2-c{display:grid;gap:8px;align-content:start;min-width:0}
.crl-dn2-c .crl-dn-f{flex-direction:column;align-items:flex-start}
.crl-dn2-c .crl-dn-svg{width:96px;height:96px}
.crl-dn2-c .crl-dn-lg{flex:none;width:100%;max-width:360px}
.crl-dn2-c .crl-dn-li{grid-template-columns:10px minmax(0,1fr) auto}
.crl-dn2-c .crl-dn-a{grid-column:2 / -1;min-width:0;text-align:left}

/* ── 鍵の無い人の影絵（2026-10-30 オーナー「残りはぼかして」）── 要約の欄と給与の図の場所に置く、字も数字も無い決まった形。
   ★ぼかす規則は .crl-plate とこの1つ（.crl .crl-ghost）だけ。ここに足さない・ほかの部品をぼかさない。
   ★形の数と幅・位置はここで固定（答えから作らない ── JS は空の箱を置くだけ）。 */
.crl .crl-ghost{filter:blur(6px);pointer-events:none;user-select:none;-webkit-user-select:none}
.crl-ghost i{display:block;border-radius:999px;background:color-mix(in srgb,var(--pv-ink) 22%,transparent)}
/* lead の枠の中で、1文のすぐ後ろに続く3行。字の行と同じ刻み（15px・行の高さ 1.8 ＝ 27px）で、文が続いて見える */
.crl-ghost-cont{display:grid;gap:1.05em;margin:.5em 0 .25em;font-size:15px}
.crl-ghost-cont > .crl-gh-l{height:.75em;background:color-mix(in srgb,var(--pv-accent) 26%,transparent)}
.crl-ghost-cont > .crl-gh-l:nth-child(2){width:94%}
.crl-ghost-cont > .crl-gh-l:nth-child(3){width:56%}
.crl .crl-sum-lead .crl-ghost-cont{gap:1em;font-size:14px}
/* 気になる点の影絵（2026-10-30 オーナー「悪いところだけぼかしを入れよう」）：列ごとに橙の帯3本。板の後ろ一面に敷く
   （高さは板が決める ── 長い英語の板でも字を切らない）。比較は2列で、上の会社の列と同じ間（24px） */
.crl-ghost-bad{position:absolute;inset:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:16px;padding:2px;overflow:hidden}
.crl[data-live="cmp-summary"] .crl-ghost-bad{column-gap:24px}
/* ★2026-11-01 オーナー「なんで口コミ要約がない方にまでオレンジのぼかし？」：要約の無い会社の列は空（data-empty）。
   狭い画面は1列なので空の列を畳む。広い画面は列の位置を残し、板を要約の在る会社の列の上へ寄せる（data-only） */
.crl-gh-col[data-empty]{display:none}
@supports (container-type:inline-size){
  @container (min-width:560px){
    .crl[data-live="cmp-summary"] .crl-gh-col[data-empty]{display:grid}
    .crl[data-live="cmp-summary"] .crl-sum-gw[data-only="1"]{padding-right:calc(50% + 12px)}
    .crl[data-live="cmp-summary"] .crl-sum-gw[data-only="2"]{padding-left:calc(50% + 12px)}
  }
}
.crl-gh-col{display:grid;gap:8px;align-content:start}
.crl-ghost .crl-gh-b{height:40px;border-left:3px solid color-mix(in srgb,var(--pv-orange) 70%,transparent);border-radius:8px;background:color-mix(in srgb,var(--pv-orange) 16%,transparent)}

.crl-gh-plot{position:relative;min-width:0;height:96px;border-bottom:2px solid color-mix(in srgb,var(--pv-ink) 18%,transparent);border-left:2px solid color-mix(in srgb,var(--pv-ink) 18%,transparent)}
.crl-ghost .crl-gh-d{position:absolute;width:12px;height:12px;margin:0 0 -6px -6px;border-radius:50%;background:var(--crl-co,var(--pv-accent))}
.crl-gh-d:nth-child(1){left:9%;bottom:20%}
.crl-gh-d:nth-child(2){left:13%;bottom:32%}
.crl-gh-d:nth-child(3){left:29%;bottom:38%}
.crl-gh-d:nth-child(4){left:33%;bottom:48%}
.crl-gh-d:nth-child(5){left:50%;bottom:52%}
.crl-gh-d:nth-child(6){left:52%;bottom:64%}
.crl-gh-d:nth-child(7){left:69%;bottom:60%}
.crl-gh-d:nth-child(8){left:73%;bottom:74%}
.crl-gh-d:nth-child(9){left:90%;bottom:80%}
/* 年収の幅の影絵：2本の帯（会社の色の箱と、中央値の印）。円の影絵：内訳の円と同じく区分ごとの色の輪（決まった5色）と、凡例の4本 */
.crl-ghost-prg{display:grid;gap:14px;padding:6px 0}
.crl-ghost .crl-gh-rgt{position:relative;height:14px;border-radius:999px;background:color-mix(in srgb,var(--pv-accent) 10%,var(--pv-surface-soft))}
.crl-gh-rgt::before{content:'';position:absolute;top:2px;bottom:2px;left:46%;width:24%;border-radius:999px;background:color-mix(in srgb,var(--crl-co,var(--pv-accent)) 55%,transparent)}
.crl-gh-rgt + .crl-gh-rgt::before{left:22%;width:16%}
.crl-gh-rgt::after{content:'';position:absolute;top:-3px;bottom:-3px;left:57%;width:3px;border-radius:2px;background:var(--crl-co,var(--pv-accent-ink))}
.crl-gh-rgt + .crl-gh-rgt::after{left:30%}
.crl-ghost-pdn{display:grid;justify-items:center;gap:6px}
.crl-ghost .crl-gh-dn{position:relative;width:72px;height:72px;margin-bottom:4px;border-radius:50%;background:conic-gradient(var(--pv-accent) 0 46%,var(--pv-gold) 0 66%,var(--pv-blue) 0 80%,var(--pv-orange) 0 91%,var(--pv-teal) 0 100%)}
.crl-gh-dn::after{content:'';position:absolute;inset:16px;border-radius:50%;background:var(--pv-surface)}
.crl-ghost .crl-gh-lg{width:100%;height:8px;background:color-mix(in srgb,var(--pv-accent) 45%,transparent)}
.crl-ghost .crl-gh-lg:nth-child(3){background:color-mix(in srgb,var(--pv-gold) 55%,transparent)}
.crl-ghost .crl-gh-lg:nth-child(4){width:84%;background:color-mix(in srgb,var(--pv-blue) 45%,transparent)}
.crl-ghost .crl-gh-lg:nth-child(5){width:70%;background:color-mix(in srgb,var(--pv-orange) 45%,transparent)}
/* 給与の影絵の3枚のカード：年収の幅を上に、年数の図と円を横に（狭い箱でも横 ── 鍵の無い人の欄を縦に長くしすぎない） */
.crl-pv-lk{display:grid;gap:10px;min-width:0}
.crl-pv-lk > .crl-pv-g{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:10px}
.crl-pv-lk .crl-gh-card{padding:12px 14px}
.crl-pv-lk + .crl-lock{margin-top:10px}
.crl[data-live="cmp-pay"] > .crl-pv-lk{margin-top:10px}
/* 要約の欄：まとめの先頭の字（＋ぼかした続き）→ 良い点（字）→ 気になる点（見出しは字・中身は影絵と板）。旧：まとめの最初の1文（字）→ 影絵 → 影絵の上の板（錠前の1行と入口）。板は影絵の上に重ねるだけ（影絵の中に入れない ＝ ぼかさない） */
.crl-sum-lk{flex:1 1 100%;display:grid;gap:12px;min-width:0}
.crl .crl-sum-lk > .crl-sum-ovb{margin:0}
.crl-sum-gw{position:relative;display:flex;min-width:0;min-height:136px}
.crl-board{position:relative;flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-width:0;padding:8px}
/* 会社ページ：開いた要約と同じ2列（良い点｜気になる点）。良い点が無ければ気になる点の列が全幅（auto-fit） */
.crl[data-live="summary"] .crl-sum-lk > .crl-sum{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.crl[data-live="summary"] .crl-sum-lk > .crl-sum-by{margin-top:0}
.crl-board-in{display:grid;justify-items:center;gap:6px;max-width:100%;padding:12px 16px;border:1px solid var(--pv-line);border-radius:12px;background:var(--pv-surface);text-align:center;box-shadow:0 1px 2px color-mix(in srgb,var(--pv-ink) 6%,transparent),0 12px 30px -14px color-mix(in srgb,var(--pv-ink) 32%,transparent)}
.crl-board-in > .crl-lock{min-height:32px;padding:0;border:0;background:none}
.crl-board-in > .crl-foot{justify-content:center;margin:0;gap:4px 16px}
.crl-sum-leads{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.crl-sum-lead{display:grid;gap:12px;align-content:start;min-width:0;padding:14px;border:1px solid var(--pv-line);border-radius:var(--pv-r);background:var(--pv-surface-2)}
.crl-sum-lead > .crl-co{padding:0 0 10px;border-bottom:1px solid var(--pv-line-soft);font-size:14px;color:var(--pv-ink)}
/* 比較の鍵の無い形の良い点と「気になる点」の見出しは、開いた比較のマスと同じ形（＋ と ！ の丸） */
.crl[data-live="cmp-summary"] .crl-sum-lk .crl-sum-col{display:grid;gap:6px;min-width:0}
.crl[data-live="cmp-summary"] .crl-sum-lk .crl-sum-h{gap:8px;margin:0;font-size:13px}
.crl[data-live="cmp-summary"] .crl-sum-lk .crl-sum-h::before{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--pv-accent-soft);color:var(--pv-accent-ink);font:800 13px/1 Inter,sans-serif;content:'＋'}
.crl[data-live="cmp-summary"] .crl-sum-lk .crl-sum-col[data-kind="concern"] .crl-sum-h::before{background:var(--pv-orange-soft);color:var(--pv-orange-ink);content:'！'}
.crl[data-live="cmp-summary"] .crl-sum-lk .crl-sum-li{min-height:0;padding:6px 0}
.crl .crl-sum-lead .crl-sum-ovb{margin:0;padding:10px 12px 12px;background:var(--pv-surface)}
.crl .crl-sum-lead .crl-sum-ov{font-size:14px;line-height:1.75}
@supports (container-type:inline-size){
  @container (min-width:560px){
    .crl-sum-leads{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 24px}
    .crl-sum-lead[data-col="1"]{grid-column:1}
    .crl-sum-lead[data-col="2"]{grid-column:2}
  }
}
/* 1件ずつの数字は畳む（押すと開く ── 2026-10-29 オーナー「給与の詳細（提出した）数字は押したら出てくる形にして」） */
.crl-pay-fold{margin-top:12px}
.crl-pay-fold-s{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;padding:0 16px;border:1px solid var(--pv-line);border-radius:var(--pv-r-sm);background:var(--pv-surface-2);color:var(--pv-accent-ink);font:700 14px/1.35 Inter,'Noto Sans JP',sans-serif;list-style:none;cursor:pointer;transition:transform .18s var(--pv-ease)}
.crl-pay-fold-s::-webkit-details-marker{display:none}
.crl-pay-fold-s .crl-ic{flex:none;transition:transform .18s var(--pv-ease)}
.crl-pay-fold[open] > .crl-pay-fold-s .crl-ic{transform:rotate(180deg)}
@media (hover:hover){.crl-pay-fold-s:hover{border-color:var(--pv-accent-line);background:var(--pv-accent-soft)}}
.crl-pay-fold-s:active{transform:scale(.99)}
.crl-pay-fold-s:focus-visible{outline:2px solid var(--pv-accent);outline-offset:2px}
.crl-pay-fold[open] > .crl-pay-fold-s{margin-bottom:4px}
@media (prefers-reduced-motion:reduce){.crl-pay-fold-s,.crl-pay-fold-s .crl-ic{transition:none}}