@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: 3.25rem 1rem 2rem;
  background-color: #fff;
  display: block;
}
/* スマホはさらに少しだけ詰める */
@media (max-width: 600px) {
  .site-main { padding-top: 2.5rem; }
}

/* 先頭セクションの見出しは上マージンを0に（ダブり防止） */
.site-main .intro:first-child h2 { margin-top: 0; }
.site-main h2:first-of-type { margin-top: 0; }


.intro h2, .legend h3 {
  font-size: 1.4rem;
  margin-top: 1.5em;
  border-bottom: 2px solid #ccc;
}

.intro p {
  margin: 1em 0;
  line-height: 1.7;
}

.legend ul {
  list-style-type: none;
  padding-left: 0;
}
.legend li {
  margin: 0.4em 0;
}

.hidden {
  display: none !important;
}


/* テーブル全体の幅を広げ、境界線をまとめる */
.table-section table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

.table-section {
  overflow-x: auto;           /* テーブル幅が狭い画面でも横スクロール */
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1rem;
}

.styled-table {
  width: 100%;
  border-collapse: collapse;       /* セルの余分な隙間をなくす */
  table-layout: auto;              /* 内容に合わせて列幅を自動調整 */
  margin-bottom: 1.5rem;
}

.styled-table caption {
  caption-side: top;
  text-align: left;
  font-weight: bold;
  padding-bottom: 0.5rem;
  font-size: 1.1rem;
}

.styled-table tbody tr:nth-child(even) {
  background-color: #f8f9fa;  /* 薄いグレーで交互に色分け */
}

.styled-table th,
.styled-table td {
  border: 1px solid #dee2e6;
  padding: 0.75rem 1rem;
  vertical-align: top;        /* 長文やリストが上揃えに */
}

.styled-table td ul {
  margin: 0;
  padding-left: 1.2em;        /* 箇条書きのインデント調整 */
}

.styled-table td .note {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: #6c757d;             /* 注意書きは少し淡いグレーで */
}


/* th, td にそれぞれ枠線と余白を付与 */
.table-section th,
.table-section td {
  border: 1px solid #ccc;
  padding: 0.75rem;
  text-align: left;
}

/* ヘッダー行を薄いグレー背景に */
.table-section thead th {
  background-color: #f5f5f5;
  font-weight: bold;
}

/* 奇数行に背景色を入れる（視認性UP） */
.table-section tbody tr:nth-child(odd) {
  background-color: #fafafa;
}

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

/* first-child で左カラムだけ幅指定 */
.styled-table th:first-child {
  width: 150px;  /* 調整しやすい値に */
}

.styled-table-chap6-2 {
  width: 100%;
  table-layout: auto;
}

.styled-table-chap6-2 thead th {
  padding: 0.75rem 1rem;
  background: #f5f5f5;
  color: #222;
  border-bottom: 2px solid #ccc;
}

.styled-table-chap6-2 tbody tr:nth-child(even) {
  background: #fafafa;
}

.styled-table-chap6-2 td {
  padding: 0.75rem 1rem;
  border-top: 1px solid #e0e0e0;
}

/* スマホ：熱の発生機構テーブルの列幅を最適化（30% : 70%） */
@media (max-width: 600px) {
  .styled-table {
    table-layout: fixed;         /* 列幅指定を確実に反映 */
  }

  /* 左列＝「発熱の機構」：30%（既存の150px指定を上書き） */
  .styled-table th:first-child {
    width: 30% !important;
    white-space: nowrap;         /* 見出しが改行で縦に伸びすぎないように（任意） */
  }

  /* 右列＝「発熱する物質」：70% */
  .styled-table thead th:nth-child(2),
  .styled-table tbody td:nth-child(2) {
    width: 70%;
  }

  /* 余白を少しだけ詰めて情報量を確保（お好みで） */
  .styled-table th,
  .styled-table td {
    padding: 0.65rem 0.75rem;
    line-height: 1.6;
  }
}

/* クイズブロックの前後の余白を確保（このページ限定） */
.quiz-section { 
  margin: 2rem 0;                 /* セクション自体に基本の上下余白 */
}

/* クイズ本体の下に確実な余白を作る（クイズ①の末尾に効く） */
.quiz-section > .quiz {
  margin: 1rem 0 2rem !important; /* 下側をしっかり空ける */
}

/* 連続するクイズセクション同士の間隔を少し広めに */
.quiz-section + .quiz-section {
  margin-top: 2.5rem;
}

/* モバイルはさらにゆとりを持たせる（任意） */
@media (max-width: 600px) {
  .quiz-section > .quiz { margin-bottom: 2.75rem !important; }
}