@charset "UTF-8";
/* CSS Document 　トップページカメちゃんアニメーション*/

#easy_outline{
	margin:1em auto 5em;
	width:1000px;
	position:relative;
}

#takeiteasy{
	color: #FFF;
    font-family: 'Comfortaa',cursive;
    font-size:1.1em;
    font-weight: 100;
    text-align: center;
	margin-bottom:1em;
	}
/*左右のハウス*/	
	.house_left{
	background-image:url(../img/index/house_left_a.png);
    height: 164px;
    position: absolute;
    width: 243px;
    z-index: 10;
	}
	.house_left_front{
    height: 164px;
    position: absolute;
    width: 137px;
    z-index: 30;
	background-image:url(../img/index/house_left_front.png) ;
	background-repeat:no-repeat;
	}
	.house_right{
	background-image:url(../img/index/house_right_a.png);
    height: 164px;
    position: absolute;
	right:0;
    width: 243px;
    z-index: 10;
	}
	.house_right_front{
    height: 164px;
    position: absolute;
	right:0;
    width: 137px;
    z-index: 30;
	background-image:url(../img/index/house_right_front.png) ;
	background-repeat:no-repeat;
	}

.parapara{
/*width:120px;これを切るとカメちゃん連続登場*/
height:120px;
overflow:hidden;
background:url(../img/index/kame.png);
		-webkit-animation:para 0.5s steps(2,end) infinite;
		-o-animation:para 0.5s steps(2,end) infinite;
		-ms-animation:para 0.5s steps(2,end) infinite;
			animation:para 0.5s steps(2,end) infinite;
margin:0 auto;
}

/*background-position:横軸x 縦軸y;*/
@-moz-keyframes para{
100% {background-position:-240px 5px;}	
}
@-webkit-keyframes para{
100% {background-position:-240px 5px;}	
}
@-o-keyframes para{
100% {background-position:-240px 5px;}	
}
@-ms-keyframes para{
100% {background-position:-240px 5px;}	
}
@keyframes para {
100% {background-position:-240px 5px;}
}

/*以下は横移動の指定*/
.easy {
/*width:120px;幅の指定は大事です。*/
-moz-animation:easy infinite linear 13s;
-webkit-animation:easy infinite linear 13s;
-o-animation:easy infinite linear 13s;
-ms-animation:easy infinite linear 13s;
animation:easy infinite linear 13s;/*30sは30秒で下記のキーフレームアニメーションを行うという意味*/
width:120px;/*カメの８人集団横幅なら965pxで*/
position:relative;
z-index:20;
bottom:-38px;
}
@-moz-keyframes easy {
0% {
	-moz-transform:translate(850px,0);
	transform:translate(850px,0);
	}/*キーフレーム0%の時パックは右画面の外・画面幅によって数値も違う！*/
100% {
	-moz-transform:translate(20px,0);
	transform:translate(20px,0);
	}/*キーフレーム100%の時パックは左画面の外・画面幅によって数値も違う！*/
}
@-webkit-keyframes easy {
0% {
	-webkit-transform:translate(850px,0);
	transform:translate(850px,0);
	}/*キーフレーム0%の時パックは右画面の外・画面幅によって数値も違う！*/
100% {
	-webkit-transform:translate(20px,0);
	transform:translate(20px,0);
	}/*キーフレーム100%の時パックは左画面の外・画面幅によって数値も違う！*/
}
@-o-keyframes easy {
0% {
	-o-transform:translate(850px,0);
	transform:translate(850px,0);
	}/*キーフレーム0%の時パックは右画面の外・画面幅によって数値も違う！*/
100% {
	-o-transform:translate(20px,0);
	transform:translate(20px,0);
	}/*キーフレーム100%の時パックは左画面の外・画面幅によって数値も違う！*/
}
@-ms-keyframes easy {
0% {
	-ms-transform:translate(850px,0);
	transform:translate(850px,0);
	}/*キーフレーム0%の時パックは右画面の外・画面幅によって数値も違う！*/
100% {
	-ms-transform:translate(20px,0);
	transform:translate(20px,0);
	}/*キーフレーム100%の時パックは左画面の外・画面幅によって数値も違う！*/
}
@keyframes easy {
0% {
	transform:translate(850px,0);
	}/*キーフレーム0%の時パックは右画面の外・画面幅によって数値も違う！*/
100% {
	transform:translate(20px,0);
	}/*キーフレーム100%の時パックは左画面の外・画面幅によって数値も違う！*/
}