.moon-lp-shell {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: #050a27;
}

.moon-lp-shell__page {
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  background: #050a27;
}

.moon-lp-shell #wpadminbar {
  position: fixed;
}

.moon-lp-shell main.site-main {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.moon-lp-page,
.moon-register-page,
.moon-routine-page,
.moon-result-page,
.moon-premium-page,
.moon-member-page,
.moon-love-type-page,
.moon-tarot-page,
.moon-compat-page,
.moon-monthly-page {
  --moon-app-scale: 1;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.moon-lp-page > .moon-lp,
.moon-register-page > .moon-register,
.moon-routine-page > .moon-routine,
.moon-result-page > .moon-result,
.moon-premium-page > .moon-premium,
.moon-member-page > .moon-member,
.moon-love-type-page > .moon-love-type,
.moon-tarot-page > .moon-tarot,
.moon-compat-page > .moon-compat,
.moon-monthly-page > .moon-monthly {
  width: 720px;
  max-width: none;
  margin: 0;
  left: 0;
  transform: scale(var(--moon-app-scale));
  transform-origin: top left;
}

.moon-lp-page,
.moon-register-page,
.moon-routine-page,
.moon-result-page,
.moon-premium-page,
.moon-member-page,
.moon-love-type-page,
.moon-tarot-page,
.moon-compat-page,
.moon-monthly-page {
  min-height: calc(1280px * var(--moon-app-scale));
}

@media (max-width: 720px) {
  .moon-lp-page {
    height: calc(1283px * var(--moon-app-scale));
    min-height: calc(1283px * var(--moon-app-scale));
  }

  .moon-lp-page > .moon-lp {
    position: absolute;
    top: 0;
  }
}

@media (max-width: 380px) {
  .moon-lp-page,
  .moon-register-page,
  .moon-routine-page,
  .moon-result-page,
  .moon-premium-page,
  .moon-member-page,
  .moon-love-type-page,
  .moon-tarot-page,
  .moon-compat-page,
  .moon-monthly-page {
    --moon-app-scale: .521;
    min-height: 667px;
  }
}

@media (min-width: 381px) and (max-width: 400px) {
  .moon-lp-page,
  .moon-register-page,
  .moon-routine-page,
  .moon-result-page,
  .moon-premium-page,
  .moon-member-page,
  .moon-love-type-page,
  .moon-tarot-page,
  .moon-compat-page,
  .moon-monthly-page {
    --moon-app-scale: .542;
    min-height: 694px;
  }
}

@media (min-width: 401px) and (max-width: 430px) {
  .moon-lp-page,
  .moon-register-page,
  .moon-routine-page,
  .moon-result-page,
  .moon-premium-page,
  .moon-member-page,
  .moon-love-type-page,
  .moon-tarot-page,
  .moon-compat-page,
  .moon-monthly-page {
    --moon-app-scale: .597;
    min-height: 765px;
  }
}

@media (min-width: 431px) and (max-width: 480px) {
  .moon-lp-page,
  .moon-register-page,
  .moon-routine-page,
  .moon-result-page,
  .moon-premium-page,
  .moon-member-page,
  .moon-love-type-page,
  .moon-tarot-page,
  .moon-compat-page,
  .moon-monthly-page {
    --moon-app-scale: .667;
    min-height: 854px;
  }
}

@media (min-width: 481px) and (max-width: 560px) {
  .moon-lp-page,
  .moon-register-page,
  .moon-routine-page,
  .moon-result-page,
  .moon-premium-page,
  .moon-member-page,
  .moon-love-type-page,
  .moon-tarot-page,
  .moon-compat-page,
  .moon-monthly-page {
    --moon-app-scale: .778;
    min-height: 996px;
  }
}

@media (min-width: 561px) and (max-width: 720px) {
  .moon-lp-page,
  .moon-register-page,
  .moon-routine-page,
  .moon-result-page,
  .moon-premium-page,
  .moon-member-page,
  .moon-love-type-page,
  .moon-tarot-page,
  .moon-compat-page,
  .moon-monthly-page {
    --moon-app-scale: .889;
    min-height: 1138px;
  }
}

@media (min-width: 721px) {
  .moon-lp-page,
  .moon-register-page,
  .moon-routine-page,
  .moon-result-page,
  .moon-premium-page,
  .moon-member-page,
  .moon-love-type-page,
  .moon-tarot-page,
  .moon-compat-page,
  .moon-monthly-page {
    display: grid;
    place-items: start center;
  }

  .moon-lp-page > .moon-lp,
  .moon-register-page > .moon-register,
  .moon-routine-page > .moon-routine,
  .moon-result-page > .moon-result,
  .moon-premium-page > .moon-premium,
  .moon-member-page > .moon-member,
  .moon-love-type-page > .moon-love-type,
  .moon-tarot-page > .moon-tarot,
  .moon-compat-page > .moon-compat,
  .moon-monthly-page > .moon-monthly {
    left: auto;
    transform: none;
  }
}