/* =====================================================
   Components: Buttons
===================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 32px;
  border-radius: 100px;
  font-family: var(--ff-ja); font-size: 14px; font-weight: 500;
  letter-spacing: .06em;
  border: 2px solid transparent;
  transition: background var(--trans), color var(--trans), border-color var(--trans), transform .25s ease;
  white-space: nowrap;
}
.btn--primary { background: var(--clr-main); color: var(--clr-white); border-color: var(--clr-main); }
.btn:hover { transform: translateY(-4px); }
.btn--primary:hover { background: var(--clr-main-dark); border-color: var(--clr-main-dark); opacity: 1; }
.btn--pink { background: var(--clr-sub2); color: var(--clr-white); border-color: var(--clr-sub2); }
.btn--pink:hover { background: #c87fb8; border-color: #c87fb8; opacity: 1; }
.btn--sm  { padding: 10px 24px; font-size: 13px; }
.btn--lg  { padding: 14px 56px; font-size: 28px; font-weight: 500; }