/* ==========================================================================
   13. SUPPORT RECORD (支援実績)
   SP: 97-280 (390px canvas) / PC: 91-296 (1440px canvas)
   ========================================================================== */

.record {
  background: var(--color-white);
  padding: 64px 22px;
  font-family: var(--font-base);
}

.record__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
}

/* Header
   -------------------------------------------------------------------------- */
.record__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.record__eyebrow {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 3.5px;
  color: var(--color-gold);
}

.record__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.45;
  letter-spacing: 1.4px;
  color: var(--color-text);
  text-align: center;
}

.record__lead {
  font-size: 14px;
  font-weight: 700;
  line-height: 21px;
  color: var(--color-text);
  text-align: center;
}

.record__desc {
  align-self: stretch;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 400;
  line-height: 25px;
  color: var(--color-text);
  text-align: left;
}

/* Groups
   -------------------------------------------------------------------------- */
.record__groups {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.record__group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.record__group-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.record__group-title {
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.45;
  color: #0a1128;
}

.record__group-line {
  flex: 1;
  height: 1px;
  background: rgba(201, 162, 75, 0.35);
}

/* Tags
   -------------------------------------------------------------------------- */
.record__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 9px;
}

.record__tag {
  padding: 11px 14px 12px;
  background: var(--color-white);
  border-radius: 999px;
  font-size: 12px;
  line-height: 17.4px;
  color: #0a1128;
}

.record__group--individual .record__tag {
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(224, 169, 46, 0.4);
}

.record__group--team .record__tag {
  font-weight: 500;
  box-shadow: inset 0 0 0 1px rgba(10, 17, 40, 0.25);
}

/* Note
   -------------------------------------------------------------------------- */
.record__note {
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.45;
  color: #6e6e68;
  text-align: center;
}

/* PC
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .record {
    padding: 120px 130px;
  }

  .record__inner {
    gap: 56px;
  }

  .record__header {
    gap: 15px;
  }

  .record__eyebrow {
    font-size: 20px;
    line-height: 29px;
    letter-spacing: 6px;
    color: #e0a92e;
  }

  .record__title {
    font-size: 46px;
    line-height: 66.6px;
    letter-spacing: 2px;
    color: #0a1128;
  }

  .record__lead {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 800;
    line-height: 31.9px;
    color: var(--color-gold);
  }

  .record__desc {
    align-self: center;
    max-width: 860px;
    margin-top: 0;
    line-height: 30.8px;
    color: #333333;
    text-align: center;
  }

  .record__groups {
    gap: 36px;
  }

  .record__group {
    gap: 20px;
  }

  .record__group-header {
    gap: 16px;
  }

  .record__group-title {
    font-size: 19px;
  }

  .record__group--team .record__group-line {
    background: rgba(10, 17, 40, 0.25);
  }

  .record__tags {
    gap: 12px 11.5px;
  }

  .record__tag {
    padding: 12px 21px;
    font-size: 13.5px;
    line-height: 19.5px;
  }
}