@charset "utf-8";
/*------------------------  animation.css  ------------------------*/


.fade1 { opacity: 0; transition: 1.2s 0.8s ease; }
.fade1.is-done { opacity: 1; }
.fade2 { opacity: 0; transition: 1.2s 2.0s ease; }
.fade2.is-done { opacity: 1; animation: purun 0.8s ease-in-out 3.2s forwards; }

/* ぷるんとしたアニメーションの定義 */
@keyframes purun {
  0% {
    transform: scale(1, 1);
  }
  30% {
    transform: scale(1.25, 0.75); /* 横に広がり、縦に縮む */
  }
  40% {
    transform: scale(0.75, 1.25); /* 逆に縦に伸び、横に縮む */
  }
  60% {
    transform: scale(1.15, 0.85); /* 収束に向かって少し揺れる */
  }
  80% {
    transform: scale(0.95, 1.05);
  }
  100% {
    transform: scale(1, 1);       /* 元のサイズに戻る */
  }
}

/* 背景アニメーション全体のコンテナ（固定配置で背面に置く） */
.p-background-anim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* クリックイベントを透過させる */
  z-index: 2;
  overflow: hidden;
}

/* 共通のパーツスタイル（温かみのある芋・葉っぱ・丸をイメージ） */
.floating-shape {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: up-down 3s ease-in-out alternate infinite;
}

/* 各パーツのサイズ・初期位置・アニメーションのタイミングをずらす */
.shape-1 {
  background-image: url(../images/bg_parts01_pc.webp);
  animation-duration: 9s;
  animation-delay: 0s;
}

.shape-2 {
  background-image: url(../images/bg_parts02_pc.webp);
  animation-duration: 12s;
  animation-delay: -2s;
}

.shape-3 {
  background-image: url(../images/bg_parts03_pc.webp);
  animation-duration: 7s;
  animation-delay: -4s;
}

.shape-4 {
  background-image: url(../images/bg_parts04_pc.webp);
  animation-duration: 11s;
  animation-delay: -1s;
}

.shape-5 {
  background-image: url(../images/bg_parts05_pc.webp);
  animation-duration: 10s;
  animation-delay: -3s;
}

.shape-6 {
  background-image: url(../images/bg_parts06_pc.webp);
  animation-duration: 8s;
  animation-delay: -1s;
}

.shape-7 {
  background-image: url(../images/bg_parts07_pc.webp);
  animation-duration: 9s;
  animation-delay: -5s;
}

.shape-8 {
  background-image: url(../images/bg_parts08_pc.webp);
  animation-duration: 12s;
  animation-delay: 0s;
}

/* ふわふわとランダムに漂う動きのアニメーション */
@keyframes up-down{
  0%{
    transform: translateY(0);
  }
  50%{
    transform: translateY(1%);
  }
  100%{
    transform: translateY(0);
  }
}

/* ぷるぷるアニメーション */
@keyframes sway {
    0%, 100% {
    transform: rotate(0deg);
    }
    25% {
    transform: rotate(-.5deg); /* 左に傾く */
    }
    75% {
    transform: rotate(.5deg);  /* 右に傾く */
    }
}

@media screen and (max-width: 800px) {
    .p-background-anim {
        z-index: -1;
    }
    .floating-shape {
        background-size: contain;
        background-repeat: round;
    }
    .shape-1 { background-position-y: 5rem; }
    .shape-2 { background-position-y: 1.5rem; }
    .shape-3 { background-position-y: 3rem; }
    .shape-4 { background-position-y: 8rem; }
    .shape-5 { background-position-y: 12rem; background-position-x: 1rem; }
    .shape-6 { background-position-y: 11rem; background-position-x: -1.5rem; }
    .shape-7 { background-position-y: 10rem; }
    .shape-8 { background-position-y: 10rem; }
}