@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

/*第1章37節のfirefighting_equipment_standards.cssとトーンを統一して第1章38節のalarm_systems.cssを作成
   - すべてlaw
   - 表：横スクロール対応、1列目 sticky、table-fixed
   - 出る出るポイント（exam-notes)
   - ひっかけ注意（exam-points）、コールアウト（callout）
   - 品目の色識別バッジ（赤/黄/緑/青）
*/

/* ---------- カラートークン ---------- */
:root {
  /* === 第1章：危険物に関する法令 青トーン === */
  --law-accent: #0b5cab;           /* ブルー基調（既存と合わせる） */
  --law-accent-strong: #090160;                  /* 見出しなどの濃い青 */
  --law-accent-soft: rgba(43,108,176,.06);

  --law-muted:         #6b7280;

  --law-border:        #e5e7eb;
  --law-border-light:  #eef2f6;

  --law-row:           #fafbfc;
  --law-head:          #f9fafb;

  --law-bg-soft:       #fdf2f2;                  /* ほんのり赤みのある背景 */

  --law-note-bg:       #fff8e8;                  /* 出る出るボックス背景（共通のままでOK） */
  --law-note-border:   #f1c073;

  --law-ok:            #059669;
  --law-warn:          #d97706;
  --law-ng:            #b91c1c;                  /* NG を章テーマ色に寄せる */

    /* 品目色（識別） */
  --fuel-regular: #e11d48;     /* レギュラー（赤） */
  --fuel-premium: #eab308;     /* ハイオク（黄） */
  --fuel-diesel:  #16a34a;     /* 軽油（緑） */
  --fuel-kerosene:#2563eb;     /* 灯油（青） */

  /* 旧スタイルとの互換用エイリアス（必要なら他ページでも流用可） */
  --accent: var(--law-accent);
  --border: var(--law-border);
  --row:    var(--law-row);
  --head:   var(--law-head);
}


/* ---------- レイアウトのガード（basics共通） ---------- */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.basics {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* 基礎知識ページ内は box-sizing を統一 */
body.basics *,
body.basics *::before,
body.basics *::after {
  box-sizing: border-box;
}


/* ---------- 出る出るポイント（exam-notes） ---------- */


.exam-notes {
  background: var(--law-note-bg);
  border: 2px dashed var(--law-note-border);
  border-radius: 12px;
  padding: 18px 18px 16px;
  margin: 20px 0 18px;
}

.exam-notes > h4 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  font-size: clamp(16px, 2.1vw, 18px);
  font-weight: 700;
  color: #2B2B2B;
}

.exam-notes > h4::before {
  content: "📝";
  font-size: 1.1em;
}

/* ★ ここから修正ポイント ★ */
.exam-notes ul {
  list-style: disc;          /* 自前の「・」をやめて disc に */
  margin: 0;
  padding: 0 0 0 1.2em;      /* ひっかけ注意と同じ余白 */
}

.exam-notes ul.compact li::before { content: none; }

.exam-notes:empty { display: none; }


/* ================== ひっかけ注意（exam-points） ================== */

.exam-points {
  background: #edf4ff;
  border: 2px dashed #5792f1;
  border-radius: 12px;
  padding: 18px 18px 16px;
  margin: 20px 0 18px;
}


.exam-points > h4 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  font-size: clamp(16px, 2.1vw, 18px);
  font-weight: 700;
  color: #2B2B2B;
}

/* ひっかけ注意アイコン */
.exam-points > h4::before {
  content: "⚡️";
  font-size: 1.1em;
}

/* リストはディスク表記で端正に */
.exam-points ul {
  list-style: disc;
  margin: 0;
  padding: 0 0 0 1.2em;
}

.exam-points ul.compact li::before { content: none; }

/* 中身が空のときは箱自体を消す */
.exam-points:empty { display: none; }

/* ---------- コールアウト（注釈・注意・OK・NG） ---------- */
.callout {
  background:hsl(23, 74%, 92%);                        /* exam-notes に近いトーン。好みで調整OK */
  border: 2px dashed var(--law-ng);
  border-radius: 12px;
  padding: 18px 18px 16px;                     /* ★ exam-notes と同じくらいの余白 */
  margin: 20px 0 18px;                         /* 左右は 0 でOK（中央カラムの中で揃う） */
}

/* 見出し共通（h3） */
.callout > h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  font-size: clamp(16px, 2.1vw, 18px);
  font-weight: 700;
  color: #2B2B2B;
}

/* ★ ここから修正ポイント ★ */
.callout ul {
  list-style: disc;          /* 自前の「・」をやめて disc に */
  margin: 0;
  padding: 0 0 0 1.2em;      /* ひっかけ注意と同じ余白 */
}

.callout ul.compact li::before { content: none; }

.callout ol.compact li::before { content: none; }

.callout:empty { display: none; }


/* check / OK / WARN / NG 共通のベース色（文字色だけ変える） */
.callout.check { background: #fdf3ec; border-color: #f3bfa7; color: #4e0806; }
.callout.ok   { background: #ecfdf5; border-color: #a7f3d0; color: #064e3b; }
.callout.warn { background: #fffbeb; border-color: #fde68a; color: #7c2d12; }
.callout.ng   { background: #fef2f2; border-color: #fecaca; color: #7f1d1d; }

/* アイコンだけ種類別に上書き */
.callout.check > h3::before { content: "📌"; }
.callout.ok > h3::before   { content: "✅"; }
.callout.warn > h3::before { content: "⚠️"; }
.callout.ng > h3::before   { content: "⛔️"; }

/* 余白の“二重取り”を止める：直前ブロックがある時は上を詰める */
.band-card + .callout,
.table-container + .callout,
.exam-notes + .callout,
.exam-points + .callout,
.law-section > h2 + .callout,
.law-section > h3 + .callout{
  margin-top: 16px; /* ←ここを出る出るポイント基準で統一。好みで 12〜18 */
}


/* ========== details（補足）/ callout ========== */
details.note{
  border:1px solid #e5e7eb;
  border-radius:10px;
  overflow:hidden;
}
details.note > summary::-webkit-details-marker{
  display:none;
}
details.note > summary{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:12px 14px;
  cursor:pointer;
  font-weight:600;
  background:#f8fafc;
  user-select:none;
}
details.note > summary::before{
  content:"▸";
  display:inline-block;
  transform-origin:center;
  transition:transform .18s ease;
  font-size:1rem;
  color:#334155;
}
details.note[open] > summary::before{
  transform:rotate(90deg);
}
details.note > summary:hover{
  background:#f1f5f9;
}
details.note > summary:focus-visible{
  outline:2px solid #60a5fa;
  outline-offset:2px;
  border-radius:8px;
}
details.note > *:not(summary){
  padding:12px 14px;
  background:#fff;
  border-top:1px solid #e5e7eb;
}

/* 定義コールアウト本体（幅制限だけは新CSSに既にあるので共存OK） */
.callout.definition{
  position:relative;
  margin:12px 0 20px;
  padding:14px 16px;
  background:#f5f9ff;
  border:1px solid #dbeafe;
  border-radius:12px;
  overflow:hidden;
}
.callout.definition::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:6px;
  background:#60a5fa;
  border-radius:12px 0 0 12px;
}
.callout.definition .callout-title{
  margin:0 0 6px;
  font-weight:700;
  font-size:1rem;
  color:#1e40af;
  display:flex;
  align-items:center;
  gap:.4rem;
}
.callout.definition p{
  margin:0;
  line-height:1.7;
}

/* 計算ヒント（電卓メモ的な箱） */
.calc-hint{
  margin:12px 0 4px;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:10px;
  background:#f7f9fc;
  font-size:.95rem;
}
.calc-hint ol{
  margin:6px 0 0 1.2em;
}
.calc-hint li{
  margin:4px 0;
}
@media (prefers-color-scheme:dark){
  .calc-hint{
    background:#0f1b2b;
    border-color:rgba(255,255,255,.14);
  }
}



/* ================== テーブル（共通ベース） ================== */
.table-container {
  width: 100%;
  max-width: 100%;
  margin-bottom: 1.2rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-container.table-scroll::-webkit-scrollbar { height: 8px; }
.table-container.table-scroll::-webkit-scrollbar-thumb {
  background: #cfd8e3;
  border-radius: 4px;
}

/* ベース表 */
.styled-table {
  width: 100%;
  min-width: 640px;                 /* スマホは横スクロールへ退避 */
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--law-border);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
  font-size: .95rem;
}


.styled-table.table-fixed {
  table-layout: fixed;
}

/* リストの見た目を整える */
.law-defined-table td {
  vertical-align: top;
}

/* 箇条書きのベースをリセット */
.law-defined-table td ul {
  list-style: none;
  margin: 0.25rem 0 0;
  padding-left: 0;
}

/* 行ごとの詰まり感・読みやすさを調整 */
.law-defined-table td ul li {
  position: relative;
  padding-left: 1.1em;
  line-height: 1.6;
  margin: 0.1rem 0;
}

/* 「・」をきれいに揃えて表示 */
.law-defined-table td ul li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
}

/* スマホでの詰まり感を軽くする */
@media (max-width: 640px) {
  .styled-table--law th,
  .styled-table--law td {
    padding: 0.4rem 0.6rem;
    font-size: 0.9rem;
  }
}


.styled-table thead th {
  background: var(--law-head);
  color: #111827;
  font-weight: 700;
  text-align: left;
  border-bottom: 1px solid var(--law-border);
  padding: .75rem .9rem;
  white-space: nowrap;
}

.styled-table tbody td,
.styled-table tbody th {
  border-bottom: 1px solid #eef2f6;
  border-right: 1px solid #eef2f6;
  padding: .7rem .9rem;
  vertical-align: top;
}

.styled-table tbody tr:nth-child(odd) { background: var(--law-row); }

.styled-table thead th:first-child { border-top-left-radius: 8px; }
.styled-table thead th:last-child  { border-top-right-radius: 8px; }
.styled-table tbody tr:last-child td:first-child { border-bottom-left-radius: 8px; }
.styled-table tbody tr:last-child td:last-child  { border-bottom-right-radius: 8px; }
.styled-table tbody td:last-child { border-right: 0; }

/* テーブルでは、最右列もちゃんと線を出す */
.law-defined-table tbody td:last-child,
.law-defined-table tbody th:last-child {
  border-right: 1px solid #eef2f6;
}


@media (hover:hover) {
  .styled-table tbody tr:hover {
    background: var(--law-accent-soft);  /* えんじ系のごく薄い背景 */
  }
}

/* ================== sticky 1列目 ================== */

/* sticky の基準となる親 */
.table-container.table-scroll {
  position: relative;
  scrollbar-color: #cfd8e3 transparent;
}

.sticky-first-col thead th.sticky {
  z-index: 3;
  border-right: 0;
  background: var(--law-head);
}

/* ================== 物理と化学テーブル専用（styled-table--phy） ================== */

/* 種別：条文 ≒ 26 : 74 
.styled-table--law {
  min-width: 640px;
}*/

/* 長文条文を気持ちよく折り返す */
.styled-table--law.table-fixed td,
.styled-table--law.table-fixed th {
  word-break: normal;
  overflow-wrap: break-word;
  line-break: loose;
  white-space: normal;
}

/* sticky 1列目の丸ポチを無効にしてインデントだけ残す */
.styled-table--law .sticky::before { content: none !important; }

.styled-table--law th.sticky,
.styled-table--law td.sticky {
  padding-left: .9rem;
  font-weight: 700;
}

.styled-table--law th.sticky {
  vertical-align: middle;
}


/* スマホでの閾値を少し下げる */
@media (max-width: 480px) {
  .styled-table--law { min-width: 560px; }

  .styled-table thead th,
  .styled-table tbody td,
  .styled-table tbody th {
    padding: .6rem .7rem;
    font-size: .9rem;
  }

  .table-container { margin-bottom: 1.4rem; }
}

/* このページ専用：行の高さを少し抑える */
.styled-table--law thead th,
.styled-table--law tbody th,
.styled-table--law tbody td {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.9rem;   /* ほんの少しだけ文字を小さく */
}

/* ================== リスト（詰め表示） ================== */
ul.compact {
  margin: 0;
  padding-left: 1.1em;
}
ul.compact li {
  margin: .2em 0;
}

ol.compact {
  margin: 0;
  padding-left: 1.1em;
}
ol.compact li {
  margin: .2em 0;
}


/* ================== バンドカード（左帯） ================== */

.band-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--law-border);
  border-radius: 8px;
  padding: 0.25rem 1rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
  margin-bottom: .75rem;
}

/* h2 のすぐ下に band-card が来る場合だけ、余白を少し詰める */
body.basics .site-main h2 + .band-card {
  margin-top: -0.25rem;  /* -0.2〜-0.3rem あたりで好みで微調整OK */
}

/* h3 のすぐ下に band-card が来る場合だけ、余白を少し詰める */
body.basics .site-main h3 + .band-card {
  margin-top: -0.25rem;  /* -0.2〜-0.3rem あたりで好みで微調整OK */
}

.band-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--law-accent);        /* 第3章はえんじ色の帯  */
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

/* 隣り合うカードの密着防止 */
.band-card + .callout { margin-top: 16px; }
.callout + .callout { margin-top: 20px; }

/* band-card 内の dl は詰まりやすいので、ここだけ余白を増やす */
.band-card .law-summary{
  margin-top: .7rem;
  gap: .7rem 1.2rem;      /* ←縦の間隔を増やす（効く） */
}

.band-card .law-summary dt{
  line-height: 1.4;
}

.band-card .law-summary dd{
  line-height: 1.75;      /* ←詰まり感の主因に直撃 */
}




/* ================== ページ全体レイアウト微調整 ================== */

/* bascis 共通の余白を少し詰める（このページだけ） */
.basics .site-main {
  padding-top: 0;
  margin-top: 0;
}

/* law-section 同士の間隔 */
.law-section + .law-section { margin-top: 1.6rem; }
.quiz-section { margin-top: 2.0rem; }

@media (min-width: 768px) {
  .law-section + .law-section { margin-top: 2.2rem; }
}

/* テーブル幅を少しだけ広める（PC） */
@media (min-width: 1024px) {
  .law-section .table-container {
    max-width: 960px;        /* 960 より少し細いくらい */
    margin-left: auto;
    margin-right: auto;
  }
}


/* ================== 小UIユーティリティ ================== */

.muted { color: #6b7280; }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.right { text-align: right; }

/* ================== アクセシビリティ ================== */


/* フォーカス可視（キーボード） */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--law-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 低視力配慮：リンクのホバー/フォーカス */
a:hover { text-decoration: underline; }

/* 動きに配慮 */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}


/* メインコンテンツの箱も安全側に寄せておく */
.site-main,
.breadcrumbs,
.intro,
.content,
.law-section,
.quiz-section,
.next-button,
.table-container {
  max-width: 100%;
}


/* basics ページ用：念のため width を明示 */
body.basics {
  width: 100%;
}

/* === ヘッダー／ナビが 100vw で飛び出すのを強制的に止める === */

body.basics .site-header,
body.basics .header-container,
body.basics .nav-links {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* === PC のときは中央カラム幅に絞る === */
@media (min-width: 1024px) {
  /* パンくずと本文を同じ幅で中央寄せ */
  body.basics .breadcrumbs,
  body.basics .site-main {
    width: min(960px, calc(100% - 64px)); /* 960px か 画面幅-64px の小さい方 */
    margin-left: auto;
    margin-right: auto;
  }
}


/* ================== このページ専用：見出しの統一 ================== */

/* h2 を共通トーンに揃える */
body.basics .site-main h2 {
  font-size: clamp(22px, 2.6vw, 26px);  /* どの h2 も同じ大きさ */
  line-height: 1.35;
  font-weight: 700;
  margin-top: 0.5rem;
}

/* 最初の白カードだけ、上の余白を少し増やす */
body.basics .site-main .law-section:first-of-type {
  padding-top: 0.4rem;   /* 好みで 2.0〜2.6rem くらいに微調整OK */
}


/* ================== 類バッジ（色＝類） ================== */

.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.6rem;
  border-radius: 12px;
  font-size: 0.95rem;
  line-height: 1.2;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}

/* 第1〜第6類の色分け（色＝類） */
.tag.category-1 {
  background: #dbeafe;   /* 青系：第1類 */
  color: #1d4ed8;
}

.tag.category-2 {
  background: #fee2e2;   /* 赤系：第2類 */
  color: #b91c1c;
}

.tag.category-3 {
  background: #fef3c7;   /* 黄〜オレンジ系：第3類 */
  color: #b45309;
}

.tag.category-4 {
  background: #dcfce7;   /* 緑系：第4類 */
  color: #15803d;
}

.tag.category-5 {
  background: #f3e8ff;   /* 紫系：第5類 */
  color: #7e22ce;
}

.tag.category-6 {
  background: #e5e7eb;   /* グレー系：第6類 */
  color: #111827;
}



/* 第4類の中の品名専用(特殊引火物・第1〜第4石油類・アルコール類 ・動植物油類 ）の カラー（全部グリーン系でトーンだけ変える）*/

.tag.subcat {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.55rem;
  border-radius: 12px; 
  font-size: 1rem;
  font-weight: 600;
  border: 1px solid rgba(15, 118, 110, 0.2); /* 薄い枠だけ共通 */
}

.tag.subcat-special {           /* 特殊引火物 */
  background: #ecfdf3;
  color: #15803d;
}

.tag.subcat-petroleum {         /* 第1〜第4石油類 */
  background: #dce8fc;
  color: #165d65;
}

.tag.subcat-alcohol {           /* アルコール類 */
  background: #eee0fe;
  color: #1b03a1;
}

.tag.subcat-animal-veg-oil {    /* 動植物油類 */
  background: #fefce8;
  color: #854d0e;
}



/* ================== ヘッダー固定＆パンくず押し下げ ================== */

/* basics ページのヘッダーを画面上部に固定 */
body.basics .site-header.basics-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  background: var(--color-header-footer, #242d60);
}

/* デフォルト（スマホ〜タブレット）用の押し下げ量 */
body.basics {
  padding-top: 80px;   /* 今の 72px より少し多めにしておく */
}

/* PCのときはヘッダーが高いので、さらに下げる */
@media (min-width: 1024px) {
  body.basics {
    padding-top: 140px;  /* 実際の見た目を見て 120〜160px の間で微調整してOK */
  }
}

/* main の余白は上に足さない（ヘッダーぶんだけで十分） */
body.basics .site-main {
  margin-top: 0;
}

/* パンくずとヘッダーの間に少し余白 */
body.basics .breadcrumbs {
  margin-top: 1rem;
}

/* === スマホでのテーブル幅を少しだけ詰める調整 === */

/* 〜480px：最小幅を 520px まで下げて、横スクロールを軽くする */
@media (max-width: 480px) {
  body.basics .styled-table,
  body.basics .styled-table--law {
    min-width: 520px;
  }
}

/* 〜360px：極小画面では無理に横スクロールさせず、100% におさめる */
@media (max-width: 360px) {
  body.basics .styled-table,
  body.basics .styled-table--law {
    min-width: 100%;
  }
}


/* ==== 上部カード ==== */

.class4-summary {
  padding: 0.9rem 1.2rem 1.1rem;
}

.class4-summary-header {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}

.class4-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.class4-lead {
  margin: 0;
  font-size: 0.9rem;
  color: #4b5563;
}

/* 概要リスト（dt:項目名 / dd:内容） */
.law-summary {
  margin: 0.3rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.3rem 1.2rem;
}

.law-summary-row {
  display: contents; /* dt と dd を同じグリッドに乗せる */
}

.law-summary dt {
  font-weight: 700;
  color: #111827;
  margin: 0;
}

.law-summary dd {
  margin: 0;
  color: #374151;
  line-height: 1.6;
}

.law-summary dd > p{
  margin: 0.15rem 0;
}
.law-summary dd > p + p{
  margin-top: 0.45rem; /* 段落の区切り */
}


/* PCでは「項目」「内容」の2列レイアウト */
@media (min-width: 640px) {
  .law-summary {
    grid-template-columns: minmax(110px, 0.9fr) minmax(0, 2.1fr);
    align-items: baseline;
  }
}

/* ================== 図版（figure / formula-card） ================== */
:root{
  --fig-max: 780px;          /* デスクトップ上限（必要なら960でもOK） */
  --fig-radius: 12px;
  --fig-shadow: 0 1px 2px rgba(0,0,0,.03);
  --fig-card-bg: #eef1f9;
}

/* 横スクロール容器（必要なときだけ使う） */
.figure-wrap{
  margin: 1rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* figure：箱を統一（中央寄せ＋角丸＋影） */
.law-section figure{
  margin: 1rem auto;
  max-width: var(--fig-max);
  box-shadow: var(--fig-shadow);
  border-radius: var(--fig-radius);
  clip-path: inset(0 round var(--fig-radius));
  overflow: clip; /* 古いブラウザは無視でOK */
}

/* figure内の画像/SVG：角丸は箱に任せる */
.law-section figure img,
.law-section figure svg,
.law-section figure .circuit-svg{
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 0 !important;
  background: transparent;
}

/* formula-card：図を“カードとして見せたい”ときの箱 */
.formula-card{
  margin: 1rem auto;
  max-width: var(--fig-max);
  padding: 16px 20px;
  background: var(--fig-card-bg);
  border-radius: var(--fig-radius);
  box-shadow: var(--fig-shadow);
  overflow: hidden;
}

/* formula-card内の図（中央寄せ＋上限） */
.formula-card .circuit-svg,
.formula-card img.circuit-svg{
  display: block;
  width: min(520px, 100%);
  height: auto;
  margin-inline: auto;
  border-radius: 0 !important;
  background: transparent;
}

/* キャプション間隔（1回だけ定義） */
.figure-lead + .formula-card{ margin-top: 16px; }
.formula-card + .figure-caption{ margin-top: 12px; }
.figure-caption{ font-size: .95rem; color: #374151; }

/* モバイルは上限を外す（1回だけ定義） */
@media (max-width: 480px){
  :root{ --fig-max: 100%; }
}

/* === 消火設備の種類のテーブル === */
/* 行見出しを普通の太さに */
.firefighting-equipment-standards-table1 tbody th[scope="row"] {
  font-weight: 400;   /* normal でもOK */
  text-align: left;
}

/* 見出しセルの背景を薄い青に＆フォント少し大きめ */
.firefighting-equipment-standards-table1 thead th {
  background-color: #e4eaf5;  /* 薄い青 */
  font-size: 1.05rem;
}

/* 各行の本文セルも、少しだけ大きく＆読みやすく */
.table-container.firefighting-equipment-standards-table1 tbody th[scope="row"] {
  font-size: 1rem;
  line-height: 1.6;
}

/* sticky ヘッダーも同じ色で上書き */
.table-container.firefighting-equipment-standards-table1.sticky-first-col thead th.sticky {
  background-color: #e4e9f5;
}

/* 消火設備の種類のテーブル：列幅調整 */
.firefighting-equipment-standards-table1 table {
  /* 横スクロール前提で、必要ならテーブルが広くなってOK */
  min-width: 13rem; /* お好みで調整 */
}

/* 列ごとの幅を rem で指定 */
.firefighting-equipment-standards-table1 col.col-class {
  width: 3rem;   /* 区分 */
}

/* 列ごとの幅を rem で指定 */
.firefighting-equipment-standards-table1 col.col-name {
  width: 10rem;   /* 消火設備の種類 */
}


/* === 所要単位に対応する消火設備の消火能力の基準のテーブル === */
/* 行見出しを普通の太さに */
.firefighting-equipment-standards-table2 tbody th[scope="row"] {
  font-weight: 400;   /* normal でもOK */
  text-align: left;
}

/* 見出しセルの背景を薄い青に＆フォント少し大きめ */
.firefighting-equipment-standards-table2 thead th {
  background-color: #e4eaf5;  /* 薄い青 */
  font-size: 1.05rem;
}

/* 各行の本文セルも、少しだけ大きく＆読みやすく */
.table-container.firefighting-equipment-standards-table2 tbody th[scope="row"] {
  font-size: 1rem;
  line-height: 1.6;
}

/* sticky ヘッダーも同じ色で上書き */
.table-container.firefighting-equipment-standards-table2.sticky-first-col thead th.sticky {
  background-color: #e4e9f5;
}

/* 所要単位に対応する消火設備の消火能力の基準のテーブル：列幅調整 */
.firefighting-equipment-standards-table2 table {
  /* 横スクロール前提で、必要ならテーブルが広くなってOK */
  min-width: 10rem; /* お好みで調整 */
}

/* 列ごとの幅を rem で指定 */
.firefighting-equipment-standards-table2 col.col-class {
  width: 3rem;   /* 製造所等の構造及び危険物 */
}

/* 列ごとの幅を rem で指定 */
.firefighting-equipment-standards-table2 col.col-item {
  width: 2rem;   /* 項目 */
}

/* 列ごとの幅を rem で指定 */
.firefighting-equipment-standards-table2 col.col-name {
  width: 5rem;   /* 1所要単位当たりの数値 */
}


/* === 所要単位に対応する消火設備の消火能力の基準のテーブル === */
/* 行見出しを普通の太さに */
.firefighting-equipment-standards-table3 tbody th[scope="row"] {
  font-weight: 400;   /* normal でもOK */
  text-align: left;
}

/* 見出しセルの背景を薄い青に＆フォント少し大きめ */
.firefighting-equipment-standards-table3 thead th {
  background-color: #e4eaf5;  /* 薄い青 */
  font-size: 1.05rem;
}

/* 各行の本文セルも、少しだけ大きく＆読みやすく */
.table-container.firefighting-equipment-standards-table3 tbody th[scope="row"] {
  font-size: 1rem;
  line-height: 1.6;
}

/* sticky ヘッダーも同じ色で上書き */
.table-container.firefighting-equipment-standards-table3.sticky-first-col thead th.sticky {
  background-color: #e4e9f5;
}

/* 所要単位に対応する消火設備の消火能力の基準のテーブル：列幅調整 */
.firefighting-equipment-standards-table3 table {
  /* 横スクロール前提で、必要ならテーブルが広くなってOK */
  min-width: 19rem; /* お好みで調整 */
}

/* 列ごとの幅を rem で指定 */
.firefighting-equipment-standards-table3 col.col-class {
  width: 3rem;   /* 区分 */
}

/* 列ごとの幅を rem で指定 */
.firefighting-equipment-standards-table3 col.col-kinds {
  width: 6rem;   /* 消火設備の種類 */
}

/* 列ごとの幅を rem で指定 */
.firefighting-equipment-standards-table3 col.col-standard {
  width: 10rem;   /* 設備基準 */
}

/* === 所要単位に対応する消火設備の消火能力の基準のテーブル === */
/* 行見出しを普通の太さに */
.firefighting-equipment-standards-table4 tbody th[scope="row"] {
  font-weight: 400;   /* normal でもOK */
  text-align: left;
}

/* 見出しセルの背景を薄い青に＆フォント少し大きめ */
.firefighting-equipment-standards-table4 thead th {
  background-color: #e4eaf5;  /* 薄い青 */
  font-size: 1.05rem;
}

/* 各行の本文セルも、少しだけ大きく＆読みやすく */
.table-container.firefighting-equipment-standards-table4 tbody th[scope="row"] {
  font-size: 1rem;
  line-height: 1.6;
}

/* sticky ヘッダーも同じ色で上書き */
.table-container.firefighting-equipment-standards-table4.sticky-first-col thead th.sticky {
  background-color: #e4e9f5;
}

/* 所要単位に対応する消火設備の消火能力の基準のテーブル：列幅調整 */
.firefighting-equipment-standards-table4 table {
  /* 横スクロール前提で、必要ならテーブルが広くなってOK */
  min-width: 36rem; /* お好みで調整 */
}

/* 列ごとの幅を rem で指定 */
.firefighting-equipment-standards-table4 col.col-kind {
  width: 11rem;   /* 区分 */
}

/* 列ごとの幅を rem で指定 */
.firefighting-equipment-standards-table4 col.col-class1 {
  width: 5rem;   /* 第1種 */
}

/* 列ごとの幅を rem で指定 */
.firefighting-equipment-standards-table4 col.col-class2 {
  width: 5rem;   /* 第2種 */
}

/* 列ごとの幅を rem で指定 */
.firefighting-equipment-standards-table4 col.col-class3 {
  width: 5rem;   /* 第3種 */
}

/* 列ごとの幅を rem で指定 */
.firefighting-equipment-standards-table4 col.col-class4 {
  width: 5rem;   /* 第4種 */
}

/* 列ごとの幅を rem で指定 */
.firefighting-equipment-standards-table4 col.col-class5 {
  width: 5rem;   /* 第4種 */
}

/* === 【A】著しく消火が困難な製造所等のテーブル === */
/* 行見出しを普通の太さに */
.firefighting-equipment-standards-table5 tbody th[scope="row"] {
  font-weight: 400;   /* normal でもOK */
  text-align: left;
}

/* 見出しセルの背景を薄い青に＆フォント少し大きめ */
.firefighting-equipment-standards-table5 thead th {
  background-color: #e4eaf5;  /* 薄い青 */
  font-size: 1.05rem;
}

/* 各行の本文セルも、少しだけ大きく＆読みやすく */
.table-container.firefighting-equipment-standards-table5 tbody th[scope="row"] {
  font-size: 1rem;
  line-height: 1.6;
}

/* sticky ヘッダーも同じ色で上書き */
.table-container.firefighting-equipment-standards-table5.sticky-first-col thead th.sticky {
  background-color: #e4e9f5;
}

/* 【A】著しく消火が困難な製造所等のテーブル：列幅調整 */
.firefighting-equipment-standards-table5 table {
  /* 横スクロール前提で、必要ならテーブルが広くなってOK */
  min-width: 26rem; /* お好みで調整 */
}

/* 列ごとの幅を rem で指定 */
.firefighting-equipment-standards-table5 col.col-kinds {
  width: 8rem;   /* 製造所等の種類 */
}

/* 列ごとの幅を rem で指定 */
.firefighting-equipment-standards-table5 col.col-installation-target {
  width: 18rem;   /* 設置対象 */
}

/* ============================
   【A】著しく消火が困難な製造所等テーブル専用
   左列を少し細めに（他のテーブルに影響させない）
   ============================ */
.firefighting-equipment-standards-table5 col.col-kinds {
  width: 12rem;
}
@media (max-width: 640px) {
  .firefighting-equipment-standards-table5 col.col-kinds {
    width: 9.5rem;
  }
}

/* === 【B】消火が困難な製造所等のテーブル === */
/* 行見出しを普通の太さに */
.firefighting-equipment-standards-table6 tbody th[scope="row"] {
  font-weight: 400;   /* normal でもOK */
  text-align: left;
}

/* 見出しセルの背景を薄い青に＆フォント少し大きめ */
.firefighting-equipment-standards-table6 thead th {
  background-color: #e4eaf5;  /* 薄い青 */
  font-size: 1.05rem;
}

/* 各行の本文セルも、少しだけ大きく＆読みやすく */
.table-container.firefighting-equipment-standards-table6 tbody th[scope="row"] {
  font-size: 1rem;
  line-height: 1.6;
}

/* sticky ヘッダーも同じ色で上書き */
.table-container.firefighting-equipment-standards-table6.sticky-first-col thead th.sticky {
  background-color: #e4e9f5;
}

/* 【B】消火が困難な製造所等のテーブル：列幅調整 */
.firefighting-equipment-standards-table6 table {
  /* 横スクロール前提で、必要ならテーブルが広くなってOK */
  min-width: 26rem; /* お好みで調整 */
}

/* 列ごとの幅を rem で指定 */
.firefighting-equipment-standards-table6 col.col-kinds {
  width: 8rem;   /* 製造所等の種類 */
}

/* 列ごとの幅を rem で指定 */
.firefighting-equipment-standards-table6 col.col-installation-target {
  width: 18rem;   /* 設置対象 */
}

/* ============================
   【B】消火が困難な製造所等テーブル専用
   左列を少し細めに（他のテーブルに影響させない）
   ============================ */
.firefighting-equipment-standards-table6 col.col-kinds {
  width: 12rem;
}
@media (max-width: 640px) {
  .firefighting-equipment-standards-table6 col.col-kinds {
    width: 9.5rem;
  }
}

/* === 【C】その他の製造所等のテーブル === */
/* 行見出しを普通の太さに */
.firefighting-equipment-standards-table7 tbody th[scope="row"] {
  font-weight: 400;   /* normal でもOK */
  text-align: left;
}

/* 見出しセルの背景を薄い青に＆フォント少し大きめ */
.firefighting-equipment-standards-table7 thead th {
  background-color: #e4eaf5;  /* 薄い青 */
  font-size: 1.05rem;
}

/* 各行の本文セルも、少しだけ大きく＆読みやすく */
.table-container.firefighting-equipment-standards-table7 tbody th[scope="row"] {
  font-size: 1rem;
  line-height: 1.6;
}

/* sticky ヘッダーも同じ色で上書き */
.table-container.firefighting-equipment-standards-table7.sticky-first-col thead th.sticky {
  background-color: #e4e9f5;
}

/* 【C】その他の製造所等のテーブル：列幅調整 */
.firefighting-equipment-standards-table7 table {
  /* 横スクロール前提で、必要ならテーブルが広くなってOK */
  min-width: 26rem; /* お好みで調整 */
}

/* 列ごとの幅を rem で指定 */
.firefighting-equipment-standards-table7 col.col-class {
  width: 8rem;   /* 製造所等の種類 */
}

/* 列ごとの幅を rem で指定 */
.firefighting-equipment-standards-table7 col.col-target {
  width: 8rem;   /* 設置対象 */
}

/* 列ごとの幅を rem で指定 */
.firefighting-equipment-standards-table7 col.col-equip {
  width: 16rem;   /* 設置する消火設備 */
}

/* ============================
   【C】その他の製造所等テーブル専用
   左列を少し細めに（他のテーブルに影響させない）
   ============================ */
.firefighting-equipment-standards-table7 col.col-class {
  width: 12rem;
}
@media (max-width: 640px) {
  .firefighting-equipment-standards-table7 col.col-class {
    width: 9.5rem;
  }
}

/* === 消火設備と適応する危険物の火災（第1種〜第3種） === */
/* 行見出しを普通の太さに */
.firefighting-equipment-standards-table8 tbody th[scope="row"] {
  font-weight: 400;   /* normal でもOK */
  text-align: left;
}

/* 見出しセルの背景を薄い青に＆フォント少し大きめ */
.firefighting-equipment-standards-table8 thead th {
  background-color: #e4eaf5;  /* 薄い青 */
  font-size: 1.05rem;
}

/* 各行の本文セルも、少しだけ大きく＆読みやすく */
.table-container.firefighting-equipment-standards-table8 tbody th[scope="row"] {
  font-size: 1rem;
  line-height: 1.6;
}

/* sticky ヘッダーも同じ色で上書き */
.table-container.firefighting-equipment-standards-table8.sticky-first-col thead th.sticky {
  background-color: #e4e9f5;
}

/* 消火設備と適応する危険物の火災（第1種〜第3種）のテーブル：列幅調整 */
.firefighting-equipment-standards-table8 table {
  /* 横スクロール前提で、必要ならテーブルが広くなってOK */
  min-width: 28rem; /* お好みで調整 */
}

/* 列ごとの幅を rem で指定 */
.firefighting-equipment-standards-table8 col.col-class {
  width: 8rem;   /* 消火設備の区分 */
}

/* 列ごとの幅を rem で指定 */
.firefighting-equipment-standards-table8 col.col-workpiece {
  width: 4rem;   /* 建築物その他の工作物 */
}

/* 列ごとの幅を rem で指定 */
.firefighting-equipment-standards-table8 col.col-equipment {
  width: 4rem;   /* 電気設備 */
}

/* 列ごとの幅を rem で指定 */
.firefighting-equipment-standards-table8 col.col-class4 {
  width: 4rem;   /* 第4類 */
}

/* 列ごとの幅を rem で指定 */
.firefighting-equipment-standards-table8 col.col-class5 {
  width: 4rem;   /* 第5類 */
}

/* 列ごとの幅を rem で指定 */
.firefighting-equipment-standards-table8 col.col-class6 {
  width: 4rem;   /* 第6類 */
}

/* === 消火設備と適応する危険物の火災（第4種と第5種） === */
/* 行見出しを普通の太さに */
.firefighting-equipment-standards-table9 tbody th[scope="row"] {
  font-weight: 400;   /* normal でもOK */
  text-align: left;
}

/* 見出しセルの背景を薄い青に＆フォント少し大きめ */
.firefighting-equipment-standards-table9 thead th {
  background-color: #e4eaf5;  /* 薄い青 */
  font-size: 1.05rem;
}

/* 各行の本文セルも、少しだけ大きく＆読みやすく */
.table-container.firefighting-equipment-standards-table9 tbody th[scope="row"] {
  font-size: 1rem;
  line-height: 1.6;
}

/* sticky ヘッダーも同じ色で上書き */
.table-container.firefighting-equipment-standards-table9.sticky-first-col thead th.sticky {
  background-color: #e4e9f5;
}

/* 消火設備と適応する危険物の火災（第4種と第5種）のテーブル：列幅調整 */
.firefighting-equipment-standards-table9 table {
  /* 横スクロール前提で、必要ならテーブルが広くなってOK */
  min-width: 28rem; /* お好みで調整 */
}

/* 列ごとの幅を rem で指定 */
.firefighting-equipment-standards-table9 col.col-class {
  width: 8rem;   /* 消火設備の区分 */
}

/* 列ごとの幅を rem で指定 */
.firefighting-equipment-standards-table9 col.col-workpiece {
  width: 4rem;   /* 建築物その他の工作物 */
}

/* 列ごとの幅を rem で指定 */
.firefighting-equipment-standards-table9 col.col-equipment {
  width: 4rem;   /* 電気設備 */
}

/* 列ごとの幅を rem で指定 */
.firefighting-equipment-standards-table9 col.col-class4 {
  width: 4rem;   /* 第4類 */
}

/* 列ごとの幅を rem で指定 */
.firefighting-equipment-standards-table9 col.col-class5 {
  width: 4rem;   /* 第5類 */
}

/* 列ごとの幅を rem で指定 */
.firefighting-equipment-standards-table9 col.col-class6 {
  width: 4rem;   /* 第6類 */
}


/* ============================
   表内リスト（共通）
   ============================ */
.cell-list {
  margin: 0;
  padding-left: 1.2em;
}
.cell-list > li {
  margin: .35rem 0;
}

.sub-list {
  margin-top: .3rem;
  padding-left: 1.4em;
}
.sub-list > li {
  margin: .25rem 0;
}

/* ア・イ・ウの前の「・」を消す */
.sub-list.no-index,
.sub-list.no-index > li {
  list-style: none;
  padding-left: 0;  /* インデント残したければここを消す or 1.4em に */
}

/* ア・イ・ウの前の「・」を消す（no-index 用） */
.law-defined-table td ul.sub-list.no-index > li::before {
  content: none;
}
.sub-list.no-index { padding-left: 1.4em; }
.sub-list.no-index > li { padding-left: 0; }  /* or 消してもOK */


/**** 1列目 sticky の見た目を安定させる */
.table-scroll.sticky-first-col .sticky{
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--table-bg, #fff);

  /* ここが原因になりがち：強い境界を一旦オフ */
  border-right: 0;
  box-shadow: none;
}

/* 境界は疑似要素で “1本だけ” 描く（色は他の罫線に合わせる） */
.table-scroll.sticky-first-col .sticky::after{
  content: "";
  position: absolute;
  top: 0;
  right: -1px;
  width: 1px;
  height: 100%;
  background: var(--table-border, rgba(0,0,0,.08));
  pointer-events: none;
}

/* 2列目の左罫線が残ってると二重線になるので消す */
.table-scroll.sticky-first-col table tr > *:nth-child(2){
  border-left: 0;
}

/* ヘッダーの sticky は前面に */
.table-scroll.sticky-first-col thead .sticky{
  z-index: 3;
}

/* Lをイタリック調で少し大きくする */
.math-ell{
  font-size: 1.05em;   /* 好みで 1.15〜1.35 */
  font-weight: 400;
}

/* 出る出るポイント：式だけ“刺さるサイズ”に */
.exam-notes .math-block{
  display: inline-block;
  font-size: 1.35em;
  font-weight: 800;
  line-height: 1.15;
  padding: .18em .5em;
  border-radius: 12px;
  background: rgba(0,0,0,.04);
  letter-spacing: .02em;

  /* ℓが細く見える環境の保険（Mac/Win混在向け） */
  font-family: "Cambria Math","STIX Two Math","Times New Roman","Noto Sans JP",serif;
}

.math-badge{
  display:inline-block;
  padding:.22em .6em;
  border-radius:999px;
  background:rgba(0,0,0,.06);
  font-family:"STIX Two Math","Cambria Math","Noto Serif","Noto Sans JP",serif;
  font-size:1.08em;
  letter-spacing:.02em;
}
.math-badge .ell{
  font-size:1.14em;   /* ℓ だけ少し大きく */
}

/* 直列/並列 定義ブロック（スマホ最適化） */
.def-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 14px 0 10px;
}

@media (min-width: 860px){
  .def-grid{
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

.def-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 14px 14px 12px;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}

.def-title{
  margin: 0 0 10px;
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  letter-spacing: .02em;
}

.def-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.def-list li{
  display: grid;
  grid-template-columns: 4.2em 1fr;
  column-gap: 10px;
  align-items: start;
  line-height: 1.65;
}

.def-term{
  font-weight: 800;
  letter-spacing: .02em;
  opacity: .9;
}

.def-desc strong{
  font-weight: 900;
}

.def-formula{
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.04);
  overflow-x: auto;              /* 長い式は横スクロールで守る */
  -webkit-overflow-scrolling: touch;
}

.def-formula .math{
  white-space: nowrap;           /* 変な位置で改行しない */
  font-variant-numeric: lining-nums;
}

/* 横スクロールのとき、式が“切れて見える”のを防ぐ */
.def-formula::-webkit-scrollbar{
  height: 8px;
}


/* =========================
   defined_substances.css 追い貼りパッチ（商品顔安定）
   ========================= */

/* 1) タイポ＆段落間を固定（文章が教科書顔になる） */
body.basics{
  font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.85;
  color: #111827;
}

body.basics .site-main p{
  margin: 0 0 0.9em;
}
body.basics .site-main p:last-child{
  margin-bottom: 0;
}

/* 2) 見出し直下の“負のmargin”を無効化して安定させる */
body.basics .site-main h2{ margin: 0.6rem 0 0.65rem; }
body.basics .site-main h3{ margin: 1.1rem 0 0.55rem; }

body.basics .site-main h2 + .band-card,
body.basics .site-main h3 + .band-card{
  margin-top: 0.55rem !important;
}

/* 3) band-card の内側余白を商品っぽく（詰まり解消） */
.band-card{
  padding: 18px 20px 16px;         /* ← 0.25rem だと薄い。ここで勝つ */
  border-radius: 12px;
}
.band-card::before{
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

/* 4) sticky 1列目は“疑似要素1本線”方式に統一（混線を止める） */
.sticky-first-col .sticky{
  border-right: 0 !important;
  box-shadow: none !important;
}

/* 5) ヘッダー固定の押し下げを変数化（被り/空きすぎを止める） */
:root{ --basics-header-h: 92px; } /* スマホ基準 */
@media (min-width: 1024px){
  :root{ --basics-header-h: 132px; } /* PC基準（現状140より少し締め） */
}
body.basics{
  padding-top: var(--basics-header-h) !important;
}
body.basics .breadcrumbs{
  margin-top: 0.75rem;
}

/* =========================
   callout 余白バグ潰し（最優先で最後に置く）
   ========================= */

/* 1) callout内の“先頭要素のmargin-top”が上に足されるのを殺す */
body.basics .site-main .callout > :first-child{
  margin-top: 0 !important;
}

/* 2) ついでに末尾も整える（下がダブつくのも防ぐ） */
body.basics .site-main .callout > :last-child{
  margin-bottom: 0 !important;
}

/* 3) 見出しが h3 でも h4 でも同じ見た目に揃える（ここが本丸） */
body.basics .site-main .callout > :is(h3,h4){
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px !important;     /* ←上の余白をゼロに固定 */
  font-size: clamp(16px, 2.1vw, 18px);
  font-weight: 700;
  color: #2B2B2B;
}

/* 4) callout内のpが先頭に来ても上が膨らまないように */
body.basics .site-main .callout p{
  margin: 0 0 .9em;
}
body.basics .site-main .callout p:last-child{
  margin-bottom: 0;
}

/* ===== band-card 内の見出しだけ“上の余白”をゼロ固定 ===== */
body.basics .site-main .band-card > h3,
body.basics .site-main .band-card > h4{
  margin-top: 0 !important;
  margin-bottom: 12px;
}

/* === 法別表第3：第4類　指定数量テーブルの微調整 === */

/* 品名（行見出し）を scope の違いに関係なく同じ見た目にする */
.law-defined-table tbody th[scope="row"],
.law-defined-table tbody th[scope="rowgroup"] {
  font-size: 1rem;        /* 行見出しは少し大きく */
  font-weight: 700;       /* 太字で章タイトル感を出す */
  text-align: center;     /* 「品名」列の文字位置を中央に統一 */
  vertical-align: middle; /* 行の中央に配置（rowspan 行も含めて揃える） */
  white-space: nowrap;    /* 第1石油類／第2石油類などを折り返さない */
}

/* 区分（非水溶性・水溶性）の文字サイズをそろえる */
/* 各行の「最初の td = 区分」にまとめて効かせる */
.designated-quantities-table tbody tr > td:first-of-type {
  font-size: 1rem;
}

/* 指定数量（50L, 200L, 10000L など）も少し大きくし、1行に収める */
.designated-quantities-table tbody tr > td:nth-of-type(2) {
  font-size: 1rem;
  white-space: nowrap;  /* 10000L が 1000 / 0L に割れないように */
}


/* --- 必要・原則必要の表示用バッジ --- */

/* ベース */
.styled-table td.need,
.styled-table td.principle {
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

/* 「必要」…濃いめの安心グリーン系 */
.styled-table td.need {
  color: #166534;              /* 文字：やや深い緑 */
}

/* 「原則必要」…注意寄りのオレンジ系 */
.styled-table td.principle {
  color: #92400e;              /* 文字：濃いオレンジ */
  background-color: #fffbeb;   /* 背景：淡いクリーム */
}

/* ========= 屋外タンク貯蔵所：容量レンジバッジ ========= */
.range-badge {
  display: inline-block;
  padding: 0.12em 0.6em;
  margin-inline: 0.1em;
  border-radius: 12px;

  border: 1px solid var(--law-accent, #2563eb);
  background-color: rgba(37, 99, 235, 0.06);
  color: #111827;

  font-size: 0.9em;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap; /* スマホでも数字が途中で折れないように */
}

/* テーブル内で詰まりすぎないよう、行間を少しだけゆるめる */
.law-defined-table td .range-badge + .range-badge {
  margin-left: 0.25em;
}

/* 数値やキーワードを目立たせる汎用バッジ */
.basics .badge {
  display: inline-block;
  font-weight: 700;
  font-size: 0.88em;
  line-height: 1;
  border-radius: 999px;
  padding: .35em .65em;
  border: 1px solid var(--oss-border);
  background: var(--oss-bg);
  color: #111827;
}
.basics .badge--ok    { background: #ecfdf5; color: var(--oss-ok);    border-color: #d1fae5; }
.basics .badge--warn  { background: #fffbeb; color: var(--oss-warn);  border-color: #fef3c7; }
.basics .badge--ng    { background: #fef2f2; color: var(--oss-ng);    border-color: #fee2e2; }
.basics .badge--num   { background: #eef2ff; color: #3730a3; border-color: #e0e7ff; } /* 数値用 */

/* ちょいアクセント：重要用語の下線 */
.basics .u-key {
  background: linear-gradient(transparent 60%, #fff59d 60%);
}



/* 給油取扱所に設置できる建築物の用途（行見出しだけ左寄せ） */
.self-refueling-station-standards-table1 tbody th[scope="row"] {
  text-align: left;
}

/* 給油取扱所に設置できる建築物の用途（行見出しだけ左寄せ） */
.self-refueling-station-standards-table3 tbody th[scope="row"] {
  text-align: left;
}

/* ================== 品目バッジ（誤給油防止の色識別） ================== */
.badges { display: flex; flex-wrap: wrap; gap: .5rem .6rem; }
.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .85rem; line-height: 1;
  padding: .35rem .55rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: #fff;
  white-space: nowrap;
}
.badge .dot {
  width: .6rem; height: .6rem; border-radius: 50%;
  display: inline-block; flex: 0 0 .6rem;
}

/* カラーバリエーション */
.badge--regular { color: var(--fuel-regular); }
.badge--premium { color: var(--fuel-premium); }
.badge--diesel  { color: var(--fuel-diesel); }
.badge--kerosene{ color: var(--fuel-kerosene); }

.badge--regular .dot { background: var(--fuel-regular); }
.badge--premium .dot { background: var(--fuel-premium); }
.badge--diesel  .dot { background: var(--fuel-diesel); }
.badge--kerosene .dot{ background: var(--fuel-kerosene); }

/* 色チップ（テーブル内表示用） */
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .9rem; line-height: 1;
  padding: .35rem .6rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.chip .dot {
  width: .65rem; height: .65rem; border-radius: 50%;
  display: inline-block; flex: 0 0 .65rem;
}

/* 既存の color 変数を流用 */
.chip--regular  { color: var(--fuel-regular); }
.chip--premium  { color: var(--fuel-premium); }
.chip--diesel   { color: var(--fuel-diesel); }
.chip--kerosene { color: var(--fuel-kerosene); }

.chip--regular  .dot { background: var(--fuel-regular); }
.chip--premium  .dot { background: var(--fuel-premium); }
.chip--diesel   .dot { background: var(--fuel-diesel); }
.chip--kerosene .dot { background: var(--fuel-kerosene); }

.law-section .lead {
  margin-bottom: 1rem;
  font-size: 0.95rem;
  line-height: 1.7;
}

.law-subtitle {
  margin-top: 1.4rem;
  margin-bottom: 0.4rem;
  font-size: 1rem;
  font-weight: 700;
}

.law-standards-list {
  margin-left: 1.2rem;
  padding-left: 1.2rem;
}

.law-standards-list li + li {
  margin-top: 0.35rem;
}

/* ================== 36節専用：本文レイアウト＆小見出し ================== */

.basics .law-section p,
.basics .law-section ul,
.basics .law-section dl {
  line-height: 1.9;
  margin-block: 0.8rem;
}

.basics .law-section .subheading {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  margin-top: 1.6rem;
  margin-bottom: 0.6rem;
  border-left: 4px solid var(--accent, #3a7);
  padding-left: 0.6rem;
}

.basics .law-section .dash-list {
  list-style: "—  ";
  padding-left: 1.2rem;
}
.basics .law-section .dash-list li {
  margin: 0.2rem 0;
}

.basics .law-section .test-list dt {
  font-weight: 600;
  margin-top: 0.8rem;
}
.basics .law-section .test-list dd {
  margin-left: 0.8rem;
}

.basics .law-section .example {
  font-style: italic;
  opacity: 0.9;
}

/* 定義系 callout だけ読み幅を抑える */
.callout.definition {
  max-width: 70ch;
}


/* ===== 危険等級テーブル：hazard-grade.map 専用 ===== */

.styled-table.hazard-grade.map tbody tr:nth-child(odd) td,
.styled-table.hazard-grade.map tbody tr:nth-child(odd) th.grade {
  background: transparent !important; /* ストライプ無効化 */
}

/* 基本背景は白でフラットに */
.styled-table.hazard-grade.map tbody th,
.styled-table.hazard-grade.map tbody td {
  background: #fff;
}

/* 類別セル（rowgroup 見出し） */
.styled-table.hazard-grade.map th.class-tag {
  background: #f7f9fc;
  border-right: 1px solid var(--border, #e5e7eb);
}

/* 左側の細い帯（色は category-* で上書き） */
.styled-table.hazard-grade.map th.class-tag::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: #c7d8f6; /* デフォルト帯色（第1類） */
  border-radius: 4px 0 0 4px;
}

/* カテゴリ別の帯色 */
.styled-table.hazard-grade.map th.class-tag:has(.category-1)::before { background: #c7d8f6; }
.styled-table.hazard-grade.map th.class-tag:has(.category-2)::before { background: #f8d9b6; }
.styled-table.hazard-grade.map th.class-tag:has(.category-3)::before { background: #cdeedb; }
.styled-table.hazard-grade.map th.class-tag:has(.category-4)::before { background: #fbd0d8; }
.styled-table.hazard-grade.map th.class-tag:has(.category-5)::before { background: #d9cff9; }
.styled-table.hazard-grade.map th.class-tag:has(.category-6)::before { background: #dcdcdc; }

/* グループ境界の上線を太めに */
.styled-table.hazard-grade.map th.class-tag[rowspan] {
  border-top: 3px solid var(--border-strong, #d1d5db);
}

/* 等級列の視認性 */
.styled-table.hazard-grade.map .grade {
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* スペーシング微調整 */
.styled-table.hazard-grade.map th,
.styled-table.hazard-grade.map td {
  padding: 0.72rem 0.85rem;
}

@media (max-width: 720px) {
  .styled-table.hazard-grade.map th,
  .styled-table.hazard-grade.map td {
    padding: 0.78rem 0.85rem;
  }
}


/* ===== 積載方法：原則／例外カード ===== */

.rules-list {
  counter-reset: rule;
  display: grid;
  gap: 1.1rem;
  margin: 0;
  padding-left: 0;
}

.rule-item {
  list-style: none;
  background: #f9fafb;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  padding: 1rem 1rem 0.9rem;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

.rule-item .rule-title {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: clamp(1.02rem, 1.3vw, 1.08rem);
  margin: 0 0 0.3rem 0;
  line-height: 1.5;
}

.rule-item .rule-body {
  margin: 0.2rem 0 0.6rem;
  line-height: 1.9;
  max-width: 70ch;
}

.rule-exception {
  background: #f8fafc;
  border: 1px dashed var(--border, #e5e7eb);
  border-radius: 10px;
  padding: 0.7rem 0.8rem;
  margin: 0.4rem 0 0.2rem;
}
.rule-exception > p { margin: 0; }
.rule-exception ul { margin: 0.2rem 0 0 1.1rem; }

/* 原則／例外／禁止バッジ（形は .basics .badge を利用して色だけ上書き） */
.badge-principle { background: #e8f3ff; color: #0b5cab; }
.badge-exception { background: #fff3d9; color: #8a5a00; }
.badge-prohibit  { background: #ffe8ea; color: #a0162b; }

@media (max-width: 720px) {
  .rule-item { padding: 0.9rem 0.9rem 0.85rem; }
  .rule-exception { padding: 0.6rem 0.7rem; }
}

/* 原則／例外／禁止バッジ：.badge に色をかぶせる */
.basics .badge.badge-principle {
  background: #e8f3ff;
  color: #0b5cab;
}

.basics .badge.badge-exception {
  background: #fff3d9;
  color: #8a5a00;
}

.basics .badge.badge-prohibit {
  background: #ffe8ea;
  color: #a0162b;
}


/* ===== 注意事項テーブル：caution-map ===== */

.styled-table.caution-map {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}
.styled-table.caution-map th,
.styled-table.caution-map td {
  padding: 0.72rem 0.85rem;
  vertical-align: top;
  word-break: break-word;
}
.styled-table.caution-map thead th {
  position: sticky;
  top: 0;
  background: var(--surface, #fff);
  z-index: 2;
}

/* 幅（PC基準） */
.styled-table.caution-map .w-class { width: 16rem; }
.styled-table.caution-map .w-name  { width: 24rem; }
@media (max-width: 900px) {
  .styled-table.caution-map .w-class { width: 12rem; }
  .styled-table.caution-map .w-name  { width: 18rem; }
}

/* 類別セルのグループ感（左帯＋淡背景） */
.styled-table.caution-map .class-tag {
  position: relative;
  background: #f7f9fc;
  border-right: 1px solid var(--border, #e5e7eb);
  text-align: center;
}
.styled-table.caution-map .class-tag::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: #c7d8f6;
  border-radius: 4px 0 0 4px;
}
.styled-table.caution-map .class-tag:has(.category-1)::before { background:#c7d8f6; }
.styled-table.caution-map .class-tag:has(.category-2)::before { background:#f8d9b6; }
.styled-table.caution-map .class-tag:has(.category-3)::before { background:#cdeedb; }
.styled-table.caution-map .class-tag:has(.category-4)::before { background:#fbd0d8; }
.styled-table.caution-map .class-tag:has(.category-5)::before { background:#d9cff9; }
.styled-table.caution-map .class-tag:has(.category-6)::before { background:#dcdcdc; }

/* 品名セルをやや強調 */
.styled-table.caution-map .name {
  font-weight: 600;
}

/* 注意バッジ（色だけ上書き。形は .chip のベースを流用） */
.chip-fire    { background: #ffe8e8; }
.chip-water   { background: #e8f2ff; }
.chip-contact { background: #fff5d9; }
.chip-air     { background: #e7f6ee; }
.chip-strict  { background: #ffd9df; }
.chip-shock   { background: #f2e8ff; }


/* ===== 混載マトリクス：compat-matrix ===== */

.compat-matrix {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}
.compat-matrix thead th {
  position: sticky;
  top: 0;
  background: var(--surface, #fff);
  z-index: 2;
}
.compat-matrix th,
.compat-matrix td {
  padding: 0.65rem 0.7rem;
  text-align: center;
  vertical-align: middle;
  word-break: break-word;
}
.compat-matrix .w-head { width: 7.2rem; }
.compat-matrix .rowhead { text-align: left; }

/* セル状態表示 */
/* セル内バッジのベース（可／不可 共通） */
.compat-matrix td span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 2.4rem;      /* 丸の幅 */
  height: 2.4rem;     /* 丸の高さ → 完全な円 */
  border-radius: 999px;
  font-size: 0.8rem;  /* 「不可」がきちんと収まるサイズ */
  font-weight: 700;
}

/* 可セル */
.compat-matrix td.ok span {
  background: #e8f6ea;
  color: #1c6f2a;
}

/* 不可セル */
.compat-matrix td.ng span {
  background: #ffe6ea;
  color: #a0182b;
}

.compat-matrix td.self {
  color: #98a1ad;
}

/* 行列の区切りと読みやすさ */
.compat-matrix tbody tr:nth-child(odd) td {
  background: color-mix(in oklab, #000 5%, var(--surface, #fff) 95%);
}
.compat-matrix tbody tr td:nth-child(odd) {
  background: color-mix(in oklab, #000 3%, var(--surface, #fff) 97%);
}
.compat-matrix .self {
  background: #fafafa;
}

/* 凡例 */
.legend {
  margin: 0.6rem 0 0.2rem;
  line-height: 1.8;
}

/* ── 混載マトリクスの凡例ラベルを本体と同じトークンにする ── */

.law-section #mixing-legend {
  margin: 0.6rem 0 0.2rem;
  line-height: 1.8;
}

.law-section #mixing-legend .pill {
  display: inline-block;
  width: 2.4rem;          /* 本体と同じサイズに揃える */
  height: 2.4rem;
  line-height: 2.4rem;    /* 高さと同じにして上下中央 */
  padding: 0;             /* 既存 .legend .pill の padding を打ち消す */
  text-align: center;     /* 左右中央 */
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.8rem;
  box-sizing: border-box;
  margin-right: 0.35rem;  /* ラベルとのすき間 */
  vertical-align: middle; /* 文のベースラインと高さをそろえる */
}

.law-section #mixing-legend .ok {
  background: #e8f6ea;
  color: #1c6f2a;
}

.law-section #mixing-legend .ng {
  background: #ffe6ea;
  color: #a0182b;
}

/* 不可ラベルだけ、わずかに字間を詰める（光学調整） */
.law-section #mixing-legend .pill.ng {
  letter-spacing: -0.06em;   /* -0.03〜-0.06em くらいで好み調整 */
}

@media (max-width: 720px) {
  .compat-matrix .w-head { width: 6.5rem; }
  .compat-matrix td span { min-width: 2.4rem; }
}

/* 36節：運搬の基準（収納する危険物に応じた注意事項）専用調整 */

/* 1) 品名列を左寄せ */
.law-section .transportation-standards-table2 .name {
  text-align: left;
}

/* 2) 注意事項チップの上下余白を少し広げる */
.law-section .transportation-standards-table2 .cautions .chip {
  display: inline-block;          /* 念のためブロック化 */
  margin: 0.18rem 0.25rem 0.18rem 0;  /* 上下だけ少し広めに */
}


/* 例外ブロック（flex はやめる） */
.law-section .rule-exception {
  margin-top: 0.85rem;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  border: 1px dashed rgba(248, 180, 0, 0.6); /* やわらかい黄色系 */
  background: #fffbf2;
}

/* バッジと本文の少しだけ間をあける */
.law-section .rule-exception .badge {
  margin-right: 0.6rem;
  vertical-align: middle;  /* なくてもいいけど、ちょい整う */
}

/* テキストをバッジの横に自然につなげる */
.law-section .rule-exception p {
  display: inline;
}

/* ===== 36節：運搬方法 標識イラストのサイズ調整 ===== */

/* カード本体：テキスト幅と同じくらいに絞る */
.law-section .danger-sign-card {
  max-width: 420px;             /* PCでもこの幅まで */
  margin: 1rem auto 0.5rem;     /* 中央寄せ＆上下に少し余白 */
  padding: 1.1rem 1rem;
}

/* 画像：ちょっと小さめ＆縦に伸びすぎないように */
.law-section .danger-sign-card .circuit-svg {
  display: block;
  max-width: 260px;             /* 実サイズの上限 */
  width: 70%;                   /* スマホでは親幅の7割くらい */
  margin: 0 auto 0.6rem;
  height: auto;
}

/* キャプションは控えめなトーンに */
.law-section .danger-sign-card .figure-caption {
  font-size: 0.88rem;
  line-height: 1.7;
}

/* スマホでは少しだけ広げる（＝見やすさ優先） */
@media (max-width: 640px) {
  .law-section .danger-sign-card {
    max-width: 92vw;
    padding: 0.9rem 0.8rem;
  }

  .law-section .danger-sign-card .circuit-svg {
    max-width: 240px;
    width: 80%;
  }
}

/* 消火設備リストをタグ風に整える */
.equip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.6rem;
}

.equip-list span {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background-color: #f5f7fb;
  font-size: 0.85rem;
  line-height: 1.4;
  white-space: nowrap;
}

/* 強調している設備は少しだけ濃く */
.equip-list span strong {
  font-weight: 700;
}

/* ── 所要単位の補足ブロック ── */

/* details 内のバンドが summary にくっつかないようにする */
.note > .band-card {
  margin-top: 0.75rem;
}

/* まとめ行（式）を少しだけ強調 */
.note .formula-line {
  margin-top: 0.25rem;
  font-weight: 600;
}

.note .formula-label {
  font-weight: 700;
  margin-right: 0.25em;
}

/* 例・注意書きは少しだけ間隔を広げる */
.note .example {
  margin-top: 0.75rem;
}

.note .note-small {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.7;
}

/* 区分列を左寄せ（ヘッダー＋行見出し） */
.firefighting-equipment-standards-table4 thead th[scope="col"][rowspan],
.firefighting-equipment-standards-table4 tbody th[scope="row"] {
  text-align: left;
  padding-left: 0.75rem; /* 好みで微調整OK */
}

/* スマホで少しだけ余裕を出したい場合（任意） */
@media (max-width: 768px) {
  .firefighting-equipment-standards-table4 tbody th[scope="row"] {
    line-height: 1.5;
  }
}

/* ==== 消火設備×適応火災マップ（ff13）【単一ソース】 ===================== */

/* 横スクロールの器 & sticky の基準 */
#firefighting-equipment-fire .table-container.table-scroll{
  overflow-x: auto;
  position: relative;
}

/* ベース（共通） */
#firefighting-equipment-fire .styled-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  background: #fff;
}
#firefighting-equipment-fire .styled-table th,
#firefighting-equipment-fire .styled-table td{
  border: 1px solid #d9e1ee;
  padding: .6rem .8rem;
  box-sizing: border-box;
  vertical-align: middle;
  text-align: center;
  background: #fff;            /* 透け防止 */
}

/* ===== ff13 専用：列幅は変数で一元管理 ===== */
#firefighting-equipment-fire .styled-table.ff13{
  min-width: 900px;            /* PC 基準 */
  --kind-col: 18rem;           /* 1列目：消火設備の区分（PCはこれでOK） */
  --mark-col: 4.8rem;            /* ○/−列 */
}

/* colgroup と同期（固定値は使わない） */
#firefighting-equipment-fire .styled-table.ff13 col.w-kind{ width: var(--kind-col); }
#firefighting-equipment-fire .styled-table.ff13 col.w-mark{ width: var(--mark-col); }

/* ヘッダーは“上だけ”固定。横方向は動かす（= left を持たせない） */
#firefighting-equipment-fire .styled-table.ff13 thead th{
  position: sticky;
  top: 0;
  left: auto !important;       /* ← ここが肝。2列目以降の left を完全打消し */
  z-index: 3;
  background: #f0f5ff;
  font-weight: 700;
  white-space: nowrap;
}

/* 左上の角だけは 1列目ヘッダーなので横も固定 */
#firefighting-equipment-fire .styled-table.ff13 thead th.corner{
  left: 0 !important;
  z-index: 9;                  /* 角 > 1列目本文 > 他ヘッダー */
  background-clip: padding-box;
  box-shadow: 2px 0 0 #d9e1ee; /* 視覚的に境界を出す */
}

/* 1列目（本文）だけ横固定。残り列は通常スクロール */
#firefighting-equipment-fire .styled-table.ff13 .sticky-col{
  position: sticky;
  left: 0;
  z-index: 7;                  /* thead(3)より上、corner(9)より下 */
  background: #f7faff;
  background-clip: padding-box;
  box-shadow: 2px 0 0 #d9e1ee;
}

/* 1列目は左寄せ＆折返し、2列目以降は中央＆折返しなし */
#firefighting-equipment-fire .styled-table.ff13 th:first-child,
#firefighting-equipment-fire .styled-table.ff13 td:first-child{
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}
#firefighting-equipment-fire .styled-table.ff13 th:nth-child(n+2),
#firefighting-equipment-fire .styled-table.ff13 td:nth-child(n+2){
  text-align: center;
  white-space: nowrap;
}

/* （任意）1列目セル内の2段表示の微調整用クラス */
#firefighting-equipment-fire .styled-table.ff13 .kindcell{ padding:.5rem .7rem; }
#firefighting-equipment-fire .styled-table.ff13 .kind{ font-weight:700; color:#213b6b; line-height:1.25; margin-bottom:.2rem; }
#firefighting-equipment-fire .styled-table.ff13 .equip{ font-weight:500; line-height:1.5; white-space:normal; overflow-wrap:anywhere; }

/* ===== モバイル最適化（縮めるだけ。定義は増やさない） ===== */
@media (max-width: 840px){
  #firefighting-equipment-fire .styled-table.ff13{
    min-width: 700px;
    --kind-col: 15.5rem;
    --mark-col: 4.6rem;
  }
  #firefighting-equipment-fire .styled-table.ff13 th,
  #firefighting-equipment-fire .styled-table.ff13 td{ padding:.5rem .6rem; }
}
@media (max-width: 640px){
  #firefighting-equipment-fire .styled-table.ff13{
    min-width: 600px;
    --kind-col: 14rem;
    --mark-col: 3.8rem;
  }
  #firefighting-equipment-fire .styled-table.ff13 th,
  #firefighting-equipment-fire .styled-table.ff13 td{ padding:.45rem .5rem; }
}

/* ===== PCだけ first列をさらにスリムにして横スクロール回避 ===== */
@media (min-width: 1024px){
  #firefighting-equipment-fire .styled-table.ff13{
    min-width: unset;          /* 固定の最小幅を解除してコンテナ幅に収める */
    --kind-col: 14rem;         /* 18rem → 14rem（様子見でここから） */
    --mark-col: 4.8rem;        /* 5.2rem → 4.8rem（○/−列も少しだけ圧縮） */
  }
  /* パディングもほんの少しだけ圧縮して収まりを良くする */
  #firefighting-equipment-fire .styled-table.ff13 th,
  #firefighting-equipment-fire .styled-table.ff13 td{
    padding: .5rem .6rem;
  }
  /* 1列目の中身は折返し前提で詰める */
  #firefighting-equipment-fire .styled-table.ff13 .kindcell{ padding: .45rem .6rem; }
  #firefighting-equipment-fire .styled-table.ff13 .equip{
    white-space: normal;
    word-break: auto-phrase;
    overflow-wrap: anywhere;
    line-height: 1.45;
  }
  /* 見出しも少しだけ詰める（可読性を崩さない範囲） */
  #firefighting-equipment-fire .styled-table.ff13 thead th{
    font-size: .95em;
  }
}

/* ========================
   スマホ最適化の上書き（さらに細く）
   ======================== */
@media (max-width: 640px){
  /* 1列目を 12.6rem まで圧縮（既存は 14rem） */
  #firefighting-equipment-fire .styled-table.ff13{
    --kind-col: 12.6rem;
    --mark-col: 3.8rem;         /* ○/− 列も少しだけ詰める */
  }
  #firefighting-equipment-fire .styled-table.ff13 th,
  #firefighting-equipment-fire .styled-table.ff13 td{
    padding: .42rem .48rem;     /* 余白を微縮小 */
  }
  /* 1列目セルの中（ラベル＆設備名）をタイトに */
  #firefighting-equipment-fire .styled-table.ff13 .kind{ 
    font-size: .95rem; 
    line-height: 1.2; 
    margin-bottom: .16rem; 
  }
  #firefighting-equipment-fire .styled-table.ff13 .equip{
    font-size: .92rem;
    line-height: 1.4;
    white-space: normal;        /* 折返し許可（既存維持） */
  }
}

/* ========================
   行グループの色アクセント（第1〜3種）
   - うっすら背景 + 左帯のツメ
   - sticky と相性の良い“背景だけ”装飾
   ======================== */

/* ベース：左帯用の疑似要素を仕込む */
#firefighting-equipment-fire .styled-table.ff13 .kindcell{
  position: relative; 
}
#firefighting-equipment-fire .styled-table.ff13 .kindcell::before{
  content: "";
  position: absolute;
  inset: 0 auto 0 0;  /* left に 6px の帯 */
  width: 6px;
  border-radius: 6px 0 0 6px;
  background: transparent;      /* 色は行クラスで上書き */
}

/* === 行グループ（第1〜3種）の色を画像トーンに合わせて上書き === */
/* 左帯はくっきり、背景はごく薄く（白に近いパステル） */

#firefighting-equipment-fire .styled-table.ff13 .kindcell{
  position: relative;
  background-clip: padding-box;
}
#firefighting-equipment-fire .styled-table.ff13 .kindcell::before{
  content: "";
  position: absolute; inset: 0 auto 0 0; width: 6px; border-radius: 6px 0 0 6px;
}

/* 第1種：青系（落ち着いたスカイブルー） */
#firefighting-equipment-fire .styled-table.ff13 tr.grp-1 .kindcell{
  background: #F3F7FF;              /* すごく薄い青 */
}
#firefighting-equipment-fire .styled-table.ff13 tr.grp-1 .kindcell::before{
  background: #c7d8f6;              /* 帯：やや濃い青 */
}

/* 第2種：橙系（やさしいアンバー） */
#firefighting-equipment-fire .styled-table.ff13 tr.grp-2 .kindcell{
  background: #FFF7EC;              /* すごく薄い橙 */
}
#firefighting-equipment-fire .styled-table.ff13 tr.grp-2 .kindcell::before{
  background: #f8d9b6;              /* 帯：アンバー */
}

/* 第3種：緑系（柔らかいミント） */
#firefighting-equipment-fire .styled-table.ff13 tr.grp-3 .kindcell{
  background: #EDF8F1;              /* すごく薄い緑 */
}
#firefighting-equipment-fire .styled-table.ff13 tr.grp-3 .kindcell::before{
  background: #cdeedb;              /* 帯：エメラルド */
}

/* thead は既定の淡いブルーのまま（可読性を優先） */
#firefighting-equipment-fire .styled-table.ff13 thead th{
  background: #F0F5FF;
}

/* === ff13：ヘッダーの横固定は『1セル目だけ』、他は横方向フリーに === */
#firefighting-equipment-fire .styled-table.ff13 thead th{
  left: auto !important;                 /* 2列目以降の横固定を完全解除 */
}
#firefighting-equipment-fire .styled-table.ff13 thead th:first-child{
  position: sticky; left: 0 !important;  /* 1セル目だけ横も固定 */
  z-index: 10;
  background: #F0F5FF;
  background-clip: padding-box;
  box-shadow: 2px 0 0 #d9e1ee;           /* 視覚的な境界線 */
}
/* もし .corner ルールが残っていたら、上記が勝つので削除不要 */

/* === ff13：本文の1列目（行見出し）を必ず横固定にする === */
/* クラスに依存せず tbody の 1列目 th を sticky にする（.sticky-col が無くても効く） */
#firefighting-equipment-fire .styled-table.ff13 tbody > tr > th:first-child{
  position: sticky; left: 0;             /* 本文1列目を横固定 */
  z-index: 7;                            /* ヘッダー1セル目(10)より下、他セルより上 */
  background: #f7faff;
  background-clip: padding-box;
  box-shadow: 2px 0 0 #d9e1ee;
}
/* 既に .sticky-col を使っている行はそのままでOK。上記が確実に上書きします。 */

/* === モバイル崩れの保険：列が潰れてズレるのを防ぐ（必要最小限） === */
@media (max-width: 640px){
  #firefighting-equipment-fire .styled-table.ff13{
    --mark-col: 4.0rem;                  /* ヘッダー/本文の幅ズレ防止の最小幅 */
  }
  #firefighting-equipment-fire .styled-table.ff13 th:nth-child(n+2),
  #firefighting-equipment-fire .styled-table.ff13 td:nth-child(n+2){
    min-width: 3.6rem;                   /* 押し潰れ防止の下限 */
  }
}

/* ===== ff13：第4・第5（ついでに第6）用の色アクセント ===== */
/* 使う色：桃 #fbd0d8 / 紫 #d9cff9 / 灰 #dcdcdc  */

/* 第4種：桃 */
#firefighting-equipment-fire .styled-table.ff13 tr.grp-4 .kindcell{
  background: #FFF6F8;              /* ほぼ白に近い桃の薄色 */
}
#firefighting-equipment-fire .styled-table.ff13 tr.grp-4 .kindcell::before{
  background: #fbd0d8;              /* 左帯：指定の桃 */
}

/* 第5種：紫 */
#firefighting-equipment-fire .styled-table.ff13 tr.grp-5 .kindcell{
  background: #F7F5FF;              /* ほぼ白に近い薄い紫 */
}
#firefighting-equipment-fire .styled-table.ff13 tr.grp-5 .kindcell::before{
  background: #d9cff9;              /* 左帯：指定の紫 */
}

/* 参考：第6種など灰を使うとき（今は未使用ならそのままでもOK） */
#firefighting-equipment-fire .styled-table.ff13 tr.grp-6 .kindcell{
  background: #F7F7F7;              /* うっすら灰 */
}
#firefighting-equipment-fire .styled-table.ff13 tr.grp-6 .kindcell::before{
  background: #dcdcdc;              /* 左帯：指定の灰 */
}

/* 1) トーン統一（色の設計子） */
:root{
  --ff-head:#EFF4FF;      /* thead 背景（今よりほんのり明るく） */
  --ff-sticky:#F7FAFF;    /* 1列目 sticky 背景 */
  --ff-grid:#E4EAF4;      /* 罫線 */
  --ff-shadow: rgba(33,59,107,.06);
  --ff-text:#1F2937;      /* 本文 */
  --ff-sub:#475569;       /* 補助テキスト */
}

/* 2) テーブル全体の質感を軽く（線を細く、角丸＆影） */
#firefighting-equipment-fire .styled-table{
  border-collapse: separate;
  border-spacing:0;
  border:1px solid var(--ff-grid);
  border-radius:12px;
  overflow:hidden;
  box-shadow: 0 4px 14px var(--ff-shadow);
  color:var(--ff-text);
}
#firefighting-equipment-fire .styled-table th,
#firefighting-equipment-fire .styled-table td{
  border-color: var(--ff-grid);
}

/* 3) ヘッダーをすっきり＆貼り付き時の奥行き */
#firefighting-equipment-fire .styled-table thead th{
  background: var(--ff-head);
  font-weight:700;
  letter-spacing:.02em;
  box-shadow: 0 1px 0 var(--ff-grid), 0 6px 12px var(--ff-shadow);
}

/* 4) 1列目 sticky の質感を統一 */
#firefighting-equipment-fire .styled-table.ff13 .sticky-col{
  background: var(--ff-sticky);
  box-shadow: 2px 0 0 var(--ff-grid);
}

/* 5) 行の密度と読みやすさ（余白と行高） */
#firefighting-equipment-fire .styled-table th,
#firefighting-equipment-fire .styled-table td{
  padding:.7rem .85rem;   /* 少し広げて窮屈感を解消 */
  line-height:1.55;
}

/* 6) 種別アクセントの色味を“淡・統一トーン”に寄せる */
#firefighting-equipment-fire .styled-table.ff13 tr.grp-1 .kindcell{ background:#F3F7FF; }
#firefighting-equipment-fire .styled-table.ff13 tr.grp-1 .kindcell::before{ background:#C7D8F6; }
#firefighting-equipment-fire .styled-table.ff13 tr.grp-2 .kindcell{ background:#FFF7EC; }
#firefighting-equipment-fire .styled-table.ff13 tr.grp-2 .kindcell::before{ background:#F8D9B6; }
#firefighting-equipment-fire .styled-table.ff13 tr.grp-3 .kindcell{ background:#EDF8F1; }
#firefighting-equipment-fire .styled-table.ff13 tr.grp-3 .kindcell::before{ background:#CDEEDB; }
/* 第4・5種（リクエスト色） */
#firefighting-equipment-fire .styled-table.ff13 tr.grp-4 .kindcell{ background:#FFF3F6; }
#firefighting-equipment-fire .styled-table.ff13 tr.grp-4 .kindcell::before{ background:#FBD0D8; } /* 桃 */
#firefighting-equipment-fire .styled-table.ff13 tr.grp-5 .kindcell{ background:#F6F3FF; }
#firefighting-equipment-fire .styled-table.ff13 tr.grp-5 .kindcell::before{ background:#D9CFF9; } /* 紫 */

/* 7) モバイル時：1列目をさらにタイト、○/−列は最小幅を確保 */
@media (max-width:640px){
  #firefighting-equipment-fire .styled-table.ff13{
    --kind-col: 12.4rem;  /* 既存よりもう一段だけ細く */
    --mark-col: 4.0rem;
  }
  #firefighting-equipment-fire .styled-table.ff13 th:nth-child(n+2),
  #firefighting-equipment-fire .styled-table.ff13 td:nth-child(n+2){
    min-width:3.6rem;
  }
  #firefighting-equipment-fire .styled-table.ff13 .kind{ font-size:.95rem; }
  #firefighting-equipment-fire .styled-table.ff13 .equip{ font-size:.92rem; }
}

/* 8) 視覚ノイズ軽減：ホバー強調は超控えめに */
#firefighting-equipment-fire .styled-table tbody tr:hover{
  background: rgba(99,102,241,.03);
}