.bg-m-fire{
  background: rgb(214, 21, 21);
}
.bg-m-water{
  background: rgb(28, 169, 204);
}
.bg-m-soil{
  background: rgb(204, 114, 30);
}
.bg-m-wind{
  background: rgb(20, 199, 29);
}
.bg-m-light{
  background: rgb(224, 206, 39);
}
.bg-m-dark{
  background: rgb(101, 66, 156);
}
.bg-m-person{
  background: rgb(137, 193, 207);
}
.bg-media{
  background: rgb(124, 124, 124);
}
.bg-nonactive{
  background: rgb(240,240,240);
}

#modaiList_search_box .form-check-input{
  margin-left: -1.3em;
}

#modalList{
  display:flex;
  flex-wrap: wrap;
}
#modalList > div.card{
  display: block;
  width: calc(100% - 12px);
  margin: 6px;
  padding: 1rem;
}
#modalList > div.card:hover{
  width: calc(100% - 4px);
  margin: 2px;
  padding: calc(1rem + 4px);
  background: rgba(230,230,230,0.8);
}

.modalList_chant, .modalList_ruby{
  color: rgb(100, 100 ,100);
  font-size: 0.95rem;
}
.modalList_media::before
, .modalList_magicType::before
, .modalList_chant::before
, .modalList_ruby::before{
  padding-right: 0.5rem;
  color: rgb(100, 100 ,100);
  font-size: 0.95rem;
  font-weight: bold;
}
.modalList_media::before{
  content: '媒体';
}
.modalList_magicType::before{
  content: '属性';
}
.modalList_chant::before{
  content: '詠唱';
}
.modalList_ruby::before{
  content: '読み';
}

@media (min-width: 768px){
  #modalList > div.card{
    width: calc(100% / 2 - 12px);
  }
  #modalList > div.card:hover{
    width: calc(100% / 2 - 4px);
  }
}
@media (min-width: 1500px){
  #modalList > div.card{
    width: calc(100% / 3 - 12px);
  }
  #modalList > div.card:hover{
    width: calc(100% / 3 - 4px);
  }
}