@charset "UTF-8";

/* ========================================
	animation
======================================== */
.animation-ghostR-type1 {
	-webkit-animation: ghost-move-to-right-type1 4s ease-in-out infinite;
	animation: ghost-move-to-right-type1 4s ease-in-out infinite;
}
.animation-ghostL-type1 {
	-webkit-animation: ghost-move-to-left-type1 4s ease-in-out infinite;
	animation: ghost-move-to-left-type1 4s ease-in-out infinite;
}

@-webkit-keyframes ghost-move-to-right-type1 {
    0% {
		opacity: 0;
		-webkit-transform: translateX(-30%);
		transform: translateX(-30%);
    }
    50% {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
    }
	100% {
		opacity: 0;
		-webkit-transform: translateX(-30%);
		transform: translateX(-30%);
    }
}
@keyframes ghost-move-to-right-type1 {
    0% {
		opacity: 0;
		-webkit-transform: translateX(-30%);
		transform: translateX(-30%);
    }
    50% {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
    }
	100% {
		opacity: 0;
		-webkit-transform: translateX(-30%);
		transform: translateX(-30%);
    }
}
@-webkit-keyframes ghost-move-to-left-type1 {
    0% {
		opacity: 0;
		-webkit-transform: translateX(30%);
		transform: translateX(30%);
    }
    50% {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
    }
	100% {
		opacity: 0;
		-webkit-transform: translateX(30%);
		transform: translateX(30%);
    }
}
@keyframes ghost-move-to-left-type1 {
    0% {
		opacity: 0;
		-webkit-transform: translateX(30%);
		transform: translateX(30%);
    }
    50% {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
    }
	100% {
		opacity: 0;
		-webkit-transform: translateX(30%);
		transform: translateX(30%);
    }
}

.animation-ghostR-type2 {
	-webkit-animation: ghost-move-to-right-type2 5s ease-in-out infinite;
	animation: ghost-move-to-right-type2 5s ease-in-out infinite;
}
.animation-ghostL-type2 {
	-webkit-animation: ghost-move-to-left-type2 5s ease-in-out infinite;
	animation: ghost-move-to-left-type2 5s ease-in-out infinite;
}

@-webkit-keyframes ghost-move-to-right-type2 {
    0% {
		opacity: 0;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
    }
    50% {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
    }
	100% {
		opacity: 0;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
    }
}
@keyframes ghost-move-to-right-type2 {
    0% {
		opacity: 0;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
    }
    50% {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
    }
	100% {
		opacity: 0;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
    }
}
@-webkit-keyframes ghost-move-to-left-type2 {
    0% {
		opacity: 0;
		-webkit-transform: translateX(50%);
		transform: translateX(50%);
    }
    50% {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
    }
	100% {
		opacity: 0;
		-webkit-transform: translateX(50%);
		transform: translateX(50%);
    }
}
@keyframes ghost-move-to-left-type2 {
    0% {
		opacity: 0;
		-webkit-transform: translateX(50%);
		transform: translateX(50%);
    }
    50% {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
    }
	100% {
		opacity: 0;
		-webkit-transform: translateX(50%);
		transform: translateX(50%);
    }
}

/* ========================================
	contents
======================================== */
/* ---------------------------------
		loading
--------------------------------- */
.loading {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10010;
	width: 100%;
	height: 100%;
	opacity: 1;
	background-color: #000;
}
.loading.is-hide {
	opacity: 0;
	transition: 800ms;
}
.loading.is-no-opening {
	display: none;
}

.loading_inner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 131.06666%; /* 983 / 750 * 100 */
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.loading_box {
	position: relative;
	width: 100%;
	padding-top: 89.92878%; /* 884 / 983 * 100 */
}

.loading_box:before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.loading_teresa {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	opacity: 0;
	transform: translate(-15%, 17%) scale(0.3);
	transition: 800ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.is-anime .loading_teresa {
	opacity: 1;
	transform: translate(0, 0) scale(1);
}


/* ---------------------------------
		contents
--------------------------------- */
.l-contents {
	background: url(../images/top/contents_bg.png) 0 0 repeat-y #000;
	background-size: 100% auto;
	padding-bottom: 0 !important;
}

/* visual */
.p-top-visual {
	position: relative;
	background-color: #000; 
	opacity: 0;
}
.p-top-visual.is-show {
	opacity: 1;
	transition: 1500ms;
	transition-delay: 300ms;
}
.p-top-visual.is-no-opening {
	opacity: 1;
}
.p-top-visual_logo {
	width: 82.66666%;
	margin: 0 auto;
}
.p-top-visual_copy {
	width: 93.33333%;
	margin: 0 auto;
}
.p-top-movie_btn {
	position: relative;
	width: 87.2%;
	margin: -5% auto 0;
	padding-bottom: 2%;
}
.is-update {
	position: absolute;
	top: 0;
	left: 0;
	width: 23.3009%; /* 144 / 618 * 100 */
	-webkit-transform: translate(27.7777%,46.29629%);
	transform: translate(27.7777%,46.29629%);
}
.p-top-special_bnr {
	position: relative;
	width: 97.86666%;
	margin: -2% auto 0;
	padding-bottom: 2%;
}
.p-top-special_bnr::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 16.07629%; /* 118 / 734 * 100 */
	height: 42.06642%;
	background-size: contain;
	-webkit-transform: translate(28.81355%,8.77192%);
	transform: translate(28.81355%,8.77192%);
	pointer-events: none;
}

/* story */
.p-top-story {
	position: relative;
	background-image: url(../images/top/story_bg.png), url(../images/top/story_bg_shadow.png);
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: contain, 100% auto;
	z-index: 5;
}
.p-top-story:before {
	content: "";
	display: block;
	padding-top: 198.66666%; /* 1490 / 750 * 100 */
}

.p-top-story_copy {
	position: absolute;
	top: 9.79865%; /* 146 / 1490 * 100 */
	left: 10%; /* 75 / 750 * 100 */
	width: 50.266666%; /* 377 / 750 * 100 */
	opacity: 0;
	transform: translateY(40px);
	transition: 1200ms;
}
.p-top-story_copy.is-animation {
	transform: translateY(0);
	opacity: 1;
}

.p-top-story_text {
	position: absolute;
	top: 21.47651%; /* 320 / 1490 * 100 */
	left: 10%; /* 75 / 750 * 100 */
	width: 80%; /* 600 / 750 * 100 */
}

.p-top-story_btn {
	position: absolute;
	top: 82.14765%; /* 1224 / 1490 * 100 */
	left: 20%; /* 150 / 750 * 100 */
	width: 64.8%; /* 486 / 750 * 100 */
}

.p-top-story_ghost01 {
	position: absolute;
	top: 25.63758%; /* 382 / 1490 * 100 */
	right: -2.13333%; /* 16 / 750 * 100 */
	width: 29.73333%; /* 223 / 750 * 100 */
}

.p-top-story_ghost02 {
	position: absolute;
	top: 52.34899%; /* 780 / 1490 * 100 */
	left: -9.6%; /* 72 / 750 * 100 */
	width: 49.06666%; /* 368 / 750 * 100 */
	opacity: 0;
	-webkit-animation-delay: 1400ms;
	animation-delay: 1400ms;
}

/* adventure */
.p-top-adventure {
	position: relative;
	background: url(../images/top/adventure_bg.png) 0 0 no-repeat;
	background-size: contain;
	z-index: 4;
	visibility: hidden;
	opacity: 0;
	transition: 1500ms;
}

.p-top-adventure.is-animation {
	visibility: visible;
	opacity: 1;
}

.p-top-adventure_copy {
	width: 56.66666%; /* 440 / 750 * 100 */
	margin: 0 auto;
}

.p-top-adventure_text {
	width: 47.73333%; /* 358 / 750 * 100 */
	margin-left: auto;
}

.p-top-adventure_btn {
	width: 64.8%; /* 486 / 750 * 100 */
	margin: 13.3333% auto 0 20%;  /* 100 / 750 * 100 */
}

.p-top-adventure_ghost {
	position: absolute;
	top: 52.56064%; /* 390 / 742 * 100 */
	right: -8.53333%; /* 75 / 750 * 100 */
	width: 44.26666%; /* 332 / 750 * 100 */
}

/* action */
.p-top-action {
	position: relative;
	margin-top: -9.6%; /* 72 / 750 * 100 */
	padding-top: 55.2%; /* 414 / 750 * 100 */
	background: url(../images/top/action_bg.png) 0 0 no-repeat;
	background-size: 100% auto;
	z-index: 3;
	visibility: hidden;
	opacity: 0;
	transition: 1500ms;
}
.p-top-action.is-animation {
	visibility: visible;
	opacity: 1;
}

.p-top-action_copy,
.p-top-action_text {
	padding: 0 10%;
}

.p-top-action_btn {
	width: 64.8%; /* 486 / 750 * 100 */
	margin-left: 20%;
}

.p-top-action_ghost {
	position: absolute;
	bottom: -19.81776%; /* 174 / 878 * 100 */
	left: -11.06666%; /* 83 / 750 * 100 */
	width: 40%; /* 300 / 750 * 100 */
	opacity: 0;
	-webkit-animation-delay: 1800ms;
	animation-delay: 1800ms;
}

/* mode */
.p-top-mode {
	position: relative;
	margin-top: 10.4%;
	margin-bottom: 8.8%;
	background: url(../images/top/mode_bg.png) 0 0 no-repeat;
	background-size: contain;
	z-index: 5;
	visibility: hidden;
	opacity: 0;
	transition: 1500ms;
}
.p-top-mode.is-animation {
	visibility: visible;
	opacity: 1;
}

.p-top-mode_img {
	position: absolute;
	top: 0;
	left: 0;
	width: 50%; /* 375 / 750 * 100 */
}

.p-top-mode_copy {
	width: 65.86666%; /* 494 / 750 * 100 */
	margin-left: auto;
}

.p-top-mode_btn {
	width: 64.8%; /* 486 / 750 * 100 */
	margin-left: 20%;
}

.p-top-mode_ghost {
	position: absolute;
	bottom: -1.62162%; /* 12 / 740 * 100 */
	right: -15.06666%; /* 113 / 750 * 100 */
	width: 36.94779%; /* 369 / 750 * 100 */
	opacity: 0;
	-webkit-animation-delay: 700ms;
	animation-delay: 700ms;
}

/* amiibo bnr */
.p-top-amiibo_bnr {
	width: 87.2%; /* 654 / 1920 * 100 */
	margin: 0 auto;
	padding-bottom: 8.8%;
}


/* ========================================
	footer
======================================== */
.l-footer-area {
	width: 100%;
	background: url(../images/top/footer_bg.png) 0 0 repeat-y;
	background-size: 100% auto;
}

/* spec */
.p-top-spec {
	position: relative;
	padding: 6.6666% 0 5.33333% 0;
	color: #fff;
}

.p-top-spec-info {
	padding: 0 6.4%; /*48/750*100*/
	margin-bottom: 4%;
	font-size: 12px;
	line-height: 1.2;
}
.p-top-spec-info span {
	display: inline-block;
	width: 6.5em;
}
.p-top-spec_gamettl,
.p-top-spec_release {
	margin-bottom: 2%;
}
.p-top-spec_price span.indent {
	width: auto;
	padding-left: 7em;
	line-height: 2;
}
.p-top-spec_amiibo {
	position: absolute;
	top: 0;
	right: 14.4%; /*108/750*100*/
	-webkit-width: calc(70 / 750 * 100%);
	width: calc(70 / 750 * 100%);
	transform: translateY(57.14285%); /*40/70*100*/
}
.p-top-spec_cero {
	position: absolute;
	top: 0;
	right: 6.4%; /*48/750*100*/
	-webkit-width: calc(54 / 750 * 100%);
	width: calc(54 / 750 * 100%);
	transform: translateY(69.69696%); /*46/66*100*/
}
.p-top-spec_download {
	-webkit-width: calc(654 / 750 * 100%);
	width: calc(654 / 750 * 100%);
	margin: 0 auto;
	/*margin: 0 auto 4%;*/
}
.p-top-spec_detail {
	-webkit-width: calc(654 / 750 * 100%);
	width: calc(654 / 750 * 100%);
	margin: 0 auto;
}

/* gnav */
.l-footer_nav {
	background: url(../images/top/footer_gnav_bg.png) 0 0 no-repeat;
	background-size: cover;
	background-color: transparent;
	padding: 2% 0 7% 0;
	margin-bottom: 5%;
}

.l-footer_info {
	background: none;
}

.l-footer-sns {
	width: 48.6666%; /* 365 / 750 * 100 */
	margin: 0 auto;
	margin-bottom: 5%;
	font-size: 0;
}
.l-footer-sns li {
	display: inline-block;
}

.l-top-sns_twitter {
	width: 45.20547%; /* 165 / 365 * 100 */
	margin-right: 18.08219%; /* 66 / 365 * 100 */
}
.l-top-sns_facebook {
	width: 36.71232%; /* 134 / 365 * 100 */
}

.l-footer_copyright {
	width: 32%; /* 240 / 750 * 100 */
	margin: 0 auto;
}

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

.l-modal_bg {
	background-color: rgba(0,0,0,0.8);
}

/* amiibo */
.p-top-amiibo-modalbody {
	position: relative;
	width: 100%;
	padding: 3% 0;
}

.p-top-modal-amiibo_wrap {
	background:
		url(../images/top/modal_amiibo_bg.png) center top no-repeat;
	background-size: cover;
}

.p-top-modal-amiibo_ttl {
	width: 80%; /* 600 / 750 * 100 */
	margin: 0 auto;
}
.p-top-modal-amiibo_txt {
	width: 69.33333%; /* 520 / 750 * 100 */
	margin: 0 auto;
}

.p-top-modal-amiibo_img {
	width: 87.2%; /* 654 / 750 * 100 */
	margin: 0 auto;
}

.p-top-modal-amiibo_btn {
	width: 79.2%; /* 594 / 750 * 100 */
	margin: 0 auto;
}


/* btn */
.l-modal_btn__close {
	width: 40%; /* 300 / 750 * 100 */
	margin: 0 auto;
}