.px-banner {
  container-type: inline-size;
  position: relative;
  padding-top: clamp(5.5555555556rem, 4.6546546547rem + 5.0675675676vw, 8.8888888889rem);
}
@media screen and (max-width: 1024px) {
  .px-banner {
    padding-top: 100px;
  }
}
.px-banner-inner {
  width: var(--baseWidth);
  max-width: var(--maxWidthBig);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 40px 80px;
  position: relative;
  z-index: 1;
}
.px-banner-inner > .image,
.px-banner-inner > .video {
  width: 47%;
  position: relative;
}
.px-banner-inner > .image img,
.px-banner-inner > .video img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.px-banner-inner .text {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  padding: clamp(3.3333333333rem, 2.4324324324rem + 5.0675675676vw, 6.6666666667rem) 0 clamp(3.3333333333rem, 1.8318318318rem + 8.4459459459vw, 8.8888888889rem);
  width: 50%;
}
@container (width <= 960px) {
  .px-banner-inner {
    flex-direction: column;
  }
  .px-banner-inner .col {
    width: 100%;
  }
  .px-banner-inner .col.image, .px-banner-inner .col.video {
    max-width: 500px;
    padding-bottom: clamp(1.6666666667rem, 1.2162162162rem + 2.5337837838vw, 3.3333333333rem);
  }
  .px-banner-inner .col.text {
    padding: 0;
  }
}
.px-banner.with-decoration::before {
  content: "";
  position: absolute;
  pointer-events: none;
  width: 18%;
  min-width: 150px;
  aspect-ratio: 1/2.15;
  background: url("../../../img/bg-left.svg") no-repeat center/contain;
  top: 200px;
  left: 0;
  z-index: 0;
  opacity: 1;
}
@container (width >= calc(960px + 1px)) {
  .px-banner.with-decoration::after {
    content: "";
    position: absolute;
    pointer-events: none;
    width: 45vw;
    min-width: 300px;
    aspect-ratio: 1/0.86;
    background: url("../../../img/bg-right.svg") no-repeat center/contain;
    top: 30vw;
    right: 0;
    z-index: 0;
    opacity: 1;
  }
}
@container (width <= 960px) {
  .px-banner.with-decoration .image img, .px-banner.with-decoration .image video, .px-banner.with-decoration .video img, .px-banner.with-decoration .video video {
    position: relative;
    z-index: 1;
  }
  .px-banner.with-decoration .image::after, .px-banner.with-decoration .video::after {
    content: "";
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("../../../img/bg-normal.svg") no-repeat center/contain;
    bottom: -35%;
    right: -25%;
    z-index: 0;
    opacity: 1;
  }
}