.wrap {
  overflow: hidden; }

.storyWrap {
  position: relative;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-position: center top;
  background-image: url(/dreaming/assets/img/story/story_main_bg.jpg); }

.story_main {
  position: relative;
  margin: 0 auto;
  width: 1200px;
  height: 1308px; }
  .story_main h1 {
    position: absolute;
    top: 0;
    left: 168px;
    width: 863px;
    height: 252px;
    text-align: center;
    background-image: url(/dreaming/assets/img/story/story_main_title_bg.png);
    z-index: 1; }
    .story_main h1 img {
      display: inline-block;
      margin: 116px 0 0; }
  .story_main p {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 517px;
    height: 517px;
    -webkit-transition: all 800ms ease-in-out;
    -o-transition: all 800ms ease-in-out;
    transition: all 800ms ease-in-out;
    opacity: 0; }
    .story_main p:after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      display: inline-block;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      border: 2px solid #ff9acc;
      -webkit-transition: all 800ms ease-in-out;
      -o-transition: all 800ms ease-in-out;
      transition: all 800ms ease-in-out;
      -webkit-transform: scale(0.7);
      -ms-transform: scale(0.7);
      transform: scale(0.7);
      opacity: 0; }
    .story_main p.story_main__text1 {
      top: 188px;
      right: 80px; }
    .story_main p.story_main__text2 {
      top: 634px;
      left: 72px; }
      .story_main p.story_main__text2:after {
        top: -2.5%;
        right: -2.5%;
        width: 105%;
        height: 105%; }
    .story_main p.on {
      opacity: 1; }
      .story_main p.on:after {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        opacity: 1; }
  .story_main figure {
    -webkit-transition: all 800ms ease-in-out 400ms;
    -o-transition: all 800ms ease-in-out 400ms;
    transition: all 800ms ease-in-out 400ms;
    opacity: 0; }
    .story_main figure.on {
      -webkit-transform: translateX(0px);
      -ms-transform: translateX(0px);
      transform: translateX(0px);
      opacity: 1; }
  .story_main .story_main__img1 {
    position: absolute;
    top: 152px;
    left: -60px;
    -webkit-transform: translateX(-40px);
    -ms-transform: translateX(-40px);
    transform: translateX(-40px); }
  .story_main .story_main__img2 {
    position: absolute;
    top: 700px;
    right: -88px;
    -webkit-transform: translateX(40px);
    -ms-transform: translateX(40px);
    transform: translateX(40px); }
  .story_main .story_main_circle {
    position: absolute;
    display: inline-block;
    border-radius: 50%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 2px solid #ff9acc;
    -webkit-transition: all 800ms ease-in-out;
    -o-transition: all 800ms ease-in-out;
    transition: all 800ms ease-in-out;
    -webkit-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
    opacity: 0;
    z-index: 0; }
    .story_main .story_main_circle.on {
      -webkit-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
      opacity: 1; }
    .story_main .story_main_circle.circle_1 {
      top: 148px;
      right: 426px;
      width: 136px;
      height: 136px; }
    .story_main .story_main_circle.circle_2 {
      top: 560px;
      left: 433px;
      width: 212px;
      height: 212px; }
    .story_main .story_main_circle.circle_3 {
      top: 1067px;
      left: 466px;
      width: 117px;
      height: 117px; }
    .story_main .story_main_circle.circle_4 {
      top: 1147px;
      left: 550px;
      width: 50px;
      height: 50px; }
    .story_main .story_main_circle.circle_5 {
      top: 1223px;
      left: 536px;
      width: 30px;
      height: 30px; }

.story_bed {
  position: relative;
  margin: -156px auto 0;
  width: 100%;
  height: 647px;
  background-repeat: no-repeat;
  background-position: center top;
  background-image: url(/dreaming/assets/img/story/story_bed.png); }
  .story_bed h2 {
    position: absolute;
    top: 0;
    right: 50%;
    width: 505px;
    height: 224px;
    opacity: 0;
    -webkit-transform: translate(153%, 264px);
    -ms-transform: translate(153%, 264px);
    transform: translate(153%, 264px);
    -webkit-transition: all 800ms ease-in-out;
    -o-transition: all 800ms ease-in-out;
    transition: all 800ms ease-in-out;
    z-index: 12; }
    .story_bed h2.on {
      opacity: 1;
      -webkit-transform: translate(113%, 290px);
      -ms-transform: translate(113%, 290px);
      transform: translate(113%, 290px); }
  .story_bed figure {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1015px;
    height: 565px;
    opacity: 0;
    -webkit-transform: translate(-100%, -8px);
    -ms-transform: translate(-100%, -8px);
    transform: translate(-100%, -8px);
    -webkit-transition: all 800ms ease-in-out;
    -o-transition: all 800ms ease-in-out;
    transition: all 800ms ease-in-out; }
    .story_bed figure.on {
      opacity: 1;
      -webkit-transform: translate(-70%, 21px);
      -ms-transform: translate(-70%, 21px);
      transform: translate(-70%, 21px); }

.story_yume {
  margin: -198px auto 0;
  padding: 198px 0 580px;
  background-repeat: no-repeat;
  background-position: center 0px;
  background-image: url(/dreaming/assets/img/story/story_yume.jpg);
  text-align: center; }
  .story_yume h2 {
    display: block;
    margin: 0 auto;
    width: 650px;
    text-align: center;
    -webkit-transition: all 800ms ease-out;
    -o-transition: all 800ms ease-out;
    transition: all 800ms ease-out;
    -webkit-transform: translateY(40px);
    -ms-transform: translateY(40px);
    transform: translateY(40px);
    opacity: 0; }
    .story_yume h2.on {
      -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
      transform: translateY(0px);
      opacity: 1; }
  .story_yume p {
    display: block;
    margin: 70px auto 0;
    width: 650px;
    text-align: center;
    -webkit-transition: all 800ms ease-out;
    -o-transition: all 800ms ease-out;
    transition: all 800ms ease-out;
    -webkit-transform: translateY(40px);
    -ms-transform: translateY(40px);
    transform: translateY(40px);
    opacity: 0; }
    .story_yume p.on {
      -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
      transform: translateY(0px);
      opacity: 1; }

.story_pedia {
  position: relative;
  padding: 80px 0 0;
  height: 1423px;
  text-align: center;
  background-repeat: no-repeat;
  background-position: center top;
  background-image: url(/dreaming/assets/img/story/story_pedia_bg.jpg); }
  .story_pedia h2 {
    margin: 0 auto;
    width: 1200px;
    text-align: center; }
  .story_pedia .story_pedia_content {
    position: relative;
    margin: 0 auto;
    width: 1200px; }
  .story_pedia p {
    position: absolute;
    -webkit-transition: all 800ms ease-in-out;
    -o-transition: all 800ms ease-in-out;
    transition: all 800ms ease-in-out;
    opacity: 0; }
    .story_pedia p.on {
      -webkit-transform: translateX(0px) !important;
      -ms-transform: translateX(0px) !important;
      transform: translateX(0px) !important;
      opacity: 1; }
    .story_pedia p.story_pedia__text1 {
      top: 60px;
      right: 72px;
      -webkit-transform: translateX(40px);
      -ms-transform: translateX(40px);
      transform: translateX(40px); }
    .story_pedia p.story_pedia__text2 {
      top: 572px;
      left: 2px;
      -webkit-transform: translateX(-40px);
      -ms-transform: translateX(-40px);
      transform: translateX(-40px); }
    .story_pedia p.story_pedia__text3 {
      top: 932px;
      right: 62px;
      -webkit-transform: translateX(40px);
      -ms-transform: translateX(40px);
      transform: translateX(40px); }
  .story_pedia figure {
    position: absolute;
    -webkit-transition: all 800ms ease-in-out 400ms;
    -o-transition: all 800ms ease-in-out 400ms;
    transition: all 800ms ease-in-out 400ms;
    opacity: 0; }
    .story_pedia figure.on {
      -webkit-transform: translateX(0px) !important;
      -ms-transform: translateX(0px) !important;
      transform: translateX(0px) !important;
      opacity: 1; }
    .story_pedia figure.story_pedia__img1 {
      top: 48px;
      left: -32px;
      -webkit-transform: translateX(-40px);
      -ms-transform: translateX(-40px);
      transform: translateX(-40px); }
    .story_pedia figure.story_pedia__img2 {
      top: 474px;
      right: -54px;
      -webkit-transform: translateX(40px);
      -ms-transform: translateX(40px);
      transform: translateX(40px); }
    .story_pedia figure.story_pedia__img3 {
      top: 876px;
      left: -32px;
      -webkit-transform: translateX(-40px);
      -ms-transform: translateX(-40px);
      transform: translateX(-40px); }

.story_diagram {
  position: relative;
  margin: 0 auto;
  padding: 80px 0 75px;
  width: 100%;
  text-align: center;
  background-repeat: no-repeat;
  background-position: center top;
  background-image: url(/dreaming/assets/img/story/story_diagram_bg.jpg); }
  .story_diagram h2 {
    text-align: center; }
  .story_diagram a {
    display: inline-block; }
  .story_diagram .story_diagram__img {
    position: relative;
    margin: 54px auto 0;
    width: 396px;
    text-align: center; }
    .story_diagram .story_diagram__img a:after {
      content: url(/dreaming/assets/img/story/story_diagram_btn_zoom.png);
      position: absolute;
      top: -30px;
      right: -30px;
      width: 72px;
      height: 73px; }
  .story_diagram .story_diagram__link {
    margin: 40px auto 0;
    width: 396px;
    text-align: center; }

.cboxIframe {
  background-size: 75% auto;
  background-image: url(/dreaming/sp/assets/img/story/diagram_bg.gif); }