@charset "Shift_JIS";

/*-----------------------------------------------------
Container
-------------------------------------------------------*/
#Container{
	width:100%;
	/*background:url(../images/mv_bg.jpg) no-repeat 50% 0 #000;*/
	position: relative;
}
#Container .bg01,
#Container .bg02,
#Container .bg03,
#Container .bg04,
#Container .bg05{
	width: 1280px;
	height: 180px;
	position: absolute;
	z-index: -1;
	margin-left: -640px;
}
#Container .bg01{
	background: url(../images/top_bg_01.jpg) center top no-repeat;
	top: 0; left: 50%;
}
#Container .bg02{
	background: url(../images/top_bg_02.jpg) center top no-repeat;
	top: 180px; left: 50%;
}
#Container .bg03{
	background: url(../images/top_bg_03.jpg) center top no-repeat;
	top: 360px; left: 50%;
}
#Container .bg04{
	background: url(../images/top_bg_04.jpg) center top no-repeat;
	top: 540px; left: 50%;
}
#Container .bg05{
	background: url(../images/top_bg_05.jpg) center top no-repeat;
	top: 720px; left: 50%;
}

#Loading{
	position: absolute; left: 0; top: 0;
	width: 100%;
	height: 100%;
	z-index: 10000;
	background: #000;
}
#Loading .wrap{
	width: 960px;
	margin: 40px auto 0 auto;
	position: relative;
}

#Loading img{
	position: absolute;
	top:221px;
	left:201px;
	margin: 200px 0 0 200px;
}

/*-----------------------------------------------------
Header
-------------------------------------------------------*/
#Header{
	height:40px;
	background:none;
}


/*-----------------------------------------------------
content-bg
-------------------------------------------------------*/
#content-bg{
	width:100%;
	position:absolute;
	padding:6px 0 0;
	top:885px;
	left:0;
	background:url(../common/images/content_bg_top.png) repeat-x 50% 0;
	z-index:1;
}
#content-bg #content-bg-inline{
	width:100%;
	height:687px;
	background:url(../common/images/content_bg.jpg) repeat 50% 0;
}

/*-----------------------------------------------------
MV
-------------------------------------------------------*/
#MV{
	width:960px;
	height:1538px;
	position:relative;
	margin:0 auto;
	z-index:100;
}

/*-------------------------------------
h1
---------------------------------------*/
#MV h1{
	position:absolute;
	top:34px;
	left:512px;
	z-index:130;
}

/*-------------------------------------
il
---------------------------------------*/
#MV div.il{
	z-index:110;
}
#MV div.il p{
	position:absolute;
}
#MV div.il p.dust{
	top:339px;
	left:141px;
}
#MV div.il p.gravel{
	top:918px;
	left:234px;
	background: url(../images/mv_img_gravel.png) left top no-repeat;
	width: 266px;
	height: 91px;
}

#MV div.il p.charactor{
	top:221px;
	left:201px;
}

#MV div.il p.charactor img{
	width: 100%;
}

/*-------------------------------------
ul
---------------------------------------*/
#MV ul li{
	position:absolute;
	z-index:120;
}
#MV ul li.inquiry{
	top:110px;
	left:-17px;
}

#MV ul li.arcard{
	top:322px;
	left:0;
}

#MV ul li.inquiry img.rover,
#MV ul li.arcard img.rover,
#MV ul li.comics img{
	width: 100%;
	height: 100%;
}

#MV ul li.inquiry img.new{
	width: 65px;
	height: 65px;
	position: absolute; left: 8px; top: -2px;
}

#MV ul li.arcard img.new{
	width: 65px;
	height: 65px;
	position: absolute; left: 0px; top: 1px;
}

#MV ul li.comics{
	width: 290px;
	position: absolute; left: 674px; top: 433px;
}
#MV ul li.comics img.new{
	position: absolute; left: 228px; top: 84px;
}


/*-----------------------------------------------------
Content
-------------------------------------------------------*/
#Wrapper{
	width:100%;
	position:absolute;
	top:885px;
	left:0;
	padding:0;
	background:none;
	z-index:200;
}
#Wrapper #Wrapper-inline{
	width:100%;
	background:none;
}
#Wrapper #Content{
	position:relative;
	padding:0;
}

/*-------------------------------------
about
---------------------------------------*/
#Content div.about{
	position: relative;
}
#Content div.about h2{
	position:absolute;
	top:185px;
	left:-2px;
	z-index:250;
}
#Content div.about p{
	position:absolute;
}
#Content div.about p.image{
	top:-25px;
	left:12px;
	z-index:210;
}
#Content div.about p.text{
	top:117px;
	left:67px;
	z-index:220;
}
#Content div.about p.update{
	left: -1px;
	top: 131px;
}
#Content div.about .gravel_hover{
	top:240px;
	left: 74px;
}

#Content div.about .corver{
	display: none;
	width: 324px;
	height: 188px;
	position:absolute;
	top:117px;
	left:-2px;
	z-index:270;
	cursor: pointer;
}

/*-------------------------------------
story
---------------------------------------*/

#Content div.story{
	position: relative;
}

#Content div.story h2{
	position:absolute;
	top:242px;
	left:323px;
	z-index:250;
}
#Content div.story p{
	position:absolute;
}
#Content div.story p.image{
	top:75px;
	left:542px;
	z-index:210;
}
#Content div.story p.text{
	top:192px;
	left:354px;
	z-index:220;
}

#Content div.story .gravel_hover{
	top:256px;
	left: 442px;
}

#Content div.story .corver{
	display: none;
	width: 416px;
	height: 136px;
	position:absolute;
	top:191px;
	left:322px;
	z-index:270;
	cursor: pointer;
}

/*-------------------------------------
network
---------------------------------------*/

#Content div.network{
	position: relative;
}

#Content div.network h2{
	position:absolute;
	top:185px;
	left:734px;
	z-index:250;
}
#Content div.network p{
	position:absolute;
}
#Content div.network p.image{
	top:-7px;
	left:801px;
	z-index:210;
}
#Content div.network p.text{
	top:110px;
	left:743px;
	z-index:220;
}
#Content div.network p.update{
	top:52px;
	left:768px;
	z-index: 221;
}

#Content div.network .gravel_hover{
	top:200px;
	left: 770px;
}

#Content div.network .corver{
	display: none;
	width: 229px;
	height: 161px;
	position:absolute;
	left:734px;
	top:110px;
	z-index:270;
	cursor: pointer;
}

/*-------------------------------------
update
---------------------------------------*/
#Content div.update{
	position: absolute; left: 364px; top: 351px;
}

/*-------------------------------------
outline
---------------------------------------*/
#Content div.outline{
	width:400px;
	height:124px;
	overflow:hidden;
	position:absolute;
	top:416px;
	left:3px;
	padding:32px 30px 0 32px;
	background:url(../images/outline_bg.png) no-repeat 0 0;
}
#Content div.outline .package{
	width:153px;
	float:left;
	position: relative;
}

#Content div.outline .package .cero{
	position: absolute;
	left: 107px;
	top: 44px;
}
#Content div.outline .guid_btn{
	margin-top: 7px;
}

#Content div.outline div.outline-inline{
	margin-top: 1px;
	margin-left: 6px;
	width:240px;
	float:left;
	position: relative;
}
#Content div.outline div.outline-inline p.network{
	position: absolute; left: 202px; top: -1px;
}

#Content div.outline div.outline-inline p.btn{
	position: absolute; left: 110px; top: 59px;
}

#Content .tvcm{
	position: absolute; left: 501px; top: 423px;
}

#Content .tvcm .update{
	position: absolute; left:398px; top: -13px;
}

/*-----------------------------------------------------
Footer
-------------------------------------------------------*/
#Footer{
	padding:598px 0 0;
}

/*-----------------------------------------------------
modal
-------------------------------------------------------*/
#modal #modal-contents{
	width: 100%;
	height: 1px;
	position: absolute;
	left: 0;
	top: 0;
	margin: 0;
}

/*-------------------------------------
inquiry
---------------------------------------*/
#modal div.inquiry{
	width:960px;
	height:715px;
	position:relative;
	margin: 48px auto 0 auto;
}
#modal div.inquiry p.close{
	position:absolute;
	top:54px;
	right:40px;
}
#modal div.inquiry p.ttl{
	width:960px;
	margin:0 0 24px;
	text-align:center;
}
#modal div.inquiry ul{
	width: 960px;
}
#modal div.inquiry ul li{
	float:left;
	position:relative;
	padding:30px;
}
#modal div.inquiry ul li img.charactor{
	position:absolute;
	top:42px;
	left:233px;
}

#modal div.inquiry ul li img.new{
	position: absolute;
	left: 192px;
	top: 10px;
}

/*-------------------------------------
youtube
---------------------------------------*/
#modal div.youtube{
	width:828px;
	height:550px;
	position:relative;
	margin: 0 auto;
}
#modal div.youtube p.close{
	position:absolute;
	top:-33px;
	right:-31px;
}
#modal div.youtube p.ttl{
	width:100%;
	margin:0 0 29px;
	text-align:center;
}

#modal div.youtube .movie{
	width: 800px;
	height: 450px;
	margin: 0 auto;
	padding: 9px;

	background: url(../images/tvcm_modal_bg.png) left top no-repeat;
}

#modal div.youtube ul{
	width: 828px;
	overflow: hidden;

	margin: 0 auto;
}
#modal div.youtube ul li{
	float:left;
	position:relative;
	padding:30px 11px;
}
#modal div.youtube ul li img.charactor{
	position:absolute;
	top:42px;
	left:233px;
}

#modal div.youtube ul li img.new{
	position: absolute;
	left: 192px;
	top: 10px;
}