body { font-family: "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif; background: #f5f0e8; margin: 0; padding: 24px; }
.card { max-width: 560px; margin: 40px auto; background: #fff; border: 1px solid #d8cdb8; border-radius: 8px; padding: 28px; }
h1 { font-size: 20px; color: #2b2320; }
p.sub { color: #6b5f53; font-size: 13px; }
label { display: block; font-size: 14px; margin: 18px 0 6px; }
input[type=email] { width: 100%; box-sizing: border-box; font-size: 16px; padding: 10px; border: 1px solid #b8a88f; border-radius: 4px; }
button { margin-top: 18px; font-size: 16px; padding: 12px 28px; background: #3a6ea5; color: #fff; border: 0; border-radius: 4px; cursor: pointer; }
button:disabled { opacity: .6; }
#msg { margin-top: 16px; font-size: 14px; white-space: pre-wrap; }
#msg.ok { color: #1e7d34; }
#msg.err { color: #b3261e; }
@media screen and (max-width: 480px) {
  body { padding: 12px; }
  .card { margin: 24px auto; padding: 20px 16px; border-radius: 6px; }
  h1 { font-size: 18px; }
  button { width: 100%; }
}