/*CHARAS*/
#selecter{
  background-color:#FFF;
}
.select{
  position:relative;
  overflow:hidden;
}
.select .emblem{
  position:absolute;
  top:50%;
  left:-10%;
  transform: translate(0,-50%);
  opacity:0.7;
  width:35%;
}
.select .charas{
  width:85%;
  margin-left:19%;
  line-height: 0;
}
.select .charas .chara{
  display:inline-block;
  margin:0 0.1%;
  width:22.5%;
  height:20vw;
  transform:skewX(-45deg);
  background-color:rgba(255,255,255,0.5);
  overflow:hidden;
  position:relative;
  transition:background 0.5s;
}
.select:nth-child(even) .emblem{
  left:auto;
  right:-10%;
  transform: translate(0,-50%);
}
.select:nth-child(even) .charas{
  margin-left:7%;
  margin-right:15%;
}
.select .charas .chara img{
  display:block;
  width:120%;
  transform:skewX(45deg) translate(50%,-8%);
}
.select .charas .chara .name{
  display:block;
  font-size:2.7vw;
  transform: translate(-33%,-160%) skewX(45deg) rotate(-45deg);
  position: absolute;
  bottom:0;
  left:0;
  width:100%;
  font-weight:bold;
  line-height:1.1;
  transition:color 0.5s;
}
.select .charas .chara .name .name_eng{
  display:block;
  font-size:40%;
  text-indent:0.2em;
}
#seisou{background-image:url(../images/characters/select_bg_seisou.gif);}
#seisou .name{color:#0c5594;}
#jinnan{background-image:url(../images/characters/select_bg_jinnan.gif);}
#jinnan .name{color:#6a1d1f;}
#shiseikan{background-image:url(../images/characters/select_bg_shiseikan.gif);}
#shiseikan .name{color:#1d542e;}
#yokohamaamane{background-image:url(../images/characters/select_bg_yokohamaamane.gif);}
#yokohamaamane .name{color:#553f94;}
#hakodateamane{background-image:url(../images/characters/select_bg_hakodateamane.gif);}
#hakodateamane .name{color:#471ea2;}

.chara:hover .name{color:#FFF !important;  transition:color 0.5s;}
#seisou .charas .chara:hover{background-color:rgba(2, 48, 167, 0.7);}
#jinnan .charas .chara:hover{background-color:rgba(167, 2, 2, 0.7);}
#shiseikan .charas .chara:hover{background-color:rgba(11, 129, 8, 0.7);}
#yokohamaamane .charas .chara:hover{background-color:rgba(107, 65, 133, 0.7);}
#hakodateamane .charas .chara:hover{background-color:rgba(34, 3, 69, 0.7);}
.chara:hover{transition:background 0.5s;}

#jinnan .emblem{right:-2%;}


/*--CHARA WINDOW--*/
#character_window{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  min-height:100%;
  background-color:rgba(255,255,255,0.75);
  z-index:9999;
  display:none;
  opacity:0;
}

#character_window #chara_content{
}

#character_window a#chara_close img{
  position:fixed;
  top:5%;right:5%;
  width:50px;
  opacity:0.6;
  z-index:112;
}

@media screen and (max-width:767px){
  .select .charas .chara img{
    width:150%;
  }
  .select .charas .chara .name{
    font-size:3.3vw;
    transform:translate(-33%,-186%) skewX(45deg) rotate(-45deg);
  }
  .select .charas .chara .name .name_eng{
    display:none;
  }
}