@page { size: A4; margin: 15mm 14mm 16mm 14mm; }
:root{
  --paper:#FBF6E9; --paper-2:#F8F1E0;
  --surface:#F4ECD8; --surface-2:#EDE2CC;
  --ink:#2E2A22; --muted:#6B6354;
  --accent:#5a1b2e; --accent-dark:#3a0f1d;
  --accent-2:#8a3d52; --accent-3:#c87b8e;
  --line:#e6c5cf; --line-2:#f0dde2;
  --callout:#f9f0f3;
  --green:#2d5e3e; --teal:#2d6e7a;
  --plum:#6a4a8a; --terra:#b56b3f;
  --gold:#c9a449; --gold-deep:#8a6d22;
  --red:#b13e3e; --navy:#1b3a5a;
  --shadow:0 18px 46px rgba(58,15,29,0.10);
}
*{box-sizing:border-box}
html{ scroll-behavior:smooth; }
body{
  margin:0; color:var(--ink);
  background:
    radial-gradient(circle at top left, rgba(138,61,82,0.08), transparent 26%),
    radial-gradient(circle at 85% 14%, rgba(90,27,46,0.08), transparent 22%),
    linear-gradient(180deg, #f4eef0 0%, #ebe2e6 100%);
  font-family: "Be Vietnam Pro", "Be Vietnam Pro","Noto Sans JP", "Segoe UI", sans-serif;
  line-height:1.7; font-size:0.875rem;
  -webkit-font-smoothing:antialiased;
  padding:24px 12px; min-height:100vh;
}
.page-shell{
  max-width:1180px; margin:0 auto;
  background:var(--paper);
  border:1px solid var(--line-2);
  border-radius:24px;
  padding:36px 32px 48px;
  box-shadow:var(--shadow);
}
.main-header{
  position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,0.09), transparent 22%),
    radial-gradient(circle at 88% 20%, rgba(200,123,142,0.30), transparent 16%),
    linear-gradient(135deg, #3a0f1d 0%, #5a1b2e 36%, #2a0810 100%);
  color:#fff; border-radius:22px; box-shadow:var(--shadow);
  padding:40px 40px 36px; margin-bottom:30px; text-align:center;
}
.main-header::after{
  content:"歴史"; position:absolute; right:-12px; bottom:-50px;
  font-family:"Noto Serif JP","Yu Mincho",serif; font-weight:900;
  font-size:clamp(7rem, 14vw, 12rem); color:rgba(255,255,255,0.07); line-height:1; pointer-events:none;
}
.main-header .badge{
  display:inline-block; padding:8px 18px; border-radius:999px;
  background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.20);
  color:#f0d4dc; letter-spacing:0.18em; font-size:0.6875rem; font-weight:700; text-transform:uppercase;
}
.main-header h1{
  font-family:"Cormorant Garamond","Noto Serif JP",serif;
  font-weight:700; font-size:2.625rem; line-height:1.1; letter-spacing:-0.01em;
  margin:18px 0 8px; color:#fff;
}
.main-header h1 .jp{ color:var(--accent-3); font-family:"Noto Serif JP",serif; }
.main-header .subtitle{
  margin:0 auto; max-width:780px;
  color:rgba(255,255,255,0.85); font-size:0.9062rem; font-style:italic;
}
.toc{
  background:linear-gradient(180deg, rgba(255,253,250,0.96), rgba(249,240,243,0.96));
  border:1px solid rgba(138,61,82,0.20);
  border-radius:22px; box-shadow:var(--shadow);
  padding:26px 28px; margin-bottom:32px;
}
.toc h2{
  margin:0 0 14px; padding:0;
  font-family:"Cormorant Garamond","Noto Serif JP",serif;
  font-size:1.75rem; line-height:1.1; color:var(--accent); font-weight:700;
  border:none;
}
.toc-items{ list-style:none; padding-left:0; margin:0;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.toc-items li{ margin:0; }
.toc-items a{
  display:block; padding:11px 14px; text-decoration:none; color:inherit;
  background:linear-gradient(180deg, #FBF6E9 0%, #f9f0f3 100%);
  border:1px solid var(--line-2); border-radius:12px;
  font-weight:600; color:var(--accent); font-size:0.8438rem;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  border-left:3px solid transparent;
}
.toc-items a:hover{
  transform:translateY(-2px);
  border-color:rgba(90,27,46,0.40); border-left-color:var(--accent-2);
  box-shadow:0 12px 24px rgba(58,15,29,0.08);
}
.chapter-card{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, #3a0f1d 0%, #5a1b2e 50%, #2a0810 100%);
  border-radius:22px; box-shadow:var(--shadow);
  padding:32px 40px 28px; margin:50px 0 22px; color:#fff;
}
.chapter-card::after{
  content:""; position:absolute; right:-80px; top:-90px;
  width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle, rgba(200,123,142,0.45) 0%, rgba(200,123,142,0.08) 48%, transparent 68%);
  pointer-events:none;
}
.chapter-card h2{
  margin:0 0 6px;
  font-family:"Noto Serif JP",serif; font-size:1.875rem; font-weight:700; color:#fff;
  position:relative; z-index:1;
}
.chapter-card h2 .num{ color:var(--accent-3); margin-right:6px; }
.chapter-card .ch-sub{
  font-size:0.875rem; color:rgba(255,255,255,0.82); font-style:italic;
  position:relative; z-index:1;
}
.document{
  background:var(--paper); border:1px solid rgba(138,61,82,0.16);
  border-radius:24px; box-shadow:var(--shadow);
  padding:0 0 32px; margin-bottom:36px; overflow:hidden;
}
.lesson-banner{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:14px;
  padding:24px 36px 22px;
  background:
    radial-gradient(circle at 88% 30%, rgba(200,123,142,0.28), transparent 26%),
    linear-gradient(135deg, #3a0f1d 0%, #5a1b2e 50%, #2a0810 100%);
  color:#fff;
}
.lesson-banner .lesson-no{
  flex-shrink:0; width:46px; height:46px; border-radius:50%;
  background:linear-gradient(135deg, var(--accent-3) 0%, var(--accent-2) 100%);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:0.875rem;
  box-shadow:0 6px 14px rgba(138,61,82,0.30);
  font-family:"Cormorant Garamond",serif;
}
.lesson-banner h3{
  margin:0; flex:1;
  font-family:"Noto Serif JP",serif; font-size:1.375rem; font-weight:700; color:#fff;
}
.lesson-banner h3 .vn{
  display:block; margin-top:3px;
  font-family:"Be Vietnam Pro",sans-serif; font-size:0.8125rem; font-weight:500;
  color:rgba(255,255,255,0.82); font-style:italic;
}
.doc-body{ padding:24px 32px 12px; }
.section-head{
  position:relative; overflow:hidden;
  margin:18px 0 16px;
  padding:14px 22px 14px 20px;
  border-radius:18px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.08), transparent 36%),
    linear-gradient(135deg, #6a1f36 0%, #5a1b2e 52%, #8a3d52 100%);
  color:#fff; font-weight:700;
}
.section-head::before{
  content:attr(data-mark); margin-right:10px; font-size:1.125rem;
}
.subsection-head{
  margin:16px 0 10px;
  padding:8px 14px;
  border-left:4px solid var(--accent-2);
  background:linear-gradient(90deg, #f9f0f3, transparent);
  font-weight:700; color:var(--accent);
  font-family:"Noto Serif JP",serif;
  font-size:0.9375rem; border-radius:0 8px 8px 0;
}
.intro-text{
  background:linear-gradient(180deg, #fdfcf6, #f7f0e0);
  border-left:4px solid var(--gold);
  padding:12px 16px; margin:10px 0 16px;
  border-radius:0 12px 12px 0;
  font-size:0.8438rem; line-height:1.75;
}
.table-shell{
  margin:14px 0 22px;
  border:1px solid var(--line-2); border-radius:18px; overflow:hidden;
  background:#fff; box-shadow:0 10px 26px rgba(58,15,29,0.05);
}
table.vocab-table{
  width:100%; border-collapse:separate; border-spacing:0;
  background:#fff; font-size:0.8438rem;
}
table.vocab-table thead{
  background:linear-gradient(180deg, #f9e0e6 0%, #f0c4ce 100%);
  color:var(--accent);
}
table.vocab-table thead th{
  padding:13px 14px; text-align:left;
  font-weight:800; font-size:0.7812rem; letter-spacing:0.02em;
  border-bottom:1px solid var(--line-2);
}
table.vocab-table tbody td{
  padding:11px 14px;
  border-bottom:1px solid var(--line-2);
  vertical-align:top;
}
table.vocab-table tbody tr:nth-child(even){ background:#fdf6f8; }
table.vocab-table tbody tr:last-child td{ border-bottom:none; }
.year-col{ font-family:"Cormorant Garamond",serif; font-weight:800; color:var(--accent); white-space:nowrap;}
.callout{
  background:var(--callout);
  border:1px solid var(--line);
  border-left:5px solid var(--accent-2);
  border-radius:0 14px 14px 0;
  padding:14px 18px; margin:12px 0 18px;
  font-size:0.8438rem;
}
.callout strong{ color:var(--accent); }
.tip-box{
  background:linear-gradient(180deg, #fffbe6, #fff3b8);
  border-left:5px solid var(--gold);
  border-radius:0 14px 14px 0;
  padding:14px 18px; margin:12px 0 18px;
  font-size:0.8125rem;
}
.quiz-list{ counter-reset:q; padding-left:0; list-style:none; }
.quiz-list > li{
  counter-increment:q;
  margin:14px 22px; padding:14px 16px 12px 50px;
  position:relative;
  background:linear-gradient(180deg, #fff, #fdf6f8);
  border:1px solid var(--line-2); border-radius:14px;
  font-size:0.8438rem;
}
.quiz-list > li::before{
  content:counter(q);
  position:absolute; left:14px; top:14px;
  width:28px; height:28px; border-radius:50%;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:0.8125rem;
}
.options{ display:grid; grid-template-columns:repeat(2,1fr); gap:6px 14px; margin-top:8px;}
.options span{ font-size:0.8125rem; color:#3a2030;}
.answer-btn{
  margin:8px 22px 12px; padding:9px 22px;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color:#fff; border:none; border-radius:999px;
  font-weight:700; font-size:0.8125rem; cursor:pointer;
  box-shadow:0 4px 10px rgba(58,15,29,0.20);
}
.answer-btn:hover{ filter:brightness(1.1); }
.answer-box{
  display:none; margin:6px 22px 22px;
  padding:14px 16px;
  background:linear-gradient(180deg, #fffbef, #f8eed4);
  border-left:4px solid var(--gold);
  border-radius:0 12px 12px 0; font-size:0.8125rem;
}
.answer-box.visible{ display:block; }
.answer-box .ans-key{ color:var(--gold-deep); font-weight:800; font-size:0.9062rem; display:block; margin-bottom:6px;}
.answer-box .ans-exp{ color:#3a2530;}
.timeline{
  position:relative; margin:18px 0 20px; padding:8px 0 8px 30px;
  border-left:3px solid var(--accent-2);
}
.timeline .tl-item{
  position:relative; margin-bottom:14px; padding:8px 14px;
  background:#fff; border-radius:10px; border:1px solid var(--line-2);
  font-size:0.8125rem;
}
.timeline .tl-item::before{
  content:""; position:absolute; left:-37px; top:14px;
  width:14px; height:14px; border-radius:50%;
  background:var(--accent); border:3px solid #fff;
  box-shadow:0 0 0 2px var(--accent-2);
}
.timeline .tl-year{
  display:inline-block; font-family:"Cormorant Garamond",serif;
  color:var(--accent); font-weight:800; margin-right:8px;
  font-size:0.875rem;
}
.diagram-desc{
  margin:14px 0; padding:14px 18px;
  background:linear-gradient(180deg, #f9f0f3, #f0d4dc);
  border-radius:14px; font-size:0.8125rem; color:#3a1d2a;
}
.svg-gallery{ display:grid; grid-template-columns:repeat(2, 1fr); gap:18px; margin:16px 0 24px; }
@media (max-width: 720px){ .svg-gallery{ grid-template-columns:1fr; } }
.svg-card{
  background:#fff; border:1px solid var(--line-2); border-radius:16px;
  padding:14px 16px 12px; box-shadow:0 8px 18px rgba(58,15,29,0.06);
}
.svg-card h4{
  margin:0 0 8px; font-family:"Noto Serif JP",serif;
  color:var(--accent); font-size:0.9062rem; font-weight:700;
}
.svg-card .svg-cap{ font-size:0.7188rem; color:var(--muted); margin-top:6px; line-height:1.5; }
.svg-card svg{ width:100%; height:auto; display:block; }
.trap-list{
  background:linear-gradient(180deg, #fff6e6, #ffe9c8);
  border-left:5px solid var(--terra);
  border-radius:0 14px 14px 0;
  padding:16px 20px; margin:14px 0 20px;
}
.trap-list h4{ margin:0 0 10px; color:#8a4a1c; font-weight:800; font-size:0.9375rem;}
.trap-list ul{ margin:0; padding-left:22px; }
.trap-list li{ margin-bottom:8px; font-size:0.8125rem; line-height:1.7;}
.trap-list em{ color:var(--red); font-style:normal; font-weight:700;}
.must-know{
  background:linear-gradient(180deg, #efeaff, #ded3ff);
  border-left:5px solid var(--plum);
  border-radius:0 14px 14px 0;
  padding:16px 20px; margin:14px 0 20px;
}
.must-know h4{ margin:0 0 10px; color:var(--plum); font-weight:800; font-size:0.9375rem;}
.must-know table{ width:100%; border-collapse:collapse; font-size:0.7812rem;}
.must-know th, .must-know td{ padding:6px 8px; border:1px solid #c8b6e6; text-align:left;}
.must-know th{ background:rgba(106,74,138,0.12); font-weight:700; color:var(--plum);}