@font-face { font-family: Roboto; font-style: normal; font-weight: 300; font-display: swap; src: url('assets/roboto-light.ttf') format('truetype'); }
@font-face { font-family: Roboto; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/roboto-regular.ttf') format('truetype'); }
:root { color-scheme: light; background: #fffffb; color: #0a0017; font-family: Roboto, Arial, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; }
main { display: flex; flex-direction: column; align-items: center; }
.badge { width: min(515px, 100%); height: 287px; margin-top: 100px; background: url("assets/badge.gif") center / cover no-repeat; }
h1 { margin: 0; line-height: 0; }
.logo { display: block; width: min(345px, 80vw); height: auto; }
.download { width: 100%; height: 120px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 40px; }
.download img { display: block; width: 184px; height: auto; }
footer { display: flex; flex-direction: column; align-items: center; padding: 20px 16px; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid #0a0017; outline-offset: 6px; border-radius: 3px; }
a:hover { opacity: .7; }
.social { display: flex; align-items: center; gap: 8px; margin-top: 40px; }
.social a { width: 44px; height: 20px; display: grid; place-items: center; }
.social img { object-fit: contain; }
.legal { min-height: 56px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 16px; font-size: 14px; line-height: 1.4; }
.copyright { margin: 20px 0 0; font-size: 13px; line-height: 1.4; font-weight: 300; }
@media (max-width: 540px) {
 .badge { height: 221px; margin: 80px 0 40px; }
 .logo { width: min(280px, 80vw); }
 .download img { width: 176px; }
 .social { margin-top: 0; margin-bottom: 8px; }
 .legal { min-height: 40px; gap: 8px 16px; font-size: 14px; }
 .copyright { margin-top: 16px; }
}