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.9607842647vw;
  }
}
body {
  width: 100%;
}

.l-container {
  width: 100%;
}

.f-container {
  opacity: 0;
}
.f-container.show {
  opacity: 1;
}
.f-container {
  position: relative;
  display: flex;
  overflow: clip;
  flex-wrap: wrap;
  width: 100%;
  min-height: 100vh;

  scroll-margin-top: 80px;
}
.f-container * {
  box-sizing: border-box;

  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
}
.f-container {
  color: #333333;

  font-feature-settings: 'palt';
}
.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 svg {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.f-container a {
  display: block;
  cursor: pointer;
  text-decoration: none;
  color: #333333;
  transition: all 0.3s ease-in-out;
}
.f-container a:hover {
  opacity: 0.7;
}
.f-container figure {
  display: block;
}
.f-container .f-left,
.f-container .f-right {
  position: relative;
  position: sticky;
  top: 80px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: calc((100% - 51rem) / 2);
  height: calc(100vh - 80px);
}
.f-container .f-left > *,
.f-container .f-right > * {
  position: relative;
  z-index: 3;
}
.f-container .f-left__bg {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  width: calc(100% + 25.5rem);
  height: 100%;
  content: '';
}
.f-container .f-left__bg img {
  height: 100%;

  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: left center;
  object-position: left center;
}
.f-container .f-left__title {
  width: 18.9245rem;
  margin-right: 2.7rem;
  margin-left: auto;
}
.f-container .f-right__bg {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-block;
  width: calc(100% + 25.5rem);
  height: 100%;
  content: '';
}
.f-container .f-right__bg img {
  height: 100%;

  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: right center;
  object-position: right center;
}
.f-container .f-right__box {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.f-container .f-right__text {
  width: 25.1869rem;
  margin-bottom: 2rem;
}
.f-container .f-right__btn {
  width: 25.1993rem;
}
.f-container .f-main {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 51rem;
}
.f-container .f-main-wrap {
  overflow: clip;
  width: 100%;
  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: 51rem;
  }
  .f-container .f-main-wrap {
    margin: 0 auto;
  }
  .f-container .f-left,
  .f-container .f-right {
    display: none;
  }
}
.f-container .fadeIn {
  opacity: 0;
  transition:
    transform 1.5s ease,
    opacity 1.5s ease,
    filter 1.5s ease;

  filter: blur(0.68rem);
}
.f-container .fadeIn.showed {
  opacity: 1;
  transform: translate(0, 0) scale(1);

  filter: blur(0);
}
.f-container .hero__box {
  position: relative;
  margin-bottom: 9.588rem;
}
.f-container .hero__title {
  position: absolute;
  top: 83.844rem;
  left: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  color: #fffa9c;
}
.f-container .hero__title > span:nth-of-type(1) {
  padding-top: 0.136rem;
  margin-bottom: 2.312rem;
  margin-left: 0.34rem;
  letter-spacing: 0.02em;
  font-family: 'din-condensed', sans-serif;
  font-size: 7.208rem;
  font-weight: 400;
  font-style: normal;
  line-height: 5.1rem;
}
.f-container .hero__title > span:nth-of-type(2) {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.f-container .hero__title > span:nth-of-type(2) > span {
  letter-spacing: 0.02em;
  font-family: 'Fira Code', monospace;
  font-size: 2.176rem;
  font-weight: 400;
  font-style: normal;
  line-height: 3.672rem;

  font-optical-sizing: auto;
}
.f-container .hero__list {
  margin-bottom: 3.808rem;
  text-align: center;
}
.f-container .hero__notice {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.f-container .hero__notice:nth-of-type(n + 2) {
  margin-top: 4.42rem;
}
.f-container .hero__notice-title {
  margin-bottom: 1.496rem;
  letter-spacing: 0.05em;
  font-family: hiragino-kaku-gothic-pron, sans-serif;
  font-size: 1.904rem;
  font-weight: 300;
  font-style: normal;
  line-height: 1.904rem;
}
.f-container .hero__notice-text {
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.025em;
  font-family: 'din-condensed', sans-serif;
  font-size: 4.08rem;
  font-weight: 400;
  font-style: normal;
}
.f-container .hero__notice-text .dow {
  display: flex;
  align-items: center;
  font-size: 2.856rem;
}
.f-container .hero__notice-text .dow.pr {
  padding-right: 0.952rem;
}
.f-container .hero__notice-text .dow span {
  display: inline-block;
  padding-top: 0.68rem;
}
.f-container .hero__notice-text .time {
  display: flex;
}
.f-container .hero__notice-text .time span {
  transform: translateY(-0.34rem);
}
.f-container .hero__text {
  margin-bottom: 8.976rem;
  text-align: center;
  letter-spacing: 0.05em;
  font-family: hiragino-kaku-gothic-pron, sans-serif;
  font-size: 1.496rem;
  font-weight: 300;
  font-style: normal;
}
.f-container .hero__text.text01 {
  margin-bottom: 1.496rem;
  line-height: 1.496rem;
}
.f-container .hero__text.text02 {
  line-height: 2.992rem;
}
.f-container .sec__box {
  position: relative;
}
.f-container .sec__title {
  letter-spacing: 0.03em;
  font-family: 'Fira Code', monospace;
  font-size: 2.176rem;
  font-weight: 500;
  font-style: normal;
  color: #1c99d1;

  font-optical-sizing: auto;
}
.f-container .sec__credit {
  padding-top: 1.36rem;
}
.f-container .sec__credit .credit {
  display: flex;
  flex-wrap: wrap;

  -moz-column-gap: 1.836rem;
  column-gap: 1.836rem;
}
.f-container .sec__credit .item {
  min-height: 1.36rem;
}
.f-container .sec__credit .item a {
  display: flex;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  font-family: 'Fira Code', monospace;
  font-size: 1.496rem;
  font-weight: 400;
  font-style: normal;
  line-height: 2.992rem;

  font-optical-sizing: auto;
}
.f-container .sec__credit .item.brc {
  display: flex;
  flex-basis: 100%;
  justify-content: center;
}
.f-container .sec__credit .item.brl {
  display: flex;
  flex-basis: 100%;
  justify-content: flex-start;
}
.f-container .sec__credit.cl .credit {
  flex-direction: column;
}
.f-container .sec__credit.dfc .credit {
  justify-content: center;
}
.f-container .sec__credit.dfr .credit {
  justify-content: flex-end;
}
.f-container .sec01 .box01 {
  width: 43.52rem;
  margin: 0 auto 14.144rem;
}
.f-container .sec02 .box01 {
  width: 36.72rem;
  margin: 0 auto 4.624rem;
}
.f-container .sec02 .box01 .img01 {
  margin-bottom: 4.624rem;
}
.f-container .sec02 .box01 .title01 {
  margin-right: -1.156rem;
  text-align: center;
}
.f-container .sec02 .box02 {
  width: 44.88rem;
  margin: 0 auto 12.716rem;
}
.f-container .sec03 .box01 {
  width: 27.2rem;
  margin: 0 auto 11.424rem;
}
.f-container .sec04 .img01 {
  margin-bottom: 8.16rem;
}
.f-container .sec04 .box01 {
  width: 36.72rem;
  margin: 0 0 15.504rem auto;
}
.f-container .sec04 .title01 {
  position: absolute;
  top: -0.136rem;
  left: -4.284rem;
  width: 55.08rem;
  text-align: right;
  letter-spacing: 0.022em;
  transform: rotate(-90deg) translateX(-100%);
  transform-origin: left top;
}
.f-container .sec05 .box01 {
  width: 42.16rem;
  margin-bottom: 15.504rem;
}
.f-container .sec06 .box01 {
  width: 35.36rem;
  margin: -4.352rem auto 0;
}
.f-container .all__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42.16rem;
  height: 5.44rem;
  margin: 15.504rem auto 16.32rem;
  background-color: #1c99d1;
}
.f-container .all__btn span {
  letter-spacing: -0.02em;
  font-family: 'Fira Code', monospace;
  font-size: 2.856rem;
  font-weight: 400;
  font-style: normal;
  color: white;

  font-optical-sizing: auto;
}
.f-container .btm {
  padding-top: 9.52rem;
  padding-bottom: 7.48rem;
  background-color: #b1aeb5;
}
.f-container .btm * {
  text-align: center;
  color: #ffffff;
}
.f-container .btm__title {
  display: flex;
  justify-content: center;
  padding-top: 0.476rem;
  margin-bottom: 4.76rem;
  letter-spacing: 0.018em;
  font-family: 'din-condensed', sans-serif;
  font-size: 6.12rem;
  font-weight: 400;
  font-style: normal;
  line-height: 3.74rem;
}
.f-container .btm__title span {
  padding-left: 0.204rem;
}
.f-container .btm__text {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 5.984rem;
  letter-spacing: -0.025em;
  font-family: 'Fira Code', monospace;
  font-size: 2.176rem;
  font-weight: 400;
  font-style: normal;
  line-height: 4.08rem;

  font-optical-sizing: auto;
}
.f-container .btm__staff {
  letter-spacing: 0.008em;
  font-family: 'Fira Code', monospace;
  font-size: 1.768rem;
  font-weight: 400;
  font-style: normal;
  line-height: 2.652rem;

  font-optical-sizing: auto;
}

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

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