/* 初期状態（中央に配置） */
.top-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #686C89; /* ローディング背景 */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 9999;
  opacity: 1;
  transition: transform 2.7s ease, opacity 2.7s ease;
}

/* 右→左にフェードアウト */
.slide-fade-out {
  transform: translateX(-100vw); /* 右から左へスライド */
  opacity: 0; /* 同時にフェードアウト */
}

.top-progress-container {
    width: 300px;
    height: 14px;
    border-color: #D9D9D9;
    border-radius: 10px;
    border-width: 3px;
    border-style: solid;
    overflow: hidden;
}

.top-progress-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #B17790 );
    border-radius: 10px;
    transition: width 0.3s ease;
}
.fade-out {
  opacity: 0;
  transition: opacity 0.8s ease;
}

.top-content {
    display: none;
    color:black;
    font-size: 50px;
}
.top-show {
    display: block;
}