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

/* ============================================
   1. CSS変数 再定義（Bootstrapが上書きする前に確保）
   ============================================ */
:root {
  --pink-main:   #3DB8D8;
  --pink-light:  #C8E8F4;
  --pink-pale:   #EDF7FC;
  --pink-deep:   #1E8FAD;
  --pink-medium: #8ED8EC;
  --navy:        #1A4A5A;
  --white:       #FFFFFF;
  --gray-text:   #556066;
  --gray-light:  #F4FAFC;
  --max-w:       1200px;

  /* Bootstrap変数を独自カラーで上書き */
  --bs-primary:        #3DB8D8;
  --bs-primary-rgb:    61,184,216;
  --bs-link-color:     #3DB8D8;
  --bs-link-hover-color: #1E8FAD;
  --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;
  box-shadow: 0 6px 24px rgba(61,184,216,.35) !important;
  transition: transform .2s, box-shadow .2s !important;
  line-height: 1.5 !important;
}
.btn-primary:hover,
.btn-primary:focus {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 32px rgba(61,184,216,.45) !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;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
  transition: transform .2s, box-shadow .2s;
}
.btn-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,.2);
  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;
  box-shadow: 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のまま使える */

/* ============================================
   9. グリッドレイアウト保護 (Bootstrap干渉対策)
   ============================================ */
.job-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
}
.treatment-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
}
.column-grid {
  display: grid !important;
  grid-template-columns: 1.4fr 1fr 1fr !important;
  grid-template-rows: 1fr 1fr !important;
  gap: 20px !important;
}
.col-card-featured {
  grid-column: 1 / 2 !important;
  grid-row: 1 / 3 !important;
}
.voice-slider {
  display: flex !important;
  flex-wrap: nowrap !important;
}
.flow-steps {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

@media (max-width: 960px) {
  .treatment-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .column-grid { grid-template-columns: 1fr 1fr !important; grid-template-rows: auto !important; }
  .col-card-featured { grid-column: 1 / 3 !important; grid-row: auto !important; }
}
@media (max-width: 640px) {
  .job-grid { grid-template-columns: 1fr !important; }
  .treatment-grid { grid-template-columns: 1fr !important; }
  .column-grid { grid-template-columns: 1fr !important; }
  .col-card-featured { grid-column: auto !important; grid-row: auto !important; }
}