body { background: #f4f7f6; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; }

/* ★修正: 幅を固定(width:320px)から、最大幅(max-width)と画面幅に対する割合(width:90%)に変更し、スマホの余白を調整 */
.login-container { 
    background: white; 
    padding: 40px 30px; 
    border-radius: 12px; 
    box-shadow: 0 4px 20px rgba(0,0,0,0.1); 
    width: 90%; 
    max-width: 360px; 
    box-sizing: border-box; 
}

h2 { color: #1a73e8; text-align: center; margin-bottom: 25px; }

/* ★修正: スマホでのタップ時のズームを防ぐため、フォントサイズを16pxに統一 */
input { width: 100%; padding: 14px 12px; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 6px; box-sizing: border-box; font-size: 16px; outline: none; }

button { width: 100%; padding: 14px 12px; background: #1a73e8; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 16px; transition: background 0.3s; }
button:hover { background: #1557b0; }
.error { color: #d93025; font-size: 14px; text-align: center; margin-bottom: 15px; font-weight: bold; line-height: 1.4; }