@charset "UTF-8";

/* Imports
============================================================================== */
@import url("resets.css");
@import url("txt.css");
@import url("menu.css");

/* BODY
---------------------------------------------------- */
* {  }
body {
	overflow-x:hidden;
	background:#fff;
	}

/* BG
----------------------------------------------------- */
#index #container { background:#fff url(../images/top_bg.jpg) 50% 0 repeat-x;}	
#intro #container { background:url(../images/intro_bg.jpg) 50% 0 repeat-x;}		
#cast #container { background:url(../images/cast_bg.jpg) 50% 0 repeat-x;}		
#story #container { background:#013b8a url(../images/story_bg.jpg) 50% 0 repeat-x;}
#product #container { background:url(../images/dvd_bg.jpg) 50% 0 repeat-x;}	
#guide #container { background:#023b8a url(../images/guide_bg.jpg) 50% 0 repeat-x;}


#intro { background:url(../images/footer_bg.jpg) 50% bottom repeat-x;}		
#cast { background:url(../images/footer_bg.jpg) 50% bottom repeat-x;}		
#product { background:#f7dce4 url(../images/footer_bg2.jpg) 50% bottom repeat-x;}


/* BASE
----------------------------------------------------- */
#container { width:100%; padding-bottom:50px; }
#index #container{ padding-bottom:0; }
#contents{
	width:980px;
	position:relative;
	margin:0 auto;
	}
#menuBox{
	width:951px;
	height:54px;
	position:absolute;
	z-index:998;
	margin-left:50%;
	top:50px;
	left:-475px;
	background:url(../images/menu_bg.png) no-repeat;
	}
	#index #menuBox{ position:absolute; top:619px; left:13px; margin:0;}
#footer{
	width:100%;
	background:url(../images/footer_bg.png) 50% 0 repeat-x;
	position:relative;
	margin-top:-10px;
	padding:24px 0 20px 0;
	}
#logoSpace{
	width:100%;
	padding:0;
	text-align:center;
	}
#logos{
	position:absolute;
	top:-15px;
	left:18px;
	}

/* TOP PAGE
----------------------------------------------------- */
#index #contents{
	background: url(../images/top_main.png) 15px 40px no-repeat;
	height:1004px;
	}
#toptxt{
	display:none;
	}
#trailerBtn{
	position: absolute;
	top: 39px;
	left: 15px;
	width: 252px;
	height: 157px;
	background: url(../images/trailer.png) no-repeat;
	display:block;
	}
	#trailerBtn a{
		width:100%;
		height:100%;
		display:block;
		text-indent:-9999px;
		}
#trailerBtn2{
	position: absolute;
	top: 39px;
	left: 15px;
	width: 252px;
	height: 157px;
	background: url(../images/trailer2.png) no-repeat;
	display:block;
	text-indent:-9999px;
	}
	

#socialBookmark{
	position:absolute;
	width:310px;
	top:590px;
	height:30px;
	left:25px;
	z-index:999 !important;
	}
	.sB{
		float:left;
		width:100px;
		margin-bottom:5px;
		}
		#fb{ width:108px; }
		#tw{ width:112px;}
		#line { width:90px; }
#lineBox{
	position:absolute;
	left:25px;
	top:545px;
	}
#topCredit{
	width:980px;
	position:absolute;
	top:683px;
	left:15px;
	height:286px;
	position:relative;
	background:url(../images/top_credit.png) no-repeat;
	}
#newsBox{
	width:282px;
	height:228px;
	overflow-y:auto;
	overflow-x:hidden;
	position:absolute;
	padding-right:8px;
	top:40px;
	left:312px;
	font-size:93%;
	line-height:1.35em;
	}
	
	#newsBox li{
		letter-spacing:0.1em;
		padding:7px;
		background: #fff;  
		opacity: 0.8; 
		margin: 0 0 5px 0;
		}
		.date{ font-size:86%; color:#909316; letter-spacing:0em;}
#twitterBox{
	position:absolute;
	width:282px;
	top:38px;
	left:647px;
	}

#bannerArea{
	width:980px;
	text-align:center;
	margin:0 auto;
	padding:12px 0 10px 0;
	}
#bannerArea a img{ margin: 0 2px 2px 0; border:2px solid #f0d4f2; }
#bannerArea a:hover img{ border:2px solid #d6bfd7; }
#onair{
	width:154px;
	height:140px;
	background:url(../images/onair.png) no-repeat;
	position:absolute;
	top:220px;
	left:19px;
	/* top:272px; */
	/* left:39px; */
	}
#onair a{
	display:block;
	text-indent:-9999px;
	width:100%;
	height:100%;
	}
#comment{
	width:156px;
	height:123px;
	background:url(../images/comment.png) no-repeat;
	position:absolute;
	top:198px;
	left:202px;
	}
#comment a{
	display:block;
	text-indent:-9999px;
	width:100%;
	height:100%;
	}
#credit{
	width:100%;
	height:268px;
	background:url(../images/top_bg2.jpg) center top repeat-x;
	text-align:center;
	font-size:79%;
	line-height:1.3;
	padding-top:20px;
	margin-top:-40px;
	color:#8b727f;
	}

/* INTRO
----------------------------------------------------- */

#intro #contents{
	padding-top:105px;
	background:url(../images/intro_title.png) 412px 105px no-repeat;
	}
	
#intro #contents h1,#intro #contents h2,#intro #contents h3,#intro #contents h4,
#intro #contents h5,#intro #contents h6{ display:none; }

.introLeft{ width:475px; float:left; margin-left:15px; }
.introRight{ width:475px; float:right; margin-right:15px; }
#intro01{
	padding: 451px 0 0 490px;
	width:475px;
	position:relative;
	}
#intro02,#intro03,#intro04,#intro05{ width:475px; }
#intro01 p,#intro02 p,#intro03 p,#intro04 p,#intro05 p{ width:440px; padding: 98px 0 30px 22px; }
#intro01 p{ padding: 0px 0 30px 22px; }
#intro02{ background:url(../images/intro02.png) no-repeat; }
#intro03{ background:url(../images/intro03.png) no-repeat; }
#intro04{ background:url(../images/intro04.png) no-repeat; }
#intro05{ background:url(../images/intro05.png) no-repeat; }
#intro03 img, #intro04 img{ float:right; margin: 3px 0 12px 15px; }

#it001,#it002,#it003{ 
	width: 150px;
	height:110px;
	position:absolute;
	text-indent:-9999px;
	}
#it001 a,#it002 a,#it003 a{ 
	width: 100%;
	height:100%;
	display:block;
	}
#it001{
	top: 573px;
	left: 208px;
	background: url(../images/it001.png) no-repeat;
}
#it002{
	top: 397px;
	left: 327px;
	background: url(../images/it002.png) no-repeat;
}
#it003{
	top: 298px;
	left: 89px;
	background: url(../images/it003.png) no-repeat;
}


/* CAST
----------------------------------------------------- */
#cast h2{ 
	width:106px;
	height:31px;
	background:url(../images/cast_ti.gif) no-repeat;
	text-indent:-9999px;
	position:absolute;
	top:105px;
	right:30px;
	}
#cast #contents{
	padding:153px 15px 70px 15px;
	width:950px;
	}
#castContents{
	width:950px;
	height:735px;
	position:relative;
	background:url(../images/chart.jpg) no-repeat;
	}

	a#cast01Btn,a#cast02Btn,a#cast03Btn,a#cast04Btn,a#cast05Btn,a#cast06Btn,a#cast07Btn{
		position: absolute;
		width:40px;
		height:40px;
		display:block;
		text-indent:-9999px;
		background:url(../images/click.png) no-repeat; 
		}
	a#cast01Btn{
		top: 10px;
		left: 390px;
		}
	a#cast02Btn{
		top: 10px;
		left: 588px;
		}
	a#cast03Btn{
		top: 275px;
		left: 135px;
		}
	a#cast04Btn{
		top: 275px;
		left: 390px;
		}
	a#cast05Btn{
		top: 275px;
		left: 668px;
		}
	a#cast06Btn{
		top: 490px;
		left: 135px;
		}
	a#cast07Btn{
		top: 490px;
		left: 884px;
		}
#cast01 h3,#cast01 h4,
#cast02 h3,#cast02 h4,
#cast03 h3,#cast03 h4{ display:none; }
#cast01 p,#cast02 p,#cast03 p{
	position:absolute;
	top:329px;
	left:340px;
	width:450px;
}
#cast01{
	width:100%;
	height:100%;
	background:url(../images/cast01.jpg) no-repeat;
	position:absolute;
	top:0;
	left:0;
	}
#cast02{
	width:100%;
	height:100%;
	background:url(../images/cast02.jpg) no-repeat;
	position:absolute;
	top:0;
	left:0;
	}
#cast03{
	width:100%;
	height:100%;
	background:url(../images/cast03.jpg) no-repeat;
	position:absolute;
	top:0;
	left:0;
	}
#chartBtn{
	width:172px;
	height:47px;
	background:url(../images/gochart.jpg) no-repeat;
	position:absolute;
	text-indent:-9999px;
	top:490px;
	left:340px;
	}

/* STORY
----------------------------------------------------- */
#story h2{
	width:135px;
	height:30px;
	background:url(../images/story_ti.png) no-repeat;
	text-indent:-9999px;
	position:absolute;
	top:105px;
	right:28px;
	}
#story #contents{
	position:relative;
	}
	.story00 #contents{ height:880px; }
#storyContents{
	width:550px;
	height:438px;
	position:relative;
	padding:260px 0 0 38px;
	background:url(../images/story_cont_bg.png) 35px 172px no-repeat;
	}
.arasuji h4{
	width:100%;
	height:45px;
	background:url(../images/arasuji.png) center no-repeat;
	text-indent:-9999px;
	}
.arasuji p{
	font-size:108%;
	line-height:1.46;
	padding:10px 40px 10px 40px;
	}
.story002{ padding-right:50px; }
#kuganosho{
	position:absolute;
	top:527px;
	left:500px;
	}
	
#storyMenu {
	position:absolute;
	top:190px;
	left:77px;
	z-index:500 !important;
	}
#storyMenu li{
		width:156px;
		height:30px;
		text-indent:-9999px;
		float:left;
		}
		#storyMenu li a{
		width:100%;
		height:100%;
		background:url(../images/storymenu.png) no-repeat;
		text-indent:-9999px;
		display:block;
		}
		#storyMenu li#sm001 { width:95px; }
		#storyMenu li#sm002 { width:120px; }
		#storyMenu li#sm003 { width:120px; }
		#storyMenu li#sm004 { width:133px; }
		#storyMenu li#sm001 a{ background-position: 0 0px ; }
		#storyMenu li#sm002 a{ background-position: -95px 0px ; }
		#storyMenu li#sm003 a{ background-position: -215px 0px ; }
		#storyMenu li#sm004 a{ background-position: -335px 0px ; }
		#storyMenu li#sm001 a:hover{ background-position: 0 -30px ; }
		#storyMenu li#sm002 a:hover{ background-position: -95px -30px ; }
		#storyMenu li#sm003 a:hover{ background-position: -215px -30px ; }
		#storyMenu li#sm004 a:hover{ background-position: -335px -30px ; }
		#storyMenu li.current001{ background:url(../images/storymenu.png) no-repeat 0 -30px ; }
		#storyMenu li.current002{ background:url(../images/storymenu.png) no-repeat -95px -30px ; }
		#storyMenu li.current003{ background:url(../images/storymenu.png) no-repeat -215px -30px ; }
		#storyMenu li.current004{ background:url(../images/storymenu.png) no-repeat -335px -30px ; }
		#storyMenu li#sm001 a:active{ background:url(../images/storymenu.png) no-repeat 0 -60px ; }
		#storyMenu li#sm002 a:active{ background:url(../images/storymenu.png) no-repeat -95px -60px ; }
		#storyMenu li#sm003 a:active{ background:url(../images/storymenu.png) no-repeat -215px -60px ; }
		#storyMenu li#sm004 a:active{ background:url(../images/storymenu.png) no-repeat -335px -60px ; }
		

#storyContents ul{ position:absolute; width:280px; left: 170px; top:647px; }
#storyContents li{ width:35px; float:left; text-align:center;  }
#storyContents a{ display:block; }

.episodeBox{
	}
.episodeBox h3{
	color:#fb449f;
	height:45px;
	letter-spacing:0.3px;
	font-size:140%;
	text-align:center;
	}
.story{
	}
.epiImg{
	float:right;
	margin:4px 0 15px 15px;
	}
a.next-tab{
	width:34px;
	height:34px;
	background:url(../images/right.png) no-repeat;
	text-indent:-9999px;
	position:absolute;
	top:640px;
	right:85px;
	}
a.prev-tab{
	width:34px;
	height:34px;
	background:url(../images/left.png) no-repeat;
	position:absolute;
	text-indent:-9999px;
	top:640px;
	left:120px;
	}

/* PRODUCT
----------------------------------------------------- */
#product h2{
	width:252px;
	height:35px;
	background:url(../images/dvd_ti.png) no-repeat;
	text-indent:-9999px;
	position:absolute;
	top:105px;
	right:20px;
	}
#product #contents{
	padding:191px 15px 0 15px;
	width:950px;
	position:relative;
	}
#dvdbox01 h3, #dvdbox02 h3, #dvdbox03 h3{ display:none; }
#sellBtn{
	position:absolute;
	top:146px;
	right:130px;
	}
#rentBtn{
	position:absolute;
	top:146px;
	right:26px;
	}
#sellTitle{
	width:950px;
	height:54px;
	text-indent:-9999px;
	background:url(../images/sell_title.png) no-repeat;
	}
#sell{
	width:950px;
	background:url(../images/dvd_waku.png) repeat-y;
	}
#rentalBtn{
	position:absolute;
	top:10px;
	right:4px;
	}
#dvdbox01,#dvdbox02,#dvdbox03{
	width:890px;
	margin:0 20px 10px 20px;
	padding:397px 0 20px 20px;
	position:relative;
	background:url(../images/box01.jpg) 20px 0 no-repeat;
	border-bottom:1px dotted #eee;
	}

	#dvdbox01 p,#dvdbox02 p,#dvdbox03 p{
		margin-bottom:8px;
		}
	#bluray001,#dvd001,#bluray002,#dvd002,#bluray003,#dvd003{
		width:215px;
		float:left;
		padding:0 0 0 210px;
		line-height:1.3em;
		font-size:86%;
		}
	#bluray001,#bluray002,#bluray003{ width:230px; }
	#dvd001,#dvd002,#dvd003{ width:255px; padding:0 0 0 190px; }
	
#dvdbox02{ background:url(../images/box02.jpg) 20px 0 no-repeat; }
#dvdbox03{
	background:url(../images/box03.jpg) 20px 0 no-repeat;
	margin:0 20px 0px 20px;
	border-bottom:none;
	}
	
.pink{ color:#f73c90; }
.blue{ color:#3d53f8; }
#rental{
	width:950px;
	height:231px;
	background:url(../images/rental.png) no-repeat;
	position:relative;
	text-indent:-9999px;
	}

#dvdCredit{
	margin:20px auto 30px auto;
	width:100%;
	}
	#dvdCredit p{
		text-align:center;
		line-height:1.3em;
		font-size:76%;
		margin-bottom:8px;
		color:#755a69;
		}
		
/* GUIDE
----------------------------------------------------- */
#guide #contents{
	width:980px;
	padding-top:150px;
	}
	#guide #tabs{
		padding:221px 0 30px 0;
		background:url(../images/guide_title.png) no-repeat;
		}
	#tabs-1,#tabs-2,#tabs-3,#tabs-4{
		width:980px;
		height:550px;
		text-indent:-9999px;
		}
	#tabs-1{ background:url(../images/guide01.jpg) no-repeat; height:1030px;}
	#tabs-2{ background:url(../images/guide02.jpg) no-repeat;}
	#tabs-3{ background:url(../images/guide03.jpg) no-repeat;}
	#tabs-4{ background:url(../images/guide04.jpg) no-repeat;}