@charset "UTF-8";
#storyBg.change {
  background-image: none;
  background-color: #000;
}

.story-bg{
  position: fixed;
  /* bottom: 0; */
  top: 0;
  width: 100%;
  max-width: 480px;
  /* height: 100vh; */
  height: 100lvh;
  background: url(/wp-content/themes/kidora/assets/images/story/story-bg.webp?v=1) center bottom / cover no-repeat;
  z-index: 0;
  transform: translate3d(0, 0 , -1px);
}

.story-cloud{
  position: absolute;
  width: 100%;
  height: 1250px;
  z-index: 0;
}

.story-cloud.top{
  top: 0;
  background: url(/wp-content/themes/kidora/assets/images/story/story-cloud01.webp?v=1) bottom center /cover no-repeat;
}

.story-cloud.bottom{
  top: 1250px;
  background: url(/wp-content/themes/kidora/assets/images/story/story-cloud02.webp?v=1) top center /cover no-repeat;
}

.story-page{
  position: relative;
  text-align: center;
  overflow: hidden;
  padding: 133px 0 0;
}

.story-text .tl-fade-top{
  opacity: 0;
  transform: translateY(80px);
}

/* .story-text .desc01,
.story-text .desc02,
.story-text .desc03{
  opacity: 0;
  transform: translateY(80px);
} */

/* .story-text .item01,
.story-text .item02,
.story-text .item03,
.story-text .item04{
  opacity: 0;
} */

.story-page .title{
  position: relative;
  z-index: 100;
}

.story-page .sec-title .text img {
  width: clamp(112px, 29.8667vw, 143.36px);
}

.story-page .sec-title .desc img {
  width: clamp(135px, 34.6vw, 172.8px);
}

.story-page .image{
  margin-top: 6px;
}

.story-text{
  padding: 0 clamp(19px, 4.9vw, 24.32px) 27px;
}

/* .story-text .text-fade-up{
  opacity: 0;
} */

.story-text .desc01{
  margin-top: 37px;
}

.story-text .desc01 img{
  width: clamp(290.24px, 77.4vw, 371.50px);
}

.story-text .desc02{
  margin-top: 46px;
}

.story-text .desc02 img{
  width: clamp(325.94px, 84.5vw, 417.20px);
}

.story-text .desc03{
  margin-top: 49px;
}

.story-text .desc03 img{
  width: clamp(279.79px, 71.7vw, 358.1px);
}

.story-text .desc04{
  margin-top: 50px;
}

.story-text .desc04 img{
  width: clamp(245.11px, 63.7vw, 313.74px);
}

.story-text .desc05{
  margin-top: 49px;
}

.story-text .desc05 img{
  width: clamp(322.39px, 83.5vw, 412.66px);
}

.story-text .desc06{
  margin-top: 52px;
}

.story-text .desc06 img{
  width: clamp(211.26px, 54.8vw, 270.41px);
}

.story-text .desc07{
  margin-top: 48px;
}

.story-text .desc07 img{
  width: clamp(252.45px, 65.5vw, 323.1px);
}

.story-text .desc08{
  margin-top: 50px;
}

.story-text .desc08 img{
  width: clamp(257.26px, 66.8vw, 329.29px);
}

.story-text .desc-block{
  position: relative;
}

.story-text .desc-block .item{
  position: absolute;
  width: 100%;
  left: 50%;
  transform: translate(-50%, -50%)!important;
}

.story-text .desc-block .item01{
  top: 49%;
}

.story-text .desc-block .item01 img{
  width: clamp(325.94px, 84.5vw, 418.5px);
}

.story-text .desc-block .item02{
  top: 91%;
}

.story-text .desc-block .item02 img{
  width: clamp(279.79px, 71.7vw, 363px);
}

.story-text .desc-block .item03{
  top: 93.5%;
}

.story-text .desc-block .item03 img{
  width: clamp(245.11px, 63.7vw, 313.74px);
}

.story-text .desc-block .item04{
  top: 91%;
}

.story-text .desc-block .item04 img{
  width: clamp(322.39px, 84vw, 414px);
}

.story-text .desc-block .item05{
  top: 9%;
}

.story-text .desc-block .item05 img{
  width: clamp(252.45px, 65.5vw, 323.1px);
}

.story-text .desc-block .item06{
  top: 91.5%;
}

.story-text .desc-block .item06 img{
  width: clamp(334px, 86.4vw, 427.52px);
}