本站页面(多半)转载自萌娘百科的同名页面,依CC BY-NC-SA 3.0引入,贡献者可以在历史页查询。
因各种原因页面内容可能和源页面有所出入,非本站特有页面内容请以萌娘百科为准。
因各种原因页面内容可能和源页面有所出入,非本站特有页面内容请以萌娘百科为准。
- 你好~!欢迎来到萌娘百科镜像站!如需查看或编辑,请联系本站管理员注册账号。
- 本镜像站和其他萌娘百科的镜像站无关,请注意分别。
User:实验性:无用论废人/css/billboard-japan.css
跳到导航
跳到搜索
#content2 .leftBox_top { margin-top: 9.84%; position: relative; padding-bottom: 30px } #content2 .leftBox_top .title { font-size: 2.0rem; text-align: center } #content2 .leftBox_top .title img { width: 34%; margin-right: 3%; vertical-align: bottom } #content2 .leftBox_top .about_btn { width: 90%; margin: 2% 5% 10% } #content2 .leftBox_top .about_btn a { background: #221815 url(/common/img/charts/arrow_aboutcharts.png) center right 7% no-repeat; background-size: 11px auto; color: #fff; display: block; font-size: 10px; height: 100%; line-height: 30px; margin: 5% auto 0; padding-right: 5%; width: 30%; text-align: center } #content2 .leftBox_top #socialbtn a { cursor: pointer } @media screen and (min-width:781px) { #content2 .leftBox_top { display: block !important; text-align: right } #content2 .leftBox_top>* { display: inline-block; vertical-align: middle; margin-left: 20px !important } #content2 .leftBox_top>h2 { float: left; margin: 0 !important; padding: 10px 0 } #content2 .leftBox_top #socialbtn { display: inline-block; position: relative; text-align: left } #content2 .leftBox_top #socialbtn ul li+li { display: none } } @media screen and (max-width:780px) { #content2 .leftBox_top { padding: 0 } #content2 .leftBox_top #socialbtn { position: relative; width: 100%; height: 50px; text-align: center; margin-top: 20px } #content2 .leftBox_top #socialbtn ul { position: relative; display: inline-block; margin: 0 auto; padding-right: 20px } } #content2 .leftBox_top+.tags { margin: -5% 0 5%; text-align: right } #content2 .leftBox_top+.tags li { position: relative; color: #a7a7a7; font-size: 1.1rem; text-indent: 15px; display: inline-block; margin-left: 10px } #content2 .leftBox_top+.tags li a { color: #a7a7a7 } #content2 .leftBox_top+.tags li a:hover { text-decoration: underline } #content2 .leftBox_top+.tags li:before { content: ""; position: absolute; top: 10%; width: 4%; width: 12px; height: 12px; background: url(/common/img/tagindex/detail/icon_tags.png) no-repeat; background-size: 100%; color: #a7a7a7; left: 0 } #content2 .leftBox .charts_search { padding: 4% 0; background: #f0f0f0; text-align: center } #content2 .leftBox .charts_search .date { margin-bottom: 4%; font-weight: bold; letter-spacing: 1px } #content2 .leftBox .charts_search .select { width: 86.91%; margin: 0 auto; display: flex; justify-content: space-between; justify-content: center } #content2 .leftBox .charts_search .select .year_select, #content2 .leftBox .charts_search .select .month_select, #content2 .leftBox .charts_search .select .day_select { width: 31.06%; position: relative; overflow: hidden; border: 1px solid #b6b4b6 } #content2 .leftBox .charts_search .select .month_select { margin: 0 3.3% } #content2 .leftBox .charts_search .select .year_select:after, #content2 .leftBox .charts_search .select .month_select:after, #content2 .leftBox .charts_search .select .day_select:after { content: "\025bc"; position: absolute; display: block; color: #b6b4b6; top: 30%; right: 9%; font-size: 1.0rem } #content2 .leftBox .charts_search .select select { width: 100%; height: 100%; padding: 7% 21% 7% 15%; font-size: 1.4rem; color: #b6b4b6; border: none; border-color: #b6b4b6; appearance: none; border-radius: 0; background: #fff } #content2 .leftBox .charts_search .select p:only-child select { padding: 10px 15px } #content2 .leftBox .charts_search .select p:only-child:after { content: "\025bc"; position: absolute; display: block; color: #b6b4b6; top: 30%; right: 15px; font-size: 1.0rem } #content2 .leftBox .charts_search .select p:only-child select { padding: 10px 15px } #content2 .leftBox .charts_search .send { width: 30%; margin: 4% auto 3%; padding: 2%; color: #fff; background: #b5b5b5; border: none; font-size: 1.4rem; box-sizing: border-box; font-weight: bold; cursor: pointer; outline: none; box-shadow: none; appearance: none; border-radius: 0 } #content2 .leftBox .ranklink { margin: 5% 0 8%; font-size: 1.6rem; overflow: hidden } #content2 .leftBox .ranklink li { border-left: 1px solid #999; float: left; width: 33.33%; box-sizing: border-box; text-align: center; padding: 1% 0; color: #221815; margin-top: 1% } #content2 .leftBox .ranklink li:last-child { border-right: 1px solid #999; width: calc(33.33% + 1px) } #content2 .leftBox .ranklink li:nth-child(3n) { border-right: 1px solid #999; width: 33.33% } #content2 .leftBox .ranklink li a { display: block; box-sizing: border-box } #content2 .leftBox .ranklink li a:after { content: ''; display: inline-block; width: 6px; height: 6px; border-left: 1px solid #a5a5a5; border-bottom: 1px solid #a5a5a5; transform: rotate(-45deg); position: relative; top: -4px; margin-left: 10px; transition-duration: 0.4s; margin-right: -10px } #content2 .leftBox table { width: 100%; background: #fff } #content2 .leftBox table tbody tr:last-child td { border-bottom: 1px solid #ccc } #content2 .leftBox table tbody tr td.name_td { background: #fff } #content2 .leftBox table tbody tr:not(.trWhite) td.name_td { background: #ededed } #content2 .leftBox table tbody tr .name_td img { width: 20% } #content2 .leftBox table tbody tr .name_td .rank_detail .up { display: inline-block; background: url(/common/img/index/icon_rank_up.png) no-repeat center center; background-size: 7px auto; width: 18px; height: 18px } #content2 .leftBox table tbody tr .name_td .rank_detail .cont { display: inline-block; background: url(/common/img/index/icon_rank_cont.png) no-repeat 4px 6px; background-size: 10px auto; width: 18px; height: 18px } #content2 .leftBox table tbody tr .name_td .rank_detail .down { display: inline-block; background: url(/common/img/index/icon_rank_down.png) no-repeat 6px 4px; background-size: 7px auto; width: 18px; height: 18px } #content2 .leftBox table tbody tr .name_td .rank_detail .new { display: inline-block; background: url(/common/img/index/icon_rank_new.png) no-repeat 6px 4px; background-size: 7px auto; width: 18px; height: 18px } #content2 .leftBox table tbody tr .name_td .rank_detail { display: flex; align-items: center; justify-content: flex-start; align-self: center; width: auto } #content2 .leftBox table tbody tr .name_td .rank_detail .rank { width: 1.5em; line-height: 1.5; padding: 0.8%; text-align: center; font-size: 1.2rem; display: inline-block; color: #828282; border: 1px solid #cdcdcd; background: #fff } #content2 .leftBox table tbody .rank1 .name_td .rank_detail .rank { color: #fff; background: #ff0096; border: none } #content2 .leftBox table tbody .rank2 .name_td .rank_detail .rank { color: #fff; background: #000; border: none } #content2 .leftBox table tbody .rank3 .name_td .rank_detail .rank { color: #fff; background: #808080; border: none } #content2 .leftBox table tbody tr .name_td .rank_detail .txt { width: auto; vertical-align: middle; display: table-cell } #content2 .leftBox table tbody tr .name_td .rank_detail .txt .last { font-size: 1.1rem; color: #95918d; font-weight: bold; padding: 0; box-sizing: border-box; vertical-align: middle } #content2 .leftBox table tbody tr .name_td .rank_detail .txt .charts_in { font-size: 1.1rem; color: #95918d; font-weight: bold; padding: 0; width: auto; text-indent: 2%; box-sizing: border-box; vertical-align: middle } #content2 .leftBox table tbody tr .name_td .name_detail { float: none; width: auto; margin-top: 1%; word-break: break-all } #content2 .leftBox table tbody tr .name_td .name_detail .musuc_title, #content2 .leftBox table tbody tr .name_td .name_detail .artist_name { font-size: 1.4rem } #content2 .leftBox table tbody tr .name_td .name_detail .musuc_title+.artist_name { font-weight: bold; font-size: 1.0rem; color: #878887 } #content2 .leftBox table tbody tr .name_td .name_detail>p { width: auto } #content2 .leftBox table tbody tr td .right_detail { float: right; text-align: right; display: table } #content2.point .leftBox table tbody tr td .right_detail .scoreTable { border: solid 1px #f49e00; display: inline-block; font-size: 0; margin: 8px 0 0 } #content2.point .leftBox table tbody tr td .right_detail .scoreTable p { display: inline-block; font-size: 1.0rem; width: auto; line-height: 1.6; font-weight: normal } #content2.point .leftBox table tbody tr td .right_detail .scoreTable .score_earn { display: none } #content2.point .leftBox table tbody tr td .right_detail .scoreTable .score_point { background: #f49e00; color: #fff; padding: 0 6px } #content2.point .leftBox table tbody tr td .right_detail .scoreTable p.num { background: #ffebc5; color: #000; padding: 0 5px } #content2.earn .leftBox table tbody tr td .right_detail .scoreTable { border: solid 1px #17b442; display: inline-block; font-size: 0; margin: 8px 0 0 } #content2.earn .leftBox table tbody tr td .right_detail .scoreTable p { display: inline-block; font-size: 1.0rem; width: auto; line-height: 1.6; font-weight: normal } #content2.earn .leftBox table tbody tr td .right_detail .scoreTable .score_point { display: none } #content2.earn .leftBox table tbody tr td .right_detail .scoreTable .score_earn { background: #17b442; color: #fff; padding: 0 6px } #content2.earn .leftBox table tbody tr td .right_detail .scoreTable p.num { background: #e6ffed; color: #000; padding: 0 5px } #content2 .leftBox table tbody tr td .right_detail .btn_chartbuy { width: 123px; height: 22px; background: url(/common/img/btn_chartbuy_sp.png) no-repeat; background-size: 100% auto; background-position: center top; text-align: left; margin-left: auto; margin-right: 0; margin-top: 3px; margin: 3px 0 0 auto } #content2 .leftBox table tbody tr td .right_detail .btn_chartbuy:hover { background-position: 0 -22px } #content2 .leftBox #newsPager { margin: 8% auto; padding: 0; background: url(/common/img/charts/btn_bg.png) repeat-x } #content2 .leftBox #newsPager ul { display: flex; flex-wrap: wrap } #content2 .leftBox #newsPager ul li { display: inline-block; width: 33%; padding: 2% 0; margin: 0; box-sizing: border-box } #content2 .leftBox #newsPager ul li:nth-child(2) { border-left: 1px solid #979797; border-right: 1px solid #979797 } #content2 .leftBox #newsPager ul a { display: block; height: auto; width: 100% } #content2 .leftBox .bottom { margin-bottom: 10% } @media all and (min-width:768px) { #content2 .leftBox .top_area { margin: 0px auto 40px; text-align: center } #content2 .leftBox_top { margin-top: 0; width: 100%; display: flex; justify-content: space-between; align-items: center } #content2 .leftBox_top .title { font-size: 1.9rem; text-align: left; width: 50% } #content2 .leftBox_top .title img { width: auto; margin-right: 3%; vertical-align: bottom } #content2 .leftBox_top .about_btn { width: 135px; margin: 0 } #content2 .leftBox_top .about_btn a { background: #221815 url(/common/img/charts/arrow_aboutcharts.png) center right 7% no-repeat; background-size: 11px auto; box-sizing: border-box; color: #fff; display: inline-block; font-size: 13px; height: 100%; line-height: 35px; margin: 0; padding: 0 0 0 11.5%; width: 100%; vertical-align: bottom; text-align: left } #content2 .leftBox_top .snsShare { margin: 0; padding: 0; width: 100px; height: 36px; box-sizing: border-box } #content2 .leftBox_top .snsShare .sns_area { display: flex; justify-content: center; align-items: center } #content2 .leftBox_top .snsShare .sns_area ul { display: block } #content2 .leftBox_top+.tags { margin: 20px auto 30px; font-size: 1.2rem } #content2 .leftBox_top+.tags li a:hover { text-decoration: underline } #content2 .leftBox_top+.tags li:before { width: 11px; height: 11px; padding-top: 0; top: 4px } #content2 .leftBox .charts_search { padding: 20px 23px; margin-top: 30px; text-align: left; display: flex; align-items: center; justify-content: flex-start } #content2 .leftBox .charts_search .date { font-size: 1.6rem; font-weight: normal; display: inline-block; margin: 0 } #content2 .leftBox .charts_search .select { width: auto; margin: 0; margin-left: 25px; display: inline-block; height: 35px } #content2 .leftBox .charts_search .select .year_select { width: 111px; display: inline-block; margin-right: 10px } #content2 .leftBox .charts_search .select .month_select { width: 81px; display: inline-block; margin-right: 10px; margin-left: 0 } #content2 .leftBox .charts_search .select .day_select { width: 81px; display: inline-block; margin-right: 10px } #content2 .leftBox .charts_search .select .year_select:after, #content2 .leftBox .charts_search .select .month_select:after, #content2 .leftBox .charts_search .select .day_select:after { content: "\025bc"; position: absolute; display: block; color: #cdcdcd; top: 25%; right: 9%; font-size: 1.0rem } #content2 .leftBox .charts_search .select select { width: 100%; padding: 7% 0 7% 12%; font-size: 1.4rem; color: #666; border-color: #b6b4b6; cursor: pointer } #content2 .leftBox .charts_search .select p:first-child select { width: 100%; padding: 5% 0 5% 12%; font-size: 1.4rem } #content2 .leftBox .charts_search .send { width: 62px; height: 33px; margin: 0; padding: 0 } #content2 .leftBox .ranklink { margin: 27px 0 40px } #content2 .leftBox .ranklink li { width: 20% } #content2 .leftBox .ranklink li:last-child { width: calc(20% + 1px); border-right: 1px solid #999 !important } #content2 .leftBox .ranklink li:nth-child(3n) { width: 20%; border-right: 0 } #content2 .leftBox .ranklink li:nth-child(5n) { width: 20%; border-right: 1px solid #999 } #content2 .leftBox .ranklink li a { padding: 0 } #content2 .leftBox .ranklink li a:after { content: ''; display: inline-block; width: 8px; height: 8px; right: auto; margin-left: 10px } #content2 .leftBox table { border-collapse: separate; border-bottom: solid 1px #484848; border-right: solid 1px #888888; border-left: solid 1px #888888; border-top: solid 1px #888888; table-layout: fixed } #content2 .leftBox table thead { display: table-header-group; background: #3a3a3a; color: #fff; line-height: 26px; font-size: 1.1rem } #content2 .leftBox table thead #rank { width: 93px } #content2 .leftBox table thead #times { width: 120px } #content2 .leftBox table thead th { font-weight: normal; border-bottom: solid 1px #ccc; border-right: solid 1px #fff } #content2 .leftBox table thead th:last-child { border-right: none } #content2 .leftBox table tbody tr td { border-bottom: 1px solid #ccc } #content2 .leftBox table tbody tr:last-child td { border-bottom: none } #content2 .leftBox table tbody tr .rank_td { background-color: #5f5f5f; text-align: center; display: table-cell } #content2 .leftBox table tbody tr .rank_td span { display: block; padding: 0 } #content2 .leftBox table tbody tr .rank_td span:first-child { background: #232323 } #content2 .leftBox table tbody tr .rank_td span:last-child { color: #ffffff } #content2 .leftBox table tbody tr .name_td { width: 555px; background: #ededed } #content2 .leftBox table tbody tr:nth-child(odd) td.name_td { background: #ededed } #content2 .leftBox table tbody tr:nth-child(even) td.name_td { background: #fff } #content2 .leftBox table tbody tr .name_td img { width: 82px } #content2 .leftBox table tbody tr .rank_td span.up:before { content: ''; background: url(/common/img/index/icon_rank_up.png) no-repeat center center; background-color: #3a3a3a; background-size: 7px auto; width: 99%; height: 26px; display: block } #content2 .leftBox table tbody tr .rank_td span.down:before { content: ''; background: url(/common/img/index/icon_rank_down.png) no-repeat center center; background-color: #3a3a3a; background-size: 7px auto; width: 99%; height: 26px; display: block } #content2 .leftBox table tbody tr .rank_td span.cont:before { content: ''; background: url(/common/img/index/icon_rank_cont.png) no-repeat center center; background-color: #3a3a3a; background-size: 10px auto; width: 99%; height: 26px; display: block } #content2 .leftBox table tbody tr .rank_td span.new:before { content: ''; background: url(/common/img/index/icon_rank_new.png) no-repeat center center; background-color: #3a3a3a; background-size: 10px auto; width: 99%; height: 26px; display: block } #content2 .leftBox table tbody tr .name_td .rank_detail { display: none } #content2 .leftBox table tbody tr .name_td .name_detail { width: auto; margin-top: 0 } #content2 .leftBox table tbody tr .name_td .name_detail .musuc_title, #content2 .leftBox table tbody tr .name_td .name_detail .artist_name { font-size: 1.4rem } #content2 .leftBox table tbody tr .name_td .name_detail .musuc_title a:hover, #content2 .leftBox table tbody tr .name_td .name_detail .artist_name a:hover { text-decoration: underline } #content2 .leftBox table tbody tr .name_td .name_detail .musuc_title+.artist_name { font-weight: normal; font-size: 1.2rem } #content2 .leftBox table tbody tr .name_td .name_detail>div { font-size: 0; margin: 0 } #content2 .leftBox table tbody .rank1 .name_td .name_detail .musuc_title, #content2 .leftBox table tbody .rank1 .name_td .name_detail .artist_name { font-size: 1.8rem } #content2 .leftBox table tbody .rank1 .name_td .name_detail .musuc_title+.artist_name { font-size: 1.4rem; color: #5d5d5d } #content2 .leftBox table tbody .rank1 .name_td img { width: 200px } #content2 .leftBox table tbody .rank1 .name_td .right_detail { margin-top: 35px } #content2 .leftBox table tbody tr td .right_detail { float: none; overflow: hidden; text-align: left } #content2.point .leftBox table tbody tr td .right_detail .scoreTable { height: 25px; margin-bottom: 5px; background: #ffebc5 } #content2.point .leftBox table tbody tr td .right_detail .scoreTable p { line-height: 25px } #content2.point .leftBox table tbody tr td .right_detail .scoreTable .score_point { padding: 0 9px; font-size: 1.2rem; height: 100% } #content2.point .leftBox table tbody tr td .right_detail .scoreTable .num { padding: 0 8px; font-size: 1.2rem; height: 100% } #content2.earn .leftBox table tbody tr td .right_detail .scoreTable { height: 25px; margin-bottom: 5px; background: #e6ffed } #content2.earn .leftBox table tbody tr td .right_detail .scoreTable p { line-height: 25px } #content2.earn .leftBox table tbody tr td .right_detail .scoreTable .score_earn { padding: 0 9px; font-size: 1.2rem; height: 100% } #content2.earn .leftBox table tbody tr td .right_detail .scoreTable .num { padding: 0 8px; font-size: 1.2rem; height: 100% } #content2 .leftBox table tbody tr td .right_detail .btn_chartbuy { width: 152px; height: 28px; margin-top: 5px; margin-left: 0; background: url(/common/img/common_images.png) -1072px 0 no-repeat } #content2 .leftBox table tbody tr td .right_detail .btn_chartbuy:hover { background-position: -1072px -27px } #content2 .leftBox table tbody tr .times_td { background: #ccc; text-align: center; vertical-align: middle; display: table-cell } #content2 .leftBox table tbody tr:nth-child(even) td.times_td { background: #ededed } #content2 .leftBox .chartsCaption { margin-top: 1em } #content2 .leftBox #newsPager { margin: 18px auto; background: none } #content2 .leftBox #newsPager ul { width: 250px; margin: 0 auto; font-size: 1.4rem; justify-content: space-between } #content2 .leftBox #newsPager ul li:nth-child(2) { border: none } #content2 .leftBox #newsPager ul a { display: inline } #content2 .leftBox .ad_area.bottom { margin: 40px auto 0; text-align: center } #content2 .leftBox .bottom .pc_obj { width: 100%; max-width: 728px; margin-left: auto; margin-right: auto } #content2 .leftBox .comment_box { box-sizing: border-box; position: relative; width: 100%; margin-top: 53px; margin-bottom: 80px; padding-top: 10px; border: 1px solid #c1c1c1; border-radius: 3px; background: url(/common/img/charts/box_bg_top.png) repeat-x top #ececec } #content2 .leftBox .comment_box .ttl { width: 410px; height: 28px; margin: 0 auto; text-shadow: 0px 0px white, -1px -1px #555; background: url(/common/img/charts/box_bg_ttl.png); line-height: 28px; color: #fff; font-weight: bold; text-align: center; border-radius: 15px } #content2 .leftBox .comment_box .sns { width: 410px; margin: 10px auto; display: flex; justify-content: center; align-items: center } #content2 .leftBox .comment_box .sns li { font-size: 1.4rem; margin-right: 8px } #content2 .leftBox .comment_box .sns li img { margin-right: 2.5px; vertical-align: middle } #content2 .leftBox .comment_box .sns li:last-child { margin-right: 0 } #content2 .leftBox .comment_box .comment { position: absolute; right: 10px; top: 15px } #content2 .leftBox .comment_box .comment_main { border-top: 1px solid #c1c1c1; background: #f9f9f9; width: 100%; padding: 10px 0; text-align: center } #content2 .leftBox .comment_box .comment_main .comment_txt { width: 97%; height: 22px; margin: 0 auto; background: #fff; border-radius: 3px; border: 1px solid #e9e9e9; box-shadow: 0px 1px 8px 2px #e9e9e9 inset; padding: 0 10px; line-height: 25px; box-sizing: border-box } #content2 .leftBox .bottom { margin-bottom: 0 } } #content2 .leftBox td.exbanner { text-align: center; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; height: auto; padding: 10px 0; background-color: #ededed } #content2 .leftBox td.exbanner .button { margin: 5px 0 0 } #content2 .leftBox td.exbanner .btn_pageUP { margin: 0 5px 0 }