@charset "utf-8";
/*
-----------------------------------------------------
ＷＥＢサイト全般の基本設定

-----------------------------------------------------
*/
body {
	margin: 0;
	padding: 0;
	text-align:center; /*　ページ全体はセンタリングして中央表示にしています　*/
	font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'ＭＳ Ｐゴシック', sans-serif;
	color: #333333;
	background-color: #ffffff;   /*　ページ全体の背景色　*/
	background-image: url(../image_css/body_bk.png);
	background-repeat: repeat-x;
}

/*　<div>タグの基本レイアウト　*/
div {
	margin: 0;
	padding: 0;
	text-align:left;
}
/*　<p>、<pre>タグの基本レイアウト　*/
p,pre {
	font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'ＭＳ Ｐゴシック', sans-serif;
	font-size: 14px;
	line-height: 200%;
	margin: 2px 5px 8px 5px;
	padding: 5px;
	
/*　リストタグの基本レイアウト　*/
}
ol, ul {
	margin: 0;
	padding: 0;
}
li {
	margin: 0;
	list-style-type: none;
}

/* リンクテキストの基本属性 */
a {
	color: #0066CC; /*青*/
	text-decoration: underline;
}
a:visited {
	color: #0066CC; /*青*/
	text-decoration: underline;
}
a:hover,
a:active, 		/* for IE (Keyboard) */
a:focus {		/* for Netscape (Keyboard) */
	color: #CC0000; /*赤*/
	text-decoration: none;
}


/*
-----------------------------------------------------
レイアウトの設計
-----------------------------------------------------
*/

/*　サイト部分全体のレイアウト　*/
#WRAP {
	position: relative;
	width:900px;  
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

/*
---------------------------------
ヘッダ部
---------------------------------
*/
h1 {
	font-size:12px;
	color:  #333333;
	font-weight: normal;
	margin:0;
	padding: 2px 0px 2px 135px;
	text-align: left;
	line-height: 16px; 
	background: url(../image_css/toplogo.jpg) no-repeat;

}
#HEAD {
	height: 50px;
	display:inline;
	float:left;
}

#HEAD_CATCH {
	height: 360px;
	display:inline;
	float:left;
}

/*メニュー枠*/
#MENU {
	height: 30px;
	display:inline;	
	float:left;
}

#MENU ul {
	position	:absolute;
	top			:43px; /* #WRAPを基準とした上からの距離 */
	left		:0; /* #WRAPを基準とした左からの距離 */
	width		:900px; /* ヘッダーメニューの幅 */

}

#WRAP #MENU li {
	float: left;
	padding : 0;
	margin : 0;
}

#MENU li a {
	display: block;
	color: #ffffff;
	font-size: 12px;
	line-height: 45px; 
	background-image: url(../image_css/menu_bk.png);
	background-repeat: no-repeat;
	background-position: left top;
	text-align: center;
	height: 50px;
	width: 150px; 
	text-decoration: none;
}

#WRAP #MENU li a:hover {
	color: #ffffff;
	background-position: top right;
	text-decoration: none;
}


/*　
---------------------------------
メイン領域
---------------------------------
*/

#MAIN_AREA {
	width:900px;  
	display:inline;
	float:left;
	padding-top: 10px;
}

#MAIN {
	margin: 0;
	padding: 0 10px 20px 10px;
}


/*　
【CONTENTS】領域
---------------------------
*/
#CONTENTS {
	width:640px;
	display:inline;
	float:right;
}

/*各要素の設定*/

.pan { /*パンくずリスト*/
	font-size:11px;
	line-height: 20px;
	color: #666666;
	background-color: #CCCCCC;
}
#CONTENTS h2 { /*見出し２*/
	font-size:16px;
	color: #000000;
	line-height: 40px;
	background: url(../image_css/bg_contents_h2.jpg) no-repeat;
	background-color: #E8E8E8;
	margin: 30px 0 0 0;
	padding: 0 0 0 24px;
}
#CONTENTS h3 { /*見出し３*/
	font-size:14px;
	color: #000000;
	line-height: 30px;
	background: url(../image_css/bg_contents_h3.jpg) no-repeat;
	background-color: #E8E8E8;
	margin: 30px 0 0 0;
	padding: 0 0 0 30px;
}
#CONTENTS h4 { /*見出し４*/
	font-size:12px;
	color: #000000;
	background-color: #F7F4C1;
	margin: 20px 6px 0 6px;
	padding: 6px 0 6px 10px;
}

#CONTENTS table { /*テーブル*/
	width: 620px;
	border-spacing: 1px;
	font-size: 12px;
	background-color: #CCCCCC;
	margin: 10px auto 10px auto;
	padding: 0;
}
#CONTENTS tr,#CONTENTS th,#CONTENTS td { /*テーブル行・見出セル・セルのパディング*/
	padding: 8px;
}
#CONTENTS th { /*見出セル*/
	color: #000066;
	background-color: #F0F0F0;
	font-weight: normal;
}
#CONTENTS td { /*セルの指定*/
	color:  #333333;
	background-color: #FFFFFF;
	text-align: left;
}

/*テーブルのカラムグループ設定 【カラム幅】*/

#col1 {
	width: 1em;
}
#col2 {
	width: 2em;
}
#col3 {
	width: 3em;
}
#col4 {
	width: 4em;
}
#col5 {
	width: 5em;
}
#col6 {
	width: 6em;
}
#col7 {
	width: 7em;
}
#col8 {
	width: 8em;
}
#col9 {
	width: 9em;
}
#col10 {
	width: 10em;
}
#col11 {
	width: 11em;
}
#col12 {
	width: 12em;
}
#col13 {
	width: 13em;
}
#col14 {
	width: 14em;
}
#col15 {
	width: 15em;
}
#col16 {
	width: 16em;
}
#col17 {
	width: 17em;
}
#col18 {
	width: 18em;
}
#col19 {
	width: 19em;
}
#col20 {
	width: 20em;
}
#col25 {
	width: 25em;
}
#col30 {
	width: 30em;
}
#col35 {
	width: 35em;
}
#col40 {
	width: 40em;
}
#col45 {
	width: 45em;
}
#col50 {
	width: 50em;
}

.cklist ul {
	font-size: 14px;
	margin: 0 0 0 30px;
	list-style-image: url(../image_css/bg_ckr_li.gif) ;
}
.cklist li {
	margin: 0;
	padding: 3px 0 3px 0;
}

.cklist2 ul {
	font-size: 14px;
	margin: 0 0 0 30px;
	list-style-image: url(../image_css/accept.png) ;
}
.cklist2 li {
	margin: 0;
	padding: 3px 0 3px 0;
}


/*　
【SUB】領域
---------------------------
*/
#SUB {
	width:240px;
	display:inline;
	float:left;
}


/*各要素の設定*/

#SUB h2 { /*見出し２*/
	font-size:12px;
	color: #FFFFFF;
	line-height: 30px;
	text-align: center;
	background: url(../image_css/bg_sub_h2.jpg) no-repeat;
	margin: 0;
	padding: 0;
}
.submenu { /*見出し２下の枠*/
	background: url(../image_css/bg_sub_frm.jpg) no-repeat center bottom;
	margin: 0 0 10px 0;
	padding: 8px 8px 10px 8px;
}
.submenu p { /*見出し２下の枠の<p>タグ*/
	font-size: 12px;
	margin: 0;
	padding: 0 10px 8px 4px;
}

 /*見出し２下の枠のリストタグ⇒この設定で、行頭マークにカーソルが当たった場合にマークをずらしている*/
.submenu ul {
	font-size: 12px;
	margin: 0;
	padding: 0 0 4px 0;
}
.sublist li {
	margin: 0;
	padding: 3px 0 3px 0;
}
.sublist li a {
	color: #0066CC;
	text-decoration: none;
	display: block;
	padding: 1px 0 3px 26px;
	background:url(../image_css/bg_sub_li.gif) no-repeat 2px center;
}
.sublist li a:visited {
	color: #0066CC;
	text-decoration: none
}
.sublist li a:hover,
.sublist li a:active, 		/* for IE (Keyboard) */
.sublist li a:focus {		/* for Netscape (Keyboard) */
	color: #0066CC;
	background-color: #f3f3f3;
	margin: 0;
	background-position: 4px center;
}

 /*サイドバナー用画像表示エリア定義*/
#SIDEBN {
	width:240px;
	margin-bottom: 145px;
	text-align: center;
}
 /*サイドバナー用メールマガジンエリア定義*/
#MAILMG {
	width:240px;
	margin-bottom: 10px;
	padding: 130px 0px 5px 0px;
	text-align: center;
	background:url(../image_css/mailmg_bn.jpg) no-repeat;
}
/*　
---------------------------------
フッター領域
---------------------------------
*/
#PAGETOP {
	height: 29px;
	text-align: right;
}

#PAGETOP ul {
	padding : 0;
	margin : 0;
}

#PAGETOP li {
	float: right;
	padding : 0;
	margin : 0;
}

#PAGETOP li a {
	display: block;
	color: #FFFFFF;
	font-size: 14px;
	line-height: 30px; 
	background-image: url(../image_css/pagetop_bk.gif);
	background-repeat: no-repeat;
	background-position: left top;
	text-align: center;
	height: 30px;
	width: 150px; 
	text-decoration: none;
}

#PAGETOP li a:hover {
	color: #FFFFFF;
	background-position: top right;
	text-decoration: none;
}

#FOOTER {
	height: 300px;
	background-image: url(../image_css/bg_footer.jpg);
	background-repeat: repeat-x;
}


#FOOTER_AREA {
	width:900px;  
	font-size: 12px;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
	text-align: left;
}
#FOOTER_CONTENTS {
	width:640px;
	margin-top: 10px;
	display:inline;
	float:right;
}
#FOOTER_SUB {
	width:240px;
	margin-top: 10px;
	display:inline;
	float:left;
}

#FOOTER p { /*フッターの<p>タグの設定*/
	line-height: 140%;
	margin: 0;
	padding: 0;
}
.footmenu ul {
	font-size: 12px;
	margin: 0;
	padding: 0 0 4px 0;
}
.footlist li {
	margin: 0;
	padding: 2px 0 2px 0;
}
.footlist li a {
	display: block;
	padding: 1px 0 2px 26px;
	background:url(../image_css/bg_sub_li.gif) no-repeat 2px center;
}

.footlist li a:hover,
.footlist li a:active, 		/* for IE (Keyboard) */
.footlist li a:focus {		/* for Netscape (Keyboard) */
	color: #000000;
	margin: 0;
	background-position: 4px center;
}

/*　
---------------------------------
最下部領域
---------------------------------
*/
#COPYRIGHT {
	background-color: #ffffff;
}
#COPYRIGHT p { /*最下部の<p>タグの設定*/
	font-size: 12px;
	margin: 0;
	padding: 0;
	text-align: center;
}
#COPYRIGHT a { /*最下部のリンクの設定*/
	color: #0066CC;
	text-decoration: none;
}
#COPYRIGHT a:hover,
#COPYRIGHT a:active, 		/* for IE (Keyboard) */
#COPYRIGHT a:focus {		/* for Netscape (Keyboard) */
	color: #0066CC;
	text-decoration: underline;
}

/*　
---------------------------------
レイアウト（その他使用クラス）
---------------------------------
*/
/*フロートされたボックスの定義を解除する　<br class="clear" />で使用 */
.clear {
	clear:both;
}


/*
-----------------------------------------------------
よく使用するクラスの設計
-----------------------------------------------------
*/
/*
------------------------------------
 テキストの装飾設定 クラス
------------------------------------ 
*/
/*--------------------------【文字色】*/
.red {
	color: #CC0000; /*赤*/
}
.blue {
	color: #0066CC; /*青*/
}
.grn {
	color: #008000; /*緑*/
}
.ora {
	color: #FF9900; /*オレンジ*/
}
.gry {
	color: #333333; /*グレー*/
}
.blun {
	color: #000066; /*茶*/
}

.bg-yell { /*黄色マーカー*/
	background-color: #FFFFF4;
	border: 1px solid #CCCC00;
	margin: 10px;
	padding: 10px;
}

/*--------------------------【文字スタイル】*/

.b { /*　太字　*/
	font-weight: bold;
}
.s { /*　取消線　*/
	text-decoration: line-through;
}
.u { /*　下線　*/
	text-decoration: underline;
}

/*--------------------------【文字サイズ】*/

.f10 { /*　フォントサイズ10px　*/
	font-size: 10px;
	line-height:120%;
}
.f11 { /*　フォントサイズ11px　*/
	font-size: 11px;
	line-height:130%;
}
.f12 { /*　フォントサイズ12px　*/
	font-size: 12px;
	line-height:140%;
}
.f14 { /*　フォントサイズ14px　*/
	font-size: 14px;
	line-height:140%;
}
.f16 { /*　フォントサイズ16px　*/
	font-size: 16px;
	line-height:140%;
}
.f18 { /*　フォントサイズ18px　*/
	font-size: 18px;
	line-height:140%;
}
.f24 { /*　フォントサイズ24px　*/
	font-size: 24px;
	line-height:140%;
}

/*--------------------------【文字配置】*/
.txt-r { /*　右寄せ　*/
	text-align: right;
}
.center { /*　中央揃え　*/
	text-align: center;
}

/*
------------------------------------
 余白の設定 クラス
------------------------------------ 
*/

.mall10 { /*　全余白10px　*/
	margin: 10px;
}
.mall20 { /*　全余白20px　*/
	margin: 20px;
}
.mtop10 { /*　上部余白10px　*/
	margin-top: 10px;
}
.mtop20 { /*　上部余白20px　*/
	margin-top: 20px;
}
.mtop40 { /*　上部余白40px　*/
	margin-top: 40px;
}
.mtop80 { /*　上部余白80px　*/
	margin-top: 80px;
}
.mleft10 { /*　左部余白10px　*/
	margin-left: 10px;
}
.mleft20 { /*　左部余白20px　*/
	margin-left: 20px;
}
.mleft30 { /*　左部余白30px　*/
	margin-left: 30px;
}

/*
------------------------------------
 文章の強調設定 クラス
------------------------------------ 
*/

.sikaku{ /*コンテンツ部用　四角枠（グレー）*/
width: 620px;
padding: 10px;
background-color: #F0F0F0;   /*　ページ全体の背景色　*/
border: 1px dashed #999999;
}
.sikakur{ /*コンテンツ部用　四角枠（赤）*/
width: 620px;
padding: 10px;
background-color: #FEEDFC;   /*　ページ全体の背景色　*/
border: 1px dashed #999999;
}
.sikakuq{ /*コンテンツ部用　よくある質問と回答の質問部分*/
color: #000066;
font-size: 14px;
line-height: 40px; 
margin: 30px 0 10px 0;
padding: 10px 10px 10px 50px;
background-image: url(../image_css/icon_q.gif);
background-repeat: no-repeat;
background-position: left top;
background-color: #F0F0F0;  /*　ページ全体の背景色　*/
border: 1px solid #999999;  /*　ボックス枠色　*/
}
.sikakua{ /*コンテンツ部用　よくある質問と回答の回答部分*/
font-size: 14px;
line-height: 40px; 
margin: 0;
padding: 10px 0 10px 50px;
background-image: url(../image_css/icon_a.gif);
background-repeat: no-repeat;
background-position: left top;
}


.tatesen{ /*コンテンツ部用　左縦線（赤）*/
width: 620px;
padding: 10px;
border-left: 5px solid #EE82EE;
}
.sikakus{ /*サイド部用　四角枠（青）*/
width: 240px;
padding: 10px;
border: 1px solid #67CCFF;
}


/*
------------------------------------
 画像（img）の配置設定 クラス
------------------------------------ 
*/

img { /*　画像のボーダーラインをなしに設定　*/
	border:0;
}
.flo-l { /*　テキストの左に配置し、テキストとの間隔を6px開ける　*/
	float: left;
	margin-right: 6px;
}
.flo-r { /*　テキストの右に配置し、テキストとの間隔を6px開ける　*/
	float: right;
	margin-left: 6px;
}
.img-m { /*　垂直中心揃え　*/
	vertical-align: middle;
}

/*
------------------------------------
 ロールオーバーボタン画像（img）
------------------------------------ 
*/
/*メインバナー用*/

a#b_push1 {
	float: left;
	margin: 20px 0 20px 0;
   display: block;
   width: 300px; /* 画像1枚分の横幅 */
   height: 80px; /* 画像1枚分の高さ */
   text-indent: -2000px; /* 文字を見えなくする */
   background-image: url(../image_css/b_push1.jpg); /* 画像ファイル名 */
}
a#b_push1:hover {
   background-position: bottom center; /* 背景画像の表示開始基準を右上に変更 */
}
a#b_push2 {
	float: right;
	margin: 20px 0 20px 0;
   display: block;
   width: 300px; /* 画像1枚分の横幅 */
   height: 80px; /* 画像1枚分の高さ */
   text-indent: -2000px; /* 文字を見えなくする */
   background-image: url(../image_css/b_push2.jpg); /* 画像ファイル名 */
}
a#b_push2:hover {
   background-position: bottom center; /* 背景画像の表示開始基準を右上に変更 */
}

a#b_push3 {
	float: left;
	margin: 20px 0 20px 0;
   display: block;
   width: 620px; /* 画像1枚分の横幅 */
   height: 130px; /* 画像1枚分の高さ */
   text-indent: -2000px; /* 文字を見えなくする */
   background-image: url(../image_css/b_push3.jpg); /* 画像ファイル名 */
}
a#b_push3:hover {
   background-position: bottom center; /* 背景画像の表示開始基準を右上に変更 */
}

/*サイドバナー用*/
a#b_pushs {
	float: left;
   display: block;
   width: 240px; /* 画像1枚分の横幅 */
   height: 207px; /* 画像1枚分の高さ */
   text-indent: -2000px; /* 文字を見えなくする */
   background-image: url(../image_css/sub_bn.jpg); /* 画像ファイル名 */
}
a#b_pushs:hover {
   background-position: bottom center; /* 背景画像の表示開始基準を右上に変更 */
}