@charset "utf-8";
/* **************************************************************** *
 * @desc@ グローバルヘッダ
 * @edit@ 2016/08/22
 * **************************************************************** */

/* ================================================================ *
 * @desc@ Header
 * ================================================================ */
#header{
	margin: 0 auto;
	padding:0;
	width:960px;
}
#header a:link {
	color: #03F;
}
#header a:visited {
	color: #743399;
}
#header a:active,
#header a:hover {
	color: #ff4b33;
}
#header h1#logo{
	float:left;
	margin:0;
	padding:10px 0 0 0;
	width:210px;
}
#header h1#logo img{display:block;border:none;}

#header #menuside{
	float:right;
	padding:14px 0 0 0;
	width:750px;
}
#header #gmenu-sub{
	padding-bottom:2px;
	height:16px;
	text-align:right;
}
#header #gmenu-sub ul{
	list-style:none;
	margin:0;
	padding:0;
}
#header #gmenu-sub ul li{
	display:inline;
	margin:0;
	padding:0;
	font-size:1.2rem;
}
#header #gmenu-sub ul li img{
	vertical-align:bottom;
}
#header #gmenu{
	margin:4px 0 8px auto;
	border-radius:5px;
	height:32px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
}
#header #gmenu ul{
	margin:0 auto;
	padding:0 4px;
	text-align:right;
}
#header #gmenu li{
	display:inline;
	margin:0;
	padding:0;
	color:#FFF;
	font-size:1.4rem;
	font-weight:bold;
}
#header #gmenu li img{
	vertical-align:top;
}
#hdsearch{
	clear:both;
	margin:4px 0 10px 0;
	border-top:1px solid #DDD;
	border-bottom:1px solid #DDD;
	height:30px;
	background:#EEE url(/img/header/bg_searchbar.png) repeat-x left bottom;
}
#hdsearch input{
	color:#000;
	font-size:1.2rem;
	line-height:1.4em;
}
#hdsearch input[type="text"]{
	padding:2px;
	background:#f9f9f9;
	border:1px solid #ccc;
	box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
	-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
	-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
}
#hdscontent{
	margin:0 auto;
	width:960px;
}
#hdscontent #searchbox{
	width:360px;
	margin:4px 0 0 auto;
	font-size:1.1rem;
	text-align:right;
}
#hdscontent .sinput{
	width:180px;
	font-size:1rem;
}

/* ================================================================ *
 * @desc@ GlobalHeader
 * ================================================================ */
#GlobalHeader{
	margin:0;
	border-bottom:1px solid #ddd;
	padding:0;
	width:100%;
	background:#fff;
}
#GlobalHeader a:link{
	color:#03F;
}
#GlobalHeader a:visited{
	color:#743399;
}
#GlobalHeader a:active,
#GlobalHeader a:hover{
	color:#ff4b33;
}
#GlobalHeader .mainHeader{
	display:table;
	margin:0 auto;
	padding:0;
	width:960px;
}
#GlobalHeader .mainHeader h1{
	display:table-cell;
	margin:0;
	padding:10px 0;
	width:210px;
	vertical-align:top;
}
#GlobalHeader h1 img{
	outline:none;
	display:block;
	margin:0;
	border:none;
	max-width:100%;
}

#GlobalHeader .menuBox{
	display:table-cell;
	margin:0;
	padding:14px 0 0;
	vertical-align:top;
}
#GlobalHeader .subMenu{
	margin:0;
	padding:0 0 2px;
	height:16px;
	text-align:right;
}
#GlobalHeader .subMenu:after{
	content:" ";clear:both;overflow:hidden;display:block;
	visibility:hidden;margin-bottom:-1px;height:1px;
	font-size:1px;line-height:1px;
}
#GlobalHeader .subMenu ul{
	float:right;
	list-style:none;
	margin:0;
	border-left:1px solid #000;
	padding:0;
}
#GlobalHeader .subMenu ul:after{
	content:" ";clear:both;overflow:hidden;display:block;
	visibility:hidden;margin-bottom:-1px;height:1px;
	font-size:1px;line-height:1px;
}
#GlobalHeader .subMenu li{
	float:left;
	margin:0;
	border-right:1px solid #000;
	padding:0;
	font-size:1.2rem;
}
#GlobalHeader .subMenu li a{
	display:inline-block;
	margin:0;
	padding:0 6px;
}
#GlobalHeader .spMenu{
	display:none;
}
#GlobalHeader .mainMenu{
	margin:4px 0 8px auto;
}
#GlobalHeader .mainMenu:after{
	content:" ";clear:both;overflow:hidden;display:block;
	visibility:hidden;margin-bottom:-1px;height:1px;
	font-size:1px;line-height:1px;
}
#GlobalHeader .mainMenu ul{
	overflow:hidden;
	float:right;
	list-style:none;
	margin:0;
	border-radius:5px;
	padding:0;
	text-align:right;
}
#GlobalHeader .mainMenu li{
	float:left;
	margin:0;
	padding:0;
	height:32px;
	background-color:#000;
	background-repeat:no-repeat;
	background-position:0 0;
}
#GlobalHeader .mainMenu a{
	overflow:hidden;
	outline:none;
	display:block;
	margin:0;
	padding:0;
	height:32px;
	background-color:transparent;
	background-repeat:no-repeat;
	background-position:0 0;
}
#GlobalHeader .mainMenu a span{
	overflow:hidden;
	outline:none;
	display:block;
	width:1px;
	height:1px;
	font-size:1px;
	line-height:1px;
	text-indent:-9999px;
}
#GlobalHeader .mainMenu li:nth-child(1){
	width:63px;
	background-image:url(../img/common/header/menu/gm_top.png);
}
#GlobalHeader .mainMenu li:nth-child(1) a:hover{
	background-image:url(../img/common/header/menu/gm_top_hv.png);
}
#GlobalHeader .mainMenu li:nth-child(2){
	width:147px;
	background-image:url(../img/common/header/menu/gm_cardgame.png);
}
#GlobalHeader .mainMenu li:nth-child(2) a:hover{
	background-image:url(../img/common/header/menu/gm_cardgame_hv.png);
}
#GlobalHeader .mainMenu li:nth-child(3){
	width:52px;
	background-image:url(../img/common/header/menu/gm_cd.png);
}
#GlobalHeader .mainMenu li:nth-child(3) a:hover{
	background-image:url(../img/common/header/menu/gm_cd_hv.png);
}
#GlobalHeader .mainMenu li:nth-child(4){
	width:66px;
	background-image:url(../img/common/header/menu/gm_game.png);
}
#GlobalHeader .mainMenu li:nth-child(4) a:hover{
	background-image:url(../img/common/header/menu/gm_game_hv.png);
}
#GlobalHeader .mainMenu li:nth-child(5){
	width:59px;
	background-image:url(../img/common/header/menu/gm_goods.png);
}
#GlobalHeader .mainMenu li:nth-child(5) a:hover{
	background-image:url(../img/common/header/menu/gm_goods_hv.png);
}
#GlobalHeader .mainMenu li:nth-child(6){
	width:82px;
	background-image:url(../img/common/header/menu/gm_hobby.png);
}
#GlobalHeader .mainMenu li:nth-child(6) a:hover{
	background-image:url(../img/common/header/menu/gm_hobby_hv.png);
}
#GlobalHeader .mainMenu li:nth-child(7){
	width:127px;
	background-image:url(../img/common/header/menu/gm_event.png);
}
#GlobalHeader .mainMenu li:nth-child(7) a:hover{
	background-image:url(../img/common/header/menu/gm_event_hv.png);
}
#GlobalHeader .mainMenu li:nth-child(8){
	width:114px;
	background-image:url(../img/common/header/menu/gm_girls.png);
}
#GlobalHeader .mainMenu li:nth-child(8) a:hover{
	background-image:url(../img/common/header/menu/gm_girls_hv.png);
}

#GlobalHeader .searchBox{
	margin:4px 0 0;
	border-top:1px solid #ddd;
	border-bottom:1px solid #fff;
	padding:4px 0;
	background:#eee;
	background:-webkit-linear-gradient(
		top,
		#fff 0%,
		#eee 80%
	);
	background:-moz-linear-gradient(
		top,
		#fff 0%,
		#eee 80%
	);
	background:linear-gradient(
		to bottom,
		#fff 0%,
		#eee 80%
	);
}
#GlobalHeader .searchBox>div{
	margin:0 auto;
	width:960px;
}
#GlobalHeader .searchBox input[type="submit"]{
	margin:0;
	padding:3px 6px;
	color:#000;
	font-size:1.2rem;
	line-height:1.0em;
}
#GlobalHeader .searchBox input[type="text"]{
	margin:0;
	border:1px solid #ccc;
	padding:1px 2px;
	width:180px;
	background:#f9f9f9;
	color:#000;
	font-size:1.2rem;
	line-height:1.2em;
	box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
	-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
	-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
}
#GlobalHeader .searchBox>div>div{
	margin:0 0 0 auto;
	width:360px;
	font-size:1.1rem;
	text-align:right;
}
/* ---------------------------------------------------------------- *
 * @desc@ スマホ表示
 * ---------------------------------------------------------------- */
@media screen and (max-width:640px){
	#GlobalHeader .mainHeader{
		display:block;
		width:auto;
	}
	#GlobalHeader .mainHeader h1{
		display:block;
		padding:10px 0 2px;
		width:auto;
		text-align:center;
	}
	#GlobalHeader .mainHeader h1 img{
		display:inline;
		width:auto;
		height:32px;
	}
	#GlobalHeader .menuBox{
		padding:0;
	}
	#GlobalHeader .subMenu{
		display:none;
	}
	#GlobalHeader .spMenu{
		display:block;
		position:fixed;
		left:0;
		top:5px;
		z-index:200000;
		margin:0;
		padding:6px 8px;
		width:30px;
		border-radius:0 3px 3px 0/0 3px 3px 0;
		background:#222;
		background:-webkit-linear-gradient(
			top,
			#444 0%,
			#222 100%
		);
		background:-moz-linear-gradient(
			top,
			#444 0%,
			#222 100%
		);
		background:linear-gradient(
			to bottom,
			#444 0%,
			#222 100%
		);
		color:#fff;
		text-align:center;
		cursor:pointer;
		transition:all 0.4s ease-out;
	}
	#GlobalHeader .spMenu img{
		display:block;
	}
	#GlobalHeader .mainMenu{
		position:fixed;
		left:-16em;
		top:5px;
		z-index:200000;
		margin:0;
		font-size:1.1rem;
		transition:all 0.4s ease-out;
	}
	#GlobalHeader .mainMenu ul{
		float:none;
		margin:0;
		border-radius:0 3px 3px 0/0 3px 3px 0;
		background:#222;
		background:-webkit-linear-gradient(
			top,
			#444 0%,
			#222 100%
		);
		background:-moz-linear-gradient(
			top,
			#444 0%,
			#222 100%
		);
		background:linear-gradient(
			to bottom,
			#444 0%,
			#222 100%
		);
		text-align:left;
	}
	#GlobalHeader .mainMenu li{
		float:none;
		border-bottom:1px solid #444;
		background:none;
		height:auto;
	}
	#GlobalHeader .mainMenu li:last-child{
		border-bottom:none;
	}
	#GlobalHeader .mainMenu a{
		padding:8px 1.5em 8px 1em;
		height:auto;
		color:#fff;
		font-weight:bold;
		text-decoration:none;
		text-shadow:-1px -1px 2px rgba(0,0,0,0.6);
		transition:0.3s all;
	}
	#GlobalHeader .mainMenu a:hover{
		background:rgba(255,255,255,0.3);
		color:#fff;
		box-shadow:0 0 20px rgba(255,255,255,0.4);
	}
	#GlobalHeader .mainMenu a span{
		width:auto;
		height:auto;
		font-size:1.1rem;
		line-height:1em;
		text-indent:0;
	}
	#GlobalHeader .mainMenu li:nth-child(1),
	#GlobalHeader .mainMenu li:nth-child(1) a:hover,
	#GlobalHeader .mainMenu li:nth-child(2),
	#GlobalHeader .mainMenu li:nth-child(2) a:hover,
	#GlobalHeader .mainMenu li:nth-child(3),
	#GlobalHeader .mainMenu li:nth-child(3) a:hover,
	#GlobalHeader .mainMenu li:nth-child(4),
	#GlobalHeader .mainMenu li:nth-child(4) a:hover,
	#GlobalHeader .mainMenu li:nth-child(5),
	#GlobalHeader .mainMenu li:nth-child(5) a:hover,
	#GlobalHeader .mainMenu li:nth-child(6),
	#GlobalHeader .mainMenu li:nth-child(6) a:hover,
	#GlobalHeader .mainMenu li:nth-child(7),
	#GlobalHeader .mainMenu li:nth-child(7) a:hover,
	#GlobalHeader .mainMenu li:nth-child(8),
	#GlobalHeader .mainMenu li:nth-child(8) a:hover{
		width:auto;
		background-image:none;
	}

	#GlobalHeader .searchBox>div{
		margin:0;
		padding-right:5px;
		width:auto;
	}
	#GlobalHeader .searchBox input[type="text"]{
		width:100px;
	}
	#GlobalHeader .searchBox>div>div{
		width:auto;
	}
}