.pt-sec-wide {
  --_max-width:calc(var(--pt-spa-max-width) * 0.5);
  padding: 0;
  background-image: var(--_bgi-sp, initial);
  background-position: var(--_bgposi-sp, 50%);
  background-size: cover;
  background-repeat: no-repeat;
}
@media screen and (min-width: 900px) {
  .pt-sec-wide {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr min(50%, var(--_max-width)) min(50%, var(--_max-width)) 1fr;
    padding: var(--pt-7) var(--pt-spa-both-side);
    background-image: var(--_bgi-pc, initial);
    background-position: var(--_bgposi-pc, 50%);
  }
}
.pt-sec-wide__space {
  grid-area: img;
  aspect-ratio: 4/5;
  width: 100%;
  height: 500px;
  height: 100%;
  background-image: var(--_bgi-sp, initial);
  background-position: var(--_bgposi-sp, 50%);
  background-size: cover;
  background-repeat: no-repeat;
}
@media (min-width: 640px) and (max-width: 899px) {
  .pt-sec-wide__space {
    aspect-ratio: 5/4;
  }
}
@media screen and (min-width: 900px) {
  .pt-sec-wide__space {
    aspect-ratio: initial;
    width: auto;
    height: auto;
    background-image: none;
  }
}
.pt-sec-wide__desc {
  grid-area: desc;
  width: calc(100% - var(--pt-spa-both-side) * 2);
  max-width: var(--pt-spa-max-width-sm);
  margin-top: calc(var(--pt-6) * -1);
  margin-right: auto;
  margin-left: auto;
  padding: var(--pt-4) var(--pt-spa-both-side);
  background-color: white;
}
@media screen and (min-width: 900px) {
  .pt-sec-wide__desc {
    width: 100%;
    margin-top: auto;
  }
}
.pt-sec-wide__desc h2 {
  margin-top: 0;
}
.pt-sec-wide.pt-sec-wide--left {
  grid-template-areas: "spa1 img desc spa2";
}
.pt-sec-wide.pt-sec-wide--right {
  grid-template-areas: "spa1 desc img spa2";
}