@charset "utf-8";

@import "layout.css";


/*-------------------------------------------------------------------------
	title
/*-----------------------------------------------------------------------*/
#title {
	width: 100%;
	max-height: 604px;
	background-color: #88b5f6;
	position: relative;
	overflow: hidden;
}
	#title #ss {
		width: 17%;
		position: absolute;
		top: 20%;
		right: 3%;
		z-index: 3;
	}
	#title #main {
		position: relative;
	}
		#title #main img {
			max-width: 1560px;
		}
	@media screen and (min-width: 961px) {

			#title #main img {
				min-width: 1560px;
				margin-left: -300px;
			}

	}

	@media screen and (max-width: 960px) {

			#title #main img {
				min-width: 170%;
				margin-left: -35%; 
			}

	}

	@media screen and (max-width: 768px) {

		#header {
			padding: 2% 4% 0 4%;
		}
		#header #nintendo {
			max-width: 81px;
			width: 16%;
		}
		#header #wiiu {
			max-width: 111px;
			width: 20%;
		}

	}

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

		#title #ss {
			width: 20%;
			position: absolute;
			top: 18%;
			right: 0;
			z-index: 3;
		}

	}

/*-------------------------------------------------------------------------
	Movie
/*-----------------------------------------------------------------------*/

#movie {
	width: 89%;
	margin: -13% 0 0 11%;
	background: url(../img/index/contents/movie/bg.png) no-repeat;
	background-size: contain;
	position: absolute;
	z-index: 3;
}
	#movie #youtube {
		width: 78.5%;
		padding-bottom: 56.25%;
		position: relative;
	}
		#movie #youtube iframe {
			position: absolute;
			top: 6%;
			left: 5%;
			width: 100% !important;
			height: 87% !important;
			z-index: 4;
		}

		.wiiu #movie {
			position: absolute;
			bottom: -350px;
		}
		.ds #movie {
			position: absolute;
			top: -40px;
		}


/*-------------------------------------------------------------------------
	Contents
/*-----------------------------------------------------------------------*/
#contents {
	margin-top: -6px;
	padding: 0 0 30px 0;
	background: url(../img/index/contents/line.png) repeat-x center top;
	position: relative;
	z-index: 1;
}
	#contents h2 {
		width: 82%;
		margin: 0 auto;
	}
	#contents p {
		width: 90%;
		margin: 20px auto 0;
		font-size: 120%;
		font-weight: bold;
		text-align: center;
		color: #321e0a;
	}
	#contents .sec {
		width: 74%;
		margin: 0 auto;
		position: relative;
	}
		#contents .sec .txt {
			width: 78%;
			margin: 0 auto;
			padding: 0.75em 6% 0 6%;
		}
		#contents .sec .btm {
			margin: 0 auto;
			padding: 0;
		}
		#contents .sec .chara {
			padding: 0;
			position: absolute;
			z-index: 1;
		}
		#contents #sec01 {
			margin: 4% auto 0 auto;
			z-index: 0;
		}
			#contents #sec01 .chara {
				width: 24%;
				top: 65%;
				left: -8%;
			}
		#contents #sec02 {
			margin: 8% auto 0 auto;
		}
			#contents #sec02 .chara {
				width: 20%;
				top: 57%;
				right: -2%;
			}
		#contents #sec03 {
			margin: 6% auto 0 auto;
			z-index: 1;
		}
			#contents #sec03 .chara {
				width: 20%;
				top: 52%;
				left: -8%;
			}


/*---------------- Story ----------------*/

	#contents #story {
		width: 96%;
		margin: 8% auto 0 auto;
		padding: 1%;
		background-color: #593a2a;
		border-radius: 14px;
		-webkit-border-radius: 14px;
		-moz-border-radius: 14px;
	}

		#contents #story dt {
			text-align: center;
		}

			#contents #story dt img {
				width: 21%;
				padding: 1% 0 2% 0;
			}
		#contents #story dd {
			min-height: 170px;
			padding: 2% 1%;
			background-color: #fff;
			border-radius: 10px;
			-webkit-border-radius: 10px;
			-moz-border-radius: 10px;
		}
			#contents #story dd .thumbs {
				float: left;
				width: 30%;
				margin: 1% 0 0 2%;
			}
			#contents #story dd .txt {
				width: 63%;
				margin: 0 0 0 36%;
				font-size: 100%;
				font-weight: 400;
				text-align: justify;
			}
			#contents #story dd .btn {
				width: 64%;
				margin-left: 35%;
			}
				#contents #story dd .btn a {
					display: block;
				}
				#contents #story dd .btn img {
					width: 88%;
				}


	@media screen and (min-width: 961px) {

		#contents .wrap {
			padding-top: 460px;
		}

	}

	@media screen and (max-width: 960px) {

		#contents .wrap {
			padding-top: 48%;
		}

	}

	@media screen and (max-width: 768px) {

		#contents {
			background-size: 20%;
		}
			#contents .wrap {
				padding-top: 48%;
			}
			#contents p {
				font-size: 110%;
			}


	}

	@media screen and (max-width: 480px) {
		#contents {
			background-size: 16%;
		}
			#contents h2 {
				width: 90%;
			}
			#contents p {
				font-size: 90%;
			}

			#contents #sec01 {
				margin: 4% auto 0 auto;
			}
				#contents #sec01 .chara {
					top: 54%;
					left: -12%;
				}
				#contents #sec02 .chara {
					top: 45%;
					right: -8%;
				}
				#contents #sec03 .chara {
					top: 37%;
					left: -9%;
				}

			#contents #story {
				width: 92%;
			}
				#contents #story dt img {
					width: 36%;
					padding: 2% 0 3% 0;
				}
				#contents #story dd .thumbs {
					width: 42%;
					margin: 1% 4% 1% 2%;
				}
				#contents #story dd .txt {
					width: 96%;
					padding: 0 2%;
					margin: 0;
					font-size: 90%;
				}
				#contents #story dd .btn {
					width: 100%;
					margin-left: 0;
				}

	}


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

#soft_detail {
	width: 94%;
	margin: 24px auto 0 auto;
	padding: 2%;
	background: #fff;
}
	#soft_detail #box {
		width: 63%;
		float: left;
	}
		#soft_detail #box #icon  {
			width: 36%;
			float: left;
			margin-right: 1%;
		}
			#soft_detail #box #icon ul {
				width: 100%;
				float: left;
				margin-right: 12px;
			}
				#soft_detail #box #icon ul li {
					float: left;
					margin-right: 10px;
				}
				#soft_detail #box #icon ul #soft {
					margin-left: 12%;
				}
				#soft_detail #box #icon ul #cero {
					margin-top: 8%;
				}
				#soft_detail #box #icon ul #eshop {
					margin-top: 10px;
				}
				#soft_detail #box #icon ul #detail {
					margin-top: 20px;
					margin-left: 10px;
				}
				#soft_detail #box #icon ul #detail a {
					width: 166px;
					height: 22px;
					padding: 6px 0;
					color: #fff;
					background: url(../img/index/contents/soft_detail/arrow.png) no-repeat 4% center #0096c8;
					border-radius: 20px;
					-webkit-border-radius: 20px;
					-moz-border-radius: 20px;
					display: block;
					font-weight: bold;
					text-align: center;
				}
				#soft_detail #box #icon ul #detail a:hover {
					background: url(../img/index/contents/soft_detail/arrow.png) no-repeat 4% center #4cb4d8;
				}
		#soft_detail #box #txt {
			width: 61%;
			padding-right: 2%;
			float: left;
			font-size: 90%;
		}
			#soft_detail #box #txt li {
				margin-bottom: 7px;
				padding-left: 16px;
				background: url(../img/index/contents/soft_detail/disc.png) no-repeat left 4px;
			}
				#soft_detail #box #txt li.pdf {
					padding-left: 20px;
					background: url(../img/index/contents/soft_detail/pdf.png) no-repeat left 2px;
				}
				#soft_detail #box #txt li dl dt {
					width: 9em;
					display: table-cell;
				}
				#soft_detail #box #txt li dl dd {
					width: 16em;
					padding-left: 0.75em;
					display: table-cell;
				}

		#soft_detail #box #how {
			width: 98%;
			float: left;
			padding: 2% 0 4% 0;
			background: url(../img/index/contents/soft_detail/how/line.png) repeat-x top;
		}
			#soft_detail #box #how dt {
				width: 4.5em;
				float: left;
				padding: 0;
				font-weight: bold;
			}
			#soft_detail #box #how ul li {
				float: left;
				margin: 0 0 0 1%;
				padding: 2px 12px;
				color: #fff;
				font-size: 10px;
				font-weight: bold;
				background-color: #0096c8;
				border-radius: 12px;
				-webkit-border-radius: 12px;
				-moz-border-radius: 12px;
			}
			#soft_detail #box #how ul li.off {
				background-color: #dcdcdc;
			}

			#soft_detail #box p.notes {
				width: 92%;
				float: left;
				margin: -10px 0 20px 0;
				padding: 0.2em 0.75em;
				border: solid 3px #ff7d00;
				border-radius: 6px;
				-webkit-border-radius: 6px;
				-moz-border-radius: 6px;
				font-size: 90%;
				font-weight: 800;
				text-align: left;
			}
				#soft_detail #box p.notes span {
					color: #E50012;
					font-size: 130%;
					font-weight: 800;
				}

		#soft_detail #shop {
				width: 34%;
				float: left;
				padding-left: 2%;
				border-left: 1px solid #c8c8c8;
		}
			#soft_detail #shop h3 {
				padding-bottom: 3%;
				color: #0096c8;
				font-size: 100%;
				font-weight: bold;
				line-height: 0;
			}
			
				#soft_detail #shop h3 span {
					width: 17px;
					padding-right: 4px;
					display: inline-block;
				}
					#soft_detail #shop h3 span img {
						margin-bottom: -2px;
					}
			#soft_detail #shop .btn li {
				width: 100%;
				margin-bottom: 10px;
				position: relative;
			}
				#soft_detail #shop .btn li a {
					padding: 6px 0;
					color: #fff;
					background: url(../img/index/contents/soft_detail/arrow.png) no-repeat 4% center #0096c8;
					border-radius: 20px;
					-webkit-border-radius: 20px;
					-moz-border-radius: 20px;
					display: block;
					font-weight: bold;
					text-align: center;
				}
				#soft_detail #shop .btn li a:hover {
					background: url(../img/index/contents/soft_detail/arrow.png) no-repeat 4% center #4cb4d8;
				}
				#soft_detail #shop .btn li span {
					width: 10px;
					position: absolute;
					top: 12px;
					right: 20px;
				}
			#soft_detail #shop p {
				width: 100%;
				margin: 0 auto 3% auto;
			}
			#soft_detail #shop #download {
			}
				#soft_detail #shop #download a {
					padding: 4px 6px;
					background-color: #ff7d00;
					border-radius: 6px;
					-webkit-border-radius: 6px;
					-moz-border-radius: 6px;
					display: block;
					color: #fff;
					text-align: center;
					letter-spacing: 0;
					line-height: 1.2em;
				}
				#soft_detail #shop #download a:hover {
					background-color: #ffa34c;
				}

			#soft_detail #shop .notes li {
				padding-left: 1em;
				text-indent: -1em;
				font-size: 80%;
			}


	@media screen and (max-width: 768px) {
		#soft_detail {
			width: 88%;
			margin: 4% auto 0 auto;
			padding: 4%;
			background: #fff;
		}
			#soft_detail #box {
				width: 100%;
			}
			#soft_detail #box #icon  {
				width: 32%;
				margin-right: 2%;
				display: table-cell;
			}
				#soft_detail #box #icon ul {
					width: 100%;
					float: left;
					margin-right: 2%;
				}
					#soft_detail #box #icon ul li {
						float: left;
					}
					#soft_detail #box #icon ul #soft {
						width: 36%;
					}
					#soft_detail #box #icon ul #cero {
						width: 20%;
					}
			#soft_detail #box #txt {
				width: 70%;
				padding-bottom: 4%;
				float: none;
				display: table-cell;
			}
				#soft_detail #box #txt li {
					margin-bottom: 7px;
				}
					#soft_detail #box #txt li dl dt {
						width: 15em;
						display: table-cell;
					}
					#soft_detail #box #txt li dl dd {
						width: 19em;
						padding-left: 0.75em;
						display: table-cell;
					}

		#soft_detail #box #how {
			width: 100%;
		}

		#soft_detail #box p.notes {
			width: 95%;
		}

			#soft_detail #shop {
				width: 100%;
				padding-left: 0;
				float: none;
				border-left: none;
			}
				#soft_detail #shop .btn li {
					width: 100%;
					margin-bottom: 2%;
				}
					#soft_detail #shop .btn li a {
						border-radius: 20px;
						-webkit-border-radius: 20px;
						-moz-border-radius: 20px;
					}
				#soft_detail #shop .notes li {
					padding-left: 1em;
					text-indent: -1em;
					font-size: 80%;
				}

	}

	@media screen and (max-width: 640px) {
		#soft_detail #box #icon ul #detail {
			margin-top: 200px;
			margin-left: 10px;
		}
		#soft_detail #box #icon ul #detail a {
			float: left;
			width: 84vw;
			height: 22px;
			padding: 6px 0;
			color: #fff;
			background: url(../img/index/contents/soft_detail/arrow.png) no-repeat 4% center #0096c8;
			border-radius: 20px;
			-webkit-border-radius: 20px;
			-moz-border-radius: 20px;
			display: block;
			font-weight: bold;
			text-align: center;
			margin-bottom: 20px;
		}
	}

	@media screen and (max-width: 320px) {
		#soft_detail #box #icon ul #detail {
			margin-top: 240px;
			margin-left: 10px;
		}
	}

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

		#soft_detail {
			max-width: 94%;
			padding: 3%;
			background: #fff;
		}
			#soft_detail #box #icon  {
				width: 30%;
				margin-right: 1%;
			}
				#soft_detail #box #icon ul {
				}
					#soft_detail #box #icon ul li {
					}
					#soft_detail #box #icon ul #soft {
						width: 48%;
						margin-left: 0;
					}
					#soft_detail #box #icon ul #cero {
						width: 28%;
					}
			#soft_detail #box #txt {
				width: 69%;
			}
				#soft_detail #box #txt li {
					margin-bottom: 7px;
					padding-left: 14px;
					background: url(../img/index/contents/soft_detail/disc.png) no-repeat left 3px;
				}
					#soft_detail #box #txt li dl {
						font-size: 11px;
						letter-spacing: 0;
					}
						#soft_detail #box #txt li dl dt {
							width: 9.5em;
						}
						#soft_detail #box #txt li dl dd {
							width: 10em;
							display: table-cell;
						}
			#soft_detail #shop {
			}
				#soft_detail #shop .btn li {
					margin: 0 0 1% 0;
					padding: 4px 0;
					border-radius: 12px;
					-webkit-border-radius: 12px;
					-moz-border-radius: 12px;
				}
					#soft_detail #shop .btn li a {
					}
					#soft_detail #shop .btn li span {
						top: 18px;
						right: 20px;
					}
				#soft_detail #shop .notes li {
				}

		#soft_detail #box #how dt {
		}
		#soft_detail #box #how ul li {
			padding: 0 8px;
			margin: 0 4px 4px 0;
			color: #fff;
			font-size: 10px;
			background-color: #0096c8;
			border-radius: 8px;
			-webkit-border-radius: 8px;
			-moz-border-radius: 8px;
			letter-spacing: 0;
		}
			#soft_detail #box #how ul li img {
				width: 100%;
			}


		#soft_detail #box p.notes {
			width: 92%;
		}

	}



p#game {
	width: 180px;
	float: left;
	margin: 24px 0 0 1%;
}
p#top {
	width: 64%;
	float: left;
	margin: 24px auto 0 auto;
	text-align: center;
}
	p#top img {
		width: 135px;
	}
#sns {
	width: 80px;
	float: right;
	margin-top: 24px;
}
	#sns li {
		width: 27px;
		float: left;
		margin: 0 0 2% 10%;
	}

#background {
	position: fixed;
	z-index: 0;
}

	#background p {
		position:absolute;
		top:0;
		right: 0;
		bottom: 0;
		left:0;
		text-align:center;
	}

		#background p img {
			width: auto;
			height: auto;
			opacity: 0;
			position:relative;
		}

	@media screen and (max-width: 780px) {

		p#game {
			width: 30%;
			max-width: 180px;
			float: left;
			margin: 24px 0 0 2%;
		}
		p#top {
			width: 50%;
			float: left;
			margin: 24px auto 0 auto;
			text-align: center;
		}
			p#top img {
				width: 80%;
				max-width: 106px;
			}
	}
	@media screen and (max-width: 480px) {

		p#game {
			width: 40%;
		}

		p#top {
			width: 32%;
			float: left;
			margin: 24px auto 0 auto;
			text-align: center;
		}
			p#top img {
				width: 80%;
				max-width: 106px;
			}
	}