@charset "utf-8";

/* =========================
   ローディング（完全安定）
========================= */

#loading {
  position: fixed;
  inset: 0;
  background-color: #FCF7EE;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;

  /* ▼ opacity のみで制御（visibility遅延事故防止） */
  opacity: 1;
  pointer-events: auto;
  transition: opacity 1.2s ease;
}

#loading.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* 念のため visibility は JS 完了後に使う */
#loading.is-hidden-final {
  visibility: hidden;
}

/* =========================
   ローディング中身
========================= */

.loading_inner {
  text-align: right;
}

.loading_inner img {
  display: block;
}

/* =========================
   ロゴ（100%発火保証）
========================= */

/* ▼ 初期状態：変化前を明確に確定 */
.loading-logo {
  width: 240px;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  will-change: opacity, clip-path;
}

/* ▼ JSで付与された瞬間だけ animation を持つ */
.loading-logo.is-play {
  animation-name: logoReveal;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(.22,.61,.36,1);
  animation-fill-mode: forwards;
}

@keyframes logoReveal {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

/* =========================
   SVG一筆書き
========================= */

#load_svg {
  width: 100px;
  opacity: 0;
  will-change: opacity;
}

#load_svg.is-show {
  opacity: 1;
}

.st0 {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3.5px;
}

.st1 {
  fill: #231815;
}

/* =========================
   フェードイン
========================= */

.fade-in {
  opacity: 0;
}

.fade-in.is-show {
  animation: fadeInSoft 1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes fadeInSoft {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* =========================
   スライドフェード（左）
========================= */

.slide-fade {
  opacity: 0;
  transform: translateX(-48px);
}

.slide-fade.is-show {
  animation: slideFadeIn 1.4s cubic-bezier(0.25, 1, 0.3, 1) forwards;
}

@keyframes slideFadeIn {
  from {
    opacity: 0;
    transform: translateX(-48px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* =========================
   下からスライドアップ
========================= */

.concept-up {
  opacity: 0;
  transform: translateY(20px);
}

.concept-up.is-show {
  animation: slideUpFade 1.2s cubic-bezier(.22,.61,.36,1) forwards;
}

.slide-up .menu_card {
  opacity: 0;
  transform: translateY(48px);
}

.slide-up.is-show .menu_card {
  animation-name: slideUpFade;
  animation-duration: 1.4s;
  animation-timing-function: cubic-bezier(0.25, 1, 0.3, 1);
  animation-fill-mode: forwards;
}


/* ディレイ */
.delay-1 { animation-delay: 0s; }
.delay-2 { animation-delay: 0.3s; }
.delay-3 { animation-delay: 0.6s; }

@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(48px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================
   フェードアップ（clip-path）
========================= */

.fade-up {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  will-change: opacity, clip-path;
}

.fade-up.is-show {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transition:
    clip-path 1.8s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 1.6s ease;
}