@charset "utf-8";

/*CSS Information ===========================
 name:           top.css
 description:    properties for index.html
 Editors:        Tomoki Kitano 
 Last Editors:   Tomoki Kitano
========================================== */

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	background-color: #000000;
	font-size:10px;
}

#scroll_on{
	position: fixed;
	right:0px;
	bottom:30px;
	width: 35px;
	margin: 0px;
	padding: 0px;
	background:#000;
}

#bg01 { 
	width:100%;
	background: url(../../information/about/img/bg1.png);
}

#bg02 {
	width:100%;
	background: url(../../information/about/img/bg2.jpg);
}

#bg03 {
	width:100%;
	background: url(../../information/about/img/bg3.png) repeat-y left;
}

#bg04 {
	width:100%;
	background: url(../../information/about/img/bg4.png) repeat-y right;
}

#cont_bg{
	width:1500px;
	margin:0px auto;
}

div#modal {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index:999;
}

div#modal div.background {
	position: absolute;
	width: 100%;
	height: 2100px;
	background-color: #000000;
	opacity: 0.85;
	filter: alpha(opacity=85);
	-ms-filter: "alpha(opacity=85)";
}

div#modal div.container {
	position: relative;
	padding:0px;
	width: 940px;
	height: 520px;
	border:#666 solid 1px;
	background: #000;
}


.loading {
     position: fixed;/*ˆÊ’u‚ðŒÅ’è*/
     top: 300px;/*�‚’¼ˆÊ’u’†‰›*/
     left: 50%;/*�…•½ˆÊ’u’†‰›*/
     width: 100px;
     height: 100px;
     text-align: center;
     color: #000;
     font-family: verdana;
     font-size: 12px;
}


#content {
	width:998px;
	margin:0px auto 0px auto;
	padding:0px;
	border-left:#262626 1px solid;
	border-right:#262626 1px solid;
}

#intro {
	width:998px;
	height:383px;
	margin:0px;
	padding:0px;
	background:url(../../information/about/img/about_int.jpg) no-repeat;
}

#intro_cont {
	background:url(../../information/about/img/about_int_title.png) no-repeat right top;
	float:right;
	height:213px;
	margin:0px;
	padding:170px 20px 0px 0px;
	text-align:right;
}

#story {
	width:998px;
	height:382px;
	margin:0px;
	padding:0px;
	background:url(../../information/about/img/about_story_img.jpg) no-repeat top right;
}

#story_cont {
	background:url(../../information/about/img/about_story_title.png) no-repeat left top;
	float:left;
	height:237px;
	margin:0px;
	padding:145px 0px 0px 25px;
	text-align:right;
}

#cast {
	width:998px;
	height:402px;
	margin:0px;
	padding:0px;
}

#cast ul.list01 li {
	list-style:none;
	float:left;
	margin:-11px 0px 0px 0px;
	padding:0px;
}

#cast ul.list02 li {
	list-style:none;
	float:left;
	margin:0px 0px 0px 0px;
	padding:0px;
}

#staff {
	width:998px;
	height:381px;
	margin:0px;
	padding:0px;
	background:url(../../information/about/img/about_staff.jpg) no-repeat top right;
}

#staff_cont {
	background:url(../../information/about/img/about_staff_title.png) no-repeat left top;
	float:left;
	height:291px;
	margin:0px;
	padding-top:90px;
}

#staff_btn {
	margin-left:50px;
	padding:0px;
	float:left;
}

#staff_btn p {
	margin-bottom:20px;
	padding:0px;
}

#production {
	width:998px;
	height:384px;
	margin:0px;
	padding:0px;
	background:url(../../information/about/img/about_pro.jpg) no-repeat;
}

#production_btn {
	margin:0px;
	padding:105px 0px 0px 20px;
}

#production li {
	list-style:none;
	float:left;
	margin:0px 16px 16px 0px;
	padding:0px;
}


.float_clear {
	clear:both;
}

#fox_ex{
	width:500px;
	height:31px;
	margin:20px auto;
}

#footer_line {
	width:100%;
	height:1px;
	background-image:url(../../information/img/footer_line.gif);
	background-repeat:repeat-x;
}

#fox_ex li {
	float: left;
	list-style-type: none;
}

#fox_logo{
	width:44px;
	height:31px;
	margin-right:10px;
}

#fox_txt{
	font-size: 10px;
	color: #808080;
	line-height: 14px;
}

#contentfooter {
	height: 80px;
	width: 1000px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	clear: both;
}

div.scrollholder
{
    position: relative;
    width: 300px; height: 200px;
    overflow: auto;
    z-index: 1;
    background-color: #f3f3f3;
}

div.scroll
{
    position: absolute;
    left: 0; top: 0;
    width: 95%;
    z-index: 2;
}

/* <Scroll> */
div.track
{
    position: relative;
    float:right;
    top: 0; 
    width: 11px; height: 100%;
    font-size: 0;
    z-index: 3;
    background: black;
}

div.drag_bar
{
    position: absolute;
    width: 100%; height: 14px;
    cursor: pointer;
    z-index: 4;
    background: yellow;
}  


/*modal*/

body{
	font-family:Arial, Helvetica, sans-serif;
	background:#000;
}

#close{
	float:right;
	margin:12px 25px 0px 0px;
	padding:0px;
}
#title{
	height:43px;
	margin:0px;
	padding:0px;
}

#h1{
	float:left;
	padding:0px;
}

#cont_img{
	float:left;
	margin:9px 0px 0px 25px;
	padding:0px;
}

#cont_text{
	float:right;
	margin:9px 26px 0px 0px;
	width:480px;
	height:441px;
	font-size:12px;
	font-family: "‚l‚r ƒSƒVƒbƒN", "MS Gothic", "Osaka�|“™•�", Osaka-mono, monospace;
	line-height:25px;
	letter-spacing:1px;
	color:#FFF;
	overflow-x : hidden ;
}

#cont_text2{
	float:right;
	margin:9px 26px 0px 0px;
	width:466px;
	height:441px;
	font-size:12px;
	font-family: "‚l‚r ƒSƒVƒbƒN", "MS Gothic", "Osaka�|“™•�", Osaka-mono, monospace;
	line-height:25px;
	letter-spacing:1px;
	color:#FFF;
}

#text_area{
	margin-right:20px;
}

#text_area2{
	margin-top:15px;
}

.text_bold{
	color:#45dd95;
	font-weight:bold;
}

/* scrollbar*/
#pane1 { width:466px; height:441px; top:0; right:0;}
* + html #pane1 { width:466px;}
.jScrollPaneTrack {position: absolute; height: 100%; right: 0; top: 0; cursor: pointer; background: url(../../information/about/img/scroll_line.gif) repeat-y;}
.jScrollPaneDrag { width:12px; height:60px; position:relative; background:url(../../information/about/img/scroll_drug.gif) no-repeat; }
.jScrollPaneDrag .jScrollPaneDragTop,
.jScrollPaneDrag .jScrollPaneDragBottom { display:none;}

.jScrollPaneContainer { position:relative; top:0px; left:0; overflow:hidden;}