/* VibeSlide-lite のページ固有（土台は ../vibeslide.css と /tokens.css） */
.vs-logo .v1.lite{font-size:11px}
.liteHero{min-height:auto;padding-top:72px;padding-bottom:56px;background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 6%,var(--bg)),var(--bg))}
.liteHero video{display:none}
.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:760px}
.note{font-size:13px;line-height:1.8;color:var(--text-muted);margin-top:18px}
.sampleRow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
.sampleCard{display:block;border:1px solid var(--line-strong);background:var(--surface);padding:20px 22px;text-decoration:none;color:var(--text);box-shadow:8px 8px 0 var(--line-strong)}
.sampleCard:hover{box-shadow:8px 8px 0 var(--brand)}
.sampleCard .no{display:block;font:800 11px/1 var(--font-mono);letter-spacing:.14em;color:var(--brand);margin-bottom:10px}
.sampleCard b{display:block;font-size:16px;margin-bottom:6px}.sampleCard small{font-size:13px;color:var(--text-2);line-height:1.7}
.costTable,.cmpTable{margin-top:22px}.costTable td.num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.cmpTable th:nth-child(2){color:var(--brand)}.cmpTable td:first-child{font-weight:700;white-space:nowrap}
.startGrid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px}
.startGrid>div{border:1px solid var(--line-strong);background:var(--surface);padding:22px 24px}
.startGrid h3{margin:0 0 10px;font-size:17px}.startGrid li{font-size:14px;line-height:1.9;color:var(--text-2)}.startGrid code{font-size:12.5px}
@media (max-width:860px){.liteGrid,.sampleRow,.startGrid{grid-template-columns:1fr}.cmpTable{font-size:12.5px}}

/* ===== 2026-10-04 ライト版の魅力を見せる節（77型・作例・しくみ・カンペ・テーマ・使い道） ===== */
/* ヒーロー下の流れる帯 */
.mqWrap{overflow:hidden;background:var(--ink);padding:14px 0;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.mq{overflow:hidden}.mq+.mq{margin-top:10px}
.mqIn{display:flex;gap:10px;width:max-content;animation:mq 160s linear infinite}
.mq.rev .mqIn{animation-direction:reverse;animation-duration:180s}
.mqIn img{width:280px;height:158px;object-fit:cover;display:block;border:1px solid rgba(255,255,255,.18)}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mqIn{animation:none}}
/* 77型 */
.famRow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:26px 0 18px;border-top:1px solid var(--line-strong);border-left:1px solid var(--line-strong)}
.famRow>div{border-right:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);padding:14px 16px;background:var(--surface)}
.famRow b{display:block;font-size:14px}.famRow span{display:block;font:800 22px/1.2 var(--font-mono);color:var(--brand);margin:4px 0}.famRow small{font-size:12px;color:var(--text-muted);line-height:1.6}
.typeTabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.typeTabs button{font:600 13px/1 var(--font-body,inherit);padding:9px 12px;border:1px solid var(--line-strong);background:var(--surface);color:var(--text);cursor:pointer}
.typeTabs button b{font-family:var(--font-mono);margin-left:4px;color:var(--text-muted)}
.typeTabs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}.typeTabs button.on b{color:#ff7277}
.typeGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tc{margin:0;background:var(--surface);border:1px solid var(--line-strong)}
.tc[hidden]{display:none}
.tc button,.shotStrip button,.howShow button,.kanpeMain button,.kanpeSub button,.themeGrid button,.ucImgs button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.tc img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-bottom:1px solid var(--line)}
.tc figcaption{display:flex;align-items:baseline;gap:8px;padding:9px 11px;font-size:13px;line-height:1.4}
.tc figcaption i{font:800 11px/1 var(--font-mono);color:var(--brand);font-style:normal}
.tc figcaption b{flex:1;font-weight:700}.tc figcaption code{font-size:11px;color:var(--text-muted);background:none;padding:0}
.tc:hover{box-shadow:6px 6px 0 var(--brand)}
/* 作例 */
.subH{font-size:18px;margin:40px 0 6px}
.shotStrip{display:grid;gap:10px;margin-top:18px}
.shotStrip.s9{grid-template-columns:repeat(3,1fr)}.shotStrip.s14{grid-template-columns:repeat(7,1fr)}
.shotStrip img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line-strong)}
.shotStrip button:hover img{outline:3px solid var(--brand);outline-offset:-3px}
/* しくみ */
.howGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.howGrid>div{border:1px solid var(--line-strong);background:var(--surface);padding:20px 22px}
.howGrid .no{display:block;font:800 11px/1 var(--font-mono);letter-spacing:.14em;color:var(--brand);margin-bottom:10px}
.howGrid h3{font-size:17px;margin:0 0 8px}.howGrid p{font-size:14px;line-height:1.85;color:var(--text-2);margin:0}
.howShow{display:grid;grid-template-columns:1fr 1.25fr;gap:18px;margin-top:22px;align-items:start}
.howShow.two{grid-template-columns:1fr 1fr}
.howShow figure{margin:0}.howShow img{display:block;width:100%;height:auto;border:1px solid var(--line-strong)}
.howShow figcaption{font-size:12.5px;color:var(--text-muted);margin-top:8px;line-height:1.6}
pre.json{margin:0;background:var(--ink);color:#e9e9ea;padding:18px 20px;font:13px/1.65 var(--font-mono);overflow:auto;border:1px solid var(--ink)}
.checks{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.checks li{border-left:4px solid var(--positive,#1d4ed8);background:var(--surface);padding:12px 16px;font-size:14px;line-height:1.85;color:var(--text-2)}
.checks b{color:var(--text)}
/* カンペ */
.kanpeMain{margin-top:22px}.kanpeMain img{display:block;width:100%;height:auto;border:1px solid var(--line-strong);box-shadow:10px 10px 0 var(--line-strong)}
.kanpeSub{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px}.kanpeSub img{display:block;width:100%;height:auto;border:1px solid var(--line-strong)}
.kanpeFeat{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.kanpeFeat>div{border-top:3px solid var(--brand);background:var(--surface);padding:14px 16px}
.kanpeFeat b{display:block;font-size:15px;margin-bottom:6px}.kanpeFeat p{margin:0;font-size:13.5px;line-height:1.8;color:var(--text-2)}
/* テーマ */
.themeGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.themeGrid figure{margin:0}.themeGrid img{display:block;width:100%;height:auto;border:1px solid var(--line-strong)}
.themeGrid figcaption{font-size:13px;margin-top:8px;color:var(--text-2)}.themeGrid figcaption code{margin-right:8px;font-weight:700}
.motionRow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.motionRow>div{border:1px solid var(--line-strong);background:var(--surface);padding:18px 20px}
.motionRow h3{margin:0 0 6px;font-size:16px}.motionRow p{font-size:13px;color:var(--text-muted);margin:0 0 8px;line-height:1.7}
.motionRow ul{margin:0;padding-left:18px;font-size:13.5px;line-height:1.9;color:var(--text-2)}.motionRow .small{margin-top:8px}
/* 使い道 */
.ucGrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px}
.uc{border:1px solid var(--line-strong);background:var(--surface);padding:18px 20px}
.uc h3{margin:0 0 4px;font-size:17px}.uc>p{margin:0 0 12px;font-size:13.5px;color:var(--text-2)}
.ucImgs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ucImgs img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line)}
.ucImgs span{display:block;font-size:11px;color:var(--text-muted);margin-top:4px;text-align:left;line-height:1.4}
/* 拡大表示 */
.xlb{position:fixed;inset:0;z-index:200;background:rgba(9,10,13,.92);display:flex;align-items:center;justify-content:center;padding:40px 70px}
.xlb[hidden]{display:none}
.xlb figure{margin:0;max-width:min(1600px,100%);max-height:100%}
.xlb img{display:block;max-width:100%;max-height:calc(100vh - 140px);margin:0 auto;border:1px solid rgba(255,255,255,.25)}
.xlb figcaption{color:#e9e9ea;font-size:14px;margin-top:12px;text-align:center}
.xlbClose,.xlbNav{position:absolute;background:none;border:1px solid rgba(255,255,255,.4);color:#fff;font-size:28px;line-height:1;width:48px;height:48px;cursor:pointer}
.xlbClose{top:18px;right:18px}.xlbNav.prev{left:12px;top:50%}.xlbNav.next{right:12px;top:50%}
.xlbClose:hover,.xlbNav:hover{background:rgba(255,255,255,.12)}
@media (max-width:1100px){.typeGrid{grid-template-columns:repeat(3,1fr)}.shotStrip.s14{grid-template-columns:repeat(4,1fr)}}
@media (max-width:860px){.famRow{grid-template-columns:1fr 1fr}.typeGrid{grid-template-columns:1fr 1fr}.shotStrip.s9{grid-template-columns:1fr 1fr}.shotStrip.s14{grid-template-columns:repeat(3,1fr)}.howGrid,.howShow,.howShow.two,.checks,.kanpeSub,.kanpeFeat,.themeGrid,.motionRow,.ucGrid{grid-template-columns:1fr}.mqIn img{width:200px;height:113px}.xlb{padding:20px 10px}.xlbNav{display:none}}