/* Match the content container's 1004px maximum width and responsive gutters. */
.nh-sketch {
  --sketch-edge: max(20px, calc((100% - 1004px) / 2));
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.nh-sketch__hero {
  position: absolute;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.nh-page-hero .nh-sketch__hero {
  right: calc(var(--sketch-edge) - 100px);
}

.nh-home-hero .nh-sketch__hero {
  left: calc(var(--sketch-edge) - 110px);
  opacity: 0.3;
}

.nh-sketch--paper {
  overflow-x: clip;
  overflow-y: visible;
}

.nh-sketch--paper::before {
  content: "";
  position: absolute;
  right: calc(var(--sketch-edge) - 100px);
  width: 320px;
  height: 420px;
  z-index: -1;
  pointer-events: none;
  background-color: var(--blue-main);
  mask-image: var(--sketch-image);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.nh-sketch--shaft::before {
  width: 420px;
  height: 252px;
}

.nh-sketch--banner::before {
  height: 227px;
}

.nh-sketch--crank::before,
.nh-sketch--assembly::before {
  height: 320px;
}

.nh-sketch--flange::before {
  width: 300px;
  height: 380px;
}

.nh-sketch--left::before {
  right: auto;
  left: calc(var(--sketch-edge) - 100px);
}

.nh-sketch--right::before {
  right: calc(var(--sketch-edge) - 100px);
  left: auto;
}

.nh-projects-leadership::before {
  left: calc(var(--sketch-edge) - 220px);
}

.nh-sketch--drawing {
  --sketch-image: url("../images/decoration/mechanical-drawing.svg");
}

.nh-sketch--ring {
  --sketch-image: url("../images/decoration/bg-about-after.svg");
}

.nh-sketch--crank {
  --sketch-image: url("../images/decoration/mechanical-crank.svg");
  --sketch-opacity: 0.67;
}

.nh-sketch--assembly {
  --sketch-image: url("../images/decoration/mechanical-crank.svg");
  --sketch-opacity: 0.67;
}

.nh-sketch--banner {
  --sketch-image: url("../images/decoration/bg-bnr02.svg");
}

.nh-sketch--shaft {
  --sketch-image: url("../images/decoration/hirota-bg01.png");
}

.nh-sketch--flange {
  --sketch-image: url("../images/decoration/specification-bg01.png");
  --sketch-opacity: 0.22;
}

.nh-footer {
  position: relative;
}

.nh-footer::before {
  content: "";
  position: absolute;
  bottom: 100%;
  width: 420px;
  height: 210px;
  opacity: 1.7;
  pointer-events: none;
  background-image: url("../images/decoration/bg-bnr01.svg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
}

@media (min-width: 768px) {
  .nh-footer::before {
    left: max(-200px, calc((100% - 1688px) / 2 - 60px));
  }

  .nh-page-hero .nh-sketch__hero {
    top: -8px;
    width: 640px;
    opacity: 0.5;
  }

  .nh-home-hero .nh-sketch__hero {
    top: -20px;
    left: 16%;
    width: 800px;
    transform: translateX(-50%);
  }

  .nh-sketch--paper::before {
    top: -96px;
    opacity: var(--sketch-opacity, 1);
  }

  .nh-sketch--ring::before,
  .nh-sketch--flange::before {
    top: 12px;
  }
}

@media (max-width: 767px) {
  .nh-footer::before {
    right: -82px;
    bottom: 87%;
  }

  .nh-sketch {
    --sketch-edge: 16px;
  }

  .nh-page-hero .nh-sketch__hero {
    top: -4px;
    width: 520px;
    opacity: 0.29;
  }

  .nh-home-hero .nh-sketch__hero {
    top: -12px;
    width: 520px;
  }

  .nh-sketch--paper::before {
    top: -40px;
    opacity: calc(var(--sketch-opacity, 1) * 0.65);
  }
}

.nh-page-hero + .nh-sketch--paper::before {
  top: 16px;
}