@charset "UTF-8";

/* ============================================================
   基本設定・リセット
   ============================================================ */
html {
  scroll-behavior: smooth;
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
}

@media screen and (max-width: 1400px) {
  html {
    font-size: 0.7142857143vw;
  }
}

body {
  margin: 0;
}

/* PC / SP 表示切り替え */
.pc { display: block; }
.sp { display: none; }

/* ============================================================
   ベース
   ============================================================ */
.feature {
  box-sizing: border-box;
  color: #000;
  margin: 0 auto;
  overflow: clip;
  position: relative;
  width: 100%;
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", sans-serif;
  font-weight: 500;
  font-feature-settings: "palt";
}
.feature * {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  box-sizing: border-box;
  scroll-margin-top: 80px;
}
.feature a {
  color: #000;
  text-decoration: none;
}
.feature a img {
  transition: 0.6s;
}
.feature img {
  vertical-align: bottom;
  max-width: 100%;
}

/* ============================================================
   ホバーアニメーション（透過率0.6 ＋ 背面白ヌケ対応）
   ============================================================ */
/* 1. 通常のLook画像 */
.feature .lookBlock:hover .lookBlock__Img img,
/* 2. スライダー（Splide）の中のLook画像 */
.feature .lookBlock:hover .look-slider img,
/* 3. 一番下の「Check all items」ボタン */
.feature .allitemBtn a:hover img,
/* 4. モーダル内の商品画像 */
.feature .modal__img a:hover img {
  opacity: 0.6;
}

/* ============================================================
   アニメーション（フェードイン・スライド）
   ============================================================ */
@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.js-fade {
  visibility: hidden;
  opacity: 0;
  transition: 1s ease-in-out;
}
.js-fade.is-active {
  visibility: visible;
  opacity: 1;
}

.js-slide-left {
  opacity: 0;
  transform: translateX(-6rem);
  transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}
.js-slide-left.is-active {
  opacity: 1;
  transform: translateX(0);
}

.js-slide-right {
  opacity: 0;
  transform: translateX(6rem);
  transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}
.js-slide-right.is-active {
  opacity: 1;
  transform: translateX(0);
}

/* ============================================================
   大枠のレイアウト（左固定・右スクロール）
   ============================================================ */
.feature .wrap {
  display: flex;
}
.feature .wrap .pc.left-fixed {
  width: 50%;
}
.feature .wrap .LeftCont {
  width: 100%;
  height: 100%;
}
.feature .wrap .LeftCont__Inner {
  position: sticky;
  top: 80px;
  width: 100%;
  height: calc(100vh - 80px);
  overflow: hidden;
}
.feature .wrap .LeftCont .mv__Thum {
  height: 100%;
  width: 100%;
}
.feature .wrap .LeftCont .mv__Thum img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* 左エリア：MV上のテキスト絶対配置 */
.feature .mv__Texts {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}
.feature .mv-txt-01 { position: absolute; top: 1.5%; right: 1.8%; width: 3.17%; }
.feature .mv-txt-02 { position: absolute; top: 47.5%; left: 6.3%; width: 61.1%; }
.feature .mv-txt-03 { position: absolute; top: 72%; right: 3.8%; width: 34.5%; }
.feature .mv-txt-04 { position: absolute; bottom: 1%; left: 7.6%; width: 45%; }

.mv-txt-01,
.mv-txt-02,
.mv-txt-03,
.mv-txt-04 {
  filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.2));
}

/* 右エリア：スクロールコンテナ */
.feature .wrap .RightCont {
  width: 50%;
}
.feature .wrap .RightCont__Inner {
  overflow: clip;
  width: 49rem;
  margin: auto;
}

/* ============================================================
   導入テキスト ＆ Scrollインジケーター
   ============================================================ */
.feature .introBlock {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 3.5rem auto 8rem;
}
.feature .introBlock.-center {
  display: block;
}
.feature .introBlock__Ttl {
  margin-top: 4.2rem;
  margin-bottom: 2rem;
  margin-left: 3.5rem;
}
.feature .introBlock__Ttl img {
  width: 27.5rem;
}
.feature .introBlock__Txt {
  font-family: "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 300;
  font-size: 1.4rem;
  line-height: 1.9;
  letter-spacing: 0.1em;
  margin-left: 3.3rem;
}
.feature .scroll-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-right: 1.2rem;
  margin-top: 3.5rem;
}
.feature .scroll-indicator img {
  width: 1rem;
}
.feature .scroll-line {
  display: block;
  width: 1px;
  height: 150px;
  background-color: #000;
  position: relative;
  overflow: hidden;
}
.feature .scroll-line::before {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  animation: scroll-down 2.5s infinite ease-in-out;
}
@keyframes scroll-down {
  0% { top: -100%; }
  50% { top: 0; }
  100% { top: 100%; }
}

.feature .introBlock_bottom {
  margin: 10rem auto -1rem;
  text-align: center;
  width: 82%;
}
.feature .introBlock__Ttl_bottom img {
  width: 100%;
}

/* ============================================================
   ルックブロック（画像配置）と ＋ボタン
   ============================================================ */
.feature .lookBlock,
.feature .videoBlock {
  width: 100%;
  margin-bottom: 8rem;
}
.feature .lookBlock {
  position: relative;
  cursor: pointer;
}

/* 画像およびスライダーの共通ラッパー */
.feature .lookBlock__Img,
.feature .lookBlock .look-slider,
.feature .videoBlock__Img {
  position: relative;
}

.feature .lookBlock__Img img {
  width: 100%;
  display: block;
}
.feature .videoBlock__Img video,
.feature .videoBlock video {
  width: 100%;
  display: block;
  object-fit: cover;
}

/* 配置パターン（旧クラス幅および寄せ方向の制御） */
.feature .lookBlock.-center .lookBlock__Img,
.feature .lookBlock.-center .look-slider,
.feature .videoBlock.-center .videoBlock__Img {
  margin: 0 auto;
}
.feature .lookBlock.-left .lookBlock__Img,
.feature .lookBlock.-left .look-slider {
  margin: 0 auto 0 0;
}
.feature .lookBlock.-right .lookBlock__Img,
.feature .lookBlock.-right .look-slider {
  margin: 0 0 0 auto;
}
.feature .lookBlock.-full .lookBlock__Img,
.feature .lookBlock.-full .look-slider {
  width: 100%;
  margin: 0 auto;
}

/* 配置バリエーション（固定幅クラスの互換維持） */
.feature .lookBlock.-w-full {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.feature .lookBlock.-w-md-center {
  width: 45.08rem; 
  margin-left: auto;
  margin-right: auto;
}
.feature .lookBlock.-w-md-right {
  width: 45.08rem;
  margin-left: auto;
  margin-right: 0;
}
.feature .lookBlock.-w-md-left {
  width: 44.1rem;
  margin-left: 0;
  margin-right: auto;
}

/* 黄色い枠 */
.yellow {
  border: 2px solid #fff261;
}

/* 動画ブロック個別の調整 */
.feature .videoBlock__Img video {
  margin: 6rem auto;
  width: 91%;
}
/* ============================================================
   ＋アイコンの配置とホバーアニメーション
   ============================================================ */
.feature img.icon-plus,
.feature img.icon-plus_left,
.feature .icon-plus {
  position: absolute;
  bottom: 2rem;
  right: 0.856em;
  width: 3.5rem !important;
  transition: transform 0.3s ease;
  z-index: 2;
}
.feature img.icon-plus_left {
  left: 1rem;
}
.feature .lookBlock:hover .icon-plus,
.feature .lookBlock:hover img.icon-plus,
.feature .lookBlock:hover img.icon-plus_left {
  transform: scale(1.1);
}
.feature .lookBlock.-full img.icon-plus {
  right: 2.5rem;
}

/* ============================================================
   各ルックの個別 width 設定（ライトコンテナ幅 49rem 内での調整）
   ============================================================ */
/* Look 01: 中央寄せ */
.feature .lookBlock[data-target="modal-01"] .lookBlock__Img { width: 88%; }
/* Look 02: 左寄せ */
.feature .lookBlock[data-target="modal-02"] .lookBlock__Img { width: 88%; margin-top: -1.5rem; }
/* Look 03: 右寄せ（Splide） */
.feature .lookBlock[data-target="modal-03"] .look-slider { width: 91.5%; margin-top: -1.5rem; }
/* Look 04: 左寄せ */
.feature .lookBlock[data-target="modal-04"] .lookBlock__Img { width: 92%; margin-top: 10.5rem; }
/* Look 05: 中央寄せ */
.feature .lookBlock[data-target="modal-05"] .lookBlock__Img { width: 92%; margin-top: -3rem; margin-bottom: 10rem; }
/* Look 06: 中央寄せ */
.feature .lookBlock[data-target="modal-06"] .lookBlock__Img { width: 89%; margin-top: -4rem; margin-bottom: -2rem; }
/* Look 07: 中央寄せ */
.feature .lookBlock[data-target="modal-07"] .lookBlock__Img { width: 84%; margin-top: 10.5rem; }
/* Look 08: 中央寄せ */
.feature .lookBlock[data-target="modal-08"] .lookBlock__Img { width: 94%; margin-top: 10.5rem; }
/* Look 09: 左寄せ */
.feature .lookBlock[data-target="modal-09"] .lookBlock__Img { width: 84%; margin-top: -3rem; margin-bottom: -1.5rem; }
/* Look 10: 中央寄せ */
.feature .lookBlock[data-target="modal-10"] .lookBlock__Img { width: 93%; margin-top: -0.5rem; }
/* Look 11: 右寄せ（Splide） */
.feature .lookBlock[data-target="modal-11"] .lookBlock__Img { width: 82%; margin-top: -1rem; }
/* Look 12: 中央寄せ */
.feature .lookBlock[data-target="modal-12"] .lookBlock__Img { margin-top: 10rem; }
/* Look 13: 右寄せ（Splide） */
.feature .lookBlock[data-target="modal-13"] .look-slider { width: 90%; margin-top: -2rem; }
/* Look 15: 左寄せ */
.feature .lookBlock[data-target="modal-15"] .lookBlock__Img { width: 94%; margin-top: -3rem; margin-bottom: -3rem; }
/* Look 16: 右寄せ */
.feature .lookBlock[data-target="modal-16"] .lookBlock__Img { width: 92%; margin-top: 9.5rem; }
/* Look 17: 中央寄せ */
.feature .lookBlock[data-target="modal-17"] .lookBlock__Img { width: 84%; margin-top: -2rem; }
/* Look 18: 中央寄せ */
.feature .lookBlock[data-target="modal-18"] .lookBlock__Img { margin-top: -2rem; }
/* Look 19: 右寄せ */
.feature .lookBlock[data-target="modal-19"] .look-slider { width: 88%; margin-top: -1.5rem; }
/* Look 21: 中央寄せ */
.feature .lookBlock[data-target="modal-21"] .lookBlock__Img { width: 88%; margin-top: -3rem; }

/* ============================================================
   Splide スライダー（自動再生クロスフェード用）
   ============================================================ */
.splide__slide img {
  display: block;
  width: 100%;
}

/* ============================================================
   クレジットモーダル（PC版：右半分を覆う設定）
   ============================================================ */
.feature .modal-overlay {
  position: fixed;
  left: 50%;
  width: 50%;
  background-color: #fff261cc;
  z-index: 100;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease; 
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.feature .modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.feature .modal__close {
  position: fixed;
  right: 3rem;
  cursor: pointer;
  width: 3.5rem;
  z-index: 101;
  transition: opacity 0.3s;
}
.feature .modal__close:hover {
  opacity: 0.6;
}
.feature .modal__close img {
  width: 100%;
  display: block;
}

.feature .modal__content {
  padding: 10rem 0 8rem;
  width: 49rem;
  margin: 0 auto;
}

.feature .modal__item {
  margin-top: 4rem;
  margin-bottom: 13rem;
}
.feature .modal__item:last-child {
  margin-bottom: 0;
}
.feature .modal__img img {
  width: 100%;
  display: block;
}

/* ★ モーダル内の画像リンクの背面に白を敷く */
.feature .modal__img a {
  display: block;        /* aタグを画像と同じ大きさに広げる */
  background-color: #fff; /* 画像の下に敷く白色 */
}

/* ============================================================
   クレジット（FixしたSP版の等間隔詰めロジックをPCサイズに統合）
   ============================================================ */
.feature .modal__credit-box {
  margin-top: 3rem;
  font-family: "Neue Haas Grotesk Display Pro", "neue-haas-grotesk-display", sans-serif;
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1.65;
  letter-spacing: 0.05em;
}
.feature .modal__credit-box ul.credit {
  list-style: none;
  /* ★ Gridを廃止し、独立して左詰めできる block に変更 */
  display: block;
  overflow: hidden;
  width: 100%;
}
.feature .modal__credit-box li.item {
  box-sizing: border-box;
  /* ★ 左から順番に、文字の長さぴったりに詰めて配置 */
  float: left;
  white-space: nowrap;
}
.feature .modal__credit-box a.link {
  display: inline-flex;
  /* ★ 商品名と金額を左詰め */
  justify-content: flex-start;
  /* ★ SP版のFix値に合わせて商品名と金額の間のすき間を最適化 */
  gap: 0.2rem;
  color: #000;
  align-items: baseline;
}

/* ★ 1列目（奇数番目）の共通ルール */
.feature .modal__credit-box li.item:nth-child(2n+1) {
  clear: left; /* ★ 必ず新しく行を改行して左端から配置 */
  /* ★ 1列目の文字が終わってから、2列目が始まるまでの【共通のすき間】*/
  margin-right: 1rem; 
  margin-top: 0.1em;
}

.feature .modal__credit-box span {
  display: inline;
  width: auto;
  padding-right: 0;
}

/* ============================================================
   各モーダルの個別クレジットテキスト位置微調整
   ============================================================ */
/* modal-03（PC固有の縦位置調整を維持） */
.feature #modal-03 { 
  margin-top: -4rem; 
  margin-bottom: 13rem; 
}

/* modal-06 */
.feature #modal-06 .modal__credit-box li.item:nth-child(1) a.link::before{
  content: "(left)";
  margin-right: 0.1rem;
}
.feature #modal-06 .modal__credit-box li.item:nth-child(5) a.link::before {
  content: "(right)";
  margin-right: 0.1rem;
}

/* modal-09 */
.feature #modal-09 .modal__credit-box li.item:nth-child(1) a.link::before{
  content: "(left)";
  margin-right: 0.1rem;
}
.feature #modal-09 .modal__credit-box li.item:nth-child(3) a.link::before{
  content: "(right)";
  margin-right: 0.1rem;
}

/* modal-11 */
.feature #modal-11 .modal__credit-box li.item:nth-child(1) a.link::before{
  content: "(left)";
  margin-right: 0.1rem;
}
.feature #modal-11 .modal__credit-box li.item:nth-child(4) a.link::before{
  content: "(right)";
  margin-right: 0.1rem;
}
/* ★ 4番目以降は左右の並び（奇数・偶数）の役割が反転するため、通常ルールを上書き */
.feature #modal-11 .modal__credit-box li.item:nth-child(2n+1) {
  clear: none;
  margin-right: 0;
}
/* 1番目と3番目だけは通常通り左側に配置 */
.feature #modal-11 .modal__credit-box li.item:nth-child(1),
.feature #modal-11 .modal__credit-box li.item:nth-child(3) {
  clear: left;
  margin-right: 2rem;
}
/* 4番目を強制改行し、それ以降の偶数番目を左側（改行）、奇数番目を右側に設定 */
.feature #modal-11 .modal__credit-box li.item:nth-child(n+4):nth-child(2n) {
  clear: left;
  margin-right: 2rem;
}

/* modal-16 */
.feature #modal-16 .modal__credit-box li.item:nth-child(1) a.link::before{
  content: "(left)";
  margin-right: 0.1rem;
}
.feature #modal-16 .modal__credit-box li.item:nth-child(6) a.link::before{
  content: "(right)";
  margin-right: 0.1rem;
}
/* ★ 6番目以降は左右の並び（奇数・偶数）の役割が反転するため、通常ルールを上書き */
.feature #modal-16 .modal__credit-box li.item:nth-child(2n+1) {
  clear: none;
  margin-right: 0;
}
/* 1, 3, 5番目だけは通常通り左側に配置 */
.feature #modal-16 .modal__credit-box li.item:nth-child(1),
.feature #modal-16 .modal__credit-box li.item:nth-child(3),
.feature #modal-16 .modal__credit-box li.item:nth-child(5) {
  clear: left;
  margin-right: 2rem;
}
/* 6番目を強制改行し、それ以降の偶数番目を左側（改行）、奇数番目を右側に設定 */
.feature #modal-16 .modal__credit-box li.item:nth-child(n+6):nth-child(2n) {
  clear: left;
  margin-right: 1rem;
}

/* modal-17（PC固有の縦位置調整を維持） */
.feature #modal-17 { 
  margin-top: -5rem; 
  margin-bottom: 13rem; 
}

/* modal-21 */
.feature #modal-21 .modal__credit-box li.item:nth-child(1) a.link::before{
  content: "(left)";
  margin-right: 0.1rem;
}
.feature #modal-21 .modal__credit-box li.item:nth-child(3) a.link::before{
  content: "(right)";
  margin-right: 0.1rem;
}

/* ============================================================
   全アイテムボタン（一番下）
   ============================================================ */
.feature .allitemBtn {
  margin-top: 4rem;
  margin-bottom: 0;
}
.feature .allitemBtn a {
  margin: -0.5rem auto 9.5rem;
  display: block;
  width: 27.12rem;
}
.feature .allitemBtn a img {
  width: 100%;
}

.content_bottom {
  margin-bottom: 0!important;
}

/* ============================================================
   フッター調整
   ============================================================ */
.l-container { width: 100%; }
.l-footer { padding: 0; }
.pc-footer { margin: 0; }