#fade {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover; /* 背景画像をカバーする */
	z-index: -1; /* 背景として表示 */
	transition: opacity 1s ease-in-out; /* フェード効果のトランジション */
	opacity: 1; /* 初期の不透明度 */
}

.esperanto {
  font-family: "Winky Rough", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.hare {
background:rgba(230, 230, 255, 0.9);
border-radius:20px;
}

.maayu {
background:rgba(255, 230, 230, 0.9);
border-radius:20px;
}

.kairi {
background:rgba(230, 255, 230, 0.9);
border-radius:20px;
}

.sakuya {
background:rgba(255, 255, 230, 0.9);
border-radius:20px;
}

.nakamichi {
background:rgba(240, 221, 240, 0.9);
border-radius:20px;
}

.enou {
background:rgba(255, 230, 221, 0.9);
border-radius:20px;
}

.shioma {
background:rgba(221, 240, 255, 0.9);
border-radius:20px;
}

.touri {
background:rgba(224, 224, 240, 0.9);
border-radius:20px;
}

.eigou {
background:rgba(240, 240, 240, 0.9);
border-radius:20px;
}

.yaene {
background:rgba(133, 255, 182, 0.9);
border-radius:20px;
}

.hoka {
background:rgba(255, 255, 255, 0.9);
border-radius:20px;
}

.mobius {
background:rgba(230, 230, 255, 0.8);
border-radius:20px;
}

.image-container {
	position: relative;
	height1: 100vh; /* コンテナの高さを100%に設定 */
	overflow1: hidden; /* 画像がコンテナ外に出ないようにする */
}

.slideinhare {
	position: absolute;
	bottom: 0; /* ブラウザの下端に配置 */
	right: 0%; /* 右端に配置 */
	width: 50vw; /* 画像の幅をブラウザの幅の50%に設定 */
	max-width: 400px; /* 最大幅を設定 */
	animation: slideIn 5s forwards; /* アニメーションを適用 */
}


/* メディアクエリによる背景画像の切り替え */
@media (max-width: 576px) {
	#fade {
		background-image: url('./images/bg/mobile/0.jpg'); /* モバイル用の初期画像 */
	}
}
@media (min-width: 577px) and (max-width: 1200px) {
	#fade {
		background-image: url('./images/bg/tablet/0.jpg'); /* タブレット用の初期画像 */
	}
}
@media (min-width: 1201px) {
	#fade {
		background-image: url('./images/bg/desktop/0.jpg'); /* デスクトップ用の初期画像 */
	}
@keyframes slideIn {
	from {
		right: -10%; /* スライドイン開始位置 */
		opacity: 0; /* 初期透明度 */
	}
	to {
		right: 5%; /* 中央に配置 */
		transform: translateX(5%); /* 画像を中央に調整 */
		opacity: 1; /* 最終透明度 */
	}
}

}