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

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

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

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

.ranknumber {
   width: 30%;
   text-align: right;
}

.ranknumber img {
   width: 100%;
   border: none;
}

/*矢印の設定*/

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

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

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

.slick-prev:before, .slick-next:before {
   opacity: 0;
}
.slick-next:before {
   content: none;
}

@media (max-width: 768px) {
  .slider {/*横幅50%で左右に余白を持たせて中央寄せ*/
    width:90%;
     margin:0 auto;
  }
}
/*ドットナビゲーションの設定*/

/* .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;
} */