@font-face{
  font-family: 'Mono';
  src:url('../fonts/Monospace.ttf') format('truetype');
}

:root {
  --main-bg-color: #fff;
  --fieldset-bg-color: #fff/*rgb(42,163,249)*/;
  --input-field-color: rgb(255,255,255);
  --input-field-border-color: rgb(119,119,119);
  --login-button-color: rgb(42,42,42);
  background: var(--main-bg-color);
  font-family: ヒラギノ明朝 Pro W3, Hiragino Mincho Pro, ＭＳ Ｐ明朝, MS PMincho, serif;
}

html {
  background: var(--main-bg-color);
}

img#logo {
  width: 100px;
  display: block;
  margin: 0 auto;
  padding: 30px 0;
}
p#title {
  font-size: 1.8em;
  text-align: center;
  margin: 2px;
}
fieldset {
  border-width: 0px;
  background: var(--fieldset-bg-color);
  width: 85vw;
  margin: auto;
  
}
.message_field {
  padding: 20px; 0;
  height: 10px;
  width: 100%:
}
.error_message, .message {
  width: 100%;
  position: absolute;
  vertical-align: middle;
  left: 50%;
  -webkit-transform: translateX(-50%);
}
.error_message p, .message p {
  line-height: 1.3em;
  text-align: center;
}
.error_message p {
  color: #e00;
}
.message p {
  color: #000;
}
.username_field, .password_field {
  max-width: 500px;
  margin: 0 auto 20px;
  padding: 10px 10px 5px;
  border-radius: 2px;
  background: var(--input-field-color);
  border-bottom: 2px var(--input-field-border-color) solid;
  text-align: left;
}
.username_field label, .password_field label{
  color: var(--input-field-border-color);
}
.pulldown {
  width: 100%;
  text-align: center;
  border: 0px;
  outline: none;
  background: transparent;
  background-image: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.pulldown:before {
  position: absolute;
  top: 20px;
  right: 10px;
  width: 0;
  height: 0;
  padding: 0;
  content: '';
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 9px solid #000;
  pointer-events: none;
}
.login_button {
  width: 100%;
  padding: 5px 0;
  text-align: center;
}
form input {
  font-family: ヒラギノ明朝 Pro W3, Hiragino Mincho Pro, ＭＳ Ｐ明朝, MS PMincho, serif;
  font-size: 1.2em;
  line-height: 1.2em;
}
form input[type="text"], input[type="text"]:focus, input[type="password"], input[type="password"]:focus{
  width: 100%;
  background: rgba(0,0,0,0);
  border: none;
  outline: none;
  padding-top: 5px;
}
form input[type="submit"], form input[type="button"]{
  background: var(--login-button-color);
  color: #fff;
  max-width: 500px;
  width: 75%;
  height: 50px;
  border-radius: 25px;
  text-align: center;
  margin: 0px auto;
  -webkit-transition: all .3s;
  transition: all .3s;
  -webkit-appearance: none;
}
form input#name {
  ime-mode: active;
}
form.login input[type="submit"]:hover {
  background: rgb(120,120,120);
}


.submenu {
  width: 100%;
  text-align: center;
  margin: 10px 0;
}
.submenu a, .submenu a:visited{
  color: var(--login-button-color);
  text-decoration: none;
}
.submenu a:hover {
  text-decoration: underline;
}

.selectors input[type="button"], .condition_button{
  font-family: ヒラギノ明朝 Pro W3, Hiragino Mincho Pro, ＭＳ Ｐ明朝, MS PMincho, serif;
  font-size: 150%;
  font-weight: 500;
  background: var(--login-button-color);
  color: #fff;
  max-width: 500px;
  width: 22%;
  height: 80px;
  border-radius: 30px;
  text-align: center;
  margin: 30px 5px 30px;;
  -webkit-transition: all .3s;
  transition: all .3s;
  -webkit-appearance: none;
}
.condition input[type="radio"]{
  display: none;
}
.condition_button {
  display: inline-block;
  line-height: 80px;
  vertical-align: middle;
  cursor: pointer;
  border: 1px black solid;
  background: var(--main-bg-color);
  color: var(--main-font-color);
  opacity: .3;
}
.condition input[type="radio"]:checked + .condition_button {
/*  background: var(--login-button-color);*/
/*  color: var(--main-bg-color);*/
  opacity: 1;
}

select {
  left: 0;
}
.select1 {
  overflow: hidden;
  width: 200px;
  height: 50px;
  margin: 0 auto;
}
.select1 select {
  width: 100%;
  height: 100%;
  padding: 2px 5px;
  cursor: pointer;
  text-indent: 5px;
  text-overflow: ellipsis;
  border: 0px solid black;
  outline: none;
  background: transparent;
  background-image: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.select1 select::-ms-expand {
  display: none;
}
.select1 {
  position: relative;
  border: 1px solid #000;
  border-radius: 3px;
  background: #fff;
}
.select1::before {
  position: absolute;
  top: 20px;
  right: 10px;
  width: 0;
  height: 0;
  padding: 0;
  content: '';
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 9px solid #000;
  pointer-events: none;
}
.select1 select {
  /*padding: 8px 38px 8px 8px;*/
  color: #000;
}

table#tb_resetpw, table#tb_eliminate {
  position: relative;
  width: 90%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  border-width: 0;
  margin-bottom: 40px;
  font-size: 1.2em;
}
table#tb_resetpw tr, table#tb_eliminate tr {
  height: 3em;
  border-style: solid;
  border-color: var(--input-field-border-color);
  border-width: 1px 0;
}
table#tb_resetpw tr:first-child, table#tb_eliminate tr:first-child {
  height: 2em;
  color: #fff;
  background-color: var(--input-field-border-color);
}
table#tb_resetpw th, table#tb_resetpw td,
table#tb_eliminate th, table#tb_eliminate td {
  text-align: center;
}
table#tb_resetpw .tb_checkbox_code, table#tb_eliminate .tb_checkbox_code{
  width: 20%;
}
table#tb_resetpw .tb_code, table#tb_eliminate .tb_code {
  width: 30%;
}table#tb_resetpw .tb_name, table#tb_eliminate .tb_name {
  width: 50%;
}

.tableview {
  display: inline-block;
  width: 100%;
  margin-bottom: 20px;
}
.tableview table {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow-x: scroll;
}
.tableview td {
  width: 5em;
}
.tableview#sum td {
  width: 7em;
}
.tableview table, .tableview td, .tableview th{
  border-collapse: collapse;
  border: 1px solid black;
}