@charset "UTF-8";

/* ------------------------------------------------------------
Shop Produce
---------------------------------------------------------------*/

.shop-produce-page .c-header {
	background: #fff;
	font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
}
.shop-produce-page .c-h2__sub {
	letter-spacing: 0.2em;
}

/* ------------------------------------------------------------
MV
---------------------------------------------------------------*/

.sec-shop-mv {
	width: 100%;
	position: relative;
	aspect-ratio: 17 / 10;
	margin-top: 120px;
	overflow: hidden;
	background: #111;
	color: #fff;
}

.c-shop-mv__visual,
.c-shop-mv__picture,
.c-shop-mv__picture picture,
.c-shop-mv__picture img {
	width: 100%;
	height: 100%;
}

.c-shop-mv__visual {
	position: absolute;
	inset: 0;
}

.c-shop-mv__picture,
.c-shop-mv__picture picture {
	display: block;
	margin: 0;
}

.c-shop-mv__picture img {
	display: block;
	object-fit: cover;
}

.c-shop-mv__body {
	position: absolute;
	left: clamp(20px, 5.294vw, 90px);
	bottom: clamp(97px, 8.824vw, 150px);
	width: max-content;
}

.c-shop-mv__lead {
	margin: 0 0 clamp(20px, 1.529vw, 26px);
	font-size: clamp(16px, 1.765vw, 30px);
	line-height: 1.6;
	letter-spacing: 0.22em;
	font-weight: 600;
}

.c-shop-mv__title {
	margin: 0 0 clamp(20px, 1.529vw, 26px);
	font-family: var(--font-en);
	font-size: clamp(26px, 7.059vw, 120px);
	font-weight: 500;
	line-height: 0.75;
	letter-spacing: 0.02em;
}

.c-shop-mv__sub {
	margin: 0;
	font-size: clamp(16px, 1.765vw, 30px);
	line-height: 1.6;
	letter-spacing: 0.22em;
	font-weight: 600;
}

@media screen and (max-width: 768px) {
	.sec-shop-mv {
		aspect-ratio: 750 / 953;
		margin-top: 70px;
	}

	.c-shop-mv__lead {
		font-size: clamp(16px, 4.267vw, 22px);
	}

	.c-shop-mv__title {
		font-size: clamp(48px, 12.8vw, 66px);
	}

	.c-shop-mv__sub {
		font-size: clamp(17px, 4.533vw, 23px);
	}
}

/* ------------------------------------------------------------
About
---------------------------------------------------------------*/

.sec-shop-about {
	position: relative;
	padding-block: clamp(40px, 4.471vw, 76px) clamp(50px, 6.176vw, 105px);
	background: url("../images/shop-produce/bg-about.webp") center / cover no-repeat;
}

.c-shop-about {
	position: relative;
	max-width: 1200px;
	margin-inline: auto;
	padding-block: clamp(20px, 4.941vw, 84px);
	padding-inline: clamp(20px, 4.941vw, 84px);
	background: rgba(255, 255, 255, 0.5);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.c-shop-about__title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	margin: 0 0 clamp(30px, 3.529vw, 60px);
	font-size: clamp(18px, 2.353vw, 40px);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.08em;
}

.c-shop-about__title-txts {
	background: #e50012;
	display: flex;
	padding: 0.12em 0.42em 0.18em;
	color: #fff;
}

.c-shop-about__body {
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 2.647vw, 45px);
	font-size: clamp(14px, 1.176vw, 19px);
	line-height: 2;
	letter-spacing: 0;
}

.c-shop-about__body p {
	margin: 0;
}

@media screen and (max-width: 1280px) {
	.c-shop-about {
		width: calc(100% - clamp(40px, 10.667vw, 80px));
	}
}
@media screen and (max-width: 768px) {
	.sec-shop-about {
		background-position: center;
	}
}
@media screen and (max-width: 550px) {
	.c-shop-about__title-txts {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 5px;
		background: none;
		padding: 0;
		max-width: 100%;
	}
	.c-shop-about__title {
		font-size: clamp(18px, 4.267vw, 32px);
	}
	.c-shop-about__title-txts > span {
		background: #e50012;
		padding: 0.12em 0.42em 0.18em;
	}
}

/* ------------------------------------------------------------
Recommend
---------------------------------------------------------------*/

.sec-shop-recommend {
	background: #fff;
}
.sec-shop-recommend::after {
	content: "";
	width: 100%;
	height: 51.75%;
	background-color: #f7f7f7;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin-inline: auto;
	z-index: 0;
}

.l-shop-recommend {
	max-width: 1200px;
	margin-inline: auto;
	padding-block: clamp(50px, 6.471vw, 110px);
}

.c-shop-recommend__head {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.c-shop-recommend__head .c-h2__main {
	font-size: clamp(40px, 4.706vw, 80px);
	line-height: 0.9;
	margin-bottom: clamp(28px, 2.353vw, 40px);
}
.c-shop-recommend__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(30px, 3.529vw, 60px);
	margin-top: clamp(43px, 5.059vw, 86px);
}

.c-shop-recommend__item {
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-items: center;
}

.c-shop-recommend__img {
	position: relative;
	width: 100%;
	aspect-ratio: 6 / 5;
	margin: 0 0 clamp(30px, 3.529vw, 60px);
}

.c-shop-recommend__img::after {
	content: "";
	position: absolute;
	top: calc(100% - 25px);
	left: 50%;
	transform: translateX(-50%);
	width: 1px;
	height: 50px;
	background: var(--c-primary);
}

.c-shop-recommend__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.c-shop-recommend__title {
	margin: 0 0 clamp(18px, 1.765vw, 30px);
	font-size: clamp(18px, 1.235vw, 21px);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.04em;
	text-align: center;
	white-space: nowrap;
}

.c-shop-recommend__text {
	margin: 0;
	font-size: clamp(14px, 0.941vw, 16px);
	font-weight: 400;
	line-height: 2;
	letter-spacing: 0.04em;
}

.shop-produce-page .sec-works {
	background-image: url("../images/shop-produce/bg-red.webp");
}

@media screen and (max-width: 768px) {
	.c-shop-recommend__head .c-h2__sub {
		max-width: 310px;
		text-wrap-style: balance;
		line-height: 2;
	}

	.c-shop-recommend__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 65px;
		max-width: 500px;
		margin: 65px auto 0;
	}
}

/* ------------------------------------------------------------
Service
---------------------------------------------------------------*/

.sec-shop-service {
	position: relative;
	overflow: hidden;
	background: #f7f7f7;
}

.sec-shop-service::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	aspect-ratio: 1700 / 380;
	background: url("../images/shop-produce/bg-light-top.webp") center top / cover no-repeat;
	pointer-events: none;
}

.l-shop-service {
	position: relative;
	z-index: 1;
	max-width: 1300px;
	margin-inline: auto;
	padding-block: clamp(45px, 5.529vw, 94px) clamp(60px, 7.059vw, 120px);
}

.c-shop-service__head {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.c-h2.c-h2__shop-service {
	padding-top: clamp(45px, 4.118vw, 70px);
}

.c-h2.c-h2__shop-service .c-h2__overttl {
	top: 0;
	left: -16%;
	width: clamp(150px, 18.235vw, 310px);
	margin: 0;
}

.c-h2.c-h2__shop-service .c-h2__main {
	font-size: clamp(60px, 4.706vw, 80px);
	line-height: 0.9;
}

.c-shop-service__catch {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: clamp(40px, 4.706vw, 80px) 0 0;
	font-size: clamp(18px, 1.882vw, 32px);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.04em;
}

.c-shop-service__catch-group {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

.c-shop-service__catch > b:last-child {
	white-space: nowrap;
}

.c-shop-service__catch-group:first-child .c-box-txt::after {
	content: "";
	position: absolute;
	top: calc(100% - 4px);
	left: 90%;
	z-index: 2;
	width: clamp(75px, 8.412vw, 143px);
	aspect-ratio: 286 / 53;
	background: url("../images/shop-produce/deco-arrow-red.webp") center / contain no-repeat;
}

.c-shop-service__catch b {
	font-weight: 700;
}

.c-shop-service__list {
	display: flex;
	flex-direction: column;
	gap: clamp(60px, 5.882vw, 100px);
	width: 100vw;
	margin-left: 50%;
	margin-top: clamp(50px, 4.706vw, 80px);
	transform: translateX(-50%);
	max-width: 1920px;
}

.c-shop-service__item {
	--shop-service-img-y: clamp(30px, 2.353vw, 40px);
	--shop-service-text-gap: clamp(50px, 4.118vw, 70px);
	position: relative;
	padding-inline: 0 clamp(250px, 29.412vw, 500px);
}

.c-shop-service__item.--reverse {
	padding-inline: clamp(250px, 29.412vw, 500px) 0;
}

.c-shop-service__body {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: clamp(40px, 4.412vw, 75px);
	padding-inline: clamp(50px, 14.706vw, 250px) clamp(120px, 18.824vw, 320px);
	background: #fff;
}

.c-shop-service__item.--reverse .c-shop-service__body {
	padding-inline: clamp(120px, 18.824vw, 320px) clamp(50px, 14.706vw, 250px);
}

@media screen and (max-width: 1200px) {
	.c-shop-service__body {
		padding-inline: clamp(40px, 2.941vw, 50px) clamp(120px, 18.824vw, 320px);
	}
	.c-shop-service__item.--reverse .c-shop-service__body {
		padding-inline: clamp(120px, 18.824vw, 320px) clamp(40px, 2.941vw, 50px);
	}
}

.c-shop-service__title-wrap {
	display: flex;
	align-items: center;
	gap: clamp(12px, 1.412vw, 24px);
	margin-bottom: clamp(28px, 2.353vw, 40px);
}

.c-shop-service__num {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 clamp(50px, 4.118vw, 70px);
	aspect-ratio: 70 / 75;
	background: url("../images/shop-produce/bg-hex-red.svg") center / contain no-repeat;
	color: #fff;
	font-family: var(--font-en);
	font-size: clamp(16px, 1.765vw, 30px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.06em;
}

.c-shop-service__title {
	margin: 0;
	font-size: clamp(18px, 1.882vw, 32px);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.02em;
}

.c-shop-service__text {
	margin: 0;
	font-size: clamp(14px, 1.059vw, 18px);
	font-weight: 400;
	line-height: 2;
	letter-spacing: 0em;
}

.c-shop-service__text strong {
	font-size: clamp(18px, 1.412vw, 24px);
}
.c-shop-service__text strong span {
	font-weight: 700;
	background: linear-gradient(transparent 58%, #fff000 58%);
}

.c-shop-service__img {
	position: absolute;
	z-index: 3;
	width: 41%;
	height: 100%;
	max-width: 700px;
	aspect-ratio: 14 / 9;
	transform: translateY(calc(var(--shop-service-img-y) * -1));
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.16);
	top: 0;
	right: clamp(30px, 2.941vw, 50px);
}

.c-shop-service__item.--reverse .c-shop-service__img {
	left: clamp(30px, 2.941vw, 50px);
	right: auto;
}

.c-shop-service__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media screen and (max-width: 999px) {
	.c-shop-service__catch {
		flex-wrap: wrap;
		max-width: 350px;
		margin-top: 55px;
		font-size: 17px;
		text-align: center;
	}

	.c-shop-service__catch > b:last-child {
		flex: 0 0 100%;
		margin-top: 10px;
	}

	.c-shop-service__list {
		gap: 15px;
		margin-top: 20px;
	}

	.c-shop-service__item,
	.c-shop-service__item.--reverse {
		display: flex;
		flex-direction: column-reverse;
	}

	.c-shop-service__item,
	.c-shop-service__item.--reverse {
		display: flex;
		flex-direction: column-reverse;
		padding-inline: clamp(20px, 2.353vw, 40px);
		align-items: center;
	}

	.c-shop-service__body {
		width: 100%;
		min-height: 0;
		padding-inline: clamp(20px, 5.333vw, 40px) !important;
		padding-top: 80px;
	}

	.c-shop-service__img,
	.c-shop-service__item.--reverse .c-shop-service__img {
		width: 90%;
		margin: 0;
		transform: none;
		position: relative;
		left: 0;
		right: 0;
		top: 40px;
	}

	.c-shop-service__text br {
		display: none;
	}
}

/* ------------------------------------------------------------
Contact
---------------------------------------------------------------*/

.sec-shop-contact {
	position: relative;
	overflow: hidden;
	background: var(--c-primary);
	color: #fff;
}

.sec-shop-contact::before {
	content: "CONTACT";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	font-family: "Questrial", sans-serif;
	font-size: clamp(50px, 14.118vw, 240px);
	font-weight: 400;
	line-height: 0.7;
	letter-spacing: 0.04em;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: clamp(1px, 0.118vw, 2px) var(--c-white);
	text-stroke: clamp(1px, 0.118vw, 2px) var(--c-white);
	opacity: 0.5;
	pointer-events: none;
}

.sec-shop-contact > .l-inner {
	padding-bottom: clamp(70px, 7.059vw, 120px);
}

.l-shop-contact {
	position: relative;
	display: grid;
	grid-template-columns: clamp(200px, 17.176vw, 292px) minmax(0, 1fr);
	align-items: center;
	gap: clamp(24px, 2.824vw, 48px);
	width: min(100%, 1100px);
	margin-inline: auto;
	padding-top: clamp(100px, 11.176vw, 190px);
	padding-bottom: clamp(45px, 4.118vw, 70px);
}

.c-shop-contact__img {
	width: 100%;
	aspect-ratio: 292 / 322;
}

.c-shop-contact__body {
	min-width: 0;
	gap: clamp(20px, 2.353vw, 40px);
}

.c-shop-contact__title {
	width: 100%;
	margin: 0;
	font-size: clamp(18px, 1.882vw, 32px);
	line-height: 2;
	color: var(--c-primary);
	font-weight: 700;
	letter-spacing: 0.18em;
	white-space: nowrap;
}

.c-shop-contact__text {
	max-width: 760px;
	margin: 0;
	line-height: calc(40 / 18);
	color: var(--c-white);
	overflow-wrap: anywhere;
}

.c-shop-contact__button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: min(680px, 100%);
	min-height: clamp(70px, 5.882vw, 100px);
	margin-inline: auto;
	padding: 10px clamp(40px, 5.176vw, 88px);
	border-radius: 999px;
	background: #111;
	color: #fff;
	font-size: clamp(18px, 1.412vw, 24px);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
	text-decoration: none;
	text-align: center;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.c-shop-contact__button i {
	position: absolute;
	top: 50%;
	right: clamp(-40px, -2.353vw, -14px);
	display: block;
	width: clamp(40px, 4.706vw, 80px);
	height: 1px;
	background: currentColor;
	transform: translateY(-50%);
}

.c-shop-contact__button i::after {
	content: none;
}

@media (hover: hover) {
	.c-shop-contact__button:hover {
		background: #fff;
		color: var(--c-primary);
	}
}

@media screen and (max-width: 999px) {
	.l-shop-contact {
		grid-template-columns: minmax(0, 1fr);
		width: 100%;
	}

	.c-shop-contact__img {
		width: min(260px, 50%);
		margin-inline: auto;
	}

	.c-shop-contact__body {
		width: 100%;
		margin-inline: auto;
		align-items: center;
	}

	.c-shop-contact__title {
		font-size: clamp(14px, 1.882vw, 32px);
		line-height: 2.4;
		text-align: center;
	}
}

@media screen and (max-width: 768px) {
	.sec-shop-contact::before {
		font-size: clamp(50px, 20vw, 240px);
	}
	.sec-shop-contact > .l-inner {
		padding-bottom: 70px;
	}

	.l-shop-contact {
		padding-top: 90px;
		padding-bottom: 35px;
	}

	.c-shop-contact__title {
		font-size: clamp(14px, 3.733vw, 20px);
		letter-spacing: 0.08em;
	}

	.c-shop-contact__text {
		font-size: 14px;
		line-height: 1.9;
	}
}

/* ------------------------------------------------------------
Reason
---------------------------------------------------------------*/

.sec-shop-reason {
	background: #fff;
}

.l-shop-reason {
	padding-block: clamp(60px, 16vw, 120px);
}

.c-shop-reason__head {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.c-shop-reason__head .c-h2__main {
	font-size: clamp(60px, 4.706vw, 80px);
	line-height: 0.9;
	margin-bottom: clamp(28px, 2.353vw, 40px);
}

.c-shop-reason__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(60px, 10vw, 75px) clamp(30px, 8vw, 60px);
	margin-top: clamp(60px, 14vw, 105px);
}

.c-shop-reason__item {
	min-width: 0;
}

.c-shop-reason__visual {
	position: relative;
	margin-bottom: clamp(35px, 3.235vw, 55px);
}

.c-shop-reason__img {
	position: relative;
	width: 100%;
	aspect-ratio: 57 / 40;
	margin: 0;
}

.c-shop-reason__img::after {
	content: "";
	position: absolute;
	top: calc(100% - 25px);
	left: 50%;
	transform: translateX(-50%);
	width: 1px;
	height: 50px;
	background: var(--c-primary);
}

.c-shop-reason__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.c-shop-reason__label {
	position: absolute;
	top: -20px;
	right: 13px;
	display: flex;
	align-items: flex-start;
	color: var(--c-primary);
}

.c-shop-reason__label-main {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(50px, 4.118vw, 70px);
	min-height: clamp(100px, 8.824vw, 150px);
	padding: 12px 8px;
	background: var(--c-primary);
	color: #fff;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: clamp(32px, 2.824vw, 48px);
	line-height: 1;
	writing-mode: vertical-rl;
	letter-spacing: 0.1em;
	text-align: center;
}

.c-shop-reason__label-sub {
	font-family: var(--font-en);
	font-size: clamp(13px, 1.059vw, 18px);
	font-weight: 500;
	letter-spacing: 0.08em;
	writing-mode: vertical-rl;
	line-height: 1;
	margin-left: clamp(8px, 0.765vw, 13px);
}

.c-shop-reason__title {
	margin: 0 0 clamp(18px, 1.765vw, 30px);
	font-size: clamp(20px, 1.647vw, 28px);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.03em;
	text-align: center;
}

.c-shop-reason__text {
	margin: 0;
	font-size: clamp(13px, 0.941vw, 16px);
	font-weight: 400;
	line-height: 2;
	letter-spacing: 0.04em;
}

@media screen and (max-width: 768px) {
	.c-shop-reason__head .c-h2__sub {
		max-width: 330px;
		line-height: 1.7;
	}

	.c-shop-reason__list {
		grid-template-columns: minmax(0, 1fr);
		max-width: 500px;
		margin-inline: auto;
	}
}

/* ------------------------------------------------------------
Flow
---------------------------------------------------------------*/

.sec-shop-flow {
	position: relative;
	overflow: hidden;
	background: url("../images/shop-produce/bg-flow.webp") center / cover no-repeat;
	color: #fff;
}

.l-shop-flow {
	position: relative;
	z-index: 1;
	padding-block: clamp(60px, 6.176vw, 105px) clamp(90px, 8.824vw, 150px);
}

.c-shop-flow__head {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.c-shop-flow__head .c-h2__main {
	font-size: clamp(60px, 4.706vw, 80px);
}

.c-shop-flow__slider-wrap {
	position: relative;
	margin-top: clamp(40px, 4.118vw, 70px);
}

.c-shop-flow__slider {
	overflow: hidden;
}

.c-shop-flow__slider .swiper-slide {
	height: auto;
}

.c-shop-flow__item {
	display: grid;
	height: 100%;
	grid-template-columns: minmax(0, 1fr) clamp(300px, 28.235vw, 480px);
	align-items: center;
	gap: clamp(25px, 2.941vw, 50px);
	padding-block: clamp(26px, 2.941vw, 50px);
	padding-inline: clamp(20px, 2.941vw, 50px);
	background: #fff;
	color: var(--c-text);
}

.c-shop-flow__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	height: 100%;
}

.c-shop-flow__title-wrap {
	display: flex;
	align-items: center;
	gap: clamp(15px, 1.412vw, 24px);
	margin-bottom: clamp(22px, 2.176vw, 37px);
}

.c-shop-flow__step {
	flex-shrink: 0;
	background: var(--c-primary);
	color: #fff;
	font-family: var(--font-en);
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.04em;
	width: 100px;
	height: auto;
	aspect-ratio: 100 / 40;
	display: flex;
	justify-content: center;
	align-items: center;
}

.c-shop-flow__title {
	margin: 0;
	font-size: clamp(18px, 1.647vw, 28px);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.02em;
}

.c-shop-flow__text {
	margin: 0;
	font-size: clamp(14px, 1.059vw, 18px);
	font-weight: 400;
	line-height: 2;
	letter-spacing: 0.02em;
}

.c-shop-flow__img {
	position: relative;
	width: 100%;
	height: auto;
	min-height: 0;
	aspect-ratio: 704 / 441;
	margin: 0;
	background: #f4f4f4;
}

.c-shop-flow__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.c-shop-flow__item.--no-image .c-shop-flow__img::before {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid #e5e5e5;
}

.c-shop-flow__arrow {
	position: absolute;
	top: 50%;
	z-index: 5;
	width: 30px;
	height: 50px;
	padding: 0;
	border: 0;
	background: transparent;
	transform: translateY(-50%);
	cursor: pointer;
}

.c-shop-flow__arrow::before {
	content: "";
	position: absolute;
	top: 50%;
	width: 18px;
	height: 18px;
	border-top: 3px solid #fff;
	border-left: 3px solid #fff;
}

.c-shop-flow__arrow.--prev {
	left: -50px;
}
.c-shop-flow__arrow.--next {
	right: -50px;
}
.c-shop-flow__arrow.--prev::before {
	left: 8px;
	transform: translateY(-50%) rotate(-45deg);
}
.c-shop-flow__arrow.--next::before {
	right: 8px;
	transform: translateY(-50%) rotate(135deg);
}

.c-shop-flow__pagination {
	position: absolute;
	bottom: -30px !important;
	left: 50% !important;
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(12px, 1.176vw, 20px);
	width: max-content !important;
	min-height: 60px;
	padding: 10px 40px;
	border-radius: 999px;
	background: var(--c-primary);
	transform: translate(-50%, 0%);
}

.c-shop-flow__pagination .swiper-pagination-bullet {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 35px;
	height: auto;
	aspect-ratio: 35 / 38;
	margin: 0 !important;
	background: transparent;
	color: #fff;
	font-family: var(--font-en);
	font-size: 18px;
	font-weight: 500;
	opacity: 1;
}

.c-shop-flow__pagination .swiper-pagination-bullet-active {
	background-image: url("../images/shop-produce/bg-hex-wh-sm.svg");
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	color: var(--c-primary);
}

@media screen and (max-width: 1500px) {
	.sec-shop-flow .l-inner {
		max-width: 1000px;
	}
}
@media screen and (max-width: 1300px) {
	.sec-shop-flow .l-inner {
		max-width: 850px;
	}
}
@media screen and (max-width: 768px) {
	.c-shop-flow__item {
		display: flex;
		flex-direction: column;
		gap: 0;
		align-items: flex-start;
		padding-bottom: clamp(60px, 14.667vw, 110px);
	}
	.c-shop-flow__body {
		display: contents;
	}

	.c-shop-flow__title-wrap {
		order: 1;
	}

	.c-shop-flow__step {
		font-size: clamp(12px, 2.4vw, 18px);
		width: clamp(60px, 13.333vw, 100px);
	}

	.c-shop-flow__img {
		order: 2;
		margin-bottom: 25px;
	}

	.c-shop-flow__text {
		order: 3;
	}

	.c-shop-flow__arrow {
		display: none;
	}

	.c-shop-flow__pagination {
		max-width: calc(100% - clamp(20px, 5.333vw, 40px));
		gap: 8px;
		padding-inline: clamp(20px, 5.333vw, 40px);
	}
}