/* スライドアニメーションの基本スタイル */
.body-slide-enter {
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
  }
  
  .body-slide-enter-active {
    transform: translateX(0%);
  }
  
  .body-slide-exit {
    width: 100%;
    transition: transform 0.3s ease-in-out;
    transform: translateX(0%);
  }
  
  .body-slide-exit-active {
    transform: translateX(-100%);
  }
  

/* バックスライドアニメーションの基本スタイル */
.body-slideback-enter {
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
}

.body-slideback-enter-active {
  transform: translateX(0%);
}

.body-slideback-exit {
  width: 100%;
  transition: transform 0.3s ease-in-out;
  transform: translateX(0%);
}

.body-slideback-exit-active {
  transform: translateX(100%);
}


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

#main {
  opacity: 0; /* 初期状態では透明 */
  animation: none; /* JavaScriptからアニメーションを動的に適用 */
}