/* ============================================================
   COMING SOON PAGE - CLEAN VERSION
   ============================================================ */

/* 1. レイアウトのリセットと中央配置
   #contentなどの親要素が持つ「左寄りの呪い」を解きます */
#content, 
#main-content {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  display: flex !important;
  justify-content: center !important;
}

.coming-soon-main {
  width: 100%;
  max-width: 1000px;
  /* ヘッダーとの距離をpadding-topだけで調整（スペーサーdivを不要に） */
  padding: 180px 20px 100px; 
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-family: "Klee One", cursive;
  box-sizing: border-box;
}

/* 2. タイトル（h1）
   既存のstyle.cssの装飾をリセットしつつ中央へ */
.coming-soon-main h1 {
  font-size: 2.5rem;
  color: #522e1d;
  line-height: 1.4;
  width: 100%;
}

/* 3. 画像（トコヌン）
   PC・スマホ両方で最適なサイズ感を維持 */
.coming-soon-main img {
  max-width: 600px;
  width: 100%;
  height: auto;
}

/* 4. レスポンシブ調整（スマホ） */
@media screen and (max-width: 600px) {
  .coming-soon-main {
    padding-top: 130px; /* スマホでは少し上に詰める */
  }
  .coming-soon-main h1 {
    font-size: 1.6rem;
    /* margin-bottom: 25px; */
  }
}

/* ============================================================
   ANIMATION & VISIBILITY OVERRIDE
   ローディングやアニメーション待機による「消える」問題を強制解決
   ============================================================ */
#global-container { 
  opacity: 1 !important; 
  transition: none !important; 
}

.pace { display: none !important; }

/* 共通スタイルの「透明待機」を解除 */
.appear .item, 
.animate-title, 
.tween-animate-title span {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}