/* ============================================
   MAC Consulting — 配色修正パッチ
   適用方法: index.html の </head> 直前に
   <link rel="stylesheet" href="assets/mac_color_fix.css">
   を追加する（既存のCSSより後に読み込むこと）
   ============================================ */

/* ------
   カラー変数定義
------ */
:root {
  --color-bg:        #ffffff;       /* ページ全体の地色：白 */
  --color-bg-light:  #f5f7fa;       /* セクション交互背景：ライトグレー */
  --color-navy:      #1a2e4a;       /* アクセント：ネイビー */
  --color-navy-mid:  #2d4a6e;       /* ネイビー中間 */
  --color-gold:      #b59a6a;       /* ゴールド（既存） */
  --color-red:       #cc2200;       /* MACレッド（既存） */
  --color-text:      #1a1a1a;       /* 本文テキスト */
  --color-text-mid:  #444444;       /* 本文テキスト（中） */
  --color-line:      #06c755;       /* LINEグリーン */
}

/* ============================================
   1. HERO セクション
   背景画像は元に戻して、色調だけ明るくする
   ============================================ */

/* ヒーロー背景画像の明るい色調化 (オーバーレイの暗さを軽減) */
.hero-bg {
  background: linear-gradient(rgba(0, 16, 33, 0.2), rgba(0, 16, 33, 0.3)), 
              url('../assets/sample5.png') no-repeat center center/cover !important;
}

/* 明るい背景でもゴールドのテキストが読みやすいように、暗い影（グロウ効果）をつける */
.mac-branding-hero,
.hero h1,
.hero-desc {
  text-shadow: 1px 2px 6px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 0, 0, 0.5) !important;
}

/* ============================================
   2. CONCEPT & SERVICE セクション
   M / A / C のボックスをお金丸見え管理術と同じ色に
   ============================================ */


/* M / A / C の各サービスボックス (.mac-card) */
#concept-service .mac-card {
  background: var(--accent-gold-pale, #fcf6ea) !important;
  border: none !important;
  border-radius: 12px !important;
  color: var(--color-text) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
}

/* M / A / C の見出し（h3）をTOPと同じフォントに */
#concept-service .mac-3d-letter {
  font-size: 3.5rem !important;
  text-shadow: none !important;
}
#concept-service .mac-combined-title {
  font-size: 3.5rem !important;
  font-weight: 900 !important;
  color: var(--color-navy) !important;
  gap: 0 !important;
}
#concept-service h3 {
  color: var(--color-navy) !important;
}

/* M / A / C のボックス内テキスト */
#concept-service p {
  color: var(--color-text-mid) !important;
}

/* M / A / C の頭文字（赤）は維持 */
#concept-service .mac-letter,
#concept-service h3 span:first-child,
#concept-service .letter {
  color: var(--color-red) !important;
}

/* お金丸見え管理術ボックス：既存のゴールドペール色を確実化 */
.method-box {
  background: var(--accent-gold-pale, #fcf6ea) !important;
  border: none !important;
  border-radius: 12px !important;
  color: var(--color-navy) !important;
}
.method-box p {
  color: var(--color-text-mid) !important;
}

/* ============================================
   3. 全体共通 — ページ地色を白に統一
   ============================================ */

body {
  background-color: var(--color-bg) !important;
}

/* ネイビー背景のセクションはそのまま維持（PROFILE等） */
#profile,
#voice,
#contact {
  /* 既存スタイルを尊重。変更する場合は以下をコメントアウト解除 */
  /* background: var(--color-bg-light) !important; */
  /* color: var(--color-text) !important; */
}

/* ============================================
   4. ナビゲーションバー
   背景が暗い場合は白に変更
   ============================================ */

header,
nav,
.navbar,
.site-header {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(26, 46, 74, 0.12) !important;
  box-shadow: 0 1px 8px rgba(26, 46, 74, 0.08) !important;
}

/* ナビゲーションのリンクテキスト */
header a,
nav a,
.navbar a,
.site-header a {
  color: var(--color-navy) !important;
}

header a:hover,
nav a:hover {
  color: var(--color-gold) !important;
}