/*
 * ログイン・新規会員登録ページのスタイル
 */
.contents-area {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px 0;
  padding: 0 0 24px;
}

.signup {
  min-height: calc(100vh - 230px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 0;
}

.signup-contents-area {
  gap: 48px 0;
}

.signup .error_messages {
  margin-top: 0;
}

.login-area {
  display: flex;
  width: 100%;
}

.signup-login-area {
  width: 96%;
  max-width: 860px;
}

.account-area {
  width: 50%;
}

.mail-area {
  width: 50%;
}

.mid-border {
  margin: 0 24px;
  border-left: 1px solid #000000;
}

.sns-login-area {
  height: 297px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.sns-login-button {
  display: flex;
  text-decoration: none;
  width: 100%;
  padding: 16px;
  border-radius: 8px;
  box-shadow:
    0px 1px 2px 0px rgba(0, 0, 0, 0.3),
    0px 2px 6px 2px rgba(0, 0, 0, 0.15);
  justify-content: center;
  color: var(--color-black);
  gap: 8px;
}

.sns-login-button p {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.sns-login-button img {
  width: 24px;
}

/* メールアドレス */
.mail-area-contents {
  display: flex;
  flex-direction: column;
  gap: 36px 0;
}

.mail-area-contents p {
  margin: 0;
  text-align: left;
  font-weight: 700;
}

.input-area {
  display: flex;
  flex-direction: column;
  gap: 8px 0;
}

.input-area div {
  display: flex;
  align-items: center;
  position: relative;
}

.field_with_errors {
  width: 100%;
}

.password-icon {
  height: 48px;
  width: 46px;
  object-fit: contain;
  padding: 14px 0px;
  position: absolute;
  right: 0;
  cursor: pointer;
}

.icon-hidden {
  display: none;
}

.checkbox-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0 -18px; /* NOTE: ブラウザ360pxで改行されないように */
}

.signup--terms-agreement {
  margin-bottom: -24px
}

@media screen and (max-width: 860px) {
  .contents-area {
    padding: 0 24px 24px;
  }

  .login-area {
    flex-direction: column;
  }

  .account-area {
    width: 100%;
  }

  .mail-area {
    width: 100%;
  }

  .mid-border {
    margin: 24px 0;
    border-bottom: 1px solid #000000;
  }

  .signup .error_messages {
    margin-top: -24px;
  }

  .signup-login-area {
    order: 2
  }

  .signup--notifications {
    order: 3
  }

  .signup--terms-agreement {
    margin: -24px 0;
  }
}

.login-area-contents {
  border-radius: 8px;
  background: var(--Color-Surface-Primary, #fff);
  box-shadow:
    0 2px 8px 3px rgba(0, 0, 0, 0.08),
    0 2px 16px 0 rgba(0, 0, 0, 0.16);
  margin: 34px auto;
  padding: 40px;
  width: 96%;
  max-width: 940px;
}

.mail-area-contents .attention-text {
  font-weight: 400;
  font-size: 11px;
}

.foget-password-link {
  color: var(--Color-Content-Link, #803500);
  font-size: var(--typography-page-xs-bold-font-size, 12px);
  font-weight: 700;
  text-decoration: none;
}

.first-contact .attention-text {
  color: var(--Color-Content-Link, #803500);
  font-size: var(--typography-page-m-bold-font-size, 16px);
  font-weight: 700;
  text-decoration: none;
  padding-left: 8px;
}

@media screen and (max-width: 860px) {
  .login-area-contents {
    width: auto;
    box-shadow: none;
    margin: 0;
    padding: 0;
  }

  .login-mid-border {
    width: 100%;
    margin: 0;
    border-bottom: 1px solid #000000;
  }
}

.saha_sign_up_form {
  display: contents;
}

/* 新規会員登録エラーメッセージ */
.saha_sign_up_form .error_messages {
  box-sizing: border-box;
  width: 96%;
  max-width: 860px;
  margin-bottom: 0;
  padding-left: 30px;
  color: var(--color-red);
  font-size: 14px;
  font-weight: bold;
  text-align: left;
}