@charset "utf-8";

/*------------------------------------------------------------------------------------------------------------
# Slider 追加
------------------------------------------------------------------------------------------------------------*/
/*ロード時*/
.slider{
	opacity: 0;
	transition: opacity .3s linear;
}
.slider.slick-initialized{
	opacity: 1;
}

/*スライダー全体の位置調整*/
ul {
	margin: 0;
	padding: 0;
}

/*ドットのサイズ上書き*/
.slick-dots li button:before {
	font-size: 8px;
}
.slick-dots li{
	width: 20px;
}
.slick-slide {
	margin: 5px 0 10px 0;
}

/*ドットの色*/
.slick-dots li button::before {
	opacity: 1;
	color: #bebebe;
}
.slick-dots li.slick-active button::before {
	opacity: 1;
	color: black;
}

/*矢印上書き*/
.slick-prev {
	left: 100px;
}
.slick-next {
	right: 100px;
}
.slick-prev,
.slick-next {
	z-index: 100;
}
.slick-prev:before,
.slick-next:before {
	color: #000;
}

/*サムネールのサイズ*/
.slider img {
	width: 380px;
	transform: scale(0.8);
	opacity: 0.5;
	transition: 0.5s;
	box-shadow: 0 0 5px #e7e7e7;
}
.slider .slick-center img {
	transform: scale(1);
	opacity: 1;
}
@keyframes open {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@media screen and (max-width: 768px) {
	.slider img {
		width: 300px;
	}
	.slick-dots li button:before {
		font-size: 8px;
	}
}