/* =========================================
   GRAVITY LP（統合版）：経営者向けデザインシステム
   ネイビー・ソリッド・知的・信頼感・力強さ
   ========================================= */

/* ==========================================
   Phase 1 CSS class 化（260512）
   b-cta / b-chapter / b-axis-group の inline style を class 定義
   ========================================== */

/* CTA ボタン（ヒーロー内） */
.b-cta-primary {
  display: inline-block;
  background: #000;
  color: #fff;
  padding: 14px 28px;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.04em;
  font-weight: 700;
  border-radius: 4px;
}
.b-cta-secondary {
  display: inline-block;
  background: #fff;
  color: #000;
  border: 1px solid #000;
  padding: 14px 28px;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.04em;
  font-weight: 700;
  border-radius: 4px;
}

/* Chapter セクション（思想層）—— 背景色はバリアント class で指定 */
.b-chapter { padding: 80px 0 72px; border-top: 1px solid #e5e7eb; }
.b-chapter--bg-warm { background: #fafaf8; }
.b-chapter--bg-white { background: #ffffff; border-top-color: #e8e4da; padding-top: 72px; padding-bottom: 72px; }

/* axis-group —— 上マージンはバリアント class で指定 */
.b-axis-group--mt-sm { margin-top: 32px; }
.b-axis-group--mt-lg { margin-top: 48px; }

/* axis-label / axis-sub —— サービスグループ見出し（260515 追加） */
.b-axis-label {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: 0.06em;
  text-align: center;
  margin: 0 0 6px;
}
.b-axis-sub {
  font-size: 12.5px;
  color: #64748b;
  text-align: center;
  margin: 0 0 24px;
  line-height: 1.7;
}

/* diagnose-iframe —— 診断 UI 埋め込み（260515 β 案・8 ページピボット） */
.b-diagnose-iframe-wrap {
  max-width: 900px;
  margin: 36px auto 28px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.08);
  background: #fff;
  border: 1px solid #e2e8f0;
}
.b-diagnose-iframe {
  width: 100%;
  height: 820px; /* postMessage 自動リサイズ受信までのフォールバック高 */
  border: none;
  display: block;
  transition: height 0.25s ease;
}
@media (max-width: 768px) {
  .b-diagnose-iframe {
    height: 760px;
  }
}
@media (max-width: 480px) {
  .b-diagnose-iframe {
    height: 720px;
  }
  .b-diagnose-iframe-wrap {
    margin: 24px -16px;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
}

/* trial-branch-single —— iframe 後の個人軸 CODE 案内（260515 追加） */
.b-trial-branch-single {
  text-align: center;
  margin: 24px auto 16px;
  padding: 22px 24px;
  background: #f8fafc;
  border-radius: 8px;
  max-width: 640px;
}
.b-trial-branch-note {
  font-size: 13px;
  color: #64748b;
  margin: 0 0 10px;
  line-height: 1.7;
}

/* program-axes —— 組織の引力設計プログラム 3 軸提供物（260515 追加） */
.b-program-axes {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin: 20px 0 8px;
}
.b-program-axis {
  padding: 16px 14px;
  background: rgba(255,255,255,0.75);
  border-radius: 6px;
  border-top: 3px solid #1e40af;
}
.b-program-axis-label {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}
.b-program-axis-desc {
  font-size: 12.5px;
  color: #475569;
  line-height: 1.75;
}
.b-program-axis-desc strong {
  color: #1e40af;
  font-weight: 700;
}
@media (max-width: 768px) {
  .b-program-axes {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* series-card-header（flex 設定） */
.b-series-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  gap: 12px;
}

/* series-card-title（margin リセット） */
.b-series-card-title { margin: 0; }

/* series-card-tag（margin） */
.b-series-card-tag-mb { margin-bottom: 10px; }

/* series-card-meta カラーバリアント */
.b-series-card-meta--dark { color: #0f172a; }
.b-series-card-meta--blue { color: #1e40af; }

/* series-card ボーダー左バリアント */
.b-series-card--dark { border-left: 4px solid #0f172a; }
.b-series-card--blue { border-left: 4px solid #1e40af; }

/* series-grid カラム指定バリアント */
.b-series-grid--3col { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.b-series-grid--2col { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.b-series-grid--1col { grid-template-columns: 1fr; max-width: 720px; margin-left: auto; margin-right: auto; }

/* price badge（コンパクトな価格表示） */
.b-price-badge { font-size: 12px; font-weight: 900; color: #64748b; white-space: nowrap; }

/* ==========================================
   Service Connect Band（ヒーロー直後の5サービス接続）
   ========================================== */
.b-service-connect-band {
  padding: 40px 20px;
  background: linear-gradient(180deg, rgba(10,15,30,0.02) 0%, rgba(10,15,30,0.04) 100%);
  border-top: 1px solid var(--b-border);
  border-bottom: 1px solid var(--b-border);
}
.b-service-connect-lead {
  text-align: center; font-size: 14px; font-weight: 700;
  color: var(--b-text); letter-spacing: 0.02em; margin-bottom: 20px;
}
.b-service-connect-row {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
}
.b-service-connect-item {
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 14px; border-radius: 8px;
  background: var(--b-white); border: 1px solid var(--b-border);
  min-width: 80px;
}
.b-service-connect-item--highlight {
  background: var(--b-primary); border-color: var(--b-primary);
}
.b-service-connect-item--highlight .b-service-connect-name,
.b-service-connect-item--highlight .b-service-connect-tag {
  color: var(--b-white);
}
.b-service-connect-name {
  font-size: 13px; font-weight: 800; color: var(--b-text); letter-spacing: 0.02em;
}
.b-service-connect-tag {
  font-size: 10px; color: var(--b-text-light); margin-top: 2px;
}
.b-service-connect-arrow {
  font-size: 14px; color: var(--b-text-light); font-weight: 700;
}
.b-service-connect-arrow--or {
  font-size: 12px; color: #cbd5e1; font-weight: 500;
}
.b-service-connect-note {
  text-align: center; font-size: 12px; color: var(--b-text-light);
  line-height: 1.7; margin: 0;
}
@media (max-width: 640px) {
  .b-service-connect-row { gap: 4px; }
  .b-service-connect-item { padding: 8px 10px; min-width: 64px; }
  .b-service-connect-name { font-size: 11px; }
  .b-service-connect-tag { font-size: 9px; }
  .b-service-connect-arrow { font-size: 12px; }
}

/* ==========================================
   Service Matrix（4象限サービス全体図）
   ========================================== */
.b-service-matrix-section { background: var(--b-bg); }
.b-service-matrix {
  display: flex; flex-direction: column; gap: 12px;
  margin: 32px 0 20px;
}
.b-service-matrix-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.b-service-matrix-cell {
  padding: 24px 24px; border: 1px solid var(--b-border);
  border-radius: var(--b-radius); background: var(--b-white);
  display: flex; flex-direction: column; gap: 8px;
}
.b-service-matrix-cell--highlight {
  border: 2px solid var(--b-accent);
  background: var(--b-accent-light);
  box-shadow: var(--b-shadow-blue);
}
.b-sm-quadrant {
  font-size: 12px; font-weight: 800; letter-spacing: 0.06em;
  color: var(--b-text-light);
}
.b-service-matrix-cell--highlight .b-sm-quadrant {
  color: var(--b-accent);
}
.b-sm-service-name {
  font-size: 22px; font-weight: 800; color: var(--b-primary);
  letter-spacing: -0.02em; margin-top: 2px;
}
.b-sm-service-price {
  font-size: 14px; font-weight: 700; color: var(--b-accent);
  letter-spacing: 0.02em;
}
.b-sm-service-desc {
  font-size: 13px; color: var(--b-text-light); line-height: 1.8; margin-top: 4px;
}
.b-service-matrix-footer {
  text-align: center; font-size: 14px; color: var(--b-text);
  line-height: 2; margin: 24px 0 0; padding: 20px;
  background: var(--b-white); border-radius: var(--b-radius);
  border: 1px solid var(--b-border);
}
.b-service-matrix-footer strong {
  color: var(--b-accent); font-size: 15px;
}
@media (max-width: 640px) {
  .b-service-matrix-row { grid-template-columns: 1fr; gap: 8px; }
  .b-service-matrix-cell { padding: 18px 20px; }
  .b-sm-service-name { font-size: 18px; }
}

:root {
    /* Colors — 経営者向けソリッドパレット */
    --b-primary: #0a0f1e;     /* Deep Dark Navy */
    --b-secondary: #2d3748;   /* Slate */
    --b-accent: #1e40af;      /* Deep Blue — 知的・信頼 */
    --b-accent-hover: #1e3a8a;
    --b-accent-light: rgba(30, 64, 175, 0.08);
    --b-bg: #f7f8fa;          /* Cool Gray Background */
    --b-white: #ffffff;
    --b-border: #dfe3ea;
    --b-text: #1a202c;
    --b-text-light: #5a6478;
    --b-danger: #dc2626;      /* Sharp Red for losses */
    --b-danger-light: #fef2f2;

    /* Typography */
    --b-font: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Effects */
    --b-radius: 12px;
    --b-radius-lg: 20px;
    --b-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --b-shadow: 0 4px 12px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);
    --b-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.06);
    --b-shadow-blue: 0 12px 30px -10px rgba(30, 64, 175, 0.35);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--b-font);
    color: var(--b-text);
    background: var(--b-bg);
    font-size: 16px;
    line-height: 1.85;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "palt";
    text-rendering: optimizeLegibility;
}
a { text-decoration: none; color: inherit; transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
ul { list-style: none; }
img { max-width: 100%; display: block; }

.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; position: relative; }
.text-center { text-align: center; }

/* ========== Header ========== */
.b-header {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}
.b-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
}
.b-brand {
    font-weight: 800;
    font-size: 22px;
    color: var(--b-primary);
    letter-spacing: -0.03em;
}
.b-header-nav {
    display: flex;
    align-items: center;
    gap: 32px;
}
.b-nav-link {
    font-size: 14px;
    font-weight: 700;
    color: var(--b-secondary);
    position: relative;
    padding: 8px 0;
}
.b-nav-link::after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px;
    background: var(--b-accent); transition: width 0.3s ease;
}
@media (hover: hover) {
    .b-nav-link:hover { color: var(--b-accent); }
    .b-nav-link:hover::after { width: 100%; }
}

.b-header .b-btn {
    display: inline-block;
    padding: 10px 24px;
    background: var(--b-accent);
    color: white;
    font-weight: 700;
    border-radius: 50px;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(30, 64, 175, 0.2);
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
@media (hover: hover) {
    .b-header .b-btn:hover {
        background: var(--b-accent-hover);
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(30, 64, 175, 0.3);
    }
}

/* ========== Hero — 経営者向け：Mesh gradient 強化版（260524 A+D・user feedback で色強め） ========== */
.b-hero {
    padding: 140px 0 160px;
    background:
        radial-gradient(ellipse 900px 600px at 15% 25%, rgba(30, 64, 175, 0.25) 0%, transparent 55%),
        radial-gradient(ellipse 700px 500px at 85% 75%, rgba(30, 64, 175, 0.18) 0%, transparent 55%),
        linear-gradient(180deg, #ffffff 0%, #eef2f7 100%);
    position: relative;
    overflow: hidden;
}
.b-hero::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-image:
        linear-gradient(rgba(10, 15, 30, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10, 15, 30, 0.02) 1px, transparent 1px);
    background-size: 48px 48px;
    opacity: 0.3;
    pointer-events: none;
    z-index: 0;
}
/* 宇宙背景（Gemini Nano Banana 生成・260423）= Top で死守・Program で個別 display:none 上書き（260524 user 指示） */
.b-hero::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('images/space_bg.jpg?v=20260827a');
    background-size: cover;
    background-position: center;
    opacity: 0.35;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 0;
    /* 260827 宇宙が静かに息をする（超低速ズーム・往復 70 秒） */
    animation: b-hero-breathe 70s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes b-hero-breathe {
    from { transform: scale(1); }
    to   { transform: scale(1.07); }
}
/* 260827 引力の輪＝画像中央の光球に粒子球を重ねる（部品はコーポレート top と共通 gravity-ring.js） */
.b-hero-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(46vw, 560px);
    aspect-ratio: 1 / 1;
    z-index: 0;
    pointer-events: none;
}
.b-hero-ring canvas { display: block; width: 100%; height: 100%; }
@media (max-width: 767px) {
    .b-hero-ring { width: 80vw; }
}
@media (prefers-reduced-motion: reduce) {
    .b-hero::after { animation: none; }
}
.b-hero-inner {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}
.b-hero h1 {
    font-size: clamp(40px, 5.5vw, 64px);
    line-height: 1.3;
    color: var(--b-primary);
    margin-bottom: 40px;
    letter-spacing: -0.03em;
    text-wrap: balance;
}
.b-hero h1 .b-hero-highlight {
    font-weight: 900;
    display: inline-block;
    color: var(--b-primary);
    position: relative;
}
.b-hero h1 .b-hero-highlight::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--b-accent), transparent);
    border-radius: 2px;
}
.b-hero-target {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--b-accent);
    background: var(--b-accent-light);
    border: none;
    padding: 8px 18px;
    border-radius: 100px;
    margin-bottom: 24px;
}
.b-hero-lead {
    font-size: 17px;
    color: var(--b-secondary);
    max-width: 720px;
    margin: 0 auto 56px;
    line-height: 2.2;
    font-weight: 500;
}
.b-hero-lead strong {
    color: var(--b-primary);
    font-weight: 800;
    background: linear-gradient(transparent 65%, rgba(30, 64, 175, 0.12) 65%);
}
.b-hero .b-cta-single {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 22px 56px;
    background: var(--b-accent);
    color: white;
    font-weight: 800;
    font-size: 17px;
    border-radius: 50px;
    box-shadow: var(--b-shadow-blue);
    transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.02em;
}
.b-hero-meta {
    margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--b-text-light);
    letter-spacing: 0.04em;
}
@media (hover: hover) {
    .b-hero .b-cta-single:hover {
        background: var(--b-accent-hover);
        transform: translateY(-3px) scale(1.02);
        box-shadow: 0 20px 40px -10px rgba(30, 64, 175, 0.5);
    }
}

/* ========== Section 共通 ========== */
.b-section { padding: 120px 0; }
.b-section:nth-child(even) { background: var(--b-white); }
.b-section-label {
    display: table;
    margin: 0 auto 20px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.2em;
    color: var(--b-accent);
    text-transform: uppercase;
    background: var(--b-accent-light);
    padding: 8px 20px;
    border-radius: 4px;
    border: 1px solid rgba(30, 64, 175, 0.12);
}
.b-section-title {
    font-size: 36px;
    font-weight: 900;
    color: var(--b-primary);
    max-width: 20em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 28px;
    line-height: 1.45;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

/* ========== Jump ratio emphasis — キーワード強調 ========== */
.b-section-title em {
    font-style: normal;
    color: var(--b-accent);
    font-size: 1.1em;
}

/* ========== Problem ========== */
.b-problem-copy {
    font-size: 18px;
    line-height: 2.1;
    color: var(--b-text);
    margin-bottom: 40px;
    font-weight: 500;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.b-problem-copy strong {
    color: var(--b-primary);
    font-weight: 800;
}

/* Problem voices — 下線区切りリスト */
.b-problem-voices {
    max-width: 760px;
    margin: 32px auto;
}
.b-problem-voices li {
    padding: 24px 0;
    border-bottom: 1px solid var(--b-border);
    font-size: 16px;
    line-height: 1.9;
    text-align: center;
}
.b-problem-voices li:last-child {
    border-bottom: none;
}
.b-problem-voices li strong {
    color: var(--b-primary);
    font-weight: 800;
}
.b-problem-voices li span {
    color: var(--b-text-light);
    font-weight: 500;
}

.b-quant-box {
    background: var(--b-danger-light);
    border: 1px solid rgba(220, 38, 38, 0.15);
    border-radius: var(--b-radius-lg);
    padding: 36px 40px;
    margin: 40px auto 0;
    box-shadow: var(--b-shadow-sm);
    position: relative;
    overflow: hidden;
    max-width: 760px;
}
.b-quant-box::before {
    content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%;
    background: var(--b-danger); z-index: 1;
}
.b-quant-box > * { position: relative; z-index: 2; }

.b-quant-row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 16px;
    font-size: 15px;
    padding-bottom: 16px;
    border-bottom: 1px dashed rgba(220, 38, 38, 0.2);
}
.b-quant-row:last-of-type { border-bottom: none; }
.b-quant-row strong {
    color: var(--b-primary);
    min-width: 200px;
    font-weight: 800;
    font-size: 15px;
}
.b-quant-row span {
    color: var(--b-danger);
    font-weight: 800;
    font-size: 18px;
    line-height: 1.6;
    letter-spacing: -0.02em;
}
.b-quant-source {
    font-size: 11px; color: var(--b-text-light); margin-top: 12px; text-align: right;
    opacity: 0.7; position: relative;
}

/* ========== Gap — 行き止まり感 → 突破口の視線誘導 ========== */
.b-section.b-gap-section {
    background: linear-gradient(180deg, #f3f4f6 0%, #e8eaed 100%);
}
.b-gap-items {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 760px;
    margin: 40px auto 56px;
}
.b-gap-item {
    padding: 28px 32px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: var(--b-radius);
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: none;
    transition: opacity 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    opacity: 0.75;
}
.b-gap-item::before {
    content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%;
    background: #c0c5ce;
}
@media (hover: hover) {
    .b-gap-item:hover {
        opacity: 1;
        box-shadow: var(--b-shadow-sm);
    }
    .b-gap-item:hover::before {
        background: #8b95a5;
    }
}
.b-gap-tried {
    font-size: 16px;
    font-weight: 700;
    color: var(--b-secondary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.b-gap-tried::before {
    content: '✕';
    color: #a0aab8;
    font-weight: 700;
    font-size: 14px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.05);
    border-radius: 50%;
    flex-shrink: 0;
}
.b-gap-but {
    font-size: 15px;
    color: #7a8494;
    font-weight: 500;
    line-height: 1.8;
    font-style: italic;
    padding-left: 30px;
}
.b-gap-conclusion {
    max-width: 760px;
    margin: 0 auto;
    padding: 48px;
    background: linear-gradient(135deg, var(--b-primary) 0%, #1a2744 100%);
    color: white;
    border-radius: var(--b-radius-lg);
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.8;
    box-shadow: 0 20px 40px -10px rgba(10, 15, 30, 0.4);
    position: relative;
    overflow: hidden;
}
.b-gap-conclusion::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.3) 0%, transparent 100%);
    pointer-events: none;
}
.b-gap-conclusion strong {
    color: #93b4ff;
}

/* ========== Solution — 構造的・論理的な提示 ========== */
.b-section.b-solution { background: var(--b-white); }
.b-solution-copy {
    font-size: 17px;
    line-height: 2.2;
    color: var(--b-text);
    max-width: 760px;
    margin: 0 auto;
    font-weight: 500;
}
.b-solution-copy p { margin-bottom: 1.2em; }
.b-solution-copy p:last-child { margin-bottom: 0; }
.b-solution .b-experience-grid { margin-top: 48px; }
.b-solution-copy strong {
    color: var(--b-accent);
    font-weight: 800;
}

/* ========== Experience ========== */
.b-experience-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 960px;
    margin: 0 auto;
}
@media (max-width: 820px) {
    .b-experience-grid {
        grid-template-columns: 1fr;
        max-width: 560px;
    }
}
.b-experience-item {
    padding: 36px 32px;
    border-radius: var(--b-radius);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    background: var(--b-white);
    border: 1px solid var(--b-border);
    box-shadow: var(--b-shadow);
}
@media (hover: hover) {
    .b-experience-item:hover {
        transform: translateY(-3px);
        box-shadow: var(--b-shadow-lg);
    }
}
.b-experience-num {
    font-size: 13px;
    font-weight: 900;
    color: var(--b-accent);
    letter-spacing: 0.1em;
    margin-bottom: 16px;
    display: inline-block;
    padding: 4px 12px;
    background: var(--b-accent-light);
    border-radius: 50px;
    border: 1px solid rgba(30, 64, 175, 0.12);
}
.b-experience-item h3,
.b-experience-item h4 {
    font-size: 17px;
    font-weight: 800;
    color: var(--b-primary);
    margin-bottom: 12px;
    line-height: 1.5;
    letter-spacing: 0.01em;
}
.b-experience-item p {
    font-size: 14px;
    color: var(--b-text-light);
    line-height: 1.85;
    font-weight: 500;
}
@media (max-width: 600px) {
    .b-experience-item {
        padding: 28px 24px;
    }
    .b-experience-item h3,
    .b-experience-item h4 {
        font-size: 16px;
    }
}

.b-plan-card {
    padding: 48px 36px;
    background: var(--b-white);
    border-radius: var(--b-radius-lg);
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: var(--b-shadow);
    position: relative;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
@media (hover: hover) {
    .b-plan-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--b-shadow-lg);
    }
}
.b-plan-name {
    font-size: 24px;
    font-weight: 900;
    color: var(--b-primary);
    margin-bottom: 4px;
}
.b-plan-tagline {
    font-size: 15px;
    color: var(--b-text-light);
    font-weight: 600;
    margin-bottom: 20px;
}
.b-plan-price {
    font-size: 36px;
    font-weight: 900;
    color: var(--b-primary);
    margin-bottom: 4px;
    letter-spacing: -0.02em;
}
.b-plan-price-unit {
    font-size: 14px;
    color: var(--b-text-light);
    font-weight: 700;
    margin-bottom: 32px;
    display: block;
}
.b-plan-features {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-top: 28px;
    border-top: 1px solid var(--b-border);
}
.b-plan-feature-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.b-plan-feature-icon {
    font-size: 24px;
    color: var(--b-accent);
    flex-shrink: 0;
    margin-top: 2px;
}
.b-plan-feature-label {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.15em;
    color: var(--b-accent);
    text-transform: uppercase;
    margin-bottom: 4px;
}
.b-plan-feature-detail {
    font-size: 17px;
    font-weight: 800;
    color: var(--b-primary);
    margin-bottom: 6px;
}
.b-plan-feature-detail a {
    color: var(--b-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}
@media (hover: hover) {
    .b-plan-feature-detail a:hover {
        color: var(--b-accent-hover);
    }
}
.b-plan-feature-desc {
    font-size: 14px;
    color: var(--b-text-light);
    line-height: 1.8;
    font-weight: 500;
}
.b-plan-continuation {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px dashed var(--b-border);
    font-size: 14px;
    color: var(--b-text-light);
    font-weight: 600;
}

/* Single plan layout */
.b-plan-single {
    max-width: 640px;
    margin: 0 auto 80px;
}

/* ========== Scope ========== */
.b-scope-block {
    margin: 0 auto 80px;
    padding: 48px;
    background: var(--b-white);
    border-radius: var(--b-radius-lg);
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: var(--b-shadow);
    max-width: 760px;
}
.b-scope-block h3 {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 24px;
    text-align: center;
    color: var(--b-primary);
}
/* ========== Roadmap Teaser ========== */
.b-roadmap-teaser {
    margin-top: 32px;
    margin-bottom: 32px;
    padding: 36px;
    background: linear-gradient(135deg, #f8f9fb 0%, #f0f2f5 100%);
    border-radius: var(--b-radius-lg);
    border: 1px solid var(--b-border);
    text-align: center;
}
.b-roadmap-teaser-header { margin-bottom: 24px; }
.b-roadmap-teaser-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.15em;
    color: var(--b-accent);
    background: var(--b-accent-light);
    padding: 6px 16px;
    border-radius: 4px;
    border: 1px solid rgba(30, 64, 175, 0.12);
    margin-bottom: 12px;
    text-transform: uppercase;
}
.b-roadmap-teaser-lead {
    font-size: 15px;
    color: var(--b-text-light);
    line-height: 1.8;
}

/* Domain-based teaser cards */
.b-roadmap-teaser-domains {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 520px;
    margin: 0 auto 20px;
}
.b-roadmap-teaser-domain {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 24px;
    background: white;
    border-radius: var(--b-radius);
    border: 1px solid rgba(0,0,0,0.06);
    text-align: left;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
@media (hover: hover) {
    .b-roadmap-teaser-domain:hover {
        box-shadow: var(--b-shadow);
        transform: translateY(-2px);
    }
}
.b-domain-icon {
    font-size: 28px;
    color: var(--b-accent);
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--b-accent-light);
    border-radius: 12px;
    border: 1px solid rgba(30, 64, 175, 0.12);
}
.b-domain-title {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: var(--b-primary);
    margin-bottom: 2px;
}
.b-domain-desc {
    display: block;
    font-size: 13px;
    color: var(--b-text-light);
    font-weight: 500;
}
.b-roadmap-teaser-flex-note {
    font-size: 13px;
    color: var(--b-text-light);
    line-height: 1.8;
    margin-bottom: 20px;
}

.b-roadmap-teaser-cta { margin-top: 8px; }
.b-btn-roadmap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 36px;
    background: var(--b-accent);
    color: white;
    font-weight: 700;
    font-size: 15px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(30, 64, 175, 0.2);
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    font-family: var(--b-font);
}
@media (hover: hover) {
    .b-btn-roadmap:hover {
        background: var(--b-accent-hover);
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(30, 64, 175, 0.3);
    }
}

/* ========== Roadmap Modal ========== */
.b-roadmap-modal {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 2000;
}
.b-roadmap-modal.is-open { display: flex; align-items: center; justify-content: center; }
.b-roadmap-modal-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(10, 15, 30, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.b-roadmap-modal-container {
    position: relative;
    width: 90%;
    max-width: 720px;
    max-height: 85vh;
    background: white;
    border-radius: var(--b-radius-lg);
    box-shadow: 0 30px 60px rgba(0,0,0,0.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.b-roadmap-modal-close {
    position: absolute;
    top: 16px; right: 16px;
    width: 40px; height: 40px;
    border: none;
    background: rgba(0,0,0,0.06);
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    color: var(--b-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background 0.2s ease;
}
@media (hover: hover) { .b-roadmap-modal-close:hover { background: rgba(0,0,0,0.12); } }
.b-roadmap-modal-scroll {
    overflow-y: auto;
    padding: 48px 40px;
    -webkit-overflow-scrolling: touch;
}
.b-roadmap-modal-header {
    text-align: center;
    margin-bottom: 40px;
}
.b-roadmap-modal-header h3 {
    font-size: 24px;
    font-weight: 900;
    color: var(--b-primary);
    margin: 12px 0 8px;
}
.b-roadmap-modal-header p {
    font-size: 14px;
    color: var(--b-text-light);
}

/* Modal phases */
.b-roadmap-modal-phase {
    margin-bottom: 36px;
    padding-bottom: 36px;
    border-bottom: 1px solid var(--b-border);
}
.b-roadmap-modal-phase:last-of-type { border-bottom: none; }
.b-roadmap-modal-month {
    display: inline-block;
    font-size: 12px;
    font-weight: 900;
    color: var(--b-accent);
    background: var(--b-accent-light);
    padding: 6px 16px;
    border-radius: 50px;
    border: 1px solid rgba(30, 64, 175, 0.12);
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}
.b-roadmap-modal-theme {
    font-size: 18px;
    font-weight: 800;
    color: var(--b-primary);
    margin-bottom: 20px;
}
.b-roadmap-modal-outputs {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.b-roadmap-modal-output {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: #f8fafc;
    border-radius: var(--b-radius);
    border: 1px solid rgba(0,0,0,0.04);
}
.b-output-tag {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 800;
    color: var(--b-accent);
    background: var(--b-accent-light);
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid rgba(30, 64, 175, 0.12);
    letter-spacing: 0.05em;
    margin-top: 3px;
}
.b-roadmap-modal-output strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: var(--b-primary);
    margin-bottom: 4px;
}
.b-roadmap-modal-output p {
    font-size: 14px;
    color: var(--b-text-light);
    line-height: 1.7;
    margin: 0;
}

/* Modal total */
.b-roadmap-modal-total {
    padding: 32px;
    background: linear-gradient(135deg, var(--b-primary) 0%, #1a2744 100%);
    border-radius: var(--b-radius-lg);
    text-align: center;
    margin-top: 36px;
    position: relative;
    overflow: hidden;
}
.b-roadmap-modal-total::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.3) 0%, transparent 100%);
    pointer-events: none;
}
.b-roadmap-modal-total-lead {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.1em;
    margin-bottom: 16px;
    position: relative;
}
.b-roadmap-modal-total-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    position: relative;
}
.b-roadmap-modal-total-item {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    line-height: 1.4;
}
.b-roadmap-modal-total-num {
    display: block;
    font-size: 28px;
    font-weight: 900;
    color: #93b4ff;
    line-height: 1.2;
    margin-bottom: 4px;
}
/* Modal sample link */
.b-roadmap-modal-sample {
    margin-top: 24px;
    padding: 20px 28px;
    background: var(--b-accent-light);
    border: 1px solid rgba(30, 64, 175, 0.12);
    border-radius: var(--b-radius);
    text-align: center;
}
.b-roadmap-modal-sample-lead {
    font-size: 13px;
    font-weight: 700;
    color: var(--b-text-light);
    margin-bottom: 10px;
}
.b-roadmap-modal-sample-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--b-accent);
    padding: 8px 20px;
    border: 2px solid var(--b-accent);
    border-radius: 50px;
    transition: background 0.3s ease, color 0.3s ease;
}
@media (hover: hover) {
    .b-roadmap-modal-sample-link:hover {
        background: var(--b-accent);
        color: white;
    }
}

.b-roadmap-modal-note {
    margin-top: 24px;
    text-align: center;
    font-size: 13px;
    color: var(--b-text-light);
    line-height: 1.8;
}

/* ========== Cost Anchoring ========== */
.b-cost-anchor {
    max-width: 760px;
    margin: 0 auto 64px;
    padding: 48px 40px;
    background: var(--b-white);
    border: 1px solid var(--b-border);
    border-radius: var(--b-radius-lg);
    box-shadow: var(--b-shadow);
}
.b-cost-anchor-title {
    text-align: center;
    font-size: 20px;
    font-weight: 800;
    color: var(--b-text);
    margin-bottom: 32px;
}
.b-cost-compare-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}
.b-cost-compare-item {
    padding: 24px 20px;
    background: var(--b-bg);
    border-radius: var(--b-radius);
    text-align: center;
}
.b-cost-compare-method {
    font-size: 14px;
    font-weight: 700;
    color: var(--b-text);
    margin-bottom: 12px;
}
.b-cost-compare-price {
    font-size: 18px;
    font-weight: 900;
    color: var(--b-danger);
    margin-bottom: 10px;
}
.b-cost-compare-note {
    font-size: 13px;
    color: var(--b-text-light);
    line-height: 1.7;
}
.b-cost-gravity-row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 28px;
    background: var(--b-primary);
    border-radius: var(--b-radius);
    margin-bottom: 24px;
}
.b-cost-gravity-label {
    font-size: 16px;
    font-weight: 900;
    color: white;
    white-space: nowrap;
}
.b-cost-gravity-detail {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.b-cost-gravity-price {
    font-size: 17px;
    font-weight: 800;
    color: white;
}
.b-cost-gravity-desc {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
}
.b-cost-callback {
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--b-accent);
    line-height: 1.8;
}

@media (max-width: 600px) {
    .b-roadmap-teaser { padding: 28px 20px; }
    .b-roadmap-modal-container { width: 95%; max-height: 90vh; }
    .b-roadmap-modal-scroll { padding: 36px 24px; }
    .b-roadmap-modal-header h3 { font-size: 20px; }
    .b-roadmap-modal-total-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .b-roadmap-modal-total-num { font-size: 24px; }
    .b-cost-anchor { padding: 32px 20px; }
    .b-cost-compare-grid { grid-template-columns: 1fr; gap: 12px; }
    .b-cost-gravity-row { flex-direction: column; gap: 12px; text-align: center; padding: 20px; }
}

/* ========== Checkbox Form ========== */
.b-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.b-checkbox-group label {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    background: #f8fafc;
    border: 2px solid var(--b-border);
    border-radius: var(--b-radius);
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    color: var(--b-text);
    transition: border-color 0.2s ease, background 0.2s ease;
    line-height: 1.5;
}
@media (hover: hover) {
    .b-checkbox-group label:hover {
        border-color: var(--b-accent);
        background: #eff6ff;
    }
}
.b-checkbox-group input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    margin: 0;
    margin-right: 16px;
    padding: 0;
    flex-shrink: 0;
    accent-color: var(--b-accent);
    vertical-align: middle;
    cursor: pointer;
}
.b-checkbox-group input[type="checkbox"]:checked + span {
    color: var(--b-primary);
    font-weight: 700;
}

/* ========== Solution closing line ========== */
.b-solution-closing {
    max-width: 760px;
    margin: 48px auto 0;
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    color: var(--b-accent);
    line-height: 1.9;
    padding: 28px 32px;
    background: var(--b-accent-light);
    border-radius: var(--b-radius);
    border: 1px solid rgba(30, 64, 175, 0.12);
}
.b-solution-closing p { margin-bottom: 12px; }

/* ========== Mid CTA ========== */
.b-mid-cta {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 16px; padding: 14px 36px;
    background: var(--b-accent); color: white; font-weight: 700; font-size: 15px;
    border-radius: 50px; box-shadow: 0 4px 12px rgba(30, 64, 175, 0.2);
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
@media (hover: hover) {
    .b-mid-cta:hover {
        background: var(--b-accent-hover);
        transform: translateY(-2px); box-shadow: 0 8px 20px rgba(30, 64, 175, 0.3);
    }
}

/* ========== FAQ in Trial section ========== */
.b-faq-in-trial {
    margin-top: 80px;
    padding-top: 80px;
    border-top: 1px solid var(--b-border);
}

/* ========== Profile ========== */
.b-cred {
    display: flex;
    gap: 48px;
    align-items: stretch;
    max-width: 800px;
    margin: 0 auto;
}
.b-cred-left {
    flex-shrink: 0;
    width: 320px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.b-cred-img {
    width: 260px;
    height: 260px;
    border-radius: 50%;
    margin: 0 auto;
    background: var(--b-border) url('./image.jpeg') top center / cover no-repeat;
    flex-shrink: 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: 6px solid var(--b-white);
}
.b-cred-right {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.b-cred h2, .b-cred-name { font-size: 32px; margin-bottom: 8px; letter-spacing: -0.02em; font-weight: 900; color: var(--b-primary); }
.b-cred .b-name {
    font-size: 16px;
    color: var(--b-accent);
    font-weight: 700;
    margin-bottom: 24px;
    letter-spacing: 0.05em;
    display: inline-block;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--b-border);
}
.b-cred-stats {
    display: flex; gap: 24px; margin-bottom: 24px;
}
.b-cred-stat { display: flex; flex-direction: column; }
.b-cred-stat strong {
    font-size: 28px; font-weight: 900; color: var(--b-accent); letter-spacing: -0.02em; line-height: 1.2;
}
.b-cred-stat span {
    font-size: 12px; font-weight: 700; color: var(--b-text-light); margin-top: 4px;
}
.b-cred .b-bio {
    color: var(--b-text);
    line-height: 2.1;
    font-size: 16px;
}
.b-cred .b-bio p { margin-bottom: 1.5em; }
.b-cred .b-bio p:last-child { margin-bottom: 0; }
.b-cred-career {
    padding: 32px;
    background: #f8fafc;
    border-radius: var(--b-radius);
    border: 1px solid var(--b-border);
}
.b-cred-career li {
    font-size: 14px;
    color: var(--b-secondary);
    margin-bottom: 14px;
    padding-left: 1.5em;
    text-indent: -1.5em;
    line-height: 1.7;
    font-weight: 500;
}
.b-cred-career li:last-child { margin-bottom: 0; }
.b-cred-career li::before { content: '•'; margin-right: 8px; color: var(--b-accent); font-weight: bold; font-size: 18px; }

/* ========== Trial CTA ========== */
.b-section.b-trial-section {
    background: var(--b-white);
    padding-top: 80px;
}
.b-trial-copy { font-size: 18px; line-height: 2.1; margin-bottom: 56px; max-width: 760px; margin-left: auto; margin-right: auto; }
.b-trial-copy p { margin-bottom: 1.5em; }
.b-trial-copy strong {
    color: var(--b-accent);
    font-weight: 800;
}

.b-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 64px;
    justify-content: center;
}
.b-steps .b-step {
    background: var(--b-white);
    padding: 16px 28px;
    border-radius: 50px;
    border: 1px solid rgba(0,0,0,0.06);
    font-size: 15px;
    font-weight: 700;
    color: var(--b-primary);
    box-shadow: var(--b-shadow-sm);
    display: flex;
    align-items: center;
    gap: 10px;
}
.b-steps .b-step::before {
    content: '\eb7a'; font-family: 'remixicon'; color: var(--b-accent); font-size: 20px; font-weight: normal;
}

.b-form-card {
    background: var(--b-white);
    border-radius: 24px;
    box-shadow: var(--b-shadow-lg);
    border: 1px solid rgba(0,0,0,0.05);
    padding: 56px;
    max-width: 680px;
    margin: 0 auto;
}
.b-form-card h2, .b-form-title { font-size: 26px; color: var(--b-primary); margin-bottom: 20px; text-align: center; letter-spacing: -0.02em; font-weight: 900; }
.b-form-group { margin-bottom: 32px; }
.b-form-group label {
    display: block;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--b-primary);
}
.b-form-group input,
.b-form-group textarea {
    width: 100%;
    padding: 16px 20px;
    border: 2px solid var(--b-border);
    border-radius: var(--b-radius);
    font-size: 16px;
    font-family: var(--b-font);
    background: #f8fafc;
    transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
    color: var(--b-primary);
}
.b-form-group textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.b-form-group input:focus,
.b-form-group textarea:focus {
    outline: none;
    border-color: var(--b-accent);
    background: var(--b-white);
    box-shadow: 0 0 0 4px rgba(30, 64, 175, 0.15);
}
.b-form-lead {
    font-size: 13px; color: var(--b-text-light); margin-bottom: 24px; line-height: 1.8; text-align: center;
}
.b-form-required { color: #dc2626; font-size: 12px; font-weight: 700; }
.b-form-note { font-size: 12px; color: var(--b-text-light); margin-top: 16px; text-align: center; line-height: 1.8; }
.utage-iframe { display: none; }
.b-form-card .b-btn-submit {
    width: 100%;
    padding: 22px;
    background: var(--b-accent);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
    margin-top: 16px;
    transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: var(--b-shadow-blue);
}
@media (hover: hover) {
    .b-form-card .b-btn-submit:hover {
        background: var(--b-accent-hover);
        transform: translateY(-3px);
        box-shadow: 0 15px 35px rgba(30, 64, 175, 0.4);
    }
}

/* ========== FAQ ========== */
.b-faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.b-faq-item {
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: var(--b-radius-lg);
    overflow: hidden;
    background: var(--b-white);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: var(--b-shadow-sm);
}
@media (hover: hover) { .b-faq-item:hover { border-color: rgba(30, 64, 175, 0.3); box-shadow: var(--b-shadow); } }
.b-faq-item summary {
    padding: 28px 32px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--b-primary);
    font-size: 17px;
}
.b-faq-item summary::-webkit-details-marker { display: none; }
.b-faq-item summary::after {
    content: '+'; font-size: 24px; color: var(--b-accent); font-weight: 400; transition: transform 0.4s ease;
}
.b-faq-item[open] summary::after { transform: rotate(45deg); }
.b-faq-item[open] summary { background: #f8fafc; color: var(--b-accent); border-bottom: 1px solid var(--b-border); }
.b-faq-item .b-answer {
    padding: 32px;
    font-size: 16px;
    color: var(--b-text);
    line-height: 2;
    background: var(--b-white);
}
.b-faq-item .b-answer a {
    color: var(--b-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}
@media (hover: hover) {
    .b-faq-item .b-answer a:hover {
        color: var(--b-accent-hover);
    }
}

/* ========== Trial Branch (診断2択CTA：CODE/Scan) ========== */
.b-trial-branch {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 40px 0;
}
.b-trial-branch-card {
    display: block;
    padding: 32px 28px;
    background: #fff;
    border: 2px solid #1b1b1b;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s, box-shadow 0.2s;
}
@media (hover: hover) {
    .b-trial-branch-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 24px rgba(10, 15, 30, 0.08);
    }
}
.b-trial-branch-card-tag {
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}
.b-trial-branch-card-title {
    font-size: 22px;
    font-weight: 800;
    color: #1b1b1b;
    margin-bottom: 12px;
}
.b-trial-branch-card-desc {
    font-size: 14px;
    color: #475569;
    line-height: 1.8;
    margin-bottom: 16px;
}
.b-trial-branch-card-meta {
    font-size: 15px;
    color: #1b1b1b;
    font-weight: 700;
}
.b-trial-branch-or {
    padding: 28px 36px;
    background: linear-gradient(135deg, #f8f9fb 0%, #f0f2f5 100%);
    border: 1px solid var(--b-border);
    border-radius: var(--b-radius-lg);
    text-align: center;
}
.b-trial-branch-or-text {
    font-size: 15px;
    font-weight: 700;
    color: var(--b-secondary);
    margin-bottom: 8px;
}
.b-trial-branch-or-desc {
    font-size: 14px;
    color: var(--b-text-light);
    line-height: 1.8;
    margin-bottom: 16px;
}
.b-trial-branch-or-desc strong {
    color: var(--b-primary);
    font-weight: 800;
}
.b-trial-branch-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--b-accent);
    padding: 8px 24px;
    border: 2px solid var(--b-accent);
    border-radius: 50px;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
@media (hover: hover) {
    .b-trial-branch-link:hover {
        background: var(--b-accent);
        color: white;
        transform: translateY(-1px);
    }
}

/* ========== Gravity Orbit ========== */
.b-orbit-section { padding-top: 0; padding-bottom: 80px; }
.b-orbit-block {
    max-width: 760px;
    margin: 0 auto;
    padding: 48px 40px;
    background: var(--b-white);
    border: 1px solid var(--b-border);
    border-radius: var(--b-radius-lg);
    box-shadow: var(--b-shadow);
    text-align: center;
}
.b-orbit-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.15em;
    color: var(--b-accent);
    background: var(--b-accent-light);
    padding: 6px 16px;
    border-radius: 4px;
    border: 1px solid rgba(30, 64, 175, 0.12);
    margin-bottom: 16px;
    text-transform: uppercase;
}
.b-orbit-block h3 {
    font-size: 24px;
    font-weight: 900;
    color: var(--b-primary);
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}
.b-orbit-desc {
    font-size: 16px;
    color: var(--b-text);
    line-height: 2;
    margin-bottom: 32px;
    font-weight: 500;
}
.b-orbit-features {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 560px;
    margin: 0 auto 32px;
    text-align: left;
}
.b-orbit-feature {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px;
    background: #f8fafc;
    border-radius: var(--b-radius);
    border: 1px solid rgba(0,0,0,0.04);
}
.b-orbit-feature i {
    font-size: 22px;
    color: var(--b-accent);
    flex-shrink: 0;
    margin-top: 2px;
}
.b-orbit-feature strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: var(--b-primary);
    margin-bottom: 4px;
}
.b-orbit-feature span {
    font-size: 14px;
    color: var(--b-text-light);
    line-height: 1.7;
}
.b-orbit-footer {
    padding-top: 24px;
    border-top: 1px solid var(--b-border);
}
.b-orbit-price {
    font-size: 18px;
    font-weight: 900;
    color: var(--b-primary);
    margin-bottom: 8px;
}
.b-orbit-price small {
    font-size: 14px;
    font-weight: 600;
    color: var(--b-text-light);
}
.b-orbit-note {
    font-size: 13px;
    color: var(--b-text-light);
    line-height: 1.8;
}

@media (max-width: 600px) {
    .b-roadmap-teaser-domains { gap: 10px; }
    .b-roadmap-teaser-domain { padding: 14px 16px; gap: 12px; }
    .b-domain-icon { width: 40px; height: 40px; font-size: 22px; }
    .b-domain-title { font-size: 14px; }
    .b-domain-desc { font-size: 12px; }
    .b-trial-branch-or { padding: 24px 20px; }
    .b-orbit-block { padding: 32px 24px; }
    .b-orbit-block h3 { font-size: 20px; }
    .b-orbit-feature { padding: 16px; gap: 12px; }
}

/* ========== Footer（260515 削除：site-chrome-footer.css に SSOT 統一・他 LP との見た目整合のため）==========
   旧定義は site-chrome.js 経由の動的注入と競合してレイアウトが分岐していたため削除。
   現在の footer は https://growthfix.jp/gravity/site-chrome-footer.css が SSOT。
   ソースは 06_開発/site-chrome/site-chrome-footer.css。 */

/* ========== Responsive ========== */
@media (max-width: 900px) {
    .b-header-inner { height: auto; padding: 16px 0; gap: 16px; flex-wrap: wrap; }
    .b-header-nav { width: 100%; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
    .b-header .b-btn { width: 100%; text-align: center; }
    .b-hero { padding: 100px 0 120px; }
    .b-hero h1 { font-size: 38px; }
    .b-hero-lead { font-size: 16px; line-height: 2; }

    .b-plan-card { padding: 36px 28px; }
    .b-cred { flex-direction: column; align-items: center; text-align: center; gap: 40px; }
    .b-cred-left { width: 100%; align-items: center; }
    .b-cred-career { text-align: left; width: 100%; }
    .b-cred-stats { justify-content: center; }

    .b-gap-item { padding: 20px 24px; }
    .b-gap-but { padding-left: 24px; }
    .b-gap-conclusion { font-size: 18px; padding: 32px; }

    .b-scope-block { padding: 32px 24px; }

}
@media (max-width: 600px) {
    .container { padding: 0 20px; }
    .b-section { padding: 80px 0; }
    .b-hero { padding: 80px 0 100px; }
    .b-hero h1 { font-size: 30px; line-height: 1.4; }
    .b-hero-lead { font-size: 15px; line-height: 1.9; margin-bottom: 40px; }

    .b-section-title { font-size: 26px; }
    .b-problem-copy, .b-solution-copy, .b-trial-copy { font-size: 16px; line-height: 1.9; }
    .b-faq-item .b-answer { font-size: 15px; }

    .b-steps { flex-direction: column; align-items: stretch; gap: 12px; }
    .b-steps .b-step { justify-content: center; padding: 14px 20px; }

    .b-hero .b-cta-single { width: 100%; justify-content: center; padding: 18px 24px; font-size: 16px; }

    .b-form-card { padding: 32px 24px; border-radius: 20px; }
    .b-form-card h2 { font-size: 22px; }

    .b-quant-box { padding: 32px 24px; }
    .b-quant-row { flex-direction: column; gap: 8px; align-items: flex-start; }
    .b-quant-row strong { min-width: auto; }

    .b-plan-card { padding: 32px 24px; }
    .b-plan-price { font-size: 28px; }
    .b-gap-conclusion { font-size: 17px; padding: 24px; }

    .b-solution-closing { font-size: 15px; padding: 20px 24px; }
}

/* --- Hamburger button --- */
.b-hamburger {
    display: none; border: none; background: none; cursor: pointer;
    width: 32px; height: 24px; position: relative; z-index: 1001;
    padding: 0; flex-shrink: 0;
}
.b-hamburger span {
    display: block; width: 100%; height: 2px; background: var(--b-primary);
    border-radius: 2px; position: absolute; left: 0;
    transition: top 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}
.b-hamburger span:nth-child(1) { top: 0; }
.b-hamburger span:nth-child(2) { top: 11px; }
.b-hamburger span:nth-child(3) { top: 22px; }
.b-hamburger.is-open span:nth-child(1) { top: 11px; transform: rotate(45deg); }
.b-hamburger.is-open span:nth-child(2) { opacity: 0; }
.b-hamburger.is-open span:nth-child(3) { top: 11px; transform: rotate(-45deg); }

/* --- Mobile: compact header + bottom CTA bar --- */
@media (max-width: 900px) {
    .b-hamburger { display: block; }
    .b-header-nav {
        display: none; position: absolute; top: 56px; left: 0; right: 0;
        background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
        flex-direction: column; padding: 16px 24px 24px; gap: 0;
        box-shadow: 0 8px 24px rgba(0,0,0,0.1); border-bottom: 1px solid var(--b-border);
    }
    .b-header-nav.is-open { display: flex; }
    .b-header-nav .b-nav-link { display: block; padding: 14px 0; border-bottom: 1px solid rgba(0,0,0,0.05); font-size: 16px; }
    .b-header-nav .b-nav-link:last-of-type { border-bottom: none; }
    .b-header-nav .b-btn { display: block; text-align: center; margin-top: 12px; }
    .b-header-inner { height: 56px; padding: 0; flex-wrap: nowrap; }
    .b-mobile-cta {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        padding: 12px 20px;
        box-shadow: 0 -2px 12px rgba(0,0,0,0.1);
        justify-content: center;
    }
    .b-mobile-cta a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        max-width: 400px;
        padding: 14px 24px;
        background: var(--b-accent);
        color: #fff;
        font-weight: 700;
        font-size: 15px;
        border-radius: 50px;
        text-decoration: none;
        box-shadow: 0 4px 12px rgba(30, 64, 175, 0.25);
    }
    /* Prevent content from being hidden behind bottom bar */
    body { padding-bottom: 72px; }
}
@media (min-width: 901px) {
    .b-mobile-cta { display: none; }
}

/* ========== Skip link ========== */
/* ========== Focus-visible for keyboard navigation ========== */
.b-cta-single:focus-visible,
.b-mid-cta:focus-visible,
.b-btn-roadmap:focus-visible,
.b-btn-submit:focus-visible,
.b-trial-branch-link:focus-visible,
.b-roadmap-modal-sample-link:focus-visible {
    outline: 3px solid var(--b-accent);
    outline-offset: 3px;
}

.b-skip-link {
    position: absolute; top: -40px; left: 16px; background: var(--b-text); color: #fff;
    padding: 8px 12px; border-radius: 4px; z-index: 10000; font-size: 14px;
}
.b-skip-link:focus { top: 16px; }

/* ========== Scroll reveal ========== */
.reveal {
    opacity: 0; transform: translateY(24px);
    transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}

/* ==========================================
   Missing Style Fix Block (260414追加)
   HTMLにクラスはあったがCSSがなく左寄せになっていた要素を修正
   ========================================== */

/* Hero lead の明示的 text-align */
.b-hero-lead { text-align: center; }

/* Problem: リフレームボックス（「こう思っていませんか？」ブロック） */
.b-reframe-box {
    max-width: 760px; margin: 40px auto; padding: 32px 40px;
    background: var(--b-white); border-radius: var(--b-radius-lg);
    border: 1px solid var(--b-border); box-shadow: var(--b-shadow-sm);
}
.b-reframe-lead {
    text-align: center; font-size: 16px; font-weight: 700;
    color: var(--b-accent); margin-bottom: 24px; letter-spacing: 0.02em;
}
.b-reframe-items { display: flex; flex-direction: column; gap: 20px; }
.b-reframe-item {
    padding: 20px 0; border-bottom: 1px solid var(--b-border);
}
.b-reframe-item:last-child { border-bottom: none; padding-bottom: 0; }
.b-reframe-before {
    font-weight: 700; color: var(--b-text); font-size: 16px;
    margin-bottom: 8px; line-height: 1.7;
}
.b-reframe-after {
    color: var(--b-text-light); font-size: 14px; line-height: 1.9;
}
.b-reframe-after strong { color: var(--b-accent); font-weight: 700; }

/* Problem/Profile/Orbit: セクション末尾のリンク */
.b-section-link {
    text-align: center; margin-top: 40px;
    font-size: 15px; font-weight: 700;
}
.b-section-link a {
    color: var(--b-accent); text-decoration: none;
    border-bottom: 1px solid var(--b-accent); padding-bottom: 2px;
    transition: color 0.2s;
}
.b-section-link a:hover { color: var(--b-accent-hover); }

/* Solution: "なぜ話すだけで"の前振り段落 */
.b-solution-why {
    max-width: 760px; margin: 0 auto 40px;
    font-size: 16px; line-height: 2; text-align: center;
    color: var(--b-secondary);
}
.b-solution-why p { margin-bottom: 16px; }
.b-solution-why strong { color: var(--b-primary); font-weight: 800; }

/* Solution: 6ヶ月後に手に入るもの */
.b-solution-after {
    max-width: 760px; margin: 40px auto 0;
    padding: 32px 40px;
    background: var(--b-accent-light); border-radius: var(--b-radius-lg);
}
.b-solution-after-lead {
    text-align: center; font-size: 15px; font-weight: 700;
    color: var(--b-accent); margin-bottom: 20px; letter-spacing: 0.02em;
}
.b-solution-after-items { display: flex; flex-direction: column; gap: 12px; }
.b-solution-after-item {
    font-size: 15px; line-height: 1.8; color: var(--b-text);
    padding-left: 28px; position: relative;
}
.b-solution-after-item::before {
    content: '✓'; position: absolute; left: 0; top: 0;
    color: var(--b-accent); font-weight: 900;
}

/* Gap/Service: 中間CTAコンテナを中央寄せ */
.b-gap-bridge, .b-cost-cta {
    text-align: center; margin-top: 32px;
}
.b-mid-cta-outline {
    background: transparent; color: var(--b-accent);
    border: 2px solid var(--b-accent); box-shadow: none;
}
.b-mid-cta-outline:hover {
    background: var(--b-accent-light);
}

/* Service: コスト比較の前振り */
.b-cost-bridge {
    text-align: center; max-width: 640px; margin: 40px auto 24px;
    font-size: 16px; font-weight: 600; color: var(--b-text-light);
    line-height: 1.9;
}

/* Service Matrix セクション: セクション lead */
.b-section-lead {
    max-width: 680px; margin: 0 auto 40px;
    font-size: 15px; line-height: 1.9; color: var(--b-text-light);
}

/* Trial: 体験セッションの3つの価値 */
.b-trial-value {
    display: flex; flex-direction: column; gap: 16px;
    max-width: 720px; margin: 32px auto 40px;
}
.b-trial-value-item {
    padding: 20px 24px; background: var(--b-white);
    border-radius: var(--b-radius); border: 1px solid var(--b-border);
    font-size: 15px; line-height: 1.8; color: var(--b-text);
}
.b-trial-value-item strong { color: var(--b-accent); font-weight: 800; }

/* Trial: STEPバッジの下のノート */
.b-steps-note {
    text-align: center; font-size: 13px; color: var(--b-text-light);
    margin-top: 16px; margin-bottom: 40px;
}

/* FAQ: 末尾クロージング */
.b-faq-closing {
    text-align: center; max-width: 680px; margin: 48px auto 0;
    padding: 32px 40px; background: var(--b-accent-light);
    border-radius: var(--b-radius-lg);
}
.b-faq-closing p {
    font-size: 15px; line-height: 2; color: var(--b-text);
    margin-bottom: 20px;
}
.b-faq-closing p:last-child { margin-bottom: 0; }
.b-faq-closing .b-mid-cta { margin-top: 8px; }

/* Profile: 重要インサイト */
.b-cred-insight {
    padding: 20px 24px; background: var(--b-accent-light);
    border-left: 3px solid var(--b-accent);
    border-radius: 0 var(--b-radius) var(--b-radius) 0;
    margin-bottom: 24px;
}
.b-cred-insight p {
    font-size: 15px; line-height: 1.9; color: var(--b-text);
    margin: 0; font-weight: 500;
}
.b-cred-insight strong { color: var(--b-accent); font-weight: 800; }

/* モバイル調整 */
@media (max-width: 640px) {
    .b-reframe-box, .b-solution-after, .b-faq-closing {
        padding: 24px 20px;
    }
    .b-trial-value-item { padding: 16px 18px; font-size: 14px; }
}

/* ========== Series Grid (5サービス一覧カード) ========== */
.b-series-lead {
    max-width: 640px;
    margin: 0 auto 40px;
    font-size: 15px;
    line-height: 1.9;
    color: #475569;
}
.b-series-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 48px;
}
.b-series-card {
    display: block;
    padding: 28px 24px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s, box-shadow 0.2s;
}
@media (hover: hover) {
    .b-series-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 24px rgba(10, 15, 30, 0.08);
    }
}
.b-series-card-tag {
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}
.b-series-card-title {
    font-size: 20px;
    font-weight: 800;
    color: #1b1b1b;
    margin-bottom: 8px;
}
.b-series-card-desc {
    font-size: 14px;
    color: #475569;
    line-height: 1.8;
    margin-bottom: 12px;
}
.b-series-card-meta {
    font-size: 13px;
    color: #1b1b1b;
    font-weight: 700;
}

/* ========== Gravity Map (4象限マトリクス) ========== */
.b-gravity-map-section {
    padding: 72px 20px 80px;
    background: linear-gradient(180deg, #f8f9fb 0%, #eef0f5 100%);
}
.b-gravity-map-intro {
    max-width: 720px;
    margin: 0 auto 36px;
    text-align: center;
    font-size: 14px;
    line-height: 1.9;
    color: #475569;
}
.b-gravity-map-grid {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 64px 1fr 1fr;
    grid-template-rows: 40px 1fr 1fr;
    gap: 12px;
}
.b-gravity-map-axis-col {
    grid-row: 1;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: #475569;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
    letter-spacing: 0.04em;
}
.b-gravity-map-axis-col-left { grid-column: 2; }
.b-gravity-map-axis-col-right { grid-column: 3; }
.b-gravity-map-row-label {
    grid-column: 1;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: #475569;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
    writing-mode: vertical-rl;
    padding: 16px 4px;
    letter-spacing: 0.04em;
}
.b-gravity-map-row-label-top { grid-row: 2; }
.b-gravity-map-row-label-bottom { grid-row: 3; }
.b-gravity-map-cell {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px 22px;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex; flex-direction: column;
    min-height: 170px;
}
.b-gravity-map-cell-q3 { grid-column: 2; grid-row: 2; }
.b-gravity-map-cell-q4 { grid-column: 3; grid-row: 2; }
.b-gravity-map-cell-q1 { grid-column: 2; grid-row: 3; }
.b-gravity-map-cell-q2 { grid-column: 3; grid-row: 3; }
.b-gravity-map-cell-num {
    font-size: 22px;
    font-weight: 900;
    color: #94a3b8;
    margin-bottom: 6px;
    letter-spacing: 0.02em;
}
.b-gravity-map-cell-name {
    font-size: 18px;
    font-weight: 800;
    color: #1b1b1b;
    margin-bottom: 6px;
}
.b-gravity-map-cell-desc {
    font-size: 13px;
    color: #475569;
    line-height: 1.8;
    margin-bottom: 12px;
    flex-grow: 1;
}
.b-gravity-map-cell-service {
    align-self: flex-start;
    font-size: 12px;
    font-weight: 700;
    color: var(--b-accent);
    background: var(--b-accent-light);
    padding: 4px 12px;
    border-radius: 50px;
    letter-spacing: 0.02em;
}
.b-gravity-map-cell-hl {
    background: #0a0f1e;
    border-color: #0a0f1e;
    box-shadow: 0 16px 36px rgba(10, 15, 30, 0.22);
}
.b-gravity-map-cell-hl .b-gravity-map-cell-num { color: #b8a88a; }
.b-gravity-map-cell-hl .b-gravity-map-cell-name { color: #fff; }
.b-gravity-map-cell-hl .b-gravity-map-cell-desc { color: #cbd5e1; }
.b-gravity-map-cell-hl .b-gravity-map-cell-service {
    background: #b8a88a;
    color: #0a0f1e;
}
.b-gravity-map-cell-hl-quote {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(184, 168, 138, 0.35);
    font-size: 12px;
    font-style: italic;
    color: #b8a88a;
    letter-spacing: 0.02em;
    line-height: 1.6;
}
@media (max-width: 640px) {
    .b-gravity-map-grid {
        grid-template-columns: 44px 1fr 1fr;
        gap: 8px;
    }
    .b-gravity-map-axis-col { font-size: 11px; }
    .b-gravity-map-row-label { font-size: 11px; padding: 10px 2px; }
    .b-gravity-map-cell {
        padding: 16px 14px;
        min-height: 150px;
    }
    .b-gravity-map-cell-num { font-size: 18px; }
    .b-gravity-map-cell-name { font-size: 15px; }
    .b-gravity-map-cell-desc { font-size: 12px; }
    .b-gravity-map-cell-service { font-size: 11px; }
    .b-gravity-map-cell-hl-quote { font-size: 11px; }
}

/* ============================================================
   260517 堀田フレーム最適化（インラインスタイル → class 化）
   - Hero CTA 1 つに集約
   - Chapter 1 思想層を class 化
   - WhitePaper CTA セクションを class 化
   - SOLUTION 内インライン抽出
   - TRUST セクション統合（プロフィール + 学術）
   ============================================================ */

/* Header CTA */
.b-header-btn { font-weight: 700; }

/* Hero CTA single（旧 cta-group） */
.b-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--b-accent);
    letter-spacing: 0.12em;
    margin-bottom: 16px;
}
.b-hero-eyebrow::before,
.b-hero-eyebrow::after {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--b-accent);
}
.b-hero-cta-single { display: flex; gap: 12px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }
.b-hero-cta-single .b-cta-primary {
    padding: 18px 40px;
    font-size: 15px;
    border-radius: 50px;
    background: var(--b-accent);
    color: white;
    border: none;
}
.b-hero-cta-single .b-cta-secondary {
    padding: 18px 28px;
    font-size: 14px;
    border-radius: 50px;
    background: transparent;
    color: var(--b-text);
    border: 1px solid var(--b-border);
}

/* Section alt 背景 */
.b-section-alt { background: #fafaf8; border-top: 1px solid #e5e7eb; }

/* PROBLEM タイトル幅制限 */
.b-problem-title { max-width: 28em; margin-left: auto; margin-right: auto; }

/* Chapter 1 思想層（class 化） */
.b-chapter-narrow { max-width: 720px; margin: 0 auto; }
.b-chapter-intro-large { font-size: clamp(22px, 3.5vw, 28px); font-weight: 900; line-height: 1.6; letter-spacing: 0.04em; color: #0f172a; text-align: center; margin-bottom: 32px; }
.b-chapter-h2-center { font-size: 32px; font-weight: 900; line-height: 1.6; letter-spacing: 0.02em; color: #0f172a; text-align: center; margin-bottom: 40px; }
.b-chapter-body { font-size: 16px; line-height: 2.2; color: #1e293b; }
.b-chapter-body p { margin-bottom: 28px; }
.b-chapter-body p:last-child { margin-bottom: 0; }
.b-chapter-highlight { font-weight: 700; background: linear-gradient(transparent 70%, #fef3c7 70%); padding: 4px 0; }
.b-chapter-highlight--last { margin-bottom: 0; }

@media (max-width: 720px) {
    .b-chapter-h2-center { font-size: 24px; margin-bottom: 28px; }
    .b-chapter-intro-large { font-size: 20px; margin-bottom: 24px; }
    .b-chapter-body { font-size: 15px; line-height: 2; }
    .b-chapter-body p { margin-bottom: 22px; }
}

/* WhitePaper CTA セクション（class 化） */
.b-wp-cta-section { padding: 80px 0; background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); color: #fff; text-align: center; }
.b-wp-cta-label { font-size: 13px; letter-spacing: 0.2em; color: #94a3b8; margin-bottom: 16px; font-weight: 700; }
.b-wp-cta-h2 { font-size: 28px; font-weight: 900; line-height: 1.6; letter-spacing: 0.02em; margin-bottom: 24px; }
.b-wp-cta-accent { color: #fbbf24; }
.b-wp-cta-lead { font-size: 15px; line-height: 1.9; color: #cbd5e1; margin-bottom: 32px; }
.b-wp-cta-lead strong { color: #fff; }
.b-wp-cta-btn { display: inline-block; background: #fbbf24; color: #0f172a; padding: 18px 40px; text-decoration: none; font-size: 15px; letter-spacing: 0.04em; font-weight: 800; border-radius: 4px; transition: transform 0.2s ease, opacity 0.2s ease; }
.b-wp-cta-btn:hover { transform: translateY(-2px); opacity: 0.95; }
.b-wp-cta-note { font-size: 12px; color: #64748b; margin-top: 20px; }

@media (max-width: 720px) {
    .b-wp-cta-section { padding: 56px 0; }
    .b-wp-cta-h2 { font-size: 22px; }
    .b-wp-cta-btn { padding: 14px 28px; font-size: 14px; }
}

/* SOLUTION セクション内（インライン抽出） */
.b-solution-card-wrap { max-width: 780px; margin: 0 auto; }
.b-series-card-desc-strong { display: block; font-weight: 700; color: #0f172a; margin-bottom: 6px; }
.b-series-card-desc-sub { display: block; font-size: 13px; color: #475569; }

/* PROCESS 6 ステップ（折りたたみ details/summary） */
.b-process-6step { max-width: 780px; margin: 32px auto 0; padding: 0; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; }
.b-process-6step[open] { padding: 0 0 24px; }
.b-process-6step-summary { padding: 18px 28px; font-size: 14px; letter-spacing: 0.05em; color: #0f172a; font-weight: 700; cursor: pointer; list-style: none; position: relative; text-align: center; }
.b-process-6step-summary::-webkit-details-marker { display: none; }
.b-process-6step-summary::after { content: "+"; position: absolute; right: 22px; top: 14px; font-size: 22px; color: #1e40af; font-weight: 300; }
.b-process-6step[open] .b-process-6step-summary::after { content: "−"; }
.b-process-6step-ol { list-style: none; padding: 0 36px; margin: 0; font-size: 14px; line-height: 2.1; color: #1e293b; }
.b-process-6step-ol li { padding: 6px 0; border-bottom: 1px solid #f1f5f9; }
.b-process-6step-ol li:last-child { border-bottom: none; }
.b-process-6step-ol li strong { color: #0f172a; }

@media (max-width: 720px) {
    .b-process-6step-ol { padding: 0 22px; font-size: 13px; }
    .b-process-6step-summary { padding: 14px 22px; font-size: 13px; }
}

/* TRUST セクション（プロフィール圧縮 + 学術圧縮） */
.b-trust-profile-link { margin-top: 16px; font-size: 13.5px; color: #475569; }
.b-link-blue { color: #1e40af; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.b-link-blue:hover { color: #1e3a8a; }

.b-trust-academic { max-width: 780px; margin: 36px auto 0; padding: 28px 32px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; }
.b-trust-academic-label { font-size: 13px; letter-spacing: 0.15em; color: #1e40af; margin: 0 0 14px; font-weight: 700; }
.b-trust-academic-body { font-size: 14px; line-height: 1.95; color: #334155; margin: 0 0 14px; }
.b-trust-academic-body strong { color: #0f172a; }
.b-trust-academic-link { font-size: 13.5px; margin: 0; }

@media (max-width: 720px) {
    .b-trust-academic { padding: 22px 20px; }
    .b-trust-academic-body { font-size: 13.5px; }
}

/* ============================================================
   260517 案 B 折衷案 + WP コンパクト化 + プロフィール充実版
   ============================================================ */

/* 思想層 Chapter 1 末尾の WP 中間導線リンク（堀田 #13） */
.b-chapter-wp-link { margin-top: 32px; padding-top: 20px; border-top: 1px dashed #cbd5e1; text-align: center; font-size: 14px; color: #475569; line-height: 1.8; }
.b-chapter-wp-link a { font-weight: 700; }

/* Bio ハイライト（インライン抽出） */
.b-bio-highlight { background: linear-gradient(transparent 70%, #fef3c7 70%); padding: 4px 2px; }

/* PROFILE 内 学術 6 系列ブロック（旧 trust-academic を PROFILE 内に併設） */
.b-cred-academic { max-width: 840px; margin: 36px auto 0; padding: 28px 36px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; }
.b-cred-academic-label { font-size: 13px; letter-spacing: 0.15em; color: #1e40af; margin: 0 0 16px; font-weight: 700; }
.b-cred-academic-intro { font-size: 14px; line-height: 1.95; color: #475569; margin: 0 0 16px; }
.b-cred-academic-intro strong { color: #0f172a; }
.b-cred-academic-list { list-style: disc; padding-left: 22px; margin: 0 0 16px; font-size: 14px; line-height: 2; color: #475569; }
.b-cred-academic-list strong { color: #0f172a; }
.b-cred-academic-link { font-size: 13.5px; margin: 0; text-align: center; }

@media (max-width: 720px) {
    .b-cred-academic { padding: 22px 20px; }
    .b-cred-academic-intro, .b-cred-academic-list { font-size: 13.5px; }
    .b-chapter-wp-link { font-size: 13px; padding-top: 16px; margin-top: 24px; }
}

/* ============================================================
   260517 天プロフレーム改善（#1 #2 #3 #4 採用）
   ============================================================ */

/* #2: 翻訳メカニズム（内的 → 外的 橋渡し） */
.b-bridge-section { padding: 56px 0; background: #ffffff; border-top: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; }
.b-bridge-label { display: inline-block; font-size: 13px; letter-spacing: 0.15em; color: #1e40af; font-weight: 700; margin-bottom: 12px; text-align: center; width: 100%; }
.b-bridge-h2 { font-size: clamp(20px, 3.2vw, 28px); font-weight: 900; line-height: 1.5; color: #0f172a; text-align: center; margin-bottom: 18px; }
.b-bridge-intro { font-size: 14.5px; line-height: 1.9; color: #475569; text-align: center; max-width: 620px; margin: 0 auto 36px; }
.b-bridge-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0 auto; max-width: 720px; }
.b-bridge-item { padding: 22px 24px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; }
.b-bridge-pair { display: grid; grid-template-columns: 1fr 28px 1fr; gap: 10px; align-items: center; margin-bottom: 12px; }
.b-bridge-internal { padding: 10px 14px; background: #f1f5f9; border-left: 3px solid #64748b; border-radius: 6px; font-size: 14px; font-weight: 700; color: #0f172a; text-align: center; }
.b-bridge-external { padding: 10px 14px; background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border-left: 3px solid #b8a88a; border-radius: 6px; font-size: 14px; font-weight: 700; color: #78350f; text-align: center; }
.b-bridge-arrow { font-size: 18px; font-weight: 700; color: #0f172a; text-align: center; }
.b-bridge-desc { font-size: 13.5px; line-height: 1.8; color: #475569; margin: 0; }

/* Problem「言いにくい構造」ブロック class 化（260524 A5・黄色 hardcode 排除 + Blue 1 色統一） */
.b-gap-deeper {
    margin-top: 32px;
    padding: 24px 28px;
    background: var(--b-accent-light);
    border-left: 4px solid var(--b-accent);
    border-radius: 0 8px 8px 0;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.b-gap-deeper-label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--b-accent);
    margin: 0 0 16px;
}
.b-gap-deeper-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.b-gap-deeper-list li {
    font-size: 14.5px;
    line-height: 1.85;
    color: var(--b-text);
}

/* PROFILE 大学バッジ logotype 化（260524 A3・「Trusted by」風軽量化） */
.b-cred-academic-universities {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: 14px 0 24px;
    align-items: center;
}
.b-cred-academic-university {
    font-size: 11px;
    font-weight: 600;
    color: var(--b-text-light);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* 翻訳メカニズム 3 経路リスト（260524 A2・inline 解体） */
.b-bridge-points {
    list-style: none;
    margin-top: 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.b-bridge-point {
    font-size: 14px;
    color: var(--b-text);
    line-height: 1.8;
}
.b-bridge-point strong { color: var(--b-accent); }
.b-bridge-point--featured {
    padding: 12px 16px;
    background: var(--b-accent-light);
    border-left: 3px solid var(--b-accent);
    border-radius: 0 6px 6px 0;
}
.b-bridge-point-caption {
    display: inline-block;
    margin-top: 8px;
    font-size: 12px;
    color: var(--b-text-light);
    font-style: normal;
}

@media (max-width: 720px) {
    .b-bridge-section { padding: 44px 0; }
    .b-bridge-h2 { font-size: 18px; }
    .b-bridge-intro { font-size: 13.5px; }
    .b-bridge-pair { grid-template-columns: 1fr; gap: 6px; }
    .b-bridge-arrow { transform: rotate(90deg); padding: 4px 0; }
    .b-bridge-internal, .b-bridge-external { font-size: 13.5px; }
    .b-bridge-item { padding: 18px 20px; }
}

/* #3: リスク言及（逆説提示） */
.b-risk-callout { max-width: 720px; margin: 32px auto 0; padding: 24px 28px; background: #fef2f2; border-left: 4px solid #dc2626; border-radius: 0 8px 8px 0; }
.b-risk-callout-label { font-size: 13px; letter-spacing: 0.12em; color: #991b1b; font-weight: 700; margin: 0 0 14px; }
.b-risk-callout-list { list-style: none; padding: 0; margin: 0; font-size: 14px; line-height: 1.95; color: #334155; }
.b-risk-callout-list li { padding-left: 22px; position: relative; margin-bottom: 8px; }
.b-risk-callout-list li:last-child { margin-bottom: 0; }
.b-risk-callout-list li::before { content: "⚠"; position: absolute; left: 0; top: 0; color: #dc2626; font-weight: 700; }

@media (max-width: 720px) {
    .b-risk-callout { padding: 20px 22px; margin-top: 24px; }
    .b-risk-callout-list { font-size: 13.5px; }
}

/* #4: Before → After ストーリー（Solution 3 軸カード内・白背景対応） */
.b-program-axis-ba { display: grid; grid-template-columns: 1fr 24px 1fr; gap: 8px; align-items: center; margin: 8px 0 12px; padding: 10px 12px; background: #f8fafc; border-radius: 6px; border: 1px solid #e2e8f0; }
.b-program-axis-ba-before { font-size: 12.5px; color: #94a3b8; font-weight: 500; text-align: center; line-height: 1.5; text-decoration: line-through; text-decoration-color: #cbd5e1; }
.b-program-axis-ba-after { font-size: 13px; color: #1e40af; font-weight: 800; text-align: center; line-height: 1.5; }
.b-program-axis-ba-arrow { font-size: 16px; font-weight: 700; color: #1e40af; text-align: center; }

@media (max-width: 720px) {
    .b-program-axis-ba { grid-template-columns: 1fr; gap: 4px; padding: 10px 14px; }
    .b-program-axis-ba-arrow { transform: rotate(90deg); padding: 2px 0; }
    .b-program-axis-ba-before, .b-program-axis-ba-after { font-size: 12px; }
}

/* #1: 自社 AI 武装実証ブロック（PROFILE 内） */
.b-cred-proof { max-width: 840px; margin: 36px auto 0; padding: 32px 36px; background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); color: #fff; border-radius: 10px; }
.b-cred-proof-label { font-size: 13px; letter-spacing: 0.15em; color: #ffffff; font-weight: 700; margin: 0 0 12px; }
.b-cred-proof-lead { font-size: 14.5px; line-height: 1.85; color: #cbd5e1; margin: 0 0 24px; }
.b-cred-proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.b-cred-proof-item { padding: 20px 22px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; }
.b-cred-proof-item strong { display: block; font-size: 19px; font-weight: 900; color: #ffffff; letter-spacing: 0.02em; margin-bottom: 8px; line-height: 1.3; }
.b-cred-proof-item span { display: block; font-size: 12.5px; line-height: 1.75; color: #cbd5e1; }

@media (max-width: 720px) {
    .b-cred-proof { padding: 24px 22px; }
    .b-cred-proof-grid { grid-template-columns: 1fr; gap: 12px; }
    .b-cred-proof-item { padding: 16px 18px; }
    .b-cred-proof-item strong { font-size: 17px; }
}

/* ========== A5: セクション padding 強弱・260524 デザイン批判レビュー対応 ========== */
.b-section--compact { padding: 64px 0; }
.b-section--featured { padding: 160px 0; background: linear-gradient(180deg, transparent 0%, var(--b-accent-light) 100%); }
@media (max-width: 600px) {
    .b-section--compact { padding: 48px 0; }
    .b-section--featured { padding: 100px 0; }
}

/* ========== A3: H1 prefix（事業を伸ばす、）専用・260524 モバイル可読性改善 ========== */
.b-hero-h1-prefix {
    display: block;
    font-size: 0.7em;
    color: var(--b-text);
    font-weight: 700;
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}
@media (max-width: 600px) {
    .b-hero-h1-prefix {
        font-size: 18px;
        margin-bottom: 4px;
        letter-spacing: 0;
    }
}

/* ========== 3兄弟動詞ラベル（260525 Gravity top SECTION 4 用） ========== */
.b-series-verb-label {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.01em;
    margin: 0 0 12px;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
    flex-wrap: nowrap;
    white-space: nowrap;
}
.b-series-verb-label em {
    font-style: normal;
    font-weight: 900;
}
.b-series-verb-label--blue em { color: var(--b-accent); }
.b-series-verb-label--dark em { color: var(--b-primary); }
.b-series-verb-step {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    flex-shrink: 0;
}
.b-series-verb-label--blue .b-series-verb-step { color: var(--b-accent); }
.b-series-verb-label--dark .b-series-verb-step { color: var(--b-text-light); }

@media (max-width: 600px) {
    .b-series-verb-label { font-size: 18px; }
}

/* ========== b-pg4-related-grid：Program LP 3兄弟並列（260525 新規） ========== */
.b-pg4-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
}
.b-pg4-related-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 28px 24px;
    background: var(--b-white);
    border: 1px solid var(--b-border);
    border-radius: var(--b-radius);
    box-shadow: var(--b-shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    position: relative;
}
@media (hover: hover) {
    .b-pg4-related-card:not(.b-pg4-related-card--current):hover {
        transform: translateY(-3px);
        box-shadow: var(--b-shadow);
    }
}
.b-pg4-related-card--current {
    border: 2px solid var(--b-accent);
    background: var(--b-accent-light);
    cursor: default;
}
.b-pg4-related-verb {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.01em;
    margin: 0;
    color: var(--b-primary);
}
.b-pg4-related-verb em {
    font-style: normal;
    font-weight: 900;
    color: var(--b-accent);
}
.b-pg4-related-name {
    font-size: 15px;
    font-weight: 800;
    color: var(--b-primary);
    margin: 0;
    letter-spacing: 0.01em;
}
.b-pg4-related-desc {
    font-size: 13px;
    line-height: 1.75;
    color: var(--b-text-light);
    margin: 0;
    flex-grow: 1;
}
.b-pg4-related-current-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--b-accent);
    background: rgba(30, 64, 175, 0.15);
    padding: 4px 12px;
    border-radius: 50px;
    border: 1px solid rgba(30, 64, 175, 0.2);
    align-self: flex-start;
    margin-top: 4px;
}

@media (max-width: 820px) {
    .b-pg4-related-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }
}
@media (max-width: 600px) {
    .b-pg4-related-verb { font-size: 18px; }
    .b-pg4-related-card { padding: 22px 20px; }
}