.parallax-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background-color: #000;
}

.parallax-bg>li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100vh + 150px);
  height: calc(100dvh + 150px);
  -webkit-transition: 1s;
  transition: 1s;
  opacity: 0;
}

.parallax-bg>li.on {
  opacity: 1;
}

.parallax-bg>li img {
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.parallax-section {
  z-index: 10;
  width: 100%;
  height: min(84.5454545455vw, 930px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.story-parallax01 {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  padding: min(100px, 9%) 0 0;
}

.story-parallax01-text {
  position: relative;
}

.story-parallax01-text>li:nth-of-type(1) {
  margin: min(40px, 3.3333333333%) auto 0;
  width: min(470px, 39.1666666667%);
}

.story-parallax01-text>li:nth-of-type(2) {
  margin: min(60px, 5%) auto 0;
  width: min(1060px, 88.3333333333%);
}

.story-parallax02-text {
  position: relative;
}

.story-parallax02-text>li:nth-of-type(1) {
  margin: 0 auto 0;
  width: min(660px, 55%);
}

.story-parallax03-text {
  position: relative;
}

.story-parallax03-text>li:nth-of-type(1) {
  margin: 0 auto 0;
  width: min(1100px, 91.6666666667%);
}

.story-parallax03-text>li:nth-of-type(2) {
  margin: min(60px, 5%) auto 0;
  width: min(800px, 66.6666666667%);
}

.story-diagram {
  padding: min(100px, 9%) 20px;
  background-image: url(../img/common/bg_main.jpg);
  background-repeat: repeat-y;
  background-size: 100%;
}

.story-diagram-pic {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}

.story-diagram-pic img {
  width: 100%;
}

.story-diagram-share {
  width: 440px;
  display: block;
  margin: 0px auto 0;
  /* margin: 60px auto 0; */
}

@media screen and (max-width: 759.98px) {
  .parallax-bg {
    background-size: 100px;
  }

  .story-parallax01 {
    padding-top: 50px;
    height: min(149.3333333333vw, 1120px);
  }

  .story-parallax01-text>li:nth-of-type(1) {
    margin-top: 8vw;
    width: 62.6666666667vw;
  }

  .story-parallax01-text>li:nth-of-type(2) {
    margin-top: 8vw;
    width: 78.6666666667vw;
  }

  .story-parallax02 {
    height: min(141.3333333333vw, 1060px);
  }

  .story-parallax02-text>li:nth-of-type(1) {
    width: 88vw;
  }

  .story-parallax03 {
    height: min(146.6666666667vw, 1100px);
  }

  .story-parallax03-text>li:nth-of-type(1) {
    width: 88.6666666667vw;
  }

  .story-parallax03-text>li:nth-of-type(2) {
    margin-top: 8vw;
    width: 70.6666666667vw;
  }

  .story-diagram {
    background-image: url(../img/common/bg_main_sp.jpg);
    padding: 50px 15px;
  }

  .story-diagram-pic::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(../img/common/icon_zoom.png);
    background-repeat: no-repeat;
    background-position: bottom 2.6666666667vw left 2.6666666667vw;
    background-size: 16vw;
  }

  .story-diagram-share {
    margin-top: 40px;
    width: 72vw;
  }
}

@media screen and (min-width: 759.99px),
print {
  .story-diagram-pic {
    pointer-events: none;
  }
}

@media (any-hover: hover) {
  .story-diagram-share {
    -webkit-transition: 0.3s;
    transition: 0.3s;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    margin-top: 50px;
  }

  .story-diagram-share:hover {
    -webkit-filter: brightness(1.5);
    filter: brightness(1.5);
  }
}