.storyWrap {
  position: relative;
  width: 100%;
  overflow: hidden; }

img {
  width: 100%; }

.story_main {
  position: relative;
  padding: 0 0 4vw;
  width: 100%;
  height: 219.6vw;
  background-size: 100% auto;
  background-image: url(/dreaming/sp/assets/img/story/story_main_bg.jpg); }
  .story_main h1 {
    width: 100%; }
  .story_main p {
    position: absolute;
    width: 77%; }
    .story_main p.story_main__text1 {
      top: 42.2vw;
      right: 0;
      z-index: 2; }
    .story_main p.story_main__text2 {
      top: 128vw;
      left: 0vw;
      width: 82%;
      z-index: 4; }
  .story_main figure {
    position: absolute; }
    .story_main figure.story_main__img1 {
      top: 22vw;
      left: 0vw;
      width: 79%;
      z-index: 1; }
    .story_main figure.story_main__img2 {
      top: 109vw;
      right: 0;
      width: 83%;
      z-index: 3; }

.story_bed {
  background-color: #fafafa; }

.story_yume {
  margin: -12vw 0 0;
  padding: 21vw 0 96.8vw;
  width: 100%;
  text-align: center;
  background-color: #02060f;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center -39vw;
  background-image: url(/dreaming/sp/assets/img/story/story_yume_bg.jpg); }
  .story_yume .story_yume_text_2 {
    display: inline-block;
    width: 86.4%; }
  .story_yume .story_yume_text_1 {
    display: inline-block;
    margin: 10.3vw 0 0;
    width: 77%; }

.story_pedia {
  padding: 11vw 0 0.1vw;
  text-align: center;
  background-size: 100% auto;
  background-image: url(/dreaming/sp/assets/img/story/story_pedia_bg.jpg); }
  .story_pedia h2 {
    display: inline-block;
    width: 66%; }
  .story_pedia p {
    margin: 5vw 0 8.6vw 4%;
    width: 96%; }
  .story_pedia .story_pedia__text2 {
    margin: 5vw 4% 8vw 0; }

.story_diagram {
  padding: 13vw 0 5vw;
  text-align: center;
  background-size: 100% auto;
  background-image: url(/dreaming/sp/assets/img/story/story_diagram_bg.jpg); }
  .story_diagram h2 {
    display: inline-block;
    width: 60%; }
  .story_diagram .story_diagram__img {
    position: relative;
    display: inline-block;
    margin: 6vw 0 14vw;
    width: 54%; }
    .story_diagram .story_diagram__img a:after {
      content: '';
      position: absolute;
      bottom: -6vw;
      right: -10vw;
      width: 18vw;
      height: 18vw;
      background-size: 100% auto;
      background-image: url(/dreaming/sp/assets/img/story/story_diagram_btn_zoom.png); }
  .story_diagram .story_diagram__link {
    display: inline-block;
    width: 60%; }

.popframe {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  text-align: center;
  -webkit-transition: all 400ms ease-out;
  -o-transition: all 400ms ease-out;
  transition: all 400ms ease-out;
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  background-size: 80vw;
  background-image: url(/dreaming/sp/assets/img/story/diagram_bg.gif);
  z-index: 100000; }
  .popframe.on {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }
  .popframe iframe {
    width: 100%;
    height: 135vw;
    background-color: transparent; }

.btn_iframe_close {
  margin: 4vw auto 0;
  width: 50vw;
  text-align: center; }

/*# sourceMappingURL=story.css.map */