/*
    Hestia's Definitive Blueprint for the "Bounavi+" Gateway (Final Answer)
    -----------------------------------------------------------------------
    File: bounavi.css
    Role: To create an exciting and beautiful gateway that is a joyful attraction in itself.
*/

/* --- [I] The Amusement Park Gate: Hero Section --- */
.hero-bounavi {
    padding: 4rem 0;
    background: linear-gradient(135deg, #ffefba, #ffffff);
    min-height: auto;
}
.hero-bounavi-content { text-align: center; }
.hero-dialogue { max-width: 500px; margin: 0 auto 1.5rem auto; font-family: 'Noto Serif JP', serif; font-weight: 700; }
.dialogue-chisai, .dialogue-correct { padding: 1rem; border-radius: 12px; margin-bottom: 1rem; position: relative; }
.dialogue-chisai { background-color: #ffe0b2; }
.dialogue-correct { background-color: #b3e5fc; }
.dialogue-chisai::after { content:''; position: absolute; bottom: -10px; left: 30px; border-width: 10px 10px 0; border-style: solid; border-color: #ffe0b2 transparent; }
.dialogue-correct::after { content:''; position: absolute; bottom: -10px; right: 30px; border-width: 10px 10px 0; border-style: solid; border-color: #b3e5fc transparent; }
.bounavi-logo { max-height: 80px; margin-bottom: 2rem; }
.hero-cta { font-size: 1.3rem; padding: 1rem 3rem; }
.hero-characters { display: flex; justify-content: center; align-items: flex-end; gap: 2rem; margin-top: 2.5rem; }
.hero-characters img { height: 80px; }


/* --- [II] The Soul's Dialogue: About Section --- */
.bounavi-about { padding: 5rem 0; background-color: #ffffff; }
.about-dialogue { max-width: 700px; margin: 2rem auto 0 auto; }
.dialogue-item { display: flex; align-items: flex-start; gap: 1.5rem; margin-bottom: 2rem; }
.dialogue-item.reverse { flex-direction: row-reverse; }
.dialogue-item img { height: 80px; flex-shrink: 0; animation: bounce-gentle 4s ease-in-out infinite; }
.dialogue-item.reverse img { animation-delay: 1s; }
.dialogue-item:last-child img { animation-delay: 2s; }
.dialogue-item p { margin: 0; padding: 1.5rem; border-radius: 12px; position: relative; line-height: 1.7; box-shadow: 0 5px 15px rgba(0,0,0,0.03); }
.dialogue-item:nth-child(1) p { background-color: #e3f2fd; } /* Correct */
.dialogue-item:nth-child(2) p { background-color: #fffde7; } /* Chisamaru */
.dialogue-item:nth-child(3) p { background-color: #fff3e0; } /* Connect */
.dialogue-item p::before { content: ''; position: absolute; top: 20px; left: -10px; border-width: 10px 10px 10px 0; border-style: solid; border-color: transparent #e3f2fd transparent transparent; }
.dialogue-item.reverse p::before { left: auto; right: -10px; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent #fffde7; }
.dialogue-item:nth-child(3) p::before { border-color: transparent #fff3e0 transparent transparent; }


/* --- [III] The Attraction Showcase: Contents Section --- */
.bounavi-contents { padding: 5rem 0; background-color: #f8f9fa; }
.content-intro { text-align: center; max-width: 600px; margin: 0 auto 3rem auto; }
.content-intro img { height: 100px; margin-bottom: 1rem; }
.content-intro h3 { font-family: var(--font-family-title); font-size: 2rem; color: var(--color-primary); margin: 0 0 1rem 0; }
.content-intro p { font-size: 1.1rem; color: #555; margin: 0; }

.contents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}
.content-card {
    background-color: white;
    border-radius: 12px;
    padding: 2.5rem 2rem;
    text-align: center;
    box-shadow: 0 5px 25px rgba(0,0,0,0.05);
    border-bottom: 5px solid transparent;
    transition: transform 0.3s, border-color 0.3s;
}
.content-card:hover {
    transform: translateY(-10px);
    border-color: var(--color-secondary);
}
.content-card h3 { font-size: 1.5rem; margin: 0 0 1rem 0; }
.content-card p { margin: 0; color: #555; font-size: 0.9rem; line-height: 1.6; }


/* --- [IV] Connect's Treasure Corner --- */
.bounavi-connect-treasure {
    padding: 5rem 0;
    background-color: #fff3e0;
}
.bounavi-connect-treasure .container {
    display: flex;
    align-items: center;
    gap: 3rem;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}
@media (min-width: 768px) {
    .bounavi-connect-treasure .container {
        flex-wrap: nowrap;
        text-align: left;
    }
}
.bounavi-connect-treasure .connect-guide { flex-shrink: 0; }
.bounavi-connect-treasure .connect-guide img { height: 120px; }
.bounavi-connect-treasure .treasure-text { max-width: 600px; }
.bounavi-connect-treasure .treasure-text h2 { font-family: var(--font-family-title); font-size: 2rem; color: #fb8c00; margin: 0 0 1rem 0; }
.bounavi-connect-treasure .treasure-text p { margin: 0 0 1.5rem 0; line-height: 1.8; font-size: 1.1rem; }


/* --- [V] The Main Gate: CTA Section --- */
.bounavi-cta {
    padding: 5rem 0;
    background-color: #343a40;
    color: white;
    text-align: center;
}
.bounavi-cta h2 { font-family: 'Noto Serif JP', serif; font-size: 2.5rem; margin: 0 0 1rem 0; }
.bounavi-cta p { max-width: 600px; margin: 0 auto 2rem auto; color: #ced4da; line-height: 1.8; }
.bounavi-cta .cta-button:hover { background-color: #f57c00; }