/* AI 運営指揮センター デモ（cc-tour.js が中身を描く）。2026-10-26 夜：原版動画の画面を 1:1 で再現。
   中身は幅 1920px のページとして組み、JS が枠の幅に縮小・自動スクロールする。
   枠の幅は隣の図版と同じ .v4-figure-wide / .v4-frame。言語ボタンだけページの明暗に合わせる。 */

.dv-title { margin: 0 0 14px; }
.dv-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.dv-tab { min-height: 44px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--v4-hair-strong, rgba(16,19,24,.2)); background: transparent; color: var(--v4-ink-body, #2f333a); font: inherit; font-size: 15px; cursor: pointer; }
.dv-tab[aria-pressed="true"] { background: var(--v4-ink, #14161a); border-color: var(--v4-ink, #14161a); color: #fff; font-weight: 600; }
.v4-band-dark .dv-tab { border-color: rgba(255,255,255,.22); color: #c5ccd8; }
.v4-band-dark .dv-tab[aria-pressed="true"] { background: #e8ecf2; border-color: #e8ecf2; color: #0b0f16; }

/* ── 舞台（16:9 の窓） ── */
.od-stage {
  --bg: #0b0f17; --card: #121a27; --card2: #0f1622; --line: rgba(110,150,210,.16); --ink: #e9eef6; --sub: #8e9bb0; --dim: #5f6c80;
  --g: #2fd27a; --c: #3fd8f5; --b: #4b8cff; --p: #a07cff; --a: #f5b13d; --r: #ff5c6c;
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg); isolation: isolate;
  font-family: "Noto Sans JP", "Noto Sans SC", "PingFang SC", "Hiragino Sans", system-ui, sans-serif;
}
.od-stage::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(38% 30% at 14% 4%, rgba(47,210,122,.16), transparent 70%), radial-gradient(34% 30% at 88% 8%, rgba(75,140,255,.16), transparent 70%), radial-gradient(50% 40% at 50% 110%, rgba(63,216,245,.08), transparent 70%); }
.od-stage::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--c) 30%, var(--g) 60%, transparent); animation: cc-scan 5s linear infinite; }
@keyframes cc-scan { from { transform: translateX(-70%); } to { transform: translateX(70%); } }
.od-stage:fullscreen { aspect-ratio: auto; width: 100vw; height: 100vh; }
.cc-stars { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.cc-view { position: absolute; inset: 0; z-index: 1; }
.cc-fs { position: absolute; right: 10px; bottom: 10px; z-index: 4; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(10,15,24,.72); color: #dfe7f2; font: inherit; font-size: 12px; cursor: pointer; backdrop-filter: blur(4px); }
.cc-fs:hover { border-color: var(--c); color: #fff; }

/* ── 1920px ページ（以下の寸法はすべて原版の 1920 幅基準） ── */
.cc-page { position: absolute; left: 0; top: 0; width: 1920px; padding: 26px 130px 40px; box-sizing: border-box; transform-origin: 0 0;
  color: var(--ink); font-size: 16px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.cc-page b, .cc-page strong { font-weight: 700; }
.cc-page small { font-size: inherit; }
.cc-page p, .cc-page h2, .cc-page ul, .cc-page ol { margin: 0; padding: 0; }
.cc-page [data-c], .cc-clock b, .cc-pill b, .cc-feed time, .cc-col span, .cc-sys li small b { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }

.cc-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--g); flex: none; animation: cc-ping 1.8s infinite; }
@keyframes cc-ping { 0% { box-shadow: 0 0 0 0 rgba(47,210,122,.6); } 80%, 100% { box-shadow: 0 0 0 9px rgba(47,210,122,0); } }
.cc-g { --k: var(--g); } .cc-c { --k: var(--c); } .cc-b { --k: var(--b); } .cc-p { --k: var(--p); } .cc-a { --k: var(--a); } .cc-r { --k: var(--r); }
.cc-amber { color: var(--a) !important; } .cc-green { color: var(--g) !important; }

/* ヘッダー */
.cc-hd { display: flex; align-items: center; justify-content: space-between; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.cc-brand { display: flex; align-items: center; gap: 18px; }
.cc-mark { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid rgba(63,216,245,.35); border-radius: 8px; background: rgba(63,216,245,.06); color: var(--c); font-size: 24px; font-weight: 700; }
.cc-brand b { display: block; font-size: 26px; letter-spacing: .04em; }
.cc-brand small { display: block; color: var(--sub); font-size: 13px; letter-spacing: .3em; }
.cc-pills { display: flex; gap: 14px; }
.cc-pill { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; background: rgba(18,26,39,.7); color: var(--sub); font-size: 15px; }
.cc-pill:first-child { color: #b6f1cf; }
.cc-pill b { color: var(--ink); }

.cc-tick { display: flex; gap: 14px; margin-top: 18px; height: 36px; }
.cc-tick-l { display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border: 1px solid rgba(47,210,122,.45); border-radius: 999px; background: rgba(47,210,122,.08); color: var(--g); font-size: 14px; font-weight: 700; }
.cc-tick-r { flex: 1; display: flex; align-items: center; gap: 14px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; color: var(--sub); font-size: 14px; overflow: hidden; white-space: nowrap; }
.cc-tick-r em { font-style: normal; color: var(--c); font-weight: 700; }
.cc-flash span { animation: cc-tickin .7s ease; }
@keyframes cc-tickin { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.cc-title { display: flex; align-items: baseline; gap: 24px; margin: 30px 0 30px; }
.cc-title h2 { font-size: 44px; line-height: 1.2; letter-spacing: .02em; color: #fff; text-shadow: 0 0 30px rgba(63,216,245,.25); }
.cc-grad { background: linear-gradient(90deg, var(--c), var(--g) 70%, #b8ffd8); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; animation: cc-shine 6s ease-in-out infinite alternate; }
@keyframes cc-shine { from { background-position: 0 0; } to { background-position: 100% 0; } }
.cc-title p { color: var(--sub); font-size: 18px; }

/* カード共通：上辺の発光ライン＋落影 */
.cc-card { position: relative; background: linear-gradient(180deg, var(--card), var(--card2)); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03); }
.cc-card::before { content: ""; position: absolute; left: 14px; right: 14px; top: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--k, var(--b)), transparent); box-shadow: 0 0 14px var(--k, var(--b)); opacity: .85; }
.cc-top-g { --k: var(--g); } .cc-top-c { --k: var(--c); } .cc-top-b { --k: var(--b); } .cc-top-p { --k: var(--p); } .cc-top-a { --k: var(--a); } .cc-top-r { --k: var(--r); }

/* 表示に入る時：下からふわっと（原版のスクロール演出） */
.cc-rv { opacity: 0; transform: translateY(36px) scale(.985); filter: blur(4px); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.8,.2,1), filter .8s ease; }
.cc-rv.cc-in { opacity: 1; transform: none; filter: none; }
.cc-deps .cc-rv:nth-child(2), .cc-kpis .cc-rv:nth-child(2) { transition-delay: .08s; }
.cc-deps .cc-rv:nth-child(3), .cc-kpis .cc-rv:nth-child(3) { transition-delay: .16s; }
.cc-deps .cc-rv:nth-child(4), .cc-kpis .cc-rv:nth-child(4) { transition-delay: .24s; }
.cc-kpis .cc-rv:nth-child(5), .cc-two .cc-rv:nth-child(2), .cc-hero .cc-rv:nth-child(2) { transition-delay: .2s; }

/* 創業者 ＋ CEO */
.cc-hero { display: grid; grid-template-columns: 456px 1fr; gap: 22px; }
.cc-founder { --k: var(--c); padding: 30px; box-shadow: 0 0 40px rgba(63,216,245,.08), 0 10px 30px rgba(0,0,0,.35); }
.cc-flabel { color: var(--c); font-size: 14px; font-weight: 700; letter-spacing: .2em; }
.cc-fid { display: flex; align-items: center; gap: 18px; margin: 18px 0 22px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.cc-fav { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 10px; border: 1px solid rgba(63,216,245,.45); background: linear-gradient(135deg, rgba(63,216,245,.18), rgba(47,210,122,.08)); color: var(--c); font-size: 34px; font-weight: 700; box-shadow: 0 0 24px rgba(63,216,245,.25); animation: cc-breath 3s ease-in-out infinite; }
@keyframes cc-breath { 50% { box-shadow: 0 0 40px rgba(63,216,245,.45); } }
.cc-fid b { display: block; font-size: 30px; }
.cc-fid small { color: var(--sub); font-size: 16px; }
.cc-ftag { font-size: 20px; font-weight: 700; line-height: 1.6; }
.cc-ftag em { font-style: normal; color: var(--c); }
.cc-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.cc-chips span { padding: 6px 12px; border: 1px solid var(--line); border-radius: 6px; color: var(--sub); font-size: 14px; }
.cc-chips b { color: var(--ink); }

.cc-ceo { --k: var(--b); padding: 26px 30px; }
.cc-ceo-h { display: flex; align-items: center; gap: 22px; }
.cc-ceo-b { position: relative; width: 70px; height: 70px; display: grid; place-items: center; border-radius: 50%; border: 2px solid rgba(75,140,255,.6); background: radial-gradient(circle, rgba(75,140,255,.25), rgba(11,15,23,.9)); color: #cfe0ff; font-weight: 700; font-size: 18px; letter-spacing: .06em; flex: none; }
.cc-ceo-b::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1px dashed rgba(63,216,245,.45); animation: cc-spin 14s linear infinite; }
@keyframes cc-spin { to { transform: rotate(360deg); } }
.cc-ceo-h b { display: block; font-size: 26px; }
.cc-ceo-h small { color: var(--sub); font-size: 16px; }
.cc-livet { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--g); font-size: 15px; font-weight: 700; white-space: nowrap; }
.cc-ceo-s { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 22px 0 18px; }
.cc-ceo-s > div { padding: 16px 18px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(135deg, rgba(255,255,255,.035), transparent); }
.cc-ceo-s b { font-size: 34px; }
.cc-ceo-s small { margin-left: 6px; color: var(--sub); font-size: 15px; }
.cc-ceo-s span { display: block; color: var(--sub); font-size: 15px; }
.cc-dir { padding-top: 18px; border-top: 1px solid var(--line); color: var(--sub); font-size: 16px; line-height: 1.7; }
.cc-dir b { color: var(--ink); }

/* 幹線：縦線→ノード→横線、光の粒が走る */
.cc-trunk { display: block; width: 1660px; height: 70px; overflow: visible; }
.cc-tr-base { fill: none; stroke: rgba(63,216,245,.35); stroke-width: 2; }
.cc-tr-run { fill: none; stroke: var(--c); stroke-width: 3; stroke-dasharray: 160 1340; filter: drop-shadow(0 0 6px var(--c)); animation: cc-run 3.2s linear infinite; }
@keyframes cc-run { from { stroke-dashoffset: 1500; } to { stroke-dashoffset: 0; } }
.cc-tr-node { fill: var(--c); filter: drop-shadow(0 0 10px var(--c)); animation: cc-node 1.6s ease-in-out infinite; transform-origin: 830px 40px; }
@keyframes cc-node { 50% { transform: scale(1.35); } }

/* KPI */
.cc-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-bottom: 40px; }
.cc-kpi { padding: 22px 22px 20px; box-shadow: 0 0 30px rgba(63,216,245,.05), 0 10px 30px rgba(0,0,0,.35); }
.cc-kl { display: flex; align-items: center; gap: 10px; color: var(--sub); font-size: 16px; }
.cc-d { width: 10px; height: 10px; border-radius: 50%; background: var(--k); box-shadow: 0 0 8px var(--k); }
.cc-kv { margin: 10px 0 6px; }
.cc-kv b { font-size: 40px; line-height: 1.1; text-shadow: 0 0 18px rgba(255,255,255,.12); }
.cc-kv small { margin-left: 8px; color: var(--sub); font-size: 17px; }
.cc-ks { color: var(--sub); font-size: 15px; }
.cc-ks em { font-style: normal; font-weight: 700; }
.cc-bar { display: block; height: 6px; margin-top: 16px; border-radius: 3px; background: rgba(255,255,255,.07); overflow: hidden; }
.cc-bar > i { display: block; position: relative; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--b), var(--c)); box-shadow: 0 0 12px var(--c); transition: width 1.6s cubic-bezier(.2,.8,.2,1) .3s; overflow: hidden; }
.cc-bar > i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: translateX(-100%); animation: cc-sheen 2.4s ease-in-out infinite 1.8s; }
@keyframes cc-sheen { to { transform: translateX(100%); } }
.cc-bar-p > i { background: linear-gradient(90deg, #7a5cff, var(--p)); box-shadow: 0 0 12px var(--p); }

/* 見出し */
.cc-sec { display: flex; align-items: center; gap: 16px; margin: 0 0 6px; }
.cc-sec b { font-size: 22px; white-space: nowrap; }
.cc-sec span { padding: 3px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--sub); font-size: 14px; white-space: nowrap; }
.cc-sec i { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), rgba(63,216,245,.5) 50%, var(--line)); background-size: 200% 100%; animation: cc-shine 4s linear infinite alternate; }

/* 部門へ流れる光（原版日文版） */
.cc-flow { display: block; width: 1660px; height: 74px; overflow: visible; }
.cc-fl-base { fill: none; stroke: rgba(120,160,220,.18); stroke-width: 2; }
.cc-fl { fill: none; stroke: var(--k); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 26 34 6 34; filter: drop-shadow(0 0 5px var(--k)); animation: cc-flowa 2.2s linear infinite; }
@keyframes cc-flowa { to { stroke-dashoffset: -100; } }
.cc-fl-hub { fill: var(--c); filter: drop-shadow(0 0 10px var(--c)); animation: cc-node 1.6s ease-in-out infinite; transform-origin: 830px 8px; }

/* 部門カード */
.cc-deps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 10px; }
.cc-deps + .cc-sec { margin-top: 34px; }
.cc-dep { padding: 22px 22px 20px; display: flex; flex-direction: column; }
.cc-dep-h { display: flex; align-items: flex-start; gap: 14px; }
.cc-ic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.03); flex: none; }
.cc-ic svg { width: 24px; height: 24px; fill: none; stroke: var(--k); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px var(--k)); }
.cc-dep-h b { display: block; font-size: 21px; line-height: 1.3; }
.cc-dep-h small { display: block; color: var(--sub); font-size: 13px; letter-spacing: .18em; }
.cc-run { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--g); font-size: 14px; font-weight: 700; white-space: nowrap; }
.cc-run .cc-dot { width: 8px; height: 8px; }
.cc-dep-d { margin: 16px 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); color: var(--sub); font-size: 15px; line-height: 1.65; min-height: 76px; }
.cc-dep-m { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.cc-dep-m b { font-size: 21px; }
.cc-dep-m small { margin-left: 5px; color: var(--sub); font-size: 13px; }
.cc-dep-m span { display: block; color: var(--sub); font-size: 14px; }
.cc-dep .cc-bar { margin-top: 16px; }
.cc-prog { margin-top: 8px; color: var(--sub); font-size: 14px; }
.cc-prog b { color: var(--c); }
.cc-prog .cc-pt { color: var(--p); }

/* 判断待ち・フィード・週・稼働 */
.cc-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 18px 0 40px; }
.cc-ch { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.cc-ch b { display: inline-flex; align-items: center; gap: 12px; font-size: 21px; }
.cc-ch small { color: var(--sub); font-size: 15px; }
.cc-dec { --k: var(--a); padding: 24px; border-color: rgba(245,177,61,.55); animation: cc-amber 3.2s ease-in-out infinite; }
@keyframes cc-amber { 0%, 100% { box-shadow: 0 0 18px rgba(245,177,61,.12), 0 10px 30px rgba(0,0,0,.35); } 50% { box-shadow: 0 0 38px rgba(245,177,61,.3), 0 10px 30px rgba(0,0,0,.35); } }
.cc-badge { padding: 2px 10px; border-radius: 999px; background: rgba(245,177,61,.18); color: var(--a); font-size: 15px; }
.cc-q { padding: 18px 20px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(11,15,23,.55); }
.cc-q-t { display: flex; align-items: flex-start; gap: 12px; }
.cc-q-t b { display: block; font-size: 18px; }
.cc-q-t small { display: block; color: var(--sub); font-size: 15px; }
.cc-q-t strong { margin-left: auto; font-size: 22px; white-space: nowrap; font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; }
.cc-pri { padding: 3px 9px; border-radius: 5px; font-size: 13px; white-space: nowrap; margin-top: 2px; }
.cc-pri-hi { background: rgba(255,92,108,.15); color: #ff8d98; border: 1px solid rgba(255,92,108,.35); }
.cc-pri-mid { background: rgba(245,177,61,.13); color: var(--a); border: 1px solid rgba(245,177,61,.35); }
.cc-pri-lo { background: rgba(75,140,255,.13); color: #8fb6ff; border: 1px solid rgba(75,140,255,.35); }
.cc-acts { display: flex; gap: 10px; margin-top: 14px; }
.cc-ok, .cc-hold { padding: 9px 24px; border-radius: 7px; font-size: 16px; font-weight: 700; }
.cc-ok { background: var(--g); color: #04210f; box-shadow: 0 0 18px rgba(47,210,122,.4); animation: cc-okp 2.6s ease-in-out infinite; }
@keyframes cc-okp { 50% { box-shadow: 0 0 30px rgba(47,210,122,.7); } }
.cc-hold { border: 1px solid var(--line); color: var(--ink); background: rgba(255,255,255,.03); }
.cc-cf { color: var(--sub); font-size: 15px; }
.cc-cf b { color: var(--ink); }

.cc-feedc { --k: var(--c); padding: 24px; }
.cc-sig { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; }
.cc-sig i { width: 4px; background: var(--c); border-radius: 1px; animation: cc-sig 1.2s ease-in-out infinite; }
.cc-sig i:nth-child(1) { height: 5px; } .cc-sig i:nth-child(2) { height: 9px; animation-delay: .15s; } .cc-sig i:nth-child(3) { height: 13px; animation-delay: .3s; } .cc-sig i:nth-child(4) { height: 16px; animation-delay: .45s; }
@keyframes cc-sig { 50% { opacity: .3; } }
.cc-feed { list-style: none; position: relative; }
.cc-feed::before { content: ""; position: absolute; left: 6px; top: 14px; bottom: 14px; width: 2px; background: linear-gradient(180deg, var(--c), rgba(63,216,245,.1)); }
.cc-feed li { position: relative; display: grid; grid-template-columns: 14px 64px 1fr; gap: 12px; align-items: baseline; padding: 13px 10px 13px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.cc-fd { width: 12px; height: 12px; border-radius: 50%; background: var(--k); box-shadow: 0 0 10px var(--k); position: relative; top: 1px; }
.cc-feed time { color: var(--sub); font-size: 15px; }
.cc-feed span { color: #d4dbe6; }
.cc-feed span b { color: #fff; }
.cc-feed .cc-new { background: linear-gradient(90deg, rgba(47,210,122,.14), transparent 80%); animation: cc-newin .9s cubic-bezier(.2,.8,.2,1); }
@keyframes cc-newin { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: none; } }
.cc-newtag { font-style: normal; margin-left: 6px; padding: 1px 8px; border-radius: 4px; background: rgba(47,210,122,.18); color: var(--g); font-size: 13px; font-weight: 700; }

.cc-week { --k: var(--c); padding: 24px; }
.cc-chart { display: grid; grid-template-columns: repeat(7, 1fr); gap: 30px; height: 250px; padding: 0 12px 16px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.cc-col { display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; }
.cc-col span { font-size: 15px; font-weight: 700; }
.cc-colbar { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.cc-colbar i { display: block; width: 100%; height: 0; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, #5a9bff, var(--b)); transition: height 1.3s cubic-bezier(.2,.8,.2,1); }
.cc-col:nth-child(2) i { transition-delay: .08s; } .cc-col:nth-child(3) i { transition-delay: .16s; } .cc-col:nth-child(4) i { transition-delay: .24s; }
.cc-col:nth-child(5) i { transition-delay: .32s; } .cc-col:nth-child(6) i { transition-delay: .4s; } .cc-col:nth-child(7) i { transition-delay: .48s; }
.cc-today .cc-colbar i { background: linear-gradient(180deg, #7cecff, #1fc6e6); box-shadow: 0 0 26px rgba(63,216,245,.55); animation: cc-breath2 2.4s ease-in-out infinite; }
@keyframes cc-breath2 { 50% { box-shadow: 0 0 40px rgba(63,216,245,.85); } }
.cc-col em { font-style: normal; color: var(--sub); font-size: 15px; white-space: nowrap; }
.cc-today em, .cc-today span { color: var(--c); }

.cc-sys { --k: var(--b); padding: 24px; }
.cc-sys ul { list-style: none; margin-bottom: 16px; }
.cc-sys li { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 17px; }
.cc-sys li span { flex: 1; }
.cc-sys li small { color: var(--sub); font-size: 14px; }
.cc-sys li small b { color: var(--ink); }
.cc-sys li em { font-style: normal; color: var(--g); font-weight: 700; font-size: 15px; }

.cc-ft { display: flex; justify-content: space-between; padding-top: 22px; border-top: 1px solid var(--line); color: var(--sub); font-size: 15px; }
.cc-ft b { color: var(--ink); letter-spacing: .08em; margin-right: 12px; }

@media (prefers-reduced-motion: reduce) {
  .od-stage *, .od-stage::after { animation: none !important; }
  .cc-rv { opacity: 1; transform: none; filter: none; transition: none; }
}

/* ── ツアー演出（2026-10-26 夜）：カメラ移動・スポット・字幕・カーソル・粒子 ── */
/* 移動中もページはぼかさない（清晰度優先）。速さは星のワープで見せる */
.cc-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.cc-intro .cc-view { animation: cc-boot 1.4s ease-out; }
@keyframes cc-boot { 0% { opacity: 0; filter: brightness(2.4) saturate(0); } 18% { opacity: 1; } 24% { opacity: .3; } 30% { opacity: 1; } 100% { filter: none; } }

/* スポット：周りを暗くして、HUD の角かっこ＋走査線 */
.cc-spot { position: absolute; z-index: 2; pointer-events: none; opacity: 0; border-radius: 12px; box-shadow: 0 0 0 4000px rgba(4,7,12,0); transition: opacity .35s, box-shadow .6s ease; }
.cc-spot.cc-on { opacity: 1; box-shadow: 0 0 0 4000px rgba(4,7,12,.5), 0 0 40px rgba(63,216,245,.35) inset; animation: cc-snap .55s cubic-bezier(.2,.9,.2,1.2); }
@keyframes cc-snap { from { transform: scale(1.08); } to { transform: none; } }
.cc-spot > i { position: absolute; width: 22px; height: 22px; border: 2px solid var(--c); filter: drop-shadow(0 0 6px var(--c)); animation: cc-corner 1.6s ease-in-out infinite; }
.cc-spot > i:nth-child(1) { left: -2px; top: -2px; border-right: 0; border-bottom: 0; }
.cc-spot > i:nth-child(2) { right: -2px; top: -2px; border-left: 0; border-bottom: 0; }
.cc-spot > i:nth-child(3) { left: -2px; bottom: -2px; border-right: 0; border-top: 0; }
.cc-spot > i:nth-child(4) { right: -2px; bottom: -2px; border-left: 0; border-top: 0; }
@keyframes cc-corner { 50% { opacity: .45; } }
.cc-beam { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--c), #fff, var(--c), transparent); box-shadow: 0 0 18px var(--c), 0 0 40px rgba(63,216,245,.6); opacity: 0; }
.cc-spot.cc-on .cc-beam { animation: cc-beam 1.1s ease-in-out .15s 1 both; }
@keyframes cc-beam { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

/* 字幕（左下のロワーサード） */
.cc-cap { position: absolute; left: 3%; bottom: 6%; z-index: 4; display: flex; align-items: stretch; gap: 12px; max-width: 78%; pointer-events: none; opacity: 0; transform: translateX(-16px); transition: opacity .3s, transform .5s cubic-bezier(.2,.8,.2,1); }
.cc-cap.cc-on { opacity: 1; transform: none; }
.cc-cap-n { display: grid; place-items: center; min-width: 2.4em; padding: 0 .4em; background: linear-gradient(180deg, var(--c), var(--g)); color: #04121a; font: 800 clamp(11px, 2.2cqw, 22px)/1 "JetBrains Mono", ui-monospace, Menlo, monospace; border-radius: 4px; box-shadow: 0 0 20px rgba(63,216,245,.6); }
.cc-cap div { padding: .35em .8em .4em; background: rgba(6,10,18,.78); border-left: 2px solid var(--c); border-radius: 0 6px 6px 0; backdrop-filter: blur(6px); }
.cc-cap b { display: block; color: #fff; font-size: clamp(12px, 2.6cqw, 30px); line-height: 1.3; text-shadow: 0 0 16px rgba(63,216,245,.5); }
.cc-cap em { display: block; font-style: normal; color: var(--c); font-size: clamp(10px, 1.9cqw, 21px); line-height: 1.35; }
.cc-cap.cc-on b { animation: cc-glitch .5s steps(2) 1; }
@keyframes cc-glitch { 0% { transform: translate(2px, 0); text-shadow: -2px 0 var(--r), 2px 0 var(--c); } 50% { transform: translate(-2px, 0); text-shadow: 2px 0 var(--r), -2px 0 var(--c); } 100% { transform: none; } }
.od-stage { container-type: inline-size; }

/* 進行ドット（右上） */
.cc-steps { position: absolute; z-index: 4; right: 3%; top: 5%; display: flex; gap: 6px; pointer-events: none; }
.cc-steps i { width: 18px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.18); transition: background .4s, width .4s; }
.cc-steps i.cc-past { background: rgba(63,216,245,.45); }
.cc-steps i.cc-cur { width: 34px; background: var(--c); box-shadow: 0 0 10px var(--c); }

/* 疑似カーソルと「承認」 */
.cc-cursor { position: absolute; left: 0; top: 0; z-index: 4; width: clamp(14px, 2.6cqw, 28px); height: auto; fill: #fff; stroke: #04121a; stroke-width: 1.4; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); opacity: 0; pointer-events: none; transition: transform 1.2s cubic-bezier(.3,.7,.2,1), opacity .3s; }
.cc-cursor.cc-on { opacity: 1; }
.cc-cursor.cc-press { animation: cc-press .35s ease; }
@keyframes cc-press { 50% { scale: .82; } }
.cc-q { transition: background .5s, border-color .5s, box-shadow .5s; }
.cc-q.cc-approved { background: rgba(47,210,122,.12); border-color: rgba(47,210,122,.7); box-shadow: 0 0 30px rgba(47,210,122,.35) inset; }
.cc-q.cc-approved .cc-ok { background: #fff; color: #087a3c; animation: none; }
.cc-q.cc-approved .cc-hold { opacity: .3; }
.cc-pop { display: inline-block; animation: cc-popn .6s ease; }
@keyframes cc-popn { 40% { transform: scale(1.5); color: var(--g); } }

@media (prefers-reduced-motion: reduce) { .cc-spot, .cc-cap, .cc-cursor { transition: none; } }
/* スマホ：枠を正方形にして、寄った時の文字を大きくする（幅は隣の図版と同じまま） */
@media (max-width: 640px) { .od-stage { aspect-ratio: 1 / 1; } .cc-steps i { width: 10px; } .cc-steps i.cc-cur { width: 20px; } }
/* 首页「自社で毎日運用しているシステム」の下に置いた版（2026-10-26）：3 枚のカードと同じ列幅、上は節内間距 */
.dv-home { margin-top: var(--v4-sec-in); }
.dv-home .v4-figcaption { margin-top: 14px; }
/* 「デモです」の注記（2026-10-26 老板指示：仅展示效果） */
.dv-note { display: block; margin-top: 8px; font-size: 12px; line-height: 1.6; opacity: .75; }

/* ════ 精致版（2026-10-26 深夜三：老板「再细腻一些，再高级一些」）════
   方針：線は細く、動きはゆっくり、光は柔らかく。派手な点滅・グリッチ・太い枠はやめる。 */
.cc-view { transform-origin: 50% 50%; }
.cc-vig { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(2,4,8,.55) 100%); }

/* スポット：縁をぼかした暗転、細い角、柔らかい光の通過 */
.cc-spot { border-radius: 14px; transition: opacity .7s ease, box-shadow 1s ease; }
.cc-spot.cc-on { animation: cc-spotin .9s cubic-bezier(.16,1,.3,1); box-shadow: 0 0 0 4000px rgba(3,6,11,.42), 0 0 80px 40px rgba(3,6,11,.42), inset 0 0 0 1px rgba(160,220,255,.18), inset 0 0 60px rgba(63,216,245,.06); }
@keyframes cc-spotin { from { opacity: 0; transform: scale(1.025); } to { opacity: 1; transform: none; } }
.cc-spot > i { width: 0; height: 0; border-width: 1.5px; border-color: rgba(190,235,255,.95); filter: drop-shadow(0 0 4px rgba(63,216,245,.8)); animation: none; transition: width .7s cubic-bezier(.16,1,.3,1) .25s, height .7s cubic-bezier(.16,1,.3,1) .25s; }
.cc-spot.cc-on > i { width: 16px; height: 16px; }
.cc-beam { display: none; }
.cc-sheen { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.cc-sheen::before { content: ""; position: absolute; top: -20%; bottom: -20%; width: 28%; left: -40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.07) 40%, rgba(170,235,255,.16) 50%, rgba(255,255,255,.07) 60%, transparent); transform: skewX(-12deg); }
.cc-spot.cc-on .cc-sheen::before { animation: cc-sheen2 1.8s cubic-bezier(.4,0,.2,1) .45s 1 both; }
@keyframes cc-sheen2 { from { left: -40%; } to { left: 120%; } }
.cc-spot-l { position: absolute; left: 0; top: -1.9em; font: 500 clamp(8px, 1.15cqw, 12px)/1 "JetBrains Mono", ui-monospace, Menlo, monospace; letter-spacing: .22em; color: rgba(190,235,255,.85); opacity: 0; transform: translateY(4px); transition: opacity .6s .5s, transform .6s .5s; white-space: pre; }
.cc-spot.cc-on .cc-spot-l { opacity: 1; transform: none; }

/* 字幕：編集的なロワーサード。番号は細い枠、本文は字ごとに浮かぶ */
.cc-cap { left: 3.2%; bottom: 6.5%; gap: 14px; align-items: flex-start; transform: none; transition: opacity .5s ease; }
.cc-cap-n { min-width: 0; padding: .45em .55em; background: rgba(6,10,18,.55); color: rgba(190,235,255,.95); border: 1px solid rgba(160,220,255,.35); box-shadow: none; font: 500 clamp(9px, 1.4cqw, 15px)/1 "JetBrains Mono", ui-monospace, Menlo, monospace; letter-spacing: .12em; backdrop-filter: blur(8px); }
.cc-cap div { padding: .1em 0 0; background: none; border: 0; backdrop-filter: none; }
.cc-cap b { font-weight: 600; letter-spacing: .02em; font-size: clamp(12px, 2.4cqw, 28px); text-shadow: 0 2px 18px rgba(0,0,0,.65); }
.cc-cap.cc-on b { animation: none; }
.cc-cap em { color: rgba(170,225,245,.9); font-weight: 400; letter-spacing: .04em; font-size: clamp(10px, 1.6cqw, 18px); text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.cc-cap-rule { display: block; height: 1px; width: 0; margin: .45em 0 .4em; background: linear-gradient(90deg, rgba(190,235,255,.9), rgba(63,216,245,0)); }
.cc-cap.cc-on .cc-cap-rule { width: clamp(60px, 18cqw, 220px); transition: width 1.1s cubic-bezier(.16,1,.3,1) .2s; }
.cc-chr { display: inline-block; opacity: 0; animation: cc-chin .9s cubic-bezier(.16,1,.3,1) both; }
.cc-sp { white-space: pre; }
@keyframes cc-chin { from { opacity: 0; transform: translateY(.35em); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* 進行：上端の細いセグメントが時間で満ちる */
.cc-steps { left: 3.2%; right: 3.2%; top: 3.2%; gap: 5px; }
.cc-steps i, .cc-steps i.cc-cur { flex: 1; width: auto; height: 2px; border-radius: 1px; background: rgba(255,255,255,.14); box-shadow: none; overflow: hidden; }
.cc-steps i b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, rgba(160,225,255,.7), #e8f8ff); box-shadow: 0 0 8px rgba(120,220,255,.7); }
.cc-steps i.cc-past b { background: rgba(160,225,255,.55); box-shadow: none; }

/* カーソル：小さく、影は柔らかく */
.cc-cursor { width: clamp(12px, 2cqw, 22px); stroke-width: 1.1; filter: drop-shadow(0 3px 8px rgba(0,0,0,.55)); transition: transform 1.4s cubic-bezier(.16,1,.3,1), opacity .4s; }
.cc-q.cc-approved { box-shadow: 0 0 0 1px rgba(47,210,122,.5) inset, 0 0 40px rgba(47,210,122,.18) inset; }
.cc-pop { animation: cc-popn2 .8s cubic-bezier(.16,1,.3,1); }
@keyframes cc-popn2 { 0% { opacity: 0; transform: translateY(-.3em); filter: blur(4px); } 100% { opacity: 1; transform: none; filter: none; } }
.cc-fs { font-size: 11px; letter-spacing: .06em; background: rgba(6,10,18,.55); border-color: rgba(255,255,255,.16); }
.cc-intro .cc-view { animation: cc-boot2 1.6s cubic-bezier(.16,1,.3,1); }
@keyframes cc-boot2 { from { opacity: 0; filter: blur(10px) brightness(1.4); } to { opacity: 1; filter: none; } }
@media (max-width: 640px) { .cc-steps { top: 4%; } .cc-spot-l { display: none; } }
@media (prefers-reduced-motion: reduce) { .cc-chr { animation: none; opacity: 1; } }
/* 注記は図注の 2 行目に回す（図注は 2 列の grid：番号＋本文）。首页版は番号が無いので 1 列 */
.dv-figure .v4-figcaption .dv-note { grid-column: 1 / -1; margin-top: 0; }
.dv-home .v4-figcaption { grid-template-columns: minmax(0, 1fr); }
/* スマホ：字幕と重ならないよう全画面ボタンは右上へ（進行バーの下） */
@media (max-width: 640px) { .cc-fs { top: 8%; bottom: auto; right: 3.2%; padding: 4px 9px; font-size: 10px; } }

/* BGM 開閉ボタン：全画面ボタンと同じ入れ物に並べる（言語で幅が変わっても重ならない） */
.cc-btns { position: absolute; right: 10px; bottom: 10px; z-index: 4; display: flex; gap: 8px; }
.cc-btns .cc-fs { position: static; }
.cc-mu { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 28px; padding: 0; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(6,10,18,.55); color: #dfe7f2; font: inherit; font-size: 11px; letter-spacing: .06em; cursor: pointer; backdrop-filter: blur(4px); }
.cc-mu:hover, .cc-mu[aria-pressed="true"] { border-color: var(--c); color: #fff; }
@media (max-width: 640px) { .cc-btns { top: 8%; bottom: auto; right: 3.2%; gap: 6px; } .cc-btns .cc-fs { padding: 4px 9px; font-size: 10px; } .cc-mu { width: 28px; height: 24px; } }