/******** ログイン画面、新規登録画面、パスワード再発行ページ用のレイアウト ********/

/* 共通レイアウト */
.forms-container {
  background-color: #f2f2f2;
  width: 60%;
  margin: 0 auto;
  padding: 118px 124px;
  font-size: clamp(14px, 18px, 1.1vw);
  color: #080808;
  margin-top: 5px;
}

.form-content {
  margin-top: 55px;
}

.login-title,
.signup-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.login-title h1,
.signup-title h1,
.password-reset-title h1 {
  font-size: clamp(16px, 22px, 1.4vw);
  font-weight: 600;
}

.form-mail,
.form-pass {
  background-color: #fff;
  width: 100%;
  height: 40px;
  border: solid 1px #d6d6d6;
  border-radius: 10px;
  margin-top: 1%;
  padding: 0 1%;
}

input::placeholder {
  color: #909090;
  font-size: 0.9em;
}

.mail-ttl,
.pass-ttl {
  display: inline-block;
}

.pass-ttl {
  margin-top: 50px;
}

.password-wrap {
  position: relative;
}

.toggle-pass {
  position: absolute;
  top: 60%;
  right: 10px;
  transform: translateY(-50%);
}

.submit-btn {
  background-color: #ffa701;
  color: #fff;
  width: 100%;
  text-align: center;
  border-radius: 10px;
  margin-top: 87px;
  height: 40px;
}

/* ログインページ */
.login-title a {
  color: #ffa701;
  text-decoration: underline;
  font-weight: 500;
}

.password-reset {
  display: block;
  text-decoration: underline;
  font-size: 0.9em;
  text-align: center;
  margin-top: 28px;
}

/* 新規登録ページ */
.orange-txt {
  color: #ffa701;
  text-decoration: underline;
}

.signup-description {
  font-size: 0.9em;
  text-align: center;
  margin-top: 40px;
  line-height: 1.5;
}

/* パスワード再設定ページ */
.password-reset-title p {
  margin-left: 1em;
  margin-top: 17px;
  font-size: clamp(14px, 18px, 1.1vw);
  line-height: 1.5;
}

.pass-reset-btn {
  background-color: #ffa701;
  color: #fff;
  width: 100%;
  text-align: center;
  border-radius: 10px;
  margin-top: 40px;
  height: 40px;
}


/* スマホ用 */
@media screen and (max-width: 720px) {
  .forms-container {
    background-color: #fff;
    width: 100%;
    padding: 10% 5%;
    margin-bottom: 30%;
}
}