body{
	color:#003300;
	margin:0;
	padding:0;
	text-align: center;
	font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
	background-image: url("https://www.oo-q.net/img/background/body.png")
}

a:link {
	color:inherit;
	text-decoration: none;
}
a:visited {
	color:inherit;
}
a:active {
	color:inherit;
}
a:hover {
	color:inherit;
	text-decoration: underline;
}
/*--------------------------------------
  シャドウの色
--------------------------------------*/
.red_shadow{
	text-shadow:1px 1px 3px #dd0000, -1px  1px 3px #dd0000, 1px -1px 3px #dd0000, -1px -1px 3px #dd0000;
}
.green_shadow{
	text-shadow:1px 1px 3px #009900, -1px  1px 3px #009900, 1px -1px 3px #009900, -1px -1px 3px #009900;
}


/*--------------------------------------
  ULのデフォルト
--------------------------------------*/
ul {
	list-style-type:none;
	margin:0;
	padding:0;
}
li {	margin:0;
	padding:0;
}

/*--------------------------------------
  ヘッダー
--------------------------------------*/
header {
	margin:0;
	text-align: left;
}
header h1 {
	margin:0;
}

/*--------------------------------------
  問題ボックス
--------------------------------------*/
#question_box, .ad_sample{
	width:96%;
	max-width:728px;
	min-width:320px;
	line-height:140%;
	margin: 0 auto;
	padding:0;
	color:#ffffff;
	font-size:16px;
	font-weight:bold;
	text-shadow:1px 1px 3px #0000ff, -1px  1px 3px #0000ff, 1px -1px 3px #0000ff, -1px -1px 3px #0000ff;
	border: 5px #8b4513 solid;
	box-sizing:border-box;
	box-shadow:5px 5px 5px 1px #336;
	-moz-box-shadow:5px 5px 5px 1px #336;
	-webkit-box-shadow:5px 5px 5px 1px #336;
	background-size:cover;
	background-position: center center;
}
#question_box h2, .ad_sample{
	margin:0;
	padding:5px;
	text-shadow:1px 1px 1px #666666, -1px  1px 1px #666666, 1px -1px 1px #666666, -1px -1px 1px #666666;
	color:#f0e68c;
	box-sizing:border-box;
	line-height:100%;
	width:100%;
	background:#000099;
	background: rgba(00,00,63, 0.7);
	
}
.question{
	width:90%;
	margin: 0 auto;
	margin-top:30px;
	min-height:70px;
	font-size:20px;
	line-height:150%;
}
.question a{
	text-shadow:1px 1px 3px #cc0000, -1px  1px 3px #cc0000, 1px -1px 3px #cc0000, -1px -1px 3px #cc0000;
}

/*--------------------------------------
  2択
--------------------------------------*/
.ad_sample{
	width:320px;
}

/*--------------------------------------
  2択
--------------------------------------*/
.select {
	width:310px;
	margin:0 auto;
	font-size:20px;
}
.select button{
	display:block;
	width:145px;
	margin:5px;
	text-align:center;
	min-height:40px;
	float:left;
	color:#ffffff;
	font-size:16px;
	font-weight:bold;
	text-shadow:1px 1px 3px #0000ff, -1px  1px 3px #0000ff, 1px -1px 3px #0000ff, -1px -1px 3px #0000ff;
	background:#000099;
	background: rgba(00,00,63, 0.7);
	box-sizing:border-box;
	border: 1px #ccccff solid;
}
.select button:hover, .pager .category_tag a:hover{
	text-shadow:1px 1px 3px #0000ff, -1px  1px 3px #00ff00, 1px -1px 3px #00ff00, -1px -1px 3px #00ff00;
	background:#009900;
	background: rgba(00,63,00, 0.7);
	border: 1px #99ff99 solid;
}


/*--------------------------------------
  グラフ
--------------------------------------*/
.graph{
	width:310px;
	height:42px;
	margin:0 auto;
	box-sizing:border-box;
	border: 1px #ccccff solid;
}
.graph li{
	min-width:5%;
	max-width:95%;
	height:40px;
	margin:0;
	text-align:center;
	float:left;
}
.good_rate{
	text-align:right;
	background:#0000ff;
	background: rgba(00,00,255, 0.8);
}
.bad_rate{
	text-align:left;
	background:#ff0000;
	background: rgba(255,00,00, 0.8);
}
.accuracy_rate{
	width:310px;
	margin:0 auto;
}
.accuracy_rate li{
	width:50%;
	margin:0;
	float:left;
	font-size:16px;
}

/*--------------------------------------
  サイド、バックナンバー、インフォ
--------------------------------------*/
.side, .back_number, .info{
	background-image:url("https://www.oo-q.net/img/background/cork.png");
	width:96%;
	max-width:728px;
	min-width:320px;
	min-height: 320px;
	margin: 0 auto;
	border: 5px #8b4513 solid;
	box-sizing:border-box;
	box-shadow:5px 5px 5px 1px #336;
	-moz-box-shadow:5px 5px 5px 1px #336;
	-webkit-box-shadow:5px 5px 5px 1px #336;
}
/*--------------------------------------
  カテゴリー
--------------------------------------*/
.side{
	padding:10px 44px;
}

.pickup{
	width:100%;
	margin:0 auto;
}
.category li, .pickup li{
	position: relative;
	width:140px;
	margin:7px;
	height:100px;
	line-height:200%;
	text-shadow:1px 1px 3px #0000ff, -1px  1px 3px #0000ff, 1px -1px 3px #0000ff, -1px -1px 3px #0000ff;
	border: 3px #eeeeff solid;
	-webkit-box-shadow: 0 10px 6px -6px #777;
	-moz-box-shadow: 0 10px 6px -6px #777;
	box-shadow: 0 10px 6px -6px #777;
	box-sizing:border-box;
	float:left;
}
.pickup li{
	width:280px;
	margin:14px;
	height:200px;
}
.pickup li span{
	position: absolute;
	background:#ffffff;
	text-shadow:none;
	color:#333333;
	line-height:100%;
	padding:1px;
	font-size:14px;
	top:0;
	left:0;
}

.category li a, .pickup li a{
	width:100%;
	height:94px;
	box-sizing:border-box;
	padding-top:10px;
	display:block;
	color:#ffffff;
	font-weight:bold;
	background: rgba(128,128,128, 0.5);
}
.pickup li a{
	width:100%;
	height:194px;
	font-size:24px;
	padding-top:20px;
}

.category li a:hover, .pickup li a:hover{
	text-decoration: none;
	background: rgba(128,128,128, 0);
}

.category li img{
	width:32px;
	height:auto;
	position: absolute;
	top:-7px;
	left:-7px;
}
.high_score{
	position: absolute;
	text-shadow:none;
	background:#ffffff;
	color:#ff3333;
	line-height:100%;
	padding:4px 1px 1px 3px;
	font-size:14px;
	font-weight:bold;
	bottom:0;
	right:0;
}

.tag li{
	display:inline-block;
	padding:0 3px;
	margin:1px -2px;
	height:23px;
	border: 1px #cccccc solid;
	border-right: 1px #666666 solid;
	border-bottom: 1px #666666 solid;
	background:#ffffff;
	color:#4444ff;
	float:none;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	font-size:14px;
	font-weight:bold;
	line-height:180%;
}
.tag .strong_category{
	height:26px;
	color:#3333cc;
	font-size:18px;
	line-height:150%;
}

/*--------------------------------------
  サイドタグ
--------------------------------------*/
.side_tag{
	position: fixed;
	top: 10px;
	right: 0;
	height:620px;
	width:100px;
	-webkit-overflow:hidden;
	display:block;
	text-align:right;
}

.side_tag:hover{
	width:160px;
}
.side_tag li{
	margin:0;
	height:27px;
}
.side_tag li a{
	overflow:hidden;
	text-align:center;
	min-width:30%;
	display:inline-block;
	padding:0 3px;
	margin:0;
	height:23px;
	border: 1px #cccccc solid;
	border-right: 1px #666666 solid;
	border-bottom: 1px #666666 solid;
	background:#ffffff;
	color:#4444ff;
	border-top-left-radius:6px;
	border-bottom-left-radius:6px;
	-moz-border-top-left-radius:6px;
	-moz-border-bottom-left-radius:6px;
	-webkit-border-top-left-radius:6px;
	-webkit-border-bottom-left-radius:6px;
	font-size:14px;
	font-weight:bold;
	line-height:180%;
}
.side_tag li a:hover{
	width:100%;
	background:#4444ff;
	color:#ffffff;
	border: 1px #ffffff solid;
}


.backnumber_link{
	display:block;
	position: absolute;
	bottom: 0;
	right: 0;
	height:30px;
	border: 1px #cccccc solid;
	border-right: 1px #666666 solid;
	border-bottom: 1px #666666 solid;
	background: #ffffff;
	box-sizing:border-box;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	font-size:16px;
	line-height:180%;
}
.info p{
	margin:0 auto;
	margin-bottom:10px;
	width:90%;
	border: 1px #cccccc solid;
	border-right: 1px #666666 solid;
	border-bottom: 1px #666666 solid;
	background: #ffffff;
	box-sizing:border-box;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	font-size:16px;
	line-height:180%;
}

.question_list li, .back_number h2, .side h2, .side .button, .back_number button, .back_number .button, .info .button, .info h2, .pickup p{
	height:30px;
	border: 1px #cccccc solid;
	border-right: 1px #666666 solid;
	border-bottom: 1px #666666 solid;
	background: #ffffff;
	box-sizing:border-box;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	font-size:16px;
	line-height:180%;
}
.question_list li img{
	height:70px;
	float:left;
	margin:5px;
}
.back_number h2, .info h2{
	width:300px;
	color:#555555;
	margin:0 auto;
	margin-top:6px;
	position: relative;
}
.back_number h2 .back{
	position: absolute;  
	top:0;  
	left:0; 
}
.back_number h2 .next{
	position: absolute;  
	top:0;  
	right:0; 
}

.back_number button{
	font-size:14px;
	padding:2px;
	margin:4px;
}
.question_list{
	width:100%;
	max-width:620px;
	margin:0 auto;
}
.question_list li{
	width:54px;
	margin:4px;
	float:left;
}
.question_list li.long{
	width:98%;
	min-width:300px;
	height:80px;
	padding:0 5px;
	box-sizing:border-box;
	float:none;
	text-align:left;
	overflow: hidden;
	line-height:160%;	
}
.question_list li a{
	display:block;
	height:28px;
	font-weight:bold;
	color:#555555;
}

/*--------------------------------------
  インフォメーション
--------------------------------------*/
.info p .pickup p{
	width:90%;
	margin:0 auto;
	margin-top:20px;
	text-align:left;
	height:auto;
	padding:10px;
}
/*--------------------------------------
  フォーム
--------------------------------------*/
input, textarea{
	width:300px;
}


.info .button, .side .button, .back_number .button{
	display:block;
	margin:0 auto;
	width:260px;
	font-size:14px;
	padding:2px;
	margin-top:10px;
}


/*--------------------------------------
  ページャー
--------------------------------------*/
.pager {
	width:100%;
}
.pager div{
	margin:0 0.5%;
	float:left;
}

.pager .left, .pager .right{
	width:19%;
	
}
.pager .category_tag{
	width:59%;
	padding-top:30px;
}

.pager div a img{
	opacity: 0.7;
}
.pager div a img:hover{
	opacity: 0.9;
}

.pager .category_tag a{
	color:#ffffff;
	font-size:14px;
	background:#ff0000;
	padding:2px;
	background: rgba(00,00,63, 0.8);
	margin:2px;
	border: 1px #eeeeff solid;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	display:inline-block;
}

/*--------------------------------------
  フッター
--------------------------------------*/
footer{
	font-size:14px;
	text-shadow:1px 1px 1px #ffffff, -1px  1px 1px #ffffff, 1px -1px 1px #ffffff, -1px -1px 1px #ffffff;
}

footer ul {
	max-width:728px;
	margin:0 auto;
	margin-top:10px;
	margin-bottom:20px;
	text-align: center;
}
footer ul li{
	float:left;
	width:25%;
}
footer ul li img{
	vertical-align:-1px;
	margin-right:2px;
}

/*--------------------------------------
  文字 共通
--------------------------------------*/
.left{
	text-align:left;
}
.right{
	text-align:right;
}
.red{
	color:#ff3333;
	font-weight:bold;
}
.blue{
	color:#3333ff;
	font-weight:bold;
}

/*--------------------------------------
  広告
--------------------------------------*/
.question_under_ad{
	clear:both;
	margin: 0 auto;
	margin-top:8px;
	margin-bottom:6px;
	max-width:728px;
	min-height:90px;
	color:#666666;
	text-shadow:1px 1px 1px #ffffff, -1px  1px 1px #ffffff, 1px -1px 1px #ffffff, -1px -1px 1px #ffffff;
	font-size:14px;
}
.link_unit{
	margin: 0 auto;
	margin-bottom:4px;
}

.banner{
	width:100%;
	max-width:336px;
	box-sizing:border-box;
	border: 3px #eeeeff solid;
	-webkit-box-shadow: 0 10px 6px -6px #777;
	-moz-box-shadow: 0 10px 6px -6px #777;
	box-shadow: 0 10px 6px -6px #777;
	
}

.contents_ad a{
	display:block;
	background: -moz-linear-gradient(top,#BFD9E5, #3D95B7 50%,#0080B3 50%,#0099CC);
	background: -webkit-gradient(linear, left top, left bottom, from(#BFD9E5), color-stop(0.5,#3D95B7), color-stop(0.5,#0080B3), to(#0099CC));
	color: #ffffff;
	text-shadow:none;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border: 1px solid #0099CC;
	line-height:200%;
	margin: 0 auto;
	margin-top:8px;
	margin-bottom:6px;
	max-width:300px;
	min-height:36px;
	font-size:16px;
}

.advertisement_ad{
	position: fixed;
	top: 50px;
	right: 0;
}
.test_ad{
	position: fixed;
	top: 70px;
	left: 0;
}

.side_ad{
	margin: 4px;
	width:300px;
	float:left;
}

.result_ad{
	margin:4px 0;
}

/*--------------------------------------
 検定
--------------------------------------*/
.active_select{
	height:80px;
	overflow:hidden;
}

.start_button {
	display:block;
	background: -moz-linear-gradient(top,#BFD9E5, #3D95B7 50%,#0080B3 50%,#0099CC);
	background: -webkit-gradient(linear, left top, left bottom, from(#BFD9E5), color-stop(0.5,#3D95B7), color-stop(0.5,#0080B3), to(#0099CC));
	color: #ffffff;
	text-shadow:none;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border: 1px solid #0099CC;
	line-height:200%;
	margin: 0 auto;
	margin-top:8px;
	margin-bottom:6px;
	max-width:300px;
	min-height:36px;
	font-size:16px;
}
.rule{
	width:90%;
	margin:0 auto;
	padding:5px;
	text-align:left;
	color:#ffffff;
	font-size:16px;
	font-weight:bold;
	text-shadow:1px 1px 3px #0000ff, -1px  1px 3px #0000ff, 1px -1px 3px #0000ff, -1px -1px 3px #0000ff;
	background:#000099;
	background: rgba(00,00,63, 0.7);
	box-sizing:border-box;
	border: 1px #ccccff solid;
}
.score{
	border-collapse: collapse;
	width:300px;
	margin:0 auto;
	text-align:left;
	color:#ffffff;
	font-size:16px;
	font-weight:bold;
	text-shadow:1px 1px 3px #0000ff, -1px  1px 3px #0000ff, 1px -1px 3px #0000ff, -1px -1px 3px #0000ff;
	background:#000099;
	background: rgba(00,00,63, 0.7);
	box-sizing:border-box;
	border: 1px #ccccff solid;
}
.score td{
	padding:5px;
	border-bottom: 1px #ccccff solid;
}

.status{
	width:90%;
	max-width:300px;
	margin:0 auto;
	padding:5px;
	text-align:left;
	color:#0000ff;
	font-size:16px;
	font-weight:bold;
	text-shadow:none;
	background:#ffffff;
	background: rgba(255,255,255, 0.7);
	box-sizing:border-box;
	border: 1px #ccccff solid;
}
.status tr td{
	border-bottom: 1px #666666 solid;
}

.result{
	width:98%;
	max-width:320px;
	padding:5px;
	margin:0 auto;
	margin:0 18px;
	border: 1px #cccccc solid;
	border-right: 1px #666666 solid;
	border-bottom: 1px #666666 solid;
	background: #ffffff;
	box-sizing:border-box;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	font-size:16px;
	line-height:180%;
	float:left;
}

.result td {
	text-align:left;
}
.result td span{
	color:#3333ff;
	font-weight:bold;
	font-size:20px;
}
.save{
	color:#ff3333;
	font-weight:bold;
	font-size:14px;
}

.mania, .king, .minister, .like, .zako{
	width:50%;
	max-width:150px;
	height:150px;
	float:left;
	font-weight:bold;
	color:#f6dd7e;
	text-shadow: -1px -1px 1px #e29f10, 1px 1px #fefbe0;
	box-sizing:border-box;
}
.mania{
	padding-top:64px;
	font-size:29px;
}
.king, .minister, .like, .zako{
	padding-top:77px;
	font-size:21px;
}

.all_point{
	width:50%;
	max-width:150px;
	padding-top:96px;
	height:150px;
	color:#ff3333;
	font-size: 36px;
	font-weight:bold;
	float:left;
	box-sizing:border-box;
}
.all_point span{
	font-size:16px;	
}
.evaluation{
	color:#3333ff;
	font-size: 20px;
	font-weight:bold;
}
.side .test_top{
	border: 1px #cccccc solid;
	border-right: 1px #666666 solid;
	border-bottom: 1px #666666 solid;
	background: #ffffff;
	box-sizing:border-box;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	font-size:16px;
	line-height:180%;
	float:left;
	width:50%;
}

.text{
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border: 1px solid #0099CC;
	max-width:200px;
	height:36px;
	font-size:20px;
}
.submit{
	background: -moz-linear-gradient(top,#BFD9E5, #3D95B7 50%,#0080B3 50%,#0099CC);
	background: -webkit-gradient(linear, left top, left bottom, from(#BFD9E5), color-stop(0.5,#3D95B7), color-stop(0.5,#0080B3), to(#0099CC));
	color: #ffffff;
	font-weight:bold;
	display:block;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border: 1px solid #0099CC;
	line-height:200%;
	margin: 0 auto;
	margin-top:8px;
	margin-bottom:6px;
	width:100%;
	max-width:300px;
	min-height:36px;
	font-size:16px;
	text-shadow:none;
}
.share_button{
	margin-top:10px;	
}

.ranking{
	width:90%;
	min-width:300px;
	max-width:640px;
	margin:0 auto;
}
.ranking ul, .ranking_box ul{
	transform: skewX(-15deg);
	padding:4px;
	height:30px;
	width:100%;
	margin-bottom:2px;
	border: 1px #cccccc solid;
	border-right: 1px #666666 solid;
	border-bottom: 1px #666666 solid;
	background: #ffffff;
	box-sizing:border-box;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	font-weight:bolder;
}
.ranking .ranking_body{
	height:50px;
	line-height:200%;
}
.ranking ul li{
	float:left;
}
.ranking .ranking_body li{
	height:41px;
	box-sizing:border-box;
	border-bottom: 4px #0099CC solid;
}
.ranking .rank, .ranking .pt, .ranking .emblem{
	width:12.5%;
}
.ranking .pt, .ranking .emblem{
	width:16%;
}
.ranking .ranking_body .rank{
	background: -moz-linear-gradient(top,#BFD9E5, #3D95B7 50%,#0080B3 50%,#0099CC);
	background: -webkit-gradient(linear, left top, left bottom, from(#BFD9E5), color-stop(0.5,#3D95B7), color-stop(0.5,#0080B3), to(#0099CC));
	color:#ffffff;
	font-size:24px;
	line-height:180%;
}
.ranking .pt{
	color:#ff3333;
}
.ranking .emblem{
}
.ranking .name{
	width:55.5%;
}


.test_home_ad{
	float:left;
	width:49%;
	margin-left:1%;
}

@media screen and (max-width: 728px){

.test_ad, .advertisement_ad, .ranking_box{
	display: none;
}
}
@media screen and (max-width: 640px){
/*--------------------------------------
  問題ボックス
--------------------------------------*/
.question{
	font-size:18px;
	margin-top:20px;
}

.side {
	padding:10px;
}

footer ul {
	max-width:300px;
	text-align:left;
}
footer ul li{
	float:none;
	width:100%;
	height: 30px;
}
.pager .category_tag{
	padding-top:10px;
}

/*--------------------------------------
  検定
--------------------------------------*/
.result{
	margin:0 auto;
	margin-bottom:5px;
	float:none;
}

.side_ad{
	margin: 0 auto;
}
.result_ad{
	width:300px;
}
.side .test_top, .test_home_ad{
	float:none;
	width:100%;
	margin:0 auto;
}
}

@media screen and (max-width: 480px){
/*--------------------------------------
  問題ボックス
--------------------------------------*/
.pager .category_tag{
	padding-top:0;
}

.ranking .rank{
	width:12.5%;
}
.ranking .pt{
	width:18%;
}
.ranking .emblem{
	width:24%;
}
.ranking .name{
	width:45.5%;
}

}

@media screen and (max-width: 320px){
/*--------------------------------------
  問題ボックス
--------------------------------------*/
.category li {
	width:134px;
	margin:5px;
}
.all_point{
	font-size: 34px;

}
}