/* スクロールダウンボタンのラッパー */
.scroll-down-button-wrapper {
	position: absolute; /* ヒーローエリアまたは関連する親要素に position: relative; が必要 */
	bottom: 50px; /* ヒーローエリアの下からの位置調整 */
	left: 50%;
	transform: translateX(-50%); /* 中央寄せ */
	z-index: 9999; /* 他のコンテンツの上に表示 */
	pointer-events: auto; /* クリック可能にする */
}

/* スクロールダウンボタン本体 */
#scrollDownButton {
	background: rgba(0, 0, 0, 0.4); /* 半透明の背景 */
	/* color: #fff;  アイコンフォントを使わないので、この色は不要になるか、ボタン内のテキスト色になる */
	border: 2px solid #fff;
	border-radius: 50%; /* 円形にする */
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center; /* 子要素（三角形）を垂直中央に */
	justify-content: center; /* 子要素（三角形）を水平中央に */
	/* font-size: 1.5rem; /* アイコンフォントを使わないので不要 */
	cursor: pointer;
	outline: none;
	transition: background-color 0.3s ease, transform 0.3s ease; /* ホバーアニメーション */
	opacity: 0; /* 最初は非表示にしてJSで表示 */
	animation: bounce 2s infinite; /* バウンスアニメーションを適用 */
	animation-delay: 1s; /* ロード後少ししてからアニメーションを開始 */
}

#scrollDownButton:hover {
	background-color: rgba(0, 0, 0, 0.6);
	transform: scale(1.1); /* ホバーで少し拡大 */
}

/* バウンスアニメーションの定義 */
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-10px);
	}
	60% {
		transform: translateY(-5px);
	}
}

/* Font Awesomeアイコンのスタイルは不要になるので削除します */
/* #scrollDownButton .fas {
	// 必要であればアイコンの微調整
} */

/* ★★★ CSSだけで作る下向き三角形のスタイル ★★★ */
.arrow-down {
	width: 0; /* 幅を0に */
	height: 0; /* 高さを0に */
	border-left: 8px solid transparent;   /* 左の透明な辺 */
	border-right: 8px solid transparent;  /* 右の透明な辺 */
	border-top: 8px solid #fff;          /* 下向きの三角形の「色と大きさ」 */
	border-bottom: 0px;                  /* 下の辺は不要 */
	transform: translateY(2px);          /* ボタン内で中央に微調整 */
	display: inline-block;               /* flexアイテムとして正しく表示されるように */
}


/* 小画面での調整 */
@media (max-width: 768px) {
	.scroll-down-button-wrapper {
		bottom: 10px;
	}
	#scrollDownButton {
		width: 40px;
		height: 40px;
		/* font-size: 1.2rem; // アイコンフォントを使わないので不要 */
	}
	/* ★★★ 小画面での三角形サイズの調整 ★★★ */
	.arrow-down {
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-top: 6px solid #fff;
	}
}