html,
body {
    height: 100%;
}
body {
    display: flex;
    /* もともとの上下中央寄せ + 背景などはそのまま */
    align-items: center;
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: #f5f5f5;
}

/* ★ ここを「画面中央に来る flex アイテム」にする */
.login-page-wrapper {
    margin: auto;                 /* body の中で上下左右センタリング */
    display: flex;
    flex-direction: column;       /* フォーム → お知らせ を縦並び */
    align-items: center;          /* 中身を水平方向に中央寄せ */
}

/* フォーム自体の幅は今まで通り */
.form-login {
    width: 100%;
    max-width: 330px;
    padding: 15px;
    margin: 0;                    /* 中央寄せは wrapper 側に任せる */
}
.form-login .checkbox {
    font-weight: 400;
}
.form-login .form-floating:focus-within {
    z-index: 2;
}
.form-login input[type="email"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.form-login input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* ログイン画面下部のお知らせ欄だけ広めに */
.login-announcements {
    width: 100%;
    max-width: 600px;         /* お知らせだけ横幅を広く */
    margin: 1rem auto 0;      /* wrapper 内で中央寄せ（上だけ少し余白） */
    padding: 0 1rem;
    text-align: left;         /* 中身のテキストは左寄せ */
}

@media (min-width: 768px) {
    .login-announcements {
        padding: 0 2rem;
    }
}

.login-announcements {
    padding: 0 2rem;
}

/* フッター（コピーライト）はフォームと同じ幅にする */
.form-login-footer {
    width: 100%;
    max-width: 330px;   /* .form-login と揃える */
    padding: 0 15px;    /* .form-login の左右と合わせる */
    text-align: center;
}