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

.slider-item01 {
    background-image:url(../img/slide1@15.jpg);
}

.slider-item02 {
    background-image:url(../img/slide2@15.jpg);
}

.slider-item03 {
    background-image:url(../img/slide3@15.jpg);
}

.slider-item04 {
  background-image:url(../img/slide4@15.jpg);
}

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

.slide-area{
    position: relative;
}

.slide-ttl{
    position: absolute;
    width: 20%;
    max-width: 470px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

@media screen and (max-width:768px) {
    .slider-item {
        height: calc(100vh - 55px);
    }

    .slider-item01 {
        background-image:url(../img/slide1-sp@2.jpg);
    }
    
    .slider-item02 {
        background-image:url(../img/slide2-sp@2.jpg);
    }
    
    .slider-item03 {
        background-image:url(../img/slide3-sp@2.jpg);
    }
    
    .slider-item04 {
      background-image:url(../img/slide4-sp@3.jpg);
    }
    
    .slide-ttl{
        width: 50%;
    }

    .slider {
          height: calc(100vh - 55px);/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
      }
}

@media (orientation: landscape) and (max-width: 768px){
    .slider {
        min-height: 600px;
    }

    .slider-item {
        min-height: 600px;
    }
}