/* ------------------------------------------------------------ */
/* variable */

:root {
	
	--px: calc(100vw * 0.38);
	
}

/* ------------------------------------------------------------ */
/* for main contents */

.histogram_table {
	
	margin: 5px auto 20px;
	
	border-top: 1px solid #cccccc;
	
}

.histogram_table td {
	
	padding: 1px 0;
	
	border-bottom: 1px solid #cccccc;
	
	text-align: right;
	
	white-space: nowrap;
	
}

.value {
	
	padding-right: 15px !important;
	
}

#count {
	
	width: 60px;
	
}

#per {
	
	width: 65px;
	
}

#bar {
	
	width: 350px;
	
}

.bar_span {
	
	display: block;
	
	height: 12px;
	
	border-radius: 3px;
	
	background-color: #bbbbff;
	
}

/* ------------------------------------------------------------ */

/* for Tablet & Smat Phone */
@media screen and (max-width: 959px) {
	
	#per,
	.per,
	#mode_transition {
		
		display: none;
		
	}
	
	.histogram_table  {
		
		margin: 0.5em auto 2em;
		
	}
	
	.histogram_table td {
		
		padding: 0.4em 0.8em 0.4em 0;
		
	}
	
	.value{
		
		padding-left: 0.6em !important;
		
		text-align: left !important;
		
	}
	
	#bar {
		
		width: 10em;
		
	}
	
	#count {
		
		width: 3.5em;
		
	}
	
	.bar_span {
		
		height: 0.8em;
		
	}
	
	/* ------------------------------------------------------------ */
	
	/* for Tablet */
	@media screen and (min-width: 768px) {
		
		#bar {
			
			width: 25em;
			
		}
		
	}
	
}