@charset "utf-8";
/* 2025 136号〜 全国秋のさつまいも祭りLP */
.lp-daichi {

	/* common */
	--key-color01: #492d00;
	--key-color02: #482c24;
	--key-color03: #9c0c3f;
	--color-cv: #e2c629;
	--cv-shadow: #8b7705;

	/* https://min-max-calculator.9elements.com/ */
	/* 480px-960px幅 */

  --min0max15: clamp(0rem, -0.938rem + 3.13vw, 0.938rem);
  --min2max5: clamp(0.125rem, -0.063rem + 0.63vw, 0.313rem);
  --min8max10: clamp(0.5rem, 0.375rem + 0.42vw, 0.625rem);
  --min9max16: clamp(0.563rem, 0.125rem + 1.46vw, 1rem);
  --min10max16: clamp(0.625rem, 0.25rem + 1.25vw, 1rem);
  --min10max20: clamp(0.625rem, 2.08vw, 1.25rem);
  --min13max20: clamp(0.813rem, 0.375rem + 1.46vw, 1.25rem);
  --min13max30: clamp(0.813rem, -0.25rem + 3.54vw, 1.875rem);
  --min14max16: clamp(0.875rem, 0.75rem + 0.42vw, 1rem);
	--min14max17: clamp(0.875rem, 0.688rem + 0.63vw, 1.063rem);
  --min14max18: clamp(0.875rem, 0.625rem + 0.83vw, 1.125rem);
  --min14max28: clamp(0.875rem, 2.92vw, 1.75rem);
  --min15max20: clamp(0.938rem, 0.625rem + 1.04vw, 1.25rem);
  --min15max22: clamp(0.938rem, 0.5rem + 1.46vw, 1.375rem);
  --min15max30: clamp(0.938rem, 3.13vw, 1.875rem);
  --min16max34: clamp(1rem, -0.125rem + 3.75vw, 2.125rem);
  --min20max28: clamp(1.25rem, 0.75rem + 1.67vw, 1.75rem);
  --min20max30: clamp(1.25rem, 0.625rem + 2.08vw, 1.875rem);
  --min20max40: clamp(1.25rem, 4.17vw, 2.5rem);
  --min22max35: clamp(1.375rem, 1.08rem + 1.48vw, 2.188rem);
  --min23max27: clamp(1.438rem, 1.188rem + 0.83vw, 1.688rem);
  --min25max30: clamp(1.563rem, 1.25rem + 1.04vw, 1.875rem);
  --min25max45: clamp(1.563rem, 1.108rem + 2.27vw, 2.813rem);
  --min30max40: clamp(1.875rem, 1.25rem + 2.08vw, 2.5rem);
  --min30max70: clamp(1.875rem, -0.625rem + 8.33vw, 4.375rem);
  --min35max50: clamp(1.875rem, 0.625rem + 4.17vw, 3.125rem);
  --min178max355: clamp(11.125rem, 7.102rem + 20.11vw, 22.188rem);
  --min196max393: clamp(12.25rem, -0.063rem + 41.04vw, 24.563rem);
  --min210max421: clamp(13.125rem, 8.33rem + 23.98vw, 26.313rem);
  --min214max428: clamp(13.375rem, 8.511rem + 24.32vw, 26.75rem);

}

:where([class]).-bgSweetpotato {
  background: url(/external/category/image/2025/sweet-potato/bg_sweetpotato.jpg);
	background-size: contain;
}
:where([class]).-minchou {
	font-family: var(--font-minchou);
}

.contents-wrap {
	padding-bottom: var(--min30max40);
}
.contents-wrap [class$="-area"] {
  padding-inline: var(--min13max20);
}
.area-head {
	display: block;
	margin-inline: auto;
}
.area-head.-charm {
	width: var(--min178max355);
}
.area-head.-chart {
	width: var(--min210max421);
}
.area-head.-schedule {
	width: var(--min214max428);
}

/* charm */
.charm-wrapper {
	max-width: 850px;
	margin-inline: auto;
}
.block-grid.-charm {
	grid-template-columns: 56% auto;
	margin-top: var(--min25max30);
	column-gap: 4%;
}
.text-wrapper.-charm > .title {
	margin-top: 2%;
	padding-bottom: 3%;
	border-bottom: solid var(--key-color01) 1px;
	color: var(--key-color01);
	font-size: var(--min20max30);
	line-height: 1.25;
	font-weight: bold;
}
.text-wrapper.-charm > .text {
	margin-top: 7%;
	font-size: var(--min15max22);
	line-height: 1.5;
}

/* chart */
.chart-area {
	margin-top: var(--min35max50);
}
.chart-area > .image {
	display: block;
	margin-top: var(--min20max30);
}

/* schedule */
.schedule-area {
	margin-top: var(--min35max50);
}
.block-grid.-schedule {
	margin-top: var(--min20max30);
	column-gap: 3%;
	row-gap: var(--min15max20);
}
.schedule-card {
	background-color: #ffffff;
	border: solid 1px #bcbcbc;
}
.schedule-title {
	padding: 4% 4% 3.5%;
	background-color: var(--key-color03);
	color: #ffffff;
	font-size: var(--min20max28);
	font-weight: bold;
	line-height: 1;
}
.schedule-title > .number {
	display: inline-block;
	margin-right: var(--min8max10);
	padding: 2.1% 3.4% 1%;
	background: #fff;
	border-radius: var(--min2max5);
	font-size: var(--min15max20);
	letter-spacing: .08em;
	line-height: 1;
	vertical-align: bottom;
	color: var(--key-color03);
}
.spec-wrap {
  padding: 4% 1% 4% 2%;
}
.spec-wrap > .date {
	color: var(--key-color02);
	font-size: var(--min14max17);
	font-weight: bold;
}
.spec-wrap > .amount {
	font-size: var(--min14max16);
}
.spec-wrap > .price {
	font-size: var(--min14max16);
	font-weight: bold;
}
.detail-wrap {
	padding: 4% 4.5%;
	font-size: 0.875rem;
	line-height: 1.5;
}
.detail-wrap > .text {
	line-height: 1.9;
}
.detail-wrap > .text.-second {
  margin-top: 2%;
}
.farmer-name {
	display: inline-block;
	margin-right: var(--min8max10);
	border-radius: var(--min2max5);    
	padding: 1% 3% .5%;
	background: var(--key-color02);
	color: #fff;
	line-height: 1.5;
}

/* recipe */
.recipe-area {
	margin-top: var(--min35max50);
	padding: 3% 2.5%;
	background: var(--key-color01);
}
.accordion-group.-recipe {
	margin: 0 auto;
	/* padding-bottom: var(--min25max45); */
	background: #fff;
}
.accordion-group.-recipe > .accordion {
	padding: 0 var(--min15max30);
}
.block-grid.-recipe,
.block-grid.-accordion {
	width: min(745px, 100%);
	margin-inline: auto;
}
.block-grid.-recipe {
	grid-template-columns: 47% auto;
	padding: 3% 0 var(--min25max45);
	align-items: center;
}
.area-head.-recipe {
	width: 95%;
	padding: 0 0 0 var(--min16max34);
	box-sizing: border-box;
}

.block-grid.-accordion {
	grid-template-columns: 13.5% auto;
	padding: 0;
	font-size: var(--min15max22);
}
.block-grid.-accordion.-first {
	margin-top: var(--min0max15);
}
.block-grid.-accordion:not(.block-grid.-accordion.-first) {
	margin-top: var(--min10max20);
}
.block-grid.-accordion::before {
	content: "";
	display: block;
	aspect-ratio: 124/53;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left;
}
.block-grid.-first::before {
	background-image: url(/external/category/image/2025/sweet-potato/recipe_icon1.png);
}
.block-grid.-second::before {
	background-image: url(/external/category/image/2025/sweet-potato/recipe_icon2.png);
}
.block-grid.-third::before {
	background-image: url(/external/category/image/2025/sweet-potato/recipe_icon3.png);
}
.block-grid.-fourth::before {
	background-image: url(/external/category/image/2025/sweet-potato/recipe_icon4.png);
}
.recipe-text > .note {
	display: block;
	font-size: var(--min10max16);
}
.accordion-body > .image.-text {
	display: block;
	width: 73.8%;
	margin: var(--min20max40) auto 0;
}
.accordion-body > .image.-gallery {
	display: block;
	margin: var(--min13max30) auto var(--min20max40);
}

.pseudo-opened .title {
	display: none;
}
#content .accordion-group.-recipe .accordion {
	margin: 0;
}
#content .accordion-group.-recipe .accordion .accordion-toggle::before {
	content: none;
}
#content .accordion-group.-recipe .accordion-toggle.-recipe {
	position: relative;
	display: block;
	background: #b37851;
	width: var(--min196max393);
	margin: 0 auto 0;
	border-radius: 10px;
	padding: var(--min13max20) var(--min30max70) var(--min9max16);
	box-sizing: border-box;
	font-size: var(--min14max28);
	font-weight: bold;
	letter-spacing: .09rem;
	color: #fff;
}
#content .toggle-label.-recipe::before {
	content: "詳しく見る";
}
#content .accordion.pseudo-opened .toggle-label.-recipe::before {
	content: "閉じる";
}
#content .accordion-group.-recipe .accordion .title .accordion-toggle.-recipe::after {
	content: "";
	display: inline-block;
	mask: url(/external/category/image/yoyaku_common/icon_arrow.svg) no-repeat;
	-webkit-mask: url(/external/category/image/yoyaku_common/icon_arrow.svg) no-repeat;
	mask-size: contain;
	-webkit-mask-size: contain;
	width: var(--min18max26);
	height: fit-content;
	aspect-ratio: 26/21;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 10%;
	margin: auto;
	transform: scale(1, -1);
	background-color: #fff;
}
#content .accordion-group.-recipe .accordion.pseudo-opened .title .accordion-toggle.-recipe::after {
	transform: scale(-1, 1);
}

/* cv */
.cv-area {
	margin-top: var(--min30max40);
}
.dialog-opener,
.cv-area > .btnwrap {
	background: #fff;
}
.dialog-opener {
	opacity: 1!important;
}
.cv-area > .btnwrap {
	padding: var(--min13max20) var(--min13max20) var(--min22max35);
}
.special-note {
	display: none;
}
.js-item-sales .item-summary .info .cart .add-to-cart.registration fieldset .button {
	width: 100%;
	max-width: 529px;
	filter: none;
	background-color: var(--color-cv-bg);
	box-shadow: 0 6px 0 var(--cv-shadow);
	border-radius: 15px;
	padding-block: 16px 10px;
	transition: all .7s;
	margin: 0 auto;
	text-align: center;
	letter-spacing: 0.15rem;
}
.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;
	color: #242424;
	align-items: center;
}
.js-item-sales .item-summary .info .cart .add-to-cart.registration fieldset .button > span::before {
	content: "";
	display: block;
	width: 30px;
	aspect-ratio: 17 / 15;
	background: url(/assets/img/icon_reserve-renewal.png) no-repeat;
	background-size: contain;
}
.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);
}

@media (max-width: 480px) {
	/* charm */
	.block-grid.-charm {
		grid-template-columns: 1fr;
    row-gap: 0;
	}
	.text-wrapper.-charm > .title {
		margin-top: 3%;
		padding-bottom: 2.5%;
	}
	.text-wrapper.-charm > .text {
		margin-top: 3%;
	}

	/* recipe */
	.accordion-group.-recipe {
		padding-inline: 0;
	}
	.block-grid.-recipe {
		grid-template-columns: 45% auto;
		padding-top: 0;
	}
	.area-head.-recipe {
    width: 87%;
    padding-left: 0;
	}
	.block-grid.-accordion {
		grid-template-columns: 18% auto;
	}
	
}