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

.clearfix {
  min-height: 1px;
}
*{
  box-sizing: border-box;
}

h1,h2{
  margin:0;
  padding:0;
}

.mb{
  display:none;
}

/*---sns---*/

#snsapi{
/*	position:absolute;
	padding-top:1.7%;
  top:30%;
  left:50%;*/
	width:300px;
  margin:0 auto;
  margin-top:0;
  padding-top:55%;
}

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

#snsapi .api{
	/*float:right;
	margin-right:1.5%;*/
  display:inline-block;
}

#snsapi iframe{
	width:70px !important;
	overflow:hidden;
  margin:0 10px;
}

/*----base---*/
html,body{
  margin:0;
  height:100%;
}
body{
  background-image:url(../images/common/master_bg.jpg);
  font-size:14px;
}

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

#contents{
  width:100%;
  max-width:1000px;
  margin:0 auto;
  padding-bottom:5%;


  background-image:url(../images/top/titlelogo.jpg);
  background-size:100% auto;
  background-repeat: no-repeat;
  background-position: top;

  position:relative;
}

h1{
  display:none;
}
h1 img{
  width:100%;
  margin-bottom:-7%;
}

.sub{
  color:#555;
  font-size:80%;
  text-indent:-1em;
  margin-left:1em;
}

#spec,main,section#banners{
  width:100%;
  margin:0 auto;
}

#link_userspage{
  position: absolute;
  top:40px;
  left:0%;
  width:100%;
  z-index:99;
}

#link_userspage div{
  width:100%;
  max-width:950px;
  margin:0 auto;
  text-align: right;
  padding-right:1%;
}

#link_userspage a{
  display:inline-block;
  padding:0.5% 1%;
  background-color:rgba(255,255,255,0.8);
  border:1px #FFF solid;
  text-decoration: none;
  text-align:center;
  color:#111;
  font-weight:bold;
  border-radius:5px;
}

@media screen and (max-width:640px){
  #link_userspage a{
    font-size:60%;
  }
}

/*----Order----*/
#order{
  display:none;
  width:100%;
  position:fixed;
  top:34px;
  left:0;
  z-index:999;
}

#order #order_box{
  max-width:1000px;
  width:100%;
  margin:0 auto;
  background-color: rgba(0,0,0,0.9);
  padding:10px;
  border-radius:0 0 12px 12px;
}

#order table{
  width:100%;
  max-width:950px;
  margin:1% auto;
  width:98%;
}

#order table.mb{
  margin-top:3%;
}
#order table th{
  color:#FFF;
  text-align: left;
}

#order table.pc td{
  width:23%;
}
#order table.mb td{
  width:33%;
}

#order table td a{
  display:inline-block;
  width:100%;
  padding:3% 2%;
  background-color:#EEE;
  background:linear-gradient(to bottom,#FFF,#CCC);
  text-align: center;
  color:#222;
  text-decoration: none;
  border-radius:2px;
}

#order table.pc tr.margin hr{
  height:1px;
  border:1px #444 dotted;
  border-width:1px 0 0 0;
}


#order table tr.margin td{
  height:10px;
  padding:7px 0;
}

#order #order_close{
  width:20%;
  max-width:100px;
  padding:0.1%;
  color:#777;
  border:1px #999 solid;
  display: block;
  margin:2% auto;
  margin-top:4%;
  text-align: center;
  text-decoration: none;
  background-color:rgba(0,0,0,0.8);
}

@media screen and (max-width:1000px){
  #order #order_box{
    border-radius:0;
  }
}

@media screen and (max-width:480px){
  #order table{
    font-size:80%;
  }
  #order table td a{
    padding:10% 2%;
  }
}


/*--info_update----*/
#info_update{
  width:100%;
  margin:0 auto;
  border:1px #FFF solid;
  padding:1%;
  background-color:rgba(255,255,255,0.8);
  color:#111;
  margin-top:2%;
}
/*-----Menu---*/
nav{
  display:block;
  margin:0 auto;
  width:95%;
  margin-top:3%;
}

nav ul{
  list-style: none;
  padding:0;
  margin:0;
}
nav ul li{
  display:inline-block;
  width:32.5%;
  padding:1.5%;
  margin:0.2%;
  text-align:center;
  background-color:#EEE;
  background:linear-gradient(to bottom,#DDD,#FFF);
  border:1px #999 solid;
  border-radius:6px;
  text-shadow:1px 1px 2px #FFF;
  font-weight:bold;
  color:#111;
  cursor:pointer;
  position:relative;
}

nav ul li.current{
  padding-bottom:2.5%;
  border-width:1px 1px 0 1px;
  border-radius:6px 6px 0 0;
  background-color:#FFD;
  background:linear-gradient(to bottom,#FFD,#FFF);
  color:#911;
}

nav ul li .update{
  display:block;
  width:60px;
  text-align:center;
  position:absolute;
  background-color:#F00;
  color:#FFF;
  font-size:80%;
  font-weight:normal;
  text-shadow:none;
  padding:1% 0;
  top:-50%;
  left:50%;
  margin-left:-30px;
}

nav ul li .update:after{
  content:"";
  display:block;
  width:0;
  height:0;
  border:5px #F00 solid;
  border-color:#F00 transparent transparent transparent;
  position: absolute;
  bottom:-10px;
  left:50%;
  margin-left:-5px;
}




/*----Twitter Area---*/
#twitter_area{
  margin-top:3%;
}
#twitter_area #info_twitter_body{
  float:left;
  width:47%;
  font-size:120%;
  line-height:1.5;
  color:#6e6528;
}
#twitter_area #info_twitter_body h4{
  margin-top: -7%;
  margin-bottom:1%;
}
#twitter_area #info_twitter_body h4 img{width:100%;max-width:586px;}
#twitter_area #info_twitter_body a img{width:100%;max-width:586px;margin:3% auto;margin-top:6%;display:block;}

#twitter_area iframe{
  width:50% !important;
  float:right;
  margin-left:2% !important;
}

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

  #twitter_area #info_twitter_body,
  #twitter_area iframe{
    float:none !important;
    width:100% !important;
    margin-left:0 !important;
  }
  #twitter_area #info_twitter_body a img{margin:3% auto;margin-bottom:6%;}

}


/*----contents----*/
main{
  background-color:#FFF;
  padding:4%;
  border-radius:10px;
  box-shadow:0px 0px 5px rgba(0,0,0,0.7) inset,3px 3px 0px rgba(0,0,0,0.2);
  display:block;
  position:relative;
  z-index:99;
}

main .sub{
/*  text-align:right;
  margin-top: 2%;*/
}

/*-----outline----*/
main #catch{
  width:100%;
  margin-top:-2%;
}
#main_contents{
  position:relative;
  /*padding-bottom:6%;*/
  margin-top:-1px;
}

#main_contents h2{
  color:#60551b;
  border:5px #60551b solid;
  border-width:0 0 0 8px;
  padding:1%;
  padding-left:1.5%;
  font-size:150%;
  margin-top:3%;
}
#main_contents h2:first-child{
  margin-top: 0;
}

#pv img{
  cursor:pointer;
}

#movie{
  position:relative;
  width:100%;
  padding-top:56.25%;
}
#movie iframe{
  width:100%;
  height: 100%;
  position:absolute;
  top:0;
  left:0;
}


#screenshot div,
#screenshot img{
  width:100%;
}
#screenshot p{
  margin:0;
  padding:2%;
  font-weight:bold;
  font-size:140%;
  color:#FFF;
  text-align:center;
}

.bx-wrapper, .bx-viewport{
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  left:0 !important;
}
.bx-viewport{background:#000 !important;}
.bx-wrapper .bx-prev,
.bx-wrapper .bx-next{
  background-image:url(../images/top/slider_button.png) !important;
  background-repeat:no-repeat !important;
  width:25px !important;
  height:112px !important;
  margin-top:-56px !important;
}

.bx-wrapper .bx-prev{
  background-position:0 0 !important;
  left:-25px !important;
}
.bx-wrapper .bx-next{
  background-position:-25px 0 !important;
  right:-25px !important;
}


.bx-wrapper .bx-pager.bx-default-pager a{
	width:100% !important;
	border-radius:0 !important;
	border:1px #888 solid !important;
	background-color:none !important;
	background:linear-gradient(to bottom,#444,#111) !important;
	margin:0 !important;
	height:auto !important;
	text-indent:inherit !important;
	text-decoration:none;
	color:#FFF;
	font-weight:normal;
	padding:3px;
}
.bx-wrapper .bx-pager.bx-default-pager a.active{
	background-color:#999 !important;
  background:linear-gradient(to bottom,#FFF,#f5f5d4)!important;
  border-color:#900 !important;
  color:#900 !important;
}

.bx-wrapper .bx-pager .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-ite{
	width:5% !important;
  border-radius:50% !important;
	position:relative;
	margin:0 0.2%;
}

.bx-wrapper .bx-pager.bx-default-pager a.active:after{
	content:"";
	width:0;
	height:0;
	border-width:5px;
	border-color:transparent transparent #900 transparent;
	border-style:solid;
	position:absolute;
	top:-10px;
	left:50%;
	margin-left:-5px;
}
/*----spec---*/
#spec{
  margin-top:13%;/*-9%;*/
  margin-bottom:5%;
  position:relative;
  z-index:999;
}

#spec table{
  border-collapse: collapse;
  width:100%;
  background-color:#FFF;
  /*float:left;*/
}

#spec table th,#spec table td{
  border:1px #999 solid;
  padding:1%;
}
#spec table th{
  width:12%;
  background-color:#f7f0dc;
  white-space: nowrap;
}
#spec table.mb th{
  width:auto;
}

.message_steam{
  color:#900;
  border:1px #900 solid;
  padding:1.5%;
  background-color:rgb(249, 224, 224);
  width:100%;
  margin-top:1.5%;
}

#info_freeplay{
  width:100%;
  /*float:right;*/
}

/*-----spec_detail---*/

table#spec_detail_list{
  border-collapse: collapse;
  width:100%;
  margin-bottom:3%;
}

table#spec_detail_list th,table#spec_detail_list td{
  border:1px #DDD solid;
  padding:1% 2%;
}
table#spec_detail_list th{
  width:20%;
  background-color:#f7f0dc;
  white-space:nowrap;
}

/*-----dlc---*/
#categorys{
  width:20%;
  float:left;
}

h3{
  padding:0;
  margin:0;
  color:#65562b;
  border:5px #65562b solid;
  border-width:0 0 0 5px;
  padding:3px;
  font-size:150%;
  padding-left:5px;
  margin-top:3%;
}

table.dlc_list{
  border-collapse: collapse;
  margin-top:0.2%;
  margin-bottom:3%;
  width:100%;
  /*float:right;*/
}

table.dlc_list th,table.dlc_list td{
  background-color:#fdfee3;
  border:1px #AFA896 solid;
}

table.dlc_list th{
  padding:1% 1.5%;
  border-width:1px 1px 0 1px;
}

table.dlc_list th.new:after{
  content:"NEW";
  display:inline-block;
  background-color:#F00;
  padding:0.5% 2%;
  margin-left:2%;
  color:#FF0;
  font-size:80%;
}

table.dlc_list td{
  padding:0;
  border-width:0 1px 1px 1px;
}

table.dlc_list tr th:first-child{
  width:75%;
  text-align:left;
  font-size:120%;
  color:#61530b;
}

table.dlc_list tr th.price{
  color:#FFF;
  font-size:100%;
  white-space: nowrap;
  width:25%;
}

table.dlc_list tr th.price a{
  display:inline;
  margin:1% auto;
  padding:3% 5%;
  background-color:#DDD;
  background:linear-gradient(to bottom,#FFF,#CCC);
  color:#222;
  text-shadow:1px 1px 2px #FFF;
  text-decoration:none;
  font-size:90%;
  margin-top: 3%;
  margin-left:4%;
  border-radius:5px;
}

table.dlc_list tr th.charge{
  background-color:#cc5451;
  background:linear-gradient(to bottom,#9b0b0b,#cc0e0e);
}

table.dlc_list tr th.free{
  background-color:rgb(53, 139, 209);
  background:linear-gradient(to bottom,#0e4187,#0e5ecc);
}


table.dlc_list .dlc_detail{
  padding:1.5% 1%;
  width:97%;
  border:1px #EFEAE0 solid;
  margin:1% auto;
  background-color:#FFF;
  border-radius: 4px;
  line-height:1.5;
}

/*
table.dlc_list .dlc_detail div{
  display:none;
}

table.dlc_list .dlc_detail a{
  display: block;
  width:100%;
  padding:0% 5%;
  color:#999;
  text-decoration:none;
  margin:0 auto;
  text-align:center;
}
table.dlc_list .dlc_detail a.detail :before,
table.dlc_list .dlc_detail a.detail :after{
  content:"";
  width:0;
  height:0;
  margin:0 auto;
  border-width:4px 7px;
  border-style: solid;
}

table.dlc_list .dlc_detail a.open:after{
  display:block;
  border-color:#999 transparent transparent transparent;
}

table.dlc_list .dlc_detail a.open:before{
  display:none;
}

table.dlc_list .dlc_detail a.close:before{
  display:block;
  border-color:transparent transparent #999 transparent;
}

table.dlc_list .dlc_detail a.close:after{
  display:none;
}
*/

table.dlc_list td .imgbox{
  width:32.5%;
  margin:1% 0.3%;
  margin-top:2%;
  display:inline-block;
  font-size:80%;
  text-align:center;
  cursor:pointer;
}
table.dlc_list td img{
  width:100%;
  margin-bottom:0.2%;
}


table.dlc_list tr.margin td{
  background-color:#FFF;
  border-width:0;
  height:10px;
  padding:0;
}

.attention{
  border:1px #900 solid;
  padding:1%;
  color:#900;
  font-weight:bold;
  width:90%;
  margin:2% auto;
  background-color:#FDD;
}

#manual{
  border:1px #DDD solid;
  padding:1%;
  padding-top:0;
}

#manual h4{
  margin:0;
  background-color:#DDD;
  padding:0.5% 2%;
  display:inline-block;
  margin-left:-1%;
}

@media screen and (max-width:640px){
  table.dlc_list tr th:first-child{
    width:70%;
    font-size:100%;
  }

  table.dlc_list tr th.price{
    width:30%;
  }
  table.dlc_list tr th.price a{
    display:block;
    padding:2% 5%;
    width:99.5%;
    margin-left:0;
  }
}

/*----Banners---*/
section#banners{
  margin-top:3%;
}
section#banners img{
  width:48%;
  margin:1%;
}
section#banners #banner_sangokushi13_privilege{
  width:98%;
}

section#banners #banner_sangokushi13{
  float:left;
}
section#banners #banner_sangokushi30th{
  float:right;
}



/*---Foooter---*/
footer{
  position:absolute;
  width:100%;
  background-image:url(../images/common/footer_bg.jpg);
  background-repeat:repeat-x;
  background-position:top center;
  max-height:302px;
}
footer #footer_area{
  width:98%;
  max-width:950px;
  margin:0 auto;
}

footer #footer_area #footer_elements{
  padding-top:20%;
}

#copyright{
  display:block;
  width:70%;
  max-width:909px;
  margin:2% auto;
}

#footer_links{
  margin-top:-17%;
  margin-bottom:2%;
  text-align:center;
}

#footer_links img{
  width:24%;
}

@media screen and (max-width:1000px){
  #wrapper{
    background:none;
  }

  main,
  section#banners{
    width:95%;
  }
  nav{
    width:90%;
  }

  footer{
    background-position:top center;
  }
}

@media screen and (max-width:760px){
  table.mb{
    display:table;
  }
  table.pc{
    display:none;
  }
}
@media screen and (max-width:640px){
  nav ul li{
    width:25%;
  }
  nav ul li:first-child{
    width:47%;
  }
  nav ul li{
    font-size:80%;
  }
  main h2{
    border-width:0 0 0 5px;
    padding-left:2%;
    font-size:120%;
  }

  #screenshot p{
    font-size:100%;
  }
}

@media screen and (max-width:480px){
  #spec{
    margin-top:15%;
  }
}

@media screen and (max-width:480px){
  #contents{
    padding-bottom:10%;
  }
  section#banners{
    width:92%;
  }
  /*section#banners img{
    width:100%;
    margin:1% 0;
    float:none;
  }*/

  .bx-wrapper .bx-pager .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-ite{
  	width:8% !important;
  }
}