@charset "utf-8";



/*トップページのスライドショーのキーフレーム設定
---------------------------------------------------------------------------*/
/* @keyframes slide1 {
	0% {opacity: 0;}
	25% {opacity: 0;}
	35% {opacity: 1;}
	60% {opacity: 1;}
	70% {opacity: 0;}
	100% {opacity: 0;}
}
@keyframes slide2 {
	0% {opacity: 1;}
	25%{opacity: 1;}
	35%{opacity: 0;}
	90% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes slide3 {
	0% {opacity: 0;}
	60% {opacity: 0;}
	70% {opacity: 1;}
	90% {opacity: 1;}
	100% {opacity: 0;}
} */

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

/*３枚の画像の共通設定*/
.slide1, .slide2, .slide3 {
	width: 100%;height: 100%;
	position: absolute;right: 0px;top: 0px;z-index: -1;
	display: flex;
	align-items: center;
	padding: 0 5vw;
}

/*大きなテキスト*/
#mainimg .slide-block h1 {
	margin: 0;padding: 0;
	font-size: 6vw;		/*文字サイズ。100vwは画面幅100%のことです。*/
	line-height: 1.5;	/*行間を少し狭く*/
	font-weight: 700;	/*文字の太さを少し太く*/
}

/*小さなテキスト*/
#mainimg  .slide-block p {
	font-size: max(1.4vw,12px);		/*文字サイズ。100vwは画面幅100%のことです*/
	padding-left: 0.5rem;	/*左に空ける余白。0.5文字分。*/
}

/*３セットのスライドショーを囲むそれぞれのブロック*/
#mainimg div div {
	/* width: 45vw;	 */
}

/*1枚目画像*/
.slide1 {
	animation: slide2 15s linear infinite, opa1 1s linear;	/*「15s（※15秒）」というのがスライドショー全体にかける時間です。slide1、slide2、slide3全てで同じ数字を設定して下さい。*/
	background: #fff url('../images/top.jpg?v=2') no-repeat center center / cover;	/*1枚目の背景画像の読み込み*/
	justify-content: flex-end;	/*テキストブロックを右寄せ*/
}

/*2枚目画像*/
.slide2 {
	animation: slide1 15s linear infinite;	/*「15s（※15秒）」というのがスライドショー全体にかける時間です。slide1、slide2、slide3全てで同じ数字を設定して下さい。*/
	background: #fff url('../images/2.jpg') no-repeat center center / cover;	/*2枚目の背景画像の読み込み*/
}

/*３枚目画像*/
.slide3 {
	animation: slide3 15s linear infinite;	/*「15s（※15秒）」というのがスライドショー全体にかける時間です。slide1、slide2、slide3全てで同じ数字を設定して下さい。*/
	background: url('../images/3.jpg') no-repeat center center / cover;	/*３枚目の背景画像の読み込み*/
	justify-content: center;	/*テキストブロックを中央に*/
	text-align: center;			/*テキストをセンタリング*/
}

@media screen and (max-width: 480px) {
	#mainimg div div {
		align-self:end;
		margin-bottom: 8vw;
	}
}