.swich_setting {
  display: none; /* チェックボックスを非表示に */
}

.tooltip { /* 補足説明するテキストのスタイル */
  position: relative;
  cursor: pointer;
  padding: 0 5px;
  font-size: 1.0em; /* org 0.9 */
  color: #4682b4;
}

.description { /* 吹き出しのスタイル */
  width: 350px; /* 横幅 def:150->350 */
  position: absolute;
  top: 50%;
  left: 15%; /* X軸の位置org:80 */
  transform: translateY(-50%);
  margin-left: 8px; /* テキストとの距離 */
  padding: 8px;
  border-radius: 10px; /* 角の丸み */
  background-color: rgb(220, 240, 240); /* ツールチップの背景色 */
  font-size: 0.9em;  /* ツールチップの文字サイズ def:0.7 */
  color: rgb(0, 0, 0);
  text-align: left;  /* org:center */
  visibility: hidden; /* ツールチップを非表示に */
  opacity: 0; /* 不透明度を0％に */
  z-index: 3;
  transition: 0.5s all; /* マウスオーバー時のアニメーション速度 */
  line-height: 1.2; /* 行間 */
}

.description::before { /* 吹き出しの「しっぽ」のスタイル */
  content: "";
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-right: 12px solid rgb(220, 240, 240); /* 最後の値は「ツールチップの背景色」と合わせる */
  position: absolute;
  top: 50%;
  right: 99%;
  transform: translateY(-50%);
}

.swich_setting:checked + .tooltip .description{ /* チェック時のスタイル */
  left: 25%; /* X軸の位置 org:100 */
  /* top: 100%; */
  visibility: visible;
  opacity: 1;
}