/* ===========================
   画像最適化 CSS
   Version: 1.0.0
   ========================== */

/* 背景画像の最適化 */
.apple-hero.has-background,
.section-with-background {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* 画像の表示サイズを制限 */
    max-width: 100%;
}

/* 背景画像の解像度制限（レスポンシブ対応） */
@media (max-width: 734px) {
    .apple-hero.has-background,
    .section-with-background {
        background-size: auto 100%;
        background-position: center center;
    }
}

/* アイコン画像の最適化 */
.apple-icon-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, var(--apple-blue) 0%, #0077ED 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.apple-icon-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* ブラウザによる画像の最適化 */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* アバター画像の最適化 */
.testimonial-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--apple-white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    /* ブラウザによる画像の最適化 */
    image-rendering: -webkit-optimize-contrast;
}

/* コンテンツ画像の最適化 */
.content-image-optimized {
    width: 100%;
    max-width: 800px;
    height: auto;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    /* ブラウザによる画像の最適化 */
    image-rendering: -webkit-optimize-contrast;
}

/* レスポンシブ画像 */
@media (max-width: 1068px) {
    .apple-icon-circle {
        width: 64px;
        height: 64px;
    }
    
    .testimonial-avatar {
        width: 56px;
        height: 56px;
    }
}

@media (max-width: 734px) {
    .apple-icon-circle {
        width: 56px;
        height: 56px;
    }
    
    .testimonial-avatar {
        width: 48px;
        height: 48px;
    }
}

/* 画像の遅延読み込み対応 */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

img[loading="lazy"].loaded {
    opacity: 1;
}

/* WebP対応のフォールバック */
.webp .apple-hero.has-background {
    /* WebP対応ブラウザ用 */
}

.no-webp .apple-hero.has-background {
    /* WebP非対応ブラウザ用 */
}