/*===================================
　アニメーションkeyframes
===================================*/
/*  ヘッダー
===================================*/
@-webkit-keyframes headerSlide {
  0% {
    -webkit-transform : translate(0px, -70px);
    transform : translate(0px, -70px);
    opacity: 0;
  }
  100% {
    opacity: 1;
    -webkit-transform : translate(0, 0);
    transform : translate(0, 0);
  }
}
@keyframes headerSlide {
  0% {
    -webkit-transform : translate(0px, -70px);
    transform : translate(0px, -70px);
    opacity: 0;
  }
  100% {
    opacity: 1;
    -webkit-transform : translate(0, 0);
    transform : translate(0, 0);
  }
}
/*  サイドバー
===================================*/
@-webkit-keyframes sideSlide {
  0% {
    /*transform : translate(50px, 0);*/
    opacity: 0;
  }
  100% {
    opacity: 1;
/*    -webkit-transform : translate(0, 0);
    transform : translate(0, 0);*/
  }
}
@keyframes sideSlide {
  0% {
    /*transform : translate(50px, 0);*/
    opacity: 0;
  }
  100% {
    opacity: 1;
/*    -webkit-transform : translate(0, 0);
    transform : translate(0, 0);*/
  }
}
/*  背景
===================================*/
@-webkit-keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/*  文字
===================================*/
@-webkit-keyframes slidein {
  0% {
    opacity: 0;
/*    -webkit-transform : translate(150px, 0);
    transform : translate(150px, 0);*/
    -webkit-transform : translate(0px, 100px);
    transform : translate(0px, 100px);
  }
  100% {
    opacity: 1;
    -webkit-transform : translate(0px, 0px);
    transform : translate(0px, 0px);
  }
}
@keyframes slidein {
  0% {
    opacity: 0;
/*    -webkit-transform : translate(150px, 0);
    transform : translate(150px, 0);*/
    transform : translate(0px, 100px);
  }
  100% {
    opacity: 1;
    transform : translate(0px, 0px);
  }
}
@-webkit-keyframes slideinsub {
  0% {
    opacity: 0;
/*    -webkit-transform : translate(150px, 0);
    transform : translate(150px, 0);*/
    /*transform : translate(0px, 50px);*/
  }
  100% {
    opacity: 1;
  }
}
@keyframes slideinsub {
  0% {
    opacity: 0;
/*    -webkit-transform : translate(150px, 0);
    transform : translate(150px, 0);*/
    /*transform : translate(0px, 50px);*/
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes slideout {
  0% {
    opacity: 1;
/*    -webkit-transform : translate(0, 0);
    transform : translate(0, 0);*/
  }
  100% {
    opacity: 0;
    /*transform : translate(0, 0);*/
/*    -webkit-transform : translate(-150px, 0);
    transform : translate(-150px, 0);*/
  }
}
@keyframes slideout {
  0% {
    opacity: 1;
/*    -webkit-transform : translate(0, 0);
    transform : translate(0, 0);*/
  }
  100% {
    opacity: 0;
    /*transform : translate(0, 0);*/
/*    -webkit-transform : translate(-150px, 0);
    transform : translate(-150px, 0);*/
  }
}
 /*  ズーム
 ===================================*/
 @-webkit-keyframes bgzoom {
   0% {
  -webkit-transform: scale(1.5,1.5);
  transform: scale(1.5,1.5);
   }
   100% {
  -webkit-transform: scale(1.0,1.0);
  transform: scale(1.0,1.0);
   }
 }
 @keyframes bgzoom {
   0% {
  -webkit-transform: scale(1.5,1.5);
  transform: scale(1.5,1.5);
   }
   100% {
  -webkit-transform: scale(1.0,1.0);
  transform: scale(1.0,1.0);
   }
 }
 @-webkit-keyframes bgzoompc {
   0% {
  -webkit-transform: scale(1.1,1.1);
  transform: scale(1.1,1.1);
   }
   100% {
  -webkit-transform: scale(1.0,1.0);
  transform: scale(1.0,1.0);
   }
 }
 @keyframes bgzoompc {
   0% {
  -webkit-transform: scale(1.1,1.1);
  transform: scale(1.1,1.1);
   }
   100% {
  -webkit-transform: scale(1.0,1.0);
  transform: scale(1.0,1.0);
   }
 }
 /*  fadeup
 ===================================*/
 @-webkit-keyframes fadeup {
  0% {
    /*transform : translate(0px, 30px);*/
    opacity: 0;
  }
  100% {
    opacity: 1;
    /*-webkit-transform : translate(0, 0);*/
    /*transform : translate(0, 0);*/
  }
 }
 @keyframes fadeup {
  0% {
    /*transform : translate(0px, 30px);*/
    opacity: 0;
  }
  100% {
    opacity: 1;
    /*-webkit-transform : translate(0, 0);*/
    /*transform : translate(0, 0);*/
  }
 }
 @-webkit-keyframes fadeup2 {
  0% {
    transform : translate(0px, 30px);
    opacity: 0;
  }
  100% {
    opacity: 1;
    -webkit-transform : translate(0, 0);
    transform : translate(0, 0);
  }
 }
 @keyframes fadeup2 {
  0% {
    transform : translate(0px, 30px);
    opacity: 0;
  }
  100% {
    opacity: 1;
    -webkit-transform : translate(0, 0);
    transform : translate(0, 0);
  }
 }
/*  ローディング画面
===================================*/
@-webkit-keyframes onload_logo {
  0% {
    width: 0;
    opacity: 1;
    -webkit-transform-origin: left;
    transform-origin: left;
  }
  100% {
    width: 435px;
    -webkit-transform-origin: left;
    transform-origin: left;
    opacity: 1;
  }
}
@keyframes onload_logo {
  0% {
    width: 0;
    opacity: 1;
    -webkit-transform-origin: left;
    transform-origin: left;
  }
  100% {
    width: 435px;
    -webkit-transform-origin: left;
    transform-origin: left;
    opacity: 1;
  }
}
@-webkit-keyframes zoomout {
  0% {
   -webkit-transform: scale(1.0,1.0);
   transform: scale(1.0,1.0);
   /*opacity: 1;*/
  }
  100% {
   -webkit-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);
   /*opacity: 0;*/
  }
}
@keyframes zoomout {
  0% {
   -webkit-transform: scale(1.0,1.0);
   transform: scale(1.0,1.0);
   /*opacity: 1;*/
  }
  100% {
   -webkit-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);
   /*opacity: 0;*/
  }
}
@-webkit-keyframes fadezoomout {
  0% {
   -webkit-transform: scale(1.0,1.0);
   transform: scale(1.0,1.0);
   opacity: 1;
  }
  100% {
   -webkit-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);
   opacity: 0;
  }
}
@keyframes fadezoomout {
  0% {
   -webkit-transform: scale(1.0,1.0);
   transform: scale(1.0,1.0);
   opacity: 1;
  }
  100% {
   -webkit-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);
   opacity: 0;
  }
}
@-webkit-keyframes zoomout2 {
  0% {
   -webkit-transform: scale(1.0,1.0);
   transform: scale(1.0,1.0);
   opacity: 1;
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -o-filter: blur(0px);
  -ms-filter: blur(0px);
  filter: blur(0px);
  }
  100% {
   -webkit-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);
   opacity: 0;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  }
}
@keyframes zoomout2 {
  0% {
   -webkit-transform: scale(1.0,1.0);
   transform: scale(1.0,1.0);
   opacity: 1;
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -o-filter: blur(0px);
  -ms-filter: blur(0px);
  filter: blur(0px);
  }
  100% {
   -webkit-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);
   opacity: 0;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  }
}

@-webkit-keyframes fadeoutTop {
  0% {
    opacity: 1;
  }
/*  50% {
    opacity: 0.5;
  }*/
  80% {
    opacity: 0.5;
  }
  99.9% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    display: none;
  }
}
@keyframes fadeoutTop {
  0% {
    opacity: 1;
  }
/*  50% {
    opacity: 0.5;
  }*/
  80% {
    opacity: 0.5;
  }
  99.9% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    display: none;
  }
}