@charset "UTF-8";

.slider {
    position:relative;
    z-index: 1;/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
    height: auto;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
  }
  /*　背景画像設定　
  
.slider-item01 {
    background:url(../img/slide/slider-item01.jpg);
}
.slider-item02 {
    background:url(../img/slide/slider-item02.jpg);
}
.slider-item03 {
    background:url(../img/slide/slider-item03.jpg);
}
*/

.img {
    width: 100%;
    display: block;
    margin: 0 auto;
  }

.slider li {
    list-style: none;
}
/*.slider img{
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする:
    height:100vh; /*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする
    background-repeat: no-repeat;/*背景画像をリピートしない
    background-position: center;/*背景画像の位置を中央に
    object-fit: cover;
    margin-bottom: 1.5rem;
}
*/
  .slider-item{
    width: 100%;/*/各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height:auto; /*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;
    margin-bottom: 1.5rem;
    min-height: 200px;
  }
  .slider-item img {
    max-height: 100%;
    width: auto; /* 幅をautoに設定して、アスペクト比を維持 */
}
  /*矢印の設定*/
  
  .slick-prev, 
  .slick-next {
      position: absolute;
      z-index: 3;
      top: 42%;
      cursor: pointer;/*マウスカーソルを指マークに*/
      outline: none;/*クリックをしたら出てくる枠線を消す*/
      border-top: 2px solid #fff;/*矢印の色*/
      border-right: 2px solid #fff;/*矢印の色*/
      height: 25px;
      width: 25px;
  }
  
  .slick-prev {/*戻る矢印の位置と形状*/
      left:2.5%;
      transform: rotate(-135deg);
  }
  
  .slick-next {/*次へ矢印の位置と形状*/
      right:2.5%;
      transform: rotate(45deg);
  }
  
  /*ドットナビゲーションの設定*/
  
  .slick-dots {
      position: relative;
      z-index: 3;
      text-align:center;
      margin-top:2em;
    /*ドットの位置*/
  }
  
  .slick-dots li {
      display:inline-block;
      margin:0.6em;
  }
  
  .slick-dots button {
      color: transparent;
      outline: none;
      width:0.5em;/*ドットボタンのサイズ*/
      height:0.5em;/*ドットボタンのサイズ*/
      display:block;
      border-radius:50%;
      background:#c9d5ce/*ドットボタンの色*/

  }
  
  .slick-dots .slick-active button{
      background:#607166;/*ドットボタンの現在地表示の色*/
      opacity: 0.9;
  }
  .slider {
    touch-action: pan-y;
  }
  .slick-next.slick-disabled {
    display: none !important;
  }

  @media screen and (max-width: 520px) {
.slick-dots button {
    width:0.35em;/*ドットボタンのサイズ*/
    height:0.35em;/*ドットボタンのサイズ*/
  }
.slick-dots li {
    display:inline-block;
    margin:0.6em;
  }
.slick-dots {
   margin-top: 2em;
  }
}