@charset "UTF-8";
.sp {
  display: block;
}

.pc {
  display: none;
}

.wrapper {
  padding: 0 5vw;
  width: 100%;
  box-sizing: border-box;
}

.btn {
  width: 100%;
  padding: 0 10vw;
  margin-bottom: 96px;
}
.btn a {
  margin: 0 auto;
  display: block;
}
.btn a img {
  width: 78%;
}

.credit {
  font-family: "helvetica-neue-lt-pro", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.5px;
  line-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
}
.credit .comment {
  line-height: 150%;
}
.credit .comment span {
  font-family: "dnp-shuei-gothic-gin-std", sans-serif;
  font-size: 9px;
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  color: #333333;
  margin-top: 10px;
}
.credit p {
  display: block;
  margin-bottom: 5px;
}
.credit p a {
  border: #333 solid 0.5px;
  color: #333;
  padding: 3px 16px;
  margin-left: 8px;
  font-size: 10px;
  border-radius: 50px;
  line-height: 100%;
}
.credit p a:hover {
  background-color: #333;
  color: #fff;
  transition-duration: 0.5s;
  text-decoration: none !important;
}
.credit p .comingsoon {
  background: none;
  font-family: "helvetica-neue-lt-pro", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #333;
  letter-spacing: 0.5px;
  line-height: 100%;
}
.credit .small {
  font-size: 10px;
  line-height: 200%;
}

/* ============================================
   SP用：オープニングオーバーレイ調整
   ============================================ */
#opening-overlay {
  overflow: hidden;
}

.opening-wave {
  width: 300%; /* 画面の3倍幅を確保して波テキストの可視域を広げる */
  margin-left: -100%; /* 中央寄せ */
  height: 40vw; /* SPに合わせた高さ */
}

.opening-wave__svg text {
  font-size: 96px; /* SVG座標系での大きさ（数値を大きくすると文字が大きくなる） */
}

#top {
  overflow: hidden;
  /* ============================================
   ★★★ 追加セクション：MVループアニメーション ★★★
   3枚の画像を横方向にゆったり無限ループ
   ============================================ */
}
#top .ttl {
  position: absolute;
  bottom: -20%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  width: 92%;
  height: 51%;
  z-index: 2;
}
#top .mv-loop__track {
  display: flex;
  width: 1200vw; /* SPでは1枚=画面幅いっぱい */
  animation: mvLoop 20s linear infinite; /* SPは少しテンポよく */
  will-change: transform;
  backface-visibility: hidden;
}
#top .mv-loop__slide {
  flex: 0 0 100vw; /* 1枚=画面幅 */
  width: 100vw;
}
#top .mv-loop__slide img {
  display: block;
  width: 100%;
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
}
@keyframes mvLoop {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0); /* 3枚セット分（50%）でループ */
  }
}
#top {
  /* ============================================
   ★★★ MVループ ここまで ★★★
   ============================================ */
}
#top .readAera {
  display: flex;
  flex-direction: column;
  gap: 80px;
  margin-top: 80px;
}
#top .readAera .read {
  text-align: center;
  font-family: "dnp-shuei-gothic-gin-std", sans-serif;
  font-style: normal;
}
#top .readAera .read p {
  font-size: 3.73vw;
  font-weight: 400;
  line-height: 200%;
  letter-spacing: 0.5px;
}
#top .readAera .index {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
}
#top .readAera .index .inner-index {
  width: 240px;
}

.premium-wave-section {
  margin-top: 144px;
  width: 100%;
  height: 160vw;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}
.premium-wave-section .premium-wave-svg {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  z-index: 1;
}
.premium-wave-section {
  /* ▼ 縦型動画コンテナのスタイル */
}
.premium-wave-section .video-overlay-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  height: 80%;
  aspect-ratio: 9/16;
}
.premium-wave-section .vertical-dummy-video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.premium-wave-section2 {
  width: 100%;
  height: 160vw;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}
.premium-wave-section2 .premium-wave-svg {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  z-index: 1;
}
.premium-wave-section2 {
  /* ▼ 縦型動画コンテナのスタイル */
}
.premium-wave-section2 .video-overlay-container {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  height: 80%;
  aspect-ratio: 9/16;
  width: 70%;
}
.premium-wave-section2 .vertical-dummy-video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

#sec1 {
  width: 100%;
  position: relative;
  height: 300vw;
  margin-top: 168px;
}
#sec1 .num {
  position: absolute;
  top: 0;
  right: 5vw;
  z-index: 2;
  width: 45%;
}
#sec1 .img01 {
  position: absolute;
  top: 4.5%;
  left: 0;
  z-index: 1;
  width: 78.9%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 32px;
}
#sec1 .img01 .credit {
  margin-left: 5vw;
}
#sec1 .img02 {
  position: absolute;
  top: 55%;
  right: 0;
  z-index: 1;
  width: 63%;
}
#sec1 .img03 {
  position: absolute;
  top: 90%;
  left: 0;
  z-index: 1;
  width: 63.7%;
}
#sec1 .img04 {
  position: absolute;
  top: 60%;
  left: 0;
  z-index: 0;
  width: 70%;
}

#sec2 {
  width: 100%;
  position: relative;
  height: 300vw;
  margin-top: 230px;
}
#sec2::before {
  content: "";
  position: absolute;
  top: 40%;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: #f1f1f1;
  z-index: 0;
}
#sec2 .num {
  position: absolute;
  top: 0;
  left: 5vw;
  z-index: 2;
  width: 45%;
}
#sec2 .img01 {
  position: absolute;
  top: 7.8%;
  left: 0;
  z-index: 1;
  width: 100%;
}
#sec2 .flex {
  position: absolute;
  top: 60%;
  left: 5vw;
  z-index: 1;
  width: 90vw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}
#sec2 .flex .flexbox {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
#sec2 .flex .flexbox .img02 {
  width: 40%;
}
#sec2 .flex .flexbox .img03 {
  width: 40%;
}

#sec3 {
  width: 100%;
  position: relative;
  height: 260vw;
  margin-top: 40px;
}
#sec3 .num {
  position: absolute;
  top: 0;
  left: 5vw;
  z-index: 2;
  width: 45%;
}
#sec3 .img01 {
  position: absolute;
  top: 4%;
  right: 0;
  z-index: 1;
  width: 78.6%;
}
#sec3 .img02 {
  position: absolute;
  top: 47.5%;
  left: 0;
  z-index: 1;
  width: 57.86%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 32px;
}
#sec3 .credit {
  position: absolute;
  top: 82%;
  left: 5vw;
  z-index: 1;
}
#sec3 .img03 {
  position: absolute;
  top: 47.5%;
  right: 0;
  z-index: 1;
  width: 40%;
}
#sec3 .img04 {
  position: absolute;
  top: 24%;
  left: 5vw;
  z-index: 0;
  width: 72.26%;
}
#sec3 .pc {
  display: none;
}

#sec4 {
  width: 100%;
  position: relative;
  height: 380vw;
  margin-top: 40px;
}
#sec4 .num {
  position: absolute;
  top: 0;
  right: 5vw;
  z-index: 2;
  width: 45%;
}
#sec4 .img01 {
  position: absolute;
  top: 6%;
  left: 0;
  z-index: 1;
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}
#sec4 .img01 .credit {
  margin-left: 5vw;
}
#sec4 .img02 {
  position: absolute;
  top: 52%;
  left: 36.26%;
  z-index: 1;
  width: 57.3%;
}
#sec4 .img03 {
  position: absolute;
  top: 74%;
  left: 36.26%;
  z-index: 1;
  width: 42.4%;
}

#sec5 {
  width: 100%;
  position: relative;
  height: 300vw;
}
#sec5::before {
  content: "";
  position: absolute;
  top: 28%;
  left: 0;
  width: 100%;
  height: 68%;
  background-color: #f1f1f1;
  z-index: 0;
}
#sec5 .num {
  position: absolute;
  top: 0;
  left: 10vw;
  z-index: 2;
  width: 45%;
}
#sec5 .img01 {
  position: absolute;
  top: 8.5%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  z-index: 1;
  width: 87.2%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}
#sec5 .img02 {
  position: absolute;
  top: 66%;
  right: 0;
  z-index: 1;
  width: 78.86%;
}
#sec5 .img03 {
  position: absolute;
  top: 88.5%;
  left: 5vw;
  z-index: 0;
  width: 42.4%;
}

#sec6 {
  width: 100%;
  position: relative;
  height: 300vw;
  margin-top: 224px;
  margin-bottom: 260px;
}
#sec6 .num {
  position: absolute;
  top: 0;
  right: 9vw;
  z-index: 2;
  width: 45%;
}
#sec6 .img01 {
  position: absolute;
  top: 8.5%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}
#sec6 .img01 .credit {
  margin-left: 5vw;
}
#sec6 .img02 {
  position: absolute;
  top: 70%;
  left: 5vw;
  z-index: 1;
  width: 57.3%;
}
#sec6 .img03 {
  position: absolute;
  top: 77%;
  right: 0;
  z-index: 1;
  width: 44.6%;
}
#sec6 .img04 {
  position: absolute;
  top: 85%;
  left: 23.4%;
  z-index: 0;
  width: 57.3%;
}

#wishlist {
  margin: 0 auto;
  border-top: 0.5px solid var(--gry, #797777);
  border-bottom: 0.5px solid var(--gry, #797777);
  padding: 96px 0;
}
#wishlist h2 {
  width: 47.4%;
  margin: 0 auto;
  margin-bottom: 48px;
}
#wishlist .wrap {
  max-width: 980px;
  margin: 0 auto;
}
#wishlist .flexbox {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  padding: 0 5vw;
}
#wishlist .flexbox dl dt {
  width: 100%;
}
#wishlist .flexbox dl dt picture {
  display: block;
  width: 100%;
}
#wishlist .flexbox dl dt picture img {
  width: 100%;
  height: auto;
  display: block;
}
#wishlist .flexbox dl dd {
  font-family: "helvetica-neue-lt-pro", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.5px;
  line-height: 100%;
  padding: 16px 8px;
  text-align: center;
}

.check {
  font-family: "dnp-shuei-gothic-gin-std", sans-serif;
  font-size: 10px;
  font-weight: 400;
  font-style: normal;
  line-height: 200%;
  color: #333333;
  margin-top: 48px;
  text-align: center;
  margin: 48px 5vw 0 5vw;
}

#staff {
  text-align: center;
  font-size: 12px;
  font-family: "helvetica-neue-lt-pro", sans-serif;
  font-weight: 300;
  font-style: normal;
  line-height: 180%;
  margin-top: 80px;
  padding-bottom: 12vw;
  letter-spacing: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#staff ul {
  width: -moz-fit-content;
  width: fit-content;
  margin: 20px auto 0 auto;
  padding: 0;
}
#staff ul li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  justify-content: flex-start;
  margin-bottom: 8px;
  text-align: left;
}
#staff ul li p {
  width: 120px;
  margin-bottom: 0;
} /*# sourceMappingURL=sp.css.map */