.member {
  max-width: 640px;
}

.member-form {
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: 1fr;
}

.multiple-submit > label.input-label,
.multiple-submit > div.input-block,
.confirm-list li {
  border-bottom: 1px solid var(--primary-color-200);
}

.member-form-button {
  display: flex;
  flex-direction: column;
  row-gap: 24px;
}

.member-form button {
  margin: 48px auto 0;
}

@media screen and (max-width: 769px) {
  .member-form-button {
    row-gap: 16px;
  }
  .member-form button {
    margin: 32px auto 0;
  }
}

.member .notice {
  padding-bottom: 32px;
}

@media screen and (max-width: 769px) {
  .member .notice {
    padding-bottom: 24px;
  }
}

.input-label,
.confirm-list-item {
  display: grid;
  grid-template-columns: 210px 1fr;
  column-gap: 12px;
  align-items: center;
  text-align: left;
  font: var(--font-body-small-bold);
  border: 0;
  padding: 0 12px;
}

.label-title {
  font: var(--font-body-small-bold);
}

.multiple-submit {
  border-top: 1px solid var(--primary-color-200);
}

.multiple-submit .input-label,
.confirm-list .confirm-list-item {
  padding: 32px 12px;
}

/* .multiple-submit .input-label:has([name=input_password]) {
  border-bottom: none;
} */

@media screen and (max-width: 769px) {
  .multiple-submit .input-label,
  .confirm-list .confirm-list-item {
    padding: 24px 8px;
  }
}

.input-block {
  display: flex;
  flex-direction: column;
  row-gap: 24px;
  /*border-bottom: 1px solid var(--primary-color-200);*/
  padding: 24px 0;
}

.input-block .input-label {
  border: 0;
  padding: 0 12px;
}

@media screen and (max-width: 769px) {
  .input-block {
    row-gap: 16px;
  }
  .input-block .input-label {
    padding: 0 8px;
  }
}

.required-text {
  font: var(--font-body-small);
  text-align: left;
}


/* .input-group .description {
  color: var(--text-color-main);
} */

.input-label .name {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 12px;
}

.input-label .name-kana {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 12px;
}

.inputField-small {
  width: 196px;
}

.input-radio,
.input-checkbox {
  display: flex;
  flex-direction: row;
  column-gap: 24px;
  align-items: center;
  font: var(--font-body-medium);
}
.input-checkbox:has(input:checked) span {
  font-weight: 700;
}
.input-radio .horizontal,
.input-checkbox .horizontal {
  display: flex;
  flex-direction: row;
  column-gap: 4px;
  align-items: center;
}

select.with-placeholder:invalid {
  color: var(--text-color-place-holder);
}

.input-radio label:has(input[type="radio"]:checked) {
  font-weight: 700;
}

.display-selection .display-contents1,
.display-selection .display-contents2,
.display-selection .display-contents3,
.display-selection .display-contents4,
.display-selection .display-contents5 {
  display: none;
}

.display-selection:has(.display-chooser1:checked) .display-contents1,
.display-selection:has(.display-chooser2:checked) .display-contents2,
.display-selection:has(.display-chooser3:checked) .display-contents3,
.display-selection:has(.display-chooser4:checked) .display-contents4,
.display-selection:has(.display-chooser5:checked) .display-contents5 {
  display: block;
}

.to-address .input-radio,
.payment .input-radio {
  flex-direction: column;
  align-items: flex-start;
  row-gap: 24px;
}
.to_address_inputs {
  margin-top: 24px;
}

.payment-credit {
  width: 100%;
  box-sizing: border-box;
  /*padding-top: 16px;*/
}
.payment-credit .frame {
  margin-top: 16px;
}

@media screen and (max-width: 769px) {
  .payment-credit.indent {
    padding-left: 0;
  }
}
.payment-credit .use-card {
    margin: 16px 0 0;
}
.payment-credit .temp_card,
.payment-credit .registed_card {
  flex-wrap: wrap;
}
.payment-credit .description {
  margin: 4px 0 0;
}
.payment .frame {
  padding: 16px;
  text-align: left;
  width: 100%;
}
.payment .frame .card-info {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: 0.02em;
  width: 100%;
}
.payment .frame label {
  margin-bottom: 0 !important;
}

.use-card {
  text-align: left;
}
.use-card img {
  width: 300px;
  margin-top: 8px;
}

.input-value {
  width: 100%;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: 0.02em;
  text-align: left;
}

.input-password {
  position: relative;
}

.input-password input {
  padding-right: 40px;
}

.input-password .password-toggle-button {
  background: url(/static_files/img/icon/eye-on.svg) no-repeat center;
  display: inline-block;
  position: absolute;
  right: 12px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  cursor: pointer;
}

.input-password:has(input[type="password"]) .password-toggle-button {
  background-image: url(/static_files/img/icon/eye-off.svg);
}

.input-suffix {
  display: grid;
  grid-template-columns: 196px 1fr;
  align-items: center;
  column-gap: 16px;
  justify-self: flex-start;
}

.input-suffix input {
  width: 253px;
}

.input-suffix::after {
  content: '';
  flex: 1;
}
.input-suffix .button.suffix {
  width: 90px;
  font-weight: normal;
  margin: 0;
}

@media screen and (max-width: 769px) {
  .input-suffix input {
    flex: 1;
  }
  .input-suffix::after {
    content: none;
  }
  .input-suffix .button.suffix {
    height: 44px;
  }
}

.confirm-list {
  margin-top: 24px;
  margin-bottom: 32px;
}

.confirm-list .input-value {
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: 0.02em;
  text-align: left;
}

.required {
  color: var(--text-color-required);
}

@media screen and (max-width: 769px) {
  .member-form {
    margin: 24px 0 0;
  }
  .input-label,
  .confirm-list-item {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

.tel-no-description {
  text-align: left;
  margin: 48px auto 56px;
}
@media screen and (max-width: 769px) {
  .tel-no-description {
    width: 100%;
    margin-top: 32px;
    margin-bottom: 24px;
  }
}
.sub-description {
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: 0.02em;
  text-align: left;
}

.receive-error-info {
  max-width: 640px;
}

form .error_input {
  border-color: var(--status-color-danger);
}

form .error_message {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.02em;
  text-align: left;
  margin-top: 4px;
  margin-bottom: unset;
}

/* 新規会員登録完了 */
.vpoint-regist {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  gap: 32px;
  margin-top: 32px;
}
.vpoint-regist-notice {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  align-self: stretch;
  font: var(--font-body-medium-bold);
}
.vpoint-regist-notice img {
  width: 24px;
  height: 24px;
}
.vpoint-regist-arrow {
  width: 78px;
  margin: 0 auto;
}
.vpoint-regist-heading p {
  position: relative;
  font: var(--font-body-h3);
  padding-bottom: 16px;
}
.vpoint-regist-heading p:before,
.vpoint-regist-heading p:after {
  position: relative;
  display: inline-block;
  content: "";
  background: var(--primary-color-900);
  border-radius: 8px;
  width: 2px;
  height: 16px;
  margin: 0 24px;
  margin-top: -4px;
  vertical-align: middle;
}
.vpoint-regist-heading p:before {
  transform: rotate(-35deg);
}
.vpoint-regist-heading p:after {
  transform: rotate(35deg);
}
.vpoint-regist-body {
  padding: 0;
  display: flex;
  flex-direction: column;
}
.vpoint-regist-body picture img {
  width: 100%;
}
.vpoint-regist-button {
  display: flex;
  padding: 16px 40px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  background: var(--background-color-pale-blue);
  border-radius: 0px 0px 12px 12px;
}
.vpoint-regist-button .text-link {
  margin: 0;
  display: flex;
  flex-direction: row;
  gap: 4px;
  color: var(--text-link-color-blue);
}
.vpoint-regist-button .text-link img {
  width: 20px;
  height: 20px;
  filter: invert(14%) sepia(10%) saturate(6983%) hue-rotate(200deg) brightness(95%) contrast(108%);
}
.vpoint-regist-button .button-secondary {
  margin: 0;
  background: var(--background-color-white);
}
@media screen and (max-width: 769px) {
  .vpoint-regist {
    gap: 24px;
    margin-top: 24px;
  }
  .vpoint-regist-heading p {
    font: var(--font-body-medium-bold);
  }
  .vpoint-regist-button {
    padding: 24px 16px;
    flex-direction: column;
    gap: 16px;
  }
}

.tokutei .confirm-list {
  border-top: 1px solid var(--primary-color-200);
}
.tokutei .confirm-list-item div,
.tokutei .confirm-list-item p {
  font: var(--font-body-medium);
}
.tokutei .confirm-list-item ul.description {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tokutei .confirm-list-item ul.description li {
  border: none;
}
.tokutei .available_cards {
  width: 300px;
}

dialog .close-button {
  width: 28px;
  height: 28px;
  background: unset;
  border: unset;
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  padding: 0;
  display: flex;
  border-radius: 50%;
  background: var(--primary-color-20);
  justify-content: center;
  align-items: center;
}