@charset "UTF-8";

.slick-prev {
    left: 30px; /* 左側の矢印アイコンの位置 */
  }
  
  .slick-next {
    right: 100px; /* 右側の矢印アイコンの位置 */
  }
 
  .slick-arrow {
    z-index: 2; /* スライドの内側に表示する場合は表示順を前面にする */
  }

  /* ================================================== */

  .slick-arrow {
    z-index: 2 !important; /* 表示順を前面にする */
    width: 50px !important; /* アイコンのサイズ（幅） */
    height: 50px !important; /* アイコンのサイズ（高さ） */
  }
 
  .slick-next:before {
    background: url(../images/矢印ボタン\　右3.png) no-repeat !important;
     /* 右向きアイコン画像のパスを指定 */
      /* .slick-arrowのサイズ指定が正確ならno-repeatは不要 */
    background-size: contain !important;
  }
 
  .slick-prev:before {
    background: url(../images/矢印ボタン\　右3.png) no-repeat !important;
    /* 左向きアイコン画像のパスを指定 */
    background-size: contain !important;
    /* アイコンの左右を反転（反転させる場合はコメントアウトを外す） */
    transform: scale(-1, 1);
  }
 
  .slick-arrow:before {
    /* 画像アイコンを所定の位置に表示させるための設定 */
    content: "" !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
  }

  /*  */

  .slick-dots {
    /* ドットの上下位置（マイナス値が大きいほど下） */
    bottom: 730px;
    left: -30px;
}

.slick-dots li {
    /* ドットの間隔 */
    margin: 0 12px;
    /* ドットを表示するボックスのサイズ */
    width: 10px;
    height: 10px;
}

.slick-dots li button:before {
    content: '';
    /* ドットのサイズ */
    width: 10px;
    height: 10px;
    /* ドットを丸くする（削除または0にすれば四角くなる） */
    border-radius: 50%;
    /* ドットの色 */
    background: #acacac;
    /* ドットの不透明度（0～1） */
    opacity: .5;
}

.slick-dots li.slick-active button:before {
    /* アクティブドットの色 */
    background: rgb(94, 76, 54);
    /* アクティブドットの不透明度（0～1） */
    opacity: 1;
}