@charset "utf-8";



/*スライドショー（cssでのbackground使用）
ここでは、2:1の画像比率（1÷2=0.5）を読み込む指定を行なっています。
異なる画像比率にしたい場合、#mainimgのpadding-topの数字を変更します。
---------------------------------------------------------------------------*/
/*3枚の画像を囲むブロック*/
#mainimg {
	width: 100%;
	height: 0;
	padding-top: 50%;
	position: relative;
	margin-top: 2vw;	/*上に空けるスペース。メインメニューとの間のスペースです。*/
}

	/*画面幅700px以下の追加指定*/
	@media screen and (max-width:700px) {

	#mainimg {
		margin-bottom: 100px;
	}
	
	}/*追加指定ここまで*/

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

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

/*２枚目画像*/
.slide2 {
	background: url('../images/2.jpg') no-repeat center center / cover;	/*２枚目の背景画像の読み込み*/
	justify-content: center;	/*テキストブロックを中央に*/
	text-align: center;			/*テキストをセンタリング*/
}

/*３枚目画像*/
.slide3 {
	background: url('../images/3.jpg') no-repeat center center / cover;	/*３枚目の背景画像の読み込み*/
	justify-content: center;	/*テキストブロックを中央に*/
	text-align: center;			/*テキストをセンタリング*/
}


/*現在表示されているスライドのみをクリック可能にする設定（変更不要）
---------------------------------------------------------------------------*/
.slide {
	pointer-events: none; /* デフォルトでクリックを無効にする */
}

.slide.active {
	pointer-events: auto; /* 表示中のスライドのみクリックを有効にする */
}


/*スライドショー上のテキスト
---------------------------------------------------------------------------*/
#mainimg p {
	font-size: 3vw;		/*文字サイズ。100vwは画面幅100%のことです*/
	font-weight: 600;	/*文字の太さ。100から900まで指定可能*/
	color: #fff;		/*文字色*/
	text-shadow: 2px 2px rgba(0,0,0,0.5), 0px 0px 10px rgba(0,0,0,0.5) !important;
}


/*スライドショー上のボタン
---------------------------------------------------------------------------*/
/*ボタンを囲むボックスの設定*/
#mainimg .mainimg-btn {
	list-style: none;margin: 0;
	animation: opa1 0s 0.5s both;
	position: absolute;
	left: 0px;
	bottom: 0px;	/*下からの配置場所*/
	width: 100%;
	background: rgba(0,0,0,0.5);	/*背景色。0,0,0は黒のことで0.5は色が50%出た状態。*/
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;			/*ボタン同士に空けるスペース*/
	font-size: 22px;	/*文字サイズ*/
	height: 100px;		/*ボックスの高さ*/
}

/*ボタン１個あたりの設定*/
#mainimg .mainimg-btn a {
	display: block;text-decoration: none;
	background: #002855;	/*背景色*/
	color: #fff;			/*文字色*/
	border-radius: 5px;		/*角を丸くする*/
	box-shadow: 2px 2px 2px rgba(0,0,0,0.5);	/*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒のことで0.5は色が50%出た状態*/
	padding: 10px 30px;	/*ボタン内の余白*/
}

/*ボタン内のアイコン*/
#mainimg .mainimg-btn i {
	padding-right: 20px;	/*アイコンの右側に空ける余白。テキストとの間の余白です。*/
	transform: scale(1.4);	/*サイズを1.4倍に*/
}

	/*画面幅700px以下の追加指定*/
	@media screen and (max-width:700px) {

	/*ボタンを囲むボックスの設定*/
	#mainimg .mainimg-btn {
		background: transparent;	/*背景色を透明に*/
		bottom: -100px;				/*メイン画像の下に配置する為ネガティブマージンを使用*/
		display: block;		/*横並びから縦並びに*/
	}
	
	/*ボタン１個あたりの設定*/
	#mainimg .mainimg-btn a {
		margin-top: 10px;
	}
		
	}/*追加指定ここまで*/

