@charset "UTF-8";
/* 世界一わかりやすいCloudflareの教科書
   デザイン: DESIGN.md（Schoo）準拠。ライトのみ（元仕様がダークモード非対応のため）。
   本文サイズだけは長文の読み物向けに 17px / line-height 1.9 へ拡大している。 */

:root {
  --orange: #e29447;
  --orange-cta: #d8934e;
  --orange-text: #d27a3e;
  --text: #1f1f1f;
  --text-dark: #1e1e1e;
  --text-sub: #404044;
  --text-muted: #aaaaaa;
  --beige: #f5f2ee;
  --border: #e1e1e1;
  --input-bg: #eeeeee;
  --white: #ffffff;
  --danger: #dc3545;
  --success: #28a745;

  --font-main: Avenir, "Helvetica Neue", YuGothic, "Yu Gothic", "Hiragino Sans",
    "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, meiryo, osaka,
    "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --xs: 4px;
  --s: 8px;
  --m: 16px;
  --l: 24px;
  --xl: 40px;
  --xxl: 80px;

  --header-h: 60px;
  --sidebar-w: 288px;
  --measure: 720px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--font-main);
  font-size: 17px;
  line-height: 1.9;
  font-feature-settings: normal;
  word-break: normal;
  overflow-wrap: break-word;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--orange-text); text-decoration: underline; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--text-dark); color: var(--white); padding: var(--s) var(--m);
  border-radius: 0 0 8px 0; text-decoration: none;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

/* ---------- ヘッダー ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: rgba(30, 30, 30, 0.05) 0 4px 8px;
  backdrop-filter: saturate(180%) blur(6px);
}
.site-header__inner {
  height: 100%; max-width: 1200px; margin: 0 auto;
  padding: 0 var(--m);
  display: flex; align-items: center; justify-content: space-between; gap: var(--m);
}
.site-header__logo {
  display: inline-flex; align-items: center; gap: var(--s);
  color: var(--text-dark); text-decoration: none;
  font-size: 16px; font-weight: 700; letter-spacing: 0.02em;
}
.site-header__mark {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--orange);
  box-shadow: inset 0 0 0 4px var(--white), 0 0 0 1px var(--orange);
}

.nav-toggle {
  display: inline-flex; align-items: center; gap: var(--s);
  background: transparent; color: var(--orange-text);
  border: 2px solid var(--orange); border-radius: 100px;
  padding: 5px 14px; font: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.nav-toggle__bars { display: inline-flex; flex-direction: column; gap: 3px; }
.nav-toggle__bars i { display: block; width: 14px; height: 2px; background: currentColor; border-radius: 2px; }

/* ---------- レイアウト ---------- */
.layout {
  max-width: 1200px; margin: 0 auto;
  padding: calc(var(--header-h) + var(--xl)) var(--m) var(--xxl);
  display: grid; grid-template-columns: 1fr; gap: var(--xl);
}

/* ---------- サイドバー ---------- */
.sidebar__inner { position: sticky; top: calc(var(--header-h) + var(--l)); }
.sidebar__heading {
  margin: 0 0 var(--m);
  font-size: 14px; font-weight: 900; letter-spacing: 0.1em; color: var(--text-dark);
  white-space: nowrap;
}
.sidebar__progress {
  margin: var(--m) 0 0; padding-top: var(--m);
  border-top: 1px solid var(--border);
  font-size: 12px; font-weight: 700; color: var(--text-muted); line-height: 1.6;
}
.nav, .nav__list { list-style: none; margin: 0; padding: 0; }
.nav__part + .nav__part { margin-top: var(--l); }
.nav__part-label {
  margin: 0; font-size: 13px; font-weight: 700; color: var(--text-dark);
  letter-spacing: 0.04em;
}
.nav__part-note { margin: 2px 0 0; font-size: 11px; font-weight: 700; color: var(--text-muted); line-height: 1.5; }
.nav__list { margin-top: var(--s); }
.nav__link {
  display: grid; grid-template-columns: 26px 1fr 16px; align-items: baseline; gap: var(--s);
  padding: 7px var(--s); border-radius: 8px;
  color: var(--text-sub); text-decoration: none;
  font-size: 13px; line-height: 1.6;
}
.nav__link:hover { background: var(--beige); color: var(--text); }
.nav__link.is-current { background: var(--beige); color: var(--text-dark); font-weight: 700; }
.nav__num { font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.04em; }
.nav__link.is-current .nav__num { color: var(--orange-text); }
.nav__check { align-self: center; width: 16px; height: 16px; }
.nav__link.is-read .nav__check {
  background: var(--orange); border-radius: 50%;
  box-shadow: inset 0 0 0 4px var(--white), 0 0 0 1px var(--orange);
}

.sidebar-scrim { display: none; }

/* ---------- 本文 ---------- */
.main { min-width: 0; max-width: var(--measure); }

.chapter__header { margin-bottom: var(--xl); }
.chapter__eyebrow {
  margin: 0 0 var(--m); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s);
  font-size: 11px; line-height: 1.4;
}
.chapter__part {
  background: var(--orange); color: var(--white);
  border-radius: 4px; padding: 2px 8px; font-weight: 700; white-space: nowrap;
}
.chapter__meta { color: var(--text-muted); font-weight: 700; }
.chapter__title {
  margin: 0; font-size: 34px; font-weight: 700; line-height: 1.44;
  letter-spacing: 0.01em; color: var(--text-dark);
}
.chapter__subtitle { margin: var(--s) 0 0; font-size: 15px; color: var(--text-sub); line-height: 1.7; }

.chapter h2 {
  margin: var(--xxl) 0 var(--m);
  font-size: 24px; font-weight: 700; line-height: 1.5; letter-spacing: 0.02em;
  color: var(--text-dark);
  padding-left: 14px; border-left: 5px solid var(--orange);
}
.chapter h3 {
  margin: var(--xl) 0 var(--s);
  font-size: 18px; font-weight: 700; line-height: 1.6; color: var(--text-dark);
}
.chapter p { margin: 0 0 1.4em; }
.chapter ul, .chapter ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.chapter li { margin-bottom: 0.5em; }
.chapter strong { font-weight: 700; background: linear-gradient(transparent 62%, rgba(226, 148, 71, 0.28) 62%); }
.chapter hr { border: 0; border-top: 1px solid var(--border); margin: var(--xl) 0; }

.lede { font-size: 18px; line-height: 1.95; }

code {
  font-family: var(--font-mono); font-size: 0.86em;
  background: var(--input-bg); color: var(--text-dark);
  padding: 2px 6px; border-radius: 4px;
}
pre {
  margin: 0 0 1.4em; padding: var(--m); overflow-x: auto;
  background: var(--text-dark); color: #f4f1ec;
  border-radius: 8px; font-size: 14px; line-height: 1.75;
}
pre code { background: transparent; color: inherit; padding: 0; font-size: 1em; }

/* ---------- 表 ---------- */
.table-wrap { overflow-x: auto; margin: var(--xl) 0; }
.chapter table {
  border-collapse: collapse; width: 100%; min-width: 480px;
  font-size: 15px; line-height: 1.7;
}
.chapter th, .chapter td {
  border-bottom: 1px solid var(--border); padding: 12px var(--m); text-align: left;
  vertical-align: top;
}
.chapter thead th {
  background: var(--beige); font-size: 12px; font-weight: 900; letter-spacing: 0.06em;
  color: var(--text-dark); white-space: nowrap;
}
.chapter tbody th { font-weight: 700; }
.chapter td .note, .chapter tbody th .note {
  display: block; font-size: 12px; font-weight: 400; color: var(--text-sub);
  margin-top: 2px; line-height: 1.6;
}

/* ---------- 図解 ---------- */
.figure { margin: var(--xl) 0; }
.figure__scroll { overflow-x: auto; }
.figure svg { width: 100%; height: auto; display: block; }
.figure figcaption {
  margin-top: var(--s); font-size: 12px; line-height: 1.8; color: var(--text-sub);
}
.figure__hint { display: none; }

/* ---------- ボックス類 ---------- */
.goals {
  background: var(--beige); border-radius: 12px; padding: var(--l);
  margin: 0 0 var(--xl);
}
.goals__label {
  margin: 0 0 var(--s); font-size: 12px; font-weight: 900; letter-spacing: 0.1em;
  color: var(--orange-text);
}
.goals ul { margin: 0; padding-left: 1.3em; }
.goals li { font-size: 15px; line-height: 1.8; margin-bottom: 4px; }
.goals li::marker { color: var(--orange); }

.word {
  border: 1px solid var(--border); border-left: 5px solid var(--orange);
  border-radius: 8px; padding: var(--m) var(--l); margin: var(--l) 0 1.4em;
  background: var(--white);
}
.word__term { margin: 0 0 var(--xs); font-size: 14px; font-weight: 700; color: var(--text-dark); }
.word p:last-child { margin-bottom: 0; }
.word p { font-size: 15px; line-height: 1.85; }

.ask { margin: var(--xl) 0; border: 2px solid var(--orange); border-radius: 12px; overflow: hidden; }
.ask__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--m);
  background: var(--orange); color: var(--white); padding: 10px var(--m);
}
.ask__label { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
.ask__copy {
  background: var(--white); color: var(--orange-text);
  border: none; border-radius: 100px; padding: 4px 14px;
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.ask__copy[data-copied="1"] { color: var(--success); }
.ask__body { padding: var(--m); background: var(--white); }
.ask__body p:last-child { margin-bottom: 0; }
.ask__prompt {
  margin: 0; padding: var(--m); background: var(--beige); color: var(--text);
  border-radius: 8px; font-family: var(--font-main); font-size: 15px; line-height: 1.85;
  white-space: pre-wrap;
}

.confirm, .pitfalls {
  border: 1px solid var(--border); border-radius: 12px; padding: var(--l); margin: var(--xl) 0;
}
.confirm__label, .pitfalls__label {
  margin: 0 0 var(--m); font-size: 12px; font-weight: 900; letter-spacing: 0.1em; color: var(--text-dark);
}
.confirm ul, .confirm ol { margin: 0; padding-left: 1.3em; }
.confirm li, .pitfalls dd { font-size: 15px; line-height: 1.85; }
.pitfalls dl { margin: 0; }
/* エラー文そのものは等幅、日本語で書いた「症状」は本文フォント */
.pitfalls dt {
  font-family: var(--font-mono); font-size: 13px; color: var(--danger);
  background: rgba(220, 53, 69, 0.07); border-radius: 4px; padding: 4px 8px;
  display: inline-block; margin-bottom: var(--s);
}
.pitfalls dt.symptom {
  font-family: var(--font-main); font-size: 14px; font-weight: 700;
  color: var(--text-dark); background: transparent; padding: 0;
}
.pitfalls dt.symptom::before { content: "症状："; color: var(--text-muted); font-weight: 700; }
.pitfalls dd { margin: 0 0 var(--l); }
.pitfalls dd:last-child { margin-bottom: 0; }

.checklist { background: var(--beige); border-radius: 12px; padding: var(--l); margin: var(--xxl) 0 0; }
.checklist__label { margin: 0 0 var(--m); font-size: 12px; font-weight: 900; letter-spacing: 0.1em; color: var(--orange-text); }
.checklist ul { list-style: none; margin: 0; padding: 0; }
.checklist li { margin-bottom: var(--s); }
.checklist label {
  display: flex; align-items: flex-start; gap: var(--s);
  font-size: 15px; line-height: 1.8; cursor: pointer;
}
.checklist input { margin-top: 8px; width: 17px; height: 17px; accent-color: var(--orange); flex: none; }
.checklist__done {
  margin: var(--m) 0 0; padding-top: var(--m); border-top: 1px solid var(--border);
  font-size: 14px; font-weight: 700; color: var(--orange-text);
}
.checklist__done[hidden] { display: none; }

/* ---------- 前後リンク ---------- */
.pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--m);
  margin-top: var(--xxl); max-width: var(--measure);
}
.pager__link {
  display: block; padding: var(--m); border: 1px solid var(--border); border-radius: 12px;
  text-decoration: none; color: var(--text); background: var(--white);
}
.pager__link:hover { background: var(--beige); }
.pager__link--next { text-align: right; }
.pager__dir { display: block; font-size: 11px; font-weight: 700; color: var(--text-muted); }
.pager__title { display: block; font-size: 14px; font-weight: 700; line-height: 1.6; margin-top: 2px; }
.pager__spacer { display: block; }

/* ---------- トップページ ---------- */
.hero { margin-bottom: var(--xxl); }
.hero__badge {
  display: inline-block; background: var(--orange); color: var(--white);
  border-radius: 4px; padding: 2px 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
}
.hero h1 {
  margin: var(--m) 0 0; font-size: 38px; font-weight: 700; line-height: 1.44;
  letter-spacing: 0.01em; color: var(--text-dark);
}
.hero__lead { margin: var(--l) 0 0; font-size: 18px; line-height: 1.95; }
.hero__cta {
  display: inline-block; margin-top: var(--l);
  background: var(--orange-cta); color: var(--white); text-decoration: none;
  border-radius: 50px; padding: 15px 44px; font-size: 17px; font-weight: 700;
}
.hero__cta:hover { opacity: 0.92; }

.pitch { background: var(--beige); border-radius: 12px; padding: var(--l); margin-bottom: var(--xxl); }
.pitch h2 { margin: 0 0 var(--m); font-size: 20px; font-weight: 900; letter-spacing: 0.04em; color: var(--text-dark); border: 0; padding: 0; }
.pitch p:last-child { margin-bottom: 0; }

.toc-part { margin-bottom: var(--xl); }
.toc-part__head { display: flex; align-items: baseline; gap: var(--m); flex-wrap: wrap; margin-bottom: var(--m); }
.toc-part__label { font-size: 20px; font-weight: 900; letter-spacing: 0.06em; color: var(--text-dark); }
.toc-part__note { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.toc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s); }
.toc-card {
  display: grid; grid-template-columns: 46px 1fr; gap: var(--m); align-items: baseline;
  padding: var(--m); border: 1px solid var(--border); border-radius: 12px;
  text-decoration: none; color: var(--text); background: var(--white);
}
.toc-card:hover { background: var(--beige); }
.toc-card__num { font-size: 12px; font-weight: 900; letter-spacing: 0.06em; color: var(--orange-text); }
.toc-card__title { display: block; font-size: 16px; font-weight: 700; line-height: 1.6; }
.toc-card__sub { display: block; font-size: 13px; color: var(--text-sub); line-height: 1.7; margin-top: 2px; }
.toc-card__min { display: block; font-size: 11px; font-weight: 700; color: var(--text-muted); margin-top: var(--xs); }

.coming { border: 1px dashed var(--border); border-radius: 12px; padding: var(--l); color: var(--text-sub); font-size: 14px; }
.coming p:last-child { margin-bottom: 0; }

/* ---------- フッター ---------- */
.site-footer { border-top: 1px solid var(--border); background: var(--beige); }
.site-footer__inner { max-width: 1200px; margin: 0 auto; padding: var(--l) var(--m); }
.site-footer__note { margin: 0; font-size: 12px; line-height: 1.8; color: var(--text-sub); }
.site-footer__copy { margin: var(--s) 0 0; font-size: 11px; font-weight: 700; color: var(--text-muted); }

/* ---------- レスポンシブ ---------- */
@media (min-width: 1024px) {
  .layout { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); gap: var(--xxl); }
  .nav-toggle { display: none; }
}

@media (max-width: 1023px) {
  .sidebar {
    position: fixed; top: var(--header-h); left: 0; bottom: 0; z-index: 45;
    width: min(320px, 86vw); background: var(--white);
    border-right: 1px solid var(--border);
    overflow-y: auto; padding: var(--l) var(--m);
    transform: translateX(-102%); transition: transform 0.22s ease;
    box-shadow: rgba(30, 30, 30, 0.1) 0 8px 20px;
  }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar__inner { position: static; }
  .sidebar-scrim {
    display: block; position: fixed; inset: var(--header-h) 0 0; z-index: 44;
    background: rgba(30, 30, 30, 0.35);
  }
  .sidebar-scrim[hidden] { display: none; }
  .layout { padding-top: calc(var(--header-h) + var(--l)); }
}

@media (max-width: 767px) {
  body { font-size: 16px; }
  .chapter__title { font-size: 26px; }
  .hero h1 { font-size: 27px; }
  .hero__lead, .lede { font-size: 17px; }
  .chapter h2 { font-size: 20px; margin-top: var(--xl); }
  .chapter h3 { font-size: 17px; }
  .pager { grid-template-columns: 1fr; }
  .goals, .word, .ask__body, .confirm, .pitfalls, .checklist, .pitch { padding: var(--m); }
  /* 図の文字が潰れないよう、狭い画面では図だけ横スクロールさせる */
  .figure__scroll svg { width: 660px; max-width: none; }
  .figure__hint { display: block; margin: 0 0 var(--xs); font-size: 11px; font-weight: 700; color: var(--text-muted); }
  .hero__cta { display: block; text-align: center; padding: 15px var(--m); }
}