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

#main img{width:100%;}

/*
================================================================================================================
イベントページ
================================================================================================================
*/
#main{color:#444;}

#main h2{
display:block;
background-size:100% auto;
background-repeat:no-repeat;
background-position:top center;
padding:30px 10px 0;}
#main h2 p{width:70%; max-width:500px; margin:0 auto 0 0;}
#main h2.title01{background-image:url(/game/2dx/33/images/event/lab/line01.jpg);}
#main h2.title02{background-image:url(/game/2dx/33/images/event/lab/line02.jpg);}
@media screen and (max-width:640px){#main h2{padding:20px 10px 0;}}

#main h3,#main .text{width:calc(100% - 20px); max-width:800px; font-family:'M PLUS 1', sans-serif; font-weight:normal; margin:0 auto; letter-spacing:1px; line-height]140%;}
#main h3 p,#main .text{filter:drop-shadow(1px 1px 0 #fff) drop-shadow(-1px -1px 0 #fff) drop-shadow(-1px 1px 0 #fff) drop-shadow(1px -1px 0 #fff); transform:translateZ(0);}
@media screen and (max-width:980px){#main .text{font-size:13px;}}
@media screen and (max-width:640px){#main .text{font-size:12px;}}

#main h3{
display:block;
background:linear-gradient(to right, #efff00 0%,#edf298 50%,#ffffff 100%);
font-size:18px;
padding:10px;
margin:40px auto 10px;}
#main .text span{color:#00924d;}
#main h3 p::before{content:"■";}
@media screen and (max-width:980px){#main h3{font-size:16px; margin:20px auto 10px;}}
@media screen and (max-width:640px){#main h3{font-size:14px; padding:5px 10px;}}

#main #intro{
background-image:url(/game/2dx/33/images/event/lab/intro_bg.jpg);
background-size:100% auto;
background-repeat:no-repeat;
background-position:bottom center;
padding:30px 0;}
@media screen and (max-width:640px){#main #intro{background-size:140% auto; padding:10px 0 20px;}}

#main .pic{width:100%; margin:0 auto;}
#main .pic:not(.line){margin:20px auto;}
@media screen and (max-width:980px){#main .pic:not(.line){width:calc(100% - 20px);}}

/*バージョン表記*/
#ver{
width:100%;
background:#fff100;
font-size:12px !important;
text-align:center;
padding:15px 10px;
margin:0 auto;}
@media screen and (max-width:800px){#ver{text-align:left;}}
@media screen and (max-width:480px){#ver{font-size:10px !important; padding:5px 10px;}}

/*
================================================================================================================
DJ DATA
================================================================================================================
*/
#event.djdata{
font-size:14px;
background-image:url(../../images/event/lab/bg.jpg);
background-size:100% auto;
background-position:center bottom;
padding:20px;}
@media screen and (max-width:480px){#event.djdata{padding:10px;}}

#event.djdata h2{
display:block;
width:100%;
color:#fff;
background:#008948;
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;}}

#setting{color:#000; background:rgba(255,255,255,.5); border-radius:10px; padding:20px;}
#setting .inner{display:flex; width:100%; justify-content:space-between;}
#setting .inner > *{
display:block;
float:none;
width:calc(50% - 10px);
background:#fff;
border-radius:10px;
padding:10px 10px 10px 40px;
border:1px solid #323232;}

.input-radio label:before{top:calc(50% - 9px); left:10px;}
.input-radio label:after{top:calc(50% - 5px); left:14px;}

#setting + p{color:#000; font-size:12px; margin:10px auto 20px;}

#base input[type="submit"].submit_btn{max-width:200px; margin:20px auto 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:#00c8ae; font-weight:bold; border-bottom:1px solid #333;}
#event.djdata .list > ul.music:nth-child(odd) li:first-child{background:#009ca9;}
#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;}}