/* ===== voice ===== */
/* ===== Section ===== */
.voice{
    padding:80px 0;
    display:flex;
    flex-direction:column;
    gap:32px;
    background:#f5f9ff;
  }
/* ===== Carousel ===== */
.voice-carousel{
    position:relative;
    width:100%;
    max-width:1280px;      /* 広い画面でも広がらずコンテンツ幅で上限固定 */
    margin:0 auto;         /* 中央寄せの帯。カードは帯の左から詰めて表示（左揃え） */
  }
.voice-viewport{
    overflow:hidden;
    padding:0 60px 8px;
  }
.voice-track{
    display:flex;
    gap:16px;
    transition:transform .45s cubic-bezier(.22,.61,.36,1);
    will-change:transform;
    touch-action:pan-y;
  }
.voice-card{
    position:relative;
    flex:0 0 354px;
    width:354px;
    max-width:80vw;
    padding-top:66px;
  }
.voice-avatar{
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:104px;
    height:auto;
    z-index:2;
    filter:drop-shadow(0 6px 10px rgba(31,41,55,.12));
  }
.voice-body{
    background:var(--sub);
    border-radius:32px;
    padding:76px 32px 40px;
    min-height:268px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
    text-align:center;
  }
.voice-stars{
    color:var(--star);
    font-size:16px;
    letter-spacing:2px;
    line-height:1;
  }
.voice-role{
    font-size:14px;
    font-weight:400;
    color:var(--grey);
    line-height:1;
  }
.voice-text{
    font-size:16px;
    font-weight:500;
    line-height:1.6;
    color:var(--ink);
  }
/* ===== Nav arrows（Figma: octicon:play-24。24px・細リング＋塗り三角。
   ボタン自体は44pxのまま当たり判定を確保し、見た目はアイコンのみ） ===== */
.voice-nav{
    position:absolute;
    top:calc(66px + 134px);
    transform:translateY(-50%);
    width:44px;
    height:44px;
    border-radius:50%;
    background:transparent;
    border:none;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--blue);
    z-index:5;
    transition:opacity .2s ease, transform .2s ease;
  }
.voice-nav-icon{
    width:24px;
    height:24px;
    display:block;
  }
.voice-nav.prev .voice-nav-icon{transform:scaleX(-1)}  /* Figma: 同アイコンの左右反転 */
.voice-nav:hover{opacity:.7}
.voice-nav:active{transform:translateY(-50%) scale(.94)}
.voice-nav.prev{left:16px}
.voice-nav.next{right:16px}
/* ===== Responsive ===== */
@media (max-width:768px){
.voice{padding:56px 0}
.voice-viewport{padding:0 40px 8px}
.voice-track{gap:12px}
.voice-nav.prev{left:6px}
.voice-nav.next{right:6px}
}
@media (max-width:480px){
/* SP: カードを横幅ほぼ全幅に（詰まり解消）、ナビ矢印はカードの下・中央に配置 */
.voice-carousel{padding-bottom:46px}
/* SP: 1枚を画面全幅で中央表示（peekなし）。カード内で左右余白を確保 */
.voice-viewport{padding:0 0 8px}
.voice-track{gap:0}
.voice-card{flex:0 0 100vw;width:100vw;max-width:100vw;padding:66px 20px 0}
.voice-body{padding:70px 28px 36px}
.voice-nav{width:40px;height:40px;top:auto;bottom:0;transform:none}
.voice-nav.prev{left:calc(50% - 46px);right:auto}
.voice-nav.next{left:calc(50% + 6px);right:auto}
.voice-nav:active{transform:scale(.94)}
}