.share-buttons {
  max-width: 780px;
  margin: 0 auto 32px;
  padding: 0 24px;
}

.share-buttons__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.share-buttons__label {
  margin-right: 3px;
  color: #6b7280;
  font-size: .78rem;
  font-weight: 700;
}

.share-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  color: #fff !important;
  font: 700 .78rem/1 'Noto Sans JP', sans-serif;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform .2s, opacity .2s;
}

.share-button:hover { transform: translateY(-2px); opacity: .88; }
.share-button:focus-visible { outline: 3px solid rgba(108,99,255,.3); outline-offset: 2px; }
.share-button svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.share-button--x { background: #111; }
.share-button--facebook { background: #1877f2; }
.share-button--line { background: #06c755; }
.share-button--copy { background: #6c63ff; }
.share-button--native { background: linear-gradient(135deg,#6c63ff,#48c6ef); display: none; }
.share-button--copied { background: #16a34a; }

@media (max-width: 600px) {
  .share-buttons { padding: 0 18px; }
  .share-buttons__label { width: 100%; margin-bottom: 2px; }
  .share-button { flex: 1 1 auto; padding-inline: 12px; }
}