:root { --bg: #FBF4E6; --deep: #F3E6CC; --ink: #4A3423; --soft: #8B6E54; --wood: #E2B57E; --line: #5C3F27; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--ink); font-family: 'Zen Maru Gothic', -apple-system, 'Hiragino Sans', sans-serif; line-height: 1.8; }
main { max-width: 640px; margin: 0 auto; padding: 40px 16px 80px; }
header { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; }
header img { width: 64px; height: 64px; border-radius: 16px; }
h1 { font-size: 24px; font-weight: 900; }
h2 { font-size: 17px; font-weight: 700; margin: 36px 0 8px; }
p, li { font-size: 14px; color: var(--ink); }
.soft { color: var(--soft); font-size: 13px; }
ul { padding-left: 1.2em; }
a { color: var(--line); }
.hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.hero img { width: 120px; }
.button { display: inline-block; margin-top: 12px; padding: 12px 24px; border-radius: 999px; background: var(--wood); border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); color: var(--ink); font-weight: 700; text-decoration: none; }
dt { font-weight: 700; font-size: 14px; margin-top: 16px; }
dd { font-size: 14px; color: var(--soft); }
footer { margin-top: 56px; font-size: 12px; color: var(--soft); }