@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════
   CELINE/Reebok — LP (PLP) 共通スタイル / CRE_DEV-769
   対象: page/contents/pc/celine.html
   SP は celine-lp_sp.css（is_25azuk の PC/SP 別ファイル方式に倣う）

   ▼ 2026-08-24 Figma 実データで作り直した（D-1〜D-4）
     旧実装は「商品4枚を4カラム均等グリッド + タイル2枚を別セクション」だったが、
     Figma は「商品カードと空タイルが同一グリッド内で交互配置」だった。
     ガイドライン "Content tiles must be specifically placed"
     （配置を変えてはならない）はこの交互配置を指すため、配置は変更不可。

   ▼ 実測構成（Figma node 1:1426 / Products 1550×1541）
       行1 "Black" : [大タイル 771][商品 382][空タイル 382]
       行2 "Tan"   : [空タイル 382][商品 382][商品 382][空タイル 382]
       行3 "White" : [商品 382][空タイル 382][大タイル 771]
     x座標: 0 / 390 / 779 / 1168（幅382・間隔8px）、771幅は 0..771 と 779..1550
     行高 500 / 行間 20px
     ※ 行名 Black/Tan/White は色数と対応しない。商品カードは全4色ぶん存在する

   ▼ カラー変数（Figma 5色。指示書の3色は誤り）
       #151515 Black Gray / #737373 Gray / #FFFFFF White
       #244496 Blue      … 告知バー地色（.jp では使わない）
       #E0E0E0 Light Gray … 空タイルのプレースホルダ地色

   ▼ 素材未着（B1）: 画像・動画・poster は 8/29 受領後に差し替え。
     比率は Figma 指定どおり aspect-ratio で確保している。変更しないこと。
   ══════════════════════════════════════════════════════════════ */

/* ── 土台 ── */
.celine-lp {
  --c-ink: #151515;
  --c-sub: #737373;
  --c-bg: #FFFFFF;
  --c-tile: #E0E0E0;
  /* Figma 実測(node 1:1520): 列間8px / 行間20px（1600px設計）。
     トップと同じ比率方式に統一（8/1600=0.5vw / 20/1600=1.25vw） */
  --gap: min(8px, 0.5vw);
  --row-gap: min(20px, 1.25vw);

  background: var(--c-bg);
  color: var(--c-ink);
  /* reebok.jp 本体のフォント指定に合わせる（reebok_common-style.css 準拠）。
     和文が本体と違うフォントで出るのを防ぐため 'Lexend','Noto Sans JP' を含める。
     'NeuePlak' は fontNeuePlak.css で定義済み（サイト全体で読み込まれている） */
  font-family: 'NeuePlak', 'Lexend', 'Noto Sans JP',
               "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* 内部要素のはみ出しでページ全体が横スクロールしないよう保険 */
  overflow-x: hidden;
}
.celine-lp *,
.celine-lp *::before,
.celine-lp *::after { box-sizing: border-box; }

.celine-lp img,
.celine-lp video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* 指定比率でのクロップを維持 */
}
.celine-lp a { color: inherit; text-decoration: none; }

/* 素材待ちのプレースホルダ（受領後は img/video に置換） */
.celine-lp .celine-ph {
  width: 100%;
  height: 100%;
  background: var(--c-tile);
  display: flex;
  /* 比率(<b>)を上、寸法を下に縦並びで置く（トップと同じ） */
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: center;
  color: var(--c-sub);
  font-size: 12px;
  letter-spacing: .12em;
  text-align: center;
}
/* 比率は大きく表示する（トップの .celine-hp と同じ扱い） */
.celine-lp .celine-ph b {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: #9b9b9b;
  letter-spacing: .04em;
}


/* ── 内側幅（Figma 実測: 画面1600 / コンテンツ1550 / 左右 x=25） ── */
.celine-lp__inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 25px;
}

/* ── メインビジュアル 9:2 / 1600×356（全幅） ── */
.celine-lp__hero {
  aspect-ratio: 1600 / 356;
  overflow: hidden;
  /* Figma は 1600 幅設計。1600 超のビューポートで引き伸ばさない
     （__inner の外にあるため個別に上限が必要。トップの hero と同じ手当て） */
  max-width: 1600px;
  margin: 0 auto;
}

/* ── PLP ヘッダー（見出し / リード）
   Figma 実測: PLP header は MV 直下 y=27、内部は
   見出し h=51 → 27px → Dek h=45 → 31px → グリッド ── */
.celine-lp__head {
  padding: 27px 0 31px;
}
.celine-lp__title {
  /* Figma: Neue Plak Extended Bold（fontNeuePlak.css に定義済み）。
     見出しは Extended、本文は標準 NeuePlak という Figma の使い分けに合わせる */
  font-family: 'NeuePlakExtended', 'Oswald', 'Lexend', 'Lato', 'Noto Sans JP',
               "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
  margin: 0 0 27px;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.2;
}
.celine-lp__title .celine-lp__count {
  font-size: 20px;
  font-weight: 400;
  color: var(--c-ink);
}
.celine-lp__lead {
  max-width: 981px;   /* Figma: Dek 981幅 */
  margin: 0;
  font-size: 14px;
}

/* ══════════════════════════════════════════════════════════════
   商品グリッド（交互配置）
   12カラムではなく「4トラック（382相当）」で組み、
   大タイル(771)は2トラック分をまたぐ
   ══════════════════════════════════════════════════════════════ */
.celine-lp__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--row-gap) var(--gap);
  /* グリッド下端 → ABOUT THE COLLECTION は Figma 実測 58px
     （旧値345pxは誤り。Products枠の下端を Grid の起点と誤認し、
       Grid 内の上余白 287.333px を足し忘れていた。
       検算: 1828.6 + 57.7 = 1886.3 = ABOUT見出しの上端） */
  /* Figma 実測 57.7px（1600px設計）→ 3.61vw */
  padding: 0 0 min(58px, 3.61vw);
}

/* 各セルの基本 */
.celine-lp__cell { grid-column: span 1; }
.celine-lp__cell.-wide { grid-column: span 2; }   /* 771幅 = 2トラック */

/* 空タイル（3:4 = 382×500） */
.celine-lp__tile {
  aspect-ratio: 382 / 500;
  overflow: hidden;
  background: var(--c-tile);
}
/* 大タイル（3:2 = 771×500）… 高さを 500 に合わせる */
.celine-lp__cell.-wide .celine-lp__tile {
  aspect-ratio: 771 / 500;
}

/* ── 商品カード（Figma: Desktop.PLP 382×479） ── */
.celine-lp__product { display: block; }
.celine-lp__product-img {
  position: relative;
  aspect-ratio: 382 / 375;   /* 実測: 画像は 382×375 */
  overflow: hidden;
  background: #f5f5f5;
}
/* 商品画像は焼き込みロゴを切らないため contain（土台の cover を上書き）。
   セレクタを img.〜 にして土台「.celine-lp img」(0,1,1)と詳細度を揃える */
img.celine-lp__product-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* 画像内の CELINE ロゴ（実測 108×26 / 左上 x=16 y=14）
   ▼ B3 解決(2026-08-24): 支給画像にロゴが焼き込み済みだったため、この要素は使わない。
      重ねると二重になる。CSS定義だけ残置（将来ロゴ無し画像に差し替わった場合の保険） */
.celine-lp__product-logo {
  position: absolute;
  top: 14px;
  left: 16px;
  width: 108px;
  height: 26px;
}
/* バッジ（実測 84×25 / 左上 x=8 y=8）
   ⚠ 割引・NEW 等の訴求バッジは出さない（ガイドライン） */
/* 土台の「.celine-lp img { width:100%; height:100% }」(詳細度0,1,1) に
   負けてバッジがカード全面に広がっていた。product-photo と同じく
   セレクタを img.〜 にして詳細度を 0,1,1 に揃えて後勝ちさせる。 */
img.celine-lp__product-badge {
  position: absolute;
  /* ★トップ/LPで完全に同一の値にする。
     実機の商品カードは両ページとも aspect-ratio: 382/375 で同一比率。
     以前はFigmaのカード高が面ごとに違ったため面別の%を出していたが
     （トップ7.09% / LP6.83%）、実機が同一なら%も同一にすべきだった。
     PC: Figma 25.57/374.6 = 6.83% / SP: 35.37/375.6 = 9.42% */
  top: 3.68%;
  left: 4.25%;
  width: auto;      /* 土台の width:100% を打ち消す */
  height: 6.83%;      /* PC */
  object-fit: contain;
  z-index: 2;
  pointer-events: none;
}
.celine-lp__product-colors {
  margin: 8px 0 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--c-tile);
  font-size: 11px;
  color: var(--c-ink);
}
.celine-lp__product-name {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 400;
}
/* 価格は税込総額表示が法令上必須。商品マスタ登録後に確定 */
.celine-lp__product-price {
  margin: 2px 0 0;
  font-size: 13px;
}
.celine-lp__product-meta {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--c-sub);
}

/* ── ABOUT THE COLLECTION
   Figma 実測: 本文下端 2160.3 → Logo Marquee 2206.0（親基準）
   → 下の余白 46px
   ※旧値554pxは誤り。Marquee は親フレームの外（絶対座標2672.667）にあり、
     親の中にある ABOUT の相対座標と直接引き算していた。
     親の y=466.667 を差し引いて基準を揃えると 2206.0 になる。
     検算: 2160.3 + 45.7 = 2206.0 = 親フレームの高さ 2206 と完全一致 ── */
.celine-lp__about {
  /* ABOUT 本文 → Logo Marquee の間隔。
     Figma 実測は 46px だったが、指示により 30px に変更（2026-08-24） */
  /* 指示により50px（1600px設計）→ 3.13vw */
  padding: 0 0 min(50px, 3.13vw);
}
.celine-lp__about-title {
  /* Figma: Neue Plak Extended Bold（fontNeuePlak.css に定義済み）。
     見出しは Extended、本文は標準 NeuePlak という Figma の使い分けに合わせる */
  font-family: 'NeuePlakExtended', 'Oswald', 'Lexend', 'Lato', 'Noto Sans JP',
               "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
  margin: 0 0 24px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .01em;
}
.celine-lp__about-body {
  max-width: 1021px;   /* Figma: text 1021幅 */
  margin: 0;
  font-size: 13px;
}
.celine-lp__about-body + .celine-lp__about-body { margin-top: 1.4em; }

/* ── Logo Marquee（フッター直上に必須 / 実測 1600×80） ── */
.celine-lp__marquee {
  /* ⚠ max-width は付けない。Marquee は画面幅いっぱいに流れる帯であり、
     1600px で切ると帯が途切れて見える（1600px超の画面で発生）。
     .marquee-set が min-width:100vw を前提にしているため、
     親を 1600px に絞ると内側と噛み合わなくなる。
     hero/banner は「画像」なので上限が必要だが、帯は別扱い */
  overflow: hidden;
  /* Figma 実測の地色（白ではない） */
  background: #F6F2EF;
  height: 80px;
  display: flex;
  align-items: center;
}
.celine-lp__marquee-track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  animation: celineLpMarquee 40s linear infinite;
  will-change: transform;
}
/* 1セット = 1周ぶん。同一内容を2セット並べ -50% で継ぎ目なくループする。
   flex が伸びると前後半の幅が揃わずズレるため flex:0 0 auto で固定し、
   1セットが画面幅より狭いと隙間が出るので min-width:100vw を担保する */
.celine-lp__marquee-set {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  min-width: 100%;   /* 100vw はスクロールバー幅を含み横スクロールの原因になる */
  justify-content: space-around;
}
/* 土台の「.celine-lp img {width:100%;height:100%}」(詳細度0,1,1) に
   負けないよう、セレクタを img.〜 にして詳細度を 0,1,1 で後勝ちさせる。
   !important は使わない（ユーティリティと殴り合いになるため） */
img.celine-lp__marquee-item {
  flex: 0 0 auto;
  /* ロゴ画像は原寸 159x38。高さを固定して比率は幅で追従させる */
  width: auto;
  /* PC のロゴ高は指示により 38px（Figma比率だと45pxだが指示を優先）。
     画像原寸は CELINE 916x246 / Reebok 597x148 で縮小表示になり鮮明 */
  height: 38px;
  margin: 0 51px;
  object-fit: contain;
}
@keyframes celineLpMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .celine-lp__marquee-track { animation: none; }
}

/* ── Logo Marquee の直後にサイト共通の .pagetop（margin:30px auto）が
   入り、フッターとの間に余白が出る。
   .pagetop は .celine-lp を閉じた後の兄弟要素（実機HTMLで確認済み）。
   このLPでのみ打ち消したいので .celine-lp 起点の後続兄弟で限定する ── */
.celine-lp ~ .pagetop {
  margin-top: 0;
  margin-bottom: 0;
}

/* ── Marquee 下の空白の正体はサイト共通の footer 余白
   （PCは .footer / SPは .lc-footer。実機HTMLでクラス名が違うことを確認）。
   Marquee はフッター直上に密着させる指定なので、このLPでのみ打ち消す。
   footer は .celine-lp の親より外側にあり兄弟セレクタでは当たらないため
   （実機HTMLで確認）、:has() でページ単位に限定する ── */
body:has(.celine-lp) .footer,
body:has(.celine-lp) .lc-footer {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* ── ヘッダー下の余白を詰める（CELINE関連ページのみ）
   サイト共通の common-header.css が #header_top { margin:0 0 20px } を
   持っており、その20pxがヘッダーとコンテンツの間に出る。
   CELINE は帯類を全て非表示にするため、この余白だけが浮いて見える。
   #header_top は PC 専用要素（SPには存在しない）── */
body:has(.celine-lp) #header_top {
  width: 100%;
  margin: 0 0 0px;
  z-index: 100;
}

/* ── アプリ誘導バナー（#anime_sab）を非表示 / CRE_DEV-769 ──
   PDPは商品説明CSSで対応済み。LP/トップはページ限定で打ち消す ── */
body:has(.celine-lp) #anime_sab {
  display: none !important;
}

/* ══════════════════ メルマガ枠の配色（CELINE トンマナ）══════════════════
   本体は Reebok ブランドカラーの赤地・白文字。
     PC: reebok_common-style.css      .footer .footer_box { background:#E41D1B }
     SP: reebok_smp-common-style.css  .footer_box.footer_newslater { background:#E41D1B }
   Figma(node 1:1161 signup-container)は白地・黒文字なので、それに合わせる。
     文字   #151515
     入力欄 白地 + 下線 #737373（枠線ではなく border-bottom のみ）
     プレースホルダ #737373
   ▼レイアウトは触らない（色だけ差し替え）。このページのみ。 */
body:has(.celine-lp) .footer .footer_box,
body:has(.celine-lp) .footer_box.footer_newslater {
  background: #fff;
}
body:has(.celine-lp) .newslater-title,
body:has(.celine-lp) .footer_box .newslater-text,
body:has(.celine-lp) .footer_box #newslater-form .newslater-note {
  color: #151515;
}
/* 注釈内のリンクも同色に揃える */
body:has(.celine-lp) .footer_box #newslater-form .newslater-note a {
  color: #151515;
}
/* 外部リンクアイコンは白地だと見えないので黒に反転 */
body:has(.celine-lp) .footer_box #newslater-form .newslater-note a[target="_blank"]::after {
  background: #151515;
}
/* 入力欄: Figma は白地に下線のみ */
body:has(.celine-lp) .footer_box #newslater-form input[type="email"] {
  background: #fff;
  color: #151515;
  border: none;
  border-bottom: 1px solid #737373;
}
body:has(.celine-lp) .footer_box #newslater-form input[type="email"]::placeholder {
  color: #737373;
}
/* 登録ボタンは本体が #121212。Figma の黒文字と同系なので踏襲し、白地との対比を保つ */
body:has(.celine-lp) .footer .footer_box .button button {
  background: #151515;
  color: #fff;
}

/* メルマガ枠の下に区切り線。
   白地にしたことで下のフッターリンク群との境目が消えて見にくいため。
   色は Figma の入力欄下線と同系の #737373 だと強いので、
   区切りとして目立ちすぎない #D5D5D5 を使う。 */
body:has(.celine-lp) .footer .footer_box,
body:has(.celine-lp) .footer_box.footer_newslater {
  border-bottom: 1px solid #D5D5D5;
}
/* ══ サイト説明文（footer_siteinfo）を非表示 / 2026-09-08 指示 ══
   汎用の説明文なのでブランド世界観に合わせて隠す。
   PCには .footer_nav が無く（実HTMLで確認）、SNS列の密着は起きないため
   余白の追加調整は不要。CELINE関連ページ限定。 */
body:has(.celine-lp) .footer_siteinfo {
  display: none !important;
}