/*アニメーションの@keyframes用のCSSコードを書く（ここに書くとAMP用で約500KBまで記入できます）*/
@keyframes katakata {
  0% {transform:translate(0, 0) rotate(0deg);}
  21% {transform:translate(0, 0) rotate(0deg);}

  22% {transform:translate(0, 0) rotate(-1deg);}
  23% {transform:translate(0, 0) rotate(0deg);}
  24% {transform:translate(0, 0) rotate(1deg);}

  25% {transform:translate(0, 0) rotate(-1deg);}
  26% {transform:translate(0, 0) rotate(0deg);}
  27% {transform:translate(0, 0) rotate(1deg);}

  28% {transform:translate(0, 0) rotate(0deg);}
  100% {transform:translate(0, 0) rotate(0deg);}
}

@keyframes fade-in {
 0% { opacity: 0; transform: translateY(-30px); }
 100% { opacity: 1; transform: translateY(0); }
}

@keyframes appear {
 0% { opacity: 0;}
 100% { opacity: 1;}
}

@keyframes arrow_red {
  0% {
    transform:translateY(-30px);
  }
  50% {
    transform:translateY(-40px);
  }
  100% {
    transform:translateY(-30px);
  }
}

@keyframes arrow_green {
  0% {
    transform:translateY(-230px);
  }
  50% {
    transform:translateY(-240px);
  }
  100% {
    transform:translateY(-230px);
  }
}

@keyframes arrow_green_tab {
  0% {
    transform:translateY(-10vw);
  }
  50% {
    transform:translateY(-11vw);
  }
  100% {
    transform:translateY(-10vw);
  }
}

@keyframes arrow_green_sp {
  0% {
    transform:translateY(-12vw);
  }
  50% {
    transform:translateY(-13vw);
  }
  100% {
    transform:translateY(-12vw);
  }
}