/* ==========================================
   見やすくてスタイリッシュな画像デザイン
========================================== */

/* 画像コンテナ - 背景を活用 */
.hero-image-section,
.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 {
    margin: 4rem auto;
    padding: 3rem 2rem;
    background: linear-gradient(135deg, 
        rgba(255, 248, 240, 0.4) 0%,
        rgba(255, 255, 255, 0.8) 50%,
        rgba(245, 230, 211, 0.4) 100%);
    border-radius: 20px;
    max-width: 1400px;
}

/* 画像を大きく表示 */
.hero-image,
.key-message-image,
.iceberg-image,
.two-approaches-image,
.sleep-vs-rest-image,
.treatment-image,
.alarms-image,
.patient-image,
.support-full-image,
.line-cta-image {
    width: 100%;
    max-width: 1200px;
    height: auto;
    border-radius: 16px;
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.12),
        0 4px 12px rgba(255, 107, 53, 0.08);
    transition: all 0.3s ease;
    margin: 0 auto;
    display: block;
}

/* 院長の写真 - 特別に大きく */
.director-photo {
    margin: 4rem auto;
    padding: 3rem 2rem;
    text-align: center;
    background: linear-gradient(135deg,
        rgba(255, 248, 240, 0.3),
        rgba(255, 255, 255, 0.9));
    border-radius: 20px;
    max-width: 800px;
}

.director-image {
    width: 100%;
    max-width: 600px;
    height: auto;
    border-radius: 16px;
    box-shadow: 
        0 15px 50px rgba(0, 0, 0, 0.15),
        0 5px 15px rgba(255, 107, 53, 0.1);
    transition: all 0.3s ease;
    margin: 0 auto;
    display: block;
}

/* ホバーエフェクト（デスクトップのみ） */
@media (min-width: 769px) {
    .hero-image:hover,
    .key-message-image:hover,
    .iceberg-image:hover,
    .two-approaches-image:hover,
    .sleep-vs-rest-image:hover,
    .treatment-image:hover,
    .alarms-image:hover,
    .patient-image:hover,
    .support-full-image:hover,
    .line-cta-image:hover {
        transform: translateY(-5px) scale(1.01);
        box-shadow: 
            0 15px 50px rgba(0, 0, 0, 0.15),
            0 8px 20px rgba(255, 107, 53, 0.12);
    }

    .director-image:hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 
            0 20px 60px rgba(0, 0, 0, 0.2),
            0 10px 25px rgba(255, 107, 53, 0.15);
    }
}

/* セクションに軽い装飾 */
.hero-image-section::before,
.key-message::before,
.iceberg-section::before,
.approach-section::before,
.rest-vs-sleep-section::before,
.treatment-method-image::before,
.three-alarms-image::before,
.patient-first-image::before,
.patient-support-section::before,
.line-cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent,
        var(--primary-color),
        var(--secondary-color),
        transparent);
    border-radius: 20px 20px 0 0;
}

.hero-image-section,
.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 {
    position: relative;
}

/* タブレット */
@media (max-width: 1024px) {
    .hero-image,
    .key-message-image,
    .iceberg-image,
    .two-approaches-image,
    .sleep-vs-rest-image,
    .treatment-image,
    .alarms-image,
    .patient-image,
    .support-full-image,
    .line-cta-image {
        max-width: 900px;
    }

    .director-image {
        max-width: 500px;
    }
}

@media (max-width: 768px) {
    .hero-image-section,
    .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 {
        margin: 2.5rem auto;
        padding: 2rem 1.5rem;
    }

    .director-photo {
        margin: 2.5rem auto;
        padding: 2rem 1.5rem;
        max-width: 600px;
    }

    .hero-image,
    .key-message-image,
    .iceberg-image,
    .two-approaches-image,
    .sleep-vs-rest-image,
    .treatment-image,
    .alarms-image,
    .patient-image,
    .support-full-image,
    .line-cta-image {
        max-width: 700px;
        border-radius: 14px;
    }

    .director-image {
        max-width: 450px;
        border-radius: 14px;
    }
}

/* スマートフォン */
@media (max-width: 480px) {
    .hero-image-section,
    .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 {
        margin: 2rem auto;
        padding: 1.5rem 1rem;
        border-radius: 16px;
    }

    .director-photo {
        margin: 2rem auto;
        padding: 1.5rem 1rem;
        border-radius: 16px;
    }

    .hero-image,
    .key-message-image,
    .iceberg-image,
    .two-approaches-image,
    .sleep-vs-rest-image,
    .treatment-image,
    .alarms-image,
    .patient-image,
    .support-full-image,
    .line-cta-image,
    .director-image {
        border-radius: 12px;
        box-shadow: 
            0 8px 30px rgba(0, 0, 0, 0.1),
            0 3px 10px rgba(255, 107, 53, 0.06);
    }
}

/* 全体の背景グラデーション改善 */
.features,
.treatment,
.fatigue,
.director,
.patient-first {
    position: relative;
    overflow: hidden;
}

.features::after,
.treatment::after,
.fatigue::after,
.director::after,
.patient-first::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(255, 107, 53, 0.02) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255, 184, 48, 0.02) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.features .container,
.treatment .container,
.fatigue .container,
.director .container,
.patient-first .container {
    position: relative;
    z-index: 1;
}