/*
 * Swiper Lite — Swiperの見た目を、ネイティブ横スクロールで再現する
 *
 * 本物の Swiper が読み込む swiper-bundle.min.css（18KB）の代わり。
 * Swiper が付ける基本レイアウト（.swiper-wrapper を横並び、.swiper-slide を
 * 幅auto で並べる）だけを再現する。テーマ側の各スライダー固有のCSS
 * （.cb_case_study_slider など）はそのまま活きる。
 *
 * ------------------------------------------------------------------
 * Swiper のデフォルトCSSが提供していたもの（必要な分だけ移植）
 * ------------------------------------------------------------------
 */

/* コンテナ */
.swiper,
.swiper-container {
	margin-left: auto;
	margin-right: auto;
	position: relative;
	overflow: hidden;
	list-style: none;
	padding: 0;
	z-index: 1;
}

/* スライドを横に並べる帯 */
.swiper-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	box-sizing: content-box;
}

/* 各スライド */
.swiper-slide {
	flex-shrink: 0;
	position: relative;
	transition-property: transform;
}

/* ------------------------------------------------------------------
 * シムが有効なとき（.drh-swscroll）: transform ではなく overflow で動かす
 * ------------------------------------------------------------------ */
.drh-swscroll .swiper-wrapper {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	/* Swiper と同じく、はみ出しても親が overflow:hidden なので横スクロールバーは出ない。
	   ここではスクロールバーを隠して、Swiperの見た目に寄せる。 */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.drh-swscroll .swiper-wrapper::-webkit-scrollbar {
	display: none;
}

/* freeMode 相当（自由な横スクロール） */
.drh-swscroll--free .swiper-wrapper {
	scroll-snap-type: none;
}

/* PC・2枚表示・自動送り相当（スライドを左端にスナップ） */
.drh-swscroll--paged .swiper-wrapper {
	scroll-snap-type: x mandatory;
}

.drh-swscroll--paged .swiper-slide {
	scroll-snap-align: start;
}

@media (prefers-reduced-motion: reduce) {
	.drh-swscroll .swiper-wrapper {
		scroll-behavior: auto;
	}
}

/* ------------------------------------------------------------------
 * ページネーション（ドット）
 * Swiper のデフォルト swiper-pagination-bullet を再現する
 * ------------------------------------------------------------------ */
.swiper-pagination-bullet {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin: 0 4px;
	border-radius: 50%;
	background: #000;
	opacity: 0.2;
	cursor: pointer;
	transition: opacity 0.2s, background 0.2s;
}

.swiper-pagination-bullet-active {
	opacity: 1;
	background: var(--main_color, #1f3a2e);
}