@charset "utf-8";

/* >>> CSS Contents : START <<< ---------------------------

/common/css/common.css

>>> Table of Contents :
   01. Common
   02. Layout
   03. headNav
   04. sideNav
   05. footerNav
   06. Other Common Settings

Last Updata: 090511

-- >>> CSS Contents : END <<< --------------------------- */

@import url("contents.css");


/* 00. Reset
================================================== */

body,div,pre,p,blockquote,form,fieldset,
input,textarea,select,option,
dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
table,th,td,embed,object {
    margin:0;
	padding:0;
	vertical-align:baseline;}
table,th,td {border:none;}
fieldset,img {border:0;}
li {list-style:none;}

table { /* add 20090519 */
    border-collapse:collapse;
}

/* 01. Common
================================================== */
body {
    font-size:80%;
	line-height:1.7;
	font-family:Arial,"Meiryo", "Osaka－等幅", "ＭＳ ゴシック",sans-serif;
	background-color:#F5F5F5;
	color:#333333;}

/* 01-1 Text
---------------------------------------- */
p {margin:8px 0;}

/* txtCaution */
/* caption */
.caption {
    font-size:85%;
	color:#666666;}
/* txtStrike */

/* 01-2 Hypertext
---------------------------------------- */
a:link,a:visited,a:active {
    color:navy;
	text-decoration: underline;}
a:hover {
    color:#666666;
	text-decoration:none;}

/* 01-3 Heading
---------------------------------------- */
h1,h2,h3,h4,h5,h6 {clear:both;}
/* Normal */
h1 {font-size:180%; font-weight:bold; margin-top:0;}
h2 {font-size:160%; font-weight:bold; margin-top:15px;}
h3 {font-size:130%; font-weight:bold; margin-top:15px;}
h4 {font-size:110%; font-weight:bold; margin-top:15px;}
h5 {font-size:110%; font-weight:bold; margin-top:15px;}
h6 {font-size:100%; font-weight:bold; margin-top:15px;}


/* 1.3 Margin
---------------------------------------- */
/* all */
.mgn0A {margin:0 auto;}
/* top */
.mgnT10 {margin-top:10px;}
.mgnT20 {margin-top:20px;}
.mgnT30 {margin-top:30px;}
/* right */
.mgnR10 {margin-right:10px;}
.mgnR20 {margin-right:20px;}
.mgnR30 {margin-right:30px;}
/* bottom */
.mgnB10 {margin-bottom:10px;}
.mgnB20 {margin-bottom:20px;}
.mgnB30 {margin-bottom:30px;}
/* left */
.mgnL10 {margin-left:10px;}
.mgnL20 {margin-left:20px;}
.mgnL30 {margin-left:30px;}
/* top-bottom */
.mgnTB10 {margin-top:10px; margin-bottom:10px;}
.mgnTB20 {margin-top:20px; margin-bottom:20px;}
.mgnTB30 {margin-top:30px; margin-bottom:30px;}
/* right-left */
.mgnLR10 {margin-left:10px; margin-right:10px;}
.mgnLR20 {margin-left:20px; margin-right:20px;}
.mgnLR30 {margin-left:30px; margin-right:30px;}

/* 1.3 Padding
---------------------------------------- */
/* all */
.pd10 {padding:10px;}
.pd20 {padding:20px;}
.pd30 {padding:30px;}
/* top */
.pdT10 {padding-top:10px;}
.pdT20 {padding-top:20px;}
.pdT30 {padding-top:30px;}
/* right */
.pdR10 {padding-right:10px;}
.pdR20 {padding-right:20px;}
.pdR30 {padding-right:30px;}
/* bottom */
.pdB10 {padding-bottom:10px;}
.pdB20 {padding-bottom:20px;}
.pdB30 {padding-bottom:30px;}
/* left */
.pdL10 {padding-left:10px;}
.pdL20 {padding-left:20px;}
.pdL30 {padding-left:30px;}
.pL110 {padding-left:110px;}
/* top-bottom */
/* right-left */

/* 1.3 List style
---------------------------------------- */
/* disc(default) */
ul, ol {margin-left:10px;}
li {
    list-style:disc;
	margin-left:15px;}

/* 1.3 Others
---------------------------------------- */
/* float */
.right {float:right;}
.left {float:left;}
.right02 {float:right; text-align:right;}

/* text-align */
.alignC {text-align:center;}
.alignR {text-align:right;}
.alignL {text-align:left;}

/* clearfix */
.clear {
    display:inline-block;
	clear:both;}
.clear:after {
    content: ".";
	display: block;
	height: 0;
	visibility: hidden;
	clear: both;}

/* width(%) */
.w10per {width:10%;}
.w20per {width:20%;}
.w30per {width:30%;}
.w40per {width:40%;}
.w50per {width:50%;}
.w60per {width:60%;}
.w70per {width:70%;}
.w80per {width:80%;}
.w90per {width:90%;}
.w100per {width:100%;}



/* 02. Layout
================================================== */
/* 02-1 Containers
---------------------------------------- */
#page {
    width:980px;
	height:100%;
	text-align:left;
	margin:0 auto;
	background:#666666;}
#areaHeader {
	width:980px;
	background:url(../img/header/h_bg.gif) no-repeat;
	line-height:0;}
#areaBody {
    width:980px;
	padding:15px 0 20px 0;
	background:url(../img/body/body_bg.gif) repeat-y;}
#areaFooter {
    width:980px;
	bottom:0;
	padding:0 0 60px;
	color:#F4F4F4;
	background:url(../img/footer/f_bg.gif) repeat-y;}

/* clearfix */
#areaHeader, #areaBody, #areaFooter {
    display:inline-block;}
#areaHeader:after,
#areaBody:after,
#areaFooter:after {
    content: ".";
	display: block;
	height: 0;
	visibility: hidden;
	clear: both;}

/* 02-2 Containers2
---------------------------------------- */
#sideNav {
    width:200px;
	float:left;
	margin:0 0 0 15px;
	display:inline;
	background:#FFFFFF;}
#contents {
    width:725px;
	float:left;
	margin:0 0 0 15px;
	background:#FFFFFF;}


/* 03. headNav
================================================== */
#areaHeader #headNav,
#areaHeader #headNav li {
    margin:0; padding:0;}
#areaHeader #headNav li {
    list-style:none;
	height:46px;
	background-repeat:no-repeat;
	float:left;}
#areaHeader #headNav li a {
    display:block;
	height:46px;
	border-bottom:none;}
#areaHeader #headNav li a:hover {
    background-color:transparent;}
#areaHeader #headNav li a:hover img {visibility:hidden;}

#areaHeader #headNav li.btn_01 {
    width:127px;
	background:url(../img/header/btn_head01_on.gif);}
#areaHeader #headNav li.btn_02 {
    width:170px;
	background:url(../img/header/btn_head02_on.gif);}
#areaHeader #headNav li.btn_03 {
    width:170px;
	background:url(../img/header/btn_head03_on.gif);}
#areaHeader #headNav li.btn_04 {
    width:170px;
	background:url(../img/header/btn_head04_on.gif);}
#areaHeader #headNav li.btn_05 {
    width:170px;
	background:url(../img/header/btn_head05_on.gif);}
#areaHeader #headNav li.btn_06 {
    width:173px;
	background:url(../img/header/btn_head06_on.gif);}


/* 04. sideNav
================================================== */
#sideNav .box_navi {
    background:url(../img/sidenav/sidenav_bg.gif) repeat-y;
	margin-bottom:10px;}

#sideNav #category {
    margin:0 0 10px 0; padding:0;}
#sideNav .genre a,
#sideNav .btn a:hover {
    font-weight:bold;
	color:#FFFFFF;
	display:block;
	text-decoration:underline;
}

/* 04-2 Navi_Open
---------------------------------------- */
#sideNav .genre {
	background-repeat:no-repeat;
	margin:0; padding:5px 5px 5px 30px;
	display:block;
}
#sideNav .genre a:hover {
	background-repeat:no-repeat;
	background-position:top left;
	display:block;
}


/* product icon */
#sideNav #genre_product {
    background-image:url(../img/sidenav/sidenav_product.gif);}
/* company icon */
#sideNav #genre_company {
    background-image:url(../img/sidenav/sidenav_company.gif);}
/* develop icon */
#sideNav #genre_develop {
    background-image:url(../img/sidenav/sidenav_develop.gif);}
/* service icon */
#sideNav #genre_service {
    background-image:url(../img/sidenav/sidenav_service.gif);}



/* 04-2 Navi_Close
---------------------------------------- */
/* Off */
#sideNav .btn {
    width:200px;
	height:36px;
	background:url(../img/sidenav/sidenav_ttl.gif) no-repeat top;
	margin:0; padding:0;
	margin-bottom:10px;
	display:block;
	text-decoration:none;
}
#sideNav .btn a {
	font-weight:bold;
	color:#5C5C5C;
	display:block;
	text-decoration:none;
}

#sideNav .btn:hover {
    width:200px;
	height:36px;
	background:url(../img/sidenav/sidenav_ttl.gif) no-repeat bottom;}

/* On */
#sideNav .btn_on {
    width:200px;
	height:36px;
	background:url(../img/sidenav/sidenav_ttl.gif) no-repeat bottom;}
#sideNav .btn_on a {
    font-weight:bold;
	color:#FFFFFF;
	display:block;
	text-decoration:none;
}
/* product icon */
#sideNav a.ico_product {
    background:url(../img/sidenav/ico_product.gif) no-repeat 8px 8px;
	padding:5px 5px 5px 28px;}
/* company icon */
#sideNav a.ico_develop {
    background:url(../img/sidenav/ico_develop.gif) no-repeat 8px 8px;
	padding:5px 5px 5px 28px;}
/* develop icon */
#sideNav a.ico_service {
    background:url(../img/sidenav/ico_service.gif) no-repeat 8px 8px;
	padding:5px 5px 5px 28px;}
/* service icon */
#sideNav a.ico_key {
    background:url(../img/sidenav/ico_key.gif) no-repeat 8px 8px;
	padding:5px 5px 5px 28px;}

#sideNav .btn .txtS,
#sideNav .btn_on .txtS {
    font-size:90%; padding-top:6px;}


/* 04-3 Navi_List
---------------------------------------- */
#sideNav .sideNav {
	margin:8px 8px 0 8px; padding:0 5px;}
#sideNav .sideNav li {
    list-style:none;
	background:url(../img/sidenav/ico_arr.gif) no-repeat 1px 6px;
	border-bottom:dotted 1px #CCCCCC;
	margin:0; padding:2px 0 2px 15px;}
#sideNav .sideNav li a {
    color:#333333;
    display:block;
}
#sideNav .sideNav li a:hover {
    color: blue;
}
#sideNav .sideNav li:hover {
	background:url(../img/sidenav/ico_arr.gif) no-repeat -199px 6px;
	border-bottom:dotted 1px #CCCCCC;
	margin:0; padding:2px 0 2px 15px;}
#sideNav .sideNav_s {
    font-size:90%;
	margin:0px 8px 8px; padding:0 5px 0 15px;}
#sideNav .sideNav_s li {
    list-style:none;
	border-bottom:dotted 1px #CCCCCC;
	margin:0; padding:2px 0 2px 15px;}
#sideNav .sideNav_s li a {
    color:#333333;
    display:block;
}
#sideNav .sideNav_s li a:hover {
    color: blue;
}



/* 05. footerNav
================================================== */
#areaFooter a {
    font-size:90%;
	color:#F4F4F4;
	text-decoration:underline;}
#areaFooter #footerNav {
    margin:10px 0 0 15px;}
#areaFooter #footerNav li {
    list-style:none;
	float:left;
	margin:0; padding:0;}
#areaFooter #copyright {
    font-weight:bold;
	font-size:90%;
	margin:10px 15px 0 0;}



/* 06. Other Common Settings
================================================== */
/* 06-1 topicPath
---------------------------------------- */
#topicPath {
    margin:5px 5px 10px 5px;
	text-align:right;
	font-size:85%;}
#topicPath li {
    display:inline;
	line-height:1.2;
	list-style-type:none;
	margin-left:0;}
#topicPath li a {
    padding-right:10px;
	background:url(../img/body/topicpath.gif) no-repeat right center;}

/* 06-2 toTop
---------------------------------------- */
.toTop {
	text-align:right;
	margin-top:20px;
	padding:3px 10px 3px 3px;
	font-size:90%; font-weight:bold;
	clear:both;}
.toTop02 {
	text-align:right;
	margin-top:50px;
	padding:3px 10px 3px 3px;
	font-size:90%; font-weight:bold;
	clear:both;}