@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 {
	padding-top: 101.56%;
	background: url(../img/index/title/bg.jpg) 0 0 no-repeat;
	background-size: contain;
	position: relative;
}
	#title #logogame, #title #logorio2016, #title h1 {
		position: absolute;
	}
	#title #logogame {
		width: 14.53%;
		top: 2%;
		left: 2.5%;
	}
	#title #logorio2016 {
		width: 21.41%;
		margin:0 auto;
		top: 3.6%;
		left: 0;
		right: 0;
	}
	#title h1 {
		width: 60.78%;
		margin:0 auto;
		top: 44.6%;
		left: 0;
		right: 0;
	}
	#title #trial_btn,
	#title #title_txt {
		background: #e6e6e6;
		padding-bottom: 1.25%
	}


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

#sports {
}

	#sports ul li {
		margin-bottom: 4px;
		position: relative;
	}
		#sports ul li .new {
			width: 17.19%;
			position: absolute;
			top: 0;
			left: 0;
		}
		#sports ul li .ttl {
			position: absolute;
			bottom: 0;
			left: 0;
		}
		#sports ul .side1 {
			width: 49.45%;
			float: left;
			z-index: 2;
		}
		#sports ul .side2 {
			width: 49.45%;
			float: right;
			z-index: 2;
		}
		#sports .detail {
			width: 90.62%;
			padding: 5% 0 3% 1.5%;
		}


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

#rio .detail {
	width: 88.59%;
	padding: 3% 0 3%  3.5%;
}


#thumbs {
	padding: 5% 0;
}



/*-------------------------------------------------------------------------
	btn_area
/*-----------------------------------------------------------------------*/

#btn li {
	margin-bottom: 4px;
}

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

#soft_detail {
	background: url(../img/index/soft_detail/bg.gif) no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	position: relative;
}
	#soft_detail p {
		float: left;
		position: relative;
	}
	#soft_detail .box {
		padding-top: 3%;
	}
		#soft_detail .box {
			padding: 5% 0 0 7%;
		}
			#soft_detail .box .package {
				float: left;
				width: 26.6%;
			}
		#soft_detail .box .txt {
			width: 62.02%;
			float: right;
			padding: 0 7% 0 0;
		}
		#soft_detail .icon {
			padding: 5% 7% 0 7%;
		}
			#soft_detail .icon li {
				float: left;
				margin-right: 5.2%;
			}
			#soft_detail .icon li:last-child {
				margin-right: 0;
			}
			#soft_detail .icon #softicon {
				width: 15.45%;
			}
			#soft_detail .icon #cero {
				width: 12.15%;
			}
			#soft_detail .icon #amiibo {
				width: 14.93%;
			}
			#soft_detail .icon #network {
				width: 41.67%;
				padding-top: 1.5%;
			}
			#soft_detail .box .detail {
				padding: 0 7% 2.5% 0;
			}
	#soft_detail #pack {
		width: 80%;
		margin: 5% auto;
		padding: 5%; 
		background-color: #fff;
		border-radius: 8px;
	}
		#soft_detail #pack .package {
			width: 44.53%;
			float: left;
		}
		
		#soft_detail #pack dl {
			float:right;
			width: 55.07%;
		}
		
		#soft_detail #pack dl dt {
			width: 100%;
			padding-bottom: 10px;
		}
		
		#soft_detail #pack .price {
			width: 92.91%;
		}
		#soft_detail #pack .detail {
			width: 60.94%;
			float: right;
			margin-top: 3%;
		}
	#soft_detail .last {
		width: 90%;
		margin-bottom: 5%;
		padding-left: 5%;
	}
	#soft_detail .banner {
		width: 90%;
		margin-bottom: 5%;
		padding-left: 5%;
	}
	#soft_detail .banner a{
		width: 50%;
		display: inline-block;
	}


/*-------------------------------------------------------------------------
	character
/*-----------------------------------------------------------------------*/

#character {
	background:#cdf5f9;
	padding:20px 0 20px 0;
}

	#character h2 {
		text-align:center;
		margin:0 0 20px 0;
	}

	#character p {
		text-align:center;
	}

	#character p.top {
		margin:0 0 40px 0;
	}

/*-------------------------------------------------------------------------
	slider
/*-----------------------------------------------------------------------*/
#slide {
	margin-top: 2%;
}
	#slide {
		width: 100%;
		height: 125px;
		overflow: hidden;
	}
	#slide .area {}
		#slide .area > .slide {
			position: relative;
		}
			#slide .area > .slide li {
				float: left;
			}
				#slide .area > .slide li img {
					width: auto;
					height: 125px;
					overflow: hidden;
				}


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

#navi {
	background-color: #fad700;
}
	#navi p {
		background-color: #e6af00;
	}
		#navi p img {
			width: 25.94%;
		}