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

/* ============================================
   1. CSS変数 再定義（Bootstrapが上書きする前に確保）
   ============================================ */
:root {
  --pink-main:   #F03E7A;
  --pink-light:  #FFD6E5;
  --pink-pale:   #FFF0F5;
  --pink-deep:   #C0185A;
  --pink-medium: #F8B4CE;
  --navy:        #1E2240;
  --white:       #FFFFFF;
  --gray-text:   #555;
  --gray-light:  #f9f9f9;
  --max-w:       1200px;

  /* Bootstrap変数を独自カラーで上書き */
  --bs-primary:        #F03E7A;
  --bs-primary-rgb:    240,62,122;
  --bs-link-color:     #F03E7A;
  --bs-link-hover-color: #C0185A;
  --bs-body-font-family: 'Noto Sans JP', sans-serif;
  --bs-body-color:     #555;
  --bs-border-radius:  10px;
}

/* ============================================
   2. body・タイポグラフィ 再確保
   ============================================ */
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;
}

/* ============================================
   3. btn-primary / btn-outline 独自スタイル保持
      Bootstrap の .btn-primary を上書き
   ============================================ */
.btn-primary {
  display: inline-block !important;
  background: linear-gradient(135deg, var(--pink-main), var(--pink-deep)) !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(--pink-deep)) !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-block;
  background: transparent;
  color: var(--pink-main);
  font-size: 14px;
  font-weight: 700;
  padding: 11px 28px;
  border-radius: 50px;
  border: 2px solid var(--pink-main);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: background .2s, color .2s, transform .2s;
}
.btn-outline:hover {
  background: var(--pink-main);
  color: #fff;
  transform: translateY(-2px);
}

.btn-outline-w,
.btn-outline-white {
  display: inline-block;
  background: transparent;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 22px;
  border-radius: 50px;
  border: 2px solid rgba(255,255,255,.55);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: background .2s, border-color .2s, color .2s;
}
.btn-outline-w:hover,
.btn-outline-white:hover {
  background: rgba(255,255,255,.15);
  border-color: #fff;
  color: #fff;
}

/* ============================================
   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のまま使える */