/* =========================
   Loading（css/loading.css）
   ========================= */
:root {
  --loading-bg: #494949; /* ローディング背景色 */
  --loading-fg: #ffffff; /* ロゴ・ライン色 */
}

/* ローディング中はスクロール禁止 */
body.is-loading { overflow: hidden; }

#loading {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  background: #1a656a;
  clip-path: inset(0 0 0 0);
  transition: clip-path 1s cubic-bezier(0.77, 0, 0.175, 1);
}
/* 終了時：下から上へ幕が上がる */
#loading.is-done { clip-path: inset(0 0 100% 0); }

/* ロゴ */
.loading__logo {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(16px);
  animation: loadingLogoIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}
.loading__logo img {
  display: block;
  width: 200px;
  height: auto;
}
@keyframes loadingLogoIn {
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

/* 進捗ライン */
.loading__bar {
  width: 120px;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
}
.loading__bar span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--loading-fg);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease-out;
}

/* 幕が上がる直前にロゴ・ラインが先に消える */
#loading.is-leaving .loading__logo,
#loading.is-leaving .loading__bar {
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* ローディング後にふわっと出す要素 */
.js-fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s ease, transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.is-loaded .js-fade { opacity: 1; transform: none; }
.is-loaded .js-fade:nth-of-type(2) { transition-delay: 0.2s; }

/* 2回目以降（同じタブ内）はローディングを出さない */
.no-loading #loading { display: none; }
.no-loading body.is-loading { overflow: auto; }
.no-loading .js-fade { opacity: 1; transform: none; transition: none; }

/* 動きを減らす設定のユーザー向け */
@media (prefers-reduced-motion: reduce) {
  .loading__logo { animation: none; opacity: 1; filter: none; transform: none; }
  #loading, .js-fade { transition: none; }
}

@media (max-width: 767px) {
  .loading__logo img { width: 160px; }
}