@charset "UTF-8";

/*--------------------------------------------------------
ローディング画面
--------------------------------------------------------*/

/* ローディング中のスクロール無効化 */
body.loading {
  overflow: hidden;
}

/* ローディングオーバーレイ */
.loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-primary, #E60012);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
  opacity: 1;
  visibility: visible;
}

.loader-overlay.hidden {
  opacity: 0;
  visibility: hidden;
}

/* ローディングコンテンツ */
.loader-content {
  text-align: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* ローディング画像 */
.loader-image {
  width: 120px;
  height: auto;
  margin-bottom: 10px;
  filter: brightness(0) invert(1); /* 画像を白に変換 */
  opacity: 0.9;
  display: block; /* 確実に表示 */
  max-width: 100%; /* レスポンシブ対応 */
}

/* 背景画像として設定 */
.loader-logo {
  width: min(50vw, 50vh) !important;
  height: min(50vw, 50vh) !important;
  background-image: url('../../images/toppage/loading.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: brightness(0) invert(1); /* 画像を白に変換 */
  opacity: 0;
  margin-bottom: 10px;
  /* 画像読み込み最適化 */
  will-change: opacity, transform;
  transform: translateZ(0) translateY(-30px); /* GPU加速 + 初期位置 */
  /* ロゴアニメーション */
  animation: logoFadeIn 1.2s ease-out 0.3s forwards;
}

.loader-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ロゴのフェードインアニメーション */
@keyframes logoFadeIn {
  0% {
    opacity: 0;
    transform: translateZ(0) translateY(-30px);
  }
  100% {
    opacity: 0.9;
    transform: translateZ(0) translateY(0);
  }
}

/* ローディングスピナーコンテナ */
.loader-spinner-container {
  width: 40px;
  height: 40px;
  margin: 0;
  opacity: 0;
  transform: scale(0.8);
  /* フェードインアニメーション */
  animation: spinnerFadeIn 0.8s ease-out 0.8s forwards;
}

/* ローディングスピナー */
.loader-spinner {
  width: 100%;
  height: 100%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* スピナーのフェードインアニメーション */
@keyframes spinnerFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* スピナーの回転アニメーション（フェードイン完了後に開始） */
.loader-spinner.animate-spin {
  animation: spin 1s linear infinite !important;
  transform: scale(1) !important;
}

@keyframes spin {
  0% { transform: rotate(0deg) scale(1) !important; }
  100% { transform: rotate(360deg) scale(1) !important; }
}

/* ローディングテキスト */
.loader-text {
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.1em;
  animation: pulse 1.5s ease-in-out infinite, textFadeIn 0.6s ease-out 1.2s forwards;
  margin: 0;
  opacity: 0;
  transform: translateY(10px);
}

/* テキストのフェードインアニメーション */
@keyframes textFadeIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ローディング完了時のアニメーション */
.loader-overlay.fade-out {
  animation: fadeOut 0.5s ease-out forwards;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
 
  .loader-spinner-container {
    width: 30px;
    height: 30px;
  }
  
  .loader-spinner {
    border-width: 2px;
  }
  
  .loader-text {
    font-size: 12px;
  }
}