@charset "shift_jis";

/* css framework(HOME Only) ++++++++++++++++++++++++++++++++++++++++++++

index.html(HOME)
	|-- n8_idx.css				(/css/  - this file)
	|		|--n8_hdft.css		(/common/css/ - header footer)
	|		|--n8_navi.css		(/common/css/ - global menu, local menu)
	|
	|-- n8_print.css			(/css/ - print)

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* TOC +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

00: reset and basic elements
01: basic page layout
02: header (component only! as for detail "see n8_hdft.css") 
03: global navigation(component only! as for detail "see n8_navi.css")
04: local navigation(only component! as for detail "see n8_navi.css")
05: recommendation w/ bnr
06: update info. w/ bnr
07: common usage and generality( clearFix etc)
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* font-size adjustment ++++++++++++++++++++++++++++++++++++++++++++++++

[10px by default]

1. outside of "div.pgCts" area
font-size is equivalent to 10px by default
+---------------+----------------
|  change to..	| setting number
+---------------+----------------
|	12px		|	120%
|	14px		|	140%
|	10px		|	no needed
+---------------+----------------

2. within "div.pgCts" area 
font-size is equivalent to 12px by default
+---------------+----------------
|  change to..	| setting number
+---------------+----------------
|	14px		|	117%
|	16px		|	133%
|	10px		|	83%
+---------------+----------------
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */


@import url("../common/css/n8_hdft.css");
@import url("../common/css/n8_navi.css");



/* 00 reset and basic elements(add elements anytime if necessary)
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

div,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,table,tr,td,span,a,img,hr{ margin:0;padding:0;border:none;}

body{
width:100%;
margin:0;
padding:0;
background-color:#e8e8e8;
color:#444;
line-height:1;
text-align:center;
}

body{ font-size: 62.5%; /* IE */ }
html>/**/body{ font-size: 10px; /* Except IE */ }


a:link{ 	color:#0f78d7;text-decoration:underline; }
a:visited { color:#784078;text-decoration:underline }
a:active { 	color:#C00;text-decoration:none}
a:hover { 	color:#C00;text-decoration:none}

#noneJSIdx{
display:block;
margin:0 auto;
padding:10px 0;
text-align:center;
font-size:120%;
line-height:1.333;
color:#c00;
}

/* 01 index page layout
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.idxPgShdw{
width:800px;
margin:0 auto;
padding:0 6px;
background:url(../common/images/n8_pg_shdw.jpg) repeat-y center top;
}

.idxPgWrap{
width:800px;
padding-top:6px;
background:url(../common/images/n8_hd_line.jpg) no-repeat left top;
text-align:left;
}

.idxLayout{
width:770px;
padding:0 15px 14px 15px;
background:url(../common/images/n8_pg_layout.jpg) no-repeat left top;
font-size:120%;
line-height:1.333;
}

.idxLayout:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

.idxLayout{ display:inline-block; }

/* Hide from IE-mac \*/
*html .idxLayout{ height:1%;}
.idxLayout{ display:block;}
/* End hide form IE-mac */


/* 02 header elemnts(framework only)
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.hd{
width:770px;
padding:9px 15px 12px 15px;
font-size:0;
line-height:0;
background:url(../top_images/n8_top_hd_bg.jpg) no-repeat left bottom;
}


/* 03 global navigation(framework only)
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.gnavi{
clear:both;
list-style:none;
font-size:0;
line-height:0;
}


/* 04 local navigation(framework only)
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.lnavi{
float:right;
width:180px;
}


/* 05 commendation 
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

span.topImg{
display:block;
font-size:0;
line-height:0;
}

.recBox{
width:770px;
padding-top:15px;
background:url(../top_images/n8_top_recbg.jpg) no-repeat left top;
}

.recBoxMain{
float:left;
width:575px;
padding-bottom:16px;
}

.recUnitSet{
width:575px;
}

.recUnit{
width:266px;
padding:9px 11px 0 10px;
float:left;
}

.recUnit h3{ margin-bottom:11px; }

.recUnit span.thumbNail{
display:block;
width:80px;
float:left;
}

.recUnit dl{ padding-left:95px; }

.recUnit dt{
padding-bottom:5px;
font-weight:bold;
line-height:1.25;
}

.recUnit dd span{
display:block;
padding:7px;
text-align:right;
font-size:0;
line-height:0;
}

.recBoxBnr{
float:right;
width:180px;
}

.recBoxBnr ul{
width:166px;
padding:0 7px;
list-style:none;
background:url(../top_images/n8_lm_bnr_ft.gif) no-repeat left bottom;
}

.recBoxBnr li{
padding-bottom:4px;
}


/* 06 update info. 
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.updateBox{
width:770px;
}

.updateBoxMain{
float:left;
width:575px;
}

.updateBoxMain table{
width:575px;
margin-top:11px;
border-collapse:collapse;
border:0;
border-spacing:0;
empty-cell:show;
}



.updateBoxMain table a:link{ 	color:#0f78d7;text-decoration:none; }
.updateBoxMain table a:visited { color:#784078;text-decoration:none; }
.updateBoxMain table a:active { 	color:#C00;text-decoration:none;}
.updateBoxMain table a:hover { 	color:#C00;text-decoration:none;}



.updateBoxMain table th{
padding:0 9px 0 10px;
border:0;
font-weight:normal;
vertical-align:top
}

.updateBoxMain table td{
padding:0 0 6px 5px;
border:0;
background-color:#FFF;
vertical-align:top
}

.updateBoxMain table td span{
margin-top:1px;
white-space:nowrap;
}

.updateBoxMain table td span img{ margin-right:3px; }

.updateBoxMain ul{
width:555px;
margin:0 10px;
padding-top:6px;
border-top:1px solid #d3d4ce;
list-style:none;
}

.updateBoxMain ul li{ display:inline; }
.updateBoxMain ul li img{ margin-right:12px; }

.updateBoxBnr{
float:right;
width:180px;
list-style:none;
font-size:0;
line-height:0;
}

.updateBoxBnr img{ margin-bottom:10px; }


/* 07 common usage and generality
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

hr{
clear:both;
font-size:0;
line-height:0;
_display:none;
visibility:hidden;
}

*:first-child+html hr{ display:none; }


.clrFlt:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

.clrFlt{ display:inline-block; }

/* Hide from IE-mac \*/
*html .clrFlt{ height:1%;}
.clrFlt{ display:block;}
/* End hide form IE-mac */

h1 {
	margin-bottom: 8px;
}