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

.pc {
  display: block;
}

.wrapper {
  padding: 0 70px;
  box-sizing: border-box;
  position: relative;
}

.btn {
  margin-top: 96px;
  width: 100%;
}
.btn a {
  margin: 0 auto;
  display: block;
}
.btn a img {
  width: 240px;
}

.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%;
}

#top {
  overflow: hidden;
  /* ============================================
   ★★★ 追加セクション：MVループアニメーション ★★★
   3枚の画像を横方向にゆったり無限ループ
   ============================================ */
}
#top .mv-loop {
  width: 100%;
  overflow: hidden;
  position: relative;
}
#top .ttl {
  position: absolute;
  top: 46%;
  right: 0;
  width: 51%;
  height: 51%;
  z-index: 2;
}
#top .mv-loop__track {
  display: flex;
  width: 199.998vw;
  animation: mvLoop 30s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}
#top .mv-loop__slide {
  flex: 0 0 33.333vw;
  width: 33.333vw;
}
#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);
  }
}
#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: 15px;
  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: 230px;
  width: 100%;
  height: 600px;
  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;
  transform: translateY(80px);
}
.premium-wave-section {
  /* ▼ 縦型動画コンテナのスタイル */
}
.premium-wave-section .video-overlay-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  height: 100%;
  aspect-ratio: 9/16;
}
.premium-wave-section .vertical-dummy-video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.premium-wave-section2 {
  margin-top: 340px;
  width: 100%;
  height: 600px;
  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;
  transform: translateY(80px);
}
.premium-wave-section2 {
  /* ▼ 縦型動画コンテナのスタイル */
}
.premium-wave-section2 .video-overlay-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  height: 100%;
  aspect-ratio: 9/16;
}
.premium-wave-section2 .vertical-dummy-video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

#sec1 {
  width: 100%;
  position: relative;
  height: 80vw;
  margin-top: 168px;
}
#sec1 .num {
  position: absolute;
  top: 6.28%;
  left: 54.14%;
  z-index: 2;
  width: 14.9%;
}
#sec1 .img01 {
  position: absolute;
  top: 22%;
  right: 0;
  z-index: 1;
  width: 40.7%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 32px;
}
#sec1 .img02 {
  position: absolute;
  top: 10.5%;
  left: 26.7%;
  z-index: 1;
  width: 22%;
}
#sec1 .img03 {
  position: absolute;
  top: 58%;
  left: 18.5%;
  z-index: 1;
  width: 22.14%;
}
#sec1 .img04 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 32.57%;
}

#sec2 {
  width: 100%;
  position: relative;
  height: 80vw;
  margin-top: 168px;
}
#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: 20.35%;
  z-index: 2;
  width: 14.9%;
}
#sec2 .img01 {
  position: absolute;
  top: 10%;
  left: 10.42%;
  z-index: 1;
  width: 38.42%;
}
#sec2 .flex {
  position: absolute;
  top: 21%;
  right: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 32px;
}
#sec2 .flex .flexbox {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  width: 100%;
}
#sec2 .flex .flexbox .img02 {
  width: 20.35vw;
}
#sec2 .flex .flexbox .img03 {
  width: 20.35vw;
}

#sec3 {
  width: 100%;
  position: relative;
  height: 80vw;
  margin-top: 96px;
}
#sec3 .num {
  position: absolute;
  top: 0;
  left: 24%;
  z-index: 2;
  width: 14.9%;
}
#sec3 .img01 {
  position: absolute;
  top: 3.5%;
  left: 42.8%;
  z-index: 1;
  width: 38.5%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 32px;
}
#sec3 .img02 {
  position: absolute;
  top: 10.7%;
  left: 18.57%;
  z-index: 1;
  width: 24.35%;
}
#sec3 .img03 {
  position: absolute;
  top: 75%;
  left: 32.5%;
  z-index: 1;
  width: 18.57%;
}
#sec3 .img04 {
  position: absolute;
  top: 23.5%;
  left: 27%;
  z-index: 0;
  width: 35.7%;
}
#sec3 .sp {
  display: none;
}

#sec4 {
  width: 100%;
  position: relative;
  height: 100vw;
  margin-top: 230px;
}
#sec4 .num {
  position: absolute;
  top: 11.6%;
  left: 47%;
  z-index: 2;
  width: 14.9%;
}
#sec4 .img01 {
  position: absolute;
  top: 19.65%;
  right: 0;
  z-index: 1;
  width: 48.85%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}
#sec4 .img02 {
  position: absolute;
  top: 0;
  left: 10.42%;
  z-index: 1;
  width: 30.28%;
}
#sec4 .img03 {
  position: absolute;
  top: 48.92%;
  left: 2.285%;
  z-index: 1;
  width: 22.14%;
}
#sec4 .img04 {
  position: absolute;
  top: 23.5%;
  left: 27%;
  z-index: 0;
  width: 35.7%;
}

#sec5 {
  width: 100%;
  position: relative;
  height: 100vw;
  margin-top: 180px;
}
#sec5::before {
  content: "";
  position: absolute;
  top: 33%;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: #f1f1f1;
  z-index: 0;
}
#sec5 .num {
  position: absolute;
  top: 0;
  left: 39.28%;
  z-index: 2;
  width: 14.9%;
}
#sec5 .img01 {
  position: absolute;
  top: 7.714%;
  left: 10.42%;
  z-index: 1;
  width: 38.5%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}
#sec5 .img02 {
  position: absolute;
  top: 25.7%;
  left: 59.28%;
  z-index: 1;
  width: 21.42%;
}
#sec5 .img03 {
  position: absolute;
  top: 55.7%;
  left: 51.14%;
  z-index: 0;
  width: 14%;
}

#sec6 {
  width: 100%;
  position: relative;
  height: 100vw;
}
#sec6 .num {
  position: absolute;
  top: 0;
  left: 24.28%;
  z-index: 2;
  width: 14.9%;
}
#sec6 .img01 {
  position: absolute;
  top: 9%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  z-index: 1;
  width: 46.57%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}
#sec6 .img02 {
  position: absolute;
  top: 33.7%;
  left: 10.42%;
  z-index: 1;
  width: 22.14%;
}
#sec6 .img03 {
  position: absolute;
  top: 18%;
  left: 67.42%;
  z-index: 1;
  width: 20%;
}
#sec6 .img04 {
  position: absolute;
  top: 47.78%;
  left: 57.92%;
  z-index: 0;
  width: 31.64%;
}

#wishlist {
  margin: 144px auto 0 auto;
  border-top: 0.5px solid var(--gry, #797777);
  border-bottom: 0.5px solid var(--gry, #797777);
  padding: 96px 0;
}
#wishlist h2 {
  width: 230px;
  margin: 0 auto;
  margin-bottom: 48px;
}
#wishlist .wrap {
  max-width: 980px;
  margin: 0 auto;
}
#wishlist .flexbox {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: 100%;
}
#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;
}

#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;
} /*# sourceMappingURL=pc.css.map */