/* ============================================================
   記事UI部品 v5（boostx-media/docs/ui-components-v5.md）
   - 層A（原稿の :::部品 → publish_articles.py）と層B（既存記事 → inc/content-ui.php）で同じ class を使う
   - すべて .bxmt .bx4-prose 配下。色は業界ごとに変わる --bx4-ac などの変数だけを使う（固定色なし）
   - 絵文字・アイコン画像は使わない。番号・線・枠・背景・CSS で描いた矢印だけで表す
   - JS なし。375/390/430/768/1280/1440px で横スクロール 0（固定幅を置かない・min-width:0）
   ============================================================ */

.bxmt .bx4-prose .bxu{--bxu-acs:color-mix(in srgb,var(--bx4-ac) 7%,#fff);--bxu-acl:color-mix(in srgb,var(--bx4-ac) 28%,#fff);margin:2.2em 0;min-width:0;max-width:100%}
.bxmt .bx4-prose :is(h2,h3,h4) + .bxu{margin-top:.7em}
.bxmt .bx4-prose .bxu + p{margin-top:0}
.bxmt .bx4-prose .bxu :is(ul,ol){margin:0;padding:0;list-style:none}
.bxmt .bx4-prose .bxu li{margin:0;line-height:1.8}
.bxmt .bx4-prose .bxu p{margin:0}
.bxmt .bx4-prose .bxu :is(p,li,dd,div){overflow-wrap:anywhere}
.bxmt .bx4-prose .bxu__ttl{margin:0 0 12px;font-family:var(--bx4-head);font-size:15px;font-weight:700;line-height:1.6;letter-spacing:.02em;color:var(--bx4-ac)}
.bxmt .bx4-prose .bxu__cap{margin-top:8px;font-size:13px;line-height:1.7;color:var(--bx4-mut)}
/* 部品の中の説明文（原稿の段落・入れ子の箇条書き） */
.bxmt .bx4-prose .bxu :is(.bxu-steps__d,.bxu-cards__d,.bxu-timeline__d,.bxu-cmp__d,.bxu-note__d) > * + *{margin-top:.5em}
.bxmt .bx4-prose .bxu :is(.bxu-steps__d,.bxu-cards__d,.bxu-timeline__d,.bxu-cmp__d) ul{padding-left:1.2em;list-style:disc}
.bxmt .bx4-prose .bxu :is(.bxu-steps__d,.bxu-cards__d,.bxu-timeline__d,.bxu-cmp__d) ol{padding-left:1.4em;list-style:decimal}
.bxmt .bx4-prose .bxu :is(.bxu-steps__d,.bxu-cards__d,.bxu-timeline__d,.bxu-cmp__d) li + li{margin-top:.2em}

/* ---------- 1. 手順 steps：番号バッジ＋縦のコネクタ線 ---------- */
.bxmt .bx4-prose .bxu-steps__l{counter-reset:none}
.bxmt .bx4-prose .bxu-steps__i{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;padding:0 0 22px}
.bxmt .bx4-prose .bxu-steps__i:last-child{padding-bottom:0}
.bxmt .bx4-prose .bxu-steps__i::before{content:"";position:absolute;left:21px;top:48px;bottom:4px;width:2px;background:var(--bxu-acl)}
.bxmt .bx4-prose .bxu-steps__i:last-child::before{display:none}
.bxmt .bx4-prose .bxu-steps__n{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--bx4-ac);color:#fff;font-family:var(--bx4-head);font-size:15px;font-weight:700;line-height:1;letter-spacing:.03em;font-variant-numeric:tabular-nums}
.bxmt .bx4-prose .bxu-steps__b{min-width:0;padding-top:9px}
.bxmt .bx4-prose .bxu-steps__h{margin:0 0 3px;font-family:var(--bx4-head);font-size:17px;font-weight:var(--bx4-hw);line-height:1.6;color:var(--bx4-ink)}
.bxmt .bx4-prose .bxu-steps__d{font-size:16px;line-height:1.85;color:var(--bx4-sub)}
.bxmt .bx4-prose .bxu-steps__b > .bxu-steps__d:first-child{color:var(--bx4-ink)}

/* ---------- 2. カード cards：PC 2 列・スマホ 1 列 ---------- */
.bxmt .bx4-prose .bxu-cards__l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.bxmt .bx4-prose .bxu-cards__i{min-width:0;padding:16px 18px 18px;border:1px solid var(--bx4-line);border-top:3px solid var(--bx4-ac);background:#fff}
.bxmt .bx4-prose .bxu-cards__h{margin:0 0 6px;font-family:var(--bx4-head);font-size:16px;font-weight:var(--bx4-hw);line-height:1.55;color:var(--bx4-ink)}
.bxmt .bx4-prose .bxu-cards__d{font-size:15px;line-height:1.8;color:var(--bx4-sub)}

/* ---------- 3. 時系列 timeline：左の縦線＋時点の丸 ---------- */
.bxmt .bx4-prose .bxu-timeline__l{position:relative}
.bxmt .bx4-prose .bxu-timeline__i{position:relative;padding:0 0 22px 30px}
.bxmt .bx4-prose .bxu-timeline__i:last-child{padding-bottom:0}
.bxmt .bx4-prose .bxu-timeline__i::before{content:"";position:absolute;left:0;top:6px;width:14px;height:14px;border:3px solid var(--bx4-ac);border-radius:50%;background:#fff;box-sizing:border-box}
.bxmt .bx4-prose .bxu-timeline__i::after{content:"";position:absolute;left:6px;top:22px;bottom:2px;width:2px;background:var(--bxu-acl)}
.bxmt .bx4-prose .bxu-timeline__i:last-child::after{display:none}
.bxmt .bx4-prose .bxu-timeline__t{margin:0 0 6px;font-family:var(--bx4-head);font-size:16px;font-weight:700;line-height:1.5;color:var(--bx4-ac)}
.bxmt .bx4-prose .bxu-timeline__d{font-size:15.5px;line-height:1.85;color:var(--bx4-ink)}
/* 表から作った時系列の「列見出し：値」 */
.bxmt .bx4-prose .bxu-kv{margin:0;display:grid;gap:6px}
.bxmt .bx4-prose .bxu-kv__r{display:grid;grid-template-columns:minmax(0,9em) minmax(0,1fr);gap:4px 14px;padding:8px 12px;background:var(--bx4-soft)}
.bxmt .bx4-prose .bxu-kv dt{margin:0;font-size:13px;font-weight:700;line-height:1.7;color:var(--bx4-mut)}
.bxmt .bx4-prose .bxu-kv dd{margin:0;font-size:15px;line-height:1.8;color:var(--bx4-ink)}

/* ---------- 4. 流れ flow：PC 横並び（4 工程まで）・それ以外は縦＋下向き矢印 ---------- */
.bxmt .bx4-prose .bxu-flow__l{display:flex;flex-direction:column;gap:22px}
.bxmt .bx4-prose .bxu-flow__i{position:relative;min-width:0;padding:12px 14px 12px 50px;border:1px solid var(--bx4-edge);background:#fff}
.bxmt .bx4-prose .bxu-flow__i:not(:last-child)::after{content:"";position:absolute;left:50%;bottom:-17px;margin-left:-8px;border-style:solid;border-width:10px 8px 0;border-color:var(--bx4-ac) transparent transparent}
.bxmt .bx4-prose .bxu-flow__n{position:absolute;left:12px;top:12px;display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--bx4-ink);color:#fff;font-size:13px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.bxmt .bx4-prose .bxu-flow__t{font-family:var(--bx4-head);font-size:15.5px;font-weight:var(--bx4-hw);line-height:1.6;color:var(--bx4-ink)}
.bxmt .bx4-prose .bxu-flow__s{margin-top:2px;font-size:14px;line-height:1.7;color:var(--bx4-sub)}
.bxmt .bx4-prose .bxu-flow__g{display:inline-block;margin-top:6px;padding:1px 8px;border:1px solid var(--bx4-edge);font-size:12px;font-weight:700;line-height:1.7;letter-spacing:.04em;color:var(--bx4-sub);background:var(--bx4-soft)}
.bxmt .bx4-prose .bxu-flow__g--ai{border-color:var(--bx4-ac);background:var(--bx4-ac);color:#fff}
.bxmt .bx4-prose .bxu-flow__g--hum{border-color:var(--bx4-ink);color:var(--bx4-ink);background:#fff}
.bxmt .bx4-prose .bxu-flow__g--gone{text-decoration:line-through;color:var(--bx4-mut)}
.bxmt .bx4-prose .bxu-flow__g--new{border-style:dashed;border-color:var(--bx4-ac);color:var(--bx4-ac);background:#fff}
.bxmt .bx4-prose .bxu-flow__i--ai{border-color:var(--bx4-ac);background:var(--bxu-acs)}
.bxmt .bx4-prose .bxu-flow__i--gone{border-style:dashed;background:var(--bx4-soft)}
.bxmt .bx4-prose .bxu-flow__i--gone .bxu-flow__t{color:var(--bx4-mut)}
@media (min-width:768px){
  .bxmt .bx4-prose .bxu-flow:not(.bxu-flow--v) .bxu-flow__l{flex-direction:row;gap:26px}
  .bxmt .bx4-prose .bxu-flow:not(.bxu-flow--v) .bxu-flow__i{flex:1 1 0;padding:40px 12px 14px}
  .bxmt .bx4-prose .bxu-flow:not(.bxu-flow--v) .bxu-flow__n{left:12px;top:10px}
  .bxmt .bx4-prose .bxu-flow:not(.bxu-flow--v) .bxu-flow__i:not(:last-child)::after{left:auto;right:-20px;top:50%;bottom:auto;margin:-8px 0 0;border-width:8px 0 8px 10px;border-color:transparent transparent transparent var(--bx4-ac)}
}

/* ---------- 5. 比較 compare / before-after（原稿の 2 節） ---------- */
.bxmt .bx4-prose .bxu-cmp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.bxmt .bx4-prose .bxu-before-after .bxu-cmp{grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr);gap:8px}
.bxmt .bx4-prose .bxu-cmp__c{min-width:0;padding:16px 18px 18px;border:1px solid var(--bx4-line);background:#fff}
.bxmt .bx4-prose .bxu-cmp__c--b{border-color:var(--bx4-ac);background:var(--bxu-acs)}
.bxmt .bx4-prose .bxu-compare .bxu-cmp__c--b{border-color:var(--bx4-line);background:#fff}
.bxmt .bx4-prose .bxu-cmp__h{margin:0 0 8px;padding-bottom:8px;border-bottom:1px solid var(--bx4-line);font-family:var(--bx4-head);font-size:15.5px;font-weight:700;line-height:1.5;color:var(--bx4-ink)}
.bxmt .bx4-prose .bxu-cmp__c--b .bxu-cmp__h{color:var(--bx4-ac)}
.bxmt .bx4-prose .bxu-compare .bxu-cmp__c--b .bxu-cmp__h{color:var(--bx4-ink)}
.bxmt .bx4-prose .bxu-cmp__d{font-size:15px;line-height:1.8;color:var(--bx4-sub)}
.bxmt .bx4-prose .bxu-cmp__arrow{align-self:center;justify-self:center;width:0;height:0;border-style:solid;border-width:9px 0 9px 12px;border-color:transparent transparent transparent var(--bx4-ac)}

/* ---------- 6. Before/After の表（既存記事の「現状／〜後」3 列表） ---------- */
.bxmt .bx4-prose .bxu-ba{border:1px solid var(--bx4-line)}
.bxmt .bx4-prose .bxu-ba__hd,.bxmt .bx4-prose .bxu-ba__r{display:grid;grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);column-gap:10px}
.bxmt .bx4-prose .bxu-ba--k .bxu-ba__hd,.bxmt .bx4-prose .bxu-ba--k .bxu-ba__r{grid-template-columns:minmax(0,.72fr) minmax(0,1fr) 18px minmax(0,1fr)}
.bxmt .bx4-prose .bxu-ba__hd{padding:10px 14px;background:var(--bx4-soft);border-bottom:2px solid var(--bx4-line);font-size:13px;font-weight:700;line-height:1.6;color:var(--bx4-sub)}
.bxmt .bx4-prose .bxu-ba__ha{color:var(--bx4-ac)}
.bxmt .bx4-prose .bxu-ba__r{padding:12px 14px;border-top:1px solid var(--bx4-line);font-size:14.5px;line-height:1.8}
.bxmt .bx4-prose .bxu-ba__r:first-child{border-top:0}
.bxmt .bx4-prose .bxu-ba__k{font-weight:700;color:var(--bx4-ink)}
.bxmt .bx4-prose .bxu-ba__b,.bxmt .bx4-prose .bxu-ba__a{min-width:0}
.bxmt .bx4-prose .bxu-ba__b{color:var(--bx4-sub)}
.bxmt .bx4-prose .bxu-ba__a{margin:-6px 0;padding:6px 10px;background:var(--bxu-acs);color:var(--bx4-ink)}
.bxmt .bx4-prose .bxu-ba__arrow{align-self:center;justify-self:center;width:0;height:0;border-style:solid;border-width:7px 0 7px 9px;border-color:transparent transparent transparent var(--bx4-ac)}
/* PC ではセルの列ラベルを隠す（見出し行があるので）。読み上げには残す */
.bxmt .bx4-prose .bxu-ba__l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 7. 判断 decision：条件 → 選ぶもの ---------- */
.bxmt .bx4-prose .bxu-decision__l{display:grid;gap:8px}
.bxmt .bx4-prose .bxu-decision__i{display:grid;grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr);gap:8px;align-items:stretch}
.bxmt .bx4-prose .bxu-decision__if{padding:10px 14px;background:var(--bx4-soft);font-size:15px;line-height:1.75;color:var(--bx4-ink)}
.bxmt .bx4-prose .bxu-decision__then{padding:10px 14px;border-left:3px solid var(--bx4-ac);background:var(--bxu-acs);font-size:15px;font-weight:700;line-height:1.75;color:var(--bx4-ink)}
.bxmt .bx4-prose .bxu-decision__i::before{content:"";order:1;align-self:center;justify-self:center;width:0;height:0;border-style:solid;border-width:8px 0 8px 11px;border-color:transparent transparent transparent var(--bx4-ac)}
.bxmt .bx4-prose .bxu-decision__if{order:0}
.bxmt .bx4-prose .bxu-decision__then{order:2}

/* ---------- 8. チェックリスト checklist：線で描いた四角＋チェック ---------- */
.bxmt .bx4-prose .bxu-check__l{border-top:1px solid var(--bx4-line)}
.bxmt .bx4-prose .bxu-check__i{position:relative;padding:10px 0 10px 34px;border-bottom:1px solid var(--bx4-line);font-size:15.5px;line-height:1.75}
.bxmt .bx4-prose .bxu-check__i::before{content:"";position:absolute;left:2px;top:13px;width:18px;height:18px;border:2px solid var(--bx4-ac);box-sizing:border-box;background:#fff}
.bxmt .bx4-prose .bxu-check__i::after{content:"";position:absolute;left:8px;top:15px;width:6px;height:10px;border:solid var(--bx4-ac);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* ---------- 9. 出典のある数字 numbers ---------- */
.bxmt .bx4-prose .bxu-num__l{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:12px}
.bxmt .bx4-prose .bxu-num__i{min-width:0;padding:14px 16px;border-top:3px solid var(--bx4-ac);background:var(--bx4-soft)}
.bxmt .bx4-prose .bxu-num__v{margin:0 0 4px;font-family:var(--bx4-head);font-size:28px;font-weight:700;line-height:1.25;letter-spacing:-.01em;color:var(--bx4-ac);font-variant-numeric:tabular-nums}
.bxmt .bx4-prose .bxu-num__d{font-size:14px;line-height:1.75;color:var(--bx4-sub)}

/* ---------- 10. 注意・補足・ポイント note / warn / point ---------- */
.bxmt .bx4-prose :is(.bxu-note,.bxu-warn,.bxu-point){padding:14px 18px;border-left:4px solid var(--bx4-edge);background:var(--bx4-soft)}
.bxmt .bx4-prose .bxu-point{border-left-color:var(--bx4-ac);background:var(--bxu-acs)}
.bxmt .bx4-prose .bxu-warn{border:1px solid var(--bx4-ac);border-left-width:4px;background:#fff}
.bxmt .bx4-prose .bxu-note__k{display:block;margin:0 0 4px;font-size:12.5px;font-weight:700;letter-spacing:.08em;color:var(--bx4-mut)}
.bxmt .bx4-prose :is(.bxu-warn,.bxu-point) .bxu-note__k{color:var(--bx4-ac)}
.bxmt .bx4-prose .bxu-note__d{font-size:15.5px;line-height:1.85;color:var(--bx4-ink)}

/* ---------- 11. 定義 definition ---------- */
.bxmt .bx4-prose .bxu-def{margin:0;padding:14px 0 0;border-top:2px solid var(--bx4-ink)}
.bxmt .bx4-prose .bxu-def dt{margin:0 0 4px;font-family:var(--bx4-head);font-size:18px;font-weight:var(--bx4-hw);line-height:1.5;color:var(--bx4-ink)}
.bxmt .bx4-prose .bxu-def dd{margin:0;font-size:16px;line-height:1.85;color:var(--bx4-sub)}
.bxmt .bx4-prose .bxu-def dd > * + *{margin-top:.5em}

/* ---------- 12. 階層 tree（2 階層まで） ---------- */
.bxmt .bx4-prose .bxu-tree > ul > li{padding:8px 0 8px;border-top:1px solid var(--bx4-line);font-weight:700}
.bxmt .bx4-prose .bxu-tree > ul > li:last-child{border-bottom:1px solid var(--bx4-line)}
.bxmt .bx4-prose .bxu-tree li ul{margin:6px 0 0 8px;padding:0 0 0 0;border-left:2px solid var(--bxu-acl);font-weight:400}
.bxmt .bx4-prose .bxu-tree li li{position:relative;padding:3px 0 3px 22px;font-size:15px;color:var(--bx4-sub)}
.bxmt .bx4-prose .bxu-tree li li::before{content:"";position:absolute;left:0;top:.95em;width:14px;height:2px;background:var(--bxu-acl)}

/* ---------- 13. 結論の引用 answer（blockquote のまま・控えめ） ---------- */
.bxmt .bx4-prose blockquote.bxu-answer{padding:14px 18px 14px 20px;border-left:5px solid var(--bx4-ac);background:var(--bx4-soft);background:color-mix(in srgb,var(--bx4-ac) 6%,#fff);font-size:17px;line-height:1.85;color:var(--bx4-ink)}
.bxmt .bx4-prose .bxu-answer__k{display:block;margin:0 0 4px;font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--bx4-ac)}

/* ---------- 14. スマホ（640px 以下） ---------- */
@media (max-width:640px){
  .bxmt .bx4-prose .bxu{margin:1.8em 0}
  .bxmt .bx4-prose .bxu-steps__i{grid-template-columns:36px minmax(0,1fr);column-gap:12px;padding-bottom:18px}
  .bxmt .bx4-prose .bxu-steps__i::before{left:17px;top:40px}
  .bxmt .bx4-prose .bxu-steps__n{width:36px;height:36px;font-size:13.5px}
  .bxmt .bx4-prose .bxu-steps__b{padding-top:5px}
  .bxmt .bx4-prose .bxu-steps__h{font-size:16px}
  .bxmt .bx4-prose .bxu-steps__d{font-size:15px}
  .bxmt .bx4-prose .bxu-cards__l{grid-template-columns:minmax(0,1fr)}
  .bxmt .bx4-prose .bxu-cards__i{padding:14px 16px 16px}
  .bxmt .bx4-prose .bxu-kv__r{grid-template-columns:minmax(0,1fr);gap:0}
  /* 比較は上下に。Before/After の矢印は下向き */
  .bxmt .bx4-prose .bxu-cmp,.bxmt .bx4-prose .bxu-before-after .bxu-cmp{grid-template-columns:minmax(0,1fr);gap:10px}
  .bxmt .bx4-prose .bxu-cmp__arrow{border-width:12px 9px 0;border-color:var(--bx4-ac) transparent transparent}
  /* Before/After の表：行ごとのカード（工程名 → 前 → 下矢印 → 後） */
  .bxmt .bx4-prose .bxu-ba{border:0}
  .bxmt .bx4-prose .bxu-ba__hd{display:none}
  .bxmt .bx4-prose .bxu-ba__r,.bxmt .bx4-prose .bxu-ba--k .bxu-ba__r{grid-template-columns:minmax(0,1fr);row-gap:6px;margin:0 0 10px;padding:12px 14px;border:1px solid var(--bx4-line);border-top:3px solid var(--bx4-ac)}
  .bxmt .bx4-prose .bxu-ba__r:first-child{border-top:3px solid var(--bx4-ac)}
  .bxmt .bx4-prose .bxu-ba__r:last-child{margin-bottom:0}
  .bxmt .bx4-prose .bxu-ba__l{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;display:block;font-size:12px;font-weight:700;line-height:1.6;color:var(--bx4-mut)}
  .bxmt .bx4-prose .bxu-ba__a .bxu-ba__l{color:var(--bx4-ac)}
  .bxmt .bx4-prose .bxu-ba__a{margin:0;padding:8px 10px}
  .bxmt .bx4-prose .bxu-ba__arrow{border-width:9px 7px 0;border-color:var(--bx4-ac) transparent transparent}
  /* 判断：条件の下に矢印、その下に選ぶもの */
  .bxmt .bx4-prose .bxu-decision__i{grid-template-columns:minmax(0,1fr);gap:6px}
  .bxmt .bx4-prose .bxu-decision__i::before{border-width:10px 8px 0;border-color:var(--bx4-ac) transparent transparent}
  .bxmt .bx4-prose .bxu-num__v{font-size:24px}
  .bxmt .bx4-prose blockquote.bxu-answer{padding:12px 14px 12px 16px;font-size:16px}
}

/* ---------- 15. 4 列以上の一般の表：スマホで行カード（PC は表のまま） ----------
   content-ui.php が table に .bxu-rtable（6 列以上は --wide）と、各セルに data-label を付けます。
   横スクロール（overflow-x）に頼らず、1 行を 1 枚のカードにして「列名：値」で縦に並べます。 */
@media (max-width:640px){
  .bxmt .bx4-prose .bxu-rwrap{overflow:visible;border:0;margin-left:0;margin-right:0}
  .bxmt .bx4-prose table.bxu-rtable{display:block;width:100%;min-width:0;overflow:visible;white-space:normal;border:0;font-size:14.5px}
  .bxmt .bx4-prose table.bxu-rtable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .bxmt .bx4-prose table.bxu-rtable tbody{display:block}
  .bxmt .bx4-prose table.bxu-rtable tr{display:block;margin:0 0 12px;border:1px solid var(--bx4-line);border-top:3px solid var(--bx4-ac);background:#fff}
  .bxmt .bx4-prose table.bxu-rtable tbody tr:last-child{margin-bottom:0}
  .bxmt .bx4-prose table.bxu-rtable :is(td,th){display:block;width:auto;min-width:0;max-width:none;padding:8px 14px;border:0;border-top:1px solid var(--bx4-line);text-align:left;white-space:normal;background:none}
  .bxmt .bx4-prose table.bxu-rtable :is(td,th)::before{content:attr(data-label);display:block;margin-bottom:1px;font-size:12px;font-weight:700;line-height:1.6;color:var(--bx4-mut)}
  .bxmt .bx4-prose table.bxu-rtable tbody tr > :first-child{border-top:0;background:var(--bx4-soft);font-weight:700;color:var(--bx4-ink)}
  .bxmt .bx4-prose table.bxu-rtable tbody tr > :first-child::before{display:none}
  .bxmt .bx4-prose table.bxu-rtable caption{display:block}
}
/* 2〜3 列の表：900px 以下でも表のまま折り返して幅に収める（theme.css の nowrap＋横スクロールを外す） */
@media (max-width:900px){
  .bxmt .bx4-prose table.bxu-ntable{display:table;width:100%;min-width:0;overflow:visible;white-space:normal;table-layout:auto}
  .bxmt .bx4-prose table.bxu-ntable :is(th,td){min-width:0;max-width:none;white-space:normal;overflow-wrap:anywhere}
}
/* 6 列以上はタブレット幅（900px 以下）からカードにする（表の中の横スクロールも無くす） */
@media (min-width:641px) and (max-width:900px){
  /* 4〜5 列：表のまま幅に収める（theme.css の white-space:nowrap と media.css の min-width:660px を外す） */
  .bxmt .bx4-prose .bxu-rwrap:not(.bxu-rwrap--wide){overflow:visible}
  .bxmt .bx4-prose table.bxu-rtable:not(.bxu-rtable--wide){display:table;width:100%;min-width:0;overflow:visible;white-space:normal}
  .bxmt .bx4-prose table.bxu-rtable:not(.bxu-rtable--wide) thead th{white-space:normal}
  /* 6 列以上：2 列並びのカード */
  .bxmt .bx4-prose .bxu-rwrap--wide{overflow:visible;border:0}
  .bxmt .bx4-prose table.bxu-rtable--wide{display:block;width:100%;min-width:0;overflow:visible;white-space:normal;border:0;font-size:14.5px}
  .bxmt .bx4-prose table.bxu-rtable--wide thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .bxmt .bx4-prose table.bxu-rtable--wide tbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .bxmt .bx4-prose table.bxu-rtable--wide tr{display:block;border:1px solid var(--bx4-line);border-top:3px solid var(--bx4-ac);background:#fff}
  .bxmt .bx4-prose table.bxu-rtable--wide :is(td,th){display:block;width:auto;min-width:0;max-width:none;padding:8px 14px;border:0;border-top:1px solid var(--bx4-line);text-align:left;white-space:normal;background:none}
  .bxmt .bx4-prose table.bxu-rtable--wide :is(td,th)::before{content:attr(data-label);display:block;margin-bottom:1px;font-size:12px;font-weight:700;line-height:1.6;color:var(--bx4-mut)}
  .bxmt .bx4-prose table.bxu-rtable--wide tbody tr > :first-child{border-top:0;background:var(--bx4-soft);font-weight:700;color:var(--bx4-ink)}
  .bxmt .bx4-prose table.bxu-rtable--wide tbody tr > :first-child::before{display:none}
}

@media print{
  .bxmt .bx4-prose .bxu-steps__n{background:none;color:var(--bx4-ink);border:2px solid var(--bx4-ink)}
}