/* clients.css — お取引企業数バッジ帯（Figma: 2008:9137 / CLIENTS）
   実値: 青グラデ帯 radius 32px max-width 1200px / 内側 980px py 80px
         バッジ: 月桂冠SVG + 金文字 #FAD16B / 数字 Outfit Bold 72px */

.clients {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.clients__band {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--layout-max);
  border-radius: var(--radius-32);
  background: var(--gradient-band-blue);
  overflow: hidden;
}

.clients__watermark {
  position: absolute;
  top: -.875rem;
  left: -1.8125rem;
  margin: 0;
  font-size: var(--font-size-watermark);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-wider);
  white-space: nowrap;
  background: var(--gradient-white-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.14;
  text-shadow: var(--shadow-watermark);
  pointer-events: none;
}

.clients__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-40);
  width: 61.25rem;
  max-width: 100%;
  padding: var(--space-80) 0;
}

/* 見出しは section-heading を流用（gapのみ16px） */
.clients__inner .section-heading {
  gap: var(--space-16);
}

.clients__badges {
  display: flex;
  align-items: center;
  gap: var(--space-32);
  width: 100%;
  padding: 0 var(--space-40);
  margin: 0;
  list-style: none;
}

.client-badge {
  position: relative;
  flex: 1;
  min-width: 0;
  aspect-ratio: 1 / 1;
}

.client-badge__wreath {
  position: absolute;
  top: 10.05%;
  right: 0;
  bottom: 3.47%;
  left: 0;
}

.client-badge__wreath img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.client-badge__stars {
  position: absolute;
  top: 15.07%;
  left: 50%;
  transform: translateX(-50%);
  width: 3.75rem;
  height: 1.3125rem;
}

.client-badge__content {
  position: absolute;
  top: 28.5%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--color-gold);
  text-align: center;
  white-space: nowrap;
}

.client-badge__label {
  margin: 0;
  font-size: var(--font-size-h3-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.client-badge__count {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  /* 数字と単位を必ず同一行に（「37」「社」が縦割れしない） */
  white-space: nowrap;
}

.client-badge__number {
  font-family: var(--font-family-en);
  font-size: var(--font-size-en-title);
  letter-spacing: var(--letter-spacing-number);
}

.client-badge__unit {
  font-size: var(--font-size-h2);
}

/* --- SP: バッジは折り返して2列 ------------------------------------------- */
@media (max-width: 767px) {
  /* SPは帯が画面幅いっぱいに広がり角丸が画面の角に来るため、角丸なしにする */
  .clients__band {
    border-radius: 0;
  }
  .clients__inner {
    gap: var(--space-32);
    padding: var(--space-48) 0;
  }
  .clients__badges {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-24);
    padding: 0 var(--space-24);
  }
  .client-badge {
    flex: 0 0 40%;
  }
  .client-badge__label {
    font-size: var(--font-size-h5);
  }
  .client-badge__number {
    font-size: var(--font-size-h1);
  }
  .client-badge__unit {
    font-size: var(--font-size-h3);
  }
  .client-badge__stars {
    width: 2.5rem;
    height: 0.875rem;
  }
}