/* ログインページのデザイン */

/* login.css (修正・確認版) */

/* --- 画面全体の中央寄せ --- */
.login-container {
    display: flex;
    justify-content: center; /* 水平方向の中央寄せ */
    align-items: center; /* 垂直方向の中央寄せ */
    min-height: 100vh;
    background-color: var(--background-color);
}

/* --- ログインボックスの幅を設定 (これにより入力ボックスの最大幅も決定される) --- */
.login-box {
    width: 100%;
    max-width: 400px; /* ★ここでボックスの最大幅を400pxに制限しています */
    padding: 2rem;
    background-color: var(--white);
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.login-header h1 {
    font-size: 1.75rem;
    color: var(--text-color);
    margin-bottom: 0.5rem;
}

.login-header p {
    color: var(--sub-text-color);
    font-size: 0.9rem;
}

.form-group {
    margin-bottom: 1rem;
    display: flex; 
    align-items: center;
    justify-content: center; 
    width: 100%;
    max-width: 350px; 
 /* ★★★ ここに追記 ★★★ */
    white-space: nowrap; /* テキストの折り返しを禁止 */
}   
   
.form-group input {
    /* ラベルとの間に少し間隔を空ける */
    margin-left: 10px; 
}
.form-group label {
    font-weight: 600;
    font-size: 0.95rem;
}


/* ボタンのスタイルは、Flexboxの適用により margin: auto は不要。 */
/* ★ ログインボタンのスタイルを一つに統一し、中央寄せを確実にする ★ */
.login-box .btn-primary {
    /* 1. 中央寄せの制御 */
    display: block; /* ブロック要素にして幅いっぱいに広がるようにする */
    margin-left: auto; 
    margin-right: auto; 
    
    /* 2. サイズと幅 */
    padding: 0.85rem 1rem; 
    font-size: 1.1rem; 
    
    /* 3. 上下の余白 */
    margin-top: 1.5rem; 
    margin-bottom: 0.5rem; /* 下にも少し余白を追加 */
    
    /* 4. 幅の制限 */
    max-width: 350px; /* 入力フィールドと合わせる */
    width: 100%;
}


/* エラーメッセージなど */
.alert-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border-radius: 0.25rem;
}