.slider {
     padding: 0;
   }
   .slider img {
     width: 100%;
     height: auto;
   }
   .slick-slide {
     height: auto;
   }
   .slick-prev {
     left: 10px;
   }
   .slick-next {
     right: 10px;
   }
   .slick-prev, .slick-next {
     z-index: 100;
   }
   .slick-prev::before, .slick-next::before {
     font-size: 24px;
   }
   .slick-dots {
     bottom: -40px;
   }

/*===============================================
●pc用のcssを記述
===============================================*/
@media screen and (min-width:900px) {
	
.thumbnail {
	width: 100%;
	margin: 0 auto 0px;
	padding: 0;
	display: block;

}

.imgbox {
	width: 100%!important;
	display: block;
}

.thumbnail img{
  width: 100% !important;
	display: block;	
}
.thumbnail-thumb img{
  width: 100%!important;
	display: block;	
}
.thumbnail-thumb {
	 width: 100%!important;
	height: auto;
	margin: 0 auto;
}
	

	
.thumbnail-thumb li {
  margin: 5px;
}
.thumbnial-thumb .slick-next {
  right: 20px;
  z-index: 100;
}
.thumbnail-thumb .slick-prev {
  left: 15px;
  z-index: 100;
}
.thumbnail-thumb .slick-current {
  opacity: 0.5;
}
.thumbnail-thumb div div div {

  cursor: pointer;
}
	
}

/*ここからスマートフォン用環境の設定---------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media screen and (max-width:899px) {

.thumbnail {
	margin: 0 auto 0px;
	padding: 0;
	display: block;
	width: 100%x;
}

.imgbox {
	width: 100%!important;
	display: block;
}

.thumbnail img{
  width: 100% !important;
	display: block;	
}
.thumbnail-thumb img{
  width: 100%!important;
	display: block;	
}
.thumbnail-thumb {
	margin: 0 auto;
	width: 100%;
}
.thumbnail-thumb li {
  margin: 5px;
}
.thumbnial-thumb .slick-next {
  right: 20px;
  z-index: 100;
}
.thumbnail-thumb .slick-prev {
  left: 15px;
  z-index: 100;
}
.thumbnail-thumb .slick-current {
  opacity: 0.5;
}
.thumbnail-thumb div div div {
  cursor: pointer;
}	
	

}