/* Node Fairies — home page. Colours follow web/fairy/zukan.css and fy.css. */
:root {
  --night: #0b0f1a;
  --ground: #131a26;
  --card: #151d2b;
  --card2: #1a2434;
  --line: #2b3748;
  --ink: #eef2f7;
  --soft: #b4c0cd;
  --faint: #8493a3;
  --lamp: #ffd166;
  --pink: #ff9ecb;
  --sky: #8fd3ff;
  --mint: #8fe3b0;
  --warn: #ffb37a;
  --r: 20px;
  --max: 1120px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); background: var(--night);
  font: 400 16px/1.75 var(--fy-body);
  overflow-x: hidden; min-height: 100vh;
}
[hidden] { display: none !important; }
img, svg, video { max-width: 100%; }
a { color: var(--lamp); }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--lamp); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { font-family: var(--fy-round); line-height: 1.25; margin: 0; overflow-wrap: break-word; text-wrap: balance; }
p { margin: 0; overflow-wrap: break-word; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--lamp); color: #241b05; padding: 10px 14px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.center { text-align: center; }

/* ---------- night sky ---------- */
.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1200px 700px at 78% -8%, rgba(104, 87, 214, .34), transparent 62%),
    radial-gradient(900px 600px at 6% 12%, rgba(40, 110, 190, .25), transparent 60%),
    radial-gradient(900px 700px at 50% 110%, rgba(255, 143, 177, .10), transparent 60%),
    linear-gradient(180deg, #0a0d1c 0%, #0d1322 45%, #0b0f1a 100%);
}
.stars { position: absolute; inset: 0; background-repeat: repeat; }
.s1 { background-image: radial-gradient(1.2px 1.2px at 20px 30px, #fff, transparent 60%), radial-gradient(1px 1px at 140px 90px, #cfe0ff, transparent 60%), radial-gradient(1.4px 1.4px at 260px 190px, #fff, transparent 60%), radial-gradient(1px 1px at 90px 240px, #ffe9b0, transparent 60%); background-size: 320px 300px; opacity: .55; }
.s2 { background-image: radial-gradient(1px 1px at 60px 120px, #fff, transparent 60%), radial-gradient(1.6px 1.6px at 210px 40px, #d9ceff, transparent 60%), radial-gradient(1px 1px at 330px 260px, #fff, transparent 60%); background-size: 420px 380px; opacity: .4; }
.s3 { background-image: radial-gradient(2px 2px at 110px 70px, #fff, transparent 60%), radial-gradient(1.8px 1.8px at 430px 310px, #ffe9b0, transparent 60%); background-size: 560px 520px; opacity: .5; }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 30; background: rgba(11, 15, 26, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, .07); }
.top-in { max-width: var(--max); margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 14px; position: relative; }
.brand { display: inline-flex; align-items: center; gap: 8px; font: 900 19px/1 var(--fy-round); color: var(--ink); text-decoration: none; white-space: nowrap; }
.ver { align-self: center; margin-left: 2px; padding: 2px 6px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; font: 600 10px/1.2 var(--fy-body); letter-spacing: .04em; color: var(--faint); white-space: nowrap; }
.brand-mark { width: 26px; height: 26px; flex: none; display: inline-block; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 17C9 4 1 8 4 15c2 5 8 5 12 2z' fill='%238fd3ff' opacity='.85'/%3E%3Cpath d='M16 17c7-13 15-9 12-2-2 5-8 5-12 2z' fill='%23ff9ecb' opacity='.85'/%3E%3Ccircle cx='16' cy='18' r='6.5' fill='%23ffd166'/%3E%3Ccircle cx='13.6' cy='17.4' r='1.1' fill='%23241b05'/%3E%3Ccircle cx='18.4' cy='17.4' r='1.1' fill='%23241b05'/%3E%3Cpath d='M14 20.2q2 1.6 4 0' stroke='%23241b05' stroke-width='1.1' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }
.nav { display: flex; gap: 2px; margin-left: auto; flex-wrap: nowrap; }
.nav a { color: var(--soft); text-decoration: none; font-size: 14px; font-weight: 500; padding: 8px 10px; border-radius: 999px; white-space: nowrap; }
.nav a:hover, .nav a.on { color: var(--ink); background: rgba(255, 255, 255, .08); }
.top-lang { flex: none; }
.menu-btn { display: none; margin-left: auto; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: var(--ground); cursor: pointer; align-items: center; justify-content: center; }
.menu-ico, .menu-ico::before, .menu-ico::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); position: relative; content: ""; }
.menu-ico::before { position: absolute; top: -6px; }
.menu-ico::after { position: absolute; top: 6px; }
@media (max-width: 1060px) {
  .menu-btn { display: inline-flex; }
  .nav { display: none; position: absolute; right: 12px; left: 12px; top: calc(100% + 6px); margin: 0; flex-direction: column; background: #121a28; border: 1px solid var(--line); border-radius: 16px; padding: 8px; box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
  .nav.open { display: flex; }
  .nav a { font-size: 16px; padding: 12px 14px; border-radius: 10px; white-space: normal; }
}

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 22px; border-radius: 999px; font: 700 16px/1.2 var(--fy-round); text-decoration: none; text-align: center; color: var(--ink); background: #223047; border: 1px solid #3a4b66; transition: transform .15s, background .15s, box-shadow .15s; }
.btn:hover { background: #2b3c59; transform: translateY(-1px); }
.btn.primary { background: linear-gradient(180deg, #ffdc85, #ffc23d); color: #241b05; border-color: #ffd166; box-shadow: 0 6px 22px rgba(255, 209, 102, .28); }
.btn.primary:hover { background: linear-gradient(180deg, #ffe49d, #ffca55); }
.btn.ghost { background: transparent; border-color: #45566f; color: var(--ink); }
.btn.ghost:hover { background: rgba(255, 255, 255, .06); }
.cta { display: flex; flex-wrap: wrap; gap: 10px; }
.cta.center { justify-content: center; }

/* ---------- fairy holders ---------- */
.fa { display: block; aspect-ratio: 1 / 1; width: 100%; position: relative; }
.fa > svg { display: block; width: 100%; height: 100%; }
.fa:empty { background: radial-gradient(closest-side, rgba(143, 211, 255, .10), transparent 70%); border-radius: 50%; }
.fa.flip > svg { transform: scaleX(-1); }

/* ---------- hero ---------- */
.hero { padding: 34px 20px 10px; }
.hero-in { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 24px; align-items: center; }
.hero h1 { font-size: clamp(34px, 5.4vw, 62px); font-weight: 900; letter-spacing: -.01em; line-height: 1.12; }
.h1-a { display: block; background: linear-gradient(100deg, #ffe7a8, #ffb7d9 55%, #a9dcff); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.h1-b { display: block; }
.hero-lead { margin-top: 18px; font-size: clamp(16px, 1.5vw, 18.5px); color: #d5dde7; max-width: 34em; }
.hero .cta { margin-top: 24px; }
.hero-note { margin-top: 12px; font-size: 13.5px; color: var(--faint); max-width: 36em; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 20px 0 0; }
.chips li { font-size: 12.5px; font-weight: 600; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line); color: var(--soft); background: rgba(255, 255, 255, .03); }

.hero-side { min-width: 0; display: flex; flex-direction: column; }
.hero-side .hero-art { order: -1; }
/* 紹介動画（あるときだけ出る。ないときは妖精の絵） */
.hero.has-video .hero-art { max-width: 300px; margin: -8px auto 4px; }
.hero.has-video .hero-in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 36px; }
.hero-media { position: relative; margin: 0; }
.hero-video { position: relative; z-index: 1; border-radius: 22px; overflow: hidden; background: #05070d; border: 1px solid rgba(255, 209, 102, .35); box-shadow: 0 0 0 6px rgba(143, 211, 255, .06), 0 26px 70px rgba(0, 0, 0, .55), 0 0 60px rgba(255, 209, 102, .12); aspect-ratio: 16 / 9; }
.hero-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-media-bar { display: flex; align-items: center; gap: 12px 14px; flex-wrap: wrap; margin-top: 14px; }
.hero-media-cap { font-size: 13.5px; color: var(--faint); }
.snd { min-height: 44px; padding: 8px 18px 8px 14px; gap: 8px; font-size: 15px; }
.snd.on { background: rgba(255, 209, 102, .16); border-color: rgba(255, 209, 102, .6); color: #ffe2a0; }
.snd-ico { width: 20px; height: 20px; flex: none; background: currentColor; -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h4l5-4v14l-5-4H3z' fill='black'/%3E%3Cpath d='M16 8.5a5 5 0 0 1 0 7M18.5 6a8.5 8.5 0 0 1 0 12' stroke='black' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h4l5-4v14l-5-4H3z' fill='black'/%3E%3Cpath d='M16 8.5a5 5 0 0 1 0 7M18.5 6a8.5 8.5 0 0 1 0 12' stroke='black' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }
.snd.on .snd-ico { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h4l5-4v14l-5-4H3z' fill='black'/%3E%3Cpath d='M16 9l6 6M22 9l-6 6' stroke='black' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h4l5-4v14l-5-4H3z' fill='black'/%3E%3Cpath d='M16 9l6 6M22 9l-6 6' stroke='black' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }

.hero-art { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 560px; margin: 0 auto; }
.hero-art::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 209, 102, .20), rgba(143, 211, 255, .10) 55%, transparent 72%); }
.hf { position: absolute; width: 26%; }
.hf:empty { background: none; }
.hf1 { width: 62%; left: 19%; top: 17%; z-index: 3; }
.hf2 { left: 1%; top: 6%; width: 30%; }
.hf3 { right: 0; top: 2%; width: 31%; }
.hf4 { left: -2%; top: 46%; width: 25%; }
.hf5 { left: 10%; bottom: 0; width: 24%; z-index: 4; }
.hf6 { right: -1%; top: 44%; width: 27%; }
.hf7 { right: 9%; bottom: -1%; width: 27%; z-index: 4; }
.hf8 { left: 39%; bottom: -3%; width: 20%; z-index: 5; }
.hf9 { left: 37%; top: -3%; width: 21%; }
.spark { position: absolute; width: 14px; height: 14px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0c1 6 4 9 10 10-6 1-9 4-10 10-1-6-4-9-10-10 6-1 9-4 10-10z' fill='%23ffe9b0'/%3E%3C/svg%3E"); opacity: .9; z-index: 6; }
.sp1 { left: 30%; top: 14%; } .sp2 { right: 26%; top: 30%; width: 10px; height: 10px; } .sp3 { left: 8%; top: 38%; width: 9px; height: 9px; }
.sp4 { right: 6%; top: 76%; } .sp5 { left: 30%; bottom: 20%; width: 8px; height: 8px; } .sp6 { right: 34%; top: 6%; width: 18px; height: 18px; }

.facts { max-width: var(--max); margin: 34px auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.facts div { background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .09); border-radius: 18px; padding: 16px 14px; text-align: center; }
.facts dt { font: 900 clamp(24px, 3.2vw, 34px)/1.1 var(--fy-round); color: var(--lamp); }
.facts dd { margin: 4px 0 0; font-size: 13.5px; color: var(--soft); line-height: 1.4; }

/* ---------- sections ---------- */
.sec { max-width: var(--max); margin: 0 auto; padding: 84px 20px 0; }
.sec-head { text-align: center; max-width: 760px; margin: 0 auto 34px; }
.eyebrow { display: inline-block; font: 700 13px/1 var(--fy-round); letter-spacing: .08em; text-transform: uppercase; color: var(--sky); padding: 7px 14px; border-radius: 999px; background: rgba(143, 211, 255, .10); border: 1px solid rgba(143, 211, 255, .25); margin-bottom: 14px; }
:root:lang(ja) .eyebrow, :root:lang(zh) .eyebrow, :root:lang(ko) .eyebrow { letter-spacing: .04em; }
.sec h2 { font-size: clamp(26px, 3.6vw, 40px); font-weight: 900; }
.sec-lead { margin-top: 12px; color: #cbd5e0; font-size: 17px; }
.sub { font-size: clamp(20px, 2.2vw, 25px); font-weight: 900; margin: 46px 0 14px; display: flex; align-items: center; gap: 10px; }
.sub::before { content: ""; width: 10px; height: 22px; border-radius: 6px; background: linear-gradient(180deg, var(--lamp), var(--pink)); flex: none; }
.split .sub { margin-top: 0; }
.sec h4 { font-size: 17px; margin: 22px 0 8px; color: var(--lamp); }
.fine { font-size: 13.5px; color: var(--faint); line-height: 1.65; margin-top: 12px; }
.sec > p { color: #cbd5e0; }

.cards { display: grid; gap: 16px; }
.cards.awk { margin-top: 26px; }
.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 26px; }
.card { background: linear-gradient(180deg, var(--card2), var(--card)); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.card h3 { font-size: 19px; font-weight: 900; }
.card p { color: #c5cfdb; font-size: 15px; line-height: 1.7; }
.card-art { border-radius: 14px; overflow: hidden; background: radial-gradient(120% 90% at 50% 100%, rgba(143, 211, 255, .16), transparent 60%), #0e1422; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; gap: 0; }
.card-art > .fa[data-scene], .step-art > .fa[data-scene] { width: 100%; height: auto; }
.card-art > .fa { width: auto; height: 100%; flex: none; }
.card-art.duo > .fa { height: 82%; margin: 0 -4%; }
.card-art.trio > .fa { height: 46%; margin: 0 -3%; }
.card-art.trio > .fa:nth-child(2) { height: 56%; z-index: 1; }
.card-art.items > .fa { height: 27%; margin: 0 1%; }
.card.wide .card-art { aspect-ratio: 16 / 6; }
.card-art.merge > .fa { height: 84%; margin: 0 2%; }
.plus, .arrow { flex: none; width: 30px; height: 30px; background: no-repeat center / contain; }
.plus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v16M4 12h16' stroke='%23ffd166' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.arrow { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' stroke='%23ffd166' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.vs-mark { font: 900 22px/1 var(--fy-round); color: var(--lamp); z-index: 2; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.ico-safe, .ico-dice, .ico-wallet { width: 46%; max-width: 150px; aspect-ratio: 1 / 1; background: no-repeat center / contain; }
.ico-safe { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M60 10l38 13v30c0 27-17 45-38 57C39 98 22 80 22 53V23z' fill='%231d2b44' stroke='%238fd3ff' stroke-width='4' stroke-linejoin='round'/%3E%3Crect x='42' y='54' width='36' height='28' rx='6' fill='%23ffd166'/%3E%3Cpath d='M48 54v-8a12 12 0 0124 0v8' fill='none' stroke='%23ffd166' stroke-width='6' stroke-linecap='round'/%3E%3Ccircle cx='60' cy='66' r='4.5' fill='%23241b05'/%3E%3Cpath d='M60 68v7' stroke='%23241b05' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ico-dice { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Ccircle cx='60' cy='60' r='46' fill='none' stroke='%23c9b8ff' stroke-width='3' stroke-dasharray='3 9' stroke-linecap='round'/%3E%3Crect x='30' y='30' width='60' height='60' rx='14' fill='%231d2b44' stroke='%23ff9ecb' stroke-width='4' transform='rotate(12 60 60)'/%3E%3Cg fill='%23ffd166' transform='rotate(12 60 60)'%3E%3Ccircle cx='46' cy='46' r='5'/%3E%3Ccircle cx='74' cy='46' r='5'/%3E%3Ccircle cx='60' cy='60' r='5'/%3E%3Ccircle cx='46' cy='74' r='5'/%3E%3Ccircle cx='74' cy='74' r='5'/%3E%3C/g%3E%3Cpath d='M98 14c1 5 3 7 8 8-5 1-7 3-8 8-1-5-3-7-8-8 5-1 7-3 8-8z' fill='%23ffe9b0'/%3E%3C/svg%3E"); }
.ico-wallet { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Crect x='16' y='34' width='88' height='62' rx='14' fill='%231d2b44' stroke='%238fd3ff' stroke-width='4'/%3E%3Cpath d='M26 34l52-16c6-2 10 2 10 8v8' fill='none' stroke='%238fd3ff' stroke-width='4' stroke-linejoin='round'/%3E%3Crect x='70' y='54' width='40' height='24' rx='10' fill='%23ffd166'/%3E%3Ccircle cx='84' cy='66' r='5' fill='%23241b05'/%3E%3C/svg%3E"); }

.good, .note { margin-top: 22px; border-radius: var(--r); padding: 22px 24px; border: 1px solid rgba(143, 227, 176, .3); background: linear-gradient(180deg, rgba(143, 227, 176, .08), rgba(143, 227, 176, .02)); }
.note { border-color: rgba(255, 209, 102, .3); background: linear-gradient(180deg, rgba(255, 209, 102, .07), rgba(255, 209, 102, .02)); }
.good h3, .note h3 { font-size: 19px; margin-bottom: 10px; }
.note p { color: #c5cfdb; font-size: 15px; }
ul.ticks, ul.dots, ul.crosses { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ticks li, .dots li, .crosses li { position: relative; padding-left: 28px; color: #d0d9e3; font-size: 15px; line-height: 1.65; }
.ticks li::before, .dots li::before, .crosses li::before { content: ""; position: absolute; left: 0; top: .32em; width: 18px; height: 18px; background: no-repeat center / contain; }
.ticks li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%238fe3b0'/%3E%3Cpath d='M5.5 10.5l3 3 6-7' stroke='%230b2a18' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.dots li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2c.8 4.6 3.4 7.200 8 8-4.600.8-7.200 3.400-8 8-.8-4.600-3.400-7.200-8-8 4.600-.8 7.200-3.400 8-8z' fill='%23ffd166'/%3E%3C/svg%3E"); }
.crosses li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='none' stroke='%23ff9ecb' stroke-width='2'/%3E%3Cpath d='M6.500 6.500l7 7M13.500 6.500l-7 7' stroke='%23ff9ecb' stroke-width='2.200' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* ---------- steps ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: step; }
.step { counter-increment: step; position: relative; background: linear-gradient(180deg, var(--card2), var(--card)); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px 20px; min-width: 0; }
.step::before { content: counter(step); position: absolute; left: 14px; top: 14px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 900 19px/1 var(--fy-round); color: #241b05; background: linear-gradient(180deg, #ffe08f, #ffc23d); box-shadow: 0 4px 14px rgba(0, 0, 0, .4); }
.step-art { border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; background: radial-gradient(120% 90% at 50% 100%, rgba(255, 158, 203, .14), transparent 60%), #0e1422; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.step-art > .fa { width: auto; height: 100%; flex: none; }
.step-art.duo > .fa { height: 80%; margin: 0 -3%; }
.step h3 { font-size: 19px; font-weight: 900; margin-bottom: 6px; }
.step p { color: #c5cfdb; font-size: 15px; line-height: 1.7; }

/* ---------- tables ---------- */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
.tbl th, .tbl td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(255, 255, 255, .07); line-height: 1.5; }
.tbl thead th { font: 700 13px/1.3 var(--fy-body); color: var(--faint); background: rgba(255, 255, 255, .03); }
.tbl tbody th { font: 700 15.5px/1.4 var(--fy-round); color: var(--ink); white-space: nowrap; }
.tbl tbody tr:last-child th, .tbl tbody tr:last-child td { border-bottom: 0; }
.tbl td { color: #cdd6e0; }

.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 40px; align-items: start; }
.split p { color: #c5cfdb; font-size: 15.5px; }
.foods { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.foods li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-size: 15px; }
.foods b { font-family: var(--fy-round); }
.foods li > span:last-child { color: var(--lamp); font-weight: 600; font-size: 14px; }
.fd { width: 26px; height: 26px; border-radius: 50%; }
.fd1 { background: radial-gradient(circle at 35% 30%, #fff3c4, #ffc94d 60%, #e09a17); }
.fd2 { background: radial-gradient(circle at 35% 30%, #ffc0a8, #ff6b57 60%, #b8321f); border-radius: 46% 54% 50% 50%; }
.fd3 { background: radial-gradient(circle at 35% 30%, #c9f5c1, #5fcf80 60%, #2b8a4a); border-radius: 4px 60% 4px 60%; }
.fd4 { background: radial-gradient(circle at 35% 30%, #e3f6ff, #6dc6ff 60%, #2f7fd0); border-radius: 50% 50% 50% 50% / 62% 62% 40% 40%; }
.fd5 { background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0c1 6 4 9 10 10-6 1-9 4-10 10-1-6-4-9-10-10 6-1 9-4 10-10z' fill='%23d9ceff'/%3E%3C/svg%3E"); border-radius: 0; }

.moods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
figure { margin: 0; min-width: 0; }
.moods figure, .stages figure, .forms figure, .tiers figure, .towns figure { text-align: center; }
figcaption { display: grid; gap: 2px; margin-top: 6px; }
figcaption b { font: 700 15px/1.3 var(--fy-round); overflow-wrap: anywhere; }
figcaption span { font-size: 12.5px; color: var(--soft); line-height: 1.4; }
.moods figure { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 6px 4px 10px; }
.moods figcaption b { font-size: 13px; }

.stages { display: grid; grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr) 30px minmax(0, 1.15fr) 30px minmax(0, 1.3fr); gap: 6px; align-items: center; background: linear-gradient(180deg, var(--card2), var(--card)); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 18px; }
.stages figcaption b { font-size: 17px; }
.forms { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.forms figure { background: linear-gradient(180deg, var(--card2), var(--card)); border: 1px solid var(--line); border-radius: 16px; padding: 8px 8px 14px; }

.wheel { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 400px; margin: 0 auto; }
.wheel-ring { position: absolute; inset: 0; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='38' fill='none' stroke='%23ffd166' stroke-opacity='.45' stroke-width='.8' stroke-dasharray='1.500 2.500'/%3E%3Cg fill='%23ffd166'%3E%3Cpath d='M-2.600 -2.200L2.600 0L-2.600 2.200z' transform='translate(72.300 19.300) rotate(36)'/%3E%3Cpath d='M-2.600 -2.200L2.600 0L-2.600 2.200z' transform='translate(86.100 61.700) rotate(108)'/%3E%3Cpath d='M-2.600 -2.200L2.600 0L-2.600 2.200z' transform='translate(50 88) rotate(180)'/%3E%3Cpath d='M-2.600 -2.200L2.600 0L-2.600 2.200z' transform='translate(13.900 61.700) rotate(252)'/%3E%3Cpath d='M-2.600 -2.200L2.600 0L-2.600 2.200z' transform='translate(27.700 19.300) rotate(324)'/%3E%3C/g%3E%3C/svg%3E"); }
.el { position: absolute; width: 30%; transform: translate(-50%, -50%); text-align: center; z-index: 1; }
.el b { display: block; margin-top: -8px; font: 900 14px/1.2 var(--fy-round); }
.el1 { left: 50%; top: 13%; } .el1 b { color: #7fe09a; }
.el2 { left: 86%; top: 39%; } .el2 b { color: #f0c154; }
.el3 { left: 72.300%; top: 81%; } .el3 b { color: #93acff; }
.el4 { left: 27.700%; top: 81%; } .el4 b { color: #ff8d7c; }
.el5 { left: 14%; top: 39%; } .el5 b { color: #e1e8f0; }

.tribes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 16px 0 22px; background: radial-gradient(90% 120% at 50% 100%, rgba(143, 211, 255, .10), transparent 70%), var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; }

/* ---------- rarity ---------- */
.tiers { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; }
.tiers figure { border-radius: 18px; padding: 8px 6px 14px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--card2), var(--card)); }
.tiers figcaption b { font-size: 15.5px; }
.tiers figcaption span { font-weight: 600; color: var(--soft); }
.tiers .t1 { border-color: #6a7f9a; } .tiers .t1 b { color: #e9f3ff; }
.tiers .t2 { border-color: #4fbfae; background: linear-gradient(180deg, rgba(120, 230, 200, .12), var(--card)); } .tiers .t2 b { color: #a5f0dc; }
.tiers .t3 { border-color: #c79a2e; background: linear-gradient(180deg, rgba(255, 209, 102, .14), var(--card)); } .tiers .t3 b { color: #ffd98a; }
.tiers .t4 { border-color: #5f6fd6; background: linear-gradient(180deg, rgba(110, 125, 255, .2), var(--card)); } .tiers .t4 b { color: #b9c3ff; }
.tiers .t5 { border-color: #9d86ee; background: linear-gradient(180deg, rgba(190, 165, 255, .2), var(--card)); } .tiers .t5 b { color: #d9ceff; }
.tiers .t6 { border-color: #ff9ecb; background: linear-gradient(160deg, rgba(255, 209, 102, .2), rgba(255, 143, 216, .16) 45%, rgba(155, 231, 255, .14)); box-shadow: 0 0 26px rgba(255, 143, 216, .22); } .tiers .t6 b { color: #ffd6f2; }

/* ---------- towns ---------- */
.chains { margin-top: 10px; }
.chains > p { color: #c5cfdb; }
.towns { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.towns .fa { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
.towns figcaption b { font-size: 14.5px; }

/* ---------- fees ---------- */
.feegrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.fee { background: linear-gradient(180deg, var(--card2), var(--card)); border: 1px solid var(--line); border-radius: 18px; padding: 18px 14px; text-align: center; display: grid; gap: 4px; }
.fee b { font: 900 30px/1.1 var(--fy-round); color: var(--lamp); }
.fee b small { font-size: 14px; color: var(--soft); font-weight: 700; }
.fee span { color: #cdd6e0; font-size: 15px; line-height: 1.5; }
.fee.free { grid-column: 1 / -1; border-color: rgba(143, 227, 176, .4); background: linear-gradient(180deg, rgba(143, 227, 176, .09), rgba(143, 227, 176, .02)); }
.fee.free b { color: var(--mint); font-size: 26px; }

/* ---------- faq ---------- */
.faq { margin-top: 20px; }
.faq details { border: 1px solid var(--line); border-radius: 14px; background: var(--card); margin-top: 8px; }
.faq summary { cursor: pointer; padding: 15px 46px 15px 18px; font: 700 16.5px/1.45 var(--fy-round); list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 10px; height: 10px; border-right: 2.5px solid var(--lamp); border-bottom: 2.5px solid var(--lamp); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { padding: 0 18px 16px; color: #c9d2dd; font-size: 15.5px; }
.faq-list { margin: -6px 0 0; padding: 0 18px 16px 38px; color: #c9d2dd; font-size: 15px; line-height: 1.6; }
.faq-list li { margin-top: 6px; }
.faq-list li::marker { color: var(--lamp); }

/* ---------- video / screens ---------- */
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; align-items: start; }
.shot { background: linear-gradient(180deg, var(--card2), var(--card)); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 10px 16px; }
.shot-img { border-radius: 12px; overflow: hidden; background: #05070d; aspect-ratio: 16 / 10; }
.shot-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.shot figcaption { padding: 6px 8px 0; text-align: left; }
.shot figcaption b { font-size: 17px; }
.shot figcaption span { font-size: 14px; color: #c5cfdb; line-height: 1.6; }

/* ---------- final / footer ---------- */
.final { text-align: center; padding-bottom: 30px; }
.final-art { display: flex; justify-content: center; align-items: flex-end; margin-bottom: 4px; }
.final-art .fa { width: clamp(90px, 16vw, 170px); margin: 0 -12px; }
.final-art .fa:nth-child(2) { width: clamp(120px, 22vw, 230px); z-index: 1; }
.final .cta { margin-top: 24px; }
.foot { margin-top: 70px; border-top: 1px solid rgba(255, 255, 255, .08); background: rgba(7, 10, 18, .7); padding: 34px 20px 46px; text-align: center; color: var(--faint); font-size: 13.5px; }
.foot p { max-width: 760px; margin: 6px auto 0; }
.foot-brand { display: inline-flex; align-items: center; gap: 8px; font: 900 18px/1 var(--fy-round); color: var(--ink); margin-bottom: 6px !important; }
.foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; margin-top: 18px; }
.foot nav a { color: var(--soft); font-size: 14.5px; padding: 6px 2px; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .rv { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
  .js .rv.in { opacity: 1; transform: none; }
  .hf { animation: hf-bob 6s ease-in-out infinite; }
  .hf2 { animation-duration: 7.200s; animation-delay: -1s; } .hf3 { animation-duration: 6.400s; animation-delay: -2.500s; }
  .hf4 { animation-duration: 8s; animation-delay: -3s; } .hf5 { animation-duration: 5.600s; animation-delay: -1.500s; }
  .hf6 { animation-duration: 7.600s; animation-delay: -4s; } .hf7 { animation-duration: 6.800s; animation-delay: -.500s; }
  .hf8 { animation-duration: 5.200s; animation-delay: -2s; } .hf9 { animation-duration: 8.400s; animation-delay: -3.500s; }
  @keyframes hf-bob { 0%, 100% { transform: translateY(0) rotate(-1.500deg); } 50% { transform: translateY(-12px) rotate(1.500deg); } }
  .spark { animation: sp-tw 2.800s ease-in-out infinite; }
  .sp2 { animation-delay: -.700s; } .sp3 { animation-delay: -1.400s; } .sp4 { animation-delay: -2.100s; } .sp5 { animation-delay: -.300s; } .sp6 { animation-delay: -1.800s; }
  @keyframes sp-tw { 0%, 100% { opacity: .15; transform: scale(.6) rotate(0); } 50% { opacity: 1; transform: scale(1.150) rotate(20deg); } }
  .s1 { animation: st-tw 5s ease-in-out infinite; } .s2 { animation: st-tw 7s ease-in-out -2s infinite; } .s3 { animation: st-tw 9s ease-in-out -4s infinite; }
  @keyframes st-tw { 0%, 100% { opacity: .55; } 50% { opacity: .2; } }
  @keyframes dot { 50% { box-shadow: 0 0 0 8px rgba(255, 209, 102, 0); } }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition: none; } }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .hero-in { grid-template-columns: minmax(0, 1fr); }
  .hero-art { max-width: 460px; order: -1; }
  .hero-side { order: -1; }
  .hero.has-video .hero-in { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .hero-media { max-width: 720px; margin: 0 auto; width: 100%; }
  .c3, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .forms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tiers, .towns { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .feegrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr); }
}
/* 狭い画面では、ベータ版の表示をロゴの文字の下に小さく置く（メニューと言語の欄を押し出さない） */
@media (max-width: 640px) {
  .top .brand { position: relative; }
  .top .ver { position: absolute; left: 34px; top: 100%; margin: 3px 0 0; padding: 0; border: 0; font-size: 9px; line-height: 1; }
}
@media (max-width: 640px) {
  body { font-size: 15.5px; }
  .top-in { padding: 8px 12px; gap: 8px; }
  .brand { font-size: 17px; }
  .hero { padding: 18px 16px 6px; }
  .hero-art { max-width: 330px; }
  .hero-video { border-radius: 16px; }
  .hero.has-video .hero-art { max-width: 200px; margin: -6px auto 2px; }
  .hero-media-bar { margin-top: 10px; gap: 8px 12px; }
  .hero-media-cap { font-size: 12.5px; }
  .sec { padding: 62px 16px 0; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 26px; }
  .c3, .c2, .steps { grid-template-columns: minmax(0, 1fr); }
  .cta .btn { flex: 1 1 auto; }
  .forms, .tiers, .towns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiers .t6 { grid-column: 1 / -1; }
  .tiers .t6 .fa { max-width: 62%; margin: 0 auto; }
  .tribes { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 10px; }
  .moods { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .moods figcaption b { font-size: 12px; }
  .moods figure { padding: 4px 2px 8px; }
  .stages { grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); padding: 14px 10px; row-gap: 14px; }
  .stages .arrow { width: 22px; height: 22px; }
  .stages .arrow:nth-of-type(2) { display: none; }
  .feegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feegrid .fee:nth-child(5) { grid-column: 1 / -1; }
  .fee b { font-size: 25px; }
  .good, .note { padding: 18px 16px; }
  .tablewrap { overflow-x: visible; }
  .tbl { font-size: 14.5px; min-width: 0; display: block; }
  .tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tbl tbody { display: block; }
  .tbl tbody tr { display: block; padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, .09); }
  .tbl tbody tr:last-child { border-bottom: 0; }
  .tbl tbody th { display: block; padding: 0 0 6px; border: 0; font-size: 17px; white-space: normal; }
  .tbl tbody td { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 10px; padding: 4px 0; border: 0; }
  .tbl tbody td::before { content: attr(data-th); color: var(--faint); font-size: 13px; line-height: 1.6; }
  .wheel { max-width: 320px; }
  .el b { font-size: 12.5px; }
}
@media (max-width: 380px) {
  .fy-lang svg { display: none; }
  .brand { font-size: 16px; }
}
:root:lang(ru) .hero h1, :root:lang(es) .hero h1 { font-size: clamp(30px, 4.6vw, 54px); }
:root:lang(ru) h1, :root:lang(ru) h2, :root:lang(ru) h3, :root:lang(es) h1, :root:lang(es) h2 { -webkit-hyphens: auto; hyphens: auto; }
:root:lang(ja) .hero h1, :root:lang(zh) .hero h1, :root:lang(ko) .hero h1 { line-height: 1.25; letter-spacing: 0; }
:root:lang(ja) .hero h1 { font-size: clamp(32px, 4.7vw, 54px); }
:root:lang(ja) h1, :root:lang(ja) h2, :root:lang(ja) h3, :root:lang(ja) .sec-head p { word-break: auto-phrase; }
.sec-head p { text-wrap: balance; }
:root:lang(ja) body, :root:lang(zh) body, :root:lang(ko) body { line-height: 1.85; }
:root:lang(ko) h1, :root:lang(ko) h2, :root:lang(ko) h3, :root:lang(ko) p, :root:lang(ko) li { word-break: keep-all; }