@charset  utf-8;

/* CSS Document */
<style type=text/css> /*
body [
----------------------------------------------------------- */
body {
    margin: 0 auto;
}

body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #FFF;
    margin: 0;
/* 複数の異なるブラウザの初期設定値に対応するため、body エレメントのマージンと余白を 0 にすることをお勧めします */
    padding: 0;
    text-align: center;
/* これにより、IE 5* ブラウザではコンテナが中央揃えになります。そして、テキストは、#container セレクタの初期設定である左揃えに設定されます */
    color: #000;
	height: 100%;
}

body {

	font-family:Verdana, "ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
	font-size:80%;
color: #333;
}
/*
 Head [
----------------------------------------------------------- */
#headerbg {
    background: #011637;
    width: 100%;
    min-width: 1000px;
    margin: 0;
    background-image: url(ime/bagnavi1.gif);
    background-repeat: repeat-x;
    background-position: right bottom;
}

/* ヘッダー*/
#header {
    background-image: url(ime/sagara-hp;.png);
    width: 960px;
    height: 150px;
    margin-right: auto;
    margin-left: auto;
}

#header h1 {
    margin: 0;
	text-align: right; 
	margin-right:10px;
	font-size: 10pt;
	color: gray;
/* #header div の最後のエレメントのマージンを 0 に設定することにより、マージンの相殺（div 間の原因不明のスペース）が回避されます。div の周囲に境界線が適用されている場合は、境界線によってマージンの相殺が回避されるため、この操作は不要です */
    padding: 10px 0;
/* マージンの代わりに余白を使用して、エレメントを div の端に接触しない位置に維持することができます */
}


/* #sidebar1 に関するヒント：
1. 単位は相対単位であるため、サイドバーで余白を使用することは回避してください。標準に準拠したブラウザでは、余白は全体の幅に追加されるため、実際の幅が不特定の幅になります。 
2. サイドバーの値の単位として em が使用されているので、その幅が初期設定のテキストサイズに応じて変化することに注意してください。
3. 「.twoColHybLtHdr #sidebar1 p」ルールで見られるように、div の端と div に含まれるエレメントの間のスペースは、エレメントに左マージンと右マージンを適用することによって設定できます。
*/

/*メインメニュー（ヘッダー下の横並びのメニュー）
---------------------------------------------------------------------------*/
div#radia {
    background-image: url(ime/bagnavi.gif);
    margin: 0;
	padding: 0;
    clear: both;
    width: 100%;
    min-width: 1000px;
}

ul#radial {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 960px;
    height: 60px;
	margin-right: auto;
    margin-left: auto;
}

ul#radial li {
    float: left;
    line-height: 50px;
    height: 55px;
    margin-right: 1px;
    font-size: 12px;
    margin-top: 8px;
}

ul#radial a {
    color: #FFF;
/*メニューの文字色*/
    text-decoration: none;
    display: block;
    width: 136px;
    text-align: center;
    background-image: url(ime/btanback.png);
/*メニューの背景画像*/
    background-repeat: no-repeat;
    background-position: top;
/*メニューの背景画像の上半分を表示させる設定*/
    overflow: hidden;
/*オーバーした文字を非表示にする設定*/
}

ul#radial a:hover {
    background-image: url(ime/btanback.png);
/*メニューの背景画像*/
    background-repeat: no-repeat;
    background-position: left bottom;
/*メニューの背景画像の下半分を表示させる設定*/
    color: #FF9;
/*カーソルオーバー時の文字色*/
}

ul#radial li.last {
    margin-right: 0;
}


/*コンテナー
---------------------------------------------------------------------------*/
div#container {
    width: 960px;
/* これにより、幅がブラウザの幅の 80% のコンテナが設定されます */
    height: 100%;
    background: #FFF;
    margin: 0 auto;
/* 自動マージン（幅と連動）により、ページが中央揃えになります */
    border: 0 solid #000;
    text-align: center;
/* この設定は body エレメントの text-align: center より優先されます。 */
}

#sidebar1 {
    float: left;
    width: 300px;
    height: 700px;
/* このエレメントはフローティングエレメントであるため、幅が設定されている必要があります */
    background-image: url(ime/side-bk.gif);
    background-repeat: repeat;
    padding: 0px 0;
/* 上余白と下余白により、この div 内に視覚的なスペースが設定されます */
}

/*メインコンテンツ
---------------------------------------------------------------------------*/
#mainContent {
    float: right;
    width: 640px;
    height: 100%;
/* このエレメントはフローティングエレメントであるため、幅が設定されている必要があります */
    background: #FFF;
/* 背景色は、列内のコンテンツの長さにわたって表示されます */
    padding: 15px 0;
}

#main {
    width: 630px;
    float: left;
    margin-right: 20px;
}

.main_box {
    border: 0 solid #CCC;
    margin-bottom: 20px;
    padding-bottom: 10px;
    background-color: #FFF;
	margin-top: 5px;
}

/*
 foot [
----------------------------------------------------------- */
#footerbg {
    background-color: #011637;
    width: 100%;
    min-width: 1000px;
    padding: 10px;
}

/* フッター*/
#footer {
　　position: absolute;
　　bottom: 0;
    width: 960px;
    height: 50px;
    margin-right: auto;
    margin-left: auto;
}

p.copy {
    text-align: center;
    font-size: 80%;
    margin: 40px;
    color: #fff;
}

/* 再使用できる各種クラス */
.fltrt {
/* このクラスは、ページ上でフローティングエレメントを右側に配置するのに使用できます。プローティングエレメントは、ページ上でその横に配置されるエレメントの前に配置される必要があります。 */
    float: right;
    margin-left: 8px;
}

.fltlft {
/* このクラスは、ページ上でフローティングエレメントを左側に配置するのに使用できます */
    float: left;
    margin-right: 8px;
}

.clearfloat {
/* このクラスは、div またはブレークエレメントに適用される必要があり、また、フローティングエレメントが完全に含まれているコンテナの末尾の直前にある最後のエレメントである必要があります */
    clear: both;
    height: 0;
    font-size: 1px;
    line-height: 0;
}

/*
 TEST スライダー途中[
----------------------------------------------------------- */
/*==[トップページのメイン画像の設定]==============================================*/
/*
 TEST スライダー終[
----------------------------------------------------------- */

/*
 TEST レシポンシブル 途中[
----------------------------------------------------------- 
 ※デフォルトのスタイル（layout.css）を1024px以上のウインドウサイズの場合に読み込ませる。 
<link rel="stylesheet" media="screen and (min-width: 1024px)" href="styles/layout.css" />
 ※タブレット用のスタイル（tablet.css）を1024px以下のウインドウサイズの場合に読み込ませる。 
<link rel="stylesheet" media="screen and (max-width: 1024px)" href="styles/tablet.css" />
 ※スマートフォン用のスタイル（sp.css）を768px以下のウインドウサイズの場合に読み込ませる。 
<link rel="stylesheet" media="screen and (max-width: 768px)" type="text/css" href="styles/sp.css" />

 TEST 終[
----------------------------------------------------------- */