@font-face { font-family: "Space Grotesk"; font-weight: 300 700; font-display: swap; src: url(fonts/sg-3.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #F5F3EE; color: #1F2326; font-family: "Space Grotesk", "Segoe UI", system-ui, sans-serif; line-height: 1.6; }
.bar { height: 6px; background: linear-gradient(90deg, #1FA9F0 0 25%, #F0155A 0 50%, #FFD400 0 75%, #1F2326 0); }
.wrap { width: min(760px, 92vw); margin: 0 auto; padding: 48px 0; }
.back { display: inline-block; font-size: 14px; font-weight: 600; color: #5A6066; margin-bottom: 28px; }
.back:hover { color: #F0155A; }
h1 { font-size: clamp(34px, 6vw, 56px); letter-spacing: -.03em; line-height: 1; margin-bottom: 14px; }
h2 { font-size: 20px; margin: 34px 0 8px; letter-spacing: -.01em; }
p { color: #3A4045; font-size: 16px; }
p + p { margin-top: 10px; }
.hint { color: #5A6066; font-size: 14px; border-left: 3px solid #FFD400; padding-left: 12px; }
a { color: #1F2326; text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: #F0155A; }
footer { font-size: 14px; color: #5A6066; border-top: 1px solid #D9D5CC; padding-top: 20px; }