/*
 * design-languages/industrial.css — Design Language: INDUSTRIAL
 *
 * 「技術と機能美」。Strong / Precise / Professional / Industrial / Modern。
 * STYLE 04｜INDUSTRIAL（marunage-core/includes/design-presets.php
 * の 'construction-tech'）が参照する。業種横断で再利用できる抽象レイヤー
 * のため、construction固有の値はここに書かない。色・フォントの実値は
 * presets/construction-tech.css が持つ（このファイルでは変更しない）。
 *
 * base.css / layout.css / components.css（共有）は変更せず、
 * body.nm-lang-industrial という Design Language 限定セレクタでのみ上書きする。
 * HTML（共有コンポーネント）も変更しない。
 *
 * 2026-10-08 再設計：STYLE 06｜PARTNER の「兄弟デザイン」。
 * PARTNERと同じ骨格（見出しの構造・左揃えの読み筋・写真を「面」として扱う・
 * 余白の3段階・主CTAは線矢印／副リンクは円矢印）を持たせたうえで、
 * 建設業らしく、より直線的・骨太・工業的にする。
 *   - 直線と大きな面：太い罫、濃紺の大きな面（HERO・STRENGTH）、角丸なし
 *   - 文字は太く大きく（見出し700）
 *   - アクセント（橙）は、見出しの左端の短い太いバーと、主CTAだけ
 *   - 新しい装飾（グラデーション・グロー・意味の弱い連番・カード）は足さない
 *
 * 地色の流れ（場面として決める。機械的な交互にしない）：
 *   濃紺：HERO → 白：ABOUT（文章面→写真帯）→ 灰：SERVICE → 白：WORKS →
 *   濃紺：STRENGTH → 灰／白／灰：STORY（独立した物語）→ 白：PHOTO STREAM →
 *   灰：PEOPLE → 白：MESSAGE → 灰：COMPANY → 白：CONTACT → 濃紺：フッター
 */

body.nm-lang-industrial {
	/*
	 * 共通インナーの幅：コンテンツ幅 約1280px（＝container 1376px − 左右padding 96px）。
	 * ヘッダー・ABOUT・SERVICE・FLOW・PROFILE・STORY・MESSAGE…の左右の基準線は、すべてこの1本にそろう
	 * （特定のセクションだけ右へ広げない）。画面が狭いときは、画面幅から左右paddingを引いた幅になる。
	 */
	--container: 1376px;

	/* 直線的で無骨な印象を保つため、角丸は全体でなくす（写真・ボタン・面すべて） */
	--radius-sm: 0;
	--radius-md: 0;
	--radius-lg: 0;

	--i-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--i-deep: var(--color-primary-strong);
	--i-on-deep: #fff;
	--i-on-deep-subtle: rgb(255 255 255 / 76%);
	--i-on-deep-rule: rgb(255 255 255 / 28%);
	--i-header-h: 76px;

	/*
	 * 通常本文の色（長文の読みやすさのため、見出し #141414 よりやや淡い、濃いグレー）。
	 * 白・灰の地で 7.5:1 以上。リード文・強調文は濃紺（--color-primary）のまま、
	 * ラベル・注記は従来の薄いグレー（--color-text-subtle）のまま。
	 */
	--i-body-text: #4d4d4d;
	/* 短い説明・リード文の色（Primary Navy） */
	--i-lead-text: var(--color-primary);

	/* STRENGTH（scrollytelling）：ヘッダー＋管理バーの下に固定する位置と、1項目あたりのスクロール量 */
	--i-sticky-top: calc(var(--nm-header-h) + var(--nm-adminbar-h));
	--i-strength-step: 42svh;
	/* 面を、画面の中央よりどれだけ上へ寄せるか（中央〜やや上寄り） */
	--i-strength-lift: 1.5rem;

	/* コンテナの左端（全幅の面を、文字の左端と揃えるための値） */
	--i-gutter-left: max(var(--container-pad), calc((100vw - var(--container)) / 2 + var(--container-pad)));
	--i-gutter: clamp(2rem, 5vw, 6rem);

	/* 余白の3段階：小＝帯・注記／標準＝静かなセクション／大＝勝負画面 */
	--i-pad-s: calc(var(--section-space) * 0.6);
	--i-pad-m: var(--section-space);
	--i-pad-l: calc(var(--section-space) * 1.25);

	/* 見出し：罫→日本語見出し／見出し→英字ラベル／見出し→本文（SPだけ--i-sp-kで約10%圧縮） */
	--i-head-pad: var(--space-md);
	--i-head-label-gap: var(--space-sm);
	--i-head-gap: var(--space-xl);
	--i-head-gap-compact: var(--space-lg);
	--i-sp-k: 0.9;

	--i-h2: clamp(1.75rem, 1.45rem + 1.7vw, 2.75rem);
	--i-lead: clamp(1.1875rem, 1rem + 0.9vw, 1.75rem);
	--i-item-title: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
	--i-measure: 34em; /* 長文本文の行長（PC：1行 約30〜34字） */

	line-break: strict;
	overflow-x: clip;
}

@supports (word-break: auto-phrase) {
	body.nm-lang-industrial {
		word-break: auto-phrase;
	}
}

/* 見出し：太く。折り返しはブラウザ標準（文節単位）に任せる。Enterで入れた改行は必ず保持する。 */
body.nm-lang-industrial h1,
body.nm-lang-industrial h2,
body.nm-lang-industrial h3,
body.nm-lang-industrial h4 {
	text-wrap: balance;
	overflow-wrap: break-word;
	line-break: strict;
}

body.nm-lang-industrial h2 {
	font-weight: 700;
}

body.nm-lang-industrial h3,
body.nm-lang-industrial h4 {
	font-weight: 700;
}

body.nm-lang-industrial .nm-hl__line {
	display: block;
}

body.nm-lang-industrial p,
body.nm-lang-industrial li {
	text-wrap: pretty;
}

/* ==================================================
 * 地色と余白：境界線を持たず、地色の切り替えと見出しの太い罫で区切る
 * ================================================== */
body.nm-lang-industrial .nm-section {
	border-top: 0;
}

body.nm-lang-industrial .nm-about,
body.nm-lang-industrial .nm-works,
body.nm-lang-industrial .nm-message,
body.nm-lang-industrial .nm-contact {
	--i-ground: var(--color-bg);
	background: var(--i-ground);
}

body.nm-lang-industrial .nm-service,
body.nm-lang-industrial .nm-people,
body.nm-lang-industrial .nm-company {
	--i-ground: var(--color-bg-subtle);
	background: var(--i-ground);
}

body.nm-lang-industrial .nm-about,
body.nm-lang-industrial .nm-service,
body.nm-lang-industrial .nm-works,
body.nm-lang-industrial .nm-people,
body.nm-lang-industrial .nm-job,
body.nm-lang-industrial .nm-recruit-cta,
body.nm-lang-industrial .nm-company,
body.nm-lang-industrial .nm-contact {
	padding-block: var(--i-pad-m);
}

/* ==================================================
 * セクション見出し — 全セクション共通の1つのシステム（PARTNERと同じ構造）。
 *   1. 上部に太い横罫（2px・会社色）
 *   2. 罫の左端だけ、橙の短い太いバー（04らしく、06より力強く）
 *   3. その下に日本語見出し（太く）
 *   4. 見出しの下に小さな英字ラベル（編集者が入力した場合だけ）
 * 連番は出さない。セクションごとの違いは、見出しではなく地色・写真・余白で出す。
 * ================================================== */
body.nm-lang-industrial .nm-section-heading {
	position: relative;
	display: flex;
	flex-direction: column;
	max-width: none;
	margin-bottom: var(--i-head-gap);
	padding-top: var(--i-head-pad);
	border-top: 2px solid var(--color-primary);
}

body.nm-lang-industrial .nm-section-heading::before {
	content: "";
	position: absolute;
	top: -2px;
	left: 0;
	width: 4.5rem;
	height: 6px;
	background: var(--color-accent);
}

body.nm-lang-industrial .nm-section-heading--center {
	max-width: none;
	margin-inline: 0;
	text-align: left;
}

body.nm-lang-industrial .nm-section-heading__title {
	order: 1;
	font-size: var(--i-h2);
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-text);
}

/* 連番は出さない。英字ラベルは、編集者が入力した場合だけ、見出しの下に出す。 */
body.nm-lang-industrial .nm-section-heading__meta,
body.nm-lang-industrial .nm-section-heading__number,
body.nm-lang-industrial .nm-section-heading__label--solo {
	display: none;
}

body.nm-lang-industrial .nm-section-heading--custom-label .nm-section-heading__meta,
body.nm-lang-industrial .nm-section-heading--custom-label .nm-section-heading__label--solo {
	order: 2;
	display: block;
	margin: var(--i-head-label-gap) 0 0;
}

body.nm-lang-industrial .nm-section-heading--custom-label .nm-section-heading__label,
body.nm-lang-industrial .nm-section-heading--custom-label .nm-section-heading__label--solo {
	font-family: var(--font-en);
	font-size: var(--font-size-label);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-text-subtle);
}

/*
 * 3階層の見出し（FEATURE / STORY：英字ラベル → 小見出し → 大見出し）。
 * 英字ラベルは、他のセクションと同じ小さなカテゴリーラベル（文字組みは上のルールを再利用）を、
 * 小見出しと大見出しの上へ置く。小見出しは濃紺・太字の補足の日本語。
 */
body.nm-lang-industrial .nm-section-heading--tiered .nm-section-heading__meta {
	order: 0;
	margin: 0 0 var(--space-xs);
}

body.nm-lang-industrial .nm-section-heading__sub {
	order: 0;
	margin: 0 0 var(--space-sm);
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
	letter-spacing: 0.04em;
	color: var(--color-primary);
}

/* 濃紺の面（STRENGTH。リードがあるときの見出し側＝.nm-strength-introも同じ）：罫と文字だけ明るくする */
body.nm-lang-industrial :is(.nm-strength, .nm-strength-intro) .nm-section-heading {
	border-top-color: var(--i-on-deep-rule);
}

body.nm-lang-industrial :is(.nm-strength, .nm-strength-intro) .nm-section-heading__title {
	color: var(--i-on-deep);
}

body.nm-lang-industrial :is(.nm-strength, .nm-strength-intro) .nm-section-heading__label {
	color: var(--i-on-deep-subtle);
}

/* ==================================================
 * ヘッダー・ボタン
 * ================================================== */
body.nm-lang-industrial .nm-button {
	border-radius: 0;
	font-weight: 700;
	letter-spacing: 0.06em;
}

body.nm-lang-industrial .nm-button--primary {
	border-radius: 0;
}

/*
 * 矢印UI（サイト共通のルール。PARTNERと同じ）：
 *   - 主CTA（Primary）：円なしの、細い水平線と小さな矢じりだけの線矢印。
 *   - 副リンク（Secondary link）：小さな円の中に、右向きの矢印。
 * 色は文字色（currentColor）に従う。ホバーで、ほんの少しだけ右へ動く。
 */
body.nm-lang-industrial .nm-hero__actions .nm-button--primary,
body.nm-lang-industrial .nm-contact__method--tel .nm-button {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 2.4em;
	min-width: clamp(13rem, 18vw, 17rem);
	padding-inline: 2.2em 1.8em;
}

body.nm-lang-industrial .nm-hero__actions .nm-button--primary::after,
body.nm-lang-industrial .nm-contact__method--tel .nm-button::after {
	content: "";
	display: inline-block;
	flex: none;
	width: 2.1em;
	height: 0.7em;
	background: currentcolor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 12'%3E%3Cpath d='M0.5 6h34.2M29.4 1.2 34.6 6l-5.2 4.8' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 12'%3E%3Cpath d='M0.5 6h34.2M29.4 1.2 34.6 6l-5.2 4.8' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.nm-lang-industrial .nm-contact__method--form .nm-button::after,
body.nm-lang-industrial .nm-contact__method--line .nm-button::after,
body.nm-lang-industrial .nm-contact__method--email .nm-button::after {
	content: "";
	display: inline-block;
	flex: none;
	width: 1.6em;
	height: 1.6em;
	background: currentcolor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11.2' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='M7.6 12h8.8M12.9 8.5 16.4 12l-3.5 3.5' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11.2' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='M7.6 12h8.8M12.9 8.5 16.4 12l-3.5 3.5' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (prefers-reduced-motion: no-preference) {
	body.nm-lang-industrial .nm-hero__actions .nm-button--primary::after,
	body.nm-lang-industrial .nm-contact__method--tel .nm-button::after,
	body.nm-lang-industrial .nm-contact__method--form .nm-button::after,
	body.nm-lang-industrial .nm-contact__method--line .nm-button::after,
	body.nm-lang-industrial .nm-contact__method--email .nm-button::after,
	body.nm-lang-industrial .nm-hero__link-arrow {
		transition: transform 400ms var(--i-ease);
	}

	body.nm-lang-industrial .nm-hero__actions .nm-button--primary:hover::after,
	body.nm-lang-industrial .nm-contact__method--tel .nm-button:hover::after,
	body.nm-lang-industrial .nm-contact__method--form .nm-button:hover::after,
	body.nm-lang-industrial .nm-contact__method--line .nm-button:hover::after,
	body.nm-lang-industrial .nm-contact__method--email .nm-button:hover::after,
	body.nm-lang-industrial .nm-hero__link:hover .nm-hero__link-arrow {
		transform: translateX(3px);
	}
}

/* ==================================================
 * HERO — 濃紺の大きな面。左に文字、右に縦いっぱいの写真の面。
 * 見出し・本文・主CTA・副リンクは、同じ左端の一本の縦の流れ（字下げ・段差は使わない）。
 * 写真は、右端まで出血させる。写真が無い場合は、文字と濃紺の面だけで成立する。
 * 文字は常に白（管理画面のHero文字色は、この構成では使わない）。
 * ================================================== */
body.nm-lang-industrial .nm-hero {
	--hero-text: var(--i-on-deep);
	--hero-text-subtle: var(--i-on-deep-subtle);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-end;
	min-height: 0;
	max-height: none;
	background: var(--i-deep);
	color: var(--hero-text);
	overflow: hidden;
}

body.nm-lang-industrial .nm-hero__overlay,
body.nm-lang-industrial .nm-hero__scroll {
	display: none;
}

/* 写真の面：SP＝上に全幅 */
body.nm-lang-industrial .nm-hero__visual {
	position: relative;
	inset: auto;
	order: -1;
	z-index: 1;
	width: 100%;
	height: clamp(260px, 50svh, 460px);
}

body.nm-lang-industrial .nm-hero__content,
body.nm-lang-industrial .nm-hero--no-media .nm-hero__content {
	position: relative;
	z-index: 3;
	max-width: none;
	min-width: 0;
	margin: 0;
	align-items: flex-start;
	text-align: left;
	gap: var(--space-md);
	padding-inline: var(--container-pad);
	padding-block: var(--space-xl) var(--section-space-small);
}

body.nm-lang-industrial .nm-hero--no-media {
	justify-content: flex-start;
}

body.nm-lang-industrial .nm-hero__eyebrow {
	font-family: var(--font-en);
	font-size: var(--font-size-label);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--i-on-deep-subtle);
}

body.nm-lang-industrial .nm-hero__heading {
	max-width: none;
	font-size: clamp(2.25rem, 9.6vw, 3.5rem);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: 0;
	text-wrap: balance;
	line-break: strict;
	color: var(--hero-text);
}

body.nm-lang-industrial .nm-hero__lead,
body.nm-lang-industrial .nm-hero--no-media .nm-hero__lead {
	max-width: 30em;
	margin-top: var(--space-sm);
	color: var(--hero-text-subtle);
}

body.nm-lang-industrial .nm-hero__actions,
body.nm-lang-industrial .nm-hero--no-media .nm-hero__actions {
	justify-content: flex-start;
	margin-top: var(--space-md);
}

/* 副リンク：テキストが主役。円の矢印は小さく添える */
body.nm-lang-industrial .nm-hero__link {
	gap: 0.8em;
	padding-bottom: 0;
	border-bottom: 0;
	color: var(--hero-text);
}

@media (min-width: 1024px) {
	body.nm-lang-industrial .nm-hero {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		position: relative;
		/*
		 * 勝負画面：画面の高さ（ヘッダー・WordPress管理バーを除く）を「最低の高さ」にする。
		 * 文字は流れの中に置くので、縦幅の浅い画面では、HEROが文字に合わせて伸びる
		 * （上や下が切れない）。
		 */
		min-height: clamp(480px, var(--nm-hero-vh), 900px);
	}

	/* 写真の面：PC＝右に縦いっぱい（画面の右端まで出血）。約46% */
	body.nm-lang-industrial .nm-hero__visual {
		position: absolute;
		inset: 0 0 0 auto;
		order: 0;
		width: 46%;
		height: auto;
	}

	body.nm-lang-industrial .nm-hero__content {
		position: relative;
		inset: auto;
		flex: none;
		justify-content: center;
		width: 54%;
		padding-block: var(--i-pad-s);
		padding-left: var(--i-gutter-left);
		padding-right: var(--i-gutter);
	}

	body.nm-lang-industrial .nm-hero__heading {
		font-size: clamp(2.75rem, 4.1vw, 4.75rem);
	}

	body.nm-lang-industrial .nm-hero__lead {
		margin-top: var(--space-md);
	}

	/* 写真なし：面を置かず、文字と濃紺の余白だけで構成する */
	body.nm-lang-industrial .nm-hero--no-media {
		align-items: flex-end;
		min-height: clamp(440px, calc(78svh - var(--nm-header-h) - var(--nm-adminbar-h)), 760px);
	}

	body.nm-lang-industrial .nm-hero--no-media .nm-hero__content {
		width: 100%;
		padding-block: var(--i-pad-m);
		padding-right: var(--i-gutter-left);
	}

	body.nm-lang-industrial .nm-hero--no-media .nm-hero__heading {
		font-size: clamp(3rem, 5.6vw, 6rem);
	}
}

/*
 * 縦幅の浅いPC画面：文字の上下の余白・行間・H1の大きさを縮め、H1・本文・CTAが最初の1画面に
 * 収まるようにする。通常の画面高（約800px超）では何も変えない。
 */
@media (min-width: 1024px) and (max-height: 800px) {
	body.nm-lang-industrial .nm-hero__content,
	body.nm-lang-industrial .nm-hero--no-media .nm-hero__content {
		gap: var(--space-sm);
		padding-block: var(--space-lg);
	}

	body.nm-lang-industrial .nm-hero__heading {
		font-size: min(clamp(2.75rem, 4.1vw, 4.75rem), calc((100svh - var(--nm-adminbar-h)) * 0.1));
	}

	body.nm-lang-industrial .nm-hero--no-media .nm-hero__heading {
		font-size: min(clamp(3rem, 5.6vw, 6rem), calc((100svh - var(--nm-adminbar-h)) * 0.1));
	}

	body.nm-lang-industrial .nm-hero__lead,
	body.nm-lang-industrial .nm-hero--no-media .nm-hero__lead {
		margin-top: var(--space-sm);
	}

	body.nm-lang-industrial .nm-hero__actions,
	body.nm-lang-industrial .nm-hero--no-media .nm-hero__actions {
		margin-top: var(--space-sm);
	}
}

@media (min-width: 1024px) and (max-height: 680px) {
	body.nm-lang-industrial .nm-hero__content,
	body.nm-lang-industrial .nm-hero--no-media .nm-hero__content {
		padding-block: var(--space-md);
	}

	body.nm-lang-industrial .nm-hero__heading,
	body.nm-lang-industrial .nm-hero--no-media .nm-hero__heading {
		font-size: min(clamp(2.5rem, 4.1vw, 4.75rem), calc((100svh - var(--nm-adminbar-h)) * 0.095));
	}
}

/* ==================================================
 * ABOUT — 文章の面（左にリード、右に本文）＋ 写真の面（写真があれば、画面端から端までの大きな横長の帯）。
 * 写真は本文の横や下に挟まず、次の画面へ切り替わる大きな面として置く（次のSERVICEと直接接する）。
 * ================================================== */
body.nm-lang-industrial .nm-about__grid,
body.nm-lang-industrial .nm-about--no-media .nm-about__grid {
	display: block;
	max-width: none;
	margin-inline: 0;
}

body.nm-lang-industrial .nm-about__text {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-lg);
}

body.nm-lang-industrial .nm-about__lead {
	max-width: 24em;
	font-family: var(--font-heading);
	font-size: var(--i-lead);
	font-weight: 700;
	line-height: 1.6;
	text-wrap: balance;
}

body.nm-lang-industrial .nm-about__body {
	max-width: var(--i-measure);
	color: var(--color-text-subtle);
}

body.nm-lang-industrial .nm-about:has(.nm-about__media) {
	padding-bottom: 0;
}

body.nm-lang-industrial .nm-about__media {
	position: relative;
	margin: var(--i-pad-m) calc(-1 * var(--container-pad)) 0;
}

body.nm-lang-industrial .nm-about__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	/* 切り抜きで残す位置は、管理画面の焦点位置（--i-about-band-position）。未指定はPCで「やや上寄り」 */
	object-position: var(--i-about-band-position, 50% 50%);
	border-radius: 0;
}

body.nm-lang-industrial .nm-about__sub-images {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-sm);
	max-width: 70%;
	margin: var(--space-sm) var(--container-pad) 0;
}

body.nm-lang-industrial .nm-about__sub-image {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 0;
}

body.nm-lang-industrial .nm-about__sub-image:nth-child(n + 3) {
	display: none;
}

@media (min-width: 1024px) {
	body.nm-lang-industrial .nm-about__text {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		column-gap: var(--i-gutter);
		align-items: start;
	}

	/* コンテナの左端から、画面の左右の端まで広げる */
	body.nm-lang-industrial .nm-about__media {
		width: 100vw;
		margin: var(--i-pad-m) 0 0 calc(-1 * var(--i-gutter-left));
	}

	/* 写真の帯の高さ・切り抜き位置は、写真に合わせて調整できる（--i-about-band-height／--i-about-band-position） */
	body.nm-lang-industrial .nm-about__image {
		height: var(--i-about-band-height, min(72svh, 760px));
		aspect-ratio: auto;
		object-position: var(--i-about-band-position, 50% 40%);
	}

	/* 補助写真は、大きな写真の右下に小さく重ねる（写真の面の中に収める） */
	body.nm-lang-industrial .nm-about__sub-images {
		position: absolute;
		right: var(--i-gutter-left);
		bottom: var(--space-lg);
		width: min(26%, 380px);
		max-width: none;
		margin: 0;
	}
}

/* ==================================================
 * SERVICE — 灰色の面。事業を、2列×複数行のひとまとまりとして置く（長い縦一覧にしない）。
 * 連番・カード・罫線は使わず、大きな写真と太い文字で区切る。
 * 項目が奇数のとき、最後の1つは2列ぶんの横組み（写真＋文章）にして、右を空けない。
 * ================================================== */
body.nm-lang-industrial .nm-service__index,
body.nm-lang-industrial .nm-service__stage {
	display: none;
}

body.nm-lang-industrial .nm-service__layout {
	display: block;
}

body.nm-lang-industrial .nm-service__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: calc(var(--space-xl) * 1.1) var(--i-gutter);
}

body.nm-lang-industrial .nm-service__item {
	display: block;
	padding-block: 0;
	border-top: 0;
}

body.nm-lang-industrial .nm-service__media {
	max-width: none;
	margin-bottom: var(--space-md);
}

body.nm-lang-industrial .nm-service__image {
	display: block;
	width: 100%;
	max-width: none;
	margin-bottom: 0;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0;
}

body.nm-lang-industrial .nm-service__content {
	min-width: 0;
}

body.nm-lang-industrial .nm-service__name {
	margin-bottom: var(--space-sm);
	font-family: var(--font-heading);
	font-size: var(--i-item-title);
	font-weight: 700;
	line-height: 1.4;
}

body.nm-lang-industrial .nm-service__short {
	max-width: 30em;
	margin-bottom: var(--space-xs);
	font-weight: 700;
	color: var(--color-primary);
}

body.nm-lang-industrial .nm-service__detail {
	max-width: 30em;
	color: var(--color-text-subtle);
}

@media (min-width: 768px) {
	body.nm-lang-industrial .nm-service__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: var(--i-pad-s);
	}

	body.nm-lang-industrial .nm-service__item:last-child:nth-child(odd):has(.nm-service__media) {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--i-gutter);
		align-items: center;
	}

	body.nm-lang-industrial .nm-service__item:last-child:nth-child(odd):has(.nm-service__media) .nm-service__media {
		margin-bottom: 0;
	}
}

/* ==================================================
 * WORKS — 勝負画面。「会社の実力を見せる」。写真を主役に、大小の面で見せる。
 * 実績の連番は出さない。カテゴリ・名称・所在地は、写真の下の補助情報として1つの塊に整理する。
 *
 * PC（≥1024px）：12カラムgridに対し、3件周期で
 * 「大きな横写真（8/12）＋縦長（4/12）」→「横長（12/12）」というリズムを作る。
 * 大・小の写真は、同じ行で下端をそろえる（小さい方が、大きい方の高さまで伸びる）。
 * orderは使わない（列の再割り当てが起きない、安全な実装）。
 * SP：非対称gridは使わず、読める縦積み（比率だけ周期的に変える）。
 * ================================================== */
body.nm-lang-industrial .nm-works__media {
	border-radius: 0;
}

body.nm-lang-industrial .nm-works__number {
	display: none;
}

body.nm-lang-industrial .nm-works__link {
	gap: 0;
}

body.nm-lang-industrial .nm-works__media {
	margin-bottom: var(--space-md);
}

body.nm-lang-industrial .nm-works__category {
	margin-bottom: var(--space-xs);
	font-size: var(--font-size-label);
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--color-primary);
}

body.nm-lang-industrial .nm-works__title {
	font-size: clamp(1.125rem, 1.02rem + 0.45vw, 1.5rem);
	line-height: 1.45;
}

body.nm-lang-industrial .nm-works__meta {
	margin-top: var(--space-xs);
	gap: var(--space-xs) var(--space-md);
	font-size: var(--font-size-small);
}

@media (prefers-reduced-motion: no-preference) {
	body.nm-lang-industrial .nm-works__image {
		transition: transform 700ms var(--i-ease);
	}

	body.nm-lang-industrial .nm-works__link:hover .nm-works__image {
		transform: scale(1.03);
	}
}

@media (max-width: 1023px) {
	body.nm-lang-industrial .nm-works__grid {
		gap: var(--space-xl) var(--space-lg);
	}

	body.nm-lang-industrial .nm-works__item:nth-child(6n+1) .nm-works__media {
		aspect-ratio: 16 / 9;
	}
	body.nm-lang-industrial .nm-works__item:nth-child(6n+2) .nm-works__media {
		aspect-ratio: 3 / 4;
	}
	body.nm-lang-industrial .nm-works__item:nth-child(6n+3) .nm-works__media {
		aspect-ratio: 16 / 9;
	}
	body.nm-lang-industrial .nm-works__item:nth-child(6n+4) .nm-works__media {
		aspect-ratio: 4 / 3;
	}
	body.nm-lang-industrial .nm-works__item:nth-child(6n+5) .nm-works__media {
		aspect-ratio: 3 / 4;
	}
	body.nm-lang-industrial .nm-works__item:nth-child(6n) .nm-works__media {
		aspect-ratio: 21 / 9;
	}
}

@media (min-width: 1024px) {
	body.nm-lang-industrial .nm-works__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: var(--space-xl) var(--space-lg);
		align-items: stretch;
	}

	body.nm-lang-industrial .nm-works__item,
	body.nm-lang-industrial .nm-works__link {
		display: flex;
		flex-direction: column;
	}

	body.nm-lang-industrial .nm-works__link {
		flex: 1;
	}

	/* 3件周期：大きな横写真 → 縦長（高さは大きい方に合わせて伸びる）→ 横長 */
	body.nm-lang-industrial .nm-works__item:nth-child(3n+1) {
		grid-column: span 8;
	}
	body.nm-lang-industrial .nm-works__item:nth-child(3n+1) .nm-works__media {
		aspect-ratio: 16 / 9;
	}

	body.nm-lang-industrial .nm-works__item:nth-child(3n+2) {
		grid-column: span 4;
	}
	body.nm-lang-industrial .nm-works__item:nth-child(3n+2) .nm-works__media {
		position: relative;
		flex: 1 1 auto;
		aspect-ratio: auto;
		min-height: 18rem;
	}
	body.nm-lang-industrial .nm-works__item:nth-child(3n+2) .nm-works__image {
		position: absolute;
		inset: 0;
	}

	body.nm-lang-industrial .nm-works__item:nth-child(3n) {
		grid-column: span 12;
	}
	body.nm-lang-industrial .nm-works__item:nth-child(3n) .nm-works__media {
		aspect-ratio: 21 / 9;
	}

	/* 末尾が1件だけ余る場合は、横長の大きな面にして、右を空けない */
	body.nm-lang-industrial .nm-works__item:last-child:nth-child(3n+1) {
		grid-column: span 12;
	}
	body.nm-lang-industrial .nm-works__item:last-child:nth-child(3n+1) .nm-works__media {
		aspect-ratio: 21 / 9;
	}
}

/* ==================================================
 * STRENGTH — 濃紺の大きな面（勝負画面）。
 * SP／タブレット：項目の数に合わせた横一列（3項目なら横3カラム）。番号・見出し・説明を縦に並べる。
 * PC（≥1024px・JSが動くとき）：左に大きな項目選択UI、右に内容の面。クリックで切り替える。
 *   左右の下端をそろえる（左の項目は、右の面の高さいっぱいに等分される）。
 *   写真がある項目は、面の右半分に写真。写真が無い項目は、濃紺の面に文字だけ。
 * JSが動かない場合は、PCでも全項目を一覧のまま表示する。
 * ================================================== */
body.nm-lang-industrial :is(.nm-strength, .nm-strength-intro) {
	--color-text: #ffffff;
	--color-text-subtle: var(--i-on-deep-subtle);
	--color-border: var(--i-on-deep-rule);
	padding-block: var(--i-pad-l);
	background: var(--i-deep);
	color: var(--i-on-deep);
}

/*
 * STRENGTHの共通リード（任意）がある場合：英字ラベル → 見出し → リード文は、固定表示（sticky）の前の
 * 通常フロー（.nm-strength-intro）に置く。同じ濃紺の面として、本体（.nm-strength）とつなげて見せる
 * （境目の余白は、見出しブロックの下マージン1つぶんだけ）。リードは本体の高さ計算に含まれない。
 */
body.nm-lang-industrial .nm-strength-intro {
	display: flow-root;
	padding-bottom: 0;
}

body.nm-lang-industrial .nm-strength.nm-strength--has-intro {
	padding-top: 0;
}

/* リード文は濃紺の面なので、見出し側の文字色（白系）にそろえる */
body.nm-lang-industrial .nm-strength-intro .nm-section-lead__title {
	color: var(--i-on-deep);
}

body.nm-lang-industrial .nm-strength-intro .nm-section-lead__text {
	color: var(--i-on-deep-subtle);
}

body.nm-lang-industrial .nm-strength__image {
	width: 100%;
	max-width: none;
	aspect-ratio: 3 / 2;
	border-radius: 0;
}

body.nm-lang-industrial .nm-strength__number {
	font-size: clamp(2.25rem, 1.8rem + 2vw, 3.5rem);
	color: var(--color-accent);
}

body.nm-lang-industrial .nm-strength__heading {
	font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
	line-height: 1.5;
	color: var(--i-on-deep);
}

body.nm-lang-industrial .nm-strength__description {
	color: var(--i-on-deep-subtle);
}

/*
 * アイコン（管理画面で「画像の種類＝アイコン」にした項目）は、写真とは別の見せ方にする。
 * アイコンを単独の装飾として置かず、「番号 ─────── アイコン」のタイトルバーとして見出しの上に置き、
 * 番号・横線・アイコンをひとつの見出しシステムにする（その下に、見出し・本文）。
 *   ・番号・アイコンはアクセント色（番号と同色でバー全体をひとつの見出し要素にする）、横線は細い罫、アイコンは線の右端（囲み・丸背景なし）
 *   ・アイコンは1色（--i-icon-filter）。大きさは --i-icon（48〜56px）。元の画像の幅の半分を超えて拡大しない
 *   ・写真・書籍／資料の項目には影響しない（.nm-strength__media--icon／__slide--icon の項目だけ）
 */
body.nm-lang-industrial .nm-strength {
	--i-icon: 48px;
	/* アイコンはアクセント色（#ec4c23）の1色。元画像の色にかかわらず単色化する（フィルターはこの色に合わせた値） */
	--i-icon-filter: brightness(0) saturate(100%) invert(41%) sepia(61%) saturate(670%) hue-rotate(-34deg) brightness(91%) contrast(119%);
	--i-bar-gap: var(--space-md);
}

@media (min-width: 768px) {
	body.nm-lang-industrial .nm-strength {
		--i-icon: 56px;
	}
}

body.nm-lang-industrial .nm-strength__icon,
body.nm-lang-industrial .nm-strength__slide-icon {
	display: block;
	/* 幅は「最大--i-icon」と「元の画像の幅の半分（2倍書き出し前提）」の小さい方。32pxを下限にする */
	width: min(var(--i-icon), max(calc(var(--nm-natural-w, 112px) / 2), min(var(--nm-natural-w, 32px), 32px)));
	height: auto;
	max-width: 100%;
	max-height: var(--i-icon);
	aspect-ratio: auto;
	object-fit: contain;
	border-radius: 0;
	filter: var(--i-icon-filter);
}

/* 一覧表示（SP／タブレット／JSなし）：アイコンの項目は、番号・横線・アイコンのバーを上に、その下に見出し・本文 */
body.nm-lang-industrial .nm-strength__item:has(> .nm-strength__media--icon) {
	grid-template-columns: auto minmax(0, 1fr) auto;
	column-gap: var(--i-bar-gap);
	align-items: center;
}

body.nm-lang-industrial .nm-strength__item:has(> .nm-strength__media--icon)::before {
	content: "";
	grid-column: 2;
	grid-row: 1;
	height: 1px;
	background: var(--i-on-deep-rule);
}

body.nm-lang-industrial .nm-strength__item:has(> .nm-strength__media--icon) > .nm-strength__number {
	grid-column: 1;
	grid-row: 1;
}

body.nm-lang-industrial .nm-strength__media--icon {
	grid-column: 3;
	grid-row: 1;
	margin: 0;
	justify-self: end;
}

body.nm-lang-industrial .nm-strength__item:has(> .nm-strength__media--icon) > .nm-strength__content {
	grid-column: 1 / -1;
	grid-row: 2;
	margin-top: var(--space-sm);
}

@media (min-width: 768px) {
	body.nm-lang-industrial .nm-strength__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: var(--space-xl);
	}

	body.nm-lang-industrial .nm-strength__list:has(> .nm-strength__item:nth-child(4)) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	body.nm-lang-industrial .nm-strength__list:not(:has(> .nm-strength__item:nth-child(3))) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.nm-lang-industrial .nm-strength__item {
		grid-template-columns: minmax(0, 1fr);
		align-content: start;
		row-gap: var(--space-sm);
		padding-block: var(--space-lg);
	}

	body.nm-lang-industrial .nm-strength__media,
	body.nm-lang-industrial .nm-strength__content {
		grid-column: 1;
	}

	body.nm-lang-industrial .nm-strength__image {
		max-width: none;
		aspect-ratio: 3 / 2;
	}

	body.nm-lang-industrial .nm-strength__description {
		max-width: none;
	}
}

@media (min-width: 1024px) {
	body.nm-lang-industrial .nm-strength.is-tabbed .nm-strength__list {
		display: none;
	}

	body.nm-lang-industrial .nm-strength.is-tabbed .nm-strength__stage {
		display: grid;
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
		align-items: stretch;
		border-top: 2px solid var(--i-on-deep-rule);
		border-bottom: 2px solid var(--i-on-deep-rule);
	}

	/* 左：大きな項目選択UI。右の面の高さいっぱいに、項目を等分する（下端がそろう） */
	body.nm-lang-industrial .nm-strength__tabs {
		grid-column: 1;
		grid-row: 1;
		display: flex;
		flex-direction: column;
	}

	body.nm-lang-industrial .nm-strength__tab {
		appearance: none;
		position: relative;
		flex: 1 1 0;
		display: grid;
		grid-template-columns: 4rem minmax(0, 1fr);
		align-items: center;
		padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-md);
		border: 0;
		border-bottom: 1px solid var(--i-on-deep-rule);
		background: none;
		color: var(--i-on-deep);
		text-align: left;
		cursor: pointer;
		opacity: 0.55;
	}

	body.nm-lang-industrial .nm-strength__tab:last-child {
		border-bottom: 0;
	}

	/* 選択中：橙の太いバーを左端に。文字は不透明に */
	body.nm-lang-industrial .nm-strength__tab::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 6px;
		background: var(--color-accent);
		transform: scaleY(0);
		transform-origin: center top;
	}

	body.nm-lang-industrial .nm-strength__tab:hover {
		opacity: 0.85;
	}

	body.nm-lang-industrial .nm-strength__tab.is-active {
		opacity: 1;
	}

	body.nm-lang-industrial .nm-strength__tab.is-active::before {
		transform: scaleY(1);
	}

	body.nm-lang-industrial .nm-strength__tab:focus-visible {
		opacity: 1;
		outline: 2px solid var(--i-on-deep);
		outline-offset: -4px;
	}

	body.nm-lang-industrial .nm-strength__tab-num {
		font-family: var(--font-en);
		font-size: var(--font-size-body);
		font-weight: 700;
		letter-spacing: 0.06em;
		color: var(--color-accent);
	}

	body.nm-lang-industrial .nm-strength__tab-label {
		display: block;
		font-size: clamp(1.1875rem, 0.95rem + 0.8vw, 1.75rem);
		font-weight: 700;
		line-height: 1.45;
		text-wrap: balance;
	}

	/* 右：全スライドを同じ位置に重ね、いまのものだけ見せる。濃紺よりわずかに明るい面 */
	body.nm-lang-industrial .nm-strength__slides {
		grid-column: 2;
		grid-row: 1;
		display: grid;
		min-height: clamp(22rem, 50svh, 34rem);
		background: rgb(255 255 255 / 7%);
	}

	/*
	 * 写真がある項目：左＝文字、右＝写真の面。写真が無い項目：文字の面を右いっぱいまで使い、
	 * 余白と文字組みだけで成立させる（装飾の番号などは置かない）。どちらも、文字は面の左下に
	 * 同じ位置・同じ大きさで置くので、切り替えても文字の位置は動かない。
	 */
	body.nm-lang-industrial .nm-strength__slide {
		grid-area: 1 / 1;
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		align-items: end;
		opacity: 0;
		visibility: hidden;
	}

	body.nm-lang-industrial .nm-strength__slide:not(.nm-strength__slide--media) {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * 内容（番号・見出し・本文、アイコンの項目はタイトルバーも）は、面の縦中央〜やや上寄りに、ひとまとまりで置く。
	 * 面の高さは、3項目のうち最も高い内容（見出しの行数・本文量）で決まる（全項目が同じ面に重なるため、
	 * 項目を切り替えても面の高さは変わらない）。内容は、面の上の行（--i-block-top）の下から始まり、
	 * 面の下に必ず余白（下パディング）を残す。固定のpx高さへ押し込まない。
	 * 内容の始まる位置は全項目で同じ（01／02／03で動かない）。位置は ui.js が、面の高さと最大の内容量から決める。
	 */
	body.nm-lang-industrial .nm-strength__slide {
		/* 上の行：既定は小さな余白（JSが動かなくても、内容は必ず面に収まる）。JSが、面の高さと全項目の内容量から、
		   「面の縦45%を中心に」置く位置（--nm-block-top）を決める。 */
		--i-block-top: var(--nm-block-top, var(--space-sm));
		grid-template-rows: var(--i-block-top) auto minmax(0, 1fr);
	}

	body.nm-lang-industrial .nm-strength__slide.is-active {
		opacity: 1;
		visibility: visible;
	}

	/* 写真があるスライド：右半分いっぱいに写真 */
	body.nm-lang-industrial .nm-strength__slide-media {
		position: relative;
		grid-column: 2;
		grid-row: 1 / -1;
		align-self: stretch;
		min-height: 100%;
	}

	body.nm-lang-industrial .nm-strength__slide-image {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
		object-fit: cover;
	}

	/*
	 * アイコンのスライド：右の面は使わず、文字の面の中に「番号 ─────── アイコン」のタイトルバーを置き、
	 * その下に見出し・本文を続ける。内容のひとまとまり（タイトルバー〜本文）は、写真の項目と同じ
	 * 位置（面の縦中央〜やや上寄り）から始まる。
	 */
	body.nm-lang-industrial .nm-strength__slide--icon {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-rows: var(--i-block-top) auto auto auto minmax(0, 1fr);
		column-gap: var(--i-bar-gap);
		align-items: center;
		padding: 0 var(--space-lg) var(--space-lg);
	}

	body.nm-lang-industrial .nm-strength__slide--icon::before {
		content: "";
		grid-column: 2;
		grid-row: 2;
		height: 1px;
		background: var(--i-on-deep-rule);
	}

	body.nm-lang-industrial .nm-strength__slide--icon .nm-strength__slide-content {
		display: contents;
	}

	body.nm-lang-industrial .nm-strength__slide--icon .nm-strength__slide-number {
		grid-column: 1;
		grid-row: 2;
		margin: 0;
		font-size: clamp(1.5rem, 1.1rem + 0.9vw, 1.875rem);
		line-height: 1;
	}

	body.nm-lang-industrial .nm-strength__slide-media--icon {
		grid-column: 3;
		grid-row: 2;
		align-self: center;
		justify-self: end;
		min-height: 0;
		padding: 0;
	}

	body.nm-lang-industrial .nm-strength__slide--icon .nm-strength__slide-heading {
		grid-column: 1 / -1;
		grid-row: 3;
		align-self: start;
		margin-top: var(--space-md);
	}

	body.nm-lang-industrial .nm-strength__slide--icon .nm-strength__slide-description {
		grid-column: 1 / -1;
		grid-row: 4;
		align-self: start;
	}

	body.nm-lang-industrial .nm-strength__slide-content {
		grid-column: 1;
		grid-row: 2;
		align-self: start;
		/* 上は --i-block-top の行が受け持つ。左右・下の余白は全項目で一定 */
		padding: 0 var(--space-lg) var(--space-lg);
	}

	body.nm-lang-industrial .nm-strength__slide-number {
		display: block;
		margin-bottom: var(--space-sm);
		font-family: var(--font-en);
		font-size: var(--font-size-body);
		font-weight: 700;
		letter-spacing: 0.06em;
		color: var(--color-accent);
	}

	body.nm-lang-industrial .nm-strength__slide-heading {
		font-size: clamp(1.625rem, 1.1rem + 1.2vw, 2.25rem);
		line-height: 1.4;
		color: var(--i-on-deep);
		text-wrap: balance;
	}

	body.nm-lang-industrial .nm-strength__slide-description {
		max-width: 36em;
		margin: var(--space-md) 0 0;
		color: var(--i-on-deep-subtle);
	}
}

/*
 * STRENGTH — PCのscrollytelling（JSが動き、画面の高さが640px以上のとき。.is-scrolly）。
 * 濃紺の大きな面が画面に固定され、スクロールするだけで 01 → 02 → 03 が順に切り替わる。
 * 左の項目のクリック、↑↓キー、Home／Endでも切り替えられる。面全体の高さは、写真あり・なしで
 * 変わらない（全スライドを同じ位置に重ね、面は画面の高さで決まる）。
 * 1項目あたりのスクロール量は --i-strength-step（PARTNERより短く、テンポよく切り替わる）。
 * JSが無い・SP・縦幅が浅い画面では、固定せず、上の一覧／タブUIのまま。
 */
@media (min-width: 1024px) {
	body.nm-lang-industrial .nm-strength.is-scrolly {
		padding-block: 0;
		/* 固定する1画面ぶん ＋ 切り替え回数 ×（1項目あたりのスクロール量） */
		min-height: calc(100svh - var(--i-sticky-top) + (var(--nm-count, 3) - 1) * var(--i-strength-step));
	}

	body.nm-lang-industrial .nm-strength.is-scrolly > .nm-container {
		position: sticky;
		top: var(--i-sticky-top);
		display: flex;
		flex-direction: column;
		/*
		 * 高さは「画面1つぶん」を下限にし、中身（いちばん長い項目）が収まらない場合は伸ばす。
		 * 固定すると、右の面が下の罫線を越えて本文と重なる（面の下端は、いちばん長い項目の下端）。
		 */
		min-height: max(560px, calc(100svh - var(--i-sticky-top)));
		/*
		 * 見出しの下の「項目UI＋内容パネル」のセットを、画面内で中央〜やや上寄りに見せる。
		 * 見出しの位置は変えず、下の余白を「見出しの上の余白＋見出しの高さ」と同じにして、
		 * 面の上下の余白を等しくする（＝画面の中央）。さらに --i-strength-lift ぶん上へ寄せる。
		 * 面は中身より縮まない（min-height:auto）ので、低い画面では従来どおり面が優先される。
		 */
		padding-top: var(--i-pad-s);
		padding-bottom: calc(
			var(--i-pad-s) + var(--i-head-pad) + 2px + var(--i-h2) * 1.3 + var(--i-head-gap-compact) + var(--i-strength-lift)
		);
	}

	body.nm-lang-industrial .nm-strength.is-scrolly .nm-section-heading {
		margin-bottom: var(--i-head-gap-compact);
	}

	/*
	 * リード（任意）がある場合：見出しは固定領域の外（.nm-strength-intro）にあるため、下パディングの式から
	 * 「見出しぶん」を除き、面が画面の上下で等しい余白になるようにする（lift ぶんだけ上へ寄せるのは同じ）。
	 */
	body.nm-lang-industrial .nm-strength--has-intro.is-scrolly > .nm-container {
		padding-bottom: calc(var(--i-pad-s) + var(--i-strength-lift));
	}

	/* 見出しブロックの下マージンを詰める：本体（固定領域）の上パディング（--i-pad-s）が、リードと面の間の余白を兼ねる */
	body.nm-lang-industrial .nm-strength-intro:has( + .nm-strength.is-scrolly) .nm-section-heading {
		margin-bottom: 0;
	}

	/* 面は、見出しの下から画面の下端いっぱい（左の一覧も同じ高さに等分される）。中身より縮めない */
	body.nm-lang-industrial .nm-strength.is-scrolly .nm-strength__stage {
		flex: 1 1 auto;
		min-height: auto;
	}

	body.nm-lang-industrial .nm-strength.is-scrolly .nm-strength__slides {
		min-height: 0;
	}

	/* 大きな面でも、項目名は1行に収まる大きさ（文字の大きさは、写真あり・なしで変えない） */
	body.nm-lang-industrial .nm-strength.is-scrolly .nm-strength__tab-label {
		font-size: clamp(1.125rem, 0.9rem + 0.7vw, 1.5rem);
	}
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
	body.nm-lang-industrial .nm-strength__tab {
		transition: opacity 160ms var(--i-ease);
	}

	body.nm-lang-industrial .nm-strength__tab::before {
		transition: transform 160ms var(--i-ease);
	}

	body.nm-lang-industrial .nm-strength__slide {
		transition: opacity 180ms var(--i-ease), visibility 0s 180ms;
	}

	body.nm-lang-industrial .nm-strength__slide.is-active {
		transition: opacity 180ms var(--i-ease);
	}
}

/* ==================================================
 * FEATURE / STORY — 構造は全Design Language共通（components.css）。
 * 左約67%が文章（主役）、右約33%が写真（角丸なしの独立した面）。
 * STORYが複数並んでも、それぞれが独立した物語に見えるよう、
 *   ・各STORYの上端に、コンテナいっぱいの太い罫（左端に橙のバー）
 *   ・地色を灰／白／灰と交互にする
 * ================================================== */
body.nm-lang-industrial .nm-feature {
	--feature-radius: 0px;
	--feature-ratio: 4 / 5;
	--feature-measure: 34em;
	--feature-gap: clamp(2rem, 4.5vw, 4.5rem);
	padding-block: calc(var(--i-pad-m) * 1.1);
	background: var(--color-bg-subtle);
}

body.nm-lang-industrial .nm-feature--2 {
	background: var(--color-bg);
}

/*
 * STORYの見出しは、文章カラムの中にあるため、そのままだと太い罫が文章の幅までしか
 * 伸びない。罫と橙のバーを、文章と写真をまとめる枠の上端へ移し、他のセクションと同じ
 * 「コンテナいっぱいの太い罫」にそろえる（写真も罫の下から始まる）。
 */
body.nm-lang-industrial .nm-feature__inner {
	position: relative;
	padding-top: var(--i-head-pad);
	border-top: 2px solid var(--color-primary);
}

body.nm-lang-industrial .nm-feature__inner::before {
	content: "";
	position: absolute;
	top: -2px;
	left: 0;
	width: 4.5rem;
	height: 6px;
	background: var(--color-accent);
}

body.nm-lang-industrial .nm-feature .nm-section-heading {
	padding-top: 0;
	border-top: 0;
	margin-bottom: var(--i-head-gap-compact);
}

body.nm-lang-industrial .nm-feature .nm-section-heading::before {
	display: none;
}

body.nm-lang-industrial .nm-feature__body {
	font-size: clamp(1rem, 0.94rem + 0.25vw, 1.125rem);
	line-height: 2.1;
	color: var(--color-text);
}

body.nm-lang-industrial .nm-feature__body p {
	margin-bottom: 1.5em;
}

body.nm-lang-industrial .nm-feature__body p:last-child {
	margin-bottom: 0;
}

@media (min-width: 900px) {
	body.nm-lang-industrial .nm-feature__inner {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	}

	body.nm-lang-industrial .nm-feature--no-media .nm-feature__inner {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==================================================
 * PHOTO STREAM — 動き・構造は全Design Language共通（components.css）。
 * INDUSTRIALの見た目：角丸なし・gapを詰め、やや高さのある写真を直線的に並べる。
 * PCは静かに自動スクロール、SPは横スワイプ。
 * ================================================== */
body.nm-lang-industrial .nm-photo-stream-section {
	--stream-section-pad: var(--i-pad-s);
}

body.nm-lang-industrial .nm-photo-stream__heading .nm-section-heading {
	margin-bottom: var(--i-head-gap-compact);
}

body.nm-lang-industrial .nm-photo-stream {
	--stream-radius: 0px;
	--stream-gap: 12px;
	--stream-height: 280px;
	--stream-height-sp: 180px;
	--stream-ratio-lg: 3 / 2;
	--stream-ratio-md: 16 / 10;
	--stream-ratio-sm: 3 / 4;
}

/* ==================================================
 * PEOPLE — 写真を「面」として扱う。灰色の面に、大きな縦長の写真を、隙間を詰めて並べる。
 * 人数に合わせて列が決まる（3人なら横3列、4人以上なら4列まで）。名前・役職・コメントは写真の下にそろえる。
 * SPは、左に写真・右に文章の行（下のSP節）。
 * ================================================== */
body.nm-lang-industrial .nm-people__media {
	--people-radius: 0;
	--people-ratio: 4 / 5;
}

body.nm-lang-industrial .nm-people__name {
	margin-top: var(--space-md);
	font-size: var(--i-item-title);
	line-height: 1.4;
}

body.nm-lang-industrial .nm-people__role {
	margin-top: var(--space-xs);
	font-size: var(--font-size-small);
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--color-primary);
}

body.nm-lang-industrial .nm-people__comment {
	margin-top: var(--space-sm);
	max-width: 24em;
}

@media (min-width: 768px) {
	body.nm-lang-industrial .nm-people__grid {
		--people-min: 15rem;
		grid-template-columns: repeat(auto-fit, minmax(var(--people-min), 1fr));
		gap: var(--space-xl) var(--space-md);
	}
}

/* ==================================================
 * PROFILE ＆ MESSAGE — 同じ人物の2つのセクションとして、組版のルールを揃える。
 *
 * 役割の分担：
 *   PROFILE＝「人物を見せる」場。肩書き → 氏名（このセクションの主役）→ 経歴 → 資格 → 大切にしていること。
 *   MESSAGE＝「考え・想いを伝える」場。見出し → ステートメント → 本文 →（末尾に小さな署名）。
 *            氏名はPROFILEで見せているため、ここでは大きく再掲しない。
 *
 * 揃えるルール（PC ≥1024px）：
 *   ・左＝写真（4:5・最大26rem）、右＝文章。写真の上端と文章の開始位置は同じ（グリッドの上端）。
 *   ・写真と文章の間隔、文章の最大幅（36em）、本文の文字組み（行間2）も同じ。
 *   ・見出し（セクション見出し）は、どちらも写真・文章の上に、左揃えで置く。
 * SP：どちらも 見出し → 写真 → 文章 の1列。写真はコンテナ幅の4:5。
 * ================================================== */
body.nm-lang-industrial .nm-profile,
body.nm-lang-industrial .nm-message {
	--i-person-photo: 26rem;
	--i-person-gap: clamp(2.5rem, 5vw, 5rem);
	--i-person-measure: 34em;
	padding-block: var(--i-pad-m);
}

body.nm-lang-industrial .nm-profile__inner,
body.nm-lang-industrial .nm-message__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-xl);
	max-width: none;
	margin-inline: 0;
	align-items: start;
}

/* MESSAGEの本文ブロックは、旧レイアウトの display: contents をやめ、通常のブロックとして右の列に置く */
body.nm-lang-industrial .nm-message__body {
	display: block;
	min-width: 0;
}

/* layout.cssの中央寄せ・20ch指定を打ち消し、他のセクションと同じ左揃えの見出しにする */
body.nm-lang-industrial .nm-message .nm-section-heading__title {
	max-width: none;
	margin-inline: 0;
	font-size: var(--i-h2);
}

body.nm-lang-industrial .nm-profile__media,
body.nm-lang-industrial .nm-message__media {
	width: min(100%, var(--i-person-photo));
	margin: 0;
}

body.nm-lang-industrial .nm-profile__photo,
body.nm-lang-industrial .nm-message__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	/* 人物は頭を切らないよう、上寄せで切り抜く */
	object-position: 50% 14%;
	border-radius: 0;
}

/*
 * PROFILE：右の文章（経歴＋PROFILE DATA）が増えたため、写真を少し大きく・縦長にして左右のボリューム差を減らす。
 * 幅 26rem → 28rem、比率 4:5 → 3:4（MESSAGEの写真は変えない）。下端を右にそろえる必要はない。
 */
body.nm-lang-industrial .nm-profile {
	--i-person-photo: 28rem;
}

body.nm-lang-industrial .nm-profile__photo {
	aspect-ratio: 3 / 4;
}

/* ---------- PROFILE：肩書き → 氏名（主役）→ 経歴 → 資格 → 大切にしていること ---------- */
body.nm-lang-industrial .nm-profile__attribution {
	display: block;
	margin: 0 0 var(--space-lg);
	font-size: var(--font-size-body);
	font-weight: 400;
}

/* 肩書き：本文より少し強く、氏名ほどは強くしない（小さな見出しの扱い） */
body.nm-lang-industrial .nm-profile__position {
	display: block;
	margin-bottom: var(--space-xs);
	font-size: var(--font-size-body);
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--color-primary);
}

/* 氏名：PROFILEの主役（このセクションで最も大きい文字） */
body.nm-lang-industrial .nm-profile__name {
	display: block;
	font-family: var(--font-heading);
	font-size: clamp(1.875rem, 1.3rem + 1.6vw, 2.75rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.02em;
	color: var(--color-text);
}

body.nm-lang-industrial .nm-profile__bio {
	max-width: var(--i-person-measure);
	font-size: var(--font-size-body);
	line-height: 2;
	color: var(--color-text);
}

body.nm-lang-industrial .nm-profile__bio > :first-child {
	margin-top: 0;
}

body.nm-lang-industrial .nm-profile__qualifications {
	max-width: var(--i-person-measure);
	margin-top: var(--space-xl);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-border);
	font-size: var(--font-size-small);
}

/* PROFILE DATA：シャープに整理する。項目の上に細い罫、項目名は小さく締まった字間、値ははっきり */
body.nm-lang-industrial .nm-profile__data {
	max-width: var(--i-person-measure);
	margin-top: var(--space-xl);
	column-gap: var(--space-lg);
	border-top: 2px solid var(--color-primary);
}

body.nm-lang-industrial .nm-profile__data-item {
	padding-block: var(--space-md);
	border-top: 0;
	border-bottom: 1px solid var(--color-border);
}

body.nm-lang-industrial .nm-profile__data-ja {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--color-primary);
}

body.nm-lang-industrial .nm-profile__data-en {
	font-size: 0.625rem; /* 10px */
	letter-spacing: 0.14em;
}

body.nm-lang-industrial .nm-profile__data-value {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--i-body-text);
}

/* 「大切にしていること」：本文の下の補足ブロック（左に細い縦のバー） */
body.nm-lang-industrial .nm-profile__values {
	max-width: var(--i-person-measure);
	margin-top: var(--space-xl);
	padding-left: var(--space-md);
	border-left: 3px solid var(--color-accent);
	font-size: var(--font-size-body);
	font-weight: 400;
	line-height: 1.9;
	color: var(--color-text);
}

body.nm-lang-industrial .nm-profile__values-label {
	display: block;
	margin-bottom: var(--space-xs);
	font-size: var(--font-size-small);
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--color-text-subtle);
}

/* ---------- MESSAGE：ステートメント → 本文 →（末尾に小さな署名） ---------- */
body.nm-lang-industrial .nm-message__pull-line {
	max-width: var(--i-person-measure);
	margin: 0 0 var(--space-lg);
	font-family: var(--font-heading);
	font-size: clamp(1.5rem, 0.9rem + 1.6vw, 2.25rem);
	font-weight: var(--font-weight-statement, 700);
	line-height: 1.45;
	color: var(--color-text);
}

body.nm-lang-industrial .nm-message__text {
	max-width: var(--i-person-measure);
	font-size: var(--font-size-body);
	line-height: 2;
	color: var(--color-text);
}

body.nm-lang-industrial .nm-message__text > :first-child {
	margin-top: 0;
}

/* 署名：小さく、本文の末尾に。肩書き・氏名とも本文より控えめ */
body.nm-lang-industrial .nm-message__signature {
	margin: var(--space-xl) 0 0;
}

/*
 * 手書き署名（画像）：氏名テキストの代わりに、本文の末尾へ。肩書き（任意）を上に小さく添える。
 * 実際の縦横比を保ち（contain）、原寸より大きくしない。PC 高さ64px・最大幅220px／SP 高さ48px・最大幅170px。
 */
body.nm-lang-industrial .nm-message__signed {
	--i-sig-h: 48px;
	--i-sig-w: 170px;
	margin: var(--space-lg) 0 0;
}

body.nm-lang-industrial .nm-message__signed .nm-message__position {
	margin: 0 0 var(--space-xs);
}

body.nm-lang-industrial .nm-message__signed .nm-message__signature {
	display: block;
	width: auto;
	height: var(--i-sig-h);
	max-width: min(var(--i-sig-w), var(--nm-natural-w, var(--i-sig-w)), 100%);
	margin: 0;
	object-fit: contain;
	object-position: left center;
}

@media (min-width: 768px) {
	body.nm-lang-industrial .nm-message__signed {
		--i-sig-h: 64px;
		--i-sig-w: 220px;
	}
}

body.nm-lang-industrial .nm-message__attribution {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-xs) var(--space-sm);
	margin: var(--space-lg) 0 0;
	font-size: var(--font-size-small);
	font-weight: 400;
	color: var(--color-text-subtle);
}

body.nm-lang-industrial .nm-message__position {
	font-size: var(--font-size-small);
	font-weight: 400;
	letter-spacing: 0.06em;
	color: var(--color-text-subtle);
}

body.nm-lang-industrial .nm-message__name {
	font-family: inherit;
	font-size: var(--font-size-small);
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--color-text);
}

/* 写真が無い場合：文章だけで成立する（左揃え・読みやすい幅） */
body.nm-lang-industrial .nm-profile--no-media .nm-profile__inner,
body.nm-lang-industrial .nm-message--no-media .nm-message__inner {
	grid-template-columns: minmax(0, 1fr);
	max-width: none;
	margin-inline: 0;
}

@media (min-width: 1024px) {
	body.nm-lang-industrial .nm-profile:not(.nm-profile--no-media) .nm-profile__inner,
	body.nm-lang-industrial .nm-message:not(.nm-message--no-media) .nm-message__inner {
		grid-template-columns: minmax(0, var(--i-person-photo)) minmax(0, 1fr);
		column-gap: var(--i-person-gap);
	}

	/* 写真は左に固定（文章の長さで伸び縮みしない）。上端は文章の開始位置と同じ */
	body.nm-lang-industrial .nm-profile__media,
	body.nm-lang-industrial .nm-message__media {
		width: 100%;
		align-self: start;
	}

	body.nm-lang-industrial .nm-message--no-media .nm-message__pull-line {
		font-size: clamp(1.75rem, 0.8rem + 2.4vw, 3rem);
		line-height: 1.35;
	}
}

/* ==================================================
 * COMPANY — PCは「左に会社概要の表・右に地図」。SPは表 → 地図。
 * 地図を使わない場合は、外観写真・アクセス案内（管理画面で入力）が右側に入る。
 * どれも無い場合は、右側を空けず、表を全幅に広げる。
 * ================================================== */
body.nm-lang-industrial .nm-company__inner:not(:has(.nm-company__map, .nm-company__aside)) {
	grid-template-columns: minmax(0, 1fr);
}

body.nm-lang-industrial .nm-company__list {
	min-width: 0;
}

body.nm-lang-industrial .nm-company__label {
	font-weight: 700;
	color: var(--color-text);
}

@media (min-width: 1024px) {
	body.nm-lang-industrial .nm-company__inner:has(.nm-company__map, .nm-company__aside) {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		column-gap: clamp(2.5rem, 5vw, 5rem);
		align-items: stretch;
	}

	/* 表は上に詰め（行を引き伸ばさない）、地図・外観写真・アクセス案内の面は、表の高さに合わせて右側いっぱいに広げる */
	body.nm-lang-industrial .nm-company__list {
		align-self: start;
	}

	body.nm-lang-industrial .nm-company__map {
		min-height: 360px;
	}

	body.nm-lang-industrial .nm-company__aside {
		display: flex;
		flex-direction: column;
		gap: var(--space-md);
	}

	/* 写真は枠を押し広げず、枠いっぱいに敷く */
	body.nm-lang-industrial .nm-company__photo {
		position: relative;
		flex: 1;
		min-height: 360px;
	}

	body.nm-lang-industrial .nm-company__photo-image {
		position: absolute;
		inset: 0;
		height: 100%;
		aspect-ratio: auto;
	}

	body.nm-lang-industrial .nm-company__aside--access .nm-company__access {
		flex: 1;
	}
}

/* アクセス案内だけの場合は、地図や写真の代わりに、白い面として右側に置く（地色は灰色） */
body.nm-lang-industrial .nm-company__aside--access .nm-company__access {
	padding: var(--space-lg);
	background: var(--color-bg);
}

body.nm-lang-industrial .nm-company__access-label {
	font-family: var(--font-en);
	font-size: var(--font-size-label);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* ==================================================
 * CONTACT — シンプルに行動喚起。左揃え。
 * 電話番号は、橙の主CTA（線矢印）。フォーム・LINE・メールは、円矢印の副リンク。
 * ================================================== */
body.nm-lang-industrial .nm-contact__inner {
	max-width: var(--container);
	text-align: left;
}

body.nm-lang-industrial .nm-contact__lead {
	max-width: 30em;
	margin-inline: 0;
}

body.nm-lang-industrial .nm-contact__methods {
	align-items: flex-start;
	justify-content: flex-start;
	gap: var(--space-lg) var(--space-xl);
	margin-top: var(--space-xl);
}

@media (min-width: 640px) {
	body.nm-lang-industrial .nm-contact__methods {
		align-items: center;
	}
}

body.nm-lang-industrial .nm-contact__method--tel .nm-button {
	gap: 1.8em;
	padding-inline: 1.6em;
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	letter-spacing: 0.04em;
}

body.nm-lang-industrial .nm-contact__hours {
	margin-top: var(--space-sm);
	font-size: var(--font-size-small);
	color: var(--color-text-subtle);
}

body.nm-lang-industrial .nm-contact__method--form .nm-button,
body.nm-lang-industrial .nm-contact__method--line .nm-button,
body.nm-lang-industrial .nm-contact__method--email .nm-button {
	display: inline-flex;
	align-items: center;
	gap: 0.8em;
}

body.nm-lang-industrial .nm-contact__method .nm-button--secondary {
	min-height: 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: var(--font-size-body);
	color: var(--color-text);
}

body.nm-lang-industrial .nm-contact__method .nm-button--secondary:hover {
	background: none;
	color: var(--color-primary);
}

/* ==================================================
 * RECRUIT CTA の見出し：1〜2文字だけ次の行へ落ちるのを防ぐ
 * ================================================== */
body.nm-lang-industrial .nm-recruit-cta__heading {
	text-wrap: balance;
	line-break: strict;
}

/* ==================================================
 * SPの縦方向のリズム：情報系セクションの余白だけを、約10%（--i-sp-k）圧縮する。
 * 文字サイズ・行間は変えない。HERO・STRENGTH・WORKS・MESSAGE（勝負画面）は
 * 今の余白感をそのまま保つ。
 * ================================================== */
@media (max-width: 767px) {
	body.nm-lang-industrial .nm-about,
	body.nm-lang-industrial .nm-service,
	body.nm-lang-industrial .nm-feature,
	body.nm-lang-industrial .nm-people,
	body.nm-lang-industrial .nm-job,
	body.nm-lang-industrial .nm-recruit-cta,
	body.nm-lang-industrial .nm-company,
	body.nm-lang-industrial .nm-contact,
	body.nm-lang-industrial .nm-photo-stream-section {
		--i-head-pad: calc(var(--space-md) * var(--i-sp-k));
		--i-head-gap: calc(var(--space-xl) * var(--i-sp-k));
		--i-head-gap-compact: calc(var(--space-lg) * var(--i-sp-k));
	}

	body.nm-lang-industrial .nm-about,
	body.nm-lang-industrial .nm-service,
	body.nm-lang-industrial .nm-people,
	body.nm-lang-industrial .nm-job,
	body.nm-lang-industrial .nm-recruit-cta,
	body.nm-lang-industrial .nm-company,
	body.nm-lang-industrial .nm-contact {
		padding-block: calc(var(--i-pad-m) * var(--i-sp-k));
	}

	/* STORYは、SPでは他の情報系セクションとほぼ同じ余白に収める */
	body.nm-lang-industrial .nm-feature {
		--feature-ratio: 4 / 3;
		--feature-gap: calc(2rem * var(--i-sp-k));
		padding-block: calc(var(--i-pad-m) * 1.05 * var(--i-sp-k));
	}

	body.nm-lang-industrial .nm-feature__body {
		line-height: 2;
	}

	body.nm-lang-industrial .nm-feature__body p {
		margin-bottom: 1.25em;
	}

	body.nm-lang-industrial .nm-service__list {
		row-gap: calc(var(--space-xl) * 1.1 * var(--i-sp-k));
	}

	/* PEOPLE：SPでは、写真を全幅で縦に積まず、左に小さな写真・右に文章の行にする */
	body.nm-lang-industrial .nm-people__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: calc(var(--space-lg) * var(--i-sp-k));
	}

	body.nm-lang-industrial .nm-people__item {
		display: grid;
		grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
		column-gap: var(--space-md);
		align-items: start;
	}

	body.nm-lang-industrial .nm-people__item:not(:has(.nm-people__media)) {
		grid-template-columns: minmax(0, 1fr);
	}

	body.nm-lang-industrial .nm-people__media {
		grid-row: 1 / span 3;
	}

	body.nm-lang-industrial .nm-people__name,
	body.nm-lang-industrial .nm-people__role,
	body.nm-lang-industrial .nm-people__comment {
		grid-column: 2;
	}

	body.nm-lang-industrial .nm-people__item:not(:has(.nm-people__media)) .nm-people__name,
	body.nm-lang-industrial .nm-people__item:not(:has(.nm-people__media)) .nm-people__role,
	body.nm-lang-industrial .nm-people__item:not(:has(.nm-people__media)) .nm-people__comment {
		grid-column: 1;
	}

	body.nm-lang-industrial .nm-people__name {
		margin-top: 0;
		font-size: var(--font-size-subheading);
	}
}

/* ==================================================
 * 通常本文の色 — STYLE 04の長文は、セクションを問わず同じ色（--i-body-text）にそろえる。
 * 見出し（#141414）・リード文／強調文（濃紺）・ラベル／注記（薄いグレー）との階層は維持する。
 * 濃紺の面（HERO・STRENGTH・フッター）の文字はここでは変えない。
 * 他の本文ルールより後ろに置き、同じ詳細度で優先させる。
 * ================================================== */
body.nm-lang-industrial :is(
	.nm-section-heading__desc,
	.nm-about__body,
	.nm-service__detail,
	.nm-job__description,
	.nm-job__requirements,
	.nm-profile__bio,
	.nm-profile__qualifications li,
	.nm-message__text,
	.nm-feature__body,
	.nm-voice__content,
	.nm-flow__description,
	.nm-compliance__text,
	.nm-people__comment,
	.nm-recruit-cta__body
) {
	color: var(--i-body-text);
}

/* ==================================================
 * 短い説明・リード文の色 — 通常本文（#4d4d4d）とは役割が違うため、Primary Navyにする。
 * STYLE 04の文字は3階層：
 *   項目見出し／見出し：#141414（--color-text）
 *   短い説明・リード：#153653（--color-primary。SERVICEの短い説明・ABOUT／CONTACTのリード）
 *   通常本文：#4d4d4d（--i-body-text）
 * ラベル・注記の薄いグレー（--color-text-subtle）は変えない。濃紺の面（HERO・STRENGTH）の文字は対象外。
 * ================================================== */
body.nm-lang-industrial :is(
	.nm-service__short,
	.nm-about__lead,
	.nm-contact__lead
) {
	color: var(--i-lead-text);
}

/* ==================================================
 * セクション共通のリード文（任意）— 英字ラベル → 見出し → リード文。STYLE 04：
 *   ・最初のまとまり（空行で区切った1つ目）は、短いリード見出し（濃紺・太字・やや大きく）
 *   ・続きの文章は、本文色（--i-body-text）・行間2.0・34em以内
 *   ・見出しの罫・英字ラベルの下に、見出しと本文の中間くらいの余白で置く
 * ================================================== */
body.nm-lang-industrial .nm-section-heading__lead {
	order: 3;
	max-width: var(--i-measure);
	margin-top: var(--space-lg);
}

body.nm-lang-industrial .nm-section-lead__title {
	margin-bottom: var(--space-sm);
	font-family: var(--font-heading);
	font-size: clamp(1.1875rem, 1rem + 0.9vw, 1.5rem);
	font-weight: 700;
	line-height: 1.6;
	color: var(--i-lead-text);
	text-wrap: balance;
}

body.nm-lang-industrial .nm-section-lead__text {
	font-size: var(--font-size-body);
	line-height: 2;
	color: var(--i-body-text);
	text-wrap: pretty;
}

body.nm-lang-industrial .nm-section-lead__text + .nm-section-lead__text {
	margin-top: 1.1em;
}

/* 本文の強調（<strong>）：太さだけ。色は本文のまま。SPでも過度に強く見えないよう、サイズ・字間は変えない */
body.nm-lang-industrial :is(.nm-about__body, .nm-profile__bio, .nm-message__text, .nm-feature__body, .nm-voice__content,
	.nm-service__detail, .nm-flow__description, .nm-strength__description, .nm-strength__slide-description,
	.nm-job__description, .nm-people__comment) strong {
	font-weight: 700;
	color: inherit;
}

/* ==================================================
 * 見出しのアクセント文字 — 管理画面の「強調文字列」と一致した部分だけを、アクセント色にする。
 * 色は自由に指定できず、presetのアクセントトークン（--color-accent）だけを使う。
 * ================================================== */
body.nm-lang-industrial .nm-accent {
	color: var(--color-accent);
}

/* ==================================================
 * 背景色の選択（MESSAGE・PHOTO STREAM）— White／Light Gray／Navy の3つだけ。
 * 未指定のときはクラスが付かず、これまでの背景のまま。
 * Navyは、文字・罫・ラベルを白系にする（STRENGTHと同じ濃紺の面）。
 * ================================================== */
body.nm-lang-industrial .nm-message--bg-white,
body.nm-lang-industrial .nm-photo-stream-section--bg-white {
	background: var(--color-bg);
}

body.nm-lang-industrial .nm-message--bg-subtle,
body.nm-lang-industrial .nm-photo-stream-section--bg-subtle {
	background: var(--color-bg-subtle);
}

body.nm-lang-industrial .nm-message--bg-deep,
body.nm-lang-industrial .nm-photo-stream-section--bg-deep {
	--color-text: #ffffff;
	--color-text-subtle: var(--i-on-deep-subtle);
	--color-border: var(--i-on-deep-rule);
	--i-body-text: rgb(255 255 255 / 88%);
	background: var(--i-deep);
	color: var(--i-on-deep);
}

body.nm-lang-industrial .nm-message--bg-deep .nm-section-heading,
body.nm-lang-industrial .nm-photo-stream-section--bg-deep .nm-section-heading {
	border-top-color: var(--i-on-deep-rule);
}

body.nm-lang-industrial .nm-message--bg-deep .nm-section-heading__title,
body.nm-lang-industrial .nm-message--bg-deep .nm-message__pull-line,
body.nm-lang-industrial .nm-message--bg-deep .nm-message__name {
	color: var(--i-on-deep);
}

body.nm-lang-industrial .nm-message--bg-deep .nm-message__position,
body.nm-lang-industrial .nm-message--bg-deep .nm-message__attribution,
body.nm-lang-industrial .nm-message--bg-deep .nm-section-heading__label,
body.nm-lang-industrial .nm-photo-stream-section--bg-deep .nm-section-heading__label {
	color: var(--i-on-deep-subtle);
}

/* ==================================================
 * CONSULTATION — 2カラムのまま、情報の階層を余白・番号・ラベルで見せる。
 *   番号（小さく・濃紺）─ 細い線 → 見出し → 本文 → こんな方へ（ラベル＋白い小さな帯）
 * 地色は淡いグレー、「こんな方へ」の対象者だけ白い面にして、本文に埋もれないようにする。
 * 強い囲み枠・影は使わない。線は番号の右に伸びる、色の薄い1本だけ。
 * 他のセクション（SERVICE）が使う .nm-service__* を、CONSULTATION内に限って調整する。
 * ================================================== */
body.nm-lang-industrial .nm-consultation {
	--i-ground: var(--color-bg-subtle);
	background: var(--i-ground);
}

body.nm-lang-industrial .nm-consultation .nm-service__item {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

/* 番号：見出しの上、静かなアクセント（濃紺）。右へ細い線が伸びる */
body.nm-lang-industrial .nm-consultation .nm-service__index {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin: 0 0 var(--space-md);
	font-family: var(--font-en);
	font-size: var(--font-size-small);
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1;
	color: var(--color-primary);
}

body.nm-lang-industrial .nm-consultation .nm-service__index::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: color-mix(in srgb, var(--color-primary) 22%, transparent);
}

/* 内容：見出し → 本文 → こんな方へ。本文の長さが違っても、「こんな方へ」の位置は行でそろう */
body.nm-lang-industrial .nm-consultation .nm-service__content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

body.nm-lang-industrial .nm-consultation .nm-service__name {
	margin-bottom: var(--space-md);
}

body.nm-lang-industrial .nm-consultation .nm-service__detail {
	margin-bottom: var(--space-lg);
}

body.nm-lang-industrial .nm-consultation__target {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-xs);
	margin: auto 0 0;
}

body.nm-lang-industrial .nm-consultation__target-label {
	font-size: var(--font-size-label);
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--color-text-subtle);
}

body.nm-lang-industrial .nm-consultation__target-text {
	display: block;
	width: 100%;
	max-width: 30em;
	padding: var(--space-sm) var(--space-md);
	background: var(--color-bg);
	font-size: var(--font-size-small);
	line-height: 1.7;
	color: var(--color-text);
}

/* ==================================================
 * 画像の種類「書籍・資料」・STORYのアイコン — 共通機能。STYLE 04では、切り抜かず・拡大せず、
 * 小さな補助ビジュアルとして置く（写真のように面いっぱいにはしない）。
 *   STRENGTH（一覧／PCのスライド）：書籍・資料は最大約200px。スライドでは写真の面の中央に置く
 *   STORY：アイコンは最大96px、書籍・資料は最大約200px。文章カラムの右に、左上揃えで置く
 * ================================================== */
body.nm-lang-industrial .nm-strength {
	--i-doc: clamp(140px, 10vw + 56px, 200px);
}

body.nm-lang-industrial .nm-strength__media--document {
	margin: 0 0 var(--space-sm);
}

/* STORYの書籍・資料は、本文と並ぶ補助ビジュアル。従来（約200px）より約12%大きく（1440pxで約224px）、本文と一体に見せる */
body.nm-lang-industrial .nm-feature {
	--i-doc: clamp(168px, 9vw + 94px, 232px);
}

body.nm-lang-industrial .nm-strength__document,
body.nm-lang-industrial .nm-strength__slide-document,
body.nm-lang-industrial .nm-feature__media--document .nm-feature__symbol {
	display: block;
	width: min(var(--i-doc, 200px), var(--nm-natural-w, var(--i-doc, 200px)), 100%);
	height: auto;
	max-width: 100%;
	object-fit: contain;
	border-radius: 0;
}

body.nm-lang-industrial .nm-feature__media--icon .nm-feature__symbol {
	display: block;
	width: min(96px, max(calc(var(--nm-natural-w, 192px) / 2), min(var(--nm-natural-w, 48px), 48px)));
	height: auto;
	object-fit: contain;
	border-radius: 0;
}

body.nm-lang-industrial .nm-feature__media--icon,
body.nm-lang-industrial .nm-feature__media--document {
	max-width: none;
}

@media (min-width: 1024px) {
	/* スライド（PC）：右の面の中央に、書籍・資料を置く */
	body.nm-lang-industrial .nm-strength__slide-media--document {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: var(--space-lg);
	}

	body.nm-lang-industrial .nm-strength__slide-document {
		max-height: 100%;
	}
}

/* ==================================================
 * 本文の折り返しと行長 — 管理画面の文章・改行は変えず、レイアウトと書体だけで「文章として読める」行にする。
 *
 * 原則（日本語本文のPC目安：1行 約20〜30字）
 *   ・列幅・gap・コンテナ幅を確保して行長を作る（共通インナー約1280px）。文字を小さくするだけで解決しない。
 *   ・文節単位の折り返し（word-break: auto-phrase）を基本にし、語の途中の分断を避ける。狭い列では
 *     字間・font-size・text-wrap（pretty を使わない）で、行をできるだけ満たす。
 *   ・Enterの改行は保持する（.nm-hl__line）。<br>の自動挿入はしない。
 * ================================================== */

/* FLOW：共通インナー（約1280px）の中で、行長を確保する。右へ広げない（左右の基準線は他のセクションと同じ）。
 *   ・1360px以上：4列（約300px/列・gap 24px・15px・約18〜20字/行）
 *   ・1024〜1359px：2×2（約500px/列・最大32em＝約30字/行）。文節折り返しに頼らなくても読める行長
 *   ・1024px未満：従来どおり縦1列
 * 文節単位の折り返し（auto-phrase）は、対応ブラウザで語中の分断を減らす補助。text-wrap: pretty は
 * 狭い列で行を短くするため使わない。保存文章・管理画面には改行を加えない。
 */
body.nm-lang-industrial .nm-flow__description {
	max-width: none;
	font-size: 0.9375rem;
	line-height: 1.9;
	letter-spacing: 0.01em;
	word-break: auto-phrase;
	text-wrap: wrap;
}

@media (min-width: 1024px) {
	body.nm-lang-industrial .nm-flow__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--space-xl);
		row-gap: var(--space-xl);
	}

	body.nm-lang-industrial .nm-flow__description {
		max-width: 32em;
		font-size: 1rem;
	}
}

@media (min-width: 1360px) {
	body.nm-lang-industrial .nm-flow__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: 1.5rem;
		row-gap: 0;
	}

	body.nm-lang-industrial .nm-flow__description {
		max-width: none;
		font-size: 0.9375rem;
	}
}

/* SERVICE／CONSULTATION：1〜2文の説明が、不要に2行へ割れないよう、行長を少し広げる（約33字） */
body.nm-lang-industrial .nm-service__short,
body.nm-lang-industrial .nm-service__detail {
	max-width: 33em;
}

/* VOICE：項目が2〜3件でも、カードが細くならない（列は、項目数に合わせて広がる） */
body.nm-lang-industrial .nm-voice__list {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

body.nm-lang-industrial .nm-voice__content {
	line-height: 1.9;
	text-wrap: wrap;
}

body.nm-lang-industrial .nm-voice__title {
	text-wrap: pretty;
}

/* STRENGTH：写真ありの項目は、文章の列を広げる（写真は少し控えめに） */
@media (min-width: 1024px) {
	body.nm-lang-industrial .nm-strength__slide--media {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
	}

	body.nm-lang-industrial .nm-strength__slide-description {
		line-height: 1.9;
		max-width: 34em;
	}
}

/* STRENGTH（SP／一覧）：番号の列とgapを詰め、説明文の行長を確保する（約12字 → 約18字） */
@media (max-width: 767px) {
	body.nm-lang-industrial .nm-strength__item {
		column-gap: var(--space-md);
	}

	body.nm-lang-industrial .nm-strength__number {
		font-size: 1.875rem;
	}
}

/* CONTACT：メール・電話・フォームのリンクは、途中で折らない */
@media (min-width: 640px) {
	body.nm-lang-industrial .nm-contact__method .nm-button {
		white-space: nowrap;
	}
}

/* ==================================================
 * 長文本文（ABOUT・PROFILE・STORY・MESSAGE）— 共通ルール：長文本文＝自動折り返し／短いデザインコピー＝任意改行。
 *   ・長文本文に手動改行・PC/SP別の改行は持たせない。段落内の折り返しはブラウザに任せ、レイアウトで整える。
 *   ・行長：PCで1行 約30〜34字（34em。広すぎると行頭が遠く、狭すぎると行が散る）。
 *   ・書体：font-size 17〜18px、line-height 2.0（行間はゆったり）、字間は標準。
 *   ・折り返し：word-break: auto-phrase（文節で折る）＋ line-break: strict（禁則を厳しく）。
 *     1文字だけの行（孤立）を避けるため、段落の最終行は text-wrap: pretty に任せる。
 *   ・段落間：1.3em（行間より少し広く。段落のまとまりが分かる）。
 * 短いデザインコピー（見出し・リード・Statement・キャッチ）は、管理画面で入力した改行をそのまま反映する
 * （.nm-hl__line）。
 * ================================================== */
body.nm-lang-industrial :is(.nm-about__body, .nm-profile__bio, .nm-message__text, .nm-feature__body) {
	line-height: 2;
}

body.nm-lang-industrial :is(.nm-about__body, .nm-profile__bio, .nm-message__text, .nm-feature__body) p {
	margin: 0;
	line-height: inherit;
	letter-spacing: normal;
	text-wrap: pretty;
}

body.nm-lang-industrial :is(.nm-about__body, .nm-profile__bio, .nm-message__text, .nm-feature__body) p + p {
	margin-top: 1.3em;
}


/* ==================================================
 * SP（STYLE 04）最終調整
 *   ・単体の補助画像（人物写真・書籍・資料・補助ビジュアル）：切り抜かず（STORYは自然比率）、中央寄せ
 *   ・グリッド／面として使う画像（SERVICE・STRENGTH・PHOTO STREAM・VOICE・ABOUTの帯 など）は、既存の配置のまま
 *   → 共通ルール：単体の補助ビジュアル＝中央寄せ／レイアウト要素としての画像＝既存配置
 * ================================================== */
@media (max-width: 899px) {
	/* STORY / FEATURE：写真は切り抜かず、元画像の全体を自然比率で表示（PCの4:5の切り抜きは、SPでは使わない） */
	body.nm-lang-industrial .nm-feature__media {
		margin-inline: auto;
	}

	body.nm-lang-industrial .nm-feature__image {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: auto;
		object-fit: contain;
	}

	/* 書籍・資料・アイコン：自然比率のまま、中央に置く */
	body.nm-lang-industrial .nm-feature__media--document .nm-feature__symbol,
	body.nm-lang-industrial .nm-feature__media--icon .nm-feature__symbol {
		margin-inline: auto;
	}
}

@media (max-width: 1023px) {
	/* PROFILE / MESSAGE：縦に並ぶ（SP・タブレット）ときの人物写真は、中央に置く */
	body.nm-lang-industrial .nm-profile__media,
	body.nm-lang-industrial .nm-message__media {
		margin-inline: auto;
	}
}

@media (max-width: 767px) {
	/* 会社の外観写真：単体の補助画像なので中央に置く */
	body.nm-lang-industrial .nm-company__photo {
		margin-inline: auto;
	}

	/* PROFILE DATA：SPでは少し文字を大きく・行間を広げ、読みやすくする（構造は変えない） */
	body.nm-lang-industrial .nm-profile__data-ja {
		font-size: 0.875rem;
	}

	body.nm-lang-industrial .nm-profile__data-en {
		font-size: 0.6875rem;
	}

	body.nm-lang-industrial .nm-profile__data-value {
		font-size: 1.125rem;
		line-height: 1.8;
	}

	/* STRENGTH（SPの縦展開）：項目の区切りが分かるよう、項目間の縦余白を少し増やす */
	body.nm-lang-industrial .nm-strength__item {
		padding-block: calc(var(--space-lg) * 1.4);
	}
}