/*--------------------------------
header
--------------------------------*/
#header{
	position: relative;
	z-index: 9999;
	width: 100%;
	height: 860px;
	/*margin: 0 auto -40px auto;*/
	margin: 0 auto;	
	background-image: url(../img/top/bg_header.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

#header_inner{
	position: relative;
	width: 960px;
	height: 860px;
	margin: 0 auto;
}
#header_main{
	position: absolute;
	z-index: 0;
	top:  32px;
	left: -40px;
	width: 952px;
	height: 791px;
	background: url(../img/top/main.png) 0 0 no-repeat;
}


#header_title{
	position: absolute;
	z-index: 1;
	top: 300px;
	right: -80px;
}
#header_lead{
	position: absolute;
	z-index: 10;
	top: 8px;
	left: -16px;
}
#header_catch{
	position: absolute;
	z-index: 10;
	top: 140px;
	left: 200px;
}
#header_release{
	position: absolute;
	z-index: 20;
	bottom: 40px;
	left: 385px;
}
#header_trailer{
	position: absolute;
	z-index: 10;
	bottom: 280px;
	left: -40px;
}
#header_special{
	position: absolute;
	z-index: 10;
	bottom: 190px;
	left: 60px;
}
#header_cam{
	position: absolute;
	z-index: 10;
	top: 40px;
	right: 0px;
}

/*-------- sns --------------------*/
#sns_share{
	position: absolute;
	z-index: 9999;
	bottom: 16px;
	left: 4px;
	line-height: 20px;
	width: 251px;
}
#sns_share li{
	float: left;
	margin: 0 8px 0 0;
}
#sns_share li.fb{
	width: 70px;
}
#sns_share li.tw{
	width: 75px;
}
#sns_share li.line{
	width: 82px;
}


/*-------- news --------------------*/
#news{
	position: absolute;
	z-index: 10;
	bottom: 40px;
	left: 0px;
	width: 369px;
	height: 152px;
	font-size: 14px;
	font-size: 1.4rem;
	color: #e5005b;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background: url(../img/top/news.png) 0 0 no-repeat;
}
.news_inner{
	width: 332px;
	height: 95px;
	margin: 37px 0 0 21px;
	overflow: hidden;
}
.news_inner .scrollbar{ height: 95px; }
.news_inner ul{
	width: 328px;
	margin: 0;
	line-height: 20px;
}
.news_inner .date{
	width: 68px;
	margin: 0;
	font-size: 12px;
	font-size: 1.2rem;
	white-space: nowrap;
}
.news_inner .topic{
	width: 320px;
	margin: 0 0 8px 0;
	padding: 0 8px 0 12px;
	line-height: 16px;
	line-height: 1.6rem;
	background: url(../img/top/triangle.gif) 0 2px no-repeat;
}
#news a{
	color: #e5005b;
	text-decoration: none;
}
#news a:hover{
	color: #f15772;
	text-decoration: none;
}


/*--------------------------------
content
--------------------------------*/	
#wrap{
	position: relative;
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	background-image: url(../img/common/bg_content.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	/*text-shadow: -1px -1px #050c32, 1px -1px #050c32, -1px 1px #050c32, 1px 1px #050c32;*/
}
#intro,
#cast,
#chart,
#story,
#dvdoa,
#comment,
#special{
	position: relative;
	width: 100%;
	margin: 0 auto 0 auto !important;
	padding: 95px 0 0 0 !important;
}
.content{
	position: relative;
	z-index: 100;
	width: 960px;
	margin: 0 auto;
	padding: 0;
}
#intro h2,
#cast h2,
#chart h2,
#story h2,
#dvdoa h2,
#comment h2,
#special h2{
	position: relative;
	z-index: 100;
	width: 440px;
	height: 80px;
	margin: 0 0 40px 0;
	white-space: nowrap;
	text-indent: 100%;
	overflow: hidden;
}
.category_intro{ background:url(../img/common/h2_category.png) 0 0 no-repeat; }
.category_cast{ background:url(../img/common/h2_category.png) 0 -80px no-repeat; }
.category_chart{ background:url(../img/common/h2_category.png) 0 -160px no-repeat; }
.category_story{ background:url(../img/common/h2_category.png) 0 -240px no-repeat; }
.category_dvdoa{ background:url(../img/common/h2_category.png) 0 -320px no-repeat; }
.category_comment{ background:url(../img/common/h2_category.png) 0 -400px no-repeat; }
.category_special{ background:url(../img/common/h2_category.png) 0 -480px no-repeat; }

/*--------------------------------
intro
--------------------------------*/
#intro h3{
	position: relative;
	z-index: 110;
	margin: 0 0 40px 0;
}

#intro .sum{
	position: relative;
	z-index: 120;
	width: 960px;
}
#intro .sum>li{
	float: right;
	width: 680px;
	margin: 0 0 40px 0;
}
#intro .sum>li:first-child{
	float: left;
}
#intro .sum dd{ padding: 0 0 0 32px; }


#intro .ph>li{
	position: absolute;
	z-index: 100;
}
#intro .ph .ph1{
	top: 120px;
	right: -56px;
}
#intro .ph .ph2{
	top: 500px;
	left: -32px;
}
#intro .ph .ph3{
	top: 930px;
	left: 130px;
}

/*--------------------------------
cast
--------------------------------*/
#cast ul li{
	margin: 0 auto 16px auto;
	white-space: nowrap ;
	text-indent: 100%;
	overflow: hidden;
	border-radius: 8px; 
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px; 
}

.cast1,
.cast2{
	width: 960px;
	height: 320px;
}
.cast3,
.cast4,
.cast5{
	width: 960px;
	height: 240px;
}

.cast1{ background: url(../img/cast.png) 0 0 no-repeat; }
.cast2{ background: url(../img/cast.png) 0 -320px no-repeat; }
.cast3{ background: url(../img/cast.png) 0 -640px no-repeat; }
.cast4{ background: url(../img/cast.png) 0 -880px no-repeat; }
.cast5{ background: url(../img/cast.png) 0 -1120px no-repeat; }
.cast6{ background: url(../img/cast.png) 0 -1360px no-repeat; }

/*--------------------------------
chart
--------------------------------*/

/*--------------------------------
story
--------------------------------*/
#story{ height: 600px; }
#story iframe{
	position: absolute;
	top: 60px;
	left: 106px;
	z-index: 110;
}
#story .bg_left{
	position: absolute;
	top: -80px;
	left: -100px;
	z-index: 0;
}
#story .bg_right{
	position: absolute;
	top: -120px;
	right: -110px;
	z-index: 0;
}

/*--------------------------------
dvdoa
--------------------------------*/
#dvd_area h3 img,
#oa_area h3 img{
	display: block;
	margin: 0 auto 16px auto;
}
#dvd_area,
#oa_area{
	position: relative;
	width: 960px;
	margin: 0 0 40px 0;
}
#dvd_area>ul,
#oa_area>ul{
	border-radius: 8px; 
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px; 
	background: rgba(255,255,255,0.3);
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#44ffffff ,EndColorStr=#44ffffff );/*IE8以下用*/	
}
/*-------- dvd_area --------*/
#dvd_area>ul{
	position: relative;
	width: 432px;
	padding: 16px;
}
#dvd_area>ul>li{ float: left; }
#dvd_area>ul>li:nth-child(2){
	position: absolute;
	top: 21px;
	right: 9px;
}

#dvd_area>ul dl{
	margin: 16px 0 0 0;
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 16px;
	line-height: 1.6rem;
	color: #ff3399;
}
#dvd_area>ul dt{
	text-indent: -8px;
	font-weight: bolder;
}
#dvd_area>ul dd{
	text-indent: 8px;
	font-weight: bolder;
	margin: 0 0 4px 0;
}
.copy{
	float: left;
	margin: 16px 0 0 0;
}

/*-------- oa_area --------*/
#oa_area>ul{
	width: 936px;
	padding: 16px 8px 16px 16px;
}
#oa_area .scrollbar{
	height: 70px;
	font-weight: bolder;
	text-align: center;
}

#oa_area .border{
	width: 920px;
	height: 5px;
	margin: 8px 0;
	background: url(../img/dvdoa/oa_line.png) 0 0 no-repeat !important;
}


#oa_area>ul li a{
	color: #005cac;
	font-weight: bolder;
}
#oa_area>ul li a:hover{	color: #00ccff; }

/*--------------------------------
comment
--------------------------------*/
#comment>.content{ height: 480px; }
#comment h3 img{
	display: block;
	position: relative;
	z-index: 100;
	margin: 0 auto;
}
#comment>.content>ul>li{
	position: absolute;
	z-index: 0;
	width: 360px;
	height: 280px;
	padding: 90px 0 0 0;
	text-align: center;
}
#comment>.content>ul h4{
	font-size: 18px;
	font-size: 1.8rem;
	line-height: 18px;
	font-weight: bolder;
	color: #cc33cc;
	margin: 0 0 16px 0;	
}
.cmnt1{
	top: 60px;
	right: 0px;
	background:url(../img/comment/frame1.png) 0 0 no-repeat;
}
.cmnt2{
	top: 140px;
	left: 300px;
	background:url(../img/comment/frame2.png) 0 0 no-repeat;
}
.cmnt3{
	top: 60px;
	left: 0px;
	background:url(../img/comment/frame1.png) 0 0 no-repeat;
}

/*--------------------------------
special
--------------------------------*/
#special li{
	float: left;
	margin: 16px 32px 0 0;
}
#special li:nth-child(2n){ margin: 16px 0 0 0; }