@charset "utf-8";
/* CSS Document */


/* anime
------------------------------------------------------------*/
#anime {
	height: 328px;
	width: 958px;
	margin: 0;
	padding: 0;
	position: relative;
	overflow: hidden;
	border: 1px solid #cad5d9;
	}
#anime div{
	background-repeat: no-repeat;
	}


.bgMain{
	background: url(/img/anime/bg_main.jpg) 0 0 no-repeat;
	width: 960px;
	height: 330px;
	}



/* human
------------------------------ */
.human{
	position: absolute;
	top: 245px;
	left: 20px;
	opacity: 0;
	}


.humanClage{
	position: absolute;
	top: -15px;
	left: -7px;
	width: 30px;
	height: 23px;
	opacity: 0;
	background: url(/img/anime/img_human_clage.png);
	}

/* me */
.humanScale div {
	position: absolute;
}
.me {
	top: 0;
	left: 0;
	}
.torso {
	width: 17px;
	height: 57px;
	background-image: url(/img/anime/img_human_torso.png);
	}
.arm {
	left: 3px;
	-webkit-transform-origin: 2px -2px;						-ms-transform-origin: 2px -2px; -moz-transform-origin: 2px -2px; transform-origin: 2px -2px;
}
.right.arm {
	top: 22px;
	}
.left.arm {
	top: 21px;
	}
.bicep {
	height: 17px;
	width: 6px;
	background-image: url(/img/anime/img_human_bicep.png);
	}
.forearm {
	top: 13px; left: 0px;
	width: 8px; height: 22px;
	background-image: url(/img/anime/img_human_forearm.png);
	-webkit-transform-origin: 2px 2px;						-ms-transform-origin: 2px 2px; -moz-transform-origin: 2px 2px; transform-origin: 2px 2px;
	}
.leg {
	left: 3px;
	-webkit-transform-origin: 2px 0px;						-ms-transform-origin: 2px 0px; -moz-transform-origin: 2px 0px; transform-origin: 2px 0px;
}
.right.leg {
	top: 52px;
	}
.left.leg {
	top: 51px;
	}
.thigh {
	width: 11px;
	height: 50px;
	left: -2px;
	background-image: url(/img/anime/img_human_thigh.png);
	}
.shin {
	top: 14px;
	left: 1px;
	width: 11px;
	height: 32px;
	background-image: url(/img/anime/img_human_shin.png);
	-webkit-transform-origin: 1px 2px;						-ms-transform-origin: 1px 2px; -moz-transform-origin: 1px 2px; transform-origin: 1px 2px; 
	}

/* bldg */
.bldg{
	position: absolute;
	bottom: -4px;
	left: -28px;
	background-image: url(/img/anime/img_bldg.png);
	width: 95px;
	height: 189px;
}


.other{
	position: absolute;
	overflow: hidden;
	background: url(/img/anime/img_other.png) 0 0 no-repeat;
}
.other01{
	top: 25px;
	right: 256px;
	width: 232px;
	height: 95px;
	-webkit-transform-origin: 0px 95px;						-ms-transform-origin: 0px 95px; -moz-transform-origin: 0px 95px; transform-origin: 0px 95px;
}
.other02{
	top: 32px;
	right: 52px;
	width: 205px;
	height: 82px;
	background-position: 0 -95px;
	-webkit-transform-origin: 0px 82px;						-ms-transform-origin: 0px 82px; -moz-transform-origin: 0px 82px; transform-origin: 0px 82px;
}



/* user01
------------------------------ */
.user{
	position: absolute;
}
.userBody{
	position: absolute;
	top: 10px;
	left: 4px;
	width: 18px;
	height: 67px;
}
.userArm{
	position: absolute;
	top: 9px;
	left: 0px;
	width: 26px;
	height: 22px;
	-webkit-transform-origin: 0px 20px;						-ms-transform-origin: 0px 20px; -moz-transform-origin: 0px 20px; transform-origin: 0px 20px;
}
.userClage{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 26px;
	height: 22px;
	-webkit-transform-origin: 0px 10px;						-ms-transform-origin: 0px 10px; -moz-transform-origin: 0px 10px; transform-origin: 0px 10px;
}
.userL .userClage{
	left: 2px;
}
.userBlue .userBody{ background-image: url(/img/anime/img_user01_body.png); }
.userBlue .userArm{ background-image: url(/img/anime/img_user01_arm.png); }
.userGray .userBody{ background-image: url(/img/anime/img_user02_body.png); }
.userGray .userArm{ background-image: url(/img/anime/img_user02_arm.png); }
.userR .userClage{ background-image: url(/img/anime/img_user01_clage.png); }
.userL .userClage{ background-image: url(/img/anime/img_user02_clage.png); }

/* 増えた人 */
.user01{
	top: 65px;
	left: 665px;
	opacity: 0;
}
.user02{
	top: 65px;
	left: 582px;
	opacity: 0;
}
.user03{
	top: 70px;
	left: 632px;
	-webkit-transform: scale(0.8);							-ms-transform: scale(0.8); -moz-transform: scale(0.8); transform: scale(0.8);
	opacity: 0;
}

/* 最初から表示 */
.user04{
	top: 30px;
	right: 110px;
	-webkit-transform: scale(0.8);							-ms-transform: scale(0.8); -moz-transform: scale(0.8); transform: scale(0.8);
}
.user05{
	top: 47px;
	left: 605px;
	-webkit-transform: scale(0.87);							-ms-transform: scale(0.87); -moz-transform: scale(0.87); transform: scale(0.87);
}

.overClage{
	position: absolute;
	top: 70px;
	left: 167px;
	width: 89px;
	height: 65px;
	overflow: hidden;
	background: url(/img/anime/img_overClage.png) 0 0 no-repeat;
}
.overClageEyeL{
	position: absolute;
	top: 28px;
	left: 6px;
	width: 10px;
	height: 9px;
	overflow: hidden;
	background: url(/img/anime/img_overClage.png) 0 -65px no-repeat;
}
.overClageEyeR{
	position: absolute;
	top: 32px;
	left: 54px;
	width: 10px;
	height: 9px;
	overflow: hidden;
	background: url(/img/anime/img_overClage.png) 0 -65px no-repeat;
}


/* clage
------------------------------ */
.clageBox{
	position: absolute;
	top: 90px;
	right: 120px;
	}
.clage{
	width: 115px;
	height: 83px;
	background-image: url(/img/anime/img_clage.png);
	-webkit-transform: scale(0.35);							-ms-transform: scale(0.35); -moz-transform: scale(0.35); transform: scale(0.35);
}

/* mask
------------------------------ */
.maskBox{
	position: absolute;
	top: 0;
	left: 0;
	}
.mask{
	width: 960px;
	-webkit-transform-origin: 792px 105px;				-ms-transform-origin: 792px 105px; -moz-transform-origin: 792px 105px; transform-origin: 792px 105px;
	-webkit-transform: scale(14);								-ms-transform: scale(14); -moz-transform: scale(14); transform: scale(14);
	}
.mask svg{
	width: 980px;
	margin: -3px -10px;
}
.bgWhite{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	opacity: 0;
}



/* txt
------------------------------ */
.txt01{
	position: absolute;
	top: 100px;
	left: 266px;
	width: 404px;
	height: 27px;
	background-image: url(/img/anime/txt_01.png);
	opacity: 0;
	}
.txt02{
	position: absolute;
	top: 156px;
	left: 260px;
	width: 415px;
	height: 66px;
	background-image: url(/img/anime/txt_02.png);
	opacity: 0;
	}








/* human */
body[data-anime="start"] .human{
	opacity: 1;
	-webkit-animation-name: move;						-ms-animation-name: move; -moz-animation-name: move; animation-name: move;
	}
body[data-anime="start"] .humanScale{
	-webkit-animation-name: scale;							-ms-animation-name: scale; -moz-animation-name: scale; animation-name: scale;
	}
body[data-anime="start"] .human,
body[data-anime="start"] .humanScale{
	-webkit-animation-duration: 5500ms;					-ms-animation-duration: 5500ms; -moz-animation-duration: 5500ms; animation-duration: 5500ms;
	-webkit-animation-timing-function: linear;			-ms-animation-timing-function: linear; -moz-animation-timing-function: linear; animation-timing-function: linear;
	-webkit-animation-fill-mode: forwards;				-ms-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards;
	}
body[data-anime="start"] .humanClage{
	-webkit-animation-duration: 5500ms;					-ms-animation-duration: 5500ms; -moz-animation-duration: 5500ms; animation-duration: 5500ms;
	-webkit-animation-timing-function: linear;			-ms-animation-timing-function: linear; -moz-animation-timing-function: linear; animation-timing-function: linear;
	-webkit-animation-name: humanClage;					-ms-animation-name: humanClage; -moz-animation-name: humanClage; animation-name: humanClage;
	}
body[data-anime="start"] .human.hum02,
body[data-anime="start"] .human.hum02 .humanScale,
body[data-anime="start"] .human.hum02 .humanClage{
	-webkit-animation-delay: 1500ms;					-ms-animation-delay: 1500ms; -moz-animation-delay: 1500ms; animation-delay: 1500ms;
}
body[data-anime="start"] .human.hum03,
body[data-anime="start"] .human.hum03 .humanScale,
body[data-anime="start"] .human.hum03 .humanClage{
	-webkit-animation-delay: 2300ms;					-ms-animation-delay: 2300ms; -moz-animation-delay: 2300ms; animation-delay: 2300ms;
}
body[data-anime="start"] .human.hum04,
body[data-anime="start"] .human.hum04 .humanScale,
body[data-anime="start"] .human.hum04 .humanClage{
	-webkit-animation-delay: 4000ms;					-ms-animation-delay: 4000ms; -moz-animation-delay: 4000ms; animation-delay: 4000ms;
}
body[data-anime="start"] .human.hum05,
body[data-anime="start"] .human.hum05 .humanScale,
body[data-anime="start"] .human.hum05 .humanClage{
	-webkit-animation-delay: 4300ms;					-ms-animation-delay: 4300ms; -moz-animation-delay: 4300ms; animation-delay: 4300ms;
}
body[data-anime="start"] .human.hum06,
body[data-anime="start"] .human.hum06 .humanScale,
body[data-anime="start"] .human.hum06 .humanClage{
	-webkit-animation-delay: 5000ms;					-ms-animation-delay: 5000ms; -moz-animation-delay: 5000ms; animation-delay: 5000ms;
}


body[data-anime="start"] .humanScale div{
	-webkit-animation-iteration-count: infinite;			-ms-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;			-ms-animation-timing-function: linear; -moz-animation-timing-function: linear; animation-timing-function: linear;
	}
body[data-anime="start"] .me{
	-webkit-animation-name: me;							-ms-animation-name: me; -moz-animation-name: me; animation-name: me;
}
body[data-anime="start"] .me,
body[data-anime="start"] .me div{
	-webkit-animation-duration: 800ms;					-ms-animation-duration: 800ms; -moz-animation-duration: 800ms; animation-duration: 800ms;
	}
body[data-anime="start"] .right.arm {
	-webkit-animation-name: right-bicep;					-ms-animation-name: right-bicep; -moz-animation-name: right-bicep; animation-name: right-bicep;
}
body[data-anime="start"] .left.arm {
	-webkit-animation-name: left-bicep;					-ms-animation-name: left-bicep; -moz-animation-name: left-bicep; animation-name: left-bicep;
}
body[data-anime="start"] .right.forearm {
	-webkit-animation-name: right-forearm;				-ms-animation-name: right-forearm; -moz-animation-name: right-forearm; animation-name: right-forearm;
	}
body[data-anime="start"] .left.forearm {
	-webkit-animation-name: left-forearm;				-ms-animation-name: left-forearm; -moz-animation-name: left-forearm; animation-name: left-forearm;
	}
body[data-anime="start"] .leg{
	-webkit-animation-name: thigh;							-ms-animation-name: thigh; -moz-animation-name: thigh; animation-name: thigh;
	}
body[data-anime="start"] .right.leg {
	-webkit-animation-name: right-thigh;					-ms-animation-name: right-thigh; -moz-animation-name: right-thigh; animation-name: right-thigh;
}
body[data-anime="start"] .left.leg {
	-webkit-animation-name: left-thigh;					-ms-animation-name: left-thigh; -moz-animation-name: left-thigh; animation-name: left-thigh;
	}
body[data-anime="start"] .right.shin {
	-webkit-animation-name: right-shin;					-ms-animation-name: right-shin; -moz-animation-name: right-shin; animation-name: right-shin;
	}
body[data-anime="start"] .left.shin {
	-webkit-animation-name: left-shin;					-ms-animation-name: left-shin; -moz-animation-name: left-shin; animation-name: left-shin;
	}

/* steps */
body[data-anime="start"] .steps .me{
	-webkit-animation-name: me-steps;							-ms-animation-name: me-steps; -moz-animation-name: me-steps; animation-name: me-steps;
}
body[data-anime="start"] .steps .me,
body[data-anime="start"] .steps .me div{
	-webkit-animation-duration: 750ms;				-ms-animation-duration: 750ms; -moz-animation-duration: 750ms; animation-duration: 750ms;
	}
body[data-anime="start"] .steps .right.arm {
	-webkit-animation-name: right-bicep-steps;					-ms-animation-name: right-bicep-steps; -moz-animation-name: right-bicep-steps; animation-name: right-bicep-steps;
}
body[data-anime="start"] .steps .left.arm {
	-webkit-animation-name: left-bicep-steps;					-ms-animation-name: left-bicep-steps; -moz-animation-name: left-bicep-steps; animation-name: left-bicep-steps;
}
body[data-anime="start"] .steps .right.forearm {
	-webkit-animation-name: right-forearm-steps;				-ms-animation-name: right-forearm-steps; -moz-animation-name: right-forearm-steps; animation-name: right-forearm-steps;
	}
body[data-anime="start"] .steps .left.forearm {
	-webkit-animation-name: left-forearm-steps;				-ms-animation-name: left-forearm-steps; -moz-animation-name: left-forearm-steps; animation-name: left-forearm-steps;
	}
body[data-anime="start"] .steps .leg{
	-webkit-animation-name: thigh-steps;							-ms-animation-name: thigh-steps; -moz-animation-name: thigh-steps; animation-name: thigh-steps;
	}
body[data-anime="start"] .steps .right.leg {
	-webkit-animation-name: right-thigh-steps;					-ms-animation-name: right-thigh-steps; -moz-animation-name: right-thigh-steps; animation-name: right-thigh-steps;
}
body[data-anime="start"] .steps .left.leg {
	-webkit-animation-name: left-thigh-steps;					-ms-animation-name: left-thigh-steps; -moz-animation-name: left-thigh-steps; animation-name: left-thigh-steps;
	}
body[data-anime="start"] .steps .right.shin {
	-webkit-animation-name: right-shin-steps;					-ms-animation-name: right-shin-steps; -moz-animation-name: right-shin-steps; animation-name: right-shin-steps;
	}
body[data-anime="start"] .steps .left.shin {
	-webkit-animation-name: left-shin-steps;					-ms-animation-name: left-shin-steps; -moz-animation-name: left-shin-steps; animation-name: left-shin-steps;
	}


/* other */
body[data-anime="start"] .other01{
	-webkit-animation: other01 1000ms linear infinite;	-ms-animation: other01 1000ms linear infinite; -moz-animation: other01 1000ms linear infinite; animation: other01 1000ms linear infinite;
}
body[data-anime="start"] .other02{
	-webkit-animation: other02 1000ms linear infinite;	-ms-animation: other02 1000ms linear infinite; -moz-animation: other02 1000ms linear infinite; animation: other02 1000ms linear infinite;
}

/* user */
body[data-anime="start"] .userArm{
	-webkit-animation-duration: 2000ms;					-ms-animation-duration: 2000ms; -moz-animation-duration: 2000ms; animation-duration: 2000ms;
	-webkit-animation-iteration-count: infinite;			-ms-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;			-ms-animation-timing-function: linear; -moz-animation-timing-function: linear; animation-timing-function: linear;
	-webkit-animation-name: userArm;					-ms-animation-name: userArm; -moz-animation-name: userArm; animation-name: userArm;
	}
body[data-anime="start"] .userClage{
	-webkit-animation-duration: 2000ms;					-ms-animation-duration: 2000ms; -moz-animation-duration: 2000ms; animation-duration: 2000ms;
	-webkit-animation-iteration-count: infinite;			-ms-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;			-ms-animation-timing-function: linear; -moz-animation-timing-function: linear; animation-timing-function: linear;
	-webkit-animation-name: userClage;					-ms-animation-name: userClage; -moz-animation-name: userClage; animation-name: userClage;
	}
body[data-anime="start"] .user01{
	-webkit-animation: fadeIn 600ms linear 5800ms;	-ms-animation: fadeIn 600ms linear 5800ms; -moz-animation: fadeIn 600ms linear 5800ms; animation: fadeIn 600ms linear 5800ms;
	-webkit-animation-fill-mode: forwards;				-ms-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
body[data-anime="start"] .user02{
	-webkit-animation: fadeIn 600ms linear 6700ms;	-ms-animation: fadeIn 600ms linear 6700ms; -moz-animation: fadeIn 600ms linear 6700ms; animation: fadeIn 600ms linear 6700ms;
	-webkit-animation-fill-mode: forwards;				-ms-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
body[data-anime="start"] .user03{
	-webkit-animation: fadeIn 600ms linear 7300ms;	-ms-animation: fadeIn 600ms linear 7300ms; -moz-animation: fadeIn 600ms linear 7300ms; animation: fadeIn 600ms linear 7300ms;
	-webkit-animation-fill-mode: forwards;				-ms-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards;
}


body[data-anime="start"] .overClageEyeL,
body[data-anime="start"] .overClageEyeR{
	-webkit-animation: rotate 3000ms linear infinite;	-ms-animation: rotate 3000ms linear infinite; -moz-animation: rotate 3000ms linear infinite; animation: rotate 3000ms linear infinite;
}


/* clage */
body[data-anime="start"] .clage{
	-webkit-animation: clage 800ms cubic-bezier(0.215, 0.61, 0.355, 1) 7800ms;		-ms-animation: clage 800ms cubic-bezier(0.215, 0.61, 0.355, 1) 7800ms; -moz-animation: clage 800ms cubic-bezier(0.215, 0.61, 0.355, 1) 7800ms; animation: clage 800ms cubic-bezier(0.215, 0.61, 0.355, 1) 7800ms;
	-webkit-animation-fill-mode: forwards;				-ms-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards;
	}
	
	
/* mask */
body[data-anime="start"] .mask{
	-webkit-animation: mask 700ms cubic-bezier(0.215, 0.61, 0.355, 1) 7700ms;	-ms-animation: mask 700ms cubic-bezier(0.215, 0.61, 0.355, 1) 7700ms; -moz-animation: mask 700ms cubic-bezier(0.215, 0.61, 0.355, 1) 7700ms; animation: mask 700ms cubic-bezier(0.215, 0.61, 0.355, 1) 7700ms;
	-webkit-animation-fill-mode: forwards;				-ms-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
body[data-anime="start"] .bgWhite{
	-webkit-animation: fadeIn 900ms linear 7800ms;	-ms-animation: fadeIn 900ms linear 7800ms; -moz-animation: fadeIn 900ms linear 7800ms; animation: fadeIn 900ms linear 7800ms;
	-webkit-animation-fill-mode: forwards;				-ms-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards;
}

/* txt */
body[data-anime="start"] .txt01{
	-webkit-animation: fadeIn 600ms ease-in 8500ms;		-ms-animation: fadeIn 600ms ease-in 8500ms; -moz-animation: fadeIn 600ms ease-in 8500ms; animation: fadeIn 600ms ease-in 8500ms;
	-webkit-animation-fill-mode: forwards;				-ms-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
body[data-anime="start"] .txt02{
	-webkit-animation: fadeIn 400ms ease-in 9400ms;		-ms-animation: fadeIn 400ms ease-in 9400ms; -moz-animation: fadeIn 400ms ease-in 9400ms; animation: fadeIn 400ms ease-in 9400ms;
	-webkit-animation-fill-mode: forwards;				-ms-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards;
}




















/* setting proper z-indexes so that limbs show up correctly */
div.right.arm { z-index: 1; 	}
div.left.arm { z-index: -3; 	}
div.arm > div.bicep > div.forearm { z-index: -1; 	}
div.right.leg { z-index: -1; 	}
div.left.leg { z-index: -2; 	}
div.leg > div.thigh > div.shin { z-index: -1; 	}

/* animations */
@-webkit-keyframes move {
	0% { -webkit-transform:translate( 0px,   0); 	}
	17% { -webkit-transform: translate( 140px,   10px); 	}
	24% { -webkit-transform: translate( 170px,   7px); 	}
	26% { -webkit-transform: translate( 180px,   7px); 	}/* 入る */
	32% { -webkit-transform: translate( 200px,   7px); 	}/* 出る */
	38% { -webkit-transform: translate( 220px,   12px); 	}
	72% { -webkit-transform: translate( 425px,   -35px); 	}/* 階段の手前 */
	100% { -webkit-transform: translate( 595px,   -190px); 	}
	}
@-webkit-keyframes scale {
	0% { -webkit-transform:   scale(0.6); 	}
	18% { -webkit-transform: scale(0.35); 	}
	25% { -webkit-transform: scale(0.35); opacity: 1; }/* 入る */
	26% { opacity: 0;}
	32% { opacity: 0;}
	33% { -webkit-transform: scale(0.35);  opacity: 1;	}/* 出る */
	38% { -webkit-transform: scale(0.35); }
	72% { -webkit-transform:   scale(1); 	}/* 階段の手前 */
	98% { -webkit-transform:   scale(1); opacity: 1; }
	100% { -webkit-transform:   scale(1); opacity: 0;	}
	}
 @-webkit-keyframes humanClage {
	0% { opacity: 0; }
	32% { opacity: 0;	}
	33% { opacity: 1;	}
	100% { opacity: 1;	}
	}
@-webkit-keyframes me {
	0% { -webkit-transform:   rotate(0deg) translate( 1px,   0px); 	}
	25% { -webkit-transform:  rotate(0deg) translate(-1px, -3px); 	}
	50% { -webkit-transform:  rotate(0deg) translate( 1px,   0px); 	}
	75% { -webkit-transform:  rotate(0deg) translate(-1px, -3px); 	}
	100% { -webkit-transform: rotate(0deg) translate( 1px,   0px); 	}
	}
@-webkit-keyframes right-bicep {
	0%   { -webkit-transform: rotate(35deg); 	}
	50%  { -webkit-transform: rotate(-30deg); 	}
	100% { -webkit-transform: rotate(35deg); 	}
	}
@-webkit-keyframes left-bicep {
	0%   { -webkit-transform: rotate(-30deg); 	}
	50%  { -webkit-transform: rotate(35deg); 	}
	100% { -webkit-transform: rotate(-30deg); 	}
	}
@-webkit-keyframes right-forearm {
	0%   { -webkit-transform: rotate(-10deg); 	}
	50%  { -webkit-transform: rotate(-10deg); 	}
	100% { -webkit-transform: rotate(-10deg); 	}
	}
@-webkit-keyframes left-forearm {
	0%   { -webkit-transform: rotate(-10deg); 	}
	50%  { -webkit-transform: rotate(-10deg); 	}
	100% { -webkit-transform: rotate(-10deg); 	}
	}
@-webkit-keyframes right-thigh {
	0%   { -webkit-transform: rotate(-50deg); 	}
	50%  { -webkit-transform: rotate(30deg); 	}
	100% { -webkit-transform: rotate(-50deg); 	}
	}
@-webkit-keyframes left-thigh {
	0%   { -webkit-transform: rotate(30deg); 	}
	50%  { -webkit-transform: rotate(-50deg); 	}
	100% { -webkit-transform: rotate(30deg); 	}
	} 
@-webkit-keyframes right-shin {
	0%   { -webkit-transform: rotate(20deg); 	}
	25%  { -webkit-transform: rotate(32deg); 	}
	50%  { -webkit-transform: rotate(30deg); 	}
	75%  { -webkit-transform: rotate(28deg); 	}
	100% { -webkit-transform: rotate(20deg); 	}
	}
 @-webkit-keyframes left-shin {
	0%   { -webkit-transform: rotate(20deg); 	}
	25%  { -webkit-transform: rotate(28deg); 	}
	50%  { -webkit-transform: rotate(30deg); 	}
	75%  { -webkit-transform: rotate(32deg); 	}
	100% { -webkit-transform: rotate(20deg); 	}
	}
	
/* steps -------------------------- */
@-webkit-keyframes me-steps {
	0% { -webkit-transform:   rotate(3deg) translate( -1px,   -3px); 	}
	25% { -webkit-transform:  rotate(3deg) translate( 1px, 0px); 	}
	50% { -webkit-transform:  rotate(3deg) translate( -1px,   -3px); 	}
	75% { -webkit-transform:  rotate(3deg) translate( 1px, 0px); 	}
	100% { -webkit-transform: rotate(3deg) translate( -1px,   -3px); 	}
	}
@-webkit-keyframes right-bicep-steps {
	0%   { -webkit-transform: rotate(35deg); 	}
	50%  { -webkit-transform: rotate(-30deg); 	}
	100% { -webkit-transform: rotate(35deg); 	} 
	}
@-webkit-keyframes left-bicep-steps {
	0%   { -webkit-transform: rotate(-30deg); 	}
	50%  { -webkit-transform: rotate(35deg); 	}
	100% { -webkit-transform: rotate(-30deg); 	} 
	}
@-webkit-keyframes right-forearm-steps {
	0%   { -webkit-transform: rotate(-10deg); 	}
	50%  { -webkit-transform: rotate(-10deg); 	}
	100% { -webkit-transform: rotate(-10deg); 	} 
	}
@-webkit-keyframes left-forearm-steps {
	0%   { -webkit-transform: rotate(-10deg); 	}
	50%  { -webkit-transform: rotate(-10deg); 	}
	100% { -webkit-transform: rotate(-10deg); 	} 
	}
@-webkit-keyframes right-thigh-steps {
	0%   { -webkit-transform: rotate(-75deg); 	}
	50%  { -webkit-transform: rotate(25deg); 	}
	100% { -webkit-transform: rotate(-75deg); 	}
	}
@-webkit-keyframes left-thigh-steps {
	0%   { -webkit-transform: rotate(25deg); 	}
	50%  { -webkit-transform: rotate(-75deg); 	}
	100% { -webkit-transform: rotate(25deg); 	}
	} 
@-webkit-keyframes right-shin-steps {
	0%   { -webkit-transform: rotate(70deg); 	}
	 25%  { -webkit-transform: rotate(50deg); 	}
	50%  { -webkit-transform: rotate(0deg); 	}
	75%  { -webkit-transform: rotate(30deg); 	} 
	100% { -webkit-transform: rotate(70deg); 	}
	}
 @-webkit-keyframes left-shin-steps {
	0%   { -webkit-transform: rotate(0deg); 	}
	25%  { -webkit-transform: rotate(30deg); 	}
	50%  { -webkit-transform: rotate(70deg); 	}
	75%  { -webkit-transform: rotate(50deg); 	}
	100% { -webkit-transform: rotate(0deg); 	} 
	}
	
@-webkit-keyframes other01 {
	0% { -webkit-transform: scale(1,1); 	}
	20% { -webkit-transform:   scale(1,0.97); 	}
	50% { -webkit-transform: scale(1,1); 	}
}
@-webkit-keyframes other02 {
	50% { -webkit-transform: scale(1,1); 	}
	70% { -webkit-transform:   scale(1,0.95); 	}
	90% { -webkit-transform: scale(1,1); 	}
}
@-webkit-keyframes userArm {
	0% { -webkit-transform:   scale(1,1); 	}
	10% { -webkit-transform: scale(1,0.7); 	}
	30% { -webkit-transform:   scale(1,1); 	}
	40% { -webkit-transform: scale(1,0.7); 	}
	60% { -webkit-transform:   scale(1,1); 	}
	}
@-webkit-keyframes userClage {
	0% { -webkit-transform:  translate( 0px,   0);  	}
	10% { -webkit-transform:  translate( 0,   3px); 	}
	30% { -webkit-transform:  translate( 0px,   0); 	}
	40% { -webkit-transform:  translate( 0,   3px); 	}
	60% { -webkit-transform:   translate( 0,   0); 	}
	}
	
@-webkit-keyframes clage {
	0% { -webkit-transform:   scale(0.35) translate( 0px,   0px); 	}
	100% { -webkit-transform: scale(1) translate( 19px,   -30px); 	}
	}
@-webkit-keyframes mask {
	0% { -webkit-transform:   scale(13); 	}
	100% { -webkit-transform:   scale(1); 	}
	}
@-webkit-keyframes fadeIn {
	0% { opacity: 0; 	}
	100% { opacity: 1;	}
	}
@-webkit-keyframes rotate {
	0% { -webkit-transform: rotate(0deg); }
	20% { -webkit-transform: rotate(80deg); 	}
	40% { -webkit-transform: rotate(0deg); }
	}



/* animations */
@-moz-keyframes move {
	0% { -moz-transform:translate( 0px,   0); 	}
	17% { -moz-transform: translate( 140px,   10px); 	}
	24% { -moz-transform: translate( 170px,   7px); 	}
	26% { -moz-transform: translate( 180px,   7px); 	}/* 入る */
	32% { -moz-transform: translate( 200px,   7px); 	}/* 出る */
	38% { -moz-transform: translate( 220px,   12px); 	}
	72% { -moz-transform: translate( 425px,   -35px); 	}/* 階段の手前 */
	100% { -moz-transform: translate( 595px,   -190px); 	}
	}
@-moz-keyframes scale {
	0% { -moz-transform:   scale(0.6); 	}
	18% { -moz-transform: scale(0.35); 	}
	25% { -moz-transform: scale(0.35); opacity: 1; }/* 入る */
	26% { opacity: 0;}
	32% { opacity: 0;}
	33% { -moz-transform: scale(0.35);  opacity: 1;	}/* 出る */
	38% { -moz-transform: scale(0.35); }
	72% { -moz-transform:   scale(1); 	}/* 階段の手前 */
	98% { -moz-transform:   scale(1); opacity: 1; }
	100% { -moz-transform:   scale(1); opacity: 0;	}
	}
 @-moz-keyframes humanClage {
	0% { opacity: 0; }
	32% { opacity: 0;	}
	33% { opacity: 1;	}
	100% { opacity: 1;	}
	}
@-moz-keyframes me {
	0% { -moz-transform:   rotate(0deg) translate( 1px,   0px); 	}
	25% { -moz-transform:  rotate(0deg) translate(-1px, -3px); 	}
	50% { -moz-transform:  rotate(0deg) translate( 1px,   0px); 	}
	75% { -moz-transform:  rotate(0deg) translate(-1px, -3px); 	}
	100% { -moz-transform: rotate(0deg) translate( 1px,   0px); 	}
	}
@-moz-keyframes right-bicep {
	0%   { -moz-transform: rotate(35deg); 	}
	50%  { -moz-transform: rotate(-30deg); 	}
	100% { -moz-transform: rotate(35deg); 	}
	}
@-moz-keyframes left-bicep {
	0%   { -moz-transform: rotate(-30deg); 	}
	50%  { -moz-transform: rotate(35deg); 	}
	100% { -moz-transform: rotate(-30deg); 	}
	}
@-moz-keyframes right-forearm {
	0%   { -moz-transform: rotate(-10deg); 	}
	50%  { -moz-transform: rotate(-10deg); 	}
	100% { -moz-transform: rotate(-10deg); 	}
	}
@-moz-keyframes left-forearm {
	0%   { -moz-transform: rotate(-10deg); 	}
	50%  { -moz-transform: rotate(-10deg); 	}
	100% { -moz-transform: rotate(-10deg); 	}
	}
@-moz-keyframes right-thigh {
	0%   { -moz-transform: rotate(-50deg); 	}
	50%  { -moz-transform: rotate(30deg); 	}
	100% { -moz-transform: rotate(-50deg); 	}
	}
@-moz-keyframes left-thigh {
	0%   { -moz-transform: rotate(30deg); 	}
	50%  { -moz-transform: rotate(-50deg); 	}
	100% { -moz-transform: rotate(30deg); 	}
	} 
@-moz-keyframes right-shin {
	0%   { -moz-transform: rotate(20deg); 	}
	25%  { -moz-transform: rotate(32deg); 	}
	50%  { -moz-transform: rotate(30deg); 	}
	75%  { -moz-transform: rotate(28deg); 	}
	100% { -moz-transform: rotate(20deg); 	}
	}
 @-moz-keyframes left-shin {
	0%   { -moz-transform: rotate(20deg); 	}
	25%  { -moz-transform: rotate(28deg); 	}
	50%  { -moz-transform: rotate(30deg); 	}
	75%  { -moz-transform: rotate(32deg); 	}
	100% { -moz-transform: rotate(20deg); 	}
	}
	
/* steps -------------------------- */
@-moz-keyframes me-steps {
	0% { -moz-transform:   rotate(3deg) translate( -1px,   -3px); 	}
	25% { -moz-transform:  rotate(3deg) translate( 1px, 0px); 	}
	50% { -moz-transform:  rotate(3deg) translate( -1px,   -3px); 	}
	75% { -moz-transform:  rotate(3deg) translate( 1px, 0px); 	}
	100% { -moz-transform: rotate(3deg) translate( -1px,   -3px); 	}
	}
@-moz-keyframes right-bicep-steps {
	0%   { -moz-transform: rotate(35deg); 	}
	50%  { -moz-transform: rotate(-30deg); 	}
	100% { -moz-transform: rotate(35deg); 	} 
	}
@-moz-keyframes left-bicep-steps {
	0%   { -moz-transform: rotate(-30deg); 	}
	50%  { -moz-transform: rotate(35deg); 	}
	100% { -moz-transform: rotate(-30deg); 	} 
	}
@-moz-keyframes right-forearm-steps {
	0%   { -moz-transform: rotate(-10deg); 	}
	50%  { -moz-transform: rotate(-10deg); 	}
	100% { -moz-transform: rotate(-10deg); 	} 
	}
@-moz-keyframes left-forearm-steps {
	0%   { -moz-transform: rotate(-10deg); 	}
	50%  { -moz-transform: rotate(-10deg); 	}
	100% { -moz-transform: rotate(-10deg); 	} 
	}
@-moz-keyframes right-thigh-steps {
	0%   { -moz-transform: rotate(-75deg); 	}
	50%  { -moz-transform: rotate(25deg); 	}
	100% { -moz-transform: rotate(-75deg); 	}
	}
@-moz-keyframes left-thigh-steps {
	0%   { -moz-transform: rotate(25deg); 	}
	50%  { -moz-transform: rotate(-75deg); 	}
	100% { -moz-transform: rotate(25deg); 	}
	} 
@-moz-keyframes right-shin-steps {
	0%   { -moz-transform: rotate(70deg); 	}
	 25%  { -moz-transform: rotate(50deg); 	}
	50%  { -moz-transform: rotate(0deg); 	}
	75%  { -moz-transform: rotate(30deg); 	} 
	100% { -moz-transform: rotate(70deg); 	}
	}
 @-moz-keyframes left-shin-steps {
	0%   { -moz-transform: rotate(0deg); 	}
	25%  { -moz-transform: rotate(30deg); 	}
	50%  { -moz-transform: rotate(70deg); 	}
	75%  { -moz-transform: rotate(50deg); 	}
	100% { -moz-transform: rotate(0deg); 	} 
	}
	
@-moz-keyframes other01 {
	0% { -moz-transform: scale(1,1); 	}
	20% { -moz-transform:   scale(1,0.97); 	}
	50% { -moz-transform: scale(1,1); 	}
}
@-moz-keyframes other02 {
	50% { -moz-transform: scale(1,1); 	}
	70% { -moz-transform:   scale(1,0.95); 	}
	90% { -moz-transform: scale(1,1); 	}
}
@-moz-keyframes userArm {
	0% { -moz-transform:   scale(1,1); 	}
	10% { -moz-transform: scale(1,0.7); 	}
	30% { -moz-transform:   scale(1,1); 	}
	40% { -moz-transform: scale(1,0.7); 	}
	60% { -moz-transform:   scale(1,1); 	}
	}
@-moz-keyframes userClage {
	0% { -moz-transform:  translate( 0px,   0);  	}
	10% { -moz-transform:  translate( 0,   3px); 	}
	30% { -moz-transform:  translate( 0px,   0); 	}
	40% { -moz-transform:  translate( 0,   3px); 	}
	60% { -moz-transform:   translate( 0,   0); 	}
	}
	
@-moz-keyframes clage {
	0% { -moz-transform:   scale(0.35) translate( 0px,   0px); 	}
	100% { -moz-transform: scale(1) translate( 19px,   -30px); 	}
	}
@-moz-keyframes mask {
	0% { -moz-transform:   scale(13); 	}
	100% { -moz-transform:   scale(1); 	}
	}
@-moz-keyframes fadeIn {
	0% { opacity: 0; 	}
	100% { opacity: 1;	}
	}
@-moz-keyframes rotate {
	0% { -moz-transform: rotate(0deg); }
	20% { -moz-transform: rotate(80deg); 	}
	40% { -moz-transform: rotate(0deg); }
	}
	
	
/* animations */
@-ms-keyframes move {
	0% { -ms-transform:translate( 0px,   0); 	}
	17% { -ms-transform: translate( 140px,   10px); 	}
	24% { -ms-transform: translate( 170px,   7px); 	}
	26% { -ms-transform: translate( 180px,   7px); 	}/* 入る */
	32% { -ms-transform: translate( 200px,   7px); 	}/* 出る */
	38% { -ms-transform: translate( 220px,   12px); 	}
	72% { -ms-transform: translate( 425px,   -35px); 	}/* 階段の手前 */
	100% { -ms-transform: translate( 595px,   -190px); 	}
	}
@-ms-keyframes scale {
	0% { -ms-transform:   scale(0.6); 	}
	18% { -ms-transform: scale(0.35); 	}
	25% { -ms-transform: scale(0.35); opacity: 1; }/* 入る */
	26% { opacity: 0;}
	32% { opacity: 0;}
	33% { -ms-transform: scale(0.35);  opacity: 1;	}/* 出る */
	38% { -ms-transform: scale(0.35); }
	72% { -ms-transform:   scale(1); 	}/* 階段の手前 */
	98% { -ms-transform:   scale(1); opacity: 1; }
	100% { -ms-transform:   scale(1); opacity: 0;	}
	}
 @-ms-keyframes humanClage {
	0% { opacity: 0; }
	32% { opacity: 0;	}
	33% { opacity: 1;	}
	100% { opacity: 1;	}
	}
@-ms-keyframes me {
	0% { -ms-transform:   rotate(0deg) translate( 1px,   0px); 	}
	25% { -ms-transform:  rotate(0deg) translate(-1px, -3px); 	}
	50% { -ms-transform:  rotate(0deg) translate( 1px,   0px); 	}
	75% { -ms-transform:  rotate(0deg) translate(-1px, -3px); 	}
	100% { -ms-transform: rotate(0deg) translate( 1px,   0px); 	}
	}
@-ms-keyframes right-bicep {
	0%   { -ms-transform: rotate(35deg); 	}
	50%  { -ms-transform: rotate(-30deg); 	}
	100% { -ms-transform: rotate(35deg); 	}
	}
@-ms-keyframes left-bicep {
	0%   { -ms-transform: rotate(-30deg); 	}
	50%  { -ms-transform: rotate(35deg); 	}
	100% { -ms-transform: rotate(-30deg); 	}
	}
@-ms-keyframes right-forearm {
	0%   { -ms-transform: rotate(-10deg); 	}
	50%  { -ms-transform: rotate(-10deg); 	}
	100% { -ms-transform: rotate(-10deg); 	}
	}
@-ms-keyframes left-forearm {
	0%   { -ms-transform: rotate(-10deg); 	}
	50%  { -ms-transform: rotate(-10deg); 	}
	100% { -ms-transform: rotate(-10deg); 	}
	}
@-ms-keyframes right-thigh {
	0%   { -ms-transform: rotate(-50deg); 	}
	50%  { -ms-transform: rotate(30deg); 	}
	100% { -ms-transform: rotate(-50deg); 	}
	}
@-ms-keyframes left-thigh {
	0%   { -ms-transform: rotate(30deg); 	}
	50%  { -ms-transform: rotate(-50deg); 	}
	100% { -ms-transform: rotate(30deg); 	}
	} 
@-ms-keyframes right-shin {
	0%   { -ms-transform: rotate(20deg); 	}
	25%  { -ms-transform: rotate(32deg); 	}
	50%  { -ms-transform: rotate(30deg); 	}
	75%  { -ms-transform: rotate(28deg); 	}
	100% { -ms-transform: rotate(20deg); 	}
	}
 @-ms-keyframes left-shin {
	0%   { -ms-transform: rotate(20deg); 	}
	25%  { -ms-transform: rotate(28deg); 	}
	50%  { -ms-transform: rotate(30deg); 	}
	75%  { -ms-transform: rotate(32deg); 	}
	100% { -ms-transform: rotate(20deg); 	}
	}
	
/* steps -------------------------- */
@-ms-keyframes me-steps {
	0% { -ms-transform:   rotate(3deg) translate( -1px,   -3px); 	}
	25% { -ms-transform:  rotate(3deg) translate( 1px, 0px); 	}
	50% { -ms-transform:  rotate(3deg) translate( -1px,   -3px); 	}
	75% { -ms-transform:  rotate(3deg) translate( 1px, 0px); 	}
	100% { -ms-transform: rotate(3deg) translate( -1px,   -3px); 	}
	}
@-ms-keyframes right-bicep-steps {
	0%   { -ms-transform: rotate(35deg); 	}
	50%  { -ms-transform: rotate(-30deg); 	}
	100% { -ms-transform: rotate(35deg); 	} 
	}
@-ms-keyframes left-bicep-steps {
	0%   { -ms-transform: rotate(-30deg); 	}
	50%  { -ms-transform: rotate(35deg); 	}
	100% { -ms-transform: rotate(-30deg); 	} 
	}
@-ms-keyframes right-forearm-steps {
	0%   { -ms-transform: rotate(-10deg); 	}
	50%  { -ms-transform: rotate(-10deg); 	}
	100% { -ms-transform: rotate(-10deg); 	} 
	}
@-ms-keyframes left-forearm-steps {
	0%   { -ms-transform: rotate(-10deg); 	}
	50%  { -ms-transform: rotate(-10deg); 	}
	100% { -ms-transform: rotate(-10deg); 	} 
	}
@-ms-keyframes right-thigh-steps {
	0%   { -ms-transform: rotate(-75deg); 	}
	50%  { -ms-transform: rotate(25deg); 	}
	100% { -ms-transform: rotate(-75deg); 	}
	}
@-ms-keyframes left-thigh-steps {
	0%   { -ms-transform: rotate(25deg); 	}
	50%  { -ms-transform: rotate(-75deg); 	}
	100% { -ms-transform: rotate(25deg); 	}
	} 
@-ms-keyframes right-shin-steps {
	0%   { -ms-transform: rotate(70deg); 	}
	 25%  { -ms-transform: rotate(50deg); 	}
	50%  { -ms-transform: rotate(0deg); 	}
	75%  { -ms-transform: rotate(30deg); 	} 
	100% { -ms-transform: rotate(70deg); 	}
	}
 @-ms-keyframes left-shin-steps {
	0%   { -ms-transform: rotate(0deg); 	}
	25%  { -ms-transform: rotate(30deg); 	}
	50%  { -ms-transform: rotate(70deg); 	}
	75%  { -ms-transform: rotate(50deg); 	}
	100% { -ms-transform: rotate(0deg); 	} 
	}
	
@-ms-keyframes other01 {
	0% { -ms-transform: scale(1,1); 	}
	20% { -ms-transform:   scale(1,0.97); 	}
	50% { -ms-transform: scale(1,1); 	}
}
@-ms-keyframes other02 {
	50% { -ms-transform: scale(1,1); 	}
	70% { -ms-transform:   scale(1,0.95); 	}
	90% { -ms-transform: scale(1,1); 	}
}
@-ms-keyframes userArm {
	0% { -ms-transform:   scale(1,1); 	}
	10% { -ms-transform: scale(1,0.7); 	}
	30% { -ms-transform:   scale(1,1); 	}
	40% { -ms-transform: scale(1,0.7); 	}
	60% { -ms-transform:   scale(1,1); 	}
	}
@-ms-keyframes userClage {
	0% { -ms-transform:  translate( 0px,   0);  	}
	10% { -ms-transform:  translate( 0,   3px); 	}
	30% { -ms-transform:  translate( 0px,   0); 	}
	40% { -ms-transform:  translate( 0,   3px); 	}
	60% { -ms-transform:   translate( 0,   0); 	}
	}
	
@-ms-keyframes clage {
	0% { -ms-transform:   scale(0.35) translate( 0px,   0px); 	}
	100% { -ms-transform: scale(1) translate( 19px,   -30px); 	}
	}
@-ms-keyframes mask {
	0% { -ms-transform:   scale(13); 	}
	100% { -ms-transform:   scale(1); 	}
	}
@-ms-keyframes fadeIn {
	0% { opacity: 0; 	}
	100% { opacity: 1;	}
	}
@-ms-keyframes rotate {
	0% { -ms-transform: rotate(0deg); }
	20% { -ms-transform: rotate(80deg); 	}
	40% { -ms-transform: rotate(0deg); }
	}