:root{
  --bg:#f6f7fb;
  --surface:#ffffff;
  --surface-soft:#eef3f8;
  --text:#20242a;
  --muted:#59636e;
  --line:#d8e0ea;
  --accent:#2457a6;
  --accent-dark:#173d75;
  --warning-bg:#fff7df;
  --danger-bg:#fff0f0;
  --success-bg:#edf8ef;
  --shadow:0 0.5rem 1.5rem rgba(20,40,70,.08);
  --radius:18px;
  --measure:42rem;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  line-height:1.85;
  color:var(--text);
  background:var(--bg);
  letter-spacing:.02em;
}
a{color:var(--accent);text-underline-offset:.18em;}
a:hover{color:var(--accent-dark);}
:focus-visible{outline:4px solid #111;outline-offset:4px;border-radius:6px;}
.skip-link{
  position:absolute;left:1rem;top:.5rem;z-index:1000;
  padding:.75rem 1rem;background:#111;color:#fff;border-radius:999px;
  transform:translateY(-140%);
}
.skip-link:focus{transform:translateY(0);}
.site-header{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;}
.site-header__inner{max-width:1180px;margin-inline:auto;padding:1rem 1.25rem;display:flex;gap:1rem;align-items:center;justify-content:space-between;}
.site-brand{margin:0;font-weight:800;line-height:1.4;}
.site-brand a{text-decoration:none;color:var(--text);}
.top-nav{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;}
.top-nav a,.button{
  display:inline-block;padding:.65rem 1rem;border-radius:999px;text-decoration:none;
  background:var(--accent);color:#fff;font-weight:700;line-height:1.4;
}
.top-nav a{background:var(--surface-soft);color:var(--accent-dark);}
.button.secondary{background:var(--surface-soft);color:var(--accent-dark);border:1px solid var(--line);}
.layout{max-width:1180px;margin-inline:auto;display:grid;grid-template-columns:280px minmax(0,1fr);gap:1.25rem;padding:1.25rem;align-items:start;}
.side-nav{position:sticky;top:6rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1rem;max-height:calc(100vh - 7rem);overflow:auto;}
.side-nav__title{margin:.2rem 0 .6rem;font-weight:800;}
.side-nav ol{margin:0;padding-left:1.5rem;}
.side-nav li{margin:.35rem 0;}
.side-nav a[aria-current="page"]{font-weight:800;color:var(--text);text-decoration-thickness:.18em;}
.main-content{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(1.2rem,3vw,2.5rem);}
.hero{background:linear-gradient(135deg,#ffffff,#edf3fb);border:1px solid var(--line);border-radius:24px;padding:clamp(1.2rem,4vw,3rem);margin-bottom:2rem;}
.hero p{max-width:var(--measure);}
h1{font-size:clamp(1.9rem,4vw,3rem);line-height:1.25;margin:.2rem 0 1rem;letter-spacing:.01em;}
h2{font-size:clamp(1.45rem,2.4vw,2rem);line-height:1.35;margin:2.8rem 0 1rem;padding-top:.2rem;border-top:4px solid var(--line);}
h3{font-size:1.2rem;line-height:1.4;margin:2rem 0 .7rem;}
p,ul,ol,dl{max-width:var(--measure);}
.lead{font-size:1.08rem;color:var(--text);}
.note,.lecture,.warning,.good,.bad,.task,.summary-box{border-radius:16px;padding:1rem 1.15rem;margin:1.2rem 0;max-width:var(--measure);}
.note{background:var(--surface-soft);border:1px solid var(--line);}
.lecture{background:#f7f2ff;border:1px solid #ded0fb;}
.warning{background:var(--warning-bg);border:1px solid #edd891;}
.good{background:var(--success-bg);border:1px solid #b9dfc0;}
.bad{background:var(--danger-bg);border:1px solid #e8b8b8;}
.task{background:#f1f8ff;border:1px solid #bad7ff;}
.summary-box{background:#f8f8f8;border:2px solid #d4d4d4;}
.note strong,.lecture strong,.warning strong,.good strong,.bad strong,.task strong{display:block;margin-bottom:.25rem;}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:1.5rem 0;}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1rem;box-shadow:0 .3rem 1rem rgba(20,40,70,.06);}
.card h3{margin-top:0;}
.visual-demo{border:2px solid var(--line);border-radius:18px;background:#fff;margin:1.5rem 0;padding:1rem;max-width:760px;}
.visual-demo__caption{font-weight:800;margin:.2rem 0 .8rem;}
.demo-screen{border:2px solid #b8c4d4;border-radius:14px;overflow:hidden;background:#fff;}
.demo-header,.demo-footer{background:#dce8f5;padding:.8rem 1rem;font-weight:700;}
.demo-nav{display:flex;gap:.5rem;flex-wrap:wrap;padding:.6rem 1rem;background:#eef3f8;border-top:1px solid #cad8e8;border-bottom:1px solid #cad8e8;}
.demo-pill{display:inline-block;background:#fff;border:1px solid #aebfd3;border-radius:999px;padding:.25rem .65rem;font-size:.9rem;}
.demo-main{padding:1rem;}
.demo-hero{background:#f4f7fc;border:1px solid #d4dfed;border-radius:14px;padding:1rem;margin-bottom:1rem;}
.demo-card-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;}
.demo-mini-card{background:#fff;border:1px solid #ced8e5;border-radius:12px;padding:.7rem;min-height:5rem;}
.demo-broken{position:relative;min-height:220px;background:#fff;border:2px dashed #c45;border-radius:14px;overflow:hidden;}
.demo-broken .piece{position:absolute;border:1px solid #777;background:#f5f5f5;padding:.45rem;font-size:.9rem;}
.demo-broken .p1{left:8px;top:10px;width:230px;}
.demo-broken .p2{left:170px;top:45px;width:240px;}
.demo-broken .p3{left:30px;top:110px;width:120px;}
.demo-broken .p4{right:-30px;bottom:12px;width:220px;}
.demo-spacious{display:grid;gap:1.2rem;}
.demo-spacious .block{border:1px solid #cad8e8;border-radius:12px;padding:1rem;background:#f8fbff;}
.demo-cramped .line{display:block;border:1px solid #bbb;background:#fafafa;padding:.1rem .25rem;margin:.1rem 0;}
.definition-list{display:grid;gap:.65rem;max-width:var(--measure);}
.definition-list div{border-left:5px solid var(--line);padding:.4rem .8rem;background:#fafafa;}
.definition-list dt{font-weight:800;}
.definition-list dd{margin:.2rem 0 0;}
table{border-collapse:collapse;width:100%;max-width:920px;margin:1rem 0;background:#fff;}
th,td{border:1px solid var(--line);padding:.75rem;vertical-align:top;text-align:left;}
th{background:var(--surface-soft);}
.prev-next{display:flex;justify-content:space-between;gap:1rem;margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line);}
.checklist{list-style:none;padding-left:0;}
.checklist li{padding:.5rem .75rem;border:1px solid var(--line);border-radius:12px;margin:.45rem 0;background:#fff;}
.checklist li::before{content:"確認：";font-weight:800;}
.small{font-size:.92rem;color:var(--muted);}
.print-control{margin:1rem 0;}
@media (max-width: 900px){
  .site-header{position:static;}
  .site-header__inner{align-items:flex-start;flex-direction:column;}
  .layout{grid-template-columns:1fr;padding:.75rem;}
  .side-nav{position:static;max-height:none;}
  .grid,.demo-card-row{grid-template-columns:1fr;}
  .prev-next{flex-direction:column;}
}
@media print{
  .site-header,.side-nav,.prev-next,.site-footer,.skip-link,.print-control{display:none!important;}
  body{background:#fff;color:#000;}
  .layout{display:block;padding:0;max-width:none;}
  .main-content{box-shadow:none;border:none;padding:0;}
  a{color:#000;}
}


/* =========================================================
 * 補助スタイル
 * ========================================================= */
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr));}
.compare-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;max-width:920px;margin:1.3rem 0;align-items:start;}
.glossary-list{display:grid;gap:.8rem;max-width:850px;}
.glossary-list div{background:#fff;border:1px solid var(--line);border-left:6px solid var(--accent);border-radius:14px;padding:.9rem 1rem;}
.glossary-list dt{font-weight:800;font-size:1.04rem;}
.glossary-list dd{margin:.25rem 0 0;color:var(--text);}
.dialogue-box,.template-box{max-width:var(--measure);border:1px solid var(--line);background:#fbfcff;border-radius:16px;padding:1rem 1.15rem;margin:1.2rem 0;}
.dialogue-box p,.template-box p{margin:.55rem 0;}
.table-wrap{overflow-x:auto;max-width:100%;}
.demo-big{font-size:1.45rem;line-height:1.35;font-weight:800;margin:.2rem 0 .8rem;}
.demo-button{display:inline-block;background:var(--accent);color:#fff;border-radius:999px;padding:.55rem .9rem;font-weight:800;margin-top:.3rem;}
code{font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;background:#f1f3f7;border:1px solid #d9e0ea;border-radius:6px;padding:.05rem .25rem;}
@media (max-width: 900px){
  .grid.two,.compare-grid{grid-template-columns:1fr;}
}