html { scrollbar-gutter: stable; }

body { font-family: 'Noto Sans JP', sans-serif; }
.fade-enter { opacity: 0; }
.fade-enter-active { opacity: 1; transition: opacity 1500ms ease-in-out; }
.fade-exit { opacity: 1; }
.fade-exit-active { opacity: 0; transition: opacity 1500ms ease-in-out; }

.page-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (min-width: 640px) {
  .page-container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .page-container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .page-container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .page-container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .page-container {
    max-width: 1536px;
  }
}