/*
 * layout.css — コンテナ・グリッド・セクション余白などの構造レイアウト。
 * 3つのdesign preset（STYLISH/TRUST/CLEAN）で共通のレイアウト構造。
 * 印象の違いはpresets/*.cssの色・フォント・文字サイズだけで作る。
 * breakpointでの数値上書きは最小限にし、clamp()で自然にresponsive化する。
 */

/* ---------- コンテナ ---------- */
.nm-container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.nm-container--wide {
	max-width: var(--container-wide);
}

.nm-container--narrow {
	max-width: var(--container-narrow);
}

/* ---------- セクション共通 ---------- */
.nm-section {
	padding-block: var(--section-space);
	border-top: 1px solid var(--color-border);
}

/* ---------- 見出しの改行（Enterで指定した行）とPC用／SP用の出し分け ---------- */
.nm-hl__line {
	display: block;
}

/* SP用が入力されている見出しのみ、両方がマークアップに存在する。 */
.nm-hl-sp {
	display: none;
}

@media (max-width: 767.98px) {
	.nm-hl-pc {
		display: none;
	}

	.nm-hl-sp {
		display: block;
	}
}

/* ---------- Section Heading component ---------- */
.nm-section-heading {
	margin-bottom: var(--space-xl);
	max-width: var(--container-narrow);
}

.nm-section-heading--center {
	max-width: var(--container);
	margin-inline: auto;
	text-align: center;
}

.nm-section-heading__meta {
	display: flex;
	align-items: baseline;
	gap: var(--space-sm);
	margin: 0 0 var(--space-sm);
}

.nm-section-heading__number {
	font-family: var(--font-en);
	font-size: var(--font-size-label);
	font-weight: 700;
	color: var(--color-accent);
	letter-spacing: 0.04em;
}

.nm-section-heading__label {
	font-family: var(--font-en);
	font-size: var(--font-size-label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-primary);
	font-weight: 700;
}

/*
 * 小見出し（補足の日本語）。FEATURE / STORYの3階層（英字ラベル → 小見出し → 大見出し）で、
 * 英字ラベルと大見出しの間に置く。英字ラベルが無い場合は出力されない。
 */
.nm-section-heading__sub {
	margin: 0 0 var(--space-sm);
	font-size: var(--font-size-subheading);
	font-weight: 700;
	line-height: 1.6;
	color: var(--color-primary);
}

/*
 * 中央揃えセクション用：数字とラベルを.nm-section-heading__meta（横並び）に
 * 入れず、見出しを挟んで縦に独立配置する（機械的に同じ見出し構造を
 * 繰り返さないため）。数字は見出し直前の控えめなマーカー、ラベルは
 * 見出し直後の小さな署名として扱う。
 */
.nm-section-heading__number--solo {
	display: block;
	margin: 0 0 var(--space-sm);
}

.nm-section-heading__label--solo {
	display: block;
	margin: var(--space-sm) 0 0;
}

.nm-section-heading__title {
	font-size: var(--font-size-section);
}

/*
 * セクション共通のリード文（任意）。英字ラベル → 見出し → リード文 → セクション固有の内容。
 * 空欄なら出力されない。構造（.nm-section-lead__title／__text）は全Design Language共通で、
 * 文字の大きさ・色・余白は、各Design Languageが決める。
 */
.nm-section-heading__lead {
	margin-top: var(--space-md);
	max-width: 40em;
}

.nm-section-lead__title {
	margin: 0 0 var(--space-sm);
	font-size: var(--font-size-subheading);
	font-weight: 700;
	line-height: 1.6;
}

.nm-section-lead__text {
	margin: 0;
	color: var(--color-text-subtle);
	line-height: 1.9;
}

.nm-section-lead__text + .nm-section-lead__text {
	margin-top: var(--space-sm);
}

/*
 * STRENGTHのリード（任意）がある場合は、見出し＋リードが通常フローの.nm-strength-intro、
 * scrollytelling／タブ／一覧の本体が.nm-strength--has-introになる（本体の高さ計算にリードは含まれない）。
 * 2つは1つのセクションに見えるよう、境目の余白は見出しブロックの下マージン1つぶんだけにする。
 */
.nm-strength-intro {
	display: flow-root;
	padding-bottom: 0;
}

.nm-section.nm-strength--has-intro {
	padding-top: 0;
}

/* SP：入力者の1行が画面幅より長いとき、文節の途中で不自然に短く折れないよう、標準の折り返し（行を満たす）にする */
@media (max-width: 767px) {
	.nm-section-lead__text {
		word-break: normal;
		line-break: strict;
	}
}

/*
 * 長文本文の限定的な強調（<strong>）：管理画面の「**…**」から出力される。太さだけを定義し、色・大きさは本文のまま。
 * 見出しの「強調文字列」（アクセント色のデザイン強調）とは別の機能。
 */
:where(.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;
}

.nm-section-heading__desc {
	margin-top: var(--space-md);
	color: var(--color-text-subtle);
	font-size: var(--font-size-subheading);
}

/*
 * HEROの高さの基準（全Design Language共通）。
 * 画面の高さ（svh）から、スティッキーヘッダーとWordPress管理バーの高さを引いた値。
 * HEROは、この値を「最低の高さ」（min-height）として使う。文字（H1・本文・CTA）が
 * これより高くなる縦幅の浅い画面では、HEROが文字に合わせて伸びる（中身が上や下へ
 * はみ出して切れることはない）。
 */
:root {
	--nm-header-h: 64px;
}

/* 管理バーの高さを反映した値にするため、:rootではなくbodyに置く（custom propertyは定義した要素で解決される） */
body {
	--nm-adminbar-h: 0px;
	--nm-hero-vh: calc(100svh - var(--nm-header-h) - var(--nm-adminbar-h));
}

@media (min-width: 1024px) {
	:root {
		--nm-header-h: 76px;
	}
}

/* WordPress管理バー（ログイン中）：PC 32px／782px以下 46px。スティッキーヘッダーが管理バーの下に潜らないようにする */
body.admin-bar {
	--nm-adminbar-h: 32px;
}

body.admin-bar .nm-site-header {
	top: var(--nm-adminbar-h);
}

@media (max-width: 782px) {
	body.admin-bar {
		--nm-adminbar-h: 46px;
	}
}

@media (max-width: 600px) {
	/* この幅では管理バーは固定されず、スクロールで消える */
	body.admin-bar .nm-site-header {
		top: 0;
	}
}

/* ---------- ヘッダー ---------- */
/*
 * HeroとHeaderを別々の箱に見せないため、境界線は付けない。
 * 背景色をHero側と共通のvar(--color-bg)にすることで、
 * ヘッダー直下で画面が分断されて見える印象を避ける。
 */
.nm-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--color-bg);
}

.nm-site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: var(--space-sm);
	gap: var(--space-md);
}

.nm-site-header__brand {
	margin: 0;
}

.nm-site-header__logo {
	max-height: 44px;
	width: auto;
}

.nm-site-header__logo-text {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.125rem;
}

.nm-site-header .nm-site-header__cta {
	display: none;
	flex-shrink: 0;
}

.nm-nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-sm);
	min-height: 44px;
	min-width: 44px;
	margin-left: auto;
}

.nm-site-nav {
	display: none;
}

.nm-site-nav.is-open {
	display: flex;
	flex-direction: column;
	position: absolute;
	inset-inline: 0;
	top: 100%;
	max-height: calc(100vh - 100%);
	overflow-y: auto;
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
	padding: var(--space-lg) var(--container-pad);
}

.nm-site-nav__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.nm-site-nav__list a {
	display: flex;
	align-items: center;
	min-height: 44px;
	font-size: var(--font-size-subheading);
	font-weight: 600;
}

.nm-site-nav .nm-site-nav__cta {
	margin-top: var(--space-lg);
	align-self: flex-start;
}

@media (min-width: 1024px) {
	.nm-site-header .nm-site-header__cta {
		display: inline-flex;
	}

	.nm-nav-toggle {
		display: none;
	}

	.nm-site-nav {
		display: block;
		position: static;
		border: 0;
		padding: 0;
		max-height: none;
		overflow: visible;
	}

	.nm-site-nav__list {
		flex-direction: row;
		align-items: center;
		gap: var(--space-lg);
	}

	/*
	 * PCのグローバルナビは、6つのSTYLE共通の仕様：文字サイズ16px・ウェイト500・
	 * 行間1.4・字間0.04em。STYLEごとに変えるのは、font-family（bodyから継承）・
	 * 文字色・アクセント色（下線）だけ。ホバーと現在のページには、同じ下線を使う。
	 * SPのハンバーガーメニュー（上のメディアクエリの外）には、この下線を使わない。
	 */
	.nm-site-nav__list a {
		position: relative;
		display: inline-block;
		min-height: 0;
		padding-block: 0 var(--nm-nav-underline-gap, 9px);
		font-size: 1rem;
		font-weight: 500;
		line-height: 1.4;
		letter-spacing: 0.04em;
	}

	/*
	 * 下線：text-decorationではなく、独立した線（::after）。文字の下端から約6〜7px
	 * （文字の下端→要素の下端の余白＋padding 9px − 線の太さ2px）離す。通常は幅0（scaleX(0)）で、
	 * ホバー・キーボードフォーカス・現在のページで、左から右へ100%まで伸びる。
	 * 色は --nm-nav-accent（既定は各STYLEのアクセント色 --color-accent）。
	 */
	.nm-site-nav__list a::after {
		content: "";
		position: absolute;
		inset-inline: 0;
		bottom: 0;
		height: var(--nm-nav-underline-weight, 2px);
		background: var(--nm-nav-accent, var(--color-accent));
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	.nm-site-nav__list a:hover::after,
	.nm-site-nav__list a:focus-visible::after,
	.nm-site-nav__list a[aria-current="page"]::after,
	.nm-site-nav__list .current-menu-item > a::after,
	.nm-site-nav__list .current_page_item > a::after,
	.nm-site-nav__list .current-menu-ancestor > a::after {
		transform: scaleX(1);
	}

	.nm-site-nav .nm-site-nav__cta {
		display: none;
	}
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
	/* アニメーションせず、即時に表示する */
	.nm-site-nav__list a::after {
		transition: none;
	}
}

/* ----------------------------------------------------------------
 * HERO
 * Hero Visualは「左右分割の片側写真」ではなく、画面全面を覆う
 * 1枚のキービジュアルとして扱う。その上にeyebrow/H1/本文/CTAを
 * HTMLテキストとして重ねる（テキストは画像に焼き込まない）。
 * 写真の内容（人物・現場・社屋等）はデザイナーが案件ごとに用意する前提で、
 * テーマ側は「どんなHero Visualが来ても成立する器」だけを提供する。
 * 3 preset共通のHTML／構造。差はcolor・font・font-sizeのみ。
 * -------------------------------------------------------------- */
.nm-hero {
	/*
	 * --hero-text／--hero-text-subtleは.nm-hero--text-light／--text-darkの
	 * どちらか（PHP側で必ず一方を付与）が上書きする前提のローカルトークン。
	 * ここでの既定値は、万一modifier classが付かなかった場合でも無地背景の
	 * 上で読めなくなる事故を避けるため、濃色側を安全側のデフォルトとする。
	 * .nm-hero__content と .nm-hero__scroll の共通の親であるここに置くことで
	 * 両方へ継承させる。
	 */
	--hero-text: var(--color-text);
	--hero-text-subtle: var(--color-text-subtle);
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	/* 高さは「最低の高さ」だけ（上限はmin()で持つ）。max-heightで切らない＝中身が増えたら伸びる */
	min-height: min(var(--nm-hero-vh), 880px);
	background: var(--color-bg-subtle);
	color: var(--hero-text);
}

/*
 * Hero文字色（LIGHT/DARK）。画像の有無やオーバーレイ濃度から自動判定せず、
 * 管理画面の「Hero文字色」設定を正として切り替える。Hero Visual自体は
 * デザイナーが案件ごとに配色までアートディレクションする前提のため、
 * 白文字が合う画像・濃色文字が合う画像のどちらもありうる。
 */
.nm-hero--text-light {
	--hero-text: #fff;
	--hero-text-subtle: rgb(255 255 255 / 88%);
}

.nm-hero--text-dark {
	--hero-text: var(--color-text);
	--hero-text-subtle: var(--color-text-subtle);
}

.nm-hero__visual {
	position: absolute;
	inset: 0;
	z-index: 1;
}

/*
 * base.cssの`picture { height: auto; }`（img/picture/video/svg共通リセット）が
 * そのまま残ると、<picture>の高さが中身のimgの自然なアスペクト比基準で
 * 決まってしまい、object-fit: coverで.nm-hero__visual（絶対配置でHERO全体の
 * 高さを持つ）いっぱいに写真を広げる仕組みが効かなくなる（.nm-hero__visual
 * 自体は高さを持てても、その中のpictureがheight:autoだと子のimgの
 * height:100%の基準にならないため）。グローバルなpicture resetは他に
 * 影響範囲を広げたくないため変更せず、HERO内のpictureだけ高さを
 * 明示的に100%へ戻す。
 */
.nm-hero__visual picture {
	display: block;
	position: absolute;
	inset: 0;
}

.nm-hero__visual img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/*
	 * --hero-visual-positionは将来、管理画面にfocal point設定を追加する際、
	 * この変数へインラインstyleで値を渡すだけで対応できるようにするための
	 * 拡張ポイント。既定値は人物・現場写真のどちらでも破綻しにくい
	 * ニュートラルな位置（業種で決め打ちしない）。
	 */
	object-position: var(--hero-pos-sp, var(--hero-pos-pc, var(--hero-visual-position, 50% 32%)));
}

/*
 * 焦点位置は管理画面でPC用・SP用を別々に指定できる（hero.phpがインラインの
 * --hero-pos-pc／--hero-pos-spとして渡す）。SP用が未指定ならPC用を使う。
 * <picture>の画像切り替え（767px以下＝SP用）と同じ境界で切り替える。
 */
@media (min-width: 768px) {
	.nm-hero__visual img {
		object-position: var(--hero-pos-pc, var(--hero-visual-position, 50% 32%));
	}
}

/*
 * Hero Visual全面に重ねる、控えめなオーバーレイ。
 * デザイナーが用意したビジュアルの視認性・トーンを、既存presetの色域内で
 * 微調整するためだけの実用的な機能（派手なグラデーションやガラス風UIは使わない）。
 * 既定（クラス無し）はオーバーレイ無し。
 */
.nm-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: var(--color-primary-strong);
	opacity: var(--hero-overlay-opacity, 0);
	pointer-events: none;
}

.nm-hero--overlay-light {
	--hero-overlay-opacity: 0.12;
}

.nm-hero--overlay-standard {
	--hero-overlay-opacity: 0.26;
}

.nm-hero--overlay-strong {
	--hero-overlay-opacity: 0.42;
}

.nm-hero__content {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	width: 100%;
	padding-inline: var(--container-pad);
	padding-block: var(--space-xl) var(--space-xl);
}

.nm-hero__eyebrow {
	margin: 0;
	font-family: var(--font-en);
	font-size: var(--font-size-label);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hero-text);
}

.nm-hero__heading {
	font-size: var(--font-size-hero);
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--hero-text);
}

.nm-hero__lead {
	font-size: var(--font-size-subheading);
	color: var(--hero-text-subtle);
	max-width: 34ch;
}

.nm-hero__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-lg);
	margin-top: var(--space-sm);
}

/* Secondary CTAはbuttonにせず、矢印付きのtext linkにする */
.nm-hero__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	font-weight: 700;
	color: var(--hero-text);
	border-bottom: 1px solid var(--hero-text);
	padding-bottom: 2px;
	transition: opacity var(--transition-fast), gap var(--transition-fast);
}

.nm-hero__link:hover {
	opacity: 0.72;
	gap: var(--space-sm);
}

.nm-hero__link-arrow {
	flex: none;
	width: 1.6em;
	height: 1.6em;
}

.nm-hero__scroll {
	display: none;
}

/*
 * Hero Visual未設定時のfallback。写真前提のレイアウト（全面高さ・bg-subtle）
 * をやめ、通常のセクション同様に中央寄せの文字組で成立させる。
 * 文字色はPHP側が常に付与する.nm-hero--text-dark（画像未設定時は設定値に
 * 関わらず安全にDARKへfallback）に委ねるため、ここでは重複定義しない。
 */
.nm-hero--no-media {
	min-height: 0;
	background: var(--color-bg);
	align-items: stretch;
}

.nm-hero--no-media .nm-hero__content {
	padding-block: var(--section-space-small);
	max-width: var(--container-narrow);
	margin-inline: auto;
	text-align: center;
	align-items: center;
}

.nm-hero--no-media .nm-hero__lead {
	max-width: none;
}

.nm-hero--no-media .nm-hero__actions {
	justify-content: center;
}

@media (min-width: 1024px) {
	.nm-hero {
		min-height: min(var(--nm-hero-vh), 880px);
	}

	.nm-hero__content {
		/*
		 * 「左カラム」ではなく、全面ビジュアル上のtext safe area。
		 * PCでは文字幅のみ約38〜44%に制限し、写真を分割しない。
		 */
		max-width: 44%;
		min-width: 460px;
		padding-block: var(--space-xl) calc(var(--space-xl) * 1.6);
	}

	.nm-hero__heading {
		max-width: 12ch;
	}

	.nm-hero--no-media .nm-hero__content {
		max-width: var(--container-narrow);
		min-width: 0;
	}

	.nm-hero__scroll {
		display: flex;
		align-items: center;
		gap: var(--space-sm);
		position: absolute;
		right: var(--container-pad);
		bottom: var(--space-lg);
		z-index: 3;
		margin: 0;
		font-family: var(--font-en);
		font-size: var(--font-size-label);
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--hero-text-subtle, var(--color-text-subtle));
	}

	.nm-hero__scroll-line {
		display: block;
		width: 1px;
		height: 32px;
		background: currentColor;
	}
}

/*
 * 縦幅の浅いPC画面（ノートPC・ブラウザのウィンドウが低いとき）：
 * 文字の上下の余白・行間・H1の大きさを縮め、H1・本文・CTAが最初の1画面に収まるようにする。
 * 通常の画面高（約800px超）では何も変えない。ここは全Design Language共通の下地で、
 * HEROの構成が違うDesign Language（industrial／partner）は、それぞれのCSSで補う。
 */
@media (min-width: 1024px) and (max-height: 800px) {
	.nm-hero__content {
		gap: var(--space-sm);
		padding-block: var(--space-lg) var(--space-xl);
	}

	.nm-hero__heading {
		font-size: min(var(--font-size-hero), calc((100svh - var(--nm-adminbar-h)) * 0.1));
	}

	.nm-hero__actions {
		margin-top: 0;
	}
}

@media (min-width: 1024px) and (max-height: 680px) {
	.nm-hero__content {
		gap: var(--space-xs);
		padding-block: var(--space-md);
	}

	.nm-hero__heading {
		font-size: min(var(--font-size-hero), calc((100svh - var(--nm-adminbar-h)) * 0.09));
	}
}

/* ---------- ABOUT ---------- */
.nm-about__grid {
	display: grid;
	gap: var(--space-xl);
}

.nm-about__lead {
	font-size: var(--font-size-heading);
	font-weight: 700;
	max-width: 32ch;
	margin-bottom: var(--space-md);
}

.nm-about__body {
	max-width: 60ch;
	color: var(--color-text-subtle);
}

.nm-about__image {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-lg);
}

.nm-about__sub-images {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-sm);
	margin-top: var(--space-sm);
}

.nm-about__sub-image {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--radius-sm);
}

.nm-about--no-media .nm-about__grid {
	grid-template-columns: 1fr;
	margin-inline: auto;
}

@media (min-width: 1024px) {
	.nm-about__grid {
		grid-template-columns: 1fr 1fr;
		align-items: center;
	}

	.nm-about--no-media .nm-about__grid {
		grid-template-columns: 1fr;
		max-width: var(--container-narrow);
		margin-inline: auto;
	}
}

/* ---------- SERVICE / CONSULTATION（共通 index list） ---------- */
.nm-service__list {
	display: grid;
	gap: 0;
}

.nm-service__item {
	display: grid;
	/*
	 * 右カラムは1frではなくminmax(0, 1fr)にする。frトラックの既定の
	 * 最小幅は「auto」（中身のmin-content幅）のため、1frのままだと
	 * 見出し・本文がviewport幅を超えてもカラムが縮まず、右側が
	 * はみ出して文字が切れる（STRENGTHと同一パターン。Nadena Design
	 * 共通ルールとして、読ませる情報を持つグリッドは常にminmax(0, 1fr)
	 * ＋min-width:0を使う）。
	 */
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: var(--space-lg);
	align-items: start;
	padding-block: var(--space-lg);
	border-top: 1px solid var(--color-border);
}

.nm-service__list--text-only .nm-service__item {
	grid-template-columns: auto minmax(0, 1fr);
}

.nm-service__index {
	font-family: var(--font-en);
	font-size: var(--font-size-heading);
	font-weight: 700;
	color: var(--color-accent);
	line-height: 1;
}

.nm-service__media {
	grid-column: 2;
	min-width: 0;
}

.nm-service__image {
	width: 100%;
	max-width: 220px;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-md);
	margin-bottom: var(--space-md);
}

.nm-service__content {
	grid-column: 2;
	min-width: 0;
}

.nm-service__name {
	font-size: var(--font-size-heading);
	margin-bottom: var(--space-xs);
}

.nm-service__short {
	font-weight: 600;
	color: var(--color-text-subtle);
	margin-bottom: var(--space-xs);
}

.nm-service__detail {
	color: var(--color-text-subtle);
	max-width: 60ch;
}

@media (min-width: 768px) {
	.nm-service__item {
		grid-template-columns: auto 200px minmax(0, 1fr);
	}

	.nm-service__list--text-only .nm-service__item {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.nm-service__media,
	.nm-service__content {
		grid-column: auto;
	}

	.nm-service__image {
		max-width: none;
		margin-bottom: 0;
	}
}

/*
 * .nm-service__layout / .nm-service__stage：sticky写真ステージを持つ
 * Design Language（human.css）のための土台。既定では単純にlistだけを
 * 縦積みし、stageは:empty（写真が1枚も無いデータ）なら自動的に消える。
 * これにより「写真0件ならsticky構成そのものを使わない」という
 * フォールバックを、Design Language側で分岐せずCSSだけで表現できる。
 */
.nm-service__layout {
	display: block;
}

.nm-service__stage {
	display: none;
}

.nm-service__stage:empty {
	display: none;
}

/* ---------- STRENGTH ---------- */
.nm-strength__list {
	display: grid;
	gap: 0;
}

.nm-strength__item {
	display: grid;
	/*
	 * 右カラムは1frではなくminmax(0, 1fr)にする。frトラックの既定の
	 * 最小幅は「auto」（中身のmin-content幅）のため、1frのままだと
	 * 見出し・本文がviewport幅を超えてもカラムが縮まず、右側が
	 * はみ出して文字が切れる。minmax(0, 1fr)で明示的に下限を0にし、
	 * 左の番号カラム（auto）はそのまま維持する。
	 */
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: var(--space-lg);
	align-items: start;
	padding-block: var(--space-lg);
	border-top: 1px solid var(--color-border);
}

.nm-strength__number {
	font-family: var(--font-en);
	font-size: clamp(2.5rem, 2rem + 2vw, 4rem);
	font-weight: 700;
	line-height: 1;
	color: var(--color-bg-subtle);
	-webkit-text-stroke: 1.5px var(--color-primary);
	paint-order: stroke fill;
}

.nm-strength__media {
	grid-column: 2;
	margin-bottom: var(--space-md);
	min-width: 0;
}

.nm-strength__image {
	width: 100%;
	max-width: 200px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--radius-md);
}

.nm-strength__content {
	grid-column: 2;
	/* grid itemの既定min-widthはauto（中身のmin-content幅）。テキストを
	   確実に折り返させ、右カラムからのはみ出しを防ぐため0にする。 */
	min-width: 0;
}

.nm-strength__heading {
	font-size: var(--font-size-heading);
	margin-bottom: var(--space-xs);
}

.nm-strength__description {
	color: var(--color-text-subtle);
	max-width: 60ch;
}

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

	.nm-strength__item {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.nm-strength__media,
	.nm-strength__content {
		grid-column: auto;
	}
}

@media (min-width: 1200px) {
	.nm-strength__list {
		grid-template-columns: repeat(4, 1fr);
	}

	.nm-strength__item {
		grid-template-columns: 1fr;
		row-gap: var(--space-sm);
	}

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

/*
 * .nm-strength__stage：1つのステージ内で01→02→03→04を切り替える
 * 表示のための土台。既定は非表示（.nm-strength__listだけを使う、
 * 従来どおりの挙動）。複数項目を1画面ぶんの高さへ収める
 * Design Language（human.css）だけがdisplay:blockへ上書きし、
 * 同時に.nm-strength__listを隠す。
 */
.nm-strength__stage {
	display: none;
}

/* タブ内の項目名。番号だけのタブを使う既存のDesign Languageでは出さない
   （表示するのは項目名を見せる言語のみ）。 */
.nm-strength__tab-label {
	display: none;
}

/* ---------- JOB（募集要項） ---------- */
.nm-job__list {
	display: grid;
	gap: 0;
}

.nm-job__item {
	padding-block: var(--space-lg);
	border-top: 1px solid var(--color-border);
}

.nm-job__title {
	font-size: var(--font-size-heading);
}

.nm-job__description {
	margin-top: var(--space-xs);
	color: var(--color-text-subtle);
	max-width: 60ch;
}

.nm-job__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm) var(--space-lg);
	margin: var(--space-md) 0 0;
}

.nm-job__fact {
	min-width: 0;
}

.nm-job__fact-label {
	display: block;
	font-size: var(--font-size-label);
	color: var(--color-text-subtle);
}

.nm-job__fact-value {
	margin: 0;
	font-weight: 600;
}

.nm-job__requirements {
	margin-top: var(--space-md);
	max-width: 60ch;
	color: var(--color-text-subtle);
}

.nm-job__requirements-label {
	display: block;
	font-weight: 600;
	color: var(--color-text);
	margin-bottom: var(--space-xs);
}

/* ---------- MESSAGE / PROFILE（共通Editorialレイアウト） ---------- */
.nm-message .nm-section-heading__title {
	font-size: var(--font-size-hero);
	max-width: 20ch;
	margin-inline: auto;
}

.nm-message__inner,
.nm-profile__inner {
	display: grid;
	gap: var(--space-xl);
}

.nm-message__photo,
.nm-profile__photo {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--radius-lg);
}

.nm-message__text,
.nm-message__pull-line,
.nm-profile__bio {
	font-size: var(--font-size-subheading);
	max-width: 56ch;
}

/*
 * .nm-message__pull-line：任意入力の「大きな一言（Statement）」欄が
 * 入力されている場合のみ出力される（本文からの自動抽出はしない）。
 * 既定（このルール）では通常の本文と見た目が変わらないため、
 * STYLISH/TRUST/CLEAN/TECHの表示は一切変わらない。大きく見せるのは
 * human.css側の上書きのみ。
 */
.nm-message__pull-line {
	margin: 0 0 1em;
}

.nm-message__signature {
	max-width: 160px;
	margin-block: var(--space-md);
}

/* 手書き署名（画像）：肩書き（任意・小さく）の下に、本文の末尾の署名として置く */
.nm-message__signed {
	margin-top: var(--space-md);
}

.nm-message__signed .nm-message__position {
	margin: 0 0 var(--space-xs);
	font-size: var(--font-size-small);
	color: var(--color-text-subtle);
}

.nm-message__signed .nm-message__signature {
	display: block;
	width: auto;
	height: auto;
	max-width: min(160px, 100%);
	margin: 0;
	object-fit: contain;
	object-position: left center;
}

.nm-message__attribution,
.nm-profile__attribution {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	font-weight: 700;
	margin-top: var(--space-md);
}

.nm-profile__attribution {
	font-size: var(--font-size-heading);
}

.nm-profile__position {
	color: var(--color-text-subtle);
	font-weight: 500;
}

.nm-profile__qualifications {
	margin-top: var(--space-md);
	display: grid;
	gap: var(--space-xs);
}

.nm-profile__qualifications li {
	padding-left: var(--space-md);
	position: relative;
	color: var(--color-text-subtle);
}

.nm-profile__qualifications li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.65em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-accent);
}

.nm-profile__values {
	margin-top: var(--space-md);
	font-weight: 600;
	color: var(--color-primary);
}

.nm-profile__values-label {
	display: block;
	margin-bottom: var(--space-xs);
	font-size: var(--font-size-small);
	font-weight: 400;
	color: var(--color-text-subtle);
}

/*
 * PROFILE DATA：日本語項目名 → 小さな英語ラベル → 値 の3階層。1列（SP）／2列（PC）。
 * 項目の間は薄い罫線だけ。カードにはしない。Design Languageは、間隔・罫線・文字の太さだけを変える。
 */
.nm-profile__data {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: var(--space-xl);
	margin: var(--space-lg) 0 0;
}

.nm-profile__data-item {
	min-width: 0;
	padding-block: var(--space-sm);
	border-top: 1px solid var(--color-border);
}

.nm-profile__data-label {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--space-sm);
	margin: 0 0 var(--space-xs);
}

.nm-profile__data-ja {
	font-size: 0.8125rem; /* 13px */
	font-weight: 600;
	color: var(--color-text-subtle);
}

.nm-profile__data-en {
	font-family: var(--font-en);
	font-size: 0.6875rem; /* 11px */
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-subtle);
	opacity: 0.8;
}

.nm-profile__data-value {
	margin: 0;
	font-size: 1.0625rem; /* 17px */
	line-height: 1.7;
	color: var(--color-text);
}

@media (min-width: 640px) {
	.nm-profile__data {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.nm-message--no-media .nm-message__inner,
.nm-profile--no-media .nm-profile__inner {
	grid-template-columns: 1fr;
	max-width: var(--container-narrow);
	margin-inline: auto;
}

@media (min-width: 768px) {
	.nm-message__inner,
	.nm-profile__inner {
		grid-template-columns: 340px 1fr;
		align-items: start;
	}
}

/* ---------- COMPANY ---------- */
.nm-company__inner {
	display: grid;
	gap: var(--space-xl);
}

.nm-company__list {
	margin: 0;
	display: grid;
}

.nm-company__row {
	display: grid;
	grid-template-columns: 8em 1fr;
	gap: var(--space-md);
	padding-block: var(--space-md);
	border-top: 1px solid var(--color-border);
}

.nm-company__label {
	margin: 0;
	color: var(--color-text-subtle);
	font-weight: 600;
}

.nm-company__value {
	margin: 0;
}

.nm-company__map {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.nm-company__map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/*
 * 右側の面（地図が無い場合の外観写真・アクセス案内）。管理画面で入力された
 * 場合にだけ出力される。地図と同じ位置・同じ大きさの面として扱う。
 */
.nm-company__aside {
	display: grid;
	gap: var(--space-md);
	align-content: start;
	min-width: 0;
}

.nm-company__photo {
	margin: 0;
}

.nm-company__photo-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-lg);
}

.nm-company__access-label {
	margin: 0 0 var(--space-xs);
	color: var(--color-text-subtle);
	font-weight: 600;
}

.nm-company__access-text {
	margin: 0;
}

@media (min-width: 1024px) {
	.nm-company__inner {
		grid-template-columns: 1fr 1fr;
	}

	.nm-company__map {
		aspect-ratio: auto;
		height: 100%;
	}
}

/* ---------- CONTACT（サイト全体で最も強いCTA） ---------- */
.nm-contact {
	background: var(--color-bg-subtle);
}

.nm-contact__inner {
	text-align: center;
}

.nm-contact__lead {
	max-width: var(--container-narrow);
	margin-inline: auto var(--space-xl);
	font-size: var(--font-size-subheading);
	color: var(--color-text-subtle);
}

.nm-contact__methods {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-md);
}

.nm-contact__method--tel .nm-button {
	min-width: 280px;
}

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

@media (min-width: 640px) {
	.nm-contact__methods {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}
}

/* ---------- FLOW（timeline） ---------- */
.nm-flow__list {
	display: grid;
	gap: var(--space-xl);
	counter-reset: nm-flow;
	position: relative;
}

/*
 * 縦タイムライン（1024px未満）では、番号の円（幅 var(--space-xl)）の
 * 中心を縦線の上に置く。円の左半分は線より外側にはみ出すため、
 * その分（半径）をリスト側の左paddingで確保し、container外
 * （viewport左端の外）へ円が出て切れないようにする。
 * base.cssの`ol[class]{padding:0}`（特異度 0,1,1）に打ち消されないよう、
 * 同じ特異度の`ol.nm-flow__list`で指定する（layout.cssは後読み込み）。
 */
ol.nm-flow__list {
	padding-left: calc(var(--space-xl) / 2);
}

.nm-flow__item {
	position: relative;
	/* 上記のlist側paddingで円の半径ぶん右へずらした分、本文の開始位置が
	   変わらないよう差し引く。 */
	padding-left: calc(var(--space-xl) / 2 + var(--space-md));
	border-left: 2px solid var(--color-border);
}

.nm-flow__item:last-child {
	border-left-color: transparent;
}

.nm-flow__step {
	position: absolute;
	/* 縦線（border-left 2px）の中心＝paddingボックス左端から-1px */
	left: -1px;
	top: 0;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--space-xl);
	height: var(--space-xl);
	border-radius: 50%;
	background: var(--color-primary);
	color: var(--color-button-text);
	font-family: var(--font-en);
	font-weight: 700;
	font-size: var(--font-size-subheading);
}

.nm-flow__heading {
	font-size: var(--font-size-heading);
	margin-bottom: var(--space-xs);
}

.nm-flow__description {
	color: var(--color-text-subtle);
	max-width: 56ch;
}

@media (min-width: 1024px) {
	.nm-flow__list {
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: var(--space-lg);
	}

	ol.nm-flow__list {
		padding-left: 0;
	}

	.nm-flow__item {
		padding-left: 0;
		padding-top: calc(var(--space-xl) + var(--space-sm));
		border-left: 0;
		border-top: 2px solid var(--color-border);
	}

	.nm-flow__item:last-child {
		border-top-color: var(--color-border);
	}

	.nm-flow__step {
		left: 0;
		top: calc(-1 * (var(--space-xl) / 2));
		transform: none;
	}
}

/* ---------- VOICE ---------- */
.nm-voice__list {
	display: grid;
	gap: var(--space-lg);
	grid-template-columns: 1fr;
}

.nm-voice__item {
	background: var(--color-bg-subtle);
	border-radius: var(--radius-md);
	padding: var(--space-lg);
}

.nm-voice__image {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--radius-sm);
	margin-bottom: var(--space-md);
}

.nm-voice__item--no-media {
	border-left: 3px solid var(--color-accent);
}

.nm-voice__title {
	font-size: var(--font-size-subheading);
}

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

@media (min-width: 768px) {
	.nm-voice__list {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ---------- COMPLIANCE ---------- */
.nm-compliance {
	background: var(--color-bg-subtle);
}

.nm-compliance__text {
	max-width: var(--container-narrow);
	font-size: var(--font-size-small);
	color: var(--color-text-subtle);
}

/* ---------- フッター ---------- */
.nm-site-footer {
	background: var(--color-primary-strong);
	color: var(--color-button-text);
}

.nm-site-footer__top {
	display: grid;
	gap: var(--space-xl);
	padding-block: var(--section-space-small) var(--space-xl);
}

.nm-site-footer__logo {
	max-height: 40px;
	width: auto;
	margin-bottom: var(--space-md);
	filter: brightness(0) invert(1);
}

.nm-site-footer__name--wordmark {
	font-family: var(--font-heading);
	font-size: var(--font-size-heading);
	font-weight: 700;
	margin-bottom: var(--space-md);
}

.nm-site-footer__address,
.nm-site-footer__phone {
	opacity: 0.85;
}

.nm-site-footer__nav-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.nm-site-footer__nav-list a {
	opacity: 0.85;
	transition: opacity 200ms ease;
}

/*
 * フッターのリンクは、hover／キーボードフォーカスでも、必ず読める色にする。
 * WordPressのグローバルなリンクhover色（theme.json：--color-primary-strong）は、フッターの地色
 * （--color-primary-strong）と同じ、または暗い色のため、そのままだとhoverで文字が地色に溶けて消える。
 * 通常：現在の淡い文字色（opacity 0.85）／hover・focus：不透明にして、細い下線を添える。
 */
.nm-site-footer a {
	color: inherit;
}

.nm-site-footer a:hover,
.nm-site-footer a:focus-visible {
	color: var(--footer-link-hover, var(--color-button-text));
}

.nm-site-footer__nav-list a:hover,
.nm-site-footer__nav-list a:focus-visible {
	opacity: 1;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.nm-site-footer a:focus-visible {
	outline: 2px solid currentcolor;
	outline-offset: 3px;
}

.nm-button--secondary-inverse {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding-inline: var(--space-lg);
	border-radius: var(--radius-sm);
	border: 1px solid rgba(255, 255, 255, 0.5);
	font-weight: 700;
}

.nm-site-footer__bottom {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	padding-block: var(--space-lg);
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	opacity: 0.75;
	font-size: var(--font-size-small);
}

.nm-site-footer__legal a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (min-width: 768px) {
	.nm-site-footer__top {
		grid-template-columns: 1.4fr 1fr auto;
	}

	.nm-site-footer__bottom {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

/* ---------- SP固定CTA ---------- */
.nm-sp-cta {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 200;
	background: var(--color-bg);
	border-top: 1px solid var(--color-border);
	padding-bottom: env(safe-area-inset-bottom, 0);
}

.nm-sp-cta__list {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
}

.nm-sp-cta__item a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	font-weight: 700;
	background: var(--color-primary);
	color: var(--color-button-text);
}

.nm-sp-cta__item + .nm-sp-cta__item a {
	border-left: 1px solid rgba(255, 255, 255, 0.25);
}

@media (min-width: 1024px) {
	.nm-sp-cta {
		display: none;
	}
}

body.nm-has-sp-fixed-cta .nm-main {
	padding-bottom: 56px;
}

@media (min-width: 1024px) {
	body.nm-has-sp-fixed-cta .nm-main {
		padding-bottom: 0;
	}
}

/* ---------- 汎用ページ（プライバシーポリシー等） ---------- */
.nm-page__inner {
	max-width: var(--container-narrow);
	padding-block: var(--section-space-small);
}

.nm-page__title {
	font-size: var(--font-size-section);
	margin-bottom: var(--space-lg);
}

.nm-page__content > * + * {
	margin-top: 1em;
}