/* ===== ベース（共通） ===== */
.va2-carousel{
  --w: 500px;        /* スライド幅（固定） */
  --h: 300px;        /* スライド高さ（固定） */
  --gap: 20px;       /* スライド間隔 */
  --btnY: -60px;     /* 矢印/ドットの縦位置 */
  --dot: 7px;        /* ドット直径 */
  --btn: 50px;       /* 矢印ボタン直径 */
  --ui:  #ddd8;      /* UI背景 */
  --uiH: #ddd9;      /* UI hover */
  position: relative;
  margin-bottom: 120px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  width: 100%;        /* レイアウト幅は横いっぱい */
}

.va2-viewport{
  width: 100%;       /* 画面いっぱいの帯 */
  margin: 0 auto;
  overflow: hidden;
}

.va2-track{
  display: flex;
  gap: var(--gap);
  overflow-x: auto;                          /* ← 手動スクロールOK */
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-snap-stop: always;
  scroll-behavior: smooth;
  padding-inline: 0;                          /* サイド余白なし（華やかに） */
  scroll-padding-inline: 0;
  position: relative; 
  z-index: 1;
  padding-bottom: 1rem;
}

.va2-slide{
  flex: 0 0 auto;
  width: var(--w);                            /* 画像/動画サイズは固定 */
  scroll-snap-align: center;                  /* 中間は中央寄せ */
}
.va2-slide:first-child{ scroll-snap-align: start; } /* 最初は左寄せ */
.va2-slide:last-child { scroll-snap-align: end;   } /* 最後は右寄せ */

/* 画像スライド用（必要に応じて） */
.va2-slide img{
  width: var(--w);
  height: var(--h);
  object-fit: cover;
  display: block;
  border-radius: 10px;
  box-shadow: 0 6px 24px #00000012;
}

/* YouTube動画スライド用（画像と同寸法で収める） */
.va2-video{
  width: var(--w);
  height: var(--h);
  border-radius: 10px;
  overflow: hidden;                 /* 角丸クリップ */
  box-shadow: 0 6px 24px #00000012;
  position: relative; 
  z-index: 1;
}
.va2-video iframe{
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: auto;
}

/* タイトル＆作者名 */
.va2-slide h3{ margin: 1rem 0 0.25rem; }
.va2-slide .va2-author{
  margin: 0 0 2rem;
  font-size: 0.9rem;
  color: #555;
  text-align: left; /* 必要に応じて center に */
}

/* ドット（中央下） */
.va2-dots{
	position: absolute; 
	left: 9rem; 
	bottom: -2.5rem;
	display: flex;
	gap: 7px;
}
.va2-dots button{
  width: var(--dot); height: var(--dot);
  border-radius: 50%;
  background: #ccc; border: 0; cursor: pointer;
}
.va2-dots button.is-active{ background: #666; }

/* 矢印（iPhoneで青くならないよう疑似要素で描画） */
.va2-arrow{
	position: absolute; 
	bottom: var(--btnY);
	width: var(--btn); 
	height: var(--btn);
	border-radius: 50%;
	background: var(--ui);
	cursor: pointer; 
	user-select: none; 
	border: 0;
	display: grid;
	place-items: center;
	text-decoration: none; 
	color: inherit;
	position: absolute;
}
.va2-prev{ left: 0; }
.va2-next{ left: 60px; }
.va2-arrow:hover{ background: var(--uiH); }
.va2-arrow:active{ transform: scale(.98); }

.va2-prev::before, .va2-next::before{
  font-size: 1.5rem;
  line-height: 1;
  -webkit-text-fill-color: #000;
  color: #000;
  display: inline-block;
  content: "";
}
.va2-prev::before{ content: "◀"; }
.va2-next::before{ content: "▶"; }