/* ============================================================
 * Design Pattern 3 — Clinic Blue
 *
 * 方向性:
 *   - 医療現場で多用される鎮静系のブルーをベースに、清潔感ある
 *     クリニック風の落ち着いたトンマナ
 *   - 純白背景 / 余白広め / 細線・浅いシャドウ
 *   - CTA は彩度高めの濃ブルー（高コントラストで信頼感）
 *   - アクセントは温かみのあるクリームイエロー（冷色を中和）
 *   - 見出しを Noto Sans JP に切替えてより医療的・端正な印象に
 *
 * 配色:
 *   Primary       #3B8DBD   メディカルブルー
 *   Primary Dark  #2C6E96   CTA・濃色
 *   Primary Light #E8F3FB   セクション背景
 *   Accent        #F5D87B   クリーム系アクセント（暖色で中和）
 *   BG Base       #FFFFFF   純白
 *   BG Section    #F7FAFC   微青色を帯びた白
 *   Ink           #2A3744   ダークスレート
 *   Ink Sub       #6B7785
 *   Border        #DDE7EE
 * ============================================================ */

:root {
  --brand-primary: #3B8DBD;
  --brand-primary-dark: #2C6E96;
  --brand-primary-light: #E8F3FB;
  --cta: #2C6E96;
  --cta-hover: #1F5170;
  --line: #06C755;
  --line-hover: #04A847;
  --bg-base: #FFFFFF;
  --bg-section: #F7FAFC;
  --ink-primary: #2A3744;
  --ink-secondary: #6B7785;
  --border-soft: #DDE7EE;
  --accent-warm: #F5D87B;
}

body { background: #FFFFFF; color: #2A3744; }

/* ─── 見出しを Noto Sans JP に変更（より医療的・端正な印象）─── */
h1, h2, h3, h4 {
  font-family: 'Noto Sans JP', "Hiragino Sans", "Yu Gothic", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

/* ─── Tailwind ユーティリティ override ─── */
.bg-brand-light { background-color: #E8F3FB !important; }
.bg-brand { background-color: #3B8DBD !important; }
.bg-brand-dark { background-color: #2C6E96 !important; }
.bg-accent { background-color: #F5D87B !important; }
.bg-accent\/30 { background-color: rgba(245, 216, 123, 0.30) !important; }
.bg-cta { background-color: #2C6E96 !important; }
.bg-bg-base { background-color: #FFFFFF !important; }
.bg-bg-section { background-color: #F7FAFC !important; }

.text-brand { color: #3B8DBD !important; }
.text-brand-dark { color: #2C6E96 !important; }
.text-cta { color: #2C6E96 !important; }
.text-line { color: #06C755 !important; }
.text-ink { color: #2A3744 !important; }
.text-ink-sub { color: #6B7785 !important; }
.text-accent { color: #C29B19 !important; } /* 黄系文字は彩度を上げて視認性確保 */

.border-brand { border-color: #3B8DBD !important; }
.border-brand-dark { border-color: #2C6E96 !important; }
.border-border-soft { border-color: #DDE7EE !important; }

/* ─── CTA ボタン: 濃ブルーピル ─── */
.btn-cta {
  background: #2C6E96 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(44, 110, 150, 0.20) !important;
}
.btn-cta:hover {
  background: #1F5170 !important;
  box-shadow: 0 8px 20px rgba(44, 110, 150, 0.32) !important;
}

/* ─── Outline ボタン ─── */
.btn-outline {
  border-color: #2C6E96 !important;
  color: #2C6E96 !important;
}
.btn-outline:hover {
  background: #E8F3FB !important;
}

/* ─── Card: クリニック風の細い枠線 + 浅いシャドウ ─── */
.card {
  border: 1px solid #DDE7EE !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.025) !important;
  border-radius: 12px !important;
}
.card:hover {
  box-shadow: 0 6px 16px rgba(59, 141, 189, 0.15) !important;
  border-color: #B5D0E2 !important;
}
.card-flat {
  border-color: #DDE7EE !important;
  border-radius: 12px !important;
}

/* ─── セクション: 余白広め + 純白基調 ─── */
.section { padding: 96px 0 !important; }
@media (max-width: 768px) { .section { padding: 64px 0 !important; } }

.section-green {
  background: #2C6E96 !important;
}
.section-mint {
  background: #E8F3FB !important;
}
.section-alt {
  background: #F7FAFC !important;
}

/* ─── ヘッダー ─── */
.site-header {
  background: rgba(255, 255, 255, 0.98) !important;
  border-bottom: 1px solid #DDE7EE !important;
}

/* ─── 信頼バッジ: 薄青チップ ─── */
.badge-trust {
  background: #F1F7FB !important;
  border-color: #B5D0E2 !important;
  color: #2C6E96 !important;
}

/* ─── アクセント要素 ─── */
.font-num.text-accent { color: #C29B19 !important; }

/* ─── FAQ アコーディオン ─── */
.faq-item summary::after { color: #2C6E96 !important; }

/* ─── フォームフォーカス ─── */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: #3B8DBD !important;
  box-shadow: 0 0 0 3px rgba(59, 141, 189, 0.15) !important;
}

/* ─── ステップタイムライン ─── */
.step-timeline::before { background: #3B8DBD !important; }
.step-item::before {
  background: #3B8DBD !important;
  box-shadow: 0 0 0 2px #3B8DBD !important;
}

/* ─── 番号アクセント ─── */
.font-num.text-brand { color: #3B8DBD !important; }

/* ─── デザインバージョン表示バナー（ページ上部）─── */
.design-version-banner {
  background: #F1F7FB;
  color: #2C6E96;
  border-bottom: 1px solid #DDE7EE;
  text-align: center;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}