/* ここからmenu部分
-------------------------------- */
# menu{
}

/*
-------------------------------- */
#menu ul 
{
	background-repeat: repeat-x;
	position:relative;
	height:25px;
	margin: 5px 0px 0px 0px;
	padding: 0px;
	font-size: 8px;
	background-image: url(img/bc.jpg);
	padding-left: 20px;
}

/* listタグをfloatで左に回り込ませています
-------------------------------- */
#menu li 
{
	height: 25px;
	list-style-type:none;
	float: left;
}

/* aタグをblock要素にしてIE以外への対策、インデントで本来のテキストを左画面外の左999pxに飛ばしています
-------------------------------- */
#menu li a 
{
display: block;
height: 25px;
background-position: 0 0;
background-repeat: no-repeat;
text-decoration: none;
text-indent: -999px;
}    
	
/* 各listタグにidをつけ個々に背景画像を指定、画像はマウスオフ、マウスオンを
上下につないだものを使いました。高さは40px
-------------------------------- */
#menu li#menu01 a {
	background-image:  url(img/menu01.jpg);
	width: 169px;
}
#menu li#menu01over a {
	background-image:  url(img/menu01.jpg);
	width: 169px;
	background-position: 0 -25px;
}
#menu #menu02 a {
background-image:  url(img/menu02.jpg);
	width: 111px;
}
#menu li#menu02over a {
	background-image:  url(img/menu02.jpg);
	width: 111px;
	background-position: 0 -25px;
}
#menu #menu03 a {
background-image:  url(img/menu03.jpg);
	width: 197px;
}
#menu li#menu03over a {
	background-image:  url(img/menu03.jpg);
	width: 197px;
	background-position: 0 -25px;
}
#menu #menu04 a {
background-image:  url(img/menu04.jpg);
	width: 107px;
}
#menu li#menu04over a {
	background-image:  url(img/menu04.jpg);
	width: 107px;
	background-position: 0 -25px;
}

#menu #menu05 a {
background-image:  url(img/menu05.jpg);
	width: 131px;
}
#menu li#menu05over a {
	background-image:  url(img/menu05.jpg);
	width: 131px;
	background-position: 0 -25px;
}

/* マウスオンすると重なった20px下の画像が出てきます
-------------------------------- */
#menu li a:hover 
{
background-position: 0 -25px;
}
/* ここまでmenu部分
-------------------------------- */