* { box-sizing: border-box; }
html { background: #fff; color: #777; font-size: 16px; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  font-family: "Noto Sans JP", "Yu Gothic Medium", "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; padding: max(64px, calc(50svh - 138px)) 24px 64px; text-align: center; }
.brand { width: 320px; max-width: 100%; margin: 0 auto; text-align: left; }
.brand-caption { margin: 0; color: #505050; font-size: 1.125rem; font-weight: 700; line-height: 24px; }
.brand img { display: block; width: 100%; height: auto; }
.notice { margin: 48px 0 0; font-size: 1.25rem; font-weight: 400; line-height: 1.3; }
.notice span { display: block; }
footer { flex: none; padding: 0 24px 54px; text-align: center; font-size: 1.25rem; line-height: 1.5; }
@media (max-width: 640px) {
  main { padding: max(64px, calc(32svh - 80px)) 24px 64px; }
  .brand { width: 280px; }
  .brand-caption { font-size: 1rem; }
  .notice { margin-top: 40px; font-size: 1rem; line-height: 1.9; overflow-wrap: anywhere; }
  .notice span + span { margin-top: 8px; }
  footer { padding-bottom: 32px; font-size: 1rem; }
}