/* リセットCSS */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0px;
}

/* レイアウトのCSS */
.layout {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  padding: 20px;
}

/* ブロックのCSS */
.block {
  max-width: 300px;
  max-height: 300px;
  width: 100%;
  height: 100%;
  background-color: #5cc0ef;
}

/* フェードインのCSS */
.fade-in-up {
  opacity: 0;
  /* 1s でアニメーションスピードを管理 */
  animation: fadeInUp 1s ease-in forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    /* transform でアニメーションの方向を管理 */
		transform:translate3d(0, 70px, 0);
  }
  to {
    opacity: 1;
		transform:translateZ(0);
  }
}