/* ルカ【AIアフィリエイト攻略】LP — 黒×金×赤（ルパンさんの並びと密度を型として借り、色と絵はルカの物）
   2026-10-17 作り直し：画面の幅が変わっても改行の位置が変わらないように、文字・余白・飾りをすべて「列の幅」に比例させる。
   1u ＝ 幅430の画面での1px。列の幅（最大520）に合わせて同じ比で縮む・伸びる。改行は <br> で決め打ちし、行は折り返さない（.nb）。 */
:root{
  --bg:#0b0b0d; --ink:#1b1b1f; --text:#f6f1e7; --muted:#cfc6b6;
  --gold1:#fff6c9; --gold2:#ffe08a; --gold3:#e3a93a; --gold4:#9a6514;
  --red1:#ff4b4b; --red2:#d81f2a; --red3:#8e0d15;
  --navy1:#2b3f86; --navy2:#16224f; --green:#14b14a;
  --col:680px;   /* ルパンさんのページの中身の幅（画像の横680）と同じ所で止める（2026-10-17 オーナー） */
  --u:calc(min(100vw, 680px) / 430);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;font-weight:500;font-size:calc(var(--u)*16);line-height:1.7;letter-spacing:.02em;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:#0b0b0d url(/images/bg.webp) center/cover no-repeat;opacity:.9}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold2)}
b{font-weight:900}
p{margin:0}
.nb{white-space:nowrap}
.noscript-msg{display:none;padding:24px 16px;text-align:center;background:#300;color:#fff}

/* 状態ごとの見え方 */
.gate-page{display:none;max-width:520px;margin:0 auto;padding:calc(var(--u)*28) calc(var(--u)*16) calc(var(--u)*56);text-align:center;font-size:calc(var(--u)*15)}
.gate-page h1{font-size:calc(var(--u)*20);font-weight:900;line-height:1.6;margin:calc(var(--u)*18) 0 calc(var(--u)*10);color:var(--gold2)}
.gate-page p{margin:0 0 calc(var(--u)*8)}
.gate-poster{border:3px solid var(--gold3);border-radius:8px}
.line-btn{display:inline-block;margin-top:calc(var(--u)*12);padding:calc(var(--u)*14) calc(var(--u)*26);border-radius:999px;background:#06c755;color:#fff;font-weight:900;text-decoration:none;box-shadow:0 6px 0 #04893a}
body.is-guest .gate-guest,body.is-expired .gate-expired,body.is-error .gate-error{display:block}
body.is-guest .lp,body.is-expired .lp,body.is-error .lp{display:none}
body.is-guest .sticky,body.is-expired .sticky,body.is-error .sticky{display:none}

/* ===== 上（時計と動画） ===== */
.hero{max-width:var(--col);margin:0 auto;padding:calc(var(--u)*16) calc(var(--u)*14) calc(var(--u)*4);text-align:center}
.cd{display:flex;justify-content:center;gap:calc(var(--u)*10)}
.cd-box{width:calc(var(--u)*72);padding:calc(var(--u)*7) 0 calc(var(--u)*4);border-radius:calc(var(--u)*10);background:linear-gradient(180deg,#ffe9a6,#e3a93a 55%,#b9781c);box-shadow:0 calc(var(--u)*3) 0 #6b4308,inset 0 1px 0 #fff8d8;color:#3a0b0e}
.cd-box b{display:block;font-size:calc(var(--u)*28);line-height:1.1;font-weight:900;font-variant-numeric:tabular-nums}
.cd-box small{display:block;font-size:calc(var(--u)*12);font-weight:700}
.tap-call{margin:calc(var(--u)*12) 0 calc(var(--u)*10);font-weight:900;font-size:calc(var(--u)*21);line-height:1.5;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.6)}

/* 動画：映像は16:9。操作の帯は映像の下に別の場所を取って1列で置き、スライドの中身に重ねない
   （2026-08-31 ゼロワンで「操作バーが中身に重なって下が読めない」をオーナーが見つけた＝ナレッジ §10-4。
    2026-10-17 オーナー「ルパンの仕様（宴のプレイヤーのような形）に合わせて、再生を押したら…出るUIに」） */
:root{--bar:calc(var(--u)*40)}
.video-wrap{width:100%;max-width:100%;margin:0 auto;border:3px solid var(--gold3);border-radius:10px;overflow:hidden;box-shadow:0 0 0 2px #4a2d05,0 10px 30px rgba(0,0,0,.6),0 0 30px rgba(227,169,58,.25)}
.video-frame{position:relative;width:100%;height:0;padding-top:56.25%;background:#000;-webkit-user-select:none;user-select:none}
.video-frame video{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;background:#000}
/* 再生を押すまでは表紙だけ（下の黒い帯を出さない）。押したら映像の下に操作の帯の場所を取る */
.video-frame.has-started{padding-bottom:var(--bar)}
.video-frame.has-started video,.video-frame.has-started .play-cue{height:calc(100% - var(--bar))}
.video-frame:fullscreen{padding-top:0;padding-bottom:0;height:100%}
.video-frame:-webkit-full-screen{padding-top:0;padding-bottom:0;height:100%}
.play-cue{position:absolute;left:0;top:0;width:100%;height:100%;z-index:3;border:0;padding:0;background:rgba(0,0,0,.12);cursor:pointer;display:flex;align-items:center;justify-content:center}
.play-cue.off{display:none}
.play-cue.first .play-label{display:none}   /* 最初は上の「再生ボタンをタップ」と重なるので出さない。一時停止・終わりのときだけ出す */
.play-ring{position:absolute;width:calc(var(--u)*88);height:calc(var(--u)*88);border-radius:50%;border:3px solid rgba(255,224,138,.8);animation:ring 1.8s ease-out infinite}
.play-btn{position:relative;display:flex;align-items:center;justify-content:center;width:calc(var(--u)*74);height:calc(var(--u)*74);border-radius:50%;background:linear-gradient(180deg,#ffe9a6,#e3a93a 60%,#a96a12);color:#3a0b0e;box-shadow:0 6px 18px rgba(0,0,0,.55)}
.play-btn svg{width:48%;height:48%;margin-left:7%;fill:currentColor}
.play-label{position:absolute;left:50%;bottom:calc(var(--u)*10);transform:translateX(-50%);white-space:nowrap;padding:calc(var(--u)*3) calc(var(--u)*12);border-radius:999px;background:rgba(0,0,0,.72);color:#fff;font-weight:900;font-size:calc(var(--u)*13)}
@keyframes ring{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.6);opacity:0}}

.vc{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;align-items:center;gap:calc(var(--u)*2);height:var(--bar);padding:0 calc(var(--u)*4);background:linear-gradient(180deg,#1b1511,#0b0b0d);border-top:1px solid rgba(227,169,58,.4);color:#fff;font-size:calc(var(--u)*13);line-height:1}
.vc[hidden]{display:none}
.vc-btn{display:flex;align-items:center;justify-content:center;flex:none;min-width:calc(var(--u)*36);height:calc(var(--u)*36);padding:0 calc(var(--u)*3);border:0;background:none;color:#fff;cursor:pointer;font:inherit;font-weight:700}
.vc-btn svg{width:calc(var(--u)*23);height:calc(var(--u)*23);fill:currentColor}
.vc .i-pause,.vc .i-mute,.vc .i-fsx{display:none}
.vc.playing .i-play,.vc.muted .i-vol,.vc.fs .i-fs{display:none}
.vc.playing .i-pause,.vc.muted .i-mute,.vc.fs .i-fsx{display:block}
.vc-vol{display:flex;align-items:center;flex:none}
.vc-volbar{width:calc(var(--u)*64);margin:0 calc(var(--u)*4);accent-color:var(--gold2);cursor:pointer}
@media (hover:none){.vc-volbar{display:none}}
.vc-seek{position:relative;flex:1;min-width:calc(var(--u)*60);height:calc(var(--u)*30);margin:0 calc(var(--u)*8);cursor:pointer;touch-action:none;outline:none}
.vc-track{position:absolute;left:0;right:0;top:50%;height:calc(var(--u)*4);transform:translateY(-50%);border-radius:99px;background:rgba(255,255,255,.28);overflow:hidden;transition:height .15s}
.vc-seek:hover .vc-track,.vc-seek.drag .vc-track{height:calc(var(--u)*7)}
.vc-buf,.vc-played{position:absolute;left:0;top:0;bottom:0;width:0}
.vc-buf{background:rgba(255,255,255,.35)}
.vc-played{background:linear-gradient(90deg,var(--gold3),var(--gold2))}
.vc-thumb{position:absolute;top:50%;left:0;width:calc(var(--u)*14);height:calc(var(--u)*14);transform:translate(-50%,-50%);border-radius:50%;background:var(--gold2);box-shadow:0 0 0 calc(var(--u)*3) rgba(227,169,58,.35),0 1px 4px rgba(0,0,0,.6)}
.vc-time{flex:none;font-size:calc(var(--u)*11.5);font-variant-numeric:tabular-nums;white-space:nowrap;opacity:.95}
.vc-rate{position:relative;flex:none}
.vc-rate-btn{min-width:calc(var(--u)*50);height:calc(var(--u)*25);margin:0 calc(var(--u)*2) 0 calc(var(--u)*6);border:1px solid rgba(255,224,138,.65);border-radius:999px;font-size:calc(var(--u)*12);color:var(--gold2)}
.vc-menu{position:absolute;right:0;bottom:calc(100% + var(--u)*8);margin:0;padding:calc(var(--u)*4) 0;list-style:none;min-width:calc(var(--u)*92);max-height:calc(var(--u)*176);overflow-y:auto;border-radius:calc(var(--u)*10);background:rgba(16,14,12,.96);border:1px solid rgba(227,169,58,.6);box-shadow:0 8px 20px rgba(0,0,0,.6)}
.vc-menu[hidden]{display:none}
.vc-menu button{display:block;width:100%;padding:calc(var(--u)*3) calc(var(--u)*14);border:0;background:none;color:#fff;font:inherit;font-size:calc(var(--u)*13.5);line-height:1.25;font-weight:700;text-align:center;cursor:pointer}
.vc-menu button.on{color:#3a0b0e;background:linear-gradient(180deg,#ffe9a6,#e3a93a)}

/* ===== 申し込みボタン（ChatGPT で作った金のボタン）・鍵・締め切り ===== */
.cta-area{max-width:var(--col);margin:calc(var(--u)*14) auto calc(var(--u)*4);text-align:center}
.col>.cta-area,.sec .cta-area{padding:0 calc(var(--u)*20)}
.cta{position:relative;display:block;max-width:100%;margin:0 auto;text-decoration:none;animation:ctaPulse 1.4s ease-in-out infinite;will-change:transform}
.cta-img{display:block;width:100%;height:auto;filter:drop-shadow(0 10px 16px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(255,190,70,.35))}
.cta::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%) no-repeat;background-size:260% 100%;-webkit-mask:url(/images/cta.webp?v=2) center/100% 100% no-repeat;mask:url(/images/cta.webp?v=2) center/100% 100% no-repeat;animation:ctaShine 2.8s ease-in-out infinite}
@keyframes ctaShine{0%{background-position:130% 0}60%,100%{background-position:-30% 0}}
@keyframes ctaPulse{0%,100%{transform:scale(1)}45%{transform:scale(1.07)}60%{transform:scale(1.04)}}
@keyframes ctaPop{0%{transform:scale(.88)}45%{transform:scale(1.14)}70%{transform:scale(.97)}100%{transform:scale(1)}}
body.just-unlocked .cta{animation:ctaPop .9s cubic-bezier(.2,1.4,.4,1) 1,ctaPulse 1.4s ease-in-out .9s infinite}
.cta-sub{margin:calc(var(--u)*8) 0 0;font-size:calc(var(--u)*13);font-weight:700;color:var(--gold2)}
.slot-left{display:none;margin-left:calc(var(--u)*6);padding:0 calc(var(--u)*8);border-radius:999px;background:var(--red2);color:#fff;font-weight:900}
body.slots-low .slot-left{display:inline-block}
/* 鍵がかかっている間＝ボタンの上に「動画を最後まで見てね」・ボタンは暗くする */
.cta-lock-note{display:none;margin:0 0 calc(var(--u)*8);font-weight:900;font-size:calc(var(--u)*19);line-height:1.4;color:#fff;letter-spacing:.06em;text-shadow:0 2px 6px rgba(0,0,0,.65)}
.cta-lock-note span{display:inline-block;margin:0 calc(var(--u)*6);font-size:.92em}
body:not(.is-unlocked) .cta-lock-note{display:block}
body:not(.is-unlocked) .cta{animation:none}
body:not(.is-unlocked) .cta::after{display:none}
body:not(.is-unlocked) .cta-img{filter:grayscale(.85) brightness(.5) drop-shadow(0 8px 14px rgba(0,0,0,.6))}
body:not(.is-unlocked) .cta-sub{display:none}
.cta-closed{display:none;margin:calc(var(--u)*8) 0 0;padding:calc(var(--u)*14);border-radius:calc(var(--u)*12);background:rgba(0,0,0,.6);border:2px solid var(--gold3);color:#fff;font-weight:900;font-size:calc(var(--u)*15)}
.cta-closed small{font-weight:700;color:var(--muted);font-size:calc(var(--u)*12.5)}
body.slots-closed.is-unlocked .cta,body.slots-closed.is-unlocked .cta-sub{display:none}
body.slots-closed.is-unlocked .cta-closed{display:block}

/* ===== 下の並び ===== */
.col{max-width:var(--col);margin:0 auto;padding:calc(var(--u)*4) 0 0}
.sec{padding:calc(var(--u)*14) calc(var(--u)*20) calc(var(--u)*16);background:linear-gradient(180deg,rgba(11,11,13,0),rgba(11,11,13,.55) 10%,rgba(11,11,13,.55) 90%,rgba(11,11,13,0))}
.gold{background:linear-gradient(180deg,#fff6c9 0%,#ffe08a 38%,#e3a93a 62%,#fff0b3 86%,#c58a22 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #4a2d05) drop-shadow(0 0 8px rgba(255,200,80,.35))}

/* 赤い帯の見出し：両わきの金の飾りは大きく、頭（渦と葉）を文字の側に向ける（2026-10-17 オーナー「左右のロゴが小さすぎる」「逆に見える」） */
.band{position:relative;margin:calc(var(--u)*22) 0 0;padding:calc(var(--u)*12) calc(var(--u)*72);text-align:center;font-weight:900;font-size:calc(var(--u)*21);line-height:1.45;color:#fff;background:linear-gradient(180deg,#ff5145,#c81a25 55%,#8e0d15);border-top:calc(var(--u)*3) solid var(--gold3);border-bottom:calc(var(--u)*3) solid var(--gold3);box-shadow:0 6px 18px rgba(0,0,0,.5);text-shadow:0 2px 0 #4a0a0d,0 0 12px rgba(0,0,0,.35)}
.band::before,.band::after{content:"";position:absolute;top:50%;width:calc(var(--u)*62);height:calc(var(--u)*36);margin-top:calc(var(--u)*-18);background:url(/images/wing.webp) center/contain no-repeat;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45))}
.band::before{left:calc(var(--u)*5)}
.band::after{right:calc(var(--u)*5);transform:scaleX(-1)}
.band.navy{margin:0 0 calc(var(--u)*12);background:linear-gradient(180deg,#3a52a8,var(--navy1) 50%,var(--navy2))}
.wing{position:relative;margin:calc(var(--u)*18) 0 calc(var(--u)*12);text-align:center;font-weight:900;font-size:calc(var(--u)*25);line-height:1.4}
.wing::before,.wing::after{content:"";display:inline-block;width:calc(var(--u)*48);height:calc(var(--u)*30);vertical-align:middle;background:url(/images/wing.webp) center/contain no-repeat}
.wing::before{margin-right:calc(var(--u)*6)}
.wing::after{margin-left:calc(var(--u)*6);transform:scaleX(-1)}

/* 巻物の帯（ルカの実績の見出し・実績者の見出し）＝ ChatGPT で作った赤いリボンを9つに切り、文字の行の数に合わせて伸ばす
   （両端の巻きは形を保ち、真ん中の赤だけが伸びる。帯の外へ出る分は outset で、並びの幅には入らない） */
.scroll{position:relative;margin:calc(var(--u)*30) calc(var(--u)*10) calc(var(--u)*34);padding:calc(var(--u)*5) calc(var(--u)*4);border-style:solid;border-width:0;border-image-source:url(/images/ribbon.webp?v=1);border-image-slice:100 150 122 150 fill;border-image-width:calc(var(--u)*20) calc(var(--u)*30) calc(var(--u)*24.4) calc(var(--u)*30);border-image-outset:calc(var(--u)*20) calc(var(--u)*30) calc(var(--u)*24.4) calc(var(--u)*30);border-image-repeat:stretch;color:#fff;font-weight:900;font-size:calc(var(--u)*17);line-height:1.5;text-align:center;text-shadow:0 2px 0 rgba(74,10,13,.9),0 0 6px rgba(74,10,13,.6)}
.scroll.sm{font-size:calc(var(--u)*15)}
.scroll b{color:var(--gold2)}
.scroll .big{font-size:calc(var(--u)*20)}

.card-img{border-radius:calc(var(--u)*6);box-shadow:0 12px 26px rgba(0,0,0,.6)}
.card-wrap{position:relative}
.badge30{position:absolute;z-index:3;top:calc(var(--u)*-26);left:calc(var(--u)*-6);width:22%;max-width:150px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.55));animation:badgeSwing 3.2s ease-in-out infinite}
@keyframes badgeSwing{0%,100%{rotate:-8deg}50%{rotate:6deg}}
.chev{width:calc(var(--u)*40);height:calc(var(--u)*26);margin:calc(var(--u)*10) auto calc(var(--u)*4);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 30'%3E%3Cg fill='none' stroke='%23ffe08a' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4l16 10 16-10'/%3E%3Cpath d='M6 16l16 10 16-10'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}

/* 30名限定の特別なご案内（余白を詰める） */
.offer{text-align:center;padding-top:calc(var(--u)*24)}
.offer-lead{font-weight:900;font-size:calc(var(--u)*16)}
.offer-main{margin-top:calc(var(--u)*2);font-weight:700;font-size:calc(var(--u)*18);line-height:1.75}
.offer-main b{color:var(--gold2)}

/* チェックの並び */
.checks{list-style:none;margin:0;padding:0;text-align:left}
.checks li{position:relative;padding:calc(var(--u)*6) 0 calc(var(--u)*6) calc(var(--u)*38);font-weight:900;line-height:1.5}
.checks li::before{content:"✓";position:absolute;left:0;top:calc(var(--u)*6);width:calc(var(--u)*27);height:calc(var(--u)*27);border-radius:50%;background:var(--green);color:#fff;font-size:calc(var(--u)*15);line-height:calc(var(--u)*27);text-align:center;box-shadow:0 2px 0 rgba(0,0,0,.25)}
.checks.fire{padding:calc(var(--u)*10) calc(var(--u)*14);border-radius:calc(var(--u)*14);background:linear-gradient(160deg,#ff9a3c,#e83a3a 50%,#a5121b);border:calc(var(--u)*4) solid var(--gold3);box-shadow:inset 0 0 0 2px #fff0b3,0 10px 24px rgba(0,0,0,.5);color:#fff;font-size:calc(var(--u)*18);text-shadow:0 2px 2px rgba(0,0,0,.35)}
.checks.plain li,.checks.no li{font-size:calc(var(--u)*16.5);color:var(--ink)}
.checks.plain li::before{background:#f28a1d}
.checks.no li::before{content:"✕";background:#2c57c9}
.white-box{position:relative;padding:calc(var(--u)*12) calc(var(--u)*14);border-radius:calc(var(--u)*10);background:#fff;color:var(--ink);box-shadow:0 10px 24px rgba(0,0,0,.5)}
.white-box .checks{margin-right:calc(var(--u)*80)}
.box-luka{position:absolute;right:calc(var(--u)*-8);bottom:calc(var(--u)*-4);width:calc(var(--u)*100)}

/* 特典：上に大きな告知の絵、下はサムネを金の額縁に入れて並べるだけ（説明文は書かない） */
.gifts{text-align:center}
.pack{width:100%;margin:0 auto;filter:drop-shadow(0 14px 22px rgba(0,0,0,.55))}
.gift-total{margin:calc(var(--u)*8) 0 calc(var(--u)*12);font-weight:900;font-size:calc(var(--u)*29);line-height:1.4}
.gift-list{display:grid;gap:calc(var(--u)*14)}
.frame{padding:calc(var(--u)*4);border-radius:calc(var(--u)*8);background:linear-gradient(135deg,#fff0b3,#e3a93a 40%,#8a5a12 60%,#ffe08a);box-shadow:0 8px 18px rgba(0,0,0,.5)}
.frame img{border-radius:calc(var(--u)*5);background:#fff}
.frame.gift{padding:calc(var(--u)*5);box-shadow:0 0 0 calc(var(--u)*2) #4a2d05,inset 0 0 0 1px rgba(255,248,216,.8),0 10px 22px rgba(0,0,0,.55),0 0 18px rgba(255,190,70,.25)}

/* 流れ（文字を大きく・絵は小さく・詰める） */
.steps{list-style:none;margin:0;padding:calc(var(--u)*8) 0 0}
.steps li{position:relative;display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*14);margin:0 0 calc(var(--u)*22);padding:calc(var(--u)*10) calc(var(--u)*10) calc(var(--u)*10) calc(var(--u)*18);border-radius:calc(var(--u)*14);background:#fff;color:var(--ink);box-shadow:0 8px 18px rgba(0,0,0,.45)}
.steps li:last-child{margin-bottom:0}
.steps li:not(:last-child)::after{content:"";position:absolute;left:50%;bottom:calc(var(--u)*-19);margin-left:calc(var(--u)*-12);border:calc(var(--u)*12) solid transparent;border-top:calc(var(--u)*13) solid #f28a1d;border-bottom:0}
.steps .no{position:absolute;left:calc(var(--u)*-6);top:calc(var(--u)*-10);width:calc(var(--u)*34);height:calc(var(--u)*34);border-radius:50%;background:linear-gradient(180deg,#ffb04a,#f07a12);color:#fff;font-weight:900;font-size:calc(var(--u)*18);line-height:calc(var(--u)*34);text-align:center;box-shadow:0 3px 0 #a14d06}
.steps p{flex:none;font-weight:700;font-size:calc(var(--u)*20);line-height:1.5;text-align:left}
.steps b{font-weight:900;color:#c2121d}
.steps img{flex:none;width:calc(var(--u)*84);height:calc(var(--u)*80);object-fit:contain}

/* 実績 */
.proof{text-align:center}
.proof-head{margin:calc(var(--u)*14) 0 calc(var(--u)*10);font-weight:900;font-size:calc(var(--u)*34);line-height:1.35}
.bars{display:flex;align-items:flex-end;gap:calc(var(--u)*8);height:calc(var(--u)*230);margin:0 0 calc(var(--u)*6);padding:calc(var(--u)*12) calc(var(--u)*8) 0;border-radius:calc(var(--u)*12);background:rgba(0,0,0,.55);border:1px solid rgba(227,169,58,.5)}
/* 棒グラフの左上の余白に、しなって右上へ上がる矢印（2026-10-17 オーナー「しなった矢印がグインと上がっているようなイラスト」） */
.bars{position:relative}
.bars-arrow{position:absolute;left:3%;top:4%;width:44%;height:auto;pointer-events:none;filter:drop-shadow(0 calc(var(--u)*4) calc(var(--u)*8) rgba(0,0,0,.5))}
.bar{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%}
.bar i{display:block;width:72%;min-height:calc(var(--u)*3);border-radius:calc(var(--u)*6) calc(var(--u)*6) 0 0;background:linear-gradient(180deg,#ffe08a,#e3a93a 60%,#a96a12)}
.bar.zero i{min-height:0;height:0!important}
.bar.top i{background:linear-gradient(180deg,#ff6b5e,#d81f2a 60%,#8e0d15);box-shadow:0 0 18px rgba(255,90,70,.6)}
.bar .amt{font-size:calc(var(--u)*11);font-weight:900;color:#fff;white-space:nowrap;margin-bottom:calc(var(--u)*4)}
.bar.top .amt{font-size:calc(var(--u)*12);color:var(--gold2)}
.bar .mon{margin:calc(var(--u)*6) 0 calc(var(--u)*8);font-size:calc(var(--u)*12);font-weight:700;color:var(--muted)}
.shots{display:grid;gap:calc(var(--u)*8)}
.shots.daily,.shots.views{grid-template-columns:1fr 1fr}
.shots.views img:first-child{grid-column:1/-1}
.shots img{border-radius:calc(var(--u)*6);border:2px solid var(--gold3);background:#fff}
.proof-note{margin:calc(var(--u)*12) 0 0;font-weight:900;font-size:calc(var(--u)*16);line-height:1.7}

/* 実績者（画像は1枚ずつ大きく） */
.doers{text-align:center}
.doers-lead{margin:calc(var(--u)*2) 0 calc(var(--u)*2);font-weight:900;font-size:calc(var(--u)*17)}
.doer{margin:0 0 calc(var(--u)*10)}
.doer .frame+.frame{margin-top:calc(var(--u)*12)}
.doer-text{margin:calc(var(--u)*8) 0 calc(var(--u)*12);font-weight:700;font-size:calc(var(--u)*16);line-height:1.75}
.doer-text b{color:var(--gold2)}

/* 締め */
.closing{text-align:center}
.down{display:flex;align-items:center;gap:calc(var(--u)*6);margin:0 0 calc(var(--u)*12)}
.down img{width:calc(var(--u)*100);flex:none}
.down p{font-weight:700;font-size:calc(var(--u)*17);line-height:1.8;text-align:left}
.down b{color:var(--gold2)}
.closing-main{margin:calc(var(--u)*2) 0 calc(var(--u)*12);font-weight:700;font-size:calc(var(--u)*18);line-height:1.8}
.closing-main b{color:var(--gold2)}
.bubble{position:relative;display:inline-block;margin:0 0 calc(var(--u)*12);padding:calc(var(--u)*9) calc(var(--u)*24);border-radius:calc(var(--u)*14);background:#fff;color:var(--ink);font-weight:900;font-size:calc(var(--u)*21)}
.bubble::after{content:"";position:absolute;left:50%;bottom:calc(var(--u)*-11);margin-left:calc(var(--u)*-10);border:calc(var(--u)*10) solid transparent;border-top:calc(var(--u)*12) solid #fff;border-bottom:0}

.foot{padding:calc(var(--u)*14) calc(var(--u)*16) calc(var(--u)*26 + env(safe-area-inset-bottom));text-align:center;font-size:calc(var(--u)*12.5);color:var(--muted)}
.foot p{margin:0 0 calc(var(--u)*3)}

/* 右下に付いてくるボタン（鍵が開いたあとだけ） */
.sticky{position:fixed;right:12px;bottom:max(14px,env(safe-area-inset-bottom));z-index:20;display:none;padding:12px 16px;border-radius:16px;background:linear-gradient(180deg,#ff5a4d,#c2121d);color:#fff;font-weight:900;font-size:14px;line-height:1.35;text-align:center;text-decoration:none;box-shadow:0 0 0 3px #e3a93a,0 8px 20px rgba(0,0,0,.55);transform:translateY(160%);transition:transform .35s}
body.is-unlocked:not(.slots-closed) .sticky{display:block}
.sticky.shown{transform:none}
.toast{position:fixed;left:5vw;bottom:90px;z-index:30;width:90vw;padding:10px 14px;border-radius:12px;background:rgba(0,0,0,.88);border:1px solid var(--gold3);color:#fff;font-weight:700;font-size:14px;text-align:center}
.toast[hidden]{display:none}

/* 下から浮き上がる（取りこぼしは js の掃除で拾う） */
.rise{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}.cta,.badge30,.play-ring{animation:none}.cta::after{display:none}}