/*==================================================
スライダーのためのcss
===================================*/
.slider {
    width: 100%;
    padding: 0;
    position:relative;
    z-index: 1;
    /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
}

/*　背景画像設定　*/

.slider-item01 {
    background-image: url(../img/top_bg1_1.png);
}

.slider-item02 {
    background-image: url(../img/top_bg1_2.png);
}

.slider-item03 {
    background-image: url(../img/top_bg1_3.png);
}

.slider-item01_sp {
    background-image: url(../img/top_sp1.png);
}

.slider-item02_sp {
    background-image: url(../img/top_sp2.png);
}

.slider-item03_sp {
    background-image: url(../img/top_sp3.png);
}




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

@media screen and (max-width: 500px) {
    .slider-item {
        height:182vw;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    }
}
.slider li {
    margin-right: 0;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slider .slick-prev, 
.slider .slick-next {
    position: absolute;/*絶対配置にする*/
    top: 0%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    padding-top: 9%;
    height: 100%;
    width: 120px;
    font: normal normal normal 90px/20px Devanagari MT;
    color: #fff;
    /* background-color: rgba(55, 55, 55, 0.6); */
    background: #131313 0% 0% no-repeat padding-box;
}



.slider .slick-prev {/*戻る矢印の位置と形状*/
    left: 0;
    z-index: 1;
}    

.slider .slick-next {/*次へ矢印の位置と形状*/
    right: 0%;
    padding-left: 25px;
}

/*ドットナビゲーションの設定*/

.slick-dots {
    text-align:center;
    margin:20px 0 0 0;
}

.slick-dots li {
    display:inline-block;
    margin:0 5px;
}

.slick-dots button {
    border: none;
    color: transparent;
    outline: none;
    width:12px;/*ドットボタンのサイズ*/
    height:12px;/*ドットボタンのサイズ*/
    display:block;
    background:#fff;/*ドットボタンの色*/
}

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


.slider li {
    display: inline-block;
}

.slider {
    margin:0;
}