*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  color: #333;
  -webkit-font-smoothing: antialiased;
}
.page { width: 100%; padding: 40px 24px; text-align: center; }
.illust { margin: 0 auto 36px; line-height: 0; }
.illust img { width: 565px; height: auto; max-width: none; display: block; margin: 0 auto; }
.msg h1 { font-size: 28px; font-weight: 700; color: #333; line-height: 1.4; margin-bottom: 12px; letter-spacing: 0.02em; }
.msg p { font-size: 18px; font-weight: 700; color: #333; line-height: 1.5; }
.back { margin-top: 36px; }
.back a {
  display: inline-block;
  padding: 10px 28px;
  font-size: 15px;
  color: #4aa8e8;
  text-decoration: none;
  border: 1px solid #8ec8f0;
  border-radius: 24px;
  transition: background .2s, color .2s;
}
.back a:hover { background: #4aa8e8; color: #fff; }
@media (max-width: 768px) {
  .page { padding: 32px 16px; }
  .illust { margin-bottom: 28px; }
  .illust img { width: 100%; max-width: 693px; }
  .msg h1 { font-size: 22px; }
  .msg p { font-size: 15px; }
  .back { margin-top: 28px; }
}