@charset "utf-8";
.goods-bg-photo {
    background: url(../images/goods/goods1.jpg) no-repeat center top/cover;
    position: relative;
}
.bg-goods-ranking {
    background-color: rgba(255,255,255,.96);
    position: relative;
    z-index: 1;
    padding-bottom: 3rem;
}
.goods-ranking-wrap {
    position: relative;
    z-index: 2;
}
.goods-food {
    position: relative;
    width: 90%;
    overflow: hidden;
    /* max-width: 490px; */
  }
.goods-text {
  font-size: 14px;
}
.goods-food::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.32);
}
.goods-food img {

}
.img-center-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.2rem;
  color: #fff;
}
.goods-crown {
  position: relative;
  line-height: 1.5;
  padding-left: 2.6rem;
  margin-bottom: 0.25rem;
}
.goods-nocrown {
  padding-left: 0rem;
  font-size: 1rem;
  line-height: 1.2;
  margin-bottom: 0.25rem;
}
.goods-crown::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;   
  width: 1.6rem;
  height: 100%;
}
.gold-crown {
  font-size: 1rem;
  color: #E6BF18;
}
.gold-crown::before {
  background: url(../images/goods/goods-gold.svg) no-repeat top center/contain;
}
.sliver-crown {
  font-size: 1rem;
  color: #B9B9B9;
}
.sliver-crown::before {
  background: url(../images/goods/goods-sliver.svg) no-repeat top center/contain;
}
.bronze-crown {
  font-size: 1rem;
  color: #AC9A3A;
}
.bronze-crown::before {
  background: url(../images/goods/goods-bronze.svg) no-repeat top center/contain;
}
.rank-list-wrap {
  display: flex;
  flex-wrap: wrap;
  row-gap: 1.5rem;
}
.goods-header {
  position: relative;
  margin-bottom: 2rem;
}
.ranking-set {
    gap: 1rem;
    align-items: flex-start;
    width: 90%;
    margin: 0 auto;
}
.goods-name {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}
.goods-ranking-photo {
    width: 40%;
    border: 1px solid #707070;
}
.goods-ranking-photo img {
    width: 100%;
}
.goods-ranking-text {
    width: 60%;
}
.goods-desc {
  font-size: 1.25rem;
  line-height: 1.4;
  margin-bottom: 0.25rem;
}
.goods-price {
  color: #003F97;
  display: block;
  line-height: 1.8;
  margin-top: 0.25rem;
}
.goods-bg-dark-cyan {
  background-color: #00284A;
  /* max-width: 1619px; */
  /* max-height: 317px; */
  padding-top: 10px;
  padding-bottom: 10px;
}
a.btn-arrow_white {
  color: #fff;
  border-color: #fff;
}
a.btn-arrow_white::before, a.btn-arrow_white::after {
  background-color: #fff;
}
.goods-link-wrap {
  padding-top: 10px;
}
.goods-link-wrap-text {
  color: #fff;
  font-size: 1.5rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
.goods-link-photo {
 width: 100%;
}
.goods-sell-wrap-flex {
  row-gap: 40px;
  display: flex;
  flex-direction: column;
}
@media all and (min-width: 390px) {
  .goods-crown {
    margin-bottom: 0.75rem;
  }
} 
@media all and (min-width: 576px) {
  .goods-crown::before {   
    width: 1.9rem;
  }
  .goods-nocrown {
    padding-left: 0rem;
    font-size: 1.25rem;
    line-height: 1.4;
    margin-bottom: 0.75rem;
  }

  .gold-crown {
    font-size: 1.25rem;
  }

  .sliver-crown {
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .bronze-crown {
    font-size: 1.25rem;
    line-height: 1.4;
  }
  .ranking-set {
      gap: 1.5rem;
  }
  .img-center-text {
      font-size: 2.5rem;
  }
  .goods-bg-dark-cyan {
    max-height: 317px;
  }
  .goods-link-photo {
    width: 50%;
  }
  .goods-link-wrap-text {
    font-size: 2rem;
    line-height: 2;
  }
  .goods-sell-wrap {
    width: 30.87%;
  }
  .goods-sell-wrap-flex {
    gap: 3.695%;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .goods-link-wrap {
    padding-top: 0px;
  }

}
@media all and (min-width: 768px) {
    .goods-food {
        max-width: 613px;
    }
    .bg-goods-ranking {
      width: 1428px;
      max-width: 95%;
      padding-bottom: 5.8rem;
    }
    .goods-ranking-wrap {
      width: 1290px;
      max-width: 95%;
    }
    .ranking-set {
      width: 100%;
    }
    .goods-food {
      width: 100%;
    }
  .goods-nocrown {
    padding-left: 0rem;
    font-size: 1.25rem;
    line-height: 1.2;
  }

  .gold-crown {
    font-size: 1.25rem;
  }

  .sliver-crown {
    font-size: 1.25rem;
  }

  .bronze-crown {
    font-size: 1.25rem;
  }
}
@media all and (min-width: 992px) {
  .goods-nocrown {
    padding-left: 0rem;
    font-size: 1.25rem;
    line-height: 2;
  }

  .gold-crown {
    font-size: 1.25rem;
  }

  .sliver-crown {
    font-size: 1.25rem;
  }

  .bronze-crown {
    font-size: 1.25rem;
  }
  .goods-price {
    margin-top: 0.5rem;
  }
  .goods-desc {
    margin-bottom: 0.5rem;
  }
  
}
@media all and (min-width: 1200px) {
    .goods-ranking-photo {
        max-width: 225px;
        min-width: 223.4px;
    }
    .goods-ranking-text {
        width: auto;
    }

    .goods-desc {
      margin-bottom: 0.55rem;
    }
    
}
@media all and (min-width: 1400px) {
  .goods-bg-dark-cyan {
    padding-top: 0px;
    padding-bottom: 20px;
  }
 
}
@media all and (min-width: 1800px) {
  .goods-link-photo {
    width: auto;
   }
}
@media all and (min-width: 1920px) {
    .goods-crown {
        padding-left: 2.5rem;
      }
      .ranking-set {
        gap: 2.5rem;
    }
}
/*デスクトップ*/
@media all and (min-width: 992px) and (max-width: 1199px) {
}
/*中デバイス*/
@media all and (min-width: 768px) and (max-width: 991px) {
  
}
/*小デバイス*/
@media all and (min-width: 576px) and (max-width: 767px) {

}

@media all and (max-width: 400px) {
 
}

/*iPhone5:SE*/
@media all and (max-width: 320px) {

}