@charset "UTF-8";

.about .about_sozai_inner,
.about .about_kuukan_inner {
  padding: 0 var(--contents-side-gutter);
}

.about .about_sozai_text,
.about .about_kuukan_text {
  margin-bottom: var(--contents-gutter);
}

.about .about_sozai_text p:not(:last-child),
.about .about_kuukan_text p:not(:last-child) {
  margin-bottom: var(--size-md);
}

.about .about_sozai_img,
.about .about_kuukan_img {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--gutter-base) * 2);
  margin-bottom: var(--section-gutter);
  overflow: hidden;
}

.about .about_kuukan_img {
  margin-bottom: var(--footer-gutter);
}

.about .about_sozai_img .to_right,
.about .about_kuukan_img .to_right {
  transform: translateX(-100vw);
  transition: 0.3s;
}

.about .about_sozai_img .to_left,
.about .about_kuukan_img .to_left {
  transform: translateX(100vw);
  transition: 0.3s;
}

.about .about_sozai_img.on .to_right,
.about .about_kuukan_img.on .to_right,
.about .about_sozai_img.on .to_left,
.about .about_kuukan_img.on .to_left {
  transform: translateX(0);
}

@media screen and (min-width: 960px) {
  .about .about_sozai_text,
  .about .about_kuukan_text {
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--contents-gutter-pc);
  }

  .about .about_sozai_img,
  .about .about_kuukan_img {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--section-gutter-pc);
    gap: calc(var(--gutter-base) * 10);
  }
}