@charset "utf-8";
#mv{height:40vh; background:url("../lib/bg_top2a.jpg") center center no-repeat; background-size:cover;}
@media only screen and (min-width:600px) {
#mv{height:60vh}
}
@media (orientation: landscape) and (min-width:960px){
#mv{height:100vh}
#mv img{height:100vh}
#mv:before{content:""; position:absolute; width:100%; height:100%; background:rgba(63, 60, 60, 0.2);}
}
h3{margin-bottom:16px; font-family: 'Kanit', sans-serif; font-weight:300; font-size:clamp(2.6rem, 2.108rem + 2.46vw, 3.8rem);}

#news{padding:30px 20px;}
#news ul{text-align:left; max-width:750px; margin:0 auto;}
#news ul li{margin-bottom:16px; font-size:1.5rem; font-weight:300;}
#news ul li span{display:block; font-family: 'Kanit', sans-serif; font-weight:300; font-size:1.5rem;}
#news ul li a{color:#fff; text-decoration:underline;}

#schedule{padding:30px 20px; background:#4f4f4f;}
#schedule ul{text-align:left; max-width:750px; margin:0 auto;}
#schedule ul li{margin-bottom:16px; font-size:1.5rem; font-weight:300;}
#schedule ul li span{display:block; font-family: 'Kanit', sans-serif; font-weight:300; font-size:1.5rem;}
#schedule ul li a{color:#fff; text-decoration:underline;}

#movie{padding:30px 20px;}
#movie .thumb a{position:relative; display:block; margin:0 auto 32px; max-width:600px;}
#movie .thumb a:before{display:block; position:absolute; content:""; width:100%; height:100%; background:url("../lib/movie-playbtn.png") 0 0 no-repeat; background-size:cover;}

#sound{padding:30px 20px; background:#4f4f4f;}
#sound h3{font-size:17px; font-size:1.7rem; text-align:left;}
#sound audio{margin-bottom:25px; width:100%;}
#sound #soundbox{margin:0 auto; max-width:650px;}

.morebtn{text-align:right; max-width:750px; margin:0 auto;}
.morebtn a{display:inline-block; margin:0 0 0 auto; padding:0 4px 2px; font-family: 'Kanit', sans-serif; font-weight:300; font-size:1.5rem; border-bottom:2px solid #fff; color:#fff;}

@media (orientation: landscape) and (min-width:960px){
#information{position:absolute; bottom:120px; left:0; right:0; max-width:1200px; margin:0 auto; display:flex; gap:32px;}
#news,#schedule,#movie{position:relative; width:calc(100% / 3); padding:10px 10px 50px 10px; background:rgba(37, 30, 28, 0.5); text-align:left;}
#news{order:1;}
#schedule{order:3;}
#movie{order:2;}

#sound{display:none;}

.morebtn{position:absolute; right:20px; bottom:20px;}

footer{position:absolute; bottom:10px; left:0; right:0;}
footer ul.icon{display:none;}
}