/*
    Hestia's Definitive Blueprint for the "Career" Page
    ----------------------------------------------------
    File: career.css
    Role: To create a warm, exciting, and welcoming gateway for our future heroes.
*/

/* --- [I] The Gateway for Heroes: Hero Section --- */
.hero-career {
    min-height: 400px;
    background-image: linear-gradient(to top, rgba(0, 90, 158, 0.8), rgba(40, 150, 220, 0.4)), url('../images/common/career-hero.jpg');
}
/* (project.cssから、基本ヒーローのスタイルを、美しく、継承) */


/* --- [II] The Guides' Welcome: Introduction Dialogue --- */
.career-intro {
    padding: 5rem 0;
    background-color: #f8f9fa;
}
/* (Hestia's Note: “魂の、対話”の、意匠は、staff.cssから、完璧に、継承いたします) */
.intro-dialogue { max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; }
.dialogue-turn { display: flex; align-items: flex-start; gap: 1rem; }
.dialogue-turn img { height: 60px; }
.dialogue-turn p { margin: 0; padding: 1rem; border-radius: 10px; line-height: 1.6; }
.chisai-turn p { background-color: #fffde7; }
.correct-turn p { background-color: #e3f2fd; }
.connect-turn p { background-color: #fff3e0; }


/* --- [III] The Body of the Invitation --- */
.career-section {
    padding: 5rem 0;
}
.section-title {
    text-align: center;
    font-family: var(--font-family-title);
    font-size: 2.5rem;
    color: var(--color-primary);
    margin: 0 0 3rem 0;
}
.section-title span { display: block; font-size: 1rem; color: #888; }

.activity-list {
    max-width: 800px;
    margin: 2rem auto;
    list-style: none;
    padding: 0;
}
.activity-list li {
    background-color: #f8f9fa;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    border-left: 5px solid var(--color-primary);
}

.welcome-message {
    max-width: 800px;
    margin: 2rem auto;
    text-align: center;
    background-color: #fff3e0;
    padding: 2rem;
    border-radius: 12px;
}
.welcome-message > p { font-weight: bold; font-size: 1.2rem; }
.welcome-message ul {
    list-style: none;
    padding: 0;
    display: inline-block; /* 中央揃えのため */
    text-align: left;
    margin-top: 1.5rem;
}
.welcome-message li {
    padding-left: 1.5em;
    position: relative;
    margin-bottom: 0.5rem;
}
.welcome-message li::before { content: '✅'; position: absolute; left: 0; color: var(--color-secondary); }

.join-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    max-width: 900px;
    margin: 2rem auto;
}
@media (max-width: 768px) { .join-details { grid-template-columns: 1fr; } }
.detail-card {
    background-color: #e3f2fd;
    padding: 2rem;
    border-radius: 8px;
}
.detail-card h3 { margin: 0 0 1rem 0; }
.detail-card p { margin: 0; line-height: 1.7; }

.apply-cta {
    text-align: center;
    margin-top: 4rem;
}
.apply-cta h3 { font-size: 2rem; font-family: 'Noto Serif JP', serif; }
.apply-cta p { margin: 1rem auto 2rem auto; }
.support-text { font-size: 0.9rem; color: #555; margin-top: 1rem; }


/* --- [IV] The Leader's Soul: Message Section --- */
.message-section {
    padding: 5rem 0;
    background-color: #f8f9fa;
}
.ceo-message {
    display: flex;
    align-items: center;
    gap: 3rem;
    max-width: 900px;
    margin: 0 auto;
    background-color: white;
    padding: 3rem;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
}
@media (max-width: 768px) { .ceo-message { flex-direction: column; text-align: center; } }
.ceo-message img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
}
.message-text p {
    margin: 0 0 1rem 0;
    line-height: 1.8;
}
.message-text p:last-child { margin-bottom: 0; }
.signature {
    text-align: right;
    font-weight: bold;
}
.cta-button.disabled {
    background-color: #ccc;
    cursor: not-allowed;
    pointer-events: none;
}
.cta-button.disabled:hover {
    background-color: #ccc;
    transform: none;
    box-shadow: none;
}