/*--------------------------------
header
--------------------------------*/
header{
	width: 100%;
	height: 640px;
	background:url(../img/top/bg_header.png) 0 0 repeat-x;
}
#header_inner{
	position: relative;
	width: 1024px;
	height: 640px;
	margin: 0 auto;
}
#header_inner #main{
	position: absolute;
	top: 0px;
	left: -48px;
	width: 521px;
	height: 640px;
	background: url(../img/top/main.png) 0 0 no-repeat;
}
#header_inner #title{
	position: absolute;
	top: 80px;
	right: -35px;
}
#header_release{
	position: absolute;
	top: 345px;
	right: 60px;
}
#header_inner #btn_tw{
	position: absolute;
	top: 532px;
	left: 480px;
}

/*-------- sns --------------------*/
#sns_share{
	position: absolute;
	z-index: 9999;
	top: 545px;
	left: 616px;
	line-height: 20px;
	width: 400px;
}
#sns_share li{
	float: left;
	margin: 0 8px 0 0;
}
#sns_share li.fb{
	width: 130px;
	overflow: visible;
}
#sns_share li.tw{
	width: 75px;
}
#sns_share li.line{
	width: 82px;
}

/*--------------------------------
nav
--------------------------------*/
.fixed{
  position: fixed;
  z-index: 9999;
  top: 0px;
  left: 0px;
}
#nav_wrap{
	width: 100%;
	height: 96px;
	margin: 0 auto;
	background: url(../img/common/lace1.png) 0 40px repeat-x;
}
#nav{
	width: 1024px;
	height: 48px;
	margin: 0 auto;
}
.bg_dots{ background: url(../img/common/bg_dots2.gif) 0 10px repeat; }
#nav li a{
	float: left;
	display: block;
	height: 48px;
	margin: 0;
	white-space: nowrap;
	text-indent: 100%;
	overflow: hidden;
}
#nav .nav1_jump a{
	width: 70px;
	background: url(../img/common/nav.png) 0 0 no-repeat;
}
#nav .nav2_jump a{
	width: 130px;
	background: url(../img/common/nav.png) -70px 0 no-repeat;
}
#nav .nav3_jump a{
	width: 152px;
	background: url(../img/common/nav.png) -200px 0 no-repeat;
}
#nav .nav4_jump a{
	width: 210px;
	background: url(../img/common/nav.png) -352px 0 no-repeat;
}
#nav .nav5_jump a{
	width: 130px;
	background: url(../img/common/nav.png) -562px 0 no-repeat;
}
#nav .nav6_jump a{
	width: 130px;
	background: url(../img/common/nav.png) -692px 0 no-repeat;
}
#nav .nav7_jump a{
	width: 202px;
	background: url(../img/common/nav.png) -822px 0 no-repeat;
}

#nav .nav1_jump a:hover{	background: url(../img/common/nav.png) 0 -48px no-repeat; }
#nav .nav2_jump a:hover{	background: url(../img/common/nav.png) -70px -48px no-repeat; }
#nav .nav3_jump a:hover{	background: url(../img/common/nav.png) -200px -48px no-repeat; }
#nav .nav4_jump a:hover{	background: url(../img/common/nav.png) -352px -48px no-repeat; }
#nav .nav5_jump a:hover{	background: url(../img/common/nav.png) -562px -48px no-repeat; }
#nav .nav6_jump a:hover{	background: url(../img/common/nav.png) -692px -48px no-repeat; }
#nav .nav7_jump a:hover{	background: url(../img/common/nav.png) -822px -48px no-repeat; }

/*--------------------------------
section
--------------------------------*/
#wrap{
	position: relative;
	z-index: 0;
	width: 100%;
	background: url(../img/common/bg_dots2.gif) 0 0 repeat;
}
#trailer,
#product,
#intro,
#story,
#chart,
#cast{
	position: relative;
	width: 100%;
	padding: 0;
}
#product,
#story,
#cast{ background: url(../img/common/bg_dots1.gif) 0 0 repeat }

#trailer,
#intro,
#chart{ background: url(../img/common/bg_dots2.gif) 0 0 repeat }

.lace1{
	width: 100%;
	height: 48px;
	background:url(../img/common/lace1.png) 0 0 repeat-x;	
}
.lace2{
	width: 100%;
	height: 48px;
	background:url(../img/common/lace2.png) 0 0 repeat-x;	
}

.content{
	position: relative;
	width: 1024px;
	margin: -60px auto 0 auto;
	padding: 96px 0 80px 0;
}
#trailer .content{ margin: 0 auto !important; }
.content h2{ margin: 0 0 32px 0; }

/*--------------------------------
trailer
--------------------------------*/
#trailer ul li{
	float: left;
	width: 464px;
}
#trailer ul li:first-child{ margin: 0 64px 0 0; }
#trailer h3{ margin: 0 0 6px 0; }

/*--------------------------------
product
--------------------------------*/
.sell{
	position: relative;
	width: 1024px;
	height: 563px;
	padding: 87px 0 0 0;
	background: url(../img/product/bg_sell.png) 0 0 no-repeat;
	}
.sell>ul{
	position: relative;
	width: 960px;
	height: 506px;
	margin: 0 auto;
}
.sell>ul>li{
	position: relative;
	float: left;
	width: 196px;
	height: 474px;
	margin: 0 0 0 16px;
	padding: 16px;
}
.sell>ul>li:first-child{
	margin: 0;
	background: url(../img/product/box1.png) 0 0 no-repeat;
}
.sell>ul>*:first-child+*{ background: url(../img/product/box2.png) 0 0 no-repeat; }
.sell>ul>*:first-child+*+*{ background: url(../img/product/box3.png) 0 0 no-repeat; }
.sell>ul>*:first-child+*+*+*{ background: url(../img/product/box4.png) 0 0 no-repeat; }

.sell>ul>li:first-child{
	margin: 0;
	background: url(../img/product/box1.png) 0 0 no-repeat;
}
.sell>ul>li:nth-child(2){ background: url(../img/product/box2.png) 0 0 no-repeat; }
.sell>ul>li:nth-child(3){ background: url(../img/product/box3.png) 0 0 no-repeat; }
.sell>ul>li:nth-child(4){ background: url(../img/product/box4.png) 0 0 no-repeat; }

.sell>ul>li .btn_shop a{
	position: absolute;
	bottom: 16px;
	left: 16px;
	width: 196px;
	height: 48px;
	white-space: nowrap;
	text-indent: 100%;
	overflow: hidden;
	background: url(../img/product/btn_shop.gif) 0 0 no-repeat;
}
.sell>ul>li .btn_shop a:hover{ background: url(../img/product/btn_shop.gif) 0 -48px no-repeat; }


.rental{
	position: relative;
	width: 1024px;
	height: 385px;
	margin: 40px 0 0 0;
	padding: 87px 0 0 0;
	background: url(../img/product/bg_rental.png) 0 0 no-repeat;	
}
.rental>ul{
	position: relative;
	width: 700px;
	height: 309px;
	margin: 16px auto;
}
.rental .tsutaya{
	position: absolute;
	top: 72px;
	right: 16px;
}


#product .spec{
	position: absolute;
	width: 1024px;
	left: 0px;
	bottom: 24px;
	text-align: center;
	color: #ff8294;
}

/*--------------------------------
intro
--------------------------------*/
#intro .sum li{
	position: relative;
	z-index: 210;
	float: left;
	margin: 64px 0 0 0;
}
#intro .sum *:first-child+*,
#intro .sum *:first-child+*+*+* { float: right !important; }
#intro .sum li:nth-child(2n){ float: right !important; }

#intro .sum li:first-child{ margin:0; }

#intro .ph li{
	position: absolute;
	z-index: 0;
}
#intro .ph1{
	top: 80px;
	right: -80px;
}
#intro .ph2{
	top: 520px;
	left: -40px;
}
#intro .ph3{
	top: 780px;
	right: -72px;
}
#intro .ph4{
	bottom: 48px;
	left: -48px;
}