@charset "UTF-8";
main {
  padding:0;
}
/* footer{
  position: fixed;
} */
.top_wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
}
.top_main_box{
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding-bottom: 60px;
}
 @media screen and (min-width: 769px) {
.top_wrap {
  padding: 0;
  background: url(/story/images/pc_background.png) 0 0 / cover no-repeat;
  background-color: rgba(255, 255, 255, 0.6);
  background-blend-mode: lighten;
  animation: anim 4s ease-in-out 1s forwards;
}

@keyframes anim {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 100% 100%;
  }
}

 }


.top_main_box .title {
  width: 527px;
  margin: 0 auto;
}

.top_banner_ehon {
  display: block;
  width: 278px;
  height: 189px;
  animation: fadein 8s ease-in-out 0s forwards;
  margin: 10px auto 0;
  transition: .4s;
}


.top_text_box {
  text-align: center;
  font-size: 20px;
  line-height: 2;
  animation: fadein 8s ease-in-out 0s forwards;
  margin-top: 20px;
}

.top_text_box p + p {
  margin-top: 32px;
}


@keyframes fadein {
  0% {
    opacity: 0;
  }

  10% {
    opacity: 0;
  }

  20% {
    opacity: 0;
  }

  30% {
    opacity: 0;
  }

  40% {
    opacity: 0;
  }

  50% {
    opacity: 0;
  }

  60% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.butterfly {
  position: absolute;
  transform-origin: center 150%;
  animation: rotate1 10s linear infinite;
  animation: rotate_right 14s linear infinite;
}


.butterfly.bu-1 {
  top: 8%;
  left: 20%;
}


.butterfly.bu-2 {
  top: 19%;
  right: 24%;
  animation: rotate_left 14s linear infinite;
}

.butterfly.bu-3 {
  top: 43%;
  left: 6%;
  animation: rotate_left 14.2s linear infinite;
}

.butterfly.bu-4 {
  top: 30%;
  right: 4%;
}

.butterfly.bu-5 {
  bottom: 38%;
  right: 20%;
  animation: rotate_left 14.5s linear infinite;
}

.butterfly.bu-6 {
  right: 25%;
  bottom: 18%;
  animation: rotate_right 14.7s linear infinite;
}

.butterfly.bu-7 {
  left: 23%;
  bottom: 20%;
  animation: rotate_left 14s linear infinite;
}


@keyframes rotate_right {
  0% {
    transform: rotate(0deg) translateY(-100%) rotate(0deg);
  }

  100% {
    transform: rotate(360deg) translateY(-100%) rotate(-360deg);
  }
}

@keyframes rotate_left {
  0% {
    transform: rotate(0deg) translateY(100%) rotate(0deg);
  }

  100% {
    transform: rotate(-360deg) translateY(100%) rotate(360deg);
  }
}

.leaf {
  position: absolute;
  animation: leaf 20s linear infinite;
}

.leaf.le-1 {
  bottom: 18%;
  left: 10%;
}

.leaf.le-2 {
  top: 8%;
  right: 24%;
}

.leaf.le-3 {
  top: 44%;
  right: 7%;
}

.leaf.le-4 {
  top: 17%;
  left: 6%;
}

.leaf.le-5 {
  bottom: 22%;
  right: 16%;
}

.leaf.le-6 {
  top: 38%;
  left: 23%;
}


.leaf.le-7 {
  left: 10%;
  bottom: 38%;
}

.leaf.le-8 {
  right: 4%;
  bottom: 28%;
}

.leaf.le-9 {
  left: 31%;
  bottom: 5%;
}

@keyframes leaf {
  0% {
    transform: rotateZ(360deg);
  }

  100% {
    transform: rotateZ(0deg);
  }
}




@media screen and (max-width: 820px) {
  header {
    width: 100%;
    min-width: 100%;
  }


  @keyframes anim {
    0% {
      background-position: bottom center;
    }

    100% {
      background-position: bottom center;
    }
  }

  .text-box {
    top: 50%;
    animation: fadein 1.3s ease-in-out 0s forwards;
  }

  .main-img {
    display: none;
  }

  .sp-main-img {
    display: block;
    width: 100%;
    margin: 0 auto;
  }



  .banner_ehon {
    position: relative;
    top: 11%;
    width: 100%;
    animation: fadein 1.3s ease-in-out 0s forwards;
  }


  .text-box .text {
    margin-bottom: 1%;
    font-size: 13px;
  }

  .text-box {
    margin-bottom: 5%;
    font-size: 13px;
  }

  .butterfly img,
  .leaf img {
    width: 50%;
  }

  .main-img-box .title {
    top: 6%;
  }

  .main-img-box .title img {
    width: 70%;
  }

}


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

.top_wrap {
  /* padding: 23vw 0 20vw;
  place-items:flex-start center; */
  background: url(/story/images/sp_background.png) 0 0 / cover no-repeat;
}
.top_main_box{
  padding-bottom: 13vw;
}
.top_main_box .title {
    width: 80%;
}
.top_banner_ehon {
  width:60vw;
  height: 40.77vw;
  animation: fadein 1s ease-in-out 0s forwards;
  margin: 10px auto 0;
}
.top_text_box {
  font-size: 4.6153vw;
  line-height: 1.7;
  animation: fadein 2s ease-in-out 0s forwards;
  margin-top:6vw;
}

.top_text_box p + p {
  margin-top: 6.153vw;
}





}