body {
  font-size: 4rem;
  text-align: center;
  color: #fff;
}

/* スクロールスナップの設定 */
.container {
  overflow: auto;
  scroll-snap-type: both mandatory;
  display: grid;
  grid-template-columns: repeat(9, 33vw);
  grid-template-rows: repeat(11, 33vw);
  gap: 1px;
  height: 100vh;
}
.area {
  scroll-snap-align: start;
}

/* 各エリアの背景色 */
.area:nth-child(10n) {
  background-color: #FF0000;
}
.area:nth-child(10n+1) {
  background-color: #FF7F00;
}
.area:nth-child(10n+2) {
  background-color: #FFFF00;
}
.area:nth-child(10n+3) {
  background-color: #7FFF00;
}
.area:nth-child(10n+4) {
  background-color: #00FF00;
}
.area:nth-child(10n+5) {
  background-color: #00FF7F;
}
.area:nth-child(10n+6) {
  background-color: #00FFFF;
}
.area:nth-child(10n+7) {
  background-color: #007FFF;
}
.area:nth-child(10n+8) {
  background-color: #0000FF;
}
.area:nth-child(10n+9) {
  background-color: #7F00FF;
}