/* =====================================================================
 * note.marketing — Front page (HeroD レイアウト)
 *
 * 原案 note-marketing-renewal-D-v11.html の body.var-d 配下スタイルを抽出し、
 * クラス名を nm- プレフィックス付きに置き換えて整理したもの。
 * A/B/C 用スタイル、Tweaks panel、custom cursor は削除済み。
 * ===================================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
	--nm-ink:    #14110D;
	--nm-paper:  #F7F4EC;
	--nm-sub:    #5C544A;
	--nm-line:   rgba(20, 17, 13, 0.12);
	--nm-accent: #E83820;
	--nm-yellow: #C9A227;
	--nm-navy:   #1B3D7A;
	--nm-stats-bg: #2A2724;

	--nm-font-bold:  "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
	--nm-font-serif: "Shippori Mincho B1", "Noto Serif JP", "Hiragino Mincho ProN", serif;
	--nm-font-en:    "Instrument Serif", "Times New Roman", serif;
	--nm-font-mono:  "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
}

html, body {
	background: var(--nm-paper);
	color: var(--nm-ink);
	font-family: var(--nm-font-bold);
	font-feature-settings: "palt";
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

body.nm-front {
	background: var(--nm-paper);
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img { display: block; max-width: 100%; height: auto; }

::selection { background: var(--nm-accent); color: #fff; }

.nm-container {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 48px;
}

/* ───── Reveal animations ───── */
[data-rv] {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
	transition-delay: var(--nm-rv-delay, 0ms);
}
[data-rv].is-in {
	opacity: 1;
	transform: translateY(0);
}

/* ─────────────────────────────────────────────────────────────────────
 * HERO D — コラージュ・バースト
 * ───────────────────────────────────────────────────────────────────── */
.hero-d {
	position: relative;
	min-height: 100vh;
	width: 100%;
	max-width: 100vw;       /* SectionTape等の負margin巻き込みでも横スクロールを生まない */
	background: var(--nm-paper);
	overflow: hidden;
	overflow-x: hidden;
	contain: paint;         /* パネルの translate を確実に外側へ漏らさない */
}

.hero-d__field {
	position: absolute;
	inset: 0;
	overflow: hidden;       /* パネルが画面外にはみ出さないよう保険 */
	pointer-events: none;
}

.d-panel {
	position: absolute;
	transform-origin: center;
	transform: translate(var(--from-x, 0), var(--from-y, 0)) rotate(calc(var(--rot, 0deg) + 30deg)) scale(0.4);
	opacity: 0;
	will-change: transform, opacity;
	transition:
		opacity 380ms ease var(--delay, 0ms),
		transform 900ms cubic-bezier(.18,.85,.2,1) var(--delay, 0ms);
}
.hero-d.is-on .d-panel {
	opacity: 1;
	transform: translate(0, 0) rotate(var(--rot, 0deg)) scale(1);
	animation: d-panel-drift var(--drift-dur, 6s) ease-in-out infinite;
	animation-delay: calc(var(--delay, 0ms) + 1200ms);
}

@keyframes d-panel-drift {
	0%, 100% { transform: translate(0, 0) rotate(var(--rot, 0deg)); }
	50%      { transform: translate(var(--drift-x, 0), var(--drift-y, 0)) rotate(calc(var(--rot, 0deg) + var(--drift-rot, 0deg))); }
}

.d-panel__text {
	display: inline-block;
	padding: 0.08em 0.36em 0.18em;
	font-family: var(--nm-font-bold);
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: 0.02em;
	white-space: nowrap;
	transform: translate(-50%, -50%);
	box-shadow: 0 8px 18px rgba(20,17,13,0.08);
}

.hero-d__center {
	position: relative;
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 80px 24px;
	gap: 20px;
	pointer-events: none;
}

/* 中央コピー：CSS-only アニメーション（JS依存なし）
 * 2.6秒後に main → sub → lead の順でフェードイン。
 * モバイルでJSが遅れてもLCPが安定する。 */
@keyframes nm-hero-main-in {
	from { opacity: 0; transform: rotate(-3deg) scale(0.8); }
	to   { opacity: 1; transform: rotate(-3deg) scale(1);   }
}
@keyframes nm-hero-sub-in {
	from { opacity: 0; transform: rotate(-1.5deg) scale(0.9); }
	to   { opacity: 1; transform: rotate(-1.5deg) scale(1);   }
}
@keyframes nm-hero-lead-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0);    }
}

.hero-d__main-panel {
	display: inline-flex;
	background: var(--nm-accent);
	color: var(--nm-paper);
	font-family: var(--nm-font-bold);
	font-weight: 900;
	font-size: clamp(28px, 5vw, 84px);
	line-height: 1.1;
	letter-spacing: 0.02em;
	padding: 0.18em 0.5em 0.26em;
	transform: rotate(-3deg) scale(0.8);
	opacity: 0;
	box-shadow: 0 16px 40px rgba(20,17,13,0.2);
	white-space: nowrap;
	max-width: 90vw;
	animation: nm-hero-main-in 600ms cubic-bezier(.2,1.2,.3,1) 2600ms forwards;
}

.hero-d__sub-panel {
	display: inline-flex;
	background: var(--nm-ink);
	color: var(--nm-yellow);
	font-family: var(--nm-font-mono);
	font-weight: 700;
	font-size: clamp(11px, 1.2vw, 14px);
	letter-spacing: 0.18em;
	padding: 0.6em 1em;
	transform: rotate(-1.5deg) scale(0.9);
	opacity: 0;
	text-transform: uppercase;
	box-shadow: 0 8px 20px rgba(20,17,13,0.16);
	animation: nm-hero-sub-in 600ms cubic-bezier(.2,1.2,.3,1) 2820ms forwards;
}

.hero-d__lead {
	margin-top: 16px;
	background: rgba(247, 244, 236, 0.96);
	border: 1.5px solid var(--nm-ink);
	padding: 10px 16px;
	font-family: var(--nm-font-bold);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.04em;
	transform: translateY(12px);
	opacity: 0;
	animation: nm-hero-lead-in 600ms cubic-bezier(.2,1.2,.3,1) 3020ms forwards;
}

/* Top chrome */
.hero-d__chrome {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 18px 24px 0 24px;
	pointer-events: none;
}
.hero-d__chrome > * { pointer-events: auto; }
.hero-d__logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: rgba(247, 244, 236, 0.92);
	border: 1px solid var(--nm-ink);
	padding: 8px 12px;
	font-family: var(--nm-font-bold);
	font-weight: 700;
	font-size: 14px;
}
.hero-d__logo b { font-weight: 900; }
.hero-d__logo .dot { color: var(--nm-accent); font-weight: 900; }
.hero-d__logo-mark {
	display: inline-block;
	width: 10px;
	height: 10px;
	background: var(--nm-accent);
	transform: rotate(45deg);
}
.hero-d__chrome-right {
	display: inline-flex;
	align-items: stretch;
	gap: 0;
}
.hero-d__entry {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
	min-width: 132px;
	height: 64px;
	background: var(--nm-ink);
	color: var(--nm-paper);
	font-family: var(--nm-font-bold);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.06em;
	transition: background .2s;
}
.hero-d__entry:hover { background: var(--nm-accent); }
.hero-d__burger {
	width: 64px;
	height: 64px;
	background: var(--nm-paper);
	border: 1px solid var(--nm-ink);
	border-left: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	cursor: pointer;
}
.hero-d__burger span {
	display: block;
	width: 22px;
	height: 1.5px;
	background: var(--nm-ink);
}

/* Scroll hint */
.hero-d__scroll {
	position: absolute;
	right: 28px;
	bottom: 28px;
	z-index: 6;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	font-family: var(--nm-font-mono);
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.22em;
	color: var(--nm-ink);
	writing-mode: vertical-rl;
	opacity: 0;
	transition: opacity .6s ease 1000ms;
}
.hero-d.is-final .hero-d__scroll,
.hero-d__scroll.is-final { opacity: 1; }
/* CSS-only fallback: scroll hint fades in at 3.6s regardless of JS */
@keyframes nm-hero-scroll-in {
	to { opacity: 1; }
}
.hero-d__scroll {
	animation: nm-hero-scroll-in 600ms ease 3600ms forwards;
}
.hero-d__scroll .line {
	width: 1px;
	height: 48px;
	background: currentColor;
	animation: nm-scrollLine 1.8s ease-in-out infinite;
	transform-origin: top;
}
@keyframes nm-scrollLine {
	0%   { transform: scaleY(0); transform-origin: top; }
	50%  { transform: scaleY(1); transform-origin: top; }
	51%  { transform: scaleY(1); transform-origin: bottom; }
	100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ─────────────────────────────────────────────────────────────────────
 * Marquee band
 * ───────────────────────────────────────────────────────────────────── */
.nm-marquee-band {
	background: var(--nm-ink);
}
.nm-marquee {
	display: flex;
	overflow: hidden;
	white-space: nowrap;
	padding: 18px 0;
	background: var(--nm-ink);
	transform: rotate(-1deg);
	margin: -8px -2vw;
}
.nm-marquee--alt {
	background: var(--nm-yellow);
	transform: rotate(1deg);
}
.nm-marquee-track {
	display: flex;
	gap: 64px;
	animation: nm-marq 28s linear infinite;
	will-change: transform;
}
.nm-marquee--alt .nm-marquee-track {
	animation-direction: reverse;
	animation-duration: 36s;
}
.nm-marquee-item {
	display: inline-flex;
	align-items: center;
	gap: 48px;
	font-family: var(--nm-font-bold);
	font-weight: 900;
	font-size: clamp(40px, 6vw, 96px);
	letter-spacing: 0.02em;
	flex-shrink: 0;
	color: var(--nm-paper);
}
.nm-marquee--alt .nm-marquee-item { color: var(--nm-ink); }
.nm-marquee-item .dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--nm-accent);
	flex-shrink: 0;
}
.nm-marquee--alt .nm-marquee-item .dot { background: var(--nm-ink); }
@keyframes nm-marq {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ─────────────────────────────────────────────────────────────────────
 * SectionTape — 各セクション間の斜めの色帯（横スクロール）
 *
 * v11原案の SectionTape を nm- プレフィックスで移植。
 * variant 1=ゴールド / 2=黒 / 3=赤 / 4=ネイビー、
 * variant 3,4 は流れが reverse。
 * ───────────────────────────────────────────────────────────────────── */
.nm-sec-tape {
	position: relative;
	margin: -40px -2vw;
	padding: 24px 0;
	overflow: hidden;
	transform: rotate(var(--nm-tilt, -2deg));
	background: var(--nm-yellow);
	color: var(--nm-ink);
	z-index: 5;
	box-shadow:
		0 14px 32px rgba(20,17,13,0.10),
		0 -8px 24px rgba(20,17,13,0.06);
}
.nm-sec-tape--1 { background: var(--nm-yellow); color: var(--nm-ink); }
.nm-sec-tape--2 { background: var(--nm-ink);    color: var(--nm-paper); }
.nm-sec-tape--3 { background: var(--nm-accent); color: var(--nm-paper); }
.nm-sec-tape--4 { background: var(--nm-navy);   color: var(--nm-paper); }

.nm-sec-tape__track {
	display: flex;
	gap: 0;
	white-space: nowrap;
	animation: nm-marq 36s linear infinite;
	font-family: var(--nm-font-bold);
	font-weight: 900;
	font-size: clamp(42px, 5.5vw, 90px);
	letter-spacing: 0.04em;
	line-height: 1;
	will-change: transform;
}
.nm-sec-tape--3 .nm-sec-tape__track,
.nm-sec-tape--4 .nm-sec-tape__track {
	animation-direction: reverse;
}

.nm-sec-tape__word {
	display: inline-flex;
	align-items: center;
	gap: 24px;
	padding-right: 32px;
}
.nm-sec-tape__sub {
	font-family: var(--nm-font-bold);
	font-size: 0.3em;
	font-weight: 500;
	letter-spacing: 0.16em;
	opacity: 0.8;
	margin-left: 16px;
}
.nm-sec-tape__star {
	font-size: 0.7em;
	opacity: 0.6;
}

/* SectionTape は前後セクションと重なる（margin: -40px）ため、
 * その分セクション側に padding 補正は入れない。重なり自体が原案の意匠。 */

@media (prefers-reduced-motion: reduce) {
	.nm-sec-tape__track { animation: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────
 * Section common
 * ───────────────────────────────────────────────────────────────────── */
.nm-sec {
	padding: 140px 0;
	position: relative;
	background: var(--nm-paper);
}
.nm-sec-service,
.nm-sec-reason,
.nm-sec-company,
.nm-sec-contact {
	background:
		radial-gradient(circle at 20% 20%, rgba(201, 162, 39, 0.04), transparent 35%),
		radial-gradient(circle at 80% 70%, rgba(232, 56, 32, 0.04), transparent 35%),
		var(--nm-paper);
}
.nm-sec-hd {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin-bottom: 96px;
}
.nm-sec-hd__left {
	font-family: var(--nm-font-mono);
}
.nm-sec-hd__right {
	display: flex;
	flex-direction: column;
	gap: 18px;
	align-items: flex-start;
	position: relative;
}
.nm-sec-hd__right::before {
	content: attr(data-en);
	font-family: var(--nm-font-bold);
	font-weight: 900;
	font-size: clamp(96px, 14vw, 220px);
	line-height: 0.86;
	letter-spacing: -0.04em;
	color: var(--nm-ink);
	display: block;
	margin-bottom: -8px;
}
.nm-section-num {
	display: inline-block;
	background: var(--nm-ink);
	color: var(--nm-paper);
	padding: 4px 10px;
	font-family: var(--nm-font-mono);
	font-weight: 700;
	letter-spacing: 0.18em;
	font-size: 11px;
}
.nm-section-title-jp {
	font-family: var(--nm-font-bold);
	font-weight: 700;
	font-size: clamp(22px, 2vw, 32px);
	line-height: 1.4;
	letter-spacing: 0.06em;
	color: var(--nm-ink);
	display: inline-flex;
	align-items: center;
	gap: 12px;
}
.nm-section-title-jp::before {
	content: "—";
	color: var(--nm-accent);
}
.nm-section-title-jp .accent {
	background: none !important;
	color: var(--nm-accent) !important;
	padding: 0 !important;
	margin: 0 !important;
}
.nm-sec-hd__en {
	max-width: 56ch;
	margin-top: 8px;
	font-family: var(--nm-font-bold);
	font-size: 15px;
	line-height: 1.95;
	color: var(--nm-sub);
	font-weight: 500;
}
.nm-sec-hd__en em {
	font-family: var(--nm-font-en);
	font-style: italic;
	color: var(--nm-ink);
	margin-right: 6px;
}

/* ─────────────────────────────────────────────────────────────────────
 * Service cards
 * ───────────────────────────────────────────────────────────────────── */
.nm-sec-service { padding: 140px 0 160px; }
.nm-service-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);   /* 4列に拡張 */
	gap: 20px;
}
.nm-service-card-wrap {
	position: relative;
	perspective: 1200px;
	overflow: visible;
}
.nm-service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 40px 22px 28px;     /* 4列で細くなるぶん padding 微調整 */
	background: #fff;
	border: 1.5px solid var(--nm-ink);
	min-height: 540px;
	transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, background .35s, color .35s;
	box-shadow: 0 10px 0 -2px rgba(20,17,13,0.06), 0 18px 36px rgba(20,17,13,0.10);
	overflow: hidden;
}
.nm-service-card-wrap:nth-child(1) .nm-service-card { transform: rotate(-1.2deg); }
.nm-service-card-wrap:nth-child(2) .nm-service-card { transform: rotate(0.6deg); }
.nm-service-card-wrap:nth-child(3) .nm-service-card { transform: rotate(-0.4deg); }
.nm-service-card-wrap:nth-child(4) .nm-service-card { transform: rotate(0.8deg); }
/* アクティブ／ホバー両対応：v11原案のとおり、1枚は常に黒背景＋他はホバーで反転 */
.nm-service-card.is-active {
	background: var(--nm-ink);
	color: var(--nm-paper);
}
.nm-service-card:hover {
	transform: translateY(-8px) rotate(0deg) !important;
	box-shadow: 0 30px 60px rgba(20,17,13,0.22);
	background: var(--nm-ink);
	color: var(--nm-paper);
}
/* Sticker label */
.nm-service-card::before {
	content: attr(data-sticker);
	position: absolute;
	top: 16px;
	left: 16px;
	background: var(--nm-accent);
	color: var(--nm-paper);
	padding: 8px 18px 10px;
	font-family: var(--nm-font-bold);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.12em;
	transform: rotate(-3deg);
	box-shadow: 0 8px 18px rgba(20,17,13,0.20);
	z-index: 5;
	white-space: nowrap;
}
.nm-service-card-wrap:nth-child(2) .nm-service-card::before { background: var(--nm-navy);   transform: rotate(2deg); }
.nm-service-card-wrap:nth-child(3) .nm-service-card::before { background: var(--nm-yellow); color: var(--nm-ink); transform: rotate(-2deg); }
.nm-service-card-wrap:nth-child(4) .nm-service-card::before { background: var(--nm-ink);    color: var(--nm-paper); transform: rotate(2deg); }

.nm-service-card__bigen {
	position: absolute;
	bottom: -28px;
	right: -32px;
	font-family: var(--nm-font-bold);
	font-weight: 900;
	font-size: clamp(120px, 14vw, 200px);
	line-height: 0.85;
	letter-spacing: -0.04em;
	color: rgba(20, 17, 13, 0.06);
	pointer-events: none;
	z-index: 1;
	white-space: nowrap;
	transform: rotate(-6deg);
	transition: color .35s;
}
.nm-service-card.is-active .nm-service-card__bigen,
.nm-service-card:hover .nm-service-card__bigen { color: rgba(247, 244, 236, 0.08); }

.nm-service-card__top {
	position: relative;
	z-index: 2;
	margin-top: 24px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.nm-service-card__no { display: none; }
.nm-service-card__arrow {
	background: var(--nm-ink);
	color: var(--nm-paper);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform .3s, background .3s;
}
.nm-service-card.is-active .nm-service-card__arrow,
.nm-service-card:hover .nm-service-card__arrow {
	background: var(--nm-accent);
	color: var(--nm-paper);
	transform: rotate(-45deg) translate(2px, -2px);
}
.nm-service-card__title-wrap {
	position: relative;
	z-index: 2;
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.nm-service-card__title {
	font-family: var(--nm-font-bold);
	font-weight: 900;
	font-size: 24px;            /* 4列に収まるよう 28→24 */
	line-height: 1.3;
}
.nm-service-card__en {
	font-family: var(--nm-font-en);
	font-style: italic;
	font-size: 16px;
	color: var(--nm-accent);
}
.nm-service-card.is-active .nm-service-card__en,
.nm-service-card:hover .nm-service-card__en { color: var(--nm-yellow); }
.nm-service-card__body {
	position: relative;
	z-index: 2;
	margin-top: 24px;
	font-size: 13px;            /* 4列で読みやすいよう 14→13 */
	line-height: 1.85;
}
.nm-service-card__bullets {
	position: relative;
	z-index: 2;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px dashed rgba(20,17,13,0.2);
	font-family: var(--nm-font-mono);
	font-size: 11px;            /* 4列で収まるよう 12→11 */
	letter-spacing: 0.02em;
	display: flex;
	flex-direction: column;
	gap: 6px;
	list-style: none;
}
.nm-service-card.is-active .nm-service-card__bullets,
.nm-service-card:hover .nm-service-card__bullets { border-color: rgba(247,244,236,0.25); }
.nm-service-card__bullets li {
	display: flex;
	align-items: center;
	gap: 10px;
}
.nm-bullet-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--nm-accent);
	flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────
 * Stats
 * ───────────────────────────────────────────────────────────────────── */
.nm-sec-stats {
	background: var(--nm-stats-bg);
	color: var(--nm-paper);
	padding: 160px 0;
	position: relative;
	overflow: hidden;
}
.nm-sec-stats::before {
	content: "BY THE NUMBERS";
	position: absolute;
	top: 40px;
	right: -2vw;
	font-family: var(--nm-font-bold);
	font-weight: 900;
	font-size: clamp(80px, 14vw, 240px);
	line-height: 0.85;
	letter-spacing: -0.02em;
	color: rgba(247, 244, 236, 0.07);
	pointer-events: none;
	white-space: nowrap;
}
.nm-stats-hd {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 32px;
	margin-bottom: 96px;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 48px;
	align-items: start;
	position: relative;
	z-index: 2;
}
.nm-sec-stats .nm-section-num {
	background: rgba(247, 244, 236, 0.16);
	color: var(--nm-paper);
}
.nm-sec-stats .nm-section-title-jp {
	color: var(--nm-paper);
}
.nm-sec-stats .nm-section-title-jp::before {
	color: var(--nm-accent);
}
.nm-sec-stats .nm-section-title-jp .accent { color: var(--nm-accent) !important; }
.nm-stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 48px;
	position: relative;
	z-index: 2;
}
.nm-stats-cell {
	padding: 56px 32px;
	border-left: 1px solid rgba(247, 244, 236, 0.18);
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.nm-stats-cell:last-child { border-right: 1px solid rgba(247, 244, 236, 0.18); }
.nm-stats-cell__en {
	font-family: var(--nm-font-mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	background: var(--nm-accent);
	color: var(--nm-paper);
	display: inline-block;
	padding: 4px 10px;
	font-weight: 700;
	transform: rotate(-1.5deg);
	align-self: flex-start;
}
.nm-stats-cell:nth-child(2) .nm-stats-cell__en { background: var(--nm-yellow); color: var(--nm-ink); }
.nm-stats-cell:nth-child(3) .nm-stats-cell__en { background: var(--nm-paper);  color: var(--nm-ink); }
.nm-stats-cell:nth-child(4) .nm-stats-cell__en { background: var(--nm-navy);   color: var(--nm-paper); }

.nm-stats-cell__num {
	font-family: var(--nm-font-bold);
	font-weight: 900;
	font-size: clamp(72px, 8vw, 144px);
	line-height: 1;
	letter-spacing: -0.02em;
	display: flex;
	align-items: baseline;
	white-space: nowrap;          /* 数字とsuffixを必ず同じ行に */
	overflow: hidden;
}
.nm-stats-cell:nth-child(1) .nm-stats-cell__num { color: var(--nm-accent); }
.nm-stats-cell:nth-child(2) .nm-stats-cell__num { color: var(--nm-yellow); }
.nm-stats-cell:nth-child(3) .nm-stats-cell__num { color: var(--nm-paper); }
.nm-stats-cell:nth-child(4) .nm-stats-cell__num { color: var(--nm-accent); }

.nm-countup {
	display: inline-flex;
	align-items: baseline;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	max-width: 100%;
}
.nm-countup__num { display: inline-block; white-space: nowrap; }
.nm-countup__suffix {
	display: inline-block;
	white-space: nowrap;          /* "社+" "%" 等が改行しないよう確実に */
	font-size: 0.42em;
	letter-spacing: 0.04em;
	margin-left: 0.18em;
	font-weight: 500;
	vertical-align: baseline;
}
.nm-stats-cell__label {
	font-size: 13px;
	line-height: 1.7;
	color: rgba(247, 244, 236, 0.75);
}

/* ─────────────────────────────────────────────────────────────────────
 * Reason — 3カラム色違いカード
 * ───────────────────────────────────────────────────────────────────── */
.nm-sec-reason { padding: 140px 0 0; }
.nm-reason-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-top: 56px;
	gap: 0;
}
.nm-reason-wrap { position: relative; }
.nm-reason-row {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 56px 36px 96px;
	min-height: 100%;
	background: var(--nm-yellow);
	color: var(--nm-ink);
	overflow: hidden;
	transition: filter .35s, transform .35s;
}
.nm-reason-wrap[data-reason-index="1"] .nm-reason-row { background: var(--nm-yellow); color: var(--nm-ink); }
.nm-reason-wrap[data-reason-index="2"] .nm-reason-row { background: var(--nm-navy);   color: var(--nm-paper); }
.nm-reason-wrap[data-reason-index="3"] .nm-reason-row { background: var(--nm-accent); color: var(--nm-paper); }
.nm-reason-row:hover { filter: brightness(1.06); transform: translateY(-4px); }

.nm-reason-row::before {
	content: attr(data-sticker);
	position: absolute;
	top: 20px;
	right: -8px;
	background: var(--nm-ink);
	color: var(--nm-paper);
	padding: 6px 16px 8px;
	font-family: var(--nm-font-bold);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.12em;
	transform: rotate(3deg);
	box-shadow: 0 8px 18px rgba(20,17,13,0.22);
	z-index: 3;
}
.nm-reason-wrap[data-reason-index="2"] .nm-reason-row::before { background: var(--nm-yellow); color: var(--nm-ink); transform: rotate(-2deg); }
.nm-reason-wrap[data-reason-index="3"] .nm-reason-row::before { background: var(--nm-ink);    color: #fff; transform: rotate(2deg); }

.nm-reason-row__word {
	display: inline-flex;
	align-items: baseline;
	gap: 14px;
	color: inherit;
	align-self: flex-start;
	padding: 8px 14px 10px;
	border: 1px solid currentColor;
	border-radius: 999px;
}
.nm-reason-row__label-num {
	font-family: var(--nm-font-mono);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.16em;
	color: inherit;
	opacity: 0.85;
}
.nm-reason-row__label-en {
	font-family: var(--nm-font-en);
	font-style: italic;
	font-size: 22px;
	letter-spacing: 0.04em;
	color: inherit;
}
.nm-reason-row__title { position: relative; z-index: 2; }
.nm-reason-row__title h3 {
	font-family: var(--nm-font-bold);
	font-weight: 900;
	font-size: clamp(22px, 1.7vw, 26px);
	line-height: 1.4;
	color: inherit;
	margin-bottom: 16px;
}
.nm-reason-row__title p {
	color: inherit;
	opacity: 0.92;
	font-size: 14px;
	line-height: 1.95;
	max-width: 30ch;
}
.nm-reason-row__cta {
	position: absolute;
	bottom: 28px;
	right: 28px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(20, 17, 13, 0.85);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--nm-font-bold);
	font-weight: 900;
	font-size: 24px;
	z-index: 3;
	transition: transform .3s, background .3s;
}
.nm-reason-wrap[data-reason-index="2"] .nm-reason-row__cta { background: #FFD400; color: var(--nm-ink); }
.nm-reason-wrap[data-reason-index="3"] .nm-reason-row__cta { background: var(--nm-paper); color: var(--nm-ink); }
.nm-reason-row:hover .nm-reason-row__cta { transform: rotate(-45deg) scale(1.1); }

/* ─────────────────────────────────────────────────────────────────────
 * Company
 * ───────────────────────────────────────────────────────────────────── */
.nm-sec-company { padding: 140px 0; }
.nm-company-grid {
	display: grid;
	grid-template-columns: 5fr 6fr;
	gap: 96px;
}
.nm-company-statement {
	font-family: var(--nm-font-bold);
	font-weight: 900;
	font-size: clamp(34px, 3.4vw, 52px);
	line-height: 1.5;
	letter-spacing: 0.02em;
	position: relative;
	background: linear-gradient(180deg, transparent 60%, rgba(201, 162, 39, 0.18) 60%);
	display: inline-block;
}
.nm-company-statement::before {
	content: "ABOUT";
	position: absolute;
	top: -64px;
	left: -8px;
	background: var(--nm-ink);
	color: var(--nm-paper);
	font-family: var(--nm-font-bold);
	font-weight: 900;
	font-size: 14px;
	letter-spacing: 0.18em;
	padding: 6px 14px 8px;
	transform: rotate(-3deg);
	box-shadow: 0 8px 18px rgba(20,17,13,0.18);
}
.nm-company-statement .quote { color: var(--nm-accent); }
.nm-company-body {
	margin-top: 40px;
	font-family: var(--nm-font-bold);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.95;
	letter-spacing: 0.04em;
	color: rgba(20, 17, 13, 0.78);
	max-width: 44ch;
}
.nm-company-dl {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--nm-line);
}
.nm-company-dl__row {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 32px;
	padding: 20px 0;
	border-bottom: 1px solid var(--nm-line);
	font-size: 14px;
	line-height: 1.7;
}
.nm-company-dl__row dt {
	background: rgba(20, 17, 13, 0.06);
	display: inline-block;
	padding: 4px 10px;
	font-family: var(--nm-font-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	color: var(--nm-sub);
	font-weight: 700;
	align-self: start;
	justify-self: start;
}
.nm-company-dl__row dd { color: var(--nm-ink); }

/* ─────────────────────────────────────────────────────────────────────
 * Contact
 * ───────────────────────────────────────────────────────────────────── */
.nm-sec-contact {
	padding: 180px 0 140px;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.nm-sec-contact::before {
	content: "CONTACT US";
	position: absolute;
	bottom: -40px;
	left: -3vw;
	font-family: var(--nm-font-bold);
	font-weight: 900;
	font-size: clamp(80px, 16vw, 280px);
	line-height: 0.85;
	letter-spacing: -0.02em;
	color: rgba(20, 17, 13, 0.05);
	pointer-events: none;
	white-space: nowrap;
}
.nm-contact-kicker { margin-bottom: 32px; }
.nm-contact-kicker .nm-section-num {
	display: inline-block;
}
.nm-contact-title {
	font-family: var(--nm-font-bold);
	font-weight: 900;
	font-size: clamp(56px, 8vw, 140px);
	line-height: 1.05;
	letter-spacing: 0.01em;
}
.nm-contact-title .line { display: block; }
.nm-contact-title .accent {
	display: inline-block;
	background: var(--nm-accent);
	color: var(--nm-paper);
	padding: 0.04em 0.2em 0.12em;
	transform: rotate(-2deg);
	box-shadow: 0 12px 28px rgba(20,17,13,0.16);
}
.nm-contact-lead {
	margin-top: 40px;
	font-size: 15px;
	line-height: 2;
	color: var(--nm-sub);
}
.nm-contact-lead .sub { color: rgba(20, 17, 13, 0.5); font-size: 13px; }
.nm-contact-cta-wrap {
	margin-top: 56px;
	display: flex;
	justify-content: center;
}
.nm-contact-cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	border: 2px solid var(--nm-ink);
	color: var(--nm-ink);
	overflow: hidden;
	transition: border-color .3s, color .3s;
}
.nm-contact-cta__bg {
	position: absolute;
	inset: 0;
	background: var(--nm-accent);
	border-radius: 50%;
	transform: scale(0);
	transition: transform .6s cubic-bezier(.7,0,.2,1);
}
.nm-contact-cta:hover .nm-contact-cta__bg { transform: scale(1.05); }
.nm-contact-cta:hover { color: var(--nm-paper); border-color: var(--nm-accent); }
.nm-contact-cta__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}
.nm-contact-cta__label {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	font-family: var(--nm-font-en);
	font-style: italic;
	font-size: 28px;
}
.nm-contact-cta__label .ja {
	font-family: var(--nm-font-bold);
	font-style: normal;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.16em;
}
.nm-contact-cta__arrow {
	transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.nm-contact-cta:hover .nm-contact-cta__arrow {
	transform: translateX(10px) rotate(-12deg);
}
.nm-contact-meta {
	margin-top: 96px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	border-top: 1px solid var(--nm-line);
	padding-top: 32px;
	font-family: var(--nm-font-mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	gap: 24px;
}
.nm-contact-meta > div {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
}
.nm-contact-meta .lbl {
	font-size: 10px;
	letter-spacing: 0.2em;
	color: var(--nm-sub);
}

/* ─────────────────────────────────────────────────────────────────────
 * Column — 最新コラム3件
 * ───────────────────────────────────────────────────────────────────── */
.nm-sec-column {
	padding: 140px 0 100px;
	background: var(--nm-paper);
	color: var(--nm-ink);
}
.nm-column-list {
	margin-top: 64px;
	border-top: 1px solid var(--nm-ink);
}
.nm-column-item {
	display: grid;
	grid-template-columns: 80px 1fr 40px;
	gap: 32px;
	align-items: center;
	padding: 32px 8px;
	border-bottom: 1px solid var(--nm-ink);
	text-decoration: none;
	color: inherit;
	transition: padding .3s cubic-bezier(.2,.7,.2,1), background .3s, color .3s;
}
.nm-column-item:hover {
	padding-left: 24px;
	background: var(--nm-ink);
	color: var(--nm-paper);
}
.nm-column-item:hover .nm-column-item__arrow {
	transform: translateX(8px);
}
.nm-column-item__no {
	font-family: var(--nm-font-mono);
	font-size: 12px;
	letter-spacing: 0.18em;
	opacity: 0.6;
}
.nm-column-item__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}
.nm-column-item__date {
	font-family: var(--nm-font-mono);
	font-size: 12px;
	letter-spacing: 0.12em;
	opacity: 0.55;
}
.nm-column-item__title {
	font-family: var(--nm-font-bold);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.5;
	letter-spacing: 0.02em;
}
.nm-column-item__arrow {
	font-family: var(--nm-font-en);
	font-style: italic;
	font-size: 28px;
	transition: transform .3s;
	text-align: right;
}
.nm-column-more {
	margin-top: 56px;
	display: flex;
	justify-content: flex-end;
}
.nm-column-more__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--nm-font-en);
	font-style: italic;
	font-size: 22px;
	color: var(--nm-ink);
	padding-bottom: 4px;
	border-bottom: 1px solid var(--nm-ink);
	transition: gap .3s;
}
.nm-column-more__link:hover { gap: 20px; }

@media (max-width: 768px) {
	.nm-sec-column { padding: 100px 0 80px; }
	.nm-column-item {
		grid-template-columns: 1fr 32px;
		gap: 16px;
		padding: 24px 8px;
	}
	.nm-column-item__no { display: none; }
	.nm-column-item__title { font-size: 17px; }
}

/* ─────────────────────────────────────────────────────────────────────
 * Footer
 * ───────────────────────────────────────────────────────────────────── */
.nm-site-ft {
	background: var(--nm-paper);
	color: var(--nm-ink);
	padding: 96px 0 32px;
	border-top: 1px solid var(--nm-line);
}
.nm-site-ft__top {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: end;
	padding-bottom: 64px;
	border-bottom: 1px solid var(--nm-line);
}
.nm-site-ft__logo {
	font-family: var(--nm-font-bold);
	font-weight: 900;
	font-size: clamp(64px, 8vw, 120px);
	line-height: 1;
	letter-spacing: -0.02em;
}
.nm-site-ft__logo .en { font-style: normal; }
.nm-site-ft__logo .dot { color: var(--nm-accent); }
.nm-site-ft__logo .mark {
	font-family: var(--nm-font-bold);
	font-style: normal;
	font-weight: 700;
	font-size: 0.4em;
	margin-left: 12px;
}
.nm-site-ft__tag {
	font-family: var(--nm-font-bold);
	font-weight: 500;
	font-size: 16px;
	line-height: 2;
	color: var(--nm-sub);
	justify-self: end;
	text-align: right;
}
.nm-site-ft__cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 48px;
	padding: 64px 0;
}
.nm-site-ft__col-lbl {
	font-family: var(--nm-font-mono);
	font-size: 11px;
	letter-spacing: 0.2em;
	color: var(--nm-sub);
	margin-bottom: 20px;
}
.nm-site-ft__cols ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 14px;
}
.nm-site-ft__bottom {
	display: flex;
	justify-content: space-between;
	font-family: var(--nm-font-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	color: var(--nm-sub);
	padding-top: 32px;
	border-top: 1px solid var(--nm-line);
}
.nm-site-ft__set { display: inline-flex; gap: 12px; align-items: center; }
.nm-site-ft__set .dot { color: var(--nm-accent); }

/* ─────────────────────────────────────────────────────────────────────
 * Responsive — 720px breakpoint
 * ───────────────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
	.nm-container { padding: 0 24px; }
	.nm-stats-hd { grid-template-columns: 1fr; padding: 0 24px; }
	.nm-stats-grid { grid-template-columns: repeat(2, 1fr); padding: 0 24px; }
	.nm-company-grid { grid-template-columns: 1fr; gap: 48px; }
	.nm-sec { padding: 100px 0; }
}

/* Service grid responsive: 4列 → 768px以下 2列 → 480px以下 1列 */
@media (max-width: 1080px) {
	.nm-service-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
	.hero-d__main-panel { white-space: normal; text-align: center; font-size: 10vw; }
	.hero-d__chrome { padding: 12px 12px 0 12px; }
	.hero-d__logo { font-size: 12px; padding: 6px 10px; }
	.hero-d__entry { min-width: auto; padding: 0 14px; height: 56px; font-size: 12px; }
	.hero-d__burger { width: 56px; height: 56px; }
	.nm-service-grid { grid-template-columns: repeat(2, 1fr); }
	.nm-reason-list { grid-template-columns: 1fr; }
	.nm-stats-grid { grid-template-columns: 1fr; }
	.nm-site-ft__top { grid-template-columns: 1fr; }
	.nm-site-ft__tag { justify-self: start; text-align: left; }
	.nm-site-ft__cols { grid-template-columns: 1fr; }
	.nm-site-ft__bottom { flex-direction: column; gap: 8px; align-items: flex-start; }
	.nm-contact-cta { width: 240px; height: 240px; }
	.nm-contact-meta { grid-template-columns: 1fr; }
	.nm-sec-hd { margin-bottom: 56px; }
}

@media (max-width: 480px) {
	.nm-service-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────
 * Reduced motion
 * ───────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.nm-marquee-track,
	.hero-d__scroll .line {
		animation: none !important;
	}
	[data-rv] {
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	.d-panel {
		transition: none !important;
		animation: none !important;
		opacity: 1 !important;
		transform: translate(0,0) rotate(var(--rot, 0)) !important;
	}
	.hero-d__main-panel,
	.hero-d__sub-panel,
	.hero-d__lead,
	.hero-d__scroll {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}
}

/* Focus visibility */
:focus-visible {
	outline: 2px solid var(--nm-accent);
	outline-offset: 3px;
}

/* ─────────────────────────────────────────────────────────────────────
 * Case Studies — タブ切替式の事例紹介セクション (旧 Stats 差し替え)
 * ───────────────────────────────────────────────────────────────────── */
.nm-sec-case {
	padding: 160px 0;
	background: var(--nm-stats-bg);  /* 旧 Stats と同じ #2A2724 */
	color: var(--nm-paper);
	position: relative;
	overflow: hidden;
}
.nm-sec-case::before {
	content: "CASE STUDIES";
	position: absolute;
	top: 40px;
	right: -2vw;
	font-family: var(--nm-font-bold);
	font-weight: 900;
	font-size: clamp(80px, 14vw, 240px);
	line-height: 0.85;
	letter-spacing: -0.02em;
	color: rgba(247, 244, 236, 0.07);
	pointer-events: none;
	white-space: nowrap;
}
/* 暗背景なので、汎用 nm-section-num / title スタイルを上書き */
.nm-sec-case .nm-section-num {
	background: rgba(247, 244, 236, 0.16);
	color: var(--nm-paper);
}
.nm-sec-case .nm-section-title-jp {
	color: var(--nm-paper);
}
.nm-sec-case .nm-section-title-jp::before {
	color: var(--nm-accent);
}
.nm-sec-case .nm-section-title-jp .accent {
	color: var(--nm-accent) !important;
}
.nm-sec-case .nm-sec-hd__en {
	color: rgba(247, 244, 236, 0.85);
}
.nm-sec-case .nm-sec-hd__right::before {
	color: var(--nm-paper);
}

/* タブナビゲーション */
.nm-case-tabs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	margin-top: 64px;
	position: relative;
	z-index: 2;
	border-top: 1px solid rgba(245, 242, 234, 0.2);
	border-bottom: 1px solid rgba(245, 242, 234, 0.2);
}
.nm-case-tab {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 28px 24px;
	background: transparent;
	color: rgba(245, 242, 234, 0.55);
	border: none;
	border-left: 1px solid rgba(245, 242, 234, 0.2);
	border-radius: 0;
	text-align: left;
	cursor: pointer;
	transition: background .3s, color .3s;
	font-family: inherit;
}
.nm-case-tab:first-child { border-left: none; }
.nm-case-tab:hover {
	background: rgba(245, 242, 234, 0.05);
	color: rgba(245, 242, 234, 0.85);
}
.nm-case-tab.is-active {
	background: var(--nm-accent);
	color: var(--nm-paper);
}
.nm-case-tab__no {
	font-family: var(--nm-font-mono);
	font-size: 12px;
	letter-spacing: 0.18em;
	opacity: 0.75;
}
.nm-case-tab__industry {
	font-family: var(--nm-font-bold);
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 0.02em;
	line-height: 1.4;
}

/* パネル */
.nm-case-panels {
	position: relative;
	z-index: 2;
}
.nm-case-panel { display: none; }
.nm-case-panel.is-active {
	display: block;
	animation: nmCaseFadeIn .4s ease-out;
}
@keyframes nmCaseFadeIn {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* カード本体 */
.nm-case-card {
	display: grid;
	grid-template-columns: minmax(320px, 38%) 1fr;
	gap: 64px;
	padding: 72px 0 0;
}

/* 左カラム：メトリクス */
.nm-case-card__left { position: relative; }
.nm-case-card__industry-en {
	font-family: var(--nm-font-en);
	font-style: italic;
	font-weight: 400;
	font-size: 22px;
	color: rgba(245, 242, 234, 0.6);
	letter-spacing: 0.02em;
	margin-bottom: 4px;
}
.nm-case-card__industry-jp {
	font-family: var(--nm-font-bold);
	font-weight: 900;
	font-size: 28px;
	letter-spacing: 0.02em;
	margin-bottom: 40px;
	color: var(--nm-paper);
}
.nm-case-card__metric-main {
	font-family: var(--nm-font-mincho);
	font-weight: 500;
	font-size: clamp(72px, 9vw, 144px);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--nm-accent);
	white-space: nowrap;
	display: flex;
	align-items: baseline;
	margin-bottom: 16px;
}
/* 単位 span — 仕様通り nm- プレフィックスなしクラス */
.case-card__metric-unit {
	font-family: var(--nm-font-bold);
	font-weight: 700;
	font-size: 0.32em;
	letter-spacing: 0.04em;
	margin-left: 0.18em;
	color: var(--nm-paper);
}
.nm-case-card__metric-sub {
	font-family: var(--nm-font-mono);
	font-size: 13px;
	letter-spacing: 0.12em;
	color: rgba(245, 242, 234, 0.75);
	line-height: 1.6;
}

/* 右カラム：詳細 */
.nm-case-card__right { padding-top: 4px; }
.nm-case-card__section-label {
	font-family: var(--nm-font-mono);
	font-size: 11px;
	letter-spacing: 0.22em;
	color: rgba(245, 242, 234, 0.55);
	margin-bottom: 8px;
}
.nm-case-card__section-title {
	font-family: var(--nm-font-bold);
	font-weight: 900;
	font-size: 20px;
	letter-spacing: 0.04em;
	color: var(--nm-paper);
	margin-bottom: 16px;
}
.nm-case-card__section-title + .nm-case-card__section-title,
.nm-case-card__summary + .nm-case-card__section-label {
	margin-top: 40px;
}
.nm-case-card__summary {
	font-family: var(--nm-font-bold);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.95;
	letter-spacing: 0.04em;
	color: rgba(245, 242, 234, 0.85);
	margin-bottom: 40px;
	max-width: 56ch;
}
.nm-case-card__points {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	border-top: 1px solid rgba(245, 242, 234, 0.15);
	padding-top: 24px;
}
.nm-case-card__points li {
	position: relative;
	padding-left: 20px;
	font-family: var(--nm-font-bold);
	font-size: 14px;
	line-height: 1.85;
	letter-spacing: 0.04em;
	color: rgba(245, 242, 234, 0.92);
}
.nm-case-card__points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 8px;
	height: 1.5px;
	background: var(--nm-accent);
}

/* レスポンシブ */
@media (max-width: 1024px) {
	.nm-case-tabs { grid-template-columns: repeat(2, 1fr); }
	.nm-case-tab {
		border-left: 1px solid rgba(245, 242, 234, 0.2);
		border-top: 1px solid rgba(245, 242, 234, 0.2);
	}
	.nm-case-tab:nth-child(odd) { border-left: none; }
	.nm-case-tab:nth-child(1),
	.nm-case-tab:nth-child(2) { border-top: none; }
}
@media (max-width: 720px) {
	.nm-sec-case { padding: 100px 0; }
	.nm-case-card {
		grid-template-columns: 1fr;
		gap: 40px;
		padding: 48px 0 0;
	}
	.nm-case-card__metric-main { font-size: clamp(60px, 14vw, 96px); }
	.nm-case-tab { padding: 20px 16px; }
	.nm-case-tab__industry { font-size: 15px; }
}

/* ─────────────────────────────────────────────────────────────────────
 * Page template (固定ページ用) — /contact/ ほか
 *
 * - Chrome (.hero-d__chrome) は position: fixed のため main に top padding
 * - ページタイトルは明朝 (Shippori Mincho B1) で大判
 * - max-width 720px 中央寄せ、上下 120-160px の余白
 * ───────────────────────────────────────────────────────────────────── */

/* 明朝フォント変数（page.css 兼用） */
:root {
	--nm-font-mincho: "Shippori Mincho B1", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
}

body.nm-page-body {
	background: var(--nm-paper);
	color: var(--nm-ink);
	font-family: var(--nm-font-bold);
}

.nm-page-wrap {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.nm-page {
	flex: 1 0 auto;
	padding: 160px 40px 120px;
	background: var(--nm-paper);
}
.nm-page__inner {
	max-width: 720px;
	margin: 0 auto;
}
.nm-page__header {
	margin-bottom: 56px;
}
.nm-page__title {
	font-family: var(--nm-font-mincho);
	font-weight: 500;
	font-size: clamp(48px, 7vw, 96px);
	line-height: 1.2;
	letter-spacing: 0.02em;
	color: var(--nm-ink);
}
.nm-page__title::after {
	content: "。";
	color: var(--nm-accent);
}
.nm-page__content {
	font-family: var(--nm-font-bold);
	font-size: 16px;
	line-height: 1.95;
	color: var(--nm-ink);
}
.nm-page__content p {
	margin-bottom: 24px;
}
.nm-page__content a {
	color: var(--nm-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

@media (max-width: 720px) {
	.nm-page { padding: 120px 20px 80px; }
	.nm-page__header { margin-bottom: 40px; }
}

/* ─────────────────────────────────────────────────────────────────────
 * Contact Form 7 — テーマカラーに合わせた再スタイリング
 * #14110D / #F5F2EA / #E83820 / #C9A227
 * ───────────────────────────────────────────────────────────────────── */
.wpcf7 form {
	max-width: 640px;
	margin: 0 auto;
}
.wpcf7 form p {
	margin-bottom: 24px;
}
.wpcf7 form p:last-of-type {
	margin-bottom: 0;
}

/* ラベル：p 直下のテキストノードを擬似ラベル化（テーマでは <label> ではなく <p>テキスト<br>[input]）*/
.wpcf7 form p {
	display: flex;
	flex-direction: column;
	font-family: var(--nm-font-bold);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.06em;
	color: var(--nm-ink);
	gap: 8px;
}
.wpcf7 form p br { display: none; }   /* flex で改行不要 */

/* もし <label> を使うパターンに切り替えても対応 */
.wpcf7 label {
	display: block;
	font-family: var(--nm-font-bold);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.06em;
	margin-bottom: 8px;
	color: var(--nm-ink);
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 16px 20px;
	font-family: var(--nm-font-bold);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.6;
	background: #ffffff;
	color: var(--nm-ink);
	border: 1.5px solid var(--nm-ink);
	border-radius: 0;
	outline: none;
	transition: border-color .2s, box-shadow .2s, transform .2s;
	-webkit-appearance: none;
	appearance: none;
}
.wpcf7 input[type="text"]::placeholder,
.wpcf7 input[type="email"]::placeholder,
.wpcf7 textarea::placeholder {
	color: rgba(20, 17, 13, 0.4);
	font-weight: 400;
}
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="url"]:focus,
.wpcf7 textarea:focus {
	border-color: var(--nm-accent);
	box-shadow: 0 4px 0 0 var(--nm-accent);
	transform: translate(-2px, -2px);
}
.wpcf7 textarea {
	min-height: 180px;
	resize: vertical;
}

/* 送信ボタン */
.wpcf7 input[type="submit"],
.wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 220px;
	padding: 18px 40px;
	background: var(--nm-ink);
	color: var(--nm-paper);
	font-family: var(--nm-font-bold);
	font-weight: 800;
	font-size: 16px;
	letter-spacing: 0.16em;
	border: 1.5px solid var(--nm-ink);
	border-radius: 0;
	cursor: pointer;
	transition: background .2s, transform .2s, box-shadow .2s, border-color .2s;
	-webkit-appearance: none;
	appearance: none;
	margin-top: 16px;
	box-shadow: 6px 6px 0 0 var(--nm-accent);
}
.wpcf7 input[type="submit"]:hover,
.wpcf7-submit:hover {
	background: var(--nm-accent);
	border-color: var(--nm-accent);
	transform: translate(-3px, -3px);
	box-shadow: 9px 9px 0 0 var(--nm-ink);
}
.wpcf7 input[type="submit"]:disabled,
.wpcf7-submit:disabled {
	opacity: 0.5;
	cursor: wait;
}

/* バリデーションエラー */
.wpcf7-not-valid-tip {
	color: var(--nm-accent);
	font-family: var(--nm-font-bold);
	font-size: 13px;
	margin-top: 6px;
	font-weight: 700;
}
.wpcf7 input.wpcf7-not-valid,
.wpcf7 textarea.wpcf7-not-valid {
	border-color: var(--nm-accent);
}

/* 送信結果メッセージ */
.wpcf7-response-output {
	margin: 32px 0 0;
	padding: 20px 24px;
	border: 1.5px solid var(--nm-ink);
	border-radius: 0;
	font-family: var(--nm-font-bold);
	font-size: 14px;
	line-height: 1.7;
	letter-spacing: 0.04em;
	background: var(--nm-paper);
}
.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--nm-ink);
	background: var(--nm-paper);
	color: var(--nm-ink);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	border-color: var(--nm-accent);
	background: rgba(232, 56, 32, 0.08);
	color: var(--nm-accent);
}

/* スピナー */
.wpcf7-spinner {
	background-color: var(--nm-ink);
}