@charset "utf-8";

/* ----------------------------------------
  Base Style Seet

	2- 1.全体レイアウト
	2- 2.ヘッダーコンテンツ
	2- 3.グローバルメニュー
	2- 4.サイドバーコンテンツ
	2- 5.フッターコンテンツ
	2- 6.リンク
	2- 7.ナビアイコン
	2- 8.見出しタグ(hタグ）
	2- 9.text,強調
	2-10.リスト
	2-11.共通BOX
	2-12.パンクズ
	2-13.テーブル
---------------------------------------- */


body{
	background-color:#f2f2f2;
	font-size:88%;
	color:#333;
	text-align:center;
}
* html body {font-size:75%;}
*:first-child+html body {font-size:75%;}

input{font-size:14px;}

textarea{overflow-y: auto;}
textarea, x:-moz-any-link, x:default{
 overflow-y: auto;
 overflow-x: hidden;
}
/* ----------------------------------------
  2-1.全体レイアウト
---------------------------------------- */

#container{
	width:964px;
	margin:20px auto 0px auto;
	text-align:left;
}

#maincolumn{
	float:left;
	margin-right:10px;
	width:640px;
}

#header{
	width:640px;
	float:left;
}

#contents{
	width:640px;
	height:auto;
	margin-top:15px;
}

#sidemenu{
	float:right;
	width:301px;
}
#ad{width:300px; margin-top:8px;}
#ad li{margin-bottom:10px;}

#adcenter{
	text-align:center;
	}


#sidetopics{width:301px;}
#sidetopics .title{
	font-size:88%;
	background-image: url(../img/common/sidebox_top.gif);
	background-repeat: no-repeat;
	width: 301px; height: 29px;
	text-indent: 195px;
	padding-top: 22px;
}
#sidetopics .box{
	width:273px;
	padding:0px 14px 21px 12px;
	border-left:1px solid;
	border-right:1px solid;
	border-bottom:1px solid;
}
	#sidetopics .basic{
		border-color:#F94250;
		background:#fde5f2;
	}
#sidetopics #scrollarea{ overflow: hidden; height: 275px; }
#sidetopics dl { display: none; }
	#sidetopics .make{
		border-color:#0373A3;
		background:#D9E5F1;
	}
	#sidetopics .made{
		border-color:#E6E500;
		background:#FEFFB3;
	}
	#sidetopics .history{
		border-color:#1B9530;
		background:#B2DF8A;
	}
	#sidetopics .remember{
		border-color:#B02E88;
		background:#DCBDDD;
	}
	#sidetopics .custum{
		border-color:#B13F1A;
		background:#E3A075;
	}
	
#sidetopics  dl{
	width:261px;
	height:48px;
	background:#fff;
	padding:3px 5px;
	border-left:1px solid;
	border-right:1px solid;
	border-bottom:1px solid;
}
	#sidetopics .basic dl{border-color:#f983bf;}
	#sidetopics .make dl{border-color:#8CB7D7;}
	#sidetopics .made dl{border-color:#E6E500;}
	#sidetopics .history dl{border-color:#33A02B;}
	#sidetopics .remember dl{border-color:#BC509B;}
	#sidetopics .custum dl{border-color:#B03F17;}
	
#sidetopics dt{width:41px;height:50px;margin-right:5px;float:left;}
#sidetopics dd{padding-top:6px;}
#sidetopics dd a{color:#333;font-size:12px;line-height:1.6;}
#sidetopics .icon01{background:url(../img/common/common_sprite.gif) no-repeat -188px -137px;}
#sidetopics .icon02{background:url(../img/common/common_sprite.gif) no-repeat -234px -134px;}
#sidetopics .icon03{background:url(../img/common/common_sprite.gif) no-repeat -278px -140px;}
#sidetopics .icon04{background:url(../img/common/common_sprite.gif) no-repeat -340px -140px;}
#sidetopics .icon05{background:url(../img/common/common_sprite.gif) no-repeat -395px -140px;}
#sidetopics .icon06{background:url(../img/common/common_sprite.gif) no-repeat -450px -140px;}
#sidetopics .icon07{background:url(../img/common/common_sprite.gif) no-repeat -505px -140px;}
#sidetopics .icon08{background:url(../img/common/common_sprite.gif) no-repeat -560px -140px;}
#sidetopics .icon09{background:url(../img/common/common_sprite.gif) no-repeat -615px -140px;}
#sidetopics .icon10{background:url(../img/common/common_sprite.gif) no-repeat -670px -140px;}
#sidetopics .icon11{background:url(../img/common/common_sprite.gif) no-repeat -725px -140px;}

#footer{width:963px;float:left;text-align:center;}

/* ----------------------------------------
  2-2.ヘッダーコンテンツ
---------------------------------------- */


#logo{
	margin-top: -10px;
	width:163px;
	height:117px;
	float:left;
}
#logo a{
	width:163px;
	height:117px;
	float:left;
}

#headerright{
	float:right;
	width:459px;
}

.header-info{
	background:#0a51a1;
	width:443px;
	height:16px;
	padding:9px 8px;
	font-size:12px;
	margin-bottom:4px;
	line-height:1.0;
}
	.quiz-num,
	.challenge-num,
	.recent-challenge{float:left; color:#fff;}
	.quiz-num,
       .challenge-num{letter-spacing: 0em;margin-right:6px;}
    *:first-child+html .quiz-num,
       *:first-child+html .challenge-num{letter-spacing: 0.1em;margin-right:10px;}
	.recent-challenge a{color:#fff;}
	.recent-challenge a:hover{color:#fff;text-decoration:none;}
	.recent-challenge{line-height:1.5; float:right;}
	@media screen and (max-device-width: 480px){
		.recent-challenge{float:right;}
		.challenge-num{letter-spacing: 0em;}
		.quiz-num .bold, .challenge-num .bold{font-size:16px;}
		#headerright .mr15{margin-right:10px;}
	}
	.quiz-num .bold, 
	.challenge-num .bold{
		font-family: arial;
	}
	
	
	
.header-search{width:459px;height:31px;margin-bottom:13px;}
	.header-search .search-box{
 	width:262px;
  	height:21px;
  	background:none;
  	border:none;
  	padding:5px 10px;
  	float:left;
  	position:relative;top:6px;
	}
	
*:first-child+html .header-search .search-box{
  width:254px;
  height:21px;
  background:none;
  border:none;
  padding:5px 10px;
  margin-left:5px;
  float:left;
  position:relative;top:3px;
}

html>/* */body .header-search .search-box{
  width:254px\9;
  height:21px;
  background:none;
  border:none;
  padding:5px 10px;
  margin-left:4px;
  float:left;
  position:relative;top:3px\9;
}

	.search-box-bg{
  	width:282px;
  	height:31px;
  	background:url(../img/common/common_sprite.gif) no-repeat;
  	float:left;
  	display:block;
  	position:relative;top:6px;
  	/*top : 3px\9; /* IE8 and below */
  	/**top : 3px; /* IE7 and below */
}
 .header-search input{background:none;}
 
	
 
	head~/* */body .search-box{/* for ie8 */position:relative;top:-9px;}
	html:not(:target) .search-box{position:relative;top:0px;}
	.header-search .search-box input:focus{outline:none;}
	.search-btn{ position:relative;top:9px; margin-left:4px;}
	
	*:first-child+html .search-box{position:relative;top:6px;}

.header-crowd{font-size: 12px; white-space: nowrap; overflow-x: hidden;}
/*
.header-crowd{width:459px;float:left;}
	.crowdicon{
		width:125px;
		height:25px;
		background:url(../img/common/common_sprite.gif) no-repeat;
		background-position:0px -91px;
		float:left;
		position:relative;
		top:8px;
	}
	.crowdicon p{visibility:hidden;}
	.header-crowd ul{float:right;width:325px;}
	.header-crowd li{
		float:left;
		color:#b9991e;
		height:15px;
		margin-left:8px;
		margin-bottom:13px;
		word-break:keep-all;
		padding-left:8px;
		border-left:1px solid #b9991e;
		font-size:14px;
		line-height:1.2;
	}
	.header-crowd .firstli{border:none;padding:0;}.header-crowd li a{color:#b9991e; text-decoration:none;}
	.header-crowd li a:hover{color:#b9991e; text-decoration:underline;}
	@media screen and (max-device-width: 480px) {
		.header-crowd li{
			float:left;
			color:#b9991e;
			width:80px;
			height:25px;
			margin-left:0px;
			font-size:10px;
			letter-spacing:0em;
			}
		.header-crowd a{font-size:10px;display:inline;}
		.header-crowd {width:459px;float:left;margin-bottom:15px;font-size:10px;letter-spacing:0em;}
		.header-crowd ul li a{font-size:10px;}
	}
*/

/* ----------------------------------------
  2-3.グローバルメニュー
---------------------------------------- */

#globalmenu{width:640px;}
#globalmenu li{float:left; height:33px;}
#globalmenu li a{height:33px;display:block;float:left;background:url(../img/common/common_sprite.gif) no-repeat;text-indent: -9999px;overflow: hidden;}
#globalmenu li.menu01 a{
	width:159px;
	background-position:0px -43px;
}
#globalmenu li.menu02 a{
	width:160px;
	background-position:-161px -43px;
}
#globalmenu li.menu03 a{
	width:159px;
	background-position:-324px -43px;
}
#globalmenu li.menu04 a{
	width:159px;
	background-position:-486px -43px;
}
#globalmenu li.menu01 a:hover{background-position:0px -193px;}
#globalmenu li.menu02 a:hover{background-position:-159px -193px;}
#globalmenu li.menu03 a:hover{background-position:-318px -193px;}
#globalmenu li.menu04 a:hover{background-position:-479px -193px;}

#globalmenu li.mpmenu01 a{
	width:128px;
	background-position:0px -245px;
}
#globalmenu li.mpmenu02 a{
	width:127px;
	background-position:-128px -245px;
}
#globalmenu li.mpmenu03 a{
	width:128px;
	background-position:-255px -245px;
}
#globalmenu li.mpmenu04 a{
	width:127px;
	background-position:-383px -245px;
}
#globalmenu li.mpmenu05 a{
	width:128px;
	background-position:-510px -245px;
}
#globalmenu li.mpmenu01 a:hover{background-position:0px -282px;}
#globalmenu li.mpmenu02 a:hover{background-position:-128px -282px;}
#globalmenu li.mpmenu03 a:hover{background-position:-255px -282px;}
#globalmenu li.mpmenu04 a:hover{background-position:-383px -282px;}
#globalmenu li.mpmenu05 a:hover{background-position:-510px -282px;}


/* ----------------------------------------
  2-4.コンテンツ
---------------------------------------- */
#contentbox{width:640px;}
#basebox{
	width:634px;
	float:left;
	font-size:12px;
}
.baseborder{
		background:#fff;
		border-left:1px solid;
		border-right:1px solid;
		border-bottom:1px solid;
		height:100%;
		width:100%;
	}
	.color-basic{color:#F94250;}
	.color-make{color:#0373A3;}
	.color-made{color:#E6E500;}
	.color-history{color:#1B9530;}
	.color-remember{color:#B02E88;}
	.color-custum{color:#B13F1A;}
	
	.text-black{color:#333;}
	.text-blue{color:#2EA1BC;}
	.text-blueglay{color:#4F69A4;}
	.text-green{color:#1B9530;}
	
#common .textbox01{
	padding-left:10px;
	border-left:2px solid #F94250;
	line-height:1.4;
	}
#make .textbox01{
	padding-left:10px;
	border-left:2px solid #0373A3;
	line-height:1.4;
	}
#made .textbox01{
	padding-left:10px;
	border-left:2px solid #CED402;
	line-height:1.4;
	}
#history .textbox01{
	padding-left:10px;
	border-left:2px solid #1B9530;
	line-height:1.4;
	}
#remember .textbox01{
	padding-left:10px;
	border-left:2px solid #B02E88;
	line-height:1.4;
	}
#custum .textbox01{
	padding-left:10px;
	border-left:2px solid #B13F1A;
	line-height:1.4;
	}

/* ----------------------------------------
  2-4.見出し
---------------------------------------- */
h2{}
#common h2{
	width:635px;
	/*height:32px;*/
	padding:1px 0px 0px 1px;
	display:block;
	clear:both;
	background:url(../img/common/h2.gif) no-repeat;}
#make h2{
	width:635px;
	height:32px;
	padding:1px 0px 0px 1px;
	display:block;
	clear:both;
	background:url(../img/make/h2.gif) no-repeat;
	}
#made h2{
	width:635px;
	height:32px;
	padding:1px 1px 0px 1px;
	display:block;
	clear:both;
	background:url(../img/made/h2.gif) no-repeat;
	}
#remember h2{
	width:635px;
	height:32px;
	padding:1px 1px 0px 1px;
	display:block;
	clear:both;
	background:url(../img/remember/h2.gif) no-repeat;
	}
#history h2{
	width:635px;
	height:31px;
	padding:1px 1px 0px 1px;
	display:block;
	clear:both;
	background:url(../img/history/h2.gif) no-repeat;
	}
#custum h2{
	width:635px;
	height:31px;
	padding:1px 1px 0px 1px;
	display:block;
	clear:both;
	background:url(../img/custom/h2.gif) no-repeat;
	}

h3{padding-left:25px;margin-bottom:10px;}
#common h3{background:url(../img/common/h3.gif) no-repeat center left;}
#make h3{background:url(../img/make/h3.gif) no-repeat center left;}

/* ----------------------------------------
  2-5.フッターコンテンツ
---------------------------------------- */
#footer{width:100%;height:45px;margin-top:20px;text-align:center;}

#footer ul{margin-bottom:6px;}

#footer ul{
	overflow:hidden;
	margin-left:-1px;
}

#footer ul li {  
    display: inline;  
	font-size:12px;
}  
#footer ul li:first-child,  
#footer ul li.firstChild {  
    margin-left: 0;  
    padding-left: 0;  
    border-left: 0;  
} 

#footer a{
	text-decoration:none;
	color:#333;
}

#footer a:hover{
	text-decoration:underline;
	color:#333;
}

address{color:#333;font-size:12px;}


/* ----------------------------------------
  2-6.リンク
---------------------------------------- */

a {color:#00A5DE;}
a:hover{color:#00A5DE;text-decoration:none;}

a.btn:hover{
	filter: alpha(opacity=50);
	-moz-opacity:0.50;
	opacity:0.50;
}

.keyword-gray span a{
	color:#999;
	text-decoration:none;
	line-height: 120%;
}
.keyword-gray span a:hover{color:#999; text-decoration:underline;}
.keyword-gray dd a{color:#999; text-decoration:none;}
.keyword-gray dd a:hover{color:#999; text-decoration:underline;}

.link-blueglay a{color:#4F69A4; text-decoration:none;}
.link-blueglay a:hover{color:#4F69A4; text-decoration:underline;}

/* ----------------------------------------
  2-8.見出し(hタグ）
---------------------------------------- */