@charset "UTF-8";

/*==================================================
スライダーのためのcss
===================================*/
.wrapper{
    position: relative;
}

.wrapper::before{
    position: absolute;
    content: "";
    width: 100vw;
    height: 30vw;
    bottom: -16vw;
    left: 0;
    background-image: url(../images/mv-frame.png);
    background-size: 130%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 10;
}

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


/*背景画像設定************/

.slider-item01 {
    position: relative;
    background:url(../images/main-bg1-2048x1369.jpg);
    z-index: -10;
}

.slider-item01::before{
    position: absolute;
    content: "Private Charter van Full day tour Furano and Biei";
    color: white;
    font-size: 3.5vw;
    font-weight: 800;
    line-height: 2;
    letter-spacing: 0.2em;
    width: 45vw;
    top:10vw;
    left: 10vw;
    background-color: #0b4f4162;
    padding-left: 2vw;
}


.slider-item02 {
    position: relative;
    background:url(../images/main-bg2-2048x1369.jpg);
}
.slider-item02::before{
    position: absolute;
    content: "Private Charter van Full day tour Lake Toya and Noboribetsu";
    color: white;
    font-size: 3.5vw;
    font-weight: 800;
    line-height: 2;
    letter-spacing: 0.2em;
    width: 53vw;
    top:10vw;
    left: 10vw;
    background-color: #0b4f4162;
    padding-left: 2vw;
}

.slider-item03 {
    position: relative;
    background:url(../images/main-bg3-1536x1152.jpg);
}

.slider-item03::before{
    position: absolute;
    content: "Private Charter van with ENG speaking driver";
    color: white;
    font-size: 3.5vw;
    font-weight: 800;
    line-height: 2;
    letter-spacing: 0.1em;
    width: 50vw;
    top:10vw;
    left: 10vw;
    background-color: #0b4f4162;
    padding-left: 2vw;
}

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

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slider-mainvisual::before{
    position: absolute;
    content: "";
    width: 6%;
    height: 13%;
    top:46%;
    left:0;
    background-color: #0b4f41;
    border-radius: 0 80% 80% 0;
    z-index: 5;
}

.slider-mainvisual::after{
    position: absolute;
    content: "";
    width: 6%;
    height: 13%;
    top:46%;
    right: 0;
    background-color: #0b4f41;
    border-radius: 80% 0 0 80%;
    z-index: 5;
}

.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    z-index: 10;
    top: 50%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 0.1vw solid #ccc;/*矢印の色*/
    border-right: 0.1vw solid #ccc;/*矢印の色*/
    height: 2.5vw;
    width: 2.5vw;
}


.slick-prev {/*戻る矢印の位置と形状*/
    left:2.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right:2.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/
@media screen and (max-width:549px) {
    .wrapper::before{
        height: 20vw;
        bottom: -8vw;
    }
    .slider-mainvisual { 
        width: 100%;
        height: 50vh;
     }
     .slider-item {
        width: 100%;
        height: 50vh;
     }
     .slider-item01::before{
        font-size: 5vw;
        letter-spacing: 0.3em;
        width: 60vw;
        top: 13vw;
     }
     .slider-item02::before{
        font-size: 5vw;
        letter-spacing: 0.3em;
        width: 60vw;
        top: 13vw;
     }
     .slider-item03::before{
        font-size: 5vw;
        letter-spacing: 0.3em;
        width: 60vw;
        top: 13vw;
     }
 }
 
 .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:#ccc;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}

@media screen and (max-width:899px) and (min-width:550px){
    .wrapper::before{
        height: 20vw;
        bottom: -15vw;
    }
    .slider-mainvisual { 
        width: 90%;
        height: 60vh;
    }
    .slider-item {
        width: 100%;
        height: 70vh;
    }
 }
 
 @media screen and (max-width:549px) {
     .wrapper::before{
         height: 20vw;
         bottom: -8vw;
         background-size: 150%;
     }
     .slider-mainvisual { 
         width: 100%;
         height: 50vh;
      }
      .slider-item {
         width: 100%;
         height: 50vh;
      }
      .slider-item01::before{
         font-size: 5vw;
         letter-spacing: 0.3em;
         width: 70vw;
         top: 13vw;
      }
      .slider-item02::before{
         font-size: 5vw;
         letter-spacing: 0.2em;
         width: 75vw;
         top: 13vw;
      }
      .slider-item03::before{
         font-size: 5vw;
         letter-spacing: 0.1em;
         width: 75vw;
         top: 13vw;
      }
  }