@charset "utf-8";

/* KV */

.fix-bg {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  background: #f1f7ff;
}

.fix-bg__inner {
  width: 100%;
  max-width: 1280px;
  height: 100%;
  margin: 0 auto;
  background: #f1f7ff url("../img/kv/bg.webp") no-repeat 50% 0;
  background-size: 100% auto;
}

@media (max-width: 801px) {
  .fix-bg__inner {
    background-image: url("../img/kv/bg-sp.webp");
    background-size: 100% auto;
    background-position: 50% 0;
  }
}

/* Spacer */
.spacer {
  height: 526px;
}

@media (min-width: 802px) {
  .spacer {
    height: calc(clamp(0px, 100vw, 1280px) * 526 / 1280);
  }
}

@media (max-width: 801px) {
  .spacer {
    height: calc(clamp(0px, 100vw, 801px) * 618 / 440);
  }
}

/* KV Product */
.kv-product {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1280px;
  height: 100%;
  pointer-events: none;
}

.kv-product__bottle {
  position: absolute;
  top: 80px;
  right: 307px;
  width: 280px;
  height: auto;
}

@media (max-width: 1280px) {
  .kv-product__bottle {
    top: calc(80 / 1280 * 100vw);
    right: calc(307 / 1280 * 100vw);
    width: calc(280 / 1280 * 100vw);
  }
}

.kv-product__flash {
  position: absolute;
  mix-blend-mode: screen;
  pointer-events: none;
}

.kv-product__flash--top {
  top: 180px;
  right: 416px;
  width: 190px;
}

.kv-product__flash--bottom {
  top: 360px;
  right: 319px;
  width: 130px;
}

@media (max-width: 1280px) {
  .kv-product__flash--top {
    top: calc(180 / 1280 * 100vw);
    right: calc(415 / 1280 * 100vw);
    width: calc(190 / 1280 * 100vw);
  }
  .kv-product__flash--bottom {
    top: calc(370 / 1280 * 100vw);
    right: calc(320 / 1280 * 100vw);
    width: calc(190 / 1280 * 100vw);
  }
}

/* SP */
@media (max-width: 801px) {
  .kv-product {
    display: block;
  }
  .kv-product__bottle {
    top: calc(210 / 440 * 100vw);
    right: calc(127 / 440 * 100vw);
    width: calc(230 / 440 * 100vw);
  }
  .kv-product__flash--top {
    top: calc(300 / 440 * 100vw);
    right: calc(230 / 440 * 100vw);
    width: calc(120 / 440 * 100vw);
  }
  .kv-product__flash--bottom {
    top: calc(475 / 440 * 100vw);
    right: calc(152 / 440 * 100vw);
    width: calc(80 / 440 * 100vw);
  }
}

/* KV Bubbles */
.kv-bubbles {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1280px;
  height: 100%;
  pointer-events: none;
}

.kv-bubble {
  position: absolute;
  will-change: transform;
}

.kv-bubble--01 {
  top: 60px;
  right: 480px;
  width: 110px;
}

.kv-bubble--02 {
  top: 62px;
  right: 203px;
  width: 50px;
}

.kv-bubble--03 {
  top: 245px;
  right: 219px;
  width: 130px;
}

.kv-bubble--04 {
  top: 380px;
  right: 528px;
  width: 155px;
}

.kv-bubble--05 {
  top: 520px;
  right: 210px;
  width: 90px;
}

@media (max-width: 1280px) {
  .kv-bubble--01 {
    top: calc(60 / 1280 * 100vw);
    right: calc(480 / 1280 * 100vw);
    width: calc(110 / 1280 * 100vw);
  }
  .kv-bubble--02 {
    top: calc(62 / 1280 * 100vw);
    right: calc(203 / 1280 * 100vw);
    width: calc(50 / 1280 * 100vw);
  }
  .kv-bubble--03 {
    top: calc(245 / 1280 * 100vw);
    right: calc(219 / 1280 * 100vw);
    width: calc(130 / 1280 * 100vw);
  }
  .kv-bubble--04 {
    top: calc(380 / 1280 * 100vw);
    right: calc(528 / 1280 * 100vw);
    width: calc(155 / 1280 * 100vw);
  }
  .kv-bubble--05 {
    top: calc(520 / 1280 * 100vw);
    right: calc(210 / 1280 * 100vw);
    width: calc(90 / 1280 * 100vw);
  }
}

/* SP */
@media (max-width: 801px) {
  .kv-bubbles {
    display: block;
  }
  .kv-bubble--01 {
    top: calc(190 / 440 * 100vw);
    right: calc(260 / 440 * 100vw);
    width: calc(95 / 440 * 100vw);
  }
  .kv-bubble--02 {
    top: calc(205 / 440 * 100vw);
    right: calc(44 / 440 * 100vw);
    width: calc(40 / 440 * 100vw);
  }
  .kv-bubble--03 {
    top: calc(347 / 440 * 100vw);
    right: calc(52 / 440 * 100vw);
    width: calc(118 / 440 * 100vw);
  }
  .kv-bubble--04 {
    top: calc(450 / 440 * 100vw);
    right: calc(303 / 440 * 100vw);
    width: calc(140 / 440 * 100vw);
  }
  .kv-bubble--05 {
    top: calc(575 / 440 * 100vw);
    right: calc(60 / 440 * 100vw);
    width: calc(70 / 440 * 100vw);
  }
}