@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: 2em 1em 2em;
  background-color: #fff;
  display: block; 
}

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

.dashboard-note {
  background-color: #f0f8ff; /* やさしいブルー系背景（モチベーションカラー） */
  border-left: 4px solid #4682b4; /* 落ち着いたブルーで強調 */
  padding: 1.5em;
  margin: 2em 0;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.dashboard-note h3 {
  margin-top: 0;
  font-size: 1.2rem;
  color: #004080;
}

.dashboard-note p {
  margin: 0.8em 0;
  line-height: 1.6;
}

.dashboard-note a.button {
  display: inline-block;
  margin-top: 1em;
  padding: 0.6em 1.2em;
  background-color: #004080;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.dashboard-note a.button:hover {
  background-color: #003060;
}

.law-index ul {
  padding: 0;
  list-style: none;
  margin: 1em 0;
}

.law-index li {
  margin: 0.6em 0;
  font-size: 1rem;
  background-color: #f1f5fb;
  margin-bottom: 0.5em;
  padding: 0.8em 1em;
  border-radius: 6px;
  border-left: 4px solid #005bac;
  transition: background-color 0.2s;
}

.law-index a {
  text-decoration: none;
  color: #005bac;
  font-weight: 500;
}

.law-index li:hover {
  background-color: #e4eefc;
}

.diagram {
  text-align: center;
  margin: 2rem 0;
}

.pyramid-diagram {
  max-width: 100%;
  height: auto;
}

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

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


/* 問題ヘッダーのUI */
.q-head { margin: 0 0 12px; }
.q-counter { display:flex; align-items:baseline; gap:.4rem; font-size:.95rem; color:#475569; }
.q-counter .pill { display:inline-block; padding:.15rem .6rem; border-radius:999px; background:#eef2ff; font-weight:700; }
.q-title { font-size:1.1rem; font-weight:700; margin-top:.35rem; line-height:1.5; }
.q-progress { height:6px; background:#f1f5f9; border-radius:999px; overflow:hidden; margin-top:.5rem; }
.q-progress .bar { height:100%; background:#2563eb; transition: width .25s ease; }
.q-counter .solved { margin-left:.5rem; color:#64748b; font-weight:600; }