/* mainvisual
----------------------------------------------------- */
.mainvisual.for-screening {
  background-image: url("../images/img-screening_mv.png");
}

/* about
----------------------------------------------------- */
.about {
  padding-top: calc(8px * 16);
}

.about .container {
  max-width: 1080px;
}

.aboutBox {
  align-items: center;
  column-gap: 160px;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  padding: 0 0 calc(8px * 15);
  position: relative;
}

.aboutBox__content {
  position: relative;
}

.aboutBox__content::before {
  background: rgba(237, 255, 130, .1);
  border-radius: 50%;
  content: "";
  filter: blur(70px);
  height: 680px;
  left: -100px;
  position: absolute;
  top: -150px;
  width: 680px;
  z-index: -100;
}

.aboutBox:nth-of-type(n+2) {
  grid-template-columns: 1.3fr 1fr;
}

.aboutBox__content--title {
  font-size: var(--fontSize20);
  font-weight: bold;
}

.aboutBox__content--text {
  font-size: var(--fontSize18);
  line-height: 1.8;
  margin-top: calc(8px * 5);
}

.aboutBox__content--button {
  margin-top: calc(8px * 9);
}

.aboutBox:nth-of-type(n+2) .aboutBox__content {
  order: 1;
}

.aboutBox:nth-of-type(n+2) .aboutBox__thumbnail {
  order: 2;
}

@media screen and (max-width: 767px) {
  .about {
    padding-top: calc(8px * 6);
  }

  .about .container {
    max-width: 1080px;
  }

  .aboutBox {
    grid-template-columns: 100%;
    padding: 0 0 calc(8px * 10);
    row-gap: calc(8px * 4);
  }

  .aboutBox::before {
    border-radius: 30px;
    filter: blur(20px);
    height: 100%;
    left: -20px;
    top: 50px;
    width: 95%;
    z-index: -100;
  }

  .aboutBox:nth-of-type(n+2) {
    grid-template-columns: 100%;
  }

  .aboutBox__content--text {
    margin-top: calc(8px * 3);
  }

  .aboutBox__content--button {
    margin-top: calc(8px * 5);
  }

  .aboutBox:nth-of-type(n+2) .aboutBox__content {
    order: 2;
  }

  .aboutBox:nth-of-type(n+2) .aboutBox__thumbnail {
    order: 1;
  }
}