:root {
  color-scheme: light;
  --ink: #172033;
  --muted: #5f6b7a;
  --line: #dbe3ee;
  --brand: #2563eb;
  --surface: #ffffff;
  --soft: #f5f8fc;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--soft);
  font-family: "Noto Sans JP", system-ui, sans-serif;
  line-height: 1.8;
}
.manual-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 12px clamp(18px, 4vw, 48px);
  color: #fff;
  background: #172b4d;
  box-shadow: 0 2px 12px rgb(15 23 42 / 18%);
}
.manual-brand { color: inherit; font-size: 1.05rem; font-weight: 700; text-decoration: none; }
.manual-back { color: #fff; font-size: .9rem; }
.manual-layout {
  display: grid;
  grid-template-columns: minmax(220px, 290px) minmax(0, 860px);
  gap: clamp(24px, 4vw, 56px);
  max-width: 1240px;
  margin: 0 auto;
  padding: 36px 24px 72px;
}
.manual-toc {
  position: sticky;
  top: 94px;
  align-self: start;
  max-height: calc(100vh - 120px);
  overflow: auto;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.manual-toc strong { display: block; margin-bottom: 10px; }
.manual-toc a { display: block; padding: 5px 0; color: #334155; font-size: .88rem; text-decoration: none; }
.manual-toc a:hover { color: var(--brand); }
.manual-content {
  min-width: 0;
  padding: clamp(24px, 5vw, 56px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 12px 36px rgb(15 23 42 / 7%);
}
.manual-content h1 { margin-top: 0; font-size: clamp(1.8rem, 4vw, 2.5rem); line-height: 1.35; }
.manual-content h2 { margin-top: 2.8em; padding-bottom: .4em; border-bottom: 2px solid #bfdbfe; font-size: 1.55rem; }
.manual-content h3 { margin-top: 2em; font-size: 1.16rem; }
.manual-content a { color: var(--brand); }
.manual-content code { padding: .12em .35em; border-radius: 4px; background: #eef2f7; font-size: .9em; }
.manual-content table { width: 100%; margin: 20px 0; border-collapse: collapse; font-size: .92rem; }
.manual-content th, .manual-content td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.manual-content th { background: #eff6ff; }
.manual-content hr { margin: 36px 0; border: 0; border-top: 1px solid var(--line); }
.manual-loading { color: var(--muted); }
.manual-error { padding: 16px; border-radius: 8px; color: #991b1b; background: #fef2f2; }
@media (max-width: 800px) {
  .manual-layout { display: block; padding: 18px 12px 48px; }
  .manual-toc { position: static; max-height: 260px; margin-bottom: 18px; }
  .manual-content { padding: 24px 18px; }
  .manual-content table { display: block; overflow-x: auto; }
}
@media print {
  .manual-header, .manual-toc { display: none; }
  body { background: #fff; }
  .manual-layout { display: block; max-width: none; padding: 0; }
  .manual-content { border: 0; box-shadow: none; }
}