@charset "utf-8";

body {
	margin: 0;
	padding: 0;
	background: #1c1a0f;
	overflow-x: hidden;
}

a {
	transition: 1s;
}

img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}
.mvtk {
	padding: 10px 10% 0;
	display: flex;
	justify-content: center;
}
.mvtk a:hover {
	opacity: .7;
}

@media (768px <= width) {
	.mobile {
		display: none;
	}
}

/* PC用コンテナの初期状態（768px未満では非表示） */
.pc {
	display: none;
}

/* 768px以上のメディアクエリ */
@media (768px <= width) {
	.mobile {
		display: none;
	}
	
	/* PCレイアウト */
	.pc {
		display: flex;
		width: 100%;
	}
	.content {
		box-shadow: 0 5px 5px 5px rgba(0,0,0,.5);
	}
	
	.pc-left {
		width: 50%;
	}
	
	.pc-right {
		width: 50%;
		display: flex;
		flex-direction: column;
		padding: 2% 3%;
	}

	.pc-logo {
		margin: 25% auto 0;
		width: 70%;
	}
	.pc-credit {
		margin: auto auto 0;
		width: 100%;
	}
	.pc-publicdate {
		margin: 3% auto 0;
		width: 80%;
	}
	.mvtk {
		padding: 3% 3% 5%;
	}
}

/* =======================================================
   LOADING: スタイルとアニメーション
======================================================= */

/* ローディングコンテナ */
.loading {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background-color: #1c1a0f;
  opacity: 1;
  transition: opacity 0.6s ease;
}

/* フェードアウト時（JSから付与） */
.loading.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* ロゴコンテナ */
.loading_logo {
  position: relative;
  width: 100%;
  max-width: 300px; /* 実装するロゴの本来のサイズに合わせて適宜調整してください */
  padding: 0 20px;
  box-sizing: border-box;
}

/* 画像の重ね合わせ用ラッパー */
.loading_logo_inner {
  position: relative;
  display: block;
  width: 100%;
}

/* ベースロゴ（未完了状態を下敷きとして表示） */
.loading_logo_base {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 237.01 / 171.77; /* SVGのviewBoxに基づくアスペクト比を強制 */
  opacity: 0.2;
}

/* 塗りつぶし用ロゴ */
.loading_logo_fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: inset(0 100% 0 0);
  animation: logoFillAnimation 2.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* 左から右へクリップパスを解除するアニメーション */
@keyframes logoFillAnimation {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}