/* main table */
table {
    border-collapse: collapse;
    margin: 2em auto;
    /* min-height: calc(100vh - 180px); */
}
th, td {
    border: 1px solid #ccc;
    text-align: center;
    padding: 1em;
}

.headinfo{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
}

.tgthead{
  text-align: center;
	font-size: 20px;
	margin-top: 36px;
	font-weight: bold;
	width: calc(100% /3);
}

.tgthead2{
  text-align: center;
	font-size: 20px;
	margin-top: 36px;
	font-weight: bold;
	width: calc(100% /4);
}

#alert{
  text-align: center;
  width: 70%;
  margin: 55px auto;
  font-size:36px;
  color:red;
}

.hoge{
    border:0;
    padding:5px;
    font-size:14px;
    font-family:Arial, sans-serif;
    color:#aaa;
    border:solid 1px #ccc;
    margin:0 0 1px;
    width:60px;
    -moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
    -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
    box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2);
    text-align: right;
}
@media screen and (max-width: 844px) {
    table {
      width:100%;
      margin:0 auto;
    }
    tbody {
      width: 100%;
    }
    th,td {
      display: block;
      width: 100%;
    }
    table tr:nth-child(odd) th{
      background-color:pink;
    }
    table tr:nth-child(even) th{
      background-color:aqua;
    }
    .headinfo{
      flex-wrap: wrap;
      width: 100%;
    }
  
    .tgthead{
      display: block;
      width: 100%;
      margin-top: 10px;
    }
    .tgthead2{
      display: block;
      width: 100%;
      margin-top: 10px;
    }
.hoge{
    border:0;
    padding:5px;
    font-size:24px;
    font-family:Arial, sans-serif;
    color:#aaa;
    border:solid 1px #ccc;
    margin:0 0 1px;
      display: block;
      width: 100%;
    -moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
    -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
    box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2);
    text-align: right;
}

.button{
      display: block;
      width: 100%;
      font-size:24px;
      font-weight: bold;
}
    
}