@charset "utf-8";

.login.autologin .loginArea .beginnersArea {
  opacity: .4;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; /* CSS3 */
}
.login .inputForm .input a {
  color: #bf8218;
  text-decoration: underline;
}
.login .loginArea {
  display: flex;
  justify-content: space-between;
}
.login .inputForm dt {
  padding: 0 1em;
  white-space: nowrap;
}
.login .inputForm .inputTit {
  align-items: flex-start;

/* font-size: 150%; */
  background: transparent;
  width: 30%;
}

.login .inputForm .input.textarea {
  background: transparent;
  display: block;
  padding: 20px 0 0;
  width: 70%;
}

.login .loginArea .MemberArea {
  background: #fff;
  border: 2px solid #edebeb;
  box-sizing: border-box;
  padding: 2em 1em;
  width: 490px;
}
.login .loginArea .beginnersArea {
  background: #edebeb;
  box-sizing: border-box;
  padding: 2em;
  width: 490px;
}
.login .btnArea {
  margin: 2em 0;
}
.login .beginnersArea .btnArea {
  margin: 2em 0;
}
.login .ttl {
  font-weight: bold;
  /* font-size: 180%; */
  padding: 0;
  text-align: center;
}
.login .lead {
  padding: 1em 0;
}
.login .lead a {
  color: #bf8218;
}
.login ul.lead {
  padding-left: 1em;
  text-indent: -1em;
}

.login .flowNavigation .txt {
  font-size: 135%;
}
.login .alreadyMmemberArea {
  align-items: center;
  background: #fff;
  display: flex;
/* padding: 2em; */
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 0 2em 0;
}
.login .alreadyMmemberArea .ttl,
.login .alreadyMmemberArea .lead {
  padding: 0;
  text-align: left;
}
.login .alreadyMmemberArea .submitBtn {
  font-size: 180%;
  margin: 0 6em 0 0;
  width: 300px;
}
.login .main.inquiry .btnArea {
  margin: 6em;
}
.el_form_label.radioTxt {
  display: block;
}

@media screen and (max-width:1020px) and (min-width:768px) {
  .login .alreadyMmemberArea .txt {
    width: calc(100% - 315px);
  }

  .login .alreadyMmemberArea .ttl {
    line-height: 1.4;
    text-align: left;
  }

  .login .alreadyMmemberArea .submitBtn {
    margin: 0;
    min-width: 253px;
  }

  .login .loginArea .MemberArea,
  .login .loginArea .beginnersArea {
    width: 50%;
  }

  .login .loginArea .submitBtn {
    width: 90%;
  }

  .login .inputForm .inputTit {
    width: 39%;
  }

  .login .main.inquiry .btnArea {
    margin: 6em;
  }

  .login .main.inquiry .btnArea .submitBtn {
    width: auto;
  }

  .login .inputForm .input.textarea {
    width: 61%;
  }
  .login .headerOrder {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/*sp*/
@media screen and (max-width:767px) {
  .login.autologin .loginArea .beginnersArea {
    display: none;
  }
  .login .loginArea {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .login .loginArea .MemberArea {
    margin: 0 0 1em;
    padding: 2em 1em 1em;
    width: 100%;
  }
  .login .loginArea .beginnersArea {
    padding: 2em 1em 1em;
    width: 100%;
  }
  .login .inputForm .inputTit {
    width: 100%;
  }
  .login .inputForm .input.textarea {
    border: none;
    padding: .5em 0 0;
    width: 100%;
  }
  .login .lead {
  }
  .flowNavigation .current {
    display: none;
  }
  .login .alreadyMmemberArea {
    padding: 2em 0 0;
  }
  .login .alreadyMmemberArea .ttl {
    line-height: 1.4;
    padding: 0 0 1em;
  }
  .login .alreadyMmemberArea .submitBtn {
    font-size: 180%;
    margin: 1em auto;
    width: 80%;
  }
  form[action="/login/inquiry.html"] .inputForm .inputTit {
    border-right: none;
  }
}

@media screen and (max-width:375px) {
  .login .submitBtn {
    line-height: 1.4;
  }
}

@media screen and (max-width:360px) {
  .login .alreadyMmemberArea .submitBtn {
    width: 100%;
  }
}