@charset "UTF-8";

#wrapper {
	background-color: #232323;
}



/* ========================================
	visual
======================================== */
#visual {
	position: relative;
}

.logo-3ds {
 position: absolute;
 width: 80px;
 top: 10px;
 right: 50px;
}

.logo-switch {
 position: absolute;
 width: 42px;
 top: 0;
 right: 0;
}

.visual-img {
	position: relative;
	opacity: 0;
	-webkit-transition: opacity 1000ms;
	transition: opacity 1000ms;
}
.visual-img.is-show {
 opacity: 1;
}
.visual_petal1,
.visual_petal2 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.title {
 position: absolute;
 width: 87%;
 top: 47px;
 left: 6.5%;
 opacity: 0;
 -webkit-transition: opacity 1000ms;
 transition: opacity 1000ms;
}
.title.is-show {
 opacity: 1;
}

/*----------------------
	#spec
----------------------*/
#spec {
	position: relative;
	width: 90.625%;
	margin: 0 auto;
	margin-top: -17%;
	background-color: rgba(0,0,0,0.7);
	z-index: 1;
}

#spec ul {
	font-size: 0;
	width: 100%;
}
.spec-pack li {
	display: inline-block;
	width: 50%;
}
.spec-info li {
	display: inline-block;
}
.spec-amiibo {
	width: 13.7931034482%;
}
.spec-cero {
	width: 10.6896551724%;
}
.spec-release {
	width: 75.517241379%;
}

/* ========================================
	origin
======================================== */
#origin {
	position: relative;
	width: 100%;
	background: url(../images/origin_bg.png) center top no-repeat;
	background-size: 100% auto;
	margin-top: -20%;
	padding-top: 26%;
}
.origin-slide {
	position: relative;
	width: 90.625%;
	margin: 0 auto;
}
.origin-slide li {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}
.origin-slide li:first-child {
	position: static;
	top: 0;
	left: 0;
}
#origin .icon-arw li {
	position: absolute;
	top: 50%;
	z-index: 10;
	width: 16px;
	height: 23px;
	margin-top: -11px;
}
#origin .prev {
	left: 10px;
}
#origin .next {
	right: 10px;	
}

/* ========================================
	system
======================================== */
#system {
	width: 100%;
	background: url(../images/system_bg.png) center top no-repeat;
	background-size: 100% auto;
}
#system-slide-wrap1 {
	position: relative;
	background: url(../images/system_3ds.png) center top no-repeat;
	background-size: 100% auto;
	width: 100%;
}
#system-slide-wrap2 {
	position: relative;
	background: url(../images/system_switch.png) center top no-repeat;
	background-size: 100% auto;
	width: 100%;
}

.slider-3ds {
	position: absolute;
	top: 0;
	left: 0;
	padding: 6.8% 0;
	width: 100%;
}
.slider-switch {
	position: absolute;
	top: 0;
	left: 0;
	padding: 2.0% 0 13.0%;
	width: 100%;
}
.slider1 {
	width: 54.6875%;
	margin: 0 auto;
}
.slider2 {
	width: 49.6875%;
	margin: 0 auto;
}
#system .icon-arw li {
	position: absolute;
	top: 50%;
	width: 17px;
	height: 27px;
	margin-top: -13px;
}

#system .bx-prev,
#system .bx-next {
	width: 17px;
	height: 27px;
	margin-top: -13px;
}
#system .bx-prev {
	background: url(../images/system_arw_left.png);
	background-size: 17px 27px;
}
#system .bx-next {
	background: url(../images/system_arw_right.png);
	background-size: 17px 27px;
}
#system .slider-3ds .bx-prev {
	left: 0;
}
#system .slider-3ds .bx-next {
	right: 0;
}
#system .slider-switch .bx-prev {
	left: -25px;
}
#system .slider-switch .bx-next {
	right: -25px;
}

.system-text3 {
	position: relative;
	margin-top: -20%;
}

/* ========================================
	cast
======================================== */
#cast {
	padding-bottom: 20%;
}


/* ========================================
	footer
======================================== */
#top-footer {
	background: #4e1212;
}
#top-footer .footer-nav {
	background: none;
	padding-top: 0;
}

.sns {
	padding-bottom: 20px;
	font-size: 0;
}
.sns__item {
	display: inline-block;
	width: 9.375%;
	margin: 0 10px;
	font-size: 14px;
}
.footer__copyright {
	display: inline-block;
	width: 67.8125%;
	margin-top: 10px;
}