@charset "UTF-8";
body {
  background: #456;
  font-family: HiraginoCustom,"ヒラギノ角ゴ ProN W3",HiraKakuProN-W3,"ヒラギノ角ゴ Pro W3",HiraKakuPro-W3,"Noto Sans JP",helvetica,arial,sans-serif;
}
.login {
  width: 40%;
  margin: 16px auto;
  font-size: 16px;
}
.login-header, .login p {
  margin-top: 0;
  margin-bottom: 0;
}
.login-header {
  background: #28d;
  padding: 20px;
  font-size: 1.4em;
  font-weight: normal;
  text-align: center;
  color: #fff;
}
.login-container {
  background: #ebebeb;
  padding: 12px;
}
.login p {
  padding: 12px;
}
.login input:not([type="radio"]):not([type="checkbox"]),
.login select {
  box-sizing: border-box;
  display: block;
  width: 100%;
  border-width: 1px;
  border-style: solid;
  padding: 16px;
  outline: 0;
  font-size: 0.95em;
  background: white;
  border-radius: 0;
  color: #333;
  font-family: HiraginoCustom,"ヒラギノ角ゴ ProN W3",HiraKakuProN-W3,"ヒラギノ角ゴ Pro W3",HiraKakuPro-W3,"Noto Sans JP",helvetica,arial,sans-serif;
}
.login input:not([type="radio"]):not([type="checkbox"]):read-only {
  color: #888;
}
.login input[type="email"],
  .login input[type="password"] {
  background: #fff;
  border-color: #bbb;
  color: #555;
}
.login input[type="email"]:focus,
  .login input[type="password"]:focus {
  border-color: #888;
}
.login input[type="submit"],
.login button {
  background: #28d;
  border-color: transparent;
  color: #fff;
  cursor: pointer;
  width: 100%;
  padding: 16px;
  font-size: 0.95em;
}
.login input::placeholder {
  color: #ccc;
}
button.back_button {
  background: #f8f8f8;
  border-color: #28d;
  color: black;
  cursor: pointer;
  width: 30%;
  height: 30px;
  padding: 3px;
  font-size: 0.8em;
  border-radius:40px;
  border-style: solid;
  border-width: 1px;
  margin-left: 15px;
  margin-right: 15px;

}

.login input[type="submit"]:hover,
.login button:hover {
  background: #17c;
}
.login input[type="submit"]:focus,
.login button:focus {
  border-color: #05a;
}

button.back_button:hover {
  background: #fff;
  border-color: #28d;
  color: black;
  cursor: pointer;
  width: 30%;
  height: 30px;
  padding: 3px;
  font-size: 0.8em;
  border-radius:40px;
  border-style: solid;
  border-width: 1px;
}

.alert-danger {
  color: #842029;
  background-color: #f8d7da;
  border-color: #f5c2c7;
}
.alert {
  position: relative;
  padding: 1rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

.form-select-wrap{
  display: flex;
  max-width: 300px;
  align-items: center;
}
.form-select-wrap > select{
  padding: 8px 16px;
  margin-left: 10px;
  margin-right: 10px;
  border: 1px solid gray;
  border-radius: 4px;
}

@media screen and (max-width: 960px) and (max-width: 568px) {
  .login {
    width: 90%;
    margin: 16px auto;
    font-size: 16px;
  }
}

@media screen and (max-width: 960px) and (max-width: 375px) {
}