@charset "UTF-8";
/*アニメーションの@keyframes用のCSSコードを書く（ここに書くとAMP用で約500KBまで記入できます）*/
/* ストロークアニメーションのキーフレーム */
@keyframes stroke-draw {
 from {
   stroke-dashoffset: 300;
 }
 to {
   stroke-dashoffset: 0;
 }
}
@keyframes stroke-hide {
 from {
   stroke-dashoffset: 0;
 }
 to {
   stroke-dashoffset: 300;
 }
}

@keyframes fadein {
  0% {
    opacity: 0;
    margin-block-start: 300px;
  }
  100% {
    opacity: 1;
    margin-block-start: 0;
  }
}

@keyframes rote90 {
  0% {transform: rotateY(0);}
  100% {transform: rotateY(360deg);}
}
@keyframes rote_90 {
  0% {transform: rotate(-20deg);opacity: .5;}
  100% {transform: rotate(0);opacity: 1;}
}


@keyframes slideFromRight {
  0% {
    transform: translateX(200svw);
    opacity: 0;
  }
  50% {
    transform: translateX(1svw);
    opacity: .5;
  }
 80% {
    transform: translateX(75svw);
    opacity: .9;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideFromLeft {
  0% {
    transform: translateX(-200svw);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}