body { 
    font-family: 'Noto Sans JP', sans-serif; 
    background-color: #F8F9FA; 
    color: #333333; 
}
.hero-gradient { 
    background: linear-gradient(135deg, #8A2BE2 0%, #FF8C00 100%); 
}
.section-title { 
    font-size: 2.5rem; 
    font-weight: 900; 
    color: #8A2BE2; 
    margin-bottom: 1.5rem; 
    text-align: center; 
}
.section-subtitle { 
    font-size: 1.25rem; 
    color: #555; 
    margin-bottom: 3rem; 
    text-align: center; 
    max-width: 700px; 
    margin-left: auto; 
    margin-right: auto; 
}
.card { 
    background-color: #FFFFFF; 
    border-radius: 0.75rem; 
    padding: 2rem; 
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04); 
    transition: all 0.3s ease-in-out; 
}
.card:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 20px 30px -10px rgba(138,43,226,0.2); 
}
.chart-container { 
    position: relative; 
    width: 100%; 
    max-width: 550px; 
    margin-left: auto; 
    margin-right: auto; 
    height: 300px; 
    max-height: 350px; 
    padding: 1rem; 
    background-color: #FFFFFF; 
    border-radius: 0.5rem; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); 
}
@media (min-width: 768px) { 
    .chart-container { 
        height: 350px; 
        max-height: 400px;
    } 
}
.tab-button { 
    padding: 0.75rem 1.5rem; 
    margin: 0 0.25rem; 
    border-radius: 0.5rem; 
    font-weight: 700; 
    cursor: pointer; 
    transition: all 0.3s ease; 
    border: 2px solid transparent; 
}
.tab-button.active { 
    background-color: #8A2BE2; 
    color: white; 
    border-color: #8A2BE2; 
}
.tab-button:not(.active) { 
    background-color: #E9D8FD; 
    color: #8A2BE2; 
    border-color: #E9D8FD; 
}
.tab-button:not(.active):hover { 
    background-color: #DABFFB; 
}
.tab-content { 
    display: none; 
}
.tab-content.active { 
    display: block; 
    animation: fadeIn 0.5s; 
}
@keyframes fadeIn { 
    from { 
        opacity: 0; 
        transform: translateY(10px); 
    } 
    to { 
        opacity: 1; 
        transform: translateY(0); 
    } 
}
.stat-big-number { 
    font-size: 3.5rem; 
    font-weight: 900; 
    color: #FF8C00; 
}
.flowchart-item { 
    background-color: #fff; 
    border: 2px solid #8A2BE2; 
    border-radius: 0.5rem; 
    padding: 1rem; 
    text-align: center; 
    font-weight: 700; 
    color: #8A2BE2; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); 
}
.flowchart-arrow { 
    font-size: 2rem; 
    color: #FF8C00; 
    margin: 0 0.5rem; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}
.nav-item { 
    padding: 0.5rem 1rem; 
    color: #F8F9FA; 
    font-weight: 700; 
    border-radius: 0.375rem; 
    transition: background-color 0.3s ease; 
}
.nav-item:hover { 
    background-color: rgba(255,255,255,0.2); 
}
.primary-bg { 
    background-color: #8A2BE2; 
}
.secondary-bg { 
    background-color: #FF8C00; 
}
.accent-bg { 
    background-color: #008080; 
}
.primary-text { 
    color: #8A2BE2; 
}
.secondary-text { 
    color: #FF8C00; 
}
.accent-text { 
    color: #008080; 
}
.process-step { 
    display: flex; 
    align-items: center; 
    margin-bottom: 1rem; 
    padding: 1rem; 
    background-color: #fff; 
    border-radius: 0.5rem; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); 
}
.process-number { 
    font-size: 1.5rem; 
    font-weight: 900; 
    color: #fff; 
    background-color: #FF8C00; 
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin-right: 1rem; 
    flex-shrink: 0; 
}
.prose br { 
    display: block; 
    content: ""; 
    margin-top: 0.5em; 
}
.prose strong { 
    font-weight: 700; 
}
#generate-simulation-btn:disabled { 
    opacity: 0.7; 
    cursor: not-allowed; 
}