/* マウスホバー時、またはキーボードでフォーカスが当たった時に、data-tooltip が設定されていれば表示する */
.ai-tooltip[data-tooltip]:hover::after,
.ai-tooltip[data-tooltip]:hover::before,
.ai-tooltip[data-tooltip]:focus-within::after,
.ai-tooltip[data-tooltip]:focus-within::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-5px);
}
/* ツールチップ全体の共通設定 */
.ai-tooltip {
  position: relative;
  cursor: pointer;
  /* border-bottom: 2px dashed #0088cc; 引けるように下線をつけて分かりやすく */
}

/* 吹き出しの本体 */
.ai-tooltip::after {
  content: attr(data-tooltip); /* JSで入れたツッコミ文字をここに表示 */
  position: absolute;
  bottom: 130%; /* 文字の上に配置 */
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 12px;
  background-color: #333;
  color: #fff;
  font-size: 14px;
  font-weight: normal;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 100;
}

/* 吹き出しの突起（矢印） */
.ai-tooltip::before {
  content: "";
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 100;
}

/* マウスホバー時に data-tooltip が設定されていれば表示する */
.ai-tooltip[data-tooltip]:hover::after,
.ai-tooltip[data-tooltip]:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-5px);
}