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

        body, html {
            margin: 0 auto;
            padding: 0;
            width: 100%;
            max-width: 750px;
        }
        .section {
            position: relative;
	    line-height: 0;
        }
        .bg-image {
            width: 100%;
        }
        .absolute {
            position: absolute;
        }
        .center-x {
            left: 50%;
            transform: translateX(-50%);
        }

        /* Section 1 Styles */
        .image1-1 { top: 0%; width: 78%; left: 10%;}
        .image1-2 { top: 8%; width: 94.5%; left: 3%;}
        .image1-3 { top: 38%; width: 72.4%; left: 14%;}
        .image-btn1 { top: 80%; width: 89.2%; left: 6%;}

        /* Section 2 Styles */
        .image2-1 { top: 8%; width: 94.93%; left: 3%;}
        .image2-2 { top: 41%; width: 96.4%; }

        /* Section 3 Styles */
        .image3-1 { top: 2%; width: 55.7%; left: 9%;}
        .image3-2 { top: 17%; width: 91.2%; left: 9%;}
        .image3-3 { top: 37%; width: 92.9%; left: 0;}
        .image3-4 { top: 57%; width: 91.2%; left: 9%;}
        .image3-5 { top: 78%; width: 92.9%; left: 0;}

        /* Section 4 Styles */
        .image4-1 { top: 4%; width: 90.9%; left: 5%;}
        .image4-2 { top: 20%; width: 92.4%; left: 2%;}
        .image4-3 { top: 45%; width: 95.5%; left: 2%;}
        .image4-4 { top: 71%; width: 89.3%; left: 2%;}

        /* Section 5 Styles */
        .image5-1 { top: 2%; width: 40.0%; left: 28%;}

        /* Section 6 Styles */
        .image6-1 { top: 2%; width: 95.7%; left: 2%;}
        .image6-2 { top: 32%; width: 76.0%; left: 7%;}
        .image6-3 { top: 43%; width: 90.4%; left: 7%;}
        .image6-4 { top: 56%; width: 88.3%; left: 7%;}
        .image-btn6 { top: 79%; width: 89.2%; left: 6%;}



.fade-in {
  opacity: 0;
  transform: translate(-50%, -30px);
  animation: fadeInMove 0.5s ease-out forwards;
}

    @keyframes fadeInMove {
      0% {
        opacity: 0;
        transform: translateY(-30px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

.bouncing-box {
  opacity: 0.3; 
  transform: scale(1.2); 
  animation: bounceShrink 2s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}

@keyframes bounceShrink {
  0% {
    opacity: 1;
    transform: scale(1.2);
  }
  25% {
    opacity: 0.8;
    transform: scale(0.9);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.slide-in-up {
    opacity: 0;
    transform: translateY(30%);
    animation: slideInUp 0.5s ease-out forwards;
    animation-play-state: paused;
    transition: none;
}

    @keyframes slideInUp {
      0% {
        opacity: 0;
        transform: translateY(50%);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

.fuwafuwa-btn {
  cursor: pointer;
  animation: fuwafuwa 2s infinite ease-in-out;
}

@keyframes fuwafuwa {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.slide-in-left {
    opacity: 0;
    transform: translateX(100%);
    animation: slideInLeft 1.5s ease-out forwards;
    animation-play-state: paused;
    animation-fill-mode: both;
    transition: none;
}
@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translateX(0); /* 最初は元の位置で透明 */
    }
    20% {
        opacity: 0;
        transform: translateX(100%); /* 0.2秒後に左に飛び出す */
    }
    100% {
        opacity: 1;
        transform: translateX(0); /* 元の位置に戻ってくる */
    }
}
.slide-in-right {
    opacity: 0;
    transform: translateX(0); /* 初期位置はその場 */
    animation: slideInRight 1.5s ease-out forwards;
    animation-play-state: paused; /* 初期状態は停止 */
    animation-fill-mode: both; /* アニメーション完了時の状態を保持 */
    transition: none;
}

/* アニメーションキーフレーム */
@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(0); /* 最初は元の位置で透明 */
    }
    20% {
        opacity: 0;
        transform: translateX(-100%); /* 0.2秒後に左に飛び出す */
    }
    100% {
        opacity: 1;
        transform: translateX(0); /* 元の位置に戻ってくる */
    }
}

/* 3Dフリップアニメーション */
.flip-vertical {
    perspective: 1000px;
    transform-style: preserve-3d;
    transform-origin: center;
    animation: flipVertical 2s infinite alternate linear;
    opacity: 1;
}

/* アニメーションキーフレーム */
@keyframes flipVertical {
    0% {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0.7;
    }
    40% {
        transform: perspective(400px) rotateY(-20deg);
        opacity: 0.8;
    }
    60% {
        transform: perspective(400px) rotateY(10deg);
        opacity: 0.9;
    }
    80% {
        transform: perspective(400px) rotateY(-5deg);
        opacity: 1;
    }
    100% {
        transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}

/* .visible クラスが付与されたときにアニメーションを実行 */
.flip-vertical.visible {
    animation-play-state: running;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}


/* 初期状態でアニメーションは停止し、非表示にする */
.fade-in, .bouncing-box, .slide-in-up, .fuwafuwa-btn, .slide-in-left, .slide-in-right {
    opacity: 0;
    transform: translateY(20px);
    animation-play-state: paused; /* アニメーションを一時停止 */
    animation-fill-mode: both; /* アニメーションが完了状態を保持 */
    transition: none;
}

/* visible クラスが付与されたときにアニメーションを再生 */
.fade-in.visible,
.bouncing-box.visible,
.slide-in-up.visible,
.fuwafuwa-btn.visible,
.slide-in-left.visible,
.slide-in-right.visible{
    opacity: 1;
    animation-play-state: running; /* アニメーションを再生 */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}