/* voice-carousel.css */

/* ─── カルーセル全体 ───────────────── */
.testimonial-carousel {
  position: relative;
  max-width: 940px;      /* 300px×3 + 20px×2 = 940px */
  width: 70%;            /* PC時の幅 */
  margin: auto;
  overflow: visible;     /* 矢印を隠さない */
}

/* ─── スライド領域 ───────────────── */
.carousel-wrapper {
  display: flex;
  overflow-x: hidden;    /* 横のはみ出しだけ隠す */
  overflow-y: visible;   /* 縦はみ出しを見せる */
  transition: transform 0.5s ease;
  padding-bottom: 60px;  /* 下の矢印用スペース */
}

/* ─── 各アイテム ───────────────── */
.carousel-item {
  flex: 0 0 auto;
  width: 300px;          /* 画像実寸と同じ */
  margin-right: 20px;    /* 画像間の余白 */
}
.carousel-item:last-child {
  margin-right: 0;
}

.carousel-item img {
  width: 100%;
  height: auto;          /* アスペクト比そのまま */
  object-fit: contain;   /* 全体を収める */
  display: block;
}

/* ─── 矢印ナビ ───────────────── */
.carousel-nav {
  position: absolute;
  bottom: 10px;          /* 画像下から10px */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20px;
}

.carousel-nav button {
  width: 40px;
  height: 40px;
  background-size: contain;
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
  padding: 0;
}

.carousel-nav .prev {
  background-image: url('../images/prev-icon.png');
}

.carousel-nav .next {
  background-image: url('../images/next-icon.png');
}

/* ─── モバイル版（≤768px） ───────────────── */
@media (max-width: 768px) {
  .testimonial-carousel {
    max-width: none;     /* SPでは制限解除 */
    width: 100%;         /* 横幅いっぱい */
  }
  .carousel-wrapper {
    padding-bottom: 60px;/* 矢印用スペース維持 */
  }
  .carousel-item {
    width: 100%;         /* 1枚ずつ */
    margin-right: 0;
  }
}