@charset "UTF-8";

/* VOGUE BEAUTY AWARDS 2024
========================================== */

/* ======= content ======= */
.p-awardCont+.p-awardCont::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #313131;
  margin: 30px 0;
}

/* ======= title ======= */
.mc-iconTitle {
  font-size: 0;
  line-height: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.mc-iconTitle>img,
.mc-iconTitle>object,
.mc-iconTitle>span {
  display: inline-block;
}

.mc-iconTitle>img,
.mc-iconTitle>object {
  height: auto;
  width: 80px;
  aspect-ratio: 1 / 1;
  max-height: 80px;
  object-fit: contain;
}

.mc-iconTitle>span {
  padding-left: 12px;
  font-size: 18px;
  line-height: 1.6;
  max-width: calc(100% - 80px);
}

/* ======= feature card ======= */
.p-featurecard {
  width: 100%;
  max-width: 300px;
}

.p-featurecard .c-text:not(:last-child) {
  margin-bottom: 5px;
}

.p-featurecard__inner {
  display: block;
  width: 100%;
}

.p-featurecard[data-rank] .p-featurecard__inner::before {
  content: "";
  display: block;
  width: 100%;
  max-width: 120px;
  aspect-ratio: 120/114;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  margin: 0 auto 18px;
}

.p-featurecard[data-rank="1"] .p-featurecard__inner::before {
  background-image: url("/include/beauty/special/cosmefes/612775/image/ic_rank1_241129.svg");
}

.p-featurecard[data-rank="2"] .p-featurecard__inner::before {
  background-image: url("/include/beauty/special/cosmefes/612775/image/ic_rank2_241129.svg");
}

.p-featurecard[data-rank="3"] .p-featurecard__inner::before {
  background-image: url("/include/beauty/special/cosmefes/612775/image/ic_rank3_241129.svg");
}

.p-featurecard[data-rank="4"] .p-featurecard__inner::before {
  background-image: url("/include/beauty/special/cosmefes/612775/image/ic_rank4_241129.svg");
}

.p-featurecard[data-rank="5"] .p-featurecard__inner::before {
  background-image: url("/include/beauty/special/cosmefes/612775/image/ic_rank5_241129.svg");
}

.p-featurecard__imgbox,
.p-featurecard__texbox {
  width: 100%;
}

.p-featurecard__imgbox {
  border: 1px solid #f2f2f2;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.p-featurecard__texbox {
  margin-top: 10px;
}

@media screen and (min-width: 769px) {
  .p-featurecard.-large {
    max-width: 600px;
  }

  .p-featurecard.-large .p-featurecard__inner {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .p-featurecard.-large .p-featurecard__imgbox,
  .p-featurecard.-large .p-featurecard__texbox {
    width: 50%;
  }

  .p-featurecard.-large .p-featurecard__imgbox {
    border-radius: unset;
  }

  .p-featurecard.-large .p-featurecard__texbox {
    margin-top: unset;
    padding-left: 10px;
  }
}

/* ======= slider ======= */
.p-awardSlider {
  display: block;
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-top: 20px;
}

.p-awardSlider:not(.is-load) {
  opacity: 0;
  visibility: hidden;
}

.p-awardSlider__wrapper {
  display: box;
  display: flexbox;
  display: flex;
}

.p-awardSlider__wrapper>.swiper-slide {
  width: 100%;
  flex-shrink: 0;
  -ms-flex-negative: 0;
}
/* スライダー化=sp */
/* sp */
@media screen and (max-width: 768px) {
  /* .p-awardSlider .p-awardSlider__wrapper {
    justify-content: center;
  } */
  .p-awardSlider .p-awardSlider__wrapper>.swiper-slide {
    /* max-width: calc((100% - (28px * 4)) / 5); */
    max-width: calc((100vw - 40px - 28px) / 2);
    margin-right: 28px;
  }
  /* .p-awardSlider .p-awardSlider__wrapper>.swiper-slide+.swiper-slide {
    margin-left: 28px;
  } */
}
.p-awardSlider__nav {
  position: relative;
  margin: 20px auto 0;
  width: fit-content;
  height: 30px;
  padding: 0 calc(14px * 2);
}

.p-awardSlider__nav>.-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 12px;
  height: 100%;
}

.p-awardSlider__nav>.-pagination .swiper-pagination-bullet {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #dedede;
  transition: opacity background-color 700ms;
}

.p-awardSlider__nav>.-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #313131;
}

.p-awardSlider__nav>.-pagination .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
  cursor: pointer;
}

.p-awardSlider__nav>.-pagination .swiper-pagination-bullet:not(.swiper-pagination-bullet-active):hover {
  opacity: 0.6;
}

.p-awardSlider__nav>.-prev,
.p-awardSlider__nav>.-next {
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  width: 14px;
  height: 30px;
  background-image: url("/sto/common/image/icn_slider-next-b.png");
  background-size: contain;
  background-position: right center;
  background-repeat: no-repeat;
  transition: opacity 700ms;
}

.p-awardSlider__nav>.-prev {
  left: 0;
  transform: rotate(180deg) translateY(50%);
}

.p-awardSlider__nav>.-next {
  right: 0;
}

.p-awardSlider__nav>.swiper-button-disabled {
  opacity: 0.3;
}

.p-awardSlider__nav>.-prev:not(.swiper-button-disabled),
.p-awardSlider__nav>.-next:not(.swiper-button-disabled) {
  cursor: pointer;
}

.p-awardSlider__nav>.-prev:not(.swiper-button-disabled):hover,
.p-awardSlider__nav>.-next:not(.swiper-button-disabled):hover {
  opacity: 0.3;
}

/* not slider */
/* anchorアニメーションとの競合　swiper初期化に先んじて高さをそろえる pc時=not-sliderのため、置き換える */
/* .p-awardSlider.not-slider .p-awardSlider__wrapper {
  justify-content: center;
}
.p-awardSlider.not-slider .p-awardSlider__wrapper>.swiper-slide {
  max-width: calc((100% - (28px * 4)) / 5);
}
  .p-awardSlider.not-slider .p-awardSlider__wrapper>.swiper-slide+.swiper-slide {
  margin-left: 28px;
}

.p-awardSlider.not-slider .p-awardSlider__nav {
  display: none;
}
.p-awardSlider.not-slider .p-awardSlider__wrapper>.swiper-slide+.swiper-slide {
  margin-left: 28px;
}

.p-awardSlider.not-slider .p-awardSlider__nav {
  display: none;
} */
/* pc */
@media screen and (min-width: 769px) {
  .p-awardSlider .p-awardSlider__wrapper {
    justify-content: center;
  }
  .p-awardSlider .p-awardSlider__wrapper>.swiper-slide {
    max-width: calc((100% - (28px * 4)) / 5);
  }
  .p-awardSlider .p-awardSlider__wrapper>.swiper-slide+.swiper-slide {
    margin-left: 28px;
  }
  .p-awardSlider .p-awardSlider__nav {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  /* .p-awardSlider.not-slider .p-awardSlider__wrapper>.swiper-slide {
    max-width: calc((100% - (28px * 1)) / 2);
  } */
  .p-awardSlider .p-awardSlider__wrapper:has(> :nth-child(2):last-child, > :nth-child(1):last-child) > .swiper-slide {
    max-width: calc((100% - (28px * 1)) / 2);
  }
}

/*  ======= campaign ======= */
.p-camFlex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.p-camFlex__img {
  max-width: 357px;
  width: 100%;
}

.p-camFlex__cont {
  max-width: calc(100% - 10px - 357px);
  width: 100%;
}

@media screen and (min-width: 769px) {
  .p-camFlex__img+.p-camFlex__cont {
    margin-left: 10px;
  }
}

@media screen and (max-width: 768px) {
  .p-camFlex {
    justify-content: center;
    flex-direction: column;
  }

  .p-camFlex__cont {
    max-width: unset;
  }

  .p-camFlex__img+.p-camFlex__cont {
    margin-top: 10px;
  }
}