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

body {
  margin: 0;
}

/* レイアウトの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-bottom-right {
  opacity: 0;
  animation: fadeInBottomRight 1s ease-in forwards;
}

@keyframes fadeInBottomRight {
  from {
    opacity: 0;
		transform:translate3d(70px, 70px, 0);
  }
  to {
    opacity: 1;
		transform:translateZ(0);
  }
}