/**
 * フローティングバナー。
 * 配置タイプ（隅4種 / 下部バー / 中央モーダル）をPC・スマホで個別指定。
 * 出現アニメーション4種（fade / slide-up / slide-side / zoom）。
 *
 * 配置は data-pc-placement / data-sp-placement を JS が
 * bm-pc-* / bm-sp-* クラスに変換して付与する。
 */

/* ===== 基本コンテナ ===== */
.bm-floating-banner {
	/* テーマCSSに position を上書きされると隅配置が崩れるため固定を明示。 */
	position: fixed !important;
	z-index: 99999;
	box-sizing: border-box;
}

.bm-floating-banner[hidden] {
	display: none;
}

/* 「閉じる」操作の直後にこのクラスを付与し、要素を即座に
   レンダリングツリーから取り除く。visibility:hidden だと
   iOSでタッチ判定のキャッシュが残り、最初のタップが無視される
   （ダブルタップが必要になる）ため、display:none で物理的に消す。 */
.bm-floating-banner.is-closing {
	display: none !important;
}

/* バナー本体 */
.bm-floating-banner__inner {
	position: relative;
	box-sizing: border-box;
	opacity: 0;
	transition: opacity .4s ease, transform .4s ease;
	pointer-events: none;
}

.bm-floating-banner.is-visible .bm-floating-banner__inner {
	opacity: 1;
	pointer-events: auto;
	transform: none;
}

.bm-floating-banner__link {
	display: block;
	line-height: 0;
	text-decoration: none;
}

.bm-floating-banner__link img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

/* モーダル配置：縦長画像でも画面内に収める。
   画面高の85%を上限とし、超える場合は幅を自動で詰める。 */
.bm-floating-banner.bm-pc-modal .bm-floating-banner__link img,
.bm-floating-banner.bm-sp-modal .bm-floating-banner__link img {
	max-height: 85vh;
	width: auto;
	max-width: 100%;
	margin: 0 auto;
}

/* 閉じるボタン。
   角の「外側」に出すと画面端配置で見切れるため、内側に配置する。 */
.bm-floating-banner__close {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 28px;
	height: 28px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba( 28, 31, 38, .85 );
	color: #fff;
	font-size: 18px;
	line-height: 28px;
	text-align: center;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba( 0, 0, 0, .3 );
	z-index: 2;
}

.bm-floating-banner__close:hover {
	background: #000;
}

/* 背景オーバーレイ。
   現行仕様（中央配置）では使用しない。display:none 固定。
   かつての「中央モーダル」用に残しているが、blurや暗転は外して
   万が一表示されても害がないようにする。 */
.bm-floating-banner__overlay {
	display: none !important;
}

.bm-floating-banner.is-visible .bm-floating-banner__overlay {
	display: none !important;
}

/* ===========================================================
   出現アニメーション（初期状態 → is-visible で none に戻る）
   =========================================================== */
.bm-floating-banner[data-animation="fade"] .bm-floating-banner__inner {
	transform: none;
}
.bm-floating-banner[data-animation="slide-up"] .bm-floating-banner__inner {
	transform: translateY( 40px );
}
.bm-floating-banner[data-animation="zoom"] .bm-floating-banner__inner {
	transform: scale( .8 );
}
/* slide-side は配置側で左右の向きが変わるため、配置ごとに定義 */

/* ===========================================================
   配置タイプ：PC（1025px以上）
   =========================================================== */
@media ( min-width: 1025px ) {

	/* --- 隅配置（4種） --- */
	.bm-floating-banner.bm-pc-corner-br,
	.bm-floating-banner.bm-pc-corner-bl,
	.bm-floating-banner.bm-pc-corner-tr,
	.bm-floating-banner.bm-pc-corner-tl {
		width: 320px;
		/* ビューポートからの余白(24px×2)を引いた幅を上限にし、はみ出しを防ぐ。 */
		max-width: calc( 100vw - 48px );
	}
	/* バナー画像が画面高を超えないよう保険をかける。 */
	.bm-floating-banner[class*="bm-pc-corner"] .bm-floating-banner__link img {
		max-height: calc( 100vh - 48px );
		width: auto;
		max-width: 100%;
	}
	.bm-floating-banner.bm-pc-corner-br { right: 24px; bottom: 24px; }
	.bm-floating-banner.bm-pc-corner-bl { left: 24px;  bottom: 24px; }
	.bm-floating-banner.bm-pc-corner-tr { right: 24px; top: 24px; }
	.bm-floating-banner.bm-pc-corner-tl { left: 24px;  top: 24px; }

	.bm-floating-banner[class*="bm-pc-corner"] .bm-floating-banner__link img {
		box-shadow: 0 6px 24px rgba( 0, 0, 0, .22 );
	}

	/* slide-side：右側配置は右から、左側配置は左から入る */
	.bm-floating-banner.bm-pc-corner-br[data-animation="slide-side"] .bm-floating-banner__inner,
	.bm-floating-banner.bm-pc-corner-tr[data-animation="slide-side"] .bm-floating-banner__inner {
		transform: translateX( 60px );
	}
	.bm-floating-banner.bm-pc-corner-bl[data-animation="slide-side"] .bm-floating-banner__inner,
	.bm-floating-banner.bm-pc-corner-tl[data-animation="slide-side"] .bm-floating-banner__inner {
		transform: translateX( -60px );
	}

	/* --- 下部バー --- */
	.bm-floating-banner.bm-pc-bottom-bar {
		left: 0; right: 0; bottom: 0;
		width: 100%;
		padding: 12px 16px;
		background: rgba( 255, 255, 255, .96 );
		box-shadow: 0 -4px 16px rgba( 0, 0, 0, .16 );
	}
	.bm-floating-banner.bm-pc-bottom-bar .bm-floating-banner__inner {
		max-width: 1000px;
		margin: 0 auto;
	}
	.bm-floating-banner.bm-pc-bottom-bar[data-animation="slide-side"] .bm-floating-banner__inner {
		transform: translateX( 60px );
	}

	/* --- 中央配置（PC） ---
	   かつての「中央モーダル」をiOSのタッチ干渉対策で改修。
	   画面全体を覆わず、中央にコンパクトに固定配置する。背景の暗転・ぼかしなし。 */
	.bm-floating-banner.bm-pc-modal {
		top: 50%;
		left: 50%;
		transform: translate( -50%, -50% );
		width: 480px;
		max-width: calc( 100vw - 48px );
	}
	.bm-floating-banner.bm-pc-modal .bm-floating-banner__overlay {
		display: none !important; /* 背景オーバーレイは出さない */
	}
	.bm-floating-banner.bm-pc-modal .bm-floating-banner__inner {
		position: relative;
	}
	.bm-floating-banner.bm-pc-modal .bm-floating-banner__link img {
		/* 周辺に大きな放射状の影を出し、背景と同化しないようにする。
		   画面全体は覆わないので操作性は維持される。
		   1段目：近接の濃い影、2段目：遠くまで広がる薄い影。 */
		box-shadow:
			0 8px 32px rgba( 0, 0, 0, .35 ),
			0 0 120px 40px rgba( 0, 0, 0, .25 );
	}
	/* slide-side：内側だけにずらしを当てる（コンテナのtransformは中央化に使う） */
	.bm-floating-banner.bm-pc-modal[data-animation="slide-side"] .bm-floating-banner__inner {
		transform: translateX( 60px );
	}
}

/* ===========================================================
   配置タイプ：スマホ・タブレット（1024px以下）
   =========================================================== */
@media ( max-width: 1024px ) {

	/* --- 隅配置（4種） --- */
	.bm-floating-banner.bm-sp-corner-br,
	.bm-floating-banner.bm-sp-corner-bl,
	.bm-floating-banner.bm-sp-corner-tr,
	.bm-floating-banner.bm-sp-corner-tl {
		width: 60vw;
		max-width: 280px;
	}
	.bm-floating-banner.bm-sp-corner-br { right: 12px; bottom: 12px; }
	.bm-floating-banner.bm-sp-corner-bl { left: 12px;  bottom: 12px; }
	.bm-floating-banner.bm-sp-corner-tr { right: 12px; top: 12px; }
	.bm-floating-banner.bm-sp-corner-tl { left: 12px;  top: 12px; }

	.bm-floating-banner[class*="bm-sp-corner"] .bm-floating-banner__link img {
		box-shadow: 0 4px 16px rgba( 0, 0, 0, .25 );
		max-height: calc( 100vh - 24px );
		width: auto;
		max-width: 100%;
	}

	.bm-floating-banner.bm-sp-corner-br[data-animation="slide-side"] .bm-floating-banner__inner,
	.bm-floating-banner.bm-sp-corner-tr[data-animation="slide-side"] .bm-floating-banner__inner {
		transform: translateX( 40px );
	}
	.bm-floating-banner.bm-sp-corner-bl[data-animation="slide-side"] .bm-floating-banner__inner,
	.bm-floating-banner.bm-sp-corner-tl[data-animation="slide-side"] .bm-floating-banner__inner {
		transform: translateX( -40px );
	}

	/* --- 下部バー（全幅スライドアップ） --- */
	.bm-floating-banner.bm-sp-bottom-bar {
		left: 0; right: 0; bottom: 0;
		width: 100%;
		padding: 10px 12px calc( 10px + env( safe-area-inset-bottom ) );
		background: rgba( 255, 255, 255, .96 );
		box-shadow: 0 -4px 16px rgba( 0, 0, 0, .16 );
	}
	.bm-floating-banner.bm-sp-bottom-bar .bm-floating-banner__link img {
		border-radius: 6px;
		max-height: 30vh;
		width: auto;
		margin: 0 auto;
	}
	.bm-floating-banner.bm-sp-bottom-bar .bm-floating-banner__close {
		top: 6px;
		right: 8px;
	}
	.bm-floating-banner.bm-sp-bottom-bar[data-animation="slide-side"] .bm-floating-banner__inner {
		transform: translateX( 40px );
	}

	/* --- 中央配置（スマホ） ---
	   PC側と同じく、画面全体を覆わない中央配置に改修。 */
	.bm-floating-banner.bm-sp-modal {
		top: 50%;
		left: 50%;
		transform: translate( -50%, -50% );
		width: 88vw;
		max-width: 420px;
	}
	.bm-floating-banner.bm-sp-modal .bm-floating-banner__overlay {
		display: none !important; /* 背景オーバーレイは出さない */
	}
	.bm-floating-banner.bm-sp-modal .bm-floating-banner__inner {
		position: relative;
	}
	.bm-floating-banner.bm-sp-modal .bm-floating-banner__link img {
		/* 周辺に放射状の影を出して背景と同化を防ぐ（スマホは画面が狭いため
		   PCより少しコンパクトに）。画面全体は覆わないので操作性は維持。 */
		box-shadow:
			0 6px 24px rgba( 0, 0, 0, .35 ),
			0 0 80px 30px rgba( 0, 0, 0, .25 );
	}
	.bm-floating-banner.bm-sp-modal[data-animation="slide-side"] .bm-floating-banner__inner {
		transform: translateX( 40px );
	}
}