@-webkit-keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes flicker {
  0% {
    opacity: 0.944581251;
  }
  5% {
    opacity: 0.2051367795;
  }
  10% {
    opacity: 0.574743788;
  }
  15% {
    opacity: 0.099930375;
  }
  20% {
    opacity: 0.2069252424;
  }
  25% {
    opacity: 0.1960963157;
  }
  30% {
    opacity: 0.2282269283;
  }
  35% {
    opacity: 0.8700293111;
  }
  40% {
    opacity: 0.1495939207;
  }
  45% {
    opacity: 0.6076397167;
  }
  50% {
    opacity: 0.6348250058;
  }
  55% {
    opacity: 0.0133579049;
  }
  60% {
    opacity: 0.1678312473;
  }
  65% {
    opacity: 0.2477419483;
  }
  70% {
    opacity: 0.5844712854;
  }
  75% {
    opacity: 0.5665551703;
  }
  80% {
    opacity: 0.7707857796;
  }
  85% {
    opacity: 0.5555043046;
  }
  90% {
    opacity: 0.3841787769;
  }
  95% {
    opacity: 0.4710273244;
  }
  100% {
    opacity: 0.1137087382;
  }
}
@keyframes flicker {
  0% {
    opacity: 0.944581251;
  }
  5% {
    opacity: 0.2051367795;
  }
  10% {
    opacity: 0.574743788;
  }
  15% {
    opacity: 0.099930375;
  }
  20% {
    opacity: 0.2069252424;
  }
  25% {
    opacity: 0.1960963157;
  }
  30% {
    opacity: 0.2282269283;
  }
  35% {
    opacity: 0.8700293111;
  }
  40% {
    opacity: 0.1495939207;
  }
  45% {
    opacity: 0.6076397167;
  }
  50% {
    opacity: 0.6348250058;
  }
  55% {
    opacity: 0.0133579049;
  }
  60% {
    opacity: 0.1678312473;
  }
  65% {
    opacity: 0.2477419483;
  }
  70% {
    opacity: 0.5844712854;
  }
  75% {
    opacity: 0.5665551703;
  }
  80% {
    opacity: 0.7707857796;
  }
  85% {
    opacity: 0.5555043046;
  }
  90% {
    opacity: 0.3841787769;
  }
  95% {
    opacity: 0.4710273244;
  }
  100% {
    opacity: 0.1137087382;
  }
}
.animation_point {
  border: 5px solid green;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  opacity: 1;
  display: block;
  height: 10px;
  width: 10px;
  opacity: 0;
}

.animation_point.animated {
  border-color: hotpink;
}

.anchor_point {
  border: 5px solid red;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  opacity: 0;
  display: block;
}

.siteheader .mainmenu li a[href*=story] {
  background-color: rgba(205, 205, 203, 0.5);
  text-decoration: none;
}

body.story #contents {
  font-size: 0;
  line-height: 1;
  min-height: 100vh;
}
body.story #contents::before {
  content: "";
  width: 100vw;
  height: 195.996vw;
  /*background: url("/harvestella/assets/img/story/bg.png") no-repeat left top / cover; position: absolute; left: 0; top: 0; z-index: 0;*/
}
body.story #contents .contents_bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100%;
}
body.story #contents .contents_bg img {
  width: 100%;
  height: auto;
}
body.story #contents section.new::before {
  content: "";
  background: url("/harvestella/assets/img/new.png") no-repeat center center/100% 100%;
  width: 13.184vw;
  height: 13.184vw;
  position: absolute;
  left: 55%;
  top: -5%;
  z-index: 10;
  margin-left: 6.738vw;
}
body.story #contents .sec01 {
  z-index: 10;
  padding: 53.711vw 0 19.531vw;
}
body.story #contents .sec01 .pagetitle {
  position: absolute;
  left: 4.883vw;
  top: -3.516vw;
  z-index: 10;
}
body.story #contents .sec01 .pagetitle img {
  height: 7.129vw;
  width: auto;
}
body.story #contents .sec01 .wrap {
  /*height: sp(1460); */
  /*
  nav{position: absolute; left: 0; bottom:sp(173); width:sp(960); height: sp(40);
    .swiper-button{background: none; border: none; width: sp(292); font-size: sp(30);
      letter-spacing: 0.28em; margin: 0; height: sp(40); left: 50%; top: auto;
      transform: translate(-50%,0); padding:0; line-height: 1; text-align: center; text-indent:0.14em;
      transition: opacity 0.4s;
      &::before{content: ''; background: url("/harvestella/assets/img/story/arr01.png") no-repeat left top / sp(292) sp(30);
      width: sp(100); height: sp(40); position: absolute; left: 0; top: sp(3); z-index: 100;}
      &::after{content: ''; background: url("/harvestella/assets/img/story/arr01.png") no-repeat right top / sp(292) sp(30);
      width: sp(100); height: sp(40); position: absolute; left:auto; right:0; z-index: 100; top: sp(3);}
      &.swiper-button-prev{left: 50%;
        &::after{display: none; opacity: 0;}
      }
      &.swiper-button-next{right: auto;
        &::before{display: none; opacity: 0;}
      }
      &.swiper-button-disabled{opacity: 0; pointer-events: none;
        &:hover{opacity: 0;}
      }
      &{transition: 0.4s $easeOutQuart;}
      &:hover {opacity: 0.7;}
    }
  }
  */
}
body.story #contents .sec01 .wrap .swiper-container {
  width: 91.797vw;
  overflow: hidden;
  margin: 0 auto 0 0;
}
body.story #contents .sec01 .wrap .swiper-container .item {
  padding: 19.434vw 8.301vw 0 11.719vw;
  width: 91.797vw;
  box-sizing: border-box;
}
body.story #contents .sec01 .wrap .swiper-container .item p {
  font-size: 2.832vw;
  line-height: 5.469vw;
  letter-spacing: 0.4em;
  font-feature-settings: "palt";
}
body.story #contents .sec01 .wrap .swiper-container .item p b {
  color: #aa8258;
  font-size: 3.223vw;
}
body.story #contents .sec01 .wrap .swiper-container .item p + p {
  margin-top: 5.176vw;
}
body.story #contents .sec01 .wrap .swiper-container .item p span {
  display: inline-block;
  position: relative;
  top: 0.3em;
  margin-right: -0.36em;
}
body.story #contents .sec01 .wrap .swiper-container .item p span i {
  display: inline-block;
  position: relative;
  left: -0.36em;
}
body.story #contents .sec01 .wrap .swiper-container::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 500vw;
  background: url("/harvestella/assets/img/story/bg_repeat.png") repeat-y left top/100vw auto;
}
body.story #contents .sec02 {
  padding: 25.391vw 0 0;
  padding-bottom: 0;
}
body.story #contents .sec02 header {
  text-align: center;
  padding-bottom: 6.836vw;
}
body.story #contents .sec02 header h2 {
  margin-bottom: 2.93vw;
}
body.story #contents .sec02 header h2 img {
  width: 100%;
  height: auto;
}
body.story #contents .sec02 header p {
  font-size: 2.637vw;
  letter-spacing: 0.42em;
  font-family: "Noto Serif JP";
  text-indent: 0.21em;
}
body.story #contents .sec02 .wrap .swiper-container {
  overflow: hidden;
  margin: 0 auto 0;
}
body.story #contents .sec02 .wrap .swiper-container .item img {
  width: 100%;
  height: auto;
}
body.story #contents .sec02 .wrap nav {
  height: 26.758vw;
}
body.story #contents .sec02 .wrap nav .swiper-button {
  background: none;
  border: none;
  width: 19.922vw;
  height: 19.922vw;
  border: 1px solid #a4a4a4;
  background: #fff;
  font-size: 3.32vw;
  font-family: "Noto Serif JP";
  border-radius: 50%;
  letter-spacing: 0.38em;
  margin: 0;
  left: 50%;
  top: auto;
  text-indent: 0.19em;
  transform: translate(-50%, 0);
  padding: 0;
  line-height: 1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: 0.4s;
}
body.story #contents .sec02 .wrap nav .swiper-button {
  transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
body.story #contents .sec02 .wrap nav .swiper-button:hover {
  transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  background-color: rgba(255, 255, 255, 0.75);
}
body.story #contents .sec02 .wrap nav .swiper-button small {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.787vw;
  letter-spacing: 0.28em;
  text-indent: 0.14em;
  padding: 0.684vw;
}
body.story #contents .sec02 .wrap nav .swiper-button span {
  padding: 0.684vw;
}
body.story #contents .sec02 .wrap nav .swiper-button::before {
  content: "";
  background: url("/harvestella/assets/img/story/arr02.png") no-repeat center top/5.273vw 14.453vw;
  width: 19.922vw;
  height: 1.27vw;
  position: absolute;
  left: 0;
  top: 2.539vw;
  z-index: 100;
  transition: 0.4s;
}
body.story #contents .sec02 .wrap nav .swiper-button::after {
  content: "";
  background: url("/harvestella/assets/img/story/arr02.png") no-repeat center bottom/5.273vw 14.453vw;
  width: 19.922vw;
  height: 1.27vw;
  position: absolute;
  left: auto;
  right: 0;
  z-index: 100;
  bottom: 2.93vw;
  transition: 0.4s;
}
body.story #contents .sec02 .wrap nav .swiper-button.swiper-button-prev::after, body.story #contents .sec02 .wrap nav .swiper-button.swiper-button-prev::before {
  transform: scale(-1, 1);
}
body.story #contents .sec02 .wrap nav .swiper-button.swiper-button-disabled {
  opacity: 0;
}
body.story #contents .sec02 .wrap nav .swiper-button.swiper-button-disabled::after {
  right: -1.953vw;
}
body.story #contents .sec02 .wrap nav .swiper-button.swiper-button-disabled::before {
  left: -1.953vw;
}
body.story #contents .sec02 h3 {
  text-align: center;
  padding: 15.43vw 0 6.445vw;
  font-size: 2.344vw;
  letter-spacing: 1.36em;
  text-indent: 0.68em;
  font-family: "Cormorant Garamond", serif;
  background: url("/harvestella/assets/img/story/hr.png") no-repeat center bottom/100% auto;
  margin-bottom: 4.395vw;
}
body.story #contents .sec02 h3 ~ p {
  font-size: 4.102vw;
  letter-spacing: 0.48em;
  text-indent: 0.24em;
  text-align: center;
}
body.story #contents .sec03 {
  text-align: center;
  padding-bottom: 19.531vw;
}
body.story #contents .sec03 h3 {
  text-align: center;
  padding: 15.43vw 0 6.445vw;
  font-size: 2.344vw;
  letter-spacing: 0.8em;
  text-indent: 0.68em;
  font-family: "Cormorant Garamond", serif;
  margin-bottom: 4.395vw;
  display: inline-block;
  margin-left: 0;
}
body.story #contents .sec03 h3 ~ p {
  font-size: 4.102vw;
  letter-spacing: 0.48em;
  text-indent: 0.24em;
  text-align: center;
  display: inline-block;
}
body.story #contents .sec04,
body.story #contents .sec05,
body.story #contents .sec07,
body.story #contents .sec06,
body.story #contents .sec08 {
  padding-bottom: 25.391vw;
}
body.story #contents .sec04 {
  padding-bottom: 5.859vw;
}
body.story #contents .sec07 {
  padding-bottom: 5.859vw;
}
body.story #contents .sec06::before {
  top: 0% !important;
}
body.story #contents .sec06 h2::before {
  background: none !important;
}
body.story #contents .sec07::before {
  top: 0% !important;
}
body.story #contents .sec07 h2::before {
  background: none !important;
}
body.story #contents .sec08::before {
  top: 0% !important;
}
body.story #contents .sec08 h2::before {
  background: none !important;
}
body.story #contents .movie_layout header {
  padding-bottom: 9.375vw;
}
body.story #contents .movie_layout header h2 {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
body.story #contents .movie_layout header h2::before {
  content: "";
  background: url("/harvestella/assets/img/story/hr.png") no-repeat center top/100vw auto;
  width: 100vw;
  height: 1.563vw;
  position: absolute;
  left: 0;
  top: 6.445vw;
}
body.story #contents .movie_layout header h2 small {
  font-family: "Cormorant Garamond", serif;
  font-size: 2.344vw;
  letter-spacing: 1.36em;
  text-indent: 0.68em;
}
body.story #contents .movie_layout header h2 span {
  font-size: 4.102vw;
  letter-spacing: 0.42em;
  text-indent: 0.21em;
  font-family: "Noto Serif JP";
  padding: 10.547vw 0 0;
}
body.story #contents .movie_layout .pv ~ p {
  font-size: 2.832vw;
  line-height: 5.859vw;
  letter-spacing: 0.46em;
  padding: 32.813vw 11.719vw 13vw;
  background: url("/harvestella/assets/img/story/bg.jpg") repeat-y left top/100% auto;
  margin-top: -25vw;
}
body.story #contents .movie_layout .img_slider ~ .texts {
  padding: 42.813vw 11.719vw 13vw;
  margin-top: -33.5vw;
}
body.story #contents .movie_layout .img_slider ~ .texts,
body.story #contents .movie_layout .pv ~ .texts {
  padding: 32.813vw 11.719vw 13vw;
  background: url("/harvestella/assets/img/story/bg.jpg") repeat-y left top/100% auto;
  margin-top: -25vw;
}
body.story #contents .movie_layout .img_slider ~ .texts p,
body.story #contents .movie_layout .pv ~ .texts p {
  font-size: 2.832vw;
  line-height: 5.859vw;
  letter-spacing: 0.46em;
}
body.story #contents .movie_layout .img_slider ~ .texts p.chara,
body.story #contents .movie_layout .pv ~ .texts p.chara {
  padding: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 8vw 0 0;
}
body.story #contents .movie_layout .img_slider ~ .texts p.chara img,
body.story #contents .movie_layout .pv ~ .texts p.chara img {
  width: 100vw;
}
body.story #contents .movie_layout .img_slider ~ .texts p.chara span,
body.story #contents .movie_layout .pv ~ .texts p.chara span {
  font-size: 3.32vw;
  padding: 5.5vw 0 0;
}
body.story #contents .movie_layout .img_slider ~ .texts p.chara span b,
body.story #contents .movie_layout .pv ~ .texts p.chara span b {
  font-size: 5.566vw;
}
body.story #contents .movie_layout .pv {
  position: relative;
  left: 0;
  top: 0;
  z-index: 300;
  width: 100vw;
  height: 60.449vw;
  overflow: hidden;
}
body.story #contents .movie_layout .pv .mask {
  display: block;
  width: 100vw;
  height: 60.449vw;
  -webkit-mask-image: url("../img/story/mask02.png");
  -webkit-mask-mode: alpha;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-position: center center;
  z-index: 10;
  transition: -webkit-mask-size 0.5s;
}
body.story #contents .movie_layout .pv .bg_movie_wrapper {
  display: flex;
  width: 100vw;
  height: 60.449vw;
  position: relative;
  z-index: 0;
  justify-content: center;
}
body.story #contents .movie_layout .pv .bg_movie_wrapper iframe {
  width: 112.5vw !important;
  height: 63.281vw !important;
  margin-top: -1.367vw;
  pointer-events: none;
  transform: scale(1.08);
}
body.story #contents .movie_layout.movie_full .pv ~ p {
  font-size: 2.832vw;
  line-height: 5.859vw;
  letter-spacing: 0.46em;
  padding: 7.813vw 11.719vw 0;
  background: none;
  margin-top: 0;
}
body.story #contents .movie_layout.movie_full .pv {
  position: relative;
  left: 0;
  top: 0;
  z-index: 300;
  width: 100vw;
  height: 60.449vw;
  overflow: hidden;
}
body.story #contents .movie_layout.movie_full .pv .mask {
  display: block;
  width: 100vw;
  height: 60.449vw;
  -webkit-mask-image: url("../img/story/mask.png");
  -webkit-mask-mode: alpha;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-position: center center;
  z-index: 10;
  transition: -webkit-mask-size 0.5s;
}
body.story #contents .movie_layout.movie_full .pv .bg_movie_wrapper {
  display: flex;
  width: 100vw;
  height: 60.449vw;
  position: relative;
  z-index: 0;
  justify-content: center;
}
body.story #contents .movie_layout.movie_full .pv .bg_movie_wrapper iframe {
  width: 112.5vw !important;
  height: 63.281vw !important;
  margin-top: -1.367vw;
  pointer-events: none;
  transform: scale(1.08);
}
body.story #contents .movie_layout .img_slider {
  position: relative;
  left: 5.078vw;
  top: 0;
  z-index: 300;
  width: 89.844vw;
  height: auto;
  overflow: hidden;
}
body.story #contents .movie_layout .img_slider .swiper-container {
  width: 89.844vw;
  height: 50.781vw;
  position: relative;
  z-index: 0;
  justify-content: center;
}
body.story #contents .movie_layout .img_slider .mask {
  display: block;
  width: 89.844vw;
  height: 50.781vw;
  -webkit-mask-image: url("../img/current/mask.png");
  -webkit-mask-mode: alpha;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-position: center center;
  z-index: 10;
  transition: -webkit-mask-size 0.5s;
}
body.story #contents .movie_layout .img_slider .item img {
  width: 100%;
  height: auto;
}
body.story #contents .movie_layout .swiper-pagination {
  position: relative;
  z-index: 100;
}
body.story #contents .movie_layout .swiper-pagination .swiper-pagination-bullet {
  width: 1.172vw;
  height: 1.172vw;
  border-radius: 0;
  transform: rotate(45deg);
  margin: 3.32vw 1.172vw;
  background: #333;
  opacity: 1;
  padding: 0;
}
body.story #contents .movie_layout .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #a0a0a0;
  opacity: 1;
}

@media screen and (min-width: 1024px) {
  /*  pc 1024px ~
  ************************************/
  body.story #contents {
    padding: 0;
  }
  body.story #contents::before {
    content: "";
    width: 1920px;
    height: 1262px;
    /*background: url("/harvestella/assets/img/story/bg@pc.png") no-repeat left top / cover; position: absolute; left: 50%; top: 0; z-index: 0; margin-left: -960px;*/
  }
  body.story #contents .contents_bg {
    position: absolute;
    left: 50%;
    height: 1262px;
    margin-left: -960px;
    width: 1920px;
  }
  body.story #contents .contents_bg img {
    width: 100%;
    height: auto;
  }
  body.story #contents::after {
    content: "";
    width: 100vw;
    height: 1262px;
    background: url("/harvestella/assets/img/story/bg_repeat@pc.png") repeat-x left top/100px 1262px;
    position: absolute;
    right: 50%;
    top: 0;
    z-index: 100;
    margin-right: 860px;
  }
  body.story #contents section.new::before {
    content: "";
    background: url("/harvestella/assets/img/story/new.png") no-repeat center center/100% 100%;
    width: 95px;
    height: 96px;
    top: -64px;
    left: 50%;
    z-index: 10;
    margin-left: 80px;
  }
  body.story #contents .sec01 {
    padding: 340px 0 140px;
  }
  body.story #contents .sec01 .wrap {
    width: 1280px;
    margin: 0 auto;
  }
  body.story #contents .sec01 .pagetitle {
    position: absolute;
    left: 52px;
    top: -27px;
  }
  body.story #contents .sec01 .pagetitle img {
    height: 59px;
    width: auto;
  }
  body.story #contents .sec01 .wrap {
    height: 714px;
    /*
    nav{position: absolute; left: 0; bottom:69px; width:640px; height: 13px;
      .swiper-button{background: none; border: none; width: 187px; font-size:18px; height:13px;
        &::before{content: ''; background: url("/harvestella/assets/img/story/arr01.png") no-repeat left top / 187px 13px;
        width: 40px; height: 13px; position: absolute; left: 0; top: 5px; z-index: 100;}
        &::after{content: ''; background: url("/harvestella/assets/img/story/arr01.png") no-repeat right top / 187px 13px;
        width: 40px; height: 13px; position: absolute; left:auto; right:0; z-index: 100; top: 5px;}
        &.swiper-button-prev{left: 50%;
          &::after{display: none; opacity: 0;}
        }
        &.swiper-button-next{right: auto;
          &::before{display: none; opacity: 0;}
        }
        &.swiper-button-disabled{opacity: 0;}
      }
    }
    */
  }
  body.story #contents .sec01 .wrap .swiper-container {
    width: 720px;
  }
  body.story #contents .sec01 .wrap .swiper-container .item {
    padding: 87px 0 0 50px;
    width: 640px;
  }
  body.story #contents .sec01 .wrap .swiper-container .item p {
    font-size: 16px;
    line-height: 37px;
  }
  body.story #contents .sec01 .wrap .swiper-container .item p b {
    color: #aa8258;
    font-size: 19px;
  }
  body.story #contents .sec01 .wrap .swiper-container .item p + p {
    margin-top: 39px;
  }
  body.story #contents .sec01 .wrap .swiper-container::after {
    display: none;
  }
  body.story #contents .sec02 {
    padding: 218px 69px 0 0;
    padding-bottom: 0;
  }
  body.story #contents .sec02 header {
    padding-bottom: 70px;
  }
  body.story #contents .sec02 header h2 {
    margin-bottom: 30px;
    margin-right: -69px;
  }
  body.story #contents .sec02 header h2 img {
    width: 1024px;
    height: auto;
  }
  body.story #contents .sec02 header p {
    font-size: 24px;
  }
  body.story #contents .sec02 .wrap {
    margin-right: -69px;
  }
  body.story #contents .sec02 .wrap .swiper-container {
    overflow: hidden;
    margin: 0 auto 0;
  }
  body.story #contents .sec02 .wrap .swiper-container .item img {
    width: 100%;
    height: auto;
  }
  body.story #contents .sec02 .wrap .swiper-container::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 500vw;
    background: url("/harvestella/assets/img/story/bg_repeat.png") repeat-y left top/100vw auto;
    display: none;
  }
  body.story #contents .sec02 .wrap nav {
    height: 196px;
    position: absolute;
    left: 50%;
    margin-left: 473px;
    top: -224px;
  }
  body.story #contents .sec02 .wrap nav .swiper-button {
    width: 156px;
    height: 156px;
    border: 1px solid #a4a4a4;
    font-size: 26px;
  }
  body.story #contents .sec02 .wrap nav .swiper-button small {
    font-size: 14px;
    padding: 6px;
  }
  body.story #contents .sec02 .wrap nav .swiper-button span {
    padding: 6px;
  }
  body.story #contents .sec02 .wrap nav .swiper-button::before {
    content: "";
    background: url("/harvestella/assets/img/story/arr02.png") no-repeat center top/45px 113px;
    width: 156px;
    height: 20px;
    top: 20px;
  }
  body.story #contents .sec02 .wrap nav .swiper-button::after {
    content: "";
    background: url("/harvestella/assets/img/story/arr02.png") no-repeat center bottom/45px 113px;
    width: 156px;
    height: 20px;
    bottom: 23px;
  }
  body.story #contents .sec02 .wrap nav .swiper-button.swiper-button-disabled {
    opacity: 0;
  }
  body.story #contents .sec02 .wrap nav .swiper-button.swiper-button-disabled::after {
    right: -20px;
  }
  body.story #contents .sec02 .wrap nav .swiper-button.swiper-button-disabled::before {
    left: -20px;
  }
  body.story #contents .sec02 .wrap nav .swiper-button {
    transition: 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  body.story #contents .sec02 .wrap nav .swiper-button:hover {
    transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    background-color: #e6e6e6;
  }
  body.story #contents .sec02 h3 {
    padding: 124px 0 50px;
    font-size: 18px;
    background: url("/harvestella/assets/img/story/hr.png") no-repeat center bottom/auto 12px;
    margin-bottom: 34px;
  }
  body.story #contents .sec02 h3 ~ p {
    font-size: 31px;
  }
  body.story #contents .sec03 {
    padding-bottom: 136px;
  }
  body.story #contents .sec03 h3 {
    padding: 84px 4px 50px 0px;
    font-size: 18px;
    margin-bottom: 34px;
    margin-left: -50px;
  }
  body.story #contents .sec03 h3 ~ p {
    font-size: 31px;
  }
  body.story #contents .sec04,
body.story #contents .sec05,
body.story #contents .sec07,
body.story #contents .sec06,
body.story #contents .sec08 {
    padding-bottom: 200px;
  }
  body.story #contents .sec04 {
    padding-bottom: 70px;
  }
  body.story #contents .sec07 {
    padding-bottom: 70px;
  }
  body.story #contents .sec06 {
    padding-bottom: 70px;
  }
  body.story #contents .sec06::before {
    top: -4px;
  }
  body.story #contents .sec06 h2::before {
    background: none !important;
  }
  body.story #contents .sec07::before {
    top: -4px;
  }
  body.story #contents .sec07 h2::before {
    background: none !important;
  }
  body.story #contents .movie_layout header {
    padding-bottom: 36px;
  }
  body.story #contents .movie_layout header h2::before {
    content: "";
    background: url("/harvestella/assets/img/story/hr.png") no-repeat center top/auto 12px;
    width: 1024px;
    height: 12px;
    left: 50%;
    top: 53px;
    margin: 0 0 0 -512px;
  }
  body.story #contents .movie_layout header h2 small {
    font-size: 18px;
  }
  body.story #contents .movie_layout header h2 span {
    font-size: 31px;
    padding: 78px 0 0;
  }
  body.story #contents .movie_layout .pv ~ p {
    font-size: 21px;
    line-height: 43px;
    padding: 0 0 0;
    background: none;
    margin: 0;
  }
  body.story #contents .movie_layout .pv {
    position: relative;
    left: 0;
    top: 0;
    z-index: 300;
    width: 895px;
    height: 583px;
    overflow: hidden;
    padding: 38px 0 38px 33px;
  }
  body.story #contents .movie_layout .pv .mask {
    display: block;
    width: 895px;
    height: 503px;
    -webkit-mask-image: url("../img/adventure/mask@pc.png");
  }
  body.story #contents .movie_layout .pv .bg_movie_wrapper {
    display: flex;
    width: 895px;
    height: 503px;
    position: relative;
    z-index: 0;
    justify-content: center;
  }
  body.story #contents .movie_layout .pv .bg_movie_wrapper iframe {
    width: 895px !important;
    height: 503px !important;
    margin-top: 0;
    pointer-events: none;
    transform: scale(1);
  }
  body.story #contents .movie_layout.movie_full .pv ~ p {
    font-size: 21px;
    line-height: 43px;
    padding: 0 0 0;
  }
  body.story #contents .movie_layout.movie_full .pv {
    position: relative;
    left: 0;
    top: 0;
    z-index: 300;
    width: 895px;
    height: 583px;
    overflow: hidden;
    padding: 38px 0 38px 33px;
  }
  body.story #contents .movie_layout.movie_full .pv .mask {
    display: block;
    width: 895px;
    height: 503px;
    -webkit-mask-image: url("../img/story/mask@pc.png");
  }
  body.story #contents .movie_layout.movie_full .pv .bg_movie_wrapper {
    display: flex;
    width: 895px;
    height: 503px;
    position: relative;
    z-index: 0;
    justify-content: center;
  }
  body.story #contents .movie_layout.movie_full .pv .bg_movie_wrapper iframe {
    width: 895px !important;
    height: 503px !important;
    margin-top: 0;
    pointer-events: none;
    transform: scale(1);
  }
  body.story #contents .movie_layout .img_slider {
    position: relative;
    left: 0;
    top: 0;
    z-index: 300;
    width: 50%;
    padding: 38px 0 38px 33px;
  }
  body.story #contents .movie_layout .img_slider .swiper-container {
    width: 895px;
    height: 503px;
    position: relative;
    z-index: 0;
    justify-content: center;
  }
  body.story #contents .movie_layout .img_slider .mask {
    display: block;
    width: 895px;
    height: 503px;
    -webkit-mask-image: url("../img/current/mask@pc.png");
  }
  body.story #contents .movie_layout .swiper-pagination {
    position: relative;
    z-index: 100;
  }
  body.story #contents .movie_layout .swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    margin: 24px 12px 0;
  }
  body.story #contents .movie_layout .flex {
    background: url("/harvestella/assets/img/story/bg_moviesection.png");
    display: flex;
    justify-content: center;
  }
  body.story #contents .movie_layout .flex .wrap {
    width: calc(100% - 68px);
    max-width: 1920px;
    margin: 0 auto 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  body.story #contents .movie_layout .flex .wrap .pv {
    width: 50%;
  }
  body.story #contents .movie_layout .flex .wrap .pv ~ p {
    width: 50%;
    padding: 0 135px;
  }
  body.story #contents .movie_layout .flex .img_slider ~ .texts,
body.story #contents .movie_layout .flex .pv ~ .texts {
    padding: 0;
    background: none;
    margin-top: 0;
    width: 50%;
  }
  body.story #contents .movie_layout .flex .img_slider ~ .texts p,
body.story #contents .movie_layout .flex .pv ~ .texts p {
    font-size: 21px;
    line-height: 48px;
    padding: 0 135px;
  }
  body.story #contents .movie_layout .flex .img_slider ~ .texts p.chara,
body.story #contents .movie_layout .flex .pv ~ .texts p.chara {
    margin: 33px 0 0;
  }
  body.story #contents .movie_layout .flex .img_slider ~ .texts p.chara img,
body.story #contents .movie_layout .flex .pv ~ .texts p.chara img {
    width: auto;
    height: 228px;
  }
  body.story #contents .movie_layout .flex .img_slider ~ .texts p.chara span,
body.story #contents .movie_layout .flex .pv ~ .texts p.chara span {
    font-size: 21px;
    padding: 0 0 0;
  }
  body.story #contents .movie_layout .flex .img_slider ~ .texts p.chara span b,
body.story #contents .movie_layout .flex .pv ~ .texts p.chara span b {
    font-size: 31px;
  }
  body.story #contents .movie_layout.movie_right .flex .wrap {
    flex-direction: row-reverse;
  }
  body.story #contents .movie_layout.movie_right .flex .wrap .img_slider,
body.story #contents .movie_layout.movie_right .flex .wrap .pv {
    padding: 38px 33px 38px 0;
  }
  body.story #contents .movie_layout.movie_right .flex .wrap .pv ~ p {
    width: 50%;
    padding: 0 135px;
  }
  body.story #contents .movie_layout.movie_full .flex {
    background: none;
  }
  body.story #contents .movie_layout.movie_full .flex .wrap {
    flex-direction: column;
  }
  body.story #contents .movie_layout.movie_full .flex .wrap .pv {
    padding: 0;
    width: 100%;
    height: 620px;
  }
  body.story #contents .movie_layout.movie_full .flex .wrap .pv .mask {
    display: block;
    width: 100%;
    height: 620px;
    -webkit-mask-image: url("../img/story/mask_full@pc.png");
    -webkit-mask-repeat: repeat-x;
    -webkit-mask-size: auto 100%;
  }
  body.story #contents .movie_layout.movie_full .flex .wrap .pv .bg_movie_wrapper {
    width: 100%;
    height: 620px;
  }
  body.story #contents .movie_layout.movie_full .flex .wrap .pv .bg_movie_wrapper iframe {
    width: 100% !important;
    height: 1047.375px !important;
    margin-top: -214px;
  }
  body.story #contents .movie_layout.movie_full .flex .wrap .pv ~ p {
    width: 1280px;
    padding: 0;
    margin: 50px auto 0;
    text-align: center;
  }
}
@media screen and (min-width: 1024px) {
  /*  pc 1024px ~
  ************************************/
  body.story #contents .movie_layout .pv ~ p {
    font-size: 14px;
    line-height: 28.666px;
  }
  body.story #contents .movie_layout .pv {
    overflow: visible;
    width: 596.661px;
    height: 388.663px;
    padding: 25.333px 0 25.333px 22px;
  }
  body.story #contents .movie_layout .pv .mask {
    width: 596.661px;
    height: 335.33px;
  }
  body.story #contents .movie_layout .pv .bg_movie_wrapper {
    width: 596.661px;
    height: 335.33px;
  }
  body.story #contents .movie_layout .pv .bg_movie_wrapper iframe {
    width: 596.661px !important;
    height: 335.33px !important;
  }
  body.story #contents .movie_layout.movie_full .pv ~ p {
    font-size: 14px;
    line-height: 28.666px;
  }
  body.story #contents .movie_layout.movie_full .pv {
    width: 596.661px;
    height: 388.663px;
    padding: 25.333px 0 25.333px 22px;
  }
  body.story #contents .movie_layout.movie_full .pv .mask {
    width: 596.661px;
    height: 335.33px;
  }
  body.story #contents .movie_layout.movie_full .pv .bg_movie_wrapper {
    width: 596.661px;
    height: 335.33px;
  }
  body.story #contents .movie_layout.movie_full .pv .bg_movie_wrapper iframe {
    width: 596.661px !important;
    height: 335.33px !important;
  }
  body.story #contents .movie_layout .img_slider {
    width: 50%;
    padding: 25.333px 0 25.333px 22px;
    overflow: visible;
  }
  body.story #contents .movie_layout .img_slider .swiper-container {
    width: 596.661px;
    height: 335.33px;
  }
  body.story #contents .movie_layout .img_slider .mask {
    width: 596.661px;
    height: 335.33px;
  }
  body.story #contents .movie_layout .swiper-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 16px 8px 0;
  }
  body.story #contents .movie_layout .flex .wrap .img_slider,
body.story #contents .movie_layout .flex .wrap .pv {
    width: 50%;
  }
  body.story #contents .movie_layout .flex .wrap .img_slider ~ .texts p,
body.story #contents .movie_layout .flex .wrap .pv ~ .texts p {
    font-size: 14px;
    line-height: 32px;
    padding: 0 89.999px;
  }
  body.story #contents .movie_layout .flex .wrap .img_slider ~ .texts p.chara,
body.story #contents .movie_layout .flex .wrap .pv ~ .texts p.chara {
    margin: 22px 0 0;
  }
  body.story #contents .movie_layout .flex .wrap .img_slider ~ .texts p.chara img,
body.story #contents .movie_layout .flex .wrap .pv ~ .texts p.chara img {
    width: auto;
    height: 151.998px;
  }
  body.story #contents .movie_layout .flex .wrap .img_slider ~ .texts p.chara span,
body.story #contents .movie_layout .flex .wrap .pv ~ .texts p.chara span {
    font-size: 14px;
    padding: 0 0 0;
  }
  body.story #contents .movie_layout .flex .wrap .img_slider ~ .texts p.chara span b,
body.story #contents .movie_layout .flex .wrap .pv ~ .texts p.chara span b {
    font-size: 20.666px;
  }
  body.story #contents .movie_layout .flex .wrap .pv ~ p {
    width: 50%;
    padding: 0 89.999px;
  }
  body.story #contents .movie_layout.movie_right .flex .wrap .img_slider,
body.story #contents .movie_layout.movie_right .flex .wrap .pv {
    padding: 25.333px 22px 25.333px 0;
  }
  body.story #contents .movie_layout.movie_right .flex .wrap .pv ~ p {
    width: 50%;
    padding: 0 89.999px;
  }
  body.story #contents .movie_layout.movie_full .flex .wrap .pv {
    height: 413.329px;
  }
  body.story #contents .movie_layout.movie_full .flex .wrap .pv .mask {
    height: 413.329px;
    -webkit-mask-image: url("../img/story/mask_full@pc.png");
  }
  body.story #contents .movie_layout.movie_full .flex .wrap .pv .bg_movie_wrapper {
    width: 100%;
    height: 413.329px;
  }
  body.story #contents .movie_layout.movie_full .flex .wrap .pv .bg_movie_wrapper iframe {
    width: 100% !important;
    height: 698.243px !important;
    margin-top: -142.665px;
  }
  body.story #contents .movie_layout.movie_full .flex .wrap .pv ~ p {
    width: 853.325px;
  }
}
@media screen and (min-width: 1280px) {
  /*  pc 1280px ~
  ************************************/
  body.story #contents .movie_layout .pv ~ p {
    font-size: 1.094vw;
    line-height: 2.24vw;
  }
  body.story #contents .movie_layout .pv {
    width: 46.615vw;
    height: 30.365vw;
    padding: 1.979vw 0 1.979vw 1.719vw;
  }
  body.story #contents .movie_layout .pv .mask {
    width: 46.615vw;
    height: 26.198vw;
  }
  body.story #contents .movie_layout .pv .bg_movie_wrapper {
    width: 46.615vw;
    height: 26.198vw;
  }
  body.story #contents .movie_layout .pv .bg_movie_wrapper iframe {
    width: 46.615vw !important;
    height: 26.198vw !important;
  }
  body.story #contents .movie_layout.movie_full .pv ~ p {
    font-size: 1.094vw;
    line-height: 2.24vw;
  }
  body.story #contents .movie_layout.movie_full .pv {
    width: 46.615vw;
    height: 30.365vw;
    padding: 1.979vw 0 1.979vw 1.719vw;
  }
  body.story #contents .movie_layout.movie_full .pv .mask {
    width: 46.615vw;
    height: 26.198vw;
  }
  body.story #contents .movie_layout.movie_full .pv .bg_movie_wrapper {
    width: 46.615vw;
    height: 26.198vw;
  }
  body.story #contents .movie_layout.movie_full .pv .bg_movie_wrapper iframe {
    width: 46.615vw !important;
    height: 26.198vw !important;
  }
  body.story #contents .movie_layout .img_slider {
    width: 50%;
    padding: 1.979vw 0 1.979vw 1.719vw;
  }
  body.story #contents .movie_layout .img_slider .swiper-container {
    width: 46.615vw;
    height: 26.198vw;
  }
  body.story #contents .movie_layout .img_slider .mask {
    width: 46.615vw;
    height: 26.198vw;
  }
  body.story #contents .movie_layout .swiper-pagination .swiper-pagination-bullet {
    width: 0.625vw;
    height: 0.625vw;
    margin: 1.25vw 0.625vw 0;
  }
  body.story #contents .movie_layout .flex .wrap .img_slider,
body.story #contents .movie_layout .flex .wrap .pv {
    width: 50%;
  }
  body.story #contents .movie_layout .flex .wrap .img_slider ~ .texts p,
body.story #contents .movie_layout .flex .wrap .pv ~ .texts p {
    font-size: 1.094vw;
    line-height: 2.5vw;
    padding: 0 7.031vw;
  }
  body.story #contents .movie_layout .flex .wrap .img_slider ~ .texts p.chara,
body.story #contents .movie_layout .flex .wrap .pv ~ .texts p.chara {
    margin: 1.719vw 0 0;
  }
  body.story #contents .movie_layout .flex .wrap .img_slider ~ .texts p.chara img,
body.story #contents .movie_layout .flex .wrap .pv ~ .texts p.chara img {
    width: auto;
    height: 11.875vw;
  }
  body.story #contents .movie_layout .flex .wrap .img_slider ~ .texts p.chara span,
body.story #contents .movie_layout .flex .wrap .pv ~ .texts p.chara span {
    font-size: 1.094vw;
    padding: 0 0 0;
  }
  body.story #contents .movie_layout .flex .wrap .img_slider ~ .texts p.chara span b,
body.story #contents .movie_layout .flex .wrap .pv ~ .texts p.chara span b {
    font-size: 1.615vw;
  }
  body.story #contents .movie_layout .flex .wrap .pv ~ p {
    width: 50%;
    padding: 0 7.031vw;
  }
  body.story #contents .movie_layout.movie_right .flex .wrap .img_slider,
body.story #contents .movie_layout.movie_right .flex .wrap .pv {
    padding: 1.979vw 1.719vw 1.979vw 0;
  }
  body.story #contents .movie_layout.movie_right .flex .wrap .pv ~ p {
    width: 50%;
    padding: 0 7.031vw;
  }
  body.story #contents .movie_layout.movie_full .flex .wrap .pv {
    height: 32.292vw;
  }
  body.story #contents .movie_layout.movie_full .flex .wrap .pv .mask {
    height: 32.292vw;
    -webkit-mask-image: url("../img/story/mask_full@pc.png");
  }
  body.story #contents .movie_layout.movie_full .flex .wrap .pv .bg_movie_wrapper {
    width: 100%;
    height: 32.292vw;
  }
  body.story #contents .movie_layout.movie_full .flex .wrap .pv .bg_movie_wrapper iframe {
    width: 100% !important;
    height: 54.551vw !important;
    margin-top: -11.146vw;
  }
  body.story #contents .movie_layout.movie_full .flex .wrap .pv ~ p {
    width: 66.667vw;
  }
}
@media screen and (min-width: 1920px) {
  /*  pc 1920px ~
  ************************************/
  body.story #contents::before {
    content: "";
    width: 100vw;
    height: 65.729vw;
  }
  body.story #contents .contents_bg {
    left: 0;
    height: 65.729vw;
    margin-left: 0;
    width: 100vw;
  }
  body.story #contents .contents_bg img {
    width: 100%;
    height: auto;
  }
  body.story #contents::after {
    height: 65.729vw;
    background: url("/harvestella/assets/img/story/bg_repeat@pc.png") repeat-x left top/5.208vw 65.729vw;
    position: absolute;
    right: 50%;
    top: 0;
    z-index: 100;
    margin-right: 44.792vw;
  }
  body.story #contents .sec01 {
    padding: 17.708vw 0 7.292vw;
  }
  body.story #contents .sec01 .wrap {
    width: 66.667vw;
  }
  body.story #contents .sec01 .pagetitle {
    left: 2.708vw;
    top: -1.406vw;
  }
  body.story #contents .sec01 .pagetitle img {
    height: 3.073vw;
    width: auto;
  }
  body.story #contents .sec01 .wrap {
    height: 37.188vw;
  }
  body.story #contents .sec01 .wrap .swiper-container {
    width: 37.5vw;
  }
  body.story #contents .sec01 .wrap .swiper-container .item {
    padding: 4.531vw 0 0 2.604vw;
    width: 33.333vw;
  }
  body.story #contents .sec01 .wrap .swiper-container .item p {
    font-size: 0.833vw;
    line-height: 1.927vw;
  }
  body.story #contents .sec01 .wrap .swiper-container .item p b {
    font-size: 0.99vw;
  }
  body.story #contents .sec01 .wrap .swiper-container .item p + p {
    margin-top: 2.031vw;
  }
  body.story #contents .movie_layout .pv ~ p {
    font-size: 21px;
    line-height: 43px;
  }
  body.story #contents .movie_layout .pv {
    width: 895px;
    height: 583px;
    overflow: hidden;
    padding: 38px 0 38px 33px;
  }
  body.story #contents .movie_layout .pv .mask {
    display: block;
    width: 895px;
    height: 503px;
  }
  body.story #contents .movie_layout .pv .bg_movie_wrapper {
    display: flex;
    width: 895px;
    height: 503px;
  }
  body.story #contents .movie_layout .pv .bg_movie_wrapper iframe {
    width: 895px !important;
    height: 503px !important;
    margin-top: 0;
    pointer-events: none;
  }
  body.story #contents .movie_layout.movie_full .pv ~ p {
    font-size: 21px;
    line-height: 43px;
  }
  body.story #contents .movie_layout.movie_full .pv {
    width: 895px;
    height: 583px;
    overflow: hidden;
    padding: 38px 0 38px 33px;
  }
  body.story #contents .movie_layout.movie_full .pv .mask {
    display: block;
    width: 895px;
    height: 503px;
  }
  body.story #contents .movie_layout.movie_full .pv .bg_movie_wrapper {
    display: flex;
    width: 895px;
    height: 503px;
  }
  body.story #contents .movie_layout.movie_full .pv .bg_movie_wrapper iframe {
    width: 895px !important;
    height: 503px !important;
    margin-top: 0;
    pointer-events: none;
  }
  body.story #contents .movie_layout .img_slider {
    width: 50%;
    padding: 38px 0 38px 33px;
  }
  body.story #contents .movie_layout .img_slider .swiper-container {
    width: 895px;
    height: 503px;
  }
  body.story #contents .movie_layout .img_slider .mask {
    width: 895px;
    height: 503px;
  }
  body.story #contents .movie_layout .swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    margin: 24px 12px 0;
  }
  body.story #contents .movie_layout .flex .wrap {
    max-width: inherit;
    width: 1862px;
    margin: 0 auto;
    position: relative;
    left: -34px;
  }
  body.story #contents .movie_layout .flex .wrap .img_slider,
body.story #contents .movie_layout .flex .wrap .pv {
    width: 50%;
  }
  body.story #contents .movie_layout .flex .wrap .img_slider ~ .texts p,
body.story #contents .movie_layout .flex .wrap .pv ~ .texts p {
    font-size: 21px;
    line-height: 48px;
    padding: 0 135px;
  }
  body.story #contents .movie_layout .flex .wrap .img_slider ~ .texts p.chara,
body.story #contents .movie_layout .flex .wrap .pv ~ .texts p.chara {
    margin: 33px 0 0;
  }
  body.story #contents .movie_layout .flex .wrap .img_slider ~ .texts p.chara img,
body.story #contents .movie_layout .flex .wrap .pv ~ .texts p.chara img {
    width: auto;
    height: 228px;
  }
  body.story #contents .movie_layout .flex .wrap .img_slider ~ .texts p.chara span,
body.story #contents .movie_layout .flex .wrap .pv ~ .texts p.chara span {
    font-size: 21px;
    padding: 0 0 0;
  }
  body.story #contents .movie_layout .flex .wrap .img_slider ~ .texts p.chara span b,
body.story #contents .movie_layout .flex .wrap .pv ~ .texts p.chara span b {
    font-size: 31px;
  }
  body.story #contents .movie_layout .flex .wrap .pv ~ p {
    width: 50%;
    padding: 0 135px;
  }
  body.story #contents .movie_layout.movie_right .flex .wrap .img_slider,
body.story #contents .movie_layout.movie_right .flex .wrap .pv {
    padding: 38px 33px 38px 0;
  }
  body.story #contents .movie_layout.movie_right .flex .wrap .pv ~ p {
    width: 50%;
    padding: 0 135px;
  }
  body.story #contents .movie_layout.movie_full .flex {
    max-width: inherit;
  }
  body.story #contents .movie_layout.movie_full .flex .wrap {
    max-width: inherit;
    width: 100%;
  }
  body.story #contents .movie_layout.movie_full .flex .wrap .pv {
    width: 100%;
    height: 32.292vw;
  }
  body.story #contents .movie_layout.movie_full .flex .wrap .pv .mask {
    height: 32.292vw;
  }
  body.story #contents .movie_layout.movie_full .flex .wrap .pv .bg_movie_wrapper {
    height: 32.292vw;
  }
  body.story #contents .movie_layout.movie_full .flex .wrap .pv .bg_movie_wrapper iframe {
    width: 100% !important;
    height: 54.551vw !important;
    margin-top: -11.146vw;
  }
  body.story #contents .movie_layout.movie_full .flex .wrap .pv ~ p {
    width: 1280px;
    padding: 0;
    margin: 50px auto 0;
    text-align: center;
  }
}/*# sourceMappingURL=p_story.css.map */