@charset "UTF-8";
/* CSS Document */
/* ===============================

スライダー

=============================== */
@supports (aspect-ratio: 1 / 1) {
	:root {
		--slide-aspect: 1 / 1;
	}
}
@supports not (aspect-ratio: 1 / 1) {
	:root {
		--slide-aspect: 100%;
	}
}
/* =================
コンテナ */
.products-sliders__wrappper{
	gap: 16px;
}
.products-slider{
	-webkit-box-flex: 1;
	    -ms-flex-positive: 1;
	        flex-grow: 1;
	width: calc(50% - calc(16px * 2));
	min-width: 244px;
}
.products-slide {
	cursor: -webkit-grab;
	cursor: grab;
}

.products-slide img {
	display: inline-block;

	width: 100%;
	height: 100%;

	aspect-ratio: var(--slide-aspect);
	-o-object-fit: cover;
	   object-fit: cover;
}
@supports (aspect-ratio: 16 / 9) {
	.products-slide img {
		aspect-ratio: var(--slide-aspect);
	}
}
@supports not (aspect-ratio: 16 / 9) {
	.products-slide {
		position: relative;
	}
	.products-slide::before {
		content: "";
		display: inline-block;

		padding-top: var(--slide-aspect);
	}
	.products-slide img {
		position: absolute;
		top: 0;
		left: 0;
	}
}
/* ==========================================
ここから個別設定 */
/* =============================

index.html roles-sliderの設定

================================ */
/* キャプション */
.products-slide__caption {
	font-size: var(--txt);
	color: #fff;

	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;

	position: absolute;
	bottom: min(2.5vw, 1em);
	right: min(2.5vw, 1em);

	opacity: 0;

	-webkit-transition: opacity .6s ease-in-out,
	-webkit-transform .6s ease-in-out;

	transition: opacity .6s ease-in-out,
	-webkit-transform .6s ease-in-out;

	transition: opacity .6s ease-in-out,
	transform .6s ease-in-out;

	transition: opacity .6s ease-in-out,
	transform .6s ease-in-out,
	-webkit-transform .6s ease-in-out;
	-webkit-transform: translateX(40px);
	        transform: translateX(40px);
}
.products-slide.is-active .products-slide__caption {
	opacity: 1;
	-webkit-transform: none;
	        transform: none;
}