/* ==========================================================================
   法人・管理会社・物件オーナー向けのページ（assets/css/business/）— Layout：本文の基本・l-header-business・l-footer-business
   - /business/・/business/contact/ だけで読み込む（inc/helpers.php の truss_sites()['business']。コーポレートの c-button・c-icon・c-faq-item も借りる）
   - 文字はコーポレートと同じ（Barlow Condensed＋Zen Kaku Gothic New）。PC は Figma 09 Trial（1440）。SP は Figma の SP ができてから合わせる（いまは崩れない程度の仮）
   ========================================================================== */

:root {
	--header-height: 88px; /* ページ内リンクの止まる位置（foundation の scroll-padding-top） */
}

body {
	font: var(--text-body);
	letter-spacing: var(--ls-body);
	color: var(--color-text-primary);
	background: var(--color-bg-canvas);
}

.l-main-business {
	display: block;
}

/* コーポレートの c-button（借りている）：法人ページは文が長いので、1行に収めて幅を広げる（Figma は幅 320 で1行） */
.is-site-business .c-button__label {
	white-space: nowrap;
}

.is-site-business .c-button--l {
	width: auto;
	min-width: 320px;
}

@media (max-width: 767px) {
	.is-site-business .c-button__label {
		white-space: normal;
	}

	.is-site-business .c-button--l {
		width: 100%;
		min-width: 0;
	}
}

/* ==========================================================================
   l-header-business（Figma 342:766）：深い濃紺・高さ 88・画面の上に固定
   ========================================================================== */
.l-header-business {
	--focus-color: var(--neutral-0);
	position: sticky;
	top: var(--admin-bar-offset, 0px); /* ログイン中は管理バーの下（common/foundation.css） */
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-lg);
	height: 88px;
	padding-inline: var(--space-2xl);
	color: var(--color-text-on-brand);
	background: var(--color-bg-inverse-deep);
}

.l-header-business a {
	color: inherit;
	text-decoration: none;
}

.l-header-business__brand {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: var(--space-md);
}

.l-header-business__logo {
	display: block;
}

.l-header-business__logo img {
	width: 112px;
	height: 32px;
	object-fit: contain;
}

.l-header-business__divider,
.l-footer-business__divider {
	width: 1px;
	height: 24px;
	background: var(--color-border-on-inverse-strong);
}

.l-header-business__label {
	font: var(--text-label-m);
	letter-spacing: var(--ls-label-m);
	white-space: nowrap;
}

.l-header-business__nav-list {
	display: flex;
	gap: var(--space-lg);
}

.l-header-business__nav-item {
	display: block;
	padding-block: var(--space-sm);
	font: var(--text-label-m);
	letter-spacing: var(--ls-label-m);
	white-space: nowrap;
}

.l-header-business__contact {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: var(--space-lg);
}

.l-header-business__tel {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
}

.l-header-business__tel-number {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	font: var(--text-en-tel);
	letter-spacing: var(--ls-en-tel);
	white-space: nowrap;
}

.l-header-business__tel-icon {
	flex-shrink: 0;
}

.l-header-business__tel-hours {
	font: var(--text-caption);
	letter-spacing: var(--ls-caption);
	color: var(--color-text-on-brand-muted);
	white-space: nowrap;
}

.l-header-business__cta {
	flex-shrink: 0;
}

@media (hover: hover) {
	.l-header-business__nav-item:hover,
	.l-header-business__tel:hover .l-header-business__tel-text {
		text-decoration: underline;
		text-underline-offset: 0.25em;
	}
}

/* ナビが入らない幅（1399px 以下）では、目次を出さない（ページの中の見出しから読める）。1023px 以下は「法人・管理会社の方へ」の表記も外す */
@media (max-width: 1399px) {
	.l-header-business__nav {
		display: none;
	}
}

@media (max-width: 1023px) {
	.l-header-business__divider,
	.l-header-business__label {
		display: none;
	}
}

/* ==========================================================================
   l-footer-business（Figma 342:796）：深い濃紺
   ========================================================================== */
.l-footer-business {
	--focus-color: var(--neutral-0);
	color: var(--color-text-on-brand);
	background: var(--color-bg-inverse-deep);
}

.l-footer-business a {
	color: inherit;
	text-decoration: none;
}

.l-footer-business__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xl);
	max-width: calc(1200px + var(--container-gutter, 40px) * 2);
	margin-inline: auto;
	padding: var(--space-4xl) var(--container-gutter, 40px) var(--space-2xl);
}

.l-footer-business__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md) var(--space-2xl);
	padding-bottom: var(--space-2xl);
	border-bottom: 1px solid var(--color-border-on-inverse-strong);
}

.l-footer-business__brand {
	display: flex;
	align-items: center;
	gap: var(--space-md);
}

.l-footer-business__logo {
	flex-shrink: 0;
}

.l-footer-business__logo img {
	width: 112px;
	height: 32px;
	object-fit: contain;
}

.l-footer-business__label {
	font: var(--text-label-m);
	letter-spacing: var(--ls-label-m);
}

.l-footer-business__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--space-2xl);
}

.l-footer-business__link {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	min-height: 44px;
	padding-block: var(--space-sm);
	font: var(--text-label-l);
	letter-spacing: var(--ls-label-l);
}

.l-footer-business__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-lg) var(--space-2xl);
}

.l-footer-business__company {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.l-footer-business__name {
	font: var(--text-h5);
	letter-spacing: var(--ls-h5);
}

.l-footer-business__address {
	font: var(--text-body-s);
	letter-spacing: var(--ls-body-s);
	color: var(--color-text-on-brand-muted);
}

.l-footer-business__license {
	font: var(--text-caption);
	letter-spacing: var(--ls-caption);
	color: var(--color-text-on-brand-muted);
}

.l-footer-business__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--space-xl);
}

.l-footer-business__privacy {
	display: flex;
	align-items: center;
	min-height: 44px;
	font: var(--text-label-s);
	letter-spacing: var(--ls-label-s);
}

.l-footer-business__copyright {
	font: var(--text-en-caption);
	letter-spacing: var(--ls-en-caption);
	color: var(--color-text-on-brand-muted);
}

.l-footer-business__copyright small {
	font-size: inherit;
}

@media (hover: hover) {
	.l-footer-business__link:hover,
	.l-footer-business__privacy:hover,
	.l-footer-business__tel:hover {
		text-decoration: underline;
		text-underline-offset: 0.25em;
	}
}

/* SP だけの部品（電話・メニューのボタン）は PC では出さない */
.l-header-business__sp-button {
	display: none;
}

/* ==========================================================================
   l-menu-business-sp（Figma 360:555）：SP の全画面メニュー。深い濃紺
   ========================================================================== */
.l-menu-business-sp {
	--focus-color: var(--neutral-0);
	position: fixed;
	inset: 0;
	z-index: 200; /* ヘッダー（100）・案内バナーより上 */
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	padding-bottom: var(--space-2xl);
	color: var(--color-text-on-brand);
	background: var(--color-bg-inverse-deep);
	overscroll-behavior: contain;
}

.l-menu-business-sp a {
	color: inherit;
	text-decoration: none;
}

.l-menu-business-sp__head {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: var(--space-xs);
	height: 64px;
	padding: 0 12px 0 20px; /* Figma の値 */
}

.l-menu-business-sp__logo img {
	width: 98px;
	height: 28px;
	object-fit: contain;
}

.l-menu-business-sp__divider {
	width: 1px;
	height: 20px;
	background: var(--color-border-on-inverse-strong);
}

.l-menu-business-sp__label {
	font: var(--text-label-m);
	letter-spacing: var(--ls-label-m);
	white-space: nowrap;
}

.l-menu-business-sp__close,
.l-header-business__sp-button {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 56px;
	height: 52px;
	padding: 0;
	font: var(--text-body-s);
	letter-spacing: var(--ls-body-s);
	line-height: 1.5;
	color: var(--color-text-on-brand);
	white-space: nowrap;
	background: none;
	border: 0;
}

.l-menu-business-sp__close {
	display: flex;
	margin-left: auto;
}

.l-menu-business-sp__body {
	display: flex;
	flex-direction: column;
	gap: 28px; /* Figma の値 */
	padding: var(--space-xs) 20px 0;
}

.l-menu-business-sp__item {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	padding-block: var(--space-md);
	font: var(--text-h4);
	letter-spacing: var(--ls-h4);
	border-bottom: 1px solid var(--color-border-on-inverse-strong);
}

.l-menu-business-sp__item svg {
	flex-shrink: 0;
	margin-left: auto;
}

.l-menu-business-sp__tel {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.l-menu-business-sp__tel-label,
.l-menu-business-sp__tel-hours {
	font: var(--text-body-s);
	letter-spacing: var(--ls-body-s);
	color: var(--color-text-on-brand-muted);
}

.l-menu-business-sp__tel-number {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	font: var(--text-en-h3);
	letter-spacing: var(--ls-en-h3);
}

.l-menu-business-sp__site {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	font: var(--text-label-l);
	letter-spacing: var(--ls-label-l);
}

/* ---------- SP（767px 以下。Figma l-header-business-sp 360:543・l-footer-business-sp 360:609） ---------- */
@media (max-width: 767px) {
	:root {
		--header-height: 64px; /* ページ内リンクの止まる位置（scroll-padding-top） */
	}

	.l-header-business {
		gap: var(--space-2xs);
		height: 64px;
		padding: 0 12px 0 20px; /* Figma の値 */
	}

	.l-header-business__logo img {
		width: 98px;
		height: 28px;
	}

	.l-header-business__divider,
	.l-header-business__label,
	.l-header-business__tel,
	.l-header-business__cta {
		display: none;
	}

	.l-header-business__contact {
		gap: var(--space-2xs);
	}

	.l-header-business__sp-button {
		display: flex;
	}

	.l-footer-business__inner {
		--container-gutter: 20px;
		gap: var(--space-xl);
		padding-top: var(--space-3xl);
	}

	.l-footer-business__top {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-md);
		padding-bottom: var(--space-xl);
	}

	.l-footer-business__links {
		flex-direction: column;
	}

	.l-footer-business__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* 全画面メニューは SP だけ（PC の幅に戻したときは閉じた見た目に） */
@media (min-width: 768px) {
	.l-menu-business-sp {
		display: none !important;
	}
}