/* ========================================================================
 * c-slider.css（art-cube Slider v1.8 MirrorFlow+）
 * ------------------------------------------------------------------------
 * DOM非依存・GPU駆動・左右対称の完美構造。
 * ======================================================================== */

.c-slider{
	position : relative;
	overflow : hidden;
	width : 100%;
	max-width : 100%;
}

.c-slider__track{
	display : flex;
	flex-wrap : nowrap;
	will-change : transform;
	transform : translate3d(0,0,0);
	backface-visibility : hidden;
}

.c-slider__item{
	flex : 0 0 auto;
	width : 250px;
	margin-right : 10px;
	border-radius : 6px;
	background : #222;
	color : #FFF;
}

.c-slider__figure{
	position : relative;
	width : 100%;
	aspect-ratio : 4 / 3;
	margin : 0;
	overflow : hidden;
	border-radius : 6px 6px 0 0;
}

.c-slider__img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	transition : transform 0.6s ease, opacity 0.6s ease;
}
.c-slider__item:hover .c-slider__img{
	transform : scale(1.08);
	opacity : 0.9;
}

.c-slider__caption{
	background : rgba(0, 0, 0, 0.55);
	text-align : center;
	padding : 8px;
	font-size : 14px;
}
.c-slider__title{
	margin : 0;
	font-weight : 500;
	overflow : hidden;
	text-overflow : ellipsis;
	white-space : nowrap;
}

.c-slider__ctrl{
	position : absolute;
	top : 50%;
	transform : translateY(-50%);
	padding : 10px 20px;
	background : rgba(0, 0, 0, 0.5);
	color : #FFF;
	border-radius : 2em;
	cursor : pointer;
	user-select : none;
	font-weight : bold;
	z-index : 10;
	transition : background 0.3s ease;
}
.c-slider__ctrl:hover{
	background : rgba(0, 0, 0, 0.8);
}
.c-slider__ctrl--left{ left : 10px; }
.c-slider__ctrl--right{ right : 10px; }

@media (max-width: 768px){
	.c-slider__item{ width : 180px; margin-right : 6px; }
	.c-slider__caption{ font-size : 12px; padding : 6px 8px; }
	.c-slider__ctrl{ padding : 6px 12px; font-size : 11px; }
}