@charset "UTF-8";
#view { margin: 10px 0 0 0; background: #401E11 url(/images/bookshelf_right.png) right -168px repeat-y; padding: 0 40px 0 0; }

#viewer { margin: 0; background: #401E11 url(/images/bookshelf_left.png) left -168px repeat-y; padding: 0 0 0 40px; }

#favorites { background: transparent url(/images/bookshelf_bg.png) 0 0 repeat; margin: 0; padding: 0 0 15px; width: 100%; display: flex; flex-wrap: wrap; }
#favorites img { display: block; margin: 0 auto; height: 140px; width: auto; }

#bookshelf_bottom { margin: 0 3px; height: 80px; background: transparent url(/images/bookshelf_bottom.png) left bottom; }
#bookshelf_bottom::after { content: "MY COMMUNITY"; display: block; line-height: 80px; font-size: 32px; text-align: center; color: #401E11; font-family: "Arial Black","Century Gothic"; font-weight: bold; text-shadow: -1px -1px 2px #000; }

#rankings { float: right; width: 200px; margin: 0; }
#rankings .header { margin-bottom: 10px; }
#rankings ul { padding: 3px 0; margin: 0; height: 557px; overflow: auto; border: 1px solid #DDD; position: relative; /* ? */ }
#rankings li { list-style: none; padding: 3px 6px; margin: 0; }
#rankings li > div { border: solid 1px #DDD; padding: 3px; min-height: 70px; }
#rankings li img { cursor: pointer; margin-right: 5px; height: 70px; float: left; display: block; }
#rankings .drag-list-delbtn { cursor: pointer; }

li .thumbnail-inner { text-align: center; margin: 0; }

#rankincomu { margin-right: 210px; }

.header { padding: 5px; background-color: #F9F9F9; border: 1px solid #DDD; height: 20px; }

@media screen and (min-width: 950px) and (max-width: 1078px) { #rankincomu li { width: 20%; } }
@media screen and (min-width: 1078px) and (max-width: 1206px) { #rankincomu li { width: 16.66667%; } }
@media screen and (min-width: 1206px) and (max-width: 1334px) { #rankincomu li { width: 14.28571%; } }
@media screen and (min-width: 1334px) and (max-width: 1462px) { #rankincomu li { width: 12.5%; } }
@media screen and (min-width: 1462px) and (max-width: 1590px) { #rankincomu li { width: 11.11111%; } }
@media screen and (min-width: 1590px) and (max-width: 1718px) { #rankincomu li { width: 10%; } }
@media screen and (min-width: 1718px) and (max-width: 1846px) { #rankincomu li { width: 9.09091%; } }
@media screen and (min-width: 1846px) and (max-width: 1974px) { #rankincomu li { width: 8.33333%; } }
#rankingedit dt { font-weight: normal; color: #666; }

.submenu { text-align: right; float: right; }
.submenu button { line-height: 1.2; font-size: 0.75rem; }

.info { color: #808080; font-size: 0.8em; vertical-align: bottom; }

li.thumbnail { text-align: center; width: 128px; height: 183px; color: blue; font-size: 0.8em; margin: 0; padding: 0; background: url(/images/bookshelf_bg2.png) 0 0 repeat-x; overflow: hidden; position: relative; }
li.thumbnail a.del, li.thumbnail .drag-list-delbtn { cursor: pointer; position: absolute; top: 18px; left: 95px; color: #fff; display: block; width: 14px; height: 13px; background: url(/images/bookshelf_btn_del.png) 0 0 no-repeat; }
li.thumbnail span.title, li.thumbnail .itemtext { display: none; }
li.thumbnail img { cursor: pointer; padding: 32px 0 0; margin: 0 0; }

li.ui-sortable-helper { background-image: none !important; }

li.ui-state-highlight, .ui-draggable-dragging { background-image: none !important; }

li.thumbnail:hover .itemtext { display: block; position: absolute; top: 50%; left: 0; right: 0; text-shadow: 1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, -1px -1px 1px #000; color: #FFF; text-align: center; font-size: 0.875rem; }
li.thumbnail:hover .itemtext strong { font-weight: normal; }
li.thumbnail:hover .authork { display: none; }

/*閲覧時のみ*/
.neva li.thumbnail a.imghover img { transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; }
.neva li.thumbnail a.imghover:hover img { -webkit-transform: scale(115%); transform: scale(115%); transition: -webkit-transform 0.1s; transition: transform 0.1s; transition: transform 0.1s, -webkit-transform 0.1s; opacity: 1; }

@media screen and (min-width: 872px) and (max-width: 1000px) { .neva li.thumbnail { width: 25%; } }
@media screen and (min-width: 1000px) and (max-width: 1128px) { .neva li.thumbnail { width: 20%; } }
@media screen and (min-width: 1128px) and (max-width: 1256px) { .neva li.thumbnail { width: 16.66667%; } }
@media screen and (min-width: 1256px) and (max-width: 1384px) { .neva li.thumbnail { width: 14.28571%; } }
@media screen and (min-width: 1384px) and (max-width: 1512px) { .neva li.thumbnail { width: 12.5%; } }
@media screen and (min-width: 1512px) and (max-width: 1640px) { .neva li.thumbnail { width: 11.11111%; } }
@media screen and (min-width: 1640px) and (max-width: 1768px) { .neva li.thumbnail { width: 10%; } }
@media screen and (min-width: 1768px) and (max-width: 1896px) { .neva li.thumbnail { width: 9.09091%; } }
@media screen and (min-width: 1896px) and (max-width: 2024px) { .neva li.thumbnail { width: 8.33333%; } }
/*編集時のみ*/
.mycomyulist li.thumbnail { cursor: move; }
.mycomyulist li.thumbnail:hover img { opacity: 0.8; }
.mycomyulist li.thumbnail:hover .itemtext { display: block; position: absolute; top: 50%; left: 0; right: 0; text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; color: #FFF; text-align: center; font-size: 0.875rem; }
.mycomyulist li.thumbnail:hover .authork { display: none; }

#rankings li .title { color: blue; font-size: 0.8em; }

.droppable-active { background-color: #b0c4de; }

.dropped-hover { background-color: #6495ed; }