/* CSS Document */
/* ************************/
/*		ToolTip 枠線あり   */
/* ************************/
:root {
	/* 吹き出しの縦横SIZE:数値 */
	--tooltip2-bubble-size: 10;
	/* 吹き出しの縦横SIZE:数値 */
	--tooltip2-font-size: 8px;
	/* 吹き出しの縦横SIZE:Pixel */
	--tooltip2-bubble-wid: calc(var(--tooltip2-bubble-size) * 1px);
	/* 吹き出し本文のMargin */
	--tooltip2-body-mag: calc(((var(--tooltip2-bubble-size) - 1) * 1px) + 5px);
	/* 吹き出しの左右上下表示位置 */
	--tooltip2-bubble-pos: calc((var(--tooltip2-bubble-size) - 1) * -1px);
	/* 吹き出しの始点Left・Top表示位置 */
	--tooltip2-bubble-from: 4px;
	/* 吹き出しの尖り具合 … 大きくするだけ鋭利に */
	--tooltip2-bubble-sharp: 4;
	--tooltip2-bubble-sharp-from:  calc(100% / var(--tooltip2-bubble-sharp)); 				/* 100% / 4 = 25% */
	--tooltip2-bubble-sharp-to:    calc(1% * (100 - (100 / var(--tooltip2-bubble-sharp))));	/* 100% - (100% / 4) = 75% */
	/* 吹き出し本文の角丸 */
	--tooltip2-body-rad: 5px;
	/* 吹き出し本文上塗り色 */
	--tooltip2-body-bgcolor: rgb(172, 214, 225);
	/* 吹き出しのDropshadow色 */
	--tooltip2-body-sdcolor: rgba(34, 94, 109, .8);
	/* 吹き出しの枠線太さ … 後述の"Filter:"箇所のコメントアウト解除 */
	--tooltip2-body-bdwid-1: 1px;
	--tooltip2-body-bdwid-2: calc(var(--tooltip2-body-bdwid-1) * -1);
	/* 吹き出しの枠線色 */
	--tooltip2-body-bdcolor: rgba(34, 94, 109, 0.6);
}

/* ToolTipDIV:本体 */
#tt2_down__left,
#tt2_down_right,
#tt2_up____left,
#tt2_up___right,
#tt2_right_down,
#tt2_right___up,
#tt2_left__down,
#tt2_left____up {
	opacity: 0;
	width: fit-content;
	height: fit-content;
	padding: 3px 8px;
	position: absolute;
	font-size: var(--tooltip2-font-size);
	white-space: nowrap;
	left: 0;
	bottom: 0;
	border-radius: var(--tooltip2-body-rad);
	background-color: var(--tooltip2-body-bgcolor);
	filter:
		/* 枠線を表示する場合は以下コメントアウトを解除 */
		drop-shadow(var(--tooltip2-body-bdwid-1) 0px 0px var(--tooltip2-body-bdcolor))
		drop-shadow(var(--tooltip2-body-bdwid-2) 0px 0px var(--tooltip2-body-bdcolor))
		drop-shadow(0px var(--tooltip2-body-bdwid-1) 0px var(--tooltip2-body-bdcolor))
		drop-shadow(0px var(--tooltip2-body-bdwid-2) 0px var(--tooltip2-body-bdcolor))
		drop-shadow(0px 0px 3px var(--tooltip2-body-sdcolor))
		;
	z-index: 100;
}
.dv_tooltip2_err {
	color: #890909;
	font-weight: bold;
}

/* ToolTipDIV:吹き出し */
#tt2_down__left::after,
#tt2_down_right::after,
#tt2_up____left::after,
#tt2_up___right::after,
#tt2_left__down::after,
#tt2_left____up::after,
#tt2_right_down::after,
#tt2_right___up::after {
	content: "";
	height: var(--tooltip2-bubble-wid);
	width: var(--tooltip2-bubble-wid);
	position: absolute;
	background-color: var(--tooltip2-body-bgcolor);
}
#tt2_down_right::after,
#tt2_up___right::after {
	right: var(--tooltip2-bubble-from);
}
#tt2_down__left::after,
#tt2_up____left::after{
	left: var(--tooltip2-bubble-from);
}
#tt2_left__down::after,
#tt2_right_down::after {
	bottom: var(--tooltip2-bubble-from);
}
#tt2_left____up::after,
#tt2_right___up::after {
	top: var(--tooltip2-bubble-from);
}

/* ClipPath設定
		X: 0..25..50..75..100
	 Y: 0 ┌-----------------┐
		.. |                 |
		25 |                 |
		.. |                 |
		50 |                 |
		.. |                 |
		75 |                 |
		.. |                 |
	  100 └-----------------┘*/
/* ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜
	⬜⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬜
	⬜⬛⬜⬜⬜⬜⬜⬜⬜⬜⬜⬛⬜
	⬜⬛⬜⬜⬜⬜⬜⬜⬜⬜⬜⬛⬜
	⬜⬛⬜⬜⬜⬜⬜⬜⬜⬜⬜⬛⬜
	⬜⬛⬛⬛⬛⬜⬜⬛⬛⬛⬛⬛⬜
	⬜⬜⬜⬜⬛⬜⬛⬜⬜⬜⬜⬜⬜
	⬜⬜⬜⬜⬛⬛⬜⬜⬜⬜⬜⬜⬜
	⬜⬜⬜⬜⬛⬜⬜⬜⬜⬜⬜⬜⬜
	⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜*/
#tt2_down__left::after {
	bottom: var(--tooltip2-bubble-pos);
	clip-path: polygon(var(--tooltip2-bubble-sharp-from) 0, 0 100%, 100% 0);
}
/* ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜
	⬜⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬜
	⬜⬛⬜⬜⬜⬜⬜⬜⬜⬜⬜⬛⬜
	⬜⬛⬜⬜⬜⬜⬜⬜⬜⬜⬜⬛⬜
	⬜⬛⬜⬜⬜⬜⬜⬜⬜⬜⬜⬛⬜
	⬜⬛⬜⬜⬜⬜⬜⬜⬜⬜⬜⬛⬜
	⬜⬛⬛⬛⬛⬛⬜⬜⬛⬛⬛⬛⬜
	⬜⬜⬜⬜⬜⬜⬛⬜⬛⬜⬜⬜⬜
	⬜⬜⬜⬜⬜⬜⬜⬛⬛⬜⬜⬜⬜
	⬜⬜⬜⬜⬜⬜⬜⬜⬛⬜⬜⬜⬜
	⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜*/
#tt2_down_right::after {
	bottom: var(--tooltip2-bubble-pos);
	clip-path: polygon(0 0, 100% 100%, var(--tooltip2-bubble-sharp-to) 0);
}
/* ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜
	⬜⬜⬜⬜⬛⬜⬜⬜⬜⬜⬜⬜⬜
	⬜⬜⬜⬜⬛⬛⬜⬜⬜⬜⬜⬜⬜
	⬜⬜⬜⬜⬛⬜⬛⬜⬜⬜⬜⬜⬜
	⬜⬛⬛⬛⬛⬜⬜⬛⬛⬛⬛⬛⬜
	⬜⬛⬜⬜⬜⬜⬜⬜⬜⬜⬜⬛⬜
	⬜⬛⬜⬜⬜⬜⬜⬜⬜⬜⬜⬛⬜
	⬜⬛⬜⬜⬜⬜⬜⬜⬜⬜⬜⬛⬜
	⬜⬛⬜⬜⬜⬜⬜⬜⬜⬜⬜⬛⬜
	⬜⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬜
	⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜*/
#tt2_up____left::after {
	top: var(--tooltip2-bubble-pos);
	clip-path: polygon(0 0, var(--tooltip2-bubble-sharp-from) 100%, 100% 100%);
}
/* ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜
	⬜⬜⬜⬜⬜⬜⬜⬜⬛⬜⬜⬜⬜
	⬜⬜⬜⬜⬜⬜⬜⬛⬛⬜⬜⬜⬜
	⬜⬜⬜⬜⬜⬜⬛⬜⬛⬜⬜⬜⬜
	⬜⬛⬛⬛⬛⬛⬜⬜⬛⬛⬛⬛⬜
	⬜⬛⬜⬜⬜⬜⬜⬜⬜⬜⬜⬛⬜
	⬜⬛⬜⬜⬜⬜⬜⬜⬜⬜⬜⬛⬜
	⬜⬛⬜⬜⬜⬜⬜⬜⬜⬜⬜⬛⬜
	⬜⬛⬜⬜⬜⬜⬜⬜⬜⬜⬜⬛⬜
	⬜⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬜
	⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜*/
#tt2_up___right::after {
	top: var(--tooltip2-bubble-pos);
	clip-path: polygon(0 100%, 100% 0 ,var(--tooltip2-bubble-sharp-to) 100%);
}
/* ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜
	⬜⬜⬜⬜⬜⬛⬛⬛⬛⬛⬛⬛⬜
	⬜⬜⬜⬜⬜⬛⬜⬜⬜⬜⬜⬛⬜
	⬜⬜⬜⬜⬛⬜⬜⬜⬜⬜⬜⬛⬜
	⬜⬜⬜⬛⬜⬜⬜⬜⬜⬜⬜⬛⬜
	⬜⬜⬛⬜⬜⬜⬜⬜⬜⬜⬜⬛⬜
	⬜⬛⬛⬛⬛⬛⬜⬜⬜⬜⬜⬛⬜
	⬜⬜⬜⬜⬜⬛⬛⬛⬛⬛⬛⬛⬜
	⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜*/
#tt2_left__down::after {
	left: var(--tooltip2-bubble-pos);
	clip-path: polygon(100% 0 ,0 100%, 100% var(--tooltip2-bubble-sharp-to));
}
/* ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜
	⬜⬜⬜⬜⬜⬛⬛⬛⬛⬛⬛⬛⬜
	⬜⬛⬛⬛⬛⬛⬜⬜⬜⬜⬜⬛⬜
	⬜⬜⬛⬜⬜⬜⬜⬜⬜⬜⬜⬛⬜
	⬜⬜⬜⬛⬜⬜⬜⬜⬜⬜⬜⬛⬜
	⬜⬜⬜⬜⬛⬜⬜⬜⬜⬜⬜⬛⬜
	⬜⬜⬜⬜⬜⬛⬜⬜⬜⬜⬜⬛⬜
	⬜⬜⬜⬜⬜⬛⬛⬛⬛⬛⬛⬛⬜
	⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜*/
#tt2_left____up::after {
	left: var(--tooltip2-bubble-pos);
	clip-path: polygon(100% var(--tooltip2-bubble-sharp-from), 0 0, 100% 100%);
}
/* ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜
	⬜⬛⬛⬛⬛⬛⬛⬛⬜⬜⬜⬜⬜
	⬜⬛⬜⬜⬜⬜⬜⬛⬜⬜⬜⬜⬜
	⬜⬛⬜⬜⬜⬜⬜⬜⬛⬜⬜⬜⬜
	⬜⬛⬜⬜⬜⬜⬜⬜⬜⬛⬜⬜⬜
	⬜⬛⬜⬜⬜⬜⬜⬜⬜⬜⬛⬜⬜
	⬜⬛⬜⬜⬜⬜⬜⬛⬛⬛⬛⬛⬜
	⬜⬛⬛⬛⬛⬛⬛⬛⬜⬜⬜⬜⬜
	⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜*/
#tt2_right_down::after {
	right: var(--tooltip2-bubble-pos);
	clip-path: polygon(0 0, 100% 100%, 0 var(--tooltip2-bubble-sharp-to));
}
/* ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜
	⬜⬛⬛⬛⬛⬛⬛⬛⬜⬜⬜⬜⬜
	⬜⬛⬜⬜⬜⬜⬜⬛⬛⬛⬛⬛⬜
	⬜⬛⬜⬜⬜⬜⬜⬜⬜⬜⬛⬜⬜
	⬜⬛⬜⬜⬜⬜⬜⬜⬜⬛⬜⬜⬜
	⬜⬛⬜⬜⬜⬜⬜⬜⬛⬜⬜⬜⬜
	⬜⬛⬜⬜⬜⬜⬜⬛⬜⬜⬜⬜⬜
	⬜⬛⬛⬛⬛⬛⬛⬛⬜⬜⬜⬜⬜
	⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜*/
#tt2_right___up::after {
	right: var(--tooltip2-bubble-pos);
	clip-path: polygon(0 var(--tooltip2-bubble-sharp-from), 100% 0, 0 100%);
}