#content_bg{
  background-image:url(../images/characters/bg.jpg);
}

#submenu{
  /*display:none;*/
}

#submenu nav>*{
  width:15%;
}

body.gi #submenu nav>a.current{
  background:linear-gradient(to bottom,rgba(152, 162, 254, 0.7),rgba(255, 255, 255, 1));
  color:rgb(76, 64, 137);
}
body.go #submenu nav>a.current{
  background:linear-gradient(to bottom,rgba(254, 152, 174, 0.7),rgba(255, 255, 255, 1));
  color:rgb(70, 34, 39);
}
body.shoku #submenu nav>a.current{
  background:linear-gradient(to bottom,rgba(152, 254, 159, 0.7),rgba(255, 255, 255, 1));
  color:rgb(49, 80, 56);
}
body.shin #submenu nav>a.current{
  background:linear-gradient(to bottom,rgba(152, 205, 254, 0.7),rgba(255, 255, 255, 1));
  color:rgb(56, 87, 97);
}
body.other #submenu nav>a.current{
  background:linear-gradient(to bottom,rgba(254, 253, 152, 0.7),rgba(255, 255, 255, 1));
  color:rgb(87, 87, 41);
}
body.npc #submenu nav>a.current{
  background:linear-gradient(to bottom,rgba(199, 199, 199, 0.7),rgba(255, 255, 255, 1));
  color:rgb(87, 87, 41);
}



/*----Custom----*/
#cboxContent{
  margin-top:0 !important;
}

/*----SELECTORS----*/

#charas{
  margin:50px 0 !important;
}

#charas a.chara{
  display:block;
  float:left;
  width:25%;
  height:300px;
  height:270px;
  height:250px;/**/
  overflow:hidden;
  position:relative;
  border:3px transparent solid;
  text-decoration: none;

  transition:border-width 0.2s,border-color 0.2s;
  -ms-transition:border-width 0.2s,border-color 0.2s;
}

#charas a.chara:hover{
  /*border-width:5px;
  border-color:#FFF;*/

  transition:border-color 0.2s;
  -ms-transition:border-color 0.2s;
}
/*
#charas a.check:after{
  content:"CHECK";
  font-size:70%;
  background-color: rgba(255,0,0,0.75);
  padding:1px 50px;
  transform: rotate(-45deg) translate(-30%,-120%);
  position:absolute;
  top:0;
  left:0;
  text-shadow: none;
  color:#FF0;
}
*/

body.gi #charas a.chara:hover{ border-color:#3d2b83;}
body.go #charas a.chara:hover{ border-color:#8b2323;}
body.shoku #charas a.chara:hover{ border-color:#397e40;}
body.shin #charas a.chara:hover{ border-color:#2b6987;}
body.other #charas a.chara:hover{ border-color:#877228;}
body.npc #charas a.chara:hover{ border-color:#818181;}


#charas a.gi{
  background-color:#b1a6dc;
  /*background:linear-gradient(to bottom right,#FFF,#8463ba);*/
}
#charas a.go{
  background-color:#dca6a6;
  /*background:linear-gradient(to bottom right,#FFF,#ba6370);*/
}
#charas a.shoku{
  background-color:#a6dcb7;
  /*background:linear-gradient(to bottom right,#FFF,#63ba98);*/
}
#charas a.shin{
  background-color:#a6cedc;
  /*background:linear-gradient(to bottom right,#FFF,#63a3ba);*/
}
#charas a.other{
  background-color:#dcd1a6;
  /*background:linear-gradient(to bottom right,#FFF,#ba9c63);*/
}
#charas a.npc{
  background-color:#d4d0d0;
  /*background:linear-gradient(to bottom right,#FFF,#ba9c63);*/
}


#charas a.newcomer{
  height:540px;
  height:500px;/**/
  /*width:50%;*//**/
}

#charas a.actionmovie:before{
  content:"";
  padding:0 1%;
  position:absolute;
  bottom:42px;
  right:1%;
  width:30%;
  height:100%;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-image:url(../images/characters/actionmovie_icon.svg);
  background-position: bottom;
  z-index:3;
}

#charas a.new:after{
  content:"NEW";
  font-weight:bold;
  background-color:#FF0;
  border:1px #F00 solid;
  border-width:1px 0;
  color:#F00;
}

#charas a.chara .face{
  position:relative;
  width:100%;
  z-index:0;
}

#charas a.newcomer .face{
  width:150%;
  margin-left:-25%;
}/**/

#charas a.chara>div{
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
}
/*#charas a.chara .actionmovie{
  font-size:80%;
  padding:5px;
  text-align:center;
  text-shadow:none;
  background-color:rgba(255,255,255,0.9);
  line-height:1.1;
  border:1px #000 solid;
  border-width:2px 0 0;
}*/

#charas a.chara .name{
  color:#FFF;
  font-size:120%;
  padding:6px;
  text-align:center;
  text-shadow:none;
  line-height:1.2;
}

#charas a.gi .actionmovie{color:#220e63;border-color:rgba(13, 1, 38, 0.8);}
#charas a.go .actionmovie{color:#630e0e;border-color:rgba(38, 1, 1, 0.8);}
#charas a.shoku .actionmovie{color:#094e25;border-color:rgba(1, 38, 17, 0.8);}
#charas a.shin .actionmovie{color:#0e5557;border-color:rgba(1, 32, 38, 0.8);}
#charas a.other .actionmovie{color:#57400e;border-color:rgba(38, 31, 1, 0.8);}
#charas a.npc .actionmovie{color:#585858;border-color:rgba(42, 42, 42, 0.8);}

#charas a.gi .name{background-color:rgba(13, 1, 38, 0.8);}
#charas a.go .name{background-color:rgba(38, 1, 1, 0.8);}
#charas a.shoku .name{background-color:rgba(1, 38, 17, 0.8);}
#charas a.shin .name{background-color:rgba(1, 32, 38, 0.8);}
#charas a.other .name{background-color:rgba(38, 31, 1, 0.8);}
#charas a.npc .name{background-color:rgba(37, 37, 37, 0.8);}

@media screen and (max-width:1024px){
  #charas a.actionmovie:before{
    bottom:40px;
    width:45%;
  }
}

@media screen and (max-width:767px){
  #charas a.chara{
    height:180px;
  }
  #charas a.newcomer{
    height:360px;
  }
  #charas a.chara .name{
    font-size:100%;
  }

  #charas a.actionmovie:before{
    bottom:30px;
    width:45%;
  }
}
@media screen and (max-width:459px){
  #charas a.chara{
    width:33.33%;
  }
  #charas a.chara .face{
    width:120%;
    transform: translate(-6%,0);
  }

  #charas a.newcomer .face{
    width:200%;
    margin-left:-35%;
  }

  #charas a.actionmovie:before{
    bottom:30px;
    width:45%;
  }
}


/*----CHARACTER----*/

body#characters_chara #content_body{
  padding-top:0;/*5%;*/
  padding-bottom:0;
  position:relative;

  min-height:800px;
}
body#characters_chara #content_body section{
  margin-bottom:0;
}

#chara{
  position:absolute;
  top:-5%;
  left:0;
  transform:translate(-22%,-2%);
}

#chara_image{
  position:relative;
  z-index:10;
  max-width:1700px;
  width:170%;
  /*max-width:1700px;
  margin-left:22%;*/
}

.charaSwitch{
  position:absolute;
  top:470px;/*40%;5%;10px;*/
  /*transform:translate(0,100px);*/
  z-index:109;
  background-color:rgba(0,0,0,0.7);
  display:block;
  width:7%;
  max-width:50px;
  padding:1% 0;
}

#charachange_prev{left:0;border-radius:0 7px 7px 0;}
#charachange_next{right:0;border-radius:7px 0 0 7px;}

.charaSwitch img{
  width:100%;
}

#charachange_prev img{
  transform:rotate(180deg);
}
span.charaSwitch{
  opacity:0;
}

/*
#charaSwitcher span,
#charaSwitcher a{
  display: inline-block;
  padding:1px;
  text-decoration: none;
  background-color:rgba(0,0,0,0.7);
  color:#EEE;
  font-size:70%;
  text-shadow:none;
  margin-right:1%;
  width:15%;
}

#charaSwitcher span{
  opacity:0.5;
  color:#a5a5a5;
}

#charaSwitcher a:first-child,
#charaSwitcher span:first-child,
#charaSwitcher a:last-child,
#charaSwitcher span:last-child{
  position:relative;
}

#charaSwitcher a:first-child:after,
#charaSwitcher a:last-child:after{
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  border:2px #EEE solid;
  position:absolute;
  top:50%;
}
#charaSwitcher a:first-child:after{
  left:6px;
  transform:translate(0,-45%) rotate(-45deg);
  border-width:2px 0 0 2px;
}
#charaSwitcher a:last-child:after{
  right:6px;
  transform:translate(0,-45%) rotate(45deg);
  border-width:2px 2px 0 0;
}
*/
#chara_info{
  width:100%;

  /*margin-top:-560px;*/

  padding-top:100px;
  padding-bottom:30px;
}

#chara_info #catch div,
#chara_info #name,
#chara_info #text,
#chara_info .screenshot{
  /*margin-left:40%;
  width:40%;*/
  position:relative;
}


#chara_info #catch div{
  color:#FFF;
  /*font-size:300%;*/
  font-size:200%;
  font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
  font-weight:900;
  font-style:oblique;
  text-align:center;
  line-height:1.2;
  margin:3% 0 6%;
}

.gi #chara_info #catch div{ /*color:#421c73;text-shadow:0 0 20px #5613ac,0 0 5px #5613ac;*/}
.go #chara_info #catch div{ /*color:#8e1212;text-shadow:0 0 20px #8e1212,0 0 5px #8e1212;*/}
.shoku #chara_info #catch div{ /*color:#145a11;text-shadow:0 0 20px #12880c,0 0 5px #12880c;*/}
.shin #chara_info #catch div{ /*color:#1383ac;text-shadow:0 0 20px #1383ac,0 0 5px #1383ac;*/}
.other #chara_info #catch div{ /*color:#696a35;text-shadow:0 0 20px #aca613,0 0 5px #aca613;*/}

#chara_info #body{
  position:relative;
  padding:2% 0;
  width:60%;
  z-index:12;
  color:#EEE;
  padding:2% 4%;
  padding-bottom:4.5%;
  margin-left: -10%;
  box-shadow:6px 6px 0 rgba(0,0,0,0.3);
}

/*#chara_info #body:before,
#chara_info #body:after{
  content:"";
  width:0;
  height:0;
  border:10px #F00 solid;
  position:absolute;
}
#chara_info #body:before{ top:0; left:0; }
#chara_info #body:after{ bottom:0; right:0; }*/

.gi #chara_info #body{ background-color:rgba(30, 17, 62, 0.9);}
.go #chara_info #body{ background-color:rgba(68, 10, 10, 0.9);}
.shoku #chara_info #body{ background-color:rgba(8, 45, 19, 0.9);}
.shin #chara_info #body{ background-color:rgba(4, 35, 40, 0.9);}
.other #chara_info #body{ background-color:rgba(45, 46, 11, 0.9);}
.npc #chara_info #body{ background-color:rgba(45, 45, 45, 0.9);}

/*.gi #chara_info #body:before{ border-color:#3651ff transparent transparent #3651ff; }
.gi #chara_info #body:after{ border-color:transparent #3651ff #3651ff transparent; }
.go #chara_info #body:before{ border-color:#e00b0b transparent transparent #e00b0b; }
.go #chara_info #body:after{ border-color:transparent #e00b0b #e00b0b transparent; }
.shoku #chara_info #body:before{ border-color:#22c515 transparent transparent #22c515; }
.shoku #chara_info #body:after{ border-color:transparent #22c515 #22c515 transparent; }
.shin #chara_info #body:before{ border-color:#4cb6c8 transparent transparent #4cb6c8; }
.shin #chara_info #body:after{ border-color:transparent #4cb6c8 #4cb6c8 transparent; }
.other #chara_info #body:before{ border-color:#bf9016 transparent transparent #bf9016; }
.other #chara_info #body:after{ border-color:transparent #bf9016 #bf9016 transparent; }*/


#chara_info #name,
#chara_info #cv{
  /*border:3px #FFF solid;
  border-width:0 0 0 5px;
  padding-left:8px;*/

  border:1px rgba(255,255,255,0.2) solid;
}
#chara_info #name{ border-width:1px 0 0;padding-top:5px;}
#chara_info #cv{border-width:0 0 1px;padding-bottom:5px;}

#chara_info #name{
  font-size:150%;
  line-height:1.1;
  font-weight:bold;
  color:#FFF;
  margin:3% 0 1%;
}

#chara_info #name #ruby{
  font-weight:normal;
  font-size:50%;
  vertical-align:5px;
}

#chara_info #name #azana{
  font-size:75%;
  vertical-align: 2px;
}

#chara_info #cv{
  margin:0 0 3%;
}

#chara_info #cv a{
  background-color:#FFF;
  background:linear-gradient(to bottom,#EEE,#BBB);
  box-shadow:0 0 3px #FFF inset;
  color:#000;
  display:inline-block;
  padding:0.2% 2%;
  text-shadow:none !important;
  border:1px #888 solid;
  border-radius:3px;
  text-decoration:none;
  font-size:80%;
  margin-right:1%;
  font-weight:bold;
  width:48%;
  max-width:160px;
  text-align: center;
}

#chara_info #cv a .icon{
  width:20px;
  vertical-align:-4px;
  margin-right:2%;
}

#chara_info #cv a.playing{
  opacity:0.75;
  animation: blink 0.5s ease -0.1s infinite alternate;
  -ms-animation: blink 0.5s ease -0.1s infinite alternate;
}

@keyframes blink{
  0% {opacity: 0.3;}
  100% {opacity:0.75;}
}

#chara_info #text{
/*  margin-top:2%;
  padding-top:2%;
  border:1px rgba(255,255,255,0.4) dotted;*/
  border-width:1px 0 0 0;
  line-height:1.7;
}

.gi #chara_info>*,
.go #chara_info>*,
.shoku #chara_info>*,
.shin #chara_info>*,
.other #chara_info>*,
.npc #chara_info>*{ text-shadow: 2px 2px 3px rgba(0,0,0,0.7);}

#chara_info .screenshot{
  margin-top:20px;
}

#chara_info #btn_actionmov{
  display:block;
  width:99.5%;
}

#chara_info #btn_actionmov img{
  display:block;
  width:100%;
  border:1px #666 solid;
}

a#share_chara{
  position:relative;
  width:60%;
  z-index:12;
  color:#EEE;
  margin-left: -10%;
  box-shadow:6px 6px 0 rgba(0,0,0,0.3);
  background-color:#55acee;
  border:1px #4597d5 solid;
  color:#FFF;
  text-align:center;
  text-decoration:none;
  text-shadow:none !important;
  display:block;
  padding:10px;
  margin-top:1.5%;
}
a#share_chara img{
  width:38px;
  vertical-align: -12px;
}

#chara_button{
  /*position:relative;
  width:30%;
  margin-left:70%;
  margin-top:20%;*/
  z-index:12;

  width:50%;
  bottom:0;
  left:56%;
  position:absolute;
}
#chara_button div{
  text-align: center;
}
#chara_button a{
  display:inline-block;
  padding:10px;
  /*width:70%;*/
  text-decoration:none;
  box-shadow:0 0 6px rgba(0,0,0,0.5),0 0 6px rgba(0,0,0,0.5),0 0 15px rgba(0,0,0,0.5);
  border:1px #888 solid;
  font-size:90%;
  text-align: center;
  background-color:rgba(255,255,255,1);
  background:linear-gradient(to bottom,#EEE,#BBB);
  color:#000;
  text-shadow:none;
  border-radius:5px 5px 0 0;

  width:45%;
  margin:0 0.2%;
}

#cv_comment{
  background-color:#FFF;
  color:#333;
  line-height:1.5;
  padding:15px;
  border-radius:7px;

  -webkit-overflow-scrolling: touch;
}

#cv_comment #comment_bg{
  position:absolute;
  top:-10%;
  right:-25%;
  width:120%;
  opacity:0.2;
  filter:brightness(150%) saturate(20%);
  z-index:0;
}

#cv_comment h4,
#cv_comment #comment_body{
  position:relative;
  z-index:1;
}

.gi #cv_comment{background:linear-gradient(to bottom,#bac3e4,#FFF);}
.go #cv_comment{background:linear-gradient(to bottom,#e4baba,#FFF);}
.shoku #cv_comment{background:linear-gradient(to bottom,#bae4cf,#FFF);}
.shin #cv_comment{background:linear-gradient(to bottom,#badae4,#FFF);}
.other #cv_comment{background:linear-gradient(to bottom,#e4e0ba,#FFF);}

#cv_comment h4{
  margin:2% 0 5%;
  padding:0;
  font-weight: normal;
  line-height:1.2;
  text-shadow: 3px 3px 0 rgba(0,0,0,0.07);
}

#cv_comment h4 b{
  font-size:150%;
  font-weight: bold;
}

.gi #cv_comment h4{color:#262f85;}
.go #cv_comment h4{color:#6f2020;}
.shoku #cv_comment h4{color:#2f782e;}
.shin #cv_comment h4{color:#174052;}
.other #cv_comment h4{color:#967c40;}

#cv_comment #comment_body{
  min-height:280px;
}
#cv_comment #comment_body h5{
  margin:0;
  padding:0;
  margin-bottom:5px;
  font-size:110%;
  border-width:0 0 1px;
  padding-bottom:3px;
  border-style: solid;
  margin-top:40px;
  line-height:1.3;
}

#cv_comment #comment_body h5:first-child{margin-top:20px;}


.gi #cv_comment #comment_body h5{border-color:#262f85;}
.go #cv_comment #comment_body h5{border-color:#6f2020;}
.shoku #cv_comment #comment_body h5{border-color:#2f782e;}
.shin #cv_comment #comment_body h5{border-color:#266885;}
.other #cv_comment #comment_body h5{border-color:#967c40;}

#cv_comment .comment_text{
  /*margin-bottom:30px;*/
  padding-left:2px;
}



@media screen and (max-width:1240px){
  body#characters_chara #content_body{
    min-height:630px;
  }
}

@media screen and (max-width:1024px){
  #chara{
    position: relative;
    transform: translate(-40%,0);
  }

  #chara_image{
/*    margin-left:-22%;
    margin-top:5px;*/
  }
  #chara_info{
    position:relative;
    margin-top:-15%;
    padding-top:0;

    padding-bottom:40px;

  }
  #chara_info #catch{
    display:none;
  }
  #chara_info #catch,
  #chara_info #body,
  a#share_chara{
    width:100%;
  }

  #chara_info #body,
  a#share_chara{
    position:relative;
    /*padding-bottom:80px;*/
    margin-left:0;

    /*padding-bottom:20px;*/
  }

  #chara_info #name{ border-width:0;}
  #chara_button{
    width:100%;
    /*transform:translate(0,-80px);
    margin-top:20px;
    margin-left:0;*/

    left:0;
    bottom:auto;
    top:-60px;
  }
  #chara_button a{
    padding:0;
    height:40px;
    line-height:40px;
    /*width:50%;*/
    border-radius:5px;

    width:40%;
  }

}
@media screen and (max-width:767px){
  .charaSwitch{
    top:50%;
    padding:3% 0;
  }

  #chara{
    transform: translate(-20%,0);
  }
  #chara_image{
    width:180%;
    /*margin-left:-70%;*/
    margin-left:-40%;
  }

  #chara_info #cv a{
    padding:1.2% 2%;
  }
}

@media screen and (max-width:459px){
  #chara_image{
    margin-top:0;
  }
}

@media screen and (max-width:320px){
  #chara_info #cv a{min-width:auto;}
  #chara_info #cv a .icon{display:none;}
}

/*-------NPC------*/

.npc .screenshot a{
  width:49% !important;
}

.npc #body:after{
  content:"This character is a NPC, and cannot be selected as a playable character.";
  display: block;
  margin:5px auto 0;
  background-color:#F00;
  color:#EE0;
  padding:3px;
  text-align:center;
  text-shadow:none;
  border-radius:4px;
  font-size:80%;
}