@charset "Shift_JIS";

/* =========================================================================
 layout.css
 （レイアウトの設定）

　目　次

　1.リセット
　2.body
	2-1 テキストリンクの設定
	2-2 非表示の設定

　3.ラッパー（ヘッダー＋コンテナ＋フッター）

　4.ヘッダー（ヘッダーナビ、検索フォーム、ロゴ、グローバルナビ）
	4-1 「ナビゲーションを飛ばす
	4-2 ヘッダーベルト（ヘッダーナビ、検索フォーム）
		4-2-1 ヘッダーナビ
		4-2-2 検索フォーム
	4-3 ロゴ
	4-4 グローバルナビ

　5.コンテナ（コンテンツ＋サイドナビ）

　6.コンテンツ
	6-1 下層ページ
	6-2 トップページ

　7.サイドナビ（下層ページのみ）
	7-1 第１階層
	7-2 第２階層
	7-3 第３階層
	7-4 第４階層

　8.フッター
	8-1 フッターナビ
	8-2 コピーライト
========================================================================= */

/* -------------------------------------------------------------------------
 1.リセット
------------------------------------------------------------------------- */
html,body,div,
h1,h2,h3,h4,h5,h6,
p,blockquote,pre,address,hr,
ul,ol,li,
dl,dt,dd,
table,th,td,caption,
form,input,textarea,select,option,optgroup,button,label,fieldset,legend {
	font-size: 100%;
/*	margin: 0;
	padding: 0;*/
}
img {
	border: 0;
	vertical-align: bottom;
}

/* -------------------------------------------------------------------------
 2.body
------------------------------------------------------------------------- */
body {
	color: #333;
	font-size: 80%;
	font-family: Verdana, Arial, sans-serif;
	background-color: #E6E6FA;	/* bodyの背景色 */
	line-height: 1.2;
	text-align: center;
}

/* 2-1 テキストリンクの設定
---------------------------------------------------------------------- */
a:link {
	color: #06C;	/* 未訪問リンクの色 */
}
a:visited {
	color: #888;	/* 既訪問リンクの色 */
}
a:hover,
a:active,
a:focus {
	color: #F00;	/* ユーザーアクション時のリンクの色 */
}

/* 2-2 非表示の設定
---------------------------------------------------------------------- */
h2.hide,
hr.hide {
	display: none;
}

/* -------------------------------------------------------------------------
 3.ラッパー（ヘッダー＋コンテナ＋フッター）
------------------------------------------------------------------------- */
#wrapper {
	width: 800px;
	margin: 0 auto;
	background-color: #FFF;	/* ラッパーの背景色 */
	background-image: url(../img/wrapper_bg.gif);	/* ラッパーの背景画像 */
	background-repeat: repeat-y;
	text-align: left;
}

/* -------------------------------------------------------------------------
 4.ヘッダー（ヘッダーナビ、検索フォーム、ロゴ、グローバルナビ）
------------------------------------------------------------------------- */
#header {
	width: 100%;
	padding: 10px 0 0;
	background-image: url(../img/bil-001.jpg);
}

/* 4-1 「ナビゲーションを飛ばす
---------------------------------------------------------------------- */
#header p#skipnavi {
	/* CSS適用環境では非表示 */
	height: 0;
	width: 0;
	overflow: hidden;
	position: absolute;
}

/* 4-2 ヘッダーベルト（ヘッダーナビ、検索フォーム）
---------------------------------------------------------------------- */
#header #header-belt {
	width: 480px;	/* 800px - 310px（ロゴ画像幅） - 10px（ロゴ padding-left）*/
	float: right;
	padding: 0 0 10px;
}

/* 4-2-1 ヘッダーナビ */
#header #header-belt ul#header-navi {
	max-width: 480px;
	float: right;
	padding: 20px 0 0;
}
#header #header-belt ul#header-navi li {
	list-style: none;
	display: inline;
	float: left;
	margin: 0 10px 0 0;
	padding: 1px 4px 3px 20px;
	background-image: url(../img/header-navi_li_bg.gif);	/* ヘッダーナビの背景画像 */
	background-repeat: no-repeat;
}
#header #header-belt ul#header-navi li a:link {
	color: #000;	/* ヘッダーナビ　未訪問リンクの色 */
	text-decoration: none;
}
#header #header-belt ul#header-navi li a:visited {
	color: #000;	/* ヘッダーナビ　既訪問リンクの色 */
	text-decoration: none;
}
#header #header-belt ul#header-navi li a:hover,
#header #header-belt ul#header-navi li a:active,
#header #header-belt ul#header-navi li a:focus {
	color: #F00;	/* ヘッダーナビ　ユーザーアクション時のリンクの色 */
	text-decoration: underline;
}

/* 4-2-2 検索フォーム */
#header #header-belt form#header-searchform {
	width: 300px;
	clear: right;
	float: right;
	text-align: right;
	padding: 13px 0 0;
}
#header #header-belt form#header-searchform input#header-searchform-textarea {
	width: 160px;
	margin: 0 5px 0 0;
	background-color: #FFF;
	border-top: 1px solid #666;
	border-right: 1px solid #AAA;
	border-bottom: 1px solid #AAA;
	border-left: 1px solid #666;
	vertical-align: bottom;
}
#header #header-belt form#header-searchform input#header-searchform-btn {
	margin: 0 7px 0 0;
	vertical-align: bottom;
}
#header #header-belt form#header-searchform img {
	margin: 0 14px 0 0;
}

/* 4-3 ロゴ
---------------------------------------------------------------------- */
#header p#logo {
	float: left;
	padding: 0 0 10px 10px;
}

/* 4-4 グローバルナビ
---------------------------------------------------------------------- */
#header ul#globalnavi {
	width: 800px;
	clear: both;
	font-size: 120%;
	margin: 0 0 12px;
	padding: 6px 0;
	background-color: #2F516A;	/* グローバルナビの背景色 */
	background-image: url(../img/globalnavi_bg.gif);	/* グローバルナビの背景画像 */
	background-repeat: repeat-y;
}
#header ul#globalnavi:after {
	/* Newブラウザ フロート対策 */
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
#header ul#globalnavi li {
	float: left;
	list-style: none;
}
#header ul#globalnavi li a {
	width: 148px;
	height: 36px;
	line-height: 36px;
	display: block;
	margin: 0 0 0 10px;
	background-color: #069;	/* グローバルナビボタンの背景色 */
	background-image: url(../img/globalnavi_li_bg.gif);	/* グローバルナビボタンの背景画像 */
	background-repeat: no-repeat;
	text-align: center;
	overflow: hidden;
}
#header ul#globalnavi li a:link {
	color: #FFF;	/* グローバルナビボタン　未訪問リンクの色 */
	text-decoration: none;
}
#header ul#globalnavi li a:visited {
	color: #FFF;	/* グローバルナビボタン　既訪問リンクの色 */
	text-decoration: none;
}
#header ul#globalnavi li a.global-stay,
#header ul#globalnavi li a:hover,
#header ul#globalnavi li a:active,
#header ul#globalnavi li a:focus {
	color: #000;	/* グローバルナビボタン　ユーザーアクション時のリンクの色 */
	text-decoration: none;
	background-color: #5BAFE1;	/* グローバルナビボタン　ユーザーアクション時の背景色 */
	background-position: 0 -36px;
}

/* -------------------------------------------------------------------------
 5.コンテナ（コンテンツ＋サイドナビ）
------------------------------------------------------------------------- */
#container {
	width: 770px;
	clear: both;
	margin: 0 15px;
}

/* -------------------------------------------------------------------------
 6.コンテンツ
------------------------------------------------------------------------- */
/* コンテンツ内の項目は別ファイルcontent.cssで設定 */

/* 6-1 下層ページ
---------------------------------------------------------------------- */
#content {
	width: 585px;
	float: right;	/* 下層ページのコンテンツを左側に配置する場合は left へ変更（サイドナビ（#navi）の変更も必要） */
}

/* 6-2 トップページ
---------------------------------------------------------------------- */
#content-top {
	width: 100%;
}
#content-top #content {
	width: 585px;
	float: left;
}
#content-top #top-banner {
	width: 185px;
	float: right;
	text-align: right;
}

/* -------------------------------------------------------------------------
 7.サイドナビ（下層ページのみ）
------------------------------------------------------------------------- */
#navi {
	width: 165px;
	float: left;	/* サイドナビを右側に配置する場合は right へ変更（コンテンツ（#content）の変更も必要） */
	padding: 5px 0;
}
#navi ul#sidenavi li a:link {
	color: #000;	/* サイドナビ　未訪問リンクの色 */
	text-decoration: none;
}
#navi ul#sidenavi li a:visited {
	color: #000;	/* サイドナビ　既訪問リンクの色 */
	text-decoration: none;
}
#navi ul#sidenavi li a.side-stay,
#navi ul#sidenavi li a:hover,
#navi ul#sidenavi li a:active,
#navi ul#sidenavi li a:focus {
	color: #FFF;	/* サイドナビ　ユーザーアクション時のリンクの色 */
	text-decoration: none;
}

/* 7-1 第１階層
---------------------------------------------------------------------- */
#navi ul#sidenavi {
	clear: both;
	width: 165px;
	font-size: 110%;
}
#navi ul#sidenavi li {
	width: 165px;
	float: left;
	list-style: none;
}
#navi ul#sidenavi li a {
	display: block;
	margin: 0 0 7px;
	padding: 9px 5px 7px 18px;
	background-color: #F6F6F4;	/* サイドナビ第１階層の背景色 */
	background-image: url(../img/sidenavi_li_bg.gif);	/* サイドナビ第１階層の背景画像 */
	background-repeat: no-repeat;
	border: 1px solid #D0D0CF;	/* サイドナビ第１階層のボーダー色 */
	width: 165px;	/* WinIE5,6用 */
}
html>body #navi ul#sidenavi li a {
	width: 140px;	/* その他ブラウザ用　165px - 5px（padding-right） - 18px（padding-left） - 2px（border）*/
}
#navi ul#sidenavi li a.side-stay,
#navi ul#sidenavi li a:hover,
#navi ul#sidenavi li a:active,
#navi ul#sidenavi li a:focus {
	background-color: #0093BF;	/* サイドナビ第１階層　ユーザーアクション時の背景色 */
	background-position: -165px 0;
}

/* 7-2 第２階層
---------------------------------------------------------------------- */
#navi ul#sidenavi ul {
	width: 160px;
	font-size: 92%;
	margin: 0 2px 15px 3px;
}
#navi ul#sidenavi ul:after {
	/* Newブラウザ フロート対策 */
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
#navi ul#sidenavi ul li {
	width: 160px;
}
#navi ul#sidenavi ul li a {
	margin: 0;
	padding: 9px 2px 6px 17px;
	background-color: #FFF;	/* サイドナビ第２階層の背景色 */
	background-image: url(../img/sidenavi_li_li_bg.gif);	/* サイドナビ第２階層の背景画像 */
	background-repeat: no-repeat;
	border: none;
	border-bottom: 2px solid #5CA3CA;	/* サイドナビ第２階層下部のボーダー色 */
	width: 160px;	/* WinIE5,6用 */
}
html>body #navi ul#sidenavi ul li a {
	width: 141px;	/* その他ブラウザ用　160px - 2px（padding-right） - 17px（padding-left） */
}
#navi ul#sidenavi ul li a.side-stay,
#navi ul#sidenavi ul li a:hover,
#navi ul#sidenavi ul li a:active,
#navi ul#sidenavi ul li a:focus {
	background-color: #0093BF;	/* サイドナビ第２階層　ユーザーアクション時の背景色 */
	background-position: -165px 0;
}

/* 7-3 第３階層
---------------------------------------------------------------------- */
#navi ul#sidenavi ul ul {
	width: 154px;
	font-size: 90%;
	margin: 0 0 10px 6px;
	padding: 5px 0 0;
}
#navi ul#sidenavi ul ul li {
	width: 154px;
}
#navi ul#sidenavi ul ul li a {
	margin: 0;
	padding: 8px 2px 6px 14px;
	background-color: #FFF;	/* サイドナビ第３階層の背景色 */
	background-image: url(../img/sidenavi_li_li_li_bg.gif);	/* サイドナビ第３階層の背景画像 */
	background-repeat: no-repeat;
	border-bottom: 1px solid #AAA;	/* サイドナビ第３階層下部のボーダー色 */
	width: 154px;	/* WinIE5,6用 */
}
html>body #navi ul#sidenavi ul ul li a {
	width: 138px;	/* その他ブラウザ用　154px - 2px（padding-right） - 14px（padding-left） */
}
#navi ul#sidenavi ul ul li a.side-stay,
#navi ul#sidenavi ul ul li a:hover,
#navi ul#sidenavi ul ul li a:active,
#navi ul#sidenavi ul ul li a:focus {
	background-color: #0093BF;	/* サイドナビ第３階層　ユーザーアクション時の背景色 */
	background-position: -165px 0;
}

/* 7-4 第４階層
---------------------------------------------------------------------- */
#navi ul#sidenavi ul ul ul {
	width: 148px;
	font-size: 100%;
	margin: 0 0 10px 6px;
	padding: 5px 0 0;
}
#navi ul#sidenavi ul ul ul li {
	width: 148px;
}
#navi ul#sidenavi ul ul ul li a {
	margin: 0;
	padding: 6px 2px 4px 14px;
	background-color: #FFF;	/* サイドナビ第４階層の背景色 */
	background-image: url(../img/sidenavi_li_li_li_li_bg.gif);	/* サイドナビ第４階層の背景画像 */
	background-repeat: no-repeat;
	border-bottom: 1px dashed #DBDBDB;	/* サイドナビ第４階層下部のボーダー色 */
	width: 148px;	/* WinIE5,6用 */
}
html>body #navi ul#sidenavi ul ul ul li a {
	width: 132px;	/* その他ブラウザ用　148px - 2px（padding-right） - 14px（padding-left） */
}
#navi ul#sidenavi ul ul ul li a.side-stay,
#navi ul#sidenavi ul ul ul li a:hover,
#navi ul#sidenavi ul ul ul li a:active,
#navi ul#sidenavi ul ul ul li a:focus {
	background-color: #0093BF;	/* サイドナビ第４階層　ユーザーアクション時の背景色 */
	background-position: -165px 0;
}

/* -------------------------------------------------------------------------
 8.フッター
------------------------------------------------------------------------- */
#footer {
	width: 100%;
	clear: both;
	padding: 15px 0 10px;
	background-image: url(../img/footer_bg.gif);	/* フッターの背景画像 */
	background-repeat: no-repeat;
	background-position: left bottom;
}

/* 8-1 フッターナビ
---------------------------------------------------------------------- */
#footer ul#footer-navi {
	width: 770px;
	margin: 0 15px;
}
#footer ul#footer-navi li {
	float: left;
	list-style: none;
}
#footer ul#footer-navi li a {
	display: block;
	margin: 0 5px 5px;
	padding: 1px 4px 3px 20px;
	background-image: url(../img/footer-navi_li_bg.gif);	/* フッターナビの背景画像 */
	background-repeat: no-repeat;
}
#footer ul#footer-navi li a:link {
	color: #000;	/* フッターナビ　未訪問リンクの色 */
	text-decoration: none;
}
#footer ul#footer-navi li a:visited {
	color: #000;	/* フッターナビ　既訪問リンクの色 */
	text-decoration: none;
}
#footer ul#footer-navi li a:hover,
#footer ul#footer-navi li a:active,
#footer ul#footer-navi li a:focus {
	color: #F00;	/* フッターナビ　ユーザーアクション時のリンクの色 */
	text-decoration: underline;
}

/* 8-2 コピーライト
---------------------------------------------------------------------- */
#footer address {
	width: 776px;
	clear: both;
	font-style: normal;
	text-align: center;
	margin: 0 12px;
	padding: 8px 0 0;
	border-top: 1px solid #CECECE;
}