[EDIT]スマホ画面のデザインに統一しました

src/main/resources/templates/analysis.html

@@ -4,17 +4,18 @@
 <meta name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
 <title>分析画面</title>
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
+<link rel="stylesheet" th:href="@{/css/style.css}">
 </head>
 
-<body class="pb-5 pt-5">
+<body>
 	
 	<div th:replace="~{header :: header}">
 	</div>
 	
-	<div class="container mt-4">
-	<h2 class="text-center">支出分析</h2>
+	<div class="main-container">
+	<h2 class="page-title">支出分析</h2>
 	
-	<div class="text-center">
+	<div class="calendar-title">
 
 		<a class="month-button" th:href="@{/analysis(year=${previousYear}, month=${previousMonth})}">
 			←
@@ -49,8 +50,8 @@
 					      ? '＋' + ${analysisForm.totalDifferenceAmount}
 						  : ${analysisForm.totalDifferenceAmount}"
 				      th:class="${analysisForm.totalDifferenceAmount >= 0}
-					      ? 'color-danger;'
-						  : 'color-primary;'">
+					      ? 'text-danger'
+						  : 'text-primary'">
 					0
 				  </td>
 		      </tr>
@@ -84,16 +85,16 @@
 			          ? '＋' + ${category.monthDifferenceAmount}
 				      : ${category.monthDifferenceAmount}"
 			      th:class="${category.monthDifferenceAmount >= 0}
-				      ? 'color-danger;'
-				  	  : 'color-primary;'">
+				      ? 'text-danger'
+				  	  : 'text-primary'">
 			</span>
 			<br>
 			<span th:text="${category.courseDifferenceAmount >= 0}
 				      ? '＋' + ${category.courseDifferenceAmount}
 					  : ${category.courseDifferenceAmount}"
 			      th:class="${category.courseDifferenceAmount >= 0}
-				      ? 'color-danger;'
-				      : 'color-primary;'">
+				      ? 'text-danger'
+				      : 'text-primary'">
 			</span>
 		  </td>
 	    </tr>