@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: 80px;
	z-index: -1;
	display: flex;
	align-items: center;
	padding: 0 5vw;
}

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

@media screen and (max-width: 480px) {
	#mainimg h2 {
		margin-bottom: 100px;
		padding: 0;
		font-size: 6vw;
		line-height: 1.5;
		font-weight: 500;
	}
}

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

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

/*1枚目画像*/
.slide1 {
	animation: slide2 15s linear infinite, opa1 1s linear;	/*「15s（※15秒）」というのがスライドショー全体にかける時間です。slide1、slide2、slide3全てで同じ数字を設定して下さい。*/
	background: #fff url('../images/1.jpg') 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: left;	/*テキストブロックを中央に*/
	text-align: left;			/*テキストをセンタリング*/
}