@charset "UTF-8";
@media only screen and (min-width: 751px) {
  .main_contents {
    background: url("../img/pc/common/bg_logo.png") fixed no-repeat -180px center, url("../img/pc/common/bg_logo.png") fixed no-repeat right -180px center;
  }
}
@media only screen and (max-width: 750px) {
  .main_contents {
    position: relative;
  }
  .main_contents::before {
    background: url("../img/sp/common/bg_logo.png") no-repeat center center;
    content: "";
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -1;
  }
}
.main_contents h2 {
  background: no-repeat center;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  text-align: center;
  position: relative;
}
.main_contents h2:after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background: url("../img/pc/common/line.png") repeat-x center;
  position: absolute;
  bottom: -1px;
}
@media only screen and (min-width: 751px) {
  .main_contents h2 {
    background-image: url("../img/pc/common/bg_title.jpg");
    padding: 110px 0 47px;
  }
  .main_contents h2 img {
    width: auto;
    height: 80px;
  }
}
@media only screen and (max-width: 750px) {
  .main_contents h2 {
    background-image: url("../img/sp/common/bg_title.jpg");
    padding: 155px 0 47px;
  }
  .main_contents h2 img {
    width: 100%;
  }
}

.tab_character li {
  position: relative;
}
.tab_character li a {
  display: block;
  width: 100%;
  height: 100%;
}
@media only screen and (min-width: 751px) {
  .tab_character {
    position: absolute;
    top: 40px;
    width: 1080px;
    left: 50%;
    margin-left: -540px;
    z-index: 10;
  }
  .tab_character li {
    display: inline-block;
    width: 130px;
    height: 42px;
    overflow: hidden;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    cursor: pointer;
  }
  .tab_character li:hover {
    opacity: 0.6;
  }
  .tab_character li.current:hover {
    opacity: 1;
    cursor: default;
  }
  .tab_character .saber {
    background: url("../img/pc/in_character/tab/tab_saber.png");
  }
  .tab_character .archer {
    background: url("../img/pc/in_character/tab/tab_archer.png");
  }
  .tab_character .lancer {
    background: url("../img/pc/in_character/tab/tab_lancer.png");
  }
  .tab_character .rider {
    background: url("../img/pc/in_character/tab/tab_rider.png");
  }
  .tab_character .caster {
    background: url("../img/pc/in_character/tab/tab_caster.png");
  }
  .tab_character .assassin {
    background: url("../img/pc/in_character/tab/tab_assassin.png");
  }
  .tab_character .berserker {
    background: url("../img/pc/in_character/tab/tab_berserker.png");
  }
  .tab_character .extra {
    background: url("../img/pc/in_character/tab/tab_extra.png");
  }
}
@media only screen and (max-width: 750px) {
  .tab_character {
    width: 690px;
    margin: 50px auto 60px;
  }
  .tab_character li {
    width: 223px;
    height: 68px;
    float: left;
    margin-right: 10px;
  }
  .tab_character li:nth-child(3n) {
    margin-right: 0;
  }
  .tab_character .saber {
    background: url("../img/sp/in_character/tab/tab_saber.png");
  }
  .tab_character .archer {
    background: url("../img/sp/in_character/tab/tab_archer.png");
  }
  .tab_character .lancer {
    background: url("../img/sp/in_character/tab/tab_lancer.png");
  }
  .tab_character .rider {
    background: url("../img/sp/in_character/tab/tab_rider.png");
  }
  .tab_character .caster {
    background: url("../img/sp/in_character/tab/tab_caster.png");
  }
  .tab_character .assassin {
    background: url("../img/sp/in_character/tab/tab_assassin.png");
  }
  .tab_character .berserker {
    background: url("../img/sp/in_character/tab/tab_berserker.png");
  }
  .tab_character .extra {
    background: url("../img/sp/in_character/tab/tab_extra.png");
  }
}
.tab_character li.current {
  background-position: bottom;
}

.character_area {
  position: relative;
  overflow: hidden;
}
@media only screen and (min-width: 751px) {
  .character_area {
    min-width: 1120px;
    margin: auto;
  }
  .character_area.saber {
    background: url("../img/pc/in_character/bg/saber.png") no-repeat center 428px, url("../img/pc/in_character/class/saber.png") no-repeat left bottom;
  }
  .character_area.archer {
    background: url("../img/pc/in_character/bg/archer.png") no-repeat center 428px, url("../img/pc/in_character/class/archer.png") no-repeat left bottom;
  }
  .character_area.lancer {
    background: url("../img/pc/in_character/bg/lancer.png") no-repeat center 428px, url("../img/pc/in_character/class/lancer.png") no-repeat left bottom;
  }
  .character_area.rider {
    background: url("../img/pc/in_character/bg/rider.png") no-repeat center 428px, url("../img/pc/in_character/class/rider.png") no-repeat left bottom;
  }
  .character_area.caster {
    background: url("../img/pc/in_character/bg/caster.png") no-repeat center 428px, url("../img/pc/in_character/class/caster.png") no-repeat left bottom;
  }
  .character_area.assassin {
    background: url("../img/pc/in_character/bg/assassin.png") no-repeat center 428px, url("../img/pc/in_character/class/assassin.png") no-repeat left bottom;
  }
  .character_area.berserker {
    background: url("../img/pc/in_character/bg/berserker.png") no-repeat center 428px, url("../img/pc/in_character/class/berserker.png") no-repeat left bottom;
  }
  .character_area.shielder {
    background: url("../img/pc/in_character/bg/shielder.png") no-repeat center 428px, url("../img/pc/in_character/class/shielder.png") no-repeat left bottom;
  }
  .character_area.ruler {
    background: url("../img/pc/in_character/bg/ruler.png") no-repeat center 428px, url("../img/pc/in_character/class/ruler.png") no-repeat left bottom;
  }
  .character_area.avenger {
    background: url("../img/pc/in_character/bg/avenger.png") no-repeat center 428px, url("../img/pc/in_character/class/avenger.png") no-repeat left bottom;
  }
  .character_area.mooncancer {
    background: url("../img/pc/in_character/bg/mooncancer.png") no-repeat center 428px, url("../img/pc/in_character/class/mooncancer.png") no-repeat left bottom;
  }
  .character_area.alterego {
    background: url("../img/pc/in_character/bg/alterego.png") no-repeat center 428px, url("../img/pc/in_character/class/alterego.png") no-repeat left bottom;
  }
  .character_area.foreigner {
    background: url("../img/pc/in_character/bg/foreigner.png") no-repeat center 428px, url("../img/pc/in_character/class/foreigner.png") no-repeat left bottom;
  }
  .character_area.pretender {
    background: url("../img/pc/in_character/bg/pretender.png") no-repeat center 428px, url("../img/pc/in_character/class/pretender.png") no-repeat left bottom;
  }
}
@media only screen and (max-width: 750px) {
  .character_area {
    padding-bottom: 150px;
  }
  .character_area.saber {
    background: url("../img/sp/in_character/bg/saber.png") no-repeat center 732px, url("../img/sp/in_character/class/saber.png") no-repeat left 592px;
  }
  .character_area.archer {
    background: url("../img/sp/in_character/bg/archer.png") no-repeat center 732px, url("../img/sp/in_character/class/archer.png") no-repeat left 592px;
  }
  .character_area.lancer {
    background: url("../img/sp/in_character/bg/lancer.png") no-repeat center 732px, url("../img/sp/in_character/class/lancer.png") no-repeat left 592px;
  }
  .character_area.rider {
    background: url("../img/sp/in_character/bg/rider.png") no-repeat center 732px, url("../img/sp/in_character/class/rider.png") no-repeat left 592px;
  }
  .character_area.caster {
    background: url("../img/sp/in_character/bg/caster.png") no-repeat center 732px, url("../img/sp/in_character/class/caster.png") no-repeat left 592px;
  }
  .character_area.assassin {
    background: url("../img/sp/in_character/bg/assassin.png") no-repeat center 732px, url("../img/sp/in_character/class/assassin.png") no-repeat left 592px;
  }
  .character_area.berserker {
    background: url("../img/sp/in_character/bg/berserker.png") no-repeat center 732px, url("../img/sp/in_character/class/berserker.png") no-repeat left 592px;
  }
  .character_area.shielder {
    background: url("../img/sp/in_character/bg/shielder.png") no-repeat center 932px, url("../img/sp/in_character/class/shielder.png") no-repeat left 792px;
  }
  .character_area.ruler {
    background: url("../img/sp/in_character/bg/ruler.png") no-repeat center 932px, url("../img/sp/in_character/class/ruler.png") no-repeat left 792px;
  }
  .character_area.avenger {
    background: url("../img/sp/in_character/bg/avenger.png") no-repeat center 932px, url("../img/sp/in_character/class/avenger.png") no-repeat left 792px;
  }
  .character_area.mooncancer {
    background: url("../img/sp/in_character/bg/mooncancer.png") no-repeat center 932px, url("../img/sp/in_character/class/mooncancer.png") no-repeat left 792px;
  }
  .character_area.alterego {
    background: url("../img/sp/in_character/bg/alterego.png") no-repeat center 932px, url("../img/sp/in_character/class/alterego.png") no-repeat left 792px;
  }
  .character_area.foreigner {
    background: url("../img/sp/in_character/bg/foreigner.png") no-repeat center 932px, url("../img/sp/in_character/class/foreigner.png") no-repeat left 792px;
  }
  .character_area.pretender {
    background: url("../img/sp/in_character/bg/pretender.png") no-repeat center 932px, url("../img/sp/in_character/class/pretender.png") no-repeat left 792px;
  }
}
.character_area .tab_servant {
  position: absolute;
  letter-spacing: -0.4em;
}
@media only screen and (min-width: 751px) {
  .character_area .tab_servant.extra {
    margin-top: -75px;
    width: 400px;
  }
}

@media only screen and (max-width: 750px) {
.character_area .tab_servant.extra {

  margin-left: -300px;
  left: 50%;
  width: 600px;
}
}
.character_area .tab_servant li {
  display: inline-block;
  position: relative;
  cursor: pointer;
}
.character_area .tab_servant li:before {
  content: '';
  display: block;
  background: #2b1e17;
  opacity: 0.6;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.character_area .tab_servant li:after {
  content: '';
  display: block;
  background: url("../img/pc/in_character/frame_thumb.png") no-repeat center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.character_area .tab_servant li:hover:before {
  opacity: 0.3;
}
.character_area .tab_servant li.current:before {
  opacity: 0;
}
@media only screen and (min-width: 751px) {
  .character_area .tab_servant {
    top: 190px;
    z-index: 10;
    left: 50%;
    margin-left: -540px;
  }
  .character_area .tab_servant li {
    width: 100px;
  }
  .character_area .tab_servant li img {
    width: 100%;
  }
}
@media only screen and (max-width: 750px) {
  .character_area .tab_servant {
    width: 100%;
    text-align: center;
    top: 310px;
    z-index: 10;
  }
  .character_area .tab_servant li:after {
    background: url("../img/sp/in_character/frame_thumb.png");
  }
}
.character_area .next, .character_area .prev {
  position: absolute;
  top: 407px;
  z-index: 10;
  cursor: pointer;
}
.character_area .next img, .character_area .prev img {
  width: 100%;
}
@media only screen and (min-width: 751px) {
  .character_area .next, .character_area .prev {
    width: 40px;
  }
}
@media only screen and (max-width: 750px) {
  .character_area .next, .character_area .prev {
    top: 868px;
  }

  .character_area .next._extra, .character_area .prev._extra {
    top: 1068px
  }
}
.character_area .prev {
  left: 0;
}
.character_area .next {
  right: 0;
}
.character_area .chara_slide {
  width: 400%;
  position: relative;
}

@media only screen and (min-width: 751px) {
  .character_area .chara_slide.extra {
    width: 700%;
    position: relative;
  }
}
@media only screen and (max-width: 750px) {
  .character_area .chara_slide.extra {
    width: 700%;
    margin-top: 200px;
    position: relative;
  }
}

.wrap_chara_one {
  position: relative;
  float: left;
  width: 25%;
  overflow: hidden;
}
.wrap_chara_one.extra_1,
.wrap_chara_one.extra_2,
.wrap_chara_one.extra_3,
.wrap_chara_one.extra_4,
.wrap_chara_one.extra_5,
.wrap_chara_one.extra_6,
.wrap_chara_one.extra_7 {
  width: 14.285%;
}
@media only screen and (min-width: 751px) {
  .wrap_chara_one {
    height: 1110px;
  }
  .wrap_chara_one .chara_img {
    width: 1160px;
    height: 1110px;
    position: absolute;
    left: 50%;
    margin-left: -423px;
  }
  .wrap_chara_one .chara_name {
    position: absolute;
    top: 350px;
    left: 50%;
    margin-left: -540px;
    width: 552px;
    overflow: hidden;
  }
  .wrap_chara_one .chara_name img {
    height: 48px;
    margin-left: -25px;
  }
  .wrap_chara_one .chara_text {
    position: absolute;
    top: 460px;
    left: 50%;
    margin-left: -540px;
    width: 420px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 5px 0;
  }
  .wrap_chara_one .chara_text dl {
    font-size: 18px;
    margin-bottom: 12px;
  }
  .wrap_chara_one .chara_text dl dt {
    float: left;
  }
  .wrap_chara_one .chara_text dl dt:after {
    content: '：';
    margin-left: 5px;
  }
  .wrap_chara_one .chara_text dl dd {
    margin-left: 86px;
  }
  .wrap_chara_one .chara_text .text {
    line-height: 1.8;
    margin-top: 20px;
    font-size: 15px;
  }
  .wrap_chara_one .chara_text .text .is_hidden_sp {
    display: block;
  }
  .wrap_chara_one .chara_movie {
    position: absolute;
    width: 300px;
    height: 170px;
    background: no-repeat center;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    cursor: pointer;
    left: 50%;
    margin-left: -540px;
    top: 650px;
  }
  .wrap_chara_one .chara_movie.emiya {
    top: 680px;
  }
  .wrap_chara_one .chara_movie.archer_4 {
    top: 740px
  }
  .wrap_chara_one .chara_movie:after {
    content: '';
    display: block;
    background: url("../img/common/play.png") no-repeat center, url("../img/pc/in_character/frame_movie.png");
    -webkit-background-size: 60px,contain;
    -o-background-size: 60px,contain;
    background-size: 60px,contain;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
  }
}
@media only screen and (max-width: 750px) {
  .wrap_chara_one .chara_img {
    width: 750px;
    height: 1260px;
  }
  .wrap_chara_one .chara_name {
    margin-bottom: 35px;
  }
  .wrap_chara_one .chara_text {
    margin: 0 30px 55px;
  }
  .wrap_chara_one .chara_text dl {
    font-size: 28px;
    margin-bottom: 12px;
  }
  .wrap_chara_one .chara_text dl dt {
    float: left;
  }
  .wrap_chara_one .chara_text dl dt:after {
    content: '：';
    margin-left: 5px;
  }
  .wrap_chara_one .chara_text dl dd {
    margin-left: 86px;
  }
  .wrap_chara_one .chara_text .text {
    font-size: 24px;
    line-height: 1.8;
    margin-top: 20px;
  }
  .wrap_chara_one .chara_text .text .is_hidden_sp {
    display: none;
  }
  .wrap_chara_one .chara_movie {
    position: relative;
    width: 338px;
    height: 190px;
    background: no-repeat center;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-left: 30px;
  }
  .wrap_chara_one .chara_movie:after {
    content: '';
    display: block;
    background: url("../img/common/play.png") no-repeat center, url("../img/sp/in_character/frame_movie.png");
    -webkit-background-size: 60px,contain;
    -o-background-size: 60px,contain;
    background-size: 60px,contain;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
  }
}
@media only screen and (min-width: 751px) {
  .wrap_chara_one.saber_1 .chara_img {
    background: url("../img/pc/in_character/img/saber01.png");
  }
}
@media only screen and (max-width: 750px) {
  .wrap_chara_one.saber_1 .chara_img {
    background: url("../img/sp/in_character/img/saber01.png");
  }
}
@media only screen and (min-width: 751px) {
  .wrap_chara_one.saber_2 .chara_img {
    background: url("../img/pc/in_character/img/saber02.png");
  }
}
@media only screen and (max-width: 750px) {
  .wrap_chara_one.saber_2 .chara_img {
    background: url("../img/sp/in_character/img/saber02.png");
  }
}
@media only screen and (min-width: 751px) {
  .wrap_chara_one.saber_3 .chara_img {
    background: url("../img/pc/in_character/img/saber03.png");
  }
}
@media only screen and (max-width: 750px) {
  .wrap_chara_one.saber_3 .chara_img {
    background: url("../img/sp/in_character/img/saber03.png");
  }
}
@media only screen and (min-width: 751px) {
  .wrap_chara_one.saber_4 .chara_img {
    background: url("../img/pc/in_character/img/saber04.png");
  }
}
@media only screen and (max-width: 750px) {
  .wrap_chara_one.saber_4 .chara_img {
    background: url("../img/sp/in_character/img/saber04.png");
  }
}
@media only screen and (min-width: 751px) {
  .wrap_chara_one.archer_1 .chara_img {
    background: url("../img/pc/in_character/img/archer01.png");
  }
}
@media only screen and (max-width: 750px) {
  .wrap_chara_one.archer_1 .chara_img {
    background: url("../img/sp/in_character/img/archer01.png");
  }
}
@media only screen and (min-width: 751px) {
  .wrap_chara_one.archer_2 .chara_img {
    background: url("../img/pc/in_character/img/archer02.png");
  }
}
@media only screen and (max-width: 750px) {
  .wrap_chara_one.archer_2 .chara_img {
    background: url("../img/sp/in_character/img/archer02.png");
  }
}
@media only screen and (min-width: 751px) {
  .wrap_chara_one.archer_3 .chara_img {
    background: url("../img/pc/in_character/img/archer03.png");
  }
}
@media only screen and (max-width: 750px) {
  .wrap_chara_one.archer_3 .chara_img {
    background: url("../img/sp/in_character/img/archer03.png");
  }
}
@media only screen and (min-width: 751px) {
  .wrap_chara_one.archer_4 .chara_img {
    background: url("../img/pc/in_character/img/archer04.png");
  }
}
@media only screen and (max-width: 750px) {
  .wrap_chara_one.archer_4 .chara_img {
    background: url("../img/sp/in_character/img/archer04.png");
  }
}
@media only screen and (min-width: 751px) {
  .wrap_chara_one.lancer_1 .chara_img {
    background: url("../img/pc/in_character/img/lancer01.png");
  }
}
@media only screen and (max-width: 750px) {
  .wrap_chara_one.lancer_1 .chara_img {
    background: url("../img/sp/in_character/img/lancer01.png");
  }
}
@media only screen and (min-width: 751px) {
  .wrap_chara_one.lancer_2 .chara_img {
    background: url("../img/pc/in_character/img/lancer02.png");
  }
}
@media only screen and (max-width: 750px) {
  .wrap_chara_one.lancer_2 .chara_img {
    background: url("../img/sp/in_character/img/lancer02.png");
  }
}
@media only screen and (min-width: 751px) {
  .wrap_chara_one.lancer_3 .chara_img {
    background: url("../img/pc/in_character/img/lancer03.png");
  }
}
@media only screen and (max-width: 750px) {
  .wrap_chara_one.lancer_3 .chara_img {
    background: url("../img/sp/in_character/img/lancer03.png");
  }
}
@media only screen and (min-width: 751px) {
  .wrap_chara_one.lancer_4 .chara_img {
    background: url("../img/pc/in_character/img/lancer04.png");
  }
}
@media only screen and (max-width: 750px) {
  .wrap_chara_one.lancer_4 .chara_img {
    background: url("../img/sp/in_character/img/lancer04.png");
  }
}
@media only screen and (min-width: 751px) {
  .wrap_chara_one.rider_1 .chara_img {
    background: url("../img/pc/in_character/img/rider01.png");
  }
}
@media only screen and (max-width: 750px) {
  .wrap_chara_one.rider_1 .chara_img {
    background: url("../img/sp/in_character/img/rider01.png");
  }
}
@media only screen and (min-width: 751px) {
  .wrap_chara_one.rider_2 .chara_img {
    background: url("../img/pc/in_character/img/rider02.png");
  }
}
@media only screen and (max-width: 750px) {
  .wrap_chara_one.rider_2 .chara_img {
    background: url("../img/sp/in_character/img/rider02.png");
  }
}
@media only screen and (min-width: 751px) {
  .wrap_chara_one.rider_3 .chara_img {
    background: url("../img/pc/in_character/img/rider03.png");
  }
}
@media only screen and (max-width: 750px) {
  .wrap_chara_one.rider_3 .chara_img {
    background: url("../img/sp/in_character/img/rider03.png");
  }
}
@media only screen and (min-width: 751px) {
  .wrap_chara_one.rider_4 .chara_img {
    background: url("../img/pc/in_character/img/rider04.png");
  }
}
@media only screen and (max-width: 750px) {
  .wrap_chara_one.rider_4 .chara_img {
    background: url("../img/sp/in_character/img/rider04.png");
  }
}
@media only screen and (min-width: 751px) {
  .wrap_chara_one.caster_1 .chara_img {
    background: url("../img/pc/in_character/img/caster01.png");
  }
}
@media only screen and (max-width: 750px) {
  .wrap_chara_one.caster_1 .chara_img {
    background: url("../img/sp/in_character/img/caster01.png");
  }
}
@media only screen and (min-width: 751px) {
  .wrap_chara_one.caster_2 .chara_img {
    background: url("../img/pc/in_character/img/caster02.png");
  }
}
@media only screen and (max-width: 750px) {
  .wrap_chara_one.caster_2 .chara_img {
    background: url("../img/sp/in_character/img/caster02.png");
  }
}
@media only screen and (min-width: 751px) {
  .wrap_chara_one.caster_3 .chara_img {
    background: url("../img/pc/in_character/img/caster03.png");
  }
}
@media only screen and (max-width: 750px) {
  .wrap_chara_one.caster_4 .chara_img {
    background: url("../img/sp/in_character/img/caster04.png");
  }
}
@media only screen and (min-width: 751px) {
  .wrap_chara_one.caster_4 .chara_img {
    background: url("../img/pc/in_character/img/caster04.png");
  }
}
@media only screen and (max-width: 750px) {
  .wrap_chara_one.caster_3 .chara_img {
    background: url("../img/sp/in_character/img/caster03.png");
  }
}
@media only screen and (min-width: 751px) {
  .wrap_chara_one.assassin_1 .chara_img {
    background: url("../img/pc/in_character/img/assassin01.png");
  }
}
@media only screen and (max-width: 750px) {
  .wrap_chara_one.assassin_1 .chara_img {
    background: url("../img/sp/in_character/img/assassin01.png");
  }
}
@media only screen and (min-width: 751px) {
  .wrap_chara_one.assassin_2 .chara_img {
    background: url("../img/pc/in_character/img/assassin02.png");
  }
}
@media only screen and (max-width: 750px) {
  .wrap_chara_one.assassin_2 .chara_img {
    background: url("../img/sp/in_character/img/assassin02.png");
  }
}
@media only screen and (min-width: 751px) {
  .wrap_chara_one.assassin_3 .chara_img {
    background: url("../img/pc/in_character/img/assassin03.png");
  }
}
@media only screen and (max-width: 750px) {
  .wrap_chara_one.assassin_3 .chara_img {
    background: url("../img/sp/in_character/img/assassin03.png");
  }
}
@media only screen and (min-width: 751px) {
  .wrap_chara_one.assassin_4 .chara_img {
    background: url("../img/pc/in_character/img/assassin04.png");
  }
}
@media only screen and (max-width: 750px) {
  .wrap_chara_one.assassin_4 .chara_img {
    background: url("../img/sp/in_character/img/assassin04.png");
  }
}
@media only screen and (min-width: 751px) {
  .wrap_chara_one.berserker_1 .chara_img {
    background: url("../img/pc/in_character/img/berserker01.png");
  }
}
@media only screen and (max-width: 750px) {
  .wrap_chara_one.berserker_1 .chara_img {
    background: url("../img/sp/in_character/img/berserker01.png");
  }
}
@media only screen and (min-width: 751px) {
  .wrap_chara_one.berserker_2 .chara_img {
    background: url("../img/pc/in_character/img/berserker02.png");
  }
}
@media only screen and (max-width: 750px) {
  .wrap_chara_one.berserker_2 .chara_img {
    background: url("../img/sp/in_character/img/berserker02.png");
  }
}
@media only screen and (min-width: 751px) {
  .wrap_chara_one.berserker_3 .chara_img {
    background: url("../img/pc/in_character/img/berserker03.png");
  }
}
@media only screen and (max-width: 750px) {
  .wrap_chara_one.berserker_3 .chara_img {
    background: url("../img/sp/in_character/img/berserker03.png");
  }
}
@media only screen and (min-width: 751px) {
  .wrap_chara_one.berserker_4 .chara_img {
    background: url("../img/pc/in_character/img/berserker04.png");
  }
}
@media only screen and (max-width: 750px) {
  .wrap_chara_one.berserker_4 .chara_img {
    background: url("../img/sp/in_character/img/berserker04.png");
  }
}
@media only screen and (min-width: 751px) {
  .wrap_chara_one.extra_1 .chara_img {
    background: url("../img/pc/in_character/img/extra01.png");
  }
}
@media only screen and (max-width: 750px) {
  .wrap_chara_one.extra_1 .chara_img {
    background: url("../img/sp/in_character/img/extra01.png");
  }
}
@media only screen and (min-width: 751px) {
  .wrap_chara_one.extra_2 .chara_img {
    background: url("../img/pc/in_character/img/extra02.png");
  }
}
@media only screen and (max-width: 750px) {
  .wrap_chara_one.extra_2 .chara_img {
    background: url("../img/sp/in_character/img/extra02.png");
  }
}
@media only screen and (min-width: 751px) {
  .wrap_chara_one.extra_3 .chara_img {
    background: url("../img/pc/in_character/img/extra03.png");
  }
}
@media only screen and (max-width: 750px) {
  .wrap_chara_one.extra_3 .chara_img {
    background: url("../img/sp/in_character/img/extra03.png");
  }
}
@media only screen and (min-width: 751px) {
  .wrap_chara_one.extra_4 .chara_img {
    background: url("../img/pc/in_character/img/extra04.png");
  }
}
@media only screen and (max-width: 750px) {
  .wrap_chara_one.extra_4 .chara_img {
    background: url("../img/sp/in_character/img/extra04.png");
  }
}
@media only screen and (min-width: 751px) {
  .wrap_chara_one.extra_5 .chara_img {
    background: url("../img/pc/in_character/img/extra05.png");
  }
}
@media only screen and (max-width: 750px) {
  .wrap_chara_one.extra_5 .chara_img {
    background: url("../img/sp/in_character/img/extra05.png");
  }
}
@media only screen and (min-width: 751px) {
  .wrap_chara_one.extra_6 .chara_img {
    background: url("../img/pc/in_character/img/extra06.png");
  }
}
@media only screen and (max-width: 750px) {
  .wrap_chara_one.extra_6 .chara_img {
    background: url("../img/sp/in_character/img/extra06.png");
  }
}
@media only screen and (min-width: 751px) {
  .wrap_chara_one.extra_7 .chara_img {
    background: url("../img/pc/in_character/img/extra07.png");
  }
}
@media only screen and (max-width: 750px) {
  .wrap_chara_one.extra_7 .chara_img {
    background: url("../img/sp/in_character/img/extra07.png");
  }
}

.floatContents {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  opacity: 0;
  z-index: 5002;
}
.floatContents .close {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 34px;
  right: 15px;
  cursor: pointer;
}
.floatContents .close:after, .floatContents .close:before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 1px;
  background: #fff;
}
.floatContents .close:after {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.floatContents .close:before {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.floatContents .player {
  position: absolute;
  top: 50%;
  left: 50%;
}
.floatContents .wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
@media only screen and (min-width: 751px) {
  .floatContents .close {
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    cursor: pointer;
  }
  .floatContents .close:hover {
    opacity: 0.6;
  }
  .floatContents .player {
    width: 960px;
    height: 540px;
    margin-top: -270px;
    margin-left: -480px;
  }
}
@media only screen and (max-width: 750px) {
  .floatContents .player {
    width: 750px;
    height: 422px;
    left: 0;
    margin-top: -211px;
  }
}