/* 
 * 画像最適化のためのスタイル
 * レイアウトシフトを防ぎ、最適な表示を実現
 */

/* =============== 基本的な画像設定 =============== */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* aspect-ratioをサポートしているブラウザ用 */
@supports (aspect-ratio: 1) {
    img[width][height] {
        aspect-ratio: attr(width) / attr(height);
    }
}

/* =============== picture要素の設定 =============== */
picture {
    display: block;
}

picture img {
    width: 100%;
    height: auto;
}

/* =============== 遅延読み込み中のプレースホルダー =============== */
img[loading="lazy"] {
    background-color: #f5f5f5;
    background-image: linear-gradient(90deg, #f5f5f5 25%, #e5e5e5 50%, #f5f5f5 75%);
    background-size: 200% 100%;
    animation: loading-shimmer 1.5s infinite;
}

/* 読み込み完了後 */
img.lazy-loaded {
    animation: none;
    background: none;
}

@keyframes loading-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* =============== ヒーローセクションの画像最適化 =============== */
.hero-image {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.hero-image picture,
.hero-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* =============== ギャラリー画像の最適化 =============== */
/* 元のスタイルを維持しつつ、最小限の変更のみ適用 */
.gallery-item img {
    opacity: 1; /* デフォルトで表示 */
}

/* 遅延読み込み中の画像の透明度 */
.gallery-item img[loading="lazy"]:not(.lazy-loaded) {
    opacity: 0.7;
}

.gallery-item img.lazy-loaded {
    opacity: 1;
}

/* =============== 製品画像の最適化 =============== */
.product-images img {
    width: 100%;
    height: auto;
    display: block;
}

/* レスポンシブ時の画像サイズ調整 */
@media (max-width: 768px) {
    .hero-image {
        height: 60vh;
    }
    
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .hero-image {
        height: 50vh;
    }
    
    .gallery-grid {
        grid-template-columns: 1fr;
    }
}

/* =============== 画像のアクセシビリティ =============== */
img:not([alt]) {
    outline: 2px solid red;
}

/* =============== 印刷時の最適化 =============== */
@media print {
    img {
        max-width: 100%;
        page-break-inside: avoid;
    }
}