.p-mv {
  position: relative;
  padding-top: 100%;
  overflow: hidden;
  background-image: url('../images/sp/kv_bg.png');
  background-position: 50% 50%;
  background-size: cover;
}

.p-mv::before {
  position: absolute;
  bottom: -15px;
  left: 0;
  z-index: 2;
  width: 100%;
  padding-top: 58%;
  pointer-events: none;
  content: '';
  background-image: url('../images/sp/kv_milk.png');
  background-size: cover;
}

.p-mv__container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.p-mv__container::before,
.p-mv__container::after {
  position: absolute;
  content: '';
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0;
}

.p-mv__container::before {
  top: 0;
  left: 0;
  width: 90.6667%;
  height: 32.2667%;
  background-image: url('../images/sp/kv_sidebg_left.png');
}

.p-mv__container::after {
  right: 0;
  bottom: 0;
  width: 54%;
  height: 47.7333%;
  background-image: url('../images/sp/kv_sidebg_right.png');
}

.p-mv.is-active .p-mv__container::before {
  animation: paint-to-bottom 1s cubic-bezier(.39, .575, .565, 1) 0.8s forwards;
}

.p-mv.is-active .p-mv__container::after {
  animation: paint-to-upper 1s cubic-bezier(.39, .575, .565, 1) 0.8s forwards;
}

.p-mv__leaf-left01,
.p-mv__leaf-left02,
.p-mv__leaf-right01,
.p-mv__leaf-right02 {
  position: absolute;
  z-index: 1;
  opacity: 0;
  transition: all 1.2s cubic-bezier(0.35, 0, 0.52, 1); 
}

.p-mv.is-active .p-mv__leaf-left01,
.p-mv.is-active .p-mv__leaf-left02,
.p-mv.is-active .p-mv__leaf-right01,
.p-mv.is-active .p-mv__leaf-right02 {
  opacity: 1;
  transition-delay: 1.3s;
  transform: rotate3d(0, 0, 0, 0) translate(0, 0);
}

.p-mv__leaf-left01 {
  top: -18.1333333%;
  left: 0;
  width: 20%;
  transform: rotate3d(0, 0, 1, 30deg) translate(0, 80%);
}

.p-mv__leaf-left02 {
  top: 4.53333333%;
  left: 0;
  width: 17.0667%;
  transform: rotate3d(0, 0, 1, -20deg) translate(-80%, 0);
}

.p-mv__leaf-right01 {
  right: 0;
  bottom: 8.53333333%;
  width: 17.0666666%;
  transform: rotate3d(0, 0, 1, -20deg) translate(0, 100%);
}

.p-mv__leaf-right02 {
  right: 2%;
  bottom: -22.1333333%;
  width: 31.2%;
  transform: rotate3d(0, 0, 1, 20deg) translate(0, 80%);
}

.p-mv .p-mv__tokuhou,
.p-mv .p-mv__ribbon,
.p-mv .p-mv__title {
  z-index: 3;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(.39, .575, .565, 1),
  transform 0.6s cubic-bezier(.39, .575, .565, 1);
  transition-delay: 2.5s;
  transform: translateY(30px);
}

.p-mv.is-active .p-mv__tokuhou,
.p-mv.is-active .p-mv__ribbon,
.p-mv.is-active .p-mv__title {
  opacity: 1;
  transform: translateY(0);
}

.p-mv__tokuhou {
  position: absolute;
  top: 19.2%;
  left: 1.0666666%;
  width: 33.33333333%;
}

.p-mv__ribbon {
  position: absolute;
  top: 20.5333333%;
  right: 1.0666666%;
  width: 70.93333333%;
}

.p-mv__title {
  position: absolute;
  top: 37.33333333%;
  right: 1.6%;
  width: 67.73333333%;
}

.p-mv__tokuho,
.p-mv__soybeans01,
.p-mv__soybeans02 {
  position: absolute;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(.39, .575, .565, 1),
  transform 0.6s cubic-bezier(.39, .575, .565, 1);
  transform: translateY(30px);
}

.p-mv__tokuho {
  bottom: 14.9333333%;
  left: 35.3333333333%;
  width: 19.7333%;
  transition-delay: 3.2s;
}

.p-mv__soybeans01,
.p-mv__soybeans02 {
  transition-delay: 3s;
}

.p-mv__soybeans01 {
  bottom: 33.33333333%;
  left: 33.7333333333%;
  width: 5.4666666666%;
}

.p-mv__soybeans02 {
  top: 9.7333333333%;
  right: 2.93333333%;
  width: 10.8%;
}

.p-mv.is-active .p-mv__tokuho,
.p-mv.is-active .p-mv__soybeans01,
.p-mv.is-active .p-mv__soybeans02 {
  opacity: 1;
  transform: rotate3d(0, 0, 0, 0) translate(0, 0);
}

@media screen and (min-width: 768px) {
  .p-mv {
    padding-top: 43.3333%;
    background-image: url('../images/pc/kv_bg.jpg');
  }

  .p-mv::before {
    padding-top: 28.999999999%;
    background-image: url('../images/pc/kv_milk.png');
  }

  .p-mv__container::before {
    width: 59.5333%;
    height: 51.07692307%;
    background-image: url('../images/pc/kv_sidebg_left.png');
  }
  
  .p-mv__container::after {
    width: 33.866666666%;
    height: 69.8462%;
    background-image: url('../images/pc/kv_sidebg_right.png');
  }

  .p-mv__leaf-left01 {
    top: -15.88785046%;
    width: 16.933333333%;
  }
  
  .p-mv__leaf-left02 {
    top: 14.3302180%;
    width: 15.066666666%;
  }
  
  .p-mv__leaf-right01 {
    bottom: 28.66043613%;
    width: 10.8%;
  }
  
  .p-mv__leaf-right02 {
    right: 2.199999999%;
    bottom: -10.2803738%;
    width: 17.8667%;
  }

  .p-mv__tokuhou {
    top: auto;
    bottom: 7.00934579%;
    left: 16%;
    width: 18.8%;
  }

  .p-mv__ribbon {
    top: 13.2398753%;
    right: 13.666666666%;
    width: 45%;
  }

  .p-mv__title {
    top: 35.82554517%;
    right: 14.2%;
    width: 43.6%;
  }

  .p-mv__tokuho {
    bottom: 11.6923076%;
    left: 34.733333333%;
    width: 11.266666666%;
  }

  .p-mv__soybeans01 {
    bottom: 42.61538461%;
    right: 12.133333333%;
    left: auto;
    width: 4.6%;
  }
  
  .p-mv__soybeans02 {
    top: 30.15384615%;
    right: auto;
    left: 35.466666666%;
    width: 5.266666666%;
  }
}

@keyframes paint-to-upper {
  0% {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    opacity: 0;
  }

  to {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity: 1;
  }
}

@keyframes paint-to-bottom {
  0% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    opacity: 0;
  }

  to {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity: 1;
  }
}