/* 共通のリセットとタイポグラフィ。tokens.css の後に読み込む。 */

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

img,
video {
	max-width: 100%;
	height: auto;
}

/*
 * 日本語の折り返し（2026-08-24 デザインレビューで是正）
 *
 * それまで見出しは `word-break: keep-all`（＋`overflow-wrap: break-word`）だった。
 * keep-all は日本語の連なりを1語として扱うため、見出しが器に収まる限りは
 * きれいに見えるが、収まらなくなった瞬間に break-word が働いて**語の途中で
 * 機械的に切れる**。実際に導入案内ページで
 *   「循環型ポータブル天然芝ショ／ットマット」
 * という切れ方をしていた（2026-08-24 本番実測）。
 *
 * `auto-phrase` は文節（意味のまとまり）の境界で折る。
 * `text-wrap: balance` は見出しの各行の長さを揃える（短い見出し向け）。
 * どちらも未対応ブラウザは無視するだけなので、段階的な上乗せとして安全。
 *
 * ※ CSS で救えるのは「どこで折るか」だけ。器に対して文字数が多すぎる見出しは
 *    CSS では直らないので、文言と見出し階層の側で短くする（同日 導入案内
 *    ヒーローの見出しを実際に組み替えた）。
 */
h1,
h2,
h3,
h4 {
	font-family: var(--sb-font-serif);
	font-weight: 400;
	margin: 0;
	word-break: auto-phrase;
	overflow-wrap: break-word;
	text-wrap: balance;
}

/*
 * 本文は `pretty` で最終行の孤立（1〜2文字だけが次行に落ちる）を避ける。
 * レビュー前は 7ページで16箇所の孤立行があった
 * （例「…スタンダードだっ／た。」「…取材のうえ掲載します／。」）。
 */
p {
	margin: 0;
	text-wrap: pretty;
}

/*
 * 文節での折り返しはページ全体に効かせる。カード内の短い説明文やテーブルの
 * セルなど、p 以外の要素にも同じ問題が出ていたため body から継承させる
 * （例「工事も改修も不要／で、既存の打席が…」→「工事も改修も／不要で、…」）。
 * ラテン文字の分割規則は auto-phrase の対象外なので英数字表記には影響しない。
 */
body {
	word-break: auto-phrase;
}

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

a {
	text-decoration: none;
}

/* 等幅の小さなラベル（デモで多用されている 9px のモノスペース表記） */
.sb-label {
	font: 9px/1 var(--sb-font-mono);
	letter-spacing: 0.22em;
}

/* 横スクロールを起こさないための保険 */
body {
	overflow-x: hidden;
}