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


  /*　背景画像設定　*/
  
  .slider-item01 {
      background:url(../images/gallery2023/Image01.webp);
  }
  
  .slider-item02 {
      background:url(../images/gallery2023/Image05.webp);

  }
  
  .slider-item03 {
      background:url(../images/gallery2023/Image07.webp);
  }

  .slider-item04 {
    background:url(../images/gallery_1.webp);
}


  
  .slider-item {
      width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
      height:80vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
      background-repeat: no-repeat;/*背景画像をリピートしない*/
      background-position: center;/*背景画像の位置を中央に*/
      background-size:contain;/*背景画像が.slider-item全体を覆い表示*/
      margin-top: 30px;

  }
  
  /*矢印の設定*/
  
  .slick-prev, 
  .slick-next {
      position: absolute;
      z-index: 3;
      top: 45%;
      cursor: pointer;/*マウスカーソルを指マークに*/
      outline: none;/*クリックをしたら出てくる枠線を消す*/
      border-top: 2px solid black;/*矢印の色*/
      border-right: 2px solid black;/*矢印の色*/
      height: 25px;
      width: 25px;
      opacity: 0.2;
  }
  
  .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:15px 0 0 0;/*ドットの位置*/
  }
  
  .slick-dots li {
      display:inline-block;
      margin:0 10px;
  }
  
  .slick-dots button {
      color: transparent;
      outline: rgb(208, 208, 208) 3px;
      border: none;
      width: 1rem;/*ドットボタンのサイズ*/
      height: 1rem;/*ドットボタンのサイズ*/
      display:block;
      border-radius:50%;
      background: rgba(255, 255, 255, 0.1);/*ドットボタンの色*/
  }
  
  .slick-dots .slick-active button{
      background:radial-gradient(circle,  rgb(164, 164, 164, 0.5) 0% 5%, white 70% 100%);/*ドットボタンの現在地表示の色*/
  }