@charset "utf-8";
/* 2026 スイカ頒布会LP */

:where(.lp-daichi) {
	--color-key01: #db1f1f;
	--color-key02: #007814;
	--cv-shadow: rgba(195, 133, 0, .9);
	--color-caution: #bf0000;
	--color-bg: #fffccc;
	--deli-bg: var(--color-bg);
	--charm-bg: #d9f5ff;

	--color-read: #00350c;
	--color-charm: var(--color-key01);
	--charm-bg: var(--color-bg);

	/* https://min-max-calculator.9elements.com/ */
	/* 480px-960px幅 */
	--min0max38: clamp(0rem, -2.375rem + 7.92vw, 2.375rem);
	--min2max5: clamp(0.125rem, -0.063rem + 0.63vw, 0.313rem);
	--min3max6: clamp(0.188rem, 0.63vw, 0.375rem);
	--min12max14: clamp(0.75rem, 0.625rem + 0.42vw, 0.875rem);
	--min12max16: clamp(0.75rem, 0.5rem + 0.83vw, 1rem);
	--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);
	--min17max25: clamp(1.063rem, 0.5rem + 1.88vw, 1.625rem);
	--min18max20: clamp(1.125rem, 1rem + 0.42vw, 1.25rem);
	--min18max28: clamp(1.125rem, 0.5rem + 2.08vw, 1.75rem);
	--min18max36: clamp(1.125rem, 3.75vw, 2.25rem);
	--min20max24: clamp(1.25rem, 1rem + 0.83vw, 1.5rem);
	--min20max26: clamp(1.25rem, 0.875rem + 1.25vw, 1.625rem);
	--min22max24: clamp(1.375rem, 1.25rem + 0.42vw, 1.5rem);
	--min23max27: clamp(1.438rem, 1.188rem + 0.83vw, 1.688rem);
	--min25max30: clamp(1.563rem, 1.25rem + 1.04vw, 1.875rem);
	--min45max70: clamp(2.813rem, 1.25rem + 5.21vw, 4.375rem);
	--min182max218: clamp(11.375rem, 9.125rem + 7.5vw, 13.625rem);
	--min298max325: clamp(18.625rem, 16.938rem + 5.63vw, 20.313rem);
}
.lp-daichi {
	overflow: hidden;
}

.lp-daichi .list {
	margin-top: 2%;
	line-height: 1.4;
}
.lp-daichi .cv-area ~ .list {
	margin-top: 0;
}
.lp-daichi .list > li {
	margin-top: 0;
}

.lp-daichi .caution {
	color: var(--color-caution);
}

/* リード */
.lead-area {
	padding: 2% 3% 0;
	background-repeat: no-repeat;
	background-image: url(/external/category/image/2026/watermelon/lead_bg01.png), url(/external/category/image/2026/watermelon/lead_bg02.png);
	background-position-x: 0, 100%;
	background-size: 19.3%, 23.2%;
	line-height: 1.75;
}
.block-grid.-lead {
	grid-template-columns: 29.1% auto;
	align-items: center;
	max-width: 890px;
	margin-inline: auto;
	gap: 3.2%;
}
.block-grid.-lead > .text {
	color: var(--color-read);
	font-size: var(--min18max36);
	font-weight: bold;
	letter-spacing: .05em;
	text-shadow: #fff 5px 0px 0px,
	#fff 4.90033px 0.993347px 0px,
	#fff 4.60531px 1.94709px 0px,
	#fff 4.12668px 2.82321px 0px,
	#fff 3.48353px 3.58678px 0px,
	#fff 2.70151px 4.20736px 0px,
	#fff 1.81179px 4.6602px 0px,
	#fff 0.849836px 4.92725px 0px,
	#fff -0.145998px 4.99787px 0px,
	#fff -1.13601px 4.86924px 0px,
	#fff -2.08073px 4.54649px 0px,
	#fff -2.94251px 4.04248px 0px,
	#fff -3.68697px 3.37732px 0px,
	#fff -4.28444px 2.57751px 0px,
	#fff -4.71111px 1.67494px 0px,
	#fff -4.94996px 0.7056px 0px,
	#fff -4.99147px -0.291871px 0px,
	#fff -4.83399px -1.27771px 0px,
	#fff -4.48379px -2.2126px 0px,
	#fff -3.95484px -3.05929px 0px,
	#fff -3.26822px -3.78401px 0px,
	#fff -2.4513px -4.35788px 0px,
	#fff -1.53666px -4.75801px 0px,
	#fff -0.560763px -4.96845px 0px,
	#fff 0.437495px -4.98082px 0px,
	#fff 1.41831px -4.79462px 0px,
	#fff 2.34258px -4.41727px 0px,
	#fff 3.17346px -3.86382px 0px,
	#fff 3.87783px -3.15633px 0px,
	#fff 4.4276px -2.32301px 0px,
	#fff 4.80085px -1.39708px 0px,
	#fff 4.98271px -0.415447px 0px;
}

/* CV */
.lp-daichi .cv-area {
	box-sizing: border-box;
	margin: auto;
	padding: 3% 2% 0;
	width: 100%;
	transition: all 0.7s;
}
.lp-daichi .cv-area a:hover {
	transition: all 0.7s;
	opacity: 0.7;
}

/* CVボタン */
.js-item-sales {
	margin: var(--min15max20) auto 0;
}
.cv-area .js-item-sales {
	width: min(410px, 70%);
}
.body-section.-charm .js-item-sales {
	width: min(530px, 92%);
}
.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;
}
.body-section.-charm .js-item-sales .item-summary .info .cart .add-to-cart.registration fieldset .button:not(:disabled) > span {
	grid-template-columns: auto 0 1fr;
	column-gap: 4px;
	font-size: 0;
}
.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;
}
.body-section.-charm .js-item-sales .item-summary .info .cart .add-to-cart.registration fieldset .button:not(:disabled) > span::after {
	content: "完熟小玉スイカの申し込みをする";
	font-size: var(--min17max25);
	letter-spacing: .06em;
	line-height: 1.43;
}
.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;
}

/* ここが魅力 */
.lp-daichi .block-section.block-section--charm {
	margin-top: 5%;
}
.lp-daichi .block-section.block-section--charm .head {
	text-align: center;
	padding: 0 5%;
}
.lp-daichi .block-section.block-section--charm .head img {
	width: auto;
	max-width: 100%;
}
.lp-daichi .block-section.block-section--charm .body-section {
	background: var(--charm-bg);
	padding: 8% 5% 5%;
	margin-top: calc(-1 * var(--min18max36));
}
.lp-daichi .block-section.block-section--charm .body-section .block-grid.-col3.-charm {
	column-gap: 2.5%;
	row-gap: var(--min15max20);
}
.lp-daichi .block-section.block-section--charm .text {
	font-weight: bold;
	font-size: var(--min18max20);
	line-height: 1.3;
	text-align: center;
	margin-top: 7%;
}
.lp-daichi .block-section.block-section--charm .centering {
	display: inline-block;
	transform: translateX(-15%);
}
.lp-daichi .block-section.block-section--charm .color {
	color: var(--color-charm);
	font-size: var(--min22max24);
}

/* お届けスケジュール */
.lp-daichi .block-section.block-section--deli {
	margin: 5% 0 0;
	background-color: var(--deli-bg);
	padding: 2%;
}
.block-section.block-section--deli > .image {
	max-width: 736px;
	margin-inline: auto;
}
.block-section.block-section--deli .catch {
	margin: 0 0 1%;
	font-family: var(--font-minchou);
	font-size: var(--min18max28);
}
.block-section.block-section--deli .card {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 4;
	gap: 0;
	background-color: #ffffff;
}
.block-section.block-section--deli .block-grid.-col2.-deli {
	margin-top: 3%;
	column-gap: 3%;
	row-gap: var(--min15max20);
}
.block-section.block-section--deli .card .small {
	font-size: 70%;
}
.block-section.block-section--deli .card .name {
	/* display: grid;
	align-items: center; */
	padding: 4.5% 4.5% 4%;
	background-color: var(--color-key01);
	color: #ffffff;
	font-size: var(--min20max26);
	font-weight: bold;
	line-height: 1.25;
}
.block-section.block-section--deli .card .specwrap {
	padding: 4% 4.5%;
}
.block-section.block-section--deli .card .specwrap .date {
	color: var(--color-key02);
	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 p + p,
.block-section.block-section--deli .card .detailwrap div + p,
.block-section.block-section--deli .card .detailwrap p + div {
	margin-top: 2.5%;
}
.block-section.block-section--deli .card .detailwrap .catch {
	font-size: var(--min14max18);
	font-weight: bold;
}
.block-section.block-section--deli .card .detailwrap .wrap-grid {
	display: grid;
	gap: 4%;
	grid-template-columns: 34% 62%;
}
.block-section.block-section--deli .example {
	grid-row: auto / span 4;
}
.block-section.block-section--deli .example .text {
	margin: 10px 0 0;
	font-size: var(--min12max14);
}

@media (max-width: 480px) {

	/* リード */
	.lead-area {
		background-size: 26%, 30%;
    background-position: bottom left, top right;
		padding: 18.5% 4% 11%;
		text-align: center;
	}
	.block-grid.-lead {
		display: block;
		position: relative;
	}
	.block-grid.-lead > .image {
		position: absolute;
		top: -65%;
		left: -8%;
		width: 37.5%;
	}
	.block-grid.-lead > .text {
		position: relative;
    z-index: 1;
	}

	/* cv */
	.lp-daichi .cv-area {
		padding: 4% 4% 0;
	}

	/* cvボタン */
	.body-section.-charm .js-item-sales .item-summary .info .cart .add-to-cart.registration fieldset .button:not(:disabled) > span::after {
		line-height: 1.9;
	}

	/* ここが魅力 */
	.lp-daichi .block-section.block-section--charm .body-section {
		padding: 8% 0 5%;
	}
	.lp-daichi .block-section.block-section--charm .body-section .block-grid.-col3.-charm {
		padding-inline: 20%;
	}
	.lp-daichi .block-section.block-section--charm .text {
		margin-top: 10px;
	}
	.lp-daichi .list {
    margin-top: 4%;
	}

	/* お届けスケジュール */
	.lp-daichi .block-section.block-section--deli {
		padding: 3% 4%;
	}

}