/* /css/Main_Class4_Dangerous_Substances.css */
/* === 乙4：主な危険物 / 特殊引火物（このページ専用）=== */

/* セクション余白 */
.pro-section.special-flammables {
  margin-block: 1.25rem 2rem;
}

/* --- キーポイント（dl） --- */
.pro-section.special-flammables .key-props {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .25rem 1rem;
  padding: .75rem 1rem;
  border: 1px solid var(--line-color, #e5e7eb);
  border-radius: .75rem;
  background: var(--surface-2, #f9fafb);
  margin-block: .75rem 1rem;
}
.pro-section.special-flammables .key-props dt {
  font-weight: 600;
  white-space: nowrap;
}
.pro-section.special-flammables .key-props dd {
  margin: 0;
}

/* --- テーブル横スクロール（スマホ対策） --- */
.pro-section.special-flammables .table-container {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  border: 1px solid var(--line-color, #e5e7eb);
  border-radius: .75rem;
  background: #fff;
}

/* 表の最小幅を確保して詰まり防止 */
.pro-section.special-flammables .styled-table {
  width: 100%;
  min-width: 720px;               /* 列が読める最低幅。必要に応じて調整可 */
  border-collapse: collapse;
}
.pro-section.special-flammables .styled-table th,
.pro-section.special-flammables .styled-table td {
  padding: .55rem .75rem;
  border-bottom: 1px solid #eee;
  white-space: nowrap;            /* 数字の折返しを防止 */
  vertical-align: middle;
  font-size: .95rem;
}

/* ヘッダ固定（横スクロール時の視認性UP） */
.pro-section.special-flammables .styled-table thead th {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}

/* 数字の桁揃え＆右寄せ */
.pro-section.special-flammables .styled-table td:nth-child(n+2),
.pro-section.special-flammables .styled-table th:nth-child(n+2) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* 先頭列を見失わないようにする（任意）
   → テーブルに .sticky-first-col を付けたときだけ有効 */
.pro-section.special-flammables .sticky-first-col th:first-child,
.pro-section.special-flammables .sticky-first-col td:first-child {
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 2;
  box-shadow: 1px 0 0 #eee;
}

/* 備考 */
.pro-section.special-flammables .table-note {
  font-size: .85rem;
  color: #666;
  margin: .5rem .25rem 0;
}

/* 狭小幅ではキーポイントを縦1列に */
@media (max-width: 560px) {
  .pro-section.special-flammables .key-props {
    grid-template-columns: 1fr;
    gap: .15rem .75rem;
  }
}

/* === “名称が長いテーブル”専用（第4石油類／動植物油類） === */

/* 先頭列は折返し可＋読みやすい行間 */
.styled-table.table-longnames th:first-child,
.styled-table.table-longnames td:first-child {
  white-space: normal;
  line-height: 1.35;
  word-break: keep-all;         /* 日本語の禁則を保ちつつ */
  overflow-wrap: anywhere;      /* 収まらない語も折り返す保険 */
  padding-left: .75rem;         /* 左に詰まり過ぎを防止（動植物油類の見た目ケア） */
}

/* <small> を確実に縮小 */
.styled-table.table-longnames th:first-child small,
.styled-table.table-longnames td:first-child small {
  font-size: .85em !important;
  display: inline-block;
}

/* 数値列は右寄せ（既存指定が弱い環境向けの保険） */
.styled-table.table-longnames td:nth-child(n+2),
.styled-table.table-longnames th:nth-child(n+2) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* —— スマホ幅の特別対応 —— */
@media (max-width: 560px) {
  /* 先頭列の sticky を“無効化”して他列が隠れないようにする */
  .styled-table.table-longnames.sticky-first-col th:first-child,
  .styled-table.table-longnames.sticky-first-col td:first-child {
    position: static !important;
    left: auto !important;
    box-shadow: none !important;
  }

  /* 先頭列の幅はコンパクトに（残り列が見える／スクロールしやすい） */
  .styled-table.table-longnames th:first-child,
  .styled-table.table-longnames td:first-child {
    min-width: 8rem;   /* 以前より少し狭く */
    max-width: 20rem;
    padding-right: .5rem;
  }

  /* small をさらに小さく（任意） */
  .styled-table.table-longnames td:first-child small {
    font-size: .8em !important;
  }
}

/* —— タブレット以上では sticky を活かす（PCの快適さ維持） —— */
@media (min-width: 561px) {
  .styled-table.table-longnames.sticky-first-col th:first-child,
  .styled-table.table-longnames.sticky-first-col td:first-child {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 2;
    box-shadow: 1px 0 0 #eee;
  }
}

/* === “名称が長いテーブル”共通（第4石油類／動植物油類）=== */

/* 先頭列：折返し・行間・余白（共通） */
.styled-table.table-longnames th:first-child,
.styled-table.table-longnames td:first-child {
  white-space: normal;
  line-height: 1.35;
  word-break: keep-all;
  overflow-wrap: anywhere;
  padding-left: .75rem;
}

/* <small> の縮小（共通） */
.styled-table.table-longnames th:first-child small,
.styled-table.table-longnames td:first-child small {
  font-size: .85em !important;
  display: inline-block;
}

/* 2列目以降＝数値を右寄せ（共通） */
.styled-table.table-longnames th:nth-child(n+2),
.styled-table.table-longnames td:nth-child(n+2) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* 動植物油類だけ：第2列（物品名・詳細）を中央寄せ＆サイズ統一 */
.styled-table.table-longnames.table-text-col2 th:nth-child(2),
.styled-table.table-longnames.table-text-col2 td:nth-child(2) {
  text-align: center !important;   /* ← 中央寄せ */
  white-space: normal;
  line-height: 1.35;
  font-size: .95rem;                /* 他列と統一（スマホで大きくならないよう明示） */
  vertical-align: middle;
}

/* 動植物油類だけ：第3列（ヨウ素価）も中央寄せに */
.styled-table.table-longnames.table-text-col2 th:nth-child(3),
.styled-table.table-longnames.table-text-col2 td:nth-child(3) {
  text-align: center !important;    /* 右寄せルールを上書き */
  font-variant-numeric: tabular-nums; /* 桁そろえ維持（任意） */
  vertical-align: middle;
}

/* スマホ時は第2列をほんの少しだけ小さく（読みやすさと統一感） */
@media (max-width: 560px) {
  .styled-table.table-longnames.table-text-col2 td:nth-child(2) {
    font-size: .9rem;               /* ※必要なければ消してOK */
  }
}