/* =========================================================
 * 離脱防止・フローティングバナー フロントCSS
 * すべて #efb-exit / #efb-float 配下にスコープ
 * ========================================================= */

/* ---- 共通：閉じるボタン ---- */
#efb-exit .efb-close,
#efb-float .efb-close {
	position: absolute;
	top: -14px;
	right: -14px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 2px solid #fff;
	background: #333;
	color: #fff;
	font-size: 22px;
	line-height: 30px;
	text-align: center;
	cursor: pointer;
	padding: 0;
	z-index: 3;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
	-webkit-tap-highlight-color: transparent;
}
#efb-exit .efb-close:hover,
#efb-float .efb-close:hover,
#efb-exit .efb-close:active,
#efb-float .efb-close:active {
	background: #000;
	transform: scale(1.08);
}
/* 見た目より大きくタップできるよう当たり判定を拡張 */
#efb-exit .efb-close::before,
#efb-float .efb-close::before {
	content: "";
	position: absolute;
	inset: -12px;
	border-radius: 50%;
}
/* フローティングの×はさらに大きめ＆押しやすく */
#efb-float .efb-close {
	width: 40px;
	height: 40px;
	font-size: 26px;
	line-height: 36px;
	top: -16px;
	right: -16px;
}

#efb-exit .efb-content img,
#efb-float .efb-content img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}
#efb-exit .efb-banner-link,
#efb-float .efb-banner-link {
	display: block;
}

/* ---- ボタン＋マイクロコピー型 ---- */
#efb-exit .efb-cta,
#efb-float .efb-cta {
	padding: 16px 18px;
	text-align: center;
	background: #fff;
	border-radius: inherit;
}
#efb-exit .efb-cta-microtop,
#efb-float .efb-cta-microtop {
	margin: 0 0 9px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}
#efb-exit .efb-cta-microtop span,
#efb-float .efb-cta-microtop span {
	background: linear-gradient(transparent 60%, #fff176 60%);
	padding: 0 2px;
}
#efb-exit .efb-cta-btn,
#efb-float .efb-cta-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	max-width: 440px;
	margin: 0 auto;
	padding: 15px 22px;
	border-radius: 8px;
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
	transition: transform 0.15s ease, opacity 0.15s ease;
}
#efb-exit .efb-cta-btn:hover,
#efb-float .efb-cta-btn:hover {
	transform: translateY(-2px);
	opacity: 0.95;
	color: #fff;
}
#efb-exit .efb-cta-btn:active,
#efb-float .efb-cta-btn:active {
	transform: translateY(0);
}
.efb-cta-arrow {
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
}
.efb-cta-red { background: #e8413c; }
.efb-cta-orange { background: #ef7d00; }
.efb-cta-green { background: #22a13f; }
.efb-cta-blue { background: #2378c4; }
#efb-exit .efb-cta-microbottom,
#efb-float .efb-cta-microbottom {
	margin: 9px 0 0;
	font-size: 12px;
	font-weight: 700;
	color: #e8413c;
}

/* =========================================================
 * 離脱防止バナー（モーダル）
 * ========================================================= */
#efb-exit {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
#efb-exit.efb-open {
	display: flex;
}
#efb-exit .efb-overlay {
	position: absolute;
	inset: 0;
}
#efb-exit .efb-modal {
	position: relative;
	width: 100%;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
	z-index: 1;
}
#efb-exit .efb-content {
	overflow: hidden;
	border-radius: 10px;
}

/* アニメーション */
#efb-exit.efb-anim-zoom .efb-modal { transform: scale(0.8); opacity: 0; transition: transform .25s ease, opacity .25s ease; }
#efb-exit.efb-open.efb-anim-zoom .efb-modal { transform: scale(1); opacity: 1; }

#efb-exit.efb-anim-fade .efb-modal { opacity: 0; transition: opacity .3s ease; }
#efb-exit.efb-open.efb-anim-fade .efb-modal { opacity: 1; }

#efb-exit.efb-anim-slide .efb-modal { transform: translateY(40px); opacity: 0; transition: transform .3s ease, opacity .3s ease; }
#efb-exit.efb-open.efb-anim-slide .efb-modal { transform: translateY(0); opacity: 1; }

/* =========================================================
 * フローティングバナー
 * ========================================================= */
#efb-float {
	position: fixed;
	z-index: 999998;
	display: none;
	box-sizing: border-box;
}
#efb-float.efb-show {
	display: block;
}
#efb-float .efb-float-inner {
	position: relative;
	max-width: var(--efb-maxw, 728px);
	margin: 0 auto;
	box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.18);
	border-radius: 8px;
	background: #fff;
	transition: transform .35s ease, opacity .35s ease;
}

/* 下スクロール中だけ一時的に隠す（efb-scroll-hidden） */
#efb-float.efb-scroll-hidden:not(.efb-pos-top-full) .efb-float-inner {
	transform: translateY(220%);
	opacity: 0;
	pointer-events: none;
}
#efb-float.efb-pos-top-full.efb-scroll-hidden .efb-float-inner {
	transform: translateY(-220%);
	opacity: 0;
	pointer-events: none;
}
#efb-float .efb-content {
	overflow: hidden;
	border-radius: 8px;
}

/* 位置：下・中央 */
#efb-float.efb-pos-bottom-center {
	left: 50%;
	transform: translateX(-50%);
	bottom: var(--efb-bottom, 20px);
	width: calc(100% - 24px);
	max-width: var(--efb-maxw, 728px);
}
/* 位置：下・左 */
#efb-float.efb-pos-bottom-left {
	left: var(--efb-side, 20px);
	bottom: var(--efb-bottom, 20px);
	width: var(--efb-maxw, 728px);
	max-width: calc(100% - 24px);
}
#efb-float.efb-pos-bottom-left .efb-float-inner { margin: 0; }
/* 位置：下・右 */
#efb-float.efb-pos-bottom-right {
	right: var(--efb-side, 20px);
	bottom: var(--efb-bottom, 20px);
	width: var(--efb-maxw, 728px);
	max-width: calc(100% - 24px);
}
#efb-float.efb-pos-bottom-right .efb-float-inner { margin: 0; }
/* 位置：下・横幅いっぱい */
#efb-float.efb-pos-bottom-full {
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
}
#efb-float.efb-pos-bottom-full .efb-float-inner {
	max-width: 100%;
	border-radius: 0;
	box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.18);
}
#efb-float.efb-pos-bottom-full .efb-content { border-radius: 0; }
/* 位置：上・横幅いっぱい */
#efb-float.efb-pos-top-full {
	left: 0;
	right: 0;
	top: 0;
	width: 100%;
}
#efb-float.efb-pos-top-full .efb-float-inner {
	max-width: 100%;
	border-radius: 0;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
}
#efb-float.efb-pos-top-full .efb-content { border-radius: 0; }
#efb-float.efb-pos-top-full .efb-close { top: auto; bottom: -12px; }

/* アニメーション（フロート） */
#efb-float.efb-anim-slide { opacity: 0; transition: opacity .3s ease, transform .3s ease; }
#efb-float.efb-anim-slide.efb-pos-top-full { transform: translateY(-100%); }
#efb-float.efb-anim-slide:not(.efb-pos-top-full) { transform: translateY(30px); }
#efb-float.efb-anim-slide.efb-show { opacity: 1; }
#efb-float.efb-anim-slide.efb-show.efb-pos-bottom-center { transform: translateX(-50%) translateY(0); }
#efb-float.efb-anim-slide.efb-show:not(.efb-pos-bottom-center) { transform: translateY(0); }

#efb-float.efb-anim-fade { opacity: 0; transition: opacity .35s ease; }
#efb-float.efb-anim-fade.efb-show { opacity: 1; }

/* スマホ最適化 */
@media (max-width: 600px) {
	#efb-float.efb-pos-bottom-left,
	#efb-float.efb-pos-bottom-right {
		left: 8px;
		right: 8px;
		width: auto;
	}
	/* 画面端で×が見切れないよう、スマホではバナー内側の角に配置 */
	#efb-float .efb-close {
		top: 8px;
		right: 8px;
	}
	#efb-float.efb-pos-top-full .efb-close {
		top: auto;
		bottom: 8px;
	}
	#efb-exit .efb-close {
		top: -12px;
		right: -10px;
	}
}