@charset "UTF-8";
/* ============================================================
   「こんな課題はありませんか」課題カードの見た目。組み方は template-parts/service/challenges.php。
   SNS・meta・インフルエンサー・クリエイティブの4ページで使う。
   値は fiz-tokens.css（src/tokens.css の写し）を使う。2026-09-24 部品ごとの整理でここへ移動。
   ============================================================ */
/* ---- 課題カード ---- */
.svc-cards {
  display: grid;
  gap: var(--space-16);
  counter-reset: card;
}

.svc-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-white);
  padding: var(--space-24);
}

.svc-card__title {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  margin: 0 0 8px;
  color: var(--color-text);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* Figmaの課題カードは連番でなくアイコン表示のため、アイコンありのカードは装飾番号を出さない */
.svc-card--icon .svc-card__icon {
  flex: none;
  width: 32px;
  height: 32px;
}

.svc-card--numbered .svc-card__title::before {
  counter-increment: card;
  content: counter(card, decimal-leading-zero);
  display: block;
  font-family: var(--font-en);
  font-size: var(--font-size-min, 14px); /* 2026-09-24 DADS対応: '13'px→14px */
  color: var(--color-primary); /* 2026-09-24 本人決定: 赤は差し色として使う（課題カードの番号） */
  letter-spacing: 1px;
  margin-bottom: var(--space-8);
}

.svc-card__desc {
  margin: 0;
  font-size: var(--font-size-body);
  color: var(--color-text);
}

.svc-card__chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
}

.svc-card__chips li {
  font-size: var(--font-size-min);
  padding: 4px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
}



@media (min-width: 768px) {

  .svc-cards {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-24);
    
  }}



@media (min-width: 1024px) {

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

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