/* =========================================================
   Naro Games — リデザイン
   ダークモード＋ネオン（ゲームUI）× 東映風のスクロール演出
   ========================================================= */

:root {
  --bg: #07070b;
  --bg-2: #0d0d14;
  --bg-3: #14141e;
  --fg: #f3f1ec;
  --mute: #8d8c99;
  --line: rgba(255, 255, 255, .1);

  /* アクセント：青→紫（支給の参考画像から）。赤は Netflix に見えるので使わない */
  --accent: #6c5cff;
  --blue: #3b74ff;
  --purple: #8a3ffc;
  --grad: linear-gradient(120deg, var(--blue), var(--purple));
  --cyan: #3fb8ff;
  --violet: #a77bff;
  --gold: #ffc23d;
  --green: #4dffa6;

  --f-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --f-body: "Inter Tight", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;
  --f-jp: "Noto Sans JP", sans-serif;

  --gutter: clamp(16px, 4vw, 56px);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.is-loading { overflow: hidden; }

a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
::selection { background: var(--accent); color: #fff; }

.mono { font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.jp { font-family: var(--f-jp); }
.accent { color: var(--accent); }
@supports (-webkit-background-clip: text) {
  .accent, .hero__title em, .about__title em { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- ローダー ---------- */
.loader {
  position: fixed; inset: 0; z-index: 100;
  background: var(--bg);
  display: grid; place-items: center;
}
.loader__n path {
  fill: transparent; stroke: var(--fg); stroke-width: 10;
  stroke-dasharray: 3200; stroke-dashoffset: 3200;
}

/* ---------- ロゴの組（枠＋N＋社名） ---------- */
.lockup { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 32px); }
.lockup__badge {
  position: relative; display: grid; place-items: center;
  width: var(--b, 120px); height: var(--b, 120px); flex: 0 0 auto;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 22%;
}
.lockup__badge .c { position: absolute; width: 14%; height: 14%; border: 0 solid var(--cyan); }
.lockup__badge .c.tl { left: -6%; top: -6%; border-width: 2px 0 0 2px; }
.lockup__badge .c.tr { right: -6%; top: -6%; border-width: 2px 2px 0 0; }
.lockup__badge .c.bl { left: -6%; bottom: -6%; border-width: 0 0 2px 2px; }
.lockup__badge .c.br { right: -6%; bottom: -6%; border-width: 0 2px 2px 0; }
.lockup__badge svg {
  height: 64%; width: auto; max-width: 30%; overflow: visible; fill: var(--fg);
  /* RGB のずれ：ゲーム画面らしさ */
  filter: drop-shadow(-3px 0 0 rgba(63, 228, 255, .85)) drop-shadow(3px 0 0 rgba(139, 108, 255, .85));
}
.lockup__word {
  display: flex; flex-direction: column; line-height: .9;
  font-family: var(--f-display); font-weight: 300; font-size: var(--w, 44px); letter-spacing: .12em; color: var(--mute);
}
.lockup__word b { font-weight: 800; color: var(--fg); }
.lockup__word img { display: block; height: calc(var(--b, 120px) * .62); width: auto; }
.lockup__word small { margin-top: 14px; font-size: 10px; letter-spacing: .2em; color: var(--mute); }
.lockup--loader { --b: clamp(96px, 16vh, 150px); --w: clamp(36px, 5vw, 60px); }
.lockup--loader .lockup__word { line-height: .95; }
.loader__meta {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 48px;
  display: flex; justify-content: space-between; align-items: end; color: var(--mute);
}
.loader__count { font-size: clamp(40px, 8vw, 96px); color: var(--fg); letter-spacing: 0; line-height: 1; }
.loader__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--line); }
.loader__bar i { display: block; height: 100%; width: 0; background: var(--grad); }

/* ---------- 粒子ノイズ ---------- */
.grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(6) infinite;
}
@keyframes grain {
  0% { background-position: 0 0; } 20% { background-position: -40px 25px; } 40% { background-position: 30px -50px; }
  60% { background-position: -25px 40px; } 80% { background-position: 50px 15px; } 100% { background-position: 0 0; }
}

/* ---------- カーソル（照準） ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 95; pointer-events: none; display: none; }
.cursor i {
  position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1px solid rgba(255, 255, 255, .55); border-radius: 50%;
  transition: width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), background .3s, border-color .3s;
}
.cursor i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; background: var(--accent); border-radius: 50%; }
.cursor.is-hover i { width: 64px; height: 64px; margin: -32px 0 0 -32px; border-color: var(--accent); background: rgba(108, 92, 255, .12); }
@media (hover: hover) and (pointer: fine) { .cursor { display: block; } }

/* ---------- ボタン ---------- */
.btn {
  --h: 54px;
  position: relative; display: inline-flex; align-items: center; gap: 14px;
  height: var(--h); padding: 0 26px;
  font-family: var(--f-mono); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: var(--grad); border: 0; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  overflow: hidden; isolation: isolate;
  transition: color .35s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fg);
  transform: translateX(-101%); transition: transform .45s var(--ease);
}
.btn:hover { color: var(--bg); }
.btn:hover::before { transform: none; }
.btn__arrow { transition: transform .35s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(5px); }
.btn--ghost { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.btn--sm { --h: 42px; padding: 0 18px; font-size: 11px; }
.btn--big { --h: 68px; padding: 0 36px; font-size: 15px; }

/* ---------- ナビ ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: 32px;
  padding: 18px var(--gutter);
  transition: transform .5s var(--ease), background .4s, backdrop-filter .4s;
}
.nav.is-solid { background: rgba(7, 7, 11, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nav.is-hidden { transform: translateY(-110%); }
.nav__logo { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.nav__logo img { display: block; height: 40px; width: auto; transition: filter .3s, opacity .3s; }
.nav__logo:hover img { filter: drop-shadow(0 0 10px rgba(108, 92, 255, .9)); }
.nav__links { display: flex; gap: 30px; }
.nav__links a { position: relative; font-size: 14px; font-weight: 500; display: flex; gap: 8px; align-items: baseline; }
.nav__links a i { font-style: normal; font-size: 10px; color: var(--accent); }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease);
}
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__burger { display: none; width: 44px; height: 44px; background: none; border: 1px solid var(--line); cursor: pointer; position: relative; }
.nav__burger i { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--fg); transition: transform .4s var(--ease); }
.nav__burger i:first-child { top: 17px; } .nav__burger i:last-child { top: 25px; }
.menu-open .nav__burger i:first-child { transform: translateY(4px) rotate(45deg); }
.menu-open .nav__burger i:last-child { transform: translateY(-4px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 45; background: var(--bg);
  display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 0 var(--gutter);
  clip-path: inset(0 0 100% 0); transition: clip-path .6s var(--ease);
}
.menu a { font-family: var(--f-display); font-weight: 900; font-size: clamp(48px, 13vw, 96px); line-height: 1; text-transform: uppercase; }
.menu p { margin-top: 32px; color: var(--mute); }
.menu-open .menu { clip-path: inset(0); }

/* ---------- 進行 HUD ---------- */
.hud {
  position: fixed; right: 22px; top: 50%; z-index: 40; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px; mix-blend-mode: difference;
}
.hud__label { font-size: 9px; color: var(--mute); }
.hud__num { font-size: 13px; color: var(--fg); }
.hud__track { width: 2px; height: 140px; background: rgba(255, 255, 255, .15); position: relative; }
.hud__track i { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--fg); transform-origin: top; transform: scaleY(0); }

/* ---------- 共通見出し ---------- */
.section-tag { display: flex; gap: 12px; align-items: center; color: var(--mute); margin-bottom: 28px; }
.section-tag i { font-style: normal; color: var(--accent); padding: 2px 8px; border: 1px solid rgba(108, 92, 255, .5); }
.sec-title {
  font-family: var(--f-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(56px, 9vw, 150px); line-height: .88; letter-spacing: -.01em;
}
.sec-lead { max-width: 640px; margin-top: 36px; color: #c9c7cf; font-size: clamp(17px, 1.4vw, 20px); }
.eyebrow { display: flex; align-items: center; gap: 12px; color: #c9c7cf; }
.eyebrow .jp { color: var(--mute); letter-spacing: .3em; font-size: 11px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* ---------- HERO ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: flex-end; overflow: hidden;
  padding: 120px var(--gutter) 64px;
}
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 72% 45%, rgba(108, 92, 255, .18), transparent 70%),
    radial-gradient(40% 40% at 90% 90%, rgba(63, 228, 255, .1), transparent 70%),
    linear-gradient(to top, var(--bg) 0, transparent 30%);
}
.hero__frame { position: absolute; inset: 88px var(--gutter) 24px; pointer-events: none; }
.corner { position: absolute; width: 22px; height: 22px; border: 0 solid rgba(255, 255, 255, .35); }
.corner.tl { left: 0; top: 0; border-width: 1px 0 0 1px; }
.corner.tr { right: 0; top: 0; border-width: 1px 1px 0 0; }
.corner.bl { left: 0; bottom: 0; border-width: 0 0 1px 1px; }
.corner.br { right: 0; bottom: 0; border-width: 0 1px 1px 0; }
.hero__coord { position: absolute; font-size: 10px; color: var(--mute); }
.hero__coord.tl { left: 34px; top: 4px; } .hero__coord.tr { right: 34px; top: 4px; }
.hero__coord.bl { left: 34px; bottom: 4px; } .hero__coord.br { right: 34px; bottom: 4px; }
.hero__content { position: relative; z-index: 2; width: 100%; max-width: 1440px; margin: 0 auto; }
.hero__title {
  font-family: var(--f-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(64px, 13.5vw, 230px); line-height: .84; letter-spacing: -.015em;
  margin: 28px 0 40px;
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: .04em; }
.hero__title .line > span { display: inline-block; }
.hero__title em { font-style: normal; color: var(--accent); }
.outline { color: transparent; -webkit-text-stroke: 2px var(--fg); }
.hero__bottom { display: flex; justify-content: space-between; align-items: end; gap: 40px; flex-wrap: wrap; }
.hero__lead { max-width: 520px; font-size: clamp(17px, 1.4vw, 20px); color: #c9c7cf; }
.hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.press-start {
  position: absolute; left: 50%; bottom: 40px; z-index: 3; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 10px; color: var(--mute);
}
.press-start span { animation: blink 1.2s steps(2) infinite; }
.press-start i { width: 1px; height: 48px; background: linear-gradient(var(--fg), transparent); animation: drip 1.8s var(--ease) infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- マニフェスト ---------- */
.manifesto { position: relative; }
.manifesto__pin { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 120px var(--gutter); max-width: 1440px; margin: 0 auto; }
.manifesto__text {
  font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(44px, 7vw, 118px); line-height: .98;
}
.manifesto__text .w { opacity: .12; transition: none; }
.manifesto__text .w.hl { color: var(--accent); }

/* ---------- 3本柱 ---------- */
.games { padding: 140px 0 120px; }
.sec-head { margin-bottom: 90px; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; perspective: 1200px; }
.pillar {
  position: relative; padding: 32px; min-height: 480px;
  display: flex; flex-direction: column;
  background: linear-gradient(160deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px));
  transform-style: preserve-3d; transition: border-color .4s;
}
.pillar::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--c) 22%, transparent), transparent 60%);
}
.pillar:hover::before { opacity: 1; }
.pillar:hover { border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.pillar__art { color: var(--c); width: 46%; margin-bottom: auto; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--c) 60%, transparent)); }
.pillar__art svg { display: block; width: 100%; animation: spin 24s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pillar__id { color: var(--c); margin: 40px 0 10px; }
.pillar h3 { font-family: var(--f-display); font-weight: 900; font-size: clamp(36px, 3.4vw, 52px); line-height: .95; text-transform: uppercase; margin-bottom: 14px; }
.pillar p { color: #b9b7c2; font-size: 15px; }
.stat { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; margin-top: 26px; }
.stat span { font-size: 10px; color: var(--mute); }
.stat i { height: 6px; background: rgba(255, 255, 255, .08); position: relative; overflow: hidden; }
.stat b { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--c) 0 10px, transparent 10px 12px); transform-origin: left; transform: scaleX(0); }
.stat.is-on b { transform: scaleX(var(--v)); transition: transform 1.4s var(--ease) .2s; }

/* ---------- WHY ---------- */
.why { position: relative; overflow: hidden; background: var(--bg-2); border-block: 1px solid var(--line); }
.why__pin { position: relative; padding: 140px 0; }
.why__big {
  position: absolute; top: 50%; left: 0; white-space: nowrap; transform: translateY(-50%);
  font-family: var(--f-display); font-weight: 900; font-size: 30vw; line-height: 1; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .06); pointer-events: none;
}
.why__grid { position: relative; display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: start; }
.why__grid > div:first-child { position: sticky; top: 140px; }
.why__list { list-style: none; margin: 0; padding: 0; }
.why__list li { display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 36px 0; border-top: 1px solid var(--line); }
.why__list li:last-child { border-bottom: 1px solid var(--line); }
.why__list li > span { color: var(--accent); padding-top: 8px; }
.why__list h3 { font-family: var(--f-display); font-weight: 700; font-size: clamp(28px, 2.6vw, 40px); line-height: 1; text-transform: uppercase; margin-bottom: 10px; }
.why__list p { color: #b9b7c2; }

/* ---------- SERVICES（横スクロール） ---------- */
.services { position: relative; }
.services__pin { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 90px 0 40px; overflow: hidden; }
.services__head .sec-title { font-size: clamp(44px, min(6.4vw, 9.5vh), 104px); }
.services__head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 40px; }
.xp { display: grid; grid-template-columns: auto 220px auto; gap: 14px; align-items: center; color: var(--mute); }
.xp__bar { height: 8px; border: 1px solid var(--line); padding: 1px; }
.xp__bar i { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(.2); box-shadow: 0 0 12px var(--accent); background: var(--grad); }
#xpNum { color: var(--fg); min-width: 92px; }
.services__track { display: flex; gap: 22px; padding: 0 var(--gutter); width: max-content; }
.svc {
  position: relative; flex: 0 0 auto; width: clamp(300px, 32vw, 470px); min-height: min(500px, 58vh); padding: 26px 28px;
  display: flex; flex-direction: column;
  background: var(--bg-2); border: 1px solid var(--line);
  transition: border-color .4s, transform .5s var(--ease);
}
.svc::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.svc:hover { border-color: color-mix(in srgb, var(--c) 50%, transparent); transform: translateY(-8px); }
.svc:hover::after { transform: scaleX(1); }
.svc__top { display: flex; justify-content: space-between; color: var(--mute); }
.svc__tag { color: var(--c); }
.svc__art { color: var(--c); margin: 24px 0 auto; padding: 8px 0; }
.svc__art svg { max-height: 14vh; }
/* 背の低い画面では絵を省いてカードを収める */
@media (max-height: 780px) { .svc__art { display: none; } .svc h3 { margin-top: auto; } .services__pin { padding: 76px 0 20px; } .services__head { margin-bottom: 22px; } }
.svc__art svg { display: block; width: 100%; max-width: 280px; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--c) 55%, transparent)); }
.svc h3 { font-family: var(--f-display); font-weight: 900; font-size: clamp(32px, 2.6vw, 42px); line-height: .95; text-transform: uppercase; margin: 22px 0 12px; }
.svc p { color: #b9b7c2; font-size: 15px; line-height: 1.55; }
.svc--end { justify-content: center; gap: 20px; background: var(--grad); border-color: transparent; color: #fff; }
.svc--end p { color: rgba(255, 255, 255, .85); font-size: 18px; }
.svc--end h3 { margin: 0; font-size: clamp(52px, 4.6vw, 80px); }
.svc--end .btn { background: var(--bg); color: var(--fg); align-self: flex-start; }
.svc--end:hover { transform: none; }

/* ---------- ABOUT（小窓→全画面） ---------- */
.about { position: relative; }
.about__pin { height: 100vh; height: 100svh; position: relative; overflow: hidden; }
.about__scene { position: absolute; inset: 0; clip-path: inset(22% 30% 22% 30% round 24px); }
.scene { position: absolute; inset: 0; background: linear-gradient(#05051a, #140e3d 60%, #07070b); overflow: hidden; }
.scene__sun {
  position: absolute; left: 50%; top: 46%; width: 62vmin; height: 62vmin; margin: -31vmin 0 0 -31vmin; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #6fa0ff, var(--blue) 40%, var(--purple) 75%, #4a1aa8);
  box-shadow: 0 0 120px rgba(108, 92, 255, .55), 0 0 300px rgba(108, 92, 255, .25);
}
.scene__sun::after {
  /* 下半分に走査線：80年代ゲームの夕日 */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-linear-gradient(transparent 0 12px, #0b0a28 12px 17px);
  -webkit-mask: linear-gradient(transparent 55%, #000 55%); mask: linear-gradient(transparent 55%, #000 55%);
}
.scene__waves {
  /* 青海波 */
  position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
  --s: 56px;
  background:
    radial-gradient(circle at 50% 100%, transparent calc(var(--s) * .2), rgba(255, 255, 255, .12) calc(var(--s) * .2 + 1px) calc(var(--s) * .23), transparent calc(var(--s) * .23 + 1px) calc(var(--s) * .32), rgba(255, 255, 255, .12) calc(var(--s) * .32 + 1px) calc(var(--s) * .35), transparent calc(var(--s) * .35 + 1px) calc(var(--s) * .44), rgba(255, 255, 255, .12) calc(var(--s) * .44 + 1px) calc(var(--s) * .47), #07061c calc(var(--s) * .47 + 1px) calc(var(--s) * .5), transparent calc(var(--s) * .5 + 1px)) 0 0 / var(--s) calc(var(--s) / 2),
    radial-gradient(circle at 50% 100%, transparent calc(var(--s) * .2), rgba(255, 255, 255, .12) calc(var(--s) * .2 + 1px) calc(var(--s) * .23), transparent calc(var(--s) * .23 + 1px) calc(var(--s) * .32), rgba(255, 255, 255, .12) calc(var(--s) * .32 + 1px) calc(var(--s) * .35), transparent calc(var(--s) * .35 + 1px) calc(var(--s) * .44), rgba(255, 255, 255, .12) calc(var(--s) * .44 + 1px) calc(var(--s) * .47), #07061c calc(var(--s) * .47 + 1px) calc(var(--s) * .5), transparent calc(var(--s) * .5 + 1px)) calc(var(--s) / 2) calc(var(--s) / 4) / var(--s) calc(var(--s) / 2),
    #07061c;
  -webkit-mask: linear-gradient(transparent, #000 40%); mask: linear-gradient(transparent, #000 40%);
}
.scene__grid {
  position: absolute; left: -50%; right: -50%; bottom: 0; height: 40%;
  background:
    linear-gradient(rgba(108, 92, 255, .35) 1px, transparent 1px) 0 0 / 100% 40px,
    linear-gradient(90deg, rgba(108, 92, 255, .35) 1px, transparent 1px) 0 0 / 60px 100%;
  transform: perspective(400px) rotateX(62deg); transform-origin: bottom; opacity: .5;
  -webkit-mask: linear-gradient(transparent, #000 70%); mask: linear-gradient(transparent, #000 70%);
}
.lockup--scene {
  /* transform は GSAP の拡大に使うので、中央寄せは margin で */
  position: absolute; inset: 0 0 8% 0; margin: auto; width: max-content; height: max-content;
  --b: 36vmin;
}
.lockup__badge--logo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7%; }
.lockup__badge--logo img { display: block; width: 66%; height: auto; }
.lockup__badge--logo small { font-size: clamp(8px, 1.1vmin, 11px); letter-spacing: .2em; color: rgba(255, 255, 255, .6); }
.lockup--scene .lockup__badge { background: rgba(7, 7, 11, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-color: rgba(255, 255, 255, .25); }
.lockup--scene .lockup__word { color: rgba(255, 255, 255, .7); }
.lockup--scene .lockup__word small { color: rgba(255, 255, 255, .6); }
.about__overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 var(--gutter) 9vh;
  background: linear-gradient(to top, rgba(7, 7, 11, .85), transparent 55%);
}
.about__overlay .section-tag { color: #d8d6dd; }
.about__title { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(52px, 8.5vw, 140px); line-height: .88; }
.about__title em { font-style: normal; font-weight: 300; color: var(--accent); }
.about__jp { margin-top: 22px; color: #d8d6dd; letter-spacing: .3em; font-size: 14px; }

/* ---------- STORY ---------- */
.story { padding: 140px 0 120px; }
.story__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 80px; align-items: start; margin-bottom: 140px; }
.story__intro { font-size: clamp(24px, 2.6vw, 38px); line-height: 1.3; font-weight: 500; letter-spacing: -.01em; }
.story__intro strong { color: var(--accent); font-weight: 600; }
.story__cols { display: grid; gap: 40px; }
.story__cols p:not(.label) { color: #b9b7c2; }
.label { color: var(--accent); margin-bottom: 12px; }
.values__tag { margin-bottom: 36px; }
.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.badge {
  position: relative; padding: 28px; border: 1px solid var(--line); background: var(--bg-2);
  overflow: hidden; transition: border-color .4s, background .4s;
}
.badge:hover { border-color: var(--c); background: color-mix(in srgb, var(--c) 8%, var(--bg-2)); }
.badge__icon {
  width: 64px; height: 64px; display: grid; place-items: center; margin-bottom: 28px; color: var(--c);
  border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); border-radius: 50%;
  box-shadow: 0 0 24px color-mix(in srgb, var(--c) 30%, transparent), inset 0 0 18px color-mix(in srgb, var(--c) 20%, transparent);
}
.badge__icon svg { width: 30px; height: 30px; }
.badge > .mono { font-size: 10px; color: var(--c); }
.badge h3 { font-family: var(--f-display); font-weight: 900; font-size: 36px; line-height: 1; text-transform: uppercase; margin: 8px 0 12px; }
.badge p { color: #b9b7c2; font-size: 15px; }

/* ---------- CONTACT ---------- */
.contact { position: relative; padding: 160px 0; overflow: hidden; border-top: 1px solid var(--line); }
.contact__bg { position: absolute; inset: 0; }
.contact__bg canvas { width: 100%; height: 100%; display: block; opacity: .55; }
.contact__inner { position: relative; }
.contact__title { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(60px, 11vw, 190px); line-height: .86; }
.contact__title .line { display: block; overflow: hidden; }
.contact__title .line > span { display: inline-block; }
.contact__lead { max-width: 640px; margin: 36px 0 60px; color: #c9c7cf; font-size: clamp(17px, 1.4vw, 20px); }
.form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 22px; max-width: 1100px; }
.form label { display: flex; flex-direction: column; gap: 8px; }
.form label > span { font-size: 10px; color: var(--mute); }
.form__wide { grid-column: 1 / -1; }
.form input, .form textarea {
  font: inherit; color: var(--fg); background: rgba(13, 13, 20, .7); backdrop-filter: blur(6px);
  border: 1px solid var(--line); padding: 16px 18px; outline: none; resize: vertical;
  transition: border-color .3s, box-shadow .3s;
}
.form input:focus, .form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(108, 92, 255, .18); }
.form .btn { justify-self: start; margin-top: 10px; }
.form[hidden] { display: none; }
.form .is-invalid { border-color: var(--cyan); }
.form__note { grid-column: 1 / -1; color: var(--cyan); min-height: 1em; font-size: 13px; }
/* 送信中：ボタンに走るストライプ */
.btn.is-sending { pointer-events: none; }
.btn.is-sending::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .16) 0 10px, transparent 10px 20px);
  background-size: 28px 28px; animation: sendStripe .6s linear infinite;
}
@keyframes sendStripe { to { background-position: 28px 0; } }

/* 送信完了「STAGE CLEAR」 */
.sent {
  position: relative; max-width: 1100px; padding: clamp(36px, 5vw, 64px) clamp(24px, 4vw, 56px);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 22px;
  background: linear-gradient(160deg, rgba(20, 20, 30, .85), rgba(13, 13, 20, .85)); backdrop-filter: blur(6px);
  border: 1px solid rgba(108, 92, 255, .35); outline: none;
  box-shadow: 0 0 60px rgba(108, 92, 255, .18), inset 0 0 40px rgba(59, 116, 255, .08);
}
.sent[hidden] { display: none; }
.sent::before { /* 走査線 */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px);
}
.sent__burst { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.sent .c { position: absolute; width: 22px; height: 22px; border: 0 solid var(--cyan); }
.sent .c.tl { left: -8px; top: -8px; border-width: 2px 0 0 2px; }
.sent .c.tr { right: -8px; top: -8px; border-width: 2px 2px 0 0; }
.sent .c.bl { left: -8px; bottom: -8px; border-width: 0 0 2px 2px; }
.sent .c.br { right: -8px; bottom: -8px; border-width: 0 2px 2px 0; }
.sent__stage { margin: 0; font-size: 12px; letter-spacing: .2em; color: var(--mute); }
.sent__stage i { font-style: normal; color: var(--accent); }
.sent__stage b { color: var(--green); text-shadow: 0 0 12px rgba(77, 255, 166, .6); }
.sent__title { margin: 0; font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(48px, 7vw, 110px); line-height: .9; }
.sent__line { display: inline-block; }
.sent__title .ch { display: inline-block; }
/* 1文字ずつ動かすとグラデが親から届かないので、文字ごとに塗る */
.sent__title .accent { background: none; color: inherit; }
.sent__title .accent .ch { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .02em; }
.sent__xp { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; width: min(100%, 460px); font-size: 11px; color: var(--mute); }
.sent__bar { display: block; height: 8px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.sent__bar i { display: block; height: 100%; background: var(--grad); box-shadow: 0 0 12px var(--accent); transform-origin: left; }
.sent__pts { color: var(--fg); min-width: 4.5ch; text-align: right; }
.sent__lead { margin: 0; color: #c9c7cf; font-size: clamp(16px, 1.3vw, 19px); }

/* ---------- FOOTER ---------- */
.footer { position: relative; padding-top: 100px; border-top: 1px solid var(--line); overflow: hidden; }
.footer__top { display: flex; justify-content: space-between; align-items: end; gap: 40px; flex-wrap: wrap; }
.footer__brand { display: flex; align-items: center; gap: clamp(24px, 4vw, 56px); flex-wrap: wrap; }
.footer__brand img { display: block; height: clamp(84px, 9vw, 130px); width: auto; padding-right: clamp(24px, 4vw, 56px); border-right: 1px solid var(--line); }
.footer__claim { font-family: var(--f-display); font-weight: 700; font-size: clamp(32px, 3.4vw, 54px); line-height: 1; text-transform: uppercase; }
.footer__social { display: flex; gap: 28px; flex-wrap: wrap; }
.footer__social a { font-weight: 500; border-bottom: 1px solid var(--line); padding-bottom: 4px; transition: color .3s, border-color .3s; }
.footer__social a:hover { color: var(--accent); border-color: var(--accent); }
.footer__mega {
  display: flex; align-items: flex-end; gap: 1.2vw; padding: 70px var(--gutter) 0; line-height: .78;
  font-family: var(--f-display); font-weight: 900; font-size: 19.5vw; text-transform: uppercase; white-space: nowrap;
}
.footer__mega svg { height: .78em; width: auto; flex: 0 0 auto; }
.footer__mega span { color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .25); }
.footer__bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 24px; padding-bottom: 28px; color: var(--mute); border-top: 1px solid var(--line); margin-top: 20px; }
.footer__bottom a:hover { color: var(--fg); }

/* ---------- レスポンシブ ---------- */
@media (max-width: 1100px) {
  .nav__links, .nav > .btn { display: none; }
  .nav__burger { display: block; }
  .pillars { grid-template-columns: 1fr; }
  .pillar { min-height: 0; }
  .pillar__art { width: 120px; }
  .why__grid, .story__grid { grid-template-columns: 1fr; gap: 50px; }
  .why__grid > div:first-child { position: static; }
  .values { grid-template-columns: repeat(2, 1fr); }
  .hud { display: none; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .hero { padding-bottom: 110px; }
  .hero__coord.tr, .hero__coord.br, .press-start { display: none; }
  .hero__canvas { opacity: .55; }
  .hero__ctas { width: 100%; }
  .hero__ctas .btn { flex: 1 1 auto; justify-content: center; }
  .outline { -webkit-text-stroke-width: 1.5px; }
  .services__head { flex-direction: column; align-items: flex-start; }
  .xp { grid-template-columns: auto 1fr auto; width: 100%; }
  .svc { width: 82vw; min-height: 0; }
  .values { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .form .btn { width: 100%; justify-content: center; }
  .footer__bottom { flex-wrap: wrap; }
  .games, .story { padding: 100px 0 80px; }
  .why__pin { padding: 100px 0; }
  .contact { padding: 110px 0; }
}

/* 動きを減らす設定の人には演出を止める */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .about__scene { clip-path: none; }
  .manifesto__text .w { opacity: 1; }
}

/* トップの「See our projects」 */
.svc__link { color: rgba(255, 255, 255, .85); border-bottom: 1px solid rgba(255, 255, 255, .4); align-self: flex-start; padding-bottom: 3px; }