@charset "UTF-8";
.text-animation, .text-load-animation {
  opacity: 0; }
  .text-animation span, .text-load-animation span {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s forwards; }

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0); } }
/*========= 流れるテキスト ===============*/
/*全共通*/
.slide-in {
  overflow: hidden;
  display: inline-block; }

.slide-in_inner {
  display: inline-block; }

/*左右のアニメーション*/
.leftAnimeMv {
  opacity: 0;
  /*事前に透過0にして消しておく*/ }

.slideAnimeLeftRight {
  animation-name: slideTextX100;
  animation-duration: 0.4s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes slideTextX100 {
  from {
    transform: translateX(-100%);
    /*要素を左の枠外に移動*/
    opacity: 0; }
  to {
    transform: translateX(0);
    /*要素を元の位置に移動*/
    opacity: 1; } }
.slideAnimeRightLeft {
  animation-name: slideTextX-100;
  animation-duration: 0.4s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes slideTextX-100 {
  from {
    transform: translateX(100%);
    /*要素を右の枠外に移動*/
    opacity: 0; }
  to {
    transform: translateX(0);
    /*要素を元の位置に移動*/
    opacity: 1; } }