/* ============================================================ SmartPropFact — marketing site Aesthetic: "the ledger, elevated" — washi paper, sumi ink, hanko vermillion, surplus green. Mincho display + gothic body. Hand-rolled, mobile-first, zero CDN dependencies. ============================================================ */ :root { --paper: #faf6ef; --paper-deep: #f2ecdf; --ink: #1c2430; --ink-2: #2a3444; --ink-soft: #5b6472; --line: #ddd4c2; --line-soft: #e9e2d3; --red: #c73a2b; /* hanko vermillion — brand/CTA only, never money */ --red-deep: #a92f22; --green: #0e7a5a; /* 黒字 surplus green — refund figures */ --green-deep: #0b6349; /* darker green for small text on --green-soft (≥4.5:1) */ --green-soft: #e3f0ea; --white: #ffffff; --serif: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", "Times New Roman", serif; --sans: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif; --maxw: 1080px; } html[lang="en"] { --serif: "Iowan Old Style", "Palatino", "Hiragino Mincho ProN", "Noto Serif JP", Georgia, serif; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 76px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--sans); color: var(--ink); background: var(--paper); line-height: 1.85; font-size: 16px; -webkit-font-smoothing: antialiased; /* clip (not hidden): hidden creates a scroll container and breaks position: sticky on the header */ overflow-x: clip; } /* washi grain over the whole page */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.38 0 0 0 0 0.30 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } /* lift content above the fixed grain overlay; the header handles its own stacking (position: sticky + z-index below) */ main, footer { position: relative; z-index: 1; } img { max-width: 100%; } a { color: inherit; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; } .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; letter-spacing: 0.01em; } /* ---------- reveals ---------- Hidden initial states are scoped to .js (set by an inline