body{
	margin:0px auto;
	text-align:left;
	width:100%;
	min-width:1000px;
}


/*******************************
main
*******************************/
#main{
	width:100%;
	background:url(../product/images/back.png) no-repeat top center, url(../images/back_bottom.jpg) no-repeat bottom center;
	position: relative;
}


/*******************************
contents
*******************************/
#contents{
	overflow:hidden;
	width:100%;
}


#contents .inner{
	background: #f0f0f0;
	width: 1000px;
	margin: 0px auto 0px auto;
	padding:0px 0px 0px 0px;
}

/*******************************
検索
*******************************/
#contents .inner .kensaku_bg{
	background: #fff;
	margin: 0px 0px 20px 0px;
	padding: 10px 0px 10px 0px;
}

#contents .inner .kensaku1{
	background: #000;
	margin: 0;
	padding: 0;
}
#contents .inner .kensaku2{
	background: none;
	display: block;
	margin: 0px 0px 10px 0px;
	padding: 0;
}



.form {
  height: 35px;
  margin: 0;
  padding: 0px 0px 0px 0px ;
}



input[type="search"] {
  background-color: #444444;
  border: 0;
  height: 35px; 
  width: 925px;
  padding: 0 10px; 
  position: absolute;
  margin: 0px 0px 0px 60px;
  font-size: 14px;
  color: #FFFFFF;
}

input[type="image"]  {
  border: 0;
  padding: 0;
  width: 35px;
  height: 35px; 
  position: absolute; 
  margin: 0px 0px 0px 0px;
}

.kensaku_icon{
  background: url(../news/images/kensaku_on.jpg);
  width: 35px;
  height: 35px;
  margin: 0px 0px 0px 15px;
  padding: 0px  0px  0px  0px; 
  position:absolute;
}

input[type="image"]:hover {
 opacity: 0;
}


/*checkbox */
.bg_checkbox{
margin: 10px 0px 10px 15px;
padding: 0px 0px;
}


.bg_checkbox li {
    position: relative;
    display: inline-block;
    margin: 0px 5px 0px 0px;
    padding: 0px 10px 0px 10px;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 1px;
	line-height: 2.5em;
}
 
.bg_checkbox input {
    position: absolute;
    top: 0;
    opacity: 0;
    width: 100%;  
    height: 100%;
	cursor: pointer;
}
 
.bg_checkbox input[type="checkbox"] + label {
    display: block;
    background-image:url(../product/images/bg_checkbox_off.png);
    background-size: 24px;
    background-position: left center;
    background-repeat: no-repeat;
    padding: 0px 0 0 30px;
}
 
.bg_checkbox input[type="checkbox"]:checked + label {
    background-image: url(../product/images/bg_checkbox_on.png);
}



/*******************************
thumbnail
*******************************/
#contents .thumbnail_box{
padding: 0px 0px 15px 25px;
margin: 0;
}


#contents .thumbnail{
    width: 231px;
	margin: 0px 12px 12px 0px;
    float: left;
    display: inline; 
	overflow:hidden;
	position:relative;	/* 相対位置指定 */

}

#contents .thumbnail_title{
    width: 231px;
	padding: 0;
	margin: 0;
    font-size: 14px;
	color: #FFF;
	line-height: 2.5em;
	text-align: center;
}



#contents .thumbnail .caption {
font-size:12px;
text-align: center;
padding:100px 0px 0px 0px ;
color:#fff;
margin: 0;
line-height: 1.5em;
}


#contents .thumbnail .caption hr{
width: 0px;
margin: 5px auto 5px auto;
}

#contents .thumbnail .caption:hover hr{
width: 170px;
margin: 5px auto 5px auto;
-webkit-transition:all 0.2s ease;
transition:all 0.2s ease;
}



#contents .thumbnail .caption .price{
font-weight: bold;
font-size: 14px;
}


#contents .thumbnail .mask {
width:			100%;
height:			100%;
position:		absolute;	/* 絶対位置指定 */
top:			0;
left:			0;
opacity:		0;	/* マスクを表示しない */
background-color:	rgba(0,0,0,0.4);	/* マスクは半透明 */
-webkit-transition:	all 0.2s ease;
transition:		all 0.2s ease;
margin: 0;
padding: 0;
}

#contents .thumbnail:hover .mask {
opacity:		1;	/* マスクを表示する */
}





#contents .thumbnail:hover .mask {
opacity:1;	/* マスクを表示する */
transform: scale(1.15,1.15);
        -webkit-transform:scale(1.15,1.15);
        -moz-transform:scale(1.15,1.15);
        -ms-transform:scale(1.15,1.15);
        -o-transform:scale(1.15,1.15);
}


#contents .thumbnail:hover img{

transform: scale(1.10,1.10);
        -webkit-transform:scale(1.10,1.10);
        -moz-transform:scale(1.10,1.10);
        -ms-transform:scale(1.10,1.10);
        -o-transform:scale(1.10,1.10);
-webkit-transition:all 0.2s ease;
transition:all 0.2s ease;
}






.new{
background: url(../news/images/new.png) no-repeat;
width: 83px;
height: 81px;
position: absolute;
margin: 0px 0px 0px 148px;
}



/*******************************
pager
*******************************/


#contents .pager {
	position: relative; 
    overflow: hidden;
	width: 960px;
}
#contents .pager ul {
  position: relative;
  left: 50%; /* リスト全体であるul要素を右に50%移動。つまり先頭を中央に持ってくる感じです。 */
  float: left;
}

#contents .pager ul li {
  position: relative;
  left: -65%; /* 各リスト項目になるli要素を左に50%移動。 */
  float: left;
  list-style: none; /* 項目にぼっちを出したくない場合はこれを設定（今回はあんまり関係ないですが） */
}


#contents .pager .prev a{
	display:block;
	float: inherit;
	background:url(../news/images/yazirusi_prev.png) no-repeat ;
	margin: 0px 35px 0px 0px ;
	padding: 0px 0px 0px 0px;
	width: 15px;
	height: 25px;
}

#contents .pager .prev a:hover ,#contents .pager .prev a:active{
	display:block;
	float: left;
	background:url(../news/images/yazirusi_prev_on2.png) no-repeat ;
	margin: 0px 35px 0px 0px ;
	padding: 0px 0px 0px 0px;
	width: 15px;
	height: 25px;
}



#contents .pager  .number a{
background: #676767;
color: #FFF;
padding:1px 8px 1px 8px;
margin: 0px 5px 0px 5px;
float: left;
line-height: 1.5em;
}

#contents .pager  .number a:hover,  #contents .pager  .number a:active{
background: #000;
color: #ff5200;
padding:1px 8px 1px 8px;
margin: 0px 5px 0px 5px;
float: left;
line-height: 1.5em;
}

#contents .pager  .number_ov a{
background: #000;
color: #ff5200;
padding:1px 8px 1px 8px;
margin: 0px 5px 0px 5px;
float: left;
line-height: 1.5em;
}

#contents .pager  .number_ov a:hover,  #contents .pager  .number_ov a:active{
background: #000;
color: #ff5200;
padding:1px 8px 1px 8px;
margin: 0px 5px 0px 5px;
float: left;
line-height: 1.5em;
}


#contents .pager .next a{
display:block;
background:url(../news/images/yazirusi_next.png) no-repeat ;
margin: 0px 0px 0px 0px;
padding: 0px 0px 5px 35px;
width: 14px;
height: 25px;
float: right;
}


#contents .pager .next a:link,  #contents .pager .next a:visited{
display:block;
background:url(../news/images/yazirusi_next.png) no-repeat ;
margin: 0px 0px 0px 35px;
padding: 0px 0px 5px 0px;
width: 14px;
height: 25px;
float: right;
}


#contents .pager .next a:hover ,#contents .pager .next a:active{
display:block;
background:url(../news/images/yazirusi_next_on2.png) no-repeat ;
margin: 0px 0px 0px 35px;
padding: 0px 0px 5px 0px;
width: 14px;
height: 25px;
float: right;
}






/*******************************
項目によって色替え指定
*******************************/

.sleeve{
background:#5488af;
}

.rubbermat{
background:#b48190;
}

.storagebox{
background: #d66c73;
}


.cardholder{
background: #82a483;
}

.other{
background: #757575;
}