@charset "UTF-8";

#main{
  width: 94%;
  margin: 40px auto;
  background-color: #fff;
  padding: 35px 25px 25px;
  border-radius: 10px;
  box-sizing: border-box;
  position: relative;
}
  #main:before{
    content: "";
    width: 32px;
    height: 50px;
    background: url(/common/img/pin2.png) no-repeat left top;
    background-size: contain;
    display: block;
    z-index: 9999999;
    position: absolute;
    left: 50%;
    margin-left: -16px;
    top: -10px;
  }

  #main .linkBox{ display:none; }
 
  #main .link{
  	text-align:center;
  	display:inline-block;
  }
  #main .link a{
    display:inline-block;
    padding:10px 20px;
    border:1px solid #ddd;
    margin:0 0 30px 0.5%;
    width:110px;
  }
  
  #main .link a:hover{
  	background-color:#BBFFFF;
  }
  #main .link.active a{
  	background-color:#BBFFFF;
  }

  #main .typeBox .link a { width:115px; }

  #main ul{
    margin-left: 0.5%;
    margin-bottom:30px;
  }
    #main ul li{
      float: left;
      /* width: 16.5%; */
      width: 244px;
      border: 1px #ddd solid;
      border-collapse: separate;
      margin-bottom: 4px;
      margin-right: 4px;
    }
      #main ul li .ttl{
        text-align: center;
        padding: 10px 0;
      }
      #main ul li .idol{
        padding: 20px;
        text-align: center;
        height: 80px;
        box-sizing: border-box;
      }
      #main .lank_pic .idol{
        height: 110px;
        padding:13px 5px !important;
      }
        #main ul li .idol .diffCnt{
			    color: #000;
			    font-size: 13px;
			    margin-top: 10px;
        }
      
      #main ul li .imgBox{
        text-align: center;
        padding: 10px 0;
        box-sizing:border-box;
      }
        #main ul li .imgBox img{
          vertical-align: top;
        }

    #main ul li.SSR{
      color:#ef00a5;
    }
      #main ul li.SSR .ttl{
        font-weight: bold;
      }
      #main ul li.SSR .idol{
        font-size: 20px;
        font-weight: bold;
        padding: 13px 20px;
      }
      
      #main ul li.SSR.cool .imgBox{
        background-image: -webkit-gradient(
          linear,
          right bottom,
          right bottom,
          color-stop(0.39, #80BFF0),
          color-stop(1, #2070F0)
        );
        background-image: -o-linear-gradient(right bottom, #80BFF0 39%, #2070F0 100%);
        background-image: -moz-linear-gradient(right bottom, #80BFF0 39%, #2070F0 100%);
        background-image: -webkit-linear-gradient(right bottom, #80BFF0 39%, #2070F0 100%);
        background-image: -ms-linear-gradient(right bottom, #80BFF0 39%, #2070F0 100%);
        background-image: linear-gradient(to right bottom, #80BFF0 39%, #2070F0 100%);
      }
      #main ul li.SSR.passion .imgBox{
        background-image: -webkit-gradient(
          linear,
          right bottom,
          right bottom,
          color-stop(0.39, #F0DF80),
          color-stop(1, #F0A020)
        );
        background-image: -o-linear-gradient(right bottom, #F0DF80 39%, #F0A020 100%);
        background-image: -moz-linear-gradient(right bottom, #F0DF80 39%, #F0A020 100%);
        background-image: -webkit-linear-gradient(right bottom, #F0DF80 39%, #F0A020 100%);
        background-image: -ms-linear-gradient(right bottom, #F0DF80 39%, #F0A020 100%);
        background-image: linear-gradient(to right bottom, #F0DF80 39%, #F0A020 100%);
      }

      #main ul li.SSR.cute .imgBox{
        background-image: -webkit-gradient(
          linear,
          right bottom,
          right bottom,
          color-stop(0.39, #F5B1DC),
          color-stop(1, #F02070)
        );
        background-image: -o-linear-gradient(right bottom, #F5B1DC 39%, #F02070 100%);
        background-image: -moz-linear-gradient(right bottom, #F5B1DC 39%, #F02070 100%);
        background-image: -webkit-linear-gradient(right bottom, #F5B1DC 39%, #F02070 100%);
        background-image: -ms-linear-gradient(right bottom, #F5B1DC 39%, #F02070 100%);
        background-image: linear-gradient(to right bottom, #F5B1DC 39%, #F02070 100%);
      }



    #main ul li.SR{
      color:#70ad47;
      font-weight: bold;
    }
      #main ul li.SR .ttl{
        font-weight: bold;
      }

    #main ul li.SR.cool .imgBox{
      /*background-color: #f02080;*/
      background-color: rgba(32,112,240,0.7);
    }
    #main ul li.SR.cute .imgBox{
      background-color: rgba(240,32,128,0.7);
    }
    #main ul li.SR.passion .imgBox{
      background-color: rgba(240,160,32,0.6);
    }

    #main ul li.cool .imgBox{
      /*background-color: #f02080;*/
      background-color: rgba(32,112,240,0.3);
    }
    #main ul li.cute .imgBox{
      background-color: rgba(240,32,128,0.3);
    }
    #main ul li.passion .imgBox{
      background-color: rgba(240,160,32,0.3);
    }

  #main ul.rankingList li{
    width:auto;
    padding:5px 10px;
    float:none;
    border:0;
  }
    #main ul.rankingList li span.num{
      font-weight: bold;
      color: #ff0000;
      font-size: 16px;
    }

  
  

.SSR{
  position: relative;
  overflow: hidden;
}

.SSR .bk{
  position: absolute;
  top: 9px;
  left: 9px;
  opacity: 0.7;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  width: 300px;
  height: 300px;
}

.sanae__inner{
  display: inline-block;
  width: 100%;
  position: relative;
}

.sanae::after,
.sanae::before,
.sanae__inner::after,
.sanae__inner::before {
  background-color: #8fc31f;
  content: '';
  display: block;
  position: absolute;
  z-index: 10;
}

.sanae::after {
  background-color: #8fc31f;
}
.sanae::before
{
  background-color: #f0a020;
}
.sanae__inner::after{
  background-color: #f02080;
}
.sanae__inner::before {
  background-color: #2070f0;
}


/* 左上へ配置 */
.sanae::after {
  height: 0px;
  left: -1px;
  top: -1px;
  width: 3px;
}
/* 右下へ配置 */
.sanae::before {
  bottom: -1px;
  height: 0px;
  right: -1px;
  width: 3px;
}
/* 左下へ配置 */
.sanae__inner::after {
  bottom: -1px;
  height: 3px;
  left: -1px;
  width: 0px;
}
/* 右下へ配置 */
.sanae__inner::before {
  height: 3px;
  right: -1px;
  top: -1px;
  width: 0px;
}

/* スマホ */
@media screen and (max-width:769px)
{
  .SSR .bk{
    width: 600px;
    height: 600px;
  }
  #main ul li{
    width:48%;
  }
  #main .linkBox{
    margin-bottom: 15px;
  }
  
  #main .typeBox{
    margin-bottom: 25px;
  }
  
  #main .link {
    width: 50%;
  }
    #main .link a,
    #main .typeBox .link a {
      width: 100%;
      margin:0;
    }

}