@charset "UTF-8";
.wrapper {
  background: url(../img/in_character/bg_ptn.gif) center top;
}

.content {
  -webkit-transition: opacity 1s ease-out .6s;
          transition: opacity 1s ease-out .6s;
}

.content h2 {
  position: relative;
  z-index: 1;
}

.chara {
  position: relative;
  height: 1086px;
  overflow: hidden;
}

#koji {
  background-color: #9c66e3;
}

#koji .chara_detail {
  background: url(../img/in_character/EN_koji.png) no-repeat bottom left;
}

#hiro {
  background-color: #64befa;
}

#hiro .chara_detail {
  background: url(../img/in_character/EN_hiro.png) no-repeat bottom left;
}

#kaduki {
  background-color: #6cc462;
}

#kaduki .chara_detail {
  background: url(../img/in_character/EN_kaduki.png) no-repeat bottom left;
}

#shin {
  background-color: #f57171;
}

#shin .chara_detail {
  background: url(../img/in_character/EN_shin.png) no-repeat bottom left;
}

#yuki {
  background-color: #297acc;
}

#yuki .chara_detail {
  background: url(../img/in_character/EN_yuki.png) no-repeat bottom left;
}

#taiga {
  background-color: #8bca48;
}

#taiga .chara_detail {
  background: url(../img/in_character/EN_taiga.png) no-repeat bottom left;
}

#kakeru {
  background-color: #fcab47;
}

#kakeru .chara_detail {
  background: url(../img/in_character/EN_kakeru.png) no-repeat bottom left;
}

#minato {
  background-color: #4ac6d9;
}

#minato .chara_detail {
  background: url(../img/in_character/EN_minato.png) no-repeat bottom left;
}

#leo {
  background-color: #fc9dc4;
}

#leo .chara_detail {
  background: url(../img/in_character/EN_leo.png) no-repeat bottom left;
}

#yu {
  background-color: #8571db;
}

#yu .chara_detail {
  background: url(../img/in_character/EN_yu.png) no-repeat bottom left;
}

#louis {
  background-color: #c4c4b9;
}

#louis .chara_detail {
  background: url(../img/in_character/EN_louis.png) no-repeat bottom left;
}

#alex {
  background-color: #9a54c2;
}

#alex .chara_detail {
  background: url(../img/in_character/EN_alex.png) no-repeat bottom left;
}

#joji {
  background-color: #dee34f;
}

#joji .chara_detail {
  background: url(../img/in_character/EN_joji.png) no-repeat bottom left;
}

#sakyo {
  background-color: #ffb5b5;
}

#sakyo .chara_detail {
  background: url(../img/in_character/EN_sakyo.png) no-repeat bottom left;
}

#ukyo {
  background-color: #b1b1fc;
}

#ukyo .chara_detail {
  background: url(../img/in_character/EN_ukyo.png) no-repeat bottom left;
}

#nikkanen {
  background-color: #99e8e0;
}

#nikkanen .chara_detail {
  background: url(../img/in_character/EN_nikkanen.png) no-repeat bottom left;
}

.chara_all {
  position: relative;
  height: 760px;
}

.chara_wrap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
}

.chara_wrap:before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 50%;
  height: 100%;
  background: url(../img/in_character/deco_line.png) no-repeat left top;
}

.chara_wrap.chara_disp {
  display: block;
}

.chara_detail {
  position: relative;
  width: 1020px;
  height: 100%;
  margin: 0 auto;
}

.chara_detail .chara_img {
  position: absolute;
  left: -175px;
  top: -175px;
}

.chara_detail .chara_txt {
  position: relative;
  padding: 300px 0 0 540px;
  text-align: left;
  line-height: 1.5;
  font-weight: 400;
}

.chara_detail .chara_txt:before {
  content: '';
  position: absolute;
  left: 490px;
  bottom: -35px;
  display: block;
  width: 47px;
  height: 50px;
  background: url(../img/in_character/deco_kira2.png) no-repeat bottom left;
}

.chara_detail .chara_txt:after {
  content: '';
  position: absolute;
  right: 10px;
  top: 355px;
  display: block;
  width: 54px;
  height: 120px;
  background: url(../img/in_character/deco_kira1.png) no-repeat bottom left;
}

.chara_detail .chara_txt .name {
  font-size: 56px;
}

.chara_detail .chara_txt .name span {
  letter-spacing: -.14em;
}

.chara_detail .chara_txt .voice {
  margin-top: 12px;
  font-size: 20px;
}

.chara_detail .chara_txt .voice:before {
  content: 'CV：';
}

.chara_detail .chara_txt .txt {
  margin-top: 27px;
}

.chara_list {
  position: absolute;
  right: 50%;
  top: 397px;
  width: 480px;
  -webkit-transform: translateX(510px);
      -ms-transform: translateX(510px);
          transform: translateX(510px);
  text-align: left;
  letter-spacing: -.4em;
  font-size: 0;
  z-index: 1;
}

.chara_list li {
  position: relative;
  width: 60px;
  margin-right: 10px;
  margin-bottom: 10px;
  display: inline-block;
  background-color: #fff;
  border-radius: 50%;
  cursor: pointer;
}

.chara_list li:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 50%;
  opacity: .4;
  filter: alpha(opacity=40);
  -webkit-transition: opacity .15s linear;
          transition: opacity .15s linear;
}

.chara_list li.yu {
  margin-right: 0;
}

.chara_list li p:before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%) scale(0.01);
      -ms-transform: translate(-50%, -50%) scale(0.01);
          transform: translate(-50%, -50%) scale(0.01);
  width: 800px;
  height: 800px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid #fff;
  border-radius: 50%;
  z-index: -1;
  -webkit-box-shadow: 5px 5px 0px 3px rgba(0, 0, 0, 0.1);
          box-shadow: 5px 5px 0px 3px rgba(0, 0, 0, 0.1);
}

.chara_list li p:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%) scale(0.01);
      -ms-transform: translate(-50%, -50%) scale(0.01);
          transform: translate(-50%, -50%) scale(0.01);
  width: 100px;
  height: 100px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 50px solid #fff;
  border-radius: 50%;
  z-index: -1;
  -webkit-box-shadow: 5px 5px 0px 3px rgba(0, 0, 0, 0.1);
          box-shadow: 5px 5px 0px 3px rgba(0, 0, 0, 0.1);
}

.chara_list li.list_disp {
  z-index: 3;
}

.chara_list li.list_disp:after {
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity .3s linear;
          transition: opacity .3s linear;
}

.chara_list li.list_disp p:before {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-animation: scale_anm2 .9s ease alternate, border_anm2 .9s linear alternate;
          animation: scale_anm2 .9s ease alternate, border_anm2 .9s linear alternate;
}

.chara_list li.list_disp p:after {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-animation: scale_anm 1s ease alternate .1s, border_anm .7s ease-in-out alternate .4s;
          animation: scale_anm 1s ease alternate .1s, border_anm .7s ease-in-out alternate .4s;
}

.chara_list li:hover:after {
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity .3s linear;
          transition: opacity .3s linear;
}

@-webkit-keyframes scale_anm {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(0.01);
            transform: translate(-50%, -50%) scale(0.01);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(40);
            transform: translate(-50%, -50%) scale(40);
  }
}

@keyframes scale_anm {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(0.01);
            transform: translate(-50%, -50%) scale(0.01);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(40);
            transform: translate(-50%, -50%) scale(40);
  }
}

@-webkit-keyframes border_anm {
  0% {
    border-width: 50px;
  }
  100% {
    border-width: 0;
  }
}

@keyframes border_anm {
  0% {
    border-width: 50px;
  }
  100% {
    border-width: 0;
  }
}

@-webkit-keyframes scale_anm2 {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(0.01);
            transform: translate(-50%, -50%) scale(0.01);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(3.5);
            transform: translate(-50%, -50%) scale(3.5);
  }
}

@keyframes scale_anm2 {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(0.01);
            transform: translate(-50%, -50%) scale(0.01);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(3.5);
            transform: translate(-50%, -50%) scale(3.5);
  }
}

@-webkit-keyframes border_anm2 {
  0% {
    border-width: 8px;
  }
  100% {
    border-width: 1px;
  }
}

@keyframes border_anm2 {
  0% {
    border-width: 8px;
  }
  100% {
    border-width: 1px;
  }
}