@charset "utf-8";

/* sec03 */

#sec03 {
  position: relative;
  top: 810px;
}

#sec03 .lp-inner {
  --lp-inner-top-transparent: 490px;
}

@media (max-width: 1280px) and (min-width: 802px) {
  #sec03 {
    top: calc(810 / 1280 * 100vw - (1280px - 100vw) * 0.1);
  }
  #sec03 .lp-inner {
    --lp-inner-top-transparent: calc(490 / 1280 * 100vw);
  }
}

@media (max-width: 801px) {
  #sec03 {
    top: calc(224 / 440 * 100vw - (440px - 100vw) * 0.1);
  }
  #sec03 .lp-inner {
    --lp-inner-top-transparent: calc(90 / 440 * 100vw);
  }  
  #sec03.is-expanded .lp-inner {
    --lp-inner-top-transparent: calc(160 / 440 * 100vw);
  }  
}

/* Hearts */
#sec03 .lp-inner {
  position: relative;
}

.sec03-hearts {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: visible;
}

.sec03-heart {
  position: absolute;
  height: auto;
  will-change: transform;
}

/* PC */
.sec03-heart--01 {
  top: 3.4%;
  left: 70%;
  width: 105px !important;
}
.sec03-heart--02 {
  top: 68%;
  left: 68.7%;
  width: 83px !important;
  transform: rotate(19.647deg);
}
.sec03-heart--03 {
  top: 27.1%;
  left: 55%;
  width: 65px !important;
  transform: rotate(-23deg);
}
.sec03-heart--04 {
  top: 56.1%;
  left: 5%;
  width: 145px !important;
  transform: rotate(-25.292deg);
}
.sec03-heart--05 {
  top: 7%;
  left: 21%;
  width: 86px !important;
}
.sec03-heart--06 {
  top: 61.3%;
  left: 77%;
  width: 50.3px !important;
  transform: rotate(11deg);
}
.sec03-heart--07 {
  top: 69%;
  left: 18.4%;
  width: 78px !important;
  transform: rotate(-3deg);
}

@media (max-width: 1280px) and (min-width: 802px) {
  .sec03-heart--01 { width: calc(105 / 1280 * 100vw) !important; }
  .sec03-heart--02 { width: calc(83 / 1280 * 100vw) !important; }
  .sec03-heart--03 { width: calc(65 / 1280 * 100vw) !important; }
  .sec03-heart--04 { width: calc(145 / 1280 * 100vw) !important; }
  .sec03-heart--05 { width: calc(86 / 1280 * 100vw) !important; }
  .sec03-heart--06 { width: calc(50.3 / 1280 * 100vw) !important; }
  .sec03-heart--07 { width: calc(78 / 1280 * 100vw) !important; }
}

/* SP */
@media (max-width: 801px) {
  .sec03-heart--01 {
    top: 8.4%;
    left: 75%;
    width: calc(48 / 440 * 100vw) !important;
  }
  .sec03-heart--02 {
    top: 84%;
    left: 74%;
    width: calc(98 / 440 * 100vw) !important;
  }
  .sec03-heart--03 {
    top: 32%;
    left: 49%;
    width: calc(35 / 440 * 100vw) !important;
  }
  .sec03-heart--04 {
    top: 58.2%;
    left: -4%;
    width: calc(60 / 440 * 100vw) !important;
  }
  .sec03-heart--05 {
    top: 11%;
    left: 9%;
    width: calc(40 / 440 * 100vw) !important;
  }
  .sec03-heart--06 {
    top: 84.5%;
    left: 8%;
    width: calc(42 / 440 * 100vw) !important;
  }
  .sec03-heart--07 {
    top: 67.8%;
    left: 83.3%;
    width: calc(42 / 440 * 100vw) !important;
  }
}