@charset "Shift_JIS";

@import "common/layout.css";

/*-------------------------------------------------------------------------
	Title
/*-----------------------------------------------------------------------*/
#title {
	padding-top:603px;
	background:url(../img/index/title/bg.jpg) no-repeat center top;
}

	#title .content {
		height:190px;
		padding:15px 0;
		background:#fffa00 url(../img/index/title/content/bg.jpg) repeat-x center bottom;
	}
	
		#title .content h1,
		#title .content .text {
			display:inline;
			float:left;
		}
	
		#title .content h1 {
			position:relative;
			bottom:136px;
			margin:0 35px -136px 0;
		}
		
/*-------------------------------------------------------------------------
	Info
/*-----------------------------------------------------------------------*/
#info {
	padding-bottom:10px;
}

	#info .item,
	#info .detail {
		display:inline;
		float:left;
	}

	#info .item {
		position:relative;
		top:-35px;
		margin:0 8px -35px 0;
	}
	
	#info .detail {
		position:relative;
	}
	
		#info .detail .spec {
			margin-bottom:8px;
		}
	
		#info .detail .spec .material {
			position:absolute;
			left:17px;
			top:14px;
		}
		
			#info .detail .spec .material ul {
				position:absolute;
				top:0;
			}
		
			#info .detail .spec .material .icon {
				left:94px;
			}
			
				#info .detail .spec .material .icon li {
					margin-bottom:5px;
					text-align:center;
				}
				
			#info .detail .spec .material .banner {
				top: 123px;
				left:494px;
			}
			
				#info .detail .spec .material .banner li {
					margin-bottom:3px;
				}
				
					#info .detail .spec .material .banner li span {
						display:block;
					}
					
					#info .detail .spec .material .banner li .dlsoft01 {
						margin-bottom:5px;
					}
					
		#info .detail .note,
		#info .detail .navi {
			display:inline;
			float:left;
		}
		
			#info .detail .note {
				position:relative;
				top:6px;
				margin-right:16px;
			}
		
			#info .detail .navi li {
				display:inline;
				float:left;
				margin-right:8px;
			}
		
/*-------------------------------------------------------------------------
	Main
/*-----------------------------------------------------------------------*/
#main {
	padding:23px 0 -28px 0;
	background:url(../img/index/main/bg.jpg) repeat-x center top;
}

/*-------------------------------------------------------------------------
	Main Background
/*-----------------------------------------------------------------------*/
#main-background {
	top:28px;
}

/*-------------------------------------------------------------------------
	Main Title
/*-----------------------------------------------------------------------*/
#main-title {
	top:23px;
	margin-bottom:60px;
	border-top:15px solid #fffa00;
	border-bottom:15px solid #fffa00;
	z-index:1;
}

	#main-title .capture {
		overflow:hidden;
		position:relative;
		width:100%;
	}
	
		#main-title .capture li {
			position:relative;
			height:112px;
		}
		
	#main-title .obj {
		position:absolute;
		right:15%;
		top:10px;
	}
	
		#main-title .obj .bubble {
			position:relative;
			left:40px;
			bottom:50px;
		}
		
/*-------------------------------------------------------------------------
	Attraction
/*-----------------------------------------------------------------------*/
#attraction {
	margin-bottom:10px;
	padding:30px 0;
	background:url(../img/index/main/attraction/bg.png) no-repeat center top;
}

	#attraction .box {
		margin-bottom:12px;
		background:no-repeat center top;
	}
	
		#attraction .box h2 {
			margin-bottom:10px;
			text-align:center;
		}
		
		#attraction .box .navi {
			width:855px;
			margin:0 auto;
		}
		
			#attraction .box .navi li {
				display:inline;
				float:left;
				position:relative;
				width:285px;
				height:137px;
			}
			
				#attraction .box .navi li a {
					text-align:center;
					z-index:0;
				}
				
					#attraction .box .navi li a img {
						position:relative;
					}
			
				#attraction .box .navi li span {
					position:absolute;
					right:0;
					bottom:0;
					z-index:1;
				}
				
					#attraction .box .navi li span .new {
						position:absolute;
						left:18px;
						top:-14px;
					}
				
		#attraction .box .obj {
			position:absolute;
			left:0;
			top:0;
		}
		
			#attraction .box .obj li {
				position:absolute;
				z-index:10;
			}
				
	#attraction-team {
	}
	
			#attraction-team .obj li.no0 {
				left:40px;
				top:-75px;
			}
			
			#attraction-team .obj li.no1 {
				left:832px;
				top:-90px;
			}
			
			#attraction-team .obj li.no2 {
				left:900px;
				top:-50px;
			}
	
	#attraction-battle {
	}
	
			#attraction-battle .obj li.no0 {
				left:20px;
				top:-50px;
			}
			
			#attraction-battle .obj li.no1 {
				left:70px;
				top:-25px;
			}
			
			#attraction-battle .obj li.no2 {
				left:875px;
				top:-40px;
			}
			
			#attraction-battle .obj li.no3 {
				left:910px;
				top:-65px;
			}
	
	#attraction-mini {
	}
	
			#attraction-mini .obj li.no0 {
				left:35px;
				top:-30px;
			}
			
			#attraction-mini .obj li.no1 {
				left:850px;
				top:-30px;
			}
	
/*-------------------------------------------------------------------------
	Plaza
/*-----------------------------------------------------------------------*/
#plaza {
	margin-bottom:50px;
}

	#plaza .banner {
		width:960px;
		height:213px;
		background:url(../img/index/main/plaza/bg.png) no-repeat center top;
	}
	
		#plaza .banner ul,
		#plaza .banner p {
			display:inline;
			float:left;
			position:relative;
		}
		
		#plaza .banner ul {
			left:45px;
			top:30px;
			width:615px;
		}
		
			#plaza .banner ul li {
				display:inline;
				float:left;
				position:relative;
				margin-right:10px;
			}
			
			#plaza .banner ul li.no0 {
				top:0;
			}
			
			#plaza .banner ul li.no1 {
				top:40px;
			}
			
			#plaza .banner ul li.no2 {
				top:0;
			}
			
			#plaza .banner ul li.no3 {
				top:-15px;
			}
			
			#plaza .banner ul li.no4 {
				top:20px;
			}
			
			#plaza .banner ul li.no5 {
				top:0;
			}
			
		#plaza .banner p {
			top:15px;
		}
		
			#plaza .banner p .new {
				position:absolute;
				right:-40px;
				top:20px;
				z-index:1;
			}

/*-------------------------------------------------------------------------
	Orange Button
/*-----------------------------------------------------------------------*/
.orange_btn {
	position: relative;
	width: 123px;
	height: 40px;
	background-color: #FFFFFF;
	font-size: 12px;
	text-align: center;
	display: table-cell;
 	vertical-align: middle;
 	border: solid 1px #FF9103;
}

.orange_btn:hover {
	width: 119px;
	height: 36px;
	border: solid 3px #FF9103;
	text-decoration: none;
}

.orange_btn span {
 	color: #FF9103;
}
.orange_btn span::after {
	content: "";
	position: absolute;
	right: 6px;
	top: calc(50% - 3px);
	width: 6px;
	height: 6px;
	border-top: 1px solid #FF9103;
	border-right: 1px solid #FF9103;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.orange_btn:hover > span::after {
	right: 4px;
}

.orange_btn a {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

#ncommon-purchase {
	font-size: 0px !important;
}

/*-------------------------------------------------------------------------
	Footer
/*-----------------------------------------------------------------------*/
#footer {
	padding-top:28px;
}