@charset "utf-8";

.image { position: relative; }

#asobu .image { width: 540px; height: 400px; }
#asobu #asobu01 { position: absolute; top: 0; left: 300px; }
#asobu #asobu02 { position: absolute; top: 0; left: 300px; }
#asobu #asobu03 { position: absolute; top: 180px; left: 0; }

#manabu .image { width: 540px; height: 400px; }
#manabu #manabu01 { position: absolute; top: 0; left: 180px; }
#manabu #manabu02 { position: absolute; top: 30px; left: 193px; }
#manabu #manabu03 { position: absolute; top: 30px; left: 193px; }

#shiraberu .image { width: 540px; height: 400px; }
#shiraberu #shiraberu01 { position: absolute; top: 0; left: 180px; }
#shiraberu #shiraberu02 { position: absolute; top: 30px; left: 193px; }
#shiraberu #shiraberu03 { position: absolute; top: 30px; left: 193px; }

#sagasu .image { width: 440px; height: 400px; }
#sagasu #sagasu01 { position: absolute; top: 0; left: 200px; }
#sagasu #sagasu02 { position: absolute; top: 0; left: 200px; }

.fadein {
	-webkit-animation-fill-mode:both;
	-ms-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-animation-duration:1s;
	-ms-animation-duration:1s;
	animation-duration:1s;
	-webkit-animation-name: fadein;
	animation-name: fadein;
	visibility: visible !important;
}
@-webkit-keyframes fadein {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes fadein {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.single01 {
	-webkit-animation-fill-mode:both;
	-ms-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-animation-duration:1s;
	-ms-animation-duration:1s;
	animation-duration:1s;
	-webkit-animation-name: single01;
	animation-name: single01;
	visibility: visible !important;
}
@-webkit-keyframes single01 {
	0% {
		opacity: 0;
		left: 300px;
		top: 0;
	}
	100% {
		opacity: 1;
		left: 140px;
		top: 10px;
		-webkit-transform: rotate(-10deg);
	}
}
@keyframes single01 {
	0% {
		opacity: 0;
		left: 300px;
		top: 0; 
		-webkit-transform: rotate(0);
		-ms-transform: rotate(0);
		transform: rotate(0);
	}
	100% {
		opacity: 1;
		left: 140px;
		top: 10px; 
		-webkit-transform: rotate(-10deg);
		-ms-transform: rotate(-10deg);
		transform: rotate(-10deg);
	}
}

.single02 {
	-webkit-animation-fill-mode:both;
	-ms-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-animation-duration:1s;
	-ms-animation-duration:1s;
	animation-duration:1s;
	-webkit-animation-name: single02;
	animation-name: single02;
	visibility: visible !important;
}
@-webkit-keyframes single02 {
	0% {
		opacity: 0;
		left: 200px;
		top: 0;
	}
	100% {
		opacity: 1;
		left: 30px;
		top: 10px;
		-webkit-transform: rotate(-10deg);
	}
}
@keyframes single02 {
	0% {
		opacity: 0;
		left: 200px; 
		top: 0;
		-webkit-transform: rotate(0);
		-ms-transform: rotate(0);
		transform: rotate(0);
	}
	100% {
		opacity: 1;
		left: 30px;
		top: 10px;
		-webkit-transform: rotate(-10deg);
		-ms-transform: rotate(-10deg);
		transform: rotate(-10deg);
	}
}

.double01 {
	-webkit-animation-fill-mode:both;
	-ms-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-animation-duration:1s;
	-ms-animation-duration:1s;
	animation-duration:1s;
	-webkit-animation-name: double01;
	animation-name: double01;
	visibility: visible !important;
}
@-webkit-keyframes double01 {
	0% {
		opacity: 0;
		left: 193px;
	}
	100% {
		opacity: 1;
		left: 43px;
		-webkit-transform: rotate(-10deg);
	}
}
@keyframes double01 {
	0% {
		opacity: 0;
		left: 193px; 
		-webkit-transform: rotate(0);
		-ms-transform: rotate(0);
		transform: rotate(0);
	}
	100% {
		opacity: 1;
		left: 43px; 
		-webkit-transform: rotate(-10deg);
		-ms-transform: rotate(-10deg);
		transform: rotate(-10deg);
	}
}

.double02 {
	-webkit-animation-fill-mode:both;
	-ms-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-animation-duration:1s;
	-ms-animation-duration:1s;
	animation-duration:1s;
	-webkit-animation-name: double02;
	animation-name: double02;
	visibility: visible !important;
}
@-webkit-keyframes double02 {
	0% {
		opacity: 0;
		left: 193px;
	}
	100% {
		opacity: 1;
		left: 343px;
		-webkit-transform: rotate(10deg);
	}
}
@keyframes double02 {
	0% {
		opacity: 0;
		left: 193px; 
		-webkit-transform: rotate(0);
		-ms-transform: rotate(0);
		transform: rotate(0);
	}
	100% {
		opacity: 1;
		left: 343px; 
		-webkit-transform: rotate(10deg);
		-ms-transform: rotate(10deg);
		transform: rotate(10deg);
	}
}

.boy {
	-webkit-animation-fill-mode:both;
	-ms-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-animation-duration:1s;
	-ms-animation-duration:1s;
	animation-duration:1s;
	-webkit-animation-name: boy;
	animation-name: boy;
	visibility: visible !important;
}
@-webkit-keyframes boy {
	0% {
		opacity: 0;
		top: 150px;
	}
	100% {
		opacity: 1;
		top: 180px;
	}
}
@keyframes boy {
	0% {
		opacity: 0;
		top: 150px; 
	}
	100% {
		opacity: 1;
		top: 180px; 
	}
}