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

/* ==== 第1章33節：標識・掲示板（このページ専用） ==== */

/* 画像ブロック（図＋キャプション） */
body.basics .site-main #hazard-sign .sign-figure {
  margin: 1rem 0 1.25rem;
  text-align: center;
}

/* SVG/画像の枠・最大幅・背景 */
body.basics .site-main #hazard-sign .sign-figure img,
body.basics .site-main #hazard-sign .sign-figure object {
  max-width: min(100%, 640px);
  height: auto;
  border: 1px solid var(--border-color, #ddd);
  border-radius: 8px;
  padding: .5rem;
  background: #fff;             /* ダークモード未使用環境でも白で視認性確保 */
  box-sizing: border-box;
}

/* キャプション */
body.basics .site-main #hazard-sign .sign-figure figcaption {
  margin-top: .5rem;
  font-size: .9rem;
  color: #555;
  line-height: 1.5;
}

/* スマホ微調整（横幅が狭いときの余白） */
@media (max-width: 480px) {
  body.basics .site-main #hazard-sign .sign-figure img,
  body.basics .site-main #hazard-sign .sign-figure object {
    padding: .4rem;
    border-radius: 6px;
  }
  body.basics .site-main #hazard-sign .sign-figure figcaption {
    font-size: .88rem;
  }
}

/* ダークテーマ配慮（OSレベル） */
@media (prefers-color-scheme: dark) {
  body.basics .site-main #hazard-sign .sign-figure img,
  body.basics .site-main #hazard-sign .sign-figure object {
    border-color: #444;
    background: #111;
  }
  body.basics .site-main #hazard-sign .sign-figure figcaption {
    color: #bbb;
  }
}

/* 統一フレーム。中身が横長/縦長でも“綺麗に”収まる */
.sign-figure.sign-box-2x1 { aspect-ratio: 2 / 1; }
.sign-figure.sign-box-3x1 { aspect-ratio: 3 / 1; } /* 横長バナー系 */
.sign-figure .sign-img {
  width: 100%;
  height: 100%;
  object-fit: contain;       /* 余白を残して収める */
  display: block;
}

/* signs_and_notices.css に追加 */
.law-section p { margin-bottom: 0.8rem; }                 /* 段落の下余白をやや小さく */
.sign-figure      { margin: 0.75rem auto 0; }              /* 図の上余白を詰める */
.law-section p + .sign-figure { margin-top: 0.5rem; }      /* 直前が段落の時はさらに詰める */
.sign-figure img { display:block; }                        /* 画像周辺の隙間防止 */

/* 画像の比率保持＆横幅フィット */
.sign-img{display:block;width:100%;height:auto;aspect-ratio:900/320}

/* 図ブロックの幅/余白（横長3:1想定） */
.sign-box-3x1{max-width:900px;margin:.5rem auto 0}

/* 前段落との余白を少し詰める（任意） */
.law-section p + .sign-figure{margin-top:.5rem}

/* 列幅：1列目・2列目は狭く固定、3列目は可変 */
.table-fixed{ table-layout: fixed; width: 100%; }
.w-board{ width: 8.5rem; }  /* 掲示板 */
.w-class{ width: 6.5rem; }  /* 類別   */

/* 1・2列は折り返さない／3列は折り返しOK */
.hazard-map td:nth-child(1),
.hazard-map td:nth-child(2),
.hazard-map th:nth-child(1),
.hazard-map th:nth-child(2){
  white-space: nowrap;
}
.hazard-map td:nth-child(3){ white-space: normal; }

/* バッジ（視認性だけ上げる。装飾は最小限） */
.tag{
  display:inline-block; padding:.15rem .5rem; border:1px solid #000; border-radius:2px;
  background:#fff; color:#000; font-weight:700; line-height:1;
}
.tag-water{ background:#e6f0ff; }   /* 青地の示唆（淡色） */
.tag-danger{ background:#ffe6e6; }  /* 赤地の示唆（淡色） */

/* 備考チップ（任意） */
.note{ margin:.5rem 0 0; font-size:.9rem; }
.chip{ padding:.1rem .35rem; border:1px solid #aaa; border-radius:2px; }
.chip-water{ background:#e6f0ff; }
.chip-danger{ background:#ffe6e6; }

/* 既存 styled-table の枠線/余白に合わせる前提。必要なら最小指定 */
.styled-table th, .styled-table td{ padding:.55rem .7rem; }