.carousel-viewport {
	--w-normal: 200px;
	/* 通常スライド幅   */
	--w-active: 280px;
	/* アクティブ幅     */
	--h: 280px;
	/* 高さ             */
	--gap: 16px;
	/* スライド間の間隔 */
	--duration: 420ms;
	/* アニメーション   */

	width: 100%;
	overflow: hidden;
}

.carousel-track {
	display: flex;
	align-items: center;
	will-change: transform;
}

.carousel-slide {
	flex-shrink: 0;
	margin-right: var(--gap);
	opacity: 0.45;
	transition:
		width var(--duration) cubic-bezier(0.25, 0.46, 0.45, 0.94),
		opacity var(--duration) ease;
	width: var(--w-normal);
	height: var(--h);
	display: flex;
	align-items: center;
}

.carousel-slide.is-active {
	width: var(--w-active);
	opacity: 1;
}

.carousel-slide img {
	width: 100%;
	display: block;
	pointer-events: none;
}

/* ── ボタン ── */
.carousel-nav {
	display: flex;
	gap: 12px;
}

.carousel-nav .btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	font-size: 1.1rem;
	cursor: pointer;
	transition: background 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
}

.carousel-nav .btn:hover {
	background: rgba(255, 255, 255, 0.22);
}

/* ── ドット ── */
.carousel-dots {
	display: flex;
	gap: 8px;
}

.carousel-dots .dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	cursor: pointer;
	transition: background 0.3s, transform 0.3s;
}

.carousel-dots .dot.is-active {
	background: #fff;
	transform: scale(1.4);
}

/* ── トグルボタン ── */
.toggles {
	display: flex;
	gap: 10px;
}

.toggle-btn {
	padding: 8px 20px;
	border-radius: 99px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.4);
	font-size: 0.82rem;
	cursor: pointer;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.toggle-btn.active {
	background: rgba(255, 255, 255, 0.18);
	border-color: rgba(255, 255, 255, 0.6);
	color: #fff;
}