@charset "Shift_JIS";

@import "../../../files/css/layout.css";
@import "../../../../../css/thickboxcstm.css";

body.sp {
	background:none;
}

.sp .sp {
	display:block;
}

.eshop.sp #primary {
	width:auto;
	float:none;
	padding-bottom:0;
}

.sp #container {
	width:100%;
	min-width:320px;
	max-width:640px;
	padding-top:20px;
	padding-bottom:30px;
}
.sp #wrapper {
	border:none;
	text-align:left;
}

/*-------------------------------------------------------------------------
	Header
/*-----------------------------------------------------------------------*/
.sp h3 img {
	width:100%;
	height:auto;
}
.sp .wrap {
	padding:0 3.125%;
}
.sp img {
	width:100%;
	height:auto;
}
.sp #spheader {
	margin-bottom:10px;
}
	.sp #spheader .wrap {
		padding:0 10px;
	}
	.sp #spheader h1 {
		float:left;
		width:100px;
	}
	.sp #spheader .info {
		float:right;
	}
	.sp #spheader ul {
	}
	.sp #spheader li {
		margin-bottom:10px;
		text-align:right;
	}
		.sp #spheader li img {
			width:150px;
			height:auto;
		}
		.sp #spheader li.eshop img {
			width:115px;
		}
		
/*-------------------------------------------------------------------------
	Title
/*-----------------------------------------------------------------------*/
.sp #sptitle {
	position:relative;
	margin-bottom:10px;
}
	.sp #sptitle .btn {
		position:absolute;
		top:25%;
		right:0px;
		width:32%;
	}

/*-------------------------------------------------------------------------
	About
/*-----------------------------------------------------------------------*/
#spabout {
	margin-bottom:10px;
}
	#spabout .inner {
		background-color:#ebdaff;
		padding:13px 20px 5px;
	}
	
		#spabout .inner .txt {
			position:relative;
			margin-bottom:10px;
		}
			#spabout .inner p {
				font-size:14px;
				line-height:1.5;
				font-weight:bold;
				color:#8243e6;
			}
				#spabout .inner p a {
					color:#ff3c91;
				}
				#spabout .inner p a:hover {
					color:#14c3ff;
				}
		#spabout .inner .link {
			display:block;
			height:18%;
			position:absolute;
			text-indent:-9999px;
		}
		#spabout .inner a.link01 {
			width:74%;
			top:0px;
			left:0px;
		}
		#spabout .inner a.link02 {
			width:47.3%;
			top:27%;
			left:32%;
		}
	#spabout .end img {
		width:100%;
		height:auto;
	}
	#spabout .bnr {
		margin-top:10px;
	}
	
/*-------------------------------------------------------------------------
	Soft
/*-----------------------------------------------------------------------*/
#spsoft {
	margin-bottom:20px;
}
	#spsoft .inner {
		border-left:1px solid #bababa;
		border-right:1px solid #bababa;
		padding:5px 10px 0px;
		position:relative;
	}
	#spsoft .icon {
		float:left;
		width:30%;
	}
		#spsoft .icon li {
			float:left;
			margin-right:5px;
		}
		#spsoft .icon .icon01 {
			margin-bottom:-10px;
		}
		#spsoft .icon .icon02 {
			margin-top:20px;
			margin-left:20px;
		}
		#spsoft .icon img {
		}
	#spsoft .txt {
		float:left;
		width:70%;
	}
	#spsoft .txt table {
		margin-bottom:5px;
	}
	#spsoft th, #spsoft td {
		font-size:16px;
		line-height:1.4;
		vertical-align:top;
		text-align:left;
		padding-bottom:7px;
	}
	@media screen and (max-width: 480px) {
		#spsoft th, #spsoft td {
			font-size:10px;
			padding-bottom:3px;
		}
	}
	#spsoft th {
		width:40%;
	}
	@media screen and (max-width: 480px) {
		#spsoft th {
			width:85px;
		}
	}
		#spsoft th span {
			color:#ff7d00;
		}
		#spsoft .txt a {
			font-weight:bold;
			color:#5e5e5e;
			text-decoration:none;
		}
		#spsoft .txt .pdf a {
			font-size:14px;
			display:block;
			background:url(../img/sp/soft/icon_pdf.png) left center no-repeat;
			padding-left:16px;
			height:31px;
			line-height:31px;
			margin-bottom:0px;
		}
		@media screen and (max-width: 480px) {
			#spsoft .txt .pdf a {
				font-size:11px;
			}
		}
		#spsoft .txt img {
			max-width:377px;
		}
	#spsoft .bnr {
		margin-top:10px;
		margin-left:-2%;
	}
		#spsoft .bnr li {
			width:48%;
			float:left;
			margin-left:2%;
		}
		
/*-------------------------------------------------------------------------
	Game
/*-----------------------------------------------------------------------*/
#spgame {
	background:url(../img/sp/contents/bg_contents.gif) left top;
	padding-bottom:15px;
	margin-bottom:10px;
}
	#spgame .intro {
		text-align:center;
		margin-top:10px;
		margin-bottom:20px;
		padding:0 20px;
	}
		#spgame .intro img {
			max-width:561px;
		}
	#spgame .jump {
		margin-bottom:15px;
	}
	#spgame .return {
		text-align:center;
		margin-top:15px;
	}
		#spgame .return img {
			width:240px;
		}
	
/*-------------------------------------------------------------------------
	About Z
/*-----------------------------------------------------------------------*/
#spz {
	padding-top:10px;
	margin-bottom:10px;
}
	#spz .bg {
		background:url(../img/sp/contents/z/bg_z.gif) 5px -70px;
	}
	#spz .frame {
		background:url(../img/sp/contents/z/bg_frame_loop.png) left top repeat-y;
		background-size:contain;
		padding-bottom:10px;
	}
		#spz .end {
			position:relative;
		}
	#spz .point {
	}
		#spz .point h4 {
			cursor:pointer;
		}
		#spz .point .boxes {
			display:none;
			position:relative;
		}
		#spz .point .boxes.active {
			display:block;
		}
		#spz .point .inner {
			background-color:#F00;
		}
		
/*-------------------------------------------------------------------------
	Game
/*-----------------------------------------------------------------------*/
#spatt {
}
	#spatt .ttl {
		position:relative;
		background:url(../img/sp/contents/dx/bg_ttl.png) left top no-repeat;
		background-size:100% auto;
		padding:10px 15px 0 10px;
	}
	#spatt .ttl img {
	}
	#spatt .ttl .img {
		width:20%;
		float:left;
	}
	#spatt .ttl h4 {
		font-size:22px;
		font-weight:bold;
		float:left;
		width:78%;
		color:#ff3c91;
		padding-top:5px;
		padding-left:2%;
	}
		#spatt .ttl h4 span {
			font-size:18px;
			margin-top:3px;
			display:block;
		}
		#spatt .ttl h4 a {
			font-size:22px;
			font-weight:bold;
			letter-spacing:0;
			color:#ff3c91;
		}
			#spatt .ttl h4 a:hover {
				color:#14c3ff;
			}
	@media screen and (max-width: 590px) {
		#spatt .ttl h4 {
			font-size:14px;
		}
			#spatt .ttl h4 span {
				font-size:14px;
			}
			#spatt .ttl h4 a {
				font-size:14px;
			}
	}
	@media screen and (max-width: 480px) {
		#spatt .ttl h4 {
			font-size:13px;
		}
			#spatt .ttl h4 span {
				font-size:13px;
			}
			#spatt .ttl h4 a {
				font-size:13px;
			}
	}
	@media screen and (max-width: 400px) {
		#spatt .ttl h4 {
			font-size:11px;
		}
			#spatt .ttl h4 span {
				font-size:11px;
			}
			#spatt .ttl h4 a {
				font-size:11px;
			}
	}
	#spatt .loop {
		background:url(../img/sp/contents/dx/bg_star.png) left bottom repeat-y;
		background-size:100% auto;
		padding-bottom:20px;
	}
	#spatt .last {
		background:url(../img/sp/contents/dx/bg_att.png) left bottom no-repeat;
		background-size:100% auto;
		padding-bottom:20px;
	}
	#spatt .att {
		margin-top:10px;
		border:2px solid #ff3c91;
		border-radius:10px;
		margin:0px 20px 0;
	}
	#spatt h5 {
		font-size:20px;
		font-weight:bold;
		color:#ff3c91;
		padding-top:10px;
		text-align:center;
	}
	#spatt .txt {
		position:relative;
		padding-bottom:40px;
	}
	@media screen and (max-width: 540px) {
		#spatt .txt {
			padding-bottom:25px;
		}
	}
		#spatt .txt p {
			font-size:15px;
			font-weight:bold;
			color:#3c3c3c;
			line-height:1.6;
			padding:10px 10px 0;
		}
		@media screen and (max-width: 540px) {
			#spatt .txt p {
				font-size:10px;
			}
		}
			#spatt .txt p a {
				color:#ff3c91;
			}
			#spatt .txt p a:hover {
				color:#14c3ff;
			}
		
/*-------------------------------------------------------------------------
	SPFooter
/*-----------------------------------------------------------------------*/
#spfooter {
}
	#spfooter img {
		width:auto;
	}
		#spfooter .btn img {
			width:60%;
		}
	#spfooter ul {
		text-align:center;
		margin-bottom:5px;
	}
	#spfooter li {
		display:inline !important;
	}
	#spfooter li a {
		text-decoration:none;
		font-size:11px;
		color:#000;
	}
	#spfooter p {
		text-align:center;
	}

/* add */
#nc-category-footer .local-footer-links .local-footer-links-col .local-footer-links-col-header .local-footer-links-col-header-icon{
	-webkit-transform: translate3d(0,9px,0);
	transform: translate3d(0,9px,0);
}