/*
  使用view：
  - web/app/views/users/passwords/edit.html.erb
  - web/app/views/users/passwords/new.html.erb
  - web/app/views/users/registrations/complete.html.erb
  - web/app/views/users/registrations/new.html.erb
*/

.saha_sign_up {
  padding: 0 0 30px 0;
}

.saha_sign_up_page,
.saha_sign_up_complete_page,
.saha_password_reset_page {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.saha_sign_up_page .h1 {
  margin-top: 35px;
  margin-bottom: 40px;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
}

.saha_sign_up p {
  font-size: 14px;
}

.saha_sign_up p a {
  color: inherit;
}

.saha_sign_up_page .saha_sns_login_button {
  width: 100%;
  justify-content: center;
  margin-bottom: 12px;
}

.saha_sign_up_page .saha_sns_login_button .saha_sns_login_button_text {
  width: 100px;
}

.saha_sign_up_page .saha_sns_login_button_wrapper {
  padding: 0;
}

.saha_sign_up_page .section_first_headline {
  margin: 26px 0;
  font-size: 16px;
  font-weight: 500;
}

.saha_sign_up_page .saha_campaign {
  margin-bottom: 16px;
}

.saha_sign_up_page .saha_campaign .title {
  display: inline-block;
  font-weight: bold;
  text-align: center;
  width: 100%;
}

@media screen and (max-width: 700px) {
  .saha_sign_up_page .section_first_headline {
    font-size: 14px;
  }
}

.saha_sign_up_page .section_first_headline:before,
.saha_sign_up_page .section_first_headline:after {
  width: 30%;
}

.saha_sign_up_complete_page .section_first_headline:before,
.saha_sign_up_complete_page .section_first_headline:after {
  width: 35%;
}

.saha_sign_up_complete_page .main_box {
  border: 1px solid #c3c3c3;
  background-color: #fff;
  padding: 48px;
}

@media screen and (max-width: 700px) {
  .saha_sign_up_complete_page .main_box {
    padding: 0 32px 32px;
    border: none;
  }
}

.saha_sign_up_complete_page .main_box h3 {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

@media screen and (max-width: 700px) {
  .saha_sign_up_complete_page .main_box h3 {
    font-size: 16px;
    margin: 0;
  }
}

.saha_sign_up_complete_page .main_box .message {
  margin: 32px 0;
}

@media screen and (max-width: 700px) {
  .saha_sign_up_complete_page .main_box .message {
    text-align: center;
    margin: 24px 0;
  }
}

.saha_sign_up_complete_page .main_box .message p {
  margin: 0;
  font-size: 14px;
}

.saha_sign_up_complete_page .main_box .notice {
  background-color: #f8f8f8;
  padding: 16px;
}

.saha_sign_up_complete_page .main_box .notice p {
  text-align: left;
  margin-top: 0;
  margin-bottom: 16px;
}

.saha_sign_up_complete_page .main_box .notice ul {
  padding-left: 16px;
}

.saha_sign_up_complete_page .main_box .notice ul li {
  font-size: 14px;
}

@media screen and (max-width: 700px) {
  .saha_sign_up_complete_page .main_box .notice p,
  .saha_sign_up_complete_page .main_box .notice ul li {
    font-size: 12px;
  }
}

@media screen and (min-width: 700px) {
  .saha_sign_up p {
    text-align: center;
  }

  .saha_sign_up_page p {
    text-align: left;
  }
}

.saha_sign_up_form {
  padding: 0;
  text-align: center;
}

@media screen and (max-width: 700px) {
  .saha_sign_up_form {
    text-align: left;
  }
}

.saha_sign_up_form .error_messages {
  padding-left: 30px;
  color: var(--color-red);
  font-size: 14px;
  font-weight: bold;
  text-align: left;
}

.saha_sign_up_email,
.saha_sign_up_password,
.saha_sign_up_tel {
  padding: 5px 10px;
  width: 100%;
  border: 1px solid #bbbbbb;
}

.saha_sign_up_password,
.saha_sign_up_tel {
  margin-top: 6px;
}

.saha_sign_up_page .saha_sign_up_email,
.saha_sign_up_page .saha_sign_up_password,
.saha_sign_up_page .saha_sign_up_tel {
  height: 48px;
  font-size: 16px;
}

.saha_sign_up_page .saha_sign_up_email::placeholder,
.saha_sign_up_page .saha_sign_up_password::placeholder,
.saha_sign_up_page .saha_sign_up_tel::placeholder {
  color: var(--color-black);
}

.saha_sign_up_page .password_group {
  position: relative;
}

.password_field_icon {
  height: 48px;
  width: 46px;
  object-fit: contain;
  padding: 14px 0px;
  position: absolute;
  top: 56%;
  right: 0px;
}

.saha_sign_up_page .field_with_errors {
  display: inline;
}

.password_field_icon.lock_icon {
  display: none;
}

@media screen and (min-width: 700px) {
  .saha_sign_up_email,
  .saha_sign_up_tel {
    width: 50%;
  }

  .saha_sign_up_page .saha_sign_up_email,
  .saha_sign_up_page .saha_sign_up_tel {
    width: 100%;
  }
}

.saha_sign_up_email::placeholder,
.saha_sign_up_tel::placeholder {
  color: #bbbbbb;
}

.saha_sign_up_page .yellow_button {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 24px;
  width: 100%;
  padding: 13px 10px 11px 10px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

@media screen and (max-width: 700px) {
  .saha_sign_up_page .yellow_button {
    font-size: 14px;
  }
}

.saha_sign_up_page .yellow_button:hover {
  opacity: 0.8;
  transition: 0.4s;
}

.saha_sign_up_text_link {
  display: block;
  padding: 24px 0 0 0;
  text-align: center;
  color: inherit;
}

@media screen and (max-width: 700px) {
  .saha_sign_up_text_link {
    font-size: 14px;
  }
}

.saha_sign_up_alert {
  list-style: none;
}

.saha_sign_up_notify_setting_text {
  font-size: 12px;
}

.saha_sign_up .notice-settings {
  margin-top: 48px;
}

.saha_sign_up .notice-settings .notice-group {
  margin-bottom: 0;
}

.saha_sign_up .notice-settings .notice-group .check-box-group {
  display: flex;
  align-items: center;
}

.saha_sign_up .notice-settings .notice-group .check-box-group:hover {
  opacity: 0.8;
  transition: 0.4s;
}

.saha_sign_up .notice-settings .notice-group .check-box-group input[type='checkbox'] {
  display: inline-block;
  margin-top: 6px !important;
  padding-left: 25px;
  cursor: pointer;
}

.saha_sign_up .notice-settings .notice-group .check-box-group input[type='checkbox']::before {
  left: 0;
}

.saha_sign_up .notice-settings .notice-group .check-box-group input[type='checkbox']::after {
  left: 3px;
}

.saha_sign_up .notice-settings .check-box-group label {
  display: inline-block;
  margin-top: -2px;
  cursor: pointer;
}

.saha_sign_up .notice-settings .notice-group .note {
  margin-top: 8px;
}

/* リファクタリング */
.contents-area {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px 0;
  padding: 0 0 24px;
}

.merit-area {
  border-radius: 8px;
  background: var(--Color-Surface-Accent-Primary, #ffd200);
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.area-title {
  color: var(--Color-Content-Primary-Emphasis-2, #bf6000);
  font-weight: 700;
  margin: 0;
  font-size: 24px;
}

.area-subtitle {
  font-weight: 700;
  font-size: 24px;
  gap: 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.area-subtitle span {
  font-size: 18px;
}

/* 3つのメリット */
.merit-contents-area {
  display: flex;
  justify-content: center;
  gap: 0 16px;
}

.merit-number-area {
  display: flex;
  align-items: center;
  gap: 0 8px;
}

.merit-number {
  font-weight: 700;
  border-radius: 8px;
  background: #fff;
  width: 54px;
  height: 54px;
  box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.25);
}

.merit-number span {
  font-size: 10px;
}

.merit-number p {
  margin: 0;
}

.merit-text {
  text-align: start;
  font-weight: 700;
  margin: 0;
}

.login-area {
  display: flex;
  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 {
  width: 100%;
  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;
}

.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;
}

.mail-area-contents input {
  width: 100%;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #b1b4b5;
}

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

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

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

.lock_icon {
  display: none;
}

.checkbox-area-contents {
  display: flex;
  flex-direction: column;
  gap: 16px 0;
  text-align: left;
}

.checkbox-content {
  display: flex;
  gap: 0 4px;
}

@media screen and (max-width: 860px) {
  .merit-area {
    width: 100%;
    padding: 24px;
  }

  .merit-contents-area {
    display: flex;
    flex-direction: column;
    gap: 16px 0;
  }

  .contents-area {
    padding: 0 24px 24px;
  }

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

  .account-area {
    width: 100%;
  }

  .mail-area {
    width: 100%;
  }

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

/* パスワードリセット */
.password-reset-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px 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;
}

.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;
}

.keep-login-checkbox {
  display: flex;
  justify-content: center;
  gap: 0 8px;
}
.keep-login-checkbox .checkbox {
  width: 24px;
}

.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 {
    box-shadow: none;
    margin: 0;
    padding: 0;
  }

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