.container {
  max-width: var(--container-width);
  padding: 0 var(--container-padding);
  margin: 0 auto;
  width: 100%;
}

.pc-only {
}

@media screen and (max-width: 767px) {
  .pc-only {
    display: none;
  }
}

.sp-only {
  display: none;
}

@media screen and (max-width: 767px) {
  .sp-only {
    display: block;
  }
}

.page_bg-left, .page_bg-right {
  padding-top: 40px;
  position: relative;
  overflow: hidden;
}
.page_bg-left::before, .page_bg-right::before {
  background: var(--background-color);
  content: "";
  display: block;
  width: calc(100% - 280px - ((100% - 1440px) / 2 ));
  height: calc(100% - 118px);
  position: absolute;
  top: 0;
  z-index: -1;
}
.page_bg-left::before {
  right: calc(280px + ((100% - 1440px) / 2 ));
  border-radius: 0 40px 40px 0;
}

.page_bg-right::before {
  left: calc(280px + ((100% - 1440px) / 2 ));
  border-radius: 40px 0 0 40px;
}

.page_bg-name {
  position: relative;
  overflow: hidden;
}
.page_bg-name::after {
  background: url("../img/company_name_bg.svg") no-repeat 0 0;
  content: "";
  display: block;
  width: 100vw;
  height: 168px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

@media screen and (max-width: 767px) {
  .page_bg-left::before, .page_bg-right::before {
    width: 85%;
  }
  .page_bg-left::before {
    left: 0;
    right: auto;
    border-radius: 0 24px 24px 0;
  }
  .page_bg-right::before {
    left: auto;
    right: 0;
    border-radius: 24px 0 0 24px;
  }
  
  .page_bg-name::after {
    height: 64px;
    background-size: auto 100%;
  }
}