@charset "utf-8";


/*CSSスライドショー設定
---------------------------------------------------------------------------*/
@keyframes slide0 {
	0% {opacity: 1;transform: translateX(-100%);}
	13% {opacity: 1;transform: translateX(-100%);}
	25% {opacity: 1;transform: translateX(-200%);}
	28% {opacity: 0;}
	36% {opacity: 0;transform: translateX(200%);}
	38% {opacity: 1;transform: translateX(200%);}
	50% {opacity: 1;transform: translateX(100%);}
	63% {opacity: 1;transform: translateX(100%);}
	75% {opacity: 1;transform: translateX(0%);}
	88% {opacity: 1;transform: translateX(0%);}
	98% {opacity: 1;transform: translateX(-100%);}
	100% {opacity: 1;transform: translateX(-100%);}
}

@keyframes slide1 {
	0% {opacity: 1;}
	13% {opacity: 1;transform: translateX(0%);}
	25% {opacity: 1;transform: translateX(-100%);}
	38% {opacity: 1;transform: translateX(-100%);}
	50% {opacity: 1;transform: translateX(-200%);}
	51% {opacity: 0;}
	61% {opacity: 0;transform: translateX(200%);}
	63% {opacity: 1;transform: translateX(200%);}
	75% {opacity: 1;transform: translateX(100%);}
	88% {opacity: 1;transform: translateX(100%);}
	98% {opacity: 1;transform: translateX(0%);}
	100% {opacity: 1;transform: translateX(0%);}
}
@keyframes slide2 {
	0% {opacity: 1;transform: translateX(100%);}
	13% {opacity: 1;transform: translateX(100%);}
	25% {opacity: 1;transform: translateX(0%);}
	38% {opacity: 1;transform: translateX(0%);}
	50% {opacity: 1;transform: translateX(-100%);}
	63% {opacity: 1;transform: translateX(-100%);}
	75% {opacity: 0;transform: translateX(-200%);}
	80% {opacity: 0;}
	85% {opacity: 0;transform: translateX(200%);}
	88% {opacity: 1;transform: translateX(200%);}
	98% {opacity: 1;transform: translateX(100%);}
	100% {opacity: 1;transform: translateX(100%);}
}
@keyframes slide3 {
	0% {opacity: 0;transform: translateX(200%);}
	13% {opacity: 1;transform: translateX(200%);}
	25% {opacity: 1;transform: translateX(100%);}
	38% {opacity: 1;transform: translateX(100%);}
	50% {opacity: 1;transform: translateX(0%);}
	63% {opacity: 1;transform: translateX(0%);}
	75% {opacity: 1;transform: translateX(-100%);}
	88% {opacity: 1;transform: translateX(-100%);}
	98% {opacity: 0;transform: translateX(-200%);}
	100% {opacity: 0;transform: translateX(-200%);}
}
/*mainimg
---------------------------------------------------------------------------*/
/*画像ブロック*/
.suraide {
	width:100%;
	height:400px;
	margin:0 auto;
	overflow:hidden;
}
.suraide img {
	width:100%;
}
.translate{
	background-color:#0000FF;
    text-align: center;
    color: #FFFF99;
    width: 60%;
	height:auto;
	position: relative;
	left:20%;
	top:10px;
}
}
.up {
	width:100%;
	position:absolute

}
.up img {
	width:100%;
}
/*３枚画像の共通設定*/
.slide0,.slide1,.slide2,.slide3 {
	animation-duration: 40s;	/*実行する時間。「s」は秒の事。*/
	animation-iteration-count:infinite;		/*実行する回数。「infinite」は無限に繰り返す意味。top:0px;*/
	position: absolute;width: 100%;height: auto;
	animation-fill-mode: both;
	animation-timing-function: ease-in-out;
	animation-delay: 0s;
	overflow:hidden;
}
/*worldbs*/
.slide {
	position: absolute;width: 100%;height: auto;
	display:block;
}
.slide0 {
	animation-name: slide0;
}
/*１枚目*/
.slide1 {
	animation-name: slide1;		/*上で設定しているキーフレーム（keyframes）の名前*/
}
/*２枚目*/
.slide2 {
	animation-name: slide2;		/*上で設定しているキーフレーム（keyframes）の名前*/
}
/*３枚目*/
.slide3 {
	animation-name: slide3;		/*上で設定しているキーフレーム（keyframes）の名前*/
}
@media only screen and (max-width:1500px){
.suraide {
	height:300px;
}
@media only screen and (max-width:640px){
.suraide {
	height:200px;
}
@media only screen and (max-width:480px){
.suraide {
	height:130px;
}

}
@media only screen and (max-width:350x){
.suraide {
	height:300px;
}