@charset "utf-8";
.products__list_wrap {
	width: 100%;
	height: auto;
	padding: 90px 0 0;
	position: relative;
}
	.products__list_wrap::before {
		content: "";
		display: block;
		width: 1px;
		height: 30px;
		background-color: var(--color--black);
		position: absolute;
		top: 30px;
		left: 50%;
		transform: translateX(-50%);
		pointer-events: none;
	}

.products__list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	/* column-gap: 18px;
	row-gap: 30px; */
	column-gap: 6px;
	row-gap: 20px;
	width: 100%;
	height: auto;
}
	.products__list__item {
		width: auto;
		height: auto;
	}
		.products__list__item__link {
			display: block;
			width: 100%;
			height: auto;
		}
			.products__list__item__image {
				width: 100%;
				height: auto;
				overflow: hidden;
			}
			._soldout .products__list__item__image {
				position: relative;
			}
				.products__list__item__image img {
					width: 100%;
					height: auto;
				}
				._soldout .products__list__item__image::before {
					content: "SOLD OUT";
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					height: 100%;
					background-color:rgba(33 ,33 ,33 ,.4);
					font-size: 14px;
					font-weight: 400;
					line-height: calc(16 / 14);
					letter-spacing: 0.05em;
					color: var(--color--white);
					position: absolute;
					top: 0;
					left: 0;
					z-index: 3;
				}
			.products__list__item__content {
				width: 100%;
				height: auto;
				padding: 10px 0;
			}
				.products__list__item__label {
					display: flex;
					justify-content: flex-start;
					align-items: flex-start;
					flex-wrap: wrap;
					column-gap: 5px;
					row-gap: 3px;
					width: 100%;
					height: auto;
					margin: 0 auto 10px; 
				}
					.products__list__item__label__item {
						display: flex;
						justify-content: center;
						align-items: center;
						width: auto;
						height: auto;
						padding: 4px;
						border: solid 1px var(--color--black);
						font-family: "Noto Sans JP", "Roboto", sans-serif;
						font-size: 10px;
						font-weight: 400;
						line-height: calc(11 / 10);
						letter-spacing: 0.05em;
						text-indent: 0.05em;
						color: var(--color--black);
					}
				.products__list__item__category {
					width: 100%;
					height: auto;
					margin: 0 auto 10px;
					font-family: "Roboto", sans-serif;
					font-size: 10px;
					font-weight: 400;
					line-height: calc(11 / 10);
					letter-spacing: 0.05em;
					color: var(--color--gray1);
				}
				.products__list__item__name {
					width: 100%;
					height: auto;
					margin: 0 auto 5px;
					font-family: "Roboto", sans-serif;
					font-size: 14px;
					font-weight: 400;
					line-height: calc(16 / 14);
					letter-spacing: 0.05em;
					color: var(--color--black);
				}
				.products__list__item__price {
					width: 100%;
					height: auto;
					font-family: "Roboto", sans-serif;
					font-size: 12px;
					font-weight: 400;
					line-height: calc(14 / 12);
					letter-spacing: 0.05em;
					color: var(--color--black);
				}
			@media (any-hover: hover) {
				.products__list__item__image img {
					transition: .4s;
					opacity: 1;
					transform: scale(1);
				}
				.products__list__item__link:hover .products__list__item__image img {
					opacity: .8;
					transform: scale(1.02);
				}
			}
				.products__list__item__personal {
					width: 100%;
					height: auto;
					margin: 0 auto 10px;
					font-size: 10px;
					font-weight: 500;
					line-height: calc(15 / 10);
					letter-spacing: 0.05em;
					color: var(--color--gray1);
				}
					.products__list__item__personal__name {
						margin-right: 10px;
					}
				.products__list__item__size,
				.products__list__item__color {
					width: 100%;
					height: auto;
					font-family: "Roboto", sans-serif;
					font-size: 12px;
					font-weight: 400;
					line-height: calc(14 / 12);
					letter-spacing: 0.05em;
					color: var(--color--black);
				}
				.products__list__item__size {
					margin-bottom: 5px;
				}

#recommend {
	width: 100%;
	height: auto;
}
	.recommend__inner {
		width: 100%;
		max-width: 1000px;
		height: auto;
		margin: 0 auto;
	}
		#recommend .products__list {
			grid-template-columns: repeat(6, 1fr);
		}
				#recommend .products__list__item__link {
					position: relative;
				}
					#recommend .products__list__item__label {
						width: auto;
						column-gap: 5px;
						row-gap: 0px;
						margin: 0;
						position: absolute;
						top: 8px;
						left: 8px;
						z-index: 3;
					}
						#recommend .products__list__item__label__item {
							border: solid 1px var(--color--white);
							color: var(--color--white);
						}

#staff_board {
	width: 100%;
	height: auto;
}
	.staff_board__inner {
		width: 90%;
		max-width: 1000px;
		height: auto;
		margin: 0 auto;
	}
		.staff_board__txt {
			width: 100%;
			height: auto;
			margin: 25px auto;
			font-size: 14px;
			font-weight: 400;
			line-height: calc(21 / 14);
			letter-spacing: 0.05em;
			color: var(--color--black);
		}
		/* #recommend .products__list {
			grid-template-columns: repeat(5, 1fr);
			column-gap: 15px;
		} */
				#staff_board .products__list__item__link {
					position: relative;
				}
					#staff_board .products__list__item__label {
						width: auto;
						column-gap: 5px;
						row-gap: 0px;
						margin: 0;
						position: absolute;
						top: 8px;
						left: 8px;
						z-index: 3;
					}
						#staff_board .products__list__item__label__item {
							border: solid 1px var(--color--white);
							color: var(--color--white);
						}
		.staff_board__btn_wrap {
			width: 186px;
			height: 44px;
			margin: 20px auto 0;
		}

/* Tablet ================================================== */
@media all and (max-width: 719px){
.products__list {
	grid-template-columns: repeat(2, 1fr);
	column-gap: 10px;
	row-gap: 20px;
}
	.products__list__item {
		width: calc((195 / 440) * 100vw);
	}

/* recommend */
	.recommend__inner {
		width: calc((400 / 440) * 100%);
	}
		#recommend .products__list {
			grid-template-columns: repeat(2, 1fr);
			column-gap: 10px;
			row-gap: 20px;
		}
			#recommend .products__list__item {
				width: calc((195 / 440) * 100vw);
			}

/* staff_board */
	.staff_board__inner {
		width: calc((400 / 440) * 100%);
	}
		.staff_board__txt {
			margin: 20px auto;
		}
		#staff_board .products__list {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			column-gap: 0;
			row-gap: 10px;
			padding: 0;
			margin: 0 auto;
		}
			#staff_board .products__list__item {
				width: calc((195 / 400) * 100%);
			}
			#staff_board .products__list__item:nth-of-type(5) {
				display: none;
			}
		.staff_board__btn_wrap {
			margin: 40px auto 0;
		}
}