body
{
	background-color:rgb(110,110,110);
	background-image:url('../img/defaultBackground.png');
	background-size:100% 100%;
	background-attachment: fixed;
	overflow: hidden;
}
#container
{
	font-size:17px;
	font-family: 'Nunito', sans-serif;
	margin: 30px auto;
	width:1280px;
	height:800px;
	position:relative;
	overflow:hidden;
	background:black;
}
h1
{
	font-size:48px;
	font-family: 'Poiret One', sans-serif;
	padding-top: 30px;
	text-align:center;
	color:white;
	text-shadow:0px 0px 50px pink;
}
#sceneContent
{
	position:absolute;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	transition: opacity 0.5s ease-in-out;
}

#sceneContent.fade-in {
	opacity: 0;
	animation: fadeIn 1s ease-in-out forwards;
}

#sceneContent.fade-out {
	opacity: 1;
	animation: fadeOut 1s ease-in-out forwards;
}
.character
{
	position:absolute;
	width:auto;
	height:auto;
	left:50%;
	transform:translateX(-50%);
	bottom:0px;
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center bottom;
}

/* キャラクター位置のカスタマイズ用クラス */
.character.pos-left {
	left:25%;
}

.character.pos-center {
	left:50%;
}

.character.pos-right {
	left:75%;
}

.character.pos-custom {
	/* カスタム位置はスタイル属性で指定 */
}

/* 装飾用透明オーバーレイ */
#decorationOverlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000; /* 他の要素の上に表示 */
	pointer-events: none; /* クリックを無効化 */
}

#decorationImage {
	width: 100%;
	height: 100%;
	object-fit: cover; /* 画面全体をカバー */
	opacity: 0.3; /* 透明度調整（0.1-1.0で調整可能） */
	pointer-events: none; /* クリックを無効化 */
}