@charset "UTF-8";
:root {
  --font: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "Yu Gothic", "Open Sans", "メイリオ", sans-serif;
  --font_en: "roboto", sans-serif;
}

* > .main-area {
  font-weight: var(--fontweight-medium);
  font-feature-settings: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: unset;
  min-width: auto;
}

/* 共通 スタイル */
.FR260212second img {
  width: 100%;
  height: 100%;
}

.credit > a {
  display: inline-block;
}

/* ▼ -----------put style.css---------- ▼ */

/* =====================================================
   FRAY I.D / New In Denim (FR260812denim)
   SP特化型・PC表示パターン A（左カラム: MV画像固定 / 右カラム: SPコンテンツ）
   単位・命名などの規約は coding-guidelines.md を参照
   ※雛形の接頭辞 .lp-page は計測ID #FR260812denim へ置換済み
   ===================================================== */

/* ▼ -----------可変設定---------- ▼
   .lp_variable は #FR260812denim と同じ要素に付与（class セレクタのまま） */
.lp_variable {
  /*デザインの値*/
  --pc-width: 1400;/*PCデザイン幅*/
  --sp-width: 750;/*SPデザイン幅*/
  --pc-artboard-width: 460;/*PC時の中央コンテンツ列の幅（SPコンテンツを流す列）*/
  --sp-artboard-width: 750;/*SP時の中央コンテンツ列の幅*/
 /*可変率の計算式*/
  --formula: calc(var(--variable) * var(--ratio));/*SP,PC共通箇所の可変割合の計算式*/
  --formula_pc: calc(var(--variable) * 1);/*PCデザインの可変割合の計算式*/

 /* SP画面幅 767px以下 可変（既定値）
    ※雛形は @media (max-width: 767px) で指定しているが、767〜768px の小数幅
      （ブラウザズーム・端数DPR）で --ratio / --variable が未定義になり
      --formula 全体が無効化されてレイアウトが崩壊するため、既定値として持たせる */
  --ratio: 1; /* 比率は1（変わらない） */
  --variable: calc(100vw / var(--sp-width)); /* 画面幅に基づく可変値 */
 }

 /* PC画面幅 768px以上 可変 */
 @media (min-width: 768px) {
  .lp_variable {
  --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); /* PCとSPのデザイン幅の比率 */
  --variable: calc(100vw / var(--pc-width)); /* 画面幅に基づく可変値 */
  }
 }

/* PC画面幅 1401px以上 固定（--ratio は 768px以上と共通） */
@media (min-width: 1401px) {
  .lp_variable {
  --variable: 1px; /* 固定値（可変しない） */
  }
 }
/* ▲ -----------可変設定---------- ▲ */

/* ▼ -----------カスタムプロパティ---------- ▼ */
#FR260812denim {
  --color-text: #000;
  --color-bg: #fff;
  --color-red: #831922;   /* 本文背景（デザインの帯色） */
  --color-white: #fff;

  /* Ogg / DNP 秀英角ゴシック金 Std は Adobe Fonts。kitId 未受領のためフォールバック併記
     （index.html の Typekit 読み込みを有効化すれば先頭のファミリーが効く） */
  --font-en: "ogg-display", "ogg", "Times New Roman", "游明朝体", "Yu Mincho", YuMincho, serif;
  --font-jp: "dnp-shuei-gothic-kin-std", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック体", "Yu Gothic", Meiryo, sans-serif;

  --ease-base: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-base: 0.8s;

  /* PC左カラム（MV）専用の可変単位：画面幅に対して常にリキッド（1400px以上でも固定しない）
     指示書「左カラムのMV画像は固定して、画像とタイトルは画面幅で可変」に対応 */
  --mv-formula: calc(100vw / var(--pc-width));

  /* サイト共通ヘッダー高（PC追従カラムの逃げ）。本番はサイト側の変数を参照、無ければ 0 */
  --lp-header-offset: var(--header-container-height, 0px);
}
/* ▲ -----------カスタムプロパティ---------- ▲ */

/* ▼ -----------LPスコープ リセット（3ブランド共通部分）---------- ▼ */
#FR260812denim * {
  box-sizing: border-box;
  font: inherit; /* font-family / size / weight / style / line-height を継承（フォーム部品含む） */
  letter-spacing: inherit; /* font ショートハンドに含まれないため明示（基準を全要素に継承） */
  font-feature-settings: "palt";
}

#FR260812denim img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  transition: unset;
}

#FR260812denim picture {
  display: block;
}

#FR260812denim button {
  padding: 0;
  cursor: pointer;
  appearance: none;
  color: inherit;
  background-color: unset;
  border: unset;
}

/* ブランド固有の追加リセット（サイト共通CSSに依存しないための最小セット） */
#FR260812denim :where(p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dd, figure, blockquote) {
  margin: 0;
  padding: 0;
}

#FR260812denim a {
  color: inherit;
  text-decoration: none;
}

/* 表示制御ユーティリティ */
@media (min-width: 768px) {
  #FR260812denim .is-hidden--desktop {
    display: none !important;
  }
}

@media (max-width: 767px) {
  #FR260812denim .is-hidden--mobile {
    display: none !important;
  }
}
/* ▲ -----------LPスコープ リセット---------- ▲ */

/* ▼ -----------ベーススタイル---------- ▼ */
#FR260812denim {
  color: var(--color-text);
  background-color: var(--color-bg);
  font-family: var(--font-jp);
  line-height: 1.5;   /* line-height は単位なし */
  letter-spacing: 0.05em; /* letter-spacing は em */
}
/* ▲ -----------ベーススタイル---------- ▲ */

/* ▼ -----------出現アニメーション（.js-inview 用）---------- ▼
   指示書「青枠で囲んだ部分はふわっと表示」。移動量・遅延は要素側の
   --inview-move / --inview-delay で個別調整する（MVタイトルの時差表示に使用） */
#FR260812denim .js-inview {
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#FR260812denim .js-inview.is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  #FR260812denim .js-inview {
    opacity: 1;
  }
}
/* ▲ -----------出現アニメーション---------- ▲ */

/* ▼ -----------レイアウト（2/3カラム）既定---------- ▼ */
/* 中央コンテンツ列の幅（SP: sp-artboard-width / PC: pc-artboard-width） */
#FR260812denim .lp-inner {
  width: calc(var(--sp-artboard-width) * var(--formula));
  margin-inline: auto;
}
@media (min-width: 768px) {
  #FR260812denim .lp-inner {
    width: calc(var(--pc-artboard-width) * var(--formula_pc));
  }
}

/* グリッド本体（PCのみ grid 化。SPは通常フロー） */
@media (min-width: 768px) {
  #FR260812denim .lp-layout { display: grid; align-items: start; }
  #FR260812denim .lp-layout--col-2 { grid-template-columns: 1fr 1fr; }
  #FR260812denim .lp-layout--col-3 {
    grid-template-columns: 1fr calc(var(--pc-artboard-width) * var(--formula_pc)) 1fr;
  }
}

/* 中央（スクロールする本体）: 横はみ出しを閉じる */
#FR260812denim .lp-layout__primary { overflow-x: clip; }

/* 左右サブ（PC追従／SP非表示） */
#FR260812denim .lp-layout__sub { display: none; }
@media (min-width: 768px) {
  #FR260812denim .lp-layout__sub {
    display: grid;
    place-items: center;
    position: sticky;
    top: var(--lp-header-offset, 0px);
    /* height: calc(100dvh - var(--lp-header-offset, 0px)); */
    height: calc(100vh - 12rem);
    overflow: hidden;
  }
}
/* ▲ -----------レイアウト（2/3カラム）既定---------- ▲ */


/* =====================================================
   案件固有セクション（デザイン値は SP アートボード 750px 基準）
   ===================================================== */

/* ▼ -----------MV（左カラム）---------- ▼
   このLPは左レールに MV を置くため、SPでも表示する（既定の display:none を打ち消す） */
#FR260812denim .lp-layout__sub.lp-mv {
  display: block;
}

/* SP はスタッキングコンテキストを自前で作る（PCは既定レイアウトの position:sticky が担う。
   ここで position を宣言すると特異度で sticky を打ち消すため SP 限定にする） */
@media (max-width: 767px) {
  #FR260812denim .lp-layout__sub.lp-mv {
    position: relative;
    /* フォント差し替え等でMVタイトルが想定より広くなっても横スクロールを出さない保険
       （PCは既定レイアウトの overflow: hidden が担う） */
    overflow: clip;
  }
}

#FR260812denim .lp-mv__link {
  display: block;
}

#FR260812denim .lp-mv__inner {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none; /* 画像リンクのクリックを妨げない */
  color: var(--color-white);
  font-family: var(--font-en);
}

/* 2026 ——— Autumn */
#FR260812denim .lp-mv__season {
  position: absolute;
  top: calc(29.5 * var(--formula));
  left: calc(26 * var(--formula));
  display: block;
  align-items: center;
  gap: calc(5 * var(--formula));
  font-size: calc(18 * var(--formula));
  line-height: 1.365;
  letter-spacing: 0.05em;
  width: calc(167* var(--formula));
}

#FR260812denim .lp-mv__season-line {
  flex: none;
  width: calc(39 * var(--formula));
  height: max(1px, calc(1 * var(--formula)));
  background-color: currentColor;
}

/* 英文リード（右上・右揃え） */
#FR260812denim .lp-mv__copy {
  position: absolute;
  top: calc(30.95 * var(--formula));
  right: calc(26 * var(--formula));
  text-align: right;
  font-size: calc(18 * var(--formula));
  line-height: 1.426;
  letter-spacing: 0.02em;
  width: calc(307* var(--formula));
}

/* New In Denim + FRAY I.D ロゴ（下寄せ・中央） */
#FR260812denim .lp-mv__title {
  position: absolute;
  right: 0;
  bottom: calc(69.12 * var(--formula));
  left: 0;
  text-align: center;
}

#FR260812denim .lp-mv__title-main {
  font-size: calc(111.21 * var(--formula));
  line-height: 1.365;
  letter-spacing: -0.05em;
  width: calc(634* var(--formula));
  margin-inline: auto;
  margin-bottom: calc(33* var(--formula));
}

#FR260812denim .lp-mv__title-logo img {
  width: calc(217.09 * var(--formula));
  margin-inline: auto;
}

/* 指示書の青枠はMV内で「①MV画像（上部テキストを含む）」と「②New In Denim + FRAY I.Dロゴ」の
   2ブロック。①を先に、②を「画像と時差で」表示する（指示書の注記どおり）。
   MVは全面リンク＝移動なしのフェードのみにする */
#FR260812denim .lp-mv__img,
#FR260812denim .lp-mv__season,
#FR260812denim .lp-mv__copy { --inview-move: 0px; }
#FR260812denim .lp-mv__title { --inview-move: 0px; transition-delay: 1s; }

/* PC: 左カラムは追従固定・画像は cover で列いっぱい。文字は画面幅で連続可変 */
@media (min-width: 768px) {
  #FR260812denim .lp-layout__sub.lp-mv {
    display: grid;
    place-items: stretch;
  }

  #FR260812denim .lp-mv__link,
  #FR260812denim .lp-mv__img {
    height: 100%;
  }

  #FR260812denim .lp-mv__img img {
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  #FR260812denim .lp-mv__season {
    top: calc(25.9 * var(--mv-formula));
    left: calc(26.6 * var(--mv-formula));
    gap: calc(5 * var(--mv-formula));
    font-size: calc(12.24 * var(--mv-formula));
    width: calc(148* var(--mv-formula));
  }

  #FR260812denim .lp-mv__season-line {
    width: calc(59 * var(--mv-formula));
  }

  #FR260812denim .lp-mv__copy {
    top: calc(24.9 * var(--mv-formula));
    right: calc(27.26 * var(--mv-formula));
    font-size: calc(12.24 * var(--mv-formula));
    line-height: 1.444;
    width: calc(334* var(--mv-formula));
  }

  #FR260812denim .lp-mv__title {
    bottom: calc(59.83 * var(--mv-formula));
  }

  #FR260812denim .lp-mv__title-main {
    font-size: calc(95.05 * var(--mv-formula));
    width: calc(542* var(--mv-formula));
    margin-bottom: calc(28* var(--mv-formula));
  }

  #FR260812denim .lp-mv__title-logo img {
    width: calc(208.91 * var(--mv-formula));
  }
}
/* ▲ -----------MV---------- ▲ */

/* ▼ -----------ヘッダー追従時の sticky オフセット---------- ▼ */
/* サイト共通ヘッダー（.header .header-fixed）の表示状態に合わせて、
   左レールMVの sticky 基準位置（--lp-header-offset）を切り替える。
   .header-fixed は LP の外側にあるため :has() で祖先側から参照する */
@media (min-width: 769px) {
  #FR260812denim {
    /* .header .header-fixed の height と同値 */
    --lp-header-height: 12rem;
  }

  body:has(.header-fixed.show) #FR260812denim {
    --lp-header-offset: var(--lp-header-height);
  }
}

/* ヘッダー側のスライド（transition: transform .5s ...）と歩調を合わせる。
   top / height は既定レイアウト側で --lp-header-offset を参照しているため、
   変数が変わった時点で計算値が変化し transition が走る */
@media (min-width: 768px) {
  #FR260812denim .lp-layout__sub {
    transition: top 0.5s, height 0.5s;
  }
}

@media (prefers-reduced-motion: reduce) {
  #FR260812denim .lp-layout__sub {
    transition: none;
  }
}
/* ▲ -----------ヘッダー追従時の sticky オフセット---------- ▲ */

/* ▼ -----------本文（右カラム）---------- ▼ */
#FR260812denim .lp-body {
  background-color: var(--color-red);
  color: var(--color-white);
  /* リード上の余白／STAFF下の余白（margin だと親からはみ出すため padding で確保） */
  padding-block: calc(108 * var(--formula)) calc(144 * var(--formula));
}

/* リード文（DNP 秀英角ゴシック金 Std） */
#FR260812denim .lp-lead {
  margin-bottom: calc(150 * var(--formula));
  font-family: var(--font-jp);
  font-size: calc(24 * var(--formula));
  line-height: 2;
  letter-spacing: 0.07em;
  text-align: center;
}
/* ▲ -----------本文---------- ▲ */

/* ▼ -----------LOOK セクション---------- ▼ */
#FR260812denim .lp-look + .lp-look {
  margin-top: calc(194 * var(--formula));
}
#FR260812denim .lp-look {
  /* width: 100.2%; */
}

#FR260812denim .lp-look__img {
  position: relative;
}

/* デザイン上 20px だけ空く箇所（スライダー2 → 寄り画像） */
#FR260812denim .lp-look__img--gap {
  margin-top: calc(20 * var(--formula));
}

/* 縦組みの「2026 Denim Collection」 */
#FR260812denim .lp-look__vertical {
  position: absolute;
  z-index: 1;
  writing-mode: vertical-rl;
  font-family: var(--font-en);
  font-size: calc(32 * var(--formula));
  line-height: 1.365;
  letter-spacing: -0.03em;
  color: var(--color-white);
  pointer-events: none;
}

#FR260812denim .lp-look__vertical--l {
  top: calc(32.21 * var(--formula));
  left: calc(18 * var(--formula));
}

#FR260812denim .lp-look__vertical--r {
  top: calc(30 * var(--formula));
  right: calc(28 * var(--formula));
}
/* ▲ -----------LOOK セクション---------- ▲ */

/* ▼ -----------商品クレジット---------- ▼ */
#FR260812denim .lp-credit {
  margin-top: calc(24 * var(--formula));
  font-family: var(--font-en);
  font-size: calc(23 * var(--formula));
  line-height: 1.739;
  letter-spacing: 0.05em;
  text-align: center;
}

/* デザインの語間（半角スペース2つ相当）を左右振り分けで再現＝中央揃えが崩れない */
#FR260812denim .lp-credit a {
  display: inline-block;
  margin-inline: calc(6 * var(--formula));
}
/* ▲ -----------商品クレジット---------- ▲ */

/* ▼ -----------画像切替スライダー（Swiper / フェード）---------- ▼ */
#FR260812denim .lp-slider {
  position: relative;
}

#FR260812denim .lp-slider .swiper-slide {
  height: auto;
}

#FR260812denim .lp-slider__pagination {
  position: absolute;
  right: calc(19.5 * var(--formula));
  bottom: calc(19.5 * var(--formula));
  left: auto;
  top: auto;
  z-index: 2;
  width: auto;
  display: flex;
  flex-direction: column;
  gap: calc(33.5 * var(--formula)); /* デザイン: バレット2個で総高63.5 − 直径15×2 */
  transform: none;
}

#FR260812denim .lp-slider__pagination .swiper-pagination-bullet {
  width: calc(15 * var(--formula));
  height: calc(15 * var(--formula));
  margin: 0;
  border: max(1px, calc(1.5 * var(--formula))) solid var(--color-white);
  border-radius: 50%;
  background-color: transparent;
  opacity: 1;
}

#FR260812denim .lp-slider__pagination .swiper-pagination-bullet-active {
  background-color: var(--color-white);
}
/* ▲ -----------画像切替スライダー---------- ▲ */

/* ▼ -----------All Items ボタン---------- ▼ */
#FR260812denim .lp-allitems {
  display: block;
  width: calc(484 * var(--formula));
  margin-top: calc(196 * var(--formula));
  margin-inline: auto;
  padding: calc(3 * var(--formula));
  border: max(1px, calc(2 * var(--formula))) solid var(--color-white);
}

#FR260812denim .lp-allitems__inner {
  display: grid;
  place-items: center;
  height: calc(111 * var(--formula));
  background-color: rgb(255 255 255 / 0.8);
  color: var(--color-red);
  font-family: var(--font-en);
  font-size: calc(77 * var(--formula));
  line-height: 1.24;
  letter-spacing: -0.025em;
  white-space: nowrap; /* Adobe Fonts (Ogg) 適用で字幅が広がっても1行を維持する */
}
/* ▲ -----------All Items ボタン---------- ▲ */

/* ▼ -----------STAFF---------- ▼ */
#FR260812denim .lp-staff {
  width: calc(367.5 * var(--formula));
  margin-top: calc(119.5 * var(--formula));
  margin-inline: auto;
  font-family: var(--font-en);
}

#FR260812denim .lp-staff__title {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--formula));
  font-size: calc(34 * var(--formula));
  line-height: 1.24;
  letter-spacing: 0.05em;
}

#FR260812denim .lp-staff__title::after {
  content: "";
  flex: 1;
  height: max(1px, calc(1 * var(--formula)));
  /* デザインの罫線は行ボックス中央より約3px上（実測 y11417 / 行中央 y11420）*/
  margin-bottom: calc(6 * var(--formula));
  background-color: currentColor;
}

#FR260812denim .lp-staff__list {
  margin-top: calc(12.47 * var(--formula));
  font-size: calc(24 * var(--formula));
  line-height: 1.85;
  /* デザイン実測幅 366.23 に対しブロック幅 367.5 で余裕が無く、
     Adobe Fonts (Ogg) 適用時に折り返すためトラッキングは 0・折返し禁止 */
  letter-spacing: 0.05em;
  white-space: nowrap;
}
/* ▲ -----------STAFF---------- ▲ */

.archive {
  border-top: none !important;
}