/* ===== reset ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background-color: #b1b5ab;
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  max-width: 100%;
}

/* ===== loading ===== */
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background-color: #b1b5ab;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading__inner {
  display: flex;
  flex-direction: column;
  align-items: center;

  /* media-breakpoint-up(md) — tablet and above */
}

@media (min-width: 768px) {
  .loading__inner {
    width: 20%;
  }
}

/* media-breakpoint-down(md) — below tablet */
@media (max-width: 767.98px) {
  .loading__inner {
    width: 35%;
  }
}

.loading__logo {
  position: relative;
  width: 100%;
  /* SVG viewBox 625 x 76 に合わせてアスペクト比で高さを確保 */
  aspect-ratio: 625 / 76;
}

.loading__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
}

.loading__img.is-active {
  opacity: 1;
  visibility: visible;
}

.loading__text {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  color: #1a1a1a;
  letter-spacing: 0.12em;
  text-align: center;
}

/* ロゴ幅が vw（フルビューポート幅に対する %）でスケールするため、
   文字サイズ・余白もロゴに比例するよう vw で指定する。
   基準幅: PC 1440px / SP 375px */
@media (min-width: 768px) {
  .loading__text {
    margin-top: 1.39vw; /* 20px @ 1440 */
    font-size: 0.96vw; /* 約13.8px @ 1440 */
  }
}

@media (max-width: 767.98px) {
  .loading__text {
    margin-top: 4vw; /* 15px @ 375 */
    font-size: 2.4vw; /* 9px @ 375 */
  }
}