* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
    font-family: 'Noto Sans JP', sans-serif; 
    background: #f5f5f5; 
    color: #333; 
    line-height: 1.6; 
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.container { 
    max-width: 400px; 
    width: 100%;
    padding: 20px; 
}

.login-card { 
    background: white; 
    border-radius: 8px; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
    padding: 30px; 
    margin-bottom: 20px; 
}
.form-group { 
    margin-bottom: 20px; 
}
.form-group label { 
    display: block; 
    margin-bottom: 8px; 
    font-weight: 600; 
    color: #333; 
}
.form-group input { 
    width: 100%; 
    padding: 12px 15px; 
    border: 1px solid #ddd; 
    border-radius: 5px; 
    font-size: 1rem; 
    transition: border-color 0.3s;
}
.form-group input:focus { 
    outline: none; 
    border-color: #1976d2; 
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.1); 
}
.form-group input[type="password"] { 
    letter-spacing: 2px; 
}
.checkbox-group { 
    display: flex; 
    align-items: center; 
    margin-bottom: 20px; 
}
.checkbox-group input[type="checkbox"] { 
    width: auto; 
    margin-right: 8px; 
}
.checkbox-group label { 
    margin-bottom: 0; 
    font-weight: normal; 
    cursor: pointer; 
}
.btn { 
    width: 100%;
    padding: 12px 20px; 
    border: none; 
    border-radius: 5px; 
    cursor: pointer; 
    font-size: 1rem; 
    font-weight: 600;
    text-decoration: none; 
    display: inline-block; 
    transition: all 0.3s; 
}
.btn-primary { 
    background: #1976d2; 
    color: white; 
}
.btn-primary:hover { 
    background: #1565c0; 
    transform: translateY(-2px); 
    box-shadow: 0 4px 8px rgba(25, 118, 210, 0.3);
}
.btn-primary:active { 
    transform: translateY(0); 
}
.forgot-password { 
    text-align: center; 
    margin-top: 20px; 
}
.forgot-password a { 
    color: #1976d2; 
    text-decoration: none; 
    font-size: 0.9rem; 
}
.forgot-password a:hover { 
    text-decoration: underline; 
}
.divider { 
    text-align: center; 
    margin: 20px 0; 
    position: relative; 
}
.divider::before { 
    content: ''; 
    position: absolute; 
    top: 50%; 
    left: 0; 
    right: 0; 
    height: 1px; 
    background: #ddd; 
}
.divider span { 
    background: white; 
    padding: 0 15px; 
    color: #666; 
    font-size: 0.9rem; 
}
.social-login { 
    display: flex; 
    gap: 10px; 
    margin-top: 20px; 
}
.social-btn { 
    flex: 1; 
    padding: 10px; 
    border: 1px solid #ddd; 
    border-radius: 5px; 
    background: white; 
    color: #333; 
    text-decoration: none; 
    text-align: center; 
    font-size: 0.9rem; 
    transition: all 0.3s; 
}
.social-btn:hover { 
    background: #f8f9fa; 
    border-color: #1976d2; 
}
.error-message,
.message.error { 
    background: #f8d7da; 
    color: #721c24; 
    padding: 12px; 
    border-radius: 5px; 
    margin-bottom: 20px; 
    border: 1px solid #f5c6cb; 
    display: none; 
}
.success-message,
.message.success { 
    background: #d4edda; 
    color: #155724; 
    padding: 12px; 
    border-radius: 5px; 
    margin-bottom: 20px; 
    border: 1px solid #c3e6cb; 
    display: none; 
}
.loading { 
    display: none; 
    text-align: center; 
    margin-top: 10px; 
}
.spinner { 
    border: 2px solid #f3f3f3; 
    border-top: 2px solid #1976d2; 
    border-radius: 50%; 
    width: 20px; 
    height: 20px; 
    animation: spin 1s linear infinite; 
    display: inline-block; 
}
@keyframes spin { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
}
@media (max-width: 480px) { 
    .container { 
        padding: 10px; 
    }
    .login-card { 
        padding: 20px; 
    }
    .social-login { 
        flex-direction: column; 
    }
}