/* SignUp.php - Modern Elegant Design (Bootstrap 5) */

body {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    color: #2d3748;
    margin: 0;
    padding: 0;
}

/* 800px Width Constraint (Matches login.php) */
#MainHeader, main, footer {
    max-width: 800px !important;
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Backgrounds */
.bg-outer {
    background-color: #ced4da !important; /* 外側のグレー背景 */
}

main {
    background-color: #f0f4f8; /* 内側の明るい背景 */
    min-height: 90vh;
}

/* Header */
#MainHeader {
    background-color: #212529 !important;
    z-index: 1030;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    left: 0 !important;
    right: 0 !important;
}

/* Signup Card */
.signup-card {
    background-color: #fffbd5 !important; /* パステルイエロー (login と統一) */
    border-radius: 20px;
    border: none;
}

.signup-title {
    color: #2d3748;
    font-weight: 700;
}

.form-control {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    transition: all 0.2s ease-in-out;
}

.form-control:focus {
    border-color: #4299e1;
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15);
}

/* Buttons */
.btn-primary {
    background-color: #3182ce !important;
    border-color: #3182ce !important;
    border-radius: 12px;
    transition: all 0.2s;
}

.btn-primary:hover {
    background-color: #2b6cb0 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Footer Styling */
footer {
    background-color: #f0f4f8 !important;
}

/* Animations (Simple FadeIn) */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.signup-card {
    animation: fadeIn 0.5s ease-out forwards;
}

/* Responsive Adjustments */
@media (max-width: 576px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    .signup-card {
        border-radius: 15px;
    }
}