body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center; /* 横方向の中央配置 */
    align-items: center; /* 縦方向の中央配置 */
    font-family: Arial, sans-serif; /* フォントをArialに設定 */
}

/* ページ全体のコンテナ（タイトルとフォームを縦に並べる） */
.page {
    display: flex;
    flex-direction: column;
    align-items: center; /* 中央揃え */
}

/* ページタイトル */
h2 {
    margin-bottom: 70px; /* タイトル下の余白 */
    color: blue; /* 文字色を青に設定 */
    font-size: 3rem; /* フォントサイズを大きく設定 */
    font-weight: bold; /* 太字 */
}

/* ログインフォーム全体のスタイル */
.login-form {
    width: 300px; /* フォームの幅 */
    margin-top: 30px; /* 上の余白 */
}

    /* フォーム内の各項目の間隔 */
    .login-form div {
        margin-bottom: 45px; /* 各入力欄の間隔 */
    }

    /* 入力フィールドのスタイル */
    .login-form input {
        width: 100%; /* 親要素いっぱいに広げる */
        padding: 10px; /* 内側の余白 */
        box-sizing: border-box; /* パディングを含めて幅計算 */
    }

    /* ログインボタンのスタイル */
    .login-form button {
        width: 100%; /* 横幅いっぱい */
        padding: 10px; /* 内側の余白 */
        box-sizing: border-box; /* サイズ計算を統一 */
        margin-top: 10px; /* 上の余白 */
        background-color: #007bff; /* 青い背景色 */
        color: white; /* 文字色を白に */
        border: none; /* 枠線なし */
        cursor: pointer; /* マウスカーソルをポインターに */
        border-radius: 6px; /* 角を丸くする */
    }

.text-danger {
    color: red !important;
}