@charset "utf-8";
/* tvdb 2026-09-15 ⑪a */
/* ============================================================
   転職ボイス データベース型ページ 共通の見た目（器）
   tenshoku-voice/assets/db.css   2026-09-14（②サーバーと土台）
   ------------------------------------------------------------
   元は飛行機の神様の db.css（2026-09-13 ポップ化＝hkdb-pop）。接頭辞を tvdb に変えた。
   ★②（土台）だけが触る。DBごとの見た目が要るときは assets/db-<key>.css を別に置く（1〜2行まで）。
   ⑪a（2026-09-15 藤井さん「下層もトップと同じデザインに」）＝緑一色をやめて白ベース＋4色（toridori.co.jp の型）に：
   ・黒 #111 ＝ 押せるもの（ボタン・選んでいるチップ・表の見出し行・順位の印）／文字も黒。リンクの文字は青 #0057B7
   ・面は薄い灰色 #F5F5F5（章・絞り込み・バッジ）・白い箱は影 0 0 0 1px #E6E6E6 で縁取る（細い枠線は引かない）・偶数行は #F7F7F7・行の hover は薄い黄色
   ・4色（黄 #FFD100・赤 #CD001A・青 #0057B7・緑 #027223）は 印・順位（1位 黄／2位 銀／3位 銅）・棒（青）・気持ちの印・章の見出しの黄色のマーカー だけ
   ・出どころの印（知恵袋 青・X 黒・5ch 黄（黒文字）・note 緑・YouTube 赤）は inc/01-db-core.php の tv_db_voice_src_mark。人の写真・相手のロゴは使わない
   ・角丸は 8px（ボタン・チップ・印は丸 999px）・数字は Jost・本文は Noto Sans JP（style.css）・ダークモード無し。本文16px／行間1.7。入力欄は16px以上
   ・部品のセレクタは全部 .tvdb .tvdb-xxx（0,2,0）で書く（リセットの詳細度に負けないため）
   ============================================================ */

.tvdb{
  --tv-ink:#111111; --tv-sub:#666666; --tv-link:#0057B7; --tv-dark:#111111; --tv-deep:#333333;
  --tv-paper:#ffffff; --tv-surface:#F5F5F5; --tv-chip:#ECECEC; --tv-line:#E6E6E6; --tv-shadow:0 0 0 1px #E6E6E6;
  --tv-y:#FFD100; --tv-red:#CD001A; --tv-blue:#0057B7; --tv-green:#027223;
  --tv-ok-bg:#E3F1E6; --tv-ok:#027223;
  --tv-ng-bg:#FBE4E6; --tv-ng:#CD001A;
  --tv-cond-bg:#FFF3B8; --tv-cond:#7A5C00;
  /* navy＝見出しと名前の濃い文字（黒）／sky＝表の偶数行と格子／or＝FAQのQの丸（青）／or-bg＝表の行の hover（薄い黄色） */
  --tv-navy:#111111; --tv-sky:#F7F7F7; --tv-sky2:#E6E6E6;
  --tv-or:#0057B7; --tv-or2:#0057B7; --tv-or-bg:#FFF8D6;
  /* 棒の色（青）と、数字を上に載せるマスの棒（薄い青）と下地 */
  --tv-fill:#0057B7; --tv-fill2:#2E6FC6; --tv-fill-soft:#D6E4F7; --tv-fill-soft2:#E6EFFA; --tv-track:#EEEEEE;
  --tv-icon-search:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.6 15.6L21 21'/%3E%3C/svg%3E");
  --tv-num:"Jost","Noto Sans JP","Hiragino Sans",-apple-system,BlinkMacSystemFont,sans-serif;
  --tv-r:8px;
  max-width:980px;margin:0 auto;padding:0 0 8px;
  font-size:16px;line-height:1.7;color:var(--tv-ink);font-feature-settings:"palt";
  -webkit-font-smoothing:antialiased;word-break:normal;overflow-wrap:anywhere;
}
.tvdb *,.tvdb *::before,.tvdb *::after{box-sizing:border-box}

/* テーマの飾りを外す（h2の帯・h3の色レール・li の丸・a の外部リンク印・table の罫線） */
.tvdb h1,.tvdb h2,.tvdb h3,.tvdb h4{background:none;border:0;padding:0;margin:0;color:inherit;font-weight:800;line-height:1.45;letter-spacing:0}
.tvdb h1::before,.tvdb h2::before,.tvdb h3::before,.tvdb h4::before,
.tvdb h1::after,.tvdb h2::after,.tvdb h3::after,.tvdb h4::after{content:none;display:none}
.tvdb p{margin:0;padding:0}
.tvdb ul,.tvdb ol{list-style:none;margin:0;padding:0}
.tvdb li{margin:0;padding:0;list-style:none}
.tvdb li::before,.tvdb li::after{content:none;display:none}
/* body.k-ain a（0,1,2）に負けないよう .tvdb-wrap を重ねて (0,2,1) にする */
.tvdb a,.tvdb-wrap .tvdb a{color:var(--tv-link);text-decoration:none}
.tvdb a:hover,.tvdb-wrap .tvdb a:hover{text-decoration:underline}
.tvdb a::before,.tvdb a::after{content:none;display:none}
.tvdb dl,.tvdb dt,.tvdb dd{margin:0;padding:0}
.tvdb table{border:0;border-collapse:separate;background:none;margin:0;width:100%}
.tvdb th,.tvdb td{border:0;background:none;text-align:left}
.tvdb details,.tvdb summary{margin:0;padding:0;background:none;border:0}
.tvdb summary{list-style:none;cursor:pointer}
.tvdb summary::-webkit-details-marker{display:none}
.tvdb button,.tvdb input,.tvdb select{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;box-shadow:none}
.tvdb small{font-size:.85em}
.tvdb b,.tvdb strong{font-weight:700}
.tvdb [hidden]{display:none !important}

/* ── パンくず ── */
.tvdb .tvdb-crumb{display:flex;flex-wrap:wrap;gap:7px;align-items:center;padding:11px 0;font-size:12px;color:var(--tv-sub)}
.tvdb .tvdb-crumb a{color:var(--tv-link)}   /* ⑪c：リンクの色は青にそろえる */
.tvdb .tvdb-crumb a:hover{color:var(--tv-link)}
.tvdb .tvdb-crumb__sep{opacity:.5}
.tvdb .tvdb-crumb__now{color:var(--tv-ink)}

/* ── ヒーロー（頭）＝検索の面。水色→薄いオレンジのグラデーションに白い飛行機（右上）
      ★一覧とハブは h1 と検索欄だけ（説明文・最終更新・数字タイルは core が描かない）。個別ページは今までどおり全部出る。
      ★h1 の前に●などの飾りを付けない（2026-09-13 20:50 藤井さん）。器の h1::before{content:none} のまま ── */
.tvdb .tvdb-hero{position:relative;background:#fff;border-radius:0;padding:14px 0 26px;margin:0 0 6px}
.tvdb .tvdb-hero__eyebrow{position:relative;display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--tv-ink);background:var(--tv-y);border-radius:4px;padding:2px 10px;margin:0 0 10px}
.tvdb .tvdb-hero__title{position:relative;font-size:30px;font-weight:900;line-height:1.4;color:var(--tv-navy);margin:0 0 14px;letter-spacing:.01em}
/* 個別ページの説明文・最終更新・数字タイル。飛行機（::before）の上に載るよう position:relative */
.tvdb .tvdb-hero__lead{position:relative;font-size:15.5px;line-height:1.85;color:var(--tv-ink);margin:0 0 10px}
.tvdb .tvdb-hero__meta{position:relative;font-size:13px;color:var(--tv-sub);margin:0 0 14px}
.tvdb .tvdb-sep{margin:0 6px;opacity:.6}
.tvdb .tvdb-kpis{position:relative;display:flex;flex-wrap:wrap;gap:12px;margin:0 0 16px}
.tvdb .tvdb-kpi{flex:1 1 150px;background:var(--tv-paper);box-shadow:var(--tv-shadow);border-radius:var(--tv-r);padding:14px 18px 12px}
.tvdb .tvdb-kpi b{display:block;font-family:var(--tv-num);font-size:30px;font-weight:700;line-height:1.2;color:var(--tv-ink);font-variant-numeric:tabular-nums}
.tvdb .tvdb-kpi b i{font-style:normal;font-size:15px;margin-left:2px}
.tvdb .tvdb-kpi span{display:block;font-size:13px;line-height:1.5;color:var(--tv-sub);margin-top:3px}
.tvdb .tvdb-kpi small{display:block;font-size:12px;color:var(--tv-sub);margin-top:2px}
.tvdb .tvdb-label{display:block;font-size:13px;font-weight:700;color:var(--tv-sub);margin:0 0 8px}
.tvdb .tvdb-hero .tvdb-label{position:relative;font-size:14px;font-weight:800;color:var(--tv-navy);margin:0 0 8px}
.tvdb .tvdb-search{position:relative;margin:0;max-width:640px}
/* 丸い入力欄と虫めがね（左） */
.tvdb .tvdb-search__in{display:block;width:100%;max-width:none;box-sizing:border-box;font-size:17px;font-weight:700;padding:15px 22px 15px 54px;border:0;border-radius:8px;background:#F2F2F2 var(--tv-icon-search) no-repeat 20px center;color:var(--tv-navy);-webkit-appearance:none;appearance:none;transition:transform .15s}
.tvdb .tvdb-bar__q::placeholder{color:#888888;opacity:1}
.tvdb .tvdb-search__in::placeholder{font-weight:500;color:#888888;opacity:1}
.tvdb .tvdb-bar__q:focus,.tvdb .tvdb-select:focus{outline:3px solid rgba(0,87,183,.35);outline-offset:2px}
.tvdb .tvdb-search__in:focus{outline:4px solid rgba(0,87,183,.35);outline-offset:2px}
.tvdb .tvdb-search__in::-webkit-search-cancel-button,.tvdb .tvdb-bar__q::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

/* ── 絞り込み ── */
.tvdb .tvdb-filters{background:var(--tv-surface);border-radius:8px;padding:18px 16px 6px;margin:0 0 14px}
.tvdb .tvdb-frow{margin:0 0 14px}
.tvdb .tvdb-chips{display:flex;flex-wrap:wrap;gap:8px}
.tvdb .tvdb-chip{font-size:14px;font-weight:600;line-height:1.4;padding:9px 16px;border:0;border-radius:999px;background:var(--tv-paper);color:var(--tv-navy);cursor:pointer;transition:background .15s,color .15s,transform .15s}
.tvdb .tvdb-chip:hover{background:var(--tv-chip);transform:translateY(-1px)}
.tvdb .tvdb-chip[aria-pressed="true"]{background:var(--tv-dark);color:#fff;font-weight:700}
.tvdb .tvdb-select{font-size:16px;padding:12px 40px 12px 14px;border:0;border-radius:999px;background-color:var(--tv-paper);color:var(--tv-ink);width:100%;max-width:360px;-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 14px center}

/* ── 一覧の上に貼り付くバー ── */
.tvdb .tvdb-bar{position:sticky;top:72px;z-index:30;display:flex;align-items:center;gap:9px;background:var(--tv-surface);border-radius:999px;padding:8px 8px 8px 16px;margin:0 0 14px}
.tvdb .tvdb-bar__count{flex:0 0 auto;white-space:nowrap;font-size:12.5px;color:var(--tv-sub);max-width:40%}
.tvdb .tvdb-bar__count b{font-size:15px;color:var(--tv-ink);font-family:var(--tv-num);font-weight:700;font-variant-numeric:tabular-nums}
.tvdb .tvdb-bar__noun{margin-left:2px}
.tvdb .tvdb-bar__in{display:flex;flex:1 1 auto;align-items:center;gap:9px;min-width:0}
.tvdb .tvdb-bar__q{flex:1 1 auto;min-width:0;font-size:16px;padding:9px 16px;border:0;border-radius:999px;background:var(--tv-paper);color:var(--tv-ink);-webkit-appearance:none;appearance:none}
.tvdb .tvdb-bar__btn{flex:0 0 auto;font-size:13px;font-weight:700;padding:10px 16px;border:0;border-radius:999px;background:var(--tv-dark);color:#fff;cursor:pointer}
.tvdb .tvdb-bar__btn:hover{background:var(--tv-deep)}

/* ── 一覧 ── */
.tvdb .tvdb-grp{margin:0 0 6px}
.tvdb .tvdb-grp__t{display:flex;align-items:baseline;gap:8px;font-size:19px;font-weight:800;margin:30px 0 12px}
.tvdb .tvdb-grp__n{font-size:13px;font-weight:600;color:var(--tv-sub);font-family:var(--tv-num)}
.tvdb .tvdb-cards{display:grid;grid-template-columns:1fr;gap:12px}
/* ★2026-09-13 実機のスマホ（iPhoneのUA）で見つけた。Googleの自動広告が幅370pxでカードの中に差し込まれ、grid の item は
   既定 min-width:auto で中身の幅まで広がる→カードが右へ12pxはみ出して横スクロールが出ていた（旧CSSでは28px）。
   item を min-width:0 にして広告がカードの幅を押し広げないようにする。広告の iframe は画面幅ちょうど（0〜390px）で収まる */
.tvdb .tvdb-cards>.tvdb-card{min-width:0}
.tvdb .tvdb-card{background:var(--tv-paper);box-shadow:var(--tv-shadow);border-radius:8px;padding:20px 18px 18px;scroll-margin-top:96px;transition:transform .18s,box-shadow .18s}
.tvdb .tvdb-sec .tvdb-card{box-shadow:none}
.tvdb .tvdb-card:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--tv-line),0 10px 24px rgba(0,0,0,.08)}   /* マウスを当てると少し浮く */
.tvdb .tvdb-card__name{font-size:21px;font-weight:800;line-height:1.45;color:var(--tv-navy);margin:0 0 10px}
.tvdb .tvdb-card__name a{color:inherit}
.tvdb .tvdb-card__name a:hover{color:var(--tv-link)}
.tvdb .tvdb-card__name small{display:block;font-size:13px;font-weight:500;color:var(--tv-sub);margin-top:2px}
.tvdb .tvdb-badges{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.tvdb .tvdb-badge{display:inline-block;font-size:13px;font-weight:700;line-height:1.4;padding:6px 13px;border-radius:999px;background:var(--tv-surface);color:var(--tv-navy)}
.tvdb .tvdb-badge.is-ok{background:var(--tv-ok-bg);color:var(--tv-ok)}
.tvdb .tvdb-badge.is-ng{background:var(--tv-ng-bg);color:var(--tv-ng)}
.tvdb .tvdb-badge.is-cond{background:var(--tv-cond-bg);color:var(--tv-cond)}
.tvdb .tvdb-badges--big .tvdb-badge{font-size:16px;padding:10px 16px}
.tvdb .tvdb-rows{background:var(--tv-surface);border-radius:var(--tv-r);padding:12px 15px;margin:0 0 12px;font-size:15px}
.tvdb .tvdb-row{display:flex;gap:14px;align-items:baseline}
.tvdb .tvdb-row+.tvdb-row{margin-top:8px}
.tvdb .tvdb-row dt{flex:0 0 5.6em;font-size:13px;font-weight:700;color:var(--tv-sub);line-height:1.75}
.tvdb .tvdb-row dd{flex:1 1 auto;min-width:0;color:var(--tv-ink);line-height:1.75}
.tvdb .tvdb-warn{background:var(--tv-cond-bg);color:var(--tv-cond);border-radius:var(--tv-r);padding:12px 15px;margin:0 0 12px;font-size:14px;line-height:1.8}
.tvdb .tvdb-warn b{font-weight:800;color:var(--tv-cond)}
.tvdb .tvdb-note{font-size:14px;color:#444444;line-height:1.8;margin:0 0 12px}
.tvdb .tvdb-det{margin:0 0 12px}
.tvdb .tvdb-det summary{display:block;font-size:14px;font-weight:700;color:var(--tv-ink);background:var(--tv-paper);box-shadow:var(--tv-shadow);border-radius:999px;padding:12px 18px;transition:background .15s}
.tvdb .tvdb-det summary:hover{background:var(--tv-chip)}
.tvdb .tvdb-det summary::after{content:" ▼";font-size:10px}
.tvdb .tvdb-det[open]>summary::after{content:" ▲"}
.tvdb .tvdb-det__in{padding:14px 2px 2px;font-size:14px}
.tvdb .tvdb-det__in .tvdb-own{padding:0;margin:0 0 10px;background:none}
/* 「〜を見る →」の青いピル。<a> なので .tvdb-wrap .tvdb a（0,2,1）に負けないよう並べて書く。grid の中で伸びないよう justify-self:start */
.tvdb-wrap .tvdb .tvdb-more,.tvdb .tvdb-more{display:inline-block;justify-self:start;width:auto;border-radius:999px;background:var(--tv-dark);color:#fff;padding:9px 18px;font-size:14px;font-weight:700;margin:6px 12px 0 0;transition:transform .15s,background .15s}
.tvdb-wrap .tvdb .tvdb-more:hover,.tvdb .tvdb-more:hover{background:var(--tv-deep);color:#fff;text-decoration:none;transform:translateY(-1px)}
.tvdb-wrap .tvdb .tvdb-more::after,.tvdb .tvdb-more::after{content:" →";display:inline}
.tvdb .tvdb-empty{background:var(--tv-surface);border-radius:var(--tv-r);padding:24px;text-align:center;color:var(--tv-sub);margin:0 0 12px}

/* ── 章・本文 ── */
.tvdb .tvdb-sec{background:var(--tv-surface);border-radius:8px;padding:28px 24px 26px;margin:24px 0 0;scroll-margin-top:84px}
/* 章の見出し。トップと同じ黄色のマーカー（文字の下半分）。器の h2::after{display:none} に負けないよう display:block を書く */
.tvdb .tvdb-sec__t{display:table;position:relative;isolation:isolate;font-size:22px;font-weight:900;color:var(--tv-navy);margin:0 0 16px;letter-spacing:.01em}
.tvdb .tvdb-sec__t::after{content:"";display:block;position:absolute;left:-.1em;right:-.1em;bottom:.06em;height:.42em;background:var(--tv-y);z-index:-1}
.tvdb .tvdb-sec__lead{font-size:15.5px;line-height:1.85;margin:0 0 12px}
.tvdb .tvdb-p{font-size:15.5px;line-height:1.85;margin:0 0 10px}
.tvdb .tvdb-p:last-child{margin-bottom:0}
.tvdb .tvdb-h3{font-size:16.5px;font-weight:800;margin:18px 0 7px;scroll-margin-top:84px}
.tvdb .tvdb-h4{font-size:15px;font-weight:800;margin:14px 0 6px}
.tvdb .tvdb-list{margin:0 0 10px;padding-left:1.3em}
.tvdb .tvdb-list li{list-style:disc;margin:0 0 6px;font-size:15px;line-height:1.8}
.tvdb .tvdb-list li::marker{color:var(--tv-sub)}
.tvdb .tvdb-sec .tvdb-rows,.tvdb .tvdb-sec .tvdb-badges{margin-bottom:12px}
.tvdb .tvdb-jump{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 4px}
.tvdb .tvdb-jump__lb{font-size:12px;color:var(--tv-sub);margin-right:4px}
.tvdb .tvdb-jump a{font-size:13px;font-weight:600;background:var(--tv-chip);border-radius:999px;padding:7px 14px;color:var(--tv-navy);transition:background .15s,transform .15s}
.tvdb .tvdb-jump a:hover{background:var(--tv-sky2);text-decoration:none;transform:translateY(-1px)}

/* ── 引用と小さい字 ── */
.tvdb .tvdb-quote{background:var(--tv-paper);border-radius:var(--tv-r);padding:12px 14px;margin:0 0 9px;font-size:14px;line-height:1.8;color:var(--tv-ink)}
.tvdb .tvdb-quote__l{display:block;font-size:13px;font-weight:700;color:var(--tv-link);margin:0 0 4px}
.tvdb .tvdb-quote__s{font-size:12px;color:var(--tv-sub);margin-left:6px}
.tvdb .tvdb-small{font-size:12.5px;color:var(--tv-sub);line-height:1.7;margin:10px 0 0}
.tvdb .tvdb-det__in .tvdb-quote{background:var(--tv-paper)}
.tvdb .tvdb-det__in .tvdb-tbl,.tvdb .tvdb-own .tvdb-tbl{min-width:560px} /* 条件の表（4〜5列）。スマホで1列目が1文字ずつ縦に折れていたので広げた（2026-09-12）。横スクロール枠の中なので画面ははみ出さない */

/* ── FAQ ── */
.tvdb .tvdb-qa{background:var(--tv-paper);border-radius:8px;padding:16px 18px 14px 18px;margin:0 0 10px}
.tvdb .tvdb-qa:last-child{margin-bottom:0}
/* 問いの頭に「Q」のオレンジの丸（文字は紺。オレンジの上に白は置かない） */
.tvdb .tvdb-qa__q{display:flex;align-items:flex-start;gap:10px;font-size:16px;font-weight:800;color:var(--tv-navy);margin:0 0 6px;line-height:1.5}
.tvdb .tvdb-qa__q::before{content:"Q";display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--tv-or);color:#fff;font-family:var(--tv-num);font-size:14px;font-weight:800;margin-top:1px}
.tvdb .tvdb-qa__a{font-size:15px;line-height:1.8;margin:0;padding-left:36px}

/* ── 出どころ ── */
.tvdb .tvdb-src{font-size:13px;color:var(--tv-sub);line-height:1.7}
.tvdb .tvdb-src__t{font-weight:700;margin:0 0 6px;color:var(--tv-ink)}
.tvdb .tvdb-src__list li{margin:0 0 4px;padding-left:1em;text-indent:-1em}
.tvdb .tvdb-src__list li::before{content:"・";display:inline;color:var(--tv-sub)}
.tvdb .tvdb-src__d{margin-left:8px;opacity:.85}
.tvdb .tvdb-src__n{display:block;color:var(--tv-ink);text-indent:0}
.tvdb .tvdb-src__list li:has(.tvdb-src__n){padding-left:1em}

/* ── 表と横棒（転職ボイス調べ） ── */
.tvdb .tvdb-own{background:var(--tv-paper);border-radius:8px;padding:18px 18px 14px;margin:0 0 12px}
.tvdb .tvdb-own:last-child{margin-bottom:0}
.tvdb .tvdb-own__t{font-size:16px;font-weight:700;line-height:1.5;color:var(--tv-navy);margin:0 0 4px}
.tvdb .tvdb-own__lead{font-size:14px;line-height:1.7;color:var(--tv-sub);margin:0 0 12px}
/* 表の下の注記（tvdb-own__note）は 2026-09-13 のポップ化で描かなくなった（core の hk_db_block_foot）。出どころ（own__src）だけ残す */
.tvdb .tvdb-own__src{font-size:12.5px;line-height:1.6;color:var(--tv-sub);margin:10px 0 0}
.tvdb .tvdb-bars{margin:0}
.tvdb .tvdb-brow{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--tv-r)}
.tvdb .tvdb-brow:nth-child(even){background:var(--tv-surface)}
.tvdb .tvdb-brow.is-hit{background:#FFF3B8}
.tvdb .tvdb-brow__n{flex:0 0 40%;font-size:14px;font-weight:700;line-height:1.4}
.tvdb .tvdb-brow__t{flex:1 1 auto;height:14px;background:var(--tv-track);border-radius:999px;overflow:hidden}
.tvdb .tvdb-brow__f{display:block;height:100%;background:linear-gradient(90deg,var(--tv-fill) 0%,var(--tv-fill2) 100%);border-radius:999px}
.tvdb .tvdb-brow.is-hit .tvdb-brow__f{background:var(--tv-fill)}
.tvdb .tvdb-brow__v{flex:0 0 5.2em;text-align:right;font-family:var(--tv-num);font-size:15px;font-weight:700;color:var(--tv-ink);font-variant-numeric:tabular-nums}
.tvdb .tvdb-scr{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tvdb .tvdb-tbl{width:100%;border-collapse:separate;border-spacing:0 4px;font-size:14.5px;min-width:360px}
/* 見出し行は青・偶数行は薄い水色（sky）。マスは白 */
.tvdb .tvdb-tbl th{background:var(--tv-dark);color:#fff;font-size:13.5px;font-weight:700;padding:12px 12px;white-space:nowrap;line-height:1.4}
.tvdb .tvdb-tbl th:first-child{border-radius:8px 0 0 0}
.tvdb .tvdb-tbl th:last-child{border-radius:0 8px 0 0}
.tvdb .tvdb-tbl td{background:#fff;padding:10px 12px;line-height:1.5;vertical-align:middle;color:var(--tv-ink)}
.tvdb .tvdb-tbl tbody tr:nth-child(even) td{background:var(--tv-sky)}
.tvdb .tvdb-tbl tbody tr.is-hit td{background:#FFF3B8}
.tvdb .tvdb-tbl td:first-child{font-weight:700;border-radius:var(--tv-r) 0 0 var(--tv-r);min-width:6em}
.tvdb .tvdb-tbl td:last-child{border-radius:0 var(--tv-r) var(--tv-r) 0}
.tvdb .tvdb-tbl td.tvdb-num{text-align:right;font-family:var(--tv-num);font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.tvdb .tvdb-tbl td small{display:block;font-size:12px;font-weight:400;color:var(--tv-sub)}

/* ── リンクの並び ── */
.tvdb .tvdb-links{display:grid;grid-template-columns:1fr;gap:8px}
.tvdb .tvdb-links--grid{grid-template-columns:repeat(2,1fr)}
.tvdb .tvdb-links li a{display:block;background:var(--tv-paper);border-radius:8px;padding:12px 14px;color:var(--tv-ink);transition:background .15s,transform .15s}
.tvdb .tvdb-links li a:hover{background:var(--tv-or-bg);text-decoration:none;transform:translateY(-1px)}
.tvdb .tvdb-links li a b{display:block;font-size:15px;font-weight:700;line-height:1.5;color:var(--tv-navy)}
.tvdb .tvdb-links li a span{display:block;font-size:13px;color:var(--tv-sub);margin-top:2px}
.tvdb .tvdb-links--chips{display:flex;flex-wrap:wrap;gap:6px}
.tvdb .tvdb-links--chips li a{background:var(--tv-paper);padding:6px 11px}
.tvdb .tvdb-links--chips li a b{font-size:13px;font-weight:600}

/* ── そのほか ── */
.tvdb .tvdb-back{margin:22px 0 0;font-size:15px;font-weight:700}
.tvdb .tvdb-editor{font-size:12.5px;color:var(--tv-sub);margin:24px 0 0}
/* ── 数え方（sections の id=how）はページの最下部に小さい灰色の文字で（2026-09-15 藤井さん）。箱なし・見出しのマーカーなし ── */
.tvdb .tvdb-how{margin:32px 0 0;padding:0;background:none;box-shadow:none;font-size:13px;line-height:1.75;color:#666666}
.tvdb .tvdb-how .tvdb-how__t{display:block;font-size:13px;font-weight:700;color:#666666;margin:0 0 4px;letter-spacing:0}
.tvdb .tvdb-how .tvdb-how__lead{font-size:13px;line-height:1.75;color:#666666;margin:0 0 4px}
.tvdb .tvdb-how .tvdb-list{margin:0;padding-left:1.2em}
.tvdb .tvdb-how .tvdb-list li{font-size:13px;line-height:1.75;color:#666666;margin:0 0 2px}
.tvdb .tvdb-how .tvdb-list li::marker{color:#999999}
.tvdb .tvdb-how+.tvdb-editor{margin-top:12px}

/* ── スマホ ── */
@media (max-width:680px){
  .tvdb .tvdb-hero{border-radius:0;padding:8px 0 18px}
  .tvdb .tvdb-hero__title{font-size:22px}
  .tvdb .tvdb-search__in{font-size:16px;padding:14px 16px 14px 48px;background-position:16px center}
  .tvdb .tvdb-hero__lead{font-size:15px}
  .tvdb .tvdb-kpi{padding:12px 14px 10px}
  .tvdb .tvdb-kpi b{font-size:26px}
  .tvdb .tvdb-filters{padding:14px 12px 4px}
  .tvdb .tvdb-bar{top:64px;gap:7px;padding:8px 9px}
  .tvdb .tvdb-bar__count{font-size:11px}
  .tvdb .tvdb-bar__count b{font-size:13px}
  .tvdb .tvdb-bar__noun{display:none}
  .tvdb .tvdb-bar__in{gap:6px}
  .tvdb .tvdb-bar__q{min-width:0;padding:9px 12px}
  .tvdb .tvdb-bar__btn{font-size:12px;padding:10px 12px}
  .tvdb .tvdb-card{scroll-margin-top:88px}   /* 余白と角は下の 3-10 のスマホで決める。カード名はPCと同じ21px（21:23の /airline/ と同じ） */
  .tvdb .tvdb-row{gap:10px}
  .tvdb .tvdb-row dt{flex:0 0 4.8em}
  .tvdb .tvdb-sec{border-radius:8px;padding:18px 14px}
  .tvdb .tvdb-sec__t{font-size:19px}
  .tvdb .tvdb-listhead{font-size:19px}
  .tvdb .tvdb-own{padding:14px 12px 12px}
  .tvdb .tvdb-brow__n{flex:0 0 42%;font-size:13px}
  .tvdb .tvdb-brow__v{flex:0 0 4.6em;font-size:13.5px}
  .tvdb .tvdb-links--grid{grid-template-columns:1fr}
}

/* ============================================================
   ここから下は30の設計書（DB意匠_20260912/設計書.md の3章）で足した部品
   2026-09-12 ／ 31のチャットが追記。DB型7枚すべてに効く
   3-1 mark ／ 3-2 cmp（比べる表） ／ 3-3 big ／ 3-4 cbar ／ 3-5 rank
   3-6 sortbar（並べ替え） ／ 3-7 fig（ラベルと値の格子） ／ 3-8 スマホで表をカードへ
   3-9 caption ／ 3-10 カラム（1カラムのまま行の中を8列へ・比べる表だけ1,280px）
   ------------------------------------------------------------
   ★細い線は使わない（面と余白で区切る）／ダークモードのCSSは入れない（白ベース固定）
   ★色は意味だけに使う／影ゼロ／角丸は上の変数（--tv-r:14px・2026-09-13 ポップ化でピルと20pxも）
   ★詳細度の落とし穴（本番の実体に当てて分かったもの。設計書のCSSのままでは効かない）
     ・表の min-width は上に .tvdb .tvdb-own .tvdb-tbl（0,3,0）がある
       → 変えるときは .tvdb .tvdb-tbl.tvdb-xxx（0,3,0）で後ろに書く
     ・a の色と下線は上に .tvdb-wrap .tvdb a（0,2,1）がある
       → リンクの部品は .tvdb-wrap .tvdb .tvdb-xxx（0,3,1）を並べて書く
     ・th は上に .tvdb .tvdb-tbl th{background:濃い面;color:#fff;white-space:nowrap}（0,2,1）がある
       → tbody の見出しセルは文字色と折り返しを戻す
   ============================================================ */

/* ── 3-1 見分ける印（公式のロゴ画像。画像が無い社は公式の色の文字マーク） ── */
.tvdb .tvdb-mark{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:44px;height:44px;border-radius:8px;background:var(--m-bg,#0D1B2A);color:var(--m-fg,#fff);font-family:var(--tv-num);font-size:13px;font-weight:700;letter-spacing:.02em;line-height:1;text-align:center;white-space:nowrap}
.tvdb .tvdb-mark--sm{width:32px;height:32px;font-size:11px}
.tvdb .tvdb-mark--lg{width:56px;height:56px;font-size:16px}
.tvdb .tvdb-mark[data-len="4"]{font-size:11px}
.tvdb .tvdb-mark[data-len="5"]{font-size:10px;letter-spacing:-.02em}
/* 画像版（2026-09-13・藤井さんの指示で公式ロゴを使う。許可は藤井さんが取った）
   高さは44pxで固定し、幅はロゴの比率どおり（正方形のアイコンは44px・横長のロゴは最大100px）。
   航空会社の比較サイト（AirAdvisor・Skytrax）と同じ出し方。ロゴは白い面に置く */
.tvdb .tvdb-mark--img{width:auto;min-width:44px;max-width:100px;padding:3px;background:#fff;overflow:hidden}
.tvdb .tvdb-mark--img img{display:block;height:100%;width:auto;max-width:100%;object-fit:contain}
.tvdb .tvdb-mark--sm.tvdb-mark--img{min-width:32px;max-width:72px;padding:2px}
.tvdb .tvdb-mark--lg.tvdb-mark--img{min-width:56px;max-width:128px;padding:4px}

/* ── 3-3 大きい数字（単位は3分の1にして色を落とす・桁をそろえる） ── */
.tvdb .tvdb-big{font-family:var(--tv-num);font-size:24px;font-weight:700;line-height:1.1;color:var(--tv-ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.tvdb .tvdb-big+i{font-style:normal;font-size:12.5px;font-weight:700;color:var(--tv-sub);margin-left:2px}
.tvdb .tvdb-big--acc{color:var(--tv-link)}
.tvdb .tvdb-big--ng{color:var(--tv-ng)}
.tvdb .tvdb-big--lg{font-size:34px}

/* ── 3-4 行の中の横棒（多いほど良いものだけ。少ないほど良いものは --ng） ── */
.tvdb .tvdb-cbar{display:block;height:6px;border-radius:3px;background:var(--tv-chip);margin-top:5px;overflow:hidden}
.tvdb .tvdb-cbar>i{display:block;height:100%;border-radius:3px;background:var(--tv-fill)}
.tvdb .tvdb-cbar--ng>i{background:var(--tv-ng)}
.tvdb .tvdb-cbar--ok>i{background:var(--tv-ok)}

/* ── 3-5 順位の印（黒い丸に白い数字。⑪a＝1位 黄・2位 銀・3位 銅はトップのランキングの札と同じ色。黄と銀の上は黒文字） ── */
.tvdb .tvdb-rank{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:28px;height:28px;border-radius:999px;background:var(--tv-dark);font-family:var(--tv-num);font-size:14px;font-weight:700;color:#fff;line-height:1}
.tvdb .tvdb-rank--top{background:var(--tv-dark);color:#fff}
.tvdb .tvdb-rank--n1{background:var(--tv-y);color:var(--tv-ink)}
.tvdb .tvdb-rank--n2{background:#C4C4C4;color:var(--tv-ink)}
.tvdb .tvdb-rank--n3{background:#C57E3C;color:#fff}

/* ── 3-6 並べ替え（href は本物のリンク。JSが動かなくてもページが再読込されるだけ） ── */
.tvdb .tvdb-sortbar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.tvdb .tvdb-sortbar__b,.tvdb-wrap .tvdb .tvdb-sortbar__b{font-size:14px;font-weight:700;line-height:1.4;padding:10px 18px;border-radius:999px;background:#fff;color:var(--tv-navy);transition:background .15s,color .15s,transform .15s}
.tvdb .tvdb-sortbar__b:hover,.tvdb-wrap .tvdb .tvdb-sortbar__b:hover{background:var(--tv-chip);color:var(--tv-navy);text-decoration:none;transform:translateY(-1px)}
.tvdb .tvdb-sortbar__b.is-on,.tvdb-wrap .tvdb .tvdb-sortbar__b.is-on{background:var(--tv-dark);color:#fff}
.tvdb .tvdb-sortbar__b.is-on:hover,.tvdb-wrap .tvdb .tvdb-sortbar__b.is-on:hover{background:var(--tv-dark);color:#fff}

/* ── 3-7 ラベルと値の格子（PCは --fig-cols の数だけ横に・スマホは2列）
      区切りは線でなく市松の面。2pxの隙間は細い線に見えるので gap では区切らない ── */
.tvdb .tvdb-fig{display:grid;grid-template-columns:repeat(var(--fig-cols,4),1fr);background:var(--tv-paper);box-shadow:var(--tv-shadow);border-radius:8px;overflow:hidden;margin:0 0 12px}
.tvdb .tvdb-fig>div{padding:11px 13px;background:var(--tv-paper);min-width:0}
.tvdb .tvdb-fig>div:nth-child(even){background:var(--tv-sky)}
.tvdb .tvdb-fig dt{font-size:12px;font-weight:700;color:#666666;line-height:1.5;margin:0 0 3px;white-space:nowrap}
.tvdb .tvdb-fig dd{font-size:15px;line-height:1.4;color:var(--tv-ink)}
.tvdb .tvdb-fig dd.tvdb-fig__sm{font-size:13px;font-weight:700;line-height:1.35}

/* ── 3-9 表の題（何のデータか・いつの時点か・出どころを1行で。AIが表の意味を取る手がかり） ── */
.tvdb .tvdb-tbl caption{caption-side:top;text-align:left;font-size:13px;font-weight:700;color:var(--tv-navy);line-height:1.6;padding:0 0 8px}

/* ── 3-2 比べる表（見出し青・偶数行は薄い水色・行にマウスを当てると薄いオレンジ） ──
   ★2026-09-13 20:30 藤井さん「項目のところは固定にしないでOK」→ 見出し行（thead）と1列目は貼り付けない（static）。
     枠（tvdb-scr--stick）は横スクロールできる箱に戻す（9/12の「ページのスクロールで貼り付く」はやめた）。
   ★681〜1000px（タブレット）で6列を押し込むと社名が1文字ずつ縦に折れて棒が縦長になるので、
     681px以上だけ表に最小幅 720px と社名 nowrap を持たせて箱の中で横にスクロールさせる。
     680px以下は器がカード化するので当てない（当てると右端の棒が箱の外へ出る）。
   ★border-spacing:0（既定の 0 4px だと行の間が空く） */
.tvdb .tvdb-scr--stick{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tvdb .tvdb-tbl.tvdb-cmp{border-spacing:0;min-width:640px}
@media (min-width:681px){
  .tvdb .tvdb-tbl.tvdb-cmp{min-width:720px}
  .tvdb .tvdb-cmp tbody th .tvdb-cmp__in a{white-space:nowrap}
}
.tvdb .tvdb-cmp thead th{position:static;border-radius:0}
.tvdb .tvdb-cmp .tvdb-cmp__h1{position:static;background:#fff;min-width:186px;border-radius:0}
.tvdb .tvdb-cmp thead .tvdb-cmp__h1{background:var(--tv-dark)}
.tvdb .tvdb-cmp tbody tr:nth-child(even) .tvdb-cmp__h1{background:var(--tv-sky)}
.tvdb .tvdb-cmp tbody tr:hover td,.tvdb .tvdb-cmp tbody tr:hover .tvdb-cmp__h1{background:var(--tv-or-bg)}
/* ★2026-09-13（32からの申し送り）。th を display:flex にすると table-cell でなくなり、同じ行の td が2〜3行に折り返しても
     th は1行ぶんの高さのまま＝th の下に白い切れ目が出る（/airline/ の超過料金の表の JAL・ANA・デルタ）。
     table-cell のまま vertical-align:middle で縦中央にそろえる */
.tvdb .tvdb-cmp tbody th{display:table-cell;vertical-align:middle;font-weight:700;padding:10px 12px;color:var(--tv-ink);white-space:normal}
/* 中の順位・印・社名は th でなく包み（PHPが出す tvdb-cmp__in）を flex にする。CSSだけで table-cell に戻すと
   社名が印の下へ折れて回り込む（「ANA（全日／本空輸）」）。包みなら社名は印の右で独立した列のまま折り返す */
.tvdb .tvdb-tbl tbody th>.tvdb-cmp__in{display:flex;align-items:center;gap:9px}
/* ★2026-09-15 藤井さん「クリックできるのか分かりにくかった」→ 名前は青 #0057B7＋下線（名前の span だけ。補足の small は灰色・下線なし）。
     .tvdb-wrap .tvdb a（0,2,1）と a:hover の下線（a 全体に付くと small まで線が入る）に勝つよう .tvdb-wrap を付けて書く */
.tvdb .tvdb-cmp tbody th a,.tvdb-wrap .tvdb .tvdb-cmp tbody th a{color:var(--tv-link);font-size:15px;line-height:1.45;text-decoration:none}
.tvdb .tvdb-cmp tbody th a:hover,.tvdb-wrap .tvdb .tvdb-cmp tbody th a:hover{color:var(--tv-link);text-decoration:none}
.tvdb .tvdb-cmp tbody th a .tvdb-cmp__nm{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 .tvdb-cmp tbody th a:hover .tvdb-cmp__nm{text-decoration-color:currentColor}
.tvdb .tvdb-cmp td{border-radius:0}
.tvdb .tvdb-cmp td.tvdb-num{white-space:normal}

/* ── 3-4b 数字の差＝マスの中を塗る棒（2026-09-13 藤井さん「重さのところが視覚的にわかりにくい」）
      数字の下の6pxの線をやめて、マスいっぱいの太い棒（薄いオレンジ）の上に数字を載せる。上限が100%。
      :has() が無い古いブラウザでは 3-4 の細い棒のまま（壊れない）。オレンジの上に白い文字は置かない ── */
.tvdb .tvdb-cmp td.tvdb-num:has(>.tvdb-cbar){position:relative;z-index:0;padding:8px 12px;text-align:left;min-width:124px}
.tvdb .tvdb-cmp td.tvdb-num:has(>.tvdb-cbar) .tvdb-big,.tvdb .tvdb-cmp td.tvdb-num:has(>.tvdb-cbar) .tvdb-big+i{position:relative;z-index:2}
.tvdb .tvdb-cmp td.tvdb-num:has(>.tvdb-cbar) .tvdb-big{color:var(--tv-navy);padding-left:10px}
.tvdb .tvdb-cmp td.tvdb-num:has(>.tvdb-cbar) .tvdb-big+i{color:#666666}
.tvdb .tvdb-cmp td.tvdb-num>.tvdb-cbar{position:absolute;left:8px;right:8px;top:7px;bottom:7px;height:auto;margin:0;border-radius:999px;background:var(--tv-track);z-index:1}
.tvdb .tvdb-cmp td.tvdb-num>.tvdb-cbar>i{border-radius:999px;background:linear-gradient(90deg,var(--tv-fill-soft) 0%,var(--tv-fill-soft2) 100%);transition:width .3s}
/* カードの格子でも同じ（数字の入るマスだけ）。棒の長さをそろえるため幅の上限 190px */
.tvdb .tvdb-fig dd:has(>.tvdb-cbar){position:relative;z-index:0;display:block;max-width:190px;padding:5px 12px;border-radius:999px;background:var(--tv-track);overflow:hidden}
.tvdb .tvdb-fig dd:has(>.tvdb-cbar) .tvdb-big,.tvdb .tvdb-fig dd:has(>.tvdb-cbar) .tvdb-big+i{position:relative;z-index:2}
.tvdb .tvdb-fig dd:has(>.tvdb-cbar) .tvdb-big{color:var(--tv-navy)}
.tvdb .tvdb-fig dd:has(>.tvdb-cbar) .tvdb-big+i{color:#666666}
.tvdb .tvdb-fig dd>.tvdb-cbar{position:absolute;inset:0;height:auto;margin:0;border-radius:999px;background:transparent;z-index:1}
.tvdb .tvdb-fig dd>.tvdb-cbar>i{border-radius:999px;background:linear-gradient(90deg,var(--tv-fill-soft) 0%,var(--tv-fill-soft2) 100%)}

/* ── 3-10 カードの中を横に組む（順位・印・社名の右に格子） ── */
.tvdb .tvdb-card--row{display:grid;grid-template-columns:auto auto 1fr;gap:0 14px;align-items:start}
.tvdb .tvdb-card--row .tvdb-rank{grid-row:1}
.tvdb .tvdb-card--row .tvdb-mark{grid-row:1}
.tvdb .tvdb-card--row .tvdb-card__name{grid-column:3;margin:0 0 6px}
.tvdb .tvdb-card--row .tvdb-badges{grid-column:1 / -1;margin:8px 0 0}
.tvdb .tvdb-card--row .tvdb-fig{grid-column:1 / -1;margin-top:4px}
.tvdb .tvdb-card--row .tvdb-note{grid-column:1 / -1}
.tvdb .tvdb-card--row .tvdb-more{grid-column:1 / -1}
.tvdb .tvdb-card--row .tvdb-det{grid-column:1 / -1}
.tvdb .tvdb-card--row .tvdb-warn{grid-column:1 / -1}

/* ── 3-10 比べる表だけ最大1,280pxへ。本文とカードは980pxのまま ──
   ★親に overflow:hidden があると負のマージンで見切れる。1060px以下は広げない
   ★calc(100vw - 48px) にしているのは、画面ぴったりだと縦スクロールバーのぶん横スクロールが出るため */
.tvdb .tvdb-own--wide{width:min(1280px, calc(100vw - 48px));margin-left:calc((min(1280px, 100vw - 48px) - 100%) / -2);margin-right:calc((min(1280px, 100vw - 48px) - 100%) / -2);background:var(--tv-paper);box-shadow:var(--tv-shadow);padding:18px 18px 14px}
@media (max-width:1060px){
  .tvdb .tvdb-own--wide{width:auto;margin-left:0;margin-right:0}
}

/* ── 3-10 スマホ（680px以下）。行の中は2列を保つ。1列に畳まない ── */
@media (max-width:680px){
  .tvdb .tvdb-big{font-size:20px}
  .tvdb .tvdb-big--lg{font-size:28px}
  .tvdb .tvdb-fig{grid-template-columns:repeat(2,1fr)}
  .tvdb .tvdb-fig>div{padding:10px 11px}
  /* 2列のとき右の列（値）は水色のまま、左の列は白と薄い水色を交互に（21:23の /airline/ と同じ塗り分け） */
  .tvdb .tvdb-fig>div:nth-child(4n+3){background:var(--tv-surface)}
  .tvdb .tvdb-fig dd:has(>.tvdb-cbar){max-width:none}
  /* 左右の余白を20px→8pxへ詰めて幅を使い切る（350px→374px・2026-09-12に藤井さんが選択）。
     設計書のCSSは -8px だったが、それだと366pxで合格の線370pxに届かない */
  .tvdb .tvdb-cards,.tvdb .tvdb-own{margin-left:-12px;margin-right:-12px}
  .tvdb .tvdb-card{border-radius:8px;padding:16px 12px 14px}
  .tvdb .tvdb-sortbar__b,.tvdb-wrap .tvdb .tvdb-sortbar__b{padding:9px 14px;font-size:13px}
  /* 貼り付くバーは「件数｜検索欄＋ボタン」の2列。★3列（auto 1fr 1fr）だと子が2つなので3列目が空いて
     検索欄が1文字幅につぶれていた（19:00の版からあった崩れ・2026-09-13 に直した） */
  .tvdb .tvdb-bar{display:grid;grid-template-columns:auto 1fr;gap:0;padding:0;border-radius:8px;overflow:hidden}
  .tvdb .tvdb-bar>*{padding:11px 10px;max-width:none}
  .tvdb .tvdb-bar__count{background:var(--tv-paper);text-align:center}
}

/* ── 3-8 スマホで表をカードへ組み替える（横スクロールは指で気づかれない） ──
   ★thead は消さずに視覚だけ隠す（display:none にすると読み上げと構造化データから消える）
   ★table{display:block} にすると caption の幅が0になって1文字ずつ縦に並ぶ。必ず width:auto を当てる */
@media (max-width:680px){
  .tvdb .tvdb-tbl.tvdb-tbl--cards{min-width:0;display:block}
  .tvdb .tvdb-tbl--cards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tvdb .tvdb-tbl--cards caption{display:block;width:auto;padding:0 0 10px}
  .tvdb .tvdb-tbl--cards tbody,.tvdb .tvdb-tbl--cards tr{display:block}
  .tvdb .tvdb-tbl--cards tr{background:#fff;border-radius:8px;padding:14px 14px;margin:0 0 10px}   /* 外の面が薄い水色なのでカードは白 */
  .tvdb .tvdb-tbl--cards tbody th{display:flex;align-items:center;gap:9px;background:none;padding:0 0 8px;font-size:16px;color:var(--tv-ink);white-space:normal;position:static;min-width:0}
  /* ★gap で離すとラベルと数字だけでなく「115」と「cm」の間も8px空く（実物で見つけた・2026-09-12）。
     隙間はラベル側の padding で作り、数字と単位はくっつけたままにする */
  .tvdb .tvdb-tbl--cards td{display:flex;justify-content:flex-start;align-items:baseline;gap:0;background:none;padding:6px 0;border-radius:0;min-width:0}
  .tvdb .tvdb-tbl--cards td::before{content:attr(data-lb);flex:0 0 calc(6.5em + 8px);padding-right:8px;font-size:12.5px;font-weight:700;color:var(--tv-sub)}
  .tvdb .tvdb-tbl--cards td:first-child,.tvdb .tvdb-tbl--cards td:last-child{border-radius:0;min-width:0}
  .tvdb .tvdb-tbl--cards tbody tr:nth-child(even) td{background:none}
  .tvdb .tvdb-tbl--cards td.tvdb-num{text-align:left;white-space:normal}
  .tvdb .tvdb-tbl--cards .tvdb-big+i{margin-left:2px}
  /* 数字と単位と棒が3か所に散るので、左に寄せて棒だけ右端へ＝太いピル（幅96px・高さ14px） */
  .tvdb .tvdb-tbl--cards .tvdb-cbar{margin-left:auto;margin-top:0;flex:0 0 96px;height:14px;border-radius:999px;background:var(--tv-track);align-self:center}
  .tvdb .tvdb-tbl--cards .tvdb-cbar>i{height:100%;border-radius:999px;background:var(--tv-fill)}
  /* 行の hover（薄いオレンジ）はカードでは出さない */
  .tvdb .tvdb-tbl--cards tbody tr:hover td,.tvdb .tvdb-tbl--cards tbody tr:hover .tvdb-cmp__h1{background:none}
  /* カード化した表の棒＝マスの中を塗る形はラベル（::before）と重なるので使わない。
     PC用の absolute（0,4,1）に勝つよう .tvdb-tbl--cards を重ねて（0,5,1）で戻す */
  .tvdb .tvdb-tbl--cards.tvdb-cmp td.tvdb-num:has(>.tvdb-cbar){position:static;min-width:0;padding:6px 0;text-align:left}
  .tvdb .tvdb-tbl--cards.tvdb-cmp td.tvdb-num:has(>.tvdb-cbar) .tvdb-big{padding-left:0}
  .tvdb .tvdb-tbl--cards.tvdb-cmp td.tvdb-num>.tvdb-cbar{position:static;left:auto;right:auto;top:auto;bottom:auto;margin:0 0 0 auto;flex:0 0 96px;height:14px;border-radius:999px;background:var(--tv-track);z-index:auto}
  .tvdb .tvdb-tbl--cards.tvdb-cmp td.tvdb-num>.tvdb-cbar>i{background:var(--tv-fill)}   /* カードでは数字が棒の上に載らないので濃い青 */
  /* 「偶数行の1列目を灰色に」がスマホでも効くと1行だけ社名の背景が灰色になる */
  .tvdb .tvdb-tbl--cards tbody .tvdb-cmp__h1,
  .tvdb .tvdb-tbl--cards tbody tr:nth-child(even) .tvdb-cmp__h1{background:none}
  /* データのラベルが無い表（head が無い表）は ::before を出さない */
  .tvdb .tvdb-tbl--cards td:not([data-lb])::before{content:none;display:none}
  /* ★2026-09-13 本番で見つけた。DB専用の db-kodomo.css が横スクロールの表を前提に td:nth-child(2){white-space:nowrap}（0,3,1）を
     当てていて、カードにしたあとも勝ち、値が折り返せず右で切れた。カード化したときは必ず折り返す保証を器が持つ（0,3,2） */
  .tvdb .tvdb-tbl.tvdb-tbl--cards tbody td,.tvdb .tvdb-tbl.tvdb-tbl--cards tbody th{white-space:normal}
}

/* ============================================================
   ここから下は転職ボイスで足した部品（2026-09-14・②）
   声カード（デザインの決まり5章）／数えた結果／貼り付くバーの3分割／投票／一覧の見出し／残りを畳む
   ============================================================ */

/* ── 一覧の見出し（h2）と、並べ替えの label ── */
.tvdb .tvdb-listhead{font-size:22px;font-weight:900;color:var(--tv-navy);margin:30px 0 14px;display:table;position:relative;isolation:isolate;letter-spacing:.01em}
.tvdb .tvdb-listhead::after{content:"";display:block;position:absolute;left:-.1em;right:-.1em;bottom:.06em;height:.42em;background:var(--tv-y);z-index:-1}
.tvdb .tvdb-sortbar__lb{font-size:13px;font-weight:700;color:var(--tv-sub);align-self:center;margin-right:2px}
.tvdb .tvdb-chip__n{font-style:normal;font-size:11px;font-weight:700;color:var(--tv-sub);margin-left:5px}
.tvdb .tvdb-chip[aria-pressed="true"] .tvdb-chip__n{color:#fff;opacity:.85}
.tvdb .tvdb-big--txt{font-size:20px}
.tvdb .tvdb-fig__sub{display:block;font-size:12px;font-weight:600;color:var(--tv-sub);margin-top:2px}
.tvdb .tvdb-marks{display:inline-flex;gap:4px;align-items:center}
.tvdb .tvdb-marks .tvdb-mark{width:32px;height:32px;font-size:12px;border-radius:50%}

/* ── 貼り付くバー＝ 件数｜絞り込み｜並べ替え の3分割（PCはピル・スマホは3等分） ── */
.tvdb .tvdb-bar{top:70px;box-shadow:var(--tv-shadow)}
.tvdb .tvdb-bar__sort{flex:1 1 auto;min-width:0;display:block}
.tvdb .tvdb-bar__sel{display:block;width:100%;max-width:280px;margin-left:auto;font-size:16px;font-weight:700;padding:9px 40px 9px 16px;border:0;border-radius:999px;background-color:var(--tv-paper);color:var(--tv-navy);-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 14px center}
.tvdb .tvdb-bar__sel:focus{outline:3px solid rgba(0,87,183,.35);outline-offset:2px}
@media (max-width:680px){
  .tvdb .tvdb-bar{grid-template-columns:1fr 1fr 1fr;top:62px}
  .tvdb .tvdb-bar__btn{width:100%;border-radius:0;padding:12px 6px;font-size:13px}
  .tvdb .tvdb-bar__sort{padding:6px 6px}
  .tvdb .tvdb-bar__sel{max-width:none;font-size:16px;padding:8px 26px 8px 10px;background-position:right 8px center}   /* ★16px（14px だと iPhone が select で画面を拡大する・2026-09-14 ⑤が1行だけ直した） */
  .tvdb .tvdb-bar__count{font-size:12px;padding:11px 6px}
  .tvdb .tvdb-bar__count b{font-size:14px;display:block}
  .tvdb .tvdb-bar__noun{display:inline}
}

/* ── 残りを畳む（61件目から）── */
.tvdb .tvdb-det--more{margin:12px 0 0}
.tvdb .tvdb-det--more>summary{background:var(--tv-dark);color:#fff;text-align:center;font-size:15px}
.tvdb .tvdb-det--more>summary:hover{background:var(--tv-deep)}
.tvdb .tvdb-det--more>.tvdb-det__in{padding:12px 0 0}

/* ── 声カード（PC・1行1枚・8列）
      印｜要約（年代の上）｜職種orテーマ｜雇用｜状況｜種類｜気持ち｜日付と元へ
      各列は「ラベル＋値」の2段（dt/dd）にして、行の中の列として数えられる形にする ── */
.tvdb .tvdb-cards--voice{gap:10px}
.tvdb .tvdb-voice{display:grid;grid-template-columns:52px auto auto auto auto minmax(0,1fr) 72px 112px;grid-template-rows:auto auto;gap:6px 14px;align-items:start;padding:16px 18px 14px;
  grid-template-areas:"mk sum sum sum sum sum sen dt" "src a1 a2 a3 a4 a5 senl lnk"}
.tvdb .tvdb-voice__mk{grid-area:mk}
.tvdb .tvdb-voice__src{grid-area:src;font-size:11px;font-weight:700;color:var(--tv-sub);line-height:1.3;align-self:start}
.tvdb .tvdb-voice__sum{grid-area:sum;font-size:15.5px;line-height:1.7;color:var(--tv-ink);margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;align-self:start;min-height:2.6em}
.tvdb .tvdb-voice__a{margin:0;min-width:0}
.tvdb .tvdb-voice__a1{grid-area:a1}.tvdb .tvdb-voice__a2{grid-area:a2}.tvdb .tvdb-voice__a3{grid-area:a3}.tvdb .tvdb-voice__a4{grid-area:a4}.tvdb .tvdb-voice__a5{grid-area:a5}
.tvdb .tvdb-voice__a dt{font-size:11px;font-weight:700;color:var(--tv-sub);line-height:1.3;margin:0 0 3px;white-space:nowrap}
.tvdb .tvdb-voice__a dd{margin:0}
.tvdb .tvdb-voice__a .tvdb-badge{display:inline-block;font-size:12.5px;font-weight:700;line-height:1.35;padding:5px 10px;border-radius:999px;background:var(--tv-surface);color:var(--tv-navy);white-space:normal}
.tvdb .tvdb-voice__a5 .tvdb-badge{background:var(--tv-chip)}
/* 気持ちの印と「気持ち」のラベル、日付と「元の質問」は列の幅いっぱいの箱にして左端をそろえる（行の中の列として数えられる形） */
.tvdb .tvdb-sent{grid-area:sen;justify-self:stretch;align-self:start;display:block;text-align:center;font-size:13px;font-weight:800;line-height:1.3;padding:7px 8px;border-radius:999px;white-space:nowrap;background:#ECECEC;color:#444}
.tvdb .tvdb-sent--fuan{background:#DCE7F6;color:#0057B7}
.tvdb .tvdb-sent--mayoi{background:#FFF3B8;color:#7A5C00}
.tvdb .tvdb-sent--fuman{background:#FBE4E6;color:#CD001A}
.tvdb .tvdb-sent--mae{background:#DFF0E3;color:#027223}
.tvdb .tvdb-sent--houkoku{background:#ECECEC;color:#444}
.tvdb .tvdb-voice__sentl{grid-area:senl;justify-self:stretch;text-align:center;font-size:11px;font-weight:700;color:var(--tv-sub);line-height:1.3}
.tvdb .tvdb-voice__dt{grid-area:dt;justify-self:stretch;align-self:start;text-align:right;font-size:12.5px;font-weight:700;color:var(--tv-sub);font-variant-numeric:tabular-nums;white-space:nowrap;padding-top:7px}
.tvdb .tvdb-voice__lnk,.tvdb-wrap .tvdb .tvdb-voice__lnk{grid-area:lnk;justify-self:stretch;align-self:start;display:block;text-align:center;font-size:12.5px;font-weight:700;line-height:1.35;padding:5px 8px;border-radius:999px;background:var(--tv-dark);color:#fff;white-space:nowrap;transition:background .15s,transform .15s}
.tvdb .tvdb-voice__lnk::after,.tvdb-wrap .tvdb .tvdb-voice__lnk::after{content:" →";display:inline}
.tvdb .tvdb-voice__lnk:hover,.tvdb-wrap .tvdb .tvdb-voice__lnk:hover{background:var(--tv-deep);color:#fff;text-decoration:none;transform:translateY(-1px)}
.tvdb .tvdb-voice__lnk.is-none{background:var(--tv-sky);color:var(--tv-sub)}
.tvdb .tvdb-voice__lnk.is-none::after{content:none}
/* 出どころの印（文字マーク・6色は印の中だけ） */
.tvdb .tvdb-voice .tvdb-mark{width:44px;height:44px;font-size:18px;font-weight:800;border-radius:50%}
.tvdb .tvdb-mark--src-x{font-family:Arial,Helvetica,sans-serif;font-weight:900}

/* ── 声カード（スマホ・5列） 印｜a1｜a2｜a3｜気持ち ── */
@media (max-width:680px){
  .tvdb .tvdb-voice{grid-template-columns:40px 1fr 1.25fr 1fr 58px;grid-template-rows:auto auto auto;gap:6px 6px;padding:13px 10px 11px;
    grid-template-areas:"mk sum sum sum sen" "src a1 a2 a3 senl" "dt a4 a5 lnk lnk"}
  .tvdb .tvdb-voice__sum{-webkit-line-clamp:unset;display:block;font-size:15px;min-height:0}
  .tvdb .tvdb-voice .tvdb-mark{width:40px;height:40px;font-size:16px;border-radius:50%}
  .tvdb .tvdb-voice__a dt{font-size:10.5px}
  .tvdb .tvdb-voice__a .tvdb-badge{font-size:11.5px;padding:4px 7px;line-height:1.3}
  .tvdb .tvdb-sent{font-size:11.5px;padding:6px 7px;justify-self:stretch;text-align:center}
  .tvdb .tvdb-voice__sentl{justify-self:stretch;text-align:center}
  .tvdb .tvdb-voice__src{font-size:10px}
  .tvdb .tvdb-voice__dt{text-align:left;align-self:end;font-size:11px;padding-top:0;white-space:normal;line-height:1.3}
  .tvdb .tvdb-voice__lnk,.tvdb-wrap .tvdb .tvdb-voice__lnk{align-self:end;font-size:12px;padding:5px 8px}
}

/* ── 数えた結果（大きい数字6個＋棒の格子） ── */
.tvdb .tvdb-stats{margin-top:18px}
.tvdb .tvdb-fig--stats>div{padding:12px 14px}
.tvdb .tvdb-fig--stats dd{display:block;position:relative}
.tvdb .tvdb-stats__bars{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.tvdb .tvdb-stats__bars .tvdb-own{margin:0}
.tvdb .tvdb-own__cap{font-size:12px;font-weight:700;color:var(--tv-sub);margin:0 0 6px}
.tvdb .tvdb-stats .tvdb-brow{padding:5px 8px}
.tvdb .tvdb-stats .tvdb-brow__n{flex:0 0 38%;font-size:13px}
.tvdb .tvdb-stats .tvdb-brow__v{flex:0 0 6.4em;font-size:13px}
@media (max-width:1000px){ .tvdb .tvdb-stats__bars{grid-template-columns:1fr} }

/* ── 投票（Xのポール型・選択式だけ。色はメイン1色＋グレー） ── */
.tvdb .tv-vote,.tv-vote{background:#fff;box-shadow:0 0 0 1px #E6E6E6;border-radius:8px;padding:22px 24px 18px;margin:18px 0 0;font-family:inherit}
/* .tvdb button{box-shadow:none}（0,1,1）に負けないよう (0,2,0) で黒い枠を書く（⑪a） */
.tvdb .tv-vote__opt{box-shadow:inset 0 0 0 2px #111}
.tvdb .tv-vote__peek{box-shadow:inset 0 0 0 2px #111}
.tvdb .tv-vote+.tvdb-filters,.tvdb .tv-vote+.tvdb-listhead{margin-top:18px}
.tv-vote__lb{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:15px;font-weight:800;color:var(--tv-navy,#111111);margin:0 0 6px}
.tv-vote__tag{display:inline-block;font-size:11.5px;font-weight:700;color:#CD001A;background:#fff;box-shadow:inset 0 0 0 1px #CD001A;border-radius:999px;padding:4px 10px}
.tv-vote__q{font-size:17px;font-weight:800;line-height:1.5;color:var(--tv-ink,#111111);margin:0 0 12px}
.tv-vote__opts{display:grid;gap:8px}
.tv-vote__opt{position:relative;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;width:100%;text-align:left;font-size:15px;font-weight:700;color:var(--tv-navy,#111111);background:#fff;border:0;box-shadow:inset 0 0 0 2px #111;border-radius:999px;padding:12px 18px;cursor:pointer;overflow:hidden;transition:transform .15s,background .15s,color .15s}
.tv-vote__opt:hover:not(:disabled){transform:translateY(-1px);background:#111;color:#fff}
.tv-vote__opt:disabled{cursor:default}
.tv-vote__fill{position:absolute;left:0;top:0;bottom:0;width:0;background:#FFF3B8;border-radius:999px;transition:width .4s}
.tv-vote__lbl,.tv-vote__pct,.tv-vote__n{position:relative;z-index:1}
.tv-vote__pct,.tv-vote__n{display:none;font-variant-numeric:tabular-nums}
.tv-vote__pct i{font-style:normal;font-size:.8em;margin-left:1px}
.tv-vote__n{font-size:12px;color:var(--tv-sub,#666666)}
.tv-vote__n::after{content:"人"}
.tv-vote.is-open .tv-vote__fill{width:calc(var(--p,0) * 1%)}
.tv-vote.is-open .tv-vote__pct,.tv-vote.is-open .tv-vote__n{display:inline}
.tv-vote__opt.is-mine::after{content:"あなた";position:absolute;right:14px;top:-7px;font-size:10px;font-weight:800;color:#fff;background:var(--tv-dark,#111111);border-radius:999px;padding:2px 8px;z-index:2}
.tv-vote.is-open .tv-vote__opt.is-mine{outline:3px solid var(--tv-dark,#111111);outline-offset:-3px}
.tv-vote__foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:12px 0 0;font-size:13.5px;color:var(--tv-sub,#666666)}
.tv-vote__cnt b{font-size:17px;color:var(--tv-ink,#111111);font-variant-numeric:tabular-nums;margin-right:2px}
.tv-vote__peek{font-size:13px;font-weight:700;color:var(--tv-dark,#111111);background:#fff;border:0;box-shadow:inset 0 0 0 2px #111;border-radius:999px;padding:7px 14px;cursor:pointer;transition:background .15s,color .15s}
.tv-vote__peek:hover{background:#111;color:#fff}
.tv-vote__note{font-size:12.5px;color:var(--tv-sub,#666666);margin:8px 0 0}
.tv-vote__msg{margin:10px 0 0;font-size:14px;font-weight:700;border-radius:8px;padding:10px 14px;background:#fff}
.tv-vote__msg.is-err{background:#FBE2E2;color:#B3261E}
.tv-vote [hidden]{display:none!important}
@media (max-width:680px){
  .tv-vote{border-radius:8px;padding:16px 14px 12px}
  .tv-vote__q{font-size:16px}
  .tv-vote__opt{font-size:14px;padding:11px 14px}
}

/* ── 器の直下（章の外）に置いたリンクや表は、白い面の上なので白い箱＋影で縁取る ── */
.tvdb>.tvdb-links li a,.tvdb>.tvdb-own,.tvdb>.tvdb-quote{background:var(--tv-paper);box-shadow:var(--tv-shadow)}
.tvdb>.tvdb-det>summary{background:var(--tv-surface)}
.tvdb>.tvdb-links li a:hover{background:var(--tv-or-bg)}
/* 比べる表の行見出しの補足（small）は名前の下に */
.tvdb .tvdb-cmp tbody th a small,.tvdb .tvdb-cmp tbody th span small{display:block;font-size:12px;font-weight:500;color:var(--tv-sub);line-height:1.4}
/* 表の中のバッジは白いマスの上なので薄い緑 */
.tvdb .tvdb-tbl .tvdb-badge{background:var(--tv-chip)}
/* ヒーローの検索がサイト検索（form）のとき：入力欄＋ボタン */
.tvdb .tvdb-search--form{display:flex;gap:8px;align-items:center}
.tvdb .tvdb-search--form .tvdb-search__in{flex:1 1 auto;min-width:0}
.tvdb .tvdb-search__btn{flex:0 0 auto;font-size:15px;font-weight:800;color:#fff;background:var(--tv-dark);border:0;border-radius:8px;padding:15px 22px;cursor:pointer;transition:background .15s}
.tvdb .tvdb-search__btn:hover{background:var(--tv-deep)}
@media (max-width:680px){ .tvdb .tvdb-search__btn{padding:12px 14px;font-size:14px} }