/* Tako_LP_One-Shot sales letter v2 — letter/journey × abyss-gold × letters-fall
   金: 先頭のタイマー数字 と LV の数字。赤: 帯とボタン。白: 本文。 */
:root{
  --bg:#000;--bg2:#070707;--card:#101010;--line:rgba(255,255,255,.1);
  --ink:#fff;--body:#d6d6d6;--muted:#8b8b8b;
  --red:#d10a1e;--red-dk:#8f0714;--gold:#e5c158;
  --gold-grad:linear-gradient(180deg,#fff2c2 0%,#e9c85a 35%,#c39a2a 60%,#f4dc84 100%);
  --jp:"Noto Sans JP",sans-serif;--en:"Bebas Neue",Impact,sans-serif;--min:"Shippori Mincho B1",serif;
  --ease:cubic-bezier(.22,1,.36,1);--gutter:clamp(20px,6vw,96px);
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:var(--timer-h)}
body{margin:0;background:var(--bg);color:var(--body);font-family:var(--jp);font-size:16px;line-height:1.95;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,ol,dl,dd{margin:0}ul,ol{padding:0;list-style:none}
::selection{background:var(--red);color:#fff}
.blink{display:inline-block}
html.motion .blink{animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.15}}

/* ---------- ローダー ---------- */
.loader{position:fixed;inset:0;z-index:100;background:#000;display:grid;place-content:center;justify-items:center;gap:14px}
.loader__lv{font-family:var(--en);font-size:clamp(72px,16vw,160px);line-height:1;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.loader__lv small{font-size:.32em;margin-right:.1em}
.loader__bar{width:min(320px,60vw);height:4px;background:var(--line);overflow:hidden}
.loader__bar i{display:block;height:100%;width:0;background:var(--red)}
.loader__press{font-family:var(--en);font-size:16px;letter-spacing:.4em;color:var(--ink)}
html.motion .loader__press{animation:blink 1s steps(2) infinite}
html.no-motion .loader{display:none}

/* ---------- FX ---------- */
.fx{position:fixed;inset:0;z-index:1;pointer-events:none;width:100%;height:100%}
.grain{position:fixed;inset:-50%;z-index:6;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html.motion .grain{animation:grain .5s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-4%)}75%{transform:translate(-1%,5%)}100%{transform:translate(3%,-1%)}}
.flash{position:fixed;inset:0;z-index:90;pointer-events:none;background:#fff;opacity:0}

/* ---------- 先頭固定タイマー（金） ---------- */
:root{--timer-h:130px}
.timer{position:fixed;top:0;left:0;right:0;z-index:70;background:rgba(0,0,0,.86);backdrop-filter:blur(10px);border-bottom:1px solid rgba(229,193,88,.35)}
.timer::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.timer__in{max-width:1240px;margin:0 auto;min-height:var(--timer-h);padding:8px var(--gutter);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.timer__cap{font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--body)}
.timer__sub{font-size:10px;letter-spacing:.2em;color:var(--red);font-weight:700}
.timer__t{display:flex;align-items:baseline;justify-content:center;gap:4px;font-family:var(--en);line-height:1;white-space:nowrap}
.timer__t b{font-family:var(--jp);font-weight:900;font-size:clamp(54px,9vw,112px);letter-spacing:-.02em;min-width:1.25em;text-align:center;font-variant-numeric:tabular-nums;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.timer__t small{font-family:var(--jp);font-size:clamp(12px,1.4vw,16px);font-weight:900;color:var(--ink);margin:0 clamp(10px,2vw,22px) 0 4px;letter-spacing:.1em}
.timer.is-over .timer__t{opacity:.55}   /* 終了後は 0 で止めて表示したまま */
.timer.is-over .timer__cap{display:none}.timer.is-over .timer__sub::before{content:"販売終了 — ";color:var(--muted)}
@media(max-width:760px){:root{--timer-h:84px}.timer__t b{font-size:44px;min-width:1.15em}.timer__t small{font-size:11px;margin:0 8px 0 2px}}

/* ---------- 経験値ゲージ ---------- */
.gauge{position:fixed;right:clamp(10px,2vw,28px);top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.gauge__cap{font-family:var(--en);font-size:11px;letter-spacing:.3em;color:var(--muted);writing-mode:vertical-rl}
.gauge__lv{font-family:var(--en);font-size:clamp(28px,4vw,48px);line-height:1;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:400}
.gauge__bar{width:3px;height:26vh;background:var(--line);position:relative;overflow:hidden}
.gauge__bar i{position:absolute;left:0;right:0;bottom:0;height:1%;background:linear-gradient(to top,var(--red),var(--gold));box-shadow:0 0 12px rgba(229,193,88,.5)}
.gauge__toast{position:absolute;right:calc(100% + 10px);top:14%;font-family:var(--en);font-size:16px;letter-spacing:.2em;color:var(--gold);white-space:nowrap;opacity:0}
.gauge.is-hit .gauge__lv{animation:hit .5s var(--ease)}
.gauge.is-hit .gauge__toast{animation:toast 1.2s var(--ease)}
@keyframes hit{30%{transform:scale(1.3)}}
@keyframes toast{0%{opacity:0;transform:translateX(10px)}20%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}
@media(max-width:800px){.gauge{right:6px}.gauge__bar{height:18vh}.gauge__cap,.gauge__toast{display:none}}

/* ---------- ボタン（赤） ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;background:var(--red);color:#fff;font-weight:900;font-size:16px;padding:16px 28px;letter-spacing:.04em;box-shadow:0 6px 0 var(--red-dk);transition:transform .25s var(--ease),box-shadow .25s;position:relative;white-space:nowrap}
.btn i{font-style:normal;font-size:11px;transition:transform .3s var(--ease)}
.btn:hover{transform:translateY(-3px);box-shadow:0 9px 0 var(--red-dk),0 20px 50px rgba(209,10,30,.35)}
.btn:hover i{transform:translateX(4px)}
.btn:active{transform:translateY(3px);box-shadow:0 3px 0 var(--red-dk)}
.btn--sm{padding:10px 16px;font-size:13px;box-shadow:0 4px 0 var(--red-dk)}
.btn--big{font-size:clamp(18px,2.4vw,24px);padding:22px 40px;box-shadow:0 8px 0 var(--red-dk)}
/* スマホ: ボタンは枠の幅に収める（折り返し可） */
@media(max-width:760px){.btn{max-width:100%;white-space:normal;text-align:center;justify-content:center;box-sizing:border-box}.btn--big{width:100%;padding:18px 14px;font-size:17px;line-height:1.4;word-break:keep-all;overflow-wrap:normal}.price .btn{margin-left:0;margin-right:0}}
html.motion .btn--pulse::after{content:"";position:absolute;inset:-4px;border:2px solid var(--red);animation:pulse 1.8s ease-out infinite;pointer-events:none}
@keyframes pulse{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.18)}}

/* ---------- ヒーロー ---------- */
.hero{position:relative;z-index:3;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;padding:calc(var(--timer-h) + 48px) var(--gutter) clamp(64px,10vh,120px);overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__img{width:100%;height:100%;object-fit:cover;object-position:center 40%;opacity:.8}
html.motion .hero__img{animation:kb 30s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.04)}to{transform:scale(1.14) translate(-1%,-2%)}}
.hero__grid{position:absolute;left:-20%;right:-20%;bottom:-10%;height:55%;transform:perspective(600px) rotateX(62deg);transform-origin:bottom;
  background-image:linear-gradient(rgba(209,10,30,.45) 1px,transparent 1px),linear-gradient(90deg,rgba(209,10,30,.45) 1px,transparent 1px);background-size:60px 60px;
  -webkit-mask-image:linear-gradient(to top,#000,transparent);mask-image:linear-gradient(to top,#000,transparent);opacity:.7}
html.motion .hero__grid{animation:gridmove 3s linear infinite}
@keyframes gridmove{to{background-position:0 60px,0 0}}
.hero__veil{position:absolute;inset:0;background:linear-gradient(to top,#000 0%,rgba(0,0,0,.55) 35%,rgba(0,0,0,.25) 70%,rgba(0,0,0,.6) 100%),radial-gradient(ellipse 60% 60% at 50% 55%,rgba(0,0,0,.55),transparent 70%)}
.hero__ghost{position:absolute;right:-.05em;top:12vh;z-index:1;font-family:var(--en);font-size:clamp(140px,26vw,420px);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.16);pointer-events:none;white-space:nowrap}
.hero__in{position:relative;z-index:2;max-width:1000px;margin:0 auto}
.eyebrow{font-family:var(--en);font-size:14px;letter-spacing:.32em;color:var(--red);margin-bottom:18px}
.hero__h1{font-weight:900;font-size:clamp(38px,7.2vw,104px);line-height:1.08;letter-spacing:-.02em;color:var(--ink);cursor:pointer}
.hero__h1 .w{display:inline-block;will-change:transform}
.hero__sub{font-family:var(--min);font-size:clamp(20px,2.6vw,32px);color:var(--ink);margin-top:20px}
.hero__lead{max-width:34em;margin:14px auto 0;font-size:clamp(15px,1.3vw,17px)}
.chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:22px}
.chips li{border:1px solid var(--line);background:rgba(0,0,0,.5);padding:8px 14px;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--body)}
.chips b{font-family:var(--en);font-size:22px;color:var(--ink);font-weight:400;margin:0 4px;vertical-align:-.08em}
.hero__cta{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:28px}
.hero__note{font-size:12px;color:var(--muted);letter-spacing:.06em}
.hero__hint{position:absolute;left:var(--gutter);bottom:20px;z-index:2;font-size:11px;letter-spacing:.2em;color:var(--muted);opacity:0;transition:opacity 1s 2.5s}
.hero.is-ready .hero__hint{opacity:.9}
.exp{position:fixed;z-index:60;pointer-events:none;font-family:var(--en);font-size:26px;color:var(--gold);letter-spacing:.06em;animation:exp 1.1s var(--ease) forwards}
@keyframes exp{0%{opacity:0;transform:translate(-50%,0)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-90px)}}

/* ---------- 赤帯 ---------- */
.band{position:relative;z-index:3;background:var(--red);color:#fff;font-family:var(--en);font-size:16px;letter-spacing:.16em;overflow:hidden;white-space:nowrap;padding:9px 0}
.band__t{display:inline-block;width:max-content}
html.motion .band__t{animation:tk 28s linear infinite}
.band__t span{margin:0 22px}.band__t i{font-style:normal;color:#ffd166;font-size:10px}
@keyframes tk{to{transform:translateX(-50%)}}

/* ---------- DEMO: ターミナル再生 ---------- */
.sec--demo{background:var(--bg2)}
.sec__in--wide{max-width:1000px}
.term{margin-top:36px;border:1px solid var(--line);background:#050505;box-shadow:0 40px 100px rgba(0,0,0,.7);font-family:"SFMono-Regular",Consolas,"Noto Sans JP",monospace;font-size:14px;line-height:1.8}
.term__bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);background:#0c0c0c}
.term__bar i{width:10px;height:10px;border-radius:50%;background:#333}.term__bar i:first-child{background:var(--red)}
.term__bar span{margin-left:auto;font-family:var(--en);letter-spacing:.2em;font-size:13px;color:var(--muted)}
.term__body{padding:18px 20px;min-height:340px;color:var(--body)}
.term__line{white-space:pre-wrap;opacity:0;transform:translateY(6px)}
.term__line.is-in{opacity:1;transform:none;transition:opacity .25s,transform .25s}
.term__line--u{color:var(--ink);font-weight:700}
.term__line--u::before{content:"> ";color:var(--red)}
.term__line--menu,.term__line--tbl{color:var(--muted)}
.term__line--ok{color:var(--gold)}
.term__line--sys{color:var(--body)}
.term__cur{display:inline-block;width:8px;height:1em;background:var(--ink);vertical-align:-.15em;margin-left:2px}
html.motion .term__cur{animation:blink .8s steps(2) infinite}
.demo__note{margin-top:14px;font-size:13px;color:var(--muted);letter-spacing:.04em}

/* ---------- スペック ---------- */
.spec{position:relative;z-index:3;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg)}
.spec__grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(6,1fr)}
.spec__grid li{padding:26px 8px;text-align:center;position:relative}
.spec__grid li+li::before{content:"";position:absolute;left:0;top:28%;bottom:28%;width:1px;background:var(--line)}
.spec__grid b{display:block;font-family:var(--en);font-size:clamp(40px,5vw,64px);line-height:1;color:var(--ink);font-weight:400}
.spec__grid span{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.14em}
@media(max-width:700px){.spec__grid{grid-template-columns:repeat(3,1fr)}.spec__grid li:nth-child(4)::before{display:none}}

/* ---------- セクション共通 ---------- */
.sec{position:relative;z-index:3;padding:clamp(88px,13vw,180px) var(--gutter);overflow:hidden}
.sec::before{content:"";position:absolute;left:var(--gutter);top:0;height:1px;width:0;background:linear-gradient(90deg,var(--red),transparent);transition:width 1.2s var(--ease)}
.sec.is-seen::before{width:min(420px,60%)}
.sec__in{max-width:900px;margin:0 auto;position:relative;z-index:1}
.lv{font-family:var(--en);font-size:14px;letter-spacing:.34em;color:var(--red);margin-bottom:18px}
.h2{font-weight:900;font-size:clamp(30px,4.8vw,64px);line-height:1.2;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
/* ANY PURPOSE（lv85）: 文章として読ませるので見出しより小さく */
.sec--future .h2{font-size:clamp(19px,2.4vw,30px);line-height:1.8;font-weight:700;letter-spacing:0;max-width:34em;text-wrap:pretty}
.h2 em,.say em,.ps em{font-style:normal;color:var(--red)}
/* 赤い細字を全部太字に: ラベル・アイキャッチは日本語を Noto Sans JP 700 で、本文中の強調は赤の太字 */
.lv,.eyebrow{font-family:"Bebas Neue","Noto Sans JP",Impact,sans-serif;font-weight:700}
p em,li em,dd em,.story p em,.hero__lead em,.from__p em{font-style:normal;color:var(--red);font-weight:900;font-size:1.08em;text-decoration:underline;text-decoration-color:rgba(209,10,30,.7);text-decoration-thickness:2px;text-underline-offset:.22em}
.say em{font-weight:800;font-size:1.12em;text-decoration:underline;text-decoration-color:rgba(209,10,30,.7);text-decoration-thickness:2px;text-underline-offset:.2em}
.h2 em{font-weight:900}
/* 金の強調: 台本の <b> は本文中では金色の太字（数字・キーワード向け）。赤の em と使い分ける */
p b,dd b,.hero__lead b,.from__p b,.story p b,.say b,.check li b,.teaser li b{color:var(--gold);font-weight:900}
.chips b{color:var(--gold)}
.h2--big{font-size:clamp(44px,8vw,120px);line-height:.95;font-family:var(--en);font-weight:400;letter-spacing:.02em}
.h2--big em{font-family:var(--jp);font-weight:900;font-size:.6em;letter-spacing:-.01em;display:block;margin-top:.2em;color:var(--ink)}
.mask{display:block;overflow:hidden}.mask>span{display:block;will-change:transform}
html.motion .mask>span{transform:translateY(110%)}
.p{margin-top:22px;max-width:36em;font-size:clamp(15px,1.3vw,17px)}
.say{margin-top:34px;font-family:var(--min);font-size:clamp(22px,3vw,36px);line-height:1.5;color:var(--ink)}
.strike{text-decoration:none;position:relative;color:var(--ink)}
.strike::after{content:"";position:absolute;left:0;right:0;bottom:-.1em;height:3px;background:var(--red);opacity:.9;transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease) .5s}
.is-seen .strike::after{transform:scaleX(1)}
.sec--quote .sec__bg{position:absolute;inset:-15% 0;z-index:0}
.sec--quote .sec__bg img{width:100%;height:100%;object-fit:cover;opacity:.4}
.sec--quote::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.7) 50%,rgba(0,0,0,.3) 100%)}
.sec--quote .sec__in{z-index:1}

/* ---------- 3ステップ ---------- */
.steps{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;perspective:1200px}
.step{background:var(--card);border:1px solid var(--line);padding:30px 26px 28px;position:relative;transform-style:preserve-3d;transition:border-color .3s}
html.motion .step{opacity:0;transform:rotateY(-40deg) translateX(-30px)}
html.motion .step.is-in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform 1s var(--ease)}
html.motion .step.is-in:nth-child(2){transition-delay:.15s}html.motion .step.is-in:nth-child(3){transition-delay:.3s}
.step:hover{border-color:rgba(209,10,30,.6)}
.step b{font-family:var(--en);font-size:56px;line-height:1;color:var(--red);font-weight:400}
.step h3{font-size:20px;font-weight:900;color:var(--ink);margin:14px 0 8px}
.step p{font-size:14px;line-height:1.8}
.step__arrow{position:absolute;right:-13px;top:50%;transform:translateY(-50%);color:var(--red);font-size:12px;z-index:2}
html.motion .step__arrow{animation:nudge 1.4s ease-in-out infinite}
@keyframes nudge{50%{transform:translate(4px,-50%)}}
@media(max-width:800px){.steps{grid-template-columns:1fr}.step__arrow{display:none}}

/* ---------- スキルツリー ---------- */
.tree{position:relative;margin-top:44px;padding-left:34px}
.tree::before{content:"";position:absolute;left:9px;top:0;bottom:0;width:2px;background:var(--line)}
.tree::after{content:"";position:absolute;left:9px;top:0;width:2px;height:var(--draw,0%);background:linear-gradient(var(--red),var(--gold));box-shadow:0 0 10px rgba(229,193,88,.5)}
.node{position:relative;padding:18px 0 22px;border-bottom:1px solid var(--line);opacity:.3;transform:translateX(-8px);transition:opacity .5s,transform .6s var(--ease)}
.node::before{content:"";position:absolute;left:-30px;top:30px;width:10px;height:10px;border-radius:50%;background:var(--bg);border:2px solid var(--muted);transition:background .3s,border-color .3s,box-shadow .3s,transform .4s var(--ease)}
.node.is-on{opacity:1;transform:none}
.node.is-on::before{background:var(--gold);border-color:var(--gold);box-shadow:0 0 14px var(--gold);transform:scale(1.4)}
.node__n{font-family:var(--en);font-size:13px;letter-spacing:.3em;color:var(--red)}
.node h3{font-size:clamp(20px,2.4vw,28px);font-weight:900;color:var(--ink);margin:4px 0 6px}
.node p{font-size:14px;line-height:1.8;max-width:40em}

/* ---------- ボーナス ---------- */
.sec--bonus{background:var(--bg2)}
.bonus{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bonus__c{background:var(--bg);border:1px solid var(--line);padding:30px 26px;position:relative}
html.motion .bonus__c--l{opacity:0;transform:translateX(-60px)}html.motion .bonus__c--r{opacity:0;transform:translateX(60px)}
html.motion .bonus__c.is-in{opacity:1;transform:none;transition:opacity .9s var(--ease),transform 1s var(--ease)}
.bonus span{font-family:var(--en);font-size:13px;letter-spacing:.3em;color:var(--red)}
.bonus h3{font-size:22px;font-weight:900;color:var(--ink);margin:8px 0 8px}
.bonus p{font-size:14px;line-height:1.8}
@media(max-width:700px){.bonus{grid-template-columns:1fr}}

/* ---------- 価格 ---------- */
.sec--price{text-align:center;background:radial-gradient(ellipse 70% 50% at 50% 30%,rgba(209,10,30,.18),transparent 70%),#000}
.sec--price .sec__in{max-width:760px}
.sec--price .lv,.sec--price .h2{text-align:center}
.price{margin-top:30px;border:1px solid var(--line);padding:clamp(28px,4vw,48px);background:rgba(7,7,7,.9);position:relative}
.price::before{content:"";position:absolute;inset:-1px;border:1px solid rgba(209,10,30,.6);pointer-events:none}
.price__n{font-family:var(--en);color:var(--ink);line-height:1;display:flex;align-items:baseline;justify-content:center;gap:10px}
.price__n b{font-size:clamp(80px,15vw,160px);font-weight:400;font-variant-numeric:tabular-nums}
.price__n small{font-family:var(--jp);font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.14em}
.price__cd{margin-top:14px;font-family:var(--en);font-size:clamp(20px,3vw,30px);color:var(--ink);letter-spacing:.08em}
.price__cd span{font-family:var(--jp);font-size:11px;font-weight:700;color:var(--red);letter-spacing:.3em;margin-right:12px}
.price__cd b{font-weight:400;font-variant-numeric:tabular-nums;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.price .p{margin:24px auto 30px;text-align:center}
.price__note{margin-top:14px;font-size:12px;color:var(--muted);letter-spacing:.06em}

/* ---------- FAQ ---------- */
.faq{margin-top:26px}
.faq div{padding:22px 0;border-bottom:1px solid var(--line)}
.faq dt{font-weight:900;color:var(--ink);font-size:17px;display:flex;gap:12px}
.faq dt::before{content:"Q";font-family:var(--en);color:var(--red);font-size:22px;line-height:1.2}
.faq dd{margin-top:8px;padding-left:30px;font-size:15px}

/* ---------- 追伸 ---------- */
.sec--ps .ps{font-family:var(--min);font-size:clamp(20px,2.8vw,32px);line-height:1.7;color:var(--ink);max-width:28em}

/* ---------- 最終CTA ---------- */
.fin{position:relative;z-index:3;min-height:90svh;display:grid;place-items:center;text-align:center;padding:100px var(--gutter);overflow:hidden;background:radial-gradient(ellipse 60% 50% at 50% 60%,rgba(209,10,30,.25),transparent 70%),#000}
.fin__ghost{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--en);font-size:clamp(160px,40vw,640px);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(229,193,88,.18);pointer-events:none;white-space:nowrap}
.fin__ring{position:absolute;left:50%;top:50%;width:10px;height:10px;pointer-events:none}
.fin__ring i{position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:50%;border:2px solid var(--red);transform:translate(-50%,-50%) scale(1);opacity:0}
.fin.is-boom .fin__ring i{animation:ring 1.6s ease-out forwards}
.fin.is-boom .fin__ring i:nth-child(2){animation-delay:.2s}.fin.is-boom .fin__ring i:nth-child(3){animation-delay:.4s}
@keyframes ring{0%{opacity:.9;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(90)}}
.fin__in{position:relative;display:grid;justify-items:center;gap:18px}
.fin__h{font-family:var(--en);font-size:clamp(64px,14vw,200px);line-height:.9;color:var(--ink);font-weight:400;letter-spacing:.02em}
.fin__h .w{display:inline-block}
html.motion .fin__h .w{opacity:0;transform:scale(3)}
.fin__p{font-family:var(--min);font-size:clamp(20px,2.6vw,30px);color:var(--ink)}

.foot{position:relative;z-index:3;border-top:1px solid var(--line);padding:26px var(--gutter);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:var(--en);font-size:13px;letter-spacing:.2em;color:var(--muted)}

/* ---------- 登場 ---------- */
html.motion .r{opacity:0;transform:translateY(22px)}
html.motion .r.is-in{opacity:1;transform:none;transition:opacity .9s var(--ease),transform 1s var(--ease)}
html.motion .r.is-in:nth-child(2){transition-delay:.08s}html.motion .r.is-in:nth-child(3){transition-delay:.16s}html.motion .r.is-in:nth-child(4){transition-delay:.24s}html.motion .r.is-in:nth-child(5){transition-delay:.32s}html.motion .r.is-in:nth-child(6){transition-delay:.4s}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.loader,.fx,.grain,.hero__hint,.flash{display:none}.node{opacity:1;transform:none}.tree::after{height:100%}.mask>span,.step,.bonus__c,.fin__h .w,.r{opacity:1!important;transform:none!important}.strike::after{transform:scaleX(1)}}

/* ---------- FROM ---------- */
.sec--from{background:var(--bg2);padding-top:clamp(56px,8vw,96px);padding-bottom:clamp(56px,8vw,96px)}
.from{text-align:center;display:grid;justify-items:center;gap:14px;max-width:640px}
.from__icon{width:112px;height:112px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px rgba(229,193,88,.5),0 0 0 8px #000,0 16px 40px rgba(0,0,0,.7)}
.from .lv{margin:6px 0 0}
.from__p{font-size:15px;color:var(--body)}
.from__link{font-size:12px;letter-spacing:.14em;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:2px;transition:color .3s}
.from__link:hover{color:var(--ink)}

/* ---------- SAMPLE STAGE ---------- */
.sec--sample{background:#000}
.browser{margin-top:34px;border:1px solid var(--line);background:#050505;box-shadow:0 40px 100px rgba(0,0,0,.7)}
.browser__bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);background:#0c0c0c;font-family:var(--en);letter-spacing:.12em;font-size:13px;color:var(--muted)}
.browser__bar i{width:10px;height:10px;border-radius:50%;background:#333}.browser__bar i:first-child{background:var(--red)}
.browser__bar span{margin-left:8px}
.browser__frame{display:block;width:100%;height:min(70vh,640px);border:0;background:#000}
.browser__shot{display:none;position:relative;background:#000}
.browser__shot img{display:block;width:100%;max-height:520px;object-fit:cover;object-position:top;opacity:.9}
.browser__shot .btn{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);white-space:nowrap}
@media(max-width:760px){.browser__frame{display:none}.browser__shot{display:block}}
.sample__cta{margin-top:18px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}

/* ---------- LEVEL UP 演出（集中線 + 中央スタンプ + 揺れ） ---------- */
.speed{position:fixed;inset:-20%;z-index:85;pointer-events:none;opacity:0;
  background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.16) 0deg 1.2deg,transparent 1.2deg 7deg);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 18%,#000 60%);mask-image:radial-gradient(circle at 50% 50%,transparent 18%,#000 60%)}
.speed.is-on{animation:speed .55s ease-out forwards}
@keyframes speed{0%{opacity:0;transform:scale(1.15) rotate(0)}15%{opacity:1}100%{opacity:0;transform:scale(1) rotate(6deg)}}
.lvup{position:fixed;left:50%;top:50%;z-index:86;pointer-events:none;transform:translate(-50%,-50%);text-align:center;opacity:0;white-space:nowrap}
.lvup__t{display:block;font-family:var(--en);font-size:clamp(56px,13vw,180px);line-height:.9;color:var(--ink);letter-spacing:.04em;
  -webkit-text-stroke:2px var(--red);text-shadow:0 0 30px rgba(209,10,30,.6),6px 6px 0 var(--red)}
.lvup__n{display:block;font-family:var(--en);font-size:clamp(40px,8vw,100px);line-height:1;margin-top:8px;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lvup__n small{font-size:.4em;margin-right:.1em}
.lvup.is-on{animation:lvup 1.1s var(--ease) forwards}
@keyframes lvup{0%{opacity:0;transform:translate(-50%,-50%) scale(2.2) rotate(-4deg)}18%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}70%{opacity:1;transform:translate(-50%,-52%) scale(1)}100%{opacity:0;transform:translate(-50%,-60%) scale(1.05)}}
.bit{position:fixed;z-index:87;width:6px;height:6px;pointer-events:none;background:var(--gold);animation:bit .9s cubic-bezier(.2,.8,.4,1) forwards}
.bit--r{background:var(--red)}
@keyframes bit{to{transform:translate(var(--dx),var(--dy)) rotate(540deg);opacity:0}}
@media(prefers-reduced-motion:reduce){.speed,.lvup,.bit{display:none}}

/* ---------- セールスレター要素（v5） ---------- */
.check{margin-top:30px;display:grid;gap:2px;border:1px solid var(--line);background:var(--line)}
.check li{background:var(--bg);padding:18px 22px 18px 58px;position:relative;font-weight:700;color:var(--ink);font-size:16px}
.check li::before{content:"✓";position:absolute;left:22px;top:50%;transform:translateY(-50%);font-family:var(--en);font-size:22px;color:var(--red)}
.ba{margin-top:34px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ba__col{border:1px solid var(--line);padding:26px 24px;background:var(--card)}
.ba__col--a{border-color:rgba(209,10,30,.6);position:relative}
.ba__col--a::before{content:"";position:absolute;inset:-1px;border:1px solid rgba(209,10,30,.35);pointer-events:none}
.ba__cap{display:block;font-family:var(--en);font-size:14px;letter-spacing:.3em;margin-bottom:14px;color:var(--muted)}
.ba__col--a .ba__cap{color:var(--red)}
.ba ul{display:grid;gap:10px}
.ba li{font-size:14.5px;line-height:1.7;padding-left:18px;position:relative;color:var(--body)}
.ba li::before{content:"—";position:absolute;left:0;color:var(--muted)}
.ba__col--a li{color:var(--ink)}
.ba__col--a li::before{content:"▶";color:var(--red);font-size:10px;top:.45em}
@media(max-width:760px){.ba{grid-template-columns:1fr}}
/* LV.68 このページ自体が実例: 赤枠 + 金の一文で目立たせる */
.sec--self{padding-top:0;padding-bottom:clamp(40px,6vw,72px)}
.self{position:relative;border:2px solid var(--red);padding:clamp(28px,5vw,56px) clamp(20px,5vw,56px);text-align:center;background:radial-gradient(ellipse 70% 80% at 50% 0%,rgba(209,10,30,.22),transparent 70%),var(--card);box-shadow:0 0 0 6px rgba(209,10,30,.08),0 30px 80px rgba(0,0,0,.5)}
.self::before,.self::after{content:"";position:absolute;width:18px;height:18px;border:2px solid var(--gold)}
.self::before{left:-2px;top:-2px;border-right:0;border-bottom:0}.self::after{right:-2px;bottom:-2px;border-left:0;border-top:0}
.self .lv{margin-bottom:14px}
.self__h{font-family:var(--min);font-weight:800;font-size:clamp(24px,3.6vw,44px);line-height:1.45;color:var(--ink);text-wrap:balance}
.self__h em{font-style:normal;color:var(--gold);font-family:var(--en);font-size:1.15em;letter-spacing:.04em}
.self__p{margin-top:16px;font-size:clamp(14px,1.3vw,16px);color:var(--body)}
@media(max-width:600px){.self__h br{display:none}}
.sec--mid{padding-top:clamp(56px,7vw,90px);padding-bottom:clamp(56px,7vw,90px);background:var(--bg2)}
.sec__in--center{text-align:center;display:grid;justify-items:center;gap:22px}
.mid__t{font-family:var(--min);font-size:clamp(20px,2.8vw,32px);color:var(--ink);line-height:1.5}
.notfor{margin-top:30px;display:grid;gap:12px}
.notfor li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;font-size:15px;color:var(--body);padding:14px 0;border-bottom:1px solid var(--line)}
.notfor b{font-family:var(--en);font-size:26px;line-height:1;color:var(--red)}
.how{margin-top:30px;display:grid;gap:2px;border:1px solid var(--line);background:var(--line)}
.how li{background:var(--bg);display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:center;padding:16px 20px}
.how b{font-family:var(--en);font-size:40px;line-height:1;color:var(--red);font-weight:400}
.how span{font-size:15px;color:var(--ink);font-weight:700}

/* ---------- セールスレター要素（v6） ---------- */
.sec--teaser{padding-top:clamp(48px,6vw,80px);padding-bottom:clamp(48px,6vw,80px);background:var(--bg2)}
.teaser{display:grid;gap:10px}
.teaser li{position:relative;padding:14px 0 14px 34px;border-bottom:1px solid var(--line);font-size:16px;font-weight:700;color:var(--ink);line-height:1.7}
.teaser li::before{content:"▶";position:absolute;left:4px;top:18px;font-size:11px;color:var(--red)}
.enemy{margin-top:26px;display:grid;gap:8px}
.enemy li{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:baseline;font-size:15px;color:var(--body);padding:12px 0;border-bottom:1px solid var(--line)}
.enemy b{font-family:var(--en);font-size:24px;color:var(--red);line-height:1}
.mech{margin-top:34px;display:grid;grid-template-columns:repeat(5,1fr);gap:2px;background:var(--line);border:1px solid var(--line)}
.mech li{background:var(--card);padding:22px 16px 20px;position:relative}
.mech__n{font-family:var(--en);font-size:13px;letter-spacing:.3em;color:var(--red)}
.mech h3{font-size:19px;font-weight:900;color:var(--ink);margin:6px 0 8px}
.mech h3 small{font-family:var(--en);font-size:14px;letter-spacing:.1em;color:var(--muted);margin-left:6px;font-weight:400}
.mech p{font-size:12.5px;line-height:1.7;color:var(--body)}
.mech__sum{margin-top:18px;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.mech__sum b{font-family:var(--en);font-size:clamp(28px,4vw,44px);color:var(--ink);font-weight:400;letter-spacing:.06em}
.mech__sum span{font-size:13px;color:var(--muted)}
.mech--4{grid-template-columns:repeat(4,1fr)}
.sec--quality{background:var(--bg2)}
.sec--quality .say{margin-top:40px}
@media(max-width:900px){.mech,.mech--4{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.mech{grid-template-columns:1fr}}
.story{margin-top:26px;display:grid;gap:18px;max-width:38em}
.story p{font-size:clamp(15px,1.3vw,17px);line-height:2}
.story p em{font-style:normal;color:var(--red)}
.proof{margin-top:34px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.proof li{border:1px solid var(--line);background:var(--card);padding-bottom:18px;transition:transform .35s var(--ease),border-color .3s}
.proof li:hover{transform:translateY(-6px);border-color:rgba(209,10,30,.6)}
.proof figure{margin:0;aspect-ratio:3/2;overflow:hidden}
.proof img{width:100%;height:100%;object-fit:cover;filter:saturate(.9);transition:transform .8s var(--ease)}
.proof li:hover img{transform:scale(1.06)}
.proof b{display:block;padding:16px 18px 2px;font-size:16px;color:var(--ink)}
.proof span{display:block;padding:0 18px;font-size:12px;color:var(--muted);letter-spacing:.06em}
@media(max-width:1000px){.proof{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.proof{grid-template-columns:1fr}}
.future{margin-top:34px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.future__col{padding:28px 26px;border:1px solid var(--line);background:var(--card)}
.future__col--o{border-color:rgba(209,10,30,.7);background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(209,10,30,.18),transparent 70%),var(--card)}
.future__cap{display:block;font-family:var(--en);font-size:22px;letter-spacing:.2em;margin-bottom:12px;color:var(--muted)}
.future__col--o .future__cap{color:var(--red)}
.future p{font-size:15px;line-height:1.9;color:var(--body)}
.future__col--o p{color:var(--ink)}
@media(max-width:760px){.future{grid-template-columns:1fr}}

/* ---------- FROM: 太字ラベル + 金の細線アイコン + ふわっと浮上 ---------- */
.sec--from .lv{font-family:var(--jp);font-weight:900;font-size:clamp(17px,2vw,22px);letter-spacing:.08em;color:var(--red)}
.from__icon{box-shadow:0 0 0 1px rgba(229,193,88,.9),0 0 0 7px #000,0 0 0 8px rgba(229,193,88,.45),0 24px 60px rgba(0,0,0,.75)}
html.motion .from__icon{opacity:0;transform:translateY(34px) scale(.92)}
html.motion .from__icon.is-in{animation:floatIn 1.4s var(--ease) forwards,floatLoop 5s ease-in-out 1.4s infinite}
@keyframes floatIn{0%{opacity:0;transform:translateY(34px) scale(.92);filter:blur(6px)}100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes floatLoop{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
html.motion .from__icon.is-in{transition:none}

/* ---------- LV.8 ティーザー: 全部太字 ---------- */
.sec--teaser .lv{font-family:var(--jp);font-weight:900;font-size:clamp(17px,2vw,22px);letter-spacing:.06em;color:var(--ink)}
.sec--teaser .lv::before{content:"LV.8 ";font-family:var(--en);font-weight:400;color:var(--red);letter-spacing:.2em;font-size:.95em}
.teaser li{font-weight:900;font-size:clamp(16px,1.6vw,19px);color:var(--ink)}

/* ---------- マスク見出しの切れ・重なり対策（日本語は行高を確保） ---------- */
.h2--big .mask{line-height:1.2;padding:.04em 0}
.h2--big em.mask{margin-top:.12em}

/* ---------- LV.45 SECRETS: 画像を敷いた3枚のパネル ---------- */
.secret{margin-top:36px;display:grid;gap:14px}
.secret__p{position:relative;min-height:clamp(220px,32vw,340px);border:1px solid var(--line);overflow:hidden;display:grid;align-items:end;padding:clamp(22px,3vw,36px);background:var(--card);transition:border-color .3s}
.secret__p:hover{border-color:rgba(209,10,30,.6)}
.secret__fig{position:absolute;inset:-12% 0;margin:0;z-index:0}
.secret__fig img{width:100%;height:100%;object-fit:cover;opacity:.55;filter:saturate(.85);transition:transform 1.2s var(--ease),opacity .6s}
.secret__p:hover .secret__fig img{opacity:.75;transform:scale(1.04)}
.secret__p::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.7) 45%,rgba(0,0,0,.15) 100%),linear-gradient(to top,rgba(0,0,0,.85),transparent 60%)}
.secret__p:nth-child(2){text-align:right;justify-items:end}
.secret__p:nth-child(2)::after{background:linear-gradient(270deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.7) 45%,rgba(0,0,0,.15) 100%),linear-gradient(to top,rgba(0,0,0,.85),transparent 60%)}
.secret__n{position:absolute;z-index:2;right:14px;top:-10px;font-family:var(--en);font-size:clamp(120px,18vw,220px);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(229,193,88,.35);pointer-events:none}
.secret__p:nth-child(2) .secret__n{right:auto;left:14px}
.secret__t{position:relative;z-index:2;max-width:32em}
.secret__t h3{font-size:clamp(24px,3.2vw,38px);font-weight:900;color:var(--ink);line-height:1.2;margin-bottom:8px}
.secret__t h3::before{content:"";display:inline-block;width:28px;height:3px;background:var(--red);margin-right:12px;vertical-align:.32em}
.secret__t p{font-size:14.5px;line-height:1.8;color:var(--body)}
@media(max-width:640px){.secret__p{min-height:260px}.secret__p:nth-child(2){text-align:left;justify-items:start}.secret__n{font-size:110px}}

/* ---------- PROOF: 実物へのリンク ---------- */
.proof__a{display:block;color:inherit}
.proof__open{display:block;padding:10px 18px 0;font-family:var(--en);font-size:13px;letter-spacing:.2em;color:var(--red);font-style:normal}
.proof li.is-nolink .proof__open{display:none}
.bonus{grid-template-columns:1fr}

/* スマホ: スムーススクロールを切る（勝手に動いて見えるのを防ぐ） */
@media(pointer:coarse){html{scroll-behavior:auto}}