/* LP 3D演出キット v1（BUZZ MEET）。ライブラリなし・CSSの3Dだけ。色は各LPの :root で --kit-* を上書きする
   見せ場の部品：stage（3Dで傾く端末）／pop（奥行きのある吹き出し）／fan（カードの扇）／deck（デッキ展開）
   rise（奥から起き上がる）／ticker（流れる帯）／float（ハート・星が浮かぶ）／steps（線が伸びる）／shine（ボタンの光）／wave（波の区切り）／tilt-card（指・マウスで傾くカード） */
:root{--kit-accent:#5a68ec;--kit-accent-d:#3f4bd0;--kit-sub:#f6a6c6;--kit-gold:#ffd77a;--kit-ink:#2b2d52;
  --kit-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c1 7 5 11 12 12-7 1-11 5-12 12-1-7-5-11-12-12 7-1 11-5 12-12z'/%3E%3C/svg%3E");
  --kit-heart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5.2-8-11a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 10c0 5.8-8 11-8 11z'/%3E%3C/svg%3E")}
html,body{overflow-x:clip}

/* 端末が3Dで傾く（スクロール・マウスで --rx/--ry が変わる） */
.k-stage{position:relative;perspective:1100px}
.k-tilt{position:relative;transform-style:preserve-3d;transform:rotateX(calc(8deg + var(--rx,0deg))) rotateY(calc(-16deg + var(--ry,0deg))) rotateZ(2deg);transition:transform .25s ease-out}
.k-tilt>.k-z1{transform:translateZ(90px)}.k-tilt>.k-z2{transform:translateZ(130px)}.k-tilt>.k-z3{transform:translateZ(160px)}
.k-floor{position:absolute;left:10%;right:10%;bottom:-26px;height:30px;background:radial-gradient(closest-side,rgba(0,0,0,.18),transparent);filter:blur(4px)}
/* ふわふわ上下 */
.k-bob{animation:k-bob 3.2s ease-in-out infinite}
@keyframes k-bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
.k-fl{animation:k-fl 5s ease-in-out infinite}
@keyframes k-fl{0%,100%{translate:0 0}50%{translate:0 -8px}}

/* カードの扇（.in で開く） */
.k-fan{display:flex;justify-content:center;perspective:1000px}
.k-fan>*{width:38%;transition:transform 1.1s cubic-bezier(.2,.8,.2,1);transform-origin:50% 120%}
.k-fan>:nth-child(1){transform:translateX(60%)}.k-fan>:nth-child(2){position:relative;z-index:2;transform:translateZ(40px)}.k-fan>:nth-child(3){transform:translateX(-60%)}
.k-fan.in>:nth-child(1){transform:rotateY(22deg) rotateZ(-10deg) translateX(14%)}
.k-fan.in>:nth-child(2){transform:translateZ(60px) translateY(-10px)}
.k-fan.in>:nth-child(3){transform:rotateY(-22deg) rotateZ(10deg) translateX(-14%)}

/* デッキ展開（2×2。重なった状態から四方へ） */
.k-deck{display:grid;grid-template-columns:1fr 1fr;gap:12px;perspective:1000px}
.k-deck>*{transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .9s}
.js .k-deck>*{transform:translate(var(--dx),var(--dy)) rotateX(55deg) rotateZ(var(--dz));opacity:0}
.k-deck>:nth-child(1){--dx:52%;--dy:52%;--dz:-8deg}.k-deck>:nth-child(2){--dx:-52%;--dy:52%;--dz:8deg;transition-delay:.08s}
.k-deck>:nth-child(3){--dx:52%;--dy:-52%;--dz:6deg;transition-delay:.16s}.k-deck>:nth-child(4){--dx:-52%;--dy:-52%;--dz:-6deg;transition-delay:.24s}
.js .k-deck.in>*{transform:none;opacity:1}

/* 表示時：下からふわっと／奥から起き上がる */
.js .k-rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.js .k-rise{opacity:0;transform:rotateX(-70deg);transform-origin:50% 100%;transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.k-rise-wrap{perspective:900px}
.js .k-rv.in,.js .k-rise.in{opacity:1;transform:none}
.js .k-rise:nth-child(2){transition-delay:.1s}.js .k-rise:nth-child(3){transition-delay:.2s}.js .k-rise:nth-child(4){transition-delay:.3s}

/* 流れる帯 */
.k-ticker{overflow:hidden;white-space:nowrap;padding-block:12px;transform:rotate(-2deg);margin-inline:-4%;position:relative;z-index:3}
.k-ticker>div{display:inline-flex;gap:28px;padding-right:28px;animation:k-mq 26s linear infinite;font-weight:900}
@keyframes k-mq{to{transform:translateX(-100%)}}

/* ハート・星が下から浮かぶ（親に position:relative） */
.k-float{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.k-float i{position:absolute;bottom:-30px;width:16px;height:16px;background:var(--kit-sub);-webkit-mask:var(--kit-heart) center/contain no-repeat;mask:var(--kit-heart) center/contain no-repeat;opacity:0;animation:k-up 9s linear infinite}
.k-float i.s{background:var(--kit-gold);-webkit-mask-image:var(--kit-star);mask-image:var(--kit-star)}
.k-float i:nth-child(1){left:6%}.k-float i:nth-child(2){left:24%;animation-delay:2.4s;width:11px;height:11px}.k-float i:nth-child(3){left:58%;animation-delay:4.2s}
.k-float i:nth-child(4){left:82%;animation-delay:1.2s}.k-float i:nth-child(5){left:92%;animation-delay:6s;width:10px;height:10px}.k-float i:nth-child(6){left:40%;animation-delay:7.4s;width:9px;height:9px}
@keyframes k-up{0%{transform:translateY(0) rotate(-10deg);opacity:0}10%{opacity:.85}50%{transform:translateY(-55vh) translateX(14px) rotate(8deg)}100%{transform:translateY(-110vh) translateX(-10px) rotate(-6deg);opacity:0}}
.k-spark{position:absolute;width:14px;height:14px;background:var(--kit-gold);-webkit-mask:var(--kit-star) center/contain no-repeat;mask:var(--kit-star) center/contain no-repeat;animation:k-tw 3s ease-in-out infinite}
@keyframes k-tw{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.1)}}

/* ステップの線が上から伸びる */
.k-steps{position:relative}
.k-steps::before{content:"";position:absolute;left:27px;top:24px;bottom:24px;width:3px;border-radius:3px;background:linear-gradient(var(--kit-accent),var(--kit-sub));transform-origin:top;transition:transform 1.2s ease}
.js .k-steps::before{transform:scaleY(0)}.js .k-steps.in::before{transform:none}

/* ボタンに光が走る */
.k-shine{position:relative;overflow:hidden;isolation:isolate}
.k-shine::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-120%);animation:k-sh 3.6s ease-in-out infinite;z-index:-1}
@keyframes k-sh{0%,55%{transform:translateX(-120%)}80%,100%{transform:translateX(120%)}}

/* 指・マウスで傾くカード（JSが --tx/--ty を入れる） */
.k-tc{transform:perspective(800px) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg));transition:transform .2s ease-out;transform-style:preserve-3d}

/* 波の区切り（section の先頭に置く。色は style="color:" で前のセクションの色） */
.k-wave{position:absolute;left:0;right:0;top:-45px;height:46px;width:100%;display:block}.k-wave path{fill:currentColor}

/* 動きを減らす設定では、全部止めて最初から見せる */
@media (prefers-reduced-motion:reduce){
  .k-bob,.k-fl,.k-ticker>div,.k-float i,.k-spark,.k-shine::after{animation:none!important}
  .js .k-rv,.js .k-rise,.js .k-deck>*{opacity:1!important;transform:none!important;transition:none!important}
  .js .k-steps::before{transform:none}.k-tilt,.k-tc{transition:none}
}

/* 離脱ポップアップ（オプション）。<div class="k-exit" hidden> の中に .k-exit-box を置く */
.k-exit{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px;background:rgba(20,18,50,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.k-exit[hidden]{display:none}
.k-exit-box{position:relative;width:min(100%,380px);background:#fff;border-radius:24px;padding:28px 22px 22px;text-align:center;box-shadow:0 30px 60px rgba(0,0,0,.3);animation:k-pop .5s cubic-bezier(.2,.8,.2,1.3)}
.k-exit-x{position:absolute;right:10px;top:10px;width:44px;height:44px;border:0;border-radius:50%;background:#f1f1f6;font-size:22px;cursor:pointer}
@keyframes k-pop{from{transform:perspective(800px) rotateX(30deg) scale(.85);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.k-exit-box{animation:none}}

/* ===== r1学習（2026-10-12・美容/士業・不動産）で足した部品 ===== */
/* 〇つの約束・損なし宣言のカード */
.k-promise{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.k-promise>*{background:#fff;border:2px solid var(--kit-accent);border-radius:16px;padding:14px 14px 12px;position:relative;font-weight:700}
.k-promise>*::before{content:"";display:block;width:26px;height:26px;margin-bottom:6px;border-radius:50%;background:var(--kit-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12l4 4 8-8' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
/* ボタンの3段：上に安心の一言・ボタン・下に小さい注記 */
.k-cta3{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.k-cta3 .k-pre{font-weight:700;font-size:14px;display:inline-flex;gap:6px;align-items:center}
.k-cta3 .k-pre::before,.k-cta3 .k-pre::after{content:"";width:14px;height:2px;background:currentColor;transform:rotate(55deg)}
.k-cta3 .k-pre::after{transform:rotate(-55deg)}
.k-cta3 .k-note{font-size:12px;opacity:.8}
/* 所要時間つきの番号ステップ（.k-steps と一緒に） */
.k-time{display:inline-block;margin-left:6px;font-size:12px;font-weight:700;background:var(--kit-gold);color:var(--kit-ink);border-radius:999px;padding:0 8px}
/* 1枚目の丸バッジ（3つまで） */
.k-badges{display:flex;gap:10px;flex-wrap:wrap}
.k-badges>*{width:86px;height:86px;border-radius:50%;display:grid;place-items:center;text-align:center;font-weight:900;font-size:13px;line-height:1.3;background:#fff;border:3px solid var(--kit-accent);box-shadow:0 6px 14px rgba(0,0,0,.08);padding:6px}
/* 「追加料金0円」の一覧 */
.k-zero{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.k-zero>*{display:flex;justify-content:space-between;align-items:center;background:#fff;border-radius:12px;padding:10px 12px;font-weight:700}
.k-zero>*::after{content:"0円";color:var(--kit-accent);font-weight:900}
/* 前後を比べるスライダー：<div class="k-ba"><img 後><img class="k-ba-before" 前><input type="range"></div> */
.k-ba{position:relative;overflow:hidden;border-radius:16px;--p:50%}
.k-ba img{display:block;width:100%}
.k-ba .k-ba-before{position:absolute;inset:0;height:100%;object-fit:cover;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.k-ba::after{content:"";position:absolute;top:0;bottom:0;left:var(--p);width:3px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.15);pointer-events:none}
.k-ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
/* 固定の下部バー（電話＋Web） */
.k-bar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:1fr 1.4fr;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.95);box-shadow:0 -4px 14px rgba(0,0,0,.08)}
@media (min-width:900px){.k-bar{display:none}}
/* PC専用の2ペイン（左に固定の絵・右に縦の列） */
@media (min-width:900px){.k-2pane{display:grid;grid-template-columns:1fr 480px;min-height:100vh}.k-2pane>.k-2pane-art{position:sticky;top:0;height:100vh;overflow:hidden}.k-2pane>.k-2pane-art>img{width:100%;height:100%;object-fit:cover}}

/* ===== r3学習（2026-10-13・Xで紹介された実物LP16本「見た目の手本棚」）で足した部品 ===== */
/* 開幕の幕：FVは裏で先に描かれていて、上にかぶせた幕が1秒以内に開くだけ（LCPを遅らせない） */
.k-curtain{position:fixed;inset:0;z-index:99;background:var(--kit-curtain,#f7f1e6);display:grid;place-items:center;pointer-events:none;animation:k-curtain .9s cubic-bezier(.7,0,.2,1) .25s forwards}
.k-curtain>*{animation:k-curtain-in .5s ease forwards}
@keyframes k-curtain{to{clip-path:inset(0 0 100% 0)}}
@keyframes k-curtain-in{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
/* 写真を有機的な形に切り抜く（丸・ちぎり・しずく） */
.k-blob{border-radius:62% 38% 55% 45%/48% 58% 42% 52%;overflow:hidden}
.k-blob.alt{border-radius:42% 58% 38% 62%/58% 42% 58% 42%}
.k-tear{clip-path:polygon(0 4%,8% 0,22% 3%,37% 0,52% 2%,66% 0,81% 3%,93% 0,100% 5%,98% 22%,100% 40%,97% 58%,100% 76%,98% 92%,100% 100%,84% 97%,68% 100%,52% 97%,36% 100%,20% 97%,6% 100%,0 95%,2% 78%,0 60%,3% 42%,0 24%)}
/* 縦書きの短いコピー（帯） */
.k-tate{writing-mode:vertical-rl;text-orientation:upright;font-weight:900;letter-spacing:.12em;line-height:1.6}
.k-tate.band{background:var(--kit-accent);color:#fff;padding:14px 8px;border-radius:999px}
/* 素材の形の境界（セクションの上に置く。色は style="color:" で次のセクションの色） */
.k-edge{display:block;width:100%;height:36px;margin-bottom:-1px}
.k-edge path{fill:currentColor}
/* 背景の巨大な薄い英字 */
.k-bigword{position:absolute;inset:auto 0 0 0;font-size:clamp(64px,18vw,200px);font-weight:900;line-height:.9;color:currentColor;opacity:.06;white-space:nowrap;pointer-events:none;overflow:hidden}
@media (prefers-reduced-motion:reduce){.k-curtain{display:none}}

/* ===== 驚きの見せ場（2026-10-14）。1ページに1つ、最初の2画面以内に置き、親に data-wow を付ける ===== */
/* スクロールで3Dの主役が起き上がる：.k-scene > .k-scene-pin > .k-scene-obj（＋.k-scene-step[data-at="0.4"] が順に出る）。JSが --p(0→1) を入れる */
.k-scene{position:relative;height:var(--scene-h,200vh)}
.k-scene-pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center;overflow:hidden;perspective:1200px}
.k-scene-obj{transform-style:preserve-3d;transform:translateZ(calc(-260px + var(--p,0) * 260px)) rotateY(calc(-38deg + var(--p,0) * 38deg)) rotateX(calc(20deg - var(--p,0) * 20deg));will-change:transform}
.k-scene-step{opacity:0;transform:translateY(24px);transition:opacity .5s,transform .5s cubic-bezier(.2,.8,.2,1)}
.k-scene-step.on{opacity:1;transform:none}
/* 巨大な文字に色が流れる＋下から現れる */
.k-mask{display:block;font-size:clamp(56px,14vw,180px);font-weight:900;line-height:1;letter-spacing:-.02em;background:var(--mask-bg,linear-gradient(100deg,var(--kit-accent),var(--kit-sub),var(--kit-gold),var(--kit-accent)));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:k-mask 8s linear infinite}
.js .k-mask[data-in]{clip-path:inset(100% 0 0 0);transition:clip-path 1s cubic-bezier(.7,0,.2,1)}
.js .k-mask[data-in].in{clip-path:inset(0)}
@keyframes k-mask{to{background-position:300% 0}}
/* 3Dで回るカードの輪：.k-orbit > .k-orbit-ring > 子（style="--i:0..n-1"、輪に --n） */
.k-orbit{position:relative;width:var(--orbit,280px);aspect-ratio:1;margin-inline:auto;perspective:1000px}
.k-orbit-ring{position:absolute;inset:0;transform-style:preserve-3d;animation:k-orbit 24s linear infinite}
.k-orbit-ring>*{position:absolute;left:50%;top:50%;width:var(--orbit-card,120px);margin-left:calc(var(--orbit-card,120px) / -2);translate:0 -50%;transform:rotateY(calc(var(--i) * 360deg / var(--n,6))) translateZ(calc(var(--orbit,280px) * .62));backface-visibility:hidden}
.k-orbit:hover .k-orbit-ring{animation-play-state:paused}
@keyframes k-orbit{to{transform:rotateY(-360deg)}}
/* 見出しが1文字ずつ奥から起き上がる（JSが文字を分ける。読み上げは元の文） */
.k-split .c{display:inline-block;transform-origin:50% 100%}
.js .k-split .c{opacity:0;transform:translateY(.5em) rotateX(-75deg);transition:opacity .5s,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--d) * 35ms)}
.js .k-split.in .c{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .k-scene{height:auto}.k-scene-pin{position:relative;height:auto;padding-block:48px}.k-scene-obj{transform:none}
  .js .k-scene-step,.js .k-split .c{opacity:1!important;transform:none!important;transition:none!important}
  .k-mask,.k-orbit-ring{animation:none}.js .k-mask[data-in]{clip-path:none}
}