/* ==========================================================================
   システム開発 /development/ — Figma 「/development」 (PC 1440) + 「/development」 (SP 375).
   SP values = the variables at the top of each block; PC overrides them from 1024px.
   Shared: hero (components.css .c-page-hero--band), CHALLENGES (sections.css), FAQ (.c-faq),
   CTA band (.c-contact).
   ========================================================================== */

/* --- Section spacing ------------------------------------------------------
   PC: CHALLENGES 120 / 120 (head → cards 48), SERVICES 120 / 120 on #F6F8FA,
   DEVELOPMENT MODEL 120 / 80, PROCESS 80 / 80, FAQ 80 / 80; head → content 64.
   SP: CHALLENGES 80 / 64 (head → cards 24); SERVICES, MODEL, FAQ 12px gutters; PROCESS 20. */
.p-challenges {
	padding-top: var(--space-20);
}

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

.p-dev-services {
	background-color: var(--c-bg-alt);
}

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

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

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

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

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

	/* Figma lets the 2nd line of 「国内の開発会社は…」 (266) run past the 261 column */
	.p-challenges__text {
		margin-inline: -8px;
	}

	.p-dev-model {
		padding-top: var(--space-30);
	}
}

/* --- SERVICES 提供サービス ---------------------------------------------------
   PC: 3 white cards 368 wide, 18 apart (positions in the comp), radius 10, padding 48 / 36;
   title 24/500 #00479D centered → 16 → text 14 left. Equal heights.
   SP: stacked 351 wide, 16 apart, padding 48 / 32, title 24. */
.p-dev-services {
	--dev-card-gap: var(--space-4);
	--dev-card-pad: var(--space-12) var(--space-8);
	--dev-card-title: 24px;
}

.p-dev-services__list {
	display: grid;
	gap: var(--dev-card-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-dev-services__card {
	padding: var(--dev-card-pad);
	background-color: var(--c-bg);
	border-radius: var(--radius-md);
}

.p-dev-services__title {
	font-size: var(--dev-card-title);
	font-weight: 500;
	line-height: 1.6;
	text-align: center;
	color: var(--c-primary);
}

.p-dev-services__text {
	margin-top: var(--space-4);
	font-size: var(--fs-text);
	line-height: 1.6;
}

@media (min-width: 1024px) {
	.p-dev-services {
		--dev-card-gap: 18px;
		--dev-card-pad: var(--space-12) 36px;
	}

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

/* --- DEVELOPMENT MODEL 開発体制 ----------------------------------------------
   PC: one row, centered vertically, spread over 1140:
     貴社 234 × 150, #EAF1FA, radius 10, padding 40 (24/700 → 10 → 14/500)
     flow 98 wide: label 14/500 blue → 16 → ⇄ arrows → 16 → label
     team 695: 1px #DDE3EA, radius 10, padding 24 / 12 / 13; title 20/700 blue→navy gradient → 16 →
       Zenworth 413 (#00479D, radius 8, padding 40; wordmark 160 → 24 → 3 points 14/500, 10 apart)
       + 8 + partner 248 (#002A5C, radius 8, padding 32 / 40; 14/500 · 24/700 → 16 → 14/500).
   SP (Figma SP): stacked, 38 apart; 貴社 234 × 134 (padding 32 / 40); flow row centered:
     要望・情報提供 (right-aligned) · 16 · ↓↑ arrows 40 × 56 (own SVG) · 16 · 提案・報告;
     team 351; Zenworth padding 40 / 24 with the points block centered; partner below. */
.p-dev-model {
	--model-dir: column;
	--model-gap: 38px;
	--model-team-dir: column;
	--model-client-pad: var(--space-8) var(--space-10);
	--model-zw-pad: var(--space-10) var(--space-6);
}

.p-dev-model__diagram {
	display: flex;
	flex-direction: var(--model-dir);
	align-items: center;
	justify-content: space-between;
	gap: var(--model-gap);
}

.p-dev-model__client {
	display: grid;
	gap: 10px;
	width: 234px;
	padding: var(--model-client-pad);
	text-align: center;
	background-color: var(--c-surface);
	border-radius: var(--radius-md);
}

.p-dev-model__client-name {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.6;
}

.p-dev-model__client-role {
	font-size: var(--fs-text);
	font-weight: 500;
	line-height: 1.6;
}

.p-dev-model__flow {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
	flex-shrink: 0;
	width: 98px;
}

/* SP: one row, arrows centered on the screen: 要望・情報提供 ↓ | ↑ 提案・報告 */
@media (max-width: 1023.98px) {
	.p-dev-model__flow {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		gap: var(--space-4);
		width: 100%;
	}

	.p-dev-model__flow-label:first-child {
		text-align: right;
	}
}

.p-dev-model__flow-label {
	font-size: var(--fs-text);
	font-weight: 500;
	line-height: 1.6;
	color: var(--c-primary);
	white-space: nowrap;
}

/* PC SVG 100 × 31 / SP SVG 40 × 58 (arrowheads included); shafts 16 apart like the comps */
.p-dev-model__arrows {
	flex-shrink: 0;
	max-width: none; /* reset.css caps svg at 100% */
}

.p-dev-model__arrows--pc {
	width: 100px;
	height: 31px;
	margin-block: -7.5px;
}

.p-dev-model__arrows--sp {
	width: 40px;
	height: 58px;
	margin-block: -1px; /* row 56 tall (Figma) */
}

@media (max-width: 1023.98px) {
	.p-dev-model__arrows--pc {
		display: none;
	}
}

@media (min-width: 1024px) {
	.p-dev-model__arrows--sp {
		display: none;
	}
}

.p-dev-model__team {
	display: grid;
	gap: var(--space-4);
	width: 100%;
	max-width: 695px;
	padding: var(--space-6) var(--space-3) 13px;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-md);
}

.p-dev-model__team-title {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
	color: var(--c-primary);
	background: linear-gradient(90deg, var(--c-primary), var(--c-primary-dark));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.p-dev-model__team-body {
	display: flex;
	flex-direction: var(--model-team-dir);
	gap: var(--space-2);
}

.p-dev-model__zenworth,
.p-dev-model__partner {
	color: var(--c-on-dark);
	border-radius: 8px;
}

.p-dev-model__zenworth {
	display: grid;
	align-content: start;
	gap: var(--space-6);
	flex: 413 1 0;
	padding: var(--model-zw-pad);
	background-color: var(--c-primary);
}

.p-dev-model__logo svg {
	width: 160px;
	height: auto;
	margin-inline: auto;
}

.p-dev-model__points {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-text);
	font-weight: 500;
	line-height: 1.6;
}

.p-dev-model__points li {
	position: relative;
	padding-left: 12px; /* dot 4 + 8 */
}

.p-dev-model__points li::before {
	content: "";
	position: absolute;
	top: calc(0.8em - 2px); /* centered on the first line */
	left: 0;
	width: 4px;
	height: 4px;
	background-color: currentColor;
	border-radius: 50%;
}

.p-dev-model__partner {
	display: grid;
	align-content: start;
	gap: var(--space-4);
	flex: 248 1 0;
	padding: var(--space-8) var(--space-10);
	text-align: center;
	background-color: var(--c-primary-dark);
}

.p-dev-model__partner-head {
	display: grid;
}

.p-dev-model__partner-country {
	font-size: var(--fs-text);
	font-weight: 500;
	line-height: 1.6;
}

.p-dev-model__partner-name {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.6;
}

.p-dev-model__partner-text {
	font-size: var(--fs-text);
	font-weight: 500;
	line-height: 1.6;
}

@media (max-width: 1023.98px) {
	/* Points block as wide as its longest line, centered in the panel (Figma SP) */
	.p-dev-model__points {
		justify-self: center;
	}
}

@media (min-width: 1024px) {
	.p-dev-model {
		--model-dir: row;
		--model-gap: var(--space-4);
		--model-team-dir: row;
		--model-client-pad: var(--space-10);
		--model-zw-pad: var(--space-10);
	}

	.p-dev-model__client {
		flex-shrink: 0;
	}

	.p-dev-model__team {
		flex-shrink: 0;
		width: 695px;
	}

	/* Fixed 413 + 8 + rest (248), whatever the content's min width */
	.p-dev-model__zenworth {
		flex: 0 0 413px;
	}

	.p-dev-model__partner {
		flex: 1 1 0;
		min-width: 0;
	}
}

/* --- PROCESS 開発の進め方 ----------------------------------------------------
   PC: block 675 wide, centered; label 14/500 #5E6B78 → 12 → 6 steps 74 tall, 24 apart;
   circle 50 #00479D (Geologica 200 / 20 white) → 48 → title 16/700 → 4 → text 14;
   one 1px blue line through the circle centers (drawn per step, meeting in each gap).
   SP (Figma SP): block 300 wide, centered (circle 50 → 40 → text column 210); steps 32 apart. */
.p-dev-process {
	--step-circle: 50px;
	--step-gap: var(--space-8);
	--step-col-gap: var(--space-10);
	--step-min-h: 74px;
	--step-inner-w: 300px;
}

.p-dev-process__inner {
	max-width: var(--step-inner-w);
	margin-inline: auto;
}

@media (max-width: 1023.98px) {
	/* Figma lets 「変更時は、費用・スケジュールへの」 (224) run past the 210 column */
	.p-dev-process__text {
		margin-right: -14px;
	}
}

.p-dev-process__label {
	font-size: var(--fs-text);
	font-weight: 500;
	line-height: 1.6;
	color: var(--c-text-muted);
}

.p-dev-process__steps {
	display: grid;
	gap: var(--step-gap);
	margin: var(--space-3) 0 0;
	padding: 0;
	list-style: none;
}

.p-dev-process__step {
	position: relative;
	display: grid;
	grid-template-columns: var(--step-circle) 1fr;
	align-items: center;
	column-gap: var(--step-col-gap);
	min-height: var(--step-min-h);
}

.p-dev-process__step::before {
	content: "";
	position: absolute;
	top: calc(var(--step-gap) / -2);
	bottom: calc(var(--step-gap) / -2);
	left: calc(var(--step-circle) / 2 - 0.5px);
	width: 1px;
	background-color: var(--c-primary);
}

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

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

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

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

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

@media (min-width: 1024px) {
	.p-dev-process {
		--step-gap: var(--space-6);
		--step-col-gap: var(--space-12);
		--step-inner-w: 675px;
	}
}