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

#canvas {
	
	width: 258px;
	height: 242px;
	
	margin-top: 15px;
	
}

#content_main {
	
	position: relative;
	
	height: 262px;
	
}

.param_table {
	
	position: absolute;
	
	top: 5px;
	right: 0;
	
	width: 414px;
	
}

td {
	
	padding: 1px 8px 1px 4px;
	
	text-align: right;
	
	white-space: nowrap;
	
}

.value {
	
	text-align: left;
	
}

#rank {
	
	width: 18px;
	
}

#count {
	
	width: 60px;
	
}

/* ------------------------------------------------------------ */
/* text color */

.c1 {
	
	color: rgb(50, 50, 250);/* 青 */
	
}

.c2 {
	
	color: rgb(175, 0, 250);/* 紫 */
	
}

.c3 {
	
	color: rgb(250, 50, 50);/* 赤 */
	
}

.c4 {
	
	color: rgb(250, 200, 0);/* 黄 */
	
}

.c5 {
	
	color: rgb(0, 150, 0);/* 緑 */
	
}

.c6 {
	
	color: rgb(125, 125, 250);/* 薄青 */
	
}

.c7 {
	
	color: rgb(200, 100, 250);/* 薄紫 */
	
}

.c8 {
	
	color: rgb(250, 150, 150);/* 桃 */
	
}

.c9 {
	
	color: rgb(255, 100, 0);/* 橙 */
	
}

.c10 {
	
	color: rgb(100, 175, 100);/* 薄緑 */
	
}

/* ------------------------------------------------------------ */
/* border color */

.trb1 td {
	
	border-bottom: 1px solid rgb(50, 50, 250);/* 青 */
	
}

.trb2 td {
	
	border-bottom: 1px solid rgb(175, 0 ,250);/* 紫 */
	
}

.trb3 td {
	
	border-bottom: 1px solid rgb(250, 50, 50);/* 赤 */
	
}

.trb4 td {
	
	border-bottom: 1px solid rgb(250, 200, 0);/* 黄 */
	
}

.trb5 td {
	
	border-bottom: 1px solid rgb(0, 150, 0);/* 緑 */
	
}

.trb6 td {
	
	border-bottom: 1px solid rgb(125, 125, 250);/* 薄青 */
	
}

.trb7 td {
	
	border-bottom: 1px solid rgb(200, 100, 250);/* 薄紫 */
	
}

.trb8 td {
	
	border-bottom: 1px solid rgb(250, 150, 150);/* 桃 */
	
}

.trb9 td {
	
	border-bottom: 1px solid rgb(250, 100, 0);/* 橙 */
	
}

.trb10 td {
	
	border-bottom: 1px solid rgb(100, 175, 100);/* 薄緑 */
	
}

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

/* for Tablet & Smat Phone */
@media screen and (max-width: 959px) {
	
	#mode_transition {
		
		display: none;
		
	}
	
	#canvas {
		
		margin-left: calc((100% - 258px) / 2 + 10px);
		
	}
	
	#content_main {
		
		height: 41.5em;
		
	}
	
	.param_table {
		
		top: 262px;
		
		width: 100%;
		
	}
	
	td {
		
		padding: 0.4em 0.6em 0.4em 0;
		
	}
	
	#rank {
		
		width: 2.2em;
		
	}
	
	#count {
		
		width: 5em;
		
	}

}