@charset "utf-8";
/* CSS Document */

/* ==========================================================================
   1. 通常時のがたつき防止 ＆ スクロールロックベース設定
   ========================================================================== */
html, body {
	margin: 0;
	/* 縦スクロールバーの領域（溝）をあらかじめ固定で確保し、がたつきを100%防ぎます */
	scrollbar-gutter: stable;
	font-family: sans-serif;
}

/* ローディング中のみ一時的にスクロールを強制ロックするためのクラス（JSで切り替え） */
body.is-loading {
	overflow-y: hidden !important;
}

/* KV */
#kv {
	position: fixed;
	inset: 0;
	opacity: 0;
	z-index: 1;
	overflow: hidden;
}
#kv img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

/* Loading */
#loading {
	position: fixed;
	inset: 0;
	overflow: hidden;
	z-index: 99999; /* メニュー(nav)等に突き抜けられないように最強の値に設定 */
	
	/* 🛠️ 修正：画像読み込み待ちの一瞬の間も、画面全体を真っ黒なベタ塗りで完璧に埋めます */
	background: #000000; 
	
	/* 演出終了後にふわっと消えるためのフェードアウト設定 */
	transition: opacity 1.0s ease-in-out;
}

/* JSでこのクラスがついたら透明にしてクリックを通す */
#loading.fade-out {
	opacity: 0;
	pointer-events: none;
}

/* Logo */
#logo {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 20;
	animation: logoAppear .8s ease forwards;
}
#logo img {
	width: min(70vw, 1600px);
	height: auto;
	display: block;
	filter: drop-shadow(0 0 10px rgba(255,255,255,.25)) drop-shadow(0 0 40px rgba(0,168,169,.35));
}
@keyframes logoAppear {
	from { opacity:0; transform: translate(-50%, -50%) scale(.7); }
	to { opacity:1; transform: translate(-50%, -50%) scale(1); }
}

/* 発光 */
.glow { animation: glow .5s ease forwards; }
@keyframes glow {
	0% { text-shadow:none; }
	100% { text-shadow: 0 0 10px #fff, 0 0 30px #00a8a9, 0 0 60px #00a8a9; }
}

/* 振動 */
.shake { animation: shake .3s linear infinite; }
@keyframes shake {
	0% { transform: translate(-50%, -50%); }
	25% { transform: translate(-49%, -50%); }
	50% { transform: translate(-51%, -50%); }
	75% { transform: translate(-49%, -50%); }
	100% { transform: translate(-50%, -50%); }
}

/* particle */
.particle { position: absolute; left: 50%; top: 50%; opacity: 0; }
.triangle { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 20px solid #00a8a9; }
.square { width: 12px; height: 12px; background: #fff; }

/* ==========================================================================
   2. 光の揺らぎ（指示通り外側へずらした設定）
   ========================================================================== */
main img {
  width: 100%;
  height: auto;
  display: block;
}
main {
  position: relative; 
  width: 100%;
  display: block;
  overflow: hidden; /* 外側にはみ出させた光を綺麗にカット */
}			
.light-effect {
  position: absolute; 
  z-index: 2; 
  width: 25%; 
  aspect-ratio: 377 / 500; 
  background: url('entry/imgs/prism-light.png') no-repeat center / contain;
  mix-blend-mode: screen;
  pointer-events: none; 
  transform-origin: center center;
}

/* 【右下】のエフェクト */
.light-pos-rb {
  bottom: 5%; right: 5%;
  animation: fadeLuminescent1 16s ease-in-out infinite, floatAndRotate_RB1 6s ease-in-out infinite alternate;
}
.light-pos-rb.layer2 {
  animation: fadeLuminescent2 19s ease-in-out infinite, floatAndRotate_RB2 8.5s ease-in-out infinite alternate;
}

/* 【上部】のエフェクト（右上端へ） */
.light-pos-top {
  top: 3%; right: 5%;
  animation: fadeLuminescent1 22s ease-in-out infinite;
  animation-delay: -3s; 
}
.light-pos-top.layer2 {
  animation: fadeLuminescent2 17s ease-in-out infinite, floatAndRotate_RB1 9s ease-in-out infinite alternate;
  animation-delay: -1s;
}

/* 【左下】のエフェクト（左端の枠外ギリギリへ） */
.light-pos-lb {
  bottom: 10%; left: -5%;
  animation: fadeLuminescent2 25s ease-in-out infinite, floatAndRotate_RB2 7.5s ease-in-out infinite alternate;
  animation-delay: -5s;
}
.light-pos-lb.layer2 {
  animation: fadeLuminescent1 15s ease-in-out infinite, floatAndRotate_RB1 6.5s ease-in-out infinite alternate;
  animation-delay: -2s;
}

/* 光の透過・揺らぎアニメーション定義 */
@keyframes fadeLuminescent1 { 0% { opacity: 0; } 15% { opacity: 0.8; } 30% { opacity: 0.1; } 45% { opacity: 0.8; } 60% { opacity: 0.2; } 75% { opacity: 0.5; } 90%, 100% { opacity: 0; } }
@keyframes fadeLuminescent2 { 0% { opacity: 0; } 20% { opacity: 0.1; } 40% { opacity: 0.7; } 60% { opacity: 0.0; } 80% { opacity: 0.6; } 100% { opacity: 0; } }
@keyframes floatAndRotate_RB1 { 0% { transform: translate(0, 0) rotate(0deg) scale(1.0); } 50% { transform: translate(-2vw, -1.5vw) rotate(5deg) scale(1.06); } 100% { transform: translate(1vw, 1vw) rotate(-3deg) scale(0.96); } }
@keyframes floatAndRotate_RB2 { 0% { transform: translate(0, 0) rotate(135deg) scale(1.0); } 50% { transform: translate(2vw, -2.5vw) rotate(128deg) scale(1.1); } 100% { transform: translate(-1.5vw, 1vw) rotate(142deg) scale(0.94); } }

/* ==========================================================================
   3. スローガン（break / through）のアニメーション設定
   ========================================================================== */
.slogan-image {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%; 
  z-index: 3; /* 光よりも手前に表示 */
  pointer-events: none;
  opacity: 0;   
}

/* 1. 「break」の画像（左から滑り込んで完全固定） */
.slogan-break {
  background: url('entry/imgs/break.png') no-repeat center / contain;
  animation: sloganInFromLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  
  /* 🛠️ 修正：KVの2秒間のフェードインに合わせ、最も文字が綺麗に見える「3.1秒後」に滑り込ませます */
  animation-delay: 3.1s; 
}

/* 2. 「through」の画像（左から滑り込んで完全固定） */
.slogan-through {
  background: url('entry/imgs/through.png') no-repeat center / contain;
  animation: sloganInFromLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  
  /* 🛠️ 修正：breakの着地を待って、時間差（3.5秒後）に自動追従させます */
  animation-delay: 3.5s; 
}

@keyframes sloganInFromLeft {
  0% { transform: translate(-100vw, 0) rotate(-5deg) scale(1.1); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translate(0, 0) rotate(0deg) scale(1.0); opacity: 1; }
}

/* 長いコンテンツが入るコンテナ */
.my-long-website {
  width: 100%;
  padding: 40px 20px;
  box-sizing: border-box;
}