@charset "utf-8";
/* hkdb-pop 2026-09-13 */
/* ============================================================
   今日どこいく？ データベース型ページ 共通の見た目
   jstork19_custom/assets/db.css   2026-09-12（2026-09-13 ポップ化＝38のチャット）
   ------------------------------------------------------------
   ★土台チャットだけが触る。DBごとの見た目が要るときは assets/db-<key>.css を別に置く。
   ★2026-09-13 ポップ化。/airline/ で藤井さんと決めた見た目（db-airline.css の21:23の版）を器へ移して
     7枚＋ハブ＋個別ページに一度に効かせた。決まりは DB意匠_20260912/ポップ化の決まり_20260913.md（勝手に変えない）。
     見本はトラベルjp／じゃらん。
   ・青 #0075E0 ＝ 押せるもの・選んでいるもの・表の見出し。薄い青 #EDF6FF・#D0E9FF の面。（2026-09-28 におでかけの7色へ入れ替え）角丸14〜22px（ボタンとバッジはピル）
   ・オレンジは棒の塗り（薄く #FFDFAE）だけ。オレンジの上に白い文字を置かない
   ・細い線を使わない。面（うすい塗り）と余白で区切る。1pxの罫線も色レールも無し
   ・影ゼロ・白ベース固定（ダークモードのCSSは入れない）
   ・意味の色 … できる＝緑／できない＝赤／条件つき＝橙 はそのまま
   ・本文16px／行間1.8（新デザインの記事本文と同じ）。入力欄は16px（それ以下だとスマホで拡大される）
   ・.entry-content を使わない。テーマの !important（#main .entry-content p など）の外で組む
   ============================================================ */

.hkdb{
  /* 2026-09-28 おでかけの7色へ入れ替えた（②のチャット）。値は kami-ain.css の :root と同じ考え方で、
     白との明るさの差を役ごとにそろえてある（文字 4.55／薄い面 1.09／少し濃い面 1.25）。
     早見表・比較表は「調べる」ページなので、骨格の色は青にそろえる。押せるものは青、章の帯は橙のまま */
  --hk-ink:#16232D; --hk-sub:#5C7080; --hk-link:#0075E0; --hk-dark:#0075E0;
  --hk-paper:#ffffff; --hk-surface:#EDF6FF; --hk-chip:#D0E9FF;
  --hk-ok-bg:#E2FBEE; --hk-ok:#10874B;
  --hk-ng-bg:#FFF3F2; --hk-ng:#EC0D00;
  --hk-cond-bg:#FFF3E6; --hk-cond:#B26100;
  /* navy＝見出しと社名の墨／sky＝表の偶数行と格子／or＝章の帯とFAQのQ／or-bg＝表の行のhover */
  --hk-navy:#101820; --hk-sky:#EDF6FF; --hk-sky2:#D0E9FF;
  --hk-or:#FF8A00; --hk-or2:#FFB84D; --hk-or-bg:#FFF3E6;
  /* 棒の色。2026-09-13 20:30 藤井さん「重さのところが目立ちすぎて見にくい」→ 塗りを薄いオレンジ・下地をごく薄い灰青に */
  --hk-fill:#FFDFAE; --hk-fill2:#FFE9C8; --hk-track:#EEF2F6;
  --hk-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='%230075E0' 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");
  --hk-icon-plane:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z'/%3E%3C/svg%3E");
  --hk-num:"Barlow",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans CJK JP","Yu Gothic",sans-serif;
  --hk-r:14px;
  max-width:980px;margin:0 auto;padding:0 0 8px;
  font-size:16px;line-height:1.8;color:var(--hk-ink);
  -webkit-font-smoothing:antialiased;word-break:normal;overflow-wrap:anywhere;
}
.hkdb *,.hkdb *::before,.hkdb *::after{box-sizing:border-box}

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

/* ── パンくず ── */
.hkdb .hkdb-crumb{display:flex;flex-wrap:wrap;gap:7px;align-items:center;padding:11px 0;font-size:12px;color:var(--hk-sub)}
.hkdb .hkdb-crumb a{color:var(--hk-sub)}
.hkdb .hkdb-crumb a:hover{color:var(--hk-link)}
.hkdb .hkdb-crumb__sep{opacity:.5}
.hkdb .hkdb-crumb__now{color:var(--hk-ink)}

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

/* ── 絞り込み ── */
.hkdb .hkdb-filters{background:var(--hk-surface);border-radius:18px;padding:18px 16px 6px;margin:0 0 14px}
.hkdb .hkdb-frow{margin:0 0 14px}
.hkdb .hkdb-chips{display:flex;flex-wrap:wrap;gap:8px}
.hkdb .hkdb-chip{font-size:14px;font-weight:600;line-height:1.4;padding:9px 16px;border:0;border-radius:999px;background:var(--hk-paper);color:var(--hk-navy);cursor:pointer;transition:background .15s,color .15s,transform .15s}
.hkdb .hkdb-chip:hover{background:var(--hk-chip);transform:translateY(-1px)}
.hkdb .hkdb-chip[aria-pressed="true"]{background:var(--hk-dark);color:#fff;font-weight:700}
.hkdb .hkdb-select{font-size:16px;padding:12px 40px 12px 14px;border:0;border-radius:999px;background-color:var(--hk-paper);color:var(--hk-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='%235C7080' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}

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

/* ── 一覧 ── */
.hkdb .hkdb-grp{margin:0 0 6px}
.hkdb .hkdb-grp__t{display:flex;align-items:baseline;gap:8px;font-size:19px;font-weight:800;margin:30px 0 12px}
.hkdb .hkdb-grp__n{font-size:13px;font-weight:600;color:var(--hk-sub);font-family:var(--hk-num)}
.hkdb .hkdb-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）で収まる */
.hkdb .hkdb-cards>.hkdb-card{min-width:0}
.hkdb .hkdb-card{background:var(--hk-surface);border-radius:20px;padding:20px 18px 18px;scroll-margin-top:96px;transition:transform .18s,background .18s}
.hkdb .hkdb-card:hover{transform:translateY(-2px)}   /* マウスを当てると少し浮く */
.hkdb .hkdb-card__name{font-size:21px;font-weight:800;line-height:1.45;color:var(--hk-navy);margin:0 0 10px}
.hkdb .hkdb-card__name a{color:inherit}
.hkdb .hkdb-card__name a:hover{color:var(--hk-link)}
.hkdb .hkdb-card__name small{display:block;font-size:13px;font-weight:500;color:var(--hk-sub);margin-top:2px}
.hkdb .hkdb-badges{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.hkdb .hkdb-badge{display:inline-block;font-size:13px;font-weight:700;line-height:1.4;padding:6px 13px;border-radius:999px;background:#fff;color:var(--hk-navy)}
.hkdb .hkdb-badge.is-ok{background:var(--hk-ok-bg);color:var(--hk-ok)}
.hkdb .hkdb-badge.is-ng{background:var(--hk-ng-bg);color:var(--hk-ng)}
.hkdb .hkdb-badge.is-cond{background:var(--hk-cond-bg);color:var(--hk-cond)}
.hkdb .hkdb-badges--big .hkdb-badge{font-size:16px;padding:10px 16px}
.hkdb .hkdb-rows{background:var(--hk-paper);border-radius:var(--hk-r);padding:12px 15px;margin:0 0 12px;font-size:15px}
.hkdb .hkdb-row{display:flex;gap:14px;align-items:baseline}
.hkdb .hkdb-row+.hkdb-row{margin-top:8px}
.hkdb .hkdb-row dt{flex:0 0 5.6em;font-size:13px;font-weight:700;color:var(--hk-sub);line-height:1.75}
.hkdb .hkdb-row dd{flex:1 1 auto;min-width:0;color:var(--hk-ink);line-height:1.75}
.hkdb .hkdb-warn{background:var(--hk-cond-bg);color:var(--hk-cond);border-radius:var(--hk-r);padding:12px 15px;margin:0 0 12px;font-size:14px;line-height:1.8}
.hkdb .hkdb-warn b{font-weight:800;color:var(--hk-cond)}
.hkdb .hkdb-note{font-size:14px;color:#3F566E;line-height:1.8;margin:0 0 12px}
.hkdb .hkdb-det{margin:0 0 12px}
.hkdb .hkdb-det summary{display:block;font-size:14px;font-weight:700;color:var(--hk-link);background:var(--hk-paper);border-radius:999px;padding:12px 18px;transition:background .15s}
.hkdb .hkdb-det summary:hover{background:var(--hk-chip)}
.hkdb .hkdb-det summary::after{content:" ▼";font-size:10px}
.hkdb .hkdb-det[open]>summary::after{content:" ▲"}
.hkdb .hkdb-det__in{padding:14px 2px 2px;font-size:14px}
.hkdb .hkdb-det__in .hkdb-own{padding:0;margin:0 0 10px;background:none}
/* 「〜を見る →」の青いピル。<a> なので .hkdb-wrap .hkdb a（0,2,1）に負けないよう並べて書く。grid の中で伸びないよう justify-self:start */
.hkdb-wrap .hkdb .hkdb-more,.hkdb .hkdb-more{display:inline-block;justify-self:start;width:auto;border-radius:999px;background:var(--hk-dark);color:#fff;padding:9px 18px;font-size:14px;font-weight:700;margin:6px 12px 0 0;transition:transform .15s,background .15s}
.hkdb-wrap .hkdb .hkdb-more:hover,.hkdb .hkdb-more:hover{background:#004F98;color:#fff;text-decoration:none;transform:translateY(-1px)}
.hkdb-wrap .hkdb .hkdb-more::after,.hkdb .hkdb-more::after{content:" →";display:inline}
.hkdb .hkdb-empty{background:var(--hk-surface);border-radius:var(--hk-r);padding:24px;text-align:center;color:var(--hk-sub);margin:0 0 12px}

/* ── 章・本文 ── */
.hkdb .hkdb-sec{background:var(--hk-surface);border-radius:20px;padding:24px 22px;margin:24px 0 0;scroll-margin-top:84px}
/* 章の見出し。左にオレンジの縦帯（8×26px） */
.hkdb .hkdb-sec__t{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:800;color:var(--hk-navy);margin:0 0 14px}
.hkdb .hkdb-sec__t::before{content:"";display:inline-block;flex:0 0 auto;width:8px;height:26px;border-radius:4px;background:var(--hk-or)}
.hkdb .hkdb-sec__lead{font-size:15.5px;line-height:1.85;margin:0 0 12px}
.hkdb .hkdb-p{font-size:15.5px;line-height:1.85;margin:0 0 10px}
.hkdb .hkdb-p:last-child{margin-bottom:0}
.hkdb .hkdb-h3{font-size:16.5px;font-weight:800;margin:18px 0 7px;scroll-margin-top:84px}
.hkdb .hkdb-h4{font-size:15px;font-weight:800;margin:14px 0 6px}
.hkdb .hkdb-list{margin:0 0 10px;padding-left:1.3em}
.hkdb .hkdb-list li{list-style:disc;margin:0 0 6px;font-size:15px;line-height:1.8}
.hkdb .hkdb-list li::marker{color:var(--hk-sub)}
.hkdb .hkdb-sec .hkdb-rows,.hkdb .hkdb-sec .hkdb-badges{margin-bottom:12px}
.hkdb .hkdb-jump{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 4px}
.hkdb .hkdb-jump__lb{font-size:12px;color:var(--hk-sub);margin-right:4px}
.hkdb .hkdb-jump a{font-size:13px;font-weight:600;background:var(--hk-chip);border-radius:999px;padding:7px 14px;color:var(--hk-navy);transition:background .15s,transform .15s}
.hkdb .hkdb-jump a:hover{background:var(--hk-sky2);text-decoration:none;transform:translateY(-1px)}

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

/* ── FAQ ── */
.hkdb .hkdb-qa{background:var(--hk-paper);border-radius:16px;padding:16px 18px 14px 18px;margin:0 0 10px}
.hkdb .hkdb-qa:last-child{margin-bottom:0}
/* 問いの頭に「Q」のオレンジの丸（文字は紺。オレンジの上に白は置かない） */
.hkdb .hkdb-qa__q{display:flex;align-items:flex-start;gap:10px;font-size:16px;font-weight:800;color:var(--hk-navy);margin:0 0 6px;line-height:1.5}
.hkdb .hkdb-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(--hk-or);color:var(--hk-navy);font-family:var(--hk-num);font-size:14px;font-weight:800;margin-top:1px}
.hkdb .hkdb-qa__a{font-size:15px;line-height:1.8;margin:0;padding-left:36px}

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

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

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

/* ── /db/ のハブ ── */
.hkdb .hkdb-hub{display:grid;gap:14px;margin:0 0 8px}
.hkdb .hkdb-hub__a{display:block;background:var(--hk-surface);border-radius:var(--hk-r);padding:20px 22px;color:var(--hk-ink)}
.hkdb .hkdb-hub__a:hover{background:var(--hk-chip);text-decoration:none}
.hkdb .hkdb-hub__t{display:block;font-size:20px;font-weight:800;line-height:1.45}
.hkdb .hkdb-hub__d{display:block;font-size:14.5px;line-height:1.75;color:var(--hk-sub);margin-top:6px}
.hkdb .hkdb-hub__k{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px}
.hkdb .hkdb-hub__k span{font-size:13px;color:var(--hk-sub)}
.hkdb .hkdb-hub__k b{font-family:var(--hk-num);font-size:18px;font-weight:700;color:var(--hk-ink);margin-right:4px}
.hkdb .hkdb-hub__m{display:block;font-size:12.5px;color:var(--hk-sub);margin-top:8px}
.hkdb .hkdb-hub__i .hkdb-links--chips{margin-top:10px}
.hkdb .hkdb-hub__i .hkdb-links--chips li a{background:var(--hk-surface)}
.hkdb .hkdb-hub__i .hkdb-links--chips li a:hover{background:var(--hk-chip)}

/* ── そのほか ── */
.hkdb .hkdb-back{margin:22px 0 0;font-size:15px;font-weight:700}
.hkdb .hkdb-editor{font-size:12.5px;color:var(--hk-sub);margin:24px 0 0}
.hkdb .hkdb-old .hkdb{padding:12px 0}

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

/* ============================================================
   ここから下は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は入れない（白ベース固定）
   ★色は意味だけに使う／影ゼロ／角丸は上の変数（--hk-r:14px・2026-09-13 ポップ化でピルと20pxも）
   ★詳細度の落とし穴（本番の実体に当てて分かったもの。設計書のCSSのままでは効かない）
     ・表の min-width は上に .hkdb .hkdb-own .hkdb-tbl（0,3,0）がある
       → 変えるときは .hkdb .hkdb-tbl.hkdb-xxx（0,3,0）で後ろに書く
     ・a の色と下線は上に .hkdb-wrap .hkdb a（0,2,1）がある
       → リンクの部品は .hkdb-wrap .hkdb .hkdb-xxx（0,3,1）を並べて書く
     ・th は上に .hkdb .hkdb-tbl th{background:濃い面;color:#fff;white-space:nowrap}（0,2,1）がある
       → tbody の見出しセルは文字色と折り返しを戻す
   ============================================================ */

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

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

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

/* ── 3-5 順位の印（青に白い数字。1〜3位は濃い青。金銀銅もオレンジも使わない）
      2026-09-13 20:30 藤井さん「オレンジじゃない方がいい」「番号が見にくい」→ 全部青に白い数字。薄い水色の面の上でも読める ── */
.hkdb .hkdb-rank{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:28px;height:28px;border-radius:999px;background:var(--hk-dark);font-family:var(--hk-num);font-size:13.5px;font-weight:700;color:#fff;line-height:1}
.hkdb .hkdb-rank--top{background:#004F98;color:#fff}

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

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

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

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

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

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

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

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

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