.r-product-detail {
  --r-detail-content: 1000px;
  --r-detail-accent: #79cbd1;
  --r-detail-accent-dark: #167e86;
  --r-detail-common: #4bbdc3;
  /* Figma node 1:2917 のカートボタン実測。停止位置も Figma のまま */
  --r-detail-cart-gradient: linear-gradient(90deg, rgb(0, 148, 157) 0%, rgb(107, 191, 193) 27.885%, rgb(161, 209, 199) 51.442%, rgb(198, 226, 215) 76.442%, rgb(248, 248, 217) 100%);
  --r-detail-cart-gradient-hover: linear-gradient(90deg, #00949d 0%, #6bbfc1 33.333%, #a1d1c7 66.666%, #c6e2d7 100%);
  /* 本文・見出しの黒は #000（Figma の text-black に合わせる。2026-08-21 指示） */
  --r-detail-ink: #000;
  --r-detail-muted: #6c7779;
  --r-detail-line: #d9e1e2;
  /* 購入パネル/タブ/数量ステッパーの罫線。Figma 実測 #c1c1c1 */
  --r-detail-panel-line: #c1c1c1;
  --r-detail-surface: #f4f7f7;
  --r-detail-tint: #eaf6f7;
  /* Figma node 13:1879 実測: 製品詳細〜レビューを覆う背景 #f4f9fc (1000x2878) */
  --r-detail-section-bg: #f4f9fc;
  /* ナビ・カードの細罫。Figma 実測 #a5dee1 = accent の約65% */
  --r-detail-accent-soft: #a5dee1;
  /* 種別バッジ背景。Figma node 13:1930 = rgba(145,196,234,.86)（HYDRA） */
  --r-detail-badge: rgba(145, 196, 234, .86);
  /* おすすめのご使用順番: 「現在地」カードの背景（HYDRA既定）。2026-09-10指示 */
  --r-detail-step-current-bg: #eaf3fb;
  color: var(--r-detail-ink);
  background: #fff;
}

/* おすすめ製品: TOPページと同じカード／共通スライダー */
.r-detail-reco {
  width: min(calc(100% - (var(--renewal-page-gutter) * 2)), var(--renewal-content-width));
  margin: 94px auto 0;
  padding: 46px 0 51px;
  background: rgba(0, 152, 166, 0.05);
}

.r-detail-reco__scroller {
  margin-top: 38px;
  padding: 0 46px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

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

.r-detail-reco__list {
  display: flex;
  gap: 22.17px;
  min-width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}

.r-detail-reco__item {
  display: flex;
  flex-direction: column;
  flex: 0 0 210.678px;
  width: 210.678px;
}

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

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

.r-detail-reco__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 14px;
}

.r-detail-reco__spacer {
  display: block;
  flex: 1 1 8px;
  min-height: 8px;
}

.r-detail-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-detail-reco__name {
  display: block;
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.r-detail-reco__price {
  display: flex;
  align-items: baseline;
  gap: 20px;
}

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

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

@media only screen and (max-width: 960px) {
  .r-detail-reco {
    width: 100%;
    margin-top: 39px;
    padding: 28px 0 40px;
  }

  .r-detail-reco__scroller {
    margin-top: 21px;
    padding-left: 33px;
    padding-right: 32px;
  }

  .r-detail-reco__list { gap: 8px; }
  .r-detail-reco__item { flex: 0 0 76px; width: 76px; }

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

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

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

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

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

  .r-detail-reco__yen {
    font-size: 11px;
    white-space: nowrap;
  }

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

.r-product-detail[data-product-series="nutrient"] {
  --r-detail-accent: #94c5a7;
  --r-detail-accent-dark: #397454;
  --r-detail-accent-soft: #c2ddcc;
  --r-detail-tint: #edf6f0;
  /* 2026-08-31: Figma実測(157:3568のNT変数 #a2d192)に合わせて修正。旧値は#の混色が違っていた */
  --r-detail-badge: #a2d192;
  /* 2026-09-10: 製品詳細〜レビューの帯。Figma node 182:863（NUTRIENT SP）実測 rgba(162,209,146,.07) */
  --r-detail-section-bg: rgba(162, 209, 146, .07);
  /* おすすめのご使用順番「現在地」カードの背景。2026-09-10指示 */
  --r-detail-step-current-bg: #edf3ea;
}

.r-product-detail[data-product-series="glow"] {
  --r-detail-accent: #e3a9b7;
  --r-detail-accent-dark: #9b5366;
  --r-detail-accent-soft: #eecdd5;
  --r-detail-tint: #fbf0f3;
  /* 2026-08-31: Figma実測(157:3292のGLOW new変数 #f19db4)に合わせて修正。旧値は薄すぎた */
  --r-detail-badge: #f19db4;
  /* 2026-09-10: 製品詳細〜レビューの帯。Figma node 182:1342（GLOW SP）実測 rgba(241,157,180,.07) */
  --r-detail-section-bg: rgba(241, 157, 180, .07);
  /* おすすめのご使用順番「現在地」カードの背景。2026-09-10指示 */
  --r-detail-step-current-bg: #f7e9ed;
}

.r-product-detail [hidden] {
  display: none !important;
}

.r-product-detail .topSection {
  box-sizing: border-box;
  width: min(var(--r-detail-content), calc(100% - 64px));
  max-width: var(--r-detail-content);
  margin: 0 auto 112px;
  padding-top: 34px;
}

/* 特典バナー: Figma実測は325px x 3 + 13px gap x 2。3枚は flex で 1000px カラムを埋める */
.r-product-detail .r-benefits {
  display: flex;
  justify-content: center;
  gap: 13px;
  box-sizing: border-box;
  width: min(var(--r-detail-content), calc(100% - 64px));
  margin: 0 auto;
  /* margin-top ではなく padding-top。margin だと .r-product-detail の
     margin-top: 112px と相殺され、余白が描画されないため。 */
  padding-top: 27px;
}

.r-product-detail .r-benefits-item {
  flex: 1 1 0;
  min-width: 0;
  display: block;
}

.r-product-detail .r-benefits-banner {
  display: block;
  width: 100%;
  height: auto;
}

/* ページ内ナビ: Figma PC 13:1878 実測
   ボックス 4等分 / gap 11px / 合計1000px / 高さ35px / 罫線 1px #a5dee1
   ラベル 12px・letter-spacing 0（製品詳細=49px, 使い方=36px の実測から算出）
   シェブロン 14x5px を下端から6px上に配置 */
.r-product-detail .r-detail-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
  box-sizing: border-box;
  width: min(var(--r-detail-content), calc(100% - 64px));
  /* Figma実測: ナビ下端1067 → 製品詳細の帯上端1124 = 57px */
  margin: 0 auto 57px;
}

.r-product-detail .r-detail-nav__link {
  display: flex;
  min-width: 0;
  /* Figma実測: ナビのボックス高さ35px（4等分・gap 11〜12px） */
  min-height: 35px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  padding-top: 7px;
  /* 2026-09-10 指示: ページ内リンクは全カテゴリ共通。var(--r-detail-accent-soft)だと
     カテゴリごとに枠線色が変わってしまうため、hydraの値 #a5dee1 に固定する。 */
  border: 1px solid #a5dee1;
  color: var(--r-detail-ink);
  background: #fff;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 11px;
  /* Figma 1:3021 の tracking 0.48px。実測のラベル幅（製品詳細=49px）とも一致 */
  letter-spacing: .48px;
  text-decoration: none;
  transition: background-color .2s ease;
}

/* 白地を確実に当てる。ベーステーマ側の指定で background の短縮形が
   効かないケースがあったため、詳細度を上げて background-color を明示する。 */
.r-product-detail .r-detail-nav .r-detail-nav__link {
  background-color: #fff;
}

/* 表示中セクションの塗りは使わない（ご指示により全ボタン白地で固定）。
   スクロール追随のクラス付け替えは残してあるので、必要になれば
   ここに背景色を書けば復活する。 */

/* ホバー: Figma コンポーネントセット 1:3021（プロパティ1=Component 36）
   通常状態との差は背景だけで、文字色・枠線は変わらない。
   背景 = LR BG = rgba(75,189,195,.05)（#4bbdc3 の5%）。
   Figma はシリーズ別の指定を持たないため、全シリーズ共通でこの値を使う。 */
.r-product-detail .r-detail-nav .r-detail-nav__link:not([aria-disabled="true"]):hover,
.r-product-detail .r-detail-nav .r-detail-nav__link:focus-visible {
  background-color: rgba(75, 189, 195, .05);
}

.r-product-detail .r-detail-nav__link[aria-disabled="true"] {
  cursor: not-allowed;
  color: #9ba5a7;
  background: #fbfcfc;
  user-select: none;
}

.r-product-detail .r-detail-nav__link[aria-disabled="true"] .r-detail-nav__arrow {
  border-color: #bdc6c7;
}

.r-product-detail .r-detail-nav__arrow {
  display: block;
  width: 14px;
  height: 5px;
  color: #61c4cb;
  flex: none;
}

.r-product-detail #product-detail,
.r-product-detail #how-to-use,
.r-product-detail #review,
.r-product-detail #product-spec {
  /* 固定ヘッダーの実高に合わせる（PC 50+82 / SP 48+24） */
  scroll-margin-top: 132px;
}

@media (max-width: 960px) {
  .r-product-detail #product-detail,
  .r-product-detail #how-to-use,
  .r-product-detail #review,
  .r-product-detail #product-spec {
    scroll-margin-top: 72px;
  }
}

/* パンくず: Figma y=293-316（行高23px）、区切りシェブロン 4.5x12、左右19px */
.r-product-detail .pankuzu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 19px;
  margin: 0 0 37px;
  font-size: 16px;
  line-height: 23px;
  letter-spacing: .04em;
}

/* letter-spacing はベーステーマが .pankuzuLink / .pankuzuNoLink に直接 2px を
   当てているため、継承では上書きできない。各クラムに明示指定する。 */
.r-product-detail .pankuzuLink,
.r-product-detail .pankuzuNoLink {
  margin: 0;
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
  letter-spacing: .04em;
}

/* 英字クラムのみ Tenor Sans。商品名クラムは Zen Kaku Gothic New のまま */
.r-product-detail .pankuzuLink {
  color: #c1c1c1;
  font-family: "Tenor Sans", "Zen Kaku Gothic New", sans-serif;
  text-decoration: none;
}

.r-product-detail .pankuzuNoLink {
  /* ベーステーマの opacity:.4 を打ち消さないと色が薄く出る */
  /* 現在表示中のページだけ黒。全ページで同じ扱い（2026-08-24 指示）。 */
  opacity: 1;
  color: #000;
  font-family: "Zen Kaku Gothic New", sans-serif;
}

/* ">" のテキストは隠し、4.5x12 のシェブロンを描画。
   em 指定なので SP(10px) では 2.8x7.5 に比例縮小される。 */
.r-product-detail .pankuzuArrow {
  flex: none;
  width: .28125em;
  height: .75em;
  margin: 0;
  overflow: hidden;
  color: transparent;
  font-size: inherit;
  line-height: 0;
  text-indent: -9999px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4.5' height='12' viewBox='0 0 4.5 12'%3E%3Cpath d='M.5.75 3.75 6 .5 11.25' fill='none' stroke='%23c1c1c1' stroke-width='1'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

/* Figmaに hover 指定は無い。アクセシビリティ上の可視フィードバックとして、
   Figmaで確定した #717171（現在ページ色）へ濃くするだけに留める。 */
.r-product-detail .pankuzuLink:hover,
.r-product-detail .pankuzuLink:focus-visible {
  color: #717171;
}

.r-product-detail .pankuzuLink._ml {
  margin-left: 0;
}

/* Figma: 画像430px / gap 93px / 情報476px = 999px（コンテンツ幅1000px） */
.r-product-detail .topSectionContent {
  display: grid;
  grid-template-columns: 430fr 476fr;
  gap: 93px;
  align-items: start;
}

.r-product-detail .p-product_content__inner__img {
  width: 100%;
  min-width: 0;
  margin: 0;
}

/* Figma: メイン画像は 430x430 の正方形（SPでも 356x356 の正方形） */
/* メイン画像: 左右パディングなし・画像全体を表示・高さはauto（クライアント指示） */
.r-product-detail .c-product_img__slider--main {
  display: grid;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  background: var(--r-detail-surface);
}

.r-product-detail .c-product_img__slider--main .c-product_img__track,
.r-product-detail .c-product_img__slider--main .c-product_img__list,
.r-product-detail .c-product_img__slider--main .c-product_img__item {
  width: 100%;
  height: auto;
}

/* 2026-09-04: SPでメイン画像の上に8pxのグレー帯が出ていた。
   show.html.liquid のインライン<style>のSP帯にある
     .c-product_img__item { margin-right: 0 !important; margin-top: 8px }
     .c-product_img__item.splide__slide { margin-right: 8px !important }
   がメイン画像のスライドにも効いており、その margin-top 8px ぶん
   枠（背景 --r-detail-surface）が画像より高くなっていた。
   枠が画像にぴったり張り付くよう、メイン画像側だけマージンを打ち消す。
   右マージンが !important なので、こちらも !important が要る。 */
.r-product-detail .c-product_img__slider--main .c-product_img__item {
  margin: 0 !important;
}

.r-product-detail .c-product_img__slider--main .c-product_img__item {
  display: grid;
  place-items: center;
}

/* メイン画像はサムネイルから差し替える1枚だけを使う。
   Splideはフェード用にスライドの visibility / opacity / position をインラインstyleで
   制御しており、2枚目以降が残っていると差し替えたsrcと表示スライドがズレる。
   先頭スライドだけを表示に固定して、JSは常にその1枚を書き換える。 */
.r-product-detail .c-product_img__slider--main .c-product_img__item {
  display: none !important;
}

.r-product-detail .c-product_img__slider--main .c-product_img__item:first-child {
  display: grid !important;
  position: relative !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 1 !important;
}

/* メイン画像はリンクではないので指カーソルにしない（ベーステーマの cursor:pointer を打ち消す） */
.r-product-detail .c-product_img__slider--main .c-product_img__item,
.r-product-detail .c-product_img__slider--main .c-product_img__image {
  cursor: default;
}

.r-product-detail .c-product_img__slider--main .c-product_img__image {
  width: 100%;
  height: auto;
  max-height: none;
  padding: 0;
  object-fit: contain;
}

.r-product-detail .c-product_img__slider--thumbnail {
  width: 100%;
  /* メイン画像下端→サムネイル上端: Figma実測 27.78px */
  margin: 28px 0 0;
}

/* サムネイル: 70px正方形の横スクロール。
   ECforce標準のSplideが各スライドに width:80px / margin-right:20px をインラインで
   書き込み、送り量も100px/枚で内部計算しているため、transformは無効化したまま
   CSSの横スクロールで実現する（!important はインラインstyleに勝つために必須）。 */
.r-product-detail .c-product_img__slider--thumbnail .c-product_img__list {
  display: flex !important;
  /* ベーステーマが flex-wrap:wrap を当てており、折り返して横スクロールしないため打ち消す */
  flex-wrap: nowrap !important;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  transform: none !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.r-product-detail .c-product_img__slider--thumbnail .c-product_img__list::-webkit-scrollbar {
  display: none;
}

.r-product-detail .c-product_img__slider--thumbnail .c-product_img__item {
  flex: 0 0 70px !important;
  width: 70px !important;
  height: 70px !important;
  margin: 0 !important;
  overflow: hidden;
  border: 1px solid transparent;
  background: var(--r-detail-surface);
  cursor: pointer;
}

.r-product-detail .c-product_img__slider--thumbnail .c-product_img__item.is-active {
  border-color: var(--r-detail-accent-dark);
}

.r-product-detail .c-product_img__slider--thumbnail .c-product_img__image {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
}

.r-product-detail .topSectionContentRight {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  /* 画像天端 y=353 に対しバッジ天端 y=357 */
  padding-top: 4px;
}

/* 種別バッジ: Figma node 13:1930 = 60x18 / radius22 / シリーズ色86% /
   Zen Kaku Gothic New Medium(500) 12px #fff / letter-spacing 0.48px */
.r-product-detail .r-product-detail__type {
  order: 0;
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  align-self: flex-start;
  height: 18px;
  margin: 0 0 16px;
  padding: 0 12px;
  border-radius: 22px;
  /* 種別ごとの色は renewal-shell.css の一覧が data-product-type で --r-type-color を渡す。
     未設定の種別はこれまで通りシリーズ色 (--r-detail-badge) で出る。 */
  background: var(--r-type-color, var(--r-detail-badge));
  color: #fff;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .04em;
}

.r-product-detail .topSectionContentRight > .productCategoryContentTitleEn._pc {
  order: 1;
}

.r-product-detail .topSectionContentRight > .productCategoryContentTitle._pc {
  order: 2;
}

.r-product-detail .topSectionContentRight > .productCategoryContentText,
.r-product-detail .topSectionContentRight > .productCategoryContentTextAnnotation {
  order: 3;
}

.r-product-detail .topSectionContentRight > .productCategoryContentSizeGroup {
  order: 4;
}

.r-product-detail .topSectionContentRight > .topSectionContentRightPriceRight {
  order: 5;
}

.r-product-detail .topSectionContentRight > .productCategoryContentUl {
  order: 6;
}

.r-product-detail .topSectionContentRight > .productCategoryContentReviewPostOuter {
  order: 7;
}

.r-product-detail .topSectionContentRight > .r-purchase-switch {
  order: 8;
}

.r-product-detail .topSectionContentRight > .r-purchase-panel {
  order: 9;
}

.r-product-detail .topSectionContentRight > .productCategoryContentSnsGroup {
  order: 10;
}

/* 英語名: Figma y=391 h=19 / Tenor Sans 24px / letter-spacing 0.96px */
.r-product-detail .productCategoryContentTitleEn {
  margin: 0;
  color: #000;
  font-family: "Tenor Sans", "Zen Kaku Gothic New", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 19px;
  letter-spacing: .04em;
}

/* 日本語名: Figma y=421 h=14 / Zen Kaku Gothic New 14px / letter-spacing 0.56px */
.r-product-detail .productCategoryContentTitle {
  margin: 11px 0 0;
  color: #000;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: .04em;
}

.r-product-detail.has-no-english-name .productCategoryContentTitle._pc {
  font-size: clamp(28px, 2.4vw, 38px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: .08em;
}

/* キャッチコピー: Figma y=458 / 16px / line-height 24px / letter-spacing 0.64px
   ※ (*1)(*2) のインライン装飾は商品管理側で設定予定のため、ベース体裁のみ適用 */
.r-product-detail .topSectionContentRight > .productCategoryContentText {
  /* Figma実測は字面top間23px。line-height:1.5 の上下ハーフレディング4pxぶんを
     差し引いて19pxにすると、字面の位置がFigmaと一致する。 */
  margin: 19px 0 0;
  color: #000;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .04em;
  text-align: left;
}

/* 注釈: Figma y=505 h=9 / 8px / #717171 / letter-spacing 0.32px */
.r-product-detail .topSectionContentRight > .productCategoryContentTextAnnotation {
  /* ベーステーマが .productCategoryContentTextAnnotation を display:none にしているため、
     Figma(y=505)に存在する注釈が表示されない。リニューアル側で明示的に表示へ戻す。 */
  display: block;
  /* 同上。キャッチコピー下端のハーフレディング4pxぶんを差し引く。 */
  margin: 3px 0 0;
  color: #717171;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 8px;
  font-weight: 400;
  line-height: 9px;
  letter-spacing: .04em;
  /* ベーステーマがSPで text-align:center を当てるため明示的に左寄せへ戻す */
  text-align: left;
}

/* 容量 + 使用期間/発送チップ行: Figma y=541-558（行高16px）
   30ml 右端 -> チップ1 左端 = 16px、チップ間 = 4px */
.r-product-detail .productCategoryContentSizeGroup {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 28px 0 0;
}

.r-product-detail .topSectionContentRightSize {
  /* gap 4px と合算して Figma の 16px になる */
  margin: 0 12px 0 0;
  color: #000;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: .04em;
}

/* チップ: h16 / 0.5px #717171 / 角丸なし（Figma node 13:1936）/ 左右6px */
.r-product-detail .r-size-chip {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  height: 16px;
  margin: 0;
  padding: 0 6px;
  border: .5px solid #717171;
  border-radius: 0;
  color: #717171;
  background: transparent;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* 悩みタグ: Figma node 13:1941 = h22 / 0.5px #000 / radius23 / 12px #000 / 左右13px */
.r-product-detail .productCategoryContentUl {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  margin: 25px 0 0;
  padding: 0;
  list-style: none;
}

.r-product-detail .productCategoryContentList {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  min-height: 0;
  height: 22px;
  margin: 0;
  padding: 0 13px;
  border: .5px solid #000;
  border-radius: 23px;
  /* Figma(13:1941)は枠線のみで塗りなし */
  background: transparent;
}

/* Figma(13:1940)の悩みタグは rounded-rectangle + text のみでアイコンなし。
   そのためサムネイル画像は出力せず、左マージンも 0 にして
   チップの padding: 0 13px を左右対称に保つ */
.r-product-detail .productCategoryContentListText {
  margin: 0;
  color: #000;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* レビュー行 y=632 h=29、区切り線 y=688（レビュー行下端から27px） */
.r-product-detail .productCategoryContentReviewPostOuter {
  display: flex;
  align-items: center;
  /* Figma実測: ボタン左端は右カラム左端から228px（右端揃えではない）。
     星95px + 間隔10px + 件数27px = 132px の直後に 96px 空けて 228px になる。 */
  justify-content: flex-start;
  gap: 96px;
  min-height: 29px;
  margin: 27px 0 0;
  padding-bottom: 27px;
  border-bottom: 1px solid var(--r-detail-line);
}

/* 件数テキスト: Figma 12px #000 / letter-spacing 0.48px。
   星ブロックは行の上端から8px の位置（行高29px）なので flex-start + margin-top で置く。 */
.r-product-detail .reviewAverageStar {
  display: flex;
  align-items: center;
  align-self: flex-start;
  /* 星ブロック(95px) と 件数テキストの間隔はFigma実測10px */
  gap: 10px;
  margin: 8px 0 0;
  color: #000;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 15px;
  letter-spacing: .04em;
}

/* 星: 15px x 5、ピッチ20px（15px字送り + letter-spacing 5px） */
.r-product-detail .reviewAverageStar .star5Rating {
  font-size: 15px;
  line-height: 15px;
  letter-spacing: 5px;
  /* 5文字ぶんの字送りで末尾に5px余るため打ち消し、Figma実測の95pxちょうどにする */
  margin-right: -5px;
}

/* 星の塗り色: Figma実測 #4bbdc3（インライン<style>の #3F98D8 を上書き）。
   空の星の色はFigmaに現れないため既存の #F7F7F7 のまま。 */
.r-product-detail .reviewAverageStar .star5Rating::after {
  color: #4bbdc3;
}

/* サムネイルの左右矢印: Figma実測 幅3.62px×高さ14.49px の細いシェブロン、
   サムネイル行と垂直中央揃え。Splideが出力済みのボタンを可視化して使う。 */
.r-product-detail .c-product_img__slider--thumbnail {
  position: relative;
  padding: 0 24px;
}

/* Splideが出力する .splide__arrows がベーステーマで display:none のため解除 */
.r-product-detail .c-product_img__slider--thumbnail .splide__arrows {
  display: block;
}

/* 矢印はメイン画像の左右端に揃える（Figma実測: SP 画像18..373 / 矢印18・373、
   PCも画像461..891に対し矢印464.6・888.6でほぼ端）。
   ボタン自体は24pxのタップ領域を保ったまま、矢印だけを外側の端に寄せる。 */
.r-product-detail .c-product_img__slider--thumbnail .splide__arrow {
  position: absolute;
  top: 35px;
  display: flex;
  width: 24px;
  height: 24px;
  align-items: center;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: 0;
  opacity: 1;
  background: transparent;
  cursor: pointer;
}

.r-product-detail .c-product_img__slider--thumbnail .splide__arrow svg {
  display: none;
}

/* 矢印の形はFigmaのSVG(node 13:1911)をそのまま使用。
   path: M0.5 0.5 L4.1237 7.7473 L0.5 14.9945 / stroke #C9C9C9 / 幅1px / linecap round */
.r-product-detail .c-product_img__slider--thumbnail .splide__arrow::before {
  content: "";
  width: 4.68px;
  height: 15.49px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4.68272' height='15.4946' viewBox='0 0 4.68272 15.4946' fill='none'%3E%3Cpath d='M0.50011 0.50011L4.1237 7.7473L0.50011 14.9945' stroke='%23C9C9C9' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 4.68px 15.49px;
}

.r-product-detail .c-product_img__slider--thumbnail .splide__arrow--prev {
  left: 0;
  justify-content: flex-start;
}

/* 左向きは同じ形を左右反転 */
.r-product-detail .c-product_img__slider--thumbnail .splide__arrow--prev::before {
  transform: scaleX(-1);
}

.r-product-detail .c-product_img__slider--thumbnail .splide__arrow--next {
  right: 0;
  justify-content: flex-end;
}

/* レビューを書く: Figma 129x29 / bg rgba(75,189,195,.05) / 1px #4bbdc3 / radius3
   アイコン9x9はボタン左端から14px、ラベルは左端から30px
   → padding-left 13px(+border1px=14px) + アイコン9px + gap7px = 30px */
.r-product-detail .productCategoryContentReviewPost {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  width: 129px;
  min-width: 129px;
  height: 29px;
  margin: 0;
  padding: 0 0 0 13px;
  border: 1px solid #4bbdc3;
  border-radius: 3px;
  color: #4bbdc3;
  background: rgba(75, 189, 195, .05);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .04em;
  text-decoration: none;
}

/* 先頭アイコン 9x9。mask で currentColor 追従させ、hover 反転時も見えるようにする */
.r-product-detail .productCategoryContentReviewPost::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M6.15.95 8.05 2.85 3 7.9.6 8.4 1.1 6z' fill='none' stroke='%23000' stroke-width='.8' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M6.15.95 8.05 2.85 3 7.9.6 8.4 1.1 6z' fill='none' stroke='%23000' stroke-width='.8' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.r-product-detail .productCategoryContentReviewPost p {
  margin: 0;
}

/* Figmaに hover 指定は無い。Figma確定色 #4bbdc3 の反転のみ */
.r-product-detail .productCategoryContentReviewPost:hover,
.r-product-detail .productCategoryContentReviewPost:focus-visible {
  color: #fff;
  background: #4bbdc3;
}

/* ============================================================================
   購入エリア（Figma node 1:2917 定期便 476x295 / node 1:2972 通常購入 476x208）
   パネル左上を原点にした Figma 実測値をそのまま px で置く。右カラムは
   grid-template-columns: 430fr 476fr（コンテンツ1000px）なので実幅 ≒ 476px。

   アイコンの供給方法:
   ・ラジオ○（radio-on/off）とチェック（subs-check）は「is-active クラス」「li の
     ::before」という CSS の状態から出し分ける要素で、CSS からは
     {{ theme_file_root_path }} が解決できない。<img> にすると出し分けのために
     product.js からカート周りの DOM を触る必要が出るため、data URI で埋め込む。
   ・♡（favorite-on/off）は元から <img> で Liquid 側が状態を出し分けているので、
     指示どおり src だけ SVG に差し替える。
   ============================================================================ */

/* 購入タブ: 行の高さ 41px。非選択タブはパネル右 50.84%〜100%（≒234px）なので、
   選択側 50.84% / 非選択側 49.16% の固定幅にする（選択が入れ替わっても幅は動かない）。 */
.r-product-detail .r-purchase-switch {
  display: flex;
  gap: 0;
  margin-top: 28px;
}

.r-product-detail .r-purchase-switch__item {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  flex: 0 0 50.84%;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 41px;
  /* パネルの上罫線を選択中タブの下辺で隠すため 1px ぶん食い込ませる */
  margin: 0 0 -1px;
  padding: 0 8px;
  border: 1px solid var(--r-detail-panel-line);
  border-radius: 0;
  color: #b1b1b1;
  background: #f7f7f7;
  font-family: "Zen Kaku Gothic New", sans-serif;
  text-align: center;
  text-decoration: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

.r-product-detail .r-purchase-switch__item + .r-purchase-switch__item {
  flex: 0 0 49.16%;
  border-left: 0;
}

/* ラジオ○ 14x14 = assets/icons/radio-off.svg（circle r=6.75 stroke #898989 0.5） */
.r-product-detail .r-purchase-switch__item::before {
  content: "";
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Ccircle cx='7' cy='7' r='6.75' stroke='%23898989' stroke-width='.5'/%3E%3C/svg%3E") no-repeat center / 14px 14px;
  box-shadow: none;
}

/* 選択中 = assets/icons/radio-on.svg（circle r=6.5 stroke #4BBDC3 + circle r=4 fill） */
.r-product-detail .r-purchase-switch__item.is-active::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Ccircle cx='7' cy='7' r='6.5' stroke='%234BBDC3'/%3E%3Ccircle cx='7' cy='7' r='4' fill='%234BBDC3'/%3E%3C/svg%3E");
}

.r-product-detail .r-purchase-switch__item.is-active {
  border-bottom-color: #fff;
  color: #000;
  background: #fff;
}

.r-product-detail .r-purchase-switch__item:hover,
.r-product-detail .r-purchase-switch__item:focus-visible {
  color: #000;
}

/* ラベル: Zen Kaku Gothic New 14px / letter-spacing 0.56px = .04em */
.r-product-detail .r-purchase-switch__label {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .04em;
}

/* パネル: 枠線 1px #c1c1c1・背景 #fff。タブ行と接するので margin-top は 0。
   左右 24px + 枠線 1px で、内容の左端がパネル左端から 25px（Figma実測）になる。
   上 19px = 特典ボックス天端 60px − タブ行 41px。下 22px = 295px − ボタン下端 273px。 */
.r-product-detail .r-purchase-panel {
  box-sizing: border-box;
  margin-top: 0;
  padding: 19px 24px 22px;
  border: 1px solid var(--r-detail-panel-line);
  background: #fff;
}

/* 通常購入パネルは Figma node 1:2972 = 476x208。定期便パネルとは余白が異なる。
   実測: タブ下端41 → 価格上端67（26px）／価格下端108 → ボタン上端134（25px）／
   ボタン下端179 → パネル下端208（28px） */
.r-product-detail .r-purchase-panel--single {
  padding-top: 26px;
  padding-bottom: 28px;
}

/* 特典ボックス: 上60px / 左25px / 右26px / 高さ81px / #f5f5f5 / radius 5px。
   行送り 24px = line-height 17px + row-gap 7px。上下 20px で 20+17+7+17+20 = 81px。
   Figma の左列チェック x=94 / 右列チェック x=261 は、内容幅ぶんの2列を中央寄せした
   配置なので max-content 2列 + justify-content: center で再現する。列間 30px は
   Figma の 94 / 261 と実測の列幅（136.9px / 119.8px）から逆算した値。
   5項目め（継続割引）だけ2列ぶちぬきなので、その場合は3行目ぶん高さが伸びる。 */
.r-product-detail .r-subs-benefits {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  min-height: 81px;
  align-content: center;
  justify-content: center;
  column-gap: 30px;
  row-gap: 7px;
  margin: 0 0 15px;
  padding: 20px 10px;
  border-radius: 5px;
  list-style: none;
  background: #f5f5f5;
}

/* 本文: Zen Kaku Gothic New 12px #000 / letter-spacing 0.48px = .04em。
   padding-left 20px = チェック x=94 → テキスト x=114 の差。 */
.r-product-detail .r-subs-benefits > li {
  position: relative;
  box-sizing: border-box;
  margin: 0;
  padding-left: 20px;
  color: #000;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
  letter-spacing: .04em;
  list-style: none;
}

.r-product-detail .r-subs-benefits > li:nth-child(5) {
  grid-column: 1 / -1;
}

/* チェック 12.35x12.5 = assets/icons/subs-check.svg（stroke #4BBDC3 の四角＋チェック） */
.r-product-detail .r-subs-benefits > li::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 12.35px;
  height: 12.5px;
  border: 0;
  transform: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12.3528' height='12.5' viewBox='0 0 12.3528 12.5' fill='none'%3E%3Cpath d='M10.25 3.75V2.25H0.5V12H10.25V7.875V7.125' stroke='%234BBDC3' stroke-linecap='round'/%3E%3Cpath d='M1.25 7.06851L4.78426 10.6028L11.8528 3.53426' stroke='%234BBDC3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 12.35px 12.5px;
}

/* --------------------------------------------------------------------------
   カート行（2段組み）
   1段目: ¥価格 (税込) / ポイント（左）＋ 数量ステッパー（右）
   2段目: カートボタン 383x46（左）＋ ♡ 23x19.75（右）

   Figma の実測 x 座標（パネル 476px 基準）:
     内容左端 25 / 価格ブロック 28 / ステッパー 371〜445
     カートボタン 25〜408 / ♡ 432〜455 / パネル右端 476
   内容領域は 25〜451 なので、♡ の右端 455 に届くようグループを 4px はみ出させ、
   右に ♡ ぶんの 47px（23px + 余白24px）を確保してボタン幅を 383px にする。
   -------------------------------------------------------------------------- */
.r-product-detail .productCategoryContentActionGroup,
.r-product-detail .productCategoryContentActionGroup.gray {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: calc(100% + 4px);
  margin: 0;
  padding: 0 47px 0 0;
  border: 0;
}

.r-product-detail .c-product_info__form {
  width: 100%;
  margin: 0;
}

/* 1段目。ステッパー右端 445px = 内容右端 408px + 37px なので、この行だけ右に伸ばす。 */
.r-product-detail .r-buy-row--top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  width: calc(100% + 37px);
  margin: 0;
}

/* 価格ブロックだけ Figma では x=28（内容左端 25px + 3px）にある */
.r-product-detail .r-buy-price {
  min-width: 0;
  padding-left: 3px;
}

/* 「初回限定」/テラスキン限定「通常価格」バッジ + 取り消し線付き旧価格。
   定期便パネルのみ表示。Figma node 221:3969（SP, 4cBcvja07wczZHKBNcfmms）実測。
   クライアント指示によりPCもSPと同サイズで表示する（メディアクエリでの分岐なし）。
   バッジ 58x15 / radius 2px / bg #4bbdc3 / 白文字10px。
   価格 Tenor Sans 18px #b1b1b1 に取り消し線。(税込) 8px #b1b1b1。
   バッジ右端→価格左端 10px（Figma: バッジ右91 → 価格左101）。
   価格→(税込) 1px（実機確認の上、Figmaより詰めてクライアント指示）。
   この行の下端→既存価格(topSectionContentRightPrice)上端 7px。
   取り消し線は水平ではなく斜め（Figma Vector11 実データ: viewBox 63x15,
   path M0.5,14.5 L62.5,0.5 = 左下→右上、色 #c1c1c1）。SVGをそのまま
   背景画像として埋め込み、要素の実幅に伸縮させる（詳細は下のルール参照）。 */
.r-product-detail .r-first-time-price {
  display: flex;
  align-items: center;
  height: 15px;
  margin: 0 0 7px;
}

.r-product-detail .r-first-time-price__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 58px;
  height: 15px;
  border-radius: 2px;
  background: var(--r-detail-common);
  color: #fff;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .04em;
  white-space: nowrap;
}

.r-product-detail .r-first-time-price__yen {
  margin-left: 10px;
  color: #b1b1b1;
  font-family: "Tenor Sans", "Zen Kaku Gothic New", sans-serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: .04em;
}

.r-product-detail .r-first-time-price__yen s {
  position: relative;
  display: inline-block;
  line-height: 1.2;
  text-decoration: none;
}

.r-product-detail .r-first-time-price__yen s::after {
  /* Figma Vector11 のSVGパスをそのまま背景画像として埋め込む（向きの取り違え防止）。
     viewBox 0 0 63 15 / path M0.5 14.5 L62.5 0.5 = 左下(0.5,14.5)→右上(62.5,0.5)。
     preserveAspectRatio="none" + background-size:100% 100% で要素の実幅に追従させる。 */
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 63 15' preserveAspectRatio='none'%3E%3Cpath d='M0.5 14.5L62.5 0.5' stroke='%23c1c1c1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

.r-product-detail .r-first-time-price__tax {
  margin-left: 1px;
  color: #b1b1b1;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 8px;
  font-weight: 400;
  letter-spacing: .04em;
}

/* ¥7,700 = Tenor Sans 24px #000 / letter-spacing 0.96px = .04em
   (税込)  = Zen Kaku Gothic New 12px #000 / letter-spacing 0.48px = .04em
   2つは同じ <p> のインラインなのでベースラインが自動で揃う（Figma も 156 / 164 の
   8px ずれ = ベースライン合わせ）。 */
.r-product-detail .topSectionContentRightPrice {
  /* Figma の価格テキストフレームは 156〜180 の 24px。フォールバックフォントだと
     行ボックスが 27px まで伸びて以降の位置が全部ずれるので高さを固定する。 */
  height: 24px;
  margin: 0;
  /* インラインstyleのSP用メディアクエリ（show.html.liquid内 .topSectionContentRightPrice）に
     text-align:right が残っており、.r-buy-price の幅が「初回限定」行の追加で広がったことで
     価格が右寄せされ左に不要な余白ができていた。ここで左揃えに戻す（詳細度で上書き）。 */
  text-align: left;
  color: #000;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: .04em;
}

.r-product-detail .topSectionContentRightPriceYen {
  /* Figma実測: 価格右端108.88 → (税込)左端114 = 5px */
  margin-right: 5px;
  color: #000;
  font-family: "Tenor Sans", "Zen Kaku Gothic New", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: .04em;
}

/* 70ポイント獲得予定: Zen Kaku Gothic New 12px #717171。価格下端 180 → 天端 187 = 7px */
.r-product-detail .topSectionContentRightPoint {
  margin: 7px 0 0;
  color: #717171;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
  letter-spacing: .04em;
}

/* 数量ステッパー: 全体 74x22（371〜445 / top 174）。
   margin-top 18px = 価格天端 156 → ステッパー天端 174。 */
.r-product-detail .c-product_info__form__quantity__wrap {
  display: block;
  flex: 0 0 auto !important;
  width: 74px;
  margin: 18px 0 0;
}

/* 定期便パネルは初回限定価格行の分、価格ブロックの天端が22px下がったため、
   ステッパーの margin-top も補正する。Figma node 221:3969 実測:
   バッジ天端1109 → ステッパー天端1142 = 33px。通常購入パネルは対象外（18pxのまま）。 */
.r-product-detail .r-purchase-panel--subscription .c-product_info__form__quantity__wrap {
  margin-top: 33px;
}

.r-product-detail .c-order_quantity {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 74px;
  min-width: 74px !important;
  height: 22px;
  margin: 0;
  border: 0;
  border-radius: 2px;
  color: #000 !important;
  font-family: "Noto Sans JP", "Zen Kaku Gothic New", sans-serif;
}

/* 中央の数値ボックス: 白 + 0.5px #c1c1c1 / Noto Sans JP Regular 12px #000 */
.r-product-detail .c-order_quantity__input {
  box-sizing: border-box;
  width: 100%;
  height: 22px !important;
  min-height: 0;
  margin: 0;
  padding: 0 24px !important;
  border: .5px solid var(--r-detail-panel-line) !important;
  border-radius: 0;
  color: #000 !important;
  background: #fff !important;
  font-family: "Noto Sans JP", "Zen Kaku Gothic New", sans-serif;
  font-size: 12px !important;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: .04em;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.r-product-detail .c-order_quantity__input::-webkit-outer-spin-button,
.r-product-detail .c-order_quantity__input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}

/* ± ボタン: #f7f7f7 + 0.5px #c1c1c1 / Noto Sans JP Regular 14px #717171 / 外側だけ角丸2px */
.r-product-detail .c-order_quantity > button,
.r-product-detail #btn-minus1,
.r-product-detail #btn-plus1,
.r-product-detail #btn-minus2,
.r-product-detail #btn-plus2 {
  position: absolute;
  top: 0;
  bottom: 0;
  box-sizing: border-box;
  display: flex !important;
  width: 24px !important;
  height: 22px !important;
  min-width: 0;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: .5px solid var(--r-detail-panel-line) !important;
  color: #717171 !important;
  background: #f7f7f7 !important;
  font-family: "Noto Sans JP", "Zen Kaku Gothic New", sans-serif;
  font-size: 14px !important;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .04em;
  cursor: pointer;
}

.r-product-detail #btn-minus1,
.r-product-detail #btn-minus2 {
  left: 0;
  border-radius: 2px 0 0 2px;
}

.r-product-detail #btn-plus1,
.r-product-detail #btn-plus2 {
  right: 0;
  border-radius: 0 2px 2px 0;
}

/* 2段目。ポイント下端 204 → ボタン天端 227 = 23px */
.r-product-detail .r-buy-row--bottom {
  margin: 23px 0 0;
}

.r-product-detail .c-product_info__form__buttons {
  width: 100%;
}

/* カートボタン: 383x46 / radius 3px / Figma のグラデーション /
   ラベルは Noto Sans JP Medium 18px #fff / letter-spacing 0.72px = .04em */
.r-product-detail .topSectionContentRightBottomBtn,
.r-product-detail .topSectionContentRightBottomBtn._hydra,
.r-product-detail .topSectionContentRightBottomBtn._nutrient,
.r-product-detail .topSectionContentRightBottomBtn._glow,
.r-product-detail .c-product_info__form__submit {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  min-width: 0;
  height: 46px !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 3px;
  color: #fff !important;
  background: var(--r-detail-cart-gradient);
  font-family: "Noto Sans JP", "Zen Kaku Gothic New", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .04em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .15s ease;
}

/* カートアイコン: 既存のアイコンフォント（bundle.css の .u-icon--cart）を流用 */
.r-product-detail .r-buy-cart-icon {
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
}

.r-product-detail .r-buy-cart-label {
  display: inline-block;
}

.r-product-detail .topSectionContentRightBottomBtn:hover,
.r-product-detail .topSectionContentRightBottomBtn:focus-visible,
.r-product-detail .c-product_info__form__submit:hover,
.r-product-detail .c-product_info__form__submit:focus-visible {
  color: #fff !important;
  background: var(--r-detail-cart-gradient-hover);
}

.r-product-detail .topSectionContentRightBottomBtn:active,
.r-product-detail .c-product_info__form__submit:active {
  transform: translateY(1px);
}

/* ♡: 23x19.75 / x=432〜455 / カートボタン（227〜273）と天地中央。
   アクショングループの右パディング 47px の外側に絶対配置する。 */
.r-product-detail .c-product_info__favorite {
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  width: 23px;
  height: 46px;
  margin: 0;
  place-items: center;
}

.r-product-detail .c-product_info__favorite__btn,
.r-product-detail .c-product_info__favorite__btn._two {
  display: grid;
  width: 23px;
  height: 23px;
  margin: 0;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: opacity .2s ease;
}

.r-product-detail .c-product_info__favorite__btn:hover,
.r-product-detail .c-product_info__favorite__btn:focus-visible {
  background: transparent;
  opacity: .7;
}

/* favorite-on.svg = 23x19.7457（塗り #F1686B / opacity .82）
   favorite-off.svg = 24x20.9528（輪郭 stroke #717171）。Figma の 23x19.75 に揃える。 */
.r-product-detail .c-product_info__favorite__btn img {
  width: 23px;
  height: 19.75px;
  object-fit: contain;
}

.r-product-detail .productCategoryContentSnsGroup {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 24px 0 0;
}

.r-product-detail .productCategoryContentSnsGroupLink {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--r-detail-line);
}

.r-product-detail .productCategoryContentSnsGroupList {
  width: 18px;
  margin: 0;
}

.r-product-detail .productDetailSection,
.r-product-detail .howtouseSection,
.r-product-detail .r-steps-section,
.r-product-detail .faqSection,
.r-product-detail .specSection,
.r-product-detail .reviewSection,
/* .r-detail-history はこの共通規則から外してある。
   帯の padding は renewal-shell.css の共通ルールが持っており、
   ここに含めると padding:96px がそれを打ち消してしまうため。 */
.r-product-detail .r-detail-concerns {
  box-sizing: border-box;
  width: min(var(--r-detail-content), calc(100% - 64px));
  max-width: var(--r-detail-content);
  margin: 0 auto;
  padding: 96px 0;
}

/* Figma 13:1879: 製品詳細〜レビューは 1124..4002 の連続した #f4f9fc 帯。
   セクション間の隙間は padding で作り、margin は使わない（帯が途切れるため）。 */
.r-product-detail .productDetailSection,
.r-product-detail .howtouseSection,
.r-product-detail .r-steps-section,
.r-product-detail .reviewSection {
  background: var(--r-detail-section-bg);
}

/* 有用成分: チャートカード下端2192 → 見出しink2265 = 73px
   （見出し行box27px・ink16.45px なので padding は 73-5.3 = 67.7px）
   ※ .productDetailSection の padding 指定が後方にあり同詳細度では負けるため、
     クラスを2つ重ねて詳細度を上げる。 */
.r-product-detail .productDetailSection.productDetailSection--ingredients {
  padding: 68px 0 0;
}

/* 使用方法: 効果アイコンのラベルink下端2687 → 見出しink2783 = 96px
   行boxの差（ラベル下3.5px + 見出し上5.3px = 8.8px）を差し引いて padding 87px */
.r-product-detail .howtouseSection {
  padding: 87px 0 0;
}

/* ご使用順番: 使用方法の下端3007 → カード上端3070 = 63px */
.r-product-detail .r-steps-section {
  padding: 63px 0 0;
}

/* レビュー: STEPカード下端3598 → 見出しink3655 = 57px / 帯の終端4002 */
.r-product-detail .reviewSection {
  padding: 52px 0 27px;
}

/* 2026-09-17: 製品詳細／使い方／スペックが全て空の商品ではページ内ナビが消え、
   レビューだけが残る。その場合は帯幅そのまま(1000px)ではなく、レビューカルーセル
   自身の幅(870px, r-review-carousel)に合わせて絞り、中央寄せの単独ブロックに見せる。
   ラッパー div は show.html.liquid 側で {% section %} を囲むために追加したもの。 */
.r-product-detail .r-detail-review--centered .reviewSection {
  max-width: 870px;
  margin: 0 auto;
}

/* Figma 13:1879 実測: 背景 #f4f9fc、上端→見出しink 43px（行box差5px→padding 38px） */
.r-product-detail .productDetailSection {
  padding: 38px 0 0;
  background: var(--r-detail-section-bg);
}

/* Figma 13:1878: 製品詳細／有用成分／使用方法／レビュー／よくある質問／スペック は
   すべて同じ見出し（中央・18px・両側に17x2pxの短線 #d3d6d9・文字との間13px） */
.r-product-detail .productDetailTitle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--r-detail-ink);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  /* Figma 実測: 字送りが font-size より 0.04em ぶん広い。
     スペック69 / 有用成分73 / 肌悩みから探す129 / 最近見た製品109（ink 幅）が
     18px + .04em の canvas 実測と 0.5px 以内で一致する。 */
  letter-spacing: .04em;
  text-align: center;
}

.r-product-detail .productDetailTitle::before,
.r-product-detail .productDetailTitle::after {
  content: "";
  display: block;
  flex: 0 0 17px;
  height: 2px;
  background: #d3d6d9;
}

/* Figma実測: キャッチ 24px / 行送り37px / 中央、見出しから38px
   ※マークアップを .r-detail-catch に変えたので旧クラスと両方を対象にする */
.r-product-detail .productDetailSection > .productCategoryContentText,
.r-product-detail .r-detail-catch {
  margin: 38px auto 0;
  color: var(--r-detail-ink);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 24px;
  line-height: 37px;
  letter-spacing: 0;
  text-align: center;
}

/* 注記の (*1) は sup。既定の vertical-align:super は行ボックスを押し広げてしまい、
   行送りが 37px → 44px に膨らむ。行ボックスに影響しない持ち上げ方に変える。 */
/* (*1)(*2) の位置。Figma では上付きではなく、本文の「下端に揃う」小さい文字。
   canvas の ink 計測（Zen Kaku Gothic New）で決めた値:
     本文24px  … ascent 20.18 / descent 1.75 / ink高 21.94（Figma実測 22）
     (*1)17px … ascent 13.38 / descent 2.60 / ink高 15.98（Figma実測 16）
   ink下端を揃えるには descent の差 2.60-1.75=0.85px だけ持ち上げる。
   既定の vertical-align:super は位置も行ボックスも崩すので使わない。 */
.r-product-detail .r-detail-catch sup {
  position: relative;
  top: -.85px;
  font-size: 17px;
  line-height: 0;
  vertical-align: baseline;
}

/* Figma実測: 注釈 12px / キャッチから8px / 中央 */
.r-product-detail .productDetailSection > .productCategoryContentTextAnnotation,
.r-product-detail .r-detail-catch__note {
  margin: 8px 0 0;
  color: var(--r-detail-muted);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

/* ---- こんなあなたにおすすめ（2026-09-10 デザイン変更・全カテゴリ共通 Figma PC node 182:6164） ----
   吹き出し型（角丸2px矩形＋下向きの尻尾）・塗りは固定 #4BBDC3（カテゴリ非依存）
   本体232x24 + 尻尾3.7275px、白18px・letter-spacing .04em・Zen Kaku Gothic New Medium
   ✓リスト: ブロック中央寄せ・各行は左揃え / 行送り30px / 16px
   罫線: 4px塗り+2px空きの点線を 2px 厚で下端に敷く（#d3d6d9）
   チェックボックス: 13x12 のティール ☑ */
.r-product-detail .r-recommend {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 68px 0 0;
}

.r-product-detail .r-recommend__pill {
  position: relative;
  display: flex;
  box-sizing: border-box;
  width: 232px;
  height: 24px;
  align-items: center;
  justify-content: center;
  margin: 0 0 3.7275px;
  padding: 0 0 0 .04em;
  border-radius: 2px;
  background: var(--r-detail-common);
  color: #fff;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .04em;
}

/* 尻尾（Figma node 182:6165 実測: 幅7.458px・高さ3.7275px・中央下） */
.r-product-detail .r-recommend__pill::after {
  content: "";
  position: absolute;
  bottom: -3.7275px;
  left: 50%;
  width: 7.458px;
  height: 3.7275px;
  transform: translateX(-50%);
  background: var(--r-detail-common);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.r-product-detail .r-recommend__list {
  margin: 32px 0 0;
  color: var(--r-detail-ink);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: .025em;
  text-align: left;
}

.r-product-detail .r-recommend__list ul,
.r-product-detail .r-recommend__list ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.r-product-detail .r-recommend__list li,
.r-product-detail .r-recommend__list > p {
  display: flex;
  align-items: flex-start;
  margin: 0 0 7px;
  padding: 0 0 3px;
  background-image: repeating-linear-gradient(to right, #d3d6d9 0 4px, transparent 4px 6px);
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: 100% 2px;
}

.r-product-detail .r-recommend__list li:last-child,
.r-product-detail .r-recommend__list > p:last-child {
  margin-bottom: 0;
}

/* チェックは購入エリアの定期便メリット（.r-subs-benefits）と同じ
   assets/icons/subs-check.svg。CSS からは {{ theme_file_root_path }} が
   解決できないため、そちらと同じく data URI で埋め込む。
   サイズは Figma 実測どおり 12.35x12.5（PC・SP 共通）、文字との間隔9px。 */
.r-product-detail .r-recommend__list li::before,
.r-product-detail .r-recommend__list > p::before {
  content: "";
  display: block;
  width: 12.35px;
  height: 12.5px;
  flex: none;
  margin: 4px 9px 0 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12.3528' height='12.5' viewBox='0 0 12.3528 12.5' fill='none'%3E%3Cpath d='M10.25 3.75V2.25H0.5V12H10.25V7.875V7.125' stroke='%234BBDC3' stroke-linecap='round'/%3E%3Cpath d='M1.25 7.06851L4.78426 10.6028L11.8528 3.53426' stroke='%234BBDC3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 12.35px 12.5px;
}

.r-product-detail .productDetailContentProductTextContentBottomImg {
  width: min(360px, 70%);
  height: auto;
  margin: 42px auto 0;
}

/* Figma 59:7564 実測: 白カード 909x559（x506-1414 / y1634-2192）
   ✓リスト下端 1574 → カード上端 1634 = 60px
   内側: 左右63px / 上61px / 下45px、2列313px・列間156px
   図は行内で上下中央（レーダー366x316 / ポジション317x230）
   図の下端2010 → 説明文の行box上端2051.5 = 41.5px、本文16px・行送り24px */
.r-product-detail .productDetailContentMiddle {
  display: grid;
  box-sizing: border-box;
  width: 909px;
  max-width: 100%;
  grid-template-columns: repeat(2, 313px);
  justify-content: center;
  gap: 156px;
  /* Figma実測: ✓リスト最終行の box 下端(445) → カード上端(510) = 65px */
  margin: 65px auto 0;
  padding: 61px 63px 45px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(32, 40, 42, .06);
}

/* 図は列幅(313px)より広いのではみ出させる。Figmaでも列の外へ出ている */
.r-product-detail .r-chart {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

/* 商品別チャートは @2x のPNGを同梱しているので、実寸の半分で表示する。
   その半分の値は商品ごとに違う（象限図だけ glow-cleansing01 が291px）ため、
   Liquid 側が img の style で --chart-w を渡す。渡らなければ従来どおり実寸（auto）。
   SP は下のメディアクエリが width:100% で上書きする（--chart-w は無視される）。 */
.r-product-detail .productDetailContentChartImg,
.r-product-detail .productDetailContentPositionImg {
  display: block;
  width: var(--chart-w, auto);
  max-width: none;
  height: auto;
  margin: 0 auto;
}

/* Figma実測（カード上端1634・内側パディング61px を基準にした列内オフセット）
     1列目 レーダー: 図 y1695（オフセット0）→ 説明文 box y2051.5（図下端から41.5px）
     2列目 ポジション: 図 y1734（オフセット39px）→ 説明文 box y2051.5（図下端から88.5px）
   2枚は高さが違うが、説明文の頭は両列で揃う。

   2026-09-04: クライアント提出の商品別画像に差し替え、表示サイズが
   レーダー 366x316 → 373x324 / ポジション 317x230 → 339x292 に変わった。
   Figmaの意図（図は行内で上下中央・説明文の頭は両列で揃う）を保つよう再計算した:
     レーダー   上0 → 下324 → 説明文 box 上 366（図下端から42px・据え置き）
     ポジション 上(324-292)/2=16 → 下308 → 説明文 box 上 366（図下端から58px）
   高さは17商品すべて同じ（レーダー324 / ポジション292）なので、この2値で全商品に効く。
   幅だけ glow-cleansing01 が291pxと狭いが、margin:0 auto で列内中央に置くため影響しない。 */
.r-product-detail .r-chart:first-child .productDetailContentChartImg {
  margin-top: 0;
}

.r-product-detail .r-chart:last-child .productDetailContentPositionImg {
  margin-top: 16px;
}

.r-product-detail .r-chart__note {
  margin: 42px 0 0;
  color: var(--r-detail-ink);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
}

.r-product-detail .r-chart__note sup {
  font-size: 11px;
  line-height: 0;
  vertical-align: super;
}

/* 2026-09-10指示: 脚注定義行はr-detail-catch__noteと同じ見た目（グレー・小さめ） */
.r-product-detail .r-chart__note-foot {
  margin: 8px 0 0;
  color: var(--r-detail-muted);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 12px;
  line-height: 1.5;
}

/* 2枚目の図は短いぶん、説明文の頭を1枚目と揃える。
   1枚目 324+42=366 / 2枚目 16+292+58=366 でぴったり合う
   （旧値 316+42=358 と 39+230+88.5=357.5 は0.5pxずれていた） */
.r-product-detail .r-chart:last-child .r-chart__note {
  margin-top: 58px;
}

/* Figma実測: 見出しink2282 → 成分名ink2344 = 62px（行box差を引いて margin 54px） */
.r-product-detail .productDetailContentFeaturesGroup {
  margin-top: 54px;
}

/* 3列×249px / 列間39px / 合計825px を1000pxカラムの中央に置く */
.r-product-detail .productDetailContentFeaturesUl {
  display: grid;
  box-sizing: border-box;
  width: 825px;
  max-width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 39px;
  margin: 0 auto;
  padding: 0;
}

.r-product-detail .productDetailContentFeaturesList {
  margin: 0;
  padding: 0;
  background: none;
}

/* 成分名: Figma実測のグリフ送りは約17.5px（「カプセル化されたヒアルロン酸」14文字が
   ink245pxで1行に収まる）。18px/送り18 だと 252px で列幅249pxを超えて2行になるため、
   17px + letter-spacing .5px にして送りを17.5pxに合わせる。 */
.r-product-detail .productDetailContentFeaturesListTitle {
  margin: 0;
  color: var(--r-detail-ink);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 17px;
  /* Figma のink量から Regular(400)。500 だとインク量が約35%多く明らかに太い
     （canvas実測: Figma 53398 / w400 54493 / w500 73125） */
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .5px;
}

/* 成分名ink下端2360 → 本文ink上端2395 = 35px、本文16px・行送り24px（実測）
   hanging-punctuation: Figma は日本語の句読点ぶら下げを行っており、
   「肌に潤いとハリ・弾力を与えます。」16文字(256px)を列幅249pxに収めている。
   Chrome は未対応のため句点だけが次行に落ちるが、対応ブラウザでは Figma と揃う。 */
.r-product-detail .productDetailContentFeaturesListText {
  margin: 23px 0 0;
  color: var(--r-detail-ink);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
  hanging-punctuation: allow-end;
}

/* 本文中の (*1) は Figma実測で ink13px（本文ink15px）＝14px相当。
   キャッチと同じく上付きにせず、下端を本文に揃える。 */
.r-product-detail .productDetailContentFeaturesListText sup {
  position: relative;
  top: -.4px;
  font-size: 14px;
  line-height: 0;
  vertical-align: baseline;
}

/* 注釈は該当する成分の列の中に、左寄せで置く（Figma実測）。
   2列目の本文ink下端2455 → 注釈ink2464 = 9px */
/* PC は該当成分の列の中だけに出す */
.r-product-detail .productDetailContentFeaturesNote.is-after {
  display: none;
}

.r-product-detail .productDetailContentFeaturesNote {
  margin: 0;
  color: var(--r-detail-muted);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: left;
}

.r-product-detail .productDetailContentFeaturesNote.is-inline {
  margin-top: 5px;
}

.r-product-detail .productDetailContentFeaturesImgBottom {
  width: min(920px, 100%);
  margin: 72px auto 0;
}

.r-product-detail .productDetailContentFeaturesBottom {
  max-width: 760px;
  margin: 64px auto 0;
  text-align: center;
}

.r-product-detail .productDetailContentFeaturesBottomTitle {
  margin: 0;
  color: var(--r-detail-ink);
  font-size: 21px;
  line-height: 1.8;
}

.r-product-detail .productDetailContentFeaturesBottomText {
  margin: 24px 0 0;
  color: var(--r-detail-muted);
  font-size: 14px;
  line-height: 2;
}

.r-product-detail .howtouseTitle,
.r-product-detail .faqTitle {
  margin: 36px 0 0;
  color: var(--r-detail-muted);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .18em;
  text-align: center;
}

.r-product-detail .howtouseImg {
  width: 100%;
  margin: 40px 0 0;
}

.r-product-detail .faqUl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
  margin: 40px 0 0;
  padding: 0;
}

.r-product-detail .faqList {
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 26px;
  border: 1px solid var(--r-detail-line);
  border-radius: 0;
}

.r-product-detail .faqListTop {
  align-items: flex-start;
  padding: 0 0 18px;
  border-color: var(--r-detail-line);
}

.r-product-detail .faqListQ {
  color: var(--r-detail-accent-dark);
  font-size: 17px;
}

.r-product-detail .faqListQuestion {
  margin: 0 0 0 10px;
  color: var(--r-detail-ink);
  font-size: 14px;
  line-height: 1.7;
}

.r-product-detail .faqListAnswer {
  margin: 18px 0 0;
  color: var(--r-detail-muted);
  font-size: 12px;
  line-height: 1.9;
}

.r-product-detail .specSectionTableOuter {
  margin: 42px 0 0;
}

.r-product-detail .specSectionTable {
  width: 100%;
  border-collapse: collapse;
}

.r-product-detail .specSectionTh,
.r-product-detail .specSectionTd {
  padding: 18px 20px;
  border-bottom: 1px solid var(--r-detail-line);
  color: var(--r-detail-ink);
  font-size: 12px;
  line-height: 1.8;
  text-align: left;
}

.r-product-detail .specSectionTh {
  width: 24%;
  color: var(--r-detail-muted);
  font-weight: 500;
  background: var(--r-detail-surface);
}

.r-product-detail .p-review,
.r-product-detail .p-recommend_product {
  margin-top: 0;
  padding-top: 88px;
  padding-bottom: 88px;
}

.r-product-detail :focus-visible {
  outline: 2px solid var(--r-detail-accent-dark);
  outline-offset: 3px;
}

@media (max-width: 960px) {

  /* FigmaのSPフレーム(13:832)には特典バナーが1枚も無いためSP幅では非表示。
     このテーマはPC/SPの切り替えを960pxで行っているためここで消す。 */
  .r-product-detail .r-benefits {
    display: none;
  }
  .r-product-detail .topSection {
    width: min(100% - 40px, 680px);
    margin-bottom: 72px;
    padding-top: 22px;
  }

  .r-product-detail .r-benefits {
    width: min(100% - 40px, 680px);
    margin: 0 auto;
    padding-top: 27px;
  }

  .r-product-detail .r-detail-nav {
    gap: 8px;
    width: min(100% - 40px, 680px);
  }

  .r-product-detail .pankuzu {
    margin-bottom: 22px;
  }

  .r-product-detail .topSectionContent {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }

  /* 2026-09-04: 「どのサイズでも背景色が見えないように」という指示により、
     960px帯にだけ残っていた枠の下限高さと画像の内側パディングを外した。
     520px以下では既に min-height:0 / padding:0 になっており、
     521〜960px だけが画像の周りにグレーの余白を出していた。
     以後、枠の高さは画像の高さ（height:auto）だけで決まる。 */
  .r-product-detail .c-product_img__slider--main {
    min-height: 0;
  }

  .r-product-detail .c-product_img__slider--main .c-product_img__image {
    max-height: none;
    padding: 0;
  }

  /* サムネイル: Figma SP実測 58x58・間隔7px（PCは70x70・間隔8px）。
     画面幅で切り替わるよう960px帯で上書きする。 */
  .r-product-detail .c-product_img__slider--thumbnail .c-product_img__list {
    gap: 7px;
  }

  .r-product-detail .c-product_img__slider--thumbnail .c-product_img__item {
    flex: 0 0 58px !important;
    width: 58px !important;
    height: 58px !important;
    /* インライン<style>のSP帯にある .c-product_img__item { margin-top: 8px } を打ち消す */
    margin: 0 !important;
  }

  .r-product-detail .topSectionContentRight {
    padding-top: 0;
  }

  .r-product-detail .productCategoryContentTitleGroup._sp {
    display: block;
    order: 1;
    margin-top: 0;
  }

  .r-product-detail .productCategoryContentTitleEn._pc,
  .r-product-detail .productCategoryContentTitle._pc {
    display: none;
  }

  .r-product-detail .topSectionContentRight > .productCategoryContentText,
  .r-product-detail .topSectionContentRight > .productCategoryContentTextAnnotation {
    order: 2;
  }

  .r-product-detail .topSectionContentRight > .productCategoryContentSizeGroup {
    order: 3;
  }

  .r-product-detail .topSectionContentRight > .topSectionContentRightPriceRight {
    order: 4;
  }

  .r-product-detail .topSectionContentRight > .productCategoryContentUl {
    order: 5;
  }

  .r-product-detail .topSectionContentRight > .productCategoryContentReviewPostOuter {
    order: 6;
  }

  .r-product-detail .topSectionContentRight > .r-purchase-switch {
    order: 7;
  }

  .r-product-detail .topSectionContentRight > .r-purchase-panel {
    order: 8;
  }

  .r-product-detail .topSectionContentRight > .productCategoryContentSnsGroup {
    order: 9;
  }

  /* フォントサイズは PC と共通（Figma SP node 13:832）。
     英語名は PC の 24px / line-height 19px をそのまま使う。 */

  .r-product-detail .productCategoryContentTitle {
    text-align: left;
  }

  .r-product-detail .r-product-detail__type {
    margin-bottom: 12px;
  }

  .r-product-detail.has-no-english-name .productCategoryContentTitle {
    margin-top: 0;
    font-size: 24px;
    line-height: 1.35;
  }

  .r-product-detail .productDetailSection,
  .r-product-detail .howtouseSection,
  .r-product-detail .faqSection,
  .r-product-detail .specSection,
  .r-product-detail .reviewSection {
    width: min(100% - 40px, 680px);
    padding: 72px 0;
  }

  .r-product-detail .productDetailSection {
    padding: 56px 32px 72px;
  }

  .r-product-detail .howtouseSection {
    padding: 72px 20px;
  }

  .r-product-detail .reviewSection {
    padding: 48px 20px;
  }

  .r-product-detail .productDetailContentMiddle {
    grid-template-columns: minmax(0, 1fr);
    margin: 46px 0 72px;
  }

  .r-product-detail .productDetailContentChartImg,
  .r-product-detail .productDetailContentPositionImg {
    min-height: 0;
  }

  .r-product-detail .productDetailContentFeaturesUl,
  .r-product-detail .faqUl {
    grid-template-columns: minmax(0, 1fr);
  }

  .r-product-detail .productDetailContentFeaturesList {
    padding: 24px;
  }

  .r-product-detail .faqList {
    padding: 22px;
  }

  /* ==========================================================================
     購入エリア SP（Figma node 13:832 定期便 356x325 / node 13:1756 通常購入 356x219）
     このテーマの PC/SP 境界は 960px なので SP 指定はこの帯にまとめる。
     座標はパネル左上（= タブ行の天端）を原点とした Figma 相対値:
       タブ 0〜41 ／ 内容の左右端 x15〜341（= 枠線1px + 左右パディング14px）
       定期便  : 特典 59〜140(h81) / 価格 174 / ポイント 205 / ボタン 245〜291 / 下端 325
       通常購入: 価格 71 / ポイント 104 / ボタン 144〜190 / 下端 219
     フォント・色・アイコン寸法は PC と共通（Figma に SP 固有の指定が無い）。
     ========================================================================== */

  /* 非選択タブは Figma で「パネル幅 356px の右半分」なので SP は 50/50。
     PC の 50.84/49.16 は 476px パネルの実測比なので SP では使わない。 */
  .r-product-detail .r-purchase-switch__item,
  .r-product-detail .r-purchase-switch__item + .r-purchase-switch__item {
    flex: 0 0 50%;
  }

  /* 上 18px = 特典天端 59 − タブ行 41。左右 14px + 枠線 1px で内容左端 x15。
     下 33px = 内容下端 324 − ボタン下端 291（パネル総高 325）。 */
  .r-product-detail .r-purchase-panel {
    padding: 18px 14px 33px;
  }

  /* 上 30px = 価格天端 71 − タブ行 41 ／ 下 28px = 内容下端 218 − ボタン下端 190 */
  .r-product-detail .r-purchase-panel--single {
    padding-top: 30px;
    padding-bottom: 28px;
  }

  /* 特典ボックスの中身（12px / 2列を中央寄せ / 列間30px / 高さ81px）は PC と同一。
     Figma SP の1行目は x36〜321 で左右の余りが 22px / 21px とほぼ同じ = 中央寄せ。
     行送りだけ SP は 25px（PC は 24px）なので row-gap を 8px にする。
     高さは min-height 81px + align-content:center なので行送りを変えても 81px のまま。
     下 34px = 価格天端 174 − 特典下端 140。 */
  .r-product-detail .r-subs-benefits {
    row-gap: 8px;
    margin-bottom: 34px;
    /* 上下 19px。行送り 25px だと 20px のままでは 20+17+8+17+20 = 82px になり
       min-height 81px を1px超えてしまうため、min-height 側が効くよう 19px にする
       （中身は align-content:center なので実際の余白は上下 20px のまま）。 */
    padding: 19px 10px;
  }

  /* ♡ のぶんだけ右パディングを取る。PC のような右へのはみ出しは無く、
     ♡ の右端がそのまま内容右端 x341 になる。 */
  .r-product-detail .productCategoryContentActionGroup,
  .r-product-detail .productCategoryContentActionGroup.gray {
    width: 100%;
    padding-right: 33px;
  }

  /* ステッパー右端 x330 = 内容右端 341 − ♡ぶん 33px + 22px */
  .r-product-detail .r-buy-row--top {
    width: calc(100% + 22px);
  }

  /* SP は価格ブロックも内容左端（x15）から始まる（PC だけ x28 = 内容左端 +3px） */
  .r-product-detail .r-buy-price {
    padding-left: 0;
  }

  /* SP はステッパーが価格と天端そろえ（定期便 y174 / 通常購入 y71）。
     PC の 18px 下げはステッパー天端 174 と価格天端 156 の差なので SP では 0。 */
  .r-product-detail .c-product_info__form__quantity__wrap {
    margin-top: 0;
  }

  /* 通常購入だけポイント天端が 104 = 価格下端 95 + 9px。定期便は PC と同じ 7px。 */
  .r-product-detail .r-purchase-panel--single .topSectionContentRightPoint {
    margin-top: 9px;
  }
}

@media (max-width: 520px) {
  .r-product-detail .topSection {
    width: calc(100% - 36px);
  }

  .r-product-detail .r-benefits {
    width: calc(100% - 36px);
  }

  /* Figma SP 実測: 4列1行 / 各86px / gap 4px / 合計356px（左右マージン18px）
     高さ35px・ラベル12px は PC と同値 */
  .r-product-detail .r-detail-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    width: calc(100% - 36px);
    /* Figma SP実測: ナビ下端1274 → 帯上端1302 = 28px */
    margin-bottom: 28px;
  }

  .r-product-detail .r-detail-nav__link {
    min-height: 35px;
    font-size: 12px;
  }

  /* ---- SP実測（Figma node 13:832 / キャンバス幅393px・左右マージン18px） ---- */

  /* パンくず: 10px / 行高12 / letter-spacing 0.4px、下に9pxでメイン画像 */
  .r-product-detail .pankuzu {
    gap: 12px;
    margin-bottom: 9px;
    font-size: 10px;
    line-height: 12px;
    letter-spacing: .04em;
  }

  /* メイン画像は SP でも PC と同じ扱い: 上下左右のパディングなし・高さauto・全体表示 */
  .r-product-detail .c-product_img__slider--main {
    min-height: 0;
  }

  .r-product-detail .c-product_img__slider--main .c-product_img__image {
    height: auto;
    max-height: none;
    padding: 0;
  }

  /* サムネイルの矢印: Figma SP実測 高さ12px、コンテンツ列の左右端、
     サムネイル行と垂直中央（左 x=18 / 右 x=373 / y=498-509、行の中心504と一致） */
  .r-product-detail .c-product_img__slider--thumbnail {
    /* メイン画像下端→サムネイル上端: Figma SP実測 17px */
    margin-top: 17px;
    padding: 0 18px;
  }

  .r-product-detail .c-product_img__slider--thumbnail .splide__arrow {
    /* SPのサムネイルは58pxなので縦中央は29px */
    top: 29px;
  }

  .r-product-detail .c-product_img__slider--thumbnail .splide__arrow::before {
    width: 4px;
    height: 12px;
    background-size: 4px 12px;
  }

  /* 種別バッジ: Figma SP は 54x18（PC は 60x18）。文字サイズは共通12pxなので
     差の6pxを左右パディングで吸収する（12px → 9px）。下 13px で英語名。 */
  .r-product-detail .r-product-detail__type {
    margin-bottom: 13px;
    padding: 0 9px;
  }

  /* フォントサイズは PC と共通のため上書きしない（英語名24px / 日本語名14px） */
  .r-product-detail .productCategoryContentTitle {
    margin-top: 16px;
  }

  .r-product-detail .topSectionContentRight > .productCategoryContentText {
    /* PCと同じくハーフレディング4pxぶんを差し引く（実測24px → 19px） */
    margin-top: 19px;
    font-size: 16px;
  }

  .r-product-detail .topSectionContentRight > .productCategoryContentTextAnnotation {
    margin-top: 3px;
  }

  .r-product-detail .productCategoryContentSizeGroup {
    margin-top: 22px;
  }

  .r-product-detail .productCategoryContentUl {
    margin-top: 26px;
  }

  /* レビュー行の上28px。区切り線から購入パネルまでを 33px にまとめる。
     Figma SP実測: 星は列の左端から9px内側(x=27)、ボタンは右端から10px内側(x=363)。
     PCの gap:96px のままだと 357px に収まらず件数が折り返すため、
     space-between + nowrap にして左右のパディングで実測位置を再現する。 */
  .r-product-detail .productCategoryContentReviewPostOuter {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0;
    margin-top: 28px;
    padding: 0 10px 33px 9px;
  }

  /* 件数テキストを折り返さない */
  .r-product-detail .reviewAverageStar {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .r-product-detail .productCategoryContentReviewPost {
    flex: 0 0 auto;
  }

  .r-product-detail .r-purchase-switch {
    margin-top: 0;
  }

  /* 購入エリア（タブ／パネル／特典／価格／カートボタン）の SP 指定は、
     テーマの PC/SP 境界に合わせて上の 960px 帯へ移動した。
     フォントサイズを PC より小さくしていた指定（タブ13px・特典11px・価格22px・
     ボタン16px）は Figma SP が PC と同じ値を指定しているため廃止。 */

  .r-product-detail .productDetailSection,
  .r-product-detail .howtouseSection,
  .r-product-detail .faqSection,
  .r-product-detail .specSection,
  .r-product-detail .reviewSection {
    width: calc(100% - 36px);
  }

  .r-product-detail .productDetailSection {
    padding: 48px 20px 64px;
  }

  .r-product-detail .productDetailTitle {
    font-size: 20px;
    text-align: left;
  }

  .r-product-detail .productDetailSection > .productCategoryContentText {
    font-size: 19px;
    text-align: left;
  }

  .r-product-detail .productDetailSection > .productCategoryContentTextAnnotation {
    text-align: left;
  }

  .r-product-detail .specSectionTh,
  .r-product-detail .specSectionTd {
    display: block;
    width: 100%;
    padding: 14px 16px;
  }

  .r-product-detail .specSectionTd {
    padding-top: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .r-product-detail *,
  .r-product-detail *::before,
  .r-product-detail *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ============================================================
   Figma PC 59:7564 実測 — 効果アイコン以降の新規セクション
   座標はすべて 1920x6115 の 1:1 スクリーンショットからの実測値
   ============================================================ */

/* ---- 効果アイコン6つ（有用成分の下） --------------------------------
   円 92px / 横pitch 136px / 6個で 772px を中央 / 円下端2646→ラベルink2659 = 13px
   ラベルは 12px・行送り18px・中央揃え */
.r-product-detail .r-detail-effects {
  display: grid;
  box-sizing: border-box;
  width: 772px;
  max-width: 100%;
  grid-template-columns: repeat(6, 92px);
  justify-content: space-between;
  margin: 45px auto 0;
  padding: 0;
  list-style: none;
}

.r-product-detail .r-detail-effects li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.r-product-detail .r-detail-effects img {
  display: block;
  width: 92px;
  height: 92px;
}

.r-product-detail .r-detail-effects span {
  /* Figma実測: ラベルは円(92px)より広く、ピッチ136pxぶんを使える。
     92px列のままだと折り返しが増えて全体高が133px→174pxに膨らむ。 */
  width: 136px;
  margin-inline: -22px;
  margin-top: 13px;
  color: var(--r-detail-ink);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0;
}

/* ---- 使用方法 -------------------------------------------------------
   3列 825px: イラスト132 / 本文295 / 動画314、列間42px
   本文 20px・行送り27px / 動画枠 314x177（16:9）
   見出しink2800 → 本文行top2831 = 31px */
.r-product-detail .r-howto {
  display: grid;
  box-sizing: border-box;
  width: 825px;
  max-width: 100%;
  grid-template-columns: 132px 295px 314px;
  gap: 42px;
  align-items: start;
  margin: 26px auto 0;
}

/* 自由入力7（動画URL）が空の商品は動画列ごと出ないので、本文列に幅を渡す */
.r-product-detail .r-howto.r-howto--no-video {
  grid-template-columns: 132px auto;
}

/* Figma実測: イラストは 94x165。列(132px)の右端に揃う（画像右端679 = 列右端679.5） */
.r-product-detail .r-howto__figure {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.r-product-detail .r-howto__figure img {
  display: block;
  width: 94px;
  height: auto;
}

/* 2026-09-10指示: 画像が2枚ある商品はPCで横並び・各2/3サイズ（94px*2/3≈63px）にする。
   63+gap6+63=132pxで既存の列幅(132px)に収まる。 */
.r-product-detail .r-howto__figure.has-two img {
  width: 63px;
}

.r-product-detail .r-howto__text {
  margin: 0;
  color: var(--r-detail-ink);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 20px;
  line-height: 27px;
  letter-spacing: 0;
}

.r-product-detail .r-howto__note {
  margin: 8px 0 0;
  color: var(--r-detail-muted);
  font-size: 12px;
  line-height: 1.5;
}

.r-product-detail .r-howto__video {
  position: relative;
  width: 314px;
  max-width: 100%;
  aspect-ratio: 314 / 177;
  overflow: hidden;
  background: #d9d9d9;
}

.r-product-detail .r-howto__video iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---- おすすめのご使用順番 -------------------------------------------
   白カード 909x528（Figma node 13:1880: x506 y3070 w909 h528）
   見出しink3124 / STEP 1段目 y3194-3307（高さ114）/ 2段目 y3315-
   カード 162x114・列間5px・枠線1px #a1cced
   PCは4件までを1段、5件以上で2段組み（WF S11）。Figmaの8STEPは5+3。
   注記 y3519 / y3538 */
.r-product-detail .r-steps-card {
  box-sizing: border-box;
  width: 909px;
  max-width: 100%;
  margin: 0 auto;
  padding: 49px 0 0;
  background: #fff;
  box-shadow: 0 2px 8px rgba(32, 40, 42, .06);
}

.r-product-detail .r-steps {
  display: grid;
  box-sizing: border-box;
  width: 828px;
  max-width: 100%;
  grid-template-columns: repeat(5, 1fr);
  /* 各カードは自身の内容ぶんの高さにする。stretch のままだと2段目の
     「現在の商品」カード(175px)に合わせて STEP7/8 まで伸びてしまう */
  align-items: start;
  gap: 8px 5px;
  margin: 48px auto 0;
  padding: 0;
  list-style: none;
}

/* 4件以下は横1列（WF S10） */
.r-product-detail .r-steps[data-step-count="1"] { grid-template-columns: repeat(1, 162px); justify-content: center; }
.r-product-detail .r-steps[data-step-count="2"] { grid-template-columns: repeat(2, 162px); justify-content: center; }
.r-product-detail .r-steps[data-step-count="3"] { grid-template-columns: repeat(3, 162px); justify-content: center; }
.r-product-detail .r-steps[data-step-count="4"] { grid-template-columns: repeat(4, 1fr); }

.r-product-detail .r-steps__item {
  position: relative;
  display: flex;
  box-sizing: border-box;
  min-height: 114px;
  flex-direction: column;
  padding: 11px 12px 12px;
  /* 2026-09-10: 枠線をカテゴリカラーに統一（Figma node 182:1618 等、glow/nutrientとも
     カード枠はシリーズ色）。hydraは #a1cced → var(--r-detail-badge) で
     rgba(145,196,234,.86)相当（白背景上でほぼ同色、差は1px未満） */
  border: 1px solid var(--r-detail-badge);
  background: #fff;
}

/* ただいまご覧の商品は背景色を変える（WF S10 指定）。
   2026-09-10指示: カテゴリカラー化（GLOW #f7e9ed / NUTRIENT #edf3ea、HYDRAは既定の#eaf3fbのまま） */
.r-product-detail .r-steps__item.is-current {
  background: var(--r-detail-step-current-bg);
}

/* カード間の送り矢印。2026-09-10: 枠線・バッジと同じくカテゴリカラーに統一 */
.r-product-detail .r-steps__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -5px;
  width: 5px;
  height: 8px;
  transform: translateY(-50%);
  background: var(--r-detail-badge);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* STEPバッジ Figma PC 59:7564 実測
     ピル x557-613 / y3205-3219 = 57 x 15px・完全な角丸・#a1cced
     「STEP1」の白文字 ink 幅35px・キャップハイト9px、左右の詰まり 10px / 12px
     （右が2px広いのは CSS の letter-spacing が最後の字の後ろにも入るため）
   書体は Tenor Sans。Figma の PNG に描かれた STEP1 のグリフ列位置を
   canvas で候補書体を描いて突き合わせた結果、11.5px + .07em が
   グリフ5個の ink 列・キャップハイトとも ±1px 以内で一致する
   （Zen Kaku Gothic New / Poppins / Raleway / Noto Sans JP はいずれも不一致。
     とくに「1」の ink 幅 2px は Raleway・Noto Sans JP では再現できない）。
   この Figma では英字はすべて Tenor Sans（英語商品名・価格・パンくず）で、
   書体選択としても整合する。 */
.r-product-detail .r-steps__badge {
  width: fit-content;
  margin: 0;
  padding: 0 10px;
  border-radius: 999px;
  /* 2026-09-10: STEPラベルの背景をカテゴリカラーに統一（Figma node 182:1594等） */
  background: var(--r-detail-badge);
  color: #fff;
  font-family: "Tenor Sans", "Zen Kaku Gothic New", sans-serif;
  font-size: 11.5px;
  line-height: 15px;
  letter-spacing: .07em;
}

.r-product-detail .r-steps__label {
  margin: 10px 0 0;
  color: var(--r-detail-ink);
  font-family: "Zen Kaku Gothic New", sans-serif;
  /* Figma実測: 「クレンジング」のグリフ送り16.6px → 16px + 0.04em
     行送りは「ピーリング」ink3232 →「(*スペシャルケア)」ink3250 = 18px */
  font-size: 16px;
  line-height: 18px;
  letter-spacing: .04em;
}

.r-product-detail .r-steps__note {
  display: inline-block;
  font-size: 11px;
}

/* Figma コンポーネント 1:3077（pc hover）
   文字色 rgba(145,196,234,.86)＝hydra new / 12px / tracking .48px / 下線つき
   通常 幅74px → ホバー 幅85px で、文字と下線は動かず矢印だけ右へ11px動く */
.r-product-detail .r-steps__link {
  display: inline-flex;
  width: fit-content;
  align-self: flex-start;
  align-items: baseline;
  margin-top: auto;
  color: var(--r-detail-badge);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 12px;
  letter-spacing: .48px;
  text-decoration: none;
}

.r-product-detail .r-steps__link::before {
  content: attr(data-label);
  border-bottom: 1px solid currentColor;
}

/* 矢印の移動は margin-left で行う。
   ・Figma もコンテナ幅が 74px → 85px に伸びる（＝レイアウトが動く）挙動なので、
     transform より margin の方が忠実。
   ・この span では transform が単位行列に潰されて効かないことを実測で確認済み。 */
.r-product-detail .r-steps__link span {
  display: inline-block;
  /* Figma実測: 文字は水色だが矢印だけグレー */
  color: #c1c1c1;
  margin-left: 4px;
  text-decoration: none;
  transition: margin-left .2s ease;
}

.r-product-detail .r-steps__link:hover span,
.r-product-detail .r-steps__link:focus-visible span {
  margin-left: 15px;
}

.r-product-detail .r-steps__thumb {
  height: auto;
  margin-top: 8px;
  /* 2026-09-16指示: サムネイル背景を画像本来の白に統一（シリーズ色は使わない）。
     現在地カードの背景色（--r-detail-step-current-bg、.r-steps__item.is-current側）とは別物。 */
  background: #fff;
  overflow: hidden;
}

/* 現在表示中の商品の一覧サムネイルを、切り抜かずに画像の縦横比のまま表示する（2026-09-14指示）。
   商品一覧カードと同様 mix-blend-mode で白背景をグラデーションに馴染ませる。 */
.r-product-detail .r-steps__thumb img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}

.r-product-detail .r-steps__foot {
  box-sizing: border-box;
  width: 828px;
  max-width: 100%;
  margin: 25px auto 0;
  padding-bottom: 45px;
  color: var(--r-detail-muted);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 12px;
  line-height: 19px;
}

/* ---- レビュー -------------------------------------------------------
   見出しink3655 / カード 282x167・列間13px・3枚で870px中央 / y3707-3873
   ドット 6px・pitch13px・8個 y3912 / MORE x939-979 y3935-3975 */
/* カルーセルは transform ではなく横スクロールで送る。
   このページでは translateX が単位行列に潰されて効かないことを実測で確認しており
   （祖先に transform/contain/filter は無い）、商品画像ギャラリーでも同じ理由で
   scrollLeft 方式を採用している。スマートフォンでは指でのスワイプもそのまま効く。 */
.r-product-detail .r-review-carousel {
  position: relative;
  width: 870px;
  max-width: 100%;
  margin: 34px auto 0;
  overflow-x: auto;
  overflow-y: hidden;
  /* scroll-behavior は auto を強制する。
     ベーステーマ側が smooth を当てており、smooth が有効だと
     scrollLeft への代入が反映されない（実測: smooth=348で固着 / auto=0/348/696/1044）。
     JS 側で一時的に auto にする方法では snap の再適用に負けるため、
     ここで !important で固定する。 */
  scroll-behavior: auto !important;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.r-product-detail .r-review-carousel::-webkit-scrollbar {
  display: none;
}

/* width:max-content は使わない。カード側の width:100% と循環して
   カード幅が数千pxに膨らむ（実測4915px）。トラックはスクロールコンテナ幅のまま、
   カードを flex:0 0 <幅> で置いて横にはみ出させる。 */
.r-product-detail .r-review-carousel__track {
  display: flex;
  margin: 0;
  padding: 0;
  gap: 13px;
  list-style: none;
}

.r-product-detail .r-review-card {
  scroll-snap-align: start;
}

.r-product-detail .r-review-card {
  display: flex;
  box-sizing: border-box;
  width: 282px;
  min-height: 167px;
  flex: 0 0 282px;
  flex-direction: column;
  padding: 17px 20px 15px;
  background: #fff;
}

.r-product-detail .r-review-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.r-product-detail .r-review-card__name {
  margin: 0;
  color: var(--r-detail-ink);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 14px;
  letter-spacing: .04em;
}

.r-product-detail .r-review-card__date {
  margin: 0;
  color: #9ba5a7;
  font-size: 11px;
  letter-spacing: .02em;
}

.r-product-detail .r-review-card__stars {
  margin: 8px 0 0;
  color: var(--r-detail-common);
  font-size: 13px;
  letter-spacing: .18em;
}

.r-product-detail .r-review-card__text {
  display: -webkit-box;
  overflow: hidden;
  margin: 10px 0 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  color: var(--r-detail-ink);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 12px;
  line-height: 19px;
  letter-spacing: 0;
}

.r-product-detail .r-review-card__more {
  margin-top: auto;
  padding-top: 4px;
  color: var(--r-detail-common);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.r-product-detail .r-review-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin: 39px 0 0;
  padding: 0;
  list-style: none;
}

.r-product-detail .r-review-dots button {
  display: block;
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #c8dbe4;
  cursor: pointer;
}

.r-product-detail .r-review-dots button[aria-current="true"] {
  background: var(--r-detail-common);
}

.r-product-detail .r-review-more {
  display: block;
  width: fit-content;
  /* a から button に変えたのでブラウザ既定の枠・背景・余白を消す（2026-09-14） */
  padding: 0;
  border: 0;
  margin: 18px auto 0;
  background: none;
  color: #9ba5a7;
  font-family: "Tenor Sans", "Zen Kaku Gothic New", serif;
  /* Figma実測: 「MORE」のink幅41px → 12px */
  font-size: 12px;
  letter-spacing: .18em;
  text-decoration: none;
  cursor: pointer;
}

.r-product-detail .r-review-more::after {
  content: "";
  display: block;
  margin-top: 3px;
  border-bottom: 1px solid #c8cccd;
}

/* ---- レビュー PC（961px以上）: 横スライドをやめて3列グリッド ----------
   2026-09-14指示: 既定は先頭3件のみ。MORE で全件展開し、CLOSE で戻す。
   ドットは使わない。SP（960px以下）の横スライドは従来どおり。 */
@media (min-width: 961px) {
  .r-product-detail .r-review-carousel {
    overflow: visible;
  }

  .r-product-detail .r-review-carousel__track {
    display: grid;
    grid-template-columns: repeat(3, 282px);
    justify-content: center;
  }

  .r-product-detail .r-review-card {
    scroll-snap-align: none;
  }

  /* 4件目以降は既定で隠す。展開時（JSが is-expanded を付与）だけ出す */
  .r-product-detail .r-review-card:nth-child(n + 4) {
    display: none;
  }

  .r-product-detail .r-review-carousel.is-expanded .r-review-card {
    display: flex;
  }

  .r-product-detail .r-review-dots {
    display: none;
  }
}

/* ---- よくある質問 ---------------------------------------------------
   見出しink4073 / タブ 269x36・列間10px・3列826px / 1問目ink4187
   閉じた項目の高さ59px・項目間12px・幅827px */
.r-product-detail .faqSection {
  padding: 71px 0 0;
  background: #fff;
}

.r-product-detail .r-faq {
  box-sizing: border-box;
  width: 826px;
  max-width: 100%;
  margin: 46px auto 0;
}

.r-product-detail .r-faq__tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

/* 2026-09-17: 「製品について」タブが無い商品は2タブになる。3等分グリッドのまま
   だと3列目が空いて左寄りに見えるため、2等分にして .r-faq の幅いっぱいに
   均等配置する（＝左右対称＝中央寄せ）。 */
.r-product-detail .r-faq--two-tabs .r-faq__tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 3つ目のタブは PC「お支払い・配送について」/ SP「お支払い・配送」 */
.r-product-detail .r-faq__tab-sp {
  display: none;
}

/* タブの作りはページ内リンク(.r-detail-nav__link)と同じ。
   違いは「選択中のタブに背景色が付く」ことだけ（2026-08-21 指示）。
   文字と矢印の位置もページ内リンクに合わせる（padding-top 7px / gap 5px / 行高11px）。
   2026-09-10指示: よくある質問は全カテゴリ共通デザイン。ページ内リンクと同じく
   var(--r-detail-accent-soft)だとカテゴリごとに枠線色が変わるため、hydraの値 #a5dee1 に固定する。 */
.r-product-detail .r-faq__tab {
  display: flex;
  min-height: 36px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  padding: 7px 0 0;
  border: 1px solid #a5dee1;
  background: #fff;
  color: var(--r-detail-ink);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 12px;
  line-height: 11px;
  letter-spacing: .48px;
  cursor: pointer;
}

.r-product-detail .r-faq__tab.is-active {
  background: #f6fbfc;
}

.r-product-detail .r-faq__tab-arrow {
  display: block;
  width: 14px;
  height: 5px;
  flex: none;
  color: #61c4cb;
}

.r-product-detail .r-faq__panel {
  margin-top: 16px;
}

.r-product-detail .r-faq__item {
  box-sizing: border-box;
  margin-top: 12px;
  border: 1px solid #a5dee1;
  background: #fff;
}

.r-product-detail .r-faq__item:first-child {
  margin-top: 0;
}

.r-product-detail .r-faq__item[open] {
  background: #f6fbfc;
}

.r-product-detail .r-faq__q {
  display: flex;
  min-height: 57px;
  align-items: center;
  gap: 14px;
  padding: 0 22px;
  cursor: pointer;
  list-style: none;
}

.r-product-detail .r-faq__q::-webkit-details-marker {
  display: none;
}

.r-product-detail .r-faq__q-mark,
.r-product-detail .r-faq__a-mark {
  flex: none;
  color: var(--r-detail-common);
  font-family: "Tenor Sans", "Zen Kaku Gothic New", serif;
  font-size: 15px;
}

.r-product-detail .r-faq__q-text {
  flex: 1 1 auto;
  color: var(--r-detail-ink);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
}

.r-product-detail .r-faq__toggle {
  position: relative;
  width: 13px;
  height: 13px;
  flex: none;
}

.r-product-detail .r-faq__toggle::before,
.r-product-detail .r-faq__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 13px;
  height: 1px;
  background: var(--r-detail-common);
}

.r-product-detail .r-faq__toggle::after {
  transform: rotate(90deg);
  transition: opacity .2s ease;
}

.r-product-detail .r-faq__item[open] .r-faq__toggle::after {
  opacity: 0;
}

.r-product-detail .r-faq__a {
  display: flex;
  gap: 14px;
  padding: 0 22px 18px;
}

.r-product-detail .r-faq__a p {
  margin: 0;
  color: var(--r-detail-ink);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 13px;
  line-height: 21px;
  letter-spacing: 0;
}

/* ---- スペック -------------------------------------------------------
   Figma PC 59:7564 実測（1:1 PNG のピクセル計測）
     見出し ink y4495-4508 / 表 y4556.5-4886.5（枠線中心 4557〜4886）
     表の外形 828px（左枠中心545・右枠中心1372）・項目列 120px（仕切り中心665）
     罫線は 1px #e0e0e0（内側の仕切りは半ピクセル位置で 240/239 の2行に分かれる）
     本文 13px / 行送り17px（成分7行 4710→4822 の行間実測）
     直前のFAQ下端 → 見出し ink 上端 = 77px
     見出し ink 上端 → 表の上端 = 61.5px */
.r-product-detail .specSection {
  padding: 70px 0 0;
  background: #fff;
}

.r-product-detail .specSectionTableOuter {
  box-sizing: border-box;
  width: 828px;
  max-width: 100%;
  margin: 42px auto 0;
  overflow-x: auto;
}

.r-product-detail .specSectionTable {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.r-product-detail .specSectionTh,
.r-product-detail .specSectionTd {
  padding: 14px 16px;
  border: 1px solid #e0e0e0;
  color: var(--r-detail-ink);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 17px;
  letter-spacing: 0;
  vertical-align: top;
}

/* 項目列にも背景色は付けない。Figma は PC・SP とも両列とも純白（実測 255,255,255）。
   ファイル前半 (.r-product-detail .specSectionTh の旧ブロック) が
   background: var(--r-detail-surface) を当ててくるため、明示的に打ち消す。 */
.r-product-detail .specSectionTh {
  width: 120px;
  background: transparent;
  text-align: center;
  white-space: nowrap;
}

/* show.html.liquid にベーステーマ由来の <style> があり、そこで
   .specSectionTd { width: 80% } が指定されている。
   table-layout:fixed では % 指定の列が優先され、余りが項目列に回るため
   .specSectionTh の 120px が 20%（=165.8px）に膨らんでいた。
   ここで明示的に auto へ戻して項目列の指定を効かせる。 */
.r-product-detail .specSectionTd {
  width: auto;
  text-align: left;
}

/* ---- 肌悩みから探す -------------------------------------------------
   2026-09-16指示: トップページの r-top-find と同じデザイン（枠線・角丸・
   グリッド仕様）に統一。ホバー配色のみ商品詳細側の既存値を維持。 */
.r-product-detail .r-detail-concerns {
  padding: 62px 0 0;
  background: #fff;
}

.r-product-detail .r-detail-concerns__list {
  display: grid;
  grid-template-columns: repeat(3, 290px);
  gap: 20px;
  justify-content: center;
  margin: 48px auto 0;
  padding: 0;
  list-style: none;
}

.r-product-detail .r-detail-concerns__list a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 60px;
  border: 1px solid #000;
  border-radius: 2px;
  background: #fff;
  color: var(--r-detail-ink);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: .04em;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease;
}

.r-product-detail .r-detail-concerns__icon {
  display: block;
  width: 25px;
  height: 25px;
  object-fit: contain;
}

.r-product-detail .r-detail-concerns__label {
  text-align: center;
}

.r-product-detail .r-detail-concerns__list a:hover,
.r-product-detail .r-detail-concerns__list a:focus-visible {
  border-color: var(--r-detail-common);
  background-color: rgba(75, 189, 195, .05);
}

/* ---- 最近見た製品 ---------------------------------------------------
   帯・画像・スクローラの寸法は商品一覧ページと完全に同じ値だったため、
   assets/renewal-shell.css に共通ルールとして移した（2026-08-21 指示「使い回し」）。
   ここに残すのは商品詳細ページ固有の上余白だけ。
   Figma: 肌悩みボタン下端5108.5 → 帯上端5188 = 79.5px */
.r-product-detail .r-detail-history {
  margin: 80px auto 0;
}

/* レビュー投稿フォーム（ボタン・入力欄）は本番同様に再表示する（2026-09-10 指示）。
   フォントだけはグローバル設定（游ゴシック）を継承してしまうため、リニューアル基準の
   Zen Kaku Gothic New で上書きする。文字色の#4bbdc3は u-text--link / u-color__btn--bg が
   既に settings.color.settings.color_btn_bg（このテーマでは #4bbdc3）を参照しているため
   追加の上書きは不要。 */
.r-product-detail .p-review__inner__entry,
.r-product-detail .p-review__inner__entry * {
  font-family: "Zen Kaku Gothic New", sans-serif;
}

.r-product-detail .r-review-card.is-open .r-review-card__text {
  -webkit-line-clamp: unset;
}

/* ============================================================
   Figma SP 13:832 実測（キャンバス393px）
   帯 #f4f9fc は y1302-4795、最近見た製品 #f6fbfc は y6042-6223
   ============================================================ */
@media (max-width: 960px) {

  /* セクション共通: 帯はPCと同じく連続させ、余白はpaddingで作る */
  .r-product-detail .productDetailSection,
  .r-product-detail .howtouseSection,
  .r-product-detail .r-steps-section,
  .r-product-detail .faqSection,
  .r-product-detail .specSection,
  .r-product-detail .reviewSection,
  .r-product-detail .r-detail-concerns {
    width: 100%;
    max-width: none;
    padding-right: 0;
    padding-left: 0;
  }

  /* 見出し: ink1333（帯上端1302から31px）
     Figma SP実測: 14px / 短線17px / 文字との間11px / 中央
     ※旧 @media(max-width:520px) が 20px・左寄せを当ててくるため明示的に打ち消す */
  .r-product-detail .productDetailSection {
    padding: 26px 0 0;
  }

  /* Figma SP 13:832 実測: 見出しは 12px。
     ink 幅 製品詳細48 / スペック45 / 肌悩みから探す85 / 最近見た製品73、
     ink 高さはいずれも 11px で、4見出しとも 12px + .04em と一致する。
     字送りも PC(18px)比 0.659 = 11.86px で 12px を裏づける。 */
  .r-product-detail .productDetailTitle {
    gap: 11px;
    font-size: 12px;
    text-align: center;
  }

  /* 旧520pxブロックがスペック表を block にしてしまうのを戻す */
  .r-product-detail .specSectionTh,
  .r-product-detail .specSectionTd {
    display: table-cell;
    width: auto;
  }

  .r-product-detail .specSectionTh {
    width: 84px;
  }

  /* キャッチ: 2行・行送り28px。ink幅 x69-323 から16px相当 */
  /* Figma SP 実測: グリフ送り18px・ink17px → 18px。行送りは ink 上端の差 28px。
     canvas 計測でも 18px が 送り18.00 / ink16.45 で一致する。 */
  .r-product-detail .productDetailSection > .productCategoryContentText,
  .r-product-detail .r-detail-catch {
    /* 見出し box 下端47 → キャッチ box 上端70.2 = 23.2px */
    margin-top: 23px;
    font-size: 18px;
    line-height: 28px;
    text-align: center;
  }

  /* (*1)(*2) は SP では本文18pxに対して ink9px（Figma実測 x199-211 / y1387-1395）。
     canvas 計測で 9.5px が ink8.93 と最も近く、下端を揃える持ち上げ量は 0.14px。
     PC の 17px をそのまま継承すると本文より大きくなってしまうため必ず上書きする。 */
  .r-product-detail .r-detail-catch sup {
    top: -.14px;
    font-size: 9.5px;
  }

  /* Figma SP実測: 注釈は中央ではなく左端(x32)から始まる */
  .r-product-detail .productDetailSection > .productCategoryContentTextAnnotation,
  .r-product-detail .r-detail-catch__note {
    box-sizing: border-box;
    width: 100%;
    /* キャッチ box 下端126.2 → 注釈 box 上端139.5 = 13.3px */
    margin-top: 13px;
    padding-left: 32px;
    font-size: 9px;
    text-align: left;
  }

  /* こんなあなたにおすすめ（2026-09-10）: ピル本体176x20 + 尻尾4.7275px（Figma SP node 182:7029） */
  /* 注釈 box 下端153 → ピル 上端183 = 30px */
  .r-product-detail .r-recommend {
    margin-top: 30px;
  }

  .r-product-detail .r-recommend__pill {
    width: 176px;
    height: 20px;
    margin-bottom: 4.7275px;
    font-size: 14px;
    letter-spacing: .04em;
    padding-left: .04em;
  }

  .r-product-detail .r-recommend__pill::after {
    bottom: -4.7275px;
    width: 9.457px;
    height: 4.7275px;
  }

  /* ピル 下端208 → ✓1行目 box 上端220.5 = 12.5px */
  .r-product-detail .r-recommend__list {
    margin-top: 12.5px;
    font-size: 12px;
    line-height: 16px;
  }

  /* Figma SP の行送りは27px（1525→1552）。行box19px + margin8px */
  .r-product-detail .r-recommend__list li,
  .r-product-detail .r-recommend__list > p {
    margin-bottom: 8px;
    padding-bottom: 3px;
  }

  /* Figma SP 実測でもチェックは PC と同じ 13x12（間隔9px）だったので上書きしない */
  .r-product-detail .r-recommend__list li::before,
  .r-product-detail .r-recommend__list > p::before {
    margin: 3px 9px 0 0;
  }

  /* チャートカード: x14-377（左右14px）。SPでは1枚ずつ縦に積む */
  /* Figma SP 13:832: 図は2枚の別カードとして縦に積む（x14-377 / カード間23px）
     カード1 y1665-2052(388) / カード2 y2075-2444(370)
     既存SPルールが margin: 46px 0 72px を当てて左右のautoを消すため、
     ショートハンドで上書きして中央寄せを取り戻す */
  .r-product-detail .productDetailContentMiddle {
    width: calc(100% - 28px);
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    gap: 23px;
    /* ✓リスト最終行 box 下端320.5 → カード上端363 = 42.5px */
    margin: 42.5px auto 0;
    padding: 0;
    background: none;
    box-shadow: none;
  }

  .r-product-detail .r-chart {
    padding: 22px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(32, 40, 42, .06);
  }

  /* SPではカード幅に合わせて図を縮小する */
  .r-product-detail .productDetailContentChartImg,
  .r-product-detail .productDetailContentPositionImg {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  .r-product-detail .r-chart:last-child .productDetailContentPositionImg {
    margin-top: 0;
  }

  .r-product-detail .r-chart__note {
    margin-top: 20px;
    font-size: 13px;
    line-height: 20px;
  }

  .r-product-detail .r-chart:last-child .r-chart__note {
    margin-top: 20px;
  }

  /* 有用成分: 1列。成分名14px / 本文13px・行送り18px */
  .r-product-detail .productDetailSection--ingredients {
    padding-top: 48px;
  }

  .r-product-detail .productDetailContentFeaturesGroup {
    margin-top: 44px;
  }

  .r-product-detail .productDetailContentFeaturesUl {
    width: calc(100% - 66px);
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  /* 既存SPルールの padding: 24px を打ち消す */
  .r-product-detail .productDetailContentFeaturesList {
    padding: 0;
    background: none;
  }

  .r-product-detail .productDetailContentFeaturesListTitle {
    font-size: 14px;
  }

  .r-product-detail .productDetailContentFeaturesListText {
    margin-top: 14px;
    font-size: 13px;
    line-height: 18px;
  }

  /* SP は注釈を列の中ではなく3成分すべての後に出す（Figma SP実測）。
     x33 / 9px / 最後の本文ink下端2808 → 注釈ink2834 = 26px */
  .r-product-detail .productDetailContentFeaturesNote.is-inline {
    display: none;
  }

  .r-product-detail .productDetailContentFeaturesNote.is-after {
    display: block;
    box-sizing: border-box;
    width: calc(100% - 66px);
    margin: 22px auto 0;
    font-size: 9px;
  }

  /* 効果アイコン: 3列×2段 / 円79px / ピッチ106px / 全体291px */
  .r-product-detail .r-detail-effects {
    width: 291px;
    grid-template-columns: repeat(3, 79px);
    justify-content: space-between;
    row-gap: 22px;
    margin-top: 40px;
  }

  .r-product-detail .r-detail-effects img {
    width: 79px;
    height: 79px;
  }

  .r-product-detail .r-detail-effects span {
    width: 106px;
    margin-inline: -13.5px;
    margin-top: 11px;
    font-size: 11px;
    line-height: 15px;
  }

  /* 使用方法: イラスト80px + 本文 の2列（gap37px）、その下に動画枠 */
  /* 既存SPルールの padding: 72px 20px を打ち消す */
  .r-product-detail .howtouseSection {
    padding: 62px 0 0;
  }


  /* 列間37px。行間は動画側の margin-top(34px) で作るので 0 にする
     （gap 37px のままだと 37+34=71px になり Figma の34pxと合わない） */
  .r-product-detail .r-howto {
    width: calc(100% - 66px);
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 0 37px;
    margin-top: 26px;
  }

  /* SPは動画が2列ぶちぬきの別行なので、動画の有無で列構成は変わらない。
     PCの .r-howto--no-video（詳細度が1段高い）がSPまで効いてしまうのを打ち消す */
  .r-product-detail .r-howto.r-howto--no-video {
    grid-template-columns: 80px minmax(0, 1fr);
  }

  /* Figma SP実測: イラストは 55x96、列(80px)の右端に揃う（画像右端112 = 列右端113） */
  .r-product-detail .r-howto__figure {
    flex-direction: column;
    align-items: flex-end;
  }

  .r-product-detail .r-howto__figure img,
  .r-product-detail .r-howto__figure.has-two img {
    width: 55px;
  }

  .r-product-detail .r-howto__text {
    font-size: 13px;
    line-height: 20px;
  }

  .r-product-detail .r-howto__note {
    font-size: 10px;
  }

  /* 動画枠は2列ぶちぬきで下に置く: 328x177 */
  .r-product-detail .r-howto__video {
    width: 100%;
    grid-column: 1 / -1;
    margin-top: 34px;
    aspect-ratio: 328 / 177;
  }
}

@media (max-width: 960px) {

  /* おすすめのご使用順番: カード x14-377 / STEPは縦積み42px・ピッチ57px
     現在の商品の行は画像枠を含めて213px（Figma SP実測） */
  .r-product-detail .r-steps-section {
    padding-top: 51px;
  }

  .r-product-detail .r-steps-card {
    width: calc(100% - 28px);
    padding-top: 33px;
  }

  .r-product-detail .r-steps {
    width: calc(100% - 38px);
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 15px;
    margin-top: 38px;
  }

  .r-product-detail .r-steps__item {
    display: grid;
    min-height: 42px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 10px;
    padding: 0 12px;
  }

  /* 縦積みでは送り矢印を下向きに置く */
  .r-product-detail .r-steps__item:not(:last-child)::after {
    top: auto;
    right: auto;
    bottom: -12px;
    left: 50%;
    width: 8px;
    height: 5px;
    transform: translateX(-50%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }

  /* Figma SP 13:832 実測: ピル x41-91 / y3714-3727 = 51 x 14px
     ink 幅29px・キャップハイト7px → Tenor Sans 9.5px + .07em で一致 */
  .r-product-detail .r-steps__badge {
    font-size: 9.5px;
    line-height: 14px;
  }

  .r-product-detail .r-steps__label {
    margin: 0;
    font-size: 13px;
  }

  /* PC で付けた align-self:flex-start が SP に残ると「製品一覧へ」が
     行の上端に張り付くため、SP では中央に戻す */
  .r-product-detail .r-steps__link {
    align-self: center;
    margin-top: 0;
    font-size: 11px;
    white-space: nowrap;
  }

  /* 現在の商品の行だけ画像枠を持つ（行高213px） */
  /* Figma SP実測: カード x33-360(327) / 画像枠 282x143 @ x55,y4047 / カード下端4210
     → 左右パディング22px・上14px・下21px、画像枠までの間隔9px */
  .r-product-detail .r-steps__item.is-current {
    grid-template-columns: auto minmax(0, 1fr);
    align-content: start;
    padding: 14px 22px 21px;
  }

  .r-product-detail .r-steps__thumb {
    height: auto;
    grid-column: 1 / -1;
    margin-top: 15px;
  }

  .r-product-detail .r-steps__foot {
    width: calc(100% - 38px);
    margin-top: 21px;
    padding-bottom: 33px;
    font-size: 9px;
    line-height: 12px;
  }

  /* レビュー: カード335x175を1枚ずつ / ドット4px・ピッチ10px */
  .r-product-detail .reviewSection {
    padding: 42px 0 32px;
  }

  .r-product-detail .r-review-carousel {
    width: calc(100% - 58px);
    margin-top: 38px;
  }

  /* 1画面1レビュー。トラックはカルーセル幅なので 100% でちょうど1枚ぶん */
  .r-product-detail .r-review-card {
    width: auto;
    min-height: 175px;
    flex: 0 0 100%;
    padding: 18px 20px 16px;
  }

  /* 各レビューは既定で省略し、「もっと見る」で全文を出す（PC/SP共通・2026-08-21 指示） */
  .r-product-detail .r-review-card__text {
    font-size: 12px;
    line-height: 20px;
  }

  .r-product-detail .r-review-dots {
    gap: 6px;
    margin-top: 16px;
  }

  .r-product-detail .r-review-dots button {
    width: 4px;
    height: 4px;
  }

  /* SPは横スライド＋ドットのままなので MORE は出さない（2026-09-14指示） */
  .r-product-detail .r-review-more {
    display: none;
    margin-top: 21px;
    font-size: 12px;
  }

  /* よくある質問: タブ3列 x19-373 / 項目も同幅・項目間9px */
  /* 既存SPルールの padding: 72px 0 を打ち消す */
  .r-product-detail .faqSection {
    padding: 47px 0 0;
  }

  .r-product-detail .r-faq {
    width: calc(100% - 38px);
    margin-top: 39px;
  }

  .r-product-detail .r-faq__tabs {
    gap: 6px;
  }

  .r-product-detail .r-faq__tab {
    min-height: 35px;
    font-size: 11px;
  }

  .r-product-detail .r-faq__panel {
    margin-top: 8px;
  }

  .r-product-detail .r-faq__item {
    margin-top: 9px;
  }

  /* Figma SP実測: 枠 x19-373 / Qマーク x33 / Q本文 x57-60 / トグル x347-357
     Q本文14px（15文字で212px＝14.1/字）・A本文12px・行送り19px
     閉じた項目の高さ59px */
  .r-product-detail .r-faq__q {
    min-height: 59px;
    gap: 14px;
    padding: 0 16px 0 14px;
  }

  .r-product-detail .r-faq__q-text {
    font-size: 14px;
    line-height: 1.5;
  }

  .r-product-detail .r-faq__a {
    gap: 14px;
    padding: 0 16px 20px 14px;
  }

  .r-product-detail .r-faq__a p {
    font-size: 12px;
    line-height: 19px;
  }

  .r-product-detail .r-faq__tab-pc {
    display: none;
  }

  .r-product-detail .r-faq__tab-sp {
    display: inline;
  }

  /* スペック: Figma SP 13:832 実測
       表 x17.5-373.5（356px）・項目列 66px（仕切り中心84）・y5305.5-5805.5（500px）
       本文は PC と同じ 13px / 行送り17px（字送り実測 12.75px が PC と一致）
       直前ブロック下端5209 → 見出し ink 上端5255 = 46px
       見出し ink 上端5255 → 表の上端5305.5 = 51px
       項目列は 66px しかないため、項目名の左右パディングを詰める
       （製品区分＝13px×4字＝52px。中央寄せなので見た目には影響しない） */
  .r-product-detail .specSection {
    padding: 41px 0 0;
  }

  .r-product-detail .specSectionTableOuter {
    width: calc(100% - 37px);
    margin-top: 38px;
  }

  .r-product-detail .specSectionTh,
  .r-product-detail .specSectionTd {
    padding: 14px 10px;
    font-size: 13px;
    line-height: 17px;
  }

  .r-product-detail .specSectionTh {
    width: 66px;
    padding-right: 4px;
    padding-left: 4px;
  }

  /* 肌悩みから探す: トップページと同じ3列グリッド（SP: 106px x3列）に統一。
     2026-09-16指示。 */
  .r-product-detail .r-detail-concerns {
    padding-top: 48px;
  }

  .r-product-detail .r-detail-concerns__list {
    grid-template-columns: repeat(3, 106px);
    gap: 5px;
    margin: 31px auto 0;
  }

  .r-product-detail .r-detail-concerns__list a {
    height: 45px;
    gap: 8px;
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
  }

  .r-product-detail .r-detail-concerns__icon {
    width: 15px;
    height: 15px;
  }

  /* 帯本体は renewal-shell.css の共通ルール。ここは商品詳細固有の上余白のみ。
     Figma SP: 肌悩みボタン下端5983.5 → 帯上端6042 = 58.5px */
  .r-product-detail .r-detail-history {
    margin-top: 59px;
  }

}