@charset "UTF-8";
.jacket a img{position:relative;}
.jacket a img:first-child,.title a img{position:absolute; width:100%; max-width:100%;}
.jacket a img:last-child{position: relative; width:auto;}

/* BEST PAGE */
h5 {margin-bottom: 8px; font-size: 15px; font-size: 1.5rem; text-align: left;}
h5:before {content: "●";}
#pageinfo{margin-top:30px; padding:0 20px;}
#pageinfo .date{margin-top:6px; font-size:13px; font-size:1.3rem; text-align:right; color:#666;}
#pageinfo p{text-align:left; font-weight:400; font-size:14px; font-size:1.4rem;}
@media only screen and (min-width:1090px) {
#pageinfo{padding:0;}
}

#sns{margin-top:16px; padding:8px 0 4px 0; background:#ddd; }
#sns.snslist{margin:0;}
#sns ul{text-align: right;}
#sns ul li{display:inline-block; margin-left:8px; vertical-align:top; height:20px;}
@media only screen and (min-width:1090px) {
#sns{margin:16px auto 0;}
}

/* 一覧 */
#bestlist{ background:url("../lib/bg-image.jpg") no-repeat; background-size:cover; background-position:0 center; width:100%;}
#bestlist .box{display:flex; justify-content: space-between; flex-wrap: wrap; padding:0 10px 16px 10px;}
#bestlist .list{flex-basis: auto; display:block; margin:16px 0 0 0; width:100%; background:rgba(255, 255, 255,.65); text-align:left; line-height:1.2; padding: 1%; border-radius:8px;}
#bestlist .list a{display:block;}
#bestlist .list .image{display:inline-block; width:35%; vertical-align:top;}
#bestlist .list .image img{border-radius:8px;}
#bestlist .list .best{display:inline-block; padding:2% 0 2% 0; width:62%; text-align:left;}
#bestlist .list .best .group{font-size:14px; font-size:1.4rem; font-weight:300; letter-spacing:0;}
#bestlist .list .best .name{display:block; font-size:19px; font-size:1.9rem;}
#bestlist .list .best .name.g-none{margin: 7% 0 0 0;}
#bestlist .list .best .album{margin-top:8px;}
#bestlist .list .best .album ul{display:flex; align-items:baseline; justify-content: space-between;}
#bestlist .list .best .album ul li{flex-basis: auto; margin-right:4px;}
#bestlist .list{margin:16px 0.5% 0 0.5%; width:47%; padding: 2.5%;}

@media only screen and (min-width:300px) {
#bestlist .list .image{width:100%;}
#bestlist .list .best{width:100%; text-align: center;}
}


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

@media only screen and (min-width:700px) {
#bestlist .list .best .group{font-size:15px; font-size:1.5rem; font-weight:300; letter-spacing:0;}
#bestlist .list{margin:16px 0.5% 0 0.5%; width:31%; padding: 2%;}
}

@media only screen and (min-width:940px) {
#bestlist .list{margin:16px 0.5% 0 0.5%; width:23%;  padding: 1%;}
}


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

/* 個別ページ */
#bestalbum{text-align:left;}
#bestalbum h4{margin-bottom:8px; width:60%; max-width:260px;}
#bestalbum .name{display:inline-block; padding-right:8px; font-size:24px; font-size:2.4rem;}
#bestalbum .group{display:inline-block; font-size:15px; font-size:1.5rem; font-weight:400;}
#bestalbum .group.en{font-family: "Oswald", sans-serif;}
#bestalbum #listboxbg{position:relative; margin-top:8px;}
#bestalbum #listbox{padding:0 0 16px 0; background:url("../lib/bg-image.jpg") no-repeat; background-size:cover; background-position:top center; width:100%;}
#bestalbum #listbox:after{content:""; display:block; position:fixed; top:0; left:0; z-index:-1; width:100%; height:100%;  }

#bestalbum .membername{padding:8px 0; background:#b77; color:#fff; font-size:1.8rem;}
#bestalbum .membername .prof{color:#fff; font-size:1.5rem;}
#bestalbum #listbox .box{display:flex; flex-flow:wrap; gap:8px; justify-content:center; padding:16px 0;}

#bestalbum .list{position:relative; flex-basis:auto; display: block; width:calc(100% / 2 - 16px); padding:8px 8px 90px 8px; background:rgba(255, 255, 255, 0.90); word-wrap:break-word; overflow-wrap:break-word;}

#bestalbum .list a{color:#007799; text-decoration:underline;}

#bestalbum .list .links ul{position:absolute; bottom:4px; left:0; right:0; text-align:center;}
#bestalbum .list .links ul li a{display:block; margin:8px; padding:4px 16px; text-decoration:none; border-radius: 18px; -webkit-box-sizing: border-box; box-sizing: border-box;}
#bestalbum .list .links ul li.applemusic a{border:1px solid #FF2F56; color:#FF2F56; font-size:13px; background:#fff;}
#bestalbum .list .links ul li.applemusic a:hover{background:#ffeff1;}
#bestalbum .list .links ul li.spotify a{border:1px solid #11D65C; color:#11D65C; font-size:13px; background:#fff;}
#bestalbum .list .links ul li.spotify a:hover{background:#e3ffee;}
#bestalbum .list .links ul li.bandcamp a{border:1px solid #1AA0C3; color:#1AA0C3; font-size:13px; background:#fff;}
#bestalbum .list .links ul li.bandcamp a:hover{background:#e2f0ff;}

#comment{margin:16px 0;}
#comment p{margin-bottom:16px; font-weight:400; text-align:left;}
.comment{margin:16px 0;}
.comment p{margin-bottom:16px; font-weight:400; text-align:left;}

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

@media only screen and (min-width:640px) {
#bestalbum h4{margin-bottom:8px; width:30%; max-width:260px;}
#bestalbum #listbox .box{justify-content:start; padding:16px;}
#bestalbum .list{width:calc(100% / 3 - 6px);}
}

@media only screen and (min-width:730px) {
#bestalbum .list{width:calc(100% / 4 - 6px);}
}

@media only screen and (min-width:1100px) {
#bestalbum #listbox .box{justify-content:start; padding:16px 0;}
#bestalbum .list{width:calc(100% / 5 - 7px);}
}



#profile{max-width:1090px; margin:0 20px; text-align:left; border:1px solid #666;}
#profile .box{padding:20px;}
#profile .profilename{background:#666; color:#fff; padding:4px 8px;}
#profile .name{display:inline-block; padding-right:8px; font-size:19px; font-size:1.9rem;}
#profile .group{display:inline-block; font-size:15px; font-size:1.5rem; font-weight:100;}
#profile .image{max-width:160px; margin-bottom:20px;}
#profile .web,#profile .bio{color:#666; font-weight:500;}
#profile .mb30{margin-bottom:30px;}
#profile .text a{text-decoration:underline; color:#007799;}
#profile p{margin-bottom: 15px;}

@media only screen and (min-width:640px) {
#profile{margin:0 auto;}
#profile .image{display:inline-block; width:16%; margin-right:2%; vertical-align:top; text-align:left;}
#profile .text{display:inline-block; width:79%;}
}