@charset "UTF-8";
/* ============================================================
   提供価値カード（アイコン＋見出し＋説明＋タグ）の見た目。組み方は template-parts/service/values.php。
   SNS・meta・インフルエンサー・クリエイティブの4ページで使う。
   値は fiz-tokens.css（src/tokens.css の写し）を使う。2026-09-24 部品ごとの整理でここへ移動。
   ============================================================ */
/* ---- 提供価値（横長カード：アイコン＋見出し＋説明＋#タグ） ---- */
.svc-values-section {
  background: var(--color-bg-neutral, #F2F2F2); /* 2026-09-24 本人決定: うすいピンク→決まりの薄背景色 */
}

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

.svc-value {
  background: var(--color-white);
  border-radius: var(--radius-card);
  border: 0.5px solid var(--color-primary); /* 2026-09-24 本人決定: 赤は差し色として使う（カードの枠線） */
  padding: 24px 20px;
}

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

.svc-value__icon {
  flex: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
}

.svc-value__title {
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  margin: 0;
  color: var(--color-text);
}

.svc-value__desc {
  margin: 0 0 12px;
  font-size: var(--font-size-body);
}

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

.svc-value__tags li {
  /* Figma：#タグは 16px・太さ400・色 #666666（本文より薄い灰色）。本文と同じ濃さ・太さになっていて文章量が多く見えると本人指摘（2026-09-17） */
  font-size: var(--font-size-min);
  font-weight: var(--font-weight-normal);
  color: #666666;
}



@media (min-width: 1024px) {

  .svc-value__tags li {
      font-size: var(--font-size-body); /* Figma の PC 指定 */
      font-size: var(--font-size-body);
    
  }

  /* 5枚のカードで左の列の幅を共有する（subgrid）。一番長い見出しに合わせた幅を全カードで使うので、右の説明文の始点がそろう
       （2026-09-17 本人指摘：カードごとに幅が変わって右側の始点がガタガタになった） */
  .svc-values {
      display: grid;
      grid-template-columns: minmax(287px, max-content) 1fr;
      column-gap: 32px;
    
  }

  .svc-value {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: subgrid;
      row-gap: 10px;
      align-items: start;
      padding: 36px 32px 37px;
      border: 0.5px solid var(--color-primary); /* 2026-09-24 本人決定: 赤は差し色として使う */
    
  }

  .svc-value__head {
      grid-column: 1;
      grid-row: 1 / span 2;
      align-self: center;
      margin: 0;
      gap: 11px;
    
  }

  .svc-value__icon {
      width: 40px;
      height: 40px;
    
  }

  .svc-value__title {
      font-size: 24px;
      line-height: 1.3;
      white-space: nowrap;
    
  }

  .svc-value__desc {
      grid-column: 2;
      grid-row: 1;
      margin: 0;
      font-size: var(--font-size-body);
      line-height: 1.6;
    
  }

  .svc-value__tags {
      grid-column: 2;
      grid-row: 2;
      gap: 6px 16px;
    
  }}