@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@600..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Limelight&display=swap");
/*テーマカラー設定*/
:root {
  --main-color: #ffdc95;
  --accent-color: #ffd278;
  --sub-color: #ffd278;
  --main-bg-color: #fff;
  --swiper-dots-color: #252525;
  --swiper-allow-color: #fff;
  --sub-font: "Zen Maru Gothic", serif;
  --num-font: "Limelight", sans-serif;
}

/* ランキング
========================== */
.p-lp-ranking {
  /* padding: 80px 0 20px; */
  padding-bottom: 20px;
  background: url(https://stprodaeonblob.blob.core.windows.net/eshop-files/images/other/gifthokkaido_bg_ranking.png) no-repeat top center/100% auto;
  background-attachment: fixed;
}
.p-lp-ranking .p-item-list-category__item {
  padding: 15px;
  background: #fff;
}
@media (width < 768px) {
  .p-lp-ranking {
    padding-bottom: 20px;
  }
}
.p-lp-ranking .c-button {
  max-width: 360px;
  background-color: #fff;
}

.c-lp-ranking-title {
  /* padding-block: 30px; */
  font-family: var(--sub-font);
  padding: 50px 0 40px;
  font-size: min(10vw, 3.8rem);
  text-align: center;
  border-bottom: 8px double var(--main-color);
  background: rgba(255, 210, 120, 0.2);
  /* background: url(https://stprodaeonblob.blob.core.windows.net/eshop-files/images/other/gifthokkaido_bg_ranking.png) no-repeat top center / 100% auto; */
}
.c-lp-ranking-title .-main {
  font-weight: 700;
  line-height: 1.2;
  color: #da3838;
  text-shadow: 2px 0px 1px #fff, -2px 0px 1px #fff, 2px 2px 1px #fff, -2px 2px 1px #fff, 0px 2px 1px #fff, 2px -2px 1px #fff, -2px -2px 1px #fff, 0px -2px 1px #fff;
}
.c-lp-ranking-title .-month {
  width: max-content;
  margin-top: 10px;
  margin-inline: auto;
  padding: 10px 50px;
  font-size: 63%;
  /* font-size: 2.4rem; */
  font-weight: 600;
  line-height: 1;
  color: #fff;
  background-color: #FF5758;
  border-radius: 10px;
}

.c-lp-category-title {
  margin-bottom: 40px;
  padding: 20px 0 15px;
  font-family: var(--sub-font);
  font-size: min(6.5vw, 2.3rem);
  font-weight: 500;
  position: relative;
  text-align: center;
  line-height: 1.15;
  background-color: var(--main-color);
  /* background: linear-gradient(90deg, var(--main-color), #fff, var(--main-color)); */
  border-radius: 10px;
  text-shadow: 2px 0px 2px rgba(255, 255, 255, 0.6), -2px 0px 2px rgba(255, 255, 255, 0.6), 2px 2px 2px rgba(255, 255, 255, 0.6), -2px 2px 2px rgba(255, 255, 255, 0.6), 0px 2px 2px rgba(255, 255, 255, 0.6), 2px -2px 2px rgba(255, 255, 255, 0.6), -2px -2px 2px rgba(255, 255, 255, 0.6), 0px -2px 2px rgba(255, 255, 255, 0.6);
}
.c-lp-category-title span {
  display: block;
  font-weight: 600;
  font-size: 115%;
}

.p-lp-ranking .p-item-list-category__item {
  width: 100%;
}

.c-lp-ranking-card {
  width: calc(33.3333333333% - 20px);
}
@media (width < 768px) {
  .c-lp-ranking-card {
    width: calc(50% - 6px);
  }
  .c-lp-ranking-card:first-child {
    width: 100%;
  }
}

.p-lp-ranking-main {
  counter-reset: number 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* display: grid;
  justify-content: center;
  grid-template-columns: repeat(3, 1fr); */
  width: 100%;
  gap: 30px;
}
@media (width < 768px) {
  .p-lp-ranking-main {
    gap: 12px;
    /* grid-template-columns: repeat(1, 1fr); */
  }
}
.p-lp-ranking-main .c-lp-ranking-card:nth-of-type(-n+3) .c-lp-ranking-card__rank {
  aspect-ratio: 200/197;
  width: 50%;
  max-width: 150px;
  margin: 0 auto 10px;
  background: url(https://stprodaeonblob.blob.core.windows.net/eshop-files/images/other/ahrand_ranking_ico01.png) no-repeat center center/contain;
}
@media (width < 768px) {
  .p-lp-ranking-main .c-lp-ranking-card:nth-of-type(-n+3) .c-lp-ranking-card__rank {
    max-width: 75px;
  }
}
@media (width < 768px) {
  .p-lp-ranking-main .c-lp-ranking-card:nth-of-type(1) .c-lp-ranking-card__rank {
    max-width: 120px;
  }
}
.p-lp-ranking-main .c-lp-ranking-card:nth-of-type(n+4) .c-lp-ranking-card__rank {
  display: grid;
  place-content: center;
  width: 70px;
  height: 70px;
  margin: 0 auto 10px;
  padding-top: 3px;
  font-family: var(--num-font);
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1;
  position: relative;
  text-align: center;
  background-color: #ebdcbd;
  border-radius: 50%;
}
@media (width < 768px) {
  .p-lp-ranking-main .c-lp-ranking-card:nth-of-type(n+4) .c-lp-ranking-card__rank {
    width: 46px;
    height: 46px;
    margin-bottom: 5px;
    font-size: 1.6rem;
  }
}
.p-lp-ranking-main .c-lp-ranking-card:nth-of-type(1) .c-lp-ranking-card__rank {
  background-image: url(https://stprodaeonblob.blob.core.windows.net/eshop-files/images/other/ahrand_ranking_ico01.png);
}
.p-lp-ranking-main .c-lp-ranking-card:nth-of-type(2) .c-lp-ranking-card__rank {
  background-image: url(https://stprodaeonblob.blob.core.windows.net/eshop-files/images/other/ahrand_ranking_ico02.png);
}
.p-lp-ranking-main .c-lp-ranking-card:nth-of-type(3) .c-lp-ranking-card__rank {
  background-image: url(https://stprodaeonblob.blob.core.windows.net/eshop-files/images/other/ahrand_ranking_ico03.png);
}
.p-lp-ranking-main .c-lp-ranking-card:nth-of-type(4) .c-lp-ranking-card__rank::before {
  content: "4";
}
.p-lp-ranking-main .c-lp-ranking-card:nth-of-type(5) .c-lp-ranking-card__rank::before {
  content: "5";
}

.p-lp-ranking-sub {
  counter-reset: number 3;
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(5, 1fr);
  width: 100%;
  gap: 30px;
  margin-top: 50px;
}
@media (width < 768px) {
  .p-lp-ranking-sub {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 12px;
    margin-top: 30px;
  }
}
.p-lp-ranking-sub .c-lp-ranking-card:nth-of-type(1) .c-lp-ranking-card__rank {
  background-image: url(https://stprodaeonblob.blob.core.windows.net/eshop-files/images/other/gifthokkaido_ico_ranking_04.svg);
}
.p-lp-ranking-sub .c-lp-ranking-card:nth-of-type(2) .c-lp-ranking-card__rank {
  background-image: url(https://stprodaeonblob.blob.core.windows.net/eshop-files/images/other/gifthokkaido_ico_ranking_05.svg);
}
.p-lp-ranking-sub .c-lp-ranking-card:nth-of-type(3) .c-lp-ranking-card__rank {
  background-image: url(https://stprodaeonblob.blob.core.windows.net/eshop-files/images/other/gifthokkaido_ico_ranking_06.svg);
}
.p-lp-ranking-sub .c-lp-ranking-card:nth-of-type(4) .c-lp-ranking-card__rank {
  background-image: url(https://stprodaeonblob.blob.core.windows.net/eshop-files/images/other/gifthokkaido_ico_ranking_07.svg);
}
.p-lp-ranking-sub .c-lp-ranking-card:nth-of-type(5) .c-lp-ranking-card__rank {
  background-image: url(https://stprodaeonblob.blob.core.windows.net/eshop-files/images/other/gifthokkaido_ico_ranking_08.svg);
}