@charset "utf-8";

/*==================================================
スライダーのためのcss
===================================*/
.slider {
    position:relative;
      z-index: 1;
      /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
     
  }
  /*　背景画像設定　*/
  
  .slider-item01 {
    background-image:url("../img/mainvisual1.webp");
}

.slider-item02 {
    background-image:url("../img/mainvisual2.webp");
}

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

@media (max-width: 900px) {
    .slider-item {
        width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
        height:60vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
        background-repeat: no-repeat;/*背景画像をリピートしない*/
        background-position: center;/*背景画像の位置を中央に*/
        background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
    }
    .slider-item01 {
        background-image:url("../img/mainvisual1-sp.webp");
    }
    
    .slider-item02 {
        background-image:url("../img/mainvisual2-sp.webp");
    }
    
    .slider-item03 {
        background-image:url("../img/mainvisual3-sp.webp");
    }
}

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