@charset "UTF-8";
/* CSS Document */

.bubble_bg{
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}

.bubble_wrap{
  position: absolute;
}

/* フェードアップ担当 */
.js-bubble-fade{
  opacity: 0;
  transform: translateY(60px);
  transition:
    opacity 1.2s ease,
    transform 1.2s cubic-bezier(.22,1,.36,1);
}

.js-bubble-fade.is-show{
  opacity: 1;
  transform: translateY(0);
}

.bubble{
  position: absolute;
  display: block;
  will-change: transform;
  /*opacity: 0.75;*/
}

/* 個別配置 */
.bubble01_wrap {
  width: 28vw;
  max-width: 420px;
  top: 5vw;
  left: -15%;
}
.bubble01{
  width: 28vw;
  max-width: 420px;
  min-width: 180px;
  animation:
    bubbleFloat01 9s ease-in-out infinite alternate,
    bubbleScale01 6.5s ease-in-out infinite alternate;
}

.bubble02_wrap {
  width: 20vw;
  max-width: 280px;
  top: 40vw;
  left: 2.5%;
}
.bubble02{
  width: 20vw;
  max-width: 280px;
  min-width: 130px;
  animation:
    bubbleFloat02 11s ease-in-out infinite alternate,
    bubbleScale02 7.5s ease-in-out infinite alternate;
}

.bubble03_wrap {
  width: 24vw;
  max-width: 390px;
  top: 20vw;
  right: -10%;
}
.bubble03{
  width: 24vw;
  max-width: 390px;
  min-width: 160px;
  animation:
    bubbleFloat03 10s ease-in-out infinite alternate,
    bubbleScale03 8s ease-in-out infinite alternate;
}

/* ふわふわ移動 */
@keyframes bubbleFloat01{
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%  { transform: translate3d(18px, -14px, 0) rotate(2deg); }
  100% { transform: translate3d(-12px, 16px, 0) rotate(-2deg); }
}

@keyframes bubbleFloat02{
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%  { transform: translate3d(-16px, -20px, 0) rotate(-3deg); }
  100% { transform: translate3d(12px, 12px, 0) rotate(2deg); }
}

@keyframes bubbleFloat03{
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%  { transform: translate3d(14px, -18px, 0) rotate(2deg); }
  100% { transform: translate3d(-18px, 10px, 0) rotate(-1.5deg); }
}

/* ほんの少し膨張収縮 */
@keyframes bubbleScale01{
  0%   { scale: 1; }
  100% { scale: 1.04; }
}

@keyframes bubbleScale02{
  0%   { scale: 0.98; }
  100% { scale: 1.05; }
}

@keyframes bubbleScale03{
  0%   { scale: 1.02; }
  100% { scale: 0.97; }
}


.bubble_item02{
    position: absolute;
    z-index: 0;
    width: 120%;
    left: 2%;
    top: -0%;
    opacity: .9;
    pointer-events: none;
    animation:
        bubbleFloat_item02 10s ease-in-out infinite alternate,
        bubbleScale_item02 7s ease-in-out infinite alternate;
}
/* 浮遊 */
@keyframes bubbleFloat_item02{
    0%   { transform: translate3d(0,0,0) rotate(0deg); }
    50%  { transform: translate3d(14px,-18px,0) rotate(2deg); }
    100% { transform: translate3d(-12px,12px,0) rotate(-2deg); }
}
/* 微妙な膨張 */
@keyframes bubbleScale_item02{
    0%   { scale:1; }
    100% { scale:1.05; }
}


.bubble_item03{
  position: absolute;
  z-index: 0;
  width: 78%;
  left: -10%;
  bottom: -10%;
  opacity: .85;
  pointer-events: none;
  animation:
    bubbleFloat_item03 11s ease-in-out infinite alternate,
    bubbleScale_item03 8s ease-in-out infinite alternate;
}
/* 浮遊 */
@keyframes bubbleFloat_item03{
  0%   { transform: translate3d(0,0,0) rotate(0deg); }
  50%  { transform: translate3d(-14px,-18px,0) rotate(-2deg); }
  100% { transform: translate3d(12px,10px,0) rotate(2deg); }
}
/* 微妙な膨張 */
@keyframes bubbleScale_item03{
  0%   { scale:1; }
  100% { scale:1.04; }
}


.bubble_item04{
  position: absolute;
  z-index: 0;
  width: 120%;
  right: -10%;
  bottom: 0;
  opacity: .85;
  pointer-events: none;
  animation:
    bubbleFloat_item04 12s ease-in-out infinite alternate,
    bubbleScale_item04 8.5s ease-in-out infinite alternate;
}
@keyframes bubbleFloat_item04{
  0%   { transform: translate3d(0,0,0) rotate(0deg); }
  50%  { transform: translate3d(16px,-14px,0) rotate(2deg); }
  100% { transform: translate3d(-10px,12px,0) rotate(-2deg); }
}
@keyframes bubbleScale_item04{
  0%   { scale: 1; }
  100% { scale: 1.04; }
}


.bubble_item05{
  position: absolute;
  z-index: 0;
  width: 90%;
  left: 12%;
  bottom: -2%;
  opacity: .85;
  pointer-events: none;
  animation:
    bubbleFloat_item05 13s ease-in-out infinite alternate,
    bubbleScale_item05 9s ease-in-out infinite alternate;
}
@keyframes bubbleFloat_item05{
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%  { transform: translate3d(-12px, -14px, 0) rotate(-1.5deg); }
  100% { transform: translate3d(10px, 12px, 0) rotate(1.5deg); }
}
@keyframes bubbleScale_item05{
  0%   { scale: 1; }
  100% { scale: 1.035; }
}


.bubble_item06{
  position: absolute;
  z-index: 0;
  width: 98%;
  left: 8%;
  top: -2%;
  opacity: .85;
  pointer-events: none;
  animation:
    bubbleFloat_item06 12.5s ease-in-out infinite alternate,
    bubbleScale_item06 8.5s ease-in-out infinite alternate;
}
@keyframes bubbleFloat_item06{
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%  { transform: translate3d(12px, -15px, 0) rotate(1.5deg); }
  100% { transform: translate3d(-10px, 11px, 0) rotate(-1.5deg); }
}
@keyframes bubbleScale_item06{
  0%   { scale: 1; }
  100% { scale: 1.035; }
}


.bubble_item07{
  position: absolute;
  z-index: 0;
  width: 115%;
  left: -15%;
  top: 0;
  opacity: .85;
  pointer-events: none;
  animation:
    bubbleFloat_item07 12s ease-in-out infinite alternate,
    bubbleScale_item07 8.5s ease-in-out infinite alternate;
}
@keyframes bubbleFloat_item07{
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%  { transform: translate3d(-14px, -12px, 0) rotate(-1.5deg); }
  100% { transform: translate3d(10px, 10px, 0) rotate(1.5deg); }
}
@keyframes bubbleScale_item07{
  0%   { scale: 1; }
  100% { scale: 1.035; }
}


.bubble_item08{
  position: absolute;
  z-index: 0;
  width: 110%;
  left: -10%;
  bottom: 8%;
  opacity: .85;
  pointer-events: none;
  animation:
    bubbleFloat_item08 12.5s ease-in-out infinite alternate,
    bubbleScale_item08 8.5s ease-in-out infinite alternate;
}
@keyframes bubbleFloat_item08{
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%  { transform: translate3d(14px, -12px, 0) rotate(1.5deg); }
  100% { transform: translate3d(-10px, 10px, 0) rotate(-1.5deg); }
}
@keyframes bubbleScale_item08{
  0%   { scale: 1; }
  100% { scale: 1.035; }
}


.bubble_item09{
  position: absolute;
  z-index: 0;
  width: 120%;
  left: -12%;
  top: 0;
  opacity: .85;
  pointer-events: none;
  animation:
    bubbleFloat_item09 13s ease-in-out infinite alternate,
    bubbleScale_item09 9s ease-in-out infinite alternate;
}
@keyframes bubbleFloat_item09{
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%  { transform: translate3d(18px, -16px, 0) rotate(2deg); }
  100% { transform: translate3d(-14px, 12px, 0) rotate(-2deg); }
}
@keyframes bubbleScale_item09{
  0%   { scale: 1; }
  100% { scale: 1.04; }
}


.bubble_item10{
  position: absolute;
  z-index: 0;
  width: 112%;
  left: -6%;
  top: 8%;
  opacity: .85;
  pointer-events: none;
  animation:
    bubbleFloat_item10 12.5s ease-in-out infinite alternate,
    bubbleScale_item10 8.5s ease-in-out infinite alternate;
}
@keyframes bubbleFloat_item10{
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%  { transform: translate3d(14px, -16px, 0) rotate(1.5deg); }
  100% { transform: translate3d(-11px, 10px, 0) rotate(-1.5deg); }
}
@keyframes bubbleScale_item10{
  0%   { scale: 1; }
  100% { scale: 1.04; }
}


.bubble_item11{
  position: absolute;
  z-index: 0;
  width: 95%;
  left: -12%;
  bottom: 0;
  opacity: .85;
  pointer-events: none;
  animation:
    bubbleFloat_item11 11s ease-in-out infinite alternate,
    bubbleScale_item11 8s ease-in-out infinite alternate;
}
@keyframes bubbleFloat_item11{
  0%   { transform: translate3d(0,0,0) rotate(0deg); }
  50%  { transform: translate3d(-14px,-18px,0) rotate(-2deg); }
  100% { transform: translate3d(12px,10px,0) rotate(2deg); }
}
@keyframes bubbleScale_item11{
  0%   { scale:1; }
  100% { scale:1.04; }
}


.bubble_item12{
  position: absolute;
  z-index: 0;
  width: 106%;
  right: -5%;
  bottom: -2%;
  opacity: .85;
  pointer-events: none;
  animation:
    bubbleFloat_item12 12s ease-in-out infinite alternate,
    bubbleScale_item12 8.5s ease-in-out infinite alternate;
}
@keyframes bubbleFloat_item12{
  0%   { transform: translate3d(0,0,0) rotate(0deg); }
  50%  { transform: translate3d(16px,-14px,0) rotate(2deg); }
  100% { transform: translate3d(-10px,12px,0) rotate(-2deg); }
}
@keyframes bubbleScale_item12{
  0%   { scale: 1; }
  100% { scale: 1.04; }
}


.bubble_item13{
  position: absolute;
  z-index: 0;
  width: 90%;
  right: -10%;
  top: -8%;
  opacity: .85;
  pointer-events: none;
  animation:
    bubbleFloat_item13 13s ease-in-out infinite alternate,
    bubbleScale_item13 9s ease-in-out infinite alternate;
}
@keyframes bubbleFloat_item13{
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%  { transform: translate3d(-12px, -14px, 0) rotate(-1.5deg); }
  100% { transform: translate3d(10px, 12px, 0) rotate(1.5deg); }
}
@keyframes bubbleScale_item13{
  0%   { scale: 1; }
  100% { scale: 1.035; }
}


.bubble_item14{
  position: absolute;
  z-index: 0;
  width: 106%;
  right: -15%;
  top: 0;
  opacity: .85;
  pointer-events: none;
  animation:
    bubbleFloat_item14 12.5s ease-in-out infinite alternate,
    bubbleScale_item14 8.5s ease-in-out infinite alternate;
}
@keyframes bubbleFloat_item14{
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%  { transform: translate3d(12px, -15px, 0) rotate(1.5deg); }
  100% { transform: translate3d(-10px, 11px, 0) rotate(-1.5deg); }
}
@keyframes bubbleScale_item14{
  0%   { scale: 1; }
  100% { scale: 1.035; }
}


.bubble_item15{
  position: absolute;
  z-index: 0;
  width: 114%;
  right: 0;
  top: -2%;
  opacity: .85;
  pointer-events: none;
  animation:
    bubbleFloat_item15 12s ease-in-out infinite alternate,
    bubbleScale_item15 8.5s ease-in-out infinite alternate;
}
@keyframes bubbleFloat_item15{
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%  { transform: translate3d(-14px, -12px, 0) rotate(-1.5deg); }
  100% { transform: translate3d(10px, 10px, 0) rotate(1.5deg); }
}
@keyframes bubbleScale_item15{
  0%   { scale: 1; }
  100% { scale: 1.035; }
}


.bubble_item16{
  position: absolute;
  z-index: 0;
  width: 108%;
  left: -5%;
  bottom: -3%;
  opacity: .85;
  pointer-events: none;
  animation:
    bubbleFloat_item16 12s ease-in-out infinite alternate,
    bubbleScale_item16 8.5s ease-in-out infinite alternate;
}
@keyframes bubbleFloat_item16{
  0%   { transform: translate3d(0,0,0) rotate(0deg); }
  50%  { transform: translate3d(16px,-14px,0) rotate(2deg); }
  100% { transform: translate3d(-10px,12px,0) rotate(-2deg); }
}
@keyframes bubbleScale_item16{
  0%   { scale: 1; }
  100% { scale: 1.04; }
}


.bubble_item17{
  position: absolute;
  z-index: 0;
  width: 118%;
  left: -14%;
  bottom: -5%;
  opacity: .85;
  pointer-events: none;
  animation:
    bubbleFloat_item17 13s ease-in-out infinite alternate,
    bubbleScale_item17 9s ease-in-out infinite alternate;
}
@keyframes bubbleFloat_item17{
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%  { transform: translate3d(16px, -18px, 0) rotate(2deg); }
  100% { transform: translate3d(-12px, 12px, 0) rotate(-2deg); }
}
@keyframes bubbleScale_item17{
  0%   { scale: 1; }
  100% { scale: 1.04; }
}




/* SP調整 */
@media screen and (max-width: 768px){
  .bubble01_wrap{
    width: 24vw;
    top: 8vw;
    left: -24%;
  }

  .bubble02_wrap{
    width: 20vw;
    top: 54vw;
    left: -7.5%;
  }

  .bubble03_wrap{
    width: 20vw;
    top: 42vw;
    right: -5%;
  }
}