@charset "UTF-8";
  
 /*==================================================
  スライダーのcss
  ===================================*/
  .bottom {
    position: relative;
    top: 50px;
    left: 0%;
  }

  .slider {
    position: absolute;
    top:0px;
    right:0px;
    width:80%;
    overflow: hidden;
    border-bottom-left-radius: 100px;
      z-index: 1;
      /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
      height: 85vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）*/
  }

  @media screen and (max-width:1030px) {
    .slider{
      width:80%;
      height: 90vh;
      }
    }
  @media screen and (max-width:431px) {
    .slider{
      width:100%;
      border-bottom-left-radius: 0px;
      height: 85vh;
      }
    }

    .slider-item{
      border-radius:20px;
    }

  /*　背景画像設定　*/

  .slider-item01 {
      background:url(../img/slider01.jpg);
  }

  .slider-item02 {
      background:url(../img/slider02.jpg);
  }

  .slider-item03 {
      background:url(../img/slider03.jpg);
  }
  .slider-item04 {
    background:url(../img/slider04.jpg);
}
.slider-item05 {
    background:url(../img/slider05.jpg);
}
.slider-item06 {
  background:url(../img/slider06.jpg);
}
.slider-item07 {
  background:url(../img/slider07.jpg);
}

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

  @media screen and (max-width:1025px) {
    .slider-item {
      height:80vh;/*各スライダー全体の縦幅を画面の高さ半分（50vh）にする*/
  }
    }
  @media screen and (max-width:431px) {
    .slider-item {
      height:60vh;/*各スライダー全体の縦幅を画面の高さ半分（50vh）にする*/
  }
    }