/* ---------------------------------------

    autumn

--------------------------------------- */

.season-title {
    color: #D59A6C !important;
}

/* ---------------------------------------
    scene01
--------------------------------------- */

.story-wrapper .scene01 {
    background: #F9E7D1;
    color: #564f46;
    padding-bottom: 0;
}

.story-wrapper .scene01 .hat {
    float: right;
    shape-margin: 5px;
    shape-outside: url(../img/aut/hat.png);
    shape-image-threshold: 0.5;
    width: 90px;
    height: auto;
}

.story-wrapper .scene01 .hat img {
    width: 90px;
}


.story-wrapper .scene01 .layar {
    position: relative;
    z-index: 10;
}

.story-wrapper .scene01 p.doodle {
    text-align: right;
    margin-top: -60px;
}

.story-wrapper .scene01 .doodle img {
    width: 70%;
    height: auto;
}

/* ---------------------------------------
    scene02
--------------------------------------- */

.story-wrapper .scene02 {
    background: #fff5f2;
    color: #423937;
    padding-top: 120px;
}

/* ---------------------------------------
    scene03
--------------------------------------- */

.story-wrapper .scene03 .son {
    text-align: right;
}
.story-wrapper .scene03 .son img {
    width: 80%;
}

/* ---------------------------------------
    scene04
--------------------------------------- */

.story-wrapper .scene04 {
    padding-top: 0;
}

.story-wrapper .scene04 .ball {
    position: relative;
    padding: 80px 0 80px;
}

.story-wrapper .scene04 .ball img {
    position: absolute;
    opacity: 0;
}

@keyframes flyAlongPath {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    offset-distance: 100%;
    opacity: 1;
  }
}

.ball img.fly-in {
  offset-path: path("M 0 120 C 80 -10, 200 -30, 280 10"); /* SVGのような放物線パス */
  offset-rotate: auto;
  animation: flyAlongPath 1.3s ease-out forwards;
  position: absolute;
  width: 10%;
  top: 0;
  left: 0;
  opacity: 0;
}

/* ---------------------------------------
    scene05
--------------------------------------- */

.story-wrapper .scene05 {
    padding-top: 0;
}

/* ---------------------------------------
    scene06
--------------------------------------- */

.story-wrapper .scene06 {
    padding-bottom: 0;
}

.story-wrapper .scene06 .ochiba img {
    margin-bottom: 40px;
}

.story-wrapper .scene06 .ochiba img {
    width: 60%;
}