@charset "UTF-8";

#content{display:flex;flex-direction:column;
	&>.inner{flex:auto;padding:var(--spacing);display:flex;flex-direction:column;}
	&:has(#coupon_center_content){position:relative;background:linear-gradient(180deg,hsl(var(--CPT-THM-H) 15% 50%/50%),transparent) no-repeat center/cover;
		&::after{content:'';display:block;position:absolute;inset:0;z-index:0;width:min(1920px,100%);max-height:var(--VHeight);margin-inline:auto;background:url('../images/art/page_bg-b92fada734.svg') no-repeat top center;-webkit-mask-image:linear-gradient(180deg,rgba(0 0 0 / 75%),rgba(0 0 0 / 0));mask-image:linear-gradient(180deg,rgba(0 0 0 / 75%),rgba(0 0 0 / 0));}
		&>.inner{padding-block:var(--spacing);position:relative;z-index:1;}
	}
}

#coupon_center_content{flex:auto;display:flex;flex-direction:column;gap:var(--spacing);
	.title{display:grid;grid-template-columns:auto 1fr;gap:var(--spacing);align-items:end;
		& h3{font-size:var(--SiteFS-XXXL);font-weight:var(--SiteFW-EB);text-transform:uppercase;}
		& p{max-width:60em;color:var(--body-text-color-a50);margin:unset;}
		.art{width:20em;height:15em;
			&>img{display:block;width:100%;height:100%;object-fit:contain;}
		}
	}
	.CouponList{flex:auto;align-content:start;background:var(--background-color-L1);padding:var(--spacing);border-radius:1em;--couponlist-column-size:22em;
		#search_empty{grid-column:1/-1;}
	}
	@media only screen and (max-width:800px){gap:1em;width:min(40em,100%);margin-inline:auto;
		.title{display:flex;flex-direction:column;align-items:center;text-align:center;
			& h3{font-size:var(--SiteFS-XXL);}
		}
		.CouponList .CouponItem{margin-inline:auto;}
	}
	@media only screen and (max-width:480px){width:auto;
		.CouponList{margin-inline:calc(var(--spacing) * -1);}
	}
}


#coupon_details_content{flex:auto;display:grid;grid:"coupon_card coupon_details" auto "coupon_related coupon_details" 1fr/clamp(30em,33%,35em) 1fr;gap:var(--spacing);
	@media only screen and (max-width:800px){grid:"coupon_card" "coupon_related" "coupon_details";gap:1em;width:min(40em,100%);margin-inline:auto;}
	@media only screen and (max-width:480px){width:auto;margin-inline:calc(var(--spacing) * -1);}
	#coupon_card{grid-area:coupon_card;display:flex;flex-direction:column;gap:1em;padding:var(--spacing);background:var(--background-color-L1);border-radius:1em;
		&>*{width:min(30em,100%);margin-inline:auto;}
		.Coupon{--coupon-spacing:1.5em;--coupon-gap:1.5em;--coupon-num-fs:var(--SiteFS-XXXL);--CPT-US:3em;}
	}
	#coupon_related{grid-area:coupon_related;align-self:start;display:flex;flex-direction:column;gap:var(--spacing);padding:var(--spacing);background:var(--background-color-L3);border-radius:1em;
		.CouponList{width:min(25em,100%);margin-inline:auto;}
	}
	#coupon_details{grid-area:coupon_details;display:flex;flex-direction:column;gap:var(--spacing);padding:var(--spacing);background:var(--background-color-L1);border-radius:1em;
		#coupon_infomation{display:flex;flex-direction:column;gap:var(--spacing);width:min(60em,100%);margin-inline:auto;
			& h1{font-size:var(--SiteFS-XXL);font-weight:var(--SiteFW-EB);}
			.intro{display:flex;flex-direction:column;gap:1em;}
		}
		#coupon_itemlist{display:flex;flex-direction:column;gap:var(--spacing);width:min(60em,100%);margin-inline:auto;padding-block-start:var(--spacing);box-shadow:var(--body-text-color-a5) 0 1px 0 inset;
			.title{display:flex;flex-wrap:wrap;align-items:center;gap:1em;
				& h3{font-size:1em;font-weight:var(--SiteFW-B);margin-inline-end:auto;}
				.cpt-search{width:min(25em,100%);}
			}
			.ItemLink.hide,
			#search_empty.hide{display:none;}
		}
		#coupon_description{display:flex;flex-direction:column;gap:var(--spacing);width:min(60em,100%);margin-inline:auto;padding-block-start:var(--spacing);box-shadow:var(--body-text-color-a5) 0 1px 0 inset;}
	}
}