html, body {
	color: #2F2929;
	font-family: "Sawarabi Mincho", serif !important;
	font-style: normal !important;
	font-weight: 400 !important;
	margin: 0;
	padding: 0;
	text-align: center;
}

* {
	box-sizing: border-box;
}

.pc {
	display: none !important;
	@media(width >= 500px) {
		display: block !important;
	}
}
.sp {
	@media(width >= 500px) {
		display: none !important;
	}
}

/* SLIDER */
.bx-viewport {
	border: 0 !important;
	box-shadow: none !important;
	left: 0;
}
#slider, #slider-sp {
	margin-left: 50%;
	& div {
		margin-left: -150px;
		margin-right: 150px !important;
		@media(width >= 500px) {
			margin-left: -250px;
			margin-right: 250px !important;
		}
		 @media(width >= 1000px) {
			 margin-left: -500px;
			 margin-right: 500px !important;
		}
	}
}
.bx-wrapper {
	margin-bottom: 86px !important;
	.bx-pager {
		bottom: -30px !important;
			@media(width >= 1000px) {
				bottom: 20px !important;
		}
		&.bx-default-pager {
			& a {
				background: #C18973 !important;
				border-radius: 50% !important;
				height: 15px !important;
				margin: 0 10px !important;
				width: 15px !important;
				&.active {
					background: #EF6259 !important;
				}
			}
		}
	}
	.bx-next {
		display: none;
			@media(width >= 1000px) {
				display: block;
				right: 30px !important;
		}
	}
	.bx-prev {
		display: none;
		@media(width >= 1000px) {
			display: block;
			left: 30px !important;
		}
	}
}

/* ヘッダー調整 */
.l-header-logo {
	text-align: left;
}

/* ナビ調整 */
.l-side-navi-list__link::before,
.l-side-navi-list__link.is-link::before {
	display: none !important;
}

.container {
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	padding: 0 15px;
	width: 100% !important;
	@media(width >= 750px) {
		width: 750px !important;
	}
	@media(width >= 1030px) {
		width: 1030px !important;
	}
	&::before, &::after {
		display: none !important;
	}
	nav {
		display: none;
		@media(width >= 1030px) {
			display: block;
			width: 220px;
		}
		&>ul {
			list-style: none;
			margin: 0;
			padding: 0;
			text-align: left;
			&>li {
				font-size: 18px;
				letter-spacing: .025em;
				line-height: 1.39;
				margin: 0 0 15px;
				padding: 0 10px;
				& a {
					color: #2F2929 !important;
					font-family: "Sawarabi Gothic", sans-serif !important;
					padding: 0 !important;
				}
				&:nth-of-type(-n+2) {
					margin: 0 0 30px;
					padding: 0;
					& a {
						background: url("https://img07.shop-pro.jp/PA01398/132/etc_base64/bWVudS1iZy1y.jpg?cmsp_timestamp=20241016100340") center top/cover no-repeat;
						border: 0;
						color: #fff !important;
						display: block;
						font-family: "Sawarabi Mincho", serif !important;
						font-size: 22px;
						height: 50px;
						letter-spacing: .025em;
						line-height: 50px;
						margin: 0;
						padding: 0 10px!important;
						text-align: left;
						text-decoration: none;
						width: 220px;
						&:hover {
							opacity: .7;
						}
					}
				}
				&:nth-last-of-type(3) {
					margin: 0 0 30px;
				}
				&:nth-last-of-type(-n+2) {
					margin: 0 0 30px;
					& a {
						background: url("https://img07.shop-pro.jp/PA01398/132/etc_base64/bWVudS1iZy1i.jpg?cmsp_timestamp=20241028204948") center top/cover no-repeat;
						border: 0;
						color: #fff !important;
						display: block;
						font-family: "Sawarabi Mincho", serif !important;
						font-size: 22px;
						height: 50px;
						letter-spacing: .025em;
						line-height: 50px;
						margin: 0;
						padding: 0 10px!important;
						text-align: left;
						text-decoration: none;
						width: 220px;
						&:hover {
							opacity: .7;
						}
					}
				}
			}
		}
	}
	& main {
		width: 100%;
		@media(width >= 750px) {
			width: 720px;
		}
		.give-p {
			margin: 0 0 103px;
			& img {
				height: auto;
				object-fit: cover;
				width: 100%;
			}
		}
		.pickup {
			& h2 {
				color: #A30101;
				font-size: 38px;
				letter-spacing: .025em;
				line-height: 1.39;
				margin: 0 0 40px;
			}
			& div {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				margin: 0;
				@media(width >= 750px) {
					justify-content: space-between;
					margin: 0 0 37px;
				}
				& a {
					display: block;
					height: auto;
					margin: 0 0 37px;
					width: 330px;
					@media(width >= 750px) {
						margin: 0;
						width: calc(50% - 5px);
					}
					&:hover {
						opacity: .7;
					}
					& img {
						height: auto;
						object-fit: cover;
						width: 100%;
					}
				}
			}
			&>a {
				display: block;
				height: auto;
				margin: 0 auto 103px;
				width: 100%;
				@media(width >= 750px) {
					width: 560px;
				}
				&:hover {
					opacity: .7;
				}
				& img {
					height: auto;
					object-fit: cover;
					width: 100%;
				}
			}
		}
		.recommend {
			margin: 0 0 117px;
			& h2 {
				display: block;
				height: auto;
				margin: 0 auto 50px;
				width: 320px;
				@media(width >= 750px) {
					width: 386px;
				}
				& img {
					height: 100%;
					object-fit: cover;
					width: 100%;
				}
			}
			&>a {
				color: #2F2929 !important;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				margin: 0 0 55px;
				text-decoration: none;
				&:hover {
					opacity: .7;
				}
				& img {
					height: auto;
					object-fit: cover;
					order: 2;
					width: 100%;
					@media(width >= 750px) {
						order: 1;
						width: 390px;
					}
				}
				& div {
					order: 1;
					width: 100%;
					@media(width >= 750px) {
						order: 2;
						width: 310px;
					}
					& p {
						text-align: left;
						&.catch {
							font-size: 18px;
							letter-spacing: .025rem;
							line-height: 1.47;
							margin: 0 0 10px;
						}
						&.price, &.explanation {
							font-family: "Sawarabi Gothic", sans-serif;
							font-size: 18px;
							font-style: normal;
							font-weight: 400;
							letter-spacing: .025em;
							line-height: 1.39;
							margin: 0 0 12px;
						}
						&.explanation {
							line-height: 1.53;
							margin: 0 0 30px;
							@media(width >= 750px) {
								margin: 0;
							}
						}
					}
					& h3 {
						color: #A30101;
						font-size: 28px;
						letter-spacing: .04em;
						line-height: 1.39;
						margin: 0 0 5px;
						text-align: left;
					}
				}
			}
			&>div {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				@media(width >= 750px) {
					justify-content: space-between;
				}
				& a {
					color: #2F2929 !important;
					display: block;
					font-family: "Sawarabi Gothic", sans-serif;
					font-size: 18px;
					font-style: normal;
					font-weight: 400;
					letter-spacing: .025em;
					line-height: 1.39;
					margin: 0 20px 20px;
					text-decoration: none;
					width: 222px;
					@media(width >= 750px) {
						margin: 0;
					}
					&:hover {
						opacity: .7;
					}
					& img {
						height: 222px;
						object-fit: cover;
						margin: 0 0 10px;
						width: 222px;
					}
				}
			}
		}
		.bestseller {
			margin: 0 0 120px;
			& h2 {
				color: #A30101;
				font-size: 38px;
				letter-spacing: .025em;
				line-height: 1.39;
				margin: 0 0 40px;
			}
			&>div {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				@media(width >= 500px) {
					justify-content: space-between;
				}
				& a {
					color: #2F2929;
					display: block;
					font-family: "Sawarabi Gothic", sans-serif;
					font-size: 18px;
					font-style: normal;
					font-weight: 400;
					letter-spacing: .025em;
					line-height: 1.39;
					margin: 0 0 60px;
					position: relative;
					text-decoration: none;
					width: 222px;
					&:hover {
						opacity: .7;
					}
					&
					&:last-of-type {
						margin: 0;
					}
					&:nth-of-type(n+5) {
						@media(width >= 500px) {
							margin: 0;
						}
					}
					&:nth-of-type(n+4) {
						@media(width >= 750px) {
							margin: 0;
						}
					}
					& img {
						height: 222px;
						object-fit: cover;
						margin: 0 0 10px;
						width: 222px;
					}
					.num {
						background: #2F2929;
						color: #fff;
						font-family: "Zen Kaku Gothic New", sans-serif;
						font-size: 24px;
						font-style: normal;
						font-weight: 400;
						height: 40px;
						left: 0;
						line-height: 40px;
						margin: 0;
						position: absolute;
						top: 0;
						width: 40px;
					}
					&:first-of-type {
						.num {
							background: #FEB602;
						}
					}
					&:nth-of-type(2) {
						.num {
							background: #B6B6B6;
						}
					}
					&:nth-of-type(3) {
						.num {
							background: #AF6C3D;
						}
					}
					& h3 {
						color: #2F2929;
						font-family: "Sawarabi Gothic", sans-serif;
						font-size: 18px;
						font-style: normal;
						font-weight: 400;
						letter-spacing: .025em;
						line-height: 1.47;
						margin: 0 0 10px;
						text-align: left;
						&>img {
							height: auto;
						}
					}
					.price {
						color: #A30101;
						font-family: "Sawarabi Gothic", sans-serif;
						font-size: 18px;
						font-style: normal;
						font-weight: 400;
						letter-spacing: .025em;
						line-height: 1.47;
						margin: 0;
						text-align: left;
					}
				}
			}
		}
		.point {
			background: url("https://img07.shop-pro.jp/PA01398/132/etc_base64/cG9pbnQtYmc.jpg?cmsp_timestamp=20240717104233") center center/cover no-repeat;
			margin: 0 0 100px;
			padding: 60px 30px;
			& h2 {
				color: #A30101;
				font-size: 38px;
				letter-spacing: .04em;
				line-height: 1.39;
				margin: 0 0 30px;
				&> br {
					@media(width >= 750px) {
						display: none;
					}
				}
			}
			& p {
				color: #2F2929;
				font-family: "Sawarabi Gothic", sans-serif;
				font-size: 18px;
				font-style: normal;
				font-weight: 400;
				line-height: 1.47;
				margin: 0 0 40px;
				&>br {
					@media(width >= 750px) {
						display: none;
					}
				}
			}
			&>a {
				background: #A30101;
				color: #fff !important;
				display: inline-block;
				font-size: 18px;
				height: 50px;
				line-height: 50px;
				margin: 0 auto 45px;
				padding: 0 40px;
				text-decoration: none;
				width: auto;
				&:hover {
					opacity: .7;
				}
			}
			&>div {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				@media(width >= 750px) {
					justify-content: space-between;
				}
				& a {
					display: block;
					height: 200px;
					margin: 0 0 20px;
					width: 320px;
					@media(width >= 750px) {
						margin: 0;
					}
					&:hover {
						opacity: .7;
					}
					& img {
						height: 100%;
						object-fit: cover;
						width: 100%;
					}
				}
			}
		}
	}
}