/* ==============================================
   DESIGN SYSTEM
============================================== */
:root {
  --bg:        #07080B;
  --bg2:       #0E1014;
  --bg3:       #161A21;
  --ink:       #EAEDF3;
  --muted:     rgba(255,255,255,0.56);
  --dim:       rgba(255,255,255,0.50);  /* 0.30→0.50: 暗背景でAA(約5:1)を満たすよう底上げ */
  --border:    rgba(255,255,255,0.10);
  --border-md: rgba(255,255,255,0.18);
  --accent:    #3B82F6;
  --btn-bg:    #2563EB;   /* CTAボタン塗り: 白文字とのコントラスト AA(4.5:1)確保のため--accentより一段濃く */
  --accent2:   #8B5CF6;
  --glow:      rgba(59,130,246,0.25);
  --glow-soft: rgba(59,130,246,0.10);
  --sans:      'Inter', -apple-system, sans-serif;
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h:     64px;
  --px:        clamp(20px, 5vw, 56px);
  --max:       1920px;
  --r:         12px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-padding-top: var(--nav-h); }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
}

/* 微細なフィルムグレイン — 質感の底上げのみ。極薄・pointer-events無効で視認性/操作性に影響しない */
body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: 9998; pointer-events: none;
  background-image: url(../img/pattern-noise.svg);
  background-size: 170px 170px;
  opacity: .05; mix-blend-mode: soft-light;
}

img  { display: block; max-width: 100%; }
a    { color: inherit; text-decoration: none; cursor: pointer; }
em   { font-style: normal; }              /* 和文に真のイタリックは無い＝偽斜体になるため */
em:lang(en) { font-style: italic; }        /* 欧文だけ斜体を許可 */
ul   { list-style: none; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--px); }
.section { padding: clamp(88px, 11vw, 140px) 0; }


/* ==============================================
   CSS KEYFRAMES
============================================== */
@keyframes orb1 {
  0%,100% { transform: translate(0,0) scale(1); }
  20%      { transform: translate(45px,-38px) scale(1.06); }
  50%      { transform: translate(90px,-72px) scale(1.13); }
  75%      { transform: translate(-48px,52px) scale(0.91); }
}
@keyframes orb2 {
  0%,100% { transform: translate(0,0) scale(1.02); }
  28%      { transform: translate(-78px,46px) scale(0.90); }
  58%      { transform: translate(18px,-68px) scale(1.12); }
  82%      { transform: translate(-32px,22px) scale(0.97); }
}
@keyframes orb3 {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  30%      { transform: translate(62px,-82px) rotate(4deg); }
  65%      { transform: translate(-28px,-50px) rotate(-3deg); }
}
@keyframes lineA {
  0%    { opacity:.35; transform: rotate(-7deg) translateX(0) translateY(0); }
  20%   { opacity:.62; transform: rotate(-3deg) translateX(28px) translateY(-7px); }
  50%   { opacity:.88; transform: rotate(-1deg) translateX(54px) translateY(9px); }
  80%   { opacity:.52; transform: rotate(-5deg) translateX(16px) translateY(-5px); }
  100%  { opacity:.35; transform: rotate(-7deg) translateX(0) translateY(0); }
}
@keyframes lineB {
  0%    { opacity:.28; transform: rotate(11deg) translateX(0) translateY(0); }
  30%   { opacity:.74; transform: rotate(5deg) translateX(-46px) translateY(8px); }
  65%   { opacity:.42; transform: rotate(14deg) translateX(-20px) translateY(-6px); }
  100%  { opacity:.28; transform: rotate(11deg) translateX(0) translateY(0); }
}
@keyframes mqScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes dotPulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.4; transform:scale(.7); } }
@keyframes scrollDot {
  0%,100% { transform:translateY(-100%); opacity:0; }
  20%      { opacity:1; }
  80%      { opacity:1; }
  100%     { transform:translateY(200%); }
}
@keyframes glowPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); }
  50%      { box-shadow: 0 0 20px 4px rgba(37,99,235,.22); }
}
@keyframes gradientShift {
  0%,100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes shimmer {
  0%   { transform: translateX(-150%) skewX(-15deg); }
  100% { transform: translateX(350%)  skewX(-15deg); }
}
@keyframes btnShimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}


/* ==============================================
   CUSTOM CURSOR — 無効化
============================================== */
#cursor { display: none; }
body, a { cursor: auto; }


/* ==============================================
   LOADING
============================================== */
#loading {
  position: fixed; inset: 0; z-index: 9998;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
}
.ld-logo {
  font-size: clamp(2.4rem, 8vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: rgba(255,255,255,.12);
}
.ld-logo-em { color: var(--accent); opacity: .7; }
.ld-logo-img {
  height: clamp(56px, 12vw, 96px);
  width: auto; object-fit: contain;
}
.ld-bar-wrap {
  width: min(320px, 80vw);
  height: 1px;
  background: var(--border);
  position: relative;
  overflow: hidden;
}
.ld-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 100%;
  background: linear-gradient(90deg, var(--accent2), var(--accent));
  transform: scaleX(0); transform-origin: 0 50%;   /* width更新→transformに変更（毎tickのlayout回避） */
}
.ld-num {
  font-size: clamp(5rem, 16vw, 10rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
  color: rgba(255,255,255,.055);
  font-variant-numeric: tabular-nums;
  position: absolute;
  pointer-events: none;
}


/* ==============================================
   SCROLL PROGRESS BAR
============================================== */
#progress-bar {
  position: fixed; top:0; left:0; height:2px; width:100%;
  background: linear-gradient(90deg, var(--accent2), var(--accent));
  z-index: 9000; pointer-events:none;
  /* width伸縮はスクロール毎にlayoutを起こすため transform に変更（見た目は同一） */
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .08s linear;
}


/* ==============================================
   HEADER / NAV
============================================== */
#header {
  position: fixed; top:0; left:0; right:0;
  z-index: 100;
  height: var(--nav-h);
  overflow: visible;
  border-bottom: 1px solid transparent;
  transition: background .4s, backdrop-filter .4s, border-color .4s;
}
#header.scrolled {
  background: rgba(247,247,245,.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--border);
}
.nav-inner {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.logo {
  font-size: 1rem; font-weight: 700; letter-spacing: -0.03em;
  display: flex; align-items: center;
}
.logo-em { color: var(--accent); }
.logo-img {
  height: 40px;
  width: auto; object-fit: contain;
  vertical-align: middle;
  display: block;
}

/* ── ナビ右側コンテナ ── */
.nav-right {
  display: flex; align-items: center; gap: 12px;
}

.nav-cta {
  background: var(--btn-bg) !important;
  color: #fff !important;
  border-radius: 8px !important;
  transition: opacity .2s, box-shadow .2s !important;
  padding: 8px 18px !important;
  font-size: .82rem !important;
  font-weight: 500 !important;
}
.nav-cta:hover { opacity:.88 !important; box-shadow: 0 0 20px var(--glow) !important; }

.hamburger {
  display: flex; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 4px;
  min-width: 44px; min-height: 44px;          /* タップ領域 44px 確保 */
  align-items: center; justify-content: center;
}
.hamburger span {
  display: block; width: 22px; height: 1.5px;
  background: var(--ink); border-radius: 2px;
  transition: all .3s var(--ease);
}
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
/* メニューオープン時: ×とロゴを白に */
body.nav-open .hamburger span { background: #fff; }
body.nav-open .logo-img { filter: brightness(0) invert(1); }

/* スクロールロック */
body.nav-open { position: fixed; width: 100%; overflow-y: scroll; }

/* ── オーバーレイナビ ── */
.nav-overlay {
  position: fixed; inset: 0;
  z-index: 90;
  background: rgba(8, 9, 15, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex; flex-direction: column; justify-content: center;
  padding-top: var(--nav-h);
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s var(--ease);
}
.nav-overlay.open { opacity: 1; pointer-events: all; }

.nav-overlay__inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  padding-bottom: 60px;
}

.nav-ov-cat {
  font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.nav-ov-list { display: flex; flex-direction: column; gap: 2px; }

.nav-ov-list a {
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  font-weight: 700; color: var(--muted); letter-spacing: -.02em;
  padding: 8px 0;
  display: flex; align-items: center; gap: 0;
  transition: color .22s, gap .3s var(--ease);
  position: relative;
}
/* 矢印 — ホバーでスライドイン */
.nav-ov-list a::before {
  content: '→';
  font-size: .65em; color: var(--accent);
  opacity: 0; transform: translateX(-10px);
  transition: opacity .22s, transform .3s var(--ease);
  flex-shrink: 0;
}
.nav-ov-list a:hover { color: var(--ink); gap: 10px; }
.nav-ov-list a:hover::before { opacity: 1; transform: translateX(0); }


/* ==============================================
   HERO
============================================== */
.hero {
  position: relative; overflow: hidden;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: calc(var(--nav-h) + 60px) 0 180px;
}
.hero .wrap { padding-left: clamp(16px, 2.5vw, 28px); }

/* 全面背景写真 */
.hero-bg-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0;
  will-change: transform;
  filter: brightness(0.85);
}
/* テキスト可読性オーバーレイ */
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    110deg,
    rgba(247,247,245,.96) 0%,
    rgba(247,247,245,.90) 44%,
    rgba(247,247,245,.60) 67%,
    rgba(247,247,245,.15) 100%
  );
  z-index: 0;
  pointer-events: none;
}
/* filter:blur を排除し多段 radial-gradient で同等のグロー質感を再現 */
.hb-orb {
  position: absolute; border-radius: 50%;
  will-change: transform;
}
.hb-orb--1 {
  width: 80%; height: 80%;
  top: -5%; left: -20%;
  background: radial-gradient(ellipse at center,
    rgba(37,99,235,.22) 0%,
    rgba(37,99,235,.10) 30%,
    rgba(37,99,235,.03) 58%,
    transparent 74%);
  animation: orb1 15s ease-in-out infinite;
}
.hb-orb--2 {
  width: 65%; height: 70%;
  top: 10%; right: -18%;
  background: radial-gradient(ellipse at center,
    rgba(124,58,237,.18) 0%,
    rgba(124,58,237,.07) 36%,
    transparent 65%);
  animation: orb2 19s ease-in-out infinite;
  animation-delay: -8s;
}
.hb-orb--3 {
  width: 55%; height: 50%;
  bottom: -10%; left: 25%;
  background: radial-gradient(ellipse at center,
    rgba(20,180,160,.15) 0%,
    rgba(20,180,160,.05) 44%,
    transparent 68%);
  animation: orb3 13s ease-in-out infinite;
  animation-delay: -4s;
}
.hb-line {
  position: absolute; height: 1px; pointer-events: none;
}
.hb-line--1 {
  top: 34%; left: -4%; width: 46%;
  background: linear-gradient(90deg, transparent, rgba(37,99,235,.45), transparent);
  animation: lineA 8s ease-in-out infinite;
}
.hb-line--2 {
  bottom: 26%; right: -6%; width: 42%;
  background: linear-gradient(270deg, transparent, rgba(124,58,237,.40), transparent);
  animation: lineB 10s ease-in-out infinite;
  animation-delay: -4s;
}
.hb-line--3 {
  top: 58%; left: 15%; width: 52%;
  background: linear-gradient(90deg, transparent, rgba(37,99,235,.28), rgba(124,58,237,.22), transparent);
  animation: lineA 12s ease-in-out infinite;
  animation-delay: -3s;
}
.hb-line--4 {
  top: 18%; right: 8%; width: 34%;
  background: linear-gradient(270deg, transparent, rgba(124,58,237,.32), transparent);
  animation: lineB 7s ease-in-out infinite;
  animation-delay: -2s;
}
.hb-line--5 {
  bottom: 48%; left: -2%; width: 38%;
  background: linear-gradient(90deg, transparent, rgba(20,180,160,.30), transparent);
  animation: lineA 9s ease-in-out infinite;
  animation-delay: -6s;
}
.hb-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='512' height='512' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  opacity: .025;
}

.hero-inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: center;
}
.hero-text { min-width: 0; }

/* バッジ */
.hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .72rem; font-weight: 500; letter-spacing: .06em;
  color: var(--accent);
  border: 1px solid rgba(37,99,235,.3);
  background: rgba(37,99,235,.07);
  padding: 6px 16px; border-radius: 9999px;
  margin-bottom: 40px;
  opacity: 0; /* GSAP が制御 */
  position: relative; overflow: hidden;
}
/* シマースウィープ — バッジが出現してから繰り返し */
.hero-badge::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform: translateX(-150%) skewX(-15deg);
  animation: shimmer 3.6s ease-in-out 1.8s infinite;
  border-radius: inherit;
}
.badge-pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: dotPulse 2s ease-in-out infinite;
}

/* H1 — 行マスクリビール */
.hero-h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin-bottom: 36px;
}
.h1-mask { display: block; overflow: hidden; line-height: 1.18; }
.h1-line { display: block; }
/* em テキストにアニメーショングラデーション */
.h1-em {
  background: linear-gradient(90deg, var(--accent), #3D3D52, var(--accent));
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 4s ease-in-out infinite;
}

.hero-desc {
  font-size: .95rem; color: var(--muted);
  max-width: 440px; line-height: 1.9;
  margin-bottom: 48px;
  opacity: 0;
}
.hero-actions {
  display: flex; gap: 12px; flex-wrap: wrap;
  justify-content: center;
  opacity: 0;
  position: absolute;
  bottom: 104px;
  left: 0; right: 0;
  z-index: 1;
}

/* プルーフカード */
.hero-proof {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.proof-card {
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: var(--r);
  padding: 24px 20px;
  transition: background .35s, border-color .35s, box-shadow .35s;
  opacity: 0;
}
.proof-card:hover {
  background: rgba(255,255,255,.96);
  border-color: rgba(37,99,235,.3);
  box-shadow: 0 4px 18px rgba(15,17,23,.08);
}
.proof-num {
  display: block;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700; letter-spacing: -0.04em;
  line-height: 1; margin-bottom: 8px;
  color: var(--ink);
}
.proof-num span { font-size: .6em; color: var(--accent); margin-left: 1px; }
.proof-card p { font-size: .75rem; color: var(--muted); }

/* スクロール矢印 */
.hero-scroll-ind {
  position: absolute; bottom: 32px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: .58rem; letter-spacing: .24em; color: var(--dim);
  text-transform: uppercase; z-index: 1;
  opacity: 0;
}
.hsi-line {
  width: 1px; height: 40px;
  background: var(--border); position: relative; overflow: hidden;
}
.hsi-dot {
  position: absolute; top: 0; left: 0; right: 0; height: 40%;
  background: var(--accent);
  animation: scrollDot 1.8s ease-in-out infinite;
}

/* ==============================================
   HERO VISUAL — 右列の画像 + Deco バッジ
============================================== */
.hero-visual {
  position: relative;
  z-index: 1;
}
.hv-frame {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 40px 100px rgba(15,17,23,.16),
    0 8px 24px rgba(15,17,23,.08),
    0 0 0 1px rgba(15,17,23,.06);
  will-change: clip-path, transform;
  /* 初期は GSAP が clip-path で隠す。JS 無し時は表示維持 */
}
.hv-img {
  width: 100%; display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  will-change: transform;
}
/* デコバッジ */
.hv-deco {
  position: absolute;
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 11px 16px;
  box-shadow: 0 8px 28px rgba(15,17,23,.12), 0 2px 6px rgba(15,17,23,.06);
  font-size: .74rem;
  z-index: 2;
  opacity: 0;        /* GSAP が制御 */
  will-change: transform, opacity;
  white-space: nowrap;
}
.hv-deco--1 { top: 12%; right: -6%; }
.hv-deco--2 { bottom: 10%; left: -6%; }
.hv-deco-icon { font-size: 1.1rem; flex-shrink: 0; }
.hv-deco-text strong {
  display: block;
  font-size: .86rem; font-weight: 700;
  color: var(--ink); line-height: 1.2;
}
.hv-deco-text span { color: var(--muted); font-size: .68rem; }


/* ==============================================
   BUTTONS
============================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .88rem; font-weight: 600;
  padding: 13px 26px; border-radius: 10px;
  cursor: pointer; border: none;
  transition: all .25s var(--ease);
  letter-spacing: .01em; position: relative; overflow: hidden;
}
.btn-primary {
  background: var(--btn-bg); color: #fff;
  box-shadow: 0 0 0 0 var(--glow);
}
.btn-primary::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform: translateX(-100%);
  transition: transform 0s;
  border-radius: inherit;
}
.btn-primary:hover {
  box-shadow: 0 0 32px var(--glow), 0 8px 24px rgba(37,99,235,.3);
  transform: translateY(-3px);
}
.btn-primary:hover::after { animation: btnShimmer .55s var(--ease) forwards; }
.btn-ghost {
  background: transparent; color: var(--muted);
  border: 1px solid var(--border);
}
/* ヒーロー内のみ白背景に上書き */
.hero .btn-ghost {
  background: rgba(255,255,255,.90);
  color: var(--ink);
  border-color: rgba(255,255,255,.12);
}
.hero .btn-ghost:hover {
  background: #fff;
  border-color: rgba(37,99,235,.3);
}
.btn-ghost:hover {
  color: var(--ink);
  border-color: rgba(37,99,235,.4);
  background: rgba(37,99,235,.04);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.07);
}
.btn-full { width: 100%; }


/* ==============================================
   MARQUEE
============================================== */
.marquee {
  overflow: hidden;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
}
.mq-track {
  display: flex; gap: 28px; width: max-content;
  animation: mqScroll 28s linear infinite;
  font-size: .75rem; color: var(--dim); letter-spacing: .05em;
}
.mq-track span { white-space: nowrap; }
.mq-dot { color: var(--border-md); }


/* ==============================================
   SECTION COMMON
============================================== */
.sec-head { margin-bottom: 56px; }
.sec-label {
  display: block;
  font-size: .68rem; font-weight: 600; letter-spacing: .22em;
  color: var(--accent); text-transform: uppercase; margin-bottom: 14px;
}
.sec-title {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 700; line-height: 1.2; letter-spacing: -0.025em;
}
.sec-title em { color: var(--accent); font-style: normal; font-weight: 700; }
.sec-sub { font-size: .9rem; color: var(--muted); margin-top: 14px; max-width: 480px; }

/* GSAP reveal 初期状態 */
.reveal { opacity: 0; transform: translateY(36px); }


/* ==============================================
   SERVICES — 横スクロール
============================================== */
.svc-section {
  height: 100svh;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: transparent;   /* ヒーローの固定パーティクル背景を透かす */
}
.svc-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 clamp(20px,5vw,56px);
  padding-right: clamp(40px,5vw,80px);
  width: max-content;   /* 横スクロール距離を scrollWidth で正確に取得するために必須 */
  will-change: transform;
}

/* タイトルカラム */
.svc-title-col {
  flex-shrink: 0;
  width: 340px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 40px;
  border-right: 1px solid var(--border);
  margin-right: 8px;
}
.svc-title-col .sec-label { margin-bottom: 12px; }
.svc-title-col .sec-title { font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
.svc-sub {
  font-size: .72rem; color: var(--dim); letter-spacing: .08em;
  margin-top: 20px;
}
.svc-counter-inline {
  margin-top: 16px;
  font-size: .75rem; color: var(--muted);
  display: flex; align-items: baseline; gap: 4px;
  font-variant-numeric: tabular-nums;
}
.svc-counter-inline #svcCurr {
  font-size: 1.6rem; font-weight: 700; letter-spacing: -0.04em;
  color: var(--accent); line-height: 1;
}
.svc-slash { color: var(--border-md); margin: 0 2px; }

/* サービスカード */
.svc-card {
  flex-shrink: 0;
  width: clamp(260px, 28vw, 320px);
  height: clamp(300px, 38vh, 400px);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: clamp(24px,3.5vw,40px);
  display: flex; flex-direction: column; gap: 12px;
  position: relative; overflow: hidden;
  transition: background .3s, border-color .3s;
}
.svc-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(37,99,235,.06) 0%, transparent 60%);
  opacity: 0; transition: opacity .4s;
}
.svc-card:hover {
  background: rgba(255,255,255,.055);
  border-color: rgba(37,99,235,.35);
  box-shadow: 0 0 30px rgba(37,99,235,.08), 0 28px 52px rgba(0,0,0,.10);
}
.svc-card:hover::before { opacity: 1; }

.svc-num {
  font-size: .64rem; font-weight: 700; letter-spacing: .18em;
  color: var(--accent); text-transform: uppercase;
}
.svc-card h3 {
  font-size: 1rem; font-weight: 600; letter-spacing: -.015em;
  color: var(--ink); line-height: 1.35;
  transition: color .3s, text-shadow .3s;
}
.svc-card:hover h3 {
  color: var(--accent);
  text-shadow: 0 0 18px rgba(37,99,235,.40), 0 0 36px rgba(37,99,235,.18);
}
.svc-card h3 small {
  display: block; font-size: .72rem; font-weight: 400;
  color: var(--muted); margin-top: 3px;
  transition: color .3s;
}
.svc-card:hover h3 small { color: rgba(37,99,235,.75); }
.svc-card p { font-size: .82rem; color: var(--muted); line-height: 1.8; flex: 1; }
.svc-price { font-size: .8rem; font-weight: 600; color: var(--accent); margin-top: auto; }

/* 横スクロール進捗ライン */
.svc-progress-bar {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px; background: var(--border);
}
.svc-progress-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--accent2), var(--accent));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .05s linear;
}


/* ==============================================
   STATS
============================================== */
.stats-section { background: var(--bg); }


/* ==============================================
   CASES
============================================== */

/* Voices */
.voice {
  background: rgba(255,255,255,.04); border: 1px solid var(--border);
  border-top: 2px solid var(--accent);
  border-radius: var(--r); padding: clamp(20px,3vw,32px);
  transition: background .3s, transform .4s var(--ease);
}
.voice:hover { background: rgba(255,255,255,.05); transform: translateY(-4px); }


/* ==============================================
   FLOW
============================================== */
.flow-section { background: var(--bg); }
.flow-list { display: flex; flex-direction: column; gap: 0; }
.flow-item {
  display: flex; gap: 24px; align-items: flex-start;
  padding: 28px 32px;
  background: rgba(17,17,24,.035);
  border: 1px solid var(--border); border-bottom: none;
  transition: background .3s;
}
.flow-item:first-child { border-radius: var(--r) var(--r) 0 0; }
.flow-item:last-child  { border-bottom: 1px solid var(--border); border-radius: 0 0 var(--r) var(--r); }
.flow-item:hover { background: rgba(255,255,255,.04); }

.flow-left {
  display: flex; flex-direction: column; align-items: center;
  gap: 0; flex-shrink: 0;
}
.flow-num-wrap {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--glow-soft);
  border: 1px solid rgba(17,17,24,0.16);
  display: flex; align-items: center; justify-content: center;
}
.flow-num {
  font-size: .65rem; font-weight: 700; letter-spacing: .12em;
  color: var(--accent);
}
.flow-connector {
  width: 1px; background: linear-gradient(to bottom, rgba(37,99,235,.5), transparent);
  flex: 1; min-height: 32px; margin: 6px 0;
  transform-origin: top; transform: scaleY(0);
}

.flow-body h3 { font-size: .95rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.flow-body p  { font-size: .83rem; color: var(--muted); line-height: 1.8; margin-bottom: 8px; }
.flow-dur { font-size: .7rem; color: var(--dim); }


/* ==============================================
   FAQ
============================================== */
.faq-section { background: var(--bg2); }
.faq-wrap { max-width: 780px; }
.faq-list {
  border: 1px solid var(--border); border-radius: var(--r); overflow: hidden;
}
.faq-item {
  border-bottom: 1px solid var(--border);
  background: rgba(17,17,24,.035);
}
.faq-item:last-child { border-bottom: none; }
.faq-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 28px; background: none; border: none; cursor: pointer;
  text-align: left; font-size: .9rem; font-weight: 500; color: var(--ink);
  font-family: var(--sans); transition: background .2s;
}
.faq-btn:hover { background: rgba(255,255,255,.04); }
.faq-q { margin: 0; font-size: inherit; font-weight: inherit; color: inherit; font-family: inherit; line-height: 1.5; }

.faq-icon {
  width: 20px; height: 20px; flex-shrink: 0;
  position: relative; border-radius: 50%;
  border: 1px solid var(--border);
  transition: border-color .3s, background .3s;
}
.faq-icon span {
  position: absolute; top: 50%; left: 50%;
  background: var(--muted); border-radius: 2px;
  transition: transform .35s var(--ease), opacity .3s;
}
.faq-icon span:nth-child(1) { width: 8px; height: 1px; transform: translate(-50%,-50%); }
.faq-icon span:nth-child(2) { width: 1px; height: 8px; transform: translate(-50%,-50%); }
.faq-item.open .faq-icon { border-color: var(--accent); background: var(--glow-soft); }
.faq-item.open .faq-icon span { background: var(--accent); }
.faq-item.open .faq-icon span:nth-child(2) { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.faq-ans {
  max-height: 0; overflow: hidden;
  transition: max-height .45s var(--ease);
}
.faq-item.open .faq-ans { max-height: 200px; }
.faq-ans p { padding: 0 28px 22px; font-size: .85rem; color: var(--muted); line-height: 1.85; }


/* ==============================================
   CONTACT
============================================== */
.contact-section { background: var(--bg); }
.form { max-width: 680px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block; font-size: .75rem; font-weight: 500; color: var(--muted);
  margin-bottom: 8px; letter-spacing: .02em;
}
.req {
  font-size: .6rem; font-weight: 600; letter-spacing: .06em;
  background: var(--accent); color: #fff; padding: 2px 7px; border-radius: 4px; margin-left: 6px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%; padding: 12px 16px;
  background: rgba(17,17,24,.04); border: 1px solid var(--border);
  color: var(--ink); font-family: var(--sans); font-size: .9rem;
  border-radius: 10px; outline: none;
  transition: border-color .25s, box-shadow .25s, background .25s;
  -webkit-appearance: none;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--dim); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--accent);
  background: rgba(37,99,235,.05);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.form-group select option { background: var(--bg2); color: var(--ink); }
.form-group textarea { resize: vertical; min-height: 120px; }
.form-thanks {
  display: none; margin-top: 16px; padding: 14px 20px;
  background: rgba(37,99,235,.08); border: 1px solid rgba(37,99,235,.25);
  border-radius: 10px; color: var(--accent); font-size: .87rem; font-weight: 500;
}
.form-thanks.show { display: block; }
.form-thanks.error {
  background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.3);
  color: #f87171;
}


/* ==============================================
   FOOTER
============================================== */
.site-footer {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  padding: 52px 0 28px;
}
.footer-inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 24px; margin-bottom: 36px;
  padding-bottom: 36px; border-bottom: 1px solid var(--border);
}
.footer-logo { font-size: 1rem; font-weight: 700; margin: 0; padding: 0; }
.footer-logo-img {
  height: 40px;
  width: auto;
  object-fit: contain;
  object-position: left center;
  display: block;
}
.footer-tagline { font-size: .72rem; color: var(--dim); }
.footer-def {
  font-size: .72rem; color: var(--dim);
  line-height: 1.8; margin-top: 12px; max-width: 360px;
}
.footer-nav { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-nav a { font-size: .78rem; color: var(--muted); transition: color .2s; }
.footer-nav a:hover { color: var(--ink); }
.footer-avail {
  display: flex; align-items: center; gap: 8px;
  font-size: .75rem; color: var(--muted);
}
.avail-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #4ade80;
  animation: dotPulse 2s ease-in-out infinite;
}
.footer-copy { text-align: center; font-size: .65rem; color: var(--dim); padding: 0 var(--px); }


/* ==============================================
   PAGE TOP
============================================== */
#page-top {
  position: fixed; bottom: 28px; right: 28px;
  width: 42px; height: 42px; border-radius: 10px;
  background: var(--bg2); border: 1px solid var(--border);
  color: var(--muted); display: flex; align-items: center; justify-content: center;
  font-size: .9rem; font-weight: 600;
  opacity: 0; visibility: hidden;
  transition: all .4s var(--ease); z-index: 50;
}
#page-top.visible { opacity: 1; visibility: visible; }
#page-top:hover {
  background: var(--accent); color: #fff;
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 0 20px var(--glow);
}


/* ==============================================
   RESPONSIVE
============================================== */
@media (max-width: 960px) {
  /* モバイル/タブレット: ヒーローを自然な縦フローに（CTAの絶対配置による重なりを解消） */
  .hero { display: block; min-height: auto; padding: calc(var(--nav-h) + 48px) 0 72px; }
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-actions { position: static; bottom: auto; left: auto; right: auto; margin-top: 36px; }
  .hero-proof  { grid-template-columns: repeat(4,1fr); }
  .hv-deco     { display: none; }
  /* ヒーローが自然フロー(min-height:auto)になるとスクロール指標がCTAに重なるため非表示 */
  .hero-scroll-ind { display: none; }

  /* スマホ: サービスを縦グリッドに */
  .svc-section { height: auto; overflow: visible; padding: 80px 0; }
  .svc-inner   { flex-wrap: wrap; width: auto; gap: 16px; }
  .svc-title-col { width: 100%; border-right: none; padding-right: 0; border-bottom: 1px solid var(--border); padding-bottom: 24px; margin-right: 0; margin-bottom: 8px; }
  .svc-card    { width: calc(50% - 10px); }
  .svc-counter-inline { display: none; }
  .svc-progress-bar   { display: none; }
}

@media (max-width: 768px) {
  .hero-proof { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .nav-overlay__inner {
    grid-template-columns: 1fr;
    gap: 28px;
    overflow-y: auto;
    max-height: calc(100vh - var(--nav-h) - 40px);
    padding-bottom: 40px;
  }
  .nav-ov-list a { font-size: 1.05rem; }
}

@media (max-width: 640px) {
  .section { padding: 72px 0; }
  .hero-h1 { font-size: 2rem; }
  .hero-proof  { grid-template-columns: 1fr 1fr; }
  .hero-actions { margin-top: 28px; }
  .svc-card    { width: 100%; }
  .form-row    { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .flow-item   { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .h1-line { opacity: 1 !important; transform: none !important; }
}


/* ==============================================
   MULTI-PAGE EXTENSIONS
   ドロップダウンナビ / ページヒーロー / プランカード
   料金表 / オプションカード / フッター拡張 / CTA
============================================== */

/* ── ドロップダウンナビ（廃止済み・削除） ── */

/* ── ページヒーロー（内部ページ用） ── */
.page-hero {
  padding: calc(var(--nav-h) + 72px) 0 72px;
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(37,99,235,.06) 0%, transparent 70%);
  pointer-events: none;
}
.breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: .72rem; color: var(--dim);
  margin-bottom: 20px; position: relative; z-index: 1;
}
.breadcrumb a { color: var(--muted); transition: color .2s; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb span { color: var(--dim); }
.ph-label {
  display: inline-block;
  font-size: .68rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 16px; position: relative; z-index: 1;
}
.ph-h1 {
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 700; line-height: 1.12; letter-spacing: -0.03em;
  margin-bottom: 20px; position: relative; z-index: 1;
}
/* 見出しの改行は max-width では制御しない。日本語の自動折返しは文節を見ないので、
   幅で切ると「制作会社を「実績の多さ」で選ぶ / と、 / 失敗しやすい」のように
   読点だけが孤立する（860pxで実際に発生した）。改行位置は各ページが <br> で明示する。
   読みものの h1 は読点で改行する、を全記事共通のルールにしてある。 */
.ph-h1 em { color: var(--accent); font-style: normal; }
.ph-sub {
  font-size: clamp(.9rem, 1.6vw, 1.05rem);
  color: var(--muted); line-height: 1.85;
  max-width: 540px; position: relative; z-index: 1;
}
.ph-sub strong { color: var(--ink); }
/* page-hero 2カラム（テキスト + 画像） */
.ph-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.ph-text { position: relative; z-index: 1; }
.ph-visual { position: relative; z-index: 1; }
.ph-img {
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(15,17,23,.12), 0 4px 16px rgba(15,17,23,.06);
  display: block;
}
@media (max-width: 768px) {
  .ph-wrap { grid-template-columns: 1fr; gap: 32px; }
}

/* ── プランカード（3カラム比較） ── */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.plan-card {
  background: rgba(17,17,24,.04);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: clamp(28px,4vw,44px);
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  transition: border-color .3s, transform .4s var(--ease);
  will-change: transform;
}
.plan-card--popular {
  border-color: rgba(37,99,235,.4);
  background: rgba(37,99,235,.05);
}
.plan-card--popular::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent2), var(--accent));
}
.plan-card:hover { border-color: rgba(37,99,235,.35); }
.plan-card:not(.plan-card--popular):hover { transform: translateY(-6px); }
.plan-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .65rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent);
  background: var(--glow-soft); border: 1px solid rgba(37,99,235,.25);
  padding: 4px 12px; border-radius: 9999px;
  margin-bottom: 20px; width: fit-content;
}
.plan-name {
  font-size: 1rem; font-weight: 600; letter-spacing: -.01em;
  margin-bottom: 6px;
}
.plan-desc { font-size: .8rem; color: var(--muted); margin-bottom: 24px; line-height: 1.7; }
.plan-price {
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}
.plan-price-num {
  font-size: clamp(1.8rem,3vw,2.6rem);
  font-weight: 700; letter-spacing: -0.04em;
  color: var(--ink); line-height: 1;
}
.plan-price-num em { color: var(--accent); font-style: normal; }
.plan-price-unit { font-size: .75rem; color: var(--muted); margin-top: 6px; }
.plan-features { flex: 1; display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.feat-item {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .82rem; color: var(--muted); line-height: 1.5;
}
.feat-item .feat-check {
  flex-shrink: 0; width: 18px; height: 18px;
  border-radius: 50%; background: var(--glow-soft);
  border: 1px solid rgba(17,17,24,0.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--accent);
  margin-top: 1px;
}
.feat-item.feat-no .feat-check { background: rgba(255,255,255,.04); border-color: var(--border); color: var(--dim); }
.feat-item.feat-no { color: var(--dim); }
.plan-cta { margin-top: auto; }

/* ── 料金比較テーブル ── */
.price-table {
  width: 100%;
  height: 100%;      /* 親 flex:1 コンテナを埋める */
  display: flex;
  flex-direction: column;
}
.price-table tbody {
  display: flex;
  flex-direction: column;
  flex: 1;
}
/* 各行を均等に分割 */
.price-table tr {
  display: grid;
  grid-template-columns: 1fr 172px;  /* 価格列を固定幅で揃える */
  align-items: center;
  flex: 1;
  min-height: 44px;
  border-bottom: 1px solid var(--border);
}
.price-table tr:last-child { border-bottom: none; }
.price-table td {
  padding: 0 20px;
  font-size: .82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  height: 100%;
}
.price-table th {
  background: var(--bg2);
  font-weight: 600; color: var(--ink);
  font-size: .75rem; letter-spacing: .04em;
  padding: 0 20px;
  display: flex; align-items: center;
  height: 100%;
}
/* 3列テーブル（options.html）用 */
.price-table--3col {
  height: auto;
}
.price-table--3col thead { display: block; }
.price-table--3col tbody { flex: none; }
.price-table--3col tr {
  grid-template-columns: 1fr 186px 220px;
  flex: none;
  height: 66px;
}
.price-table th:first-child,
.price-table td:first-child { text-align: left; color: var(--muted); }
/* tr:last-child は上で処理済み */
.price-table td { color: var(--muted); }
.price-table .pt-check { color: var(--accent); font-size: 1rem; }
.price-table .pt-dash  { color: var(--dim); }
.price-table .pt-highlight { background: rgba(37,99,235,.05); }
.pt-head-popular { color: var(--accent) !important; }

/* ── オプションカード ── */
.opt-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.opt-card {
  background: rgba(17,17,24,.04);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: clamp(24px,3.5vw,40px);
  transition: background .3s, border-color .3s;
  will-change: transform;
}
.opt-card:hover { background: rgba(255,255,255,.05); border-color: var(--border-md); }
.opt-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--glow-soft); border: 1px solid rgba(37,99,235,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 20px;
}
.opt-name {
  font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em;
  margin-bottom: 10px;
}
.opt-price {
  font-size: .82rem; color: var(--accent); font-weight: 600;
  margin-bottom: 16px;
}
.opt-desc { font-size: .83rem; color: var(--muted); line-height: 1.8; margin-bottom: 16px; }
.opt-list { display: flex; flex-direction: column; gap: 7px; }
.opt-list li {
  font-size: .78rem; color: var(--muted);
  padding-left: 16px; position: relative; line-height: 1.5;
}
.opt-list li::before {
  content: '✓'; position: absolute; left: 0;
  color: var(--accent); font-size: .7rem; font-weight: 700;
}

/* ── 統一CTA セクション ── */
.cta-section {
  padding: clamp(80px,10vw,128px) 0;
  text-align: center;
  position: relative; overflow: hidden;
  background: var(--bg2);
}
.cta-section::before {
  content: '';
  position: absolute; width: 700px; height: 500px;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: radial-gradient(ellipse, rgba(37,99,235,.12) 0%, transparent 65%);
  pointer-events: none;
}
.cta-section .inner-cta { position: relative; z-index: 1; }
.cta-h2 {
  font-size: clamp(1.8rem,4vw,3rem);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.15;
  margin-bottom: 18px;
}
.cta-h2 em { color: var(--accent); font-style: normal; font-weight: 700; }
.cta-sub {
  font-size: .95rem; color: var(--muted);
  max-width: 440px; margin: 0 auto 40px;
  line-height: 1.8;
}
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-note { font-size: .72rem; color: var(--dim); margin-top: 14px; }

/* ── フッター マルチカラム ── */
.footer-top {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 56px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
}
.footer-brand { display: flex; flex-direction: column; gap: 10px; }
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding-top: 113px;
}
.fc-title {
  font-size: .68rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim);
  margin-bottom: 14px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: .8rem; color: var(--muted); transition: color .2s; }
.footer-col a:hover { color: var(--ink); }
.footer-cta-btn {
  display: inline-flex; align-items: center;
  font-size: .8rem; padding: 10px 20px;
  border-radius: 8px; margin-top: 18px;
}
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .65rem; color: var(--dim); flex-wrap: wrap; gap: 12px;
}
.footer-bottom-nav { display: flex; gap: 20px; }
.footer-bottom-nav a { color: var(--dim); transition: color .2s; }
.footer-bottom-nav a:hover { color: var(--muted); }

/* ── タブナビ（FAQ分類など） ── */
.tab-nav {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 40px;
}
.tab-btn {
  padding: 9px 20px; border-radius: 9999px;
  font-size: .8rem; font-weight: 500;
  border: 1px solid var(--border);
  color: var(--muted); background: none; cursor: pointer;
  transition: all .25s var(--ease);
  font-family: var(--sans);
}
.tab-btn.active, .tab-btn:hover {
  background: var(--accent); color: #fff;
  border-color: var(--accent);
}
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ── サービス詳細セクション（交互レイアウト） ── */
.svc-detail {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px,6vw,80px); align-items: center;
}
.svc-detail.reverse { direction: rtl; }
.svc-detail.reverse > * { direction: ltr; }
.svc-detail-visual {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  aspect-ratio: 4/3;
  display: flex; align-items: center; justify-content: center;
  color: var(--dim); font-size: .78rem; letter-spacing: .12em;
  position: relative; overflow: hidden;
}
.svc-detail-visual .sdv-num {
  position: absolute; bottom: 20px; right: 24px;
  font-size: 5rem; font-weight: 700; letter-spacing: -0.05em;
  color: rgba(255,255,255,.04); line-height: 1;
}
.svc-detail-body .sec-label { margin-bottom: 10px; }
.svc-detail-body h3 {
  font-size: clamp(1.4rem,2.8vw,2rem);
  font-weight: 700; letter-spacing: -0.025em; line-height: 1.25;
  margin-bottom: 16px;
}
.svc-detail-body p { font-size: .9rem; color: var(--muted); line-height: 1.85; margin-bottom: 24px; }
.check-list { display: flex; flex-direction: column; gap: 10px; }
.check-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .85rem; color: var(--muted); line-height: 1.5;
}
.check-list li::before {
  content: '✓'; color: var(--accent); font-weight: 700;
  font-size: .8rem; flex-shrink: 0; margin-top: 1px;
}

/* ── 強みカード（トップページ等） ── */
.strength-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 1px;
  background: var(--border);
  border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
}
.strength-card {
  background: var(--bg);
  padding: clamp(24px,3.5vw,40px);
  transition: background .35s, box-shadow .35s;
  position: relative;
  overflow: hidden;
}
.strength-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, rgba(37,99,235,.05) 45%, transparent 68%);
  opacity: 0; transition: opacity .55s var(--ease);
  pointer-events: none;
}
.strength-card:hover { box-shadow: 0 0 36px rgba(37,99,235,.18), 0 0 72px rgba(37,99,235,.07); }
.strength-card:hover::before { opacity: 1; }
.strength-card:hover .st-num { color: var(--accent); }
.st-icon { margin-bottom: 16px; line-height: 0; }
.st-icon img { width: 42px; height: 42px; display: block; }
.st-num {
  font-size: clamp(1.8rem,3vw,2.6rem);
  font-weight: 700; letter-spacing: -0.04em;
  color: var(--accent); line-height: 1; margin-bottom: 8px;
}
.st-label { font-size: .85rem; font-weight: 600; margin-bottom: 8px; }
.st-desc  { font-size: .78rem; color: var(--muted); line-height: 1.7; }

/* ── インラインバッジ ── */
.tag {
  display: inline-flex; align-items: center;
  font-size: .65rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: 3px 10px; border-radius: 9999px;
}
.tag-blue   { background: var(--glow-soft); color: var(--accent); border: 1px solid rgba(17,17,24,0.16); }
.tag-purple { background: rgba(124,58,237,.1); color: #a78bfa; border: 1px solid rgba(124,58,237,.25); }
.tag-green  { background: rgba(74,222,128,.08); color: #4ade80; border: 1px solid rgba(74,222,128,.2); }

.case-grid-3 {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 20px;
}
.case-industry { font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.case-points { display: flex; flex-direction: column; gap: 8px; }
.case-points li { font-size: .78rem; color: var(--muted); line-height: 1.5; padding-left: 14px; position: relative; }
.case-points li::before { content: '→'; position: absolute; left: 0; color: var(--accent); }

/* ── 転送ポイント（所有権譲渡など） ── */
.transfer-box {
  background: linear-gradient(135deg, rgba(37,99,235,.08), rgba(124,58,237,.06));
  border: 1px solid rgba(37,99,235,.2);
  border-radius: 16px; padding: clamp(28px,4vw,48px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  align-items: center;
}
.transfer-text h3 {
  font-size: clamp(1.3rem,2.5vw,1.8rem);
  font-weight: 700; letter-spacing: -0.025em;
  margin-bottom: 14px; line-height: 1.25;
}
.transfer-text h3 em { color: var(--accent); font-style: normal; }
.transfer-text p { font-size: .88rem; color: var(--muted); line-height: 1.85; }
.transfer-steps { display: flex; flex-direction: column; gap: 14px; }
.ts-item { display: flex; gap: 14px; align-items: flex-start; }
.ts-num {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700; flex-shrink: 0;
}
.ts-body h4 { font-size: .88rem; font-weight: 600; margin-bottom: 3px; }
.ts-body p  { font-size: .78rem; color: var(--muted); }

/* ── スケジュール表 ── */
.schedule-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden;
}
.schedule-col {
  background: var(--bg); padding: 28px 20px; text-align: center;
}
.sch-month { font-size: .65rem; color: var(--accent); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; }
.sch-title { font-size: .9rem; font-weight: 600; margin-bottom: 10px; }
.sch-desc  { font-size: .75rem; color: var(--muted); line-height: 1.7; }

/* ── RESPONSIVE (多ページ追加) ── */
@media (max-width: 960px) {
  .plan-grid     { grid-template-columns: 1fr; }
  .opt-grid      { grid-template-columns: 1fr; }
  .svc-detail    { grid-template-columns: 1fr; }
  .svc-detail.reverse { direction: ltr; }
  .transfer-box  { grid-template-columns: 1fr; }
  .strength-grid { grid-template-columns: repeat(2,1fr); }
  .footer-top    { grid-template-columns: 1fr; gap: 32px; }
  .footer-cols   { grid-template-columns: repeat(2,1fr); }
  .case-grid-3   { grid-template-columns: 1fr 1fr; }
  .schedule-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px) {
  .strength-grid { grid-template-columns: 1fr 1fr; }
  .footer-cols   { grid-template-columns: 1fr; }
  .case-grid-3   { grid-template-columns: 1fr; }
  .dd-menu       { left: 0; transform: none; }
  .has-dd.open .dd-menu { transform: none; }
  .price-table   { font-size: .72rem; }
  .price-table th,
  .price-table td { padding: 10px 12px; }
  .schedule-grid { grid-template-columns: 1fr; }
  .contact-grid  { grid-template-columns: 1fr !important; }
}

/* contact.html の2カラム */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(40px,6vw,80px);
  align-items: start;
}
@media (max-width: 840px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* v5: ローディング画面は常にダーク */
#loading                { background: #0C0C14 !important; }
#loading .ld-logo       { color: rgba(247,247,245,.14) !important; }
#loading .ld-logo-em    { color: rgba(247,247,245,.75) !important; }
#loading .ld-logo-img   { filter: brightness(0) invert(1); opacity: .85; }
#loading .ld-bar-wrap   { background: rgba(247,247,245,.14) !important; }
#loading .ld-bar        { background: linear-gradient(90deg,rgba(37,99,235,.6),rgba(124,58,237,.9)) !important; }
#loading .ld-num        { color: rgba(247,247,245,.07) !important; }

/* ── nav-overlay: ライトテーマでも常にダーク背景なので白テキストで固定 ── */
.nav-overlay .nav-ov-list a              { color: rgba(247,247,245,.52); }
.nav-overlay .nav-ov-list a:hover        { color: rgba(247,247,245,1);   }
.nav-overlay .nav-ov-list a::before      { color: var(--accent); }
.nav-overlay .nav-ov-cat                 { color: var(--accent); }


/* ==============================================
   RESPONSIVE UTILITY GRIDS
   インラインstyleで書かれたグリッドをクラス化し
   メディアクエリを有効にする
============================================== */

/* 3列・gap20px (flow.html / hp.html / faq.html) */
.g-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
/* 3列・gap16px (cases.html) */
.g-3col-sm {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
/* 3列・gap16px・中央寄せ (contact.html stats) */
.g-3col-stat {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  text-align: center;
}
/* 3列・gap12px (flow ステップ内ミニグリッド) */
.g-3col-xs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
/* 2列・gap12px (flow ステップ内) */
.g-2col-xs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
/* ステップカード: アイコン列 + テキスト列 */
.g-step {
  display: grid !important;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: start;
}

@media (max-width: 960px) {
  .g-3col    { grid-template-columns: 1fr 1fr; }
  .g-3col-sm { grid-template-columns: 1fr 1fr; }
  .g-3col-stat { grid-template-columns: 1fr 1fr 1fr; } /* 3col維持 */
}

@media (max-width: 640px) {
  .g-3col, .g-3col-sm, .g-3col-stat, .g-3col-xs {
    grid-template-columns: 1fr;
  }
  .g-2col-xs { grid-template-columns: 1fr; }
  .g-step    { grid-template-columns: 1fr !important; gap: 16px; }
}

/* ── 比較テーブル3列: モバイルは横スクロール ── */
.price-table--3col-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: 16px;
}
.price-table--3col-wrap .price-table--3col {
  min-width: 480px;
}
@media (max-width: 640px) {
  /* ラッパーがない場合の直接フォールバック */
  .price-table--3col {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 480px;
  }
}


/* ==============================================
   RESPONSIVE COMPLETENESS — v5 全ページ補完
   ここより下が追加分。既存ルールより後に記述し
   て上書き優先順位を確保する。
============================================== */

/* ── ≤640px ─────────────────────────────────── */
@media (max-width: 640px) {

  /* ナビ ロゴ */
  .logo-img {
    height: 36px;
    transform: none;
  }

  /* ヒーロー下余白 (元:180px → 80px) */
  .hero {
    padding-bottom: 80px;
  }

  /* スクロールインジケーター: スマホでは非表示 */
  .hero-scroll-ind {
    display: none !important;
  }

  /* サービスカード: 高さ固定を解除 */
  .svc-card {
    height: auto;
    min-height: 180px;
  }

  /* FAQ: padding を詰める */
  .faq-btn {
    padding: 16px;
    font-size: .84rem;
  }
  .faq-ans p {
    padding: 0 16px 16px;
  }
  /* テキスト折り返しで200pxを超える場合に備えてmax-heightを拡大 */
  .faq-item.open .faq-ans {
    max-height: 600px;
  }

  /* フッター ロゴ */
  .footer-logo-img {
    height: 40px;
    transform: none;
  }
  /* フッター gap */
  .footer-top  { gap: 24px; }
  .footer-cols { gap: 20px; }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .footer-bottom-nav { gap: 14px; }

  /* スケジュール表 */
  .schedule-col { padding: 18px 12px; }

  /* CTA ボタン縦並び */
  .cta-actions {
    flex-direction: column;
    align-items: center;
  }
  .cta-sub { font-size: .88rem; }

  /* 所有権移転ボックス */
  .transfer-box { gap: 20px; }

  /* ページヒーロー（内部ページ）*/
  .page-hero {
    padding: calc(var(--nav-h) + 48px) 0 48px;
  }

  /* opt-card（フロー/コンタクトの番号付きステップ）*/
  .opt-card {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* 強みグリッド: 960pxで2列→640pxでも2列を維持（4→2→2） */
  /* ※1列に変えたい場合は下行のコメントアウトを外す */
  /* .strength-grid { grid-template-columns: 1fr; } */
}

/* ── ≤480px（iPhone SE・小型Android） ────────── */
@media (max-width: 480px) {

  /* ロゴさらに縮小 */
  .logo-img        { height: 28px; }
  .footer-logo-img { height: 32px; }

  /* ヒーロー見出し */
  .hero-h1 { font-size: 1.75rem; }

  /* ページヒーロー見出し */
  .ph-h1 { font-size: 1.75rem; }

  /* セクション縦余白 */
  .section { padding: 60px 0; }

  /* 強みグリッド → 1列 */
  .strength-grid { grid-template-columns: 1fr; }

    /* プランカード余白 */
  .plan-card { padding: 24px; }

  /* ヒーロー proof カード */
  .proof-num { font-size: 1.6rem; }

  /* transfer-box の見出し */
  .transfer-text h3 { font-size: 1.2rem; }
}


/* ==============================================
   黒ベース・ダークテーマ 上書き（自動追記）
============================================== */
.logo-img, .ld-logo-img, .footer-logo-img { filter: brightness(0) invert(1); }

#header.scrolled { background: rgba(7,8,11,.82); }

.h1-em {
  background: linear-gradient(90deg, var(--accent), #BCD4FF, var(--accent));
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ガラスUI → ダークグラス */
.proof-card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10); }
.proof-card:hover { background: rgba(255,255,255,.09); border-color: rgba(59,130,246,.45); box-shadow: 0 12px 32px rgba(0,0,0,.5); }
.hv-deco { background: rgba(18,20,26,.86); border-color: rgba(255,255,255,.10); box-shadow: 0 12px 32px rgba(0,0,0,.55); }
.hero .btn-ghost { background: rgba(255,255,255,.06); color: var(--ink); border-color: rgba(255,255,255,.16); }
.hero .btn-ghost:hover { background: rgba(255,255,255,.12); border-color: rgba(59,130,246,.5); }

/* ヒーロー：写真背景＋明るいオーバーレイを撤去し、パーティクルへ置換 */
.hero-bg-img { display: none !important; }
.hero::before { display: none !important; }
/* パーティクルを画面固定（fixed・最背面）。本文だけがその上をスクロールする */
.hero { background: transparent; }
.hero-canvas, .hero-fallback {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  z-index: -1; display: block; pointer-events: none;
}
.hero-canvas { display: block; }
.hero-fallback { display: none;
  background: radial-gradient(ellipse 60% 45% at 50% 50%, #060d18 0%, #020408 100%); }


/* ==============================================
   WHY US：スクロールでカードを1枚ずつ縦巡回（JSが #strength に .wu-cycle 付与）
============================================== */
/* カードなし・左揃え・テキストのみ */
#strength.wu-cycle .sec-head { text-align: left !important; }
/* WHY US のコンテンツ全体を約2cm下げる */
#strength .wrap { padding-top: 72px; }
#strength.wu-cycle .strength-grid {
  display: block; position: relative;
  background: transparent; border: none; border-radius: 0; overflow: visible;
  max-width: 760px; margin: 0; min-height: 300px;
}
#strength.wu-cycle .strength-card {
  position: absolute; inset: 0;
  background: transparent; border: none; border-radius: 0; box-shadow: none; padding: 0;
  display: flex; flex-direction: column; justify-content: center;
  align-items: flex-start; text-align: left;
  will-change: transform, opacity;
}
/* ホバーの光る演出（sheen / glow）を無効化 */
#strength.wu-cycle .strength-card::before { display: none !important; }
#strength.wu-cycle .strength-card:hover  { box-shadow: none !important; }
#strength.wu-cycle .st-icon  { display: none; }                          /* 文字だけ */
#strength.wu-cycle .st-num   { font-size: clamp(2.4rem,5.5vw,4rem); line-height:1.05; margin-bottom: 14px; }
#strength.wu-cycle .st-label { font-size: clamp(1rem,1.6vw,1.2rem); font-weight: 700; margin-bottom: 16px; }
#strength.wu-cycle .st-desc  { font-size: clamp(.9rem,1.3vw,1.02rem); line-height: 1.85; max-width: 600px; }
#strength .wu-dots { display: flex; gap: 9px; justify-content: flex-start; margin-top: 36px; }
#strength .wu-dot  { width: 7px; height: 7px; border-radius: 50%; background: var(--border-md); transition: background .3s, transform .3s; }
#strength .wu-dot.on { background: var(--accent); transform: scale(1.35); }


/* ==============================================
   SERVICES：3Dリング（円状カルーセル）
============================================== */
.svc-3d { display: block !important; position: relative; height: 100svh; overflow: hidden; }
.svc-head-3d {
  position: absolute; top: clamp(56px, 11vh, 120px); left: 0; right: 0;
  text-align: center; z-index: 4; padding: 0 20px; pointer-events: none;
}
.svc-head-3d .sec-title { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.svc-head-3d .svc-sub, .svc-head-3d .svc-counter-inline { justify-content: center; display: inline-flex; }
.svc-head-3d .svc-sub { display: block; }
.svc-stage {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  perspective: 2800px;
  padding-top: clamp(150px, 24vh, 240px);   /* 見出しと重ならないようリングを下げる */
  transform: translateY(-40px);              /* カードを約1cm上へ */
}
.svc-ring {
  position: relative;
  width: clamp(200px, 19vw, 250px);
  height: clamp(269px, 34vh, 339px);
  transform-style: preserve-3d;
  will-change: transform;
}
.svc-3d .svc-slot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transform: var(--svc-tf, none) !important;   /* リング配置＋ホバー傾き（厚みごと回転） */
  transition: transform .25s ease;
}
.svc-3d .svc-card {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  transform: translateZ(0) !important;          /* 平面（傾きはスロット側で付与） */
  backface-visibility: visible;   /* 反対側のカードの背も見せる */
  pointer-events: none;                          /* ホバー無効（青光りはセンター時のみ） */
  background: linear-gradient(160deg, #1b2030 0%, #0d1018 100%);   /* 不透明 */
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 24px 55px rgba(0,0,0,.5);        /* 通常のドロップシャドウ */
  transition: box-shadow .4s ease, border-color .4s ease;
}
/* センター（Zポップ）と同じタイミングで青く光る */
.svc-3d .svc-card.is-lit {
  border-color: rgba(96,165,250,.6);
  box-shadow: 0 0 44px rgba(59,130,246,.5), 0 0 100px rgba(59,130,246,.22), 0 26px 55px rgba(0,0,0,.5);
}
.svc-3d .svc-card.is-lit h3 {
  color: var(--accent);
  text-shadow: 0 0 18px rgba(59,130,246,.5), 0 0 38px rgba(59,130,246,.22);
}
.svc-3d .svc-card.is-lit .svc-num,
.svc-3d .svc-card.is-lit h3 small { color: rgba(120,170,255,.92); }

/* モバイル：3Dをやめて縦積み */
@media (max-width: 960px) {
  .svc-3d { height: auto; overflow: visible; padding: 80px 0; }
  .svc-head-3d { position: static; margin-bottom: 28px; }
  .svc-stage { position: static; perspective: none; display: block; }
  .svc-ring { width: auto !important; height: auto !important; transform: none !important; transform-style: flat; }
  .svc-3d .svc-slot { position: relative; inset: auto; width: auto; height: auto; transform: none !important; transform-style: flat; margin: 0 auto 16px; max-width: 340px; }
  .svc-3d .svc-card { position: relative; width: auto; height: auto; transform: none !important; opacity: 1 !important; }
  .svc-3d .svc-side { display: none; }
}


/* カード背面を同色で塗りつぶし（奥のカードの鏡像テキストを隠す）*/
.svc-3d .svc-slot::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(160deg, #1b2030 0%, #0d1018 100%);   /* カードと同じ色 */
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r);
  transform: rotateY(180deg) translateZ(1px);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}

/* 手順ステップを意味的な順序リスト(ol)で表現（マーカーは非表示） */
ol.schedule-grid, ol.transfer-steps { list-style: none; }


/* ==============================================
   DEEPER MOBILE / TOUCH OPTIMIZATION (v5 追記)
   タップ領域44px・iOS入力ズーム防止・可読性
============================================== */

/* iOS Safari は font-size<16px の入力にフォーカスすると自動ズームする → 16pxに固定 */
@media (max-width: 768px) {
  .form-group input,
  .form-group select,
  .form-group textarea { font-size: 16px; padding: 13px 16px; }
}

/* モバイル: 主要タップ要素を 44px 以上に */
@media (max-width: 640px) {
  .nav-cta { padding: 12px 18px !important; min-height: 44px; display: inline-flex; align-items: center; }
  .btn { padding: 14px 24px; }                 /* 既定でも約44px → 余裕を持たせる */
  /* フッターリンクのタップ間隔を拡大（ナビリンクのみ。CTAボタンは .btn の余白を維持） */
  .footer-col ul { gap: 4px; }
  .footer-col ul a { display: inline-block; padding: 8px 0; }
  .footer-nav { gap: 8px 22px; }
  .footer-nav a { display: inline-block; padding: 6px 0; }
  /* 極小ラベルの可読性フロア（装飾ラベルが潰れすぎないよう底上げ） */
}

/* タッチ端末ではカスタムカーソル非使用→既定カーソルに戻す（JS不達時の保険） */
@media (hover: none) {
  body, a, .btn, button { cursor: auto; }
}


/* ==============================================
   ≤480px 実機検証で検出した横はみ出しの修正
============================================== */

/* pricing/options の「オプション・保守料金」= インライン2カラムグリッドが
   モバイルでも2列のまま縮まず溢れる → 1列へ畳む（属性セレクタで一括対応） */
@media (max-width: 768px) {
  /* [style*=...] による文字列マッチのパッチは削除（.g-2col 等のクラスで畳む） */
}

/* about の svc-detail 画像枠: aspect-ratio:4/3 と インラインmin-height:260px が
   競合し「高さ260px→幅347px」を逆算して溢れる → モバイルでは比率固定を解除 */
@media (max-width: 640px) {
  .svc-detail-visual { aspect-ratio: auto; width: 100%; min-height: 200px; }
}


/* ==============================================
   グレースフルデグレード
   JS無効(html:not(.js)) / GSAP失敗(html.no-gsap) でも
   コンテンツを必ず可視化し、操作可能にする
============================================== */
html:not(.js) .reveal,      html.no-gsap .reveal,
html:not(.js) .hero-badge,  html.no-gsap .hero-badge,
html:not(.js) .hero-desc,   html.no-gsap .hero-desc,
html:not(.js) .proof-card,  html.no-gsap .proof-card,
html:not(.js) .hero-actions,html.no-gsap .hero-actions,
html:not(.js) .h1-line,     html.no-gsap .h1-line {
  opacity: 1 !important; transform: none !important; visibility: visible !important;
}
/* JS無効ではカスタムカーソルが生成されない → 既定カーソルに戻す */
html:not(.js) body, html:not(.js) a, html:not(.js) .btn, html:not(.js) button { cursor: auto !important; }
/* JS無効/スクリプト不達でローディング画面が残り本文を覆うのを防ぐ */
html:not(.js) #loading, html.no-gsap #loading { display: none !important; }


/* ==============================================
   アクセシビリティ: キーボードフォーカス & スキップリンク
============================================== */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.skip-link {
  position: absolute; left: 16px; top: -64px; z-index: 9999;
  background: var(--accent); color: #fff;
  padding: 10px 18px; border-radius: 8px;
  font-size: .9rem; font-weight: 600; text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }
.skip-link:focus-visible { outline-offset: 3px; }

/* ==============================================
   WORKS 制作イメージ・ギャラリー（各カードにLUMEN表記＝複製防止）
============================================== */
.works-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.work-card { position: relative; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--bg2); transition: border-color .3s, transform .4s var(--ease); }
.work-card:hover { border-color: var(--border-md); transform: translateY(-3px); }
.work-card img { width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; object-position: top center; display: block; }
.work-cap { padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.work-cap b { font-size: .84rem; font-weight: 600; color: var(--ink); }
.work-cap span { font-size: .68rem; color: var(--dim); white-space: nowrap; }
.work-mark { position: absolute; top: 10px; right: 10px; font-size: .58rem; font-weight: 800; letter-spacing: .16em;
  color: rgba(255,255,255,.6); background: rgba(0,0,0,.32); padding: 3px 9px; border-radius: 6px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); pointer-events: none; }
@media (max-width: 840px) { .works-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 500px) { .works-grid { grid-template-columns: 1fr; } }

/* ==============================================
   ANALYTICS セクション（数字で見える化）＋レポート画面モックアップ
============================================== */
.analytics-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(32px,5vw,60px); align-items: center; }
.an-note { font-size: .8rem; color: var(--muted); margin-top: 18px; line-height: 1.85; }
.an-cta { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.an-cta .an-sub { font-size: .78rem; color: var(--dim); }
.an-dash { border: 1px solid var(--border-md); border-radius: 18px; background: linear-gradient(158deg, var(--bg3), var(--bg)); padding: clamp(20px,3vw,26px); box-shadow: 0 24px 70px rgba(0,0,0,.45); }
.an-dash-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.an-dash-title { font-size: .72rem; color: var(--muted); letter-spacing: .02em; }
.an-dash-live { display: inline-flex; align-items: center; gap: 6px; font-size: .66rem; color: var(--muted); }
.an-dash-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 9px #22C55E; }
.an-dash-score { display: flex; gap: 18px; align-items: center; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.an-total { flex-shrink: 0; width: 96px; height: 96px; border-radius: 50%; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, rgba(59,130,246,.18), transparent 70%);
  border: 2px solid var(--accent); box-shadow: 0 0 24px rgba(59,130,246,.25) inset; }
.an-total-num { font-size: 2.2rem; font-weight: 800; line-height: .9; letter-spacing: -.03em; color: var(--ink); }
.an-total-lbl { font-size: .58rem; color: var(--muted); letter-spacing: .04em; margin-top: 3px; }
.an-total-cap { min-width: 0; }
.an-total-cap-t { font-size: 1rem; color: var(--muted); line-height: 1.45; }
.an-total-cap-s { font-size: .74rem; color: var(--dim); margin-top: 5px; }
.an-bars { display: flex; flex-direction: column; gap: 12px; }
.an-bar { display: grid; grid-template-columns: 58px 1fr 30px; align-items: center; gap: 10px; }
.an-bar-k { display: flex; flex-direction: column; font-size: .74rem; font-weight: 700; color: var(--muted); line-height: 1.1; }
.an-bar-k em { font-size: .58rem; font-weight: 400; font-style: normal; color: var(--dim); margin-top: 1px; }
.an-bar-track { height: 7px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.an-bar-fill { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #22D3EE, #3B82F6); }
.an-bar-v { font-size: .78rem; font-weight: 700; color: var(--ink); text-align: right; }
.an-next { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.an-next-t { font-size: .68rem; font-weight: 700; letter-spacing: .08em; color: var(--accent); text-transform: uppercase; margin-bottom: 10px; }
.an-next ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.an-next li { font-size: .8rem; color: var(--muted); display: flex; gap: 9px; align-items: flex-start; }
.an-next li::before { content: "→"; color: var(--accent); flex-shrink: 0; }
@media (max-width: 900px) { .analytics-grid { grid-template-columns: 1fr; } .an-dash { order: 2; } }

/* 人件費比較（自社雇用 vs LUMEN）の2カード */
.labor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
.labor-card { border: 1px solid var(--border); border-radius: 16px; padding: clamp(22px,3vw,30px); background: var(--bg); }
.labor-card--lumen { border-color: rgba(59,130,246,.4); background: rgba(59,130,246,.05); }
.labor-card .lc-tag { font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.labor-card--lumen .lc-tag { color: var(--accent); }
.labor-card .lc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.labor-card .lc-row:last-child { border-bottom: none; }
.labor-card .lc-k { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.labor-card .lc-v { font-size: .96rem; font-weight: 600; color: var(--ink); text-align: right; }
.labor-card--lumen .lc-v { color: var(--accent); }
@media (max-width: 640px) { .labor-grid { grid-template-columns: 1fr; } }

/* ==============================================
   料金比較テーブル — モバイルで横スクロールを気づかせる
   （4列テーブルは狭幅で min-width によりスクロールになり、
    最重要の「LUMEN」列が画面外に隠れるため誘導を出す）
============================================== */
.cmp-hint {
  display: none;
  margin: 0 0 12px;
  font-size: .76rem; font-weight: 600;
  text-align: center; color: var(--accent);
  letter-spacing: .02em;
}
.cmp-wrap { position: relative; }
.cmp-wrap::after {
  content: '';
  position: absolute; top: 1px; right: 1px; bottom: 1px; width: 44px;
  border-radius: 0 16px 16px 0;
  background: linear-gradient(to right, rgba(14,16,20,0) 0%, var(--bg2) 92%);
  pointer-events: none; opacity: 0; transition: opacity .3s var(--ease);
}
@media (max-width: 720px) {
  .cmp-hint { display: block; }
  .cmp-wrap::after { opacity: 1; }
}

/* ==============================================
   価格表 — モバイルで品名列が「レスポンシ…」等に潰れる不具合の修正
   原因: td が display:flex のため text-overflow:ellipsis が効かず、
   さらに固定列幅で品名列が 74px まで縮み白 nowrap でハードクリップされていた。
   対策: モバイルでは横スクロールをやめ3列を画面内に収め、品名は折返し可・行高可変にする。
============================================== */
@media (max-width: 640px) {
  /* 2列表（pricing のオプション一覧）: 品名列を折返し可・行高を内容に合わせる */
  .price-table:not(.price-table--3col) tr { height: auto; min-height: 48px; }
  .price-table:not(.price-table--3col) td,
  .price-table:not(.price-table--3col) th { height: auto; padding-top: 11px; padding-bottom: 11px; }
  .price-table:not(.price-table--3col) td:first-child,
  .price-table:not(.price-table--3col) th:first-child {
    white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35;
  }

  /* 3列表（options）: 横スクロール(min-width:480px)をやめ、流動3列で画面内に収める */
  .price-table--3col-wrap { overflow-x: visible; }
  .price-table--3col-wrap .price-table--3col,
  .price-table--3col { min-width: 0; }
  .price-table--3col tr {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.05fr) minmax(0, 1.05fr);
    height: auto; min-height: 54px;
  }
  .price-table--3col td,
  .price-table--3col th {
    height: auto; white-space: normal; overflow: visible; text-overflow: clip;
    padding: 11px 12px; line-height: 1.35; font-size: .76rem;
  }
}

/* ==============================================
   タブレット(641–960px): 料金/オプションカードが1カラムで
   横に間延びするため、最大幅を制限して中央寄せし読みやすい幅に収める
============================================== */
@media (min-width: 641px) and (max-width: 960px) {
  .plan-grid, .opt-grid { max-width: 500px; margin-left: auto; margin-right: auto; }
}

/* ==============================================
   WORKS: interactive live-demo cards（制作例ページ）
============================================== */
a.work-card { text-decoration: none; color: inherit; display: block; }
.work-card--live { cursor: pointer; }
.work-live { position: absolute; top: 10px; left: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px; font-size: .58rem; font-weight: 700; letter-spacing: .12em;
  color: #fff; background: rgba(59,130,246,.55); padding: 3px 8px 3px 7px; border-radius: 6px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); pointer-events: none; }
.work-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 7px #fff; }
.work-play { position: absolute; left: 50%; top: 44%; transform: translate(-50%,-50%) scale(.96); z-index: 2;
  display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; border-radius: 999px;
  background: rgba(8,10,18,.5); border: 1px solid rgba(255,255,255,.28); color: #fff;
  font-size: .78rem; font-weight: 600; letter-spacing: .01em;
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  opacity: 0; transition: opacity .35s var(--ease), transform .35s var(--ease); pointer-events: none; }
.work-card--live:hover .work-play { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.work-play .pl-tri { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #fff; }
.work-card--live .work-cap span { color: var(--accent); }
@media (hover: none) { .work-play { opacity: 1; top: 50%; padding: 7px 14px; font-size: .72rem; background: rgba(8,10,18,.42); } }
.works-subhead { display: flex; align-items: baseline; gap: 12px; margin: 4px 0 20px; flex-wrap: wrap; }
.works-subhead h2 { font-size: clamp(1.15rem,2.4vw,1.5rem); font-weight: 700; color: var(--ink); }
.works-subhead span { font-size: .76rem; color: var(--dim); }

/* ==============================================
   HOME: 制作例への「2つの入口」タイル（DESIGN / MOTION）
============================================== */
.entry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 8px; }
.entry-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; background: var(--bg); text-decoration: none; color: inherit; transition: border-color .3s, transform .4s var(--ease); }
.entry-card:hover { border-color: var(--border-md); transform: translateY(-4px); }
.entry-media { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.entry-media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .6s var(--ease); }
.entry-card:hover .entry-media img { transform: scale(1.04); }
.entry-tag { position: absolute; top: 12px; right: 12px; z-index: 2; font-size: .62rem; font-weight: 700; letter-spacing: .1em; color: #fff; background: rgba(0,0,0,.42); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 4px 11px; border-radius: 999px; }
.entry-tag--live { background: rgba(59,130,246,.62); display: inline-flex; align-items: center; gap: 6px; }
.entry-tag--live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 7px #fff; }
.entry-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.entry-k { font-size: .68rem; font-weight: 700; letter-spacing: .14em; color: var(--accent); text-transform: uppercase; }
.entry-t { font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-weight: 700; color: var(--ink); line-height: 1.3; }
.entry-d { font-size: .85rem; color: var(--muted); line-height: 1.75; margin: 2px 0 6px; }
.entry-cta { margin-top: auto; font-size: .9rem; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.entry-arw { transition: transform .3s var(--ease); }
.entry-card:hover .entry-arw { transform: translateX(5px); }
@media (max-width: 720px) { .entry-grid { grid-template-columns: 1fr; gap: 16px; } }

/* ==============================================
   HOME: 制作例マーキー（静止デザイン ←→ 動く演出、逆方向オートスクロール）
============================================== */
.mq { margin: 34px 0 30px; display: flex; flex-direction: column; gap: 16px; }
.mq-row { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.mq-track { display: flex; gap: 16px; width: max-content; will-change: transform; }
.mq-row--left .mq-track  { animation: mq-scroll-l 70s linear infinite; }
.mq-row--right .mq-track { animation: mq-scroll-r 56s linear infinite; }
.mq-row:hover .mq-track, .mq-track:focus-within { animation-play-state: paused; }
@keyframes mq-scroll-l { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes mq-scroll-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.mq-card { position: relative; flex: 0 0 auto; width: clamp(236px, 26vw, 316px); aspect-ratio: 16/10; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--bg); text-decoration: none; display: block; }
.mq-card img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .5s var(--ease); }
.mq-card:hover img { transform: scale(1.05); }
.mq-card:hover { border-color: var(--border-md); }
.mq-card .work-mark { top: auto; bottom: 8px; right: 8px; }
.mq-live { position: absolute; top: 8px; left: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; font-size: .56rem; font-weight: 700; letter-spacing: .1em; color: #fff; background: rgba(59,130,246,.62); padding: 2px 8px; border-radius: 6px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.mq-live::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff; }
.mq-jump { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { .mq-track { animation: none !important; transform: none !important; } .mq-row { overflow-x: auto; -webkit-overflow-scrolling: touch; } }

/* ============================================================
   MAKER — つくっている人（実績ゼロを隠さず、条件で引き受ける）
   配置は #works（能力の証明）の直後。能力を示す前に弱みを出すと
   ただの自爆になるため、順序を固定している。
============================================================ */
.maker-grid {
  display: grid; grid-template-columns: 1fr 1.15fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;   /* 下部の @media 外で start に上書きしている */
}
.maker-lead h3 {
  font-size: clamp(1.5rem, 3.4vw, 2.2rem); line-height: 1.5;
  font-weight: 700; color: var(--ink); margin: 0 0 20px; letter-spacing: -.01em;
}
.maker-lead h3 em { color: var(--accent); }
.maker-lead p { font-size: .95rem; line-height: 2; color: var(--muted); margin: 0 0 16px; }

/* 運営者カード。顔写真は掲載しない方針のため、アバター枠は持たせず
   「名前そのもの」をタイポグラフィで見せる（空の丸枠は不在を強調してしまう） */
.maker-people {
  margin-top: 28px; padding: 22px 24px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 14px;
}
.maker-people-label {
  margin: 0 0 14px;
  font-size: .72rem; font-weight: 600; letter-spacing: .1em;
  color: var(--dim);
}
.maker-people-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 30px;
}
.maker-people-list li {
  position: relative; padding-left: 13px;
  font-size: 1.05rem; font-weight: 700; color: var(--ink); letter-spacing: .02em;
}
.maker-people-list li::before {
  content: ""; position: absolute; left: 0; top: .38em;
  width: 3px; height: 1em; border-radius: 2px; background: var(--accent);
}
.maker-people-note {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--border);
  font-size: .82rem; line-height: 1.9; color: var(--muted);
}
.maker-people-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* 「その代わり、お見せできる2つ」 */
.maker-offer { display: grid; gap: 18px; }
.maker-item {
  position: relative; padding: 24px 26px 24px 62px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 16px;
}
.maker-item::before {
  content: attr(data-n); position: absolute; left: 22px; top: 24px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--btn-bg, var(--accent)); color: #fff;
  display: grid; place-items: center; font-size: .82rem; font-weight: 700;
}
.maker-item h4 { font-size: 1.02rem; font-weight: 700; color: var(--ink); margin: 0 0 10px; }
.maker-item p  { font-size: .88rem; line-height: 1.95; color: var(--muted); margin: 0; }
.maker-item ul { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 9px; }
.maker-item ul li {
  position: relative; padding-left: 18px;
  font-size: .86rem; line-height: 1.8; color: var(--muted);
}
.maker-item ul li::before {
  content: ''; position: absolute; left: 0; top: .72em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.maker-item ul li strong { color: var(--ink); font-weight: 600; }
.maker-note { font-size: .78rem; color: var(--dim); margin-top: 14px; line-height: 1.8; }

@media (max-width: 860px) {
  .maker-grid { grid-template-columns: 1fr; gap: 34px; }
  .maker-item { padding: 20px 20px 20px 54px; }
  .maker-item::before { left: 18px; top: 20px; }
}
/* 12ヶ月総額（「初期費用0円」＝分割であることを隠さない） */
.plan-price-total {
  margin-top: 8px; font-size: .78rem; color: var(--dim);
  letter-spacing: .01em;
}
/* MEO「対象外」表示（オンライン専業のLUMEN自身は実店舗指標の対象外） */
.an-bar--na .an-bar-track { opacity: .35; }
.an-bar--na .an-bar-v     { color: var(--dim); font-weight: 500; }

/* MAKER の造形を #why の flow-ol から引き剥がす
   （隣接セクションで「番号丸＋角丸カード」が二度続くと、リズムではなく作り込み漏れに見える）
   ここはサイトの核なので、カード感を捨てて「宣言」の縦罫だけで語らせる */
.maker-item {
  padding: 4px 0 4px 26px;
  background: transparent;
  border: none;
  border-left: 2px solid var(--accent);
  border-radius: 0;
  margin-bottom: 8px;
}
.maker-item::before { content: none; }        /* data-n の番号丸を廃止 */
.maker-item h4 { font-size: 1.12rem; margin-bottom: 12px; }
.maker-offer   { gap: 34px; }

/* サイトで最も重い一行を、本文から離陸させる */
.maker-punch {
  color: var(--ink);
  font-size: 1.12em;
  font-weight: 700;
  box-shadow: inset 0 -.42em 0 rgba(59,130,246,.22);
}
@media (max-width: 860px) {
  .maker-item { padding: 4px 0 4px 20px; }
}

/* ============================================================
   A11Y / パフォーマンス修正（実測に基づく）
============================================================ */

/* フッターCTAの白文字が 2.67:1 だった
   （.footer-col a (0,1,1) が .btn-primary (0,1,0) に詳細度で勝っていた） */
.footer-col a.btn,
.footer-col a.btn-primary { color: #fff; }

/* --accent(#3B82F6)＋白文字は 3.68:1 でAA未達。
   白文字用に用意してある --btn-bg(#2563EB, 5.17:1) を使う */
.skip-link      { background: var(--btn-bg); }
.req            { background: var(--btn-bg); }
.tab-btn.active { background: var(--btn-bg); }
.ts-num         { background: var(--btn-bg); }

/* 閉じたハンバーガーメニュー内の15リンクが Tab でフォーカスできていた（WCAG 4.1.2違反）。
   opacity:0 + pointer-events:none だけでは、フォーカス順から外れない */
.nav-overlay      { visibility: hidden; transition: opacity .35s var(--ease), visibility .35s; }
.nav-overlay.open { visibility: visible; }

/* ヒーローの proof-card：文字がWebGL粒子の直上に乗り、明るい粒子が通ると 1.01:1 まで落ちる。
   動く背景の上でコントラストは保証できないので、スクリムを敷く */
.proof-card {
  background: rgba(9,11,16,.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* フッター最下部の法的リンクが 18px（WCAG 2.5.8 は 24×24px 以上）
   .footer-col ul a にはモバイル用 padding があるのに、ここだけ漏れていた */
.footer-bottom-nav a { display: inline-block; padding: 6px 6px; font-size: .72rem; }
.breadcrumb a        { display: inline-block; padding: 4px 2px; }

/* マーキーの一時停止（WCAG 2.2.2：5秒以上自動で動くものは停止できること）
   従来は hover / focus-within のみ＝タッチ端末では止められなかった */
.mq { position: relative; }
.mq-toggle {
  position: absolute; top: -46px; right: max(16px, calc((100vw - 1200px) / 2));
  z-index: 4; display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid var(--border);
  color: var(--muted); font-size: .74rem; font-weight: 600; letter-spacing: .04em;
  cursor: pointer; transition: color .25s, border-color .25s, background .25s;
}
.mq-toggle:hover { color: var(--ink); border-color: var(--accent); background: rgba(59,130,246,.10); }
.mq-toggle-ico {
  width: 9px; height: 10px; flex-shrink: 0;
  border-left: 3px solid currentColor; border-right: 3px solid currentColor;   /* ⏸ */
}
.mq-toggle[aria-pressed="true"] .mq-toggle-ico {
  border: none; width: 0; height: 0;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  border-left: 9px solid currentColor;                                          /* ▶ */
}
.mq.is-paused .mq-track { animation-play-state: paused; }
@media (max-width: 640px) { .mq-toggle { top: -42px; right: 16px; } }

/* #maker：左カラム（見出し＋運営者カード）は右のオファー2枚より短いため、
   start 揃え＋sticky で視線に追従させる */
.maker-grid { align-items: start; }
@media (min-width: 861px) {
  .maker-lead { position: sticky; top: 104px; }
}
/* .maker-note が <ul> の直後・同じ字下げで「4つ目の箇条書き」に見えていた */
.maker-note {
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* 2カラムグリッド（旧: インラインstyleを [style*=...] で文字列マッチして畳んでいたものを正規化） */
.g-2col-24 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 720px) { .g-2col-24 { grid-template-columns: 1fr; gap: 18px; } }
/* .opt-icon に絵文字を放り込んでいたのを、自作SVGアイコンに統一
   （絵文字はOS/ブラウザで字形が変わり、ブランドの一貫性がユーザー環境まかせになる） */
.opt-icon img { width: 24px; height: 24px; display: block; }
/* プラン表の機能名に、買う人が価値を判断できる平易な説明を添える
   （「Schema構造化データ ✓」だけでは Light/Standard の差が意味を持たない） */
.feat-item { flex-wrap: wrap; }
.feat-gloss {
  display: block; width: 100%;
  margin-top: 2px; padding-left: 22px;
  font-size: .72rem; font-style: normal; font-weight: 400;
  color: var(--dim); line-height: 1.6;
}
/* 和文見出しが単語の途中で割れないように（「負いま/す。」を防ぐ） */
.maker-lead h3 { line-break: strict; overflow-wrap: normal; }

/* ============================================================
   無料診断オファー（ラベルと実態のズレを解消：URLを送れば3営業日でレポート）
============================================================ */
.an-offer {
  margin-top: 28px; padding: 26px 28px;
  background: var(--bg2); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: 0 14px 14px 0;
}
.an-offer h3 { font-size: 1.18rem; font-weight: 700; color: var(--ink); margin: 0 0 12px; }
.an-offer h3 em { color: var(--accent); }
.an-offer > p { font-size: .92rem; line-height: 1.95; color: var(--muted); margin: 0 0 16px; }
.an-offer ul { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 9px; }
.an-offer ul li {
  position: relative; padding-left: 20px;
  font-size: .88rem; line-height: 1.8; color: var(--muted);
}
.an-offer ul li::before {
  content: ''; position: absolute; left: 0; top: .68em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.an-offer ul li strong { color: var(--ink); font-weight: 600; }
.an-offer .an-cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 0; }
@media (max-width: 640px) { .an-offer { padding: 22px 20px; } }

/* フォーム：診断用URL欄 */
.opt-tag {
  display: inline-block; margin-left: 6px; padding: 2px 8px;
  border-radius: 999px; background: rgba(59,130,246,.14);
  border: 1px solid rgba(59,130,246,.3);
  font-size: .66rem; font-weight: 600; color: var(--accent); letter-spacing: .02em;
}
.form-hint { margin-top: 6px; font-size: .74rem; color: var(--dim); line-height: 1.7; }
/* contact：無料診断の案内（フォームの直前） */
.diag-box {
  margin-bottom: 30px; padding: 24px 26px;
  background: rgba(59,130,246,.05);
  border: 1px solid rgba(59,130,246,.22); border-radius: 14px;
}
.diag-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  color: var(--accent); text-transform: uppercase; margin: 0 0 10px;
}
.diag-lead { font-size: .9rem; line-height: 1.95; color: var(--muted); margin: 0 0 14px; }
.diag-lead strong { color: var(--ink); font-weight: 600; }
.diag-list { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 7px; }
.diag-list li {
  position: relative; padding-left: 18px;
  font-size: .84rem; line-height: 1.75; color: var(--muted);
}
.diag-list li::before {
  content: ''; position: absolute; left: 0; top: .66em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.diag-list li strong { color: var(--ink); font-weight: 600; }
.diag-line { font-size: .85rem; margin: 0; color: var(--muted); }
.diag-line a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
@media (max-width: 640px) { .diag-box { padding: 20px 18px; } }

/* ============================================================
   REFERRAL — ご紹介プログラム（紹介1件につき月額25%OFF・最大2件で50%OFF）
   配置は #maker（実績ゼロの告白）の直後。告白の論理的な結論として置く。
============================================================ */
.mon-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px,5vw,68px); align-items: start; }
.mon-lead > p { font-size: 1rem; line-height: 2.05; color: var(--muted); margin: 0 0 18px; }
.mon-why {
  padding: 18px 20px; background: rgba(59,130,246,.06);
  border-left: 2px solid var(--accent); border-radius: 0 10px 10px 0;
  font-size: .92rem !important; line-height: 1.95 !important;
}
.mon-offer {
  padding: 30px 32px; background: var(--bg);
  border: 1px solid var(--border); border-radius: 18px;
}
.mon-tag {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: rgba(59,130,246,.14); border: 1px solid rgba(59,130,246,.3);
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; color: var(--accent);
  margin: 0 0 14px;
}
.mon-offer h3 { font-size: clamp(1.35rem,2.8vw,1.85rem); font-weight: 700; color: var(--ink); line-height: 1.5; margin: 0 0 22px; }
.mon-offer h3 em { color: var(--accent); }
.mon-prices { display: grid; gap: 14px; margin-bottom: 18px; }
.mon-price {
  display: grid; gap: 3px; padding: 16px 18px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
}
.mon-price-k { font-size: .78rem; color: var(--dim); letter-spacing: .04em; }
.mon-price-v { font-size: 1.75rem; font-weight: 700; color: var(--accent); line-height: 1.2; }
.mon-price-v span { font-size: .62rem; font-weight: 500; color: var(--muted); margin-left: 6px; letter-spacing: 0; }
.mon-price-n { font-size: .74rem; color: var(--muted); line-height: 1.6; }
.mon-inc { font-size: .86rem; line-height: 1.9; color: var(--muted); margin: 0 0 24px; }
.mon-cond-t { font-size: .95rem; font-weight: 700; color: var(--ink); margin: 0 0 12px; }
.mon-cond { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 11px; }
.mon-cond li {
  position: relative; padding-left: 22px;
  font-size: .86rem; line-height: 1.85; color: var(--muted);
}
.mon-cond li::before {
  content: ''; position: absolute; left: 0; top: .68em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.mon-cond li strong { color: var(--ink); font-weight: 600; }
.mon-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.mon-note { font-size: .74rem; line-height: 1.85; color: var(--dim); margin: 0; padding-top: 14px; border-top: 1px solid var(--border); }
@media (max-width: 900px) {
  .mon-grid { grid-template-columns: 1fr; gap: 30px; }
  .mon-offer { padding: 24px 20px; }
}
/* pricing：ご紹介プログラムのバナー */
.mon-banner {
  display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center;
  padding: 28px 32px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(59,130,246,.09), rgba(99,102,241,.05));
  border: 1px solid rgba(59,130,246,.28);
}
.mon-banner h2 { font-size: clamp(1.2rem,2.6vw,1.6rem); font-weight: 700; color: var(--ink); margin: 0 0 10px; }
.mon-banner h2 em { color: var(--accent); }
.mon-banner p { font-size: .88rem; line-height: 1.9; color: var(--muted); margin: 0; }
@media (max-width: 760px) {
  .mon-banner { grid-template-columns: 1fr; gap: 18px; padding: 22px 20px; }
  .mon-banner-r .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   INSIGHTS — 読みもの（実績がないので、考え方を出す）
============================================================ */
.ins-grid { display: grid; gap: 20px; max-width: 900px; margin: 0 auto; }
.ins-card {
  display: block; padding: 30px 32px; text-decoration: none;
  background: var(--bg2); border: 1px solid var(--border);
  border-left: 3px solid var(--border); border-radius: 0 16px 16px 0;
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.ins-card:hover { border-left-color: var(--accent); background: rgba(59,130,246,.05); transform: translateX(4px); }
.ins-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ins-num { font-size: .78rem; font-weight: 700; color: var(--accent); letter-spacing: .1em; }
.ins-cat {
  padding: 3px 10px; border-radius: 999px;
  background: rgba(255,255,255,.05); border: 1px solid var(--border);
  font-size: .68rem; color: var(--dim); letter-spacing: .04em;
}
.ins-title { font-size: clamp(1.1rem,2.4vw,1.4rem); font-weight: 700; color: var(--ink); line-height: 1.6; margin: 0 0 12px; }
.ins-desc { font-size: .88rem; line-height: 1.95; color: var(--muted); margin: 0 0 16px; }
.ins-more { font-size: .82rem; font-weight: 600; color: var(--accent); }
@media (max-width: 640px) { .ins-card { padding: 24px 20px; } }

/* 記事本文 */
.art-wrap { max-width: 780px; }
.art-meta { font-size: .78rem; color: var(--dim); margin-top: 16px; letter-spacing: .04em; }
.art-lead {
  font-size: 1.02rem; line-height: 2.1; color: var(--muted);
  padding: 22px 24px; margin: 0 0 44px;
  background: var(--bg2); border-left: 3px solid var(--accent); border-radius: 0 12px 12px 0;
}
.art-lead strong { color: var(--ink); }
.art-h2 {
  font-size: clamp(1.25rem,2.8vw,1.65rem); font-weight: 700; color: var(--ink);
  line-height: 1.6; margin: 52px 0 20px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
/* h2 は罫線つき・52px空け。h3 は罫線なし・34px空けで一段下に置く。
   本文の strong（ink/600）と紛れないよう、サイズと余白で差をつける */
.art-h3 {
  font-size: 1.08rem; font-weight: 700; color: var(--ink);
  line-height: 1.7; margin: 34px 0 14px;
}
.art-wrap p { font-size: .95rem; line-height: 2.05; color: var(--muted); margin: 0 0 20px; }
.art-wrap p strong { color: var(--ink); font-weight: 600; }
.art-quote {
  margin: 28px 0; padding: 22px 26px;
  border-left: 3px solid var(--accent); background: rgba(59,130,246,.06);
  border-radius: 0 12px 12px 0; font-size: 1.02rem; line-height: 1.95; color: var(--ink);
}
.art-quote cite { display: block; margin-top: 12px; font-size: .8rem; color: var(--muted); font-style: normal; }
.art-quote cite a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.art-source { font-size: .76rem !important; line-height: 1.8 !important; color: var(--dim) !important; margin: -6px 0 24px !important; }
.art-source a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.art-table-wrap { margin: 24px 0 28px; }
.art-table { width: 100%; border-collapse: collapse; font-size: .9rem; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.art-table th, .art-table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--border); color: var(--muted); }
.art-table thead th { background: var(--bg2); color: var(--ink); font-weight: 700; font-size: .82rem; }
.art-table td strong { color: var(--accent); font-weight: 700; }
.art-table tr:last-child td { border-bottom: none; }
.art-ol { padding-left: 0; margin: 0 0 26px; list-style: none; counter-reset: a; display: grid; gap: 14px; }
.art-ol li {
  position: relative; padding-left: 34px;
  font-size: .93rem; line-height: 2; color: var(--muted);
}
.art-ol li::before {
  counter-increment: a; content: counter(a);
  position: absolute; left: 0; top: .28em;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--btn-bg); color: #fff;
  display: grid; place-items: center; font-size: .76rem; font-weight: 700;
}
.art-ol li strong { color: var(--ink); font-weight: 600; }
.art-ol--num li { padding-left: 38px; }
.art-check { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 11px; }
.art-check li {
  position: relative; padding-left: 22px;
  font-size: .93rem; line-height: 1.95; color: var(--muted);
}
.art-check li::before {
  content: ''; position: absolute; left: 0; top: .72em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.art-check li strong { color: var(--ink); font-weight: 600; }
.art-box {
  margin: 24px 0 28px; padding: 24px 26px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 14px;
}
.art-box p:last-child { margin-bottom: 0; }
.art-box--strong { background: rgba(59,130,246,.08); border-color: rgba(59,130,246,.28); }
.art-box--strong p { color: var(--ink) !important; font-size: 1.02rem !important; }
.art-honest {
  margin: 40px 0 0; padding: 28px 30px;
  background: var(--bg2); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: 0 16px 16px 0;
}
.art-honest p:last-child { margin-bottom: 0; }
.art-link { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.art-mark { color: var(--ink); box-shadow: inset 0 -.4em 0 rgba(59,130,246,.22); font-weight: 700; }
.art-answers { display: grid; gap: 14px; margin: 24px 0 28px; }
.art-answer {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
  padding: 20px 22px; background: var(--bg2);
  border: 1px solid var(--border); border-radius: 14px;
}
.art-answer-n {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--btn-bg); color: #fff;
  display: grid; place-items: center; font-size: .78rem; font-weight: 700; margin-top: 2px;
}
.art-answer strong { display: block; font-size: .95rem; color: var(--ink); margin-bottom: 6px; }
.art-answer p { font-size: .88rem !important; line-height: 1.9 !important; margin: 0 !important; }
@media (max-width: 640px) {
  .art-lead, .art-honest, .art-box { padding: 20px 18px; }
  .art-answer { padding: 16px 16px; gap: 12px; }
}

/* ============================================================
   ARTICLE FX — 読み物専用（js/article-fx.js が制御）
   JS が動かないときは何も起きない＝素のまま読める、を保つ。
   .ch は JS が生成するので、初期状態（opacity:0 等）を CSS に書かない。
   書くと no-gsap 時に見出しが消える。
============================================================ */
.ph-h1 .ch { display: inline-block; will-change: transform, opacity, filter; }

/* h2 の罫線をアクセント色で左から引く。
   ::after は GSAP から直接触れないので、--rule 経由で動かす */
.art-h2 { position: relative; --rule: 0; }
[data-fx="on"] .art-h2::after {
  content: ''; position: absolute; left: 0; bottom: -1px;
  width: 100%; height: 1px; background: var(--accent);
  transform: scaleX(var(--rule)); transform-origin: left center;
}

/* 見せ場A: 一問一答。ピン中の見た目を作る */
[data-fx="on"] .art-quote.is-scene { min-height: 46vh; display: flex; flex-direction: column; justify-content: center; }
[data-fx="on"] .art-quote.is-scene strong { display: inline-block; }
/* .qa-line は js/article-fx.js の sceneQuote() が実行時に生成する行ラッパー
   （問いの行 / 答えの行を丸ごと1単位でアニメーションさせるため）。
   transform(scale/y) を安定させるため inline-block にしておく。 */
[data-fx="on"] .art-quote.is-scene .qa-line { display: inline-block; }

/* 見せ場B: 国際比較の棒グラフ（js/article-fx.js の sceneChart() が実行時に生成・aria-hidden）。
   .fx-* は GSAP 確認後にしか生成されないため、[data-fx="on"] 無しにこの初期状態(scaleX(0))は
   絶対に効かない＝no-gsap/reduced 環境で内容が消えることはない（.ch と同じ安全条件）。
   色は dataviz スキルの「Emphasis（1つだけ強調、他はグレーにする）」パターン。
   日本(is-accent)だけ --accent、他国は --dim。日本の20代は is-accent-faded（--accent を
   opacity .45 で薄める＝rgba(59,130,246,.45) と同じ見た目だが、hexを新規に持ち込まず
   CSS変数だけで表現する）。 */
[data-fx="on"] .fx-chart { margin: 0 0 26px; display: grid; gap: 14px; }
[data-fx="on"] .fx-row { display: grid; grid-template-columns: 7em 1fr 4.5em; gap: 12px; align-items: center; }
[data-fx="on"] .fx-name { font-size: .84rem; color: var(--muted); }
[data-fx="on"] .fx-track { display: block; height: 10px; background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
/* バーの伸長は左端(baseline)を起点に scaleX で行うため、角丸は先端(右)だけに付け、
   baseline側(左)は角ばらせる（dataviz: 4px rounded data-end, square at the baseline）。
   .fx-bar は <span>（既定 display:inline）なので、明示的に display:block を与えないと
   width/height/transform:scaleX() が丸ごと無視され、棒が幅0で消える（実機QAで検出・修正）。
   .fx-track は .fx-row(display:grid) の直接の子なので自動的にブロック化されるが、
   .fx-bar はその孫であり自動ブロック化の対象外のため、ここでは明示が必須。 */
[data-fx="on"] .fx-bar {
  display: block; height: 100%; border-radius: 0 6px 6px 0; transform: scaleX(0); transform-origin: left center;
  background: var(--dim);
}
[data-fx="on"] .fx-bar.is-accent { background: var(--accent); }
[data-fx="on"] .fx-bar.is-accent-faded { background: var(--accent); opacity: .45; }
[data-fx="on"] .fx-val { font-size: .84rem; font-weight: 700; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  [data-fx="on"] .fx-row { grid-template-columns: 5.5em 1fr 4em; gap: 8px; }
  [data-fx="on"] .fx-name { font-size: .76rem; }
}

/* 見せ場C: やること（積み上がる） / やらないこと（打ち消される）。
   .fx-contrast は js/article-fx.js の sceneContrast() が実行時に生成する wrapper
   （doH3 単体を pin すると doH3 だけが固定され、他の3要素は兄弟のため素通りする
   ことが実機スクショで判明したため、4要素をまとめて包んで trigger/pin にしている）。
   打ち消し線は擬似要素を CSS 変数で伸ばす（GSAPは擬似要素を直接触れない）。
   .fx-strike は各 li ではなく、li 内の <strong>（施策名）に付く。
   li は「施策名 — Googleの引用文」の2行構成なので li に付けると
   top:50% が行間を通ってしまう。strong は1行に収まるため中央を通る。 */
[data-fx="on"] .fx-strike { position: relative; --strike: 0; }
[data-fx="on"] .fx-strike::after {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 100%; height: 1px; background: var(--muted);
  transform: scaleX(var(--strike)); transform-origin: left center;
  pointer-events: none;
}
/* モバイルは横幅が狭く各 li が2〜3行に折り返すため、素の記事タイポ(line-height 2 / 1.95)
   のままだと wrapper 全体が画面より高くなり、ピン中に「やらないこと」側が
   画面外に出たまま一度も見えない（実機スクショで検出）。
   見せ場専用の密なタイポスケールに寄せて全体高を画面内に収める
   （fx-chart が本文と別スケールの .84rem を持つのと同じ考え方）。 */
@media (max-width: 640px) {
  [data-fx="on"] .fx-contrast .art-h3 { margin: 16px 0 8px; line-height: 1.4; }
  [data-fx="on"] .fx-contrast .art-h3:first-child { margin-top: 0; }
  [data-fx="on"] .fx-contrast .art-ol--num,
  [data-fx="on"] .fx-contrast .art-check { margin-bottom: 10px; gap: 6px; }
  [data-fx="on"] .fx-contrast .art-ol--num li,
  [data-fx="on"] .fx-contrast .art-check li { font-size: .8rem; line-height: 1.42; }
  [data-fx="on"] .fx-contrast .art-ol--num li { padding-left: 30px; }
  [data-fx="on"] .fx-contrast .art-ol li::before { width: 20px; height: 20px; font-size: .68rem; top: .1em; }
  [data-fx="on"] .fx-contrast .art-check li::before { top: .55em; }
  /* dontH3 と dontList の間に運ばれる導入文（<p>）も本文スケールのままだと折り返しが
     多く高さを食うため、同じ密なスケールに合わせる */
  [data-fx="on"] .fx-contrast > p { font-size: .8rem !important; line-height: 1.5 !important; margin: 0 0 12px !important; }
}

/* 見せ場D: 料金表「12ヶ月の総額」カウントアップ（js/article-fx.js の scenePriceTable()、
   insight-0yen.html 固有）。.fx-count-stack は実行時に生成する小さな重ね箱で、
   中に本物の<strong>（常に正しい額。opacityで隠すだけ）と装飾カウンタ.fx-count
   （aria-hidden、絶対配置）を重ねる。stack のサイズは中に残った本物の<strong>の
   自然な文字幅がそのまま決めるため、カウントアップ中に数字の桁が増えても
   セル幅がガタつかない（fx-bar の <span>display:inline 事故と同じ「表示方式のズレ」
   に注意し、ここでは絶対配置の基準となる箱を明示的に inline-block にしている）。 */
[data-fx="on"] .fx-count-stack { position: relative; display: inline-block; }
[data-fx="on"] .fx-count { position: absolute; inset: 0; color: var(--accent); font-weight: 700; }

/* 見せ場E: 「不満の理由」ランキングの棒グラフ
   （js/article-fx.js の sceneComplaints()、insight-erabikata.html 固有）。
   sceneChart() 用の .fx-chart/.fx-row/.fx-name/.fx-track/.fx-bar/.fx-val とは
   完全に別立てにするため、クラスは全て専用の fx-cmp- 接頭辞のみを使う。
   1位(1番目の行)だけ .fx-cmp-top で --accent、他3つは既定の --dim のまま
   （dataviz スキルの Emphasis: 1つだけ強調、他はグレー）。
   .fx-cmp-bar は <span>（既定 display:inline）なので、明示的に display:block を
   与えないと width/transform:scaleX() が丸ごと無視され棒が幅0で消える
   （sceneChart の .fx-bar で踏んだ罠と同じ。ここでも同様に明示が必須）。
   初期の非表示状態(scaleX(0))はCSSに書かず、JS側でgsap.setにより設定する
   （CSSで隠すとGSAP不在時に内容が消える経路を作ってしまうため）。 */
[data-fx="on"] .fx-cmp-chart { margin: 0 0 26px; display: grid; gap: 14px; }
[data-fx="on"] .fx-cmp-row {
  display: grid; grid-template-columns: 11.5em 1fr 4.5em; grid-template-areas: "name track val";
  gap: 12px; align-items: center;
}
/* 名前列は11.5em: 最長の項目名「プロジェクト管理の不備」(11文字)が実測147pxで、
   9emだと数px足りず1文字だけ折り返して行内で浮く不具合を実機計測で検出したため、
   1文字も折り返さない幅まで広げてある（white-space指定はせず、幅で解決） */
[data-fx="on"] .fx-cmp-name { grid-area: name; font-size: .84rem; color: var(--muted); }
[data-fx="on"] .fx-cmp-track {
  grid-area: track; display: block; height: 10px; background: var(--bg2);
  border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
}
[data-fx="on"] .fx-cmp-bar {
  display: block; height: 100%; border-radius: 0 6px 6px 0; transform-origin: left center;
  background: var(--dim);
}
[data-fx="on"] .fx-cmp-bar.fx-cmp-top { background: var(--accent); }
[data-fx="on"] .fx-cmp-val {
  grid-area: val; font-size: .84rem; font-weight: 700; color: var(--ink);
  text-align: right; font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  /* 名前(8〜11文字の日本語)がsceneChartの国名より長く、3列横並びのままだと
     320px幅で詰まって折り返す恐れがあるため、名前を単独の行に上げて
     track+valを次の行にする2段構成にする */
  [data-fx="on"] .fx-cmp-row {
    grid-template-columns: 1fr auto; grid-template-areas: "name name" "track val";
    row-gap: 6px; column-gap: 10px;
  }
  [data-fx="on"] .fx-cmp-name { font-size: .78rem; }
  [data-fx="on"] .fx-cmp-val { font-size: .78rem; }
}

/* 見せ場F: 検索10件 → AIが選ぶのは1〜3件
   （js/article-fx.js の sceneFunnel()、insight-ai-search.html 固有・実行時生成・aria-hidden）。
   これは抽象図。バーは検索順位の実データではなく、本文「選ばれるのは1〜3件だけ」
   「存在しないのと同じ」の主張を絵にしたもの。クラスは全て専用の fx-fn- 接頭辞のみ
   新規定義（既存の fx-chart/fx-row/fx-bar や fx-cmp-* とは完全に別立て。既存クラスは
   再定義しない）。
   .fx-fn-bar は <span>（既定 display:inline）なので、明示的に display:block を
   与えないと height/transform:scaleY() が丸ごと無視され棒が高さ0で消える
   （fx-bar / fx-cmp-bar で踏んだ罠と同じ）。初期の非表示状態(scaleY(0))はCSSに
   書かず、JS側でgsap.setにより設定する（CSSで隠すとGSAP不在時に内容が消えるため）。 */
[data-fx="on"] .fx-fn-wrap {
  margin: 0 0 26px; min-height: 40vh; padding: 8px 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
}
[data-fx="on"] .fx-fn-label {
  margin: 0; font-size: .95rem; font-weight: 700; color: var(--ink); text-align: center;
}
[data-fx="on"] .fx-fn-bars { display: flex; align-items: flex-end; justify-content: center; gap: 10px; height: 140px; }
[data-fx="on"] .fx-fn-bar {
  display: block; width: 30px; height: 100%; border-radius: 6px 6px 0 0;
  background: var(--dim); transform-origin: bottom center;
}
@media (max-width: 640px) {
  [data-fx="on"] .fx-fn-bars { gap: 6px; height: 108px; }
  [data-fx="on"] .fx-fn-bar { width: 20px; border-radius: 4px 4px 0 0; }
  [data-fx="on"] .fx-fn-label { font-size: .84rem; }
}