@charset "utf-8";
/* works archive
------------------------------------------ */
.p-rank {
  width: 92%;
  margin: 160px auto;
}
.p-rank__inr {
  max-width: 900px;
  margin: 0 auto;
}
.p-rank__item:first-child {
  border-top: solid 1px var(--cm2);
}
.p-rank__item {
  border-bottom: solid 1px var(--cm2);
  position: relative;
}
.p-rank__item a {
  color: var(--cb);
  padding: 10px;
  display: block;
  position: relative;
}
.p-rank__item a::before {
  content: "";
  background: linear-gradient(135deg, var(--cm3) 40%, var(--cm2) 80%);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -10;
  opacity: 0;
  transition: .2s;
}
.p-rank__item a:hover::before {
  opacity: 1;
}
.p-rank__fig {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.p-rank__num {
  width: 2em;
  height: 2em;
  margin-right: 2%;
  color: var(--cw);
  font-weight: bold;
  border-radius: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
}
.p-rank__item:nth-child(1) .p-rank__num {
  background: #FFD700;
}
.p-rank__item:nth-child(2) .p-rank__num {
  background: #C0C0C0;
}
.p-rank__item:nth-child(3) .p-rank__num {
  background: #C47222;
}
.p-rank__item:nth-child(n + 4) .p-rank__num {
  color: var(--cb);
  background: var(--cm2);
}
.p-rank__img {
  width: 80px;
  height: auto;
  margin-right: 2%;
}
.p-rank__img img {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
}
.p-rank__txt {
  width: calc(94% - 80px - 7em);
  margin-right: 2%;
}
.p-rank__cap {
  
}
.p-rank__subttl {
  
}
.p-rank__cat-item {
  font-size: 1.4rem;
  display: inline-block;
  margin-right: .5em;
}
.p-rank__tag-item {
  font-size: 1.4rem;
  display: inline-block;
  margin-right: .5em;
}
.p-rank__pv {
  color: var(--cm);
  width: 5em;
  text-align: right;
}

@media only screen and (max-width: 600px) {
  .p-rank {
  margin: 80px auto;
  }
  .p-rank__num {
    order: 1;
  }
  .p-rank__img {
    width: 20%;
    order: 3;
    align-self: flex-start;
    margin-top: 8px;
  }
  .p-rank__txt {
    width: 78%;
    order: 4;
    margin: 0;
    align-self: flex-start;
    margin-top: 8px;
  }
  .p-rank__pv {
    width: calc(98% - 2em);
    order: 2;
  }
}