body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  
  /* ── 1. 背景色を自動で変化させる設定 ── */
  /* 8秒かけて色をループ（無限に繰り返す）させます */
  animation: changeBgColor 8s infinite alternate ease-in-out;
}

.container h1 {
  font-size: 3rem;
  color: #333;
  
  /* ── 2. 文字を動かす設定 ── */
  /* 2秒かけて上下にふわふわとループさせます */
  animation: floatAnimation 2s infinite alternate ease-in-out;
}


/* ── 3. アニメーションの具体的な動き（中身）の定義 ── */

/* 背景色が変わる動きの定義 */
@keyframes changeBgColor {
  0% {
    background-color: #e0f7fa; /* 薄い水色 */
  }
  50% {
    background-color: #f3e5f5; /* 薄い紫 */
  }
  100% {
    background-color: #fff9c4; /* 薄い黄色 */
  }
}

/* 文字が上下に動く動きの定義 */
@keyframes floatAnimation {
  0% {
    transform: translateY(0); /* 元の位置 */
  }
  100% {
    transform: translateY(-15px); /* 15ピクセル上に移動 */
  }
}