/*棒グラフ用*/
.graph-bar{
	box-sizing:border-box;
	position:relative;
	width: 100%;

	line-height:1.2;
	font-size:1em;
	padding:3px 8px;

	margin-top:0.7em;

	background:#fff;

	overflow:hidden;
	height:1.6rem;
	color:#333;
}
h4+.graph-bar{
	margin-top:0.3em;
}

.box-normal:has(.btn-square.right) .graph-bar{
	width:calc(100% - 100px);
}

@keyframes anim_txt{
	0%{ color:transparent }
}

.graph-bar>div{
	position:absolute;
	left:0;
	top:0;
	box-sizing:border-box;
	background-color:#0091ea;
	height: 100%;
	padding:3px 0 0;
	white-space: nowrap;
	text-align:right;
	color:#fff;
	animation: anim_graph 1.5s ease;
}

.graph-bar>div:not(.goal){
	background-color:#f88;
}

.graph-bar>div:not([data-value]):after{
	content:"";
	margin-right:6px;
}
.graph-bar>div[data-value]:after{
	content:attr(data-value);
	position:absolute;
	top:3px;
	left:calc(100% + 6px);
	color:#333;
}


@keyframes anim_graph{
	0%{ width: 0px;}
}

body[data-jsver="01"] .graph-bar{
	border:1px solid #666;
}
body[data-jsver="01"] .graph-bar>div[data-value]:after{
	color:#121212;
}