body {
    font-family: 'Noto Sans JP', sans-serif;
    background-color: #F5F5F4; /* stone-100 (light base) */
    color: #292524; /* stone-800 (dark text) */
}
.font-opensans {
    font-family: 'Open Sans', sans-serif;
}
.hero-bg { 
    background-color: #0D9488; /* teal-600 */
    color: #F0FDFA; /* teal-50 or white for text on dark hero */
}
.section-bg-white { 
    background-color: white;
}
.section-bg-light-accent { 
     background-color: #FAFAF9; /* stone-50 */
}
.card-bg { 
    background-color: white; 
}
.text-primary-accent {
    color: #0D9488; /* teal-600 */
}
.text-secondary-accent {
    color: #F59E0B; /* amber-500 */
}
.border-accent {
    border-color: #0D9488; /* teal-600 */
}
.button-accent {
    background-color: #F59E0B; /* amber-500 */
    color: white;
}
.button-accent:hover {
    background-color: #D97706; /* amber-600 */
}
.nav-link {
    color: #44403C; /* stone-700 */
}
.nav-link:hover {
    color: #0D9488; /* teal-600 */
}
.mobile-nav-link { /* For links in mobile dropdown */
    display: block;
    padding: 0.75rem 1.5rem; /* py-3 px-6 */
    color: #44403C; /* stone-700 */
    border-bottom: 1px solid #E7E5E4; /* stone-200 */
}
.mobile-nav-link:hover {
    background-color: #F5F5F4; /* stone-100 */
    color: #0D9488; /* teal-600 */
}
.modal-content { 
    background-color: white;
    color: #1E293B; 
    transition: transform 0.25s ease;
}
.modal-content h3, .modal-content h4 {
    color: #0D9488; 
}
.modal-content .text-stone-700 {
     color: #334155; 
}
.modal-content .text-stone-600 {
     color: #475569; 
}
.modal-content .text-stone-500 {
     color: #64748B; 
}
.modal-content .skill-modal-link {
    color: #0D9488; 
}
.modal-content .skill-modal-link:hover {
    color: #0F766E; 
}
.modal-content .bg-stone-500:hover { 
    background-color: #475569; 
}
 .modal-content .bg-stone-500 {
    background-color: #64748B; 
}

.chart-container { 
    position: relative; width: 100%; max-width: 500px; margin-left: auto; margin-right: auto; height: 280px; max-height: 320px;
}
 .chart-container-appsheet { 
    position: relative; width: 100%; max-width: 450px; margin-left: auto; margin-right: auto; height: 250px; max-height: 280px;
}
.chart-container-notebooklm { 
    position: relative; width: 100%; max-width: 450px; margin-left: auto; margin-right: auto; height: 250px; max-height: 280px;
}
.knowledge-centralization-visual {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem;
    background-color: #F0F9FF; 
    border-radius: 0.5rem; border: 1px solid #E0F2FE; 
    margin-top: 1.5rem; flex-wrap: wrap; 
}
.doc-icon {
    font-size: 1.5rem; color: #38BDF8; 
}
.arrow-icon {
    font-size: 1.5rem; color: #0D9488;  margin: 0 0.25rem; 
}
.central-store-icon {
    font-size: 2rem; color: #0D9488; 
}
.centralization-text {
    font-size: 0.875rem; color: #0369A1;  text-align: center; margin-top: 0.5rem;
}
.skill-card { 
    background-color: #FAFAF9; 
    border-left: 4px solid #0D9488; 
    transition: box-shadow 0.3s ease, transform 0.3s ease; 
    cursor: pointer;
}
.skill-card:hover {
    box-shadow: 0 4px 8px -1px rgba(0,0,0,0.1), 0 2px 6px -1px rgba(0,0,0,0.06); 
    transform: translateY(-2px); 
}
.skill-card strong { color: #1E293B; } 
.skill-card p { color: #475569; } 

.learning-skill-item { 
    background-color: #FAFAF9; 
    border-left: 4px solid #0D9488; 
}
.learning-skill-item strong { color: #1E293B; }
.learning-skill-item p { color: #475569; }
        
.section-title::after {
    content: ''; display: block; width: 60px; height: 4px; background-color: #0D9488;  margin-top: 8px;
}
.keyword-bubble { 
    background-color: #CCFBF1; 
    color: #115E59; 
    padding: 6px 12px; border-radius: 9999px; font-size: 0.875rem; margin: 4px;
}
.project-card { 
    background-color: white;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); 
}
.strength-item { 
    background-color: #FAFAF9; 
    border-left: 4px solid #0D9488; 
}
.strength-item strong { color: #0D9488; } 
.strength-item span { color: #44403C; } 

@media (min-width: 768px) { 
    .chart-container { height: 320px; }
    .chart-container-appsheet { height: 280px; }
    .chart-container-notebooklm { height: 280px; }
}
.modal { transition: opacity 0.25s ease; }
.modal-active { overflow-x: hidden; overflow-y: auto; }