html {
  scroll-behavior: smooth;
}

@media screen and (min-width: 1401px) {
  html {
    font-size: 62.5%;
  }
}
@media screen and (max-width: 1400px) {
  html {
    font-size: 0.7142857vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 1.7857vw;
  }
}
body {
  width: 100%;
}

.l-container {
  width: 100%;
  opacity: 0;
}
.l-container.on {
  opacity: 1;
}

.f-container {
  position: relative;
  display: flex;
  overflow: clip;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  text-align: center;

  scroll-margin-top: 80px;
  font-feature-settings: 'palt';
}
.f-container * {
  box-sizing: border-box;

  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
}
.f-container a.mask-img {
  position: relative;
}
.f-container a.mask-img::after {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  width: 100%;
  height: 100%;
  content: '';
  transition: all 0.3s ease-in-out;

  -webkit-mask-size: cover;
  mask-size: cover;
  will-change: opacity;
}
.f-container a.mask-img:hover {
  opacity: 1;
}
.f-container a.mask-img:hover::after {
  opacity: 0.3;
  background: rgb(255, 255, 255);
}
.f-container img,
.f-container video {
  width: 100%;
  height: auto;
  vertical-align: top;
  pointer-events: none;
}
.f-container video {
  filter: drop-shadow(0px 0px rgba(0, 0, 0, 0));
}
.f-container svg {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.f-container a {
  display: block;
  cursor: pointer;
  text-decoration: none;
  color: #000000;
  transition: all 0.3s ease-in-out;
}
.f-container figure {
  display: block;
}
.f-container .f-left,
.f-container .f-right {
  position: sticky;
  top: 80px;
  width: 56rem;
  height: calc(100vh - 80px);
}
.f-container .f-left {
  margin-right: -0.1rem;
}
.f-container .f-left__movie {
  overflow-y: scroll;
  width: 100%;
  height: 100%;

  -ms-overflow-style: none;
  scrollbar-width: none;
}
.f-container .f-left__movie::-webkit-scrollbar {
  display: none;
}
.f-container .f-left video {
  width: 100%;
  height: 100%;

  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center center;
  object-position: center center;
}
.f-container .f-main {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 56rem;
}
.f-container .f-main-wrap {
  position: relative;
  width: 100%;
  min-height: 100vh;
  margin: 0 auto;
  background-color: #ffffff;
  background-size: 100% auto;

  scroll-margin-top: 80px;
}
@media screen and (max-width: 768px) {
  .f-container .f-main {
    max-width: 100%;
  }
  .f-container .f-main-wrap {
    width: 56rem;
    margin: 0 auto;
  }
  .f-container .f-main-wrap .sp-movie {
    display: block;
  }
  .f-container .f-left {
    display: none;
  }
}
.f-container .fadeUp {
  opacity: 0;
  transform: translateY(30px);
}
.f-container .fadeUp.showed {
  animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
@keyframes fadeup {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.f-container .fadeDown {
  opacity: 0;
  transform: translateY(-30px);
}
.f-container .fadeDown.showed {
  animation: fadedown 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
@keyframes fadedown {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.f-container .clipDown {
  transition: 1.4s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;

  clip-path: inset(0 0 100% 0);
}
.f-container .clipDown.showed {
  clip-path: inset(0);
}
.f-container .clipRight {
  transition: 1.4s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;

  clip-path: inset(0 100% 0 0);
}
.f-container .clipRight.showed {
  clip-path: inset(0);
}
.f-container .clipLeft {
  transition: 1.4s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;

  clip-path: inset(0 0 0 100%);
}
.f-container .clipLeft.showed {
  clip-path: inset(0);
}
.f-container .showed .clip {
  clip-path: inset(0);
}
.f-container .bg__list {
  position: absolute;
  width: 100%;
}
.f-container .bg__img {
  position: relative;
  width: 100%;
  height: 200rem;
}
.f-container .bg__img.bg01 {
  background: no-repeat url(../img/pc_bg01.jpg) 0 0 / cover;
}
.f-container .bg__img.bg02 {
  background: no-repeat url(../img/pc_bg02.jpg) 0 0 / cover;
}
.f-container .bg__img.bg03 {
  background: no-repeat url(../img/pc_bg03.jpg) 0 0 / cover;
}
.f-container .bg__img.bg04 {
  background: no-repeat url(../img/pc_bg04.jpg) 0 0 / cover;
}
.f-container .bg__img.bg05 {
  background: no-repeat url(../img/pc_bg05.jpg) 0 0 / cover;
}
.f-container .bg__img.bg06 {
  background: no-repeat url(../img/pc_bg06.jpg) 0 0 / cover;
}
.f-container .bg__img.bg07 {
  height: 144rem;
  background: no-repeat url(../img/pc_bg07.jpg) 0 0 / cover;
}
.f-container .sp-movie {
  display: none;
}
.f-container .hero {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-bottom: 5.2rem;
}
.f-container .hero__box {
  position: relative;
  margin-bottom: 6rem;
}
.f-container .hero__title {
  position: absolute;
  bottom: -3.7rem;
  left: 8.5rem;
  width: 45rem;
  pointer-events: none;
}
.f-container .hero__title svg .a {
  fill: #ea7272;
}
.f-container .hero__subtitle {
  width: 27.393rem;
  margin-bottom: 2rem;
}
.f-container .hero__text {
  font-family: 'Shippori Mincho', serif;
  font-size: 1.8rem;
  font-weight: 400;
  font-weight: 400;
  font-style: normal;
  line-height: 2.8rem;
}
.f-container .hero__text.text02 {
  margin-top: 0.9rem;
  font-size: 1.4rem;
  line-height: 1.6rem;
}
.f-container .hero__movie {
  position: relative;
  z-index: 3;
  width: 63rem;
  margin: 0 auto 13.8rem;
}
.f-container .hero__movie::after {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  display: inline-block;
  width: 12.6rem;
  height: 12.6rem;
  content: '';
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.f-container .hero__movie.showed::after {
  display: none;
}
.f-container .hero__movie-btn {
  position: absolute;
  z-index: 5;
  top: 2.21rem;
  right: 2.489rem;
  display: flex;
  align-items: center;
  color: #ffffff;
}
.f-container .hero__movie-btn::before {
  content: 'Sound OFF';
  font-size: 2.23rem;
}
.f-container .hero__movie-btn::after {
  display: inline-block;
  width: 2.547rem;
  height: 2.642rem;
  margin-left: 0.66rem;
  content: '';
}
.f-container .hero__movie-btn.on {
  right: 2.96rem;
}
.f-container .hero__movie-btn.on::before {
  margin-top: -0.1rem;
  content: 'Sound ON';
}
.f-container .hero__movie-btn.on::after {
  display: inline-block;
  width: 1.505rem;
  height: 2.491rem;
  margin-left: 1.25rem;
  content: '';
}
.f-container .pageTopBtn {
  position: sticky;
  z-index: 5;
  left: 0;
  width: 1.8rem;
  height: 0;
  margin-left: 52.2rem;
  transform: translateY(-26.5rem);
}
.f-container .pageTopBtn.pc {
  top: calc(100vh - 80px + 20rem);
}
.f-container .pageTopBtn.sp {
  top: calc(100vh - 50px + 10rem);
}
.f-container .sp-movie {
  position: relative;
  margin-bottom: 4.9rem;
}
.f-container .sp-movie__area {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38rem;
  transform: translate(-50%, -50%);
}
.f-container .movie-btn {
  position: absolute;
  right: 1.96rem;
  bottom: 2.09rem;
  display: inline-block;
  cursor: pointer;
}
.f-container .movie-btn::before {
  display: inline-block;
  width: 4.369rem;
  height: 1.77rem;
  content: '';
  background: no-repeat url(../img/movie_on.png) 0 0 / contain;
}
.f-container .movie-btn.on {
  right: 1.903rem;
  bottom: 2.24rem;
}
.f-container .movie-btn.on::before {
  width: 5.217rem;
  height: 1.361rem;
  content: '';
  background: no-repeat url(../img/movie_off.png) 0 0 / contain;
}
.f-container .sec__area {
  position: relative;
  margin-bottom: 7rem;
}
.f-container .sec__area:last-of-type {
  margin-bottom: 6.8rem;
}
.f-container .sec__box {
  position: relative;
  width: 46rem;
  margin: 0 0 3.2rem 5rem;
}
.f-container .sec__box .clip {
  transition: clip-path 0.85s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.f-container .sec__title {
  position: absolute;
  z-index: 10;
  pointer-events: none;
}
.f-container .sec__title.colored .a {
  fill: #ea7272;
}
.f-container .sec__lead {
  margin-bottom: 2.1rem;
  font-family: 'Shippori Mincho', serif;
  font-size: 2.2rem;
  font-weight: 400;
  font-style: normal;
  line-height: 2.8rem;
  color: #000002;
}
.f-container .sec__text {
  margin-bottom: 2.9rem;
  font-family: 'Shippori Mincho', serif;
  font-size: 1.8rem;
  font-weight: 400;
  font-style: normal;
  line-height: 2.8rem;
  color: #000000;
}
.f-container .sec__credit {
  width: 50rem;
  margin: 0 auto;
}
.f-container .sec__credit .credit {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  -moz-column-gap: 1.8rem;
  column-gap: 1.8rem;
}
.f-container .sec__credit .item.mr {
  margin-right: 5rem;
}
.f-container .sec__credit .item.ml {
  margin-left: 5rem;
}
.f-container .sec__credit .item a {
  display: flex;
  text-decoration: underline;
  font-family: 'Noto Serif', serif;
  font-size: 1.6rem;
  font-weight: 400;
  font-style: normal;
  line-height: 2.4rem;
  color: #8e8e8e;

  font-optical-sizing: auto;
  font-variation-settings: 'wdth' 100;
}
.f-container .sec01 .box01 {
  margin-left: 5.8rem;
}
.f-container .sec01 .title01 {
  top: 39.72rem;
  right: -2.95rem;
  width: 8.491rem;
}
.f-container .sec01 .sec__img:nth-of-type(1) {
  position: relative;
  z-index: 2;
}
.f-container .sec01 .sec__img:nth-of-type(n + 2) {
  margin-top: -0.05rem;
}
.f-container .sec02 .title01 {
  top: 41.72rem;
  left: -2.8rem;
  width: 8.491rem;
}
.f-container .sec02 .credit {
  padding: 0 5rem;
}
.f-container .sec03 {
  margin-bottom: 4.8rem;
}
.f-container .sec03 .title01 {
  top: 13.6rem;
  right: -3.4rem;
  width: 11.151rem;
}
.f-container .sec04 .box01 {
  margin-top: -30rem;
}
.f-container .sec04 .title01 {
  top: 42.09rem;
  left: -5rem;
  width: 11.15rem;
}
.f-container .sec04 .credit {
  padding: 0 5rem;
}
.f-container .sec05 .title01 {
  top: 4.8rem;
  right: -3.1rem;
  width: 11.509rem;
}
.f-container .sec06 .box01 {
  width: 45rem;
  margin-left: 5.5rem;
}
.f-container .sec06 .title01 {
  top: 37.59rem;
  left: -2.46rem;
  width: 7.713rem;
}
.f-container .sec06 .sec__img:nth-of-type(1) {
  position: relative;
  z-index: 2;
}
.f-container .sec06 .sec__img:nth-of-type(n + 2) {
  margin-top: -0.05rem;
}
.f-container .sec06 .credit {
  padding: 0 10rem;
}
.f-container .sec07 {
  margin-bottom: 6.8rem;
}
.f-container .sec07 .box01 {
  width: 45rem;
  margin-left: 5.5rem;
}
.f-container .sec07 .title01 {
  top: 7.8rem;
  right: -2.36rem;
  width: 7.713rem;
}
.f-container .sec07 .credit {
  padding: 0 10rem;
}
.f-container .sec08 .box01 {
  width: 45rem;
  margin-top: -40rem;
  margin-left: 5.5rem;
}
.f-container .sec08 .title01 {
  top: 10.2rem;
  left: -2.46rem;
  width: 8.49rem;
}
.f-container .sec08 .credit {
  padding: 0 5rem;
}
.f-container .last {
  padding-bottom: 5.5rem;
}
.f-container .last__btn {
  width: 26.1rem;
  margin: 0 auto 2.1rem;
}
.f-container .last__staff {
  letter-spacing: 0.03em;
  font-family: 'Bodoni Moda', serif;
  font-size: 1.4rem;
  font-weight: 400;
  font-style: normal;
  font-style: italic;
  line-height: 2rem;
  color: #000002;

  font-optical-sizing: auto;
}

.pc-footer {
  margin-top: 0;
}

.l-footer {
  padding-top: 0;
}