h3{
  border-bottom: 2px solid rgb(153, 147, 125);
  padding: 0.2em 0.8em;
  margin-top: 3em;
  letter-spacing: 0.05em;
  text-align: center;
  font-weight: bold;
  font-size: 230%;
  text-shadow: text-shadow: 10px 10px 10px #ee2121;
  text-shadow: text-shadow: 10px 10px 10px #ee2121;
  text-shadow: text-shadow: 10px 10px 10px #ee2121;
}

li{
  padding: 0.5em 0;
}

a{
  color:rgb(230, 211, 176);
}

a:hover{
  color: rgb(254, 229, 67);
  text-decoration: underline;
}

th,td{
  border: solid 1px #888;
}

.bgm_list,.bgm_list2{
  width: 90%;
  margin: 0 auto;
}

.bgm_list tr,.bgm_list2 tr{
  width: 100%;
}

.bgm_list td,.bgm_list2 td{
  width: 44%;
  background-color: rgb(40, 38, 70);
  vertical-align: middle;
  font-family: 'Roboto Slab', Garamond, 'Times New Roman', 游明朝, 'Yu Mincho', 游明朝体, YuMincho, 'ヒラギノ明朝 Pro W6', 'Hiragino Mincho Pro', HiraMinProN-W3, HGS明朝E, 'ＭＳ Ｐ明朝', 'MS PMincho', serif;
  padding: 2em auto;
}

.bgm_list td:first-child,.bgm_list2 td:first-child{
  width: 44%;
  background-color: rgb(7, 5, 54);
  font-weight: bold;
  font-size: 100%;
  color: rgb(244, 200, 89);
  line-height: 1.2em;

}

.bgm_list span,.bgm_list2 span{
  font-size: 80%;
  color: rgb(177, 177, 177);
}

.bgm_list td:last-child{
  width: 12%!important;
  text-align: center;
  vertical-align: middle;
  background-color: rgb(7, 5, 54);
}

.listen img{
  width: 80%;
  max-width: 50px;
}

dt{
  display: block;
  padding: 1em;
  background: rgb(89, 3, 3);
  border: double rgb(198, 196, 158) 3px;
  border-radius: 0.5em;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
}

dt:hover{
  color: rgb(255, 246, 34);
  text-decoration: underline;
  background: rgb(153, 28, 28);
}

dd{
  margin: 0;
  padding: 0;
}




@media screen and (max-width: 660px)
{
  .bgm_list td:first-child{
    font-size: 85%!important;
  }

  .bgm_list td{
    font-size: 70%!important;
  }

  .bgm_list td:last-child{
    padding: 0.2em!important;
    margin: 0;
  }

  .listen img{
    width: 100%;
  }
}