/* ==================================================
  hero
================================================== */

.hero {
  position: relative;
}

@media (max-width: 767px) {
  .hero_top {
    padding: 40px 0;
  }
}

@media (min-width: 768px) {
  .hero_media {
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(/content/dam/jp-ext-hp-com/jp/ja/ec/prod/workstations/solutions/isv/images/hero.jpg) no-repeat center top / cover;
  }
  .hero_top {
    position: relative;
    padding-top: 95px;
    color: #fff;
  }
  .hero_top_inner {
    width: 50%;
    padding-top: 80px;
  }
}

@media (min-width: 1280px) {
  .hero_top_inner {
    width: 42%;
    padding-top: 170px;
  }
}





/* ==================================================
  hero_list
================================================== */

.hero_list {
  max-width: 1280px;
  padding: 60px 0 15px;
  margin-right: auto;
  margin-left: auto;
}
.hero_list .swiper {
  padding: 0 20px 60px;
}
.hero_list .swiper-slide {
  display: flex;
  height: auto;
}
.hero_card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 40px;
}
.hero_card_desc {
  margin: 20px 0 40px;
}
.hero_card_cta {
  margin-top: auto;
}

@media (min-width: 768px) {
  .hero_list {
    padding-bottom: 40px;
  }
  .hero_list .swiper {
    padding: 0 30px;
  }
}

/* color */
.hero_list .swiper-slide:nth-child(odd) .hero_card {
  background: #edf1f3;
}
.hero_list .swiper-slide:nth-child(even) .hero_card {
  color: #fff;
  background: #527786;
}

@media (min-width: 768px) {
  .hero_list .swiper-wrapper {
    gap: 30px;
    transform: none !important;
  }
  .hero_list .swiper-slide {
    flex: 1;
  }
  .hero_card {
    padding-right: 30px;
    padding-left: 30px;
  }
}


/* ----------------------------------------
  Swiper
---------------------------------------- */

/* controller -------------------- */

.hero_list .swiper-controller {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 2;
  width: 100%;
}
.hero_list [class^="swiper-button-"] {
  position: relative;
  cursor: pointer;
  transition: .2s;
  width: 62px;
  height: 62px;
  padding: 7px;
}
.hero_list [class^="swiper-button-"]::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 7px;
  transition: .2s;
  width: 48px;
  height: 48px;
  background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='xMinYMin'%3E%3Cdefs%3E%3Cg id='chevron-bg-4-left-hover'%3E%3Ccircle cx='24' cy='24' r='24' fill='rgba(31, 30, 34, 1)'%3E%3C/circle%3E%3Cpath d='m10 1 5.247 4.664M0 8h14.673c1.154 0 1.692 1.43.823 2.19L10 15' transform='translate(32, 16) scale(-1, 1)' fill='none' stroke='%23fff' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23chevron-bg-4-left-hover'%3E%3C/use%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.hero_list .swiper-button-next::before,
.hero_list .swiper-button-next:hover::before {
  transform: rotate(180deg);
}
.hero_list .swiper-button-disabled {
  opacity: 0;
  pointer-events: none;
}

@media screen and (min-width: 768px) {
  .hero_list .swiper-controller {
    right: 10px;
  }
}

@media screen and (min-width: 1280px) {
  .hero_list .swiper-controller {
    right: -20px;
  }
}


/* pagination -------------------- */

.hero_list .swiper-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  text-align: center;
  line-height: 1;
}
.hero_list .swiper-pagination-bullet {
  display: inline-block;
  cursor: pointer;
  opacity: .9;
  width: 6px;
  height: 6px;
  margin: 0 4px;
  background-color: #000;
  background-clip: padding-box;
  border: 1px solid #000;
  border-radius: 20px;
}
.hero_list .swiper-pagination-bullet-active {
  width: 8px;
  height: 8px;
}

@media screen and (min-width: 1280px) {
  .hero_list .swiper-pagination {
    display: none;
  }
}





/* ==================================================
  ISV認証とは？
================================================== */

.what_is_isv {
  display: grid;
  gap: 30px;
}
.what_is_isv_media img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.what_is_isv_content {
  padding: 30px 20px;
  border: 1px solid #000;
}
.what_is_isv_content_inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.what_is_isv_content h3 {
  padding-top: 60px;
  margin-top: auto;
}

@media (min-width: 768px) {
  .what_is_isv_content {
    padding: 40px 30px;
  }
}

@media (min-width: 1024px) {
  .what_is_isv {
    grid-template-columns: repeat(2, 1fr);
  }
  .what_is_isv_content {
    padding: 40px;
  }
}