@charset "UTF-8";

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

/* --- 全画面ローディング背景 --- */
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #F4F3F0;
  /* 背景色（デザインに合わせて変更してください） */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  /* 最前面に表示 */
  /* ▼ 画面がじわーっと消えていくスピード（例: 0.8秒かけて消える） */
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s ease;
}

/* ローディング完了後の非表示スタイル */
.loading-screen.is-loaded {
  opacity: 0;
  visibility: hidden;
}

/* --- ロゴの配置コンテナ --- */
.loading-logo-container {
  position: relative;
  display: flex;
  align-items: center;
  /* アイコンが収まる「O」のスペースを左側に確保 */
  padding-left: 85px;
}

/* --- 右側のテキスト「RIGINAL CAN」--- */
.loading-logo-text {
  display: flex;
  align-items: center;
}

.loading-logo-text img {
  height: 75px;
  width: auto;
  display: block;
}

/* --- 転がる丸アイコン（O） --- */
.rolling-icon {
  position: absolute;
  left: 0;
  top: 50%;
  width: 75px;
  height: 75px;
  margin-top: -37.5px;
  /* 高さの半分引いて垂直中央揃え */

  /* 初期位置：画面の左外側＆回転 */
  transform: translateX(-100vw) rotate(-720deg);
  opacity: 0;

  /* アニメーション設定 (1.8秒かけて転がり着地) */
  animation: rollIn 2.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.rolling-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* ===================================================
   画面幅 1000px 以下の指定
   =================================================== */
@media screen and (max-width: 1000px) {
  .loading-logo-container {
    /* アイコン(60px) + 隙間(8px) */
    padding-left: 68px;
  }

  .loading-logo-text img {
    height: 60px;
    /* 少し小さく */
  }

  .rolling-icon {
    width: 60px;
    height: 60px;
    margin-top: -30px;
    /* 60pxの半分 */
  }
}


/* ===================================================
   画面幅 600px 以下の指定（スマホ向け）
   =================================================== */
@media screen and (max-width: 600px) {
  .loading-logo-container {
    /* アイコン(44px) + 隙間(6px) */
    padding-left: 50px;
  }

  .loading-logo-text img {
    height: 44px;
    /* スマホ用にコンパクトに */
  }

  .rolling-icon {
    width: 44px;
    height: 44px;
    margin-top: -22px;
    /* 44pxの半分 */
  }
}


/* --- 転がり・着地（バウンド）キーフレーム --- */
@keyframes rollIn {
  0% {
    transform: translateX(-80vw) rotate(-720deg);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  85% {
    /* 「O」の定位置に到着 */
    transform: translateX(0) rotate(0deg);
  }

  92% {
    /* 着地時に少し膨らんでバウンド感を出す */
    transform: translateX(0) scale(1.15);
  }

  100% {
    /* ぴったり収まる */
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

/* レスポンシブ対応（スマホサイズ） */
@media screen and (max-width: 768px) {
  .loading-logo-container {
    padding-left: 55px;
  }

  .loading-logo-text {
    font-size: 2rem;
  }

  .rolling-icon {
    width: 48px;
    height: 48px;
    margin-top: -24px;
  }
}