body {
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  overflow-x: hidden;
  width: 100vw;
}
.title-content {
  width: 100vw;
  text-align: center;
}
.title-img {
  margin: 0 auto;
  width: 90%;
}

.about-container {
  position: relative;
  font-size: 1rem;
  line-height: 3rem;
  font-weight: bold;
}

.warp__placeholder {
  position: absolute;
  color: transparent;
  font-size: 0.1px;
}
.how-to-container {
  margin-top: 200px;
  background-color: #a62c20;
  padding-bottom: 100px !important;
}
.how-to-top-curve {
  position: absolute;
  top: -100px;
  left: 0px;
  width: 100%;
  height: 40px;
}
.how-to-top-curve svg {
  height: 100px;
  position: relative;
  top: 1px;
}

.example-bg {
  top: 300px;
  left: 0px;
  width: 100%;
  height: calc(100% - 500px);
  background-color: #efefef;
}

.list-group-item {
  background-color: transparent !important;
  border: none !important;
}

.warp {
  display: block;
  position: relative;
  width: 460px;
  height: 42px;
  font: normal 51px/1 "Yusei Magic";

  /* margin: 0 auto; */
}

[class*="warp__"] {
  display: block;
  position: absolute;
}

.warp__0 {
  transform-origin: 50% 48px;
  transform: translate(11.7155px, -30.3053px) rotate(-0.325827rad);
}

.warp__1 {
  transform-origin: 50% 48px;
  transform: translate(62.238px, -42.8084px) rotate(-0.165555rad);
}

.warp__2 {
  transform-origin: 50% 48px;
  transform: translate(113.0586px, -47.6237px) rotate(-0.043498rad);
}

.warp__3 {
  transform-origin: 50% 48px;
  transform: translate(155.5251px, -46.8941px) rotate(0.074842rad);
}

.warp__4 {
  transform-origin: 50% 48px;
  transform: translate(206.2065px, -40.8557px) rotate(0.196147rad);
}

.warp__5 {
  transform-origin: 50% 48px;
  transform: translate(244.3838px, -28.8px) rotate(0.342038rad);
}

img {
  transition: filter 0.4s ease;
}

.loading {
  filter: grayscale(100%);
}