/* -------------------------------------
  MEMBERSHIP
------------------------------------- */

main.membership-page #membership {
  padding: 0 !important;
}

main.membership-page #membership > * + * {
  margin-top: 60px !important;
}

main.membership-page #membership .img-wrapper {
  overflow: hidden !important;
  border-radius: var(--image-radius) !important;
  background: color-mix(in srgb, var(--bg-color) 90%, var(--text-color)) !important;
  margin: 0 auto 30px !important;
}

main.membership-page #membership .img-wrapper .img {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 5 / 4;
  object-fit: cover !important;
}

main.membership-page #membership :is(.heading, .register > .heading, .reward-list > .title) {
  font-family: var(--font-family-heading-page) !important;
  font-weight: var(--font-weight-heading-page, 400) !important;
  line-height: 1.4 !important;
  color: var(--text-color) !important;
}

main.membership-page #membership :is(.heading) {
  margin: 0px 0 15px !important;
  font-size: var(--font-l) !important;
  letter-spacing: 0.03em !important;
}



.membership .guide .about-point {
  padding: 30px 30px 35px 30px !important;
  background-color: color-mix(in srgb, var(--text-color) 5%, transparent) !important;
  border-radius: var(--image-radius);
}

.membership .guide .about-point .heading-point {
  margin: 0 0 10px 10px !important;
  font-size: var(--font-m) !important;
  color: var(--text-color-muted) !important;
}


main.membership-page #membership .content .description,
main.membership-page #membership .about-point .description{
  margin-top: 0vw !important;
}
main.membership-page #membership .register .description-wrapper {
  margin-top: 2vw !important;
}

main.membership-page #membership .register .description,
main.membership-page #membership .register .description-wrapper {
  text-align: center !important;
}

main.membership-page #membership :is(.description p, .description, .description-details, .login) {
  font-size: var(--font-size-body-small) !important;
  line-height: 1.6 !important;
  letter-spacing: 0.05em !important;
  color: var(--text-color) !important;
  font-weight: 400 !important;
}

main.membership-page #membership .about-point .description {
  padding-left: 0 !important;
  margin-left: 0 !important;
}
main.membership-page #membership ul.description {
  margin: 0 !important;
  padding-left: 0 !important;
  list-style: none !important;
}
main.membership-page #membership ul.description li {
  position: relative;
  margin: 0 !important;
  padding: 0 0 0 2.1em !important;
}
main.membership-page #membership ul.description li + li {
  margin-top: 0.5em !important;
}
main.membership-page #membership ul.description li::before {
  content: "";
  position: absolute;
  top: 0.7em;
  left: 1em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text-color) 50%, transparent);
}

/* main.membership-page #membership .about-point .description-details + .description-details {
  margin-top: 0.55em !important;
} */

main.membership-page #membership .reward-list > .title {
  font-size: var(--font-size-body) !important;
  letter-spacing: 0.03em !important;
}

main.membership-page #membership .register > .heading {
  margin: 0 !important;
  font-size: var(--font-size-heading-page) !important;
  letter-spacing: 0.1em !important;
}

main.membership-page #membership .reward-list > .bar {
  width: 100% !important;
  height: 1px !important;
  border: 0 !important;
  background: var(--line-color-soft) !important;
  margin: 6px 0 10px 0 !important;
}

main.membership-page #membership .reward-card {
  padding: 0 !important;
}

main.membership-page #membership .reward-card a {
  display: block !important;
}

main.membership-page #membership .reward-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 3 / 4;
  object-fit: cover !important;
  margin-bottom: 20px !important;
  border-radius: calc(var(--image-radius) - 2px) !important;
}

main.membership-page #membership .reward-detail-wrapper .title {
  margin: 0 !important;
  font-size: var(--font-size-heading-card) !important;
  font-family: var(--font-family-heading-card) !important;
  font-weight: var(--font-weight-heading-card, 400) !important;
  line-height: 1.3 !important;
  letter-spacing: 0.04em !important;
  color: var(--text-color) !important;
}

main.membership-page #membership .exchange-point-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

main.membership-page #membership .exchange-point-icon {
  width: 18px !important;
  height: 18px !important;
}

main.membership-page #membership .exchange-point {
  font-family: var(--font-family-numeric) !important;
  font-size: var(--font-size-price) !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  color: var(--text-color) !important;
}

main.membership-page #membership .register {
  padding: 5vw !important;
  border: 0 !important;
  border-radius: calc(var(--image-radius) * 1.25) !important;
  background: var(--surface-color-soft) !important;
}

main.membership-page #membership .mail-magazine .label,
main.membership-page #membership .description-link,
main.membership-page #membership .login-link {
  color: var(--text-color) !important;
}

main.membership-page #membership .description-link,
main.membership-page #membership .login-link {
  text-decoration: underline !important;
}

main.membership-page #membership .link-wrapper .link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 46px !important;
  padding: 0 22px !important;
  border: 1px solid var(--button-primary-bg-color) !important;
  border-radius: 999px !important;
  background: var(--button-primary-bg-color) !important;
  color: var(--button-primary-text-color) !important;
  font-family: var(--font-family-sans) !important;
  font-size: var(--font-size-body-small) !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em !important;
  text-decoration: none !important;
  cursor: pointer;
}


/* -------------------------------------
  MEMBERSHIP MYPAGE
------------------------------------- */


.membership .mypage .content .definition-description {
background-color: color-mix(in srgb, var(--text-color) 5%, transparent) !important;
  border-radius: var(--image-radius) !important;

padding: 4vw !important;
}

.membership .mypage .content .customer-info-wrapper {
  margin-bottom: 0 !important;
}
.membership .mypage .content .customer-info-wrapper .customer-info {
  font-family: var(--font-family-heading-card) !important;
font-weight: var(--font-weight-heading-card, 400) !important;
line-height: 1.4 !important;
color: var(--text-color) !important;
}

.membership .mypage .card {
  margin-right: 3vw !important;
  border: 1px solid var(--line-color-soft) !important;
  gap: 10px !important;
}
.membership .mypage .card .logo-text {
  font-size: var(--font-l) !important;
  font-weight: var(--font-weight-heading-card, 500) !important;
  font-family: var(--font-family-heading-card) !important;

}
.membership .mypage .card .membership-name {
  font-weight: normal !important;
  font-size: var(--font-s) !important;
}
.membership .mypage .content .bar {
  background-color: var(--line-color-soft) !important;
}

.membership .mypage .reward-list .howto {
  background-color: color-mix(in srgb, var(--text-color) 5%, transparent) !important;
  border-radius: var(--image-radius) !important;
  }


.membership .point-history .content .point-history-summary .point-name {
  font-family: var(--font-family-heading-card) !important;
  font-size: var(--font-size-m) !important;
  font-weight: var(--font-weight-heading-card, normal) !important;
  line-height: 1.6 !important;
  letter-spacing: 0.02em !important;
  color: color-mix(in srgb, var(--text-color) 90%, transparent) !important;
}

.membership .mypage .content .customer-info-wrapper .edit-wrapper .edit,
.membership .mypage .logout,
.membership .mypage .leave-wrapper .leave {
 background-color: color-mix(in srgb, var(--text-color) 10%, transparent) !important;
 border-radius: 999px;
 font-size: var(--font-s) !important;
 color: var(--text-color) !important;
 padding: 10px 30px !important;
 text-decoration: none !important;
}
.membership .mypage .content .customer-info-wrapper .edit-wrapper .edit {
   padding: 5px 20px !important;
    font-size: var(--font-xs) !important;
}