/* =====================================================
   フロントエンド — スライダー全体
   ===================================================== */

.csp-slider-wrapper {
	position: relative;
	width: 100%;
}

.csp-slider-wrapper .swiper {
	width: 100%;
	overflow: hidden;
}

/* Swiper 8 が初期化完了後に自動付与する .swiper-initialized を使い、
   クローン配置・transform 確定前の状態を完全に隠す。
   JS のタイミング制御不要でブラウザの描画タイミングに依存しない。 */
.csp-slider-wrapper .swiper:not( .swiper-initialized ) {
	opacity: 0;
}

.csp-slider-wrapper .swiper.swiper-initialized {
	transition: opacity 0.3s ease;
}

/* =====================================================
   スライド画像
   ===================================================== */

.csp-slide-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* =====================================================
   テキストオーバーレイ
   ===================================================== */

.swiper-slide {
	position: relative;
}

.csp-slide-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 24px 32px;
	background: linear-gradient( transparent, rgba( 0, 0, 0, 0.6 ) );
	color: #fff;
	z-index: 10;
}

.csp-slide-title {
	margin: 0 0 8px;
	font-size: 1.5rem;
	font-weight: bold;
	color: #fff;
	text-shadow: 0 1px 4px rgba( 0, 0, 0, 0.5 );
	line-height: 1.4;
}

.csp-slide-text {
	margin: 0;
	font-size: 0.95rem;
	color: rgba( 255, 255, 255, 0.9 );
	text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.5 );
	line-height: 1.7;
}

/* =====================================================
   ナビゲーション矢印 — 常にスライダー全体の縦中央に固定
   ===================================================== */

.csp-slider-wrapper {
	position: relative; /* 矢印の基準 */
}

/* .swiper-wrapper の高さに引きずられないよう .swiper-button-* を
   .csp-slider-wrapper 直下に移動し、そこを基準に top:50% で中央揃え */
.csp-nav-btn {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 10;
	color: var( --csp-nav-color, #ffffff );
	/* Swiper デフォルトの margin-top をリセット */
	margin-top: 0;
}

.csp-nav-btn::after {
	font-size: 24px;
}

.csp-nav-btn.swiper-button-prev { left: 10px; }
.csp-nav-btn.swiper-button-next { right: 10px; }

.csp-nav-hide-pc { display: none; }

@media ( max-width: 767px ) {
	.csp-nav-hide-sp { display: none; }
	.csp-nav-hide-pc { display: flex; }
}

/* =====================================================
   ページネーション
   ===================================================== */

/* 画像の下に出す場合：Swiper がインラインで position:absolute を
   書き込むため !important で上書きして通常フローに戻す */
.csp-pagination-outside {
	position: static !important;
	display: flex !important;
	justify-content: center;
	margin-top: 10px;
	width: 100%;
}

.csp-slider-wrapper .swiper-pagination-bullet {
	background: var( --csp-pagi-color, #ffffff );
	opacity: 0.5;
}

.csp-slider-wrapper .swiper-pagination-bullet-active {
	background: var( --csp-pagi-color, #ffffff );
	opacity: 1;
}

.csp-slider-wrapper .swiper-pagination-fraction {
	color: var( --csp-pagi-color, #ffffff );
}

.csp-slider-wrapper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
	background: var( --csp-pagi-color, #ffffff );
}

/* =====================================================
   電光掲示板（マーキー）モード
   ===================================================== */

.csp-marquee .swiper-wrapper {
	transition-timing-function: linear !important;
}

.csp-marquee .swiper-slide {
	width: auto;
	flex-shrink: 0;
}

.csp-marquee .csp-slide-image img {
	width: auto;
	height: var( --csp-marquee-h, 200px );
	max-width: none;
	object-fit: cover;
}

@media ( max-width: 767px ) {
	.csp-marquee .csp-slide-image img {
		height: var( --csp-marquee-h-sp, var( --csp-marquee-h, 200px ) );
	}
}