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

.img_area{
  position:relative;
  /*width:640px;
  height:390px;*/
  width:320px;
  height:195px;
  display:-webkit-box;
  display: -moz-box;
  overflow:hidden;
  text-align:center;
  margin:0 auto;
}

.whitemask1{
  /*width:640px;
  height:390px;*/
  width:320px;
  height:195px;

  -webkit-transform-origin:top left;
  -webkit-transform:scaleX(1) scaleY(1);
  -webkit-animation-name:chara_anim;
  -webkit-animation-duration:0.5s;
  -webkit-animation-delay:0.5s;
  -webkit-animation-timing-function:linear;
  -webkit-animation-fill-mode:both;

  -moz-transform-origin:top left;
  -moz-transform:scaleX(1) scaleY(1);
  -moz-animation-name:chara_anim;
  -moz-animation-duration:0.5s;
  -moz-animation-delay:0.5s;
  -moz-animation-timing-function:linear;
  -moz-animation-fill-mode:both;

  transform-origin:top left;
  transform:scaleX(1) scaleY(1);
  animation-name:chara_anim;
  animation-duration:0.5s;
  animation-delay:0.5s;
  animation-timing-function:linear;
  animation-fill-mode:both;
  
  visibility:hidden;
/*  -webkit-opacity:0;*/
/*  -moz-opacity:0;*/
/*  opacity:0;*/
}
@-webkit-keyframes chara_anim{
  0%{
  -webkit-transform:scaleX(1) scaleY(1);
  visibility:visible;
  }
  100%{
  -webkit-transform:scaleX(1) scaleY(0);
  -webkit-animation-direction:alternate;
  -webkit-opacity:0;
  opacity:0;
  }
}
@-moz-keyframes chara_anim{
  0%{
  -moz-transform:scaleX(1) scaleY(1);
  transform:scaleX(1) scaleY(1);
  visibility:visible;
  }
  100%{
  -moz-transform:scaleX(1) scaleY(0);
  -moz-animation-direction:alternate;
  transform:scaleX(1) scaleY(0);
  animation-direction:alternate;
  -moz-opacity:0;
  opacity:0;
  }
}
.whitemask2{
  width:640px;
  height:390px;
 /*width:320px;
  height:195px;*/

  -webkit-transform-origin:bottom left;
  -webkit-transform:scaleX(1) scaleY(1);
  -webkit-animation-name:chara_anim2;
  -webkit-animation-duration:0.5s;
  -webkit-animation-delay:0.5s;
  -webkit-animation-timing-function:linear;
  -webkit-animation-fill-mode:both;

  -moz-transform-origin:bottom left;
  -moz-transform:scaleX(1) scaleY(1);
  -moz-animation-name:chara_anim2;
  -moz-animation-duration:0.5s;
  -moz-animation-delay:0.5s;
  -moz-animation-timing-function:linear;
  -moz-animation-fill-mode:both;

  transform-origin:bottom left;
  transform:scaleX(1) scaleY(1);
  animation-name:chara_anim2;
  animation-duration:0.5s;
  animation-delay:0.5s;
  animation-timing-function:linear;
  animation-fill-mode:both;

  visibility:hidden;
/*  -webkit-opacity:0;*/
/*  -moz-opacity:0;*/
/*  opacity:0;*/
}
@-webkit-keyframes chara_anim2{
  0%{
  -webkit-transform:scaleX(1) scaleY(1);
  visibility:visible;
  }
  100%{
  -webkit-transform:scaleX(1) scaleY(0);
  -webkit-opacity:0;
  opacity:0;
  }
}
@-moz-keyframes chara_anim2{
  0%{
  -moz-transform:scaleX(1) scaleY(1);
  transform:scaleX(1) scaleY(1);
  visibility:visible;
  }
  100%{
  -moz-transform:scaleX(1) scaleY(0);
  transform:scaleX(1) scaleY(0);
  -moz-animation-direction:alternate;
  animation-direction:alternate;
  -moz-opacity:0;
  opacity:0;
  }
}

.yoko2{
  -webkit-animation-name:slide_in;
  -webkit-animation-duration:1.25s;
  -webkit-animation-delay:0s;
  -webkit-animation-iteration-count:1;
  -webkit-animation-timing-function:ease-in-out;
  /*-webkit-animation-fill-mode:both;*/
  visibility:visible;

  -moz-animation-name:slide_in;
  -moz-animation-duration:1.25s;
  -moz-animation-delay:0s;
  -moz-animation-iteration-count:1;
  -moz-animation-timing-function:ease-in-out;
  -moz-animation-fill-mode:both;

  animation-name:slide_in;
  animation-duration:1.25s;
  animation-delay:0s;
  animation-iteration-count:1;
  animation-timing-function:ease-in-out;
  animation-fill-mode:both;
}
@-webkit-keyframes slide_in{
  0%{
  -webkit-opacity:0;
  opacity:0;
  top: 0px;
  left: 581px;
  visibility:visible;
  }
  50%{
  -webkit-opacity:0;
  opacity:0;
  top: 0px;
  left: 581px;
  visibility:visible;
  }
  100%{
  -webkit-opacity:1;
  opacity:1;
  top: 0px;
  left: 0px;
  visibility:hidden;
  }
}
@-moz-keyframes slide_in{
  0%{
  -moz-opacity:0;
  opacity:0;
  top: 0px;
  left: 581px;
  }
  50%{
  -moz-opacity:0;
  opacity:0;
  top: 0px;
  left: 581px;
  }
  100%{
  -moz-opacity:1;
  opacity:1;
  top: 0px;
  left: 0px;
  }
}
.white_ver{
  visibility:hidden;
  -webkit-opacity:0;
  -moz-opacity:0;
  opacity:0;
}
.fadeout{
  -webkit-animation-name:fade_out;
  -webkit-animation-duration:0.5s;
  -webkit-animation-delay:0s;
  -webkit-animation-iteration-count:1;
  -webkit-animation-timing-function:linear;
  -webkit-animation-fill-mode:both;

  -moz-animation-name:fade_out;
  -moz-animation-duration:0.5s;
  -moz-animation-delay:0s;
  -moz-animation-iteration-count:1;
  -moz-animation-timing-function:linear;
  -moz-animation-fill-mode:both;

  animation-name:fade_out;
  animation-duration:0.5s;
  animation-delay:0s;
  animation-iteration-count:1;
  animation-timing-function:linear;
  animation-fill-mode:both;
 
  visibility:hidden;
}
@-webkit-keyframes fade_out{
  0%{
  -webkit-opacity:1;
  opacity:1;
  visibility:visible;
  }
  80%{
  -webkit-opacity:1;
  opacity:0.5;
  }
  100%{
  -webkit-opacity:0;
  opacity:0;
  visibility:hidden;
  }
}
@-moz-keyframes fade_out{
  0%{
  -moz-opacity:1;
  opacity:1;
  visibility:visible;
  }
  80%{
  -moz-opacity:1;
  opacity:0.5;
  }
  100%{
  -moz-opacity:0;
  opacity:0;
  visibility:hidden;
  }
}