/*
 * tsk-v2 / base.css
 *
 * デザイントークン・リセット・タイポグラフィの土台。
 *
 * 【デザインコンセプト】塗装会社の経営参謀
 *   経営 / 成長 / 戦略 / 数字 / 実行 / 塗装業界特化 / 専門性 / 信頼
 *
 *   一般的な「青いコンサル会社テンプレート」に寄せない。
 *   広告LP・スタートアップSaaS の軽さにも寄せない。
 *   プロフェッショナルサービスとしての清潔感と明快さで格を作る。
 *
 * 【配色の考え方】PHASE 3-G3 で再調整
 *   面       : 白／オフホワイトが主役。紙面の8割以上を明るい面にする
 *   濃紺     : ブランドを締める重要箇所（一貫支援の図 / 最終CTA / フッター）に限定
 *   淡いグレー: 情報整理（面の切り替え・罫線）
 *   アクセント: 明るい青は CTA・リンク・英字ラベル
 *   ブロンズ : 成長の到達点（10億円ステージ）だけに使う。
 *              「高級感＝金色」という作りにはしない
 *   文字     : 純黒を使わない。インク色で紙面の質感を出す
 *
 * 【書体】PHASE 3-G3
 *   Noto Sans JP に統一する（inc/enqueue.php で読み込み）。
 *   装飾目的で別の欧文フォントを混ぜない。数字・英字ラベルも同じ書体を使う。
 *   Noto Sans JP は太字にすると密度が高くなるため、本文は 400 / 500 中心。
 */

/* ==========================================================================
   デザイントークン
   ========================================================================== */

:root {

	/* ---- ブランド（濃紺スケール） ---- */
	--navy-900: #00101c;
	--navy-800: #00172a;
	--navy-700: #001f38;
	--navy-600: #002c5d;
	--navy-500: #073e73;
	--navy-400: #14548f;

	--color-brand: var(--navy-600);
	--color-brand-deep: var(--navy-800);

	/* ---- アクセント（数字・リンク・動き） ---- */
	--accent-500: #0a5f96;
	--accent-400: #1a7fc1;
	--accent-300: #58aee6;
	--accent-200: #9ed3f4;

	/* ---- ブロンズ（成長の到達点だけに使う） ---- */
	/*
	 * 600 は明るい面に載る文字用。#9c6f2c ではコントラスト比 4.23 で
	 * WCAG AA（通常テキスト 4.5:1）に届かなかったため暗くしている（実測 5.19）。
	 *
	 * PHASE 3-G3 で使用箇所を「10億円ステージ」の2か所に限定した。
	 * 罫線・章番号・ラベル・料金の強調からは外している。
	 */
	--bronze-600: #8a6224;
	--bronze-500: #b8873b;
	--bronze-300: #d9b26a;

	/* ---- 面（清潔感のあるオフホワイト） ---- */
	/*
	 * PHASE 3-G3 でベージュ寄り（#fbf9f6 系）から中立〜やや寒色へ寄せた。
	 * 紙の資料の質感より、プロフェッショナルサービスの清潔感を優先する。
	 */
	--paper-000: #ffffff;
	--paper-100: #fafbfc;
	--paper-200: #f1f4f7;
	--paper-300: #e2e8ee;

	/* ---- 文字 ---- */
	--ink-900: #12181e;
	--ink-700: #333c45;
	--ink-500: #5d6670;
	--ink-300: #8d949c;
	--ink-000: #ffffff;

	/* ---- 罫線 ---- */
	--line-strong: #c8d2db;
	--line: #e3e9ef;
	--line-on-dark: rgba(255, 255, 255, 0.16);
	--line-on-dark-strong: rgba(255, 255, 255, 0.32);

	/* ---- 役割別の別名 ---- */
	--color-text: var(--ink-900);
	--color-text-muted: var(--ink-500);
	--color-text-inverse: var(--ink-000);
	--color-bg: var(--paper-100);
	--color-bg-plain: var(--paper-000);
	--color-bg-subtle: var(--paper-200);
	--color-border: var(--line);
	--color-border-strong: var(--line-strong);
	--color-link: var(--accent-500);
	--color-link-hover: var(--navy-600);

	/* ---- フォント ---- */
	/*
	 * Noto Sans JP に統一する。後続はフォント取得前・取得失敗時のフォールバック。
	 * ロゴは画像のためこの指定の対象外。
	 */
	--font-sans:
		"Noto Sans JP",
		"Hiragino Kaku Gothic ProN", "Hiragino Sans",
		"Yu Gothic Medium", "Yu Gothic", "YuGothic",
		"Meiryo", system-ui, sans-serif;

	/*
	 * 数字・英字ラベル用。書体は本文と同じで、字送りの扱いだけを変える。
	 * 別の欧文フォントは混ぜない（PHASE 3-G3 の指定）。
	 */
	--font-num: var(--font-sans);

	/* ---- タイポグラフィ（SP → PC を clamp で連続的に） ---- */
	--fs-2xs: 0.75rem;                            /* 12px  英字ラベル */
	--fs-xs: 0.8125rem;                           /* 13px  注記 */
	--fs-sm: 0.875rem;                            /* 14px  補助 */
	--fs-base: clamp(1rem, 0.96rem + 0.16vw, 1.0625rem);   /* 16 → 17px 本文 */
	--fs-md: clamp(1.0625rem, 1rem + 0.28vw, 1.1875rem);
	--fs-lg: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
	--fs-xl: clamp(1.4375rem, 1.15rem + 1.25vw, 2.125rem);
	/*
	 * 2xl はセクション見出し。--section-head--split で段が半分になるため、
	 * 上限を 42px に留める（48px では3行に折り返す見出しが出た）。
	 */
	--fs-2xl: clamp(1.6875rem, 1.25rem + 1.9vw, 2.625rem);
	--fs-3xl: clamp(2.125rem, 1.35rem + 3.5vw, 4rem);
	--fs-4xl: clamp(2.625rem, 1.4rem + 5.4vw, 5.75rem);

	/* 数字専用（大きく見せる） */
	--fs-num-sm: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
	--fs-num: clamp(2.25rem, 1.3rem + 4.2vw, 4.5rem);
	--fs-num-lg: clamp(3rem, 1.5rem + 6.6vw, 6.5rem);

	/* ---- 行間・字間 ---- */
	--lh-tight: 1.26;
	--lh-snug: 1.6;
	--lh-normal: 1.9;
	--lh-relaxed: 1.95;

	/*
	 * Noto Sans JP は字面が大きいため、見出しの字間はやや詰める。
	 * 英字ラベルの字間は広げすぎない（0.18em → 0.1em）。
	 */
	--ls-tight: -0.02em;
	--ls-normal: 0;
	--ls-wide: 0.04em;
	--ls-label: 0.1em;

	/* ---- 余白 ---- */
	--sp-3xs: 0.25rem;
	--sp-2xs: 0.5rem;
	--sp-xs: 0.75rem;
	--sp-sm: 1rem;
	--sp-md: 1.5rem;
	--sp-lg: 2.25rem;
	--sp-xl: 3.5rem;
	--sp-2xl: 5rem;
	--sp-3xl: 7.5rem;
	--sp-4xl: 10rem;

	/* セクションの上下（SP → PC） */
	--section-y: clamp(3.5rem, 2rem + 7vw, 8.5rem);
	--section-y-lg: clamp(4.5rem, 2rem + 10vw, 11rem);

	/* ---- 角丸（UI部品らしさを出さないため小さく保つ） ---- */
	--r-xs: 2px;
	--r-sm: 4px;
	--r: 6px;
	--r-lg: 10px;

	/* ---- 影（濃紺寄り。黒い影を使わない。使用箇所は最小限） ---- */
	--shadow-sm: 0 1px 2px rgba(0, 16, 28, 0.06);
	--shadow: 0 6px 20px -6px rgba(0, 16, 28, 0.12);
	--shadow-lg: 0 24px 60px -20px rgba(0, 16, 28, 0.24);

	/* ---- コンテナ（セクションごとに使い分ける） ---- */
	--w-wide: 1360px;
	--w-main: 1180px;
	--w-text: 780px;
	--w-narrow: 640px;

	--gutter: 1.25rem;
}

@media (min-width: 768px) {

	:root {
		--gutter: 2.5rem;
	}
}

@media (min-width: 1280px) {

	:root {
		--gutter: 4rem;
	}
}

/* ==========================================================================
   リセット
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/*
	 * PHASE 3-I-C14: scroll-padding-top: 5rem を削除した。
	 * これは追従ヘッダーの下にアンカー先が隠れないための逃げ幅であり、
	 * ヘッダーが固定でなくなったため不要になった。
	 * 他の余白設計（body / main / FV 等）には固定ヘッダー用の offset は無く、
	 * 追加の調整は行っていない。
	 */
}

body {
	margin: 0;
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	line-height: var(--lh-normal);
	font-feature-settings: "palt" 1;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
	margin: 0;
}

ul,
ol {
	padding-left: 0;
	list-style: none;
}

img,
svg,
video,
iframe {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

input,
textarea,
select {
	font: inherit;
	color: inherit;
	max-width: 100%;
}

table {
	border-collapse: collapse;
	width: 100%;
}

/* ==========================================================================
   見出し・本文
   ========================================================================== */

/*
 * Noto Sans JP は 700 以上で紙面の密度が一気に上がるため、
 * 既定は 700 とし、800 は「セクション見出し」「巨大数字」「価格」だけに使う。
 */
h1,
h2,
h3,
h4,
h5,
h6 {
	line-height: var(--lh-tight);
	font-weight: 700;
	letter-spacing: var(--ls-tight);
}

h1,
h2 {
	font-weight: 800;
}

a {
	color: var(--color-link);
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	transition: color 0.18s ease;
}

a:hover,
a:focus-visible {
	color: var(--color-link-hover);
}

:focus-visible {
	outline: 2px solid var(--accent-400);
	outline-offset: 3px;
}

/* 数字・英字ラベル */

.num {
	font-family: var(--font-num);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--ls-tight);
	line-height: 1;
}

.label-en {
	display: inline-block;
	font-family: var(--font-num);
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
}

/*
 * 本文のリード（セクション冒頭の1〜2文）
 *
 * PHASE 3-G4: 500 から 400 へ。
 * リードは複数行の読み物なので 400 が適正で、階層はサイズ（--fs-md）・
 * 行間・色で付ける。500 を読み込まないぶん woff2 が 25% 減る。
 * 500 を CSS に残したまま font ファイルだけ外すと、ブラウザが 400 へ
 * 代替して指定と実表示がずれるため、指定側も 400 に合わせる。
 */

.lead {
	font-size: var(--fs-md);
	font-weight: 400;
	line-height: var(--lh-normal);
}

/* 本文ブロック（読みやすい行長に制限する） */

.prose {
	max-width: var(--w-text);
	font-size: var(--fs-md);
	line-height: var(--lh-relaxed);
	color: var(--ink-700);
}

.prose > * + * {
	margin-top: var(--sp-sm);
}

.prose strong {
	color: var(--color-brand);
	font-weight: 700;
}

.prose ul {
	padding-left: 1.4em;
	list-style: disc;
}

.prose .note {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

/* 濃紺の面に載る本文 */

.on-dark {
	color: rgba(255, 255, 255, 0.86);
}

.on-dark strong {
	color: var(--ink-000);
}

/* ==========================================================================
   スクリーンリーダー専用 / スキップリンク
   ========================================================================== */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus-visible {
	position: fixed;
	top: var(--sp-2xs);
	left: var(--sp-2xs);
	z-index: 1000;
	width: auto;
	height: auto;
	margin: 0;
	padding: var(--sp-2xs) var(--sp-md);
	overflow: visible;
	clip-path: none;
	background-color: var(--paper-000);
	color: var(--color-brand);
	border: 2px solid var(--color-brand);
	border-radius: var(--r-sm);
}

/* ==========================================================================
   スクロール連動の登場（控えめ）
   ========================================================================== */

[data-reveal] {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}

[data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

/* JS が無い場合は最初から表示する */
.no-js [data-reveal] {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms;
		animation-iteration-count: 1;
		transition-duration: 0.01ms;
	}

	[data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}