@charset "utf-8";

/*-------------------------------------*/
/* マージン、パディングの調整 */
/*-------------------------------------*/

.mB0{ margin-bottom:  0px; display: block;}
.mB5{ margin-bottom:  5px; display: block;}
.mB10{margin-bottom: 10px; display: block;}
.mB15{margin-bottom: 15px; display: block;}
.mB20{margin-bottom: 20px; display: block;}
.mB30{margin-bottom: 30px; display: block;}
.mT0{ margin-top: 0px; display: block;}
.mT5{ margin-top: 5px; display: block;}
.mT10{margin-top: 10px; display: block;}
.mT15{margin-top: 15px; display: block;}
.mT20{margin-top: 20px; display: block;}
.mT30{margin-top: 30px; display: block;}
.mL5{ margin-left: 5px; display: block;}
.mL10{margin-left: 10px; display: block;}
.mL15{margin-left: 15px; display: block;}
.mL20{margin-left: 20px; display: block;}
.mL30{margin-left: 30px; display: block;}
.mL35{margin-left: 35px; display: block;}
.mL40{margin-left: 40px; display: block;}
.mR5{ margin-right: 5px;  display: block;}
.mR10{margin-right: 10px; display: block;}
.mR15{margin-right: 15px; display: block;}
.mR20{margin-right: 20px; display: block;}
.mR30{margin-right: 30px; display: block;}
.pB5{ padding-bottom: 5px;  display: block;}
.pB10{padding-bottom: 10px; display: block;}
.pB15{padding-bottom: 15px; display: block;}
.pB20{padding-bottom: 20px; display: block;}
.pB30{padding-bottom: 30px; display: block;}
.pT5{padding-top: 5px; display: block;}
.pT10{padding-top: 10px; display: block;}
.pT15{padding-top: 15px; display: block;}
.pT20{padding-top: 20px; display: block;}
.pT30{padding-top: 30px; display: block;}
.pR5{padding-right: 5px; display: block;}
.pR10{padding-right: 10px; display: block;}
.pR15{padding-right: 15px; display: block;}
.pR20{padding-right: 20px; display: block;}
.pR30{padding-right: 30px; display: block;}

/*-------------------------------------*/
/* コンテンツを左に右に振り分ける */
/*-------------------------------------*/

/* float */
.fL { float : left; display: block;}
.fR { float : right; display: block;}

/* float幅指定 */
.w500 {
	width: 500px;
}

/* float幅指定 */
.w400 {
	width: 400px;
}

/* float幅指定 */
.w300 {
	width: 300px;
}

/* textAlign */
.tC{ text-align: center; display: block; margin:0 auto;}
.tR{ text-align: right; display: block; margin:0 auto;}
.tL{ text-align: left; display: block; margin:0 auto;}

/*-------------------------------------*/
/* 浮動コンテンツのクリア */
/*-------------------------------------*/
.clear{ display: block; clear:both; height:0;}

/*//clearFix Coponents//*/
.clear {clear:both;}
.clearfix{ display:block;} 
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
 }
 
.clearfix:after {
	content: url(pixel.gif);
	display: block;
	clear: both;
	height: 0;
}

/*-------------------------------------*/
/*
imgタグを含む<a>タグにクラスとして指定することで、
ロールオーバー時にハイライト表示　＜白＞
*/
/*-------------------------------------*/
.innerBorderWh a:hover img {
	margin: -1px;
	border: solid 1px #ccc;
}

/**//* for IE6 *//**/
* html .innerBorderWh a:hover {
	zoom: 1;
}
	* html .innerBorderWh a:hover img {
		/* for BackCompat mode
			margin-left: -2px;
			margin-right: -2px;
		over here */
		float: left;
		position: relative;
	}


/*-------------------------------------*/
/*
imgタグを含む<a>タグにクラスとして指定することで、
ロールオーバー時にハイライト表示　＜黄色＞
*/
/*-------------------------------------*/
.innerBorderYellow a:hover img {
	margin: -1px;
	border: solid 1px yellow;
}

/**//* for IE6 *//**/
* html .innerBorderYellow a:hover {
	zoom: 1;
}
	* html .innerBorderYellow a:hover img {
		/* for BackCompat mode
			margin-left: -2px;
			margin-right: -2px;
		over here */
		float: left;
		position: relative;
	}


/*-------------------------------------*/
/*
imgタグを含む<a>タグにクラスとして指定することで、
ロールオーバー時にハイライト表示　＜グレー＞
*/
/*-------------------------------------*/

.innerBorder a:hover img {
	margin: -1px;
	border: solid 1px #ccc;
}

/**//* for IE6 *//**/
* html .innerBorder a:hover {
	zoom: 1;
}
	* html .innerBorder a:hover img {
		/* for BackCompat mode
			margin-left: -6px;
			margin-right: -6px;
		over here */
		float: left;
		position: relative;
	}


/*-------------------------------------*/
/* 1pxの仕切り線を表示 */
/*-------------------------------------*/

/*//1px border//*/
div.border{
	width:100%;
	height:1px;
	background-color:#ccc;
	overflow:hidden;
}

/* --- ナビゲーションバー --- */
div.nav {
	width: 230px; /* ナビゲーションの幅 */
}

/* --- メニューエリア --- */
div.nav ul.nl {
margin: 0;
padding: 0;
list-style-type: none;
text-align: left;
}

/* --- メニュー項目 --- */
div.nav ul.nl li {
margin-bottom: 2px; /* 項目の下マージン */
border-bottom: 1px #8ca654 dotted; /* 項目の下境界線 */
}

/* --- リンク --- */
div.nav ul.nl li a {
	display: block;
	position: relative; /* IE6用 */
	padding: 12px 20px; /* リンクエリアのパディング（上下、左右） */
	background-repeat: repeat-y;
	background-position: right;
	background-image: url(../img/ver_menu5_7off.gif);
	background-color: #d5eba5; /* リンクエリアの背景 */
	color: #404040; /* 文字色 */
	text-decoration: none; /* テキストの下線（なし） */
}
/* --- ポイント時の設定 --- */
div.nav ul.nl li a:hover {
	background-repeat: repeat-y;
	background-position: right;
	background-image: url(../img/ver_menu5_6on.gif);
	background-color: #dbeeb1; /* ポイント時の背景 */
	text-decoration: underline; /* テキストの下線（あり） */
}

/* --- メニュー項目（製品分類別） --- */
div.nav ul.nl2 li {
margin-bottom: 2px; /* 項目の下マージン */
border-bottom: 1px #8ca654 dotted; /* 項目の下境界線 */
}

/* --- リンク（製品分類別） --- */
div.nav ul.nl2 li a {
	display: block;
	position: relative; /* IE6用 */
	padding: 12px 20px; /* リンクエリアのパディング（上下、左右） */
	background-repeat: repeat-y;
	background-position: right;
	background-image: url(../../../index/img/ver_menu5_3off.gif);
	background-color: #d5eba5; /* リンクエリアの背景 */
	color: #404040; /* 文字色 */
	text-decoration: none; /* テキストの下線（なし） */
}
/* --- ポイント時の設定（製品分類別） --- */
div.nav ul.nl2 li a:hover {
	background-repeat: repeat-y;
	background-position: right;
	background-image: url(../../../index/img/ver_menu5_6on.gif);
	background-color: #dbeeb1; /* ポイント時の背景 */
	text-decoration: underline; /* テキストの下線（あり） */
}

/* --- メニュー項目（製品分類別） --- */
div.nav ul.nl3 li {
margin-bottom: 2px; /* 項目の下マージン */
border-bottom: 1px #8ca654 dotted; /* 項目の下境界線 */
}

/* --- リンク（製品分類別） --- */
div.nav ul.nl3 li a {
	display: block;
	position: relative; /* IE6用 */
	padding: 12px 20px; /* リンクエリアのパディング（上下、左右） */
	background-repeat: repeat-y;
	background-position: right;
	background-image: url(../../../index/img/ver_menu5_4off.gif);
	background-color: #d5eba5; /* リンクエリアの背景 */
	color: #404040; /* 文字色 */
	text-decoration: none; /* テキストの下線（なし） */
}
/* --- ポイント時の設定（製品分類別） --- */
div.nav ul.nl3 li a:hover {
	background-repeat: repeat-y;
	background-position: right;
	background-image: url(../../../index/img/ver_menu5_6on.gif);
	background-color: #dbeeb1; /* ポイント時の背景 */
	text-decoration: underline; /* テキストの下線（あり） */
}

/* --- メニュー項目（製品別） --- */
div.nav ul.nl4 li {
margin-bottom: 2px; /* 項目の下マージン */
border-bottom: 1px #8ca654 dotted; /* 項目の下境界線 */
}

/* --- リンク（製品別） --- */
div.nav ul.nl4 li a {
	display: block;
	position: relative; /* IE6用 */
	padding: 12px 20px; /* リンクエリアのパディング（上下、左右） */
	background-repeat: repeat-y;
	background-position: right;
	background-image: url(../img/ver_menu5_2off.gif);
	background-color: #d5eba5; /* リンクエリアの背景 */
	color: #404040; /* 文字色 */
	text-decoration: none; /* テキストの下線（なし） */
}
/* --- ポイント時の設定（製品別） --- */
div.nav ul.nl4 li a:hover {
	background-repeat: repeat-y;
	background-position: right;
	background-image: url(../img/ver_menu5_1off.gif);
	background-color: #dbeeb1; /* ポイント時の背景 */
	text-decoration: underline; /* テキストの下線（あり） */
}