@charset "utf-8";
/* ============================================================
   転職ボイス 下層ページの見た目（⑪c 2026-09-15）
   tenshoku-voice/assets/lower.css   inc/04-lower.php が DB型ページ（トップ以外）で db.css の後に読む
   ------------------------------------------------------------
   比較表   ＝ B案 転職会議型（.tvl-list）＋ D案 ITreview型の位置の図（.tvl-chart）
   声のページ＝ A案 OpenWork型（.tvl-page）＋ B案の状況・気持ちのタイル（.tvl-tiles）＋ E案の前向き／不満・不安の箱（.tvl-pc）
   見本は 11b_下層5パターン_20260915/tools/mock/{b_jt,d_itr,a_ow,e_mb}.py の CSS（jt- / it- / ow- / mb-）を tvl- に移した
   ・白ベース＋黄 #FFD100・赤 #CD001A・青 #0057B7・緑 #027223 の4色は 印・順位・棒・選んだタイル だけ。リンクは青
   ・細い枠線でなく面と影（0 0 0 1px #E6E6E6）／角丸4〜5px（手本の実測）／数字は Jost／ダークモード無し
   ・部品のセレクタは .tvdb .tvl-xxx（0,2,0）で書く。a の色は .tvdb-wrap .tvdb a（0,2,1）が持つので、色を変える a は .tvdb-wrap .tvdb .tvl-xxx も並べる
   ・絞り込み・並べ替えは器の db.js（data-tvdb-chip の aria-pressed／data-tvdb-sort の is-on）。見た目だけここで持つ
   ============================================================ */

.tvdb .tvl{--y:#FFD100;--r:#CD001A;--b:#0057B7;--g:#027223;--k:#111111;--g1:#F5F5F5;--g2:#F7F7F7;--mid:#666666;--shd:0 0 0 1px #E9E9E9,0 2px 6px rgba(0,0,0,.04);--en:"Jost","Noto Sans JP",sans-serif;display:block;font-size:14px;line-height:1.7;color:#111}
.tvdb .tvl *,.tvdb .tvl *::before,.tvdb .tvl *::after{box-sizing:border-box}
.tvdb .tvl h1,.tvdb .tvl h2,.tvdb .tvl h3,.tvdb .tvl p,.tvdb .tvl dl,.tvdb .tvl dd{margin:0}
.tvdb .tvl img{max-width:100%;display:block}
.tvdb .tvl button{font:inherit;cursor:pointer}
.tvdb .tvl-lnk,.tvdb-wrap .tvdb .tvl-lnk{color:var(--b);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:rgba(0,87,183,.35);transition:text-decoration-color .15s}
.tvdb .tvl-lnk:hover,.tvdb-wrap .tvdb .tvl-lnk:hover{text-decoration-color:currentColor}
.tvdb .tvl-h2{font-size:17px;font-weight:700;color:#111;margin:0 0 10px;line-height:1.4}
.tvdb .tvl-h2 small{font-size:12px;font-weight:500;color:#666;margin-left:8px}
/* パンくず：比較表は灰色の帯（全幅の面は負の margin でなく影と clip-path）。声のページは帯なし。リンクは青 */
.tvdb .tvl-crumbw{background:#F5F5F5;box-shadow:0 0 0 100vmax #F5F5F5;clip-path:inset(0 -100vmax);margin:-8px 0 20px}
.tvdb .tvl-crumbw .tvdb-crumb,.tvdb .tvl-crumb .tvdb-crumb{padding:9px 0}
.tvdb .tvl-crumbw .tvdb-crumb a,.tvdb .tvl-crumb .tvdb-crumb a{color:var(--b)}
.tvdb .tvl-crumb .tvdb-crumb{margin:0 0 6px}

/* ── 比較表（B案）：左に検索の箱・右に本文 ── */
.tvdb .tvl-cols{display:grid;grid-template-columns:280px minmax(0,1fr);gap:0 32px;align-items:start}
.tvdb .tvl-st{font-size:16px;font-weight:700;margin:28px 0 12px;color:#111}
.tvdb .tvl-side .tvl-st:first-child{margin-top:4px}
.tvdb .tvl-sf{background:#fff;border-radius:5px;box-shadow:var(--shd);padding:16px;display:grid;gap:14px}
.tvdb .tvl-sf label{display:grid;gap:4px;font-size:12px;font-weight:700}
.tvdb .tvl-sf select,.tvdb .tvl-sf input[type=search]{height:38px;border:0;border-radius:4px;background:#F5F5F5;padding:0 10px;font-size:16px;font-weight:500;width:100%;color:#111;-webkit-appearance:none;appearance:none;box-shadow:none}
.tvdb .tvl-sf select{padding-right:30px;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111111' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.tvdb .tvl-sf input[type=search]::placeholder{color:#888;opacity:1}
.tvdb .tvl-sf select:focus,.tvdb .tvl-sf input[type=search]:focus{outline:3px solid rgba(0,87,183,.35);outline-offset:2px}
.tvdb .tvl-ck{display:flex!important;align-items:center;gap:8px;font-weight:500!important;font-size:13px!important;cursor:pointer}
.tvdb .tvl-ck input{width:16px;height:16px;margin:0;accent-color:#111}
.tvdb .tvl-sf button{height:48px;border:0;border-radius:5px;background:#111;color:#fff;font-weight:700;font-size:15px;transition:background .15s}
.tvdb .tvl-sf button:hover{background:#333}
.tvdb .tvl-grp{margin:0 0 10px}
.tvdb .tvl-grp p{background:#F5F5F5;font-size:13px;font-weight:700;padding:7px 12px;border-radius:4px}
.tvdb .tvl-grp ul{padding:6px 12px;display:grid;gap:2px}
.tvdb .tvl-grp a,.tvdb-wrap .tvdb .tvl-grp a{font-size:13px;color:#333;text-decoration:none}
.tvdb .tvl-grp a:hover,.tvdb-wrap .tvdb .tvl-grp a:hover{color:var(--b);text-decoration:underline}
.tvdb .tvl-list .tvl-h1{font-size:20px;font-weight:700;margin:2px 0 14px;color:#111;line-height:1.45}

/* D案の位置の図：市松の面の格子・中央に薄い赤の十字・白い札に線画と赤い順位の丸 */
.tvdb .tvl-chart{margin:0 0 22px}
.tvdb .tvl-gridw{position:relative;padding:24px 0 22px 30px}
.tvdb .tvl-grid{position:relative;height:400px;border-radius:5px;background:linear-gradient(90deg,rgba(0,0,0,.035) 50%,transparent 50%) 0 0/20% 100%,linear-gradient(rgba(0,0,0,.035) 50%,transparent 50%) 0 0/100% 25%,#fff;box-shadow:0 0 0 3px #111}
.tvdb .tvl-grid::before,.tvdb .tvl-grid::after{content:"";position:absolute;background:rgba(205,0,26,.35)}
.tvdb .tvl-grid::before{left:50%;top:0;bottom:0;width:3px;transform:translateX(-50%)}
.tvdb .tvl-grid::after{top:50%;left:0;right:0;height:3px;transform:translateY(-50%)}
.tvdb .tvl-pin,.tvdb-wrap .tvdb .tvl-pin{position:absolute;z-index:1;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:5px;background:#fff;box-shadow:0 0 0 2px #111,0 3px 6px rgba(0,0,0,.12);display:grid;place-items:center;transition:transform .2s;text-decoration:none}
.tvdb .tvl-pin:hover,.tvdb-wrap .tvdb .tvl-pin:hover{transform:translate(-50%,-50%) scale(1.15);z-index:3;text-decoration:none}
.tvdb .tvl-pin i{position:absolute;top:-9px;right:-9px;min-width:18px;height:18px;border-radius:9px;background:var(--r);color:#fff;font-style:normal;font-size:10px;font-weight:700;font-family:var(--en);display:grid;place-items:center;padding:0 3px;line-height:1}
.tvdb .tvl-ax-y{position:absolute;left:0;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;font-weight:700;font-size:13px}
.tvdb .tvl-ax-x{text-align:center;font-weight:700;font-size:13px;margin:12px 0 0}
.tvdb .tvl-gn{font-size:12px;color:#666;margin:2px 0 8px 30px}
.tvdb .tvl-leg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 14px;margin:0 0 0 30px;font-size:12.5px}
.tvdb .tvl-leg li{display:flex;gap:6px;align-items:flex-start;min-width:0;line-height:1.5}
.tvdb .tvl-leg i{margin-top:2px}
.tvdb .tvl-leg i{flex:none;font-style:normal;min-width:18px;height:18px;border-radius:9px;background:var(--r);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;font-family:var(--en);line-height:1;padding:0 3px}
.tvdb .tvl-leg a{color:var(--b)}

/* 並べ替えの帯（薄い緑の面・選ぶと緑の下線）＋「該当件数」は赤で大きく（db.js が数え直す） */
.tvdb .tvl-sort{display:flex;justify-content:space-between;align-items:center;background:#EFF6F0;border-radius:4px 4px 0 0;padding:0 16px;box-shadow:inset 0 -3px 0 #D9EBDC}
.tvdb .tvl-sort__bs{display:flex;flex-wrap:wrap}
.tvdb .tvl-sort__b,.tvdb-wrap .tvdb .tvl-sort__b{font-size:13px;font-weight:700;color:#555;padding:12px 16px 11px;text-decoration:none}
.tvdb .tvl-sort__b:hover,.tvdb-wrap .tvdb .tvl-sort__b:hover{color:var(--g);text-decoration:none}
.tvdb .tvl-sort__b.is-on,.tvdb-wrap .tvdb .tvl-sort__b.is-on{color:var(--g);box-shadow:inset 0 -3px 0 var(--g)}
.tvdb .tvl-sort__n{font-size:14px;font-weight:700;white-space:nowrap}
.tvdb .tvl-sort__n b{font-family:var(--en);font-size:22px;color:var(--r);margin:0 2px}
.tvdb .tvl-pgr{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin:14px 0 6px;font-size:13px}
.tvdb .tvl-pgr b{font-family:var(--en);font-size:20px}
.tvdb .tvl-pgr span{color:#666}

/* 1テーマ1枚の行（器の .tvdb-card の上に載せる） */
.tvdb .tvl-lw .tvdb-cards{gap:10px}
.tvdb .tvl-it{background:#fff;border-radius:5px;box-shadow:var(--shd);padding:16px 18px;transition:box-shadow .2s;color:#3A3F44;scroll-margin-top:84px}
.tvdb .tvl-it:hover{transform:none;box-shadow:0 0 0 1px #E0E0E0,0 6px 16px rgba(0,0,0,.07)}
.tvdb .tvl-it__h{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.tvdb .tvl-rk{width:auto;height:auto;min-width:0;flex:none;font-size:11px;font-weight:700;color:#fff;background:#8A8F94;border-radius:3px;padding:2px 6px;font-family:var(--en);line-height:1.4}
.tvdb .tvl-rk::after{content:"位"}
.tvdb .tvl-rk.tvdb-rank--n1{background:var(--y);color:#111}
.tvdb .tvl-rk.tvdb-rank--n2{background:#B9BEC5;color:#111}
.tvdb .tvl-rk.tvdb-rank--n3{background:#C98B4E;color:#fff}
.tvdb .tvl-it__nm,.tvdb-wrap .tvdb .tvl-it__nm{font-size:19px;font-weight:700;color:var(--b);line-height:1.4;text-decoration:none}
.tvdb .tvl-it__nm:hover,.tvdb-wrap .tvdb .tvl-it__nm:hover{text-decoration:underline;text-underline-offset:4px}
.tvdb .tvl-it__b{display:grid;grid-template-columns:130px minmax(0,1fr);gap:16px}
.tvdb .tvl-it__ic,.tvdb-wrap .tvdb .tvl-it__ic{display:grid;place-items:center;height:104px;border-radius:5px;background:#F7F7F7}
.tvdb .tvl-it__sc{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:13px}
.tvdb .tvl-sc__g{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.tvdb .tvl-l{font-size:12px;color:#666;margin-left:6px}
.tvdb .tvl-l:first-child{margin-left:0}
.tvdb .tvl-scb{width:84px;display:inline-block;vertical-align:middle;flex:none}
.tvdb .tvl-n{font-family:var(--en);font-size:21px;color:#B48A00;font-weight:700}
.tvdb .tvl-m{font-family:var(--en);font-size:18px;color:var(--b);font-weight:700}
.tvdb .tvl-u{font-size:12px;color:#666}
.tvdb .tvl-it__sub{font-size:12px;color:#666;margin:2px 0 6px}
.tvdb .tvl-it__new{font-size:13px;line-height:1.8;color:#3A3F44}
.tvdb .tvl-it__new>b{color:var(--r);margin-right:4px}
.tvdb .tvl-it__tags{display:flex;flex-wrap:wrap;gap:4px 6px;margin:8px 0 0;font-size:11px}
.tvdb .tvl-it__tags span{background:#F5F5F5;color:#555;border-radius:3px;padding:1px 6px}
.tvdb .tvl-it__tags em{font-style:normal;color:#333;margin-right:6px}
.tvdb .tvl-note{font-size:12px;color:#666;margin:10px 0 0}
.tvdb .tvl-main .tvdb-sec{margin-top:26px}

/* ── 声のページ（A案） ── */
.tvdb .tvl-page{font-size:14px}
.tvdb .tvl-hd{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:24px;align-items:center;margin:0 0 22px}
.tvdb .tvl-badge{display:inline-block;background:#111;color:#fff;font-size:12px;font-weight:700;border-radius:99px;padding:3px 12px;margin:0 0 8px}
.tvdb .tvl-page .tvl-h1{font-size:24px;font-weight:700;line-height:1.4;color:#111}
.tvdb .tvl-hd__n{display:flex;align-items:baseline;gap:14px;margin:8px 0 10px;flex-wrap:wrap}
.tvdb .tvl-hd__n .big{font-size:32px;color:var(--b)}
.tvdb .tvl-hd__n>span:not(.big){font-size:13px;color:#333}
.tvdb .tvl-hd__n b{font-family:var(--en);font-size:17px}
.tvdb .tvl-hd__d{font-size:13px;color:#333;line-height:1.8}
.tvdb .tvl-hd__ic{display:grid;place-items:center;height:150px;border-radius:4px;background:#F7F7F7}
/* 大きい箱のタブ（選ぶと黒） */
.tvdb .tvl-tb{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;margin:0 0 26px}   /* ⑯ 2026-09-16 藤井さん「タブの間に入っている黒い線は不要」＝下端の inset 2px の黒い線（タブの隙間からだけ見えていた）を外した */
.tvdb .tvl-tb a,.tvdb-wrap .tvdb .tvl-tb a{display:grid;place-items:center;text-align:center;background:#F5F5F5;color:var(--b);font-size:15px;padding:13px 6px;border-radius:4px 4px 0 0;line-height:1.3;text-decoration:none;transition:background .15s}
.tvdb .tvl-tb a small{display:block;font-size:12px;font-family:var(--en);font-weight:600}
.tvdb .tvl-tb a:hover,.tvdb-wrap .tvdb .tvl-tb a:hover{background:#EEF4FC;text-decoration:none}
.tvdb .tvl-tb a.is-on,.tvdb-wrap .tvdb .tvl-tb a.is-on,.tvdb .tvl-tb a.is-on:hover,.tvdb-wrap .tvdb .tvl-tb a.is-on:hover{background:#111;color:#fff;font-weight:700}
.tvdb .tvl-cols2{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:0 22px;align-items:start}
.tvdb .tvl-mn{min-width:0}
.tvdb .tvl-page .tvl-h2{font-size:19px;font-weight:700;margin:0 0 12px;scroll-margin-top:84px}
.tvdb .tvl-page .tvl-h2 small{font-size:13px;font-weight:500;color:#333;margin-left:8px}
/* 声の気持ちの内訳＝レーダー＋大きい数字・順位の札・区切りのある棒 */
.tvdb .tvl-score{display:grid;grid-template-columns:300px minmax(0,1fr);gap:0 20px;align-items:center;background:#fff;border-radius:4px;box-shadow:0 0 0 1px #E6E6E6;padding:18px 20px 0;margin:0 0 18px}
.tvdb .tvl-score__l{display:grid;place-items:center}
.tvdb .tvl-score__l .radar{width:280px;height:280px;max-width:100%}
.tvdb .tvl-score__big{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tvdb .tvl-score__big .big{font-size:34px}
.tvdb .tvl-top{background:var(--b);color:#fff;font-size:13px;font-weight:700;border-radius:99px;padding:3px 12px;white-space:nowrap}
.tvdb .tvl-score__s{font-size:13px;color:#666;margin:2px 0 12px}
.tvdb .tvl-sb{margin:0 0 12px}
.tvdb .tvl-sb p{display:flex;justify-content:space-between;gap:8px;font-size:13px;margin:0 0 4px}
.tvdb .tvl-sb b{font-family:var(--en);font-size:17px;white-space:nowrap}
.tvdb .tvl-sb small{font-size:12px;color:#666}
.tvdb .tvl .bar.seg{background:#E6EEF8;border-radius:2px}
.tvdb .tvl .bar.seg .bar-in{border-radius:2px;-webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(10% - 2px),transparent calc(10% - 2px) 10%);mask:repeating-linear-gradient(90deg,#000 0 calc(10% - 2px),transparent calc(10% - 2px) 10%)}
.tvdb .tvl-score__btn{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px}
.tvdb .tvl-score__btn a,.tvdb-wrap .tvdb .tvl-score__btn a{flex:1 1 auto;text-align:center;font-size:13px;color:var(--b);background:#fff;border-radius:4px;padding:7px 10px;box-shadow:0 0 0 1px #CFDDF0;text-decoration:none;transition:background .15s}
.tvdb .tvl-score__btn a:hover,.tvdb-wrap .tvdb .tvl-score__btn a:hover{background:#EEF4FC;text-decoration:none}
.tvdb .tvl-act{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 -20px;background:#F7F7F7;border-radius:0 0 4px 4px}
.tvdb .tvl-act a,.tvdb-wrap .tvdb .tvl-act a{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--b);font-size:14px;padding:13px 6px;text-decoration:none;transition:background .15s}
.tvdb .tvl-act a+a{box-shadow:-1px 0 0 #E4E4E4}
.tvdb .tvl-act a:hover,.tvdb-wrap .tvdb .tvl-act a:hover{background:#EEF4FC;text-decoration:none}
/* 答えを先に出す灰色の箱 */
.tvdb .tvl-ans{background:#F5F5F5;border-radius:4px;padding:16px 20px;margin:0 0 20px;font-size:15px;line-height:1.9}
/* E案の2つの箱（緑と赤の見出しの面・要約をそのまま） */
.tvdb .tvl-pc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 26px}
.tvdb .tvl-pc>div{border-radius:6px;overflow:hidden;background:#fff}
.tvdb .tvl-pc p{display:flex;align-items:center;gap:6px;font-weight:700;padding:8px 12px;font-size:14px}
.tvdb .tvl-good{box-shadow:0 0 0 2px #CFE6D4}
.tvdb .tvl-good p{background:#EAF5EC;color:var(--g)}
.tvdb .tvl-bad{box-shadow:0 0 0 2px #EFC7CC}
.tvdb .tvl-bad p{background:#FBEAEC;color:var(--r)}
.tvdb .tvl-pc ul{padding:10px 14px 12px 30px;font-size:13px;line-height:1.75}
.tvdb .tvl-pc li{list-style:disc;margin:0 0 6px}
.tvdb .tvl-pc li::marker{color:#999}
/* いちばん多い組み合わせ（灰色の箱・区切りのある棒） */
.tvdb .tvl-cmbs{display:grid;gap:10px;margin:0 0 26px}
.tvdb .tvl-cmb{background:#F7F7F7;border-radius:4px;padding:14px 16px}
.tvdb .tvl-cmb__t{font-weight:700;font-size:14px;margin:0 0 8px}
.tvdb .tvl-cmb__t small{display:block;font-weight:500;font-size:12px;color:#666}
.tvdb .tvl-cmb li{display:grid;grid-template-columns:minmax(0,1fr) 160px 56px 36px;gap:8px;align-items:center;font-size:13px;margin:6px 0 0}
.tvdb .tvl-cmb b{font-family:var(--en)}
.tvdb .tvl-cmb i{font-style:normal;color:#666;font-family:var(--en)}
/* 読者投票（白い箱＋青い枠のボタン） */
.tvdb .tvl-page .tv-vote{margin:0 0 30px;border-radius:4px}
.tvdb .tvl-page .tv-vote__opt{box-shadow:0 0 0 1px #CFDDF0;color:var(--b)}
.tvdb .tvl-page .tv-vote__opt:hover:not(:disabled){background:#EEF4FC;color:var(--b);transform:none}
.tvdb .tvl-page .tv-vote__peek{box-shadow:0 0 0 1px #CFDDF0;color:var(--b)}
.tvdb .tvl-page .tv-vote__peek:hover{background:#EEF4FC;color:var(--b)}
.tvdb .tvl-page .tv-vote.is-open .tv-vote__opt.is-mine{outline-color:var(--b)}
/* 集めた声：並び順の文字タブ＋件数 */
.tvdb .tvl-vbar{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#F5F5F5;border-radius:4px 4px 0 0;padding:8px 14px;flex-wrap:wrap}
.tvdb .tvl-vsort{font-size:13px;display:flex;flex-wrap:wrap;align-items:center;gap:2px}
.tvdb .tvl-vsort__b,.tvdb-wrap .tvdb .tvl-vsort__b{color:var(--b);font-size:13px;padding:4px 8px;text-decoration:none;border-radius:4px}
.tvdb .tvl-vsort__b:hover,.tvdb-wrap .tvdb .tvl-vsort__b:hover{background:#fff;text-decoration:none}
.tvdb .tvl-vsort__b.is-on,.tvdb-wrap .tvdb .tvl-vsort__b.is-on{color:#111;font-weight:700}
.tvdb .tvl-vcnt{font-size:13px}
.tvdb .tvl-vcnt b{font-family:var(--en);font-size:17px}
/* B案の状況・気持ちのタイル（件数つき・選ぶと緑の面）＋年代のチップ＋職種・業界の選択 */
.tvdb .tvl-filters{background:#F7F7F7;padding:10px 14px 12px;display:grid;gap:10px;scroll-margin-top:84px}
.tvdb .tvl-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;background:#F5F5F5;border-radius:5px;padding:6px}
.tvdb .tvl-tile{position:relative;display:grid;text-align:left;gap:0;border:0;background:#fff;border-radius:4px;padding:10px 26px 10px 12px;transition:background .2s;color:#111;box-shadow:none;line-height:1.4;min-width:0}
.tvdb .tvl-tile::after{content:"›";position:absolute;right:10px;top:50%;transform:translateY(-55%);font-size:20px;color:#666}
.tvdb .tvl-tile b{font-size:13px;color:#111}
.tvdb .tvl-tile i{font-style:normal;font-size:12px;font-family:var(--en);color:var(--g);font-weight:700}
.tvdb .tvl-tile:hover{background:#F3FAF4}
.tvdb .tvl-tile[aria-pressed="true"]{background:#E3F2E6;box-shadow:inset 0 0 0 2px var(--g)}
.tvdb .tvl-tile[aria-pressed="true"] b{color:var(--g)}
.tvdb .tvl-fl{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:12px;font-weight:700}
.tvdb .tvl-fl__l{margin-right:2px}
.tvdb .tvl-fc{border:0;background:#fff;box-shadow:0 0 0 1px #CFDDF0;border-radius:4px;padding:6px 10px;font-size:13px;color:var(--b);line-height:1.4;transition:background .15s}
.tvdb .tvl-fc i{font-style:normal;font-family:var(--en);color:#666;font-size:11px;margin-left:4px}
.tvdb .tvl-fc:hover{background:#EEF4FC}
.tvdb .tvl-fc[aria-pressed="true"],.tvdb .tvl-fc[aria-pressed="true"]:hover{background:#111;color:#fff;box-shadow:none}
.tvdb .tvl-fc[aria-pressed="true"] i{color:#ddd}
.tvdb .tvl-fl__s{display:inline-flex;align-items:center;gap:6px;margin-left:10px}
.tvdb .tvl-fl__s select{height:34px;border:0;border-radius:4px;background:#fff;box-shadow:0 0 0 1px #DDD;padding:0 28px 0 8px;font-size:16px;font-weight:500;color:#111;max-width:220px;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111111' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}
/* A案の声（1行おきに薄い灰色。絞ったあとも見えている行だけで交互になる） */
.tvdb .tvl-voices .tvdb-cards{gap:0}
.tvdb .tvl-voices .tvdb-card{box-shadow:none;border-radius:0;padding:16px;background:#fff;transition:none;scroll-margin-top:84px}
.tvdb .tvl-voices .tvdb-card:hover{transform:none;box-shadow:none}
.tvdb .tvl-voices .tvdb-cards>.tvdb-card:nth-child(even){background:#F7F7F7}
.tvdb .tvl-voices .tvdb-cards>.tvdb-card:nth-child(odd of :not([hidden])){background:#fff}
.tvdb .tvl-voices .tvdb-cards>.tvdb-card:nth-child(even of :not([hidden])){background:#F7F7F7}
.tvdb .tvl-v__at{display:flex;flex-wrap:wrap;gap:0;font-size:12px;color:#666}
.tvdb .tvl-v__at span+span:not(.tvl-v__k)::before{content:"、"}
.tvdb .tvl-v__k{margin-left:auto;color:#333;padding-left:10px}
.tvdb .tvl-v__sum{font-size:15.5px;line-height:1.85;margin:6px 0 8px;color:#111}
.tvdb .tvl-v__ft{display:flex;align-items:center;gap:14px;font-size:12px;color:#666;flex-wrap:wrap}
.tvdb .tvl-v__ft time{font-family:var(--en)}
.tvdb .tvl-v__ft .tvl-lnk{margin-left:auto;font-size:13px;font-weight:700}
.tvdb .tvl-voices .tvdb-det--more{margin:14px 0 0;text-align:center}
.tvdb .tvl-voices .tvdb-det--more>summary{display:inline-block;background:#fff;color:var(--b);font-weight:700;border-radius:4px;padding:10px 28px;box-shadow:0 0 0 1px #CFDDF0;font-size:14px;text-align:center}
.tvdb .tvl-voices .tvdb-det--more>summary:hover{background:#EEF4FC}
.tvdb .tvl-voices .tvdb-det--more>.tvdb-det__in{padding:12px 0 0;text-align:left}
.tvdb .tvl-voices .tvdb-empty{margin:10px 0}
/* 右の段 */
.tvdb .tvl-side2{display:grid;gap:12px}
.tvdb .tvl-btn-k,.tvdb-wrap .tvdb .tvl-btn-k{display:block;text-align:center;border-radius:4px;padding:12px;font-weight:700;font-size:14px;background:#111;color:#fff;text-decoration:none;transition:background .15s}
.tvdb .tvl-btn-k:hover,.tvdb-wrap .tvdb .tvl-btn-k:hover{background:#333;color:#fff;text-decoration:none}
.tvdb .tvl-btn-o,.tvdb-wrap .tvdb .tvl-btn-o{display:block;text-align:center;border-radius:4px;padding:12px;font-weight:700;font-size:14px;background:#fff;color:var(--b);box-shadow:0 0 0 1px #CFDDF0;text-decoration:none;transition:background .15s}
.tvdb .tvl-btn-o:hover,.tvdb-wrap .tvdb .tvl-btn-o:hover{background:#EEF4FC;text-decoration:none}
.tvdb .tvl-info,.tvdb .tvl-near{background:#fff;border-radius:4px;box-shadow:0 0 0 1px #E6E6E6;padding:14px}
.tvdb .tvl-info h2,.tvdb .tvl-near h2{font-size:14px;font-weight:700;margin:0 0 8px}
.tvdb .tvl-info dl div{display:grid;grid-template-columns:100px minmax(0,1fr);font-size:13px}
.tvdb .tvl-info dt{background:#F7F7F7;color:#666;padding:7px 8px}
.tvdb .tvl-info dd{padding:7px 10px}
.tvdb .tvl-info dl div:nth-child(even) dt{background:#F5F5F5}
.tvdb .tvl-near li a,.tvdb-wrap .tvdb .tvl-near li a{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:8px;align-items:center;padding:7px 0;font-size:13px;color:#111;text-decoration:none}
.tvdb .tvl-near b{font-family:var(--en);font-size:13px;color:#111}
.tvdb .tvl-near__all{display:inline-block;font-size:13px;margin:6px 0 0}
/* 器の章（分けて数えた結果・職種の移り先・FAQ・関連）が段の中に入るときは、比べる表を段の幅に収める（1,280px へ広げる負の margin を外す）。6マスの格子は3列 */
.tvdb .tvl-mn .tvdb-own--wide,.tvdb .tvl-main .tvdb-own--wide{width:auto;margin-left:0;margin-right:0}
@media (min-width:681px){ .tvdb .tvl-mn .tvdb-tbl.tvdb-cmp,.tvdb .tvl-main .tvdb-tbl.tvdb-cmp{min-width:600px} }   /* 680px 以下は器がカードにするので当てない */
.tvdb .tvl-mn .tvdb-sec,.tvdb .tvl-main .tvdb-sec{scroll-margin-top:84px}
.tvdb .tvl-mn .tvdb-stats__bars{grid-template-columns:minmax(0,1fr)}
.tvdb .tvl-mn .tvdb-fig--stats{grid-template-columns:repeat(3,1fr)}
.tvdb .tvl-mn .tvdb-fig--stats dt{white-space:normal}

/* ── スマホ ── */
@media (max-width:900px){
  .tvdb .tvl-cols,.tvdb .tvl-cols2{grid-template-columns:minmax(0,1fr)}
  .tvdb .tvl-side{order:2;margin-top:26px}
  .tvdb .tvl-main{order:1;min-width:0}
  .tvdb .tvl-side2{margin-top:24px}
  .tvdb .tvl-mn .tvdb-own--wide,.tvdb .tvl-main .tvdb-own--wide{width:auto}
}
@media (max-width:680px){
  .tvdb .tvl-crumbw{margin-top:-6px}
  .tvdb .tvl-list .tvl-h1{font-size:19px}
  .tvdb .tvl-it{padding:14px 12px}
  .tvdb .tvl-it__b{grid-template-columns:64px minmax(0,1fr);gap:12px}
  .tvdb .tvl-it__ic,.tvdb-wrap .tvdb .tvl-it__ic{height:64px}
  .tvdb .tvl-it__ic svg{width:34px;height:34px}
  .tvdb .tvl-it__nm,.tvdb-wrap .tvdb .tvl-it__nm{font-size:17px}
  .tvdb .tvl-sort{flex-direction:column;align-items:flex-start;padding:0 6px}
  .tvdb .tvl-sort__b,.tvdb-wrap .tvdb .tvl-sort__b{padding:10px 9px;font-size:12px}
  .tvdb .tvl-sort__n{padding:0 8px 8px}
  .tvdb .tvl-pgr{flex-direction:column;align-items:flex-start;gap:2px}
  .tvdb .tvl-grid{height:300px}
  .tvdb .tvl-pin,.tvdb-wrap .tvdb .tvl-pin{width:32px;height:32px}
  .tvdb .tvl-pin svg{width:16px;height:16px}
  .tvdb .tvl-gridw{padding-left:24px}
  .tvdb .tvl-ax-x__s{display:none}
  .tvdb .tvl-gn{margin-left:0}
  .tvdb .tvl-leg{grid-template-columns:repeat(2,minmax(0,1fr));margin-left:0;font-size:12px}
  .tvdb .tvl-hd{grid-template-columns:minmax(0,1fr) 84px;gap:12px}
  .tvdb .tvl-page .tvl-h1{font-size:20px}
  .tvdb .tvl-hd__ic{height:84px}
  .tvdb .tvl-hd__ic svg{width:52px;height:52px}
  .tvdb .tvl-tb{display:flex;overflow-x:auto;gap:4px;-webkit-overflow-scrolling:touch}
  .tvdb .tvl-tb a,.tvdb-wrap .tvdb .tvl-tb a{flex:0 0 auto;padding:10px 14px;font-size:14px}
  .tvdb .tvl-score{grid-template-columns:minmax(0,1fr);padding:14px 14px 0}
  .tvdb .tvl-act{margin:0 -14px;grid-template-columns:minmax(0,1fr)}
  .tvdb .tvl-act a+a{box-shadow:0 -1px 0 #E4E4E4}
  .tvdb .tvl-pc{grid-template-columns:minmax(0,1fr)}
  .tvdb .tvl-cmb li{grid-template-columns:minmax(0,1fr) 84px 50px 34px}
  .tvdb .tvl-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tvdb .tvl-vbar{flex-direction:column;align-items:flex-start}
  .tvdb .tvl-v__k{margin-left:0;width:100%;padding-left:0}
  .tvdb .tvl-fl__s{margin-left:0}
  .tvdb .tvl-voices .tvdb-card{padding:14px 12px}
  .tvdb .tvl-mn .tvdb-fig--stats{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .tvdb .tvl *{transition:none!important}
}