@charset "UTF-8";
@-ms-viewport {
  width: device-width;
}
/*--------------------------------------------------------------------------
CSS　カサーレ城東セントラルプレイス設定(style.css)ver.1 2025.7.17
プランページ　鳥と葉っぱ動き用
--------------------------------------------------------------------------*/
#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: 10%;
  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: 5%;
  left: 10%;
  width: 100px;
  height: 100px;
  z-index: 0;
  pointer-events: none;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  display: none;
}

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

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

/*===============================
■■　スマホ用　■■
===============================*/
/*------------(XS)------------*/
@media (min-width: 320px) and (max-width: 566px) {
  #bird {
    position: absolute;
    top: 10px;
    left: 10%;
    width: 60px;
    height: auto;
    z-index: 0;
    pointer-events: none;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  #leaf_a {
    position: absolute;
    top: 10%;
    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: 60px;
    height: 60px;
    z-index: 0;
    pointer-events: none;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  #leaf_c {
    position: absolute;
    top: -40%;
    right: 10%;
    width: 60px;
    height: 60px;
    z-index: 0;
    pointer-events: none;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  #leaf_d {
    position: absolute;
    top: -45%;
    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: 70px;
    height: auto;
    z-index: 0;
    pointer-events: none;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  #leaf_a {
    position: absolute;
    top: 5%;
    right: 10%;
    width: 70px;
    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: auto;
    z-index: 0;
    pointer-events: none;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  #leaf_c {
    position: absolute;
    top: -40%;
    right: 10%;
    width: 70px;
    height: auto;
    z-index: 0;
    pointer-events: none;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  #leaf_d {
    position: absolute;
    top: -50%;
    right: 10%;
    width: 110px;
    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;
    top: 10px;
    left: 10%;
    width: 80px;
    height: auto;
    z-index: 0;
    pointer-events: none;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  #leaf_a {
    position: absolute;
    top: 10%;
    right: 10%;
    width: 80px;
    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: 80px;
    height: auto;
    z-index: 0;
    pointer-events: none;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  #leaf_c {
    position: absolute;
    top: 10%;
    right: 10%;
    width: 80px;
    height: auto;
    z-index: 0;
    pointer-events: none;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  #leaf_d {
    position: absolute;
    top: 10%;
    right: 10%;
    width: 120px;
    height: auto;
    z-index: 0;
    pointer-events: none;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
} /*MD*/
/*------------(LG)------------*/
@media (min-width: 1024px) and (max-width: 1215px) {
  /*■■■■■■ アニメーション (LG) ■■■■■■■*/
  .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: 5%;
    left: 10%;
    width: 80%;
    z-index: 0;
    pointer-events: none;
  }
  .svg-path-container2 {
    margin-top: 100px;
    position: absolute;
    top: 25%;
    left: 10%;
    width: 80%;
    z-index: 0;
    pointer-events: none;
  }
  .svg-path-container3 {
    margin-left: 100px;
    margin-top: -60px;
    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: 0;
    position: absolute;
    bottom: -40%;
    right: 15%;
    width: 75%;
    height: 50%;
    z-index: 0;
    pointer-events: none;
    -webkit-transform: scaleY(0.6);
            transform: scaleY(0.6); /* 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%;
    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: 100px;
    height: 100px;
    z-index: 0;
    pointer-events: none;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  #leaf_d {
    position: absolute;
    top: 10%;
    right: 10%;
    width: 180px;
    height: 180px;
    z-index: 0;
    pointer-events: none;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
} /*LG*/
/*------------(XL)------------*/
/*XL*/