/*-------------------------------------
RANKING CSS
---------------------------------------*/
/* rankingTop */
#rankingTop { position: relative; }

/* RankingTabSelect */
.rankingSelectTab { background: #f3f3f3; overflow-y: hidden; margin: 0 -10px; border-top: 1px solid #e7e7e7; }
.rankingSelectTab ul { padding: 8px 8px 0; margin: 0; }
.rankingSelectTab ul > li:not(:first-child) { display: none; }
.rankingSelectTab ul.slick-initialized { display: block; }
.rankingSelectTab ul li { display: block; outline: 0; }
.rankingSelectTab ul li span { display: block; padding: 12px 0; border-bottom: 4px solid transparent; text-align: center; font-weight: bold; color: #333; font-size: 1.2rem; }
.rankingSelectTab ul .slick-current span { border-bottom-color: #ffa83d; }

.rankingTabBody { padding: 0 2px; margin: 0 -2px; outline: 0; }
.rankingTabBody.slick-initialized { display: block; }
.rankingTabBody > li:not(:first-child) { display: none; }


.rankingLoading { position: absolute; left: 0; top: 50px; opacity: 0; z-index: -1; width: 100%; height: calc(100% - 50px); background: #fff url(../img/ajax-loader.gif) no-repeat center; transition: all 0.3s; }
.rankingLoading.show { opacity: 1; z-index: 1; }

.ttlRanking { background-color: #fff; padding: 16px 8px 0; color: #333; font-size: 1.6rem; font-weight: bold; -webkit-box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.1); box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.1); }
.ttlRanking::before { content: "\e906"; display: inline-block; margin-right: 4px; font-family: 'icomoon' !important; }

.rankingContents { padding: 0 0 4px; overflow: hidden; /* rankingTop */ /* common */ }
.rankingContents .publishDate { text-align: right; font-size: 1rem; color: #888; }
.rankingContents .rankingThumb { float: right; margin: 0 0 8px 8px; font-size: 1rem; color: #888; text-align: right; }
.rankingContents .rankingThumb img { display: block; border: 1px solid #efefef; margin-bottom: 4px; }
.rankingContents .rankingData {overflow: hidden;margin: 0;background-color: #fff;}
.rankingContents .rankingData li a { display: block; }
.rankingContents .rankingNum { display: inline-block; width: 25px; height: 25px; margin-right: 4px; background-color: #d3d3d3; line-height: 25px; text-align: center; font-weight: bold; font-size: 1.2rem; color: #333; }
.rankingContents [class^="icon-arrow"], .rankingContents .icon-new { display: inline-block; font-size: 1.6rem; vertical-align: middle; }
.rankingContents .rank01 .rankingNum { background-color: #ffa83d; color: #fff; }
.rankingContents .icon-new::before { font-size: 1rem; color: #fa6565; }
.rankingContents .icon-arrow-up::before { color: #fa6565; }
.rankingContents .icon-arrow-right::before { color: #6dbd4a; }
.rankingContents .icon-arrow-down::before { color: #50a3d3; }
.rankingContents .rankingMainname { max-height: 2.5em; margin: 4px 0; line-height: 1.3; font-size: 1.4rem; font-weight: bold; color: #000; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.rankingContents .rankingMainname a { color: #000; }
.rankingContents .rankingMiddletxt, .rankingContents .rankingSubname { max-height: 2.5em; margin: 0 0 .3rem; line-height: 1.3; font-size: 1.2rem; font-weight: normal; color: #888; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.rankingContents .rankingMiddletxt a, .rankingContents .rankingSubname a { color: #888; }
.rankingContents .rankingMiddletxt { font-size: 1.4rem; font-weight: 700; color: #a88a47; }
.rankingContents .rankingMiddletxt a { color: #a88a47; }
.rankingContents .rankingMorebtn a {display: block;background-color: #fff;padding: 16px 8px;margin: 1em 0 0;border-top: 1px solid #e7e7e7;border-bottom: 1px solid #e7e7e7;text-align: center;color: #333;font-size: 1.4rem;font-weight: bold;-webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);}
.rankingContents ul.genres{ width: auto; position: static; padding-top: 0; }
.rankingContents ul.genres li{ font-size: 1.1rem; color: #888; }

#rankingList .ttlRanking { position: relative; background-color: #3f3f3f; padding: 16px 28px 16px 40px; margin-bottom: 8px; margin-top: 0; color: #fff; }
#rankingList .ttlRanking::before, #rankingList .ttlRanking::after { position: absolute; top: 50%; margin-top: -12px; vertical-align: sub; color: #d0d0d0; font-size: 2.4rem; font-weight: normal; }
#rankingList .ttlRanking::before { left: 8px; margin-top: -12px; }
#rankingList .ttlRanking::after { content: "\f054"; display: block; right: 8px; font-family: 'icomoon'; }
#rankingList .ttlRanking a { display: block; }
#rankingList .rankingContents {padding: 8px 8px 18px;background-color: #fff;}
#rankingList .rankingContents:last-child { border-bottom: 1px solid #d6d6d6; }
#rankingList .adBanner { border-top: 1px solid #d6d6d6; padding-top: 18px; }

#rankingList h1, #rankingDetail h1 { background-color: #f7f7f7; padding: 16px 8px; border-top: 1px solid #e8e8e8; font-size: 1.4rem; font-weight: bold; color: #FF8C00; }

#rankingDetail .rankingHead { position: relative; padding: 8px; background-color: #fff; border-top: 1px solid #d0d0d0; border-bottom: 1px solid #d0d0d0; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; }
#rankingDetail .rankingHead .btnNext, #rankingDetail .rankingHead .btnPrev { width: 40px; }
#rankingDetail .rankingHead .btnNext a, #rankingDetail .rankingHead .btnPrev a { display: block; width: 40px; height: 40px; background-color: #3c3c3c; border-radius: 4px; font-family: 'icomoon' !important; text-align: center; color: #fff; font-size: 2rem; line-height: 40px; }
#rankingDetail .rankingHead h2 { text-align: center; font-size: 1.6rem; font-weight: bold; line-height: 1.5; color: #333; }
#rankingDetail .rankingHead h2 span { display: block; font-size: 1rem; font-weight: normal; color: #888; }
#rankingDetail .rankbox {position: relative;padding: 1rem;border-bottom: 1px solid #d0d0d0;min-height: 7rem;background: #FFF;}
#rankingDetail .rankbox:nth-child(5n) { border-top: 1px solid #d0d0d0; }
#rankingDetail .rankbox > a { display: table; width: 100%; }
#rankingDetail .rankbox .rankicon { display: table-cell; width: 36px; vertical-align: top; }
#rankingDetail .rankbox .rankicon .icon-new { padding-left: 0; padding-right: 0; }
#rankingDetail .rankbox .rankinfo { display: table-cell; width: auto; }
#rankingDetail .rankbox .thumb { width: 82px; float: left; margin: 0 8px 4px 0; position: relative; height: 0; height:47px; }
#rankingDetail .rankbox .thumb img { display: block; border: 1px solid #efefef; margin-bottom: 4px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 100%; width: auto; height: auto; max-height: 100%; }
#rankingDetail .rankbox .overflow { overflow: hidden; }
#rankingDetail .rankbox .rankingMainname { font-size: 1.6rem; display: block; -webkit-box-orient: inherit; -webkit-line-clamp: inherit; line-height: 1.3; }
#rankingDetail .rankbox .rankingSubname { font-size: 1.2rem; text-overflow: inherit; white-space: normal; line-height: 1.3; }
#rankingDetail .rankbox .rankingMiddletxt { white-space: normal; }
#rankingDetail .rankbox .rankingDesc { line-height: 1.4; font-size: 1.1rem; color: #af9c7a; }
#rankingDetail .rankbox .rankingSubinfo {
	clear: both; padding-right: 50px;
	min-height: 43px;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-justify-content: flex-start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-webkit-align-content: stretch;
	-ms-flex-line-pack: stretch;
	align-content: stretch;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}
#rankingDetail .rankbox .rankingSubinfo .icons { padding: 0; margin-bottom: 0; }
#rankingDetail .rankbox .rankingSubinfo .icons .iconReview { width: 62px; }
#rankingDetail .rankbox .rankingSubinfo .datalist { display: block; padding: 0; }
#rankingDetail .rankbox .rankingSubinfo .datalist li { list-style: none; display: inline-block; padding: 0; margin-right: 4px; color: #484848 !important; font-size: 1.2rem; }
#rankingDetail .rankbox .rankingSubinfo .datalist li:last-child { margin-right: 0; }
#rankingDetail .rankbox .rankingSubinfo .datalist li::before { display: inline-block; margin-right: 4px; font-size: 1.6rem; }
#rankingDetail .rankbox .rankingTool { position: absolute; right: 8px; bottom: 12px; }

#rankingFoot .share { width: 95%; display: table; background-color: #fff; border: 1px solid #d6d6d6; padding: 1em; margin: 1em auto; box-sizing: border-box; }
#rankingFoot .share p, #rankingFoot .share ul { display: table-cell; vertical-align: middle; }
#rankingFoot .share p { width: 6em; line-height: 1.5; font-weight: 700; }
#rankingFoot .share ul { text-align: right; }
#rankingFoot .share ul li { display: inline-block; width: 30%; }
#rankingFoot .share ul li a { display: block; border-radius: 8px; box-sizing: border-box; padding: 8px; text-align: center; }
#rankingFoot .share ul li a i { font-size: 2.4rem; }
#rankingFoot .share ul li a.fb { background: #406ca9; background: -moz-linear-gradient(top, #406ca9 0%, #22559b 100%); background: -webkit-linear-gradient(top, #406ca9 0%, #22559b 100%); background: linear-gradient(to bottom, #406ca9 0%, #22559b 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#406ca9', endColorstr='#22559b',GradientType=0 ); }
#rankingFoot .share ul li a.line { background: #33cb10; background: -moz-linear-gradient(top, #33cb10 0%, #13c200 100%); background: -webkit-linear-gradient(top, #33cb10 0%, #13c200 100%); background: linear-gradient(to bottom, #33cb10 0%, #13c200 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33cb10', endColorstr='#13c200',GradientType=0 ); }
#rankingFoot .share ul li a.twitter { background: #0fa4d6; background: -moz-linear-gradient(top, #0fa4d6 0%, #0096cf 100%); background: -webkit-linear-gradient(top, #0fa4d6 0%, #0096cf 100%); background: linear-gradient(to bottom, #0fa4d6 0%, #0096cf 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0fa4d6', endColorstr='#0096cf',GradientType=0 ); }
#rankingFoot .sublink { border-top: 2px solid #d6d6d6; }
#rankingFoot .sublink ul { overflow: hidden; }
#rankingFoot .sublink ul li { float: left; width: 50%; margin-right: -1px; border-bottom: 1px solid #d6d6d6; border-right: 1px solid #d6d6d6; }
#rankingFoot .sublink ul li:nth-child(2n) { border-right: none; }
#rankingFoot .sublink ul li a {position: relative;display: block;padding: 8px 16px 8px 8px;line-height: 1.5;font-size: 1.2rem;background: #FFF;}
#rankingFoot .sublink ul li a::after { position: absolute; right: 6px; top: 50%; margin-top: -8px; content: "\f054"; font-family: 'icomoon'; color: #d6d6d6; font-size: 1.4rem; }

div[id^="rankingModal"] { width: 100%; left: 0; bottom: -100vh; position: fixed; background-color: rgba(0, 0, 0, 0.8); z-index: 9999; -webkit-transition: all 0.3s; transition: all 0.3s; }
div[id^="rankingModal"].open { bottom: 0; }
div[id^="rankingModal"] p { text-align: right; }
div[id^="rankingModal"] #rankingModalClose i { font-size: 2.4rem; padding: 8px; }
div[id^="rankingModal"] ul { padding: 0 1em 2em; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: flex-start; -ms-flex-align: start; }
div[id^="rankingModal"] ul li { width: 49%; }
div[id^="rankingModal"] ul li button { width: 100%; display: block; padding: 14px 0; box-sizing: border-box; border-radius: 8px; text-align: center; font-size: 1.6rem; }
div[id^="rankingModal"] ul li button::before { margin-right: 4px; font-size: 2rem; vertical-align: sub; }

/* ranking Button */
#content button { border: none; background-color: transparent; outline: 0; }

.rankingContents .btnJoin::before { content: "\e901"; font-family: 'icomoon'; }

.rankingContents .btnJoined::before { content: "\e902"; font-family: 'icomoon'; }

.rankingContents .btnClip::before { content: "\e904"; font-family: 'icomoon'; }

.rankingContents .btnCliped::before { content: "\e905"; font-family: 'icomoon'; }

.btnGray { background: #e7e7e7; background: -moz-linear-gradient(top, #e7e7e7 0%, #e3e3e3 100%); background: -webkit-linear-gradient(top, #e7e7e7 0%, #e3e3e3 100%); background: linear-gradient(to bottom, #e7e7e7 0%, #e3e3e3 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#e3e3e3',GradientType=0 ); color: #000; }

.btnOrange { background: #ff7d00; background: -moz-linear-gradient(top, #ff7d00 0%, #ff6900 100%); background: -webkit-linear-gradient(top, #ff7d00 0%, #ff6900 100%); background: linear-gradient(to bottom, #ff7d00 0%, #ff6900 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7d00', endColorstr='#ff6900',GradientType=0 ); color: #fff; }

.nextRanking { width: 90%; margin: 8px auto; text-align: center; }
.nextRanking a { display: block; text-align: center; padding: 16px 0; border-radius: 8px; background-color: #efefef; }

#infscr-loading { text-align: center; margin: 2em 0; }

/* fonts */
@font-face { font-family: 'icomoon'; src: url("//www.livefans.jp/fonts/common/rank/icomoon.eot?9v2u7u"); src: url("//www.livefans.jp/fonts/common/rank/icomoon.eot?9v2u7u#iefix") format("embedded-opentype"), url("//www.livefans.jp/fonts/common/rank/icomoon.ttf?9v2u7u") format("truetype"), url("//www.livefans.jp/fonts/common/rank/icomoon.woff?9v2u7u") format("woff"), url("//www.livefans.jp/fonts/common/rank/icomoon.svg?9v2u7u#icomoon") format("svg"); font-weight: normal; font-style: normal; }
[class^="icon-"]:before, [class*=" icon-"]:before, [class^="icon-"]:after, [class*=" icon-"]:after { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; vertical-align: middle; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.icon-close:before {  content: "\e90f";}.icon-comment:before {  content: "\e909";}.icon-clip:before {  content: "\e903";}.icon-join:before {  content: "\e900";}.icon-new:before {  content: "\e916";}.icon-facebook:before {  content: "\ea90";}.icon-twitter:before {  content: "\ea96";}.icon-line:before {  content: "\e90c";}
.icon-arrow-up:before { content: "\ea32"; }
.icon-arrow-right:before { content: "\ea34"; }
.icon-arrow-down:before { content: "\ea36"; }