/* Kantan LP — アプリ（kantan-wallet）と同じ色・文字。スマホを先に作り、PC は 900px から */
:root {
  --canvas: #FBF8F7;
  --card: #FFFFFF;
  --sunken: #F6F1EF;
  --line: #EFE7E4;
  --ink: #4A423D;
  --ink-2: #776D68;
  --ink-3: #B3A9A4;
  --sakura: #E1B8C3;
  --sakura-soft: #F8EAEE;
  --sakura-mist: #FDF5F7;
  --rose: #B4566F;
  --rose-press: #9E4A62;
  --up: #24855A;
  --up-soft: #E6F3EB;
  --down: #C8463F;
  --down-soft: #FBEAE8;
  --shadow-card: 0 1px 2px rgba(74, 66, 61, .04), 0 14px 34px -16px rgba(74, 66, 61, .2);
  --shadow-float: 0 26px 60px -24px rgba(74, 66, 61, .34);
  --shadow-cta: 0 12px 26px -12px rgba(180, 86, 111, .65);
  --ring-line: inset 0 0 0 1.5px var(--line);
  --ease-spring: cubic-bezier(.19, 1, .22, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --font: "M PLUS Rounded 1c", "Nunito", "Hiragino Maru Gothic ProN", system-ui, sans-serif;
  --latin: "Nunito", "M PLUS Rounded 1c", system-ui, sans-serif;
  --gutter: 20px;
}

/* タップ・長押しのチラつきを出さない（共通ルール §9.1-7）。ダブルタップ拡大を止める（§9.1-6） */
html { -webkit-tap-highlight-color: transparent; touch-action: manipulation; -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
a, button { -webkit-touch-callout: none; }
a, img, svg { -webkit-user-drag: none; }
.nav, .btn, .chip, .tile, .card, .step .num, .flow, .marquee, .foot, .stickers { -webkit-user-select: none; user-select: none; }

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font-family: var(--font); font-weight: 700; font-size: 17px; line-height: 1.7;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
wbr { display: inline; }

/* 見出し：意味の切れ目（wbr）だけで改行する */
.h-hero, .h-sec, .h-end, h3, .lead, .sub { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; text-wrap: balance; }

/* ───────── 上の帯 ───────── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; padding: 0 var(--gutter); padding-top: env(safe-area-inset-top, 0px);
  transition: background-color .3s, box-shadow .3s;
}
.nav.solid { background: rgba(251, 248, 247, .82); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.brand img:first-child { width: 36px; height: auto; }
.brand .wordmark { width: 96px; height: auto; }
.nav-cta {
  display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 22px;
  background: var(--card); box-shadow: var(--ring-line); color: var(--rose); font-weight: 800; font-size: 15px; white-space: nowrap;
}

.nav-r { display: flex; align-items: center; gap: 6px; }
/* 言語のメニュー（2026-10-29 オーナー指示：言語を切り替えられること、全部の言語に対応していることが分かるように） */
.lang-menu { position: relative; }
.lang-menu > summary { list-style: none; }
.lang-menu > summary::-webkit-details-marker { display: none; }
.lm-btn { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px 0 10px; border-radius: 22px; color: var(--ink); font-weight: 800; font-size: 15px; white-space: nowrap; cursor: pointer; }
/* 国旗（2026-10-29 オーナー指示）：丸く切り抜き、細いふちで白い地と分ける */
.flag { flex: none; width: 22px; height: 22px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(74, 66, 61, .12); }
.lm-name { display: inline-flex; align-items: center; gap: 10px; }
.lm-chev { width: 16px; height: 16px; color: var(--ink-2); transition: transform .3s var(--ease-spring); }
.lang-menu[open] .lm-chev { transform: rotate(180deg); }
.lang-menu[open] .lm-btn { background: var(--card); box-shadow: var(--ring-line); }
.lm-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; display: grid; min-width: 200px; padding: 8px; border-radius: 22px; background: var(--card); box-shadow: var(--ring-line), var(--shadow-float); animation: lmIn .35s var(--ease-pop); }
.lm-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 0 14px; border-radius: 14px; font-weight: 800; font-size: 16px; white-space: nowrap; }
.lm-item svg { width: 18px; height: 18px; color: var(--rose); }
.lm-item[aria-current] { background: var(--sakura-mist); color: var(--rose); }
/* スマホでは、上の帯は「ロゴ＋言語のメニュー」だけ（画面を見るボタンはすぐ下の大きいボタンと同じなので隠す。
   言語のメニューは前の「English」の文字より幅を取るので、iPhone の幅でロゴとくっついた：2026-10-29） */
@media (max-width: 599px) { .nav-r .nav-cta { display: none; } }
/* とても狭いスマホ（360px 未満）：ロゴの文字と言語のボタンを少し詰める（中国語「简体中文」でロゴに近づいた） */
@media (max-width: 359px) { .brand { gap: 8px; } .brand .wordmark { width: 84px; } .lm-btn { gap: 4px; padding: 0 8px; } }
.foot-langs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 6px; }
.foot-langs a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 10px; color: var(--ink-2); font-weight: 800; font-size: 15px; }
.foot-langs .flag { width: 18px; height: 18px; }
.foot-langs a[aria-current] { color: var(--rose); }
/* 英語・スペイン語は英字の丸い書体（Nunito）を先に。韓国語・中国語は英字に Nunito、ハングル・漢字は端末の書体（アプリと同じ） */
html[lang="en"], html[lang="es"] { --font: "Nunito", "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", system-ui, sans-serif; }
html[lang="ko"] { --font: "Nunito", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif; }
html[lang="zh"] { --font: "Nunito", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif; }
/* 韓国語は言葉の途中で改行しない（空白の所だけで改行） */
html[lang="ko"] body { word-break: keep-all; }

/* ───────── 部品 ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 62px; padding: 0 34px; border-radius: 31px;
  background: var(--rose); color: #fff; font-weight: 800; font-size: 18px; white-space: nowrap;
  box-shadow: var(--shadow-cta); transition: transform .35s var(--ease-pop), background-color .2s;
}
.btn:active { transform: scale(.96); background: var(--rose-press); }
.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 18px;
  background: var(--sakura-soft); color: var(--rose); font-weight: 800; font-size: 15px; white-space: nowrap;
}
.chip img { width: 24px; height: 24px; border-radius: 50%; }

.mascot { display: block; width: 100%; height: auto; overflow: visible; color: var(--sakura); }
.mascot .m-body { transform-box: view-box; transform-origin: 250px 300px; }
.mascot .m-eyes { transform-box: view-box; transform-origin: 245px 183px; transition: transform .45s var(--ease-spring); }
.mascot .m-eye-o { transform-box: fill-box; transform-origin: center; transition: opacity .2s, transform .35s var(--ease-pop); }
.mascot .m-eye-h { opacity: 0; transition: opacity .2s; }
.mascot[data-mood="idle"] .m-body { animation: float 3.2s ease-in-out infinite; }
.mascot[data-mood="idle"] .m-eye-o { animation: blink 4.6s infinite; }
.mascot[data-mood="look"] .m-body { animation: bob 1.1s ease-in-out infinite; }
.mascot[data-mood="happy"] .m-eye-o { opacity: 0; transform: scale(.4); }
.mascot[data-mood="happy"] .m-eye-h { opacity: 1; }
.mascot[data-mood="happy"] .m-body { animation: hop .9s var(--ease-spring) 1, float 3.2s 1s ease-in-out infinite; }

/* App Store・Google Play（まだ出ていないので「まもなく」。押せない札） */
.stores { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.store { display: inline-flex; align-items: center; gap: 10px; height: 60px; padding: 0 20px 0 16px; border-radius: 16px; background: #231C1F; color: #fff; box-shadow: 0 12px 24px -14px rgba(35, 28, 31, .7); white-space: nowrap; }
.store svg { width: 26px; height: 26px; flex: none; }
.store-t { display: grid; line-height: 1.15; text-align: left; }
.store-t small { font-size: 15px; font-weight: 700; color: rgba(255, 255, 255, .75); }
.store-t b { font-family: var(--latin); font-size: 19px; font-weight: 900; letter-spacing: .01em; }
.end-stores { margin-top: 34px; }
/* スマホ：2枚が横に並ぶように少し小さく（狭い幅では縦に並ぶ） */
@media (max-width: 599px) { .stores { gap: 8px; } .store { height: 54px; padding: 0 14px 0 12px; gap: 8px; border-radius: 14px; } .store svg { width: 22px; height: 22px; } .store-t b { font-size: 17px; } }

/* ───────── ① はじめに ───────── */
.hero { position: relative; min-height: 100svh; padding: 96px var(--gutter) 40px; overflow: hidden; }
.hero-in { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; display: grid; gap: 18px; justify-items: center; text-align: center; }
/* 上へ引っ張ったとき（オーバースクロール・引っ張って更新）に見える所は、ページの地の色（html の背景 #FBF8F7）になる。
   ヒーローのいちばん上もその色にそろえて、つなぎ目を出さない（ピンクのぼかしが上の端に触れていて段差に見えた：2026-10-30 オーナー指摘）。
   下の端（フッター）はもともと地の色だけなので、下へ引っ張ってもつながる */
.hero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 160px; z-index: 1; pointer-events: none; background: linear-gradient(var(--canvas), rgba(251, 248, 247, 0)); }
/* ぼかし（filter）は使わない。グラデーションだけでやわらかく見せる（スクロール中に描き直さない） */
.blob { position: absolute; border-radius: 50%; opacity: .8; pointer-events: none; }
.blob.b1 { width: 520px; height: 520px; left: -220px; top: -120px; background: radial-gradient(circle at 50% 50%, #F8DCE4, rgba(248, 220, 228, .5) 30%, rgba(248, 220, 228, 0) 70%); }
.blob.b2 { width: 560px; height: 560px; right: -260px; top: 38%; background: radial-gradient(circle at 50% 50%, #FBE7D6, rgba(251, 231, 214, .5) 30%, rgba(251, 231, 214, 0) 70%); }
.hero-copy { display: grid; gap: 16px; justify-items: center; }
.nb { white-space: nowrap; }
.line { display: block; }
.h-hero { font-weight: 900; font-size: clamp(26px, 8.4vw, 80px); line-height: 1.22; letter-spacing: .01em; }
.h-hero span { display: block; }
.lead { color: var(--ink-2); font-size: clamp(17px, 4.6vw, 21px); line-height: 1.65; }
/* ストアの札は、説明の文と下のコインから離して置く（2026-10-29 オーナー指摘「近すぎて詰まって見える」） */
.hero-actions { margin-top: 20px; }
.hero-stage { --W: min(84vw, 460px); position: relative; width: var(--W); aspect-ratio: 1 / 1; margin-top: 28px; }
/* スマホ・タブレットの縦（2026-10-30 オーナー指示）：上にマスコットとコイン、まん中に文字、いちばん下（親指の届く所）に App Store・Google Play。
   1画面に収める。ヒーローの高さと絵の大きさ（--W）は lp.js の fitHero が「見えている高さ」から決める。
   文字のかたまりは、絵と札のあいだのまん中に来る（上下の margin-top: auto で残りを半分ずつ）。スクロールの案内の点はスマホでは出さない */
@media (max-width: 899px) {
  .hero { display: flex; flex-direction: column; padding-top: 72px; padding-bottom: 18px; }
  .hero-in { flex: 1; display: flex; flex-direction: column; align-items: center; width: 100%; gap: 0; }
  .hero-copy { display: contents; }
  .hero-stage { order: 1; flex: none; margin-top: 6px; margin-bottom: 14px; }
  .hero .chip { order: 2; margin-top: auto; }
  .hero .h-hero { order: 3; margin-top: 12px; }
  .hero .lead { order: 4; margin-top: 8px; }
  .hero-actions { order: 5; width: 100%; margin-top: auto; padding-top: 22px; }
  .hero-actions .stores { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; max-width: 420px; margin: 0 auto; }
  .hero-actions .store { justify-content: center; }
  .hero .scroll-hint { display: none; }
}
/* 背の低いスマホ（iPhone SE など。見えている高さが 640px 以下）：すき間と文字を少し詰めて、ストアの札まで1画面に入れる */
@media (max-width: 899px) and (max-height: 640px) {
  .hero { padding-top: 66px; padding-bottom: 14px; }
  .hero-stage { margin-top: 2px; margin-bottom: 8px; }
  .hero .chip { height: 32px; font-size: 14px; }
  .hero .h-hero { margin-top: 8px; font-size: clamp(24px, 7.2vw, 34px); }
  .hero .lead { margin-top: 6px; font-size: 16px; line-height: 1.5; }
  .hero-actions { padding-top: 16px; }
  .hero-actions .store { height: 50px; }
}
.hero-mascot { position: absolute; left: 50%; top: 52%; width: 58%; transform: translate(-50%, -50%); }
.stickers { position: absolute; inset: 0; }
.st-w { position: absolute; left: 50%; top: 52%; width: 0; height: 0; will-change: transform; }
.st-in { position: absolute; left: 0; top: 0; width: calc(var(--W) * .2 * var(--s, 1)); transform: translate(-50%, -50%); animation: bobi 3.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
.st { width: 100%; height: auto; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px #fff, 0 12px 24px -10px rgba(74, 66, 61, .35); transition: scale .3s var(--ease-pop), box-shadow .3s; }
.st.jump { animation: jump .7s var(--ease-pop); }
/* スクロールの案内（2026-10-30 オーナー指示）：うっすらした丸い点が3つ、上から「タン、タン、タン」と順に灯り、さっと消えるのをくり返す。
   大きさ・色はローディングの「…」（.ld-dots）にそろえて、少し小さく（6px・さくら色）。
   マスコットはヒーローと重なるので使わない。4秒待ってから出し、スクロールしたら消す */
.scroll-hint { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: grid; justify-items: center; gap: 6px; opacity: 0; transition: opacity .6s; pointer-events: none; }
.scroll-hint.show { opacity: 1; }
.scroll-hint i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--sakura); opacity: 0; }
.scroll-hint i:nth-child(1) { animation: shDot1 1.8s ease-out infinite; }
.scroll-hint i:nth-child(2) { animation: shDot2 1.8s ease-out infinite; }
.scroll-hint i:nth-child(3) { animation: shDot3 1.8s ease-out infinite; }
@keyframes shDot1 { 0% { opacity: 0; transform: scale(.55); } 8%, 62% { opacity: .95; transform: none; } 70%, 100% { opacity: 0; transform: scale(.7); } }
@keyframes shDot2 { 0%, 14% { opacity: 0; transform: scale(.55); } 22%, 62% { opacity: .95; transform: none; } 70%, 100% { opacity: 0; transform: scale(.7); } }
@keyframes shDot3 { 0%, 28% { opacity: 0; transform: scale(.55); } 36%, 62% { opacity: .95; transform: none; } 70%, 100% { opacity: 0; transform: scale(.7); } }

/* ───────── 章の共通 ───────── */
.sec { position: relative; max-width: 1180px; margin: 0 auto; padding: 56px var(--gutter); }
.h-sec { font-weight: 900; font-size: clamp(28px, 7.6vw, 54px); line-height: 1.3; letter-spacing: .01em; text-align: center; }
.sub { margin-top: 14px; color: var(--ink-2); font-size: clamp(16px, 4.3vw, 19px); text-align: center; }

/* ② ボタンは3つだけ */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 38px auto 0; max-width: 640px; }
.tile { display: grid; justify-items: center; gap: 12px; padding: 24px 6px 20px; border-radius: 28px; background: var(--card); box-shadow: var(--shadow-card); }
.tile b { font-size: clamp(16px, 4.4vw, 20px); white-space: nowrap; }
.t-ic { display: grid; place-items: center; width: clamp(58px, 16vw, 78px); aspect-ratio: 1; border-radius: 50%; background: var(--sakura-soft); color: var(--rose); }
.t-ic svg { width: 52%; height: 52%; overflow: visible; }
.tile.go[data-act="receive"] .t-arrow { animation: arrowDown 1.6s var(--ease-spring) infinite; }
.tile.go[data-act="send"] .t-arrow { animation: arrowUp 1.6s var(--ease-spring) infinite; }
.tile.go[data-act="swap"] .t-top { animation: swapR 1.8s var(--ease-spring) infinite; }
.tile.go[data-act="swap"] .t-bot { animation: swapL 1.8s var(--ease-spring) infinite; }

/* ③ 見て、押すだけ */
.story-head { margin-bottom: 40px; }
.phone { position: relative; border-radius: 46px; padding: 9px; background: #fff; box-shadow: var(--ring-line), var(--shadow-float); }
.phone img { width: 100%; height: auto; border-radius: 38px; }
.story-phone { display: none; }
.steps { display: grid; gap: 64px; }
.step { display: grid; justify-items: center; text-align: center; gap: 10px; }
.step .num { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--rose); color: #fff; font-family: var(--latin); font-weight: 900; font-size: 22px; box-shadow: var(--shadow-cta); }
.step h3 { font-weight: 900; font-size: clamp(22px, 6vw, 30px); line-height: 1.35; }
.step p { color: var(--ink-2); font-size: 17px; }
.phone.mini { width: min(72vw, 300px); margin-top: 14px; }

/* ⑤ やさしく */
.bento { display: grid; gap: 14px; margin-top: 38px; }
.card { display: grid; gap: 16px; padding: 22px 22px 24px; border-radius: 30px; background: var(--card); box-shadow: var(--shadow-card); }
.card h3 { font-weight: 900; font-size: clamp(20px, 5.4vw, 24px); line-height: 1.4; text-align: center; }
.k-demo { position: relative; height: 170px; border-radius: 22px; background: var(--sakura-mist); display: grid; place-items: center; overflow: hidden; }
.k-demo.text { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.aa-box { display: grid; place-items: center; height: 84px; }
.aa { font-size: 44px; font-weight: 900; line-height: 1; transition: font-size .6s var(--ease-pop); }
.k-text.big .aa { font-size: 76px; }
.k-seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 200px; padding: 4px; border-radius: 20px; background: #fff; box-shadow: var(--ring-line); font-size: 15px; }
.k-seg span { position: relative; z-index: 1; height: 34px; display: grid; place-items: center; border-radius: 16px; color: var(--ink-2); transition: color .3s; }
.k-seg::before { content: ""; position: absolute; left: 4px; top: 4px; width: calc(50% - 4px); height: 34px; border-radius: 16px; background: var(--rose); transition: transform .5s var(--ease-pop); }
.k-text .k-seg span:first-child, .k-text.big .k-seg span:last-child { color: #fff; }
.k-text.big .k-seg span:first-child { color: var(--ink-2); }
.k-text.big .k-seg::before { transform: translateX(100%); }
.k-demo.chat { place-items: stretch; align-content: center; gap: 10px; padding: 16px; }
.k-demo.chat .bub.bot { min-height: 46px; }
.bub { max-width: 86%; padding: 10px 14px; border-radius: 18px; font-size: 15px; line-height: 1.5; opacity: 0; transform: translateY(8px) scale(.96); transition: opacity .35s, transform .5s var(--ease-pop); }
.bub.me { justify-self: end; background: var(--rose); color: #fff; border-bottom-right-radius: 6px; }
.bub.bot { justify-self: start; display: flex; align-items: center; gap: 8px; background: #fff; box-shadow: var(--ring-line); border-bottom-left-radius: 6px; }
.bub.show { opacity: 1; transform: none; }
.mini-m { flex: none; width: 30px; }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--sakura); animation: pulse 1s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
.bub .ans { display: none; }
.bub.answered .dots { display: none; } .bub.answered .ans { display: block; }
.bub .ans span { display: block; white-space: nowrap; }
.k-demo.chat .bub.bot { max-width: 100%; }
/* 前のウォレットも使える：復元フレーズの12語が順に埋まり、「取り込みました」 */
.k-demo.imp { place-items: center; align-content: center; gap: 14px; }
.words { display: grid; grid-template-columns: repeat(4, 46px); gap: 7px; }
.words i { display: grid; place-items: center; height: 30px; border-radius: 10px; background: #fff; box-shadow: var(--ring-line); font-style: normal; font-family: var(--latin); font-weight: 800; font-size: 13px; color: var(--ink-3); transition: background-color .3s, color .3s, box-shadow .3s; }
.words i.on { background: var(--sakura-soft); box-shadow: inset 0 0 0 1.5px var(--sakura); color: var(--rose); }
.imp-ok { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 10px; border-radius: 18px; background: var(--up); color: #fff; font-weight: 800; font-size: 15px; white-space: nowrap; opacity: 0; transform: scale(.8); transition: opacity .3s, transform .5s var(--ease-pop); }
.imp-ok svg { width: 18px; height: 18px; }
.k-imp.done .imp-ok { opacity: 1; transform: none; }
/* ガス代は USDT で払える：ガス代の欄が「TRX が必要」から「1.4 USDT」に変わり、「TRX がなくても送れる」が出る */
.fee-card { display: grid; gap: 8px; width: min(calc(100% - 28px), 260px); }
.fr { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; border-radius: 18px; background: #fff; box-shadow: var(--ring-line); font-size: 15px; white-space: nowrap; transition: box-shadow .4s, transform .55s var(--ease-pop), background-color .4s; }
.fr span { color: var(--ink-2); font-weight: 800; }
.fr b { display: inline-flex; align-items: center; gap: 8px; font-family: var(--latin); font-weight: 900; font-size: 16px; }
.fr img { width: 26px; height: 26px; border-radius: 50%; }
.k-usdt.on .fee-row { background: var(--sakura-mist); box-shadow: inset 0 0 0 2px var(--rose); transform: scale(1.04); }
.gas-v { display: grid; justify-items: end; }
.gas-v b { grid-area: 1 / 1; transition: opacity .35s, transform .55s var(--ease-pop); }
.gas-old { color: var(--ink-2); }
.gas-old img { filter: grayscale(1); opacity: .5; }
.gas-new { color: var(--ink); opacity: 0; transform: translateY(12px); }
.k-usdt.on .gas-old { opacity: 0; transform: translateY(-12px); }
.k-usdt.on .gas-new { opacity: 1; transform: none; }
.gas-ok { justify-self: center; display: inline-flex; align-items: center; gap: 6px; height: 34px; margin-top: 2px; padding: 0 14px 0 10px; border-radius: 17px; background: var(--up); color: #fff; font-weight: 800; font-size: 15px; white-space: nowrap; opacity: 0; transform: scale(.8); transition: opacity .3s .15s, transform .5s .15s var(--ease-pop); }
.gas-ok svg { width: 18px; height: 18px; }
.k-usdt.on .gas-ok { opacity: 1; transform: none; }
/* ふだん用と貯金用：ホームの残高の所が切り替わる */
.k-demo.wal { place-items: center; }
.wv { grid-area: 1 / 1; display: grid; justify-items: center; gap: 12px; opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .4s, transform .6s var(--ease-pop); }
.wv.on { opacity: 1; transform: none; }
.wpill { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px 0 8px; border-radius: 19px; background: #fff; box-shadow: var(--ring-line); font-weight: 800; font-size: 15px; white-space: nowrap; }
.wpill i { width: 24px; height: 24px; border-radius: 50%; }
.wv b { font-family: var(--latin); font-weight: 900; font-size: 30px; letter-spacing: .01em; }
.k-demo.book { gap: 10px; align-content: center; }
.who { display: flex; align-items: center; gap: 12px; width: 220px; padding: 10px 14px; border-radius: 18px; background: #fff; box-shadow: var(--ring-line); font-size: 16px; transition: box-shadow .35s, transform .5s var(--ease-pop); }
.who.sel { box-shadow: inset 0 0 0 2px var(--rose); transform: scale(1.04); }
.av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; font-size: 15px; }

/* ④ 手数料は安く */
.fee-board { display: grid; gap: 12px; width: min(100%, 400px); margin: 38px auto 0; padding: 16px; border-radius: 30px; background: var(--card); box-shadow: var(--shadow-card); }
.fb-pairs { display: grid; padding: 14px 10px 12px; border-radius: 22px; background: var(--sakura-mist); }
.fb-pair { grid-area: 1 / 1; display: grid; justify-items: center; gap: 10px; opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .55s var(--ease-pop); }
.fb-pair.on { opacity: 1; transform: none; }
.fb-tag { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 15px; background: #fff; box-shadow: var(--ring-line); color: var(--rose); font-weight: 900; font-size: 15px; white-space: nowrap; }
.fb-coins { display: flex; align-items: center; gap: 14px; color: var(--rose); }
.fb-coins svg { width: 26px; height: 26px; margin-bottom: 22px; }
.fb-c { display: grid; justify-items: center; gap: 4px; width: 76px; }
.fb-c img { width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #fff; }
/* クロスチェーン：コインの右下にネットワークの印（Tron・Ethereum） */
.fb-ic { position: relative; display: block; }
.fb-c .fb-net { position: absolute; right: -6px; bottom: -4px; width: 22px; height: 22px; box-shadow: 0 0 0 2.5px #fff; }
.fb-c small { font-family: var(--latin); color: var(--ink-2); font-weight: 800; font-size: 14px; white-space: nowrap; }
.fb-fee { height: 60px; transition: box-shadow .4s; }
.fb-right { display: flex; align-items: center; gap: 10px; }
.fb-down { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--up-soft); color: var(--up); opacity: 0; transform: translateY(-8px) scale(.6); transition: opacity .3s .2s, transform .5s .2s var(--ease-pop); }
.fb-down svg { width: 20px; height: 20px; }
.fee-board.low .fb-down { opacity: 1; transform: none; }
.fb-stack { position: relative; display: flex; align-items: center; justify-content: flex-end; }
/* 4枚が1枚になったあと、残った1枚が金色に光ってきらめく（安くなったのが目で分かるように。2026-10-29 オーナー指示） */
.fb-glow { position: absolute; right: -14px; top: 50%; width: 62px; height: 62px; margin-top: -31px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 205, 90, .8), rgba(255, 205, 90, 0) 68%); opacity: 0; pointer-events: none; }
.fb-spark { position: absolute; width: 12px; height: 12px; background: #F2B33D; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); opacity: 0; pointer-events: none; z-index: 2; }
.fb-spark.s1 { right: -10px; top: -12px; } .fb-spark.s2 { right: 30px; top: -8px; width: 9px; height: 9px; } .fb-spark.s3 { right: -12px; bottom: -10px; width: 8px; height: 8px; }
.fee-board.low .fb-glow { animation: feeGlow 1.5s .55s ease-out both; }
.fee-board.low .fb-spark { animation: sparkle 1s .7s ease-out both; }
.fee-board.low .fb-spark.s2 { animation-delay: .85s; } .fee-board.low .fb-spark.s3 { animation-delay: 1s; }
.fee-board.low .fb-stack img:first-of-type { animation: coinShine 1.4s .5s ease-out both; }
.fb-stack img { width: 34px; height: 34px; margin-left: -12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #fff; transition: opacity .35s, transform .55s var(--ease-pop), width .5s var(--ease-pop), margin .5s var(--ease-pop); }
.fb-stack img:first-of-type { margin-left: 0; }
.fee-board.low .fb-fee { box-shadow: inset 0 0 0 2px var(--rose); }
.fee-board.low .fb-stack img:not(:first-of-type) { opacity: 0; transform: translateY(-16px) scale(.4); width: 0; margin-left: 0; }
.fee-board.low .fb-stack img:first-of-type { transform: scale(.8); }
/* ⑤ 使えるコイン */
.coins { max-width: none; padding-left: 0; padding-right: 0; overflow: hidden; }
.coins .h-sec, .coins .sub { padding: 0 var(--gutter); }
.marquee { display: grid; gap: 14px; margin-top: 40px; }
.row { display: flex; gap: 12px; width: max-content; will-change: transform; }
.cn { display: inline-flex; align-items: center; gap: 12px; height: 72px; padding: 0 24px 0 12px; border-radius: 36px; background: var(--card); box-shadow: var(--shadow-card); white-space: nowrap; }
.cn img { width: 48px; height: 48px; border-radius: 50%; }
.cn b { font-size: 18px; }
.cn small { font-family: var(--latin); color: var(--ink-2); font-size: 15px; font-weight: 800; }
.cn.plain img { background: #fff; box-shadow: var(--ring-line); padding: 5px; }

/* ⑦〜⑧ 安心の章：夜の色の地（2026-10-29 オーナー指示で作り直し）。上下を丸めた大きな面にして、明るい章との区切りにする */
.night {
  --n-ink: #FFF7F9; --n-ink-2: rgba(255, 236, 241, .72); --n-card: rgba(255, 255, 255, .06); --n-line: rgba(255, 255, 255, .1);
  position: relative; margin: 40px 0; padding: 12px 0; border-radius: 40px; color: var(--n-ink);
  background: radial-gradient(90% 50% at 50% 0%, #46313A 0%, rgba(70, 49, 58, 0) 70%), radial-gradient(70% 40% at 50% 100%, #3F2C34 0%, rgba(63, 44, 52, 0) 70%), #2A2125;
}
.night .sub { color: var(--n-ink-2); }
.night h3 { color: var(--n-ink); }
.pf, .gd { display: grid; gap: 16px; padding: 16px 16px 22px; border-radius: 30px; background: var(--n-card); box-shadow: inset 0 0 0 1.5px var(--n-line); }
.pf h3, .gd h3 { font-weight: 900; font-size: clamp(19px, 5.2vw, 23px); line-height: 1.4; text-align: center; }
.pf-demo, .gd-demo { position: relative; height: 200px; border-radius: 22px; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(60% 70% at 50% 45%, rgba(225, 184, 195, .16), rgba(225, 184, 195, 0) 70%), rgba(255, 255, 255, .03); }
.proof { display: grid; gap: 14px; max-width: 980px; margin: 36px auto 0; }

/* 送るときは Face ID：顔を確かめる枠が緑になり、コインがポケットから出ていく */
.fid { position: relative; width: 136px; aspect-ratio: 1; display: grid; place-items: center; }
.fid .c { position: absolute; width: 24%; height: 24%; border: 6px solid var(--sakura); transition: border-color .35s, transform .5s var(--ease-pop); }
.fid .tl { left: 0; top: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 28px; }
.fid .tr { right: 0; top: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 28px; }
.fid .bl { left: 0; bottom: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 28px; }
.fid .br { right: 0; bottom: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 28px; }
.fid-m { width: 64%; }
.fid .line { position: absolute; left: 12%; right: 12%; top: 18%; height: 4px; border-radius: 2px; background: linear-gradient(90deg, rgba(225, 184, 195, 0), var(--sakura), rgba(225, 184, 195, 0)); opacity: 0; }
.pf-face.scan .fid .line { animation: scanline 1.6s ease-in-out 1 both; }
.pf-face.ok .fid .c { border-color: #5BC995; }
.pf-face.ok .tl { transform: translate(6px, 6px); } .pf-face.ok .tr { transform: translate(-6px, 6px); }
.pf-face.ok .bl { transform: translate(6px, -6px); } .pf-face.ok .br { transform: translate(-6px, -6px); }
.fid-coin { position: absolute; left: calc(50% + 34px); top: calc(50% - 26px); width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #fff; opacity: 0; }
.pf-face.sent .fid-coin { animation: coinOut 1.1s cubic-bezier(.3, .7, .4, 1) both; }
.fid-ok { position: absolute; left: calc(50% - 84px); top: calc(50% - 74px); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #5BC995; color: #fff; opacity: 0; transform: scale(.4); transition: opacity .25s, transform .45s var(--ease-pop); }
.fid-ok svg { width: 20px; height: 20px; }
.pf-face.ok .fid-ok { opacity: 1; transform: none; }
/* スマホを変えても戻せる：前のスマホから新しいスマホへ、コインが弧を描いて移る。新しいスマホは Face ID だけ */
.dev { position: absolute; top: 50%; width: 84px; height: 150px; margin-top: -75px; border-radius: 22px; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .28); display: grid; place-items: center; align-content: center; gap: 8px; transition: opacity .5s, box-shadow .4s; }
.dev.old { left: calc(50% - 128px); transform: rotate(-6deg); }
.dev.new { left: calc(50% + 44px); box-shadow: inset 0 0 0 3px var(--sakura); }
.dev-coins { display: grid; gap: 5px; justify-items: center; }
.dev-coins img { width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #fff; transition: opacity .35s, transform .45s var(--ease-pop); }
.dev.new .dev-coins img { opacity: 0; transform: scale(.4); }
.dev-face { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--sakura); transition: color .3s, opacity .3s; }
.dev-face svg { width: 30px; height: 30px; }
.dev.new .dev-coins { position: absolute; }
.dev-ok { position: absolute; right: -12px; top: -12px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #5BC995; color: #fff; opacity: 0; transform: scale(.4); transition: opacity .25s, transform .45s var(--ease-pop); }
.dev-ok svg { width: 18px; height: 18px; }
.mv { position: absolute; left: calc(50% - 86px); top: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #fff; opacity: 0; }
.pf-move.unlock .dev-face { color: #5BC995; }
.pf-move.go .dev.old .dev-coins img { opacity: .15; transform: scale(.8); }
.pf-move.go .mv { animation: hopOver 1s cubic-bezier(.45, 0, .3, 1) both; }
.pf-move.go .m2 { animation-delay: .18s; } .pf-move.go .m3 { animation-delay: .36s; }
.pf-move.done .dev.new .dev-coins img { opacity: 1; transform: none; }
.pf-move.done .dev.new .dev-face { opacity: 0; }
.pf-move.done .dev-ok { opacity: 1; transform: none; }
.pf-move.done .dev.old { opacity: .45; }

/* 危ないことは、先に止めます：4枚の見本。どれも白い小さな画面の中で、危ないものが赤くなって止まる */
.guard .gd-grid { display: grid; gap: 14px; max-width: 980px; margin: 36px auto 0; }
.mini { display: grid; gap: 8px; width: min(calc(100% - 28px), 286px); padding: 12px; border-radius: 20px; background: #fff; color: var(--ink); text-align: left; box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .55); transition: background-color .4s; }
.m-head { padding: 0 4px; color: var(--ink-2); font-weight: 800; font-size: 15px; }
.m-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: 14px; background: var(--sunken); font-size: 15px; white-space: nowrap; transition: background-color .35s, box-shadow .35s; }
.m-row span { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-weight: 800; }
.m-row b { display: inline-flex; align-items: center; gap: 6px; font-family: var(--latin); font-weight: 900; font-size: 16px; }
.m-row img { width: 22px; height: 22px; border-radius: 50%; }
.m-warn, .m-ok { justify-self: center; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px 0 10px; border-radius: 17px; color: #fff; font-weight: 800; font-size: 15px; white-space: nowrap; opacity: 0; transform: translateY(6px) scale(.9); transition: opacity .3s, transform .5s var(--ease-pop); }
.m-warn { background: var(--down); } .m-ok { background: var(--up); }
.m-warn svg, .m-ok svg { width: 18px; height: 18px; flex: none; }
.gd.on .m-warn, .gd.on .m-ok { opacity: 1; transform: none; }
/* 偽物のサイト：アドレスのうち1文字だけ違う所が赤くなり、「偽物のサイトです」で止まる */
.m-url { display: flex; align-items: center; justify-content: center; gap: 8px; height: 42px; border-radius: 21px; background: var(--sunken); }
.m-url svg { width: 17px; height: 17px; color: var(--ink-2); flex: none; }
.m-url b { font-family: var(--latin); font-weight: 800; font-size: 16px; white-space: nowrap; }
.m-url i, .addr em { font-style: normal; border-radius: 4px; transition: background-color .3s, color .3s; }
.gd-site.on .m-url i, .gd-addr.on .now .addr em { background: var(--down); color: #fff; box-shadow: 0 0 0 2px var(--down); }
.m-state { display: grid; place-items: center; min-height: 48px; border-radius: 14px; background: var(--sunken); transition: background-color .35s; }
.m-state > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; font-weight: 900; font-size: 16px; white-space: nowrap; transition: opacity .3s, transform .45s var(--ease-pop); }
.st-wait { color: var(--ink-2); }
.st-wait .dots i { background: var(--ink-3); }
.st-bad { color: var(--down); opacity: 0; transform: translateY(8px); }
.st-bad svg { width: 20px; height: 20px; }
.gd-site.on .st-wait { opacity: 0; transform: translateY(-8px); }
.gd-site.on .st-bad { opacity: 1; transform: none; }
.gd-site.on .m-state { background: var(--down-soft); }
/* 署名の前に結果：出ていく額が赤く光り、「受け取るものがありません」 */
.gd-sign.on .out { background: var(--down-soft); box-shadow: inset 0 0 0 2px var(--down); }
.gd-sign.on .out b { color: var(--down); }
/* あやしい送り先：いつもの送り先と、1文字だけ似せたアドレス */
.m-row b.addr { display: inline-block; letter-spacing: .02em; }
/* 送り先は、名前の下にアドレス（狭い幅でも横に並べずに収まる） */
.gd-addr .m-row { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; min-height: 58px; padding: 6px 12px; }
.gd-addr .m-row span { font-size: 15px; line-height: 1.35; }
.addr em { display: inline; }
.gd-addr.on .now { background: var(--down-soft); box-shadow: inset 0 0 0 2px var(--down); }
/* 許可の取り消し：2つ目のつないだサイトのスイッチが切れ、「取り消しました」 */
.fav { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; font-style: normal; font-family: var(--latin); font-weight: 900; font-size: 13px; }
.tg { position: relative; width: 44px; height: 26px; border-radius: 13px; background: var(--up); transition: background-color .3s; flex: none; }
.tg::after { content: ""; position: absolute; left: 21px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .4s var(--ease-pop); }
.gd-revoke.on .s2 .tg { background: #CFC6C2; }
.gd-revoke.on .s2 .tg::after { transform: translateX(-18px); }

/* とても狭いスマホ（360px 未満）：見本の小さな画面を広げ、行のコインの絵を省く */
@media (max-width: 359px) { .mini { width: calc(100% - 16px); } .m-row img { display: none; } }

/* ⑨ あなたの言葉で：あいさつのステッカー。押すとその言語のページへ。今の言語に印 */
.world { text-align: center; }
.hello { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 12px; max-width: 760px; margin: 36px auto 0; }
.hl { display: block; transition: transform .4s var(--ease-pop); }
/* 傾きは中の札に付ける（外側は出てくる動きで transform を使うため） */
.hl-in { position: relative; display: grid; justify-items: center; gap: 2px; min-width: 128px; padding: 14px 20px 12px; border-radius: 24px; background: var(--card); box-shadow: var(--shadow-card); transform: rotate(var(--r, 0deg)); }
.hl-flag { width: 26px; height: 26px; margin-bottom: 4px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(74, 66, 61, .12); }
.hl b { font-size: clamp(22px, 6vw, 28px); line-height: 1.3; white-space: nowrap; }
.hl small { color: var(--ink-2); font-size: 15px; font-weight: 800; white-space: nowrap; }
.hl[aria-current] .hl-in { box-shadow: inset 0 0 0 2.5px var(--rose), var(--shadow-card); }
.hl[aria-current] b { color: var(--rose); }
.hl-ok { position: absolute; right: -8px; top: -8px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--rose); color: #fff; }
.hl-ok svg { width: 16px; height: 16px; }
.hl:active .hl-in { transform: rotate(var(--r, 0deg)) scale(.95); }
/* 夜の章のあとは、朝の光のような淡いさくら色を後ろに */
.world::before { content: ""; position: absolute; left: 50%; top: 40%; width: min(140vw, 900px); height: 520px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(248, 220, 228, .75), rgba(248, 220, 228, 0)); pointer-events: none; z-index: -1; }
.world { isolation: isolate; overflow: hidden; overflow: clip; }
.hl[lang="ja"], .lm-item[lang="ja"], .foot-langs a[lang="ja"] { font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif; }
.hl[lang="ko"], .lm-item[lang="ko"], .foot-langs a[lang="ko"] { font-family: "Nunito", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; }
.hl[lang="zh"], .lm-item[lang="zh"], .foot-langs a[lang="zh"] { font-family: "Nunito", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif; }

/* ⑩ さいごに：はじめのコインがポケットに入り、マスコットがよろこぶ */
.end { display: grid; justify-items: center; text-align: center; padding-top: 64px; padding-bottom: 110px; overflow: hidden; }
.end-stage { position: relative; width: min(62vw, 280px); aspect-ratio: 1.15; margin-bottom: 10px; }
.end-mascot { position: absolute; left: 50%; top: 56%; width: 64%; transform: translate(-50%, -50%); }
.ec { position: absolute; left: calc(50% + var(--x) * 40%); top: calc(54% + var(--y) * 40%); width: 19%; height: auto; margin: -9.5% 0 0 -9.5%; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px #fff, 0 10px 20px -10px rgba(74, 66, 61, .35); rotate: var(--r); opacity: 0; transform: scale(.4); }
.end.go .ec { animation: ecIn .6s var(--ease-pop) var(--d) both; }
.end.eat .ec { animation: ecEat .7s cubic-bezier(.5, 0, .75, .3) calc(var(--d) * 2.2) both; }
.h-end { font-weight: 900; font-size: clamp(32px, 8.6vw, 66px); line-height: 1.25; }
.end .btn { margin-top: 26px; }
.petals { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.petal { position: absolute; top: -30px; width: 16px; height: 16px; animation: fall linear forwards; }
.petal svg { width: 100%; height: 100%; animation: sway 2.6s ease-in-out infinite alternate; }

.foot { display: grid; justify-items: center; gap: 6px; padding: 44px var(--gutter) calc(44px + env(safe-area-inset-bottom, 0px)); border-top: 1.5px solid var(--line); color: var(--ink-2); text-align: center; }
.foot p { font-size: 15px; }
.foot small { font-family: var(--latin); font-size: 14px; }
/* 利用規約・プライバシーポリシー（英語だけ）への入口 */
.foot-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 18px; }
.foot-legal a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 700; color: var(--ink-2); }

/* 画面の外の章は、くり返しの動きを止めておく（JS が見えているかを見て .paused を付ける） */
.paused, .paused *, .paused *::before, .paused *::after { animation-play-state: paused !important; }

/* 出てくる動き（JS が動く前は見えたまま。JS が .js を付けてから隠す） */
.js .rise, .js .reveal { opacity: 0; transform: translateY(26px); }
.js .pop { opacity: 0; transform: translateY(30px) scale(.9); }

/* ───────── PC ───────── */
@media (min-width: 900px) {
  :root { --gutter: 40px; }
  .nav { height: 76px; }
  .brand img:first-child { width: 42px; }
  .brand .wordmark { width: 112px; }
  .hero { display: grid; align-items: center; padding-top: 110px; }
  .hero-in { grid-template-columns: 1.15fr .85fr; align-items: center; text-align: left; justify-items: start; gap: 40px; }
  .h-hero { font-size: min(4.2vw, 62px); }
  .hero-copy { justify-items: start; gap: 22px; }
  .hero-copy .stores { justify-content: flex-start; }
  .hero-actions { margin-top: 30px; }
  .stores { gap: 14px; }
  .hero-stage { --W: min(36vw, 470px); justify-self: center; }
  .sec { padding: 140px var(--gutter); }
  .h-sec { font-size: clamp(30px, 3.5vw, 50px); }
  .tiles { gap: 20px; max-width: 760px; }
  .tile { padding: 36px 10px 30px; border-radius: 34px; }
  /* 端末を固定して、手順に合わせて画面が切り替わる */
  .story-body { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
  .story-phone { display: block; position: sticky; top: calc(50vh - 330px); justify-self: center; width: 320px; }
  .story-phone .phone { aspect-ratio: 390 / 844; }
  .story-phone .scr { position: absolute; inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px); object-fit: cover; opacity: 0; transform: translateY(30px) scale(.96); transition: opacity .45s, transform .7s var(--ease-pop); }
  .story-phone .scr.on { opacity: 1; transform: none; }
  .steps { gap: 0; }
  .step { min-height: 78vh; align-content: center; justify-items: start; text-align: left; opacity: .28; transition: opacity .45s; }
  .step.on { opacity: 1; }
  .step .phone.mini { display: none; }
  /* 2列×3段（見出しはどれも1行に収まる） */
  .bento { grid-template-columns: 1fr 1fr; gap: 20px; }
  .k-demo { height: 200px; }
  .night { margin: 40px 24px; border-radius: 64px; }
  .night .sec { padding-top: 110px; padding-bottom: 110px; }
  .hello { max-width: 1000px; }
  .world { padding-bottom: 80px; }
  .proof { grid-template-columns: 1fr 1fr; gap: 20px; }
  .guard .gd-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .pf-demo, .gd-demo { height: 230px; }
  .pf, .gd { padding: 20px 20px 26px; }
  .hello { gap: 18px 16px; }
  .hl-in { min-width: 150px; padding: 18px 26px 14px; }
  .end-stage { width: 300px; }
  .cn { height: 84px; padding: 0 30px 0 14px; }
  .cn img { width: 56px; height: 56px; }
}


/* 広い PC では、あいさつの札を1列に */
@media (min-width: 1100px) { .hello { flex-wrap: nowrap; } }

/* マウスのある端末だけ：ステッカーをつまめる・ホバーの反応 */
@media (hover: hover) and (pointer: fine) {
  .st { cursor: grab; }
  .st.held { cursor: grabbing; scale: 1.08; box-shadow: 0 0 0 5px #fff, 0 22px 36px -12px rgba(74, 66, 61, .4); }
  .btn:hover { transform: translateY(-2px); }
  .nav-cta:hover { background: var(--sakura-mist); }
  .lm-btn:hover { background: var(--card); box-shadow: var(--ring-line); }
  .lm-item:hover { background: var(--sakura-mist); }
  .foot-langs a:hover { color: var(--rose); }
  .hl:hover .hl-in { transform: rotate(var(--r, 0deg)) translateY(-4px); transition: transform .4s var(--ease-pop); }
  .foot-legal a:hover { color: var(--rose); }
  .tile:hover { transform: translateY(-4px); transition: transform .45s var(--ease-pop); }
}

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes bobi { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 9px)); } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-8px) rotate(-2deg); } 75% { transform: translateY(-4px) rotate(2deg); } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes hop { 0% { transform: translateY(0) scale(1, 1); } 25% { transform: translateY(6px) scale(1.06, .92); } 55% { transform: translateY(-34px) scale(.96, 1.05); } 80% { transform: translateY(0) scale(1.04, .96); } 100% { transform: translateY(0) scale(1, 1); } }
@keyframes jump { 0% { transform: scale(1); } 30% { transform: translateY(6px) scale(1.12, .86); } 60% { transform: translateY(-26px) scale(.94, 1.08) rotate(14deg); } 100% { transform: none; } }
@keyframes arrowDown { 0% { transform: translateY(-5px); opacity: 0; } 30% { opacity: 1; } 60%, 100% { transform: translateY(2px); opacity: 1; } }
@keyframes arrowUp { 0% { transform: translateY(5px); opacity: 0; } 30% { opacity: 1; } 60%, 100% { transform: translateY(-2px); opacity: 1; } }
@keyframes swapR { 0%, 100% { transform: translateX(-2px); } 50% { transform: translateX(3px); } }
@keyframes swapL { 0%, 100% { transform: translateX(2px); } 50% { transform: translateX(-3px); } }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.55); opacity: .55; } }
@keyframes ring { 0% { transform: rotate(0); } 15% { transform: rotate(18deg); } 30% { transform: rotate(-16deg); } 45% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 75% { transform: rotate(4deg); } 100% { transform: rotate(0); } }
@keyframes scanline { 0% { top: 18%; opacity: 0; } 15% { opacity: 1; } 50% { top: 80%; opacity: 1; } 65% { opacity: 0; } 100% { top: 80%; opacity: 0; } }
@keyframes coinOut { 0% { opacity: 0; transform: translate(-6px, 10px) scale(.5); } 22% { opacity: 1; transform: translate(4px, -6px) scale(1); } 100% { opacity: 0; transform: translate(64px, -62px) scale(.7) rotate(25deg); } }
@keyframes hopOver { 0% { opacity: 0; left: calc(50% - 86px); top: 50%; } 12% { opacity: 1; } 50% { top: 18%; } 88% { opacity: 1; } 100% { opacity: 0; left: calc(50% + 86px); top: 50%; } }
@keyframes ecIn { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes ecEat { 0% { opacity: 1; transform: none; left: calc(50% + var(--x) * 40%); top: calc(54% + var(--y) * 40%); } 40% { opacity: 1; top: calc(30% + var(--y) * 20%); } 100% { opacity: 0; transform: scale(.5); left: 50%; top: 52%; } }
@keyframes feeGlow { 0% { opacity: 0; transform: scale(.4); } 35% { opacity: 1; transform: scale(1.1); } 100% { opacity: .35; transform: scale(1); } }
@keyframes sparkle { 0% { opacity: 0; transform: scale(0) rotate(0); } 40% { opacity: 1; transform: scale(1.2) rotate(45deg); } 100% { opacity: 0; transform: scale(.6) rotate(90deg); } }
@keyframes coinShine { 0% { transform: scale(.8); box-shadow: 0 0 0 3px #fff; } 35% { transform: scale(1); box-shadow: 0 0 0 3px #fff, 0 0 16px 6px rgba(255, 196, 70, .85); } 100% { transform: scale(.8); box-shadow: 0 0 0 3px #fff, 0 0 10px 2px rgba(255, 196, 70, .45); } }
@keyframes lmIn { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes fall { to { transform: translate3d(var(--dx, 0), 110vh, 0) rotate(var(--rot, 260deg)); } }
@keyframes sway { from { transform: translateX(-10px) rotate(-20deg); } to { transform: translateX(10px) rotate(20deg); } }

/* OS の「動きを減らす」：最後の形で止めて、内容はすべて読める */
@media (prefers-reduced-motion: reduce) {
  .scroll-hint i { animation: none !important; opacity: .7; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rise, .js .reveal, .js .pop { opacity: 1; transform: none; }
  .ec { opacity: 1; transform: none; }
  .fee-board.low .fb-glow { opacity: .35; transform: none; }
}