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

src/main/resources/templates/authentication.html

@@ -2,59 +2,122 @@
 <html xmlns:th="http://www.thymeleaf.org">
 
 <head>
-	<meta charset="UTF-8">
+	<meta charset="UTF-8" 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">
-	
-	<div th:replace="~{header :: header}">
-		</div>
-	
-	<main>
-		<h1>本人認証確認</h1>
-	
-		<form th:action="@{/authentication}" th:object="${authenticationForm}" method="post">
-	
-			<div>
-				<label for="mailAddress">メールアドレス</label>
-				<input type="email" id="mailAddress" th:field="*{mailAddress}">
-			</div>
-	
-			<div>
-				<label for="secretQuestionId">秘密の質問</label>
-				<select id="secretQuestionId" th:field="*{secretQuestionId}">
-	
-					<option value="">選択してください</option>
-	
-					<option th:each="question : ${questionList}" th:value="${question.secretQuestionId}"
-						th:text="${question.questionText}">
-					</option>
-	
-				</select>
-			</div>
-	
-			<div>
-				<label for="secretAnswer">秘密の質問の回答</label>
-				<input type="text" id="secretAnswer" th:field="*{secretAnswer}">
-			</div>
-	
-			<button type="submit">確認</button>
-	
-		</form>
-		
-		<form th:action="@{/login}" method="get">
-			<button type="submit">戻る</button>
-		</form>
-	</main>
-	
-	<script th:if="${errorMessage}" th:inline="javascript">
-	    alert(/*[[${errorMessage}]]*/);
-	</script>
-	
-	
+<body style="padding-top:80px; padding-bottom:80px;">
+
+    <div th:replace="~{header :: header}">
+    </div>
+
+    <div class="main-container">
+
+        <h1 class="page-title">
+            本人認証
+        </h1>
+
+        <div class="card shadow-sm">
+
+            <div class="card-body">
+
+                <form th:action="@{/authentication}"
+                      th:object="${authenticationForm}"
+                      method="post">
+
+                    <div class="mb-3">
+
+                        <label for="mailAddress"
+                               class="form-label">
+                            メールアドレス
+                        </label>
+
+                        <input type="email"
+                               id="mailAddress"
+                               class="form-control"
+                               th:field="*{mailAddress}"
+                               required>
+
+                    </div>
+
+                    <div class="mb-3">
+
+                        <label for="secretQuestionId"
+                               class="form-label">
+                            秘密の質問
+                        </label>
+
+                        <select id="secretQuestionId"
+                                class="form-select"
+                                th:field="*{secretQuestionId}">
+
+                            <option value="">
+                                選択してください
+                            </option>
+
+                            <option th:each="question : ${questionList}"
+                                    th:value="${question.secretQuestionId}"
+                                    th:text="${question.questionText}">
+                            </option>
+
+                        </select>
+
+                    </div>
+
+                    <div class="mb-3">
+
+                        <label for="secretAnswer"
+                               class="form-label">
+                            秘密の質問の回答
+                        </label>
+
+                        <input type="text"
+                               id="secretAnswer"
+                               class="form-control"
+                               th:field="*{secretAnswer}"
+                               required>
+
+                    </div>
+
+                    <div class="d-grid gap-2">
+
+                        <button type="submit"
+                                class="btn btn-primary">
+                            確認
+                        </button>
+
+                    </div>
+
+                </form>
+
+            </div>
+
+        </div>
+
+        <div class="d-grid mt-3">
+
+            <form th:action="@{/login}"
+                  method="get">
+
+                <button type="submit"
+                        class="btn btn-outline-secondary w-100">
+                    戻る
+                </button>
+
+            </form>
+
+        </div>
+
+    </div>
+
+    <script th:if="${errorMessage}"
+            th:inline="javascript">
+        alert(/*[[${errorMessage}]]*/);
+    </script>
+
 </body>
 
 </html>