/* ==================================================================== *
 * TOPページ（下書きテーマ ID 7 専用）
 *
 * Figma  PC 114:1856（1920 x 8803） / SP 114:1290（393 x 5594）
 * 数値はすべて get_metadata の座標と、1:1 PNG のピクセル計測による。
 *
 * 座標の読み方
 *   PC はフレーム原点(0,0)からの絶対座標。コンテンツ列は x460–1460（1000px）、
 *   帯の内側は x506–1414/1415（906〜909px）の2系統がある（Figma のまま）。
 *   SP は左右 18/19/32/33px が混在しているので、Figma の値をそのまま入れている。
 *
 * 色（1:1 PNG 実測）
 *   MV プレースホルダ  #d9d9d9
 *   おすすめ製品の帯   #f2fafa
 *   GLOW    帯 #fcedf1 / アクセント #f19db4
 *   HYDRA   帯 #eef6fa / アクセント #91c4ea
 *   NUTRIENT帯 #f2f8ef / アクセント #a2d192
 *   ランキング順位バッジ 1位 #b59744 / 2位 #b4c2c8 / 3位 #a46f42 / 4-5位 #b1b1b1
 *   ドット 選択 #0098a6 / 非選択 #b3e1e5
 * ==================================================================== */

.r-top {
  display: block;
  color: #000;
  font-family: var(--renewal-font-japanese);
}

.r-top * { box-sizing: border-box; }

.r-top img { display: block; max-width: 100%; }

.r-top a { color: inherit; text-decoration: none; }

/* コンテンツ列。Figma PC は x460–1460 = 1000px */
.r-top__inner {
  width: min(100%, calc(var(--renewal-content-width) + (var(--renewal-page-gutter) * 2)));
  margin-inline: auto;
  padding-inline: var(--renewal-page-gutter);
}

/* 帯の内側（Figma PC は x506–1414 ＝ 908px）。
   コンテンツ列（1000px）の内側 46px なので、ガターに 46px を足している。 */
.r-top__inner--narrow {
  width: min(100%, calc(var(--renewal-content-width) + (var(--renewal-page-gutter) * 2)));
  margin-inline: auto;
  padding-inline: calc(var(--renewal-page-gutter) + 46px);
}

/* --- 見出し（短い横線つき）。Figma: 18px / .04em / 線 16.5x1px / 間 13px --- */
.r-top-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin: 0;
  color: #000;
  font-family: var(--renewal-font-japanese);
  font-size: 18px;
  font-weight: 500;
  line-height: 26px; /* Figma の見出しボックスは 26px ちょうど */
  letter-spacing: 0.04em;
  text-align: center;
}

.r-top-title::before,
.r-top-title::after {
  content: "";
  display: block;
  flex: 0 0 16.5px;
  height: 1px;
  background: #d3d6d9;
}

/* ==================================================================== *
 * 1. メインビジュアル
 * 2026-09-11: 支給画像に差し替え。横幅100%・高さautoでPC/SP出し分け。
 * ==================================================================== */

.r-top-mv {
  margin: 0;
}

.r-top-mv__image {
  display: block;
  width: 100%;
  height: auto;
}

/* ==================================================================== *
 * 2. 公式サイトだけの特典（MV下と下部バナー下の2箇所）
 * Figma PC: 668 x 239 を中央（x626）／ y950 と y7524
 * ==================================================================== */

.r-top-perks {
  /* 2026-08-26: 4項目化（166px×4 + 列間10px×3 = 694px）に合わせて668px→694pxに変更 */
  width: 694px;
  max-width: calc(100% - (var(--renewal-page-gutter) * 2));
  margin: 68px auto 0; /* MV下端882 → 950 */
}

.r-top-perks__title {
  margin: 0;
  color: #000;
  /* テーマ既定の h2（游ゴシック→明朝フォールバック）が当たるので明示する */
  font-family: var(--renewal-font-japanese);
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: 0.04em;
  text-align: center;
  /* <br class="sp"> 以外での意図しない折り返しを防ぐ（2026-09-14指示） */
  white-space: nowrap;
}

/* <br class="sp"> はSPのみで改行させる（2026-09-14指示） */
br.sp {
  display: none;
}

/* 見出しの左右の線（Figma: 16.5x1px、文字との間 16.5px） */
.r-top-perks__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16.5px;
}

.r-top-perks__title::before,
.r-top-perks__title::after {
  content: "";
  display: block;
  flex: 0 0 16.5px;
  height: 1px;
  background: #d3d6d9;
}

/* 2026-08-26: カートと同じ4項目・同じ組み方に変更（snippets/_cart_benefits.html.liquid
   と assets/renewal-cart.css の .r-cart__benefits 系を参照。4列166px・列間10px）。 */
.r-top-perks__list {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 47px 0 0; /* 見出し下端26 → アイコン上端73 */
  padding: 0;
  list-style: none;
}

.r-top-perks__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  width: 166px;
  text-align: center;
}

.r-top-perks__icon {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 86px; /* Figma: アイコンの最大高 86 */
  margin-bottom: 25px; /* Figma: アイコン下端159 → テキスト184 */
}

/* アイコンは4つとも実寸が違う（カートと同じSVG・同じ実測値） */
.r-top-perks__icon svg { display: block; width: auto; }
.r-top-perks__item:nth-child(1) .r-top-perks__icon svg { height: 72px; }
.r-top-perks__item:nth-child(2) .r-top-perks__icon svg { height: 74px; }
.r-top-perks__item:nth-child(3) .r-top-perks__icon svg { height: 85px; }
.r-top-perks__item:nth-child(4) .r-top-perks__icon svg { height: 86px; }

.r-top-perks__text {
  display: block;
  font-size: 16px;
  font-weight: 500;
  line-height: 27.5px; /* Figma: 2行で 55px（1行のものは 28px） */
  letter-spacing: 0.04em;
}

/* ==================================================================== *
 * 3. ランキング
 * 2026-08-27 指摘リスト No.3・変更履歴（rankingの仕様変更・横並びに変更）で、
 * 「No.1だけ大きい2x2グリッド＋画像のみ」から「5枚横並び＋商品名/カテゴリー/価格を
 * テキスト併記」に変更。Figma 145:1645（PC 999x375.56）を1:1 PNGで実測。
 * 画像タイル 193.5px角×5枚、間隔8px（0/202/403/604/806のx開始位置を実測）。
 * バッジは34x34・inset top9px/left7px（1位も特別扱いなし、全アイテム共通）。
 * バッジの色（金/銀/銅/グレー）は既存の item--N 配色をそのまま流用。
 * Figma SP: y735–1308。356x100 の行を5つ（間隔8px、下記 @media 側は変更なし）。
 * ==================================================================== */

.r-top-rank {
  margin-top: 91px; /* 特典下端1189 → 見出し1280 */
}

.r-top-rank__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 57px 0 0; /* 見出し下端1306 → グリッド1363 */
  padding: 0;
  list-style: none;
}

.r-top-rank__link {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.r-top-rank__media {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  /* 2026-09-16指示によりグレーのタイル地を廃止、白背景（画像本来の背景）に統一 */
  background: #fff;
}

.r-top-rank__image {
  width: 100%;
  height: 100%;
  /* .r-top-rank__media は place-items:center のグリッドで、高さは aspect-ratio 由来。
     この組み合わせだと子の height:100% が解決されず、縦長のサムネイル
     （例: 2453x5761）が枠からはみ出して上端だけが見える状態になっていた。
     stretch を明示して枠いっぱいに収める（2026-09-03 実機で発覚・修正）。 */
  place-self: stretch;
  min-height: 0;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* 在庫切れの表示。商品一覧のカード（renewal.css の .r-product-card__soldout）と
   同じ見た目にしている。2026-09-01: ランキングを sale_rankings 直参照に変えた際、
   out_of_stock_for_sale? を出せるようになったので追加した。 */
.r-top-rank__media {
  position: relative;
}

.r-top-rank__soldout {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 5px 8px;
  background: rgb(37 39 39 / 88%);
  border-radius: 2px;
  color: #fff;
  font-family: var(--renewal-font-latin), sans-serif;
  font-size: 10px;
  letter-spacing: 0.08em;
  line-height: 1;
}

.r-top-rank__badge {
  position: absolute;
  /* 2026-09-03: SOLD OUT 用に .r-top-rank__media へ position:relative を足した結果、
     media が「位置指定済みで DOM 上あと」の要素になり、順位バッジの上に
     描画されてバッジが見えなくなった。z-index で前面に戻す。 */
  z-index: 2;
  top: 9px;
  left: 7px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #b1b1b1;
  color: #fff;
  font-family: var(--renewal-font-latin);
  font-size: 16px;
  line-height: 1;
}

.r-top-rank__item--1 .r-top-rank__badge { background: #b59744; }
.r-top-rank__item--2 .r-top-rank__badge { background: #b4c2c8; }
.r-top-rank__item--3 .r-top-rank__badge { background: #a46f42; }

/* 指摘リスト No.3（対応済み）でPCも商品名・カテゴリー・価格を表示する仕様に確定。
   画像の下に縦積み（タグ→商品名→容量/価格）。SPは @media 側の別レイアウトのまま。 */
.r-top-rank__body {
  display: flex;
  flex: 1 1 auto; /* 行の中で一番背の高いカードに合わせて伸び、価格をスペーサーで下端に揃える */
  flex-direction: column;
  align-items: flex-start;
  margin-top: 10px; /* 画像下端 → タグ上端（Figma実測） */
}

.r-top-rank__tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 10px;
  border-radius: 10px;
  background: var(--r-type-color, #aacbea);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.04em;
}

.r-top-rank__name {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

/* 2026-08-28 指摘: 価格は隣のカードと同じ位置に揃える。
   商品名の行数がカードごとに違っても、価格は行の中で下端が揃うように、
   スペーサーを flex-grow させて価格を押し下げる（最低10pxは確保）。 */
.r-top-rank__spacer {
  display: block;
  flex: 1 1 10px;
  min-height: 10px;
}

.r-top-rank__price {
  display: flex;
  align-items: baseline;
  gap: 20px; /* 2026-08-28 指摘: 容量と価格の間をFigma実測（約20px）に */
}

.r-top-rank__capacity {
  color: #717171;
  font-size: 11px;
  line-height: 1.4;
}

.r-top-rank__yen {
  font-family: var(--renewal-font-latin);
  font-size: 14px;
  line-height: 1.1;
}

.r-top-rank__yen small { font-size: 10px; }

/* ==================================================================== *
 * 4. おすすめ製品（カートの空カート時と同じ中身・PCの寸法だけTOP専用）
 * Figma PC: y1910–2333。帯 1003x423、カード 210.678x231 を4枚（間隔 22.17）
 * Figma SP: y1347–1529。全幅の帯、カード 76x76 を4枚（間隔8）＋左右の矢印
 * ==================================================================== */

.r-top-reco {
  /* Figma PC は帯そのものがコンテンツ幅（x460 w1003）。SP だけ画面いっぱいにする。 */
  width: min(calc(100% - (var(--renewal-page-gutter) * 2)), var(--renewal-content-width));
  margin: 94px auto 0; /* グリッド下端1816 → 帯上端1910 */
  /* 2026-08-28 指摘でPCにドットを追加したのに合わせて下パディングを直した。
     旧82pxはドット追加前（カード下端→帯下端）の値のまま残っていて、
     ドットが最後の子になった今は「ドット下端→帯下端」に53pxオーバーしていた
     （Figma 145:1781 実測: ドット下端569 → 帯下端569+... 実測差分は約51px）。 */
  padding: 46px 0 51px; /* 帯上端1910 → 見出し1956 / ドット下端 → 帯下端 */
  background: rgba(0, 152, 166, 0.05); /* 実測 #f2fafa */
}

.r-top-reco__scroller {
  margin-top: 38px; /* 見出し下端1982 → カード上端2020 */
  padding: 0 46px; /* 帯の内側。Figma: 460 → カード506 */
  overflow-x: auto;
  /* 2026-08-28 指摘: overflow-x だけだと縦方向は既定の visible のままにならず、
     ブラウザが自動的に overflow-y: auto 相当として扱う（CSS の仕様）。
     その結果、Macのトラックパッド／Magic Mouseの斜め・縦方向のスクロール操作を
     この帯が拾ってしまい、要素が上下に動いて見える不具合が実機で発生した。
     縦方向は明示的に閉じ、横スクロール専用にする。 */
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.r-top-reco__scroller::-webkit-scrollbar { display: none; }

.r-top-reco__list {
  display: flex;
  gap: 22.17px; /* Figma: 列ピッチ 232.85 − カード 210.678 */
  min-width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 指摘リスト No.3（対応済み）でPCも商品名・カテゴリー・価格を表示する仕様に確定。
   カードの横幅をリンク（画像）と揃えて、下のテキストを折り返させる。SPは画像のみのまま
   （@media 側で本文を非表示にし、item幅も従来どおり画像サイズに戻す）。
   2026-08-28 指摘: 価格を隣のカードと同じ位置に揃えるため、itemを縦のflexにして
   bodyを伸ばす（display:flexの詳細は下の__bodyを参照）。 */
.r-top-reco__item {
  display: flex;
  flex-direction: column;
  flex: 0 0 210.678px;
  width: 210.678px;
}

.r-top-reco__link {
  display: grid;
  place-items: center;
  width: 210.678px;
  height: 231px;
  overflow: hidden;
  background: #fff;
}

.r-top-reco__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.r-top-reco__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 14px; /* 画像下端 → タグ上端（Figma実測） */
}

/* 2026-08-28 指摘: 価格は隣のカードと同じ位置に揃える。商品名の行数がカードごとに
   違っても、価格が行の中で下端に揃うようスペーサーを伸ばす（最低8pxは確保）。 */
.r-top-reco__spacer {
  display: block;
  flex: 1 1 8px;
  min-height: 8px;
}

.r-top-reco__tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 10px;
  border-radius: 10px;
  background: var(--r-type-color, #aacbea);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.04em;
}

.r-top-reco__name {
  display: block;
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.r-top-reco__price {
  display: flex;
  align-items: baseline;
  gap: 20px; /* 2026-08-28 指摘: 容量と価格の間をFigma実測（約20px）に */
}

.r-top-reco__yen {
  font-family: var(--renewal-font-latin);
  font-size: 14px;
  line-height: 1.1;
}

.r-top-reco__yen small { font-size: 10px; }

/* ==================================================================== *
 * 5. 肌悩みから探す / 6. アイテムから探す
 * Figma PC: 肌悩み 290x60 を3列3行（y2504〜）、アイテム 212x60 を4列2行（y2910〜）
 * Figma SP: 肌悩み 106x45 を3列3行、アイテム 160x45 を2列3行（6カテゴリ・2026-08-26）
 * ==================================================================== */

.r-top-find {
  margin-top: 84px; /* 帯下端2333 → 見出し2417 */
}

.r-top-find__grid {
  display: grid;
  gap: 20px;
  margin: 61px 0 0; /* 見出し下端2443 → ボタン2504 */
  padding: 0;
  list-style: none;
}

.r-top-find--concern .r-top-find__grid {
  grid-template-columns: repeat(3, 290px);
  justify-content: center;
}

.r-top-find__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 60px;
  border: 1px solid #000;
  border-radius: 2px; /* Figma: rounded 2px */
  background: #fff;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.r-top-find__button:hover,
.r-top-find__button:focus-visible {
  border-color: #4bbdc3;
  background-color: rgba(75, 189, 195, .05);
}

/* SP で「エイジングケア」だけ2行にするため、ラベルは span に入れている */
.r-top-find__label {
  text-align: center;
}

/* PC は1行。改行は SP だけ効かせる */
.r-top-find__br { display: none; }

.r-top-find__icon {
  display: block;
  width: 25px;
  height: 25px;
  object-fit: contain;
}

/* 遷移先がまだ無い項目（ピーリング・スリーピングマスク）。
   フッター（sections/footer.liquid の .cj-unavailable）と同じ扱いにしている。 */
.r-top-find__button.is-unavailable {
  border-color: #d3d6d9;
  color: #b1b1b1;
  cursor: default;
}

.r-top-find--item {
  margin-top: 107px; /* 肌悩みボタン下端2724 → アイテム見出し2831 */
}

.r-top-find--item .r-top-find__grid {
  /* 2026-08-31: 8カテゴリに戻したため4列に戻す（2行4列） */
  grid-template-columns: repeat(4, 212px);
  justify-content: center;
  margin-top: 53px; /* 見出し下端2857 → ボタン2910 */
}

.r-top-find--item .r-top-find__button {
  height: 60px;
  font-size: 18px;
}

/* ==================================================================== *
 * 7. シリーズから探す
 * Figma PC: 見出し y3205、帯 1000x515 を3つ（y3311 / 3860 / 4414）
 *   ロゴ 144x36 / カナ 32px / キャッチ 26px / カード 212x212 x4（間隔20）/ ボタン 327x45
 * Figma SP: 帯 356x303、カード 106x106 x3（間隔5）
 * ==================================================================== */

.r-top-series {
  margin-top: 155px; /* アイテムボタン下端3050 → 見出し3205 */
}

.r-top-series__list {
  margin: 80px 0 0; /* 見出し下端3231 → 帯上端3311 */
  padding: 0;
  list-style: none;
}

.r-top-series__block {
  padding: 39px 46px 54px; /* 帯上端3311 → ロゴ3350 / ボタン下端3772 → 帯下端3826 */
}

.r-top-series__block + .r-top-series__block {
  margin-top: 34px; /* Figma: 3826 → 3860 */
}

/* Figma は2つ目→3つ目だけ 39px（4375 → 4414）。作図のブレだがそのまま合わせている。 */
.r-top-series__block:nth-child(3) {
  margin-top: 39px;
}

.r-top-series__block--glow { background: #fcedf1; }
.r-top-series__block--hydra { background: #eef6fa; }
.r-top-series__block--nutrient { background: #f2f8ef; }

.r-top-series__head {
  display: flex;
  align-items: baseline;
  gap: 24px;
  height: 36px; /* Figma: ロゴ 144x36 */
  margin: 0;
}

/* シリーズ名（GLOW/HYDRA/NUTRIENT）は Figma でアウトライン化されたベクターのため、
   テキストではなくSVG画像で表示する（2026-08-26指示）。色はSVG側に焼き込み済み。 */
.r-top-series__name-img {
  display: block;
  height: 36px;
  width: auto;
}

.r-top-series__kana {
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.r-top-series__catch {
  margin: 26px 0 0; /* ロゴ下端3386 → キャッチ3412 */
  font-size: 18px;
  line-height: 26px; /* Figma のキャッチのボックスは 26px */
  letter-spacing: 0.04em;
}

/* PCは「、」でひと続きの1文として表示し、改行はさせない（2026-09-09指示）。
   SP側の@media内でこの2つを入れ替える。 */
.r-top-series__catch-break {
  display: none;
}

.r-top-series__note {
  margin: 6px 0 0;
  color: #717171;
  font-size: 12px;
  line-height: 1.5;
}

.r-top-series__products {
  display: flex;
  gap: 20px;
  margin: 38px 0 0; /* キャッチ下端3438 → カード3476 */
  padding: 0;
  list-style: none;
}

/* 2026-09-10指示: 960px〜コンテンツ幅の間でカードが固定212pxのまま縮まず、
   右にはみ出す／余白ができる不具合があったため、常にコンテンツ幅100%を
   埋める可変幅にする。gap込みで4等分すれば基準幅908pxのとき従来どおり212pxになる
   （(908-20*3)/4=212）ため、見た目は変えずに縮小・拡大に追従する。 */
.r-top-series__product {
  flex: 1 1 0;
  min-width: 0;
}

.r-top-series__thumb {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 2px;
  background: #fff;
  /* Figma 実測: 右に約5px・下に約8px、地色との差は最大13/255 のごく薄い影 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.r-top-series__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.r-top-series__more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 327px;
  height: 45px;
  margin: 39px auto 0; /* カード下端3688 → ボタン3727 */
  border-radius: 2px; /* Figma: rounded 2px */
  color: #fff;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

/* テーマ側の a の色指定に負けるので .r-top を足して詳細度を上げている */
.r-top .r-top-series__more { color: #fff; }

.r-top-series__block--glow .r-top-series__more { background: #f19db4; }
.r-top-series__block--hydra .r-top-series__more { background: #91c4ea; }
.r-top-series__block--nutrient .r-top-series__more { background: #a2d192; }

/* ==================================================================== *
 * 8. 最近見た製品（localStorage の閲覧履歴。assets/recently-viewed.js）
 * Figma PC: y5037–5355。カード 210x210 x4（間隔22.1）＋ ドット
 * Figma SP: カード 76x76 x4 ＋ 左右矢印 ＋ ドット
 * ==================================================================== */

.r-top-history {
  margin-top: 108px; /* NUTRIENT帯下端4929 → 見出し5037 */
}

.r-top-history[hidden] { display: none; }

.r-top-history__scroller {
  margin-top: 35px; /* 見出し下端5063 → カード5098 */
  overflow-x: auto;
  overflow-y: hidden; /* 2026-08-28: おすすめ製品と同じ理由（縦スクロール誤爆の防止） */
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.r-top-history__scroller::-webkit-scrollbar { display: none; }

.r-top-history__list {
  display: flex;
  gap: 22.1px;
  min-width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 指摘リスト No.3（対応済み）でPCも商品名・カテゴリー・価格を表示する仕様に確定。
   SPは画像のみのFigmaのまま（@media 側で本文を非表示にし、item幅も画像サイズに戻す）。
   2026-08-28 指摘: 価格を隣のカードと同じ位置に揃えるため、itemを縦のflexにして
   bodyを伸ばす（詳細は下の__bodyを参照）。 */
.r-top-history__item {
  display: flex;
  flex-direction: column;
  flex: 0 0 210px;
  width: 210px;
}

.r-top-history__item a {
  display: grid;
  place-items: center;
  width: 210px;
  height: 210px;
  overflow: hidden;
  background: #fff;
}

.r-top-history__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.r-top-history__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 14px; /* 画像下端 → タグ上端（Figma実測） */
}

/* 2026-08-28 指摘: 価格は隣のカードと同じ位置に揃える。商品名の行数がカードごとに
   違っても、価格が行の中で下端に揃うようスペーサーを伸ばす（最低8pxは確保）。 */
.r-top-history__spacer {
  display: block;
  flex: 1 1 8px;
  min-height: 8px;
}

.r-top-history__tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 10px;
  border-radius: 10px;
  background: var(--r-type-color, #aacbea);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.04em;
}

.r-top-history__name {
  display: block;
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.r-top-history__price {
  display: flex;
  align-items: baseline;
  gap: 20px; /* 2026-08-28 指摘: 容量と価格の間をFigma実測（約20px）に */
}

.r-top-history__capacity {
  color: #717171;
  font-size: 12px;
  line-height: 1.4;
}

.r-top-history__yen {
  font-family: var(--renewal-font-latin);
  font-size: 14px;
  line-height: 1.1;
}

.r-top-history__yen small { font-size: 10px; }

/* --- ドット（最近見た製品・メディアで共通） --- */
.r-top-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 42px 0 0; /* カード下端5308 → ドット5350 */
  padding: 0;
  list-style: none;
}

.r-top-dots[hidden] { display: none; }

.r-top-dots__dot {
  width: 5.24px;
  height: 5.24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #b3e1e5;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.r-top-dots__dot.is-current { background: #0098a6; }

/* ==================================================================== *
 * 9. お知らせ / 10. ブログ
 * Figma PC: お知らせ y5453–5763（909幅・行50px）、ブログ y5862–6343
 * ==================================================================== */

.r-top-news {
  margin-top: 98px; /* 最近見た下端5355 → 見出し5453 */
}

.r-top-news__list {
  margin: 39px 0 0; /* 見出し下端5479 → 1行目5518 */
  padding: 0;
  list-style: none;
  border-bottom: 1px solid #d3d6d9;
}

/* 2026-08-28 指摘: 1つ目の要素の上に線は不要（Figma）。項目間の区切りとしてのみ出す。 */
.r-top-news__item + .r-top-news__item { border-top: 1px solid #d3d6d9; }

.r-top-news__link {
  display: flex;
  align-items: center;
  gap: 35px; /* 日付 x0 w89 → タイトル x124 */
  min-height: 50px;
  padding: 13px 0;
}

.r-top-news__date {
  flex: 0 0 89px;
  color: #4bbdc3;
  font-family: var(--renewal-font-latin);
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.04em;
}

.r-top-news__title {
  flex: 1 1 auto;
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: 0.04em;
}

.r-top-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 356px;
  height: 45px;
  margin: 50px auto 0; /* 罫線5668 → ボタン5718 */
  border: 1px solid #4bbdc3;
  border-radius: 3px; /* Figma: もっと見るだけ 3px */
  font-size: 14px; /* Figma: もっと見るは PC も 14px */
  line-height: 1.45;
  letter-spacing: 0.04em;
}

/* テーマ側の a の色指定に負けるので .r-top を足して詳細度を上げている */
.r-top .r-top-more { color: #4bbdc3; }

.r-top-blog {
  margin-top: 99px; /* お知らせ下端5763 → 見出し5862 */
}

.r-top-blog[hidden] { display: none; }

.r-top-blog__list {
  display: grid;
  grid-template-columns: repeat(3, 273.33px);
  gap: 44.67px; /* Figma: 318 − 273.33 */
  justify-content: space-between;
  margin: 69px 0 0; /* 見出し下端5888 → 画像5957 */
  padding: 0;
  list-style: none;
}

.r-top-blog__thumb {
  display: block;
  width: 273.33px;
  height: 205px; /* Figma の比率（およそ4:3） */
  overflow: hidden;
  background: var(--renewal-color-surface);
}

.r-top-blog__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.r-top-blog__title {
  /* a のままだと inline になり、上の margin が効かず画像とくっつく */
  display: block;
  margin: 12px 0 0; /* 画像下端6162 → テキスト6174 */
  /* Figma 114:2305 は 18px / tracking 0.72（＝.04em）/ 行送りは Auto。
     Auto はフォント既定の行送りなので、CSS では line-height: normal がそのまま対応する。 */
  font-size: 18px;
  line-height: normal;
  letter-spacing: 0.04em;
}

.r-top-blog .r-top-more { margin-top: 40px; }

/* ==================================================================== *
 * 11. メディア
 * Figma PC: y6460–6831。表紙 155.88x200 を5枚（ピッチ188）＋誌名＋号数
 * Figma SP: 表紙 106x136 を3枚（ピッチ111）
 * ==================================================================== */

.r-top-media {
  margin-top: 117px; /* ブログ下端6343 → 見出し6460 */
}

.r-top-media__scroller {
  margin-top: 45.76px; /* 見出し下端6486 → 表紙6531.76 */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.r-top-media__scroller::-webkit-scrollbar { display: none; }

.r-top-media__list {
  display: flex;
  gap: 32.12px; /* Figma: ピッチ188 − 155.88 */
  min-width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}

.r-top-media__item {
  flex: 0 0 155.88px;
  text-align: center;
}

.r-top-media__cover {
  width: 155.88px;
  height: 200px;
  object-fit: cover;
}

.r-top-media__name {
  margin: 7px 0 0; /* 表紙下端6731.76 → 誌名6739 */
  font-size: 16px;
  font-weight: 500; /* Figma: Zen Kaku Gothic New Medium */
  line-height: 1.45;
  letter-spacing: 0.04em;
}

.r-top-media__issue {
  margin: 0;
  color: #000; /* Figma は誌名と同じ黒 */
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0.04em;
}

.r-top-media .r-top-dots { margin-top: 26px; }

/* ==================================================================== *
 * 12. 下部バナー3枚
 * 2026-09-11 差し替え: プロフェッショナルシリーズ（全幅）+
 * CHRISTINA HOUSE TOKYO/OSAKA（横並び2枚）。
 * Figma PC 186:1699 実測: プロシリーズ 508,7270 905x200 /
 * house>tokyo 506,7498 440x199 / house>osaka 973,7498 439x199（間隔27）
 * ==================================================================== */

.r-top-banners {
  /* Figma のバナーは x506–1412 ＝ 906px。他の帯（908px）より2px狭いので
     このブロックだけ内側の余白を 47px にしている。 */
  padding-inline: calc(var(--renewal-page-gutter) + 47px);
  margin-top: 133px; /* メディア下端7137 → バナー7270 */
  display: flex;
  flex-direction: column;
  gap: 28px; /* プロシリーズ下端7470 → house 7498 */
}

.r-top-banner {
  display: block;
}

.r-top-banner__image {
  display: block;
  width: 100%;
  height: auto;
}

.r-top-banners__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 27px;
}

/* 下部の特典は上部より広い間隔（Figma: バナー下端7697 → 特典7821） */
.r-top-perks--bottom { margin-top: 124px; }

/* 特典下端7763 → フッター7909 */
.r-top__footer-space { height: 146px; }

/* ==================================================================== *
 * SP（Figma 114:1290 / 393px）
 * ==================================================================== */

@media only screen and (max-width: 960px) {

  .r-top {
    --renewal-page-gutter: 18px;
  }

  .r-top__inner,
  .r-top__inner--narrow {
    width: 100%;
    padding-inline: var(--renewal-page-gutter);
  }

  .r-top-title { gap: 11px; font-size: 12px; line-height: 17px; }
  .r-top-title::before,
  .r-top-title::after { flex-basis: 16.5px; }

  /* --- 特典 --- */
  .r-top-perks {
    /* 2026-08-26: 4項目化（85px×4=340px、space-betweenで両端揃え）に合わせて327px→340pxに変更 */
    width: 340px;
    max-width: calc(100% - 30px);
    margin-top: 31px; /* MV下端539 → 見出し570 */
  }

  .r-top-perks__title { gap: 8px; font-size: 12px; line-height: 17px; }

  br.sp {
    display: inline;
  }

  /* SP は線8px・間8px。Figma: 見出し枠327 = 線8 + 間8 + 文字295 + 間8 + 線8 */
  .r-top-perks__title::before,
  .r-top-perks__title::after { flex-basis: 8px; }

  /* 2026-08-26: カートのSP実測（85px×4・space-between）と揃える */
  .r-top-perks__list {
    width: 100%;
    max-width: 100%;
    gap: 0;
    justify-content: space-between;
    margin-top: 31px; /* 見出し下端587 → アイコン618 */
  }

  .r-top-perks__item { width: 85px; }

  .r-top-perks__icon {
    height: 44px;
    margin-bottom: 13px; /* アイコン下端662 → テキスト675 */
  }

  .r-top-perks__item:nth-child(1) .r-top-perks__icon svg { height: 37px; }
  .r-top-perks__item:nth-child(2) .r-top-perks__icon svg { height: 38px; }
  .r-top-perks__item:nth-child(3) .r-top-perks__icon svg { height: 43.3px; }
  .r-top-perks__item:nth-child(4) .r-top-perks__icon svg { height: 44px; }

  .r-top-perks__text {
    font-size: 10px;
    line-height: 14px; /* Figma: 2行で 28px */
  }

  /* --- ランキング: 縦5行のリスト --- */
  .r-top-rank { margin-top: 32px; } /* 特典下端703 → 見出し735 */

  .r-top-rank__list {
    display: block;
    margin-top: 24px; /* 見出し下端752 → 1行目776 */
  }

  .r-top-rank__item,
  .r-top-rank__item--1,
  .r-top-rank__item--2,
  .r-top-rank__item--3,
  .r-top-rank__item--4,
  .r-top-rank__item--5 {
    grid-area: auto;
  }

  .r-top-rank__item + .r-top-rank__item { margin-top: 8px; }

  .r-top-rank__link {
    display: flex;
    /* 2026-08-28 のPCランキング再構築で .r-top-rank__link のベース値に
       flex-direction: column を足したところ、このSPブロックには
       flex-direction の上書きが無く、SPまで縦積み（画像上・テキスト下）に
       なってしまった（実機で発覚）。SPは元どおり横並び（画像左・テキスト右）。 */
    flex-direction: row;
    align-items: stretch;
    gap: 18px; /* 画像右端95 → テキスト113 */
    min-height: 100px;
    padding: 4px;
    border: 1px solid #a5dee1;
  }

  /* 画像は上寄せのまま。商品名が2行になったら、その分の余白が画像の下に増える。 */
  .r-top-rank__media {
    align-self: flex-start;
    flex: 0 0 91px;
    width: 91px;
    height: 91px;
  }

  .r-top-rank__badge,
  .r-top-rank__item--1 .r-top-rank__badge {
    top: 7px;
    left: 7px;
    width: 22px;
    height: 22px;
    font-size: 11px;
  }

  .r-top-rank__body {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    /* 2026-08-28: PC版で足した margin-top: 10px（ベース側の .r-top-rank__body）が
       ここに上書きされずに漏れ、ラベル上の余白が実機で二重に広がっていた。
       ゼロに戻し、枠上端→タグ上端がFigma実測の10px（link padding 4px + ここの
       padding-top 6px）になるよう調整。 */
    margin-top: 0;
    padding: 6px 0 4px;
  }

  .r-top-rank__tag {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 12px;
    border-radius: 9px;
    /* 色は商品カードと同じ一覧（renewal-shell.css の data-product-type）から受け取る */
    background: var(--r-type-color, #aacbea);
    color: #fff;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.04em;
  }

  .r-top-rank__name {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0.04em;
  }

  /* 容量と価格だけ下寄せ */
  .r-top-rank__price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: auto;
    padding-top: 9px;
  }

  .r-top-rank__capacity {
    color: #717171;
    font-size: 12px;
    line-height: 1.4;
  }

  .r-top-rank__yen {
    font-family: var(--renewal-font-latin);
    font-size: 14px;
    line-height: 1.1;
  }

  .r-top-rank__yen small { font-size: 10px; }

  /* --- おすすめ製品: 全幅の帯・76pxのカード・左右の矢印 --- */
  /* SP は Figma 13:5734 のとおり画面いっぱいの帯 */
  .r-top-reco {
    width: 100%;
    margin-top: 39px; /* ランキング下端1308 → 帯1347 */
    padding: 28px 0 40px; /* 帯1347 → 見出し1375 / カード下端1489 → 帯下端1529 */
  }

  .r-top-reco__scroller {
    margin-top: 21px; /* 見出し下端1392 → カード1413 */
    padding-left: 33px;
    padding-right: 32px;
  }

  .r-top-reco__list { gap: 8px; }

  /* 2026-08-28 指摘: SPもPCと同じく商品名・カテゴリー・価格を表示する
     （Figmaに実在。以前「PC版のみの修正」と判断したのは誤り）。
     item幅を76pxに固定してテキストを折り返す。数値は最近見た製品SPと同じ
     （画像下端→タグ9px・タグ高14px・タグ→商品名5px・行ピッチ1.45）。
     おすすめ製品はFigma側にもともと容量が無いので、ここでの追加指定は不要。 */
  .r-top-reco__item { flex: 0 0 76px; width: 76px; }

  .r-top-reco__link {
    width: 76px;
    height: 76px;
  }

  .r-top-reco__body {
    margin-top: 9px;
  }

  .r-top-reco__tag {
    height: 14px;
    padding: 0 7px;
    border-radius: 7px;
    font-size: 8px;
  }

  .r-top-reco__name {
    margin-top: 5px;
    font-size: 11px;
    line-height: 1.45;
  }

  .r-top-reco__price {
    flex-wrap: nowrap;
  }

  .r-top-reco__yen {
    font-size: 11px; /* 2026-08-28 指摘: 12px→11pxに補正、1行に収まるように */
    white-space: nowrap;
  }

  .r-top-reco__yen small {
    font-size: 8px;
  }

  /* --- 肌悩み / アイテム --- */
  .r-top-find { margin-top: 42px; } /* 帯下端1529 → 見出し1571 */

  .r-top-find__grid {
    gap: 5px;
    margin-top: 42px; /* 見出し下端1588 → ボタン1630 */
  }

  .r-top-find--concern .r-top-find__grid {
    grid-template-columns: repeat(3, 106px);
  }

  .r-top-find__button {
    gap: 8px;
    height: 45px;
    /* Figma SP は border 0.5px。実機（肌悩み／アイテムのボタン）で上辺の線だけ
       消えて見える不具合が発生した — 0.5px は device pixel ratio によって
       実際に描画される線幅が辺ごとに変わることがあり（上辺だけ丸め先の
       サブピクセル位置が0に近くなる等）、再現性が低い。見た目の差はごくわずかな
       ので、確実に出る 1px に戻す（2026-08-28）。 */
    border-width: 1px;
    font-size: 12px; /* Figma SP: 12px */
    line-height: 1.4;
    text-align: center;
  }

  /* 「エイジングケア」だけ Figma と同じく「エイジング／ケア」で2行にする。
     アイコンはボタンの中央揃え（align-items: center）なので、2行でも上下中央に来る。 */
  .r-top-find__br { display: inline; }

  .r-top-find__icon { width: 15px; height: 15px; }

  .r-top-find--item { margin-top: 44px; } /* 肌悩み下端1775 → 見出し1819 */

  .r-top-find--item .r-top-find__grid {
    grid-template-columns: repeat(2, 160px);
    gap: 8px;
    margin-top: 34px; /* 見出し下端1836 → ボタン1870 */
  }

  .r-top-find--item .r-top-find__button {
    height: 45px;
    font-size: 13px;
  }

  /* --- シリーズ --- */
  .r-top-series { margin-top: 42px; } /* アイテム下端2074 → 見出し2116 */

  .r-top-series__list { margin-top: 35px; } /* 見出し下端2133 → 帯2168 */

  .r-top-series__block {
    padding: 24px 14px 26px; /* 帯2168 → ロゴ2192 / カード左端32 / ボタン下端2445 → 帯下端2471 */
  }

  .r-top-series__block + .r-top-series__block { margin-top: 36px; }

  /* SP は2つ目→3つ目が 30px（Figma: 2810 → 2840）。PC の 39px を打ち消す。 */
  .r-top-series__block:nth-child(3) { margin-top: 30px; }

  .r-top-series__head { gap: 14px; height: 24px; }
  .r-top-series__name-img { height: 24px; }
  .r-top-series__kana { font-size: 16px; }

  .r-top-series__catch {
    margin-top: 14px; /* ロゴ下端2216 → キャッチ2230 */
    font-size: 14px;
    line-height: 20px; /* Figma: 291x20 */
  }

  /* 2026-09-09指示: SPは「、」を消して、その位置で改行させる */
  .r-top-series__catch-comma {
    display: none;
  }

  .r-top-series__catch-break {
    display: inline;
  }

  .r-top-series__note { font-size: 10px; }

  .r-top-series__products {
    gap: 5px;
    margin-top: 17px; /* キャッチ下端2250 → カード2267 */
  }

  /* SP は Figma どおり3枚まで（スライドはしない）。4枚目は出さない。 */
  .r-top-series__product:nth-child(n + 4) {
    display: none;
  }

  /* 2026-09-10指示: SPも3枚で常にコンテンツ幅100%を埋める可変幅にする。
     基準幅328pxのとき従来どおり106pxになる（(328-5*2)/3=106） */
  .r-top-series__product { flex: 1 1 0; min-width: 0; }

  .r-top-series__thumb { width: 100%; height: auto; aspect-ratio: 1 / 1; }

  .r-top-series__more {
    width: 100%;
    max-width: 327px;
    height: 45px;
    margin-top: 27px; /* カード下端2373 → ボタン2400 */
    font-size: 14px;
  }

  /* --- 最近見た製品 --- */
  .r-top-history { margin-top: 53px; } /* シリーズ下端3143 → 見出し3196 */

  /* スクローラーが自分で 33/32px の余白を持つので、器のガターは打ち消す */
  .r-top-history,
  .r-top-media {
    padding-inline: 0;
  }

  .r-top-history__scroller {
    margin-top: 21px; /* 見出し下端3213 → カード3234 */
    padding-left: 33px;
    padding-right: 32px;
  }

  .r-top-history__list { gap: 8px; }

  /* 矢印はおすすめ製品と同じ位置（renewal-shell.css の .r-reco__arrow）。
     ドットは中身がはみ出しているときだけ出る。 */

  .r-top-history__item a { width: 76px; height: 76px; }

  /* 2026-08-28: SPの最近見た製品にも商品名・カテゴリー・価格を表示する
     （Figma 145:768 実測。画像下端→タグ上端9px・タグ高さ14px・
     タグ→商品名9px・行ピッチ16px）。item幅を76pxに固定してテキストを折り返す。 */
  .r-top-history__item { flex: 0 0 76px; width: 76px; }

  .r-top-history__body {
    margin-top: 9px;
  }

  .r-top-history__tag {
    height: 14px;
    padding: 0 7px;
    border-radius: 7px;
    font-size: 8px; /* 2026-08-28: Figma実測で9px→8pxに補正 */
  }

  .r-top-history__name {
    margin-top: 5px; /* 2026-08-28 指摘: タグ→商品名を5pxに */
    font-size: 11px;
    line-height: 1.45;
  }

  /* 2026-08-28 指摘: SPは容量を出さず、価格を1行で表示する */
  .r-top-history__capacity { display: none; }

  .r-top-history__price { flex-wrap: nowrap; }

  .r-top-history__yen { font-size: 11px; white-space: nowrap; } /* 12px→11pxに補正 */

  .r-top-history__yen small { font-size: 8px; }

  .r-top-dots { margin-top: 20px; } /* カード下端3310 → ドット3330 */

  /* --- お知らせ / ブログ --- */
  .r-top-news { margin-top: 57px; } /* 最近見た下端3335 → 見出し3392 */

  .r-top-news__list { margin-top: 14px; }

  .r-top-news__link {
    align-items: flex-start;
    gap: 22px;
    /* 2026-08-28 指摘: min-height: 60px があると、1行の要素も2行の要素と同じ高さに
       引き伸ばされ、align-items: flex-start のせいで伸びた分が下側の余白として
       残っていた（見出し上下の余白が要素ごとに揃わない原因）。行数なりの高さに
       まかせ、上下の余白は padding だけで揃える。 */
    padding: 12px 0;
  }

  .r-top-news__date { flex-basis: 67px; font-size: 11px; }
  .r-top-news__title { font-size: 12px; line-height: 1.6; }

  .r-top-more {
    width: 100%;
    max-width: 356px;
    height: 45px;
    margin-top: 24px;
    font-size: 14px;
  }

  .r-top-blog { margin-top: 80px; } /* お知らせ下端3672 → 見出し3752 */

  .r-top-blog__list {
    display: block;
    margin-top: 32px; /* 見出し下端3769 → 1件目3801 */
    border-bottom: 1px solid #d3d6d9;
  }

  .r-top-blog__item {
    display: flex;
    gap: 21px; /* 画像右端159 → テキスト180 */
    padding: 0 0 16px;
  }

  .r-top-blog__item + .r-top-blog__item {
    margin-top: 16px;
    border-top: 1px solid #d3d6d9;
    padding-top: 16px;
  }

  .r-top-blog__thumb {
    flex: 0 0 141.33px;
    width: 141.33px;
    height: 106px;
  }

  /* Figma 114:1720 は 14px / tracking 0.56（＝.04em）/ 行送りは Auto */
  .r-top-blog__title { margin-top: 0; font-size: 14px; line-height: normal; }

  /* --- メディア --- */
  .r-top-media { margin-top: 80px; } /* ブログ下端4271 → 見出し4351 */

  .r-top-media__scroller {
    margin-top: 21px; /* 見出し下端4368 → 表紙4389 */
    padding-left: 32px;
    padding-right: 32px;
  }

  .r-top-media__list { gap: 5px; }

  .r-top-media__item { flex-basis: 106px; }

  .r-top-media__cover { width: 106px; height: 136px; }

  .r-top-media__name { margin-top: 3px; font-size: 12px; }
  .r-top-media__issue { font-size: 12px; }

  .r-top-media .r-top-dots { margin-top: 22px; }

  /* --- 下部バナー --- */
  /* 2026-09-11 実測（SP 186:1195）: 左右余白はページガター18pxのみ（PC用の+47pxは不要）。
     プロシリーズ（全幅）+ TOKYO/OSAKA横並び2枚は、SPでも同じ並び（縦積みではない）。
     プロシリーズ下端 → 横並び行の間隔33px、横並び2枚の間隔12px。 */
  .r-top-banners {
    margin-top: 85px; /* メディア下端 → バナー */
    padding-inline: var(--renewal-page-gutter);
    gap: 33px;
  }

  .r-top-banners__pair {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .r-top-perks--bottom { margin-top: 73px; }

  .r-top__footer-space { height: 58px; }
}