@charset "UTF-8";
.clearfix {
  zoom: 1;
}

.clearfix::after {
  content: "";
  clear: both;
  display: block;
}

@media screen and (min-width: 769px) {
  .is-pc {
    display: block;
  }
  .is-sp {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .is-pc {
    display: none;
  }
  .is-sp {
    display: block;
  }
}

/* ============================================================================================
 * TOP
 *
 * @date 2017-07-12
 * @include _top
 *
 * memo:
 * // background: url("../img/common/headline_bg.png") center top no-repeat
 * // width: -webkit-calc(100% - 127px)
 * // width: calc(100% - 127px)
 * // transition: all .2s
 *
 * ============================================================================================ */
#character-page {
  padding-top: 150px;
  padding-bottom: 10px;
}

.headline {
  width: 100%;
  position: relative;
  z-index: 1;
}

.headline__inner {
  position: relative;
  width: 680px;
  margin: 0 auto;
}

.headline__inner .m--headline {
  margin-bottom: 40px;
}

.detail {
  width: 100%;
  position: relative;
  z-index: 1;
}

.detail__bg {
  width: 100%;
  min-width: 1920px;
  position: absolute;
  left: 50%;
  top: -76px;
  z-index: 0;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  pointer-events: none;
}

.detail__inner {
  position: relative;
  z-index: 1;
  width: 940px;
  min-height: 735px;
  margin: 0 auto;
}

.detail__block {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  visibility: hidden;
  pointer-events: none;
}

.detail__block.is--current {
  visibility: visible;
  pointer-events: auto;
}

.detail__name {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.detail__visual {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.detail__desc {
  position: relative;
  z-index: 1;
  width: 423px;
  margin-left: 422px;
}

.detail__desc .desc--name {
  color: #2D1E00;
  font-family: "Hina Mincho", serif;
  font-weight: 400;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-font-feature-settings: "palt" 1;
  font-feature-settings: "palt" 1;
  font-size: 38px;
  line-height: 1.3em;
  margin-left: 14px;
  margin-bottom: 15px;
  white-space: nowrap;
}

.detail__desc .desc--cv {
  color: #2D1E00;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-left: 14px;
  margin-bottom: 20px;
}

.detail__desc .desc--cv__head {
  font-family: jazzier, serif;
  font-weight: 400;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-font-feature-settings: "palt" 1;
  font-feature-settings: "palt" 1;
  font-size: 12px;
  letter-spacing: 0.3em;
  line-height: 1em;
}

.detail__desc .desc--cv__name {
  font-size: 16px;
  letter-spacing: 0.2em;
  line-height: 1em;
}

.detail__desc .desc--text {
  font-family: "Hina Mincho", serif;
  font-weight: 400;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-font-feature-settings: "palt" 1;
  font-feature-settings: "palt" 1;
  font-size: 14px;
  letter-spacing: 0.05em;
  line-height: 2em;
  margin-left: 14px;
  padding-bottom: 30px;
  margin-bottom: 15px;
}

.detail__desc .desc--text::before {
  content: "";
  display: block;
  width: 100%;
  height: 13px;
  background: url("../img/character/icon_line.png") center top no-repeat;
  background-size: 100% auto;
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 0;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.detail__desc .desc--name span[data-ruby] {
  position: relative;
  display: inline-block;
}

.detail__desc .desc--text span[data-ruby] {
  position: relative;
  display: inline-block;
}

.detail__desc .desc--name span[data-ruby]::before {
  content: attr(data-ruby);
  position: absolute;
  top: -0.7em;
  left: 50%;
  font-size: 35px;
  line-height: 1em;
  letter-spacing: 0.1em;
  -webkit-transform: translateX(-50%) scale(0.5);
  transform: translateX(-50%) scale(0.5);
  white-space: nowrap;
  transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
}

.detail__desc .desc--text span[data-ruby]::before {
  content: attr(data-ruby);
  position: absolute;
  top: -0.4em;
  left: 50%;
  font-size: 14px;
  line-height: 1em;
  letter-spacing: 0.1em;
  -webkit-transform: translateX(-50%) scale(0.5);
  transform: translateX(-50%) scale(0.5);
  white-space: nowrap;
  transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
}

.detail__desc .desc--prof {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 15px;
}

.detail__desc .desc--prof p {
  font-family: "Hina Mincho", serif;
  font-weight: 400;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-font-feature-settings: "palt" 1;
  font-feature-settings: "palt" 1;
  font-size: 12px;
  line-height: 2em;
  margin-left: 14px;
}

.detail__desc .desc--prof p:first-of-type {
  margin-right: 10px;
}

.detail__desc .desc--prof___bbb {
  display: inline-block;
  background: url("../img/character/icon_bbb.png") center top no-repeat;
  background-size: cover;
  width: 20px;
  height: 11px;
  font-size: 0;
  line-height: 0;
  margin-right: 3px;
}

.detail__desc .desc--pics {
  margin-left: 0px;
  pointer-events: none;
}

.detail__prev,
.detail__next {
  position: absolute;
  top: 277px;
  z-index: 10;
}

.detail__prev a,
.detail__next a {
  display: block;
}

.detail__prev span,
.detail__next span {
  display: block;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.detail__prev {
  left: 0;
}

.detail__prev a:hover span {
  -webkit-transform: translateX(-10px);
  transform: translateX(-10px);
}

.detail__next {
  right: 0;
}

.detail__next a:hover span {
  -webkit-transform: translateX(10px);
  transform: translateX(10px);
}

#mash .detail__name {
  left: 48px;
  top: 130px;
}

#mash .detail__visual {
  left: 90px;
  top: 12px;
}

#finn .detail__name {
  left: 53px;
  top: 105px;
}

#finn .detail__visual {
  left: 134px;
  top: 27px;
}

#lance .detail__name {
  left: 56px;
  top: 131px;
}

#lance .detail__visual {
  left: 79px;
  top: -4px;
}

#dot .detail__name {
  left: 51px;
  top: 127px;
}

#dot .detail__visual {
  left: 111px;
  top: -3px;
}

#lemon .detail__name {
  left: 47px;
  top: 131px;
}

#lemon .detail__visual {
  left: 101px;
  top: 35px;
}

#rayne .detail__name {
  left: 47px;
  top: 131px;
}

#rayne .detail__visual {
  left: 20px;
  top: 0px;
}

#abel .detail__name {
  left: 47px;
  top: 110px;
}

#abel .detail__visual {
  left: 60px;
  top: 10px;
}

#abyss .detail__name {
  left: 47px;
  top: 110px;
}

#abyss .detail__visual {
  left: 40px;
  top: 5px;
}

.localnav {
  width: 100%;
  position: relative;
  z-index: 1;
}

.localnav__inner {
  position: relative;
  z-index: 1;
  width: 900px;
  margin: 0 auto;
}

.localnav__list {
  width: 100%;
}

.localnav__list ul {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.localnav__list li {
  margin: 0 13px;
  margin-bottom: 30px;
  position: relative;
  z-index: 1;
}

.localnav__list li span {
  display: block;
  text-align: center;
  position: relative;
}

.localnav__list li span.ann--rumble {
  -webkit-animation: doorRumble 0.3s linear;
  animation: doorRumble 0.3s linear;
}

.localnav__list li span:first-of-type {
  margin-bottom: 17px;
  min-height: 153px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.localnav__list li span:first-of-type i {
  position: relative;
  z-index: 1;
  display: block;
  transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.localnav__list li span:first-of-type.ann-slack::before {
  -webkit-animation: slack 0.3s;
  animation: slack 0.3s;
}

.localnav__list li span:last-of-type {
  background: url("../img/character/bg_name.png") center top no-repeat;
  background-size: 100% 100%;
  width: 71px;
  height: 16px;
  color: #1E1400;
  font-family: saber, sans-serif;
  font-weight: 400;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-font-feature-settings: "palt" 1;
  font-feature-settings: "palt" 1;
  font-size: 14px;
  line-height: 16px;
  margin: 0 auto;
  transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.localnav__list li.is--current {
  z-index: 0;
}

.localnav__list li.is--current a {
  pointer-events: none;
}

.localnav__list li.is--current span:first-of-type::before {
  content: "";
  display: block;
  width: 304px;
  height: 292px;
  background: url("../img/character/bg_nav_current.png") center center no-repeat;
  background-size: cover;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 0;
}

.localnav__list li.is--current span:first-of-type i {
  -webkit-transform: rotate(-13deg);
  transform: rotate(-13deg);
}

.localnav__list li.is--current span:last-of-type {
  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);
}

.localnav__list a {
  position: relative;
  display: block;
  text-decoration: none;
}

.localnav__list a:hover span:first-of-type i {
  -webkit-transform: rotate(13deg) scale(1.05);
  transform: rotate(13deg) scale(1.05);
}

.localnav__list a:hover span:last-of-type {
  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);
}

@-webkit-keyframes slack {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes slack {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes doorRumble {
  0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
    transform: translate(0px, 0px) rotate(0deg);
  }
  10% {
    -webkit-transform: translate(1px, 2px) rotate(5deg);
    transform: translate(1px, 2px) rotate(5deg);
  }
  20% {
    -webkit-transform: translate(-2px, 1px) rotate(-5deg);
    transform: translate(-2px, 1px) rotate(-5deg);
  }
  30% {
    -webkit-transform: translate(1px, -2px) rotate(4deg);
    transform: translate(1px, -2px) rotate(4deg);
  }
  40% {
    -webkit-transform: translate(2px, 0px) rotate(-4deg);
    transform: translate(2px, 0px) rotate(-4deg);
  }
  50% {
    -webkit-transform: translate(-1px, 2px) rotate(2deg);
    transform: translate(-1px, 2px) rotate(2deg);
  }
  60% {
    -webkit-transform: translate(1px, -1px) rotate(-2deg);
    transform: translate(1px, -1px) rotate(-2deg);
  }
  70% {
    -webkit-transform: translate(-2px, 2px) rotate(2deg);
    transform: translate(-2px, 2px) rotate(2deg);
  }
  80% {
    -webkit-transform: translate(3px, 0px) rotate(-2deg);
    transform: translate(3px, 0px) rotate(-2deg);
  }
  90% {
    -webkit-transform: translate(-3px, 2px) rotate(2deg);
    transform: translate(-3px, 2px) rotate(2deg);
  }
  100% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
    transform: translate(0px, 0px) rotate(0deg);
  }
}

@keyframes doorRumble {
  0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
    transform: translate(0px, 0px) rotate(0deg);
  }
  10% {
    -webkit-transform: translate(1px, 2px) rotate(5deg);
    transform: translate(1px, 2px) rotate(5deg);
  }
  20% {
    -webkit-transform: translate(-2px, 1px) rotate(-5deg);
    transform: translate(-2px, 1px) rotate(-5deg);
  }
  30% {
    -webkit-transform: translate(1px, -2px) rotate(4deg);
    transform: translate(1px, -2px) rotate(4deg);
  }
  40% {
    -webkit-transform: translate(2px, 0px) rotate(-4deg);
    transform: translate(2px, 0px) rotate(-4deg);
  }
  50% {
    -webkit-transform: translate(-1px, 2px) rotate(2deg);
    transform: translate(-1px, 2px) rotate(2deg);
  }
  60% {
    -webkit-transform: translate(1px, -1px) rotate(-2deg);
    transform: translate(1px, -1px) rotate(-2deg);
  }
  70% {
    -webkit-transform: translate(-2px, 2px) rotate(2deg);
    transform: translate(-2px, 2px) rotate(2deg);
  }
  80% {
    -webkit-transform: translate(3px, 0px) rotate(-2deg);
    transform: translate(3px, 0px) rotate(-2deg);
  }
  90% {
    -webkit-transform: translate(-3px, 2px) rotate(2deg);
    transform: translate(-3px, 2px) rotate(2deg);
  }
  100% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
    transform: translate(0px, 0px) rotate(0deg);
  }
}

@media screen and (max-width: 768px) {
  /* ============================================================================================
   * SP TOP
   *
   * @date 2017-07-12
   * @include sp/_top
   *
   * memo:
   * padding: 70px
   * padding: 18.6666666667vw
   * +spimg(width, 346)
   * ============================================================================================ */
  #character-page {
    padding-top: 80px;
    padding-top: 21.3333333333vw;
    padding-bottom: 55px;
    padding-bottom: 14.6666666667vw;
  }
  .headline {
    width: 100%;
    position: relative;
    z-index: 1;
  }
  .headline__inner {
    position: relative;
    width: 92.53%;
    margin: 0 auto;
  }
  .headline__inner .m--headline {
    margin-bottom: 37.5px;
    margin-bottom: 10vw;
  }
  .headline__inner .m--headline h2 img {
    width: 344.5px;
    width: 91.8666666667vw;
    height: auto;
  }
  .detail {
    width: 100%;
    position: relative;
    z-index: 1;
    margin-bottom: 110px;
    margin-bottom: 29.3333333333vw;
  }
  .detail::after {
    content: "";
    display: block;
    width: 5px;
    width: 1.3333333333vw;
    height: 53.5px;
    height: 14.2666666667vw;
    background: url("../img/character/icon_dot.png") center center no-repeat;
    background-size: cover;
    position: absolute;
    left: 50%;
    bottom: -85px;
    bottom: -22.6666666667vw;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .detail__bg {
    width: 100%;
    min-width: 100%;
    position: absolute;
    left: 50%;
    top: 35px;
    top: 9.3333333333vw;
    z-index: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    pointer-events: none;
  }
  .detail__inner {
    position: relative;
    z-index: 1;
    width: 92%;
    min-height: auto;
    margin: 0 auto;
  }
  .detail__block {
    width: 100%;
    height: 100%;
    position: relative;
    left: auto;
    top: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    visibility: hidden;
    display: none;
    pointer-events: none;
  }
  .detail__block.is--current {
    visibility: visible;
    display: block;
    pointer-events: auto;
  }
  .detail__name {
    position: absolute;
    z-index: 0;
    pointer-events: none;
  }
  .detail__visual {
    position: relative;
    z-index: 1;
    pointer-events: none;
    text-align: center;
    height: 445px;
    height: 118.6666666667vw;
  }
  .detail__desc {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-left: 0;
  }
  .detail__desc .desc--name {
    color: #ffffff;
    font-family: "Hina Mincho", serif;
    font-weight: 400;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-font-feature-settings: "palt" 1;
    font-feature-settings: "palt" 1;
    font-size: 29px;
    font-size: 7.7333333333vw;
    line-height: 1em;
    margin-left: 10px;
    margin-left: 2.6666666667vw;
    margin-right: 10px;
    margin-right: 2.6666666667vw;
    margin-bottom: 23px;
    margin-bottom: 6.1333333333vw;
    white-space: nowrap;
    text-shadow: 1px 1px 4px black;
  }
  .detail__desc .desc--cv {
    color: #ffffff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: 10px;
    margin-left: 2.6666666667vw;
    margin-right: 10px;
    margin-right: 2.6666666667vw;
    margin-bottom: 15px;
    margin-bottom: 4vw;
  }
  .detail__desc .desc--cv__head {
    font-family: jazzier, serif;
    font-weight: 400;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-font-feature-settings: "palt" 1;
    font-feature-settings: "palt" 1;
    font-size: 10px;
    font-size: 2.6666666667vw;
    letter-spacing: 0.3em;
    line-height: 1em;
    text-shadow: 1px 1px 4px black;
  }
  .detail__desc .desc--cv__name {
    font-size: 13px;
    font-size: 3.4666666667vw;
    letter-spacing: 0.2em;
    line-height: 1em;
    text-shadow: 1px 1px 4px black;
  }
  .detail__desc .desc--text {
    font-family: "Hina Mincho", serif;
    font-weight: 400;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-font-feature-settings: "palt" 1;
    font-feature-settings: "palt" 1;
    font-size: 12px;
    font-size: 3.2vw;
    letter-spacing: 0.05em;
    line-height: 2.16em;
    margin-left: 10px;
    margin-left: 2.6666666667vw;
    margin-right: 10px;
    margin-right: 2.6666666667vw;
    padding-bottom: 25px;
    padding-bottom: 6.6666666667vw;
    margin-bottom: 0px;
    margin-bottom: 0vw;
    text-shadow: 1px 1px 4px black;
  }
  .detail__desc .desc--text::before {
    content: "";
    display: block;
    width: 100%;
    height: 13px;
    height: 3.4666666667vw;
    background: url("../img/character/icon_line_sp.png") center center no-repeat;
    background-size: cover;
    position: absolute;
    left: 50%;
    z-index: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 0;
  }
  .detail__desc .desc--text span[data-ruby] {
    position: relative;
    display: inline-block;
  }
  .detail__desc .desc--text span[data-ruby]::before {
    content: attr(data-ruby);
    position: absolute;
    top: -0.4em;
    left: 50%;
    font-size: 12px;
    font-size: 3.2vw;
    line-height: 1em;
    letter-spacing: 0.1em;
    -webkit-transform: translateX(-50%) scale(0.5);
    transform: translateX(-50%) scale(0.5);
    white-space: nowrap;
    transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
  }
  .detail__desc .desc--name span[data-ruby]::before {
    content: attr(data-ruby);
    position: absolute;
    top: -0.9em;
    left: 50%;
    font-size: 30px;
    font-size: 7.2vw;
    line-height: 1em;
    letter-spacing: 0.1em;
    -webkit-transform: translateX(-50%) scale(0.5);
    transform: translateX(-50%) scale(0.5);
    white-space: nowrap;
    transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
  }
  .detail__desc .desc--prof {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-top: 15px;
    padding-top: 4vw;
    padding-bottom: 25px;
    padding-bottom: 6.6666666667vw;
    margin-bottom: 20px;
    margin-bottom: 5.3333333333vw;
  }
  .detail__desc .desc--prof::after {
    content: "";
    display: block;
    width: 100%;
    height: 13px;
    height: 3.4666666667vw;
    background: url("../img/character/icon_line_sp.png") center center no-repeat;
    background-size: cover;
    position: absolute;
    left: 50%;
    z-index: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 0;
  }
  .detail__desc .desc--prof p {
    font-family: "Hina Mincho", serif;
    font-weight: 400;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-font-feature-settings: "palt" 1;
    font-feature-settings: "palt" 1;
    font-size: 11px;
    font-size: 2.9333333333vw;
    line-height: 2.27em;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
  }
  .detail__desc .desc--prof p:first-of-type {
    margin-left: 10px;
    margin-left: 2.6666666667vw;
    margin-right: 0;
  }
  .detail__desc .desc--prof p:last-of-type {
    margin-left: 0;
    margin-right: 10px;
    margin-right: 2.6666666667vw;
  }
  .detail__desc .desc--prof___bbb {
    display: inline-block;
    background: url("../img/character/icon_bbb.png") center top no-repeat;
    background-size: cover;
    width: 15px;
    width: 4vw;
    height: 8.5px;
    height: 2.2666666667vw;
    font-size: 0;
    line-height: 0;
    margin-right: 3px;
    margin-right: 0.8vw;
  }
  .detail__desc .desc--pics {
    margin-left: 0px;
    pointer-events: none;
    width: 100%;
    text-align: center;
  }
  .detail__prev,
  .detail__next {
    position: absolute;
    top: 185px;
    top: 49.3333333333vw;
    z-index: 10;
  }
  .detail__prev a,
  .detail__next a {
    display: block;
    line-height: 1em;
    padding: 10px;
    padding: 2.6666666667vw;
  }
  .detail__prev span,
  .detail__next span {
    display: block;
    -webkit-transition: none;
    transition: none;
  }
  .detail__prev img,
  .detail__next img {
    width: 27px;
    width: 7.2vw;
    height: auto;
  }
  .detail__prev {
    left: -10px;
    left: -2.6666666667vw;
  }
  .detail__prev a:hover span {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
  .detail__next {
    right: -10px;
    right: -2.6666666667vw;
  }
  .detail__next a:hover span {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
  #mash .detail__name {
    left: 4px;
    left: 1.0666666667vw;
    top: 80px;
    top: 21.3333333333vw;
  }
  #mash .detail__name img {
    width: 327.5px;
    width: 87.3333333333vw;
    height: auto;
  }
  #mash .detail__visual {
    left: auto;
    top: auto;
  }
  #mash .detail__visual img {
    width: 273.5px;
    width: 72.9333333333vw;
    height: auto;
    -webkit-transform: translate(5px, -5px);
    transform: translate(5px, -5px);
    -webkit-transform: translate(1.33333vw, -1.33333vw);
    transform: translate(1.33333vw, -1.33333vw);
  }
  #mash .detail__desc .desc--pics img {
    width: 305px;
    width: 81.3333333333vw;
    height: auto;
  }
  #finn .detail__name {
    left: 6.5px;
    left: 1.7333333333vw;
    top: 68px;
    top: 18.1333333333vw;
  }
  #finn .detail__name img {
    width: 179px;
    width: 47.7333333333vw;
    height: auto;
  }
  #finn .detail__visual {
    left: auto;
    top: auto;
  }
  #finn .detail__visual img {
    width: 223.5px;
    width: 59.6vw;
    height: auto;
    -webkit-transform: translate(4px, 8px);
    transform: translate(4px, 8px);
    -webkit-transform: translate(1.06667vw, 2.13333vw);
    transform: translate(1.06667vw, 2.13333vw);
  }
  #finn .detail__desc .desc--pics img {
    width: 313px;
    width: 83.4666666667vw;
    height: auto;
  }
  #lance .detail__name {
    left: 8px;
    left: 2.1333333333vw;
    top: 80px;
    top: 21.3333333333vw;
  }
  #lance .detail__name img {
    width: 200px;
    width: 53.3333333333vw;
    height: auto;
  }
  #lance .detail__visual {
    left: auto;
    top: auto;
  }
  #lance .detail__visual img {
    width: 290px;
    width: 77.3333333333vw;
    height: auto;
    -webkit-transform: translate(5px, -32px);
    transform: translate(5px, -32px);
    -webkit-transform: translate(1.33333vw, -8.53333vw);
    transform: translate(1.33333vw, -8.53333vw);
  }
  #lance .detail__desc .desc--pics img {
    width: 318px;
    width: 84.8vw;
    height: auto;
  }
  #dot .detail__name {
    left: 5px;
    left: 1.3333333333vw;
    top: 68px;
    top: 18.1333333333vw;
  }
  #dot .detail__name img {
    width: 241.5px;
    width: 64.4vw;
    height: auto;
  }
  #dot .detail__visual {
    left: auto;
    top: auto;
  }
  #dot .detail__visual img {
    width: 255px;
    width: 68vw;
    height: auto;
    -webkit-transform: translate(8px, -41px);
    transform: translate(8px, -41px);
    -webkit-transform: translate(2.13333vw, -10.93333vw);
    transform: translate(2.13333vw, -10.93333vw);
  }
  #dot .detail__desc .desc--pics img {
    width: 312px;
    width: 83.2vw;
    height: auto;
  }
  #lemon .detail__name {
    left: 5px;
    left: 1.3333333333vw;
    top: 80px;
    top: 21.3333333333vw;
  }
  #lemon .detail__name img {
    width: 209.5px;
    width: 55.8666666667vw;
    height: auto;
  }
  #lemon .detail__visual {
    left: auto;
    top: auto;
  }
  #lemon .detail__visual img {
    width: 239px;
    width: 63.7333333333vw;
    height: auto;
    -webkit-transform: translate(3px, 20px);
    transform: translate(3px, 20px);
    -webkit-transform: translate(0.8vw, 5.33333vw);
    transform: translate(0.8vw, 5.33333vw);
  }
  #lemon .detail__desc .desc--pics img {
    width: 307px;
    width: 81.8666666667vw;
    height: auto;
  }
  #rayne .detail__name {
    left: 5px;
    left: 1.3333333333vw;
    top: 80px;
    top: 21.3333333333vw;
  }
  #rayne .detail__name img {
    width: 186px;
    width: 49.6vw;
    height: auto;
  }
  #rayne .detail__visual {
    left: auto;
    top: auto;
  }
  #rayne .detail__visual img {
    width: 340px;
    width: 90.6666666667vw;
    height: auto;
    -webkit-transform: translate(3px, -20px);
    transform: translate(3px, -20px);
    -webkit-transform: translate(0.8vw, -5.33333vw);
    transform: translate(0.8vw, -5.33333vw);
  }
  #rayne .detail__desc .desc--pics img {
    width: 320px;
    width: 85.3333333333vw;
    height: auto;
  }
  #abel .detail__name {
    left: 5px;
    left: 1.3333333333vw;
    top: 80px;
    top: 21.3333333333vw;
  }
  #abel .detail__name img {
    width: 232.5px;
    width: 62vw;
    height: auto;
  }
  #abel .detail__visual {
    left: auto;
    top: auto;
  }
  #abel .detail__visual img {
    width: 305px;
    width: 81.3333333333vw;
    height: auto;
    -webkit-transform: translate(3px, -20px);
    transform: translate(3px, -20px);
    -webkit-transform: translate(0.8vw, -5.33333vw);
    transform: translate(0.8vw, -5.33333vw);
  }
  #abel .detail__desc .desc--pics {
    padding-top: 20px;
    padding-top: 5.3333333333vw;
  }
  #abel .detail__desc .desc--pics img {
    width: 312px;
    width: 83.2vw;
    height: auto;
  }
  #abyss .detail__name {
    left: 5px;
    left: 1.3333333333vw;
    top: 80px;
    top: 21.3333333333vw;
  }
  #abyss .detail__name img {
    width: 185px;
    width: 49.3333333333vw;
    height: auto;
  }
  #abyss .detail__visual {
    left: auto;
    top: auto;
  }
  #abyss .detail__visual img {
    width: 323.5px;
    width: 86.2666666667vw;
    height: auto;
    -webkit-transform: translate(3px, -35px);
    transform: translate(3px, -35px);
    -webkit-transform: translate(0.8vw, -9.33333vw);
    transform: translate(0.8vw, -9.33333vw);
  }
  #abyss .detail__desc .desc--pics {
    padding-top: 20px;
    padding-top: 5.3333333333vw;
  }
  #abyss .detail__desc .desc--pics img {
    width: 310px;
    width: 82.6666666667vw;
    height: auto;
  }
  .localnav {
    width: 100%;
    position: relative;
    z-index: 1;
  }
  .localnav__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 0 auto;
  }
  .localnav__list {
    width: 100%;
  }
  .localnav__list ul {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .localnav__list li {
    margin: 0 15px;
    margin: 0 4vw;
    margin-bottom: 25px;
    margin-bottom: 6.6666666667vw;
    position: relative;
    width: 75px;
    width: 20vw;
  }
  .localnav__list li span {
    display: block;
    text-align: center;
    position: relative;
    transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
  }
  .localnav__list li span:first-of-type {
    margin-bottom: 6px;
    margin-bottom: 1.6vw;
    min-height: 94px;
    min-height: 25.0666666667vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .localnav__list li span:first-of-type i {
    position: relative;
    z-index: 1;
    display: block;
    transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  .localnav__list li span:last-of-type {
    background: url("../img/character/bg_name.png") center top no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 17px;
    height: 4.5333333333vw;
    color: #1E1400;
    font-family: saber, sans-serif;
    font-weight: 400;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-font-feature-settings: "palt" 1;
    font-feature-settings: "palt" 1;
    font-size: 15px;
    font-size: 4vw;
    line-height: 17px;
    line-height: 4.5333333333vw;
    margin: 0 auto;
    transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  .localnav__list li.is--current a {
    pointer-events: none;
  }
  .localnav__list li.is--current span:first-of-type::before {
    content: "";
    display: block;
    width: 182px;
    width: 48.5333333333vw;
    height: 175.5px;
    height: 46.8vw;
    background: url("../img/character/bg_nav_current.png") center center no-repeat;
    background-size: cover;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 0;
    transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
  }
  .localnav__list li.is--current span:first-of-type i {
    -webkit-transform: rotate(-13deg) scale(0.95);
    transform: rotate(-13deg) scale(0.95);
  }
  .localnav__list li.is--current span:last-of-type {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  .localnav__list a {
    position: relative;
    display: block;
    text-decoration: none;
  }
  .localnav__list a:hover span:first-of-type i {
    -webkit-transform: rotate(-13deg) scale(0.95);
    transform: rotate(-13deg) scale(0.95);
  }
  .localnav__list a:hover span:last-of-type {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  .localnav__list img {
    width: 100%;
    height: auto;
  }
}

/*************************************************************************************************/
@media screen and (min-width: 769px) {
  .detail__name {
    left: 48px;
    top: 130px;
    width: 655px;
  }
  .detail__visual {
    width: 305px;
    left: 90px;
    top: 12px;
  }
  #wahlberg .detail__visual {
    width: 376px;
    left: 45px;
    top: 12px;
  }
  #wirth .detail__visual {
    width: 340px;
    left: 70px;
    top: 12px;
  }
  #mairo .detail__visual {
    width: 336px;
    left: 60px;
  }
  #love .detail__visual {
    width: 366px;
    left: 60px;
  }
  #olore .detail__visual {
    width: 390px;
    left: 40px;
  }
  #cell .detail__visual {
    width: 336px;
    left: 70px;
  }
  #ryoh .detail__visual,
  #orter .detail__visual,
  #kaldo .detail__visual,
  #renatus .detail__visual,
  #agito .detail__visual,
  #tsurara .detail__visual,
  #sophina .detail__visual,
  #margarette .detail__visual,
  #carpaccio .detail__visual,
  #innocent .detail__visual,
  #max .detail__visual {
    width: 570px;
    left: -65px;
  }
}

@media screen and (max-width: 768px) {
  .detail__name {
    left: 1.0666666667vw;
    top: 21.3333333333vw;
  }
  .detail__visual {
    left: auto;
    top: auto;
    position: relative;
    z-index: 1;
    pointer-events: none;
    text-align: center;
    height: 118.6666666667vw;
  }
  .detail__visual img {
    width: 273.5px;
    width: 72.9333333333vw;
    height: auto;
    -webkit-transform: translate(1.33333vw, -1.33333vw);
    transform: translate(1.33333vw, -1.33333vw);
  }
  #wahlberg .detail__visual img {
    width: 89.933333vw;
  }
  #wirth .detail__visual img {
    width: 84.933333vw;
  }
  #mairo .detail__visual img {
    width: 79.933333vw;
  }
  #love .detail__visual img {
    width: 84.933333vw;
  }
  #olore .detail__visual img {
    width: 87.933333vw;
  }
  #ryoh .detail__visual img,
  #orter .detail__visual img,
  #kaldo .detail__visual img,
  #renatus .detail__visual img,
  #agito .detail__visual img,
  #tsurara .detail__visual img,
  #sophina .detail__visual img,
  #margarette .detail__visual img,
  #carpaccio .detail__visual img,
  #innocent .detail__visual img,
  #max .detail__visual img {
    position: absolute;
    left: 55%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 130.933333vw !important;
    top: -20px;
  }
}

/*************************************************************************************************/
.soukanzu {
  width: 432px;
  margin: 0 auto 80px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  cursor: pointer;
}

@media screen and (max-width: 768px) {
  .soukanzu {
    width: 80%;
    margin: 40px auto 80px;
  }
}

@media screen and (min-width: 769px) {
  .soukanzu:hover {
    -webkit-transform: rotate(3deg) scale(1.05);
    transform: rotate(3deg) scale(1.05);
  }
}

.soukanzu_box {
  position: relative;
  width: 1000px;
  margin: 0 auto;
}

@media screen and (min-width: 769px) {
  .soukanzu_box {
    padding: 60px 0;
  }
}

@media screen and (max-width: 768px) {
  .soukanzu_box {
    width: 100%;
  }
}

.soukanzu_box a {
  display: block;
  position: absolute;
  width: 92px;
  padding-bottom: 110px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

@media screen and (max-width: 768px) {
  .soukanzu_box a {
    width: 20.5%;
    padding-bottom: 24%;
    -webkit-tap-highlight-color: transparent;
  }
}

/*************************************************************/
/*レアン寮**************************************************************/
/*アベル・ウォーカー*/
.soukanzu_box a.abel {
  top: 185px;
  left: 78px;
}

@media screen and (max-width: 768px) {
  .soukanzu_box a.abel {
    top: 4.8%;
    left: 13.6%;
  }
}

/*アビス・レイザー*/
.soukanzu_box a.abyss {
  top: 185px;
  left: 203px;
}

@media screen and (max-width: 768px) {
  .soukanzu_box a.abyss {
    top: 4.8%;
    left: 39.7%;
  }
}

/*ワース・マドル*/
.soukanzu_box a.wirth {
  top: 185px;
  left: 328px;
}

@media screen and (max-width: 768px) {
  .soukanzu_box a.wirth {
    top: 4.8%;
    left: 65.6%;
  }
}

/*マイロ・ジェーニアス*/
.soukanzu_box a.milo {
  top: 185px;
  left: 454px;
}

@media screen and (max-width: 768px) {
  .soukanzu_box a.milo {
    top: 11.4%;
    left: 13.6%;
  }
}

/*ラブ・キュート*/
.soukanzu_box a.love {
  top: 185px;
  left: 579px;
}

@media screen and (max-width: 768px) {
  .soukanzu_box a.love {
    top: 11.4%;
    left: 39.7%;
  }
}

/*オロル・アンドリュー*/
.soukanzu_box a.olore {
  top: 185px;
  left: 705px;
}

@media screen and (max-width: 768px) {
  .soukanzu_box a.olore {
    top: 11.4%;
    left: 65.6%;
  }
}

/*アンサー・シンリ*/
.soukanzu_box a.anser {
  top: 185px;
  left: 831px;
}

@media screen and (max-width: 768px) {
  .soukanzu_box a.anser {
    top: 18.2%;
    left: 13.6%;
  }
}

/*シルバ・アイアン*/
.soukanzu_box a.silva {
  top: 411px;
  left: 76px;
}

@media screen and (max-width: 768px) {
  .soukanzu_box a.silva {
    top: 18.5%;
    left: 55.4%;
  }
}

/*オルカ寮**************************************************************/
/*マーガレット・マカロン*/
.soukanzu_box a.margarette {
  left: 375px;
  top: 411px;
}

@media screen and (max-width: 768px) {
  .soukanzu_box a.margarette {
    top: 27.4%;
    left: 12%;
  }
}

/*カルパッチョ・ローヤン*/
.soukanzu_box a.carpaccio {
  left: 523px;
  top: 411px;
}

@media screen and (max-width: 768px) {
  .soukanzu_box a.carpaccio {
    top: 27.4%;
    left: 38.2%;
  }
}

/*ウォールバーグ*/
.soukanzu_box a.wahlberg {
  left: 824px;
  top: 411px;
}

@media screen and (max-width: 768px) {
  .soukanzu_box a.wahlberg {
    top: 27.4%;
    left: 71.6%;
  }
}

/*アドラ寮**************************************************************/
/*マッシュ・バーンデッド*/
.soukanzu_box a.mash {
  top: 652px;
  left: 39px;
}

@media screen and (max-width: 768px) {
  .soukanzu_box a.mash {
    top: 36.6%;
    left: 13.6%;
  }
}

/*フィン・エイムズ*/
.soukanzu_box a.finn {
  top: 652px;
  left: 155px;
}

@media screen and (max-width: 768px) {
  .soukanzu_box a.finn {
    top: 36.6%;
    left: 39.7%;
  }
}

/*ランス・クラウン*/
.soukanzu_box a.lance {
  top: 652px;
  left: 269px;
}

@media screen and (max-width: 768px) {
  .soukanzu_box a.lance {
    top: 36.6%;
    left: 66%;
  }
}

/*ドット・バレット*/
.soukanzu_box a.dot {
  top: 652px;
  left: 384px;
}

@media screen and (max-width: 768px) {
  .soukanzu_box a.dot {
    top: 43.3%;
    left: 13.6%;
  }
}

/*レモン・アーヴィン*/
.soukanzu_box a.lemon {
  top: 652px;
  left: 494px;
}

@media screen and (max-width: 768px) {
  .soukanzu_box a.lemon {
    top: 43.3%;
    left: 39.7%;
  }
}

/*トム・ノエルズ*/
.soukanzu_box a.tom {
  top: 652px;
  left: 607px;
}

@media screen and (max-width: 768px) {
  .soukanzu_box a.tom {
    top: 43.3%;
    left: 65.6%;
  }
}

/*マックス・ランド*/
.soukanzu_box a.max {
  top: 652px;
  left: 721px;
}

@media screen and (max-width: 768px) {
  .soukanzu_box a.max {
    top: 50%;
    left: 13.6%;
  }
}

/*レイン・エイムズ*/
.soukanzu_box a.rayne {
  top: 652px;
  left: 857px;
}

@media screen and (max-width: 768px) {
  .soukanzu_box a.rayne {
    top: 50%;
    left: 57.3%;
  }
}

/*神覚者**************************************************************/
/*ライオ・グランツ*/
.soukanzu_box a.ryoh {
  top: 935px;
  left: 78px;
}

@media screen and (max-width: 768px) {
  .soukanzu_box a.ryoh {
    top: 60%;
    left: 11.4%;
  }
}

/*オーター・マドル*/
.soukanzu_box a.orter {
  top: 935px;
  left: 203px;
}

@media screen and (max-width: 768px) {
  .soukanzu_box a.orter {
    top: 60%;
    left: 37.9%;
  }
}

/*カルド・ゲヘナ*/
.soukanzu_box a.kaldo {
  top: 935px;
  left: 328px;
}

@media screen and (max-width: 768px) {
  .soukanzu_box a.kaldo {
    top: 60%;
    left: 64%;
  }
}

/*レナトス・リボル*/
.soukanzu_box a.renatus {
  top: 935px;
  left: 453px;
}

@media screen and (max-width: 768px) {
  .soukanzu_box a.renatus {
    top: 66.6%;
    left: 11.4%;
  }
}

/*アギト・タイロン*/
.soukanzu_box a.agito {
  top: 935px;
  left: 579px;
}

@media screen and (max-width: 768px) {
  .soukanzu_box a.agito {
    top: 66.6%;
    left: 37.9%;
  }
}

/*ツララ・ヘイルストーン*/
.soukanzu_box a.tsurara {
  top: 935px;
  left: 705px;
}

@media screen and (max-width: 768px) {
  .soukanzu_box a.tsurara {
    top: 66.6%;
    left: 64%;
  }
}

/*ソフィナ・ブリビア*/
.soukanzu_box a.sophina {
  top: 935px;
  left: 831px;
}

@media screen and (max-width: 768px) {
  .soukanzu_box a.sophina {
    top: 73.3%;
    left: 11.5%;
  }
}

/*イノセントゼロ*************************************************************/
/*イノセント・ゼロ*/
.soukanzu_box a.innocent {
  top: 1164px;
  left: 70px;
}

@media screen and (max-width: 768px) {
  .soukanzu_box a.innocent {
    top: 83%;
    left: 23.9%;
  }
}

/*セル・ウォー*/
.soukanzu_box a.cell {
  top: 1164px;
  left: 196px;
}

@media screen and (max-width: 768px) {
  .soukanzu_box a.cell {
    top: 83%;
    left: 55.6%;
  }
}

/**************************************************************/
/*ブラッド・コールマン*/
.soukanzu_box a.brad {
  top: 1164px;
  left: 394px;
}

@media screen and (max-width: 768px) {
  .soukanzu_box a.brad {
    top: 92.7%;
    left: 14.2%;
  }
}

/*レグロ・バーンデッド*/
.soukanzu_box a.regro {
  top: 1164px;
  left: 592px;
}

@media screen and (max-width: 768px) {
  .soukanzu_box a.regro {
    top: 92.7%;
    left: 65.1%;
  }
}

/*************************************************************/
@media screen and (min-width: 769px) {
  .soukanzu_box a:hover {
    background: #000;
    opacity: 0.3;
  }
}

#regro img,
#brad img,
#wahlberg img,
#tom img,
#silva img,
#wirth img,
#milo img,
#love img,
#olore img,
#anser img,
#cell img,
.soukanzu img {
  max-width: 100%;
}

@media screen and (min-width: 769px) {
  #ryoh img,
  #orter img,
  #kaldo img,
  #renatus img,
  #agito img,
  #tsurara img,
  #sophina img,
  #margarette img,
  #carpaccio img,
  #innocent img,
  #max img {
    max-width: 100%;
  }
}

#ryoh .detail__name img,
#orter .detail__name img,
#kaldo .detail__name img,
#renatus .detail__name img,
#agito .detail__name img,
#tsurara .detail__name img,
#sophina .detail__name img,
#margarette .detail__name img,
#carpaccio .detail__name img,
#innocent .detail__name img,
#max .detail__name img {
  max-width: 100%;
}

#ryoh .desc--pics img,
#orter .desc--pics img,
#kaldo .desc--pics img,
#renatus .desc--pics img,
#agito .desc--pics img,
#tsurara .desc--pics img,
#sophina .desc--pics img,
#margarette .desc--pics img,
#carpaccio .desc--pics img,
#innocent .desc--pics img,
#max .desc--pics img {
  max-width: 100%;
}
/*# sourceMappingURL=character.css.map */