@charset "utf-8";


/*メイン画像
---------------------------------------------------------------------------*/
#mainimg {
  position: relative;
  width: 100vw;
  height: 70vh;
  overflow: hidden;
  z-index: -1;
}

/*画像の共通設定*/
.slide {
	width: 100%;height: 100%;
	position: absolute;right: 0px;top: 0px;
	display: flex;
	align-items: center;
	opacity: 0;
	transition: opacity 3s;	/*ここの1s（＝1秒）を変更すると、フェードのスピードを変更できます。*/
}

/*画像の個別設定*/
.slide1 {
	background: url('../images/slide_seoul01.jpg') no-repeat bottom center / cover;
}
.slide2 {
	background: url('../images/slide_hanoi01.jpg') no-repeat center center / cover;
}
.slide3 {
	background: url('../images/slide_barcelona03.jpg') no-repeat center center / cover;
}
.slide4 {
	background: url('../images/slide_seoul02.jpg') no-repeat bottom center / cover;
}
.slide5 {
	background: url('../images/slide_hanoi02.jpg') no-repeat center center / cover;
}
.slide6 {
	background: url('../images/slide_barcelona02.jpg') no-repeat bottom center / cover;
}


	/*端末を縦向きにした際に、読み込む画像を変更したい場合はここで指定します*/
	@media screen and (max-width:500px) {
	
	/*画像の個別設定*/
	.slide1 {
		background-image: url('../images/slide_seoul01.jpg');	/*縦向き専用の画像をここで設定します*/
	}
	.slide2 {
		background-image: url('../images/slide_hanoi01.jpg');	/*縦向き専用の画像をここで設定します*/
	}
	.slide3 {
		background-image: url('../images/slide_barcelona01.jpg');	/*縦向き専用の画像をここで設定します*/
	}
	.slide4 {
		background-image: url('../images/slide_seoul02.jpg');	/*縦向き専用の画像をここで設定します*/
	}
	.slide5 {
		background-image: url('../images/slide_hanoi02.jpg');	/*縦向き専用の画像をここで設定します*/
	}
	.slide6 {
		background-image: url('../images/slide_barcelona02.jpg');	/*縦向き専用の画像をここで設定します*/
	}

	}/*追加指定ここまで*/