@charset "UTF-8";
/**
 * 商品スライダー（Swiper 版） スタイル
 *
 * 設置場所: /wp-content/themes/【子テーマ名】/css/product-slider.css
 */

/* ============================================================
 * カスタムプロパティ（ここを変えると全体の色や余白が変わります）
 * ============================================================ */

.product-slider {
	--ps-accent: #f0a06a;
	/* 矢印・ページャの色 */
	--ps-thumb-active: #f0a06a;
	/* 選択中サムネイルの枠線色 */
	--ps-bg: #f7f7f7;
	/* 画像の余白部分の背景色 */
	--ps-radius: 6px;
	--ps-gap: 12px;

	margin: 0 0 2em;
	position: relative;
}


/* ============================================================
 * メインスライダー
 * ============================================================ */

.product-slider__main {
	background: var(--ps-bg);
	border-radius: var(--ps-radius);
	overflow: hidden;
}

.product-slider__slide {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ps-bg);
}

/* 画像は切り抜かず、枠内に収める */
.product-slider__slide img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 70vh;
	object-fit: contain;
}

/* multi レイアウトでは高さを揃える */
.product-slider--multi .product-slider__slide {
	aspect-ratio: 4 / 3;
	border-radius: var(--ps-radius);
	overflow: hidden;
}

.product-slider--multi .product-slider__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	max-height: none;
}


/* ============================================================
 * ナビゲーション（矢印・ページャ）
 * ============================================================ */

.product-slider .swiper-button-prev,
.product-slider .swiper-button-next {
	width: 40px;
	height: 40px;
	margin-top: -20px;
	background: rgba(255, 255, 255, .9);
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
	color: var(--ps-accent);
	transition: opacity .2s;
}

/* マウスが使える環境では、矢印はスライダーにホバーしたときだけ出す
   （タッチ端末はホバーが無いので常に表示したまま） */
@media (hover: hover) {

	.product-slider .swiper-button-prev,
	.product-slider .swiper-button-next {
		opacity: 0;
		visibility: hidden;
	}

	.product-slider:hover .swiper-button-prev,
	.product-slider:hover .swiper-button-next,
	.product-slider:focus-within .swiper-button-prev,
	.product-slider:focus-within .swiper-button-next {
		opacity: 1;
		visibility: visible;
	}

	/* スライドが1枚だけのときは出さない */
	.product-slider.is-single:hover .swiper-button-prev,
	.product-slider.is-single:hover .swiper-button-next {
		display: none;
	}
}

.product-slider .swiper-button-prev::after,
.product-slider .swiper-button-next::after {
	font-size: 15px;
	font-weight: 700;
}

.product-slider .swiper-pagination-bullet-active {
	background: var(--ps-accent);
}

/* スライドが1枚だけのときは操作系を隠す */
.product-slider.is-single .swiper-button-prev,
.product-slider.is-single .swiper-button-next,
.product-slider.is-single .swiper-pagination,
.product-slider.is-single .product-slider__thumbs {
	display: none;
}


/* ============================================================
 * サムネイル
 * ============================================================ */

.product-slider__thumbs {
	margin-top: var(--ps-gap);
}

.product-slider__thumb {
	position: relative;
	cursor: pointer;
	border: 2px solid transparent;
	border-radius: 4px;
	overflow: hidden;
	opacity: .55;
	transition: opacity .2s, border-color .2s;
	aspect-ratio: 1 / 1;
	background: var(--ps-bg);
}

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

.product-slider__thumb:hover {
	opacity: .85;
}

/* Swiper が選択中サムネイルに付けるクラス */
.product-slider__thumbs .swiper-slide-thumb-active {
	opacity: 1;
	border-color: var(--ps-thumb-active);
}

/* 動画サムネイルには小さな再生マークを重ねる */
.product-slider__thumb--video::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7px 0 7px 12px;
	border-color: transparent transparent transparent #fff;
	filter: drop-shadow(0 0 3px rgba(0, 0, 0, .6));
}


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

.product-slider__video-trigger {
	position: relative;
	display: block;
	width: 100%;
	flex: 0 0 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
}

.product-slider__video-trigger img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 70vh;
	object-fit: contain;
	margin: 0 auto;
}

/* 再生ボタン（YouTube 風） */
.product-slider__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 68px;
	height: 48px;
	background: rgba(0, 0, 0, .72);
	border-radius: 12px;
	transition: background .2s;
}

.product-slider__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 52%;
	transform: translate(-50%, -50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 0 10px 17px;
	border-color: transparent transparent transparent #fff;
}

.product-slider__video-trigger:hover .product-slider__play,
.product-slider__video-trigger:focus-visible .product-slider__play {
	background: #ff0000;
}

/* 再生中の iframe（16:9 を保つ） */
.product-slider__video-frame {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	background: #000;
}

.product-slider__video-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}


/* ============================================================
 * スマートフォン
 * ============================================================ */

@media (max-width: 640px) {

	.product-slider {
		--ps-gap: 8px;
	}

	.product-slider__slide img {
		max-height: 55vh;
	}

	.product-slider .swiper-button-prev,
	.product-slider .swiper-button-next {
		width: 32px;
		height: 32px;
		margin-top: -16px;
	}

	.product-slider .swiper-button-prev::after,
	.product-slider .swiper-button-next::after {
		font-size: 12px;
	}

	.product-slider__play {
		width: 54px;
		height: 38px;
	}

	.product-slider__play::after {
		border-width: 8px 0 8px 13px;
	}
}

/* ── スライドの高さを揃える ── */
:root {
	/* 縦横比。4/3、1/1、16/9 など好みで調整 */
	--product-slider-ratio: 4 / 3;
}

.product-slider__main .swiper-slide {
	aspect-ratio: var(--product-slider-ratio);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/* 画像・動画サムネイル・再生後の iframe をすべて枠内に収める */
.product-slider__main .swiper-slide img,
.product-slider__main .swiper-slide iframe {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* 動画スライドのボタンを枠いっぱいに */
.product-slider__video-trigger {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

/* サムネイルも揃える */
.product-slider__thumbs .swiper-slide {
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.product-slider__thumbs .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}