/*=============================================================
	各種スライダー
=============================================================*/

/*------------------------------------------------------------
	JavaScript有効時
-------------------------------------------------------------*/

/* JavaScript有効時は一旦非表示 */
html.enable-javascript .slider-sample {
	visibility: hidden;
}

/* 画像読み込み後に表示 */
html.enable-javascript.window-load .slider-sample {
	visibility: visible;
}

/*------------------------------------------------------------
	Main Slider
-------------------------------------------------------------*/

.main-slider-area {
	position: relative;
	width: 100%;
	height: 520px;
	box-sizing: border-box;
}

#main-slide {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
	width: 100%;
	height: 520px;
	background-color: #eee;
}

/* スライド共通 */
#main-slide .slick-list {
	overflow: hidden;
}

#main-slide .slick-slide {
	padding: 0;
}

/* 中央以外のスライド演出（PCのみ） */
#main-slide .slick-slide:not(.slick-center) {
	-webkit-filter: saturate(50%);
	-o-filter: saturate(50%);
	filter: saturate(50%);
	transition: 0.2s linear;
}

/* 画像共通 */
#main-slide .slide-img,
#main-slide .slide-img picture,
#main-slide .slide-img picture img {
	width: 100%;
	height: 520px;
	object-fit: cover;
	display: block;
}

/*------------------------------------------------------------
	Tablet
-------------------------------------------------------------*/
@media screen and (max-width: 768px) and (min-width: 481px) {

	.main-slider-area,
	#main-slide,
	#main-slide .slide-img,
	#main-slide .slide-img picture,
	#main-slide .slide-img picture img,
	#main-slide .slick-slide {
		height: 370px;
	}

	/* transform解除 */
	#main-slide .slick-slide,
	#main-slide .slick-slide:not(.slick-center),
	#main-slide .slick-center {
		transform: scale(1);
	}
}

/*------------------------------------------------------------
	Mobile
-------------------------------------------------------------*/
@media screen and (max-width: 480px) {

	.main-slider-area,
	#main-slide,
	#main-slide .slide-img,
	#main-slide .slide-img picture,
	#main-slide .slide-img picture img,
	#main-slide .slick-slide {
		height: 300px;
	}

	/* transform解除 */
	#main-slide .slick-slide,
	#main-slide .slick-slide:not(.slick-center),
	#main-slide .slick-center {
		transform: scale(1);
	}
}

/*-----------------------------------------------------------*/