@charset "UTF-8";
:root {
  --vw-unit: calc((var(--vw) * (490 / 1400)) / 750);
  --vw-pcunit: calc(var(--vw) / 1400);
  --header: 80px;
}

/*アニメーション
----------------------------*/
@keyframes arrow {
  0% {
    scale: 1 1;
    transform-origin: bottom center;
  }
  49% {
    scale: 1 0;
    transform-origin: bottom center;
  }
  51% {
    scale: 1 0;
    transform-origin: top center;
  }
  100% {
    scale: 1 1;
    transform-origin: top center;
  }
}
/*共通
----------------------------*/
.l-container {
  width: 100%;
}

.l-header {
  padding: 0;
  position: relative;
  z-index: 999;
  background-color: #fff;
  overflow-x: clip;
}

.l-footer {
  padding: 0;
  position: relative;
  z-index: 999;
  background-color: #fff;
  overflow-x: clip;
}

.pc-footer {
  margin: 0;
}

#feature {
  width: 100%;
  margin: 0 auto;
  color: #000;
  box-sizing: border-box;
  text-align: center;
  font-family: "fot-cezanne-pron", sans-serif;
  font-weight: 500;
  font-style: normal;
  position: relative;
  overflow-x: clip;
  opacity: 0;
  transition: 0.3s;
  background-color: #300002;
}
#feature::before {
  content: "";
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-image: url(../img/pc-bg.png);
  background-size: 2281px 1610px;
  background-repeat: repeat;
  background-position: 18px 7px;
}
#feature.is_show {
  opacity: 1;
}
#feature * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
#feature a {
  width: 100%;
  height: auto;
  display: block;
  color: #000;
  transition: 0.3s;
}
#feature a:hover {
  text-decoration: none;
  opacity: 0.7;
}
#feature figure {
  background-color: #fff;
}
#feature img {
  width: 100%;
  height: auto;
  display: block;
}
#feature video {
  width: 100%;
  height: auto;
  display: block;
}
#feature .js_anime .is_fadein {
  -webkit-mask-image: linear-gradient(0deg, transparent, transparent 39.6666666667%, rgba(0, 0, 0, 0.02) 43.3333333333%, rgba(0, 0, 0, 0.08) 45%, rgba(0, 0, 0, 0.18) 46.6666666667%, rgba(0, 0, 0, 0.32) 48.3333333333%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.68) 51.6666666667%, rgba(0, 0, 0, 0.82) 53.3333333333%, rgba(0, 0, 0, 0.92) 55%, rgba(0, 0, 0, 0.98) 56.6666666667%, #000 58.3333333333%, #000);
          mask-image: linear-gradient(0deg, transparent, transparent 39.6666666667%, rgba(0, 0, 0, 0.02) 43.3333333333%, rgba(0, 0, 0, 0.08) 45%, rgba(0, 0, 0, 0.18) 46.6666666667%, rgba(0, 0, 0, 0.32) 48.3333333333%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.68) 51.6666666667%, rgba(0, 0, 0, 0.82) 53.3333333333%, rgba(0, 0, 0, 0.92) 55%, rgba(0, 0, 0, 0.98) 56.6666666667%, #000 58.3333333333%, #000);
  -webkit-mask-size: 100% max(300%, 100vh);
          mask-size: 100% max(300%, 100vh);
  -webkit-mask-position: center 100%;
          mask-position: center 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  transform: translateZ(0);
  transition: -webkit-mask-position 2s linear;
  transition: mask-position 2s linear;
  transition: mask-position 2s linear, -webkit-mask-position 2s linear;
}
#feature .js_anime.is_show .is_fadein {
  -webkit-mask-position: center 0;
          mask-position: center 0;
}

#feature .sec {
  width: calc(750 * var(--vw-unit));
  margin: 0 auto;
  padding-top: calc(70 * var(--vw-unit));
  padding-bottom: calc(200 * var(--vw-unit));
  position: relative;
  z-index: 2;
}
#feature .sec .sec__block {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#feature .sec .sec__head {
  width: -moz-fit-content;
  width: fit-content;
  height: calc(544 * var(--vw-unit));
  margin: 0 auto;
}
#feature .sec .sec__ttl {
  width: calc(429 * var(--vw-unit));
  margin: 0 auto;
}
#feature .sec .sec__ttl.sec__ttl02 {
  margin-top: calc(138 * var(--vw-unit));
}
#feature .sec .sec__scroll {
  width: -moz-fit-content;
  width: fit-content;
  margin: calc(92 * var(--vw-unit)) auto 0;
  padding-bottom: calc(114 * var(--vw-unit));
  font-size: calc(28 * var(--vw-unit));
  font-weight: 400;
  letter-spacing: 0.01em;
  color: #bfa977;
  pointer-events: none;
  position: relative;
}
#feature .sec .sec__scroll::before {
  content: "";
  width: calc(2 * var(--vw-unit));
  height: calc(104 * var(--vw-unit));
  background: #bfa977;
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  transform-origin: bottom center;
  animation: arrow 2s infinite;
}
#feature .sec .sec__envelopearea {
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  margin-top: calc(100svh - (1044 * var(--vw-unit) + var(--header)));
}
#feature .sec .sec__envelope {
  width: 100%;
  position: relative;
}
#feature .sec .sec__envelope .sec__envelopehead {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  transform-origin: top;
}
#feature .sec .sec__envelope .sec__envelopehead .sec__envelopeclose {
  position: relative;
}
#feature .sec .sec__envelope .sec__envelopehead .sec__envelopeopen {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotateX(180deg);
  opacity: 0;
}
#feature .sec .sec__envelope .sec__envelopehead .sec__envelopestamp {
  width: calc(144 * var(--vw-unit));
  margin: 0 auto;
  position: absolute;
  bottom: calc(34 * var(--vw-unit));
  left: 0;
  right: 0;
}
#feature .sec .sec__envelope .sec__envelopebody {
  width: 100%;
  height: 100%;
  position: absolute;
  top: -1px;
  left: 0;
  z-index: 1;
  overflow: hidden;
}
#feature .sec .sec__envelope .sec__envelopebottom {
  width: 100%;
  height: 100%;
  position: absolute;
  top: calc(-668 * var(--vw-unit));
  left: 0;
  z-index: 3;
  overflow: hidden;
  transform-origin: bottom;
}
#feature .sec .sec__envelope .sec__envelopebottom img {
  position: absolute;
  bottom: 0;
  left: 0;
}
#feature .sec .sec__letter {
  width: calc(730 * var(--vw-unit));
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
#feature .sec .sec__letter.sec__letter01 {
  top: calc(500 * var(--vw-unit));
}
#feature .sec .sec__letter.sec__letter02 {
  margin-top: calc(-400 * var(--vw-unit));
}
#feature .sec .sec__letter.sec__letter02 .sec__letterbtn {
  bottom: calc(130 * var(--vw-unit));
}
#feature .sec .sec__letter.sec__letter03 {
  margin-top: calc(100 * var(--vw-unit));
}
#feature .sec .sec__letter.sec__letter04 {
  margin-top: calc(100 * var(--vw-unit));
}
#feature .sec .sec__letter.sec__letter05 {
  margin-top: calc(100 * var(--vw-unit));
}
#feature .sec .sec__letter.sec__letter06 {
  margin-top: calc(100 * var(--vw-unit));
}
#feature .sec .sec__letter .sec__img {
  position: absolute;
  z-index: 3;
}
#feature .sec .sec__letter .sec__img.sec__img01 {
  width: calc(512.5 * var(--vw-unit));
  top: calc(140 * var(--vw-unit));
  left: 50%;
  transform: translateX(-50%);
}
#feature .sec .sec__letter .sec__img.sec__img02 {
  width: calc(609 * var(--vw-unit));
  top: calc(70 * var(--vw-unit));
  left: calc(80 * var(--vw-unit));
}
#feature .sec .sec__letter .sec__img.sec__img03 {
  width: calc(520 * var(--vw-unit));
  top: calc(142 * var(--vw-unit));
  left: calc(106 * var(--vw-unit));
}
#feature .sec .sec__letter .sec__img.sec__img04 {
  width: calc(520 * var(--vw-unit));
  top: calc(142 * var(--vw-unit));
  left: calc(106 * var(--vw-unit));
}
#feature .sec .sec__letter .sec__img.sec__img05 {
  width: calc(430.5 * var(--vw-unit));
  top: calc(142 * var(--vw-unit));
  left: calc(152 * var(--vw-unit));
}
#feature .sec .sec__letter .sec__img.sec__img06 {
  width: calc(567 * var(--vw-unit));
  top: calc(78 * var(--vw-unit));
  left: calc(78 * var(--vw-unit));
}
#feature .sec .sec__letter .sec__letterbtn {
  width: calc(250 * var(--vw-unit));
  position: absolute;
  bottom: calc(130 * var(--vw-unit));
  left: 50%;
  transform: translateX(-50%);
}
#feature .sec .sec__letter .sec__letterbtn.sec__letterbtn02 {
  bottom: calc(148 * var(--vw-unit));
}
#feature .sec .sec__letter .sec__letterbtn.sec__letterbtn03 {
  bottom: calc(168 * var(--vw-unit));
}
#feature .sec .sec__letter .sec__letterbtn.sec__letterbtn04 {
  bottom: calc(132 * var(--vw-unit));
}
#feature .sec .sec__letter .sec__letterbtn.sec__letterbtn05 {
  bottom: calc(186 * var(--vw-unit));
}
#feature .sec .sec__letter.is_cs .sec__img.sec__img04 {
  width: calc(496.5 * var(--vw-unit));
  margin: 0 auto;
  top: calc(142 * var(--vw-unit));
  left: 0;
  right: 0;
}
#feature .sec .sec__letter.is_cs .sec__img.sec__img05 {
  width: calc(470 * var(--vw-unit));
  margin: 0 auto;
  top: calc(142 * var(--vw-unit));
  left: 0;
  right: 0;
}
#feature .sec .sec__letter.is_cs .sec__img.sec__img06 {
  width: calc(517 * var(--vw-unit));
  margin: 0 auto;
  top: calc(142 * var(--vw-unit));
  left: 0;
  right: 0;
}/*# sourceMappingURL=style.css.map */