@charset "utf-8";
/* CSS Document *//* ===============================
   初期状態
================================ */

/* mainはデフォルト非表示（JSで制御） */
#main-content {
  opacity: 0;
  transition: opacity 1s ease;
}

/* フェードイン用 */
#main-content.show {
  opacity: 1;
}

/* ===============================
   オープニング全体
================================ */

#opening {
	position: fixed;
	inset: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	overflow: hidden;
	transition: opacity 1s ease, filter 1s ease;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-image: url(../img/op_back.webp);
}

/* フェードアウト */
#opening.fade-out {
  opacity: 0;
  filter: blur(6px);
}

/* ===============================
   中央コンテンツ
================================ */

.opening-inner {
  text-align: center;
}
@media screen and (max-width:476px){
.opening-inner {
width: 90%;
margin: auto;
}
}

/* ===============================
   ロゴ演出
================================ */

.catch_m {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 1s ease, transform 1.2s ease;
  will-change: opacity, transform;
}

.catch_m.show {
  opacity: 1;
  transform: scale(1);
}

/* ===============================
   キャッチ演出
================================ */

.catch {
  margin-top: 30px;
  opacity: 0;
  filter: blur(10px);
  transition: opacity 1s ease, filter 1s ease;
  will-change: opacity, filter;
}

.catch.show {
  opacity: 1;
  filter: blur(0);
}

/* ===============================
   スクロールロック補助
================================ */

body {
  margin: 0;
}

/* JSで直接 overflow 制御するため
   lockクラスは不要（安全設計） */