@charset "utf-8";	

body {
	position:relative;
	width:100%;
	/* Firefox */
	background: -moz-linear-gradient(top center, #d0b0ea 0%, #8652af 100%);
	/* Chrom と Safari */
	background: -webkit-gradient(linear, center top, center bottom, from(#d0b0ea), to(#8652af));
	/* IE10+ */
	background: linear-gradient(to bottom, #d0b0ea 0%, #8652af 100%);
	/* 共通 */
	background: linear-gradient(top center, #d0b0ea 0%, #8652af 100%);
}

/*IE8背景*/
.ie8 body {
	background-color:#d0b0ea;
}


#bg_shine {
	width:100%;
	position:relative;
	height:100%;
	background:url(../img/common/bg.png) center top repeat-y;
}

h2 {
	position:relative;
	z-index:1;
	padding-left:10px;
}


/*--------------------------------
header
--------------------------------*/
header{
	position: relative;
	width: 100%;
	height: 720px;
	background: url(../img/header/main_bg.jpg) center top no-repeat;
}

.header_inner{
	position: relative;
	width: 1024px;
	height: 720px;
	margin: 0 auto;
}

.title {
	position:absolute;
	bottom:0px;
	right:10px;
	visibility: hidden;
}

.lead {
	text-align:center;
	padding-top:10px;
	visibility: hidden;
}

.release {
	position:absolute;
	right:-15px;
	bottom:170px;
	visibility: hidden;
}

.release a {
	width:162px;
	height:165px;
	display: block;
	text-indent: -9999px;
	overflow: hidden;
	background:url(../img/header/release.png) 0 0 no-repeat;
}

.release a:hover {
	background:url(../img/header/release.png) 0 -165px no-repeat;
}

/*ヘッダー背景の光のアニメーション*/
#shine .shine01 {
	position:absolute;
	top:5px;
	left:50px;
}

/*IE8用*/
.ie8 #shine .shine01 {
	position:absolute;
	top:20px;
	left:50px;
}

#shine .shine02 {
	position:absolute;
	right:50px;
	top:100px;
}

#shine .shine03 {
	position:absolute;
	bottom:100px;
	left:10px
}

#shine .shine04 {
	position:absolute;
	top:300px;
	right:100px
}

#shine .shine05 {
	position:absolute;
	top:50px;
	right:10px
}

#shine .shine06 {
	position:absolute;
	top:50px;
	right:10px
}

#shine .shine07 {
	position:absolute;
	top:150px;
	left:10px;
}

#shine .shine08 {
	position:absolute;
	bottom:50px;
	right:10px;
}

#shine .shine09 {
	position:absolute;
	bottom:100px;
	right:-20px;
}

#shine .shine01 {
	animation: horizontal1 1s ease-in-out infinite alternate;
	animation-duration: 10s;
    -webkit-animation: horizontal1 1s ease-in-out infinite alternate;
	-webkit-animation-duration: 10s;
}
#shine .shine02 {
	animation: horizontal2 1s ease-in-out infinite alternate;
	animation-duration: 20s;
    -webkit-animation: horizontal2 1s ease-in-out infinite alternate;
	-webkit-animation-duration: 20s;
}
#shine .shine03 {
	animation: horizontal3 1s ease-in-out infinite alternate;
	animation-duration: 30s;
    -webkit-animation: horizontal3 1s ease-in-out infinite alternate;
	-webkit-animation-duration: 30s;
}

#shine .shine04 {
	animation: horizontal1 1s ease-in-out infinite alternate;
	animation-duration: 10s;
    -webkit-animation: horizontal1 1s ease-in-out infinite alternate;
	-webkit-animation-duration: 10s;
}

#shine .shine05 {
	animation: horizontal1 1s ease-in-out infinite alternate;
	animation-duration: 10s;
    -webkit-animation: horizontal1 1s ease-in-out infinite alternate;
	-webkit-animation-duration: 10s;
}

#shine .shine06 {
	animation: horizontal2 1s ease-in-out infinite alternate;
	animation-duration: 10s;
    -webkit-animation: horizontal2 1s ease-in-out infinite alternate;
	-webkit-animation-duration: 10s;
}

#shine .shine07 {
	animation: horizontal4 1s ease-in-out infinite alternate;
	animation-duration: 10s;
    -webkit-animation: horizontal4 1s ease-in-out infinite alternate;
	-webkit-animation-duration: 10s;
}

#shine .shine08 {
	animation: horizontal5 1s ease-in-out infinite alternate;
	animation-duration: 25s;
    -webkit-animation: horizontal5 1s ease-in-out infinite alternate;
	-webkit-animation-duration: 25s;
}

#shine .shine09 {
	animation: horizontal4 1s ease-in-out infinite alternate;
	animation-duration: 25s;
    -webkit-animation: horizontal4 1s ease-in-out infinite alternate;
	-webkit-animation-duration: 25s;
}

@keyframes horizontal1 {
    0% { transform:translateX( -100px); }
  100% { transform:translateY(  50px); }
}

@-webkit-keyframes horizontal1 {
    0% { -webkit-transform:translateX( -100px); }
  100% { -webkit-transform:translateY(  50px); }
}

@keyframes horizontal2 {
    0% { transform:translateX(  40px); }
  100% { transform:translateY(  120px); }
}

@-webkit-keyframes horizontal2 {
    0% { -webkit-transform:translateX(  40px); }
  100% { -webkit-transform:translateY(  120px); }
}

@keyframes horizontal3 {
    0% { transform:translateY(  100px); }
   50% { transform:translateX(  200px); }
   80% { transform:translateX(  -80px); }
  100% { transform:translateY(  50px); }
}

@-webkit-keyframes horizontal3 {
    0% { -webkit-transform:translateY(  100px); }
   50% { -webkit-transform:translateX(  200px); }
   80% { -webkit-transform:translateX(  -80px); }
  100% { -webkit-transform:translateY(  50px); }
}

@keyframes horizontal4 {
    0% { transform:translateX(  10px); }
   50% { transform:translateY(  80px); }
  100% { transform:translateX(  -80px); }
}

@-webkit-keyframes horizontal4 {
    0% { -webkit-transform:translateX(  10px); }
   50% { -webkit-transform:translateY(  80px); }
  100% { -webkit-transform:translateX(  -80px); }
}

@keyframes horizontal5 {
    0% { transform:translateX(  10px); }
   50% { transform:translateY(  -80px); }
  100% { transform:translateX(  80px); }
}

@-webkit-keyframes horizontal5 {
    0% { -webkit-transform:translateX(  10px); }
   50% { -webkit-transform:translateY(  -80px); }
  100% { -webkit-transform:translateX(  80px); }
}




/*-------- sns --------------------*/
#sns_share{
	position: absolute;
	bottom: 15px;
	right: 10px;
	line-height: 20px;
	width: 280px;
	z-index: 100;
}
#sns_share li{
	float: left;
}
#sns_share li#facebook{
	width: 162px;
	overflow: visible;
}
#sns_share li#twitter{
	width: 116px;
}


/*--------------------------------
nav
--------------------------------*/

#nav{
	width:100%;
	background:#FFF;
	position:relative;
	z-index:2;
	margin-bottom:50px;
}

#nav_wrap {
	width:1024px;
	height:58px;
	display:block;
	margin:0 auto;
	position:relative;
}
	

#nav #trailer_jump a{
	top: 0;
	left: 0;
	position: absolute;
	display: block;
	width: 170px;
	height: 58px;
	background: url(../img/header/nav.png) 0 0 no-repeat;
	text-indent: -9999px;
	overflow: hidden;
}

#nav #trailer_jump a:hover{
	background: url(../img/header/nav.png) 0 -58px no-repeat;
}


#nav #products_jump a{
	top:0;
	left:170px;
	position:absolute;
	display: block;
	width:200px;
	height:58px;
	background: url(../img/header/nav.png) -170px 0 no-repeat;
	text-indent: -9999px;
	overflow: hidden;
}

#nav #products_jump a:hover{
	background: url(../img/header/nav.png) -170px -58px no-repeat;
}

#nav #intro_jump a{
	top:0;
	left:370px;
	position:absolute;
	display: block;
	width:260px;
	height:58px;
	background: url(../img/header/nav.png) -370px 0 no-repeat;
	text-indent: -9999px;
	overflow: hidden;
}

#nav #intro_jump a:hover{
	background: url(../img/header/nav.png) -370px -58px no-repeat;
}

#nav #story_jump a{
	top:0;
	left:630px;
	position:absolute;
	display: block;
	width:150px;
	height:58px;
	background: url(../img/header/nav.png) -630px 0 no-repeat;
	text-indent: -9999px;
	overflow: hidden;
}

#nav #story_jump a:hover{
	background: url(../img/header/nav.png) -630px -58px no-repeat;
}

#nav #cast_jump a{
	top:0;
	left:780px;
	position:absolute;
	display: block;
	width:250px;
	height:58px;
	background: url(../img/header/nav.png) -780px 0 no-repeat;
	text-indent: -9999px;
	overflow: hidden;
}

#nav #cast_jump a:hover{
	background: url(../img/header/nav.png) -780px -58px no-repeat;
}

/*--------------------------------
wrap
--------------------------------*/
#wrap {
	width: 1024px;
	margin: 0 auto;
}

/*--------------------------------
trailer
--------------------------------*/

#trailer_top {
	margin-bottom:60px;
	padding-top:70px;
	margin-top:-70px;
	position:relative;
}

#trailer_top .bg {
	background:url(../img/trailer/bg_trailer.png) 0 0 no-repeat;
	width:1025px;
	height:340px;
	margin-top:-10px;
}

#trailer_top .container {
	padding:50px 25px 0;
}

#trailer{
    width:427px;
	height:250px;
	position:absolute;
	bottom:50px;
	left:298px;
}


/*--------------------------------
products
--------------------------------*/
#products_top {
	margin-bottom:60px;
	margin-top:-70px;
	padding-top:70px;
	position:relative;
}

#products_top .bg {
	background:url(../img/products/bg_products.png) 0 0 no-repeat;
	width:1025px;
	height:1398px;
	margin-top:-10px;
}

#products_top .container {
	margin:0 auto;
	padding-top:60px;
}

#products_top h3 {
	margin-left:100px;
}

#products_top .sell-container {
	width:790px;
	margin:30px auto 100px;
}

#products_top .sell-box {
	margin:10px 20px 0 0;
	float:left;
	text-align:center;
	width:250px;
}

#products_top .sell-box-R {
	margin-top:10px;
	float:left;
	text-align:center;
	width:250px;
}


#products_top .btn {
	width:220px;
	margin:30px auto 0;	
}

#products_top .btn a {
	width:220px;
	height:45px;
	display: block;
	text-indent: -9999px;
	overflow: hidden;
	background:url(../img/products/btn.png) 0 0 no-repeat;
}

#products_top .btn a:hover {
	background:url(../img/products/btn.png) 0 -45px no-repeat;
}

#products_top .sell-txt {
	font-size:10px;
	text-align:right;
}

.rental-box {
	margin:35px auto 0;
	width:780px;
}

.rental-jk {
	float:left;
}

.rental-txt {
	float:left;
	margin:20px 0 0 35px;
}

/*--------------------------------
intro
--------------------------------*/
#intro_top {
	margin-bottom:60px;
	padding-top:70px;
	margin-top:-70px;
	position:relative;
}

#intro_top .bg {
	background:url(../img/intro/bg_intro.png) 0 0 no-repeat;
	width:1025px;
	height:1201px;
	margin-top:-10px;
}

#intro_top .container {
	padding:65px 60px 0;
}

.intro01 {
	float:left;
}

#intro_top h3 {
	margin-bottom:20px;
	position:relative;
	z-index:2;
}

#intro_top .txt01 {
	width:430px;
	margin-bottom:50px;
}

.intro02 {
	float:right;
}

#intro_top .txt02 {
	width:515px;
	margin-bottom:60px;
}

.intro03 {
	float:left;
	width:615px;
}

#intro_top .txt03 {
	width:360px;
	margin-bottom:45px;
	float:right;
}

.intro04 {
	float:left;
	width:360px;
	margin-left:250px;
}

#intro_top .txt04 {
	width:360px;
	margin-bottom:20px;
	float:right;
}

#intro_top .p01 {
	position:absolute;
	right:300px;
	top:300px;
	z-index:2;
	visibility: hidden;
}

#intro_top .p02 {
	position:absolute;
	right:40px;
	top:160px;
	z-index:1;
	visibility: hidden;
}

#intro_top .p03 {
	position:absolute;
	left:220px;
	top:550px;
	z-index:2;
	visibility: hidden;
}

#intro_top .p04 {
	position:absolute;
	left:60px;
	top:450px;
	z-index:1;
	visibility: hidden;
}

#intro_top .p05 {
	position:absolute;
	left:60px;
	top:850px;
	z-index:1;
	visibility: hidden;
}

#intro_top .p06 {
	position:absolute;
	left:60px;
	top:1080px;
	z-index:1;
	visibility: hidden;
}

#intro_top .hiraoka {
	position:absolute;
	right:20px;
	bottom:13px;
	z-index:1;
	filter: inherit;
}

#slide {
	width:368px;
	height:633px;
	margin:0 auto;
	position:relative;
}

#slide img {
	position:absolute;
	left:0;
	top:0;
}

/*--------------------------------
story
--------------------------------*/
#story_top {
	margin-bottom:60px;
	margin-top:-70px;
	padding-top:70px;
	position:relative;
}

#story_top .bg {
	background:url(../img/story/bg_story.png) 0 0 no-repeat;
	width:1025px;
	height:721px;
	margin-top:-20px;
}

#story_top .container {
	padding:40px 50px 0 37px;
}

.strory-txt {
	width:625px;
	float:right;
	margin-bottom:25px;
}

#story_top h3 {
	margin-bottom:15px;
	text-align:center;
}

#story_top .p01 {
	position:absolute;
	top:530px;
	left:60px;
	z-index:3;
	visibility: hidden;
}

#story_top .p02 {
	position:absolute;
	top:340px;
	left:60px;
	z-index:2;
	visibility: hidden;
}

#story_top .p03 {
	position:absolute;
	top:160px;
	left:60px;
	z-index:1;
	visibility: hidden;
}

#story_top .txt {
	float:right;
	width:625px;
}

/*--------------------------------
cast_staff
--------------------------------*/
#cast_staff_top {
	margin-bottom:60px;
	margin-top:-70px;
	padding-top:70px;
	position:relative;
}

#cast_staff_top .bg {
	background:url(../img/cast/bg_cast.png) 0 0 no-repeat;
	width:1025px;
	height:824px;
	margin-top:-10px;
}

#cast_staff_top .container {
	padding-top:20px;
}

.soukanzu {
	margin-top:20px;
	text-align:center;
}

#cast_staff_top .txt {
	position:absolute;
	bottom:70px;
	left:80px;
}

/*--------------------------------
footer
--------------------------------*/
footer {
	margin:0;
	padding:0;
	background:#FFFFFF;
	width:100%;
	height:100%;
}

#footer_inner {
	position:relative;
	width:1024px;
	margin:130px auto 0;
	overflow:hidden;
}

footer .copyright{
	padding: 30px 0;
	font-size: 10px;
	line-height: 20px;
	text-align: center;
	color: #000;
}