/* ==========================================================================
   業務改善支援 /improvement/ — Figma 「/improvement - 2/11」 (PC 1440) + 「/improvement」 (SP 375).
   SP values (< 1024px) are the CSS variables at the top of each block; PC overrides them.
   Shared sections (CHALLENGES / APPROACH): assets/css/sections.css.
   Hero: components.css (.c-page-hero--band). FAQ: components.css (.c-faq).
   ========================================================================== */

/* --- Section spacing ------------------------------------------------------
   PC: CHALLENGES 120 / 80, others 80 / 80.
   SP: CHALLENGES 80 / 64 (head → cards 24); ROLES / FAQ 12px gutters, PROCESS 20px;
   FAQ 32 at the bottom (CONTACT follows). */
.p-challenges {
	padding-top: var(--space-20);
}

.p-challenges .c-section-head {
	margin-bottom: var(--space-6);
}

@media (max-width: 1023.98px) {
	.p-roles > .l-container,
	.p-faq > .l-container {
		padding-inline: var(--card-gutter);
	}

	.p-process > .l-container {
		padding-inline: 20px;
	}

	.p-faq {
		padding-bottom: var(--space-8);
	}
}

@media (min-width: 1024px) {
	.p-challenges {
		padding-top: var(--space-30);
	}

	.p-challenges .c-section-head {
		margin-bottom: var(--space-12);
	}
}

/* --- ROLES 役割分担 --------------------------------------------------------
   PC: table 980 wide; heads 74 tall (#00479D | #002A5C, white 16/700); 4 rows ~71 tall,
   14px centered, 1px #DDE3EA rules; note 11px #5E6B78 right-aligned 12px below.
   SP: the two columns stack (Zenworth block, then 貴社 block), 32 apart; head 58 / cells 55
   tall (padding 16 / 5); note 10 below. */
.p-roles {
	/* SP = Figma SP */
	--roles-col-gap: var(--space-8);
	--roles-head-pad: 16px 5px;
	--roles-cell-pad: 16px 5px;
	--roles-note-gap: 10px;
	--roles-rows: 5; /* head + 4 items (desktop subgrid) */
}

.p-roles__inner {
	max-width: 980px;
	margin-inline: auto;
}

.p-roles__table {
	display: grid;
	gap: var(--roles-col-gap);
}

.p-roles__head {
	padding: var(--roles-head-pad);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
	color: var(--c-on-dark);
	background-color: var(--c-primary);
}

.p-roles__col:nth-child(even) .p-roles__head {
	background-color: var(--c-primary-dark);
}

.p-roles__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-roles__cell {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--roles-cell-pad);
	font-size: var(--fs-text);
	line-height: 1.6;
	text-align: center;
	background-color: var(--c-bg);
	border: 1px solid var(--c-border);
	border-top: 0;
}

/* Rounded outer corners (Figma: radius 10). Set on the cells themselves (not by clipping
   the column) so the 1px borders follow the curve. SP: each stacked block is fully rounded. */
.p-roles__head {
	border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.p-roles__cell:last-child {
	border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.p-roles__note {
	margin-top: var(--roles-note-gap);
	font-size: 11px;
	line-height: 1.6;
	text-align: right;
	color: var(--c-text-muted);
}

@media (min-width: 1024px) {
	.p-roles {
		--roles-col-gap: 0;
		--roles-head-pad: 24px 5px;
		--roles-cell-pad: 24px 5px;
		--roles-note-gap: var(--space-3);
	}

	/* Side by side; subgrid keeps the rows of both columns the same height */
	.p-roles__table {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(var(--roles-rows), auto);
	}

	.p-roles__col {
		display: grid;
		grid-row: span var(--roles-rows);
		grid-template-rows: subgrid;
	}

	.p-roles__list {
		display: contents;
	}

	/* One 1px divider between the columns (= the left column's right border) */
	.p-roles__col:nth-child(even) .p-roles__cell {
		border-left: 0;
	}

	/* Side by side: only the four outer corners are rounded */
	.p-roles__col:nth-child(odd) .p-roles__head {
		border-radius: var(--radius-md) 0 0 0;
	}

	.p-roles__col:nth-child(even) .p-roles__head {
		border-radius: 0 var(--radius-md) 0 0;
	}

	.p-roles__col:nth-child(odd) .p-roles__cell:last-child {
		border-radius: 0 0 0 var(--radius-md);
	}

	.p-roles__col:nth-child(even) .p-roles__cell:last-child {
		border-radius: 0 0 var(--radius-md) 0;
	}
}

/* --- PROCESS ご相談から契約まで ---------------------------------------------
   PC: 1024 wide, 3 columns of 320 (gap 32); 50px #00479D circles with Geologica 200 / 20
   white numbers, joined by a 1px line through the circle centers; title 16/700 32px below,
   text 14 8px below; note 11px #5E6B78 48px below, centered.
   SP (Figma SP): vertical timeline — circle 50 (18px in), content 40 to its right, circle
   centered on the content block; steps 32 apart; one 1px line through the circle centers;
   title → text 4; note 48 below. */
.p-process {
	/* SP = Figma SP */
	--process-circle: 50px;
	--process-num-size: 20px;
	--process-indent: 18px;
	--process-col-gap: var(--space-10);
	--process-step-gap: var(--space-8);
	--process-text-gap: var(--space-1);
	--process-note-gap: var(--space-12);
}

.p-process__steps {
	position: relative;
	display: grid;
	gap: var(--process-step-gap);
	max-width: 1024px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.p-process__step {
	position: relative;
	display: grid;
	grid-template-columns: var(--process-circle) 1fr;
	align-items: center;
	column-gap: var(--process-col-gap);
	padding-left: var(--process-indent);
}

/* SP: the line through the circle centers, drawn per step and meeting halfway in each gap
   (steps have different heights): first step from its center down, last step up to its center. */
.p-process__step::before {
	content: "";
	position: absolute;
	top: calc(var(--process-step-gap) / -2);
	bottom: calc(var(--process-step-gap) / -2);
	left: calc(var(--process-indent) + var(--process-circle) / 2 - 0.5px);
	width: 1px;
	background-color: var(--c-primary);
}

.p-process__step:first-child::before {
	top: 50%;
}

.p-process__step:last-child::before {
	bottom: 50%;
}

.p-process__num {
	position: relative; /* above the line */
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--process-circle);
	height: var(--process-circle);
	font-family: var(--font-en);
	font-size: var(--process-num-size);
	font-weight: 200;
	line-height: 1.6;
	color: var(--c-on-dark);
	background-color: var(--c-primary);
	border-radius: 50%;
}

.p-process__title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
}

.p-process__text {
	margin-top: var(--process-text-gap);
	font-size: var(--fs-text);
	line-height: 1.6;
}

.p-process__note {
	margin-top: var(--process-note-gap);
	font-size: 11px;
	line-height: 1.6;
	color: var(--c-text-muted);
}

@media (min-width: 1024px) {
	.p-process {
		--process-indent: 0px;
		--process-text-gap: var(--space-2);
	}

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

	/* One line from the 1st to the 3rd circle center */
	.p-process__steps::before {
		content: "";
		position: absolute;
		top: calc(var(--process-circle) / 2 - 0.5px);
		left: calc((100% - var(--process-step-gap) * 2) / 6);
		right: calc((100% - var(--process-step-gap) * 2) / 6);
		height: 1px;
		background-color: var(--c-primary);
	}

	.p-process__step {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.p-process__step::before {
		content: none;
	}

	.p-process__body {
		margin-top: var(--space-8);
	}

	.p-process__note {
		text-align: center;
	}
}