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

/* ========== テーブル共通の最低限 ========== */
.table-container.table-scroll{ overflow-x:auto; padding:0; }

.styled-table{
  width:100%;
  table-layout:fixed;
  border-collapse:collapse;
  background:#fff;
}
.styled-table thead th{
  position:sticky; top:0; z-index:1;
  background:#f1f5fb;
  border-bottom:1px solid #e2e8f0;
  padding:12px 14px;
  text-align:left;
  font-weight:700;
  line-height:1.35;
  white-space:normal;
  word-break:auto-phrase;
}
.styled-table th,
.styled-table td{
  padding:12px 14px;
  border-bottom:1px solid #eaeef5;
  vertical-align:top;
}
.styled-table tbody tr:hover{ background:#fafbfd; }

/* 1列目=見出しセルは中央/改行なし。2列目以降は折り返し可 */
.styled-table :is(th,td):first-child{ white-space:nowrap; text-align:center; }
.styled-table .name{ text-align:left; line-height:1.6; }

/* 行内リスト（スラッシュ区切り） */
.name .equip-list{ display:flex; flex-wrap:wrap; gap:.25rem .5rem; align-items:baseline; min-width:0; }
.name .equip-list > span{ display:inline-block; white-space:nowrap; min-width:0; }
.name .equip-list > span::after{ content:" /"; }
.name .equip-list > span:last-child::after{ content:""; }

/* “100㎡”などは1行に */
.styled-table .cautions .fireproof-structure,
.styled-table .cautions .non-combustible-material{ white-space:nowrap; }

/* アクセント付き見出しセル（使っている場合のみ） */
.styled-table th.class-tag{ background:#fbfdff; color:#1e2f4b; font-weight:700; }
.styled-table th[scope=rowgroup]{ border-left:4px solid #6da6ff; }

/* スマホは少しコンパクトに */
@media (max-width:640px){
  .styled-table th, .styled-table td{ padding:10px 12px; }
  .styled-table thead th{ font-size:.95rem; }
}

/* ========== 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; }

.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); }
}

/* セクション間の余白 */
#transport-container{ margin-top:18px; }

/* 2列：消火設備の種類（区分を細く） */
.table--equip col:first-child{ width:7.2rem; }
@media (max-width:640px){ .table--equip col:first-child{ width:6.6rem; } }

/* 3列：所要単位に対応する…（Excel比率） */
.table--capacity col:nth-child(1){ width:36%; }
.table--capacity col:nth-child(2){ width:18%; }
@media (max-width:640px){
  .table--capacity col:nth-child(1){ width:32%; }
  .table--capacity col:nth-child(2){ width:20%; }
}

/* 3列表：第2列（構造名）を統一して中央寄せ・行間も揃える */
.table--capacity th.name{
  text-align: center !important;
  white-space: nowrap;
  line-height: 1.3;
  vertical-align: middle;   /* 右列が複数行でも “不燃材料” が上下中央に */
}

/* 念のため、右列はこれまで通り上寄せのまま */
.table--capacity td:nth-child(3){
  vertical-align: top;
}

/* 設備基準テーブル専用の幅と折返し */
.styled-table.equipment-standards{ table-layout: fixed; }

/* 1列目＝区分は細く、2列目＝種類はやや細く、3列目＝残り幅 */
.styled-table.equipment-standards col.w-class { width: 7.2rem; }  /* PC */
.styled-table.equipment-standards col.w-grade { width: 22%; }
@media (max-width: 640px){
  .styled-table.equipment-standards col.w-class { width: 6.6rem; } /* SPでも細く */
  .styled-table.equipment-standards col.w-grade { width: 28%; }
}

/* 2列目「消火設備の種類」は“良い位置”で改行させる */
.styled-table.equipment-standards .grade{
  text-align: center;         /* 中央寄せのまま */
  white-space: normal;        /* 折返し許可 */
  word-break: normal;         /* 日本語の任意点での分割を避ける */
  line-break: strict;         /* 句読点や括弧前後で綺麗に */
  overflow-wrap: anywhere;    /* どうしても収まらない時は保険で折返し */
}

/* スラッシュ区切りで確実に改行させたいときのヘルパー */
.styled-table.equipment-standards .grade .sep{
  white-space: pre;           /* 見た目の空白を維持 */
}
.styled-table.equipment-standards .grade .sep::after{
  content: "\A";              /* 改行を差し込む */
  white-space: pre;
}

/* 第5種 2段目のように “その行でセルが1つしか無い” ケースは折り返し許可 */
.styled-table.equipment-standards tbody tr > td:only-child{
  white-space: normal !important;
  word-break: auto-phrase;
  overflow-wrap: anywhere;   /* 保険 */
  text-align: left;          /* 右列の文章は左寄せで読みやすく */
}

/* 困難性テーブルの微調整 */
.styled-table.difficulty-table{ table-layout: fixed; }
.styled-table.difficulty-table col.w-kind{ width: 16rem; }   /* 「区分」をやや広めに */
@media (max-width:640px){
  .styled-table.difficulty-table col.w-kind{ width: 12rem; }
}

.styled-table.difficulty-table .center{ text-align:center; font-weight:600; }
.styled-table.difficulty-table .must{ text-align:center; font-weight:700; }
.styled-table.difficulty-table .dash{ text-align:center; color:#94a3b8; }

/* 見出し「消火設備」を中央に、背景を少し強調。折返し事故を防ぐ */
.styled-table.difficulty-table thead .grouphead{
  text-align: center;
  background: #eaf2ff;        /* 見出し帯を淡いブルーに */
  font-weight: 700;
  white-space: nowrap;         /* 2行目へ変な折返しをさせない */
}

/* 区分列はやや狭く、右の5列に幅を回す */
.styled-table.difficulty-table{ table-layout: fixed; }
.styled-table.difficulty-table col.w-kind{ width: 14rem; }
@media (max-width: 640px){
  .styled-table.difficulty-table col.w-kind{ width: 10.5rem; }
}

/* ヘッダーの上下境界を揃えて視認性UP（任意） */
.styled-table.difficulty-table thead th{
  border-bottom: 1px solid #dbe4f0;
}

/* 「第1種〜第5種」の見出しをセンター揃え */
.styled-table.difficulty-table thead tr:nth-child(2) th{
  text-align: center;
  vertical-align: middle;
}

/* 表内の箇条書きの体裁 */
.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; }

/* 2列テーブルの幅バランス（左を細めに） */
.styled-table col.w-class{ width: 12rem; }
@media (max-width:640px){
  .styled-table col.w-class{ width: 9.5rem; }
}

/* 表内リスト */
.cell-list{ margin:0; padding-left:1.2em; }
.cell-list > li{ margin:.35rem 0; }
.no-index{ list-style: none; }           /* 外側の番号を消す */

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

/* 特定のリスト項目だけ番号を消す */
.cell-list .no-index{ list-style: none; }

/* Cセクション専用の調整 */
#other-factory .styled-table{
  width:100%;
  table-layout:fixed;     /* colgroupの幅を優先 */
}

/* 列幅：1列目やや広め / 2列目は短文＋長文の両対応 / 3列目は残り全部 */
#other-factory .styled-table col.w-class    { width: 15rem; }  /* 施設名 */
#other-factory .styled-table col.col-target { width: 12ch;  }  /* 設置対象（"全部"想定でやや広め） */
#other-factory .styled-table col.col-equip  { width: auto;  }  /* 説明 */

#other-factory .styled-table th,
#other-factory .styled-table td{
  width:auto;             /* 既存の幅指定を打ち消し */
  box-sizing:border-box;  /* パディング分も計算に含める */
}

/* 2列目：基本は中央寄せ。折り返しOKに戻す（←ここが重要） */
#other-factory .styled-table th:nth-child(2),
#other-factory .styled-table td:nth-child(2){
  text-align:center;
  white-space:normal;           /* 折り返し可 */
  word-break:normal;
  overflow-wrap:anywhere;       /* 長い語でも崩さない保険 */
  padding-left:.5rem;
  padding-right:.5rem;
}

/* 最下行の2列目は文が長いので左寄せにする */
#other-factory .styled-table tbody tr:last-child td:nth-child(2){
  text-align:left;
}

/* スマホ：少し詰める */
@media (max-width:768px){
  #other-factory .styled-table col.w-class    { width: 12rem; }
  #other-factory .styled-table col.col-target { width: 10ch;  }
}

/* スマホ調整（必要に応じて） */
@media (max-width: 768px){
  .styled-table{ min-width: 760px; }
  .styled-table col.w-col1{ width: 8.5rem; }
  .styled-table col.w-col2{ width: 22rem; }
  .styled-table col.w-colN{ width: 7rem; }
}


/* ==== 消火設備×適応火災マップ（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;        /* 折返し許可（既存維持） */
    word-break: auto-phrase;    /* 日本語に自然な改行 */
    overflow-wrap: anywhere;    /* 英数長語の保険 */
  }
}

/* ========================
   行グループの色アクセント（第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);
}