/* SectionCard */
.rb-card-gradient{
    /* カード画像の下側だけ暗くしてテキストを読みやすく */
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.65) 100%);
  }
  
.card {
  border-radius: 0 !important;
}

/* ここで“表示領域の高さ”をコントロール。中心は object-position:center で維持 */
:root{
  /* デフォルト高さ（お好みで）: 画面幅に応じて 170〜260px */
  --rb-card-h: clamp(190px, 24vw, 300px);
}

.card-img-overlay {
  top:50% !important;
}

.rb-card .card-img{
  display: block;
  width: 100%;
  height: var(--rb-card-h);   /* ← 表示領域をここで固定して“切り取る” */
  object-fit: cover;          /* 余白を作らず全面に */
  object-position: center;    /* 中心を基準にトリミング（左右上下とも中央） */
}

/* タイトル可読性のための下部グラデ（任意） */
.rb-card-gradient{
  background: linear-gradient(to top, rgba(0,0,0,.45) 0 40%, rgba(0,0,0,0) 70% 100%);
}

/* もう少し縦を詰めたい場合（例：デスクトップ限定で低く） */
@media (min-width: 992px){
  .rb-card{ --rb-card-h: 290px; }  /* ここを 200px などに調整 */
}

/* モバイルではタップ配慮で少し高めにしてもOK */
@media (max-width: 575.98px){
  .rb-card{ --rb-card-h: 210px; }
}

.card-title {
  letter-spacing: .01em;
  font-size: clamp(2rem, 2.5vw, 2rem) !important;
  margin-bottom: 0 !important;
}

.card-sub-title {
  font-family: "Outfit", sans-serif;
  font-size: clamp(1rem, 1.6vw, 2rem) !important;
  color: #fff;
}