body {
  background: #111;
  color: white;
  font-family: sans-serif;
  text-align: center;
  margin: 0;
  padding: 0;
}

h1 {
  margin-top: 20px;
}

#circle {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 40px auto;
  border-radius: 50%;
  transform: rotate(0deg);
  transition: transform 0.2s ease-out;
}

.note {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  text-align: center;
  line-height: 60px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  transform-origin: center center;
}

/* ニュートンの七色 */
.note:nth-child(1) { background: red; }
.note:nth-child(2) { background: orange; }
.note:nth-child(3) { background: yellow; color: black; }
.note:nth-child(4) { background: green; }
.note:nth-child(5) { background: blue; }
.note:nth-child(6) { background: indigo; }
.note:nth-child(7) { background: violet; }
.note:nth-child(8) { background: red; }
.note:nth-child(9) { background: orange; }
.note:nth-child(10) { background: yellow; color: black; }
.note:nth-child(11) { background: green; }
.note:nth-child(12) { background: blue; }

/* 円周上に配置 */
.note {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(calc(var(--i) * 30deg)) translate(160px) rotate(calc(var(--i) * -30deg));
}