/* ============================================================
   最適AI — Corporate Site
   Design: Quantum / Near-future (dark cosmic, iridescent glow,
   particle field, holographic glass, orbital motion)
   ============================================================ */

:root {
  --bg:         #05060d;
  --bg-2:       #080b16;
  --ink:        #e9eefc;
  --ink-soft:   #abb5d6;
  --muted:      #8b97ba;

  --cyan:       #22d3ee;
  --blue:       #5b86ff;
  --violet:     #9a7bff;
  --magenta:    #e06bff;

  --grad:       linear-gradient(115deg, #22d3ee 0%, #5b86ff 38%, #9a7bff 66%, #e06bff 100%);
  --grad-flow:  linear-gradient(115deg, #22d3ee, #5b86ff, #9a7bff, #e06bff, #22d3ee);
  /* 抑制版（2色寄り）：小さな本文強調に使い、フル4色グラデの乱用を避ける */
  --grad-2:     linear-gradient(115deg, #38d6ee 0%, #8f8dff 100%);
  --grad-soft:  linear-gradient(115deg, rgba(34,211,238,.16), rgba(154,123,255,.16));

  --line:       rgba(255,255,255,.09);
  --line-2:     rgba(255,255,255,.16);
  --glass:      rgba(255,255,255,.035);
  --glass-2:    rgba(255,255,255,.06);
  --panel:      rgba(9,12,24,.55);

  --glow-cyan:  rgba(34,211,238,.45);
  --glow-violet:rgba(154,123,255,.5);
  --glow-blue:  rgba(91,134,255,.45);

  --maxw: 1200px;
  --pad: clamp(1.25rem, 5vw, 4rem);
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 24px;

  --font-jp: "Noto Sans JP", system-ui, sans-serif;
  --font-display: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --font-en: "Space Grotesk", "Noto Sans JP", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* 横スクロール保険（clip は hidden と違い position:sticky を壊さない） */
html, body { overflow-x: clip; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }

body {
  margin: 0;
  font-family: var(--font-jp);
  color: var(--ink);
  background:
    radial-gradient(120% 80% at 50% -10%, #0e1530 0%, transparent 55%),
    radial-gradient(90% 60% at 90% 110%, #160f33 0%, transparent 55%),
    var(--bg);
  background-attachment: fixed;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }

/* quantum particle field (fixed, behind content) */
#quantum-field { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }
main, .site-footer { position: relative; z-index: 1; }

/* nebula depth layer (drifts behind the particle field) */
.nebula { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.nebula span { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .42; mix-blend-mode: screen; will-change: transform; }
.nebula span:nth-child(1) { width: 46vw; height: 46vw; left: -8vw; top: 2vh; background: radial-gradient(circle, rgba(34,211,238,.55), transparent 68%); animation: drift1 34s ease-in-out infinite; }
.nebula span:nth-child(2) { width: 54vw; height: 54vw; right: -12vw; top: 20vh; background: radial-gradient(circle, rgba(154,123,255,.55), transparent 68%); animation: drift2 46s ease-in-out infinite; }
.nebula span:nth-child(3) { width: 42vw; height: 42vw; left: 26vw; bottom: -16vh; background: radial-gradient(circle, rgba(224,107,255,.45), transparent 68%); animation: drift3 54s ease-in-out infinite; }
@keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(6vw,4vh) scale(1.14); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-5vw,6vh) scale(1.1); } }
@keyframes drift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(4vw,-5vh) scale(1.16); } }
@media (prefers-reduced-motion: reduce) { .nebula span { animation: none; } }

/* scroll progress (HUD bar) */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform-origin: left; transform: scaleX(0); z-index: 300; background: var(--grad); box-shadow: 0 0 14px var(--glow-cyan), 0 0 6px var(--glow-violet); pointer-events: none; }

/* rotating conic aura (featured elements) */
@property --qangle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes qspin { to { --qangle: 360deg; } }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--cyan); color: #04121a; padding: .6rem 1rem; border-radius: 0 0 8px 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ---------- Keyframes ---------- */
@keyframes shimmer { to { background-position: 200% center; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.18); opacity: 1; } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes auroraShift { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(4%, -3%, 0) scale(1.08); } }

/* gradient text */
.grad-text, .brand-ai, .hero-title .accent, .biz-no, .cur-no {
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- Buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--font-jp); font-weight: 700; font-size: .94rem;
  padding: .76em 1.6em; border-radius: var(--radius-sm); border: 1.5px solid transparent;
  cursor: pointer; transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, background .25s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap; letter-spacing: .01em;
}
.btn-lg { font-size: 1rem; padding: .94em 1.95em; }
.btn-primary { background: var(--grad); color: #06080f; box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 10px 30px -8px var(--glow-violet), 0 0 22px -4px var(--glow-cyan); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset, 0 16px 40px -8px var(--glow-violet), 0 0 34px -2px var(--glow-cyan); }
.btn-ghost { background: var(--glass); color: var(--ink); border-color: var(--line-2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn-ghost:hover { border-color: var(--cyan); color: #fff; transform: translateY(-2px); box-shadow: 0 0 22px -6px var(--glow-cyan); }
.btn-ghost-dark { background: var(--glass); color: #fff; border-color: rgba(255,255,255,.28); }
.btn-ghost-dark:hover { border-color: var(--cyan); background: var(--glass-2); transform: translateY(-2px); box-shadow: 0 0 22px -6px var(--glow-cyan); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 8px; box-shadow: 0 0 18px -2px var(--glow-cyan); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(5,7,14,.62);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
          backdrop-filter: saturate(150%) blur(16px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 1.5rem; height: 72px; }
.brand { display: inline-flex; align-items: center; gap: .58rem; font-family: var(--font-display); font-weight: 900; font-size: 1.28rem; color: #fff; }
.brand-mark {
  display: grid; place-items: center; width: 33px; height: 33px; border-radius: 9px;
  background: var(--grad); color: #06080f; font-size: 1rem; font-weight: 900;
  box-shadow: 0 0 18px -2px var(--glow-cyan);
}
.nav { margin-left: auto; }
.nav-list { display: flex; gap: 1.9rem; list-style: none; margin: 0; padding: 0; font-weight: 500; font-size: .92rem; }
.nav-list a { position: relative; color: var(--ink-soft); padding: .2em 0; transition: color .18s; }
.nav-list a::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 2px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .24s cubic-bezier(.2,.7,.3,1); border-radius: 2px; box-shadow: 0 0 10px var(--glow-cyan); }
.nav-list a:hover { color: #fff; }
.nav-list a:hover::after { transform: scaleX(1); }
/* 現在地スパイ（スクロール中のセクションをナビに反映） */
.nav-list a.is-current { color: #fff; }
.nav-list a.is-current::after { transform: scaleX(1); }
.header-cta { margin-left: .25rem; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: none; margin-left: auto; }
.nav-toggle span { width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: transform .25s, opacity .25s; }
.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); }

.mobile-nav { border-bottom: 1px solid var(--line); background: rgba(5,7,14,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.mobile-nav ul { list-style: none; margin: 0; padding: 1rem var(--pad) 1.5rem; display: flex; flex-direction: column; gap: .25rem; }
.mobile-nav a { display: block; padding: .85rem .25rem; font-weight: 700; font-size: 1.05rem; color: var(--ink); border-bottom: 1px solid var(--line); }
.mobile-nav .btn { margin-top: .75rem; border-bottom: none; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(3.8rem, 8vw, 7.5rem) 0 clamp(3rem, 6vw, 6.5rem); }
.hero::before {
  content: ""; position: absolute; inset: -16% -10% 0 -10%; z-index: 0;
  background:
    radial-gradient(34% 46% at 80% 8%, rgba(154,123,255,.28), transparent 62%),
    radial-gradient(40% 50% at 98% 30%, rgba(34,211,238,.20), transparent 60%),
    radial-gradient(40% 50% at 0% 96%, rgba(224,107,255,.14), transparent 60%);
  filter: blur(6px);
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  animation: auroraShift 16s ease-in-out infinite;
  will-change: transform;
}
.hero-spot {
  position: absolute; z-index: 0; top: -18%; left: 34%;
  width: 52vmax; height: 52vmax; pointer-events: none;
  background: radial-gradient(circle at center, rgba(34,211,238,.14), rgba(154,123,255,.10) 38%, transparent 66%);
  filter: blur(10px); will-change: transform; mix-blend-mode: screen;
}
@media (prefers-reduced-motion: reduce) { .hero-spot { display: none; } .hero::before { animation: none; } }
.hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: .55em; font-family: var(--font-en); font-weight: 600; font-size: .76rem; letter-spacing: .24em; margin: 0 0 1.2rem; text-transform: uppercase; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--grad); border-radius: 2px; box-shadow: 0 0 10px var(--glow-cyan); }
.eyebrow--light { background: none; -webkit-text-fill-color: initial; color: #9fb0ff; }
.hero-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.4rem, 6vw, 4.5rem); line-height: 1.12; letter-spacing: -.03em; margin: 0 0 1.5rem; color: #fff; text-shadow: 0 0 40px rgba(91,134,255,.25); }
.hero-title .ht-line { display: block; white-space: nowrap; }
/* 見出しは静的グラデ（常時シマーを廃し、上質・落ち着いた印象に） */
.hero-title .accent { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.hero-lead { font-size: clamp(1rem, 1.4vw, 1.18rem); color: var(--ink-soft); margin: 0 0 2.2rem; max-width: 34ch; }
.hero-lead strong { color: #fff; font-weight: 700; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; }

/* hero — orbital rings + holographic HUD */
.hero-visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 440px; }
/* hero morph point-cloud (fine points assemble into professions) */
.morph-canvas { position: relative; z-index: 1; width: 100%; max-width: 440px; height: 440px; display: block; }
.morph-label { position: absolute; z-index: 2; left: 50%; bottom: 2%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .55rem; padding: .42em .95em; border-radius: 999px; background: rgba(10,13,26,.62); border: 1px solid var(--line-2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 0 24px -8px var(--glow-violet); white-space: nowrap; }
.morph-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 10px var(--cyan); animation: pulse 2s ease-in-out infinite; }
.morph-cap { font-family: var(--font-en); font-size: .64rem; letter-spacing: .16em; color: var(--muted); }
.morph-role { font-family: var(--font-jp); font-weight: 700; font-size: .92rem; color: #fff; min-width: 6.5em; }
@media (prefers-reduced-motion: reduce) { .morph-dot { animation: none; } }
.orbits { position: absolute; inset: 0; display: grid; place-items: center; z-index: 0; pointer-events: none; }
.orbits span { position: absolute; border-radius: 50%; border: 1px solid rgba(120,160,255,.16); }
.orbits span:nth-child(1) { width: 320px; height: 320px; border-color: rgba(34,211,238,.22); animation: spin 16s linear infinite; }
.orbits span:nth-child(2) { width: 440px; height: 440px; border-color: rgba(154,123,255,.16); animation: spin 30s linear infinite reverse; }
.orbits span:nth-child(3) { width: 580px; height: 580px; border-color: rgba(224,107,255,.10); animation: spin 46s linear infinite; }
.orbits span::before { content: ""; position: absolute; top: -4px; left: 50%; margin-left: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px 2px var(--cyan); }
.orbits span:nth-child(2)::before { background: var(--violet); box-shadow: 0 0 14px 2px var(--violet); }
.orbits span:nth-child(3)::before { background: var(--magenta); box-shadow: 0 0 14px 2px var(--magenta); }
.orbits i { width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle, rgba(154,123,255,.5), rgba(34,211,238,.18) 45%, transparent 70%); filter: blur(10px); animation: pulse 4.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .orbits span, .orbits i { animation: none; } }

.mock-window {
  position: relative; z-index: 1; width: 100%; max-width: 400px; border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(180deg, rgba(20,26,48,.72), rgba(10,13,26,.72));
  -webkit-backdrop-filter: blur(20px) saturate(140%);
          backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--line-2);
  box-shadow: 0 40px 90px -36px rgba(0,0,0,.7), 0 0 50px -12px var(--glow-violet), inset 0 1px 0 rgba(255,255,255,.08);
  will-change: transform; backface-visibility: hidden; transform-style: preserve-3d;
}
.mock-bar { display: flex; align-items: center; gap: .45rem; padding: .82rem 1.05rem; background: rgba(255,255,255,.03); border-bottom: 1px solid var(--line); }
.mock-dot { width: 10px; height: 10px; border-radius: 50%; background: #2c3450; }
.mock-dot:nth-child(1) { background: #ff5f57; box-shadow: 0 0 8px rgba(255,95,87,.6); }
.mock-dot:nth-child(2) { background: #febc2e; box-shadow: 0 0 8px rgba(254,188,46,.5); }
.mock-dot:nth-child(3) { background: #28c840; box-shadow: 0 0 8px rgba(40,200,64,.5); }
.mock-title { margin-left: .6rem; font-family: var(--font-en); font-size: .72rem; letter-spacing: .04em; color: var(--muted); }
.mock-body { padding: 1.6rem 1.5rem; }
.flow-card { display: flex; flex-direction: column; }
.flow-step { display: flex; align-items: center; gap: 1rem; }
.flow-no { font-family: var(--font-en); font-weight: 700; font-size: 1rem; width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.04); color: var(--muted); border: 1px solid var(--line); }
.flow-step > div { display: flex; flex-direction: column; flex: 1; }
.flow-en { font-family: var(--font-en); font-size: .66rem; letter-spacing: .14em; color: var(--muted); }
.flow-step strong { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.3; color: #fff; }
.flow-state { font-size: .68rem; font-weight: 700; color: var(--muted); background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 999px; padding: .2em .7em; white-space: nowrap; }
.flow-state.is-done { color: #4ade80; background: rgba(34,197,94,.12); border-color: rgba(74,222,128,.3); }
.flow-state.is-active { color: var(--cyan); background: rgba(34,211,238,.12); border-color: rgba(34,211,238,.35); box-shadow: 0 0 14px -4px var(--glow-cyan); }
.flow-step.is-accent .flow-no { background: var(--grad); color: #06080f; border-color: transparent; box-shadow: 0 0 18px -2px var(--glow-violet); }
.flow-step.is-accent strong { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.flow-line { width: 2px; height: 22px; margin-left: 20px; background: linear-gradient(var(--cyan), var(--violet)); opacity: .4; }
/* HUD scanline sweep + live pulse */
.mock-window::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 90px; z-index: 3; pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(34,211,238,.12) 50%, transparent);
  transform: translateY(-90px); animation: scanline 5s linear infinite;
}
@keyframes scanline { 0% { transform: translateY(-90px); } 100% { transform: translateY(480px); } }
.flow-state.is-active { animation: livePulse 2.2s ease-in-out infinite; }
@keyframes livePulse { 0%,100% { box-shadow: 0 0 14px -4px var(--glow-cyan); } 50% { box-shadow: 0 0 22px 0 var(--glow-cyan); } }
@media (prefers-reduced-motion: reduce) {
  .mock-window::after, .flow-state.is-active, .biz-card--feature::after, .plan-card--feature::after { animation: none; }
}

/* ---------- Trust ---------- */
.trust { background: rgba(8,11,22,.55); border-block: 1px solid var(--line); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.trust-inner { padding: clamp(2.2rem, 4vw, 2.9rem) var(--pad); }
.trust-lead { font-weight: 700; font-size: clamp(1rem, 1.5vw, 1.2rem); text-align: center; color: var(--ink); margin: 0 0 1.8rem; letter-spacing: -.01em; }
.trust-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 1.1rem; }
.trust-stats li { position: relative; text-align: center; padding: 1.5rem 1rem; background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .25s, box-shadow .25s, transform .25s; }
.trust-stats li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--grad); box-shadow: 0 0 16px var(--glow-cyan); }
.trust-stats li:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: 0 0 30px -10px var(--glow-violet); }
.trust-stats strong { display: block; font-family: var(--font-display); font-weight: 900; font-size: 1.18rem; color: #fff; margin-bottom: .35rem; }
.trust-stats span { color: var(--muted); font-size: .9rem; line-height: 1.7; }

/* ---------- Section base ---------- */
.section { position: relative; padding: clamp(4.2rem, 9vw, 7.5rem) 0; }
.section--panel { background: rgba(8,11,22,.5); border-block: 1px solid var(--line); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.section-head { max-width: 680px; margin: 0 auto clamp(2.6rem, 5vw, 4rem); text-align: center; }
.section-head .eyebrow { justify-content: center; }
.section-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.16; margin: 0 0 1.1rem; letter-spacing: -.03em; color: #fff; word-break: keep-all; line-break: strict; }
@media (max-width: 680px) { .section-title { word-break: normal; } }
.section-sub { color: var(--ink-soft); font-size: 1.02rem; margin: 0; }

/* ---------- Business ---------- */
.biz-list { display: grid; gap: 1.25rem; }
.biz-card {
  position: relative; display: grid; grid-template-columns: 200px 1fr; gap: clamp(1.5rem, 4vw, 3.5rem);
  background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.9rem, 3vw, 2.8rem); align-items: start; overflow: hidden;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, border-color .25s ease;
}
.biz-card:hover { transform: translateY(-5px); border-color: var(--line-2); box-shadow: 0 30px 60px -36px rgba(0,0,0,.7), 0 0 40px -14px var(--glow-violet); }
.biz-card--feature { border-color: transparent; background: linear-gradient(var(--bg-2), var(--bg-2)) padding-box, var(--grad) border-box; box-shadow: 0 0 50px -18px var(--glow-violet); }
.biz-card--feature::before { content: ""; position: absolute; inset: 0; background: var(--grad-soft); opacity: .6; pointer-events: none; z-index: 0; }
.biz-card--feature::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: 0; pointer-events: none; padding: 1.5px;
  background: conic-gradient(from var(--qangle), transparent 52%, var(--cyan) 70%, var(--violet) 84%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: qspin 7s linear infinite;
}
.biz-index, .biz-body { position: relative; z-index: 1; }
.biz-index { display: flex; flex-direction: column; gap: .4rem; }
.biz-no { font-family: var(--font-en); font-weight: 700; font-size: clamp(2.7rem, 5vw, 3.7rem); line-height: 1; filter: drop-shadow(0 0 16px rgba(91,134,255,.4)); }
.biz-en { font-family: var(--font-en); font-size: .76rem; letter-spacing: .14em; color: var(--muted); }
.biz-tag { align-self: flex-start; margin-top: .45rem; font-size: .72rem; font-weight: 700; color: #06080f; background: var(--grad); border-radius: 999px; padding: .2em .85em; box-shadow: 0 0 18px -4px var(--glow-cyan); }
.biz-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 .5rem; letter-spacing: -.02em; color: #fff; }
.biz-lead { font-weight: 700; font-size: 1.08rem; margin: 0 0 1rem; background: var(--grad-2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.biz-desc { color: var(--ink-soft); margin: 0 0 1.4rem; }
.biz-points { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.biz-points li { font-size: .88rem; font-weight: 500; color: var(--ink-soft); background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 999px; padding: .42em 1em; }
.biz-link { display: inline-flex; align-items: center; gap: .4em; margin-top: 1.3rem; font-weight: 700; font-size: .92rem; color: var(--cyan); }
.biz-link span { transition: transform .18s ease; }
.biz-link:hover { color: #fff; text-shadow: 0 0 14px var(--glow-cyan); }
.biz-link:hover span { transform: translateX(4px); }

/* ---------- Curriculum ---------- */
.curriculum { list-style: none; margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); padding: 0; display: grid; gap: 1rem; max-width: 880px; }
.cur-item {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1.1rem, 3vw, 1.8rem); align-items: start;
  background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.3rem, 2.5vw, 1.7rem) clamp(1.4rem, 3vw, 1.9rem);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, border-color .25s ease;
}
.cur-item:hover { transform: translateY(-3px) translateX(4px); border-color: var(--line-2); box-shadow: -6px 0 30px -16px var(--glow-cyan), 0 20px 40px -30px rgba(0,0,0,.8); }
.cur-no { font-family: var(--font-en); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1; width: 2.4ch; filter: drop-shadow(0 0 12px rgba(91,134,255,.4)); }
.cur-body { min-width: 0; }
.cur-tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; border-radius: 999px; padding: .22em .85em; margin-bottom: .65rem; }
.cur-tag--all { color: var(--ink-soft); background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.cur-tag--light { color: var(--cyan); background: rgba(34,211,238,.1); border: 1px solid rgba(34,211,238,.32); }
.cur-tag--std { color: #06080f; background: var(--grad); border: 1px solid transparent; box-shadow: 0 0 16px -4px var(--glow-violet); }
.cur-body h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 2.2vw, 1.4rem); margin: 0 0 .45rem; letter-spacing: -.01em; color: #fff; }
.cur-body p { margin: 0; color: var(--ink-soft); font-size: .96rem; }

/* ---------- Plans ---------- */
.plan-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; max-width: 880px; margin-inline: auto; align-items: stretch; }
.plan-card { display: flex; flex-direction: column; background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.8rem, 3vw, 2.4rem); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.plan-card--feature { position: relative; overflow: hidden; border-color: transparent; background: linear-gradient(180deg, rgba(16,20,40,.85), rgba(8,11,22,.85)) padding-box, var(--grad) border-box; box-shadow: 0 0 60px -20px var(--glow-violet); }
.plan-card--feature::before { content: ""; position: absolute; top: -40%; right: -20%; width: 70%; height: 80%; background: radial-gradient(circle, rgba(154,123,255,.4), transparent 70%); pointer-events: none; z-index: 0; }
.plan-card--feature::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: 0; pointer-events: none; padding: 1.5px;
  background: conic-gradient(from var(--qangle), transparent 50%, var(--cyan) 68%, var(--magenta) 82%, transparent 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: qspin 8s linear infinite;
}
.plan-card--feature > * { position: relative; z-index: 1; }
.plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; }
.plan-head h3 { font-family: var(--font-display); font-weight: 900; font-size: 1.55rem; margin: 0; letter-spacing: -.01em; color: #fff; }
.plan-meta { font-size: .8rem; color: var(--muted); font-weight: 500; white-space: nowrap; }
.plan-lead { color: var(--ink-soft); font-weight: 700; margin: 0 0 1rem; font-size: .98rem; }
.plan-outcome { display: flex; align-items: center; gap: .6rem; margin: 0 0 1.3rem; font-size: .92rem; font-weight: 700; color: #fff; }
.plan-outcome span { flex: none; font-size: .68rem; font-weight: 700; letter-spacing: .06em; color: #06080f; background: var(--grad); border: 1px solid transparent; border-radius: 6px; padding: .3em .65em; box-shadow: 0 0 14px -4px var(--glow-cyan); }
.plan-list { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .58rem; flex: 1; }
.plan-list li { position: relative; padding-left: 1.5rem; font-size: .92rem; color: var(--ink-soft); }
.plan-list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 8px var(--glow-cyan); }
.plan-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 1.25rem; }
.plan-price { font-size: .95rem; color: var(--muted); }
.plan-price strong { font-family: var(--font-display); font-size: 1.1rem; color: #fff; }

/* ---------- Why ---------- */
.section--dark { position: relative; overflow: hidden; }
.section--dark::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(46% 64% at 88% 6%, rgba(154,123,255,.26), transparent 60%),
    radial-gradient(42% 56% at 64% 104%, rgba(34,211,238,.18), transparent 60%);
}
.why-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.section-title--light { color: #fff; }
.why-text { color: var(--ink-soft); font-size: 1.05rem; margin: 0 0 1.3rem; max-width: 50ch; }
.why-text strong { color: #fff; }
.why-pillars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.why-pillars li { position: relative; background: var(--glass); border: 1px solid var(--line); border-radius: 16px; padding: 1.25rem 1.4rem 1.25rem 1.6rem; overflow: hidden; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: border-color .25s, box-shadow .25s, transform .25s; }
.why-pillars li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--grad); box-shadow: 0 0 16px var(--glow-cyan); }
.why-pillars li:hover { transform: translateX(4px); border-color: var(--line-2); box-shadow: 0 0 30px -12px var(--glow-violet); }
.why-pill-no { display: block; font-family: var(--font-display); font-weight: 900; font-size: 1.3rem; color: #fff; margin-bottom: .2rem; }
.why-pillars p { margin: 0; color: var(--muted); font-size: .95rem; }

/* ---------- Works ---------- */
.works-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.work-card { position: relative; background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem 1.5rem; overflow: hidden; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, border-color .25s ease; }
.work-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .28s cubic-bezier(.2,.7,.3,1); box-shadow: 0 0 14px var(--glow-cyan); }
.work-card:hover { transform: translateY(-5px); border-color: var(--line-2); box-shadow: 0 30px 60px -36px rgba(0,0,0,.7), 0 0 36px -14px var(--glow-violet); }
.work-card:hover::before { transform: scaleX(1); }
.work-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.18rem; margin: 0 0 .7rem; letter-spacing: -.01em; color: #fff; }
.work-card h3::before { content: ""; display: block; width: 28px; height: 3px; background: var(--grad); border-radius: 2px; margin-bottom: .9rem; box-shadow: 0 0 10px var(--glow-cyan); }
.work-card p { margin: 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.75; }

/* ---------- CTA ---------- */
.cta { position: relative; overflow: hidden; }
.cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(56% 130% at 12% 0%, rgba(34,211,238,.3), transparent 55%), radial-gradient(60% 130% at 95% 100%, rgba(224,107,255,.3), transparent 55%), radial-gradient(50% 100% at 50% 50%, rgba(91,134,255,.16), transparent 60%); }
.cta-inner { position: relative; z-index: 1; text-align: center; max-width: 760px; }
.cta-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.9rem, 4.6vw, 3rem); line-height: 1.24; margin: 0 0 1.2rem; letter-spacing: -.02em; color: #fff; text-shadow: 0 0 40px rgba(91,134,255,.3); }
.cta-sub { color: var(--ink-soft); font-size: 1.05rem; margin: 0 0 2.2rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }

/* ---------- Footer ---------- */
.site-footer { background: rgba(4,5,11,.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding-top: clamp(3rem, 6vw, 4.5rem); position: relative; z-index: 1; }
.site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan), var(--violet), transparent); opacity: .6; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; padding-bottom: 2.5rem; }
.brand--footer { color: #fff; }
.brand--footer .brand-mark { background: var(--grad); color: #06080f; }
.footer-tagline { color: var(--muted); margin: 1rem 0 0; font-size: .95rem; }
.footer-company { font-style: normal; color: var(--muted); font-size: .88rem; line-height: 1.9; margin-top: 1.2rem; max-width: 34ch; }
.footer-company .footer-corp { display: block; color: var(--ink-soft); font-weight: 700; margin-bottom: .25rem; }
.footer-company a { color: var(--ink-soft); }
.footer-company a:hover { color: var(--cyan); }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: .95rem; }
.footer-nav a { color: var(--ink-soft); transition: color .18s; }
.footer-nav a:hover { color: var(--cyan); }
.footer-bottom { border-top: 1px solid var(--line); padding: 1.5rem 0; }
.copyright { margin: 0; color: var(--muted); font-size: .85rem; }

/* ---------- Reveal animation ---------- */
/* JS有効時のみ隠す（html.js＝head先頭で付与。JS無効/失敗時は初期可視＝本文全消し回避）。
   イン演出は transition ではなく animation で行い、カード側の hover transition と衝突させない */
.js .reveal { opacity: 0; }
.js .reveal.is-visible { animation: revealIn .8s cubic-bezier(.2,.7,.3,1) both; }
@keyframes revealIn { from { opacity: 0; transform: translateY(30px) scale(.985); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.is-visible { opacity: 1; transform: none; filter: none; animation: none; }
}

/* ============================================================
   再構成（v8）：ストーリー整理に伴う追加コンポーネント
   - hero steps / issue / why+proof / biz stage / curriculum 2col
   - AI staff lineup / hire flow
   ============================================================ */

/* ---------- Hero step spine（学ぶ→導入→雇う）---------- */
.hero-steps { list-style: none; display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; margin: 2rem 0 0; padding: 0; }
.hero-steps li { display: inline-flex; align-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--ink); background: var(--glass-2); border: 1px solid var(--line-2); border-radius: 999px; padding: .5em 1.35em; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }

/* ---------- Issue（課題への共感）---------- */
.issue-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.issue-card { position: relative; background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.6rem, 3vw, 2.1rem); overflow: hidden; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .25s cubic-bezier(.2,.7,.3,1), border-color .25s ease, box-shadow .25s ease; }
.issue-card:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: 0 24px 50px -32px rgba(0,0,0,.7), 0 0 32px -14px var(--glow-violet); }
.issue-no { display: block; font-family: var(--font-en); font-weight: 700; font-size: 1.7rem; line-height: 1; margin-bottom: .85rem; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 0 12px rgba(91,134,255,.35)); }
.issue-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.16rem; line-height: 1.55; margin: 0 0 .7rem; color: #fff; }
.issue-card p { margin: 0; color: var(--ink-soft); font-size: .94rem; }
.issue-bridge { text-align: center; max-width: 800px; margin: clamp(2.4rem, 5vw, 3.4rem) auto 0; font-size: clamp(1.05rem, 1.8vw, 1.3rem); font-weight: 700; line-height: 1.95; color: var(--ink); }
.issue-bridge strong { background: var(--grad-2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* ---------- Why（lede + proof grid を z-index で前面に）---------- */
.section--dark .section-head, .why-lede, .works-lead, .section--dark .works-grid { position: relative; z-index: 1; }
.why-lede { max-width: 780px; margin: 0 auto clamp(2.4rem, 5vw, 3.4rem); text-align: center; }
.why-lede .why-text { max-width: none; margin: 0 0 1.3rem; font-size: clamp(1rem, 1.5vw, 1.12rem); }
.why-lede .why-text:last-child { margin-bottom: 0; }
.works-lead { text-align: center; color: var(--muted); font-size: .98rem; margin: 0 0 1.8rem; }

/* ---------- Business stage（3事業＝3ステップ）---------- */
.biz-stage { display: inline-block; font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.1; letter-spacing: .01em; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 0 16px rgba(91,134,255,.35)); }
.biz-for { display: flex; align-items: baseline; gap: .65rem; margin: 1.3rem 0 0; font-size: .92rem; font-weight: 700; color: var(--ink-soft); }
.biz-for span { flex: none; font-size: .68rem; font-weight: 700; letter-spacing: .04em; color: var(--cyan); background: rgba(34,211,238,.1); border: 1px solid rgba(34,211,238,.3); border-radius: 6px; padding: .26em .6em; }

/* ---------- Curriculum：2カラム圧縮（スクール偏り是正）---------- */
.cur-grid { list-style: none; margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; max-width: 940px; }

/* ---------- AI staff lineup（最適AI＋ STEP03「雇う」）---------- */
.staff-grid { list-style: none; margin: 0 0 clamp(2.4rem, 5vw, 3.4rem); padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.1rem; }
.staff-card { position: relative; background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.1rem 1.05rem 1.4rem; text-align: center; overflow: hidden; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .25s cubic-bezier(.2,.7,.3,1), border-color .25s ease, box-shadow .25s ease; }
.staff-card:hover { transform: translateY(-5px); border-color: var(--line-2); box-shadow: 0 26px 54px -32px rgba(0,0,0,.7), 0 0 34px -14px var(--glow-violet); }
.staff-photo { position: relative; width: 100%; aspect-ratio: 1 / 1; margin-bottom: .9rem; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-2);
  background:
    radial-gradient(70% 64% at 50% 30%, rgba(186,205,255,.40), rgba(126,156,255,.16) 52%, transparent 78%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 60%, rgba(5,7,14,.25)); }
.staff-photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); pointer-events: none; }
.staff-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 10px 26px rgba(0,0,0,.5)) brightness(1.05) contrast(1.03); }
.staff-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.04rem; margin: 0 0 .42rem; color: #fff; }
.staff-card p { margin: 0; color: var(--ink-soft); font-size: .82rem; line-height: 1.7; }

/* ---------- Hire flow（面接→採用→月給）---------- */
.hire-flow { list-style: none; display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; gap: 1rem; margin: 0 auto; padding: 0; max-width: 720px; }
.hire-flow > li:not(.hf-arrow) { flex: 1 1 0; min-width: 150px; display: flex; flex-direction: column; align-items: center; gap: .3rem; background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem 1.3rem; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hire-flow .hf-no { font-family: var(--font-en); font-weight: 700; font-size: .7rem; letter-spacing: .12em; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.hire-flow strong { font-family: var(--font-display); font-weight: 900; font-size: 1.32rem; color: #fff; }
.hire-flow .hf-cap { font-size: .8rem; color: var(--muted); text-align: center; }
.hire-flow .hf-arrow { display: flex; align-items: center; color: var(--muted); font-size: 1.3rem; }
.plus-note { text-align: center; color: var(--muted); font-size: .9rem; margin: 1.6rem 0 0; }

/* ---------- Section title inline tag（準備中 等）---------- */
.title-tag { display: inline-block; vertical-align: middle; font-family: var(--font-jp); font-size: .78rem; font-weight: 700; color: #06080f; background: var(--grad); border-radius: 999px; padding: .2em .9em; margin-left: .55rem; transform: translateY(-.18em); box-shadow: 0 0 18px -4px var(--glow-cyan); }

/* ---------- Responsive（再構成分）---------- */
@media (max-width: 980px) {
  .staff-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 680px) {
  .issue-grid { grid-template-columns: 1fr; }
  .cur-grid { grid-template-columns: 1fr; }
  .staff-grid { grid-template-columns: repeat(2, 1fr); }
  .hire-flow { flex-direction: column; align-items: center; flex-wrap: nowrap; }
  .hire-flow > li:not(.hf-arrow) { width: 100%; min-width: 0; }
  .hire-flow .hf-arrow { align-self: center; transform: rotate(90deg); }
  .hero-steps { gap: .6rem; font-size: .92rem; }
}

/* ============================================================
   新方針（v11/v12）：学ぶ・使う・雇う ＋ 最適顧問（4プロダクト）
   - why lineup chips（内製プロダクトの並び）
   - swap grid（最適プロダクト＝高額ツール置き換え）
   ============================================================ */

/* ---------- biz card：03 雇うのサブ名（最適AI＋）---------- */
.biz-sub { font-family: var(--font-jp); font-size: .82rem; font-weight: 700; color: var(--muted); letter-spacing: 0; }

/* ---------- WHY：内製プロダクトの並び（chips）---------- */
.why-lineup { list-style: none; margin: 0 auto clamp(1.6rem, 3vw, 2.2rem); padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; max-width: 720px; }
.why-lineup li { font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: var(--ink); background: var(--glass-2); border: 1px solid var(--line-2); border-radius: 999px; padding: .42em 1.1em; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }

/* ---------- 最適プロダクト：置き換えグリッド ---------- */
.swap-grid { list-style: none; margin: 0 auto clamp(2rem, 4vw, 2.8rem); padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.swap-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 2.6vw, 1.8rem); overflow: hidden;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform .25s cubic-bezier(.2,.7,.3,1), border-color .25s ease, box-shadow .25s ease;
}
.swap-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .28s cubic-bezier(.2,.7,.3,1); box-shadow: 0 0 14px var(--glow-cyan); }
.swap-card:hover { transform: translateY(-5px); border-color: var(--line-2); box-shadow: 0 30px 60px -36px rgba(0,0,0,.7), 0 0 36px -14px var(--glow-violet); }
.swap-card:hover::before { transform: scaleX(1); }
.swap-top { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .9rem; }
.swap-name { font-family: var(--font-display); font-weight: 900; font-size: 1.32rem; margin: 0; letter-spacing: -.01em; color: #fff; }
.swap-status { flex: none; font-size: .7rem; font-weight: 700; letter-spacing: .02em; border-radius: 999px; padding: .28em .8em; white-space: nowrap; }
.swap-status.is-live { color: #4ade80; background: rgba(34,197,94,.12); border: 1px solid rgba(74,222,128,.3); }
.swap-status.is-dev { color: var(--cyan); background: rgba(34,211,238,.1); border: 1px solid rgba(34,211,238,.32); }
.swap-replace { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; margin: 0 0 .9rem; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--ink); }
.swap-replace span { flex: none; font-family: var(--font-jp); font-size: .68rem; font-weight: 700; letter-spacing: .04em; color: var(--muted); background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 6px; padding: .3em .6em; }
.swap-desc { margin: auto 0 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.8; }
.swap-pitch { text-align: center; max-width: 760px; margin: 0 auto; font-size: clamp(1.02rem, 1.6vw, 1.22rem); font-weight: 700; line-height: 1.9; color: var(--ink); }
.swap-pitch strong { background: var(--grad-2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.swap-cta { display: flex; justify-content: center; margin-top: clamp(1.6rem, 3vw, 2.2rem); }

/* ---------- Responsive（新方針分）---------- */
@media (max-width: 980px) {
  .swap-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .swap-grid { grid-template-columns: 1fr; }
  .biz-sub { display: block; }
}

/* ============================================================
   円環ハブ（v14）：4つの入口 → 中心＝最適
   学ぶ・使う・雇う・頼る、どこから始めても中心の「最適」へ
   ============================================================ */
.hub {
  position: relative;
  width: min(500px, 86vw);
  aspect-ratio: 1 / 1;
  margin: 0 auto clamp(1.4rem, 3vw, 2.2rem);
  display: grid;
  place-items: center;
  isolation: isolate;
}
/* orbit ring（中心を囲む輪。ゆっくり回るドット付き）*/
.hub-ring { position: absolute; inset: 18%; border-radius: 50%; border: 1px solid rgba(120,160,255,.22); box-shadow: inset 0 0 60px -14px var(--glow-violet), 0 0 34px -16px var(--glow-cyan); animation: spin 26s linear infinite; }
.hub-ring::before { content: ""; position: absolute; inset: -9%; border-radius: 50%; border: 1px dashed rgba(120,160,255,.13); }
.hub-ring::after { content: ""; position: absolute; top: -4px; left: 50%; margin-left: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px 2px var(--cyan); }
@media (prefers-reduced-motion: reduce) { .hub-ring { animation: none; } }
/* spokes（中心から5方向の光線）*/
.hub-spokes { position: absolute; inset: 0; z-index: 1; }
.hub-spokes i { position: absolute; top: 50%; left: 50%; width: 2px; height: 41%; transform-origin: top center; border-radius: 2px; background: linear-gradient(180deg, rgba(154,123,255,.6), rgba(34,211,238,.04)); }
.hub-spokes i:nth-child(1) { transform: translateX(-50%) rotate(0deg); }
.hub-spokes i:nth-child(2) { transform: translateX(-50%) rotate(72deg); }
.hub-spokes i:nth-child(3) { transform: translateX(-50%) rotate(144deg); }
.hub-spokes i:nth-child(4) { transform: translateX(-50%) rotate(216deg); }
.hub-spokes i:nth-child(5) { transform: translateX(-50%) rotate(288deg); }
/* core（中心＝最適）*/
.hub-core {
  position: relative; z-index: 3; display: grid; place-items: center; gap: .04rem;
  width: clamp(96px, 27%, 134px); aspect-ratio: 1 / 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, rgba(154,123,255,.55), rgba(34,211,238,.18) 52%, rgba(5,7,14,.55) 82%);
  border: 1px solid var(--line-2);
  box-shadow: 0 0 46px -6px var(--glow-violet), inset 0 0 26px -6px var(--glow-cyan);
}
.hub-core-jp { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.4rem, 4.6vw, 1.95rem); line-height: 1; letter-spacing: -.02em; color: #fff; text-shadow: 0 0 24px rgba(91,134,255,.45); }
.hub-core-jp .brand-ai { font-family: var(--font-en); letter-spacing: 0; }
/* nodes（5つの入口・正五角形配置）*/
.hub-node {
  position: absolute; z-index: 4; display: grid; justify-items: center; gap: .12rem;
  padding: .5em .95em; text-align: center; white-space: nowrap;
  background: rgba(9,12,24,.78); border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 10px 28px -14px rgba(0,0,0,.85), 0 0 20px -10px var(--glow-cyan);
}
.hub-node b { font-family: var(--font-display); font-weight: 900; font-size: clamp(1rem, 3vw, 1.22rem); line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.hub-node em { font-style: normal; font-size: clamp(.62rem, 1.8vw, .74rem); color: var(--ink-soft); }
.hub-node--n1 { top: 9%;    left: 50%;   transform: translate(-50%, -50%); }
.hub-node--n2 { top: 37.5%; left: 88%;   transform: translate(-50%, -50%); }
.hub-node--n3 { top: 82.5%; left: 72%;   transform: translate(-50%, -50%); }
.hub-node--n4 { top: 82.5%; left: 28%;   transform: translate(-50%, -50%); }
.hub-node--n5 { top: 37.5%; left: 12%;   transform: translate(-50%, -50%); }
/* caption */
.hub-cap { text-align: center; max-width: 640px; margin: 0 auto; font-size: clamp(1rem, 1.6vw, 1.18rem); font-weight: 700; color: var(--ink); line-height: 1.9; }
.hub-cap strong { background: var(--grad-2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
@media (max-width: 560px) {
  .hub { width: min(340px, 90vw); }
  .hub-node b { font-size: 1rem; }
  .hub-node em { font-size: .64rem; }
  .hub-node--l { transform: translate(0, -50%); }
  .hub-node--r { transform: translate(0, -50%); }
}
@media (max-width: 420px) {
  .hub { width: 94vw; }
  .hub-node { padding: .42em .66em; }
}

/* ---------- Helpers ---------- */
.br-sp { display: none; }
.nowrap { white-space: nowrap; }

/* ---------- FAQ（SEO/AIO：構造化データと同一内容のQ&A）---------- */
.faq-list { margin: 0 auto; max-width: 880px; display: grid; gap: 1rem; }
.faq-item {
  background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 2.6vw, 1.9rem) clamp(1.5rem, 3vw, 2.2rem);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.faq-item:hover { border-color: var(--line-2); box-shadow: 0 0 30px -14px var(--glow-violet); }
.faq-item dt { position: relative; font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; color: #fff; padding-left: 1.9rem; margin-bottom: .6rem; }
.faq-item dt::before { content: "Q"; position: absolute; left: 0; top: .05em; font-family: var(--font-en); font-weight: 700; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.faq-item dd { margin: 0; padding-left: 1.9rem; color: var(--ink-soft); font-size: .95rem; line-height: 1.9; }

/* ---------- Footer 対応エリア ---------- */
.footer-area { display: block; margin-top: .55rem; color: var(--muted); }

/* ---------- お問い合わせフォーム（サイト内完結・/api/contact へ送信）---------- */
.contact-form { max-width: 720px; margin: 0 auto; text-align: left; }
.cf-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.1rem; margin-bottom: 1rem; }
.cf-field { display: flex; flex-direction: column; gap: .4rem; }
.cf-field--full { grid-column: 1 / -1; }
.cf-label { font-size: .88rem; font-weight: 700; color: var(--ink-soft); display: inline-flex; align-items: center; gap: .5em; }
.cf-req { font-style: normal; font-size: .66rem; font-weight: 700; color: #06080f; background: var(--grad-2); border-radius: 6px; padding: .18em .6em; }
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%; font-family: var(--font-jp); font-size: .96rem; color: var(--ink);
  background: rgba(10,13,26,.6); border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  padding: .72em .95em; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.contact-form select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 1.2em) 55%, calc(100% - 0.85em) 55%; background-size: .36em .36em; background-repeat: no-repeat; }
.contact-form textarea { resize: vertical; min-height: 8em; line-height: 1.8; }
.contact-form ::placeholder { color: rgba(139,151,186,.55); }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 18px -6px var(--glow-cyan); }
.contact-form input.is-invalid, .contact-form textarea.is-invalid { border-color: #ff7a90; box-shadow: 0 0 16px -8px rgba(255,122,144,.7); }
.cf-hp { position: absolute; left: -9999px; top: -9999px; }
.cf-note { color: var(--muted); font-size: .82rem; margin: 0 0 1.4rem; }
.contact-form .cta-actions { justify-content: flex-start; }
.contact-form .btn[disabled] { opacity: .6; cursor: wait; transform: none; }
.form-status { min-height: 1.6em; margin: 1rem 0 0; font-weight: 700; font-size: .95rem; }
.form-status.is-ok { color: #4ade80; }
.form-status.is-ng { color: #ff9aac; }
.cf-done { text-align: center; padding: 2.2rem 1rem; background: var(--glass); border: 1px solid var(--line-2); border-radius: var(--radius-lg); }
.cf-done strong { display: block; font-family: var(--font-display); font-size: 1.3rem; color: #fff; margin-bottom: .6rem; }
.cf-done p { margin: 0; color: var(--ink-soft); }
@media (max-width: 680px) {
  .cf-grid { grid-template-columns: 1fr; }
  .contact-form .cta-actions { justify-content: stretch; }
}

/* ---------- モバイル追従CTA（ヒーロー通過後に表示・CTA/フッター到達で退避）---------- */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none;
  padding: .7rem var(--pad) calc(.7rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(5,7,14,0), rgba(5,7,14,.9) 40%);
  transform: translateY(110%); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), opacity .3s ease, visibility 0s linear .3s;
}
.mobile-cta .btn { width: 100%; }
.mobile-cta.is-shown { transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
@media (max-width: 680px) { .mobile-cta { display: block; } }
@media (prefers-reduced-motion: reduce) { .mobile-cta { transition: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .nav, .header-cta { display: none; }
  .nav-toggle { display: flex; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { justify-content: flex-start; min-height: 360px; }
  .morph-canvas { height: 360px; max-width: 380px; }
  .orbits span:nth-child(3) { width: 480px; height: 480px; }
  .why-inner { grid-template-columns: 1fr; }
  .works-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .biz-card { grid-template-columns: 1fr; gap: 1.2rem; }
  .biz-index { flex-direction: row; align-items: baseline; gap: .8rem; }
  .biz-no { font-size: 2.5rem; }
  .trust-stats { grid-template-columns: 1fr; gap: 1rem; }
  .plan-grid { grid-template-columns: 1fr; }
  .plan-foot { justify-content: flex-start; }
  .br-pc { display: none; }
  .br-sp { display: inline; }
}