/* ==========================================================================
   法人・管理会社・物件オーナーの方へ（/business/。Figma 09 Trial 342:764）— page-business.php・template-parts/business/*.php
   - 見た目は「濃紺の色面で重厚に」：濃紺の面（color/bg/inverse・inverse-deep）と、白・淡いグレーを切り替える。
     TRUSS ブルーは差し色（試し塗り・印・工程表の棒・番号・リンク）、赤は申し込みのボタンだけ。カードは使わず、表・罫線・見本の書類で見せる
   - PC は 1440 の Figma の値。1199px 以下は段を減らす（仮）。SP（767px 以下）は Figma の SP ができてから合わせる（いまは崩れない程度の仮）
   ========================================================================== */

.p-business__section {
	padding-block: var(--space-6xl);
	background: var(--color-bg-canvas);
}

/* 濃紺の面（資産価値・入居者への案内・修繕計画・お問い合わせの面） */
.p-business__section--inverse {
	--focus-color: var(--neutral-0);
	color: var(--color-text-on-brand);
	background: var(--color-bg-inverse);
}

.p-business__target,
.p-business__survey,
.p-business__report,
.p-business__faq {
	background: var(--color-bg-subtle);
}

.p-business__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-4xl);
}

/* ---------- 見出し（左に h2・右にリード） ---------- */
.p-business__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-2xl);
}

.p-business__head .p-business__title {
	flex: 0 1 540px;
}

.p-business__head .p-business__lead {
	flex: 0 1 600px;
}

.p-business__title {
	font: var(--text-h2);
	letter-spacing: var(--ls-h2);
	color: var(--color-text-navy);
}

.p-business__subtitle {
	font: var(--text-h3);
	letter-spacing: var(--ls-h3);
	color: var(--color-text-navy);
}

.p-business__lead {
	font: var(--text-body);
	letter-spacing: var(--ls-body);
	color: var(--color-text-secondary);
}

.p-business__note {
	font: var(--text-caption);
	letter-spacing: var(--ls-caption);
	color: var(--color-text-tertiary);
}

.p-business__section--inverse :is(.p-business__title, .p-business__subtitle) {
	color: var(--color-text-on-brand);
}

.p-business__section--inverse :is(.p-business__lead, .p-business__note) {
	color: var(--color-text-on-brand-muted);
}

/* ---------- 札（宅地建物取引士 在籍など） ---------- */
.p-business__tag {
	align-self: flex-start;
	padding: var(--space-2xs) var(--space-xs);
	font: var(--text-label-s);
	letter-spacing: var(--ls-label-s);
	color: var(--color-text-on-brand);
	white-space: nowrap;
	background: var(--color-bg-inverse);
	border-radius: var(--radius-sm);
}

/* ---------- パンくず（濃紺の面の上） ---------- */
.p-business__breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2xs) var(--space-xs);
	font: var(--text-label-s);
	letter-spacing: var(--ls-label-s);
	color: var(--color-text-on-brand-muted);
}

.p-business__breadcrumb-item {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
}

.p-business__breadcrumb-link {
	color: inherit;
	text-decoration: none;
}

.p-business__breadcrumb-current {
	color: var(--color-text-on-brand);
}

@media (hover: hover) {
	.p-business__breadcrumb-link:hover {
		color: var(--color-text-on-brand);
		text-decoration: underline;
		text-underline-offset: 0.25em;
	}
}

/* ==========================================================================
   2 ファーストビュー
   ========================================================================== */
.p-business__hero {
	--focus-color: var(--neutral-0);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 640px);
	gap: var(--space-lg); /* 本文 656 と写真のあいだ（Figma の値） */
	min-height: 760px;
	padding-left: max(var(--container-gutter, 40px), calc((100% - 1200px) / 2));
	color: var(--color-text-on-brand);
	background: var(--color-bg-inverse);
}

.p-business__hero-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3xl);
	padding-block: 88px var(--space-4xl); /* Figma の値（上 88） */
}

.p-business__hero-text {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
}

.p-business__hero-title {
	font: var(--text-catch);
	letter-spacing: var(--ls-catch);
}

.p-business__hero-lead {
	max-width: 600px;
	font: var(--text-lead);
	letter-spacing: var(--ls-lead);
	color: var(--color-text-on-brand-muted);
}

.p-business__hero-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
}

.p-business__hero-photo {
	position: relative;
	margin: 0;
	overflow: hidden;
}

.p-business__hero-photo picture,
.p-business__hero-img {
	width: 100%;
	height: 100%;
}

.p-business__hero-img {
	object-fit: cover;
	object-position: bottom;
}

/* 試し塗り（今回施工する範囲）と、劣化箇所の印。写真の 640×760 に対する位置（Figma の値を % に） */
.p-business__hero-patch {
	position: absolute;
	top: 61.84%;
	left: 11.25%;
	width: 21.25%;
	aspect-ratio: 1;
	background: var(--color-bg-brand);
}

.p-business__hero-marker {
	position: absolute;
}

.p-business__hero-marker.is-1 {
	top: 59.47%;
	left: 8.13%;
}

.p-business__hero-marker.is-2 {
	top: 78.95%;
	left: 50%;
}

.p-business__hero-marker.is-3 {
	top: 38.42%;
	left: 59.38%;
}

.p-business__hero-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2xs) var(--space-sm);
	max-width: 100%;
	padding: var(--space-sm) var(--space-md);
	font: var(--text-caption);
	letter-spacing: var(--ls-caption);
	background: var(--color-bg-inverse-deep);
}

.p-business__hero-legend {
	display: flex;
	align-items: center;
	gap: 6px; /* Figma の値 */
	color: var(--color-text-on-brand-muted);
}

.p-business__hero-legend-swatch {
	width: 12px;
	height: 12px;
	background: var(--color-bg-brand);
}

/* ==========================================================================
   3 信頼の帯
   ========================================================================== */
.p-business__trust {
	color: var(--color-text-on-brand);
	background: var(--color-bg-inverse-deep);
}

.p-business__trust-list {
	display: flex;
	align-items: center;
	max-width: calc(1200px + var(--container-gutter, 40px) * 2);
	margin-inline: auto;
	padding: var(--space-2xl) var(--container-gutter, 40px);
}

.p-business__trust-item {
	position: relative;
	box-sizing: content-box; /* 区切りの左の余白を足しても、中身の幅はそろえる */
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: var(--space-xs);
	min-width: 0;
}

.p-business__trust-item + .p-business__trust-item {
	padding-left: var(--space-2xl);
}

.p-business__trust-item + .p-business__trust-item::before {
	position: absolute;
	top: 50%;
	left: 0;
	width: 1px;
	height: 80px;
	content: "";
	background: var(--color-border-on-inverse-strong);
	transform: translateY(-50%);
}

.p-business__trust-label {
	font: var(--text-label-m);
	letter-spacing: var(--ls-label-m);
	color: var(--color-text-on-brand-muted);
}

.p-business__trust-value {
	display: flex;
	align-items: flex-end;
	gap: var(--space-2xs);
}

.p-business__trust-number {
	font: var(--text-h1);
	letter-spacing: var(--ls-h1);
}

.p-business__trust-number.is-en {
	font: var(--text-en-number);
	letter-spacing: var(--ls-en-number);
}

.p-business__trust-unit {
	padding-bottom: 10px; /* Figma の値 */
	font: var(--text-h4);
	letter-spacing: var(--ls-h4);
}

.p-business__trust-number.is-en + .p-business__trust-unit {
	padding-bottom: var(--space-xs);
}

/* ==========================================================================
   4 窓口はひとつ（8つの段階）
   ========================================================================== */
.p-business__flow {
	display: flex;
}

.p-business__flow-step {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	min-width: 0;
}

.p-business__flow-no {
	font: var(--text-en-h3);
	letter-spacing: var(--ls-en-h3);
	color: var(--color-text-brand);
}

.p-business__flow-line {
	display: flex;
	align-items: center;
	margin-block: var(--space-md);
}

.p-business__flow-line::before {
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	content: "";
	background: var(--color-bg-inverse);
}

.p-business__flow-line::after {
	flex: 1;
	height: 2px;
	content: "";
	background: var(--color-bg-inverse);
}

.p-business__flow-name {
	padding-right: var(--space-md);
	font: var(--text-h5);
	letter-spacing: var(--ls-h5);
	color: var(--color-text-navy);
}

.p-business__flow-text {
	margin-top: var(--space-2xs);
	padding-right: var(--space-md);
	font: var(--text-body-s);
	letter-spacing: var(--ls-body-s);
	color: var(--color-text-secondary);
}

.p-business__about-note {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-2xl);
	padding-top: var(--space-2xl);
	border-top: 1px solid var(--color-border-default);
}

.p-business__about-catch {
	flex: 0 1 540px;
	font: var(--text-h4);
	letter-spacing: var(--ls-h4);
	color: var(--color-text-navy);
}

.p-business__about-text {
	flex: 0 1 600px;
	font: var(--text-body);
	letter-spacing: var(--ls-body);
	color: var(--color-text-secondary);
}

/* ==========================================================================
   5 対応する建物と工事
   ========================================================================== */
.p-business__target-row {
	display: flex;
	gap: var(--space-4xl);
}

.p-business__target-photo {
	flex: 0 0 480px;
	min-height: 480px;
}

.p-business__target-photo picture,
.p-business__target-img {
	width: 100%;
	height: 100%;
}

.p-business__target-img {
	object-fit: cover;
	object-position: bottom;
}

.p-business__target-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-2xl);
	min-width: 0;
}

.p-business__target-lists {
	display: flex;
	gap: var(--space-2xl);
}

.p-business__target-col {
	flex: 1;
	min-width: 0;
}

.p-business__target-head {
	padding-bottom: var(--space-sm);
	font: var(--text-h4);
	letter-spacing: var(--ls-h4);
	color: var(--color-text-navy);
	border-bottom: 2px solid var(--color-bg-inverse);
}

.p-business__target-item {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding-block: var(--space-sm);
	font: var(--text-body-bold);
	letter-spacing: var(--ls-body-bold);
	color: var(--color-text-primary);
	border-bottom: 1px solid var(--color-border-default);
}

.p-business__target-item::before {
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	content: "";
	background: var(--color-bg-brand);
}

/* ==========================================================================
   6 TRUSSができること（8項目の表）
   ========================================================================== */
.p-business__strength-table {
	border-top: 2px solid var(--color-bg-inverse);
}

.p-business__strength-row {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2xl);
	padding-block: 28px; /* Figma の値 */
	border-bottom: 1px solid var(--color-border-default);
}

.p-business__strength-name {
	display: flex;
	flex: 0 0 300px;
	flex-direction: column;
	gap: var(--space-xs);
	min-width: 0;
}

.p-business__strength-title {
	font: var(--text-h4);
	letter-spacing: var(--ls-h4);
	color: var(--color-text-navy);
}

.p-business__strength-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-md);
	min-width: 0;
}

.p-business__strength-text {
	font: var(--text-body);
	letter-spacing: var(--ls-body);
	color: var(--color-text-secondary);
}

.p-business__estimate-items {
	display: flex;
	flex-wrap: wrap;
	border: 1px solid var(--color-border-strong);
}

.p-business__estimate-item {
	padding: var(--space-xs) var(--space-sm);
	font: var(--text-label-s);
	letter-spacing: var(--ls-label-s);
	color: var(--color-text-primary);
	white-space: nowrap;
}

.p-business__estimate-item + .p-business__estimate-item {
	border-left: 1px solid var(--color-border-strong);
}

.p-business__strength-link-wrap {
	display: flex;
	flex: 0 0 120px;
	justify-content: flex-end;
}

.p-business__strength-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	font: var(--text-label-m);
	letter-spacing: var(--ls-label-m);
	color: var(--color-text-brand);
	white-space: nowrap;
	text-decoration: none;
}

@media (hover: hover) {
	.p-business__strength-link:hover {
		text-decoration: underline;
		text-underline-offset: 0.25em;
	}
}

/* ==========================================================================
   7 資産価値の視点（#asset）
   ========================================================================== */
.p-business__asset-diagram {
	display: flex;
	align-items: center;
	gap: var(--space-lg);
}

.p-business__asset-block {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: var(--space-sm);
	align-self: stretch;
	min-width: 0;
	padding: var(--space-xl);
}

.p-business__asset-label {
	font: var(--text-label-m);
	letter-spacing: var(--ls-label-m);
}

.p-business__asset-title {
	font: var(--text-h3);
	letter-spacing: var(--ls-h3);
}

.p-business__asset-text {
	font: var(--text-body-s);
	letter-spacing: var(--ls-body-s);
}

.p-business__asset-block.is-line {
	border: 1px solid var(--color-border-on-inverse-strong);
}

.p-business__asset-block.is-line .p-business__asset-label {
	color: var(--color-text-on-brand-muted);
}

.p-business__asset-block.is-brand {
	background: var(--color-bg-brand);
}

.p-business__asset-block.is-light {
	color: var(--color-text-primary);
	background: var(--color-bg-canvas);
}

.p-business__asset-block.is-light .p-business__asset-label {
	color: var(--color-text-secondary);
}

.p-business__asset-block.is-light .p-business__asset-title {
	color: var(--color-text-navy);
}

.p-business__asset-op {
	flex-shrink: 0;
	font: var(--text-h2);
	letter-spacing: var(--ls-h2);
}

.p-business__asset-points {
	display: flex;
	gap: var(--space-2xl);
}

.p-business__asset-point {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: var(--space-sm);
	min-width: 0;
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-border-on-inverse-strong);
}

.p-business__asset-point-title {
	font: var(--text-h4);
	letter-spacing: var(--ls-h4);
}

.p-business__asset-point-text {
	font: var(--text-body);
	letter-spacing: var(--ls-body);
	color: var(--color-text-on-brand-muted);
}

/* ==========================================================================
   8 現地調査と調査報告書（#survey）
   ========================================================================== */
.p-business__survey-row {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4xl);
}

.p-business__survey-body {
	display: flex;
	flex: 0 1 576px;
	flex-direction: column;
	gap: var(--space-xl);
	min-width: 0;
}

.p-business__checks-head {
	padding-bottom: var(--space-sm);
	font: var(--text-h5);
	letter-spacing: var(--ls-h5);
	color: var(--color-text-navy);
	border-bottom: 2px solid var(--color-bg-inverse);
}

.p-business__checks-list--top {
	border-top: 1px solid var(--color-border-default);
}

.p-business__check {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding-block: 14px; /* Figma の値 */
	font: var(--text-body);
	letter-spacing: var(--ls-body);
	color: var(--color-text-primary);
	border-bottom: 1px solid var(--color-border-default);
}

.p-business__check-icon {
	flex-shrink: 0;
	color: var(--color-text-brand);
}

/* 見本の書類（調査報告書・作業報告のメール・完工報告書）：白い紙と影 */
.p-business__doc,
.p-business__mail,
.p-business__completion {
	margin: 0;
	background: var(--color-bg-canvas);
	border-radius: var(--radius-sm);
	box-shadow: 0 8px 24px rgb(20 38 64 / 8%); /* Figma Shadow/Card */
}

.p-business__doc {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-lg);
	min-width: 0;
	padding: var(--space-2xl);
}

.p-business__doc-head {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	padding-bottom: var(--space-md);
	border-bottom: 2px solid var(--color-bg-inverse);
}

.p-business__doc-title-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2xs) var(--space-md);
}

.p-business__doc-title {
	font: var(--text-h4);
	letter-spacing: var(--ls-h4);
	color: var(--color-text-navy);
}

.p-business__doc-date {
	font: var(--text-caption);
	letter-spacing: var(--ls-caption);
	color: var(--color-text-secondary);
}

.p-business__doc-meta {
	font: var(--text-body-s);
	letter-spacing: var(--ls-body-s);
	color: var(--color-text-secondary);
}

.p-business__doc-item {
	display: flex;
	gap: 20px; /* Figma の値 */
	padding-bottom: var(--space-lg);
}

.p-business__doc-item:not(:nth-last-child(2)) {
	border-bottom: 1px solid var(--color-border-default);
}

.p-business__doc-photo {
	flex: 0 0 112px;
	height: 140px;
}

.p-business__doc-photo picture,
.p-business__doc-img {
	width: 100%;
	height: 100%;
}

.p-business__doc-img {
	object-fit: cover;
}

.p-business__doc-item-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px; /* Figma の値 */
	min-width: 0;
}

.p-business__doc-item-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2xs) var(--space-sm);
}

.p-business__doc-item-title {
	font: var(--text-h5);
	letter-spacing: var(--ls-h5);
	color: var(--color-text-navy);
}

.p-business__urgency {
	padding: var(--space-2xs) 10px; /* 10 は Figma の値 */
	font: var(--text-label-s);
	letter-spacing: var(--ls-label-s);
	white-space: nowrap;
	border-radius: var(--radius-sm);
}

.p-business__urgency--high {
	color: var(--color-text-on-brand);
	background: var(--color-bg-inverse);
}

.p-business__urgency--mid {
	color: var(--color-text-brand);
	box-shadow: inset 0 0 0 1.5px var(--color-border-brand);
}

.p-business__urgency--low {
	color: var(--color-text-secondary);
	box-shadow: inset 0 0 0 1px var(--color-border-input);
}

.p-business__doc-def {
	display: flex;
	gap: var(--space-sm);
}

.p-business__doc-def dt {
	flex: 0 0 32px;
	font: var(--text-label-s);
	letter-spacing: var(--ls-label-s);
	color: var(--color-text-tertiary);
}

.p-business__doc-def dd {
	flex: 1;
	min-width: 0;
	font: var(--text-body-s);
	letter-spacing: var(--ls-body-s);
	color: var(--color-text-primary);
}

.p-business__doc-defs {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.p-business__doc-summary {
	display: flex;
	gap: var(--space-md);
	padding: var(--space-md) 20px;
	background: var(--color-bg-subtle);
}

.p-business__doc-count {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: var(--space-2xs);
	min-width: 0;
}

.p-business__doc-count dt {
	font: var(--text-label-s);
	letter-spacing: var(--ls-label-s);
	color: var(--color-text-secondary);
}

.p-business__doc-count dd {
	display: flex;
	align-items: flex-end;
	gap: var(--space-2xs);
}

.p-business__doc-count-number {
	font: var(--text-en-h3);
	letter-spacing: var(--ls-en-h3);
	color: var(--color-text-navy);
}

.p-business__doc-count-unit {
	padding-bottom: var(--space-2xs);
	font: var(--text-label-s);
	letter-spacing: var(--ls-label-s);
	color: var(--color-text-secondary);
}

/* ==========================================================================
   9 工程表と施工中の報告（#schedule）
   ========================================================================== */
.p-business__gantt {
	background: var(--color-bg-canvas);
	border: 1px solid var(--color-border-strong);
}

.p-business__gantt-caption {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm) var(--space-lg);
	padding: 20px var(--space-lg); /* 20 は Figma の値 */
	background: var(--color-bg-subtle);
	border-bottom: 1px solid var(--color-border-strong);
}

.p-business__gantt-title {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
}

.p-business__gantt-name {
	font: var(--text-h5);
	letter-spacing: var(--ls-h5);
	color: var(--color-text-navy);
}

.p-business__gantt-sub {
	font: var(--text-body-s);
	letter-spacing: var(--ls-body-s);
	color: var(--color-text-secondary);
}

.p-business__gantt-legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs) var(--space-lg);
}

.p-business__gantt-legend-item {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	font: var(--text-label-s);
	letter-spacing: var(--ls-label-s);
	color: var(--color-text-primary);
}

.p-business__gantt-legend-bar {
	width: 28px;
	height: 12px;
	background: var(--color-bg-brand);
}

.p-business__impact {
	display: inline-block;
	padding: 2px var(--space-xs);
	font: var(--text-label-s);
	letter-spacing: var(--ls-label-s);
	color: var(--color-text-on-brand);
	white-space: nowrap;
	background: var(--color-bg-inverse);
	border-radius: var(--radius-sm);
}

.p-business__gantt-scroll {
	overflow-x: auto;
}

.p-business__gantt-table {
	width: 100%;
	min-width: 900px;
	table-layout: fixed;
}

.p-business__gantt-th {
	width: 260px;
	height: 44px;
	padding: 0 var(--space-md);
	font: var(--text-label-s);
	letter-spacing: var(--ls-label-s);
	color: var(--color-text-secondary);
	text-align: left;
	border-bottom: 1px solid var(--color-border-strong);
}

.p-business__gantt-th + .p-business__gantt-th {
	width: 200px;
}

.p-business__gantt-th--weeks.p-business__gantt-th--weeks {
	width: auto;
	padding: 0;
}

.p-business__gantt-weeks {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	height: 44px;
}

.p-business__gantt-week {
	display: flex;
	align-items: center;
	padding: 0 var(--space-md);
	border-left: 1px solid var(--color-border-default);
}

.p-business__gantt-row + .p-business__gantt-row {
	border-top: 1px solid var(--color-border-default);
}

.p-business__gantt-step {
	height: 56px;
	padding: 0 var(--space-md);
	font: var(--text-label-l);
	letter-spacing: var(--ls-label-l);
	color: var(--color-text-primary);
	text-align: left;
}

.p-business__gantt-impact {
	padding: 0 var(--space-md);
}


/* 週の区切りの線（5週を 20% ずつ）と、作業の期間の棒（--from・--to は 0〜1） */
.p-business__gantt-track {
	position: relative;
	padding: 0;
	background: linear-gradient(to right, var(--color-border-default) 1px, transparent 1px) 0 0 / 20% 100% repeat-x;
}

.p-business__gantt-bar {
	position: absolute;
	top: 20px;
	left: calc(var(--from) * 100%);
	width: calc((var(--to) - var(--from)) * 100%);
	height: 16px;
	background: var(--color-bg-brand);
}

.p-business__daily {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4xl);
}

.p-business__daily-body {
	display: flex;
	flex: 0 1 520px;
	flex-direction: column;
	gap: var(--space-lg);
	min-width: 0;
}

.p-business__mail {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 20px; /* Figma の値 */
	min-width: 0;
	padding: var(--space-xl);
	border: 1px solid var(--color-border-default);
}

.p-business__mail-head {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-bottom: var(--space-md);
	border-bottom: 1px solid var(--color-border-default);
}

.p-business__mail-subject {
	font: var(--text-h5);
	letter-spacing: var(--ls-h5);
	color: var(--color-text-navy);
}

.p-business__mail-from {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	font: var(--text-caption);
	letter-spacing: var(--ls-caption);
	color: var(--color-text-secondary);
}

.p-business__mail-icon {
	flex-shrink: 0;
}

.p-business__mail-photos {
	display: flex;
	gap: var(--space-sm);
}

.p-business__mail-photos picture {
	flex: 1 1 0;
	min-width: 0;
}

.p-business__mail-photo {
	width: 100%;
	height: 120px;
	object-fit: cover;
}

.p-business__mail-defs {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.p-business__mail-def {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
}

.p-business__mail-def dt {
	font: var(--text-label-s);
	letter-spacing: var(--ls-label-s);
	color: var(--color-text-tertiary);
}

.p-business__mail-def dd {
	font: var(--text-body-s);
	letter-spacing: var(--ls-body-s);
	color: var(--color-text-primary);
}

/* ==========================================================================
   10 入居者・テナントへの案内（#tenant）
   ========================================================================== */
.p-business__tenant-row {
	display: flex;
	align-items: flex-start;
	gap: var(--space-5xl);
}

.p-business__tenant-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-xl);
	min-width: 0;
}

.p-business__tenant-timeline {
	border-top: 1px solid var(--color-border-on-inverse-strong);
}

.p-business__tenant-step {
	display: flex;
	align-items: flex-start;
	gap: var(--space-lg);
	padding-block: 18px; /* Figma の値 */
	border-bottom: 1px solid var(--color-border-on-inverse-strong);
}

.p-business__tenant-when {
	flex: 0 0 180px;
	font: var(--text-label-l);
	letter-spacing: var(--ls-label-l);
}

.p-business__tenant-what {
	flex: 1;
	min-width: 0;
	font: var(--text-body);
	letter-spacing: var(--ls-body);
	color: var(--color-text-on-brand-muted);
}

.p-business__notice-wrap {
	display: flex;
	flex: 0 0 500px;
	flex-direction: column;
	gap: var(--space-sm);
	min-width: 0;
	margin: 0;
}

.p-business__notice-caption {
	font: var(--text-label-s);
	letter-spacing: var(--ls-label-s);
	color: var(--color-text-on-brand-muted);
}

.p-business__notice {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: var(--space-2xl);
	color: var(--color-text-primary);
	background: var(--color-bg-canvas);
	border-radius: var(--radius-sm);
}

.p-business__notice-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2xs) var(--space-md);
	color: var(--color-text-secondary);
}

.p-business__notice-to {
	font: var(--text-label-m);
	letter-spacing: var(--ls-label-m);
}

.p-business__notice-date {
	font: var(--text-caption);
	letter-spacing: var(--ls-caption);
}

.p-business__notice-title {
	padding-bottom: var(--space-sm);
	font: var(--text-h3);
	letter-spacing: var(--ls-h3);
	color: var(--color-text-navy);
	border-bottom: 2px solid var(--color-bg-inverse);
}

.p-business__notice-text,
.p-business__notice-list,
.p-business__notice-contact {
	font: var(--text-body-s);
	letter-spacing: var(--ls-body-s);
}

.p-business__notice-table {
	border-top: 1px solid var(--color-border-default);
}

.p-business__notice-row {
	display: flex;
	gap: var(--space-md);
	padding-block: 10px;
	border-bottom: 1px solid var(--color-border-default);
}

.p-business__notice-row dt {
	flex: 0 0 64px;
	font: var(--text-label-s);
	letter-spacing: var(--ls-label-s);
	color: var(--color-text-secondary);
}

.p-business__notice-row dd {
	flex: 1;
	min-width: 0;
	font: var(--text-body-s);
	letter-spacing: var(--ls-body-s);
}

.p-business__notice-requests {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.p-business__notice-requests-title {
	font: var(--text-h5);
	letter-spacing: var(--ls-h5);
	color: var(--color-text-navy);
}

.p-business__notice-list li {
	display: flex;
}

.p-business__notice-list li::before {
	flex-shrink: 0;
	content: "・";
}

.p-business__notice-list li + li {
	margin-top: 6px;
}

.p-business__notice-contact {
	padding: var(--space-md) 20px;
	background: var(--color-bg-subtle);
}

/* ==========================================================================
   11 完工報告書（#report）
   ========================================================================== */
.p-business__completion {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
	padding: var(--space-3xl);
}

.p-business__completion-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-xs) var(--space-lg);
	padding-bottom: var(--space-md);
	border-bottom: 2px solid var(--color-bg-inverse);
}

.p-business__completion-title {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
}

.p-business__completion-name {
	font: var(--text-h3);
	letter-spacing: var(--ls-h3);
	color: var(--color-text-navy);
}

.p-business__completion-sub {
	font: var(--text-body);
	letter-spacing: var(--ls-body);
	color: var(--color-text-secondary);
}

.p-business__completion-meta {
	font: var(--text-caption);
	letter-spacing: var(--ls-caption);
	color: var(--color-text-secondary);
}

.p-business__completion-steps {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--space-md);
}

.p-business__completion-step {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.p-business__completion-step picture,
.p-business__completion-photo,
.p-business__completion-empty {
	width: 100%;
	height: 200px;
}

.p-business__completion-photo {
	object-fit: cover;
}

.p-business__completion-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);
	padding: var(--space-xs);
	font: var(--text-caption);
	letter-spacing: var(--ls-caption);
	color: var(--color-text-tertiary);
	text-align: center;
	background: var(--color-bg-subtle);
	border: 1px solid var(--color-border-default);
}

.p-business__completion-label {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	font: var(--text-label-m);
	letter-spacing: var(--ls-label-m);
	color: var(--color-text-primary);
}

.p-business__completion-no {
	font: var(--text-en-label);
	letter-spacing: var(--ls-en-label);
	color: var(--color-text-brand);
}

.p-business__completion-date {
	font: var(--text-caption);
	letter-spacing: var(--ls-caption);
	color: var(--color-text-secondary);
}

.p-business__completion-spec {
	display: flex;
	border-top: 1px solid var(--color-border-default);
}

.p-business__completion-spec-item {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: var(--space-2xs);
	min-width: 0;
	padding-top: 20px;
}

.p-business__completion-spec-item + .p-business__completion-spec-item {
	padding-left: var(--space-lg);
	border-left: 1px solid var(--color-border-default);
}

.p-business__completion-spec dt {
	font: var(--text-label-s);
	letter-spacing: var(--ls-label-s);
	color: var(--color-text-tertiary);
}

.p-business__completion-spec dd {
	font: var(--text-body-bold);
	letter-spacing: var(--ls-body-bold);
	color: var(--color-text-primary);
}

/* ==========================================================================
   12 法人の施工事例
   ========================================================================== */
.p-business__works-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	padding-bottom: var(--space-2xl);
}

.p-business__works-filter-item {
	min-height: 44px;
	padding: var(--space-sm) 20px;
	font: var(--text-label-m);
	letter-spacing: var(--ls-label-m);
	color: var(--color-text-primary);
	background: var(--color-bg-canvas);
	border: 1px solid var(--color-border-input);
	border-radius: var(--radius-sm);
}

.p-business__works-filter-item.is-active {
	color: var(--color-text-on-brand);
	background: var(--color-bg-inverse);
	border-color: var(--color-bg-inverse);
}

@media (hover: hover) {
	.p-business__works-filter-item:not(.is-active):hover {
		border-color: var(--color-text-navy);
	}
}

.p-business__case {
	display: flex;
	align-items: flex-start;
	gap: 56px; /* Figma の値 */
	padding-block: var(--space-3xl);
	border-top: 1px solid var(--color-border-default);
}

.p-business__case-photos {
	display: flex;
	flex: 0 1 596px;
	gap: var(--space-2xs);
	min-width: 0;
}

.p-business__case-photo {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	aspect-ratio: 296 / 380;
	overflow: hidden;
}

.p-business__case-photo picture,
.p-business__case-img {
	width: 100%;
	height: 100%;
}

.p-business__case-img {
	object-fit: cover;
}

.p-business__case-label {
	position: absolute;
	top: 0;
	left: 0;
	padding: var(--space-2xs) 10px;
	font: var(--text-label-s);
	letter-spacing: var(--ls-label-s);
	color: var(--color-text-on-brand);
	background: var(--color-bg-inverse-deep);
}

.p-business__case-label.is-after {
	background: var(--color-bg-brand);
}

.p-business__case-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	min-width: 0;
}

.p-business__case-meta {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	font: var(--text-label-m);
	letter-spacing: var(--ls-label-m);
}

.p-business__case-type {
	color: var(--color-text-brand);
}

.p-business__case-area {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	color: var(--color-text-secondary);
}

.p-business__case-area::before {
	width: 1px;
	height: 14px;
	content: "";
	background: var(--color-border-strong);
}

.p-business__case-title {
	font: var(--text-h3);
	letter-spacing: var(--ls-h3);
	color: var(--color-text-navy);
}

.p-business__case-spec {
	align-self: stretch;
	border-top: 1px solid var(--color-border-default);
}

.p-business__case-spec-row {
	display: flex;
	gap: var(--space-md);
	padding-block: 10px;
	border-bottom: 1px solid var(--color-border-default);
}

.p-business__case-spec-row dt {
	flex: 0 0 96px;
	font: var(--text-label-s);
	letter-spacing: var(--ls-label-s);
	color: var(--color-text-secondary);
}

.p-business__case-spec-row dd {
	flex: 1;
	min-width: 0;
	font: var(--text-body-s);
	letter-spacing: var(--ls-body-s);
	color: var(--color-text-primary);
}

.p-business__case-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-block: 10px;
	font: var(--text-label-l);
	letter-spacing: var(--ls-label-l);
	color: var(--color-text-brand);
	text-decoration: none;
}

@media (hover: hover) {
	.p-business__case-link:hover {
		text-decoration: underline;
		text-underline-offset: 0.25em;
	}
}

.p-business__works-empty {
	padding-block: var(--space-3xl);
	font: var(--text-body);
	letter-spacing: var(--ls-body);
	color: var(--color-text-secondary);
	text-align: center;
	border-top: 1px solid var(--color-border-default);
}

.p-business__works-more {
	display: flex;
	justify-content: center;
	padding-top: var(--space-3xl);
	border-top: 1px solid var(--color-border-default);
}

/* ==========================================================================
   13 複数物件と年間の修繕計画（#plan）
   ========================================================================== */
.p-business__plan .p-business__inner {
	gap: var(--space-6xl);
}

.p-business__multi {
	display: flex;
	align-items: flex-start;
	gap: var(--space-5xl);
}

.p-business__multi-body {
	display: flex;
	flex: 0 1 500px;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-xl);
	min-width: 0;
}

.p-business__multi-cases {
	display: grid;
	flex: 1;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--space-2xl);
	min-width: 0;
}

.p-business__multi-case {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	padding-block: var(--space-lg) var(--space-xl);
	border-top: 1px solid var(--color-border-on-inverse-strong);
}

.p-business__multi-title {
	font: var(--text-h4);
	letter-spacing: var(--ls-h4);
}

.p-business__multi-text {
	font: var(--text-body);
	letter-spacing: var(--ls-body);
	color: var(--color-text-on-brand-muted);
}

.p-business__plan-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--space-4xl);
}

.p-business__plan-chart {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	margin: 0;
}

.p-business__plan-caption {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm) var(--space-lg);
}

.p-business__plan-chart-title {
	font: var(--text-h5);
	letter-spacing: var(--ls-h5);
}

.p-business__plan-legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs) var(--space-lg);
}

.p-business__plan-legend-item {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	font: var(--text-label-s);
	letter-spacing: var(--ls-label-s);
}

.p-business__plan-swatch {
	width: 16px;
	height: 16px;
}

.p-business__plan-swatch.is-now {
	background: var(--color-bg-canvas);
}

.p-business__plan-swatch.is-later {
	box-shadow: inset 0 0 0 1.5px var(--color-text-on-brand);
}

.p-business__plan-years {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-lg);
}

.p-business__plan-year {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	min-width: 0;
}

.p-business__plan-year-head {
	display: flex;
	align-items: flex-end;
	gap: 6px;
}

.p-business__plan-year-number {
	font: var(--text-en-h1);
	letter-spacing: var(--ls-en-h1);
}

.p-business__plan-year-unit {
	padding-bottom: var(--space-sm);
	font: var(--text-h4);
	letter-spacing: var(--ls-h4);
	color: var(--color-text-on-brand-muted);
}

.p-business__plan-line {
	display: flex;
	align-items: center;
}

.p-business__plan-line::before {
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	content: "";
	background: var(--color-border-on-inverse-strong);
}

.p-business__plan-line.is-current::before {
	background: var(--color-bg-canvas);
}

.p-business__plan-line::after {
	flex: 1;
	height: 2px;
	content: "";
	background: var(--color-border-on-inverse-strong);
}

.p-business__plan-item {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-xs);
	min-height: 208px;
	padding: var(--space-lg);
	border-radius: var(--radius-sm);
}

.p-business__plan-kind {
	font: var(--text-label-s);
	letter-spacing: var(--ls-label-s);
}

.p-business__plan-property {
	font: var(--text-label-m);
	letter-spacing: var(--ls-label-m);
}

.p-business__plan-work {
	font: var(--text-h3);
	letter-spacing: var(--ls-h3);
}

.p-business__plan-text {
	font: var(--text-body-s);
	letter-spacing: var(--ls-body-s);
}

.p-business__plan-item--now {
	color: var(--color-text-primary);
	background: var(--color-bg-canvas);
}

.p-business__plan-item--now .p-business__plan-kind {
	color: var(--color-text-brand);
}

.p-business__plan-item--now .p-business__plan-property {
	color: var(--color-text-secondary);
}

.p-business__plan-item--now .p-business__plan-work {
	color: var(--color-text-navy);
}

.p-business__plan-item--later {
	color: var(--color-text-on-brand-muted);
	box-shadow: inset 0 0 0 1.5px var(--color-text-on-brand);
}

.p-business__plan-item--later .p-business__plan-work {
	color: var(--color-text-on-brand);
}

/* ==========================================================================
   14 各種書類
   ========================================================================== */
.p-business__docs-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-top: 2px solid var(--color-bg-inverse);
}

.p-business__docs-item {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	padding: var(--space-lg);
	font: var(--text-h5);
	letter-spacing: var(--ls-h5);
	color: var(--color-text-navy);
	border-bottom: 1px solid var(--color-border-default);
}

.p-business__docs-item:nth-child(3n + 1) {
	padding-left: 0;
}

.p-business__docs-item:not(:nth-child(3n + 1)) {
	border-left: 1px solid var(--color-border-default);
}

.p-business__docs-icon {
	flex-shrink: 0;
	color: var(--color-text-brand);
}

.p-business__docs-name {
	min-width: 0;
	word-break: keep-all; /* 折り返すのは <wbr> の所だけ（「安全関連／書類」。docs.php） */
}

/* ==========================================================================
   15 よくある質問（#faq。c-faq-item はコーポレートの component-cards.css）
   ========================================================================== */
.p-business__faq-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

/* ==========================================================================
   16 お問い合わせの面
   ========================================================================== */
.p-business__contact-row {
	display: flex;
	align-items: center;
	gap: var(--space-4xl);
}

.p-business__contact-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-2xl);
	min-width: 0;
}

.p-business__contact-lead {
	font: var(--text-lead);
	letter-spacing: var(--ls-lead);
	color: var(--color-text-on-brand-muted);
}

.p-business__contact-ways {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--space-2xl) var(--space-3xl);
	padding-top: var(--space-2xl);
	border-top: 1px solid var(--color-border-on-inverse-strong);
}

.p-business__contact-tel {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.p-business__contact-tel-label {
	font: var(--text-label-m);
	letter-spacing: var(--ls-label-m);
	color: var(--color-text-on-brand-muted);
}

.p-business__contact-tel-number {
	display: flex;
	align-items: center;
	gap: 10px;
	font: var(--text-en-h2);
	letter-spacing: var(--ls-en-h2);
	color: var(--color-text-on-brand);
	white-space: nowrap;
	text-decoration: none;
}

.p-business__contact-tel-icon {
	flex-shrink: 0;
}

.p-business__contact-tel-hours,
.p-business__contact-note {
	font: var(--text-caption);
	letter-spacing: var(--ls-caption);
	color: var(--color-text-on-brand-muted);
}

.p-business__contact-buttons {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.p-business__contact-photo {
	flex: 0 0 360px;
	height: 520px;
}

.p-business__contact-photo picture,
.p-business__contact-img {
	width: 100%;
	height: 100%;
}

.p-business__contact-img {
	object-fit: cover;
	object-position: bottom;
}

@media (hover: hover) {
	.p-business__contact-tel-number:hover {
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-underline-offset: 0.15em;
	}
}

/* ==========================================================================
   1199px 以下（仮）：横に並べる段を減らす
   ========================================================================== */
@media (max-width: 1199px) {
	.p-business__hero {
		grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
	}

	.p-business__head,
	.p-business__about-note {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-lg);
	}

	.p-business__head :is(.p-business__title, .p-business__lead),
	.p-business__about-note > * {
		flex-basis: auto;
	}

	.p-business__flow {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		row-gap: var(--space-2xl);
	}

	.p-business__target-photo {
		flex-basis: 36%;
	}

	.p-business__survey-row,
	.p-business__daily,
	.p-business__tenant-row,
	.p-business__multi {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-3xl);
	}

	.p-business__survey-body,
	.p-business__daily-body,
	.p-business__multi-body {
		flex-basis: auto;
	}

	.p-business__notice-wrap {
		flex-basis: auto;
		max-width: 560px;
	}

	.p-business__completion-steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.p-business__case {
		flex-direction: column;
		gap: var(--space-xl);
	}

	.p-business__case-photos {
		flex-basis: auto;
		max-width: 596px;
	}

	.p-business__contact-photo {
		flex-basis: 280px;
		height: 440px;
	}
}

/* ==========================================================================
   768〜1199px（Figma は PC と SP だけ）：本文の幅が足りず、文字が1〜2字ずつ落ちていた所（2026-10-05）
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1199px) {
	/* h1 は「物件オーナーの方へ」が1行に入る大きさまで縮める（1024px で「方／へ」と1字だけ落ちていた） */
	.p-business__hero-title {
		font-size: min(var(--fs-catch), 5vw);
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	/* ファーストビュー：写真の列を細くして、h1・ボタンの幅をとる（768px で h1 が3字ずつ折り返し、ボタンが写真の下に隠れていた） */
	.p-business__hero {
		grid-template-columns: minmax(0, 1fr) minmax(0, min(480px, 44%));
	}

	/* 印の札が写真の右からはみ出さないように（SP と同じ決め方） */
	.p-business__hero-marker.is-2 {
		left: min(50%, calc(100% - 238px));
	}

	.p-business__hero-marker.is-3 {
		left: min(59.38%, calc(100% - 182px));
	}

	/* 信頼の帯：4列だと「100」が「10／0」と折り返すので、SP と同じ2列×2段（間に罫線） */
	.p-business__trust-list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: stretch; /* 2列にしたら、段の中のセルの高さをそろえる（罫線がずれないように。2026-10-05 監視役） */
	}

	.p-business__trust-item,
	.p-business__trust-item + .p-business__trust-item {
		box-sizing: border-box;
		padding: 20px 0 20px var(--space-2xl);
	}

	.p-business__trust-item:nth-child(odd) {
		padding-left: 0;
		border-right: 1px solid var(--color-border-on-inverse-strong);
	}

	.p-business__trust-item:nth-child(n + 3) {
		border-top: 1px solid var(--color-border-on-inverse-strong);
	}

	.p-business__trust-item + .p-business__trust-item::before {
		display: none;
	}

	/* 資産価値：3つの箱を縦に（SP と同じ並び）。横に3つだと題が「直す順番／と」と1字ずつ落ちる */
	.p-business__asset-diagram {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-2xs);
	}

	.p-business__asset-op {
		align-self: center;
		line-height: 1.5;
	}

	/* 年度の計画：3列のまま、年の数字を縮める（「2026」が「202／6」と折り返していた） */
	.p-business__plan-year-number {
		font-size: min(var(--fs-en-h1), 9vw);
	}
}

/* ==========================================================================
   SP（767px 以下。Figma 09 Trial の SP 361:565・注記 364:763）
   左右 20・セクションの上下 64・見出しとリードの間 16・セクションの中の間 32。文字は SP/*（tokens.css の SP の値）
   ========================================================================== */
@media (max-width: 767px) {
	.p-business__inner {
		gap: var(--space-2xl); /* 32 */
	}

	.p-business__head,
	.p-business__about-note {
		gap: var(--space-md);
	}

	/* ---------- ファーストビュー：文 → 調査写真（375×445）→ 凡例の帯 ---------- */
	.p-business__hero {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		min-height: 0;
		padding-left: 0;
	}

	.p-business__hero-body {
		gap: 20px;
		padding: var(--space-2xs) 20px var(--space-2xl);
	}

	.p-business__breadcrumb-list {
		min-height: 44px;
	}

	.p-business__hero-buttons {
		flex-direction: column;
		gap: var(--space-sm);
		align-self: stretch;
	}

	.p-business__hero-photo {
		display: flex;
		flex-direction: column;
		overflow: visible;
	}

	.p-business__hero-photo picture {
		aspect-ratio: 375 / 445;
		height: auto;
	}

	.p-business__hero-patch {
		top: calc(445 / 375 * 100vw * 0.618); /* 写真の中の位置（写真の高さ × 61.8%） */
	}

	.p-business__hero-marker.is-1 {
		top: calc(445 / 375 * 100vw * 0.5955);
		left: 8%;
	}

	/* 印の札が画面からはみ出さないように（右に 12 残す） */
	.p-business__hero-marker.is-2 {
		top: calc(445 / 375 * 100vw * 0.791);
		left: min(36.5%, calc(100% - 238px));
	}

	.p-business__hero-marker.is-3 {
		top: calc(445 / 375 * 100vw * 0.384);
		left: min(51.5%, calc(100% - 182px));
	}

	.p-business__hero-caption {
		position: static;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-2xs);
		padding: var(--space-sm) 20px 14px;
	}

	/* ---------- 信頼の帯：2列×2段（間に罫線） ---------- */
	.p-business__trust-list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: stretch;
		padding: 0 20px;
	}

	.p-business__trust-item,
	.p-business__trust-item + .p-business__trust-item {
		box-sizing: border-box;
		padding: 20px 0 20px var(--space-md);
	}

	.p-business__trust-item:nth-child(odd) {
		padding-left: 0;
		border-right: 1px solid var(--color-border-on-inverse-strong);
	}

	.p-business__trust-item:nth-child(n + 3) {
		border-top: 1px solid var(--color-border-on-inverse-strong);
	}

	.p-business__trust-item + .p-business__trust-item::before {
		display: none;
	}

	/* ---------- 窓口はひとつ：2列×4段 ---------- */
	.p-business__flow {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px var(--space-sm);
	}

	.p-business__flow-line {
		margin-block: var(--space-sm);
	}

	.p-business__about-note {
		padding-top: 28px;
	}

	/* ---------- 対応する建物と工事：見出し・リード → 写真（335×220）→ 2つの一覧（それぞれ2列） ---------- */
	.p-business__target-row {
		flex-direction: column;
		gap: var(--space-lg);
	}

	.p-business__target-body {
		display: contents;
	}

	.p-business__target-row > * {
		order: 2;
	}

	.p-business__target-body > .p-business__title {
		order: 0;
	}

	.p-business__target-body > .p-business__lead {
		order: 1;
		margin-top: calc(var(--space-md) - var(--space-lg));
	}

	.p-business__target-photo {
		flex-basis: auto;
		min-height: 0;
		overflow: hidden;
		aspect-ratio: 335 / 220;
	}

	.p-business__target-lists {
		order: 3;
		flex-direction: column;
	}

	.p-business__target-list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--space-md);
	}

	/* ---------- TRUSSができること：項目名 → 説明 → 詳しく見る ---------- */
	.p-business__strength-row {
		flex-direction: column;
		gap: var(--space-xs);
		padding-block: 20px;
	}

	.p-business__strength-name,
	.p-business__strength-link-wrap {
		flex-basis: auto;
	}

	.p-business__strength-link {
		min-height: 44px;
	}

	.p-business__estimate-items {
		gap: var(--space-2xs);
		border: 0;
	}

	.p-business__estimate-item,
	.p-business__estimate-item + .p-business__estimate-item {
		border: 1px solid var(--color-border-strong);
	}

	/* ---------- 資産価値：3つの箱を縦に（間に ＋ ＝）・3つの視点も縦に ---------- */
	.p-business__asset-diagram {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-2xs);
	}

	.p-business__asset-op {
		align-self: center;
		font-size: 24px;
		line-height: 1.5;
	}

	.p-business__asset-block {
		padding: 20px;
	}

	.p-business__asset-points {
		flex-direction: column;
		gap: var(--space-lg);
	}

	/* ---------- 調査報告書の見本：写真（72×88）＋番号と緊急度、その下に状態・推奨・時期 ---------- */
	.p-business__survey-body {
		gap: var(--space-lg);
	}

	.p-business__doc {
		gap: 20px;
		padding: 20px;
	}

	.p-business__doc-item {
		display: grid;
		grid-template-columns: 72px minmax(0, 1fr);
		gap: var(--space-sm);
		padding-bottom: 20px;
	}

	.p-business__doc-photo {
		width: 72px;
		height: 88px;
	}

	.p-business__doc-item-body {
		display: contents;
	}

	.p-business__doc-item-head {
		flex-direction: column;
		align-items: flex-start;
		align-self: start;
	}

	.p-business__doc-defs {
		grid-column: 1 / -1;
	}

	.p-business__doc-summary {
		flex-direction: column;
		gap: var(--space-xs);
		padding: var(--space-md);
	}

	.p-business__doc-count {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	/* ---------- 工程表の見本：縦に組み直す（工程名＋影響の札、その下に5週の帯）。横スクロールにしない ---------- */
	.p-business__gantt-caption {
		flex-direction: column;
		align-items: flex-start;
		padding: var(--space-md);
	}

	.p-business__gantt-legend {
		flex-direction: column;
		gap: var(--space-xs);
	}

	.p-business__gantt-scroll {
		overflow: visible;
	}

	.p-business__gantt-table,
	.p-business__gantt-table thead,
	.p-business__gantt-table tbody,
	.p-business__gantt-table tr {
		display: block;
		min-width: 0;
	}

	.p-business__gantt-table thead tr {
		display: flex;
		padding: 10px var(--space-md);
		border-bottom: 1px solid var(--color-border-strong);
	}

	.p-business__gantt-th:not(.p-business__gantt-th--weeks) {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.p-business__gantt-th--weeks.p-business__gantt-th--weeks {
		display: block;
		flex: 1;
		height: auto;
		border: 0;
	}

	.p-business__gantt-weeks {
		height: auto;
	}

	.p-business__gantt-week {
		padding: 0;
		border: 0;
	}

	.p-business__gantt-table .p-business__gantt-row {
		display: flex;
		flex-wrap: wrap; /* 札が入らないときは工程名の下へ（Figma の「鉄部・付帯部の塗装」の行） */
		align-items: center;
		gap: var(--space-xs);
		padding: var(--space-sm) var(--space-md);
	}

	.p-business__gantt-step,
	.p-business__gantt-impact {
		display: block;
		height: auto;
		padding: 0;
	}

	.p-business__gantt-impact {
		justify-self: start;
	}

	.p-business__gantt-track {
		display: block;
		flex: 0 0 100%;
		height: 16px;
		margin-top: var(--space-2xs);
	}

	.p-business__gantt-bar {
		top: 0;
	}

	.p-business__daily {
		gap: var(--space-2xl);
	}

	.p-business__mail {
		gap: var(--space-md);
		padding: 20px;
	}

	.p-business__mail-photos {
		gap: var(--space-xs);
	}

	.p-business__mail-photo {
		height: 72px;
	}

	/* ---------- 入居者への案内・掲示物 ---------- */
	.p-business__tenant-row {
		gap: var(--space-2xl);
	}

	.p-business__tenant-step {
		flex-direction: column;
		gap: var(--space-2xs);
		padding-block: var(--space-md);
	}

	.p-business__tenant-when {
		flex-basis: auto;
	}

	.p-business__notice-wrap {
		max-width: none;
	}

	.p-business__notice {
		gap: var(--space-md);
		padding: 20px;
	}

	/* ---------- 完工報告書：写真 2列×3段・材料／範囲／保証は縦の一覧 ---------- */
	.p-business__completion {
		gap: 20px;
		padding: 20px;
	}

	.p-business__completion-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px var(--space-sm);
	}

	.p-business__completion-step picture,
	.p-business__completion-photo,
	.p-business__completion-empty {
		height: 110px;
	}

	.p-business__completion-spec {
		flex-direction: column;
	}

	.p-business__completion-spec-item,
	.p-business__completion-spec-item + .p-business__completion-spec-item {
		padding: var(--space-md) 0;
		border-left: 0;
	}

	.p-business__completion-spec-item + .p-business__completion-spec-item {
		border-top: 1px solid var(--color-border-default);
	}

	/* ---------- 法人の施工事例：絞り込みは折り返す・写真は左右に並べる ---------- */
	.p-business__works-filter {
		padding-bottom: var(--space-lg);
	}

	.p-business__case {
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
		padding-block: var(--space-xl);
	}

	.p-business__case-photos {
		flex-basis: auto;
		max-width: none;
	}

	.p-business__case-photo {
		height: 200px;
		aspect-ratio: auto;
	}

	.p-business__case-body {
		gap: var(--space-md);
	}

	.p-business__works-more {
		padding-top: var(--space-xl);
	}

	/* ---------- 複数物件と修繕計画：縦に積む ---------- */
	.p-business__plan .p-business__inner {
		gap: var(--space-4xl);
	}

	.p-business__multi {
		gap: var(--space-xl);
	}

	.p-business__multi-body {
		align-items: stretch;
	}

	.p-business__multi-cases,
	.p-business__plan-years {
		grid-template-columns: minmax(0, 1fr);
	}

	.p-business__plan-years {
		gap: var(--space-xl);
	}

	.p-business__plan-item {
		min-height: 0;
		padding: 20px;
	}

	/* ---------- 各種書類：2列 ---------- */
	.p-business__docs-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.p-business__docs-item,
	.p-business__docs-item:nth-child(3n + 1) {
		gap: 10px;
		padding: var(--space-md) 0 var(--space-md) var(--space-md);
		border-left: 1px solid var(--color-border-default);
	}

	.p-business__docs-item:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}

	/* ---------- お問い合わせの面：写真（335×220）→ 見出し・リード → 電話 → ボタン ---------- */
	.p-business__contact-row {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-2xl);
	}

	.p-business__contact-photo {
		order: -1;
		flex-basis: auto;
		height: auto;
		min-height: 0;
		overflow: hidden;
		aspect-ratio: 335 / 220;
	}

	.p-business__contact-body {
		gap: var(--space-lg);
	}

	.p-business__contact-ways {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-lg);
		padding-top: var(--space-lg);
	}

	.p-business__contact-tel-number {
		font-size: var(--fs-en-h2);
	}

	.p-business__contact-tel-icon {
		width: 26px;
		height: 26px;
	}
}

/* 360px 未満：各種書類の2列で「安全関連書類」「インボイス対応」が1行に入るように、アイコン・間・文字を少し小さく
   （SP 375px と同じく1行に。入らないと「安全関連／書類」と2字だけ落ちる。2026-10-05） */
@media (max-width: 359px) {
	.p-business__docs-item,
	.p-business__docs-item:nth-child(3n + 1) {
		gap: 6px;
	}

	.p-business__docs-icon {
		width: 20px;
		height: 20px;
	}

	.p-business__docs-name {
		font-size: 15px;
	}
}