/*
 * オリジナル
 */

.goodsList {
	width: 960px;
	margin: auto;
}

.resultCtrl {
	border-top: 1px solid #ebebeb;
	padding: 24px 0 0;
}

.sort {
	float: left;
}

.sort li {
	float: left;
    margin: 0 9px 0 6px;
    position: relative;
}

.sort li a,
.sort li span {
    display: inline-block;
    font-size: 14px;
    padding: 6px 35px 5px 13px;
    line-height: 1.2;
    color: #646464;
    position: relative;
}

.sort li a:before,
.sort li span:before {
	content: "\f096";
	font-family: FontAwesome;
	padding-right: 5px;
	display: inline-block;
	width: 13px;
}

.sort li:hover a:before,
.sort li.active span:before {
	content: "\f046";
	font-family: FontAwesome;
	padding-right: 5px;
}

.pager {
    margin: 35px 0 0;
    text-align: right;
}
.pager ul {
	padding-bottom: 25px;
}
.pager li {
    border-radius: 2px;
    margin: 0 4px 0;
    display: inline;
}
.pager li a {
    background: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 0;
    color: #007aff;
    padding: 5px 10px 4px;
    text-decoration: none;
    vertical-align: middle;
}
.pager li.next a,
.pager li.prev a {
    padding: 5px 0 4px;
}
.pager li span {
    background: #dcdcdc;
    border: 1px solid #eaeaea;
    border-radius: 0;
    color: #fff;
    padding: 7px 10px 3px;
    vertical-align: -1px;
}
.pager li span.active {
	vertical-align: middle;
	padding: 5px 10px 4px;
}
.pager li.next span,
.pager li.prev span {
    border: none;
}

.mPager {
	display: none;
}

.subCategory {
	margin: 25px 0 25px;
}

.subCategory ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	grid-gap:10px;
}

.subCategory li {

}

.subCategory li a {
	text-align: center;
	font-size: 15px;
	padding: 10px;
	cursor: pointer;
	display: block;
	border-radius: 5px;
	box-sizing: border-box;
	color: #000;
	background: #ebeaeb;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: normal;
	white-space: nowrap;
}

.subCategory li a:hover {
	opacity: 0.8;
}


@media screen and (max-width: 960px) {
	.goodsList {
		width: 100%;
	}
	
	.resultCtrl {
		padding: 0;
		display: table;
		width: 100%;
		border-bottom: 1px solid #e9e9e9;
	}
	
	.sort {
	    float: none;
	    display: table;
	    font-size: 0;
	    width: 100%;
	}
	
	.sort li {
		display: table-cell;
	    font-size: 15px;
	    text-align: center;
	    vertical-align: middle;
	    width: 33.3333%;
	    margin: 0;
	    padding: 0;
	    background: #f3f3f3;
	    border-right: 1px solid #e9e9e9;
	    box-sizing: border-box;
	    display: table-cell;
	}
	
	.sort li.active {
		background: #fff;
	}
	
	.sort li a,
	.sort li span {
		color: #333333;
		display: block;
	    padding: 8px 0;
	    font-size: 15px;
	    line-height: 1.33333;
	}
	
	.pager {
	    display: none;
	}
	
	.mPager {
	    background: #f0f0f0;
	    border-bottom: 1px solid #dcdcdc;
	    border-top: 1px solid #dcdcdc;
	    display: table;
	    font-size: 14px;
	    height: 55px;
	    position: relative;
	    width: 100%;
	    margin-top: 35px;
	}
	.mPager p {
	    display: table-cell;
	    line-height: 34px;
	    vertical-align: middle;
	}
	.mPager a {
	    color: #333333;
	    display: block;
	    text-decoration: none;
	}
	.mPager .prev {
	    background: #f0f0f0;
	    border-left: 1px solid #dcdcdc;
	    text-align: center;
	    width: 50px;
	}
	.mPager .prev span {
	    font-size: 20px;
	    vertical-align: -4px;
	}
	.mPager .pgNum {
	    left: 50%;
	    margin: 11px 0 0 -50px;
	    position: absolute;
	}
	.mPager .next {
	    background: #f0f0f0;
	    text-align: center;
	    width: 50px;
	}
	.mPager .next span {
	    font-size: 20px;
	    vertical-align: -4px;
	}
	
	.subCategory ul {
		margin: 0 10px;
	}
}


@media only screen and (max-width: 768px) {

}


@media screen and (max-width: 640px) {
	.subCategory {
		margin: 25px 0 15px;
	}
}

/* =======================
  スマホ用のスタイル
======================= */
@media screen and (max-width: 480px) {
	
	.subCategory ul {
		grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
	}
	.subCategory li a {
		font-size: 13px;
	}

}