@charset "UTF-8";

.archive-product_container {
	padding-top: 170px;
	padding-bottom: 100px;
	background-image: url(../img/product_bg.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 1946px 2056px;
}

.archive-product_content {
	max-width: 1000px;
	width: 90%;
	margin: auto;
}

.title_container {
	width: 100%;
	padding: 0;
}

.title-en {
	color: #72522d;
	font-size: 59px !important;
}
body.font-large .title-en {
	font-size: calc(59px + 2px) !important;
}
body.font-extra-large .title-en {
	font-size: calc(59px + 6px) !important;
}


.title-ja {
	color: #ff8c05;
	font-size: 20px;
}
body.font-large .title-ja {
	font-size: calc(20px + 2px);
}
body.font-extra-large .title-ja {
	font-size: calc(20px + 6px);
}

.search-results_container {
	width: 95%;
	margin: auto;
	margin-top: 22px;
}

.search-results-text , .search-conditions-text {
	font-weight: 700;
	font-size: 14px;
	line-height: 2;
}
body.font-large .search-results-text , body.font-large .search-conditions-text {
	font-size: calc(14px + 2px);
}
body.font-extra-large .search-results-text , body.font-extra-large .search-conditions-text {
	font-size: calc(14px + 6px);
}

.search-form_container {
	margin-top: 22px;
}

.searchform_wrap {
	display: flex;
	column-gap: 12px;
	align-items: center;
}

.searchform-input {
	max-width: 100%;
	width: clamp(14.688rem, -4.509rem + 76.79vw, 28.125rem) !important;
	padding: 12px 19px !important;
	border-width: 2px !important;
	border-color: #72522d !important;
	border-radius: 24px !important;
	background-color: #ffffff;
}

.button-design {
	padding: 10px;
	border: none;
	border-radius: 50%;
	background-color: #72522d;
	cursor: pointer;
}

.reset_button {
	padding: 12px 20px;
	border: 2px solid #72522d;
	border-radius: 13px;
	background-color: #ffffff;
	font-weight: 700;
	font-size: 12px;
}

.reset_button:hover {
	background-color: #a8a8a8;
	color: #ffffff;
}

.category-select_container , .purchase_container , .sort_container {
	display: flex;
	margin-top: 30px;
	column-gap: 8px;
}

.purchase_container , .sort_container {
	align-items: center;
}

.left-flex_content {
	min-width: 80px;
	font-weight: 700;
}

.category-radio-list , .purchase-check-list {
	display: flex;
	column-gap: 10px;
	flex-wrap: wrap;

	row-gap: 16px;
}

.radio-button , .checkbox {
	display: none !important;
}

.button-text {
	padding: 2px 20px 4px;
	border: 2px solid #72522d;
	border-radius: 13px;
	background-color: #ffffff;
	font-weight: 700;
	font-size: 12px;
	cursor: pointer;
}
body.font-large .button-text {
	font-size: calc(12px + 2px);
}
body.font-extra-large .button-text {
	font-size: calc(12px + 6px);
}

.radio-button:checked + .button-text {
	background-color: #a8a8a8;
	color: #ffffff;
}

.check-text {
	display: inline-block;
	width: 85px;
	padding: 5px 5px 8px;
	border: 2px solid #72522d;
	border-radius: 3px;
	background-color: #ffffff;
	font-weight: 700;
	font-size: 15px;
	text-align: center;
	cursor: pointer;
}
body.font-large .check-text {
	font-size: calc(15px + 2px);
}
body.font-extra-large .check-text {
	font-size: calc(15px + 6px);
}


.checkbox:checked + .check-text {
	background-color: #a8a8a8;
	color: #ffffff;
}

.sort-select {
	width: initial;
	padding: 4px 48px 6px 16px;
	border: 2px solid #72522d;
	border-radius: 0;
	background-color: #ffffff;
	background-image: url(../img/arrow_right.png);
	background-repeat: no-repeat;
	background-position-x: 90%;
	background-position-y: 50%;
}

.product-list_container {
	display: flex;
	margin-top: 30px;
	column-gap: 20px;
	flex-wrap: wrap;
	justify-content: space-between;

	row-gap: 60px;
}

.product-list_container::after {
	display: block;
	width: calc(100% / 4 - 20px);
	content: "";
}

.product-list_container::before {
	display: block;
	width: calc(100% / 4 - 20px);
	order: 1;
	content: "";
}

.product-content {
	width: calc(100% / 4 - 20px);
}

.product-inner img {
	object-fit: contain;
	aspect-ratio: 4/3;
	width: 100%;
	height: 100%;
	background-color: #FFFFFF;
}

.product-img {
	max-width: 100%;
	border-radius: 3px;
}

.content-text_container {
	margin-top: 20px;
}

.category-wrap {
	padding: 2px 20px 4px;
	border: 2px solid #72522d;
	border-radius: 13px;
	background-color: #ffffff;
	font-weight: 700;
	font-size: 12px;
}
body.font-large .category-wrap {
	font-size: calc(12px + 2px);
}
body.font-extra-large .category-wrap {
	font-size: calc(12px + 6px);
}

.product-name {
	display: -webkit-box;
	overflow: hidden;
	margin-top: 10px;
	font-size: 17px;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;

	-webkit-line-clamp: 2;
}
body.font-large .product-name {
	font-size: calc(17px + 2px);
}
body.font-extra-large .product-name {
	font-size: calc(17px + 6px);
}

.product-name a {
	color: #454545;
}

.price-text , .business-name {
	display: inline-block;
	font-weight: 400;
	font-size: 17px;
}
body.font-large .price-text , body.font-large .business-name {
	font-size: calc(17px + 2px);
}
body.font-extra-large .price-text , body.font-extra-large .business-name {
	font-size: calc(17px + 6px);
}

.price-text {
	margin-top: 10px;
}

.business-name {
	display: -webkit-box;
	overflow: hidden;
	margin-top: 5px;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;

	-webkit-line-clamp: 1;
}

.purchase_wrap {
	display: inline-block;
	margin-top: 10px;
	padding: 2px 20px 4px;
	border: 2px solid #72522d;
	border-radius: 3px;
	background-color: #ffffff;
	font-weight: 700;
	font-size: 12px;
}
body.font-large .purchase_wrap {
	font-size: calc(12px + 2px);
}
body.font-extra-large .purchase_wrap {
	font-size: calc(12px + 6px);
}

.archive_pagination-list {
	display: flex;
	margin-top: 70px;
	column-gap: 10px;
	justify-content: center;
	align-items: center;
}

/* .page-numbers {
    background-color: #FFFFFF;
    border: 2px solid #72522D;
    border-radius: 50%;
    padding: 6px 14px;
} */

.page-numbers a {
	color: #454545;
}

.page-numbers.current_archive {
	padding: 6px 14px;
	border: 2px solid #72522d;
	border-radius: 50%;
	background-color: #ff8c05;
	color: #ffffff;
	font-weight: 700;
}

.archive_pagination-item a {
	color: #2c3538;
}

.page-numbers a {
	padding: 6px 14px;
	border: 2px solid #72522d;
	border-radius: 50%;
	background-color: #ffffff;
	transition: all .5s;
}

.page-numbers a:hover {
	background-color: #72522d;
	color: #FFFFFF;
}

.archive_pagination-item a {
	color: #2c3538;
	transition: all .5s;
}

.archive_pagination-item a:hover {
	opacity: 0.7;
}

.archive_pagination-item.prev {
	padding-right: 2px;
	padding-bottom: 9px;
	padding-left: 15px;
	background-image: url(../img/pagenation_prev.png);
	background-repeat: no-repeat;
	background-position-y: bottom;
	background-size: 100%;
}

.archive_pagination-item.next {
	padding-right: 15px;
	padding-bottom: 9px;
	padding-left: 2px;
	background-image: url(../img/pagenation_next.png);
	background-repeat: no-repeat;
	background-position-y: bottom;
	background-size: 100%;
}

@media screen and (max-width: 950px) {
	.product-list_container::after {
		width: calc(100% / 3 - 20px);
	}

	.product-list_container::before {
		width: calc(100% / 3 - 20px);
	}

	.product-content {
		width: calc(100% / 3 - 20px);
	}
}

@media screen and (max-width: 767px) {
	.archive-product_container {
		padding-top: 120px;
		padding-bottom: 46px;
	}
	.title_container {
		width: 95%;
		margin: auto;
	}
	.search-form_container {
		width: 95%;
		margin: auto;
		margin-top: 20px;
	}
	.searchform_wrap {
		justify-content: center;
	}
	.searchform-input {
		padding: 10px 16px !important;
	}
	.category-select_container , .purchase_container , .sort_container {
		margin-top: 26px;
	}
	.category-select_container , .purchase_container {
		flex-direction: column;
		align-items: flex-start;

		row-gap: 8px;
	}
	.content-text_container {
		margin-top: 10px;
	}
	.price-text , .business-name {
		font-size: 14px;
	}
	body.font-large .price-text , body.font-large .business-name {
		font-size: calc(14px + 2px);
	}
	body.font-extra-large .price-text , body.font-extra-large .business-name {
		font-size: calc(14px + 6px);
	}
	.business-name {
		margin-top: 4px;
	}
	.archive_pagination-list {
		margin-top: 16px;
	}
	.product-name {
		-webkit-line-clamp: 1;
	}
}

@media screen and (max-width: 500px) {
	.product-list_container {
		column-gap: 16px;

		row-gap: 36px;
	}

	.product-list_container::after {
		width: calc(100% / 2 - 16px);
	}

	.product-list_container::before {
		width: calc(100% / 2 - 16px);
	}

	.product-content {
		width: calc(100% / 2 - 16px);
	}
}