/*
 * bootstrap-override.css
 * Bootstrap 5 との衝突を吸収し、独自デザインを維持するオーバーライド
 * 読み込み順：Bootstrap → このファイル → 各パーツCSS
 */

/* ============================================
   1. CSS変数 再定義（Bootstrapが上書きする前に確保）
   ============================================ */
:root {
  --pink-main:   #96E8BC;
  --gold:        #B8986A;
  --gold-light:  #D4B896;
  --pink-light:  #C9FFE2;
  --pink-pale:   #E8FFF4;
  --pink-deep:   #4B7F52;
  --pink-medium: #7DD181;
  --navy:        #4B7F52;
  --white:       #FFFFFF;
  --gray-text:   #555;
  --gray-light:  #f9f9f9;
  --max-w:       1200px;

  /* ── 新カラー：ミント × イエロー ── */
  --mint:         #5ECFB1;
  --mint-pale:    #F0FDF9;
  --mint-light:   #C8F2E8;
  --yellow:       #FFD166;
  --yellow-pale:  #FFFBEF;
  --yellow-light: #FFE9A0;

  /* Bootstrap変数を独自カラーで上書き */
  --bs-primary:        #96E8BC;
  --bs-primary-rgb:    41,182,212;
  --bs-link-color:     #96E8BC;
  --bs-link-hover-color: #4B7F52;
  --bs-body-font-family: 'Noto Sans JP', sans-serif;
  --bs-body-color:     #555;
  --bs-border-radius:  10px;
}

/* ============================================
   2. body・タイポグラフィ 再確保
   ============================================ */
html {
  overflow-x: hidden;      /* iOS Safari でも横スクロールを封じる */
}
body {
  font-family: 'Noto Sans JP', sans-serif !important;
  background-color: var(--white) !important;
  color: var(--navy);
  overflow-x: hidden;
  font-size: 16px;
  line-height: 1.8;
  /* SP慣性スクロール強化 */
  -webkit-overflow-scrolling: touch;
  /* 横にはみ出しスクロールを防ぐ */
  overscroll-behavior-x: none;
  position: relative;      /* overflow-x: hidden の基準をbodyに確定 */
}

/* ============================================
   3. btn-primary / btn-outline 独自スタイル保持
      Bootstrap の .btn-primary を上書き
   ============================================ */
.btn-primary {
  display: inline-block !important;
  background: linear-gradient(135deg, var(--mint), var(--pink-main)) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 14px 36px !important;
  border-radius: 50px !important;
  border: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
  letter-spacing: 0.04em !important;
  transition: transform .2s;
  line-height: 1.5 !important;
}
.btn-primary:hover,
.btn-primary:focus {
  transform: translateY(-2px) !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--pink-main), var(--mint)) !important;
}

.btn-white {
  display: inline-block;
  background: #fff;
  color: var(--pink-main);
  font-size: 15px;
  font-weight: 700;
  padding: 14px 40px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: transform .2s;
}
.btn-white:hover {
  transform: translateY(-2px);
  color: var(--pink-deep);
}

/* ===== アンダーライン型ボタン（麻布スタイル） ===== */
.btn-outline {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent;
  color: var(--navy);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.18em;
  text-decoration: none;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gold);
  position: relative;
  transition: gap 0.3s, color 0.2s, border-color 0.2s;
}
.btn-outline::after {
  content: '→';
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 16px; font-weight: 300;
  color: var(--gold);
  transition: transform 0.3s;
}
.btn-outline:hover {
  color: var(--gold);
  border-color: var(--gold);
  gap: 16px;
}
.btn-outline:hover::after { transform: translateX(4px); }

.btn-outline-w,
.btn-outline-white {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent;
  color: rgba(255,255,255,0.85);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.18em;
  text-decoration: none;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.45);
  transition: gap 0.3s, color 0.2s, border-color 0.2s;
}
.btn-outline-w::after,
.btn-outline-white::after {
  content: '→';
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 16px; font-weight: 300;
  transition: transform 0.3s;
}
.btn-outline-w:hover,
.btn-outline-white:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.85);
  gap: 16px;
}
.btn-outline-w:hover::after,
.btn-outline-white:hover::after { transform: translateX(4px); }

/* ============================================
   4. .card → Bootstrap の card と競合しないよう
      独自の treatment-card / col-card 等を保護
   ============================================ */
.treatment-card,
.col-card,
.scol-rel-card,
.strmt-rel-card,
.related-card,
.ev-card,
.dorm-card,
.shift-card,
.fi-card,
.contact-info-card {
  /* Bootstrap の .card スタイルをリセット */
  border-radius: unset;
}
/* Bootstrap .card を使う場合のみ有効にする */
.bs-card {
  border-radius: var(--bs-card-border-radius, .375rem);
}

/* ============================================
   5. .nav-* → Bootstrap nav と分離
   ============================================ */
/* Bootstrap navは .navbar-* クラスで使う想定なので
   独自の .nav-item / .nav-dropdown はそのまま保護 */
.nav-item > a {
  text-decoration: none;
}

/* ============================================
   6. Bootstrap .container / .row / .col-* は
      そのまま使えるように（独自との共存）
   ============================================ */
.section-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================================
   7. Bootstrapのリセットが崩す独自スタイルを復元
   ============================================ */

/* li::marker を保護 */
.treatment-card-desc li::marker,
.fi-card-list li::before,
.scol-content li::marker,
.strmt-content li::marker { color: var(--pink-main); }

/* img の max-width をBootstrapが100%にするのを許可 */
img { max-width: 100%; height: auto; }

/* table のリセット */
table { border-collapse: collapse; }

/* フォームのbox-sizing */
input, textarea, select, button {
  box-sizing: border-box;
}

/* ============================================
   8. Bootstrap Utilities を独自クラスで使う例
      （BootstrapのUtilityはそのまま使用可能）
   ============================================ */
/* 例：.d-flex, .gap-*, .p-*, .m-*, .text-center 等はBootstrapのまま使える */