@charset "UTF-8";
/*
    Template: swell
    Theme Name: Value Insurance Solutions, Inc.
    Theme URI: https://swell-theme.com/
    Description: Value Insurance Solutions, Inc.
    Version: 1.0.0
    Author:
    Author URI:

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ローディング画面表示 */
.loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* ローディング中にクリックを無効化 */
  animation: overlayFadeOut 2.5s 2s forwards;
}

.loader-overlay img {
  width: 360px; /* PCのロゴ画像のサイズ */
  opacity: 0;
  transform: scale(0.9); /* 初期状態は少し小さく */
  animation: logoFadeZoom 1.5s ease-out forwards, logoFadeOut 1.5s 1.5s ease-out forwards; /* ロゴのフェードインとフェードアウトアニメーション */
}

@media screen and (max-width: 959px) {
  .loader-overlay img {
    width: 180px; /* スマホのロゴ画像のサイズ */
  }
}

/* ローディング画面全体のフェードアウトアニメーション */
@keyframes overlayFadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

/* ロゴのズームインとフェードインのアニメーション */
@keyframes logoFadeZoom {
  0% {
    opacity: 0;
    transform: scale(0.9); /* 少し小さい状態から始める */
  }
  100% {
    opacity: 1;
    transform: scale(1); /* 徐々にフェードインしながら元のサイズに */
  }
}

/* ロゴがフェードアウトのアニメーション */
@keyframes logoFadeOut {
  0% {
    opacity: 1;
    transform: scale(1); /* フェードアウト前の状態を維持 */
  }
  100% {
    opacity: 0;
    transform: scale(1); /* 少し大きくしてふわっと消える */
  }
}