/* 文字サイズの切り替え（ヘッダーの「標準 / 拡大」ボタン）
 *
 * 旧実装は <p> と <li> にだけインラインで px を入れていたため、見出し・リンク・表などが
 * 大きくならず「効いていない」状態でした。
 * ここでは基準サイズ（標準＝100%）を決め、拡大時はサイト全体を一定の倍率で拡大します。
 * 倍率だけが変わるので、レイアウトの崩れが起きません。
 */

:root {
	/* 拡大時の倍率。1.2 = 120%（変更したい場合はこの数字だけ変えてください） */
	--culpo-font-scale-large: 1.2;
}

/* 標準サイズ（初期状態）。何も指定しないのと同じ状態です */
#wrap {
	zoom: var(--culpo-zoom, 1);
}

/* 拡大サイズ */
html.culpo-font-large {
	--culpo-zoom: var(--culpo-font-scale-large);
}

/* zoom に対応していないブラウザ向けの保険（文字だけ拡大する） */
@supports not (zoom: 1.2) {
	html.culpo-font-large body,
	html.culpo-font-large p,
	html.culpo-font-large li,
	html.culpo-font-large td,
	html.culpo-font-large th,
	html.culpo-font-large dd,
	html.culpo-font-large dt,
	html.culpo-font-large a,
	html.culpo-font-large span,
	html.culpo-font-large h1,
	html.culpo-font-large h2,
	html.culpo-font-large h3,
	html.culpo-font-large h4 {
		font-size: calc(1em * var(--culpo-font-scale-large));
	}
}

/* 印刷時は必ず標準サイズに戻す */
@media print {
	#wrap {
		zoom: 1;
	}
}