/* 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:min(100%,280px)}
.sate-width-wide .swell-block-button{width:min(100%,420px)}
.sate-width-full .swell-block-button{width:100%}

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