@charset "utf-8";






/* ===== 落ち葉を表示するコンテナのスタイル ===== */
.leaves-container {
  position: relative;
  height: auto; /* コンテナの高さ */
  width: 100%; /* コンテナの横幅 */
  overflow: hidden; /* コンテナからはみ出した要素を隠す */
}
.box-title {
	position: absolute;
 	padding:  20px;             /* 余白指定 */
    left:  50px;                /* 左からの位置指定 */
    top: 50px;                  /* 上からの位置指定 */
    margin: 0;
    animation: titleAnime 1.5s 2s forwards ease-in;
    opacity: 0;
}

@media screen and (max-width:480px) {

.box-title {
	width: 100px;
	position: absolute;
 	padding:  10px;             /* 余白指定 */
    left:  10px;                /* 左からの位置指定 */
    top: 10px;                  /* 上からの位置指定 */

}
}

@keyframes titleAnime {
    to {
        opacity: 1;
    }
}

/* ===== 落ち葉のスタイル ===== */

/* 落ち葉の共通スタイル */
.leaf {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  animation: animate-leaf 10s linear;
}

/* 落ち葉1 */
.leaf-1 {
  background-image: url('/~homecoming2025/images/leaf-1.svg'); /* 任意のパスを記入 */
}

/* 落ち葉2 */
.leaf-2 {
  background-image: url('/~homecoming2025/images/leaf-2.svg'); /* 任意のパスを記入 */
}

/* 落ち葉3 */
.leaf-3 {
  background-image: url('/~homecoming2025/images/leaf-3.svg'); /* 任意のパスを記入 */
}

/* ===== 落ち葉が降るアニメーション ===== */
@keyframes animate-leaf {
  0% {
    opacity: 0;
    top: 0;
    transform: rotate(0);
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    top: 100vh;
    transform: rotate(1080deg);
  }
}
/* ===== ドクターヘリアニメーション ===== */
.demo_item{
	width: 50px;
    height: 50px;
    border-radius: 10px;
    background-image: url('/~homecoming2025/images/22093989.png');
    background-size: 100% 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    display: block;
    position: relative;
    

}
.demo_item.anime{
    animation-name: upDown;
    animation-iteration-count: infinite;
    animation-duration: 0.1s;
    animation-direction: alternate;
    animation-timing-function: steps(2);
    transition-duration: .3s;
    transition-property: transform;
}


.demo_stage{
    position: absolute;
    width: 80%;
    height: 50px;
    top: 80px;
    right: 0px;
    left: 200px;
    display: block;
	}

@media screen and (max-width:480px) {
.demo_stage{
    width: 80%;
    height: 50px;
    top: 30px;
    right: 0px;
    left: 50px;
    display: block;
	}
	}

.demo_wrap{
	position: absolute;
    top: 20px;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-duration: 15s;
    animation-iteration-count: 1;
	margin-right: -25px;
}
.demo_wrap[data-order="left"] {
    animation-name: GoLeft;
}
.demo_wrap[data-order="right"] {
    animation-name: GoRight;
}

[data-order="right"] > .demo_item {
    transform: rotateY(180deg);
}

@keyframes GoLeft {
    0% {
        right: 10%;
    }
    100% {
        right: 90%;
    }
}
@keyframes GoRight {
    0% {
        right: 90%;
    }
    100% {
        right: 10%;
    }
}

@keyframes upDown {
    0% {
        top: 0;
    }
    100% {
        top: 3px;
    }
}