@charset "utf-8";


/*スライドショー
---------------------------------------------------------------------------*/
/*3枚の画像を囲むブロック*/
#mainimg {
	width: 100%;
  height: 100vh;
  height: 100dvh;
	position: fixed;
	left: 0px;
	top: 0px;
	overflow: hidden;
	z-index: -1;
}

/*３枚の画像の共通設定*/
.slide {
	width: 100%; height: 100%;
	position: absolute; right: 0px; top: 0px;
	display: flex;
	align-items: center;
	opacity: 0;
	transform: scale(1.0);
	transition: opacity 1s, transform 0s 1s;  /*opacity -> 1秒かけて透明に。transform -> 1秒待ってから、0秒で元サイズに戻す*/
}

/* 表示中（activeクラス付与時）の設定 */
.slide.active {
	opacity: 1; /* JSで制御されていますが、念のためCSSでも明示 */
	transform: scale(1.1);  /*110%に拡大*/
	transition: opacity 1s, transform 5s linear;  /*opacity -> 1秒かけて透明に。transform -> 5秒かけて拡大*/
}

/*１枚目画像*/
.slide1 {
	background: url('../images/1.jpg') no-repeat center center / cover;	/*１枚目の背景画像の読み込み*/
}

/*２枚目画像*/
.slide2 {
	background: url('../images/2.jpg') no-repeat center center / cover;	/*２枚目の背景画像の読み込み*/
}

/*３枚目画像*/
.slide3 {
	background: url('../images/3.jpg') no-repeat center center / cover;	/*３枚目の背景画像の読み込み*/
}


	/*端末を縦向きにした際に、読み込む画像を変更したい場合はここで指定します*/
	@media (orientation: portrait) {
	
	/*１枚目画像*/
	.slide1 {
		background-image: url('../images/1_tate.jpg');	/*縦向き専用の画像をここで設定します*/
	}

	/*2枚目画像*/
	.slide2 {
		background-image: url('../images/2_tate.jpg');	/*縦向き専用の画像をここで設定します*/
	}

	/*3枚目画像*/
	.slide3 {
		background-image: url('../images/3_tate.jpg');	/*縦向き専用の画像をここで設定します*/
	}

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