:root {
  color-scheme: light;
  --site-width: 430px;
  --header-ratio: 238 / 1638;
  --footer-ratio: 366 / 1638;
  --header-height: calc(min(100vw, var(--site-width)) * var(--header-ratio));
  --footer-height: calc(min(100vw, var(--site-width)) * var(--footer-ratio));
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: #e7f8fb;
}

body {
  min-height: 100%;
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    linear-gradient(90deg, rgba(14, 23, 32, 0.14), transparent 18%, transparent 82%, rgba(14, 23, 32, 0.14)),
    #dff7fb;
}

.site-shell {
  position: relative;
  width: min(100vw, var(--site-width));
  min-height: 100vh;
  margin: 0 auto;
  overflow-x: hidden;
  background: #fff;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.18);
}

.site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
  width: min(100vw, var(--site-width));
  margin: 0 auto;
  height: var(--header-height);
  background: #050505;
}

.site-header img,
.bottom-nav img,
.main-image {
  display: block;
  width: 100%;
  height: auto;
}

.menu-button {
  position: absolute;
  top: 0;
  right: 0;
  width: 23%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.menu-button:focus-visible,
.nav-hit:focus-visible {
  outline: 3px solid #fff200;
  outline-offset: -3px;
}

.page-content {
  padding-top: var(--header-height);
  background: #fff;
}

.page-content.has-bottom-nav {
  padding-bottom: calc(var(--footer-height) + env(safe-area-inset-bottom));
}

.art-frame {
  position: relative;
}

.main-image {
  user-select: none;
  -webkit-user-drag: none;
}

.tap-area {
  position: absolute;
  display: block;
  background: transparent;
  text-decoration: none;
  touch-action: manipulation;
}

.tap-area:focus-visible {
  outline: 3px solid #1da9c6;
  outline-offset: -3px;
}

.user-info-link {
  top: 63.75%;
  left: 5%;
  width: 90%;
  height: 2.55%;
}

.back-mypage-link {
  top: 68.95%;
  left: 9%;
  width: 82%;
  height: 2.8%;
}

.bottom-nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  width: min(100vw, var(--site-width));
  height: calc(var(--footer-height) + env(safe-area-inset-bottom));
  margin: 0 auto;
  padding-bottom: env(safe-area-inset-bottom);
  background: #1da9c6;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.14);
}

.bottom-nav img {
  height: var(--footer-height);
  object-fit: contain;
}

.nav-hit {
  position: absolute;
  top: 0;
  height: var(--footer-height);
  text-decoration: none;
}

.nav-mypage {
  left: 0;
  width: 25%;
}

.nav-event {
  left: 25%;
  width: 25%;
}

.nav-results {
  left: 50%;
  width: 25%;
}

.nav-deck {
  left: 75%;
  width: 25%;
}

@media (min-width: 431px) {
  body {
    padding: 0 0 24px;
  }

  .site-shell {
    min-height: 100vh;
    border-radius: 0 0 22px 22px;
  }

  .site-header {
    border-radius: 0;
  }

  .bottom-nav {
    border-radius: 0 0 22px 22px;
  }
}

@media (max-width: 360px) {
  :root {
    --site-width: 100vw;
  }
}