* {
  padding: 0;
  margin: 0;
}

.main__0 {
  display: block;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.main__0__wrap {
  max-width: 800px;
  margin: 0 auto;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: main_0_wrap 1s ease-in-out;
  animation: main_0_wrap 1.2s cubic-bezier(0, 0, 0, 1);
}
@keyframes main_0_wrap {
  0% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}
.main__0__wrap__Hline {
  display: block;
  width: 400%;
  height: 30px;
  content: "";
  position: absolute;
  transition: 0.3s;
}
.main__0__wrap__Hline_1 {
  background: rgb(5, 172, 63);
  transform: rotate(-8deg) translateY(-50%);
  animation: Hline_1 0.5s linear;
  z-index: 1;
}
@keyframes Hline_1 {
  0% {
    transform: rotate(-8deg) translateY(-50%) translateX(100%);
  }
  100% {
    transform: rotate(-8deg) translateY(-50%);
  }
}
.main__0__wrap__Hline_3 {
  background: #78a7d3;
  transform: rotate(-8deg) translateY(-300%);
  animation: Hline_3 1.2s linear;
  z-index: 3;
}
@keyframes Hline_3 {
  0% {
    transform: rotate(-8deg) translateY(-300%) translateX(-100%);
  }
  10% {
    transform: rotate(-8deg) translateY(-300%) translateX(-100%);
  }
  100% {
    transform: rotate(-8deg) translateY(-300%);
  }
}
.main__0__wrap__Hline_4 {
  background: none;
  transform: rotate(-8deg) translateY(-300%);
  z-index: 4;
}
.main__0__wrap__Hline_4__txt {
  position: absolute;
  width: 100%;
  top: -23vw;
  text-align: center;
  overflow: hidden;
}
.main__0__wrap__Hline_4__txt_p {
  line-height: 13vw;
  font-family: serif;
  font-size: 2.8vw;
  letter-spacing: 10.2vw;
  padding-left: 10vw;
  transition: 0.3s;
  font-weight: 500;
}
.main__0__wrap__Hline_4__txt_T {
  margin: 0 auto;
  width: 78vw;
  position: relative;
  overflow: hidden;
}
.main__0__wrap__Hline_4__txt_T_p {
  transition: 0.3s;
  color: transparent;
  line-height: 10vw;
  animation: H4_p 1s;
  color: black;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.main__0__wrap__Hline_4__txt_T_p span {
  font-family: serif;
  font-size: 10vw;
  color: black;
  font-weight: 500;
}
.main__0__wrap__Hline_4__txt_T_p_0 {
  opacity: 0;
  animation: M4_s 0.6s ease 0.6s forwards;
}
.main__0__wrap__Hline_4__txt_T_p_1 {
  opacity: 0;
  animation: M4_s 0.6s ease 0.66s forwards;
}
.main__0__wrap__Hline_4__txt_T_p_2 {
  opacity: 0;
  animation: M4_s 0.6s ease 0.72s forwards;
}
.main__0__wrap__Hline_4__txt_T_p_3 {
  opacity: 0;
  animation: M4_s 0.6s ease 0.78s forwards;
}
.main__0__wrap__Hline_4__txt_T_p_4 {
  opacity: 0;
  animation: M4_s 0.6s ease 0.84s forwards;
}
.main__0__wrap__Hline_4__txt_T_p_5 {
  opacity: 0;
  animation: M4_s 0.6s ease 0.9s forwards;
}
@keyframes M4_s {
  0% {
    transform: translateY(100%);
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes H4_p {
  0% {
    color: transparent;
  }
  50% {
    color: transparent;
  }
  74% {
    color: transparent;
  }
  75% {
    color: black;
  }
  100% {
    color: black;
  }
}
.main__0__wrap__Hline_5 {
  background: none;
  transform: rotate(-8deg) translateY(-50%);
  z-index: 5;
}
.main__0__wrap__Hline_5__txt {
  position: absolute;
  width: 100%;
  top: -3vw;
  text-align: center;
  overflow: hidden;
}
.main__0__wrap__Hline_5__txt_p {
  transition: 0.3s;
  line-height: 3vw;
  font-family: serif;
  font-size: 3vw;
  padding-right: 17vw;
  z-index: 1000;
  font-style: italic;
  animation: Hline_5 1s ease;
  letter-spacing: 0.3vw;
  font-weight: 500;
}
@keyframes Hline_5 {
  0% {
    letter-spacing: 6vw;
  }
  100% {
    letter-spacing: 0.3vw;
  }
}
.main__0__wrap__Vline {
  display: block;
  width: 30px;
  height: 105vh;
  position: absolute;
  background: red;
  transform: rotate(10deg);
  transition: 0.3s;
}
.main__0__wrap__Vline_0 {
  background: #233b6c;
  right: 10%;
  animation: Vline_0 0.3s linear;
  z-index: 0;
}
@keyframes Vline_0 {
  0% {
    transform: rotate(10deg) translateY(100%);
  }
  100% {
    transform: rotate(10deg);
  }
}
.main__0__wrap__Vline_2 {
  background: yellow;
  right: calc(10% + 80px);
  animation: Vline_2 0.6s linear;
  z-index: 2;
}
@keyframes Vline_2 {
  0% {
    transform: rotate(10deg) translateY(-100%);
  }
  50% {
    transform: rotate(10deg) translateY(-100%);
  }
  100% {
    transform: rotate(10deg);
  }
}
.main__0__wrap__Vline > div {
  position: absolute;
  width: 100%;
  top: calc(-26vw + 10px);
  text-align: center;
}
.main__0__wrap__Vline > div p:first-child {
  line-height: 13vw;
  font-family: serif;
  font-size: 3vw;
  letter-spacing: 10vw;
  padding-left: 10vw;
}
.main__0__wrap__Vline > div p:last-child {
  line-height: 13vw;
  font-family: serif;
  font-size: 10vw;
  letter-spacing: 3vw;
}

.js-main__0__wrap {
  align-items: flex-start;
}
.js-main__0__wrap__Hline_1 {
  transform: rotate(-8deg) translateY(-50%) scale(1, 0);
}
.js-main__0__wrap__Hline_3 {
  transform: rotate(-8deg) translateY(-300%) scale(1, 0);
}
.js-main__0__wrap__Hline_4__txt_T_p, .js-main__0__wrap__Hline_4__txt_p {
  transform: translateY(-100%);
}
.js-main__0__wrap__Hline_5__txt_p {
  transform: translateY(calc(100% + 1px));
}
.js-main__0__wrap__Vline_0 {
  transform: rotate(10deg) scale(0, 1);
}
.js-main__0__wrap__Vline_2 {
  transform: rotate(10deg) scale(0, 1);
}

@media screen and (min-width: 800px) {
  .main__0__wrap__Hline_4__txt {
    top: -184px;
  }
  .main__0__wrap__Hline_4__txt_p {
    font-size: 24px;
    line-height: 103px;
    letter-spacing: 80px;
    padding-left: 80px;
  }
  .main__0__wrap__Hline_4__txt_T {
    width: 624px;
  }
  .main__0__wrap__Hline_4__txt_T_p {
    font-size: 80px;
    line-height: 80px;
    letter-spacing: 24px;
  }
  .main__0__wrap__Hline_4__txt_T_p span {
    font-size: 80px;
    line-height: 80px;
  }
  .main__0__wrap__Hline_5__txt {
    top: -24px;
  }
  .main__0__wrap__Hline_5__txt_p {
    font-size: 24px;
    line-height: 24px;
    padding-right: 136px;
    letter-spacing: 2.4px;
  }
  @keyframes Hline_5 {
    0% {
      letter-spacing: 48px;
    }
    100% {
      letter-spacing: 2.4px;
    }
  }
}