/* ===== 9:16向け・ネイティブ横スクロール版 ===== */
.video-carousel9x16{
  --vc9-maxw: min(460px, 95vw);
  --vc9-h: min(60vh, 760px); /* 既定の高さ。60%に調整しました。 */
  --vc9-radius: 14px;

  position: relative;
  width: 100%;
  max-width: var(--vc9-maxw);
  margin: 22px auto;
  font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans JP", sans-serif;
  background: #FAF1F5;
}

/* PCでは縦の占有を80%に */
@media (min-width: 1024px){
  .video-carousel9x16{ --vc9-h: 70vh; --vc9-maxw: 520px; }
}

/* 矢印ボタン */
.vc9-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:5;
  width:46px; height:46px; border-radius:50%;
  border:0; background:rgba(0,0,0,.5); color:#fff;
  font-size:22px;
  cursor:pointer; user-select:none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vc9-prev{ left:-6px; }
.vc9-next{ right:-6px; }
.vc9-nav:disabled{ opacity:.35; cursor:default; }

/* ビューポート＝横スクロール領域（scroll-snap有効） */
.vc9-viewport{
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: var(--vc9-radius);
  background:#000;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* トラック：横並び */
.vc9-track{
  list-style:none; padding:0; margin:0;
  display:flex; gap: 0;
}

/* スライドは100%幅 */
.vc9-slide{
  flex: 0 0 100%;
  scroll-snap-align: center;
  padding: 0 0 10px;
  box-sizing: border-box;
}

/* 9:16 プレイヤー枠 */
.vc9-player{
  width:100%;
  height:var(--vc9-h);
  max-height:var(--vc9-h);
  aspect-ratio: 9 / 16; /* 対応ブラウザでは高さも整う */
  margin:0 auto;
  background:#000;
  border-radius:var(--vc9-radius);
  overflow:hidden;
}
.vc9-player video{
  width:100%; height:100%; display:block;
  object-fit: cover; background:#000;
}

.vc9-cap{
  color:#555; font-size:.95rem; margin:10px 4px 0; text-align:center;
}

/* ドット */
.vc9-dots{ display:flex; gap:10px; justify-content:center; margin-top:10px; }
.vc9-dot{ width:9px; height:9px; border-radius:50%; background:#d0d0d0; cursor:pointer; }
.vc9-dot[aria-current="true"]{ background:#777; }