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

body {
  font-family: 'Noto Sans JP', sans-serif;
  color: #222;
  background-color: #f9f9f9;
}

.site-main {
  max-width: 800px;
  margin: 0 auto;
  padding: 2.25em 1em 2em;
  background-color: #fff;
  display: block; 
}

/* SR-only */
.sr-only {
  position: absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* --- 表（角丸・薄グレー枠、1列目固定＋横スクロール） --- */
.phy-section .table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid #e5e7eb;
  border-radius:8px;
  background:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
  overflow:hidden;              /* 角丸を見せる */
}
.phy-section .styled-table{
  border-collapse:separate; border-spacing:0;
  width:100%; min-width:820px;
  table-layout:auto;            /* 他のfixed指定を打ち消し */
  background:#fff; font-size:16px;
}
.phy-section .styled-table th,
.phy-section .styled-table td{
  padding:12px 14px;
  border-right:1px solid #e5e7eb;
  border-bottom:1px solid #e5e7eb;
  vertical-align:middle;
  background:#fff;
  word-break:keep-all;
}
.phy-section .styled-table thead th{
  position:sticky; top:0; z-index:2;
  background:#f8fafc; font-weight:700;
}
.phy-section .styled-table .sticky-col{
  position:sticky; left:0; z-index:3;
  background:#fff; white-space:nowrap;
  box-shadow:1px 0 0 #e5e7eb;
}
.phy-section .styled-table tbody tr:nth-child(odd) td:not(.sticky-col),
.phy-section .styled-table tbody tr:nth-child(odd) th.sticky-col{
  background:#fcfcfd;
}

/* --- 画像の暴れ防止（ロゴは除外） --- */
body.basics .phy-section img{ max-width:700px; width:100%; height:auto; }
.header-container .logo{ height:50px; width:auto; max-width:none; }


.next-button {
  text-align: right;
  margin: 2rem 0;
}

.next-button .button {
  background-color: #1a355a;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.2s;
}

.next-button .button:hover {
  background-color: #163650;
}


/* === モバイルの自動文字拡大を無効化（このページの本文だけ） === */
body.basics .site-main{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* === テーブル見出し内 <small> の拡大＆右寄せを抑止 === */
.phy-section .styled-table thead th small{
  font-size: inherit !important;     /* 小さすぎ認定→強制拡大を防ぐ */
  line-height: inherit !important;
  display: inline !important;         /* block化で右に寄るのを防ぐ */
  text-align: inherit !important;     /* 親(th)の中央揃えに従わせる */
  float: none !important;
  margin: 0 !important;
}



/* 泡：最後の列（=油面密封性）を中央 */
.styled-table.foam-table th:last-child{ text-align: center !important; }

/* 水系まとめ：最後の列（=主な消火効果）を中央 */
.styled-table.watersum-table th:last-child{ text-align: center !important; }


/* 泡：7列目（油面密封性）だけ中央 */
.phy-section .table-scroll > table.styled-table.foam-table thead tr > th:nth-child(7) {
  text-align: center !important;
}

/* 水系まとめ：5列目（主な消火効果）だけ中央 */
.phy-section .table-scroll > table.styled-table.watersum-table thead tr > th:nth-child(5) {
  text-align: center !important;
}

/* 念のため：stickyな1列目は常に左寄せ */
.phy-section .styled-table thead tr > th.sticky-col {
  text-align: left !important;
}

/* === ページ骨格（他ページと同じ挙動に） === */
html { height: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-height: 100%; }

.site-wrapper{
  min-height: 100dvh;              /* ツールバー可変でも安全 */
  display: flex;
  flex-direction: column;
}

.site-header, .site-footer { flex: 0 0 auto; }
.main-container{ flex: 1 1 auto; width: 100%; }
.site-main{
  /* ページ幅は他ページに合わせる（必要なら 960px に） */
  max-width: 960px;                /* ← 800px だと別ページと印象が変わる */
  margin: 0 auto;
  padding: 24px 16px 32px;
  box-sizing: border-box;
}

/* ドキュメント全体のスクロールを殺さない保険 */
html, body { overflow-y: auto !important; }

/* iOSのゴムスクを弱めて“グラグラ”軽減（任意） */
body { overscroll-behavior-y: contain; }

/* テーブルラッパーは縦横どちらもスクロール可能に（内容が長い節の保険） */
.phy-section .table-scroll{
  overflow: auto;                  /* ← x だけでなく auto に */
  -webkit-overflow-scrolling: touch;
}
/* —— この表だけスクロールを無効化＆幅制約を解除 —— */
.table-scroll.no-scroll{
  overflow: visible;             /* 横スクロールを出さない */
  border: none;                  /* お好み：枠も外す */
  background: transparent;       /* お好み */
}

.styled-table.fit{
  min-width: 0 !important;       /* 既存の min-width:820px を打ち消す */
  width: 100%;
  table-layout: auto !important; /* 固定レイアウトを解除して自然に収める */
  font-size: 1rem;               /* 文字巨大化の保険（任意） */
}

/* sticky列は不要なので無効化（この表だけ） */
.styled-table.fit .sticky-col{
  position: static !important;
  left: auto !important;
  box-shadow: none !important;
  white-space: normal !important; /* 折り返し可にして狭くできるように */
}