@charset "utf-8";

/*==================================================
スライダーのためのcss
===================================*/
.slider {
    position:relative;
	z-index: 1;/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
	height: 80vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
	width: 100%;
    background-color: #fff;
}

.slick-slider {
	padding: 0!important;
	margin: 0!important;
}

ul li {
	list-style-type: none;
	padding-left: 0!important;
}

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

.slider-item::after {
	content: '';
	position: absolute;
	top: 0; right:  0; bottom: 0; left: 0;
	z-index: 2;
}

.slider-item::after{
	background-color: rgba(0,0,0,.20);
  	background-size: 5px 5px;
}

@media screen and (min-width:320px) and (max-width:767.98px) {
	.slider {
		position:relative;
	    z-index: 1;
		height: 80vh;
	}
	
	.slider-item {
		display: flex!important;
        justify-content: center;
        align-items: center;
        width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
        height: 80vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
        background-repeat: no-repeat;/*背景画像をリピートしない*/
        background-position: center center;/*背景画像の位置を中央に*/
        background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
    }
}