/*html,body,body>div{height:100%;}
body{margin:0;overflow-x: hidden;font-size:16px;}
#wrapper{
  width:90%;
  margin:0 auto;
  position:relative;
  min-height:100%;
}*/
.chara_content_container{
  height:100%;
}
.chara_content_container #bg{
  display:block;
  position:fixed;
  right:0;
  bottom:0;
  height:100%;
  opacity:0.5;
  z-index:101;
}
#chara_wrapper{
  position:relative;
  z-index:102;
}
#chara_image{
  width:70%;
  margin-left:-6%;
  display:block;
}
#chara_info{
  position:fixed;
  right:8%;
  bottom:20%;
  width:45%;
  padding:0.4%;
  box-shadow: 8px 8px 0 rgba(0,0,0,0.2);
  background-image:url(../images/common/stripe_bg.png);
  transform:rotate(-4deg);
}
#chara_info>div{
  background-color:rgba(255,255,255,0.7);
  padding:3%;
  transform:rotate(4deg);
}
#chara_info h3{
  font-size:3vw;
  margin:0;
  padding:0;
  line-height:1.2;
  margin-bottom:1%;
}
#chara_info h3 .ruby{
  display:block;
  font-size:40%;
}
#chara_info #chara_spec{
  font-size:80%;
}
#chara_info #chara_body{
  margin-top:2%;
  padding-top:2%;
  border:1px #AAA dotted;
  border-width:1px 0 0;
}

#chara_title{
  margin-top:3%;
}
#chara_title>div{
  display:inline-block;
  width:49.2%;
  padding:2% 1%;
  color:#FFF;
  margin:0.2%;
  text-align:center;
  font-size:1.2vw;
  font-size:75%;
}
#chara_title>div.fv{background-color:rgba(10, 79, 159, 0.55);}
#chara_title>div.asjinnan{background-color:rgba(148, 41, 45, 0.55);}
#chara_title>div.asshiseikan{background-color:rgba(20, 112, 32, 0.55);}
#chara_title>div.asyokohamaamane{background-color:rgba(67, 38, 93, 0.55);}
#chara_title>div.ashakodateamane{background-color:rgba(31, 7, 52, 0.68);}

#chara_btn{
  position:fixed;
  right:5%;
  bottom:0;
  width:50%;
  text-align:center;
}
#chara_btn>div{
  /*transform: skewX(-45deg);*/
}

#chara_btn a{
  display: inline-block;
  width:40%;
  margin:0 1%;
  background-color:rgba(0,0,0,0.8);
  color:#FFF;
  font-weight:bold;
  font-family: 'Oswald', sans-serif;
  font-size:1.5vw;
  text-decoration: none;
  text-align:center;
  letter-spacing:1px;
  padding:1.5% 1% 1%;
  border-radius:4px 4px 0 0;
  box-shadow:0 0 5px rgba(0,0,0,0.3);
}
#chara_btn a span{
  display: block;
  /*transform: skewX(45deg);*/
}

a.chara_change{
  position:fixed;
  top:50%;
  text-decoration:none;
  color:rgba(45, 45, 45, 0.8);
  z-index:111;
}
a.chara_change>div{
  transform:skew(-45deg);
  width:50px;
  height:50px;
  background-color:rgba(45, 45, 45, 0.8);
}
a#chara_next{right:0;transform:translate(50%,-50%)}
a#chara_prev{left:0;transform:translate(-50%,-50%)}

a.chara_change span{
  display:block;
  top:0;
  font-weight:bold;
  font-family: 'Oswald', sans-serif;
  letter-spacing:1px;
  text-align:center;
}
a#chara_next span{
  right:0;
  transform:translate(-67%,-180%) rotate(-45deg);
}
a#chara_prev span{
  right:0;
  transform:translate(65%,-100%) rotate(-45deg);
}


/*SCHOOL*/
#chara_seisou #chara_info{background-color:rgba(16, 113, 191, 0.75);}
#chara_seisou #chara_info h3{color:#004a98;}
#chara_seisou #chara_btn a{background:linear-gradient(-45deg,rgba(0, 46, 125, 1) 50%,rgba(60, 102, 173, 1) 51%);}

#chara_jinnan #chara_info{background-color:rgba(191, 32, 16, 0.75);}
#chara_jinnan #chara_info h3{color:#982000;}
#chara_jinnan #chara_btn a{background:linear-gradient(-45deg,rgba(125, 0, 0, 1) 50%,rgba(173, 70, 60, 1) 51%);}

#chara_shiseikan #chara_info{background-color:rgba(25, 191, 16, 0.75);}
#chara_shiseikan #chara_info h3{color:#016714;}
#chara_shiseikan #chara_btn a{background:linear-gradient(-45deg,rgba(6, 107, 28, 1) 50%,rgba(87, 160, 80, 1) 51%);}

#chara_yokohamaamane #chara_info{background-color:rgba(129, 71, 180, 0.75);}
#chara_yokohamaamane #chara_info h3{color:#5f356e;}
#chara_yokohamaamane #chara_btn a{background:linear-gradient(-45deg,rgba(70, 26, 101, 1) 50%,rgba(150, 88, 187, 1) 51%);}

#chara_hakodateamane #chara_info{background-color:rgba(43, 0, 80, 0.78);}
#chara_hakodateamane #chara_info h3{color:#360757;}
#chara_hakodateamane #chara_btn a{background:linear-gradient(-45deg,rgba(27, 0, 37, 1) 50%,rgba(56, 18, 99, 1) 51%);}


@media screen and (max-width:768px){
  .chara_content_container #bg{
    right:-80vw;
  }
  #chara_image{
    width:100%;
    margin-left:0;
  }
  #chara_info{
    width:104%;
    right:-2%;
    bottom:8%;
    transform:rotate(-2deg);
/*    font-size:80%;*/
  }
  #chara_info>div{
    padding:3% 4%;
  }
  #chara_info>div{
    transform:rotate(2deg);
  }
  #chara_info h3{
    font-size:6vw;
  }
  #chara_title>div{
    font-size:3vw;
  }
  a.chara_change{
    top:30%;
  }
  #chara_btn{
    width:90%;
  }
  #chara_btn a{
    width:42%;
    font-size:2.5vw;
    padding-top:4%;
    padding-bottom:3.5%;
  }

  a#chara_next span{transform:translate(-63%,-210%) rotate(-45deg);}
  a#chara_prev span{transform:translate(62%,-130%) rotate(-45deg);}

}