@charset "UTF-8";

/*
 * LP: MENS EarlyBuy (2026年秋新作ライトアウター) / slug: 0804
 * 単位方針:
 *   - PC: 1rem = 10px 基準 (アートボード幅 1400px)
 *   - PC のうち MV 行・インタースティシャル画像 (アートボード端に接するフルブリード画像) のみ calc(vw) で拡大
 *   - SP: calc(●px * (100vw / 750)) (アートボード幅 750px)
 *   - font-size は上記と独立し、PC=rem / SP=calc(vw) の二択 (本ファイル全体で遵守)
 */

/* ==========================================================================
   共通
   ========================================================================== */

.p-feature {
  overflow-x: hidden;
}

.p-feature__buy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid #000;
  background-color: #fff;
  color: #000;
  font-family: var(--font-barbour-sans);
  text-decoration: none;
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.p-feature__buy-btn:hover {
  background-color: #000;
  color: #fff;
}

.p-feature__price-list__name,
.p-feature__price-list__price {
  font-family: var(--font-barbour-sans);
  color: #000;
  white-space: nowrap;
}

.p-feature__price-list__note {
  font-family: var(--font-zen-kaku-gothic-new);
  font-weight: 500;
  color: #000;
  text-align: center;
  white-space: nowrap;
}

/* ==========================================================================
   MV
   ========================================================================== */

.p-feature__mv {
  position: relative;
}

/* mv-slider: クリップ用の外側コンテナ（overflow: hidden はここに固定）。
   実際にスライドするのは内側の __track 要素。
   クリップ要素自身に transform を掛けると要素ごと画面外へ移動してしまうため、
   JS 側の transform は必ず __track に適用する */
.p-feature__mv-slider {
  width: 100%;
  overflow: hidden;
}

.p-feature__mv-slider__track {
  display: flex;
  width: 100%;
}

.p-feature__mv-slide {
  flex: 1 0 100%;
  aspect-ratio: 470 / 940;
}

.p-feature__mv-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-feature__mv-tagline {
  position: absolute;
  color: #fff;
}

.p-feature__mv-tagline__en {
  margin: 0;
  font-family: var(--font-barbour-sans);
  font-weight: 400;
  white-space: nowrap;
}

.p-feature__mv-tagline__sub {
  margin: 0;
  font-family: var(--font-barbour-sans);
  font-weight: 400;
  white-space: nowrap;
}

/* ==========================================================================
   イントロ (h1 + リード文)
   ========================================================================== */

.p-feature__intro {
  box-sizing: border-box;
}

.p-feature__intro-heading {
  margin: 0;
  color: #000;
  font-family: var(--font-zen-kaku-gothic-new);
  font-weight: 500;
  letter-spacing: 0.03em;
}

.p-feature__intro-lead {
  margin: 0;
  color: #000;
  font-family: var(--font-zen-kaku-gothic-new);
  font-weight: 500;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   Look セクション (01 / 02 / 03 共通)
   ========================================================================== */

.p-feature__look {
  box-sizing: border-box;
}

/* --- 見出しブロック (採番 + タイトル + インタースティシャル画像 + 説明文) --- */

.p-feature__look-head {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.p-feature__look-head__title {
  margin: 0;
  display: flex;
  color: #000;
}

.p-feature__look-head__number {
  font-family: var(--font-barbour-sans);
  font-weight: 500;
  letter-spacing: 0.05em;
  position: relative;
}

.p-feature__look-head__number::after {
  content: "";
  display: block;
  background-color: #000;
}

.p-feature__look-head__name {
  font-family: var(--font-barbour-sans);
  font-weight: 400;
  letter-spacing: 0.05em;
}

.p-feature__look-head__interstitial {
  margin: 0;
  order: -1;
}

.p-feature__look-head__interstitial img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1400 / 875;
  object-fit: cover;
}

.p-feature__look-head__desc {
  margin: 0;
  color: #000;
  font-family: var(--font-zen-kaku-gothic-new);
  font-weight: 500;
  letter-spacing: 0.03em;
}

/* --- ギャラリー (2枚の画像。2枚目が1枚目に重なるアニメーション) --- */

.p-feature__look-gallery {
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.p-feature__look-gallery__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 630 / 900;
  object-fit: cover;
}

.p-feature__look-gallery__image--1,
.p-feature__look-gallery__image--2 {
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.p-feature__look-gallery__image--1.is-visible,
.p-feature__look-gallery__image--2.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- 詳細ブロック (価格リスト + 単品説明 / 小画像) --- */

.p-feature__look-detail {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "pricelist"
    "image"
    "singleitem";
  box-sizing: border-box;
}

.p-feature__look-detail__image {
  grid-area: image;
}

.p-feature__single-item {
  grid-area: singleitem;
}

.p-feature__look-detail__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 390 / 520;
  object-fit: cover;
}

.p-feature__look-detail__image--landscape img {
  aspect-ratio: 525 / 350;
}

.p-feature__price-list {
  grid-area: pricelist;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.p-feature__price-list__item {
  display: flex;
  align-items: center;
  font-weight: 400;
}

.p-feature__single-item__desc {
  margin: 0;
  color: #000;
  font-family: var(--font-zen-kaku-gothic-new);
  font-weight: 400;
}

.p-feature__single-item__price-row {
  display: flex;
  align-items: center;
}

/* ==========================================================================
   最終CTA
   ========================================================================== */

.p-feature__cta {
  margin: 0 auto;
}

.p-feature__cta__button {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0 auto;
  border: 1px solid #4d4d4d;
  background-color: #4d4d4d;
  color: #fff;
  text-decoration: none;
  font-family: var(--font-zen-kaku-gothic-new), sans-serif;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.p-feature__cta__button:hover,
.p-feature__cta__button:focus-visible {
  background-color: #fff;
  color: #4d4d4d;
}

/* ==========================================================================
   PC (min-width: 768px)
   ========================================================================== */

@media (min-width: 768px) {
  .p-feature__mv-slider {
    overflow: visible;
  }

  /* Figma: 470px の画像 3 枚を 5px ずつ重ねて合計 1400px。
     アートボード端に接するビジュアル要素なのでブラウザ幅に応じて拡大する。
     100vw は縦スクロールバー幅を含み右側にはみ出すため、親幅に対する % で指定する
     (470/1400 = 33.5714286% / 重なり 5/1400 = 0.3571429%) */
  .p-feature__mv-slide {
    flex: 0 0 33.5714286%;
  }

  /* :nth-child(-n+2) で 1・2 枚目を明示的に指定する（無限ループ用に末尾へ追加される
     複製スライドの有無に関わらず選択結果が変わらないようにするため、:not(:last-child) は使わない） */
  .p-feature__mv-slide:nth-child(-n + 2) {
    margin-right: -0.3571429%;
  }

  /* 無限ループ用に JS が末尾へ追加する先頭スライドの複製は、PC では静止 3 枚並びのため非表示にする */
  .p-feature__mv-slide--clone {
    display: none;
  }

  .p-feature__mv-tagline {
    left: 8rem;
    bottom: 7rem;
  }

  .p-feature__mv-tagline__en {
    font-size: 4.5rem;
    line-height: 1;
    letter-spacing: 0.05em;
  }

  .p-feature__mv-tagline__break {
    display: none;
  }

  .p-feature__mv-tagline__sub {
    font-size: 2.5rem;
    line-height: 1.8;
    letter-spacing: 0.05em;
    margin-top: 0.5rem;
  }

  .p-feature__intro {
    width: 80rem;
    margin: 15rem auto 0;
    padding: 0;
  }

  .p-feature__intro-heading {
    font-size: 2.3rem;
    line-height: 1.75;
  }

  .p-feature__intro-lead {
    margin-top: 5rem;
    max-width: 80rem;
    font-size: 1.7rem;
    line-height: 1.75;
  }

  .p-feature__look {
    max-width: 140rem;
    margin: 15rem auto 0;
    padding: 0 15rem;
  }

  .p-feature__look:last-child {
    margin-bottom: 20rem;
  }

  /* 上段にインタースティシャル画像、下段を「見出し (左) + 説明文 (右)」の等幅 2 カラム。
     flex + rem 固定幅だと 1400px 未満のビューポートで説明文が折り返し落ちするため grid で組む */
  .p-feature__look-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "interstitial interstitial"
      "title desc";
    align-items: start;
    column-gap: 0;
    row-gap: 5rem;
  }

  .p-feature__look-head__title {
    grid-area: title;
    flex-direction: row;
    align-items: flex-start;
    column-gap: 0;
  }

  .p-feature__look-head__number {
    flex: 0 0 7rem;
    font-size: 1.5rem;
    line-height: 1.75;
    padding-bottom: 0.4125rem;
  }

  .p-feature__look-head__number::after {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 4rem;
    height: 1px;
  }

  /* Figma では採番より 3.6px 下にベースラインが置かれている */
  .p-feature__look-head__name {
    margin-top: 0.3625rem;
    font-size: 2.5rem;
    line-height: 1.2;
     white-space: nowrap;
  }

  /* アートボード端に接するビジュアル要素なので、.p-feature__look の max-width (140rem) を
     突き破ってビューポート端まで拡大する（MV と同じ考え方）。
     100vw ではなく calc(50% - 50vw) の breakout パターンで中央基準に全幅化し、
     縦スクロールバー分のはみ出しは祖先の .p-feature { overflow-x: hidden; } で吸収する。
     aspect-ratio は figure 自身にも明示し、画像読み込み前でも高さを確保する（レイアウトシフト対策） */
  .p-feature__look-head__interstitial {
    grid-area: interstitial;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    aspect-ratio: 1400 / 875;
  }

  .p-feature__look-head__desc {
    grid-area: desc;
    font-size: 1.5rem;
    line-height: 2;
  }

  .p-feature__look-gallery {
    width: calc(630 * (100vw / 1400));
    margin-top: 10rem;
  }

  .p-feature__look-gallery__image--2 {
    margin-top: 2rem;
  }

  /* Figma: 価格リストを中央寄せで上段に置き、下段を「単品説明 (左) + 画像 (右)」の
     中央寄せ 2 カラムにする */
  .p-feature__look-detail {
    margin-top: 5rem;
    grid-template-columns: auto auto;
    grid-template-areas:
      "pricelist pricelist"
      "singleitem image";
    justify-content: center;
    column-gap: 10rem;
    row-gap: 8rem;
    align-items: center;
  }

  /* Look 03 のみ横長ディテール画像で列間が 95px */
  .p-feature__look-detail:has(.p-feature__look-detail__image--landscape) {
    column-gap: 9.5rem;
  }

  .p-feature__price-list {
    justify-self: center;
    width: 31.2rem;
    row-gap: calc(22 * (100vw / 1400));
  }

  .p-feature__price-list__item {
    column-gap: 1.5rem;
    padding: 0;
  }

  .p-feature__price-list__name {
    font-size: 1.5rem;
    line-height: 1.75;
    letter-spacing: 0.05em;
    flex: 0 0 9rem;
  }

  .p-feature__price-list__price {
    font-size: 1.5rem;
    line-height: 1.75;
    letter-spacing: 0.05em;
    flex: 1 1 auto;
  }

  .p-feature__price-list__note {
    font-size: 1.3rem;
    line-height: 1.480769;
    letter-spacing: 0.05em;
    flex: 0 0 auto;
  }

  .p-feature__buy-btn {
    width: 8rem;
    height: 2rem;
    font-size: 1.1rem;
    line-height: 1;
    letter-spacing: 0.05em;
  }

  .p-feature__look-detail__image {
    width: 39rem;
  }

  .p-feature__look-detail__image--landscape {
    width: 52.5rem;
  }

  .p-feature__single-item {
    width: 30rem;
    margin-top: 0;
  }

  .p-feature__single-item__desc {
    font-size: 1.3rem;
    line-height: 1.923;
  }

  .p-feature__single-item__price-row {
    margin-top: 5rem;
    column-gap: 2rem;
  }

  .p-feature__cta {
    width: 70rem;
    margin: 20rem auto 19.5rem;
  }

  .p-feature__cta__button {
    width: 50rem;
    height: 10rem;
    font-size: 2rem;
    line-height: 2.0125;
  }
}

/* ==========================================================================
   SP (max-width: 767px)
   ========================================================================== */

@media (max-width: 767px) {
  .p-feature__mv-slider {
    position: relative;
  }

  .p-feature__mv-slide {
    flex: 1 0 100%;
    aspect-ratio: 750 / 1000;
  }

  .p-feature__mv-tagline {
    left: calc(25 * (100vw / 750));
    bottom: calc(30 * (100vw / 750));
  }

  .p-feature__mv-tagline__en {
    font-size: calc(67 * (100vw / 750));
    line-height: 1.045;
    letter-spacing: 0.05em;
  }

  .p-feature__mv-tagline__sub {
    font-size: calc(33 * (100vw / 750));
    line-height: 1.667;
    letter-spacing: 0.05em;
    margin-top: calc(10 * (100vw / 750));
  }

  .p-feature__intro {
    padding: calc(100 * (100vw / 750)) calc(25 * (100vw / 750)) 0;
  }

  .p-feature__intro-heading {
    font-size: calc(35 * (100vw / 750));
    line-height: 1.857;
  }

  .p-feature__intro-lead {
    margin-top: calc(50 * (100vw / 750));
    font-size: calc(25 * (100vw / 750));
    line-height: 2;
  }

  .p-feature__look {
    margin-top: calc(150 * (100vw / 750));
    padding: 0 calc(25 * (100vw / 750));
  }

  .p-feature__look:last-child {
    margin-bottom: calc(200 * (100vw / 750));
  }

  .p-feature__look-head {
    flex-direction: column;
  }

  .p-feature__look-head__title {
    order: 0;
    flex-direction: column;
    gap: calc(20 * (100vw / 750));
  }

  .p-feature__look-head__number {
    font-size: calc(40 * (100vw / 750));
    line-height: 1.75;
    padding-bottom: 0;
  }

  .p-feature__look-head__number::after {
    position: absolute;
    left: 0;
    bottom: calc(5 * (100vw / 750));
    width: calc(70 * (100vw / 750));
    height: 1.5px;
  }

  .p-feature__look-head__name {
    font-size: calc(45 * (100vw / 750));
    line-height: 1.333;
    letter-spacing: 0.05em;
     white-space: nowrap;
  }

  .p-feature__look-head__interstitial {
    order: 1;
    margin: calc(50 * (100vw / 750)) calc(-25 * (100vw / 750)) calc(30 * (100vw / 750));
    /* figure 自身にも aspect-ratio を明示し、画像読み込み前でも高さを確保する（レイアウトシフト対策） */
    aspect-ratio: 750 / 1000;
  }

  .p-feature__look-head__interstitial img {
    aspect-ratio: 750 / 1000;
  }

  .p-feature__look-head__desc {
    order: 2;
    font-size: calc(25 * (100vw / 750));
    line-height: 2;
    letter-spacing: 0.03em;
  }

  /* Figma: SP のギャラリーは画面幅いっぱい (750px) の全幅表示 */
  .p-feature__look-gallery {
    margin-top: calc(80 * (100vw / 750));
    margin-left: calc(-25 * (100vw / 750));
    margin-right: calc(-25 * (100vw / 750));
  }

  .p-feature__look-gallery__image {
    aspect-ratio: 750 / 1000;
  }

  .p-feature__look-gallery__image--2 {
    margin-top: calc(20 * (100vw / 750));
  }

  .p-feature__look-detail {
    margin-top: calc(50 * (100vw / 750));
  }

  /* Figma: 価格リストは左右 75px 位置 (幅 600px) */
  .p-feature__price-list {
    width: calc(600 * (100vw / 750));
    margin: 0 auto;
    row-gap: calc(56 * (100vw / 750));
  }

  .p-feature__price-list__item {
    column-gap: 0;
    padding: 0;
  }

  .p-feature__price-list__name {
    font-size: calc(25 * (100vw / 750));
    line-height: 1.75;
    letter-spacing: 0.05em;
    flex: 0 0 calc(130 * (100vw / 750));
  }

  .p-feature__price-list__price {
    font-size: calc(25 * (100vw / 750));
    line-height: 1.75;
    letter-spacing: 0.05em;
    flex: 1 1 auto;
  }

  .p-feature__price-list__note {
    font-size: calc(27 * (100vw / 750));
    line-height: 1.620370;
    letter-spacing: 0.05em;
    flex: 0 0 auto;
  }

  .p-feature__buy-btn {
    width: calc(200 * (100vw / 750));
    height: calc(40 * (100vw / 750));
    font-size: calc(25 * (100vw / 750));
    line-height: 1;
    letter-spacing: 0.05em;
  }

  .p-feature__look-detail__image {
    width: calc(640 * (100vw / 750));
    margin: calc(80 * (100vw / 750)) auto 0;
  }

  .p-feature__look-detail__image img {
    aspect-ratio: 640 / 840;
  }

  .p-feature__look-detail__image--landscape img {
    aspect-ratio: 640 / 680;
  }

  /* Figma: 単品説明は左右 55px 位置 (幅 640px) */
  .p-feature__single-item {
    width: calc(640 * (100vw / 750));
    margin: calc(30 * (100vw / 750)) auto 0;
  }

  .p-feature__single-item__desc {
    font-size: calc(25 * (100vw / 750));
    line-height: 2;
  }

  /* Figma: 単品の価格行は左右 75px 位置 (幅 600px)。BUY は行の右端揃え */
  .p-feature__single-item__price-row {
    margin: calc(50 * (100vw / 750)) calc(20 * (100vw / 750)) 0;
    column-gap: calc(20 * (100vw / 750));
  }

  .p-feature__cta {
    margin: calc(200 * (100vw / 750)) auto calc(199 * (100vw / 750));
  }

  .p-feature__cta__button {
    width: calc(600 / 700 * 100%);
    height: calc(150 * (100vw / 750));
    font-size: calc(30 * (100vw / 750));
    line-height: 1.75;
  }
}