@charset "shift_jis";

/*-----------------------------------------------------
Container
-------------------------------------------------------*/
#Container{
	width:100%;
	background:url("../images/container_bg.gif") repeat 50% 0;
}



/*-----------------------------------------------------
Header
-------------------------------------------------------*/
#Header{
	width:976px;
	height:316px;
	position:absolute;
	top:357px;
	left:50%;
	margin:0 0 0 -488px;
	background:none;
	z-index:20;
}

/*-------------------------------------
logo01
---------------------------------------*/
#Header p.logo01{
	width:317px;
	height:167px;
	overflow:hidden;
	position:absolute;
	top:0;
	left:50%;
	margin:1px 0 0 -317px;
	text-indent:-9999px;
	background:url("../images/header_logo01.png") no-repeat 0 0;
}

/*-------------------------------------
logo02
---------------------------------------*/
#Header p.logo02{
	width:316px;
	height:168px;
	overflow:hidden;
	position:absolute;
	top:0;
	left:50%;
	margin:0 0 0 -1px;
	text-indent:-9999px;
	background:url("../images/header_logo02.png") no-repeat 0 0;
}

/*-------------------------------------
navi
---------------------------------------*/
#Header p.navi{
	width:714px;
	position:absolute;
	top:auto;
	right:auto;
	bottom:0;
	left:65%;
	margin:0 0 0 -484px;
}
#Header p.navi_first{
	width:274px;
	height:149px;
	position:absolute;
	top:auto;
	right:auto;
	bottom:0;
	left:50%;
	margin:0 0 0 221px;
}


/*-----------------------------------------------------
Content
-------------------------------------------------------*/
#Content{
	width:100%;
	min-width:980px;
	margin:0 auto 0 auto;
	background:url("../images/content_bg.png") no-repeat 50% 1615px;
}



/*-----------------------------------------------------
Visual
-------------------------------------------------------*/
#Visual{
	width:1400px;
	height:620px;
	position:relative;
	left:50%;
	margin-left:-700px;
}
#Header p.logo01,
#Header p.logo02,
#Visual p.ttl,
#Visual p.lead,
#Visual ul.phase2 li,
#Visual ul.phase3 li,
#Visual p.main_img{
	visibility:hidden;
}

/* loading
---------------------*/
#Visual div.loading{
	width:92px;
	height:104px;
	overflow:hidden;
	position:absolute;
	top:50%;
	left:50%;
	margin:-52px 0 0 -46px;
	text-indent:-9999px;
	background:url("../images/visual_loading.gif") no-repeat 0 0;
}

/* ttl
---------------------*/
#Visual p.ttl{
	width:703px;
	height:41px;
	position:absolute;
	top:251px;
	left:50%;
	margin-left:-351px;
}

/* lead
---------------------*/
#Visual p.lead{
	width:541px;
	height:42px;
	position:absolute;
	top:251px;
	left:50%;
	margin-left:-270px;
}

/* phase2
---------------------*/
#Visual ul.phase2{width:100%;position:relative;}
#Visual ul.phase2 li{position:absolute;}
#Visual ul.phase2 li.item01{top:124px;left:40px;}
#Visual ul.phase2 li.item02{top:47px;left:361px;}
#Visual ul.phase2 li.item03{top:124px;left:640px;}
#Visual ul.phase2 li.item04{top:33px;left:870px;}
#Visual ul.phase2 li.item05{top:102px;left:1153px;}
#Visual ul.phase2 li.item06{top:292px;left:10px;}
#Visual ul.phase2 li.item07{top:377px;left:313px;}
#Visual ul.phase2 li.item08{top:318px;left:578px;}
#Visual ul.phase2 li.item09{top:387px;left:1112px;}
#Visual ul.phase2 li.item10{top:78px;left:165px;}
#Visual ul.phase2 li.item11{top:306px;left:902px;}
#Visual ul.phase2 li.item12{top:402px;left:700px;}

/* phase3
---------------------*/
#Visual ul.phase3{width:100%;position:relative;}
#Visual ul.phase3 li{position:absolute;}
#Visual ul.phase3 li.illust01{top:91px;left:158px;}
#Visual ul.phase3 li.illust02{top:78px;left:1004px;}
#Visual ul.phase3 li.illust03{top:21px;left:371px;}
#Visual ul.phase3 li.illust04{top:16px;left:675px;}
#Visual ul.phase3 li.illust05{top:341px;left:413px;}
#Visual ul.phase3 li.illust06{top:295px;left:655px;}
#Visual ul.phase3 li.illust07{top:341px;left:826px;}

/* main_img
---------------------*/
#Visual p.main_img{
	width:100%;
	position:absolute;
	top:0;
	left:0;
}



/*-----------------------------------------------------
Main
-------------------------------------------------------*/
#Main{
	width:100%;
	position:relative;
	margin:-70px auto 0 auto;
	padding:124px 0 15px 0;
}
#Main div.main_bg_top{
	width:100%;
	height:124px;
	position:absolute;
	top:0;
	background:url("../images/main_bg_top.png") repeat-x 50% 0;
}
#Main div.main_inline{
	width:100%;
	position:relative;
	padding:20px 0 20px 0;
	background:url("../images/main_bg.gif") repeat 0 0;
}
#Main div.main_bg_bottom{
	width:100%;
	height:15px;
	position:absolute;
	bottom:0;
	background:url("../images/main_bg_bottom.png") repeat-x 50% 0;
}


/*-------------------------------------
news
---------------------------------------*/
#Main dl.news{
	width:960px;
	height:40px;
	overflow:hidden;
	margin:0 auto 0 auto;
	padding:10px 0 0 0;
	background:url("../images/news_bg.png") no-repeat 0 100%;
}
#Main dl.news dt{
	width:110px;
	height:40px;
	float:left;
	display:inline;
	overflow:hidden;
	text-indent:-9999px;
	background:url("../images/news_ttl.png") no-repeat 0 0;
}
#Main dl.news dd{
	width:810px;
	overflow:hidden;
	float:right;
	display:inline;
	padding:0 20px 3px;
}
#Main dl.news dd.line01{padding-top:13px;}
#Main dl.news dd a{color:#111111;}



/*-------------------------------------
other
---------------------------------------*/
#Main div.other{
	width:960px;
	height:244px;
	margin:0 auto 25px auto;
	padding:3px 0 16px 0;
	background:url("../images/other_bg.png") no-repeat 0 0;
}
#Main div.other ul{
	width:798px;
	overflow:hidden;
	margin:0 auto 0 auto;
}
#Main div.other ul li{
	display:inline;
}
#Main div.other ul li.img01{float:left;margin-top:5px;}
#Main div.other ul li.img02{float:right;margin-top:15px;}
#Main div.other ul li a{
	display:block;
	overflow:hidden;
	text-indent:-9999px;
}
#Main div.other ul li.img01,
#Main div.other ul li.img01 a{width:377px;height:219px;background:url("../images/other_img01.png") no-repeat 0 0;}
#Main div.other ul li.img01 a:hover{background:url("../images/other_img01_on.png") no-repeat 0 0;}
#Main div.other ul li.img02,
#Main div.other ul li.img02 a{width:364px;height:209px;background:url("../images/other_img02.png") no-repeat 0 0;}
#Main div.other ul li.img02 a:hover{background:url("../images/other_img02_on.png") no-repeat 0 0;}

/*-------------------------------------
h1
---------------------------------------*/
#Main h1{
	width:1085px;
	position:relative;
	left:50%;
	margin:0 0 22px -567px;
	padding:4px 0 0 0;
	text-align:center;
	z-index:3;
}




/*-------------------------------------
movie
---------------------------------------*/
#Main div.movie{
	width:100%;
	position:relative;
	border-top:1px solid #696360;
	border-bottom:1px solid #696360;
	background:url("../images/movie_bg01.gif") repeat 0 0;
}
#Main div.movie div.inline{
	padding:0;
}

/* row
---------------------*/
#Main div.movie div.row{
	width:100%;
	height:200px;
	overflow:hidden;
	position:relative;
	padding:24px 0 24px 0;
	background:url("../images/movie_bg02.png") repeat-x 0 3px;
}
#Main div.movie div.row div.row_inline{
	width:9999px;
	overflow:hidden;
	visibility:hidden;
	position:absolute;
	top:24px;
}
#Main div.movie div.even div.row_inline{left:0;}
#Main div.movie div.odd div.row_inline{right:0;}
/* ul */
#Main div.movie div.row ul{
	width:9999px;
	overflow:hidden;
	display:inline;
}
#Main div.movie div.even ul{float:left;}
#Main div.movie div.odd ul{float:right;}

#Main div.movie div.row ul li{
	width:300px;
	height:200px;
	display:inline;
	margin:0 5px 0 5px;
	background:url("../images/movie_thum_bg.png") no-repeat 0 0;
}
#Main div.movie div.even ul li{float:left;}
#Main div.movie div.odd{border-top:1px solid #696360;border-bottom:1px solid #696360;}
#Main div.movie div.odd ul li{float:right;}




/*-----------------------------------------------------
info
-------------------------------------------------------*/
#Content div.info{
	width:969px;
	height:238px;
	position:relative;
	margin:50px auto 0 auto;
	padding:0 0 0 9px;
	background:url("../images/info_bg.png") no-repeat 100% 0;
}

/* img01
---------------------*/
#Content div.info p.img01{
	position:absolute;
	top:41px;
	left:31px;
}

/* txt01
---------------------*/
#Content div.info p.txt01{
	position:absolute;
	top:37px;
	left:453px;
}

/* txt02
---------------------*/
#Content div.info p.txt02{
	position:absolute;
	top:91px;
	left:459px;
}

/* img02
---------------------*/
#Content div.info p.img02{
	position:absolute;
	top:92px;
	left:761px;
}

/* img03
---------------------*/
#Content div.info p.img03{
	position:absolute;
	top:138px;
	left:760px;
}

/* btn01
---------------------*/
#Content div.info p.btn01{
	position:absolute;
	top:37px;
	left:827px;
}

/* btn02
---------------------*/
#Content div.info p.btn02{
	position:absolute;
	top:163px;
	left:831px;
}
#Content div.info p.btn02 a:hover{
	filter:alpha(opacity=70);
	-moz-opacity:0.7;
	opacity:0.7;
}



/*-----------------------------------------------------
detail_btn
-------------------------------------------------------*/
#Content p.detail_btn{
	position:relative;
	margin-top:-35px;
}



/*-----------------------------------------------------
Modal
-------------------------------------------------------*/
#Modal{
	width:100%;
	height:100%;
	display:none;
	position:absolute;
	top:0;
	left:0;
	z-index:1000;
}

/*-------------------------------------
modal_bg
---------------------------------------*/
#Modal div.modal_bg{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	filter:alpha(opacity=85);
	-moz-opacity:0.85;
	opacity:0.85;
	
	background:#000;
}

/*-------------------------------------
ball
---------------------------------------*/
#Modal div.ball{
	width:140px;
	height:140px;
	position:fixed;
	top:50%;
	left:50%;
	margin:-70px 0 0 -70px;
	background:url("../images/modal_bg.gif") no-repeat 50% 50% ;
}

/*-------------------------------------
modal_inside
---------------------------------------*/
#Modal div.modal_inside{
	width:879px;
	height:719px;
	position:fixed;
	top:0;
	left:0;
	background:url("../images/modal_body_bg.png") no-repeat 0 0;
}

/* close
---------------------*/
#Modal div.modal_inside p.close{
	width:60px;
	height:60px;
	position:absolute;
	top:14px;
	right:9px;
	z-index:1500;
	background:url("../images/modal_btn_close.png") no-repeat 0 0;
}
#Modal div.modal_inside p.close a{
	width:60px;
	height:60px;
	display:block;
	overflow:hidden;
	text-indent:-9999px;
	background:url("../images/modal_btn_close.png") no-repeat 0 0;
}
#Modal div.modal_inside p.close a:hover{background:url("../images/modal_btn_close_on.png") no-repeat 0 0;}


/* contens
---------------------*/
#Modal div.modal_inside div.contens{color:#FFF;}
/* iframe */
#Modal div.modal_inside div.contens #Iframe{
	width:700px;
	height:418px;
	margin:64px auto 24px auto;
	padding:10px;
	background:url("../images/modal_movie_bg.gif") no-repeat 0 0;
}
#Modal div.modal_inside div.contens #Iframe iframe{
	width:700px;
	height:418px;
}

/* prev */
#Modal div.modal_inside div.contens p.prev{
	width:64px;
	height:76px;
	position:absolute;
	top:245px;
	left:-24px;
	background:url("../images/modal_btn_prev.png") no-repeat 0 0;
}
#Modal div.modal_inside div.contens p.prev a{
	width:64px;
	height:76px;
	display:block;
	overflow:hidden;
	text-indent:-9999px;
	background:url("../images/modal_btn_prev.png") no-repeat 0 0;
}
#Modal div.modal_inside div.contens p.prev a:hover{background:url("../images/modal_btn_prev_on.png") no-repeat 0 0;}

/* next */
#Modal div.modal_inside div.contens p.next{
	width:64px;
	height:76px;
	position:absolute;
	top:245px;
	right:-24px;
	background:url("../images/modal_btn_next.png") no-repeat 0 0;
}
#Modal div.modal_inside div.contens p.next a{
	width:64px;
	height:76px;
	display:block;
	overflow:hidden;
	text-indent:-9999px;
	background:url("../images/modal_btn_next.png") no-repeat 0 0;
}
#Modal div.modal_inside div.contens p.next a:hover{background:url("../images/modal_btn_next_on.png") no-repeat 0 0;}

/* dl */
#Modal div.modal_inside div.contens dl{
	width:735px;
	overflow:hidden;
	position:absolute;
	top:526px;
	left:60px;
}
#Modal div.modal_inside div.contens dl dt{
	width:366px;
	height:30px;
	overflow:hidden;
	margin:0 auto 20px auto;
	text-indent:-9999px;
	background:url("../images/modal_social_ttl.png") no-repeat 0 0;
}
#Modal div.modal_inside div.contens dl dd{
	width:354px;
	height:79px;
	display:inline;
}
#Modal div.modal_inside div.contens dl dd.tw{float:left;margin-left:15px;}
#Modal div.modal_inside div.contens dl dd.fb{float:right;}

#Modal div.modal_inside div.contens dl dd a{
	width:354px;
	height:79px;
	display:block;
	overflow:hidden;
	text-indent:-9999px;
}
#Modal div.modal_inside div.contens dl dd.tw,
#Modal div.modal_inside div.contens dl dd.tw a{background:url("../images/modal_social_btn01.png") no-repeat 0 0;}
#Modal div.modal_inside div.contens dl dd.tw a:hover{background:url("../images/modal_social_btn01_on.png") no-repeat 0 0;}

#Modal div.modal_inside div.contens dl dd.fb,
#Modal div.modal_inside div.contens dl dd.fb a{background:url("../images/modal_social_btn02.png") no-repeat 0 0;}
#Modal div.modal_inside div.contens dl dd.fb a:hover{background:url("../images/modal_social_btn02_on.png") no-repeat 0 0;}