@charset "UTF-8";


    .tooltip { /* 補足説明するテキストのスタイル */
  position: relative;
  cursor: pointer;
  padding: 0 5px;
  font-size: 0.9em;
  color: #4682b4;
}
 
.description_right { /* ツールチップのスタイル */
  width: 30em; /* 横幅 */
  position: absolute;
  top: 50%;
  left: 80%; /* X軸の位置 */
  transform: translateY(-50%);
  padding: 8px;
  border-radius: 10px; /* 角の丸み */
  background-color: #EEFFEE;
  font-size: 0.7em;
  color: black;
  text-align: left;
  visibility: hidden; /* ツールチップを非表示に */
  opacity: 0; /* 不透明度を0％に */
  z-index: 1;
  transition: 0.5s all; /* マウスオーバー時のアニメーション速度 */
}
 
.tooltip:hover .description_right { /* マウスオーバー時のスタイル */
  left: 100%; /* X軸の位置 */
  visibility: visible; /* ツールチップを表示 */
  opacity: 1; /* 不透明度を100％に */
}