ul#chara_list{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
    
ul#chara_list > li{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    padding: 5px;
    background: #d2e6ff;
/*    max-width: 210px;*/
    width: calc(25% - 8px);
    cursor: pointer;
    margin: 4px;
}

ul#chara_list > li:nth-of-type(even) {
    background: #fff;
}

ul#chara_list > li:hover{
background:#7eb6e1;
}

@media screen and (max-width:980px) {
ul#chara_list > li{
    width: calc(33% - 8px);
    max-width: initial;
}
}

@media screen and (max-width:640px) {
ul#chara_list > li{
    width: calc(50% - 8px);
    max-width: initial;
    gap: 10px;    
}
}

@media screen and (max-width:375px) {
ul#chara_list > li{
    font-size: 85%;
}
}

@media screen and (max-width:340px) {
ul#chara_list > li{
    font-size: 75%;
    gap: 0px;
}
}


.original-base{
  margin: 2em auto;
  position:relative;
}

.original-card{
  position:absolute;
  top: 10%;
  left: 20%;
  width: 29%;
}

.original-qr{
  position:absolute;
  top: 30%;
  left: 60%;
  width: 27%;
  border: solid #000;
  border-width: 0.25vw; 
  padding:0.25vw;
  background: white;
}

@media screen and (max-width:980px) {
.original-qr{
    border-width: 0.5vw;
    padding: 0.5vw;
}
}