/**
 * Site customizations
 * @since 2026-09-02
 */
.p-bannerList {
  padding-top: clamp(74 * 750 / 1366 * 1px,74 / 1366 * 100vw,74px);
}

.p-bannerList__list {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(41 * 750 / 1366 * 1px,41 / 1366 * 100vw,41px);
  justify-content: center;
}

.p-bannerList__item {
  flex-basis: clamp(500 * 750 / 1366 * 1px,500 / 1366 * 100vw,500px);
}

@media (max-width: 750px) {
  .p-bannerList__item {
    flex-basis: calc(674 / 750 * 100vw);
  }
}

@media (hover: hover) {
  .p-bannerList__item a:hover {
    opacity: 1;
  }
}

.p-bannerList__image {
  border-radius: clamp(20 * 750 / 1366 * 1px,20 / 1366 * 100vw,20px);
  overflow: hidden;
}

.p-bannerList__image img {
  display: block;
  transition: transform .3s;
}

@media (hover: hover) {
  .p-bannerList__item a:hover .p-bannerList__image img {
    transform: scale(1.05);
  }
}

.p-bannerList__label {
  margin-top: clamp(16 * 750 / 1366 * 1px, 16 / 1366 * 100vw, 16px);
  font-size: clamp(16 * 750 / 1366 * 1px, 16 / 1366 * 100vw, 16px);
  font-weight: 500;
}

@media (max-width: 750px) {
  .p-bannerList__label {
    margin-top: calc(32 / 750 * 100vw);
      font-size: calc(24 / 750 * 100vw);
  }
}

.p-bannerList__title {
  position: relative;
  padding-left: clamp(20 * 750 / 1366 * 1px, 20 / 1366 * 100vw, 20px);
  font-size: clamp(24 * 750 / 1366 * 1px, 24 / 1366 * 100vw, 24px);
  font-weight: 700;
}

@media (max-width: 750px) {
  .p-bannerList__title {
    padding-left: calc(30 / 750 * 100vw);
    font-size: calc(40 / 750 * 100vw);
  }
}

.p-bannerList__title::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: clamp(14 * 750 / 1366 * 1px, 14 / 1366 * 100vw, 14px);
  height: clamp(14 * 750 / 1366 * 1px, 14 / 1366 * 100vw, 14px);
  content: "";
  background-color: var(--color_primary);
  border-radius: 50%;
  transform: translateY(-50%);
}