@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;
		bottom:0;
		right:0px;
		width:38%;
	}

/*-------------------------------------------------------------------------
	About
/*-----------------------------------------------------------------------*/
#spabout {
	margin-bottom:10px;
}
	#spabout .inner {
		background-color:#D3F5FE;
		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:#0069E0;
			}
				#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 5px;
		position:relative;
	}
	#spsoft .icon {
		float:left;
		width:30%;
	}
		#spsoft .icon li {
			float:left;
			margin-right:5px;
		}
		#spsoft .icon img {
			width:100%;
		}
		#spsoft .icon .icon01 {
			width: 50%;
		}
		#spsoft .icon .icon01,
		#spsoft .icon .icon02 {
			margin-bottom:10px;
		}
		#spsoft .icon .icon02 {
			width:20%;
			margin: 7px 0 0 5px;
		}
		#spsoft .icon .icon03,
		#spsoft .icon .icon04,
		#spsoft .icon .icon05 {
			float:none;
			clear:both;
		}
		#spsoft .icon .icon03 {
			color: #ff7d00;
			font-size: 12px;
		}
		@media screen and (max-width: 480px) {
			#spsoft .icon .icon03 {
				font-size:10px;
			}
		}
		#spsoft .icon .icon04 a {
			color: #5e5e5e;
			font-size:12px;
			text-decoration: none;
		}
		#spsoft .icon .icon04 a:hover {
			color: #ff7d00;
		}
		#spsoft .icon .icon03 img {
			width: 30px;
			margin-top:10px;
			display: block;
		}
		#spsoft .icon .icon04 img {
			width: 18px;
			margin-top:10px;
			display: block;
		}
		@media screen and (max-width: 480px) {
			#spsoft .icon .icon03 img,
			#spsoft .icon .icon04 img {
				width:15px;
			}
			#spsoft .icon .icon04 a {
				font-size:10px;
			}
		}

	#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:5px;
		}
		@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.png) left top;
	padding-bottom:15px;
	background-size:100% auto;
	margin-bottom:10px;
}
.ds #spgame {
	background:none;
	background-color:#00237F;
}
	#spgame .intro {
		text-align:center;
		margin-top:-10px;
		margin-bottom:10px;
		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.png) left top;
	}
	#spz .frame {
		background:url(../img/sp/contents/z/bg_frame_loop.png) left top repeat-y;
		background-size:contain;
	}
		#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 {
		}
		
/*-------------------------------------------------------------------------
	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:2px;
		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;
	}



#slide {
	width:298px;
	height:240px;
	margin:15px auto 0;
	padding-bottom:10px;
}
	#slide .inner {
		position:relative;
	}
	#slide .slide {
		background:url(../img/sp/contents/z/slide/bg.png) left top no-repeat;
		height:244px;
		background-size:contain;
	}
	#slide .slidebg {
		display:none;
		position:absolute;
		top:0;
		left:0;
		width:100%;
	}
		#slide .slide img {
			width:298px;
		}
		#slide .slide li {
			position:absolute;
			top:0;
			left:0;
			display:none;
		}
		#slide .slide li.current {
			display:block;
		}
	#slide .slideNav {
		position:absolute;
		top:200px;
		left:78px;
	}
		#slide .slideNav li {
			float:left;
			cursor:pointer;
			margin-left:8px;
			width:20px;
			height:18px;
			background:url(../../../files/img/index/contents/z/slide/nav_ov.gif) left top no-repeat;
		}
		#slide .slideNav li img {
			width:20px !important;
		}
		#slide .slideNav li.current {
			text-indent:-9999px;
		}