/*トップページ比較グラフ用CSS*******************

PCブラウザ用
タブレット用
スマホ用
全て当ファイルにて記載

可変数値全4か所

***********************************************/




/*PCブラウザ用*****************************************************/

.graph {
	display: block;
	position: relative;
	padding: 10px;
	width: auto;
	z-index: 1;
	background: rgb(255,255,255); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(252,252,252,1) 50%, rgba(232,244,247,1) 51%, rgba(255,255,255,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(252,252,252,1)), color-stop(51%,rgba(232,244,247,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(252,252,252,1) 50%,rgba(232,244,247,1) 51%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(252,252,252,1) 50%,rgba(232,244,247,1) 51%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(252,252,252,1) 50%,rgba(232,244,247,1) 51%,rgba(255,255,255,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(252,252,252,1) 50%,rgba(232,244,247,1) 51%,rgba(255,255,255,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
	border: solid 1px #000;
	}
.graph h2 {
	line-height:50px;
	margin: 0 0 20px 0;
	}
/*グラフ要素************************************/
.graph ul {
	width:auto;
	position:relative;
	overflow:hidden;
	padding: 0;
	}
.graph ul li {
	display:block;
	width:12.5%;
	height:225px;
	position:relative;
	float:left;
	background-image:url(../img/bar.png);
	background-repeat: repeat-x;
	background-position: left 20px;
	background-size: auto 150px;
	font-size: 12px;
	}
.graph ul li:hover {
}
.graph ul li span {
	display:block;
	position:absolute;
	}
.graph ul li span:nth-child(1) {
	height:55px;
	width:100%;
	overflow:hidden;
	line-height:15px;
	bottom:-5px;
	font-size:80%;
	text-align:center;
	}
.graph ul li span:nth-child(1) img {
	display:block;
	max-height:25px;
	max-width:90%;
	margin: 0 auto 0 auto;
	}
.graph ul li span:nth-child(2) {
	line-height:20px;
	height:20px;
	top:0;
	width:100%;
	text-align:center;
	}
.graph ul li span:nth-child(3),
.graph ul li span:nth-child(4) {
	background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(255,255,255,0.30)),color-stop( 100% , rgba(0,0,0,0.33)));
	background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,0.30) 0%,rgba(0,0,0,0.33) 100%);
	background-image: linear-gradient(180deg,rgba(255,255,255,0.30) 0%,rgba(0,0,0,0.33) 100%); 
}
.graph ul li span:nth-child(3) {
	bottom: 55px;
	width: 25%;
	height: 80px; /*全人数******←ここの数値を可変*/
	left: 25%;
	background-color: #FF5395;
	}
.graph ul li span:nth-child(4) {
	bottom: 55px;
	width: 25%;
	height: 60px; /*接続人数******←ここの数値を可変*/
	left: 50%;
	background-color: #3FD9FF;
	}


/*タブレット用*****************************************************/
@media screen and (min-width:641px) and (max-width:768px){



}


/*スマホ用*****************************************************/

@media screen and (min-width:240px) and (max-width:640px){
.graph {
	display:block;
	position:relative;
	padding:20px;
	width:auto;
	z-index:1;
	background: #FFF;
	}

/*グラフ要素************************************/
.graph ul {
	position:relative;
	overflow:hidden;
	}
.graph ul li {
	display:block;
	width:25%;
	height:175px;
	position:relative;
	float:left;
	background-image:url(img/graph/bar.png);
	background-repeat: repeat-x;
	background-position: left 20px;
	background-size: auto 100px;
	}
.graph ul li:hover {
	background-color:#FFF;
}
.graph ul li span {
	display:block;
	position:absolute;
	}
.graph ul li span:nth-child(1) {
	height:55px;
	width:100%;
	overflow:hidden;
	line-height:15px;
	bottom:0;
	font-size:80%;
	text-align:center;
	}
.graph ul li span:nth-child(1) img {
	display:block;
	max-height:25px;
	width:auto;
	max-width:90%;
	margin: 0 auto 0 auto;
	}
.graph ul li span:nth-child(2) {
	line-height:20px;
	height:20px;
	top:0;
	width:100%;
	text-align:center;
	font-size:85%;
	}
.graph ul li span:nth-child(3) {
	bottom:55px;
	width:25%;
	height:80px; /*全人数******←ここの数値を可変*/
	left:25%;
	background-color:#333;
	}
.graph ul li span:nth-child(4) {
	bottom:55px;
	width:25%;
	height:60px; /*接続人数******←ここの数値を可変*/
	left:50%;
	background-color:#999;
}
}