/* ============================================================
   BoostX Top Page — Premium Redesign (2026-05-24)
   ============================================================ */
/* CODEX指摘 (2026-05-28): box-sizing だけ安全に適用
   ※ margin/padding のuniversalリセットは削除 (テーマヘッダー干渉の真因対応)
   個別CSSで margin/padding を制御している前提で box-sizing のみ */
body.home main *, body.home main *::before, body.home main *::after,
body.home article *, body.home article *::before, body.home article *::after,
body.home .hero, body.home .hero *,
body.home .story, body.home .story *,
body.home .why, body.home .why *,
body.home .listen-deep, body.home .listen-deep *,
body.home .approach, body.home .approach *,
body.home .services, body.home .services *,
body.home .case-studies, body.home .case-studies *,
body.home .embed-section, body.home .embed-section *,
body.home .tech, body.home .tech *,
body.home .blog, body.home .blog *,
body.home .faq-v2, body.home .faq-v2 *,
body.home .final-cta-v2, body.home .final-cta-v2 *,
body.home .float-cta, body.home .float-cta *,
body.page-front-page main *, body.page-front-page .hero, body.page-front-page .hero *,
body.page-front-page .story, body.page-front-page .story *,
body.page-front-page .faq-v2, body.page-front-page .faq-v2 *,
body.page-front-page .final-cta-v2, body.page-front-page .final-cta-v2 * {
  box-sizing: border-box;
}
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.home, body.page-front-page {
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', system-ui, sans-serif;
  font-feature-settings: "palt", "kern";
  color: #0e1730;
  line-height: 1.8;
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* テーマヘッダー(nav.nav-glass)・フッターに干渉しないよう main/section/article/aside 配下に限定
   2026-05-28 真因対応: body.home img の height:auto が Tailwind .h-10 を上書きして
   カスタムロゴが原寸表示→右のCTAボタンを押しつぶして「相談」縦割れ事故 */
body.home main img, body.home section img, body.home article img, body.home aside img,
body.page-front-page main img, body.page-front-page section img,
body.page-front-page article img, body.page-front-page aside img {
  max-width: 100%; height: auto; display: block;
}
body.home main a, body.home section a, body.home article a, body.home aside a,
body.page-front-page main a, body.page-front-page section a,
body.page-front-page article a, body.page-front-page aside a {
  color: inherit; text-decoration: none;
}
body.home main button, body.home section button, body.home article button, body.home aside button,
body.page-front-page main button, body.page-front-page section button,
body.page-front-page article button, body.page-front-page aside button {
  font-family: inherit; cursor: pointer; border: none; background: none;
}

:root {
  /* BoostX 公式ブランドカラー */
  --navy-900: #0B1524;
  --navy-800: #142036;
  --navy-700: #1B2A45;
  --navy-600: #243456;
  --navy-500: #3F4A60;
  --brand-700: #163E9C;
  --brand-600: #1E4FC7;
  --brand-500: #2660DB;
  --brand-400: #5C82E8;
  --brand-100: #DBE6FB;
  --brand-50: #EFF5FF;
  --gray-50: #FAFAFC;
  --gray-100: #F0F2F6;
  --gray-150: #E8ECF2;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DE;
  --gray-400: #9AA4B5;
  --gray-500: #6B7385;
  --gray-600: #5C667A;
  --gray-700: #3F4A60;
  --green-500: #10b981;
  --green-100: #d1fae5;
  --orange-500: #f59e0b;
  /* --ink-* alias (CODEX指摘の未定義参照を解消 2026-05-28) */
  --ink-100: var(--gray-100);
  --ink-200: var(--gray-200);
  --ink-300: var(--gray-300);
  --ink-400: var(--gray-400);
  --ink-500: var(--gray-500);
  --ink-600: var(--gray-600);
  --ink-700: var(--gray-700);
  --container: 1240px;
  --eng: 'Inter', sans-serif;
  --display: 'Manrope', 'Inter', sans-serif;
}

/* .container は body.home/.page-front-page スコープで限定
   (テーマヘッダー・フッター内の .container に干渉しないため - 2026-05-28 真因対応) */
body.home .container,
body.page-front-page .container { max-width: var(--container); margin: 0 auto; padding: 0 40px; }
.eng { font-family: var(--eng); }

/* ============================================================
   MOBILE QUICK SERVICES (2026-05-29 CODEX指摘:スマホCV短縮)
   PCでは display:none で完全非表示・モバイルだけで4サービス+価格+相談CTA
   ============================================================ */
.mqs { display: none; }
@media (max-width: 768px) {
  body.home .mqs, body.page-front-page .mqs {
    display: block !important;
    padding: 36px 0 28px;
    background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
    border-top: 1px solid rgba(30,79,199,0.08);
  }
  body.home .mqs .container,
  body.page-front-page .mqs .container {
    padding: 0 18px;
  }
  body.home .mqs-eyebrow,
  body.page-front-page .mqs-eyebrow {
    font-family: var(--eng);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: var(--brand-600);
    text-transform: uppercase;
    margin-bottom: 8px;
    text-align: center;
  }
  body.home .mqs-headline,
  body.page-front-page .mqs-headline {
    font-family: var(--display);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.45;
    color: var(--navy-900);
    margin: 0 0 22px;
    letter-spacing: -0.01em;
    text-align: center;
  }
  body.home .mqs-list,
  body.page-front-page .mqs-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
  }
  body.home .mqs-item,
  body.page-front-page .mqs-item {
    background: #ffffff;
    border: 1px solid rgba(11,21,36,0.08);
    border-radius: 14px;
    padding: 14px 12px 12px;
    box-shadow: 0 2px 8px -2px rgba(11,21,36,0.04);
    display: flex; flex-direction: column;
    position: relative;
  }
  body.home .mqs-tag,
  body.page-front-page .mqs-tag {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--brand-700);
    background: rgba(30,79,199,0.08);
    border: 1px solid rgba(30,79,199,0.14);
    padding: 2px 7px;
    border-radius: 999px;
    align-self: flex-start;
    margin-bottom: 6px;
  }
  body.home .mqs-name,
  body.page-front-page .mqs-name {
    font-family: var(--display);
    font-size: 13.5px;
    font-weight: 800;
    color: var(--navy-900);
    margin: 0 0 4px;
    line-height: 1.3;
    letter-spacing: -0.005em;
  }
  body.home .mqs-price,
  body.page-front-page .mqs-price {
    font-size: 11.5px;
    color: var(--gray-600);
    margin: 0 0 6px;
    font-weight: 500;
  }
  body.home .mqs-price strong,
  body.page-front-page .mqs-price strong {
    color: var(--brand-700);
    font-weight: 800;
  }
  body.home .mqs-desc,
  body.page-front-page .mqs-desc {
    font-size: 10.5px;
    line-height: 1.6;
    color: var(--gray-600);
    margin: 0;
  }
  body.home .mqs-cta-row,
  body.page-front-page .mqs-cta-row {
    display: flex; flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
  }
  body.home .mqs-cta-primary,
  body.page-front-page .mqs-cta-primary {
    display: flex; align-items: center; justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #2660DB 0%, #1E4FC7 100%) !important;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 800;
    padding: 14px 16px;
    border-radius: 12px;
    text-decoration: none !important;
    box-shadow: 0 10px 24px -8px rgba(30,79,199,0.45);
    letter-spacing: 0.005em;
  }
  body.home .mqs-cta-primary svg,
  body.page-front-page .mqs-cta-primary svg {
    width: 14px; height: 14px;
    color: #ffffff !important; stroke: #ffffff !important;
  }
  body.home .mqs-cta-secondary,
  body.page-front-page .mqs-cta-secondary {
    display: flex; align-items: center; justify-content: center;
    background: #ffffff !important;
    color: var(--navy-900) !important;
    font-size: 13px;
    font-weight: 700;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1.5px solid rgba(11,21,36,0.10);
    text-decoration: none !important;
  }
  body.home .mqs-trust,
  body.page-front-page .mqs-trust {
    font-size: 10.5px;
    color: var(--gray-600);
    text-align: center;
    margin: 0;
    line-height: 1.65;
    letter-spacing: 0.005em;
  }
}

/* ============================================================
   MOBILE QUICK SERVICES (2026-05-29 復活: スマホCV短縮)
   PCでは display:none で完全非表示・モバイルだけで4商品+価格+相談CTA
   ============================================================ */
.mqs { display: none; }
@media (max-width: 768px) {
  body.home .mqs, body.page-front-page .mqs {
    display: block !important;
    padding: 36px 0 28px;
    background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
    border-top: 1px solid rgba(30,79,199,0.08);
  }
  body.home .mqs .container,
  body.page-front-page .mqs .container {
    padding: 0 18px;
  }
  body.home .mqs-eyebrow,
  body.page-front-page .mqs-eyebrow {
    font-family: var(--eng);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: var(--brand-600);
    text-transform: uppercase;
    margin-bottom: 8px;
    text-align: center;
  }
  body.home .mqs-headline,
  body.page-front-page .mqs-headline {
    font-family: var(--display);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.45;
    color: var(--navy-900);
    margin: 0 0 22px;
    letter-spacing: -0.01em;
    text-align: center;
  }
  body.home .mqs-list,
  body.page-front-page .mqs-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
  }
  body.home .mqs-item,
  body.page-front-page .mqs-item {
    background: #ffffff;
    border: 1px solid rgba(11,21,36,0.08);
    border-radius: 14px;
    padding: 14px 12px 12px;
    box-shadow: 0 2px 8px -2px rgba(11,21,36,0.04);
    display: flex; flex-direction: column;
    position: relative;
  }
  body.home .mqs-tag,
  body.page-front-page .mqs-tag {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--brand-700);
    background: rgba(30,79,199,0.08);
    border: 1px solid rgba(30,79,199,0.14);
    padding: 2px 7px;
    border-radius: 999px;
    align-self: flex-start;
    margin-bottom: 6px;
  }
  body.home .mqs-name,
  body.page-front-page .mqs-name {
    font-family: var(--display);
    font-size: 13.5px;
    font-weight: 800;
    color: var(--navy-900);
    margin: 0 0 4px;
    line-height: 1.3;
    letter-spacing: -0.005em;
  }
  body.home .mqs-price,
  body.page-front-page .mqs-price {
    font-size: 11.5px;
    color: var(--gray-600);
    margin: 0 0 6px;
    font-weight: 500;
  }
  body.home .mqs-price strong,
  body.page-front-page .mqs-price strong {
    color: var(--brand-700);
    font-weight: 800;
  }
  body.home .mqs-desc,
  body.page-front-page .mqs-desc {
    font-size: 10.5px;
    line-height: 1.6;
    color: var(--gray-600);
    margin: 0;
  }
  body.home .mqs-cta-row,
  body.page-front-page .mqs-cta-row {
    display: flex; flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
  }
  body.home .mqs-cta-primary,
  body.page-front-page .mqs-cta-primary {
    display: flex; align-items: center; justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #2660DB 0%, #1E4FC7 100%) !important;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 800;
    padding: 14px 16px;
    border-radius: 12px;
    text-decoration: none !important;
    box-shadow: 0 10px 24px -8px rgba(30,79,199,0.45);
    letter-spacing: 0.005em;
  }
  body.home .mqs-cta-primary svg,
  body.page-front-page .mqs-cta-primary svg {
    width: 14px; height: 14px;
    color: #ffffff !important; stroke: #ffffff !important;
  }
  body.home .mqs-cta-secondary,
  body.page-front-page .mqs-cta-secondary {
    display: flex; align-items: center; justify-content: center;
    background: #ffffff !important;
    color: var(--navy-900) !important;
    font-size: 13px;
    font-weight: 700;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1.5px solid rgba(11,21,36,0.10);
    text-decoration: none !important;
  }
  body.home .mqs-trust,
  body.page-front-page .mqs-trust {
    font-size: 10.5px;
    color: var(--gray-600);
    text-align: center;
    margin: 0;
    line-height: 1.65;
    letter-spacing: 0.005em;
  }
}

/* ============================================================
   HERO + STORY アニメーション強化 (2026-05-29)
   - 早スクロール耐性: transition短め (0.45s) + ease-out で気持ち良い入場
   - HERO: タイトル/サブ/CTA のスタガード入場、AI文字グラデのフロー強化
   - STORY: 章番号の発光、is-visibleで即フェードイン+スライドアップ
   ============================================================ */

/* HEROのタイトル「業務と意思決定を、AIで再設計する」をより派手に */
body.home .hero-title-mega,
body.page-front-page .hero-title-mega {
  animation: bxHeroTitleEntry 0.9s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes bxHeroTitleEntry {
  0%   { opacity: 0; transform: translateY(28px) scale(0.98); filter: blur(6px); }
  60%  { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* HEROのオーバーライン「外注ではなく、御社の専属チームで。」 */
body.home .hero-overline,
body.page-front-page .hero-overline {
  animation: bxHeroOverlineEntry 0.7s cubic-bezier(.2,.7,.2,1) 0.15s both;
}
@keyframes bxHeroOverlineEntry {
  0%   { opacity: 0; transform: translateX(-12px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* HEROの説明文 */
body.home .hero-desc,
body.page-front-page .hero-desc {
  animation: bxHeroDescEntry 0.85s cubic-bezier(.2,.7,.2,1) 0.55s both;
}
@keyframes bxHeroDescEntry {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* HEROのCTAボタン2つを順次出現 */
body.home .hero-actions,
body.page-front-page .hero-actions {
  animation: bxHeroActionsEntry 0.85s cubic-bezier(.2,.7,.2,1) 0.85s both;
}
@keyframes bxHeroActionsEntry {
  0%   { opacity: 0; transform: translateY(18px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* AI のグラデを少し速く流す (HEROの目に入る派手さアップ) */
body.home .accent-grad,
body.page-front-page .accent-grad {
  animation: bxAccentGradFlow 4.5s ease-in-out infinite !important;
}
@keyframes bxAccentGradFlow {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* HEROのダッシュボードに浮遊+傾き呼吸を追加 (早スクロールでも保持) */
body.home .dash-wrap,
body.page-front-page .dash-wrap {
  animation: bxDashEntry 1.1s cubic-bezier(.2,.7,.2,1) 0.4s both,
             bxDashBreathe 8s ease-in-out 1.5s infinite alternate;
}
@keyframes bxDashEntry {
  0%   { opacity: 0; transform: translateY(40px) perspective(1400px) rotateY(-6deg); }
  100% { opacity: 1; transform: translateY(0) perspective(1400px) rotateY(-2deg); }
}
@keyframes bxDashBreathe {
  0%   { transform: perspective(1400px) rotateY(-2deg) translateY(0); }
  100% { transform: perspective(1400px) rotateY(-2.6deg) translateY(-10px); }
}

/* STORY章 .schap の入場アニメ強化 (is-visible切替で即発火) */
body.home .story .schap,
body.page-front-page .story .schap {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.55s cubic-bezier(.2,.7,.2,1),
              transform 0.55s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
body.home .story .schap.is-visible,
body.page-front-page .story .schap.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* schap-active (現在の章) に発光リング */
body.home .story .schap.schap-active .schap-num,
body.page-front-page .story .schap.schap-active .schap-num {
  animation: bxSchapNumGlow 2.6s ease-in-out infinite alternate;
}
@keyframes bxSchapNumGlow {
  0%   { text-shadow: 0 0 0 rgba(30,79,199,0); filter: drop-shadow(0 0 0 rgba(30,79,199,0)); }
  100% { text-shadow: 0 8px 28px rgba(30,79,199,0.18); filter: drop-shadow(0 0 16px rgba(30,79,199,0.30)); }
}

/* STORYレールの塗り (rail-fillが存在する場合) */
body.home .story .schap-rail-fill,
body.page-front-page .story .schap-rail-fill {
  transition: height 0.7s cubic-bezier(.2,.7,.2,1);
}

/* .reveal の入場をきれいに統一 */
body.home .reveal,
body.page-front-page .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(.2,.7,.2,1),
              transform 0.65s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
body.home .reveal.in,
body.page-front-page .reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* reduced-motion 対応 (アクセシビリティ) */
@media (prefers-reduced-motion: reduce) {
  body.home .hero-title-mega,
  body.home .hero-overline,
  body.home .hero-desc,
  body.home .hero-actions,
  body.home .dash-wrap,
  body.home .accent-grad,
  body.home .story .schap,
  body.home .story .schap.schap-active .schap-num,
  body.home .reveal,
  body.page-front-page .hero-title-mega,
  body.page-front-page .hero-overline,
  body.page-front-page .hero-desc,
  body.page-front-page .hero-actions,
  body.page-front-page .dash-wrap,
  body.page-front-page .accent-grad,
  body.page-front-page .story .schap,
  body.page-front-page .story .schap.schap-active .schap-num,
  body.page-front-page .reveal {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ========== HEADER (front-page専用スコープ化 CODEX指摘 2026-05-28)
   テーマ既存ヘッダーと衝突しないよう body.home/.page-front-page 配下に限定 */
body.home .site-header,
body.page-front-page .site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid rgba(14,23,48,0.06);
}
body.home .nav-wrap,
body.page-front-page .nav-wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 48px;
  max-width: 1500px; margin: 0 auto;
}
/* .logo / .logo-mark は body.home スコープで限定
   (テーマヘッダー内の .logo に干渉しないため - 2026-05-28 真因対応) */
body.home .logo,
body.page-front-page .logo {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--display);
  font-weight: 800; font-size: 23px; color: var(--navy-900);
  letter-spacing: -0.025em;
}
body.home .logo-mark,
body.page-front-page .logo-mark {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
body.home .logo-mark svg,
body.page-front-page .logo-mark svg { width: 100%; height: 100%; }
/* .nav-main / .btn-primary-sm / .arrow-r は body.home スコープで限定
   (テーマヘッダーのナビゲーション/ボタンに干渉しないため - 2026-05-28 真因対応) */
body.home .nav-main,
body.page-front-page .nav-main {
  display: flex; align-items: center; gap: 44px;
}
body.home .nav-main a,
body.page-front-page .nav-main a {
  font-size: 14.5px; font-weight: 500; color: var(--navy-800);
  transition: color 0.2s;
  position: relative;
}
body.home .nav-main a::after,
body.page-front-page .nav-main a::after {
  content: ""; position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%);
  width: 0; height: 2px; background: var(--brand-600); transition: width 0.25s;
}
body.home .nav-main a:hover,
body.page-front-page .nav-main a:hover { color: var(--brand-600); }
body.home .nav-main a:hover::after,
body.page-front-page .nav-main a:hover::after { width: 24px; }

body.home .btn-primary-sm,
body.page-front-page .btn-primary-sm {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--brand-600); color: #fff;
  padding: 13px 24px; border-radius: 6px;
  font-size: 14px; font-weight: 600;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 10px rgba(26,92,240,0.2);
}
body.home .btn-primary-sm:hover,
body.page-front-page .btn-primary-sm:hover { background: var(--brand-500); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(26,92,240,0.32); }
body.home .arrow-r,
body.page-front-page .arrow-r { width: 14px; height: 14px; flex-shrink: 0; }

/* ========== HERO — Competitive Premium Top ========== */
.hero {
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(30,79,199,0.18), transparent 55%),
    radial-gradient(ellipse 70% 50% at 0% 100%, rgba(92,130,232,0.12), transparent 60%),
    linear-gradient(180deg, #f0f5fd 0%, #e2eaf7 60%, #d8e2f2 100%);
  padding: 88px 0 110px;
  position: relative; overflow: hidden;
  min-height: 840px;
}
/* 背景画像（エディトリアル風・SVG ネットワークアート） */
.hero-bg-image {
  position: absolute; inset: 0;
  /* Hero背景: 神経網風グラデ (SVG ファイル不要・インラインdata URI で配信安定化) */
  background-image:
    radial-gradient(ellipse 70% 50% at 80% 20%, rgba(92,130,232,0.25), transparent 60%),
    radial-gradient(ellipse 50% 40% at 20% 80%, rgba(30,79,199,0.18), transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(124,160,240,0.10), transparent 70%),
    linear-gradient(135deg, #f4f8ff 0%, #ffffff 50%, #eef3fb 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  /* ゆっくり横スライド呼吸 */
  animation: heroBgDrift 36s ease-in-out infinite alternate;
  opacity: 0;
  animation: heroBgFadeIn 1.6s ease-out 0.05s forwards, heroBgDrift 36s ease-in-out 1.6s infinite alternate;
}
.hero-bg-image::after {
  content: "";
  position: absolute; inset: 0;
  background:
    /* 左側のテキスト領域だけ少し明るく上げて可読性確保 */
    linear-gradient(90deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.20) 38%, transparent 70%),
    linear-gradient(180deg, transparent 0%, transparent 60%, rgba(255,255,255,0.25) 100%);
  pointer-events: none;
}
@keyframes heroBgFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes heroBgDrift {
  0%   { background-position: 50% 50%; transform: scale(1.00); }
  50%  { background-position: 52% 48%; transform: scale(1.015); }
  100% { background-position: 50% 52%; transform: scale(1.00); }
}
/* ===== HERO 背景アニメ強化 — orb + drifting光 + うっすらガイド線 ===== */
.hero-ambient {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
/* 大きな青い光球が右上から左下へゆっくり旋回 */
.hero-ambient::before {
  content: "";
  position: absolute;
  top: -20%; right: -10%;
  width: 720px; height: 720px;
  background: radial-gradient(circle,
    rgba(92,130,232,0.32) 0%,
    rgba(30,79,199,0.16) 35%,
    rgba(30,79,199,0) 70%);
  border-radius: 50%;
  filter: blur(8px);
  animation: heroOrbSwirl 28s ease-in-out infinite alternate;
  will-change: transform;
}
.hero-ambient::after {
  content: "";
  position: absolute;
  bottom: -25%; left: -8%;
  width: 640px; height: 640px;
  background: radial-gradient(circle,
    rgba(38,96,219,0.20) 0%,
    rgba(124,160,240,0.10) 40%,
    rgba(124,160,240,0) 70%);
  border-radius: 50%;
  filter: blur(8px);
  animation: heroOrbSwirl2 32s ease-in-out infinite alternate;
  animation-delay: -8s;
  will-change: transform;
}
@keyframes heroOrbSwirl {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-80px, 60px) scale(1.08); }
  100% { transform: translate(40px, 120px) scale(0.96); }
}
@keyframes heroOrbSwirl2 {
  0%   { transform: translate(0, 0) scale(0.95); }
  50%  { transform: translate(100px, -80px) scale(1.1); }
  100% { transform: translate(-30px, -40px) scale(1); }
}
/* 横切る光ストリーク（離散的な閃光） */
.hero-streak {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: hidden;
}
.hero-streak::before,
.hero-streak::after {
  content: "";
  position: absolute;
  width: 240px; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(30,79,199,0.45) 50%,
    transparent 100%);
  filter: blur(0.5px);
  opacity: 0;
}
.hero-streak::before {
  top: 28%; left: -240px;
  animation: heroStreakLR 9s ease-in 2s infinite;
}
.hero-streak::after {
  top: 62%; left: -240px;
  width: 320px;
  animation: heroStreakLR 11s ease-in 5s infinite;
}
@keyframes heroStreakLR {
  0%   { left: -240px; opacity: 0; }
  10%  { opacity: 0.9; }
  85%  { opacity: 0.6; }
  100% { left: calc(100% + 240px); opacity: 0; }
}
/* グリッド微粒子（深度感） */
.hero-dust {
  position: absolute; inset: 0;
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(30,79,199,0.32), transparent 60%),
    radial-gradient(1px 1px at 78% 32%, rgba(92,130,232,0.40), transparent 60%),
    radial-gradient(1.4px 1.4px at 42% 64%, rgba(30,79,199,0.28), transparent 60%),
    radial-gradient(1px 1px at 88% 78%, rgba(124,160,240,0.36), transparent 60%),
    radial-gradient(1px 1px at 22% 86%, rgba(30,79,199,0.32), transparent 60%);
  pointer-events: none;
  animation: heroDustTwinkle 4.2s ease-in-out infinite;
}
@keyframes heroDustTwinkle {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.9; }
}

/* ライブ稼働チップ */
.hero-live-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 12px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  font-size: 12px; font-weight: 700;
  color: var(--navy-900);
  box-shadow: 0 4px 14px -4px rgba(11,21,36,0.08);
  margin-bottom: 22px;
}
.hero-live-chip-dot {
  width: 8px; height: 8px;
  background: var(--brand-600);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(239,68,68,0.7);
  animation: pulseDot 2s infinite;
}
.hero-live-chip-count {
  font-family: var(--eng);
  color: var(--brand-600);
  font-weight: 800;
}
/* Hero Identity Chip — 会社カテゴリ識別 */
.hero-identity {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 16px 8px 8px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  box-shadow: 0 6px 18px -8px rgba(11,21,36,0.10);
  margin-bottom: 22px;
}
.hero-identity-mark {
  width: 26px; height: 26px;
  background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-400) 100%);
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-family: var(--eng);
  font-size: 10px; font-weight: 900;
  letter-spacing: -0.02em;
}
.hero-identity-text {
  font-size: 12.5px; font-weight: 800;
  color: var(--navy-900);
  letter-spacing: 0.02em;
}
.hero-identity-divider {
  width: 1px; height: 14px;
  background: var(--gray-300);
}
.hero-identity-loc {
  font-family: var(--eng);
  font-size: 10.5px; font-weight: 700;
  color: var(--gray-500);
  letter-spacing: 0.12em;
}

/* Killer overline — フック */
.hero-overline {
  font-size: 16px; font-weight: 700;
  color: var(--gray-600);
  letter-spacing: -0.005em;
  margin-bottom: 14px;
  position: relative;
  padding-left: 22px;
}
.hero-overline::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 14px; height: 2px;
  background: var(--brand-600);
  transform: translateY(-50%);
}

/* 巨大タイトル＋グラデ（エディトリアル風） */
.hero-title-mega {
  font-size: 84px; font-weight: 900;
  line-height: 1.12; letter-spacing: -0.045em;
  color: var(--navy-900);
  margin-bottom: 30px;
}

/* 3つの強みチップ */
.hero-strength {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 28px 0 32px;
}
.hero-strength-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: rgba(30,79,199,0.06);
  border: 1px solid rgba(30,79,199,0.15);
  border-radius: 999px;
  font-size: 13px; font-weight: 700;
  color: var(--navy-900);
  letter-spacing: -0.005em;
  transition: transform 0.25s, background 0.25s, border-color 0.25s;
}
.hero-strength-item:hover {
  background: rgba(30,79,199,0.12);
  border-color: rgba(30,79,199,0.3);
  transform: translateY(-2px);
}
.hero-strength-item svg {
  width: 14px; height: 14px;
  color: var(--brand-600);
  flex-shrink: 0;
}
.hero-desc strong {
  color: var(--navy-900);
  font-weight: 800;
  background: linear-gradient(180deg, transparent 60%, rgba(30,79,199,0.15) 60%);
  padding: 0 3px;
}
.hero-title-mega .hero-title-line { display: block; white-space: nowrap; }
.accent-grad {
  background: linear-gradient(135deg, #2660DB 0%, #5C82E8 60%, #7CA0F0 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.05em;
}
.hero-title-mega .nowrap { display: inline-block; }
/* テック信頼バー */
.hero-tech-trust {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(11,21,36,0.08);
  display: flex; align-items: center; gap: 24px;
  flex-wrap: wrap;
}
.hero-tech-trust-label {
  font-family: var(--eng);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gray-500);
}
.hero-tech-trust-logos {
  display: flex; align-items: center; gap: 18px;
  opacity: 0.85;
}
.hero-tech-trust-logos { gap: 26px; align-items: center; }
.hero-tech-trust-logos svg { height: 22px; width: auto; }
.hero-tech-trust-logos .htl {
  height: 22px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
  display: block;
  opacity: 0.92;
  filter: grayscale(0%) brightness(0.95);
}
.hero-tech-trust-logos .htl.htl-wide { height: 18px; max-width: 95px; }
.hero-tech-trust-logos .htl.htl-extra-wide { height: 14px; max-width: 130px; }
/* フローティングミニカード（dashboard周りに浮かせる） */
.dash-float-card {
  position: absolute;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 24px 48px -16px rgba(11,21,36,0.28), 0 0 0 1px rgba(11,21,36,0.04);
  padding: 14px 16px;
  z-index: 3;
  animation: floatCard 6s ease-in-out infinite;
}
@keyframes floatCard {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.dash-float-pdf {
  top: -28px; left: -36px;
  width: 180px;
  background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
  color: #fff;
  padding: 16px 18px;
  animation-delay: -2s;
}
.dash-float-pdf-tag {
  font-family: var(--eng);
  font-size: 9px; font-weight: 700; letter-spacing: 0.18em;
  color: var(--brand-400);
  margin-bottom: 6px;
}
.dash-float-pdf-title {
  font-size: 12px; font-weight: 800;
  line-height: 1.4;
  margin-bottom: 8px;
}
.dash-float-pdf-meta {
  font-size: 9.5px; color: rgba(255,255,255,0.6);
  font-weight: 600;
}
.dash-float-pdf-icon {
  position: absolute; top: -10px; right: -10px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--brand-600);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 16px -4px rgba(30,79,199,0.5);
}
.dash-float-pdf-icon svg { width: 14px; height: 14px; }
.dash-float-flow {
  bottom: -24px; right: -32px;
  width: 220px;
  animation-delay: -4s;
}
.dash-float-flow-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.dash-float-flow-dot {
  width: 6px; height: 6px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(16,185,129,0.18);
}
.dash-float-flow-title {
  font-size: 10.5px; font-weight: 800;
  color: var(--navy-900);
}
.dash-float-flow-steps {
  display: flex; align-items: center; gap: 4px;
  margin-bottom: 8px;
}
.dash-float-flow-step {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: var(--brand-100);
}
.dash-float-flow-step.done { background: linear-gradient(90deg, var(--brand-600), var(--brand-400)); }
.dash-float-flow-meta {
  font-size: 9px; color: var(--gray-500);
  font-weight: 600;
  display: flex; justify-content: space-between;
}
.dash-float-meta {
  top: 30%; right: -52px;
  width: 156px;
  animation-delay: -3s;
}
.dash-float-meta-label {
  font-size: 9.5px; color: var(--gray-500);
  font-weight: 600; margin-bottom: 4px;
}
.dash-float-meta-value {
  font-family: var(--eng);
  font-size: 22px; font-weight: 900;
  color: var(--navy-900);
  letter-spacing: -0.03em;
  line-height: 1;
}
.dash-float-meta-bar {
  height: 4px; background: var(--gray-100); border-radius: 2px;
  margin-top: 8px; overflow: hidden;
}
.dash-float-meta-bar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--brand-600), var(--brand-400));
  width: 92%;
  border-radius: 2px;
}
/* メッシュグラデオーバーレイ */
.hero-mesh {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 25% 18%, rgba(30,79,199,0.12) 0%, transparent 45%),
    radial-gradient(circle at 80% 30%, rgba(92,130,232,0.18) 0%, transparent 50%),
    radial-gradient(circle at 60% 90%, rgba(38,96,219,0.10) 0%, transparent 55%);
  pointer-events: none;
  filter: blur(40px);
}
/* 微細グリッド */
.hero-grid-pattern {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(11,21,36,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,21,36,0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  pointer-events: none;
}
/* 装飾オーブ */
.hero-orb-1 {
  position: absolute; top: -200px; right: -160px;
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(92,130,232,0.20) 0%, transparent 60%);
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  animation: floatOrb 14s ease-in-out infinite alternate;
}
.hero-orb-2 {
  position: absolute; bottom: -160px; left: -120px;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(30,79,199,0.14) 0%, transparent 60%);
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  animation: floatOrb 18s ease-in-out infinite alternate-reverse;
}
@keyframes floatOrb {
  0% { transform: translate(0,0); }
  100% { transform: translate(30px, -20px); }
}
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: 64px; align-items: center;
  max-width: 1320px; margin: 0 auto; padding: 0 56px;
  position: relative; z-index: 2;
}
/* ダッシュボード — テキスト列との視覚バランス重視のコンパクト版 */
.dash-wrap {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.dash-wrap .dash {
  transform: rotateY(-2deg) rotateX(2deg) scale(0.72) !important;
  transform-origin: center right !important;
}
.dash-wrap .dash:hover {
  transform: rotateY(0deg) rotateX(0deg) scale(0.76) !important;
}
.dash-floats { display: none !important; }
.dash-scan { display: none !important; }
.dash-wrap {
  animation: heroDashEntry 1.25s cubic-bezier(0.22, 0.61, 0.36, 1) 0.42s forwards !important;
}
/* 信頼バー */
.hero-trust {
  margin-top: 40px;
  display: flex; align-items: center; gap: 22px;
  flex-wrap: wrap;
}
.hero-trust-label {
  font-family: var(--eng);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gray-500);
}
.hero-trust-items {
  display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap;
}
.hero-trust-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--gray-700); font-weight: 600;
}
.hero-trust-item svg { width: 14px; height: 14px; color: var(--brand-600); }
.hero-eyebrow {
  font-family: var(--eng);
  font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--brand-600);
  margin-bottom: 28px;
  display: inline-flex; align-items: center; gap: 12px;
}
.hero-eyebrow::before {
  content: ""; width: 28px; height: 1.5px; background: var(--brand-600);
}
.hero-title {
  font-size: 62px; font-weight: 800;
  line-height: 1.28; letter-spacing: -0.025em;
  color: var(--navy-900);
  margin-bottom: 32px;
}
.hero-title .accent { color: var(--brand-600); }
.hero-desc {
  font-size: 16px; line-height: 2.0;
  color: var(--gray-600);
  margin-bottom: 42px;
  max-width: 500px;
  font-weight: 500;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: nowrap; align-items: center; }
.hero-actions .btn-primary, .hero-actions .btn-outline { padding: 16px 22px; font-size: 14px; white-space: nowrap; }
.btn-primary {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--brand-600) !important; color: #ffffff !important;
  padding: 19px 38px; border-radius: 10px;
  font-size: 15px; font-weight: 700;
  letter-spacing: 0.02em;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 6px 18px rgba(26,92,240,0.28);
}
.btn-primary:hover { background: var(--brand-500) !important; color: #ffffff !important; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(26,92,240,0.36); }
.btn-primary svg { color: #ffffff !important; stroke: #ffffff !important; }
.btn-outline {
  display: inline-flex; align-items: center; gap: 12px;
  background: #ffffff !important; color: var(--navy-900) !important;
  padding: 19px 38px; border-radius: 10px;
  font-size: 15px; font-weight: 700;
  border: 1.5px solid var(--gray-200);
  transition: border-color 0.2s, transform 0.2s;
}
.btn-outline:hover { border-color: var(--navy-900); color: var(--navy-900) !important; transform: translateY(-2px); }
.btn-outline svg { color: var(--navy-900) !important; stroke: var(--navy-900) !important; }

/* ========== DASHBOARD MOCKUP — Premium 3D look ========== */
.dash-wrap {
  position: relative;
  perspective: 1800px;
}
.dash-wrap::before {
  content: "";
  position: absolute; inset: -40px -30px -30px -40px;
  background:
    radial-gradient(circle at 30% 20%, rgba(30,79,199,0.16), transparent 60%),
    radial-gradient(circle at 70% 80%, rgba(92,130,232,0.10), transparent 60%);
  filter: blur(40px);
  z-index: -1;
}
.dash {
  background: #fff;
  border-radius: 20px;
  box-shadow:
    0 60px 120px -24px rgba(11,21,36,0.32),
    0 32px 64px -20px rgba(30,79,199,0.18),
    0 12px 28px -10px rgba(11,21,36,0.10),
    0 0 0 1px rgba(30,79,199,0.06),
    inset 0 1px 0 rgba(255,255,255,1);
  overflow: hidden;
  display: grid; grid-template-columns: 190px 1fr;
  font-size: 11.5px;
  position: relative;
  transform: rotateY(-2deg) rotateX(2deg);
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1);
}
.dash:hover { transform: rotateY(0deg) rotateX(0deg); }
.dash::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85), transparent);
  pointer-events: none;
  z-index: 5;
}
/* タイトルバー（ブラウザ風・プレミアム化） */
.dash-titlebar {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px;
  background: linear-gradient(180deg, #fafbfd 0%, #f3f6fc 100%);
  border-bottom: 1px solid rgba(11,21,36,0.06);
  position: relative;
}
.dash-titlebar::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(30,79,199,0.12), transparent);
}
.dash-dots { display: flex; gap: 5px; }
.dash-dots span {
  width: 9px; height: 9px; border-radius: 50%;
  background: #e3e6eb;
}
.dash-dots span:nth-child(1) { background: #ff5f57; }
.dash-dots span:nth-child(2) { background: #ffbd2e; }
.dash-dots span:nth-child(3) { background: #28c940; }
.dash-url {
  flex: 1;
  background: #fff;
  border: 1px solid var(--gray-100);
  border-radius: 5px;
  padding: 4px 12px;
  font-family: var(--eng);
  font-size: 10px; color: var(--gray-500);
  display: flex; align-items: center; gap: 6px;
}
.dash-url::before {
  content: "🔒"; font-size: 8px;
  filter: grayscale(1);
}
.dash-url-text { color: var(--gray-700); font-weight: 500; }
.dash-url-text strong { color: var(--brand-600); font-weight: 700; }
.dash-side {
  background: #f7f9fc;
  padding: 18px 12px;
  border-right: 1px solid var(--gray-100);
}
.dash-brand {
  display: flex; align-items: center; gap: 8px;
  padding: 0 8px 16px;
  border-bottom: 1px solid var(--gray-150);
  margin-bottom: 14px;
}
.dash-brand-mark {
  width: 16px; height: 16px;
  background: linear-gradient(135deg, #2670ff, #0b3fb4);
  border-radius: 4px;
  flex-shrink: 0;
  position: relative;
}
.dash-brand-mark::after {
  content: ""; position: absolute; inset: 3px;
  background: linear-gradient(135deg, transparent 35%, rgba(255,255,255,0.4) 50%, transparent 65%);
}
.dash-brand-text {
  font-family: var(--eng);
  font-size: 9.5px; font-weight: 700; color: var(--navy-900);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.dash-brand-text .sub { display: block; font-size: 8px; font-weight: 500; color: var(--gray-500); margin-top: 1px; letter-spacing: 0; }
.dash-nav { display: flex; flex-direction: column; gap: 2px; }
.dash-nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8.5px 10px; border-radius: 5px;
  color: var(--gray-600); font-size: 11px; font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.dash-nav-item:hover { background: rgba(0,0,0,0.025); }
.dash-nav-item.active {
  background: #fff; color: var(--brand-600); font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(26,92,240,0.06);
}
.dash-nav-item svg { width: 13px; height: 13px; flex-shrink: 0; }
.dash-main { padding: 20px 22px; background: #fff; }
.dash-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.dash-title { font-size: 14px; font-weight: 700; color: var(--navy-900); letter-spacing: -0.01em; }
.dash-period {
  font-size: 10px; color: var(--gray-500);
  background: #fff; padding: 5px 11px; border-radius: 4px;
  border: 1px solid var(--gray-150);
  display: inline-flex; align-items: center; gap: 4px;
}
.dash-period::after { content: "▾"; font-size: 8px; color: var(--gray-400); }

.dash-kpi {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin-bottom: 14px;
}
.kpi {
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(30,79,199,0.04) 0%, transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  border: 1px solid rgba(11,21,36,0.06);
  border-radius: 12px;
  padding: 13px 14px 11px;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 1px 3px rgba(11,21,36,0.03);
}
.kpi::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand-600), var(--brand-400));
  opacity: 0.9;
  /* 上端バーが脈動 */
  animation: kpiBarPulse 3.4s ease-in-out infinite;
}
.kpi:nth-child(2)::before { background: linear-gradient(90deg, #10b981, #34d399); animation-delay: 0.4s; }
.kpi:nth-child(3)::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); animation-delay: 0.8s; }
.kpi:nth-child(4)::before { background: linear-gradient(90deg, #8b5cf6, #a78bfa); animation-delay: 1.2s; }
.kpi::after {
  content: ""; position: absolute; inset: -1px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(30,79,199,0) 0%, rgba(30,79,199,0.08) 50%, rgba(30,79,199,0) 100%);
  background-size: 200% 200%;
  background-position: 200% 200%;
  opacity: 0;
  transition: opacity 0.3s, background-position 0.8s;
  pointer-events: none;
}
.kpi:hover {
  border-color: rgba(30,79,199,0.18);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -8px rgba(30,79,199,0.18), 0 0 0 1px rgba(30,79,199,0.1);
}
.kpi:hover::after { opacity: 1; background-position: 0% 0%; }
@keyframes kpiBarPulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}
.kpi-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.kpi-label { font-size: 9.5px; color: var(--gray-600); font-weight: 600; letter-spacing: 0.005em; }
.kpi-ico {
  width: 22px; height: 22px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand-50), rgba(92,130,232,0.18));
  color: var(--brand-600);
  box-shadow: 0 2px 6px -2px rgba(30,79,199,0.18), 0 0 0 1px rgba(30,79,199,0.06) inset;
}
.kpi:nth-child(2) .kpi-ico { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #059669; box-shadow: 0 2px 6px -2px rgba(16,185,129,0.22), 0 0 0 1px rgba(16,185,129,0.10) inset; }
.kpi:nth-child(3) .kpi-ico { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #d97706; box-shadow: 0 2px 6px -2px rgba(245,158,11,0.22), 0 0 0 1px rgba(245,158,11,0.10) inset; }
.kpi:nth-child(4) .kpi-ico { background: linear-gradient(135deg, #ede9fe, #ddd6fe); color: #7c3aed; box-shadow: 0 2px 6px -2px rgba(139,92,246,0.22), 0 0 0 1px rgba(139,92,246,0.10) inset; }
.kpi-ico svg { width: 11px; height: 11px; }
.kpi-value {
  font-family: var(--eng);
  font-size: 24px; font-weight: 900; color: var(--navy-900);
  letter-spacing: -0.035em; line-height: 1.0;
  display: flex; align-items: baseline; gap: 3px;
  /* 数値部分にうっすらグラデ */
  background: linear-gradient(180deg, var(--navy-900) 0%, #1a2942 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kpi-value .u {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.5;
  letter-spacing: -0.01em;
  -webkit-text-fill-color: var(--gray-500);
}
.kpi-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 6px;
}
.kpi-delta {
  font-family: var(--eng);
  font-size: 9.5px; color: var(--green-500); font-weight: 700;
  display: flex; align-items: center; gap: 2px;
}
.kpi-delta svg { width: 8px; height: 8px; }
.kpi-spark { width: 42px; height: 14px; }
.kpi-spark svg { width: 100%; height: 100%; }

.dash-section {
  background: #f7f9fc;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.dash-section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.dash-section-title { font-size: 10.5px; font-weight: 700; color: var(--navy-900); }
.dash-section-tag {
  font-size: 8.5px; color: var(--green-500); background: var(--green-100);
  padding: 2.5px 8px; border-radius: 3px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
}
.dash-section-tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--green-500); }

.flow {
  display: flex; align-items: stretch; gap: 0;
  background: #fff; border-radius: 6px; padding: 10px;
  border: 1px solid var(--gray-100);
}
.flow-step { flex: 1; text-align: center; position: relative; padding: 0 4px; }
.flow-step + .flow-step::before {
  content: ""; position: absolute; left: -8px; top: 12px;
  width: 16px; height: 1.5px; background: var(--gray-200);
}
.flow-step + .flow-step::after {
  content: ""; position: absolute; left: -3px; top: 9px;
  border: 4px solid transparent; border-left-color: var(--gray-300);
}
.flow-step-ico {
  width: 24px; height: 24px; margin: 0 auto 6px;
  background: var(--brand-50); border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  color: var(--brand-600);
}
.flow-step-ico svg { width: 12px; height: 12px; }
.flow-step.last .flow-step-ico { background: var(--green-100); color: var(--green-500); }
.flow-step-name { font-size: 9px; font-weight: 700; color: var(--navy-900); margin-bottom: 2px; line-height: 1.3; }
.flow-step-sub { font-size: 8px; color: var(--gray-500); line-height: 1.3; }

.dash-double { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 9px; }
.list-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px dashed var(--gray-150);
  font-size: 10px;
  gap: 8px;
}
.list-row:last-child { border-bottom: none; }
.list-name {
  color: var(--navy-900); font-weight: 500; display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.list-name svg { width: 11px; height: 11px; }
.list-meta { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.list-status-dot {
  font-size: 8.5px; color: var(--green-500); font-weight: 700;
  display: inline-flex; align-items: center; gap: 3px;
}
.list-status-dot::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--green-500); }
.list-bar { width: 38px; height: 4px; background: var(--gray-100); border-radius: 2px; overflow: hidden; }
.list-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--brand-600), var(--brand-400)); border-radius: 2px; }
.list-pct { font-family: var(--eng); font-size: 9px; color: var(--gray-600); font-weight: 700; }
.list-sys-ico {
  width: 14px; height: 14px; border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center;
}
.list-sys-ico { width: 22px !important; height: 22px !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; margin-right: 6px; flex-shrink: 0; }
.list-sys-ico img { height: 18px; max-width: 22px; max-height: 18px; width: auto; object-fit: contain; display: block; }

/* ========== SECTION COMMON ========== */
.section { padding: 100px 0; }
.section-tight { padding: 80px 0; }
.section-narrow { padding: 64px 0; }
.eyebrow {
  font-family: var(--eng);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brand-600);
  margin-bottom: 22px;
  display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow::before {
  content: ""; width: 28px; height: 1.5px; background: var(--brand-600);
}
.h2 {
  font-size: 40px; font-weight: 800;
  line-height: 1.45; letter-spacing: -0.02em;
  color: var(--navy-900);
  margin-bottom: 26px;
}
.lead {
  font-size: 15px; line-height: 2;
  color: var(--gray-600);
  margin-bottom: 32px;
  font-weight: 500;
}

/* ========== PROBLEM — Clean Premium ========== */
.problem {
  background:
    radial-gradient(ellipse 50% 40% at 50% 0%, rgba(30,79,199,0.04) 0%, transparent 60%),
    #fbfaf7;
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.problem .container { position: relative; }
.problem-head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 56px;
}
.problem-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--eng);
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.30em;
  color: var(--brand-600);
  margin-bottom: 22px;
}
.problem-eyebrow::before,
.problem-eyebrow::after {
  content: ""; width: 36px; height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--brand-600));
}
.problem-eyebrow::after {
  background: linear-gradient(90deg, var(--brand-600), transparent);
}
.problem-headline {
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -0.028em;
  line-height: 1.45;
  color: var(--navy-900);
  margin-bottom: 18px;
}
.problem-headline .em {
  position: relative;
  display: inline-block;
  font-style: normal;
  z-index: 1;
}
.problem-headline .em::after {
  content: "";
  position: absolute; left: -3px; right: -3px; bottom: 4px;
  height: 14px;
  background: rgba(30,79,199,0.16);
  z-index: -1;
  border-radius: 2px;
}
.problem-sub {
  font-size: 15px;
  color: var(--gray-600);
  line-height: 1.95;
  font-weight: 500;
}
.problem-sub strong {
  color: var(--navy-900);
  font-weight: 800;
  padding: 0 2px;
}

/* Clean uniform 3x2 grid */
.problem-meta {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 26px; margin-top: 22px;
  font-size: 12.5px; color: var(--ink-500); font-weight: 600;
  letter-spacing: 0.02em;
}
.problem-meta-item { display: inline-flex; align-items: center; gap: 7px; }
.problem-meta-item svg { width: 15px; height: 15px; color: var(--brand-600); opacity: 0.75; }
.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 48px;
  margin-top: 56px;
}
.problem-q {
  background: #fff;
  border: 1px solid rgba(11,21,36,0.06);
  border-radius: 8px;
  padding: 34px 32px 30px;
  position: relative;
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1), box-shadow 0.5s, border-color 0.5s;
  display: flex; flex-direction: column;
  box-shadow: 0 1px 0 rgba(11,21,36,0.03), 0 24px 48px -32px rgba(11,21,36,0.12);
  isolation: isolate;
}
/* top accent bar — full width, industry-tinted */
.problem-q::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-600), var(--brand-400), var(--brand-600));
  background-size: 200% 100%;
  transform: scaleX(0.22);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(.2,.7,.2,1), background-position 0.6s;
}
/* soft radial halo on hover */
.problem-q::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 0% 0%, rgba(30,79,199,0.06), transparent 55%);
  opacity: 0; transition: opacity 0.4s;
  pointer-events: none; z-index: -1;
}
.problem-q:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 16px -6px rgba(30,79,199,0.10), 0 40px 72px -28px rgba(11,21,36,0.28), 0 0 0 1px rgba(30,79,199,0.12);
  border-color: rgba(30,79,199,0.30);
}
.problem-q:hover::before {
  transform: scaleX(1);
  background-position: 100% 0;
}
.problem-q:hover::after { opacity: 1; }
.problem-q:hover .problem-q-mark {
  transform: scale(1.05) translateY(-2px);
  color: rgba(30,79,199,0.30);
}
.problem-q:hover .problem-q-num {
  color: var(--brand-500);
}
/* industry color theming */
.problem-q[data-industry="manufacturing"]::before { background: linear-gradient(90deg, #1E4FC7, #5C82E8); }
.problem-q[data-industry="service"]::before { background: linear-gradient(90deg, #2C7BC9, #5EA0E0); }
.problem-q[data-industry="construction"]::before { background: linear-gradient(90deg, #3E5C9E, #6D89C7); }
.problem-q[data-industry="legal"]::before { background: linear-gradient(90deg, #4F5A8F, #7E8CBF); }
.problem-q[data-industry="sales"]::before { background: linear-gradient(90deg, #5468A8, #8290C9); }
.problem-q[data-industry="retail"]::before { background: linear-gradient(90deg, #1A4587, #4B7FCB); }

.problem-q-top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(11,21,36,0.06);
}
.problem-q-num {
  font-family: var(--eng);
  font-size: 13px;
  font-weight: 800;
  color: var(--brand-600);
  letter-spacing: 0.14em;
  transition: color 0.5s;
}
.problem-q-cat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-500);
  background: none;
  padding: 0;
  border-radius: 0;
}
.problem-q[data-industry="service"] .problem-q-cat { color: #2C7BC9; background: rgba(44,123,201,0.10); }
.problem-q[data-industry="construction"] .problem-q-cat { color: #3E5C9E; background: rgba(62,92,158,0.10); }
.problem-q[data-industry="legal"] .problem-q-cat { color: #4F5A8F; background: rgba(79,90,143,0.10); }
.problem-q[data-industry="sales"] .problem-q-cat { color: #5468A8; background: rgba(84,104,168,0.10); }
.problem-q[data-industry="retail"] .problem-q-cat { color: #1A4587; background: rgba(26,69,135,0.10); }

.problem-q-mark {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 62px;
  line-height: 0.5;
  color: rgba(30,79,199,0.18);
  margin-bottom: 14px;
  letter-spacing: -0.05em;
  font-weight: 700;
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1), color 0.5s;
  transform-origin: left top;
}
.problem-q[data-industry="manufacturing"] .problem-q-mark { color: rgba(30,79,199,0.18); }
.problem-q[data-industry="service"] .problem-q-mark { color: rgba(44,123,201,0.18); }
.problem-q[data-industry="construction"] .problem-q-mark { color: rgba(62,92,158,0.18); }
.problem-q[data-industry="legal"] .problem-q-mark { color: rgba(79,90,143,0.18); }
.problem-q[data-industry="sales"] .problem-q-mark { color: rgba(84,104,168,0.18); }
.problem-q[data-industry="retail"] .problem-q-mark { color: rgba(26,69,135,0.18); }

.problem-q-text {
  font-size: 16.5px;
  line-height: 2.0;
  color: var(--navy-900);
  font-weight: 600;
  margin-bottom: 0;
  flex: 1;
  letter-spacing: 0.005em;
}
.problem-q-text strong {
  position: relative;
  background: linear-gradient(180deg, transparent 62%, rgba(30,79,199,0.18) 62%);
  padding: 0 2px;
  font-weight: 800;
}
.problem-q[data-industry="service"] .problem-q-text strong { background: linear-gradient(180deg, transparent 62%, rgba(44,123,201,0.18) 62%); }
.problem-q[data-industry="construction"] .problem-q-text strong { background: linear-gradient(180deg, transparent 62%, rgba(62,92,158,0.20) 62%); }
.problem-q[data-industry="legal"] .problem-q-text strong { background: linear-gradient(180deg, transparent 62%, rgba(79,90,143,0.20) 62%); }
.problem-q[data-industry="sales"] .problem-q-text strong { background: linear-gradient(180deg, transparent 62%, rgba(84,104,168,0.20) 62%); }
.problem-q[data-industry="retail"] .problem-q-text strong { background: linear-gradient(180deg, transparent 62%, rgba(75,127,203,0.20) 62%); }

.problem-q-attr {
  font-size: 11.5px;
  font-weight: 700;
  padding-top: 14px;
  border-top: 1px dashed rgba(11,21,36,0.10);
  display: inline-flex; align-items: center; gap: 10px;
  letter-spacing: 0.04em;
}
.problem-q-ind {
  color: var(--navy-900);
}
.problem-q-role {
  color: var(--ink-500);
  font-weight: 600;
  position: relative; padding-left: 12px;
}
.problem-q-role::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--ink-400);
  transform: translateY(-50%);
}

/* Transition arrow */
.problem-arrow {
  display: flex; justify-content: center; margin: 28px 0 24px;
}
.problem-arrow-svg {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid rgba(11,21,36,0.1);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand-600);
  box-shadow: 0 8px 20px -8px rgba(11,21,36,0.18);
  animation: bounceDown 2s ease-in-out infinite;
}
.problem-arrow-svg svg { width: 16px; height: 16px; }
@keyframes bounceDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* Bridge */
.problem-bridge {
  background:
    radial-gradient(ellipse 50% 80% at 30% 50%, rgba(38,96,219,0.20) 0%, transparent 60%),
    radial-gradient(ellipse 50% 80% at 70% 50%, rgba(92,130,232,0.16) 0%, transparent 60%),
    linear-gradient(135deg, #0B1524 0%, #142036 50%, #0B1524 100%);
  border-radius: 22px;
  padding: 40px 48px 36px;
  text-align: center;
  position: relative;
  overflow: hidden;
  max-width: 820px;
  margin: 0 auto;
  box-shadow:
    0 36px 72px -28px rgba(11,21,36,0.45),
    0 0 0 1px rgba(255,255,255,0.04) inset;
}
.problem-bridge::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--brand-600) 25%, var(--brand-400) 50%, var(--brand-600) 75%, transparent 100%);
}
.problem-bridge::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  pointer-events: none;
}
.problem-bridge-tag {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--eng);
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.32em;
  color: var(--brand-400);
  margin-bottom: 16px;
  position: relative; z-index: 1;
}
.problem-bridge-tag::before, .problem-bridge-tag::after {
  content: ""; width: 28px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-400));
}
.problem-bridge-tag::after {
  background: linear-gradient(90deg, var(--brand-400), transparent);
}
.problem-bridge-headline {
  font-size: 26px; font-weight: 900;
  color: #fff;
  line-height: 1.55;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
  position: relative; z-index: 1;
}
.problem-bridge-headline .em {
  background: linear-gradient(135deg, var(--brand-400) 0%, #7CA0F0 50%, var(--brand-400) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShimmer 4s ease-in-out infinite;
}
.problem-bridge-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  font-weight: 500;
  position: relative; z-index: 1;
}

/* ========== WHY BoostX — PREMIUM DARK SECTION WITH BG ========== */
.why {
  background: #0B1524;
  color: #fff;
  position: relative;
  overflow: hidden;
  padding: 110px 0;
}
.why-bg {
  position: absolute; inset: 0;
  background:
    url('https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=1920&q=80') center/cover;
  opacity: 0.18;
  filter: saturate(0.6);
}
.why-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(30,79,199,0.22), transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(38,96,219,0.18), transparent 60%),
    linear-gradient(180deg, rgba(11,21,36,0.85) 0%, rgba(11,21,36,0.70) 50%, rgba(11,21,36,0.90) 100%);
}
.why-grid-pattern {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}
.why .container { position: relative; z-index: 2; }
.why-head {
  text-align: center;
  max-width: 880px;
  margin: 0 auto 44px;
  position: relative;
}
.why-head .eyebrow {
  justify-content: center;
  color: var(--brand-400);
}
.why-head .eyebrow::before { background: var(--brand-400); }
.why-head .h2 {
  text-align: center;
  color: #fff;
  font-size: 40px;
  line-height: 1.45;
  margin-bottom: 32px;
}
.why-head .lead {
  text-align: center;
  margin-bottom: 0;
  color: rgba(255,255,255,0.72);
  font-size: 16px;
  line-height: 2.1;
}

.why-pillars {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  position: relative;
}
.pillar {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 36px 40px 36px;
  position: relative;
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1), border-color 0.4s, background 0.4s;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.pillar:hover {
  transform: translateY(-8px);
  border-color: rgba(92,130,232,0.5);
  background: linear-gradient(180deg, rgba(30,79,199,0.10), rgba(30,79,199,0.02));
}
.pillar::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(92,130,232,0.6), transparent);
  opacity: 0;
  transition: opacity 0.4s;
}
.pillar:hover::before { opacity: 1; }
.pillar-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 24px;
}
.pillar-num {
  font-family: var(--eng);
  font-size: 72px; font-weight: 800;
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(92,130,232,0.45));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.05em;
  line-height: 0.9;
}
.pillar-ico {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(92,130,232,0.18), rgba(30,79,199,0.08));
  border: 1px solid rgba(92,130,232,0.22);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.95);
}
.pillar-ico svg { width: 26px; height: 26px; }
.pillar-title {
  font-size: 22px; font-weight: 800;
  color: #fff;
  line-height: 1.55; letter-spacing: -0.015em;
  margin-bottom: 18px;
}
.pillar-desc {
  font-size: 14.5px; line-height: 2.05;
  color: rgba(255,255,255,0.65);
  font-weight: 400;
  flex: 1;
  margin-bottom: 22px;
}
.pillar-tags {
  display: flex; flex-wrap: wrap; gap: 7px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.pillar-tag {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 5px 10px;
  border-radius: 999px;
}

/* === Why Contrast Block (before / arrow / after) === */
.why-contrast {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 28px;
  align-items: stretch;
  max-width: 1100px;
  margin: 0 auto 60px;
}
.why-contrast-col {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 28px 30px 30px;
  position: relative;
  overflow: hidden;
}
.why-contrast-bad {
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
  border-color: rgba(255,255,255,0.10);
}
.why-contrast-bad::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
}
.why-contrast-good {
  background: linear-gradient(180deg, rgba(30,79,199,0.08), rgba(30,79,199,0.02));
  border-color: rgba(92,130,232,0.30);
  box-shadow: 0 0 0 1px rgba(92,130,232,0.08), 0 20px 48px -20px rgba(30,79,199,0.30);
}
.why-contrast-good::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(92,130,232,0.8), transparent);
}
.why-contrast-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.why-contrast-bad .why-contrast-label {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.12);
}
.why-contrast-good .why-contrast-label {
  background: rgba(92,130,232,0.16);
  color: #B8CDF6;
  border: 1px solid rgba(92,130,232,0.30);
}
.why-contrast-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.why-contrast-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,0.78);
}
.why-contrast-list li svg {
  width: 18px; height: 18px;
  flex-shrink: 0; margin-top: 3px;
}
.why-contrast-bad .why-contrast-list li svg { color: rgba(255,255,255,0.45); }
.why-contrast-good .why-contrast-list li svg { color: #7CA0F0; }
.why-contrast-good .why-contrast-list li strong {
  color: #fff; font-weight: 800;
  background: linear-gradient(180deg, transparent 60%, rgba(92,130,232,0.30) 60%);
  padding: 0 3px;
}
.why-contrast-divider {
  display: flex; align-items: center; justify-content: center;
  color: rgba(92,130,232,0.55);
  width: 44px;
}
.why-contrast-divider svg { width: 28px; height: 28px; }

/* WHY emphasis */
.why-em {
  background: linear-gradient(135deg, #5C82E8 0%, #7CA0F0 50%, #5C82E8 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShimmer 4s ease-in-out infinite;
}
.why-head .lead strong {
  color: var(--brand-400);
  font-weight: 800;
}
.pillar-desc strong {
  color: rgba(255,255,255,0.95);
  font-weight: 700;
  background: linear-gradient(180deg, transparent 60%, rgba(92,130,232,0.25) 60%);
  padding: 0 3px;
}

/* WHY CTA — シンプル（カード装飾なし・テキスト+ボタン直置き） */
.why-cta {
  margin-top: 56px;
  text-align: center;
}
.why-cta-text {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,0.78);
  margin-bottom: 22px;
  letter-spacing: 0.02em;
  line-height: 1.8;
}
.why-cta-text strong { color: #fff; font-weight: 800; }
@media (max-width: 768px) {
  .why-cta { margin-top: 36px; }
  .why-cta-text { font-size: 13.5px; margin-bottom: 18px; }
}

/* ========== APPROACH — Original 7-Step ========== */
.approach {
  background:
    radial-gradient(ellipse 70% 50% at 20% 20%, rgba(30,79,199,0.06), transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 80%, rgba(92,130,232,0.05), transparent 60%),
    linear-gradient(180deg, #f7faff 0%, #ffffff 100%);
  position: relative; overflow: hidden;
  padding: 100px 0 100px;
}
.approach::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(11,21,36,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,21,36,0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 78%);
  pointer-events: none;
}
.approach .container { position: relative; z-index: 1; }
.approach-head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 56px;
}
.approach-head .eyebrow { justify-content: center; }
.approach-head .h2 {
  text-align: center;
  font-size: 40px;
  line-height: 1.45;
  margin-bottom: 22px;
  letter-spacing: -0.025em;
}
.approach-head .lead {
  text-align: center;
  font-size: 15px;
  margin: 0 auto;
  max-width: 720px;
  line-height: 1.95;
}

/* Approach H2 em */
.approach-em {
  background: linear-gradient(135deg, var(--brand-600), var(--brand-400));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* === Phase indicator row === */
.approach-phases {
  display: grid;
  grid-template-columns: 3fr 2fr 2fr;
  gap: 16px;
  margin-bottom: 26px;
  position: relative;
}
.approach-phase {
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.65));
  backdrop-filter: blur(6px);
  border: 1px solid rgba(11,21,36,0.06);
  border-radius: 14px;
  padding: 14px 22px;
  display: flex; align-items: center; gap: 14px;
  position: relative;
  overflow: hidden;
}
.approach-phase::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
}
.approach-phase-1::before { background: linear-gradient(180deg, #7CA0F0, #5C82E8); }
.approach-phase-2::before { background: linear-gradient(180deg, #1E4FC7, #5C82E8); }
.approach-phase-3::before { background: linear-gradient(180deg, #0F3686, #1E4FC7); }
.approach-phase-label {
  font-family: var(--eng);
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--ink-400);
}
.approach-phase-title {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--navy-900);
  letter-spacing: -0.01em;
}
.approach-phase-span {
  margin-left: auto;
  font-size: 11.5px; font-weight: 700;
  color: var(--ink-500);
  background: rgba(11,21,36,0.04);
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* === 7-step flow with arrows === */
.approach-flow {
  position: relative;
  padding-top: 8px;
}
.approach-flow-line {
  position: absolute;
  left: 7%; right: 7%;
  top: 94px;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--brand-400) 8%,
    var(--brand-600) 50%,
    var(--brand-400) 92%,
    transparent 100%);
  opacity: 0.40;
  z-index: 0;
  border-radius: 3px;
}
/* Pulse dot traveling along the flow line */
.approach-flow-line::after {
  content: "";
  position: absolute; top: -3px; left: 0;
  width: 14px; height: 9px;
  background: linear-gradient(90deg, var(--brand-400), var(--brand-600));
  border-radius: 5px;
  box-shadow: 0 0 16px rgba(30,79,199,0.70), 0 0 28px rgba(92,130,232,0.40);
  animation: approachFlow 7s cubic-bezier(.4,0,.6,1) infinite;
}
/* Faint after-trail */
.approach-flow-line::before {
  content: "";
  position: absolute; top: -1px; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, transparent 0%, rgba(92,130,232,0.20) 50%, transparent 100%);
  filter: blur(4px);
  animation: approachFlowTrail 7s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes approachFlow {
  0% { left: 0%; opacity: 0; transform: scale(0.6); }
  8% { opacity: 1; transform: scale(1); }
  92% { opacity: 1; transform: scale(1); }
  100% { left: 100%; opacity: 0; transform: scale(0.6); }
}
@keyframes approachFlowTrail {
  0%, 100% { opacity: 0; }
  50% { opacity: 0.6; }
}
.approach-steps {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  position: relative;
  z-index: 1;
}
.step {
  background: #fff;
  border: 1px solid var(--gray-150);
  border-radius: 18px;
  padding: 32px 18px 24px;
  text-align: center;
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1), box-shadow 0.5s, border-color 0.4s, background 0.4s;
  min-width: 0;
  position: relative;
  overflow: visible;
  box-shadow: 0 4px 14px -6px rgba(11,21,36,0.06);
  display: flex; flex-direction: column;
  cursor: default;
}
.step:hover {
  transform: translateY(-14px);
  background: linear-gradient(180deg, #fff, var(--brand-50));
  border-color: var(--brand-400);
  box-shadow: 0 36px 72px -20px rgba(30,79,199,0.35), 0 4px 8px -2px rgba(30,79,199,0.10);
}
.step:hover .step-name {
  color: var(--brand-600);
}
.step:hover::before {
  transform: scaleX(1);
}
.step:hover .step-ico {
  transform: scale(1.1) rotate(-3deg);
  color: var(--brand-600);
  background: linear-gradient(135deg, #fff, var(--brand-50));
}
.step:hover .step-num {
  transform: scale(1.08);
  box-shadow: 0 10px 22px -3px rgba(30,79,199,0.50);
}
.step::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-600), var(--brand-400));
  border-radius: 18px 18px 0 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
}
.step[data-phase="2"]::before { background: linear-gradient(90deg, #1E4FC7, #5C82E8); }
.step[data-phase="3"]::before { background: linear-gradient(90deg, #0F3686, #1E4FC7); }

.step[data-phase="2"]:hover { border-color: #5C82E8; }
.step[data-phase="3"]:hover { border-color: #0F3686; }
.step:hover::before { transform: scaleX(1); }
/* arrow between cards */
.step-arrow {
  position: absolute;
  top: 92px;
  right: -32px;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  background: #fff;
  border: 2px solid rgba(11,21,36,0.08);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--brand-600);
  z-index: 2;
  box-shadow: 0 4px 10px -3px rgba(11,21,36,0.10);
  transition: transform 0.3s, background 0.3s, border-color 0.3s;
}
.step[data-phase="2"] .step-arrow { color: #1E4FC7; }
.step[data-phase="3"] .step-arrow { color: #0F3686; }
.step-arrow svg { width: 14px; height: 14px; }
.step:hover + .step .step-arrow,
.step:hover .step-arrow {
  background: var(--brand-50);
  border-color: var(--brand-400);
  transform: translateY(-50%) scale(1.12);
}
.step-num {
  font-family: var(--eng);
  font-size: 13px; font-weight: 800;
  color: #fff;
  letter-spacing: 0.10em;
  margin: 0 auto 18px;
  width: 38px; height: 38px;
  background: linear-gradient(135deg, var(--brand-600), var(--brand-400));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px -3px rgba(30,79,199,0.40);
}
.step[data-phase="2"] .step-num {
  background: linear-gradient(135deg, #1E4FC7, #5C82E8);
  box-shadow: 0 6px 14px -3px rgba(30,79,199,0.40);
}
.step[data-phase="3"] .step-num {
  background: linear-gradient(135deg, #0F3686, #1E4FC7);
  box-shadow: 0 6px 14px -3px rgba(15,54,134,0.40);
}
.step-ico {
  width: 64px; height: 64px; margin: 0 auto 18px;
  background: linear-gradient(135deg, #fff 0%, #eef2f7 100%);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  color: var(--navy-700);
  border: 1px solid var(--gray-100);
  box-shadow: 0 6px 18px -8px rgba(11,21,36,0.14);
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1), color 0.3s, background 0.3s;
}
.step:hover .step-ico {
  transform: scale(1.1) rotate(-3deg);
  color: var(--brand-600);
  background: linear-gradient(135deg, #fff, var(--brand-50));
}
.step[data-phase="2"]:hover .step-ico { color: #1E4FC7; background: linear-gradient(135deg, #fff, rgba(30,79,199,0.08)); }
.step[data-phase="3"]:hover .step-ico { color: #0F3686; background: linear-gradient(135deg, #fff, rgba(15,54,134,0.10)); }
.step-ico svg { width: 28px; height: 28px; }
.step-name {
  font-size: 15px; font-weight: 800;
  color: var(--navy-900);
  margin-bottom: 8px;
  word-break: keep-all;
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.step-desc {
  font-size: 11.5px; line-height: 1.75;
  color: var(--gray-500);
  word-break: keep-all;
  font-weight: 500;
  flex: 1;
  margin-bottom: 16px;
}



.step[data-phase="2"] .step-meta-time { color: #1E4FC7; }
.step[data-phase="3"] .step-meta-time { color: #0F3686; }


/* ========== SERVICES ========== */
.services { background: #fff; }
.services-head {
  text-align: center;
  margin-bottom: 56px;
  max-width: 720px;
  margin-left: auto; margin-right: auto;
}
.services-head .eyebrow { justify-content: center; }
.services-head .h2 { text-align: center; }
.services-head .lead { text-align: center; margin-bottom: 0; }
.services-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  padding-top: 18px;
}
.svc { overflow: visible !important; }
.svc {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 20px;
  padding: 30px 28px 28px;
  display: flex; flex-direction: column;
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1), box-shadow 0.4s, border-color 0.4s;
  box-shadow: 0 4px 14px rgba(11,21,36,0.03);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.svc:hover {
  transform: translateY(-10px);
  border-color: var(--brand-400);
  box-shadow: 0 32px 64px -22px rgba(11,21,36,0.22);
}
.svc::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-600), var(--brand-400));
  border-radius: 20px 20px 0 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
}
.svc:hover::before { transform: scaleX(1); }
.svc[data-svc="claude"]::before { background: linear-gradient(90deg, #163E9C, #2660DB); }
.svc[data-svc="consult"]::before { background: linear-gradient(90deg, #1E4FC7, #5C82E8); }
.svc[data-svc="automation"]::before { background: linear-gradient(90deg, #2660DB, #7CA0F0); }
.svc-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
  gap: 8px;
  flex-wrap: wrap;
}
.svc-tag {
  display: inline-flex;
  padding: 5px 12px; border-radius: 999px;
  background: var(--brand-50); color: var(--brand-600);
  font-family: var(--eng);
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.svc-period {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-500);
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-align: right;
}
.svc-icon {
  width: 60px; height: 60px;
  background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-400) 100%);
  border: none;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  color: #fff;
  box-shadow: 0 10px 22px -6px rgba(30,79,199,0.40);
  position: relative;
  overflow: hidden;
}
.svc-icon svg { width: 28px; height: 28px; display: block; color: #fff; }
.svc-icon::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.20) 50%, transparent 60%);
  pointer-events: none;
}
.svc[data-svc="claude"] .svc-icon { background: linear-gradient(135deg, #163E9C 0%, #2660DB 100%); box-shadow: 0 10px 22px -6px rgba(22,62,156,0.40); }
.svc[data-svc="consult"] .svc-icon { background: linear-gradient(135deg, #1E4FC7 0%, #5C82E8 100%); box-shadow: 0 10px 22px -6px rgba(30,79,199,0.40); }
.svc[data-svc="automation"] .svc-icon { background: linear-gradient(135deg, #2660DB 0%, #7CA0F0 100%); box-shadow: 0 10px 22px -6px rgba(38,96,219,0.40); }
.svc-title {
  font-size: 20px; font-weight: 800;
  color: var(--navy-900);
  line-height: 1.45; letter-spacing: -0.015em;
  margin-bottom: 10px;
}
.svc-tagline {
  color: var(--brand-600);
  font-size: 13.5px; font-weight: 800;
  line-height: 1.55;
  margin-bottom: 14px;
  letter-spacing: -0.005em;
}
.svc[data-svc="claude"] .svc-tagline { color: #163E9C; }
.svc[data-svc="consult"] .svc-tagline { color: #1E4FC7; }
.svc[data-svc="automation"] .svc-tagline { color: #2660DB; }
.svc-desc {
  color: var(--gray-600);
  font-size: 13px; line-height: 1.85;
  margin-bottom: 18px;
}
.svc-target {
  background: linear-gradient(180deg, rgba(30,79,199,0.04), rgba(30,79,199,0.01));
  border: 1px solid rgba(30,79,199,0.10);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 20px;
  display: flex; flex-direction: column; gap: 3px;
}
.svc-target-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.10em;
  color: var(--brand-600);
}
.svc-target-text {
  font-size: 12px;
  font-weight: 700;
  color: var(--navy-900);
  line-height: 1.55;
}
.svc-bullets { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; padding: 0; }
.svc-bullets li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px; color: var(--gray-700); line-height: 1.6;
  font-weight: 600;
}
.svc-bullets li svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--brand-600); margin-top: 3px; }
.svc-price {
  margin-top: 4px;
  padding: 16px 0 18px;
  border-top: 1px dashed var(--gray-200);
  display: flex; flex-direction: column; gap: 6px;
}
.svc-price-main { display: flex; align-items: baseline; gap: 8px; }
.svc-price-label { font-size: 11px; color: var(--gray-500); font-weight: 700; letter-spacing: 0.04em; }
.svc-price-value {
  font-family: var(--eng);
  font-size: 26px; font-weight: 800;
  color: var(--navy-900);
  letter-spacing: -0.02em;
}
.svc-price-value.svc-price-value--text { font-size: 19px; font-family: inherit; }
.svc-price-value .yen { font-size: 16px; font-weight: 700; margin-right: 1px; }
.svc-price-value .from { font-size: 12px; color: var(--gray-500); font-weight: 700; margin-left: 2px; }
.svc-price-note { font-size: 10.5px; color: var(--gray-500); font-weight: 500; line-height: 1.5; }
.svc-cta {
  margin-top: auto;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--brand-600) !important; color: #ffffff !important;
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 13.5px; font-weight: 800;
  letter-spacing: 0.02em;
  transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
}
.svc-cta:hover {
  background: var(--brand-500) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 22px -8px rgba(30,79,199,0.45);
}
.svc-cta svg { width: 14px; height: 14px; color: #ffffff !important; stroke: #ffffff !important; }
/* === Flagship service (生成AIコンサル — 専属伴走型 / clean design) === */
.svc-flagship {
  background: linear-gradient(180deg, rgba(30,79,199,0.06) 0%, rgba(30,79,199,0.01) 100%);
  border-color: rgba(30,79,199,0.30) !important;
  box-shadow: 0 14px 36px -10px rgba(30,79,199,0.22), 0 0 0 1px rgba(30,79,199,0.12) !important;
  position: relative;
}
.svc-flagship::before {
  background: linear-gradient(90deg, var(--brand-600) 0%, var(--brand-400) 50%, var(--brand-600) 100%) !important;
  transform: scaleX(1) !important;
  height: 5px !important;
}
.svc-flagship .svc-tag-flagship {
  background: linear-gradient(135deg, var(--brand-600), var(--brand-400)) !important;
  color: #fff !important;
  font-weight: 800;
  padding: 5px 14px !important;
  letter-spacing: 0.18em !important;
  box-shadow: 0 4px 10px -2px rgba(30,79,199,0.40);
}
.svc-flagship:hover {
  transform: translateY(-12px);
  box-shadow: 0 28px 56px -14px rgba(30,79,199,0.32), 0 0 0 1px rgba(30,79,199,0.20) !important;
}
.svc-cta-flagship {
  background: linear-gradient(135deg, var(--brand-600), var(--brand-500));
  box-shadow: 0 8px 18px -4px rgba(30,79,199,0.45);
}
.svc-cta-flagship:hover {
  box-shadow: 0 14px 28px -6px rgba(30,79,199,0.60) !important;
}

/* Flagship "BoostXイチオシ" banner — sits cleanly above card top, not over content */
.svc-flagship-banner {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--brand-600), var(--brand-400));
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.10em;
  padding: 6px 18px;
  border-radius: 999px;
  box-shadow: 0 8px 18px -4px rgba(30,79,199,0.45);
  white-space: nowrap;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
}
.svc-flagship-banner svg { width: 12px; height: 12px; }


/* === SERVICES help: editorial inline link === */
.services-help-line {
  margin: 40px auto 0;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--gray-600);
  font-weight: 500;
  max-width: 720px;
  letter-spacing: 0.005em;
}
.services-help-link {
  color: var(--brand-600);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color 0.2s, text-decoration-color 0.2s;
}
.services-help-link:hover {
  color: var(--brand-500);
  text-decoration-color: var(--brand-500);
}

.services-note {
  text-align: center;
  margin-top: 36px;
  font-size: 12.5px; color: var(--gray-500);
}

/* ========== PROPOSAL CARD — Download Driving ========== */
.proposal-card {
  margin-top: 64px;
  background:
    radial-gradient(ellipse 40% 60% at 80% 30%, rgba(38,96,219,0.30), transparent 60%),
    radial-gradient(ellipse 40% 60% at 20% 80%, rgba(92,130,232,0.18), transparent 60%),
    linear-gradient(135deg, #0B1524 0%, #142036 50%, #1B2A45 100%);
  border-radius: 28px;
  padding: 56px 56px;
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: 48px; align-items: center;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 50px 100px -32px rgba(11,21,36,0.55),
    0 0 0 1px rgba(255,255,255,0.05) inset;
}
.proposal-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--brand-600) 30%, var(--brand-400) 50%, var(--brand-600) 70%, transparent 100%);
}
.proposal-card::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  pointer-events: none;
}
.proposal-left { position: relative; z-index: 2; }
.proposal-tag {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--eng);
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.28em;
  color: var(--brand-400);
  margin-bottom: 22px;
}
.proposal-tag::before {
  content: ""; width: 30px; height: 1.5px; background: var(--brand-400);
}
.proposal-tag-badge {
  background: rgba(92,130,232,0.18);
  border: 1px solid rgba(92,130,232,0.35);
  color: #a7c1ff;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.14em;
}
.proposal-title {
  font-size: 34px; font-weight: 900;
  line-height: 1.45; letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.proposal-title .em {
  background: linear-gradient(135deg, var(--brand-400) 0%, #7CA0F0 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.proposal-desc {
  font-size: 14.5px; line-height: 2;
  color: rgba(255,255,255,0.72);
  margin-bottom: 28px;
  max-width: 520px;
  font-weight: 500;
}
.proposal-features {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px 22px;
  margin-bottom: 32px;
}
.proposal-feat {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; line-height: 1.5;
  color: rgba(255,255,255,0.92);
  font-weight: 600;
}
.proposal-feat svg {
  width: 16px; height: 16px;
  color: var(--brand-400);
  flex-shrink: 0; margin-top: 3px;
}
.proposal-actions {
  display: flex; flex-direction: column; gap: 14px;
}
.btn-proposal-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  background: linear-gradient(135deg, var(--brand-600), var(--brand-500));
  color: #fff;
  padding: 20px 32px;
  border-radius: 10px;
  font-size: 15.5px; font-weight: 800;
  letter-spacing: 0.02em;
  transition: all 0.25s;
  box-shadow: 0 16px 40px -10px rgba(38,96,219,0.62), 0 0 0 1px rgba(255,255,255,0.10) inset;
}
.btn-proposal-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 50px -10px rgba(38,96,219,0.78);
}
.btn-proposal-primary svg { width: 18px; height: 18px; }
.proposal-sub-link {
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: color 0.2s;
}
.proposal-sub-link:hover { color: #fff; }
.proposal-sub-link svg { width: 12px; height: 12px; }

/* PDF Mockup — Premium */
.proposal-mockup {
  position: relative;
  perspective: 1600px;
  z-index: 2;
}
.pdf-mock {
  background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
  border-radius: 6px;
  aspect-ratio: 1 / 1.38;
  box-shadow: 0 60px 100px -24px rgba(0,0,0,0.55), 0 24px 48px -12px rgba(0,0,0,0.35), -20px 0 40px -10px rgba(0,0,0,0.18), 0 0 0 1px rgba(11,21,36,0.08);
  transform: rotateY(-12deg) rotateX(6deg) rotate(-2deg);
  padding: 26px 26px 22px;
  font-family: 'Noto Sans JP', sans-serif;
  color: #0B1524;
  position: relative;
  overflow: hidden;
  transition: transform 0.6s cubic-bezier(.2,.7,.2,1);
}
.proposal-mockup:hover .pdf-mock {
  transform: rotateY(-6deg) rotateX(3deg) rotate(-1deg);
}
.pdf-mock::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8px;
  background: linear-gradient(90deg, var(--brand-600) 0%, var(--brand-400) 50%, var(--brand-600) 100%);
}
.pdf-mock::after {
  content: "";
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 8px;
  background: linear-gradient(90deg, rgba(0,0,0,0.10), transparent);
}
.pdf-mock-tag {
  font-family: var(--eng);
  font-size: 8.5px; font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--brand-600);
  margin-bottom: 10px;
}
.pdf-mock-title {
  font-size: 15px; font-weight: 900;
  line-height: 1.4;
  margin-bottom: 8px;
  color: var(--navy-900);
  letter-spacing: -0.02em;
}
.pdf-mock-sub {
  font-size: 8.5px;
  color: var(--gray-500);
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--gray-100);
  font-weight: 600;
}
.pdf-mock-section { margin-bottom: 12px; }
.pdf-mock-section-num {
  font-family: var(--eng);
  font-size: 8px; font-weight: 800;
  color: var(--brand-600);
  margin-bottom: 3px;
  letter-spacing: 0.08em;
}
.pdf-mock-section-title {
  font-size: 9.5px; font-weight: 800;
  color: var(--navy-900);
  margin-bottom: 6px;
}
.pdf-mock-bar {
  height: 3px;
  background: var(--gray-100);
  border-radius: 2px;
  margin-bottom: 4px;
}
.pdf-mock-bar.w90 { width: 90%; }
.pdf-mock-bar.w70 { width: 70%; }
.pdf-mock-bar.w80 { width: 80%; }
.pdf-mock-foot {
  position: absolute; bottom: 14px; left: 26px; right: 26px;
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--gray-100);
  font-size: 7.5px; color: var(--gray-500);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.pdf-mock-page { font-family: var(--eng); }

/* === Document collection stack === */
.proposal-mockup {
  position: relative;
  perspective: 1800px;
  z-index: 2;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  min-height: 300px;
}
.pdf-stack {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.30;
}
.pdf-page {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(11,21,36,0.06), 0 20px 40px -12px rgba(11,21,36,0.25);
  transition: transform 0.7s cubic-bezier(.2,.7,.2,1), box-shadow 0.7s;
}
.pdf-page-inner {
  padding: 30px 28px 26px;
  height: 100%;
  position: relative;
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--navy-900);
}
.pdf-page::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--brand-600), var(--brand-400));
}

/* Stack: 4 papers fanned cleanly from back to front */
.pdf-page-back-3 {
  transform: translate(-72px, 24px) rotate(-9deg);
  z-index: 1;
  filter: brightness(0.92);
  box-shadow: 0 0 0 1px rgba(11,21,36,0.06), 0 18px 36px -16px rgba(11,21,36,0.35);
}
.pdf-page-back-2 {
  transform: translate(-42px, 14px) rotate(-5deg);
  z-index: 2;
  filter: brightness(0.95);
  box-shadow: 0 0 0 1px rgba(11,21,36,0.06), 0 18px 38px -16px rgba(11,21,36,0.32);
}
.pdf-page-back-1 {
  transform: translate(-18px, 6px) rotate(-2deg);
  z-index: 3;
  filter: brightness(0.98);
  box-shadow: 0 0 0 1px rgba(11,21,36,0.06), 0 18px 40px -16px rgba(11,21,36,0.30);
}
.pdf-page-cover {
  z-index: 4;
  transform: rotate(0deg);
  box-shadow: 0 0 0 1px rgba(11,21,36,0.06), 0 30px 60px -16px rgba(11,21,36,0.32), 0 8px 16px -8px rgba(11,21,36,0.18);
}

/* All accent bars use BoostX blue family — no teal/orange */
.pdf-page-back-1::before { background: linear-gradient(90deg, #5C82E8, #7CA0F0); }
.pdf-page-back-2::before { background: linear-gradient(90deg, #1E4FC7, #5C82E8); }
.pdf-page-back-3::before { background: linear-gradient(90deg, #0F3686, #1E4FC7); }
.pdf-page-cover::before { background: linear-gradient(90deg, var(--brand-600), var(--brand-400)); }

/* HOVER: fan pages out cleanly */
.proposal-mockup:hover .pdf-page-back-1 { transform: translate(-32px, 14px) rotate(-4deg); }
.proposal-mockup:hover .pdf-page-back-2 { transform: translate(-66px, 24px) rotate(-8deg); }
.proposal-mockup:hover .pdf-page-back-3 { transform: translate(-100px, 36px) rotate(-12deg); }
.proposal-mockup:hover .pdf-page-cover { transform: rotate(2deg) translate(8px, -4px); }

/* Cover meta block */
.pdf-cover-meta {
  margin-top: 16px;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(30,79,199,0.06), rgba(30,79,199,0.02));
  border-left: 2px solid var(--brand-600);
  border-radius: 4px;
}
.pdf-cover-meta-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 8.5px;
  padding: 2px 0;
}
.pdf-cover-meta-label { color: var(--gray-500); font-weight: 700; }
.pdf-cover-meta-value { color: var(--navy-900); font-weight: 800; }

/* Back pages — common typography */
.pdf-page-eyebrow {
  font-family: var(--eng);
  font-size: 8px; font-weight: 800;
  letter-spacing: 0.20em;
  color: var(--brand-600);
  margin-bottom: 8px;
}
.pdf-page-back-2 .pdf-page-eyebrow { color: #0EA5A0; }
.pdf-page-back-3 .pdf-page-eyebrow { color: #0F3686; }
.pdf-page-title {
  font-size: 14px; font-weight: 900;
  color: var(--navy-900);
  margin-bottom: 14px;
  line-height: 1.4;
  letter-spacing: -0.015em;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gray-100);
}

/* ROI page (back-1) */
.pdf-roi-kpis {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 14px;
}
.pdf-roi-kpi {
  background: linear-gradient(180deg, rgba(30,79,199,0.06), rgba(30,79,199,0.01));
  border: 1px solid rgba(30,79,199,0.10);
  border-radius: 4px;
  padding: 8px 6px;
  display: flex; flex-direction: column; gap: 3px;
  text-align: center;
}
.pdf-roi-kpi-label {
  font-size: 7px;
  font-weight: 700;
  color: var(--gray-500);
  letter-spacing: 0.04em;
}
.pdf-roi-kpi-value {
  font-family: var(--eng);
  font-size: 14px; font-weight: 800;
  color: var(--navy-900);
  letter-spacing: -0.02em;
}
.pdf-roi-kpi-value small {
  font-size: 7px;
  font-weight: 700;
  color: var(--gray-500);
  margin-left: 1px;
}
.pdf-roi-chart {
  position: relative;
  margin-top: 8px;
}
.pdf-roi-chart svg {
  width: 100%; height: 50px;
  display: block;
}
.pdf-roi-chart-labels {
  display: flex; justify-content: space-between;
  font-family: var(--eng);
  font-size: 7px;
  color: var(--gray-500);
  font-weight: 700;
  margin-top: 2px;
}

/* Roadmap page (back-2) */
.pdf-roadmap {
  display: flex; flex-direction: column; gap: 7px;
  margin-bottom: 10px;
}
.pdf-roadmap-row {
  display: grid; grid-template-columns: 56px 1fr;
  gap: 8px; align-items: center;
}
.pdf-rm-label {
  font-size: 8px; font-weight: 800;
  color: var(--navy-900);
}
.pdf-rm-track {
  height: 8px;
  background: rgba(11,21,36,0.04);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.pdf-rm-bar {
  position: absolute; top: 0; bottom: 0;
  background: linear-gradient(90deg, #0EA5A0, #5EE6CC);
  border-radius: 2px;
}
.pdf-rm-bar-1 { left: 0%; width: 25%; }
.pdf-rm-bar-2 { left: 15%; width: 35%; background: linear-gradient(90deg, #1E4FC7, #5C82E8); }
.pdf-rm-bar-3 { left: 30%; width: 45%; background: linear-gradient(90deg, #1E4FC7, #2660DB); }
.pdf-rm-bar-4 { left: 55%; width: 30%; background: linear-gradient(90deg, #5C82E8, #7CA0F0); }
.pdf-rm-bar-5 { left: 70%; width: 30%; background: linear-gradient(90deg, #7CA0F0, #B8CDF6); }
.pdf-roadmap-scale {
  display: grid; grid-template-columns: 56px 1fr;
  gap: 8px;
  margin-top: 6px;
}
.pdf-roadmap-scale::before { content: ""; }
.pdf-roadmap-scale {
  font-family: var(--eng);
  font-size: 7px;
  color: var(--gray-500);
  font-weight: 700;
}
.pdf-roadmap-scale span {
  display: inline-block;
}
/* re-layout scale: 5 dots evenly */
.pdf-roadmap-scale {
  display: flex; justify-content: space-between;
  padding-left: 64px;
  margin-top: 4px;
}

/* Chapter divider page (back-3) */
.pdf-divider-tag {
  font-family: var(--eng);
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.24em;
  color: var(--brand-600);
  margin-bottom: 12px;
}
.pdf-divider-heading {
  font-size: 32px; font-weight: 900;
  color: var(--navy-900);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 8px;
}
.pdf-divider-sub {
  font-family: var(--eng);
  font-size: 9px;
  color: var(--gray-500);
  letter-spacing: 0.16em;
  font-weight: 700;
  margin-bottom: 18px;
}
.pdf-divider-line {
  height: 2px;
  background: linear-gradient(90deg, var(--brand-600), var(--brand-400), transparent);
  border-radius: 2px;
  margin-bottom: 16px;
  width: 60%;
}
.pdf-divider-list {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 9.5px;
  color: var(--navy-900);
  font-weight: 700;
  line-height: 1.7;
}
.pdf-divider-list span {
  position: relative;
  padding-left: 12px;
}
.pdf-divider-list span::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 5px; height: 5px;
  background: var(--brand-400);
  border-radius: 50%;
  transform: translateY(-50%);
}

/* Decorative glows behind the stack */
.pdf-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.pdf-glow-1 {
  top: -50px; right: -50px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(92,130,232,0.30), transparent 70%);
  filter: blur(20px);
}
.pdf-glow-2 {
  bottom: -40px; left: -40px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(245,158,11,0.18), transparent 70%);
  filter: blur(20px);
}

/* Page indicator chips below the stack */
.pdf-stack-tabs {
  position: absolute;
  bottom: -54px; left: 0; right: 0;
  display: flex; justify-content: center; flex-wrap: nowrap;
  gap: 5px;
  z-index: 5;
  padding: 0 10px;
  overflow: visible;
}
.pdf-stack-tab {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
  transition: all 0.25s;
  flex-shrink: 0;
}
.pdf-stack-tab--active {
  background: rgba(92,130,232,0.22);
  border-color: rgba(92,130,232,0.45);
  color: #B8CDF6;
  font-weight: 800;
}
.pdf-stack-tab--more {
  background: transparent;
  border-style: dashed;
  color: rgba(255,255,255,0.40);
  font-family: var(--eng);
}
/* === Proposal motion + inside list (2026-05-25) === */
/* Synced subtle breathing — all pages move together for cohesion */
@keyframes pdfBreath {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.pdf-stack { animation: pdfBreath 5s ease-in-out infinite; }
.proposal-mockup:hover .pdf-stack { animation: none; }
/* Disable individual page animations — only stack breathes */
.pdf-stack-tab { transition: all 0.3s; }
.pdf-stack-tab:hover:not(.pdf-stack-tab--more) {
  background: rgba(92,130,232,0.16);
  border-color: rgba(92,130,232,0.30);
  color: rgba(255,255,255,0.85);
  cursor: default;
}

/* Inside list — proposal */
.pdf-inside {
  position: absolute;
  bottom: -220px; left: -6px; right: -6px;
  padding: 22px 24px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 4;
}
.pdf-inside-head {
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 800;
  color: #fff;
  margin-bottom: 14px;
  letter-spacing: -0.005em;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(255,255,255,0.10);
}
.pdf-inside-head svg {
  width: 16px; height: 16px;
  color: var(--brand-400);
  flex-shrink: 0;
}
.pdf-inside-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}
.pdf-inside-item {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 11px;
  line-height: 1.45;
  color: rgba(255,255,255,0.78);
  font-weight: 600;
}
.pdf-inside-num {
  flex-shrink: 0;
  font-family: var(--eng);
  font-size: 10px;
  font-weight: 800;
  color: var(--brand-400);
  background: rgba(92,130,232,0.14);
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  min-width: 22px;
  text-align: center;
}
.pdf-inside-item-more {
  grid-column: 1 / -1;
  justify-content: center;
  color: rgba(255,255,255,0.45);
  font-size: 10.5px;
  font-style: italic;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
/* Make space for the inside list */
.proposal-mockup { padding-bottom: 0; min-height: 440px; width: 100%; max-width: 340px; margin: 0 auto; }

.pdf-mock-badge {
  position: absolute; top: -18px; right: -14px;
  background: linear-gradient(135deg, var(--brand-600), var(--brand-400));
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 800;
  box-shadow: 0 12px 24px -4px rgba(38,96,219,0.55), 0 0 0 4px rgba(255,255,255,0.06);
  transform: rotate(8deg);
  z-index: 3;
  letter-spacing: 0.04em;

  z-index: 999 !important;
  position: absolute !important;
  top: -18px !important;
  right: 8px !important;
}

/* ========== CASE STUDIES — Premium Editorial ========== */
.cases-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 48px; gap: 32px;
}
.cases-head .eyebrow { margin-bottom: 14px; }
.cases-head .h2 {
  margin-bottom: 0;
  font-size: 40px;
  line-height: 1.4;
  letter-spacing: -0.025em;
  font-weight: 900;
}
.cases-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 700;
  color: var(--navy-900);
  padding: 12px 22px;
  border: 1.5px solid var(--gray-300);
  border-radius: 999px;
  background: #fff;
  transition: all 0.3s cubic-bezier(.2,.7,.2,1);
  white-space: nowrap;
}
.cases-link:hover {
  border-color: var(--brand-600);
  color: var(--brand-600);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -14px rgba(30,79,199,0.28);
}
.cases-link svg { width: 14px; height: 14px; }

.case-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.case {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  height: 420px;
  background-size: cover; background-position: center;
  isolation: isolate;
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1), box-shadow 0.5s;
  box-shadow: 0 16px 40px -16px rgba(11,21,36,0.24);
  cursor: pointer;
}
.case:hover {
  transform: translateY(-10px) scale(1.012);
  box-shadow: 0 44px 80px -22px rgba(30,79,199,0.32), 0 16px 32px -10px rgba(11,21,36,0.30);
}
/* 背景がうっすらズーム */
.case::after {
  content: "";
  position: absolute; inset: 0;
  background: inherit;
  background-size: cover;
  background-position: center;
  transition: transform 0.9s cubic-bezier(0.22,0.61,0.36,1);
  z-index: -1;
}
.case:hover::after {
  transform: scale(1.06);
}
.case::before {
  content: "";
  position: absolute; inset: 0;
  /* 上の見出し領域を強めに暗くして青文字のコントラスト確保 */
  background:
    linear-gradient(180deg,
      rgba(10,16,36,0.82) 0%,
      rgba(10,16,36,0.62) 22%,
      rgba(10,16,36,0.74) 52%,
      rgba(10,16,36,0.96) 100%),
    linear-gradient(135deg, rgba(30,79,199,0.18) 0%, transparent 60%);
  z-index: 1;
  transition: background 0.4s;
}
.case:hover::before {
  background:
    linear-gradient(180deg,
      rgba(10,16,36,0.78) 0%,
      rgba(10,16,36,0.58) 25%,
      rgba(10,16,36,0.76) 55%,
      rgba(10,16,36,0.97) 100%),
    linear-gradient(135deg, rgba(30,79,199,0.22) 0%, transparent 60%);
}
.case-inner {
  position: relative; z-index: 2;
  padding: 32px 34px 30px;
  color: #fff;
  height: 100%; display: flex; flex-direction: column;
}
.case-industry {
  font-family: var(--eng);
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.22em;
  color: #BFD2FF;
  margin-bottom: 14px;
  display: inline-flex; align-items: center; gap: 10px;
  text-shadow: 0 1px 8px rgba(10,16,36,0.6), 0 0 16px rgba(10,16,36,0.4);
}
.case-industry::before {
  content: ""; width: 22px; height: 1px;
  background: linear-gradient(90deg, #BFD2FF, rgba(191,210,255,0.3));
}
.case-title {
  font-size: 21px; font-weight: 800;
  line-height: 1.55; letter-spacing: -0.015em;
  margin-bottom: 20px;
  max-width: 300px;
}
.case-tags {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin-top: auto; margin-bottom: 24px;
}
.case-tag {
  font-size: 10.5px; font-weight: 600;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 5px 12px; border-radius: 999px;
  color: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.case-metrics {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.2);
}
.case-metric-label {
  font-size: 10.5px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 6px;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.case-metric-value {
  font-family: var(--eng);
  font-size: 36px; font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(135deg, #fff 0%, #a7c1ff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1);
}
.case:hover .case-metric-value {
  transform: translateY(-2px);
}
.case-metric-value .unit {
  font-size: 14px;
  font-weight: 700;
  opacity: 0.85;
  margin-left: 3px;
  -webkit-text-fill-color: rgba(255,255,255,0.85);
}
/* 業界写真 — テーマアセット配信 (WP テーマ /assets/images/ から) */
/* Unsplash CDN — 安定して全環境で配信 */
.case-1 { background-image: url('https://images.unsplash.com/photo-1581094794329-c8112a89af12?auto=format&fit=crop&w=1200&q=80'); background-position: center 35%; }
.case-2 { background-image: url('https://images.unsplash.com/photo-1554224155-8d04cb21cd6c?auto=format&fit=crop&w=1200&q=80'); background-position: center 45%; }
.case-3 { background-image: url('https://images.unsplash.com/photo-1554224154-22dec7ec8818?auto=format&fit=crop&w=1200&q=80'); background-position: center 50%; }

/* ========== 比較 + Orgchart (NEW 2026-05-25) ========== */
.embed-head-block { text-align: center; max-width: 820px; margin: 0 auto 50px; }
.embed-h2-center { text-align: center; color: var(--navy-900); }
.embed-lead-center { text-align: center; color: var(--gray-600); }
.eyebrow-light { color: var(--brand-600) !important; justify-content: center; }
.eyebrow-light::before { background: var(--brand-600) !important; }

/* 3-col comparison */
.fde-compare {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1180px;
  margin: 0 auto 56px;
}
.fde-compare-col {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 26px 26px 28px;
  position: relative;
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1), border-color 0.4s;
}
.fde-compare-col-hero {
  background: linear-gradient(180deg, #eff5ff 0%, #ffffff 100%);
  border-color: var(--brand-400);
  box-shadow: 0 0 0 1px rgba(30,79,199,0.18), 0 24px 56px -20px rgba(30,79,199,0.20);
  transform: translateY(-8px);
}
.fde-compare-col-hero::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--brand-400), transparent);
  border-radius: 18px 18px 0 0;
}
.fde-compare-head { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px dashed rgba(11,21,36,0.08); }
.fde-compare-tag {
  display: inline-block;
  font-family: var(--eng);
  font-size: 9.5px; font-weight: 800;
  letter-spacing: 0.20em;
  color: var(--gray-500);
  padding: 4px 10px;
  background: rgba(11,21,36,0.04);
  border-radius: 4px;
  margin-bottom: 12px;
}
.fde-compare-tag-hero {
  color: var(--brand-600);
  background: rgba(30,79,199,0.10);
  border: 1px solid rgba(30,79,199,0.20);
}
.fde-compare-name {
  font-size: 19px; font-weight: 800;
  color: var(--navy-900);
  letter-spacing: -0.01em;
}
.fde-compare-name small {
  font-size: 12px; font-weight: 600;
  color: var(--gray-500);
  margin-left: 4px;
}
.fde-compare-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 11px;
}
.fde-compare-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--gray-700);
}
.fde-compare-list-hero li { color: var(--navy-900); }
.fde-compare-list-hero li strong {
  color: var(--navy-900); font-weight: 800;
  background: linear-gradient(180deg, transparent 60%, rgba(30,79,199,0.20) 60%);
  padding: 0 2px;
}
.fde-mark {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 13px; font-weight: 800;
  font-family: var(--eng);
  margin-top: 1px;
}
.fde-mark-ok { background: rgba(11,21,36,0.06); color: var(--gray-500); }
.fde-mark-ng { background: rgba(11,21,36,0.10); color: var(--ink-400); }
.fde-mark-best { background: rgba(30,79,199,0.15); color: var(--brand-600); box-shadow: 0 0 0 1px rgba(30,79,199,0.30); }
.fde-compare-ribbon {
  margin-top: 20px;
  padding: 10px 14px;
  background: linear-gradient(135deg, var(--brand-600), var(--brand-400));
  border-radius: 8px;
  font-size: 12px; font-weight: 800;
  color: #fff;
  letter-spacing: 0.04em;
  text-align: center;
  box-shadow: 0 12px 24px -8px rgba(30,79,199,0.55);
}

/* 2-col grid V2: features left, orgchart right */
.embed-grid-v2 {
  display: grid; grid-template-columns: 1fr 1.05fr;
  gap: 60px; align-items: start;
}

/* Organization chart visual */
.embed-orgchart {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 22px;
  padding: 32px 28px 30px;
  position: relative;
}
.embed-orgchart-tag {
  font-family: var(--eng);
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--brand-400);
  margin-bottom: 8px;
}
.embed-orgchart-title {
  font-size: 19px; font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
}
.orgchart {
  display: flex; flex-direction: column;
  align-items: center;
  margin: 0 auto;
  padding: 8px 0 12px;
}
.orgchart-level {
  display: flex; justify-content: center; gap: 14px;
  width: 100%;
}
.orgchart-level-bottom .orgchart-node { flex: 1; }
.orgchart-line {
  width: 2px; height: 22px;
  background: linear-gradient(180deg, rgba(92,130,232,0.55), rgba(92,130,232,0.20));
  margin: 0 auto;
}
.orgchart-node {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex; flex-direction: column;
  align-items: center; gap: 2px;
  min-width: 92px;
  position: relative;
  transition: all 0.3s;
}
.orgchart-node:hover {
  border-color: rgba(92,130,232,0.40);
  background: rgba(92,130,232,0.08);
}
.orgchart-node-role {
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.005em;
}
.orgchart-node-sub {
  font-size: 9.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.50);
  letter-spacing: 0.02em;
}
.orgchart-node-exec {
  background: linear-gradient(135deg, rgba(11,21,36,0.6), rgba(20,32,54,0.6));
  border-color: rgba(255,255,255,0.18);
  min-width: 160px;
}
.orgchart-node-exec .orgchart-node-role { font-size: 13px; }
.orgchart-node-sm {
  min-width: 0;
  padding: 9px 8px;
}
.orgchart-node-sm .orgchart-node-role { font-size: 11px; }
.orgchart-node-bx {
  background: linear-gradient(135deg, var(--brand-600), var(--brand-400));
  border: 1px solid rgba(255,255,255,0.30);
  box-shadow: 0 12px 28px -8px rgba(30,79,199,0.60), 0 0 0 4px rgba(92,130,232,0.18);
  position: relative;
  transform: scale(1.05);
}
.orgchart-node-bx .orgchart-node-role,
.orgchart-node-bx .orgchart-node-sub { color: #fff; }
.orgchart-node-bx .orgchart-node-sub { color: rgba(255,255,255,0.78); }
.orgchart-node-bxmark {
  font-family: var(--eng);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.10em;
  color: #fff;
  background: rgba(255,255,255,0.22);
  padding: 2px 6px;
  border-radius: 4px;
  margin-bottom: 2px;
}
/* Pulse animation on BX node to emphasize embedded */
@keyframes embedPulse {
  0%, 100% { box-shadow: 0 12px 28px -8px rgba(30,79,199,0.60), 0 0 0 4px rgba(92,130,232,0.18), 0 0 0 0 rgba(92,130,232,0.40); }
  50% { box-shadow: 0 12px 28px -8px rgba(30,79,199,0.60), 0 0 0 4px rgba(92,130,232,0.18), 0 0 0 10px rgba(92,130,232,0); }
}
.orgchart-node-bx { animation: embedPulse 2.6s ease-in-out infinite; }

.embed-orgchart-foot {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column; gap: 9px;
}
.embed-orgchart-foot-item {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255,255,255,0.82);
  font-weight: 600;
}
.embed-orgchart-foot-item svg {
  width: 16px; height: 16px;
  color: #7CA0F0;
  flex-shrink: 0; margin-top: 2px;
}


/* ================================================================
 * BoostX BRAND LAYER (2026-05-25)
 * Manifesto / BX-Slash Underline / Hex-X Watermark / Number Signal
 * ================================================================ */

/* ========== MANIFESTO ========== */
.manifesto {
  background:
    radial-gradient(ellipse 60% 50% at 30% 20%, rgba(30,79,199,0.16), transparent 60%),
    radial-gradient(ellipse 50% 60% at 80% 90%, rgba(92,130,232,0.10), transparent 60%),
    linear-gradient(180deg, #0B1524 0%, #142036 50%, #0B1524 100%);
  color: #fff;
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
.manifesto::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  pointer-events: none;
}
/* Hex-X watermark — manifesto bottom right */
.manifesto-bg-mark {
  position: absolute;
  right: -80px; bottom: -100px;
  width: 520px; height: 520px;
  opacity: 0.05;
  pointer-events: none;
  background:
    linear-gradient(135deg, transparent 47%, #ffffff 47%, #ffffff 53%, transparent 53%),
    linear-gradient(45deg, transparent 47%, #ffffff 47%, #ffffff 53%, transparent 53%);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.manifesto .container { position: relative; z-index: 2; }

.manifesto-tag {
  display: flex; align-items: center; justify-content: center;
  gap: 18px;
  margin-bottom: 38px;
}
.manifesto-tag-line {
  width: 60px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-400));
}
.manifesto-tag-line:last-child {
  background: linear-gradient(90deg, var(--brand-400), transparent);
}
.manifesto-tag-text {
  font-family: var(--eng);
  font-size: 11.5px; font-weight: 800;
  letter-spacing: 0.24em;
  color: var(--brand-400);
  white-space: nowrap;
}

.manifesto-headline {
  text-align: center;
  font-size: 56px; font-weight: 900;
  line-height: 1.30;
  letter-spacing: -0.025em;
  color: #fff;
  margin-bottom: 60px;
}
.manifesto-em {
  background: linear-gradient(135deg, var(--brand-400) 0%, #7CA0F0 50%, var(--brand-400) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShimmer 4s ease-in-out infinite;
  position: relative;
}

.manifesto-body {
  max-width: 720px;
  margin: 0 auto 80px;
  text-align: center;
}
.manifesto-line {
  font-size: 18px;
  line-height: 1.85;
  color: rgba(255,255,255,0.75);
  font-weight: 500;
  margin-bottom: 26px;
  letter-spacing: 0.01em;
}
.manifesto-line strong {
  color: #fff;
  font-weight: 800;
  background: linear-gradient(180deg, transparent 65%, rgba(92,130,232,0.25) 65%);
  padding: 0 3px;
}
.manifesto-line-close {
  color: #fff;
  font-weight: 700;
  font-size: 19px;
  margin-bottom: 0;
  padding-top: 18px;
  border-top: 1px dashed rgba(255,255,255,0.12);
  margin-top: 38px;
  display: inline-block;
}



.manifesto-cta {
  margin-top: 8px;
  text-align: center;
}
.manifesto-cta-text {
  font-size: 15px;
  color: rgba(255,255,255,0.78);
  margin-bottom: 22px;
  letter-spacing: 0.01em;
}
.manifesto-cta-buttons {
  display: inline-flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.manifesto-cta-primary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--brand-600), var(--brand-500));
  color: #fff;
  font-size: 14.5px; font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 18px 38px -12px rgba(30,79,199,0.55), 0 0 0 1px rgba(255,255,255,0.10) inset;
  transition: transform 0.25s, box-shadow 0.25s;
}
.manifesto-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 48px -12px rgba(30,79,199,0.70), 0 0 0 1px rgba(255,255,255,0.12) inset;
}
.manifesto-cta-primary svg { width: 16px; height: 16px; }
.manifesto-cta-secondary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 26px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.01em;
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.manifesto-cta-secondary:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.30);
  transform: translateY(-2px);
}
.manifesto-cta-secondary svg { width: 14px; height: 14px; }


/* === BoostX Pledge to Customer (single commitment statement) === */
.pledge {
  margin: 64px auto 56px;
  max-width: 920px;
  display: flex;
  justify-content: center;
}
.pledge-card {
  position: relative;
  padding: 64px 64px 56px;
  background:
    linear-gradient(180deg, rgba(30,79,199,0.14) 0%, rgba(92,130,232,0.04) 100%);
  border: 1px solid rgba(92,130,232,0.30);
  border-radius: 22px;
  text-align: center;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 36px 80px -32px rgba(30,79,199,0.50), 0 0 0 1px rgba(92,130,232,0.12) inset;
  overflow: hidden;
  isolation: isolate;
}
/* Top accent */
.pledge-card::before {
  content: ""; position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 120px; height: 4px;
  background: linear-gradient(90deg, transparent, var(--brand-400), transparent);
  border-radius: 0 0 4px 4px;
}
/* Big watermark seal */
.pledge-card::after {
  content: "X";
  position: absolute; right: -40px; bottom: -60px;
  font-family: var(--eng);
  font-size: 320px;
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: rgba(92,130,232,0.06);
  pointer-events: none;
  z-index: 0;
}
.pledge-card > * { position: relative; z-index: 1; }

.pledge-seal {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-600), var(--brand-400));
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 26px;
  color: #fff;
  box-shadow: 0 16px 32px -8px rgba(30,79,199,0.55), 0 0 0 6px rgba(92,130,232,0.12);
}
.pledge-seal svg { width: 26px; height: 26px; }

.pledge-eyebrow {
  font-family: var(--eng);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.28em;
  color: var(--brand-400);
  margin-bottom: 22px;
}
.pledge-headline {
  font-size: 28px;
  font-weight: 900;
  line-height: 1.55;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 26px;
}
.pledge-em {
  background: linear-gradient(135deg, var(--brand-400) 0%, #7CA0F0 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pledge-body {
  font-size: 15px;
  line-height: 2.1;
  color: rgba(255,255,255,0.78);
  font-weight: 500;
  max-width: 640px;
  margin: 0 auto 32px;
}
.pledge-body strong {
  color: #fff;
  font-weight: 800;
  background: linear-gradient(180deg, transparent 60%, rgba(92,130,232,0.30) 60%);
  padding: 0 3px;
}
.pledge-sign {
  display: flex; align-items: center; justify-content: center;
  gap: 18px;
}
.pledge-sign-divider {
  width: 64px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.40), transparent);
}
.pledge-sign-text {
  font-family: var(--eng);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.20em;
  color: rgba(255,255,255,0.75);
}

@media (max-width: 880px) {
  .pledge-card { padding: 44px 28px 40px; }
  .pledge-headline { font-size: 22px; }
  .pledge-body { font-size: 14px; }
}

/* === BoostXの3つの流儀 (THE WAY) === */
.manifesto-intro {
  font-size: 17px;
  color: rgba(255,255,255,0.65);
  line-height: 2.1;
  margin-bottom: 38px;
}
.belief-tag {
  display: inline-block;
  font-family: var(--eng);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.24em;
  color: var(--brand-400);
  margin-bottom: 8px;
}
.belief-num {
  display: block;
  font-family: var(--eng);
  font-size: 32px;
  font-weight: 800;
  color: #fff;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 16px;
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #fff, rgba(92,130,232,0.55));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  border-radius: 0;
}
.belief-label {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.55;
  color: #fff;
  letter-spacing: -0.015em;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.manifesto-close {
  max-width: 720px;
  margin: 64px auto 0;
  text-align: center;
}
.manifesto-close-text {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: 1.75;
  letter-spacing: -0.005em;
  padding: 32px 40px;
  background: linear-gradient(135deg, rgba(30,79,199,0.18) 0%, rgba(92,130,232,0.10) 100%);
  border: 1px solid rgba(92,130,232,0.30);
  border-radius: 16px;
  position: relative;
}
.manifesto-close-text::before {
  content: ""; position: absolute; top: 0; left: 50%;
  width: 80px; height: 3px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--brand-400), #7CA0F0);
  border-radius: 0 0 3px 3px;
}
.manifesto-close-text strong {
  color: #fff;
  background: linear-gradient(135deg, var(--brand-400), #7CA0F0);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
}

/* ========== 3つの信念 ========== */
.beliefs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 88px;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}
.belief {
  position: relative;
  padding: 38px 32px 34px;
  background:
    linear-gradient(180deg, rgba(30,79,199,0.10) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(92,130,232,0.18);
  border-radius: 20px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1), border-color 0.5s, box-shadow 0.5s;
  overflow: hidden;
  isolation: isolate;
}
/* Top accent bar — always visible, brand gradient */
.belief::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-600), var(--brand-400), var(--brand-600));
  background-size: 200% 100%;
  border-radius: 20px 20px 0 0;
}
/* Huge ghost number as design anchor */
.belief::after {
  content: attr(data-num);
  position: absolute;
  top: 8px; right: 14px;
  font-family: var(--eng);
  font-size: 124px;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.06em;
  color: rgba(92,130,232,0.10);
  pointer-events: none;
  z-index: 0;
  transition: color 0.5s, transform 0.5s;
}
.belief:hover {
  transform: translateY(-10px);
  border-color: rgba(92,130,232,0.45);
  box-shadow: 0 36px 72px -22px rgba(30,79,199,0.40), 0 0 0 1px rgba(92,130,232,0.18) inset;
}
.belief:hover::after {
  color: rgba(92,130,232,0.18);
  transform: translateY(-4px) rotate(-2deg);
}
.belief > * { position: relative; z-index: 1; }

.belief-tag {
  display: inline-block;
  font-family: var(--eng);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.24em;
  color: var(--brand-400);
  padding: 5px 10px;
  background: rgba(92,130,232,0.14);
  border: 1px solid rgba(92,130,232,0.28);
  border-radius: 4px;
  margin-bottom: 22px;
}
/* Small inline num removed since ghost::after replaces it */
.belief-num {
  display: none;
}

.belief-label {
  font-size: 21px;
  font-weight: 900;
  line-height: 1.5;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  position: relative;
}
.belief-label::after {
  content: ""; position: absolute; bottom: -1px; left: 0;
  width: 32px; height: 1px;
  background: linear-gradient(90deg, var(--brand-400), transparent);
}
.belief-statement {
  font-size: 13.5px;
  line-height: 2.05;
  color: rgba(255,255,255,0.75);
  font-weight: 500;
}
.belief-statement strong {
  color: #fff;
  font-weight: 800;
  background: linear-gradient(180deg, transparent 60%, rgba(92,130,232,0.32) 60%);
  padding: 0 3px;
}

/* Subtle staggered gradient per card */
.belief:nth-child(1) {
  background: linear-gradient(180deg, rgba(30,79,199,0.12) 0%, rgba(255,255,255,0.02) 100%);
}
.belief:nth-child(2) {
  background: linear-gradient(180deg, rgba(92,130,232,0.10) 0%, rgba(255,255,255,0.02) 100%);
}
.belief:nth-child(3) {
  background: linear-gradient(180deg, rgba(124,160,240,0.10) 0%, rgba(255,255,255,0.02) 100%);
}

/* ========== Premium Number Signal ========== */
.brand-stats {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  max-width: 880px;
  margin: 0 auto;
  padding: 40px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.brand-stat {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
}
.brand-stat::before {
  content: ""; position: absolute; top: -20px; left: 50%;
  transform: translateX(-50%);
  width: 32px; height: 3px;
  background: linear-gradient(90deg, var(--brand-600), var(--brand-400));
}
.brand-stat-num {
  font-family: var(--eng);
  font-size: 68px;
  font-weight: 700;
  line-height: 0.95;
  color: #fff;
  font-style: normal;
  letter-spacing: -0.04em;
}
.brand-stat-unit {
  font-size: 22px;
  font-weight: 700;
  color: var(--brand-400);
  font-style: normal;
  margin-left: 4px;
  vertical-align: top;
  line-height: 1.4;
}
.brand-stat-label {
  font-family: var(--eng);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  margin-top: 10px;
}
.brand-stat-divider {
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.20), transparent);
}

/* ========== BX-Slash Underline (subtle, applied to key H2) ========== */
.problem-headline::after,
.why-head .h2::after,
.approach-head .h2::after,
.services-head .h2::after,
.embed-section .h2::after,
.tech .h2::after,
.blog .h2::after,
.faq .h2::after {
  content: '';
  display: block;
  width: 48px;
  height: 5px;
  margin: 18px auto 0;
  background: linear-gradient(110deg,
    #0B1524 0%, #0B1524 33%,
    #1E4FC7 33%, #1E4FC7 66%,
    #5C82E8 66%, #5C82E8 100%);
  clip-path: polygon(0 0, 100% 0, 92% 100%, 8% 100%);
}
/* Dark-section variant (manifesto/why/embed) */
.why-head .h2::after,
.embed-section .h2::after {
  background: linear-gradient(110deg,
    #B8CDF6 0%, #B8CDF6 33%,
    #5C82E8 33%, #5C82E8 66%,
    #1E4FC7 66%, #1E4FC7 100%);
}

@media (max-width: 880px) {
  .manifesto-headline { font-size: 38px; }
  .manifesto-line { font-size: 16px; }
  .beliefs { grid-template-columns: 1fr; }
  .brand-stats { flex-direction: column; gap: 28px; padding: 32px 0; }
  .brand-stat-divider { width: 80%; height: 1px; margin: 0 auto; align-self: center; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.20), transparent); }
  .brand-stat-num { font-size: 56px; }
}

/* ========== EMBEDDED SUPPORT — Premium Editorial ========== */

/* ========== EMBED V3 (Image-2 reference layout) ========== */
.embed-section-v3 {
  padding: 110px 0 !important;
  background:
    radial-gradient(ellipse 60% 50% at 20% 20%, rgba(30,79,199,0.16), transparent 60%),
    radial-gradient(ellipse 50% 60% at 90% 80%, rgba(92,130,232,0.08), transparent 60%),
    linear-gradient(180deg, #0B1524 0%, #142036 50%, #0B1524 100%) !important;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.embed-section-v3::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  pointer-events: none;
}
.embed-section-v3 .container { position: relative; z-index: 1; }

.embed-v3-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 72px;
  align-items: center;
}
.embed-v3-eyebrow {
  font-family: var(--eng);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.28em;
  color: var(--brand-400);
  margin-bottom: 28px;
}
.embed-v3-headline {
  font-size: 42px;
  font-weight: 900;
  line-height: 1.5;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
}
.embed-v3-lead {
  font-size: 14.5px;
  line-height: 2.0;
  color: rgba(255,255,255,0.72);
  font-weight: 500;
  margin-bottom: 44px;
}
.embed-v3-lead strong {
  color: #fff;
  font-weight: 800;
  background: linear-gradient(180deg, transparent 60%, rgba(92,130,232,0.28) 60%);
  padding: 0 3px;
}
.embed-v3-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.embed-v3-feat {
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.embed-v3-feat-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(92,130,232,0.16), rgba(30,79,199,0.06));
  border: 1px solid rgba(92,130,232,0.22);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand-400);
}
.embed-v3-feat-icon svg { width: 20px; height: 20px; }
.embed-v3-feat-label {
  font-size: 12.5px;
  font-weight: 800;
  color: #fff;
  line-height: 1.45;
  letter-spacing: -0.005em;
}
.embed-v3-feat-sub {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.62);
  line-height: 1.45;
  margin-top: 2px;
}

.embed-v3-photo {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 40px 80px -30px rgba(11,21,36,0.55),
    0 0 0 1px rgba(255,255,255,0.06) inset;
}
.embed-v3-photo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

@media (max-width: 1000px) {
  .embed-v3-grid { grid-template-columns: 1fr; gap: 48px; }
  .embed-v3-headline { font-size: 32px; }
  .embed-v3-features { grid-template-columns: repeat(2, 1fr); }
}

.section.embed-section {
  padding: 110px 0;
  background: linear-gradient(180deg, #fafaf7 0%, #f4f6fa 100%);
  position: relative;
  overflow: hidden;
}
.section.embed-section::before {
  content: "";
  position: absolute; top: 10%; left: -200px;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(30,79,199,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.embed-grid {
  display: grid; grid-template-columns: 1fr 1.2fr;
  gap: 72px; align-items: center;
  position: relative;
}
.embed-grid .eyebrow {
  color: var(--brand-600);
  margin-bottom: 18px;
}
.embed-grid .h2 {
  font-size: 40px;
  line-height: 1.4;
  margin-bottom: 22px;
  letter-spacing: -0.025em;
  font-weight: 900;
  color: var(--navy-900);
}
.embed-grid .h2 .em {
  background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-400) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.embed-grid .lead {
  font-size: 15px; margin-bottom: 32px; line-height: 1.95;
  color: var(--gray-600);
}

/* Premium feature cards — bigger numbered design */
.embed-features {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.embed-feat {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 24px 24px 22px;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid rgba(11,21,36,0.08);
  box-shadow: 0 1px 2px rgba(11,21,36,0.04), 0 12px 28px -16px rgba(11,21,36,0.10);
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1), border-color 0.35s, box-shadow 0.35s;
  position: relative;
  overflow: hidden;
}
.embed-feat::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-600), var(--brand-400));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1);
}
.embed-feat:hover {
  transform: translateY(-4px);
  border-color: var(--brand-400);
  box-shadow: 0 18px 40px -16px rgba(11,21,36,0.16), 0 2px 4px rgba(11,21,36,0.04);
}
.embed-feat:hover::before { transform: scaleX(1); }
.embed-feat-num {
  font-family: var(--eng);
  font-size: 14px; font-weight: 900;
  color: #fff;
  letter-spacing: -0.02em;
  width: 38px; height: 38px;
  background: linear-gradient(135deg, var(--brand-600), var(--brand-400));
  border: none;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 14px -4px rgba(30,79,199,0.4);
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1);
}
.embed-feat:hover .embed-feat-num {
  transform: scale(1.1) rotate(-4deg);
}
.embed-feat-text { padding-top: 4px; flex: 1; }
.embed-feat-name {
  font-size: 14.5px; font-weight: 800;
  color: var(--navy-900); line-height: 1.5;
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}
.embed-feat-desc {
  font-size: 12.5px; color: var(--gray-600); line-height: 1.75;
  font-weight: 500;
}

/* Featured testimonial card */
.embed-quote-card {
  margin-top: 24px;
  background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 100%);
  border-radius: 16px;
  padding: 24px 26px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.embed-quote-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--brand-600), var(--brand-400));
}
.embed-quote-card-mark {
  font-family: Georgia, serif;
  font-size: 36px; line-height: 0.6;
  color: rgba(92,130,232,0.5);
  margin-bottom: 8px;
  font-weight: 700;
}
.embed-quote-card-text {
  font-size: 13.5px;
  line-height: 1.85;
  color: rgba(255,255,255,0.92);
  font-weight: 500;
  margin-bottom: 14px;
}
.embed-quote-card-text strong {
  color: var(--brand-400);
  font-weight: 800;
}
.embed-quote-card-source {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  font-weight: 600;
  letter-spacing: 0.05em;
  display: inline-flex; align-items: center; gap: 8px;
}
.embed-quote-card-source::before {
  content: ""; width: 18px; height: 1px; background: rgba(255,255,255,0.4);
}

/* Premium photo treatment */
.embed-photo-wrap {
  position: relative;
}
.embed-photo {
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 40px 80px -30px rgba(11,21,36,0.40),
    0 0 0 1px rgba(11,21,36,0.04);
  aspect-ratio: 4/3.4;
  background: url('https://images.unsplash.com/photo-1552581234-26160f608093?auto=format&fit=crop&w=1600&q=85') center/cover;
  position: relative;
}
.embed-photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(11,21,36,0.30) 100%);
}
/* Floating stat card overlay on photo */
.embed-photo-stat {
  position: absolute;
  bottom: -24px; right: -20px;
  background: #fff;
  border-radius: 14px;
  padding: 18px 22px;
  box-shadow: 0 22px 44px -16px rgba(11,21,36,0.30), 0 0 0 1px rgba(11,21,36,0.04);
  z-index: 3;
  display: flex; align-items: center; gap: 14px;
}
.embed-photo-stat-icon {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, var(--brand-600), var(--brand-400));
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.embed-photo-stat-icon svg { width: 22px; height: 22px; }
.embed-photo-stat-text {
  display: flex; flex-direction: column;
}
.embed-photo-stat-value {
  font-family: var(--eng);
  font-size: 22px; font-weight: 900;
  color: var(--navy-900);
  letter-spacing: -0.02em;
  line-height: 1;
}
.embed-photo-stat-label {
  font-size: 11px;
  color: var(--gray-500);
  font-weight: 600;
  margin-top: 3px;
}
.embed-photo-stat-1 { bottom: -28px; right: -22px; }
.embed-photo-stat-2 { top: -24px; right: -24px; bottom: auto; }
.embed-photo-stat-icon-2 { background: linear-gradient(135deg, #163E9C, #2660DB) !important; }
.embed-photo-caption {
  margin-top: 56px;
  display: flex; align-items: flex-start; gap: 14px;
  padding: 0 8px;
}
.embed-photo-caption-line {
  width: 3px;
  min-width: 3px;
  align-self: stretch;
  background: linear-gradient(180deg, var(--brand-400), var(--brand-600));
  border-radius: 2px;
}
.embed-photo-caption-text {
  flex: 1;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--gray-700);
  font-weight: 500;
}
.embed-photo-caption-text strong {
  color: var(--navy-900);
  font-weight: 800;
  background: linear-gradient(180deg, transparent 60%, rgba(30,79,199,0.20) 60%);
  padding: 0 3px;
}

/* Top tag on photo */
.embed-photo-tag {
  position: absolute; top: 22px; left: 22px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--eng);
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--navy-900);
  z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
}
.embed-photo-tag::before {
  content: ""; width: 14px; height: 1.5px;
  background: var(--brand-600);
  border-radius: 1px;
}

/* ========== TECH STACK — Premium logo wall (design authority) ========== */
.tech {
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, #ffffff 0%, #f7f9fc 100%);
  /* TECH → BLOG 余白圧縮 */
  padding-bottom: 56px !important;
}
.section.blog { padding-top: 64px !important; }
.blog-head { margin-bottom: 36px !important; }
@media (max-width: 1080px) {
  .tech { padding-bottom: 48px !important; }
  .section.blog { padding-top: 48px !important; }
}
.tech-grid {
  display: flex; flex-direction: column;
  gap: 64px;
}
.tech-head { text-align: center; max-width: 720px; margin: 0 auto; }
.tech-head .eyebrow { justify-content: center; }
.tech-head .h2 { text-align: center; }
.tech-head .lead { text-align: center; margin: 0 auto; }

/* ============================================================
   Premium Category Cards (2026-05-28)
   第三者ロゴ撤去 → 自社デザインアイコン+カテゴリ表記で
   ブランド完全統一 (navy + brand-blue / 法的リスクゼロ)
   ============================================================ */
.tech-cats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
}
.tech-cat {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(11,21,36,0.07);
  border-radius: 16px;
  padding: 28px 24px 24px;
  display: flex; flex-direction: column;
  gap: 12px;
  transition: transform 0.32s cubic-bezier(.2,.7,.2,1),
              border-color 0.32s,
              box-shadow 0.32s,
              background 0.32s;
  box-shadow: 0 2px 8px -2px rgba(11,21,36,0.03);
  overflow: hidden;
}
/* 上部アクセントバー (デフォルト微表示・ホバーでフル展開) */
.tech-cat::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-600), var(--brand-400));
  transform: scaleX(0.18);
  transform-origin: left center;
  opacity: 0.55;
  transition: transform 0.55s cubic-bezier(.2,.7,.2,1), opacity 0.4s;
}
/* 右上の微細なコーナーアクセント (ラジアル) */
.tech-cat::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 120px; height: 120px;
  background: radial-gradient(circle at 100% 0%, rgba(30,79,199,0.06) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0.7;
  transition: opacity 0.4s;
}
.tech-cat:hover {
  transform: translateY(-5px);
  border-color: rgba(30,79,199,0.32);
  box-shadow: 0 26px 42px -14px rgba(30,79,199,0.20),
              0 10px 16px -8px rgba(11,21,36,0.10);
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
}
.tech-cat:hover::before { transform: scaleX(1); opacity: 1; }
.tech-cat:hover::after { opacity: 1; }

/* アイコン円 */
.tech-cat-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(30,79,199,0.10), rgba(92,130,232,0.06));
  color: var(--brand-600);
  flex-shrink: 0;
  transition: background 0.32s, color 0.32s, transform 0.4s cubic-bezier(.34,1.4,.64,1);
}
.tech-cat:hover .tech-cat-icon {
  background: linear-gradient(135deg, var(--brand-600), var(--brand-500));
  color: #ffffff;
  transform: scale(1.06) rotate(-2deg);
  box-shadow: 0 8px 16px -4px rgba(30,79,199,0.30);
}
.tech-cat-icon svg {
  width: 28px; height: 28px;
  stroke: currentColor;
}

/* カテゴリ名 */
.tech-cat-name {
  font-family: var(--display);
  font-size: 16.5px;
  font-weight: 800;
  color: var(--navy-900);
  letter-spacing: -0.005em;
  line-height: 1.4;
  margin: 0;
}
/* 説明 */
.tech-cat-desc {
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--gray-600);
  margin: 0;
  flex: 1; /* push examples to bottom */
}

/* 対応例 chip 列 */
.tech-cat-examples {
  display: flex; flex-wrap: wrap; gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
  padding-top: 4px;
}
.tech-cat-examples li {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--navy-700);
  background: rgba(30,79,199,0.06);
  border: 1px solid rgba(30,79,199,0.10);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.28s, border-color 0.28s, color 0.28s;
}
.tech-cat:hover .tech-cat-examples li {
  background: rgba(30,79,199,0.10);
  border-color: rgba(30,79,199,0.18);
  color: var(--brand-700);
}

/* "+ 他にも対応" chip — brand強調で「これ以外もいける」を明示 */
.tech-cat-examples li.tech-cat-more {
  background: linear-gradient(135deg, var(--brand-600), var(--brand-500));
  border-color: transparent;
  color: #ffffff;
  font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow: 0 3px 8px -2px rgba(30,79,199,0.32);
}
.tech-cat:hover .tech-cat-examples li.tech-cat-more {
  background: linear-gradient(135deg, var(--brand-700), var(--brand-600));
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 5px 12px -3px rgba(30,79,199,0.45);
}

/* ===== Bridge Card: 「ここに載っていないツールも対応可能」
   2026-05-28 ライトトーン化: navy暗背景 → 白＋淡ブルーグラデで
   サイト全体トーン(白基調)と完全一致させてセクション内で浮かなくする ===== */
.tech-bridge {
  position: relative;
  margin-top: 28px;
  padding: 30px 38px;
  border-radius: 20px;
  background: linear-gradient(135deg, #f5f9ff 0%, #ffffff 55%, #eff5ff 100%);
  color: var(--navy-900);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  border: 1px solid rgba(30,79,199,0.14);
  box-shadow: 0 18px 36px -16px rgba(30,79,199,0.18),
              0 1px 0 0 rgba(30,79,199,0.04) inset;
  overflow: hidden;
}
/* 背景のグロー (左上→右下に呼吸・控えめ) */
.tech-bridge-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 70% at 0% 0%, rgba(30,79,199,0.07), transparent 65%),
    radial-gradient(ellipse 50% 60% at 100% 100%, rgba(92,130,232,0.10), transparent 65%);
  pointer-events: none;
  animation: techBridgeGlow 16s ease-in-out infinite alternate;
  opacity: 1;
}
@keyframes techBridgeGlow {
  0%   { transform: scale(1); opacity: 0.85; }
  100% { transform: scale(1.06); opacity: 1; }
}
/* グリッド模様は白基調では浮くので削除 */
.tech-bridge::before { display: none; }

/* アイコン: brand-blue グラデ円で確実な視線誘導 */
.tech-bridge-icon {
  position: relative;
  width: 64px; height: 64px;
  border-radius: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand-600), var(--brand-500));
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: 0 12px 22px -8px rgba(30,79,199,0.40),
              0 0 0 4px rgba(30,79,199,0.06);
}
.tech-bridge-icon svg {
  width: 30px; height: 30px;
  animation: techBridgePulse 3.6s ease-in-out infinite;
}
@keyframes techBridgePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
.tech-bridge-content {
  position: relative;
  display: flex; flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.tech-bridge-eyebrow {
  font-family: var(--eng);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.20em;
  color: var(--brand-600);
  margin: 0;
  text-transform: uppercase;
}
.tech-bridge-title {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.42;
  color: var(--navy-900);
  margin: 0;
  letter-spacing: -0.005em;
}
.tech-bridge-desc {
  font-size: 13px;
  line-height: 1.7;
  color: var(--gray-600);
  margin: 4px 0 0;
}
.tech-bridge-desc strong {
  color: var(--navy-900);
  font-weight: 700;
}
/* Bridge CTA: brand-blue 背景 + 白文字 (サイト主要CTAと統一) */
.tech-bridge-cta {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 24px;
  border-radius: 999px;
  background: var(--brand-600) !important;
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-decoration: none;
  flex-shrink: 0;
  transition: transform 0.32s cubic-bezier(.2,.7,.2,1), box-shadow 0.32s, background 0.32s;
  box-shadow: 0 12px 24px -8px rgba(30,79,199,0.45),
              0 0 0 0 rgba(30,79,199,0);
  white-space: nowrap;
}
.tech-bridge-cta svg {
  width: 16px; height: 16px;
  color: #ffffff !important;
  stroke: #ffffff !important;
  transition: transform 0.32s;
}
.tech-bridge-cta:hover {
  transform: translateY(-2px);
  background: var(--brand-500) !important;
  box-shadow: 0 18px 34px -10px rgba(30,79,199,0.55),
              0 0 0 5px rgba(30,79,199,0.10);
}
.tech-bridge-cta:hover svg { transform: translateX(4px); }

/* レスポンシブ */
@media (max-width: 1080px) {
  .tech-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .tech-bridge { padding: 28px 28px; gap: 22px; }
  .tech-bridge-title { font-size: 19px; }
}
@media (max-width: 760px) {
  .tech-bridge {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon content"
      "cta cta";
    padding: 26px 22px;
    gap: 18px;
    border-radius: 18px;
  }
  .tech-bridge-icon { grid-area: icon; width: 52px; height: 52px; border-radius: 14px; }
  .tech-bridge-icon svg { width: 26px; height: 26px; }
  .tech-bridge-content { grid-area: content; }
  .tech-bridge-cta { grid-area: cta; justify-content: center; padding: 14px 20px; }
  .tech-bridge-br { display: none; }
  .tech-bridge-title { font-size: 17px; line-height: 1.45; }
  .tech-bridge-desc { font-size: 12.5px; }
  .tech-bridge-eyebrow { font-size: 10px; letter-spacing: 0.18em; }
}
@media (max-width: 600px) {
  .tech-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tech-cat { padding: 22px 16px 18px; gap: 10px; border-radius: 14px; }
  .tech-cat-icon { width: 44px; height: 44px; border-radius: 12px; }
  .tech-cat-icon svg { width: 24px; height: 24px; }
  .tech-cat-name { font-size: 14px; line-height: 1.35; }
  .tech-cat-desc { font-size: 11.5px; line-height: 1.65; }
  .tech-cat-examples { gap: 4px; }
  .tech-cat-examples li { font-size: 9.5px; padding: 3px 7px; }
  .tech-cat-examples li.tech-cat-more { font-size: 9.5px; }
}
@media (max-width: 380px) {
  .tech-cats { grid-template-columns: 1fr; }
}

/* === Premium logo wall: 2x5 grid with subtle dividers, no card boxes === */
.tech-logos {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  background: #fff;
  border: 1px solid rgba(11,21,36,0.06);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(11,21,36,0.10), 0 0 0 1px rgba(11,21,36,0.02);
}
.tech-logo {
  background: #fff;
  border: none;
  border-right: 1px solid rgba(11,21,36,0.06);
  border-bottom: 1px solid rgba(11,21,36,0.06);
  border-radius: 0;
  padding: 40px 24px 32px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px;
  min-height: 168px;
  transition: background 0.35s cubic-bezier(.2,.7,.2,1);
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Remove right border on last column (5th), bottom border on last row */
.tech-logo:nth-child(5n) { border-right: none; }
.tech-logo:nth-last-child(-n+5) { border-bottom: none; }
/* Subtle accent line that grows on hover */
.tech-logo::after {
  content: "";
  position: absolute; bottom: 0; left: 50%;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--brand-600), var(--brand-400));
  transform: translateX(-50%);
  transition: width 0.4s cubic-bezier(.2,.7,.2,1);
}
.tech-logo:hover {
  background: linear-gradient(180deg, #ffffff 0%, rgba(30,79,199,0.025) 100%);
}
.tech-logo:hover::after { width: 60%; }

.tech-logo-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-500);
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-transform: none;
  transition: color 0.3s;
}
.tech-logo:hover .tech-logo-name { color: var(--navy-900); }

/* Full color logos with subtle hover scale */
.tech-logo img {
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
}
.tech-logo:hover img {
  transform: scale(1.08);
}
.tech-logo-img {
  height: 56px;
  width: 100%;
  max-width: 100%;
  display: flex; align-items: center; justify-content: center;
}
/* All logos: rendered at perceptually equal visual weight (元のオリジナル設計) */
.tech-logo-img img,
.tech-logo-img > svg {
  max-height: 44px;
  max-width: 140px;
  width: auto;
  height: 44px;
  object-fit: contain;
  display: block;
  image-rendering: -webkit-optimize-contrast;
}
.tech-logo-img > svg {
  width: 44px;
  height: 44px;
  transition: transform 0.3s ease;
}
.tech-logo:hover .tech-logo-img > svg {
  transform: scale(1.08);
}
/* Square-ish wide logos (Salesforce cloud, ratio ~1.5:1) */
.tech-logo-img img.tl-square-wide {
  max-height: 42px;
  max-width: 86px;
}
/* Wide wordmarks (Claude/OpenAI/HubSpot, ratio ~3.5-4.7:1) */
.tech-logo-img img.tl-wide {
  max-height: 32px;
  max-width: 150px;
}
/* Extra-wide (Google Workspace, ratio ~7.9:1) */
.tech-logo-img img.tl-extra-wide {
  max-height: 22px;
  max-width: 180px;
}
.tech-logo-img svg { max-height: 44px; max-width: 140px; width: auto; height: auto; }

.tech-note {
  text-align: center;
  font-size: 12px;
  color: var(--ink-500);
  margin-top: 12px;
  letter-spacing: 0.10em;
  font-weight: 600;
  text-transform: uppercase;
  font-family: var(--eng);
  letter-spacing: 0.1em;
  font-weight: 500;
}
.tech-note span { color: var(--gray-300); margin: 0 16px; }

/* ========== BLOG / INSIGHTS — Premium ========== */
.blog { background: linear-gradient(180deg, #fafaf7 0%, #f4f6fa 100%); }
.blog-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 48px; gap: 32px;
}
.blog-head .h2 {
  margin-bottom: 0;
  font-size: 40px;
  letter-spacing: -0.025em;
  font-weight: 900;
  line-height: 1.4;
}
.blog-head .eyebrow { margin-bottom: 14px; }
.blog-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 700;
  color: var(--navy-900);
  padding: 12px 22px;
  border: 1.5px solid var(--gray-300);
  border-radius: 999px;
  background: #fff;
  transition: all 0.3s cubic-bezier(.2,.7,.2,1);
  white-space: nowrap;
}
.blog-link:hover {
  border-color: var(--brand-600);
  color: var(--brand-600);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -14px rgba(30,79,199,0.28);
}
.blog-link svg { width: 14px; height: 14px; }

.blog-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.blog-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--gray-150);
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1), box-shadow 0.4s, border-color 0.4s;
  display: flex; flex-direction: column;
  box-shadow: 0 4px 14px -8px rgba(11,21,36,0.06);
}
.blog-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 32px 64px -22px rgba(11,21,36,0.22);
  border-color: var(--brand-400);
}
.blog-thumb {
  aspect-ratio: 16/9;
  background-size: cover; background-position: center;
  position: relative;
  overflow: hidden;
}
.blog-thumb::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,21,36,0) 50%, rgba(11,21,36,0.6) 100%);
  z-index: 1;
}
.blog-thumb::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(30,79,199,0);
  transition: background 0.4s;
}
.blog-card:hover .blog-thumb::after {
  background: rgba(30,79,199,0.08);
}
.blog-body {
  padding: 28px 28px 26px;
  display: flex; flex-direction: column;
  flex: 1;
}
.blog-tag {
  display: inline-flex; align-self: flex-start;
  padding: 5px 12px; border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-600);
  font-family: var(--eng);
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 18px;
}
.blog-title {
  font-size: 17px; font-weight: 800;
  color: var(--navy-900);
  line-height: 1.6; letter-spacing: -0.005em;
  margin-bottom: 20px;
  flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s;
}
.blog-card:hover .blog-title { color: var(--brand-700); }
.blog-meta {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: var(--gray-500);
  padding-top: 16px;
  border-top: 1px solid var(--gray-100);
}
.blog-date {
  font-family: var(--eng);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.blog-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--brand-600); font-weight: 700; font-size: 11.5px;
  transition: transform 0.3s cubic-bezier(.2,.7,.2,1);
}
.blog-arrow svg { width: 12px; height: 12px; }
.blog-card:hover .blog-arrow { transform: translateX(6px); }

/* Blog thumbnails (skeleton 用フォールバック) */
.blog-thumb-1 { background-image: url('https://images.unsplash.com/photo-1504384308090-c894fdcc538d?auto=format&fit=crop&w=1200&q=80'); }
.blog-thumb-2 { background-image: url('https://images.unsplash.com/photo-1450101499163-c8848c66ca85?auto=format&fit=crop&w=1200&q=80'); }
.blog-thumb-3 { background-image: url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1200&q=80'); }

/* Skeleton loading state — pulse shimmer */
.blog-card-skeleton {
  pointer-events: none;
}
.blog-card-skeleton .blog-thumb {
  position: relative;
  background-color: #e8edf5;
}
.blog-card-skeleton .blog-thumb::before {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.5) 50%,
    rgba(255,255,255,0) 100%
  );
  animation: blogShimmer 1.6s ease-in-out infinite;
}
@keyframes blogShimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.blog-card-skeleton .blog-tag,
.blog-card-skeleton .blog-title,
.blog-card-skeleton .blog-date {
  background: linear-gradient(90deg, #eef1f7 0%, #f7f9fc 50%, #eef1f7 100%);
  background-size: 200% 100%;
  color: transparent;
  border-radius: 6px;
  animation: blogShimmerBg 1.6s ease-in-out infinite;
}
.blog-card-skeleton .blog-tag { background-color: #eef1f7 !important; }
@keyframes blogShimmerBg {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Live state — 通常表示（skeleton 削除後） */
.blog-card[data-live] .blog-thumb {
  background-color: #e8edf5;
}

/* ========== FINAL CTA WITH JAPAN BG ========== */
.final-cta {
  position: relative;
  padding: 90px 0;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(105deg, rgba(8,14,32,0.78) 0%, rgba(11,22,52,0.60) 50%, rgba(16,38,90,0.72) 100%),
    url('https://images.unsplash.com/photo-1554189097-ffe88e998a2b?auto=format&fit=crop&w=1920&q=80') center/cover;
  background-color: #0a1024;
  color: #fff;
}
.final-cta::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 22% 28%, rgba(26,92,240,0.28), transparent 50%),
    radial-gradient(circle at 78% 72%, rgba(38,112,255,0.20), transparent 55%);
  z-index: -1;
}
.final-cta::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  z-index: -1;
  mask-image: radial-gradient(ellipse at center, black 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 25%, transparent 78%);
}
.final-cta-inner {
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}
.final-cta-eyebrow {
  font-family: var(--eng);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--brand-400);
  margin-bottom: 26px;
  display: inline-flex; align-items: center; gap: 12px;
}
.final-cta-eyebrow::before { content: ""; width: 28px; height: 1.5px; background: var(--brand-400); }
.final-cta-eyebrow::after { content: ""; width: 28px; height: 1.5px; background: var(--brand-400); }
.final-cta-title {
  font-size: 44px; font-weight: 800;
  line-height: 1.45; letter-spacing: -0.02em;
  margin-bottom: 22px;
  color: #fff;
}
.final-cta-title .em { color: var(--brand-400); }
.final-cta-desc {
  font-size: 16px; line-height: 2;
  color: rgba(255,255,255,0.78);
  max-width: 720px;
  margin: 0 auto 48px;
  font-weight: 500;
}
.final-cta-actions {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 18px;
  max-width: 720px;
  margin: 0 auto;
}
.btn-cta-large {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--brand-600); color: #fff;
  padding: 22px 32px; border-radius: 10px;
  font-size: 15.5px; font-weight: 700;
  letter-spacing: 0.02em;
  transition: all 0.25s;
  box-shadow: 0 16px 42px -12px rgba(38,96,219,0.62), 0 0 0 1px rgba(255,255,255,0.06) inset;
}
.btn-cta-large:hover {
  background: var(--brand-500);
  transform: translateY(-3px);
  box-shadow: 0 22px 54px -10px rgba(38,96,219,0.78), 0 0 0 1px rgba(255,255,255,0.1) inset;
}
.btn-cta-large svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ===== リファレンス準拠 CTA — オレンジバッジ + 青大型 + 円矢印 ===== */
.btn-conversion {
  display: inline-block;
  width: 100%;
  max-width: 440px;
  background: linear-gradient(135deg, #2660DB 0%, #1E4FC7 100%);
  color: #fff;
  border-radius: 16px;
  text-decoration: none;
  box-shadow:
    0 22px 44px -12px rgba(30,79,199,0.55),
    0 8px 18px -8px rgba(11,21,36,0.18),
    inset 0 1px 0 rgba(255,255,255,0.18);
  transition: transform 0.28s cubic-bezier(.2,.7,.2,1), box-shadow 0.28s, filter 0.28s;
  position: relative;
  overflow: hidden;
  margin-top: 18px;
}
.btn-conversion::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 50%);
  pointer-events: none;
}
.btn-conversion:hover {
  transform: translateY(-3px);
  box-shadow:
    0 30px 56px -12px rgba(30,79,199,0.68),
    0 12px 24px -8px rgba(11,21,36,0.24),
    inset 0 1px 0 rgba(255,255,255,0.24);
  filter: brightness(1.04);
}
.btn-conversion-inner {
  display: flex; align-items: center; justify-content: center;
  gap: 16px;
  padding: 22px 32px;
  position: relative;
  z-index: 2;
}
/* オレンジバッジは廃止 */
.btn-conversion-badge { display: none !important; }
.btn-conversion-title {
  font-size: 20px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(11,21,36,0.18);
}
.btn-conversion-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: rgba(255,255,255,0.20);
  border-radius: 50%;
  flex-shrink: 0;
  backdrop-filter: blur(6px);
  transition: background 0.28s, transform 0.28s;
}
.btn-conversion:hover .btn-conversion-arrow {
  background: rgba(255,255,255,0.32);
  transform: translateX(3px);
}
.btn-conversion-arrow svg { width: 18px; height: 18px; color: #fff; }
.why-cta { text-align: center; margin-top: 40px; }
.why-cta .why-cta-text { color: var(--gray-600); font-size: 15px; }
.why-cta .btn-conversion { display: inline-block; }
@media (max-width: 768px) {
  .btn-conversion { max-width: 100%; }
  .btn-conversion-inner { padding: 18px 20px; gap: 10px; }
  .btn-conversion-title { font-size: 18px; }
  .btn-conversion-badge { font-size: 11px; padding: 3px 10px; }
  .btn-conversion-arrow { width: 38px; height: 38px; }
}

/* ===== Legacy 招待型 CTA CSS (deprecated, retained for safety) ===== */
.why-cta-v2 {
  text-align: center;
  margin-top: 56px;
  padding: 40px 32px;
  background: linear-gradient(180deg, rgba(30,79,199,0.02) 0%, rgba(30,79,199,0.06) 100%);
  border: 1px solid rgba(30,79,199,0.10);
  border-radius: 24px;
  position: relative;
  overflow: hidden;
}
.why-cta-v2::before {
  content: "";
  position: absolute;
  top: -50%; left: -10%;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(92,130,232,0.10) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: whyCtaAura 8s ease-in-out infinite;
}
.why-cta-v2::after {
  content: "";
  position: absolute;
  bottom: -40%; right: -10%;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(38,96,219,0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: whyCtaAura 9s ease-in-out infinite reverse;
}
@keyframes whyCtaAura {
  0%, 100% { transform: scale(1) translate(0,0); }
  50%      { transform: scale(1.08) translate(20px, -10px); }
}
/* リード（軽やかな招待文・残席プレッシャーなし） */
.why-cta-lead-soft {
  font-family: 'Noto Serif JP', serif;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--gray-600);
  letter-spacing: 0.02em;
  margin-bottom: 14px;
  position: relative;
  z-index: 2;
}
.why-cta-lead-soft strong {
  color: var(--navy-900);
  font-weight: 800;
}
.why-cta-v2 .why-cta-text {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy-900);
  line-height: 1.7;
  margin-bottom: 28px;
  position: relative;
  z-index: 2;
}
.why-cta-v2 .why-cta-text strong {
  background: linear-gradient(180deg, transparent 65%, rgba(30,79,199,0.22) 65%);
  padding: 0 4px;
  font-weight: 900;
}
.why-cta-br-mobile { display: none; }
/* ★★ メインCTA ボタン — マジネティック・大胆設計 ★★ */
.btn-cta-hero {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 18px;
  padding: 22px 36px 22px 30px;
  background: linear-gradient(135deg, #2660DB 0%, #1E4FC7 55%, #163E9C 100%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  color: #fff;
  border-radius: 14px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow:
    0 18px 44px -10px rgba(30,79,199,0.55),
    0 8px 18px -6px rgba(11,21,36,0.18),
    inset 0 1px 0 rgba(255,255,255,0.18);
  transition:
    transform 0.32s cubic-bezier(.34,1.4,.64,1),
    box-shadow 0.32s,
    background-position 0.45s,
    filter 0.32s;
  position: relative;
  z-index: 2;
  cursor: pointer;
  min-width: 360px;
  max-width: 540px;
  width: fit-content;
}
.btn-cta-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.20) 0%,
    rgba(255,255,255,0) 35%,
    rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.12) 100%);
  pointer-events: none;
  opacity: 0.85;
}
.btn-cta-hero:hover {
  transform: translateY(-3px) scale(1.015);
  background-position: 100% 50%;
  box-shadow:
    0 28px 64px -12px rgba(30,79,199,0.65),
    0 12px 24px -6px rgba(11,21,36,0.24),
    inset 0 1px 0 rgba(255,255,255,0.24);
  filter: brightness(1.05);
}
.btn-cta-hero:active {
  transform: translateY(-1px) scale(1.005);
}
.btn-cta-hero-badge { display: none !important; }
.btn-cta-hero-main {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  text-align: left;
  z-index: 2;
}
.btn-cta-hero-title {
  font-size: 21px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(11,21,36,0.18);
}
.btn-cta-hero-sub {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.88);
}
.btn-cta-hero-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: rgba(255,255,255,0.18);
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.32s, transform 0.32s;
  backdrop-filter: blur(8px);
}
.btn-cta-hero:hover .btn-cta-hero-arrow {
  background: rgba(255,255,255,0.32);
  transform: translateX(4px);
}
.btn-cta-hero-arrow svg { color: #fff; }
/* 信頼保証ストリップ */
.why-cta-assurance {
  list-style: none;
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 20px 28px;
  margin: 22px 0 0;
  padding: 0;
  position: relative;
  z-index: 2;
}
.why-cta-assurance li {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gray-600);
  letter-spacing: 0.01em;
}
.why-cta-assurance li svg {
  width: 14px; height: 14px;
  color: #16a34a;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .why-cta-v2 { padding: 32px 20px; margin-top: 40px; border-radius: 18px; }
  .why-cta-urgency-chip { font-size: 12px; padding: 6px 14px; }
  .why-cta-v2 .why-cta-text { font-size: 15.5px; line-height: 1.75; margin-bottom: 22px; }
  .why-cta-br-mobile { display: inline; }
  .btn-cta-hero { min-width: 0; width: 100%; padding: 18px 22px 18px 18px; gap: 12px; }
  .btn-cta-hero-title { font-size: 17px; }
  .btn-cta-hero-sub { font-size: 10.5px; }
  .btn-cta-hero-badge { font-size: 10px; padding: 4px 10px; top: -10px; }
  .btn-cta-hero-arrow { width: 36px; height: 36px; }
  .why-cta-assurance { gap: 12px 18px; margin-top: 18px; }
  .why-cta-assurance li { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .why-cta-v2::before, .why-cta-v2::after, .why-cta-urgency-dot { animation: none !important; }
}

.btn-cta-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  background: rgba(255,255,255,0.05);
  border: 1.5px solid rgba(255,255,255,0.28);
  color: #fff;
  padding: 22px 32px; border-radius: 10px;
  font-size: 15.5px; font-weight: 700;
  letter-spacing: 0.02em;
  transition: all 0.25s;
  backdrop-filter: blur(8px);
}
.btn-cta-outline:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.5);
  transform: translateY(-3px);
}
.btn-cta-outline svg { width: 18px; height: 18px; flex-shrink: 0; }
.final-cta-trust {
  margin-top: 36px;
  display: flex; align-items: center; justify-content: center;
  gap: 28px; flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
}
.final-cta-trust-item {
  display: inline-flex; align-items: center; gap: 7px;
}
.final-cta-trust-item svg { width: 14px; height: 14px; color: var(--brand-400); }

/* ========== FOOTER (front-page専用スコープ CODEX指摘 2026-05-28)
   テーマ既存フッターと衝突しないよう body.home/.page-front-page 配下に限定 */
body.home .site-footer,
body.page-front-page .site-footer {
  background:
    radial-gradient(ellipse 70% 50% at 20% 0%, rgba(30,79,199,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 100%, rgba(92,130,232,0.06) 0%, transparent 60%),
    linear-gradient(180deg, #0a0f1f 0%, #0B1524 100%);
  color: rgba(255,255,255,0.6);
  padding: 80px 0 32px;
  font-size: 13px;
  position: relative;
  overflow: hidden;
}
body.home .site-footer::before,
body.page-front-page .site-footer::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(92,130,232,0.40), transparent);
}
body.home .site-footer::after,
body.page-front-page .site-footer::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 85%);
  pointer-events: none;
}
.site-footer .container { position: relative; z-index: 1; }
.footer-top {
  display: grid;
  grid-template-columns: 1.55fr 1fr 1fr 1fr;
  gap: 60px;
  padding-bottom: 52px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 32px;
}
/* Brand block */
.footer-brand .logo {
  color: #fff;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.025em;
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 28px;
}
.footer-brand .logo-mark { width: 38px; height: 38px; flex-shrink: 0; }
.footer-brand .logo-mark svg {
  width: 100%; height: 100%;
  filter: drop-shadow(0 0 14px rgba(92,130,232,0.30));
}
.footer-desc {
  font-size: 13px;
  line-height: 2.0;
  color: rgba(255,255,255,0.55);
  max-width: 340px;
  font-weight: 500;
}
/* Column headers — brand-blue accent style */
.footer-col h4 {
  font-size: 11px; font-weight: 800;
  color: var(--brand-400);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 26px;
  font-family: var(--eng);
  position: relative;
  padding-bottom: 14px;
}
.footer-col h4::after {
  content: "";
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(92,130,232,0.40), rgba(255,255,255,0.05));
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 14px; }
.footer-col a {
  font-size: 13.5px;
  color: rgba(255,255,255,0.78);
  transition: color 0.25s, transform 0.25s, padding-left 0.25s;
  display: inline-flex; align-items: center;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.footer-col a:hover {
  color: #fff;
  padding-left: 4px;
}
.footer-col a::before {
  content: "→";
  display: inline-block;
  margin-right: 0;
  width: 0; overflow: hidden;
  opacity: 0;
  color: var(--brand-400);
  transition: width 0.25s, opacity 0.25s, margin-right 0.25s;
}
.footer-col a:hover::before {
  width: 14px;
  margin-right: 6px;
  opacity: 1;
}
/* Bottom bar */
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11.5px;
  color: rgba(255,255,255,0.40);
  font-weight: 500;
  letter-spacing: 0.04em;
  padding-top: 24px;
}
.footer-bottom .legal { display: flex; gap: 32px; }
.footer-bottom .legal a {
  color: rgba(255,255,255,0.50);
  font-weight: 500;
  transition: color 0.25s;
}
.footer-bottom .legal a:hover {
  color: var(--brand-400);
}

/* ===== Hero Scroll Cue — STORY へ誘うリンク化 ===== */
.hero-scroll-cue {
  position: absolute;
  bottom: 32px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  z-index: 3;
  color: var(--gray-600);
  text-decoration: none;
  font-family: var(--eng);
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.28em;
  cursor: pointer;
  transition: color 0.35s, transform 0.35s;
}
.hero-scroll-cue:hover {
  color: var(--brand-600);
  transform: translateX(-50%) translateY(-4px);
}
.hero-scroll-cue-label {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.hero-scroll-cue-label-en { color: var(--gray-500); }
.hero-scroll-cue-label-jp {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--navy-900);
}
.hero-scroll-cue-line {
  width: 1.5px; height: 64px;
  background: linear-gradient(180deg, rgba(30,79,199,0.45), rgba(30,79,199,0.06));
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}
.hero-scroll-cue-line::after {
  content: "";
  position: absolute; top: -18px; left: 0;
  width: 100%; height: 22px;
  background: linear-gradient(180deg, transparent, var(--brand-600));
  border-radius: 2px;
  animation: scrollDot 2.4s cubic-bezier(.4,0,.2,1) infinite;
}
.hero-scroll-cue-chev {
  width: 22px; height: 12px;
  position: relative;
  margin-top: 2px;
}
.hero-scroll-cue-chev::before,
.hero-scroll-cue-chev::after {
  content: "";
  position: absolute;
  width: 12px; height: 1.8px;
  background: var(--brand-600);
  top: 4px;
  border-radius: 2px;
  opacity: 0.85;
}
.hero-scroll-cue-chev::before { left: 0; transform: rotate(35deg); transform-origin: 100% 50%; }
.hero-scroll-cue-chev::after  { right: 0; transform: rotate(-35deg); transform-origin: 0% 50%; }
.hero-scroll-cue:hover .hero-scroll-cue-chev::before,
.hero-scroll-cue:hover .hero-scroll-cue-chev::after { background: var(--brand-700, #1A47B5); }
@keyframes scrollDot {
  0% { top: -22px; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-ambient::before, .hero-ambient::after, .hero-streak::before, .hero-streak::after, .hero-dust, .hero-scroll-cue-line::after { animation: none !important; }
}

/* ===== フローティング常時CTA — リッチ表現版 ===== */
.float-cta {
  position: fixed;
  bottom: 22px; right: 22px;
  z-index: 90;
  display: flex; gap: 12px; align-items: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.45s cubic-bezier(.2,.7,.2,1), transform 0.45s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.float-cta.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.float-cta-primary {
  display: inline-flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, #2660DB 0%, #1E4FC7 60%, #163E9C 100%);
  background-size: 200% 100%; background-position: 0% 50%;
  color: #fff;
  padding: 14px 22px 14px 18px;
  border-radius: 999px;
  font-weight: 800;
  box-shadow: 0 18px 38px -10px rgba(30,79,199,0.58), 0 8px 16px -6px rgba(11,21,36,0.18), 0 0 0 1px rgba(255,255,255,0.10) inset;
  transition: transform 0.32s cubic-bezier(.34,1.4,.64,1), box-shadow 0.32s, background-position 0.45s;
  position: relative;
  text-decoration: none;
}
.float-cta-primary::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 40%, transparent 60%, rgba(255,255,255,0.10) 100%);
  pointer-events: none;
}
.float-cta-primary:hover {
  transform: translateY(-3px) scale(1.02);
  background-position: 100% 50%;
  box-shadow: 0 26px 50px -10px rgba(30,79,199,0.72), 0 12px 22px -6px rgba(11,21,36,0.22), 0 0 0 1px rgba(255,255,255,0.16) inset;
}
.float-cta-primary-icon {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  background: rgba(255,255,255,0.18); border-radius: 50%; flex-shrink: 0;
  backdrop-filter: blur(8px);
}
.float-cta-primary-icon svg { width: 18px; height: 18px; }
.float-cta-primary-text {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  line-height: 1.1;
}
.float-cta-primary-title {
  font-size: 14.5px; font-weight: 900; letter-spacing: -0.005em;
  text-shadow: 0 1px 2px rgba(11,21,36,0.18);
}
.float-cta-primary-sub {
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.85);
  display: inline-flex; align-items: center; gap: 5px;
}
.float-cta-primary-sub::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,0.25);
  animation: floatCtaGreenDot 1.8s ease-in-out infinite;
}
@keyframes floatCtaGreenDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.2); }
}
.float-cta-primary-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin-left: 4px;
  background: rgba(255,255,255,0.16); border-radius: 50%;
  transition: background 0.28s, transform 0.28s;
}
.float-cta-primary:hover .float-cta-primary-arrow {
  background: rgba(255,255,255,0.30); transform: translateX(3px);
}
.float-cta-primary-arrow svg { width: 12px; height: 12px; }
.float-cta-badge {
  position: absolute; top: -10px; right: -8px;
  background: linear-gradient(135deg, #f97316, #ea580c); color: #fff;
  font-size: 10px; font-weight: 900; letter-spacing: 0.04em;
  padding: 3px 8px 3px 16px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 4px 12px -2px rgba(234,88,12,0.45); z-index: 3;
}
.float-cta-badge::before {
  content: ""; position: absolute; left: 6px; top: 50%;
  transform: translateY(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: #fff;
  animation: floatCtaBadgePulse 1.2s ease-in-out infinite;
}
@keyframes floatCtaBadgePulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
.float-cta-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; background: #fff;
  color: var(--brand-600); border-radius: 50%;
  border: 1.5px solid var(--gray-200);
  box-shadow: 0 10px 24px -8px rgba(11,21,36,0.18);
  transition: transform 0.28s, border-color 0.28s, box-shadow 0.28s;
  position: relative;
}
.float-cta-secondary:hover {
  transform: translateY(-3px); border-color: var(--brand-600);
  box-shadow: 0 16px 32px -8px rgba(30,79,199,0.30);
}
.float-cta-secondary svg { width: 20px; height: 20px; }
.float-cta-secondary-tip {
  position: absolute; bottom: calc(100% + 8px);
  left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--navy-900); background: #fff;
  padding: 4px 8px; border-radius: 4px; white-space: nowrap;
  box-shadow: 0 4px 12px -4px rgba(11,21,36,0.18);
  opacity: 0; pointer-events: none; transition: opacity 0.22s;
}
.float-cta-secondary:hover .float-cta-secondary-tip { opacity: 1; }
@media (max-width: 768px) {
  .float-cta { bottom: 16px; right: 12px; left: 12px; gap: 10px; }
  .float-cta-primary { flex: 1; padding: 12px 18px 12px 14px; gap: 10px; justify-content: flex-start; }
  .float-cta-primary-title { font-size: 13.5px; }
  .float-cta-primary-sub { font-size: 9.5px; }
  .float-cta-primary-icon { width: 32px; height: 32px; }
  .float-cta-primary-icon svg { width: 16px; height: 16px; }
  .float-cta-primary-arrow { width: 22px; height: 22px; }
  .float-cta-secondary { width: 48px; height: 48px; flex-shrink: 0; }
  .float-cta-badge { font-size: 9px; padding: 2px 7px 2px 14px; top: -8px; right: -4px; }
}
@media (prefers-reduced-motion: reduce) {
  .float-cta-primary-sub::before, .float-cta-badge::before { animation: none !important; }
}

/* ===== Section divider decoration ===== */
.section-divider {
  display: block;
  margin: 0 auto;
  width: 1px; height: 64px;
  background: linear-gradient(180deg, transparent, var(--gray-300), transparent);
  position: relative;
}
.section-divider::after {
  content: "";
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brand-600);
  box-shadow: 0 0 0 6px rgba(30,79,199,0.12);
}

/* ========== PREMIUM ANIMATIONS ========== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Hero title gradient shimmer — 流れる虹色効果 */
.hero-title-mega .accent-grad {
  background: linear-gradient(120deg, #1E4FC7 0%, #2660DB 18%, #5C82E8 35%, #7CA0F0 50%, #5C82E8 65%, #2660DB 82%, #1E4FC7 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShimmer 5s ease-in-out infinite;
}
@keyframes gradientShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Glow pulse on primary CTAs — 注目誘導 */
@keyframes ctaGlow {
  0%, 100% { box-shadow: 0 6px 18px rgba(30,79,199,0.28); }
  50% { box-shadow: 0 6px 24px rgba(30,79,199,0.45), 0 0 0 8px rgba(30,79,199,0.06); }
}
.btn-primary { animation: ctaGlow 3.5s ease-in-out infinite; }

@keyframes ctaGlowLarge {
  0%, 100% { box-shadow: 0 16px 42px -12px rgba(38,96,219,0.62), 0 0 0 1px rgba(255,255,255,0.06) inset; }
  50% { box-shadow: 0 16px 52px -10px rgba(38,96,219,0.85), 0 0 0 8px rgba(38,96,219,0.10), 0 0 0 1px rgba(255,255,255,0.06) inset; }
}
.btn-cta-large { animation: ctaGlowLarge 3.5s ease-in-out infinite; }

@keyframes ctaProposalGlow {
  0%, 100% { box-shadow: 0 12px 36px -10px rgba(38,96,219,0.55), 0 0 0 1px rgba(255,255,255,0.06) inset; }
  50% { box-shadow: 0 14px 44px -8px rgba(38,96,219,0.78), 0 0 0 7px rgba(38,96,219,0.10), 0 0 0 1px rgba(255,255,255,0.06) inset; }
}
.btn-proposal-primary { animation: ctaProposalGlow 3.5s ease-in-out infinite; }

/* Phase arrow pulse — フローの動き */
.phase-grid > .phase-card:not(:last-child)::after {
  animation: arrowPulse 2.5s ease-in-out infinite;
}
@keyframes arrowPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 12px -4px rgba(30,79,199,0.3); }
  50% { transform: scale(1.12); box-shadow: 0 8px 22px -4px rgba(30,79,199,0.55); }
}

/* Service icon hover rotation + scale */
.svc-icon { transition: transform 0.45s cubic-bezier(.2,.7,.2,1), box-shadow 0.45s; }
.svc:hover .svc-icon {
  transform: rotate(-6deg) scale(1.08);
  box-shadow: 0 14px 28px -8px rgba(30,79,199,0.6);
}

/* SVG flow line drawing animation */
.flow-svg path {
  stroke-dasharray: 12 6;
  stroke-dashoffset: 0;
  animation: dashFlow 14s linear infinite;
}
@keyframes dashFlow {
  to { stroke-dashoffset: -360; }
}

/* Background mesh subtle motion */
@keyframes meshFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -15px) scale(1.02); }
  66% { transform: translate(-20px, 20px) scale(0.98); }
}
.hero-mesh { animation: meshFloat 14s ease-in-out infinite; }

/* ============= HERO ENTRY ANIMATIONS（カスケード入場） ============= */
.hero-overline,
.hero-title-mega .hero-title-line,
.hero-desc,
.hero-actions,
.dash-wrap {
  opacity: 0;
  transform: translateY(22px);
  animation: heroEntry 0.95s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.hero-overline                              { animation-delay: 0.18s; }
.hero-title-mega .hero-title-line:nth-of-type(1) { animation-delay: 0.30s; }
.hero-title-mega .hero-title-line:nth-of-type(2) { animation-delay: 0.46s; }
.hero-desc                                  { animation-delay: 0.66s; }
.hero-actions                               { animation-delay: 0.82s; }
.dash-wrap {
  animation: heroDashEntry 1.25s cubic-bezier(0.22, 0.61, 0.36, 1) 0.42s forwards,
             dashFloat 7s ease-in-out 1.7s infinite alternate;
}

@keyframes heroEntry {
  to { opacity: 1; transform: translateY(0); }
}
/* ダッシュボード:奥から3D入場 → 永続フロート */
@keyframes heroDashEntry {
  from {
    opacity: 0;
    transform: perspective(1400px) rotateY(-8deg) rotateX(4deg) translateY(40px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: perspective(1400px) rotateY(-2deg) rotateX(1deg) translateY(0) scale(1);
  }
}
@keyframes dashFloat {
  0%   { transform: perspective(1400px) rotateY(-2deg) rotateX(1deg) translateY(0)    scale(1);    }
  50%  { transform: perspective(1400px) rotateY(-2.5deg) rotateX(1.2deg) translateY(-8px) scale(1.005); }
  100% { transform: perspective(1400px) rotateY(-2deg) rotateX(1deg) translateY(0)    scale(1);    }
}

/* CTA ボタンに永続グロー */
.hero-actions .btn-primary {
  animation: heroCtaPulse 3.2s ease-in-out infinite;
}
@keyframes heroCtaPulse {
  0%, 100% { box-shadow: 0 14px 30px -10px rgba(30,79,199,0.35), 0 0 0 0 rgba(92,130,232,0); }
  50%      { box-shadow: 0 20px 44px -10px rgba(30,79,199,0.50), 0 0 0 6px rgba(92,130,232,0.10); }
}

/* タイトル右端の AI に永続グラデ流れ */
.accent-grad {
  background: linear-gradient(135deg, #2660DB 0%, #5C82E8 30%, #7CA0F0 60%, #5C82E8 80%, #2660DB 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: accentShift 6s ease-in-out infinite;
}
@keyframes accentShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ============= 今月の成果サマリーバー（ダッシュボード末尾の正方形化） ============= */
.dash-summary {
  background: linear-gradient(180deg, #fafbfd, #f3f6fc);
  border-top: 1px solid rgba(11,21,36,0.06);
  padding: 14px 22px;
  margin: 0 -22px -20px;
  display: flex; align-items: center; gap: 18px;
  font-size: 11px;
}
.dash-summary-label {
  font-weight: 700;
  color: var(--gray-600);
  font-size: 10.5px;
  flex-shrink: 0;
}
.dash-summary-stats {
  display: flex; gap: 18px;
  flex-wrap: wrap;
}
.dss-item {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-size: 11px;
}
.dss-l {
  color: var(--gray-500);
  font-weight: 600;
}
.dss-v {
  font-family: var(--eng);
  font-size: 14px;
  font-weight: 900;
  color: var(--brand-600);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* ============= AIライブ稼働ログ (Dashboard 下半分・legacy) ============= */
.dash-activity { position: relative; }
.dash-activity-live {
  background: rgba(220,38,38,0.08) !important;
  color: #dc2626 !important;
  border: 1px solid rgba(220,38,38,0.22) !important;
  font-family: var(--eng);
  font-size: 9px;
  font-weight: 900 !important;
  letter-spacing: 0.18em;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 7px !important;
}
.dash-activity-live .dal-dot {
  width: 6px; height: 6px;
  background: #dc2626;
  border-radius: 50%;
  animation: dalDot 1.4s ease-out infinite;
}
@keyframes dalDot {
  0%   { box-shadow: 0 0 0 0 rgba(220,38,38,0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(220,38,38,0); }
  100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
}
.activity-feed {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: flex; flex-direction: column;
  gap: 0;
}
.af-row {
  display: grid;
  grid-template-columns: 36px 18px auto 1fr;
  gap: 8px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px dashed rgba(11,21,36,0.06);
  font-size: 10px;
  line-height: 1.5;
}
.af-row:last-child { border-bottom: none; }
.af-time {
  font-family: var(--eng);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--gray-500);
  letter-spacing: 0.04em;
}
.af-ico {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-50), rgba(92,130,232,0.20));
  color: var(--brand-600);
  display: flex; align-items: center; justify-content: center;
}
.af-ico svg { width: 11px; height: 11px; }
.af-agent {
  font-weight: 800;
  color: var(--brand-600);
  font-size: 10.5px;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.af-act {
  color: var(--gray-700);
  font-weight: 500;
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.af-row-new {
  background: linear-gradient(90deg, rgba(30,79,199,0.05), transparent 60%);
  animation: afHighlight 2.4s ease-in-out 3s infinite;
}
@keyframes afHighlight {
  0%, 100% { background: linear-gradient(90deg, rgba(30,79,199,0.05), transparent 60%); }
  50%      { background: linear-gradient(90deg, rgba(30,79,199,0.10), transparent 60%); }
}
.dash-activity-foot {
  display: flex; align-items: baseline; gap: 6px;
  padding: 10px 12px;
  background: rgba(30,79,199,0.04);
  border-radius: 8px;
  margin-top: 6px;
  font-size: 10px;
  font-weight: 500;
  color: var(--gray-700);
}
.daf-num {
  font-family: var(--eng);
  font-size: 16px;
  font-weight: 900;
  color: var(--brand-600);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ============= AIエージェント稼働パネル (Hero Dashboard 内) ============= */
.dash-agents {
  margin-bottom: 12px;
}
.dash-agents .dash-section-tag {
  background: rgba(30,79,199,0.10);
  color: var(--brand-600);
  border: 1px solid rgba(30,79,199,0.18);
  font-size: 9px;
  padding: 3px 9px 3px 7px;
  display: inline-flex; align-items: center; gap: 5px;
}
.dash-agents .das-tag-dot {
  width: 6px; height: 6px;
  background: var(--brand-600);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(30,79,199,0.55);
  animation: agentDotPulse 1.6s ease-out infinite;
}
@keyframes agentDotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(30,79,199,0.5); }
  70%  { box-shadow: 0 0 0 6px rgba(30,79,199,0); }
  100% { box-shadow: 0 0 0 0 rgba(30,79,199,0); }
}
.agents-list {
  display: grid; gap: 7px;
}
.agent {
  display: grid;
  grid-template-columns: 90px 1fr 32px;
  align-items: center;
  gap: 10px;
  padding: 3px 0;
}
.agent-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.agent-name {
  font-size: 10px;
  font-weight: 700;
  color: var(--navy-900);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agent-state {
  font-family: var(--eng);
  font-size: 8px;
  font-weight: 700;
  color: var(--brand-600);
  letter-spacing: 0.06em;
  display: inline-flex; align-items: center; gap: 4px;
}
.agent-state::before {
  content: "";
  width: 5px; height: 5px;
  background: var(--brand-600);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(30,79,199,0.5);
  animation: agentDotPulse 1.6s ease-out infinite;
}
.agent:nth-child(1) .agent-state::before { animation-delay: 0s;   }
.agent:nth-child(2) .agent-state::before { animation-delay: 0.4s; }
.agent:nth-child(3) .agent-state::before { animation-delay: 0.8s; }
.agent:nth-child(4) .agent-state::before { animation-delay: 1.2s; }
.agent-bar {
  height: 6px;
  background: rgba(30,79,199,0.08);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.agent-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #5C82E8, #1E4FC7);
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(30,79,199,0.30);
  animation: agentBarFill 1.6s cubic-bezier(0.22,0.61,0.36,1) 1.8s forwards,
             agentBarShimmer 3s ease-in-out 3.4s infinite;
}
@keyframes agentBarFill {
  to { width: var(--w, 80%); }
}
@keyframes agentBarShimmer {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.15); }
}
.agent:nth-child(2) .agent-bar-fill { animation-delay: 1.94s, 3.54s; }
.agent:nth-child(3) .agent-bar-fill { animation-delay: 2.08s, 3.68s; }
.agent:nth-child(4) .agent-bar-fill { animation-delay: 2.22s, 3.82s; }
.agent-pct {
  font-family: var(--eng);
  font-size: 10px; font-weight: 800;
  color: var(--brand-600);
  letter-spacing: -0.01em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ============= ライブステータスチップ「AI実装18社で稼働中」 ============= */
.hero-status-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 12px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(30,79,199,0.18);
  border-radius: 999px;
  font-size: 12px; font-weight: 700;
  color: var(--navy-900);
  box-shadow: 0 6px 22px -8px rgba(11,21,36,0.12);
  margin-bottom: 18px;
  opacity: 0;
  transform: translateY(-8px);
  animation: heroEntry 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.04s forwards;
}
.hero-status-chip .hsc-dot {
  width: 8px; height: 8px;
  background: #16a34a;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(22,163,74,0.6);
  animation: hscDot 1.6s ease-out infinite;
}
.hero-status-chip .hsc-label {
  letter-spacing: 0.02em;
}
.hero-status-chip .hsc-sep {
  width: 1px; height: 12px;
  background: var(--gray-300);
}
.hero-status-chip .hsc-count {
  font-family: var(--eng);
  color: var(--brand-600);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 0.01em;
}
.hero-status-chip .hsc-count span[data-hero-count] {
  font-variant-numeric: tabular-nums;
}
@keyframes hscDot {
  0%   { box-shadow: 0 0 0 0   rgba(22,163,74,0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(22,163,74,0);    }
  100% { box-shadow: 0 0 0 0   rgba(22,163,74,0);    }
}

/* ============================================================
 *  STORY セクション「AI実装の本当の話」
 *  4章スクロールストーリー — スクロールするほど明るく解決していく
 * ============================================================ */
.story {
  position: relative;
  padding: 140px 0 140px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 50% at 12% 8%, rgba(30,79,199,0.04) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 88% 92%, rgba(92,130,232,0.05) 0%, transparent 55%),
    #ffffff;
}
.story-bg { position: absolute; inset: 0; pointer-events: none; }
.story-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
}
.story-bg-orb-1 {
  top: -120px; right: -120px;
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(30,79,199,0.10) 0%, transparent 60%);
  animation: jOrb 18s ease-in-out infinite alternate;
}
.story-bg-orb-2 {
  bottom: -120px; left: -120px;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(92,130,232,0.08) 0%, transparent 60%);
  animation: jOrb 20s ease-in-out infinite alternate-reverse;
}
.story-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(11,21,36,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,21,36,0.025) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
          mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}
.story .container { position: relative; z-index: 2; }

.story-head {
  text-align: center;
  margin-bottom: 100px;
}
.story-eyebrow {
  display: inline-block;
  font-family: var(--eng);
  font-size: 11.5px; font-weight: 800;
  letter-spacing: 0.42em;
  color: var(--gray-500);
  margin-bottom: 28px;
  padding: 0;
  position: relative;
}
.story-eyebrow::before,
.story-eyebrow::after { display: none; }
.story-title {
  font-size: 52px; font-weight: 900;
  color: var(--navy-900);
  letter-spacing: -0.04em;
  line-height: 1.22;
  margin: 0 0 26px;
}
.story-em {
  background: linear-gradient(135deg, #1E4FC7 0%, #5C82E8 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.story-sub {
  font-size: 16px;
  line-height: 1.95;
  color: var(--gray-600);
  max-width: 640px;
  margin: 0 auto;
  font-weight: 500;
}
.story-sub strong {
  color: var(--navy-900); font-weight: 800;
  background: linear-gradient(180deg, transparent 60%, rgba(30,79,199,0.18) 60%);
  padding: 0 3px;
}

/* === Vertical rail (進行に応じて青で塗られる) === */
.story-rail {
  position: absolute;
  top: 0; bottom: 0;
  left: calc(50% - 580px + 70px);
  width: 2px;
  background: linear-gradient(180deg, transparent 4%, rgba(30,79,199,0.14) 12%, rgba(30,79,199,0.14) 92%, transparent 100%);
  z-index: 1;
}
.story-rail::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: calc(var(--story-progress, 0) * 100%);
  background: linear-gradient(180deg, transparent 0%, #5C82E8 8%, #1E4FC7 50%, #1E4FC7 95%);
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(30,79,199,0.55), 0 0 24px rgba(30,79,199,0.30);
  transition: height 0.18s linear;
}
/* レール先頭に進行ヘッド */
.story-rail::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(var(--story-progress, 0) * 100%);
  transform: translate(-50%, -50%);
  width: 10px; height: 10px;
  background: #1E4FC7;
  border-radius: 50%;
  box-shadow:
    0 0 0 4px rgba(30,79,199,0.25),
    0 0 0 10px rgba(30,79,199,0.10),
    0 0 16px rgba(30,79,199,0.55);
  opacity: var(--story-head-visible, 0);
  transition: top 0.18s linear, opacity 0.3s;
}

/* === Chapters timeline === */
.story-chapters {
  list-style: none; padding: 0; margin: 0;
  max-width: 1160px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.schap {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 48px;
  margin-bottom: 140px;
  opacity: 0;
  transform: translateY(32px);    /* 56→32 移動量縮小で早く完了 */
  transition: opacity 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);  /* 1.05s→0.55s 早スクロール対応 */
  transition-delay: var(--sdelay, 0s);
  position: relative;
  cursor: default;
}
/* 左右スライドインも軽量化 */
.schap-left {
  opacity: 0;
  transform: translateX(-16px);    /* 24→16 */
  transition: opacity 0.5s cubic-bezier(0.25,0.46,0.45,0.94) calc(var(--sdelay, 0s) + 0.08s),
              transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94) calc(var(--sdelay, 0s) + 0.08s);
}
.schap-right {
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 0.5s cubic-bezier(0.25,0.46,0.45,0.94) calc(var(--sdelay, 0s) + 0.14s),
              transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94) calc(var(--sdelay, 0s) + 0.14s);
}
/* 親 .schap 自体も in 時に表示する (これが抜けていた真因 2026-05-28) */
.story.in .schap { opacity: 1; transform: translateY(0); }
.story.in .schap-left,
.story.in .schap-right { opacity: 1; transform: translateX(0); }

/* 各章を個別にスクロールトリガーでアニメ表示 (2026-05-28) */
.schap.is-visible { opacity: 1 !important; transform: translateY(0) !important; }
.schap.is-visible .schap-left { opacity: 1 !important; transform: translateX(0) !important; }
.schap.is-visible .schap-right { opacity: 1 !important; transform: translateX(0) !important; }
.schap.is-visible .schap-visual { opacity: 1 !important; transform: translateY(0) scale(1) !important; }
/* 章の中の visual カード も時間差で fade up */
.schap-visual {
  opacity: 0;
  transform: translateY(20px) scale(0.985);
  transition: opacity 0.85s cubic-bezier(0.22,0.61,0.36,1) calc(var(--sdelay, 0s) + 0.42s),
              transform 0.85s cubic-bezier(0.22,0.61,0.36,1) calc(var(--sdelay, 0s) + 0.42s);
}
.story.in .schap-visual { opacity: 1; transform: translateY(0) scale(1); }
/* 章の中の番号は息遣いするように呼吸（in 中、ループ） */
.story.in .schap .schap-num {
  animation: schapNumBreath 5.5s ease-in-out infinite;
  animation-delay: calc(var(--sdelay, 0s) + 0.6s);
}
@keyframes schapNumBreath {
  0%, 100% { letter-spacing: -0.04em; }
  50%      { letter-spacing: -0.035em; }
}
@media (prefers-reduced-motion: reduce) {
  .schap-left, .schap-right, .schap-visual { transition: none !important; opacity: 1 !important; transform: none !important; }
  .story.in .schap .schap-num { animation: none !important; }
}

/* ★ カーソルホバー時のチャプター反応 */
.story.in .schap .schap-num,
.story.in .schap .schap-tag,
.story.in .schap .schap-num::before {
  transition: transform 0.5s cubic-bezier(0.22,0.61,0.36,1),
              color 0.45s, text-shadow 0.45s, box-shadow 0.45s, background 0.45s;
}
.story.in .schap:hover .schap-num {
  transform: translateX(8px) scale(1.04);
  text-shadow: 0 8px 24px rgba(30,79,199,0.20);
  color: var(--brand-600);
}
.story.in .schap:hover .schap-num::before {
  background: var(--brand-600);
  transform: scale(1.4);
  box-shadow: 0 0 0 6px rgba(255,255,255,1), 0 0 0 8px rgba(30,79,199,0.30), 0 0 18px rgba(30,79,199,0.55);
}
.story.in .schap:hover .schap-tag {
  color: var(--brand-600);
  letter-spacing: 0.34em;
}
.story.in .schap:hover .schap-right::before {
  color: var(--brand-600);
  letter-spacing: 0.5em;
}
/* 章右上に薄い「PHASE」ラベルを表示する装飾 */
.schap-right {
  position: relative;
}
.schap-right::before {
  content: attr(data-phase);
  position: absolute;
  top: -8px; right: 0;
  font-family: var(--eng);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.42em;
  color: var(--gray-400);
}
.schap:last-child { margin-bottom: 0; }
.story.in .schap { opacity: 1; transform: translateY(0); }

/* Left column — number + tag */
.schap-left {
  position: relative;
}
.schap-num-block {
  position: sticky;
  top: 120px;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 8px;
}
.schap-num {
  font-family: var(--eng);
  font-size: 96px; font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 0.85;
  color: var(--navy-900);
  font-variant-numeric: tabular-nums;
  position: relative;
}
.schap-num::before {
  content: "";
  position: absolute; left: -34px; top: 38px;
  width: 10px; height: 10px;
  background: var(--brand-600);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(255,255,255,1), 0 0 0 6px rgba(30,79,199,0.20);
}
.schap-tag {
  display: inline-block;
  padding: 0;
  background: transparent;
  border: none;
  font-family: var(--eng);
  font-size: 11px;
  font-weight: 800;
  color: var(--gray-500);
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

/* Right column — content */
.schap-right { min-width: 0; padding-top: 14px; }
.schap-headline {
  font-size: 44px; font-weight: 900;
  color: var(--navy-900);
  letter-spacing: -0.04em;
  line-height: 1.32;
  margin: 0 0 24px;
}
.schap-em {
  background: linear-gradient(135deg, #1E4FC7 0%, #5C82E8 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.schap-desc {
  font-size: 15.5px;
  line-height: 2;
  color: var(--gray-600);
  font-weight: 500;
  margin: 0 0 36px;
  max-width: 580px;
}
.schap-desc strong {
  color: var(--navy-900); font-weight: 800;
  background: linear-gradient(180deg, transparent 60%, rgba(30,79,199,0.18) 60%);
  padding: 0 3px;
}

/* === Chapter 01: チェックリスト（カード装飾を完全に落とす） === */
.probs-panel {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  position: relative;
  overflow: visible;
}
.probs-panel::before { display: none; }
.probs-panel-head {
  display: flex; align-items: baseline; gap: 16px;
  padding-bottom: 22px;
  margin-bottom: 18px;
  border-bottom: 1.5px solid var(--navy-900);
}
.probs-panel-label {
  font-family: var(--eng);
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.32em;
  color: var(--gray-500);
  background: transparent;
  padding: 0;
}
.probs-panel-title {
  font-size: 20px; font-weight: 800;
  color: var(--navy-900);
  letter-spacing: -0.015em;
}
.probs-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  counter-reset: probli;
}
.probs-list li {
  position: relative;
  padding: 24px 0 24px 110px;
  font-size: 18px;
  font-weight: 700;
  color: var(--navy-900);
  line-height: 1.55;
  letter-spacing: -0.01em;
  border-bottom: 1px solid rgba(11,21,36,0.08);
  counter-increment: probli;
  display: block;
  cursor: pointer;
  transition: background 0.3s, padding-left 0.3s;
}
.probs-list li:last-child { border-bottom: none; }
/* ★ チェックボックス（クリックで✓トグル）— 番号の左に配置 */
.probs-list li::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  background: #fff;
  border: 1.8px solid rgba(30,79,199,0.32);
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 1px 2px rgba(30,79,199,0.06),
    0 0 0 0 rgba(30,79,199,0);
  transition:
    background 0.42s cubic-bezier(.34,1.4,.64,1),
    border-color 0.42s,
    box-shadow 0.42s,
    transform 0.22s cubic-bezier(.2,.7,.2,1);
}
/* チェック後（オン時）— 青塗り */
.probs-list li.is-checked::before {
  background: linear-gradient(135deg, #2660DB 0%, #1E4FC7 100%);
  border-color: #1E4FC7;
  box-shadow:
    0 4px 14px -4px rgba(30,79,199,0.45),
    0 0 0 4px rgba(30,79,199,0.10);
  transform: translateY(-50%) scale(1.05);
}
/* ✓ マーク */
.probs-list li::after {
  content: "";
  display: block;
  position: absolute;
  left: 9px; top: 50%;
  width: 13px; height: 7px;
  border-left: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: translateY(-70%) rotate(-45deg) scale(0);
  opacity: 0;
  transition:
    transform 0.42s cubic-bezier(.34,1.56,.64,1) 0.06s,
    opacity 0.22s;
  pointer-events: none;
}
.probs-list li.is-checked::after {
  transform: translateY(-65%) rotate(-45deg) scale(1);
  opacity: 1;
}
.probs-list li:hover {
  background: linear-gradient(90deg, rgba(30,79,199,0.04), transparent 80%);
}
.probs-list li:hover::before {
  border-color: rgba(30,79,199,0.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 0 0 5px rgba(30,79,199,0.06);
}
.probs-list li.is-checked .prob-text {
  color: var(--brand-700, #1A47B5);
}
.prob-text {
  display: block;
  transition: color 0.32s;
}
.prob-aspect {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--brand-600);
  background: rgba(30,79,199,0.06);
  border: 1px solid rgba(30,79,199,0.16);
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
  position: relative;
  font-family: 'Noto Sans JP', sans-serif;
  transition: background 0.32s, border-color 0.32s, color 0.32s, transform 0.18s;
}
.prob-aspect::before {
  content: "→";
  margin-right: 6px;
  color: rgba(30,79,199,0.50);
  font-family: var(--eng);
  transition: color 0.32s;
}
.probs-list li.is-checked .prob-aspect {
  background: linear-gradient(135deg, rgba(38,96,219,0.14), rgba(30,79,199,0.22));
  border-color: rgba(30,79,199,0.45);
  color: var(--navy-900);
}
.probs-list li.is-checked .prob-aspect::before {
  color: var(--brand-600);
}
/* ★ 番号バッジ — 数字を主役に */
.prob-no {
  position: absolute;
  left: 50px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--eng);
  font-size: 22px;
  font-weight: 900;
  color: rgba(30,79,199,0.32);
  letter-spacing: -0.02em;
  line-height: 1;
  pointer-events: none;
  transition: color 0.42s, transform 0.32s cubic-bezier(.34,1.4,.64,1), text-shadow 0.42s;
}
.probs-list li:hover .prob-no { color: rgba(30,79,199,0.58); }
.probs-list li.is-checked .prob-no {
  color: var(--brand-600);
  text-shadow: 0 6px 18px rgba(30,79,199,0.25);
  transform: translateY(-50%) scale(1.08);
}
@media (prefers-reduced-motion: reduce) {
  .probs-list li::before, .probs-list li::after { transition: none !important; }
}

.probs-panel-foot {
  background: transparent;
  border: none;
  border-top: 1.5px solid var(--navy-900);
  border-radius: 0;
  padding: 22px 0 0;
  font-size: 15px;
  color: var(--navy-900);
  line-height: 1.85;
  font-weight: 600;
}
.probs-panel-foot strong {
  color: var(--brand-600);
  font-weight: 800;
}

/* === Visual: 共通カード === */
.schap-card {
  background: #fff;
  border: 1px solid rgba(11,21,36,0.08);
  border-radius: 22px;
  box-shadow:
    0 32px 80px -24px rgba(11,21,36,0.16),
    0 12px 32px -12px rgba(30,79,199,0.12),
    inset 0 1px 0 rgba(255,255,255,1);
  overflow: hidden;
  position: relative;
}
/* Chapter 4 のカードに特別な光 */
.schap:nth-child(4) .schap-card {
  box-shadow:
    0 40px 100px -28px rgba(30,79,199,0.32),
    0 16px 40px -12px rgba(30,79,199,0.20),
    0 0 0 1px rgba(30,79,199,0.10),
    inset 0 1px 0 rgba(255,255,255,1);
}
.sc-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px;
  background: linear-gradient(180deg, #fafbfd, #f4f7fc);
  border-bottom: 1px solid rgba(11,21,36,0.06);
}
.sc-head-label {
  font-size: 12px; font-weight: 700;
  color: var(--gray-700);
  letter-spacing: 0.02em;
}
.sc-head-status {
  font-family: var(--eng);
  font-size: 10.5px; font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.1em;
}
.sc-status-warn {
  color: #c2410c;
  background: rgba(234,88,12,0.10);
  border: 1px solid rgba(234,88,12,0.22);
}
.sc-status-live {
  color: var(--brand-600);
  background: rgba(30,79,199,0.10);
  border: 1px solid rgba(30,79,199,0.22);
}
.sc-status-live::before {
  content: "● ";
  animation: hscDot 1.6s ease-out infinite;
}

/* Chapter 01 — Fail dashboard */
.schap-card-fail .sc-fail-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(11,21,36,0.06);
}
.sc-fail-item {
  padding: 20px 22px;
  background: #fff;
}
.sc-fail-label {
  font-size: 11px; font-weight: 700;
  color: var(--gray-500);
  letter-spacing: 0.01em;
  margin-bottom: 8px;
}
.sc-fail-val {
  font-family: var(--eng);
  font-size: 26px; font-weight: 900;
  letter-spacing: -0.04em;
  color: #c2410c;
  display: flex; align-items: baseline; gap: 3px;
}
.sc-fail-val .u {
  font-size: 11px; font-weight: 700;
  color: var(--gray-500);
  letter-spacing: -0.01em;
}
.sc-fail-foot {
  padding: 16px 22px;
  background: rgba(234,88,12,0.04);
  border-top: 1px solid rgba(234,88,12,0.10);
  font-size: 12.5px; font-weight: 500;
  color: var(--gray-700);
  line-height: 1.7;
}
.sc-fail-foot strong { color: #c2410c; font-weight: 800; }

/* Chapter 02 — Causes 2x2 grid */
.cause-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.cause {
  position: relative;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(30,79,199,0.04) 0%, transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fafcff 100%);
  border: 1px solid rgba(11,21,36,0.08);
  border-radius: 16px;
  padding: 22px 22px 20px;
  box-shadow: 0 8px 22px -12px rgba(11,21,36,0.08);
  transition: transform 0.35s, box-shadow 0.35s, border-color 0.35s;
}
.cause::before {
  content: "";
  position: absolute; top: 0; left: 22px; right: 22px;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-600), var(--brand-400));
  border-radius: 0 0 3px 3px;
  opacity: 0.7;
}
.cause:hover {
  transform: translateY(-3px);
  border-color: rgba(30,79,199,0.18);
  box-shadow: 0 16px 32px -16px rgba(30,79,199,0.18), 0 0 0 1px rgba(30,79,199,0.10);
}
.cause-num {
  position: absolute; top: 16px; right: 18px;
  font-family: var(--eng);
  font-size: 12px; font-weight: 900;
  color: rgba(30,79,199,0.22);
  letter-spacing: 0.04em;
}
.cause-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--brand-50), rgba(92,130,232,0.18));
  color: var(--brand-600);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  box-shadow: 0 4px 10px -4px rgba(30,79,199,0.22), 0 0 0 1px rgba(30,79,199,0.08) inset;
}
.cause-icon svg { width: 17px; height: 17px; }
.cause-title {
  font-size: 15px; font-weight: 800;
  color: var(--navy-900);
  letter-spacing: -0.015em;
  line-height: 1.5;
  margin: 0 0 8px;
}
.cause-desc {
  font-size: 12.5px;
  color: var(--gray-600);
  line-height: 1.7;
  font-weight: 500;
  margin: 0;
}

/* Chapter 02 — 原因パネル（モノクロ・エディトリアル） */
.probs-panel-cause::before { display: none; }
.probs-panel-label-warn { color: var(--gray-500) !important; }
.probs-list-x li {
  padding: 26px 0 26px 0 !important;
  border-bottom: 1px solid rgba(11,21,36,0.08) !important;
  display: block !important;
  position: relative;
  cursor: default !important;
  transition: background 0.3s;
}
.probs-list-x li:hover {
  background: linear-gradient(90deg, rgba(30,79,199,0.04), transparent 80%);
}
.probs-list-x li:last-child { border-bottom: none !important; }
.probs-list-x li::before,
.probs-list-x li::after {
  content: none !important;
  display: none !important;
}
.prob-li-body {
  position: relative;
  padding-left: 88px;
}
/* ★ Chapter 2 大型番号 — Chapter 1 と同じデザイン言語 */
.prob-li-num {
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  font-family: var(--eng);
  font-size: 36px;
  font-weight: 900;
  color: rgba(30,79,199,0.32);
  letter-spacing: -0.04em;
  line-height: 1;
  transition: color 0.4s, transform 0.32s cubic-bezier(.34,1.4,.64,1), text-shadow 0.4s;
}
.probs-list-x li:hover .prob-li-num {
  color: var(--brand-600);
  transform: translateY(-50%) scale(1.06);
  text-shadow: 0 6px 18px rgba(30,79,199,0.25);
}
.prob-li-title {
  display: block;
  font-size: 19px;
  font-weight: 800;
  color: var(--navy-900);
  letter-spacing: -0.015em;
  margin: 0 0 6px;
}
.prob-li-sub {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-600);
  line-height: 1.65;
}

/* Chapter 03 — 7ステップフロー（横一列） */
.flow7 {
  list-style: none;
  padding: 32px 28px;
  margin: 0;
  background: #ffffff;
  border: 1px solid rgba(11,21,36,0.08);
  border-radius: 24px;
  box-shadow: 0 32px 80px -24px rgba(11,21,36,0.12), 0 12px 32px -12px rgba(30,79,199,0.08);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}
.flow7::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #7CA0F0 0%, #5C82E8 33%, #2660DB 66%, #0B1524 100%);
}
.flow7::after {
  content: "";
  position: absolute;
  left: 60px; right: 60px;
  top: 102px;
  height: 2px;
  background: linear-gradient(90deg, rgba(124,160,240,0.6), rgba(30,79,199,0.6) 50%, rgba(11,21,36,0.5));
  z-index: 0;
}

.f7-step {
  text-align: center;
  position: relative;
  z-index: 1;
  padding: 6px 4px;
}
.f7-step-num {
  font-family: var(--eng);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--brand-600);
  background: rgba(30,79,199,0.08);
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 16px;
}
.f7-step-ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: #ffffff;
  border: 1.5px solid rgba(30,79,199,0.18);
  color: var(--brand-600);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
  box-shadow: 0 4px 12px -4px rgba(30,79,199,0.18), 0 0 0 4px rgba(30,79,199,0.04);
  position: relative;
  z-index: 2;
}
.f7-step-ico svg { width: 19px; height: 19px; }
.f7-step:nth-child(1) .f7-step-ico { color: #7CA0F0; border-color: rgba(124,160,240,0.45); }
.f7-step:nth-child(2) .f7-step-ico { color: #5C82E8; border-color: rgba(92,130,232,0.45); }
.f7-step:nth-child(3) .f7-step-ico { color: #2660DB; border-color: rgba(38,96,219,0.45); }
.f7-step:nth-child(4) .f7-step-ico { color: #1E4FC7; border-color: rgba(30,79,199,0.50); }
.f7-step:nth-child(5) .f7-step-ico { color: #1A45B8; border-color: rgba(26,69,184,0.50); }
.f7-step:nth-child(6) .f7-step-ico { color: #143A99; border-color: rgba(20,58,153,0.50); }
.f7-step-final .f7-step-ico {
  color: #ffffff !important;
  background: linear-gradient(135deg, #1E4FC7, #0B1524) !important;
  border-color: #0B1524 !important;
  box-shadow: 0 8px 22px -6px rgba(30,79,199,0.45), 0 0 0 4px rgba(30,79,199,0.08);
}
.f7-step-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--navy-900);
  letter-spacing: -0.01em;
  line-height: 1.35;
  margin-bottom: 6px;
}
.f7-step-sub {
  font-size: 10.5px;
  color: var(--gray-600);
  line-height: 1.55;
  font-weight: 500;
}

/* Scroll-triggered: ステップが順次明るくなる */
.f7-step {
  opacity: 0.4;
  transform: translateY(8px);
  transition: opacity 0.45s, transform 0.45s;
}
.schap.schap-active .f7-step { opacity: 1; transform: none; }
.schap.schap-active .f7-step:nth-child(1) { transition-delay: 0.10s; }
.schap.schap-active .f7-step:nth-child(2) { transition-delay: 0.22s; }
.schap.schap-active .f7-step:nth-child(3) { transition-delay: 0.34s; }
.schap.schap-active .f7-step:nth-child(4) { transition-delay: 0.46s; }
.schap.schap-active .f7-step:nth-child(5) { transition-delay: 0.58s; }
.schap.schap-active .f7-step:nth-child(6) { transition-delay: 0.70s; }
.schap.schap-active .f7-step:nth-child(7) { transition-delay: 0.82s; }

@media (max-width: 1080px) {
  .flow7 { grid-template-columns: repeat(4, 1fr); padding: 24px 20px; }
  .flow7::after { display: none; }
}
@media (max-width: 640px) {
  .flow7 { grid-template-columns: repeat(2, 1fr); padding: 20px 16px; gap: 16px; }
}

/* Chapter 03 — 旧 approach-flow (削除) */
.approach-flow, .approach-meta { display: none; }

/* (legacy) Chapter 03 — Approach flow */
.approach-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.af-step {
  background: #fff;
  border: 1px solid rgba(11,21,36,0.08);
  border-radius: 16px;
  padding: 22px 18px;
  text-align: center;
  position: relative;
  box-shadow: 0 8px 22px -12px rgba(11,21,36,0.08);
}
.af-step::before {
  content: "";
  position: absolute; top: 0; left: 16px; right: 16px;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-600), var(--brand-400));
  border-radius: 0 0 3px 3px;
}
.af-step-num {
  font-family: var(--eng);
  font-size: 14px; font-weight: 900;
  background: linear-gradient(135deg, #1E4FC7, #5C82E8);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 6px;
  letter-spacing: 0.04em;
}
.af-step-title {
  font-size: 15px; font-weight: 900;
  color: var(--navy-900);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.af-step-sub {
  font-size: 11.5px;
  color: var(--gray-600);
  line-height: 1.55;
  font-weight: 500;
}
.af-arrow {
  color: var(--brand-600);
  opacity: 0.6;
  display: flex; align-items: center;
}
.af-arrow svg { width: 22px; height: 22px; }
.approach-meta {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(11,21,36,0.06);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(11,21,36,0.06);
}
.am-item {
  padding: 16px 20px;
  background: #fff;
  display: flex; flex-direction: column; gap: 4px;
}
.am-label {
  font-size: 10.5px; font-weight: 800;
  color: var(--gray-500);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.am-val {
  font-size: 15.5px; font-weight: 800;
  color: var(--navy-900);
  letter-spacing: -0.01em;
}
.am-sub {
  font-size: 11px; font-weight: 600;
  color: var(--gray-500);
  margin-left: 4px;
}

/* Chapter 04 — エディトリアル成果ビジュアル（数字を使わずに語る） */
.outcome-hero {
  border-top: 1.5px solid var(--navy-900);
  padding-top: 22px;
  margin-bottom: 28px;
}
.outcome-hero-label {
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--navy-900);
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.outcome-hero-label::before {
  content: "";
  width: 28px; height: 2px;
  background: var(--brand-600);
}
.outcome-hero-headline {
  font-size: 26px;
  font-weight: 800;
  color: var(--navy-900);
  letter-spacing: -0.025em;
  line-height: 1.42;
  margin: 0 0 14px;
  max-width: 740px;
}
.outcome-hero-headline .schap-em {
  background: linear-gradient(135deg, #2660DB 0%, #5C82E8 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.outcome-hero-desc {
  font-size: 15px;
  line-height: 1.8;
  color: var(--gray-600);
  font-weight: 500;
  margin: 0;
  max-width: 640px;
}
.outcome-hero-desc strong {
  color: var(--navy-900);
  font-weight: 800;
  background: linear-gradient(180deg, transparent 60%, rgba(30,79,199,0.18) 60%);
  padding: 0 3px;
}

/* 3つの定性的な顧客変化 */
.outcome-side {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(11,21,36,0.10);
  border-bottom: 1px solid rgba(11,21,36,0.10);
  margin-bottom: 0;
}
.o-side-item {
  padding: 22px 24px 22px 0;
  border-right: 1px solid rgba(11,21,36,0.08);
}
.o-side-item:last-child { border-right: none; padding-right: 0; }
.o-side-item:not(:first-child) { padding-left: 24px; }
.o-side-icon {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: rgba(30,79,199,0.06);
  color: var(--brand-600);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.o-side-icon svg { width: 16px; height: 16px; }
.o-side-label {
  font-size: 17px;
  font-weight: 800;
  color: var(--navy-900);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  line-height: 1.4;
}
.o-side-desc {
  font-size: 12.5px;
  color: var(--gray-600);
  line-height: 1.7;
  font-weight: 500;
}

.outcome-foot {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px;
  color: var(--gray-600);
}
.outcome-foot strong {
  color: var(--navy-900);
  font-weight: 800;
}
.outcome-foot-mark {
  font-family: var(--eng);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--brand-600);
  background: rgba(30,79,199,0.08);
  padding: 4px 8px;
  border-radius: 3px;
}

/* 旧Win dashboard 非表示 */
.schap-card-win, .sc-win-grid, .sc-win-foot { display: none !important; }

/* Chapter 04 — Win dashboard (legacy) */
.schap-card-win .sc-win-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(11,21,36,0.06);
}
.sc-win-item {
  padding: 20px 22px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(30,79,199,0.04) 0%, transparent 60%),
    #fff;
  position: relative;
}
.sc-win-label {
  font-size: 11px; font-weight: 700;
  color: var(--gray-500);
  letter-spacing: 0.01em;
  margin-bottom: 8px;
}
.sc-win-val {
  font-family: var(--eng);
  font-size: 26px; font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--brand-600);
  display: flex; align-items: baseline; gap: 1px;
  font-variant-numeric: tabular-nums;
}
.sc-win-val .u {
  font-size: 11px; font-weight: 700;
  color: var(--gray-500);
  letter-spacing: -0.01em;
  margin-left: 3px;
}
.sc-win-spark {
  margin-top: 10px;
  height: 18px;
}
.sc-win-spark svg { width: 100%; height: 100%; }
.sc-win-foot {
  padding: 14px 22px;
  background: rgba(30,79,199,0.04);
  border-top: 1px solid rgba(30,79,199,0.10);
  font-size: 12.5px; font-weight: 500;
  color: var(--gray-700);
  display: flex; align-items: center; gap: 12px;
}
.sc-win-foot-tag {
  font-family: var(--eng);
  font-size: 10px; font-weight: 800;
  padding: 4px 8px;
  background: rgba(30,79,199,0.10);
  color: var(--brand-600);
  border-radius: 4px;
  letter-spacing: 0.12em;
  flex-shrink: 0;
}

/* ===================================================================
 *  各章のスクロール連動ストーリー演出（章が画面に入ったら展開）
 * =================================================================== */

/* 章ナンバー：入場時に光る */
.schap-num {
  transition: filter 0.6s, transform 0.6s cubic-bezier(0.22,0.61,0.36,1);
}
.schap.schap-active .schap-num {
  filter: drop-shadow(0 0 18px rgba(30,79,199,0.30));
}
.schap-num::before {
  transition: box-shadow 0.6s, transform 0.6s;
}
.schap.schap-active .schap-num::before {
  box-shadow: 0 0 0 4px rgba(30,79,199,0.25), 0 0 0 10px rgba(30,79,199,0.10), 0 0 24px rgba(30,79,199,0.45);
}

/* === Chapter 01: 失敗メトリクスが警告的に順に現れる === */
.schap-card-fail .sc-fail-item {
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  transition: opacity 0.55s cubic-bezier(0.22,0.61,0.36,1), transform 0.55s cubic-bezier(0.22,0.61,0.36,1);
}
.schap.schap-active .schap-card-fail .sc-fail-item:nth-child(1) { transition-delay: 0.20s; opacity: 1; transform: none; }
.schap.schap-active .schap-card-fail .sc-fail-item:nth-child(2) { transition-delay: 0.36s; opacity: 1; transform: none; }
.schap.schap-active .schap-card-fail .sc-fail-item:nth-child(3) { transition-delay: 0.52s; opacity: 1; transform: none; }
.schap.schap-active .schap-card-fail .sc-fail-item:nth-child(4) { transition-delay: 0.68s; opacity: 1; transform: none; }

/* 数字が出るとき警告フラッシュ */
.sc-fail-val {
  position: relative;
}
.schap.schap-active .schap-card-fail .sc-fail-item .sc-fail-val {
  animation: failFlash 0.5s ease-out 0.8s 1;
}
@keyframes failFlash {
  0%   { color: var(--gray-400); }
  50%  { color: #c2410c; text-shadow: 0 0 12px rgba(234,88,12,0.5); }
  100% { color: #c2410c; text-shadow: none; }
}

/* 失敗ダッシュボードのフッターは最後に出現 */
.schap-card-fail .sc-fail-foot {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}
.schap.schap-active .schap-card-fail .sc-fail-foot {
  transition-delay: 1.0s;
  opacity: 1;
}

/* === Chapter 02: 4つの原因がZ字型で順に出現 === */
.cause-grid .cause {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0.22,0.61,0.36,1), transform 0.6s cubic-bezier(0.22,0.61,0.36,1);
}
.schap.schap-active .cause-grid .cause:nth-child(1) { transition-delay: 0.15s; opacity: 1; transform: none; }
.schap.schap-active .cause-grid .cause:nth-child(2) { transition-delay: 0.30s; opacity: 1; transform: none; }
.schap.schap-active .cause-grid .cause:nth-child(3) { transition-delay: 0.45s; opacity: 1; transform: none; }
.schap.schap-active .cause-grid .cause:nth-child(4) { transition-delay: 0.60s; opacity: 1; transform: none; }

/* === Chapter 03: アプローチフローが連続して光る === */
.approach-flow .af-step {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.55s cubic-bezier(0.22,0.61,0.36,1), transform 0.55s, box-shadow 0.6s;
}
.schap.schap-active .approach-flow .af-step:nth-child(1) { transition-delay: 0.15s; opacity: 1; transform: none; }
.schap.schap-active .approach-flow .af-step:nth-child(3) { transition-delay: 0.55s; opacity: 1; transform: none; }
.schap.schap-active .approach-flow .af-step:nth-child(5) { transition-delay: 0.95s; opacity: 1; transform: none; }

/* 矢印が次々と点灯 */
.approach-flow .af-arrow {
  opacity: 0;
  transform: translateX(-6px) scale(0.6);
  transition: opacity 0.4s, transform 0.4s cubic-bezier(0.22,0.61,0.36,1);
  color: var(--brand-600);
}
.schap.schap-active .approach-flow .af-arrow:nth-child(2) { transition-delay: 0.40s; opacity: 0.85; transform: none; }
.schap.schap-active .approach-flow .af-arrow:nth-child(4) { transition-delay: 0.80s; opacity: 0.85; transform: none; }

/* アクティブステップにグロー */
.schap.schap-active .approach-flow .af-step {
  box-shadow: 0 14px 32px -16px rgba(30,79,199,0.25), 0 0 0 1px rgba(30,79,199,0.08);
}

/* メタ情報3項目 */
.approach-meta .am-item {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s, transform 0.5s;
}
.schap.schap-active .approach-meta .am-item:nth-child(1) { transition-delay: 1.20s; opacity: 1; transform: none; }
.schap.schap-active .approach-meta .am-item:nth-child(2) { transition-delay: 1.32s; opacity: 1; transform: none; }
.schap.schap-active .approach-meta .am-item:nth-child(3) { transition-delay: 1.44s; opacity: 1; transform: none; }

/* === Chapter 04: 成果ダッシュボードが解決する瞬間 === */
.schap-card-win .sc-win-item {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s cubic-bezier(0.22,0.61,0.36,1), transform 0.6s cubic-bezier(0.22,0.61,0.36,1);
}
.schap.schap-active .schap-card-win .sc-win-item:nth-child(1) { transition-delay: 0.20s; opacity: 1; transform: none; }
.schap.schap-active .schap-card-win .sc-win-item:nth-child(2) { transition-delay: 0.36s; opacity: 1; transform: none; }
.schap.schap-active .schap-card-win .sc-win-item:nth-child(3) { transition-delay: 0.52s; opacity: 1; transform: none; }
.schap.schap-active .schap-card-win .sc-win-item:nth-child(4) { transition-delay: 0.68s; opacity: 1; transform: none; }

/* スパークラインを順番に描画 */
.sc-win-spark svg polyline {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  transition: stroke-dashoffset 1.6s cubic-bezier(0.22,0.61,0.36,1);
}
.schap.schap-active .schap-card-win .sc-win-item:nth-child(1) .sc-win-spark svg polyline { transition-delay: 0.6s; stroke-dashoffset: 0; }
.schap.schap-active .schap-card-win .sc-win-item:nth-child(2) .sc-win-spark svg polyline { transition-delay: 0.76s; stroke-dashoffset: 0; }
.schap.schap-active .schap-card-win .sc-win-item:nth-child(3) .sc-win-spark svg polyline { transition-delay: 0.92s; stroke-dashoffset: 0; }
.schap.schap-active .schap-card-win .sc-win-item:nth-child(4) .sc-win-spark svg polyline { transition-delay: 1.08s; stroke-dashoffset: 0; }

/* 数値の周りに微かなグロー（解決の脈動） */
.schap.schap-active .schap-card-win .sc-win-val {
  animation: winPulse 2.4s ease-in-out 1.6s infinite;
}
@keyframes winPulse {
  0%, 100% { text-shadow: none; }
  50%      { text-shadow: 0 0 16px rgba(30,79,199,0.30); }
}

/* 成果フッター */
.schap-card-win .sc-win-foot {
  opacity: 0;
  transition: opacity 0.6s ease-out;
}
.schap.schap-active .schap-card-win .sc-win-foot {
  transition-delay: 1.4s;
  opacity: 1;
}

/* === Chapter 4 のステータスがチカチカ稼働中 === */
.schap.schap-active .schap-card-win .sc-status-live {
  animation: statusLivePulse 2.4s ease-in-out infinite;
}
@keyframes statusLivePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(30,79,199,0); }
  50%      { box-shadow: 0 0 0 4px rgba(30,79,199,0.12); }
}

/* Responsive */
@media (max-width: 980px) {
  .story-rail { display: none; }
  .schap {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 80px;
  }
  .schap-num-block { position: relative; top: 0; flex-direction: row; align-items: center; gap: 16px; }
  .schap-num { font-size: 52px; }
  .schap-num::before { display: none; }
  .schap-headline { font-size: 28px; }
  .story-title { font-size: 32px; }
  .cause-grid { grid-template-columns: 1fr; }
  .approach-flow { grid-template-columns: 1fr; gap: 12px; }
  .af-arrow { transform: rotate(90deg); justify-self: center; }
  .approach-meta { grid-template-columns: 1fr; }
  .am-item { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
}
@media (max-width: 640px) {
  .story { padding: 80px 0 64px; }
  .story-title { font-size: 26px; }
  .schap-headline { font-size: 23px; }
  .schap-desc { font-size: 14px; }
  .sc-fail-grid, .sc-win-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .schap, .schap-card-fail .sc-fail-item, .cause-grid .cause,
  .approach-flow .af-step, .approach-flow .af-arrow, .approach-meta .am-item,
  .schap-card-win .sc-win-item, .schap-card-fail .sc-fail-foot,
  .schap-card-win .sc-win-foot {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .sc-win-spark svg polyline { stroke-dashoffset: 0 !important; transition: none !important; }
  .story-bg-orb, .sc-status-live::before, .story-rail::before { animation: none !important; }
  .story-rail::after { height: 100% !important; }
}

/* ============================================================
 *  JOURNEY セクション「3-Phase Embedded Engagement」
 *  (深度グラデ表現 / 全色 ブランドブルー段階)
 * ============================================================ */
.journey {
  position: relative;
  padding: 140px 0 140px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(30,79,199,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(11,21,36,0.05) 0%, transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f0f5fd 50%, #ffffff 100%);
}
.journey::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(30,79,199,0.20) 50%, transparent 95%);
}
.journey-bg { position: absolute; inset: 0; pointer-events: none; }
.journey-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
}
.journey-bg-orb-1 {
  top: -120px; right: -80px;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(30,79,199,0.12) 0%, transparent 60%);
  animation: jOrb 16s ease-in-out infinite alternate;
}
.journey-bg-orb-2 {
  bottom: -120px; left: -100px;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(92,130,232,0.10) 0%, transparent 60%);
  animation: jOrb 18s ease-in-out infinite alternate-reverse;
}
@keyframes jOrb {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(40px, -30px); }
}
.journey-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(11,21,36,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,21,36,0.025) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
          mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}
.journey .container { position: relative; z-index: 2; }

/* Section Head — エディトリアル誌面風 */
.journey-head {
  text-align: center;
  margin-bottom: 56px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 24px;
}
.journey-eyebrow {
  display: inline-block;
  font-family: var(--eng);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.42em;
  color: var(--gray-500);
  margin-bottom: 26px;
}

.journey-h2 {
  font-size: 56px;
  font-weight: 900;
  color: var(--navy-900);
  letter-spacing: -0.04em;
  line-height: 1.22;
  margin-bottom: 26px;
}

/* ★ Journey 横フロー — 01 → 02 → 03 の旅を3カード列の上に水平に表現 */
.journey-h-flow {
  position: relative;
  max-width: 1280px;
  margin: 0 auto 44px;
  height: 88px;
  padding: 0;
}
/* 背景のレール（細い水平線） */
.jhf-rail {
  position: absolute;
  left: 16.66%;
  right: 16.66%;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg,
    rgba(124,160,240,0.28) 0%,
    rgba(92,130,232,0.55) 38%,
    rgba(30,79,199,0.75) 72%,
    rgba(11,21,36,0.85) 100%);
  border-radius: 2px;
  overflow: visible;
}
/* レール上をなぞる細いハイライト（連続的な流れ感） */
.jhf-rail::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 26%;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(92,130,232,0.85) 50%,
    transparent 100%);
  filter: blur(0.5px);
  animation: jhfRailGlow 5s cubic-bezier(0.45,0,0.55,1) infinite;
}
@keyframes jhfRailGlow {
  0%   { transform: translateX(-30%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(330%); opacity: 0; }
}
/* マイルストーン・ノード */
.jhf-node {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: #ffffff;
  z-index: 2;
}
.jhf-node-1 { left: 16.66%; box-shadow: 0 0 0 2px #5C82E8, 0 0 0 8px rgba(92,130,232,0.10); }
.jhf-node-2 { left: 50%;    box-shadow: 0 0 0 2px #1E4FC7, 0 0 0 8px rgba(30,79,199,0.10); }
.jhf-node-3 { left: 83.33%; box-shadow: 0 0 0 2px #0B1524, 0 0 0 8px rgba(11,21,36,0.10); }
/* ノード内ドット */
.jhf-node::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--brand-600);
}
.jhf-node-1::before { background: #5C82E8; }
.jhf-node-2::before { background: #1E4FC7; }
.jhf-node-3::before { background: #0B1524; }
/* ノード上の番号 */
.jhf-node-num {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--eng);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.24em;
  white-space: nowrap;
}
.jhf-node-1 .jhf-node-num { color: #5C82E8; }
.jhf-node-2 .jhf-node-num { color: #1E4FC7; }
.jhf-node-3 .jhf-node-num { color: #0B1524; }
/* 流れる光点 — 01 から 03 へ旅する。色がフェーズごとに変化 */
.jhf-pulse {
  position: absolute;
  top: 50%;
  left: 16.66%;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: #7CA0F0;
  box-shadow: 0 0 14px rgba(124,160,240,0.7), 0 0 0 5px rgba(124,160,240,0.15);
  animation: jhfPulseMove 5s cubic-bezier(0.45,0,0.55,1) infinite;
  z-index: 3;
}
.jhf-pulse-2 { animation-delay: 2.5s; }
@keyframes jhfPulseMove {
  0%   { left: 16.66%; background: #7CA0F0; box-shadow: 0 0 12px rgba(124,160,240,0.7), 0 0 0 5px rgba(124,160,240,0.16); opacity: 0; transform: scale(0.5); }
  10%  { opacity: 1; transform: scale(1); }
  50%  { left: 50%;    background: #1E4FC7; box-shadow: 0 0 18px rgba(30,79,199,0.8), 0 0 0 7px rgba(30,79,199,0.18); transform: scale(1.25); }
  90%  { left: 83.33%; background: #0B1524; box-shadow: 0 0 14px rgba(11,21,36,0.6), 0 0 0 6px rgba(11,21,36,0.13); opacity: 1; transform: scale(1); }
  100% { left: 83.33%; opacity: 0; transform: scale(0.5); }
}
/* ノードが in 時にパルスする */
.journey.in .jhf-node-1::before {
  animation: jhfNodePulse 2.4s ease-in-out infinite;
  animation-delay: 0s;
}
.journey.in .jhf-node-2::before {
  animation: jhfNodePulse 2.4s ease-in-out infinite;
  animation-delay: 0.8s;
}
.journey.in .jhf-node-3::before {
  animation: jhfNodePulse 2.4s ease-in-out infinite;
  animation-delay: 1.6s;
}
@keyframes jhfNodePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.35); }
}

@media (max-width: 768px) {
  .journey-h-flow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .jhf-pulse, .jhf-rail::after, .jhf-node::before { animation: none !important; }
  .jhf-pulse-2 { display: none; }
}

/* ★ プログレスタイムライン — 流れを大きく見せる */
.journey-progress {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto 40px;
  padding: 0 32px;
  position: relative;
}
/* タイムラインから各カードへの接続縦線（巻き込み演出） */
.journey-progress::after {
  content: "";
  position: absolute;
  top: 100%; left: 0; right: 0;
  height: 32px;
  background:
    linear-gradient(180deg, rgba(30,79,199,0.30), rgba(30,79,199,0)) calc(50% - 470px) 0 / 1px 100% no-repeat,
    linear-gradient(180deg, rgba(30,79,199,0.30), rgba(30,79,199,0)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(180deg, rgba(30,79,199,0.30), rgba(30,79,199,0)) calc(50% + 470px) 0 / 1px 100% no-repeat;
  pointer-events: none;
}
.jp-step {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  text-align: center;
  position: relative;
}
.jp-step::before {
  content: "";
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--brand-600);
  box-shadow: 0 0 0 4px rgba(30,79,199,0.12), 0 0 0 8px rgba(30,79,199,0.04);
  margin-bottom: 10px;
  transition: transform 0.4s, box-shadow 0.4s, background 0.4s;
}
.jp-step-num {
  font-family: var(--eng);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--gray-500);
}
.jp-step-label {
  font-family: var(--eng);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: var(--navy-900);
}
.jp-step-jp {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-600);
  letter-spacing: -0.005em;
  margin-top: 2px;
}
.jp-line {
  position: relative;
  height: 2px;
  margin-top: -36px;
  overflow: hidden;
  border-radius: 2px;
}
.jp-line-bar {
  display: block;
  height: 100%;
  background: rgba(30,79,199,0.18);
}
.jp-line-flow {
  position: absolute; top: 0; left: 0;
  width: 30%; height: 100%;
  background: linear-gradient(90deg, transparent, var(--brand-600), transparent);
  border-radius: 2px;
  animation: jpFlow 3.6s linear infinite;
}
@keyframes jpFlow {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(380%); }
}

/* スクロールで active になると進化 */
.journey.in .jp-step-1::before {
  background: var(--brand-600);
  transform: scale(1.15);
  box-shadow: 0 0 0 5px rgba(30,79,199,0.18), 0 0 0 12px rgba(30,79,199,0.06);
}
.journey.in .jp-step-2::before {
  background: var(--brand-600);
  transform: scale(1.15);
  box-shadow: 0 0 0 5px rgba(30,79,199,0.18), 0 0 0 12px rgba(30,79,199,0.06);
  transition-delay: 0.4s;
}
.journey.in .jp-step-3::before {
  background: var(--navy-900);
  border-color: var(--navy-900);
  transform: scale(1.15);
  box-shadow: 0 0 0 5px rgba(11,21,36,0.18), 0 0 0 12px rgba(11,21,36,0.06);
  transition-delay: 0.8s;
}

@media (max-width: 768px) {
  .journey-h2 { font-size: 36px; }
  .journey-progress { display: none; }
}
.journey-em {
  background: linear-gradient(135deg, #2660DB 0%, #5C82E8 60%, #7CA0F0 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: accentShift 6s ease-in-out infinite;
}
.journey-days {
  font-family: var(--eng);
  letter-spacing: -0.04em;
  color: var(--navy-900);
  margin-left: 8px;
}
.journey-lead {
  font-size: 16px;
  line-height: 1.95;
  color: var(--gray-600);
  max-width: 740px;
  margin: 0 auto;
  font-weight: 500;
}
.journey-lead strong {
  color: var(--navy-900);
  font-weight: 800;
  background: linear-gradient(180deg, transparent 60%, rgba(30,79,199,0.15) 60%);
  padding: 0 3px;
}

/* Timeline grid: 3 cards 等分 (矢印は不要) */
.journey-timeline {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 28px;
  align-items: stretch;
  max-width: 1280px;
  margin: 0 auto 64px;
  position: relative;
}
.journey-timeline .jconnect { display: none !important; }

/* Card — 巻き込み強化版 */
.jcard {
  position: relative;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(30,79,199,0.05) 0%, transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fafcff 100%);
  border: 1px solid rgba(11,21,36,0.08);
  border-radius: 24px;
  padding: 36px 32px 32px;
  box-shadow:
    0 30px 72px -22px rgba(11,21,36,0.12),
    0 10px 24px -10px rgba(30,79,199,0.10),
    inset 0 1px 0 rgba(255,255,255,1);
  overflow: hidden;
  opacity: 0;
  transform: translateY(32px);
  animation: jcardIn 0.95s cubic-bezier(0.22, 0.61, 0.36, 1) var(--jdelay, 0s) forwards;
  transition: transform 0.45s cubic-bezier(0.22,0.61,0.36,1), box-shadow 0.45s, border-color 0.45s;
}
/* 各カードの背面に薄い PHASE 番号の影（巻き込み深度） */
.jcard::after {
  content: attr(data-bg-num);
  position: absolute;
  bottom: -64px; right: -32px;
  font-family: var(--eng);
  font-size: 280px;
  font-weight: 900;
  color: rgba(30,79,199,0.025);
  line-height: 1;
  letter-spacing: -0.08em;
  pointer-events: none;
  z-index: 0;
}
.jcard > * { position: relative; z-index: 1; }
.jcard::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--brand-600), var(--brand-400), var(--brand-600));
  background-size: 200% 100%;
  animation: jcardBar 3.6s ease-in-out infinite;
}
.jcard:hover {
  transform: translateY(-6px);
  box-shadow:
    0 32px 72px -20px rgba(30,79,199,0.18),
    0 12px 24px -10px rgba(30,79,199,0.12);
  border-color: rgba(30,79,199,0.20);
}
/* 3段階の青深度 — Phase が進むほど深い色に */
.jcard-01::before { background: linear-gradient(90deg, #7CA0F0, #5C82E8, #7CA0F0); background-size: 200% 100%; }
.jcard-02::before { background: linear-gradient(90deg, #5C82E8, #1E4FC7, #5C82E8); background-size: 200% 100%; }
.jcard-03::before { background: linear-gradient(90deg, #1E4FC7, #0B1524, #1E4FC7); background-size: 200% 100%; }
@keyframes jcardIn {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes jcardBar {
  0%, 100% { background-position: 0% 0; }
  50%      { background-position: 100% 0; }
}

/* Phase badge */
.jcard-phase {
  display: inline-flex; align-items: baseline; gap: 8px;
  margin-bottom: 18px;
  font-family: var(--eng);
}
.jcard-phase-num {
  font-size: 38px; font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #2660DB 0%, #5C82E8 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.jcard-01 .jcard-phase-num { background: linear-gradient(135deg, #5C82E8 0%, #7CA0F0 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.jcard-02 .jcard-phase-num { background: linear-gradient(135deg, #1E4FC7 0%, #5C82E8 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.jcard-03 .jcard-phase-num { background: linear-gradient(135deg, #0B1524 0%, #1E4FC7 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.jcard-phase-label {
  font-size: 11px; font-weight: 800;
  color: var(--gray-500);
  letter-spacing: 0.24em;
}

/* Keyword block — LISTEN / BUILD / DRIVE */
.jcard-keyword {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(11,21,36,0.08);
}
.jcard-keyword-en {
  font-family: var(--eng);
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.32em;
  color: var(--brand-600);
}
.jcard-01 .jcard-keyword-en { color: #5C82E8; }
.jcard-02 .jcard-keyword-en { color: #1E4FC7; }
.jcard-03 .jcard-keyword-en { color: #0B1524; }
.jcard-keyword-jp {
  font-size: 16px;
  font-weight: 800;
  color: var(--navy-900);
  letter-spacing: -0.01em;
}

/* Icon */
.jcard-icon {
  position: absolute; top: 28px; right: 28px;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--brand-50), rgba(92,130,232,0.18));
  color: var(--brand-600);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px -4px rgba(30,79,199,0.25), 0 0 0 1px rgba(30,79,199,0.08) inset;
}
.jcard-icon svg { width: 18px; height: 18px; }
.jcard-01 .jcard-icon { background: linear-gradient(135deg, rgba(124,160,240,0.20), rgba(92,130,232,0.30)); color: #5C82E8; box-shadow: 0 4px 12px -4px rgba(92,130,232,0.30), 0 0 0 1px rgba(92,130,232,0.12) inset; }
.jcard-02 .jcard-icon { background: linear-gradient(135deg, rgba(92,130,232,0.18), rgba(30,79,199,0.28)); color: #1E4FC7; box-shadow: 0 4px 12px -4px rgba(30,79,199,0.30), 0 0 0 1px rgba(30,79,199,0.12) inset; }
.jcard-03 .jcard-icon { background: linear-gradient(135deg, rgba(30,79,199,0.18), rgba(11,21,36,0.35)); color: #0B1524; box-shadow: 0 4px 12px -4px rgba(11,21,36,0.30), 0 0 0 1px rgba(11,21,36,0.15) inset; }

/* Padding fix — bottom area handled by KPI */
.jcard > *:not(.jcard-kpi):not(.jcard-icon):not(::before):not(::after) {
  position: relative; z-index: 1;
}

/* Headline */
.jcard-headline {
  font-size: 22px; font-weight: 900;
  color: var(--navy-900);
  letter-spacing: -0.025em;
  line-height: 1.45;
  margin: 0 0 16px;
}

/* Description */
.jcard-desc {
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--gray-600);
  margin: 0 0 20px;
  font-weight: 500;
}

/* Bullets */
.jcard-bullets {
  list-style: none; padding: 0; margin: 0 0 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.jcard-bullets li {
  position: relative;
  padding-left: 22px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--navy-900);
  font-weight: 600;
}
.jcard-bullets li::before {
  content: "";
  position: absolute; left: 0; top: 7px;
  width: 14px; height: 14px;
  background: var(--brand-50);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(30,79,199,0.18);
}
.jcard-bullets li::after {
  content: "";
  position: absolute; left: 4px; top: 10px;
  width: 6px; height: 6px;
  background: var(--brand-600);
  border-radius: 50%;
}
.jcard-01 .jcard-bullets li::before { background: rgba(124,160,240,0.18); box-shadow: 0 0 0 1px rgba(92,130,232,0.20); }
.jcard-01 .jcard-bullets li::after  { background: #5C82E8; }
.jcard-02 .jcard-bullets li::before { background: rgba(92,130,232,0.18); box-shadow: 0 0 0 1px rgba(30,79,199,0.20); }
.jcard-02 .jcard-bullets li::after  { background: #1E4FC7; }
.jcard-03 .jcard-bullets li::before { background: rgba(30,79,199,0.15); box-shadow: 0 0 0 1px rgba(11,21,36,0.20); }
.jcard-03 .jcard-bullets li::after  { background: #0B1524; }

/* KPI Highlight */
.jcard-kpi {
  margin-top: auto;
  padding: 16px 18px;
  border-top: 1px solid rgba(30,79,199,0.10);
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(30,79,199,0.06) 0%, transparent 60%),
    rgba(30,79,199,0.025);
  border-radius: 0 0 22px 22px;
  margin-left: -28px;
  margin-right: -28px;
  margin-bottom: -28px;
}
.jcard-kpi-val {
  font-family: var(--eng);
  font-size: 28px; font-weight: 900;
  letter-spacing: -0.035em;
  color: var(--brand-600);
  display: flex; align-items: baseline; gap: 4px;
  font-variant-numeric: tabular-nums;
}
.jcard-kpi-val .u {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-500);
  letter-spacing: -0.01em;
}
.jcard-kpi-lbl {
  font-size: 11.5px;
  color: var(--gray-600);
  font-weight: 600;
  margin-top: 2px;
}
/* KPI 色 - 各 Phase の青深度 */
.jcard-01 .jcard-kpi { background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(92,130,232,0.07) 0%, transparent 60%), rgba(92,130,232,0.03); border-top-color: rgba(92,130,232,0.15); }
.jcard-01 .jcard-kpi-val { color: #5C82E8; }
.jcard-02 .jcard-kpi { background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(30,79,199,0.08) 0%, transparent 60%), rgba(30,79,199,0.03); border-top-color: rgba(30,79,199,0.18); }
.jcard-02 .jcard-kpi-val { color: #1E4FC7; }
.jcard-03 .jcard-kpi { background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(11,21,36,0.08) 0%, transparent 60%), rgba(11,21,36,0.03); border-top-color: rgba(11,21,36,0.20); }
.jcard-03 .jcard-kpi-val { color: #0B1524; }

/* KPI Anchor (Week 1-2 など) */
.jcard-kpi-anchor {
  font-family: var(--eng);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--gray-500);
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* Connector arrows between cards — Palantir-style bold flow */
.jconnect {
  display: flex; align-items: center; justify-content: center;
  position: relative;
  padding-top: 60px;
}
.jconnect svg { width: 100%; height: 40px; overflow: visible; }
.jconnect-line-bg { /* 太い帯：静的 */ }
.jconnect-line-flow {
  stroke-dashoffset: 0;
  animation: jconnectFlow 2s linear infinite;
}
.jconnect-arrow {
  opacity: 0;
  transform-origin: 119px 20px;
  animation: jconnectArrowIn 0.7s cubic-bezier(0.22,0.61,0.36,1) 0.5s forwards, jconnectArrowPulse 2.4s ease-in-out 1.5s infinite;
}
@keyframes jconnectFlow {
  to { stroke-dashoffset: -48; }
}
@keyframes jconnectArrowIn {
  from { opacity: 0; transform: translateX(-10px) scale(0.7); }
  to   { opacity: 1; transform: translateX(0)     scale(1);   }
}
@keyframes jconnectArrowPulse {
  0%, 100% { transform: translateX(0)   scale(1); }
  50%      { transform: translateX(3px) scale(1.08); }
}

/* ===================================================================
 *  HOW WE LISTEN -- voices (エディトリアル・マガジン版)
 *  "声"を主役にしたBloomberg/NYTスタイル
 * =================================================================== */
.voices {
  margin-top: 88px;
  padding: 72px 0 24px;
  position: relative;
}
.voices::before {
  content: "";
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 1px; height: 64px;
  background: linear-gradient(180deg, transparent, rgba(30,79,199,0.4), rgba(30,79,199,0.05));
}
.voices-head { text-align: center; margin-bottom: 64px; max-width: 720px; margin-left: auto; margin-right: auto; padding: 0 24px; }
.voices-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--eng);
  font-size: 11.5px; font-weight: 800;
  letter-spacing: 0.32em;
  color: var(--brand-600);
  background: rgba(30,79,199,0.07);
  border: 1px solid rgba(30,79,199,0.18);
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 26px;
}
.voices-eyebrow-dot {
  width: 6px; height: 6px;
  background: var(--brand-600);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(30,79,199,0.55);
  animation: hscDot 1.6s ease-out infinite;
}
.voices-title {
  font-size: 42px;
  font-weight: 900;
  color: var(--navy-900);
  letter-spacing: -0.04em;
  line-height: 1.28;
  margin: 0 0 22px;
}
.voices-em {
  background: linear-gradient(135deg, #1E4FC7 0%, #5C82E8 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.voices-sub {
  font-size: 15.5px;
  line-height: 1.95;
  color: var(--gray-600);
  font-weight: 500;
  margin: 0;
}
.voices-sub strong {
  color: var(--navy-900);
  font-weight: 800;
  background: linear-gradient(180deg, transparent 62%, rgba(30,79,199,0.18) 62%);
  padding: 0 4px;
}

/* === Voice cards: 縦並びの大型エディトリアル ストリップ === */
.voices-stack {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.vc {
  position: relative;
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 36px;
  align-items: center;
  padding: 36px 44px 36px 36px;
  background: #ffffff;
  border: 1px solid rgba(11,21,36,0.07);
  border-radius: 20px;
  box-shadow:
    0 24px 56px -28px rgba(11,21,36,0.16),
    0 6px 16px -8px rgba(11,21,36,0.04);
  overflow: hidden;
  transition: transform 0.45s cubic-bezier(0.22,0.61,0.36,1), box-shadow 0.45s, border-color 0.45s;
}
.vc::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, var(--brand-400), var(--brand-600));
  opacity: 0.8;
}
.vc-01::before { background: linear-gradient(180deg, #A5C0F5, #7CA0F0); }
.vc-02::before { background: linear-gradient(180deg, #7CA0F0, #5C82E8); }
.vc-03::before { background: linear-gradient(180deg, #5C82E8, #2660DB); }
.vc-04::before { background: linear-gradient(180deg, #2660DB, #1E4FC7); }
.vc-05::before { background: linear-gradient(180deg, #1E4FC7, #0B1524); }

.vc:hover {
  transform: translateX(6px);
  box-shadow:
    0 32px 72px -28px rgba(30,79,199,0.22),
    0 0 0 1px rgba(30,79,199,0.10);
  border-color: rgba(30,79,199,0.14);
}

/* 巨大装飾ナンバー（背景アート） */
.vc-art {
  font-family: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 96px;
  font-weight: 900;
  letter-spacing: -0.07em;
  line-height: 1;
  color: var(--brand-600);
  background: linear-gradient(180deg, rgba(30,79,199,0.18), rgba(30,79,199,0.04));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" on;
  position: relative;
  flex-shrink: 0;
}
.vc-05 .vc-art {
  background: linear-gradient(180deg, rgba(11,21,36,0.45), rgba(11,21,36,0.10));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 右側：メタ + クオート */
.vc-content {
  min-width: 0;
}
.vc-meta {
  display: flex; align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
  font-family: var(--eng);
}
.vc-meta-en {
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.28em;
  color: var(--brand-600);
}
.vc-05 .vc-meta-en { color: #0B1524; }
.vc-meta-jp {
  font-size: 14.5px; font-weight: 800;
  color: var(--navy-900);
  letter-spacing: 0.02em;
  font-family: 'Noto Sans JP', system-ui, sans-serif;
}
.vc-meta-sep {
  width: 1px; height: 14px;
  background: rgba(11,21,36,0.15);
}
.vc-meta-sees {
  font-size: 12px;
  font-family: 'Noto Sans JP', system-ui, sans-serif;
  color: var(--gray-500);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* クオート (主役) */
.vc-quote {
  font-family: 'Noto Serif JP', 'Yu Mincho', serif;
  font-size: 27px;
  font-weight: 700;
  color: var(--navy-900);
  line-height: 1.55;
  letter-spacing: -0.015em;
  margin: 0;
  position: relative;
}
.vc-quote-mark {
  font-family: 'Noto Serif JP', serif;
  color: var(--brand-600);
  font-size: 40px;
  font-weight: 900;
  line-height: 0;
  position: relative;
  top: 10px;
  margin-right: 2px;
  opacity: 0.7;
}
.vc-quote-mark-end {
  margin-right: 0;
  margin-left: 2px;
}
.vc-05 .vc-quote-mark { color: #1E4FC7; }

/* === Bridge === */
.voices-bridge {
  margin-top: 56px;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  text-align: center;
}
.vb-mark {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--brand-50), rgba(92,130,232,0.18));
  color: var(--brand-600);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px -8px rgba(30,79,199,0.22), 0 0 0 1px rgba(30,79,199,0.10) inset;
}
.vb-mark svg { width: 28px; height: 28px; }
.vb-text {
  font-size: 19px;
  line-height: 1.85;
  color: var(--navy-900);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.005em;
  max-width: 680px;
}
.vb-text strong {
  font-weight: 900;
  background: linear-gradient(180deg, transparent 60%, rgba(30,79,199,0.18) 60%);
  padding: 0 4px;
}

/* Responsive */
@media (max-width: 768px) {
  .voices { padding: 48px 0 12px; }
  .voices-title { font-size: 30px; }
  .voices-stack { gap: 14px; }
  .vc {
    grid-template-columns: 80px 1fr;
    gap: 18px;
    padding: 24px 22px 24px 20px;
  }
  .vc-art { font-size: 62px; }
  .vc-quote { font-size: 19px; }
  .vc-quote-mark { font-size: 28px; top: 6px; }
  .vc-meta-sees { font-size: 11.5px; }
  .vb-text { font-size: 16px; }
}

/* ===================================================================
 *  旧 .lp-card は残置（後方互換）— 新 .vc に置き換え済み
 * =================================================================== */
.listen-deep {
  margin-top: 80px;
  padding: 64px 0 16px;
  position: relative;
}
.listen-deep::before {
  content: "";
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 1px; height: 56px;
  background: linear-gradient(180deg, transparent, rgba(30,79,199,0.4), rgba(30,79,199,0.05));
}
.listen-deep-head {
  text-align: center;
  margin-bottom: 56px;
}
.listen-deep-eyebrow {
  display: inline-block;
  font-family: var(--eng);
  font-size: 11.5px; font-weight: 800;
  letter-spacing: 0.28em;
  color: var(--brand-600);
  background: rgba(30,79,199,0.06);
  border: 1px solid rgba(30,79,199,0.15);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.listen-deep-title {
  font-size: 36px; font-weight: 900;
  color: var(--navy-900);
  letter-spacing: -0.03em;
  line-height: 1.35;
  margin: 0 0 18px;
}
.listen-deep-em {
  background: linear-gradient(135deg, #1E4FC7 0%, #5C82E8 60%, #7CA0F0 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: accentShift 6s ease-in-out infinite;
}
.listen-deep-sub {
  font-size: 15px; line-height: 1.95;
  color: var(--gray-600);
  max-width: 680px;
  margin: 0 auto;
  font-weight: 500;
}
.listen-deep-sub strong {
  color: var(--navy-900);
  font-weight: 800;
  background: linear-gradient(180deg, transparent 60%, rgba(30,79,199,0.15) 60%);
  padding: 0 3px;
}

/* 5 perspective cards */
.lp-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 56px;
}
.lp-card {
  position: relative;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(30,79,199,0.03) 0%, transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fafcff 100%);
  border: 1px solid rgba(11,21,36,0.08);
  border-radius: 18px;
  padding: 26px 20px 22px;
  box-shadow: 0 8px 24px -12px rgba(11,21,36,0.08);
  transition: transform 0.35s, box-shadow 0.35s, border-color 0.35s;
  overflow: hidden;
}
.lp-card::before {
  content: "";
  position: absolute; top: 0; left: 0; width: 4px; height: 100%;
  background: var(--brand-600);
  opacity: 0.6;
}
/* 5枚で青の深度を変える（左→右で薄→濃→深） */
.lp-card-1::before { background: #7CA0F0; }
.lp-card-2::before { background: #5C82E8; }
.lp-card-3::before { background: #2660DB; }
.lp-card-4::before { background: #1E4FC7; }
.lp-card-5::before { background: #0B1524; }
.lp-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 56px -20px rgba(30,79,199,0.22), 0 0 0 1px rgba(30,79,199,0.14);
  border-color: rgba(30,79,199,0.18);
}
/* 番号: 大型グラデーション+進行表示 (2026-05-28 刷新) */
.lp-num {
  position: absolute; top: 22px; right: 24px;
  font-family: var(--eng), 'Inter', sans-serif;
  font-size: 42px; font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #1E4FC7 0%, #5C82E8 70%, rgba(92,130,232,0.35) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  opacity: 0.92;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
/* .lp-num::after は削除 (社長指示 2026-05-28: 「/ 05」進行表示は不要) */
.lp-card-5 .lp-num {
  background: linear-gradient(135deg, #0B1524 0%, #1E4FC7 70%, rgba(30,79,199,0.35) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.lp-icon {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--brand-50), rgba(92,130,232,0.18));
  color: var(--brand-600);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px -4px rgba(30,79,199,0.22), 0 0 0 1px rgba(30,79,199,0.08) inset;
}
.lp-icon svg { width: 19px; height: 19px; }
.lp-card-1 .lp-icon { color: #5C82E8; }
.lp-card-5 .lp-icon { color: #0B1524; background: linear-gradient(135deg, rgba(30,79,199,0.10), rgba(11,21,36,0.20)); }

.lp-role { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid rgba(11,21,36,0.07); }
.lp-role-en {
  font-family: var(--eng);
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--brand-600);
  margin-bottom: 4px;
}
.lp-card-5 .lp-role-en { color: #0B1524; }
.lp-role-jp {
  font-size: 16px; font-weight: 800;
  color: var(--navy-900);
  letter-spacing: -0.015em;
}

.lp-sees { margin-bottom: 14px; }
.lp-sees-label,
.lp-truth-label {
  font-size: 9.5px; font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--gray-500);
  margin-bottom: 5px;
  text-transform: uppercase;
  font-family: var(--eng);
}
.lp-sees-list {
  font-size: 12.5px;
  color: var(--gray-700);
  line-height: 1.55;
  font-weight: 600;
}
.lp-truth {
  background: rgba(30,79,199,0.04);
  border: 1px dashed rgba(30,79,199,0.20);
  border-radius: 10px;
  padding: 10px 12px;
}
.lp-truth-text {
  font-size: 12.5px;
  color: var(--navy-900);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.005em;
  font-style: italic;
}
.lp-truth-text::before { content: "「"; color: var(--brand-600); }
.lp-truth-text::after  { content: "」"; color: var(--brand-600); }
.lp-truth-text {
  /* Remove default italic */
  font-style: normal;
}

/* Bridge text below 5 cards */
.listen-deep-bridge {
  display: flex; align-items: center; gap: 24px;
  max-width: 920px;
  margin: 0 auto;
}
.ldb-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(30,79,199,0.30), transparent);
}
.ldb-text {
  text-align: center;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--gray-600);
  font-weight: 500;
  margin: 0;
  flex-shrink: 0;
  max-width: 600px;
}
.ldb-text strong {
  color: var(--navy-900);
  font-weight: 800;
  background: linear-gradient(180deg, transparent 60%, rgba(30,79,199,0.15) 60%);
  padding: 0 3px;
}

/* Responsive — 全幅帯で美しく (PC/タブレット/モバイル) */
/* タブレット横 (1080-1280px) */
@media (max-width: 1280px) {
  .lp-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .lp-card-5 { grid-column: 2 / 3; /* 5番目を中央列に配置 */ }
  .lp-card { padding: 22px 18px; }
  .lp-num { font-size: 36px !important; top: 18px !important; right: 18px !important; }
  .listen-deep-title { font-size: 30px; }
}
/* タブレット縦 (768-1080px) */
@media (max-width: 1080px) {
  .lp-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .lp-card-5 { grid-column: 1 / -1; }  /* 5番目を全幅 */
  .lp-card { padding: 22px 20px; }
  .lp-num { font-size: 38px !important; }
  .listen-deep-title { font-size: 28px; }
}
/* 大モバイル (640-768px) */
@media (max-width: 768px) {
  .listen-deep { padding: 40px 0 0; margin-top: 48px; }
  .lp-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .lp-card { padding: 20px 16px; }
  .lp-card-5 { grid-column: 1 / -1; }
  .lp-num { font-size: 34px !important; top: 16px !important; right: 16px !important; }
  .lp-icon { width: 36px; height: 36px; margin-bottom: 12px; }
  .lp-icon svg { width: 17px; height: 17px; }
  .lp-role-jp { font-size: 15px; }
  .lp-sees-list { font-size: 12px; }
  .lp-truth { padding: 9px 11px; }
  .lp-truth-text { font-size: 12px; line-height: 1.55; }
  .listen-deep-title { font-size: 25px; }
}
/* 小モバイル (≤640px) — 完全1列 */
@media (max-width: 640px) {
  .lp-grid { grid-template-columns: 1fr; gap: 12px; }
  .lp-card { padding: 22px 18px; }
  .lp-card-5 { grid-column: auto; }
  .lp-num { font-size: 36px !important; }
  .listen-deep-title { font-size: 22px; line-height: 1.5; }
  .listen-deep-bridge { flex-direction: column; gap: 12px; }
  .ldb-text { font-size: 14px; }
}
/* 極小モバイル (≤414px) — iPhone SE等 */
@media (max-width: 414px) {
  .lp-num { font-size: 32px !important; top: 14px !important; right: 14px !important; }
  .lp-card { padding: 20px 16px; }
  .lp-truth-text { font-size: 11.5px; line-height: 1.6; }
}

/* ===== 無料相談 価値プロップ（強烈版） ===== */
.cta-value {
  position: relative;
  margin-top: 80px;
  padding: 56px 56px 48px;
  border-radius: 32px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(30,79,199,0.08) 0%, transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
  border: 1px solid rgba(30,79,199,0.10);
  box-shadow:
    0 40px 100px -30px rgba(30,79,199,0.18),
    0 16px 40px -16px rgba(11,21,36,0.10),
    inset 0 1px 0 rgba(255,255,255,1);
  overflow: hidden;
}
.cta-value-bg { position: absolute; inset: 0; pointer-events: none; }
.cta-value-orb {
  position: absolute; top: -200px; right: -120px;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(30,79,199,0.10) 0%, transparent 60%);
  filter: blur(40px);
  animation: jOrb 18s ease-in-out infinite alternate;
}
.cta-value-inner { position: relative; z-index: 2; }

/* Head */
.cta-value-head { text-align: center; margin-bottom: 44px; }
.cta-value-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--eng);
  font-size: 11.5px; font-weight: 800;
  letter-spacing: 0.28em;
  color: var(--brand-600);
  background: rgba(30,79,199,0.08);
  border: 1px solid rgba(30,79,199,0.18);
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.cta-value-dot {
  width: 7px; height: 7px;
  background: var(--brand-600);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(30,79,199,0.55);
  animation: hscDot 1.6s ease-out infinite;
}
.cta-value-title {
  font-size: 32px; font-weight: 900;
  color: var(--navy-900);
  letter-spacing: -0.03em;
  line-height: 1.42;
  margin: 0 0 18px;
}
.cta-value-em {
  background: linear-gradient(135deg, #1E4FC7 0%, #5C82E8 60%, #7CA0F0 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: accentShift 6s ease-in-out infinite;
}
.cta-value-sub {
  font-size: 15px;
  line-height: 1.95;
  color: var(--gray-600);
  max-width: 720px;
  margin: 0 auto;
  font-weight: 500;
}
.cta-value-sub strong {
  color: var(--navy-900);
  font-weight: 800;
  background: linear-gradient(180deg, transparent 60%, rgba(30,79,199,0.15) 60%);
  padding: 0 3px;
}

/* 4 持ち帰り価値カード */
.cta-value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 36px;
}
.cta-value-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(11,21,36,0.07);
  border-radius: 18px;
  padding: 24px 20px 22px;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  box-shadow: 0 2px 8px -4px rgba(11,21,36,0.04);
}
.cta-value-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px -16px rgba(30,79,199,0.20), 0 0 0 1px rgba(30,79,199,0.12);
  border-color: rgba(30,79,199,0.15);
}
.cta-value-card-num {
  position: absolute; top: 18px; right: 20px;
  font-family: var(--eng);
  font-size: 13px; font-weight: 900;
  color: rgba(30,79,199,0.20);
  letter-spacing: 0.04em;
}
.cta-value-card-ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(124,160,240,0.16), rgba(30,79,199,0.22));
  color: var(--brand-600);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px -4px rgba(30,79,199,0.25), 0 0 0 1px rgba(30,79,199,0.10) inset;
}
.cta-value-card-ico svg { width: 22px; height: 22px; }
.cta-value-card-title {
  font-size: 15.5px; font-weight: 800;
  color: var(--navy-900);
  letter-spacing: -0.015em;
  line-height: 1.5;
  margin: 0 0 10px;
}
.cta-value-card-desc {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--gray-600);
  font-weight: 500;
  margin: 0;
}

/* 安心バー */
.cta-value-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  justify-content: center;
  padding: 18px 24px;
  background: rgba(30,79,199,0.04);
  border: 1px solid rgba(30,79,199,0.10);
  border-radius: 14px;
  margin-bottom: 32px;
}
.cta-value-trust-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px;
  color: var(--gray-700);
  font-weight: 500;
}
.cta-value-trust-item svg { width: 16px; height: 16px; color: var(--brand-600); }
.cta-value-trust-item strong { color: var(--navy-900); font-weight: 800; }

/* CTA 大型 */
.cta-value-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.btn-primary-xl {
  padding: 18px 36px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  border-radius: 999px !important;
  box-shadow: 0 16px 40px -10px rgba(30,79,199,0.45), 0 0 0 1px rgba(255,255,255,0.18) inset !important;
}
.cta-value-hint {
  text-align: center;
  font-size: 12px;
  color: var(--gray-500);
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.01em;
}

/* Responsive */
@media (max-width: 960px) {
  .cta-value { padding: 40px 28px 36px; border-radius: 24px; }
  .cta-value-title { font-size: 24px; }
  .cta-value-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cta-value-trust { gap: 18px; padding: 14px 16px; }
}
@media (max-width: 640px) {
  .cta-value { padding: 32px 20px 28px; margin-top: 56px; }
  .cta-value-title { font-size: 21px; }
  .cta-value-grid { grid-template-columns: 1fr; }
  .cta-value-trust-item { font-size: 12px; }
  .btn-primary-xl { padding: 16px 24px !important; font-size: 15px !important; }
}

/* Responsive */
@media (max-width: 1080px) {
  .journey-timeline {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 540px;
  }
  .jconnect {
    padding-top: 0;
    transform: rotate(90deg);
    height: 40px;
    margin: 0 auto;
    width: 80px;
  }
  .journey-head .h2 { font-size: 34px; }
}
@media (max-width: 640px) {
  .journey { padding: 80px 0; }
  .journey-head .h2 { font-size: 28px; }
  .jcard { padding: 24px 20px 20px; }
  .jcard-headline { font-size: 19px; }
  .jcard-day-num { font-size: 32px; }
  .jcard-kpi { margin-left: -20px; margin-right: -20px; margin-bottom: -20px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .jcard, .jcard::before, .jconnect-line, .jconnect-arrow,
  .journey-em, .journey-bg-orb {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============= 神経網アニメーション層（インラインSVG） — テキスト領域外で薄く ============= */
.hero-neural {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  /* 左側のテキスト領域はマスクで透明にする */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 38%, rgba(0,0,0,0.6) 55%, rgba(0,0,0,1) 100%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 38%, rgba(0,0,0,0.6) 55%, rgba(0,0,0,1) 100%);
  animation: hnFadeIn 1.8s ease-out 0.4s forwards;
}
@keyframes hnFadeIn {
  to { opacity: 0.7; }
}
/* データ縦線も非表示（読みにくい原因） */
.hero-stream { display: none !important; }
/* 接続線：dasharray でフローする光跡 */
.hn-lines path {
  stroke-dasharray: 8 6;
  stroke-dashoffset: 0;
  opacity: 0.55;
  animation: hnLineFlow 10s linear infinite;
}
.hn-lines path:nth-child(odd)  { animation-direction: normal; }
.hn-lines path:nth-child(even) { animation-direction: reverse; animation-duration: 12s; }
@keyframes hnLineFlow {
  to { stroke-dashoffset: -280; }
}

/* ノード：脈動 — 各ノードが時間差で光る */
.hn-nodes .hn-n {
  fill: url(#hnNode);
  transform-box: fill-box;
  transform-origin: center;
  animation: hnNodePulse 3.6s ease-in-out infinite;
}
.hn-nodes .n1  { animation-delay: 0.0s; }
.hn-nodes .n2  { animation-delay: 0.2s; }
.hn-nodes .n3  { animation-delay: 0.4s; }
.hn-nodes .n4  { animation-delay: 0.6s; }
.hn-nodes .n5  { animation-delay: 0.8s; }
.hn-nodes .n6  { animation-delay: 1.0s; }
.hn-nodes .n7  { animation-delay: 1.2s; }
.hn-nodes .n8  { animation-delay: 1.4s; }
.hn-nodes .n9  { animation-delay: 1.6s; }
.hn-nodes .n10 { animation-delay: 0.1s; }
.hn-nodes .n11 { animation-delay: 0.3s; }
.hn-nodes .n12 { animation-delay: 0.5s; }
.hn-nodes .n13 { animation-delay: 0.7s; }
.hn-nodes .n14 { animation-delay: 0.9s; }
.hn-nodes .n15 { animation-delay: 1.1s; }
.hn-nodes .n16 { animation-delay: 1.3s; }
.hn-nodes .n17 { animation-delay: 1.5s; }
.hn-nodes .n18 { animation-delay: 1.7s; }
.hn-nodes .n19 { animation-delay: 1.9s; }
.hn-nodes .n20 { animation-delay: 2.1s; }
.hn-nodes .n21 { animation-delay: 2.3s; }
@keyframes hnNodePulse {
  0%, 100% { transform: scale(1);   opacity: 0.85; }
  50%      { transform: scale(1.6); opacity: 1; }
}

/* ============= 浮遊粒子（深み） — 文字に被るので非表示 ============= */
.hero-particles { display: none !important; }
.hero-particles span {
  position: absolute;
  width: 3px; height: 3px;
  background: #5C82E8;
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 8px rgba(92,130,232,0.7);
  animation: particleFloat 14s linear infinite;
}
.hero-particles span:nth-child(1)  { left:  6%; bottom: -10px; animation-delay:  0s;   animation-duration: 16s; }
.hero-particles span:nth-child(2)  { left: 14%; bottom: -10px; animation-delay:  2.4s; animation-duration: 18s; }
.hero-particles span:nth-child(3)  { left: 22%; bottom: -10px; animation-delay:  4.8s; animation-duration: 14s; }
.hero-particles span:nth-child(4)  { left: 30%; bottom: -10px; animation-delay:  1.2s; animation-duration: 20s; }
.hero-particles span:nth-child(5)  { left: 38%; bottom: -10px; animation-delay:  6.0s; animation-duration: 17s; }
.hero-particles span:nth-child(6)  { left: 46%; bottom: -10px; animation-delay:  3.6s; animation-duration: 15s; }
.hero-particles span:nth-child(7)  { left: 54%; bottom: -10px; animation-delay:  7.2s; animation-duration: 19s; }
.hero-particles span:nth-child(8)  { left: 62%; bottom: -10px; animation-delay:  0.8s; animation-duration: 16s; }
.hero-particles span:nth-child(9)  { left: 70%; bottom: -10px; animation-delay:  5.4s; animation-duration: 14s; }
.hero-particles span:nth-child(10) { left: 78%; bottom: -10px; animation-delay:  2.0s; animation-duration: 17s; }
.hero-particles span:nth-child(11) { left: 86%; bottom: -10px; animation-delay:  8.4s; animation-duration: 18s; }
.hero-particles span:nth-child(12) { left: 94%; bottom: -10px; animation-delay:  4.0s; animation-duration: 15s; }
@keyframes particleFloat {
  0%   { transform: translateY(0)      scale(0.4); opacity: 0; }
  10%  { opacity: 0.9; }
  85%  { opacity: 0.9; }
  100% { transform: translateY(-110vh) scale(1.2); opacity: 0; }
}

/* ============= 背景画像のドリフトを強化（より目に見える動き） ============= */
.hero-bg-image {
  /* スケール + 平行移動の組み合わせでドラマチックに */
  animation:
    heroBgFadeIn 1.6s ease-out 0.05s forwards,
    heroBgDriftStrong 28s ease-in-out 1.6s infinite alternate !important;
}
@keyframes heroBgDriftStrong {
  0%   { background-position: 48% 50%; transform: scale(1.00); filter: hue-rotate(0deg); }
  33%  { background-position: 54% 46%; transform: scale(1.025); filter: hue-rotate(-3deg); }
  66%  { background-position: 50% 54%; transform: scale(1.015); filter: hue-rotate(2deg); }
  100% { background-position: 46% 48%; transform: scale(1.00); filter: hue-rotate(0deg); }
}

/* ============= データストリーム斜線（背景レイヤー） ============= */
.hero-stream {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.hero-stream span {
  position: absolute;
  top: -20%;
  width: 1px;
  height: 80px;
  background: linear-gradient(180deg, transparent, rgba(30,79,199,0.6), transparent);
  filter: blur(0.5px);
  animation: streamFall 6s linear infinite;
}
.hero-stream span:nth-child(1) { left: 12%; animation-delay: 0s;   animation-duration: 6s;   }
.hero-stream span:nth-child(2) { left: 38%; animation-delay: 1.6s; animation-duration: 7.5s; }
.hero-stream span:nth-child(3) { left: 64%; animation-delay: 0.9s; animation-duration: 5.5s; }
.hero-stream span:nth-child(4) { left: 86%; animation-delay: 2.4s; animation-duration: 7s;   }
@keyframes streamFall {
  0%   { transform: translateY(-20%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(120vh); opacity: 0; }
}

/* ============= フローティングデータチップ（ダッシュボード周辺） ============= */
.dash-floats {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 5;
}
.dchip {
  position: absolute;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  background: #fff;
  border: 1px solid rgba(30,79,199,0.18);
  border-radius: 12px;
  font-size: 12px; font-weight: 700;
  color: var(--navy-900);
  letter-spacing: -0.005em;
  box-shadow:
    0 8px 24px -8px rgba(11,21,36,0.18),
    0 4px 10px -4px rgba(30,79,199,0.10),
    0 0 0 1px rgba(255,255,255,0.6) inset;
  opacity: 0;
  transform: translateY(12px) scale(0.94);
  animation: dchipIn 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.dchip strong { color: var(--brand-600); font-weight: 800; }
.dchip-ico {
  width: 18px; height: 18px;
  background: #16a34a;
  color: #fff;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900;
  box-shadow: 0 4px 10px -2px rgba(22,163,74,0.5);
}
.dchip-dot {
  width: 8px; height: 8px;
  background: var(--brand-600);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(30,79,199,0.55);
  animation: hscDot 1.6s ease-out infinite;
}
.dchip-arrow {
  color: var(--brand-600);
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
}

/* 配置 + 各自の永続フロート */
.dchip-top { top: -16px;    left: -36px;  animation-delay: 1.95s; }
.dchip-mid { top: 38%;      left: -56px;  animation-delay: 2.20s; }
.dchip-bot { bottom: 28px;  right: -28px; animation-delay: 2.45s; }

.dchip-top.dchip { animation: dchipIn 0.7s 1.95s cubic-bezier(0.22,0.61,0.36,1) forwards, dchipFloat 5.5s ease-in-out 2.7s infinite alternate; }
.dchip-mid.dchip { animation: dchipIn 0.7s 2.20s cubic-bezier(0.22,0.61,0.36,1) forwards, dchipFloat 6.5s ease-in-out 3.0s infinite alternate-reverse; }
.dchip-bot.dchip { animation: dchipIn 0.7s 2.45s cubic-bezier(0.22,0.61,0.36,1) forwards, dchipFloat 6s   ease-in-out 3.3s infinite alternate; }

@keyframes dchipIn {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes dchipFloat {
  0%   { transform: translateY(0)    scale(1); }
  50%  { transform: translateY(-6px) scale(1.012); }
  100% { transform: translateY(0)    scale(1); }
}

/* ============= ダッシュボードを横切るスキャンビーム ============= */
.dash { position: relative; overflow: hidden; }
.dash-scan {
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg,
    transparent 0%,
    transparent 40%,
    rgba(92,130,232,0.10) 48%,
    rgba(92,130,232,0.22) 50%,
    rgba(92,130,232,0.10) 52%,
    transparent 60%,
    transparent 100%);
  background-size: 220% 100%;
  background-position: 200% 0;
  mix-blend-mode: screen;
  animation: dashScan 7.5s ease-in-out 2.6s infinite;
  z-index: 4;
}
@keyframes dashScan {
  0%   { background-position: 200% 0; opacity: 0; }
  10%  { opacity: 1; }
  60%  { opacity: 1; }
  100% { background-position: -100% 0; opacity: 0; }
}

/* KPI 値カウントアップ中の見栄え */
.kpi-value span[data-hero-count] {
  font-variant-numeric: tabular-nums;
  display: inline-block;
  min-width: 1.5ch;
}

/* ユーザーが motion 苦手なら全部止める */
@media (prefers-reduced-motion: reduce) {
  .hero-bg-image,
  .hero-mesh,
  .hero-orb-1, .hero-orb-2,
  .hero-overline, .hero-title-mega .hero-title-line,
  .hero-desc, .hero-actions, .dash-wrap,
  .hero-actions .btn-primary,
  .accent-grad,
  .hero-status-chip, .hero-status-chip .hsc-dot,
  .hero-stream span,
  .dchip, .dchip-dot,
  .dash-scan {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-stream { display: none; }
  .dash-scan { display: none; }
}

/* Hero orbs slower more dramatic */
.hero-orb-1, .hero-orb-2 {
  filter: blur(40px);
}

/* Phase card hover with rotate-Y micro-3D */
.phase-card { perspective: 800px; transition: transform 0.45s cubic-bezier(.2,.7,.2,1), box-shadow 0.45s, border-color 0.45s; }
.phase-card:hover { transform: translateY(-8px) rotateX(2deg); }

/* WHY pillar number — subtle pulse on hover */
.pillar:hover .pillar-num {
  animation: pillarNumPulse 1.2s ease-in-out infinite;
}
@keyframes pillarNumPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

/* Case study card — subtle parallax effect on metric numbers */
.case-metric-value {
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1), color 0.35s;
}
.case:hover .case-metric-value {
  transform: translateY(-2px);
}

/* Problem card sequential entry — reveal stagger */
.problem.in .problem-card { animation: fadeUp 0.6s ease both; }
.problem.in .problem-card:nth-child(1) { animation-delay: 0.05s; }
.problem.in .problem-card:nth-child(2) { animation-delay: 0.15s; }
.problem.in .problem-card:nth-child(3) { animation-delay: 0.25s; }
.problem.in .problem-card:nth-child(4) { animation-delay: 0.35s; }
.problem.in .problem-card:nth-child(5) { animation-delay: 0.45s; }
.problem.in .problem-card:nth-child(6) { animation-delay: 0.55s; }

/* Phase card stagger entry */
.approach.in .phase-card { animation: fadeUp 0.7s ease both; }
.approach.in .phase-card:nth-child(1) { animation-delay: 0.1s; }
.approach.in .phase-card:nth-child(2) { animation-delay: 0.25s; }
.approach.in .phase-card:nth-child(3) { animation-delay: 0.4s; }
.approach.in .phase-card:nth-child(4) { animation-delay: 0.55s; }

/* Service card stagger */
.services.in .svc { animation: fadeUp 0.7s ease both; }
.services.in .svc:nth-child(1) { animation-delay: 0.1s; }
.services.in .svc:nth-child(2) { animation-delay: 0.2s; }
.services.in .svc:nth-child(3) { animation-delay: 0.3s; }
.services.in .svc:nth-child(4) { animation-delay: 0.4s; }

/* Case cards stagger */
.section.in .case { animation: fadeUp 0.7s ease both; }
.section.in .case:nth-of-type(1) { animation-delay: 0.1s; }
.section.in .case:nth-of-type(2) { animation-delay: 0.25s; }
.section.in .case:nth-of-type(3) { animation-delay: 0.4s; }

/* Tech logos subtle hover */
.tech-logo { transition: transform 0.3s cubic-bezier(.2,.7,.2,1), border-color 0.3s, box-shadow 0.3s; }
.tech-logo:hover svg, .tech-logo:hover img { transform: scale(1.08); transition: transform 0.3s; }

/* Live dot pulse already exists - enhance to brighter */
@keyframes pulseDotBright {
  0% { box-shadow: 0 0 0 0 rgba(239,68,68,0.7), 0 0 8px rgba(239,68,68,0.4); }
  70% { box-shadow: 0 0 0 14px rgba(239,68,68,0), 0 0 12px rgba(239,68,68,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0), 0 0 8px rgba(239,68,68,0); }
}

/* FAQ toggle smooth */
.faq-q-toggle { transition: transform 0.4s cubic-bezier(.2,.7,.2,1), background 0.3s, color 0.3s; }

/* FAQ base styles */
.faq { background: #fff; position: relative; overflow: hidden; }
.faq-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 44px;
}
.faq-head .eyebrow { justify-content: center; }
.faq-head .h2 { text-align: center; }
.faq-list {
  max-width: 880px;
  margin: 0 auto;
  display: flex; flex-direction: column;
  gap: 14px;
}
.faq-item {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.faq-item:hover {
  border-color: var(--brand-400);
  box-shadow: 0 12px 28px -16px rgba(11,21,36,0.12);
}
.faq-item[open] {
  border-color: var(--brand-400);
  box-shadow: 0 18px 36px -20px rgba(30,79,199,0.16);
}
.faq-q {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 28px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q-mark {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--brand-50);
  color: var(--brand-600);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--eng);
  font-size: 14px; font-weight: 800;
  flex-shrink: 0;
}
.faq-q-text {
  flex: 1;
  font-size: 15.5px; font-weight: 700;
  color: var(--navy-900);
  letter-spacing: -0.005em;
}
.faq-q-toggle {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--gray-100);
  color: var(--gray-600);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.faq-q-toggle svg { width: 14px; height: 14px; }
.faq-item[open] .faq-q-toggle {
  transform: rotate(45deg);
  background: var(--brand-600);
  color: #fff;
}
.faq-a {
  padding: 0 28px 26px 78px;
  font-size: 14px;
  line-height: 1.95;
  color: var(--gray-600);
  font-weight: 500;
}
.faq-a strong { color: var(--navy-900); }

/* ============================================================
   FAQ DISPLAY GUARANTEE (2026-05-28 緊急修正)
   何があっても details/summary/answer が表示されるように
   ============================================================ */
.faq-list { display: flex !important; flex-direction: column !important; visibility: visible !important; opacity: 1 !important; }
.faq-item { display: block !important; visibility: visible !important; opacity: 1 !important; }
.faq-item summary,
.faq-item .faq-q { display: flex !important; visibility: visible !important; opacity: 1 !important; }
.faq-item .faq-q-text,
.faq-item .faq-q-mark,
.faq-item .faq-q-toggle { display: flex !important; visibility: visible !important; opacity: 1 !important; }
.faq-item .faq-q-text { display: block !important; flex: 1 !important; }
.faq-item[open] .faq-a,
.faq-item[open] > .faq-a { display: block !important; visibility: visible !important; opacity: 1 !important; }
.faq-item:not([open]) .faq-a { display: none; }
/* fix Safari/iOS quirk: details > * 隠す挙動の無効化 */
details.faq-item > summary { display: flex !important; }
details.faq-item[open] > .faq-a { display: block !important; }
details.faq-item:not([open]) > .faq-a { display: none !important; }
/* 全FAQをopenにフォールバック（JSのreveal失敗保険） */
.faq-list .faq-item summary::-webkit-details-marker,
.faq-list .faq-item summary::marker { display: none !important; content: '' !important; }
/* reveal class が in にならなくてもFAQは見えるように */
.section.faq.reveal { opacity: 1 !important; transform: none !important; }
.section.faq.reveal .faq-list,
.section.faq.reveal .faq-item { opacity: 1 !important; transform: none !important; }

/* Approach summary item hover lift */
.approach-summary-item {
  transition: transform 0.3s cubic-bezier(.2,.7,.2,1);
}
.approach-summary-item:hover { transform: translateY(-2px); }
.approach-summary-icon { transition: transform 0.3s, background 0.3s; }
.approach-summary-item:hover .approach-summary-icon {
  transform: scale(1.08) rotate(-4deg);
  background: var(--brand-600);
  color: #fff;
}

/* Footer logo subtle breathing */
.footer-brand .logo-mark svg {
  animation: logoBreath 4s ease-in-out infinite;
}
@keyframes logoBreath {
  0%, 100% { transform: scale(1); filter: brightness(1.2); }
  50% { transform: scale(1.04); filter: brightness(1.35); }
}

/* ============================================================
   モバイル崩れ最終修正 — WHY contrast 2列→1列・矢印縦化
   ============================================================ */
@media (max-width: 900px) {
  .why-contrast {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin: 0 auto 40px !important;
  }
  .why-contrast-col {
    padding: 22px 20px !important;
    border-radius: 14px !important;
  }
  .why-contrast-divider {
    transform: rotate(90deg) !important;
    margin: 0 auto !important;
    width: 40px !important;
    height: 40px !important;
  }
  .why-contrast-label {
    font-size: 14px !important;
    margin-bottom: 14px !important;
    white-space: nowrap !important;
  }
  .why-contrast-list li {
    font-size: 13.5px !important;
    line-height: 1.7 !important;
    gap: 8px !important;
    padding: 6px 0 !important;
  }
  .why-contrast-list li svg {
    flex-shrink: 0 !important;
    width: 16px !important;
    height: 16px !important;
  }
}

/* 提案書を受け取る (final-cta-actions) — 視認性強化 (白背景バグ解消) */
.final-cta-actions .btn-outline {
  background: rgba(255,255,255,0.08) !important;
  border: 1.5px solid rgba(255,255,255,0.30) !important;
  color: #fff !important;
  backdrop-filter: blur(6px);
}
.final-cta-actions .btn-outline:hover {
  background: rgba(255,255,255,0.16) !important;
  border-color: rgba(255,255,255,0.55) !important;
}
.final-cta-actions .btn-outline svg { color: #fff !important; }

/* Float CTA — シンプル: 濃い solid 青 + スクロール追従だけ（脈動/blur/装飾削除） */
.float-cta-primary {
  animation: none !important;
  background: linear-gradient(135deg, #2660DB 0%, #1E4FC7 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 20px 40px -8px rgba(11,21,36,0.45), 0 8px 16px -4px rgba(30,79,199,0.40) !important;
}
/* サブテキスト「30秒予約 / 営業なし」を削除して「無料相談する」だけに */
.float-cta-primary-sub { display: none !important; }
.float-cta-primary-text { justify-content: center !important; }
/* 青背景に純白で text-shadow なし → 違和感ゼロの自然な可読性 (2026-05-28) */
.float-cta-primary-title {
  font-size: 15.5px !important;
  color: #ffffff !important;
  text-shadow: none !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
}
/* 提案書ダウンロード(白い円)を削除 — 「無料相談する」だけ表示 */
.float-cta-secondary { display: none !important; }

/* ロゴが読み込めない時のフォールバック (頭文字) */
.logo-fallback {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: linear-gradient(135deg, #2660DB, #1E4FC7);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 800;
  border-radius: 10px;
  letter-spacing: -0.02em;
}

/* モバイル: Hero ダッシュボード + PDF提案書モックアップを非表示 (崩れ防止) */
@media (max-width: 900px) {
  .dash-wrap,
  .dash,
  .dash-floats,
  .proposal-card .pdf-stack,
  .proposal-card .pdf-mock-wrap,
  .proposal-mock,
  .proposal-mock-wrap { display: none !important; }
  .proposal-card { grid-template-columns: 1fr !important; }
}
.float-cta-primary::before { display: none !important; }
.float-cta-primary-icon {
  background: rgba(255,255,255,0.25) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.float-cta-primary-arrow {
  background: rgba(255,255,255,0.25) !important;
}
.float-cta-primary-sub::before { animation: none !important; }
/* セカンダリ円ボタンもsolidに */
.float-cta-secondary {
  background: #ffffff !important;
  box-shadow: 0 12px 24px -6px rgba(11,21,36,0.30) !important;
}

/* Final CTA section subtle gradient shift */
.final-cta::before {
  animation: ctaSectionBg 10s ease-in-out infinite;
}
@keyframes ctaSectionBg {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
/* 旧 fadeUp バインドは .hero-overline/.hero-title-mega/.hero-desc/.hero-actions/.dash-wrap の heroEntry カスケード入場に置き換え済み (上で定義) */
/* legacy セーフガード — もし上で別名要素を使う場合に効くよう残置 */
.hero-eyebrow:not(.hero-overline) { animation: fadeUp 0.8s ease both; }
.hero-title:not(.hero-title-mega) { animation: fadeUp 0.8s ease 0.1s both; }
.dash:not(.dash-wrap .dash) { animation: fadeUp 1s ease 0.25s both; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s, transform 0.8s; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ========== RESPONSIVE ========== */
@media (max-width: 1240px) {
  .hero-title { font-size: 52px; }
  .hero-title-mega { font-size: 68px; }
  .approach-grid { grid-template-columns: 320px 1fr; gap: 40px; }
  .tech-logos { grid-template-columns: repeat(5, 1fr); gap: 10px; }
}
@media (max-width: 1080px) {
  .hero-title-mega { font-size: 56px; line-height: 1.18; }
}
@media (max-width: 720px) {
  .hero-title-mega { font-size: 40px; line-height: 1.22; letter-spacing: -0.035em; }
  .hero-title-mega .hero-title-line { white-space: normal; }
  .hero-scroll-cue { bottom: 22px; gap: 10px; }
  .hero-scroll-cue-line { height: 44px; }
}
@media (max-width: 1080px) {
  .hero-grid, .approach-grid, .embed-grid, .tech-grid, .final-cta-inner, .proposal-card { grid-template-columns: 1fr; gap: 56px; }
  .problem-grid, .voice-grid { grid-template-columns: 1fr 1fr; }
  .problem-quotes .problem-quote { grid-column: span 6; }
  .final-cta-actions { grid-template-columns: 1fr; }
  .approach-steps { grid-template-columns: repeat(4, 1fr); }
  .phase-grid { grid-template-columns: 1fr 1fr; }
  .phase-grid > .phase-card:not(:last-child)::after { display: none; }
  .approach-summary { gap: 18px; }
  .approach-summary-divider { display: none; }
  .tech-logos { grid-template-columns: repeat(4, 1fr); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .why-pillars { grid-template-columns: 1fr; gap: 18px; }
  .blog-grid { grid-template-columns: 1fr; gap: 18px; }
  .blog-head { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 32px; }
  .blog-head .h2 { font-size: 32px; }
  .blog-link { padding: 11px 18px; font-size: 13px; }
  .blog-body { padding: 24px 22px 22px; }
  .blog-title { font-size: 16px; }
  .why-cta { padding: 28px 22px; }
  .why-cta-text { font-size: 14px; }
  .btn-cta-large { padding: 18px 24px; font-size: 14.5px; width: 100%; }
  .seminar-strip { flex-direction: column; align-items: flex-start; gap: 20px; padding: 28px; }
  .hero-title { font-size: 44px; }
  .why { padding: 110px 0; }
  .why-head .h2 { font-size: 32px; }
  .pillar-num { font-size: 64px; }
  .pillar { padding: 36px 28px; }
  .final-cta-actions { align-items: flex-start; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .proposal-card { padding: 36px 32px; gap: 28px; }
  .section { padding: 96px 0; }
}
@media (max-width: 720px) {
  .nav-main { display: none; }
  .hero { padding: 60px 0 72px; }
  .hero-grid { padding: 0 24px; }
  .hero-title { font-size: 32px; }
  .h2 { font-size: 26px; }
  .section { padding: 72px 0; }
  .case-grid, .approach-steps, .tech-logos, .embed-features { grid-template-columns: repeat(2, 1fr); }
  .cases-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .final-cta-title { font-size: 26px; }
  .container { padding: 0 24px; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================================
   モバイル完璧化 — 375px / 414px 完全対応最終調整
   ============================================================ */
@media (max-width: 640px) {
  /* HERO */
  .hero-title-mega { font-size: 36px !important; line-height: 1.22; letter-spacing: -0.03em; }
  .hero-title-mega .hero-title-line { white-space: normal; }
  .hero-overline { font-size: 11px !important; }
  .hero-desc { font-size: 14.5px; line-height: 1.85; }
  .hero-actions { flex-direction: column; gap: 10px; }
  .hero-actions .btn-primary,
  .hero-actions .btn-outline { width: 100%; padding: 14px 18px; font-size: 14px; justify-content: center; }
  .hero-scroll-cue { bottom: 18px; gap: 8px; }
  .hero-scroll-cue-line { height: 36px; }
  .hero-scroll-cue-label-en { font-size: 9px; }
  .hero-scroll-cue-label-jp { font-size: 10px; }

  /* セクション全体の余白圧縮 */
  .section { padding: 56px 0 !important; }
  .container { padding: 0 16px !important; }

  /* H2 / eyebrow */
  .h2 { font-size: 24px !important; line-height: 1.4; }
  .eyebrow { font-size: 10px !important; letter-spacing: 0.22em; }

  /* CASE STUDIES */
  .case-grid { grid-template-columns: 1fr !important; gap: 16px; }
  .case { height: 360px; }
  .case-inner { padding: 24px 22px; }
  .case-title { font-size: 18px; line-height: 1.45; }
  .case-metric-value { font-size: 30px; }

  /* TECH logos */
  .tech-logos { grid-template-columns: repeat(3, 1fr) !important; gap: 12px; }
  .tech-logo-img { padding: 12px 8px; }
  .tech-logo-name { font-size: 10px; }
  .tech-note { font-size: 10.5px; flex-direction: column; gap: 6px; }
  .tech-note span { display: none; }

  /* EMBED */
  .embed-v3-headline { font-size: 26px !important; line-height: 1.4; }
  .embed-v3-grid { gap: 28px; }
  .embed-v3-photo img { width: 100%; height: auto; }

  /* JOURNEY */
  .journey-h2 { font-size: 28px !important; }
  .journey-timeline { grid-template-columns: 1fr !important; gap: 16px; padding: 0 8px; }
  .jcard { padding: 28px 22px 26px; }
  .jcard-headline { font-size: 18px; }
  .journey-h-flow { display: none !important; }

  /* STORY */
  .story-chapters { padding: 0 4px; }
  .schap { grid-template-columns: 1fr !important; gap: 14px; margin-bottom: 80px; }
  .schap-num { font-size: 56px !important; }
  .schap-headline { font-size: 22px !important; line-height: 1.45; }
  .schap-desc { font-size: 14px; line-height: 1.85; }
  .probs-panel { padding: 18px !important; }
  .probs-list li { padding: 16px 0 16px 80px; font-size: 15px; }
  .prob-no { font-size: 16px; left: 38px; }
  .probs-list li::before { width: 22px; height: 22px; border-radius: 6px; }
  .probs-list li::after { left: 6px; width: 10px; height: 5px; }

  /* SERVICES (もし表示) */
  .services-grid { grid-template-columns: 1fr !important; gap: 18px; }
  .service-card { padding: 24px 22px; }

  /* BLOG */
  .blog-grid { grid-template-columns: 1fr !important; gap: 18px; }
  .blog-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .blog-head .h2 { font-size: 26px !important; }
  .blog-link { padding: 10px 18px; font-size: 13px; }
  .blog-card { border-radius: 16px; }
  .blog-thumb { aspect-ratio: 16/10; }
  .blog-body { padding: 22px 20px; }
  .blog-title { font-size: 16px; line-height: 1.55; }

  /* FAQ */
  .faq-q { font-size: 15px; padding: 18px 16px; line-height: 1.55; }
  .faq-q-mark { width: 24px; height: 24px; font-size: 11px; }
  .faq-a { font-size: 13.5px; padding: 0 16px 18px; line-height: 1.9; }

  /* WHY pillars */
  .pillars { grid-template-columns: 1fr !important; gap: 16px; }
  .pillar { padding: 28px 22px; }
  .pillar-num { font-size: 48px; }
  .pillar-title { font-size: 18px; }

  /* CTA */
  .btn-conversion { max-width: 100% !important; }
  .btn-conversion-inner { padding: 18px 20px; }
  .btn-conversion-title { font-size: 17px; }
  .btn-conversion-arrow { width: 36px; height: 36px; }

  /* Float CTA */
  .float-cta { bottom: 12px !important; right: 12px !important; left: 12px !important; gap: 8px !important; }
  .float-cta-primary { flex: 1; padding: 11px 16px 11px 14px !important; gap: 9px !important; }
  .float-cta-primary-title { font-size: 13px !important; }
  .float-cta-primary-sub { font-size: 9px !important; }
  .float-cta-primary-icon { width: 30px !important; height: 30px !important; }
  .float-cta-primary-arrow { width: 22px !important; height: 22px !important; }
  .float-cta-secondary { width: 44px !important; height: 44px !important; }

  /* TECH→BLOG 余白さらに圧縮 */
  .tech { padding-bottom: 40px !important; }
  .section.blog { padding-top: 40px !important; }

  /* オーバーフロー防止 (横スクロール完全禁止) */
  body { overflow-x: hidden; }
  .container > *, section > * { max-width: 100%; }
  img, svg { max-width: 100%; height: auto; }
}

@media (max-width: 414px) {
  /* iPhone Plus / Pro Max 系の細かい調整 */
  .hero-title-mega { font-size: 32px !important; }
  .h2 { font-size: 22px !important; }
  .schap-num { font-size: 48px !important; }
  .container { padding: 0 14px !important; }
}

@media (max-width: 380px) {
  /* iPhone SE / 小型機種 */
  .hero-title-mega { font-size: 28px !important; line-height: 1.28; }
  .h2 { font-size: 21px !important; }
  .schap-num { font-size: 44px !important; }
  .schap-headline { font-size: 20px !important; }
  .probs-list li { padding: 14px 0 14px 70px; font-size: 14.5px; }
  .prob-no { font-size: 14px; left: 32px; }
  .blog-card { border-radius: 14px; }
  .blog-title { font-size: 15px; }
  .container { padding: 0 12px !important; }
  .case-inner { padding: 22px 18px; }
  .case-title { font-size: 17px; }
}

/* ============================================================
   MOBILE NUCLEAR FIX (2026-05-28 緊急修正)
   モバイル鬼崩れ対策・iPhone全機種で完璧表示する強制リセット
   ============================================================ */
@media (max-width: 900px) {
  /* 横スクロール完全禁止 */
  html, body { overflow-x: hidden !important; max-width: 100vw !important; }
  body * { max-width: 100% !important; }
  img, svg, video { max-width: 100% !important; height: auto !important; }

  /* container 共通幅制御 */
  .container { width: 100% !important; padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; }
  section { width: 100% !important; box-sizing: border-box !important; overflow: hidden !important; }

  /* 強制的に全 grid を 1 列化 */
  .hero-grid, .approach-grid, .embed-grid, .tech-grid, .proposal-card,
  .embed-v3-grid, .why-grid, .pillars, .listen-stakeholders,
  .stake-grid, .blog-grid { grid-template-columns: 1fr !important; gap: 24px !important; }

  /* 2列で残すグリッド */
  .case-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .tech-logos { grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; }

  /* hero */
  .hero { padding: 60px 0 56px !important; }
  .hero-grid { padding: 0 20px !important; gap: 40px !important; }
  .hero-title-mega { font-size: 36px !important; line-height: 1.22 !important; letter-spacing: -0.03em !important; }
  .hero-title-mega .hero-title-line { white-space: normal !important; word-break: keep-all !important; }
  .hero-overline { font-size: 11px !important; }
  .hero-desc { font-size: 14.5px !important; line-height: 1.85 !important; }
  .hero-actions { flex-direction: column !important; width: 100% !important; gap: 10px !important; }
  .hero-actions a { width: 100% !important; justify-content: center !important; }

  /* dashboard mockup hide for mobile clarity */
  .dash-wrap, .dash, .dash-floats { transform: scale(0.5) !important; transform-origin: top left !important; max-width: 200% !important; }

  /* H2 typography */
  .h2, .why-head .h2, .journey-h2, .blog-head .h2 { font-size: 24px !important; line-height: 1.4 !important; letter-spacing: -0.02em !important; }
  .eyebrow { font-size: 10px !important; letter-spacing: 0.20em !important; }

  /* section padding */
  .section, section.section { padding: 56px 0 !important; }

  /* tech logos compact */
  .tech-logo-img { padding: 12px 8px !important; min-height: 56px !important; }
  .tech-logo-img img { max-height: 36px !important; width: auto !important; }
  .tech-logo-name { font-size: 10px !important; padding: 6px 0 !important; }

  /* case studies */
  .case { height: auto !important; min-height: 320px !important; aspect-ratio: 4/3 !important; }
  .case-inner { padding: 22px 20px !important; }
  .case-industry { font-size: 10.5px !important; }
  .case-title { font-size: 17px !important; line-height: 1.45 !important; }
  .case-metric-value { font-size: 28px !important; }

  /* embed */
  .embed-v3-headline { font-size: 24px !important; line-height: 1.4 !important; }
  .embed-v3-photo { width: 100% !important; }
  .embed-v3-photo img { width: 100% !important; height: auto !important; border-radius: 16px !important; }

  /* journey */
  .journey-h-flow { display: none !important; }
  .jcard { padding: 26px 22px !important; }
  .jcard-headline { font-size: 18px !important; }

  /* story */
  .story-chapters { padding: 0 4px !important; }
  .schap { grid-template-columns: 1fr !important; gap: 14px !important; margin-bottom: 64px !important; }
  .schap-left { display: flex !important; align-items: center !important; gap: 14px !important; }
  .schap-num-block { display: flex !important; align-items: baseline !important; gap: 10px !important; }
  .schap-num { font-size: 48px !important; }
  .schap-tag { font-size: 11px !important; }
  .schap-headline { font-size: 20px !important; line-height: 1.45 !important; }
  .schap-desc { font-size: 14px !important; line-height: 1.85 !important; }
  .probs-panel { padding: 18px !important; border-radius: 14px !important; }
  .probs-panel-title { font-size: 16px !important; }
  .probs-list li { padding: 14px 0 14px 64px !important; font-size: 14.5px !important; line-height: 1.6 !important; }
  .prob-no { font-size: 15px !important; left: 38px !important; top: 16px !important; }
  .probs-list li::before { width: 24px !important; height: 24px !important; left: 6px !important; top: 14px !important; transform: none !important; }
  .probs-list li::after { left: 11px !important; top: 21px !important; transform: rotate(-45deg) scale(0) !important; }
  .probs-list li.is-checked::after { transform: rotate(-45deg) scale(1) !important; }
  /* outcome */
  .outcome-hero { padding-top: 18px !important; margin-bottom: 20px !important; }
  .outcome-hero-label { font-size: 12px !important; }
  .outcome-hero-headline { font-size: 19px !important; line-height: 1.5 !important; }
  .outcome-hero-desc { font-size: 13.5px !important; }
  .outcome-side { grid-template-columns: 1fr !important; }
  .o-side-item { padding: 18px 0 !important; border-right: none !important; border-bottom: 1px solid rgba(11,21,36,0.08) !important; }
  .o-side-item:last-child { border-bottom: none !important; }
  .o-side-item:not(:first-child) { padding-left: 0 !important; padding-top: 18px !important; }

  /* why */
  .why { padding: 64px 0 !important; }
  .pillar { padding: 28px 22px !important; }
  .pillar-num { font-size: 48px !important; }
  .pillar-title { font-size: 18px !important; }

  /* faq */
  .faq-q { font-size: 14.5px !important; padding: 16px !important; gap: 10px !important; }
  .faq-q-text { line-height: 1.55 !important; }
  .faq-q-mark { width: 22px !important; height: 22px !important; font-size: 10px !important; flex-shrink: 0 !important; }
  .faq-a { font-size: 13.5px !important; padding: 0 16px 18px !important; line-height: 1.85 !important; }

  /* blog */
  .blog-head { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
  .blog-thumb { aspect-ratio: 16/10 !important; }
  .blog-body { padding: 20px 18px !important; }
  .blog-title { font-size: 15.5px !important; line-height: 1.55 !important; }
  .blog-tag { font-size: 10px !important; }
  .blog-date { font-size: 11px !important; }

  /* CTAs */
  .btn-conversion, .btn-cta-large, .btn-cta-hero { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
  .btn-conversion-inner { padding: 16px 20px !important; }
  .btn-conversion-title { font-size: 16px !important; }
  .btn-cta-large { padding: 16px 22px !important; font-size: 14px !important; }

  /* float CTA mobile */
  .float-cta { bottom: 10px !important; right: 10px !important; left: 10px !important; gap: 8px !important; }
  .float-cta-primary { flex: 1 !important; padding: 11px 14px !important; gap: 8px !important; }
  .float-cta-primary-title { font-size: 13px !important; }
  .float-cta-primary-sub { font-size: 9px !important; }
  .float-cta-primary-icon { width: 28px !important; height: 28px !important; }
  .float-cta-primary-icon svg { width: 14px !important; height: 14px !important; }
  .float-cta-primary-arrow { width: 22px !important; height: 22px !important; }
  .float-cta-primary-arrow svg { width: 10px !important; height: 10px !important; }
  .float-cta-secondary { width: 44px !important; height: 44px !important; flex-shrink: 0 !important; }

  /* final cta */
  .final-cta { padding: 64px 0 !important; }
  .final-cta-title { font-size: 26px !important; line-height: 1.4 !important; }
  .final-cta-actions { flex-direction: column !important; gap: 12px !important; }
  .final-cta-actions a { width: 100% !important; }
}

/* iPhone SE (375px) 以下: もう一段階タイトな調整 */
@media (max-width: 380px) {
  .container { padding-left: 14px !important; padding-right: 14px !important; }
  .hero-title-mega { font-size: 28px !important; }
  .h2, .why-head .h2, .blog-head .h2 { font-size: 21px !important; }
  .schap-num { font-size: 42px !important; }
  .outcome-hero-headline { font-size: 17px !important; }
  .case-title { font-size: 16px !important; }
  .btn-conversion-title { font-size: 15px !important; }
}

/* === Hero dashboard: AI smell removal (2026-05-25) === */
.kpi-note{font-size:11px;letter-spacing:.04em;color:var(--ink-500);font-weight:600}
.dash-section-tag--neutral{background:rgba(11,21,36,.04)!important;color:var(--ink-600)!important;border:1px solid rgba(11,21,36,.08)}
.dash-section-tag--neutral::before{display:none!important}
.list-cat{display:inline-block;padding:2px 7px;margin-right:8px;border-radius:4px;background:rgba(30,79,199,.08);color:var(--brand-600);font-size:10px;font-weight:700;letter-spacing:.06em;vertical-align:middle}
.list-week{font-size:11px;color:var(--ink-500);font-weight:600;letter-spacing:.03em;white-space:nowrap}
.list-tool-badge{font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--ink-500);background:rgba(11,21,36,.05);padding:3px 8px;border-radius:4px}
.list-tool-badge::before{display:none!important}
/* kill any remaining pulse animation on dots */
.list-status-dot::before{animation:none!important}

/* ============================================================
   boostx-theme 既存スタイルとの衝突回避（必須）
   ============================================================ */
/* 新HPは独自のヒーロー・セクション設計のため、テーマ既存 .container / .section の
   横padding等を上書きしない（このページ専用 .container はスコープ済み） */
body.home, body.page-front-page { background: #fff; }
/* テーマ既存ヘッダーが固定でない場合の保険：本ページのhero上端を確実に圧迫しない */
.boostx-theme-header + .hero { padding-top: 80px; }

/* ============================================================
   FAQ V2 — 完全新規 (2026-05-28)
   <details>非依存・div+button accordion・テーマCSS干渉ゼロ
   ============================================================ */
/* FAQ section: min-height + flex spacer で section 総高さを固定
   → 助成金FAQを開閉しても暗青CTAの位置が動かない設計 (2026-05-28 復活) */
.faq-v2 {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 1020px;  /* PC: 1問開時~1020pxにフィット (社長指示: 余白ぎりぎりまで詰める) */
  padding: 72px 0 0;
  position: relative;
  margin-bottom: 0 !important;
  box-sizing: border-box;
}
.faq-v2 > .container {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
}
/* flex spacer: 開閉に応じて伸縮して section 底辺を固定 */
.faq-v2 > .container::after {
  content: '';
  display: block;
  flex: 1 1 0;
  min-height: 64px;
}
/* 最後のFAQ item は margin-bottom 0 */
.faq-v2 .faq-v2-list .faq-v2-item:last-child { margin-bottom: 0 !important; }
.faq-v2 * { box-sizing: border-box; }
.faq-v2 .faq-v2-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 48px;
}
.faq-v2 .faq-v2-eyebrow {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.22em;
  color: #1E4FC7;
  margin-bottom: 14px;
}
.faq-v2 .faq-v2-title {
  font-size: 36px; font-weight: 800;
  line-height: 1.4; letter-spacing: -0.02em;
  color: #0B1524;
  margin: 0 0 16px;
}
.faq-v2 .faq-v2-title::after {
  content: '';
  display: block;
  width: 48px; height: 4px;
  margin: 18px auto 0;
  background: linear-gradient(90deg, #0B1524 0%, #0B1524 33%, #1E4FC7 33%, #1E4FC7 66%, #5C82E8 66%, #5C82E8 100%);
  border-radius: 2px;
}
.faq-v2 .faq-v2-lead {
  font-size: 15px; line-height: 1.85;
  color: #4a5566;
  margin: 0;
}

.faq-v2 .faq-v2-list {
  max-width: 880px;
  margin: 0 auto;
  display: block;
}
.faq-v2 .faq-v2-item {
  display: block;
  background: #ffffff;
  border: 1px solid #e5e9f0;
  border-radius: 14px;
  margin-bottom: 14px;
  overflow: hidden;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.faq-v2 .faq-v2-item:hover {
  border-color: #5C82E8;
  box-shadow: 0 12px 28px -16px rgba(11,21,36,0.12);
}
.faq-v2 .faq-v2-item.is-open {
  border-color: #5C82E8;
  box-shadow: 0 18px 36px -20px rgba(30,79,199,0.16);
}

/* QUESTION BUTTON — テーマbuttonリセット完全 */
.faq-v2 .faq-v2-q {
  all: unset;
  display: flex !important;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 22px 28px;
  cursor: pointer;
  background: transparent;
  border: none;
  font-family: inherit;
  text-align: left;
  color: inherit;
  box-sizing: border-box;
}
.faq-v2 .faq-v2-q:focus-visible {
  outline: 2px solid #5C82E8;
  outline-offset: -2px;
}
.faq-v2 .faq-v2-q-mark {
  display: inline-flex !important;
  align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: #eef2ff;
  color: #1E4FC7;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 14px; font-weight: 800;
  flex-shrink: 0;
}
.faq-v2 .faq-v2-q-text {
  display: block !important;
  flex: 1;
  font-size: 15.5px; font-weight: 700;
  color: #0B1524;
  letter-spacing: -0.005em;
  line-height: 1.55;
}
.faq-v2 .faq-v2-q-toggle {
  display: inline-flex !important;
  align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #f4f6fb;
  color: #6b7280;
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1), background 0.3s, color 0.3s;
}
.faq-v2 .faq-v2-q-toggle svg { width: 14px; height: 14px; }
.faq-v2 .faq-v2-item.is-open .faq-v2-q-toggle {
  transform: rotate(45deg);
  background: #1E4FC7;
  color: #ffffff;
}

/* ANSWER — max-height transition (smooth open) */
.faq-v2 .faq-v2-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(.2,.7,.2,1);
}
.faq-v2 .faq-v2-item.is-open .faq-v2-a {
  max-height: 800px;
}
.faq-v2 .faq-v2-a-inner {
  padding: 0 28px 26px 78px;
  font-size: 14px;
  line-height: 1.95;
  color: #4a5566;
  font-weight: 500;
}
.faq-v2 .faq-v2-a-inner strong { color: #0B1524; font-weight: 700; }

/* Tablet (1080-768) — 自然なpadding */
@media (max-width: 1080px) and (min-width: 768px) {
  .faq-v2 { padding: 64px 0 0 !important; min-height: 970px !important; }
  .faq-v2 > .container::after { min-height: 56px; }
  .faq-v2 .faq-v2-title { font-size: 30px !important; }
  .faq-v2 .faq-v2-head { margin-bottom: 40px !important; }
  .faq-v2 .faq-v2-list { max-width: 720px !important; padding: 0 16px; }
  .faq-v2 .faq-v2-q { padding: 20px 22px !important; gap: 16px !important; }
  .faq-v2 .faq-v2-q-text { font-size: 15px !important; }
  .faq-v2 .faq-v2-a-inner { padding: 0 22px 22px 70px !important; font-size: 13.5px !important; }
}

/* mobile */
@media (max-width: 900px) {
  .faq-v2 { padding: 48px 0 0 !important; margin-bottom: 0 !important; min-height: 920px !important; display: flex !important; }
  .faq-v2 > .container::after { display: block !important; min-height: 48px; }
  .faq-v2 > .container::after { display: none !important; }
  .faq-v2 .faq-v2-title { font-size: 26px !important; line-height: 1.5 !important; }
  .faq-v2 .faq-v2-head { margin-bottom: 36px !important; }
  .faq-v2 .faq-v2-list { padding: 0 16px; }
  .faq-v2 .faq-v2-q { padding: 18px 16px !important; gap: 12px !important; }
  .faq-v2 .faq-v2-q-mark { width: 26px !important; height: 26px !important; font-size: 12px !important; }
  .faq-v2 .faq-v2-q-text { font-size: 14.5px !important; line-height: 1.55 !important; }
  .faq-v2 .faq-v2-q-toggle { width: 24px !important; height: 24px !important; }
  .faq-v2 .faq-v2-q-toggle svg { width: 12px !important; height: 12px !important; }
  .faq-v2 .faq-v2-a-inner { padding: 0 16px 18px 54px !important; font-size: 13.5px !important; line-height: 1.9 !important; }
}

/* 小モバイル ≤414px */
@media (max-width: 414px) {
  .faq-v2 { padding: 40px 0 0 !important; min-height: 880px !important; display: flex !important; }
  .faq-v2 > .container::after { min-height: 40px; }
  .faq-v2 > .container::after { display: none !important; }
  .faq-v2 .faq-v2-title { font-size: 22px !important; }
  .faq-v2 .faq-v2-q { padding: 16px 14px !important; gap: 10px !important; }
  .faq-v2 .faq-v2-q-text { font-size: 13.5px !important; }
  .faq-v2 .faq-v2-a-inner { padding: 0 14px 16px 48px !important; font-size: 13px !important; }
}

/* ============================================================
   全幅レスポンシブ・サニタイズ層 (2026-05-28)
   タブレット・モバイル全域で横ハミ出し防止 + 余白整理
   ============================================================ */
@media (max-width: 1080px) {
  /* container 共通 */
  .container { max-width: 100% !important; padding-left: 24px !important; padding-right: 24px !important; box-sizing: border-box; }
  /* セクション全体ハミ出し防止 */
  section { overflow-x: clip; max-width: 100vw; box-sizing: border-box; }
  img, svg, video { max-width: 100%; height: auto; }
}
@media (max-width: 768px) {
  .container { padding-left: 20px !important; padding-right: 20px !important; }
  /* dashboard KPI - タブレット〜モバイルでも美しく */
  .dash-kpi { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .kpi { padding: 14px !important; }
  .kpi-value { font-size: 24px !important; }
  .kpi-label { font-size: 11px !important; }
}
@media (max-width: 414px) {
  .container { padding-left: 16px !important; padding-right: 16px !important; }
  .dash-kpi { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .kpi { padding: 12px !important; }
  .kpi-value { font-size: 21px !important; }
  .kpi-label { font-size: 10px !important; }
}

/* ============================================================
   外部スニペット bx-fp-faq-new 撲滅 (2026-05-28 真因特定)
   #faq > div > div:not(:first-child):not(.bx-faq-new){display:none !important}
   が .faq-v2-list を物理BLOCKしていた → 超高specificity で強制表示
   ※注意: .faq-v2-a (回答ボックス) には height: auto を当てないこと
           → max-height transition が壊れて全FAQが常時展開してしまう
   ============================================================ */
#faq .faq-v2-list,
#faq > .container > .faq-v2-list,
#faq.faq-v2 > .container > .faq-v2-list,
#faq > div > div.faq-v2-list,
#faq > div > div.bx-faq-new,
section#faq .faq-v2-list,
section#faq .faq-v2-item {
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
}
section#faq .faq-v2-list { display: block !important; }
section#faq .faq-v2-item { display: block !important; }
section#faq .faq-v2-q { display: flex !important; visibility: visible !important; opacity: 1 !important; }
section#faq .faq-v2-q-mark,
section#faq .faq-v2-q-toggle { display: inline-flex !important; }
section#faq .faq-v2-q-text { display: block !important; }
/* .faq-v2-a (回答ボックス) は max-height でのみ制御 (display/heightは触らない) */
section#faq .faq-v2-a { overflow: hidden !important; visibility: visible !important; opacity: 1 !important; }
section#faq .faq-v2-item:not(.is-open) .faq-v2-a { max-height: 0 !important; }
section#faq .faq-v2-item.is-open .faq-v2-a { max-height: 800px !important; }

/* ============================================================
   FINAL CTA V2 — 完全刷新 (2026-05-28)
   旧 .final-cta .btn-cta-outline 白カゴバグの根本解決
   .fcv2-* 完全に新規namespace・テーマCSSの干渉を完全遮断
   ============================================================ */
/* ============================================================
   FINAL CTA — Navy Veil over Pastel (2026-05-28 v3)
   背景パステル画像 (boostx-bg-misc-2026.jpg) はそのまま維持し、
   その上にnavyの半透明レイヤーを重ねて「奥でパステルが透ける紺背景」に。
   ============================================================ */
.final-cta-v2 {
  position: relative;
  padding: 88px 0 88px;
  overflow: hidden;
  isolation: isolate;
  background:
    /* フロント: 紺色の半透明レイヤー (斜めグラデで奥行き感) */
    linear-gradient(135deg,
      rgba(11,21,36,0.82) 0%,
      rgba(20,32,54,0.74) 45%,
      rgba(30,50,90,0.68) 75%,
      rgba(11,21,36,0.80) 100%),
    /* 奥: パステル画像 (うっすら透けて柔らかさを残す) */
    url("../images/boostx-bg-misc-2026.jpg") center center / cover no-repeat;
  color: #ffffff;
  margin-top: 0 !important;
}
.final-cta-v2 .fcv2-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

/* navy veil 上の柔らかい発光 (中央スポットライト) */
.final-cta-v2 .fcv2-bg-grad {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 40%, rgba(124,160,240,0.18) 0%, transparent 65%),
    radial-gradient(ellipse 60% 45% at 25% 80%, rgba(46,100,235,0.15) 0%, transparent 60%);
  animation: fcv2VeilDrift 22s ease-in-out infinite alternate;
}
@keyframes fcv2VeilDrift {
  0%   { transform: scale(1) translate(0,0); opacity: 0.85; }
  100% { transform: scale(1.04) translate(-15px,10px); opacity: 1; }
}
/* グリッドはnavy veilでうるさくなるので非表示 */
.final-cta-v2 .fcv2-bg-grid { display: none !important; }

/* オーブ: 青い光球 (navy veilに溶け込む) */
.final-cta-v2 .fcv2-bg-orb {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: 0.50;
  pointer-events: none;
}
.final-cta-v2 .fcv2-bg-orb-1 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(92,130,232,0.55) 0%, transparent 70%);
  top: -110px; left: -100px;
  animation: fcv2OrbFloat1 14s ease-in-out infinite;
}
.final-cta-v2 .fcv2-bg-orb-2 {
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(46,100,235,0.50) 0%, transparent 70%);
  bottom: -160px; right: -130px;
  animation: fcv2OrbFloat2 18s ease-in-out infinite;
}
@keyframes fcv2OrbFloat1 {
  0%,100% { transform: translate(0,0); }
  50% { transform: translate(50px, 30px); }
}
@keyframes fcv2OrbFloat2 {
  0%,100% { transform: translate(0,0); }
  50% { transform: translate(-40px, -25px); }
}

.final-cta-v2 .fcv2-inner {
  position: relative; z-index: 2;
  max-width: 920px; margin: 0 auto;
  text-align: center;
}

/* 限定バッジ (navy veil 上で白系に) */
.final-cta-v2 .fcv2-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 18px;
  background: rgba(92,130,232,0.18);
  border: 1px solid rgba(124,160,240,0.40);
  border-radius: 100px;
  font-size: 12.5px; font-weight: 700;
  color: #c2d2ff;
  letter-spacing: 0.04em;
  margin-bottom: 28px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.final-cta-v2 .fcv2-badge-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #5C82E8;
  box-shadow: 0 0 12px #5C82E8;
  animation: fcv2DotPulse 2s ease-in-out infinite;
}
@keyframes fcv2DotPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

/* タイトル: 白 + 微シャドウ */
.final-cta-v2 .fcv2-title {
  font-size: 48px; font-weight: 800;
  line-height: 1.4; letter-spacing: -0.025em;
  color: #ffffff;
  margin: 0 0 22px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.final-cta-v2 .fcv2-title-em {
  background: linear-gradient(135deg, #6f93ff 0%, #a5c0ff 50%, #6f93ff 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: fcv2GradFlow 6s ease-in-out infinite;
}
@keyframes fcv2GradFlow {
  0%,100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.final-cta-v2 .fcv2-desc {
  font-size: 16px; line-height: 2;
  color: rgba(255,255,255,0.85);
  max-width: 720px;
  margin: 0 auto 44px;
  font-weight: 500;
  text-shadow: 0 1px 4px rgba(0,0,0,0.20);
}

/* CTA 2本 — 横並び */
.final-cta-v2 .fcv2-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  max-width: 780px;
  margin: 0 auto;
}

/* 共通ボタン */
.final-cta-v2 .fcv2-btn {
  position: relative;
  display: flex; align-items: center;
  gap: 16px;
  padding: 22px 26px;
  border-radius: 14px;
  text-decoration: none !important;
  font-family: inherit;
  transition: transform 0.3s cubic-bezier(.2,.7,.2,1), box-shadow 0.3s, background 0.3s, border-color 0.3s;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
}
.final-cta-v2 .fcv2-btn:hover { transform: translateY(-4px); }
.final-cta-v2 .fcv2-btn-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.final-cta-v2 .fcv2-btn-icon svg { width: 22px; height: 22px; }
.final-cta-v2 .fcv2-btn-text {
  flex: 1;
  display: flex; flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.final-cta-v2 .fcv2-btn-title {
  font-size: 19px;             /* 16.5→19 大型化 */
  font-weight: 900;             /* 800→900 極太化 */
  letter-spacing: -0.015em;
  line-height: 1.35;
  text-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.final-cta-v2 .fcv2-btn-sub {
  font-size: 12.5px;            /* 11.5→12.5 */
  font-weight: 700;             /* 600→700 太字化 */
  letter-spacing: 0.08em;       /* 0.04→0.08 widen */
  opacity: 0.85;
  line-height: 1.5;
  margin-top: 4px;
}
.final-cta-v2 .fcv2-btn-arrow {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s, background 0.3s;
}
.final-cta-v2 .fcv2-btn-arrow svg { width: 16px; height: 16px; }
.final-cta-v2 .fcv2-btn:hover .fcv2-btn-arrow { transform: translateX(4px); }

/* PRIMARY — 青グラデ復活 (元の青白デザイン) */
.final-cta-v2 .fcv2-btn-primary {
  background: linear-gradient(135deg, #2E64EB 0%, #1E4FC7 60%, #1640A8 100%);
  color: #ffffff !important;
  box-shadow:
    0 22px 50px -14px rgba(38,96,219,0.65),
    0 8px 18px -8px rgba(11,21,36,0.35),
    inset 0 1px 0 rgba(255,255,255,0.22);
}
.final-cta-v2 .fcv2-btn-primary:hover {
  box-shadow:
    0 32px 64px -14px rgba(38,96,219,0.85),
    0 14px 26px -8px rgba(11,21,36,0.45),
    inset 0 1px 0 rgba(255,255,255,0.3);
}
.final-cta-v2 .fcv2-btn-primary::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0) 50%);
  pointer-events: none;
}
.final-cta-v2 .fcv2-btn-primary .fcv2-btn-icon {
  background: rgba(255,255,255,0.20);
  color: #ffffff;
}
.final-cta-v2 .fcv2-btn-primary .fcv2-btn-arrow {
  background: rgba(255,255,255,0.20);
  color: #ffffff;
}
.final-cta-v2 .fcv2-btn-primary .fcv2-btn-title,
.final-cta-v2 .fcv2-btn-primary .fcv2-btn-sub { color: #ffffff !important; }

/* ============================================================
   SECONDARY — 白bg + 黒文字 + 黒アイコン (完璧モノクローム)
   オレンジ/黄色ハイライトを全レイヤで撲滅
   ============================================================ */
.final-cta-v2 .fcv2-btn-secondary {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1.5px solid #ffffff !important;
  color: #0B1524 !important;
  box-shadow:
    0 22px 50px -14px rgba(0,0,0,0.45),
    0 8px 18px -8px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.7);
}
.final-cta-v2 .fcv2-btn-secondary:hover {
  background: #f4f6fb !important;
  background-color: #f4f6fb !important;
  border-color: #f4f6fb !important;
  box-shadow:
    0 32px 64px -14px rgba(0,0,0,0.55),
    0 14px 26px -8px rgba(0,0,0,0.35);
}
.final-cta-v2 .fcv2-btn-secondary .fcv2-btn-icon {
  background: #0B1524 !important;
  background-color: #0B1524 !important;
  color: #ffffff !important;
}
.final-cta-v2 .fcv2-btn-secondary .fcv2-btn-arrow {
  background: #0B1524 !important;
  background-color: #0B1524 !important;
  color: #ffffff !important;
}
.final-cta-v2 .fcv2-btn-secondary .fcv2-btn-icon svg,
.final-cta-v2 .fcv2-btn-secondary .fcv2-btn-arrow svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}
.final-cta-v2 .fcv2-btn-secondary .fcv2-btn-title { color: #0B1524 !important; }
.final-cta-v2 .fcv2-btn-secondary .fcv2-btn-sub { color: #6b7280 !important; }

/* ============================================================
   オレンジ/黄色ハイライト完全撲滅 — テーマCSS/プラグイン/mark/highlight要素を全部殺す
   ============================================================ */
/* ボタン内のあらゆる子要素の背景を透明強制（ボタン本体・icon・arrowは下で再設定） */
.final-cta-v2 .fcv2-btn-title,
.final-cta-v2 .fcv2-btn-title *,
.final-cta-v2 .fcv2-btn-sub,
.final-cta-v2 .fcv2-btn-sub *,
.final-cta-v2 .fcv2-btn-text,
.final-cta-v2 .fcv2-btn-text *,
.final-cta-v2 .fcv2-btn-text span,
.final-cta-v2 .fcv2-btn-text span span,
.final-cta-v2 .fcv2-btn mark,
.final-cta-v2 .fcv2-btn .highlight,
.final-cta-v2 .fcv2-btn [class*="highlight"],
.final-cta-v2 .fcv2-btn [style*="background"] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  -webkit-text-fill-color: inherit !important;
  text-decoration: none !important;
  text-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: inherit !important;
}
/* mark要素を完全無効化 */
.final-cta-v2 mark,
.final-cta-v2 .fcv2-btn-secondary mark,
.final-cta-v2 .fcv2-btn-primary mark { all: unset !important; color: inherit !important; }

/* selection 青系統一 */
.final-cta-v2 ::selection { background: rgba(92,130,232,0.4); color: #fff; }
.final-cta-v2 ::-moz-selection { background: rgba(92,130,232,0.4); color: #fff; }

/* Trust indicators */
.final-cta-v2 .fcv2-trust {
  list-style: none; padding: 0; margin: 44px auto 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px 28px;
  max-width: 820px;
}
.final-cta-v2 .fcv2-trust-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.01em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.20);
}
.final-cta-v2 .fcv2-trust-item svg {
  width: 16px; height: 16px;
  color: #5C82E8;
  flex-shrink: 0;
}

/* Tablet (1080-768) — 2ボタン横並びキープ・余白調整 */
@media (max-width: 1080px) and (min-width: 768px) {
  .final-cta-v2 { padding: 72px 0 72px !important; }
  .final-cta-v2 .fcv2-title { font-size: 38px !important; }
  .final-cta-v2 .fcv2-desc { font-size: 15px !important; margin-bottom: 36px !important; }
  .final-cta-v2 .fcv2-actions { gap: 14px !important; max-width: 720px !important; padding: 0 16px; }
  .final-cta-v2 .fcv2-btn { padding: 20px 22px !important; gap: 14px !important; }
  .final-cta-v2 .fcv2-btn-icon { width: 42px !important; height: 42px !important; }
  .final-cta-v2 .fcv2-btn-title { font-size: 15.5px !important; }
  .final-cta-v2 .fcv2-btn-sub { font-size: 11px !important; }
  .final-cta-v2 .fcv2-trust { margin-top: 36px !important; gap: 10px 24px !important; }
}

/* Mobile responsive */
@media (max-width: 900px) {
  .final-cta-v2 { padding: 64px 0 64px !important; margin-top: 0 !important; }
  .final-cta-v2 .fcv2-title { font-size: 30px !important; line-height: 1.5 !important; }
  .final-cta-v2 .fcv2-desc { font-size: 14.5px !important; line-height: 1.95 !important; margin-bottom: 32px !important; }
  .final-cta-v2 .fcv2-actions {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    max-width: 100% !important;
    padding: 0 4px !important;
  }
  .final-cta-v2 .fcv2-btn { padding: 18px 18px !important; gap: 12px !important; }
  .final-cta-v2 .fcv2-btn-icon { width: 40px !important; height: 40px !important; }
  .final-cta-v2 .fcv2-btn-icon svg { width: 18px !important; height: 18px !important; }
  .final-cta-v2 .fcv2-btn-title { font-size: 15px !important; }
  .final-cta-v2 .fcv2-btn-sub { font-size: 10.5px !important; }
  .final-cta-v2 .fcv2-btn-arrow { width: 30px !important; height: 30px !important; }
  .final-cta-v2 .fcv2-btn-arrow svg { width: 14px !important; height: 14px !important; }
  .final-cta-v2 .fcv2-trust { gap: 8px 16px !important; margin-top: 32px !important; }
  .final-cta-v2 .fcv2-trust-item { font-size: 12px !important; }
  .final-cta-v2 .fcv2-badge { font-size: 11px !important; padding: 7px 14px !important; margin-bottom: 22px !important; }
  .final-cta-v2 .fcv2-br-pc { display: none; }
  .final-cta-v2 .fcv2-bg-orb-1 { width: 240px; height: 240px; }
  .final-cta-v2 .fcv2-bg-orb-2 { width: 280px; height: 280px; }
}
@media (max-width: 414px) {
  .final-cta-v2 .fcv2-title { font-size: 26px !important; }
  .final-cta-v2 .fcv2-btn { padding: 16px 14px !important; gap: 10px !important; }
  .final-cta-v2 .fcv2-btn-title { font-size: 14.5px !important; }
  .final-cta-v2 .fcv2-btn-sub { font-size: 10px !important; }
}

/* ============================================================
   FINAL CTA OUTLINE BUTTON (2026-05-28) — 白カゴ完全解消・desktop&mobile
   .btn-cta-outline が白box化するバグの最終 fix（!important全部のせ）
   ============================================================ */
.final-cta-actions .btn-cta-outline,
.btn-cta-outline {
  background: rgba(255,255,255,0.08) !important;
  background-color: rgba(255,255,255,0.08) !important;
  border: 1.5px solid rgba(255,255,255,0.45) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.final-cta-actions .btn-cta-outline:hover,
.btn-cta-outline:hover {
  background: rgba(255,255,255,0.18) !important;
  border-color: rgba(255,255,255,0.7) !important;
  color: #ffffff !important;
}
.final-cta-actions .btn-cta-outline svg,
.btn-cta-outline svg { color: #ffffff !important; stroke: #ffffff !important; }
.final-cta-actions .btn-cta-outline,
.final-cta-actions .btn-cta-outline * { color: #ffffff !important; }

/* ============================================================
   MOBILE — 並列大型修正 (2026-05-28)
   ① テーマhead: ロゴ縮小+メニュー大型化
   ② tech-logos: HubSpotなど横長logoの完全fit化
   ③ proposal section: 提案書受け取るCTAだけ残し下のダーク余白を完全除去
   ④ final-cta-outline: 白ボックスバグの完全fix
   ============================================================ */
@media (max-width: 900px) {
  /* ヘッダー (ロゴ・ハンバーガー) は front-page.php では制御しない
     → テーマ header.php / theme CSS の責務 (全ページ統一)
     2026-05-28 社長指示: 他ページと完全に同じサイズにする */

  /* ③ フローティングCTA: モバイルでは完全非表示 (邪魔・デザイン悪化のため)
     画面下の固定 CTA が読書中常に被るのを防ぐ。最終 CTA セクションが代わりに役割を果たす */
  .float-cta,
  #floatCta,
  .float-cta.show,
  .float-cta-primary,
  .float-cta-secondary { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }

  /* ============================================================
     【モバイル5大修正 v3 (2026-05-28)】PC無干渉・モバイル完璧
     ============================================================ */
  /* ★0: ヘッダーロゴ・ハンバーガー (モバイル専用・PCには触らない) */
  body.home header img,
  body.home header a img,
  body.home header .custom-logo,
  body.home .site-header img,
  body.home .site-branding img,
  body.page-front-page header img,
  body.page-front-page .site-header img,
  body.page-front-page .site-branding img,
  body.home img[alt*="BoostX" i],
  body.home img[src*="logo" i] {
    max-height: 40px !important;
    max-width: 160px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }
  body.home .menu-toggle,
  body.home button.menu-toggle,
  body.home .hamburger,
  body.home .nav-toggle,
  body.home header button[aria-label*="menu" i],
  body.home header button[aria-controls*="menu" i],
  body.page-front-page .menu-toggle,
  body.page-front-page .hamburger,
  body.page-front-page .nav-toggle {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    padding: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  body.home .menu-toggle svg, body.home .hamburger svg, body.home header button svg,
  body.page-front-page .menu-toggle svg, body.page-front-page .hamburger svg { width: 28px !important; height: 28px !important; }

  /* ★1: HERO — 余白圧縮 (scroll-cueの被り解消) */
  .hero { padding: 48px 0 40px !important; min-height: auto !important; }
  .hero-grid { padding-bottom: 0 !important; gap: 24px !important; }
  .hero-actions { margin-bottom: 0 !important; }
  .hero-scroll-cue {
    position: static !important;     /* absolute解除でCTAに被らない */
    transform: none !important;
    left: auto !important;
    bottom: auto !important;
    margin: 28px auto 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }

  /* ★2: EMBED V3 画像 — モバイルでは非表示 (社長指示 2026-05-28) */
  .embed-v3-grid { display: flex !important; flex-direction: column !important; gap: 24px !important; }
  .embed-v3-text { order: 1 !important; }
  .embed-v3-photo { display: none !important; }
  .embed-v3-photo img { display: none !important; }
  /* EMBED features (4枚カード) */
  .embed-v3-features { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .embed-v3-feat { padding: 16px 14px !important; }
  .embed-v3-feat-icon { width: 36px !important; height: 36px !important; }
  .embed-v3-feat-label { font-size: 13.5px !important; line-height: 1.4 !important; }
  .embed-v3-feat-sub { font-size: 11px !important; }

  /* ★3: TECH ロゴ — モバイル専用整列 (PC版は触らない) */
  .tech-logos {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }
  .tech-logo {
    padding: 18px 6px !important;
    min-height: 130px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  .tech-logo-img {
    height: 40px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 0 6px !important;
  }
  /* img/svg共通: 自然なaspect-ratioを保持 */
  .tech-logo-img img,
  .tech-logo-img > svg {
    max-width: 90% !important;
    max-height: 28px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }
  /* HubSpot (SVG width=106) 等の横長wordmark専用: SVG固有のwidth属性を打ち消す */
  .tech-logo[title*="HubSpot" i] .tech-logo-img,
  .tech-logo[title*="HubSpot" i] .tech-logo-img > svg {
    overflow: visible !important;
  }
  .tech-logo[title*="HubSpot" i] .tech-logo-img > svg,
  .tech-logo[title*="HubSpot" i] .tech-logo-img > svg[width],
  .tech-logo[title*="HubSpot" i] .tech-logo-img > svg[width="106"] {
    width: 76% !important;
    max-width: 76% !important;
    height: 20px !important;
    max-height: 20px !important;
    /* SVGのviewBoxを保持してaspect-ratioを守る */
    preserveAspectRatio: xMidYMid meet;
  }
  .tech-logo-img img.tl-wide,
  .tech-logo-img img.tl-extra-wide {
    max-width: 88% !important;
    max-height: 22px !important;
  }
  .tech-logo-name {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    margin-top: 10px !important;
    padding: 0 4px !important;
    text-align: center !important;
    word-break: keep-all !important;
    font-weight: 700 !important;
  }

  /* ★4: FAQ → CTA 巨大余白の解消 — min-heightをモバイルで撤廃 */
  .faq-v2 { min-height: 920px !important; padding: 48px 0 0 !important; display: flex !important; flex-direction: column !important; }
  .faq-v2 > .container::after { display: none !important; }

  /* ★5: ヘッダーは front-page.php で制御しない (テーマ責務) */

  /* ② tech-logos: PC版CSS優先のため重複削除 (社長指示: PC元デザインに戻す) */

  /* ③ Proposal section: モバイル余白完全除去 (重複は本ブロック内に統合) */
  .proposal-mockup,
  .pdf-mock-badge,
  .pdf-glow,
  .pdf-stack,
  .pdf-mock-wrap,
  .proposal-mock,
  .proposal-mock-wrap { display: none !important; }
  .proposal-card {
    grid-template-columns: 1fr !important;
    padding: 36px 24px !important;
    gap: 0 !important;
    margin-top: 40px !important;
    min-height: 0 !important;
  }
  .proposal-card .proposal-left { width: 100% !important; }
  .proposal-card::after,
  .proposal-card::before { display: none !important; }

  /* ④ final-cta-actions: 2ボタン縦並び・両方視認性確保 */
  .final-cta-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .final-cta-actions a {
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
  }
  .final-cta-actions .btn-cta-outline {
    background: rgba(255,255,255,0.10) !important;
    border: 1.5px solid rgba(255,255,255,0.55) !important;
    color: #ffffff !important;
    padding: 18px 22px !important;
    font-size: 14px !important;
  }
  .final-cta-actions .btn-cta-outline svg { color: #ffffff !important; stroke: #ffffff !important; }
}

@media (max-width: 640px) {
  /* tech-logos: より小さい画面で更にタイトに */
  .tech-logo-img { padding: 10px 4px !important; min-height: 56px !important; height: 56px !important; }
  .tech-logo-img img, .tech-logo-img > svg { max-height: 28px !important; }
  .tech-logo-img img.tl-wide,
  .tech-logo-img img.tl-extra-wide,
  .tech-logo-img img.tl-square-wide { max-height: 24px !important; }
  .tech-logo-name { font-size: 10.5px !important; padding: 6px 2px !important; }

  /* proposal-card: 更にコンパクト */
  .proposal-card { padding: 28px 18px !important; margin-top: 32px !important; }
  .proposal-title { font-size: 20px !important; line-height: 1.5 !important; }
  .proposal-desc { font-size: 13.5px !important; line-height: 1.85 !important; }
  .proposal-feat { font-size: 13px !important; }
}


/* ============================================================
   アニメーション動作改善 (2026-05-28 自然化・カクつき解消)
   - GPU加速 (will-change, transform: translateZ(0))
   - reduced-motion 設定の尊重
   - モバイルでの重いアニメ間引き
   ============================================================ */

/* reveal アニメーション: GPU加速で滑らかに */
body.home .reveal,
body.page-front-page .reveal {
  will-change: opacity, transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}
/* in 状態になったら will-change を外して GPU 解放 */
body.home .reveal.in,
body.page-front-page .reveal.in {
  will-change: auto;
}

/* スクロール時のscroll-behavior: smooth でカクつきが出る環境ではauto */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.home *, body.page-front-page * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.15s !important;
  }
}

/* モバイル: 重いアニメ・脈動エフェクトを軽量化 */
@media (max-width: 768px) {
  /* hero 背景の重いアニメ・blur フィルタを停止 */
  body.home .hero-bg-image,
  body.home .hero-mesh,
  body.home .hero-orb-1,
  body.home .hero-orb-2,
  body.home .hero-neural,
  body.home .hero-streak,
  body.home .hero-dust {
    animation: none !important;
    filter: none !important;
  }
  /* dash floating cards の継続アニメ停止 (CPU負荷下げる) */
  body.home .dash-float-card,
  body.home .dash-floats > * {
    animation: none !important;
  }
  /* STORY chapter のホバー反応は無効 (タッチデバイスでは無意味) */
  body.home .schap:hover .schap-num,
  body.home .schap:hover .schap-tag,
  body.home .schap:hover .schap-right::before {
    transform: none !important;
    background: inherit !important;
  }
  /* hero-orb の blur(80px) は CPU 食うので軽く */
  body.home .fcv2-bg-orb-1,
  body.home .fcv2-bg-orb-2 {
    filter: blur(40px) !important;
    animation: none !important;
  }
  /* fcv2 タイトルのグラデアニメ停止 */
  body.home .fcv2-title-em {
    animation: none !important;
    background-position: 0% 50% !important;
  }
}

/* 全体: transitionのデフォルトeasingを統一して自然に */
body.home .schap,
body.home .schap-left,
body.home .schap-right,
body.home .schap-visual,
body.home .reveal,
body.home .faq-v2-item,
body.home .lp-card {
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}