/*========================================================

  全体のレイアウト

========================================================*/


body{
	text-align: center;
}

/*------------------------------------▽大枠*/

div#wrap{
	width: 810px;
	_width: 812px;
	margin: 0 auto;
	border-left: solid 1px #ccc;
	border-right: solid 1px #ccc;
        background: #fff;
}


/*------------------------------------▽ヘッダー*/

#header{
	width: 810px;
	_width: 812px;
	height: 324px;/*ヘッダー画像の大きさに合わせてください*/
	background: url(../img/fan.jpg) no-repeat right;
	text-align: left;
}

/*------------------------------------▽コンテンツ*/

#contents{
	clear: both;
	width: 810px;
	_width: 812px;
	text-align: left;
}

/*------------------------------------▽メニュー*/

#menu{
	clear: both;
	width: 810px;
	_width: 812px;
	padding: 20px 0 0 0;
	background: url(../img/menu_bg.gif) repeat-x #f8f8f7;
	text-align: left;
	overflow: hidden;
	zoom: 1;
}

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

ボックスの中にフロートした要素しかない場合、その親ボックスの高さが自動的に縮みます。
そのため、親ボックスに背景色や画像を指定していると、高さが不足しているように見えます。

今回の「menu」はまさに画像と背景色を背景に指定していますし、
2カラムのコンテンツとサイドバーなどにも使います。

この問題を解決するためには「clearfix」というテクニックを使います。
以前は複雑なテクニックが使われていたのですが、今は簡単にできます。

親ボックスに「overflow: hidden;」を指定して、
あとはIE6用に「zoom: 1;」と指定しておきましょう。

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

/*------------------------------------▽フッター*/

#footer{
	clear: both;
	width: 810px;
	_width: 812px;
	padding: 20px 0 10px 0;
	background: #f8f8f7;
	text-align: right;
}