@charset "UTF-8";
/*
* PC向けの初期化
*/
/*
* スマホ向けの初期化
*/
body {
  font-size: calc(25rem + (1vw - 6.4px) * 3.571);
}

.pc {
  display: none;
}

.sp {
  display: initial;
}

.wrapper {
  min-height: calc(100vh - 31px - 803px);
}

.container p {
  margin: 0 3%;
}

.image-container p {
  margin-top: 10px;
}

.frame-container {
  margin: 0 1% 20px;
}
.frame-container p {
  font-size: 1.1em;
}

.white_frame {
  margin-left: 2%;
  margin-right: 2%;
}
.white_frame-caption {
  font-size: 1em;
}

.caption-wrapper.new .caption-container::after {
  content: "";
  background: url(../img/icon_new.png) 0 0 no-repeat;
  background-size: cover;
  width: 100px;
  height: 0;
  padding-bottom: 49px;
  position: absolute;
  top: -15px;
  left: auto;
  bottom: auto;
  right: 0px;
  pointer-events: none;
  z-index: 100;
  -webkit-animation: anime-new 1.5s infinite linear;
          animation: anime-new 1.5s infinite linear;
}

/* --------------------------------------------------------------------------------
 グローバルナビゲーション
-------------------------------------------------------------------------------- */
.glnav-bg {
  display: none;
}
.glnav-wrapper {
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  top: initial;
  z-index: 9900;
  -webkit-box-shadow: initial;
          box-shadow: initial;
  -webkit-transition: -webkit-transform 0.25s;
  transition: -webkit-transform 0.25s;
  transition: transform 0.25s;
  transition: transform 0.25s, -webkit-transform 0.25s;
  -webkit-transform: translate(0, -100%);
          transform: translate(0, -100%);
}
.glnav-wrapper.show {
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}
.glnav-container {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.glnav-item {
  text-align: center;
  margin: 3% auto;
}
@media screen and (orientation: portrait) {
  .glnav-item.new::before {
    content: "";
    background: url(../img/icon_new.png) 0 0 no-repeat;
    background-size: cover;
    width: 112px;
    height: 0;
    padding-bottom: 55px;
    position: absolute;
    top: 0px;
    left: auto;
    bottom: auto;
    right: 0%;
    pointer-events: none;
    z-index: 100;
    -webkit-animation: anime-new 1.5s infinite linear;
            animation: anime-new 1.5s infinite linear;
  }
}
@media screen and (orientation: landscape) {
  .glnav-item {
    height: 55px;
    margin: 0.5% auto;
  }
  .glnav-item.character, .glnav-item.system {
    height: 110px;
  }
  .glnav-item.new::before {
    content: "";
    background: url(../img/icon_new.png) 0 0 no-repeat;
    background-size: cover;
    width: 50px;
    height: 0;
    padding-bottom: 24px;
    position: absolute;
    top: 0px;
    left: auto;
    bottom: auto;
    right: 0%;
    pointer-events: none;
    z-index: 100;
    -webkit-animation: anime-new 1.5s infinite linear;
            animation: anime-new 1.5s infinite linear;
  }
}
.glnav-item.character.new::before, .glnav-item.system.new::before {
  display: none;
}
.glnav-item-bg {
  -webkit-transform: scale(1.8518518519, 1.8518518519);
          transform: scale(1.8518518519, 1.8518518519);
  -webkit-transform-origin: left top;
          transform-origin: left top;
}
@media screen and (orientation: landscape) {
  .glnav-item-bg {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}
.glnav-item.system:hover .glnav-item-bg {
  width: 0;
}

.glnav-item.character:hover .glnav-item-bg {
  width: 0;
}

.glnav-item.system .glnav-item-bg {
  left: calc((100% - 296px) / 2 - 22px);
}
@media screen and (orientation: landscape) {
  .glnav-item.system .glnav-item-bg {
    left: calc((100% - 148px) / 2 - 22px);
  }
}
.glnav-item img {
  display: block;
  height: 7vh;
  margin: 0 auto;
}
@media screen and (orientation: landscape) {
  .glnav-item img {
    height: 10vh;
  }
}
@media screen and (orientation: landscape) {
  .glnav-sub-item {
    margin: 4px;
  }
  .glnav-sub-item.new::before {
    content: "";
    background: url(../img/icon_new.png) 0 0 no-repeat;
    background-size: cover;
    width: 40px;
    height: 0;
    padding-bottom: 19px;
    position: absolute;
    top: -10px;
    left: auto;
    bottom: auto;
    right: -10px;
    pointer-events: none;
    z-index: 100;
    -webkit-animation: anime-new 1.5s infinite linear;
            animation: anime-new 1.5s infinite linear;
  }
}
.glnav-wrapper .glnav-sub-container {
  display: none;
}
.glnav-wrapper .over_nav .glnav-sub-container {
  background-color: initial;
  top: 0;
  z-index: 0;
}
.glnav-wrapper .over_nav .glnav-sub-container.show {
  top: 0px;
}
.glnav-wrapper .over_nav .glnav-sub-container.show.hidden {
  top: 0px;
}
.glnav-wrapper .over_nav .glnav-sub-container.system, .glnav-wrapper .over_nav .glnav-sub-container.character {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 10px;
  margin-bottom: -8px;
  position: relative;
}
.glnav-wrapper .over_nav .glnav-sub-container.system.front, .glnav-wrapper .over_nav .glnav-sub-container.character.front {
  z-index: 0;
}
.glnav-wrapper .over_nav .glnav-sub-container.system img, .glnav-wrapper .over_nav .glnav-sub-container.character img {
  display: none;
}
.glnav-wrapper .over_nav .glnav-sub-container.system .glnav-sub-item.selected, .glnav-wrapper .over_nav .glnav-sub-container.character .glnav-sub-item.selected {
  opacity: 0.5;
}
.glnav-wrapper .over_nav .glnav-sub-container.system .glnav-sub-item a, .glnav-wrapper .over_nav .glnav-sub-container.character .glnav-sub-item a {
  display: block;
  width: 300px;
  height: 69px;
}
.glnav-wrapper .over_nav .glnav-sub-container.system .glnav-sub-item:nth-child(1) a, .glnav-wrapper .over_nav .glnav-sub-container.character .glnav-sub-item:nth-child(1) a {
  background: url(../img/glnav_system_new_sp.png) 50% 0 no-repeat;
  border-bottom: 8px solid #669c43;
}
.glnav-wrapper .over_nav .glnav-sub-container.system .glnav-sub-item:nth-child(2) a, .glnav-wrapper .over_nav .glnav-sub-container.character .glnav-sub-item:nth-child(2) a {
  background: url(../img/glnav_system_battle_sp.png) 50% 0 no-repeat;
  border-bottom: 8px solid #9c4343;
}
.glnav-wrapper .over_nav .glnav-sub-container.system .glnav-sub-item:nth-child(3) a, .glnav-wrapper .over_nav .glnav-sub-container.character .glnav-sub-item:nth-child(3) a {
  background: url(../img/glnav_system_training_sp.png) 50% 0 no-repeat;
  border-bottom: 8px solid #435e9c;
}
@media screen and (orientation: landscape) {
  .glnav-wrapper .over_nav .glnav-sub-container.system .glnav-sub-item a, .glnav-wrapper .over_nav .glnav-sub-container.character .glnav-sub-item a {
    width: 150px;
    height: 34.5px;
  }
  .glnav-wrapper .over_nav .glnav-sub-container.system .glnav-sub-item:nth-child(1) a, .glnav-wrapper .over_nav .glnav-sub-container.system .glnav-sub-item:nth-child(2) a, .glnav-wrapper .over_nav .glnav-sub-container.system .glnav-sub-item:nth-child(3) a, .glnav-wrapper .over_nav .glnav-sub-container.character .glnav-sub-item:nth-child(1) a, .glnav-wrapper .over_nav .glnav-sub-container.character .glnav-sub-item:nth-child(2) a, .glnav-wrapper .over_nav .glnav-sub-container.character .glnav-sub-item:nth-child(3) a {
    background-size: contain;
    border-bottom-width: 4px;
  }
}
.glnav-wrapper .over_nav .glnav-sub-container.character .glnav-sub-item:nth-child(1) a {
  background-image: url(../img/glnav_character_main_sp.png);
  border-bottom-color: #669c43;
}
.glnav-wrapper .over_nav .glnav-sub-container.character .glnav-sub-item:nth-child(2) a {
  background-image: url(../img/glnav_character_generic_sp.png);
  border-bottom-color: #435e9c;
}
main .glnav-sub-item {
  max-width: 33.3333333333%;
}
main .glnav-sub-item a {
  display: block;
  width: 100%;
}
main .glnav-sub-item a img {
  width: 100%;
}

.bgm-button {
  background-size: cover;
  right: 1%;
  top: initial;
  bottom: 1%;
}
@media screen and (orientation: portrait) {
  .bgm-button {
    width: 124px;
    height: 124px;
  }
  .bgm-button.vol_0 {
    background-position: 0px 0px;
  }
  .bgm-button.vol_1 {
    background-position: 0px -124px;
  }
  .bgm-button.vol_2 {
    background-position: 0px -248px;
  }
}

/* --------------------------------------------------------------------------------
 ハンバーガー
-------------------------------------------------------------------------------- */
.sp-glnav-button {
  display: block;
  background-color: rgba(0, 0, 0, 0.5);
  border: 6px solid rgba(227, 229, 241, 0);
  border-right: 12px solid rgba(227, 229, 241, 0);
  border-bottom: 12px solid rgba(227, 229, 241, 0);
  border-radius: 6px;
  width: 12vw;
  height: 12vw;
  position: fixed;
  top: 1vw;
  right: 2vw;
  z-index: 9900;
  -webkit-transition: opacity 0.45s, -webkit-transform 0.45s;
  transition: opacity 0.45s, -webkit-transform 0.45s;
  transition: opacity 0.45s, transform 0.45s;
  transition: opacity 0.45s, transform 0.45s, -webkit-transform 0.45s;
}
.sp-glnav-button.hide {
  opacity: 0;
  pointer-events: none;
}
.sp-glnav-button.show .sp-glnav-line-up {
  top: 50%;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  background-color: #e3e5f1;
}
.sp-glnav-button.show .sp-glnav-line-down {
  top: 50%;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  background-color: #e3e5f1;
}
.sp-glnav-button.show .sp-glnav-line-middle {
  opacity: 0;
}
@media screen and (orientation: landscape) {
  .sp-glnav-button {
    width: 12vh;
    height: 12vh;
  }
}
.sp-glnav-line-up, .sp-glnav-line-middle, .sp-glnav-line-down {
  display: block;
  position: absolute;
  width: 80%;
  margin: 0 auto;
  height: 8%;
  border-radius: 3px;
  background: #e3e5f1;
  -webkit-transition: top 0.45s, opacity 0.45s, background-color 0.45s, -webkit-transform 0.45s;
  transition: top 0.45s, opacity 0.45s, background-color 0.45s, -webkit-transform 0.45s;
  transition: transform 0.45s, top 0.45s, opacity 0.45s, background-color 0.45s;
  transition: transform 0.45s, top 0.45s, opacity 0.45s, background-color 0.45s, -webkit-transform 0.45s;
  left: 10%;
}
.sp-glnav-line-up {
  top: 25%;
}
.sp-glnav-line-down {
  top: 75%;
}
.sp-glnav-line-middle {
  top: 50%;
}

/* --------------------------------------------------------------------------------
 フッター
-------------------------------------------------------------------------------- */
.sns-button {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 5%;
}
.sns-button__item {
  position: relative;
  width: 10.4166666667%;
}
.sns-button__banner {
  position: relative;
  width: 36.0416666667%;
}
.sns-button__banner img {
  width: 100%;
}

.official-sns {
  max-width: auto;
  max-width: initial;
  width: 98%;
  margin-top: 5%;
}
.official-sns__item {
  width: 32.6666666667%;
}
.official-sns__item img {
  width: 100%;
}
.official-sns__item:not(:last-of-type) {
  margin-right: auto;
}
.official-sns__item:not(:nth-of-type(3n)) {
  margin-right: 1%;
}

.copy-wrapper {
  display: block;
  margin: 3% auto 0%;
  padding: 0 2% 5%;
  text-align: center;
}

.banner-nippon1_jp {
  display: block;
  margin: 5% auto 0;
  width: 50%;
}
.banner-nippon1_jp img {
  width: 100%;
  vertical-align: bottom;
}

/* --------------------------------------------------------------------------------
 トップスクロールボタン
-------------------------------------------------------------------------------- */
@media screen and (orientation: landscape) {
  .sctop-button {
    -webkit-transform: scale(0.8, 0.8);
            transform: scale(0.8, 0.8);
    right: -4.6px;
    bottom: -17.8px;
  }
}

/* --------------------------------------------------------------------------------
 購入ボタン
-------------------------------------------------------------------------------- */
@media screen and (orientation: landscape) {
  .foot-order-button {
    -webkit-transform: scale(0.8, 0.8);
            transform: scale(0.8, 0.8);
    left: -15.3px;
    bottom: -5.5px;
  }
  .foot-order-button:hover {
    -webkit-transform: scale(0.832, 0.832);
            transform: scale(0.832, 0.832);
  }
}

.sns-button {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.footer-wrapper .sns-button__guideline {
  width: 100%;
  text-align: center;
}
.footer-wrapper .guideline-button {
  height: 100px;
  font-size: 30px;
  margin-bottom: 3%;
}

.portal-button img {
  height: 100px;
}

/* --------------------------------------------------------------------------------
 トップ
-------------------------------------------------------------------------------- */
#top .button-wrapper li .ps4icon {
  display: inline-block;
  content: "PS4";
  width: 3em;
  height: 100%;
  font-size: 25rem;
  text-align: center;
  color: white;
  background: #2586bc;
  padding: 2px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: auto 0.2em;
}
#top .button-wrapper li .ps5icon {
  display: inline-block;
  content: "PS5";
  width: 3em;
  height: 100%;
  font-size: 25rem;
  text-align: center;
  color: white;
  background: #adaaa5;
  padding: 2px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: auto 0.2em;
}
#top .button-wrapper li .switchicon {
  display: inline-block;
  content: "Switch";
  width: 4em;
  height: 100%;
  font-size: 25rem;
  text-align: center;
  color: white;
  background: #c33c33;
  padding: 2px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: auto 0.2em;
}
#top .button-wrapper li a {
  text-decoration: underline;
}
#top #pop-information .frame-container {
  margin: 1% 1%;
}

/* --------------------------------------------------
 トップ - トップ
-------------------------------------------------- */
.article-top .section-top .logo {
  top: 1%;
}
.article-top .section-top .logo img {
  width: auto;
}
.article-top .section-top .catch_copy.right.show.hidden {
  opacity: 1;
}
.article-top .section-top .catch_copy.left.show.hidden {
  opacity: 1;
}
.article-top .section-top .catch_copy img {
  height: auto;
}
.article-top .section-top .release img {
  width: auto;
}
.article-top .section-top .review {
  top: auto;
  bottom: 12%;
  right: 2%;
}
.article-top .section-top .review img {
  width: auto;
}
.article-top .section-top .arrival_5 {
  top: auto;
  bottom: 29%;
  right: 2%;
}
.article-top .section-top .arrival_5 img {
  width: auto;
}
@media screen and (orientation: landscape) {
  .article-top .section-top .logo img {
    width: 30vw;
  }
  .article-top .section-top .catch_copy img {
    height: 70vh;
  }
  .article-top .section-top .catch_copy.right {
    right: -2%;
    top: -36%;
  }
  .article-top .section-top .catch_copy.right.show {
    right: 3%;
    top: 14%;
  }
  .article-top .section-top .catch_copy.left {
    left: -2%;
    top: -23%;
  }
  .article-top .section-top .catch_copy.left.show {
    left: 3%;
    top: 27%;
  }
  .article-top .section-top .release img {
    width: 40vw;
  }
  .article-top .section-top .review {
    top: 3%;
    bottom: auto;
    right: 12%;
  }
  .article-top .section-top .review img {
    width: 16vw;
  }
  .article-top .section-top .arrival_5 {
    bottom: 0;
    right: 0;
  }
  .article-top .section-top .arrival_5 img {
    width: 16vw;
  }
}

/* --------------------------------------------------
 トップ - トピックス
-------------------------------------------------- */
.article-top .section-topics .topics-wrapper {
  font-size: 1.1em;
  padding: 0;
}
.article-top .section-topics .topics-wrapper .swiper-top {
  overflow: initial;
}
.article-top .section-topics .topics-wrapper .swiper-button-prev {
  max-width: 72px;
  left: 1%;
  top: 230px;
}
.article-top .section-topics .topics-wrapper .swiper-button-next {
  max-width: 70px;
  right: 1%;
  top: 230px;
}
.article-top .section-topics .topics-container {
  max-width: initial;
  margin: initial;
  padding: 0 5%;
}
.article-top .section-topics .topics-container.new:before {
  content: "";
  background: url(../img/icon_new.png) 0 0 no-repeat;
  background-size: cover;
  width: 120px;
  height: 0;
  padding-bottom: 59px;
  position: absolute;
  top: -4px;
  left: auto;
  bottom: auto;
  right: 0px;
  pointer-events: none;
  z-index: 100;
  -webkit-animation: anime-new 1.5s infinite linear;
          animation: anime-new 1.5s infinite linear;
}

/* --------------------------------------------------
 トップ - 魔界戦記ディスガイア７
-------------------------------------------------- */
.article-top .section-disgaea7 p {
  font-size: 1.1em;
  text-align: left;
  margin-left: 3%;
  margin-right: 3%;
}

/* --------------------------------------------------
 トップ - キャラクター
-------------------------------------------------- */
.article-top .section-character .character-wrapper {
  -webkit-transform: scale(0.6361829026, 0.6361829026);
          transform: scale(0.6361829026, 0.6361829026);
  left: -174.6322067594px;
}
.article-top .section-character .character-wrapper .character-btn-01:hover ~ .character-img-wrapper .character-img-01 img {
  -webkit-transform: initial;
          transform: initial;
}
.article-top .section-character .character-wrapper .character-btn-01:hover ~ .character-img-wrapper .character-img-01-ds {
  z-index: initial;
}
.article-top .section-character .character-wrapper .character-btn-01:hover ~ .character-img-wrapper .character-img-01-ds img {
  -webkit-transform: initial;
          transform: initial;
}
.article-top .section-character .character-wrapper .character-name-01 {
  display: none;
}
.article-top .section-character .character-wrapper .character-wards-01 {
  display: none;
}
.article-top .section-character .character-wrapper .character-btn-02:hover ~ .character-img-wrapper .character-img-02 img {
  -webkit-transform: initial;
          transform: initial;
}
.article-top .section-character .character-wrapper .character-btn-02:hover ~ .character-img-wrapper .character-img-02-ds {
  z-index: initial;
}
.article-top .section-character .character-wrapper .character-btn-02:hover ~ .character-img-wrapper .character-img-02-ds img {
  -webkit-transform: initial;
          transform: initial;
}
.article-top .section-character .character-wrapper .character-name-02 {
  display: none;
}
.article-top .section-character .character-wrapper .character-wards-02 {
  display: none;
}
.article-top .section-character .character-wrapper .character-btn-03:hover ~ .character-img-wrapper .character-img-03 img {
  -webkit-transform: initial;
          transform: initial;
}
.article-top .section-character .character-wrapper .character-btn-03:hover ~ .character-img-wrapper .character-img-03-ds {
  z-index: initial;
}
.article-top .section-character .character-wrapper .character-btn-03:hover ~ .character-img-wrapper .character-img-03-ds img {
  -webkit-transform: initial;
          transform: initial;
}
.article-top .section-character .character-wrapper .character-name-03 {
  display: none;
}
.article-top .section-character .character-wrapper .character-wards-03 {
  display: none;
}
.article-top .section-character .character-wrapper .character-btn-04:hover ~ .character-img-wrapper .character-img-04 img {
  -webkit-transform: initial;
          transform: initial;
}
.article-top .section-character .character-wrapper .character-btn-04:hover ~ .character-img-wrapper .character-img-04-ds {
  z-index: initial;
}
.article-top .section-character .character-wrapper .character-btn-04:hover ~ .character-img-wrapper .character-img-04-ds img {
  -webkit-transform: initial;
          transform: initial;
}
.article-top .section-character .character-wrapper .character-name-04 {
  display: none;
}
.article-top .section-character .character-wrapper .character-wards-04 {
  display: none;
}
.article-top .section-character .character-wrapper .character-btn-05:hover ~ .character-img-wrapper .character-img-05 img {
  -webkit-transform: initial;
          transform: initial;
}
.article-top .section-character .character-wrapper .character-btn-05:hover ~ .character-img-wrapper .character-img-05-ds {
  z-index: initial;
}
.article-top .section-character .character-wrapper .character-btn-05:hover ~ .character-img-wrapper .character-img-05-ds img {
  -webkit-transform: initial;
          transform: initial;
}
.article-top .section-character .character-wrapper .character-name-05 {
  display: none;
}
.article-top .section-character .character-wrapper .character-wards-05 {
  display: none;
}
.article-top .section-character .character-wrapper .character-btn-06:hover ~ .character-img-wrapper .character-img-06 img {
  -webkit-transform: initial;
          transform: initial;
}
.article-top .section-character .character-wrapper .character-btn-06:hover ~ .character-img-wrapper .character-img-06-ds {
  z-index: initial;
}
.article-top .section-character .character-wrapper .character-btn-06:hover ~ .character-img-wrapper .character-img-06-ds img {
  -webkit-transform: initial;
          transform: initial;
}
.article-top .section-character .character-wrapper .character-name-06 {
  display: none;
}
.article-top .section-character .character-wrapper .character-wards-06 {
  display: none;
}
.article-top .section-character .character-wrapper .character-btn-07:hover ~ .character-img-wrapper .character-img-07 img {
  -webkit-transform: initial;
          transform: initial;
}
.article-top .section-character .character-wrapper .character-btn-07:hover ~ .character-img-wrapper .character-img-07-ds {
  z-index: initial;
}
.article-top .section-character .character-wrapper .character-btn-07:hover ~ .character-img-wrapper .character-img-07-ds img {
  -webkit-transform: initial;
          transform: initial;
}
.article-top .section-character .character-wrapper .character-name-07 {
  display: none;
}
.article-top .section-character .character-wrapper .character-wards-07 {
  display: none;
}

/* --------------------------------------------------
 トップ - ストーリー
-------------------------------------------------- */
.article-top .section-story p {
  font-size: 1.1em;
  text-align: left;
  margin-left: 3%;
  margin-right: 3%;
}

/* --------------------------------------------------
 トップ - プロダクト
-------------------------------------------------- */
.article-top .section-product table {
  font-size: 1.1em;
}

/* --------------------------------------------------
 ストーリー - あらすじ
-------------------------------------------------- */
.article-story .section-synopsis p {
  font-size: 1.1em;
  text-align: left;
  margin-left: 3%;
  margin-right: 3%;
}

/* --------------------------------------------------
 ストーリー - 日ノ本用語集
-------------------------------------------------- */
.article-story .section-glossary .frame-container {
  margin-left: 1%;
  margin-right: 1%;
}
.article-story .section-glossary .swiper-story {
  width: 90%;
  max-width: 90%;
}
.article-story .section-glossary .flex-wrapper {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.article-story .section-glossary .flex-wrapper .image-container {
  width: 90%;
}
.article-story .section-glossary .flex-wrapper p {
  width: 100%;
}
.article-story .section-glossary .content-01 .flex-wrapper {
  display: block;
}
.article-story .section-glossary .content-01 .swiper-story {
  margin: 0 auto 1%;
}
.article-story .section-glossary .content-01 p {
  width: 100%;
}

/* --------------------------------------------------
 キャラクター
-------------------------------------------------- */
.article-character .character_list li {
  width: 35%;
}
.article-character .character_list li a {
  display: block;
}
.article-character .character_list li img {
  width: 100%;
}
.article-character .section-generic_character .character_list {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.article-character .section-main_character .character_list.visible li:nth-child(5) {
  margin-left: 25px;
}
.article-character .section-main_character .character_list.visible li:nth-child(7) {
  margin-right: 25px;
}

.character-popup-wrapper {
  width: 100vw;
  height: 223.3704292528vw;
}

.character_detail-wrapper {
  background: url(../img/character/popup_bg_sp.png) no-repeat;
  background-size: contain;
  width: 629px;
  height: 1293px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.character_detail-container.info {
  width: 100%;
  height: 100%;
  position: absolute;
  padding: 3%;
}
.character_detail-container.info p {
  position: absolute;
  left: 0;
  top: 858px;
  padding: 0 3%;
}
.character_detail-container.info .media-container {
  width: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  left: 0;
  bottom: 44px;
}
.character_detail-container.image {
  width: 100%;
  height: 670px;
  position: absolute;
  top: 10%;
}
.character_detail-container.image .media-container {
  right: 3%;
  bottom: -48px;
}
.character_detail-container .character-caption {
  top: 10px;
  z-index: 1;
}
.character_detail-container .character-caption.coming_soon {
  top: 10px;
}
.character_detail-container p.comming_soon {
  left: calc((100% - 253px) / 2);
  top: 940px;
}
.main_01 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_main_01_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.main_01 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_main_01_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.main_01 .character_detail-bg-paint.show {
  height: 798px;
}

.main_01 .character_detail-image {
  position: absolute;
  right: calc(16px - 50px);
  bottom: calc(44px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.main_01 .character_detail-image.show {
  opacity: 1;
  right: 16px;
}

.main_01 .clip .character_detail-image {
  right: calc(16px - 50px);
}
.main_01 .clip .character_detail-image.show {
  right: calc(16px);
}

.main_01 .character_detail-wards {
  position: absolute;
  right: calc(363px + 5px);
  bottom: calc(80px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.main_01 .character_detail-wards.show {
  opacity: 1;
  right: 363px;
  bottom: 80px;
}

.main_02 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_main_02_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.main_02 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_main_02_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.main_02 .character_detail-bg-paint.show {
  height: 798px;
}

.main_02 .character_detail-image {
  position: absolute;
  right: calc(72px - 50px);
  bottom: calc(50px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.main_02 .character_detail-image.show {
  opacity: 1;
  right: 72px;
}

.main_02 .clip .character_detail-image {
  right: calc(72px - 50px);
}
.main_02 .clip .character_detail-image.show {
  right: calc(72px);
}

.main_02 .character_detail-wards {
  position: absolute;
  right: calc(316px + 5px);
  bottom: calc(32px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.main_02 .character_detail-wards.show {
  opacity: 1;
  right: 316px;
  bottom: 32px;
}

.main_03 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_main_03_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.main_03 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_main_03_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.main_03 .character_detail-bg-paint.show {
  height: 798px;
}

.main_03 .character_detail-image {
  position: absolute;
  right: calc(80px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.main_03 .character_detail-image.show {
  opacity: 1;
  right: 80px;
}

.main_03 .clip .character_detail-image {
  right: calc(80px - 50px);
}
.main_03 .clip .character_detail-image.show {
  right: calc(80px);
}

.main_03 .character_detail-wards {
  position: absolute;
  right: calc(280px + 5px);
  bottom: calc(38px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.main_03 .character_detail-wards.show {
  opacity: 1;
  right: 280px;
  bottom: 38px;
}

.main_04 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_main_04_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.main_04 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_main_04_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.main_04 .character_detail-bg-paint.show {
  height: 798px;
}

.main_04 .character_detail-image {
  position: absolute;
  right: calc(48px - 50px);
  bottom: calc(34px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.main_04 .character_detail-image.show {
  opacity: 1;
  right: 48px;
}

.main_04 .clip .character_detail-image {
  right: calc(48px - 50px);
}
.main_04 .clip .character_detail-image.show {
  right: calc(48px);
}

.main_04 .character_detail-wards {
  position: absolute;
  right: calc(320px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.main_04 .character_detail-wards.show {
  opacity: 1;
  right: 320px;
  bottom: 46px;
}

.main_05 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_main_05_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.main_05 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_main_05_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.main_05 .character_detail-bg-paint.show {
  height: 798px;
}

.main_05 .character_detail-image {
  position: absolute;
  right: calc(110px - 50px);
  bottom: calc(54px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.main_05 .character_detail-image.show {
  opacity: 1;
  right: 110px;
}

.main_05 .clip .character_detail-image {
  right: calc(110px - 50px);
}
.main_05 .clip .character_detail-image.show {
  right: calc(110px);
}

.main_05 .character_detail-wards {
  position: absolute;
  right: calc(295px + 5px);
  bottom: calc(27px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.main_05 .character_detail-wards.show {
  opacity: 1;
  right: 295px;
  bottom: 27px;
}

.main_06 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_main_06_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.main_06 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_main_06_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.main_06 .character_detail-bg-paint.show {
  height: 798px;
}

.main_06 .character_detail-image {
  position: absolute;
  right: calc(28px - 50px);
  bottom: calc(64px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.main_06 .character_detail-image.show {
  opacity: 1;
  right: 28px;
}

.main_06 .clip .character_detail-image {
  right: calc(28px - 50px);
}
.main_06 .clip .character_detail-image.show {
  right: calc(28px);
}

.main_06 .character_detail-wards {
  position: absolute;
  right: calc(340px + 5px);
  bottom: calc(44px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.main_06 .character_detail-wards.show {
  opacity: 1;
  right: 340px;
  bottom: 44px;
}

.main_07 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_main_07_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.main_07 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_main_07_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.main_07 .character_detail-bg-paint.show {
  height: 798px;
}

.main_07 .character_detail-image {
  position: absolute;
  right: calc(14px - 50px);
  bottom: calc(34px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.main_07 .character_detail-image.show {
  opacity: 1;
  right: 14px;
}

.main_07 .clip .character_detail-image {
  right: calc(14px - 50px);
}
.main_07 .clip .character_detail-image.show {
  right: calc(14px);
}

.main_07 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.main_07 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.sub_01 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_sub_01_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.sub_01 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_sub_01_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.sub_01 .character_detail-bg-paint.show {
  height: 798px;
}

.sub_01 .character_detail-image {
  position: absolute;
  right: calc(40px - 50px);
  bottom: calc(44px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.sub_01 .character_detail-image.show {
  opacity: 1;
  right: 40px;
}

.sub_01 .clip .character_detail-image {
  right: calc(40px - 50px);
}
.sub_01 .clip .character_detail-image.show {
  right: calc(40px);
}

.sub_01 .character_detail-wards {
  position: absolute;
  right: calc(363px + 5px);
  bottom: calc(80px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.sub_01 .character_detail-wards.show {
  opacity: 1;
  right: 363px;
  bottom: 80px;
}

.sub_02 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_sub_02_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.sub_02 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_sub_02_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.sub_02 .character_detail-bg-paint.show {
  height: 798px;
}

.sub_02 .character_detail-image {
  position: absolute;
  right: calc(130px - 50px);
  bottom: calc(0px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.sub_02 .character_detail-image.show {
  opacity: 1;
  right: 130px;
}

.sub_02 .clip .character_detail-image {
  right: calc(130px - 50px);
}
.sub_02 .clip .character_detail-image.show {
  right: calc(130px);
}

.sub_02 .character_detail-wards {
  position: absolute;
  right: calc(316px + 5px);
  bottom: calc(32px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.sub_02 .character_detail-wards.show {
  opacity: 1;
  right: 316px;
  bottom: 32px;
}

.sub_03 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_sub_03_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.sub_03 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_sub_03_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.sub_03 .character_detail-bg-paint.show {
  height: 798px;
}

.sub_03 .character_detail-image {
  position: absolute;
  right: calc(80px - 50px);
  bottom: calc(-30px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.sub_03 .character_detail-image.show {
  opacity: 1;
  right: 80px;
}

.sub_03 .clip .character_detail-image {
  right: calc(80px - 50px);
}
.sub_03 .clip .character_detail-image.show {
  right: calc(80px);
}

.sub_03 .character_detail-wards {
  position: absolute;
  right: calc(280px + 5px);
  bottom: calc(38px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.sub_03 .character_detail-wards.show {
  opacity: 1;
  right: 280px;
  bottom: 38px;
}

.generic_01 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_generic_01_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.generic_01 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_generic_01_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.generic_01 .character_detail-bg-paint.show {
  height: 798px;
}

.generic_01 .character_detail-image {
  position: absolute;
  right: calc(100px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.generic_01 .character_detail-image.show {
  opacity: 1;
  right: 100px;
}

.generic_01 .clip .character_detail-image {
  right: calc(100px - 50px);
}
.generic_01 .clip .character_detail-image.show {
  right: calc(100px);
}

.generic_01 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.generic_01 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.generic_02 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_generic_02_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.generic_02 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_generic_02_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.generic_02 .character_detail-bg-paint.show {
  height: 798px;
}

.generic_02 .character_detail-image {
  position: absolute;
  right: calc(100px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.generic_02 .character_detail-image.show {
  opacity: 1;
  right: 100px;
}

.generic_02 .clip .character_detail-image {
  right: calc(100px - 50px);
}
.generic_02 .clip .character_detail-image.show {
  right: calc(100px);
}

.generic_02 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.generic_02 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.generic_03 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_generic_03_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.generic_03 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_generic_03_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.generic_03 .character_detail-bg-paint.show {
  height: 798px;
}

.generic_03 .character_detail-image {
  position: absolute;
  right: calc(14px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.generic_03 .character_detail-image.show {
  opacity: 1;
  right: 14px;
}

.generic_03 .clip .character_detail-image {
  right: calc(14px - 50px);
}
.generic_03 .clip .character_detail-image.show {
  right: calc(14px);
}

.generic_03 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.generic_03 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.generic_04 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_generic_04_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.generic_04 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_generic_04_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.generic_04 .character_detail-bg-paint.show {
  height: 798px;
}

.generic_04 .character_detail-image {
  position: absolute;
  right: calc(101px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.generic_04 .character_detail-image.show {
  opacity: 1;
  right: 101px;
}

.generic_04 .clip .character_detail-image {
  right: calc(101px - 50px);
}
.generic_04 .clip .character_detail-image.show {
  right: calc(101px);
}

.generic_04 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.generic_04 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.generic_05 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_generic_05_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.generic_05 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_generic_05_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.generic_05 .character_detail-bg-paint.show {
  height: 798px;
}

.generic_05 .character_detail-image {
  position: absolute;
  right: calc(85px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.generic_05 .character_detail-image.show {
  opacity: 1;
  right: 85px;
}

.generic_05 .clip .character_detail-image {
  right: calc(85px - 50px);
}
.generic_05 .clip .character_detail-image.show {
  right: calc(85px);
}

.generic_05 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.generic_05 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.generic_06 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_generic_06_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.generic_06 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_generic_06_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.generic_06 .character_detail-bg-paint.show {
  height: 798px;
}

.generic_06 .character_detail-image {
  position: absolute;
  right: calc(95px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.generic_06 .character_detail-image.show {
  opacity: 1;
  right: 95px;
}

.generic_06 .clip .character_detail-image {
  right: calc(95px - 50px);
}
.generic_06 .clip .character_detail-image.show {
  right: calc(95px);
}

.generic_06 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.generic_06 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.generic_07 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_generic_07_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.generic_07 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_generic_07_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.generic_07 .character_detail-bg-paint.show {
  height: 798px;
}

.generic_07 .character_detail-image {
  position: absolute;
  right: calc(75px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.generic_07 .character_detail-image.show {
  opacity: 1;
  right: 75px;
}

.generic_07 .clip .character_detail-image {
  right: calc(75px - 50px);
}
.generic_07 .clip .character_detail-image.show {
  right: calc(75px);
}

.generic_07 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.generic_07 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.generic_08 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_generic_08_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.generic_08 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_generic_08_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.generic_08 .character_detail-bg-paint.show {
  height: 798px;
}

.generic_08 .character_detail-image {
  position: absolute;
  right: calc(95px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.generic_08 .character_detail-image.show {
  opacity: 1;
  right: 95px;
}

.generic_08 .clip .character_detail-image {
  right: calc(95px - 50px);
}
.generic_08 .clip .character_detail-image.show {
  right: calc(95px);
}

.generic_08 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.generic_08 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.generic_09 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_generic_09_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.generic_09 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_generic_09_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.generic_09 .character_detail-bg-paint.show {
  height: 798px;
}

.generic_09 .character_detail-image {
  position: absolute;
  right: calc(95px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.generic_09 .character_detail-image.show {
  opacity: 1;
  right: 95px;
}

.generic_09 .clip .character_detail-image {
  right: calc(95px - 50px);
}
.generic_09 .clip .character_detail-image.show {
  right: calc(95px);
}

.generic_09 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.generic_09 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.generic_10 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_generic_10_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.generic_10 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_generic_10_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.generic_10 .character_detail-bg-paint.show {
  height: 798px;
}

.generic_10 .character_detail-image {
  position: absolute;
  right: calc(100px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.generic_10 .character_detail-image.show {
  opacity: 1;
  right: 100px;
}

.generic_10 .clip .character_detail-image {
  right: calc(100px - 50px);
}
.generic_10 .clip .character_detail-image.show {
  right: calc(100px);
}

.generic_10 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.generic_10 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.generic_11 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_generic_11_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.generic_11 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_generic_11_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.generic_11 .character_detail-bg-paint.show {
  height: 798px;
}

.generic_11 .character_detail-image {
  position: absolute;
  right: calc(100px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.generic_11 .character_detail-image.show {
  opacity: 1;
  right: 100px;
}

.generic_11 .clip .character_detail-image {
  right: calc(100px - 50px);
}
.generic_11 .clip .character_detail-image.show {
  right: calc(100px);
}

.generic_11 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.generic_11 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.generic_12 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_generic_12_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.generic_12 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_generic_12_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.generic_12 .character_detail-bg-paint.show {
  height: 798px;
}

.generic_12 .character_detail-image {
  position: absolute;
  right: calc(100px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.generic_12 .character_detail-image.show {
  opacity: 1;
  right: 100px;
}

.generic_12 .clip .character_detail-image {
  right: calc(100px - 50px);
}
.generic_12 .clip .character_detail-image.show {
  right: calc(100px);
}

.generic_12 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.generic_12 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.generic_13 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_generic_13_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.generic_13 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_generic_13_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.generic_13 .character_detail-bg-paint.show {
  height: 798px;
}

.generic_13 .character_detail-image {
  position: absolute;
  right: calc(50px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.generic_13 .character_detail-image.show {
  opacity: 1;
  right: 50px;
}

.generic_13 .clip .character_detail-image {
  right: calc(50px - 50px);
}
.generic_13 .clip .character_detail-image.show {
  right: calc(50px);
}

.generic_13 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.generic_13 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.generic_14 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_generic_14_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.generic_14 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_generic_14_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.generic_14 .character_detail-bg-paint.show {
  height: 798px;
}

.generic_14 .character_detail-image {
  position: absolute;
  right: calc(40px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.generic_14 .character_detail-image.show {
  opacity: 1;
  right: 40px;
}

.generic_14 .clip .character_detail-image {
  right: calc(40px - 50px);
}
.generic_14 .clip .character_detail-image.show {
  right: calc(40px);
}

.generic_14 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.generic_14 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.generic_15 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_generic_15_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.generic_15 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_generic_15_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.generic_15 .character_detail-bg-paint.show {
  height: 798px;
}

.generic_15 .character_detail-image {
  position: absolute;
  right: calc(70px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.generic_15 .character_detail-image.show {
  opacity: 1;
  right: 70px;
}

.generic_15 .clip .character_detail-image {
  right: calc(70px - 50px);
}
.generic_15 .clip .character_detail-image.show {
  right: calc(70px);
}

.generic_15 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.generic_15 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.generic_16 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_generic_16_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.generic_16 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_generic_16_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.generic_16 .character_detail-bg-paint.show {
  height: 798px;
}

.generic_16 .character_detail-image {
  position: absolute;
  right: calc(90px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.generic_16 .character_detail-image.show {
  opacity: 1;
  right: 90px;
}

.generic_16 .clip .character_detail-image {
  right: calc(90px - 50px);
}
.generic_16 .clip .character_detail-image.show {
  right: calc(90px);
}

.generic_16 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.generic_16 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.generic_17 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_generic_17_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.generic_17 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_generic_17_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.generic_17 .character_detail-bg-paint.show {
  height: 798px;
}

.generic_17 .character_detail-image {
  position: absolute;
  right: calc(60px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.generic_17 .character_detail-image.show {
  opacity: 1;
  right: 60px;
}

.generic_17 .clip .character_detail-image {
  right: calc(60px - 50px);
}
.generic_17 .clip .character_detail-image.show {
  right: calc(60px);
}

.generic_17 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.generic_17 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.generic_18 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_generic_18_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.generic_18 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_generic_18_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.generic_18 .character_detail-bg-paint.show {
  height: 798px;
}

.generic_18 .character_detail-image {
  position: absolute;
  right: calc(14px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.generic_18 .character_detail-image.show {
  opacity: 1;
  right: 14px;
}

.generic_18 .clip .character_detail-image {
  right: calc(14px - 50px);
}
.generic_18 .clip .character_detail-image.show {
  right: calc(14px);
}

.generic_18 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.generic_18 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.generic_19 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_generic_19_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.generic_19 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_generic_19_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.generic_19 .character_detail-bg-paint.show {
  height: 798px;
}

.generic_19 .character_detail-image {
  position: absolute;
  right: calc(50px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.generic_19 .character_detail-image.show {
  opacity: 1;
  right: 50px;
}

.generic_19 .clip .character_detail-image {
  right: calc(50px - 50px);
}
.generic_19 .clip .character_detail-image.show {
  right: calc(50px);
}

.generic_19 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.generic_19 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.generic_20 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_generic_20_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.generic_20 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_generic_20_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.generic_20 .character_detail-bg-paint.show {
  height: 798px;
}

.generic_20 .character_detail-image {
  position: absolute;
  right: calc(80px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.generic_20 .character_detail-image.show {
  opacity: 1;
  right: 80px;
}

.generic_20 .clip .character_detail-image {
  right: calc(80px - 50px);
}
.generic_20 .clip .character_detail-image.show {
  right: calc(80px);
}

.generic_20 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.generic_20 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.generic_21 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_generic_21_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.generic_21 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_generic_21_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.generic_21 .character_detail-bg-paint.show {
  height: 798px;
}

.generic_21 .character_detail-image {
  position: absolute;
  right: calc(30px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.generic_21 .character_detail-image.show {
  opacity: 1;
  right: 30px;
}

.generic_21 .clip .character_detail-image {
  right: calc(30px - 50px);
}
.generic_21 .clip .character_detail-image.show {
  right: calc(30px);
}

.generic_21 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.generic_21 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.generic_22 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_generic_22_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.generic_22 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_generic_22_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.generic_22 .character_detail-bg-paint.show {
  height: 798px;
}

.generic_22 .character_detail-image {
  position: absolute;
  right: calc(20px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.generic_22 .character_detail-image.show {
  opacity: 1;
  right: 20px;
}

.generic_22 .clip .character_detail-image {
  right: calc(20px - 50px);
}
.generic_22 .clip .character_detail-image.show {
  right: calc(20px);
}

.generic_22 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.generic_22 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.generic_23 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_generic_23_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.generic_23 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_generic_23_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.generic_23 .character_detail-bg-paint.show {
  height: 798px;
}

.generic_23 .character_detail-image {
  position: absolute;
  right: calc(10px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.generic_23 .character_detail-image.show {
  opacity: 1;
  right: 10px;
}

.generic_23 .clip .character_detail-image {
  right: calc(10px - 50px);
}
.generic_23 .clip .character_detail-image.show {
  right: calc(10px);
}

.generic_23 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.generic_23 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.generic_24 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_generic_24_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.generic_24 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_generic_24_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.generic_24 .character_detail-bg-paint.show {
  height: 798px;
}

.generic_24 .character_detail-image {
  position: absolute;
  right: calc(120px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.generic_24 .character_detail-image.show {
  opacity: 1;
  right: 120px;
}

.generic_24 .clip .character_detail-image {
  right: calc(120px - 50px);
}
.generic_24 .clip .character_detail-image.show {
  right: calc(120px);
}

.generic_24 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.generic_24 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.generic_25 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_generic_25_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.generic_25 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_generic_25_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.generic_25 .character_detail-bg-paint.show {
  height: 798px;
}

.generic_25 .character_detail-image {
  position: absolute;
  right: calc(100px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.generic_25 .character_detail-image.show {
  opacity: 1;
  right: 100px;
}

.generic_25 .clip .character_detail-image {
  right: calc(100px - 50px);
}
.generic_25 .clip .character_detail-image.show {
  right: calc(100px);
}

.generic_25 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.generic_25 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.generic_26 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_generic_26_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.generic_26 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_generic_26_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.generic_26 .character_detail-bg-paint.show {
  height: 798px;
}

.generic_26 .character_detail-image {
  position: absolute;
  right: calc(100px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.generic_26 .character_detail-image.show {
  opacity: 1;
  right: 100px;
}

.generic_26 .clip .character_detail-image {
  right: calc(100px - 50px);
}
.generic_26 .clip .character_detail-image.show {
  right: calc(100px);
}

.generic_26 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.generic_26 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.generic_27 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_generic_27_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.generic_27 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_generic_27_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.generic_27 .character_detail-bg-paint.show {
  height: 798px;
}

.generic_27 .character_detail-image {
  position: absolute;
  right: calc(100px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.generic_27 .character_detail-image.show {
  opacity: 1;
  right: 100px;
}

.generic_27 .clip .character_detail-image {
  right: calc(100px - 50px);
}
.generic_27 .clip .character_detail-image.show {
  right: calc(100px);
}

.generic_27 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.generic_27 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.generic_28 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_generic_28_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.generic_28 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_generic_28_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.generic_28 .character_detail-bg-paint.show {
  height: 798px;
}

.generic_28 .character_detail-image {
  position: absolute;
  right: calc(50px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.generic_28 .character_detail-image.show {
  opacity: 1;
  right: 50px;
}

.generic_28 .clip .character_detail-image {
  right: calc(50px - 50px);
}
.generic_28 .clip .character_detail-image.show {
  right: calc(50px);
}

.generic_28 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.generic_28 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.generic_29 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_generic_29_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.generic_29 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_generic_29_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.generic_29 .character_detail-bg-paint.show {
  height: 798px;
}

.generic_29 .character_detail-image {
  position: absolute;
  right: calc(100px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.generic_29 .character_detail-image.show {
  opacity: 1;
  right: 100px;
}

.generic_29 .clip .character_detail-image {
  right: calc(100px - 50px);
}
.generic_29 .clip .character_detail-image.show {
  right: calc(100px);
}

.generic_29 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.generic_29 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.generic_30 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_generic_30_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.generic_30 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_generic_30_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.generic_30 .character_detail-bg-paint.show {
  height: 798px;
}

.generic_30 .character_detail-image {
  position: absolute;
  right: calc(60px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.generic_30 .character_detail-image.show {
  opacity: 1;
  right: 60px;
}

.generic_30 .clip .character_detail-image {
  right: calc(60px - 50px);
}
.generic_30 .clip .character_detail-image.show {
  right: calc(60px);
}

.generic_30 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.generic_30 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.generic_31 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_generic_31_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.generic_31 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_generic_31_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.generic_31 .character_detail-bg-paint.show {
  height: 798px;
}

.generic_31 .character_detail-image {
  position: absolute;
  right: calc(100px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.generic_31 .character_detail-image.show {
  opacity: 1;
  right: 100px;
}

.generic_31 .clip .character_detail-image {
  right: calc(100px - 50px);
}
.generic_31 .clip .character_detail-image.show {
  right: calc(100px);
}

.generic_31 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.generic_31 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.generic_32 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_generic_32_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.generic_32 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_generic_32_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.generic_32 .character_detail-bg-paint.show {
  height: 798px;
}

.generic_32 .character_detail-image {
  position: absolute;
  right: calc(100px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.generic_32 .character_detail-image.show {
  opacity: 1;
  right: 100px;
}

.generic_32 .clip .character_detail-image {
  right: calc(100px - 50px);
}
.generic_32 .clip .character_detail-image.show {
  right: calc(100px);
}

.generic_32 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.generic_32 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.generic_33 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_generic_33_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.generic_33 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_generic_33_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.generic_33 .character_detail-bg-paint.show {
  height: 798px;
}

.generic_33 .character_detail-image {
  position: absolute;
  right: calc(70px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.generic_33 .character_detail-image.show {
  opacity: 1;
  right: 70px;
}

.generic_33 .clip .character_detail-image {
  right: calc(70px - 50px);
}
.generic_33 .clip .character_detail-image.show {
  right: calc(70px);
}

.generic_33 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.generic_33 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.generic_34 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_generic_34_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.generic_34 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_generic_34_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.generic_34 .character_detail-bg-paint.show {
  height: 798px;
}

.generic_34 .character_detail-image {
  position: absolute;
  right: calc(85px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.generic_34 .character_detail-image.show {
  opacity: 1;
  right: 85px;
}

.generic_34 .clip .character_detail-image {
  right: calc(85px - 50px);
}
.generic_34 .clip .character_detail-image.show {
  right: calc(85px);
}

.generic_34 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.generic_34 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.generic_35 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_generic_35_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.generic_35 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_generic_35_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.generic_35 .character_detail-bg-paint.show {
  height: 798px;
}

.generic_35 .character_detail-image {
  position: absolute;
  right: calc(85px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.generic_35 .character_detail-image.show {
  opacity: 1;
  right: 85px;
}

.generic_35 .clip .character_detail-image {
  right: calc(85px - 50px);
}
.generic_35 .clip .character_detail-image.show {
  right: calc(85px);
}

.generic_35 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.generic_35 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.generic_36 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_generic_36_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.generic_36 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_generic_36_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.generic_36 .character_detail-bg-paint.show {
  height: 798px;
}

.generic_36 .character_detail-image {
  position: absolute;
  right: calc(130px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.generic_36 .character_detail-image.show {
  opacity: 1;
  right: 130px;
}

.generic_36 .clip .character_detail-image {
  right: calc(130px - 50px);
}
.generic_36 .clip .character_detail-image.show {
  right: calc(130px);
}

.generic_36 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.generic_36 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.generic_37 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_generic_37_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.generic_37 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_generic_37_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.generic_37 .character_detail-bg-paint.show {
  height: 798px;
}

.generic_37 .character_detail-image {
  position: absolute;
  right: calc(10px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.generic_37 .character_detail-image.show {
  opacity: 1;
  right: 10px;
}

.generic_37 .clip .character_detail-image {
  right: calc(10px - 50px);
}
.generic_37 .clip .character_detail-image.show {
  right: calc(10px);
}

.generic_37 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.generic_37 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.generic_38 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_generic_38_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.generic_38 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_generic_38_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.generic_38 .character_detail-bg-paint.show {
  height: 798px;
}

.generic_38 .character_detail-image {
  position: absolute;
  right: calc(10px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.generic_38 .character_detail-image.show {
  opacity: 1;
  right: 10px;
}

.generic_38 .clip .character_detail-image {
  right: calc(10px - 50px);
}
.generic_38 .clip .character_detail-image.show {
  right: calc(10px);
}

.generic_38 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.generic_38 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.generic_39 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_generic_39_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.generic_39 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_generic_39_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.generic_39 .character_detail-bg-paint.show {
  height: 798px;
}

.generic_39 .character_detail-image {
  position: absolute;
  right: calc(100px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.generic_39 .character_detail-image.show {
  opacity: 1;
  right: 100px;
}

.generic_39 .clip .character_detail-image {
  right: calc(100px - 50px);
}
.generic_39 .clip .character_detail-image.show {
  right: calc(100px);
}

.generic_39 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.generic_39 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.generic_40 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_generic_40_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.generic_40 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_generic_40_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.generic_40 .character_detail-bg-paint.show {
  height: 798px;
}

.generic_40 .character_detail-image {
  position: absolute;
  right: calc(65px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.generic_40 .character_detail-image.show {
  opacity: 1;
  right: 65px;
}

.generic_40 .clip .character_detail-image {
  right: calc(65px - 50px);
}
.generic_40 .clip .character_detail-image.show {
  right: calc(65px);
}

.generic_40 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.generic_40 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.generic_41 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_generic_41_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.generic_41 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_generic_41_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.generic_41 .character_detail-bg-paint.show {
  height: 798px;
}

.generic_41 .character_detail-image {
  position: absolute;
  right: calc(80px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.generic_41 .character_detail-image.show {
  opacity: 1;
  right: 80px;
}

.generic_41 .clip .character_detail-image {
  right: calc(80px - 50px);
}
.generic_41 .clip .character_detail-image.show {
  right: calc(80px);
}

.generic_41 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.generic_41 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.generic_42 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_generic_42_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.generic_42 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_generic_42_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.generic_42 .character_detail-bg-paint.show {
  height: 798px;
}

.generic_42 .character_detail-image {
  position: absolute;
  right: calc(100px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.generic_42 .character_detail-image.show {
  opacity: 1;
  right: 100px;
}

.generic_42 .clip .character_detail-image {
  right: calc(100px - 50px);
}
.generic_42 .clip .character_detail-image.show {
  right: calc(100px);
}

.generic_42 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.generic_42 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.generic_43 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_generic_43_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.generic_43 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_generic_43_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.generic_43 .character_detail-bg-paint.show {
  height: 798px;
}

.generic_43 .character_detail-image {
  position: absolute;
  right: calc(100px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.generic_43 .character_detail-image.show {
  opacity: 1;
  right: 100px;
}

.generic_43 .clip .character_detail-image {
  right: calc(100px - 50px);
}
.generic_43 .clip .character_detail-image.show {
  right: calc(100px);
}

.generic_43 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.generic_43 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.generic_44 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_generic_44_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.generic_44 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_generic_44_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.generic_44 .character_detail-bg-paint.show {
  height: 798px;
}

.generic_44 .character_detail-image {
  position: absolute;
  right: calc(55px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.generic_44 .character_detail-image.show {
  opacity: 1;
  right: 55px;
}

.generic_44 .clip .character_detail-image {
  right: calc(55px - 50px);
}
.generic_44 .clip .character_detail-image.show {
  right: calc(55px);
}

.generic_44 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.generic_44 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.generic_45 .character_detail-bg-cutin {
  background: url(../img/character/popup_bg_generic_45_sp.png) no-repeat;
  left: 3%;
  right: auto;
  bottom: auto;
  top: 210px;
}
.generic_45 .character_detail-bg-paint {
  background: url(../img/character/popup_bg_paint_generic_45_sp.png) no-repeat;
  background-position: left bottom;
  width: 718px;
  right: 9px;
  bottom: -53px;
}
.generic_45 .character_detail-bg-paint.show {
  height: 798px;
}

.generic_45 .character_detail-image {
  position: absolute;
  right: calc(80px - 50px);
  bottom: calc(74px - 38px);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.5s, right 0.5s, bottom 0.5s;
  transition: opacity 0.5s, right 0.5s, bottom 0.5s;
}
.generic_45 .character_detail-image.show {
  opacity: 1;
  right: 80px;
}

.generic_45 .clip .character_detail-image {
  right: calc(80px - 50px);
}
.generic_45 .clip .character_detail-image.show {
  right: calc(80px);
}

.generic_45 .character_detail-wards {
  position: absolute;
  right: calc(338px + 5px);
  bottom: calc(46px + 50px);
  z-index: 2;
  opacity: 0;
  -webkit-transition: right 0.5s, bottom 0.5s, opacity 0.5s;
  transition: right 0.5s, bottom 0.5s, opacity 0.5s;
}
.generic_45 .character_detail-wards.show {
  opacity: 1;
  right: 338px;
  bottom: 46px;
}

.character_detail-container .clip {
  height: initial;
  position: initial;
  right: initial;
  bottom: initial;
  overflow: initial;
}
.character_detail-wrapper.sub_03 .character_detail-container.image, .character_detail-wrapper.generic_23 .character_detail-container.image {
  width: 100%;
}

.sns-wrapper.character .sns-button {
  margin-top: 2%;
  margin-bottom: 1%;
}

/* --------------------------------------------------------------------------------
 システム - 全般
-------------------------------------------------------------------------------- */
.article-system p {
  font-size: 1.1em;
  margin-left: 3%;
  margin-right: 3%;
}
.article-system .system-frame {
  margin-left: 3%;
  margin-right: 3%;
}
.article-system .system-frame p {
  margin-left: 0;
  margin-right: 0;
}
.article-system .system-frame-caption {
  font-family: "Zen Antique", serif;
  font-size: 46px;
  color: #ffbb29;
  text-shadow: -2px -2px 2px #000, 0px -2px 2px #000, 2px -2px 2px #000, -2px 0 2px #000, 0px 0 2px #000, 2px 0 2px #000, -2px 2px 2px #000, 0px 2px 2px #000, 2px 2px 2px #000;
}

/* --------------------------------------------------------------------------------
 システム - 戦闘システム - 神討モード
-------------------------------------------------------------------------------- */
.weapon-wrapper {
  background: url(../img/system/battle/revenge_bg_sp.png) no-repeat;
  width: 960px;
  height: 1588px;
}
.weapon-container.image {
  width: 70%;
  position: absolute;
  left: 15%;
  top: 800px;
}
.weapon-container.text {
  width: 100%;
}
.weapon-container.text p {
  line-height: 1.2em;
  position: absolute;
  top: 840px;
  padding: 0;
  margin: 10px 4%;
}
.weapon-container .media-container {
  width: 100%;
  text-align: center;
  left: 0;
  bottom: 66px;
}
.weapon-container .media-container .movie,
.weapon-container .media-container .ss {
  max-width: 671px;
}
.weapon-01 .weapon-bg-paint {
  background: url(../img/system/battle/revenge_weapon_01_bg_paint_sp.png) no-repeat;
  background-position: center bottom;
  width: 1117px;
  position: absolute;
  left: 50%;
  bottom: -50px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.weapon-01.visible .weapon-bg-paint {
  height: 798px;
}

.weapon-02 .weapon-bg-paint {
  background: url(../img/system/battle/revenge_weapon_02_bg_paint_sp.png) no-repeat;
  background-position: center bottom;
  width: 1117px;
  position: absolute;
  left: 50%;
  bottom: -50px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.weapon-02.visible .weapon-bg-paint {
  height: 798px;
}

.weapon-caption {
  -webkit-transition-delay: 1.25s;
          transition-delay: 1.25s;
}
.weapon-caption-bg-container {
  -webkit-transition-delay: 1s;
          transition-delay: 1s;
}

/* --------------------------------------------------------------------------------
 プロダクト
-------------------------------------------------------------------------------- */
.article-product .section-product_info .flex-wrapper {
  margin: 0 3%;
}
.article-product .section-product_info .flex-wrapper p {
  font-size: 1.1em;
  margin-left: 3%;
}
.article-product .section-set_info .set_info-frame {
  margin: 0 3%;
}
.article-product .section-set_info .set_info-frame .detail p {
  font-size: 26rem;
}
.article-product .section-set_info .set_info-frame .detail em {
  font-size: 30rem;
}
.article-product .section-set_info .set_info-frame .detail .link {
  font-size: 28rem;
}
.article-product .section-set_info .set_info-frame .detail .flex-wrapper {
  display: block;
}
.article-product .section-store_benefit .store-container {
  width: 46%;
  margin: 2% 2%;
}
.article-product .section-store_benefit .store-container:nth-child(odd) {
  margin-right: 1%;
}
.article-product .section-store_benefit .store-container.rakuten .store-benefit {
  max-width: 233px;
}

/* --------------------------------------------------------------------------------
 トピックス
-------------------------------------------------------------------------------- */
.article-topics .text-container {
  margin-left: 3%;
  margin-right: 3%;
}