/* =============================================
   SNS Section
   ============================================= */

.sns-section {
  padding: 72px 0;
}

.sns-section__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-side);
}

.sns-section__group {
  margin-top: 32px;
}

.sns-section__label {
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: 0.19em;
  color: var(--color-black);
  margin-bottom: 16px;
}

/* ボタングリッド */
.sns-section__buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.sns-section__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  background: var(--color-black);
  transition: opacity 0.2s;

  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  &:hover {
    opacity: 0.8;
  }
}

/* ============ レスポンシブ ============ */
@media (max-width: 768px) {
  .sns-section__btn {
    height: 60px;
    /* img は object-fit: cover でセル全体を埋める（上下の黒帯を消す） */
  }
}