@charset "utf-8";

/*
buzz-plus-news basecolor
{
fontcolor: #0C0C22;
background:#F9F9F3;
}
*/
/*右カラム*/

.sidecolumn img{}

.side-title{
position: relative;
padding: 36px 0px 8px;
margin: 0 8px 8px 0;
text-align: center;
border-bottom: 2px solid #AB8A41;
}
.side-title::after {
content: "Ranking";
position: absolute;
bottom: -8px;
right: 124px;
padding: 0px 4px;
font:300 60%/1.7"Norican";
letter-spacing: 1px;
color: rgb(171, 138, 65);
background: #F9F9F3;
margin: 0 0 0 8px;
}
/*ランキング一覧*/
.popularpost {
counter-reset:li;
}
.icon-ranking:before {
top: 0;
left: calc(50% - .7em);
left: -webkit-calc(50% - .7em);
font-size: 2em;
}
/*ランキングデフォルト設定*/
.popularpost > li::before{
position:absolute;
top:0;
left:-8px;
color:#fff;
width: 30px;
height: 24px;
background: #0C0C22;
text-align: center;
font:300 12px/24px "Norican";
content:counter(li)".";
counter-increment:li;
z-index: 10;
text-shadow:1px 1px rgba(0,0,0,.2);
box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.13);
}

.popularpost.ad > li::before {
  content:"PR";
  font-family: sans-serif;
}

.popularpost > li a{
overflow: hidden;
display: block;
border-bottom: 1px solid rgba(216, 201, 186, 0.54);
}
.popularpost > li img{vertical-align:}

.ranking-hot > li::before{
background: #AB8A41;
top: 76px;
}
.ranking-hot > li h5{
margin: 0 0 0 28px;
}
.weekly li:after{
display: block;
content: "";
clear: both;
}
.wpp-thumbnail {
display:inline;
border:none;
}
.ranking-weekly .wpp-thumbnail{
margin: 0 8px 8px 32px;
float: left;
}
.ranking-weekly a span{
overflow: hidden;
display: block;
}
.ad-fixed{overflow: hidden;width: 300px;}
.ad-fixed img{width: 100%;}

/* ここからレスポンシブ化の設定---------------------------------------------------------- */
/* PC用 */
@media only screen and (min-width:960px){
.sidecolumn{
width: 300px;
float: right;
padding: 0 0 0 20px;
}
.sidecolumn .box{
margin: 0 0 20px 0;
border-bottom: 1px solid #9B9B9B;
border-right: 1px solid #9B9B9B;
}
.popularpost > li {
position: relative;
float:none;
clear:left;
margin: 0 8px 8px 0;
font-size: 14px;
font-weight: bold;
min-height: 48px;
}
.ranking-hot > li img{width: 100%;height: auto; margin: 0 0 4px;}

.ranking-hot > li a:hover img{
opacity: 1;
transform: scale(1.05, 1.05);
-webkit-transform: scale(1.05, 1.05);
}
.ranking-hot > li h5{
font-size: 14px;
margin: 0 0 0 28px;
}
.ranking-hot > li{min-height: 60px;}
.wpp-thumbnail {float:left;}

}
/* モニター幅960px以下 */
@media only screen and (max-width:960px){
.sidecolumn{
width: 100%;
float: none;
padding: 0 4px;
}
.side-title::after {
right: 0;
}
.sidecolumn .box{
width: 100%;
float: left;
margin: 0 0 20px 0;
border-bottom: 1px solid #9B9B9B;
border-right: 1px solid #9B9B9B;
}
.popularpost > li {
position: relative;
float: left;
margin: 0 8px 8px 0;
font-size: 14px;
font-weight: bold;
min-height: 80px;
width: 48%;
width: calc(50% - 18px);
width: -webkit-calc(50% - 18px);
/*		border: 1px solid;*/
}
.ranking-hot > li::before {
top: 84px;
}
.side-title { margin: 0 0 8px 0;}

}
@media screen and (min-width: 0px) and (max-width: 480px) {
.sidecolumn{
box-sizing: border-box;
width: 100%;
float: none;
padding: 0 4px;
}
.popularpost > li {
width: 100%
}
.popularpost > li::before{ /*ランキングデフォルト設定*/
left:0;
}
.popularpost > li a {
width: 100%;
}
.wpp-thumbnail {
width: 100%;
height: auto;
}
.ranking-hot > li::before {
top: 82px;
}
.ranking-hot > li h5 {
margin: 4px 0 0 36px;
padding: 4px;
font-size: 104%;
}
.ranking-weekly > li img {
width: 64px;
height: auto;
}
.ranking-weekly a span {
  padding: 0 8px 0 0;
}
aside.ad-rect {
  margin: 8px auto;
  width: 300px;
}

}