/* ===================================================
   index-light.css — ライトパターン オーバーライド
   白ベースデザイン。index.css の後に読み込む。
   =================================================== */

/* ===== カラー変数 ===== */
:root {
  --primary:      #1565c0;
  --primary-dark: #0d47a1;
  --bg-light:     #eef5ff;
  --bg-gray:      #f4f8ff;
  --border:       #c5d9f5;
}

/* ===== ヘッダー上段: ネイビー → ライトブルーグレー ===== */
.header-top {
  background: #e8f0fb;
  color: #333;
}
.header-top a { color: #555; }
.header-top a:hover { color: var(--primary); }

/* ナビ下線 */
.header-nav-row { border-top: 2px solid var(--primary); }
.global-nav a:hover { color: var(--primary); border-bottom-color: var(--primary); }
.hamburger span { background: var(--primary); }
.drawer-tel { color: var(--primary); }
.drawer-nav .drawer-cta a.btn-primary { background: var(--primary); }

/* ===== ヒーロー: スプリットレイアウト（左：白 / 右：写真） ===== */
.hero {
  background: #eef5ff;
  min-height: 580px;
}

/* 写真を右 42% から表示 */
.hero-bg {
  left: 42%;
  background-position: left center;
}

/* 左から白→透明のグラデーションで写真の上に白エリアを作る */
.hero-overlay {
  background: linear-gradient(
    to right,
    #eef5ff 0%,
    #eef5ff 38%,
    rgba(238, 245, 255, 0.85) 50%,
    rgba(238, 245, 255, 0.15) 75%,
    transparent 100%
  );
}

/* テキストを白 → 濃紺・黒に切り替え */
.hero-content { color: #1a1a1a; }

.hero-label {
  background: var(--primary);
  text-shadow: none;
}

.hero h1 {
  color: #1a1a1a;
  text-shadow: none;
}
.hero h1 em { color: var(--primary); }

.hero-lead {
  color: #444;
  opacity: 1;
  text-shadow: none;
}

/* バッジ: 黒半透明 → 白カード風 */
.hero-badge-item {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border);
  color: #1a1a1a;
  text-shadow: none;
  box-shadow: 0 2px 8px rgba(21, 101, 192, 0.12);
}
.hero-badge-item strong {
  color: var(--primary);
}

/* ヒーロー CTAボタン */
.hero-cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 36px;
}
.hero-cta-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  font-size: 1.7rem;
  font-weight: 700;
  padding: 16px 36px;
  border-radius: 4px;
  text-shadow: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  transition: background 0.25s ease, transform 0.25s ease;
  white-space: nowrap;
}
.hero-cta-btn-primary:hover {
  background: #b8860b;
  transform: translateY(-2px);
}
/* SPでの glass → solid 白アウトライン */
.hero-cta-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--primary);
  font-size: 1.6rem;
  font-weight: 700;
  padding: 16px 32px;
  border-radius: 4px;
  border: 2px solid var(--primary);
  text-shadow: none;
  transition: background 0.25s ease, color 0.25s ease;
  white-space: nowrap;
}
.hero-cta-btn-secondary:hover {
  background: var(--primary);
  color: #fff;
}

/* ===== KPIバー: ネイビー → 白 ===== */
.kpi-bar {
  background: #fff;
  border-top: 4px solid var(--primary);
  border-bottom: 2px solid var(--border);
}
.kpi-item {
  color: #1a1a1a;
  border-right: 1px solid var(--border);
}
.kpi-item:last-child { border-right: none; }
.kpi-num { color: var(--primary); }
.kpi-label { color: #222; }
.kpi-note { color: var(--text-muted); opacity: 1; }

/* ===== セクション交互背景 ===== */
.section-alt { background: var(--bg-light); }

/* ===== 比較テーブル ===== */
.comparison-table thead th { background: var(--primary); }
.comparison-table thead th[style*="background:#1a3a5c"] {
  background: var(--primary-dark) !important;
}

/* ===== フロー ===== */
.flow-step-num {
  background: var(--primary);
  box-shadow: 0 4px 16px rgba(21, 101, 192, 0.25);
}
.flow-steps::before {
  background: linear-gradient(90deg, var(--accent) 0%, var(--primary) 100%);
}
.flow-step-title { color: var(--primary); }

/* ===== スタッフセクション: section-alt (bg-light) → 白 ===== */
.staff-section { background: #fff; }
.staff-name { color: var(--primary); }
.staff-badge { background: var(--primary); }

/* ===== 料金 ===== */
.price-card.featured .price-card-head { background: var(--primary); }
.price-table th { background: var(--primary); }
.price-divider { color: var(--primary); border-left-color: var(--accent); }
.price-card-price { color: var(--primary); }

/* ===== FAQ ===== */
.faq-q-mark { background: var(--primary); }
.faq-arrow { color: var(--primary); }

/* ===== レビュー ===== */
.reviews-rating {
  background: var(--bg-light);
  border: 1px solid var(--border);
}
.reviews-rating .rating-num { color: var(--primary); }
.slider-btn { border-color: var(--primary); color: var(--primary); }
.slider-btn:hover:not(:disabled) { background: var(--primary); color: #fff; }
.slider-dot.active { background: var(--primary); }

/* ===== メインCTA: ダークグラデーション → 明るいブルーグラデーション ===== */
.main-cta {
  background: linear-gradient(135deg, #1565c0 0%, #42a5f5 100%);
}
.cta-card {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.38);
}

/* ===== ボタン ===== */
.btn-outline {
  color: var(--primary);
  border-color: var(--primary);
}
.btn-outline:hover {
  background: var(--primary);
  color: #fff;
}
.btn-white { color: var(--primary); }

/* ===== 追従UI ===== */
.page-top { background: var(--primary); }
.page-top:hover { background: var(--primary-dark); }
.sp-cta-tel { background: var(--primary); }
.ai-banner { color: var(--primary); border-color: var(--accent); }

/* ===== フッター: #111827 → #1a2e50 (やや明るいネイビー) ===== */
.site-footer { background: #1a2e50; }
.footer-nav-title { color: #fff; }
.footer-brand .footer-tel { color: var(--accent); }

/* ===== レスポンシブ ===== */
@media (max-width: 768px) {
  /* SP: 写真を全幅に戻してオーバーレイを上→下グラデーションに変更 */
  .hero-bg {
    left: 0;
    background-image: url('../img/index/AT4A0109_sp.jpg');
    background-position: center top;
  }
  .hero-overlay {
    background: linear-gradient(
      to bottom,
      transparent 0%,
      transparent 28%,
      rgba(238, 245, 255, 0.78) 38%,
      rgba(238, 245, 255, 0.95) 100%
    );
  }
  .hero { align-items: flex-end; }
  .hero-inner {
    padding-top: 20px;
    padding-bottom: 16px;
  }
  .hero-cta { display: none; }
  .hero-cta {
    flex-direction: column;
  }
  .hero-cta-btn-primary,
  .hero-cta-btn-secondary {
    width: 100%;
    text-align: center;
  }
  /* KPIバーの区切り線 */
  .kpi-item {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}
@media (max-width: 480px) {
  .kpi-item { border-bottom: 1px solid var(--border); }
  .kpi-item:last-child { border-bottom: none; }
}