/*=====================
    泡アニメーション
=====================*/
 .bubbles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index:-1;
    overflow-x: hidden;
  }

  .bubble {
   position: absolute;
    bottom: -40px;
    border-radius: 50%;
    opacity: 0.85;
    animation: rise linear infinite;
  }

  @keyframes rise {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(-120vh);
    }
  }


/*=====================
    波アニメーション
=====================*/

:root {
    --wave-color: #36B2DF;
    --wave-back-color: #dceaf0;
}

.wave-wrapper {
    position: relative;
    overflow: hidden;
    padding: calc((120 / 1400)* 100vw) calc((20 / 1400)* 100vw) calc((30 / 1400)* 100vw);
    text-align: center;
    top: calc((10 / 1400)* 100vw);
}
.s-wave-area {
    transform: rotate(180deg);
}

.wave-area {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc((220 / 1400)* 100vw);
    overflow: hidden;
}

.wave__group {
    display: flex;
    width: 200%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}

.wave__group svg {
    width: 50%;
    height: 100%;
    display: block;
}

/* 奥の波 */
.wave__back {
    opacity: 0.8;
    animation: waveMoveBack 35s linear infinite;
    z-index: 0;
    transform: translateX(-25%); /* ← 横にずらして位相ずらし */
}

/* 手前の波 */
.wave__front {
    animation: waveMove 18s linear infinite;
    z-index: 1;
}

@keyframes waveMove {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes waveMoveBack {
  from { transform: translateX(-25%); } /* 初期ずらし */
  to   { transform: translateX(-75%); } /* 最終位置 */
}


/*=====================
    登場アニメーション
=====================*/
.a-section {
    opacity: 0;
    transform: translate3d(0, 50px, 0);
    transition: opacity 1s, transform 1s;
}

.slide-ttl {
    opacity: 0;
    transform: translate3d(50px, 0, 0);
    transition: opacity 1s, transform 1s;
}

.slide-ttl-reverse {
    opacity: 0;
    transform: translate3d(-50px, 0, 0);
    transition: opacity 1s, transform 1s;
}

.kaiten.is-animated {
    animation: kaiten 2.1s both;
    opacity: 1;
}

.bounce-down, .bounce-right {
    opacity: 0;
}

.bounce-down.is-animated {
    animation: bounce-down 1s steps(40, end), step-end infinite;
    opacity: 1;
}
.bounce-right.is-animated {
    animation: bounce-right 1s steps(40, end), step-end infinite;
    opacity: 1;
}

.up-wrapper.is-animated 
.up-1 {
    animation: 0.1s ease 0.1s up both;
    opacity: 0;
}.up-wrapper.is-animated 
.up-2 {
    animation: 0.2s ease 0.2s up both;
    opacity: 0;
}.up-wrapper.is-animated 
.up-3 {
    animation: 0.3s ease 0.3s up both;
    opacity: 0;
}.up-wrapper.is-animated 
.up-4 {
    animation: 0.4s ease 0.4s up both;
    opacity: 0;
}.up-wrapper.is-animated 
.up-5 {
    animation: 0.5s ease 0.5s up both;
    opacity: 0;
}.up-wrapper.is-animated 
.up-6 {
    animation: 2.0s ease 2.0s up both;
    opacity: 0;
}.up-wrapper.is-animated 
.up-7 {
    animation: 2.3s ease 2.3s up both;
    opacity: 0;
}.up-wrapper.is-animated 
.up-8 {
    animation: 2.6s ease 2.6s up both;
    opacity: 0;
}.up-wrapper.is-animated 
.up-9 {
    animation: 2.9s ease 2.9s up both;
    opacity: 0;
}
.up-wrapper.is-animated .up-10 {
    animation: 3.2s ease 3.2s up both;
    opacity: 0;
}
.up-wrapper.is-animated .up-11 {
    animation: 3.5s ease 3.5s up both;
    opacity: 0;
}
.up-wrapper.is-animated .up-12 {
    animation: 3.8s ease 3.8s up both;
    opacity: 0;
}
.up-wrapper.is-animated .up-13 {
    animation: 4.1s ease 4.1s up both;
    opacity: 0;
}
.up-wrapper.is-animated .up-14 {
    animation: 4.4s ease 4.4s up both;
    opacity: 0;
}
.up-wrapper.is-animated .up-15 {
    animation: 4.7s ease 4.7s up both;
    opacity: 0;
}
.up-wrapper.is-animated .up-16 {
    animation: 5.0s ease 5.0s up both;
    opacity: 0;
}
.up-wrapper.is-animated .up-17 {
    animation: 5.3s ease 5.3s up both;
    opacity: 0;
}
.up-wrapper.is-animated .up-18 {
    animation: 5.6s ease 5.6s up both;
    opacity: 0;
}
.up-wrapper.is-animated .up-19 {
    animation: 5.9s ease 5.9s up both;
    opacity: 0;
}
.up-wrapper.is-animated .up-20 {
    animation: 6.2s ease 6.2s up both;
    opacity: 0;
}


.left-slide {
    transform: scale(0, 1);
}
.left-slide.is-animated {
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(0.9, 0, 0.1, 1);
    transform: scale(1, 1);
}
.right-slide {
    transform: scale(0, 1);
}
.right-slide.is-animated {
    transform-origin: right;
    transition: transform 0.3s cubic-bezier(0.1, 1, 0.9, 0);
    transform: scale(1, 1);
}

.a-section.is-animated, .slide-ttl.is-animated, .slide-ttl-reverse.is-animated  {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}


@keyframes infinite-arrow {
    0%, 100% {
        transform: translateX(10px);
    }
    50% {
        transform: translateX(0);
    }
}


@keyframes infinite-dance {
    0%, 100% {
        transform: rotate(3deg);
    }
    50% {
        transform: rotate(-3deg);
    }
}

@keyframes infinite-flow {
    0% {
        transform: translateX(100%);
    }
    
    100% {
        transform: translateX(-100%);
    }
}

@keyframes kaiten {
    from {
        transform: perspective(410px) rotate3d(1, 0, 0, 90deg);
        animation-timing-function: ease-in;
        opacity: 0;
        }
        40% {
        transform: perspective(410px) rotate3d(1, 0, 0, -15deg);
        animation-timing-function: ease-in;
        }
        60% {
        transform: perspective(410px) rotate3d(1, 0, 0, 5deg);
        opacity: 1;
        }
        80% {
        transform: perspective(410px) rotate3d(1, 0, 0, -5deg);
        }
        to {
        transform: perspective(340px);
        }
    }


@keyframes up {
    0% {
        transform: translate3d(0, 100%, 0);
        opacity: 0;
    }
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes bounce-down {
    0%, 60%, 75%, 90%, 100% {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        transform: translate3d(0, -3000px, 0);
        opacity: 0;
    }
    60% {
        transform: translate3d(0, 25px, 0);
        opacity: 1;
    }
    75% {
        transform: translate3d(0, -10px, 0);
    }
    90% {
        transform: translate3d(0, 5px, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes bounce-right {
    0%, 60%, 75%, 90%, 100% {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        transform: translate3d(3000px, 0, 0);
        opacity: 0;
    }
    60% {
        transform: translate3d(-25px, 0, 0);
        opacity: 1;
    }
    75% {
        transform: translate3d(10px, 0, 0);
    }
    90% {
        transform: translate3d(-5px, 0, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}