[popover] {
  position: fixed;
  inset: 0;
  /* width: fit-content; */
  width: 50%;
  max-height: 350px;
  /* height: fit-content; */
  margin: auto;
  border: solid;
  /* overflow: auto; */
  overflow-y: scroll;
  color: CanvasText;
  /* background-color: Canvas; */
  background-color: #333;
}
[popover] h2 {
  width: calc(100% - 15px);
  background-color: #333;
  color: #f7f7f7;
  font-size: 16px;
  padding: 5px;
  float: left;
}
[popover] h2 button {
  float: right;
}
[popover] button.wide {
  width: calc(100% - 15px);
  height: 30px;
  background-color: #ff7f50;
  border-radius:5px;
  border:0;
  cursor:pointer;
  color:white;
  font-size:16px;
  margin-top:-4px;
  margin-bottom: 5px;
}
[popover] button.wide:hover {
	text-shadow: 0 0 10px #fff,0 0 15px #fff;
}

[popover] table {
  width: calc(100% - 15px);
  background-color: #f7f7f7;
  margin-bottom: 10px;
}
[popover] table tr th{
  background: #2b5f2a;
  color: white;
  padding: 5px;
  border: 1px solid #f7f7f7;
}
[popover] table tr th:nth-child(2){
  width: 50px;
}
[popover] table tr td{
  padding: 5px;
  border: 1px dotted #333;
}
[popover] table tr:last-child td{
  padding: 5px;
  border-bottom: 1px solid #333;
}

/* モニター幅960px以下 */
@media only screen and (max-width:960px){
  [popover] {
    width: 80%;
  }
}

/* スマートフォン 横(ポートレート) */
@media only screen and (max-width:640px){
  [popover] {
    width: 90%;
  }
}

/* スマートフォン 縦(ポートレート) */
@media only screen and (max-width:480px){
  [popover] {
    width: 100%;
  }
  [popover] table tr th:nth-child(1){
    min-width: 30px;
  }
}