@import url("main.css");

/* カテゴリメニュー */
.category_menu{
	margin:0 auto;
	width:720px;
	background-color:#3b5598;
	box-sizing: border-box;
	color:#ffffff;
}
.category_menu li {
	padding:10px 0;
	float:left;
	width:33.3%;
	box-sizing: border-box;
	font-size:20px;
	color:#ffffff;
	border-bottom: 1px #ffffff solid;
	border-right: 1px #ffffff solid;
}
.category_menu a {
	color:#ffffff;
}
.category_menu img {
	width:32px;
	vertical-align:-8px;
	margin-right:5px;
}
/* クイズ用 クエスチョン */
.question{
	font-size:16px;
	margin:5px auto 0;
	width:100%;
	max-width:640px;
	background-color:#ffffff;
	box-sizing: border-box;
	border: 1px #cccccc solid;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
}
.question h2{
	font-size:20px;
	padding:5px;
	margin: 0 5px;
	color:#555555;
}
.question p{
	margin: 5px 2px;
	font-size:24px;
}

.question img{
	width:auto;
	max-width:500px;
	max-height:250px;
}

/* グラフ */
.graph p{
	font-size:18px;
	ont-weight: bold;
	color:#3333ff;
	margin:0 0 -20px 0;
}
.graph ul{
	font-size:18px;
	color:#ffffff;
	margin:0 auto;
	padding-left:20px;
	box-sizing: border-box;
	width:320px;
	height:240px;
	background:url(http://iq.kuizu100.net/img/banner/graph.png);

}
.graph li{
	margin:0 5.3px;
	float:left;
	width:36px;
	height:240px;
	text-align:center;
	position : relative ;
}

.graph li span {
	display:block;
	width:100%;
	padding-bottom: -16;
	position:absolute ;
	bottom :0;
	font-size:16px;
	color:#ffffff;
}
.graph li span.meter {
	display:block;
	width:100%;
	position : absolute ;
	bottom :20px;
	background-color:#ff3333;
	opacity:0.6;
	background:#ff3333;	/* デフォルト */
	background:-moz-linear-gradient(top, #ff3333, #ff9999);	/* Safari,Chrome */
	background:-webkit-gradient(linear, left top, left bottom, from(#ff3333), to(#ff9999));/* Firefox */
	background: linear-gradient(to bottom, #ff3333, #ff9999);	/* ie10 */

}

/* 選択肢 */
.select{
	margin:0 auto;
	width:601px;
	height:115px;
	background-color:#f0f0ff;
	border: 1px #cccccc solid;
	border-bottom: none;
	border-left: none;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
}
.select li{
	float:left;
	line-height:100%;	
	width:100px;
	font-size:14px;
	height:115px;
	box-sizing: border-box;
	border-bottom: 1px #cccccc solid;
	border-left: 1px #cccccc solid;
}
.select li a{
	color:#333333;
	font-weight:bold;
}
.select li:hover {
	background-color:#ccccff;
}
.select li img{
	width:100px;
	height:100px;
}

.select_text{
	margin:0 auto;
	width:301px;
	height:50px;
	background-color:#f0f0ff;
	border: 1px #cccccc solid;
	border-bottom: none;
	border-left: none;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
}
.select_text li{
	float:left;
	font-size:20px;
	line-height:250%;	
	width:50px;
	height:50px;
	box-sizing: border-box;
	border-bottom: 1px #cccccc solid;
	border-left: 1px #cccccc solid;
}
.select_text a{
	display:block;
	width:50px;
	height:50px;
	color:#444444;
	font-weight:bold;
}
.select_text li:hover {
	background-color:#ccccff;
}

@media screen and (max-width: 640px){
/* メインカラム */
.category_menu{
	width:100%;
	min-width:320px;
}

.question{
	border-left: none;
	border-right: none;
}
.question img{
	max-width:100%;
	max-height:210;
}

/* 選択肢 */
.select{
	width:211px;
	height:170px;
}
.select li{

	width:70px;
	height:85px;
}
.select li img{
	width:70px;
	height:70px;
}

}