@charset "utf-8";
/* 2025 エッセンシャルオイル頒布会LP */
:where(.lp-daichi) {
	--oil-bg: #f4efef;
	--font-color01: #473b31;
	--font-color02: #241f1d;
	--font-color03: #473f3a;
	--color-schedule: #5f4e3d;
	--color-key01: #c9ccbe;
	--color-key02: #ddd7d3;

	/* https://min-max-calculator.9elements.com/ */
	/* 480px-960px幅 */
	--min14max16: clamp(0.875rem, 0.75rem + 0.42vw, 1rem);
	--min14max18: clamp(0.875rem, 0.625rem + 0.83vw, 1.125rem);
	--min15max20: clamp(0.938rem, 0.625rem + 1.04vw, 1.25rem);
	--min18max23: clamp(1.125rem, 0.813rem + 1.04vw, 1.438rem);
	/* --min22max28: clamp(1.375rem, 1rem + 1.25vw, 1.75rem); */
	--min22max31: clamp(1.375rem, 0.813rem + 1.88vw, 1.938rem);
	--min22max35: clamp(1.375rem, 0.563rem + 2.71vw, 2.188rem);
	--min40max66: clamp(2.5rem, 0.875rem + 5.42vw, 4.125rem);
	--min70max113: clamp(4.375rem, 1.688rem + 8.96vw, 7.063rem);
}

:where([class]).-bgGrey {
	background: var(--oil-bg);
}
.item-detail .lp-daichi:not(:has(.lp-end, .-goyomiDetail)) {
	margin-top: 0;
}
.lead-area.-oil,
.vendor-area.-oil,
.purpose-area {
	width: calc(100% + (2 * var(--min10max20)));
	transform: translateX(calc(-1 * (var(--min10max20))));
	box-sizing: border-box;
}
.area-head {
	color: var(--font-color01);
}
.area-head > .uBar {
	display: block;
	padding-bottom: 0;
	border-bottom: unset;
}
.area-head > .uBar::after {
	content: "";
	display: block;
	margin-inline: auto;
	width: 100%;
	max-width: 360px;
	height: 5px;
	margin-top: var(--min7max10);
}
.area-head.-point > .uBar::after {
	background: linear-gradient(to right, #789173, #cddb97);
	max-width: 350px;
}
.area-head.-vendor > .uBar::after {
	background: linear-gradient(to right, #9a74b3, #ed9ebc);
	max-width: 265px;
}
.area-head.-deli > .uBar::after {
	background: linear-gradient(to right, #c17028, #ebcd24);
}
.area-head.-purpose > .uBar::after {
	background: linear-gradient(to right, #4f696a, #b1c1c0);
}
.point-area::before,
.purpose-area + .cv-area::before {
	content: "";
	display: block;
	width: calc(100% + (2 * var(--min10max20)));
	height: var(--min40max66);
	transform: translateX(calc(-1 * (var(--min10max20))));
	background: url(/external/category/image/2025/essential_oil/wave_bg1.png);
	background-position: bottom center;
	background-size: cover;
	background-repeat: no-repeat;
}
.block-section--deli::after {
	content: "";
	display: block;
	width: calc(100% + (2 * var(--min10max20)));
	height: var(--min70max113);
	transform: translateX(calc(-1 * (var(--min10max20))));
	/* margin-top: var(--min25max40); */
	background: url(/external/category/image/2025/essential_oil/wave_bg2.png);
	/* background-position: bottom center; */
	background-size: cover;
	background-repeat: no-repeat;
}

.purpose-area + .cv-area {
	margin-top: 0;
}
.purpose-area + .cv-area .block-grid.-cv {
	margin-top: var(--min30max50);
}
.cv-textwrap.-oil {
	padding-top: 0;
}
.cv-text.-oil {
	margin-top: 25px;
}
.js-item-sales .item-summary .info .cart {
	margin-top: 25px;
}
.cv-textwrap.-oil > .title {
	width: calc(100% + (2 * var(--min20max30)));
	transform: translateX(calc(-1 * (var(--min20max30))));
}
.cv-textwrap > .title .image.-small {
	display: block;
	margin-inline: auto;
	max-width: 364px;
}
.contents-area:has( > .lead-area) {
	padding-top: 0;
}
.lead-area.-oil {
	padding-block: var(--min25max40) var(--min10max20);
	background: var(--color-key01);
	color: var(--font-color02);
	font-size: var(--min23max27);
}
.lead-area.-oil > .text {
	line-height: 1.75;
}
.lead-mark {
	background: linear-gradient(transparent 72%, #e3a91d 0%);
	font-size: var(--min22max35);
	line-height: 1.5;
}

.area-head.-point {
	margin-top: var(--min20max30);
}
.block-grid.-point {
	gap: 20px;
	margin-top: var(--min25max35);
}
.point-textwrap {
	color: var(--font-color03);
}
.point-textwrap > .title {
	font-size: var(--min23max27);
}
.point-textwrap > .text {
	margin-top: var(--min10max15);
	font-size: var(--min17max20);
	line-height: 1.5;
}

.vendor-area.-oil {
	padding: var(--min30max40) var(--min10max20);
	background: var(--color-key02);
	color: var(--font-color01);
}
.area-head.-vendor > .sub {
	margin-bottom: 0;
}

.block-section {
	padding-top: 6%;
}
.block-section.block-section--deli .block-grid.-col2.-deli {
	column-gap: 3%;
	row-gap: var(--min15max20);
	margin-top: var(--min25max35);
}
.block-section.block-section--deli .card {
	background-color: #fff;
	border: solid 1px #bcbcbc;
}
.block-section.block-section--deli .card .name {
	padding: 2.5% 4.5% 1.5%;
	background-color: #e4dad0;
	color: var(--color-schedule);
	font-size: var(--min22max31);
	font-weight: bold;
	line-height: 1.25;
}
.block-grid.-deli .sub {
	color: #fff;
	background: var(--color-schedule);
	display: inline-block;
	padding: 1.4% 3% 0.7%;
	font-size: var(--min15max20);
}
.name-small {
	display: block;
	margin-top: 1.5%;
	line-height: 1.5;
	font-size: var(--min18max23);
}
.block-section.block-section--deli .card .specwrap {
	padding: 4% 4.5%;
}
.block-section.block-section--deli .card .specwrap .date {
	color: var(--color-schedule);
	font-size: var(--min14max18);
	font-weight: bold;
}
.block-section.block-section--deli .card .specwrap .amount {
	font-size: var(--min14max16);
}
.block-section.block-section--deli .card .specwrap .price {
	font-size: var(--min14max16);
	font-weight: bold;
}
.block-section.block-section--deli .card .detailwrap {
	padding: 4% 4.5%;
	font-size: 0.875rem;
	line-height: 1.5;
}
.block-section.block-section--deli .card .detailwrap .wrap-grid {
	display: grid;
	gap: 4%;
	grid-template-columns: 34% 62%;
}
.block-section.block-section--deli .card .detailwrap p + p, .block-section.block-section--deli .card .detailwrap div + p, .block-section.block-section--deli .card .detailwrap p + div {
	margin-top: 2.5%;
}

.purpose-area {
	padding-top: var(--min20max30);
	background: var(--color-key01);
	color: var(--font-color01);
}
.block-grid.-purpose {
	max-width: 600px;
	gap: var(--min20max30);
	margin: var(--min25max35) auto 0;
	padding-inline: var(--min20max30);
	text-align: center;
}
.purpose-text {
	padding-top: var(--min15max20);
	font-size: var(--min23max27);
	line-height: 1.3;
}

.guide-sec > .body {
	padding-bottom: var(--min20max60);
}
.inner.-arrowDL:last-child {
	display: none;
}

@media (max-width: 480px) {
	.area-head > .uBar::after {
		content: "";
		width: 65%;
	}
}