@charset "utf-8";

@import "layout.css";



@media screen and (max-width: 480px) {
}
@media screen and (max-width: 320px) {
}

#sp {
	position: relative;
	width: 100%;
	overflow: hidden;
}

/*-------------------------------------------------------------------------
	Title
/*-----------------------------------------------------------------------*/

#title {
	position: relative;
	background-color: #b6e8ff;
}
	#title #logo_3ds {
		width: 36%;
		position: absolute;
		top: 1%;
		right: 2%;
	}
	#title > .txt {
		width: 71%;
		margin: auto;
		position: absolute;
		top: 23%;
		right: 0;
		left: 0;
	}

	#title .movie {
		position: relative;
	}
		#title .movie a {
			display: block;
		}
		#title .movie .box {
			width: 75%;
			height: 60%;
			margin: auto;
			position: absolute;
			top: 28%;
			right: 0;
			left: 0;
			border-radius: 8px;
			overflow: hidden;
			box-shadow: 0 0 5px 3px #a0dcf5;
		}
			#title .movie .box iframe {
				margin: -2.5% 0 0 -5%;
				width: 110%;
				height: 110%;
				z-index: 1;
			}
		#title .movie .poster {
			width: 71%;
			height: 58%;
			margin: auto;
			padding: 2%;
			position: absolute;
			top: 28%;
			right: 0;
			left: 0;
		}

/*-------------------------------------------------------------------------
	soft_detail
/*-----------------------------------------------------------------------*/
	#soft_detail {
		height: 100%;
		width: 100%;
		margin-top: 0.8rem;
		padding-top: 90%;
		position: relative;
		background: url(../img/index/soft_detail/bg.jpg) no-repeat;
		background-size: 100% auto;
	}
	#soft_detail .wrap {
		margin-top: -65%;
		padding: 7% 12%;
		position: relative;
	}
	#soft_detail p {
		position: absolute;
	}
	#soft_detail #softicon {
		width: 21%;
	}
	#soft_detail #cero {
		width: 10%;
		top: 114%;
		left: 33%;
	}
	#soft_detail #amiibo {
		width: 10%;
		left: 33%;
	}
	#soft_detail > .wrap > .txt {
		width: 44%;
		top: 60%;
		right: 11%;
	}

	#soft_detail .btn01 {
		width: 72%;
		margin: auto;
		top: 220%;
		left: 0;
		right: 0;
	}
	#soft_detail .btn02 {
		width: 72%;
		margin: auto;
		top: 316%;
		left: 0;
		right: 0;
	}


/*-------------------------------------------------------------------------
	slider
/*-----------------------------------------------------------------------*/
#slide {
	background: url(../img/index/thumbs.jpg) no-repeat top left;
	background-size: auto 121px;
}
	#slide {
		width: 100%;
		height: 121px;
		overflow: hidden;
	}
	#slide .area {}
		#slide .area > .slide {
			position: relative;
		}
			#slide .area > .slide li {
				float: left;
			}
				#slide .area > .slide li img {
					width: auto;
					height: 121px;
					overflow: hidden;
				}

/*-------------------------------------------------------------------------
	plan
/*-----------------------------------------------------------------------*/

#plan {
	padding-bottom: 20%;
	position: relative;
}
#plan .cloud {
	width:100%;
	position: absolute;
	bottom: 0;
}
#plan #no01 {
	margin-top: 3%;
}
#plan #no01 .thumbs {
	margin-top: 3%;
}
#plan #no01 .txt {
	margin-top: 5%;
}
#plan #no02,
#plan #no03 {
	margin-top: 10%;
}
#plan #no02 .txt {
	margin-top: 2%;
}
#plan .anmt {
	margin-top: 4%;
	position: relative;

}
#plan .anmt .flame {
	position: relative;
	z-index: 1;
}
#plan .anmt .gifanmt {
	width: 74.5%;
	margin: auto;
	position: absolute;
	top: 6.55%;
	left: 0;
	right: 0;
	z-index: 0;
}


/*-------------------------------------------------------------------------
	btn
/*-----------------------------------------------------------------------*/
#btn {
	padding-bottom: 21%;
	position: relative;
	background-image: url(../img/index/twitter/bg_grd.png),
				url(../img/index/twitter/bg.png);
	background-position: center top, center top;
	background-repeat: repeat-x, repeat;
	background-size: 24% 100%, 18%;
}
#twt {
	margin: 1rem auto 0;
	transition: all 0.5s ease;
	z-index: 1111;
	width: 90%;
	background-color: #f532aa;
	border-radius: 12px;
	box-sizing: border-box;
}
#twt .box {
	margin: 0 auto;
	cursor: pointer;
	position: relative;
	background-color: #fff;
	border: solid 6px #f532aa;
	border-radius: 12px;
}
	#twt .box .container {
		width: 100%;
		margin: 0 auto;
		background: #fff;
		border-top: 0;
		cursor: auto;
		-webkit-overflow-scrolling: touch;
		overflow: hidden;
	}
		#twt .box .container h4 {
			width: 100%;
			margin: -1.2rem auto 0;
			padding: 1.8rem 0 .8rem;
			text-align: center;
			background-color: #f532aa;
		}
#twt .box #follow {
	width: 83%;
	margin: .8rem auto;
	text-align: center;
}
#twt .box #follow .btn {
	background: #fff;
}
#twt .twitter {
	width: 89%;
	height: 14rem;
	padding: 0 1.2rem;
	overflow: auto;
}
#twt .twitter .twitter-tweet {
	width: 100%;
	margin: 0 auto;
}

/*Twitter Widget*/
.timeline-Footer {
	display: none;
}

.TweetAuthor-name {
	color: #333;
}

.SandboxRoot.env-bp-430 .timeline-Tweet-text {
	font-size: 1rem;
	line-height: 1.5rem;
	color: #333333;
}

.twitter-timeline {
	height: 1020px;
}
#btn a {
	display: block;
}
#btn .roboboplanet {
	margin-top: 1.6rem;
}
#btn .amiibo {
	margin-top: 1.3rem;
}
#btn .txt {
	margin-top: 1.7rem;
}
#btn .hunters {
	margin-top: 1.1rem;
}
#btn .more {
	width: 38%;
	position: absolute;
	right:5%;
	bottom: 7%;
}
@media only screen and (max-width: 530px) {
	#btn .more {
		bottom: 6.5%;
	}
}

#btn .kirby25th {
  margin-top: 2.6rem;
}

.kirby_portal{
	border-top: #5a679a 2px solid;
  width: 90%;
  margin: 0 auto 0 auto;
  text-align: center;
  padding: 3% 0 0 0;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.5%;
}
.kirby_portal a{
	display: block;
	text-align: center;
}
.kirby_portal a::before{
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 13px;
  height: 13px;
  background-position: 50% 50%;
  background-image: url(../img/index/btn/footer_softwear_ico.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.kirby_portal a span{
	font-size: 14px;
	font-weight: bold;
	display: inline-block;
	vertical-align: middle;
}

/* ----------------------------
   eshop バナー
---------------------------- */
.bnr-eshop-sale{
  width: 100%;
  background: url(../img/index/bnr/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;
}