/* ═══════════════════════════════════════════════
   pointpay 集客LP ／ スマホ専用・アプリSNS世界観（Hero=エンタメ振り切り版）
   ▼原則：約束・条件は正直に守る／表現・演出は極限まで攻める
   ▼共通の骨（Hero/3ステップ/額面/価値/FAQ/3ログイン登録）＋データ駆動CARD
   ═══════════════════════════════════════════════ */
:root{
  --brand:#00C4A7;
  --g1:#6C4CFF; --g2:#A24BFF; --g3:#FF6BA6;
  --bg:#faf9ff; --surface:#ffffff; --ink:#221a3a; --muted:#6b6488;
  --pink01:#fc3478; --pink02:#fd82ab;
  --accent:#7C4DFF; --line:#eee9fc; --radius:16px;
  --bounce:cubic-bezier(.34,1.56,.64,1);
  --font:"Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);line-height:1.7;-webkit-font-smoothing:antialiased;
  background:#fff;min-height:100vh;color:var(--ink)}
.app{max-width:440px;margin:0 auto;min-height:100vh;}
@media(min-width:480px){ .app{margin:24px auto;min-height:calc(100vh - 48px);border-radius:34px} }
/*section{padding:38px 22px}*/
h2{font-size:1.5rem;text-align:center;margin-bottom:6px;letter-spacing:.01em;font-weight:900}
.sec-sub{text-align:center;color:var(--muted);margin-bottom:26px;font-size:.9rem}


.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  background:linear-gradient(120deg,var(--g1),var(--g2) 55%,var(--g3));color:#fff;font-weight:900;
  font-size:1.08rem;padding:17px 24px;border-radius:16px;text-decoration:none;border:none;cursor:pointer;
  box-shadow:0 12px 26px rgba(108,76,255,.38);transition:transform .18s var(--bounce),box-shadow .18s}
.btn:active{transform:scale(.96)}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 34px rgba(108,76,255,.46)}
.btn::before{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);
  animation:shine 5s ease-in-out infinite}
@keyframes shine{0%,55%{left:-70%}78%,100%{left:130%}}
/*.reveal{opacity:0;transform:translateY(22px) scale(.98);transition:opacity .6s,transform .6s var(--bounce)}
.reveal.on{opacity:1;transform:none}*/

/* ── Hero（エンタメ振り切り） ── */
.hero{position:relative;padding:34px 22px 48px;color:#fff;text-align:center;overflow:hidden;
  background:linear-gradient(135deg,var(--g1),var(--g2),var(--g3),var(--g2),var(--g1));
  background-size:300% 300%;animation:heroShift 15s ease infinite}
@keyframes heroShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.hero::after{content:"";position:absolute;left:-30%;bottom:-40%;width:160%;height:70%;
  background:radial-gradient(closest-side,rgba(255,255,255,.22),transparent);pointer-events:none}
.spark{position:absolute;color:#fff;pointer-events:none;filter:drop-shadow(0 0 4px rgba(255,255,255,.7));
  animation:twinkle 2.6s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.6)}50%{opacity:1;transform:scale(1.15)}}
.badge{position:relative;z-index:2;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.2);color:#fff;
  font-weight:800;font-size:.76rem;padding:7px 15px;border-radius:999px;margin-bottom:16px;backdrop-filter:blur(4px)}
.hero h1{position:relative;z-index:2;font-size:clamp(1.8rem,8vw,2.35rem);line-height:1.24;letter-spacing:.01em;text-shadow:0 2px 14px rgba(0,0,0,.14)}
.hero-sub{position:relative;z-index:2;margin-top:10px;font-size:.98rem;font-weight:700;opacity:.96}
.hero-sub b{font-weight:900}
.hero p.lead{position:relative;z-index:2;opacity:.96;margin:14px 0 24px;font-size:.96rem}

/* カード：浮遊＋タップでめくれる＋光が走る */
.card-stage{position:relative;z-index:2;width:252px;margin:8px auto 8px;perspective:1100px;animation:float 4.6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
.card-flip{position:relative;width:100%;aspect-ratio:1.55/1;transform-style:preserve-3d;
  transition:transform .8s var(--bounce);cursor:pointer}
.card-flip.flipped{transform:rotateY(180deg)}
.card-face{position:absolute;inset:0;border-radius:20px;padding:18px;backface-visibility:hidden;
  overflow:hidden;box-shadow:0 24px 46px rgba(30,16,60,.4)}
.card-front{background:linear-gradient(135deg,#ffffff,#f3eeff);color:#241a3a;text-align:left}
.card-back{background:linear-gradient(140deg,#2a1e52,#4a2f86);color:#fff;text-align:center;transform:rotateY(180deg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.play-badge{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:conic-gradient(from 210deg,#00E0B8,#00A9F4,#7C4DFF,#FF5C9A,#FFC24B,#00E0B8);box-shadow:0 6px 14px rgba(0,0,0,.16)}
.play-badge::after{content:"";width:0;height:0;border-style:solid;border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent #fff;margin-left:4px}
.card-front .cm-brand{font-weight:900;font-size:1.2rem;margin-top:12px;line-height:1.15}
.card-front .cm-brand b{color:var(--brand)}
.card-front .cm-label{display:inline-block;margin-top:4px;background:var(--accent);color:#fff;font-size:.74rem;font-weight:900;padding:3px 10px;border-radius:999px}
.cm-get{position:absolute;top:14px;right:14px;z-index:3;background:linear-gradient(120deg,var(--g1),var(--g3));
  color:#fff;font-weight:900;font-size:.66rem;padding:4px 10px;border-radius:999px}
.card-back .cb-yen{font-size:1.18rem;font-weight:900;letter-spacing:.01em;white-space:nowrap}
.card-back .cb-sub{font-size:.82rem;opacity:.9}
.card-shine{position:absolute;top:0;left:-60%;width:38%;height:100%;pointer-events:none;transform:skewX(-18deg);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:shine 4.6s ease-in-out infinite}
/* 見せ場の一撃：コイン降り注ぎ＋解放！＋数字ポップ */
.coin-layer{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:hidden}
.coin{position:absolute;top:-10%;will-change:transform,opacity;filter:drop-shadow(0 3px 4px rgba(0,0,0,.18));animation:coinFall 1.1s cubic-bezier(.4,.2,.7,1) forwards}
.coin svg{display:block;width:100%;height:100%}
@keyframes coinFall{0%{opacity:0;transform:translateY(0) rotate(0)}12%{opacity:1}100%{opacity:0;transform:translateY(380px) rotate(320deg)}}
.released{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);z-index:6;font-weight:900;font-size:1.7rem;color:#fff;
  text-shadow:0 3px 16px rgba(0,0,0,.28);opacity:0;pointer-events:none;white-space:nowrap}
.released.go{animation:releaseFx 1.05s var(--bounce)}
@keyframes releaseFx{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}28%{opacity:1;transform:translate(-50%,-64%) scale(1.12)}100%{opacity:0;transform:translate(-50%,-96%) scale(1)}}
.pop{animation:pop .5s var(--bounce)}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.32)}100%{transform:scale(1)}}
/* めくった"その瞬間"に出る 即登録ブロック */
.hero-signup{position:relative;z-index:3;max-height:0;opacity:0;overflow:hidden;display:flex;flex-direction:column;gap:9px;
  max-width:320px;margin:0 auto;transition:max-height .6s var(--bounce),opacity .45s,margin .4s}
.hero-signup.show{max-height:360px;opacity:1;margin:12px auto 2px}
.hero-signup .hs-line{font-size:.92rem;font-weight:800;margin-bottom:2px}
.hero-signup .hs-line b{text-decoration:underline;text-underline-offset:3px}
.tap-hint{position:relative;z-index:2;font-size:.76rem;opacity:.85;margin:2px 0 18px;animation:bob 1.7s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
.tap-hint.gone{opacity:0;transition:opacity .4s}
.trust{position:relative;z-index:2;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.trust span{display:inline-flex;align-items:center;gap:5px;font-size:.76rem;font-weight:800;background:rgba(255,255,255,.16);padding:7px 12px;border-radius:999px}


/* ── mv ── */
#sec-mv{
  padding: 0;
  position: relative;
}
img.mv{width: 100%; vertical-align: bottom; }

/* ── mv：初回アクセス時のオープニング動画（ヒーローの枠＝mv.jpgと同じ範囲に重ねる） ── */
#sec-mv .mv-intro{
  position:absolute; inset:0; z-index:40; overflow:hidden;
  background:#0b1633;
  transition:opacity .6s ease;
}
#sec-mv .mv-intro[hidden]{ display:none; }
#sec-mv .mv-intro.is-done{ opacity:0; pointer-events:none; }
#sec-mv .mv-intro-video{
  display:block; width:100%; height:100%; object-fit:cover;
}
#sec-mv .mv-intro-skip{
  position:absolute; top:12px; right:12px;
  padding:6px 12px; border:0; border-radius:999px;
  background:rgba(0,0,0,.45); color:#fff;
  font-size:.78rem; font-weight:700; line-height:1; cursor:pointer;
}

/* ── mv：カードを画像の空きスペースに中央寄せ配置 ── */
/* 幅はvw基準にして、どの画面幅でも同じサイズ感になるように統一 */
#sec-mv .mv-focus{
  position:absolute; top:61.5%; left:50%; margin:0; z-index:32;
  transform:translate(-50%,-50%);
  animation:mvFloat 4.6s ease-in-out infinite;
}
@keyframes mvFloat{
  0%,100%{transform:translate(-50%,-50%)}
  50%{transform:translate(-50%,calc(-50% - 11px))}
}

/* 90%達成と同時に、カードを中心にゆっくり回転する集中線（3層、色・太さ・回転速度を少しずつ変えて立体感を出す）。
   ヒーローエリア（overflow:hiddenでクリップされる）の外に置き、画面全体に見えるようposition:fixed＋
   JSでカードの中心座標を直接top/leftに設定する */
.card-light-burst{
  position:fixed; top:50%; left:50%;
  transform:translate(-50%,-50%) rotate(0deg);
  opacity:0; pointer-events:none; z-index:31;
  transition:opacity .6s ease;
}
.card-light-burst.show{ opacity:1; }
.card-light-burst-1{
  width:220vmax; height:220vmax;
  background:repeating-conic-gradient(from 0deg, rgba(255,255,255,.28) 0deg 7deg, transparent 7deg 15deg);
}
.card-light-burst-1.show{ animation:cardLightSpinCW 7s linear infinite; }
.card-light-burst-2{
  width:270vmax; height:270vmax;
  background:repeating-conic-gradient(from 0deg, rgba(255,214,120,.26) 0deg 10deg, transparent 10deg 27deg);
}
.card-light-burst-2.show{ animation:cardLightSpinCCW 13s linear infinite; }
.card-light-burst-3{
  width:320vmax; height:320vmax;
  background:repeating-conic-gradient(from 0deg, rgba(255,110,190,.16) 0deg 2deg, transparent 2deg 24deg);
}
.card-light-burst-3.show{ animation:cardLightSpinCW 19s linear infinite; }
@keyframes cardLightSpinCW{
  from{ transform:translate(-50%,-50%) rotate(0deg); }
  to{ transform:translate(-50%,-50%) rotate(360deg); }
}
@keyframes cardLightSpinCCW{
  from{ transform:translate(-50%,-50%) rotate(0deg); }
  to{ transform:translate(-50%,-50%) rotate(-360deg); }
}

/* 90%以上スクラッチしてリンクが有効になったタイミングで表示するカウントダウン。
   カードの真上に、カードとは無関係に独立して伸びる（カードの位置には影響しない） */
#sec-mv .mv-countdown{
  position:absolute; left:50%; bottom:100%; margin-bottom:14px; width:max-content;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:4px;
  max-height:0; opacity:0; overflow:hidden; pointer-events:none;
  transition:max-height .4s var(--bounce), opacity .3s ease;
}
#sec-mv .mv-countdown.show{ max-height:160px; opacity:1; }
#sec-mv .mv-countdown-label{
  align-self:stretch; text-align:center;
  color:#fff; font-weight:800; font-size:1.2rem; white-space:nowrap;
  background:linear-gradient(120deg,#ff3d78,#ff7a45); padding:5px 16px; border-radius:999px;
  box-shadow:0 4px 10px rgba(255,61,120,.35);
}
#sec-mv .mv-countdown-time{
  color:#fff; font-weight:900; font-size:3rem; letter-spacing:.04em; white-space:nowrap;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
  text-shadow:0 2px 6px rgba(0,0,0,.4),0 0 22px rgba(0,0,0,.3);
}

/* 90%以上スクラッチしたら、カード以外のLPコンテンツ全体に黒フィルターをかけてカードを目立たせる */
.mv-overlay{
  position:fixed; inset:0; z-index:30;
  background:rgba(10,6,24,.78);
  opacity:0; pointer-events:none;
  transition:opacity .6s ease;
}
.mv-overlay.show{ opacity:1; }

/* 90%達成＝カウントダウン開始と同時に、カードの位置からクラッカーのように紙吹雪を噴き上げる */
.confetti-layer{
  position:fixed; inset:0; z-index:42;
  pointer-events:none; overflow:hidden;
}
.confetti-piece{
  position:absolute; top:0; left:0; opacity:0;
  transform:translate(-50%,-50%) translate(0,0) rotate(0deg);
  animation-name:crackerBurst; animation-fill-mode:forwards;
}
/* 前半＝勢いよく噴き出して減速（ease-out）、後半＝重力で加速しながら落下（ease-in）という
   2段階のイージングにすることで、噴き出した後の落下が自然な放物線に見えるようにする */
@keyframes crackerBurst{
  0%{
    opacity:1; transform:translate(-50%,-50%) translate(0,0) rotate(0deg);
    animation-timing-function:cubic-bezier(.17,.84,.44,1);
  }
  42%{
    opacity:1; transform:translate(-50%,-50%) translate(var(--tx), var(--ty)) rotate(calc(var(--rot) * .45));
    animation-timing-function:cubic-bezier(.55,.06,.68,.19);
  }
  100%{
    opacity:0;
    transform:translate(-50%,-50%) translate(var(--tx), calc(var(--ty) + var(--fall))) rotate(var(--rot));
  }
}
/* クラッカーが鳴った瞬間、噴き出し元にポンと出る演出用アイコン */
.cracker-pop{
  position:absolute; top:0; left:0; font-size:26px; opacity:0;
  transform:translate(-50%,-50%) scale(.3) rotate(-15deg);
  animation:crackerPop .55s cubic-bezier(.34,1.56,.64,1) forwards;
  pointer-events:none;
}
@keyframes crackerPop{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.3) rotate(-15deg); }
  40%{ opacity:1; transform:translate(-50%,-50%) scale(1.3) rotate(8deg); }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(1) rotate(0deg); }
}

/* カード本体（表面=card_omote.png／裏面=card_ura02.png）：指でスクラッチして削ると裏面が見えるスクラッチカード */
#sec-mv .card-stage{ width:72vw; max-width:320px; margin:0; display:block; }
#sec-mv .scratch-card{
  position:relative; width:100%; aspect-ratio:761/465;
  border-radius:20px; overflow:hidden; box-shadow:0 24px 46px rgba(30,16,60,.4);
  cursor:pointer; touch-action:none; -webkit-user-select:none; user-select:none;
}
#sec-mv .scratch-under{
  position:absolute; inset:0; display:block;
  /* 裏面(当たり画像)は軽量JPG版。届くまでは縮小してぼかした裏面(CSS埋め込み)を下地に出し、すぐ削っても白くならないようにする */
  background:url('../images/card_ura.jpg') center/cover no-repeat, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAUCAIAAABj86gYAAAE0UlEQVR42jWU224cxxVF9z5V3T3DuZEckZQVx7IsIw8B/GD4a/LZARLEcIBcIIsSRXKGM9PTt6o6Ow9C1i+shcWnvxAGRsBMirQoVkBFQDB4gWdWteoL5gljqzzCKsw2jDN5Qp6YeynDAoxklgulwDPgcESjEMAZUVXgJZuN6hWbJQTBMHaYzrbc4uo1hrOePvjhgbHh3Xte3qlkDCccv2hoOVsiBKSTSsHQadjTe7hHAjAwGOoF1m958ycuXtnySu4oxV8e0L3Y6/d8/aP61n//1T7+Sph9/zNev1fOmFrs7nF85OYWIah9gkuHT3r4B9JEeQRBA0B5hYsbfvNnXv2BiyuoqGuBIAZf3XJ569VSrwusYh5x9Ub1sgzPDHO7eceLDdc3kGu2YoiCY/8viBAjBAAoQKFQabbR+o7zjQjWZ3YHtc8aO7W7MvYqzmYJiyyul0d9+Z2rFTdbNRcIEVOnWMOCpsHTyFEqiijQRDgk95yUC4qUMoKFambLK84XIDR16FsdvujlQSXLnRYsDcaNSvJpgIjxLBrLpNMzxx7JkREhIAuSbFJ/UnfENIgVq2hVxdkCi0tZBc+hacJireGo07Ne7rG4tvVWzVzti/dH1AlpUKhw3qNrmQE3ukcAcIAyZeVBaVAaYBEe3RNylru6ndLA2QWaOa+2Kme0B5g8mg4P2n+kBay2AGVRjJpfcXHH1lhOXx0YEIEICdOZ7TP6o1SKu/d7ff4njg8YD6gbLjcwstux7+S9Hz/itMN5j3qh07U3q3L5bWmu+eZnLN/Yw2/28iGCFeIMs6XP146ox//o9ER3lEklWep43rE/sHQWDe0MVTBPysm7PYo4dMgTrNHp2eevRqzz5S1nb6Bry02sFxGzDa6/1e33vtxKGe0zD58AAs5SpMJQoVkhRwWCFVyOCKshwITgsAqMKO65TL3GPMhOzDnWt9XNLGp5g+9+wo+/YLHh4Ys+/F3tswgESKKkIsbJphoxigHKJCGoIiRaCy8AfeoLmKc89adc+iDqKnJ+EQFTCE6ksc2nvR93fvjsHL/2RQeSLGWWghAFIxwwkKJBYurpWYBSmqx00/15GsoUm8oqwbo+6rwrH387d+1uzLvd47h/8OEkKwoCzZwsorscDkAgZQII0ADBiyQX5coYu4w0PDU5bC8wP6eqOUf2+3SfPn/88NcT/nsa27F4aOr5ymIgLYZAAUDJeRiGkoaooWIxOkkJDktqijUuc8c05pBetvR3ntZh2KYpKo9jLvfn89/28dPInrPq8u725of5xdxo1tRymHEchpfd09Q+1uOnmZ+CCdJQLFszVbeav4JVkvr2iPa516n24V0Z6TkKKqUMmX220UMJ1swWq+3tar0BWNdVTgWQjcMEq2KJx32T2wBMRSlx8lDivLnYxHpGMyeG6SWlMrE4HUAkUVHXlX/TlEz0SnHcl8d/T+cFSQ+WUvZSpjyq68N4tHGAuwQUhOxBE7kPcKuaEOO8P9V+vgzprirroECPJsyD3s5Khr6bvHMp3NenvXUVCRLuLvfixYtDxcJolgGpQq7k6MVM7ZkD3WQpLMa15T/W+bbyiogwRGILNfPydoaEIk5mnQBQ+KoScAn6enYR/0dfZz+BgAgSkkE1sGS5AILhf8hrg2jNoAO5AAAAAElFTkSuQmCC') center/cover no-repeat, #fff;
}
/* 表面(card_omote)をcanvasに描き終わるまでは裏面を隠し、代わりにカード自体の背景に表面を出しておく
   （回線が遅いと、表面の読み込み待ちの間に削った状態＝裏面が先に見えてしまうため）。描画後にJSで .is-ready を付ける */
/* 下地は「縮小してぼかした表面」をCSSに埋め込み（通信待ちなしで即表示）、その上に本物の表面(card_omote.jpg)が届きしだい重なる */
#sec-mv .scratch-card:not(.is-ready){ background:url('../images/card_omote.jpg') center/cover no-repeat, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAUCAIAAABj86gYAAACM0lEQVR42n1VQXLjMAwDZK2b5/e321YksAfaiuxky/EhpjUgAVAMPz8/e+8fHx+Px+PxeOz7vu/71vvWGkhLksYYY4zMiBGRmZljDEmZKUmSbbvOPl9bayT7mUwtgUzYAGxPlF/ibQEAR4HMzExlWqpzJAXMAscBSXZmRsQNboL6bKsyJHtmAojIOIG2bSNJso7O02eJe6frmfl1Vuozm5kjom1baw1nXLq7tvw/oU4eVQIHg9baRQqpSKzI9TUOm3Mm36oEwBbJfqM5gwDImwcnbp6/QinZ1+6NJfph6WJ1RFTvJEq7+haZEXEyCGUohmyBNleHV4X7+jKJZKZtOq1QoaUyoqooQjlyfGl8y0Db3bpRg41FIt8lsi1bdrMtWan4jvETI0ZqpMsEZWSMHH8Vw9yADtjEC4Erg4ppndlgZ2JExM/XiBERmYo8DLBsdrcNbIbhO4Ma9Dcm11yZBpxo4h8x5CFJGU7JMJpbN2g2sK3Q5x2GDZJPBlXw6QddWbQN244N0AYEmFCdgGGAE/1qb9VwB7yi34ahujGb2+bWbdrNkGXAsOy18duIokyG/eK0CDagVLMNGwbrAbh2gpUPjgxwdNwb2c4g2RrPKNDLBN8ubVFcxHkyIEs9d7Du7IkKLl0911SFX9bO1drJ4MAh2efiXLab7SwVct7w61JbzTwFmUlePABcz/FXA9TymH8Gccas9NrzbQjrtbZyl0y+31brpnuqdEUvgWeCh+DHA/AfI3+bBo49IDIAAAAASUVORK5CYII=') center/cover no-repeat, #fff; }
#sec-mv .scratch-card:not(.is-ready) .scratch-under{ visibility:hidden; }
#sec-mv .scratch-canvas{
  position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none;
}
/* タップしなくても「削れるカード」だと伝わるよう、時々指アイコンがカードの上を軽くなぞって見せる */
#sec-mv .scratch-hint{
  position:absolute; left:50%; top:50%; z-index:5; width:50px; pointer-events:none;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.3));
  opacity:0;
  animation:scratchHint 7s ease-in-out infinite;
  animation-delay:1.6s;
}
#sec-mv .scratch-hint img{ display:block; width:100%; height:auto; }
#sec-mv .scratch-hint.gone{ animation:none; opacity:0; }
@keyframes scratchHint{
  0%,7%,100%{ opacity:0; transform:translate(-50%,-50%) rotate(0deg) }
  10%{ opacity:1 }
  14%{ transform:translate(calc(-50% - 20px),-50%) rotate(-16deg) }
  18%{ transform:translate(calc(-50% + 20px),-50%) rotate(14deg) }
  22%{ transform:translate(calc(-50% - 14px),-50%) rotate(-12deg) }
  26%{ transform:translate(calc(-50% + 10px),-50%) rotate(10deg) }
  30%{ opacity:1; transform:translate(-50%,-50%) rotate(0deg) }
  34%{ opacity:0 }
}

/* 「抽選券をGETする」（card_ura02）クリックで、カードの真下にLINE・Google・メールの丸アイコンを出現させる。
   デザインは「もらえるまで、3ステップ」①の登録アイコン列（step.jpg内）に合わせたフラットな丸アイコン。
   ヒーローエリアのoverflow:hiddenで切れないよう、集中線と同じくposition:fixedで独立させ、JSで位置合わせする */
.card-icon-links{
  position:fixed; left:0; top:0; z-index:33; width:max-content;
  transform:translate(-50%, 0);
  display:flex; align-items:center; justify-content:center; gap:28px;
  pointer-events:none;
}
/* コンテナ自体はフェード演出を持たず、各アイコンが個別に「下から」フェードインし、
   左から順にtransition-delayをずらすことで出現の順番を作る */
.card-icon-link{
  flex:none; width:60px; height:60px; border-radius:50%; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:#fff;
  box-shadow:0 6px 14px rgba(20,10,40,.28);
  opacity:0; transform:translateY(18px); pointer-events:none;
  transition:opacity .4s ease, transform .4s var(--bounce);
}
.card-icon-links.show .card-icon-link{ opacity:1; transform:translateY(0); pointer-events:auto; }
.card-icon-links.show .card-icon-link:active{ transform:scale(.92); }
.card-icon-links.show .card-icon-link:nth-child(1){ transition-delay:0s; }
.card-icon-links.show .card-icon-link:nth-child(2){ transition-delay:.14s; }
.card-icon-links.show .card-icon-link:nth-child(3){ transition-delay:.28s; }
.card-icon-link img{ object-fit:contain; display:block; }
.card-icon-link:nth-child(1) img{ width:68%; height:68%; }
.card-icon-link:nth-child(2) img{ width:60%; height:60%; }
.card-icon-link:nth-child(3) img{ width:60%; height:60%; }

/* ── 3ステップ ── */
.steps{display:flex;flex-direction:column;gap:14px}
.step{background:#fef9de;border-radius:var(--radius);padding:18px;
  display:flex;gap:14px;align-items:center;box-shadow:0 6px 18px rgba(90,60,160,.05)}
.step .num{flex:none;width:42px;height:42px;border-radius:8px;color:#fff;font-weight:900;font-size:1.1rem;
  display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--pink01),var(--pink02))}
.step h3{font-size:1rem;margin-bottom:2px}
.step p{color:var(--muted);font-size:.86rem;line-height:1.55}
#sec-step{background-color: #fff; padding-bottom: 15px;}

/* ── 額面 ── */
.denoms{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.denom{background:var(--surface);border:2px solid var(--line);border-radius:18px;padding:18px 10px;text-align:center;
  font-weight:900;font-size:1.4rem;transition:transform .18s var(--bounce),border-color .18s,box-shadow .18s}
.denom:active{transform:scale(.95)}
.denom:hover{border-color:var(--brand);transform:translateY(-3px);box-shadow:0 12px 22px rgba(108,76,255,.14)}
.denom small{display:block;font-size:.68rem;color:var(--muted);font-weight:800;margin-top:2px}
.range{margin:16px 0 0;background:linear-gradient(120deg,#f3efff,#fdeef6);border:1px solid var(--line);
  border-radius:18px;padding:16px 18px;text-align:center;font-weight:800;font-size:.92rem}
.range b{color:var(--accent)}

/* ── 価値 ── */
.values{display:flex;flex-direction:column;gap:12px}
.value{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;display:flex;gap:14px;align-items:flex-start}
.value .ic{flex:none;width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,var(--g1),var(--g3))}
.value h3{font-size:.98rem;margin-bottom:2px}
.value p{color:var(--muted);font-size:.85rem;line-height:1.55}

/* ── FAQ ── */
#sec-faq{padding:0; background-color: #fefaf2;}
.faq-title-img{display:block;width:100%;margin: 0;}

.faq{display:flex;flex-direction:column;gap:14px;  margin: 0 auto; padding: 20px 20px 25px; background-color: #fefaf2;}
.faq details{position:relative;background:var(--surface);border:2px solid var(--line);border-radius:20px;
  padding:0 16px;transition:border-color .18s}
.faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;padding:14px 0}
.faq summary::-webkit-details-marker{display:none}
.faq-ic{flex:none;width:44px;height:44px;border-radius:50%;overflow:hidden}
.faq-ic img{width:100%;height:100%;display:block;object-fit:cover}
.faq-q{flex:1;font-weight:800;font-size:.93rem;line-height:1.4}
.faq-toggle{flex:none;width:30px;height:30px;border-radius:50%;border:2px solid currentColor;position:relative;margin-left:4px}
.faq-toggle::before,.faq-toggle::after{content:"";position:absolute;background:currentColor;top:50%;left:50%;transform:translate(-50%,-50%)}
.faq-toggle::before{width:13px;height:2.4px}
.faq-toggle::after{width:2.4px;height:13px;transition:transform .2s}
.faq details[open] .faq-toggle::after{transform:translate(-50%,-50%) scaleY(0)}
.faq p{color:var(--muted);padding:0 0 18px 56px;font-size:.86rem}

.faq details.faq-pink{color:var(--pink01);border-color:#fbcfe0}
.faq details.faq-orange{color:#e8912a;border-color:#fbdfae}
.faq details.faq-green{color:#7bb32e;border-color:#d7ecb0}
.faq details.faq-blue{color:#4a90d9;border-color:#c9e1f7}

/* ── 登録 ── */
#signup{background-color: #fdf1f4; padding: 25px 20px;}
.signup{background:#f891b2;color:#fff;border-radius:25px;padding:0 0 34px;text-align:center;overflow:hidden;box-shadow: 0px 0px 15px -5px #777777;}
.cta-title-img{display:block; border-radius: 22px 22px 0 0;}
.signup p{opacity:.96;margin-bottom:22px;font-size:.92rem}
.signup-btns{display:flex;flex-direction:column;gap:16px; padding: 0 20px;}
.sbtn{position:relative;display:flex;align-items:center;justify-content:center;padding:15px 15px 15px 60px;border-radius:16px;font-weight:800;
  font-size:1.02rem;text-decoration:none;border:none;cursor:pointer;box-sizing:border-box;min-height:68px;
  transition:transform .14s var(--bounce),box-shadow .14s,filter .14s}
.sbtn::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 45%)}
.sbtn:hover{filter:brightness(1.03)}
.sbtn:active{transform:translateY(3px) scale(.98)}
.sbtn-ic{position:absolute;left:18px;top:50%;transform:translateY(-50%);
  flex:none;width:38px;height:38px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.08)}
.sbtn-ic img{width:100%;height:100%;object-fit:cover;display:block}
.sbtn-ic-line{overflow:visible;box-shadow:none}
.sbtn-ic-line img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,60,20,.25))}
.sbtn-ic-google img{width:64%;height:64%;object-fit:contain}
.sbtn.mail{background:#fff;color:var(--pink01);border:1px solid #ffdce9;
  box-shadow:0 4px 0 #f3c6d9,0 3px 3px rgba(252,52,120,.12),0 10px 20px rgba(252,52,120,.22)}
.sbtn.mail:active{box-shadow:0 1px 0 #f3c6d9,0 2px 4px rgba(252,52,120,.18)}
.sbtn.line{background:linear-gradient(180deg,#2fdd76,#06C755 60%,#02a648);color:#fff;border:1px solid rgba(255,255,255,.3);
  box-shadow:0 4px 0 #048538,0 3px 3px rgba(2,110,45,.25),0 12px 22px rgba(6,199,85,.38)}
.sbtn.line:active{box-shadow:0 1px 0 #048538,0 2px 6px rgba(6,199,85,.3)}
.sbtn.google{background:#fff;color:#4285F4;border:1px solid var(--line);
  box-shadow:0 4px 0 #e4e3f2,0 3px 3px rgba(66,133,244,.08),0 10px 20px rgba(66,133,244,.18)}
.sbtn.google:active{box-shadow:0 1px 0 #e4e3f2,0 2px 4px rgba(66,133,244,.15)}
.signup .note{margin-top:14px;font-size:.72rem;opacity:.82}

footer{text-align:center;color:var(--muted);font-size:.74rem;padding:26px 22px 20px}
footer .disc{font-size:.68rem;opacity:.8;margin-bottom:10px;line-height:1.6}

.dock{position:fixed;bottom:0;z-index:30; width: 100%; text-align: center;}
.dock img{width: 92%;}






.contents-area{
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  position: relative;
}
img{max-width: 100%; vertical-align: bottom;}

#sec-reason{
  background-color: #e6f5b7;
  padding-bottom: 20px;
}