@charset "euc-jp";
/* 標準可変メディア
   メモ : 可変メディアでは、HTML からメディアの高さおよび幅の属性を削除する必要がある
   http://www.alistapart.com/articles/fluid-images/ 
*/
.cl-product-box {
    background: #FFF;
    padding: 50px 5px 50px 5px;
    overflow: hidden;
	width: 100%;
}
		
.cl-productimg {
    float: left;
    margin-right: 5px;
	width: 38%;
}

.cl-productimg img {
  width: 100px;
  height: 170px;
  object-fit: cover;
}

.cl-productsummary {
    font-size: 14px;
    overflow: hidden;
	width: 60%;	
}
.cl-productname {
    font-size: 14px;
    font-weight: bold;
	vertical-align:text-top;
	text-align: left;
}



.item-code a{
	display: block;
	text-decoration: none;
}

.kentei{
	font-size:16px;
	font-weight: 400;
	color: #fff;
	background-color:red;
	line-height: 200%;
	padding: 0 10px;
	margin-bottom: 10px;
	margin-left: 10px;
}



/* デスクトップレイアウト : 769 px 〜最大 1232 px。モバイルレイアウトとタブレットレイアウトからスタイルを継承。 */

@media only screen and (min-width: 769px) {

.cl-productimg {
    float: left;
    margin-right: 20px;
	width: 30%;
}
.cl-productsummary {
    font-size: 14px;	
    overflow: hidden;
	width: 60%;	
}

.cl-product-box {
    background: #FFF;
    padding: 50px 10px 50px 22px;
    overflow: hidden;
	width: 50%;
	float: left;
}
	
.cl-product-box img{
  width: 100%;
  cursor: pointer;
  transition-duration: 0.3s;
}

.cl-product-box:hover img{
  opacity: 0.6;
  transition-duration: 0.3s;
}


}	

/*モバイルレイアウト : 769 px 〜最大 1232 px。モバイルレイアウトとタブレットレイアウトからスタイルを継承*/

@media screen and (max-width: 769px){
		
	
.cl-productname {
    font-size: 12px;
	text-align: center;
}	
	

	
}