@charset "utf-8";

/* =======================================================================================
	swiper_setting.css															2026.09
	-------------------------------------------------------------------------------------
	各ページで共通のSwiperデザインをまとめたもの。
	ページ固有のCSSには、ここからアレンジ・調整が入るもの（個別の余白・配色など）のみ記載する。

	* < Setting >
	- js_swiperFade			… フェード切替スワイパー共通のpaginationデザイン
	- js_swiperNavBtn		… スライド仕様の丸型prev/nextボタン共通デザイン
	- js_swiperSpCarousel	… SP限定で生成するSwiperカルーセル共通のPC側スキャフォールド
	  [!] js_swiperSpCarouselのPC非表示ルールが、後発のCSSで再度display指定されると
	      詳細度が同じため打ち消されてしまう。このファイル内では必ず最後に記載すること。
======================================================================================= */

/* js_swiperFade | フェード切替スワイパー共通のpaginationデザイン（白いビュレット）
------------------------------------------------------------------------ */
	.js_swiperFade .swiper-pagination {
		bottom: 0 !important;
		text-align: left;
		padding-left: 8px;
	}
	.js_swiperFade .swiper-pagination-bullet {
		background: #FFF;
		opacity: .6;
		border-radius: 0;
	}
	.js_swiperFade .swiper-pagination-bullet-active {
		opacity: 1;
	}


/* js_swiperNavBtn | スライド仕様の丸型prev/nextボタン＋pagination位置の共通デザイン
------------------------------------------------------------------------ */
	.js_swiperNavBtn .swiper-pagination {
		position: static;
		text-align: center;
	}
	.js_swiperNavBtn[data-colbox-size~="maxCol4"] > .swiper-pagination {
		width: 100%;
	}
	.js_swiperNavBtn .swiper-button-prev,
	.js_swiperNavBtn .swiper-button-next {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 40px;
		height: 40px;
		margin-top: -20px;
		border-radius: 100%;
		background: rgba(var(--site-variationColor-blackish), .6);
		transition: background-color .3s ease, opacity .3s ease;
	}
	.js_swiperNavBtn .swiper-button-prev {
		left: -20px;
	}
	.js_swiperNavBtn .swiper-button-next {
		right: -20px;
	}
	.js_swiperNavBtn .swiper-button-prev::after,
	.js_swiperNavBtn .swiper-button-next::after {
		content: none;
	}
	.js_swiperNavBtn .swiper-button-prev::before,
	.js_swiperNavBtn .swiper-button-next::before {
		content: "";
		display: block;
		width: 26%;
		aspect-ratio: 1;
		border-top: 2px solid rgba(var(--site-variationColor-whitish), 1);
		border-right: 2px solid rgba(var(--site-variationColor-whitish), 1);
	}
	.js_swiperNavBtn .swiper-button-prev::before {
		transform: rotate(-135deg);
		margin-left: 15%;
	}
	.js_swiperNavBtn .swiper-button-next::before {
		transform: rotate(45deg);
		margin-right: 15%;
	}
	.js_swiperNavBtn .swiper-button-prev.swiper-button-disabled,
	.js_swiperNavBtn .swiper-button-next.swiper-button-disabled {
		opacity: .3;
		pointer-events: none;
	}
	@media (hover: hover) and (pointer: fine) {
		.js_swiperNavBtn .swiper-button-prev:not(.swiper-button-disabled):hover,
		.js_swiperNavBtn .swiper-button-next:not(.swiper-button-disabled):hover {
			background: rgba(var(--site-variationColor-blackish), .85);
		}
	}


/* js_swiperSpCarousel | SP限定で生成するSwiperカルーセル共通のPC側スキャフォールド
------------------------------------------------------------------------
	*	900px超はJS側でSwiperを生成しないため（swiper_setting.js initSpSwiper参照）、
	*	Swiperの入れ子構造（[任意のラッパー] > .swiper > .swiper-wrapper）を display:contents で透過させ、
	*	.swiper-slideをgeneralColBoxの直接の並び要素として扱えるようにする。
	*	[data-colbox-size~="maxColX"] > * はDOM上の直接の子にしか効かないため、
	*	同じ計算式（base.css generalColBox参照）を.swiper-slideへ改めて指定する。
------------------------------------------------------------------------ */
@media screen and (max-width: 900px) {
	.js_swiperSpCarousel[data-colbox-size~="maxCol1"] > *,
	.js_swiperSpCarousel[data-colbox-size~="maxCol2"] > *,
	.js_swiperSpCarousel[data-colbox-size~="maxCol3"] > *,
	.js_swiperSpCarousel[data-colbox-size~="maxCol4"] > * {
		width: auto;
	}
}
@media print, screen and (min-width: 900.02px){
	.js_swiperSpCarousel > *:first-child,
	.js_swiperSpCarousel .swiper,
	.js_swiperSpCarousel .swiper-wrapper {
		display: contents;
	}
	.js_swiperSpCarousel[data-colbox-size~="maxCol1"] .swiper-slide {
		width: 100%;
		height: auto;
	}
	.js_swiperSpCarousel[data-colbox-size~="maxCol2"] .swiper-slide {
		width: calc((100% - (var(--base-generalColBox-margin-column) * 1)) / 2);
		height: auto;
	}
	.js_swiperSpCarousel[data-colbox-size~="maxCol3"] .swiper-slide {
		width: calc((100% - (var(--base-generalColBox-margin-column) * 2)) / 3);
		height: auto;
	}
	.js_swiperSpCarousel[data-colbox-size~="maxCol4"] .swiper-slide {
		width: calc((100% - (var(--base-generalColBox-margin-column) * 3)) / 4);
		height: auto;
	}
	.js_swiperSpCarousel .swiper-button-prev,
	.js_swiperSpCarousel .swiper-button-next,
	.js_swiperSpCarousel .swiper-pagination {
		display: none;
	}
}