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

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

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

.chara {
  position: relative;
  min-height: 1020px;
  overflow: hidden;
}

#koji .chara_img {
  background: url(../img/in_character/EN_koji.png) no-repeat bottom center #9c66e3;
  -webkit-background-size: 112% auto;
          background-size: 112% auto;
}

#hiro .chara_img {
  background: url(../img/in_character/EN_hiro.png) no-repeat bottom center #64befa;
  -webkit-background-size: 112% auto;
          background-size: 112% auto;
}

#kaduki .chara_img {
  background: url(../img/in_character/EN_kaduki.png) no-repeat bottom center #6cc462;
  -webkit-background-size: 112% auto;
          background-size: 112% auto;
}

#shin .chara_img {
  background: url(../img/in_character/EN_shin.png) no-repeat bottom center #f57171;
  -webkit-background-size: 112% auto;
          background-size: 112% auto;
}

#yuki .chara_img {
  background: url(../img/in_character/EN_yuki.png) no-repeat bottom center #297acc;
  -webkit-background-size: 112% auto;
          background-size: 112% auto;
}

#taiga .chara_img {
  background: url(../img/in_character/EN_taiga.png) no-repeat bottom center #8bca48;
  -webkit-background-size: 112% auto;
          background-size: 112% auto;
}

#kakeru .chara_img {
  background: url(../img/in_character/EN_kakeru.png) no-repeat bottom center #fcab47;
  -webkit-background-size: 112% auto;
          background-size: 112% auto;
}

#minato .chara_img {
  background: url(../img/in_character/EN_minato.png) no-repeat bottom center #4ac6d9;
  -webkit-background-size: 112% auto;
          background-size: 112% auto;
}

#leo .chara_img {
  background: url(../img/in_character/EN_leo.png) no-repeat bottom center #fc9dc4;
  -webkit-background-size: 112% auto;
          background-size: 112% auto;
}

#yu .chara_img {
  background: url(../img/in_character/EN_yu.png) no-repeat bottom center #8571db;
  -webkit-background-size: 112% auto;
          background-size: 112% auto;
}

#louis .chara_img {
  background: url(../img/in_character/EN_louis.png) no-repeat bottom center #c4c4b9;
  -webkit-background-size: 112% auto;
          background-size: 112% auto;
}

#alex .chara_img {
  background: url(../img/in_character/EN_alex.png) no-repeat bottom center #9a54c2;
  -webkit-background-size: 112% auto;
          background-size: 112% auto;
}
#joji .chara_img {
  background: url(../img/in_character/EN_joji.png) no-repeat bottom center #dee34f;
  -webkit-background-size: 112% auto;
          background-size: 112% auto;
}
#sakyo .chara_img {
  background: url(../img/in_character/EN_sakyo.png) no-repeat bottom center #ffb5b5;
  -webkit-background-size: 112% auto;
          background-size: 112% auto;
}
#ukyo .chara_img {
  background: url(../img/in_character/EN_ukyo.png) no-repeat bottom center #b1b1fc;
  -webkit-background-size: 112% auto;
          background-size: 112% auto;
}
#nikkanen .chara_img {
  background: url(../img/in_character/EN_nikkanen.png) no-repeat bottom center #99e8e0;
  -webkit-background-size: 112% auto;
          background-size: 112% auto;
}

.chara_all {
  position: relative;
}

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

.chara_wrap:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 200px;
  background: url(../img/in_character/deco_line.png) no-repeat right top;
  -webkit-background-size: 100% auto;
          background-size: 100% auto;
  z-index: 1;
}

.chara_wrap.chara_disp {
  display: block;
}

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

.chara_detail .chara_img {
  position: relative;
  left: 50%;
  width: 116%;
  min-width: 435px;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  height: 516px;
  padding-top: 44px;
  overflow: hidden;
}

.chara_detail .chara_txt {
  position: relative;
  width: 89.335%;
  margin: 30px auto 0;
  text-align: left;
  line-height: 1.5;
  font-weight: 400;
  color: #444;
}

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

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

.chara_detail .chara_txt .voice {
  margin-top: 5px;
  font-size: 16px;
}

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

.chara_detail .chara_txt .txt {
  margin-top: 12px;
  font-size: 13px;
}

.chara_list {
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-278px);
      -ms-transform: translateY(-278px);
          transform: translateY(-278px);
  width: 100%;
  letter-spacing: -.4em;
  font-size: 0;
  overflow: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 1;
}

.chara_list.now_change {
  overflow: visible;
}

.chara_list ul {
  position: relative;
  width: 1160px;
}

.chara_list li {
  position: relative;
  width: 60px;
  margin: 0 5px;
  margin-bottom: 20px;
  display: inline-block;
  background-color: #fff;
  border-radius: 50%;
}

.chara_list li img {
  opacity: .6;
  filter: alpha(opacity=60);
  -webkit-transition: opacity .1s linear;
          transition: opacity .1s linear;
}

.chara_list li: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: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 img {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transition: opacity .3s linear;
          transition: opacity .3s linear;
}

.chara_list li.list_disp:before {
  -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:after {
  -webkit-animation: scale_anm .9s ease alternate .1s, border_anm .7s ease-in-out alternate .4s;
          animation: scale_anm .9s ease alternate .1s, border_anm .7s ease-in-out alternate .4s;
}

@-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(30);
            transform: translate(-50%, -50%) scale(30);
  }
}

@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(30);
            transform: translate(-50%, -50%) scale(30);
  }
}

@-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);
            transform: translate(-50%, -50%) scale(3);
  }
}

@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);
            transform: translate(-50%, -50%) scale(3);
  }
}

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

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