/* SWELL Ad Tag Extension v1.2.0 */

.sate-ad{
	box-sizing:border-box;
	margin:1.8em 0;
}

.sate-ad-media{
	margin-bottom:18px;
	text-align:center;
}

.sate-ad-media img{
	display:block;
	max-width:100%;
	height:auto;
	margin:0 auto;
}

.sate-button{
	display:flex;
	flex-direction:column;
}

.sate-button__content{
	display:flex;
	flex-direction:column;
	gap:.55em;
}

.sate-align-left .sate-button__content{align-items:flex-start}
.sate-align-center .sate-button__content{align-items:center}
.sate-align-right .sate-button__content{align-items:flex-end}

.sate-button__micro{
	font-size:.82em;
	line-height:1.55;
	text-align:center;
	opacity:.72;
}

.sate-button .swell-block-button{
	margin:0!important;
}

.sate-width-compact .swell-block-button{width:min(100%,190px)}
.sate-width-standard .swell-block-button{
	width:100%;
}
.sate-align-left.sate-width-standard .swell-block-button{text-align:left}
.sate-align-center.sate-width-standard .swell-block-button{text-align:center}
.sate-align-right.sate-width-standard .swell-block-button{text-align:right}
.sate-width-wide .swell-block-button{width:min(100%,420px)}
.sate-width-full .swell-block-button{width:100%}

/* 標準サイズはSWELL本来の寸法ルールへ追従 */
.sate-button.sate-width-standard .swell-block-button__link{
	display:inline-flex;
	min-width:var(--the-min-width,64%);
	min-height:0;
	padding:var(--the-padding,.75em 1.5em);
	line-height:1.5;
}

.sate-button .swell-block-button__link,
.sate-benefit .swell-block-button__link{
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:48px;
	padding:.8em 1.4em;
	color:#fff!important;
	text-align:center;
	text-decoration:none!important;
}

.sate-color-theme .swell-block-button__link{
	background:var(--color_main,#1176d4)!important;
}

.sate-color-custom .swell-block-button__link{
	background:var(--sate-color-1,#111)!important;
}

.sate-color-gradient .swell-block-button__link{
	background:linear-gradient(135deg,var(--sate-color-1,#111),var(--sate-color-2,#555))!important;
}

.sate-benefit{
	max-width:680px;
	padding:22px;
	border:1px solid rgba(0,0,0,.1);
	border-radius:12px;
	background:var(--color_content_bg,#fff);
}

.sate-benefit[hidden]{
	display:none!important;
}

.sate-benefit__content{
	display:flex;
	flex-direction:column;
	gap:10px;
}

.sate-benefit__title{
	font-size:1.08em;
	font-weight:750;
	line-height:1.45;
}

.sate-benefit__desc{
	font-size:.92em;
	line-height:1.75;
	opacity:.82;
}

.sate-benefit__deadline{
	display:flex;
	align-items:center;
	gap:8px;
	font-size:.82em;
}

.sate-benefit__deadline span{
	padding:3px 7px;
	border-radius:999px;
	background:rgba(0,0,0,.06);
	font-size:.82em;
	font-weight:700;
}

.sate-coupon{
	padding:12px;
	border:1px dashed rgba(0,0,0,.2);
	border-radius:9px;
	background:rgba(0,0,0,.025);
}

.sate-coupon__label{
	margin-bottom:7px;
	font-size:.76em;
	font-weight:700;
	opacity:.65;
}

.sate-coupon__body{
	display:flex;
	align-items:center;
	gap:10px;
}

.sate-coupon code{
	flex:1;
	padding:7px 10px;
	border-radius:6px;
	background:rgba(0,0,0,.06);
	font-size:.95em;
	font-weight:700;
	letter-spacing:.04em;
}

.sate-coupon button{
	flex:0 0 auto;
	padding:7px 12px;
	border:1px solid rgba(0,0,0,.16);
	border-radius:6px;
	background:#fff;
	cursor:pointer;
	font-size:.8em;
	font-weight:700;
}

.sate-coupon__feedback{
	min-height:1.3em;
	margin-top:5px;
	font-size:.72em;
	opacity:.62;
}

.sate-benefit__action .swell-block-button,
.sate-benefit__fallback .swell-block-button{
	width:min(100%,320px);
	margin:0!important;
}

.sate-benefit__action .swell-block-button__link,
.sate-benefit__fallback .swell-block-button__link{
	background:var(--color_main,#1176d4)!important;
}

.sate-benefit__status{
	font-weight:700;
	line-height:1.65;
}

@media(max-width:600px){
	.sate-benefit{padding:18px 16px}
	.sate-coupon__body{align-items:stretch;flex-direction:column}
	.sate-coupon button{width:100%}
}


/* v1.2.1: 特典型をクーポンカード風に調整 */
.sate-benefit{
	max-width:820px;
	padding:22px;
	border:1px solid #ead7b7;
	border-radius:14px;
	background:#fffaf1;
}

.sate-benefit > [data-sate-state="active"]{
	display:grid;
	grid-template-columns:minmax(0,200px) minmax(0,1fr);
	gap:22px;
	align-items:start;
}

.sate-benefit > [data-sate-state="active"] > .sate-ad-media{
	margin:0;
}

.sate-benefit > [data-sate-state="active"] > .sate-benefit__content{
	min-width:0;
}

.sate-benefit__title{
	font-size:1.12em;
	font-weight:750;
}

.sate-coupon{
	border-color:#e8a949;
	background:#fff8ec;
}

.sate-coupon code{
	background:#fff;
	border:1px solid #ead7b7;
}

.sate-benefit__action .swell-block-button{
	width:100%;
	max-width:none;
}

@media(max-width:640px){
	.sate-benefit > [data-sate-state="active"]{
		grid-template-columns:1fr;
	}
}


/* =========================================================
   v1.2.2: 特典型の可変デザイン
========================================================= */

.sate-benefit{
	border-color:var(--sate-benefit-border,#ead7b7)!important;
}

.sate-benefit.is-no-media > [data-sate-state="active"]{
	grid-template-columns:1fr!important;
	max-width:640px;
	margin:0 auto;
}

.sate-benefit__period{
	display:flex;
	align-items:center;
	gap:9px;
	padding:8px 10px;
	border-radius:7px;
	background:rgba(0,0,0,.035);
	font-size:.8em;
}

.sate-benefit__period span{
	font-weight:700;
	opacity:.65;
}

.sate-benefit__period strong{
	font-weight:600;
}

.sate-benefit-btn-custom .swell-block-button__link{
	background:var(--sate-benefit-btn,#1176d4)!important;
}

.sate-benefit-btn-gradient .swell-block-button__link{
	background:var(--sate-benefit-btn,linear-gradient(135deg,#1176d4,#2f67c7))!important;
}


/* v1.2.3 */
.sate-benefit{
	background:var(--sate-benefit-bg,#fffaf1)!important;
}


/* =========================================================
   v1.2.4: 特典型自動配色
========================================================= */

.sate-benefit .sate-coupon{
	background:var(--sate-benefit-coupon,#fff0f0)!important;
	border-color:color-mix(in srgb, var(--sate-benefit-border,#ead7b7) 72%, #000 28%)!important;
}

.sate-benefit .sate-benefit__action .swell-block-button__link,
.sate-benefit .sate-benefit__fallback .swell-block-button__link{
	background:var(--sate-benefit-btn,var(--color_main,#1176d4))!important;
	color:#fff!important;
}


/* =========================================================
   v1.2.5
========================================================= */

/* ボタン型：SWELL設定を標準とし、選択時だけ角丸を上書き */
.sate-button.sate-radius-custom .swell-block-button__link{
	border-radius:var(--sate-button-radius,0px)!important;
}

/* 特典型：クーポンの有無に関係なくCTAを下端へ固定 */
.sate-benefit > [data-sate-state="active"]{
	align-items:stretch;
}

.sate-benefit__content{
	min-height:210px;
}

.sate-benefit__action{
	margin-top:auto!important;
}

/* 画像なしでもカードとして高さと余白を保つ */
.sate-benefit.is-no-media .sate-benefit__content{
	min-height:195px;
}

/* 自動配色のボタン色をSWELL側より確実に優先 */
.sate-benefit .sate-benefit__action .swell-block-button__link,
.sate-benefit .sate-benefit__fallback .swell-block-button__link{
	background:var(--sate-benefit-btn,var(--color_main,#1176d4))!important;
	background-color:var(--sate-benefit-btn,var(--color_main,#1176d4))!important;
}


/* =========================================================
   v1.2.7
========================================================= */
.sate-benefit{
	border-radius:var(--sate-benefit-radius,12px)!important;
}
.sate-benefit__media{
	overflow:hidden;
	border-radius:calc(var(--sate-benefit-radius,12px) * .72);
}
.sate-benefit__image{
	display:block;
	width:100%;
	height:auto;
	border-radius:inherit;
	object-fit:cover;
}
.sate-button__adtag{
	width:100%;
	text-align:center;
}


/* =========================================================
   v1.2.8
========================================================= */

/* ボタン型：広告タグ由来の計測ピクセル等 */
.sate-button__tracking{
	position:absolute!important;
	width:1px!important;
	height:1px!important;
	overflow:hidden!important;
	clip:rect(0 0 0 0)!important;
	clip-path:inset(50%)!important;
	white-space:nowrap!important;
}

/* 特典型の画像は正方形で、透過PNG/SVG等の背景をそのまま活かす */
.sate-benefit__media,
.sate-benefit > [data-sate-state="active"] > .sate-ad-media{
	aspect-ratio:1 / 1;
	width:100%;
	min-width:0;
	min-height:0;
	display:flex;
	align-items:center;
	justify-content:center;
	background:transparent!important;
	overflow:hidden;
}

.sate-benefit__image,
.sate-benefit__media img,
.sate-benefit > [data-sate-state="active"] > .sate-ad-media img{
	width:100%!important;
	height:100%!important;
	max-width:100%;
	object-fit:contain!important;
	background:transparent!important;
	border-radius:0!important;
}

/* PCは画像を180px前後、本文を広く */
.sate-benefit.has-media > [data-sate-state="active"]{
	grid-template-columns:minmax(140px,180px) minmax(0,1fr)!important;
}

/* タブレット/スマホは縦積み。画像は大きくなりすぎない */
@media(max-width:720px){
	.sate-benefit.has-media > [data-sate-state="active"]{
		grid-template-columns:1fr!important;
	}
	.sate-benefit__media,
	.sate-benefit > [data-sate-state="active"] > .sate-ad-media{
		width:min(52vw,180px);
		margin:0 auto 4px!important;
	}
}

@media(max-width:420px){
	.sate-benefit{
		padding:16px!important;
	}
	.sate-benefit__media,
	.sate-benefit > [data-sate-state="active"] > .sate-ad-media{
		width:min(58vw,160px);
	}
}


/* =========================================================
   v1.2.9
========================================================= */

/* メディアライブラリ画像はSWELL広告画像の余計な装飾を継承しない */
.sate-benefit__media{
	width:100%;
	aspect-ratio:1 / 1;
	padding:0!important;
	margin:0!important;
	border:0!important;
	box-shadow:none!important;
	background:transparent!important;
	align-self:start;
}

.sate-benefit__media::before,
.sate-benefit__media::after{
	content:none!important;
	display:none!important;
}

.sate-benefit__image{
	width:auto!important;
	height:auto!important;
	max-width:88%!important;
	max-height:88%!important;
	margin:auto!important;
	object-fit:contain!important;
	background:transparent!important;
	border:0!important;
	box-shadow:none!important;
}

/* PCは安定した正方形メディア列 */
.sate-benefit.has-media > [data-sate-state="active"]{
	grid-template-columns:160px minmax(0,1fr)!important;
	gap:20px!important;
}

/* モバイルはカード上部に小さめ正方形 */
@media(max-width:720px){
	.sate-benefit.has-media > [data-sate-state="active"]{
		grid-template-columns:1fr!important;
	}
	.sate-benefit__media{
		width:150px!important;
		margin:0 auto 8px!important;
	}
}

@media(max-width:420px){
	.sate-benefit__media{
		width:132px!important;
	}
}


/* =========================================================
   v1.3.0
========================================================= */

/* 選択画像がある特典型ではSWELL由来の広告ダミー表示を出さない */
.sate-benefit__media .p-adBox__dammyImage,
.sate-benefit__media .p-adBox__dummyImage{
	display:none!important;
}

/* ボタン型は常に中央配置 */
.sate-button .swell-block-button,
.sate-button .swell-block-button__wrapper{
	margin-left:auto!important;
	margin-right:auto!important;
}


/* =========================================================
   v1.3.2
========================================================= */

.sate-ad,
.sate-ad input,
.sate-ad button,
.sate-ad select,
.sate-ad textarea,
.sate-ad .swell-block-button__link{
	font-family:inherit!important;
}

.sate-benefit{
	--sate-benefit-media-size:148px;
}

.sate-benefit.has-media > [data-sate-state="active"]{
	grid-template-columns:var(--sate-benefit-media-size) minmax(0,1fr)!important;
	gap:20px!important;
	align-items:start!important;
}

.sate-benefit__media{
	width:var(--sate-benefit-media-size)!important;
	height:var(--sate-benefit-media-size)!important;
	align-self:start!important;
	margin-top:2px!important;
}

.sate-benefit__image{
	max-width:84%!important;
	max-height:84%!important;
	margin:auto!important;
}

@media(max-width:720px){
	.sate-benefit.has-media > [data-sate-state="active"]{
		grid-template-columns:1fr!important;
	}
	.sate-benefit__media{
		width:138px!important;
		height:138px!important;
		margin:0 auto 10px!important;
	}
}

@media(max-width:420px){
	.sate-benefit__media{
		width:124px!important;
		height:124px!important;
	}
}


/* =========================================================
   v1.3.3 - 特典型レイアウト安定化
========================================================= */

/* 画像なし：従来の1カラムカードを完全に維持 */
.sate-benefit.is-no-media{
	max-width:680px!important;
}

.sate-benefit.is-no-media > [data-sate-state="active"]{
	display:grid!important;
	grid-template-columns:1fr!important;
	max-width:640px!important;
	width:100%!important;
	margin:0 auto!important;
	align-items:stretch!important;
}

.sate-benefit.is-no-media .sate-benefit__content{
	width:100%!important;
	min-width:0!important;
}

/* 画像あり：左180pxの正方形レール + 本文 */
.sate-benefit.has-media > [data-sate-state="active"]{
	display:grid!important;
	grid-template-columns:180px minmax(0,1fr)!important;
	gap:20px!important;
	align-items:stretch!important;
}

.sate-benefit.has-media .sate-benefit__media{
	width:180px!important;
	height:180px!important;
	aspect-ratio:1/1!important;
	margin:0!important;
	align-self:start!important;
	display:flex!important;
	align-items:center!important;
	justify-content:center!important;
	background:transparent!important;
	overflow:hidden!important;
}

.sate-benefit.has-media .sate-benefit__image{
	width:auto!important;
	height:auto!important;
	max-width:84%!important;
	max-height:84%!important;
	margin:auto!important;
	object-fit:contain!important;
	background:transparent!important;
	border:0!important;
	box-shadow:none!important;
}

/* クーポン有無でボタン位置が暴れない */
.sate-benefit__content{
	min-width:0!important;
}

.sate-benefit__action{
	margin-top:auto!important;
}

@media(max-width:720px){
	.sate-benefit.has-media > [data-sate-state="active"]{
		grid-template-columns:1fr!important;
	}
	.sate-benefit.has-media .sate-benefit__media{
		width:148px!important;
		height:148px!important;
		margin:0 auto 10px!important;
	}
}

@media(max-width:420px){
	.sate-benefit.has-media .sate-benefit__media{
		width:132px!important;
		height:132px!important;
	}
}


/* =========================================================
   v1.3.4
========================================================= */

/* hidden属性はレイアウトCSSより必ず優先する */
.sate-benefit [hidden]{
	display:none!important;
}

/* 開始前も通常カードをそのまま見せ、期間欄だけで状態を伝える */
.sate-benefit__status-badge{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	flex:0 0 auto;
	margin-left:8px;
	padding:2px 7px;
	border-radius:999px;
	background:rgba(0,0,0,.06);
	color:inherit;
	font-size:.78em;
	font-weight:600;
	line-height:1.5;
	vertical-align:middle;
	white-space:nowrap;
}

/* 期間行はプレビューと同じように自然に横並び */
.sate-benefit__meta-row,
.sate-benefit__period{
	display:flex;
	align-items:center;
	gap:8px;
	flex-wrap:wrap;
}

/* v1.3.3のカード形状を維持しつつ、フロントを管理画面プレビュー寄りに */
.sate-benefit.has-media > [data-sate-state="active"],
.sate-benefit.is-no-media > [data-sate-state="active"]{
	border-radius:inherit;
}


/* =========================================================
   v1.3.5 - 特典型 Preview / Front 統一
========================================================= */
.sate-benefit [hidden]{
	display:none!important;
}

.sate-benefit{
	width:100%;
	max-width:680px!important;
	margin-left:auto!important;
	margin-right:auto!important;
	padding:18px!important;
	box-sizing:border-box!important;
}

.sate-benefit.is-no-media > [data-sate-state="active"]{
	display:grid!important;
	grid-template-columns:1fr!important;
	width:100%!important;
	max-width:none!important;
	margin:0!important;
	gap:0!important;
}

.sate-benefit.has-media > [data-sate-state="active"]{
	display:grid!important;
	grid-template-columns:150px minmax(0,1fr)!important;
	gap:20px!important;
	align-items:start!important;
	width:100%!important;
	max-width:none!important;
	margin:0!important;
}

.sate-benefit.has-media .sate-benefit__media{
	width:150px!important;
	height:150px!important;
	margin:0!important;
	align-self:start!important;
}

.sate-benefit.has-media .sate-benefit__image{
	max-width:84%!important;
	max-height:84%!important;
}

.sate-benefit__content{
	display:flex!important;
	flex-direction:column!important;
	min-width:0!important;
	width:100%!important;
}

.sate-benefit__period{
	display:flex;
	align-items:center;
	gap:8px;
	flex-wrap:wrap;
	margin-top:10px!important;
}

.sate-benefit__status-badge{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	margin-left:2px;
	padding:2px 7px;
	border-radius:999px;
	background:rgba(0,0,0,.06);
	font-size:.78em;
	font-weight:600;
	line-height:1.5;
	white-space:nowrap;
}

.sate-benefit__status-badge[hidden]{
	display:none!important;
}

.sate-benefit__action{
	margin-top:10px!important;
}

@media(max-width:720px){
	.sate-benefit{
		padding:16px!important;
	}
	.sate-benefit.has-media > [data-sate-state="active"]{
		grid-template-columns:1fr!important;
	}
	.sate-benefit.has-media .sate-benefit__media{
		width:138px!important;
		height:138px!important;
		margin:0 auto 8px!important;
	}
}


/* =========================================================
   v1.3.6 - 特典型：管理画面Previewとフロントを同一デザインへ
========================================================= */

/* 重要：stateのhiddenを、後続のgrid指定より必ず優先する */
.sate-benefit [data-sate-state][hidden]{
	display:none!important;
}

/* カード全体 */
.sate-benefit{
	max-width:680px!important;
	padding:20px!important;
	border:1px solid var(--sate-benefit-border,#ead7b7)!important;
	border-radius:var(--sate-benefit-radius,14px)!important;
	background:var(--sate-benefit-bg,#fffaf1)!important;
	text-align:left!important;
}

/* 画像あり = Previewと同じ2カラム */
.sate-benefit.has-media > [data-sate-state="active"]{
	display:grid!important;
	grid-template-columns:150px minmax(0,1fr)!important;
	gap:20px!important;
	align-items:stretch!important;
	width:100%!important;
	margin:0!important;
}

/* 画像なし = 1カラム */
.sate-benefit.is-no-media > [data-sate-state="active"]{
	display:grid!important;
	grid-template-columns:1fr!important;
	gap:0!important;
	width:100%!important;
	margin:0!important;
}

.sate-benefit__media{
	width:150px!important;
	height:150px!important;
	min-height:0!important;
	margin:auto 0!important;
	align-self:center!important;
	display:flex!important;
	align-items:center!important;
	justify-content:center!important;
	background:transparent!important;
}

.sate-benefit__image{
	width:auto!important;
	height:auto!important;
	max-width:84%!important;
	max-height:84%!important;
	object-fit:contain!important;
	margin:auto!important;
}

/* 本文：Previewと同じ文字組み */
.sate-benefit__content{
	display:flex!important;
	flex-direction:column!important;
	gap:12px!important;
	min-width:0!important;
	min-height:190px!important;
}

.sate-benefit__title{
	font-size:17px!important;
	font-weight:700!important;
	line-height:1.45!important;
}

.sate-benefit__desc{
	color:#667085!important;
	font-size:13px!important;
	line-height:1.65!important;
	opacity:1!important;
}

/* 期間 */
.sate-benefit__period{
	display:flex!important;
	align-items:center!important;
	gap:9px!important;
	flex-wrap:wrap!important;
	margin:0!important;
	padding:8px 10px!important;
	border-radius:7px!important;
	background:rgba(0,0,0,.035)!important;
	font-size:12px!important;
	line-height:1.5!important;
}

.sate-benefit__period > span:first-child{
	font-weight:700!important;
	color:#667085!important;
	opacity:1!important;
}

.sate-benefit__period strong{
	font-weight:600!important;
	color:#343434!important;
}

.sate-benefit__status-badge{
	margin-left:auto!important;
	padding:2px 7px!important;
	border-radius:999px!important;
	background:rgba(0,0,0,.06)!important;
	color:#667085!important;
	font-size:10px!important;
	font-weight:700!important;
	line-height:1.5!important;
}

/* クーポン：Previewと完全に同じ見た目 */
.sate-benefit .sate-coupon{
	padding:12px 14px!important;
	border:1px dashed color-mix(in srgb, var(--sate-benefit-border,#ead7b7) 72%, #000 28%)!important;
	border-radius:10px!important;
	background:var(--sate-benefit-coupon,#fff8ec)!important;
}

.sate-benefit .sate-coupon__label{
	margin-bottom:8px!important;
	color:inherit!important;
	font-size:12px!important;
	font-weight:700!important;
	opacity:1!important;
}

.sate-benefit .sate-coupon__body{
	display:flex!important;
	align-items:center!important;
	gap:10px!important;
}

.sate-benefit .sate-coupon code{
	flex:1!important;
	padding:9px 12px!important;
	border:1px solid color-mix(in srgb, var(--sate-benefit-border,#ead7b7) 70%, #fff 30%)!important;
	border-radius:7px!important;
	background:#fff!important;
	color:inherit!important;
	font-size:inherit!important;
	font-weight:700!important;
	letter-spacing:.12em!important;
}

.sate-benefit .sate-coupon button{
	flex:0 0 auto!important;
	padding:7px 10px!important;
	border:0!important;
	border-radius:0!important;
	background:transparent!important;
	color:#667085!important;
	cursor:pointer!important;
	font-size:inherit!important;
	font-weight:700!important;
	line-height:1.4!important;
	box-shadow:none!important;
}

.sate-benefit .sate-coupon button:hover{
	opacity:.72;
}

.sate-benefit .sate-coupon__feedback{
	min-height:0!important;
	margin:5px 0 0!important;
	font-size:11px!important;
	opacity:.62!important;
}

/* CTAはPreviewと同じく下端・全幅 */
.sate-benefit__action{
	margin-top:auto!important;
}

.sate-benefit__action .swell-block-button{
	width:100%!important;
	max-width:none!important;
	margin:0!important;
}

.sate-benefit__action .swell-block-button__link{
	display:flex!important;
	align-items:center!important;
	justify-content:center!important;
	min-height:48px!important;
}

/* 終了後：通常カードを消して、同じ配色の終了カードだけ表示 */
.sate-benefit__ended{
	display:grid;
	grid-template-columns:auto minmax(0,1fr);
	gap:12px 14px;
	align-items:center;
	padding:4px 2px;
}

.sate-benefit__ended-icon{
	display:flex;
	align-items:center;
	justify-content:center;
	width:34px;
	height:34px;
	border-radius:50%;
	background:rgba(0,0,0,.06);
	color:#667085;
	font-size:15px;
	font-weight:700;
}

.sate-benefit__ended-label{
	margin-bottom:2px;
	color:#667085;
	font-size:11px;
	font-weight:700;
	letter-spacing:.04em;
}

.sate-benefit__ended .sate-benefit__status{
	font-size:14px;
	font-weight:700;
	line-height:1.6;
}

.sate-benefit__ended .sate-benefit__fallback{
	grid-column:1 / -1;
	margin-top:6px;
}

.sate-benefit__ended .sate-benefit__fallback:empty{
	display:none;
}

/* hiddenは最後にも宣言し、終了時にactiveカードが残るのを防ぐ */
.sate-benefit [data-sate-state][hidden]{
	display:none!important;
}

@media(max-width:720px){
	.sate-benefit{
		padding:18px 16px!important;
	}

	.sate-benefit.has-media > [data-sate-state="active"]{
		grid-template-columns:1fr!important;
	}

	.sate-benefit__media{
		width:138px!important;
		height:138px!important;
		margin:0 auto!important;
	}

	.sate-benefit__content{
		min-height:0!important;
	}

	.sate-benefit .sate-coupon__body{
		flex-direction:row!important;
		align-items:center!important;
	}

	.sate-benefit .sate-coupon button{
		width:auto!important;
	}
}


/* =========================================================
   v1.3.6.1 - v1.3.6を土台にした指定差分のみ
========================================================= */

/* メディアライブラリ画像 / 広告タグ画像を同じ164px正方形レールへ統一 */
.sate-benefit.has-media > [data-sate-state="active"]{
	grid-template-columns:164px minmax(0,1fr)!important;
}

.sate-benefit__media{
	width:164px!important;
	height:164px!important;
	aspect-ratio:1 / 1!important;
	margin:auto 0!important;
	align-self:center!important;
	display:flex!important;
	align-items:center!important;
	justify-content:center!important;
	padding:0!important;
	border:0!important;
	background:transparent!important;
	box-shadow:none!important;
	overflow:hidden!important;
}

.sate-benefit__media > a,
.sate-benefit__media--adtag > a{
	display:flex!important;
	align-items:center!important;
	justify-content:center!important;
	width:100%!important;
	height:100%!important;
	margin:0!important;
	padding:0!important;
	background:transparent!important;
}

.sate-benefit__image,
.sate-benefit__media img,
.sate-benefit__media--adtag img{
	width:auto!important;
	height:auto!important;
	max-width:88%!important;
	max-height:88%!important;
	margin:auto!important;
	object-fit:contain!important;
	background:transparent!important;
	border:0!important;
	border-radius:0!important;
	box-shadow:none!important;
}

/* ASPの1px計測画像は画像レールのレイアウトに参加させない */
.sate-benefit__media--adtag img[width="1"],
.sate-benefit__media--adtag img[height="1"]{
	position:absolute!important;
	width:1px!important;
	height:1px!important;
	op:auto!important;
	left:auto!important;
	opacity:0!important;
	pointer-events:none!important;
}

/* 特典型ボタンの角丸は「SWELL設定」以外を選んだ時だけ上書き */
.sate-benefit.sate-benefit-custom-button-radius .sate-benefit__action .swell-block-button__link,
.sate-benefit.sate-benefit-custom-button-radius .sate-benefit__fallback .swell-block-button__link{
	border-radius:var(--sate-benefit-button-radius,10px)!important;
}

.sate-benefit__ended-svg{
	display:block;
	width:19px;
	height:19px;
}

@media(max-width:720px){
	.sate-benefit.has-media > [data-sate-state="active"]{
		grid-template-columns:1fr!important;
	}

	.sate-benefit__media{
		width:146px!important;
		height:146px!important;
		margin:0 auto 8px!important;
	}
}


/* =========================================================
   v1.4.0 - 特典運用強化
========================================================= */
.sate-benefit__label{
	display:inline-flex;
	align-self:flex-start;
	align-items:center;
	max-width:100%;
	padding:4px 9px;
	border:1px solid color-mix(in srgb,var(--sate-benefit-btn,var(--color_main,#1176d4)) 28%,transparent);
	border-radius:999px;
	background:color-mix(in srgb,var(--sate-benefit-btn,var(--color_main,#1176d4)) 8%,#fff 92%);
	color:var(--sate-benefit-btn,var(--color_main,#1176d4));
	font-size:.74em;
	font-weight:700;
	line-height:1.45;
}

.sate-benefit__status-badge.is-ending-soon{
	background:color-mix(in srgb,var(--sate-benefit-btn,var(--color_main,#1176d4)) 10%,#fff 90%);
	color:var(--sate-benefit-btn,var(--color_main,#1176d4));
}

.sate-benefit__actions{
	display:flex;
	flex-direction:column;
	gap:8px;
	margin-top:auto!important;
}

.sate-benefit__actions .sate-benefit__action{
	margin-top:0!important;
}

.sate-benefit__action--secondary .swell-block-button__link{
	border:1px solid var(--sate-benefit-btn,var(--color_main,#1176d4))!important;
	background:#fff!important;
	background-image:none!important;
	color:var(--sate-benefit-btn,var(--color_main,#1176d4))!important;
}

.sate-btn-icon{
	width:1.05em;
	height:1.05em;
	margin-left:.5em;
	flex:0 0 auto;
}

.sate-benefit-custom-button-radius .sate-benefit__action--secondary .swell-block-button__link{
	border-radius:var(--sate-benefit-button-radius,0px)!important;
}

@media(min-width:601px){
	.sate-benefit__actions.has-secondary{
		flex-direction:row;
	}
	.sate-benefit__actions.has-secondary .sate-benefit__action{
		flex:1 1 0;
	}
	.sate-benefit__actions.has-secondary .swell-block-button{
		width:100%!important;
	}
}


/* =========================================================
   v1.4.1: 標準ボタンはSWELL本来の寸法 / SWELLアイコン
========================================================= */
.sate-button.sate-width-standard .swell-block-button__link{
	display:inline-flex!important;
	width:auto!important;
	min-width:var(--the-min-width,40%)!important;
	min-height:0!important;
	padding:var(--the-padding,.75em 1.5em)!important;
	line-height:1.5!important;
}

.sate-btn-icon{
	display:inline-block;
	width:auto!important;
	height:auto!important;
	margin-left:.5em;
	font-size:1.05em;
	line-height:1;
	font-style:normal;
	flex:0 0 auto;
}


/* =========================================================
   v1.4.2 - 特典型 Preview / Front 再統一
========================================================= */

/* ラベルはCTA色ではなく「特典のキーカラー」を使う。
   CTAが黒でも期間限定ラベルが埋もれない。 */
.sate-benefit__label{
	border-color:color-mix(in srgb,var(--sate-benefit-key,#B00000) 24%,#fff 76%)!important;
	background:color-mix(in srgb,var(--sate-benefit-key,#B00000) 7%,#fff 93%)!important;
	color:var(--sate-benefit-key,#B00000)!important;
}

/* クーポンは管理画面Previewと同じ暖色アクセントを残す。 */
.sate-benefit .sate-coupon{
	border-color:color-mix(in srgb,var(--sate-benefit-key,#B00000) 42%,#fff 58%)!important;
}
.sate-benefit .sate-coupon code{
	border-color:color-mix(in srgb,var(--sate-benefit-key,#B00000) 30%,#fff 70%)!important;
}

/* SWELL純正アイコンの位置・大きさをPreviewとFrontで統一。 */
.sate-btn-icon{
	display:inline-block!important;
	margin-left:.5em!important;
	font-family:icomoon!important;
	font-size:1.05em!important;
	font-style:normal!important;
	font-weight:400!important;
	line-height:1!important;
	vertical-align:-.08em!important;
}


/* =========================================================
   v1.4.3 - Preview/Front visual sync fixes
========================================================= */
.sate-benefit__label{border-color:rgba(176,0,0,.24)!important;background:rgba(176,0,0,.07)!important;color:#B00000!important}.sate-benefit .sate-coupon{border-color:#e8a949!important;background:var(--sate-benefit-coupon,#fff8ec)!important}.sate-benefit .sate-coupon code{border-color:#ead7b7!important;background:#fff!important}.sate-btn-icon{display:inline-flex!important;align-items:center;justify-content:center;margin-left:.5em!important;line-height:1!important;color:currentColor!important}.sate-btn-icon svg{display:block;width:1.05em;height:1.05em;fill:none;stroke:currentColor;stroke-width:0}.sate-btn-icon--shopping svg{fill:currentColor;stroke:none}


/* =========================================================
   v1.4.4 - 自動配色 / ラベル視認性 / Preview整合
========================================================= */
.sate-benefit__label{
	background:#fff!important;
	color:var(--sate-benefit-key,#B00000)!important;
	border-color:color-mix(in srgb,var(--sate-benefit-key,#B00000) 52%,#fff 48%)!important;
	box-shadow:0 1px 0 rgba(0,0,0,.03)!important;
}
.sate-benefit .sate-coupon{
	border-color:color-mix(in srgb,var(--sate-benefit-key,#B00000) 42%,#fff 58%)!important;
	background:var(--sate-benefit-coupon,#fff8ec)!important;
}
.sate-benefit .sate-coupon code{
	border-color:color-mix(in srgb,var(--sate-benefit-key,#B00000) 28%,#fff 72%)!important;
	background:color-mix(in srgb,var(--sate-benefit-key,#B00000) 3%,#fff 97%)!important;
}
.sate-btn-icon--shopping svg{fill:currentColor!important;stroke:none!important;}


/* =========================================================
   v1.4.5 - 特典ラベル / クーポン配色 最終調整
========================================================= */
.sate-benefit__label{
	background:#fff!important;
	color:var(--sate-benefit-key,#B00000)!important;
	border-color:color-mix(in srgb,var(--sate-benefit-key,#B00000) 52%,#fff 48%)!important;
}
.sate-benefit .sate-coupon{
	background:var(--sate-benefit-coupon,#fff8ec)!important;
	border-color:color-mix(in srgb,var(--sate-benefit-key,#B00000) 42%,#fff 58%)!important;
}
.sate-benefit .sate-coupon code{
	border-color:#D6A84B!important;
	background:color-mix(in srgb,var(--sate-benefit-key,#B00000) 3%,#fff 97%)!important;
}