@charset "UTF-8";


/*===========================
slider
============================ */


/*------ スライダーの横幅 ------*/

.slider {
  max-width: 386px;
  width: 100%;
  margin: 0 auto;
}


/*------ スライダー画像 ------*/

.slider img {
  width: 100%;
}


/*-------- 高さ調整 ----------*/

.slider .slick-slide {
  height: auto !important;
}


/*---------- 矢印 ----------*/

.slider .slick-next {
  right: 10px !important;
}

.slider .slick-prev {
  left: 10px !important;
}

.slider .slick-arrow {
  width: 40px !important;
  height: 40px !important;
  z-index: 2 !important;
}

.slider .slick-arrow:before {
  content: ""!important;
  width: 100%!important;
  height: 100%!important;
  position: absolute;
  top: 5em;
  left: 0;
}

.slick-next:before {  
  background: url(../img/ico-arrow_r.png) no-repeat !important;
  background-size: 100% auto !important;
}

.slick-prev:before {
  background: url(../img/ico-arrow_l.png) no-repeat !important;
  background-size: 100% auto !important;
}

@media screen and (max-width: 1200px) {
.slider .slick-arrow:before {
  top: 4em;
  }
  .slider .slick-arrow {
    width: 30px !important;
    height: 30px !important;
  }
}

@media screen and (max-width:1100px) {
.slider .slick-arrow:before {
  top: 6.4em;
  }
}


@media screen and (max-width: 960px) {
.slider .slick-arrow:before {
  top: 5.5em;
  }
}


/*---------- ドット ----------*/
.slick-dots {
  position: relative;
  bottom: -15px;
}


/*ドット同士の間の距離を変える*/
.slick-dots li {
  width: 15px;
}


/*ドットのサイズと色を大きくする*/
.slick-dots li button:before {
  font-size: 12px;
  color: #0a53ba;
  opacity: 透明度;
}


/*アクティブなスライドのドット色*/
.slick-dots li.slick-active button:before {
  color: #0a53ba;
  opacity: 1.0;
}

@media screen and (max-width: 767px) {
.slick-dots {
   bottom: -25px;
  }
  .slick-dots li {
    width: 20px;
  }
  .slick-dots li button:before {
    font-size: 16px;
  }
}