/* =====================================================
 * trainer-slider.css
 * トレーナースライダー用スタイル
 *
 * テーマの style.css に @import するか、
 * functions.php で wp_enqueue_style() して読み込んでください。
 * ===================================================== */

/* --- 最外ラッパー：はみ出しをここでクリップして横スクロールを防ぐ --- */
.trainer-slider-outer {
  overflow: hidden; /* 左右にはみ出したスライドをここで切る */
}

/* --- 内側ラッパー：前後スライドの見切れ用padding＋ボタン配置基準 --- */
.trainer-slider-wrap {
  position: relative;
  padding: 0 48px;
}

.trainer-swiper {
  /* 左右端のスライドを見切れさせるためにoverflowをvisibleに */
  /* クリップは外側の .trainer-slider-outer が担うため横スクロールは発生しない */
  overflow: visible;
}

/* --- スライド1枚 --- */
.trainer-slider-item {
  width: 157px;
  flex-shrink: 0;
}

.trainer-slider-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 157 / 223;
  object-fit: cover;
  display: block;
}

.trainer-slider-name {
  margin-top: 2.667vw;
  text-align: center;
  font-size: 3.733vw;
}
.trainer-slider-name a {
  font-size: 3.733vw;
}

.trainer-slider-name a {
  color: inherit;
  text-decoration: none;
}

.trainer-slider-name a:hover {
  text-decoration: underline;
}

/* --- ページネーション --- */
.trainer-swiper-pagination {
  position: static;
  margin-top: 16px;
  text-align: center;
}

.trainer-swiper-pagination .swiper-pagination-bullet {
  background: #999;
  opacity: 1;
}

.trainer-swiper-pagination .swiper-pagination-bullet-active {
  background: #333;
}

/* --- 前へ・次へボタン（Swiperデフォルトを上書き） --- */
.trainer-swiper-prev,
.trainer-swiper-next {
  color: #333;
  top: calc( 157px * 1.42 / 2 );
}

/* --- SP: ラッパーのpadding小さく --- */
@media screen and (max-width: 767px) {
  .trainer-slider-wrap {
    padding: 0 36px;
  }
}

/* --- PC: スライド幅を250pxに変更 --- */
@media screen and (min-width: 768px) {

  .trainer-slider-item {
    width: 250px;
  }

  .trainer-slider-image img {
    aspect-ratio: 250 / 355;
  }

  .trainer-swiper-prev,
  .trainer-swiper-next {
    top: calc( 250px * 1.42 / 2 );
  }

  .trainer-slider-name {
    margin-top: 1em;
    text-align: center;
    font-size: 1.6rem;
  }
  .trainer-slider-name a {
    font-size: 1.6rem;
  }
}