.top2 {
  background-color: #00001d;
}

.top2 .nav__delivery {
  top: 60vw;
}
.wrapper {
  background: url(../images/top2/main-bg-sp.jpg) no-repeat;
  background-size: 100% auto;
  overflow: hidden;
  position: relative;
}
.main__visual {
  padding-top: 135.69444%;
  position: relative;
}
.main__visual img {
  position: absolute;
  -webkit-transform-origin: 50% 80%;
  transform-origin: 50% 80%;
  top: 0;
  left: 0;
  width: 100%;
}

.main__text {
  margin-top: -23.05556vw;
  padding: 0 3.33333vw;
}
.main__title {
  position: relative;
  text-align: center;
}

.main__tv {
  padding: 0 6.66667vw 5.55556vw;
  text-align: center;
}
.anim-item.hide .anim-left,
.anim-item.hide.anim-left,
.op-item.hide .anim-left,
.op-item.hide.anim-left {
  opacity: 0;
  -webkit-transform: translateY(-20%);
  transform: translateY(-20%);
  visibility: hidden;
  transition:all 0s ease 0s!important;
}

.anim-item.hide .anim-right,
.anim-item.hide.anim-right,
.op-item.hide .anim-right,
.op-item.hide.anim-right {
  opacity: 0;
  -webkit-transform: translateY(-10%);
  transform: translateY(-10%);
  visibility: hidden;
  transition:all 0s ease 0s!important;
}

.anim-item.hide .anim-center,
.anim-item.hide.anim-center,
.op-item.hide .anim-center,
.op-item.hide.anim-center {
  opacity: 0;
  -webkit-transform: translateY(20%);
  transform: translateY(20%);
  visibility: hidden;
  transition:all 0s ease 0s!important;
}

.anim-item.hide .anim-main,
.anim-item.hide.anim-main,
.op-item.hide .anim-main,
.op-item.hide.anim-main {
  opacity: 0;
  visibility: hidden;
  transition:all 0s ease 0s!important;
}

.anim-item.hide .anim-main2,
.anim-item.hide.anim-main2,
.op-item.hide .anim-main2,
.op-item.hide.anim-main2 {
  opacity: 1;
  visibility: visible;
  width: 100%;
  height: 100%;
  transition:all 0s ease 0s!important;
}

.anim-item .anim-left,
.anim-item.anim-left,
.op-item .anim-left,
.op-item.anim-left {
  opacity: 1;
  -webkit-transition: opacity .5s ease-out .1s, -webkit-transform 2s cubic-bezier(0, 1, 0, 1) .1s;
  transition: opacity .5s ease-out .1s, -webkit-transform 2s cubic-bezier(0, 1, 0, 1) .1s;
  transition: opacity .5s ease-out .1s, transform 2s cubic-bezier(0, 1, 0, 1) .1s;
  transition: opacity .5s ease-out .1s, transform 2s cubic-bezier(0, 1, 0, 1) .1s, -webkit-transform 2s cubic-bezier(0, 1, 0, 1) .1s;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  visibility: visible;

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: opacity, transform;
}

.anim-item .anim-right,
.anim-item.anim-right,
.op-item .anim-right,
.op-item.anim-right {
  opacity: 1;
  -webkit-transition: opacity .5s ease-out .1s, -webkit-transform 2s cubic-bezier(0, 1, 0, 1) .1s;
  transition: opacity .5s ease-out .1s, -webkit-transform 2s cubic-bezier(0, 1, 0, 1) .1s;
  transition: opacity .5s ease-out .1s, transform 2s cubic-bezier(0, 1, 0, 1) .1s;
  transition: opacity .5s ease-out .1s, transform 2s cubic-bezier(0, 1, 0, 1) .1s, -webkit-transform 2s cubic-bezier(0, 1, 0, 1) .1s;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  visibility: visible;

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: opacity, transform;
}

.anim-item .anim-center,
.anim-item.anim-center,
.op-item .anim-center,
.op-item.anim-center {
  opacity: 1;
  -webkit-transition: opacity 1s ease .1s, -webkit-transform 1s cubic-bezier(0, 1, 0, 1) .1s;
  transition: opacity 1s ease .1s, -webkit-transform 1s cubic-bezier(0, 1, 0, 1) .1s;
  transition: opacity 1s ease .1s, transform 1s cubic-bezier(0, 1, 0, 1) .1s;
  transition: opacity 1s ease .1s, transform 1s cubic-bezier(0, 1, 0, 1) .1s, -webkit-transform 1s cubic-bezier(0, 1, 0, 1) .1s;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  visibility: visible;

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: opacity, transform;
}

.anim-item .anim-main,
.anim-item.anim-main,
.op-item .anim-main,
.op-item.anim-main {
  opacity: 1;
  -webkit-transition: opacity 2s ease-out;
  transition: opacity 2s ease-out;
  visibility: visible;

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: opacity;
}

@media only screen and (min-width: 960px) {
  .top2 .nav__delivery {
    top: 50vw;
  }
  .wrapper {
    background: url(../images/top2/main-bg.jpg) center top no-repeat;
  }
  .main__visual {
    margin-left: calc((100% - 1440px) / 2);
    padding-top: 0;
    width: 1440px;
    height: 1120px;
  }
  .main__text {
    margin: -480px auto 0;
    padding: 0;
    width: 844px;
  }
  .main__tv {
    margin: 0 auto;
    padding: 16px 0 160px;
    width: 600px;
  }
}

@media only screen and (min-width: 1440px) {
  .top2 .nav__delivery {
    top: 10vw;
  }
  .main__visual {
    margin: 0 auto;
  }
}