/**
 * 施工事例一覧ページのパフォーマンス最適化CSS
 */

/* 画像コンテナの最適化 */
.news_list .ph_sys {
  position: relative;
  background: #f5f5f5;
  overflow: hidden;
}

/* 画像の最適化設定 */
.news_list .ph_sys img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  /* パフォーマンス最適化 */
  will-change: transform;
  backface-visibility: hidden;
  /* スムーズな表示 */
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

/* 画像読み込み完了時 */
.news_list .ph_sys img[src] {
  opacity: 1;
}

/* 初期表示領域の画像を優先 */
.news_list li:nth-child(-n+6) .ph_sys img {
  /* 最初の6枚を優先読み込み */
  loading: eager !important;
}

/* レイアウトシフト防止 */
.news_list .ph_sys {
  aspect-ratio: 4 / 3;
}

/* スケルトンスクリーン効果 */
.news_list .ph_sys::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  z-index: 1;
}

.news_list .ph_sys img[src] + ::before {
  display: none;
}

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

/* モバイル最適化 */
@media (max-width: 768px) {
  .news_list .ph_sys {
    aspect-ratio: 16 / 9;
  }
  
  /* モバイルでは最初の3枚のみ優先 */
  .news_list li:nth-child(-n+3) .ph_sys img {
    loading: eager !important;
  }
}

/* パフォーマンス改善のためのGPU最適化 */
.news_list {
  transform: translateZ(0);
  will-change: scroll-position;
}

/* 仮想スクロール風の最適化 */
.news_list li.box {
  contain: layout style paint;
}