@charset "utf-8";

/* ------------------------------------
CSS Information

 Site URL:       http://www.work21.co.jp/
 File name:      common.css (http://www.work21.co.jp/css/common.css)
 Summary:        styles for common html
 Created:        2010-06-20
 Last update:    2010-06-20 by Work co.ltd,(Akira Motojima)
 Author:         Work co.ltd,(Akira Motojima)

Order of description

	- Search Key "__" + "id Name or Class Name"

 / __Default style clear
 / __container            (div#container)
 / __header               (div#header)
 / __header_menu          (div#header_menu)
 / __main                 (div#main)
 / __sub-menu             (div#sub-menu)
 / __contents             (div#contents)
 / __footer               (div#footer)

------------------------------------ */

/* -------------------------
 __Default style clear
-------------------------- */

* {
	margin: 0;
	padding: 0;
}

body {
	margin: 0px auto;
	background: #FFFFFF;
	font-size: 74.5%;
	font-family:'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック','MS UI Gothic',sans-serif;
	color: #666666;
	line-height: 1.6em;
}

p {
	margin: 0 0 1em;
}

li {
	list-style-type: none;
}

ol li {
	list-style-type: decimal;
}

img {
	border: 0;
}

/* 未訪のリンク */
:link {
	color: #666666;
}
/* 訪問済みのリンク */
:visited {
	color: #888888;
}
/* カーソルが上に乗っているリンク */
a:hover {
	color: #888888;
}


/* -------------------------
 __container
-------------------------- */

#container {
	width: 810px;
	margin: 0 auto;
	padding: 0 5px 10px 5px;
	margin-bottom: 20px;
	border: solid 1px #E5E5E6;
}


/* -------------------------
 __header
-------------------------- */

#header {
	width: 800px;
	height: 60px;
	margin: 0 auto;
	padding: 0;
	position: relative; /* for #header h1 { position: absolute;} */
	border-bottom: solid 5px #F36F21;
}

#header h1 {
	position: absolute;
		top: 10px;
		left: 0px;
		width: 100px;
		height: 40px;
	background: url("../img/header_bg.png") no-repeat;
}

#header h1 a {
	display: block;
		width: 100px;
		height: 40px;
	text-indent:-9999px;
	overflow: hidden; /* for text-indent:-9999px; Firefox リンクエリア制御 */
}

#header_info {
	float: right;
	height: 60px;
}

#header_info img {
	margin-top: 40px;
}

/* -------------------------
 __header_menu
-------------------------- */

#header_menu {
	width: 798px; /* 800 - border:1x2 = 798 = li:132x5 + boder(li-li):1x5 + li:133 */
	height: 49px;
	margin-top: 10px;
	margin: 10px auto 0 auto;
	border: solid 1px #E5E5E6;
	background-color: #E5E5E6;
}

#header_menu ul {
	list-style:none;
}

#header_menu ul li {
	float: left;
	display: inline;
	width: 132px;
	height: 49px;
}

#header_menu ul li#header_menu-contact {
	width: 133px;
}

#header_menu ul li a {
	display: block;
	height: 49px;
	text-indent: -9999px;
	overflow: hidden; /* text-indent:-9999px; Firefox リンクエリア制御*/
}

#header_menu-home {
	background: url(../img/header_menu-home.png) no-repeat;
}

#header_menu-features {
	margin-left: 1px;
	background: url(../img/header_menu-features.png) no-repeat;
}

#header_menu-service {
	margin-left: 1px;
	background: url(../img/header_menu-service.png) no-repeat;
}

#header_menu-release {
	margin-left: 1px;
	background: url(../img/header_menu-release.png) no-repeat;
}

#header_menu-company {
	margin-left: 1px;
	background: url(../img/header_menu-company.png) no-repeat;
}

#header_menu-contact {
	margin-left: 1px;
	background: url(../img/header_menu-contact.png) no-repeat;
}

#header_menu-home a:hover{
	background: url(../img/header_menu-home-on.png) no-repeat;
}

#header_menu-features a:hover{
	background: url(../img/header_menu-features-on.png) no-repeat;
}

#header_menu-service a:hover{
	background: url(../img/header_menu-service-on.png) no-repeat;
}

#header_menu-release a:hover{
	background: url(../img/header_menu-release-on.png) no-repeat;
}

#header_menu-company a:hover{
	background: url(../img/header_menu-company-on.png) no-repeat;
}

#header_menu-contact a:hover{
	background: url(../img/header_menu-contact-on.png) no-repeat;
}

/* -------------------------
 __main
-------------------------- */

#main {
	width: 800px;
	overflow: auto; /* height自動調節用 */
	margin: 10px auto 0 auto;
	background: url(../img/main-bg.png);
}

#main-left {
	float: left;
	width: 590px; /* 592 = 1 + 590 + 1 */
	border: solid 1px #E5E5E6;
	background-color: #FFFFFF;
}

#main-left a:link {
	color: #0091D0;
}

#main-left a:visited {
	color: #00B2FF;
}

#main-left a:hover {
	color: #00B2FF;
}

#main-left .topic_path {
	margin: 10px 0 15px 15px;
}

#main-left h2 {
	height: 24px;
	margin: 15px 17px;
	line-height: 24px;
	font-size: 18px;
	background: url(../img/root/main-left-h2-mark.png) no-repeat 0px 5px; /* 24 = 5 + img12 + 7 (センターより若干上) */
	text-indent: 15px;
}

#main-left h2.disable {
	display: none;
}

/* h3 テキストの場合 */
#main-left h3 {
	margin: 25px 17px 15px 17px;
}

/* h3 テキストの場合 */
#main-left h3.style2 {
	height: 41px;
	line-height: 45px; /* 本来41pxだがテキスト縦位置を若干下げるため */
	background: url(../img/root/main-left-h3-bg.png) no-repeat;
	text-indent: 10px;
}

/* h3 画像テキストの場合 追加css height:20px想定 */
#main-left h3.style2 img {
	margin-top: 12px; /* 若干下 */
}

#main-left h4 {
	margin: 5px 17px 15px 17px;
}

#main-left h5 {
	margin: 5px 17px 5px 17px;
	font-size: 1.2em;
	color: #EA8B4E;
}

#main-left h6 {
	margin: 5px 17px 15px 17px;
	font-size: 1.1em;
	color: #0091D0;
}

#main-left p {
	margin: 5px 17px 15px 17px;
}

#main-left p.center {
	text-align: center;
}

#main-left table {
	margin: 5px 10px 15px 20px;
	border: 0px;
}

#main-left table th {
	font-weight: normal;
	text-align: left;
	vertical-align: top;
	color: #0091D0;
}

#main-left table td {
	vertical-align: top;
}

#main-left ul {
	margin: 5px 10px 15px 20px;
}

#main-left ul span.under_navi_sub {
	font-size: 0.9em;
}

#main-left ol {
	margin: 5px 10px 15px 40px;
}

#main-left .emphasis {
	color: #EA8B4E;
	font-weight: bold;
}

#main-left .emphasis2 {
	color: #0091D0;
}

#main-left ul.under_navi {
	margin: 5px 17px 15px 17px;
}

#main-left p.img_caption {
	font-size: 1.4em;
	font-weight: bold;
	white-space: nowrap; /* 改行禁止 */
}

#main-left p.img_caption .img_caption_sub {
	margin-left: 17px;
	font-size: 0.7em;
}

#main-menu {
	float: right;
	width: 193px; /* 203 = 800 - 592 - 5 */
	margin-left: 5px;
	overflow: hidden; /* FireFoxにおいてリンク選択時にwidthが増え横方向スライドバーが出る問題への対処 */
}

#main-menu-list {
	width: 193px;
	padding-bottom: 1px;
	background-color: #FFFFFF;
	text-align: right;
}

#main-menu-list a {
	display: block;
	margin-bottom: 5px;
}

#main-menu-list-1 {
	height: 61px;
	background: url(../img/root/main-menu-list-1.png) no-repeat;
}

#main-menu-list-1:hover{
	background: url(../img/root/main-menu-list-1-on.png) no-repeat;
}

#main-menu-list-1-1 {
	height: 25px;
	background: url(../img/root/main-menu-list-1-1.png) no-repeat;
}

#main-menu-list-1-1:hover{
	background: url(../img/root/main-menu-list-1-1-on.png) no-repeat;
}

#main-menu-list-1-2 {
	height: 25px;
	background: url(../img/root/main-menu-list-1-2.png) no-repeat;
}

#main-menu-list-1-2:hover{
	background: url(../img/root/main-menu-list-1-2-on.png) no-repeat;
}

#main-menu-list-1-3 {
	height: 25px;
	background: url(../img/root/main-menu-list-1-3.png) no-repeat;
}


#main-menu-list-1-3:hover{
	background: url(../img/root/main-menu-list-1-3-on.png) no-repeat;
}

#main-menu-list-1-4 {
	height: 25px;
	background: url(../img/root/main-menu-list-1-4.png) no-repeat;
}

#main-menu-list-1-4:hover{
	background: url(../img/root/main-menu-list-1-4-on.png) no-repeat;
}

#main-menu-list-1-5 {
	height: 25px;
	background: url(../img/root/main-menu-list-1-5.png) no-repeat;
}

#main-menu-list-1-5:hover{
	background: url(../img/root/main-menu-list-1-5-on.png) no-repeat;
}

#main-menu-list-2 {
	height: 61px;
	background: url(../img/root/main-menu-list-2.png) no-repeat;
}

#main-menu-list-2:hover{
	background: url(../img/root/main-menu-list-2-on.png) no-repeat;
}

#main-menu-list-2-1 {
	height: 25px;
	background: url(../img/root/main-menu-list-2-1.png) no-repeat;
}

#main-menu-list-2-1:hover{
	background: url(../img/root/main-menu-list-2-1-on.png) no-repeat;
}

#main-menu-list-2-2 {
	height: 25px;
	background: url(../img/root/main-menu-list-2-2.png) no-repeat;
}

#main-menu-list-2-2:hover{
	background: url(../img/root/main-menu-list-2-2-on.png) no-repeat;
}

#main-menu-list-2-3 {
	height: 25px;
	background: url(../img/root/main-menu-list-2-3.png) no-repeat;
}


#main-menu-list-2-3:hover{
	background: url(../img/root/main-menu-list-2-3-on.png) no-repeat;
}

#main-menu-list-2-4 {
	height: 25px;
	background: url(../img/root/main-menu-list-2-4.png) no-repeat;
}

#main-menu-list-2-4:hover{
	background: url(../img/root/main-menu-list-2-4-on.png) no-repeat;
}

#main-menu-list-3 {
	height: 37px;
	background: url(../img/root/main-menu-list-3.png) no-repeat;
}

#main-menu-list-3:hover{
	background: url(../img/root/main-menu-list-3-on.png) no-repeat;
}

#main-menu-list-4 {
	height: 37px;
	background: url(../img/root/main-menu-list-4.png) no-repeat;
}

#main-menu-list-4:hover{
	background: url(../img/root/main-menu-list-4-on.png) no-repeat;
}

#main-menu-list-sub-1 {
	height: 49px;
	background: url(../img/root/main-menu-list-sub-1.png) no-repeat;
	/* 区切り線 */
	
}

#main-menu-list-sub-2 {
	height: 49px;
	background: url(../img/root/main-menu-list-sub-2.png) no-repeat;
}

#main-menu-list-sub-3 {
	height: 49px;
	background: url(../img/root/main-menu-list-sub-3.png) no-repeat;
}



/* -------------------------
 __contents
-------------------------- */

#contents {
	float: right;
	width: 505px; /* 187 + 2 + 30 + 505 + 30 = 754 */
	margin-left: 2px;
	padding: 30px;
}

/* -------------------------
 __sub-menu
-------------------------- */

#sub-menu {
	float: left;
	width: 187px;
}

#sub-menu ul li div {
	height: 34px;
	border-bottom: 2px solid #FFFFFF;
	text-indent: 10px;
	line-height: 34px; /* valign="center"相当 */
	font-weight: bold;
	background: #E6F47F;
}

#sub-menu ul li div a:link,
#sub-menu ul li div a:visited {
	color: #329F2C;
}

#sub-menu ul li div a {
	display: block;
	height: 34px;
	text-decoration: none;
}

#sub-menu ul li ul li {
	height: 20px;
	border-bottom: 2px solid #FFFFFF;
	text-indent: 25px;
	line-height: 20px; /* valign="center"相当 */
	background: #E6E6E6;
}

#sub-menu ul li ul li a {
	display: block;
	height: 20px;
	text-decoration: none;
}

#sub-menu ul li ul li a:link,
#sub-menu ul li ul li a:visited {
	color: #000000;
}

/* -------------------------
 __footer
-------------------------- */

#footer {
	width: 800px;
	margin: 10px auto 0 auto;
	min-height: 80px; /* for footer-privacy_mark height */
		/* min-hight IE6 hack */
		height: auto !important; 
		height: 80px;
	position: relative; /* for #footer-link { position: absolute;} */
}

#footer h5 {
	font-size: 1.2em;
	font-weight: bold;
}

#footer-link {
	position: absolute;
		bottom: 0px;
		right: 0px;
	width: 180px; /* = #main-menu { width } */
}

#footer-privacy_mark {
	position: absolute;
		bottom: 0px;
		right: 180px; /* = #main-menu { width } */
	width: 95px; /* image size + margin */
}

#footer-company {
	position: absolute;
		bottom: 0px;
}

#footer-copyright {
	width: 800px;
	margin: 10px auto 0 auto;
	color: #FFFFFF;
	text-align: center;
	background-color: #F36F21;
}