/**
 * Base element styles（トークンを適用する土台。コンポーネント個別のスタイルはPHASE3以降）
 */

/* ユーザー指示（2026-09-16、SERVICE固定ページ修正指示書）：INTROセクションで日本語が
   1文字ずつ改行される重大なレイアウト崩れの根本原因調査で判明した問題への対策。
   ページ内の幅指定はほぼ全てwidth:100%の親子連鎖（body→html→#main-content→各section）に
   依存しており、どこにもwidth/min-widthの下限が無かった。実測により、ブラウザの初回描画や
   タブが非アクティブな状態などでviewport幅が一時的に0（またはそれに極めて近い値）として
   計測されるケースが実在し、この場合100%の連鎖がすべて0へ潰れ、日本語のような
   「ほぼ任意の文字間で改行可能」な文章は極端に細い（実質0px）領域の中で1文字ずつ
   改行される（英字主体の文章では単語の途中では改行されないため症状が出にくく、
   目立たなかった）。body/htmlへmin-widthの下限を設け、パーセンテージ連鎖が
   本当の意味でゼロまで潰れることを防ぐ（サイト全体への保険、視覚的な変更はない）。 */
html {
	min-width: 320px;
}

body {
	min-width: 320px;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--fs-body);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

/* 2026-09-24 レスポンシブ総点検：Tablet/SP（≤1023px）で日本語見出しの末尾が1〜2文字だけ次行へ
   孤立する（例「…コンテンツ設計と／は」「…もっと広がる、ビ／ジネスの可能性。」）現象が全ページ
   に広く出ていた（自動計測で確認）。個別要素ごとに幅やfont-sizeを触るのではなく、見出し全体へ
   text-wrap:balanceで行長を均す（対応ブラウザのみ有効・非対応は従来どおり）。word-break:auto-phrase
   （Chromium系）は「ビジネス」等の語の途中改行も避ける。PC（1024px以上）は従来のまま。 */
@media (max-width: 1023px) {
	h1, h2, h3, h4,
	.about-world__closing-text,
	.home-service__cta-title {
		text-wrap: balance;
		word-break: auto-phrase;
	}
}

p {
	line-height: var(--lh-relaxed);
}

a {
	transition: color var(--duration-fast) var(--ease-standard);
}

a:hover {
	color: var(--color-accent);
}

:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

::selection {
	background: var(--color-accent);
	color: var(--color-accent-ink);
}

.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

html {
	scroll-padding-top: var(--header-height, 96px);
}

/* ユーザー指示（2026-09-17、「HEADER 最終実装指示書」セクション2・29）：TOPページ（body.home）
   ではHEADERをFV動画へoverlayさせるため、HEADER高さぶんのpadding-topをFVへ足してはいけない
   （FVはtop:0から開始する）。固定ページ側は従来どおりpadding-topで固定HEADER分を確保する。 */
body:not(.home) #main-content {
	padding-top: var(--header-height, 96px);
}

.eyebrow {
	font-family: var(--font-mono);
	font-size: var(--fs-eyebrow);
	letter-spacing: var(--ls-wide);
	color: var(--color-ink-soft);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/**
 * ページ遷移の軽いフェード（MASTER_SPEC第41項）。
 * ブラウザ標準のCross-document View Transitions APIのみを使用（依存ライブラリなし）。
 * 非対応ブラウザでは自動的に通常のページ遷移になる。
 */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}

	::view-transition-old(root),
	::view-transition-new(root) {
		animation-duration: 250ms;
		animation-timing-function: ease;
	}
}