@charset "UTF-8";

.lp_wrap .hydra_ex .inner {
  height: min(8890px, 1185.4dvw);
  height: min(8890px, 1185.4vw);
}
.lp_wrap .hydra_ex .inner.area::before {
  background: url("../image/hydra-ex-bg.jpg") 50% center/cover no-repeat;
}
.lp_wrap .hydra_ex .deco1 li {
  position: absolute;
  z-index: 1;
}
.lp_wrap .hydra_ex .deco1 li:nth-child(1) {
  top: 19.7%;
  left: 83%;
  width: 40.533%;
  animation: 2s deco1 ease-in-out alternate infinite;
}
.lp_wrap .hydra_ex .deco1 li:nth-child(2) {
  top: 21.25%;
  left: -2.8%;
  width: 46.267%;
  animation: 2s deco1 -0.9s ease-in-out alternate infinite;
}
.lp_wrap .hydra_ex .cover1 {
  position: absolute;
  top: 21.19%;
  left: 0%;
  width: 100%;
  z-index: 1;
}
.lp_wrap .hydra_ex .movie1 {
  position: absolute;
  top: 22.15%;
  left: 8.667%;
  width: 82.667%;
  z-index: 1;
  overflow: hidden;
  clip-path: circle(50% at 50% 50%);
}
.lp_wrap .hydra_ex .cycle1 {
  position: absolute;
  top: 21.82%;
  left: 4.867%;
  width: 90.267%;
  z-index: 1;
  animation: 30s cycle1 linear infinite;
}
.lp_wrap .hydra_ex .cover2 {
  position: absolute;
  top: 21.72%;
  left: 17.2%;
  width: 69.467%;
  z-index: 1;
}
.lp_wrap .hydra_ex .cont {
  position: absolute;
  top: 33.63%;
  left: 5.3%;
  width: 89.2%;
  z-index: 1;
}
.lp_wrap .hydra_ex .cont.trigger {
  transition: 0.6s;
  opacity: 0;
  transform: translateY(20%);
}
.lp_wrap .hydra_ex .cont.trigger.move {
  opacity: 1;
  transform: translateY(0);
}
.lp_wrap .hydra_ex .deco2 li {
  position: absolute;
  z-index: 1;
}
.lp_wrap .hydra_ex .deco2 li:nth-child(1) {
  top: 38.78%;
  left: -13.4%;
  width: 80.133%;
  animation: 2s deco1 ease-in-out alternate infinite;
}
.lp_wrap .hydra_ex .deco2 li:nth-child(2) {
  top: 38.67%;
  left: 60.8%;
  width: 40.133%;
  animation: 2s deco1 -0.9s ease-in-out alternate infinite;
}
.lp_wrap .hydra_ex .cover3 {
  position: absolute;
  top: 39.08%;
  left: 0%;
  width: 100%;
  z-index: 1;
}
.lp_wrap .hydra_ex .movie2 {
  position: absolute;
  top: 40.08%;
  left: 8.667%;
  width: 82.667%;
  z-index: 1;
  overflow: hidden;
  clip-path: circle(50% at 50% 50%);
}
.lp_wrap .hydra_ex .cycle2 {
  position: absolute;
  top: 39.75%;
  left: 4.867%;
  width: 90.267%;
  z-index: 1;
  animation: 30s cycle1 linear infinite;
}
.lp_wrap .hydra_ex .cover4 {
  position: absolute;
  top: 39.6%;
  left: 25.8%;
  width: 60.8%;
  z-index: 1;
}
.lp_wrap .hydra_ex .photo3 {
  position: absolute;
  top: 53.25%;
  left: 0%;
  width: 85.4666%;
  z-index: 1;
  overflow: hidden;
}
.lp_wrap .hydra_ex .photo3.trigger img {
  transition: 1s 0.3s;
  transform: scale(1);
  transform-origin: 55.5% 51%;
}
.lp_wrap .hydra_ex .photo3.trigger.move img {
  transform: scale(1.7);
}
.lp_wrap .hydra_ex .up {
  position: absolute;
  top: 53.69%;
  left: 34.3%;
  width: 28.1333%;
  z-index: 1;
  transition: 0.6s 0.6s;
  transform: scale(0);
  transform-origin: 40% 100%;
}
.lp_wrap .hydra_ex .photo3.trigger.move ~ .up {
  transform: scale(1);
}
.lp_wrap .hydra_ex .deco3 li {
  position: absolute;
  z-index: 1;
}
.lp_wrap .hydra_ex .deco3 li:nth-child(1) {
  top: 52.72%;
  left: 73.9%;
  width: 22.133%;
  animation: 2s deco1 ease-in-out alternate infinite;
}
.lp_wrap .hydra_ex .deco3 li:nth-child(2) {
  top: 55.6%;
  left: 72.2%;
  width: 43.467%;
  animation: 2s deco1 -0.9s ease-in-out alternate infinite;
}
.lp_wrap .hydra_ex .deco3 li:nth-child(3) {
  top: 61.9%;
  left: -14.7%;
  width: 43.467%;
  animation: 2s deco1 -1.5s ease-in-out alternate infinite;
}
.lp_wrap .hydra_ex .photo1 {
  position: absolute;
  top: 56.53%;
  right: 0;
  width: 84.667%;
  z-index: 1;
}
.lp_wrap .hydra_ex .att {
  position: absolute;
  top: 64.93%;
  left: 15.1%;
  width: 82.533%;
  z-index: 1;
}
.lp_wrap .hydra_ex .let li {
  position: absolute;
  z-index: 1;
}
.lp_wrap .hydra_ex .let li:nth-child(1) {
  top: 58.05%;
  left: 26.4%;
  width: 10%;
  transition: 0.6s;
  clip-path: inset(0 0 100% 0);
}
.lp_wrap .hydra_ex .let li:nth-child(2) {
  top: 58.2%;
  left: 28.5%;
  width: 7.067%;
  transition: 0.6s 0.1s;
  opacity: 0;
}
.lp_wrap .hydra_ex .let li:nth-child(3) {
  top: 58.71%;
  left: 28.5%;
  width: 7.067%;
  transition: 0.6s 0.2s;
  opacity: 0;
}
.lp_wrap .hydra_ex .let li:nth-child(4) {
  top: 59.22%;
  left: 28.5%;
  width: 7.067%;
  transition: 0.6s 0.3s;
  opacity: 0;
}
.lp_wrap .hydra_ex .let li:nth-child(5) {
  top: 59.72%;
  left: 28.5%;
  width: 7.067%;
  transition: 0.6s 0.4s;
  opacity: 0;
}
.lp_wrap .hydra_ex .let li:nth-child(6) {
  top: 60.2%;
  left: 28.5%;
  width: 7.067%;
  transition: 0.6s 0.5s;
  opacity: 0;
}
.lp_wrap .hydra_ex .let li:nth-child(7) {
  top: 60.7%;
  left: 28.5%;
  width: 7.067%;
  transition: 0.6s 0.6s;
  opacity: 0;
}
.lp_wrap .hydra_ex .let li:nth-child(8) {
  top: 61.18%;
  left: 28.5%;
  width: 7.067%;
  transition: 0.6s 0.7s;
  opacity: 0;
}
.lp_wrap .hydra_ex .let li:nth-child(9) {
  top: 58.05%;
  left: 16.5%;
  width: 10%;
  transition: 0.6s 0.5s;
  clip-path: inset(0 0 100% 0);
}
.lp_wrap .hydra_ex .let li:nth-child(10) {
  top: 58.2%;
  left: 18.5%;
  width: 8.4%;
  transition: 0.6s 0.6s;
  opacity: 0;
}
.lp_wrap .hydra_ex .let li:nth-child(11) {
  top: 58.74%;
  left: 18.5%;
  width: 8.4%;
  transition: 0.6s 0.7s;
  opacity: 0;
}
.lp_wrap .hydra_ex .let li:nth-child(12) {
  top: 59.2%;
  left: 18.5%;
  width: 8.4%;
  transition: 0.6s 0.8s;
  opacity: 0;
}
.lp_wrap .hydra_ex .let li:nth-child(13) {
  top: 59.71%;
  left: 18.5%;
  width: 8.4%;
  transition: 0.6s 0.9s;
  opacity: 0;
}
.lp_wrap .hydra_ex .let li:nth-child(14) {
  top: 60.19%;
  left: 18.5%;
  width: 8.4%;
  transition: 0.6s 1s;
  opacity: 0;
}
.lp_wrap .hydra_ex .let li:nth-child(15) {
  top: 60.71%;
  left: 18.5%;
  width: 8.4%;
  transition: 0.6s 1.1s;
  opacity: 0;
}
.lp_wrap .hydra_ex .let li:nth-child(16) {
  top: 61.21%;
  left: 18.5%;
  width: 8.4%;
  transition: 0.6s 1.2s;
  opacity: 0;
}
.lp_wrap .hydra_ex .let li:nth-child(17) {
  top: 58.05%;
  left: 6.55%;
  width: 10%;
  transition: 0.6s 1s;
  clip-path: inset(0 0 100% 0);
}
.lp_wrap .hydra_ex .let li:nth-child(18) {
  top: 58.21%;
  left: 8.5%;
  width: 7.6%;
  transition: 0.6s 1.1s;
  opacity: 0;
}
.lp_wrap .hydra_ex .let li:nth-child(19) {
  top: 58.7%;
  left: 8.5%;
  width: 7.6%;
  transition: 0.6s 1.2s;
  opacity: 0;
}
.lp_wrap .hydra_ex .let li:nth-child(20) {
  top: 59.19%;
  left: 8.5%;
  width: 7.6%;
  transition: 0.6s 1.3s;
  opacity: 0;
}
.lp_wrap .hydra_ex .let li:nth-child(21) {
  top: 59.71%;
  left: 8.5%;
  width: 7.6%;
  transition: 0.6s 1.4s;
  opacity: 0;
}
.lp_wrap .hydra_ex .let li:nth-child(22) {
  top: 60.21%;
  left: 8.5%;
  width: 7.6%;
  transition: 0.6s 1.5s;
  opacity: 0;
}
.lp_wrap .hydra_ex .let li:nth-child(23) {
  top: 60.68%;
  left: 8.5%;
  width: 7.6%;
  transition: 0.6s 1.6s;
  opacity: 0;
}
.lp_wrap .hydra_ex .let li:nth-child(24) {
  top: 61.18%;
  left: 8.5%;
  width: 7.6%;
  transition: 0.6s 1.7s;
  opacity: 0;
}
.lp_wrap .hydra_ex .let li:nth-child(25) {
  top: 61.55%;
  left: 8.5%;
  width: 7.6%;
  transition: 0.6s 1.8s;
  opacity: 0;
}
.lp_wrap .hydra_ex .let li:nth-child(26) {
  top: 62.19%;
  left: 8.5%;
  width: 7.6%;
  transition: 0.6s 1.9s;
  opacity: 0;
}
.lp_wrap .hydra_ex .let li:nth-child(27) {
  top: 62.68%;
  left: 8.5%;
  width: 7.6%;
  transition: 0.6s 2s;
  opacity: 0;
}
.lp_wrap .hydra_ex .let li:nth-child(28) {
  top: 63.24%;
  left: 8.5%;
  width: 7.6%;
  transition: 0.6s 2.1s;
  opacity: 0;
}
.lp_wrap .hydra_ex .let li.trigger.move,
.lp_wrap .hydra_ex .let li.trigger.move ~ li {
  opacity: 1;
  clip-path: inset(0);
}
.lp_wrap .hydra_ex .plant li {
  position: absolute;
  width: 50%;
  z-index: 1;
  opacity: 1;
}
.lp_wrap .hydra_ex .plant li:nth-child(1) {
  top: 68.74%;
  left: 0;
  transition: 1s;
}
.lp_wrap .hydra_ex .plant li:nth-child(2) {
  top: 68.74%;
  right: 0;
  transition: 1s 0.4s;
}
.lp_wrap .hydra_ex .plant li:nth-child(3) {
  top: 74.86%;
  left: 0;
  transition: 1s 0.8s;
}
.lp_wrap .hydra_ex .plant li:nth-child(4) {
  top: 74.86%;
  right: 0;
  transition: 1s 1.2s;
}
.lp_wrap .hydra_ex .plant li.trigger.move,
.lp_wrap .hydra_ex .plant li.trigger.move ~ li {
  opacity: 0;
}
.lp_wrap .hydra_ex .pipette {
  position: absolute;
  top: 67.1%;
  right: 0;
  width: 24%;
  z-index: 1;
}
.lp_wrap .hydra_ex .cycle3 {
  position: absolute;
  top: 85.6%;
  left: -8.1%;
  width: 116.533%;
  z-index: 1;
  overflow: hidden;
  clip-path: inset(0 0 50% 0);
}
.lp_wrap .hydra_ex .cycle3 img {
  animation: 30s cycle1 linear infinite;
}
.lp_wrap .hydra_ex .photo2 {
  position: absolute;
  top: 86.3%;
  left: 11.5%;
  width: 77.333%;
  z-index: 1;
  overflow: hidden;
}
.lp_wrap .hydra_ex .photo2.trigger img {
  transition: 0.8s 0.3s;
  transform: scale(1);
}
.lp_wrap .hydra_ex .photo2.trigger.move img {
  transform: scale(1.8);
}
.lp_wrap .hydra_ex .catch li {
  position: absolute;
  z-index: 1;
}
.lp_wrap .hydra_ex .catch li:nth-child(1) {
  top: 91.8%;
  left: 78.4%;
  width: 10%;
  transition: 0.6s;
  clip-path: inset(0 0 100% 0);
}
.lp_wrap .hydra_ex .catch li:nth-child(2) {
  top: 92%;
  left: 80.4%;
  width: 6.667%;
  transition: 0.6s 0.1s;
  opacity: 0;
}
.lp_wrap .hydra_ex .catch li:nth-child(3) {
  top: 92.59%;
  left: 80.4%;
  width: 6.667%;
  transition: 0.6s 0.2s;
  opacity: 0;
}
.lp_wrap .hydra_ex .catch li:nth-child(4) {
  top: 93.17%;
  left: 80.4%;
  width: 6.667%;
  transition: 0.6s 0.3s;
  opacity: 0;
}
.lp_wrap .hydra_ex .catch li:nth-child(5) {
  top: 93.77%;
  left: 80.4%;
  width: 6.667%;
  transition: 0.6s 0.4s;
  opacity: 0;
}
.lp_wrap .hydra_ex .catch li:nth-child(6) {
  top: 94.32%;
  left: 80.4%;
  width: 6.667%;
  transition: 0.6s 0.5s;
  opacity: 0;
}
.lp_wrap .hydra_ex .catch li:nth-child(7) {
  top: 91.8%;
  left: 68.6%;
  width: 10%;
  transition: 0.6s 0.3s;
  clip-path: inset(0 0 100% 0);
}
.lp_wrap .hydra_ex .catch li:nth-child(8) {
  top: 92%;
  left: 70.4%;
  width: 6.667%;
  transition: 0.6s 0.4s;
  opacity: 0;
}
.lp_wrap .hydra_ex .catch li:nth-child(9) {
  top: 92.6%;
  left: 70.4%;
  width: 6.667%;
  transition: 0.6s 0.5s;
  opacity: 0;
}
.lp_wrap .hydra_ex .catch li:nth-child(10) {
  top: 93.15%;
  left: 70.4%;
  width: 6.667%;
  transition: 0.6s 0.6s;
  opacity: 0;
}
.lp_wrap .hydra_ex .catch li:nth-child(11) {
  top: 93.76%;
  left: 70.4%;
  width: 6.667%;
  transition: 0.6s 0.7s;
  opacity: 0;
}
.lp_wrap .hydra_ex .catch li:nth-child(12) {
  top: 91.8%;
  left: 58.8%;
  width: 10%;
  transition: 0.6s 0.6s;
  clip-path: inset(0 0 100% 0);
}
.lp_wrap .hydra_ex .catch li:nth-child(13) {
  top: 91.97%;
  left: 60.9%;
  width: 6%;
  transition: 0.6s 0.7s;
  opacity: 0;
}
.lp_wrap .hydra_ex .catch li:nth-child(14) {
  top: 92.56%;
  left: 60.9%;
  width: 6%;
  transition: 0.6s 0.8s;
  opacity: 0;
}
.lp_wrap .hydra_ex .catch li:nth-child(15) {
  top: 93.15%;
  left: 60.9%;
  width: 6%;
  transition: 0.6s 0.9s;
  opacity: 0;
}
.lp_wrap .hydra_ex .catch li.trigger.move,
.lp_wrap .hydra_ex .catch li.trigger.move ~ li {
  clip-path: inset(0);
  opacity: 1;
}
.lp_wrap .hydra_ex .copy {
  position: absolute;
  top: 91.92%;
  left: 12.1%;
  width: 38.267%;
  z-index: 1;
}