/*==================================================
スライダーのためのcss
===================================*/
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
  width:96%;
   margin:0 auto;
}

.slider img {
   width:100%;/*スライダー内の画像を横幅100%に*/
   height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
   margin:0 10px;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
   position: absolute;/*絶対配置にする*/
   top: 30%;
   cursor: pointer;/*マウスカーソルを指マークに*/
   outline: none;/*クリックをしたら出てくる枠線を消す*/
   border-top: 2px solid #666;/*矢印の色*/
   border-right: 2px solid #666;/*矢印の色*/
   height: 15px;
   width: 15px;
}

.slick-prev {/*戻る矢印の位置と形状*/
   left: -1.5%;
   transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
   right: -1.5%;
   transform: rotate(45deg);
}

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

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

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

.slick-dots button {
 background: #666;
   text-indent: -9999px;
   display: block;
   width: 12px;
   height: 12px;
   margin: 0 5px;
   outline: 0;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 50%;
}

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

@media screen and (min-width: 601px) and (max-width: 780px) {
 .slick-prev, 
 .slick-next {
   top: 36%;
 }
}

@media screen and (min-width: 1024px) {
 .slick-prev, 
 .slick-next {
   top: 33%;
 }
}
@media screen and (min-width: 501px) and (max-width: 600px) {
 .slick-prev, 
 .slick-next {
   top: 33%;
 }
}

button {
 border:none;
 padding:none;
 
}