@charset "UTF-8";
h2{background:#000; padding:10px 20px; margin:0 auto 50px; font-family:'Roboto','Noto Sans JP',sans-serif; font-weight:100; font-size:30px; font-size:3.0rem; color:#fff;}

h3{font-size:19px; font-size:1.9rem; margin:0 0 1em 0; font-family:'Roboto','Noto Sans JP',sans-serif; font-weight:100;}
h5{font-size:16px; font-size:1.6rem; color:#990000; font-weight:600; margin:1em 0;}



article{text-align:center;}
.works-container{position:relative; padding-bottom:50px;}

.works{margin-top:100px; width:100%; margin:0 auto 60px auto; padding:0 20px; text-align:left;}
.works .tag{display:inline-block; margin-top:20px; margin-bottom:1em; padding:4px 16px; background:#eee; border-radius:8px; font-family:'Roboto','Noto Sans JP',sans-serif; font-weight:100; font-size:14px; font-size:1.4rem;}
.works ul{margin-top:16px; font-family:'Roboto','Noto Sans JP',sans-serif; font-weight:100; font-size:15px; font-size:1.5rem;}
.works ul.mt30{margin-top:30px;}
.works ul.song span{display: block; font-size:14px; font-size:1.4rem;}
.works .jacket{max-width:370px;}
.works .jacket .border{border:1px solid #ddd;}
.works .btn{display:inline-block; margin:8px 20px 0 0; }
.works .btn a{display:block; border:1px solid #666; border-radius:8px; padding:8px 20px; text-decoration:none; font-family:'Roboto','Noto Sans JP',sans-serif; font-weight:100;}
.works .btn a:hover{background:#eee;}

@media only screen and (min-width:340px) {
}

@media only screen and (min-width:740px) {
.works{margin:0 4% 80px 4%; text-align:left; vertical-align:top;}
.works .jacket{display:inline-block; width:50%; max-width:370px; vertical-align:top;}
.works .text{display:inline-block; width:48%; margin-left:2%; vertical-align:top;}
.works .tag{margin-top:0;}
}

@media only screen and (min-width:980px) {
h2{padding:10px 0;}
#topic{padding:0;}
}

@media only screen and (min-width:1000px) {
}