/*アニメーションの@keyframes用のCSSコードを書く（ここに書くとAMP用で約500KBまで記入できます）*/

/************************************
** animation
************************************/

/*TOPページぼんやり表示*/
.topimg {
  animation: fadeInKey 2s forwards;
}

fadeInAnime_Content()
.main > * {
   opacity: 0; 
}

/* fadeInAnime_Img()でimgのぼんやりにゅっを再現したい */
.main img {
   /* filter: blur(10px); 
   opacity: 0;  */
}

/* fadeInAnime_List()で.list以下に指定されてるClass */
.entry-card-wrap {
   /* filter: blur(10px); 
   opacity: 0;  */
}

/* ここからanimationのkeyframe指定などなど */
/* ぼんやり下からにゅって出てくる */
.blur {
  animation-name: blurAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes blurAnime {
  from {
    filter: blur(10px);
  }

  to {
    filter: blur(0);
    opacity: 1;
  }
}

/* その場でぼんやりでてくる */
.fadeIn {
  animation: fadeInKey 2s forwards;
  opacity: 0;
}

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

/* 下から出てくる */
.fadeUp {
  animation: fadeUpKey 1.5s forwards;
  opacity: 0;
}

@keyframes fadeUpKey {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}