/* ローディング画面（トップのみ・タレント肖像）
   納品元: スカイシーズ 2026-09-04（readme の 4. スケールイン版）。WP テーマ向けの調整点は各所のコメント参照 */
#loading-screen {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  position: fixed;
  left: 0;
  top: 0;
  background: #fff no-repeat center center / cover; /* 調整: 背景画像は表示する回だけ loading.js がインラインで指定する（CSS に URL を書くと LandingHub が先読みして再訪でも取得する） */
  z-index: 2000000; /* 調整: 既存の固定ポップアップ（LandingHub __nm_popup=1000000）より前面に置く */
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}

html.is-loading,
html.is-loading body {
  overflow: hidden;
}

/* 調整: 表示しない回（2回目以降）は層ごと外し、CSS の背景画像も取得させない */
html.is-loading-skip #loading-screen {
  display: none;
}

.site-preview {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s ease;
}

html.is-loading .site-preview {
  opacity: 0;
  visibility: hidden;
}

html.is-loading #loading-screen {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

#loading-screen .loading-screen-visual,
#loading-screen .loading-screen-visual picture {
  display: block;
  width: 100%;
  height: 100%;
}

#loading-screen .loading-screen-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

#loading-screen .loading-screen-logo {
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  z-index: 2;
}

@media screen and (max-width: 767px) {
  #loading-screen {
    background: #fff; /* 調整: 納品は none（透過）。画像読み込み前に本文が透けないよう白にする */
  }
  #loading-screen .loading-screen-visual img {
    width: 100%;
    height: 100%; /* 調整: 納品は 100vh。親が 100dvh なのでアドレスバー開閉で切れ方が変わらないよう親に合わせる */
    object-fit: cover;
    object-position: center top;
  }
}

/* スケールイン版（納品 readme 4. のインライン style をこのファイルに統合） */
#loading-screen .loading-screen-visual img {
  opacity: 0;
  transform: scale(1);
  transform-origin: center bottom;
  transition: opacity 1.6s ease, transform 2s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

html.is-loading:not(.is-loading-active) #loading-screen .loading-screen-visual img {
  transform: scale(1.2);
}

html.is-loading.is-loading-active #loading-screen .loading-screen-visual img {
  opacity: 1;
  transform: scale(1);
}

/* 調整: 動きを減らす設定の環境では拡大縮小を止め、フェードだけにする */
@media (prefers-reduced-motion: reduce) {
  #loading-screen .loading-screen-visual img {
    transition: opacity 1.6s ease;
  }
  html.is-loading:not(.is-loading-active) #loading-screen .loading-screen-visual img {
    transform: scale(1);
  }
}