/* --- カード（縦写真をきれいに） --- */
.row>* {
  padding-left:1px !important;
  padding-right:1px !important;
}

.rb-intv-card{ border-radius: 12px; overflow: hidden; }

.rb-intv-media {
  position: relative;
  overflow: hidden; /* 枠からはみ出さない */
}

/* ホバーで少し透明にする効果は残す */
.rb-intv-media:hover {
  opacity: 0.95; /* 必要であれば微調整 */
}

/* 画像 */
.rb-intv-media img {
  display: block;
  width: 100%;      /* 少し大きめにしておく */
  height: auto;     /* 高さは自動調整 */
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: center;

  transition: transform 0.5s ease; /* スムーズに拡大 */
  transform: scale(1);             /* 初期状態 */
}

/* ホバー時に拡大 */
.rb-intv-media:hover img {
  transform: scale(1.05); /* 10%拡大 */
}
.rb-intv-grad{
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.45) 0 38%, rgba(0,0,0,0) 70% 100%);
  cursor: pointer;
}
.rb-intv-text{
  position:absolute; left:12px; right:12px; bottom:12px; color:#fff;
}
.rb-intv-name{ font-weight: 800; line-height:1.2; }
.rb-intv-role{ font-size:.85rem; opacity:.9; }

/* --- インジケータ（細いスライダー） --- */
.rb-intv-indicators{
  display:flex;
  gap: 5px;
  align-items:center;
}
.rb-intv-indicators button{
  width: 140px;              /* 1本の長さ */
  height: 4px;               /* 太さ */
  border: 0;
  background: rgba(2, 84, 210, .25);  /* 薄いブルー */
  /* border-radius: 999px; */
  opacity: 1;                /* Bootstrapの既定opacityを無効化 */
}
.rb-intv-indicators button.active{
  background: #0155C4 !important;       /* アクティブ色（お好みで） */
}

/* --- 送る/戻るボタン（右側の丸ボタン） --- */
.rb-intv-nav{
  width: 44px; height: 44px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  display:inline-grid; place-items:center;
}
.rb-intv-nav .material-icons{ font-size: 22px; }
.rb-intv-nav:hover{ background:#f3f4f6; }

/* 既存影を残す場合 */
#interviewCarousel .carousel-control-prev-icon,
#interviewCarousel .carousel-control-next-icon{
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

.carousel-indicators [data-bs-target] {
  width: 120px !important;
  height: 2px !important;
  border-top: 1px solid transparent !important;
  border-bottom: 1px solid transparent !important;
  background-color: #8f8f8f !important;
}

.slide-control-button button {
  background-color: #F2F2F2;
}

/* 画面が狭いときはインジケータを短くして詰める */
@media (max-width: 575.98px){
  .rb-intv-indicators button{ width: 56px; }

  .rb-intv-role {
    font-size: .7rem;
  }
}