/*English Font*/
body,
#menu #sitename,
#chara_info #catch div{
  font-family: Arial, Helvetica, sans-serif !important;
}

.check:after,
#menu nav ul li.check:after,
#mobile_menu a.check:after{
  content:"UPDATE" !important;
}

#content .screens:after{
  content:"*Screens shown are from a development version of the game." !important;
}
/*English Font*/


@import url(//fonts.googleapis.com/earlyaccess/notosansjp.css);
/*@import url(https://fonts.googleapis.com/earlyaccess/sawarabimincho.css);*/

*{box-sizing: border-box;}
img{border-width:0;}

html{height:100%;}
body{
  margin:0;
  background-color:#000;
  height:100%;
  font-size:17px;
  /*font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/
  font-family:"Noto Sans JP","ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
  position:relative;
}


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

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

.oneword{
  display:inline-block;
}

.youtube{
  display:block;
  width:100%;
  padding-top:56.25%;
  position:relative;
}
.youtube iframe{
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
}


#lang_cover{
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background-color:rgba(0,0,0,0.9);
  z-index:200;
}

#lang_cover #lang_select{
  position:absolute;
  top:50%;
  left:50%;
  width:80%;
  transform:translate(-50%,-50%);
  text-align:center;
}

#lang_cover #lang_select a{
  color:#999;
  text-decoration:none;
  display:inline-block;
  width:150px;
  text-align:center;
  border:1px #333 solid;
  margin-top:20px;
  padding:0.5%;
  background-color:rgba(255,255,255,0.1);
}

/*#lang_cover #lang_select img#logo_small{
  width:40%;
  max-width:188px;
  margin-bottom:3%;
}

#lang_cover #lang_select a img{
  width:10%;
  margin:2%;
  max-width:80px;
}
*/
#lang_cover #lang_select a#lang_cancel{
  display:inline-block;
  padding:0 10px;
  font-size:90%;
  color:#777;
  margin-top:40px;
  text-decoration: none;
  border-width:0;
  background:none;
}

.mob{display:none;}

/*----BASE----*/
#wrapper{
  position:relative;
  width:100%;
  height:100%;
  min-width:1000px;
}

/*#wrapper:before{
  content:"";
  display:block;
  width:100%;
  position:absolute;
  bottom:0;
  left:0;
  height:250px;
  background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.8));
  z-index:0;
}*/

#content_bg{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-size:cover;
  background-position: center;
  background-repeat: no-repeat;
}

#menu a,#menu span,#submenu a{
  text-decoration:none;
  color:#FFF;
}

.youtube{
  width:100%;
  padding-top:56.25%;
  position:relative;
}
.youtube>iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
/*  display:none;*/
}

/*.youtube>img{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  cursor:pointer;
}*/


.check{
  position:relative;
  /*overflow:hidden;*/
}
.check:after{
  content:"CHECK";
  display: block;
  font-size:10px;
  background-color: rgba(255,0,0,1);
  padding:3px 1em;
  position:absolute;
  top:0;left:50%;
  text-shadow: none;
  color:#FFA;
  transform:translate(-50%,-120%);
  font-size:10px;
  line-height:1;
  border-radius:3px;
  z-index:1;
}
.check:before{
  content:"";
  display:block;
  width:0;height:0;
  border:10px rgba(255,0,0,1) solid;
  border-color:rgba(255,0,0,1) transparent transparent transparent;
  position:absolute;
  top:0;left:50%;
  transform:translate(-50%,-30%);
  z-index:1;
}

.add{  position:relative; }
.add:after{
  content:"";
  display:block;
  width:0;
  height:0;
  border:15px #F00 solid;
  border-color:#F00 transparent transparent;
  position:absolute;
  top:-15px;
  left:50%;
  transform:translate(-50%,0);
  animation: addmark 0.3s ease -0.1s infinite alternate;
  -ms-animation: addmark 0.3s ease -0.1s infinite alternate;
}

@keyframes addmark{
  0% {opacity: 0.3;top:-15px;}
  100% {opacity:1;top:-10px;}
}


footer{
  background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,1) 90%);
  padding:150px 0 10px;
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  padding-left:200px;
}

footer #link_banners{
  width:70%;
  max-width:700px;
  margin:0px auto 30px;
  text-align:center;
}

footer #link_banners img{
  width:30%;
  margin:0 1%;
  max-width:258px;
}

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



#order_common{
  background-color:#A00;
  background:linear-gradient(to bottom,#C00,#A00);
  border:1px #900 solid;
  border-width:1px 0 0;
  color:#FFF;
  text-decoration: none;
  font-size:16px;
  text-align: center;
  position:fixed;
  bottom:-100px;
  left:0;
  width:100%;
  z-index:9999;
  padding:10px;
}




/*----MENU----*/

#menu{
  position:fixed;
  top:0;
  left:0;
  height:100%;
  width:200px;
  background-color:rgba(6, 40, 51, 0.8);
  z-index:110;
}

#menu #sitename{
  width:100%;
  font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
  font-size:12px;
  color:#FFF;
  text-align: center;
  text-shadow:0 0 3px #661111,0 0 3px #661111;
  padding:30px 10px;
}

#menu .logo{
  width:75%;
  display:block;
  margin:30px auto;
}
#menu nav{
  margin-bottom:40px;
}
#menu nav ul{
  list-style-type: none;
  margin:0;
  padding:0;
  margin-bottom:30px;
}

#menu nav ul li{
  display:block;
  background-color:rgba(0, 0, 0, 0.53);
  margin-bottom:2px;
  position:relative;
}
#menu nav ul li.current{
  background-color:rgba(255,255,255,0.3);
}
#menu nav ul li.current:before{
  content:"";
  display:block;
  width:0;
  height:0;
  border:7px #FFF solid;
  border-color:transparent transparent transparent #FFF;
  position:absolute;
  top:50%;
  left:0px;
  margin-top:-7px;
}

#menu nav ul li a,#menu nav ul li span{
  display:inline-block;
  padding:10px 20px;
  width:100%;
}
#menu nav ul li span{
  opacity:0.1;
}


nav .menu_banner{
  width:90%;
  display: block;
  margin:10px auto;
}


#social_buttons{
  display:inline-block;
  position:absolute;
  bottom:7px;
  left:0;
  width:100%;
  text-align:center;
}

#social_buttons img{
  height:30px;
  margin:2%;
  /*box-shadow:0 0 3px #000,0 0 3px #000,0 0 10px #000;*/
}
/*
#social_buttons a#bt_select_lang img{
  width:80%;
}*/

#mobile_menu_opener{
  height:37px;
  float:right;
  margin:5px;
  border:1px #444 solid;
  display:none;
  cursor:pointer;
}

#mobile_menu{
  display:none;
  border:1px #555 solid;
  border-width:1px 0 0;
}

#mobile_menu a,
#mobile_menu span{
  display:block;
  border:1px #333 solid;
  border-width:1px 0 0;
  padding:10px;
  color:#FFF;
  width:95%;
  margin:0 auto;
}

#mobile_menu a.current{
  background-color:rgba(255,255,255,0.2);
}

#mobile_menu a:first-child{
  border-width:0;
}

#mobile_menu span{
  color:rgba(255,255,255,0.3);
}

#mobile_menu a.sub{
  border-style:dotted;
  padding-left:50px;
}

#mobile_menu #mob_social{
  border:1px #333 solid;
  border-width:1px 0 0;
  padding:10px;
  padding-top:20px;
  text-align:center;
}
#mobile_menu #mob_social a{
  display: inline;
  padding:0;
}

#mobile_menu #mob_social a img{
  height:30px;
  margin:1%;
}

#menu nav ul li.check:after,
#mobile_menu a.check:after{
  content:"CHECK";
  display:inline-block;
  font-size:60%;

  background-color:rgba(255,0,0,0.75);
  color:#FF0;

  background-color:rgba(0,0,0,0);
  color:#F00;
  /*border:1px #555 solid;*/
}

#menu nav ul li.check:after{
  position:absolute;
  top:50%;
  right:3px;
  left:auto;
  transform:translate(0,-50%);
  -ms-transform:translate(0,-50%);
  padding:1.5% 3%;
}

#mobile_menu a.check:after{
  border:1px #F00 solid;
  margin-left:10px;
  position:static;
  transform:scale(1);
  -ms-transform:scale(1);
  padding:0 2%;
}
#menu nav ul li.check:before,
#mobile_menu a.check:before{display:none;}


/*---▼▼▼サブメニュー▼▼▼---*/
#submenu{
  background:linear-gradient(to bottom,rgba(0,0,0,0.4),rgba(0,0,0,0),rgba(0,0,0,0.4));
  border:2px #192526 solid;
  border-width:2px 0;
  box-shadow:0 6px 5px rgba(0,0,0,0.3);
  height:60px;
  margin-top:30px;
  position:relative;
  z-index:109;
}
#submenu nav{
  text-align:center;
}

#submenu nav>*{
  text-align:center;
  display:inline-block;
  padding:11px 3px;
  border:0 #666 solid;
  border-right-width:1px;
  font-weight:bold;
  font-size:100%;
  line-height:1.1;
  color:#222;
  text-shadow:0 0 3px #FFF,0 0 5px #FFF;

  /*background:linear-gradient(to bottom,rgba(255, 255, 255, 0.3),rgba(255, 255, 255, 0.6));*/
  background-color:rgba(255,255,255,0.4);
  height:56px;
  position:relative;
}


#submenu nav>*>span{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:100%;
}

#submenu nav>a.current{
  background:linear-gradient(to bottom,rgba(255, 255, 255, 0.5),rgb(241, 210, 109));
}
#submenu nav>span.inactive{
  background:none;
  background-color:rgba(0,0,0,0.2);
  color:rgba(0,0,0,0.2);
  text-shadow:none;
}

#submenu nav>a.check:after{
  font-size:50%;
  /*transform: rotate(-45deg) translate(-32%,-220%);*/
}
#submenu nav>a:first-child{
  border-left-width:1px;
}
/*---▲▲▲サブメニュー▲▲▲---*/


/*---CUSTOM---*/
#cboxCurrent{
  display:none !important
}

.bx-wrapper .bx-viewport{
  border-width:0 !important;
  background:none !important;
  box-shadow:none !important;
  left:0 !important;
}

.bx-wrapper .bx-prev{
  left:0 !important;
}
.bx-wrapper .bx-next{
  right:0 !important;
}
.bx-pager{
  transform:translate(0,15%) !important;
}
.bx-wrapper .bx-pager.bx-default-pager a{
  background-color:#EEE !important;
  background:linear-gradient(to bottom,#eee,#999) !important;
  border:2px #FFF solid !important;
  width:22px !important;
  height:22px !important;
  border-radius:50% !important;
  box-shadow:0 0 3px #000 !important;
}


.bx-wrapper .bx-pager.bx-default-pager .newpager{
  position:relative !important;
}
.bx-wrapper .bx-pager.bx-default-pager .newpager:after{
  content:"NEW";
  position:absolute;
  color:#F00;
  font-size:10px;
  top:-15px;
  left:50%;
  transform: translate(-50%,0);
}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active{
  background-color:#951616 !important;
  background:linear-gradient(to bottom,#951616,#000) !important;
}

#cboxTitle{
  bottom:0 !important;
}
/*----CONTENT-------*/
.psbtn{
  width:26px;
  vertical-align:-7px;
}


#content{
  position:relative;
  overflow:hidden;
  z-index:1;
  padding-left:200px;
  /*padding-top:96px;*/
  min-height:100%;
}

#content h2,
#submenu nav,
#content #content_body{
  width:80%;
  max-width:1000px;
  margin:0 auto;
}


#content h2{
  text-align:center;
  font-size:200%;
  line-height: 1.5;
  color:#242020;
  text-shadow:0 0 10px #FFF,0 0 10px #FFF,0 0 5px #FFF,0 0 5px #FFF;
  margin:50px auto 10px;
  font-weight:bold;
  font-family:"Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
  color:#D00;
  display: block;
}

#content h2 #subcatch{
  font-size:70%;
  color:#111;
}
#content h2 .push{
  color:#111;
}

#content #content_area{
  position:relative;
  margin-bottom:280px;
  text-shadow:0 0 5px #FFF,0 0 5px #FFF,0 0 10px #FFF,0 0 10px #FFF;
  z-index:1;

  overflow:hidden;

  /*background-color:rgba(255,255,255,0.6);*/
  background:linear-gradient(to bottom,rgba(255,255,255,0) 100px,rgba(255,255,255,0.75) 250px)
}
#content .screens:after{
  content:"※掲載されているゲーム画面は、開発中のPlayStation®4版のものです。";
  display:inline-block;
  font-size:80%;
  color:#222;
}

#content #content_body{
  padding:30px 40px;
  color:#111;
  line-height:1.8;
/*  background-color:rgba(255,255,255,0.8);*/
}


#content_body #lead{
  font-size:110%;
}

#content_body section{
  margin-bottom:160px;
}

h3{
  margin-top:80px;
  font-size:150%;
  border:1px #500 solid;
  border-width:0 0 1px;
  color:#500;
  line-height:1.4;
}
h3 div{
  display:inline-block;
  border:1px #500 solid;
  border-width:0 0 4px;
  padding-right:30px;
}

h4{
  color:#500;
  font-size:120%;
  margin:0;
  padding:0;
  margin:40px 0 5px;
}
.main_img{
  width:100%;
  max-width:1000px;
  margin-top:20px;
}

.imageview{
  margin-top:8px;
}
.imageview img{
  /*border:1px #333 solid;*/
}
.imageview p{
  margin:0;
  padding:8px 12px;
  text-align:center;
}

.screenshot{
  text-align:center;
}
.screenshot a{
  display:block;
  float:left;
  margin:0.2%;
  width:32.8%;
  max-width:300px;
  text-decoration:none;
  position:relative;
}

.screenshot a:after{
  content:"\FF0B";/*＋*/
  display:inline-block;
  width:30px;
  height:30px;
  line-height:30px;
  background-color:rgba(0,0,0,0.8);
  color:#FFF;
  border-radius:50%;
  position:absolute;
  top:0;
  left:50%;
  transform: translate(-50%,0);
  text-shadow:none;
  text-align:center;
  margin-top:20%;
}

.screenshot img{
  width:100%;
  border:1px #666 solid;
}

.bxslider .img_cap{
  padding:5px 5px 10px;
  line-height:1.5;
}



/*@media screen and (min-width:1025px){
  body{
    min-width:1280px;
  }
}*/

@media screen and (max-width:1024px){
  #wrapper{
    min-width:auto;
  }
  body{
    font-size:16px;
  }

  #submenu nav,
  #content h2,
  #content #content_body,
  footer #link_banners{
    width:100%;
  }

  #submenu nav>*{font-size:85%;}
}

@media screen and (max-width:768px){
  #menu{
    width:100%;
    background-color:rgba(6, 40, 51, 0);
  }

  #menu nav,
  #social_buttons{
    display:none;
  }
  #menu #sitename{width:70%;padding:15px;text-align:left;}
  #menu{height:50px;}
  #mobile_menu_opener{
    display:block;
  }

  #content{padding-top:50px;padding-left:0;}
  #content h2{
    margin:10% auto;
    font-size:7vw;
  }
  #content #content_area{
    margin-bottom:60%;
  }

  #content #content_body{
    padding:15px 30px;
  }

  h3 div{
    padding-right:0;
  }

  #content_body section{
    margin-bottom:20%;
  }
  footer{
    padding:150px 0 70px;
  }
  footer #copyright{
    width:100%;
  }

  .pc{display:none;}
  .mob{display:block;}
}


@media screen and (max-width:459px){
  #lang_select{
    width:60%;
  }
  #lang_cover #lang_select a img{
    width:20%;
    margin:2%;
  }
}