#liveList {
    max-width: 1400px;          /* 最大幅を設定 */
    margin: 0 auto;            /* 中央に配置 */
    padding: 20px;             /* 内側の余白 */
    background-color: #000; /* 背景色 */
    border-radius: 8px;        /* 角を丸く */
}
#liveList li{
    list-style: none; /* マーカーを削除 */
    border-top: 1px solid #ccc;
    width: 100%;
}
#liveList li a {
    position: relative;
    display: block;
    padding: 60px 60px 60px 20px;
    text-decoration: none; /* 下線を消す */
    color: inherit; /* 親要素の色を継承 */
    background: transparent; /* 初期の背景を透明に */
    overflow: hidden; /* 子要素がはみ出ないように */
}

#liveList li a::before {
    content: ""; /* 空の疑似要素 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* 背景の横幅 */
    height: 100%; /* 背景の高さ */
    background: linear-gradient(to right, rgba(0, 0, 128, 0.1), rgba(0, 0, 128, 0.5));
    opacity: 0; /* 初期は透明 */
    transition: opacity 0.3s ease-in-out; /* 透明度をスムーズに変化 */
    z-index: 1; /* テキストの後ろに配置 */
}

#liveList li a:hover::before {
    opacity: 1; /* ホバー時に背景を表示 */
}

#liveList dl{
    display: flex;
    width: 100%;
    line-height: 1.4;
}
#liveList dt{
    width: 220px;
    margin-right: 0px;
    color: #fff;
    display: flex;
    align-items: center;
}

dt{
    width: 220px;
    margin-right: 0px;
    color: #fff;
    display: flex;
    align-items: center;
}

@media screen and (max-width: 600px) {

    dd h1{
        font-size:13px;
    }

    #liveList li a {
        display: block;
        padding: 10px 10px 10px 10px;
    }
    #liveList dl {
        display: block;
        line-height: 1.4;
    }
    #liveList dt {
        margin-top:10px;
    }
    #liveList .td1 {
        display: inline-block;
        margin-top:10px;
    }
    #liveList .td2 {
        display: inline-block;
        margin-bottom:10px;
    }
}