@charset "UTF-8";

.lp_wrap .secret1 {
}
.lp_wrap .secret1 .item {
  position: absolute;
  top: 6.1%;
  left: 5%;
  width: min(calc(676 / 750 * 100vw) ,676px);
}
.lp_wrap .secret1 .item img {
  -o-object-fit: cover;
  object-fit: cover;
}
.lp_wrap .secret1 .item img.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: brightness(150%);
}
.lp_wrap .secret1 .item.trigger {
  opacity: 0;
  -webkit-mask-image: -webkit-gradient(linear,left top,left bottom,from(#000),color-stop(33%,#000),color-stop(66%,rgba(0,0,0,0)),to(rgba(0,0,0,0)));
  -webkit-mask-image: linear-gradient(to bottom,#000,#000 33%,rgba(0,0,0,0) 66%,rgba(0,0,0,0) 100%);
  mask-image: -webkit-gradient(linear,left top,left bottom,from(#000),color-stop(33%,#000),color-stop(66%,rgba(0,0,0,0)),to(rgba(0,0,0,0)));
  mask-image: linear-gradient(to bottom,#000,#000 33%,rgba(0,0,0,0) 66%,rgba(0,0,0,0) 100%);
  -webkit-mask-size: 100% 300%;
  mask-size: 100% 300%;
  -webkit-mask-position: 0 100%;
  mask-position: 0 100%;
  transition: 2s 0.4s;
}
.lp_wrap .secret1 .item.trigger.move {
  opacity: 1;
  -webkit-mask-position: 0% 0%;
  mask-position: 0% 0%;
  -webkit-transition: -webkit-mask-position;
  transition: -webkit-mask-position;
  transition: mask-position;
  transition: mask-position,-webkit-mask-position;
  -webkit-transition-duration: 1.5s;
  transition-duration: 1.5s;
  -webkit-transition-timing-function: cubic-bezier(0.215,0.61,0.355,1);
  transition-timing-function: cubic-bezier(0.215,0.61,0.355,1);
  will-change: mask-position;
  -webkit-transform: scale(1.001);
  transform: scale(1.001)
}
.lp_wrap .secret1 .item.trigger img.overlay {
  transition: 1.2s 0.4s;
  opacity: 1;
}
.lp_wrap .secret1 .item.trigger.move img.overlay {
  opacity: 0;
}
.lp_wrap .secret1 .att {
  position: absolute;
  top: 22.85%;
  left: 44%;
  width: 49.467%;
}
.lp_wrap .secret1 .num {
  position: absolute;
  top: 18.8%;
  left: 41.1%;
  width: 17.333%;
}
.lp_wrap .secret1 .movie {
  position: absolute;
  top: 27.2%;
  left: 6.666%;
  width: 86.667%;
}
.lp_wrap .secret1 .com1 {
  position: absolute;
  top: 41%;
  left: 0%;
  width: 100%;
}
.lp_wrap .secret1 .com1.trigger {
  transition: 0.8s;
  transform: translateX(101%);
}
.lp_wrap .secret1 .com1.trigger.move {
  transform: translateX(0);
}
.lp_wrap .secret1 .com2 {
  position: absolute;
  top: 49.35%;
  left: 0;
  width: 93.333%;
}
.lp_wrap .secret1 .com2.trigger {
  transition: 0.8s;
  transform: translateX(-101%);
}
.lp_wrap .secret1 .com2.trigger.move {
  transform: translateX(0);
}
.lp_wrap .secret1 .com3 {
  position: absolute;
  top: 65.5%;
  right: 0;
  width: 94.133%;
}
.lp_wrap .secret1 .com3_on {
  position: absolute;
  top: 65.4%;
  right: 0;
  width: min(calc(674 / 750 * 100vw) ,674px);
}
.lp_wrap .secret1 .com3.trigger,
.lp_wrap .secret1 .com3_on.trigger {
  transition: 0.8s;
  transform: translateX(101%);
}
.lp_wrap .secret1 .com3.trigger.move,
.lp_wrap .secret1 .com3_on.trigger.move {
  transform: translateX(0);
}

.lp_wrap .secret1 video.brush_video {
  position: absolute;
  bottom: 2.5%;
  left: 12%;
  width: min(calc(403 / 750 * 100vw) ,403px);
  height: min(calc(290 / 750 * 100vw) ,290px);
  object-fit: cover;
}

.lp_wrap .secret1.secret1_normal {
  margin-top: -62%;
}
.lp_wrap .secret1.secret1_normal .item {
  position: absolute;
  top: 7.93%;
  left: 0%;
  width: 100%;
  width: min(calc(750 / 750 * 100vw) ,750px);
}
.lp_wrap .secret1.secret1_normal .num {
  top: 24%;
}
.lp_wrap .secret1.secret1_normal .movie {
  top: 31.8%;
}
.lp_wrap .secret1.secret1_normal .com1 {
  top: 44.56%;
}
.lp_wrap .secret1.secret1_normal .com2 {
  top: 52.3%;
}
.lp_wrap .secret1.secret1_normal .com3 {
  top: 67.3%;
}
.lp_wrap .secret1.secret1_normal .com3_on {
  top: 67.2%;
}
.lp_wrap .secret1.secret1_normal video.brush_video {
  bottom: 3.12%;

}