/* ===================================================
   index-miraie.css — みらいえグループ統一トンマナ パターン
   白ベース × ブラウン×ゴールド
   index.css の後に読み込む
   =================================================== */

/* ===== カラー変数 ===== */
:root {
  --primary:      #5A3C37;
  --primary-dark: #3a2219;
  --accent:       #D4A823;
  --accent-light: #fdf5da;
  --bg-light:     #faf3e8;
  --bg-gray:      #f5ede0;
  --border:       #e5ceaa;
  --text-muted:   #707070;
  --shadow:       0 4px 20px rgba(90, 60, 55, 0.10);
  --shadow-hover: 0 8px 32px rgba(90, 60, 55, 0.18);
}

/* ===== タイポグラフィ ===== */
body {
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
  letter-spacing: 0.04em;
}
.kpi-num,
.reason-card-value,
.rating-num,
.tel-link,
.header-tel .tel-number,
.footer-brand .footer-tel {
  font-family: 'Noto Sans JP', sans-serif;
}

/* ===== ヘッダー上段: ネイビー → ウォームベージュ ===== */
.header-top {
  background: #f5ede0;
  color: #333;
}
.header-top a { color: #5A3C37; }
.header-top a:hover { color: var(--primary-dark); }

/* ===== ナビゲーション ===== */
.header-nav-row {
  background: #fff;
  border-top: 3px solid var(--primary);
}
.global-nav a:hover {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.header-tel .tel-number { color: var(--primary); }
.btn-consultation {
  background: var(--primary);
}
.btn-consultation:hover { background: var(--primary-dark); }
.hamburger span { background: var(--primary); }
.drawer-tel { color: var(--primary); }
.drawer-nav .drawer-cta a.btn-primary {
  background: var(--primary);
}

/* ===== ヒーロー: スプリットレイアウト（左：ウォームベージュ / 右：写真） ===== */
.hero {
  background: #faf3e8;
}
.hero-bg {
  left: 42%;
  background-position: left center;
}
.hero-overlay {
  background: linear-gradient(
    to right,
    #faf3e8 0%,
    #faf3e8 38%,
    rgba(250, 243, 232, 0.85) 52%,
    rgba(250, 243, 232, 0.15) 78%,
    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(90, 60, 55, 0.10);
}
.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 40px;
  border-radius: 4px;
  text-shadow: none;
  letter-spacing: 0.06em;
  box-shadow: 0 4px 20px rgba(212, 168, 35, 0.35);
  transition: background 0.25s ease, transform 0.25s ease;
  white-space: nowrap;
}
.hero-cta-btn-primary:hover {
  background: #b8860b;
  transform: translateY(-2px);
}
.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 36px;
  border-radius: 4px;
  border: 2px solid var(--primary);
  text-shadow: none;
  letter-spacing: 0.06em;
  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); }
.badge { color: var(--accent); border-color: var(--accent); }
.section-alt .badge { color: var(--primary); border-color: var(--primary); }
.section-title { letter-spacing: 0.06em; }

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

/* ===== サービスカード ===== */
.service-card-title { color: var(--primary); }
.service-card-link { color: var(--primary); }

/* ===== 選ばれる理由カード ===== */
.reason-card { border-top: 4px solid var(--accent); }
.reason-card-num { color: var(--accent); }
.reason-card-value { color: var(--primary); }

/* ===== 申告の流れ ===== */
.flow-step-num {
  background: var(--primary);
  box-shadow: 0 4px 16px rgba(90, 60, 55, 0.28);
}
.flow-steps::before {
  background: linear-gradient(90deg, var(--accent) 0%, var(--primary) 100%);
}
.flow-step-title { color: var(--primary); }

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

/* ===== レビュー ===== */
.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); }

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

/* ===== 比較テーブル ===== */
.comparison-table thead th { background: var(--primary); }

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

/* ===== メインCTA: ネイビー → ブラウングラデーション ===== */
.main-cta {
  background: linear-gradient(135deg, #5A3C37 0%, #8B5E3C 100%);
}
.cta-card {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.35);
}
.cta-card .btn-primary { background: var(--accent); }
.cta-card .btn-primary:hover { background: #b8860b; }
.cta-card .btn-white {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.42);
  color: #fff;
}

/* ===== フッター: #111827 → ダークブラウン ===== */
.site-footer { background: #2d1a10; }
.footer-nav-title { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.18); }
.footer-nav a { color: #c9b59a; }
.footer-nav a:hover { color: #fff; }
.footer-brand .footer-tel { color: var(--accent); }
.footer-bottom a { color: #c9b59a; }

/* ===== 追従UI ===== */
.page-top { background: var(--primary); }
.page-top:hover { background: var(--primary-dark); }
.sp-cta-tel { background: var(--primary); }
.sp-cta-btn { background: var(--accent); }
.ai-banner { color: var(--primary); border-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(250, 243, 232, 0.78) 38%,
      rgba(250, 243, 232, 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-item {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}
@media (max-width: 480px) {
  .kpi-item:last-child { border-bottom: none; }
}

/* ===== サービスページ共通: 事例カードリンクラップ ===== */
.example-card { position: relative; }
.example-card-link-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  color: inherit;
  text-decoration: none;
  transition: opacity .2s;
}
.example-card-link-wrap:hover { opacity: .85; }
.example-card-link-wrap .example-card-head,
.example-card-link-wrap .example-card-body { color: inherit; }
.example-card-more {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--primary);
  margin-top: auto;
  padding-top: 8px;
}