@charset "UTF-8";

/**
ログインや会員登録共通
 */

.auth {
  max-width: 890px;
  width: 100%;
  margin: 20px auto;
  padding: 20px 0;
  border: solid 1px #979797;
  font-size: 20px;
  font-family: -apple-system, 'Helvetica Neue', 'Lucida Grande', 'Yu Gothic', '游ゴシック', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'メイリオ', meiryo, sans-serif;
}

.auth h1 {
  text-align: center;
}

.auth table {
  margin: 24px auto;
  width: 100%;
  max-width: 735px;
}

input::placeholder {
  font-size: 20px;
  color: #979797;
}

.auth th,
.auth td {
  vertical-align: middle;
  height: 60px;
  font-weight: normal;
  text-align: left;
}

.auth th {
  width: 180px;
  /*width: 30%;*/
}

.auth td {
  max-width: 551px;
  /*width: 100%;*/
}

.auth input[type=email],
.auth input[type=text],
.auth input[type=password] {
  display: block;
  width: calc(100% - 22px);
  height: 20px;
  padding: 10px;
  font-size: 20px;
  /*display: inline-block;*/
  margin: 0;
}

.auth button {
  text-align: center;
  max-width: 735px;
  width: 100%;
  min-height: 60px;
  background-color: black;
  border-radius: 4px;
  font-size: 20px;
  color: #ffffff;
  margin: 24px auto;
  display: block;
}

.auth button:hover {
  cursor: pointer;
  opacity: 0.8;
}


.auth p {
  margin: 20px;
  text-align: center;
}

p.error {
  color: #cd3764;
}

#pass_info {
  font-size: 16px;
  color: #cd3764;
}

#password_reminder_text {
  max-width: 740px;
  margin: auto;
}

.auth .spView {
  display: none;
}

@media screen and (max-width: 600px) {
  .auth .pcView {
    display: none;
  }
  .auth .spView {
    display: initial;
  }
  .auth h1 {
    font-size: 7.8vw;
  }
  .auth {
    border: none;
    margin-top: 0;

    font-size: 5vw;
  }
  .auth th {
    width: 30%;
  }
  .auth th,
  .auth td {
    height: 40px;
  }

  .auth input[type=email],
  .auth input[type=text],
  .auth input[type=password] {
    padding: 10px 10px;
    width: calc(100% - 22px);
    font-size: 4.5vw;
  }
  input::placeholder {
    font-size: 4.5vw;
  }
  button[type=submit] {
    font-size: 4.5vw;
  }
  .auth button {
    width: calc(100% - 22px);
    max-width: initial;
  }
  .auth table {
    width: 95%;
  }

  .auth p {
    width: calc(100% - 22px);
    margin: 20px auto;
    text-align: left;
  }
}


p.copyright {
  color: black;
}

#menuButton {
  display: none;
}