html,
body {
  min-height: 100%;
}

body {
  position: relative;
}

.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background-image: url("../img/common/bg-grid.png");
  background-repeat: repeat;
  background-position: center top;
  background-size: 30px auto;
}

.wrap,
.footer {
  position: relative;
  z-index: 1;
}

.menu-none {
  position: relative;
  z-index: 10000;
}

.bg-image {
  position: absolute;
  width: auto;
  height: 100vh;
  top: 0;
  right: 0;
}

.bg-image img {
  height: 100vh;
  will-change: filter;
  transform: translateZ(0);
}

.bg-image picture,
.bg-image img {
  display: block;
}

.bg-image picture {
  height: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.8) 25%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.8) 25%, #000 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
@media screen and (min-width: 1px) and (max-width: 743px) {
  .bg-image {
    inset: 0;
    width: 100%;
    height: 100dvh;
  }

  .bg-image picture {
    width: 100%;
    height: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.8) 20%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.8) 20%, #000 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  }

  .bg-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }
}