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

.slider-top,
.slider-bottom {
	margin: 0;
	padding: 0;
    height: 20vh;/*スライダー上下の縦幅を画面の高さの半分（50vh）にする*/
}

/*　背景画像設定　*/

.slider-item01 {
    background:url(../img/sd01.jpg);
}

.slider-item02 {
    background:url(../img/sd02.jpg);
}

.slider-item03 {
    background:url(../img/sd03.jpg);
}

.slider-item04 {
    background:url(../img/sd04.jpg);
}

.slider-item05 {
    background:url(../img/sd05.jpg);
}

.slider-item06 {
    background:url(../img/sd06.jpg);
}

.slider-item07 {
    background:url(../img/sd07.jpg);
}

.slider-item08 {
    background:url(../img/sd08.jpg);
}

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

@media (min-width: 768px){
	.slider {height: 60vh;}
	.slider-top,.slider-bottom {height: 30vh;}
	.slider-item {height:30vh;}
}

@media (min-width: 1200px){
	.slider {height: 80vh;}
	.slider-top,.slider-bottom {height: 40vh;}
	.slider-item {height:40vh;}
}