@charset "UTF-8";

#wrapper {
	background: url(../images/bg.png) center top repeat;
	background-size: auto 34px;
}

.h2-title {
	width: 53.4375%;
	margin: 0 auto;
}

.btn {
	width: 56.25%;
	margin: 0 auto;
}

/* ========================================
	attention
======================================== */
.attention {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 50;
	width: 100%;
	height: 100%;
	background: url(../images/attention_bg.png) center center repeat #000000;
	opacity: 1;
	-webkit-transition: opacity 1500ms;
	transition: opacity 1500ms;
}
.attention.is-hide {
	opacity: 0;
}
.attention__message {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	opacity: 1;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	-webkit-transition: opacity 1000ms;
	transition: opacity 1000ms;
}
.attention__message.is-hide {
	opacity: 0;
}
.attention__text {
	width: 53.75%;
	margin: 0 auto 15px;
}
.attention__bgm-select-on {
	width: 73.4375%;
	margin: 0 auto 20px;
	cursor: pointer;
}
.attention__bgm-select-off {
	width: 73.4375%;
	margin: 0 auto;
	cursor: pointer;
}


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

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

.title {
 position: absolute;
 width: 85.9375%;
 top: 20px;
 left: 7.03125%;
 opacity: 0;
 -webkit-transition: opacity 1000ms;
 transition: opacity 1000ms;
}
.title.is-show {
 opacity: 1;
}
.is3ds .title,
.isNew3ds .title {
 opacity: 1;
 -webkit-transition: none;
 transition: none;
}

.visual-copy1 {
 position: absolute;
 width: 6%;
 top: 24%;
 right: 13px;
 opacity: 0;
 -webkit-transition: opacity 1000ms;
 transition: opacity 1000ms;
}
.visual-copy1.is-show {
 opacity: 1;
}
.is3ds .visual-copy1,
.isNew3ds .visual-copy1 {
 opacity: 1;
 -webkit-transition: none;
 transition: none;
}
.visual-copy2 {
 position: absolute;
 width: 14%;
 top: 31%;
 left: 13px;
 opacity: 0;
 -webkit-transition: opacity 1000ms;
 transition: opacity 1000ms;
}
.visual-copy2.is-show {
 opacity: 1;
}
.is3ds .visual-copy2,
.isNew3ds .visual-copy2 {
 opacity: 1;
 -webkit-transition: none;
 transition: none;
}

.visual-sound {
    position: absolute;
    top: 8px;
    left: 6px;
    width: 281px;
    height: 0;
}

/* ========================================
	top-nav
======================================== */
#top-nav {
	padding: 15px 3.125% 0 3.125%;
	font-size: 0;
	background: url(../images/nav_head_bg.png) center top no-repeat;
	background-size: cover;
}

#top-nav li {
	float: left;
	width: 50%;
}
#top-nav li:nth-child(n+5) {
	float: none;
	width: 64.5%;
	margin: 0 auto;
}

/* ========================================
	topics
======================================== */
#topics {
	position: relative;
	padding-bottom: 20px;
	background: url(../images/top_head_bg.png) center top repeat-y;
	background-size: cover;
}

.topics-title {
	width: 72.96875%;
	margin: 0 auto;
}

#topics-slider li {
}
#topics-slider li div {
	width: 70.15625%;
	margin: 0 auto;
}
#topics-slider .bx-prev,
#topics-slider .bx-next {
	top: 32px;
	margin-top: 0;
	width: 38px;
	height: 75px;
}
#topics-slider .bx-prev {
	left: 0;
	background: url(../images/topics_prev.png) center center no-repeat;
	background-size: 38px 75px;
}
#topics-slider .bx-next {
	right: 0;
	background: url(../images/topics_next.png) center center no-repeat;
	background-size: 38px 75px;
}
#topics-slider li p {
	padding-top: 5px;
	font-size: 12px;
	line-height: 1.8em;
	color: #FFF;
}

/* ========================================
	about
======================================== */
#about {
	position: relative;
	width: 100%;
	background: url(../images/about_bg.png) center top no-repeat;
	background-size: 100% auto;
}
.about-slide {
	position: relative;
}
.about-slide1 {
	opacity: 1;
	-webkit-transition: 1000ms;
	transition: 1000ms;
}
.about-slide.is-show .about-slide1 {
	opacity: 0;
}
.about-slide2 {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	-webkit-transition: 1000ms;
	transition: 1000ms;
}
.about-slide.is-show .about-slide2 {
	opacity: 1;
}
#about .btn {
	position: absolute;
	left: 50%;
	bottom: 25px;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

/* ========================================
	character
======================================== */
#character {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: url(../images/character_bg.png) center top no-repeat;
	background-size: 100% auto;
}
#character:before {
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../images/character_other_bg.png) center top no-repeat;
	background-size: 100% auto;
	opacity: 0;
	-webkit-transition: opacity 300ms;
	transition: opacity 300ms;
}
#character.group2:before {
	opacity: 1;
}
.character-title {
	position: absolute;
	top: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	z-index: 1;
}
.character-name {
	position: absolute;
	top: 22.3%;
	left: 0;
	width: 100%;
	font-size: 0;
}
.character-name li {
	display: inline-block;
	width: 50%;
}
.character-name li.character-name3 {
	display: none;
	position: absolute;
	top: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 60%;
}

.character-area-left,
.character-area-right {
	float: left;
	width: 50%;
}

.other-area {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.other-area-slider {

}
.other-area-slider-item {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.other-area-slider-item:first-child {
	display: block;
}
.other-area-charas {

}
.other-area-charas li {
	float: left;
}
.other-area-slider-item:first-child li {
	width: 33.33333%;
}
.other-area-slider-item:nth-child(2) li {
	width: 50%;
}

#character .btn {
	position: absolute;
	left: 50%;
	bottom: 30px;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.icon-new {
	position: absolute;
	width: 17.8125%;
	top: 33%;
}
.character-area-left .icon-new {
	left: 4.6875%;
}
.character-area-right .icon-new {
	right: 4.6875%;
}
.other-area .icon-new {
	left: 4.6875%;
	top: 40px;
}

/* ========================================
	system
======================================== */
#system {
	margin-bottom: 75px;
	background-size: 100% auto;
}

.system_movie {
	width: 90.625%;
	margin: 0 auto 20px auto;
	box-shadow: 10px 10px 10px rgba(0,0,0,0.15);
}

.system_movie li {
	width: 100%;
	overflow: hidden;
}
.system_movie li .img {
	margin-left: -3.4%;
	margin-right: -3.2%;
}
.player_wrap {
    display: block;
    position: relative;
    height: 0;
    padding-top: 56.25%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.system_movie li iframe {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
}
.thumbs {
	position: absolute;
	top: 0;
	left: 0;
}

/* ========================================
	info
======================================== */
#info {
	background: url(../images/top_head_bg.png) no-repeat left top;
	background-size: cover;
	padding: 30px 0;
}
/*----------------------
	#spec
----------------------*/
#spec {
	margin-bottom: 20px;
}

#spec img {
	vertical-align: bottom;
}

.spec-inner {
	float: left;
	width: 30.625%;
	padding-left: 7.8125%;
}

.spec-icon {
	font-size: 0;
	display: inline-block;
}
.spec-icon li {
	display: inline-block;
}

.spec-info {
	float: left;
	width: 53.125%;
	margin-left: 3.90625%;
    margin-top: 10%;
}
.spec-ico {
	width: 36.7346938%;
}
.spec-cero {
	width: 24.489795%;
}
.spec-amiibo {
	width: 37.755102%;
}

.spec-detail {
	width: 56.25%;
	margin-left: auto;
	margin-right: auto;
}
.info__special {
	position: relative;
	width: 100%;
	overflow: hidden;
	margin-bottom: 20px;
}
.info__special-btn-wrapper {
	width: 100%;
	overflow: hidden;
}
.info__special-btn {
	position: absolute;
	top: 77.978%;
	left: 50%;
	width: 71.875%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.basis{
    width: 80%;
    margin: 0 auto 40px;
}
.basis:after{
    content: "";
    display: block;
    clear: both;
}
.spec-detail{
    float: left;
    width: 50%;
}
.spec-detail a{
       width: 49%;
    display: block;
    margin: 0 auto;
}
.spec-gb{
	margin: auto;
    width: 50%;
}
.spec-gb a{
        width: 57.5%;
    display: block;
        margin: 0 auto;
}
/* ========================================
	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;
}

.footer__bnr {
	width: 90.625%;
	margin: 20px auto 0 auto;
}

/* ----------------------------
   eshop バナー
---------------------------- */
.bnr-eshop-sale{
  width: 100%;
  background: url(../images/bnr_eshop_bg.png);
  -webkit-background-size: 20px;
          background-size: 20px;
  position: relative;
  z-index: 10;
}
.bnr-eshop-sale::before{
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: #FFF;
  left: 0;
  bottom: -2px;
  position: absolute;
}
.bnr-eshop-sale a,
.bnr-eshop-sale span{
  display: block;
  max-width: 375px;
  margin: 0 auto;
}
.bnr-eshop-sale a img,
.bnr-eshop-sale span img{
  max-width: 375px;
  width: 100%;
  height: auto;
}