diff --git a/packages/frontend/src/components/global/PageWithAnimBg.vue b/packages/frontend/src/components/global/PageWithAnimBg.vue
index a00b196a04..7106ae20cd 100644
--- a/packages/frontend/src/components/global/PageWithAnimBg.vue
+++ b/packages/frontend/src/components/global/PageWithAnimBg.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <div>
 	<MkAnimBg style="position: absolute;"/>
-	<div class="_pageScrollable" style="position: absolute; top: 0; width: 100%; height: 100%;">
+	<div class="_pageScrollable" :class="$style.body">
 		<slot></slot>
 	</div>
 </div>
@@ -17,5 +17,13 @@ import MkAnimBg from '@/components/MkAnimBg.vue';
 </script>
 
 <style lang="scss" module>
+.body {
+	position: absolute;
+	top: 0;
+	width: 100%;
+	height: 100%;
 
+	// _pageScrollable はパフォーマンス上の理由で背景色が設定されているため
+	background: transparent !important;
+}
 </style>