diff --git a/src/app/(frontend)/styles.css b/src/app/(frontend)/styles.css
index cbed7a8..24d5f79 100644
--- a/src/app/(frontend)/styles.css
+++ b/src/app/(frontend)/styles.css
@@ -25,6 +25,7 @@
   --color-font-main: #f6f8ff;
   --color-font-gray: #8b8982;
   --color-accent: #ff5bef;
+  --color-shadow: #111d53;
 
   --font-kaisotai: var(--font-kaisotai-next), sans-serif;
   --font-sans:
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
index 4614643..8979d0c 100644
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -72,7 +72,7 @@ export default function Footer() {
           <SnsIconLinks />
         </section>
 
-        <section className="flex w-full max-w-68 flex-col gap-xs text-text">
+        <section className="flex w-full max-w-68 flex-col gap-xs text-textb">
           <div className="flex flex-col gap-xs">
             <p className="text-black">アンケート</p>
             <a
@@ -119,7 +119,7 @@ export default function Footer() {
           </div>
         </section>
 
-        <p className="text-center text-text">技大祭実行委員会</p>
+        <p className="text-center text-textb">技大祭実行委員会</p>
       </div>
       {/* PCレイアウト */}
       <div className="w-full">
@@ -156,7 +156,7 @@ export default function Footer() {
               </div>
             </div>
             <div className="items-top flex">
-              <div className="flex flex-col pl-xs text-text leading-4.25">
+              <div className="flex flex-col pl-xs text-textb leading-4.25">
                 <p className="flex items-center gap-1.5">
                   <MessageCircleMore
                     className="size-4"
diff --git a/src/components/ui/ImportantFrame.tsx b/src/components/ui/ImportantFrame.tsx
index cf472f7..507958b 100644
--- a/src/components/ui/ImportantFrame.tsx
+++ b/src/components/ui/ImportantFrame.tsx
@@ -7,12 +7,10 @@ type ImportantFrameProps = {
 
 export default function ImportantFrame({ title, children }: ImportantFrameProps) {
   return (
-    <div className="w-full border-y-[1.4px] border-main bg-base-dark py-l shadow-[0px_2px_6px_0px_var(--color-base)] md:px-pl md:py-3l">
+    <div className="w-full border-y-[1.4px] border-main bg-base-dark py-l shadow-[0px_2px_6px_0px] shadow-shadow md:px-pl md:py-3l">
       <div className="mx-auto flex w-full max-w-260 flex-col gap-0.5 px-3l md:px-0">
-        <h3 className="font-sans text-title-small leading-7.25 text-accent md:text-Ptitle-small md:leading-8">
-          {title}
-        </h3>
-        <div className="font-sans text-text-large text-white md:text-Ptext-large">{children}</div>
+        <h3 className="font-sans text-button text-accent md:text-Ptitle-small">{title}</h3>
+        <div className="font-sans text-textb text-white md:text-Ptext-large">{children}</div>
       </div>
     </div>
   );
diff --git a/src/components/ui/NewsItem.tsx b/src/components/ui/NewsItem.tsx
index 8ad5478..5bb41eb 100644
--- a/src/components/ui/NewsItem.tsx
+++ b/src/components/ui/NewsItem.tsx
@@ -8,7 +8,7 @@ type NewsItemProps = {
 
 export default function NewsItem({ date, dateTime, title, content, important }: NewsItemProps) {
   return (
-    <li className="flex flex-col gap-ss border-b border-font-main px-ss pb-ss text-text text-font-main md:text-Ptext">
+    <li className="flex flex-col border-b border-font-main px-ss pb-ss text-text text-font-main md:text-Ptext">
       <div className="flex items-center gap-xs">
         <time dateTime={dateTime} className="whitespace-nowrap">
           {date}
@@ -19,10 +19,10 @@ export default function NewsItem({ date, dateTime, title, content, important }:
           </span>
         )}
       </div>
-      <div className="-ml-[0.5em] text-button font-bold text-font-main before:content-['［_'] after:content-['_］'] md:text-Pbutton">
+      <div className="mt-1 -ml-[0.5em] text-button font-bold text-font-main before:content-['［_'] after:content-['_］'] md:text-Pbutton">
         {title}
       </div>
-      <p className="text-justify whitespace-pre-wrap">{content}</p>
+      <p className="mt-ss text-justify whitespace-pre-wrap">{content}</p>
     </li>
   );
 }
diff --git a/src/modules/top/TopPageView.tsx b/src/modules/top/TopPageView.tsx
index a00e12a..bf0fad4 100644
--- a/src/modules/top/TopPageView.tsx
+++ b/src/modules/top/TopPageView.tsx
@@ -102,7 +102,7 @@ function NewsSection({ newsItems }: { newsItems: Awaited<ReturnType<typeof getLa
       <section className="w-full md:bg-base-dark md:px-pl md:py-3l">
         <div className="mx-auto flex w-full max-w-105 flex-col items-center gap-m md:max-w-190 md:items-start">
           <div className="flex w-full flex-col items-end gap-m md:w-full md:max-w-none md:items-start md:gap-l">
-            <div className="w-full bg-base-dark px-ll py-m md:bg-transparent md:px-ss md:py-0">
+            <div className="w-full bg-base-dark px-ll py-l md:bg-transparent md:px-ss md:py-0">
               {newsItems.length > 0 ? (
                 <ul className="flex flex-col gap-m md:gap-l">
                   {newsItems.map((news) => (
@@ -158,7 +158,7 @@ async function TopPageContent() {
             alt=""
             width={220}
             height={151}
-            className="h-auto w-full md:hidden"
+            className="h-auto w-full opacity-80 md:hidden"
           />
           <Image
             src="/image/top/PTopBack1-1.svg"
@@ -177,7 +177,7 @@ async function TopPageContent() {
             alt=""
             width={105}
             height={170}
-            className="h-auto w-full md:hidden"
+            className="h-auto w-full opacity-80 md:hidden"
           />
           <Image
             src="/image/top/PTopBack1-2.svg"
@@ -194,7 +194,7 @@ async function TopPageContent() {
             alt=""
             width={198}
             height={215}
-            className="h-auto w-full md:hidden"
+            className="h-auto w-full opacity-80 md:hidden"
           />
           <Image
             src="/image/top/PTopBack2.svg"
@@ -236,7 +236,7 @@ function TopPageSkeleton() {
             alt=""
             width={105}
             height={170}
-            className="h-auto w-full md:hidden"
+            className="h-auto w-full opacity-80 md:hidden"
           />
           <Image
             src="/image/top/PTopBack1-2.svg"
@@ -253,7 +253,7 @@ function TopPageSkeleton() {
             alt=""
             width={198}
             height={215}
-            className="h-auto w-full md:hidden"
+            className="h-auto w-full opacity-80 md:hidden"
           />
           <Image
             src="/image/top/PTopBack2.svg"
@@ -272,7 +272,7 @@ function TopPageSkeleton() {
         <section className="w-full md:bg-base-dark md:px-pl md:py-3l">
           <div className="mx-auto flex w-full max-w-105 flex-col items-center gap-m md:max-w-190 md:items-start">
             <div className="flex w-full flex-col items-end gap-m md:w-full md:max-w-none md:items-start md:gap-l">
-              <div className="w-full bg-base-dark px-ll py-m md:bg-transparent md:px-ss md:py-0">
+              <div className="w-full bg-base-dark px-ll py-l md:bg-transparent md:px-ss md:py-0">
                 <ul className="flex flex-col gap-m md:gap-l">
                   <NewsItemSkeleton key="news-skeleton-0" skeletonClassName="bg-base" />
                   <NewsItemSkeleton key="news-skeleton-1" skeletonClassName="bg-base" />
@@ -306,7 +306,7 @@ export default function TopPageView() {
             alt=""
             width={185}
             height={70}
-            className="h-auto w-full md:hidden"
+            className="h-auto w-full opacity-80 md:hidden"
           />
           <Image
             src="/image/top/PTopBack3-2.svg"
@@ -322,7 +322,7 @@ export default function TopPageView() {
             alt=""
             width={136}
             height={405}
-            className="h-auto w-full md:hidden"
+            className="h-auto w-full opacity-80 md:hidden"
           />
           <Image
             src="/image/top/PTopBack3-1.svg"
diff --git a/src/modules/top/ui/LogoInfo.tsx b/src/modules/top/ui/LogoInfo.tsx
index 92dd168..4d5935d 100644
--- a/src/modules/top/ui/LogoInfo.tsx
+++ b/src/modules/top/ui/LogoInfo.tsx
@@ -13,7 +13,7 @@ export default function LogoInfo() {
         height={260}
         className="h-[140px] w-[140px] md:h-[260px] md:w-[260px]"
       />
-      <p className="px-3l text-center text-text text-font-main md:flex-1 md:px-0 md:text-left md:text-Ptext-large md:font-bold">
+      <p className="px-3l text-center text-textb text-font-main md:flex-1 md:px-0 md:text-left md:text-Ptext-large md:font-bold">
         技大祭へようこそ！
         <br />
         「Bluem Up Date」と一緒に、花開くような