/* わらなり LP ─ 動き（2026-10-21 追加）
   ・動きは html.m-on のときだけ（js/motion.js が「動きを減らす」でないときに付ける）
   ・transform と opacity が中心。画面の外では止める（.m-pause）
   ・文章・数字は変えない（数字のカウントアップは最後に元の数字へ戻る） */

@media (prefers-reduced-motion: no-preference) {

/* ========== 共通 ========== */
html.m-on .m-pause, html.m-on .m-pause * { animation-play-state: paused !important; }
@keyframes m-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes m-hop {
  0% { transform: translateY(0) scale(1, 1); }
  18% { transform: translateY(2px) scale(1.12, .86); }
  45% { transform: translateY(-14px) scale(.94, 1.08); }
  70% { transform: translateY(0) scale(1.08, .92); }
  85% { transform: translateY(-2px) scale(.98, 1.02); }
  100% { transform: translateY(0) scale(1, 1); }
}

/* ========== ロゴ：玉がぽっと灯る・触るとくるっ ========== */
html.m-on .lm-bead { animation: m-beadGlow 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes m-beadGlow { 0%, 100% { opacity: .85; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.12); } }
html.m-on .logo-mark { transition: transform .5s cubic-bezier(.3, 1.8, .5, 1); }
html.m-on .logo:hover .logo-mark { transform: rotate(-14deg) scale(1.12); }

/* ========== ボタン：ぷにっと縮んで、ぽよんと戻る ========== */
html.m-on .btn-main, html.m-on .hd-cta, html.m-on .sp-menu-join { transition: transform .5s cubic-bezier(.3, 1.9, .5, 1), box-shadow .25s, background .2s, color .2s; }
html.m-on .btn-main:active, html.m-on .hd-cta:active, html.m-on .sp-menu-join:active { transform: scale(.93, .88); transition-duration: .08s; }
html.m-on .btn-main:hover .ico { animation: m-nudge .9s ease-in-out infinite; }
@keyframes m-nudge { 0%, 100% { transform: translateX(2px); } 50% { transform: translateX(7px); } }
/* ヒーローと下の登録ボタンには、ときどき光が走る */
html.m-on .hero .btn-main, html.m-on .sticky-cta .btn-main { position: relative; overflow: hidden; }
html.m-on .hero .btn-main::after, html.m-on .sticky-cta .btn-main::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: translateX(-160%) skewX(-18deg); animation: m-shine 5.5s 2.6s ease-in-out infinite; }
@keyframes m-shine { 0% { transform: translateX(-160%) skewX(-18deg); } 22%, 100% { transform: translateX(330%) skewX(-18deg); } }
html.m-on .btn-play .play-ring { position: relative; }
html.m-on .btn-play .play-ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .7); animation: m-ring 2.8s 2s ease-out infinite; opacity: 0; }
@keyframes m-ring { 0% { transform: scale(1); opacity: .8; } 70%, 100% { transform: scale(1.55); opacity: 0; } }

/* 押したときに散る小さな光 */
.m-spark { position: fixed; z-index: 90; width: 0; height: 0; pointer-events: none; }
.m-spark i { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; background: var(--c, #FFC86A); filter: drop-shadow(0 0 4px var(--c, #FFC86A));
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: m-sparkFly .8s cubic-bezier(.15, .7, .3, 1) forwards; }
.m-spark i.dot { clip-path: none; border-radius: 50%; width: 9px; height: 9px; left: -4.5px; top: -4.5px; }
.m-spark b { position: absolute; left: -30px; top: -30px; width: 60px; height: 60px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 230, 200, .9); animation: m-sparkRing .55s ease-out forwards; }
@keyframes m-sparkRing { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
@keyframes m-sparkFly {
  0% { transform: rotate(var(--a)) translateY(-6px) scale(.5); opacity: 1; }
  60% { opacity: 1; }
  100% { transform: rotate(var(--a)) translateY(calc(-1 * var(--r, 34px))) scale(.6) rotate(140deg); opacity: 0; }
}

/* ========== ヒーロー：文字がぴょこっと並ぶ ========== */
.hero-title .m-ch { display: inline-block; white-space: pre; }
html.m-on .hero-title .m-ch { animation: m-charPop .8s var(--d, 0ms) cubic-bezier(.3, 1.6, .5, 1) both; transform-origin: 50% 90%; }
@keyframes m-charPop {
  0% { opacity: 0; transform: translateY(.45em) scale(.5) rotate(-10deg); }
  55% { opacity: 1; transform: translateY(-.07em) scale(1.06) rotate(2deg); }
  100% { opacity: 1; transform: none; }
}
html.m-on .hero-lead { animation: m-rise .9s .9s var(--ease) both; }
html.m-on .hero-act { animation: m-rise .9s 1.1s var(--ease) both; }
html.m-on .trust li { animation: m-rise .7s var(--ease) both; }
html.m-on .trust li:nth-child(1) { animation-delay: 1.3s; }
html.m-on .trust li:nth-child(2) { animation-delay: 1.42s; }
html.m-on .trust li:nth-child(3) { animation-delay: 1.54s; }
html.m-on .trust .ico { transition: transform .5s cubic-bezier(.3, 1.9, .5, 1); }
html.m-on .trust li:hover .ico { transform: translateY(-3px) rotate(-10deg) scale(1.15); }

/* 灯りのゆらぎ（背景の灯りの上に、暖かい光をそっと重ねる） */
.m-flicker { position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: screen; }
.m-flicker i { position: absolute; width: var(--s); height: var(--s); left: var(--x); top: var(--y); transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 176, 90, .38), rgba(255, 120, 50, .12) 55%, transparent); animation: m-flick 3.1s var(--dl, 0s) infinite; }
@keyframes m-flick {
  0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(1); }
  12% { opacity: .85; transform: translate(-50%, -50%) scale(1.04); }
  20% { opacity: .62; }
  34% { opacity: .95; transform: translate(-50%, -50%) scale(1.07); }
  48% { opacity: .7; transform: translate(-50%, -50%) scale(1.01); }
  63% { opacity: .9; }
  80% { opacity: .6; transform: translate(-50%, -50%) scale(1.03); }
}
/* 火の粉（ほたる）がゆっくり昇る */
.m-embers { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.m-embers i { position: absolute; left: var(--x); bottom: var(--b); width: var(--s); height: var(--s); border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #FFF1D6 0 25%, rgba(255, 170, 80, .9) 45%, rgba(255, 90, 60, 0) 72%);
  animation: m-ember var(--t) var(--dl) linear infinite; }
@keyframes m-ember {
  0% { opacity: 0; transform: translate(0, 0) scale(.6); }
  12% { opacity: .95; }
  50% { transform: translate(var(--dx), -38vh) scale(1); opacity: .7; }
  100% { opacity: 0; transform: translate(calc(var(--dx) * -.4), -72vh) scale(.5); }
}

/* ========== ヒーロー：アプリ画面の見本が「使われている」 ========== */
html.m-on .hero-phone { animation: m-phoneIn 1.1s .55s var(--ease) both, m-float 6.5s 1.7s ease-in-out infinite; }
@keyframes m-phoneIn { from { opacity: 0; transform: translateY(60px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes m-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@media (min-width: 900px) {
  html.m-on .phone { transform: perspective(1100px) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transition: transform .6s var(--ease); }
}
html.m-on .ph-photo img { animation: m-kenburns 12s ease-in-out infinite alternate; transform-origin: 50% 35%; }
@keyframes m-kenburns { from { transform: scale(1); } to { transform: scale(1.09) translateY(-1.5%); } }
html.m-on .ph-card { animation: m-cardIn .9s 1.25s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes m-cardIn { from { opacity: 0; transform: translateY(2.2em) scale(.96); } to { opacity: 1; transform: none; } }
html.m-on .ph-chips .on { animation: m-chip 7s 2.4s ease-in-out infinite; }
@keyframes m-chip { 0%, 6%, 100% { transform: scale(1); } 3% { transform: scale(.9); } }
/* 交換ボタンを指でトンと押す → 光の粒がはじける */
.ph-rail .main i { position: relative; }
html.m-on .ph-rail .main i { animation: m-press 4.8s 2.4s infinite; }
@keyframes m-press { 0%, 52%, 100% { transform: scale(1); } 57% { transform: scale(.84); } 64% { transform: scale(1.14); } 71% { transform: scale(.97); } 77% { transform: scale(1); } }
.m-tap { position: absolute; inset: -.3em; border-radius: 50%; background: rgba(255, 255, 255, .28); box-shadow: 0 0 0 .22em rgba(255, 255, 255, .85), 0 0 1.2em rgba(255, 255, 255, .5); opacity: 0; pointer-events: none; }
html.m-on .m-tap { animation: m-tap 4.8s 2.4s infinite; }
@keyframes m-tap { 0%, 44% { opacity: 0; transform: scale(1.8); } 52% { opacity: .9; transform: scale(1.1); } 57% { opacity: .8; transform: scale(.82); } 64% { opacity: .5; transform: scale(1.2); } 74%, 100% { opacity: 0; transform: scale(2); } }
.m-pops { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.m-pops b { position: absolute; left: -.55em; top: -.55em; width: 1.1em; height: 1.1em; background: var(--c); opacity: 0; filter: drop-shadow(0 0 .35em var(--c));
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.m-pops b:nth-child(even) { clip-path: none; border-radius: 50%; width: .8em; height: .8em; left: -.4em; top: -.4em; }
html.m-on .m-pops b { animation: m-pop 4.8s 2.4s infinite; }
@keyframes m-pop {
  0%, 58% { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(.3); }
  61% { opacity: 1; transform: rotate(var(--a)) translateY(-1.6em) scale(1.1); }
  72% { opacity: 1; }
  82%, 100% { opacity: 0; transform: rotate(var(--a)) translateY(-4.4em) scale(.7) rotate(120deg); }
}
/* チャットに「入力中…」の点がぽこぽこ */
.ph-rail .r { position: relative; }
.m-typing { position: absolute; right: 115%; top: .5em; display: flex; gap: .3em; padding: .65em .8em; border-radius: 1.2em 1.2em .3em 1.2em; background: rgba(255, 255, 255, .92); box-shadow: 0 .4em 1.2em rgba(0, 0, 0, .35); opacity: 0; transform-origin: 100% 100%; }
.m-typing span { width: .55em; height: .55em; border-radius: 50%; background: #6d6676; }
html.m-on .m-typing { animation: m-bubble 4.8s 2.4s infinite; }
html.m-on .m-typing span { animation: m-dot .9s infinite ease-in-out; }
html.m-on .m-typing span:nth-child(2) { animation-delay: .15s; }
html.m-on .m-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes m-bubble { 0%, 4% { opacity: 0; transform: scale(.4); } 10%, 40% { opacity: 1; transform: scale(1); } 46%, 100% { opacity: 0; transform: scale(.6); } }
@keyframes m-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .55; } 30% { transform: translateY(-.35em); opacity: 1; } }
/* 欲しい物のハートがとくん、とくん */
html.m-on .ph-want .ico { animation: m-beat 1.6s ease-in-out infinite; color: #FF6E9C; }
@keyframes m-beat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.25); } 28% { transform: scale(1); } 42% { transform: scale(1.18); } 56% { transform: scale(1); } }
/* 通知の数字がぴょん・ベルがゆらり */
html.m-on .ph-nav b { animation: m-badge 4.8s 3.4s infinite; }
@keyframes m-badge { 0%, 70%, 100% { transform: scale(1); } 74% { transform: scale(1.45) translateY(-.25em); } 80% { transform: scale(.9); } 85% { transform: scale(1.08); } }
html.m-on .ph-nav span:nth-child(4) .ico { animation: m-bell 4.8s 3.4s infinite; transform-origin: 50% 15%; }
@keyframes m-bell { 0%, 68%, 92%, 100% { transform: rotate(0); } 72% { transform: rotate(16deg); } 77% { transform: rotate(-13deg); } 82% { transform: rotate(8deg); } 87% { transform: rotate(-4deg); } }
html.m-on .ph-nav .me img { animation: m-blinkSquish 5.5s 4s infinite; }
@keyframes m-blinkSquish { 0%, 90%, 100% { transform: scale(1); } 93% { transform: scale(1.08, .9); } 96% { transform: scale(.96, 1.06); } }

/* ========== 見出し：眉の線がすっと引かれて、見出しがふわり ========== */
html.m-on .sec .eyebrow::before { transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease) .1s; }
html.m-on .join .eyebrow::before { transform-origin: center; }
html.m-on .sec .eyebrow { opacity: 0; transform: translateY(10px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.m-on .sec .h2 { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease) .12s, transform .9s var(--ease) .12s; }
html.m-on .sec.m-seen .eyebrow, html.m-on .sec.m-seen .h2 { opacity: 1; transform: none; }
html.m-on .sec.m-seen .eyebrow::before { transform: none; }

/* ========== わらなりとは：糸の上を玉が渡り、物がぴょこっ ========== */
.m-trav { pointer-events: none; }
.m-trav .t-glow { fill: #FF8A3D; opacity: .55; filter: blur(5px); }
.m-trav .t-core { fill: #FFE9D2; stroke: #FF5A8F; stroke-width: 2; }
.tale-row li { cursor: default; -webkit-tap-highlight-color: transparent; }
.tale-row .bead, .tale-row .ph { will-change: transform; }
.tale-row .m-hop { animation: m-hop .7s cubic-bezier(.3, .7, .4, 1); }
.tale-row .ph.m-hop { animation: m-hopPh .75s cubic-bezier(.3, .7, .4, 1); }
@keyframes m-hopPh {
  0% { transform: translateY(0) scale(1); }
  20% { transform: translateY(2px) scale(1.1, .9); }
  45% { transform: translateY(-12px) scale(.95, 1.06) rotate(-6deg); box-shadow: 0 0 0 3px rgba(255, 200, 130, 1), 0 0 30px rgba(255, 120, 90, .8); }
  70% { transform: translateY(0) scale(1.05, .95) rotate(3deg); }
  100% { transform: none; }
}
.tale-row .m-lit { box-shadow: 0 0 0 1px rgba(255, 255, 255, .3), 0 0 26px rgba(255, 90, 140, .95), 0 0 48px rgba(255, 150, 70, .5); }
.tale-row.photo .ph.m-lit { box-shadow: 0 0 0 2.5px rgba(255, 190, 120, 1), 0 0 26px rgba(255, 90, 90, .7); }
.tale-row .bead, .tale-row.photo .ph { transition: box-shadow .5s; }
.tale-row li { position: relative; }
/* ゴールでハートと光がはじける */
.m-burst { position: absolute; left: 50%; top: var(--cy, 30px); width: 0; height: 0; pointer-events: none; z-index: 3; }
.m-burst i { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; opacity: 0; animation: m-burst 1.1s cubic-bezier(.2, .7, .3, 1) forwards; animation-delay: var(--dl, 0s); }
.m-burst i svg { width: 100%; height: 100%; display: block; fill: var(--c); stroke: none; }
@keyframes m-burst {
  0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(.3); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a))) scale(1.1); }
}
html.m-on .tale-row.photo .ph.goal .ico { animation: m-beat 2s ease-in-out infinite; }

/* ========== 遊び方：糸の先頭に玉、番号が灯ると写真がぽん ========== */
.m-lead { pointer-events: none; transition: opacity .3s; }
.m-lead .t-glow { fill: #FF8A3D; opacity: .7; filter: blur(7px); }
.m-lead .t-core { fill: #FFF1E2; stroke: #FF4F8E; stroke-width: 2.5; }
html.m-on .step.m-pop .step-pic { animation: m-picPop .8s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes m-picPop { 0% { transform: scale(1); } 30% { transform: scale(.95); } 60% { transform: scale(1.05); } 100% { transform: scale(1); } }
html.m-on .step.m-pop .num { animation: m-numPop .7s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes m-numPop { 0% { transform: scale(.7); } 60% { transform: scale(1.22) rotate(-8deg); } 100% { transform: scale(1.06); } }
html.m-on .step-pic img { transition: transform 1.2s var(--ease); }
html.m-on .step:hover .step-pic img { transform: scale(1.07); }
html.m-on .step-txt h3 .ico { transition: transform .5s cubic-bezier(.3, 1.9, .5, 1); transform-origin: 50% 80%; }
html.m-on .step:hover .step-txt h3 .ico, html.m-on .step.m-pop .step-txt h3 .ico { animation: m-wiggle .8s ease-in-out; }
@keyframes m-wiggle { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg) scale(1.12); } 45% { transform: rotate(10deg) scale(1.08); } 70% { transform: rotate(-5deg); } }

/* モードのアイコン：トラックが走る・月がゆれる・暦がめくれる */
.mode { position: relative; }
html.m-on .mode.in .mode-ico .ico, html.m-on .mode:hover .mode-ico .ico { animation: var(--m-anim) 1.1s .25s ease-in-out; }
html.m-on .mode:hover .mode-ico .ico { animation-delay: 0s; }
html.m-on .mode:nth-child(1) { --m-anim: m-drive; }
html.m-on .mode:nth-child(2) { --m-anim: m-swing; }
html.m-on .mode:nth-child(3) { --m-anim: m-flip; }
html.m-on .mode:nth-child(2) .mode-ico .ico { transform-origin: 50% 10%; }
@keyframes m-drive { 0% { transform: translateX(0); } 30% { transform: translateX(-4px); } 55% { transform: translateX(7px) rotate(-3deg); } 75% { transform: translateX(-1px); } 100% { transform: none; } }
@keyframes m-swing { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-18deg); } 50% { transform: rotate(12deg); } 75% { transform: rotate(-6deg); } }
@keyframes m-flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(180deg) scale(1.1); } 100% { transform: rotateX(360deg); } }
html.m-on .mode-ico.warm { animation: m-warm 3.4s ease-in-out infinite; }
@keyframes m-warm { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 160, 100, .45), 0 0 18px rgba(255, 110, 60, .2); } 50% { box-shadow: inset 0 0 0 1px rgba(255, 180, 120, .7), 0 0 34px rgba(255, 110, 60, .45); } }

/* ========== 安心のしくみ：動物たちが順番にぴょこぴょこ ========== */
.animals { position: relative; }
.animals img { will-change: transform; transform-origin: 50% 100%; -webkit-tap-highlight-color: transparent; }
html.m-on .safe-card.in .animals img { animation: m-animalIn .7s cubic-bezier(.3, 1.7, .5, 1) both; animation-delay: calc(var(--i) * 70ms + .2s); }
@keyframes m-animalIn { from { opacity: 0; transform: translateY(18px) scale(.5); } to { opacity: 1; transform: none; } }
html.m-on .animals img.m-hop { animation: m-hop .75s cubic-bezier(.3, .7, .4, 1) !important; }
html.m-on .animals img.m-tilt { animation: m-tilt 1.2s ease-in-out !important; }
@keyframes m-tilt { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } }
.m-heart { position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; pointer-events: none; color: #FF5A8F; animation: m-heartUp 1.1s cubic-bezier(.2, .7, .3, 1) forwards; filter: drop-shadow(0 0 6px rgba(255, 70, 130, .8)); }
.m-heart svg { width: 100%; height: 100%; fill: currentColor; stroke: none; }
@keyframes m-heartUp { 0% { opacity: 0; transform: translateY(0) scale(.3); } 20% { opacity: 1; transform: translateY(-10px) scale(1.15); } 100% { opacity: 0; transform: translateY(-46px) translateX(var(--dx, 0px)) scale(.8) rotate(var(--rot, 0deg)); } }
html.m-on .safe-ico .ico { transition: transform .5s cubic-bezier(.3, 1.9, .5, 1); }
html.m-on .safe-card:hover .safe-ico .ico, html.m-on .safe-card.in .safe-ico .ico { animation: m-wiggle .9s .3s ease-in-out; }
html.m-on .safe-card:hover .safe-ico .ico { animation-delay: 0s; }

/* カードの上を、指の先に灯りがついてくる（マウスのときだけ） */
@media (hover: hover) and (pointer: fine) {
  html.m-on .mode::after, html.m-on .safe-card::after, html.m-on .plan::after, html.m-on .price-notes li::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 150, 90, .12), transparent 70%); }
  html.m-on .mode:hover::after, html.m-on .safe-card:hover::after, html.m-on .plan:hover::after, html.m-on .price-notes li:hover::after { opacity: 1; }
  html.m-on .price-notes li { position: relative; }
}

/* ========== 料金：数字がくるくる・無料がきらり ========== */
html.m-on .free-tag { background: linear-gradient(100deg, #FFC86A 0 38%, #FFF6DE 50%, #FFC86A 62% 100%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 14px rgba(255, 200, 106, .35)); animation: m-gleam 4.5s 1s ease-in-out infinite; }
@keyframes m-gleam { 0% { background-position: 100% 0; } 40%, 100% { background-position: 0 0; } }
.yen b { display: inline-block; }
.yen b.m-done { animation: m-yenPop .6s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes m-yenPop { 0% { transform: scale(1); } 40% { transform: scale(1.12) translateY(-4px); } 100% { transform: none; } }
html.m-on .pn-ico .ico { transform-origin: 50% 80%; }
html.m-on .price-notes.in li .pn-ico .ico { animation: m-wiggle .9s ease-in-out both; }
html.m-on .price-notes.in li:nth-child(2) .pn-ico .ico { animation-delay: .15s; }
html.m-on .price-notes.in li:nth-child(3) .pn-ico .ico { animation-delay: .3s; }
html.m-on .price-notes li:hover .pn-ico .ico { animation: m-wiggle .8s ease-in-out; }
html.m-on .ship-table tr { opacity: 0; transform: translateX(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 70ms + .15s); }
html.m-on .ship.in .ship-table tr { opacity: 1; transform: none; }
html.m-on .honest-ico .ico { animation: m-breathe 3.6s ease-in-out infinite; }
@keyframes m-breathe { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.1); opacity: 1; } }

/* ========== よくある質問：開くとふわっと ========== */
html.m-on .faq-list details[open] .ans { animation: m-ans .5s var(--ease); }
@keyframes m-ans { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
html.m-on .faq-list summary { transition: color .2s; }
html.m-on .faq-list summary:hover { color: #FFD9BF; }
html.m-on .faq-list summary:active .ico { transform: scale(.8); }

/* ========== 事前登録：わら1本が風にそよぐ・灯りが息をする ========== */
.m-straw { display: block; width: 92px; height: 114px; margin: 0 auto 6px; overflow: visible; }
.m-straw .st-stalk { fill: none; stroke: #E8B86A; stroke-width: 3; stroke-linecap: round; }
.m-straw .st-grain { fill: #F2C979; }
.m-straw .st-thread { fill: none; stroke: url(#m-thread-g); stroke-width: 1.8; stroke-linecap: round; }
.m-straw .st-bead { fill: #FF4F8E; }
.m-straw .st-bead-hi { fill: #fff; opacity: .85; }
.m-straw .st-bead-glow { fill: #FF5A8F; opacity: .5; filter: blur(4px); }
.m-straw .st-sway { transform-box: view-box; transform-origin: 37px 90px; }
.m-straw .st-hang { transform-box: view-box; transform-origin: 44px 24px; }
html.m-on .m-straw .st-sway { animation: m-sway 4.2s ease-in-out infinite; }
html.m-on .m-straw .st-hang { animation: m-pend 4.2s ease-in-out infinite; }
html.m-on .m-straw .st-bead-glow { animation: m-glowPulse 2.1s ease-in-out infinite; }
@keyframes m-sway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(6deg); } }
@keyframes m-pend { 0%, 100% { transform: rotate(9deg); } 50% { transform: rotate(-11deg); } }
@keyframes m-glowPulse { 0%, 100% { opacity: .35; } 50% { opacity: .8; } }
html.m-on .join-glow { animation: m-joinGlow 5s ease-in-out infinite; }
@keyframes m-joinGlow { 0%, 100% { opacity: .8; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } }
html.m-on .join-form .field .ico { transition: transform .4s cubic-bezier(.3, 1.9, .5, 1), color .2s; }
html.m-on .join-form .field:focus-within .ico { transform: rotate(-10deg) scale(1.15); color: #FFB3CB; }

}

/* 「動きを減らす」のときは、足した飾りを出さない（内容はそのまま） */
@media (prefers-reduced-motion: reduce) {
  .m-embers, .m-flicker, .m-tap, .m-pops, .m-typing, .m-trav, .m-lead, .m-spark, .m-burst, .m-heart { display: none !important; }
}