:root {
  --bg: #ffffff; --fg: #1f2328; --sub: #59636e; --line: #d8dee4; --card: #f6f8fa; --code: #eff1f3;
  --accent: #2563eb; --accent-soft: #e8f0fe;
  --remove: #e5484d; --keep: #c9d1d9;
  --subtitle: #0ea5a4; --capture: #10a05a; --mark: #e5484d; --range: #f5d77a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16181c; --fg: #e6e8eb; --sub: #a3abb4; --line: #33383f; --card: #1f2329; --code: #262b31;
    --accent: #6ea0ff; --accent-soft: #1c2a44; --keep: #4b535c;
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: "Yu Gothic UI", "Meiryo UI", "Meiryo", sans-serif; font-size: 15px; line-height: 1.8;
}
.layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); max-width: 1280px; margin: 0 auto; }
nav {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 24px 16px;
  border-right: 1px solid var(--line); font-size: 14px;
}
nav .title { font-weight: 700; font-size: 16px; }
nav .ver { color: var(--sub); font-size: 12px; margin-bottom: 16px; }
nav ol { padding-left: 20px; margin: 0; }
nav li { margin: 4px 0; }
nav li li { font-size: 13px; }
nav ol ol { list-style: none; padding-left: 12px; }
nav a { color: var(--fg); text-decoration: none; }
nav a:hover { color: var(--accent); text-decoration: underline; }
nav .todo { color: var(--sub); }
main { padding: 24px 40px 100px; min-width: 0; }
h1 { font-size: 28px; margin: 8px 0 4px; }
h2 { font-size: 23px; margin: 56px 0 12px; padding-bottom: 6px; border-bottom: 2px solid var(--line); }
h3 { font-size: 18px; margin: 36px 0 8px; }
h3 .num {
  display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 8px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 15px; vertical-align: 2px;
}
p, li { max-width: 74ch; }
/* 全機能モードだけの機能の印（v1.11） */
.mode { display: inline-block; margin-left: 10px; padding: 0 9px; border: 1px solid var(--capture); border-radius: 11px; color: var(--capture);
  font-size: 12px; font-weight: 700; line-height: 1.7; vertical-align: 3px; white-space: nowrap; }
a { color: var(--accent); }
.lead { color: var(--sub); }
kbd {
  display: inline-block; padding: 0 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px;
  background: var(--card); font-family: Consolas, monospace; font-size: 13px; line-height: 1.6;
}
code { background: var(--code); padding: 1px 5px; border-radius: 4px; font-family: Consolas, "BIZ UDGothic", monospace; font-size: 13px; }
.btn { display: inline-block; padding: 0 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--card); font-size: 13px; white-space: nowrap; line-height: 1.7; }
.note, .warn, .tip { border-left: 4px solid var(--accent); background: var(--card); padding: 10px 14px; margin: 16px 0; max-width: 900px; border-radius: 0 6px 6px 0; }
.warn { border-left-color: var(--remove); }
.tip { border-left-color: var(--capture); }
.note > b:first-child, .warn > b:first-child, .tip > b:first-child { display: block; }
.draft { background: #fff7e0; color: #5c4400; border: 1px solid #f0d58a; border-radius: 6px; padding: 8px 14px; margin: 12px 0 0; max-width: 900px; font-size: 14px; }
@media (prefers-color-scheme: dark) { .draft { background: #3a3014; color: #f3e2b0; border-color: #6b5a24; } }

/* ---- 全体の流れ（フロー図） ---- */
.flowchart { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 20px 0 8px; max-width: 980px; }
.flowchart a {
  position: relative; display: block; margin-right: 26px; padding: 12px 10px 12px; border: 2px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--fg); text-decoration: none; text-align: center; min-height: 128px;
  transition: border-color .2s, transform .2s;
}
.flowchart a:last-child { margin-right: 0; }
.flowchart a:hover { border-color: var(--accent); transform: translateY(-2px); }
.flowchart a::after {
  content: ""; position: absolute; right: -24px; top: 50%; width: 20px; height: 2px; background: var(--sub);
}
.flowchart a::before {
  content: ""; position: absolute; right: -25px; top: calc(50% - 5px); border: 6px solid transparent; border-left: 8px solid var(--sub);
  border-right: 0;
}
.flowchart a:last-child::after, .flowchart a:last-child::before { display: none; }
.flowchart .icon { font-size: 26px; line-height: 1.3; }
.flowchart .step { display: block; color: var(--accent); font-size: 12px; font-weight: 700; }
.flowchart .name { display: block; font-weight: 700; }
.flowchart .desc { display: block; color: var(--sub); font-size: 12px; line-height: 1.5; margin-top: 4px; }
.flowchart a.pulse { animation: pulse 1.2s ease-in-out; }
@keyframes pulse { 0%, 100% { border-color: var(--line); } 40% { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } }
.flow-extra { display: flex; gap: 12px; flex-wrap: wrap; max-width: 980px; font-size: 13px; color: var(--sub); }
.flow-extra span { border: 1px dashed var(--line); border-radius: 8px; padding: 4px 10px; }
@media (max-width: 900px) {
  .flowchart { grid-template-columns: 1fr; gap: 22px; }
  .flowchart a { margin-right: 0; min-height: 0; }
  .flowchart a::after { right: auto; left: 50%; top: auto; bottom: -20px; width: 2px; height: 16px; }
  .flowchart a::before { right: auto; left: calc(50% - 5px); top: auto; bottom: -24px; border: 6px solid transparent; border-top: 8px solid var(--sub); border-bottom: 0; }
}

/* ---- 注釈付きの画面 ---- */
.shot { margin: 16px 0 8px; max-width: 980px; }
.shot.flush { margin-bottom: 0; }
.shot .frame { position: relative; display: inline-block; max-width: 100%; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; line-height: 0; background: #fff; cursor: zoom-in; }
.shot img { display: block; max-width: 100%; height: auto; }
.shot svg.overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.shot figcaption { color: var(--sub); font-size: 13px; margin-top: 4px; }
.overlay .dim { fill: rgba(0, 0, 0, .45); opacity: 0; transition: opacity .2s; pointer-events: none; }
.overlay.focus .dim { opacity: 1; }
.overlay .box { fill: none; stroke: var(--mark); stroke-width: 3; transition: stroke-width .2s; }
.overlay .badge circle { fill: var(--mark); stroke: #fff; stroke-width: 2; }
.overlay .badge text { fill: #fff; font: 700 15px "Yu Gothic UI", sans-serif; text-anchor: middle; dominant-baseline: central; }
.overlay g.item { cursor: pointer; transition: opacity .2s; }
.overlay.focus g.item:not(.on) { opacity: .25; }
.overlay g.item.on .box { stroke-width: 5; }
ol.callouts { list-style: none; padding: 0; margin: 10px 0 0; max-width: 980px; counter-reset: none; }
ol.callouts li { position: relative; padding: 6px 10px 6px 42px; border-radius: 6px; max-width: none; transition: background .2s; cursor: default; }
ol.callouts li::before {
  content: attr(data-n); position: absolute; left: 8px; top: 8px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--mark); color: #fff; font-size: 13px; font-weight: 700; line-height: 24px; text-align: center;
}
ol.callouts li.on { background: var(--accent-soft); }
ol.callouts li b { margin-right: 4px; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 980px; align-items: start; }
@media (max-width: 900px) { .two { grid-template-columns: 1fr; } }

/* ---- 再現した画面（録画の確認・完了） ---- */
.mock { width: 100%; max-width: 480px; border: 1px solid #b9c0c8; border-radius: 6px; background: #fff; color: #1f2328; box-shadow: 0 4px 14px rgba(0,0,0,.12); font-size: 13px; line-height: 1.6; }
.mock .bar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid #e3e6ea; font-size: 12px; }
.mock .bar::before { content: ""; width: 14px; height: 14px; border-radius: 3px; background: linear-gradient(135deg, #1e3a8a, #2563eb); }
.mock .body { padding: 12px 14px 14px; }
.mock .h { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.mock .h.gap-top { margin-top: 8px; }
.mock dl { display: grid; grid-template-columns: 64px 1fr; margin: 0; }
.mock dt { color: #6a737d; } .mock dd { margin: 0; }
.mock .s { color: #6a737d; font-size: 12px; margin-top: 4px; }
.mock .input { border: 1px solid #2563eb; border-radius: 3px; padding: 3px 8px; margin: 4px 0; }
.mock .btns { display: flex; gap: 6px; margin-top: 12px; }
.mock .btns .sp { flex: 1; }
.mock .b { border: 1px solid #c3c9d0; border-radius: 4px; padding: 3px 12px; background: #f6f8fa; white-space: nowrap; }
.mock .b.primary { background: #0f6cbd; border-color: #0f6cbd; color: #fff; }
.mock .b.hl { outline: 3px solid var(--mark); outline-offset: 2px; }
.mock-cap { color: var(--sub); font-size: 13px; margin-top: 6px; }

/* ---- 動く図: カット ---- */
.demo { border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; margin: 16px 0; max-width: 980px; background: var(--card); }
.demo .title { font-weight: 700; margin-bottom: 6px; }
.demo .controls { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.demo button {
  font: inherit; font-size: 14px; padding: 4px 14px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); cursor: pointer;
}
.demo button:hover { border-color: var(--accent); }
.demo button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.demo button:disabled { opacity: .45; cursor: default; }
.track { display: flex; height: 46px; border-radius: 6px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); }
.seg { position: relative; height: 100%; display: grid; place-items: center; font-size: 12px; line-height: 1.3; text-align: center; overflow: hidden; white-space: nowrap;
  transition: flex-basis .9s ease, background-color .4s, opacity .6s; flex: 0 0 auto; color: #1f2328; }
.seg.keep { background: var(--keep); color: var(--fg); }
.seg.wait { background: #cfe0ff; }
.seg.oops { background: #ffd5d6; }
.seg.cut-remove { background: var(--remove); color: #fff; }
.seg.gone { opacity: 0; }
.scale { display: flex; justify-content: space-between; color: var(--sub); font-size: 12px; font-family: Consolas, monospace; margin-top: 2px; }
.demo .result { margin-top: 8px; font-size: 14px; min-height: 1.8em; }
.demo .result b { font-family: Consolas, monospace; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--sub); margin-top: 6px; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: -1px; margin-right: 4px; }
.legend .sw-remove { background: var(--remove); }

/* ---- 動く図: カット → 字幕の順番 ---- */
.stepper .stage { position: relative; height: 150px; margin-top: 8px; }
.stepper .row { position: absolute; left: 0; right: 0; height: 36px; }
.stepper .row-1 { top: 6px; } .stepper .row-2 { top: 62px; } .stepper .row-3 { top: 112px; }
.stepper .row .lbl { position: absolute; left: 0; top: 7px; width: 90px; font-size: 13px; color: var(--sub); }
.stepper .row .lane { position: absolute; left: 96px; right: 0; top: 0; height: 36px; }
.stepper .bar { position: absolute; top: 4px; height: 28px; border-radius: 4px; transition: left .9s ease, width .9s ease, opacity .5s; display: grid; place-items: center; font-size: 12px; color: #1f2328; overflow: hidden; white-space: nowrap; }
.stepper .screen { background: var(--keep); }
.stepper .scene-a { background: #cfe0ff; } .stepper .scene-b { background: #d9f2e3; } .stepper .scene-c { background: #ffe3c4; }
.stepper .subbar { background: var(--subtitle); color: #fff; }
.stepper .subbar.bad { background: var(--remove); }
.stepper .cutmark { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 3px dashed var(--remove); transition: opacity .5s; }
.stepper .msg { min-height: 3.6em; margin-top: 4px; font-size: 14px; }
.stepper .dots { display: flex; gap: 6px; align-items: center; }
.stepper .dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.stepper .dots span.on { background: var(--accent); }

h4 { font-size: 16px; margin: 26px 0 6px; }
figure.diagram { margin: 16px 0 8px; max-width: 760px; }
figure.diagram svg { width: 100%; height: auto; display: block; font-family: "Yu Gothic UI", "Meiryo", sans-serif; }
figure.diagram figcaption { color: var(--sub); font-size: 13px; margin-top: 4px; }
ol.callouts.plain li { cursor: default; }
ol.callouts.plain li::before { background: #1f2328; }
@media (prefers-color-scheme: dark) { ol.callouts.plain li::before { background: #5b6470; } }
table { border-collapse: collapse; margin: 12px 0; width: 100%; max-width: 980px; }
th, td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; vertical-align: top; }
th { background: var(--card); white-space: nowrap; }

/* 字幕の見た目の見本 */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; max-width: 980px; margin: 12px 0; }
.swatch { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.swatch .screen { height: 90px; background: linear-gradient(135deg, #3b6ea8, #7fb0d9 60%, #e9eef3); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 10px; }
.swatch .label { padding: 6px 10px; font-size: 13px; line-height: 1.5; }
.swatch .label small { color: var(--sub); }
.swatch .s { font-family: "Meiryo", sans-serif; font-size: 15px; padding: 2px 8px; }
.s-outline { color: #fff; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 2px #000; }
.s-band { color: #fff; background: rgba(0, 0, 0, 0.62); }
.s-black { color: #fff; background: #000; }
.s-white { color: #000; background: #fff; }

/* 動く図: クロスフェード */
.fade-wrap { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.fade-screen { position: relative; width: 260px; height: 146px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); flex: none; }
.fs { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font-weight: 700; color: #1f2328; line-height: 1.4; }
.fs small { font-weight: 400; }
.fs.a { background: #cfe0ff; } .fs.c { background: #ffe3c4; opacity: 0; }
.fade-screen.fade .fs.c { animation: xf-c 4s infinite; } .fade-screen.fade .fs.a { animation: xf-a 4s infinite; }
.fade-screen.cut .fs.c { animation: ct-c 4s infinite steps(1, end); }
@keyframes xf-c { 0%, 40% { opacity: 0; } 60%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes xf-a { 0%, 40% { opacity: 1; } 60%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ct-c { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
.fade-text { flex: 1; min-width: 260px; }
.fade-msg { margin: 6px 0 0; font-size: 14px; }

/* AI 連携の流れ */
.aiflow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; max-width: 980px; margin: 14px 0; }
.ai-box { border: 2px solid var(--line); border-radius: 10px; padding: 8px 14px; text-align: center; font-weight: 700; line-height: 1.4; background: var(--card); }
.ai-box small { font-weight: 400; color: var(--sub); }
.ai-box.gem { border-color: #8b5cf6; }
.ai-box.app { border-color: var(--accent); }
.ai-arrow { font-size: 12px; color: var(--sub); text-align: center; line-height: 1.5; }

/* 手順の横並び */
.flow-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 14px 0 4px; max-width: 980px; }
.fstep { border: 1px solid var(--line); background: var(--card); border-radius: 8px; padding: 6px 12px; font-size: 14px; }
.fstep.ok { border-color: var(--capture); }
.farrow { color: var(--sub); }

/* フォルダーの図 */
.tree { font-family: Consolas, "BIZ UDGothic", monospace; font-size: 13px; line-height: 1.9; background: var(--code); border-radius: 8px; padding: 12px 16px; max-width: 980px; overflow-x: auto; white-space: nowrap; }
.tree .t1 { padding-left: 2em; } .tree .t2 { padding-left: 4em; } .tree .t3 { padding-left: 6em; } .tree .t4 { padding-left: 8em; }
.tree .tc { font-family: "Yu Gothic UI", "Meiryo", sans-serif; color: var(--sub); margin-left: 12px; font-size: 12px; }
.tree .tc::before { content: "← "; }
.tree .v { color: var(--accent); font-weight: 700; }
.tree .e1 { border-left: 3px solid var(--capture); margin-left: -3px; }
.tree .e2 { border-left: 3px solid #8b5cf6; margin-left: -3px; }

/* よくある質問・用語集 */
input.filter { font: inherit; width: 100%; max-width: 420px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--fg); margin: 6px 0 10px; }
.faq-group { font-weight: 700; color: var(--sub); margin: 18px 0 6px; font-size: 14px; }
#faq-list details { border: 1px solid var(--line); border-radius: 8px; margin: 6px 0; max-width: 980px; background: var(--bg); }
#faq-list summary { cursor: pointer; padding: 8px 14px; font-weight: 700; }
#faq-list summary::marker { color: var(--accent); }
#faq-list details[open] summary { border-bottom: 1px solid var(--line); background: var(--card); border-radius: 8px 8px 0 0; }
#faq-list details p { margin: 8px 14px 12px; }
.filter-empty { color: var(--sub); }
dl.glossary dt { font-weight: 700; margin-top: 14px; }
dl.glossary dd { margin: 2px 0 0 1.2em; max-width: 74ch; }

/* 設定のタブ */
.tabs { max-width: 980px; }
.tab-buttons { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid var(--line); }
.tab-buttons button { font: inherit; font-size: 14px; padding: 4px 14px; border: 1px solid var(--line); border-bottom: 0; border-radius: 6px 6px 0 0; background: var(--card); color: var(--fg); cursor: pointer; }
.tab-buttons button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.tab-panel { padding-top: 6px; }
.tab-panel[hidden] { display: none; }

/* ---- 拡大表示 ---- */
dialog.zoom { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh; }
dialog.zoom::backdrop { background: rgba(0, 0, 0, .75); }
dialog.zoom .frame { position: relative; line-height: 0; }
dialog.zoom img { max-width: 96vw; max-height: 92vh; display: block; }
dialog.zoom svg { position: absolute; inset: 0; width: 100%; height: 100%; }
dialog.zoom .close { position: fixed; top: 10px; right: 16px; color: #fff; font-size: 14px; background: rgba(0,0,0,.5); border-radius: 6px; padding: 2px 10px; cursor: pointer; line-height: 1.8; }

@media (max-width: 900px) {
  .layout { display: block; }
  nav { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--line); }
  main { padding: 16px; }
}
@media print {
  nav, .demo .controls, .draft { display: none; }
  .layout { display: block; }
  h2, h3 { break-after: avoid; }
  .shot, .demo, .mock, details, .tree { break-inside: avoid; }
  .tab-panel[hidden] { display: block; }
  .tab-buttons, input.filter { display: none; }
}

/* ---- Web 版だけ（build-manual.py が付ける） ----
   サイト共通デザイン（/assets/site.css）の色・文字・ナビゲーションに合わせる。説明書の図の色（カット・字幕など）は変えない。
   --bg・--line・--accent・--accent-soft は site.css と同じ名前なので、site.css と同じ値をここで指定し直す。 */
:root {
  --bg: #f4f1ea; --line: #d8d1c4; --accent: #9a4a2a; --accent-soft: #f1e3d8;
  --fg: var(--ink); --sub: var(--muted); --card: var(--surface); --code: var(--surface-strong);
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #1b1815; --line: #3d3730; --accent: #e3a07c; --accent-soft: #3a2a20; }
}
body { font-family: var(--sans); font-size: 16px; }
a { color: var(--link); }
h1 { font: 600 clamp(27px, 3.6vw, 36px)/1.3 var(--serif); letter-spacing: .02em; }
h3 .num, .demo button.primary, .tab-buttons button[aria-selected="true"] { color: var(--on-accent); }
.layout { max-width: var(--wide); }
/* 説明書の nav の指定（固定表示・枠線）をサイトのヘッダー・フッターに効かせない */
.site-header nav, .site-footer nav { position: static; height: auto; overflow: visible; padding: 0; border: 0; }
.site-header nav a:hover, .site-footer nav a:hover { text-decoration: none; }
.quick { max-width: 980px; margin: 18px 0 8px; }
.quick li { max-width: none; }
/* 画像の拡大（キーボードでも操作できる） */
.shot .frame:focus-visible, dialog.zoom .close:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.web-toc[open] > summary { display: none; }
@media (max-width: 900px) {
  .web-toc > summary, .web-toc[open] > summary { display: list-item; cursor: pointer; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); font-weight: 600; }
  .web-toc[open] > summary { margin-bottom: 12px; }
  .web-toc a { display: inline-block; padding: 4px 0; }  /* 指で押しやすい高さにする */
}
@media (max-width: 900px) {
  .two { grid-template-columns: minmax(0, 1fr); }  /* 狭い画面で再現図が横にはみ出さないように */
  .mock .btns { flex-wrap: wrap; }
}
@media (max-width: 560px) { .quick { grid-template-columns: minmax(0, 1fr); } }
/* 表の見出しは PC では折り返さないが、スマートフォン幅では折り返して横にはみ出さないようにする */
@media (max-width: 400px) { main th { white-space: normal; } }
@media print { .site-header, .site-footer nav, .skip-link { display: none; } }