@charset "UTF-8";
#contents_wrap {
  height: 100vh;
}
#main {
  background: #694a44;
}

.exclusive {
  display: flex;
  padding: 12% 10.9%;
  background-color: #694a44;
}
.logo_area_login {
  width: 53.9%;
  margin: 0 8% 0 0;
}

.exclusive h2 {
  margin-bottom: 120px;
}

.exclusive h3 {
  width: 100%;
  font-family: "TBゴシック SL", "TBGothic SL";
  color: #575757;
  font-size: 1.6875rem;
  letter-spacing: 0.3em;
  padding-bottom: 35px;
}

/* ログインボタン */

.form {
  width: 90%;
  max-width: 400px;
  margin: 0 auto;
}
.form .btn_login {
  display: flex;
}
.form .btn_login .inputErea {
  width: 72%;
  margin-right: 4px;
}

.form .btn_login .inputErea #common-login-area {
  display: block;
  width: 100%;
  font-family: "Zen Old Mincho", "Noto Serif JP", 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", HGS明朝E, メイリオ, Meiryo, serif;
  padding: 0.6em 0.8em;
  outline: none;
  border: solid 0.1px #978357;
}

.form .btn_login .btnErea {
  width: 27%;
}

.form .btn_login .btnErea a {
  text-decoration: none;
}
.form h3 {
  margin-top: 40%;
  width: 100%;
}
#loginBtn {
  display: block;
  width: 100%;
  max-width: 280px;
  font-family: "Zen Old Mincho", "Noto Serif JP", 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", HGS明朝E, メイリオ, Meiryo, serif;
  color: #fff;
  background-color: #978357;
  border: none;
  line-height: 2.4em;
  transition: all 0.3s ease-out;
  padding: 3px 0;
}

#loginBtn:hover {
  border: none;
  background-color: #81755c;
}

@media screen and (max-width: 767px) {
  /* 767px以下に適用されるCSS（タブレット用） */

  .exclusive {
    display: block;
    padding: 150px 0 210px;
  }

  .exclusive h3 {
    font-size: 1.375rem;
  }
}

@media screen and (max-width: 480px) {
  /* 480px以下に適用されるCSS（スマホ用） */

  .exclusive {
    display: block;
    padding: 30% 9%;
  }
  .logo_area_login {
    width: 100%;
    margin: 0;
  }

  .form {
    width: 100%;
    font-size: 0.775rem;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .form h3 {
    margin-top: 18%;
    width: 100%;
  }
  .exclusive {
    display: block;
    padding: 23% 9%;
  }
  .logo_area_login {
    width: 50%;
    margin: 0 auto;
  }
  .form {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }
}
