/* ==========================================
   視認性改善CSS
========================================== */

/* ヒーローセクションの背景とテキスト */
.hero {
    background: linear-gradient(135deg, 
        rgba(255, 248, 240, 0.95) 0%,
        rgba(245, 230, 211, 0.95) 100%);
}

.hero-content {
    background: rgba(255, 255, 255, 0.95);
    padding: 2rem;
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.hero-title {
    color: var(--text-dark) !important;
}

.hero-subtitle {
    color: var(--text-gray) !important;
}

/* 画像の下のテキストセクション */
.key-message,
.iceberg-section,
.approach-section,
.rest-vs-sleep-section,
.treatment-method-image,
.three-alarms-image,
.patient-first-image,
.patient-support-section,
.line-cta-section {
    background: var(--bg-white);
    padding: 2rem 1rem;
    border-radius: 16px;
}

/* 白背景のセクションにテキストが見えるように */
.features,
.treatment,
.fatigue,
.director,
.patient-first,
.contact {
    background: var(--bg-light);
}

/* セクションタイトルの視認性向上 */
.section-title {
    color: var(--text-dark);
    text-shadow: none;
}

.section-subtitle {
    color: var(--text-gray);
}

/* カードの視認性向上 */
.feature-card,
.treatment-card,
.director-profile {
    background: var(--bg-white);
    color: var(--text-dark);
}

.feature-title,
.treatment-title {
    color: var(--primary-color);
}

.feature-text,
.treatment-text {
    color: var(--text-gray);
}

/* 画像の周りのテキストエリア */
.hero-image-section + .hero-content {
    margin-top: 2rem;
}

/* その下のメッセージエリア */
.hero-content h2,
.hero-content p {
    color: var(--text-dark) !important;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .hero-content {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .hero-content {
        padding: 1rem;
    }
}