/* Cordial Slideshow Pro - Frontend Styles */

.csp-slideshow {
	position: relative;
	width: var(--csp-width-pc, 100%);
	max-width: 100%;
	aspect-ratio: var(--csp-aspect-ratio, 16 / 9);
	overflow: hidden;
	margin: 0 auto;
	background: #111;
	border-radius: 4px;
}

.csp-track {
	position: relative;
	width: 100%;
	height: 100%;
}

.csp-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0 !important;
	visibility: hidden;
	pointer-events: none;
	will-change: transform, opacity;
	transition-property: opacity, transform, filter !important;
	transition-duration: var(--csp-duration, 800ms) !important;
	transition-delay: var(--csp-delay, 0ms) !important;
	transition-timing-function: var(--csp-easing, ease) !important;
}

.csp-slide.is-active {
	opacity: 1 !important;
	visibility: visible;
	pointer-events: auto;
	z-index: 2;
}

.csp-slide-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ===== エフェクト: フェード ===== */
.csp-slide.csp-fx-fade {
	opacity: 0 !important;
	transform: none !important;
}
.csp-slide.csp-fx-fade.is-active {
	opacity: 1 !important;
}

/* ===== エフェクト: スライド ===== */
.csp-slide.csp-fx-slide[data-dir="left"] {
	transform: translateX(100%) !important;
}
.csp-slide.csp-fx-slide[data-dir="right"] {
	transform: translateX(-100%) !important;
}
.csp-slide.csp-fx-slide[data-dir="top"] {
	transform: translateY(100%) !important;
}
.csp-slide.csp-fx-slide[data-dir="bottom"] {
	transform: translateY(-100%) !important;
}
.csp-slide.csp-fx-slide.is-active {
	transform: translate(0, 0) !important;
	opacity: 1 !important;
}

/* ===== エフェクト: ズーム ===== */
.csp-slide.csp-fx-zoom {
	transform: scale(1.15) !important;
	opacity: 0 !important;
}
.csp-slide.csp-fx-zoom.is-active {
	transform: scale(1) !important;
	opacity: 1 !important;
}

/* ===== エフェクト: ズーム＋フェード（複合） ===== */
.csp-slide.csp-fx-zoom-fade {
	transform: scale(1.08) !important;
	opacity: 0 !important;
	filter: blur(4px) !important;
}
.csp-slide.csp-fx-zoom-fade.is-active {
	transform: scale(1) !important;
	opacity: 1 !important;
	filter: blur(0) !important;
}

/* ===== エフェクト: パララックス ===== */
.csp-slide.csp-fx-parallax .csp-slide-img {
	transform: scale(1.2) translateY(0) !important;
	transition: transform 4s linear !important;
}
.csp-slide.csp-fx-parallax.is-active .csp-slide-img {
	transform: scale(1.2) translateY(-3%) !important;
}
.csp-slide.csp-fx-parallax {
	opacity: 0 !important;
}
.csp-slide.csp-fx-parallax.is-active {
	opacity: 1 !important;
}

/* ===== エフェクト: 3D回転 ===== */
.csp-slideshow {
	perspective: 1200px;
}
.csp-slide.csp-fx-rotate3d {
	transform: rotateY(90deg) !important;
	opacity: 0 !important;
	transform-origin: center center;
	backface-visibility: hidden;
}
.csp-slide.csp-fx-rotate3d.is-active {
	transform: rotateY(0deg) !important;
	opacity: 1 !important;
}

/* ===== キャプション ===== */
.csp-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 12px 20px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent);
	color: #fff;
	font-size: 14px;
	z-index: 3;
}

/* ===== 矢印ナビゲーション ===== */
.csp-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	background: rgba(0, 0, 0, 0.4);
	color: #fff;
	border: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	font-size: 18px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
}
.csp-arrow:hover {
	background: rgba(0, 0, 0, 0.7);
}
.csp-arrow-prev {
	left: 16px;
}
.csp-arrow-next {
	right: 16px;
}

/* ===== ドットナビゲーション ===== */
.csp-dots {
	position: absolute;
	bottom: 14px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	gap: 8px;
	z-index: 5;
}
.csp-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	border: none;
	cursor: pointer;
	padding: 0;
	transition: background 0.2s ease, transform 0.2s ease;
}
.csp-dot.is-active {
	background: #fff;
	transform: scale(1.25);
}

/* ===== サムネイルナビゲーション ===== */
.csp-thumbs {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	margin-top: 8px;
	padding: 4px;
}
.csp-thumb {
	flex: 0 0 auto;
	width: 64px;
	height: 40px;
	border: 2px solid transparent;
	padding: 0;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}
.csp-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.csp-thumb.is-active {
	opacity: 1;
	border-color: #fff;
}

/* ===== モバイル: シンプルモード（パフォーマンス優先） ===== */
.csp-mobile-simple .csp-slide {
	transition-property: opacity;
}

@media (max-width: 768px) {
	.csp-mobile-simple.csp-slideshow .csp-slide.csp-fx-slide,
	.csp-mobile-simple.csp-slideshow .csp-slide.csp-fx-zoom,
	.csp-mobile-simple.csp-slideshow .csp-slide.csp-fx-rotate3d,
	.csp-mobile-simple.csp-slideshow .csp-slide.csp-fx-zoom-fade,
	.csp-mobile-simple.csp-slideshow .csp-slide.csp-fx-parallax {
		transform: none;
		filter: none;
	}
	.csp-arrow {
		width: 36px;
		height: 36px;
		font-size: 14px;
	}
}

/* ===== アクセシビリティ: 動きを減らす設定を尊重 ===== */
.csp-respect-motion .csp-slide {
	transition-duration: var(--csp-duration, 800ms);
}
@media (prefers-reduced-motion: reduce) {
	.csp-respect-motion .csp-slide {
		transition-duration: 200ms !important;
		transform: none !important;
		filter: none !important;
	}
}