@charset "UTF-8";
/* ==========================================================================//
//
// 特集詳細　ランキング・ピックアップ
//
// ========================================================================== */
/* ランキング
---------------------------------------------------------- */
.p-featureS-ranking {
  overflow: hidden;
  border: 1px solid #333;
  border-radius: 6px;
}
.p-featureS-ranking__head {
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  letter-spacing: 0.02em;
  background-color: #d8caae;
  background-image: url(../../assets-feature/images/icon_ranking.svg);
  background-repeat: no-repeat;
  background-size: 42px auto;
  background-position: center 8px;
  border-bottom: 1px solid #333;
  padding: 54px 12px 12px;
}
.p-featureS-ranking__list {
  counter-reset: number;
}
.p-featureS-ranking__list > li {
  counter-increment: number;
}
.p-featureS-ranking__list > li:not(:last-child) {
  border-bottom: 1px solid #333;
}
.p-featureS-ranking__list > li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  font-weight: bold;
  font-size: 13px;
  letter-spacing: 0.02em;
  line-height: 1.4;
  background-color: #fff;
  padding: 16px 12px;
}
.p-featureS-ranking__list > li a::before {
  content: counter(number) "位";
  font-size: 17px;
  white-space: nowrap;
}
@media (hover: hover) {
  .p-featureS-ranking__list > li a {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  .p-featureS-ranking__list > li a:hover {
    background-color: #f9f6f0;
  }
}

/* ピックアップ
---------------------------------------------------------- */
.p-featureS-pickup {
  overflow: hidden;
  border: 1px solid #333;
  border-radius: 6px;
}
.p-featureS-pickup__head {
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  letter-spacing: 0.02em;
  background-color: #d8caae;
  background-image: url(../../assets-feature/images/icon_pickup.svg);
  background-repeat: no-repeat;
  background-size: 42px auto;
  background-position: center 8px;
  border-bottom: 1px solid #333;
  padding: 54px 12px 12px;
}
.p-featureS-pickup__list > li:not(:last-child) {
  border-bottom: 1px solid #333;
}
.p-featureS-pickup__list > li a {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  font-weight: bold;
  font-size: 13px;
  letter-spacing: 0.02em;
  line-height: 1.4;
  background-color: #fff;
  padding: 16px 12px 16px 38px;
}
.p-featureS-pickup__list > li a::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 12px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  aspect-ratio: 1;
  width: 14px;
  background-color: #d8caae;
  border-radius: 50% 50% 50% 0;
}
@media (hover: hover) {
  .p-featureS-pickup__list > li a {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  .p-featureS-pickup__list > li a:hover {
    background-color: #f9f6f0;
  }
}
.p-featureS-pickup.--yellow .p-featureS-pickup__head {
  background-color: #FCED95;
  background-image: url(../../assets-feature/images/icon_pickup_drink.svg);
}
.p-featureS-pickup.--green .p-featureS-pickup__head {
  background-color: #B9DB9A;
  background-image: url(../../assets-feature/images/icon_pickup_outdoor.svg);
}
.p-featureS-pickup.--blue .p-featureS-pickup__head {
  background-color: #C5DBED;
  background-image: url(../../assets-feature/images/icon_pickup_food.svg);
}

/* この記事をシェアする！
---------------------------------------------------------- */
.p-featureS-share {
  margin-top: 0;
}