@charset "UTF-8";
html {
  scroll-behavior: smooth;
}

body {
  width: 100%;
  line-height: 1.5;
  letter-spacing: 0.2px;
  font-size: 2.8vw;
  transition: all 1.6s ease 0s;
  font-family: "helvetica-neue-lt-pro", sans-serif;
  font-weight: 400;
  font-style: normal;
}
@media screen and (min-width: 769px) {
  body {
    font-size: 13px;
  }
}

/* 画面固定背景用の新しいクラス */
.fixed-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1; /* 全てのコンテンツの背面に配置 */
  background-image: url(../images/fv_sp.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(255, 255, 255, 0.5);
  opacity: 0; /* 初期状態では非表示にする */
  background-blend-mode: lighten;
  transition: opacity 0.5s ease; /* スムーズな変化のため */
  /* JSでこのクラスを付与してopacityを変更する */
}
.fixed-bg.is-dimmed {
  opacity: 0.6;
}
@media screen and (min-width: 769px) {
  .fixed-bg {
    background-image: url(../images/fv_pc.webp);
    background-position: center 10%;
    /* PCでは背景を広げる必要がなくなるため、関連スタイルを削除 */
  }
}

img {
  display: block;
  width: 100%;
}

a:hover {
  opacity: 0.6;
  transition: 0.6s;
}

@media screen and (min-width: 769px) {
  .spNone {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  .spNone {
    display: none !important;
  }
}

@media screen and (min-width: 769px) {
  .pcNone {
    display: none !important;
  }
}
@media screen and (max-width: 768px) {
  .pcNone {
    display: block;
  }
}

.video--filter {
  filter: drop-shadow(0px 0px #000);
}

/* .load
===================================================== */
.load {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  width: 100%;
  height: 100vh;
  z-index: 9999;
}

/* fv
===================================================== */
.fv {
  opacity: 0;
  transition: opacity 0.5s;
  width: 100%;
  position: relative; /* z-indexを有効にするため */
  z-index: 1; /* wrapperよりは背面、背景よりは手前 */
}
@media screen and (max-width: 768px) {
  .fv {
    position: sticky;
    top: 0;
  }
}
.fv-container {
  width: 100%;
  height: 100%;
}
.fv.on {
  opacity: 1;
}
@media screen and (min-width: 769px) {
  .fv {
    height: 138.8vw;
  }
}

h1 {
  margin: -41vw auto 2vw;
  width: 96%;
  transition: opacity 0.5s ease; /* スムーズな非表示のため */
}
@media screen and (min-width: 769px) {
  h1 {
    /* 【重要】マイナスマージンを一度捨てて、絶対配置にする */
    margin: 0 !important;
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translate(0%, -50%);
    width: 41vw;
    z-index: 10;
  }
}

@media screen and (min-width: 769px) {
  .fv {
    position: -webkit-sticky;
    position: sticky;
    top: calc(100vh - 138.8vw); /* .fvの高さ(138.8vw)から画面の高さを引いた値 */
    z-index: 1;
  }
}
/* アイテム表示用のスタイル
===================================================== */
.wrapper {
  display: flow-root;
  position: relative;
  z-index: 2; /* .fvよりも手前に表示 */
}

/* 白い背景を持たせるための新しいセクションクラス */
.content-section {
  position: relative; /* z-indexを有効にするため */
  background-color: #fff;
  z-index: 1; /* コンテンツが重なる場合に備える */
}

.item-container {
  position: relative; /* 子要素の配置の基準点 */
  overflow: hidden; /* はみ出した要素を隠す */
  z-index: 10;
  /* activeになった時のスタイル */
}
@media screen and (min-width: 769px) {
  .item-container {
    padding: 0 25%;
  }
}
.item-container .img_cre {
  /* .img_1, .img_2の共通スタイル */
  position: relative; /* +ボタンの配置の基準点 */
  height: 100%;
}
.item-container .img_cre img {
  object-fit: cover;
  height: 100%;
  width: 100%; /* コンテナの幅に合わせる */
}
.item-container .img_cre video {
  object-fit: cover;
  height: 100%;
  width: 100%;
  vertical-align: bottom;
}
.item-container .img_1 {
  box-sizing: border-box; /* paddingを含めて高さを100%に収める */
}
@media screen and (max-width: 768px) {
  .item-container .img_1 {
    /* 左右に余白を追加 */
    padding: 25px;
  }
}
@media screen and (min-width: 769px) {
  .item-container .img_1 {
    padding: 40px;
  }
}
.item-container .plus-btn {
  position: absolute;
  bottom: 17px;
  right: 17px;
  width: 15px;
  height: 15px;
  background-color: transparent;
  border: none; /* 枠線を削除 */
  cursor: pointer;
  transition: opacity 0.5s;
  z-index: 30; /* オーバーレイより手前に表示 */
  /* ＋ボタンの線を作成 */
}
@media screen and (min-width: 769px) {
  .item-container .plus-btn {
    bottom: 30px;
    right: 30px;
  }
}
.item-container .plus-btn::before, .item-container .plus-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px; /* 線の長さ */
  height: 1.5px; /* 線の太さ */
  background-color: #fff;
  transition: transform 0.5s ease;
}
@media screen and (min-width: 769px) {
  .item-container .plus-btn::before, .item-container .plus-btn::after {
    width: 20px;
  }
}
.item-container .plus-btn::before {
  transform: translate(-50%, -50%);
}
.item-container .plus-btn::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.item-container .credit {
  width: 80%;
  text-align: left;
  position: absolute;
  left: 50%;
  bottom: 5%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
  opacity: 0; /* 最初は非表示 */
  transition: opacity 0.5s;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media screen and (min-width: 769px) {
  .item-container .credit {
    padding: 0 25%;
  }
}
.item-container .credit p,
.item-container .credit a {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.item-container .credit .store-btn {
  display: inline-block;
  padding: 2px 10px;
  margin-left: 10px;
  transition: background-color 0.3s, color 0.3s;
}
.item-container .credit .buy-btn {
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid #fff;
  margin-left: 10px;
  transition: background-color 0.3s, color 0.3s;
}
.item-container .credit a:hover .buy-btn {
  background-color: #fff;
  color: #000;
}
.item-container.active {
  /* ×ボタンへの変形 */
}
.item-container.active .plus-btn::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.item-container.active .plus-btn::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.item-container.active .credit {
  opacity: 1; /* テキストを表示 */
}
.item-container.active .img_cre::after {
  /* オーバーレイ用の疑似要素 */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒い膜 */
  z-index: 15;
  transition: 0.5s;
}

.w_75 {
  width: 75%;
}
@media screen and (min-width: 769px) {
  .w_75 {
    width: 86%;
  }
}

.m_25 {
  margin: 25% auto 0;
}
@media screen and (min-width: 769px) {
  .m_25 {
    margin: 0 auto;
  }
}

.m_35 {
  margin: 0 auto;
}

.m_45 {
  margin: 45% auto;
}
@media screen and (min-width: 769px) {
  .m_45 {
    margin: 35% auto;
  }
}

.movie_1 {
  width: 50%;
  margin: -8% auto 0 5%;
}
@media screen and (min-width: 769px) {
  .movie_1 {
    margin: -5% auto 0 27%;
    width: 28%;
    padding: 0;
  }
}
@media screen and (max-width: 768px) {
  .movie_1 .credit {
    bottom: -20%;
    gap: 2px;
    width: 90%;
    text-align: left;
  }
}
@media screen and (min-width: 769px) {
  .movie_1 .credit {
    padding: 0;
  }
}

.back_01 {
  padding: 35% 0;
}
@media screen and (min-width: 769px) {
  .back_01 {
    padding: 20% 0;
  }
}

.back_02 {
  padding-bottom: 25%;
}
@media screen and (min-width: 769px) {
  .back_02 {
    padding-bottom: 20%;
  }
}

.back_03 {
  padding: 50% 0 25%;
}
.back_03 .item-container {
  /* activeになった時のスタイル */
}
.back_03 .item-container.active {
  /* ×ボタンへの変形 */
}
.back_03 .item-container.active .plus-btn::before {
  background-color: #fff;
}
.back_03 .item-container.active .plus-btn::after {
  background-color: #fff;
}

.back_04 {
  padding: 20% 0;
}

.movie_3 {
  width: 52%;
  margin: 0 auto;
  display: block;
}
@media screen and (min-width: 769px) {
  .movie_3 {
    width: 33%;
    padding: 0;
  }
}
@media screen and (max-width: 768px) {
  .movie_3 .credit {
    bottom: -9%;
    gap: 2px;
    width: 90%;
    text-align: left;
  }
}
@media screen and (min-width: 769px) {
  .movie_3 .credit {
    padding: 0;
  }
}
.movie_3 .plus-btn::before, .movie_3 .plus-btn::after {
  background-color: #414141;
}

.img_4 .credit {
  bottom: -4%;
}

.movie_4 {
  margin: 3% auto 20%;
  display: block;
}
@media screen and (min-width: 769px) {
  .movie_4 {
    padding: 0;
    width: 36%;
    margin: 2% auto 0;
  }
}
@media screen and (min-width: 769px) {
  .movie_4 .credit {
    padding: 0;
  }
}

.movie_5 {
  z-index: 10;
}
@media screen and (min-width: 769px) {
  .movie_5 {
    width: 35%;
    padding: 0;
  }
}
@media screen and (min-width: 769px) {
  .movie_5 .credit {
    padding: 0;
    margin-bottom: 7%;
  }
}

.sticky {
  height: 352vw;
  background: #fff;
}
@media screen and (min-width: 769px) {
  .sticky {
    height: 720px;
  }
}
.sticky .video {
  position: sticky;
  top: 0;
}

.sticky_container {
  width: 80%;
  margin: 17% auto;
}
@media screen and (min-width: 769px) {
  .sticky_container {
    padding: 20% 0;
    margin: 0 auto;
  }
}
.sticky_container .img_6 {
  position: relative;
}

.bg-img {
  /* 背景を透明にして、下のfixed-bgを覗かせる */
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 769px) {
  .bg-img {
    height: 150vh;
  }
}

footer {
  text-align: center;
}
footer .sta_cre {
  font-size: 2.9333333333vw;
  margin: 0 auto;
  padding-top: 45%;
  margin-bottom: 10%;
  line-height: 2.3;
}
@media screen and (min-width: 769px) {
  footer .sta_cre {
    font-size: 13px;
    padding: 25% 0 10%;
  }
}
footer .icon {
  display: flex;
  justify-content: center;
  gap: 25px;
}
@media screen and (min-width: 769px) {
  footer .icon {
    gap: 35px;
  }
}
footer .icon a {
  width: 25px;
}
@media screen and (min-width: 769px) {
  footer .icon a {
    width: 40px;
  }
}
footer .b_logo {
  width: 130px;
  margin: 10% auto 5%;
}
@media screen and (min-width: 769px) {
  footer .b_logo {
    width: 210px;
    margin: 40px auto;
  }
}
footer .copy {
  font-size: 1.8666666667vw;
  padding-bottom: 15%;
}
@media screen and (min-width: 769px) {
  footer .copy {
    font-size: 9px;
    padding-bottom: 150px;
  }
}

@media screen and (min-width: 769px) {
  .wrapper {
    margin: 0 auto;
  }
}
/* アニメーション中の描画を滑らかにする */
.scroll-video {
  filter: blur(30px);
  opacity: 0;
  transform: translateZ(0);
  transition: opacity 0.8s ease-out, filter 0.8s ease-out;
  will-change: opacity, filter;
}
.scroll-video.is-active {
  filter: blur(0px);
  opacity: 1;
}
.scroll-video.is-dimmed {
  filter: blur(0px);
  opacity: 1;
}/*# sourceMappingURL=style.css.map */