/* ==========================================================================
   c-business-banner（法人ページへの案内バナー。Figma 352:1084・注記 353:1266）— template-parts/business/banner.php
   - 塗装・防水とコーポレートのページだけで読み込む（inc/business.php の truss_business_banner_enabled()）
   - PC：画面の右下（右 24・下 24）に固定。濃紺 color/bg/inverse・角4・影 Shadow/Float・幅 360。赤は使わない
   - SP（Figma Size=SP 360:631・注記 365:890）：画面の下に 375×44 の濃紺の帯（1行「法人・管理会社の方へ」＋矢印＋×）。
     塗装・防水は固定の問い合わせバー（76px）のすぐ上、コーポレートは画面の下（＋ env(safe-area-inset-bottom)）
   - 全画面メニューを開いているあいだは出さない
   - 出ているあいだは <html> に has-business-banner。フッターの下に、バナー・帯の高さぶんの余白（--business-banner-space。JS が入れる）
   - 文字は Zen Kaku Gothic New（塗装・防水のページは、使う字だけを inc/business.php が読み込む）
   ========================================================================== */

.c-business-banner {
	--focus-color: var(--neutral-0);
	position: fixed;
	right: var(--space-lg);
	bottom: var(--space-lg);
	z-index: 100; /* ヘッダーと同じ高さ（全画面メニューより下） */
	display: flex;
	align-items: flex-start;
	width: 360px;
	max-width: calc(100% - var(--space-lg) * 2);
	overflow: hidden;
	font-family: var(--font-ja);
	color: var(--color-text-on-brand);
	background: var(--color-bg-inverse);
	border-radius: var(--radius-sm);
	box-shadow: 0 16px 40px rgb(20 38 64 / 14%); /* Figma Shadow/Float */
}

.c-business-banner__link {
	display: flex;
	flex: 1;
	align-items: stretch;
	gap: var(--space-md);
	min-width: 0;
	color: inherit;
	text-decoration: none;
}

.c-business-banner__photo {
	display: block;
	flex-shrink: 0;
	width: 96px;
}

.c-business-banner__photo picture,
.c-business-banner__img {
	width: 100%;
	height: 100%;
}

.c-business-banner__img {
	object-fit: cover;
	object-position: bottom;
}

.c-business-banner__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px; /* Figma の値 */
	min-width: 0;
	padding-block: var(--space-md);
}

.c-business-banner__title {
	font: var(--text-label-l);
	letter-spacing: var(--ls-label-l);
}

.c-business-banner__text {
	font: var(--text-caption);
	letter-spacing: var(--ls-caption);
	color: var(--color-text-on-brand-muted);
}

.c-business-banner__more,
.c-business-banner__sp {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	font: var(--text-label-m);
	letter-spacing: var(--ls-label-m);
}

.c-business-banner__more {
	padding-top: var(--space-2xs);
}

.c-business-banner__sp {
	display: none;
}

.c-business-banner__close {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--color-text-on-brand);
	background: none;
	border: 0;
}

.c-business-banner__close-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: var(--color-bg-inverse-raised);
	border-radius: var(--radius-full);
	transition: background-color 0.2s;
}

/* 枠の中で切れないように、フォーカスの線は内側に */
.c-business-banner__link:focus-visible,
.c-business-banner__close:focus-visible {
	outline-offset: -3px;
}

@media (hover: hover) {
	.c-business-banner__link:hover :is(.c-business-banner__more, .c-business-banner__sp) {
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}

	.c-business-banner__close:hover .c-business-banner__close-icon {
		background: var(--color-border-on-inverse-strong);
	}
}

/* 全画面メニューを開いているあいだは出さない */
.is-menu-open .c-business-banner {
	display: none;
}

/* フッターの最後の文字を隠さないように、出ているあいだはフッターの下をあける（フッターと同じ色のまま） */
.has-business-banner :is(.l-footer, .l-footer-paint)::after {
	display: block;
	height: var(--business-banner-space, 0px);
	content: "";
}

/* ---------- SP（Figma c-business-banner Size=SP 360:631） ---------- */
@media (max-width: 767px) {
	.c-business-banner {
		right: 0;
		bottom: 0;
		left: 0;
		align-items: center;
		width: auto;
		max-width: none;
		padding-bottom: env(safe-area-inset-bottom, 0px);
		border-radius: 0;
		box-shadow: none;
	}

	/* 塗装・防水は、画面の下の固定の問い合わせバー（76px。下の safe-area を含む）のすぐ上 */
	body:has(> .l-fixbar-sp--paint) .c-business-banner {
		bottom: calc(76px + env(safe-area-inset-bottom, 0px));
		padding-bottom: 0;
	}

	.c-business-banner__link {
		align-items: center;
		align-self: stretch;
		min-height: 44px;
		padding-left: 20px;
	}

	.c-business-banner__photo,
	.c-business-banner__body {
		display: none;
	}

	.c-business-banner__sp {
		display: inline-flex;
	}

	.c-business-banner__close-icon {
		width: 24px;
		height: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.c-business-banner__close-icon {
		transition: none;
	}
}