/*
  このCSSを指定したOBJECTの上にマウスカーソルを置くことでツールチップの様に
  メッセージを表示する機能として2つの定義を準備しました。
  
  ▼表示OBJECTの上側にツールチップを表示する
  <div class="balloonoya">マウスを乗せてください（上）
    <span class="balloon balloon-top">
    吹き出しが【左上】に表示される
    </span>
  </div>
  
  ▼矢印(▲)位置：バルーン上下表示毎に矢印表示位置を左・中央・右と３つ用意した。
    左寄り：balloon-topl、balloon-botl
    中央  ：balloon-top、 balloon-bot
    右寄り：balloon-topr、balloon-botr
  
  ▼表示OBJECTの下側にツールチップを表示する(■＋カスタム指定：style)
  <div class="balloonoya">マウスを乗せてください（下）
    <span class="balloon balloon-bot" style='left: 50%;transform: translateX(-50%);width: 380px;font-size: 80%;padding:15px 15px;'>
    吹き出しが【中央下】に幅380pxで表示される：style指定なしは左下表示になる
    </span>
  </div>
  
*/

.balloonoya {
  position: relative;    /* 親要素の位置を相対位置に設定 */
  display: inline-block; /* インラインブロック要素として表示 */
}

.balloonoya .overlay {
  position: absolute; 	/* オーバーレイ要素の位置を絶対位置に設定 */
  top: 0;  				/* 親要素の上端に配置 */
  left: 0; 				/* 親要素の左端に配置 */
  width: 100%;  		/* 親要素の幅に合わせる */
  height: 100%; 		/* 親要素の高さに合わせる */
  z-index: 10;  		/* 重ね順を指定 */
}

.balloonoya .balloon {
  position: absolute; 	/* ツールチップの位置を絶対位置に設定 */
  display: none; 		/* 初期状態では表示しない */
  padding: 7px;  		/* ■ツールチップの内側余白 */
  background-color: rgba(2, 102, 255, 0.90); /* 背景色と透明度の設定 */
  font-size: 100%; 		/* 文字サイズの設定 */
  color: #FFA500;  		/* 文字色の設定 */
  text-align: left;   	/* テキストを左揃えに設定 */
  border-radius: 5px; 	/* 角に丸みを付ける */
  z-index: 9;   		/* 重ね順を指定 */
  width: 300px; 		/* ツールチップの幅を300pxに設定 */
  left: 100%;   		/* 親要素の中央に配置 */
  transform: translateX(-5%); /* 中央揃えに調整 */
}

.balloonoya:hover .overlay {
  background: none; 	/* ホバー時にオーバーレイの背景を透明に */
}

.balloonoya:hover .balloon {
  display: inline; 		/* ホバー時にツールチップを表示 */
}

/*■■■■■■■■■■■■*/
/* 【矢印(▲)中央タイプ】 */
/*■■■■■■■■■■■■*/
.balloon-top {
  bottom: 100%; 		/* 親要素の上に配置 */
  margin-bottom: 12px; 	/* 親要素からの距離を指定 */
}

.balloon-top:after {
  border-top: 12px solid rgba(2, 102, 255, 0.90); /* 上向きの矢印を描画 */
  border-left: 10px solid transparent;  /* 矢印の左側を透明に */
  border-right: 10px solid transparent; /* 矢印の右側を透明に */
  bottom: -11px; 						/* 親要素からの距離を指定 */
  left: 50%;     						/* 親要素の中央に配置 */
  transform: translateX(-50%); 			/* 中央揃えに調整 */
  content: ""; 							/* 擬似要素のコンテンツ */
  position: absolute; 					/* 絶対位置に設定 */
}

.balloon-bot {
  top: 100%;        /* 親要素の下に配置 */
  margin-top: 12px; /* 親要素からの距離を指定 */
}

.balloon-bot:after {
  border-bottom: 12px solid rgba(2, 102, 255, 0.90); /* 下向きの矢印を描画 */
  border-left: 10px solid transparent;  /* 矢印の左側を透明に */
  border-right: 10px solid transparent; /* 矢印の右側を透明に */
  top: -11px; 							/* 親要素からの距離を指定 */
  left: 50%;  							/* 親要素の中央に配置 */
  transform: translateX(-50%); 			/* 中央揃えに調整 */
  content: ""; 							/* 擬似要素のコンテンツ */
  position: absolute; 					/* 絶対位置に設定 */
}

/*■■■■■■■■■■■■*/
/* 【矢印(▲)左タイプ】 */
/*■■■■■■■■■■■■*/
.balloon-topl {
  bottom: 100%; 		/* 親要素の上に配置 */
  margin-bottom: 12px; 	/* 親要素からの距離を指定 */
}

.balloon-topl:after {
  border-top: 12px solid rgba(2, 102, 255, 0.90); /* 上向きの矢印を描画 */
  border-left: 10px solid transparent;  /* 矢印の左側を透明に */
  border-right: 10px solid transparent; /* 矢印の右側を透明に */
  bottom: -11px; 						/* 親要素からの距離を指定 */
  left: 10%;     						/* 親要素の左に矢印配置 */
  transform: translateX(-10%); 			/* 左に矢印配置に調整 */
  content: ""; 							/* 擬似要素のコンテンツ */
  position: absolute; 					/* 絶対位置に設定 */
}

.balloon-botl {
  top: 100%;        /* 親要素の下に配置 */
  margin-top: 12px; /* 親要素からの距離を指定 */
}

.balloon-botl:after {
  border-bottom: 12px solid rgba(2, 102, 255, 0.90); /* 下向きの矢印を描画 */
  border-left: 10px solid transparent;  /* 矢印の左側を透明に */
  border-right: 10px solid transparent; /* 矢印の右側を透明に */
  top: -12px; 							/* 親要素からの距離を指定 */
  left: 10%;     						/* 親要素の左に矢印配置 */
  transform: translateX(-10%); 			/* 左に矢印配置に調整 */
  content: ""; 							/* 擬似要素のコンテンツ */
  position: absolute; 					/* 絶対位置に設定 */
}

/*■■■■■■■■■■■■*/
/* 【矢印(▲)右タイプ】 */
/*■■■■■■■■■■■■*/
.balloon-topr {
  bottom: 100%; 		/* 親要素の上に配置 */
  margin-bottom: 12px; 	/* 親要素からの距離を指定 */
}

.balloon-topr:after {
  border-top: 12px solid rgba(2, 102, 255, 0.90); /* 上向きの矢印を描画 */
  border-left: 10px solid transparent;  /* 矢印の左側を透明に */
  border-right: 10px solid transparent; /* 矢印の右側を透明に */
  bottom: -11px; 						/* 親要素からの距離を指定 */
  left: 90%;     						/* 親要素の右に矢印配置 */
  transform: translateX(-90%); 			/* 右に矢印配置に調整 */
  content: ""; 							/* 擬似要素のコンテンツ */
  position: absolute; 					/* 絶対位置に設定 */
}

.balloon-botr {
  top: 100%;        /* 親要素の下に配置 */
  margin-top: 12px; /* 親要素からの距離を指定 */
}

.balloon-botr:after {
  border-bottom: 12px solid rgba(2, 102, 255, 0.90); /* 下向きの矢印を描画 */
  border-left: 10px solid transparent;  /* 矢印の左側を透明に */
  border-right: 10px solid transparent; /* 矢印の右側を透明に */
  top: -12px; 							/* 親要素からの距離を指定 */
  left: 90%;     						/* 親要素の右に矢印配置 */
  transform: translateX(-90%); 			/* 右に矢印配置に調整 */
  content: ""; 							/* 擬似要素のコンテンツ */
  position: absolute; 					/* 絶対位置に設定 */
}