/* 記事本文の表（2026-10-10「記事内テーブルの制作ルール」）
 * 表示時に apps/products/article_tables.py が付ける .bk-tbl だけを対象にする（サイトの他の表には効かせない）。
 * article-css.css の古い全体指定（.bk-mc-wrap * の max-width:100% / overflow-wrap:anywhere など）を
 * 表の中だけ打ち消すため、ここは .bk-mc-wrap .bk-tbl から始めて !important を付けている。
 *
 *  - 文字 PC 16px・スマホ 15px、行間 1.6、本文色 #1f2937。見出し行 #f1f5f9 / #0f172a 太字。行は白と #f8fafc の交互。罫線 #EBD9D6 1px。
 *  - 列は中身に合わせた幅を確保し、足りなければ表の中だけ横スライド。ページ全体は横に動かさない。
 *  - 左端の名前・項目の列は横スライド中も固定（スマホは 100〜128px・画面の35%以内）。
 */
.bk-mc-wrap .bk-tbl,
.bk-tbl {
  margin: 20px 0 28px !important;
  max-width: 100% !important;
  min-width: 0 !important;
  line-height: 1.6 !important;
}
.bk-mc-wrap .bk-tbl .bk-tbl-title {
  margin: 0 0 8px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1F1418 !important;
  line-height: 1.5 !important;
}
/* caption は読み上げ用に残し、見た目は上の .bk-tbl-title で出す（横スライドで一緒に動かないように） */
.bk-mc-wrap .bk-tbl caption.bk-tbl-cap {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
}

/* 注記などと一緒に古い枠（.bk-mc-table-scroll）に入っていた表は、古い枠の見た目を消す */
.bk-mc-wrap .bk-mc-table-scroll:has(> .bk-tbl) {
  overflow: visible !important; border: 0 !important; box-shadow: none !important; background: none !important;
  border-radius: 0 !important; line-height: inherit !important; margin: 0 !important;
}

/* 「左右にスワイプして比較できます」（はみ出す表だけ article-table.js が出す）。右寄せのボタン。押すと1列右へ、右端では先頭へ戻る */
.bk-mc-wrap .bk-tbl .bk-tbl-ctrl {
  display: flex !important; justify-content: flex-end !important; margin: 0 0 8px !important;
}
.bk-mc-wrap .bk-tbl .bk-tbl-ctrl[hidden] { display: none !important; }
.bk-mc-wrap .bk-tbl .bk-tbl-hint {
  display: inline-flex !important; align-items: center !important; gap: 4px !important;
  min-height: 30px !important; padding: 0 12px !important; margin: 0 !important;
  font-size: 12px !important; font-weight: 600 !important; line-height: 1 !important; color: #A0606A !important;
  background: #FBF6F4 !important; border: 1px solid #F2DEE0 !important; border-radius: 999px !important;
  box-shadow: 0 1px 2px rgba(60,30,40,.06) !important;
  cursor: pointer !important; transition: background .15s, border-color .15s !important;
}
.bk-mc-wrap .bk-tbl .bk-tbl-hint:hover { background: #F7EAE7 !important; border-color: #E5BFC3 !important; }
.bk-mc-wrap .bk-tbl .bk-tbl-hint:active { transform: translateY(1px); }
.bk-mc-wrap .bk-tbl .bk-tbl-hint:focus-visible { outline: 3px solid #C97B84 !important; outline-offset: 2px !important; }
.bk-mc-wrap .bk-tbl .bk-tbl-hint-ic { font-size: 13px !important; line-height: 1 !important; }

/* 横スライドの枠。表の高さは中身のまま（縦はページのスクロールで読む） */
.bk-mc-wrap .bk-tbl .bk-tbl-frame { position: relative !important; max-width: 100% !important; }
.bk-mc-wrap .bk-tbl .bk-tbl-scroll {
  display: block !important; width: 100% !important; max-width: 100% !important;
  overflow-x: auto !important; overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #F2DEE0 !important; border-radius: 14px !important; background: #fff !important;
  box-shadow: 0 1px 2px rgba(60,30,40,.04), 0 4px 12px rgba(60,30,40,.04) !important;
  scrollbar-width: thin; scrollbar-color: #E5BFC3 #FBF6F4;
  margin: 0 !important; padding: 0 !important; line-height: 1.6 !important;
}
.bk-mc-wrap .bk-tbl .bk-tbl-scroll::-webkit-scrollbar { height: 8px; }
.bk-mc-wrap .bk-tbl .bk-tbl-scroll::-webkit-scrollbar-track { background: #FBF6F4; }
.bk-mc-wrap .bk-tbl .bk-tbl-scroll::-webkit-scrollbar-thumb { background: #E5BFC3; border-radius: 4px; }
.bk-mc-wrap .bk-tbl .bk-tbl-scroll:focus-visible { outline: 3px solid #C97B84 !important; outline-offset: 2px !important; }
/* 右（左）に続きがあるときだけ、端に薄い影（文字や操作の邪魔をしない） */
.bk-mc-wrap .bk-tbl .bk-tbl-frame::after {
  content: ""; position: absolute; top: 1px; right: 1px; bottom: 1px; width: 24px;
  border-radius: 0 14px 14px 0; pointer-events: none; opacity: 0; transition: opacity .15s;
  background: linear-gradient(to left, rgba(120, 60, 70, .12), rgba(120, 60, 70, 0));
}
.bk-mc-wrap .bk-tbl.has-right .bk-tbl-frame::after { opacity: 1; }

/* 表 */
.bk-mc-wrap .bk-tbl table.bk-tbl-table {
  display: table !important;
  width: 100% !important; min-width: 100% !important; max-width: none !important;
  table-layout: auto !important;
  border-collapse: separate !important; border-spacing: 0 !important;
  margin: 0 !important; border: 0 !important; background: #fff !important;
  font-size: 16px !important; line-height: 1.6 !important; color: #3A2E33 !important;
}
.bk-mc-wrap .bk-tbl table.bk-tbl-table th,
.bk-mc-wrap .bk-tbl table.bk-tbl-table td {
  padding: 15px 18px !important;
  max-width: none !important;
  font-size: 16px !important; line-height: 1.6 !important; color: #3A2E33 !important;
  text-align: left !important; vertical-align: top !important;
  white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; word-wrap: normal !important;
  border: 0 !important; border-bottom: 1px solid #EBD9D6 !important;
  background: #fff !important;
  min-width: 0;
}
.bk-mc-wrap .bk-tbl table.bk-tbl-table * {
  max-width: none !important; word-break: normal !important; overflow-wrap: normal !important; word-wrap: normal !important;
}
.bk-mc-wrap .bk-tbl table.bk-tbl-table tbody tr:nth-child(even) > * { background: #FDFBF8 !important; }
.bk-mc-wrap .bk-tbl table.bk-tbl-table tbody tr:last-child > * { border-bottom: 0 !important; }
.bk-mc-wrap .bk-tbl table.bk-tbl-table thead th,
.bk-mc-wrap .bk-tbl table.bk-tbl-table thead td {
  background: #FBF6F4 !important; color: #1F1418 !important; font-weight: 700 !important; font-size: 15px !important;
  vertical-align: middle !important; text-transform: none !important; letter-spacing: 0 !important;
}
.bk-mc-wrap .bk-tbl table.bk-tbl-table tbody th { color: #1F1418 !important; font-weight: 700 !important; }
.bk-mc-wrap .bk-tbl table.bk-tbl-table tr:hover > * { transition: none !important; }
/* 本文の古い指定（1列目だけ太字・最終列だけ中央揃えなど）を打ち消し、強調は書いた所だけにする */
.bk-mc-wrap .bk-tbl table.bk-tbl-table tbody td { font-weight: 400 !important; }
.bk-mc-wrap .bk-tbl table.bk-tbl-table strong,
.bk-mc-wrap .bk-tbl table.bk-tbl-table b { font-weight: 700 !important; color: inherit !important; }
.bk-mc-wrap .bk-tbl table.bk-tbl-table a {
  text-decoration: underline !important; text-underline-offset: 3px !important; text-decoration-thickness: 1px !important;
  word-break: normal !important; overflow-wrap: normal !important;
}
.bk-mc-wrap .bk-tbl table.bk-tbl-table img { display: inline-block !important; margin: 0 !important; }
.bk-mc-wrap .bk-tbl table.bk-tbl-table p { margin: 0 0 .5em !important; font-size: inherit !important; line-height: inherit !important; }
.bk-mc-wrap .bk-tbl table.bk-tbl-table p:last-child { margin-bottom: 0 !important; }

/* 改行させない短いまとまり（数値＋単位・型番・短い判定語）。長い説明のセルには付けない */
.bk-mc-wrap .bk-tbl table.bk-tbl-table .bk-nw { white-space: nowrap !important; }
/* 長いURLなど、どうしても分けてよい文字列だけ */
.bk-mc-wrap .bk-tbl table.bk-tbl-table .bk-tbl-break { overflow-wrap: anywhere !important; word-break: break-all !important; }

/* 列の揃え。幅は .bk-w-NNN（表示側が中身の長さから決める）。
   セルの中に高さ0の線を置いて「その幅より細くならない」ようにする（td の min-width は効かないブラウザがあるため） */
.bk-mc-wrap .bk-tbl table.bk-tbl-table .bk-c-num  { text-align: right !important; font-variant-numeric: tabular-nums; }
.bk-mc-wrap .bk-tbl table.bk-tbl-table .bk-c-mark { text-align: center !important; }
.bk-mc-wrap .bk-tbl table.bk-tbl-table [class*="bk-w-"]::before { content: ""; display: block; height: 0; }
.bk-mc-wrap .bk-tbl table.bk-tbl-table .bk-w-96::before { width: 96px; }
.bk-mc-wrap .bk-tbl table.bk-tbl-table .bk-w-112::before { width: 112px; }
.bk-mc-wrap .bk-tbl table.bk-tbl-table .bk-w-128::before { width: 128px; }
.bk-mc-wrap .bk-tbl table.bk-tbl-table .bk-w-144::before { width: 144px; }
.bk-mc-wrap .bk-tbl table.bk-tbl-table .bk-w-160::before { width: 160px; }
.bk-mc-wrap .bk-tbl table.bk-tbl-table .bk-w-176::before { width: 176px; }
.bk-mc-wrap .bk-tbl table.bk-tbl-table .bk-w-192::before { width: 192px; }
.bk-mc-wrap .bk-tbl table.bk-tbl-table .bk-w-208::before { width: 208px; }
.bk-mc-wrap .bk-tbl table.bk-tbl-table .bk-w-224::before { width: 224px; }
.bk-mc-wrap .bk-tbl table.bk-tbl-table .bk-w-240::before { width: 240px; }
.bk-mc-wrap .bk-tbl table.bk-tbl-table .bk-w-256::before { width: 256px; }
.bk-mc-wrap .bk-tbl table.bk-tbl-table .bk-w-272::before { width: 272px; }
.bk-mc-wrap .bk-tbl table.bk-tbl-table .bk-w-288::before { width: 288px; }
.bk-mc-wrap .bk-tbl table.bk-tbl-table .bk-w-304::before { width: 304px; }
.bk-mc-wrap .bk-tbl table.bk-tbl-table .bk-w-320::before { width: 320px; }

/* 左端の列を固定（横スライド中も行の名前が見える）。固定セルは不透明・右に境界線 */
.bk-mc-wrap .bk-tbl table.has-key .bk-c-key {
  position: sticky !important; left: 0 !important; z-index: 2 !important;
  border-right: 1px solid #EBD9D6 !important;
}
.bk-mc-wrap .bk-tbl table.has-key thead .bk-c-key { z-index: 3 !important; }
.bk-mc-wrap .bk-tbl.has-left table.has-key .bk-c-key { box-shadow: 6px 0 8px -6px rgba(120, 60, 70, .18) !important; }

/* 幅は画面ではなく「表が使える幅」で決める（PCでも本文の列が狭いと同じ扱い）。
   狭いときは固定列を 96〜128px・表の幅の30%以内にし、説明の列も 240px までにして1画面に2列以上見えるようにする */
.bk-mc-wrap .bk-tbl { container-type: inline-size; container-name: bktbl; }
@container bktbl (max-width: 600px) {
  .bk-mc-wrap .bk-tbl table.bk-tbl-table .bk-c-key::before { width: clamp(96px, 30cqw, 128px) !important; }
  .bk-mc-wrap .bk-tbl table.bk-tbl-table .bk-w-256::before{width:240px !important;}
  .bk-mc-wrap .bk-tbl table.bk-tbl-table .bk-w-272::before{width:240px !important;}
  .bk-mc-wrap .bk-tbl table.bk-tbl-table .bk-w-288::before{width:240px !important;}
  .bk-mc-wrap .bk-tbl table.bk-tbl-table .bk-w-304::before{width:240px !important;}
  .bk-mc-wrap .bk-tbl table.bk-tbl-table .bk-w-320::before{width:240px !important;}
  .bk-mc-wrap .bk-tbl table.bk-tbl-table th,
  .bk-mc-wrap .bk-tbl table.bk-tbl-table td { padding: 13px 14px !important; }
}

@media (max-width: 640px) {
  .bk-mc-wrap .bk-tbl table.bk-tbl-table,
  .bk-mc-wrap .bk-tbl table.bk-tbl-table th,
  .bk-mc-wrap .bk-tbl table.bk-tbl-table td { font-size: 15px !important; }
  .bk-mc-wrap .bk-tbl table.bk-tbl-table th,
  .bk-mc-wrap .bk-tbl table.bk-tbl-table td { padding: 13px 14px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .bk-mc-wrap .bk-tbl .bk-tbl-frame::after { transition: none; }
}

/* 表の下の注意点・出典・条件（14px以上） */
.bk-mc-wrap .bk-tbl-note,
.bk-mc-wrap p.bk-tbl-note {
  margin: -16px 0 24px !important; font-size: 14px !important; line-height: 1.7 !important; color: #5C5256 !important;
}