body {
    font-family: sans-serif ;
    margin-left: 26px;
    padding: 0;
}
table {
  border: solid 1px black;
  /*実線 1px 黒*/
  border-collapse: separate;
}
table th, table td {
  border: solid 1px black;
  /*実線 1px 黒*/
  padding: 2px;
}
table th.pmeter, table td.pmeter {
  border: solid 4px silver;
  /*実線 1px 黒*/
  padding: 4px;
}
td {
  background: #FFFFFF;
}
td.dummycell {
  border: none;
  background: inherit;
}
tr.header {
  background: #80CCFF;
}
th.header {
  background: #80CCFF;
}
td.right {
  text-align: right;
}
td.operation {
  padding: 6px 0;
}
td.medama {
  background: inherit;
  border: solid thin;
  padding: 10px;
}
input[type='text'].alt_team {
  width: 6em;
}
input[type='text'].text_center {
  text-align: center;
  width: 1em;
}
input[type='text'] {
  border: solid 1px black;
}
input[type='number'] {
  border: solid 1px black;
  width: 3em;
}
select.medama {
  font-size: 200%;
}
span.stat_str {
  color: gray;
}
span.stat_str_current {
  color: green;
}
span.cur_score {
  font-size: 400%;
  color: blue;
}
.tweet {
  font-size:20pt;
  color: gray;
}
.need_tweet {
  color: red;
}
.end_tweet {
  color: gray;
}
.with_border {
  border: solid 1px black;
  /*実線 1px 黒*/
  border-collapse: collapse;
}
.minus { font-size:16pt; }
.change { font-size:12pt; width: 4rem; }
.score { font-size:48pt; width: 9rem; }
.teamname { font-size:11pt; width: 9rem; text-align: center; background: #FFFFFF; }
.section { border-bottom: solid medium; }
.pcntup { font-size:16pt; width: 100%; }
table.noborder, table.noborder tr, table.noborder th, table.noborder td { border: none; background: inherit; }
.score_grid_container {
  display: grid;
  grid-template-rows: 2em 4em auto auto;
  grid-template-columns: 9rem 1rem 1rem 9rem 16.5rem;
  align-items: center;
  justify-items: center;
  row-gap: 12px;
  grid-template-areas: "teamnameA setcntA setcntB teamnameB pmeter"
                       "scoreA scoreA scoreB scoreB pmeter"
                       "timeoutA TTO TTO timeoutB pmeter"
                       "operation operation operation operation pmeter";
}
.grid_pmeter {
  grid-area: pmeter;
  align-items: stretch;
}
.grid_teamnameA {
  grid-area: teamnameA;
  width: 100%;
  align-items: stretch;
}
.grid_setcntA {
  grid-area: setcntA;
  width: 100%;
  align-items: stretch;
}
.grid_setcntB {
  grid-area: setcntB;
  width: 100%;
  align-items: stretch;
}
.grid_teamnameB {
  grid-area: teamnameB;
  width: 100%;
  align-items: stretch;
}
.grid_scoreA {
  grid-area: scoreA;
}
.grid_scoreB {
  grid-area: scoreB;
}
.grid_timeout {
  grid-area: timeout;
  display: grid;
  grid-template-columns: 2fr 3fr 1fr 5fr 1fr 3fr 2fr;
  align-items: center;
  justify-items: center;
  gap: 6px;
}
.grid_timeoutA {
  grid-area: timeoutA;
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  justify-items: center;
  gap: 7px;
}
.grid_timeoutB {
  grid-area: timeoutB;
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  justify-items: center;
  gap: 7px;
}
.grid_TTO {
  grid-area: TTO;
  align-items: center;
  justify-items: center;
}
.grid_operation {
  grid-area: operation;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  justify-items: center;
  gap: 6px;
}
.area {
  width: 100%;
  margin: auto;
  flex-wrap: wrap;
  display: flex;
}
 
.tab_class {
  width: 8rem;
  height: 20px;
  background-color: darkgrey;
  line-height: 20px;
  font-size: 15px;
  text-align: center;
  display: block;
  float: left;
  order: -1;
}
 
input[name="tab_name"] {
  display: none;
}
 
input:checked + .tab_class {
  background-color: cadetblue;
  color: aliceblue;
}
 
.content_class {
  display: none;
  width: 100%;
}
 
input:checked + .tab_class + .content_class {
  display: block;
}