@charset "UTF-8";

/* About this file ===============================
 * Style    : a tooltip style
 * Since    : 2019-02-18
 * Modified : yyyy-MM-dd
 * Editor   : Akira Tatsuoka
================================================== */

/* ▼▼▼ 共通設定部 ▼▼▼ */
/* 吹き出し共通設定 */
a.tooltipC {
	text-decoration : none;
	position        : relative;
}


/* 吹き出し設定[クエスチョンマーク有り] */
a.tooltipQ {
	color                : #fff;
	text-align           : center;
	display              : inline-block;
	width                : 16px;
	height               : 16px;
	background           : #e9546b;
	-moz-border-radius   : 8px;
	-webkit-border-radius: 8px;
	border-radius        : 8px;
	margin-left          : 5px;
}

/* 吹き出し設定[クエスチョンマーク無し] ※【水位経過表画面】専用 */
a.tooltip2S {
	color: #fff;
}


/* 吹き出し[span]共通設定 */
a.tooltipC span{
	text-align: left;
	display   : none;
	padding   : 2px 3px;
}

/* 吹き出し[span]個別設定 */
a.tooltipQ   span { width: 260px; }							/* [標準] */
a.tooltip2   span { width: 260px; }							/* 【トップ画面】[施設情報]タブ専用 */
a.tooltipS   span { text-align: center; width: 160px; }		/* 警戒レベル専用 */
a.tooltip2S  span { text-align: center; width: 160px; }		/* 【水位経過表画面】専用 */
a.tooltip2SS span { text-align: center; width: 100px; }		/* 【お知らせ順序変更画面】専用 */



/* 吹き出しhover時[span]共通設定 */
a.tooltipC:hover span{
	display   : inline;
	position  : absolute;
	background: #e9546b;
	color     : #ffffff;
	/* アニメーションの制御設定 */
	-moz-animation   : bubbleUp 0.2s 1;
	-webkit-animation: bubbleUp 0.2s 1;
	-o-animation     : bubbleUp 0.2s 1;
	animation        : bubbleUp 0.2s 1;
}

/* 吹き出しhover時[span:after]共通設定 ※吹き出しの足 */
a.tooltipC:hover span:after {
	content     : "";
	display     : block;
	width       : 0;
	height      : 0;
	border-top  : 8px solid #e9546b;
	border-left : 8px solid transparent;
	border-right: 8px solid transparent;
	position    : absolute;
}
/* ▲▲▲ 共通設定部 ▲▲▲ */


/* ▼▼▼ 上側中央表示用 ▼▼▼ */
a.tooltipTopCenter:hover span       { bottom: 25px; left: -130px; }
a.tooltipTopCenter:hover span:after { bottom: -8px; left: 130px; }


/* ▼▼▼ 上側中央表示用[Sサイズ] ▼▼▼ */
a.tooltipTopCenterS:hover span       { bottom: 25px; left: -80px; }
a.tooltipTopCenterS:hover span:after { bottom: -8px; left: 90px; }


/* ▼▼▼ 上側左表示用 ▼▼▼ */
a.tooltipTopLeft:hover span       { bottom: 25px; left: -240px; }
a.tooltipTopLeft:hover span:after { bottom: -8px; left: 240px; }


/* ▼▼▼ 上側左表示用[Sサイズ] ▼▼▼ */
a.tooltipTopLeftS:hover span       { bottom: 45px; left: -80px; }
a.tooltipTopLeftS:hover span:after { bottom: -8px; left: 85px; }


/* ▼▼▼ 上側右表示用 ▼▼▼ */
a.tooltipTopRight:hover span       { bottom: 25px; left: 80px; }
a.tooltipTopRight:hover span:after { bottom: -8px; left: 40px; }


/* ▼▼▼ 上側右表示用[Sサイズ] ▼▼▼ */
a.tooltipTopRightS:hover span       { bottom: 25px; left: -38px; }
a.tooltipTopRightS:hover span:after { bottom: -8px; left: 70px; }


/* ▼▼▼ 下側中央表示用 ▼▼▼ */
a.tooltipBottom:hover span{ top: 25px; left: -130px; }

/* 吹き出しの足 */
a.tooltipBottom:hover span:after {
	border-top   : none;	/* 共通設定で下向き▼に設定している為 */
	border-bottom: 8px solid #e9546b;
	border-left  : 8px solid transparent;
	border-right : 8px solid transparent;
	top          : -8px;
	left         : 130px;
}
/* ▲▲▲ 下側中央表示用 ▲▲▲ */


/* ▼▼▼ 下側左表示用 ▼▼▼ */
a.tooltipBottomLeft:hover span{ top: 25px; left: -240px; }

/* 吹き出しの足 */
a.tooltipBottomLeft:hover span:after {
	border-top   : none;	/* 共通設定で下向き▼に設定している為 */
	border-bottom: 8px solid #e9546b;
	border-left  : 8px solid transparent;
	border-right : 8px solid transparent;
	position     : absolute;
	top          : -8px;
	left         : 240px;
}
/* ▲▲▲ 下側左表示用 ▲▲▲ */


/* ▼▼▼ アニメーション設定 ▼▼▼ */
/* アニメーションの内容[上側用] */
@-moz-keyframes bubbleUp {
	0%   { bottom:15px; opacity:0; }
	100% { bottom:25px; opacity:1; }
}
@-webkit-keyframes bubbleUp {
	0%   { bottom:15px; opacity:0; }
	100% { bottom:25px; opacity:1; }
}
@-o-keyframes bubbleUp {
	0%   { bottom:15px; opacity:0; }
	100% { bottom:25px; opacity:1; }
}
@keyframes bubbleUp {
	0%   { bottom:15px; opacity:0; }
	100% { bottom:25px; opacity:1; }
}


/* アニメーションの内容[下側用] */
@-moz-keyframes bubbleDown {
	0%   { top:15px; opacity:0; }
	100% { top:25px; opacity:1; }
}
@-webkit-keyframes bubbleDown {
	0%   { top:15px; opacity:0; }
	100% { top:25px; opacity:1; }
}
@-o-keyframes bubbleDown {
	0%   { top:15px; opacity:0; }
	100% { top:25px; opacity:1; }
}
@keyframes bubbleDown {
	0%   { top:15px; opacity:0; }
	100% { top:25px; opacity:1; }
}
/* ▲▲▲ アニメーション設定 ▲▲▲ */