img {
  width: 100%;
  max-width: 100%;
}

#fv {
  max-width: 800px;
  margin: 0 auto;
}

.fv__wrapper,
.use {
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  max-width: 800px;
}

.fv__wrapper {
  background-color: #f268d2;
  height: 100%;
}

.sec__part {
  position: absolute;
}

img.fv__part-top {
  opacity: 0;
  min-width: 170%;
  top: -25%;
  left: -45%;
}

.fv__part-foot {
  bottom: 0;
  z-index: 7;
}

.fv__part-front {
  opacity: 0;
  z-index: 10;
  width: 100%;
  top: 10%;
}

.fv__part-rainbow {
  z-index: 4;
  min-width: 150%;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
}

.fv__part-people {
  width: 75%;
  z-index: 5;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
}

.fv__part-scroll {
  opacity: 0;
  width: 40%;
  z-index: 8;
  left: 50%;
  bottom: 10%;
  transform: translateX(-50%);
  animation-name: updown;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: .5s;
}

@keyframes updown {
  0% {
      transform: translate(-50%,0px);
  }

  100% {
      transform: translate(-50%,-20px)
  }
}


.fv__part-cc {
  top: 5%;
  z-index: 8;
  width: 90%;
  left: 50%;
}


.fv__part-dip {
  opacity: 0;
  width: 55%;
  top: 50%;
  right: -10%;
}

/* use */

.use {
  text-align: center;
}

.use__part-circle {
  width: 60%;
  top: 0;
  left: 5.6%;
  z-index: 11;
}


.use__part-number {
  width: 21%;
  left: 7.6%;
  top: 5.6%;
}

.use__part-women01 {
  width: 34%;
  left: 50.6%;
  top: 12.1%;
}

.use__part-women02 {
  width: 70%;
  top: 27.5%;
  left: 50%;
  transform: translateX(-50%);
}

.use__part-cc {
  width: 78%;
  top: 65.5%;
  left: 50%;
  transform: translateX(-50%);
}

.use__box {
  color: #9D9D9D;
  padding: 43% 0;
  font-size: min(7.6vw,65px);
}

.use__box {
  font-size: min(5.4vw,45px);
}

.use__part-icon {
  width: 27%;
  padding: 6.1% 0;
  text-align: center;
}

.use__part-border {
  min-width: 126%;
  top: 17.3%;
  left: -23.9%;
}

.use__part-women03 {
  width: 103%;
  left: 32.6%;
  top: -5%;
  animation-name: updown2;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: .2s;
}


@keyframes updown2 {
  0% {
      transform: translate(0%,0px);
  }

  100% {
      transform: translate(0%,-5px)
  }
}


.use__part-intro {
  width: 55%;
  left: 5%;
  top: 14.8%;
}

.use__part-new {
  top: 50%;
}

.use__part-button {
  width: 78.2%;
  top: 78.5%;
  left: 50%;
  transform: translateX(-50%);
}

.use__part-footer {
  z-index: -1;
  bottom: 0;

}

#fv {
  position: relative;
  overflow: hidden;
}

.fv__wrapper {
  position: relative;
}

.fv__part-people,
.fv__part-cc,
.fv__part-dip,
.fv__part-front,
.fv__part-top {
  bottom: 0;
  opacity: 0;
  transition: transform 0.3s ease-in-out, opacity 0.5s ease-in-out;
}

.fv__part-dip{
  transition: transform 0.8s ease-in-out, opacity 0.5s ease-in-out;
}


@keyframes fadeInDown {
  0% {
      opacity: 0;
      transform: translate3d(-50%,-100%,0)
  }

  to {
      opacity: 1;
      transform: translate3d(-50%,0,0);
  }
}

@keyframes fadeInUp {
  0% {
      opacity: 0;
      transform: translate3d(-50%,100%,0)
  }

  to {
      opacity: 1;
      transform: translate3d(-50%,0,0);
  }
}


.fadeInUp2 {
  animation-name: fadeInUp2
}

@keyframes fadeInUp2 {
  0% {
      opacity: 0;
      transform: translate3d(0%,100%,0)
  }

  to {
      opacity: 1;
      transform: translate3d(0%,0,0);
  }
}

@keyframes fadeInLeft {
  0% {
      opacity: 0;
      transform: translate3d(-100%,0,0)
  }

  to {
      opacity: 1;
      transform: translate3d(0%,0,0)
  }
}