html {
  font-size: 0.7142857vw;

  scroll-behavior: smooth;
}

@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833332813vw;
  }
}
body {
  width: 100%;
}

.l-container {
  width: 100%;
}

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

  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,
.f-container .sec__img a {
  position: relative;
}
.f-container a.mask-img::after,
.f-container .sec__img a::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,
.f-container .sec__img a:hover {
  opacity: 1;
}
.f-container a.mask-img:hover::after,
.f-container .sec__img a: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: #000000;
  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: sticky;
  top: 80px;
  display: flex;
  overflow: clip;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: calc((100% - 48rem) / 2);
  height: calc(100vh - 80px);
}
.f-container .f-left .hero,
.f-container .f-right .hero {
  width: 100%;
  height: 100%;
}
.f-container .f-left .hero__box {
  position: relative;
  width: 100%;
  height: 100%;
}
.f-container .f-left .hero__img {
  width: 100%;
  height: 100%;
}
.f-container .f-left .hero__img a {
  width: 100%;
  height: 100%;
}
.f-container .f-left .hero img {
  width: 100%;
  height: 100%;

  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center 65%;
  object-position: center 65%;
}
.f-container .f-right {
  z-index: 2;
}
.f-container .f-right .hero {
  position: relative;
}
.f-container .f-right .hero__bg {
  width: 100%;
  height: 100%;
}
.f-container .f-right .hero__bg img {
  width: 100%;
  height: 100%;

  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center bottom;
  object-position: center bottom;
}
.f-container .f-right .hero__box {
  position: absolute;
  bottom: calc((100vh - 80px) * 0.3523255814);
  left: 50%;
  transform: translateX(-50%);
}
.f-container .f-right .hero__title {
  display: flex;
  flex-direction: column;
  margin-bottom: calc((100vh - 80px) * 0.1197674419);

  row-gap: calc((100vh - 80px) * 0.011627907);
}
.f-container .f-right .hero__title span {
  padding-top: calc((100vh - 80px) * 0.0023255814);
  font-family: 'span-compressed', serif;
  font-size: calc((100vw - 100rem) * 0.211275);
  font-weight: 200;
  font-style: normal;
  line-height: 0.7;
  color: #f77fc1;
}
.f-container .f-right .hero__title span:nth-of-type(1) {
  letter-spacing: -0.025em;
}
.f-container .f-right .hero__title span:nth-of-type(2) {
  letter-spacing: -0.01em;
}
.f-container .f-right .hero__btn img {
  width: calc((100vw - 100rem) * 0.4504575);
}
.f-container .f-main {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 48rem;
}
.f-container .f-main::before {
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  display: inline-block;
  width: min(1px, 0.128rem);
  height: 100%;
  content: '';
  pointer-events: none;
  background: linear-gradient(to bottom, #dfe8ee 0%, #dfe8ee 70%, #ffffff 100%);
  transform: translateX(100%);
}
.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: 100%;
  }
  .f-container .f-main::before {
    display: none;
  }
  .f-container .f-main-wrap {
    width: 48rem;
    margin: 0 auto;
  }
  .f-container .f-left,
  .f-container .f-right {
    display: none;
  }
}
.f-container .js-lax-stars {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: 2s;
  transform: translateY(-60px);
}
.f-container .js-lax-stars.showed {
  opacity: 1;
  transform: translateY(0px);
}
.f-container .js-bg {
  transition: margin-top 0.5s ease;
}
.f-container .loop-slider__track {
  display: flex;
  flex-wrap: nowrap;
  width: 300vw;
  white-space: nowrap;
  animation: loop-scroll 20s linear paused;
}
.f-container .loop-slider.showed .loop-slider__track {
  opacity: 1;
  animation: loop-scroll 20s linear infinite;
}
.f-container .loop-slider--reverse .loop-slider__track {
  animation-direction: reverse;
}
.f-container .loop-slider .loop-each {
  display: flex;
  align-items: center;
}
.f-container .loop-slider .loop-each > * {
  flex-shrink: 0;
}
@keyframes loop-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.f-container .hero-sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .f-container .hero-sp {
    display: block;
  }
}
.f-container .hero-sp {
  position: relative;
  width: 100%;
  height: 85.12rem;
}
.f-container .hero-sp::before {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  width: 100%;
  height: 88.467rem;
  content: '';
  background: no-repeat url(../img/hero_bg.jpg?251210_v1) 0 0 / cover;
}
.f-container .hero-sp .hero__mv {
  position: relative;
  z-index: 2;
}
.f-container .hero-sp .hero__box {
  position: absolute;
  z-index: 2;
  top: 56.036rem;
  left: 50%;
  transform: translateX(-50%);
}
.f-container .hero-sp .hero__title {
  display: flex;
  flex-direction: column;
  margin-bottom: 2.816rem;
  pointer-events: none;

  row-gap: 1.792rem;
}
.f-container .hero-sp .hero__title span {
  padding-top: 0.64rem;
  letter-spacing: -0.025em;
  font-family: 'span-compressed', serif;
  font-size: 10.24rem;
  font-weight: 200;
  font-style: normal;
  line-height: 6.528rem;
  color: #f77fc1;
}
.f-container .hero-sp .hero__title > span:nth-of-type(2) {
  margin-left: -0.192rem;
}
.f-container .hero-sp .hero__title > span:nth-of-type(2) span {
  display: inline-block;
  padding-top: 0;
  padding-left: 0.192rem;
}
.f-container .hero-sp .hero__text {
  display: flex;
  flex-direction: column;
  pointer-events: none;

  row-gap: 0.565rem;
}
.f-container .hero-sp .hero__text span {
  width: 48rem;
  padding-bottom: 0.256rem;
  font-family: 'freightbigcmp-pro', serif;
  font-size: 1.792rem;
  font-weight: 300;
  font-style: normal;
  line-height: 1.408rem;
  color: #f77fc1;
}
.f-container .sec .abs {
  position: absolute;
}
.f-container .sec .z2 {
  position: relative;
  z-index: 2;
}
.f-container .sec .sticky {
  position: sticky;
  background: #ffffff;
}
.f-container .sec .sticky + .sec__area {
  z-index: 2;
}
.f-container .sec .sticky.off {
  position: relative;
}
.f-container .sec .sticky.off + .sec__area {
  z-index: 1;
}
.f-container .sec__area {
  position: relative;
  background-color: #ffffff;
}
.f-container .sec__box {
  position: relative;
}
.f-container .sec__img {
  position: relative;
}
.f-container .sec__db {
  position: relative;
  width: 100%;
  height: 0.556rem;
}
.f-container .sec__db::before,
.f-container .sec__db::after {
  position: absolute;
  left: 0;
  display: inline-block;
  width: 100%;
  content: '';
  background-color: #ba0000;
}
.f-container .sec__db::before {
  top: 0;
  height: 0.127rem;
}
.f-container .sec__db::after {
  bottom: 0;
  height: 0.188rem;
}
.f-container .sec__db img {
  display: none;
}
.f-container .sec__credit {
  position: relative;
}
.f-container .sec__credit .credit {
  display: flex;
  flex-wrap: wrap;

  row-gap: 0.448rem;
}
.f-container .sec__credit .item {
  position: relative;
  display: flex;
  align-items: flex-end;
  letter-spacing: 0.065em;
  font-family: 'poppins', sans-serif;
  font-size: 1.28rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.28rem;
  color: #75b8c7;
}
.f-container .sec__credit .item a {
  display: flex;
  color: #75b8c7;
}
.f-container .sec__credit .item a span {
  padding-top: 0.448rem;
  letter-spacing: 0.065em;
  font-family: 'poppins', sans-serif;
  font-size: 1.28rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.088rem;
}
.f-container .sec__credit .item a span.txt {
  display: flex;
}
.f-container .sec__credit .item a span .brand-name {
  padding-top: 0;
}
.f-container .sec__credit .item:nth-of-type(1)::after,
.f-container .sec__credit .item:nth-of-type(3)::after {
  display: inline-block;
  padding: 0 0.384rem;
  content: '/';
  transform: translateY(8%);
}
.f-container .sec__credit .item:last-child::after {
  display: none;
}
.f-container .sec__credit.dfc .credit {
  justify-content: center;
}
.f-container .sec__credit.cll .credit {
  align-items: flex-start;
  flex-direction: column;
}
.f-container .sec__credit.cll .item::after {
  display: none;
}
.f-container .sec__credit.clc .credit {
  align-items: center;
  flex-direction: column;
}
.f-container .sec__credit.clc .item::after {
  display: none;
}
.f-container .sec__credit.clr .credit {
  align-items: flex-end;
  flex-direction: column;
}
.f-container .sec__credit.clr .item::after {
  display: none;
}
.f-container .sec__sticky {
  position: relative;
}
.f-container .sec__sticky > .sec__img {
  position: sticky;
  z-index: 2;
}
.f-container .sec__sticky.pc > .sec__img {
  top: 100px;
}
.f-container .sec__sticky.sp > .sec__img {
  top: 70px;
}
.f-container .sec__title {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  pointer-events: none;

  row-gap: 1.193rem;
}
.f-container .sec__title span {
  padding-top: 0.32rem;
  letter-spacing: -0.025em;
  font-family: 'span-compressed', serif;
  font-size: 6.4rem;
  font-weight: 200;
  font-style: normal;
  line-height: 4.224rem;
}
.f-container .sec__text {
  display: flex;
  align-items: center;
  flex-direction: column;
  pointer-events: none;

  row-gap: 0.57rem;
}
.f-container .sec__text span {
  padding-bottom: 0.384rem;
  font-family: 'freightbigcmp-pro', serif;
  font-size: 1.792rem;
  font-weight: 300;
  font-style: normal;
  line-height: 1.28rem;
}
.f-container .sec01 {
  padding-top: 8rem;
}
.f-container .sec01 .img01 {
  width: 45.44rem;
  margin: 0 auto 1.907rem;
}
.f-container .sec01 .credit01 {
  margin-bottom: 7.424rem;
}
.f-container .sec01 .stars01 {
  top: -2.56rem;
  left: 5.21rem;
  width: 8.933rem;
}
.f-container .sec01 .img02 {
  width: 34.56rem;
  padding-bottom: 26.24rem;
  margin: 0 auto;
}
.f-container .sec02 {
  margin-top: -2.304rem;
}
.f-container .sec02 .credit01 {
  bottom: 1.728rem;
  left: 1.856rem;
}
.f-container .sec02 .box02 {
  display: flex;
  justify-content: space-between;
  margin-top: 0.384rem;

  -moz-column-gap: 0.384rem;
  column-gap: 0.384rem;
}
.f-container .sec03 .bg01 {
  margin-bottom: 8.768rem;
}
.f-container .sec03 .box01 {
  top: 15.36rem;
  left: 5.44rem;
  width: 37.12rem;
}
.f-container .sec03 .box01 .img01 {
  margin-bottom: 0.399rem;
}
.f-container .sec03 .box01 .img02 {
  margin-bottom: 1.792rem;
}
.f-container .sec03 .box01 .stars01 {
  top: 3.604rem;
  right: -2.587rem;
  width: 8.933rem;
}
.f-container .sec03 .box01 .stars02 {
  top: 56.824rem;
  left: 1.891rem;
  width: 4.871rem;
}
.f-container .sec03 .box02 {
  bottom: 0;
  left: 0;
  width: 48rem;
  height: 58.911rem;
}
.f-container .sec03 .box02 .img03 {
  width: 25.6rem;
  margin: 5.014rem auto 2.24rem;
}
.f-container .sec03 .box02 .stars03 {
  top: -1.664rem;
  right: 1.856rem;
  width: 7.864rem;
}
.f-container .sec03 .box02 .stars04 {
  top: 15.616rem;
  left: 1.984rem;
  width: 8.088rem;
}
.f-container .sec03 .box02 .title-slide01 {
  margin-bottom: 3.648rem;
}
.f-container .sec03 .box02 .title-slide01 .loop-slider__track {
  width: 192rem;
}
.f-container .sec03 .box02 .title-slide01 .split-text {
  display: flex;
  flex-shrink: 1;
}
.f-container .sec03 .box02 .title-slide01 .split-text span {
  padding-top: 0.64rem;
  letter-spacing: -0.025em;
  font-family: 'span-compressed', serif;
  font-size: 10.24rem;
  font-weight: 200;
  font-style: normal;
  line-height: 6.4rem;
  color: #b3d7dd;
}
.f-container .sec03 .box02 .text01 {
  color: #898989;
}
.f-container .sec04 .box01 {
  background-color: #cdd9e3;
}
.f-container .sec04 .box01 .img01 {
  top: 2.578rem;
  left: 2.56rem;
  width: 42.88rem;
}
.f-container .sec04 .box02 {
  background-color: #cdd9e3;
}
.f-container .sec04 .box02 .credit01 {
  top: 2.88rem;
  left: 2.744rem;
  width: 35.2rem;
}
.f-container .sec04 .box02 .img02 {
  top: 8.996rem;
  left: 7.04rem;
  width: 33.92rem;
}
.f-container .sec05 .box01 {
  padding: 12.8rem 0;
}
.f-container .sec05 .box01 .img01 {
  width: 42.24rem;
  margin: 0 auto;
}
.f-container .sec05 .box01 .stars01 {
  top: 9.43rem;
  left: 3.197rem;
  width: 10.831rem;
}
.f-container .sec05 .box01 .stars02 {
  right: 3.247rem;
  bottom: -7.324rem;
  width: 9.63rem;
}
.f-container .sec05 .credit01 {
  margin-top: 1.984rem;
}
.f-container .sec06 {
  margin-bottom: 5.76rem;
}
.f-container .sec06 .bg01 {
  margin-top: -9.28rem;
}
.f-container .sec06 .box01 {
  bottom: 10.752rem;
  left: 0;
  width: 100%;
}
.f-container .sec06 .box01 .img01 {
  width: 35.84rem;
  margin: 0 auto;
}
.f-container .sec06 .box01 .credit {
  display: none;
  margin-bottom: 7.168rem;
}
.f-container .sec07 .box01 .title01 {
  top: 5.154rem;
  left: 0.064rem;
}
.f-container .sec07 .box01 .title01 span {
  color: #ba0000;
}
.f-container .sec07 .box01 .title01 > span:nth-of-type(1) {
  letter-spacing: -0.025em;
}
.f-container .sec07 .box01 .title01 > span:nth-of-type(1) span {
  padding-top: 0;
  margin-right: 0.448rem;
  margin-left: -0.448rem;
}
.f-container .sec07 .box01 .title01 > span:nth-of-type(2) {
  margin-left: -0.448rem;
  letter-spacing: -0.011em;
}
.f-container .sec07 .box01 .stars01 {
  top: 3.878rem;
  left: 1.843rem;
  width: 6.163rem;
}
.f-container .sec07 .box01 .text01 {
  bottom: 4.672rem;
  left: 0;
  width: 100%;
  color: #ba0000;
}
.f-container .sec07 .box02 .img02 {
  z-index: 2;
  top: 10.106rem;
  left: 3.976rem;
  width: 33.92rem;
}
.f-container .sec07 .box02 .img03 {
  right: 3.823rem;
  bottom: 0;
  width: 29.44rem;
}
.f-container .sec07 .box02 .stars02 {
  top: 6.033rem;
  right: 4.421rem;
  width: 8.544rem;
}
.f-container .sec07 .box02 .credit01 {
  z-index: 2;
  right: 0;
  bottom: 0;
  padding-top: 1.728rem;
  padding-right: 3.712rem;
  transform: translateY(100%);
}
.f-container .sec08 .box01 {
  padding-top: 18.157rem;
  padding-bottom: 10.862rem;
}
.f-container .sec08 .box01 .img01 {
  width: 42.24rem;
  margin: 0 auto 1.984rem;
}
.f-container .sec08 .box01 .stars01 {
  top: 2.142rem;
  left: 3.955rem;
  width: 9.63rem;
}
.f-container .sec08 .box01 .stars02 {
  top: 69.312rem;
  right: 3.768rem;
  width: 7.135rem;
}
.f-container .sec09 .bg01 {
  background-color: #cdd9e3;
}
.f-container .sec09 .box01 {
  top: 2.603rem;
  left: 0;
  width: 100%;
}
.f-container .sec09 .box01 .img01 {
  width: 42.88rem;
  margin: 0 auto 2.048rem;
}
.f-container .sec09 .box02 .inner01 {
  top: 10.965rem;
  left: 7.988rem;
  width: 32rem;
}
.f-container .sec09 .box02 .img02 {
  margin-bottom: 2.112rem;
}
.f-container .sec09 .box02 .stars01 {
  top: 1.087rem;
  left: 1.326rem;
  width: 8.925rem;
}
.f-container .sec09 .box02 .stars02 {
  top: 45.345rem;
  right: 1.172rem;
  width: 9.488rem;
}
.f-container .sec10 .box01 {
  margin-bottom: 0.384rem;
}
.f-container .sec10 .box01 .title01 {
  bottom: 2.794rem;
  left: -0.064rem;
}
.f-container .sec10 .box01 .title01 span {
  letter-spacing: -0.037em;
  color: #d61313;
}
.f-container .sec10 .box01 .stars01 {
  top: 51.607rem;
  right: 7.585rem;
  width: 2.842rem;
}
.f-container .sec10 .box02 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 14.122rem;

  row-gap: 0.384rem;
}
.f-container .sec10 .box02 .sec__img {
  width: 23.808rem;
}
.f-container .sec10 .box02 .sec__img:nth-of-type(even) {
  margin-left: auto;
}
.f-container .sec10 .box02 .img04 .stars02 {
  top: 4.718rem;
  right: -0.628rem;
  width: 2.842rem;
}
.f-container .sec10 .box02 .img06 .stars03 {
  top: 2.062rem;
  left: 2.629rem;
  width: 1.792rem;
}
.f-container .sec10 .box02 .img09 .stars04 {
  top: -1.346rem;
  right: 3.703rem;
  width: 4.419rem;
}
.f-container .sec10 .box02 .img10 {
  width: 100%;
}
.f-container .sec10 .box02 .img10 .stars05 {
  top: 3.911rem;
  left: 4.248rem;
  width: 3.59rem;
}
.f-container .aci__btn {
  position: relative;
  width: 25.6rem;
  margin: 0 auto 7.808rem;
}
.f-container .aci .stars01 {
  position: absolute;
  top: 1.008rem;
  right: -1.264rem;
  width: 2.75rem;
  opacity: 1;
}
.f-container .staff__pic {
  width: 6.366rem;
  margin: 0 auto 2.24rem;
}
.f-container .staff__text {
  display: flex;
  flex-direction: column;
  margin-bottom: 7.808rem;

  row-gap: 1.216rem;
}
.f-container .staff__text span {
  font-family: 'poppins', sans-serif;
  font-size: 1.408rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.408rem;
  color: #606060;
}
.f-container .rf {
  padding-bottom: 12.288rem;
}
.f-container .rf__title {
  margin-bottom: 2.784rem;
  letter-spacing: 0.1em;
  font-family: 'ryo-gothic-plusn', sans-serif;
  font-size: 1.92rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
}
.f-container .rf__imgs {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 45.44rem;
  margin: 0 auto;

  row-gap: 0.64rem;
}
.f-container .rf__img {
  width: 22.4rem;
}
.f-container .rf__img:nth-of-type(even) {
  margin-left: auto;
}

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

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