.section.section-hero_colors {
  margin-bottom: var(--sp3);
  padding-top: var(--sp4);
  padding-bottom: 40px;
  position: relative;
}
.section.section-hero_colors:after {
  content: "";
  background-color: var(--c-section-bg);
  width: 100%;
  height: 356px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
}
.section.section-hero_colors .section__list {
  display: grid;
  grid-template-columns: repeat(2, 2fr);
  grid-gap: var(--gap);
  margin-bottom: var(--sp1);
}
@media (max-width: 768px) {
  .section.section-hero_colors .section__list {
    grid-gap: var(--sp0);
  }
}
.section.section-hero_colors .section__list .item {
  position: relative;
}
.section.section-hero_colors .section__list .item:hover .item__image:before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
}
.section.section-hero_colors .section__list .item__image {
  z-index: 1;
}
.section.section-hero_colors .section__list .item__image:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 280px;
  z-index: 2;
  border-radius: 16px;
}
.section.section-hero_colors .section__list .item__image img {
  height: 280px;
  object-fit: cover;
  border-radius: 16px;
}
.section.section-hero_colors .section__list .item__body {
  padding: 40px;
  position: absolute;
  bottom: 0;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  left: 0;
  z-index: 3;
}
@media (max-width: 576px) {
  .section.section-hero_colors .section__list .item__body {
    padding: var(--sp1);
  }
}
@media (max-width: 360px) {
  .section.section-hero_colors .section__list .item__body {
    padding-right: var(--sp02);
  }
}
.section.section-hero_colors .section__list .item__icon {
  position: absolute;
  top: calc(50% - 16px);
}
@media (max-width: 768px) and (min-width: 577px) {
  .section.section-hero_colors .section__list .item__icon {
    top: 35%;
  }
}
@media (max-width: 576px) {
  .section.section-hero_colors .section__list .item__title {
    font-size: var(--fs-xl);
    line-height: 24px;
  }
}
.section.section-hero_colors .section__list .item:first-of-type .item__title {
  color: var(--c-white);
}
.section.section-hero_colors .section__colors {
  position: relative;
  overflow: hidden;
  outline: none;
}
@media (min-width: 1176px) {
  .section.section-hero_colors .section__colors .swiper-button-prev,
.section.section-hero_colors .section__colors .swiper-button-next {
    display: none;
  }
}
.section.section-hero_colors .section__colors_wrapper {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: var(--gap);
  outline: none;
}
@media (min-width: 1176px) {
  .section.section-hero_colors .section__colors_wrapper {
    transform: none !important;
  }
}
@media (max-width: 1177px) {
  .section.section-hero_colors .section__colors_wrapper {
    display: flex;
    grid-gap: 0;
  }
}
.section.section-hero_colors .section__colors_wrapper .color.color_invert.swiper-slide {
  width: 168px !important;
}
@media (max-width: 768px) {
  .section.section-hero_colors .section__colors_wrapper .color.color_invert.swiper-slide {
    width: 156px !important;
  }
}
@media (min-width: 1176px) {
  .section.section-hero_colors .section__colors_wrapper .color.color_invert.swiper-slide {
    margin-right: 0 !important;
  }
}
@media (max-width: 350px) {
  .section.section-hero_colors .section__colors_wrapper .color.color_invert.swiper-slide {
    width: 136px !important;
  }
}
.section.section-hero_colors .swiper-button-next::before {
  content: "";
  width: 72px;
  height: 168px;
  background: linear-gradient(270deg, #F9F9F9 11.11%, rgba(248, 248, 249, 0) 99.99%);
  position: absolute;
}
.section.section-hero_colors .swiper-button-prev::before {
  content: "";
  width: 72px;
  height: 168px;
  background: linear-gradient(90deg, #F9F9F9 11.11%, rgba(248, 248, 249, 0) 99.99%);
  position: absolute;
}
/*# sourceMappingURL=vc_block_hero_colors.min.css.map*/