@charset "utf-8";

.cathead{ margin-bottom:10px;}
.catnavhd select{ padding:4px; max-width:100%; height:26px; line-height:17px;}

#main .container{
	display: flex;
	align-items:stretch;
	flex-wrap: wrap;
}

#main .container article{
	margin:0 2% 8px 0;
	padding:9px;
	background:#f8f8f7;
	text-align:left;
	float:left;
	width:11rem;
	min-height:15rem; 
	text-align:center;
}

#main article img{
 	display:inline-block;
	width:90%;
	height: auto;
}



#main article .officon{ 
	width:100%;
	position:sticky;
  	bottom:0;
        left:0;

	padding:1px; 
	bottom:2px; 
	right:2px;
	
	background:#FF0004;
	color:#FFFFFF;
	font-size:0.7rem;
}

#main article a{
	display:block;
} 

#main article div.cat{
	display:inline-block;
	width:100%;
	text-align:left;
	font-size:0.6rem;
	font-weight:600;
} 

#main article .name{ 
	text-align:left; 
	line-height:1.4;
	font-weight:normal;
	font-size:0.7rem; 
	color:#000000; 
	overflow:hidden;
	text-overflow:ellipsis; 
}




#main article .pricebox{ text-align:left;}
#main article .price{ font-size: 140%; font-weight: bold; color: #ED5B14;}

.sortbtnbox{ margin-bottom:10px; padding:5px; height:36px; background: #EEEEEE; position:relative;}
.pagenum{ position:absolute; top:5px; right:5px; line-height:26px;}

.catnavhd{ width:100%; position:relative;}
.catnavhd ul{ border-top:1px solid #CCCCCC;}
.catnavhd li{ border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; width:50%; float:left; font-size:80%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; }
.catnavhd li:nth-child(even){ border-right:none;}
.catnavhd .backlinkhd{ border-top:1px solid #CCCCCC;}
.catnavhd ul a{ padding: 10px 25px 10px 10px; color:#333; display:block; position: relative;}
.catnavhd ul a:after{ display: block; content: ""; position: absolute; top: 50%; right: 10px; width: 6px; height: 6px; margin: -4px 0 0 0; border-top: solid 2px #093; border-right: solid 2px #093; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.catnavhd .backlinkhd a{ padding: 10px 10px 10px 25px; color:#333; display:block; position: relative;}
.catnavhd .backlinkhd a:before{ display: block; content: ""; position: absolute; top: 50%; left: 10px; width: 6px; height: 6px; margin: -4px 0 0 0; border-top: solid 2px #093; border-right: solid 2px #093; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }
.catnavhd a:hover{ background:#999999;}


/*カテゴリーで探す*/
#category .itemcat li{ width:100%;}
#category .itemcat li a{ padding:10px; display:block; color:#000; border-top:1px solid #CCC;}
#category .itemcat .sub-menu{ width:100%;}
#category .itemcat .sub-menu li a {
    padding: 8px 0 8px 18px;
    display: block;
    border: 1px solid #FFF;
    border-width: 0 6px 6px;
    background: #f1f1f1;
    color: #333;
    font-size: 0.7rem;
}

/*ブランドで探す*/
#category .brandcat .brandlist li{ margin:0 2% 10px 0; padding:5px; width:32%; float:left;}
#category .brandcat .brandlist li:nth-child(3n){ margin:0 0 10px 0;}


/*ニュースカテゴリー*/
#main .container article.newsList{ margin-bottom:10px; padding:10px; width:100%;}
#main .container article.newsList:nth-child(3n){ margin-bottom:10px;}
#main .container article.newsList:last-child{ margin-bottom:0;}
#main .container article.newsList .img{ padding:5px; width:30%; float:left;}
#main .container article.newsList .txt{ padding:5px; width:70%; float:left;}

@media only screen and (max-width:1060px){
.catnavhd li{ width:50%; float:left;}
}
@media only screen and (max-width:599px){
#main article .pricebox{ font-size:65%;}
}