@charset "utf-8";

/*CSSスライドショーアニメーション設定
---------------------------------------------------------------------------*/
/*1枚目*/
@keyframes slide1 {
	0% {left: 110%;}
	4% {left: 0%;}
	19% {left: 0%;}
	23% {left: -110%;}
	100% {left: -110%;}
}
/*2枚目*/
@keyframes slide2 {
	0% {left: 110%;}
	25% {left: 110%;}
	29% {left: 0%;}
	44% {left: 0%;}
	48% {left: -110%;}
	100% {left: -110%;}
}
/*3枚目*/
@keyframes slide3 {
	0% {left: 110%;}
	50% {left: 110%;}
	54% {left: 0%;}
	69% {left: 0%;}
	73% {left: -110%;}
	100% {left: -110%;}
}
/*4枚目*/
@keyframes slide4 {
	0% {left: 110%;}
	75% {left: 110%;}
	79% {left: 0%;}
	94% {left: 0%;}
	98% {left: -110%;}
	100% {left: -110%;}
}

/*mainimg
---------------------------------------------------------------------------*/
/*画像ブロック*/
#mainimg {
	clear: left;
	position: relative;
	width: 100%;
	height: 100%;		/*高さ*/
	z-index: 1;
	/*background: #000;	背景色*/
	/*overflow: hidden;*/
}
/*４枚画像の共通設定*/
.slide1,.slide2,.slide3,.slide4 {
	position: absolute;left:0px;top:0px;width: 100%;height: 100%;
	animation-duration: 15s;				/*実行する時間。「s」は秒の事。*/
	animation-iteration-count:infinite;		/*実行する回数。「infinite」は無限に繰り返す意味。*/
	animation-delay: 5s;					/*アニメーションを遅れて開始させる。「s」は秒の事。*/
	animation-fill-mode: both;				/*アニメーションの待機中は最初のフレームを、アニメーションの完了後は最後のフレームを維持する。*/
}
/*メッセージ欄*/
#mainimg p {
	position: absolute;z-index: 1;
	left: 0px;			/*左から0pxの場所にブロックを配置*/
	bottom: 30px;		/*下から30pxの場所にブロックを配置*/
	width: 90%;			/*幅。下のpaddingと合計して100になるように。*/
	padding: 10px 5% !important;	/*上下、左右へのボックス内の余白。*/
	background: #517D99;	/*背景色（古いブラウザ用）*/
	background: rgba(81,125,153,0.8);	/*背景色。0,0,0は黒の事で0.8は80%色がついた状態の事。*/
	color: #fff;		/*文字色*/
}
/*1枚目*/
.slide1 {
	background: url("../images/ロゴ_L_ナゴヤ.jpg') ); ?>") no-repeat center center/cover;	/*1.jpg画像の読み込み*/
	animation-name: slide1;		/*上で設定しているキーフレーム（keyframes）の名前*/
}
/*2枚目*/
.slide2 {
	background: url("../images/ロゴ_L_オオサカ.jpg") no-repeat center center/cover;	/*2.jpg画像の読み込み*/
	animation-name: slide2;		/*上で設定しているキーフレーム（keyframes）の名前*/
}
/*3枚目*/
.slide3 {
	background: url("../images/ロゴ_L_ヨコハマ.jpg") no-repeat center center/cover;	/*3.jpg画像の読み込み*/
animation-name: slide3;		/*上で設定しているキーフレーム（keyframes）の名前*/
}
/*4枚目*/
.slide4 {
	background: url("../images/ロゴ_L_グッズ.jpg") no-repeat center center/cover;	/*4.jpg画像の読み込み*/
	animation-name: slide4;		/*上で設定しているキーフレーム（keyframes）の名前*/
}

/*画面幅900px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:900px){
/*1枚目*/
.slide1 {
	background: url("../images/ロゴ_S_ナゴヤ.jpg") no-repeat center center/cover;	/*1.jpg画像の読み込み*/
}
/*2枚目*/
.slide2 {
	background: url("../images/ロゴ_S_オオサカ.jpg") no-repeat center center/cover;	/*2.jpg画像の読み込み*/
}
/*3枚目*/
.slide3 {
	background: url("../images/ロゴ_S_ヨコハマ.jpg") no-repeat center center/cover;	/*3.jpg画像の読み込み*/
}
/*4枚目*/
.slide4 {
	background: url("../images/ロゴ_S_グッズ.jpg") no-repeat center center/cover;	/*4.jpg画像の読み込み*/
}

}