@charset "UTF-8";
/* ============================================================
   style.css — 株式会社ブレビス コーポレート/ショーケース
   方向: ダーク×発光（グロースグリーン）
   構成: 1.トークン → 2.リセット/ベース → 3.レイアウト
        → 4.コンポーネント → 5.モーション → 6.停止ポリシー
   ============================================================ */

/* ---------- 1. トークン ---------- */
:root {
  /* 色: 漆黒×グロースグリーン */
  --color-bg: #06070a;           /* 地（Void Black） */
  --color-surface: #0d1117;      /* 面（カード・フォーム） */
  --color-surface-2: #10161f;    /* 面の明るい段 */
  --color-text: #f2f5f3;         /* 本文 */
  --color-muted: #8b949e;        /* 補助テキスト */
  --color-accent: #3dffa2;       /* グロースグリーン（発光） */
  --color-accent-dim: #22c97b;   /* 発光の暗段（罫線・下地） */
  --color-accent-ink: #06070a;   /* accent上の文字色 */
  --color-line: #1c2128;         /* 罫線 */
  --glow: 0 0 24px rgba(61, 255, 162, 0.35);

  /* タイポ */
  --font-display: "Unbounded", "Zen Kaku Gothic New", sans-serif;
  --font-body: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-mono: "IBM Plex Mono", "Menlo", monospace;

  /* 型: 8px系 */
  --space: 8px;
  --section-pad: clamp(72px, 13vw, 160px);
  --container: 1160px;
  --container-narrow: 760px;
  --radius: 4px;

  /* 階層 */
  --z-canvas: 1;
  --z-content: 10;
  --z-header: 100;
  --z-nav: 200;
  --z-loader: 900;
  --z-modal: 1000;
  --z-cursor: 1100;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --duration-fast: 0.3s;
  --duration: 0.8s;
  --duration-slow: 1.2s;
}

/* ---------- 2. リセット/ベース ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

html, body { overflow-x: clip; }  /* マーキー・全幅タイポの横はみ出し事故防止 */

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.9;
  font-size: 16px;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
}

::selection { background: var(--color-accent); color: var(--color-accent-ink); }

img, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; }
a:hover { opacity: 0.75; transition: opacity 0.3s; }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

h1, h2, h3 {
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

/* 英字ディスプレイ（発光見出し用） */
.en-display {
  font-family: var(--font-display);
  letter-spacing: 0.02em;
}
.mono { font-family: var(--font-mono); letter-spacing: 0.04em; }

/* ---------- 3. レイアウト ---------- */
.container { width: min(var(--container), 100% - 48px); margin-inline: auto; }
.container--narrow { width: min(var(--container-narrow), 100% - 48px); margin-inline: auto; }

.section { padding-block: var(--section-pad); position: relative; }
.section--tight { padding-block: calc(var(--section-pad) * 0.6); }

/* セクション見出し（シグネチャー: 等幅ラベル＋グロースライン） */
.section-head { margin-bottom: calc(var(--space) * 8); }
.section-head__en {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: calc(var(--space) * 3);
}
.section-head__en::after {
  content: "";
  width: 72px; height: 12px; flex: none;
  background:
    linear-gradient(to top right, transparent 46%, var(--color-accent) 48%, var(--color-accent) 52%, transparent 54%);
  filter: drop-shadow(0 0 6px rgba(61, 255, 162, 0.8));
}
.section-head__title {
  font-size: clamp(28px, 4.5vw, 48px);
  text-wrap: balance;
}

/* ---------- 4. コンポーネント ---------- */

/* グレインオーバーレイ */
.grain {
  position: fixed; inset: 0; z-index: calc(var(--z-cursor) - 1);
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ローディング（index専用・計測モチーフ） */
.loader {
  position: fixed; inset: 0; z-index: var(--z-loader);
  background: var(--color-bg);
  display: grid; place-content: center; text-align: center;
  transition: transform 0.7s var(--ease-in-out), visibility 0.7s;
}
.loader.is-done { transform: translateY(-100%); visibility: hidden; }
.loader__count {
  font-family: var(--font-mono);
  font-size: clamp(48px, 9vw, 96px);
  color: var(--color-accent);
  text-shadow: var(--glow);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.loader__label {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--color-muted);
}
.loader__bar {
  width: min(280px, 60vw); height: 2px; margin: 24px auto 0;
  background: var(--color-line); position: relative; overflow: hidden;
}
.loader__bar span {
  position: absolute; inset: 0;
  background: var(--color-accent);
  box-shadow: var(--glow);
  transform-origin: left; transform: scaleX(0);
  transition: transform 0.2s linear;
}

/* ヘッダー */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px clamp(20px, 4vw, 48px);
  transition: box-shadow 0.4s;
}
/* 背景ブラーは疑似要素に置く。ヘッダー本体にbackdrop-filterを付けると
   子のfixedメニューの基準がヘッダーになり、スクロール後に開くと崩れるため */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  backdrop-filter: blur(10px);
  opacity: 0; transition: opacity 0.4s;
}
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--color-line); }
.site-header.is-scrolled::before { opacity: 1; }
.site-header__logo {
  font-family: var(--font-display);
  font-weight: 700; font-size: 18px; letter-spacing: 0.06em;
  text-decoration: none;
}
.site-header__logo .dot { color: var(--color-accent); text-shadow: var(--glow); }

.global-nav ul { display: flex; align-items: center; gap: calc(var(--space) * 4); list-style: none; padding: 0; }
.global-nav a {
  text-decoration: none; font-size: 13px; letter-spacing: 0.1em;
  color: var(--color-muted); transition: color 0.3s;
}
.global-nav a:hover { color: var(--color-text); opacity: 1; }
.global-nav a[aria-current="page"] { color: var(--color-accent); }
.global-nav a.nav-cta {
  color: var(--color-accent);
  border: 1px solid var(--color-accent-dim);
  border-radius: 999px;
  padding: 9px 22px;
  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}
.global-nav a.nav-cta:hover {
  background: var(--color-accent); color: var(--color-accent-ink);
  box-shadow: var(--glow); opacity: 1;
}

/* ハンバーガー(SP) */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  background: none; border: none; cursor: pointer;
  position: relative; z-index: calc(var(--z-nav) + 1);
}
.nav-toggle span {
  display: block; width: 24px; height: 2px; margin: 5px auto;
  background: var(--color-text); transition: transform 0.3s, opacity 0.3s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ナビ項目5つ×日本語ラベルは1024px未満で折り返すため、タブレットもハンバーガーにする */
@media (max-width: 1023px) {
  .nav-toggle { display: block; }
  .global-nav {
    position: fixed; inset: 0; z-index: var(--z-nav);
    background: color-mix(in srgb, var(--color-bg) 96%, transparent);
    backdrop-filter: blur(12px);
    display: grid; place-content: center;
    opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0.4s;
  }
  .global-nav.is-open { opacity: 1; visibility: visible; }
  .global-nav ul { flex-direction: column; text-align: center; gap: calc(var(--space) * 4); }
  .global-nav a { font-size: 18px; }
}

/* WebGLキャンバス（index背面） */
.gl-canvas {
  position: fixed; inset: 0; z-index: var(--z-canvas);
  pointer-events: none;
}
.no-webgl .gl-canvas { display: none; }
.no-webgl .hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 90% 60% at 70% 80%, rgba(61, 255, 162, 0.12), transparent 60%),
    radial-gradient(ellipse 60% 40% at 20% 30%, rgba(61, 255, 162, 0.05), transparent 70%);
}
main { position: relative; z-index: var(--z-content); }

/* ヒーロー（タイポグラフィック全面＋WebGL背景） */
.hero {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--space) * 16) 0 calc(var(--space) * 8);
  position: relative;
}
.hero__meta {
  display: flex; gap: 24px; flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: calc(var(--space) * 3);
}
.hero__meta .tick { color: var(--color-accent); }
.hero__title {
  font-family: var(--font-display);
  /* 全幅ブリード+文字数基準のサイズでnowrapはみ出しを構造的に防ぐ(pitfalls.md)
     SPは3行(GROWTH/YOUR/BUSINESS=8字基準)、PCは2行(YOUR BUSINESS=13字基準) */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-inline: clamp(20px, 4vw, 48px);
  font-size: clamp(34px, 14.2vw - 14px, 200px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.hero__title .title-line { display: block; white-space: nowrap; }
@media (min-width: 768px) {
  .hero__title { font-size: clamp(56px, 8.9vw - 9px, 200px); line-height: 1.02; }
  .br-sp { display: none; }
}
.hero__title .accent { color: var(--color-accent); text-shadow: var(--glow); }
.hero__lead {
  margin-top: calc(var(--space) * 4);
  max-width: 36em;
  color: var(--color-muted);
  font-size: clamp(14px, 1.6vw, 17px);
}
.hero__lead strong { color: var(--color-text); font-weight: 700; }
.hero__scroll {
  position: absolute; right: clamp(20px, 4vw, 48px); bottom: calc(var(--space) * 8);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--color-muted);
  writing-mode: vertical-rl;
}
.hero__scroll::after {
  content: ""; width: 1px; height: 56px;
  background: linear-gradient(to bottom, var(--color-accent), transparent);
  animation: scrollPulse 2s var(--ease-in-out) infinite;
}
@keyframes scrollPulse {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@media (max-width: 767px) {
  .hero__scroll { display: none; }
  /* SPは下寄せだと上半分が空いて見えるため中央寄せにする */
  .hero { justify-content: center; padding-top: calc(var(--space) * 12); padding-bottom: calc(var(--space) * 12); }
}

/* ヒーローのロードシーケンス */
.hero__meta, .hero__lead, .hero__scroll { opacity: 0; }
.hero .title-line { opacity: 0; }
.is-loaded .hero__meta { animation: heroUp 0.9s var(--ease-out) 0.15s forwards; }
.is-loaded .hero .title-line:nth-child(1) { animation: heroUp 1s var(--ease-out) 0.3s forwards; }
.is-loaded .hero .title-line:nth-child(2) { animation: heroUp 1s var(--ease-out) 0.45s forwards; }
.is-loaded .hero__lead { animation: heroUp 0.9s var(--ease-out) 0.7s forwards; }
.is-loaded .hero__scroll { animation: heroFade 1.2s var(--ease-out) 1.1s forwards; }
@keyframes heroUp { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes heroFade { from { opacity: 0; } to { opacity: 1; } }

/* 文字単位オープニング(JSがsplit成功時に.is-splitを付与。失敗時は上の行単位が保険)
   background-clip: text との併用は文字消えの罠があるため、光はcolor/text-shadowで走らせる */
.hero__title.is-split .title-line { opacity: 1; animation: none; overflow: hidden; }
.hero__title.is-split .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(112%) rotate(8deg);
}
.is-loaded .hero__title.is-split .ch {
  /* シーンはサイクル冒頭で光らせる設計にし、開演直後(約1秒)に最初の光が走る
     周期3.5秒。立ち上がり約0.5s・余韻約0.8sのゆっくりした点灯 */
  animation: charUp 0.9s var(--ease-out) calc(0.25s + var(--ci) * 0.045s) forwards,
             charSheen 3.5s linear calc(0.9s + var(--ci) * 0.1s) infinite;
}
.is-loaded .hero__title.is-split .ch--accent {
  animation: charUp 0.9s var(--ease-out) calc(0.25s + var(--ci) * 0.045s) forwards; /* 発光色は常時光なのでシーン対象外 */
}
@keyframes charUp { to { opacity: 1; transform: none; } }
@keyframes charSheen {
  0% { color: var(--color-text); text-shadow: none; }
  14% { color: var(--color-accent); text-shadow: 0 0 30px rgba(61, 255, 162, 0.9); }
  37%, 100% { color: var(--color-text); text-shadow: none; }
}
html.is-motion-off .hero__title .ch { opacity: 1; transform: none; animation: none; }

/* Mission: 文字点灯（破調・sticky） */
.story { height: 300svh; position: relative; }
.story__sticky {
  position: sticky; top: 0; height: 100svh;
  display: flex; align-items: center; justify-content: center;
}
.story__text {
  max-width: min(21em, 88vw);
  text-align: center;
  line-break: strict;
  font-size: clamp(22px, 4.2vw, 44px);
  font-weight: 700;
  line-height: 2;
}
.story__line { display: block; text-wrap: balance; margin-bottom: 0.6em; }
.story__text .ch { opacity: 0.13; display: inline; transition: none; }
.story__label {
  position: absolute; top: calc(var(--space) * 14); left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.34em;
  text-transform: uppercase; color: var(--color-accent);
}

/* サービスカード */
.services__grid {
  display: grid; gap: calc(var(--space) * 3);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services__grid { grid-template-columns: repeat(4, 1fr); } }  /* サービス4本 */
.service-card {
  position: relative;
  display: flex; flex-direction: column; gap: calc(var(--space) * 2);
  padding: calc(var(--space) * 5) calc(var(--space) * 4);
  background: linear-gradient(160deg, var(--color-surface-2), var(--color-surface) 55%);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.service-card::before {
  content: "";
  position: absolute; inset: 0;  /* カード内に収める(はみ出しは視覚QAでFAILになる) */
  background: radial-gradient(ellipse 130% 110% at var(--mx, 50%) var(--my, 100%), rgba(61, 255, 162, 0.17), transparent 62%);
  opacity: 0; transition: opacity 0.5s var(--ease-out);
  pointer-events: none;
}
.service-card:hover {
  transform: translateY(-8px);
  border-color: var(--color-accent-dim);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 32px rgba(61, 255, 162, 0.12);
  opacity: 1;
}
.service-card:hover::before { opacity: 1; }
.service-card__no {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--color-accent); letter-spacing: 0.2em;
}
.service-card__title { font-size: 21px; line-height: 1.5; }
.service-card__en {
  font-family: var(--font-display); font-weight: 500;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-muted);
}
.service-card__desc { font-size: 14px; color: var(--color-muted); flex: 1; }
.service-card__more {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em;
  color: var(--color-accent);
  display: inline-flex; align-items: center; gap: 8px;
}
.service-card__more::after { content: "→"; transition: transform 0.3s var(--ease-out); }
.service-card:hover .service-card__more::after { transform: translateX(6px); }

/* 数字スタッツ */
.stats { border-block: 1px solid var(--color-line); }
.stats__grid {
  display: grid; grid-template-columns: 1fr; gap: calc(var(--space) * 6);
}
@media (min-width: 768px) { .stats__grid { grid-template-columns: repeat(3, 1fr); gap: calc(var(--space) * 4); } }
/* 実績6枚用: SP2列→タブレット以上3列(3×2)。カンマ区切りの桁数に合わせ数字を縮める */
.stats__grid--five { grid-template-columns: repeat(2, 1fr); gap: calc(var(--space) * 5) calc(var(--space) * 3); }
.stats__grid--five .stat__value { font-size: clamp(22px, 3.4vw, 52px); white-space: nowrap; }  /* SP2列でも7桁+単位が列内に収まる下限 */
@media (max-width: 767px) { .stats__grid--five .stat { padding-left: calc(var(--space) * 2); } }
@media (min-width: 768px) { .stats__grid--five { grid-template-columns: repeat(3, 1fr); } }
.stat { text-align: left; position: relative; padding-left: calc(var(--space) * 3); }
.stat::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(to bottom, var(--color-accent), transparent);
  box-shadow: var(--glow);
}
.stat__value {
  font-family: var(--font-mono);
  font-size: clamp(56px, 7.5vw, 88px);
  font-weight: 500;
  color: var(--color-accent);
  text-shadow: var(--glow);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat__value .unit { font-size: 0.4em; margin-left: 4px; color: var(--color-accent-dim); }
.stat__label { margin-top: calc(var(--space) * 1); font-size: 14px; color: var(--color-text); font-weight: 500; }
.stat__note { font-size: 12px; color: var(--color-muted); }

/* Flow タイムライン */
.flow { counter-reset: flow; }
.flow__list { list-style: none; padding: 0; display: grid; gap: 0; }
.flow__item {
  counter-increment: flow;
  position: relative;
  padding: calc(var(--space) * 5) 0 calc(var(--space) * 5) calc(var(--space) * 10);
  border-bottom: 1px solid var(--color-line);
}
.flow__item::before {
  content: "0" counter(flow);
  position: absolute; left: 0; top: calc(var(--space) * 5);
  font-family: var(--font-mono); font-size: 14px;
  color: var(--color-accent);
}
.flow__item::after {
  content: ""; position: absolute; left: 12px; top: calc(var(--space) * 5 + 34px); bottom: 12px;
  width: 1px; background: linear-gradient(to bottom, var(--color-accent-dim), transparent);
}
.flow__item:last-child::after { display: none; }
.flow__title { font-size: 19px; margin-bottom: calc(var(--space) * 1); }
.flow__desc { font-size: 14px; color: var(--color-muted); max-width: 46em; }

/* 蛍光マーカー（キーワード強調） */
.marker {
  background: linear-gradient(rgba(61, 255, 162, 0.24), rgba(61, 255, 162, 0.24)) no-repeat left 64% / 0% 52%;
  border-radius: 3px; padding: 0 0.12em;
  transition: background-size 0.9s var(--ease-out) 0.2s;
}
.marker.is-marked { background-size: 100% 52%; }

/* マーキー */
.marquee {
  overflow: hidden; white-space: nowrap;
  border-block: 1px solid var(--color-line);
  padding-block: calc(var(--space) * 2);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 3.4vw, 36px);
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px var(--color-accent-dim);
}
.marquee__inner {
  display: inline-flex; gap: 3rem; padding-right: 3rem;
  animation: marquee 28s linear infinite;
}
.marquee__inner .solid { color: var(--color-accent); -webkit-text-stroke: 0; text-shadow: var(--glow); }
@keyframes marquee { to { transform: translateX(-100%); } }

/* CTAバンド */
.cta-band { text-align: center; position: relative; overflow: hidden; }
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 90% at 50% 120%, rgba(61, 255, 162, 0.14), transparent 65%);
  pointer-events: none;
}
.cta-band__title { font-size: clamp(30px, 5.5vw, 60px); margin-bottom: calc(var(--space) * 3); }
.cta-band__lead { color: var(--color-muted); max-width: 38em; margin: 0 auto calc(var(--space) * 6); }

/* ボタン（発光） */
.button {
  display: inline-block;
  padding: 18px 56px;
  background: var(--color-accent); color: var(--color-accent-ink);
  border: 1px solid var(--color-accent); border-radius: 999px;
  font-family: var(--font-body); font-weight: 700;
  font-size: 15px; letter-spacing: 0.1em; text-decoration: none;
  cursor: pointer;
  box-shadow: 0 0 32px rgba(61, 255, 162, 0.3);
  transition: background var(--duration-fast), color var(--duration-fast),
              box-shadow var(--duration-fast), transform var(--duration-fast) var(--ease-out);
}
.button:hover {
  background: transparent; color: var(--color-accent);
  box-shadow: 0 0 48px rgba(61, 255, 162, 0.45), inset 0 0 18px rgba(61, 255, 162, 0.12);
  opacity: 1;
}
.button:disabled { opacity: 0.5; cursor: wait; }
.button--ghost {
  background: transparent; color: var(--color-accent);
  border-color: var(--color-accent-dim); box-shadow: none;
}
.button--ghost:hover { background: var(--color-accent); color: var(--color-accent-ink); box-shadow: var(--glow); }

/* 下層ページヘッダー */
.page-header {
  padding: calc(var(--section-pad) * 1.15) 0 calc(var(--section-pad) * 0.4);
  position: relative; overflow: hidden;
}
.page-header::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 70% at 85% 0%, rgba(61, 255, 162, 0.08), transparent 60%),
    linear-gradient(to top right, transparent 49.4%, rgba(61, 255, 162, 0.12) 49.9%, rgba(61, 255, 162, 0.12) 50.1%, transparent 50.6%);
}
.page-header__en {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--color-accent);
}
.page-header__title {
  font-size: clamp(34px, 5.5vw, 64px);
  margin-top: calc(var(--space) * 1.5);
}

.breadcrumb { padding-block: calc(var(--space) * 2); font-size: 12px; color: var(--color-muted); font-family: var(--font-mono); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.6em; list-style: none; padding: 0; }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 0.6em; color: var(--color-line); }
.breadcrumb a { text-decoration: none; }

/* 特徴リスト（下層サービス） */
.features__grid { display: grid; gap: calc(var(--space) * 3); grid-template-columns: 1fr; }
@media (min-width: 768px) { .features__grid { grid-template-columns: repeat(2, 1fr); } }
.feature-box {
  padding: calc(var(--space) * 4);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  transition: border-color var(--duration-fast), transform var(--duration-fast) var(--ease-out);
}
.feature-box:hover { border-color: var(--color-accent-dim); transform: translateY(-4px); }
.feature-box__no { font-family: var(--font-mono); font-size: 12px; color: var(--color-accent); letter-spacing: 0.2em; }
.feature-box__title { font-size: 18px; margin: calc(var(--space) * 1) 0; }
.feature-box__desc { font-size: 14px; color: var(--color-muted); }
.feature-box__list { margin-top: 8px; padding-left: 1.3em; font-size: 14px; color: var(--color-muted); display: grid; gap: 6px; }
/* 制作物一例(点数が多い)用: 見出しを一段小さくして密度を上げる */
.works .feature-box__title { font-size: 16px; }

/* 開発実績カウンター(300+): スロット式に桁がぐるぐる回って着地する */
.works__counter { text-align: center; margin-bottom: calc(var(--space) * 8); }
.works__counter-value {
  font-family: var(--font-mono);
  font-size: clamp(72px, 11vw, 140px);
  font-weight: 500;
  color: var(--color-accent);
  text-shadow: var(--glow);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.works__counter-value .works__plus { margin-left: 0.06em; }
.works__counter-label { margin-top: calc(var(--space) * 2); font-size: 15px; color: var(--color-text); font-weight: 500; }
.slot { display: inline-flex; overflow: hidden; height: 1em; vertical-align: bottom; }
.slot__strip { display: block; }
.slot__strip span { display: block; height: 1em; line-height: 1; }

/* 定義テーブル（会社概要） */
.def-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.def-table th, .def-table td { padding: 20px 8px; border-bottom: 1px solid var(--color-line); text-align: left; vertical-align: top; }
.def-table th { width: 9em; font-weight: 500; color: var(--color-muted); font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.1em; white-space: nowrap; }  /* 長い項目名(適格請求書発行事業者登録番号)も1行で表示 */
@media (max-width: 767px) {
  .def-table th, .def-table td { display: block; padding: 6px 0; border: none; }
  .def-table tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--color-line); }
}

/* Values */
.values__grid { display: grid; gap: calc(var(--space) * 3); grid-template-columns: 1fr; }
@media (min-width: 768px) { .values__grid { grid-template-columns: repeat(3, 1fr); } }

/* 対象業種チップ */
.chips { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; padding: 0; }
.chips li {
  font-size: 13px; padding: 8px 20px;
  border: 1px solid var(--color-line); border-radius: 999px;
  color: var(--color-muted);
  background: var(--color-surface);
}
.chips li strong { color: var(--color-accent); font-weight: 500; }

/* Other Services（下層回遊） */
.other-services { border-top: 1px solid var(--color-line); }
.other-services .services__grid { grid-template-columns: 1fr; }
@media (min-width: 768px) { .other-services .services__grid { grid-template-columns: repeat(3, 1fr); } }  /* 残り3サービス */

/* フォーム */
.form { display: grid; gap: calc(var(--space) * 4); }
.form__fieldset { display: grid; gap: calc(var(--space) * 4); border: none; padding: 0; margin: 0; }

/* 新規受付停止の告知と、停止中フォームのグレーアウト */
.form-closed-notice {
  margin-bottom: calc(var(--space) * 7);
  padding: calc(var(--space) * 4) calc(var(--space) * 4.5);
  background: var(--color-surface);
  border: 1px solid var(--color-accent-dim);
  border-radius: var(--radius);
  box-shadow: 0 0 32px rgba(61, 255, 162, 0.08);
}
.form-closed-notice__label {
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--color-accent); margin-bottom: calc(var(--space) * 1.5);
}
.form-closed-notice__title { font-size: 20px; margin-bottom: calc(var(--space) * 2); }
.form-closed-notice p:not(.form-closed-notice__label) { font-size: 14px; color: var(--color-muted); }
.form--closed {
  opacity: 0.35;
  pointer-events: none;   /* 触れない・送れない(構造は残して再開時に戻せる) */
  user-select: none;
  filter: grayscale(0.4);
}
.form__field { display: grid; gap: calc(var(--space) * 1); }
.form__field label { font-size: 14px; font-weight: 700; }
.form__field .required {
  color: var(--color-accent); font-size: 11px; margin-left: 0.6em;
  font-family: var(--font-mono); letter-spacing: 0.1em;
}
.form input, .form textarea, .form select {
  font: inherit; padding: 15px 16px;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-line); border-radius: var(--radius);
}
.form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-muted) 50%), linear-gradient(135deg, var(--color-muted) 50%, transparent 50%); background-position: calc(100% - 21px) 50%, calc(100% - 16px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.form input:focus, .form textarea:focus, .form select:focus { border-color: var(--color-accent); outline: none; box-shadow: 0 0 0 3px rgba(61, 255, 162, 0.12); }
.form [aria-invalid="true"] { border-color: #ff5d5d; }
.form__error { color: #ff7b7b; font-size: 13px; min-height: 1.2em; }
.form__hp { position: absolute; left: -9999px; }  /* ハニーポット: 削除禁止 */
.form__agree { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
.form__agree input { width: 18px; height: 18px; margin-top: 5px; accent-color: var(--color-accent); }
.form__note { font-size: 13px; color: var(--color-muted); }
.form__note a { color: var(--color-accent); }

/* フッター */
.site-footer {
  padding: calc(var(--space) * 10) 0 calc(var(--space) * 4);
  border-top: 1px solid var(--color-line);
  font-size: 13px; color: var(--color-muted);
  position: relative; z-index: var(--z-content);
  background: var(--color-bg);
}
.site-footer__grid {
  display: grid; gap: calc(var(--space) * 5);
  grid-template-columns: 1fr;
  margin-bottom: calc(var(--space) * 8);
}
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; } }
.site-footer__logo {
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
  color: var(--color-text); text-decoration: none;
}
.site-footer__tag { margin-top: 12px; max-width: 26em; }
.site-footer h2 {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--color-accent);
  margin-bottom: 16px;
}
.site-footer ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.site-footer ul a { text-decoration: none; }
.site-footer ul a:hover { color: var(--color-accent); opacity: 1; }
.site-footer__bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding-top: calc(var(--space) * 3);
  border-top: 1px solid var(--color-line);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
}

/* カスタムカーソル */
@media (hover: hover) and (pointer: fine) {
  html.force-motion body { cursor: none; }
  html.force-motion a, html.force-motion button { cursor: none; }
  .cursor-dot, .cursor-ring {
    position: fixed; top: 0; left: 0; z-index: var(--z-cursor);
    pointer-events: none; border-radius: 50%;
    transform: translate(-50%, -50%);
  }
  .cursor-dot {
    width: 6px; height: 6px;
    background: var(--color-accent);
    box-shadow: 0 0 10px rgba(61, 255, 162, 0.9);
  }
  .cursor-ring {
    width: 34px; height: 34px;
    border: 1px solid rgba(61, 255, 162, 0.5);
    transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out), border-color 0.3s;
  }
  .cursor-ring.is-hover { width: 58px; height: 58px; border-color: var(--color-accent); }
}
@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* ---------- 5. モーション基盤 ---------- */
.js-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
}
/* 方向つきリビール(:whereで詳細度を上げず、最後の.is-inviewが必ず勝つようにする) */
.features__grid > :where(.js-reveal:nth-child(odd)) { transform: translateX(-48px); }
.features__grid > :where(.js-reveal:nth-child(even)) { transform: translateX(48px); }
.services__grid > :where(.js-reveal) { transform: translateY(52px) scale(0.94); }
.stats__grid > :where(.js-reveal) { transform: translateY(36px) scale(0.9); }
.js-reveal.is-inview { opacity: 1; transform: none; }
.js-reveal[data-delay="1"] { transition-delay: 0.1s; }
.js-reveal[data-delay="2"] { transition-delay: 0.2s; }
.js-reveal[data-delay="3"] { transition-delay: 0.3s; }

/* クリックリップル(クリック地点から発光の輪が広がる) */
.click-ripple {
  position: fixed; left: 0; top: 0;
  width: 140px; height: 140px; margin: -70px 0 0 -70px;
  border-radius: 50%;
  border: 1px solid var(--color-accent);
  box-shadow: 0 0 26px rgba(61, 255, 162, 0.5), inset 0 0 18px rgba(61, 255, 162, 0.25);
  transform: scale(0);
  pointer-events: none; z-index: calc(var(--z-cursor) - 2);
  animation: rippleOut 0.65s var(--ease-out) forwards;
}
@keyframes rippleOut {
  55% { opacity: 0.7; }
  to { transform: scale(1); opacity: 0; }
}

/* ページ遷移ワイプ(内部リンククリック→発光面が覆う→次ページで抜ける) */
.page-wipe {
  position: fixed; inset: -2% 0; z-index: calc(var(--z-loader) - 10);
  background:
    linear-gradient(to bottom, var(--color-accent) 0, var(--color-accent) 3px, transparent 3px),
    linear-gradient(160deg, #0b241a, var(--color-bg) 55%);
  transform: translateY(115%);  /* 待機時は発光が画面に漏れない深さまで退避 */
  visibility: hidden;           /* 待機時は完全非表示(フルページスクショへの写り込み防止) */
  pointer-events: none;
}
.page-wipe.is-cover, .page-wipe.is-reveal {
  visibility: visible;
  box-shadow: 0 -18px 60px rgba(61, 255, 162, 0.45);  /* 発光は動作中のみ */
}
.page-wipe.is-cover {
  transition: transform 0.5s var(--ease-in-out);
  transform: translateY(0);
}
.page-wipe.is-reveal {
  transform: translateY(0);
  animation: wipeUp 0.65s var(--ease-in-out) 0.05s forwards;
}
@keyframes wipeUp { to { transform: translateY(-103%); } }
html.is-motion-off .page-wipe { display: none; }

/* ---------- 6. モーション停止（SKILL.mdポリシー。削除禁止） ---------- */
.motion-stop {
  display: none;
  position: fixed; right: 16px; bottom: 16px; z-index: var(--z-modal);
  padding: 10px 16px; font-size: 12px;
  color: var(--color-text);
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: 999px; cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  .motion-stop { display: block; }
}
html.is-motion-off .js-reveal,
html.is-motion-off *[class] {
  transition-duration: 0.01ms !important;
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
}
html.is-motion-off .js-reveal { opacity: 1; transform: none; }
html.is-motion-off .hero__meta, html.is-motion-off .hero__lead,
html.is-motion-off .hero__scroll, html.is-motion-off .hero .title-line { opacity: 1; }
html.is-motion-off .story { height: auto; padding-block: var(--section-pad); }
html.is-motion-off .story__sticky { position: static; height: auto; }
html.is-motion-off .story__text .ch { opacity: 1; }
html.is-motion-off .marker { background-size: 100% 52%; }
html.is-motion-off .loader { display: none; }
html.is-motion-off .gl-canvas { display: none; }
html.is-motion-off .grain { display: none; }
html.is-motion-off body { cursor: auto; }
html.is-motion-off .cursor-dot, html.is-motion-off .cursor-ring { display: none; }