@charset "UTF-8";
/* CSS Document */

/*--------Init----------*/
.clearfix:after {
  content: "　";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

ul{
	margin:0;
	padding:0;
}

.sub{
	text-indent:-1em;
	margin-left:1em;
	font-size:90%;
}

*{
	box-sizing:border-box;
}

img{
	border:0;
	vertical-align:bottom;
}

html{ height:100%;}


.mob{
	display:none;
}

/*--------Base---------*/
body{
	margin:0;
	height:100%;
	background-color:#000;
	color:#EEE;
	font-size:16px;
  line-height:1.7;
  font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
}

#wrapper{
	width:100%;
	min-height:100%;
	position:relative;
	background-image:url(../images/master_bg.jpg);
	background-repeat:repeat-x;
}

#wrapper:after{
	content:"";
	display:block;
	height:230px;
}


#content{
	width:100%;
	max-width:1000px;
	margin:0 auto;
}

header{
	width:100%;
	position:relative;
}


footer{
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	/*height:230px;*/
}

footer #footer_object{
	width:100%;
	position:absolute;
	bottom:0;
	left:0;
}

footer #banners{
	max-width:1000px;
	margin:0 auto;
	text-align:center;
}

footer #banners img{
	width:24%;
	max-width:242px;
}

footer #copyright{
	width:100%;
	max-width:1000px;
	display:block;
	margin:0 auto;
}



/*-------topics-----*/
#topics{
	/*margin-top:2% !important;*/
}

#topic{
	width:100%;
	min-height:31px;
	background-color:#b09c46;
  background:linear-gradient(to bottom,#d0be69,#867732);
	margin:0 auto;
	padding:3px;
}

#topic #p-topics{
	width:10%;
	height:31px;
	max-width:87px;
	float:left;
	line-height:31px;
  text-align:center;
  text-shadow:1px 1px 2px rgba(0,0,0,0.7);
}

#topic #p-topics img{
	width:100%;
	margin-top:4%;
}


#topic #text{
	width:86%;
	height:31px;
	line-height:31px;
	overflow:hidden;
	background-color:#FFF;
	float:left;
	border-radius:3px;
}

#topic #text a{
  font-weight:bold;
  color:#900;
}

#topic #text span{
	white-space:nowrap;
	color:#030;
}

#topic #bn-opener{
	width:3%;
	height:31px;
	margin-left:1%;
	text-align:center;
	line-height:31px;
	color:#FFF;
	float:left;
	cursor:pointer;
  text-shadow:1px 1px 2px rgba(0,0,0,0.7);
}

#topic #topic-backnumber{
	width:100%;
	margin:8px auto;
	display:none;
}

#topic #topic-backnumber table{
	border-collapse:collapse;
	width:100%;
	font-size:80%;
}

#topic #topic-backnumber td{
	vertical-align:top;
	color:#FFF;
	padding:5px;
	border:1px #5E9290 dotted;
	border-width:1px 0 0 0;
}

#topic #topic-backnumber td a{
	color:#900;
}


/*-----nav----*/
header nav{
	display:block;
	width:100%;
	margin:0 auto;
	margin-top:0;
}

header nav a{
	margin:0;
	padding:0;
	position:relative;
	/*vertical-align:top;*/
}

header nav img.menu{
	margin:0;
	width:25%;
  width:16.666%;
}

/*header nav .check{
	position:relative;
}
header nav .check:after{
	content:url(../images/common/menu_check.png);
	display:block;
	position:absolute;
	bottom:0;
	right:0;
	margin-top:-1%;
	z-index:99;
}*/

header nav img.checkMark{
	position:absolute;
	bottom:4px;
	right:0;
	z-index:99;
  max-width: 61px;
  width: 40%;
}

/*----etc-----*/
a.zoom{
	display:inline-block;
	position:relative;
	overflow:visible;
}

a.zoom:after{
	content:"";
	display:inline-block;
	background-image:url(../images/common/icon_zoom.png);
	background-repeat:no-repeat;
	background-size:100%;
	background-position:bottom;
	position:absolute;
	top:2%;
	bottom:3%;
	right:2%;
	width:10%;
	z-index:99;
}


.border{
	width:100%;
	display:block;
	margin:4% auto;
	margin-top:1%;
}

#pagetop{
	position:fixed;
	right:1%;
	bottom:1%;
	cursor:pointer;
	max-width:108px;
  z-index:999999;
}


#snsapi{
	width:100%;
	max-width:1000px;
	margin:0 auto;
}


.api{
	margin-bottom:2%;
	margin-top:-3%;
	float:right;
	margin-right:1.5%;
}

#snsapi iframe{
	width:100px !important;
	overflow:hidden;
}



/*-------content-------*/

#content_header{
	display:block;
	margin:0 auto;
	max-width:614px;
	width:100%;
}

section{
	width:95%;
	margin:0 auto;
	padding:1%;
}

#content_lead{
	display:block;
	width:92%;
	max-width:799px;
	margin:5% auto;
}

.sectionend{
	margin-top:4%;
	margin-left:5%;
	color:#999;
	font-size:80%;
}


/*------submenu----*/
#submenu_area{
	width:100%;
	margin:5% auto;
	margin-top:6%;
	padding-top:2%;
	box-sizing:border-box;
	text-align:center;

	border:1px #524e3b solid;
	border-width:0 0 1px 0;

	background:linear-gradient(to bottom,rgba(155,155,155,0),rgba(239,232,188,0.2));
}

#submenu_area a,
#submenu_area span{
	display:inline-block;
	width:18%;
	margin:0 0.3%;
	padding:1% 0;
	text-decoration:none;
	border:1px #777 solid;
	border-width:0 0 2px 0;
	box-sizing:border-box;
	color:#eee;
	position:relative;
	text-shadow:1px 1px 3px rgba(0,0,0,0.7),-1px 1px 3px rgba(0,0,0,0.7);
	font-size:100%;
}

#submenu_area span{
	border-color:transparent;
	color:#444;
}
#submenu_area .current{
	border-color:#eae9be;
	color:#eae9be;
	background:linear-gradient(to bottom,rgba(155,155,155,0),rgba(239,232,188,0.2));
}

#submenu_area .current:before{
	content:"";
	display:block;
	width:0;
	height:0;
	border-width:5px;
	border-color:#eae9be transparent transparent transparent;
	border-style:solid;
	position:absolute;
	bottom:-14px;
	left:50%;
	margin-left:-5px;

	border-color:transparent transparent #eae9be transparent;
	bottom:0px;
}


#submenu_area .new:after{
	/*content:url(../images/system/submenu_new.png);
	position:absolute;
	top:-25px;
	left:50%;
	margin-left:-33px;*/

	content:"NEW";
	display:block;
	position:absolute;
	width:40px;
	top:-20%;
	left:50%;
	margin-left:-20px;

	padding:0.5% 3%;
	vertical-align:3px;
	background-color:#F00;
	font-size:50%;
	text-shadow:none;

	box-sizing:border-box;
}

#submenu_area .update:after{
	/*content:url(../images/system/submenu_update.png);
	position:absolute;
	top:-25px;
	left:50%;
	margin-left:-33px;*/

	content:"UPDATE";
	display:block;
	position:absolute;
	width:60px;
	top:-20%;
	left:50%;
	margin-left:-30px;

	padding:0.5% 3%;
	vertical-align:3px;
	background-color:#F50;
	font-size:50%;
	text-shadow:none;

	box-sizing:border-box;
}

#submenu_area #submenu_border{
	height:1px;
	background-color:#524e3b;
	width:100%;
	margin-bottom:2%;
}




@media screen and (max-width:1000px){
	#wrapper:after{
		height:11px;
		padding-top:25%;
	}

	.api{
		margin-top:0%;
	}
	#pagetop{
		width:15%;
	}
}

@media screen and (max-width:640px){
	#submenu_area {
		margin-top:8%;
	}

	#submenu_area a,
	#submenu_area span{
		width:23%;
		font-size:100%;
		height:35px;
		padding-top:10px;
	}

}

@media screen and (max-width:600px){
  #submenu_area a,
	#submenu_area span{
		font-size:80%;
	}
}
@media screen and (max-width:500px){
	.mob{
		display:inline;
	}
	.pc{
		display:none;
	}

	body{
		font-size:14px;
	}

	#wrapper:after{
		height:10px;
		padding-top:25%;
	}


  header nav img.menu{
    width:33.333%;
	}

	/*header nav img.menu{
		width:50%;
	}*/

	section{
		width:100%;
	}


	#button_preorder{
		width:100%;
		display:block;
		margin:2% auto;
		float:none;
	}

	#banner_sangokushi30th{
		margin:5% auto;
	}

	.api{
		margin-top:3.5%;
	}
}

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