@charset "UTF-8";

/*━menu.css━━━━━━━━━━━━
  Date: 2014.09.14
  Auther: Yuka Kimura
━━━━━━━━━━━━━━━━━━*/

/* width: 900px用

■ ご利用例：
<ul class="menu_4">
	<li>***</li>
	<li>***</li>
	<li>***</li>
	<li>***</li>
</ul>

 */

.menu_4,
.menu_5,
.menu_6,
.menu_7,
.menu_8,
.menu_9,
.menu_10{
	margin-left: 10px;
	margin-right: 10px;
}

.menu_4:after,
.menu_5:after,
.menu_6:after,
.menu_7:after,
.menu_8:after,
.menu_9:after,
.menu_10:after {
	content: "";
	display: block;
	clear: both;
}

.menu_4 li,
.menu_5 li,
.menu_6 li,
.menu_7 li,
.menu_8 li,
.menu_9 li,
.menu_10 li {
	float:left;
	height:100%;
}

.menu_4 a,
.menu_5 a,
.menu_6 a,
.menu_7 a,
.menu_8 a,
.menu_9 a,
.menu_10 a {
	display: block;
	padding-top: 60px;
	height: 0px;
	line-height: 1.5;
	overflow: hidden;
}

/* ====== width ====== */
.menu_4 a{
	width: 225px;
}

.menu_5 a{
	width: 180px;
}

.menu_6 a{
	width: 150px;
}

/* ====== menu_4 ====== */

.menu_4 li:nth-child(1) a{
	background-position: 0px 0px;
}

.menu_4 li:nth-child(1) a:hover,
.menu_4 li:nth-child(1).current a{
	background-position: 0px -60px;
}

.menu_4 li:nth-child(2) a{
	background-position: -225px 0px;
}

.menu_4 li:nth-child(2) a:hover,
.menu_4 li:nth-child(2).current a{
	background-position: -225px -60px;
}

.menu_4 li:nth-child(3) a{
	background-position: -450px 0px;
}

.menu_4 li:nth-child(3) a:hover,
.menu_4 li:nth-child(3).current a{
	background-position: -450px -60px;
}

.menu_4 li:nth-child(4) a{
	background-position: -675px 0px;
}

.menu_4 li:nth-child(4) a:hover,
.menu_4 li:nth-child(4).current a{
	background-position: -675px -60px;
}

/* ====== menu_5 ====== */

.menu_5 li:nth-child(1) a{
	background-position: 0px 0px;
}

.menu_5 li:nth-child(1) a:hover,
.menu_5 li:nth-child(1).current a{
	background-position: 0px -60px;
}

.menu_5 li:nth-child(2) a{
	background-position: -180px 0px;
}

.menu_5 li:nth-child(2) a:hover,
.menu_5 li:nth-child(2).current a{
	background-position: -180px -60px;
}

.menu_5 li:nth-child(3) a{
	background-position: -360px 0px;
}

.menu_5 li:nth-child(3) a:hover,
.menu_5 li:nth-child(3).current a{
	background-position: -360px -60px;
}

.menu_5 li:nth-child(4) a{
	background-position: -540px 0px;
}

.menu_5 li:nth-child(4) a:hover,
.menu_5 li:nth-child(4).current a{
	background-position: -540px -60px;
}

.menu_5 li:nth-child(5) a{
	background-position: -720px 0px;
}

.menu_5 li:nth-child(5) a:hover,
.menu_5 li:nth-child(5).current a{
	background-position: -720px -60px;
}

/* ====== menu_6 ====== */

.menu_6 li:nth-child(1) a{
	background-position: 0px 0px;
}

.menu_6 li:nth-child(1) a:hover,
.menu_6 li:nth-child(1).current a{
	background-position: 0px -60px;
}

.menu_6 li:nth-child(2) a{
	background-position: -150px 0px;
}

.menu_6 li:nth-child(2) a:hover,
.menu_6 li:nth-child(2).current a{
	background-position: -150px -60px;
}

.menu_6 li:nth-child(3) a{
	background-position: -300px 0px;
	width: 157px;
}

.menu_6 li:nth-child(3) a:hover,
.menu_6 li:nth-child(3).current a{
	background-position: -300px -60px;
}

.menu_6 li:nth-child(4) a{
	background-position: -450px 0px;
	width: 157px;
}

.menu_6 li:nth-child(4) a:hover,
.menu_6 li:nth-child(4).current a{
	background-position: -450px -60px;
}

.menu_6 li:nth-child(5) a{
	background-position: -600px 0px;
	width: 157px;
}

.menu_6 li:nth-child(5) a:hover,
.menu_6 li:nth-child(5).current a{
	background-position: -600px -60px;
	width: 157px;
}

.menu_6 li:nth-child(6) a{
	background-position: -750px 0px;
	width: 157px;
}

.menu_6 li:nth-child(6) a:hover,
.menu_6 li:nth-child(6).current a{
	background-position: -750px -60px;
}