@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════
   CELINE/Reebok — HOMEPAGE TAKEOVER (T1) / CRE_DEV-769
   対象: page/top/pc_reebok.html（PC） / page/top/sp_reebok.html（SP）
        ＋ そのコピーである page/contents/{pc,sp}/0911_celine-top.html

   ▼ Figma 実測構成（node 1:238 HP_DKTP / 1:609 HP_MBL）
     PC: hero 5:2 1600×640（自動再生動画+poster）
         → products-image 1400×877［左 4:5 700×875 ＋ 右 商品カード2×2］
         → category ×4  2:3 347×521
         → ImagewText 1400×525［AN ICON REIMAGINED ＋ 4:3 700×525］
         → image-banner 4:1 1600×400
         → Logo Marquee 1600×80
     SP: hero 3:4 767×1023
         → products-image［3:4 767×1023 ＋ ImageScroll］
         → category ×4  2:3 360×540
         → AN ICON REIMAGINED
         → image-banner 1:1 767×767 / 16:9 767×431
         → Logo Marquee 767×108

   ▼ 素材未着（B1・8/29予定）のため、全ブロックをグレー枠（.celine-ph）で
     可視化している。比率は Figma 指定どおり aspect-ratio で確保。
     "Image proportions & crops must be respected" のため比率は変更しないこと。

   ▼ カラー変数（Figma 5色）
     #151515 / #737373 / #FFFFFF / #244496(告知バー・.jpでは未使用) / #E0E0E0(タイル)
   ══════════════════════════════════════════════════════════════ */

.celine-hp {
  --c-ink: #151515;
  --c-sub: #737373;
  --c-bg: #FFFFFF;
  --c-tile: #E0E0E0;

  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;
}
.celine-hp *,
.celine-hp *::before,
.celine-hp *::after { box-sizing: border-box; }

.celine-hp img,
.celine-hp video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.celine-hp a { color: inherit; text-decoration: none; }

/* 素材待ちのプレースホルダ（受領後は img / video に置換） */
.celine-hp .celine-ph {
  width: 100%;
  height: 100%;
  background: var(--c-tile);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--c-sub);
  font-size: 13px;
  letter-spacing: .08em;
  text-align: center;
  padding: 8px;
}
.celine-hp .celine-ph b {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: #9b9b9b;
  letter-spacing: .04em;
}

/* 内側幅（Figma 実測: 画面1600 / コンテンツ1400 / 左右 x=100） */
.celine-hp__inner {
  /* Figma: 画面1600 / コンテンツ1400（左右 x=100）
     1600px 未満では画面端に付いてしまい hero と揃わないため、
     比率(100/1600=6.25%)で左右余白を確保する */
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 6.25%;
  box-sizing: content-box;
}
@media screen and (min-width: 1600px) {
  .celine-hp__inner { padding: 0; }   /* 1600px以上は max-width で確定 */
}
/* セクション間隔は Figma 実測で一律 100px（1600px設計）。
   PLP・SP と同じ比率方式に統一（100/1600 = 6.25vw）。
   Marquee のみ 0px */
.celine-hp__products,
.celine-hp__categories,
.celine-hp__imagetext,
.celine-hp__banner { margin-top: min(100px, 6.25vw); }

/* ── hero 5:2 / 1600×640（全幅・自動再生動画） ── */
.celine-hp__hero {
  aspect-ratio: 1600 / 640;
  overflow: hidden;
  position: relative;
  /* Figma は 1600 幅設計。1600 超のビューポートで引き伸ばさない */
  max-width: 1600px;
  margin: 0 auto;
}
/* hero 内テキスト（Figma: text 462×162 / 左下寄せ） */
.celine-hp__hero-text {
  position: absolute;
  /* Figma: text枠 x=43.556 / 462.222幅。
     ただし和文リード(28文字)は 18px で約504px 必要なため、
     枠幅を広げて1行に収める（hero は1600px幅なので余裕がある） */
  left: 44px;
  bottom: 56px;
  max-width: none;
  width: max-content;
  color: var(--c-bg);
  /* グレーのプレースホルダ上でも白文字が読めるように */
  text-shadow: 0 1px 6px rgba(0,0,0,.55);
}
.celine-hp__hero-title {
  margin: 0 0 16px;
  /* Figma: Neue Plak Extended Bold 48px / lh 56.889px
     reebok.jp 本体の指定に合わせる（reebok_common-style.css 準拠） */
  font-family: 'NeuePlakExtended', 'Oswald', 'Lexend', 'Lato', 'Noto Sans JP',
               "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.185;
  letter-spacing: 0;
  white-space: nowrap;   /* 1行で表示する */
}
.celine-hp__hero-lead {
  margin: 0 0 16px;
  /* Figma: Neue Plak Regular 18px / lh 23.111px（サイズは Figma 準拠） */
  font-size: 18px;
  line-height: 1.284;
  white-space: nowrap;   /* 1行で表示する */
}
.celine-hp__cta {
  display: inline-block;
  /* Figma(node 1:288): 背景 transparent / 枠 0.889px solid 白 / 16px
     padding 20px 60px / min-width 220.44px / max-width 288px */
  padding: 20px 60px;
  min-width: 220px;
  max-width: 288px;
  text-align: center;
  /* hero 以外（AN ICON REIMAGINED 下など）は黒背景・白文字 */
  background: var(--c-ink);
  color: var(--c-bg) !important;
  font-size: 16px;
  line-height: 1.167;
  letter-spacing: 0;
  border: 1px solid var(--c-ink);
}
/* hero 内は画像の上に乗るため白文字・白枠（Figma: 背景は透明のまま） */
.celine-hp__hero .celine-hp__cta {
  background: transparent;
  color: var(--c-bg) !important;
  border-color: var(--c-bg);
  text-shadow: 0 4px 4px rgba(0,0,0,.25);
}

/* ── 商品エリア（左 4:5 大タイル ＋ 右 商品カード2×2） ── */
.celine-hp__products {
  display: grid;
  grid-template-columns: 700fr 697fr;   /* Figma 実測: 700 / 697 */
  /* Figma 4px（1600px設計）。SPと同じ比率方式に統一（4/1600=0.25vw） */
  gap: min(4px, 0.25vw);
}
.celine-hp__products-main {
  aspect-ratio: 700 / 875;
  overflow: hidden;
}
.celine-hp__products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* Figma 実測(node 1:448〜1:479): 横5.92px / 縦17.49px（1600px設計）。
     SPと同じ比率方式に統一（5.92/1600=0.37vw / 17.49/1600=1.093vw） */
  gap: min(17.5px, 1.093vw) min(5.9px, 0.37vw);
}
.celine-hp__product { display: block; }
.celine-hp__product-img {
  position: relative;
  /* Figma 実測 344.577x360.888（比率0.955／やや縦長）。
     支給画像は 382x375（比率1.019／横長）で、cover だと上下が切れて
     焼き込みロゴが欠ける。画像の比率に合わせ contain で全体を見せる */
  aspect-ratio: 382 / 375;
  overflow: hidden;
  background: #f5f5f5;
}
/* 商品画像は焼き込みロゴを切らないため contain（土台の cover を上書き）。
   セレクタを img.〜 にして土台「.celine-hp img」(0,1,1)と詳細度を揃える */
img.celine-hp__product-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* 画像内ロゴ ▼ B3 解決(2026-08-24): 支給画像に焼き込み済みのため使わない（重ねると二重） */
.celine-hp__product-logo {
  position: absolute;
  top: 12px;
  left: 14px;
  width: 92px;
  height: 22px;
}
.celine-hp__product-name {
  margin: 8px 0 0;
  font-size: 12px;
}
/* 価格は税込総額表示が法令上必須。商品マスタ登録後に確定 */
.celine-hp__product-price {
  margin: 2px 0 0;
  font-size: 12px;
}
.celine-hp__product-meta {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--c-sub);
}

/* ── カテゴリ ×4  2:3 / 347×521 ── */
.celine-hp__categories {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Figma 実測: x=0/351/702/1053 → 列間 4px（1600px設計） */
  gap: min(4px, 0.25vw);
}
.celine-hp__category {
  aspect-ratio: 347 / 521;
  overflow: hidden;
}

/* カテゴリ画像を各カラーのPDPへリンクさせた（2026-09-11 指示）。
   .celine-hp__category は aspect-ratio のみで高さを作るため、
   間に挟んだ <a> が inline のままだと土台の
   「.celine-hp img { height:100% }」の 100% が解決できず画像が潰れる。
   a を block + 100% にして、親の高さをそのまま画像へ渡す。 */
.celine-hp__category > a {
  display: block;
  width: 100%;
  height: 100%;
}


/* ── ImagewText（AN ICON REIMAGINED ＋ 4:3 700×525） ── */
.celine-hp__imagetext {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
}
.celine-hp__imagetext-body { text-align: center; }
.celine-hp__section-title {
  margin: 0 0 12px;
  /* AN ICON REIMAGINED: Figma: Neue Plak Extended Bold */
  font-family: 'NeuePlakExtended', 'Oswald', 'Lexend', 'Lato', 'Noto Sans JP',
               "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: min(41.64px, 2.6vw);
  font-weight: 700;
  /* 2行表示のため行間を締める（土台の1.6を継承すると開きすぎる） */
  line-height: 1.143;
  letter-spacing: .02em;
  /* Figma(node 1787:690): 中央寄せ */
  text-align: center;
}
.celine-hp__section-lead {
  margin: 0 0 20px;
  font-size: 13px;
}
.celine-hp__imagetext-img {
  aspect-ratio: 700 / 525;
  overflow: hidden;
}

/* ── 下部バナー 4:1 / 1600×400（全幅） ── */
.celine-hp__banner {
  aspect-ratio: 1600 / 400;
  overflow: hidden;
  max-width: 1600px;
  /* ⚠ margin 一括指定にすると、上で指定した margin-top:100px を
     打ち消してしまう（後勝ち）。左右中央寄せだけを指定する */
  margin-left: auto;
  margin-right: auto;
}

/* ── Logo Marquee（フッター直上に必須 / 実測 1600×80・上余白 0px） ── */
.celine-hp__marquee {
  /* Figma 実測 0px。banner 下端(3363) と Marquee 上端(3363) が一致する。
     コメントに「上余白0px」と書きながら 100px を指定していたのを修正 */
  margin-top: 0;
  overflow: hidden;
  /* Figma 実測の地色（白ではない） */
  background: #F6F2EF;
  height: 80px;
  display: flex;
  align-items: center;
}
.celine-hp__marquee-track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  animation: celineHpMarquee 40s linear infinite;
  will-change: transform;
}
/* 1セット = 1周ぶん。同じ内容の .celine-hp__marquee-set を2つ並べ、
   -50%（= 1セット分）動かすことで継ぎ目なく無限ループする。
   flex が伸びると前後半の幅が揃わずズレるため flex: 0 0 auto で固定する。
   1セットが画面幅より狭いと隙間が出るので min-width: 100vw を担保する */
.celine-hp__marquee-set {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  min-width: 100%;   /* 100vw はスクロールバー幅を含み横スクロールの原因になる */
  justify-content: space-around;
}
/* 土台の「.celine-hp img {width:100%;height:100%}」(詳細度0,1,1) に
   負けないよう、セレクタを img.〜 にして詳細度を 0,1,1 で後勝ちさせる。
   !important は使わない（ユーティリティと殴り合いになるため） */
img.celine-hp__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 celineHpMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .celine-hp__marquee-track { animation: none; }
}

/* ══════════════════════════════════════════════════════════════
   SP（767幅基準）
   PC 用ファイルと SP 用ファイルは別だが、トップは 1 ファイルに
   両方入る構成ではないため、SP 側は celine-hp_sp.css を使う。
   ここでは狭幅時の保険だけ入れる。
   ══════════════════════════════════════════════════════════════ */
@media screen and (max-width: 767px) {
  .celine-hp__products { grid-template-columns: 1fr; }
  .celine-hp__categories { grid-template-columns: repeat(2, 1fr); }
  .celine-hp__imagetext { grid-template-columns: 1fr; gap: min(24px, 3.13vw); }
  /* 狭幅は SP と同じ比率（Figma 767px設計の 16px = 2.09vw） */
  .celine-hp__products,
  .celine-hp__products-grid,
  .celine-hp__categories { gap: min(16px, 2.09vw); }
  /* セクション間隔も比率に（100px は 767px 設計時の値） */
  .celine-hp__products,
  .celine-hp__categories,
  .celine-hp__imagetext,
  .celine-hp__banner { margin-top: min(100px, 13.04vw); }
  .celine-hp__inner { padding: 0 2.1%; }
  .celine-hp__hero { aspect-ratio: 767 / 1023; }
  /* 狭幅では nowrap の和文がはみ出すため vw で字幅を縮めて1行を保つ */
  .celine-hp__hero-text { left: 6%; right: 6%; bottom: 8.3%; }   /* SP と同じ Figma 比率 */
  .celine-hp__hero-title { font-size: min(48px, 8vw); }
  .celine-hp__hero-lead { font-size: min(18px, 3.1vw); }
  .celine-hp__cta { padding: 3.5vw 7vw; min-width: 0; font-size: min(16px, 3.6vw); }
  .celine-hp__marquee { height: min(108px, 14.1vw); }
  img.celine-hp__marquee-item { margin: 0 min(49.17px, 6.41vw); height: min(60.75px, 7.92vw); }
}

/* ── Marquee 下の空白の正体はサイト共通の footer 余白
   （PCは .footer / SPは .lc-footer。実機HTMLでクラス名が違うことを確認）。
   Figma は Marquee がフッターに密着する設計なので打ち消す。
   footer は .celine-hp の親より外側にあり兄弟セレクタでは当たらないため
   :has() でページ単位に限定する（このCSSを読むのはCELINEのページのみ）── */
body:has(.celine-hp) .footer,
body:has(.celine-hp) .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-hp) #header_top {
  width: 100%;
  margin: 0 0 0px;
  z-index: 100;
}

/* ── アプリ誘導バナー（#anime_sab）を非表示 / CRE_DEV-769 ──
   PDPは商品説明CSSで対応済み。LP/トップはページ限定で打ち消す ── */
body:has(.celine-hp) #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-hp) .footer .footer_box,
body:has(.celine-hp) .footer_box.footer_newslater {
  background: #fff;
}
body:has(.celine-hp) .newslater-title,
body:has(.celine-hp) .footer_box .newslater-text,
body:has(.celine-hp) .footer_box #newslater-form .newslater-note {
  color: #151515;
}
/* 注釈内のリンクも同色に揃える */
body:has(.celine-hp) .footer_box #newslater-form .newslater-note a {
  color: #151515;
}
/* 外部リンクアイコンは白地だと見えないので黒に反転 */
body:has(.celine-hp) .footer_box #newslater-form .newslater-note a[target="_blank"]::after {
  background: #151515;
}
/* 入力欄: Figma は白地に下線のみ */
body:has(.celine-hp) .footer_box #newslater-form input[type="email"] {
  background: #fff;
  color: #151515;
  border: none;
  border-bottom: 1px solid #737373;
}
body:has(.celine-hp) .footer_box #newslater-form input[type="email"]::placeholder {
  color: #737373;
}
/* 登録ボタンは本体が #121212。Figma の黒文字と同系なので踏襲し、白地との対比を保つ */
body:has(.celine-hp) .footer .footer_box .button button {
  background: #151515;
  color: #fff;
}

/* メルマガ枠の下に区切り線。
   白地にしたことで下のフッターリンク群との境目が消えて見にくいため。
   色は Figma の入力欄下線と同系の #737373 だと強いので、
   区切りとして目立ちすぎない #D5D5D5 を使う。 */
body:has(.celine-hp) .footer .footer_box,
body:has(.celine-hp) .footer_box.footer_newslater {
  border-bottom: 1px solid #D5D5D5;
}
/* ══ 商品画像内のロゴバッジ（Figma node 1787:612 Alternating logo lockup badges）══
   商品カードの左上に CELINE / Reebok を交互に重ねる。
   土台 .celine-hp__product-img は position:relative 済み。
   .celine-hp img の width/height:100% を上書きするため img. 起点で詳細度を揃える */
img.celine-hp__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;
}
/* ══ サイト説明文（footer_siteinfo）を非表示 / 2026-09-08 指示 ══
   汎用の説明文なのでブランド世界観に合わせて隠す。
   PCには .footer_nav が無く（実HTMLで確認）、SNS列の密着は起きないため
   余白の追加調整は不要。CELINE関連ページ限定。 */
body:has(.celine-hp) .footer_siteinfo {
  display: none !important;
}