@import url(https://fonts.googleapis.com/css?family=Anton&text=GUTSGRIFFITHCASCAJUDEAUSERPICOSCHIERKEZODDWYALD);

#container{
  /*background-image:url(../images/characters/coverart.jpg);*/
}

#content{
  background-image:none !important;
}

main{
  padding-top:10%;
}

h2{
  text-align:center;
  transform:scale(0.75,1);
  text-shadow:0 0 5px #900,0 0 5px #900,0 0 10px #A03,0 0 20px #D05;
  font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  font-size:300%;
  margin:5% auto;
}

#chara_list{
  padding-bottom:10%;
}

#chara_list .selecters{

}
#chara_list .selecters .selecter{
  display:inline-block;
  width:24%;
  margin:0 0.5%;
  margin-bottom:4%;
  opacity:0;
  cursor:pointer;
}
#chara_list .selecters .selecter img{
  width:100%;
}

#chara_loading{
  width:100%;
  position:relative;
  z-index:-1;
}


/*-----chara----*/
#chara_area{
  opacity:0;
}

#head{
  width:100%;
}
#button_back{
  display:inline-block;
  padding:0 2%;
  background-color:#ce1c1c;
  border:1px #ff6060 solid;
  color:#FFF;
  transform:scale(1,1.2);
  font-size:80%;
  font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  font-weight:normal;
  float:right;
  margin-right:0.5%;
}

#chara{
  background-repeat:no-repeat;
  background-size:100% auto;
  /*background-color:#000;*/
  padding-bottom:5%;
  position:relative;
}

#chara video{
  width:100%;
  position:absolute;
  top:0;
  left:0;
  z-index:0;
}

#content video{
  width:100%;
  position:absolute;
  top:0;
  left:0;
  z-index:0;
  opacity:1;
}

#chara #chara_image{
  width:50%;
  position:relative;
  z-index:1;
}

#chara #chara_image img{
  width:150%;
/*  height:164.679%;*/
  margin-left:-30%;
  margin-top:-20%;
}

#chara_image #image_switch{
  text-align:center;
}

#chara_image #image_switch a{
  display:inline-block;
  border:1px #111 solid;
  border-width:0 1px 0 0;
  width:40%;
  color:#FFF;
  background-color:rgba(255,255,255,0.2);
  position:relative;
}

#chara_image #image_switch a .check_mark{
  font-size:12px;
  font-family:serif;
  top:-15px;
  transform:scale(0.8,1);
  color:#F05;
}

#chara_image #image_switch a:last-child{
  border-width:0;
}

.griffith #chara_image #image_switch a,
.guts #chara_image #image_switch a{
  width:28%;
}

#chara_image #image_switch a.current{
  background-color:rgba(255,100,155,0.5);
}

#chara #chara_body{
  width:50%;
  position:absolute;
  bottom:6%;
  right:3%;
  z-index:1;
  padding:0 2% 1.5%;
  background-color:rgba(0,0,0,0.5);
}

#chara_body h4,
#chara_body p{
  text-shadow:0 0 10px #000,0 0 10px #000,0 0 5px #000;;
}

#chara_body p{
  text-align: justify;
}

#chara_body h4{
  font-family: 'Anton', sans-serif;
  font-size:250%;
  letter-spacing:1px;
  margin:0;
  padding:0;
  color:#ebe7cd;
}


#chara_body h4 span{
  vertical-align: 7px;
  font-size:50%;
  margin-left:10px;
  display:inline-block;
}

#chara_body #cv{
  margin-top:-2%;
  margin-bottom:1%;
  padding-top:1%;
  font-size:80%;
  border:1px #666 dotted;
  border-width:1px 0 0 0;
  color:#ebe7cd;
}

#chara_body #ss,
#chara_body #movie{
  margin-top:3%;
}

#chara_body #ss img{
  width:32.1%;
  margin:0.6%;
}

#chara_body #movie img{
  width:100%;
}

#chara_body #movie{}

h6{
  margin:0;
  padding:0;
  border:3px #FFF solid;
  border-width:0 0 0 0;
  padding:2px;
  margin:3% 0 -3% 0;
  text-align:center;
  display:block;
  transform:scale(0.9,1);
  text-shadow:0 0 10px #000,0 0 10px #000,0 0 5px #000;;
  font-weight:bold;
  color:#F00;
  font-size:100%;
}

#chara_body .double img{
  display:inline-block;
  width:48% !important;
  margin-left:1%;
}

#chara_body .single img{
  display:block;
  width:48% !important;
  margin:0 auto;
}

/*
#chara_body .double span:first-child img,
#chara_body .double a:first-child img{
  margin-left:0;
}*/


#prev img,#next img{
  position:absolute;
  top:48%;
  z-index:1;
}

#prev img{
  left:-70px;
}
#next img{
  right:-70px;
}
/*#next img{
  transform:rotate(180deg);
}*/

/*----Media Query----*/
@media screen and (max-width:768px){
  main{
    padding-top:40%;
  }
  #prev img,#next img{
    position:fixed;
    width:35px;
  }

  #prev img{
    left:0;
  }
  #next img{
    right:0;
  }

}

@media screen and (max-width:639px){
  main h1{
    font-size:300%;
  }

  #chara_image #image_switch{
    font-size:80%;
  }
}


@media screen and (max-width:500px){
  #chara{
    background-image:none !important;
  }
  #chara #chara_image,
  #chara #chara_body{
    width:100%;
    position:static;
  }
  #chara #chara_body{
    width:85%;
    margin:5% auto;
  }
  #chara #chara_image img{
    width:120%;
    /*height:131.7432%;*/
    margin-left:-15%;
    margin-top:2%;
  }

  /*#prev img,#next img{
    top:20%;
  }*/
}