/* Web表現ずかん /lab/ デモ用スタイル（site-2026.css と併用） */
.lab-intro{max-width:1280px;margin:0 auto;padding:0 44px 80px}
.lab-intro p{font-size:15px;font-weight:300;line-height:2.05;color:var(--ink-soft);max-width:42em}

.tech{max-width:1280px;margin:0 auto;padding:96px 44px;border-bottom:1px solid var(--line)}
.tech .head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:10px}
.tech .num{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.tech .en{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.tech h2{font-weight:400;font-size:clamp(22px,3vw,36px);line-height:1.4;margin-bottom:12px}
.tech .one{font-size:14px;font-weight:300;color:var(--ink-soft);max-width:40em;margin-bottom:36px}
.tech .demo{margin:0 0 26px}
.tech .meta{display:grid;grid-template-columns:1fr 1fr;gap:24px;border-top:1px solid var(--line);padding-top:22px}
.tech .meta .k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.tech .meta .v{font-size:13px;font-weight:300;line-height:1.8;color:var(--ink-soft)}
@media(max-width:680px){.tech .meta{grid-template-columns:1fr;gap:16px}}

/* hover cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{position:relative;border:1px solid var(--line);border-radius:8px;padding:26px 24px;overflow:hidden;background:rgba(255,255,255,.25);transition:transform .3s}
.card:hover{transform:translateY(-4px)}
.card h3{font-size:16px;font-weight:500;margin-bottom:6px}
.card p{font-size:13px;font-weight:300;color:var(--ink-soft)}
.card .arw{margin-top:16px;font-family:var(--mono);color:var(--accent);transition:transform .3s}
.card:hover .arw{transform:translateX(6px)}
.card .edge{position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.card:hover .edge{transform:scaleX(1)}
@media(max-width:680px){.cards{grid-template-columns:1fr}}

/* text reveal */
.rt .word{display:inline-block;overflow:hidden;vertical-align:top}
.rt .word>span{display:inline-block;transform:translateY(105%);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.rt.in .word>span{transform:translateY(0)}
.rt-big{font-weight:400;font-size:clamp(24px,3.4vw,40px);line-height:1.4}

/* mask reveal — 初期は必ず表示。.play が付いた時だけ「開く」演出を上乗せ（JS失敗でも画像は見える） */
.mask{position:relative;overflow:hidden;border-radius:6px;aspect-ratio:16/9}
.mask img{width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.mask.play{animation:maskOpen 1.1s cubic-bezier(.7,0,.2,1)}
.mask.play img{animation:maskZoom 1.3s cubic-bezier(.2,.6,.2,1)}
@keyframes maskOpen{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes maskZoom{from{transform:scale(1.12)}to{transform:scale(1)}}
.mask:hover img{transform:scale(1.05);transition:transform .9s cubic-bezier(.2,.6,.2,1)}

/* magnetic */
.mag-wrap{display:flex;justify-content:center;padding:24px 0}
.mag{display:inline-flex;align-items:center;gap:10px;padding:18px 38px;border-radius:999px;background:var(--accent);color:var(--paper);font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;border:none;cursor:pointer;transition:transform .25s cubic-bezier(.2,.6,.2,1)}

/* count up */
.stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.stat{padding:34px 24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat .num{font-size:clamp(40px,6vw,64px);font-weight:300;color:var(--accent);line-height:1;letter-spacing:-.02em}
.stat .num small{font-size:18px;color:var(--muted);margin-left:4px}
.stat .l{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:12px}
@media(max-width:680px){.stats{grid-template-columns:1fr;border-left:none}.stat{border-right:none}}

/* diagram */
.diagram{max-width:620px;margin:0 auto}
.diagram svg{width:100%;height:auto;overflow:visible}
.diagram text{font-family:var(--sans);fill:var(--ink);font-weight:400;font-size:13px}
.diagram .nd{font-family:var(--mono);font-size:11px;letter-spacing:.08em;fill:var(--muted)}

/* parallax */
.px-stage{position:relative;height:54vh;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:8px;background:var(--paper-2)}
.px-stage img{position:absolute;width:44%;border-radius:6px;will-change:transform;filter:saturate(.9)}
.px-1{top:6%;left:6%}.px-2{bottom:8%;right:8%;width:36%}
.px-cap{position:relative;z-index:2;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ink);background:var(--paper);padding:9px 16px;border-radius:999px}

/* sticky */
.pin{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start}
.pin .stuck{position:sticky;top:18vh}
.pin .stuck h3{font-size:clamp(20px,2.6vw,30px);font-weight:400;line-height:1.4}
.pin .sc-list{display:flex;flex-direction:column;gap:32px}
.pin .sc{padding:26px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.25);font-size:14px;font-weight:300}
.pin .sc .n{font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:.1em;margin-bottom:6px}
@media(max-width:760px){.pin{grid-template-columns:1fr;gap:20px}.pin .stuck{position:static}}

/* page transition wipe */
.go-btn{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border:1px solid var(--accent);color:var(--accent);border-radius:999px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;background:none;cursor:pointer}
.wipe{position:fixed;inset:0;background:var(--ink);z-index:9990;transform:scaleY(0);transform-origin:bottom;display:flex;align-items:center;justify-content:center;color:var(--paper);font-family:var(--mono);letter-spacing:.2em;font-size:13px;opacity:0}

/* ambient: grain + cursor */
.grain{position:fixed;inset:0;z-index:6;pointer-events:none;opacity:.04;mix-blend-mode:multiply}
.grain svg{width:100%;height:100%}
.cursor{position:fixed;top:0;left:0;width:11px;height:11px;border-radius:50%;background:var(--accent);pointer-events:none;z-index:9999;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;transition:width .25s,height .25s,background .25s}
.cursor span{font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--paper);opacity:0;transition:opacity .2s;text-transform:uppercase}
.cursor.lbl{width:58px;height:58px}
.cursor.lbl span{opacity:1}
@media(hover:hover){body.lab-cursor{cursor:none}}
@media(hover:none){.cursor{display:none}}

/* glossary */
.glossary{max-width:1280px;margin:0 auto;padding:96px 44px;border-bottom:1px solid var(--line)}
.glossary .g-grid{border-top:1px solid var(--line)}
.glossary dl{display:grid;grid-template-columns:200px 1fr;gap:0;border-bottom:1px solid var(--line);padding:20px 4px}
.glossary dt{font-size:15px;font-weight:500;color:var(--ink)}
.glossary dt small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--muted);font-weight:400;margin-top:4px;text-transform:uppercase}
.glossary dd{font-size:13px;font-weight:300;line-height:1.85;color:var(--ink-soft)}
@media(max-width:680px){.glossary dl{grid-template-columns:1fr;gap:8px}}

/* template section */
.tmpl{max-width:860px;margin:0 auto;padding:96px 44px;border-bottom:1px solid var(--line)}
.tmpl h2{font-weight:400;font-size:clamp(22px,3vw,36px);margin-bottom:24px}
.tmpl p{font-size:15px;font-weight:300;line-height:2;color:var(--ink-soft);margin-bottom:16px}
.tmpl .two{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:28px 0}
.tmpl .box{border:1px solid var(--line);border-radius:8px;padding:24px;background:rgba(255,255,255,.25)}
.tmpl .box h4{font-size:15px;font-weight:500;margin-bottom:12px}
.tmpl .box .t{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.tmpl .box ul{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:300;color:var(--ink-soft)}
.tmpl .box li{padding-left:16px;position:relative}
.tmpl .box li::before{content:"—";position:absolute;left:0;color:var(--accent)}
@media(max-width:680px){.tmpl .two{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){
  .rt .word>span{transform:none}.mask.play,.mask.play img{animation:none!important}
}
@media(max-width:760px){.tech,.glossary,.tmpl,.lab-intro{padding-left:20px;padding-right:20px}.tech{padding-top:64px;padding-bottom:64px}}

/* ===== 追加技術 ===== */
/* 11 Before/After 比較スライダー */
.ba-slider{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;user-select:none;touch-action:none}
.ba-slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.ba-slider .after{clip-path:inset(0 0 0 50%);}
.ba-slider .handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--paper);transform:translateX(-1px);box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.ba-slider .knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:var(--paper);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;color:var(--accent);box-shadow:0 4px 14px rgba(0,0,0,.18);cursor:ew-resize}
.ba-slider .tag{position:absolute;top:14px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;background:rgba(26,24,20,.6);color:var(--paper);padding:4px 10px;border-radius:999px}
.ba-slider .tag.b{left:14px}.ba-slider .tag.a{right:14px}

/* 12 3Dチルト */
.tilt-wrap{display:flex;justify-content:center;perspective:900px}
.tilt{width:min(420px,100%);border:1px solid var(--line);border-radius:12px;padding:36px 30px;background:rgba(255,255,255,.3);transition:transform .15s ease;transform-style:preserve-3d;will-change:transform}
.tilt h3{font-size:18px;font-weight:500;margin-bottom:8px}
.tilt p{font-size:13px;font-weight:300;color:var(--ink-soft)}

/* 13 タイプライター */
.tw{font-size:clamp(20px,2.6vw,30px);font-weight:400;line-height:1.5;min-height:1.5em}
.tw::after{content:"";display:inline-block;width:.5em;height:1.1em;background:var(--accent);margin-left:2px;vertical-align:-.15em;animation:twcaret .8s steps(1) infinite}
.tw.done::after{animation:none;opacity:0}
@keyframes twcaret{50%{opacity:0}}

/* 14 マーキー */
.marquee2{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0}
.marquee2 .track{display:flex;white-space:nowrap;gap:0;animation:mq 24s linear infinite;font-family:var(--mono);font-size:14px;letter-spacing:.1em;color:var(--ink-soft)}
.marquee2 .track span{padding:0 28px}
.marquee2 .track span::after{content:"·";color:var(--accent);margin-left:28px}
@keyframes mq{to{transform:translateX(-50%)}}

/* 15 スクロールで色反転 */
.invert{border-radius:10px;padding:64px 40px;text-align:center;background:var(--paper-2);color:var(--ink);transition:background .7s ease,color .7s ease}
.invert.in{background:var(--ink);color:var(--paper)}
.invert h3{font-weight:400;font-size:clamp(22px,3vw,34px);line-height:1.5}
.invert .s{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}

/* 16 アコーディオン */
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;padding:20px 4px;font-size:15px;font-weight:500;display:flex;justify-content:space-between;gap:16px}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-family:var(--mono);color:var(--accent);font-size:18px}
.acc details[open] summary::after{content:"–"}
.acc .a{padding:0 4px 20px;font-size:14px;font-weight:300;line-height:1.9;color:var(--ink-soft)}

.replay-note{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--muted);text-align:center;padding:18px 0 0}

/* ===== もくじ（カタログ目次） ===== */
.toc{max-width:1280px;margin:0 auto;padding:0 44px 90px}
.toc .toc-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:30px;margin-bottom:34px}
.toc .toc-head h2{font-weight:400;font-size:clamp(20px,2.6vw,30px)}
.toc .toc-head .cnt{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--accent);text-transform:uppercase}
.toc .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 40px}
.toc .col h3{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.toc .col a{display:flex;justify-content:space-between;gap:10px;padding:7px 0;font-size:14px;font-weight:300;color:var(--ink-soft);transition:.2s;border-bottom:1px solid var(--line-soft)}
.toc .col a:hover{color:var(--accent);padding-left:6px}
.toc .col a .e{font-family:var(--mono);font-size:10px;color:var(--muted)}
.cat-label{max-width:1280px;margin:0 auto;padding:60px 44px 0}
.cat-label span{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:12px}
.cat-label span::before,.cat-label span::after{content:"";height:1px;background:var(--line);flex:1}
@media(max-width:760px){.toc{padding:0 20px 60px}.toc .cols{grid-template-columns:1fr 1fr;gap:20px}.cat-label{padding:40px 20px 0}}
@media(max-width:520px){.toc .cols{grid-template-columns:1fr}}