@charset "utf-8";


/*CSSスライドショー設定
---------------------------------------------------------------------------*/
/*１枚目*/
@keyframes slide1 {
	0% {
		opacity: 0;
	}

	10% {
		opacity: 1;
	}

	40% {}

	50% {
		opacity: 1;
	}

	60% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

/*２枚目*/
@keyframes slide2 {
	0% {
		opacity: 0;
	}

	25% {
		opacity: 0;
	}

	35% {
		opacity: 1;
	}

	65% {}

	75% {
		opacity: 1;
	}

	85% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

/*3枚目*/
@keyframes slide3 {
	0% {
		opacity: 0;
	}

	50% {
		opacity: 0;
	}

	60% {
		opacity: 1;
	}

	80% {
		opacity: 1;
	}

	90% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

/*mainimg
---------------------------------------------------------------------------*/
/*画像ブロック*/
#mainimg {
	clear: left;
	text-indent: -9999px;
	position: absolute;
	z-index: -1;
	top: 0px;
	width: 100%;
	height: 500px;
	margin-top: 174px;
}

/*３枚画像の共通設定*/
.slide1,
.slide2,
.slide3 {
	animation-duration: 20s;
	animation-iteration-count: infinite;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-delay: 2s;
}

/*土台画像*/
.slide0 {
	background: url(../images/1.jpg) no-repeat center center/cover;
	position: relative;
	width: 100%;
	height: 100%;
}

/*１枚目*/
.slide1 {
	background: url(../images/1.jpg) no-repeat center center/cover;
	animation-name: slide1;
}

/*２枚目*/
.slide2 {
	background: url(../images/2.jpg) no-repeat center center/cover;
	animation-name: slide2;
}

/*３枚目*/
.slide3 {
	background: url(../images/3.jpg) no-repeat center center/cover;
	animation-name: slide3;
}

/*画面幅1100px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1100px) {
	#mainimg {
		margin-top: 111px;
	}
}

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

	#mainimg {
        margin-top: 65.55px;
    }




	/*画像ブロック*/
	#mainimg {
		height: 500px;
	}

	/*土台画像*/
	.slide0 {
		background: url(../images/1tab.png) no-repeat center center/cover;
		position: relative;
		width: 100%;
		height: 100%;
	}

	/*１枚目*/
	.slide1 {
		background: url(../images/1tab.png) no-repeat center center/cover;
		animation-name: slide1;
	}

	/*２枚目*/
	.slide2 {
		background: url(../images/2tab.png) no-repeat center center/cover;
		animation-name: slide2;
	}

	/*３枚目*/
	.slide3 {
		background: url(../images/3tab.png) no-repeat center center/cover;
		animation-name: slide2;
	}


}

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

	/*mainimg
---------------------------------------------------------------------------*/
	/*土台画像*/
	.slide0 {
		background: url(../images/1sp.png) no-repeat center center/cover;
		position: relative;
		width: 100%;
		height: 100%;
	}

	/*１枚目*/
	.slide1 {
		background: url(../images/1sp.png) no-repeat center center/cover;
		animation-name: slide1;
	}

	/*２枚目*/
	.slide2 {
		background: url(../images/2sp.png) no-repeat center center/cover;
		animation-name: slide2;
	}

	/*３枚目*/
	.slide2 {
		background: url(../images/3sp.png) no-repeat center center/cover;
		animation-name: slide2;
	}
}