@charset "utf-8";
/* 2026 マンゴー頒布会LP */

:where(.lp-daichi) {
	--color-key01: #ff7e00;
	--color-key02: #ff5400;
	--color-brown: #5a3d29;
	--color-cv: #242424;
	--cv-btn-shadow: rgba(195, 133, 0, .9);
	--cv-mango-bg: #f8f7eb;

	/* https://min-max-calculator.9elements.com/ */
	/* 480px-960px幅 */
	--min2max5: clamp(0.125rem, -0.063rem + 0.63vw, 0.313rem);
	--min8max15: clamp(0.5rem, 0.064rem + 1.46vw, 0.938rem);
	--min12max14: clamp(0.75rem, 0.625rem + 0.42vw, 0.875rem);
	--min12max16: clamp(0.75rem, 0.5rem + 0.83vw, 1rem);
	--min15max20: clamp(0.938rem, 0.625rem + 1.04vw, 1.25rem);
	--min18max20: clamp(1.125rem, 1rem + 0.42vw, 1.25rem);
	--min20max24: clamp(1.25rem, 1rem + 0.83vw, 1.5rem);
	--min16max21: clamp(1rem, 0.688rem + 1.04vw, 1.313rem);
	--min22max24: clamp(1.375rem, 1.25rem + 0.42vw, 1.5rem);
	--min18max28: clamp(1.125rem, 0.5rem + 2.08vw, 1.75rem);
	--min18max36: clamp(1.125rem, 3.75vw, 2.25rem);
	--min45max70: clamp(2.813rem, 1.25rem + 5.21vw, 4.375rem);

	--min13max18: clamp(0.813rem, 0.699rem + 0.57vw, 1.125rem);
	--min16max20: clamp(1rem, 0.75rem + 0.83vw, 1.25rem);
	--min16max27: clamp(1rem, 0.313rem + 2.29vw, 1.688rem);
	--min18max26: clamp(1.125rem, 0.625rem + 1.67vw, 1.625rem);
	--min15max30: clamp(0.938rem, 3.13vw, 1.875rem);
	--min28max40: clamp(1.75rem, 1rem + 2.5vw, 2.5rem);
	--min28max46: clamp(1.75rem, 0.625rem + 3.75vw, 2.875rem);
	--min28max52: clamp(1.75rem, 0.25rem + 5vw, 3.25rem);
	--min15max25: clamp(0.938rem, 0.313rem + 2.08vw, 1.563rem);

}
.lp-daichi.-mango {
	/* overflow: hidden; */
	background: var(--cv-mango-bg);
}

.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;
}

/* CV */
.lp-daichi .cv-area {
	box-sizing: border-box;
	margin: auto;
	margin-top: var(--min10max20);
	padding-bottom: 2%;
	width: calc(100% - 2 * var(--min10max20));
	background: #fff;
	transition: all 0.7s;
}

.lp-daichi .cv-area a:hover {
	transition: all 0.7s;
	opacity: 0.7;
}

.cv-area > .btnwrap {
	margin-top: var(--min15max20);
}
.cv-area .js-item-sales {
	margin: 0 auto;
	width: min(var(--min270max410), 100%);
	width: min(410px, 70%);
}
.js-item-sales .item-summary .info .cart::after {
	content: "お休み、途中解約もOK";
	display: block;
	font-size: var(--min14max17);
	color: initial;
	font-weight: bold;
	margin-top: 10px;
}
.js-item-sales .item-summary .info .cart .add-to-cart fieldset .button {
	height: var(--min45max70);
	filter: none;
	box-shadow: 0 5px 0 var(--cv-btn-shadow);
	border-radius: var(--min8max15);
	transition: all .7s;
}
.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 fieldset .button > span {
	background-size: 25px;
	padding-left: 32px;
	margin: 0;
	padding-top: var(--min3max5);
}

/* 限定数非表示 */
.lp-daichi .cv-area .js-item-sales.session .item-summary .info .special-note {
	display: none;
}

/* 理由 */
.lp-daichi .block-section.block-section--reason {
	margin-top: 6%;
}
.lp-daichi .block-section.block-section--reason .head {
	color: #fff;
	font-size: var(--min28max46);
	letter-spacing: 0.05em;
	text-align: center;
	background: url(/external/category/image/2025/mango/reason_head_bg.png) no-repeat 0 100%;
	background-size: cover;
	font-weight: bold;
	line-height: 1.2;
	padding: 2.5% 1.5% 1.5%;
	text-shadow: 0px 5px 2px rgba(250, 132, 57, 0.8);
}
.lp-daichi .block-section.block-section--reason .unit {
	margin-top: 2%;
}
.lp-daichi .block-section.block-section--reason .title img {
	max-width: 100%;
}
.block-float.-reason {
	gap: var(--min15max30);
	margin-top: 3%;
	display: inline-block;
}
.lp-daichi .block-section.block-section--reason .unit .image {
	float: right;
	width: 50%;
	margin-left: var(--min15max30);
}
.lp-daichi .block-section.block-section--reason .unit .text {
	padding-left: 2%;
	font-size: var(--min16max27);
	letter-spacing: 0.085rem;
	line-height: 1.65;
	color: var(--color-brown);
}

/* お届けスケジュール */
.lp-daichi .block-section.block-section--date {
	background: linear-gradient(to bottom, #ffcc5e, #ff9537);
	padding: 10px var(--min10max20) var(--min20max30);
	margin-top: 7%;
}
.lp-daichi .block-section.block-section--date .head {
	color: var(--color-key02);
	font-size: var(--min28max52);
	letter-spacing: 0.05em;
	text-align: center;
	margin: -33px auto 0;
	max-width: 817px;
}
.lp-daichi .block-section.block-section--date .body {
	margin-top: var(--min15max25);
}
.block-section--date > .image {
	display: block;
	line-height: 0;
	margin-bottom: 1%;
}
.block-grid.-date {
	background-color: #fff;
}
.block-grid.-date+.-date {
	margin-top: 10px;
}
.block-grid.-date .title {
	margin-top: 2%;
}
.block-grid.-date .title.-first {
	width: min(157px, 38.39%);
}
.block-grid.-date .title.-second {
	width: min(409px, 100%);
}
.block-grid.-date .title.-third {
	width: min(116px, 28.36%);
}
.block-grid.-date .text {
	padding: 2% 3%;
	display: flex;
	align-items: center;
	color: var(--color-brown);
}
.block-grid.-date .schedule {
	font-weight: bold;
	font-size: var(--min13max18);
	line-height: 1;
}
.block-grid.-date .schedule span {
	font-size: var(--min18max28);
	display: inline-block;
	margin-right: 1%;
}
.block-grid.-date .qty {
	margin-top: 2%;
	font-weight: bold;
	font-size: var(--min13max18);
}
.block-grid.-date .caption {
	border-top: 1px solid #ff7e00;
	margin-top: 2%;
	padding-top: 3%;
	font-size: var(--min16max20);
	line-height: 1.5;
}
.block-grid.-date .billing {
	margin-top: 2%;
	font-size: var(--min13max18);
}

/* ヤマト便 メモ */
.note-text {
	padding-inline: var(--min10max20);
	margin-top: var(--min15max30);
	font-size: var(--min16max21);
	color: var(--color-brown);
	text-align: left;
	line-height: 1.75;
}
.note-text li {
	text-indent: -1em;
	padding-left: 1em;
}

/* bottom分部調整 */
.input-table.-mango {
	margin-top: 1%;
}

@media (max-width: 767px) {
	/* 理由 */
	.lp-daichi .block-section.block-section--reason {
		margin-top: 8%;
	}

	/* お届けスケジュール */
	.lp-daichi .block-section.block-section--date {
		margin-top: 9%;
	}
	.lp-daichi .block-section.block-section--date .head {
		margin-top: -4.5vw;
	}	

}

@media (max-width: 480px) {

	.lp-daichi .cv-area .js-item-sales.session {
		margin-top: 1.5%;
	}

	/* 理由 */
	.lp-daichi .block-section.block-section--reason .head {
		background-position-x: 20%;
	}
	.block-float.-reason {
		flex-direction: column-reverse;
		display: flex;
	}
	.block-float.-reason.-first {
		gap: 0;
	}
	.lp-daichi .block-section.block-section--reason .unit .image {
		width: 100%;
		margin: 0 auto;
		max-width: 320px;
	}
	.lp-daichi .block-section.block-section--reason .unit .text {
		padding: 0 3%;
	}

	/* お届けスケジュール */
	.block-grid.-date .text {
		padding: 3%;
	}

}