/*カテゴリ一覧*/

section.products .inr{
	max-width: 1100px;
}
section.products ul{
	align-items: stretch;
	justify-content: flex-start;
}
section.products li{
	width: calc(100% / 4 - 15px);
	text-align: center;
	margin:0 20px 40px 0;
	border: 3px solid #fff;
	box-shadow: 0 0 10px #eeeeee;
}
section.products li:nth-child(4n){
	margin-right: 0;
}
section.products li a{
	display: block;
	cursor: pointer;
	padding: 15px;
}
section.products li a:hover > p{
	color: #329637;
	transition: .3s;
}
section.products li:hover{
	border: 3px solid #329637;
	transition: .3s;
}
section.products li figure{
    position: relative;
    width: 100%;
    overflow: hidden;
}
section.products li figure:before {
    content:"";
    display: block;
    padding-top: 66%; /* 画像比率3:2にするため（高さの比率 ÷ 幅の比率 × 100） */
}
section.products li figure img{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
    margin: auto;
}
section.needs ul{
	align-items: stretch;
}
section.needs ul li{
	display: flex;
    align-items: stretch;
	width: calc(100% / 3 - 10px);
}
section.needs ul li img{
	max-width: 100px;
	display: block;
	margin: 0 auto 30px;
}
section.needs ul li a{
	width: 100%;
	box-shadow: 0px 0px 5px rgba(0,0,0,.1);
	padding: 30px;
	background: #fff;
	/*border: 3px solid #fff;*/
}
section.needs ul li:nth-child(-n+3){
	margin-bottom: 10px;
}
section.needs ul li h4{
	background: #f2f2f2;
	font-size: 16px;
	font-weight: lighter;
	text-align: center;
	padding: 5px 0;
	margin-bottom: 10px;
}
section.needs ul li p{
	font-size: 15px;
}
section.needs ul li a:hover{
	/*border-color: #EB5353;*/
	transition: .3s;
	background: #FFFBDF;
}
section.needs ul li a:hover h4{
	background: #D83A56;
	color: #fff;
	transition: .3s;
}
section.needs ul li a:hover p{
	color: #322c2d;
	transition: .3s;
}
@media screen and (max-width: 1024px) {
	section.products .inr{
		max-width: 800px;
	}
	section.products li{
		width: calc(100% / 3 - 1.4%);
		text-align: center;
		margin:0 2% 4% 0;
	}
	section.products li a{
		padding: 5%;
	}
	section.products li:nth-child(4n){
		margin-right: 2%;
	}
	section.products li:nth-child(3n){
		margin-right: 0;
	}
	section.products li p{
		font-size: 12px;
	}
}
@media screen and (max-width: 700px) {
	section.needs ul li{
		width: calc(100% / 2 - 5px);
	}
	section.needs ul li:nth-child(-n+4){
		margin-bottom: 10px;
	}
}
@media screen and (max-width: 480px) {
	section.needs ul li a{
		padding: 15px;
	}
	section.needs ul li img{
		margin-bottom: 15px;
	}
}
@media screen and (max-width: 400px) {
	section.needs ul li{
		width: 100%;
	}
	section.needs ul li:not(:last-child){
		margin-bottom: 10px;
	}
}

/*カテゴリ内商品一覧（archive）*/

section.main figure{
    position: relative;
    width: 100%;
    margin: 0 auto;
}
section.main figure:before {
    content:"";
    display: block;
    padding-top: 50%; /* 画像比率2:1にするため（高さの比率 ÷ 幅の比率 × 100） */
}
section.main figure img{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
    margin: auto;
}
section.main figure.ico{
	max-width: 100px;
	margin: 0 auto 25px;
}
section.ranking .inr{
	max-width: 1000px;
}
section.ranking ul li{
	width: calc(100% / 3 - 10px);
	background: #fff;
	box-shadow: 0px 0px 10px 2px rgb(0 0 0 / 3%);
	padding: 30px;
	position: relative;
}
section.ranking ul li:before{
	content: url('../img/products/ico_1.png');
	width: 180px;
	transform: scale(0.5);
	position: absolute;
	top: -75px;
	left: 0;
	right: 0;
	margin: 0 auto;
}
section.ranking ul li:nth-child(2):before{
	content: url('../img/products/ico_2.png');
}
section.ranking ul li:nth-child(3):before{
	content: url('../img/products/ico_3.png');
}
section.ranking ul.products_list li:not(:nth-child(4n)){
	margin-right: 0;
}
section.list ul.products_list{
	justify-content: flex-start;
}
@media screen and (max-width: 800px) {
	section.ranking ul li{
		padding: 20px;
	}
}
@media screen and (max-width: 600px) {
	section.ranking ul li:nth-child(n+1){
		width: 100%;
		max-width: 500px;
		margin: 0 auto;
	}
	section.ranking ul li:not(:last-child){
		margin-bottom: 60px;
	}
	section.ranking ul li a{
		display: flex;
	}
	section.ranking ul li a figure{
		width: 50%;
		margin-right: 15px;
	}
}
@media screen and (max-width: 420px) {
	section.ranking ul li{
		padding: 30px;
	}
	section.ranking ul li a{
		display: block;
	}
	section.ranking ul li a figure{
		width: 100%;
	}
}
.sort.flex{
	justify-content: flex-start;
	background: #efefef;
	padding: 20px 30px 10px;
	border-radius: 10px;
}
.sort p{
	margin-right: 2rem;
	margin-bottom: 1rem;
	padding-right: 2rem;
	border-right: 2px solid;
	font-weight: bold;
	font-size: 90%;
}
.sort ul{
	justify-content: flex-start;
}
.sort ul li{
	background: #fff;
    padding: 5px 15px;
    margin-right: 1rem;
    margin-bottom: 1rem;
    border-radius: 30px;
}
.sort ul li button,
.sort ul li a{
	background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
    font-size: 90%;
	color: #808080;
}
.sort ul li:hover button,
.sort ul li:hover a{
	color: #329637;
	transition: .3s;
}
.sort ul li button.select{
	color: #329637;
}

.sort_term.flex{
	justify-content: flex-start;
	background: #efefef;
	padding: 20px 30px 10px 0;
	border-radius: 10px;
}
.sort_term p{
	margin-right: 2rem;
	margin-bottom: 1rem;
	padding-left: 2rem;
	border-left: 2px solid #369039;
	font-weight: bold;
	font-size: 90%;
}
.sort_term ul{
	justify-content: flex-start;
}
.sort_term ul li{
	background: #fff;
    padding: 5px 15px;
    margin-right: 1rem;
    margin-bottom: 1rem;
    border-radius: 30px;
}
.sort_term ul li button,
.sort_term ul li a{
	background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
    font-size: 90%;
	color: #808080;
}
.sort_term ul li:hover button,
.sort_term ul li:hover a{
	color: #329637;
	transition: .3s;
}
.sort_term ul li button.select{
	color: #329637;
}

.term_cat{
	border-bottom: 3px solid #329637;
	padding-bottom: 10px;
  	margin-bottom: 40px;
}

.sale_cat{
	border-bottom: 3px solid #ec6c00;
  	padding-bottom: 10px;
  	margin-bottom: 40px;
}

p.sale_term{
	margin-right: 2rem;
	margin-bottom: 1rem;
	padding-left: 2rem;
	border-left: 2px solid #ec6c00;
	font-weight: bold;
	font-size: 90%;
}