/*
 * components.css — ボタン・ナビトグル・フォーム・reveal animation等、
 * 再利用可能なUI部品。色/フォントはpresetのCSS Custom Propertiesを参照し、
 * ここに直接ハードコードしない。
 */

/* ---------- ボタン ---------- */
.nm-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding-inline: var(--space-lg);
	border-radius: var(--radius-sm);
	font-weight: 700;
	transition: background-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
}

/*
 * 主CTA。--color-cta* は「ボタンだけ会社色（primary）と別の色にしたい」
 * presetだけが定義する任意トークン（STYLE 04・05など）。未定義の場合は
 * 従来どおり--color-primary系を使う。
 */
.nm-button--primary {
	background: var(--color-cta, var(--color-primary));
	color: var(--color-cta-text, var(--color-button-text));
}

.nm-button--primary:hover {
	background: var(--color-cta-hover, var(--color-primary-strong));
	color: var(--color-cta-hover-text, var(--color-cta-text, var(--color-button-text)));
	box-shadow: inset 0 0 0 1px var(--color-cta-hover-edge, transparent);
}

.nm-button--secondary {
	background: transparent;
	color: var(--color-primary);
	border: 1px solid var(--color-primary);
}

.nm-button--secondary:hover {
	background: var(--color-bg-subtle);
}

.nm-button--lg {
	min-height: 56px;
	padding-inline: var(--space-xl);
	font-size: var(--font-size-subheading);
}

.nm-button:active {
	transform: translateY(1px);
}

/* ---------- ナビゲーショントグル（ハンバーガー） ---------- */
.nm-nav-toggle {
	position: relative;
}

.nm-nav-toggle__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.nm-nav-toggle::before {
	content: "";
	display: block;
	width: 24px;
	height: 2px;
	background: currentColor;
	box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor;
	transition: box-shadow var(--transition-fast), background var(--transition-fast);
}

.nm-nav-toggle[aria-expanded="true"]::before {
	box-shadow: none;
	background: transparent;
	position: relative;
}

.nm-nav-toggle[aria-expanded="true"]::after {
	content: "\2715";
	font-size: 1.25rem;
}

/* ---------- 埋め込みフォーム（Contact Form 7等）の最低限の整形 ---------- */
.nm-contact__embedded-form {
	margin-top: var(--space-xl);
	max-width: var(--container-narrow);
	margin-inline: auto;
	text-align: left;
}

.nm-contact__embedded-form input[type="text"],
.nm-contact__embedded-form input[type="email"],
.nm-contact__embedded-form input[type="tel"],
.nm-contact__embedded-form textarea,
.nm-contact__embedded-form select {
	width: 100%;
	min-height: 44px;
	padding: var(--space-sm) var(--space-md);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font: inherit;
	background: var(--color-bg);
	color: var(--color-text);
}

.nm-contact__embedded-form textarea {
	min-height: 140px;
}

.nm-contact__embedded-form label {
	display: block;
	margin-bottom: var(--space-md);
	font-weight: 600;
}

.nm-contact__embedded-form input[type="submit"] {
	min-height: 48px;
	padding-inline: var(--space-lg);
	background: var(--color-cta, var(--color-primary));
	color: var(--color-cta-text, var(--color-button-text));
	border: 0;
	border-radius: var(--radius-sm);
	font-weight: 700;
	cursor: pointer;
}

/* ---------- Reveal animation ----------
 * JS（assets/js/ui.js）がIntersectionObserverで.is-visibleを付与する。
 * .nm-reveal--armedはJS実行時のみJSから付与されるため、JS無効環境や
 * prefers-reduced-motion環境では要素は最初から通常表示のまま
 * （アニメーションが無くてもデザインが成立する状態を既定にする）。
 */
.nm-reveal--armed {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity var(--transition-base), transform var(--transition-base);
}

.nm-reveal--armed.is-visible {
	opacity: 1;
	transform: none;
}

/* ----------------------------------------------------------------
 * PHOTO STREAM — 全業種・全Design Language共通の任意セクション。
 * 目的は、どのSTYLEでも「静かな写真帯として、その人・会社・店舗の空気感を
 * 見せる」こと。カルーセル感やコラージュ演出は持たない。
 *
 * 動きは全STYLE共通の仕様：
 * - PC：高さをそろえた1段の写真帯が、ゆっくり横方向へ自動で流れる
 *   （hover／キーボードフォーカスで一時停止）。
 * - SP（幅599px以下）：自動スクロールを止め、横スワイプで見る。
 * - prefers-reduced-motion：自動スクロールを止め、横スクロールで見る。
 * - JS無効でも成立する（動きはCSSだけで作り、JSは使わない）。
 * 無限ループは、同じ内容のtrackを2本並べ、複製側をaria-hiddenにする方式。
 *
 * Design Languageごとの差は、見た目の範囲（角丸・写真の高さ・gap・写真比率・
 * 余白・背景）だけ。CSSカスタムプロパティを上書きして出す：
 *   --stream-radius / --stream-height / --stream-gap /
 *   --stream-ratio-lg・md・sm / --stream-section-pad
 * 速度・動き方はDesign Languageごとに変えない。
 * -------------------------------------------------------------- */
.nm-photo-stream-section {
	overflow-x: clip;
	/* 写真帯は情報セクションではないため、通常のセクションより余白を詰める */
	padding-block: var(--stream-section-pad, calc(var(--section-space) * 0.6));
}

.nm-photo-stream {
	overflow: hidden;
}

.nm-photo-stream__viewport {
	display: flex;
}

.nm-photo-stream__track {
	display: flex;
	align-items: flex-start;
	flex-shrink: 0;
	gap: var(--stream-gap, 16px);
	/*
	 * trackの末尾にも1個ぶんのgapを持たせておくことで、複製した2本目の
	 * trackを隙間ゼロで直後に並べても、内部のitem間隔と同じリズムの
	 * まま継ぎ目なく続く。translateX(-100%)は要素自身の幅が基準のため、
	 * 2本のtrackが常に同じ幅である限りループ位置がずれない。
	 */
	padding-right: var(--stream-gap, 16px);
	/* 流れる速さは「1枚あたりの秒数 × 1本のtrackの枚数」で決める（枚数が増えても体感速度が変わらない） */
	animation: nm-photo-stream-scroll calc(var(--nm-stream-n, 8) * 14s) linear infinite;
}

@keyframes nm-photo-stream-scroll {
	to {
		transform: translateX(-100%);
	}
}

/* hover/focus時は一時停止（マウス操作前提にはしないが、意図的に見たい場合の配慮）。 */
.nm-photo-stream:hover .nm-photo-stream__track,
.nm-photo-stream:focus-within .nm-photo-stream__track {
	animation-play-state: paused;
}

/*
 * 写真の高さを全枚そろえ、幅は写真の比率（横長・標準・縦長の3種類）から決まる。
 * 上下のずれ・大小のサイズ差は付けない。
 */
.nm-photo-stream__item {
	flex-shrink: 0;
	overflow: hidden;
	height: var(--stream-height, 240px);
	border-radius: var(--stream-radius, var(--radius-md));
}

.nm-photo-stream__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nm-photo-stream__item--lg {
	aspect-ratio: var(--stream-ratio-lg, 3 / 2);
}

.nm-photo-stream__item--md {
	aspect-ratio: var(--stream-ratio-md, 4 / 3);
}

.nm-photo-stream__item--sm {
	aspect-ratio: var(--stream-ratio-sm, 3 / 4);
}

/*
 * 自動スクロールを止めて、横スワイプ（スクロール）で見る形にするケース：
 * SP（幅599px以下）、prefers-reduced-motion、写真が1〜2枚で動かさない場合。
 * 複製側のtrack（aria-hidden）は不要なので隠し、実際の写真だけを並べる。
 * animationを止めるだけでは無限ループ用のtranslateX(-100%)が途中の位置で
 * 固まる事故になるため、必ずanimation: noneで本来の位置へ戻す。
 */
@media (max-width: 599px) {
	.nm-photo-stream__item {
		height: var(--stream-height-sp, 170px);
	}

	.nm-photo-stream__viewport {
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.nm-photo-stream__viewport::-webkit-scrollbar {
		display: none;
	}

	.nm-photo-stream__track {
		animation: none !important;
		transform: none !important;
		translate: none !important;
		padding-left: var(--container-pad);
	}

	.nm-photo-stream__track[aria-hidden="true"] {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nm-photo-stream__viewport {
		overflow-x: auto;
		overscroll-behavior-x: contain;
	}

	.nm-photo-stream__track {
		animation: none !important;
		transform: none !important;
		translate: none !important;
		padding-left: var(--container-pad);
	}

	.nm-photo-stream__track[aria-hidden="true"] {
		display: none;
	}
}

.nm-photo-stream--static .nm-photo-stream__viewport {
	justify-content: center;
}

.nm-photo-stream--static .nm-photo-stream__track {
	animation: none;
	padding-left: 0;
}

/* ----------------------------------------------------------------
 * FEATURE / STORY — 全業種・全Design Language共通の任意セクション。
 * HTML構造は共通。PCは「テキスト約2/3＋写真約1/3」（2fr 1fr）で、主役は
 * 文章、写真はそれを補う独立した面。SPはテキスト→写真の1カラム。
 * 写真がない場合はテキストだけで成立し、本文の行長が伸びすぎないよう
 * 読みやすい幅（--feature-measure）に収める。写真比率・角丸・余白・背景は
 * presetまたはDesign Language側のカスタムプロパティで変える。
 * -------------------------------------------------------------- */
.nm-feature__inner {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: var(--feature-gap, clamp(2.5rem, 6vw, 6rem));
	align-items: start;
}

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

/*
 * PC：見出しを先に読ませ、その下で「本文＋補助ビジュアル」を並べる。見出しは2列にまたがる1行目、
 * 本文と画像（写真・書籍／資料・アイコン）は2行目の左右で、画像の上端は本文の開始位置にそろう。
 * HTMLは変えない（.nm-feature__text を display: contents にして、見出しと本文を同じグリッドへ置く）。
 */
@media (min-width: 900px) {
	.nm-feature:not(.nm-feature--no-media) .nm-feature__inner {
		row-gap: 0;
	}

	.nm-feature:not(.nm-feature--no-media) .nm-feature__text {
		display: contents;
	}

	.nm-feature:not(.nm-feature--no-media) .nm-feature__text > .nm-section-heading {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.nm-feature:not(.nm-feature--no-media) .nm-feature__body {
		grid-column: 1;
		grid-row: 2;
	}

	.nm-feature:not(.nm-feature--no-media) .nm-feature__media {
		grid-column: 2;
		grid-row: 2;
	}

	/*
	 * 書籍・資料の画像：本文のすぐ隣に置き、「本文＋書籍」をひとまとまりに見せる（商品画像のように
	 * 右端へ離して単独で置かない）。本文の列は読みやすい幅（--feature-measure）までにして、
	 * 画像の列は画像の幅だけ。上端は本文の開始位置（上の2行目）にそろう。
	 */
	.nm-feature:has(.nm-feature__media--document) .nm-feature__inner {
		grid-template-columns: minmax(0, var(--feature-measure, 40em)) auto;
		justify-content: start;
		column-gap: clamp(1.5rem, 3vw, 3rem);
	}
}

.nm-feature__body {
	max-width: var(--feature-measure, 40em);
}

.nm-feature__body > :last-child {
	margin-bottom: 0;
}

.nm-feature__media {
	margin: 0;
}

.nm-feature__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--feature-ratio, 4 / 5);
	object-fit: cover;
	border-radius: var(--feature-radius, var(--radius-md));
}

@media (max-width: 899px) {
	.nm-feature__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	/* SPでは写真を画面いっぱいに大きくしすぎない */
	.nm-feature__media {
		max-width: min(26rem, 100%);
	}
}

/* ----------------------------------------------------------------
 * WORKS — 業種横断で再利用する「施工実績・作品一覧」の共通構造。
 * PHOTO STREAMが「人・現場の空気」を感覚的に伝えるのに対し、WORKSは
 * 実際に積み重ねてきた仕事・技術力を1件ずつ提示する、役割の異なる
 * コンポーネント。データはmarunage_work CPT（何件でも追加可）から
 * 供給され、表示方法（サイズの緩急・grid比率・角丸・タイポグラフィ）は
 * Design Language側（例：assets/css/design-languages/industrial.css）が
 * CSSカスタムプロパティ及びgrid上書きで決める。ここでは、どの
 * Design Languageも上書きしなかった場合に安全に成立する既定値
 * （auto-fillの均等grid）のみを持つ。
 * -------------------------------------------------------------- */
.nm-works__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--works-min, 260px), 1fr));
	gap: var(--works-gap, var(--space-lg));
	align-items: start;
	list-style: none;
	padding: 0;
	margin: 0;
}

.nm-works__link {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	color: inherit;
	text-decoration: none;
	min-width: 0;
}

.nm-works__title {
	font-size: inherit;
	font-weight: 700;
	min-width: 0;
	overflow-wrap: break-word;
}

.nm-works__media {
	display: block;
	overflow: hidden;
	aspect-ratio: var(--works-ratio, 4 / 3);
	border-radius: var(--works-radius, var(--radius-md));
}

.nm-works__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nm-works__number {
	display: block;
	font-family: var(--font-en);
	font-size: 0.875rem;
	color: var(--color-text-subtle);
}

.nm-works__category {
	display: block;
	font-family: var(--font-en);
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-text-subtle);
}

.nm-works__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	color: var(--color-text-subtle);
	font-size: 0.875rem;
}

/* ----------------------------------------------------------------
 * PEOPLE — 業種横断で再利用する「人・チームの一覧」の共通構造。
 * SERVICE/STRENGTHのような均等カードUIにはせず、写真の大小・上下位置
 * はDesign Language側（例：assets/css/design-languages/human.css）が
 * CSSカスタムプロパティ＋nth-childで不揃いにする。ここでは、どの
 * Design Languageも上書きしなかった場合に安全に成立する既定値
 * （auto-fillの均等grid）のみを持つ（PHOTO STREAM／WORKSと同じ方針）。
 * -------------------------------------------------------------- */
.nm-people__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--people-min, 220px), 1fr));
	gap: var(--people-gap, var(--space-lg));
	align-items: start;
	list-style: none;
	padding: 0;
	margin: 0;
}

.nm-people__media {
	display: block;
	overflow: hidden;
	aspect-ratio: var(--people-ratio, 4 / 5);
	border-radius: var(--people-radius, var(--radius-md));
}

.nm-people__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nm-people__name {
	display: block;
	font-weight: 700;
	margin-top: var(--space-sm);
}

.nm-people__role {
	display: block;
	color: var(--color-text-subtle);
	font-size: 0.875rem;
}

.nm-people__comment {
	color: var(--color-text-subtle);
	margin-top: var(--space-xs);
}

/* ----------------------------------------------------------------
 * RECRUIT CTA — CONTACTとは別枠の、採用専用CTA。ページ全体で何度も
 * CTAを出さない方針のため、section自体が持つのはこの1箇所のみ。
 * -------------------------------------------------------------- */
.nm-recruit-cta__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-md);
	text-align: center;
}

.nm-recruit-cta__heading {
	font-size: var(--font-size-section);
	font-weight: 700;
	max-width: 22ch;
}

.nm-recruit-cta__body {
	color: var(--color-text-subtle);
	max-width: 50ch;
}

.nm-recruit-cta__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	font-weight: 700;
	color: var(--color-primary);
	text-decoration: none;
}

.nm-recruit-cta__arrow {
	display: inline-block;
	transition: transform var(--transition-fast);
}

.nm-recruit-cta__link:hover .nm-recruit-cta__arrow {
	transform: translateX(4px);
}