.toptobottomScale {
    animation: toptobottomScale 1.4s ease 0s 1 normal;
}
/* toptobottomScale */
@keyframes toptobottomScale {
    0% {
        transform: translateY(-1200px) scale(0.7);
        opacity: .7
    }
    80% {
        transform: translateY(0) scale(0.7);
        opacity: .7
    }
    to {
        transform: scale(1);
        opacity: 1
    }
}
/* スクロール止める */
.no-scroll {
    overflow: hidden !important;
    height: 100vh;
    position: fixed;
    width: 100%;
  }

/* 一文字ずつ出す */
/* .char {
    opacity: 0;
    display: inline-block;
    transform: translateY(10px);
    transition: all 0.3s ease;
  }
  
  .char.show {
    opacity: 1;
    transform: translateY(0);
  } */
  
  /* 一列ずつだす */
  .line {
    opacity: 0;
    transform: translateY(20px);
    transition: all 1.0s ease;
  }
  
  .line.show {
    opacity: 1;
    transform: translateY(0);
  }

  /* 落ち葉を落とす */
  /* ===== 落ち葉を表示するコンテナのスタイル ===== */
.leaves-container {
  width: 100%; /* コンテナの横幅 */
  /* background-attachment: fixed; */
  position: fixed;
  top: 10px; 
}
.border_box{
  border: solid 1px white;
  display: inline-flexbox;
}

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

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

/* 落ち葉1 */
.leaf-1 {
  background-image: url('../img/leaf1.webp'); /* 任意のパスを記入 */
}

/* 落ち葉2 */
.leaf-2 {
  background-image: url('../img/leaf2.webp'); /* 任意のパスを記入 */
}

/* 落ち葉3 */
.leaf-3 {
  background-image: url('../img/leaf3.webp'); /* 任意のパスを記入 */
}

/* ===== 落ち葉が降るアニメーション ===== */
@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);
  }
}

.leaf-3 {
  background-image: url('../img/leaf3.webp');
  z-index: 60;
}