/* ========================================
   S07 お客様の声（背景=水色塗り・左右チラ見せカルーセル）
   ======================================== */

/* 2026-08-11 Figma 2989:1103 全面リニューアル：
   背景=写真＋(白a0@50%→#8FCFD7@90.38%)グラデ／タイトルは写真帯＋罫線バッジ＋紺文字／帯下にストリーク装飾 */
.voice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0; /* Figmaは負gap構成のため個別marginで制御 */
  padding: 60px 0 40px; /* Figma pad[60,0,40,0] */
  /* グラデ層はレイヤー不透明度20%（Figma 2026-08-11再実測）→ 終端の実効色 #8FCFD7 a0.2 */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, rgba(143, 207, 215, 0.2) 90.38%, rgba(143, 207, 215, 0.2) 100%),
    url("../../images/s07_voice/voice-bg.webp") center / cover no-repeat;
  text-align: center;
}

/* タイトル帯（Figma 3067:180：写真背景358x119・pad12/16・上寄せ） */
.voice-heading-band {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 358px;
  max-width: calc(100% - 32px);
  height: 119px;
  padding: 12px 16px;
  box-sizing: border-box;
  background: url("../../images/s07_voice/title-band.webp") center / cover no-repeat;
}
.voice-heading { display: flex; flex-direction: column; align-items: center; gap: 8px; } /* Figma 2989:1104 gap8 */
/* バッジ：白ピル廃止→斜め罫線付きテキスト（Figma 2989:1105/3067:201・線1px紺・±60度） */
.voice-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 16px;
  font-size: 16px;
  font-weight: 500; /* Figma Medium（旧Bold） */
  line-height: 16px;
  color: var(--c-navy);
  background: none;
  white-space: nowrap;
}
.voice-badge::before,
.voice-badge::after {
  content: "";
  width: 20px;
  height: 1px;
  background: var(--c-navy);
  flex-shrink: 0;
}
.voice-badge::before { transform: rotate(60deg); }
.voice-badge::after { transform: rotate(-60deg); }
.voice-title {
  font-size: 28px; /* Figma 2989:1108（旧36） */
  font-weight: 900;
  line-height: 1;
  color: var(--c-navy); /* 背景が写真帯になったため白→紺 */
}
.voice-title .sm { font-size: 26px; } /* Figma 2989:1109（旧30） */

/* ストリーク装飾（Figma 3067:196：帯の下端に-24pxで重ねる326x94の透過グラデ） */
.voice-streak {
  display: block;
  width: 326px;
  max-width: 100%;
  height: auto;
  margin-top: -24px;
  pointer-events: none;
}

/* カルーセル（v1構造確認・絶対配置+JS駆動・中央1枚＋左右80%チラ見せ・無限ループ） */
.voice-carousel-area {
  position: relative;
  width: 100%;
  padding: 8px 0 16px;
  margin-top: -48px; /* Figma：セクションgap-48＝カードがストリークに重なる */
  overflow: hidden;
}
.voice-track {
  position: relative;
  width: 100%;
}
.voice-card {
  position: absolute;
  top: 0;
  width: 275px;
  display: flex;
  flex-direction: column;
  gap: 8px; /* Figma 2524:656（旧7） */
  padding: 20px;
  border-radius: 8px;
  overflow: hidden; /* Figma clipsContent */
  background: #fff;
  box-shadow: var(--shadow-card); /* 2026-08-12：シャドウ統一（値は元から一致） */
  text-align: left;
  transition: transform 0.4s ease, opacity 0.4s ease, left 0.4s ease;
}

.voice-card-header { display: flex; align-items: center; gap: 10px; }
.voice-card-avatar {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 50%; /* Figma 2524:658：r30の丸枠に画像をCROPで敷いている */
  object-fit: cover;
}
.voice-card-meta { display: flex; flex-direction: column; gap: 2px; } /* Figma 1.99 */
.voice-card-area {
  font-size: 12px;
  font-weight: 400; /* 2026-08-11 Figma 2989:1140 Regular（旧2026-08-01指定のBold） */
  line-height: 19.2px; /* Figma 2524:661 */
  color: var(--c-charcoal);
}
.voice-card-stars {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  color: #F1C40F; /* 2026-08-11 Figma 2989:1142（旧--c-coral） */
}
.voice-card-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px; /* Figma 2524:665 */
  color: var(--c-navy);
}
.voice-card-body {
  font-size: 12px;
  line-height: 21px; /* Figma 2524:667 */
  color: var(--c-charcoal);
}

.voice-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: none;
}
.voice-arrow--left { left: calc(50% - 137.5px - 5px - 28px + 8px); } /* 2026-08-01：中央へ8px（4+4） */
.voice-arrow--right { right: calc(50% - 137.5px - 5px - 28px + 8px); } /* 2026-08-01：中央へ8px（4+4） */
.voice-arrow img { width: 12px; height: 22px; } /* 2026-08-01：1px枠線ぶんviewBox拡張（三角の実寸は10x20のまま） */

.voice-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px; /* 2026-08-11 Figma 2989:1155（旧4） */
  margin-top: 8px; /* carousel-areaのpad16と合わせてFigmaの間隔24に */
}
.voice-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-navy);
  padding: 0;
}
.voice-dot.is-active { background: #fff; } /* Figma 2524:679（2026-07-31：青背景になったため白／旧：青で同化していた） */