@charset "Shift_JIS";

/*=========================================================

	Site Name   SONY AMC Light Stories
	File Name   style.css

==========================================================*/


/* Import Style
-----------------------------------------------------*/
@import "./base.css";


/* Reset Style
-----------------------------------------------------*/
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,form,fieldset,legend,pre,blockquote {margin:0px;padding:0px;}
ul,li {list-style:none;}
table {border:0px;}
img {margin:0px;padding:0px;border:0px;}


/* Base Style
-----------------------------------------------------*/
html,body {
	height:100%;
}

body {
	background-color:#000000;
	line-height:1;
	font-family:'ƒqƒ‰ƒMƒmŠpƒS Pro W3','Hiragino Kaku Gothic Pro','‚l‚r ‚oƒSƒVƒbƒN','MS P Gothic',sans-serif;
	text-align: center;
	color:#bbbbbb;
}


#Pagetop {
	position:relative;
	width:100%;
	height:100%;
	min-height: 100%;
}

body > #Pagetop {
	height: auto;
}

#Container {
	padding-bottom: 27px;
	margin:0 auto;
	text-align:left;
}

a {
	outline:none;
}


/* Common Style
-----------------------------------------------------*/
/* -- Header -- */
#Header {
	text-align:left;
}

#Header h1,
#Header h2 {
	display:inline;
}

/* -- Footer -- */
#Footer {
	width:100%;
	position:absolute;
	left:0;
	bottom:0;
	padding:8px 0;
	border-top:1px solid #333333;
}

#Footer .picture {
	position:absolute;
	top:-20px;
	right:0;
	font-size:65%;
	padding-right:15px;
}

/* -- Aside --*/
#Aside {
	position:absolute;
	right:17px;
	width:118px;
}


/* Index Style
-----------------------------------------------------*/
#Pagetop .index {
	margin-top:0;
	width:740px;
}

#Pagetop .index h3 {
	margin-top:0;
	margin-left:10px;
	width:740px;
}

#Pagetop .index ul.nav {
	margin-top:24px;
}

#Pagetop .index ul.nav li {
	float:left;
	text-indent:-9999px;
	height:116px;
}

#Pagetop .index ul.nav li a {
	display:block;
	text-indent:-9999px;
	height:114px;
}

#Pagetop .index ul.nav li.ep01,
#Pagetop .index ul.nav li.ep01 a {
	margin-right:49px;
	_margin-right:24px;
	width:146px;
	background:url(../../images/index_ep01.gif) no-repeat left top;
}

#Pagetop .index ul.nav li.ep02,
#Pagetop .index ul.nav li.ep02 a {
	margin-right:47px;
	_margin-right:23px;
	width:149px;
	background:url(../../images/index_ep02.gif) no-repeat left top;
}

#Pagetop .index ul.nav li.ep03,
#Pagetop .index ul.nav li.ep03 a {
	margin-right:44px;
	_margin-right:22px;
	width:149px;
	background:url(../../images/index_ep03.gif) no-repeat left top;
}

#Pagetop .index ul.nav li.ep04,
#Pagetop .index ul.nav li.ep04 a {
	width:149px;
	background:url(../../images/index_ep04.gif) no-repeat left top;
}

#Pagetop .index ul.nav li.ep01 a:hover {background:url(../../images/index_ep01_on.gif) no-repeat left top;}
#Pagetop .index ul.nav li.ep02 a:hover {background:url(../../images/index_ep02_on.gif) no-repeat left top;}
#Pagetop .index ul.nav li.ep03 a:hover {background:url(../../images/index_ep03_on.gif) no-repeat left top;}
#Pagetop .index ul.nav li.ep04 a:hover {background:url(../../images/index_ep04_on.gif) no-repeat left top;}


#Pagetop .index ul.product {
	margin-top:58px;
	text-align:center;
}

#Pagetop .index ul.product li {
	display:inline;
	margin-right:5px;
}


/* Episode Style
-----------------------------------------------------*/
#Pagetop .episode {
	position:relative;
	width:770px;
	height:660px;
	text-align:left;
}

#Pagetop .episode .visual {
	width:740px;
}

#Pagetop .episode a.thickbox {
	display:block;
	width:105px;
	margin:0;
	position:relative;
}

#Pagetop .episode ul.arrow {
	position:absolute;
	top:560px;
	left:0;
	width:770px;
	text-align:left;
}

#Pagetop .episode ul.arrow li {
	position:absolute;
}

#Pagetop .episode ul.arrow li.back {
	top:20px;
	left:-10px;
}

#Pagetop .episode ul.arrow li.next {
	top:20px;
	right:-10px;
}

#Pagetop .episode ul.arrow li.next_top {
	top:20px;
	right:-40px;
}

#Pagetop .episode ul.arrow li a {
	display:block;
	width:34px;
	height:40px;
	text-indent:-9999px;
}

#Pagetop .episode ul.arrow li.next_top a {
	display:block;
	width:75px;
	height:40px;
	text-indent:-9999px;
	background:url(../images/next_top.gif) no-repeat left top;
}

#Pagetop .episode ul.arrow li.back a {background:url(../images/back.gif) no-repeat left top;}
#Pagetop .episode ul.arrow li.next a {background:url(../images/next.gif) no-repeat left top;}
#Pagetop .episode ul.arrow li.back a:hover {background:url(../images/back_on.gif) no-repeat left top;}
#Pagetop .episode ul.arrow li.next a:hover {background:url(../images/next_on.gif) no-repeat left top;}

#Pagetop .episode ul.arrow li.next_top a:hover {background:url(../images/next_top_on.gif) no-repeat left top;}


#Pagetop .episode ul.nav {
	position:absolute;
	top:560px;
	left:310px;
}

#Pagetop .episode ul.nav li {
	float:left;
}

#Pagetop .episode .title {
	position:absolute;
	top:620px;
	left:0;
	width:770px;
	text-align:center;
}
#Pagetop .episode .note_ab_zoom {
	position:absolute;
	top:540px;
	left:0;
	width:770px;
	text-align:center;
}

/* -- episode1 -- */
#Pagetop .episode a.ep1_3 {top:-50px;left:255px;}
#Pagetop .episode a.ep1_4 {top:-160px;left:0px;}
#Pagetop .episode a.ep1_7 {top:-62px;left:605px;}

/* -- episode2 -- */
#Pagetop .episode a.ep2_2 {top:3px;left:195px;}
#Pagetop .episode a.ep2_3 {top:3px;left:315px;}
#Pagetop .episode a.ep2_6 {top:3px;left:17px;}
#Pagetop .episode a.ep2_7 {top:-15px;left:440px;}

/* -- episode3 -- */
#Pagetop .episode a.ep3_2 {top:3px;left:233px;}
#Pagetop .episode a.ep3_4 {top:0px;left:185px;}
#Pagetop .episode a.ep3_8 {top:-20px;left:10px;}

/* -- episode4 -- */
#Pagetop .episode a.ep4_4 {top:-174px;left:140px;}
#Pagetop .episode a.ep4_5 {top:3px;left:12px;}
#Pagetop .episode a.ep4_7 {top:0px;left:443px;}
#Pagetop .episode a.ep4_8 {top:-12px;left:100px;}


/* Clearfix
----------------------------------------------------------*/
#Pagetop .index ul.nav,
#Pagetop .index ul.product,
#Pagetop .episode ul.nav {
	zoom:1;
}

#Pagetop .index ul.nav:after,
#Pagetop .index ul.product:after,
#Pagetop .episode ul.nav:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}