:root {
  --registration-region-options-amount: 5;
  --registration-step1-panel-width: 90vw;
  --registration-step1-panel-height: 60vw;
  --registration-region-select-width: 35vw;
  --registration-region-select-height: 9vw;
  --registration-phone-input-width: 45vw;
  --registration-phone-input-margin-left: 2vw;

  --registration-step2-panel-width: 90vw;
  --registration-step2-panel-height: 63vw;

  --registration-step3-panel-width: 90vw;
  --registration-step3-panel-height: 72vw;
}

#registration {
  background-image: url(image/common/BgWithArcane.jpg);
  display: flex;
  flex-direction: column;
  align-items: center;
}

#registration-title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(15px, 6vw, 25px);
  text-align: center;
  padding-top: 20vw;
  /* margin-bottom: calc((var(--page-height) + var(--registration-panel-spacing) - var(--registration-step1-panel-height) - var(--registration-step2-panel-height) - var(--registration-step3-panel-height)) / 2) */
}

#registration-step1-panel {
  display: grid;
  flex-direction: column;
  align-items: center;
  width: var(--registration-step1-panel-width);
  min-height: var(--registration-step1-panel-height);
  margin-top: -5vw;
}

#registration-step1-panel-bg {
  width: calc(var(--registration-step1-panel-width) * 1.22);
  height: var(--registration-step1-panel-height);
  margin-left: calc(var(--registration-step1-panel-width) * -0.22 / 2 - 0.3vw);
  grid-area: 1/1;
}

#registration-step1-panel-title {
  display: inline-block;
  white-space: normal;
  word-break: break-word;
  width: calc(var(--registration-step1-panel-width) * 0.6);
  text-align: left;
  font-size: 3.7vw;
  margin-top: calc(-50% + 21vw);
  margin-left: 10vw;
  grid-area: 1/1;
}

#registration-step1-panel-title label {
  font-size: 3.7vw;
  display: none;
}

#registration-phone-row {
  --registration-phone-row-width: calc(var(--registration-region-select-width) + var(--registration-phone-input-width) + var(--registration-phone-input-margin-left));
  width: var(--registration-phone-row-width);
  margin-top: -20px;
  margin-left: calc(var(--registration-step1-panel-width) / 2 - var(--registration-phone-row-width) / 2);
  display: flex;
  justify-content: space-between;
  grid-area: 1/1;
}

#registration-region-select {
  width: var(--registration-region-select-width);
  height: var(--registration-region-select-height);
  user-select: none;
}

#registration-region-selected-option {
  width: 100%;
  height: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 0vw;
}

#registration-region-selected-option span {
  font-size: 3vw;
  color: #746458;
}

#registration-region-options-root {
  width: 100%;
  height: calc(var(--registration-region-options-amount) * 95% + 7px);
  display: none;
}

#registration-region-options-bg {
  width: calc(var(--registration-region-select-width));
  height: calc(var(--registration-region-options-amount) * var(--registration-region-select-height) + 10px);
  z-index: 100;
  grid-area: 1/1;
}

#registration-region-options-container {
  width: calc(var(--registration-region-select-width) * 0.985);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10px;
  margin-left: 0vw;
  z-index: 200;
  grid-area: 1/1;
}

#registration-region-options-container div {
  width: 100%;
  height: calc(var(--registration-region-select-height) - 10px);
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 5px;
  margin-bottom: 2.5px;
  padding-left: 2.5vw;
}

#registration-region-options-container div:hover {
  background-color: #dbbb9e;
}

#registration-region-options-container div span {
  padding-right: 12px;
  font-size: 3vw;
  color: #746458;
}

#registration-phone-input-root {
  width: var(--registration-phone-input-width);
  height: var(--registration-region-select-height);
  margin-left: var(--registration-phone-input-margin-left);
  align-items: center;
  display: grid;
}

#registration-phone-input-bg {
  width: var(--registration-phone-input-width);
  height: var(--registration-region-select-height);
  grid-area: 1/1;
}

#registration-phone-input {
  background-color: rgba(0, 0, 0, 0);
  width: 80%;
  height: 30px;
  margin-left: 10%;
  line-height: 3vw;
  grid-area: 1/1;
  border: none;
  outline: none;
  font-size: 3vw;
  color: #6f655b;
}

#registration-btn {
  background-image: url(image/MainBtn_SignUp.png);
  width: 40vw;
  height: 13.6vw;
  /* aspect-ratio: 470/160; */
  background-size: cover;
  background-repeat: no-repeat;
  cursor: pointer;
  margin-top: 19vw;
  grid-area: 1/1;
  margin-left: calc(var(--registration-step1-panel-width) / 2 - 40vw / 2);
}

#registration-step2-panel {
  width: var(--registration-step2-panel-width);
  height: var(--registration-step2-panel-height);
  position: relative;
  margin-top: -18vw;
  display: grid;
}

#registration-step2-panel-bg {
  width: calc(var(--registration-step2-panel-width) * 1.22);
  height: var(--registration-step2-panel-height);
  margin-left: calc(var(--registration-step2-panel-width) * -0.22 / 2 - 0.3vw);
  grid-area: 1/1;
}

#registration-step2-panel-title {
  font-size: 3.7vw;
  margin-top: 12.5vw;
  margin-left: 10vw;
  width: 300px;
  grid-area: 1/1;
}

#registration-step2-panel-content {
  margin-top: 23vw;
  margin-left: 1.5%;
  padding-left: 0px;
  width: 90%;
  height: 80%;
  display: flex;
  flex-direction: initial;
  align-items: start;
  grid-area: 1/1;
  /* background-color: red; */
}

#registration-step2-panel-content-reward {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* background-color: pink; */
}

#registration-step2-reward {
  width: 28vw;
  height: 20vw;
  margin-top: 0px;
  margin-bottom: -10px;
}

#registration-step2-panel-t1 {
  font-size: 3vw;
}

#registration-step2-panel-t2 {
  font-size: 2.4vw;
}

#registration-step2-panel-store-btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 37%;
  margin-top: 10px;
  /* background-color: aqua; */
}

.registration-store-btn {
  width: 30vw;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 2px;
  margin-bottom: 2px;
}

.registration-store-btn img {
  width: 100%;
}

#registration-step3-panel {
  width: var(--registration-step3-panel-width);
  height: var(--registration-step3-panel-height);
  position: relative;
  margin-top: -18vw;
  display: grid;
}

#registration-step3-panel-bg {
  width: calc(var(--registration-step3-panel-width) * 1.22);
  height: var(--registration-step3-panel-height);
  margin-left: calc(var(--registration-step3-panel-width) * -0.22 / 2 - 0.3vw);
  grid-area: 1/1;
}

#registration-step3-panel-title {
  font-size: 3.7vw;
  margin-top: 12.5vw;
  margin-left: 10vw;
  width: 300px;
  grid-area: 1/1;
}

#registration-step3-panel-content {
  margin-top: 22.5vw;
  margin-left: 4.5%;
  width: 80%;
  height: 75%;
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-area: 1/1;
}

#registration-step3-rewards {
  display: flex;
  justify-content: center;
  width: 100%;
}

.registration-step3-reward {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.registration-step3-reward span {
  font-size: 3vw;
}

.registration-step3-reward img {
  margin-top: 0px;
  width: 55%;
}

#registration-step3-panel-store-btns {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-top: -1.5vw;
  /* background-color: red; */
}

#register-success-dialog {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  /* display: flex; */
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

#register-success-dialog-close-btn {
  position: absolute;
  top: calc(50% - min(50vw, 310px));
  left: 81vw;
  z-index: 1010;
  width: 9vw;
  height: 9vw;
  cursor: pointer;
  background-image: url(image/common/Btn_Close.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-color: rgba(0, 0, 0, 0);
  border: 0px;
}

#register-success-dialog-panel {
  width: 100vw;
  height: 85vw;
  max-height: 550px;
  max-width: 850px;
  background: rgba(0, 0, 0, 0);
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
  display: grid;

  /* transform: scale(1);
  opacity: 1; */
}

#register-success-dialog-panel-bg {
  width: 100%;
  height: 100%;
  grid-area: 1/1;
}

#register-success-dialog-panel-content {
  width: 100%;
  height: 100%;
  grid-area: 1/1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10vw;
}

#register-success-dialog-panel-title {
  font-size: 5vw;
  line-height: 5vw;
  display: flex;
  margin-bottom: 2vw;
  color: #5d5045;
  grid-area: 1/1;
}

.register-success-dialog-panel-t1 {
  font-size: 4vw;
  line-height: 5.2vw;
  color: #886e55;
  grid-area: 1/1;
}

.register-success-dialog-panel-t2 {
  font-size: 3.5vw;
  color: #976363;
  grid-area: 1/1;
}

#register-success-dialog-panel img {
  width: 40vw;
  grid-area: 1/1;
}

#register-success-dialog-store-btns {
  width: 80%;
  max-width: 450px;
  height: 60px;
  display: flex;
  justify-content: center;
  margin-top: 30px;
  grid-area: 1/1;
  /* background-color: red; */
}

#register-success-dialog-store-btns a {
  margin-left: 10px;
  margin-right: 10px;
  width: 50%;
}

#register-success-dialog-store-btns a img {
  width: 100%;
}