/* ============================================ */
/* カルーセル */
/* ============================================ */
.carousel-container {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 60px;
  user-select: none; /* スワイプ中のテキスト選択を防ぐ */
}

.carousel-inner {
  overflow: hidden;
  width: 100vw;
  cursor: grab; /* 掴めるカーソル表示 */
}

.carousel-inner:active {
  cursor: grabbing; /* 掴んでいるときのカーソル表示 */
}

.carousel-track {
  display: flex;
  width: 100%;
}

.carousel-track.is-animated {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.carousel-slide {
	flex: 0 0 100vw;
	height: auto; /* 高さを少し調整（任意で変更してください） */
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 32px;
	font-weight: bold;
}

.carousel-slide img {
	width: 100vw;
}

.bg-blue { background: linear-gradient(135deg, #3498db, #2c3e50); }
.bg-green { background: linear-gradient(135deg, #2ecc71, #27ae60); }

/* ─── ドット（インジケーター）のスタイル ─── */
.carousel-dots {
	position: absolute;
	bottom: -24px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 12px;
	z-index: 10;
}

.carousel-dot {
	width: 6px;
	height: 6px;
	background-color: rgba(0, 0, 0, 0.4);
	border-radius: 50%;
	border: none;
	cursor: pointer;
	padding: 0;
	transition: background-color 0.3s, transform 0.3s;
}

.carousel-dot:hover {
	background-color: rgba(0, 0, 0, 0.7);
}

.carousel-dot.is-active {
	background-color: #dd0000;
	transform: scale(1.2); /* アクティブなドットを少し大きく */
}