* { box-sizing: border-box; }
html { font-size:16px; }
html[data-fontsize="large"]   { font-size:20px; }
html[data-fontsize="xlarge"]  { font-size:24px; }
html[data-fontsize="xxlarge"] { font-size:28px; }
body {
  font-family: "Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  line-height: 1.85; color:#2f3640; background:#f5f7fa; margin:0;
  font-size:1rem; overflow-wrap:break-word;
}
.chapter-header {
  max-width:1100px; margin:16px auto 0;
  background:linear-gradient(135deg,#0b3d91,#1e88e5);
  color:#fff; padding:56px 40px; border-radius:14px;
}
.chapter-header h1 { margin:0 0 14px; font-size:2.375rem; line-height:1.3; }
.chapter-header p { margin:0; font-size:1.125rem; }
.chapter-number { display:inline-block; margin-bottom:10px; font-weight:700; letter-spacing:.06em; opacity:.9; }
.container { max-width:1100px; margin:30px auto 60px; padding:0 20px; }
.breadcrumb { font-size:.875rem; margin-bottom:18px; color:#667085; }
.breadcrumb a { color:#1e88e5; text-decoration:none; }
section {
  background:#fff; border-radius:12px; padding:30px; margin-bottom:28px;
  box-shadow:0 3px 12px rgba(0,0,0,.06);
}
h2 { border-left:6px solid #1e88e5; padding-left:14px; margin-top:0; color:#1f2937; }
h3 { color:#0b3d91; margin-top:28px; }
.card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; }
.card { background:#f4f8ff; border-radius:10px; padding:20px; }
.summary-box, .note-box, .warning-box, .tip-box {
  border-radius:10px; padding:20px; margin:20px 0;
}
.summary-box { background:#f8fbff; border:1px solid #dcecff; }
.note-box { background:#f7f7f8; border-left:5px solid #64748b; }
.warning-box { background:#fff8e8; border-left:5px solid #d97706; }
.tip-box { background:#eefbf3; border-left:5px solid #16a34a; }
table { width:100%; border-collapse:collapse; margin-top:20px; }
th { background:#0b3d91; color:#fff; padding:12px; text-align:left; }
td { border:1px solid #dfe3e8; padding:12px; vertical-align:top; }
tr:nth-child(even) { background:#fafbfc; }
pre.code, code.inline {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
pre.code {
  background:#111827; color:#e5e7eb; padding:18px; border-radius:10px;
  overflow:auto; line-height:1.55;
}
code.inline { background:#f1f5f9; padding:2px 5px; border-radius:4px; }
.mermaid { text-align:center; overflow-x:auto; }
blockquote {
  margin:20px 0; padding:16px 20px; border-left:5px solid #1e88e5; background:#f7fbff;
}
.button {
  display:inline-block; background:#1e88e5; color:#fff; padding:11px 20px;
  border-radius:8px; text-decoration:none; font-weight:600; transition:.2s;
}
.button:hover { background:#0b3d91; }
.chapter-navigation {
  display:flex; justify-content:space-between; gap:14px; margin-top:36px; flex-wrap:wrap;
}
.chapter-navigation .nav-center { margin-left:auto; margin-right:auto; }
.small { font-size:.92em; color:#667085; }
.checklist li { margin:8px 0; }
@media(max-width:700px){
  .chapter-header { margin:8px; padding:36px 22px; }
  .chapter-header h1 { font-size:1.75rem; }
  section { padding:22px; }
  .chapter-navigation { flex-direction:column; }
  .chapter-navigation .button { text-align:center; width:100%; }
  .chapter-navigation .nav-center { margin:0; }
}

/* ===== トップページ(index)のヘッダー・フッター ===== */
.hero {
  max-width:1100px; margin:16px auto 0;
  background:linear-gradient(135deg,#0b3d91,#1e88e5);
  color:#fff; padding:56px 40px; border-radius:14px;
}
.hero h1 { margin:0 0 14px; font-size:2.375rem; line-height:1.3; }
.hero p { margin:0; font-size:1.125rem; }
footer {
  max-width:1100px; margin:0 auto; padding:24px 20px 40px;
  color:#667085; font-size:.875rem; text-align:center;
}

/* ===== 目次リスト ===== */
.chapter-list { list-style:none; padding:0; margin:0; }
.chapter-list li { margin:10px 0; }
.chapter-list a {
  display:block; padding:14px 18px; border-radius:10px;
  background:#f4f8ff; border:1px solid #dcecff;
  color:#1f2937; text-decoration:none; transition:.15s;
  overflow-wrap:anywhere;
}
.chapter-list a:hover { background:#e6f1ff; border-color:#1e88e5; }
.chapter-list a strong { color:#0b3d91; margin-right:.5em; }

/* ===== 文字サイズ設定バー(本文サイズに追従させず一定に保つ) ===== */
.settings-bar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:22px; }
.settings-bar .settings-label { font-size:13px; opacity:.95; }
.settings-bar button {
  font-family:inherit; font-size:13px; white-space:nowrap; color:#fff;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.55);
  border-radius:999px; padding:3px 14px; cursor:pointer; line-height:1.6;
}
.settings-bar button:hover { background:rgba(255,255,255,.3); }
.settings-bar button.active { background:#fff; color:#0b3d91; border-color:#fff; font-weight:700; }

/* ===== 表:はみ出す場合は表の中だけ横スクロール ===== */
.table-wrap { overflow-x:auto; margin:20px 0; }
.table-wrap table { margin-top:0; }
.table-wrap th, .table-wrap td { min-width:8em; }
.table-wrap.scrollable::before {
  content:"← 横にスクロールできます →";
  display:block; text-align:center; font-size:.72rem; color:#667085; margin-bottom:4px;
}

/* ===== 文字を大きくしてもページ全体が横に広がらないようにする ===== */
.chapter-navigation .button { min-width:0; overflow-wrap:anywhere; }
.card, section, li { min-width:0; }

@media(max-width:700px){
  .hero { margin:8px; padding:36px 22px; }
  .hero h1 { font-size:1.75rem; }
  .container { padding:0 14px; }
}