*/
https://reffect.co.jp/html/toggle-switch を参考に
*/

.switch_label {
  display: flex; /* 子の要素は横並び */
  align-items: center;
}

#switch2,#switch1 {
  position: relative; /* 親要素 子のabsoluteの基準になる */
}

#switch-b,#switch-a { /* checkboxのサイズを0に設定 形がなくなる*/
  position: absolute;
  width: 0;
  height: 0;
}

#base2,#base1 {
  width: 56px; /* 28pxで2つ分 */
  border-radius: 15px;
  height: 32px; 
  background-color: #ddd;
}

#title2,#title1 {
  margin-left: 4px;
}

#circle2,#circle1 {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  border-radius: 12px; /* 半径12pxの円 */
  background-color: white;
  transition: 0.5s;
}

/* If checkbox is checked 間接セレクターがないと動かないよう */
#switch-b:checked ~ #base2 { 
  background-color: rgb(219, 234, 254);　/* 濃い青 */
  transition: 0.5s; /* 0.5sで変化 */
}

#switch-b:checked ~ #circle2 {
  transform: translateX(100%); /* x方向に100%移動 */
  background-color: blue;
  transition: 0.5s;　
}

#switch-a:checked ~ #base1 { 
  background-color: rgb(219, 234, 254);
  transition: 0.5s;
}

#switch-a:checked ~ #circle1 {
  transform: translateX(100%);
  background-color: blue;
  transition: 0.5s;
}