/* TOP・EN 以外の内部ページ共通 CSS（policy/contact/company/support/recruit/sitemap 他）
   2026-07-03 分割：製品・設備一覧系ページ専用スタイルは pages-products.css へ分離。
   分割前バックアップ：git tag before-pages-css-split-20260703 / assets/../nagata-theme-backups/pages.css.bak-20260703 */
/* プライバシーポリシー */
.slug-policy {
	counter-reset: policy-h2;

	h2 {
		font-size: clamp(1.25rem, 0.688rem + 1.5vw, 2rem);
		color: var(--wp--preset--color--sub);
		padding-block-start: 3.125em;
		margin-block-end: 1.25em;
		counter-increment: policy-h2;

		&::before {
			content: counter(policy-h2) ". ";
		}
	}

	h3 {
		font-size: clamp(1.125rem, 1.031rem + 0.25vw, 1.25rem);
		margin-block: 2.35em 0.8em;
		padding-bottom: 11px;
		border-bottom: 1px solid #bfbfbf;
	}
}

/* サイトマップ（ショートコード [nagata_sitemap] / [nagata_support_sitemap] 用。
   どのページに設置しても効くよう .slug-sitemap でスコープせず .sitemap-* で指定）
   構成：大ブロック（本サイト / サポート）＝赤線見出し＋左赤線。
   中身は「親ラベル｜子リスト」の2カラム階層（カンプ準拠）。 */
.sitemap-block {
	margin-block: 2.5em;
}

.sitemap-block__title {
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
	font-weight: 700;
	color: var(--wp--preset--color--corporate);
	border-bottom: 2px solid var(--wp--preset--color--sub);
	padding-block-end: 0.5em;
	margin-block-end: 1.2em;
}

/* .sitemap-block__body {
	border-left: 2px solid var(--wp--preset--color--sub);
	padding-inline-start: clamp(1em, 2vw, 2em);
} */

/* リストのリセット */
.sitemap-menu,
.sitemap-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sitemap-menu li {
	margin-block-end: 1em;

	a {
		text-decoration: underline;
	}
}

/* 各階層ラベル列の幅（子を縦に揃えるため固定。調整はこの変数で） */
.sitemap-menu {
	--sitemap-col: 13em;
}

/* 子(.sub-menu)を持つ項目を「ラベル｜子リスト」の2カラムにする。
   入れ子なので 3階層メニューなら自動で3列に横展開される（PCのみ。SPは縦積み）。
   子を持たない項目（企業情報・お問い合わせ等）は通常の1行で右側いっぱいに並ぶ。 */
@media (768px <=width) {
	.sitemap-menu li:has(> .sub-menu) {
		display: grid;
		grid-template-columns: var(--sitemap-col) 1fr;
		align-items: start;
		column-gap: 1.5em;
	}

	.sitemap-menu li>a,
	.sitemap-menu li>.sitemap-group {
		grid-column: 1;
	}

	.sitemap-menu li>.sub-menu {
		grid-column: 2;
	}
}

/* トップレベル項目の区切り線 */
.sitemap-menu>li {
	padding-block: 0.6em;
	border-top: 1px solid #e3e3e3;
}

.sitemap-menu>li:first-child {
	border-top: none;
}

/* リンク共通 */
.sitemap-menu a {
	display: inline-block;
	padding-block: 0.25em;
	color: var(--wp--preset--color--text);
	text-decoration: none;
	transition: color 0.2s linear;

	&:hover {
		color: var(--wp--preset--color--sub);
	}
}

/* ラベル（子を持つ項目の親リンク / グループ見出し）を強調 */
.sitemap-menu li:has(> .sub-menu)>a,
.sitemap-menu li:has(> .sub-menu)>.sitemap-group {
	color: var(--wp--preset--color--corporate);
}

/* 子リストの行間 */
.sitemap-menu .sub-menu li {
	line-height: 1.6;
}

/* グループ見出し（サポートのカテゴリ名）に ▶ */
.sitemap-group::before {
	content: "▶ ";
	font-size: 0.85em;
}

/* お問い合わせ */
.inquery-block {
	>div:nth-child(1) {
		max-width: 515px;
		margin-inline: auto;

		>p:nth-child(1) {
			text-align: center;
			line-height: 1.5;
			margin-block-end: 2.0775em;
		}

		div {
			background-color: #F5F5F5;
			color: var(--wp--preset--color--corporate);
			padding-block: 1.5em;
			font-weight: 700;
			display: grid;
			gap: 1em;
			margin-block: 2em 5.06em;

			p {
				text-align: center;
				line-height: 1;
				font-size: 1em;
			}

			p:nth-child(1) {
				font-size: clamp(2.25em, 1.588rem + 1.76vw, 3em);
			}

			p:nth-child(2) {
				font-feature-settings: unset;
				line-height: 1.5;
			}
		}
	}

	>div:nth-child(2) {
		max-width: calc(var(--inner-width) - 200px);
		margin-inline: auto;

		>.ngt-warning {
			margin-block: 1.8em 3.7em;
		}
	}

	>p,
	ul.coution-ul {
		max-width: calc(var(--inner-width) - 200px);
		margin-inline: auto;
	}

	ul.coution-ul {
		padding-inline-start: 1.5em;
	}

	form {

		/* CF7 フォームテーブル 2カラムグリッド */
		.cf7-form-table {

			/* テキスト・email・tel・select・textarea 各行 */
			>p {
				display: grid;
				grid-template-columns: 232px 1fr;
				align-items: start;
				column-gap: 1.5em;
				margin-block-end: 1.875em;
				line-height: 1.4;

				>label {
					display: flex;
					align-items: center;
					min-height: 50px;
				}

				/* お問い合わせ内容ラベル後の <br> を非表示 */
				>br {
					display: none;
				}
			}

			/* 添付ファイルセクション（<div> 構造） */
			>div {
				display: grid;
				grid-template-columns: 232px 1fr;
				column-gap: 1.5em;
				align-items: start;
				margin-block-end: 2em;

				/* "添付ファイル" ラベル */
				>p:first-child {
					display: flex;
					align-items: flex-start;
					padding-block-start: 0.7em;
				}

				/* 注記行（inputを含まないp） */
				>div p:not(:has(input)) {
					font-size: 0.875rem;
					color: #505050;
					margin-block-start: 0.5em;
				}

				>div p:nth-last-child(1) {
					line-height: 1.45;
					margin-block-start: 2em;
				}
			}

			/* ラベルテキスト */
			.labels {
				/* font-size: 1rem; */
				font-weight: 700;
				/* font-weight: bold; */

				abbr {
					color: var(--wp--preset--color--sub);
					text-decoration: none;
					margin-inline-start: 0.2em;
				}
			}

			/* テキスト・メール・電話 + セレクト */
			input:is([type="text"], [type="email"], [type="tel"]),
			select {
				width: 100%;
				height: 50px;
				border: 1px solid #D9D9D9;
				background: #fff;
				font: 400 1rem 'Noto Sans JP', sans-serif;
				color: var(--wp--preset--color--text);
				padding-inline: 12px;
				box-sizing: border-box;
				appearance: none;
				-webkit-appearance: none;
				border-radius: 0;
			}

			/* テキストエリア */
			textarea {
				width: 100%;
				height: 245px;
				border: 1px solid #D9D9D9;
				background: #fff;
				font: 400 1rem 'Noto Sans JP', sans-serif;
				color: var(--wp--preset--color--text);
				padding: 0.9em;
				resize: vertical;
				box-sizing: border-box;
				border-radius: 0;
			}

			::placeholder {
				color: #A9A9A9;
				font-size: 0.85em;
				/* ← プレースホルダー文字サイズ */
			}

			/* フォーカス時 */
			input:is([type="text"], [type="email"], [type="tel"]),
			select,
			textarea {
				&:focus {
					outline: 1px solid #D9D9D9;
					/* ← フォーカスリング色 */
					outline-offset: 0;
					border-color: #ccc;
					/* ← ボーダー色 */
				}
			}

			/* セレクト 下矢印 */
			.wpcf7-form-control-wrap:has(select) {
				display: block;
				position: relative;

				&::after {
					content: '';
					position: absolute;
					right: 0.95em;
					top: 50%;
					translate: 0 -50%;
					width: 0;
					height: 0;
					border: 5px solid transparent;
					border-top: 7px solid #999;
					pointer-events: none;
				}

				select {
					padding-right: 36px;
				}
			}

			/* ファイル入力 */
			input[type="file"] {
				display: block;
				margin-block-end: 0.5em;

				&::file-selector-button,
				&::-webkit-file-upload-button {
					appearance: none;
					-webkit-appearance: none;
					border: 1px solid #D9D9D9;
					/* ← ボタン枠色 */
					background: #D9D9D9;
					/* color: #333; */
					padding-inline: 0.35em;
					padding-block: 0.25em;
					cursor: pointer;
					margin-inline-end: 0.5em;
				}
			}

			/* バリデーションエラー */
			.wpcf7-not-valid {
				border-color: var(--wp--preset--color--sub) !important;
			}
		}

		/* バリデーションエラーメッセージ */
		.wpcf7-not-valid-tip {
			color: var(--wp--preset--color--sub);
			font-size: 0.875rem;
			margin-block-start: 4px;
			display: block;
		}

		/* 「入力内容を確認する」ボタン（button.wpcf7-submit） */
		button.wpcf7-submit {
			background-color: var(--wp--preset--color--corporate);
			color: var(--wp--preset--color--white);
			border: none;
			border-radius: 3em;
			cursor: pointer;
			display: block;
			margin-inline: auto;
			padding-inline: 2.5em;
			padding-block: 1.25em;
			transition: background-color 0.3s linear, color 0.3s linear;

			&:not(:disabled):hover {
				background-color: var(--wp--preset--color--white);
				color: var(--wp--preset--color--corporate);
				outline: 1px solid var(--wp--preset--color--corporate);
			}

			&:disabled {
				background-color: #ccc;
				color: #fff;
				cursor: not-allowed;
			}
		}

		/* プライバシー同意行 */
		>p:has([type="checkbox"]) {
			display: grid;
			gap: 0.125em 1em;
			margin-block: 2.5em;

			@media (min-width: 769px) {
				grid-template-columns: repeat(2, auto);
				justify-content: start;
			}

			.wpcf7-list-item {
				margin-inline: unset;
				font-size: 1rem;

				label {
					display: flex;
					align-items: center;
					gap: 0.5em;
					cursor: pointer;
					font-weight: 700;
				}
			}

			/* チェックボックスを大きく */
			input[type="checkbox"] {
				width: 1.25rem;
				height: 1.25rem;
				cursor: pointer;
				accent-color: var(--wp--preset--color--corporate);
			}

			/* リンク + 外部リンクアイコン */
			a {
				display: inline-flex;
				align-items: center;
				gap: 0.3em;
				color: var(--wp--preset--color--corporate);
				transition: 0.3s linear;

				&:hover {
					color: var(--wp--preset--color--sub);
				}

				&::after {
					content: '';
					display: inline-block;
					width: 0.9em;
					height: 0.9em;
					flex-shrink: 0;
					background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='CurrentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") no-repeat center / contain;
				}
			}
		}

		/* SP（768px以下）: 1カラム */
		@media (max-width: 768px) {
			.cf7-form-table {

				>p,
				>div {
					grid-template-columns: 1fr;

					>label,
					>p:first-child {
						min-height: auto;
						padding-block: 0 0.5em;
					}
				}
			}
		}

		div.ngt-warning {
			margin-block: 3em;
		}
	}
}

.wpcf7-turnstile.cf-turnstile {
	width: fit-content;
	margin-inline: auto;
}

div:has(.wp-block-contact-form-7-contact-form-selector)+p {
	margin-block-start: 3em;
}

/* お問い合わせ（続き）— オーバーレイ「送信する」ボタン（document.body直下のため .inquery-block 外） */
#nagata-contact-submit-btn {
	background-color: var(--wp--preset--color--corporate);
	color: #fff;
	border: none;
	border-radius: 3em;
	/* ← 値を調整 */
	cursor: pointer;
	padding: 10px 16px;
	font-size: 15px;
	font-weight: 700;
	transition: background-color 0.3s linear;

	&:not(:disabled):hover {
		background-color: var(--wp--preset--color--white);
		color: var(--wp--preset--color--corporate);
		outline: 1px solid var(--wp--preset--color--corporate);
	}

	&:disabled {
		background-color: #ccc;
		cursor: not-allowed;
	}
}

/* アーカイブ一覧の抜粋：2行で省略（…）。
   全文はDOMに残るため手入力・自動どちらの抜粋にも一律で効く */
.archive-item__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* アーカイブ：ページネーション（c-button のネイビー枠線スタイルに準拠） */
.archive-pagination {
	margin-block-start: var(--inner-element-height);

	.nav-links {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 8px;
	}

	.page-numbers {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 40px;
		height: 40px;
		padding-inline: 0.5em;
		border: 1px solid var(--wp--preset--color--corporate);
		border-radius: 50%;
		color: var(--wp--preset--color--corporate);
		font-family: "Orbitron", sans-serif;
		font-weight: 700;
		font-size: 14px;
		line-height: 1;
		text-decoration: none;
		transition: color 0.3s, background-color 0.3s;
	}

	a.page-numbers:hover,
	.page-numbers.current {
		background-color: var(--wp--preset--color--corporate);
		color: #fff;
	}

	.page-numbers.dots {
		border-color: transparent;
		min-width: auto;
	}

	/* 前へ・次へ */
	.prev.page-numbers,
	.next.page-numbers {
		min-width: auto;
		padding-inline: 1.25em;
		border-radius: 999px;
		font-family: "Noto Sans JP", sans-serif;
		font-weight: 700;
		font-size: 13px;
	}

	@media (max-width: 768px) {
		.page-numbers {
			min-width: 34px;
			height: 34px;
			font-size: 13px;
		}
	}
}

/* 投稿個別：記事一覧へ戻るリンク。ボタンの見た目は .btn-contact に準拠し、
   ここでは中央寄せ・上マージンのみ担当 */
.single-back {
	width: fit-content;
	margin-inline: auto;
	margin-block-start: var(--inner-element-height);
}

a.single-back__link {
	padding-inline: 1.5em;
}

.single-article__title {
	margin-block: 0.125em 1.5em;
	line-height: 1.2;
}

.archive-item__title {
	margin-block: 0.125em 0;
	line-height: 1.2;

	a {
		color: var(--wp--preset--color--corporate);
		text-decoration: none;

		&:hover {
			color: var(--wp--preset--color--sub);
			opacity: 0.8;
			text-decoration: underline;
		}
	}
}

time.archive-item__date {
	line-height: 1;
	font-weight: bold;
}

.archive-item__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 0.25em;
}

a.archive-item__cat {
	font-size: 10px;
	display: inline-block;
	margin-block: 0 0.5em;
	padding: 0.25em 0.5em;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--corporate);
	border: 1px solid var(--wp--preset--color--corporate);
	text-decoration: none;
	transition: background-color 0.3s;

	&:hover {
		color: var(--wp--preset--color--sub);
		border: 1px solid var(--wp--preset--color--sub);
	}
}

div.archive-list {
	display: grid;
	row-gap: 2em;

}

/* アーカイブ一覧：769px以上で「日付＋カテゴリ ｜ タイトル＋抜粋」の2カラム。
   768px以下はラッパーがそのまま縦積みになる（現状維持） */
@media (min-width: 769px) {
	.archive-item {
		display: grid;
		grid-template-columns: 10em 1fr;
		/* 左列を固定幅にして全行で揃える */
		column-gap: 2em;
		align-items: start;
	}
}

/* 固定ページ */
.boxoutline-point {
	justify-content: center;
	padding-inline-start: 0;
	list-style: none;
	display: grid;
	gap: 0.95em;
	grid-template-columns: repeat(2, minmax(auto, 254px));
	margin-block-end: calc(var(--inner-element-height) + 2em);

	li {
		font-size: clamp(1.125rem, 0.857rem + 0.71vw, 24px);
		position: relative;
		margin: 0;
		padding: 0;
		text-align: center;
		background-color: var(--wp--preset--color--corporate);
		background-image: linear-gradient(315deg, #1d2345 46.63%, #075a87);

		a {
			display: block;
			/*padding: 1em;*/
			width: 100%;
			height: 100%;
			text-decoration: none;
			/*color: var(--wp--preset--color--corporate);*/
			z-index: 2;
			position: relative;
			transition: all 0.2s cubic-bezier(.01, .85, .75, .99);
		}

		&:before {
			position: absolute;
			/* inset:0 だとclip-pathの斜め辺のアンチエイリアシングで直線部分に背景の紺色が
			   1pxの線状に滲んで見えるため、1px分だけ外側に広げて滲みを隠す */
			inset: -1px;
			content: "";
			transition: all 0.2s cubic-bezier(.01, .85, .75, .99);
			background-color: var(--wp--preset--color--white);
			clip-path: polygon(0 0, 100% 0, 100% 70%, 93% 100%, 0 100%);
		}

		&:hover {
			a {
				color: var(--wp--preset--color--white);
				transition: all 0.2s cubic-bezier(.01, .85, .75, .99);
				text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
			}

			&:before {
				transition: all 0.2s cubic-bezier(.01, .85, .75, .99);
				clip-path: polygon(0% 0%, 100.00% 0%, 10% 0%, 0% 40%, 0% 100%);
			}
		}
	}
}


/*recruit-page-blok*/
.recruit-page-blok {
	padding-block-start: 2em;
	.boxoutline-point {
		gap: clamp(0.625rem, 0.179rem + 1.19vw, 1.25rem);
		margin-block-end: 8em;

		li {
			font-size: clamp(1.125rem, 0.857rem + 0.71vw, 24px);
			position: relative;
			margin-inline-start: 0;
			padding-inline-start: 0;
			border: 1px solid var(--wp--preset--color--corporate);
			text-align: center;
			background-color: var(--wp--preset--color--corporate);
			background-image: linear-gradient(315deg, #1d2345 46.63%, #075a87);
			transition: all 0.3s linear;

			a {
				padding: 1em;
				color: var(--wp--preset--color--corporate);
				font-weight: 700;
			}

			&:before {
				inset: 0;
				clip-path: polygon(0 0, 100% 0, 100% 70%, 90% 100%, 0 100%);
			}

			&:hover {
				a {
					color: var(--wp--preset--color--white);
					text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
				}
				&:before {
					clip-path: polygon(0px 0px, 100.00% 0%, 10% 0%, 0%28%, 0px 80%);
				}
			}
		}
	}
dl.wp-block-nagata-dl {
	margin-block-start: 1.5em
}
}

/* 製品リストページ共通: カテゴリナビ sticky + アンカーオフセット
   .product-list_block を持つページ（tape_reel / custom_built 等）に適用 */
.product-list_block #category-nav {
	font-weight: 700;
	position: sticky;
	top: calc(var(--header-container-height) + var(--header-height) + 1em);
	z-index: 49;

	/* ぼかし背景は::beforeに分離し、上下端だけmask-imageでグラデーション。
	   #category-navに直接backdrop-filter/背景を掛けると、境界がくっきり分かれすぎる上、
	   マスクを掛けるとリンク文字まで一緒にフェードしてしまうための対策 */
	&::before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: -1;
		pointer-events: none;
		background-color: #ffffff36;
		backdrop-filter: blur(17px);
		-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 6%, black 80%, transparent 100%);
		mask-image: linear-gradient(to bottom, transparent 0%, black 6%, black 80%, transparent 100%);
	}
}

.product-list_block h2[id] {
	/* --nav-height は equipment.js が算出（sticky top + ナビ実高さ）。
	   フォールバックはJS無効時用：ヘッダー分 + ナビ想定高さ 6em */
	scroll-margin-top: var(--nav-height, calc(var(--header-container-height) + var(--header-height) + 6em));
}

article {
	h2.text-highlight[data-en] {
		font-size: 2.25rem;
		line-height: 1.75;
		margin-block: 0 1.4em;

		&::before {
			line-height: 1.2;
			font-size: 1.25rem;
			width: fit-content;
			margin-inline: auto;
		}
	}

	/* 各 h2.text-highlight は親(セクション)が異なり兄弟ではないため
	   h2 ~ h2 では選べない。セクション(.company-*-block)同士は兄弟なので、
	   最初の代表挨拶セクションより後ろのセクション内の見出しだけ小さくする
	   （＝ページ最初の1つを除外）。 */
	.company-message-block~* h2.text-highlight[data-en] {
		font-size: clamp(2rem, 1.821rem + 0.48vw, 2.25rem);
	}

	.text-highlight[data-en] {
		&::before {
			width: fit-content;
		}
	}

	:where(p) {
		text-align: justify;
	}
}

:where(.slug-contact, .slug-sitemap, .slug-recruit, .slug-company, .slug-support, .slug-visual_inspection, .slug-custom_business, .slug-industrial_equipment, .slug-tape_reel, .slug-custom_built) article {
	margin-inline: auto;
}

:where(.slug-recruit, .slug-company, .slug-support, .slug-visual_inspection, .slug-custom_business, .slug-industrial_equipment, .slug-tape_reel, .slug-custom_built) article {
	margin-block-start: clamp(3.625em, 1.596rem + 4.23vw, 5.4em);
}

.slug-recruit article {
	h2 {
		text-align: center;
		margin-inline: auto;
	}

	h3 {
		font-size: 1.875rem;
		font-weight: 700;
		color: var(--wp--preset--color--white);
		/*background-color: var(--wp--preset--color--corporate);*/
		background-image: url(../../../../uploads/2026/06/nagatamark.svg), var(--gradient-2);
		background-repeat: no-repeat, no-repeat;
		background-position: 1rem center, left center;
		padding-inline-start: 2.5em;
	}

	/* 最後のdivの直下のpにリンクがある場合、margin-block-endを0にする */
	>div>div:nth-last-of-type(1) {
		p:has(a[href]) {
			margin-block-end: 0;
		}
	}

	p:has(a[href]) {
		width: clamp(18.75rem, 13.75rem + 13.33vw, 25.75rem);
		margin-block: 3em 4em;
		margin-inline: auto;
		text-align: center;

		a {
			text-decoration: none;
			color: var(--wp--preset--color--white);
			font-weight: 700;
			width: 100%;
			padding: 0.75em 2em;
			display: block;
			border-radius: 3em;
			background-color: var(--wp--preset--color--sub);
			border: 1px solid var(--wp--preset--color--sub);
			transition: all 0.3s linear;

			&:hover {
				color: var(--wp--preset--color--sub);
				background-color: var(--wp--preset--color--white);
			}
		}
	}

	.recruit-flow-box {
		--recruit-block-width: 33px;
		margin-block-start:3.5em;

		h4 {
			font-size:1.25rem;
			padding-block-end: 0.25em;
			border-bottom: 1px solid var(--wp--preset--color--corporate);
			margin-block-end: 1.5em;
		}

		>div {
			background-color: var(--wp--preset--color--base);
			padding: var(--recruit-block-width);
			box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
		}
	}

	@media(1024px >=width) {
		.recruit-flow-box {
			max-width: 536px;
			margin-inline: auto;
			flex-direction: column;
		}
	}

	@media(1024px >=width) {
		.recruit-flow-box {
			.flow-image {
				grid-template-columns: repeat(4, minmax(4.75em, 1fr));

				>p:not(:last-child)::after {
					margin-left: calc(var(--flow-gap) / 4);
				}
			}
		}
	}

	/* 採用スケジュール（応募→会社訪問→選考→内定）
	   ── 更新者向け ──
	   4つの段落を囲む Group ブロックに追加CSSクラス flow-image を付ける。
	   各段落がネイビーのボックスになり、間に右向き三角形が入る。
	   PC・スマホとも常に横一列（文字とgapは画面幅で自動縮小）。
	   ※Group の「モバイルでは縦に並べる」は必ず OFF にすること（ONだと縦積みされる）。 */
	.flow-image {
		--flow-gap: clamp(0.4em, 1.8vw, 1.1em);
		display: grid;
		grid-template-columns: repeat(4, minmax(5.75em, 1fr));
		/* 4列・最大5.75em・狭い画面で縮小 */
		justify-content: center;
		/* 余白がある時はボックス群を中央寄せ */
		align-items: stretch;
		column-gap: var(--flow-gap);
		/* この値の中央に三角形が来る */
		margin-block: 1.5em;

		>p {
			margin: 0;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			min-width: 0;
			/* グリッドのトラック幅に収め、必要なら縮小 */
			min-height: 5.75em;
			font-size: clamp(0.72em, 0.45rem + 1.1vw, 1em);
			/* 狭い画面で縮小し4つ横並びを維持 */
			text-align: center;
			line-height: 1.25;
			letter-spacing: 0.1em;
			font-weight: 700;
			color: var(--wp--preset--color--white);
			background-color: var(--wp--preset--color--corporate);
			border-radius: 10px;
		}

		/* ボックス間の右向き三角形（最後の枠以外の右側） */
		>p:not(:last-child)::after {
			content: "";
			position: absolute;
			left: 100%;
			top: 50%;
			translate: 0 -50%;
			margin-left: calc(var(--flow-gap) / 2 - 0.25em);
			/* gap 中央へ（0.25em=三角幅の半分） */
			width: 0;
			height: 0;
			border-block: 0.45em solid transparent;
			border-inline-start: 0.5em solid var(--wp--preset--color--corporate);
		}
	}

	/* 募集枠の「無効化」表示
	   ── 更新者向け ──
	   募集を停止した採用枠は、その枠を囲む div（Group ブロック）の
	   「高度な設定 > 追加 CSS クラス」に not-hiring を追加する。
	   効果：先頭に「※現在募集はしておりません」を表示／h3・dl・応募ボタンを
	   半透明化（opacity 0.65）／応募ボタンを無効化（クリック不可・グレー）。
	   HTML やテキストの削除は不要。再開時はクラスを外すだけ。
	   ※詳細は CLAUDE.md「採用ページ：募集枠の無効化」節を参照。 */
	.not-hiring {

		dl{
			display: none;
		}

		a[href] {
			display: none;
			pointer-events: none;
			background-color: var(--wp--preset--color--cyan-bluish-gray);
			border-color: var(--wp--preset--color--cyan-bluish-gray);
		}

		&::before {
			content: "※現在募集はしておりません";
			font-size: 1rem;
			font-weight: 700;
			color: var(--wp--preset--color--sub);
			display: block;
			margin-block-end: 0.25em;
			background-color: var(--wp--preset--color--white);
			top: 0;
			left: 0;
			width: 100%;
		}

	}

}

/* 定義リスト（nagata/dl）テーブル — article 本文内で共通使用（採用ページ専用ではない） */
article dl.wp-block-nagata-dl {
	--dl__dd__dt_c: #D9D9D9;
	display: grid;
	grid-template-columns: 8.5em 1fr;
	border: 1px solid var(--dl__dd__dt_c);
	border-bottom: none;
	margin-block: 1em 2em;

	dt {
		background-color: #F3F4F8;
		padding: 1.95em 1.25em;
		border-bottom: 1px solid var(--dl__dd__dt_c);
		display: flex;
		flex-wrap: wrap;
		line-height: 2;
		text-align: left;
	}

	dd {
		padding: 1.95em 1.25em;
		border-bottom: 1px solid var(--dl__dd__dt_c);
		line-height: 1.7;
		margin-inline-start: 0;
		background-color: var(--wp--preset--color--white);
		margin-block: 0;

		.ngt-bold {
			margin-block-end: 0;
		}

		p,
		ul {
			margin-block: 0 1.25em;
		}

		/* dd 内は InnerBlocks（段落・リスト等）。両端のブロック余白を打ち消す */
		> :first-child {
			margin-block-start: 0;
		}

		> :last-child {
			margin-block-end: 0;
		}
	}
}

@media (768px >=width) {
	article dl.wp-block-nagata-dl {
		grid-template-columns: 1fr;

		dt {
			border-bottom: none;
			padding-block-end: 0.5em;

			br {
				display: none;
			}
		}

		dd {
			border-bottom: 1px solid #D9D9D9;
			padding-block: 1em 1.25em;
		}
	}
}

/* 企業ページ */
.slug-company article {
	--inner-hight: 78px;

	h2 {
		text-align: center;
		margin-inline: auto;
	}

	.company-message-block {
		background-image: url(../img/company-page-img01.webp);
		background-position: right top;
		padding-block-end: 4em;

		@media(1024px < width) {
			padding-block-start: 2em;
			background-size: cover;
		}

		p {
			max-width: 50em;
			margin-inline: auto;
			font-feature-settings: normal;

			&.leadCopy-block {
				color: var(--wp--preset--color--corporate);
				font-weight: 700;
				line-height: 1.67;
				margin-block: 2.5em 1.8em;
				text-align: center;

				@media(768px >=width) {
					text-align: start;

					br {
						display: none;
					}
				}
			}

			&.signature-block {
				text-align: right;
				margin-block-start: 3em;
			}
		}
	}
:where(
	.company-outline-block,
	.company-history-block,
	.company-message-factory,
	.supportDownload_block,
	.company-history-block,
	.company-initiative-block) {
		margin-block: var(--inner-hight);
	}
	:where(.company-initiative-block) {
		background-color: var(--wp--preset--color--base);
		padding-block: 4.8em;
	}

	.company-feature-block {
		h2[data-en] {
			margin-block: 3.5em 2em;
		}
		margin-block: var(--inner-element-height);

		img {
			display: block;
			max-width: 537px;
			width: 100%;
			height: auto;
			object-fit: cover;
		}

		figure {
			display: block;
		}

		>div {
			display: grid;
			grid-template-columns: repeat(2, minmax(auto, 1fr));
			gap: 1.5em;
			padding-block: 52px;
			border-bottom: 1px solid var(--wp--preset--color--corporate);

			&:nth-of-type(1) {
				border-top: 1px solid var(--wp--preset--color--corporate);
			}

			@media(1024px <=width) {
				&:nth-of-type(even) {
					>div {
						grid-column: 2 / 3;
						grid-row: 1;
						justify-self: end;
					}
				}
			}

			>div {
				max-width: 432px;
				p{
					line-height: 1.925;
				}
			}

			@media(1024px > width) {
				grid-template-columns: 1fr;
				justify-items: center;

				>div {
					max-width: 537px
				}
			}
		}
	}

	h3.text-highlight.fnt36-24[data-en] {
		line-height: 1.55;
		margin-block-end: 0.675em;

		&::before {
			font-size: clamp(2rem, 1.286rem + 1.9vw, 48px);
			line-height: 1.2;
			margin-block-end:0.25em;
		}
	}



	.company-initiative-block {
		h2+div.wp-block-group-is-layout-grid {
			img {
				display: block;
				max-width: 155px;
				width: 100%;
				height: auto;
				object-fit: contain;
				border: 1px solid #E4E4E4;
			}

			@media(1024px > width) {
				display: grid;
				max-width: 537px;
				margin-inline: auto;
				grid-template-columns: 1fr;
				justify-items: center;
				gap: 1.5em;

				img {
					margin-inline: auto;
				}
			}

			/* PDFなどダウンロードブロック */
			.layout-grid-block {
				background-color: var(--wp--preset--color--white);
				display: grid;
				gap: 1em;
				padding: 42px 1.25em;
				border: 1px solid #C8C8C8;

				h3 {
					font-size: 20px;
					line-height: 1.45;
					margin-block-end: 1rem;
				}

				>div {
					display: contents;

					>figure {
						display: block;
					}
				}

				>p {
					background-color: #F5F5F5;
					padding: 1em;
					min-height: 5em;
				}
			}

			@media(768px > width) {
				.layout-grid-block {
					grid-template-columns: 1fr;
				}
			}

			@media(768px <=width) {
				.layout-grid-block {
					/* 外グリッドの2行(メイン/説明)を占有し subgrid で継承
					   → 同じ段のカード間でメイン部・説明部の高さが揃う
					   （PDFリンクも下端で揃い、グレー説明ボックスも揃う） */
					grid-row: span 2;
					grid-template-rows: subgrid;
					grid-template-columns: 1fr auto;

					>div {
						grid-row: 1;
						/* メイン部 = 共有行1 */
						display: grid;
						width: 100%;
						grid-template-columns: 1fr auto;
						column-gap: 1.5em;

						>div {
							grid-column: 1;
							align-self: center;
						}

						>figure {
							grid-column: 2;
						}
					}

					>p {
						grid-row: 2;
						grid-column: 1 / 3;
					}

					.inner-span-block {
						align-self: stretch;
						display: grid;
						grid-template-rows: 1fr auto;

						>div {
							grid-row: 1;

							a {
								color: inherit;
							}
						}

						>p:has(a[href$=".pdf" i]) {
							grid-row: 2;
							align-self: end;
						}
					}
				}
			}
		}
	}

	.company-outline-block {
		iframe {
			max-width: 100%;
		}

		dl {
			border-left: none;
			border-right: none;
			width: 100%;
			grid-template-columns: 1fr;

			dt {
				background-color: var(--wp--preset--color--white);
				font-weight: 700;
			}

			@media(768px > width) {

				dl.dt,
				dd {
					display: block;
					width: 100%;
				}

				dt {
					display: block;
					width: 100%;
				}

				dd {
					padding-block-start: 0;
				}
			}

			@media(768px <=width) {
				grid-template-columns: 0.3fr 1fr;
			}

		}
	}

	.company-history-block{
		>div{
			dl{border:none;}
			dt,dd{
				padding-block: 1.75em 1.25em;
			&:nth-of-type(1){
				border-top: 1px solid #d9d9d9;
			}
			}
		}

	}
}

/* 工場紹介 */
.company-message-factory {
	h3 {
		font-size: 1.15rem;
		border-bottom: 1px solid var(--wp--preset--color--corporate);
		margin-block: 0.5em 1em;
		padding-block-end: 0.25em;

	}
	h3,p{padding-inline: 1.25em;}

	img {
		display: block;
		width: 100%;
		max-width: 510px;
		height: auto;
		object-fit: cover;
	}

	>div {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(clamp(18.75rem, 12.784rem + 15.91vw, 31.875rem), 1fr));
		gap: clamp(1.74rem, -1.66rem + 9.07vw, 6.1rem) clamp(1.5rem, -0.866rem + 6.31vw, 4.813rem);
	}

}

.photos-images-block {
	display: grid;
	grid-template-columns: repeat(3, minmax(clamp(9.375rem, 3.693rem + 15.15vw, 355px), 1fr));
	gap: 1em 10px;

	figure,
	img {
		display: block;
	}

	figcaption {
		font-size: 1.015rem;
		font-weight: 700;
	}

	img {
		width: 100%;
		max-width: 510px;
		height: auto;
		object-fit: cover;
		aspect-ratio: 1 / 0.668;
	}
}

@media(600px > width) {
	.company-message-factory {
		>div {
			grid-template-columns: 1fr;
			/* width:clamp(18.75rem, 12.784rem + 15.91vw, 31.875rem); */
			justify-self: center;
		}

	}

	.photos-images-block {
		grid-template-columns: repeat(2, minmax(clamp(9.375rem, 3.693rem + 15.15vw, 355px), 1fr));
	}
}

.slug-support {
	--inner-height: 78px;
}

.faq-page-block {
	padding-block-start: 1.45em;
	h2 {
		margin-inline: auto;
		text-align: center;
	}

	h2.fnt36-24 {
		margin-block-end: 0.95em;
		background-image: url(../img/svg/heart.svg);
		background-repeat: no-repeat;
		background-position: center top;
		padding-block-start: 1.75em;
	}

	>div:nth-of-type(1) {
		margin-block-end: var(--inner-height);
		max-width: 46.5em;
		margin-inline: auto;

		a {
			display: block;
			text-align: center;
			padding-block: 1em;
			text-decoration: none;
			color: inherit;
			font-size: clamp(1rem, 0.875rem + 0.33vw, 1.125rem);
			transition: all 0.3s linear;
		}

		>div {
			margin-block: 3em 2em;
			display: grid;

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

			a {
				color: var(--wp--preset--color--white);
				background-color: var(--wp--preset--color--corporate);
				font-weight: 700;
				width: 100%;
				height: 100%;
				padding-inline: 3em;
				border: 1px solid transparent;

				&::after {
					content: "▼";
					font-size: 0.85em;
					display: inline-block;
					margin-inline-start: 1.25em;
				}

				&:hover {
					color: var(--wp--preset--color--corporate);
					background-color: var(--wp--preset--color--white);
					border-color: var(--wp--preset--color--corporate)
				}
			}
		}

		p:has(a:not([href*="#"])) {
			width: fit-content;
			margin-inline: auto;
			padding-block-end: 0.125em;
			transition: all 0.3s linear;

			a {
				padding-inline-end: 0.25em;
				padding-block: unset;
				padding-block-end: 0.05em;
			}
		}
	}

	.supportFAQ_block {
		background-color: #E8EAF1;
		margin-block-end: var(--inner-height);
		padding-block: 70px;

		dl.wp-block-nagata-dl.page_inner_block {
			border: none;
			grid-template-columns: 1fr;

			dt,
			dd {
				padding-inline: 3rem;
			}

			dt {
				border: none;
				display: block;
				background-color: var(--wp--preset--color--white);
				font-size: 1.25rem;
				line-height: 1.4;
				font-weight: 700;
				text-align: start;
				width: 100%;
				padding-block: 1.75rem 10px;
				box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
			}

			dd {
				border: none;
				padding-block: 0.6em 1.75em;
				margin-block-end: 1.5rem;
				box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
			}
		}
	}

}

/* .faq-page-block のスコープ外に独立（企業情報ページ等、faq-page-block を持たないページでも使えるように 2026-07-13 分離） */
.supportDownload_block {
	h3 {
		display: flex;
		flex-direction: column-reverse;
		color: var(--wp--preset--color--text);
		align-items: center;
		border-bottom: 1px solid var(--wp--preset--color--base);
		border-top: 1px solid var(--wp--preset--color--base);
		padding-block: 0.7em;
		line-height: 1.4;

		&::before {
			margin-block-start: 1em;
			text-align: center;
			font-size: clamp(0.563rem, 0.422rem + 0.38vw, 0.75rem);
		}
	}

	>div {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		@media(768px <= width) {
			#dl-01{justify-self: end;}
			#dl-02{justify-self: start;}
		}
		@media(768px > width) {
			grid-template-columns: 1fr;
		}
		gap: 2rem;
		justify-content: center;
		justify-items: center;
		align-items: center;

		img {
			display: block;
			width: 100%;
			height: auto;
			object-fit: contain;
		}

		>div {
			position: relative;
			transition: all 0.3s linear;
			align-content: space-between;
			width: 100%;
			max-width: 460px;
			padding: 1.25em 15px 1em;
			column-gap: clamp(0.5rem, -0.036rem + 1.43vw, 1.25rem);
			border: 1px solid var(--wp--preset--color--corporate);

			&::after {
				position: absolute;
				inset: 0;
				content: "";
				background-color: transparent;
				z-index: -1;
				border-radius: 50%;
				width: 160px;
				height: 160px;
				transform: scale(0);
				transition: all 0.3s linear;
				margin-inline: 50%;
				margin-block: auto;
			}

			&:hover {
				&::after {
					transform: scale(1);
					background-color: var(--wp--preset--color--base);
				}
			}

			div {
				align-items: center;
				flex: 1;
				row-gap: 2.5em;

				a[href$=".pdf" i] {
					padding-block-end: 0.2em;
				}
			}
		}
	}
}
