@charset "utf-8";
.products__search {
	width: 100%;
	height: auto;
}
	.products__search__wrap {
		width: 100%;
		max-width: 500px;
		height: auto;
		margin: 0 auto;
	}
		.products__search__category {
			width: 100%;
			height: auto;
			border: solid 1px var(--color--lightgray1);
		}
			.products__search__category__heading {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				width: 100%;
				height: auto;
				padding: 17px 0 17px 20px;
				position: relative;
				cursor: pointer;
				transition: .4s;
			}
			.products__search__category__heading._open {
				padding: 20px 0 10px 20px;
			}
				.products__search__category__heading__name {
					width: 100%;
					height: auto;
					font-size: 14px;
					font-weight: 500;
					line-height: calc(16 / 14);
					letter-spacing: 0.05em;
					color: var(--color--black);
				}
				.products__search__category__heading::before,
				.products__search__category__heading::after {
					content: "";
					display: block;
					position: absolute;
					top: 25px;
					right: 26px;
					transform: translate(50%, -50%);
					background-color: var(--color--black);
					transition: .4s;
				}
				.products__search__category__heading::before {
					width: 12px;
					height: 1px;
				}
				.products__search__category__heading::after {
					width: 1px;
					height: 12px;
				}
				.products__search__category__heading._open::before,
				.products__search__category__heading._open::after {
					top: 28px;
				}
				.products__search__category__heading._open::after {
					transform: translate(50%, -50%) rotate(90deg);
				}
			.products__search__category__details {
				display: none;
				width: 100%;
				height: auto;
				padding: 0 20px 20px;
			}
				.category__head {
					width: 100%;
					height: auto;
					margin: 0 auto 15px;
				}
					.category__tab_wrap {
						display: grid;
						grid-template-columns: 1fr 1fr 1fr;
						gap: 5px;
						width: 100%;
						height: auto;
					}
						.category__tab {
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							width: 100%;
							height: 58px;
							padding: 1px 0 0;
							border-radius: 3px;
							border: solid 1px var(--color--lightgray2);
							background-color: var(--color--lightgray2);
							cursor: pointer;
						}
						.category__tab._active {
							border: solid 1px var(--color--black);
							background-color: var(--color--black);
							pointer-events: none;
						}
							.category__tab__name_en {
								font-size: 14px;
								font-weight: 400;
								line-height: calc(16 / 14);
								letter-spacing: 0.05em;
								text-align: center;
								color: var(--color--gray2);
							}
							._active .category__tab__name_en {
								font-weight: 700;
								color: var(--color--white);
							}
							.category__tab__name_ja {
								font-size: 12px;
								font-weight: 500;
								line-height: calc(18 / 12);
								letter-spacing: 0.05em;
								text-align: center;
								color: var(--color--gray2);
							}
							._active .category__tab__name_ja {
								font-weight: 700;
								color: var(--color--white);
							}
					@media (any-hover: hover) {
						.category__tab {
							transition: .4s;
						}
						.category__tab:hover {
							border: solid 1px var(--color--black);
						}
							.category__tab__name_en {
								transition: .4s;
							}
							.category__tab:hover .category__tab__name_en {
								color: var(--color--black);
							}
							.category__tab__name_ja {
								transition: .4s;
							}
							.category__tab:hover .category__tab__name_ja {
								color: var(--color--black);
							}
							.category__tab._active:hover .category__tab__name_en,
							.category__tab._active:hover .category__tab__name_ja {
								color: var(--color--white);
							}
					}
				.category__body {
					width: 100%;
					height: auto;
					margin: 0 auto;
				}
					.category__list_wrap {
						display: none;
						width: 100%;
						height: auto;
					}
						.category__list {
							display: grid;
							grid-template-columns: repeat(5, 1fr);
							column-gap: 2.5px;
							row-gap: 10px;
							width: 100%;
							height: auto;
						}
							.category__list__item {
								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: center;
								width: 100%;
								height: auto;
								padding: 5px 0 9px;
								background-color: var(--color--white);
								border: solid 1px var(--color--black);
							}
								.category__list__item__icon {
									width: 43px;
									height: auto;
									margin: 0 auto -1.5px;
								}
									.category__list__item__icon svg {
										width: 100%;
										height: auto;
										fill: var(--color--black);
										stroke: var(--color--black);
									}
									._beauty .category__list__item__icon svg {
										fill: var(--color--black);
										stroke: none;
									}
									._school .category__list__item__icon svg {
										fill: none;
										stroke: var(--color--black);
									}
									._twill .category__list__item__icon svg {
										fill: none;
										stroke: var(--color--black);
									}
									._weekend .category__list__item__icon svg {
										fill: none;
										stroke: var(--color--black);
									}
									._travel .category__list__item__icon svg {
										fill: none;
										stroke: var(--color--black);
									}
								.category__list__item__name {
									width: 100%;
									height: auto;
									margin: 0 auto;
									font-size: 12px;
									font-weight: 400;
									line-height: calc(14 / 12);
									letter-spacing: 0em;
									text-align: center;
									color: var(--color--black);
								}
						@media (any-hover: hover) {
							.category__list__item {
								transition: .4s;
							}
							.category__list__item:hover {
								background-color: var(--color--black);
							}
									.category__list__item__icon svg {
										transition: .4s;
									}
									.category__list__item:hover .category__list__item__icon svg {
										fill: var(--color--white);
										stroke: var(--color--white);
									}
									.category__list__item._beauty:hover  .category__list__item__icon svg {
										fill: var(--color--white);
										stroke: none;
									}
									.category__list__item._school:hover .category__list__item__icon svg {
										fill: none;
										stroke: var(--color--white);
									}
									.category__list__item._twill:hover .category__list__item__icon svg {
										fill: none;
										stroke: var(--color--white);
									}
									.category__list__item._weekend:hover .category__list__item__icon svg {
										fill: none;
										stroke: var(--color--white);
									}
									.category__list__item._travel:hover .category__list__item__icon svg {
										fill: none;
										stroke: var(--color--white);
									}
								.category__list__item__name {
									transition: .4s;
								}
								.category__list__item:hover .category__list__item__name {
									color: var(--color--white);
								}
						}
		.products__search__btn_area {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: auto;
			margin: 5px auto 0;
			position: relative;
		}
			.products__search__btn_area::after {
				content: "";
				display: block;
				width: 1px;
				height: 100%;
				background-color: var(--color--lightgray1);
				position: absolute;
				top: 0;
				left: 50%;
				transform: translateX(-50%);
				pointer-events: none;
			}
			.products__search__btn_wrap {
				width: 50%;
				height: 50px;
			}
				.products__search__btn {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					height: 100%;
					background-color: var(--color--white);
					border: solid 1px var(--color--lightgray1);
					cursor: pointer;
				}
				.products__search__btn._refine {
					border-right: none !important;
				}
				.products__search__btn._sort {
					border-left: none !important;
				}
					.products__search__btn__icon {
						width: 18px;
						height: auto;
						margin-right: 10px;
					}
						.products__search__btn__icon svg {
							stroke: var(--color--black);
						}
					.products__search__btn__txt {
						font-size: 14px;
						font-weight: 400;
						line-height: calc(16 / 14);
						letter-spacing: 0.05em;
						color: var(--color--black);
					}
		@media (any-hover: hover) {
			.products__search__btn_area::after {
				transition: .4s;
			}
			.products__search__btn_area:hover::after {
				background-color: var(--color--black);
			}
				.products__search__btn {
					transition: .4s;
				}
				.products__search__btn:hover {
					border: solid 1px var(--color--black);
					background-color: var(--color--black);
				}
					.products__search__btn__icon svg {
						transition: .4s;
					}
					.products__search__btn:hover .products__search__btn__icon svg {
						stroke: var(--color--white);
					}
					.products__search__btn__txt {
						transition: .4s;
					}
					.products__search__btn:hover .products__search__btn__txt {
						color: var(--color--white);
					}
		}

/* Tablet ================================================== */
@media all and (max-width: 719px){
			.products__search__category__heading._open {
				padding: 20px 0 15px 20px;
			}
					.category__tab_wrap {
						gap: 7.5px;
					}
						.category__list {
							grid-template-columns: repeat(3, 1fr);
							column-gap: 7px;
						}
								.category__list__item__icon {
									width: 50px;
									margin: 0 auto;
								}
}