/*==================================================
スライダーのためのcss
===================================*/
.slider {
    position:relative;
      z-index: 1;
      /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
      height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
  }
  /*　背景画像設定　*/
  
  .slider-item01 {
      background:url(../img/img_01.jpg);
      animation-name: fadeUpAnime01;/*アニメーションの定義名*/
    animation-duration:5s;/*アニメーション変化時間 ※デフォルト*/
    animation-fill-mode:forwards;/*アニメーションの開始と終了時の状態を指定*/
  }

  /*アニメーションの開始から終了までを指定する*/
@keyframes fadeUpAnime01{
    from {
      opacity: 0;
      transform: scale(1,1);
    }
  
    to {
      opacity: 1;
      transform: scale(1.1,1.1);
    }
  }


  .slider-item01::before {
    content: '';
    /* ↓暗いオーバーレイを半透明で配置 */
    background-color: rgba(0, 0, 0, 0);
    /* ↓全体を覆うように配置 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
  }
  
  .slider-item02 {
      background:url(../img/img_02.jpg);
      animation-name: fadeUpAnime02;/*アニメーションの定義名*/
      animation-duration:7s;/*アニメーション変化時間 ※デフォルト*/
      animation-delay: 5s;
      animation-fill-mode:forwards;/*アニメーションの開始と終了時の状態を指定*/
      opacity: 0;
  }

  /*アニメーションの開始から終了までを指定する*/
  @keyframes fadeUpAnime02{
    from {
      opacity: 0;
      transform: scale(1.1,1.1);
    }
  
    to {
      opacity: 1;
      transform: scale(1,1);
    }
  }

  .slider-item02::before {
    content: '';
    /* ↓暗いオーバーレイを半透明で配置 */
    background-color: rgba(0, 0, 0, 0);
    /* ↓全体を覆うように配置 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
  }
  
  .slider-item03 {
      background:url(../img/img_03.jpg);
  }

  .slider-item03::before {
    content: '';
    /* ↓暗いオーバーレイを半透明で配置 */
    background-color: rgba(0, 0, 0, 0);
    /* ↓全体を覆うように配置 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
  }

  .slider-item04 {
    background:url(../img/img_04.jpg);
}

.slider-item04::before {
  content: '';
  /* ↓暗いオーバーレイを半透明で配置 */
  background-color: rgba(0, 0, 0, 0);
  /* ↓全体を覆うように配置 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}









  .slider-item {
      width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
      height:100vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
      background-repeat: no-repeat;/*背景画像をリピートしない*/
      background-position: center;/*背景画像の位置を中央に*/
      background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
  }
  
  /*矢印の設定*/
  
  .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:-50px 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:#fff;/*ドットボタンの色*/
  }
  
  .slick-dots .slick-active button{
      background:#333;/*ドットボタンの現在地表示の色*/
  }