/*
 * ECサイト告知バナー（現行サイト用）
 * 株式会社天理時報社 / lightning-child
 *
 * 画面右上に固定表示する画像バナー。
 * 閉じると一定日数のあいだ再表示しない（制御は jihosha-banner.js）。
 *
 * このファイルの末尾に、ページトップボタンの位置調整も入れている（後述）。
 *
 * クラス名は jhs- を接頭辞にしている。
 * テーマや各プラグイン（Lightning / VK Blocks / Popup Maker など）の
 * クラスと衝突しないようにするため。
 */

.jhs-banner {
	position: fixed;

	/*
	 * --jhs-banner-top はヘッダーの実測値から JS が入れる。
	 * JSが動く前・動かない環境では 100px で代替する
	 * （現行サイトのヘッダーはおよそ90px）。
	 */
	top: var(--jhs-banner-top, 100px);
	right: 24px;

	/*
	 * ページトップボタン（VK ExUnit）は z-index:99999、
	 * チャットボットは 999999。どちらとも位置が重ならないので
	 * それらより下、通常コンテンツより上に置く。
	 */
	z-index: 9990;

	width: 260px;
	max-width: calc(100vw - 32px);

	background: #fff;
	border: 1px solid rgba(22, 28, 61, .12);
	border-radius: 14px;
	box-shadow: 0 18px 44px rgba(10, 14, 48, .22);

	/* 閉じるボタンを角の外に出すため、はみ出しを許可する。
	   角丸のクリップはリンク側で行う。 */
	overflow: visible;

	opacity: 0;
	transform: translateY(-20px);
	transition: opacity .45s cubic-bezier(.19, 1, .22, 1),
	            transform .45s cubic-bezier(.19, 1, .22, 1);
}

/* JSが表示を決めるまでは出さない */
.jhs-banner[hidden] {
	display: none;
}

.jhs-banner.is-in {
	opacity: 1;
	transform: none;
}

.jhs-banner.is-out {
	opacity: 0;
	transform: translateY(-14px);
	pointer-events: none;
}

.jhs-banner__link {
	display: block;
	border-radius: inherit;
	overflow: hidden;
	line-height: 0; /* img下の余白を消す */
}

.jhs-banner__link img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform .6s cubic-bezier(.19, 1, .22, 1);
}

.jhs-banner__link:hover img {
	transform: scale(1.03);
}

/* 閉じるボタン。カードの角の外側に出す（バナー画像の文字を隠さないため） */
.jhs-banner__close {
	position: absolute;
	top: -10px;
	right: -10px;
	width: 32px;
	height: 32px;
	padding: 0;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: rgba(10, 14, 48, .72);
	color: #fff;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	transition: background .28s ease;
	-webkit-appearance: none;
	appearance: none;
}

.jhs-banner__close:hover,
.jhs-banner__close:focus-visible {
	background: rgba(10, 14, 48, .92);
}

.jhs-banner__close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* ---- スマートフォン ---- */
@media (max-width: 680px) {
	.jhs-banner {
		top: var(--jhs-banner-top, 84px);
		right: 12px;
		/*
		 * 正方形の画像なので、全幅にすると画面の半分近くを占めてしまう。
		 * 右上の小さなカードのままにする。
		 */
		width: 150px;
	}
}

/* 動きを減らす設定を尊重する */
@media (prefers-reduced-motion: reduce) {
	.jhs-banner {
		transition: none;
	}

	.jhs-banner.is-in {
		transform: none;
	}

	.jhs-banner__link img,
	.jhs-banner__link:hover img {
		transition: none;
		transform: none;
	}
}


/* ==========================================================
 * ページトップボタンの位置調整
 *
 * VK ExUnit のページトップボタン（.page_top_btn）は
 *   right: 2% / bottom: 3% / 40×38px / z-index: 99999
 * チャットボット（#dify-widget-container）は
 *   right: 20px / bottom: 20px / 高さ52px / z-index: 999999
 * にあり、1440×900の画面では
 *   ページトップ : x=1371〜1411, y=835〜873
 *   チャットボット: x=1283〜1417, y=828〜880
 * と、ページトップボタンがチャットボットの内側に完全に入る。
 * さらにチャットボットの z-index が10倍高いため、上に乗って隠れてしまう。
 *
 * チャットボットは画面下端から 72px（20px + 高さ52px）を占めるので、
 * ページトップボタンをその上へ逃がして、両方を使える状態にする。
 *
 * ※ このファイルはトップページでのみ読み込まれる。
 *    チャットボットもトップページのみのため、他ページには影響しない。
 * ========================================================== */
.page_top_btn {
	bottom: 84px;
}