/*!
slickスライドショーcss
*/

/*左右の矢印の色を変える*/
.slick-prev:before,
.slick-next:before {
    color: #fff;
}
/*左右の矢印の位置を変える*/
.slick-next {
    right: 20px;
    z-index: 99;
}
.slick-prev {
     left: 15px;
    z-index: 100;
}
/*スライド数のドットの色を変える*/
.slick-dots li.slick-active button:before,
.slick-dots li button:before {
    color: #000;
}


/*スライド画像の横幅可変*/
img {
    max-width: 100%;
     height: auto;
}
/*スライド画像のフェードイン*/
.slider{
    opacity: 0;
    transition: 2s;
}
.slick-initialized{
    opacity: 1
}



/*スライド画像の左右の透過*/
.mypattern .slick-slide:not(.slick-center) {
  -webkit-filter: opacity(70%);
  -moz-filter: opacity(70%);
  -o-filter: opacity(70%);
  -ms-filter: opacity(70%);
  filter: opacity(70%);
  transition: 0.2s linear;
}

/*フェードイン設定*/
@keyframes fadeIn {
0% {
    opacity: 0;/* 透明 */
}
100% {
    opacity: 1;/* 不透明 */
}
}

.fadeinimg {
animation-name: fadeIn;/* アニメーション名 */
animation-duration: 5s;/* アニメーション時間 */
}