@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_movie_bg.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: 72.66667%; /* 545 / 750 * 100 */
	transform: translate(-50%, -50%);
}
.loading_box {
	position: relative;
	width: 100%;
	padding-top: 70.26667%; /* 527 / 750 * 100 */
}
.loading_box:before  {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.loading_img {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
}
.loading_arrow {
	position: absolute;
	top: -1.13852%; /* -6 / 527 * 100 */
	left: 9.90826%; /* 54 / 545 * 100 */
	width: 42.75229%; /* 233 / 545 * 100 */
}
.loading_arrow-now,
.loading_arrow-complete {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.loading_arrow-now {
  opacity: 1;
}
.loading_arrow-complete {
  opacity: 0;
}
.loading.is-complete .loading_arrow-now {
  opacity: 0;
  transition: opacity 400ms;
}
.loading.is-complete .loading_arrow-complete {
  opacity: 1;
  transition: opacity 400ms;
}

/*.loading.is-complete .loading_img,
.loading.is-complete .loading_txt {
	opacity: 0;
	transition: 200ms;
}
.loading.is-complete .loading_complete-bg {
	opacity: 1;
	transition: 200ms 300ms;
}
.loading.is-complete .loading_complete-img {
	opacity: 1;
	transform: scale(1);
	transition: transform 200ms cubic-bezier(0.015, 0.930, 0.320, 1.640) 300ms, opacity 100ms 300ms;
}
.loading.is-complete .loading_complete-arr {
	opacity: 1;
	transform: scale(1);
	transition: transform 200ms cubic-bezier(0.015, 0.930, 0.320, 1.640) 500ms, opacity 100ms 500ms;
}*/

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

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

.p-top-grid_logo {
  position: relative;
  z-index: 50;
	background: url(../images/top/visual_bg.png) center top no-repeat;
  background-size: cover;
}

.p-top-grid_logo_text {
  position: absolute;
  top: 0;
  left: 0;
  width: 57.33333%;
}

.p-top-grid_thumb {
  position: relative;
  display: inline-block;
  width: 50%;
}

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

.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;
	display: inline-block;
	width: 50%;
  z-index: 50;
}

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

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

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

#mode .p-top-grid_btn_title {
  top: 0;
  left: 0;
	-webkit-transform: translateY(-20.83333%);
	transform: translateY(-20.83333%);
}

#petitgame .p-top-grid_btn_title {
  top: 0;
  left: 0;
	-webkit-transform: translateY(-18.066157%);
	transform: translateY(-18.066157%);
}

#movie .p-top-grid_btn_title {
  top: -4.88721%;
  left: 9.86667%;
  width: 79.60000%;
}

#amiibo .p-top-grid_btn_title {
  top: -13.90977%;
  left: 11.73333%;
  width: 84.8%;
}

#voice .p-top-grid_btn_title {
  top: -12.78195%;
  left: 0;
  width: 100%;
}

.p-top-grid_character {
  position: relative;
	display: inline-block;
  width: 50%;
  z-index: 50;
	cursor: pointer;
	background-position: center top;
	background-repeat: no-repeat;
  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.75939%;  /*10/266*100*/
  left: -22.4%;  /*84/375*100*/
  width: 64.8%;  /*243/375*100*/
}
.chara02 .p-top-grid_character_balloon {
  top: 7.89473%;  /*21/266*100*/
  right: -37.3333%;  /*140/375*100*/
  width: 64.8%;  /*243/375*100*/
}
.chara03 .p-top-grid_character_balloon {
  top: -4.13533%;  /*-11/266*100*/
  left: -28%;  /*105/375*100*/
  width: 65.06666%;  /*244/375*100*/
}
.chara04 .p-top-grid_character_balloon {
  top: -4.13533%;  /*-11/266*100*/
  left: -20%;  /*75/375*100*/
  width: 65.06666%;  /*244/375*100*/
}
.chara05 .p-top-grid_character_balloon {
  top: -4.13533%;  /*-11/266*100*/
  left: -20%;  /*75/375*100*/
  width: 65.06666%;  /*244/375*100*/
}
.chara06 .p-top-grid_character_balloon {
  top: -4.13533%;  /*-11/266*100*/
  left: -20%;  /*75/375*100*/
  width: 65.06666%;  /*244/375*100*/
}
.chara07 .p-top-grid_character_balloon {
  top: 7.89473%;  /*21/266*100*/
  right: -37.06666%;  /*139/375*100*/
  width: 64.8%;  /*243/375*100*/
}
.chara08 .p-top-grid_character_balloon {
  top: -7.51879%;  /*-20/266*100*/
  right: -24.53333%;  /*92/375*100*/
  width: 64.53333%;  /*242/375*100*/
}
.chara09 .p-top-grid_character_balloon {
  top: -9.39849%;  /*-25/266*100*/
  right: -32%;  /*120/375*100*/
  width: 64.53333%;  /*242/375*100*/
}
.chara10 .p-top-grid_character_balloon {
  top: 7.89473%;  /*21/266*100*/
  right: -37.33333%;  /*140/375*100*/
  width: 64.8%;  /*243/375*100*/
}


.chara11 .p-top-grid_character_balloon {
  top: -7.51879%;  /*-20/266*100*/
  right: -24%;  /*90/375*100*/
  width: 64.8%;  /*243/375*100*/
}
.chara12 .p-top-grid_character_balloon {
  top: -7.51879%;  /*-20/266*100*/
  right: -24%;  /*90/375*100*/
  width: 64.8%;  /*243/375*100*/
}
.chara13 .p-top-grid_character_balloon {
  top: -1.50375%;  /*-20/266*100*/
  right: -24%;  /*90/375*100*/
  width: 64.8%;  /*243/375*100*/
}
.chara14 .p-top-grid_character_balloon {
  top: -7.51879%;  /*-4/266*100*/
  left: -21.33333%;  /*80/375*100*/
  width: 65.06666%;  /*244/375*100*/
}
.chara15 .p-top-grid_character_balloon {
  top: -7.51879%;  /*-4/266*100*/
  left: -21.33333%;  /*80/375*100*/
  width: 65.06666%;  /*244/375*100*/
}
.chara16 .p-top-grid_character_balloon {
  top: -7.51879%;  /*-20/266*100*/
  right: -24.53333%;  /*92/375*100*/
  width: 64.53333%;  /*242/375*100*/
}
.chara17 .p-top-grid_character_balloon {
  top: -7.51879%;  /*-20/266*100*/
  right: -24.53333%;  /*92/375*100*/
  width: 64.53333%;  /*242/375*100*/
}
.chara18 .p-top-grid_character_balloon {
  top: -7.51879%;  /*-20/266*100*/
  right: -24.53333%;  /*92/375*100*/
  width: 64.53333%;  /*242/375*100*/
}
.chara19 .p-top-grid_character_balloon {
  top: 7.51879%;  /*20/266*100*/
  right: -34.13333%;  /*128/375*100*/
  width: 64.8%;  /*243/375*100*/
}
.chara20 .p-top-grid_character_balloon {
  top: 7.51879%;  /*20/266*100*/
  right: -34.13333%;  /*128/375*100*/
  width: 64.8%;  /*243/375*100*/
}



.p-top-grid_character .is-hover_chara {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	z-index: 1;
}

.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;
}

.btn-arw {
  position: absolute;
  bottom: 7.3529411%;
  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%;
}
.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 {
  position: relative;
  width: 100%;
  background: url(../images/top/spec_bg.png) center top no-repeat;
  background-size: cover;
}
.p-top-spec-inner {
  position: relative;
	-webkit-padding-top:  calc(215 / 750 * 100%);
	padding-top:  calc(215 / 750 * 100%);
}

.p-top-spec_info {
  position: absolute;
  top: 27%;  /*50/310*100*/
	left: 0;
}
.p-top-spec_amiibo {
  position: absolute;
  top: 14.45161%;  /*45/310*100*/
  right: 12%;  /*420/1280*100*/
  -webkit-width: calc(58 / 750 * 100%);
  width: calc(58 / 750 * 100%);
}

.p-top-spec_cero {
  position: absolute;
  top: 16.12903%;  /*50/310*100*/
  right: 3.2%;  /*24/750*100*/
  -webkit-width: calc(56 / 750 * 100%);
  width: calc(56 / 750 * 100%);
}

.p-top-spec_detail {
  position: absolute;
	top: 64.51612%; /*70/310*100*/
	left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-width: calc(550 / 750 * 100%);
  width: calc(550 / 750 * 100%);
}

/* ========================================
	footer
======================================== */
.l-top-footer {
	position: relative;
	padding-top: 6%;
}
.l-top-footer .l-footer_pagetop {
	top: 0;
	-webkit-transform: translateY(-10.738255%);
	transform: translateY(-10.738255%);
}
.l-top-footer_logo {
	width: 44.9333333%;
	margin-bottom: 5%;
	margin-left: auto;
	margin-right: auto;
}

.l-top-footer_info {
	background: url(../images/top/footer_bg.png) center top no-repeat;
	background-size: cover;
}

.l-footer-sns {
	width: 53.33333%;
	font-size: 0;
  margin: 0 auto;
}
.l-footer-sns li {
  display: inline-block;
	width: 50%;
}
.l-footer_official {
	width: 100%;
	font-size: 0;
}
.l-footer_official li {
  display: inline-block;
	width: 50%;
}


/* ========================================
	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) no-repeat #244db6;
	background-size: 100% auto;
}
.p-top-movie-modalbody {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 10px 0;
}
.p-top-movie_modal-wrap {
	padding: 0 6.4%;
}
.p-top-movie_modal-inner {
	width: 100%;
	margin: 0 auto;
	padding: 10px;
	border-radius: 10px;
	background-color: #000;
	box-sizing: border-box;
}
.p-top-movie_modal-wrap .l-modal_btn__close {
	width: 45.871559%;
	margin: 0 auto;
	margin-top: 20px;
}

/* amiibo */
[data-modalbody="modal-amiibo"] .l-modal_bg {
	background:
		url(../images/top/modal_amiibo_bg.png) center top no-repeat,
		url(../images/top/modal_movie_bg.png) left top no-repeat,
		url(../images/top/modal_voice_bg_bottom.png) left bottom no-repeat #244db6;
	background-size: 100% auto;
}
.p-top-amiibo-modalbody {
	position: relative;
	width: 100%;
	padding-bottom: 15px;
	background: url(../images/top/modal_amiibo_bg.png) center top no-repeat;
	background-size: 100% auto;
}
.p-top-amiibo_modal-btn {
	width: 72.8%; /*546/750*100*/
	margin-bottom: 15px;
	margin-left: auto;
	margin-right: auto;
}
.p-top-amiibo_modal-wrap .l-modal_btn__close {
	width: 40%;
	margin: 0 auto;
}

/* voice */
[data-modalbody="modal-voice"] .l-modal_bg {
	background:
		url(../images/top/modal_movie_bg.png) left top no-repeat,
		url(../images/top/modal_voice_bg_bottom.png) left bottom no-repeat #244db6;
	background-size: 100% auto;
}
.p-top-voice-modalbody {
	position: relative;
	width: 100%;
	margin: 0 auto;
}

.p-top-voice_modal-ttl {
	width: 50%;
	margin: 0 auto;
}
.p-top-voice_modal-wrap .l-modal_btn__close {
	width: 40%;
	margin: 0 auto;
	margin-top: -50px;
}

/* 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;
	width: 100%;
	height: 100%;
	margin: 0 auto;
}

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

[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;
	background-size: 12.26666% auto;
}

[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;
	background-size: 12.26666% auto;
}

[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;
	background-size: 12.26666% auto;
}

[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;
	background-size: cover;
}

.p-top-chara_modal_chara01 {
	position: relative;
}
.p-top-chara_modal_ashley {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
}
.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: 40%;
	margin: 0 auto;
	margin-top: 20px;
}


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