/* MENU CSS */
.menu {
list-style-type: none;
width: 756px;
height: 31px;
/* margin: 30px auto 300px; */
margin: 0px auto;
padding: 0;
/* background: silver; */
/* border-bottom: 5px solid gray; */
/* border-radius: 3px 3px 0 0; */
z-index: 10;
}

.menu li {
float: left;
position: relative;
width: 147px;
margin: 0px 1px 0px 1px;
padding: 0;
text-align: center;
background: url(../img/off_metaric_curve_1.gif);
border: 1px solid gray;
}

.menu li a {
display: block;
margin: 0;
padding: 8px 0 7px 0;
color: navy;
font-size: 14px;
font-weight: bold;
line-height: 1;
text-decoration: none;
}

.menu li:hover > a {
background: lightgray url(../img/on_metaric_curve_1.gif);
color: darkorange;
}

.menu > li:hover > a {
/*border-radius: 3px 3px 0 0; */
}

.menu li ul {
position: absolute;
top: 100%;
left: 0;
list-style: none;
margin: 0;
/* border-radius: 0 0 3px 3px; */
z-index: 100;
}

.menu li:last-child ul {
left: -50%;
/* width: 100%; */
}

.menu li ul li{
overflow: hidden;
/* width: 150%; */
height: 0;
color: #fff;
-moz-transition: .5s;
-webkit-transition: .5s;
-o-transition: .5s;
-ms-transition: .5s;
transition: .5s;
border: none;
}

.menu li ul li a{
padding: 8px 15px 9px 15px;
background: lightgray url(../img/off_metaric_curve_11.gif);
text-align: left;
font-size: 12px;
font-weight: normal;
}

.menu li:hover ul li{
overflow: visible;
height: 29px;
border-top: 1px solid darkgray;
border-bottom: 1px solid gray;
}

.menu li:hover ul li:first-child{
border-top: 0;
}

.menu li:hover ul li:last-child{
border-bottom: 0;
}

.menu li:hover ul li:last-child a{
/* border-radius: 0 0 3px 3px; */
}

/*
<!-- MENU TAG -->
<ul class="menu" style="width:756px;">
	<li style="width:147px;"><a href="#">トップ</a>
	</li>
	<li style="width:147px;"><a href="#">メニュー</a>
		<ul>
			<li style="width:160px;"><a href="#">サブメニュー</a></li>
			<li style="width:160px;"><a href="#">サブメニュー</a></li>
			<li style="width:160px;"><a href="#">サブメニュー</a></li>
			<li style="width:160px;"><a href="#">サブメニュー</a></li>
		</ul>
	</li>
	<li style="width:147px;"><a href="#">メニュー</a>
		<ul>
			<li style="width:160px;"><a href="#">サブメニュー</a></li>
			<li style="width:160px;"><a href="#">サブメニュー</a></li>
			<li style="width:160px;"><a href="#">サブメニュー</a></li>
		</ul>
	</li>
	<li style="width:147px;"><a href="#">メニュー</a>
		<ul>
			<li style="width:160px;"><a href="#">サブメニュー</a></li>
			<li style="width:160px;"><a href="#">サブメニュー</a></li>
		</ul>
	</li>
	<li style="width:147px;"><a href="#">メニュー</a>
		<ul>
			<li style="width:160px;"><a href="#">サブメニュー</a></li>
			<li style="width:160px;"><a href="#">サブメニュー</a></li>
			<li style="width:160px;"><a href="#">サブメニュー</a></li>
		</ul>
	</li>
</ul> 

*/