/* YouTube解説スライドの型（AI lineレッスンと同じ見た目）
   1920x1080固定。左下 420x420 はZoomの顔ワイプ用に何も置かない */
*{box-sizing:border-box;margin:0;padding:0}
:root{--navy:#07111f;--ink:#1e3a8a;--blue:#2563eb;--cyan:#38bdf8;--accent:#f59e0b;--green:#06c755;--red:#e0633b;--muted:#64748b;--border:#dbe4f0}
html,body{width:100%;height:100%;overflow:hidden;background:#0b1220}
body{font-family:"Hiragino Sans","Noto Sans JP","Inter",sans-serif;-webkit-font-smoothing:antialiased;color:#111827}
#stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;
  background:linear-gradient(180deg,#eaf7ff 0%,#f8fbff 36%,#eef7ff 100%);overflow:hidden}
.slide{display:none;position:absolute;inset:44px 26px 22px 26px;padding:64px 72px;border:2px solid var(--border);border-radius:48px;
  background:rgba(255,255,255,.94);box-shadow:0 30px 90px rgba(15,23,42,.08);overflow:hidden}
.slide::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(37,99,235,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.045) 1px,transparent 1px);background-size:48px 48px}
.slide.active{display:block;animation:enter .45s cubic-bezier(.2,.75,.2,1)}
@keyframes enter{from{opacity:0;transform:translateY(24px) scale(.985)}to{opacity:1;transform:none}}
.slide>*{position:relative;z-index:2}
/* 左下ワイプ禁止ゾーン（Gキーで表示） */
#faceguide{position:absolute;left:40px;bottom:40px;width:380px;height:380px;border-radius:50%;border:6px dashed #ef4444;z-index:99;display:none;pointer-events:none}
body.guide #faceguide{display:block}
.kicker{display:inline-block;padding:10px 26px;border-radius:999px;background:#dbeafe;color:var(--ink);font-size:30px;font-weight:900;margin-bottom:26px}
h1{font-size:104px;line-height:1.18;font-weight:900;color:var(--navy);letter-spacing:.01em}
h2{font-size:78px;line-height:1.2;font-weight:900;color:var(--navy);margin-bottom:30px}
.accent{color:var(--blue)} .hot{color:var(--red)}
.lead{font-size:44px;font-weight:800;color:#27364a;line-height:1.6}
.card{padding:30px 38px;border:2px solid var(--border);border-radius:30px;background:#fff;box-shadow:0 16px 40px rgba(15,23,42,.06)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.cols.r-wide{grid-template-columns:.85fr 1.15fr}
/* 右下にミライネコ（左下は顔用なので必ず右） */
.neko{position:absolute;right:40px;bottom:-30px;width:330px;z-index:3;filter:drop-shadow(0 20px 30px rgba(15,23,42,.16))}
.bubble{position:absolute;right:300px;bottom:250px;z-index:4;padding:18px 28px;border:2px solid var(--border);border-radius:24px;background:#fff;font-size:34px;font-weight:900;color:var(--ink);box-shadow:0 14px 34px rgba(15,23,42,.08)}
/* 表 */
.tbl{width:100%;border-collapse:separate;border-spacing:0 14px;font-size:40px}
.tbl th{font-size:28px;color:var(--muted);font-weight:900;text-align:right;padding:0 20px}
.tbl th:first-child{text-align:left}
.tbl td{background:#fff;padding:22px 20px;font-weight:900;text-align:right;border-top:2px solid var(--border);border-bottom:2px solid var(--border)}
.tbl td:first-child{text-align:left;border-left:2px solid var(--border);border-radius:22px 0 0 22px}
.tbl td:last-child{border-right:2px solid var(--border);border-radius:0 22px 22px 0}
.tbl tr.hl td{background:#fff7ed;border-color:#fdba74}
.pct{display:inline-block;min-width:150px;padding:6px 18px;border-radius:14px;color:#fff}
.pct.hi{background:var(--red)} .pct.mid{background:#94a3b8} .pct.lo{background:#cbd5e1;color:#334155}
/* 番号リスト */
.steps{display:grid;gap:20px;list-style:none;counter-reset:s}
.steps li{display:flex;align-items:center;gap:26px;padding:22px 30px;border:2px solid var(--border);border-radius:26px;background:#fff;font-size:40px;font-weight:900;color:var(--navy)}
.steps li::before{counter-increment:s;content:counter(s);flex:0 0 auto;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;font-size:34px}
.steps li small{display:block;font-size:28px;color:var(--muted);font-weight:800;margin-top:4px}
.minus li::before{background:linear-gradient(135deg,#94a3b8,#cbd5e1)}
/* 棒 */
.bar-row{display:flex;align-items:center;gap:24px;margin-bottom:26px;font-size:40px;font-weight:900}
.bar-row .lab{width:170px}
.bar{height:96px;border-radius:18px}
.note-c{background:#2a8f78}.blog-c{background:#8a9bb0}
/* 対比 */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.vs .card h3{font-size:50px;font-weight:900;margin-bottom:14px}
.vs .card p{font-size:36px;font-weight:800;line-height:1.6;color:#334155}
.vs .flow{border-color:#cbd5e1;background:#f8fafc} .vs .flow h3{color:#64748b}
.vs .asset{border-color:#fdba74;background:#fff7ed} .vs .asset h3{color:var(--red)}
.big{font-size:150px;font-weight:900;line-height:1;color:var(--navy)}
.note{position:absolute;right:72px;bottom:40px;font-size:24px;color:#94a3b8;font-weight:700;text-align:right}
.center{text-align:center}
/* 最後の一押し。.open と同じ文法（▶＝押すと行ける）＋ネイビーのグローで浮かせる */
.cta{display:inline-flex;align-items:center;gap:20px;margin-top:30px;padding:26px 52px;border-radius:999px;background:var(--ink);color:#fff;font-size:44px;font-weight:900;text-decoration:none;cursor:pointer;
  box-shadow:0 18px 44px rgba(30,58,138,.55),0 0 30px 8px rgba(37,99,235,.35);animation:ctaGlow 2.6s ease-in-out infinite;transition:transform .15s ease,box-shadow .15s ease}
.cta::before{content:"\25B6";font-size:34px;line-height:1}
.cta:hover{animation:none;transform:translateY(-4px);box-shadow:0 28px 70px rgba(30,58,138,.7),0 0 56px 18px rgba(37,99,235,.6)}
/* 落ち影（下に濃く）＋青いハロー（全方向に広く）の2枚重ね。明滅はハロー側を大きく動かす */
@keyframes ctaGlow{
  0%,100%{box-shadow:0 18px 44px rgba(30,58,138,.48),0 0 26px 6px rgba(37,99,235,.28)}
  50%{box-shadow:0 22px 64px rgba(30,58,138,.72),0 0 52px 16px rgba(37,99,235,.60)}}
/* ボタンの下の一行（所要時間・無料などの不安消し） */
.cta-note{margin-top:18px;font-size:27px;font-weight:700;color:var(--muted);line-height:1.6}
@media (prefers-reduced-motion:reduce){.cta{animation:none}}
.num{position:absolute;right:28px;top:22px;font-size:24px;color:#94a3b8;font-weight:900;z-index:5}
/* 項目が多い時の詰め版 */
.steps.compact{gap:14px}
.steps.compact li{padding:14px 28px;font-size:38px}
.steps.compact li::before{width:56px;height:56px;font-size:30px}
.steps.compact li small{font-size:26px;margin-top:0}
.tbl.lg{font-size:50px}.tbl.lg td{padding:30px 24px}.tbl.lg th{font-size:32px}
.vs.lg .card{padding:44px 48px}.vs.lg .card h3{font-size:60px}.vs.lg .card p{font-size:42px}
/* 実物スクショを主役にする（右側に大きく・左下は空ける） */
.shot{position:absolute;right:64px;top:180px;max-width:1120px;max-height:760px;border-radius:22px;border:2px solid var(--border);box-shadow:0 24px 60px rgba(15,23,42,.14);background:#fff}
.shot.wide{left:auto;max-width:1560px;max-height:none;width:1560px}
.side{position:absolute;left:72px;top:190px;width:520px}
.chip{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;margin-bottom:16px;border-radius:22px;border:4px solid;background:#fff;font-size:34px;font-weight:900}
.chip b{font-size:48px}
.chip.r{border-color:#ef4444;color:#b91c1c}.chip.b{border-color:#2563eb;color:#1e3a8a}.chip.g{border-color:#64748b;color:#334155}
.say{font-size:46px;font-weight:900;line-height:1.55;color:var(--navy)}
.side .chip{padding:14px 22px;margin-bottom:12px;font-size:32px}.side .chip b{font-size:42px}
/* 上部の進捗バー（章ごと）。section に data-ch="章名" を付けると自動で出る */
body.has-progress .slide{top:100px}
#progress{position:absolute;top:22px;left:26px;right:26px;display:flex;gap:14px;z-index:50}
#progress .seg{flex:1;min-width:0;cursor:pointer}
#progress .line{height:12px;border-radius:999px;background:#dbe4f0}
#progress .t{margin-top:8px;font-size:24px;font-weight:900;color:#94a3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#progress .seg.done .line{background:#93c5fd}
#progress .seg.done .t{color:#64748b}
#progress .seg.on .line{background:linear-gradient(90deg,var(--blue),var(--cyan))}
#progress .seg.on .t{color:var(--ink)}
/* 実物の画面を開くボタン（押しても次のスライドに進まない） */
.open{display:inline-flex;align-items:center;gap:14px;padding:18px 30px;border-radius:999px;background:#fff;border:4px solid var(--blue);color:var(--blue);font-size:32px;font-weight:900;text-decoration:none;box-shadow:0 12px 28px rgba(37,99,235,.18);cursor:pointer}
.open:hover{background:var(--blue);color:#fff}
.open::before{content:"▶"}
body.has-progress .num{display:none}
.side .chip{padding:10px 20px;margin-bottom:10px;font-size:30px}.side .chip b{font-size:38px}
/* ── スマホ（タッチ端末）対応（2026-09-21）。deck.js が body.touch を付けたときだけ効く ── */
html,body{touch-action:manipulation}                /* 連続タップがダブルタップ拡大になるのを止める */
/* ★スマホの要：body を画面に固定する。
   #stage は拡大縮小する前の箱が 1920px 幅ある。html,body の overflow:hidden だけだと、スマホのブラウザは
   「このページは幅1500pxある」と解釈して、その巨大な画面の中央にスライドを置いてしまう
   （実測：innerWidth 1500×3248／見えている範囲 375×812／スライドは上から1176px＝画面の外）。
   body を fixed にすると、はみ出しが body の中で切られて、画面幅が正しく 375 に戻る。PCでは見た目は変わらない。 */
body{position:fixed;inset:0;overflow:hidden}
body.touch{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#swipehint{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:199;
  max-width:92vw;padding:10px 18px;border-radius:16px;background:rgba(30,58,138,.94);color:#fff;text-align:center;
  font-family:"Hiragino Sans","Noto Sans JP",sans-serif;box-shadow:0 10px 30px rgba(15,23,42,.35);pointer-events:none;
  animation:hintIn .5s ease both}
#swipehint b{display:block;font-size:15px;font-weight:800;white-space:nowrap}
#swipehint small{display:none;font-size:12.5px;font-weight:700;opacity:.9;margin-top:4px}
@media (orientation:portrait){#swipehint small{display:block}}   /* 縦持ちのときだけ「横にすると大きく見られます」 */
@keyframes hintIn{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
/* いま何枚目か（3 / 14）。進捗バーの右端に置く。スライドの中なので、横持ちでもスライドは縮まない */
#pagecount{position:absolute;top:20px;right:56px;z-index:51;font-size:30px;font-weight:900;color:#64748b;white-space:nowrap;letter-spacing:.02em}
body.has-count #progress{right:200px}

/* 全体像（ホワイトボード）2026-09-24：<section class="slide board"> に deck.js が章の一覧を差し込む */
.board-list{position:absolute;left:560px;right:56px;top:30px;list-style:none;display:grid;gap:9px}
.board-list li{display:flex;align-items:center;gap:20px;padding:9px 24px;border-radius:20px;border:3px solid var(--border);background:#fff}
.board-list i{flex:0 0 46px;height:46px;border-radius:50%;background:#e2e8f0;color:#475569;font-style:normal;font-size:26px;font-weight:900;display:flex;align-items:center;justify-content:center}
.board-list div{flex:1;min-width:0}
.board-list b{display:block;font-size:31px;font-weight:900;color:var(--navy);line-height:1.3}
.board-list span{display:block;font-size:22px;font-weight:800;color:#64748b;line-height:1.4}
.board-list li.done{opacity:.5}.board-list li.done i{background:#16a34a;color:#fff}
.board-list li.now{border-color:var(--blue);background:#eff6ff;box-shadow:0 10px 28px rgba(37,99,235,.18)}
.board-list li.now i{background:var(--blue);color:#fff}
.board-list em{font-style:normal;font-size:24px;font-weight:900;color:#fff;background:#f97316;border-radius:999px;padding:4px 16px;white-space:nowrap}
.board-goal{position:absolute;left:72px;top:300px;width:450px;padding:18px 22px;border-radius:20px;background:#fff7ed;border:3px solid #fdba74;font-size:30px;font-weight:900;line-height:1.5;color:var(--navy)}
.board-goal small{display:block;font-size:22px;color:#c2410c}

/* 撮影用カンペ：Nキーの時だけ出す。録画・プレゼントには出ない（2026-10-13 シャド） */
.say{display:none}
body.show-say .say{display:block;position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:50;max-width:1500px;padding:10px 26px;border-radius:14px;background:#fef9c3;border:3px solid #eab308;font-size:28px;font-weight:900;color:#713f12;line-height:1.4}
/* 進捗バーを細く・小さく（2026-10-14） */
#progress{top:16px}
#progress .line{height:8px}
#progress .t{margin-top:4px;font-size:19px}
/* 全体像：結論・まとめは番号なし（①②③は本題だけ） */
.slide.board .board-list li.wb-side:not(.done) i{background:#e2e8f0}