.ranking-items{
  line-height: 1.4;
  p{
    font-size: 18px;
    margin-top: 0;
  }
}

.ranking-item{
  padding: 3%;
  // margin-bottom: 1.2em;
  border: 1px solid var(--cocoon-basic-border-color);
  border-radius: var(--cocoon-basic-border-radius);

  img[width="1"]{
    position: absolute;
    bottom: 0;
    right: 0;
  }

}

.ranking-item-name-text{
  font-size: 24px;
  font-weight: bold;
  // a{
  //   @include link_cancel;
  //   &:hover{
  //     text-decoration: underline;
  //   }
  // }
}

.star::before,
.star-half-o::before,
.star-o::before{
  font-family: FontAwesome;
}
.star::before{
  content: '\f005';
}
.star-half-o::before{
  content: '\f123';
}
.star-o::before{
  content: '\f006';
}

.ranking-item-name{
  padding: 3px 2px 6px;
}

.rating-star{
  color: #f5bc55;
  font-size: 1.2em;
}

.rating-number{
  color: #333;
  font-size: 0.9em;
  margin-left: 0.4em;
}
.ranking-item-img-desc,
.ranking-item-link-buttons{
  display: flex;
  >div{
    width: 100%;
    padding: 2px 0;
  }
}

.ranking-item-img-desc{
  margin-top: 6px;
}

.ranking-item-name{
  display: flex;
}

.ranking-item-name-crown{
  margin-right: 10px;
}

.ranking-item-name-text{
  width: 100%;
}

.ranking-item-image-tag{
  max-width: 302px;
  margin-right: 1em;
  position: relative;
  align-items: flex-start;
}

.ranking-item-description{
  width: 100px;
  position: relative;
}

.ranking-item-link-buttons{
  --cocoon-custom-border-color: transparent;
  margin-top: 6px;
  >div{
    padding: 0 3px;
    position: relative;
  }

  a{
    @extend .btn;
    @extend .btn-l;
    margin: 0 0 8px;
    //padding: 14px 0;
    // &:hover{
    //   opacity: 0.7;
    //   transition: $bgc_hover_anime;
    // }
  }
}

.ranking-item-detail{
  a{
    @extend .btn-blue;
  }
}

.ranking-item-link{
  a{
    @extend .btn-red;
  }
}





%ranking-crown{
  width: 0;
  height: 0;
  border-bottom-style: solid;
  border-bottom-width: 35px;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  position: relative;
}

%ranking-crown-after{
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  content: "";
  position: absolute;
  top: 0;
  left: -20px;
}

%ranking-crown-circle{
  border-radius: 50%;
  width: 5px;
  height: 5px;
  position: absolute;
  top: -5px;
  left: -21px;
}

%ranking-crown-circle-before{
  border-radius: 50%;
  width: 5px;
  height: 5px;
  content: "";
  position: absolute;
  top: 0;
  left: 19px;
}

%ranking-crown-circle-after{
  border-radius: 50%;
  width: 5px;
  height: 5px;
  content: "";
  position: absolute;
  top: 0;
  left: 38px;
}

.g-crown {
  @extend %ranking-crown;
  border-bottom: 35px solid #bfa930;
}

.g-crown:after {
  @extend %ranking-crown-after;
  border-bottom: 20px solid #ffe973;
  border-left: 20px solid #ffe973;
  border-right: 20px solid #ffd700;
}

.g-crown-circle {
  @extend %ranking-crown-circle;
  background-color: #a68c00;
}

.g-crown-circle:before {
  @extend %ranking-crown-circle-before;
  background-color: #a68c00;
}

.g-crown-circle:after {
  @extend %ranking-crown-circle-after;
  background-color: #a68c00;
}

.s-crown {
  @extend %ranking-crown;
  border-bottom: 35px solid #909090;
}

.s-crown:after {
  @extend %ranking-crown-after;
  border-bottom: 20px solid #e0e0e0;
  border-left: 20px solid #e0e0e0;
  border-right: 20px solid silver;
}

.s-crown-circle {
  @extend %ranking-crown-circle;
  background-color: #909090;
}

.s-crown-circle:before {
  @extend %ranking-crown-circle-before;
  background-color: #909090;
}

.s-crown-circle:after {
  @extend %ranking-crown-circle-after;
  background-color: #909090;
}

.c-crown {
  @extend %ranking-crown;
  border-bottom: 35px solid #69433f;
}

.c-crown:after {
  @extend %ranking-crown-after;
  border-bottom: 20px solid #8c4841;
  border-left: 20px solid #8c4841;
  border-right: 20px solid #5b1c15;
}

.c-crown-circle {
  @extend %ranking-crown-circle;
  background-color: #69433f;
}

.c-crown-circle:before {
  @extend %ranking-crown-circle-before;
  background-color: #69433f;
}

.c-crown-circle:after {
  @extend %ranking-crown-circle-after;
  background-color: #69433f;
}

//ウィジェット用スタイル
.widget_item_ranking{
  .main-widget-label{
    font-size: 23px;
    padding: 6px;
    margin: 28px 0 12px;
    font-weight: bold;
  }
}
