@charset "utf-8";



/*CSSスライドショーアニメーション設定これ湯気の
---------------------------------------------------------------------------*/
/*1枚目*/
@keyframes slide1 {
	0% {left: 110%;}
	25% {left: 0%;}
	30% {left: 0%;}
	33% {left: -110%;}
	50% {left: 110%;}
	100% {left: -110%;}
}
/*2枚目*/
@keyframes slide2 {
	0% {left: 110%;}
	30% {left: 110%;}
	40% {left: -110%;}
	55% {left: 0%;}
	60% {left: 0%;}
	63% {left: -110%;}
	100% {left: -110%;}
}
/*3枚目*/
@keyframes slide3 {
	0% {left: -110%;}
	10% {left: -110%;}
	60% {left: 110%;}
	85% {left: 0%;}
	90% {left: 0%;}
	93% {left: -110%;}
	100% {left: -110%;}
}

/*mainimg
---------------------------------------------------------------------------*/
/*画像ブロック*/
#mainimg {padding-top: 80%;
	clear: left;
	text-indent: -9999px;
	position: fixed;	/*スクロールしても固定表示させる指定*/
	top: 0px;
	width: 100%;
	height: 450px;			/*高さ３５０*/
	background: url(https://creme-cremes.com/components/slide-images/sweets-top1.png) no-repeat center center/cover;	/*背景静止.jpg画像の読み込み*/

	overflow: hidden;
	z-index: -10;
	
}





/*３枚画像の共通設定*/
.slide1,.slide2,.slide3 {
	position: absolute;left:0px;top:0px;width: 100%;height: 100%;
	animation-duration: 40s;				/*実行する時間。「s」は秒の事もとは１５。*/
	animation-iteration-count:infinite;		/*実行する回数。「infinite」は無限に繰り返す意味。*/
	animation-delay: 1s;					/*アニメーションを遅れて開始させる。「s」は秒の事。もとは４*/
	animation-fill-mode: backwards;				/*アニメーションの待機中は最初のフレームを、アニメーションの完了後は最後のフレームを維持する。*/
	transition: 0.4s;						/*マウスオン時の移り変わるまでの時間設定。0.4秒。*/
}
/*メッセージ欄*/
#mainimg p {
	position: absolute;z-index: 5;
	left: 0px;			/*左から0pxの場所にブロックを配置*/
	bottom: 150px;		/*下から30pxの場所にブロックを配置*/
	width: 100%;			/*幅。下のpaddingと合計して100になるように。*/
	padding: 0 0 !important;	/*上下、左右へのボックス内の余白。*/
	background: #fff;	/*背景色（古いブラウザ用）*/
	background: rgba(255,255,255,0.1);	/*背景色。0,0,0は黒の事で0.8は80%色がついた状態の事。*/
	color: #000;		/*文字色*/
}
/*1枚目*/
.slide1 {
	background: url(https://creme-cremes.com/components/images/logo-sweets.png) no-repeat center center/cover;	/*1.jpg画像の読み込み*/
	animation-name: slide1;		/*上で設定しているキーフレーム（keyframes）の名前*/
}
/*1枚目マウスオン時*/
.slide1:hover {
	background: url(https://creme-cremes.com/components/slide-images/sweets-top1.png) no-repeat center center/cover;	/*1on.jpg画像の読み込み*/
}
/*2枚目*/
.slide2 {
	background: url(https://creme-cremes.com/components/slide-images/sweets-top1.png) no-repeat center center/cover;	/*2.jpg画像の読み込み*/
	animation-name: slide2;		/*上で設定しているキーフレーム（keyframes）の名前*/
}
/*2枚目マウスオン時*/
.slide2:hover {
	background: url(https://creme-cremes.com/components/slide-images/sweets-top1.png) no-repeat center center/cover;	/*2on.jpg画像の読み込み*/
}
/*3枚目*/
.slide3 {
	background: url(https://creme-cremes.com/components/images/yuge3.png) no-repeat center center/cover;	/*3.jpg画像の読み込み*/
	animation-name: slide3;		/*上で設定しているキーフレーム（keyframes）の名前*/
}
/*3枚目マウスオン時*/
.slide3:hover {
	background: url(https://creme-cremes.com/components/slide-images/sweets-top1.png) no-repeat center center/cover;	/*3on.jpg画像の読み込み*/
}


/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){

/*mainimg
---------------------------------------------------------------------------*/
/*画像ブロック*/
#mainimg {
	margin-top: 0;
}

}