@charset "UTF-8";

html,
body {
  height: 100%;
}

/* 読み込み中はスクロール禁止 */
body.is-loading {
  overflow: hidden;
}

/* ローディング全体の覆い */
.loading-wrap {
  position: fixed;
  inset: 0;                /* top:0; right:0; bottom:0; left:0; と同じ */
  z-index: 9999;
  background: #c9b797;     /* 背景色はお好みで */
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.loading-wrap h2 {
  width: min(calc(350/750*100%),350px);
}
.loading-wrap p {
  width: min(calc(668/750*100%),668px);
}

/* 読み込み完了時に付与してフェードアウト */
.loading-wrap.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ローディング内の並び自体は前回のものを流用 */
.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  gap:min(calc(50/750*100vw), 50px); 
  padding: 40px 0;
  margin: 5% auto;
}

/* ベースのコンテナ（位置基準） */
.loading-dot {
  display: inline-block;
  position: relative; /* 擬似要素の基準点 */
  width: min(calc(24/750*100vw), 24px);  /* 基本はドットの幅 */
  height: min(calc(24/750*100vw), 24px); /* 基本はドットの高さ */
  margin: 0 ; /* 横並びの間隔確保 */
  vertical-align: middle;
}

/* 共通設定：擬似要素で画像を配置 */
.loading-dot::before,
.loading-dot::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 中央配置 */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* ★バウンスさせるイージング */
}

/* ▼ ドット（::before）の設定 */
.loading-dot::before {
  width: 100%;
  height: 100%;
  background-image: url("loading-icon.png");
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ▼ ティーカップ（::after）の設定 */
.loading-dot::after {
  /* カップのサイズ定義 */
  width: min(calc(52/750*100vw), 52px);
  height: min(calc(54/750*100vw), 54px);
  background-image: url("loading-teaicon.png");
  
  /* 初期状態は隠しておく */
  opacity: 0;
  transform: translate(-50%, -50%) scale(0); /* 小さくしておく */
}

/* ▼ アクティブ時：ドットを消してカップを出す */
.loading-dot.is-active::before {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0); /* ドットは縮んで消える */
}

.loading-dot.is-active::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1); /* カップは拡大して現れる */
  margin-top: -35%;
}