/* ============================================================
   VibeSlide v1 の LP（vibemaker.jp/vibeslide/）
   土台は /tokens.css（VIBE MAKER デザインシステム）。色はすべて変数で書く。
   ここに置くのは LP 固有の演出だけ：巨大な見出し、映像の帯、スクロールに合わせた再生、
   罫線で仕切った区画、ティッカー。角丸は使わない。緑は使わない。
   ============================================================ */

:root{--hdr:64px}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 12px)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
html,body{overflow-x:clip}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--s5)}
.mono{font-family:var(--font-mono);letter-spacing:.14em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- ヘッダー ---------- */
.hdr{position:sticky;top:0;z-index:40;height:var(--hdr);background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.hdr .wrap{height:100%;display:flex;align-items:center;gap:var(--s5)}
.vs-logo{display:inline-flex;align-items:center;gap:10px;color:var(--text);font-weight:800;font-size:19px;letter-spacing:-.01em;white-space:nowrap}
.vs-logo svg{width:30px;height:30px;flex:none}
.vs-logo .v1{font:800 11px var(--font-mono);color:var(--text-muted);letter-spacing:.12em;border:1px solid var(--line-strong);padding:2px 6px;margin-left:2px}
.hdr nav{display:flex;gap:2px;margin-left:auto}
.hdr nav a{font-size:13.5px;color:var(--text-2);padding:8px 10px;white-space:nowrap}
.hdr nav a:hover{color:var(--text)}
.themeBtn{font-size:12.5px;color:var(--text-muted);border:1px solid var(--line-strong);padding:6px 10px}
.themeBtn:hover{color:var(--text);border-color:var(--text)}
.hdr .vm-btn-primary{padding:9px 16px}
@media (max-width:1080px){.hdr nav{display:none}.hdr .themeBtn{margin-left:auto}}

/* ---------- ヒーロー（映像の上に巨大な見出し） ---------- */
.hero{position:relative;min-height:calc(100svh - var(--hdr));display:grid;align-items:end;overflow:hidden;
  background:var(--ink);color:var(--text-inv);isolation:isolate}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(9,10,13,.30) 0%,rgba(9,10,13,.40) 45%,rgba(9,10,13,.94) 100%),
             linear-gradient(90deg,rgba(9,10,13,.92) 0%,rgba(9,10,13,.80) 40%,rgba(9,10,13,.30) 72%,rgba(9,10,13,.08) 100%)}
@media (max-width:760px){.hero::after{background:linear-gradient(180deg,rgba(9,10,13,.55) 0%,rgba(9,10,13,.78) 40%,rgba(9,10,13,.95) 100%)}}
.hero .wrap{width:100%;padding-top:96px;padding-bottom:64px}
.hero .kick{font:800 12px var(--font-mono);letter-spacing:.2em;color:var(--brand-soft);display:flex;gap:12px;align-items:center}
.hero .kick i{width:36px;height:2px;background:currentColor}
.hero h1{font-size:clamp(40px,6.6vw,96px);line-height:1.08;letter-spacing:-.035em;margin:20px 0 22px;font-weight:900;max-width:15em}
.hero h1 em{font-style:normal;background:linear-gradient(transparent 70%, var(--brand) 70%);padding:0 .06em}
.hero .lead{font-size:clamp(15px,1.35vw,18px);line-height:1.9;color:var(--text-inv-2);max-width:40em;margin:0 0 30px}
.hero .lead b{color:var(--text-inv)}
.heroBuy{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.heroPrice{display:flex;align-items:baseline;gap:10px}
.heroPrice .num{font:800 clamp(34px,3.6vw,52px) var(--font-mono);letter-spacing:-.04em}
.heroPrice small{color:var(--text-inv-muted);font-size:13px}
.heroBuy .vm-btn{font-size:15px;padding:14px 26px}
.heroBuy .ghostInv{color:var(--text-inv);border:1px solid var(--line-inv);background:transparent}
.heroBuy .ghostInv:hover{border-color:var(--text-inv)}
.heroMeta{display:flex;gap:28px;flex-wrap:wrap;margin-top:44px;padding-top:20px;border-top:1px solid var(--line-inv-weak);
  font:700 12px var(--font-mono);letter-spacing:.12em;color:var(--text-inv-muted)}
.heroMeta b{color:var(--text-inv);font-size:20px;letter-spacing:-.02em;margin-right:6px}

/* ---------- ティッカー（10業種 × 10職種） ---------- */
.ticker{border-bottom:1px solid var(--line-strong);background:var(--surface);overflow:hidden;white-space:nowrap}
.ticker .track{display:inline-flex;gap:0;animation:tick 48s linear infinite}
.ticker span{display:inline-flex;align-items:center;gap:12px;padding:14px 26px;border-right:1px solid var(--line);font-size:14px;font-weight:700}
.ticker span i{font:800 11px var(--font-mono);color:var(--brand);font-style:normal;letter-spacing:.1em}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.ticker .track{animation:none}}

/* ---------- 節の見出し ---------- */
.sec{padding:112px 0}
.sec.alt{background:var(--surface)}
.sec.ink{background:var(--ink);color:var(--text-inv)}
.sec.ink .vm-sechead{border-color:var(--text-inv)}
.sec.ink .intro{color:var(--text-inv-2)}
.sec .vm-sechead{margin-bottom:28px}
.big{font-size:clamp(30px,4.2vw,58px);line-height:1.15;letter-spacing:-.03em;font-weight:900;margin:0 0 22px;max-width:18em}
.intro{font-size:16.5px;color:var(--text-2);max-width:44em;margin:0 0 40px}
.cap{font-size:13px;color:var(--text-muted);margin-top:10px}

/* ---------- 90秒の紹介動画 ---------- */
.promo{position:relative;border:1px solid var(--line-strong);background:var(--ink);aspect-ratio:16/9}
.promo video{width:100%;height:100%;display:block}

/* ---------- できること：左に文章が流れ、右の映像が切り替わる ---------- */
.story{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.storySteps .step{min-height:78vh;display:flex;flex-direction:column;justify-content:center;padding:24px 0;opacity:.28;transition:opacity .45s var(--ease)}
.storySteps .step.on{opacity:1}
.step .no{font:800 13px var(--font-mono);color:var(--brand);letter-spacing:.14em}
.step h3{font-size:clamp(26px,2.6vw,38px);line-height:1.3;letter-spacing:-.02em;margin:10px 0 14px;font-weight:900}
.step p{color:var(--text-2);margin:0 0 12px;font-size:16px}
.step ul{margin:6px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.step li{padding:10px 0 10px 22px;border-bottom:1px solid var(--line);position:relative;font-size:14.5px}
.step li::before{content:"—";position:absolute;left:0;color:var(--brand);font-weight:800}
.storyMedia{position:sticky;top:calc(var(--hdr) + 40px);aspect-ratio:16/10;border:1px solid var(--line-strong);background:var(--stage);overflow:hidden}
.storyMedia .layer{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease)}
.storyMedia .layer.on{opacity:1}
/* 映像・画像は切らずに枠の中へ全体を収め、下に44pxの帯（説明の札）を空ける */
.storyMedia .layer > video{position:absolute;left:0;right:0;top:0;width:100%;height:calc(100% - 44px);object-fit:contain;display:block;background:var(--stage)}
.storyMedia .layer .tag{position:absolute;left:0;right:0;bottom:0;height:44px;display:flex;align-items:center;font:800 11px var(--font-mono);letter-spacing:.14em;
  color:var(--text-inv);background:var(--ink);padding:0 14px;border-left:3px solid var(--brand)}
.notesCard{position:absolute;inset:0 0 44px 0;display:grid;grid-template-columns:1.1fr .9fr;background:var(--surface)}
.notesCard .slide{background:var(--stage);display:grid;place-items:center;padding:18px;border-right:1px solid var(--line-strong)}
.notesCard .slide img{width:100%;height:auto;object-fit:contain;border:1px solid var(--line-strong)}
.notesCard .note{padding:22px 22px 18px;font-size:13.5px;line-height:1.9;color:var(--text);overflow:hidden}
.notesCard .note b{display:block;font:800 11px var(--font-mono);letter-spacing:.14em;color:var(--text-muted);margin-bottom:10px}
.notesCard .note s{text-decoration:none;font:800 11px var(--font-mono);color:var(--brand);border:1px solid var(--brand);padding:0 4px;margin-right:4px}
.artGrid{position:absolute;inset:0 0 44px 0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:2px;background:var(--ink)}
.artGrid img{width:100%;height:100%;object-fit:cover}
@media (max-width:960px){
  .story{grid-template-columns:1fr}
  .storyMedia{position:relative;top:0;order:-1}
  .storySteps .step{min-height:auto;opacity:1;padding:36px 0;border-bottom:1px solid var(--line)}
}

/* ---------- 映像の帯（スクロールに合わせて流れる） ---------- */
.reel{position:relative;height:150vh;background:var(--ink)}
.reel .stick{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center;color:var(--text-inv)}
.reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92}
.reel .stick::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(9,10,13,.15) 0%,rgba(9,10,13,.72) 100%)}
.reel .say{position:relative;z-index:1;text-align:center;padding:0 24px}
.reel .say p{font-size:clamp(28px,4.6vw,68px);line-height:1.2;font-weight:900;letter-spacing:-.03em;margin:0}
.reel .say small{display:block;margin-top:18px;font:700 12px var(--font-mono);letter-spacing:.2em;color:var(--text-inv-muted)}

/* ---------- 業種の帯（5本の映像が横に流れる） ---------- */
.inds{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid var(--line-strong);border-left:1px solid var(--line-strong)}
.inds figure{margin:0;position:relative;aspect-ratio:3/4;overflow:hidden;border-right:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);background:var(--ink)}
.inds video{width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.inds figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;color:var(--text-inv);
  background:linear-gradient(transparent,rgba(9,10,13,.86));font-size:14px;font-weight:800}
.inds figcaption i{display:block;font:800 10.5px var(--font-mono);letter-spacing:.14em;color:var(--text-inv-muted);font-style:normal}
@media (max-width:900px){.inds{grid-template-columns:repeat(2,1fr)}.inds figure:last-child{grid-column:span 2;aspect-ratio:16/9}}

/* ---------- 見本10本 ---------- */
.samples{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line-strong);border-left:1px solid var(--line-strong)}
.smp{border-right:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);background:var(--surface)}
.smp .shot{position:relative;background:var(--stage);padding:18px;display:grid;place-items:center;cursor:pointer}
.smp .shot img{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line-strong);transition:transform .3s var(--ease)}
.smp .shot:hover img{transform:translate(-2px,-2px);box-shadow:var(--paper-shadow-hover)}
.smp .shot .count{position:absolute;right:26px;bottom:26px;font:800 11px var(--font-mono);background:var(--ink);color:var(--text-inv);padding:4px 8px}
.smp .body{padding:20px 22px;display:flex;flex-direction:column;gap:8px}
.smp .who{font:800 11px var(--font-mono);letter-spacing:.12em;color:var(--brand)}
.smp h3{margin:0;font-size:17px;line-height:1.45}
.smp p{margin:0;font-size:13.5px;color:var(--text-2)}
.smp .acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:8px}
.smp .acts a,.smp .acts button{font-size:12.5px;font-weight:700;border:1px solid var(--line-strong);padding:6px 10px;color:var(--text)}
.smp .acts a:hover,.smp .acts button:hover{border-color:var(--text)}
.smp .acts .dl{background:var(--text);color:var(--bg);border-color:var(--text)}
@media (max-width:1080px){.samples{grid-template-columns:1fr}}
@media (max-width:620px){.smp{grid-template-columns:1fr}}

/* ---------- 仕組みの図 ---------- */
.flowSvg{width:100%;height:auto;display:block;border:1px solid var(--line-strong);background:var(--surface)}
.flowSvg .box{fill:var(--surface);stroke:var(--line-strong);stroke-width:1.5}
.flowSvg .box.hot{stroke:var(--brand);stroke-width:2}
.flowSvg .t{fill:var(--text);font:800 17px var(--font)}
.flowSvg .s{fill:var(--text-muted);font:500 12.5px var(--font)}
.flowSvg .n{fill:var(--brand);font:800 12px var(--font-mono);letter-spacing:.12em}
.flowSvg .a{stroke:var(--text);stroke-width:1.6;fill:none}
.flowSvg .ah{fill:var(--text)}
.terms{display:grid;grid-template-columns:repeat(3,1fr);margin-top:36px}
.terms > div{padding:22px 22px 24px;background:var(--surface)}
.terms b{display:block;font-size:16px;margin-bottom:6px}
.terms b small{display:block;font:800 10.5px var(--font-mono);letter-spacing:.14em;color:var(--brand);margin-bottom:6px}
.terms p{margin:0;font-size:14px;color:var(--text-2)}
@media (max-width:900px){.terms{grid-template-columns:1fr}}

/* ---------- 必要なもの・プラン・料金の表 ---------- */
.reqs{display:grid;grid-template-columns:repeat(2,1fr)}
.reqs > div{padding:24px;background:var(--surface)}
.reqs h3{margin:0 0 8px;font-size:17px}
.reqs .st{font:800 10.5px var(--font-mono);letter-spacing:.14em;padding:3px 7px;border:1px solid var(--line-strong);color:var(--text-muted);margin-left:8px;vertical-align:2px}
.reqs .st.must{border-color:var(--brand);color:var(--brand)}
.reqs p{margin:0;font-size:14.5px;color:var(--text-2)}
@media (max-width:900px){.reqs{grid-template-columns:1fr}}
.vm-table td{white-space:normal}
.vm-table td.num{white-space:nowrap}
.planGrid{display:grid;grid-template-columns:repeat(2,1fr);margin-top:28px}
.planGrid > div{padding:24px;background:var(--surface)}
.planGrid h3{margin:0 0 6px;font-size:17px}
.planGrid .rec{font:800 10.5px var(--font-mono);letter-spacing:.14em;color:var(--positive);border:1px solid var(--positive);padding:2px 6px;margin-left:6px;vertical-align:2px}
.planGrid ul{margin:8px 0 0;padding-left:18px;font-size:14px;color:var(--text-2)}
@media (max-width:900px){.planGrid{grid-template-columns:1fr}}

/* ---------- はじめかた ---------- */
.steps4{display:grid;grid-template-columns:repeat(4,1fr)}
.steps4 > div{padding:24px 22px;background:var(--surface);position:relative}
.steps4 .n{font:800 40px var(--font-mono);letter-spacing:-.04em;color:var(--brand);line-height:1}
.steps4 h3{margin:12px 0 6px;font-size:16.5px}
.steps4 p{margin:0;font-size:14px;color:var(--text-2)}
@media (max-width:900px){.steps4{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps4{grid-template-columns:1fr}}

/* ---------- 料金と購入 ---------- */
.buy{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line-strong);background:var(--surface)}
.buy > div{padding:36px}
.buy > div + div{border-left:1px solid var(--line-strong)}
.buy .price{font:800 clamp(44px,5vw,72px) var(--font-mono);letter-spacing:-.05em;line-height:1}
.buy .price small{font:700 14px var(--font);letter-spacing:0;color:var(--text-muted);margin-left:8px}
.buy ul{margin:22px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.buy li{padding:11px 0 11px 24px;border-bottom:1px solid var(--line);position:relative;font-size:14.5px}
.buy li::before{content:"✓";position:absolute;left:0;color:var(--positive);font-weight:800}
.bonus{margin-top:24px;border:1px solid var(--line-strong);padding:18px 20px;background:var(--bg)}
.bonus b{display:block;font-size:15px;margin-bottom:6px}
.bonus p{margin:0;font-size:13.5px;color:var(--text-2)}
.buy label{display:block;font-size:13px;font-weight:700;margin:16px 0 6px}
.buy input[type=text],.buy input[type=email]{width:100%;padding:12px 14px;font:inherit;background:var(--bg);color:var(--text);border:1px solid var(--line-strong);border-radius:0}
.buy input:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.buy .chk{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:13.5px;margin:12px 0 0}
.buy .chk input{margin-top:5px}
.buy .chk a{text-decoration:underline}
.buy .hp{position:absolute;left:-9999px}
.msg{font-size:14px;min-height:1.6em;margin:10px 0 0}
.msg.err{color:var(--negative)}
@media (max-width:900px){.buy{grid-template-columns:1fr}.buy > div + div{border-left:0;border-top:1px solid var(--line-strong)}}

/* ---------- よくある質問 ---------- */
.faq details{border-bottom:1px solid var(--line-strong);padding:4px 0}
.faq summary{cursor:pointer;font-weight:800;font-size:16px;padding:16px 28px 16px 0;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:12px;font:800 20px var(--font-mono);color:var(--brand)}
.faq details[open] summary::after{content:"−"}
.faq p{margin:0 0 18px;color:var(--text-2);font-size:15px;max-width:52em}

/* ---------- 動画を開く窓 ---------- */
.lightbox{position:fixed;inset:0;z-index:60;background:var(--overlay);display:none;align-items:center;justify-content:center;padding:4vw}
.lightbox.on{display:flex}
.lightbox video{max-width:100%;max-height:100%;background:var(--ink)}
.lightbox button{position:absolute;top:16px;right:20px;color:var(--text-inv);font-size:14px;border:1px solid var(--line-inv);padding:8px 14px}

/* ---------- フッター ---------- */
.foot{padding:40px 0 60px;border-top:1px solid var(--line-strong);font-size:13px;color:var(--text-muted)}
.foot .wrap{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.foot a:hover{color:var(--text)}
.foot .vm-brand{margin-right:auto}

/* ---------- 出現の動き（スクロールで見えたら） ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.rv{opacity:1;transform:none;transition:none}.storySteps .step{opacity:1}}

/* ---------- はじめかたのページ ---------- */
.tut{max-width:880px}
.tut h2{border-bottom:2px solid var(--text);padding-bottom:10px;margin-top:64px}
.tut .stepHead{display:flex;gap:16px;align-items:baseline}
.tut .stepHead .n{font:800 34px var(--font-mono);color:var(--brand);letter-spacing:-.04em}
.copyBox{position:relative;margin:14px 0 8px}
.copyBox pre{white-space:pre-wrap;font-size:13.5px;line-height:1.85;padding:18px 20px 18px;border-radius:0;margin:0}
.copyBox button{position:absolute;top:10px;right:10px;font-size:12px;font-weight:700;border:1px solid var(--line-strong);background:var(--surface);padding:5px 10px}
.copyBox button:hover{border-color:var(--text)}
.callout{border-left:3px solid var(--brand);background:var(--surface);padding:14px 18px;margin:18px 0;font-size:14.5px}
.callout.pos{border-left-color:var(--positive)}

/* ---------- 狭い画面の調整（390px・360px で確認） ---------- */
.nb{display:inline-block}
.themeBtn,.hdr .vm-btn-primary{white-space:nowrap}
@media (max-width:600px){
  .hdr .wrap{gap:10px;padding:0 14px}
  .vs-logo{font-size:17px}
  .vs-logo .v1{display:none}
  .themeBtn{padding:5px 8px;font-size:11.5px}
  .hdr .vm-btn-primary{padding:8px 12px;font-size:13px}
  .hero h1{font-size:clamp(34px,9.6vw,48px)}
  .buy .price small{display:block;margin:10px 0 0}
  .buy > div{padding:24px 20px}
  .sec{padding:80px 0}
  .reel .say p{font-size:clamp(26px,8vw,40px)}
}

/* ---------- 見本の解説動画を目立たせる ---------- */
.smp .shot{border:0;font:inherit;color:inherit;width:100%;overflow:hidden}
.smp .shot img,.smp .shot video.peek{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line-strong);display:block}
.smp .shot video.peek{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:calc(100% - 36px);opacity:0;transition:opacity .35s var(--ease);background:var(--ink)}
.smp .shot.peeking video.peek{opacity:1}
.smp .shot .play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:var(--r-full);
  background:var(--brand-fill);display:grid;place-items:center;box-shadow:0 10px 30px rgba(9,10,13,.35);transition:transform .25s var(--ease),opacity .3s}
.smp .shot .play svg{width:34px;height:34px;fill:#fff;margin-left:4px}
.smp .shot:hover .play{transform:scale(1.08)}
.smp .shot.peeking .play{opacity:0}
.smp .shot .dur{position:absolute;left:26px;bottom:26px;font:800 12px var(--font-mono);background:var(--brand-fill);color:var(--brand-ink);padding:5px 9px}
.smp .acts{flex-direction:column;align-items:stretch;gap:8px}
.smp .acts .watch{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:13px 16px;font-size:15px;font-weight:800;
  background:var(--text);color:var(--bg);border:1px solid var(--text);cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.smp .acts .watch span{color:var(--brand-soft);font-size:16px}
.smp .acts .watch small{font:700 12px var(--font-mono);opacity:.75;margin-left:4px}
.smp .acts .watch:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--brand)}
.smp .acts .sub{display:flex;gap:6px;flex-wrap:wrap}
.smp .acts .sub a{font-size:12.5px;font-weight:700;border:1px solid var(--line-strong);padding:6px 10px;color:var(--text)}
.smp .acts .sub a:hover{border-color:var(--text)}
.lightbox .lbTitle{position:absolute;top:22px;left:24px;right:120px;color:var(--text-inv);font-size:14px;font-weight:700}
.smp .shot .thumb{position:relative;display:block;width:100%}
.smp .shot .thumb video.peek{position:absolute;inset:0;left:0;top:0;transform:none;width:100%;height:100%}
.smp .shot .thumb .dur{left:8px;bottom:8px}
.smp .shot .thumb .count{right:8px;bottom:8px}

/* ---------- 対象のレベル・推奨モデル・互換アプリ・考え ---------- */
.level{border:2px solid var(--text);background:var(--surface);padding:26px 28px;position:relative}
.levelKick{font-size:clamp(24px,2.6vw,34px);font-weight:900;letter-spacing:-.02em;margin:0 0 10px}
.levelKick::before{content:"";display:inline-block;width:28px;height:4px;background:var(--brand);vertical-align:middle;margin-right:12px}
.levelBody{margin:0;font-size:16px;color:var(--text-2);max-width:56em}
.levelBody b{color:var(--text);background:linear-gradient(transparent 62%, var(--marker) 62%)}
.models td small{display:block;font-size:12px;color:var(--text-muted);font-weight:400}
.models td.pos{color:var(--positive);font-weight:800}
.models td.neg{color:var(--negative);font-weight:800}
.reqs .st.warn{border-color:var(--negative);color:var(--negative)}
.appRow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line-strong);border-left:1px solid var(--line-strong);margin-top:12px}
.appRow figure{margin:0;padding:32px 20px;display:flex;flex-direction:column;align-items:center;gap:14px;border-right:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);background:var(--surface)}
.appRow svg{width:76px;height:76px;transition:transform .3s var(--ease)}
.appRow figure:hover svg{transform:translateY(-4px) rotate(-3deg)}
.appRow figcaption{text-align:center;font-weight:800;font-size:16px}
.appRow figcaption small{display:block;font-weight:500;font-size:12.5px;color:var(--text-muted);margin-top:4px}
@media (max-width:760px){.appRow{grid-template-columns:repeat(2,1fr)}}
.sec.ink .big em{font-style:normal;background:linear-gradient(transparent 70%, var(--brand) 70%)}
.opGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line-inv);margin-top:12px}
.opGrid > div{padding:24px 24px 26px 0;margin-right:24px;border-bottom:1px solid var(--line-inv-weak)}
.opGrid b{display:block;font-size:17px;margin-bottom:8px;color:var(--text-inv)}
.opGrid p{margin:0;color:var(--text-inv-2);font-size:14.5px}
.opGrid p b{display:inline;font-size:inherit;margin:0;color:var(--text-inv)}
.sec.ink .vm-btn-secondary{background:transparent;color:var(--text-inv);border-color:var(--line-inv)}
@media (max-width:900px){.opGrid{grid-template-columns:1fr}.opGrid > div{margin-right:0;padding-right:0}}

/* ---------- 受講生は無料（アーカイブプランとの比較） ---------- */
.heroFree{margin:18px 0 0}
.heroFree a{display:inline-flex;gap:10px;align-items:center;font-weight:800;font-size:15px;color:var(--text-inv);border-bottom:2px solid var(--brand);padding-bottom:3px}
.planCmp{border:2px solid var(--text);background:var(--surface);margin-bottom:36px}
.pcHead{padding:30px 32px 10px}
.pcKick{font-size:clamp(26px,3vw,40px);font-weight:900;letter-spacing:-.02em;margin:0 0 10px}
.pcKick em{font-style:normal;color:var(--brand)}
.pcLead{margin:0;color:var(--text-2);font-size:15.5px;max-width:52em}
.pcLead b{color:var(--text);background:linear-gradient(transparent 62%, var(--marker) 62%)}
.pcGrid{display:grid;grid-template-columns:1fr 1.4fr;border-top:1px solid var(--line-strong);margin-top:22px}
.pcCol{padding:26px 30px;position:relative}
.pcCol + .pcCol{border-left:1px solid var(--line-strong)}
.pcCol.best{background:var(--bg);box-shadow:inset 0 4px 0 var(--brand)}
.pcBadge{position:absolute;top:18px;right:20px;font:800 11px var(--font-mono);letter-spacing:.12em;color:var(--positive);border:1px solid var(--positive);padding:3px 8px}
.pcName{margin:0 0 6px;font-weight:800;font-size:16px}
.pcPrice{margin:0 0 14px;font:800 34px var(--font-mono);letter-spacing:-.04em}
.pcPrice small{display:block;font:600 12.5px var(--font);letter-spacing:0;color:var(--text-muted);margin-top:4px}
.pcCol ul{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.pcCol li{padding:10px 0 10px 22px;border-bottom:1px solid var(--line);position:relative;font-size:14.5px}
.pcCol li::before{content:"✓";position:absolute;left:0;color:var(--positive);font-weight:800}
.pcCta{margin-top:18px}
.pcMember{margin:0;padding:16px 32px 22px;font-size:14px;color:var(--text-2);border-top:1px solid var(--line)}
.pcMember a{text-decoration:underline;font-weight:800;color:var(--text)}
@media (max-width:860px){.pcGrid{grid-template-columns:1fr}.pcCol + .pcCol{border-left:0;border-top:1px solid var(--line-strong)}.pcHead{padding:24px 20px 6px}.pcCol{padding:22px 20px}}
.smp .acts .watch small{display:block;font:600 11.5px var(--font);letter-spacing:0;opacity:.8;margin:0}
.smp .acts .watch{flex-direction:column;gap:2px;text-decoration:none}
.smp .acts .sub button{font-size:12.5px;font-weight:700;border:1px solid var(--line-strong);padding:6px 10px;color:var(--text);background:none;cursor:pointer}
.smp .acts .sub button:hover{border-color:var(--text)}

/* ---------- 受講生ポータルの写し（/tools/vibeslide/。scripts/build_vibeslide_member.py が作る） ---------- */
.memberBar{background:var(--ink);color:var(--text-inv);font-size:13px}
.memberBar .wrap{display:flex;align-items:center;gap:16px;min-height:38px}
.memberBar a{margin-left:auto;color:var(--text-inv);text-decoration:underline;white-space:nowrap}
.buy.member .vm-btn-block{font-size:16px;padding:16px 20px}

/* ---------- 最後：真実の扉（VibeSlide は1%、残りの99%は講座で） ---------- */
.buyNote{margin:0 0 14px;font-size:14.5px;color:var(--text-2)}
.buyNote a{text-decoration:underline;font-weight:800;color:var(--text)}
.door{position:relative;overflow:hidden}
.doorGrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:center}
.doorText p{color:var(--text-inv-2);font-size:16px;line-height:1.95;margin:0 0 16px;max-width:36em}
.doorText p b{color:var(--text-inv)}
.doorText p.big{color:var(--text-inv);font-size:clamp(32px,4.4vw,62px);line-height:1.18;font-weight:900;letter-spacing:-.03em;margin:0 0 30px;max-width:none}
.door .doorText p.big em{font-size:1.25em;color:var(--brand-soft);background:none}
.doorText .big .nb{display:inline-block}
.doorActs{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 14px}
.door .vm-btn-secondary{background:transparent;color:var(--text-inv);border-color:var(--line-inv)}
.doorSmall{font-size:13px !important;color:var(--text-inv-muted) !important}
.doorFig{margin:0}
.cells{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;aspect-ratio:1/1;max-width:440px;margin-left:auto}
.cells i{display:block;border:1px solid var(--line-inv-weak);transition:border-color .5s ease,background-color .5s ease}
.cells i.one{background:var(--brand-fill);border-color:var(--brand-fill);position:relative}
.cells.lit i:not(.one){border-color:var(--brand-soft);background:color-mix(in srgb,var(--brand-soft) 10%,transparent)}
.doorFig figcaption{max-width:440px;margin:16px 0 0 auto;font-size:14px;color:var(--text-inv-2);line-height:1.8}
.doorFig figcaption b{color:var(--text-inv);font-size:18px}
.doorFig .one{color:var(--brand-soft)}
@media (max-width:900px){.doorGrid{grid-template-columns:1fr;gap:36px}.cells,.doorFig figcaption{margin-left:0;max-width:360px}}
@media (prefers-reduced-motion: reduce){.cells i{transition:none}}

/* v3: カンペの見本カード（できること 05） */
.newTag{display:inline-block;margin-left:8px;padding:2px 7px;font:800 10px/1.4 var(--font-mono);letter-spacing:.1em;color:#fff;background:var(--brand);vertical-align:middle}
.pvCard{background:#f4f3ef;color:#090a0d;border:2px solid #090a0d;box-shadow:10px 10px 0 #1c1c20;padding:18px 22px;font-family:Arial,"Noto Sans JP",sans-serif;max-width:560px}
.pvCard .pvHead{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;border-bottom:2px solid #090a0d;padding-bottom:10px;margin-bottom:12px}
.pvCard .pvNo{font:800 24px/1 var(--font-mono)}.pvCard .pvNo small{font-size:12px;color:#5f6874;font-weight:500}
.pvCard .pvTtl{font:800 13px/1.4 Arial,"Noto Sans JP",sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pvCard .pvTime{text-align:right;font:700 12px/1.5 var(--font-mono);color:#5f6874}.pvCard .pvTime b{color:#c5171e;font-size:10px;letter-spacing:.12em;margin-right:6px}.pvCard .pvTime i{font-style:normal}.pvCard .pvEarly{color:#1d4ed8;font-weight:800}
.pvCard .pvLine{margin:0 0 10px;padding:4px 0 4px 14px;border-left:4px solid transparent;font-size:20px;line-height:2;color:#9a9ca3}
.pvCard .pvLine.done{color:#b9bbc1}.pvCard .pvLine.cur{color:#090a0d;border-left-color:#c5171e}
.pvCard .pvLine b{background:linear-gradient(transparent 55%,#fde047 55%);font-weight:800}
.pvCard rt{font-size:.42em;color:#5f6874;font-weight:500}.pvCard .pvLine.cur rt{color:#c5171e}
.pvCard .pvCue{display:inline-block;font:700 9px/1 var(--font-mono);letter-spacing:.1em;color:#f4f3ef;background:#c5171e;padding:4px 6px;margin-right:8px;vertical-align:middle}

/* v4: 絵文字の情景カード（できること 06） */
.artScene{display:flex;align-items:stretch;gap:8px;background:#f4f3ef;border:2px solid #090a0d;box-shadow:10px 10px 0 #1c1c20;padding:18px 16px;max-width:600px}
.artScene>div{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;border:1.5px solid #dde2e8;padding:14px 6px 10px;gap:4px}
.artScene>div.hot{border-color:#c5171e;box-shadow:6px 6px 0 #1c1c20}
.artScene span{font-size:40px;line-height:1.1;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.artScene b{font:800 12.5px/1.3 Arial,"Noto Sans JP",sans-serif;color:#090a0d}.artScene small{font-size:10px;color:#5f6874;line-height:1.3}
.artScene i{align-self:center;font-style:normal;color:#c5171e;font-weight:800;font-size:18px}

/* v4: フル版とライト版（#choose） */
.chooseGrid{display:grid;grid-template-columns:1.1fr 1fr;gap:22px;margin-top:28px}
.chooseCard{border:2px solid var(--text);background:var(--surface);padding:26px 26px 24px;box-shadow:10px 10px 0 var(--line-strong);display:flex;flex-direction:column}
.chooseCard.full{border-color:var(--brand);box-shadow:10px 10px 0 var(--brand)}
.chooseCard .tag{font:800 11px/1 var(--font-mono);letter-spacing:.14em;color:var(--brand);margin:0 0 12px}
.chooseCard h3{font-size:22px;line-height:1.4;margin:0 0 10px;letter-spacing:-.01em}
.chooseCard .model{font-size:14px;margin:0 0 14px;padding:8px 12px;background:var(--surface-2);display:inline-block}
.chooseCard ul{margin:0 0 14px;padding-left:18px}.chooseCard li{font-size:14px;line-height:1.8;color:var(--text-2);margin:0 0 4px}
.chooseCard .fine{font-size:12.5px;line-height:1.7;color:var(--text-muted);margin:0 0 14px}
.chooseCard .priceRow{margin:auto 0 14px;display:flex;align-items:baseline;gap:10px}.chooseCard .priceRow .num{font:800 34px/1 var(--font-mono);letter-spacing:-.02em}.chooseCard .priceRow small{font-size:12px;color:var(--text-muted)}
.chooseNote{margin-top:28px;border-left:4px solid var(--brand);padding:6px 0 6px 20px}
.chooseNote h3{font-size:17px;margin:0 0 10px}.chooseNote p{font-size:14.5px;line-height:1.9;color:var(--text-2);margin:0 0 10px}
@media (max-width:860px){.chooseGrid{grid-template-columns:1fr}}

/* v5.7（2026-10-19）：App の9項目のカード（以前はライト版の lite.css にしか無く、本ページでは素の文字の羅列になっていた） */
.liteGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.liteGrid>div{border:1px solid var(--line-strong);background:var(--surface);padding:22px 22px 20px}
.liteGrid .no{display:block;font:800 11px/1 var(--font-mono);letter-spacing:.14em;color:var(--brand);margin-bottom:10px}
.liteGrid h3{font-size:17px;margin:0 0 8px;line-height:1.45}
.liteGrid p{font-size:14px;line-height:1.85;color:var(--text-2);margin:0}
.lead2{font-size:14.5px;line-height:1.9;color:var(--text-2);max-width:820px}
#app .note,#v57 .note{font-size:13px;line-height:1.8;color:var(--text-muted);margin-top:14px}
/* v5.7 の節：6拍子の作例、比較、実測 */
.v57Grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.v57Grid figure{margin:0;border:1px solid var(--line-strong);background:var(--surface)}
.v57Grid img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-bottom:1px solid var(--line)}
.v57Grid figcaption{padding:12px 14px 14px;font-size:13.5px;line-height:1.7;color:var(--text-2)}
.v57Grid figcaption b{display:block;font:800 11px/1.4 var(--font-mono);letter-spacing:.12em;color:var(--brand);margin-bottom:4px}
.v57h{font-size:clamp(22px,2.6vw,32px);font-weight:900;letter-spacing:-.02em;margin:56px 0 12px}
.v57Cmp{margin:22px 0 0;border:1px solid var(--line-strong);background:var(--surface)}
.v57Cmp img{display:block;width:100%;height:auto}
.v57Cmp figcaption{padding:10px 14px;font-size:13px;color:var(--text-2);border-top:1px solid var(--line)}
.v57Stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.v57Stats div{border-top:3px solid var(--brand);padding:14px 4px 0}
.v57Stats b{display:block;font:900 clamp(26px,3vw,38px)/1.1 var(--font-mono);color:var(--text)}
.v57Stats span{display:block;margin-top:6px;font-size:13.5px;line-height:1.7;color:var(--text-2)}
@media (max-width:860px){.liteGrid,.v57Grid,.v57Stats{grid-template-columns:1fr}}