/* 画像の改善スタイル */

/* 画像のフェードインアニメーション */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 画像の遅延読み込みスタイル */
img {
  animation: fadeInUp 0.6s ease-out;
}

/* カード画像のホバー効果を強化 */
.card-with-image {
  transition: all 0.3s ease;
}

.card-with-image:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}

/* 実績カードの画像スタイル */
.card .card-image img {
  transition: transform 0.4s ease, filter 0.3s ease;
}

.card:hover .card-image img {
  transform: scale(1.08);
  filter: brightness(1.05);
}

/* グリッドレイアウトの改善 */
@media (max-width: 768px) {
  .grid.cols-3,
  .grid.cols-4 {
    grid-template-columns: 1fr;
  }
}

/* セクション間の視覚的な区切り */
.section {
  position: relative;
}

.section:nth-child(even) {
  background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
}

/* 画像の読み込み最適化 */
img[loading="lazy"] {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

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

img[loading="lazy"].loaded {
  animation: fadeInUp 0.6s ease-out;
  background: none;
}

/* 画像のレスポンシブ対応 */
.hero-image img,
.card-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* about.htmlの2カラムレイアウト用 */
[style*="grid-template-columns:1fr 1fr"] img {
  max-width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}