【CSS】transformを使用してページ下部に英字のテキストを傾けて固定表示する方法(JavaScript不使用)のデモページ

body {
  min-height: 1500px;
}

.wrap {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index:-1;
  user-select: none;
  pointer-events: none;
}

.title {
  font-size: 60vw;
  color: #03262f;
  font-family: 'Playfair Display';
  font-weight: 700;
  transform: rotate(-6deg) translateX(-10vw);
  letter-spacing: -45px;
}

@media screen and (max-width:640px){
  .title {
    font-size: 450px;
    letter-spacing: -15px;
    transform: rotate(-7deg) translateX(-120px) translateY(calc(100% - 99px));
  }
}