@charset "utf-8";

#main-area{
	background-image: url('../img/background/race_img-1.PNG'), url('../img/background/race_img-2.PNG'); /* 背景画像のパス */
	background-repeat: repeat-x, repeat-x; /* 縦方向に画像を繰り返す */
	background-position: left top, left bottom; /* 画像を左上に配置 */
	background-size: 20% auto, 20% auto; 
	overflow: hidden;
}

/*================================================== スライダーのためのcss ===================================*/
.slider {
	position:relative;
	z-index: 1;/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
	width: 100%;
	height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
	overflow: hidden; /* スライダーコンテナからはみ出た部分を非表示にする */
}
/*　背景画像設定　*/

.slider-item01 {background:url(../img/slider/top_slide1.JPG);}

.slider-item02 {background:url(../img/slider/top_slide2.JPG);}

.slider-item03 {background:url(../img/slider/top_slide3.JPG);}

.slider-item04 {background:url(../img/slider/top_slide4.JPG);}

.slider-item05 {background:url(../img/slider/top_slide5.JPG);}

.slider-item06 {background:url(../img/slider/top_slide6.JPG);}

.slider-item07 {background:url(../img/slider/top_slide7.JPG);}

/* .slider-item08 {background:url(../img/slider/top_slider8.JPG);} */

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

/*========= スライダーのレイアウト ===============*/
ul{
margin:0;
padding: 0;
list-style: none;
}

a{
color: #fff;
}

a:hover,
a:active{
text-decoration: none;
}

.wrapper{
position: relative;
}

@media screen and (max-width: 768px) {
.slider-item {
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover; /* 画面全体に合わせてリサイズ */
	width: 100vw; /* ビューポートの幅に合わせる */
	height: 100vh; /* ビューポートの高さに合わせる */
}
}