/* =========================================
   LoftLoader Global Base
   ========================================= */

#loftloader-wrapper {
  pointer-events: none; /* 操作ブロックしない */
}

#loftloader-wrapper[aria-hidden] {
  aria-hidden: true;
}

/* 中央寄せ */
#loftloader-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 中身の縦並び */
#loftloader-wrapper .loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}


/* =========================================
   Logo Size
   ========================================= */

/* PC */
@media (min-width: 769px) {
  #loftloader-wrapper img {
    width: 10vw; /* ← PCロゴサイズ */
  }
}

/* SP */
@media (max-width: 768px) {
  #loftloader-wrapper img {
    width: 5vw; /* ← SPロゴサイズ */
  }
}


/* =========================================
   Logo & Bar Spacing
   ========================================= */

/* PC */
@media (min-width: 769px) {
  #loftloader-wrapper .loader-inner {
    gap: 1vw; /* ← ロゴとバーの距離（PC） */
  }
}

/* SP */
@media (max-width: 768px) {
  #loftloader-wrapper .loader-inner {
    gap: 3vw; /* ← ロゴとバーの距離（SP） */
  }
}


/* =========================================
   Progress Bar
   ========================================= */

/* PC */
@media (min-width: 769px) {
  #loftloader-wrapper .loftloader-progress {
    width: 100vw;  /* ← バー幅（PC） */
    height: 2px;   /* ← バー高さ（PC） */
  }
}

/* SP */
@media (max-width: 768px) {
  #loftloader-wrapper .loftloader-progress {
    width: 40wv;  /* ← バー幅（SP） */
    height: 2px;   /* ← バー高さ（SP） */
  }
}


/* =========================================
   Reduced Motion
   ========================================= */

@media (prefers-reduced-motion: reduce) {
  #loftloader-wrapper * {
    animation: none !important;
    transition: none !important;
  }
}


/* =========================================
   Fade-out Easing
   ========================================= */

/* PC：自然 */
@media (min-width: 769px) {
  #loftloader-wrapper {
    transition: opacity 0.6s ease;
  }
}

/* SP：キレ良く */
@media (max-width: 768px) {
  #loftloader-wrapper {
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
}