@charset "utf-8"; /* ============================================================ paper.css — 丹羽ふとん店色は現行のまま。背景にテクスチャだけを重ねるレイヤー。色のトークン（--paper / --bg / --sumi / --ink / --hai / --line …）には触れていません。置き場所：各ページの "いちばん最後" のスタイルシート。ページ内の直後。 ★ html に background を書かないでください。 body の背景がキャンバスへ引き継がれる仕様に依存しています。 ============================================================ */ /* ------------------------------------------------------------ 強さ — 三つの軸 --paper-mottle 漉きムラ。紙の厚みの不均一。低い周波数なので文字の可読性にはほとんど影響しません。 --paper-fiber 繊維。中くらいの周波数。 --paper-grain 粒子。いちばん細かい層で、文字の輪郭と同じ大きさを持つため、可読性を最初に削るのはここです。読みにくいと感じたら、まず 0 にしてください。0 でも紙の印象は保たれます。 ------------------------------------------------------------ */ :root{ --paper-mottle: 0.06; --paper-fiber: 0.07; --paper-grain: 0.085; } /* ------------------------------------------------------------ 1. 漉きムラ — 紙の厚みの不均一濃い雲と淡い雲を対で重ね、平均の明るさが地と変わらないようにしてあります。片方向に濃くするだけだと地全体が沈み、文字とのコントラストがそのぶん落ちます。 ------------------------------------------------------------ */ html::before{ content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--paper-mottle); background-image: /* (1) 雲 — 濃い側と淡い側を同じ種から作り、明暗を釣り合わせる */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='1400'%3E%3Cfilter id='cd' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.013' numOctaves='5' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.20 0 0 0 0 0.23 0 0 0 0 0.27 0.55 0.55 0.55 0 -0.82'/%3E%3C/filter%3E%3Cfilter id='cl' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.013' numOctaves='5' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 -0.55 -0.55 -0.55 0 0.82'/%3E%3C/filter%3E%3Crect width='1400' height='1400' filter='url(%23cd)'/%3E%3Crect width='1400' height='1400' filter='url(%23cl)'/%3E%3C/svg%3E"), /* (2) 大きな光の流れ — 左上が明るく */ radial-gradient(120% 90% at 16% 10%, rgba(255,255,255,0.85), rgba(255,255,255,0) 62%), /* (3) 右下がわずかに沈む */ radial-gradient(110% 100% at 88% 84%, rgba(122,136,148,0.45), rgba(122,136,148,0) 66%); background-size: 1400px 1400px, 100% 100%, 100% 100%; background-repeat: repeat, no-repeat, no-repeat; } /* ------------------------------------------------------------ 2. 繊維縦横二方向を薄く交差させています。一方向だけだと障子紙の目に読めてしまうためです。しきい値を上げてあるので、均一な靄ではなく、ところどころに短い繊維が見える状態になります。 ------------------------------------------------------------ */ body::before{ content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--paper-fiber); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='fa' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.005 0.5' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.22 0 0 0 0 0.25 0 0 0 0 0.29 0.75 0.75 0.75 0 -1.28'/%3E%3C/filter%3E%3Crect width='700' height='700' filter='url(%23fa)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='620'%3E%3Cfilter id='fb' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5 0.005' numOctaves='2' seed='19' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.22 0 0 0 0 0.25 0 0 0 0 0.29 0.72 0.72 0.72 0 -1.26'/%3E%3C/filter%3E%3Crect width='620' height='620' filter='url(%23fb)'/%3E%3C/svg%3E"); background-size: 700px 700px, 620px 620px; background-repeat: repeat, repeat; } /* ------------------------------------------------------------ 3. 粒子前は画面全体を均一に覆っていました。文字の輪郭と同じ大きさの濃淡が全面にあると、明度差が足りていても読みにくくなります。しきい値を上げて、まばらな点だけが残るようにしました。 ------------------------------------------------------------ */ body::after{ content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--paper-grain); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.24 0 0 0 0 0.27 0 0 0 0 0.31 0.75 0.75 0.75 0 -1.05'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E"); background-size: 200px 200px; background-repeat: repeat; } /* ------------------------------------------------------------ 4. スマートフォン画面が近く、文字も相対的に小さいので、細かい層をさらに弱く。 ------------------------------------------------------------ */ @media (max-width: 760px){ :root{ --paper-mottle: 0.10; --paper-fiber: 0.045; --paper-grain: 0.030; } html::before{ background-size: 620px 620px, 100% 100%, 100% 100%; } body::before{ background-size: 560px 560px, 500px 500px; } body::after{ background-size: 250px 250px; } } /* ------------------------------------------------------------ 5. 印刷 ------------------------------------------------------------ */ @media print{ html::before, body::before, body::after{ display: none; } } /* ============================================================ 6. 任意 — 小さな灰色テキストの補強 --hai (#565F66) は地に対して 5.3:1。数値上は足りていますが、 .note のようなウェイト 300・字間広め・小さめの文字は、テクスチャが乗るといちばん先に読みにくくなります。気になる箇所があれば、ここだけ一段濃くしてください。 ============================================================ */ /* :root{ --hai: #4E565C; } */