:root {
  --r-shell-ink: #212121;
  --r-shell-muted: #6f7476;
  --r-shell-line: #d9dddd;
  --r-shell-wash: #eef7f7;
  --r-shell-accent: #67aeb1;
  --r-shell-white: #fff;
}

body {
  color: var(--r-shell-ink);
}

body.is-menu-open {
  overflow: hidden;
}

.r-site-header {
  border-bottom: 1px solid rgba(33, 33, 33, 0.1);
  box-shadow: 0 1px 12px rgba(33, 33, 33, 0.03);
}

.r-site-header .headerAdvertisement {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  min-height: 24px;
  margin: 0;
  padding: 0 20px;
  box-sizing: border-box;
  background: #4bbdc3;
  color: #fff;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  text-align: center;
}

.r-site-header .header {
  max-width: 1600px;
  margin: 0 auto;
  padding: 8px 32px;
  box-sizing: border-box;
}

.r-site-header .headerLeft {
  min-width: 0;
}

.r-site-header .headerLogoLink {
  flex: 0 0 238px;
}

.r-site-header .headerLogo {
  width: 238px;
  height: auto;
  margin: 0;
  object-fit: contain;
}

.r-site-header .headerUl {
  gap: clamp(18px, 2.2vw, 38px);
  margin: 0 0 0 clamp(26px, 3vw, 54px);
  padding: 0;
}

.r-site-header .headerList {
  margin: 0;
  padding: 0;
}

.r-site-header .headerListLink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #000;
  font-family: "Tenor Sans", "Zen Kaku Gothic New", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.04em;
  opacity: 1;
  cursor: pointer;
}

.r-site-header .headerListLink:hover,
.r-site-header .headerListLink:focus-visible,
.r-site-header .headerUl > .linkCurrent > .headerListLink,
.r-site-header .headerProduct[aria-expanded="true"] {
  color: var(--r-shell-accent);
  opacity: 1;
}

.r-site-header .headerProduct {
  position: static;
  width: auto;
  height: auto;
}

.r-site-header .headerProduct::after {
  width: 6px;
  height: 6px;
  margin: -4px 0 0 8px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  content: "";
  transform: rotate(45deg);
  transition: transform 180ms ease;
}

.r-site-header .headerProduct[aria-expanded="true"]::after {
  margin-top: 3px;
  transform: rotate(225deg);
}

.r-site-header .headerLeftSearchOuter {
  margin-left: clamp(18px, 2vw, 34px);
}

.r-site-header .headerLeftSearchForm {
  width: clamp(120px, 12vw, 190px);
  padding: 4px 7px;
  border: 0;
  border-bottom: 1px solid var(--r-shell-ink);
  border-radius: 0;
}

.r-site-header .headerLeftSearchInput {
  width: 100%;
  min-width: 0;
  margin: 0 7px 0 0;
  padding: 4px;
  border: 0;
  background: transparent;
  outline: 0;
}

.r-site-header .headerRight {
  gap: 18px;
  margin-right: 0;
}

.r-site-header .headerRightLogoLink {
  display: grid;
  width: 44px;
  height: 44px;
  margin: 0;
  place-items: center;
}

.r-site-header .headerProductContent {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  width: 100%;
  max-height: calc(100vh - 112px);
  margin: 0;
  padding: 32px max(32px, calc((100vw - 1320px) / 2)) 40px;
  overflow: auto;
  box-sizing: border-box;
  border-top: 1px solid var(--r-shell-line);
  background: rgba(255, 255, 255, 0.99);
  box-shadow: 0 20px 36px rgba(33, 33, 33, 0.08);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.r-site-header.is-product-open {
  overflow: visible;
}

.r-site-header.is-product-open .headerProductContent {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.r-header-mega__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 22px;
}

.r-header-mega__heading p,
.r-header-mega__heading a,
.r-header-mega__label {
  margin: 0;
}

.r-header-mega__heading p {
  font-size: 13px;
  letter-spacing: 0.08em;
}

.r-header-mega__heading p span {
  margin-right: 14px;
  font-family: "Raleway", sans-serif;
  font-size: 21px;
  font-weight: 400;
  letter-spacing: 0.14em;
}

.r-header-mega__heading a {
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  color: var(--r-shell-ink);
  font-size: 12px;
}

.r-header-mega__label {
  color: var(--r-shell-muted);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.r-site-header .headerProductContentUl {
  gap: 16px;
  margin: 10px 0 30px;
}

.r-site-header .headerProductContentList {
  flex: 1 1 0;
  margin: 0;
}

.r-site-header .headerProductContentList a {
  display: block;
  color: var(--r-shell-ink);
}

.r-site-header .headerProductContentListImg {
  aspect-ratio: 16 / 7;
  object-fit: cover;
  background: var(--r-shell-wash);
  transition: opacity 180ms ease;
}

.r-site-header .headerProductContentList a:hover img {
  opacity: 0.82;
}

.r-site-header .headerProductContentListText {
  margin-top: 8px;
  color: var(--r-shell-ink);
  font-size: 12px;
  letter-spacing: 0.12em;
}

.r-header-mega__links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--r-shell-line);
}

.r-header-mega__links ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 12px 0 0;
  padding: 0;
}

.r-header-mega__links a {
  color: var(--r-shell-ink);
  font-size: 12px;
}

.r-header-mega__links a:hover,
.r-header-mega__links a:focus-visible {
  color: var(--r-shell-accent);
}

.r-site-header-sp {
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
  padding: 0 16px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--r-shell-line);
  background: var(--r-shell-white);
}

.r-site-header-sp .headerLogoLinkSp {
  display: flex;
  width: min(52vw, 205px);
  height: 54px;
  margin: 0;
  align-items: center;
}

.r-site-header-sp .headerLogo {
  width: 100%;
  height: auto;
  margin: 0;
  object-fit: contain;
}

.r-site-header-sp__actions {
  display: flex;
  gap: 2px;
}

.r-site-header-sp__actions a {
  display: grid;
  width: 42px;
  height: 44px;
  place-items: center;
}

.r-site-header-sp__actions img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.globalMenu {
  z-index: 1000;
}

.globalMenu.is-open {
  display: block;
}

.globalMenu[aria-hidden="true"] {
  display: none;
}

.globalMenu .globalMenuX {
  border: 0;
  cursor: pointer;
}

.footerFixed .footerFixedLink {
  min-height: 56px;
  padding: 4px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.footerFixed .footerFixedList + .footerFixedList {
  border-left: 1px solid rgba(255, 255, 255, 0.28);
}

#site-footer .accordionBtn {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

@media (max-width: 1260px) and (min-width: 961px) {
  .r-site-header .header {
    padding-inline: 22px;
  }

  .r-site-header .headerLogoLink {
    flex-basis: 190px;
  }

  .r-site-header .headerLogo {
    width: 190px;
  }

  .r-site-header .headerUl {
    gap: 16px;
    margin-left: 22px;
  }

  .r-site-header .headerLeftSearchOuter {
    display: none;
  }

  .r-site-header .headerRight {
    gap: 6px;
  }
}

@media only screen and (max-width: 960px) {
  .r-site-header-sp.headerSp {
    display: flex;
  }

  .globalMenu {
    position: fixed;
    inset: 0;
    display: none;
    width: 100%;
    height: 100dvh;
    padding: 18px 20px 104px;
    overflow: auto;
    box-sizing: border-box;
    background: var(--r-shell-white);
  }

  .globalMenu .globalMenuLogoContent {
    min-height: 54px;
    padding-right: 48px;
  }

  .globalMenu .globalMenuLogo {
    width: min(66vw, 245px);
  }

  .globalMenu .globalMenuX {
    top: 16px;
    right: 16px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--r-shell-ink);
  }

  .globalMenu .globalMenuX::before,
  .globalMenu .globalMenuX::after {
    top: 23px;
    left: 11px;
    width: 24px;
  }

  .globalMenu .globalMenuUl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 22px 0 0;
  }

  .globalMenu .globalMenuList {
    width: 100%;
    margin: 0;
    padding: 0;
    background: var(--r-shell-wash);
  }

  .globalMenu .globalMenuList:last-child {
    grid-column: 1 / -1;
  }

  .globalMenu .globalMenuList img {
    display: block;
    width: 100%;
    height: auto;
  }

  .globalMenu .globalMenuBottomUl {
    margin: 28px 0 0;
    padding: 0;
    border-top-color: var(--r-shell-line);
  }

  .globalMenu .globalMenuBottomList {
    padding: 17px 4px;
    border-bottom-color: var(--r-shell-line);
    font-size: 13px;
    letter-spacing: 0.04em;
  }

  .globalMenu .globalMenuBottomList a {
    display: block;
    color: var(--r-shell-ink);
  }

  .footerFixed {
    height: 72px;
    padding: 4px max(4px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
    background: rgba(74, 79, 80, 0.96);
    backdrop-filter: blur(8px);
  }

  #site-footer .footer-bottom-li {
    padding: 18px 4px;
    border-bottom-color: var(--r-shell-line) !important;
  }

  #site-footer .footer-bottom-li-summary {
    min-height: 28px;
    font-size: 16px;
    letter-spacing: 0.1em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .r-site-header .headerProductContent,
  .r-site-header .headerProduct::after,
  .r-site-header .headerProductContentListImg {
    transition: none;
  }
}

/* ============================================================
   種別バッジの色（商品詳細・商品一覧・TOPランキング/おすすめで共通）

   2026-08-31 判断: 当初は option09（種別テキスト）ごとに色分けする想定で
   data-product-type にキーを持たせていたが、Figma実測（GLOW/HYDRA/NUTRIENT の
   各カテゴリーページ、node 157:3292 / 157:2972 / 157:3568）の結果、実際は
   「そのページに並ぶ商品が属するシリーズ」で色が決まっていた（同じ「セラム」でも
   GLOW ページではピンク、HYDRA ページでは水色、NUTRIENT ページでは緑）。
   そのためキーを data-product-type から data-product-series（'glow'/'hydra'/'nutrient'。
   snippets/_product_series_key.html.liquid が product.master.sku から判定）に変更した。

   このファイルは header.liquid から全ページに読み込まれるので、ここだけ直せば
   商品詳細 (.r-product-detail__type)・商品一覧 (.r-product-card__type)・
   TOPランキング (.r-top-rank__tag)・TOPおすすめ製品 (.r-top-reco__tag)・
   最近見た製品 (.r-top-history__tag / .r-detail-history__tag) 全てに効く。
   色の値はFigma変数（get_variable_defs）で確認済み: GLOW="#f19db4" / NT="#a2d192" /
   HYDRA="#91c4eadb"（86%不透明度、白地上でのフラット値に換算）。

   2026-08-31 追記: 「最近見た製品」のタグは当初対象外にしていたが（カテゴリーページの
   Figmaで既定色に見えたため）、ユーザー指摘により見送りが誤りと判明。実際は表示中の
   数件がたまたま同じシリーズだっただけの可能性が高い。recently-viewed.js が
   _rv_thumbs.html.liquid のJSON（"series"キー、product_series_key由来）から
   data-product-series を付与するよう修正し、他のバッジと同じ扱いにした。
   ============================================================ */
[data-product-series="glow"]     { --r-type-color: #f19db4; }
[data-product-series="hydra"]    { --r-type-color: #a1cced; }
[data-product-series="nutrient"] { --r-type-color: #a2d192; }


/* ============================================================
   最近見た製品の帯（商品詳細ページ・商品一覧ページ共通）

   Figma の PC 13:2473 と 59:7564、SP 13:1356 と 13:832 を実測したところ
   帯・見出し・画像の寸法がすべて同じだったため、1か所にまとめている。
   上の余白だけはページごとに違うので、各ページのCSSで指定する。

   PC  帯1000x307 / 背景 #f6fbfc / 帯上端→見出しink 52px /
       見出しink→画像 55px / 画像132x132・間隔13px・左インセット86px /
       画像下端→帯下端 68px
   SP  帯 画面幅x182 / 帯上端→見出しink 24px / 見出しink→画像 34px /
       画像76x76・間隔8px・左インセット33px / 画像下端→帯下端 48px
   （↑は旧・画像のみ版の実測値。2026-08-31 にTOPページと同じ表示に統一したため
     画像サイズ・間隔・インセットは下記のとおり変更している。帯の背景色・全体幅は
     Figma実測で変わらないことを確認済み＝そのまま。PC画像サイズとカード間隔は
     TOPページ（.r-top-history、renewal-top.css）と同じ値をそのまま採用した。
     PCのインセットのみ、GLOW/HYDRA/NUTRIENTカテゴリーページの最近見た製品セクション
     （Figma node 157:3292 ほか）を実測し直して47pxに更新。）
   ============================================================ */
.r-detail-history[hidden] {
  display: none;
}

.r-detail-history {
  box-sizing: border-box;
  width: min(1000px, calc(100% - 64px));
  margin-inline: auto;
  padding: 46px 0 68px;
  background: #f6fbfc;
}

.r-detail-history__scroller {
  margin-top: 34px;
  padding: 0 47px;
  overflow-x: auto;
  overflow-y: hidden; /* 2026-08-28: 縦方向が既定のままだとブラウザに auto 扱いされ、
     トラックパッド等の縦スクロールをこの帯が拾って動いて見えてしまう */
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  /* 2026-09-09: ネイティブスクロールバーが価格テキスト直下に出て位置バランスが悪かったため、
     TOPページ(.r-top-history__scroller)と同じくスクロールバー自体を消し、
     矢印+ドット(reco_arrows/reco_dots)だけで操作させる形に統一 */
  scrollbar-width: none;
}

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

.r-detail-history__list {
  display: flex;
  width: max-content;
  gap: 22.1px; /* TOPページ(.r-top-history__list)と同じ値 */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 2026-08-31: TOPページ(.r-top-history)と同じ表示（商品名・カテゴリータグ・価格の
   テキスト、画像210x210、グレーグラデーション地+multiply）に統一。値は
   renewal-top.css の .r-top-history__* から転記。 */
.r-detail-history__item {
  display: flex;
  flex-direction: column;
  flex: 0 0 210px;
  width: 210px;
}

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

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

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

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

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

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

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

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

.r-detail-history__yen {
  /* renewal.css の --renewal-font-latin を直書き（詳細ページでは未定義のため） */
  font-family: "Tenor Sans", "Zen Kaku Gothic New", sans-serif;
  font-size: 14px;
  line-height: 1.1;
}

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

/* 見出し。商品詳細では .r-product-detail .productDetailTitle（同じ詳細度で
   renewal-detail.css が後勝ち）が当たるため、実質この指定は商品一覧側で効く。
   ベーステーマの inline style と競合しないよう帯の中にスコープしてある。
   Figma: 18px + .04em / 短線17x2px / 文字との間13px */
.r-detail-history .productDetailTitle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin: 0;
  padding: 0;
  color: #000;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .04em;
  text-align: center;
}

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

@media (max-width: 960px) {
  .r-detail-history {
    width: 100%;
    padding: 20px 0 48px;
  }

  .r-detail-history__scroller {
    margin-top: 20px;
    padding: 0 33px;
  }

  .r-detail-history__item {
    flex-basis: 76px;
    width: 76px;
  }

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

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

  .r-detail-history .productDetailTitle {
    gap: 11px;
    font-size: 12px;
  }

  /* 2026-08-31: TOPページ(.r-top-history)のSP版と同じ表示に統一。
     値は renewal-top.css の対応する @media ブロックから転記。 */
  .r-detail-history__body {
    margin-top: 9px;
  }

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

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

  .r-detail-history__capacity { display: none; }

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

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

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

/* ------------------------------------------------------------------ *
 * おすすめ製品の送り矢印（SP）
 *
 * Figma SP 13:5734 の Group 92。1:1 PNG のピクセル計測（2026-08-25）:
 *   左 x18–22 / 右 x369–373（右端から20px）。y は画像行の中央。
 *   線は 1px・#c1c1c1 相当、山の幅3.5px・高さ13px。
 *
 * ここは器（位置）だけを持つ。カードの寸法は各ページの CSS のまま
 * （カート = renewal-cart.css の .r-cart__recommend-*、
 *   検索結果 = 上の .r-detail-history__*）。
 * 動きは assets/reco-slider.js。矢印のマークアップは
 * snippets/_reco_arrows.html.liquid。
 *
 * 「最近見た製品」（.r-detail-history 単体）には .r-reco を付けないので、
 * 商品詳細・商品一覧の帯はこれまでどおり矢印なしの横スクロールのまま。
 * ------------------------------------------------------------------ */

.r-reco {
  position: relative;
}

/* PC は Figma（13:4777 ほか）に矢印が無いので出さない */
.r-reco__arrow {
  display: none;
}

/* ページ送りドット（PC）。2026-08-28 追加指摘・Figma 145:1781 ほかで判明。
   見た目は「最近見た製品／メディア」のドット（renewal-top.css の .r-top-dots）と同じ値。
   SPは矢印のみでドットを出さない（下の @media で非表示）。
   枚数・現在地は assets/reco-slider.js が実寸から出す（ここは見た目だけ）。 */
.r-reco__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 49px 0 0;
  padding: 0;
  list-style: none;
}

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

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

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

@media only screen and (max-width: 960px) {
  .r-reco__arrow {
    position: absolute;
    /* 2026-08-28 指摘: Figmaでは矢印は「画像の横」＝画像の縦中央に来る。
       top: 50% だと、商品名・価格を足して .r-reco 自体が画像より背が高く
       なった今、カード全体の中央に来てしまい画像からズレていた。
       scroller の margin-top は .r-reco 自身のマージンとして上に相殺（collapse）
       されるため、.r-reco の上端は実際には画像の上端と一致する（実測で確認）。
       よって画像中央は画像高さ76pxの半分、38pxでよい。 */
    top: 38px;
    display: block;
    width: 4px;
    height: 13px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    transform: translateY(-50%);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }

  /* 見た目は Figma どおり 4×13 のまま、指で押せるように当たり判定だけ広げる。
     32×77px。カード（左端33px）に少しかぶるが、かぶるのは矢印側の余白部分だけ。 */
  .r-reco__arrow::after {
    content: "";
    position: absolute;
    inset: -32px -14px;
  }

  .r-reco__arrow--prev { left: 18px; }
  .r-reco__arrow--next { right: 20px; }

  .r-reco__arrow svg { display: block; }

  /* カードが1画面に収まっていて送る先が無いときは矢印を出さない
     （押しても動かないボタンを残さない）。付け外しは reco-slider.js。 */
  .r-reco.is-static .r-reco__arrow { display: none; }

  /* 2026-08-28 指摘: SPもFigmaにドットが描かれている（矢印と併用）。
     以前「SPはドット無し」と判断したのは誤り。SPはカードが小さい分、
     価格下端→ドットの余白もPCの49pxより詰まる（Figma実測 約24px）。 */
  .r-reco__dots { margin-top: 24px; }
}