@charset "utf-8";

@import "layout.css";


/*-------------------------------------------------------------------------
	title
/*-----------------------------------------------------------------------*/
#title {
	width: 100%;
	max-height: 802px;
	background-color: #000;
	position: relative;
	overflow: hidden;
}
	#title #ss {
		width: 17%;
		position: absolute;
		top: 48%;
		right: 0;
		z-index: 3;
	}
	#title #main {
		position: relative;
	}
	#title #main img {
		max-width: 1600px;
	}
	@media screen and (min-width: 961px) {

			#title #main img {
				min-width: 1600px;
				margin-left: -320px;
			}

	}

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

			#title #main img {
				min-width: 140%;
				margin-left: -20%; 
			}

	}

	@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: 24%;
			position: absolute;
			top: 44%;
			right: 0;
			z-index: 3;
		}

	}

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

#movie {
	width: 90%;
	margin: -11% 0 0 9%;
	padding: 1% 0 0 1%;
	background: url(../img/index/contents/movie/bg.png) no-repeat;
	background-size: 89.5%;
	position: absolute;
	z-index: 3;
}
	#movie #youtube {
		width: 88.5%;
		padding-bottom: 56.25%;
		position: relative;
	}
		#movie #youtube iframe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100% !important;
			height: 97.5% !important;
			z-index: 4;
		}

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


/*-------------------------------------------------------------------------
	Contents
/*-----------------------------------------------------------------------*/
#contents {
	width: 100%;
	margin-top: -6px;
	background: url(../img/index/contents/grd.png) repeat-x;
	padding: 0 0 30px 0;
	position: relative;
	z-index: 1;
}
	#contents h2 {
		width: 67%;
		margin: 0 auto 4% auto;
	}
	#contents p {
		width: 90%;
		margin: 20px auto 0 auto;
		font-size: 120%;
		text-align: center;
		color: #fff;
	}
	#contents #object01 {
		margin: 50px 0 0 0;
		text-align: right;
	}
		#contents #object01 img {
			width: 18%;
			margin-right: 8%;
		}
	#contents .sec {
		width: 90%;
		margin: 4% auto 0 auto;
		position: relative;
	}
		#contents .sec .txt {
			width: 78%;
			margin: 0 auto;
			padding: 0.75em 6% 0 6%;
			font-weight: bold;
			color: #3c4b50;
		}
		#contents .sec .object {
			padding: 0;
			position: absolute;
			z-index: -1;
		}
		#contents #sec01 {
		}
		#contents #sec02 {
		}
			#contents #sec02 .object {
				width: 16%;
				top: 53%;
				right: -18%;
			}
		#contents #sec03 {
		}
			#contents #sec03 .object {
				width: 14%;
				top: 82%;
				left: -12%;
			}
	.wiiu #contents #sec02 .object {
		display: none;
	}


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

			#contents #sec02 .object,
			#contents #sec03 .object {
				display: none;
			}

	}


/*---------------- Book ----------------*/

#book {
	width: 100%;
	margin: 100px 0;
	background-color: rgba(0,0,0,0.6);
	box-shadow: 0 0 75px 75px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0 0 75px 75px rgba(0,0,0,0.6);
    -moz-box-shadow: 0 0 75px 75px rgba(0,0,0,0.6);

}

#book .wrap {
	width: 80%;
	max-width: 900px;
	padding-top: 0;
}
	#book .wrap h3 {
		width: 44%;
		margin: 0 auto;
		padding-bottom: 2%;
	}

#arrows button {
	z-index: 1000;
}
#slick_container {
    margin: 0 auto;
    position:relative;
}
.slick-prev, .slick-next {
    width:25px;
    height:42px;
}
.slick-prev:before, .slick-next:before {
    content:"";
}

.slick-prev {
	top: 50%;
	left: -8%;
	background:url(../img/index/contents/book/arrow_l.png) 0 0 no-repeat;
}
.slick-next {
	top: 50%;
	right: -8%;
	background:url(../img/index/contents/book/arrow_r.png) 0 0 no-repeat;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    opacity: 0.7;
}

.slick-dots {
    bottom: -42px;
}
	.slick-dots li {
		margin: 0 2px;
	}
	.slick-dots li button,
	.slick-dots li button:before,
	.slick-dots li.slick-active button:before {
		width: 12px;
		height: 12px;
		background: #fff;
		opacity: 1;
		border-radius: 6px;
		-moz-border-radius: 6px;
		-webkit-border-radius: 6px;
	}
	.slick-dots li button:before {
		font-size: 0;
	}
	.slick-dots li.slick-active button:before {
	    background: #c90000;
	}

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

		#book .wrap h3 {
			width: 64%;
		}
	}

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

		#book .wrap h3 {
			width: 90%;
			padding-bottom: 4%;
		}

		.slick-prev, .slick-next {
		    width:4%;
		    background-size: 100%;
		}

	}

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

		#slide {
			width: 84%;
			margin: 0 auto;
		}

		.slick-prev {
			left: 1%;
		}
		.slick-next {
			right: 1%;
		}
		.slick-dots {
		    bottom: -36px;
		}
			.slick-dots li {
				width: 12px;
				margin: 0 4px;
			}


	}


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

	#contents #story {
		width: 96%;
		margin: 2% auto 0 auto;
		padding: 1%;
		background-color: #3c4b50;
		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 {
			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%;
				color: #696e69;
				font-size: 100%;
				font-weight: 400;
				text-align: justify;
			}
			#contents #story dd .btn {
				width: 63%;
				margin: 3% 0 2% 36%;
			}
				#contents #story dd .btn a {
					padding: 6px 0;
					color: #fff;
					background: url(../img/index/contents/soft_detail/arrow.png) no-repeat 4% center #ff7d00;
					border-radius: 20px;
					-webkit-border-radius: 20px;
					-moz-border-radius: 20px;
					display: block;
					font-weight: bold;
					text-align: center;
					position: relative;
				}
				#contents #story dd .btn a:hover {
					background: url(../img/index/contents/soft_detail/arrow.png) no-repeat 4% center #ffa34c;
				}
				#contents #story dd .btn span {
					width: 10px;
					position: absolute;
					top: 14px;
					right: 20px;
				}

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

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

	}

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

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

	}

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

		#contents {
			background-size: 150%;
		}
			#contents h2 {
				width: 90%;
			}
			#contents .wrap.first {
				padding-top: 48%;
			}
			#contents p {
				font-size: 110%;
			}

			#contents #story dd .btn {
				width: 94%;
				margin: 3% auto 2% auto;
			}
	            #contents #story dd .btn a {
	                border-radius: 20px;
	                -webkit-border-radius: 20px;
	                -moz-border-radius: 20px;
	            }

	}

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

			#contents #sec01 {
				margin: 24% auto 0 auto;
			}
				#contents #sec01 .chara {
					top: -38%;
				}

			#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: 98%;
	                padding: 4px 0;
	                border-radius: 12px;
	                -webkit-border-radius: 12px;
	                -moz-border-radius: 12px;
	            }
	                #contents #story dd .btn span {
	                    top: 12px;
	                    right: 20px;
	                }


	}

/*-------------------------------------------------------------------------
	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: 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 #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 {
				font-weight: bold;
			}
				#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 #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%;
			}

	}



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: 79px;
	}
#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: 79px;
			}
	}
	@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: 79px;
			}
	}