@charset "UTF-8";

/* ========================================
  contents
======================================== */
.loading {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10010;
  width: 100%;
  height: 100%;
  opacity: 1;
  background:
    url(../images/top/modal_voice_bg_top.png) left top repeat-x,
    url(../images/top/modal_voice_bg_bottom.png) left bottom repeat-x #244db6;
  background-size: auto 37%;
}
.loading.is-hide {
  transition: 500ms;
  opacity: 0;
}
.loading_inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28.64583%; /* 550 / 1920 * 100 */
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.loading_box {
  position: relative;
  width: 100%;
  padding-top: 96.72727%; /* 527 / 550 * 100 */
}
.loading_box:before  {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.loading_img {
  position: absolute;
  top: 0;
  left: -5.09091%; /* -28 / 550 * 100 */
  z-index: 2;
  width: 99.09091%; /* 545 / 550 * 100 */
}
.loading_arrow {
  position: absolute;
  top: -1.13852%; /* -6 / 527 * 100 */
  left: 4.72727%; /* 26 / 550 * 100 */
  width: 42.36364%; /* 233 / 550 * 100 */
}
.loading_arrow-now,
.loading_arrow-complete {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.loading_arrow-now {
  opacity: 1;
/*  transform: rotateY(0deg);*/
}
.loading_arrow-complete {
  opacity: 0;
/*  transform: rotateY(90deg);*/
}
.loading.is-complete .loading_arrow-now {
  opacity: 0;
  transition: opacity 400ms;
/*  transform:rotateY(90deg);
  transition:
    opacity 100ms 200ms,
    transform 400ms;*/
}
.loading.is-complete .loading_arrow-complete {
  opacity: 1;
  transition: opacity 400ms;
/*  transform:rotateY(0deg);
  transition:
    opacity 100ms 200ms,
    transform 300ms 200ms;*/
}

#top .l-contents {
  position: relative;
  max-width: 2000px;
  margin: 0 auto;
  -webkit-padding-bottom: calc(3.125% + 40px);
  padding-bottom: calc(3.125% + 40px);
}

/* grid */
.p-top-grid {
  width: 100%;
}

.p-top-grid_item {
  width: 100%;
}

.p-top-grid_item:after {
  content: "";
  display: block;
  clear: both;
}

.p-top-grid_logo {
  position: relative;
  float: left;
  width: 50%;
  z-index: 50;
}

.p-top-grid_logo_text {
  position: absolute;
  top: 5.58823%;
  right: -8.85416%;
  width: 46.875%;
}

.p-top-grid_thumb {
  position: relative;
  float: left;
  width: 25%;
}

.p-top-grid_thumb.wide {
  width: 50%;
}

.p-top-grid_thumb_img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
}

.p-top-grid_thumb_chara {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
}

.is-surface .p-top-grid_thumb_game {
  opacity: 1;
  transform: rotateY(0deg);
  transition:
    opacity 100ms 200ms,
    transform 300ms 200ms;
}

.is-surface .p-top-grid_thumb_img,
.is-surface .p-top-grid_thumb_chara {
  opacity: 0;
  transform: rotateY(90deg);
  transition:
    opacity 100ms 200ms,
    transform 400ms;
}

.is-control .p-top-grid_thumb_img {
  opacity: 1;
  transform:rotateY(0deg);
  transition:
    opacity 100ms 200ms,
    transform 300ms 200ms;
}

.is-control .p-top-grid_thumb_game,
.is-control .p-top-grid_thumb_chara {
  opacity: 0;
  transform:rotateY(90deg);
  transition:
    opacity 100ms 200ms,
    transform 400ms;
}

.is-chara .p-top-grid_thumb_chara {
  opacity: 1;
  transform:rotateY(0deg);
  transition:
    opacity 100ms 200ms,
    transform 300ms 200ms;
}

.is-chara .p-top-grid_thumb_game,
.is-chara .p-top-grid_thumb_img {
  opacity: 0;
  transform: rotateY(90deg);
  transition:
    opacity 100ms 200ms,
    transform 400ms;
}

.p-top-grid_btn {
  position: relative;
  float: left;
  width: 25%;
  z-index: 50;
}

.p-top-grid_btn.wide {
  width: 50%;
}

.p-top-grid_btn_title {
  position: absolute;
}

#dl .p-top-grid_btn_title {
  top: 0;
  left: 0;
  width: 100%;
}
#dl .btn-arw_bg {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 21.875%;
  height: 30.88235%;
  background: url(../../../assets/images/top/dl_arw_bg.png) right bottom no-repeat;
  background-size: contain;
}

#mode .p-top-grid_btn_title {
  top: -6.7647%;
  left: -6.25%;
  width: 106.45833%;
}

#petitgame .p-top-grid_btn_title {
  top: -23.52941%;
  left: -6.875%;
  width: 106.875%;
}

#movie .p-top-grid_btn_title {
  top: -4.117647%;
  left: 20%;
  width: 60.41667%;
}

#voice .p-top-grid_btn_title {
  top: -14.41176%;
  left: 4.16666%;
  width: 94.791666%;
}

#amiibo .p-top-grid_btn_title {
  top: -14.41176%;
  left: 12.5%;
  width: 80.20833%;
}

.p-top-grid_character {
  position: relative;
  float: left;
  width: 25%;
  z-index: 50;
  cursor: pointer;
  background-position: center top;
  background-repeat: no-repeat #fff;
  background-size: cover;
}

.p-top-grid_character_img {
  position: relative;
}

.p-top-grid_character_balloon {
  position: absolute;
}

.chara01 .p-top-grid_character_balloon {
  top: 3.82352%;  /*13/340*100*/
  left: -22.08333%;  /*108/480*100*/
  width: 56.458333%;  /*271/480*100*/
  z-index: 10;
}
.chara02 .p-top-grid_character_balloon {
  top: 3.82352%;  /*13/340*100*/
  right: -22.08333%;  /*108/480*100*/
  width: 56.458333%;  /*271/480*100*/
  z-index: 10;
}
.chara03 .p-top-grid_character_balloon {
  top: 14.705882%;  /*50/340*100*/
  left: -16.66666%;  /*40/480*100*/
  width: 56.25%;  /*270/480*100*/
}
.chara04 .p-top-grid_character_balloon {
  top: 10.294117%;  /*35/340*100*/
  left: -7.91666%;  /*38/480*100*/
  width: 56.25%;  /*270/480*100*/
}
.chara05 .p-top-grid_character_balloon {
  top: 14.705882%;  /*50/340*100*/
  left: -8.33333%;  /*40/480*100*/
  width: 56.25%;  /*270/480*100*/
}
.chara06 .p-top-grid_character_balloon {
  top: 14.705882%;  /*50/340*100*/
  left: -4.16666%;  /*20/480*100*/
  width: 56.25%;  /*270/480*100*/
}
.chara07 .p-top-grid_character_balloon {
  top: 15.29411%;  /*52/340*100*/
  right: -25.8333%;  /*124/480*100*/
  width: 56.458333%;  /*271/480*100*/
}
.chara08 .p-top-grid_character_balloon {
  top: 5.29411%;  /*18/340*100*/
  right: -25.8333%;  /*124/480*100*/
  width: 56.25%;  /*270/480*100*/
}
.chara09 .p-top-grid_character_balloon {
  top: 5.29411%;  /*18/340*100*/
  right: -23.33333%;  /*112/480*100*/
  width: 56.458333%;  /*271/480*100*/
}
.chara10 .p-top-grid_character_balloon {
  top: 3.82352%;  /*13/340*100*/
  right: -25.8333%;  /*124/480*100*/
  width: 56.458333%;  /*271/480*100*/
}
.chara11 .p-top-grid_character_balloon {
  top: 0;
  right: -22.08333%;  /*108/480*100*/
  width: 56.458333%;  /*271/480*100*/
}
.chara12 .p-top-grid_character_balloon {
  top: 0;
  right: -22.08333%;  /*108/480*100*/
  width: 56.458333%;  /*271/480*100*/
}
.chara13 .p-top-grid_character_balloon {
  top: 0;
  right: -22.08333%;  /*108/480*100*/
  width: 56.458333%;  /*271/480*100*/
}
.chara14 .p-top-grid_character_balloon {
  top: 2.352941%;  /*8/340*100*/
  left: -8.33333%;  /*40/480*100*/
  width: 56.25%;  /*270/480*100*/
}
.chara15 .p-top-grid_character_balloon {
  top: 2.352941%;  /*8/340*100*/
  left: -14.375%;  /*69/480*100*/
  width: 56.25%;  /*270/480*100*/
}
.chara16 .p-top-grid_character_balloon {
  top: 3.82352%;  /*13/340*100*/
  right: -22.08333%;  /*92/480*100*/
  width: 56.458333%;  /*271/480*100*/
}
.chara17 .p-top-grid_character_balloon {
  top: 5.29411%;  /*18/340*100*/
  right: -20.41666%;  /*98/480*100*/
  width: 56.458333%;  /*271/480*100*/
}
.chara18 .p-top-grid_character_balloon {
  top: 5.29411%;  /*18/340*100*/
  right: -20.41666%;  /*98/480*100*/
  width: 56.458333%;  /*271/480*100*/
}
.chara19 .p-top-grid_character_balloon {
  top: 6.47058%;  /*22/340*100*/
  right: -23.33333%;  /*112/480*100*/
  width: 56.458333%;  /*271/480*100*/
}
.chara20 .p-top-grid_character_balloon {
  top: 6.47058%;  /*22/340*100*/
  right: -23.33333%;  /*112/480*100*/
  width: 56.458333%;  /*271/480*100*/
}

.p-top-grid_character .is-hover_chara {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  transition : all 0.2s ease;
}
.p-top-grid_character:hover .is-hover_chara {
  opacity: 1;
}
.p-top-grid_character .is-hover {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 0;
  transition : all 0.2s ease;
}
.p-top-grid_character:hover .is-hover {
  opacity: 0.3;
}

.p-top-grid_character.blue {
  background-image: url(../images/top/chara_bg_blue.png);
}

.p-top-grid_character.yellow {
  background: url(../images/top/chara_bg_yellow.png);
  background-size: cover;
}

.p-top-grid_character.pink {
  background: url(../images/top/chara_bg_pink.png);
  background-size: cover;
}

.p-top-grid_character.green {
  background: url(../images/top/chara_bg_green.png);
  background-size: cover;
}

.p-top-grid_character.purple {
  background: url(../images/top/chara_bg_purple.png);
  background-size: cover;
}

.is-hover {
  display: block;
  background-color: #ffffff;
}
.is-hover img.alpah {
  opacity: 1;
  -webkit-transition : all 0.2s ease;
  transition : all 0.2s ease;
}
.is-hover:hover img.alpah {
  opacity: 0.7;
}
.p-top-grid_btn:after,
.p-top-grid_character:after {
  content: '';
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    url(../images/top/hover_lefttop.png) left top no-repeat,
    url(../images/top/hover_righttop.png) right top no-repeat,
    url(../images/top/hover_rightbottom.png) right bottom no-repeat,
    url(../images/top/hover_leftbottom.png) left bottom no-repeat;
  background-size: 8.541666% auto;
  pointer-events: none;
}
.p-top-grid_btn.wide:after {
  background-size: 4.170833% auto;
}

body:not(.is-tablet) .p-top-grid_btn:hover,
body:not(.is-tablet) .p-top-grid_character:hover {
  display: block;
}

body:not(.is-tablet) .p-top-grid_btn:hover:after,
body:not(.is-tablet) .p-top-grid_character:hover:after {
  display: block;
  -webkit-animation: btnHover 500ms steps(2) infinite;
  animation: btnHover 500ms steps(2) infinite;
}

@-webkit-keyframes btnHover {
  0% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes btnHover {
  0% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.btn-arw {
  position: absolute;
  bottom: 7.35294%;
  right: 2.08333%;
  width: 9.791666%;
  height: 25px;
  background: url(../images/top/arw.png) right bottom no-repeat;
  background-size: contain;
}
.p-top-grid_btn.wide .btn-arw {
  right: 1.041666%;
  width: 4.8958333%;
}
#movie.p-top-grid_btn.wide .btn-arw {
  bottom: 3.67647%;
}
.btn-arw{
  -webkit-animation: arrowR 1000ms infinite;
  animation: arrowR 1000ms infinite;
}
@-webkit-keyframes arrowR {
  0% {  -webkit-transform: translateX(0%);  transform: translateX(0%);  }
  40% { -webkit-transform: translateX(15%); transform: translateX(15%); }
  80% { -webkit-transform: translateX(0%);  transform: translateX(0%);  }
  100% {  -webkit-transform: translateX(0%);  transform: translateX(0%);  }
}
@keyframes arrowR {
  0% {  -webkit-transform: translateX(0%);  transform: translateX(0%);  }
  40% { -webkit-transform: translateX(15%); transform: translateX(15%); }
  80% { -webkit-transform: translateX(0%);  transform: translateX(0%);  }
  100% {  -webkit-transform: translateX(0%);  transform: translateX(0%);  }
}


/* spec */
.p-top-spec {
  width: 100%;
  background: url(../images/top/spec_bg.png) left top no-repeat;
  background-size: cover;
}

.p-top-spec-inner {
  position: relative;
  width: 100%;
  min-width: 960px;
  max-width: 1280px;
  margin: 0 auto;
  z-index: 100;
}
.p-top-spec-inner img {
  width: 100%;
  height: auto;
}

.p-top-spec-inner:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  padding-top: 17.03125%;
}

.p-top-spec-info {
  position: absolute;
  top: 27.52293%;  /*60/218*100*/
  left: 50%;
  transform: translateX(-50%);
  width: 48.28125%;
}

.p-top-spec_gamettl {
  -webkit-width: calc(478 / 618 * 100%);
  width: calc(478 / 618 * 100%);
  margin-bottom: 2.8%;
}

.p-top-spec_release {
  -webkit-width: calc(370 / 618 * 100%);
  width: calc(370 / 618 * 100%);
  margin-bottom: 2.8%;
}

.p-top-spec_amiibo {
  position: absolute;
  top: 25.229357%;  /*55/218*100*/
  right: 25%;  /*415/1280*100*/
  -webkit-width: calc(58 / 1280 * 100%);
  width: calc(58 / 1280 * 100%);
}

.p-top-spec_cero {
  position: absolute;
  top: 27.52293%;  /*60/218*100*/
  right: 21%;  /*360/1280*100*/
  -webkit-width: calc(45 / 1280 * 100%);
  width: calc(45 / 1280 * 100%);
}

.p-top-spec_detail {
  position: absolute;
  top: 27.52293%;  /*60/218*100*/
  right: 0.78125%;  /*10/1280*100*/
  -webkit-width: calc(320 / 1280 * 100%);
  width: calc(320 / 1280 * 100%);
}

.p-top-spec_chara {
  position: absolute;
  bottom: calc(-151 / 1280 * 100%);
  left: calc(70 / 1280 * 100%);
  -webkit-width: calc(300 / 1280 * 100%);
  width: calc(300 / 1280 * 100%);
/*  -webkit-transform: translateX(27.0627%);
  transform: translateX(27.0627%);*/
  -webkit-transform: translateX(-19.14191%);
  transform: translateX(-19.14191%);
}

/* ========================================
  footer
======================================== */
.l-footer-top {
  position: fixed;
  bottom: -130px;
  left: 50%;
  width: 100%;
  transition: bottom 300ms;
  z-index: 8000;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.l-footer-top.is-show {
  bottom: -40px;
}
.l-footer-top.is-show-bottom {
  bottom: 0;
}
.no-js .l-footer-top {
  bottom: 0;
}

.l-footer-top {
  width: 100%;
  min-width: 960px;
  max-width: 2000px;
  margin: 0 auto;
}
.l-footer-top .l-pagetop {
  top: 0;
  bottom: auto;
  -webkit-transform: translateY(-73.47826%);
  transform: translateY(-73.47826%);
}
.l-footer-gnav {
  position: relative;
  background: url(../images/common/bg.png) repeat-x top left;
  background-size: 92px 90px;
}
.l-footer-gnav:after {
  position: absolute;
  content: '';
  display: block;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 6px;
  background-color: rgba(0,0,0,0.5);
}
.l-footer-gnav_list {
  width: 46.09375%; /* 885 / 1920 * 100 */
  margin: 0 auto;
  font-size: 0;
}
.l-footer-gnav_list li {
  display: inline-block;
}
.l-footer-gnav_logo {
  width: 22.25988%; /* 197 / 885 * 100 */
}
.l-footer-gnav_list li.gnav01 {
  width: 28.92655%; /* 256 / 885 * 100 */
}
.l-footer-gnav_list li.gnav02 {
  position: relative;
  width: 28.70056%; /* 254 / 885 * 100 */
}
.l-footer-gnav_list li.gnav03 {
  position: relative;
  width: 20.11299%; /* 178 / 885 * 100 */
}
.gnav02 .ico-new {
  width: 39.37007%; /* 100 / 254 * 100 */
}
.gnav03 .ico-new {
  width: 56.17977%; /* 100 / 178 * 100 */
}
.gnav03 .ico-newmk {
  width: 40%;
  position: absolute;
  top: -47%;
  right: 25%;
}

.ico-comingsoon {
  position: absolute;
  top: 0;
  left: 0;
  width: 68.75%; /* 110 / 160 * 100 */
  -webkit-transform: translate(55%,-22.727272%);
  transform: translate(55%,-22.727272%);
}

.l-footer-top .l-footer-inner {
  background: url(../images/top/footer_bg_btm.png) center top repeat;
  background-size: contain;
  height: 40px;
}

.l-footer_official {
  float: left;
}
.l-footer-top .l-footer_official li .arw {
  background: url(../images/top/footer_arrow.png) 0 0 no-repeat;
  height: 13px;
  margin-top: 2px;
}
.l-footer-top .l-footer_official li a:hover .arw {
  background: url(../images/top/footer_arrow.png) 0 0 no-repeat;
  -webkit-transform: translateX(-3px);
  transform: translateX(-3px);
}

.l-footer-right {
  float: right;
  padding-top: 12px;
}

.l-footer-sns {
  float: right;
  margin-left: 40px;
}

.l-footer-sns li {
  display: inline-block;
  margin-right: 10px;
}
@media screen and (max-width: 1050px) {
.l-footer-sns {
  margin-left: 20px;
}
.l-footer-sns li {
  margin-right: 5px;
}
.l-footer_copyright {
  display: inline-block;
  width: 400px;
}
} /* max-width: 1050px END */

.l-footer_copyright img {
  padding-top: 5px;
}

.l-footer-inner:after {
  content: "";
  display: block;
  clear: both;
}

/* ========================================
  l-modal
======================================== */
.l-modal {
  z-index: 10010;
}

.p-top-movie_modal-frame {
  position: relative;
  padding-top: 56.25%;
}
.p-top-movie_modal-frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* movie */
[data-modalbody="modal-movie"] .l-modal_bg {
  background: url(../images/top/modal_movie_bg.png) repeat-x #244db6;
}
.p-top-movie-modalbody {
  position: relative;
  width: 960px;
  margin: 0 auto;
  padding: 40px 0;
}
.p-top-movie_modal-wrap {
  text-align: center;
}
.p-top-movie_modal-ttl {
  margin-bottom: 40px;
}
.p-top-movie_modal-txt {
  margin-bottom: 45px;
}
.p-top-movie_modal-inner {
  width: 820px;
  margin: 0 auto;
  padding: 10px;
  border-radius: 10px;
  background-color: #000;
  box-sizing: border-box;
}

/* amiibo */
[data-modalbody="modal-amiibo"] .l-modal_bg {
  background:
    url(../images/top/modal_voice_bg_top.png) left top repeat-x,
    url(../images/top/modal_voice_bg_bottom.png) left bottom repeat-x #244db6;
  background-size: auto 37%;
}
.p-top-amiibo-modalbody {
  position: relative;
  max-width: 1280px;
  min-width: 960px;
  width: 100%;
  margin: 0 auto;
}

.p-top-amiibo_modal-wrap {
  padding: 5% 0;
  background:
    url(../images/top/modal_amiibo_bg.png) center top no-repeat;
  background-size: 100% auto;
}

.p-top-amiibo_modal-ttl {
  width: 70.703125%;
  margin-left: 20.70312%;
}
.p-top-amiibo_modal-img01 {
  margin-top: -3.5%;
}
.p-top-amiibo_modal-img02 {
  width: 43.51562%; /*557/1280*100*/
  margin-left: 42.5%;
  margin-top: -2%;
}
.p-top-amiibo_modal-btn {
  width: 33.28125%; /*426/1280*100*/
  margin: 0 auto;
}

/* voice */
[data-modalbody="modal-voice"] .l-modal_bg {
  background:
    url(../images/top/modal_voice_bg_top.png) left top repeat-x,
    url(../images/top/modal_voice_bg_bottom.png) left bottom repeat-x #244db6;
  background-size: auto 37%;
}
.p-top-voice-modalbody {
  position: relative;
  max-width: 1280px;
  min-width: 960px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.p-top-voice_modal-ttl {
  width: 28.515625%;
  margin: 0 auto;
  text-align: center;
  padding-top: 5%;
  padding-bottom: 5%;
}
.is-tablet .p-top-voice_modal-ttl {
  width: 40%;
  margin: 0 auto;
}
.is-tablet .p-top-voice_modal-ttl img {
  width: 100%;
}
.p-top-voice_modal-img {
}
.is-tablet .p-top-voice_modal-img {
     position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
   width: 90%;
}
body:not(.is-tablet) .p-top-voice_modal-img img.pc-img,
.is-tablet .p-top-voice_modal-img img.tablet-img {
  display: block;
}

body:not(.is-tablet) .p-top-voice_modal-img img.tablet-img,
.is-tablet .p-top-voice_modal-img img.pc-img {
  display: none;
}
.p-top-voice_modal-img img.tablet-img {
  width: 100%;
}

.p-top-voice_modal-wrap .l-modal_btn__close {
  margin-top: -90px;
}
.is-tablet .p-top-voice_modal-wrap .l-modal_btn__close {
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin-top: 0;
}

/* character */
.p-top-chara {
  background: url(../images/top/modal_chara_light.png) center top no-repeat;
  background-size: cover;
}
.p-top-character-modalbody {
  position: relative;
  max-width: 1100px;
  min-width: 960px;
  width: 100%;
  margin: 0 auto;
}

.p-top-chara_modal-wrap {
  padding: 10px 0;
}

[data-modalbody="modal-chara01"] .l-modal_bg,
[data-modalbody="modal-chara02"] .l-modal_bg,
[data-modalbody="modal-chara11"] .l-modal_bg,
[data-modalbody="modal-chara12"] .l-modal_bg,
[data-modalbody="modal-chara13"] .l-modal_bg {
  background:
    url(../images/top/modal_chara_bg_blue.png) repeat;
}

[data-modalbody="modal-chara03"] .l-modal_bg,
[data-modalbody="modal-chara04"] .l-modal_bg,
[data-modalbody="modal-chara05"] .l-modal_bg,
[data-modalbody="modal-chara06"] .l-modal_bg,
[data-modalbody="modal-chara14"] .l-modal_bg,
[data-modalbody="modal-chara15"] .l-modal_bg {
  background:
    url(../images/top/modal_chara_bg_pink.png) repeat;
}

[data-modalbody="modal-chara07"] .l-modal_bg,
[data-modalbody="modal-chara08"] .l-modal_bg,
[data-modalbody="modal-chara09"] .l-modal_bg,
[data-modalbody="modal-chara16"] .l-modal_bg,
[data-modalbody="modal-chara17"] .l-modal_bg,
[data-modalbody="modal-chara18"] .l-modal_bg {
  background:
    url(../images/top/modal_chara_bg_yellow.png) repeat;
}

[data-modalbody="modal-chara19"] .l-modal_bg {
  background:
    url(../images/top/modal_chara_bg_green.png) repeat;
}

[data-modalbody="modal-chara20"] .l-modal_bg {
  background:
    url(../images/top/modal_chara_bg_purple.png) repeat;
}

[data-modalbody="modal-chara10"] .l-modal_bg {
  background:
    url(../images/top/modal_chara_bg_wario.png) no-repeat center top;
  background-size: cover;
}

.p-top-chara_modal_chara01 {
  position: relative;
}
.p-top-chara_modal_ashley {
  position: absolute;
  top: 0;
  right: 0;
  width: 52.857142%;
  cursor: pointer;
}
.p-top-chara_modal_ashley div {
  position: absolute;
  top: 0;
  right: 0;
  transition: opacity 1s ease 0s;
}
.p-top-chara_modal_ashley .ashley01,
.p-top-chara_modal_ashley.is-show .ashley02 {
  opacity: 1;
}
.p-top-chara_modal_ashley.is-show .ashley01,
.p-top-chara_modal_ashley .ashley02 {
  opacity: 0;
}

.p-top-chara_modal-wrap .l-modal_btn__close {
  width: 27.81818%;
  margin-left: auto;
  margin-right: auto;
}


/* btn */
.l-modal_btn__close {
  cursor: pointer;
  text-align: center;
  margin-top: 40px;
}