/* Build Note 共通スタイル（Web版。PDF版もこのページから組む予定）
   方針：雑誌・ノートのような紙面。色は墨・紙・コバルトの3つを軸に、差し色は朱と黄だけ。
   角丸や塗りのカードは控え、罫線と余白と文字の大きさで組む。 */
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@600;800&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&family=Inter+Tight:wght@500;700;800&display=swap');

:root {
  --ink: #16161a;
  --ink-soft: #5d5c63;
  --ink-faint: #9a98a0;
  --paper: #f7f5f0;
  --paper-deep: #efebe2;
  --white: #ffffff;
  --rule: #d9d5cb;
  --cobalt: #1f3dff;
  --cobalt-tint: #eef0ff;
  --vermilion: #f0442a;
  --yellow: #ffd23c;
  --green: #0f9d6b;
  --mincho: 'Shippori Mincho B1', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --gothic: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', sans-serif;
  --latin: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Consolas', 'Menlo', monospace;
  /* 旧名（ページ内の style 属性などで使っている所のため残す） */
  --blue: var(--cobalt);
  --blue-tint: var(--cobalt-tint);
  --pink: var(--vermilion);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--gothic); font-size: 16px; line-height: 1.95; letter-spacing: .02em;
  -webkit-font-smoothing: antialiased; font-feature-settings: "palt" 0;
}
a { color: var(--cobalt); text-underline-offset: 3px; }
::selection { background: var(--yellow); color: var(--ink); }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; }

/* ===== 上の帯 ===== */
.topbar { background: var(--paper); border-bottom: 1px solid var(--ink); position: sticky; top: 0; z-index: 10; }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 52px; gap: 12px; }
.topbar .brand { text-decoration: none; color: var(--ink); font: 800 15px/1 var(--latin); letter-spacing: .22em; text-transform: uppercase; }
.topbar .brand span { color: var(--cobalt); }
.topbar .back { font-size: 13px; color: var(--ink); text-decoration: none; letter-spacing: .08em; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.topbar .back:hover { color: var(--cobalt); }

/* ===== 表紙（目次ページ） ===== */
.hero { background: var(--paper); border-bottom: 1px solid var(--ink); }
.hero .wrap { display: grid; grid-template-columns: 1fr 300px; gap: 56px; padding-top: 72px; padding-bottom: 64px; align-items: end; }
.hero-main { border-left: 10px solid var(--cobalt); padding-left: 32px; }
.kicker { display: inline-block; font: 700 12px/1 var(--latin); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.hero h1 { font-family: var(--mincho); font-weight: 800; font-size: 54px; line-height: 1.32; letter-spacing: .02em; margin: 22px 0 0; }
.hero h1 small { display: block; font: 800 15px/1 var(--latin); letter-spacing: .32em; color: var(--cobalt); margin-bottom: 22px; }
.hero h1 .accent { background: linear-gradient(transparent 68%, var(--yellow) 68%); }
.hero h1 .nw { white-space: nowrap; }
br.sp { display: none; }
.hero-side { font-size: 14px; line-height: 1.9; }
.hero .lead { font-size: 15px; margin: 0 0 22px; color: var(--ink); }
.chips { list-style: none; padding: 16px 0 0; margin: 0; border-top: 1px solid var(--ink); display: flex; flex-wrap: wrap; gap: 4px 0; }
.chips li { font: 700 12px/1.8 var(--latin); letter-spacing: .1em; color: var(--ink-soft); }
.chips li + li::before { content: "/"; margin: 0 10px; color: var(--ink-faint); }

/* ===== 目次ページの節 ===== */
.section { padding: 72px 0; }
.section h2 { font-family: var(--mincho); font-weight: 800; font-size: 30px; line-height: 1.4; margin: 0 0 28px; display: flex; flex-direction: column; gap: 12px; }
.section h2::before { content: attr(data-en); font: 800 12px/1 var(--latin); letter-spacing: .24em; color: var(--cobalt); text-transform: uppercase; }
.section .sub { color: var(--ink-soft); margin: -12px 0 36px; font-size: 14px; }
.about { display: grid; grid-template-columns: 220px 1fr; gap: 56px; }
.about-body { max-width: 680px; font-size: 16.5px; }
.about-body p { margin: 0 0 1.2em; }

.part { display: grid; grid-template-columns: 220px 1fr; gap: 56px; padding: 28px 0; border-top: 1px solid var(--ink); }
.part-title { margin: 0; font-family: var(--mincho); font-weight: 800; font-size: 20px; line-height: 1.5; }
.part-title .num { display: block; font: 800 12px/1 var(--latin); letter-spacing: .24em; color: var(--cobalt); margin-bottom: 10px; }
.toc { list-style: none; margin: 0; padding: 0; }
.toc li + li { border-top: 1px solid var(--rule); }
.toc a, .toc .soon { display: grid; grid-template-columns: 76px 1fr auto; gap: 18px; align-items: baseline; padding: 16px 0; text-decoration: none; color: var(--ink); }
.toc a { transition: color .15s, padding-left .2s; }
.toc a:hover { color: var(--cobalt); padding-left: 8px; }
.toc .ch { font: 700 12px/1 var(--latin); letter-spacing: .12em; color: var(--ink-soft); }
.toc .t { font-weight: 700; font-size: 17px; line-height: 1.6; }
.toc .d { display: block; font-size: 13.5px; color: var(--ink-soft); font-weight: 400; line-height: 1.7; margin-top: 2px; }
.toc .tag { font: 700 11px/1 var(--latin); letter-spacing: .12em; white-space: nowrap; padding: 5px 0; }
.tag.open { color: var(--cobalt); }
.tag.open::after { content: " →"; }
.tag.wip { color: var(--ink-faint); }
.tag.pdf { color: var(--vermilion); }
.toc .soon { color: var(--ink-soft); }

/* ===== 章ページの頭 ===== */
.ch-head { border-bottom: 1px solid var(--ink); }
.ch-head .wrap { display: grid; grid-template-columns: 220px 1fr; gap: 56px; padding-top: 64px; padding-bottom: 48px; }
.ch-label { font: 800 12px/1.6 var(--latin); letter-spacing: .22em; color: var(--cobalt); text-transform: uppercase; padding-top: 14px; }
.ch-head h1 { font-family: var(--mincho); font-weight: 800; font-size: 44px; line-height: 1.38; margin: 0 0 18px; letter-spacing: .02em; }
.asof { display: inline-block; font-size: 12px; color: var(--ink-soft); letter-spacing: .08em; }
.asof::before { content: ""; display: inline-block; width: 24px; height: 1px; background: var(--ink-soft); vertical-align: middle; margin-right: 10px; }
.ch-head-main { min-width: 0; }
.goal { margin: 36px 0 0; padding: 22px 0 0; border-top: 1px solid var(--rule); }
.goal strong { display: block; font: 800 12px/1 var(--latin); letter-spacing: .2em; color: var(--ink); margin-bottom: 14px; }
.goal ul { list-style: none; margin: 0; padding: 0; counter-reset: goal; }
.goal li { counter-increment: goal; display: grid; grid-template-columns: 36px 1fr; padding: 6px 0; font-size: 15.5px; line-height: 1.75; }
.goal li::before { content: "Q" counter(goal); font: 800 13px/1.75 var(--latin); color: var(--cobalt); }

/* ===== 本文 ===== */
.wrap > article.body, .wrap > .pager { margin-left: 276px; max-width: 700px; }
article.body { padding: 56px 0 24px; font-size: 16.5px; counter-reset: sec; }
article.body h2 { font-family: var(--mincho); font-weight: 800; font-size: 27px; line-height: 1.5; margin: 72px 0 18px; position: relative; counter-increment: sec; }
article.body h2::before { content: counter(sec, decimal-leading-zero); position: absolute; left: -276px; width: 220px; top: 6px; font: 800 13px/1 var(--latin); letter-spacing: .2em; color: var(--cobalt); border-top: 2px solid var(--cobalt); padding-top: 10px; }
article.body h2:first-child { margin-top: 0; }
article.body h3 { font-size: 17.5px; font-weight: 700; margin: 36px 0 8px; }
article.body p { margin: 0 0 1.15em; }
article.body ul, article.body ol { padding-left: 1.4em; margin: 0 0 1.2em; }
article.body li { margin: 4px 0; }
article.body code { font-family: var(--mono); font-size: .9em; background: var(--paper-deep); padding: 1px 6px; border-radius: 3px; }
.em { background: linear-gradient(transparent 64%, var(--yellow) 64%); font-weight: 700; }

/* ===== 囲み ===== */
.box { margin: 32px 0; padding: 22px 26px; }
.box-title { font: 800 12px/1 var(--gothic); letter-spacing: .16em; margin: 0 0 14px; display: flex; align-items: center; gap: 10px; }
.box-title::before { content: ""; width: 18px; height: 2px; background: currentColor; }
.box p:last-child, .box ul:last-child, .box ol:last-child { margin-bottom: 0; }

.box.ask { background: var(--white); border: 1px solid var(--ink); }
.box.ask .box-title { color: var(--cobalt); }
.prompt { border-left: 3px solid var(--cobalt); background: var(--cobalt-tint); padding: 14px 18px; margin: 0; white-space: pre-wrap; font-size: 15px; line-height: 1.85; }

.box.real { background: var(--paper-deep); padding: 26px 28px; }
.box.real .box-title { color: var(--ink); }
.box.real p { font-size: 15.5px; }

.box.trap { border-top: 3px solid var(--vermilion); border-bottom: 1px solid var(--rule); padding: 20px 0 18px; }
.box.trap .box-title { color: var(--vermilion); }
.box.trap ul { padding-left: 1.2em; }

.box.think { background: var(--cobalt); color: var(--white); padding: 30px 32px; }
.box.think .box-title { color: var(--yellow); font-size: 13px; }
.box.think ol { list-style: none; margin: 0; padding: 0; counter-reset: think; }
.box.think li { counter-increment: think; display: grid; grid-template-columns: 40px 1fr; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.28); font-size: 16px; line-height: 1.8; margin: 0; }
.box.think li:first-child { border-top: 0; padding-top: 0; }
.box.think li::before { content: counter(think, decimal-leading-zero); font: 800 14px/1.8 var(--latin); color: var(--yellow); }

pre.code { background: var(--ink); color: #eceaf2; padding: 16px 18px; overflow-x: auto; font: 14px/1.7 var(--mono); }

/* 3つ並び（役割・たとえ） */
.roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 28px 0 32px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.role { padding: 18px 18px 20px; }
.role + .role { border-left: 1px solid var(--rule); }
.role b { display: block; font-family: var(--mincho); font-weight: 800; font-size: 18px; margin-bottom: 6px; }
.role span { font-size: 14px; line-height: 1.75; display: block; color: var(--ink-soft); }
.role.you b { color: var(--cobalt); }
.role.ai b { color: var(--ink); }
.role.check b { color: var(--vermilion); }

/* くらべ */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 18px 0 28px; border: 1px solid var(--ink); }
.compare > div { padding: 16px 20px; }
.compare .ng { background: var(--white); color: var(--ink-soft); border-right: 1px solid var(--ink); }
.compare .ok { background: var(--white); }
.compare .lbl { font: 800 11px/1 var(--gothic); letter-spacing: .16em; display: block; margin-bottom: 10px; }
.compare .ng .lbl { color: var(--ink-faint); }
.compare .ok .lbl { color: var(--green); }
.compare p { margin: 0; white-space: pre-wrap; font-size: 15px; line-height: 1.85; }

/* 流れ */
.flow { list-style: none; padding: 0 !important; margin: 24px 0 32px !important; display: grid; grid-template-columns: repeat(3, 1fr); counter-reset: flow; border-top: 1px solid var(--ink); }
.flow li { padding: 18px 18px 4px 0; font-size: 14.5px; line-height: 1.75; color: var(--ink-soft); margin: 0 !important; }
.flow li + li { padding-left: 18px; border-left: 1px solid var(--rule); }
.flow li b { display: block; font-family: var(--mincho); font-weight: 800; font-size: 19px; color: var(--ink); margin-bottom: 6px; }
.flow li b::before { counter-increment: flow; content: counter(flow, decimal-leading-zero); display: block; font: 800 12px/1 var(--latin); letter-spacing: .16em; color: var(--cobalt); margin-bottom: 10px; }

/* 一覧の図 */
.tree { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 10px 0; margin: 20px 0 28px; font-size: 15px; }
.tree div { display: grid; grid-template-columns: 13em 1fr; gap: 16px; padding: 6px 0; }
.tree div + div { border-top: 1px dashed var(--rule); }
.tree b { font-family: var(--mono); font-weight: 700; color: var(--cobalt); }
.tree span { color: var(--ink-soft); }
.tree .in b { padding-left: 1.4em; }

/* ふり返り */
ul.check { list-style: none; padding: 0 !important; border-top: 1px solid var(--ink); }
ul.check li { padding: 12px 0 12px 34px; position: relative; border-bottom: 1px solid var(--rule); margin: 0 !important; }
ul.check li::before { content: ""; position: absolute; left: 2px; top: 22px; width: 18px; height: 2px; background: var(--cobalt); }

/* 前後の章 */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; margin-top: 48px; margin-bottom: 96px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.pager a, .pager span { display: block; padding: 22px 20px 22px 0; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 15px; line-height: 1.6; }
.pager .next { text-align: right; padding: 22px 0 22px 20px; border-left: 1px solid var(--rule); }
.pager small { display: block; font: 700 11px/1 var(--latin); letter-spacing: .18em; color: var(--cobalt); margin-bottom: 8px; }
.pager a:hover { color: var(--cobalt); }
.pager span { color: var(--ink-faint); }
.pager span small { color: var(--ink-faint); }

/* 付録A */
.tpl { margin: 0 0 28px; }
.tpl-title { font-weight: 700; margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.tpl-title small { font: 700 11px/1 var(--latin); letter-spacing: .12em; color: var(--cobalt); }
.ph { background: linear-gradient(transparent 60%, var(--yellow) 60%); font-weight: 700; }

/* 付録B */
.gloss { margin: 0 0 32px; border-top: 1px solid var(--ink); }
.gloss div { display: grid; grid-template-columns: 12em 1fr; gap: 4px 20px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.gloss dt { font-weight: 700; }
.gloss dt small { display: block; font-weight: 400; font-size: 12px; color: var(--ink-soft); }
.gloss dd { margin: 0; font-size: 15px; }
.gloss dd .ref { font: 700 11px/1 var(--latin); color: var(--cobalt); margin-left: 8px; white-space: nowrap; letter-spacing: .06em; }
.kana-head { font-family: var(--mincho); font-weight: 800; font-size: 20px; color: var(--cobalt); margin: 36px 0 8px; }

footer { border-top: 1px solid var(--ink); padding: 28px 0 48px; font-size: 12px; color: var(--ink-soft); letter-spacing: .08em; }
footer a { color: var(--ink-soft); }

/* ===== 狭い画面 ===== */
@media (max-width: 900px) {
  .wrap { padding: 0 20px; }
  .hero .wrap, .about, .part, .ch-head .wrap { grid-template-columns: 1fr; gap: 24px; }
  .hero .wrap { padding-top: 48px; padding-bottom: 44px; }
  .hero-main { padding-left: 20px; border-left-width: 6px; }
  .hero h1 { font-size: 36px; }
  .ch-head .wrap { padding-top: 40px; padding-bottom: 36px; gap: 8px; }
  .ch-label { padding-top: 0; }
  .ch-head h1 { font-size: 30px; }
  .wrap > article.body, .wrap > .pager { margin-left: 0; }
  article.body { padding-top: 40px; }
  article.body h2 { font-size: 23px; margin-top: 56px; padding-top: 34px; }
  article.body h2::before { left: 0; top: 0; width: 64px; }
  .section { padding: 52px 0; }
  .section h2 { font-size: 25px; flex-direction: column; gap: 10px; }
}
@media (max-width: 640px) {
  br.sp { display: inline; }
  .hero h1 { font-size: 34px; }
  .roles, .compare, .flow { grid-template-columns: 1fr; }
  .role + .role, .flow li + li { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; }
  .flow li { padding-right: 0; }
  .compare .ng { border-right: 0; border-bottom: 1px solid var(--ink); }
  .toc a, .toc .soon { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .toc .ch { grid-column: 1 / -1; }
  .tree div, .gloss div { grid-template-columns: 1fr; gap: 0; }
  .box { padding: 20px; }
  .box.think { padding: 24px 22px; }
  .pager { grid-template-columns: 1fr; }
  .pager .next { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; }
}