@charset "utf-8";

figure{
  max-width: 400px;
  height: 120px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  display: flex;
  margin: auto;
  background-color: #fff;
  border: 1px solid;
  border-color: #ee9900;
  border-radius: 6px;
}
summary{
  cursor: pointer;
  margin-top: 24px;
}
table{
  border-collapse: collapse;
  border: 2px solid #8c8c8c;
  margin: auto;
}
th, td{
  border: 1px solid #a0a0a0;
  padding: 3px 10px;
}
thead{
  background-color: #f0b4b4;
}
.scinario_text{
  vertical-align: middle;
  text-decoration: none;
  padding: 6px;
  margin: auto;
  color: #333333;
}
.scinario_title{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  padding-bottom: 4px;
}
.scinario_summary{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  margin: auto;
  font-size: 0.8em;
}
.scinario_img{
  width: 120px;
  height: 120px;
  margin-left: auto;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  background-size: contain;
  background-repeat: no-repeat;
}
.watched{
  margin: 2px auto;
  padding: 2px 6px;
  border-radius: 8px;
  width: fit-content;
  background-color: blue;
  color: white;
}
.passed{
  margin: 2px auto;
  padding: 2px 6px;
  border-radius: 8px;
  width: fit-content;
  background-color: green;
  color: white;
}
.gm{
  margin: 2px auto;
  padding: 2px 6px;
  border-radius: 8px;
  width: fit-content;
  background-color: purple;
  color: white;
}
.kp{
  margin: 2px auto;
  padding: 2px 6px;
  border-radius: 8px;
  width: fit-content;
  background-color: orange;
}
.dl{
  margin: 2px auto;
  padding: 2px 6px;
  border-radius: 8px;
  width: fit-content;
  background-color: aqua;
}