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

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


.styled-table-chap10 thead {
  background-color: #f5f5f5;
}
.styled-table-chap10 th {
  font-weight: 600;
  text-align: center;
  padding: 0.75em;
}

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

/* テーブル内の ul のインデントを抑える */
.styled-table-chap10 td ul {
  margin: 0;               /* 上下の余白をリセット */
  padding-left: 1em;       /* 左インデントを 1em に */
  list-style-position: inside;  /* マーカーをリスト内に収める */
}

/* もし td 自体の左右パディングが大きい場合は調整を */
.styled-table-chap10 td {
  padding: 0.75em 0.75em;  /* 上下左右とも 0.75em に統一 */
}

.styled-table-chap10-2 {
  width: 100%;
  border-collapse: collapse;
}
.styled-table-chap10-2 th {
  background-color: #f5f5f5;
  font-weight: 600;
  text-align: left;
  padding: 0.75em;
  border: 1px solid #ddd;
}
.styled-table-chap10-2 td {
  padding: 0.75em;
  border: 1px solid #ddd;
}

.styled-table-chap10-2 tbody tr:nth-child(odd) {
  background-color: #fafafa;
}

/* モバイルはさらに少し詰めると見栄え◎ */
@media (max-width: 600px) {
  body.basics .site-main { padding-top: 1.75em; }
}

/* スマホ時は列幅を明示して「申請事由」を広めに */
@media (max-width: 600px) {
  .styled-table-chap10 {
    table-layout: fixed;   /* 幅指定を確実に効かせる */
  }

  /* 1列目：手続（短いので狭め） */
  .styled-table-chap10 th:nth-child(1),
  .styled-table-chap10 td:nth-child(1) { width: 10%; }

  /* 2列目：申請事由（広め） */
  .styled-table-chap10 th:nth-child(2),
  .styled-table-chap10 td:nth-child(2) { width: 26%; }

  /* 3列目：申請先 */
  .styled-table-chap10 th:nth-child(3),
  .styled-table-chap10 td:nth-child(3) { width: 34%; }

  /* 4列目：添付するもの */
  .styled-table-chap10 th:nth-child(4),
  .styled-table-chap10 td:nth-child(4) { width: 30%; }

  /* 行間・余白を少しだけ詰めて視認性UP（任意） */
  .styled-table-chap10 th,
  .styled-table-chap10 td { padding: 0.6rem; line-height: 1.5; }
}