body {
  background: #E4E4E4;
}

@media screen and (max-width: 767px) {

  .lp {
    overflow: clip;
    padding-bottom: calc(67*(100vw / 750));
  }

  .pcOnly {
    display: none;
  }

  .lp a:hover {
    opacity: 1 !important;
  }
}

.contents_area {
  /* font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "Yu Gothic", "Open Sans", "メイリオ", sans-serif;
  font-weight: 500; */
  color: #555555;
  text-align: center;
}

.sticky_area {
  width: calc(750* (100vw /750));
}

.wrap_ttl {
  font-size: calc(43*(100vw / 750));
  font-family: "jaf-bernina-sans", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.184em;
  line-height: 1;
  margin-top: calc(95*(100vw / 750));
  position: relative;
  left: calc(4* (100vw /750));
}

.wrap_ttl_sub {
  font-size: calc(31* (100vw /750));
  letter-spacing: 0.11em;
  line-height: 2.1;
  font-weight: 400;
  margin-top: calc(34* (100vw /750));
  font-feature-settings: "palt";
  left: calc(3* (100vw /750));
  position: relative;
}

.wrap_tx {
  font-size: calc(24* (100vw /750));
  letter-spacing: 0.1em;
  line-height: 2;
  /* font-weight: 500; */
  margin-top: calc(49* (100vw /750));
  font-feature-settings: "palt";
}

/* wrap2___________________________*/
.img02 {
  width: calc(750* (100vw /750));
  margin-top: calc(166* (100vw /750));
}

.wrap2 .wrap_ttl_sub {
  font-size: calc(32* (100vw /750));
  letter-spacing: 0.12em;
  line-height: 2;
  margin-top: calc(58* (100vw /750));
}

.wrap2 .wrap_link {
  font-size: calc(24*(100vw / 750));
  font-family: "jaf-bernina-sans", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.12em;
  line-height: 2;
  margin: calc(29*(100vw / 750)) auto 0;
  width: fit-content;
  display: block;
}

.wrap2 .wrap_tx {
  text-align: justify;
  width: calc(600* (100vw /750));
  font-size: calc(24* (100vw /750));
  letter-spacing: 0.04em;
  line-height: 2;
  margin: calc(37* (100vw /750)) auto 0;
}

/* ___________________________*/
.img03 {
  width: calc(630* (100vw /750));
  margin: calc(166* (100vw /750)) auto 0;
}

.img04 {
  width: calc(540* (100vw /750));
  margin: calc(140* (100vw /750)) 0 0 0;
}

.img05 {
  width: calc(570* (100vw /750));
  margin: calc(60* (100vw /750)) 0 0 auto;
}

.img06 {
  width: calc(480* (100vw /750));
  margin: calc(200* (100vw /750)) 0 0 calc(80* (100vw /750));
}

.img07 {
  width: calc(750* (100vw /750));
  margin: calc(200* (100vw /750)) auto 0;
}

.img08 {
  width: calc(435* (100vw /750));
  margin: calc(140* (100vw /750)) calc(44* (100vw /750)) 0 auto;
}

.img09 {
  width: calc(495* (100vw /750));
  margin: calc(60* (100vw /750)) 0 0 calc(46* (100vw /750));
}

.img10 {
  width: calc(540* (100vw /750));
  margin: calc(140* (100vw /750)) auto 0;
}

.contents_area .btn {
  width: calc(540* (100vw /750));
  margin: calc(140* (100vw /750)) auto 0;
  display: block;
}

@media screen and (min-width: 1400px) {
  .sticky_area img {
    height: auto;
    width: 100%;
  }
}

@media screen and (min-width: 768px) and (max-width: 1400px) {
  .sticky_area img {
    height: 100vh;
    object-position: top center;
    display: block;
    max-width: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
  }
}

@media screen and (min-width: 768px) {
  body {
    overflow-x: clip !important;
  }

  .scroll_area {
    width: 50%;
  }

  .scroll_inner_area {
    width: min(450 * (100vw/1400), 450px);
    margin: min(77 * (100vw/1400), 77px) auto min(99 * (100vw/1400), 99px);
  }

  .wrap_ttl {
    font-size: min(25.8 * (100vw/1400), 25.8px);
    margin-top: 0;
    left: min(4 * (100vw/1400), 4px);
  }

  .wrap_ttl_sub {
    font-size: min(18.6 * (100vw/1400), 18.6px);
    margin-top: min(20 * (100vw/1400), 20px);
    left: min(3 * (100vw/1400), 3px);
  }

  .wrap_tx {
    font-size: min(14.4 * (100vw/1400), 14.4px);
    margin-top: min(30 * (100vw/1400), 30px);
  }

  .contents_area {
    display: flex;
  }

  .sticky_area {
    position: sticky;
    top: min(40 * (100vw/1400), 40px);
    width: 50%;
    height: 100vh;
    overflow: hidden;
  }



  .sticky_area .wrap1 {
    position: absolute;
    top: min(67 * (100vw/1400), 67px);
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    z-index: 2;
    pointer-events: none;
  }

  /* 
  .sticky_area .wrap_ttl {
    font-size: min(29 * (100vw/1400), 29px);
    left: min(3 * (100vw/1400), 3px);
    letter-spacing: 0.165em;
  }

  .sticky_area .wrap_ttl_sub {
    font-size: min(20*(100vw / 1400), 20px);
    margin-top: min(21*(100vw / 1400), 21px);
    left: min(3*(100vw / 1400), 3px);
    line-height: 2.2;
  } */

  .sticky_area .wrap_ttl {
    font-size: calc(29* (100vw /1400));
    left: calc(3* (100vw /1400));
    letter-spacing: 0.165em;
  }

  .sticky_area .wrap_ttl_sub {
    font-size: calc(20* (100vw /1400));
    margin-top: calc(21* (100vw /1400));
    left: calc(3* (100vw /1400));
    line-height: 2.2;
  }

  /* wrap2___________________________*/
  .img02 {
    width: min(450 * (100vw/1400), 450px);
    margin-top: min(98 * (100vw/1400), 98px);
  }

  .wrap2 .wrap_ttl_sub {
    font-size: min(19.2*(100vw / 1400), 19.2px);
    margin-top: min(40*(100vw / 1400), 36px);
    left: min(2*(100vw / 1400), 2px);
  }

  .wrap2 .wrap_link {
    font-size: min(14.4*(100vw / 1400), 14.4px);
    margin: min(17*(100vw / 1400), 17px) auto 0;
  }

  .wrap2 .wrap_tx {
    width: min(360 * (100vw/1400), 360px);
    font-size: min(14.4 * (100vw/1400), 14.4px);
    margin: min(23 * (100vw/1400), 23px) auto 0;
  }

  /* ___________________________*/
  .img03 {
    width: min(378 * (100vw/1400), 378px);
    margin: min(100 * (100vw/1400), 100px) auto 0;
  }

  .img04 {
    width: min(324 * (100vw/1400), 324px);
    margin: min(84 * (100vw/1400), 84px) 0 0 0;
  }

  .img05 {
    width: min(342 * (100vw/1400), 342px);
    margin: min(36 * (100vw/1400), 36px) 0 0 auto;
  }

  .img06 {
    width: min(288 * (100vw/1400), 288px);
    margin: min(120 * (100vw/1400), 120px) 0 0 min(47 * (100vw/1400), 47px);
  }

  .img07 {
    width: min(450 * (100vw/1400), 450px);
    margin: min(120 * (100vw/1400), 120px) auto 0;
  }

  .img08 {
    width: min(261 * (100vw/1400), 261px);
    margin: min(84 * (100vw/1400), 84px) min(27 * (100vw/1400), 27px) 0 auto;
  }

  .img09 {
    width: min(297 * (100vw/1400), 297px);
    margin: min(36 * (100vw/1400), 36px) 0 0 min(27 * (100vw/1400), 27px);
  }

  .img10 {
    width: min(324 * (100vw/1400), 324px);
    margin: min(84 * (100vw/1400), 84px) auto 0;
  }

  .contents_area .btn {
    width: min(324 * (100vw/1400), 324px);
    margin: min(84 * (100vw/1400), 84px) auto 0;
    display: block;
  }
}

.js-animation-trigger {
  opacity: 0;
  transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.js-animation-trigger.top {
  transform: translateY(50px);
}

.js-animation-trigger.bottom {
  transform: translateY(-50px);
}

.js-animation-trigger.left {
  transform: translateX(50px);
}

.js-animation-trigger.right {
  transform: translateX(-50px);
}

.edit-area .js-animation-trigger.is-show {
  opacity: 1;
  transform: translate(0, 0);
}