:root {
  --widthPC: 700px;
}

.referral__wrapper {
  container-type: inline-size;
  margin: auto;
  inline-size: min(100%, var(--widthPC)) !important;
  padding-block-end: 50px;

  a {
    text-decoration: none;
  }
}

.referral__wrapper figure,
.referral__wrapper img {
  inline-size: min(100%, var(--widthPC)) !important;
  block-size: auto;
  margin-inline: auto !important;
  display: block;
}

.referral__wrapper .relative {
  position: relative;
}

.referral__wrapper .sp-only,
.referral__wrapper .sp-only {
  display: none;
}

.referral__wrapper .pc-only,
.referral__wrapper .pc-only {
  display: block;
}
@media (any-hover: hover) {
  .referral__wrapper a:hover {
    cursor: pointer;
    opacity: 0.8;
  }
}

@media (max-width: 480px) {
  .referral__wrapper .sp-only,
  .referral__wrapper .sp-only {
    display: block;
  }

  .referral__wrapper .pc-only {
    display: none;
  }
}