/* ============================================================
 * pages/works.css ─ Works / 私たちの仕事（editorial 全面刷新 2026-05-31）
 *
 * 方針：トップ（home-creative.css）と地続きの編集的世界観へ統一。
 *  - section-label / bg-mega-typo / section-glow-line / section-decor 撤去 → editorial-index
 *  - 業種カードのカートゥーン icon SVG を撤去、番号＋数値（明朝/等幅）主体へ
 *  - 守秘＝黒塗りバー（redacted）で「公開しないこと自体の価値」を編集的に
 *  - 罫線・コーナーブラケット・建築グリッド主体
 *  - 成果サマリーをダーク強調にして声量の緩急をつける
 *  - WCAG AA を満たす配色のみ
 *
 * 依存：tokens.css / base.css / components/final-cta.css
 * ============================================================ */


/* ════════════════════════════════════════════════════════════
 * 0. フィルムグレイン
 * ════════════════════════════════════════════════════════════ */
.film-grain {
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0.5;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
	background-size: 160px 160px;
}
@media (max-width: 767px) { .film-grain { opacity: 0.36; } }
@media (prefers-reduced-motion: reduce) { .film-grain { opacity: 0.30; } }


/* ════════════════════════════════════════════════════════════
 * 1. editorial-index
 * ════════════════════════════════════════════════════════════ */
.editorial-index {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-3);
	margin-bottom: var(--space-5);
	line-height: 1;
}
.editorial-index__num {
	font-family: var(--font-serif-jp);
	font-size: clamp(2.75rem, 7vw, 4.5rem);
	font-weight: var(--fw-semibold);
	color: var(--color-brand);
	letter-spacing: var(--ls-tighter);
	font-feature-settings: "tnum";
	line-height: 0.8;
}
.editorial-index__en {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--color-text-secondary);
	align-self: flex-end;
	padding-bottom: 0.4em;
}
.editorial-index__total {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-wide);
	color: var(--color-text-secondary);  /* AA：紙地上 7.43:1（小文字でも可読） */
	align-self: flex-end;
	padding-bottom: 0.4em;
}
.editorial-index--invert .editorial-index__num   { color: var(--color-brand-300); }
.editorial-index--invert .editorial-index__en    { color: var(--color-text-dark-secondary); }
.editorial-index--invert .editorial-index__total { color: var(--color-text-dark-secondary); }
.editorial-index--center {
	display: flex;
	justify-content: center;
	margin-inline: auto;
	margin-bottom: var(--space-5);
}
.editorial-index--center .editorial-index__en {
	padding-bottom: 0;
	letter-spacing: var(--ls-widest);
	color: var(--color-brand-300);
}
@media (max-width: 767px) {
	.editorial-index { gap: var(--space-2); margin-bottom: var(--space-4); }
	.editorial-index__num { font-size: clamp(2.25rem, 12vw, 3rem); }
}


/* ════════════════════════════════════════════════════════════
 * 2. section-movement：紙地セクション上端のブループリント帯
 * ════════════════════════════════════════════════════════════ */
.section-movement { position: relative; }

.works-confidentiality.section-movement::before,
.works-challenges.section-movement::before,
.works-coverage.section-movement::before,
.works-process.section-movement::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: clamp(160px, 28vh, 320px);
	background-image:
		linear-gradient(var(--color-decor-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--color-decor-grid) 1px, transparent 1px);
	background-size: var(--space-7) var(--space-7);
	-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.45), transparent);
	mask-image: linear-gradient(180deg, rgba(0,0,0,0.45), transparent);
	pointer-events: none;
	z-index: 0;
	opacity: 0.7;
}
.section-movement > .container { position: relative; z-index: 1; }


/* ════════════════════════════════════════════════════════════
 * 3. Hero（KV：線画ダイアグラム）
 * ════════════════════════════════════════════════════════════ */
.works-hero {
	position: relative;
	min-height: auto;
	display: flex;
	align-items: flex-start;
	padding-top: var(--page-hero-top-offset);
	padding-bottom: var(--space-9);
	overflow: hidden;
	isolation: isolate;
	background: var(--color-bg-primary);
}
@media (min-width: 1024px) {
	.works-hero { min-height: 78vh; align-items: center; }
}

/* .works-hero__visual のPCレイアウトは tonmana-inheritance.css に単一集約（重複解消・2026-06-01） */
.works-hero__diagram { width: 100%; height: auto; display: block; }

@keyframes works-hero-visual-in {
	from { opacity: 0; transform: scale(0.97); }
	to   { opacity: 1; transform: scale(1); }
}
@keyframes works-hero-visual-in-sp {
	from { opacity: 0; transform: scale(0.97); }
	to   { opacity: 1; transform: scale(1); }
}
.works-hero__spine {
	stroke-dasharray: 360;
	stroke-dashoffset: 360;
	animation: works-hero-draw 1600ms var(--ease-out-expo) 0.9s forwards;
}
@keyframes works-hero-draw { to { stroke-dashoffset: 0; } }

@media (max-width: 1023px) {
	.works-hero { flex-direction: column; align-items: stretch; padding-bottom: var(--space-7); }
	.works-hero__inner { order: 1; }
}

.works-hero__inner { position: relative; z-index: 1; }
.works-hero__content {
	display: flex; flex-direction: column; gap: var(--space-5);
	width: 100%; max-width: 620px;
}
@media (min-width: 1024px) { .works-hero__content { max-width: 600px; margin-right: auto; } }
@media (max-width: 1023px) { .works-hero__content { max-width: none; } }

.works-hero__overline {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--color-brand);
	margin: 0;
	opacity: 0;
	animation: works-hero-fade-in var(--duration-slow) var(--ease-out-expo) 0.2s forwards;
}
.works-hero__title {
	font-family: var(--font-serif-jp);
	font-size: var(--fs-display-md);
	line-height: 1.18;
	letter-spacing: var(--ls-tight);
	color: var(--color-text-primary);
	font-weight: var(--fw-semibold);
	font-feature-settings: "palt";
	margin: 0;
	mix-blend-mode: multiply;
	opacity: 0;
	animation: works-hero-fade-in var(--duration-slow) var(--ease-out-expo) 0.5s forwards;
}
.works-hero__title-line { display: inline-block; }
@media (min-width: 768px) { .works-hero__title-line { white-space: nowrap; } }

.works-hero__lead {
	font-size: var(--fs-lg);
	color: var(--color-text-secondary);
	line-height: var(--lh-loose);
	max-width: 56ch;
	margin: 0;
	opacity: 0;
	animation: works-hero-fade-in var(--duration-slow) var(--ease-out-expo) 0.8s forwards;
}
.works-hero__cta {
	display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2);
	opacity: 0;
	animation: works-hero-fade-in var(--duration-slow) var(--ease-out-expo) 1.05s forwards;
}
@media (min-width: 640px) { .works-hero__cta { gap: var(--space-4); } }
.works-hero__sub-link {
	margin-top: var(--space-1);
	font-size: var(--fs-sm);
	opacity: 0;
	animation: works-hero-fade-in var(--duration-slow) var(--ease-out-expo) 1.2s forwards;
}
.works-hero__sub-link a {
	font-family: var(--font-mono);
	letter-spacing: var(--ls-wide);
	color: var(--color-brand);
	border-bottom: 1px solid var(--color-border-brand);
}
.works-hero__sub-link a:hover { color: var(--color-brand-700); }

@keyframes works-hero-fade-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}


/* ════════════════════════════════════════════════════════════
 * 4. 共通：セクション余白・見出し
 * ════════════════════════════════════════════════════════════ */
.works-confidentiality,
.works-summary,
.works-challenges,
.works-coverage,
.works-process {
	position: relative;
	padding-block: var(--space-9);
	overflow: hidden;
	isolation: isolate;
}
@media (min-width: 1024px) {
	.works-confidentiality,
	.works-summary,
	.works-challenges,
	.works-coverage,
	.works-process {
		padding-block: var(--space-10);
	}
}

.works-confidentiality__header,
.works-challenges__header,
.works-coverage__header,
.works-process__header {
	border-bottom: 1px solid var(--color-decor-hairline);
	padding-bottom: var(--space-5);
	margin-bottom: var(--space-7);
}

.works-confidentiality__title,
.works-summary__title,
.works-challenges__title,
.works-coverage__title,
.works-process__title {
	font-family: var(--font-serif-jp);
	font-size: clamp(1.875rem, 4.5vw, 3rem);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-tight);
	color: var(--color-text-primary);
	font-feature-settings: "palt";
	margin: 0;
	mix-blend-mode: multiply;
}
.works-confidentiality__title-line { display: inline-block; }
@media (min-width: 768px) { .works-confidentiality__title-line { white-space: nowrap; } }

.works-confidentiality__tldr,
.works-challenges__tldr,
.works-coverage__tldr,
.works-process__tldr {
	margin-top: var(--space-4);
	font-size: var(--fs-md);
	color: var(--color-text-secondary);
	line-height: var(--lh-loose);
	max-width: 68ch;
}
.works-confidentiality__tldr strong,
.works-challenges__tldr strong,
.works-process__tldr strong { color: var(--color-text-primary); font-weight: var(--fw-bold); }


/* ════════════════════════════════════════════════════════════
 * 5. 01 公開範囲の考え方
 * ════════════════════════════════════════════════════════════ */
.works-confidentiality__inner { max-width: 1100px; }
.works-confidentiality__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	max-width: 760px;
}
.works-confidentiality__body p {
	font-size: var(--fs-md);
	color: var(--color-text-secondary);
	line-height: var(--lh-loose);
}
.works-confidentiality__body strong { color: var(--color-text-primary); font-weight: var(--fw-bold); }


/* ════════════════════════════════════════════════════════════
 * 6. 02 業種別の成果サマリー（ダーク強調＋黒塗り）
 * ════════════════════════════════════════════════════════════ */
.works-summary--dark {
	background: var(--color-bg-dark-primary);
	color: var(--color-text-dark-primary);
}
.works-summary--dark .works-summary__header {
	border-bottom: 1px solid var(--color-border-dark-subtle);
	padding-bottom: var(--space-5);
	margin-bottom: var(--space-7);
}
.works-summary--dark .works-summary__title { color: var(--color-text-dark-primary); mix-blend-mode: normal; }
.works-summary--dark .works-summary__tldr {
	margin-top: var(--space-4);
	font-size: var(--fs-md);
	color: var(--color-text-dark-secondary);
	line-height: var(--lh-loose);
	max-width: 68ch;
}
.works-summary--dark .works-summary__tldr strong { color: var(--color-text-dark-primary); font-weight: var(--fw-bold); }

.works-summary__how-to-read {
	margin-top: var(--space-7);   /* グリッド（数値）の後ろへ移動したため上側余白に（2026-06-02） */
	padding: var(--space-5);
	border: 1px solid var(--color-border-dark-subtle);
	background: var(--color-bg-dark-surface);
}
.works-summary__how-to-read-title {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--color-brand-300);
	margin-bottom: var(--space-3);
}
.works-summary__how-to-read-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.works-summary__how-to-read-list li {
	font-size: var(--fs-sm);
	color: var(--color-text-dark-secondary);
	line-height: var(--lh-relaxed);
}
.works-summary__how-to-read-list strong { color: var(--color-text-dark-primary); font-weight: var(--fw-bold); }

.works-summary__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	border-top: 1px solid var(--color-border-dark-subtle);
	border-left: 1px solid var(--color-border-dark-subtle);
}
@media (min-width: 640px)  { .works-summary__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .works-summary__grid { grid-template-columns: repeat(3, 1fr); } }
.works-summary__grid > li { display: flex; }

.works-summary__card {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: var(--space-6) var(--space-5);
	border-right: 1px solid var(--color-border-dark-subtle);
	border-bottom: 1px solid var(--color-border-dark-subtle);
	transition: background var(--duration-base) var(--ease-out-expo);
}
.works-summary__card:hover { background: var(--color-glass-dark-brand); }
.works-summary__card-industry {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--color-brand-300);
	margin-bottom: var(--space-2);
}
.works-summary__card-name {
	font-family: var(--font-serif-jp);
	font-size: var(--fs-lg);
	font-weight: var(--fw-semibold);
	color: var(--color-text-dark-primary);
	line-height: var(--lh-snug);
	margin-bottom: var(--space-5);
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--color-border-dark-subtle);
}
.works-summary__card-metrics {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	margin-bottom: var(--space-5);
}
.works-summary__card-metric { display: flex; flex-direction: column; gap: var(--space-1); }
.works-summary__card-metric-label {
	font-size: var(--fs-xs);
	color: var(--color-text-dark-secondary);  /* AA：fs-xs のため dark-muted(4.08) ではなく dark-secondary(10.43) */
	line-height: var(--lh-snug);
}
.works-summary__card-metric-value {
	font-size: var(--fs-md);
	color: var(--color-text-dark-secondary);
	line-height: var(--lh-snug);
}
.works-summary__card-metric-value strong {
	font-family: var(--font-mono);
	font-size: var(--fs-2xl);
	font-weight: var(--fw-bold);
	color: var(--color-text-dark-primary);
	letter-spacing: var(--ls-tight);
}
.works-summary__card-metric-value time { font-style: normal; color: inherit; }
.works-summary__card-scope {
	margin-top: auto;
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border-dark-subtle);
	font-size: var(--fs-sm);
	color: var(--color-text-dark-secondary);
	line-height: var(--lh-relaxed);
}
.works-summary__card-scope-label {
	display: block;
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-wide);
	color: var(--color-text-dark-secondary);  /* AA：fs-xs のため dark-secondary(10.43) */
	margin-bottom: var(--space-1);
}
.works-summary__notes {
	margin-top: var(--space-6);
	font-size: var(--fs-sm);
	color: var(--color-text-dark-secondary);  /* AA：fs-sm のため dark-secondary(10.43) */
	line-height: var(--lh-relaxed);
}


/* ════════════════════════════════════════════════════════════
 * 7. 03 よくご相談いただく課題（番号付き罫線リスト）
 * ════════════════════════════════════════════════════════════ */
.works-challenges__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	border-top: 1px solid var(--color-decor-hairline);
	border-left: 1px solid var(--color-decor-hairline);
}
@media (min-width: 640px)  { .works-challenges__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .works-challenges__list { grid-template-columns: repeat(4, 1fr); } }
.works-challenges__item {
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
	padding: var(--space-5);
	border-right: 1px solid var(--color-decor-hairline);
	border-bottom: 1px solid var(--color-decor-hairline);
	font-family: var(--font-serif-jp);
	font-size: var(--fs-lg);
	font-weight: var(--fw-semibold);
	color: var(--color-text-primary);
	line-height: var(--lh-snug);
	transition: background var(--duration-base) var(--ease-out-expo);
}
.works-challenges__item:hover { background: var(--color-glass-brand); }
.works-challenges__item-num {
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-wide);
	color: var(--color-brand);
	flex: none;
}


/* ════════════════════════════════════════════════════════════
 * 8. 04 対応領域（罫線タグ）
 * ════════════════════════════════════════════════════════════ */
.works-coverage__groups {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-7);
}
@media (min-width: 1024px) {
	.works-coverage__groups {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-8);
	}
}
.works-coverage__group-title {
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-wide);
	color: var(--color-text-secondary);
	padding-bottom: var(--space-3);
	margin-bottom: var(--space-5);
	border-bottom: 1px solid var(--color-decor-hairline);
}
.works-coverage__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}
.works-coverage__tag {
	font-family: var(--font-sans-jp);
	font-size: var(--fs-sm);
	color: var(--color-text-primary);
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--color-border-default);
	transition: border-color var(--duration-base) var(--ease-out-expo), color var(--duration-base) var(--ease-out-expo);
}
.works-coverage__tag:hover { border-color: var(--color-brand); color: var(--color-brand); }


/* ════════════════════════════════════════════════════════════
 * 9. 05 仕事の進め方（番号大・罫線区切り）
 * ════════════════════════════════════════════════════════════ */
.works-process__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	border-top: 1px solid var(--color-decor-hairline);
}
@media (min-width: 768px)  { .works-process__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .works-process__list { grid-template-columns: repeat(4, 1fr); } }
.works-process__step {
	position: relative;
	padding: var(--space-7) var(--space-5) var(--space-6);
	border-bottom: 1px solid var(--color-decor-hairline);
}
@media (min-width: 768px) { .works-process__step { border-right: 1px solid var(--color-decor-hairline); } }
@media (min-width: 1024px) { .works-process__step:last-child { border-right: 0; } }
.works-process__step-num {
	display: block;
	font-family: var(--font-serif-jp);
	font-size: clamp(2.25rem, 4vw, 3.25rem);
	font-weight: var(--fw-semibold);
	line-height: 0.9;
	color: var(--color-brand);
	letter-spacing: var(--ls-tighter);
	font-feature-settings: "tnum";
	margin-bottom: var(--space-3);
}
.works-process__step-number {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-wide);
	color: var(--color-text-secondary);
	margin-bottom: var(--space-2);
}
.works-process__step-title {
	font-family: var(--font-serif-jp);
	font-size: var(--fs-lg);
	font-weight: var(--fw-semibold);
	color: var(--color-text-primary);
	line-height: var(--lh-snug);
	margin-bottom: var(--space-3);
}
.works-process__step-body {
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	line-height: var(--lh-relaxed);
}
.works-process__step-body strong { color: var(--color-text-primary); font-weight: var(--fw-bold); }


/* ════════════════════════════════════════════════════════════
 * 10. Final CTA（補強）
 * ════════════════════════════════════════════════════════════ */
.about-final-cta .final-cta__title { font-family: var(--font-serif-jp); }


/* ════════════════════════════════════════════════════════════
 * 11. scroll-driven（@supports 隔離）＋ reduced-motion 停止
 * ════════════════════════════════════════════════════════════ */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.works-confidentiality.section-movement::before,
		.works-challenges.section-movement::before,
		.works-coverage.section-movement::before,
		.works-process.section-movement::before {
			animation: works-blueprint-draw linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 70%;
		}
		.works-confidentiality__header .editorial-index,
		.works-challenges__header .editorial-index,
		.works-coverage__header .editorial-index,
		.works-process__header .editorial-index {
			animation: works-index-rise linear both;
			animation-timeline: view();
			animation-range: entry 5% cover 22%;
		}
	}
}
@keyframes works-blueprint-draw {
	from { clip-path: inset(0 0 100% 0); opacity: 0; }
	60%  { opacity: 0.7; }
	to   { clip-path: inset(0 0 0 0); opacity: 0.7; }
}
@keyframes works-index-rise {
	from { transform: translateY(24px); opacity: 0; }
	to   { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.works-hero__overline,
	.works-hero__title,
	.works-hero__lead,
	.works-hero__cta,
	.works-hero__sub-link {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}
	.works-hero__spine { stroke-dashoffset: 0 !important; animation: none !important; }
	.works-confidentiality.section-movement::before,
	.works-challenges.section-movement::before,
	.works-coverage.section-movement::before,
	.works-process.section-movement::before {
		clip-path: none !important;
		opacity: 0.55 !important;
		animation: none !important;
	}
	.editorial-index { animation: none !important; transform: none !important; opacity: 1 !important; }
}