@charset "utf-8";
@-webkit-keyframes fade-in {
  0% { display: none; opacity: 0;}
  1% { display: block; opacity: 0;}
  100% { display: block; opacity: 1;}
}
@keyframes fade-in {
  0% { display: none; opacity: 0;}
  1% { display: block; opacity: 0;}
  100% { display: block; opacity: 1;}
}

/*===========================*/
@-webkit-keyframes fade-out {
  0% { display: block; opacity: 1;}
  1% { display: block; opacity: 1;}
  100% { display: none; opacity: 0;}
}
@keyframes fade-out {
  0% { display: block; opacity: 1;}
  1% { display: block; opacity: 1;}
  100% { display: none; opacity: 0;}
}
/*===========================*/
@-webkit-keyframes zoom-in {
  0% { display: none; opacity: 0; -webkit-transform: scale(0); transform: scale(0);}
  1% { display: block; opacity: 0; -webkit-transform: scale(0); transform: scale(0);}
  100% { display: block; opacity: 1; -webkit-transform: scale(1); transform: scale(1);}
}
@keyframes zoom-in {
  0% { display: none; opacity: 0; -webkit-transform: scale(0); transform: scale(0);}
  1% { display: block; opacity: 0; -webkit-transform: scale(0); transform: scale(0);}
  100% { display: block; opacity: 1; -webkit-transform: scale(1); transform: scale(1);}
}

/*===========================*/
@-webkit-keyframes navHover {
  0% { -webkit-transform: scale(1); transform: scale(1); }
  100% { -webkit-transform: scale(0.92); transform: scale(0.92); }
}
@keyframes navHover {
  0% { -webkit-transform: scale(1); transform: scale(1); }
  100% { -webkit-transform: scale(0.92); transform: scale(0.92); }
}
/*===========================*/
@-webkit-keyframes navArrowAnim {
  0% { -webkit-transform: rotate(-7deg) rotateX(0deg) translate(0,0); transform: rotate(-7deg) rotateX(0deg) translate(0,0); }
  100% { -webkit-transform: rotate(-7deg) rotateX(90deg) translate(7px,0); transform: rotate(-7deg) rotateX(90deg) translate(7px,0); }
}
@keyframes navArrowAnim {
  0% { -webkit-transform: rotate(-7deg) rotateX(0deg) translate(0,0); transform: rotate(-7deg) rotateX(0deg) translate(0,0); }
  100% { -webkit-transform: rotate(-7deg) rotateX(90deg) translate(7px,0); transform: rotate(-7deg) rotateX(90deg) translate(7px,0); }
}
/*===========================*/
@-webkit-keyframes subNavSlideAnim {
  0% { -webkit-transform: translate(-20px,2px); transform: translate(-20px,2px); opacity: 0; }
  100% { -webkit-transform: translate(0,0); transform: translate(0,0); opacity: 1; }
}
@keyframes subNavSlideAnim {
  0% { -webkit-transform: translate(-20px,2px); transform: translate(-20px,2px); opacity: 0; }
  100% { -webkit-transform: translate(0,0); transform: translate(0,0); opacity: 1; }
}
/*===========================*/
@-webkit-keyframes flowerRotate {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes flowerRotate {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
/*===========================*/
@-webkit-keyframes flowerMove {
  0% { -webkit-transform: translate(0,-10vh); transform: translate(0,-10vh); }
  100% { -webkit-transform: translate(0,100vh); transform: translate(0,100vh); }
}
@keyframes flowerMove {
  0% { -webkit-transform: translate(0,-10vh); transform: translate(0,-10vh); }
  100% { -webkit-transform: translate(0,100vh); transform: translate(0,100vh); }
}
/*===========================*/
@-webkit-keyframes h2_slideIn {
  0% { -webkit-transform: skewX(45deg) rotateX(75deg); transform: skewX(45deg) rotateX(75deg); opacity: 0; }
  100% { -webkit-transform: skewX(0deg) rotateX(0deg); transform: skewX(0deg) rotateX(0deg); opacity: 1; }
}
@keyframes h2_slideIn {
  0% { -webkit-transform: skewX(45deg) rotateX(75deg); transform: skewX(45deg) rotateX(75deg); opacity: 0; }
  100% { -webkit-transform: skewX(0deg) rotateX(0deg); transform: skewX(0deg) rotateX(0deg); opacity: 1; }
}
/*===========================*/
@-webkit-keyframes charaNamePopIn {
  0% { -webkit-transform: scale(1.3); transform: scale(1.3); opacity: 0; }
  100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
}
@keyframes charaNamePopIn {
  0% { -webkit-transform: scale(1.3); transform: scale(1.3); opacity: 0; }
  100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
}
/*===========================*/
@-webkit-keyframes charaPopIn {
  0% { -webkit-transform: scale(0.6,0.4); transform: scale(0.6,0.4); opacity: 0; }
  24% { -webkit-transform: scale(0.9,1.2); transform: scale(0.9,1.2); }
  48% { -webkit-transform: scale(1.05,0.9); transform: scale(1.05,0.9); }
  72% { -webkit-transform: scale(1,1.02); transform: scale(1,1.02); }
  100% { -webkit-transform: scale(1,1); transform: scale(1,1); opacity: 1; }
}
@keyframes charaPopIn {
  0% { -webkit-transform: scale(0.6,0.4); transform: scale(0.6,0.4); opacity: 0; }
  24% { -webkit-transform: scale(0.9,1.2); transform: scale(0.9,1.2); }
  48% { -webkit-transform: scale(1.05,0.9); transform: scale(1.05,0.9); }
  72% { -webkit-transform: scale(1,1.02); transform: scale(1,1.02); }
  100% { -webkit-transform: scale(1,1); transform: scale(1,1); opacity: 1; }
}
/*===========================*/
@-webkit-keyframes charaTxtPopIn {
  0% { -webkit-transform: scale(0.4); transform: scale(0.4); opacity: 0; }
  24% { -webkit-transform: scale(1.1); transform: scale(1.1); }
  48% { -webkit-transform: scale(0.93); transform: scale(0.93); }
  72% { -webkit-transform: scale(1.03); transform: scale(1.03); }
  100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
}
@keyframes charaTxtPopIn {
  0% { -webkit-transform: scale(0.4); transform: scale(0.4); opacity: 0; }
  24% { -webkit-transform: scale(1.1); transform: scale(1.1); }
  48% { -webkit-transform: scale(0.93); transform: scale(0.93); }
  72% { -webkit-transform: scale(1.03); transform: scale(1.03); }
  100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
}
/*===========================*/
@-webkit-keyframes charaSerifPopIn {
  0% { -webkit-transform: translate(200px,0) scale(0.7); transform: translate(200px,0) scale(0.7); opacity: 0; }
  100% { -webkit-transform: translate(0px,0) scale(1); transform: translate(0px,0) scale(1); opacity: 1; }
}
@keyframes charaSerifPopIn {
  0% { -webkit-transform: translate(200px,0) scale(0.7); transform: translate(200px,0) scale(0.7); opacity: 0; }
  100% { -webkit-transform: translate(0px,0) scale(1); transform: translate(0px,0) scale(1); opacity: 1; }
}
/*===========================*/
@-webkit-keyframes anim-rotate {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  10% { -webkit-transform: rotate(-9deg); transform: rotate(-9deg); }
  20% { -webkit-transform: rotate(10deg); transform: rotate(10deg); }
  35% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); }
  50% { -webkit-transform: rotate(5deg); transform: rotate(5deg); }
  65% { -webkit-transform: rotate(-1deg); transform: rotate(-1deg); }
  80% { -webkit-transform: rotate(1deg); transform: rotate(1deg); }
  95% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
}
@keyframes anim-rotate {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  10% { -webkit-transform: rotate(-9deg); transform: rotate(-9deg); }
  20% { -webkit-transform: rotate(10deg); transform: rotate(10deg); }
  35% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); }
  50% { -webkit-transform: rotate(5deg); transform: rotate(5deg); }
  65% { -webkit-transform: rotate(-1deg); transform: rotate(-1deg); }
  80% { -webkit-transform: rotate(1deg); transform: rotate(1deg); }
  95% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
}
/*===========================*/
@-webkit-keyframes pageTopAnim {
  0% { -webkit-transform: scale(1); transform: scale(1); }
  100% { -webkit-transform: scale(0.8); transform: scale(0.8); }
}
@keyframes pageTopAnim {
  0% { -webkit-transform: scale(1); transform: scale(1); }
  100% { -webkit-transform: scale(0.8); transform: scale(0.8); }
}
/*===========================*/
@-webkit-keyframes storyCharaAnim {
  0% { -webkit-transform: scale(1,1) translate(0,-50px); transform: scale(1,1) translate(0,-50px); opacity: 0; }
  32% { -webkit-transform: scale(1.05,0.9) translate(0,0px); transform: scale(1.05,0.9) translate(0,0px); opacity: 1; }
  65% { -webkit-transform: scale(1,1.05); transform: scale(1,1.05); opacity: 1; }
  100% { -webkit-transform: scale(1,1); transform: scale(1,1); opacity: 1; }
}
@keyframes storyCharaAnim {
  0% { -webkit-transform: scale(1,1) translate(0,-50px); transform: scale(1,1) translate(0,-50px); opacity: 0; }
  32% { -webkit-transform: scale(1.05,0.9) translate(0,0px); transform: scale(1.05,0.9) translate(0,0px); opacity: 1; }
  65% { -webkit-transform: scale(1,1.05); transform: scale(1,1.05); opacity: 1; }
  100% { -webkit-transform: scale(1,1); transform: scale(1,1); opacity: 1; }
}
/*===========================*/
@-webkit-keyframes charaSlideIn {
  0% { -webkit-transform: translate(20px,0); transform: translate(20px,0); opacity: 0; }
  100% { -webkit-transform: translate(0px,0); transform: translate(0px,0); opacity: 1; }
}
@keyframes charaSlideIn {
  0% { -webkit-transform: translate(20px,0); transform: translate(20px,0); opacity: 0; }
  100% { -webkit-transform: translate(0px,0); transform: translate(0px,0); opacity: 1; }
}
@-webkit-keyframes charaSlideOut {
  0% { -webkit-transform: translate(0px,0); transform: translate(0px,0); opacity: 1; }
  100% { -webkit-transform: translate(20px,0); transform: translate(20px,0); opacity: 0; }
}
@keyframes charaSlideOut {
  0% { -webkit-transform: translate(0px,0); transform: translate(0px,0); opacity: 1; }
  100% { -webkit-transform: translate(20px,0); transform: translate(20px,0); opacity: 0; }
}
/*===========================*/

@-webkit-keyframes blink {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes blink {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}
/*@keyframes blink {
  0% { opacity: 0; }
  49.9% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 1; }
}*/
/*===========================*/