@charset "UTF-8";

/* ========================================
	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: 77.60416%; /* 1490 / 1920 * 100 */
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.loading_box {
	position: relative;
	width: 100%;
	padding-top: 90%; /* 1341 / 1490 * 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-image: url(../images/top/contents_shadow.png), url(../images/top/contents_bg.png);
	background-position: 0 0;
	background-repeat: repeat-x, repeat-y;
	background-size: 100% auto;
	padding-bottom: 0 !important;
}

.l-inner {
	min-width: 960px;
	max-width: 2000px;
	margin: 0 auto;
}


/* visual */
.p-top-visual {
	position: relative;
	width: 66.66666%; /* 1280 / 1920 * 100 */
	margin: 0 auto;
	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:before {
	content: "";
	display: block;
	padding-top: 81.09375%; /* 1038 / 1280 * 100 */
}

.p-top-visual_logo {
	position: absolute;
	top: 9.53757%; /* 99 / 1038 * 100 */
	left: 48.59375%; /* 622 / 1280 * 100 */
	width: 51.40625%; /* 658 / 1280 * 100 */
}

.p-top-visual_copy {
	position: absolute;
	top: 66.763%; /* 693 / 1038 * 100 */
	left: 49.375%; /* 632 / 1280 * 100 */
	width: 51.95312%; /* 665 / 1280 * 100 */
}

.p-top-visual_release {
	position: absolute;
	top: 41.32947%; /* 429 / 1038 * 100 */
	left: 51.71875%; /* 662 / 1280 * 100 */
	width: 47.03125%; /* 602 / 1280 * 100 */
}

.p-top-visual_img {
	position: absolute;
	top: 2.8901734%; /* 30 / 1038 * 100 */
	left: 10.78125%; /* 138 / 1280 * 100 */
	width: 39.0625%; /* 500 / 1280 * 100 */
}

.p-top-movie_btn {
	position: absolute;
	top: 50.09633%; /* 520 / 1038 * 100 */
	left: 58.28125%; /* 746 / 1280 * 100 */
	width: 32.65625%; /* 418 / 1280 * 100 */
}
.icon-update {
	position: absolute;
	top: 0;
	left: 0%;
	width: 24.40191%; /* 102 / 418 * 100 */
	-webkit-transform: translate(24.5098%,40.47619%);
	transform: translate(24.5098%,40.47619%);
}

.p-top-special_bnr {
	position: absolute;
	top: 59.15221%; /* 617 / 1038 * 100 */
	left: 0; /* 746 / 1280 * 100 */
	width: 27.57812%; /* 353 / 1280 * 100 */
}
.p-top-special_bnr::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 23.79603%; /* 84 / 353 * 100 */
	height: 23.837209%;
	background-size: contain;
	transform: translate(45.23809%,67.07317%);
	pointer-events: none;
}

/* story */
.p-top-story {
	position: relative;
	width: 91.66666%; /* 1760 / 1920 * 100 */
	margin: 0 auto;
	margin-top: -8.95833%; /* 172 / 1920 * 100 */
	background: url(../images/top/story_bg.png) 0 0 no-repeat;
	background-size: contain;
	z-index: 5;
}
.p-top-story:before {
	content: "";
	display: block;
	padding-top: 54.88636%; /* 966 / 1760 * 100 */
}

.p-top-story_copy {
	position: absolute;
	top: 24.7412%; /* 239 / 966 * 100 */
	left: 18.40909%; /* 324 / 1760 * 100 */
	width: 21.42045%; /* 377 / 1760 * 100 */
	opacity: 0;
	-webkit-transform: translateY(40px);
	transform: translateY(40px);
	transition: 1200ms;
}
.p-top-story_copy.is-animation {
	-webkit-transform: translateY(0);
	transform: translateY(0);
	opacity: 1;
}

.p-top-story_text {
	position: absolute;
	top: 43.37474%; /* 419 / 966 * 100 */
	left: 18.40909%; /* 324 / 1760 * 100 */
	width: 26.93181%; /* 474 / 1760 * 100 */
}

.p-top-story_btn {
	position: absolute;
	top: 67.70186%; /* 654 / 966 * 100 */
	left: 17.67045%; /* 311 / 1760 * 100 */
	width: 19.09090%; /* 336 / 1760 * 100 */
}

.p-top-story_ghost01 {
	position: absolute;
	top: 10.559%; /* 102 / 966 * 100 */
	left: 7.27272%; /* 128 / 1760 * 100 */
	width: 12.67045%; /* 223 / 1760 * 100 */
}

.p-top-story_ghost02 {
	position: absolute;
	bottom: 27.22567%; /* 263 / 966 * 100 */
	right: 6.25%; /* 110 / 1760 * 100 */
	width: 20.90909%; /* 368 / 1760 * 100 */
	opacity: 0;
	-webkit-animation-delay: 1400ms;
	animation-delay: 1400ms;
}

/* adventure */
.p-top-adventure {
	position: relative;
	width: 67.76041%; /* 1301 / 1920 * 100 */
	margin: 0 auto;
	margin-top: -5.625%;
	padding-top: 39.58333%; /* 760 / 1920 * 100 */
	background: url(../images/top/adventure_bg.png) 0 0 no-repeat;
	background-size: contain;
	z-index: 3;
	visibility: hidden;
	opacity: 0;
	transition: 1500ms;
}
.p-top-adventure.is-animation {
	visibility: visible;
	opacity: 1;
}

.p-top-adventure_copy {
	position: absolute;
	top: 21.31578%; /* 162 / 760 * 100 */
	left: 41.89085%; /* 545 / 1301 * 100 */
	width: 33.74327%; /* 439 / 1301 * 100 */
}

.p-top-adventure_text {
	position: absolute;
	top: 45.13157%; /* 343 / 760 * 100 */
	left: 42.73635%; /* 556 / 1301 * 100 */
	width: 25.36510%; /* 330 / 1301 * 100 */
}

.p-top-adventure_img {
	position: absolute;
	top: 24.47368%; /* 186 / 760 * 100 */
	right: -6.61029%; /* 86 / 1301 * 100 */
	width: 39.27747%; /* 511 / 1301 * 100 */
}
.ghost.p-top-adventure_img {
	-webkit-animation: ghost 5s infinite;
	animation: ghost 5s infinite;
}

.p-top-adventure_btn {
	position: absolute;
	top: 66.18421%; /* 503 / 760 * 100 */
	left: 41.660261%; /* 542 / 1301 * 100 */
	width: 25.82628%; /* 336 / 1301 * 100 */
}

.p-top-adventure_ghost01 {
	position: absolute;
	bottom: -11.05263%; /* 84 / 760 * 100 */
	right: -5.76479%; /* 75 / 1301 * 100 */
	width: 25.51883%; /* 332 / 1301 * 100 */
}

/* action */
.p-top-action {
	position: relative;
	width: 71.04166%; /* 1364 / 1920 * 100 */
	margin: 0 auto;
	margin-top: -7.34375%;
	padding-top: 39.58333%; /* 760 / 1920 * 100 */
	background: url(../images/top/action_bg.png) 0 0 no-repeat;
	background-size: contain;
	-webkit-transform: translateX(-3.38201%); /* 44 / 1364 * 100 */
	transform: translateX(-3.38201%); /* 44 / 1364 * 100 */
	z-index: 4;
	visibility: hidden;
	opacity: 0;
	transition: 1500ms;
}
.p-top-action.is-animation {
	visibility: visible;
	opacity: 1;
}

.p-top-action_copy {
	position: absolute;
	top: 23.28947%; /* 177 / 760 * 100 */
	left: 16.05571%; /* 219 / 1364 * 100 */
	width: 40.10263%; /* 547 / 1364 * 100 */
}

.p-top-action_text {
	position: absolute;
	top: 46.44736%; /* 353 / 760 * 100 */
	left: 16.86217%; /* 230 / 1364 * 100 */
	width: 22.80058%; /* 311 / 1364 * 100 */
}

.p-top-action_btn {
	position: absolute;
	top: 66.23684%; /* 511 / 760 * 100 */
	left: 15.83577%; /* 216 / 1364 * 100 */
	width: 24.63343%; /* 336 / 1364 * 100 */
}

/* mode */
.p-top-mode {
	position: relative;
	width: 51.875%; /* 996 / 1920 * 100 */
	margin: 0 auto;
	margin-top: -3.80208%;
	padding-top: 33.33333%; /* 640 / 1920 * 100 */
	background: url(../images/top/mode_bg.png) 0 0 no-repeat;
	background-size: contain;
	-webkit-transform: translateX(14.65863%); /* 146 / 996 * 100 */
	transform: translateX(14.65863%); /* 146 / 996 * 100 */
	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: 1.875%; /* 12 / 640 * 100 */
	left: -29.31726%; /* 292 / 996 * 100 */
	width: 62.9518%; /* 627 / 996 * 100 */
}

.p-top-mode_copy {
	position: absolute;
	top: 24.375%; /* 156 / 640 * 100 */
	left: 34.13654%; /* 340 / 996 * 100 */
	width: 55.42168%; /* 552 / 996 * 100 */
}

.p-top-mode_pop {
	position: absolute;
	top: 6.71875%; /* 43 / 640 * 100 */
	left: 26.90763%; /* 268 / 996 * 100 */
	width: 23.69477%; /* 236 / 996 * 100 */
}

.p-top-mode_text {
	position: absolute;
	top: 42.1875%; /* 270 / 640 * 100 */
	left: 35.24096%; /* 351 / 996 * 100 */
	width: 28.21285%; /* 281 / 996 * 100 */
}

.p-top-mode_btn {
	position: absolute;
	top: 61.40625%; /* 393 / 640 * 100 */
	left: 33.63453%; /* 335 / 996 * 100 */
	width: 33.73493%; /* 336 / 996 * 100 */
}

.p-top-mode_ghost01 {
	position: absolute;
	top: -25%; /* 160 / 640 * 100 */
	left: -39.65863%; /* 395 / 996 * 100 */
	width: 30.12048%; /* 300 / 996 * 100 */
	opacity: 0;
	-webkit-animation-delay: 1800ms;
	animation-delay: 1800ms;
}

.p-top-mode_ghost02 {
	position: absolute;
	bottom: -4.375%; /* 28 / 640 * 100 */
	right: -7.73092%; /* 77 / 996 * 100 */
	width: 36.94779%; /* 368 / 996 * 100 */
	opacity: 0;
	-webkit-animation-delay: 700ms;
	animation-delay: 700ms;
}

/* amiibo bnr */
.p-top-amiibo_bnr { /* 672 / 1920 * 100 */
	width: 35%;
	margin: 0 auto 30px auto;
	-webkit-transform: translateY(-39.15343%); /* 74 / 171 * 100 */
	transform: translateY(-39.15343%); /* 74 / 171 * 100 */
	cursor: pointer;
}

/* ========================================
	ghost
======================================== */
@-webkit-keyframes ghost {
    0% {
			visibility: hidden;
			
			-webkit-transform: translateY(40px);
			transform: translateY(40px);
    }
    50% {
			visibility: visible;
			
			-webkit-transform: translateY(-10px);
			transform: translateY(-10px);
    }
		100% {
				visibility: hidden;

				-webkit-transform: translateY(40px);
				transform: translateY(40px);
			}
}
@keyframes ghost {
    0% {
			visibility: hidden;
			
			-webkit-transform: translateY(40px);
			transform: translateY(40px);
    }
    50% {
			visibility: visible;
			
			-webkit-transform: translateY(-10px);
			transform: translateY(-10px);
    }
		100% {
				visibility: hidden;

				-webkit-transform: translateY(40px);
				transform: translateY(40px);
			}
}

/* ========================================
	footer
======================================== */
.l-footer-area {
	width: 100%;
	background-image: url(../images/top/spec_bg_line.png), url(../images/top/spec_bg.png);
	background-position: 0 0, 0 30px;
	background-repeat: repeat-x, no-repeat;
	background-size: auto 45px, cover;
	margin-top: -2%;
	padding-bottom: 200px;
}
@media screen and (min-width: 1921px)
.l-footer-area {
    padding-bottom: 400px;
}

/* spec */
.p-top-spec {
	position: relative;
	width: 66.66666%;
	margin: 0 auto;
	padding: 5.5% 0 3.5% 0;
	color: #fff;
}

.p-top-spec-inner img {
	width: 100%;
	height: auto;
}
.p-top-spec-info {
	margin-left: 26%; /*220/1280*100*/
}
.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_amiibo {
	position: absolute;
	top: 34%;
	right: 35.7%; /*575/1280*100*/
	-webkit-width: calc(58 / 1280 * 100%);
	width: calc(58 / 1280 * 100%);
}

.p-top-spec_cero {
	position: absolute;
	top: 35.4%;
	right: 31.6%; /*520/1280*100*/
	-webkit-width: calc(45 / 1280 * 100%);
	width: calc(45 / 1280 * 100%);
}
.p-top-spec_btn {
	position: absolute;
	top: 31%;
	right: 16.48437%; /*211/1280*100*/
	-webkit-width: calc(298 / 1280 * 100%);
	width: calc(298 / 1280 * 100%);
}
.p-top-spec_download {
}
.p-top-spec_detail {
}

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

#top .l-footer_info {
	background: none;
}

.l-footer-sns {
	position: absolute;
	top: 50%;
	right: 0;
	width: 12.43697%; /* 148 / 1190 * 100 */
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.l-footer-sns::after {
  content: "";
  display: block;
  clear: both;
}

.l-top-sns_twitter {
	float: left;
	width: 50.67567%; /* 75 / 148 * 100 */
}
.l-top-sns_facebook {
	float: right;
	width: 41.21621%; /* 61 / 148 * 100 */
}

.l-footer_copyright {
	position: absolute;
	top: 50%;
	left: 0.75630%; /* 9 / 1190 * 100 */
	width: 9.24369%; /* 110 / 1190 * 100 */
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

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

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

/* amiibo */
.p-top-amiibo-modalbody {
	width: 79.0625%;
	position: relative;
	max-width: 1012px;
	min-width: 960px;
	width: 100%;
	margin: 0 auto;
	padding: 3% 0;
}

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

.p-top-modal-amiibo_ttl {
	width: 69.16996%; /* 700 / 1012 * 100 */
	margin: 0 auto 2% auto;
}
.p-top-modal-amiibo_txt {
	width: 55.03952%; /* 557 / 1012 * 100 */
	margin: 0 auto 2% auto;
}

.p-top-modal-amiibo_img {
	width: 83.30039%; /* 843 / 1012 * 100 */
	margin: 0 auto;
}

.p-top-modal-amiibo_btn {
	width: 67.98418%; /* 688 / 1012 * 100 */
	margin: 0 auto;
}


/* btn */
.l-modal_btn__close {
	width: 21.5415%; /* 218 / 1012 * 100 */
	margin: 0 auto;
	cursor: pointer;
	text-align: center;
}