@charset "utf-8";

/* sec01 */

#sec01 .lp-inner {
  --lp-inner-top-transparent: 170px;
}

@media (max-width: 801px) {
  #sec01 .lp-inner {
    --lp-inner-top-transparent: 90px;
  }
}

#sec01 .lp-inner {
  position: relative;
}

.sec01-bubbles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.sec01-bubble {
  position: absolute;
  will-change: transform;
  width: auto !important;
  height: auto !important;
}

/* PC */
.sec01-bubble--01 { top: 43%; left: 16.8%; width: 101px !important; }
.sec01-bubble--02 { top: 88%; left: 81%; width: 78px !important; }
.sec01-bubble--03 { top: 93%; left: 8%; width: 123px !important; }
.sec01-bubble--04 { top: 92%; left: 14.5%; width: 54px !important; }
.sec01-bubble--05 { top: 80%; left: 75.8%; width: 41px !important; }
.sec01-bubble--06 { top: 50%; left: 59.5%; width: 36px !important; }
.sec01-bubble--07 { top: 72%; left: 17%; width: 69px !important; }
.sec01-bubble--08 { top: 51%; left: 82.5%; width: 102px !important; }
.sec01-bubble--09 { top: 25%; left: 82%; width: 130px !important; }
.sec01-bubble--10 { top: 24%; left: 77%; width: 63px !important; }

@media (max-width: 1280px) and (min-width: 802px) {
  .sec01-bubble--01 { width: calc(101 / 1280 * 100vw) !important; }
  .sec01-bubble--02 { width: calc(78 / 1280 * 100vw) !important; }
  .sec01-bubble--03 { width: calc(123 / 1280 * 100vw) !important; }
  .sec01-bubble--04 { width: calc(54 / 1280 * 100vw) !important; }
  .sec01-bubble--05 { width: calc(41 / 1280 * 100vw) !important; }
  .sec01-bubble--06 { width: calc(36 / 1280 * 100vw) !important; }
  .sec01-bubble--07 { width: calc(69 / 1280 * 100vw) !important; }
  .sec01-bubble--08 { width: calc(102 / 1280 * 100vw) !important; }
  .sec01-bubble--09 { width: calc(130 / 1280 * 100vw) !important; }
  .sec01-bubble--10 { width: calc(63 / 1280 * 100vw) !important; }
}

/* SP */
@media (max-width: 801px) {
  .sec01-bubble--01 { top: 37.5%; left: 13%; width: calc(65 / 440 * 100vw) !important; }
  .sec01-bubble--02 { top: 88%; left: 84%; width: calc(65 / 440 * 100vw) !important; }
  .sec01-bubble--03 { top: 90%; left: -2%; width: calc(63 / 440 * 100vw) !important; }
  .sec01-bubble--04 { top: 88%; left: 8%; width: calc(28 / 440 * 100vw) !important; }
  .sec01-bubble--05 { top: 63.5%; left: 82%; width: calc(22 / 440 * 100vw) !important; }
  .sec01-bubble--06 { top: 40%; left: 66%; width: calc(22 / 440 * 100vw) !important; }
  .sec01-bubble--07 { top: 60%; left: 8%; width: calc(35 / 440 * 100vw) !important; }
  .sec01-bubble--08 { top: 35%; left: 90%; width: calc(65 / 440 * 100vw) !important; }
  .sec01-bubble--09 { top: 10%; left: 88%; width: calc(75 / 440 * 100vw) !important; }
  .sec01-bubble--10 { top: 8%; left: 77%; width: calc(40 / 440 * 100vw) !important; }
}