@charset "UTF-8";

.sauce__header {
	position: relative;
	margin-bottom: 10rem;
	padding-top: 7rem;
}
.sauce__title,
.sauce__read {
	text-align: center;
	color: #FFF;
	filter: drop-shadow(0 0 1rem rgba(0, 0, 0, .5));
	transform: translateZ(0);
}
.sauce__title {
	font-size: 3.6rem;
	font-weight: 800;
	margin-bottom: 1.5rem;
	line-height: var(--lineHeight-titleText);
}
.sauce__read {
	font-size: 1.8rem;
	font-weight: 600;
	margin-bottom: 5.75rem;
	line-height: var(--lineHeight-text);
}
.sauce__bgImage {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 0;
	width: 100%;
	height: 37rem;
	border-radius: 1rem;
	overflow: hidden;
}
.sauce__bgImage img {
	height: 100%;
	object-fit: cover;
}
.sauce__image {
	width: 28.2%;
	margin: 0 auto;
}
.saucePoint {
	width: fit-content;
	background-color: var(--color-green);
	border-radius: 9999px;
	margin: 0 auto 2.5rem;
	padding: 1rem 2.5rem;
}
.saucePoint span {
	display: block;
	text-align: center;
	font-size: 1.8rem;
	font-weight: 600;
	color: #FFF;
	line-height: var(--lineHeight-titleText);
}
@media (max-width: 767px) {
	.subPage__content:has(.sauce__header) {
		padding-top: 0;
	}
	.sauce__header {
		margin-bottom: min(130 / 750 * 100vw, 6.5rem);
		padding-top: min(105 / 750 * 100vw, 5.25rem);
	}
	.sauce__title {
		font-size: 3rem;
		margin-bottom: min(35 / 750 * 100vw, 1.75rem);
	}
	.sauce__read {
		font-size: 1.6rem;
		margin-bottom: min(105 / 750 * 100vw, 5.25rem);
	}
	.sauce__bgImage {
		height: min(750 / 750 * 100vw, 37.5rem);
		border-radius: 0;
	}
	.sauce__image {
		width: min(420 / 750 * 100vw, 21rem);
	}
	.saucePoint {
		width: 100%;
		border-radius: 0;
		margin: 0 auto min(40 / 750 * 100vw, 2rem);
		padding: min(10 / 750 * 100vw, .5rem) min(50 / 750 * 100vw, 2.5rem);
	}
	.saucePoint span {
		font-size: 1.6rem;
	}
}

.ingredients {
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: 1fr 1fr;
	gap: 0 9.09%;
	width: min(100%, 88rem);
	margin: 0 auto 10rem;
}
.ingredients__item {
	display: grid;
	grid-row-start: span 3;
	grid-template-rows: subgrid;
}
.ingredients__title {
	text-align: center;
	font-size: 2.6rem;
	font-weight: 600;
	line-height: var(--lineHeight-titleText);
	margin-bottom: 1.5rem;
}
.ingredients__text {
	line-height: var(--lineHeight-text);
	margin-bottom: 2rem;
}
.ingredients__image {
	width: 75%;
	margin-left: auto;
	margin-right: auto;
}
.ingredients__item--left .ingredients__image {
	width: 76.875%
}
@media (max-width: 767px) {
	.ingredients {
		display: flex;
		flex-direction: column;
		gap: min(70 / 750 * 100vw, 3.5rem) 0;
		width: 100%;
		margin: 0 auto min(130 / 750 * 100vw, 6.5rem);
	}
	.ingredients__item {
		display: inline;
	}
	.ingredients__title {
		font-size: 2.1rem;
		margin-bottom: min(20 / 750 * 100vw, 1rem);
	}
	.ingredients__text {
		margin-bottom: min(20 / 750 * 100vw, 1rem);
	}
	.ingredients__image {
		width: min(530 / 750 * 100vw, 26.5rem);
	}
	.ingredients__item--left .ingredients__image {
		width: min(558 / 750 * 100vw, 27.9rem)
	}
}

.make {
	display: flex;
	flex-wrap: wrap;
	gap: 5.5rem 0;
	width: min(100%, 88rem);
	margin: 0 auto 2rem;
}
.make__item {
	width: 43.182%;
}
.make__item:nth-of-type(odd) {
	display: flex;
	width: 56.818%;
}
.make__item:nth-of-type(odd)::after {
	content: "";
	width: 24%;
	height: 100%;
	background: url("../../images/icon_arrow_02.svg") no-repeat center center / 20%;
	pointer-events: none;
}
.make__item:nth-of-type(odd) dl {
	width: 76%;
}
.make__image {
	line-height: var(--lineHeight-text);
	margin-bottom: 1.5rem;
	border-radius: 1rem;
	overflow: hidden;
}
.make__image img {
	height: 100%;
	object-fit: cover;
}
.make__title {
	display: flex;
	align-items: center;
	margin-bottom: 1rem;
}
.make__title p {
	flex: 1;
	text-align: center;
	font-size: 2.6rem;
	font-weight: 600;
	line-height: var(--lineHeight-titleText);
	padding-right: min(100%, 7rem);
}
.make__text {
	line-height: var(--lineHeight-text);
}
@media (max-width: 767px) {
	.make {
		gap: 0;
		width: 100%;
		margin: 0 auto min(30 / 750 * 100vw, 1.5rem);
	}
	.make__item {
		display: flex;
		flex-direction: column;
		width: min(650 / 750 * 100vw, 32.5rem);
		margin-left: auto;
		margin-right: auto;
	}
	.make__item:nth-of-type(odd) {
		flex-direction: column;
		width: min(650 / 750 * 100vw, 32.5rem);
	}
	.make__item:nth-of-type(odd)::after,
	.make__item:not(:last-child)::after {
		content: "";
		width: 100%;
		height: min(130 / 750 * 100vw, 6.5rem);
		background: url("../../images/icon_arrow_02.svg") no-repeat center center / min(40 / 750 * 100vw, 2rem);
		transform: rotate(90deg);
	}
	.make__item:nth-of-type(odd) dl {
		width: 100%;
	}
	.make__image {
		margin-bottom: min(25 / 750 * 100vw, 1.25rem);
		border-radius: calc(10 / 750 * 100vw);
	}
	.make__title {
		margin-bottom: min(20 / 750 * 100vw, 1rem);
	}
	.make__title p {
		font-size: 2.1rem;
		padding-right: min(115 / 750 * 100vw, 5.75rem);
	}
}