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


/* top背景 */
@keyframes moveBg {
  0% {
      background-position: 10000px;
  }
  100% {
      background-position: 65000px;
  }
}


/*フェードインアニメ*/
@keyframes fadeIn{
0% {
transform: translateY(.5em);
  opacity: 0;
}

100% {
transform: translateY(0%);
  opacity: 1;
}
}


/*「boxInner」をスライドインする*/
@keyframes play {
  from {
    transform: translateX(-100%);
  }
  
  to {
    transform: translateX(0);
  }
}

/*マスク要素をスライドアウトする*/
@keyframes maskOut {
  0% {
    transform: translateX(0);
    opacity: 1;
  }

  99% {
    transform: translateX(99%);
    opacity: 1; /* 直前まで表示 */
  }
  
  100% {
    transform: translateX(100%);
    opacity: 0; /* 最後の瞬間だけ消える */
  }
}


/*「boxInner」をスライドインする*/
@keyframes play2 {
  from {
    transform: translateY(-100%);
  }
  
  to {
    transform: translateY(0);
  }
}

/*マスク要素をスライドアウトする*/
@keyframes maskOut2 {
  from {
    transform: translateY(0);
  }
  
  to {
    transform: translateY(100%);
  }
}