.story {
  text-align: center;
}

/* intro */
.intro {
  position: relative;
  padding: 120px 0 120px;
  background-color: #97d2ba;
  background-image: url("../img/story/story_bg01.jpg"), url("../img/story/story_bg02.jpg");
  background-position: center top, center 375px;
  background-repeat: no-repeat, no-repeat;
}

.intro-title {
  margin-bottom: 440px;
}

.intro-balloon {
  position: absolute;
  left: 50%;
}

.intro-balloon00 {
  top: 242px;
  margin-left: -491px;
}

.intro-balloon01 {
  top: 160px;
  margin-left: -601px;
}

.intro-balloon02 {
  top: 90px;
  margin-left: 260px;
}

.intro-balloon03 {
  top: 372px;
  margin-left: -678px;
}

.intro-balloon04 {
  top: 418px;
  margin-left: 510px;
}

.intro-balloon05 {
  top: 515px;
  margin-left: -635px;
}

.intro-balloon06 {
  top: 529px;
  margin-left: 335px;
}

/* devil */
.devil {
  position: relative;
  padding: 118px 0 106px;
  background: url("../img/story/devil_bg.png") center top repeat;
}

.devil:before, .devil:after {
  content: '';
  width: 100%;
  height: 20px;
  position: absolute;
  z-index: 1;
  left: 0;
  background-position: center top;
  background-repeat: no-repeat;
}

.devil:before {
  top: -20px;
  background-image: url("../img/story/devil_bg_top.png");
}

.devil:after {
  bottom: -20px;
  background-image: url("../img/story/devil_bg_bottom.png");
}

.devil-text01 {
  margin-bottom: 73px;
}

.devil-text01 img {
  padding-left: 9px;
}

.devil-image {
  position: absolute;
  left: 50%;
}

.devil-image01 {
  top: 49px;
  margin-left: -700px;
}

.devil-image02 {
  top: -155px;
  margin-left: 154px;
}

/* adventure */
.adventure {
  position: relative;
  height: 1984px;
  background: url("../img/story/adventure_bg_bottom.png") center bottom no-repeat;
}

.adventure:before {
  content: '';
  width: 100%;
  height: 100%;
  height: calc(100% - 333px);
  position: absolute;
  top: 0;
  left: 0;
  background: url("../img/story/adventure_bg_repeat.png") center 28px repeat;
}

.adventure-text01 {
  margin-bottom: 42px;
  padding-top: 453px;
}

.adventure-text01 img {
  padding-right: 3px;
}

.adventure-image {
  position: absolute;
  left: 50%;
}

.adventure-image01 {
  top: 44px;
  margin-left: -398px;
}

.adventure-image02 {
  top: 36px;
  margin-left: 40px;
}

.adventure-balloon {
  position: absolute;
  left: 50%;
}

.adventure-balloon01 {
  top: 503px;
  margin-left: -558px;
}

.adventure-balloon02 {
  top: 591px;
  margin-left: 359px;
}

.adventure-balloon03 {
  top: 938px;
  margin-left: -672px;
}

.adventure-balloon04 {
  top: 1224px;
  margin-left: 491px;
}

.adventure-balloon05 {
  top: 1014px;
  margin-left: 518px;
}

.adventure-balloon06 {
  top: 1175px;
  margin-left: 361px;
}

/* stage */
.stage {
  width: 876px;
  height: 1200px;
  position: relative;
  margin: 0 auto;
  padding: 138px 0 116px;
  background: url("../img/story/stage_bg01.png") 0 0 no-repeat;
}

.stage-title {
  position: absolute;
  width: 100%;
  top: 112px;
  left: 0;
}

.stage-map-frame {
  height: 480px;
  overflow: hidden;
  position: relative;
  margin: 0 4px 123px;
}

.stage-map-item {
  position: absolute;
  top: 0;
  left: 0;
}

.stage-map-item.is-moving {
  -webkit-animation: round-trip 150s linear infinite;
          animation: round-trip 150s linear infinite;
}

.stage-text01 {
  position: absolute;
  width: 100%;
  top: 605px;
  left: -2px;
}

.stage-list {
  width: 528px;
  margin: 0 auto;
  overflow: hidden;
}

.stage-item {
  width: 254px;
}

.stage-item:nth-child(odd) {
  float: left;
}

.stage-item:nth-child(even) {
  float: right;
}

.stage-item:nth-child(n+3) {
  margin-top: 20px;
}

.stage-image {
  position: absolute;
  left: 50%;
}

.stage-image01 {
  top: 706px;
  margin-left: -558px;
}

.stage-image02 {
  top: 765px;
  margin-left: 239px;
}

@-webkit-keyframes round-trip {
  0%, 100% {
    -webkit-transform: translateX(-0.1%);
            transform: translateX(-0.1%);
  }
  50% {
    -webkit-transform: translateX(-77.5%);
            transform: translateX(-77.5%);
  }
}

@keyframes round-trip {
  0%, 100% {
    -webkit-transform: translateX(-0.1%);
            transform: translateX(-0.1%);
  }
  50% {
    -webkit-transform: translateX(-77.5%);
            transform: translateX(-77.5%);
  }
}