p {
	text-align: justify;
}

/* 文字グラデーション */
.text-gradient {
	background: var(--gradient-1);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	width: fit-content;

	/*&::after {}*/
}

/* ─────────────────────────────────────────
   サイトヘッダー
───────────────────────────────────────── */
#header-sentinel {
	position: absolute;
	top: 0;
	width: 1px;
	height: var(--sticky-offset, 300px);
	pointer-events: none;
	visibility: hidden;
}

.site-header {
	position: absolute;
	width: 100%;
	top: 0;
	z-index: 100;
	background-color: oklch(0.27 0.06 273.87 / 0.55);
	backdrop-filter: blur(20px);

	&.is-sticky {
		position: fixed;
		animation: header-slide-down 0.75s ease both;
	}

	&.is-leaving {
		position: fixed;
		animation: header-slide-up 0.4s ease both;
	}
}

@keyframes header-slide-down {
	from {
		transform: translateY(-100%);
	}

	to {
		transform: translateY(0);
	}
}

@keyframes header-slide-up {
	from {
		transform: translateY(0);
	}

	to {
		transform: translateY(-100%);
	}
}

/* ドロップダウン暗幕（空要素不要・body::before で実装） */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 50;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

body:has(.site-header:hover)::before {
	opacity: 1;
	pointer-events: auto;
}

.site-header__inner {
	padding-inline: min(2vw, 26px);
	display: grid;
	gap: 0 0.75rem;
	grid-template-columns: auto 1fr auto;
	grid-template-rows: var(--header-container-height) var(--header-height);
	align-items: center;

	.site-header__container {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.mobile-menu-toggle {
		grid-column: -1;
		grid-row: 2;
	}

	.site-header__lang {
		grid-column: -2;
		grid-row: 2;
	}
}

/* ページ内リンク（アンカー）時に固定ヘッダーへ隠れないようオフセット
   ─ 現代の標準プロパティ scroll-margin-top を使用（旧来の透明擬似要素や
     負マージン等のハックは不要）。アンカー遷移・scrollIntoView 双方に効く。
   ─ オフセット = ヘッダー上部バー + ナビ行 + 余白（変数なのでSPでも自動追従）。
   ─ :where() で詳細度0 → 設備ページ等の個別 scroll-margin-top（カテゴリナビ分を
     上乗せしたい箇所）が優先される。 */
:where([id]) {
	scroll-margin-top: calc(var(--header-container-height) + var(--header-height) + 1rem);
}

/* アンカー遷移をなめらかに（モーション抑制設定の人には無効化） */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* スキップリンク（キーボード/SR用・フォーカス時のみ表示） */
.skip-link {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1000;
	transform: translateY(-150%);
	padding: 0.75em 1.25em;
	background: var(--wp--preset--color--corporate);
	color: var(--wp--preset--color--white);
	text-decoration: none;
	transition: transform 0.2s ease;
}

.skip-link:focus {
	transform: translateY(0);
}

/* デスクトップナビ */
.site-header__nav {
	align-self: stretch;

	ul {
		display: flex;
		list-style: none;
		margin: 0;
		padding: 0;
		gap: 1.5rem;
		justify-content: flex-end;
		align-items: stretch;
		height: 100%;

		li {
			position: relative;
			display: flex;
			align-items: center;

			a {
				color: #ffffff;
				font-size: 14px;
				text-decoration: none;
				white-space: nowrap;
			}

			/* マウス（hover 可能デバイス）のみ hover で開く。タッチはクリックで開く（JS） */
			@media (hover: hover) {
				&:hover .sub-menu {
					display: block;
				}
			}

			/* クリック/タップ開閉（nav-dropdown.js が .is-open を付与） */
			&.is-open>.sub-menu {
				display: block;
			}
		}
	}

	/* サブメニューありの矢印 */
	.menu-item-has-children>a::after {
		content: "";
		display: inline-block;
		width: 10px;
		height: 6px;
		margin-left: 0.4rem;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1 L5 5 L9 1' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-size: contain;
		vertical-align: middle;
		opacity: 0.7;
		transition: transform 0.2s ease;
	}

	/* 開いているとき矢印を反転 */
	.menu-item-has-children.is-open>a::after {
		transform: rotate(180deg);
	}

	/* ドロップダウン */
	.sub-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: -0.5em;
		height: auto;
		background: var(--wp--preset--color--base);
		min-width: 180px;
		padding: 0;
		z-index: 110;

		&:hover {
			li a {
				color: #8a8a8a;
			}
		}

		li {
			display: block;
			color: inherit
		}

		li a {
			display: block;
			padding: 1em 1rem;
			font-size: 13px;
			white-space: nowrap;
			color: #222;
			border-bottom: 1px solid #D4D4D4;
			transition: 0.5s ease-in-out;

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

		}
	}
}

.site-header__lang,
.mobile-menu__lang {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.6);
}

.site-header__lang {
	display: none;
}

.site-header__lang-sep {
	color: rgba(255, 255, 255, 0.4);
}

.site-header__lang-link {
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;

	&.is-active {
		color: #ffffff;
		font-weight: 700;
	}
}

.site-header__logo,
.mobile-menu__logo {
	a {
		display: block;
		padding-block-end: 0.5em;
	}

	img {
		display: block;
		width: clamp(8rem, 4.55rem + 9.2vw, 13.75rem);
		height: auto;
		min-width: 128px;
	}
}

.site-header__container {
	padding-block: 4px;

	p,
	h1 {
		font-size: 10px;
		line-height: 1;
		margin: 0;
		font-weight: normal;
		color: #B7B7B7;
	}
}

/* モバイル MENUボタン / CLOSEボタン（共通リセット） */
:where(.mobile-menu-toggle,
	.mobile-menu-close) {
	background: transparent;
	/* border: none; */
	color: var(--wp--preset--color--white);
	font-family: 'Orbitron', sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.1em;
	cursor: pointer;
	padding: 0;
	width: 60px;
	height: 54px;
	border: 1px solid var(--wp--preset--color--white);
}

.mobile-menu-toggle {
	background-color: var(--wp--preset--color--corporate);
	transition: 0.3s linear;
}

.mobile-menu-close {
	letter-spacing: 0;
	font-size: 12.5px;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--corporate);
}

.mobile-menu-toggle {
	display: none;
}

/* ─────────────────────────────────────────
   モバイルオーバーレイメニュー
───────────────────────────────────────── */
.mobile-menu {
	display: none;
	position: fixed;
	inset: 0;
	background: var(--wp--preset--color--corporate);
	z-index: 200;
	overflow: hidden;
	width: 100%;

	&.is-open {
		display: flex;
		flex-direction: column;
	}
}

body.mobile-menu-open {
	overflow: hidden;
}

.mobile-menu__bar {
	display: grid;
	grid-template-columns: 1fr auto auto;
	grid-template-rows: calc(var(--header-height));
	align-items: center;
	padding-block-start: var(--header-container-height);
	padding-inline: 2vw calc(2vw + env(safe-area-inset-right));
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	gap: 0 0.75rem;
}

.mobile-menu__lang-link {
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;

	&.is-active {
		color: #ffffff;
		font-weight: 700;
	}
}

.mobile-menu__nav {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 1rem 4vw;

	ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	ul li a {
		display: grid;
		color: #ffffff;
		font-size: 16px;
		padding-block: 1rem;
		/* border-bottom: 1px solid rgba(255, 255, 255, 0.1); */
		text-decoration: none;
	}

	/* サブメニューを持つ項目：開閉トグル */
	.menu-item-has-children {
		position: relative;
		display: grid;
		grid-template-columns: auto 1fr;

		>a {
			padding-right: 0.75rem;
		}
	}

	.sub-menu {
		max-height: 0;
		overflow: hidden;
		padding-left: 1rem;
		background: rgba(0, 0, 0, 0.15);
		transition: max-height 0.3s ease;
		grid-column: 1 / 3;

		li a {
			font-size: 14px;
			padding-block: 0.75rem;
		}
	}
}

.mobile-menu__nav-toggle {
	position: relative;
	/* top: 0;
	right: 0; */
	width: 100%;
	padding-block: 1rem;
	background: transparent;
	border: none;
	align-content: center;
	cursor: pointer;

	&::before {
		content: "";
		display: block;
		width: 12px;
		height: 7px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1 L5 5 L9 1' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-size: contain;
		transition: transform 0.3s ease;
	}
}

.menu-item-has-children.is-open>.mobile-menu__nav-toggle::before {
	transform: rotate(180deg);
}

.mobile-menu__cta {
	flex-shrink: 0;
	display: grid;
	/* grid-template-columns: repeat(2, 1fr); */
	/* padding: 1rem 4vw calc(1rem + env(safe-area-inset-bottom)); */
	background: rgba(0, 0, 0, 0.2);
	position: absolute;
	bottom: 0;
	width: 100%;
	align-items: center;
	justify-items: center;

	a {
		border-radius: 0;
	}

	a.btn-contact-sp {
		color: var(--wp--preset--color--corporate);
		background-color: var(--wp--preset--color--white);
		border: 1px solid transparent;
	}

	a.btn-member-sp {
		color: var(--wp--preset--color--white);
		border: 1px solid var(--wp--preset--color--white);
		background-color: var(--wp--preset--color--corporate);
	}

	a.btn-contact-sp,
	a.btn-member-sp {
		display: block;
		padding-block: 1rem calc(1rem + env(safe-area-inset-bottom));
		text-decoration: none;
		text-align: center;
		width: 100%;
		transition: 0.3s linear;

		&:hover {
			color: var(--wp--preset--color--cyan-bluish-gray);
			border-color: var(--wp--preset--color--cyan-bluish-gray)
		}
	}
}

/* ─────────────────────────────────────────
   サイトフッター
───────────────────────────────────────── */
.site-footer {
	background-color: var(--wp--preset--color--corporate);
	color: #ffffff;
}

:where(.site-footer, .site-footer__columns) {
	display: grid;
	row-gap: 4em;
}

.site-footer__main {
	padding-block: 7em 0.5em;
	/* padding-inline: 6vw; */
}

.site-footer__columns {
	justify-items: center;
	max-width: var(--outside-width);
	margin-inline: auto;
}

.site-footer__nav-wrap {
	min-width: 0;
	display: grid;
	gap: 2.5rem;
	font-size: 13px;
}

.site-footer__nav-support,
.site-footer__nav {
	margin-inline: 0.75em;
}

.site-footer__name {
	font-size: 32px;
	margin-block: 1.5em 0.25em;
	line-height: 1.2;
	font-weight: 500;
}

.site-footer__name-en {
	font-size: 0.875rem;
	margin-block: 1em;
	line-height: 1;
	font-weight: 500;
}

.site-footer__address {
	color: rgba(255, 255, 255, 0.85);
	font-size: 13px;
	font-style: normal;
	line-height: 1.8;
	margin-block: 4em 1.75rem;
}

.site-footer__nav-title {
	font-size: 18px;
	font-weight: 700;
	margin-block: 0 1.5em;
	letter-spacing: 0.05em;
	padding-bottom: 0.45em;
	border-bottom: 1px solid #BDBBBB;
}

.site-footer__copyright-text {
	color: inherit;
	margin: 0;
	font-weight: normal;
}

.site-footer__logo {
	margin-inline: auto;
	width: fit-content;

	a {
		display: block;
		/*width: clamp(8.188rem, 3.5rem + 12.5vw, 321px);*/
		width: clamp(8.188rem, 3.616rem + 12.02vw, 231px);
		height: 100%;
	}

	img {
		width: 100%;
		height: auto;
		display: block;
	}
}

.site-footer__certs {
	gap: 1rem;
}

.site-footer__nav-support {
	ul {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem 2rem;
	}

	a {
		display: flex;
		width: fit-content;
		gap: 0.25rem;
		color: rgba(255, 255, 255, 0.85);
		font-size: 13px;
		text-decoration: none;

		&::before {
			content: "›";
			padding-inline-end: 0.25em;
		}

		&:hover {
			color: #ffffff;
		}
	}
}

/* footer-main: 産業機器事業 / 受託製品事業 / サポート / 見出しなしグループ の4列グリッド */
.site-footer__nav-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
	width: fit-content;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: inherit;
	@media (768px< width < 1024px) {
		grid-template-columns: repeat(3, auto);
	}
	@media (1380px <=width) {
		max-width: 660px;
	}
	@media(1024px< width < 1440px) {
		gap: clamp(0.25rem, -1.75rem + 3.13vw, 2rem);
	}

	>li>a {
		display: block;
		width: fit-content;
		color: #ffffff;
		letter-spacing: 0.05em;
		text-decoration: none;
		margin-block: 0 0.95rem;
		white-space: nowrap;
	}
@media (768px< width) {
	li#menu-item-214,li#menu-item-199 {
		justify-self: center;
	}
}
	.sub-menu {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		gap: 0.35rem;

		a {
			display: flex;
			width: fit-content;
			gap: 0.25rem;
			color: rgba(255, 255, 255, 0.85);
			font-size: inherit;
			text-decoration: none;

			&::before {
				content: "›";
				padding-inline-end: 0.25em;
			}

			&:hover {
				color: #ffffff;
			}
		}
	}

	/* 見出しを持たない4列目グループ（企業情報・新着情報・採用情報・English） */
	.nav-group--flat>a {
		display: none;
	}

	.nav-group--flat .sub-menu a {

		&::before {
			content: none;
		}
	}
}

.site-footer__copyright {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	padding-block: 1rem;
	padding-inline: 6vw;
	border-top: 1px solid #BDBBBB;
	font-size: 12px;
	color: #808080;
}

.site-footer__legal {
	ul {
		display: flex;
		flex-wrap: nowrap;
		gap: 1.5rem;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	a {
		color: inherit;
		/* font-size: 12px; */
		text-decoration: none;

		&:hover {
			color: #ffffff;
		}
	}
}

.footer-contact {
	padding-block: 138px 109px;
	background-color: #c3dfee;
	background-image: url(../img/footer-image-bg.webp);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	padding-inline: 15px;

	@media (768px > width) {
		padding-block: 5.5em 16.5em;
		background-position: left bottom;
		background-image: url(../img/footer-image-bg_s.webp);
	}

	.footer-contact__text {
		max-width: 30.25em;
		text-align: justify;
		font-weight: 700;
		margin-block: 78px 55px;
	}

	>div {
		max-width: var(--outside-width);
		margin-inline: auto;

		>div {
			display: grid;
			gap: 1.4em;
			max-width: 427px;
			margin-block: 3em 0;

			@media (768px > width) {
				margin-block: 3.2em 0;
			}

			p {
				margin-block: 0;
			}
		}
	}

	h2 {
		line-height: 1;
		margin-block: 0;

		&::before {
			font-size: clamp(60px, 1.875rem + 5vw, 65px);
			letter-spacing: 0;
			line-height: inherit;
			margin-block: inherit;
			margin-block-end: 0.125em;
		}
	}

	.btn-contact {
		border: 1px solid transparent;
		text-align: center;
		font-weight: 700;
		padding-block: 1em;
	}

	.phone {
		font-size: clamp(1.313rem, 0.891rem + 1.13vw, 1.875rem);
		line-height: 1;
		display: inline-grid;
		justify-content: center;
		align-items: center;
		gap: 0.25em;

		span.phone-number {
			font-family: 'Orbitron', sans-serif;
			font-weight: 700;
			grid-column: 2;
		}

		.footer-contact__hour {
			font-size: 14px;
			grid-column: 1/3;
			grid-row: 2;
			text-align: center;
			font-feature-settings: normal;
			margin-block-start: 2px;
		}
	}
}

.footer-form {
	font-size: clamp(0.875rem, 0.594rem + 0.75vw, 1.25rem);
}

/* phoneボタンスタイル */
.btn-phone {
	padding-inline: clamp(0.5rem, -3.589rem + 6.39vw, 2.8rem);
	padding-block: 0.65em;
	border-radius: 5em;
	transition: 0.3s linear;
	display: block;
	text-decoration: none;
	background-color: var(--wp--preset--color--corporate);
	color: var(--wp--preset--color--white);

}

/* ─────────────────────────────────────────
   下線スライドアニメーション（共通）
   ヘッダー・フッターナビリンクにホバーで左から右へ伸びる下線
───────────────────────────────────────── */
.site-header__nav-list>li>a,
.site-footer__nav-list>li>a,
.site-footer__nav-list .sub-menu a,
.site-footer__nav-support a,
.site-footer__legal a {
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 0% 1px;
	transition: background-size 0.3s ease;

	&:hover {
		background-size: 100% 1px;
	}
}

/* ─────────────────────────────────────────
   下線リフローアニメーション
   初期状態で下線表示 → hover で右→左に縮み → 左→右に伸びて維持
───────────────────────────────────────── */
@keyframes nagata-underline-reflow {
	0% {
		background-size: 100% 1px;
	}

	/* 初期：フル表示 */
	25% {
		background-size: 0% 1px;
	}

	/* 右→左に縮んで消える */
	100% {
		background-size: 100% 1px;
	}

	/* 左→右に伸びる */
}

.link-underline {
	display: inline-block;
	width: fit-content;
	background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 100% 1px;
	padding-block-end: 0.15em;

	a {
		text-decoration: none;
		color: inherit;
	}

	&:hover {
		animation: nagata-underline-reflow 0.6s ease forwards;
	}
}

.faq-page-block .wp-block-paragraph a:not([href$=".pdf" i]):not([href^="#"]) {
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 100% 1px;

	&:hover {
		animation: nagata-underline-reflow 0.6s ease forwards;
	}
}

/* ─────────────────────────────────────────
   カードグリッド + レーザーボーダー
───────────────────────────────────────── */
.grid-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 1px;
	padding: 20px;
	max-width: 100%;
	margin: 0 auto;

	@media (768px > width) {
		max-width: 390px;
		grid-template-columns: 1fr;
		gap: 1.25em;
	}

	@media (768px <=width < 960px) {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	}

	.lb-block {
		/*aspect-ratio: 3 / 4;*/
		aspect-ratio: 1 / 0.898;
		background: var(--wp--preset--color--corporate);
		color: white;
		display: grid;
		place-content: center;
		font-weight: bold;
		opacity: 0;
		transform: translateY(40px);
		transition: opacity 0.8s ease, transform 0.8s ease;
		transition-delay: var(--delay, 0s);
		position: relative;

		&.is-visible {
			opacity: 1;
			transform: translateY(0);
		}

		a {
			display: block;
			position: absolute;
			inset: 0;
			color: #fff;
			transition: 0.3s;

			p {
				color: var(--wp--preset--color--accent);
			}

			&:hover {
				color: #ffffffaa;

				p {
					color: #a1c2d4;
				}
			}
		}

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

		figure {
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
			position: absolute;
			display: block;
			inset: 0;
		}

		div {
			position: absolute;
			width: 100%;
			bottom: 0;
			padding-block: 0.5em;
			overflow-x: clip;

			svg {
				width: 100%;
			}
		}

		figure+div {

			h3,
			p {
				position: relative;
				z-index: 2;
				line-height: 1;
				/* text-align: right; */
				margin-inline: auto 0;
				width: 200px;
				text-align: center;
			}

			h3 {
				margin-block: 0;
				line-height: 0.5;
			}

			p {
				margin-block-start: 0;
				font-size: 10px;
			}
		}
	}
}

.laser-base {
	stroke: #fff;
	stroke-width: 1;
	fill: none;
	opacity: 0.8;
	transition: opacity 0.6s ease, filter 0.6s ease;

	&.laser-bright {
		opacity: 1;
		filter: drop-shadow(0 0 4px #fff);
	}
}

.laser-light {
	stroke: #fff;
	stroke-width: 1.2;
	fill: none;
	filter: drop-shadow(0 0 3px #fff);
	stroke-dasharray: 0.4 1.4;
	animation: laser-move 5s linear 1;
	animation-fill-mode: forwards;
	animation-play-state: paused;
	opacity: 0;

	&.laser-active {
		animation-play-state: running;
	}
}

@keyframes laser-move {
	0% {
		stroke-dashoffset: 0.4;
		opacity: 1;
	}

	70% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: -1.4;
		opacity: 0;
	}
}

/* 設備一覧テーブル（.equipment-list）は 2026-07-14 に custom_business から撤去され全ページ未使用になったため削除。
   復元用バックアップ：nagata-theme-backups/global.css-equipment-list-block-removed-20260714.css
   ※製品カテゴリナビ（tape_reel/custom_built）は pages-common.css / pages-products.css 側にあり equipment.js も継続使用。 */

/* ─────────────────────────────────────────
   汎用
───────────────────────────────────────── */
:where(.element-block, .archive-list) {
	padding-block-end: var(--inner-element-height);
}

.ngt-warning {
	color: var(--wp--preset--color--sub);
}

.accent-point-block {
	&::before {
		content: "■ ";
		color: var(--wp--preset--color--sub);
		margin-inline-end: 0.25em;
	}
}

.ngt-bold {
	font-weight: bold;
}

.page_inner_block {
	max-width: var(--inner-width);
	margin-inline: auto;
}

@media (1160px > width) {
	.page_inner_block {
		margin-inline: 15px;
	}
}

.coution-ul {
	li {
		list-style-type: "※ ";
	}
}

/* 丸数字バッジ */
/* .num-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5em;
	height: 1.5em;
	border-radius: 50%;
	background-color: var(--wp--preset--color--corporate);
	color: #fff;
	font-weight: 700;
	font-size: 0.875rem;
	flex-shrink: 0;
} */
/* 丸数字バッジ（::before + counter版） */
.num-badge-list {
	counter-reset: num-badge;
	/* リストの起点でカウンターを0に初期化 */
}

.num-badge-list>div {
	counter-increment: num-badge;
	/* 要素ごとに+1 */
}

.num-badge-list__item {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.num-badge-list__item::before {
	content: counter(num-badge);
	/* ①②③...ではなく 1,2,3... の数字 */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.35em;
	height: 1.35em;
	border-radius: 50%;
	background-color: var(--wp--preset--color--corporate);
	color: #fff;
	font-weight: 700;
	font-size: 0.85em;
	flex-shrink: 0;
}

h3:has(.headline-decration) {
	width: 100%;
}

.headline-decration {
	line-height: 3;
	display: block;
	font-size: 20px;
	background-image: var(--gradient-2);
	color: var(--wp--preset--color--white);
	padding-inline-start: 1.5em;
	position: relative;

	&::after {
		content: "";
		position: absolute;
		width: 4px;
		inset: 8px 0 8px 10px;
		background-color: var(--wp--preset--color--white);
	}

}

/* ─────────────────────────────────────────
   テキストシャインハイライト（.text-highlight）

   ■ data-en あり（英字ラベル + 日本語テキストの組み合わせ）
     <h2 class="animate-on text-highlight" data-en="Service">事業紹介</h2>
     → ::before に data-en の英字をグラデーション表示
     → .event-view 付与で ::after が mix-blend-mode:screen でシャイン

   ■ data-en なし（要素テキスト自体が英字）
     <p class="animate-on text-highlight">Our vision</p>
     → 要素テキストをグラデーション化
     → .event-view 付与で ::after が mix-blend-mode:screen でシャイン

   ※ animate-on なし → アニメーションなし・グラデーションのみ静的表示
───────────────────────────────────────── */
.text-highlight {
	position: relative;
	width: fit-content;
}

/* ── data-en あり：::before にグラデーション + シャイン層を重ねる ── */
.text-highlight[data-en]::before {
	content: attr(data-en);
	display: block;
	font-family: "Orbitron", sans-serif;
	font-weight: 700;
	font-feature-settings: "salt" 1, "ss01" 1;
	/* letter-spacing: 0.2em; */
	line-height: inherit;
	background:
		linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.85) 50%, transparent 60%),
		var(--gradient-1);
	background-size: 200% 100%, 100% 100%;
	background-position: 150% 0%, 0% 0%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* ── data-en あり：viewport 流入で ::before シャイン発火 ── */
.text-highlight[data-en].animate-on.event-view::before {
	animation: text-shine-sweep-before 0.6s ease-out forwards 0.2s;
}

@keyframes text-shine-sweep-before {
	from {
		background-position: 150% 0%, 0% 0%;
	}

	to {
		background-position: -50% 0%, 0% 0%;
	}
}

/* ── data-en あり：::after 不使用 ── */
.text-highlight[data-en]::after {
	display: none;
}

/* ── data-en なし：要素テキスト自体をグラデーション化 ── */
.text-highlight:not([data-en]) {
	background: var(--gradient-1);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* ── data-en なし：::after 光シャイン層（右外で待機） ── */
.text-highlight:not([data-en])::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg,
			transparent 40%,
			rgba(255, 255, 255, 0.85) 50%,
			transparent 60%);
	background-size: 200% 100%;
	background-position: 150% 0%;
	mix-blend-mode: screen;
	pointer-events: none;
}

/* ── animate-on なし：::after を非表示 ── */
.text-highlight:not(.animate-on)::after {
	display: none;
}

/* ── data-en なし：viewport 流入で ::after シャイン発火 ── */
.text-highlight:not([data-en]).animate-on.event-view::after {
	animation: text-shine-sweep 0.6s ease-out forwards 0.2s;
}

@keyframes text-shine-sweep {
	from {
		background-position: 150% 0%;
	}

	to {
		background-position: -50% 0%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.text-highlight[data-en]::before {
		animation: none;
	}

	.text-highlight::after {
		display: none !important;
	}
}

.site-footer__company .btn-contact {
	width: fit-content;
	padding-inline: clamp(3em, 1.5rem + 4vw, 5em);
	margin-inline: auto;
	font-size: 14px;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--corporate);
	border: 1px solid var(--wp--preset--color--corporate);
	text-align: center;
	font-weight: bold;

	&:hover {
		background-color: var(--wp--preset--color--corporate);
		color: var(--wp--preset--color--white);
	}
}
/* スマホでのみ表示 */
.only-smartphone {
	display: none;

	@media (max-width: 768px) {
		display: block;
	}
}

/* スマホでのみ表示させない。 */
.not-smartphone {
	display: block;

	@media (max-width: 768px) {
		display: none;
	}
}

/* タブレット・SP（1024px 以下） */
@media (max-width: 1024px) {

	.site-header__nav,
	.site-header__cta {
		display: none;
	}

	.site-header__logo {
		grid-column: 1 / 2;
		grid-row: 2 / 3;

		a {
			display: block;
			height: 100%;
			width: 100%;
		}
	}

	.site-header__lang {
		display: flex;
	}

	.mobile-menu-toggle {
		display: block;
	}

	/* mobile menuの幅はここに合わせる */
	.site-header__inner {
		grid-template-columns: 1fr auto auto;
		padding-inline: min(2vw, 26px);
	}
}

/* スマートフォンサイズ */

@media (max-width: 768px) {
	/* .site-footer__columns {
		flex-direction: column;
		gap: 2rem;
	} */

	/* .site-footer__main {
		padding-inline: 4vw;
	} */

	.site-footer__nav-list {
		grid-template-columns: repeat(2, auto);
		gap: 2rem 1.5rem;
	}

	.site-footer__copyright {
		padding-inline: 4vw;
		flex-direction: column-reverse;
		gap: 3em;
		align-items: flex-start;
		font-size: 10px;
	}

	.site-footer__company {
		text-align: center;
		/*
	.btn-contact {
		width: fit-content;
		padding-inline: 3em;
		margin-inline: auto;
	} */
	}

	.site-footer__certs {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media(768px <=width) {
	.site-footer__company {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-rows: repeat(2, auto);
		align-items: center;
		gap: 3em;
	}

	.site-footer__certs {
		grid-column: 1 / 3;
		max-width: calc(463px + 1rem);
	}

	.site-footer__name-en {
		margin-block: 0;
	}

	.site-footer__address {
		margin-block: 2.25em 1em;
	}

	.site-footer__certs {
		margin-block-start: unset;
	}

}

@media(1024px < width) {
	.site-footer {
		row-gap: 8em;

		.site-footer__main .site-footer__columns {
			grid-template-columns: repeat(2, 1fr);
			/* max-width: unset; */
			column-gap: 2em;
			max-width: 1600px;
		}

		.site-footer__company {
			row-gap: 8.5em;
		}

		.site-footer__company .btn-contact {
			margin-inline: unset;
		}

		.site-footer__certs {
			margin-inline-start: 1.25em;
		}

		.site-footer__nav-wrap {
			align-content: start;
			row-gap: 2.75em;

			.site-footer__nav-section:nth-of-type(1) {
				margin-block-start: 1.25em;
			}
		}
	}
}

/* スライダー */
.carousel-home {
	margin-block-start: 5.5em;
	width: 100%;
	display: flex;
	overflow: hidden;
	gap: 1em;
	scrollbar-width: none;

	&::-webkit-scrollbar {
		display: none;
	}

	.group {
		display: flex;
		flex-shrink: 0;
		/* 縮ませない（縮むとカードが潰れ移動量がズレてループが繋がらない） */
		align-items: center;
		justify-content: center;
		gap: 1em;
		animation: spin 60s linear infinite;
	}

	.card {
		width: clamp(280px, 30vw, 422px);
		/* 最小280px / 可変30vw / 最大422px(PCカンプ値) */
		aspect-ratio: 1 / 0.7;
		align-content: center;

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

@keyframes spin {
	from {
		transform: translateX(0);
	}

	to {
		/* 自分の幅 + コンテナ gap(1em) ぶん動かして group2 を継ぎ目なく重ねる */
		transform: translateX(calc(-100% - 1em));
	}
}

/* (dt)｜内容(dd)の2列を PC・SP 共通で表示する。
		   グローバルの dl は 768px以下で1列化(grid-template-columns:1fr)するため、
		   ここで2列(auto 1fr)に上書きして SP でも2列を維持する。 */
dl.wp-block-nagata-dl.column_2block {
	grid-template-columns: minmax(120px, 13.25vw) 1fr;
	padding-inline: 0.75em;
	border-left: none;
	border-right: none;

	dt {
		font-weight: 700;
		align-content: center;
		background-color: transparent;
		white-space: nowrap;
		/* 年月を折り返さず auto 列幅を安定させる */
	}

	dt,
	dd {
		background-color: transparent;
		border-bottom: 1px solid #d9d9d9;
		padding-block: 1.5em;
		padding-inline: 0.75em;
	}
}

/* ─────────────────────────────────────────
   画像ライトボックス（.js-lightbox）
   エディタで画像ブロックに追加CSSクラス「js-lightbox」を付与すると、
   クリックで同一ページ内にフルサイズ画像を拡大表示・ダウンロード可能にする
───────────────────────────────────────── */
.lightbox-overlay {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.8);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	padding: 2em;
}

.lightbox-overlay.is-open {
	opacity: 1;
	pointer-events: auto;
}

.lightbox-overlay__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1em;
	max-width: 90vw;
	max-height: 90vh;
}

.lightbox-overlay__img {
	max-width: 100%;
	max-height: 80vh;
	object-fit: contain;
	background: var(--wp--preset--color--white);
	margin-block-start: 0.5em;
}

.lightbox-overlay__close {
	position: absolute;
	top: -2.5em;
	right: 0;
	background: none;
	border: 1px solid var(--wp--preset--color--white);
	color: var(--wp--preset--color--white);
	font-family: 'Orbitron', sans-serif;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	padding: 0.5em 1.25em;
	cursor: pointer;
	transition: 0.3s;
}

.lightbox-overlay__close:hover {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--corporate);
}

.lightbox-overlay__download {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
	font-size: 0.875em;
}

body.lightbox-open {
	overflow: hidden;
}

/* ============================================================
   各種お問い合わせ（電話・メール・編機サポートサイトCTA）共通パーツ
   ------------------------------------------------------------
   パターン「contact-cta_elemet」用。全ページ共通の global.css に配置し、
   TOP/EN 含むどのページに設置しても同一の見た目になる自己完結コンポーネント。

   ■ 設計方針（!important を使わずに配置先ページの既存CSSに勝つ）
   すべてのルールをラッパー .contact-cta_elemet でスコープする。これにより
   全セレクタが最低でも「クラス2個以上」になり、配置先ページ側にある
   タグ階層で書かれた既存CSS（例 .faq-page-block >div >div a = クラス2/要素3、
   .support-intro-block >div >div a = クラス1/要素4）に詳細度で確実に勝つ。
   CSSの詳細度はクラス数を要素数より先に比較するため、相手が body article div…と
   要素をどれだけ深くしても、こちらのクラス数が上回っていれば負けない。
   ※唯一これを破れるのは相手が ID / !important / インラインstyle を使う場合だが、
     対象ページには存在しないことを確認済み（2026-07-14）。

   ■ TOPの .top-contact-block / .support-site-link とは別クラス系統（衝突回避）。
   ============================================================ */
/* .contact-cta_elemet 自身への配置先ページCSSの侵入対策。
   例：.faq-page-block >div:nth-of-type(1) >div（クラス2/要素2）が display:grid や
   margin-block、768px以上の grid-template-columns:repeat(2,1fr) を持っており、
   #contact-cta_elemet がその「2段目のdiv」に構造的に一致してしまう。
   クラス3個（wp-block-group + contact-cta_elemet + :has()）で詳細度を確実に上回り、
   ブロック本体（縦積み）を明示的に固定する。 */
.wp-block-group.contact-cta_elemet:has(.contact-cta-block) {
	display: block;
	margin-block: 0;
	grid-template-columns: unset;
}

.contact-cta_elemet {
	.wp-block-group.contact-cta-block {
		/* ブロック内の em 指定（padding/gap/margin-block/ボタン幅など）はすべてこの font-size が基準。
		   祖先の font-size（配置先ページのカラム・レイアウト設定次第で変わる）に依存させないため明示。 */
		font-size: 16px;
		color: var(--wp--preset--color--white);
		background: var(--wp--preset--color--corporate);
		max-width: 732px;
		padding: 1.1em;
		display: grid;
		position: relative;
		margin-inline: auto;
		grid-template-columns: minmax(0, 1fr);
		@media (min-width: 768px) {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
		background-image: url(../img/top-contact-blockbg.webp);
		background-repeat: no-repeat;
		background-position: left top;
		background-size: cover;
		gap: 1em;
		margin-block: 3.6em 0.5em;

		h3.text-highlight[data-en] {
			font-size: 20px;
			width: fit-content;
			line-height: 1.4;
			margin-inline: auto;
			margin-block-end: 0.5em;
			/*text-align: center;*/

			&::before {
				font-size: 16px;
				width: fit-content;
				margin-inline: auto;
			}
		}

		p {
			text-align: center;
			line-height: 1.4;
			margin-block: 0;
		}

		>div:not(.contact-cta-block__inner) {
			display: grid;
			gap: 1.5em;
			align-content: center;
		}

		.contact-cta-block__inner {
			display: grid;
			width: 100%;
			position: relative;
			isolation: isolate;
			border-radius: 0.375rem;
			justify-items: center;
			justify-self: end;

			&::before {
				content: "";
				position: absolute;
				inset: 0;
				z-index: -1;
				border-radius: inherit;
				background: #0357c471;
				backdrop-filter: blur(135.72311401367188px);
			}

			>div {
				width: 100%;
				display: grid;
				padding-block: 2.275em 1.5em;
				row-gap: 1.5em;
				align-items: center;
				justify-items: center;
			}

			/* メールでお問い合わせボタン：配置先ページのタグ階層セレクタ（a{color:...; display:block 等}）に
			   詳細度で勝つため、ラッパー込みで .contact-cta_elemet …a.c-button.-navy とする。
			   display は c-button 本来の inline-flex を明示的に再宣言（配置先ページの a{display:block} で
			   崩れるのを防ぐ）。 */
			a.c-button.-navy {
				display: inline-flex;
				width: 14em;
				height: 3em;
				padding: 8px;
				/*border: none;*/
				color: var(--wp--preset--color--corporate);
				transition: color 0.5s;

				span._text {
					font-size: 12px;
				}

				/* ::after は「▼」用ではなく c-button 本体のボーダーワイプ
				   アニメーション（clip-path transition）に使われる要素。
				   content:none にすると疑似要素自体が生成されずアニメーションが
				   丸ごと消えるため、"" （空文字）で「▼」の文字だけを打ち消す。 */
				&::after {
					content: "";
				}

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

	}

	.wp-block-group.contact-cta-support-link:has(a) {
		/* c-button 幅（22.5em）の基準。.contact-cta-block とは兄弟で継承されないため個別に明示 */
		font-size: 1rem;
		margin-block-start: 4em;
		width: fit-content;
		margin-inline: auto !important;
		grid-template-columns: unset;

		a.c-button.-navy.-invert {
			display: inline-flex;
			width: 22.5em;
			padding: 8px;
			/*border: none;*/
			color: var(--wp--preset--color--white);
			transition: 0.5s;

			/* ::after は「▼」用ではなくボーダーワイプアニメーション本体。理由は
			   .contact-cta-block__inner a.c-button.-navy 側のコメント参照。 */
			&::after {
				content: "";
			}

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

/* 電話番号表示（.phone）：top.css の .support-intro-block .phone から移設（2026-07-14）。
   パターン（.contact-cta_elemet）と、まだ旧クラスのままの TOP（.top-contact-innner）の両方に適用する。
   → TOP をパターン（contact-cta_elemet）へ移行したら、下の「.top-contact-innner .phone」の行は削除してよい。
   ※ footer.php も .phone / .icon-phone / .phone-number / .footer-contact__hour を使うが、
      フッター側で独自スタイル（phone-number は font-weight:700）を持つため、この移設の影響は受けない。 */
.contact-cta_elemet .phone,
.top-contact-innner .phone {
	font-size: clamp(1.313rem, 0.891rem + 1.13vw, 1.875rem);
	line-height: 1;
	display: inline-grid;
	justify-content: center;
	align-items: center;
	gap: 0.25em;

	span.phone-number {
		font-family: 'Orbitron', sans-serif;
		font-weight: 500;
		grid-column: 2;
	}

	svg.icon-phone {
		width: 0.8em;
		height: 0.8em;
	}

	.footer-contact__hour {
		font-size: 14px;
		grid-column: 1 / 3;
		grid-row: 2;
		text-align: center;
		font-feature-settings: normal;
		margin-block-start: 2px;
	}
}

/* PC幅では受付時間との間隔を詰める（top.css の .support-intro-block .phone から移設） */
@media (min-width: 768px) {

	.contact-cta_elemet .phone,
	.top-contact-innner .phone {
		gap: 0.15em;
	}
}