/* CSS Document */


/*======================================================================*
   [ contentsWidth ]
 *======================================================================*/

.contentsWidth {
	padding: 0 !important;
	background: url(../img/bg-main.jpg) 19px top repeat-y #5b5f3a !important;
	color: #593d18 !important;
}

.contentsWidth .inner {
	padding-bottom: 50px;
	background: url(../img/bg-main_b.gif) 19px bottom no-repeat;
}

.contentsWidth img {
	width: auto;
	height: auto;
}


/*======================================================================*
   [ title ]
 *======================================================================*/

#title {
	width: 980px;
	height: 135px;
	background: url(../img/text-title.jpg) left top no-repeat;
	text-indent: -9999px;
}


/*======================================================================*
   [ navi ]
 *======================================================================*/

ul#navi {
	width: 781px;
	height: 60px;
	padding: 0 99px 20px 100px;
	background: url(../img/bg-navi.gif) left top repeat-x #5B5F3A;
}

ul#navi li {
	width: 170px;
	height: 60px;
	float: left;
}

ul#navi li.w_accessory { width: 271px; }

ul#navi li a {
	/*\*/
	overflow: hidden;
	/**/
	width: 170px;
	height: 60px;
	background-image: url(../img/btn-navi.gif);
	text-indent: -9999px;
	display: block;
}

ul#navi li.key_holder a { background-position: 0px 0px; }
ul#navi li.key_holder a:hover { background-position: 0px -60px; }
ul#navi li.cleaner a { background-position: -170px 0px; }
ul#navi li.cleaner a:hover { background-position: -170px -60px; }
ul#navi li.card_case a { background-position: -340px 0px; }
ul#navi li.card_case a:hover { background-position: -340px -60px; }
ul#navi li.w_accessory a { width: 271px; background-position: -510px 0px; }
ul#navi li.w_accessory a:hover { background-position: -510px -60px; }


/*======================================================================*
   [ coution ]
 *======================================================================*/

.coution {
	padding: 20px 0 10px 0;
	background: #5b5f3a;
	color: #ffffff;
	text-align: center;
	font-weight: bold;
}


/*======================================================================*
   [ section ]
 *======================================================================*/

.section {
	padding: 0 22px 0 23px;
	background: url(../img/bg-title_l.gif) 10px top no-repeat;
}


/*======================================================================*
   [ btn-pagetop ]
 *======================================================================*/

.btn-pagetop {
	padding: 12px 40px 47px 40px;
	clear: both;
}

.btn-pagetop a {
	/*\*/
	overflow: hidden;
	/**/
	width: 79px;
	height: 17px;
	margin: 0 0 0 auto;
	background: url(../img/btn-pagetop.gif) left top no-repeat;
	text-indent: -9999px;
	display: block;
}


/*======================================================================*
   [ h3 ]
 *======================================================================*/

h3 {
	height: 49px;
	margin-bottom: 12px;
	padding: 0 12px;
	color: #d8cb9f;
	line-height: 49px;
	font-weight: bold;
	text-align: right;
}

.h3 {
	background: url(../img/bg-title_s.gif) 8px 10px no-repeat;
}

.h3 h3 {
	margin-bottom: 30px;
}

h3.key_holder { background: url(../img/h3-key_holder.gif) 12px 14px no-repeat; }
h3.cleaner { background: url(../img/h3-cleaner.gif) 22px 14px no-repeat; }
h3.card_case { background: url(../img/h3-card_case.gif) 22px 14px no-repeat; }
h3.w_accessory { background: url(../img/h3-w_accessory.gif) 12px 14px no-repeat; }


/*======================================================================*
   [ h4 ]
 *======================================================================*/

h4 {
	width: 287px;
	height: 32px;
	margin-bottom: 20px;
	text-indent: -9999px;
}

h4.yak18 { background: url(../img/h4-yak18.gif) left top no-repeat; }
h4.yak19 { background: url(../img/h4-yak19.gif) left top no-repeat; }
h4.yak09 { background: url(../img/h4-yak09.gif) left top no-repeat; }
h4.yak14 { background: url(../img/h4-yak14.gif) left top no-repeat; }
h4.yak15 { background: url(../img/h4-yak15.gif) left top no-repeat; }
h4.yak17 { background: url(../img/h4-yak17.gif) left top no-repeat; }
h4.yak16 { background: url(../img/h4-yak16.gif) left top no-repeat; }
h4.yak10 { background: url(../img/h4-yak10.gif) left top no-repeat; }
h4.yak11 { background: url(../img/h4-yak11.gif) left top no-repeat; }
h4.yak12 { background: url(../img/h4-yak12.gif) left top no-repeat; }
h4.yak13 { background: url(../img/h4-yak13.gif) left top no-repeat; }
h4.yaq01 { background: url(../img/h4-yaq01.gif) left top no-repeat; }
h4.bear01 { background: url(../img/h4-bear01.gif) left top no-repeat; }
h4.bear02 { background: url(../img/h4-bear02.gif) left top no-repeat; }
h4.bear03 { background: url(../img/h4-bear03.gif) left top no-repeat; }
h4.yak20 { background: url(../img/h4-yak20.png) left top no-repeat; }
h4.yak21 { background: url(../img/h4-yak21.png) left top no-repeat; }
h4.yak22 { background: url(../img/h4-yak22.png) left top no-repeat; }
h4.yak23 { background: url(../img/h4-yak23.png) left top no-repeat; }
h4.yak24 { background: url(../img/h4-yak24.png) left top no-repeat; }
h4.yrk43 { background: url(../img/h4-yrk43.png) left top no-repeat; }
h4.yrk46 { background: url(../img/h4-yrk46.png) left top no-repeat; }
h4.yrk47 { background: url(../img/h4-yrk47.png) left top no-repeat; }
h4.yrk48 { background: url(../img/h4-yrk48.png) left top no-repeat; }


/*======================================================================*
   [ goods-box ]
 *======================================================================*/

.goods-box {
	width: 287px;
	padding: 10px 12px 0 12px;
	border-right: 1px dashed #ae9e66;
	border-bottom: 1px dashed #ae9e66;
	float: left;
}

.no-line {
	border-right: none;
}

.goods-box .img {
	padding-bottom: 20px;
}

.goods-box .price,
.goods-box .color {
	padding-bottom: 7px;
}

.goods-box .price strong {
	font-size: 167%;
	font-family: "Arial", "Verdana";
}

.goods-box .price span {
	font-size: 92%;
}

.goods-box .details {
	padding-bottom: 10px;
	font-size: 92%;
	line-height: 120%;
}

.goods-box .btn-details {
	padding-bottom: 10px;
}

.goods-box .btn-details a {
	/*\*/
	overflow: hidden;
	/**/
	width: 138px;
	height: 30px;
	margin: 0 auto;
	background: url(../img/btn-details.gif) left top no-repeat;
	text-indent: -9999px;
	display: block;
}

.goods-box .btn-details a:hover { background-position: left bottom; }


/*======================================================================*
   [ clearfix ] 
 *======================================================================*/

ul#navi:after, .section:after {
	content: "";
	display: block;
	clear: both;
	height: 0;
}
ul#navi, .section { display: inline-block; } /* IE7,MacIE */
ul#navi, .section { display: block; } /* Opera,Safari */

/* Mac版IEのみに適用 \*//*/
ul#navi, .section { overflow: hidden; }
/* */