@charset "utf-8";
#products {
	width: 100%;
	height: auto;
	padding: 50px 0 105px;
}
	.products__inner {
		width: 90%;
		max-width: 1120px;
		height: auto;
		margin: 0 auto;
	}
		.items__heading {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			width: 100%;
			height: auto;
			border-bottom: solid 1px var(--color--gray);
			margin-bottom: 40px;
		}
			.items__heading__main {
				width: auto;
				height: auto;
				margin-right: 21px;
				font-size: 35px;
				font-weight: 700;
				line-height: 1.8;
				letter-spacing: 0.05em;
			}
			.items__heading__sub {
				width: auto;
				height: auto;
				padding-top: 2px;
				font-size: 14px;
				font-weight: 700;
				line-height: 1.8;
				letter-spacing: 0.1em;
			}
		.products__body {
			display: flex;
			flex-direction: row-reverse;
			justify-content: space-between;
			align-items: flex-start;
			width: 100%;
			height: auto;
		}
			.products__sort {
				width: 173px;
				height: auto;
			}
				.products__sort__category {
					width: 100%;
					height: auto;
					margin: 0 auto 30px;
				}
				.products__sort__worries {
					width: 100%;
					height: auto;
				}
					.products__sort__heading {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						width: 100%;
						height: auto;
						padding-bottom: 4px;
						margin: 0 auto 20px;
						border-bottom: solid 1px var(--color--gray);
					}
						.products__sort__heading__txt {
							font-size: 14px;
							font-weight: 700;
							line-height: 1.8;
							letter-spacing: 0.05em;
						}
							.products__sort__heading__txt::after {
								content: 'から探す';
							}
					.products__sort__list {
						display: flex;
						justify-content: flex-start;
						align-items: flex-start;
						flex-wrap: wrap;
						gap: 10px;
						width: 100%;
						height: auto;
					}
						.products__sort__list__item {
							width: auto;
							height: auto;
						}
							.products__sort__list__item__inner {
								display: flex;
								justify-content: center;
								align-items: center;
								width: auto;
								height: auto;
								padding: 0 9px;
								border-radius: 3px;
								background-color: var(--color--white);
								border: solid 1px var(--color--skyblue);
								font-size: 12px;
								font-weight: 700;
								line-height: 1.8;
								letter-spacing: 0.1em;
								color: var(--color--skyblue);
							}
							._active .products__sort__list__item__inner {
								background-color: var(--color--skyblue);
								color: var(--color--white);
							}
						@media (any-hover: hover) {
							.products__sort__list__item__inner {
								transition: .3s;
							}
							.products__sort__list__item__inner:hover {
								background-color: var(--color--skyblue);
								color: var(--color--white);
							}
						}
			.products__list_wrap {
				width: calc(100% - 252px);
				height: auto;
			}
				.products__list {
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					flex-wrap: wrap;
					width: 100%;
					height: auto;
					margin: 0 auto 60px;
				}
					.products__list::after {
						content: '';
						display: block;
						width: calc((242 / 748) * 100%);
						height: 0;
					}
					.products__list__item {
						width: calc((242 / 748) * 100%);
						height: auto;
					}
					.products__list__item:not(:nth-last-of-type(-n+3)) {
						margin-bottom: 30px;
					}
						.products__list__item__inner {
							display: block;
							width: 100%;
							height: auto;
						}
							.products__list__item__image {
								width: 100%;
								height: auto;
								border-radius: 3px;
								aspect-ratio: 1 / 1;
								overflow: hidden;
								position: relative;
							}
								.products__list__item__image img {
									width: 100%;
									height: 100%;
									object-fit: cover;
									object-position: center;
								}
							@media (any-hover: hover) {
								.products__list__item__image img {
									transform: scale(1);
									opacity: 1;
									transition: .3s;
								}
								.products__list__item__inner:hover .products__list__item__image img {
									transform: scale(1.04);
									opacity: .8;
								}
							}
								.items__icon_new {
									width: auto;
									height: auto;
									padding: 3px 13px 2px;
									border-radius: 0 0 3px 0;
									background-color: var(--color--skyblue);
									font-family: "Roboto", sans-serif;
									font-size: 12px;
									font-weight: 700;
									line-height: 1.5;
									letter-spacing: 0.1em;
									color: var(--color--white);
									position: absolute;
									top: 0;
									left: 0;
								}
								.items__icon_popularity {
									width: 100px;
									height: auto;
									padding: 12px 0 4px;
									background-color: var(--color--black);
									font-size: 12px;
									font-weight: 700;
									line-height: 1.5;
									letter-spacing: 0.1em;
									text-align: center;
									color: var(--color--white);
									position: absolute;
									top: -4px;
									left: 13px;
									transform: translate(-50%, 0%) rotate(-45deg);
								}
								.products__list__item__favorite {
                                	display: flex;
                                	justify-content: center;
                                	align-items: center;
                                	width: 26px;
                                	height: auto;
                                	position: absolute;
                                	bottom: 10px;
                                	right: 12px;
                                }
                                	.products__list__item__favorite__icon {
                                		width: 100%;
                                		height: auto;
                                		padding: 0;
                                	}
							.products__list__item__details {
								width: 100%;
								height: auto;
								padding: 11px 0 0;
							}
								.products__list__item__category {
									display: flex;
									justify-content: flex-start;
									align-items: flex-start;
									flex-wrap: wrap;
									column-gap: 7px;
									row-gap: 8px;
									width: 100%;
									height: auto;
									margin: 0 auto 9px;
								}
									.products__list__item__category__label {
										display: flex;
										justify-content: center;
										align-items: center;
										padding: 0 9px;
										border-radius: 3px;
										background-color: var(--color--white);
										border: solid 1px var(--color--skyblue);
										font-size: 12px;
										font-weight: 700;
										line-height: 1.8;
										letter-spacing: 0.1em;
										color: var(--color--skyblue);
									}
								.products__list__item__name {
									width: 100%;
									height: auto;
									margin: 0 auto 3px;
									font-size: 14px;
									font-weight: 700;
									line-height: 1.8;
									letter-spacing: 0.1em;
									color: var(--color--black);
								}
							@media (any-hover: hover) {
								.products__list__item__name {
									transition: .3s;
								}
								.products__list__item__inner:hover .products__list__item__name {
									color: var(--color--yellow);
								}
							}
								.products__list__item__price {
									width: 100%;
									height: auto;
									font-family: "Roboto", sans-serif;
									font-size: 14px;
									font-weight: 700;
									line-height: 1.8;
									letter-spacing: 0.1em;
									color: #A5A5A5;
								}

/* PC ================================================== */
@media all and (min-width: 769px){

}

/* Tablet ================================================== */
@media all and (max-width: 768px){
/* products */
#products {
	padding: 30px 0 80px;
}
	.products__inner {
		width: calc((350 / 430) * 100%);
	}
		.items__heading {
			display: flex;
			flex-wrap: wrap;
			padding-bottom: 15px;
			margin-bottom: 20px;
		}
			.items__heading__main {
				width: 100%;
				margin-right: 0px;
				margin-bottom: -8px;
				font-size: 30px;
			}
			.items__heading__sub {
				width: 100%;
				padding-top: 0;
			}
		.products__body {
			display: block;
		}
			.products__sort {
				display: flex;
				justify-content: center;
				align-items: flex-start;
				column-gap: 20px;
				width: 100%;
				margin: 0 auto 38px;
			}
				.products__sort__category {
					width: 137px;
					margin: 0;
				}
				.products__sort__worries {
					width: 137px;
				}
					.products__sort__heading {
						padding: 0 0 3px 10px;
						margin: 0;
						position: relative;
					}
						.products__sort__heading::before,
						.products__sort__heading::after {
							content: '';
							display: block;
							width: 12px;
							height: 1px;
							background-color: var(--color--gray);
							position: absolute;
							top: calc(50% - 3px);
							right: 15px;
							transform: translate(50%,-50%);
						}
						.products__sort__heading::after {
							transition: .3s;
							transform: translate(50%,-50%) rotate(90deg);
						}
						._open .products__sort__heading::after {
							transform: translate(50%,-50%) rotate(0deg);
						}
						.products__sort__heading__txt {
							font-size: 12px;
							letter-spacing: 0.1em;
						}
							.products__sort__heading__txt::after {
								display: none;
							}
					.products__sort__list {
						display: none;
						padding: 5px 0 0;
					}
						.products__sort__list__item {
							width: 100%;
						}
						._active.products__sort__list__item {
							display: none;
						}
						.products__sort__list__item:not(:last-of-type) {
							margin-bottom: 1px;
						}
							.products__sort__list__item__inner {
								display: block;
								width: 100%;
								padding: 0 0 0 10px;
								border-radius: 0;
								background-color: initial;
								border: initial;
								font-size: 12px;
							}
			.products__list_wrap {
				width: 100%;
			}
					.products__list::after {
						width: 32%;
					}
					.products__list__item {
						width: 32%;
					}
					.products__list__item:not(:nth-last-of-type(-n+3)) {
						margin-bottom: 20px;
					}
								.products__list__item__favorite {
                                	width: 24px;
                                	bottom: 9px;
                                	right: 10px;
                                }
								.products__list__item__category {
									column-gap: 6px;
									row-gap: 7px;
									margin: 0 auto 7px;
								}
									.products__list__item__category__label {
										padding: 0 7px;
										font-size: 10px;
									}
}

/* SP ================================================== */
@media all and (max-width: 620px){
					.products__list::after {
						display: none;
					}
					.products__list__item {
						width: 48%;
					}
}