.concept::after {
  background-image: url("../images/2.webp");
}
.detail::after {
  background-image: url("../images/3.webp");
}
.message::after {
  background-image: url("../images/4.webp");
}
.contact::after {
  background-image: url("../images/5.webp");
  -webkit-mask: url(../images/mask2.svg) no-repeat 50% 100% / cover;
}
@media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx), (min-width: 1921px) {
  .concept::after {
    background-image: url("../images/2/2.webp");
  }
  .detail::after {
    background-image: url("../images/2/3.webp");
  }
  .message::after {
    background-image: url("../images/2/4.webp");
  }
  .contact::after {
    background-image: url("../images/2/5.webp");
    -webkit-mask: url(../images/mask2.svg) no-repeat 50% 100% / cover;
  }
}
@media (orientation: portrait) {
  section::after {
    --gradient: 100vw;
    -webkit-mask-image: linear-gradient(to bottom, #000 var(--gradient) var(--gradient), transparent calc(var(--gradient) + 10%) calc(var(--gradient) + 10%));
  }
  .hero {
    background-image: url("../images/2/1m.webp");
    background-size: contain;
  }
  .concept:after {
    background: transparent url("../images/2/2m.webp") scroll no-repeat 50% 0% /100%;
  }
  .detail::after {
    --gradient: 110vw;
    background: transparent url("../images/2/3m.webp") scroll no-repeat 50% 0%/100%;
  }
  .message::after {
    --gradient: 110vw;
    background: transparent url("../images/2/4m.webp") scroll no-repeat 50% 0%/100%;
  }
  .contact::after {
    background: #e2eced;
  }
}