@charset "UTF-8";
/* ==========================================================================
   CELINE/Reebok / 商品詳細ページ 追加ブロック  CRE_DEV-769
   ※9/13終了後に削除

   商品説明設定（BOEM限定）に置いたHTMLに対して当てるスタイル。
   挿入先は .limitedBoemDescription（商品情報の下・SNSボタンの上）。
   PC/SP は同一ファイルで、SP は本体が .limitedBoemDescription--sp を付ける。

   ▼ 寸法の根拠（Figma）
     PC 動画   2:1  1400x700   node 1:1095
     PC バナー 2:1   926x467   node 1:1103（左テキスト474 + 右画像926 / Figma実測）
     SP 動画   3:4   705x940   node 1:1344
     SP バナー 8:5   705x440   node 1:1361（上画像 + 下テキスト）
   ▼ 可変幅は min(Figma px, vw) 方式（PC設計1600px / SP設計767px）
     LP側 celine-lp*.css と同じ考え方に揃えている
   ========================================================================== */

.celine-pdp {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  font-family: 'NeuePlakExtended', 'Oswald', 'Lexend', 'Lato', 'Noto Sans JP',
               "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
}
.celine-pdp *,
.celine-pdp *::before,
.celine-pdp *::after { box-sizing: inherit; }

/* 商品説明枠が元々持つ余白・行間の影響を切る。
   ▼親 .product_contents は display:flex（実測）。
     flex アイテムは min-width:auto のため中身の最大コンテンツ幅まで伸び、
     マーキーの width:max-content に引きずられて 5985px になっていた。
     min-width:0 と max-width:100% で親幅（1024px）に収める。 */
.limitedBoemDescription:has(.celine-pdp) {
  padding: 0;
  margin: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  /* マーキーを 100vw で全幅にはみ出させるため overflow は切らない。
     幅の暴走は min-width:0 側で止めている */
}

/* ══════════════════ 自動再生動画 ══════════════════
   素材未入手のため現在は仮画像（.celine-pdp__ph）。
   動画が届いたら .celine-pdp__media の中身を <video> に差し替える。
   poster にカバー画像を必ず指定する（Figma注記の cover image set）。 */
.celine-pdp__media {
  position: relative;
  width: 100%;
  margin: 0;
  /* 素材待ちのグレーだった。実素材が入った今は、サブピクセルの端に
     グレーが1px見えるのを避けるため黒にする（写真の地色が黒系） */
  background: #000;
  overflow: hidden;
}
.celine-pdp__media video,
.celine-pdp__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* PC 2:1 / SP 3:4 */
.celine-pdp__media.-video { aspect-ratio: 1400 / 700; }
/* 動画→バナー の余白（PC）。
   Figma実測は128px（枠1024px換算で93.6px）だが、指示により60px固定 */
.celine-pdp__media.-video { margin-bottom: 60px; }

/* ══════════════════ 画像＋テキストバナー ══════════════════ */
/* Figma 実測: banner 下端 2883.0 → Marquee 上端 2974.2 = 91.2px（PC）
   マーキー側に margin-top を持たせるとトップ用CSSとの差分になるので
   バナー側の margin-bottom で作る */
/* Figma通りの2カラム構成（左テキスト / 右写真）。
   最終素材は写真のみでテキストが焼き込まれていないため、
   コピーはHTML側に持つ（表記が英語/日本語で変わっても差し替えられる） */
.celine-pdp__banner {
  margin-bottom: 66.7px;   /* Figma 91.2px @1400幅 → 枠1024px換算 */
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  background: #000;
  overflow: hidden;
}
.celine-pdp__banner-text {
  /* flex-basis の % に padding が加算されて親幅を超えるため min-width:0 */
  flex: 0 0 33.857%;              /* 474 / 1400（Figma実測） */
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14.5px;
  padding: 0 60px 0 40.7px;
}
.celine-pdp__banner-img {
  flex: 0 0 66.143%;              /* 926 / 1400（Figma実測） */
  min-width: 0;
  aspect-ratio: 926 / 467;
  background: #000;   /* 端に1px見えてもバナー地色(#000)と同化させる */
  overflow: hidden;
}
.celine-pdp__banner-img img {
  display: block;
  /* 枠幅が 66.143% で小数になるため、100% だと丸めで右端に
     背景が 1px 覗くことがある。僅かに広げて確実に覆う */
  width: calc(100% + 1px);
  height: 100%;
  object-fit: cover;
}
.celine-pdp__banner-title {
  margin: 0;
  color: #fff;
  /* 挿入枠は実測1024px（ページ幅1600ではない）。vw基準だと枠に対して大きすぎ、
     nowrap と相まって文字が枠外へ出ていた。枠幅に対する比率で指定する。
     Figma換算は30.5px（41.667/1400）だが、2026-09-08 指示により28pxへ調整 */
  font-size: 28px;
  line-height: 1.143;             /* 47.619 / 41.667 */
  font-weight: 700;
  white-space: normal;
  overflow-wrap: anywhere;
}
.celine-pdp__banner-lead {
  margin: 0;
  color: #fff;
  font-size: 10.1px;             /* 13.889/1400 */
  line-height: 1.5;               /* 20.833 / 13.889 */
}
.celine-pdp__banner-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  height: 46.5px;                /* 63.49/1400 */
  padding: 0 34.8px;              /* 47.62/1400 */
  box-sizing: border-box;
  max-width: 100%;
  border: 1px solid #fff;
  color: #fff;
  font-size: 13.1px;             /* 17.857/1400 */
  letter-spacing: 0.03em;         /* 0.5357 / 17.857 */
  text-decoration: none;
  white-space: nowrap;
}
.celine-pdp__banner-cta:hover,
.celine-pdp__banner-cta:focus {
  background: #fff;
  color: #000;
}

/* ══════════════════ マーキー ══════════════════
   トップページ（celine-hp.css）と同一仕様に揃える。
   ▼ 揃えた項目（トップと1文字も変えない）
     PC: height 80px / ロゴ height 38px / margin 0 51px / animation 40s
     SP: height min(108px,14.1vw) / ロゴ min(60.75px,7.92vw) / margin min(49.17px,6.41vw)
     .-set に min-width:100% と justify-content:space-around（幅の出方がこれで決まる）
   ▼ 40s。30s だと体感で速すぎるとの指摘。トップと同値にする */
/* ── トップページのマーキーは画面全幅（実測1585px）。
      商品詳細の挿入枠は中央1024pxなので、そのままでは幅も位置も一致しない。
      100vw で全幅にし、枠中央から左右へはみ出させて位置を合わせる。
      calc(50% - 50vw) は「枠の中心を画面の中心に合わせる」ためのオフセット。 */
.celine-pdp__marquee {
  margin-top: 0;
  /* Figma(node 1:1116): x=0 / w=1600 = 画面全幅。
     祖先 .product_contents が overflow:hidden で切るため、
     その祖先チェーンだけ overflow を開けて 100vw を通す（下部で指定）。 */
  position: relative;
  width: 100vw;
  max-width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  background: #F6F2EF;
  height: 80px;
  display: flex;
  align-items: center;
}

/* ══════════════════ マーキー ══════════════════
   トップページ（celine-hp.css）と同一仕様に揃える。
   ▼ 揃えた項目（トップと1文字も変えない）
     PC: height 80px / ロゴ height 38px / margin 0 51px / animation 40s
     SP: height min(108px,14.1vw) / ロゴ min(60.75px,7.92vw) / margin min(49.17px,6.41vw)
     .-set に min-width:100% と justify-content:space-around（幅の出方がこれで決まる）
   ▼ 40s。30s だと体感で速すぎるとの指摘。トップと同値にする */
/* ── トップページのマーキーは画面全幅（実測1585px）。
      商品詳細の挿入枠は中央1024pxなので、そのままでは幅も位置も一致しない。
      100vw で全幅にし、枠中央から左右へはみ出させて位置を合わせる。
      calc(50% - 50vw) は「枠の中心を画面の中心に合わせる」ためのオフセット。 */
.celine-pdp__marquee {
  margin-top: 0;
  /* Figma(node 1:1116): x=0 / w=1600 = 画面全幅。
     祖先 .product_contents が overflow:hidden で切るため、
     その祖先チェーンだけ overflow を開けて 100vw を通す（下部で指定）。 */
  position: relative;
  width: 100vw;
  max-width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  background: #F6F2EF;
  height: 80px;
  display: flex;
  align-items: center;
}
.celine-pdp__marquee-track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  animation: celine-pdp-marquee 40s linear infinite;
  will-change: transform;
}
/* 1セット=1周ぶん。2セット並べて -50% 動かし継ぎ目なくループさせる。
   min-width:100% と space-around がロゴの表示幅を決めるのでトップと同値必須。
   100vw はスクロールバー幅を含み横スクロールの原因になるため使わない */
.celine-pdp__marquee-set {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  min-width: 100%;
  justify-content: space-around;
}
img.celine-pdp__marquee-item {
  flex: 0 0 auto;
  width: auto;
  height: 38px;
  margin: 0 51px;
  object-fit: contain;
}
@keyframes celine-pdp-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .celine-pdp__marquee-track { animation: none; }
}

/* ══════════════════ SP ══════════════════
   本体が .limitedBoemDescription--sp を付けるので、それを起点にする。
   SP の CSS は実機幅（375〜430px）でそのまま適用されるため、
   固定pxではなく min(Figma px, vw) で比率を保つ。設計幅 767px。 */
.limitedBoemDescription--sp .celine-pdp__media.-video {
  aspect-ratio: 705 / 940;                    /* 3:4 */
}
/* SP: 上に写真・下にテキスト（Figma準拠） */
.limitedBoemDescription--sp .celine-pdp__banner { flex-direction: column; }
.limitedBoemDescription--sp .celine-pdp__banner-img {
  order: 1; flex: 0 0 auto; width: 100%; aspect-ratio: 705 / 440;
}
.limitedBoemDescription--sp .celine-pdp__banner-text {
  order: 2; flex: 0 0 auto; align-items: center;
  gap: min(40px, 5.22vw);
  padding: min(60px, 7.82vw) min(31.47px, 4.1vw);
  text-align: center;
}
.limitedBoemDescription--sp .celine-pdp__banner-title {
  font-size: min(70.8px, 8.6vw); line-height: 1.055; white-space: normal;
}
.limitedBoemDescription--sp .celine-pdp__banner-lead {
  font-size: min(31.47px, 4.1vw); line-height: 1.312;
}
.limitedBoemDescription--sp .celine-pdp__banner-cta {
  align-self: stretch; width: 100%; height: auto; box-sizing: border-box;
  padding: min(40px, 5.22vw) min(60px, 7.82vw);
  border-width: 2px; font-size: min(30px, 3.91vw); white-space: normal;
}
/* Figma 実測: 動画下端 3632.4 → ImagewText 上端 3677.3 = 44.9px（SP / 767幅基準） */
.limitedBoemDescription--sp .celine-pdp__media.-video { margin-bottom: min(44.9px, 9.85%); }
/* Figma 実測: ImagewText 下端 4785.3 → Marquee 上端 4889 = 103.7px（SP） */
.limitedBoemDescription--sp .celine-pdp__banner {
  /* 2026-09-08 指示: SPのバナー下（マーキー上）の余白は 50px。
     経緯: min(103.7px, 13.5%)[Figma] → 0[密着] → 50px
     PC側は 66.7px を維持するため、SP専用指定として残す */
  margin-bottom: 50px;
}
/* トップ SP（celine-hp_sp.css）と同値 */
.limitedBoemDescription--sp .celine-pdp__marquee {
  height: min(108px, 14.1vw);
}
.limitedBoemDescription--sp img.celine-pdp__marquee-item {
  height: min(60.75px, 7.92vw);
  margin: 0 min(49.17px, 6.41vw);
}

/* ══════════════════ PC/SP 画像の出し分け ══════════════════
   本体に lc-u-pcOnly / lc-u-spOnly 相当のユーティリティは無い（実HTMLで確認済み）。
   PC版とSP版はテンプレート自体が別なので、
   .limitedBoemDescription--sp の有無だけで確定的に切り替える。 */
.celine-pdp__img.-sp { display: none; }
.limitedBoemDescription--sp .celine-pdp__img.-pc { display: none; }
.limitedBoemDescription--sp .celine-pdp__img.-sp { display: block; }

/* ══════════════════ 横溢れ防止 ══════════════════
   マーキーは意図的に幅超過させる帯なので除外し、それ以外を内側に収める。
   SPのタイトルは長文でも折り返す（nowrapのままだと画面外へ出る）。 */
.celine-pdp { max-width: 100%; }

/* ══════════════════ 本体要素の余白調整（SP）══════════════════
   .product_text_tab_area はCELINE以外の商品ページにも存在する本体要素。
   共通祖先 #smp_main_content が挿入枠を持つときだけ効かせて、
   他商品ページへ漏らさない（実測: 挿入枠は tab_area より後方にあるため
   兄弟セレクタでは辿れず、祖先の :has() で限定する）。 */
#smp_main_content:has(.limitedBoemDescription--sp .celine-pdp) .product_text_tab_area {
  margin-top: 24px;
  margin-bottom: 60px;
}

/* ══════════════════ マーキー全幅化の下ごしらえ ══════════════════
   .product_contents（本体）の overflow:hidden がはみ出しを切っていた（実測）。
   CELINE 4商品のときだけ overflow を開ける。他商品には :has() で漏れない。 */
/* ▼本体は #product_contents（IDセレクタ）で overflow:hidden を指定している
   （content-product-koichi.css）。クラスセレクタでは詳細度で負けるため
   同じくIDを使って上書きする。CELINE 4商品のみ :has() で限定。 */
#product_contents:has(.limitedBoemDescription .celine-pdp),
.limitedBoemDescription:has(.celine-pdp),
.celine-pdp {
  overflow: visible;
}
/* SP は挿入枠が画面全幅なので 100vw のはみ出しは不要（横スクロール防止） */
.limitedBoemDescription--sp .celine-pdp__marquee {
  width: 100%;
  max-width: 100%;
  left: auto;
  transform: none;
}

/* ══════════════════ マーキー下の空白を消す ══════════════════
   Figma: PC も SP もマーキー下端＝フッター上端で余白0。
   実測ではフッターの margin-top（PC 100px / SP 40px）が空白を作っていた。
   CELINE 4商品のページだけ打ち消す。 */
body:has(.celine-pdp) .footer,
body:has(.celine-pdp) .lc-footer {
  margin-top: 0;
}
/* ▼ .footer_box の padding-top は消さない。
   ここを 0 にするとメルマガ枠の内側余白が無くなり、
   マーキーの帯と文字が重なって見える（実物で確認）。
   Figma の「余白0」はフッター上端との距離であって、枠内の余白ではない。 */

/* SP に 40px 残っていた真因（実測で特定）:
   .medialink は上の非表示CSSで display:none にしているが、
   その margin-bottom:40px が section.product の下端に残り
   マーキーとフッターの間に 40px の空白を作っていた。
   同じ理由で .wrap_order_arrangement 系の下マージンも念のため詰める。 */
body:has(.celine-pdp) .medialink,
body:has(.celine-pdp) .wrap_order_arrangement,
body:has(.celine-pdp) .modal--size-recommend {
  margin: 0 !important;
}
.lc-content-body:has(.celine-pdp) > section.product {
  margin-bottom: 0;
  padding-bottom: 0;
}
/* 旧: ここに body:has(.limitedBoemDescription--sp .celine-pdp) .lc-footer
   { margin-top: -40px } があった。当時「発生源不明の40pxの空白」を詰める
   ためだったが、正体はフッターのPC/スマホ表示切替UL（lc-u-mt-20 + UL高さ）で、
   そのULを非表示にした結果 空白自体が無くなった。
   さらに上の 333行で .footer / .lc-footer とも margin-top:0 済みなので、
   SP専用に重ねる指定は無効打ちだった。よって削除した（2026-09-08）。 */

/* ══════════════════ メルマガ枠の配色（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
   ▼レイアウトは触らない（色だけ差し替え）。CELINE 4商品のページのみ。 */
body:has(.celine-pdp) .footer .footer_box,
body:has(.celine-pdp) .footer_box.footer_newslater {
  background: #fff;
}
body:has(.celine-pdp) .newslater-title,
body:has(.celine-pdp) .footer_box .newslater-text,
body:has(.celine-pdp) .footer_box #newslater-form .newslater-note {
  color: #151515;
}
/* 注釈内のリンクも同色に揃える */
body:has(.celine-pdp) .footer_box #newslater-form .newslater-note a {
  color: #151515;
}
/* 外部リンクアイコンは白地だと見えないので黒に反転 */
body:has(.celine-pdp) .footer_box #newslater-form .newslater-note a[target="_blank"]::after {
  background: #151515;
}
/* 入力欄: Figma は白地に下線のみ */
body:has(.celine-pdp) .footer_box #newslater-form input[type="email"] {
  background: #fff;
  color: #151515;
  border: none;
  border-bottom: 1px solid #737373;
}
body:has(.celine-pdp) .footer_box #newslater-form input[type="email"]::placeholder {
  color: #737373;
}
/* 登録ボタンは本体が #121212。Figma の黒文字と同系なので踏襲し、白地との対比を保つ */
body:has(.celine-pdp) .footer .footer_box .button button {
  background: #151515;
  color: #fff;
}

/* メルマガ枠の下に区切り線。
   白地にしたことで下のフッターリンク群との境目が消えて見にくいため。
   色は Figma の入力欄下線と同系の #737373 だと強いので、
   区切りとして目立ちすぎない #D5D5D5 を使う。 */
body:has(.celine-pdp) .footer .footer_box,
body:has(.celine-pdp) .footer_box.footer_newslater {
  border-bottom: 1px solid #D5D5D5;
}
/* ══ PC/スマホ表示切替（フッター最下部）を非表示 / 2026-09-08 指示 ══
   <ul class="lc-flexBox lc-flexBox--center lc-u-mt-20 lc-u-text-32 ...">
     <li><span class="icon-B08-sp"></span></li>
     <li><a onclick="Cookies.set('displayMode','pc')"><span class="icon-B09-pc"></span></a></li>
   サイト標準機能だが、CELINE関連ページのみ非表示にする。
   lc-u-text-32 等の汎用ユーティリティ名では他要素に当たる恐れがあるため、
   :has(.icon-B09-pc) で切替UL自体を特定する（実HTMLで1箇所のみと確認済み） */
body:has(.celine-pdp) ul:has(> li > a > .icon-B09-pc) {
  display: none !important;
}
/* ══ サイト説明文（footer_siteinfo）を非表示 / 2026-09-08 指示 ══
   CELINE関連ページのみ。汎用の説明文なのでブランド世界観に合わせて隠す。
   これを消すと直前のSNSアイコン列がコピーライト帯に密着するため、
   帯の上に余白を確保する（.lc-footer の margin-top で調整済み）。 */
body:has(.celine-pdp) .footer_siteinfo {
  display: none !important;
}
/* 余白の持ち主は .footer_nav ではなく SNS列（ul.sns）だった。
   ul.sns は lc-u-mb-20（margin-bottom:20px !important）を持つ。
   .footer_nav はSNS列の親ではなく兄要素なので、そこに margin を付けても
   SNS列と帯の間隔は変わらない。ul.sns 側を !important で打ち消す。 */
body:has(.celine-pdp) ul.sns {
  margin-bottom: 0px !important;
}
/* コピーライト帯。本体(reebok_smp-common-style.css)と同値で
   margin-top だけ 0 にして上の余白を詰める。CELINE関連ページのみ。 */
body:has(.celine-pdp) .lc-footer__copy {
  background: #244496;
  color: #ddd !important;
  font-size: 11px !important;
  padding: 10px 0 60px 0 !important;
  margin-top: 0px !important;
}