/* ============================================================
   対応サービス（NAYOSEL_integrations / NAYOSEL_integrations_SP 準拠）
   ============================================================ */

.svc { padding: 92px 0 0; }
.svc__head { display: flex; align-items: flex-start; gap: 29px; }
.svc__badge {
  flex: 0 0 123px;
  min-height: 68px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-bottom: 4px solid var(--orange);
  box-shadow: 0 4px 5px rgba(27, 53, 146, 0.1);
}
.svc__badge--dark { background: var(--ink); }
.svc__badge--orange { background: var(--orange); border-bottom-color: var(--ink); }
.svc__ttl { font-size: 32px; font-weight: 700; letter-spacing: 0.08em; line-height: 1.2; }
.svc__ttl-sub { font-size: 18px; letter-spacing: 0.06em; }
.svc__lead { margin-top: 10px; font-size: 16px; font-weight: 500; line-height: 30px; letter-spacing: 0.02em; }
.svc__grid { margin-top: 50px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px 13px; }
.svc-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 15px rgba(27, 53, 146, 0.05);
  padding: 30px 30px 26px;
  text-align: center;
}
.svc-card__img { margin: 0 auto; }
.svc-card__name { margin-top: 26px; font-size: 18px; font-weight: 700; letter-spacing: 0.02em; }
.svc-card__sub { margin-top: 2px; font-size: 13px; font-weight: 500; color: #99adb2; }

/* ---------- 同梱の参照データ ---------- */
.refdata {
  margin-top: 100px;
  padding: 60px 0 128px;
  background: linear-gradient(180deg, #f1f5f4 0, var(--bg-card) 238px, var(--bg-card) 100%);
}
.refdata__note { display: inline-block; margin-top: 6px; font-size: 13px; color: var(--gray); line-height: 24px; }
.refdata__grid { margin-top: 58px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.svc-stat {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 15px rgba(27, 53, 146, 0.05);
  padding: 20px 20px 30px;
  text-align: center;
}
.svc-stat__tag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 195px;
  height: 35px;
  margin: 0 auto;
  border-radius: 100px;
  background: #dfebe7;
  font-size: 15px;
  font-weight: 500;
}
.svc-stat__tag--orange { background: var(--orange); color: #fff; }
.svc-stat__val { margin-top: 26px; font-size: 18px; font-weight: 700; line-height: 1.2; }
.svc-stat__big { font-size: 50px; letter-spacing: 0.02em; }
.svc-stat__val--orange { color: var(--orange); }
.svc-stat__cap { margin-top: 22px; font-size: 13px; font-weight: 500; color: #99adb2; }

@media (max-width: 768px) {
  .svc { padding: 56px 0 0; }
  .svc__head { flex-direction: column; gap: 16px; }
  .svc__badge { flex: none; width: 110px; min-height: 56px; font-size: 17px; }
  .svc__ttl { font-size: 24px; }
  .svc__ttl-sub { display: block; font-size: 15px; margin-top: 4px; }
  .svc__lead { font-size: 14px; line-height: 26px; }
  .svc__grid { margin-top: 28px; grid-template-columns: repeat(2, 1fr); gap: 14px 12px; }
  .svc-card { padding: 18px 12px 18px; border-radius: 14px; }
  .svc-card__img { width: 100%; max-width: 200px; height: auto; }
  .svc-card__name { margin-top: 14px; font-size: 15px; }
  .svc-card__sub { font-size: 11px; }

  .refdata { margin-top: 60px; padding: 44px 0 80px; }
  .refdata__grid { margin-top: 32px; grid-template-columns: 1fr; gap: 18px; }
  .svc-stat__tag { width: 180px; }
}

/* 入力対応サービス 全一覧（Passwork入力コネクタと1:1・ロゴはPasswork資産） */
.svc-all { margin-top: 72px; }
.svc-all__ttl { font-size: 24px; font-weight: 700; letter-spacing: 0.06em; }
.svc-all__count { margin-left: 14px; font-size: 13px; font-weight: 700; color: #fff; background: var(--orange); border-radius: 100px; padding: 3px 14px; vertical-align: 4px; }
.svc-all__cat { margin-top: 44px; font-size: 14px; font-weight: 700; color: #99adb2; letter-spacing: 0.08em; }
.svc__grid--all { margin-top: 18px; grid-template-columns: repeat(6, 1fr); gap: 13px; }
.svc-card--logo { padding: 22px 12px 18px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.svc-card--logo .svc-card__img { height: 44px; width: auto; max-width: 82%; object-fit: contain; }
.svc-card--logo .svc-card__name { margin-top: 14px; font-size: 13px; line-height: 1.4; }
.svc-card--logo .svc-card__sub { margin-top: 2px; font-size: 10px; }
@media (max-width: 768px) {
  .svc-all { margin-top: 48px; }
  .svc-all__ttl { font-size: 18px; }
  .svc-all__count { margin-left: 10px; padding: 2px 12px; font-size: 12px; vertical-align: 2px; }
  .svc-all__cat { margin-top: 32px; }
  .svc__grid--all { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}