@charset "UTF-8";


#mainArea h3{
margin-bottom: 12px;
font-size: 18px;
font-weight: bold;
}

/* - LAYOUT - 
--------------------------------------------------------------*/
html{
overflow-x: hidden;
}
div#container{
width: 100%;
background: #000 url('/ex/ranse/common/images/bg_header.jpg') repeat-x 0 9px;
}
div#header{
position: relative;
width: 940px;
height: 100px;
margin: 0 auto;
overflow: hidden;
}
div#contentWrap{
width: 100%;
}
div#contentWrap div.bgSquare{
width: 100%;
background: url('/ex/ranse/common/images/bg_square.png') repeat center top;
}
div#contentWrap div.bgSquare div.bgSquareInner{
background: url('/ex/ranse/common/images/bg_square_top.png') repeat-x center top;
}
div#contentWrap div.bgSquare div.bgSquareInner02{
background: url('/ex/ranse/common/images/bg_square_btm.png') repeat-x center bottom;
}

div#contentsArea{
width: 948px;
margin-bottom: 25px;
padding-bottom: 85px;
background: url('/ex/ranse/common/images/bg_cont_btm.png') no-repeat left bottom;
}
div#contentsArea div.inner{
width: 100%;
padding-top: 70px;
background: url('/ex/ranse/common/images/bg_cont_top.png') no-repeat left top;
}
div#contentsArea div.inner02{
width: 100%;
background: url('/ex/ranse/common/images/bg_cont_mid.png') repeat-y left top;
}
div#contentWrap div#mainArea{
width: 640px;
margin: 0 auto -40px;
padding: 0;
color: #111;
}
div.footer{
width: 940px;
margin: 0 auto;
padding-top: 18px;
background: #000 url('/ex/ranse/common/images/bg_ftr_glbl.gif') no-repeat 0 0;
}

#story div#contentWrap div#mainArea,
#movie div#contentWrap div#mainArea,
#news div#contentWrap div#mainArea,
#product div#contentWrap div#mainArea,
#episode div#contentWrap div#mainArea{
margin-left: 154px;
margin-right: 154px;
}

/* 2 Column */
#outline #contentsArea #mainArea{
float: right;
margin-right: 50px;
display: inline;
}
#outline #contentsArea #side{
float: right;
width: 167px;
margin-right: 20px;
display: inline;
}


.showSmt{
display: none;
}

/* -HOME HEADER- 
--------------------------------------------------------------*/
/*#header h1{
width: 179px;
height: 100px;
float: left;
}
#header h1 a.haribotekit{
width: 179px;
height: 100px;
}
#header h1 a.haribotekit span.panel{
background: url('/ex/ranse/common/images/logo.png') no-repeat left top;
}
#header div#sound{
position: absolute;
top: 77px;
left: 856px;
width: 82px;
text-align: center;
}
#header div#sound a.btnSp{
position: absolute;
top: 0;
left: 0;
padding: 1px 0;
width: 82px;
height: 14px;
z-index: 100;
}*/

/* gnav */
#header ul#gnav{
float: right;
width: 745px;
height: 67px;
background: url('/ex/ranse/common/images/gnav.jpg') no-repeat 0 1px;
}
#header ul#gnav li{
float: left;
width: 119px;
margin-left: 4px;
display: inline;
}
#header ul#gnav li#gn01{
width: 121px;
}
#header ul#gnav li#gn03,
#header ul#gnav li#gn05{
width: 120px;
}

#header ul#gnav li a{
display: block;
height: 67px;
text-indent: -9999px;
overflow: hidden;
}
/* current */
#outline #header ul#gnav li#gn01 a,
#header ul#gnav li#gn01 a:hover{
background: url('/ex/ranse/common/images/gnav.jpg') no-repeat -4px -99px;
}
#story #header ul#gnav li#gn02 a,
#header ul#gnav li#gn02 a:hover{
background: url('/ex/ranse/common/images/gnav.jpg') no-repeat -129px -99px;
}
#character #header ul#gnav li#gn03 a,
#header ul#gnav li#gn03 a:hover{
background: url('/ex/ranse/common/images/gnav.jpg') no-repeat -252px -99px;
}
#episode #header ul#gnav li#gn05 a,
#header ul#gnav li#gn05 a:hover{
background: url('/ex/ranse/common/images/gnav.jpg') no-repeat -376px -99px;
}
#news #header ul#gnav li#gn06 a,
#header ul#gnav li#gn06 a:hover{
background: url('/ex/ranse/common/images/gnav.jpg') no-repeat -500px -99px;
}

/* 商品情報 */
#header p.gotoProduct{
float: right;
width: 75px;
padding-top: 7px;
text-align: right;
}
#header p.gotoProduct a{
padding: 0 0 3px 18px;
color: #FFF;
background: url(/ex/ranse/images/icn_wh_r.png) no-repeat 0 0;
}



/* - CONTENT - 
--------------------------------------------------------------*/
#mainArea h1.h1{
margin-top: -20px;
letter-spacing:0;
}
#mainArea h1.h1.haribotekit{
height: 56px;
}


/* - FOOTER - 
--------------------------------------------------------------*/
div.footer{
	padding-bottom:17px;
}
div.footer div.cr{
float: left;
width: 555px;
padding-top: 10px;
color: #CCC;
font-size: 85%;
display: inline;
}
div.footer div.cr p{
margin-bottom: 10px;
}
div.footer div.cr span.txtsound{
display: none;
}

div.footer div.sentence{
float: left;
width: 195px;
padding-top: 7px;
display: inline;
}
div.footer div.company{
float: left;
width: 190px;
padding-top: 13px;
display: inline;
}

div.footer div.company ul li{
margin-bottom: 8px;
}
div.footer div.inquiry_footer.haribotekit{
color: #CCC;
font-size: 85%;
width:622px;
height:103px;
}
div.footer div.inquiry_footer.haribotekit span.panel{
background:url(/ex/ranse/common/images/txt_inquiry_footer.gif) no-repeat left top;
}


/* - COMMON - 
--------------------------------------------------------------*/
/* LOGO */
#header p#logo{
width: 179px;
height: 100px;
float: left;
}
#header p#logo a.haribotekit{
width: 179px;
height: 100px;
}
#header p#logo a.haribotekit span.panel{
background:  url('/ex/ranse/common/images/logo.png') no-repeat left top;
}

/* share button in header */
.shareBtn{
width: 390px;
padding: 2px 0 0;
margin: 0 0 0 250px;
position: relative;
left: 0;
top: -30px;
}
.shareBtn .btns{
text-align:right;
}
.shareBtn .btns li{
display:inline-block;
/display:inline;
vertical-align:middle;
}

/* breadcrumb */
div#contentWrap div.breadcrumb{
height: 32px;
background:  url('/ex/ranse/images/bg_bill_btm.jpg') repeat-x center top;
}
div#contentWrap div.breadcrumb ul{
width: 940px;
margin: 0 auto;
padding-top: 7px;
}
div#contentWrap div.breadcrumb ul li{
float: left;
margin-right: 3px;
display: inline;
}
div#contentWrap div.breadcrumb ul li a{
color: #FFF;
}

/* pageUpBtm */
div#contentWrap p#pageUpBtm{
width: 936px;
margin: 0 auto;
padding-bottom: 20px;
text-align: right;
}
div#contentWrap p#pageUpBtm a{
color: #000;
padding: 2px 0 2px 18px;
background:  url('/ex/ranse/common/images/icn_arw_pageup.png') no-repeat 0 2px;
}
div#contentWrap p#pageUpBtm a:hover{
color: #666;
text-decoration: none;
}


/* - NEWS - 
--------------------------------------------------------------*/
#news h1.h1{
margin: -20px 0 0 0;
}
#news h1.h1.haribotekit span.panel{
background:  url('/ex/ranse/news/images/ttl.gif') no-repeat left top;
}
/* news item */
#news div.section{
padding: 20px 0;
background: url('/ex/ranse/news/images/img_bar_gray.gif') no-repeat left bottom;
}
#news div.section p.date{
margin-bottom: 0.5em;
padding-bottom: 0;
color: #999;
}


/* - PRODUCT - 
--------------------------------------------------------------*/
#product h1.h1.haribotekit span.panel{
background:  url('/ex/ranse/product/images/ttl.gif') no-repeat left top;
}
#product h2.gameTtl{
margin-bottom: 15px;
font-size: 16px;
}
#product dl.productDetail{
margin-bottom: 10px;
}
#product dl.productDetail dt{
float: left;
width: 98px;
padding: 7px 0;
}
#product dl.productDetail dd{
padding: 7px 0 7px 103px;
border-bottom: 1px dotted #CCC;
}

/* - OUTLINE - 
--------------------------------------------------------------*/
/* title */
#outline h1.h1.haribotekit span.panel.h1_01{
background:  url('/ex/ranse/outline/images/ttl_01.gif') no-repeat left top;
}
#outline h1.h1.haribotekit span.panel.h1_02{
background:  url('/ex/ranse/outline/images/ttl_02.gif') no-repeat left top;
}
#outline h1.h1.haribotekit span.panel.h1_03{
background:  url('/ex/ranse/outline/images/ttl_03.gif') no-repeat left top;
}
#outline h1.h1.haribotekit span.panel.h1_04{
background:  url('/ex/ranse/outline/images/ttl_04.gif') no-repeat left top;
}
#outline h1.h1.haribotekit span.panel.h1_05{
background:  url('/ex/ranse/outline/images/ttl_05.gif') no-repeat left top;
}
#outline h1.h1.haribotekit span.panel.h1_06{
background:  url('/ex/ranse/outline/images/ttl_06.gif') no-repeat left top;
}
#outline h1.h1.haribotekit span.panel.h1_07{
background:  url('/ex/ranse/outline/images/ttl_07.gif') no-repeat left top;
}
#outline h1.h1.haribotekit span.panel.h1_08{
background:  url('/ex/ranse/outline/images/ttl_08.gif') no-repeat left top;
}
#outline h1.h1.haribotekit span.panel.h1_09{
background:  url('/ex/ranse/outline/images/ttl_09.gif') no-repeat left top;
}
#outline h1.h1.haribotekit span.panel.h1_10{
background:  url('/ex/ranse/outline/images/ttl_10.gif') no-repeat left top;
}


/* lnav */
#outline #side ul#lnav{
width: 167px;
height: 729px;
background:  url('/ex/ranse/outline/images/lnav.png') no-repeat left top;
}
#outline #side ul#lnav li{
margin-bottom: 11px;
}
#outline #side ul#lnav li a.haribotekit{
display: block;
height: 63px;
}
#outline #side ul#lnav li#ln01 a.haribotekit span.panel{
background: url('/ex/ranse/outline/images/lnav.png') no-repeat left top;
}
#outline #side ul#lnav li#ln02 a.haribotekit span.panel{
background: url('/ex/ranse/outline/images/lnav.png') no-repeat 0 -74px;
}
#outline #side ul#lnav li#ln03 a.haribotekit span.panel{
background: url('/ex/ranse/outline/images/lnav.png') no-repeat 0 -148px;
}
#outline #side ul#lnav li#ln04 a.haribotekit span.panel{
background: url('/ex/ranse/outline/images/lnav.png') no-repeat 0 -222px;
}
#outline #side ul#lnav li#ln05 a.haribotekit span.panel{
background: url('/ex/ranse/outline/images/lnav.png') no-repeat 0 -296px;
}
#outline #side ul#lnav li#ln06 a.haribotekit span.panel{
background: url('/ex/ranse/outline/images/lnav.png') no-repeat 0 -370px;
}
#outline #side ul#lnav li#ln07 a.haribotekit span.panel{
background: url('/ex/ranse/outline/images/lnav.png') no-repeat 0 -444px;
}
#outline #side ul#lnav li#ln08 a.haribotekit span.panel{
background: url('/ex/ranse/outline/images/lnav.png') no-repeat 0 -518px;
}
#outline #side ul#lnav li#ln09 a.haribotekit span.panel{
background: url('/ex/ranse/outline/images/lnav.png') no-repeat 0 -592px;
}
#outline #side ul#lnav li#ln10 a.haribotekit span.panel{
background: url('/ex/ranse/outline/images/lnav.png') no-repeat 0 -666px;
}

#outline #side ul#lnav li#ln01 a:hover span.panel,
#outline.index #side ul#lnav li#ln01 a span.panel{
background-position: -190px 0;
}
#outline #side ul#lnav li#ln02 a:hover span.panel,
#outline.ikusa #side ul#lnav li#ln02 a span.panel{
background-position: -190px -74px;
}
#outline #side ul#lnav li#ln03 a:hover span.panel,
#outline.tsushin #side ul#lnav li#ln03 a span.panel{
background-position: -190px -148px;
}
#outline #side ul#lnav li#ln04 a:hover span.panel,
#outline.bastlink #side ul#lnav li#ln04 a span.panel{
background-position: -190px -222px;
}
#outline #side ul#lnav li#ln05 a:hover span.panel,
#outline.shinka #side ul#lnav li#ln05 a span.panel{
background-position: -190px -296px;
}
#outline #side ul#lnav li#ln06 a:hover span.panel,
#outline.densetsu #side ul#lnav li#ln06 a span.panel{
background-position: -190px -370px;
}
#outline #side ul#lnav li#ln07 a:hover span.panel,
#outline.busho_story #side ul#lnav li#ln07 a span.panel{
background-position: -190px -444px;
}
#outline #side ul#lnav li#ln08 a:hover span.panel,
#outline.asobikata #side ul#lnav li#ln08 a span.panel{
background-position: -190px -518px;
}
#outline #side ul#lnav li#ln09 a:hover span.panel,
#outline.pass #side ul#lnav li#ln09 a span.panel{
background-position: -190px -592px;
}
#outline #side ul#lnav li#ln10 a:hover span.panel,
#outline.busho #side ul#lnav li#ln10 a span.panel{
background-position: -190px -666px;
}


/* fnav */
#outline #content div.fnav{
margin-bottom: 20px;
}
#outline #content div.fnav ul li.prev{
width: 300px;
float: left;
}
#outline #content div.fnav ul li.prev a{
padding: 3px 0 4px 22px;
display: block;
background: url(/ex/ranse/common/images/icn_arw_l.png) no-repeat 0 0;
}
#outline #content div.fnav ul li.next{
width: 300px;
float: right;
text-align: right;
}
#outline #content div.fnav ul li.next a{
padding: 3px 0 4px 22px;
background: url(/ex/ranse/common/images/icn_arw_r.png) no-repeat 0 0;
}

/* catch up box */
#mainArea div.catchUp{
/* padding: 0 0 4px; */
/* background: url("../images/attention/lv3_btm.gif") no-repeat left bottom; */
border: 1px solid #DDD;
}
#mainArea div.catchUp div.btm{
padding: 10px 10px 0;
/* background: url("../images/attention/lv3_top.gif") no-repeat left top; */
}
#mainArea div.catchUp .twoColumn{
    width:610px;
    margin-bottom:1em;
}
#mainArea div.catchUp .twoColumn div.left{
    width:290px;
    float:left;
}
#mainArea div.catchUp .twoColumn div.right{
    width:290px;
    float:right;
}


/* - MOVIE - 
--------------------------------------------------------------*/
/* title */
#movie h1.h1.haribotekit span.panel{
background:  url('/ex/ranse/movie/images/ttl.gif') no-repeat left top;
}
/* bgSquare */
#movie div.bgSquare{
position: relative;
}
/*
Modal Panel
*/
#movie div.bgSquare #modalBase{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 469px;
display:none;
z-index:900;
background:#000;
filter:alpha(opacity=80) !important;
-moz-opacity:0.8;
-khtml-opacity:0.8;
opacity:0.8;
}
#movie div.bgSquare #modalCont{
display: none;
position: absolute;
width: 810px;
height: 440px;
top: 20px;
z-index:1000;
}
#movie div.bgSquare #modalCont #closeBtn{
position: absolute;
right: 5px;
top: 0;
width: 47px;
height: 47px;
cursor: pointer;
}
#movie div.bgSquare #modalCont #include{
position: absolute;
right: 25px;
top: 10px;
width: 736px;
height: 390px;
padding: 10px;
border: 1px solid #666;
}
/* movie */
#movie div.bgSquare #modalCont #include .movWrap{
padding-top: 20px;
text-align: center;
}


/* - STORY - 
--------------------------------------------------------------*/
#story h1.h1.haribotekit span.panel{
background:  url('/ex/ranse/story/images/ttl.gif') no-repeat left top;
}


/* - EPISODE - 
--------------------------------------------------------------*/
body.episode h1.h1.haribotekit span.panel{
background:  url('/ex/ranse/episode/images/ttl.gif') no-repeat left top;
}
/* episode uketori */
body.uketori h1.h1.haribotekit span.panel{
background:  url('/ex/ranse/episode/images/ttl_uketori.gif') no-repeat left top;
}

/* episode item */
#episode div.line{
padding-bottom:20px;
background: url('/ex/ranse/episode/images/img_bar_gray.gif') no-repeat left bottom;
}