div#playListArea{
    height: 300px;
}

/* ボタン同士の間隔 */
#prev, #next, .play, .stop, .answer{
  margin-left: 20px;
}

/* 再生ボタン */
/* 円 */
.play:hover{border:0.1em solid #33FF66;}
.play:hover::before{
  border-top: 0.4em solid transparent;
  border-left: 0.6em solid #33ff66;
  border-bottom: 0.4em solid transparent;
}
.play {
  font-size: 70px;
  position: relative;
  width: 1.4em;
  height: 1.4em;
  border: 0.1em solid #39a9d6;
  border-radius: 100%;
}
/* マーク */
.play::before {
  content: "";
  position: absolute;
  top: 0.20em;
  left: 0.38em;
  width: 0;
  height: 0;
  border-top: 0.4em solid transparent;
  border-left: 0.6em solid #39a9d6;
  border-bottom: 0.4em solid transparent;
}

/* 停止ボタン */
/* 円 */
.stop:hover {border: 0.1em solid #FF3333	;}
.stop:hover::before {background-color:  #FF3333	;}

.stop {
  font-size: 70px;
  position: relative;
  width: 1.4em;
  height: 1.4em;
  border: 0.1em solid #39a9d6;
  border-radius: 100%;
}
/* マーク */
.stop::before {
  content: "";
  position: absolute;
  top: 0.25em;
  left: 0.25em;
  width: 0.7em;
  height: 0.7em;
  background-color: #39a9d6;
}

/* サビボタン */
/* 円 */
.answer:hover{border: 0.1em solid #FFFF00;}
.answer:hover::before{    color: #ffff00;}

.answer{
  font-size: 70px;
  position: relative;
  width: 1.4em;
  height: 1.4em;
  border: 0.1em solid #39a9d6;
  border-radius: 100%;
}
.answer::before{
  content: "♪";
  color: #39a9d6;
  position: absolute;
  top: -0.2em;
  left: 0.1em;
  width: 0.7em;
  height: 0.7em;
}

/* テーブル */
.scroll{
  overflow: scroll;
}

table{
  border-collapse:separate;
  border-spacing: 5px;
  width: 100%;
}

table th,table td{
  border-radius: 5px;
  text-align: center;
  padding: 10px 0;
}

table th{
  background-color: #c79852;
  color: white;
  border:solid 1px #927141;
}

table td{
  background-color: #e4d4bc;
  border:solid 1px #af9d85;
}

td:first-child:hover{
  background-color: #FF6666;
}


table thead th{
  /* 縦スクロール時に固定する */
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  /* tbody内のセルより手前に表示する */
  z-index: 1;
}


/* 曲名が出てから作者を出すCSS */
.name {
    position   : relative;
    width: 50%;
}
.name:hover .balloon {
  display: inline;                /* インライン要素として表示 */
}
.balloon {
  position : absolute;                /* 親要素を基準 */
  display: none;                        /* 要素を非表示 */
  padding: 1px;                         /* テキストの前後の余白 */
  background-color: rgba(255, 255, 255);       /* 背景色（透明度） */
  border-radius: 25px 25px 25px 25px; 
  width:150px;                          /* 吹き出し全体の幅 */
  right : -1%;                          /* 表示位置 */
  font-size: 80%;                       /* 文字サイズ */
}
.balloon:after{
  border-right: 12px solid rgba(255, 255, 255);  /* 吹き出し口の幅・色 */
  border-top: 5px solid transparent;     /* 吹き出し口の高さ１／２ */
  border-bottom: 5px solid transparent;  /* 吹き出し口の高さ１／２ */
  left: -6px;                            /* 吹き出し口の位置調整 */
  top: 17%;                                /* 吹き出し口の縦位置 */
  content: "";                       /* コンテンツの挿入 */
  position: absolute;                /* 親要素を基準 */
}

/* タイトルのwith サイズ */
span.small{font-size: 20px;}

/* アイコンみたいなもの */
#hayaosi{
  font-size: 15px;
  position: absolute;
  top: 2em;
  left: 28em;
  width: 1.5em;
  heigth: 1.3em;
  border: solid 1.5em #6699ff;
}
#hayaosi::after{
  content:"";
  position: absolute;
  width: 3.0em;
  top : 0.5em;
  left: -1.5em;
  border: solid 0.5em  #339999; 
}
#hayaosi:hover::before{    border:outset 1.5em #FFFF33;}
#hayaosi::before{
  content:"";
  position: absolute;
  width: -3em;
  top : -3em;
  left: -15px;
  border:outset 1.5em #FF6666;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
}