@charset "utf-8";
/* CSS Document */
/* 召喚獣表示用CSS */

.mons {
	position: absolute;
	top:-81px;
	right:10px;
}

@-webkit-keyframes 'fadeIn' {
0%{
	right:-250px;
	opacity: 1;
	background:url(../img/mons001b.png);
	float:right;
}
20%	{opacity: 0.5;}
100%{opacity: 1;}
}

.anim01 {
	-webkit-animation-name: 'fadeIn';
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-iteration-count: 1;

	position:absolute;
	top: 83px;
	right: -127px;
	width:429px;
	height:405px;
	background:url(../img/mons001.png);
	z-index:0;
}

@-webkit-keyframes 'fadeIn02' {
0%{
	right:-250px;
	opacity: 1;
	background:url(../img/mons002b.png);
	float:right;
}
20%	{opacity: 0.7;}
100%{opacity: 5;}
}

.anim02 {
	-webkit-animation-name: 'fadeIn02';
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-iteration-count: 1;
	
	position:absolute;
	top: 323px;
	right: -158px;
	width:292px;
	height:459px;
	background:url(../img/mons002.png);
	z-index:5;
}

@-webkit-keyframes 'fadeIn03' {
0%{
	right:-200px;
	opacity: 1;
	background:url(../img/mons003b.png);
}
20%	{opacity: 0.9;}
100%{opacity: 1;}
}

.anim03 {
	-webkit-animation-name: 'fadeIn03';
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-iteration-count: 1;

	position:absolute;
	top: 575px;
	right: 27px;
	width: 272px;
	height: 364px;
	background: url(../img/mons003.png);
	float: right;
	z-index: 10;
}

@-webkit-keyframes 'fadeIn4' {
0%{
	right:-200px;
	opacity: 1;
	background:url(../img/mons04b.png);
	float:right;
}
20%	{opacity: 0.5;}
100%{opacity: 1;}
}

.anim04 {
	-webkit-animation-name: 'fadeIn4';
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-iteration-count: 1;

	position:absolute;
top: -12px;
right: -21px;
	width:380px;
	height:380px;
	background:url(../img/mons04.png);
	z-index:-9;
}

@-webkit-keyframes 'fadeIn05' {
0%{
	right:-300px;
	opacity: 1;
	background:url(../img/mons10b.png);
	float:right;
}
20%	{opacity: 0.7;}
100%{opacity: 1;}
}

.anim05 {
	-webkit-animation-name: 'fadeIn05';
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-iteration-count: 1;
	
	position:absolute;
top: 270px;
right: -177px;
	width:426px;
	height:454px;
	background:url(../img/mons10.png);
	z-index:10;
}

@-webkit-keyframes 'fadeIn06' {
0%{
	right:-300px;
	opacity: 1;
	background:url(../img/mons11b.png);
}
20%	{opacity: 0.9;}
100%{opacity: 1;}
}

.anim06 {
	-webkit-animation-name: 'fadeIn06';
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-iteration-count: 1;

	position:absolute;
top: 472px;
right: 46px;
	width: 380px;
	height: 380px;
	background: url(../img/mons11.png);
	float: right;
	z-index: 10;
}

@-webkit-keyframes 'fadeIn7' {
0%{
	right:-200px;
	opacity: 1;
	background:url(../img/mons05b.png);
	float:right;
}
20%	{opacity: 0.5;}
100%{opacity: 1;}
}

.anim07 {
	-webkit-animation-name: 'fadeIn7';
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-iteration-count: 1;

	position:absolute;
top: -53px;
right: -1px;
	width:380px;
	height:380px;
	background:url(../img/mons05.png);
	z-index:-9;
}

@-webkit-keyframes 'fadeIn08' {
0%{
	right:-300px;
	opacity: 1;
	background:url(../img/mons09b.png);
	float:right;
}
20%	{opacity: 0.7;}
100%{opacity: 1;}
}

.anim08 {
	-webkit-animation-name: 'fadeIn08';
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-iteration-count: 1;
	
	position:absolute;
top: 129px;
right: -142px;
	width:493px;
	height:547px;
	background:url(../img/mons09.png);
	z-index:10;
}

@-webkit-keyframes 'fadeIn09' {
0%{
	right:-300px;
	opacity: 1;
	background:url(../img/mons08b.png);
}
20%	{opacity: 0.9;}
100%{opacity: 1;}
}

.anim09 {
	-webkit-animation-name: 'fadeIn09';
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-iteration-count: 1;

	position:absolute;
top: 491px;
right: 58px;
	width: 380px;
	height: 380px;
	background: url(../img/mons08.png);
	float: right;
	z-index: 11;
}



/* firefox用 */
@-moz-keyframes 'fadeIn' {
0%{
	right:-250px;
	opacity: 1;
	background:url(../img/mons001b.png);
	float:right;
}
20%	{opacity: 0.5;}
100%{opacity: 1;}
}

.anim01 {
	-moz-animation-name: 'fadeIn';
	-moz-animation-duration: 1s;
	-moz-animation-timing-function: ease-out;
	-moz-animation-iteration-count: 1;

	position:absolute;
	top: 83px;
	right: -127px;
	width:429px;
	height:405px;
	background:url(../img/mons001.png);
	z-index:0;
}

@-moz-keyframes 'fadeIn02' {
0%{
	right:-250px;
	opacity: 1;
	background:url(../img/mons002b.png);
	float:right;
}
20%	{opacity: 0.7;}
100%{opacity: 5;}
}

.anim02 {
	-moz-animation-name: 'fadeIn02';
	-moz-animation-duration: 1s;
	-moz-animation-timing-function: ease-out;
	-moz-animation-iteration-count: 1;
	
	position:absolute;
	top: 323px;
	right: -158px;
	width:292px;
	height:459px;
	background:url(../img/mons002.png);
	z-index:5;
}

@-moz-keyframes 'fadeIn03' {
0%{
	right:-200px;
	opacity: 1;
	background:url(../img/mons003b.png);
}
20%	{opacity: 0.9;}
100%{opacity: 1;}
}

.anim03 {
	-moz-animation-name: 'fadeIn03';
	-moz-animation-duration: 1s;
	-moz-animation-timing-function: ease-out;
	-moz-animation-iteration-count: 1;

	position:absolute;
	top: 575px;
	right: 27px;
	width: 272px;
	height: 364px;
	background: url(../img/mons003.png);
	float: right;
	z-index: 10;
}

@-moz-keyframes 'fadeIn4' {
0%{
	right:-200px;
	opacity: 1;
	background:url(../img/mons04b.png);
	float:right;
}
20%	{opacity: 0.5;}
100%{opacity: 1;}
}

.anim04 {
	-moz-animation-name: 'fadeIn4';
	-moz-animation-duration: 1s;
	-moz-animation-timing-function: ease-out;
	-moz-animation-iteration-count: 1;

	position:absolute;
top: -12px;
right: -21px;
	width:380px;
	height:380px;
	background:url(../img/mons04.png);
	z-index:-9;
}

@-moz-keyframes 'fadeIn05' {
0%{
	right:-300px;
	opacity: 1;
	background:url(../img/mons10b.png);
	float:right;
}
20%	{opacity: 0.7;}
100%{opacity: 1;}
}

.anim05 {
	-moz-animation-name: 'fadeIn05';
	-moz-animation-duration: 1s;
	-moz-animation-timing-function: ease-out;
	-moz-animation-iteration-count: 1;
	
	position:absolute;
top: 270px;
right: -177px;
	width:426px;
	height:454px;
	background:url(../img/mons10.png);
	z-index:10;
}

@-moz-keyframes 'fadeIn06' {
0%{
	right:-300px;
	opacity: 1;
	background:url(../img/mons11b.png);
}
20%	{opacity: 0.9;}
100%{opacity: 1;}
}

.anim06 {
	-moz-animation-name: 'fadeIn06';
	-moz-animation-duration: 1s;
	-moz-animation-timing-function: ease-out;
	-moz-animation-iteration-count: 1;

	position:absolute;
top: 472px;
right: 46px;
	width: 380px;
	height: 380px;
	background: url(../img/mons11.png);
	float: right;
	z-index: 10;
}

@-moz-keyframes 'fadeIn7' {
0%{
	right:-200px;
	opacity: 1;
	background:url(../img/mons05b.png);
	float:right;
}
20%	{opacity: 0.5;}
100%{opacity: 1;}
}

.anim07 {
	-moz-animation-name: 'fadeIn7';
	-moz-animation-duration: 1s;
	-moz-animation-timing-function: ease-out;
	-moz-animation-iteration-count: 1;

	position:absolute;
top: -53px;
right: -1px;
	width:380px;
	height:380px;
	background:url(../img/mons05.png);
	z-index:-9;
}

@-moz-keyframes 'fadeIn08' {
0%{
	right:-300px;
	opacity: 1;
	background:url(../img/mons09b.png);
	float:right;
}
20%	{opacity: 0.7;}
100%{opacity: 1;}
}

.anim08 {
	-moz-animation-name: 'fadeIn08';
	-moz-animation-duration: 1s;
	-moz-animation-timing-function: ease-out;
	-moz-animation-iteration-count: 1;
	
	position:absolute;
top: 129px;
right: -142px;
	width:493px;
	height:547px;
	background:url(../img/mons09.png);
	z-index:10;
}

@-moz-keyframes 'fadeIn09' {
0%{
	right:-300px;
	opacity: 1;
	background:url(../img/mons08b.png);
}
20%	{opacity: 0.9;}
100%{opacity: 1;}
}

.anim09 {
	-moz-animation-name: 'fadeIn09';
	-moz-animation-duration: 1s;
	-moz-animation-timing-function: ease-out;
	-moz-animation-iteration-count: 1;

	position:absolute;
top: 491px;
right: 58px;
	width: 380px;
	height: 380px;
	background: url(../img/mons08.png);
	float: right;
	z-index: 11;
}