@charset "utf-8";

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

.slider img {
  width: auto; /*スライダー内の画像を60vwにしてレスポンシブ化*/
  height: auto;
}

.slider .slick-slide {
  transform: scale(0.8); /*左右の画像のサイズを80%に*/
  transition: all 0.5s; /*拡大や透過のアニメーションを0.5秒で行う*/
  opacity: 0.5; /*透過50%*/
}

.slider .slick-slide.slick-center {
  transform: scale(1); /*中央の画像のサイズだけ等倍に*/
  opacity: 1; /*透過なし*/
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/

.slick-arrow {
  position: relative;
  z-index: 2 !important;
  width: 30px !important;
  height: 30px !important;
}
.prev_icon {
  position: absolute;
  top: 40%;
  left: -15px;
  transform: translate(0, -50%);
  width: 30px;
  z-index: 1;
}
.next_icon {
  position: absolute;
  top: 40%;
  right: -15px;
  transform: translate(0, -50%);
  width: 30px;
  z-index: 1;
}
.slick-next {
  right: -30px !important;
}

.slick-prev {
  left: -30px !important;
}
/*ドットナビゲーションの設定*/

.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; /*ドットボタンの現在地表示の色*/
}