/* ハジキッズ 公式サイト。見た目の正は docs/prototype/top.html（所有者承認済み）。
   書体は Adobe Fonts（キット ixr2vua、js/typekit.js が読む）:
     見出し ロゴカット（**漢字を持たない。見出しはカタカナだけ**）／UI コーポレート・ロゴ／アクセント 金閣寺／本文 小塚ゴシック */
:root {
  --paper: #f6f7f0;
  --ink: #021029;
  --red: #dc1443;
  --sky: #1c92d2;
  --sky-pale: #cfeaf7;
  --lime: #dfe85a;
  --lime-pale: #eef3c4;
  --crown: #ecec72;
  --mech: #1f3fe0;
  --majiki: #c25299;
  --lean: -8deg;
  --edge: 3px;
  --pop: 4px 4px 0 var(--ink);
  --body: "kozuka-gothic-pr6n", system-ui, "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --display: "logo-cut-std", "kozuka-gothic-pr6n", sans-serif;   /* 見出し・キャッチ（表面チラシの書体） */
  --ui: "corporate-logo-ver2", "kozuka-gothic-pr6n", sans-serif;  /* ボタン・価格・小見出し */
  --accent: "kinkakuji", "kozuka-gothic-pr6n", sans-serif;        /* 「合体おはじきバトル」の一言だけ */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.75 var(--body); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }

/* ---- 見出し：ロゴと同じく前のめりに傾ける ---- */
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.25; margin: 0; }
.lean { display: inline-block; transform: skewX(var(--lean)); }
h2 { font-size: clamp(2rem, 7vw, 3.25rem); letter-spacing: .02em; }
h2 .lean { text-shadow: 3px 3px 0 var(--crown); }

/* ---- 購入ボタン：パッケージのシールのように ---- */
.buy {
  display: inline-flex; align-items: baseline; gap: .6em;
  padding: .75em 1.4em; border: var(--edge) solid var(--ink); border-radius: 999px;
  background: var(--red); color: #fff; text-decoration: none;
  font-family: var(--ui); font-weight: 700; font-size: 1.1rem; box-shadow: var(--pop);
  transition: transform .08s, box-shadow .08s;
}
.buy b { font-weight: 700; font-size: .9em; color: var(--crown); }
.buy:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.buy:active { transform: translate(3px, 3px) scale(.97); box-shadow: 1px 1px 0 var(--ink); }
.ghost { font-weight: 700; text-underline-offset: .25em; }


/* ==== 1. ヒーロー ==== */
.hero {
  position: relative; overflow: hidden; color: #fff; background: var(--ink);
  padding: 72px 20px 88px; min-height: min(92svh, 760px);
  display: grid; align-content: center; justify-items: center; text-align: center;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 48px), 0 100%);
}
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; filter: saturate(1.2) contrast(1.1); }
.hero__burst {
  position: absolute; inset: -50%;
  background: repeating-conic-gradient(from 0deg at 50% 46%, rgb(255 255 255 / .09) 0 4deg, transparent 4deg 11deg);
}
.hero > *:not(.hero__bg):not(.hero__burst) { position: relative; }
.kid3d { position: relative; width: min(60vw, 250px); aspect-ratio: 1; margin: -28px 0 -20px; }
/* PC：左に 3D、右にロゴとキャッチ（縦に積むと1画面目に収まらない） */
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; padding-inline: max(40px, calc(50vw - 560px)); }
  .hero > *:not(.hero__bg):not(.hero__burst) { grid-column: 2; }
  .hero > .kid3d:not(.hero__bg):not(.hero__burst) { grid-column: 1; grid-row: 1 / span 5; width: min(44vw, 500px); margin: 0; align-self: center; justify-self: center; }
  .hero__logo { width: min(40vw, 480px); }
  .hero__catch img { width: min(38vw, 460px); }
}
.kid3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; opacity: 0; }
.kid3d.is-3d canvas { opacity: 1; }
.kid3d__fallback { position: absolute; inset: 18%; width: 64%; border-radius: 50%; border: 4px solid #fff; }
.kid3d.is-3d .kid3d__fallback { display: none; }
.hero__logo { width: min(88vw, 560px); filter: drop-shadow(0 6px 0 rgb(0 0 0 / .35)); }
.hero__h1 { margin: 0; display: grid; justify-items: center; }
.hero__catch { margin: .3em 0 0; }
.hero__catch img { width: min(92vw, 560px); filter: drop-shadow(0 4px 0 rgb(0 0 0 / .4)); }
.hero__sub { margin-top: -.3em; font: 700 1.15rem/1.4 var(--accent); letter-spacing: .12em; color: var(--crown); }
.hero__row { display: grid; justify-items: center; gap: 18px; margin-top: 22px; }
.hero__icons { width: 196px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; justify-content: center; }
.hero__cta .ghost { color: #fff; }
/* スマホは画面下の購入ボタンを常に出すので、ヒーロー内の購入ボタンは重ねない */
@media (max-width: 899px) { .hero__cta .buy { display: none; } }
@media (min-width: 900px) { .hero__row { grid-auto-flow: column; justify-content: center; align-items: center; gap: 28px; } .hero__cta { flex-direction: column; gap: 10px; } }

/* 唯一の大きな動き：3つのパーツが飛んできて合体し、衝撃が走る */
@media (prefers-reduced-motion: no-preference) {
  .hero__burst { animation: spin 60s linear infinite; }
  .hero__logo { animation: slam .4s cubic-bezier(.2,1.6,.4,1) 1.15s both; }
}
@keyframes slam { from { transform: scale(1.5) rotate(-6deg); opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ==== 共通のセクション ==== */
section { padding: 72px 20px; }
.wrap { max-width: 1040px; margin: 0 auto; }
.sec-head { margin-bottom: 28px; }
.sec-head p { margin: .6em 0 0; max-width: 36em; }

/* ==== 2. ナニコレ？ ==== */
.what { background: var(--paper); }
.steps { list-style: none; padding: 0; margin: 0 0 40px; display: grid; gap: 18px; counter-reset: s; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li {
  position: relative; background: #fff; border: var(--edge) solid var(--ink); border-radius: 14px;
  padding: 22px 20px 20px 84px; box-shadow: var(--pop); min-height: 120px;
}
.steps li::before {
  counter-increment: s; content: counter(s);
  position: absolute; left: 16px; top: 16px; width: 52px; height: 52px; display: grid; place-items: center;
  font: 700 1.9rem/1 var(--ui); color: var(--ink); background: var(--crown);
  border: var(--edge) solid var(--ink); border-radius: 50%; transform: skewX(var(--lean));
}
.steps h3 { font: 700 1.35rem/1.3 var(--ui); }
.steps__seal { position: absolute; right: -12px; top: -16px; width: 74px; transform: rotate(8deg); background: #fff; border-radius: 50%; padding: 4px; border: var(--edge) solid var(--ink); }
.steps__art { height: 110px; width: auto; margin: 0 0 10px; }
@media (max-width: 759px) { .steps__art { height: 92px; } }
.steps p { margin: .3em 0 0; font-size: .95rem; }
.steps em { font-style: normal; color: var(--red); }
.yt { position: relative; display: block; aspect-ratio: 16/9; border: var(--edge) solid var(--ink); border-radius: 14px; overflow: hidden; background: var(--ink); box-shadow: var(--pop); max-width: 760px; margin: 0 auto; }
.yt img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.yt__play { position: absolute; inset: 0; margin: auto; width: 76px; height: 54px; background: var(--red); border-radius: 14px; border: var(--edge) solid #fff; }
.yt__play::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-left: 20px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent; transform: translateX(3px); }
.yt__title { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 10px; color: #fff; font-weight: 700; font-size: .9rem; background: linear-gradient(transparent, rgb(2 16 41 / .85)); }

/* ==== 3. アソビカタ ==== */
.howto { background: var(--paper); padding-top: 24px; }
.howto__grid { display: grid; gap: 18px; }
@media (min-width: 760px) { .howto__grid { grid-template-columns: 1fr 2fr; align-items: stretch; } }
.panel { margin: 0; background: #fff; border: var(--edge) solid var(--ink); border-radius: 14px; padding: 18px; box-shadow: var(--pop); display: flex; flex-direction: column; gap: 12px; }
.panel img { margin: 0 auto; max-height: 260px; width: auto; }
.panel figcaption { font-size: .95rem; }
.panel figcaption b { display: block; font: 700 1.2rem/1.4 var(--ui); }

/* ==== 4. ラインナップ ==== */
.lineup { background: var(--sky-pale); clip-path: polygon(0 32px, 100% 0, 100% calc(100% - 32px), 0 100%); padding: 104px 20px; }
.starter {
  display: grid; gap: 20px; align-items: center; background: #fff;
  border: var(--edge) solid var(--ink); border-radius: 18px; padding: 20px; box-shadow: 6px 6px 0 var(--ink);
}
@media (min-width: 760px) { .starter { grid-template-columns: 1fr 1.1fr; padding: 28px; } }
.starter__img { background: var(--lime-pale); border-radius: 12px; padding: 12px; }
.price-tag { display: inline-block; font: 700 2.4rem/1 var(--ui); transform: skewX(var(--lean)); margin: .2em 0 .3em; }
.price-tag small { font-size: .45em; }
.starter ul { padding-left: 1.2em; margin: 0 0 1.2em; }
.more-title { margin: 48px 0 16px; font-size: 1.5rem; }
.exp-grid { display: grid; gap: 16px; }
@media (min-width: 760px) { .exp-grid { grid-template-columns: repeat(3, 1fr); } }
.exp { background: #fff; border: var(--edge) solid var(--ink); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.exp img { border-radius: 8px; background: var(--paper); aspect-ratio: 4/3; object-fit: contain; width: 100%; }
.exp h4 { margin: 0; font: 700 1.1rem/1.4 var(--ui); }
.exp p { margin: 0; font-size: .9rem; flex: 1; }
.exp p.exp__note { flex: 0; font-size: .85rem; font-weight: 700; }
.exp .buy { align-self: flex-start; font-size: .95rem; padding: .55em 1.1em; }

/* ==== 6. ジカイタイセン：パッケージの導入文と磁力線。ここだけ暗く、重く ==== */
.world { position: relative; overflow: hidden; background: #070c1f; color: #e9ecf5; padding: 96px 20px 88px;
  clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%); }
/* パッケージ裏の磁力線（黄緑の楕円）を、中心から外へ重ねる */
.world__field { position: absolute; inset: -20% -40%; pointer-events: none;
  background: repeating-radial-gradient(ellipse 60% 26% at 50% 34%, transparent 0 46px, rgb(214 232 74 / .22) 46px 47.5px); }
.world .wrap { position: relative; }
.world__title { text-align: center; margin: 0 0 28px; }
.world__title img { width: min(86vw, 520px); margin: 0 auto; filter: invert(1) hue-rotate(180deg) drop-shadow(0 0 18px rgb(214 232 74 / .35)); }
.lore { max-width: 30em; margin: 0 auto 56px; text-align: center; font-size: 1rem; line-height: 2.1; }
.lore p { margin: 0; word-break: keep-all; }
@media (max-width: 559px) { .lore { font-size: .86rem; line-height: 2; } .lore .lore__lead { font-size: 1.02rem; } .lore .lore__end { font-size: .96rem; } }
.lore .lore__lead { font: 700 1.2rem/1.8 var(--ui); color: var(--crown); margin-bottom: .6em; }
.lore em { font-style: normal; font-weight: 700; color: #fff; }
.lore .lore__end { margin-top: .8em; font: 700 1.1rem/1.8 var(--ui); }
.factions { display: grid; gap: 18px; }
@media (min-width: 900px) { .factions { grid-template-columns: repeat(3, 1fr); } }
.faction { --c: #fff; border: 2px solid var(--c); border-radius: 6px; background: rgb(255 255 255 / .03); display: flex; flex-direction: column; }
.faction__head { padding: 18px 18px 12px; border-bottom: 2px solid var(--c); background: linear-gradient(90deg, color-mix(in srgb, var(--c) 28%, transparent), transparent); }
.faction__head h3 { font-size: clamp(1.7rem, 6vw, 2.1rem); color: #fff; }
.faction__logo img { height: 92px; width: auto; filter: invert(1) hue-rotate(180deg) brightness(1.05); }
.faction__logo--text { display: flex; flex-direction: column; align-items: center; width: max-content; line-height: 1; }
/* マグナイトだけ印刷物のロゴが無いので、他の2陣営のロゴと同じ金閣寺で組む */
.faction__logo--text span { font: 700 1.55rem/1 var(--accent); letter-spacing: .32em; color: #f4d978; }
.faction__logo--text b { font: 700 3.6rem/1.05 var(--accent); letter-spacing: -.02em; color: #f4d978; }
.faction__power { margin: 10px 0 0; font: 700 1.05rem/1.5 var(--ui); }
.faction__kids { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 14px 14px 0; margin: 0; }
.faction__kids img { aspect-ratio: 1; object-fit: cover; width: 100%; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); }
.faction__kids a { display: block; color: inherit; text-decoration: none; }
.faction__kids span { display: block; text-align: center; font: 700 .72rem/1.6 var(--ui); }
.faction__more { margin: 6px 14px 0; font-size: .8rem; opacity: .75; }
.world__more { text-align: center; margin: 36px 0 0; }
.buy--alt { background: var(--paper); color: var(--ink); }

/* ==== フッター ==== */
.ftr { background: var(--ink); color: #fff; text-align: center; padding: 48px 20px 40px; font-size: .9rem; }
.ftr img { width: 88px; margin: 0 auto 12px; }
.ftr p { margin: .4em 0; }
.ftr__links { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; font-weight: 700; }
.ftr__copy { opacity: .6; }
.ftr__warn { max-width: 36em; margin-inline: auto !important; font-size: .78rem; opacity: .75; }



/* ==== 上部のバー（図鑑・404） ==== */
.bar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 8px 20px; background: var(--ink); }
.bar__logo img { width: 132px; }
.bar__link { color: #fff; font: 700 1.05rem var(--ui); text-decoration: none; }

/* ==== イベント ==== */
.events { background: var(--paper); }
.event { background: #fff; border: var(--edge) solid var(--ink); border-radius: 14px; padding: 18px 20px; box-shadow: var(--pop); max-width: 720px; }
.event h3 { font: 700 1.4rem/1.4 var(--ui); }
.event p { margin: .3em 0 0; }
.event__when b { font-family: var(--ui); font-size: 1.15em; color: var(--red); }
.sns { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }
.sns__link { display: inline-block; padding: .45em 1.1em; border: var(--edge) solid var(--ink); border-radius: 999px; background: #fff;
  font: 700 1rem var(--ui); text-decoration: none; box-shadow: 3px 3px 0 var(--ink); }

/* ==== ズカン ==== */
.zukan { padding-top: 40px; }
.zukan h1 { font-size: clamp(2.4rem, 9vw, 3.6rem); }
.zukan h1 .lean { text-shadow: 3px 3px 0 var(--crown); }
.filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.filter button { font: 700 1rem var(--ui); padding: .4em 1em; border: var(--edge) solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); cursor: pointer; }
.filter button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.zukan__faction { padding: 0 0 40px; }
.zukan__head { font-size: clamp(1.8rem, 6vw, 2.4rem); }
.zukan__head .lean { text-shadow: 3px 3px 0 var(--c); }
.zukan__power { margin: .2em 0 16px; font: 700 1rem var(--ui); }
.zukan__grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.kid { background: #fff; border: var(--edge) solid var(--ink); border-radius: 14px; padding: 12px; box-shadow: var(--pop); display: flex; flex-direction: column; gap: 6px; scroll-margin-top: 80px; }
.kid.is-target { outline: 4px solid var(--red); outline-offset: 3px; }
.kid__photo { position: relative; border-radius: 10px; overflow: hidden; background: #dfe3ea; }
.kid__photo img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.kid__photo img:not(.is-on) { display: none; }
.kid__flip { position: absolute; right: 8px; bottom: 8px; width: 40px; height: 40px; border-radius: 50%; border: var(--edge) solid var(--ink);
  background: #fff; font: 700 1.2rem/1 var(--ui); cursor: pointer; }
.kid__name { font: 700 1.3rem/1.3 var(--ui); margin-top: 4px; }
.kid__faction { margin: 0; font-size: .85rem; color: #4a5468; }
.kid__actions { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.kid__actions .buy { font-size: .95rem; padding: .5em 1em; }

/* ==== 404 ==== */
.notfound { min-height: 60vh; display: grid; align-content: center; text-align: center; }
.notfound h1 { font-size: clamp(2rem, 8vw, 3rem); margin-bottom: .4em; }

/* ==== 下部固定の購入ボタン ====
   スマホ：最初から常に出す（3D のヒーローは1画面より高く、ヒーロー内のボタンが見えないため）
   PC：ヒーローを過ぎたら出す（site.js が is-on を付ける） */
.sticky-buy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgb(246 247 240 / .92); backdrop-filter: blur(6px); border-top: 2px solid var(--ink); text-align: center; }
.sticky-buy .buy { width: min(100%, 420px); justify-content: center; font-size: 1rem; }
body { padding-bottom: 84px; }
@media (min-width: 900px) {
  .sticky-buy { transform: translateY(110%); transition: transform .25s; }
  .sticky-buy.is-on { transform: none; }
  body { padding-bottom: 0; }
  .ftr { padding-bottom: 96px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }