@charset "UTF-8";
/* ============================================================
   関連実績カードの見た目。組み方は template-parts/service/works.php。
   SNS・meta・インフルエンサー・クリエイティブの4ページで使う。
   値は fiz-tokens.css（src/tokens.css の写し）を使う。2026-09-24 部品ごとの整理でここへ移動。
   ============================================================ */
/* ---- 関連実績 ---- */
.svc-works {
  background: var(--color-gray-light);
}

.svc-works__grid {
  display: grid;
  gap: var(--space-16);
}

.svc-work-card {
  background: var(--color-white);
  border-radius: var(--radius-card);
  overflow: hidden;
  text-decoration: none;
  color: var(--color-text);
  display: block;
}

.svc-work-card__img {
  aspect-ratio: 4 / 3;
  /* サムネは実データ未確定のため赤系グラデーションで代用（Figmaも仮の赤グラデーション） */
  background: linear-gradient(135deg, #f2c9c9, var(--color-primary));
 overflow: hidden; 
}

.svc-work-card__body {
  padding: var(--space-24);
}

.svc-work-card__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 12px;
}

.svc-work-card__tag {
  display: inline-block;
  font-family: var(--font-en);
  font-size: var(--font-size-min);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.5px;
  color: var(--color-primary); /* 2026-09-24 本人決定: 赤は差し色として使う（実績タグ） */
  margin: 0;
}

.svc-work-card__date {
  font-family: var(--font-en);
  font-size: var(--font-size-min);
  font-weight: var(--font-weight-bold);
  color: #6a6a6a;
}

.svc-work-card h3 {
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  margin: 0;
  line-height: var(--line-height-heading);
}

.svc-work-card__img img {
  display: block; width: 100%; height: 100%; object-fit: cover; 
}



@media (min-width: 768px) {

  .svc-works__grid {
      grid-template-columns: repeat(3, 1fr);
    
  }}