@charset "utf-8";

/* ========================================================
/* スライダーのためのcss
=========================================================*/

.slider {
    width:100%;
    margin:0 auto;
}

.slider img {
    width:54vw;/*スライダー内の画像を54vwにしてレスポンシブ化*/
    height:auto;
}

.slider .slick-slide {
	transform: scale(1);/*左右画像サイズ100%*/
	transition: all .4s;/*アニメーションを0.4秒で行う*/
	opacity: 1;/*透過なし*/
	filter: grayscale(100%);
}

.slider .slick-slide.slick-center{
	transform: scale(1);/*中央の画像のサイズだけ等倍に*/
	opacity: 1;/*透過なし*/
	filter: grayscale(0%);
}



/*ドットナビゲーションの設定*/

.slick-dots {
    text-align:center;
	margin:20px 0 0 0;
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#ccc;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}



@media (max-width: 750px) {
.slider img {
    width:100vw;
}

.slider .slick-slide {
	filter: grayscale(0%);
}


}