@charset "utf-8";

@import "layout.css";


#title, #soft_detail {
	position: relative;
	z-index: 1;
}
#sports, #rio {
	position: relative;
}


/*-------------------------------------------------------------------------
	Loading
/*-----------------------------------------------------------------------*/

body {
	background: #fff url(../img/index/loading/bg.png) center center / cover no-repeat fixed;;
	-webkit-background-size: cover;
	background-size: cover;
}

#loading {
	height: 100%;
	width: 100%;
	position: absolute;
}
	#loading img {
		margin: 0 auto;
		position: absolute;
		top: 300px;
		right: 0;
		bottom: 0;
		left: 0;
	}

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

#title {
	width: 100%;
	height: 650px;
	background-color: #fff;
	position: relative;
	overflow: hidden;
}
	#title .bg {
		margin: 0 auto;
		min-width: 960px;
		width: 100%;
		text-align: center;
		opacity: 1;
	}

		#title .bg img {
			min-height: 650px;
			min-width: 1360px;
			height: auto;
			width: 100%;
			margin-left: -200px;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}
	#title video {
		min-width: 115%;
		width: auto;
		height: auto;
		position: relative;
		right: 100px;
		z-index: -1;
		opacity: 0;
	}
	@media screen and (min-width: 1360px) {
		#title video {
			min-width: 100%;
			right: 0;
		}
	}

	#title .wrap {
		z-index: 100;
	}

	#title .wrap > * {
		position: absolute;
	}
	#title h1 {
		width: 351px;
		margin: 0 auto;
		top: 458px;
		left: 0;
		right: 0;
		z-index: 100;
	}
	#title #logogame {
		top: 10px;
		left: 10px;
		z-index: 100;
	}
	#title #logorio2016 {
		width: 104px;
		margin: 0 auto;
		top: 324px;
		left: 0;
		right: 0;
		z-index: 100;
	}

/* Wii U, tablet */

.wiiu #title,
.tablet #title {
	background: url(../img/index/title/bg.jpg) no-repeat center #fff;
	-webkit-background-size: cover;
	background-size: cover;
}

.wiiu #title video,
.tablet #title video {
	display: none;
}


/*-------------------------------------------------------------------------
	soft_detail
/*-----------------------------------------------------------------------*/

#soft_detail {
	width: 100%;
	height: 767px;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.88, #ffa220), color-stop(0.00, #ffe100));
	background: -webkit-linear-gradient(top, #ffe100 0%, #ffa220 88%);
	background: -moz-linear-gradient(top, #ffe100 0%, #ffa220 88%);
	background: -o-linear-gradient(top, #ffe100 0%, #ffa220 88%);
	background: -ms-linear-gradient(top, #ffe100 0%, #ffa220 88%);
	background: linear-gradient(to bottom, #ffe100 0%, #ffa220 88%);
	-webkit-background-size: cover;
	background-size: cover;
}
	#soft_detail .wrap > * {
			position: absolute;
		}
	#soft_detail .ttl {
		top: 8;
		left: -95px;
	}
	#soft_detail .players {
		top: 141px;
		left: 20px;
	}
	#soft_detail .trial_btn {
		top: 19px;
		right: 20px;
	}
	#soft_detail .box {
		height: 170px;
		width: 704px;
		background: url(../img/index/soft_detail/bgbox.png) center top no-repeat;
		top: 532px;
		left: 20px;
	}
		#soft_detail .box > *,
		#soft_detail .box .icon > li {
			position: absolute;
		}
		#soft_detail .box .icon .package {
			width: 90px;
			top: 20px;
			left: 20px;
		}
		#soft_detail .box .icon #softicon {
			width: 78px;
			top: 27px;
			left: 116px;
		}
		#soft_detail .box .icon #cero {
			width: 32px;
			top: 65px;
			left: 199px;
		}
		#soft_detail .box .icon #amiibo {
			width: 32px;
			top: 28px;
			left: 199px;
		}
		#soft_detail .box .icon #network {
			width: 115px;
			top: 112px;
			left: 116px;
		}
		#soft_detail .box .txt {
			width: 200px;
			top: 25px;
			left: 238px;
		}
		#soft_detail .box .detail {
			width: 200px;
			top: 116px;
			left: 238px;
		}
		#soft_detail .box #pack {
			height: 140px;
			width: 250px;
			top: 14px;
			left: 436px;
			background-color: #0070ba;
			border: 2px solid #fff;
			border-radius: 8px;
		}
			#soft_detail .box #pack > p {
				position: absolute;
			}
			#soft_detail .box #pack .ttl {
				width: 230px;
				top: 13px;
				left: 110px;
			}
			#soft_detail .box #pack .price {
				width: 106px;
				top: 87px;
				left: 110px;
			}
			#soft_detail .box #pack .thumbs {
				width: 110px;
				top: 13px;
				left: 8px;
			}
	#soft_detail #movie {
		width: 202px;
		top: 532px;
		right: 20px;
	}
		#soft_detail #movie span {
			width: 52px;
			position: absolute;
			top: -11px;
			right: 9px;
		}

/*-------------------------------------------------------------------------
	Sports
/*-----------------------------------------------------------------------*/

#sports {
	width: 100%;
}
	#sports video.bg {
		background: url(../img/movie/superplay.jpg) no-repeat;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
	}
	#sports #competition {
		padding-top: 164px;
	}
		#sports #competition li,
		#sports #battle li {
			width: 234px;
			float: left;
			margin: 0 8px 4px 0;
			box-shadow:0px 0px 25px 3px rgba(0, 0, 0, 0.3);
			-moz-box-shadow:0px 0px 25px 3px rgba(0, 0, 0, 0.3);
			-webkit-box-shadow:0px 0px 25px 3px rgba(0, 0, 0, 0.3);
		}
		#sports #competition li:nth-child(4n),
		#sports #battle li:nth-child(4n) {
			margin: 0 0 4px 0;
		}
			#sports #competition li img,
			#sports #battle li img  {
				border: solid 2px rgba(0, 0, 0, 0.3);
			}
			#sports #competition .ttl img,
			#sports #battle .ttl img {
				border-radius: 8px;
			}

	#sports .copy {
		width: 486px;
		position: absolute;
		top: 540px;
		right: -18px;
	}
	#sports #rugby,
	#sports #rhythmic {
		position: relative;
	}
		#sports #rugby > *,
		#sports #rhythmic > * {
			position: absolute;
		}
		#sports #rugby .thumbs,
		#sports #rhythmic .thumbs {
			width: 528px;
			height: 296px;
			background-color: #fff;
			border: solid 6px #fff;
		}
			#sports #rugby .thumbs a:hover,
			#sports #rhythmic .thumbs a:hover {
				opacity: 0.6;
			}
			#sports #rugby .thumbs video,
			#sports #rhythmic .thumbs video {
			}
				#sports #rugby .thumbs .new,
				#sports #rhythmic .thumbs .new {
					position: absolute;
					top: -6px;
					left: -6px;
				}
				#sports #rugby .thumbs .play,
				#sports #rhythmic .thumbs .play {
					position: absolute;
					bottom: 1px;
					right: 17px;
				}

	#sports #rugby {
		height: 324px;
		margin-top: 200px;
	}
		#sports #rugby .thumbs {
			top: 10px;
			right: 0;
		}
	#sports #rhythmic {
		height: 422px;
		margin: 60px 0 150px 0;
	}
		#sports #rhythmic .txt {
			right: 34px;
		}
		#sports #rhythmic .thumbs {
			top: 114px;
		}

	#sports .bxslider {
	}
	#sports .bxslider li img {
		min-width: 100%;
		width: auto;
		height: auto;
		border-top: solid 15px #fff;
		border-bottom: solid 15px #fff;
	}
	#sports .bx-controls.bx-has-pager {
		position: relative;
		top: -50px;
		z-index: 100;
	}
	#sports .txt02 {
		margin-top: 15px;
		text-align: center;
	}
	#sports .btn {
		margin-top: 114px;
		padding: 16px 0 12px 0;
		background-color: #fff;
		text-align: center;
		position: relative;
		z-index: 2;
	}


/* Wii U, tablet */

.wiiu #sports #rugby .thumbs video,
.wiiu #sports #rhythmic .thumbs video,
.tablet #sports #rugby .thumbs video,
.tablet #sports #rhythmic .thumbs video {
	display: none;
}

	.wiiu #sports #rugby .thumbs,
	.tablet #sports #rugby .thumbs {
		background: url(../../files/img/movie/rugby.gif) no-repeat center;
		-webkit-background-size: cover;
		background-size: cover;
	}
	.wiiu #sports #rhythmic .thumbs,
	.tablet #sports #rhythmic .thumbs {
		background: url(../../files/img/movie/rhythmic.gif) no-repeat center;
		-webkit-background-size: cover;
		background-size: cover;

	}

/*-------------------------------------------------------------------------
	Rio city
/*-----------------------------------------------------------------------*/

#rio {
	width: 100%;
	overflow: hidden;
}
#rio video.bg {
	background: url(../img/movie/superplay.jpg) no-repeat;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
	#rio .txt01 {
		padding: 147px 0 0 336px;
	}
	#rio .txt02 {
		padding: 4px 0 0 336px;
	}
	#rio .pic {
		padding: 48px 0 0 346px;
	}
	#rio .txt03 {
		margin-top:-14px; 
		padding: 0 0 0 336px;
	}
	#rio .txt04 {
		padding: 212px 0 200px 494px;
	}
	#rio .chara01 {
		position: absolute;
		top: 81px;
		left: 39px;
	}
	#rio .chara02 {
		position: absolute;
		top: 890px;
		left: -16px;
	}
#rio .btn {
	padding: 16px 0 12px 0;
	background-color: #fff;
	text-align: center;
	position: relative;
	z-index: 2;
}


/*-------------------------------------------------------------------------
	Footer
/*-----------------------------------------------------------------------*/

#footer .detailwrap{
	width: 880px;
	height: 165px;
	margin: 0 auto;
	position: relative;
}

#footer #detail3ds{
	position: absolute;
	left: 0;
	top: 15px;
}

#footer #detailkids{
	position: absolute;
	right: 0;
	top: 15px;
}

#footer #detailsonic{
	position: absolute;
	right: 0;
	bottom: 0;
}
/*-------------------------------------------------------------------------
	You Tube
/*-----------------------------------------------------------------------*/

.buttonBar {
	display: none;
}


/*-------------------------------------------------------------------------
	Navi
/*-----------------------------------------------------------------------*/

#navi {
	background-color: #fad700;
}