@charset "utf-8";
/* ぶどう頒布会 2026 */

:where(.lp-daichi) {
	/* オーバライド */
	--color-cv: #fff;
	--pico-bg: #b2238f;
	--pico-solid-color: #7b035e;

	--lead-text: #3f2f0d;
	--push-bg: #d8f747;
	--push-head: #4ba000;
	--lp-purple: #ad218f;
	--deli-bg: #f3ffcb;
	--deli-head: #6e5569;
	--farm-bg: #f7f7f7;
	--farmer-title: #8cc20d;

	/* 
	https://min-max-calculator.9elements.com/
	width:479-960px | P:point小数点 
	*/

	--minM55maxM40: clamp(-3.438rem, -4.371rem + 3.12vw, -2.5rem);
	--minM50max0: clamp(-3.125rem, -6.237rem + 10.4vw, 0rem);
	--minM25maxM20: clamp(-1.563rem, -1.874rem + 1.04vw, -1.25rem);
	--minM25max0: clamp(-1.563rem, -3.119rem + 5.2vw, 0rem);
	--minM15max0: clamp(-0.938rem, -1.871rem + 3.12vw, 0rem);
	--minM5max0: clamp(-0.313rem, -0.624rem + 1.04vw, 0rem);
	--min0max5: clamp(0rem, -0.311rem + 1.04vw, 0.313rem);
	--min0max20: clamp(0rem, -1.245rem + 4.16vw, 1.25rem);
	--min0max35: clamp(0rem, -2.178rem + 7.28vw, 2.188rem);
	--min0max50: clamp(0rem, -3.112rem + 10.4vw, 3.125rem);
	--min0max90: clamp(0rem, -5.602rem + 18.71vw, 5.625rem);
	--min1P6max2P4: clamp(0.1rem, 0.05rem + 0.17vw, 0.15rem);
	--min5max10: clamp(0.313rem, 0.001rem + 1.04vw, 0.625rem);
	--min5max11: clamp(0.313rem, -0.061rem + 1.25vw, 0.688rem);
	--min9max13: clamp(0.563rem, 0.314rem + 0.83vw, 0.813rem);
	--min10max15: clamp(0.625rem, 0.314rem + 1.04vw, 0.938rem);
	--min10max17: clamp(0.625rem, 0.189rem + 1.46vw, 1.063rem);
	--min10max20: clamp(0.625rem, 0.003rem + 2.08vw, 1.25rem);
	--min10max40: clamp(0.625rem, -1.242rem + 6.24vw, 2.5rem);
	--min12max14: clamp(0.75rem, 0.626rem + 0.42vw, 0.875rem);
	--min12max18: clamp(0.75rem, 0.377rem + 1.25vw, 1.125rem);
	--min13max18: clamp(0.813rem, 0.501rem + 1.04vw, 1.125rem);
	--min15max18: clamp(0.938rem, 0.751rem + 0.62vw, 1.125rem);
	--min15max20: clamp(0.938rem, 0.626rem + 1.04vw, 1.25rem);
	--min15max25: clamp(0.938rem, 0.315rem + 2.08vw, 1.563rem);
	--min15max30: clamp(0.938rem, 0.004rem + 3.12vw, 1.875rem);
	--min15max40: clamp(0.938rem, -0.619rem + 5.2vw, 2.5rem);
	--min16max18: clamp(1rem, 0.876rem + 0.42vw, 1.125rem);
	--min16max42: clamp(1rem, -0.618rem + 5.41vw, 2.625rem);
	--min17max36: clamp(1.063rem, -0.12rem + 3.95vw, 2.25rem);
	--min18max26: clamp(1.125rem, 0.627rem + 1.66vw, 1.625rem);
	--min18max37: clamp(1.125rem, -0.058rem + 3.95vw, 2.313rem);
	--min20max24: clamp(1.25rem, 1.001rem + 0.83vw, 1.5rem);
	--min20max25: clamp(1.25rem, 0.939rem + 1.04vw, 1.563rem);
	--min20max30: clamp(1.25rem, 0.628rem + 2.08vw, 1.875rem);
	--min20max32: clamp(1.25rem, 0.503rem + 2.49vw, 2rem);
	--min20max40: clamp(1.25rem, 0.005rem + 4.16vw, 2.5rem);
	--min20max45: clamp(1.25rem, -0.306rem + 5.2vw, 2.813rem);
	--min20max70: clamp(1.25rem, -1.862rem + 10.4vw, 4.375rem);
	--min23max27: clamp(1.438rem, 1.189rem + 0.83vw, 1.688rem);
	--min23max33: clamp(1.438rem, 0.815rem + 2.08vw, 2.063rem);
	--min23max53: clamp(1.438rem, -0.43rem + 6.24vw, 3.313rem);
	--min25max35: clamp(1.563rem, 0.94rem + 2.08vw, 2.188rem);
	--min25max40: clamp(1.563rem, 0.629rem + 3.12vw, 2.5rem);
	--min27max60: clamp(1.688rem, -0.366rem + 6.86vw, 3.75rem);
	--min28max45: clamp(1.75rem, 0.692rem + 3.53vw, 2.813rem);
	--min30max40: clamp(1.875rem, 1.253rem + 2.08vw, 2.5rem);
	--min25max65: clamp(1.563rem, -0.927rem + 8.32vw, 4.063rem);
	--min35max50: clamp(2.188rem, 1.254rem + 3.12vw, 3.125rem);
	--min60max100: clamp(3.75rem, 1.26rem + 8.32vw, 6.25rem);
	--min70max100: clamp(4.375rem, 2.508rem + 6.24vw, 6.25rem);
}

.lp-daichi {
	overflow: hidden;
}

.kome-list {
	margin-top: var(--min20max25);
	padding-inline: calc(-1*var(--minM15max0));
}

.lead-sec {
	text-align: center;
	margin-top: calc(-1*var(--minM5max0));
	padding-inline: 15px;
}
.lead-sec .head {
	color: #fff;
	font-size: var(--min23max53);
	font-family: var(--font-minchou);
	line-height: 1.3;
	position: relative;
	background: #BF278F;
	background: linear-gradient(180deg,rgba(191, 39, 143, 1) 0%, rgba(127, 19, 143, 1) 84%);
	-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lead-texts {
	padding-top: var(--min15max25);
}
.lead-texts .text {
	font-size: var(--min18max26);
	line-height: 2;
	text-align: center;
	background-position: 0 100%;
	background-size: 18px 2px;
	background-repeat: repeat-x;
	color: var(--lead-text);
}

.contents-area {
	margin-top: var(--min20max45);
}
.contents-area + .guide-sec {
	margin-top: 0;
}

.cv-area {
	padding-inline: var(--min15max30);
}
.cv-area > .inner > .head {
	color: #fff;
	font-size: var(--min23max33);
	text-align: center;
	padding-block: 8px 5px;
	letter-spacing: .14rem;
}
.cv-area .dialog-opener:hover {
	transition: all 0.7s;
  opacity: 0.7;
}
.cv-btn {
	margin-top: var(--min20max25);
}
.guide-anc {
	margin-top: var(--min15max30);
}
.cv-area .js-item-sales {
	margin-inline: auto;
	width: min(410px, 90%);;
}
.js-item-sales .item-summary .info .cart .add-to-cart .add-to-cart fieldset .button {
	position: relative;
	padding-block: var(--min10max17) var(--min5max11);
}
.js-item-sales .item-summary .info .cart .add-to-cart .add-to-cart fieldset .button > span {
	padding: 0;
	margin: 0;
	background: none;
	display: flex;
	display: flex;
	align-items: baseline;
	column-gap: 8px;
}
.js-item-sales .item-summary .info .cart .add-to-cart .add-to-cart fieldset .button > span::before {
	content: "";
	display: block;
	-webkit-mask: url(/external/category/image/common/icon/icon_reserve.svg) no-repeat;
	mask: url(/external/category/image/common/icon/icon_reserve.svg) no-repeat;
	width: 25px;
	aspect-ratio: 17 / 15;
	background-color: #fff;
}
/* / */

.push-area {
	background-color: var(--push-bg);
	margin-top: var(--min30max40);
}
.push-texts {
	padding-inline: var(--min15max40) var(--min15max20);
	padding-block: var(--min10max40);
}
.push-texts > .head {
	color: var(--push-head);
	font-size: var(--min35max50);
	font-family: var(--font-minchou);
	line-height: 1.2;
	text-align: left;
	display: grid;
}
.push-texts > .head .sub {
	font-size: 48%;
	display: inline-block;
	margin-bottom: var(--min10max20);
}
.push-texts > .text {
	font-size: var(--min16max18);
	margin-top: var(--min10max15);
}
.push-image {
	padding-inline: var(--min15max20);
	padding-block: var(--min10max20) calc(-1*var(--minM25maxM20));
}
.push-image img {
	border-radius: 18px;
}

[class*="area"] .head.-slash {
	text-align: center;
	font-size: var(--min27max60);
	font-family: var(--font-minchou);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
  line-height: 1.2;
	letter-spacing: .4rem;
} 
[class*="area"] .head.-slash::before,
[class*="area"] .head.-slash::after {
	content: "";
	display: block;
	width: var(--min25max65);
	height: 2px;
	transform: rotate(-60deg);
}
[class*="area"] .head.-slash::before {
	transform: rotate(60deg);
	margin-left: auto;
}
.charm-area {
	margin-top: var(--min35max50);
}
.charm-area .head {
	color: var(--lp-purple);
}
.charm-area .head.-slash::before,
.charm-area .head.-slash::after {
	background-color: var(--lp-purple);
}
.block-grid.-charm:has(.-first) {
	grid-template-columns: min(70%, 520px) auto;
	margin-top: var(--min25max40);
}
.charm-texts {
	background: url(/external/category/image/2026/grape/charm_bg.jpg);
	padding-block: var(--min20max40);
	color: #fff;
}
.charm-texts.-first {
	padding-inline: var(--min10max40) calc(-1*var(--minM55maxM40));
	height: fit-content;
	transform: translateX(var(--min0max20));
}
.charm-texts .title {
	font-size: var(--min17max36);
	font-size: var(--min18max37);
	font-family: var(--font-minchou);
	letter-spacing: var(--min1P6max2P4);
	line-height: 1.25;
}
.charm-texts .text {
	font-size: var(--min13max18);
	margin-top: var(--min10max15);
	line-height: 1.6;
}
.charm-image {
	isolation: isolate;
}
.charm-image.-first {
	transform: translateY(calc(-1*var(--minM50max0)));
}
.block-grid.-charm:has(.-second) {
	margin-top: 15px;
	grid-template-columns: min(490px,50%) min(470px,50%);
}
.charm-image.-first img {
	margin-left: calc(-1*var(--min60max100));
  width: calc(100% + var(--min70max100));
}
.charm-texts.-second {
	padding-inline: var(--min10max40);
	order: 2;
	transform: translateX(calc(-1*var(--min0max50)));
  height: fit-content;
	padding-block: var(--min20max70);
	margin-left: var(--minM25max0);
	margin-top: calc(-1*var(--minM25max0));
}
.charm-image.-second {
	order: 1;
	margin-top: calc(-1*var(--min0max90));
}

.deli-area {
	margin-top: var(--min30max40);
	padding-inline: var(--min15max25);
	padding-block: var(--min20max30) 20px;
	background-color: var(--deli-bg);
}
.deli-area > .head {
	color: var(--deli-head);
}
.deli-area > .head::before,
.deli-area > .head::after {
	margin-top: var(--min16max42);
	background-color: var(--deli-head);
}
.deli-area > .head > .str > .sub {
	font-size: 58.3334%;
	font-family: var(--font-gothic);
  display: block;
	letter-spacing: .23rem;
}
.block-grid.-deli {
	gap: 20px;
}
.deli-area .head + .block-grid.-deli {
	margin-top: var(--min15max30);
}
.block-grid.-deli + .block-grid.-deli {
	margin-top: 20px;
}
.deli-grid {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 5;
	gap: 0;
	background-color: #fff;
	padding-bottom: 15px;
}
.deli-grid :is(.specs,.appeal,.list) {
	padding-inline: var(--min10max15);
}
.deli-grid .specs + .image {
	margin-top: 10px;
}
.deli-grid .name {
	font-family: var(--font-gothic);
	font-size: var(--min23max27);
	font-size: var(--min20max24);
	color: #fff;
	line-height: 1.2;
	background-color: var(--lp-purple);
	padding-block: var(--min12max18) var(--min9max13);
	padding-inline: var(--min10max15);
}
.deli-grid .date {
	font-weight: bold;
	font-size: var(--min15max18);
	margin-top: var(--min10max15);
	color: var(--lp-purple);
	display: flex;
  align-items: center;
}
.deli-grid .date::before {
	content: "お届け予定：";
	font-size: var(--min15max18);
	line-height: 1;
	display: block;
	margin-right: 0;
	border: none;
	padding: 0;
	font-size: 77.5%;
}
.deli-grid .price .amount {
	font-weight: 100;
	display: block;
	margin-bottom: var(--min0max5);
}
.deli-grid .appeal {
	margin-top: var(--min5max10);
	margin-top: var(--min10max15);
}
.deli-grid .list {
	font-size: var(--min12max14);
	line-height: 1.4;
	margin-top: 10px;
}
.deli-grid .list li:first-of-type {
	margin-top: 0;
}
.block-grid.-deli + .list {
	margin-top: 15px;
}
.deli-area + .cv-area {
	margin-top: var(--min30max40);
}

.farm-area {
	margin-top: var(--min30max40);
	background-color: var(--farm-bg);
	padding-block: var(--min20max30);
	padding-inline: var(--min15max30);
}
.farm-area > .head {
	font-size: var(--min28max45);
  letter-spacing: .12rem;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: var(--min15max25);
	align-items: center;
}
.farm-area > .head::before,
.farm-area > .head::after {
	content: "";
	display: block;
	width: var(--min25max35);
	height: 2px;
	background-color: #000;
}
.farm-area > .head::before {
	margin-left: auto;
}
.block-grid.-farm {
	grid-template-areas:
		"f_image f_title"
		"f_image f_text";
	width: min(780px,100%);
	margin-inline: auto;
	column-gap: var(--min0max35);
}
.block-grid.-farm.-reverse {
	grid-template-areas:
		"f_title f_image"
		"f_text f_image";
}
.block-grid.-farm:first-of-type {
	margin-top: var(--min15max25);
}
.block-grid.-farm + .block-grid.-farm {
	margin-top: var(--min20max25);
}
.block-grid.-farm > .image {
	grid-area: f_image;
}
.block-grid.-farm > .title {
	grid-area: f_title;
	font-size: var(--min20max32);
	color: var(--farmer-title);
}
.block-grid.-farm > .title > .farm {
	font-size: 71.8751%;
	display: inline-block;
}
.block-grid.-farm > .title > .farm::before {
	content: "/";
	padding-inline: var(--min0max5);
	font-size: var(--min20max32);
	font-weight: 100;
} 
.block-grid.-farm > .text {
	grid-area: f_text;
	line-height: 1.7;
}

@media (max-width: 479px) {

	.lead-sec {
		text-align: left;
	}
	.lead-texts .text {
		line-height: 1.6;
		text-align: left;
	}

	.block-grid.-charm:has(.-second) {
		grid-template-columns: 57% 43%;
	}

	.block-grid.-farm,
	.block-grid.-farm.-reverse {
		grid-template-areas:
			"f_image f_title"
			"f_text f_text";
		align-items: center;
		grid-template-columns: 53% auto;
	}
	.block-grid.-farm > .title {
		display: grid;
    place-content: center;
		line-height: inherit;
	}.block-grid.-farm > .title > .farm::before {
		content: none;
	}
	.block-grid.-farm > .text {
		margin-top: 15px;
	}

}