/**
 * 「Paperベースの明るい紙面」というブランドコンセプトを、和紙のような繊維感として
 * 視覚的にも表現する。bodyの疑似要素をfixed・z-index最下層で全ページ共通に重ねるため、
 * FVを含むどのセクションの上にも同じテクスチャが表示される（重なりはCSSの
 * スタッキング規則上、z-index未指定の通常フローより明示的なz-index:0が常に上に来るため、
 * .fvにoverflow:hiddenがあってもこの疑似要素は別要素なので影響を受けない）。
 * 「グレーっぽい」という指摘を受け、ノイズの色を黒（無彩色）ではなく生成り紙に馴染む
 * 暖色の茶系（feColorMatrixで着色）に変更。低周波×高周波を組み合わせたturbulenceを
 * 2層重ね、繊維の長い筋（fiber）と細かい紙の目（fine）の両方を表現する。
 */
body {
	position: relative;
}

body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: var(--z-base);
	pointer-events: none;
	opacity: 0.16;
	mix-blend-mode: multiply;
	background-repeat: repeat;
	background-size: 240px 240px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cfilter id='washi'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3' stitchTiles='stitch' result='fine'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.9' numOctaves='2' seed='7' stitchTiles='stitch' result='fiber'/%3E%3CfeColorMatrix in='fine' type='matrix' values='0 0 0 0 0.42 0 0 0 0 0.32 0 0 0 0 0.18 0 0 0 1.1 0' result='fineTint'/%3E%3CfeColorMatrix in='fiber' type='matrix' values='0 0 0 0 0.42 0 0 0 0 0.32 0 0 0 0 0.18 0 0 0 2.2 0' result='fiberTint'/%3E%3CfeMerge%3E%3CfeMergeNode in='fineTint'/%3E%3CfeMergeNode in='fiberTint'/%3E%3C/feMerge%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23washi)'/%3E%3C/svg%3E");
}