/* ====== Tokens (from DESIGN.md, with brand purple+cyan accents) ====== */
:root {
  /* Surfaces (tiered grays — no pure black) */
  --surface:                       #0f131f;
  --surface-container-lowest:      #0a0e1a;
  --surface-container-low:         #171b28;
  --surface-container:             #1b1f2c;
  --surface-container-high:        #262a37;
  --surface-container-highest:     #313442;
  --surface-bright:                #353946;
  --outline:                       #859398;
  --outline-variant:               #3c494e;

  /* Text */
  --on-surface:                    #dfe2f3;
  --on-surface-variant:            #bbc9cf;
  --on-surface-strong:             #ffffff;
  --on-surface-muted:              #8b93a8;

  /* Brand accents */
  --primary:                       #00d4ff;  /* cyan — interactive / CTAs */
  --primary-bright:                #3cd7ff;
  --primary-soft:                  #a8e8ff;
  --primary-deep:                  #00677e;
  --secondary:                     #6366f1;  /* indigo/purple */
  --secondary-soft:                #c0c1ff;
  --secondary-deep:                #3131c0;
  --tertiary:                      #6af7ba;

  /* Gradients */
  --grad-brand:                    linear-gradient(135deg, #6366f1 0%, #00d4ff 100%);
  --grad-brand-soft:               linear-gradient(135deg, rgba(99,102,241,0.18) 0%, rgba(0,212,255,0.22) 100%);
  --grad-section:                  linear-gradient(180deg, var(--surface-container) 0%, var(--surface) 100%);

  /* Scale (1024 → 1440) — drives padding & dimensions */
  --s: clamp(0px, calc((100vw - 1024px) / 416), 1px);
  --scale: clamp(0.94, calc(0.94 + (100vw - 1024px) * 0.000159), 1);
  --page-pad: clamp(24px, 4.2vw, 80px);
  --gap-lg:    clamp(48px, 6vw, 96px);
  --gap-section: clamp(80px, 8vw, 128px);

  /* Type */
  --font-sans: "Plus Jakarta Sans", "Noto Sans JP", system-ui, sans-serif;
  --font-jp:   "Noto Sans JP", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Sizes — scale freely from 1024 upward, but cap at very large screens */
  --fs-display:  clamp(40px, 3.3vw, 64px);
  --fs-h1:       clamp(38px, 3.2vw, 60px);
  --fs-brand:    clamp(48px, 4.4vw, 84px);
  --fs-h2:       clamp(36px, 3.2vw, 60px);
  --fs-h3:       clamp(20px, 1.55vw, 26px);
  --fs-lead:     clamp(17px, 1.4vw, 22px);
  --fs-body:     clamp(15px, 1.2vw, 18px);
  --fs-sm:       clamp(13px, 1vw, 15px);

  /* Readability caps for long-running text */
  --measure-lead:    72ch;
  --measure-body:    78ch;

  /* Section content widths (full-bleed sections, but inner content bounded for readability) */
  --content-max:     min(1440px, 92vw);
  --content-narrow:  min(1100px, 88vw);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--surface-container-lowest); }
body {
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-width: 320px;
}
img, svg { display: block; }
a { color: inherit; text-decoration: none; }

.page {
  width: 100%;
  margin: 0 auto;
  position: relative;
  background: var(--surface);
  overflow-x: hidden;
}

/* ====== Reusable atoms ====== */
.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
  display: inline-block;
}
.eyebrow.with-bar::before {
  content: none;
}

.h2 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--fs-h2);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--on-surface-strong);
  margin: 16px 0 0;
}
.lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: var(--on-surface-variant);
  margin: 20px 0 0;
}

/* ====== Buttons / CTA ====== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  border-radius: 9999px;
  cursor: pointer;
  transform: scale(1);
  transition: transform 300ms ease-out,
              box-shadow 300ms ease-out,
              background 300ms ease-out,
              border-color 300ms ease-out,
              color 300ms ease-out;
  white-space: nowrap;
  will-change: transform, box-shadow;
}
.btn.small {
  height: 40px;
  padding: 0 22px;
  font-size: 14px;
}
.btn.big {
  height: 60px;
  padding: 0 28px;
  min-width: 320px;
}
.btn-primary {
  background: var(--grad-brand);
  color: #06121e;
  box-shadow: 0 0 0 1px rgba(0,212,255,0.4), 0 8px 30px rgba(0,212,255,0.18), 0 4px 12px rgba(99,102,241,0.25);
}
.btn-primary:hover {
  transform: scale(1.02);
  box-shadow:
    0 0 0 1px rgba(0,212,255,0.65),
    0 0 24px rgba(0, 212, 255, 0.45),
    0 0 48px rgba(0, 212, 255, 0.22),
    0 10px 28px rgba(0, 0, 0, 0.35);
  transition: transform 200ms ease-out,
              box-shadow 200ms ease-out,
              background 200ms ease-out;
}
.btn-primary:active {
  transform: scale(0.98);
  box-shadow:
    0 0 0 1px rgba(0,212,255,0.45),
    0 0 16px rgba(0, 212, 255, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform 80ms ease-out,
              box-shadow 80ms ease-out;
}
.btn-primary:focus-visible {
  outline: none;
  transform: scale(1.02);
  box-shadow:
    0 0 0 3px rgba(0,212,255,0.35),
    0 0 24px rgba(0, 212, 255, 0.45),
    0 0 48px rgba(0, 212, 255, 0.22);
}
.btn-primary .badge {
  background: rgba(255,255,255,0.78);
  color: #1d4ed8;
  border-radius: 4px;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-jp);
  letter-spacing: 0;
}
.btn-outline {
  background: rgba(0,212,255,0.04);
  color: var(--primary);
  border: 2px solid rgba(0,212,255,0.55);
  box-shadow: inset 0 0 0 1px rgba(99,102,241,0.15);
}
.btn-outline:hover {
  transform: scale(1.02);
  background: rgba(0, 212, 255, 0.10);
  border-color: #00D4FF;
  color: #ffffff;
  box-shadow:
    inset 0 0 0 1px rgba(99,102,241,0.20),
    inset 0 0 24px rgba(0, 212, 255, 0.10),
    0 0 22px rgba(0, 212, 255, 0.28);
  transition: transform 200ms ease-out,
              background 200ms ease-out,
              border-color 200ms ease-out,
              box-shadow 200ms ease-out,
              color 200ms ease-out;
}
.btn-outline:active {
  transform: scale(0.98);
  background: rgba(0, 212, 255, 0.14);
  box-shadow:
    inset 0 0 0 1px rgba(99,102,241,0.20),
    inset 0 0 14px rgba(0, 212, 255, 0.12),
    0 0 12px rgba(0, 212, 255, 0.22);
  transition: transform 80ms ease-out,
              background 80ms ease-out,
              box-shadow 80ms ease-out;
}
.btn-outline:focus-visible {
  outline: none;
  transform: scale(1.02);
  background: rgba(0, 212, 255, 0.10);
  border-color: #00D4FF;
  color: #ffffff;
  box-shadow:
    0 0 0 3px rgba(0,212,255,0.28),
    inset 0 0 24px rgba(0, 212, 255, 0.10),
    0 0 22px rgba(0, 212, 255, 0.28);
}
.btn svg {
  width: 18px;
  height: 18px;
  transition: transform 200ms ease-out;
  will-change: transform;
}
.btn-primary:hover svg,
.btn-primary:focus-visible svg {
  transform: translateY(2px);
}
.btn-outline:hover svg,
.btn-outline:focus-visible svg {
  transform: rotate(-6deg);
}
.btn-primary:active svg { transform: translateY(3px); }
.btn-outline:active svg { transform: rotate(-4deg); }

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn svg {
    transition: background 100ms ease-out,
                border-color 100ms ease-out,
                color 100ms ease-out !important;
  }
  .btn:hover,
  .btn:active,
  .btn:focus-visible {
    transform: none !important;
  }
  .btn:hover svg,
  .btn:active svg,
  .btn:focus-visible svg {
    transform: none !important;
  }
}
.cta-row {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 56px;
  flex-wrap: wrap;
}

/* ====== Nav — 共有レイアウト・ビジュアル ====== */
.nav,
.nav-hero {
  position: fixed;
  top: clamp(12px, 1.2vw, 16px);
  left: clamp(12px, 1.6vw, 24px);
  right: clamp(12px, 1.6vw, 24px);
  height: 64px;
  padding: 8px clamp(16px, 1.6vw, 24px);
  border-radius: 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 12px 36px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.10);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* スクロールで出現するフローティング nav */
.nav {
  z-index: 100;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.nav.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* FV 常時表示 nav — 囲みなし・リンクなし・ボタンなし */
.nav-hero {
  z-index: 99;
  background: none;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border-radius: 0;
}
.nav-hero .nav-links { display: none; }
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand .mark {
  height: 26px;
  width: auto;
  display: block;
  /* Source PNG is dark gray; invert so it reads on the dark LP background. */
  filter: invert(1) brightness(1.05);
}
.brand .name {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--on-surface-strong);
  white-space: nowrap;
}
.nav-links {
  display: flex;
  gap: 36px;
}
.nav-links a {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  transition: color .15s;
}
.nav-links a:hover { color: var(--primary); }

.nav .ctas,
.nav-hero .ctas { display: flex; gap: 12px; align-items: center; }
.nav-hero .ctas { display: none; }

/* ====== Hero (FV) — split layout: text cushion + image area ====== */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
  background: var(--surface-container-lowest);
}

.fv-image-area {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
.fv-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: right top;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}
.fv-slide.active { opacity: 1; }
.fv-slide-1 { background-image: url("images/slide_1.webp"); }
.fv-slide-2 { background-image: url("images/slide_2.webp"); }
.fv-slide-3 { background-image: url("images/slide_3.webp"); }
.fv-slide-4 { background-image: url("images/slide_4.webp"); }
/* Decorative gradient lines */
.fv-image-area::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, transparent 0%, transparent 38%, rgba(99,102,241,0.18) 40%, rgba(0,212,255,0.22) 42%, transparent 44%, transparent 100%),
    linear-gradient(135deg, transparent 0%, transparent 60%, rgba(99,102,241,0.10) 61%, rgba(0,212,255,0.14) 62%, transparent 63%, transparent 100%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 2;
}
/* Subtle dot grid */
.fv-image-area::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0);
  background-size: 28px 28px;
  z-index: 2;
  pointer-events: none;
}

/* Text cushion: left 65vw, with a -20° slant on its right edge */
.fv-text-cushion {
  position: absolute;
  left: 0;
  top: 0;
  width: 65vw;
  height: 100%;
  z-index: 2;
}
.cushion-shape {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, calc(100% - clamp(200px, 36vh, 460px)) 0, 100% 100%, 0 100%);
  overflow: hidden;
  background: #0f131f;
}
.cushion-bg {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}
.cushion-bg.active { opacity: 1; }
.cushion-bg-1 { background: linear-gradient(135deg, #1f2a3e 0%, #0f131f 50%, #0a0e1a 100%); }
.cushion-bg-2 { background: linear-gradient(135deg, #1a2438 0%, #0f131f 50%, #0d0f1c 100%); }
.cushion-bg-3 { background: linear-gradient(135deg, #1a2a3a 0%, #0f1820 50%, #0a0e1a 100%); }
.cushion-bg-4 { background: linear-gradient(135deg, #251f3e 0%, #0f131f 50%, #0a0e1a 100%); }

/* Cyan glow line tracing the cushion's slanted edge */
.cushion-edge-glow {
  position: absolute;
  top: 50%;
  left: calc(65vw - clamp(100px, 18vh, 230px) + 20px);
  width: 2px;
  height: 110%;
  transform: translate(-50%, -50%) rotate(-19.8deg);
  transform-origin: center center;
  background: linear-gradient(to bottom,
    rgba(0, 212, 255, 0) 0%,
    rgba(0, 212, 255, 0.55) 28%,
    rgba(0, 212, 255, 0.75) 50%,
    rgba(0, 212, 255, 0.55) 72%,
    rgba(0, 212, 255, 0) 100%);
  box-shadow:
    0 0 8px rgba(0, 212, 255, 0.55),
    0 0 20px rgba(0, 212, 255, 0.3);
  pointer-events: none;
  z-index: 3;
}

.hero-inner {
  position: relative;
  z-index: 4;
  width: 100%;
  height: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: clamp(96px, 9vw, 160px) var(--page-pad) clamp(80px, 7vw, 110px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
}

/* Responsive: collapse cushion to full-width translucent overlay (SP only) */
@media (max-width: 768px) {
  .fv-text-cushion {
    width: 100vw;
  }
  .cushion-shape {
    clip-path: none;
  }
  .cushion-bg-1 { background: linear-gradient(90deg, rgba(10,14,26,0.98) 0%, rgba(10,14,26,0.85) 60%, transparent 100%); }
  .cushion-bg-2 { background: linear-gradient(90deg, rgba(10,14,26,0.96) 0%, rgba(10,14,26,0.83) 60%, transparent 100%); }
  .cushion-bg-3 { background: linear-gradient(90deg, rgba(10,14,26,0.96) 0%, rgba(10,14,26,0.83) 60%, transparent 100%); }
  .cushion-bg-4 { background: linear-gradient(90deg, rgba(12,10,26,0.98) 0%, rgba(12,10,26,0.85) 60%, transparent 100%); }
  .cushion-edge-glow { display: none; }
  .fv-slide {
    background-size: cover;
    background-position: center top;
  }
}
.hero-copy {
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.hero-eyebrow {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.22em;
  word-spacing: -0.45em;
  color: var(--primary);
  text-transform: uppercase;
}
.hero-eyebrow .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 12px var(--primary);
  margin-right: 10px;
  transform: translateY(-2px);
}
.hero-title {
  margin: 16px 0 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: var(--on-surface-strong);
  white-space: pre-line;
}
.hero-brand {
  margin: 4px 0 0;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(32px, 4.0vw, 52px);
  line-height: 1.3;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #ffffff 0%, #a8e8ff 50%, #c0c1ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* 「3」大きく・「時間で」は2行目と同サイズ・「出るチームに。」は少し小さく */
.hero-brand .title-reveal:first-child .char:nth-child(1) {
  font-size: 1.5em;
  line-height: 1;
  letter-spacing: -0.04em;
}
.hero-brand .title-reveal:first-child .char:not(:nth-child(1)) {
  font-size: 1em;
  vertical-align: 0;
  letter-spacing: -0.02em;
}
.hero-brand .title-reveal:last-child .char {
  font-size: 0.82em;
}
.hero-lead {
  margin: 28px 0 0;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: rgba(255,255,255,0.86);
  max-width: 620px;
  white-space: pre-line;
  text-align: left;
}
.hero-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  margin-top: 28px;
  max-width: 720px;
  justify-content: flex-start;
}
/* PC: ラッパーをレイアウト透過、複製チップ非表示 */
.hero-chips-row { display: contents; }
.chip.hero-chip-dup { display: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(99,102,241,0.18) 0%, rgba(0,212,255,0.14) 100%);
  border: 1px solid rgba(0,212,255,0.45);
  color: #e8efff;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  box-shadow: 0 0 24px rgba(0, 212, 255, 0.08);
}
.chip svg { width: 14px; height: 14px; color: var(--primary); flex: 0 0 auto; }
/* hero チップのみ：明るい背景でも読めるよう不透明な背景に */
.hero-chips .chip {
  background: linear-gradient(135deg, #1d1f48 0%, #0e2235 100%);
  backdrop-filter: none;
  border-color: rgba(0,212,255,0.6);
}
.hero-note {
  margin: 14px 0 0;
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: 11px;
  color: rgba(255,255,255,0.55);
}

.hero-bottom-cta {
  display: flex;
  justify-content: flex-start;
  gap: 20px;
  margin-top: 40px;
  flex-wrap: wrap;
}

/* Scroll indicator — pinned to the bottom-center of the hero */
.scroll-cue {
  position: absolute;
  bottom: clamp(20px, 2vw, 32px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  color: var(--primary);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity .2s ease, color .2s ease;
  animation: scrollCueFloat 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
.scroll-cue:hover { opacity: 1; color: var(--primary-soft); }
.scroll-cue .label { display: block; }
.scroll-cue .arrow {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: scrollCueArrow 2.4s ease-in-out infinite;
}
@keyframes heroChipsScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-chips-row { animation: none; }
}

@keyframes scrollCueFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
@keyframes scrollCueArrow {
  0%, 100% { opacity: 0.6; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue, .scroll-cue .arrow { animation: none; }
}
@media (max-height: 780px) {
  .scroll-cue { display: none; }
}

/* ====== Pain ====== */
.pain {
  position: relative;
  padding: var(--gap-section) var(--page-pad);
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-container-low) 50%, var(--surface) 100%);
}
.pain h2 {
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(28px, 2.4vw, 36px);
  letter-spacing: -0.02em;
  color: var(--on-surface-strong);
  margin: 0 0 48px;
}
.pain-glow {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.16) 0%, rgba(0,212,255,0.08) 35%, transparent 70%);
  pointer-events: none;
  filter: blur(20px);
}
.pain-cards {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 36px);
  max-width: min(1100px, 92vw);
  margin: 0 auto;
}
.pain-card {
  position: relative;
  width: clamp(480px, 62%, 800px);
  border-radius: 20px;
  background: linear-gradient(180deg, var(--surface-container-high) 0%, var(--surface-container) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 16px 40px rgba(0,0,0,0.35);
  padding: 28px 36px;
  opacity: 0;
  transition: opacity .5s ease-out, transform .5s ease-out;
}
.pain-card.from-left  { align-self: flex-start; transform: translateX(-60px); }
.pain-card.from-right { align-self: flex-end;   transform: translateX(60px); }
.pain-card.is-visible { opacity: 1; transform: translateX(0); }

/* Speech-bubble tail */
.pain-card::before,
.pain-card::after {
  content: "";
  position: absolute;
  top: 32px;
  width: 0;
  height: 0;
  border-style: solid;
}
.pain-card.from-left::before {
  left: -16px;
  border-width: 11px 16px 11px 0;
  border-color: transparent rgba(255,255,255,0.08) transparent transparent;
}
.pain-card.from-left::after {
  left: -14px;
  border-width: 10px 15px 10px 0;
  border-color: transparent var(--surface-container-high) transparent transparent;
}
.pain-card.from-right::before {
  right: -16px;
  border-width: 11px 0 11px 16px;
  border-color: transparent transparent transparent rgba(255,255,255,0.08);
}
.pain-card.from-right::after {
  right: -14px;
  border-width: 10px 0 10px 15px;
  border-color: transparent transparent transparent var(--surface-container);
}

.pain-card p {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.7;
  color: var(--on-surface);
  white-space: pre-line;
  text-align: left;
}

@media (prefers-reduced-motion: reduce) {
  .pain-card { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ====== About ====== */
.about {
  padding: var(--gap-section) var(--page-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--surface-container-low);
  position: relative;
  overflow: hidden;
}
/* ネオン/グラス グロウオーブ */
.about::before,
.about::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(90px);
  z-index: 0;
}
.about::before {
  width: 540px;
  height: 440px;
  top: 4%;
  left: -8%;
  background: rgba(99, 102, 241, 0.16);
  animation: aboutGlowA 12s ease-in-out infinite alternate;
}
.about::after {
  width: 500px;
  height: 420px;
  bottom: 8%;
  right: -7%;
  background: rgba(0, 212, 255, 0.13);
  animation: aboutGlowB 15s ease-in-out infinite alternate;
}
@keyframes aboutGlowA {
  from { transform: translate(0, 0)        scale(1);    opacity: 0.6; }
  to   { transform: translate(55px, 75px)  scale(1.18); opacity: 1;   }
}
@keyframes aboutGlowB {
  from { transform: translate(0, 0)         scale(1);    opacity: 0.5; }
  to   { transform: translate(-65px, -55px) scale(1.22); opacity: 0.95; }
}
@media (prefers-reduced-motion: reduce) {
  .about::before,
  .about::after { animation: none; opacity: 0.7; }
}
/* コンテンツがグロウより前面に来るよう保証 */
.about > * { position: relative; z-index: 1; }
.about h2,
.skills h2,
.price h2,
.company h2 {
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--fs-h2);
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--on-surface-strong);
  margin: 16px 0 0;
  white-space: pre-line;
}
.about .lead,
.skills .lead,
.price .lead {
  text-align: center;
  margin-top: 20px;
  color: var(--on-surface-variant);
  max-width: var(--measure-lead);
}
.about-media {
  position: relative;
  margin-top: 64px;
  width: 100%;
  max-width: var(--content-max);
}

/* Full-bleed marquee */
.marquee-wrap {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 40px;
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 80px,
    #000 calc(100% - 80px),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 80px,
    #000 calc(100% - 80px),
    transparent 100%
  );
}
.marquee-row {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: scroll-left 90s linear infinite;
}
.marquee-row.reverse {
  animation: scroll-right 100s linear infinite;
}
.marquee-row.sp-only { display: none; }
@keyframes scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes scroll-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-row { animation: none; }
}

.marquee-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  flex: 0 0 auto;
  padding: 16px 28px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(99,102,241,0.18) 0%, rgba(0,212,255,0.14) 100%);
  border: 1px solid rgba(0, 212, 255, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #e8efff;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.35;
  white-space: nowrap;
  box-shadow: 0 0 32px rgba(0, 212, 255, 0.1);
}
.marquee-pill .ico {
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  background: transparent;
  border: 1.5px solid #00D4FF;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00D4FF;
  flex: 0 0 auto;
}
.marquee-pill .ico svg { width: 12px; height: 12px; }

/* YouTube 動画ラッパー — 回転するシアン光のボーダーアニメーション */
.about-video-wrap {
  position: relative;
  z-index: 1;
  width: 72%;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}

/* 回転する conic-gradient がボーダーの光源になる */
.about-video-wrap::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  height: 300%;
  transform: translate(-50%, -50%) rotate(0deg);
  background: conic-gradient(
    from 0deg at 50% 50%,
    rgba(0,212,255,0)    0deg,
    rgba(0,212,255,0.85) 40deg,
    rgba(99,102,241,0.6) 80deg,
    rgba(0,212,255,0)    120deg,
    rgba(0,212,255,0)    240deg,
    rgba(0,212,255,0.5)  280deg,
    rgba(0,212,255,0)    320deg
  );
  animation: videoSpin 10s linear infinite;
  z-index: 0;
  pointer-events: none;
}

/* 内側をマスク → ボーダーの細い光だけ残す */
.about-video-wrap::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 14px;
  background: #0a0e1a;
  z-index: 1;
  pointer-events: none;
}

.about-video-iframe {
  position: absolute;
  inset: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  border: none;
  border-radius: 14px;
  display: block;
  z-index: 2;
}

@keyframes videoSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .about-video-wrap::before { animation: none; }
}

.float-chip { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .float-chip { opacity: 1 !important; transform: none !important; transition: none !important; }
}

.about-desc {
  margin: 32px auto 0;
  text-align: center;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.85;
  color: var(--on-surface-variant);
  max-width: 800px;
  text-wrap: pretty;
}
.about-chips {
  margin-top: 56px;
  width: 100%;
  max-width: var(--content-narrow);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.2vw, 20px);
}
.about-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 64px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--surface-container-high) 0%, var(--surface-container) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  padding: 0 20px;
  color: var(--on-surface);
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.4;
  position: relative;
  overflow: hidden;
}
.about-chip::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--grad-brand);
}
.about-chip .ico {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(0,212,255,0.10);
  display: flex; align-items: center; justify-content: center;
  color: var(--primary);
  flex: 0 0 auto;
}
.about-chip svg { width: 16px; height: 16px; }

/* ====== Skills (Shuhari) ====== */
.skills {
  position: relative;
  overflow: hidden;
  padding: var(--gap-section) var(--page-pad);
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-container-low) 50%, var(--surface-container) 100%);
}
.skills::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 200px;
  transform: translateX(-50%);
  width: 110%;
  height: 600px;
  background:
    radial-gradient(50% 50% at 30% 50%, rgba(99,102,241,0.18) 0%, transparent 60%),
    radial-gradient(50% 50% at 70% 50%, rgba(0,212,255,0.18) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.skills > * { position: relative; z-index: 1; }
.skills-head { display: flex; flex-direction: column; align-items: center; }
.lead-phrase { display: inline-block; }

/* Shuhari vertical cards — horizontal layout */
.shuhari-stack {
  margin: 80px auto 0;
  width: 100%;
  max-width: var(--content-narrow);
  display: flex;
  flex-direction: row;
  gap: clamp(16px, 2vw, 28px);
  align-items: stretch;
}
.shuhari-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid #00E5FF;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--surface-container-high) 0%, var(--surface-container) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 20px 50px rgba(0,0,0,0.4);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}
.shuhari-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.shuhari-level {
  font-family: var(--font-sans);
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 700;
  line-height: 1.0;
  color: #00E5FF;
  padding: 24px 24px 0;
  text-align: center;
}
.shuhari-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-top: 20px;
  flex-shrink: 0;
}

/* Per-card background images */
.shuhari-image-1 { background-image: url("images/l1_image.webp"); }
.shuhari-image-2 { background-image: url("images/l2_image.webp"); }
.shuhari-image-3 { background-image: url("images/l3_image.webp"); }

.shuhari-text {
  padding: 20px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.shuhari-text h4 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 600;
  line-height: 1.5;
  color: #FFFFFF;
}
.shuhari-text p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 400;
  line-height: 1.7;
  color: #BAC9CC;
}

@media (max-width: 1023px) {
  .shuhari-stack {
    flex-direction: column;
    gap: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .shuhari-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ====== Price ====== */
.price {
  padding: var(--gap-section) var(--page-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--surface);
}
.price h2 { text-align: center; }
.price .lead { color: var(--on-surface-variant); max-width: 960px; }
.price .price-note {
  margin: 40px 0 24px;
  max-width: min(1160px, 90vw);
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--on-surface-variant);
}

/* Price infographic */
.price-info {
  width: 100%;
  max-width: 880px;
  margin: 48px auto 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  overflow: visible;
}
.price-structure { overflow: visible; }
.price-info .block-title {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  color: #dfe2f3;
  text-align: center;
  margin: 0 0 24px;
}

/* Block A — three elements */
.price-elements {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
}
.pe-card {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 1 / 1;
  padding: 32px 24px;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--surface-container-high) 0%, var(--surface-container) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 20px 50px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .55s ease-out, transform .55s ease-out;
}
.pe-card.is-visible { opacity: 1; transform: translateY(0); }
.pe-icon {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  border: 1.5px solid #00D4FF;
  color: #00D4FF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.pe-icon svg { width: 22px; height: 22px; }
.pe-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #00D4FF;
}
.pe-title {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  color: #dfe2f3;
  line-height: 1.3;
}
.pe-desc {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  color: #bbc9cf;
  line-height: 1.55;
}
.pe-op {
  flex: 0 0 auto;
  align-self: center;
  font-family: var(--font-sans);
  font-size: 32px;
  font-weight: 300;
  color: rgba(0, 212, 255, 0.5);
  margin: 0 16px;
  line-height: 1;
  user-select: none;
}
.pe-result {
  margin-top: 32px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 600;
  color: #00D4FF;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .55s ease-out, transform .55s ease-out;
}
.pe-result.is-visible { opacity: 1; transform: translateY(0); }

/* Block B — all-plans-included */
.price-included {
  padding: 0;
  border-radius: 0;
  background: none;
  border: none;
  box-shadow: none;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .55s ease-out, transform .55s ease-out;
}
.price-included.is-visible { opacity: 1; transform: translateY(0); }
.pi-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.pi-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  color: #dfe2f3;
  line-height: 1.4;
}
.pi-ico {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border-radius: 9999px;
  border: 1.5px solid #00D4FF;
  color: #00D4FF;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pi-ico svg { width: 11px; height: 11px; }

@media (max-width: 1023px) {
  .price-elements { flex-direction: column; }
  .pe-card { aspect-ratio: auto; }
  .pe-op { margin: 8px 0; transform: rotate(90deg); }
  .pi-list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .pe-card, .pe-result, .price-included {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* ====== Price — new structure ====== */
.price-structure,
.price-simulation {
  width: 100%;
}

/* 料金体系：基本費＋変動費 */
.price-formula {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.price-component {
  flex: 1 1 0;
  min-width: min-content;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  padding: clamp(36px, 4vw, 56px) clamp(24px, 2.5vw, 40px) clamp(24px, 3vw, 48px);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--surface-container-high) 0%, var(--surface-container) 100%);
  border: 1.5px solid rgba(0,212,255,0.65);
  box-shadow: 0 0 0 1px rgba(0,212,255,0.08), 0 16px 40px rgba(0,0,0,0.35);
}
.price-component-chip {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  white-space: nowrap;
}
.price-component-name {
  font-family: var(--font-jp);
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 700;
  color: var(--on-surface-strong);
  line-height: 1.4;
}
.price-component-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.price-tag {
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-jp);
  color: var(--on-surface-variant);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 4px;
  padding: 4px 10px;
  letter-spacing: 0;
  text-align: center;
  line-height: 1.5;
  white-space: nowrap;
}
.price-component-amount {
  font-family: var(--font-sans);
  font-size: clamp(28px, 3.2vw, 48px);
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}
.price-tax {
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  letter-spacing: 0;
  margin-left: 0;
  vertical-align: middle;
}
.price-component-note {
  margin: 4px 0 0;
  font-family: var(--font-jp);
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.7;
  text-align: left;
}
.price-formula-op {
  flex-shrink: 0;
  font-size: clamp(32px, 3.2vw, 48px);
  font-weight: 400;
  color: var(--primary);
  padding: 0 clamp(16px, 2vw, 28px);
  line-height: 1;
  user-select: none;
}

/* 概算シミュレーション */
.price-simulation { margin-top: 8px; }
.price-sim-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
}
.price-sim-heading .block-title { margin: 0; }
.price-sim-table {
  width: fit-content;
  margin: 0 auto;
  border-radius: 16px;
  border: 1.5px solid rgba(0,212,255,0.55);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,212,255,0.06), 0 16px 40px rgba(0,0,0,0.35);
  display: flex;
}
.price-sim-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.price-sim-col:first-child {
  border-right: 1px solid rgba(0,212,255,0.3);
}
.price-sim-col-head {
  padding: 16px 28px;
  font-family: var(--font-jp);
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: 600;
  color: var(--on-surface-strong);
  text-align: center;
  white-space: nowrap;
  background: var(--surface-container-high);
  border-bottom: 1px solid rgba(0,212,255,0.3);
}
.price-sim-cell {
  padding: clamp(20px, 2vw, 32px) clamp(20px, 2vw, 28px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  flex: 1;
  background: linear-gradient(180deg, var(--surface-container) 0%, var(--surface-container-low) 100%);
}
.price-sim-content {
  display: inline-flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.price-sim-total {
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.2vw, 16px);
  font-weight: 600;
  color: var(--on-surface);
  display: flex;
  align-items: baseline;
  gap: 0;
  white-space: nowrap;
  flex-wrap: nowrap;
}
.price-sim-total span {
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.02em;
  line-height: 1;
}
.price-sim-total .price-tax {
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  letter-spacing: 0;
  line-height: 1;
}
.price-sim-breakdown {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
.price-sim-breakdown li {
  font-family: var(--font-jp);
  font-size: clamp(14px, 1vw, 16px);
  color: var(--on-surface-strong);
  padding-left: 1em;
  position: relative;
}
.price-sim-breakdown li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--primary);
}
.price-sim-note {
  font-family: var(--font-jp);
  font-size: 14px;
  color: var(--on-surface-strong);
}

@media (max-width: 1023px) {
  .price-formula { flex-direction: column; }
  .price-formula-op { padding: 12px 0; }
  .price-sim-table { flex-direction: column; }
  .price-sim-col:first-child {
    border-right: none;
    border-bottom: 1px solid rgba(0,212,255,0.3);
  }
}

/* ====== Company ====== */
.company {
  padding: var(--gap-section) var(--page-pad);
  background:
    radial-gradient(60% 50% at 10% 30%, rgba(99,102,241,0.10) 0%, transparent 60%),
    radial-gradient(50% 50% at 95% 70%, rgba(0,212,255,0.08) 0%, transparent 60%),
    var(--surface-container);
}
.company-inner { max-width: var(--content-narrow); margin: 0 auto; }
.company h2 { text-align: center; margin: 16px 0 0; }
.company .eyebrow.with-bar { display: block; text-align: center; }
.company .desc {
  margin: 20px 0 0;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: var(--on-surface-variant);
  max-width: none;
  white-space: nowrap;
}
.company .more {
  margin: 20px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  border-bottom: 1px solid rgba(0,212,255,0);
  transition: border-color .15s;
}
.company .more:hover { border-color: var(--primary); }
.company .more svg { width: 12px; height: 12px; }
.company-table {
  margin-top: 48px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--surface-container-high) 0%, var(--surface-container) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 20px 60px rgba(0,0,0,0.45);
}
.company-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  padding: 22px 36px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.company-row:last-child { border-bottom: none; }
.company-row .k {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-muted);
  align-self: center;
}
.company-row .v {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.5;
  color: var(--on-surface);
}

/* ====== Footer ====== */
.footer {
  padding: 32px var(--page-pad);
  background: var(--surface-container-lowest);
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.footer .brand .mark { height: 20px; width: auto; }
.footer .brand .name { font-size: 16px; }
.footer .links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.footer .links a {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 12px;
  color: var(--on-surface-muted);
}
.footer .links a:hover { color: var(--primary); }
.footer .copy {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--on-surface-muted);
}

/* ====== Global scroll-reveal ====== */
.title-reveal {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: top;
}
.title-reveal .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  filter: blur(4px);
  transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 500ms cubic-bezier(0.22, 1, 0.36, 1),
              filter 500ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform, filter;
}
.title-reveal.in-view .char {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.title-reveal::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60px;
  width: 60px;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 229, 255, 0.6) 50%,
    transparent 100%
  );
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
}
.title-reveal.in-view::before {
  animation: titleSweep var(--sweep-dur, 900ms) cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes titleSweep {
  0%   { left: -60px; opacity: 0; }
  20%  { opacity: 1; }
  60%  { opacity: 1; }
  90%  { opacity: 0; }
  100% { left: 100%; opacity: 0; }
}

.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 650ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.fade-up.in-view,
.stagger-group.in-view .fade-up {
  opacity: 1;
  transform: translateY(0);
}
.stagger-group .fade-up:nth-child(1) { transition-delay: 0ms; }
.stagger-group .fade-up:nth-child(2) { transition-delay: 120ms; }
.stagger-group .fade-up:nth-child(3) { transition-delay: 240ms; }
.stagger-group .fade-up:nth-child(4) { transition-delay: 360ms; }
.stagger-group .fade-up:nth-child(5) { transition-delay: 480ms; }
.stagger-group .fade-up:nth-child(6) { transition-delay: 600ms; }

@media (prefers-reduced-motion: reduce) {
  .title-reveal .char,
  .fade-up {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .title-reveal::before { display: none !important; }
}

/* hero-brand uses background-clip:text — re-apply the gradient to per-char
   spans created by the FV title-reveal wrapper */
.hero-brand .title-reveal,
.hero-brand .title-reveal .char {
  background: linear-gradient(135deg, #ffffff 0%, #a8e8ff 50%, #c0c1ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Phase 4 (2.4–3.8s): hero copy fades up on a fixed schedule */
.fv-fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 650ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.fv-fade-up.in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .fv-image-area,
  .fv-text-cushion,
  .cushion-edge-glow {
    opacity: 1 !important;
    animation: none !important;
  }
  .fv-fade-up {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   RESPONSIVE — Tablet (≤1024px) & SP (≤768px)
   ============================================================ */

/* ----------------------------------------------------------
   タブレット共通 (≤1024px)
   ---------------------------------------------------------- */
@media (max-width: 1024px) {

  /* グローバル */
  body { min-width: 320px; }

  /* ボタン（hero 内は除く） */
  .btn.big:not(.hero-bottom-cta .btn) {
    min-width: auto;
    width: 100%;
    justify-content: center;
  }
  .cta-row {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  /* Nav */
  .nav-links { display: none; }
  .nav .ctas,
  .nav-hero .ctas { gap: 8px; }
  .nav .ctas .btn.small,
  .nav-hero .ctas .btn.small { font-size: 12px; padding: 0 14px; }
  .nav .ctas .btn-outline,
  .nav-hero .ctas .btn-outline { display: none; }

  /* Pain */
  .pain-card {
    width: 100%;
    align-self: auto !important;
  }

  /* Shuhari */
  .shuhari-stack { flex-direction: column; gap: 24px; }
  .shuhari-card {
    flex: none;
    width: 100%;
    height: auto;
  }
  .shuhari-image {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .shuhari-text {
    position: relative;
    width: 100%;
    padding: 24px 24px 28px;
  }

  /* Price */
  .price-formula { flex-direction: column; align-items: center; }
  .price-formula-op { padding: 4px 0; transform: rotate(90deg); }
  .price-component { width: 100%; }
  .price-sim-table { width: 100%; flex-direction: column; }
  .price-sim-col:first-child {
    border-right: none;
    border-bottom: 1px solid rgba(0,212,255,0.3);
  }

  /* Company */
  .company-row { grid-template-columns: 1fr; gap: 4px; padding: 16px 24px; }
  .company-row .k { font-size: 11px; letter-spacing: 0.04em; color: var(--primary); }
  .company-row .v { font-size: 15px; }
}

/* ----------------------------------------------------------
   スマートフォン (≤768px)
   ---------------------------------------------------------- */
@media (max-width: 768px) {

  /* CSS変数の上書き */
  :root {
    --page-pad: 18px;
    --gap-section: clamp(56px, 10vw, 80px);
    --fs-h2: clamp(26px, 6vw, 34px);
    --fs-lead: clamp(15px, 3.8vw, 18px);
    --fs-body: clamp(14px, 3.5vw, 16px);
  }

  /* body */
  body { min-width: 320px; }

  /* nav-hero は画像の上にオーバーレイ。page/hero はフルスクリーン */
  .page { padding-top: 0; }
  .hero {
    height: 100svh;
    min-height: 100svh;
  }

  /* ---- ボタン（nav 吸着ボタン以外） ---- */
  .hero-bottom-cta {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .hero-bottom-cta .btn.big {
    width: 100%;
    min-width: auto;
  }
  .cta-row {
    width: 100%;
    align-items: stretch;
  }

  /* ---- Hero ---- */
  .hero { min-height: 100svh; }

  /* テキストクッション：SP では全幅・斜め無効 */
  .fv-text-cushion {
    width: 100%;
    height: 100%;
  }
  .cushion-shape {
    clip-path: none;
    background: transparent; /* 透過させて cushion-bg の gradient のみで制御 */
  }
  .cushion-bg-1 { background: linear-gradient(90deg, rgba(10,14,26,0.98) 0%, rgba(10,14,26,0.85) 60%, transparent 100%); }
  .cushion-bg-2 { background: linear-gradient(90deg, rgba(10,14,26,0.96) 0%, rgba(10,14,26,0.83) 60%, transparent 100%); }
  .cushion-bg-3 { background: linear-gradient(90deg, rgba(10,14,26,0.96) 0%, rgba(10,14,26,0.83) 60%, transparent 100%); }
  .cushion-bg-4 { background: linear-gradient(90deg, rgba(12,10,26,0.98) 0%, rgba(12,10,26,0.85) 60%, transparent 100%); }
  .cushion-edge-glow { display: none; }

  /* SCROLL インジケーター非表示 */
  .scroll-cue { display: none; }

  /* hero-inner: padding-top:100px でヘッダーをかわしつつ上寄せ */
  .hero-inner {
    padding: 100px var(--page-pad) 24px;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .hero-copy { max-width: 100%; }

  /* hero テキストスケールダウン */
  .hero-eyebrow { font-size: 13px; }
  .hero-title   { font-size: clamp(20px, 5.5vw, 28px); }
  .hero-brand   { font-size: clamp(26px, 6.8vw, 36px); line-height: 1.25; }
  /* 「3時間で」と「"動く仕様書"が」の間の<br>を消して1行に結合 */
  .hero-brand br:first-of-type { display: none; }
  /* 下端を揃える（デフォルトの vertical-align:top だとずれる） */
  .hero-brand .title-reveal { vertical-align: bottom; }
  .hero-brand .title-reveal:first-child .char:nth-child(1) { font-size: 1.4em; }
  .hero-brand .title-reveal:first-child .char:not(:nth-child(1)) { font-size: 0.9em; }
  .hero-brand .title-reveal:last-child .char { font-size: 0.78em; }
  .hero-brand  { margin-bottom: 40px; }
  .hero-lead   { font-size: clamp(13px, 3.5vw, 15px); max-width: 100%; margin-top: 0; }
  .hero-copy   { flex: 1; }
  /* chips: 横スクロール marquee */
  .hero-chips {
    overflow: hidden;
    margin-top: 16px;
    mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  }
  .hero-chips-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    width: max-content;
    animation: heroChipsScroll 20s linear infinite;
  }
  .chip.hero-chip-dup { display: inline-flex; }
  .chip { font-size: 11px; padding: 0 12px; height: 32px; border-radius: 8px; }
  .hero-note { font-size: 10px; margin-top: 8px; }
  .hero-bottom-cta { margin-top: auto; }

  /* ---- Pain ---- */
  .pain h2 { font-size: clamp(18px, 5vw, 24px); margin-bottom: 32px; }
  .pain-cards { gap: 28px; }
  .pain-card {
    width: 100%;
    align-self: auto !important;
    transform: none !important;
    padding: 20px 24px;
  }
  .pain-card.from-left  { transform: translateX(0) !important; }
  .pain-card.from-right { transform: translateX(0) !important; }
  .pain-card p { font-size: clamp(14px, 4vw, 16px); }

  /* ---- About ---- */
  .about h2 { font-size: clamp(22px, 5.5vw, 30px); white-space: normal; }
  .about-media { margin-top: 24px; }
  .marquee-wrap { gap: 10px; }
  .marquee-pill {
    padding: 10px 16px;
    font-size: 13px;
  }
  .marquee-pill .ico { width: 18px; height: 18px; }
  .marquee-pill .ico svg { width: 10px; height: 10px; }
  .about-video-wrap { width: 100%; }
  .marquee-row.sp-only { display: flex; }
  .about-desc {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }
  .about-desc .lead-phrase { display: inline; }
  .about .cta-row { margin-top: 20px; }

  /* ---- Skills ---- */
  .shuhari-stack { margin-top: 24px; }
  .skills h2,
  .price h2,
  .company h2 { font-size: clamp(22px, 5.5vw, 30px); white-space: normal; }
  .skills .lead { text-align: left; }
  .skills .lead .lead-phrase { display: inline; }
  .shuhari-level { font-size: clamp(16px, 4.5vw, 20px); }
  .shuhari-text h4 { font-size: clamp(14px, 4vw, 16px); }
  .shuhari-text p  { font-size: clamp(12px, 3.5vw, 14px); }

  /* ---- Price ---- */
  .price-info { margin-top: 24px; }
  .price-component-name   { font-size: clamp(14px, 4vw, 17px); }
  .price-component-amount { font-size: clamp(24px, 7vw, 36px); }
  .price-sim-heading { flex-direction: column; gap: 10px; text-align: center; }
  .price-sim-col-head { padding: 14px 18px; font-size: 13px; }
  .price-sim-cell { padding: 20px 18px; }
  .price-sim-total span { font-size: clamp(24px, 6.5vw, 32px); }
  .price-sim-total .price-tax { font-size: 14px; }
  .price-sim-breakdown li { font-size: 13px; }
  .price .price-note {
    text-align: left;
    margin-bottom: 0;
  }
  .price .price-note .lead-phrase { display: inline; }
  .price .cta-row { margin-top: 20px; }

  /* ---- Company ---- */
  .company .desc { white-space: normal; }
  .company-row { padding: 14px 18px; }
  .company-row .v { font-size: 14px; }

  /* ---- Footer ---- */
  .footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 24px var(--page-pad);
  }
  .footer .links { gap: 16px; }
}

/* ----------------------------------------------------------
   極小SP (≤425px)
   ---------------------------------------------------------- */
@media (max-width: 425px) {
  /* nav ブランド縮小 */
  .nav .brand,
  .nav-hero .brand { gap: 7px; }
  .nav .brand .mark,
  .nav-hero .brand .mark { height: 18px; }
  .nav .brand .name,
  .nav-hero .brand .name { font-size: 14px; }

  /* hero-inner の justify は 768px の flex-start を継承。マージン圧縮のみ */
  /* 各要素のマージンを詰めてコンテンツ全体を小さく */
  .hero-title   { margin-top: 10px; }
  .hero-brand   { margin-top: 2px; }
  .hero-lead    { margin-top: 16px; }
  .hero-chips   { margin-top: 12px; }
  .hero-note    { margin-top: 8px; }
  .hero-bottom-cta { margin-top: 20px; }
}