@charset "utf-8";
/* とうもろこし頒布会2026 */

:where(.lp-daichi) {
	/* --color-cv: #fff; */
	--color-pico: #E87435;
	--corn-grn: #046E10;
	--goro-bg: #FCFBE5;
	--goro-arrow: #F57404;
	--farmer-ttl: #057711;
	--utility-clr: #939393;
	--main-strong: #f25500;
	--cv-shadow: rgba(195, 133, 0, .9);
	--height-pico-register: var(--min10max18);
	--sched-border: 1px solid #BCBCBC;

	/* https://min-max-calculator.9elements.com/ 480px-960px幅 */
	--minM30maxM20: clamp(-1.875rem, -2.5rem + 2.08vw, -1.25rem);
	--min4max8: clamp(0.25rem, 0.83vw, 0.5rem);
	--min8max13: clamp(0.5rem, 0.188rem + 1.04vw, 0.813rem);
	--min10max15: clamp(0.625rem, 0.313rem + 1.04vw, 0.938rem);
	--min10max18: clamp(0.625rem, 0.125rem + 1.67vw, 1.125rem);
	--min10max20: clamp(0.625rem, 2.08vw, 1.25rem);
	--min10max85: clamp(0.625rem, -4.063rem + 15.63vw, 5.313rem);
	--min12max15: clamp(0.75rem, 0.563rem + 0.63vw, 0.938rem);
	--min15max20: clamp(0.938rem, 0.625rem + 1.04vw, 1.25rem);
	--min15max28: clamp(0.938rem, 0.125rem + 2.71vw, 1.75rem);
	--min15max30: clamp(0.938rem, 3.13vw, 1.875rem);
	--min16max18: clamp(1rem, 0.875rem + 0.42vw, 1.125rem);
	--min17max20: clamp(1.063rem, 0.875rem + 0.63vw, 1.25rem);
	--min20max25: clamp(1.25rem, 0.938rem + 1.04vw, 1.563rem);
	--min20max26: clamp(1.25rem, 0.875rem + 1.25vw, 1.625rem);
	--min20max30: clamp(1.25rem, 0.625rem + 2.08vw, 1.875rem);
	--min20max40: clamp(1.25rem, 4.17vw, 2.5rem);
	--min20max125: clamp(1.25rem, -5.313rem + 21.88vw, 7.813rem);
	--min22max27: clamp(1.375rem, 1.063rem + 1.04vw, 1.688rem);
	--min23max27: clamp(1.438rem, 1.188rem + 0.83vw, 1.688rem);
	--min23max28: clamp(1.438rem, 1.125rem + 1.04vw, 1.75rem);
	--min25max35: clamp(1.563rem, 0.938rem + 2.08vw, 2.188rem);
	--min25max40: clamp(1.563rem, 0.625rem + 3.13vw, 2.5rem);
	--min25max80: clamp(1.563rem, -1.875rem + 11.46vw, 5rem);
	--min28max60: clamp(1.75rem, -0.25rem + 6.67vw, 3.75rem);
	--min30max50: clamp(1.875rem, 0.625rem + 4.17vw, 3.125rem);
	--min30max60: clamp(1.875rem, 6.25vw, 3.75rem);
	--min30max70: clamp(1.875rem, -0.625rem + 8.33vw, 4.375rem);
	--min35max50: clamp(2.188rem, 1.25rem + 3.13vw, 3.125rem);
	--min40max50: clamp(2.5rem, 1.875rem + 2.08vw, 3.125rem);
	--min40max100: clamp(2.5rem, -1.25rem + 12.5vw, 6.25rem);
	--min45max115: clamp(2.813rem, -1.563rem + 14.58vw, 7.188rem);
	--min65max176: clamp(4.063rem, -2.875rem + 23.13vw, 11rem);
	--min80max100: clamp(5rem, 3.75rem + 4.17vw, 6.25rem);
	--min90max100: clamp(5.625rem, 5rem + 2.08vw, 6.25rem);
	--min120max150: clamp(7.5rem, 5.625rem + 6.25vw, 9.375rem);
}

.main-area {
	background: url(/external/category/image/2026/corn/main_bg.jpg);
}
.main-area .strong {
	text-align: center;
	font-weight: bold;
	font-size: var(--min28max60);
	color: #fff;
	background-color: var(--main-strong);
	padding-block: var(--min15max28) var(--min10max20);
	padding-inline: 15px;
	line-height: 1.2;
}

[class*="area"] .head {
	text-align: center;
	padding-inline: 15px;
}
[class*="area"] .head img {
	width: min(564px, 100%);
}

.reason-area {
	margin-top: var(--min30max50);
}
.reason-area .body {
	padding: 0 var(--min10max20) var(--min30max60);
}
.block-grid.-reason {
	gap: 25px;
}

.cv-area {
	margin-inline: auto;
	padding: var(--min10max20) var(--min10max20) 0;
}
.guide-sec + .cv-area {
	padding-top: 0;
}

/* CVボタン */
.js-item-sales {
	margin: var(--min15max20) auto 0;
}
.cv-area .js-item-sales {
	width: min(410px, 70%);
}
.js-item-sales .item-summary .info .cart .add-to-cart.registration fieldset .button {
	filter: none;
	box-shadow: 0 6px 0 var(--cv-shadow);
	border-radius: 15px;
	padding-block: 16px 10px;
	transition: all .7s;
	margin: 0;
	color: initial;
}
.js-item-sales .item-summary .info .cart .add-to-cart.registration fieldset .button:hover {
	transition: all .7s;
	box-shadow: 0 2px 0 var(--cv-shadow);
	transform: translateY(6px);
}
.js-item-sales .item-summary .info .cart .add-to-cart.registration fieldset .button > span {
	font-size: var(--min23max27);
	background: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 8px;
	align-items: center;
}
.js-item-sales .item-summary .info .cart .add-to-cart.registration fieldset .button > span::before {
	content: "";
	display: block;
	width: 30px;
	margin-top: calc(-1 * var(--min3max6));
	aspect-ratio: 17 / 15;
	background: url(/assets/img/icon_reserve-renewal.png) no-repeat;
	background-size: contain;
}
.js-item-sales .item-summary .info .cart::after {
	content: "お休み、途中解約もOK";
	display: block;
	font-size: 17px;
	color: initial;
	font-weight: bold;
	margin-top: 10px;
}
.js-item-sales .item-summary .info > *:not(.cart) {
	display: none;
}

.cal-area {
	margin-top: var(--min40max50);
	padding-inline: var(--min10max20);
}
.cal-area > .head + .text {
	text-align: center;
	margin-top: var(--min15max20);
}
.cal-area > .body {
	margin-top: var(--min15max20);
}

.sched-area {
	padding-inline: var(--min10max20);
}
.block-grid.-sched {
	gap: var(--min15max30);
	margin-top: var(--min20max25);
}
.grid-sched {
	border: var(--sched-border);
	border-top: none;
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 4;
	gap: 0;
}
.grid-sched > .title {
	background-color: var(--corn-grn);
	color: #fff;
	font-size: var(--min22max27);
	padding-block: var(--min8max13) var(--min4max8);
	padding-inline: var(--min10max15);
	box-sizing: border-box;
	width: calc(100% + 2px);
	transform: translateX(-1px);
	line-height: 1.25;
	display: grid;
  align-items: center;
}
.grid-sched > .date {
	color: var(--corn-grn);
	font-size: var(--min16max18);
	font-weight: bold;
	line-height: 1.25;
	padding-block: 8px 5px;
  padding-inline: var(--min10max15);
	border-bottom: var(--sched-border);
}
.grid-sched > .date::before {
	content: "お届け予定：";
	font-size: 80%;
	display: block;
}
.grid-sched > .textwrap {
	padding-block: var(--min10max15);
	padding-inline: var(--min15max20);
}
.grid-sched > .textwrap > .text > .strong {
	font-weight: bold;
	font-size: 18px;
}

.cook-area {
	margin-top: var(--min40max50);
}
.cook-area > .body {
	margin-top: 25px;
}
.cook-area > .body > .leaflet {
	width: min(500px,85%);
	margin-inline: auto;
  margin-top: calc(-1*var(--min40max100));
}
.cook-area + .cv-area {
	margin-top: var(--min40max50);
}

.goro-area {
	background-color: var(--goro-bg);
	padding-inline: var(--min10max20);
	padding-block: 20px var(--min35max50);
}
.goro-area:not(.-three) {
	position: relative;
	margin-top: calc(var(--min120max150)/2 + 30px);
	padding-top: var(--min80max100);
}
.goro-area::before {
	content: "";
	display: block;
	width: var(--min120max150);
	margin-inline: auto;
	height: fit-content;
	aspect-ratio: 1/1;
	background: url(/external/category/image/2026/corn/goro_logo.png) no-repeat center / contain;
}
.goro-area:not(.-three)::before {
	position: absolute;
	left: 0;
	right: 0;
	margin-inline: auto;
	top: calc(-1*(var(--min120max150)/2));
}
.goro-area > .head + .text {
	text-align: center;
	margin-top: var(--min15max20);
}
.goro-area.-three > .head {
	margin-top: 20px;
}
.goro-area .body {
	margin-top: var(--min30max70);
}
.block-grid.-goro {
	gap: 8.5%;
}
.grid-goro {
	width: min(260px, 100%);
}
.grid-goro:not(.-three) {
	margin-inline: auto;
}
.grid-goro.-three.-no02 {
	margin-left: auto;
}
.grid-goro.-three.-no03 {
	margin-right: auto;
}
.grid-goro[class*="no"] {
	position: relative;
}
.grid-goro[class*="no"]::before {
	content: "";
	display: block;
	position: absolute;
	background: no-repeat center / contain;
	z-index: 1;
}
.grid-goro.-no01::before {
	background-image: url(/external/category/image/2026/corn/goro01_balloon.png);
	width: var(--min45max115);
	height: fit-content;
	aspect-ratio: 58/43;
	top: -10px;
	left: -10px;
}
.grid-goro.-no02::before {
	background-image: url(/external/category/image/2026/corn/goro02_balloon.png);
	width: var(--min45max115);
	height: fit-content;
	aspect-ratio: 58/43;
	top: -10px;
	left: -10px;
}
.grid-goro.-no03::before {
	background-image: url(/external/category/image/2026/corn/goro03_balloon.png);
	width: var(--min65max176);
	height: fit-content;
	aspect-ratio: 4/3;
	top: calc(-1*var(--min25max80));
	right: calc(-1*var(--min10max15));
}
.grid-goro.-three.-no02::before {
	left: calc(-1*var(--min10max85));
}
.grid-goro.-three.-no03::before {
	top: calc(-1*var(--min20max40));
	right: calc(-1*var(--min20max125))
}
.grid-goro .image.-arrowR {
	position: relative;
}
.grid-goro .image.-arrowR::after {
	content: "";
	display: block;
	width: var(--min23max28);
	height: fit-content;
	aspect-ratio: 6/7;
	-webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
	clip-path: polygon(0 0, 0% 100%, 100% 50%);
	background: var(--goro-arrow);
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	left: calc(-29%/2 - var(--min23max28)/2);
}
.grid-goro > .text {
	text-align: center;
	margin-top: var(--min15max30);
}
.grid-goro.-no01 > .text img {
	width: 91.6%;
}
.grid-goro.-no02 > .text img {
	width: 116.5%;
	transform: translateX(-8.25%);
}
.grid-goro.-no03 > .text img {
	width: 105.2%;
	transform: translateX(-2.6%);
}

.farmer-sec {
	padding-block: var(--min15max20) var(--min20max30);
	padding-inline: var(--min20max30);
	border-radius: var(--min20max30);
	background-color: #fff;
	outline: 7px dashed var(--farmer-ttl);
	outline-offset: -2px;
	clip-path: inset(0 round var(--min20max30));
	margin-top: var(--min35max50);
}
.farmer-sec > .title {
	max-width: 754px;
	margin-inline: auto;
	font-size: var(--min20max26);
	text-align: center;
	color: var(--farmer-ttl);
}
.block-grid.-farmer {
	gap: 17px;
	margin-top: 15px;
}
.block-grid.-farmer.-three {
	gap: var(--min25max40);
	width: min(620px, 100%);
  margin-inline: auto;
}
.grid-farm > .text {
	text-align: center;
	margin-top: var(--min10max15);
	line-height: 1.3;
	font-size: var(--min12max15);
}

.cv-area + .original-part {
	margin-top: 60px;
}

@media (max-width:480px) {

	.voice-area + .cv-area {
		padding-top: 0;
		margin-top: calc(-1*var(--min90max100));
	}

	.block-grid.-cv {
		row-gap: 9vw;
	}
	.block-grid.-cv + .note {
		text-indent: -1rem;
    padding-inline: calc(1rem + 20px) 20px;
		box-sizing: border-box;
	}
	
	.cal-area {
		padding-inline: 10px;
	}
	.cal-area > .body {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		position: relative;
	}
	.cal-area > .body::before {
		content: "→ 右にスクロールできます";
		display: block;
		color: var(--utility-clr);
		font-size: 11px;
		position: sticky;
		left: 0;
	}
	.cal-area > .body > img {
		width: 440px;
		margin-top: 5px;
	}

	.sched-area {
		padding-inline: 10px;
	}

	.block-grid.-reason {
		grid-template-columns: 1fr;
	}
	.block-grid.-reason > .grid {
		width: min(250px, 100%);
		margin-inline: auto;
	}

	.block-grid.-goro {
		gap: 55px;
	}
	.goro-area > .head + .text {
		text-align: left;
	}
	.grid-goro.-no03 {
		margin-top: 70px;
	}
	.grid-goro:is(.-no01,.-no02)::before {
		width: min(100px, 50vw);
	}
	.grid-goro.-no03::before {
		top: -85px;
		width: min(160px, 100%);
	}
	.grid-goro.-three.-no02 {
		margin-right: auto;
	}
	.grid-goro.-three.-no03 {
		margin-left: auto;
	}
	.grid-goro.-three.-no03::before {
		top: -85px;
		right: -40px;
	}
	.grid-goro .image.-arrowR::after {
		top: -40px;
    bottom: auto;
    margin: auto;
    left: 0;
    right: 0;
    transform: rotate(90deg);
	}
	.grid-goro.-no03 .image.-arrowR::after {
		top: -110px;
	}
	.grid-goro.-no01 > .text img {
		width: 83%;
	}
	.grid-goro.-no02 > .text img {
		width: 100%;
		transform: unset;
	}
	.grid-goro.-no03 > .text img {
		width: 97%;
		transform: unset;
	}

	.block-grid.-farmer {
		grid-template-columns: repeat(2, 1fr);
	}
	.grid-farm.-three:last-of-type {
		transform: translateX(calc(50% + 10px));
	}

}