/* アマキュー LP（Figma 01C・ノード 23:2）。値は Figma のまま。幅 390 基準・320〜480 で崩れないようにしてある */

/* ===== Hero ===== */
.hero {
  position: relative;
  display: flex; flex-direction: column; gap: 20px;
  padding: 16px 20px 36px;
  background: var(--orange);
  overflow: clip;
}
.fx { position: absolute; left: 0; top: 0; width: 100%; height: 824.68px; overflow: clip; pointer-events: none; }
.fx-burst { position: absolute; left: calc(50% - 380px); top: -230px; width: 760px; height: 760px; }
.fx-burst img { position: absolute; left: .76%; top: 0; width: 98.48%; height: 100%; }
.fx-float { position: absolute; }
.fx-float img { width: 100%; height: 100%; }
.f1 { right: 32px; top: 236px; width: 24px; height: 24px; }
.f4 { left: 22px; top: 630px; width: 18px; height: 18px; }
.f1 img, .f4 img { position: absolute; left: 2.45%; top: 0; width: 95.1%; height: 90.45%; }
.f2 { left: 24px; top: 250px; width: 20px; height: 20px; }
.f3 { right: 24px; top: 560px; width: 14px; height: 14px; }

.header { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.nav-cta, .tag, .sticker-god, .equals {
  background: var(--yellow); border: 2px solid var(--navy); border-radius: 999px; color: var(--navy); font-weight: 900; white-space: nowrap;
}
.nav-cta { padding: 8px 14px; font-size: 12px; line-height: 1.5; box-shadow: 2px 2px 0 var(--navy); text-decoration: none; }
.nav-cta:active { translate: 1px 1px; box-shadow: 1px 1px 0 var(--navy); }

.tag-wrap { display: flex; padding: 5px 0; } /* Figma は回転後の外枠の高さ（約49px）で並べている */
.tag { background: #fff; padding: 8px 16px; font-size: 13px; line-height: 1.5; box-shadow: 3px 3px 0 var(--navy); rotate: -3deg; }

.hero-title { color: #fff; font-weight: 900; font-size: min(42px, calc((100vw - 40px) / 7.2)); line-height: 1.25; }
.hero-title span { display: block; }
.hero-sub { color: #fff; font-weight: 700; font-size: 16px; line-height: 1.5; }

.chat {
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px;
  background: #fff; border: 2px solid var(--navy); border-radius: 24px;
  box-shadow: 4px 4px 0 var(--navy);
}
.chat-status { display: flex; gap: 6px; align-items: center; color: var(--gray); font-weight: 700; font-size: 11px; line-height: 1.5; }
.status-dot { flex: none; width: 10px; height: 10px; }
.status-dot img { width: 100%; height: 100%; }
.row { position: relative; display: flex; }
.row-r { justify-content: flex-end; }
.bubble {
  max-width: 100%;
  padding: 12px 16px;
  background: #fff; border: 2px solid var(--navy); border-radius: 16px; box-shadow: 3px 3px 0 var(--navy);
  font-weight: 700; font-size: 14px; line-height: 1.5;
}
.bubble-r { background: var(--peach); }
.nb { display: inline-block; white-space: nowrap; } /* 言葉の途中で折り返さない */
.typing {
  position: absolute; right: 2px; top: .5px; /* Figma：チャット枠の left258/top112 ＝ 2行目の右上 */
  display: flex; gap: 6px; align-items: center;
  padding: 14px 16px;
  background: var(--peach); border: 2px solid var(--navy); border-radius: 16px; box-shadow: 3px 3px 0 var(--navy);
  opacity: 0;
}
.typing img { width: 8px; height: 8px; }
.sticker-god-wrap { position: absolute; right: -26.08px; top: -28.77px; width: 85.08px; height: 45.93px; display: flex; align-items: center; justify-content: center; }
.sticker-god { padding: 6px 12px; font-size: 13px; line-height: 1.45; box-shadow: 2px 2px 0 var(--navy); rotate: -8deg; }
.sticker-reward {
  position: absolute; right: 9px; top: -11.5px; /* Figma：チャット枠の left199/top184 ＝ 3行目の右上 */
  display: flex; gap: 6px; align-items: center;
  padding: 4px 12px 4px 6px;
  background: #fff; border: 2px solid var(--navy); border-radius: 999px; box-shadow: 2px 2px 0 var(--navy);
  font-weight: 900; font-size: 12px; line-height: 1.45; white-space: nowrap;
}
/* 幅360以下：吹き出しが2〜3行になるので、2つ目の固定の改行をやめる。
   「報酬ゲット！」は3つ目の吹き出しの下の角へ（文字に重ならない）。「神回答！」は行からの位置のままで重ならない */
@media (max-width: 360px) {
  .br-wide { display: none; }
  .sticker-reward { top: auto; bottom: -26px; right: -6px; }
}
.coin, .rain-coin {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 24px; height: 24px; border-radius: 999px;
  background: var(--yellow); border: 2px solid var(--navy);
  font-family: var(--en); font-weight: 900; font-size: 13px; line-height: 1;
}

.hero-desc { color: #fff; font-weight: 500; font-size: 14px; line-height: 1.7; }

.cta-wrap { display: flex; }
.cta {
  position: relative; overflow: clip;
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  width: 100%; padding: 16px;
  background: var(--yellow); border: 2px solid var(--navy); border-radius: 999px; box-shadow: 5px 5px 0 var(--navy);
  color: var(--navy); text-decoration: none; text-align: center;
}
.cta:active { translate: 2px 2px; box-shadow: 3px 3px 0 var(--navy); }
.cta-main { font-weight: 900; font-size: 20px; line-height: 1.3; }
.cta-sub { font-weight: 700; font-size: 12px; line-height: 1.5; }
.shine { position: absolute; left: -107px; top: -30px; width: 36px; height: 140px; background: rgba(255, 255, 255, .6); rotate: 20deg; pointer-events: none; }
.hero-soon { color: #fff; font-weight: 700; font-size: 12px; line-height: 1.5; text-align: center; }

/* ===== 共通セクション ===== */
.sec { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 36px 20px; overflow-x: clip; }
.sec-cream { background: var(--cream); }
.sec-mint { background: var(--mint); }
.sec-navy { background: var(--navy); }
.eyebrow { font-family: var(--en); font-weight: 900; font-size: 12px; line-height: 1.5; letter-spacing: 1.44px; color: var(--orange); }
.eyebrow-y { color: var(--yellow); }
.h2 { font-weight: 900; font-size: 24px; line-height: 1.35; }
.h2-26 { font-size: 26px; }
.h2 > span { display: block; }
.h2-white { color: #fff; }

/* ===== Examples ===== */
.qs { display: flex; flex-direction: column; gap: 14px; }
.q-row { display: flex; }
.q-row-r { justify-content: flex-end; }
.q {
  display: flex; flex-direction: column; gap: 4px; max-width: 100%;
  padding: 14px 18px;
  background: #fff; border: 2px solid var(--navy); border-radius: 18px; box-shadow: 3px 3px 0 var(--navy);
  line-height: 1.5;
}
.q-mint { background: var(--mint); }
.q-peach { background: var(--peach); }
.q-label { color: var(--orange); font-weight: 900; font-size: 11px; }
.q-text { font-weight: 700; font-size: 15px; }
.ai-msg {
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px;
  background: var(--navy); border: 2px solid var(--navy); border-radius: 20px;
  color: #fff; font-weight: 900; font-size: 17px; line-height: 1.5;
}
.ai-y { color: var(--yellow); }

/* ===== HowItWorks ===== */
.steps { display: flex; flex-direction: column; gap: 14px; }
.step {
  display: flex; gap: 14px; align-items: center;
  padding: 16px;
  background: #fff; border: 2px solid var(--navy); border-radius: 20px; box-shadow: 4px 4px 0 var(--navy);
}
.num {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 48px; height: 48px; border-radius: 999px;
  background: var(--yellow); border: 2px solid var(--navy);
  font-family: var(--en); font-weight: 900; font-size: 22px; line-height: 1;
}
.step-body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.step-title { font-weight: 900; font-size: 16px; line-height: 1.4; }
.step-title span { display: block; }
.step-desc { color: var(--gray); font-weight: 400; font-size: 13px; line-height: 1.6; }

/* ===== Money ===== */
.money { overflow: clip; }
.monthly {
  display: flex; flex-direction: column; gap: 6px; align-items: center;
  padding: 22px;
  background: #fff; border: 2px solid var(--navy); border-radius: 24px;
  text-align: center;
}
.monthly-lead { font-weight: 700; font-size: 14px; line-height: 1.5; }
.amount { display: flex; gap: 4px; align-items: baseline; color: var(--orange); font-weight: 900; white-space: nowrap; }
.amount-pre { font-size: 20px; line-height: 1.5; }
.amount-num { font-family: var(--en); font-size: min(60px, calc((100vw - 128px) / 4.4)); line-height: 1.1; }
.amount-yen { font-size: 24px; line-height: 1.5; }
.equals-wrap { rotate: 2deg; }
.equals { padding: 10px 18px; font-size: 16px; line-height: 1.5; box-shadow: 3px 3px 0 var(--navy); }
/* 金額の前提（カードの中）：12px・白の上で #5c6378（コントラスト 6:1） */
.money-note-card { margin-top: 8px; color: var(--gray); font-weight: 400; font-size: 12px; line-height: 1.6; text-align: left; }
.money-note { color: var(--gray-l); font-weight: 400; font-size: 11px; line-height: 1.6; }

.more { display: flex; gap: 12px; align-items: flex-start; line-height: 1.5; text-align: center; }
.ex-card, .money-card {
  display: flex; flex-direction: column; gap: 2px; align-items: center; flex: 1; min-width: 0;
  border: 2px solid var(--navy); border-radius: 18px;
}
.ex-card { padding: 14px; background: var(--mint); }
.ex-1 { font-weight: 700; font-size: 12px; }
.ex-2 { font-weight: 900; font-size: 16px; }
.ex-3 { font-weight: 700; font-size: 12px; color: var(--orange); }
.money-card { padding: 16px; background: var(--yellow); }
.mc-1 { font-weight: 700; font-size: 13px; }
.mc-2 { font-weight: 900; font-size: 16px; }
.noquota {
  display: flex; flex-direction: column; align-items: center;
  padding: 14px;
  border: 2px solid #fff; border-radius: 18px;
  color: #fff; font-weight: 700; font-size: 14px; line-height: 1.5; text-align: center;
}
.coin-rain { position: absolute; inset: 0; pointer-events: none; }
.rain-coin { position: absolute; top: -40px; left: var(--l); width: var(--s); height: var(--s); font-size: var(--fs); }

/* ===== FAQ ===== */
.faq {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px;
  background: #fff; border: 2px solid var(--navy); border-radius: 18px; box-shadow: 3px 3px 0 var(--navy);
}
.faq-q { display: flex; gap: 10px; align-items: center; font-weight: 900; font-size: 15px; line-height: 1.5; }
.qbadge {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--orange); color: #fff;
  font-family: var(--en); font-weight: 900; font-size: 15px; line-height: 1;
}
.faq-a { color: var(--gray); font-weight: 400; font-size: 13px; line-height: 1.7; }

/* ===== Form ===== */
#join { scroll-margin-top: 0; }
.join-lead { color: var(--gray); font-weight: 500; font-size: 14px; line-height: 1.5; }
.form-card {
  position: relative;
  display: flex; flex-direction: column; gap: 18px;
  padding: 20px;
  background: #fff; border: 2px solid var(--navy); border-radius: 24px; box-shadow: 4px 4px 0 var(--navy);
}
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; border: 0; }
fieldset.field { display: block; }
fieldset.field > legend { margin-bottom: 8px; }
fieldset.field > .f-err { margin-top: 8px; }
.f-label { font-weight: 900; font-size: 13px; line-height: 1.5; }
.input {
  width: 100%; height: 48px; padding: 0 14px;
  background: var(--cream); border: 1.5px solid var(--navy); border-radius: 12px;
  /* Figma は 14px。iPhone は 16px 未満の入力欄でタップ時に画面が拡大されるため 16px にしている */
  font-size: 16px; font-weight: 400;
  appearance: none;
}
.input::placeholder { color: var(--gray-l); opacity: 1; font-size: 14px; }
.textarea { height: 88px; min-height: 88px; padding: 12px 14px; line-height: 1.6; resize: vertical; }
.input[aria-invalid="true"] { border-color: #c43211; box-shadow: 0 0 0 2px rgba(196, 50, 17, .2); }
.f-count { align-self: flex-end; color: var(--gray); font-size: 11px; line-height: 1.4; margin-top: -4px; }
.f-err { color: #c43211; font-weight: 700; font-size: 12px; line-height: 1.5; }
.f-hint { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; padding: 8px 10px; background: #fff3c4; border-radius: 10px; font-weight: 700; font-size: 12px; line-height: 1.5; }
.f-hint[hidden], .f-err[hidden], .form-error[hidden] { display: none; }
.f-hint button { padding: 2px 10px; background: var(--yellow); border: 1.5px solid var(--navy); border-radius: 999px; font-weight: 900; font-size: 12px; cursor: pointer; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; max-width: 100%; cursor: pointer; }
.chip input, .agree input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: inline-block; max-width: 100%;
  padding: 8px 12px;
  background: #fff; border: 1.5px solid var(--navy); border-radius: 999px;
  font-weight: 700; font-size: 12px; line-height: 1.5;
  transition: background-color .25s ease-out, color .25s ease-out;
}
.chip i { display: none; font-style: normal; }
.chip input:checked + span { background: var(--orange); color: #fff; }
.chip input:checked + span i { display: inline; }
.chip input:focus-visible + span { outline: 3px solid var(--navy); outline-offset: 2px; }

.agree { position: relative; display: flex; gap: 10px; align-items: flex-start; font-weight: 700; font-size: 13px; line-height: 1.6; cursor: pointer; }
.agree input { width: 20px; height: 20px; }
.agree-box {
  position: relative; flex: none; width: 20px; height: 20px; margin-top: 1px;
  background: #fff; border: 2px solid var(--navy); border-radius: 5px;
  transition: background-color .25s ease-out;
}
.agree input:checked + .agree-box { background: var(--orange); }
.agree input:checked + .agree-box::after {
  content: ""; position: absolute; left: 5px; top: 1px; width: 6px; height: 11px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0; rotate: 45deg;
}
.agree input:focus-visible + .agree-box { outline: 3px solid var(--navy); outline-offset: 2px; }
.agree-text a { position: relative; z-index: 1; color: var(--orange); text-decoration: underline; }

.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.ts:empty { display: none; }
.ts { display: flex; justify-content: center; min-height: 0; }
.form-error { padding: 10px 12px; background: var(--peach); border: 2px solid var(--navy); border-radius: 12px; font-weight: 700; font-size: 13px; line-height: 1.6; }

.submit {
  display: flex; justify-content: center; width: 100%;
  padding: 16px;
  background: var(--orange); border: 2px solid var(--navy); border-radius: 999px; box-shadow: 4px 4px 0 var(--navy);
  color: #fff; font-weight: 900; font-size: 18px; line-height: 1.5; text-align: center;
  cursor: pointer;
}
.submit:active { translate: 2px 2px; box-shadow: 2px 2px 0 var(--navy); }
.submit[disabled] { opacity: .7; cursor: progress; }

/* ===== Footer ===== */
.footer { padding: 28px 20px; background: var(--navy); line-height: 1.5; }
.footer > div { display: flex; flex-direction: column; gap: 10px; }
.footer-logo { font-family: var(--en); font-weight: 900; font-size: 20px; letter-spacing: .4px; color: #fff; }
.footer-co { font-size: 12px; color: #fff; }
.footer-links { font-weight: 700; font-size: 12px; color: var(--yellow); }
.footer-links a { text-decoration: none; }
.footer-links a:hover, .footer-links a:focus-visible { text-decoration: underline; }
.footer-copy { font-size: 10px; color: var(--gray-l); }

/* ======================================================================
   動き（Figma 01C_motion の値）。Hero は読み込み時、ほかは「画面に入ったら1回」
   ====================================================================== */
@keyframes k-fade { from { opacity: 0; } }
@keyframes k-ty { from { translate: 0 var(--ty, 20px); } }
@keyframes k-tx { from { translate: var(--tx, 0) 0; } }
@keyframes k-r { from { rotate: var(--r0, 0deg); } }
@keyframes k-s { from { scale: var(--s0, 0); } }
@keyframes k-spin { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes k-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 var(--by, 10px); } }
@keyframes k-pulse {
  0% { scale: 1; animation-timing-function: ease-out; }
  33.33% { scale: 1.6; animation-timing-function: ease-in-out; }
  75%, 100% { scale: 1; }
}
@keyframes k-bl { 0% { translate: -120px 12px; } 20% { translate: 15.773px 7.462px; } 40% { translate: 4.965px 3.784px; } 60% { translate: -1.459px 1.122px; } 80% { translate: -.113px 0; } 100% { translate: 0 0; } }
@keyframes k-br { 0% { translate: 120px 12px; } 20% { translate: -15.773px 7.462px; } 40% { translate: -4.965px 3.784px; } 60% { translate: 1.459px 1.122px; } 80% { translate: .113px 0; } 100% { translate: 0 0; } }
@keyframes k-typing { 0% { opacity: 0; } 15.4% { opacity: 1; } 84.6% { opacity: 1; } 100% { opacity: 0; } }
@keyframes k-dot {
  0% { translate: 0 0; animation-timing-function: ease-out; }
  22.2% { translate: 0 -5px; animation-timing-function: ease-in; }
  44.4% { translate: 0 0; }
  55.6% { translate: 0 0; animation-timing-function: ease-out; }
  77.8% { translate: 0 -5px; animation-timing-function: ease-in; }
  100% { translate: 0 0; }
}
@keyframes k-reward-o { 0% { opacity: 0; } 5.26% { opacity: 1; } 78.9% { opacity: 1; animation-timing-function: ease-in; } 100% { opacity: 0; } }
@keyframes k-reward-y { 0%, 26.3% { translate: 0 0; animation-timing-function: ease-in; } 100% { translate: 0 -30px; } }
@keyframes k-coin { from { rotate: 0deg; } to { rotate: -720deg; } }
@keyframes k-cta {
  0% { scale: .3; animation-timing-function: var(--spring); }
  53.8% { scale: 1; }
  76.9% { scale: 1; animation-timing-function: ease-out; }
  88.5% { scale: 1.06; animation-timing-function: ease-in; }
  100% { scale: 1; }
}
@keyframes k-wiggle {
  0%, 80% { rotate: 0deg; scale: 1; }
  84% { rotate: -3deg; scale: 1.04; }
  88% { rotate: 3deg; scale: 1.04; }
  92% { rotate: -2deg; scale: 1.02; }
  96% { rotate: 1deg; scale: 1; }
  100% { rotate: 0deg; scale: 1; }
}
@keyframes k-shine { to { translate: 560px 0; } }
@keyframes k-amount {
  0% { scale: .3; animation-timing-function: ease-out; }
  50% { scale: 1.18; animation-timing-function: var(--spring); }
  100% { scale: 1; }
}
@keyframes k-stamp {
  0% { scale: 2.2; animation-timing-function: ease-in; }
  41.7% { scale: .95; animation-timing-function: var(--spring); }
  100% { scale: 1; }
}
@keyframes k-fall { to { translate: 0 var(--dy, 800px); } }
@keyframes k-rot { to { rotate: var(--rr, 540deg); } }
@keyframes k-chip {
  0% { scale: 1; animation-timing-function: ease-out; }
  30% { scale: 1.12; animation-timing-function: var(--spring); }
  100% { scale: 1; }
}
@keyframes k-agree {
  0% { scale: 1; animation-timing-function: ease-out; }
  25% { scale: 1.3; animation-timing-function: var(--spring); }
  100% { scale: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* --- Hero（読み込み時） --- */
  .header { animation: k-fade .4s ease-out both; }
  .fx-burst { --s0: .5; animation: k-fade .5s ease-out .1s both, k-s .8s var(--spring) .1s both, k-spin 60s linear infinite; }
  .fx-float { --s0: 0; animation: k-fade .12s linear var(--d) both, k-s .5s var(--spring) var(--d) both, k-bob 1.6s ease-in-out calc(var(--d) + .5s) infinite; }
  .f1 { --d: .4s; --by: 10px; }
  .f2 { --d: .55s; --by: -10px; }
  .f3 { --d: .7s; --by: 10px; }
  .f4 { --d: .85s; --by: -10px; }
  .tag { --r0: 87deg; --s0: 0; animation: k-r .7s var(--bez) .2s both, k-s .7s var(--spring) .2s both; }
  .hero-title { --s0: 1.6; animation: k-fade .15s linear .5s both, k-s .5s var(--bez) .5s both; }
  .hero-sub { --ty: 16px; animation: k-fade .3s ease-out .8s both, k-ty .5s ease-out .8s both; }
  .chat { --r0: -5deg; --ty: 60px; animation: k-fade .36s ease-out 1s both, k-r .6s var(--spring) 1s both, k-ty .6s var(--bez) 1s both; }
  .chat-status { animation: k-fade .3s ease-out 1.3s both; }
  .status-dot { animation: k-pulse 1.2s linear 1.6s infinite; }
  .bubble { --s0: .6; }
  .b1 { animation: k-fade .12s linear 1.8s both, k-bl .5s linear 1.8s both, k-s .5s var(--spring) 1.8s both; }
  .b2 { animation: k-fade .12s linear 2.8s both, k-br .5s linear 2.8s both, k-s .5s var(--spring) 2.8s both; }
  .b3 { animation: k-fade .12s linear 3.8s both, k-bl .5s linear 3.8s both, k-s .5s var(--spring) 3.8s both; }
  .typing { animation: k-typing .65s linear 2.15s both; }
  .typing img { animation: k-dot .54s linear 2.25s both; }
  .typing img:nth-child(2) { animation-delay: 2.33s; }
  .typing img:nth-child(3) { animation-delay: 2.41s; }
  .sticker-god { --r0: 32deg; --s0: 0; animation: k-fade .12s linear 3.2s both, k-r .5s var(--spring) 3.2s both, k-s .5s var(--spring) 3.2s both; }
  .sticker-reward { --s0: .3; animation: k-reward-o 1.9s linear 3.3s both, k-reward-y 1.9s linear 3.3s both, k-s .5s var(--spring) 3.3s both; }
  .sticker-reward .coin { animation: k-coin .7s ease-out 3.3s both; }
  .hero-desc { --ty: 16px; animation: k-fade .3s ease-out 4.3s both, k-ty .5s ease-out 4.3s both; }
  .cta-wrap { animation: k-fade .15s linear 4.5s both, k-cta 1.3s linear 4.5s both; }
  .cta { animation: k-wiggle 4.5s ease-in-out 7s infinite; }
  .shine { animation: k-shine .6s ease-in-out 5.3s both; }
  .hero-soon { animation: k-fade .4s ease-out 5s both; }

  /* --- セクション（画面に入ったら1回。--d はセクションが入ってからの遅れ） --- */
  .a-up { animation: k-fade .25s ease-out var(--d, 0s) both, k-ty var(--du, .5s) var(--bez) var(--d, 0s) both; }
  .a-soft { animation-timing-function: ease-out, ease-out; animation-duration: .25s, .4s; }
  .a-x { animation: k-fade .15s linear var(--d) both, k-tx .55s var(--spring) var(--d) both, k-r .55s var(--spring) var(--d) both; }
  .a-pop { animation: k-fade .12s linear var(--d) both, k-s var(--du, .5s) var(--spring) var(--d) both; }
  .a-in-r { --tx: 220px; animation: k-fade .2s linear var(--d) both, k-tx .6s var(--bez) var(--d) both; }
  .a-num { --r0: 200deg; --s0: .3; animation: k-r .6s var(--bez) var(--d) both, k-s .6s var(--spring) var(--d) both; }
  .a-qspin { --r0: 180deg; animation: k-r .45s var(--bez) var(--d) both; }
  .a-amount { animation: k-fade .1s linear var(--d) both, k-amount .8s linear var(--d) both; }
  .a-stamp { animation: k-fade .05s linear var(--d) both, k-stamp .6s linear var(--d) both; }
  .a-chip { --s0: 0; animation: k-fade .1s linear var(--d) both, k-s .5s var(--spring) var(--d) both; }
  .rain-coin { animation: k-fall 1.6s ease-in var(--d) both, k-rot 1.6s linear var(--d) both; }

  /* 利用者が押したとき（見本の自動演出はしない） */
  .chip input:checked + span { animation: k-chip .4s linear both; }
  .agree input:checked + .agree-box { animation: k-agree .4s linear both; }
}

/* JS が動く環境では、画面に入るまで止めておく（JS が無い環境では読み込み時にそのまま動いて表示される） */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  .rv:not(.in), .rv:not(.in) * { animation-play-state: paused !important; }
}

/* 動きを減らす設定の人：最初から完成形。回転・浮遊・コインも止める */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .coin-rain { display: none; }
}