@charset "Shift_JIS";


area:hover{
	cursor: none;

}



#animation{
	position: relative;
	clear: both;
	margin: 0 auto;
	width: 730px;
	height: 424px;
	background: url(/jp/tech/ASIMO/kids/iam/sokutei/images/bg_sokutei.gif) 0 0 no-repeat;
	overflow: hidden;

}
.first-view{
	position: absolute;
	left:50%;
	top: 50%;
	margin: -209px 0 0 -362px;
	width: 724px;
	height: 418px;
	background: url(/jp/tech/ASIMO/kids/iam/sokutei/images/first_view.png) 0 0 no-repeat;
}
.asimo-area{
	margin: 0 auto;
	height: 330px;
	width: 186px;
	padding: 30px 0 0 0; 
}
#asimo-wrap{
	position: relative;
	margin: 0 auto;
	height: 330px;
	width: 189px;
	cursor: none;
}

.asimo-parts{
	position: absolute;
	height: 309px;
	width: 166px;
	display: none;
}
.asimo-parts .asimo{
	height: 309px;
	width: 189px;
}
 #asimo_front.asimo-parts.asimo-0{
	display: block;
}
#asimo_front .asimo{
	background: url(/jp/tech/ASIMO/kids/iam/sokutei/images/asimo_front.png) 0 0 no-repeat;
/*	background: none\9;
*/}
#asimo_back .asimo{
	background: url(/jp/tech/ASIMO/kids/iam/sokutei/images/asimo_back.png) 0 0 no-repeat;
/*	background: none\9;
*/}
#asimo_left .asimo{
	background: url(/jp/tech/ASIMO/kids/iam/sokutei/images/asimo_left.png) 0 0 no-repeat;
/*	background: none\9;
*/}
#asimo_right .asimo{
	background: url(/jp/tech/ASIMO/kids/iam/sokutei/images/asimo_right.png) 0 0 no-repeat;
/*	background: none\9;
*/}
/*#asimo_front .asimo{
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod="image",src="/jp/tech/ASIMO/kids/jp/tech/ASIMO/kids/iam/sokutei/images/asimo_front.png");
}
#asimo_back .asimo{
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod="image",src="/jp/tech/ASIMO/kids/jp/tech/ASIMO/kids/iam/sokutei/images/asimo_back.png");
}
#asimo_left .asimo{
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod="image",src="/jp/tech/ASIMO/kids/jp/tech/ASIMO/kids/iam/sokutei/images/asimo_left.png");
}
#asimo_right .asimo{
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod="image",src="/jp/tech/ASIMO/kids/jp/tech/ASIMO/kids/iam/sokutei/images/asimo_right.png");
}

*/




#asimo-wrap .head,
#asimo-wrap .hand,
#asimo-wrap .legs,
#asimo-wrap .waist,
#asimo-wrap .back,
#asimo-wrap .asimo{
	position: absolute;
}





#asimo_front .head{
	left: 50%;
	margin: 0 0 0 -25px;
	display: block;
	width: 50px;
	height: 50px;
}
#asimo_front .waist{
	left: 50%;
	margin: 0 0 0 -25px;
	top:100px;
	width: 50px;
	height: 50px;
}
#asimo_front .legs{
	left: 50%;
	margin: 0 0 0 -40px;
	top:200px;
	width: 80px;
	height: 100px;
}
#asimo_front .hand{
	top: 120px;
	width: 40px;
	height: 80px;
}
#asimo_front .hand{
	left: 0;
}
#asimo_front .hand + .hand{
	left: 150px;
}





#asimo_right .head{
	left: 80px;
	display: block;
	width: 50px;
	height: 50px;
}
#asimo_right .waist{
	left: 110px;
	top:60px;
	width: 20px;
	height: 100px;
}
#asimo_right .legs{
	left: 80px;
	top:200px;
	width: 50px;
	height: 100px;
}
#asimo_right .hand{
	left: 50%;
	top: 120px;
	width: 40px;
	height: 60px;
}
#asimo_right .back{
	left: 40px;
	top: 50px;
	width: 30px;
	height: 80px;
}




#asimo_back .head{
	left: 50%;
	margin: 0 0 0 -25px;
	display: block;
	width: 50px;
	height: 50px;
}
#asimo_back .back{
	left: 50%;
	margin: 0 0 0 -25px;
	top:60px;
	width: 50px;
	height: 100px;
}
#asimo_back .legs{
	left: 50%;
	margin: 0 0 0 -40px;
	top:200px;
	width: 80px;
	height: 100px;
}
#asimo_back .hand{
	top: 100px;
	width: 40px;
	height: 100px;
}
#asimo_back .hand{
	left: 0;
}
#asimo_back .hand + .hand{
	left: 150px;
}






#asimo_left .head{
	left: 50px;
	display: block;
	width: 50px;
	height: 50px;
}
#asimo_left .waist{
	left: 50px;
	top:70px;
	width: 20px;
	height: 80px;
}
#asimo_left .legs{
	left: 30px;
	top:200px;
	width: 50px;
	height: 100px;
}
#asimo_left .hand{
	left: 50%;
	top: 120px;
	margin: 0 0 0 -20px;
	width: 40px;
	height: 60px;
}
#asimo_left .back{
	left: 110px;
	top: 50px;
	width: 30px;
	height: 80px;
}





#asimo-nav{
	margin: 0 auto;
	width:  350px;
	height: 52px;
}
#asimo-nav li{
	float: left;
	height: 52px;
}
#asimo-nav li + li{
	margin: 0 0 0 20px;
}
#asimo-nav li a{
	display: block;
	height: 52px;
	cursor: pointer;
}





#asimo-nav li.nav-head a{
	width: 50px;
	background: url(/jp/tech/ASIMO/kids/iam/sokutei/images/nav_head.png) 0 -52px no-repeat;
}
#asimo-nav li.nav-hand a{
	width: 50px;
	background: url(/jp/tech/ASIMO/kids/iam/sokutei/images/nav_hand.png) 0 -52px no-repeat;
}
#asimo-nav li.nav-legs a{
	width: 50px;
	background: url(/jp/tech/ASIMO/kids/iam/sokutei/images/nav_legs.png) 0 -52px no-repeat;
}
#asimo-nav li.nav-waist a{
	width: 60px;
	background: url(/jp/tech/ASIMO/kids/iam/sokutei/images/nav_waist.png) 0 -52px no-repeat;
}
#asimo-nav li.nav-back a{
	width: 60px;
	background: url(/jp/tech/ASIMO/kids/iam/sokutei/images/nav_back.png) 0 -52px no-repeat;
}
#asimo-nav li a:hover{
	background-position: 0 0;
}






#animation .changer{
	position: relative;
	margin: -60px auto 0;
	width: 240px;
	height: 60px;
	top: 0;
}
#animation .changer-bg{
	position: relative;
	margin: -60px auto 0;
	width: 240px;
	height: 60px;
	background: url(/jp/tech/ASIMO/kids/iam/sokutei/images/shadow.png) 0 10px no-repeat;
/*	background: none\9;
*/	z-index: 0;
	display: none;
}
/*#animation .changer-bg{
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod="image",src="/jp/tech/ASIMO/kids/jp/tech/ASIMO/kids/iam/sokutei/images/shadow.png");
}*/



#animation .arrow-left a,
#animation .arrow-right a{
	position: absolute;
	display: block;
	width: 76px;
	height: 48px;
}
#animation .arrow-left a{
	left: 0;
	background: url(/jp/tech/ASIMO/kids/iam/sokutei/images/arrow_left.png) 0 0 no-repeat;
/*	background: none\9;
*/}
#animation .arrow-right a{
	right: 0;
	background: url(/jp/tech/ASIMO/kids/iam/sokutei/images/arrow_right.png) 0 0 no-repeat;
/*	background: none\9;
*/}
/*#animation .arrow-left a{
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod="image",src="/jp/tech/ASIMO/kids/jp/tech/ASIMO/kids/iam/sokutei/images/arrow_left_ie_off.png");
}
#animation .arrow-right a{
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod="image",src="/jp/tech/ASIMO/kids/jp/tech/ASIMO/kids/iam/sokutei/images/arrow_right_ie_off.png");
}
#animation .arrow-left a:hover{
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod="image",src="/jp/tech/ASIMO/kids/jp/tech/ASIMO/kids/iam/sokutei/images/arrow_left_ie_on.png");
}
#animation .arrow-right a:hover{
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod="image",src="/jp/tech/ASIMO/kids/jp/tech/ASIMO/kids/iam/sokutei/images/arrow_right_ie_on.png");
}

*/


#animation .changer a:hover{
	background-position: 0 -48px;
}


#animation .detail-btn{
	position: absolute;
	margin: -80px 0 0 -300px;
	padding: 14px 0;
	top: 50%;
	left: 50%;
	width: 600px;
	height: 132px;
	overflow: hidden;
}
#animation .detail-btn .height-btn a,
#animation .detail-btn .weight-btn a{
	display: block;
	width: 130px;
	height: 132px;
}
#animation .height-btn a{
	float: left;
	background: url(/jp/tech/ASIMO/kids/iam/sokutei/images/btn-height.png) 0 -132px no-repeat;
}
#animation .weight-btn a{
	float: right;
	background: url(/jp/tech/ASIMO/kids/iam/sokutei/images/btn-weight.png) 0 -132px no-repeat;
}
#animation .detail-btn a:hover{
	background-position: 0 0;
}


.detail-img{
	position:absolute;
	top: 50%;
	left: 50%;
	margin: -119px 0 0 -270px;
	width: 540px;
	height: 238px;
}
.detail-img img{
	position:absolute;
	margin-top: 500px; 
}
.overlay{
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
}

#cursor{
	position: absolute;
	top:0;
	left:0;
	width: 72px;
	height: 72px;
}



/*start*/

.asimo-parts{
	margin-top: 400px;
}
#animation .changer{
	display: none;
}
#asimo-nav li a{
	margin-top: 80px; 
}
#animation .detail-btn .height-btn a,
#animation .detail-btn .weight-btn a{
	margin-top: 145px 
}

.detail-img{
	display: none;

}


/*z-index*/

#asimo-parts{
	z-index: 400;
}
#animation .detail-btn{
	z-index: 1000;
}
#asimo-wrap{
	z-index: 1100;

}
#asimo-wrap .head,
#asimo-wrap .hand,
#asimo-wrap .legs,
#asimo-wrap .waist,
#asimo-wrap .back{
	z-index: 900;
}
#animation .changer{
	z-index: 1100;
}

.detail-img img{
	z-index: 1300;
}
.overlay{
	z-index: 1400;
}
.first-view{
	z-index: 1500;
}




#cursor{
	z-index: 500;
}


@media screen and (max-width: 768px) { 
	#animation {
        height: auto;
        width: auto;
        max-width: 100%;
        border-radius: 10px;
		background: url(/jp/tech/ASIMO/kids/iam/sokutei/images/bg_sokutei_sp.jpg) 0 0 no-repeat;
		background-size: cover;
	}
	#animation .detail-btn {
    position: absolute;
    margin: 0;
    padding: 14px 0;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    height: 132px;
    overflow: hidden;
	}
	.detail-img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -119px 0 0 0;
    width: 100%;
    height: 238px;
    transform: translateX(-50%);
    z-index: 1200;
}
	#asimo-nav {
		max-width: 90%;
		padding: 20px 0;
	}
	#asimo-nav ul {
    display: flex;
    justify-content: center;
	}
	#asimo-nav li + li {
		margin: 0;
	}
	.first-view {
		display: none!important;
	}
	#cursor {
		display: none!important;
	}
	#ASIMO.report .inn-content-area .page-body .ayumi .ri {
		border-left: none;
	    padding-left: 0;
	}
	#animation .detail-btn .height-btn a, #animation .detail-btn .weight-btn a {
    display: block;
    width: 80px;
    height: 80px;
}
	#animation .height-btn a {
		    background: url(/jp/tech/ASIMO/kids/iam/sokutei/images/btn-height.png) 0 -80px no-repeat;
    background-size: cover;
	}
	#animation .weight-btn a {
		    background: url(/jp/tech/ASIMO/kids/iam/sokutei/images/btn-weight.png) 0 -80px no-repeat;
    background-size: cover;
	}
	.detail-img img {
		    left: 50%;
    transform: translateX(-50%);
	}
	.asimo-parts {
    margin-top: 500px;
}

}