#event.djdata{border:3px solid #602576;}
#event.djdata,#main{background-color:#323232; box-shadow:0 0 10px rgba(0,0,0,.5);}

#main img{width:100%;}

/*
================================================================================================================
イベントページ
================================================================================================================
*/
#ver{font-size:clamp(0.625rem, 0.534rem + 0.45vw, 0.875rem);/*14-10*/ text-align:center; padding:30px 20px;}
@media screen and (max-width:830px){#ver{text-align:left; padding:20px;}}

/*
================================================================================================================
DJ DATA
================================================================================================================
*/
#event.djdata h2{
display:block;
width:100%;
color:#fff;
background:#602576;
font-size:20px;
font-weight:normal;
font-family:'M PLUS 1', sans-serif;
text-align:center;
border-radius:5px;
padding:10px 0;
margin:0 auto 10px;}
@media screen and (max-width:640px){#event.djdata h2{font-size:18px;}}
@media screen and (max-width:480px){#event.djdata h2{font-size:15px; padding:5px 0;}}

/*
=============================
楽曲
=============================
*/
#event.djdata .list > ul{display:flex; color:#000; border:1px solid #333; border-bottom:none;}
#event.djdata .list > ul li:first-child{width:300px;}
#event.djdata .list > ul li{display:flex; width:calc((100% - 300px) / 3); position:relative; align-items:center; justify-content:center; padding:5px;}
#event.djdata .list > ul li + li{border-left:1px solid #333;}

#event.djdata .list > ul.head{color:#fff; background-color:#111; font-weight:bold;}

#event.djdata .list > ul.music{background:#fff; font-size:13px;}
#event.djdata .list > ul.music:nth-child(odd){background:#ccc;}
#event.djdata .list > ul.music li:not(:first-child){min-height:60px;}
#event.djdata .list > ul.music:last-child{border-bottom:1px solid #333;}

@media screen and (max-width:640px){
#event.djdata .list > ul.head{display:none;}
#event.djdata .list > ul{flex-wrap:wrap;}
#event.djdata .list > ul li:first-child{width:100%;}
#event.djdata .list > ul li{display:flex; width:calc(100% / 3);}

#event.djdata .list > ul.music{border-bottom:1px solid #333;}
#event.djdata .list > ul.music + ul.music{margin:10px auto 0;}
#event.djdata .list > ul.music li:first-child{color:#fff; background:#00b941; font-weight:bold; border-bottom:1px solid #333;}
#event.djdata .list > ul.music:nth-child(odd) li:first-child{background:#729700;}
#event.djdata .list > ul.music li:not(:first-child){padding-top:20px;}
#event.djdata .list > ul.music li:nth-child(2){border-left:none;}

#event.djdata .list > ul.music li::before{
display:block !important;
position:absolute;
top:0;
left:0;
width:100%;
height:16px;
color:#fff;
background-color:#111;
font-size:12px;
line-height:16px;
text-align:center;
visibility:visible !important;}
#event.djdata .list ul.music li:first-child::before{display:none !important;}
#event.djdata .list ul.music li:nth-child(2)::before{content:"NORMAL";}
#event.djdata .list ul.music li:nth-child(3)::before{content:"HYPER";}
#event.djdata .list ul.music li:nth-child(4)::before{content:"ANOTHER";}}

@media screen and (max-width:480px){
#event.djdata{padding:10px;}
#event.djdata .list > ul.music li img{max-width:60px;}}