@charset "UTF-8";
@-ms-viewport {
  width: device-width;
}
/*--------------------------------------------------------------------------
CSS　カサーレ城東セントラルプレイス設定(style.css)ver.1 2025.7.17
トップページ　鳥と葉っぱ動き用
--------------------------------------------------------------------------*/
/*■■■■■■ アニメーション ■■■■■■■*/
.move-objyect-block {
  position: relative;
  display: block;
  width: 100%;
  /*overflow:hidden;*/
}

.animation-block {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
}

.first-block, .second-block, .third-block, .fourth-block {
  position: relative;
  width: 100%;
}

.svg-path-container {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  z-index: 0;
  pointer-events: none;
}

.svg-path-container2 {
  margin-top: 100px;
  position: absolute;
  top: 40%;
  left: 5%;
  width: 85%;
  z-index: 0;
  pointer-events: none;
}

.svg-path-container3 {
  margin-left: 200px;
  margin-top: 500px;
  position: absolute;
  top: 10%;
  left: 10%;
  width: 90%;
  z-index: 0;
  pointer-events: none;
}

.svg-path-container4 {
  margin-top: 700px;
  position: absolute;
  top: 5%;
  left: 15%;
  width: 70%;
  z-index: 0;
  pointer-events: none;
  -webkit-transform: scaleY(0.8);
          transform: scaleY(0.8); /* 1.5倍に縦に引き伸ばす */
  -webkit-transform-origin: top;
          transform-origin: top;
}

.svg-path-container5 {
  margin-top: 100px;
  position: absolute;
  top: 10%;
  right: 15%;
  width: 75%;
  height: 50%;
  z-index: 0;
  pointer-events: none;
  -webkit-transform: scaleY(1.2);
          transform: scaleY(1.2); /* 2.5倍に縦に引き伸ばす */
  -webkit-transform-origin: top;
          transform-origin: top;
}

#bird {
  position: absolute;
  left: 10%;
  width: 100px;
  height: auto;
  z-index: 0;
  pointer-events: none;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

#leaf_a {
  position: absolute;
  top: 40%;
  right: 10%;
  width: 100px;
  height: 100px;
  z-index: 0;
  pointer-events: none;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

#leaf_b {
  margin-left: 200px;
  margin-top: 500px;
  position: absolute;
  top: 10%;
  left: 10%;
  width: 100px;
  height: 100px;
  z-index: 0;
  pointer-events: none;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

#leaf_c {
  position: absolute;
  bottom: 10%;
  left: 10%;
  width: 80px;
  height: 80px;
  z-index: 0;
  pointer-events: none;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

#leaf_d {
  position: absolute;
  top: 10%;
  right: 10%;
  width: 120px;
  height: 120px;
  z-index: 0;
  pointer-events: none;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

/*===============================
■■　スマホ用　■■
===============================*/
/*------------(XS)------------*/
@media (min-width: 320px) and (max-width: 566px) {
  /*■■■■■■ TOP アニメーション(XS) ■■■■■■■*/
  #bird {
    position: absolute;
    margin: -10px 0 0 0;
    top: 0;
    left: 10%;
    width: 60px;
    height: auto;
    z-index: 0;
    pointer-events: none;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  #leaf_a {
    position: absolute;
    top: 0;
    right: 10%;
    width: 60px;
    height: auto;
    z-index: 0;
    pointer-events: none;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  #leaf_b {
    margin-left: 0;
    margin-top: 0;
    position: absolute;
    top: 2%;
    right: 10%;
    width: 70px;
    height: 70px;
    z-index: 0;
    pointer-events: none;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  #leaf_c {
    position: absolute;
    top: 0;
    right: 10%;
    width: 70px;
    height: 70px;
    z-index: 0;
    pointer-events: none;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  #leaf_d {
    position: absolute;
    top: 2%;
    right: 10%;
    width: 90px;
    height: auto;
    z-index: 0;
    pointer-events: none;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
} /*xs*/
/*------------(SM)------------*/
@media (min-width: 567px) and (max-width: 767px) {
  #bird {
    position: absolute;
    top: 5%;
    left: 10%;
    width: 60px;
    height: auto;
    z-index: 0;
    pointer-events: none;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  #leaf_a {
    position: absolute;
    top: 0;
    right: 10%;
    width: 60px;
    height: auto;
    z-index: 0;
    pointer-events: none;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  #leaf_b {
    margin-left: 0;
    margin-top: 0;
    position: absolute;
    top: 2%;
    right: 10%;
    width: 70px;
    height: 70px;
    z-index: 0;
    pointer-events: none;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  #leaf_c {
    position: absolute;
    top: 10%;
    right: 10%;
    width: 70px;
    height: 70px;
    z-index: 0;
    pointer-events: none;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  #leaf_d {
    position: absolute;
    top: 2%;
    right: 10%;
    width: 100px;
    height: auto;
    z-index: 0;
    pointer-events: none;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
} /*SM*/
/*------------(MD)------------*/
@media (min-width: 768px) and (max-width: 1023px) {
  #bird {
    position: absolute;
    left: 5%;
    width: 70px;
    height: auto;
    z-index: 0;
    pointer-events: none;
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  #leaf_a {
    position: absolute;
    top: 0;
    right: 5%;
    width: 80px;
    height: 80px;
    z-index: 0;
    pointer-events: none;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  #leaf_b {
    margin-left: 0;
    margin-top: 0;
    position: absolute;
    top: 10%;
    right: 10%;
    width: 100px;
    height: 100px;
    z-index: 0;
    pointer-events: none;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  #leaf_c {
    position: absolute;
    top: 10%;
    right: 10%;
    width: 90px;
    height: 90px;
    z-index: 0;
    pointer-events: none;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  #leaf_d {
    position: absolute;
    top: 10%;
    right: 10%;
    width: 110px;
    height: 110px;
    z-index: 0;
    pointer-events: none;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
} /*MD*/
/*------------(LG)------------*/
@media (min-width: 1024px) and (max-width: 1215px) {
  #bird {
    position: absolute;
    top: 0;
    left: 10%;
    width: 80px;
    height: auto;
    z-index: 0;
    pointer-events: none;
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  #leaf_a {
    position: absolute;
    top: 0;
    right: 10%;
    width: 80px;
    height: 80px;
    z-index: 0;
    pointer-events: none;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  #leaf_b {
    position: absolute;
    top: 10%;
    left: -10%;
    width: 100px;
    height: 100px;
    z-index: 0;
    pointer-events: none;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  #leaf_c {
    position: absolute;
    bottom: 10%;
    left: 10%;
    width: 90px;
    height: 90px;
    z-index: 0;
    pointer-events: none;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  #leaf_d {
    position: absolute;
    top: 10%;
    right: 10%;
    width: 110px;
    height: 110px;
    z-index: 0;
    pointer-events: none;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
} /*LG*/
/*------------(XL)------------*/
/*XL*/