/* ==========================================================================
   00 変数（デザイントークン）・リセット・本文の基本・ユーティリティ
   --------------------------------------------------------------------------
   置き場所 : オリジナルCSS
   書くもの : 色や余白の変数を変えたいとき／全ページに効く土台を触るとき
   読み込み順: 0 番目（番号が大きいほど後＝強い）
   ※ ファイルを増やす／順番を変えるときは scripts/split_css.py と
     assets/css/README.md も一緒に直すこと
   ========================================================================== */

/* ============================================================
   RESET（最低限）
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
button { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
input, button { font-family: inherit; }

/* ============================================================
   DESIGN TOKENS（既存仕様準拠）
   ============================================================ */
:root {
  --color-text: #1a1a1a;
  --color-ink: #1a1a1a;
  --color-text-sub: #4a4a4a;
  --color-text-mute: #6c6c6c;
  --color-gold: #8d6f4d;
  --color-gold-bright: #b8956a;
  --color-gold-dark: #6f5638;
  --color-line: #d8d4cd;
  --color-line-soft: #e8e6e0;
  --color-bg: #ffffff;
  --color-bg-soft: #f7f7f5;
  --color-focus: #8d6f4d;
  --color-price: #c8102e;

  --font-sans: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", "Times New Roman", serif;

  --container-max: 1280px;
  --header-z: 100;
  --drawer-z: 200;

  /* 追従ヘッダーの実測高。アンカーで飛んだときの逃げ幅に使う。
     SP＝黒帯32 + バー60 + border1。ヘッダーの切替は 1024px（768pxではない） */
  --rs-header-h: 93px;
}
@media (min-width: 1024px) {
  :root { --rs-header-h: 125px; }   /* 黒帯48 + メイン76 + border1 */
}

/* ページ内アンカー・scrollIntoView の着地点をヘッダーの下へ。
   要素ごとの scroll-margin-top を書かなくても全ページに効く */
html { scroll-padding-top: calc(var(--rs-header-h) + 12px); }

/* ============================================================
   BASE
   ============================================================ */
body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   UTILITY
   ============================================================ */
.rs-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.rs-skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: calc(var(--header-z) + 10);
  background: var(--color-text);
  color: #fff;
  padding: 12px 20px;
  font-size: 16px;
  border-radius: 4px;
}
.rs-skip-link:focus {
  top: 16px;
  outline: 3px solid var(--color-gold);
  outline-offset: 2px;
}

.rs-header a:focus-visible,
.rs-header button:focus-visible,
.rs-header input:not([type="search"]):focus-visible,
.rs-drawer a:focus-visible,
.rs-drawer button:focus-visible,
.rs-drawer input:not([type="search"]):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* ドロワー／モーダルを開けている間、背面をスクロールさせない
   （01-header のドロワーと 06-page-product の追従バーが参照する） */
body.rs-no-scroll { overflow: hidden; }

address { font-style: normal; }

/* スマホだけで改行する <br class="rs-only-sp">（PCでは消す）。
   パーツ35か所で使っているのに定義が抜けていた（CSSを番号付きファイルに整理したときに消えたとみられる・2026-10-13 復旧） */
@media (min-width: 768px) {
  .rs-only-sp { display: none; }
}


/* ==========================================================================
   01 ヘッダー（PC黒帯・PCメイン・SPバー）とドロワー・検索パネル
   --------------------------------------------------------------------------
   置き場所 : オリジナルCSS
   書くもの : ヘッダーまわり全部。SPのハンバーガー、検索、カートアイコンもここ
   読み込み順: 1 番目（番号が大きいほど後＝強い）
   ※ ファイルを増やす／順番を変えるときは scripts/split_css.py と
     assets/css/README.md も一緒に直すこと
   ========================================================================== */

.rs-header {
  background: var(--color-bg);
  position: sticky;
  top: 0;
  z-index: var(--header-z);
  border-bottom: 1px solid var(--color-line);
}

.rs-header__pc { display: none; }
.rs-header__sp { display: block; }

@media (min-width: 1024px) {
  .rs-header__pc { display: block; }
  .rs-header__sp { display: none; }
}

/* ============================================================
   PC : UTILITY BAR（黒帯・検索窓を統合）
   ============================================================ */
.rs-header__utility {
  background: var(--color-text);
  color: #fff;
}
.rs-header__utility-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.rs-header__shipping-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.rs-header__shipping-info svg {
  width: 14px;
  height: 14px;
  stroke: var(--color-gold-bright);
  stroke-width: 1.5;
  fill: none;
  flex-shrink: 0;
}

/* 黒帯右側のグループ（リンク群＋検索窓） */
.rs-header__utility-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.rs-header__utility-nav {
  display: flex;
  align-items: center;
  gap: 0;
}
/* fs-clientInfo を付けたので、futureshop の .fs-clientInfo.is-ready { display:block } に負けないよう横並びを上書き
   （準備前は fs_style が display:none !important で隠す。そこは触らない） */
.rs-header__utility-nav.fs-clientInfo.is-ready { display: flex; }
.rs-header__utility-nav li { position: relative; }
.rs-header__utility-nav li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.25);
}
.rs-header__utility-nav a {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  height: 48px;
  font-size: 13px;
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}
.rs-header__utility-nav a:hover { color: var(--color-gold-bright); }

/* 黒帯内の検索窓（ZOZO風） */
.rs-header__utility-search {
  width: 280px;
}
.rs-header__search-wrap {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 999px;
  padding: 0 4px 0 14px;
  height: 34px;
}
.rs-header__search-icon {
  width: 15px;
  height: 15px;
  stroke: var(--color-text-mute);
  stroke-width: 2;
  fill: none;
  flex-shrink: 0;
}
.rs-header__search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0 10px;
  height: 100%;
  font-size: 14px;
  color: var(--color-text);
  outline: none;
}
.rs-header__search-input::placeholder { color: var(--color-text-mute); }
/* 検索 input のフォーカス枠は完全に消す（PC・SP共通） */
.rs-header input[type="search"]:focus,
.rs-header input[type="search"]:focus-visible {
  outline: none;
  box-shadow: none;
}
.rs-header__search-submit {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--color-gold);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
  border: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  -webkit-appearance: none;
}
.rs-header__search-submit::-moz-focus-inner {
  border: 0;
  padding: 0;
}
.rs-header__search-submit:focus,
.rs-header__search-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(184, 149, 106, 0.35);
}
.rs-header__search-submit svg {
  width: 12px;
  height: 12px;
  stroke: #fff;
  stroke-width: 2.5;
  fill: none;
}
.rs-header__search-submit:hover { background: var(--color-gold-dark); }

/* ============================================================
   PC : MAIN HEADER（1行：ロゴ｜ナビ｜カート）
   ★前回ミニマル構成を継承・検索は黒帯へ移動★
   ============================================================ */
.rs-header__main {
  background: var(--color-bg);
}
.rs-header__main-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
  height: 76px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
}

/* ロゴ（前回踏襲：明朝・小文字混じり） */
.rs-header__logo {
  font-family: var(--font-serif);
  font-size: 26px;
  letter-spacing: 0.05em;
  color: var(--color-ink);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}
.rs-header__logo:hover { color: var(--color-gold-dark); }

/* グローバルナビ（中央配置） */
.rs-header__nav { justify-self: center; }
.rs-header__nav-list {
  display: flex;
  align-items: center;
  gap: 0;
}
.rs-header__nav-list a {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0 20px;
  height: 76px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-ink);
  letter-spacing: 0.04em;
  transition: color 0.2s ease;
  white-space: nowrap;
}
.rs-header__nav-list a::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 14px;
  height: 2px;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}
.rs-header__nav-list a:hover { color: var(--color-gold-dark); }
.rs-header__nav-list a:hover::after,
.rs-header__nav-list a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* カート（右端） */
.rs-header__cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;            /* 数字のバッジが「カート」の文字にかからないよう広げた（2026-10-15） */
  padding: 0 14px;
  height: 44px;
  border-radius: 8px;
  color: var(--color-ink);
  transition: background 0.2s ease;
  font-size: 14px;
  font-weight: 500;
}
.rs-header__cart:hover { background: var(--color-bg-soft); }
.rs-header__cart svg {
  width: 22px;
  height: 22px;
  stroke: var(--color-ink);
  stroke-width: 1.5;
  fill: none;
}
.rs-header__cart-label {
  font-size: 14px;
  letter-spacing: 0.04em;
}
.rs-header__cart-badge {
  position: absolute;
  top: 3px;
  left: 27px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--color-price);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 2px solid var(--color-bg);
}
.rs-header__cart-badge[data-count="0"] { display: none; }

/* 中間幅（1024〜1199px）でナビが詰まりそうな対応 */
@media (min-width: 1024px) and (max-width: 1199px) {
  .rs-header__nav-list a {
    padding: 0 14px;
    font-size: 14px;
  }
  .rs-header__utility-search { width: 220px; }
  .rs-header__main-inner { gap: 20px; }
  .rs-header__utility-nav a { padding: 0 8px; font-size: 12px; }
  .rs-header__shipping-info { font-size: 12px; }
}

/* ============================================================
   SP : HEADER
   ============================================================ */

/* SP黒帯（コンパクト） */
.rs-header__utility-sp {
  background: var(--color-text);
  color: #fff;
}
.rs-header__utility-sp-inner {
  padding: 0 16px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.rs-header-sp__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 8px;
  height: 60px;
  position: relative;
}
.rs-header-sp__bar .rs-header-sp__menu { justify-self: start; }
.rs-header-sp__bar .rs-header-sp__logo { justify-self: center; }
.rs-header-sp__bar .rs-header-sp__right { justify-self: end; }

.rs-header-sp__menu,
.rs-header-sp__search-toggle,
.rs-header-sp__cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--color-ink);
  position: relative;
  -webkit-tap-highlight-color: transparent;
  background: transparent;
  border: 0;
}
.rs-header-sp__menu:hover,
.rs-header-sp__search-toggle:hover,
.rs-header-sp__cart:hover { background: transparent; color: var(--color-gold-dark); }
.rs-header-sp__menu:active,
.rs-header-sp__search-toggle:active,
.rs-header-sp__cart:active { color: var(--color-gold-dark); }
/* focus-visible はキーボード操作時のみ */
.rs-header-sp__menu:focus,
.rs-header-sp__search-toggle:focus,
.rs-header-sp__cart:focus { outline: none; }
.rs-header-sp__menu:focus-visible,
.rs-header-sp__search-toggle:focus-visible,
.rs-header-sp__cart:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}
.rs-header-sp__menu svg,
.rs-header-sp__search-toggle svg,
.rs-header-sp__cart svg {
  width: 24px;
  height: 24px;
  stroke: var(--color-ink);
  stroke-width: 1.5;
  fill: none;
}

.rs-header-sp__logo {
  font-family: var(--font-serif);
  font-size: 22px;
  letter-spacing: 0.05em;
  color: var(--color-ink);
  font-weight: 400;
  line-height: 1;
}

.rs-header-sp__right {
  display: flex;
  align-items: center;
  gap: 2px;
}

.rs-header-sp__cart-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--color-price);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 2px solid var(--color-bg);
}
.rs-header-sp__cart-badge[data-count="0"] { display: none; }

/* SP : 検索パネル（下りる） */
.rs-header-sp__search-panel {
  background: var(--color-bg-soft);
  border-top: 1px solid var(--color-line-soft);
  border-bottom: 1px solid var(--color-line);
  padding: 12px 16px;
  display: none;
}
.rs-header-sp__search-panel[data-open="true"] { display: block; }
.rs-header-sp__search-panel form {
  display: flex;
  align-items: center;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 0 6px 0 16px;
  height: 44px;
}
.rs-header-sp__search-panel input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0 8px;
  height: 100%;
  font-size: 16px;
  color: var(--color-text);
  outline: none;
}
.rs-header-sp__search-panel button[type="submit"] {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--color-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rs-header-sp__search-panel button[type="submit"] svg {
  width: 14px;
  height: 14px;
  stroke: #fff;
  stroke-width: 2.5;
  fill: none;
}

/* ============================================================
   DRAWER（SP メニュー）
   ============================================================ */
.rs-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: var(--drawer-z);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.rs-drawer-overlay[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}

.rs-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 86%;
  max-width: 380px;
  height: 100vh;
  height: 100dvh;
  background: var(--color-bg);
  z-index: calc(var(--drawer-z) + 1);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.rs-drawer[data-open="true"] { transform: translateX(0); }

.rs-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 16px 24px;
  border-bottom: 1px solid var(--color-line);
  height: 60px;
}
.rs-drawer__title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  margin: 0;
  letter-spacing: 0.08em;
}
.rs-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  color: var(--color-ink);
}
.rs-drawer__close svg {
  width: 22px;
  height: 22px;
  stroke: var(--color-ink);
  stroke-width: 1.5;
  fill: none;
}
.rs-drawer__close:hover { background: var(--color-bg-soft); }

.rs-drawer__user {
  padding: 16px 24px;
  background: var(--color-bg-soft);
  border-bottom: 1px solid var(--color-line);
}
.rs-drawer__user-greeting {
  font-size: 14px;
  color: var(--color-text-mute);
  margin: 0 0 6px;
}
.rs-drawer__user-name {
  font-size: 17px;
  color: var(--color-text);
  margin: 0 0 8px;
  font-weight: 500;
}
.rs-drawer__user-points {
  font-size: 14px;
  color: var(--color-text-sub);
  margin: 0 0 12px;
}
.rs-drawer__user-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: var(--color-gold-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ログイン状態による表示切替（futureshop: my-{@ member.logged_in @} → my-true / my-false）
   {@ @} は親に .fs-clientInfo があるときだけ置き換わる。会員用は「my-true のときだけ出す」書き方にして、
   置き換え前・失敗時でも会員名の記号や「ログアウト」がゲストに見えないようにする（2026-10-13） */
.rs-drawer__user-guest.my-true,
.rs-util-guest.my-true,
.rs-drawer__user-member:not(.my-true),
.rs-util-member:not(.my-true) { display: none; }

.rs-drawer__section {
  padding: 16px 0;
  border-bottom: 1px solid var(--color-line-soft);
}
.rs-drawer__section:last-child { border-bottom: 0; }
.rs-drawer__section-title {
  padding: 0 24px;
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--color-gold-dark);
  text-transform: uppercase;
}
.rs-drawer__list {
  display: flex;
  flex-direction: column;
}
.rs-drawer__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  font-size: 17px;
  color: var(--color-text);
  min-height: 52px;
  transition: background 0.2s ease;
}
.rs-drawer__list a:hover,
.rs-drawer__list a:focus-visible { background: var(--color-bg-soft); }
.rs-drawer__list a::after {
  content: "›";
  font-size: 22px;
  color: var(--color-text-mute);
  line-height: 1;
}
.rs-drawer__list a.rs-drawer__list-link--accent {
  color: var(--color-gold-dark);
  font-weight: 500;
}

.rs-drawer__lang {
  padding: 20px 24px 32px;
  text-align: center;
}
.rs-drawer__lang a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: 0.15em;
  color: var(--color-text-sub);
  font-weight: 600;
}
.rs-drawer__lang a:hover {
  border-color: var(--color-gold);
  color: var(--color-gold-dark);
}


/* ==========================================================================
   02 フッター6セクションと futureshop のラッパー（fs-l-*）
   --------------------------------------------------------------------------
   置き場所 : オリジナルCSS
   書くもの : フッター全部。fs-l-page / fs-l-main などページ全体の枠もここ
   読み込み順: 2 番目（番号が大きいほど後＝強い）
   ※ ファイルを増やす／順番を変えるときは scripts/split_css.py と
     assets/css/README.md も一緒に直すこと
   ========================================================================== */

/* ============================================================
   FOOTER 基底
   ============================================================ */
.rs-footer {
  margin-top: 120px;
}
@media (min-width: 768px) {
  .rs-footer {
    margin-top: 160px;
  }
}
.rs-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================================================
   1. 安心訴求バンド
   ============================================================ */
.rs-footer-trust {
  background: var(--color-bg-soft);
  border-top: 1px solid var(--color-line-soft);
  border-bottom: 1px solid var(--color-line-soft);
  padding: 48px 0;
}
@media (min-width: 768px) {
  .rs-footer-trust {
    padding: 56px 0;
  }
}
.rs-footer-trust__grid {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 1024px) {
  .rs-footer-trust__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}

.rs-footer-trust__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.rs-footer-trust__icon {
  width: 36px;
  height: 36px;
  stroke: var(--color-gold-dark);
  stroke-width: 1.5;
  fill: none;
}
.rs-footer-trust__title {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  letter-spacing: 0.04em;
}
.rs-footer-trust__desc {
  font-size: 14px;
  color: var(--color-text-sub);
  margin: 0;
  line-height: 1.7;
}

/* ============================================================
   2. サイトマップ（4カラム・アコーディオン無し）
   ============================================================ */
.rs-footer-sitemap {
  background: var(--color-bg);
  padding: 56px 0;
}
@media (min-width: 768px) {
  .rs-footer-sitemap {
    padding: 72px 0;
  }
}
.rs-footer-sitemap__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px 40px;
}
@media (min-width: 768px) {
  .rs-footer-sitemap__inner {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .rs-footer-sitemap__inner {
    grid-template-columns: repeat(4, 1fr);
    gap: 0 40px;
  }
}

.rs-footer-sitemap__col {
  min-width: 0;
}
.rs-footer-sitemap__title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-gold-dark);
  letter-spacing: 0.04em;
  line-height: 1.5;
}
@media (min-width: 1024px) {
  .rs-footer-sitemap__title {
    font-size: 17px;
  }
}

.rs-footer-sitemap__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rs-footer-sitemap__list li + li {
  margin-top: 2px;
}
.rs-footer-sitemap__list a {
  display: block;
  padding: 8px 0;
  font-size: 14px;
  color: var(--color-text-sub);
  line-height: 1.6;
  transition: color 0.2s ease;
}
.rs-footer-sitemap__list a:hover {
  color: var(--color-gold-dark);
}

/* ============================================================
   3. 会員特典訴求バンド
   ============================================================ */
.rs-footer-member {
  background: var(--color-bg);
  border-top: 1px solid var(--color-line-soft);
  border-bottom: 1px solid var(--color-line-soft);
  padding: 56px 0;
  text-align: center;
}
@media (min-width: 768px) {
  .rs-footer-member {
    padding: 72px 0;
  }
}
.rs-footer-member__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}
.rs-footer-member__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--color-gold-dark);
  margin: 0 0 8px;
  text-transform: uppercase;
}
.rs-footer-member__title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 16px;
  letter-spacing: 0.06em;
  line-height: 1.4;
}
@media (min-width: 768px) {
  .rs-footer-member__title { font-size: 26px; }
}
.rs-footer-member__benefits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin: 0 0 24px;
  font-size: 14px;
  color: var(--color-text-sub);
  list-style: none;
}
.rs-footer-member__benefits li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rs-footer-member__benefits li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-gold);
  flex-shrink: 0;
}
.rs-footer-member__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: var(--color-gold);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  border-radius: 999px;
  transition: background 0.2s ease;
  min-height: 48px;
}
.rs-footer-member__cta:hover {
  background: var(--color-gold-dark);
}
.rs-footer-member__cta::after {
  content: "→";
  transition: transform 0.2s ease;
}
.rs-footer-member__cta:hover::after {
  transform: translateX(2px);
}

/* ============================================================
   3-2. 試着室予約バンド（会員バンドの下）
   ============================================================ */
.rs-footer-fitting {
  background: var(--color-bg-soft);
  padding: 56px 0;
  text-align: center;
  border-bottom: 1px solid var(--color-line-soft);
}
@media (min-width: 768px) {
  .rs-footer-fitting {
    padding: 72px 0;
  }
}
.rs-footer-fitting__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
}
.rs-footer-fitting__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--color-gold-dark);
  margin: 0 0 8px;
  text-transform: uppercase;
}
.rs-footer-fitting__title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 12px;
  letter-spacing: 0.06em;
  line-height: 1.5;
}
@media (min-width: 768px) {
  .rs-footer-fitting__title { font-size: 24px; }
}
.rs-footer-fitting__desc {
  font-size: 14px;
  color: var(--color-text-sub);
  margin: 0 0 20px;
  line-height: 1.8;
}
.rs-footer-fitting__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: var(--color-gold);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  border-radius: 999px;
  transition: background 0.2s ease;
  min-height: 48px;
}
.rs-footer-fitting__cta:hover {
  background: var(--color-gold-dark);
}
.rs-footer-fitting__cta::after {
  content: "→";
  transition: transform 0.2s ease;
}
.rs-footer-fitting__cta:hover::after {
  transform: translateX(2px);
}

/* ============================================================
   5. 店舗情報＋SNS＋ユーティリティ（濃グレー背景）
   ============================================================ */
.rs-footer-info {
  background: #2c2c2c;
  color: rgba(255, 255, 255, 0.85);
  padding: 56px 0;
}
@media (min-width: 768px) {
  .rs-footer-info {
    padding: 72px 0;
  }
}
.rs-footer-info__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 768px) {
  .rs-footer-info__inner {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
  }
}
@media (min-width: 1024px) {
  .rs-footer-info__inner {
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 48px;
  }
}

/* ブランド */
.rs-footer-brand__logo {
  font-family: var(--font-serif);
  font-size: 26px;
  letter-spacing: 0.05em;
  color: #fff;
  font-weight: 400;
  display: inline-block;
  margin-bottom: 12px;
  line-height: 1;
}
.rs-footer-brand__tagline {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.1em;
  margin: 0 0 16px;
}
.rs-footer-brand__story {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.9;
  margin: 0;
}

/* 店舗情報 */
.rs-footer-shop__title,
.rs-footer-social__title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--color-gold-bright);
  text-transform: uppercase;
  margin: 0 0 16px;
}
.rs-footer-shop__address {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.8;
  margin: 0 0 12px;
}
.rs-footer-shop__address strong {
  color: #fff;
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}
.rs-footer-shop__tel {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: #fff;
  font-weight: 600;
  margin: 12px 0 4px;
  letter-spacing: 0.04em;
}
.rs-footer-shop__tel svg {
  width: 16px;
  height: 16px;
  stroke: var(--color-gold-bright);
  stroke-width: 1.5;
  fill: none;
}
.rs-footer-shop__tel a { color: #fff; }
.rs-footer-shop__hours {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 16px;
}

/* SNS */
.rs-footer-social__list {
  display: flex;
  gap: 12px;
  margin: 0 0 24px;
}
.rs-footer-social__list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  color: #fff;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.rs-footer-social__list a:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: #fff;
}
.rs-footer-social__list svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* ユーティリティリンク（メルマガ・英語サイト） */
.rs-footer-utility {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.rs-footer-utility a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  letter-spacing: 0.06em;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
  width: 220px;
  min-height: 44px;
  justify-content: flex-start;
}
.rs-footer-utility a:hover {
  border-color: var(--color-gold-bright);
  color: var(--color-gold-bright);
  background: rgba(255, 255, 255, 0.04);
}
.rs-footer-utility a svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  flex-shrink: 0;
}

/* ============================================================
   6. 最下部バンド（著作権）
   ============================================================ */
.rs-footer-bottom {
  background: var(--color-text);
  color: rgba(255, 255, 255, 0.7);
  padding: 24px 0;
}
.rs-footer-bottom__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  text-align: center;
  letter-spacing: 0.04em;
  line-height: 1.7;
}
.rs-footer-bottom__notice {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
}
.rs-footer-bottom__copy {
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ==========================================================================
   futureshop システムラッパー対応（fs-l-*）
   body > .fs-l-page > .fs-l-header / .fs-l-main > .fs-l-pageMain / .fs-l-footer
   ※ スケルトン既定の余白・幅はプレビューで確認しながら微調整する
   ========================================================================== */
/* overflow-x:hidden は overflow-y を auto に格上げしてスクロールコンテナを作り、
   .rs-header（position:sticky）の追従を全ページで殺していた。
   clip はスクロールコンテナを作らないので sticky が生きる。
   1行目は overflow:clip 非対応（Safari 15以前）向けのフォールバック */
.fs-l-page {
  overflow-x: hidden;
  overflow-x: clip;
}
.fs-l-header { position: relative; z-index: var(--header-z); }
/* 各セクションが自前の inner（max-width + padding）を持つため、pageMain は全幅で受ける */
.fs-l-pageMain { width: 100%; margin: 0; padding: 0; }

/* 共通フォーカススタイル（ヘッダー側は 00-base.css にある） */
.rs-footer a:focus-visible,
.rs-footer button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 2px;
}


/* ==========================================================================
   03 トップページ専用
   --------------------------------------------------------------------------
   置き場所 : オリジナルCSS
   書くもの : ヒーロー・お知らせバンド・カテゴリ入口・新作・ブランドストーリー・読みもの3件
   読み込み順: 3 番目（番号が大きいほど後＝強い）
   ※ ファイルを増やす／順番を変えるときは scripts/split_css.py と
     assets/css/README.md も一緒に直すこと
   ========================================================================== */

/* ========================================== */
/* === ヒーロー（フルブリード・自動切替スライダー） === */
/* ========================================== */
.rs-hero {
  position: relative;
  width: 100%;
  /* スマホは 4:3（375px幅で281px）。1:1だと初画面がヒーローで終わってしまい、
     下に続きがあることが伝わらない。PCは 80vh 基準で固定比を持たないので、
     ここを「PCと同じ」にはできない（ウィンドウ次第で 1.9:1〜2.4:1 になる）。
     2:1まで詰めるとヒーロー内のコピーがあふれてヘッダーに重なる */
  aspect-ratio: 4 / 3;
  /* 320〜767px の全域で 4:3 を保てる範囲に置く（240px〜575px） */
  min-height: 240px;
  max-height: 580px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .rs-hero {
    aspect-ratio: auto;
    height: 70vh;
    min-height: 480px;
    max-height: 720px;
  }
}
@media (min-width: 1024px) {
  .rs-hero {
    height: 80vh;
    min-height: 560px;
    max-height: 800px;
  }
}
.rs-hero__slides {
  position: absolute;
  inset: 0;
}
.rs-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
  pointer-events: none;
}
.rs-hero__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.rs-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* 実画像。コピーは左下に出るので、左と下を落とすスクリムを敷く（2026-09-17） */
.rs-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* PCは 80vh＝約2:1 まで横長になり、中央クロップだと人物の頭が切れる。
     上寄り（10%）に寄せて、切るのは裾側にする（2026-09-17） */
  object-position: 50% 10%;
  display: block;
}
/* 1枚目は5人の全身集合。頭上の余白13.5%に対し足元は5.6%しかないので、
   2.4:1まで横長になっても頭が残るところ（45%）に置く。
   削れるのは靴先だけになる（2026-09-17） */
.rs-hero__slide:nth-child(1) .rs-hero__media img {
  object-position: 50% 45%;
}
/* 2枚目は頭上の余白がほとんど無い寄りカット。上端そろえで頭を必ず残す */
.rs-hero__slide:nth-child(2) .rs-hero__media img {
  object-position: 50% 0%;
}
.rs-hero__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to top,   rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.26) 26%, rgba(0,0,0,0) 56%),
    linear-gradient(to right, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0.12) 38%, rgba(0,0,0,0) 68%);
}
/* 試着室の写真（スライド5）は左側が明るく、白文字が沈む。ここだけスクリムを強める */
.rs-hero__slide:nth-child(5)::after {
  background:
    linear-gradient(to top,   rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.42) 30%, rgba(0,0,0,0.06) 62%),
    linear-gradient(to right, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.26) 40%, rgba(0,0,0,0) 72%);
}
/* スマホは下の余白を 46px にして、リンク（.rs-hero__cta）1行ぶんの高さを確保する（2026-10-13） */
.rs-hero__overlay {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 46px;
  color: white;
  z-index: 2;
}
@media (min-width: 768px) {
  .rs-hero__overlay {
    left: 64px;
    right: auto;
    bottom: 96px;
    max-width: 720px;
  }
}
.rs-hero__eyebrow {
  font-size: 11px;
  letter-spacing: 0.25em;
  font-weight: 600;
  margin: 0 0 12px;
  color: rgba(255,255,255,0.85);
}
@media (min-width: 768px) {
  .rs-hero__eyebrow { font-size: 12px; margin: 0 0 16px; }
}
.rs-hero__title {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.04em;
  margin: 0 0 12px;
  color: white;
  text-shadow: 0 2px 16px rgba(0,0,0,0.3);
  word-break: keep-all;
  overflow-wrap: normal;
}
.rs-hero__title-line {
  display: block;
}
@media (min-width: 768px) {
  .rs-hero__title { font-size: 48px; margin: 0 0 16px; }
}
@media (min-width: 1024px) {
  .rs-hero__title { font-size: 56px; }
}
.rs-hero__lead {
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255,255,255,0.95);
  margin: 0;
  max-width: 480px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 768px) {
  .rs-hero__lead {
    font-size: 17px;
    margin: 0 0 32px;
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
  }
}

/* リンク（2026-10-13）
   文字のリンク .rs-hero__cta と、スライド全体を覆うリンク .rs-hero__link の2本。
   コピーの上を押しても飛べるよう overlay はクリックを通し、表示中のスライドのCTAだけ受ける。
   ※ CTAに pointer-events:auto を無条件で付けると、非表示のスライド（重なっている）のCTAまで押せてしまう */
.rs-hero__link {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.rs-hero__overlay { pointer-events: none; }
.rs-hero__slide.is-active .rs-hero__cta { pointer-events: auto; }
.rs-hero__cta {
  display: inline-block;
  margin-top: 8px;
  padding: 2px;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: white;
  border-bottom: 1px solid rgba(255,255,255,0.7);
  text-shadow: 0 1px 8px rgba(0,0,0,0.3);
  transition: border-color 0.2s;
}
.rs-hero__slide:hover .rs-hero__cta,
.rs-hero__cta:hover { border-bottom-color: white; }
.rs-hero__cta:focus-visible { outline: 2px solid white; outline-offset: 4px; }
@media (min-width: 768px) {
  .rs-hero__cta { margin-top: 0; padding: 10px 4px; font-size: 14px; }
}
/* 幅320px前後の小さいスマホは、コピーが写真の上にはみ出さないよう文字を一段小さく */
@media (max-width: 359px) {
  .rs-hero__title { font-size: 22px; }
  .rs-hero__lead { font-size: 14px; }
}

/* インジケーター */
.rs-hero__indicators {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
  display: flex;
  gap: 8px;
  z-index: 3;
}
@media (min-width: 768px) {
  .rs-hero__indicators {
    left: auto;
    right: 64px;
    transform: none;
    bottom: 96px;
  }
}
.rs-hero__indicator {
  width: 24px;
  height: 2px;
  background: rgba(255,255,255,0.4);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.3s ease;
  position: relative;
}
@media (min-width: 768px) {
  .rs-hero__indicator { width: 32px; }
}
.rs-hero__indicator::before {
  content: "";
  position: absolute;
  inset: -8px;
}
.rs-hero__indicator.is-active {
  background: rgba(255,255,255,1);
}
.rs-hero__indicator:hover { background: rgba(255,255,255,0.8); }

/* ========================================== */
/* === お知らせバンド（休業・イベント） === */
/* ========================================== */
.rs-announce {
  background: white;
  padding: 32px 0 0;
}
@media (min-width: 768px) {
  .rs-announce { padding: 48px 0 0; }
}
.rs-announce__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 768px) {
  .rs-announce__inner { padding: 0 32px; gap: 24px; }
}

/* --- 休業案内 --- */
.rs-announce-notice {
  background: var(--color-bg-soft);
  border-left: 3px solid var(--color-gold-bright);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (min-width: 768px) {
  .rs-announce-notice {
    padding: 22px 28px;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
  }
}
.rs-announce-notice__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .rs-announce-notice__head {
    width: 240px;
    border-right: 1px solid var(--color-line);
    padding-right: 24px;
    align-self: stretch;
  }
}
.rs-announce-notice__icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold-dark);
}
.rs-announce-notice__title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-ink);
  margin: 0;
  line-height: 1.5;
  /* 見出しは <wbr> の位置でだけ改行する（「お知ら／せ」のような泣き別れを防ぐ） */
  word-break: keep-all;
  overflow-wrap: anywhere;
}
@media (min-width: 768px) {
  .rs-announce-notice__title { font-size: 17px; }
}
.rs-announce-notice__body {
  flex: 1;
}
.rs-announce-notice__period {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-text-sub);
  margin: 0 0 4px;
  letter-spacing: 0.05em;
}
@media (min-width: 768px) {
  .rs-announce-notice__period { font-size: 14px; }
}
/* 日付と曜日を泣き別れさせない（スマホで「(日)」だけ次の行に落ちるのを防ぐ） */
.rs-announce-notice__period span { white-space: nowrap; }
.rs-announce-notice__desc {
  font-size: 14px;
  line-height: 1.85;
  color: var(--color-text-sub);
  margin: 0;
}
@media (min-width: 768px) {
  .rs-announce-notice__desc { font-size: 15px; }
}
/* 休業案内パーツ（RS_お知らせ_休業）。トップ以外（お問い合わせ・カート）にも置くので外側の余白を持たせる。
   トップでは .rs-announce__inner の gap が余白を作るので外す */
.rs-notice { margin: 0 0 28px; }
.rs-announce__inner > .rs-notice { margin: 0; }
/* ガイド系ページ（お問い合わせなど）で見出しの帯の直後に来るとき */
.rs-section__inner > .rs-notice:first-child { margin-top: 40px; }
.rs-announce-notice__sub {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin: 14px 0 4px;
}
@media (min-width: 768px) {
  .rs-announce-notice__sub { font-size: 15px; }
}

/* --- イベントバナー --- */
/* 掲載しないときは hidden で隠す（display:grid が UA の hidden に勝つので明示する） */
.rs-announce-banners[hidden] { display: none; }
/* 休業案内もバナーも出ていないときは、お知らせの帯ごと詰める（余白だけ残らないように） */
.rs-announce:not(:has(.rs-notice:not([hidden]), .rs-announce-banners:not([hidden]))) { display: none; }
.rs-announce-banners {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 768px) {
  .rs-announce-banners {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .rs-announce-banners.rs-announce-banners--single {
    grid-template-columns: 1fr;
  }
}
.rs-announce-banners--single {
  grid-template-columns: 1fr;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
.rs-announce-banner {
  display: block;
  overflow: hidden;
  border-radius: 2px;
  position: relative;
  transition: opacity 0.3s ease;
}
.rs-announce-banner:hover { opacity: 0.85; }
.rs-announce-banner__media {
  aspect-ratio: 16 / 5;
  width: 100%;
}
@media (min-width: 768px) {
  .rs-announce-banner__media { aspect-ratio: 16 / 6; }
}

/* プレースホルダー（画像未配置時の見た目用） */
.wf-placeholder {
  background: var(--color-bg-soft);
  border: 1px dashed #c8c2b8;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  font-size: 12px;
}
.wf-placeholder--cat {
  background: #6c6c6c;
  border: none;
  color: rgba(255,255,255,0.45);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.wf-placeholder--banner {
  background:
    linear-gradient(135deg, rgba(0,0,0,0.1), transparent),
    linear-gradient(90deg, var(--color-bg-soft) 0%, #ebe6dc 100%);
  border: 1px dashed #c8c2b8;
  color: #888;
  font-size: 11px;
}

/* ========================================== */
/* === セクション共通 === */
/* ========================================== */
.rs-section {
  padding: 64px 0;
}
@media (min-width: 768px) {
  .rs-section { padding: 96px 0; }
}
.rs-section--soft { background: var(--color-bg-soft); }
/* トップの導入（H1と導入文）。次の「シーンから選ぶ」の上の余白と二重にならないよう下を詰め、
   長い導入文はスマホだけ左揃えにして読みやすくする */
.rs-section.rs-intro { padding-bottom: 0; }
.rs-intro .rs-section__head { margin-bottom: 0; }
.rs-intro .rs-section__lead { max-width: 680px; }
@media (max-width: 767px) {
  .rs-intro .rs-section__lead { text-align: left; }
}
.rs-section__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 768px) {
  .rs-section__inner { padding: 0 32px; }
}
.rs-section__head {
  text-align: center;
  margin-bottom: 40px;
}
@media (min-width: 768px) {
  .rs-section__head { margin-bottom: 56px; }
}
.rs-section__eyebrow {
  font-size: 12px;
  letter-spacing: 0.25em;
  color: var(--color-gold-dark);
  font-weight: 600;
  margin: 0 0 12px;
}
.rs-section__title {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.02em;
  margin: 0 0 16px;
  color: var(--color-ink);
}
@media (min-width: 768px) {
  .rs-section__title { font-size: 34px; }
}
.rs-section__lead {
  font-size: 15px;
  line-height: 1.95;
  color: var(--color-text-sub);
  margin: 0 auto;
  max-width: 600px;
}
@media (min-width: 768px) {
  .rs-section__lead { font-size: 16px; }
}
.rs-section__divider {
  width: 32px;
  height: 1px;
  background: var(--color-gold-bright);
  margin: 0 auto 24px;
}

/* ========================================== */
/* === ① カテゴリ入口グリッド（主役） === */
/* ========================================== */
.rs-category-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (min-width: 768px) {
  .rs-category-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

.rs-category-card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 2px;
  color: white;
}
@media (min-width: 768px) {
  .rs-category-card { aspect-ratio: 4 / 5; }
}
.rs-category-card__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.6s ease;
}
.rs-category-card:hover .rs-category-card__media {
  transform: scale(1.05);
}
/* 実画像の上に白文字を置くためのスクリム。下から上へ抜けるグラデーション。
   画像（z-index なし）とオーバーレイ（z-index:2）の間に敷く（2026-09-17） */
.rs-category-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(0,0,0,0.62) 0%,
    rgba(0,0,0,0.40) 20%,
    rgba(0,0,0,0.12) 44%,
    rgba(0,0,0,0) 68%);
}
.rs-category-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rs-category-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  z-index: 2;
}
@media (min-width: 768px) {
  .rs-category-card__overlay { padding: 28px; }
}
.rs-category-card__eyebrow {
  font-size: 10px;
  letter-spacing: 0.25em;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  margin: 0 0 6px;
}
@media (min-width: 768px) {
  .rs-category-card__eyebrow { font-size: 11px; margin: 0 0 8px; }
}
.rs-category-card__divider {
  width: 24px;
  height: 1px;
  background: rgba(255,255,255,0.7);
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  .rs-category-card__divider { width: 32px; margin-bottom: 14px; }
}
.rs-category-card__title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  margin: 0 0 4px;
  color: white;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
@media (min-width: 768px) {
  .rs-category-card__title { font-size: 24px; margin: 0 0 6px; }
}
.rs-category-card__sub {
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  margin: 0;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
@media (min-width: 768px) {
  .rs-category-card__sub { font-size: 13px; }
}
/* 幅320px前後の小さいスマホで、題名が「マザーズド／レス」のように1文字だけ落ちないように（2026-10-13） */
@media (max-width: 359px) {
  .rs-category-card__overlay { padding: 12px; }
  .rs-category-card__title { font-size: 15px; }
}

/* ========================================== */
/* === ③ 新作・新入荷（4列×2段） === */
/* ========================================== */
.rs-product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 12px;
}
@media (min-width: 768px) {
  .rs-product-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 40px 24px;
  }
}

.rs-product-card {
  display: flex;
  flex-direction: column;
  color: inherit;
}
.rs-product-card__media {
  aspect-ratio: 1 / 1;
  background: var(--color-bg-soft);
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}
.rs-product-card__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--color-ink);
  color: white;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  z-index: 2;
}
@media (min-width: 768px) {
  .rs-product-card__badge { top: 12px; left: 12px; font-size: 11px; padding: 5px 12px; }
}
.rs-product-card__name {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
  margin: 0 0 6px;
  color: var(--color-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 768px) {
  .rs-product-card__name { font-size: 16px; }
}
.rs-product-card__sku {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-text-mute);
  margin: 0 0 6px;
  letter-spacing: 0.05em;
}
@media (min-width: 768px) {
  .rs-product-card__sku { font-size: 14px; }
}
.rs-product-card__price {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-price);
  margin: 0;
}
@media (min-width: 768px) {
  .rs-product-card__price { font-size: 17px; }
}
.rs-product-card__price-tax {
  font-size: 11px;
  color: var(--color-text-mute);
  font-weight: 400;
  font-family: var(--font-sans);
  margin-left: 4px;
}

.rs-section__cta {
  text-align: center;
  margin-top: 48px;
}
.rs-section__cta-link {
  display: inline-block;
  font-size: 14px;
  letter-spacing: 0.15em;
  font-weight: 600;
  color: var(--color-gold-dark);
  border-bottom: 1px solid var(--color-gold-bright);
  padding: 12px 4px;
}
.rs-section__cta-link:hover {
  color: var(--color-ink);
  border-bottom-color: var(--color-ink);
}

/* ========================================== */
/* === ② 結婚式の母親・親族ドレス（2026-10-13） === */
/* ========================================== */
/* 導入文が長いので、導入（rs-intro）と同じく幅を広げ、スマホだけ左揃え */
.rs-mother .rs-section__lead { max-width: 680px; }
@media (max-width: 767px) {
  .rs-mother .rs-section__lead { text-align: left; }
}
/* 題名が1行に収まる幅を保つ：スマホ1列／タブレット2列／PC 4列 */
.rs-mother__links {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1040px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 768px) {
  .rs-mother__links { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (min-width: 1024px) {
  .rs-mother__links { grid-template-columns: repeat(4, 1fr); }
}
.rs-mother__link {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 16px 32px 16px 16px;
  background: var(--color-bg);
  border: 1px solid var(--color-line-soft);
  color: var(--color-text);
  transition: border-color 0.2s;
}
.rs-mother__link::after {
  content: "→";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-gold);
}
.rs-mother__link:hover { border-color: var(--color-gold-bright); }
.rs-mother__link-kind {
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--color-gold-dark);
}
.rs-mother__link-title {
  font-size: 14px;
  line-height: 1.6;
  font-weight: 500;
}
@media (min-width: 768px) {
  .rs-mother__link-title { font-size: 15px; }
}
.rs-mother .rs-section__cta { margin-top: 40px; }

/* ========================================== */
/* === ④ ブランドストーリー === */
/* ========================================== */
.rs-story {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
  align-items: center;
}
@media (min-width: 768px) {
  .rs-story { grid-template-columns: 1fr 1fr; gap: 64px; }
}
.rs-story__media {
  /* 創業当時の店舗写真は正方形（2026-09-15 一樹さんご指示で横幅を拡大） */
  aspect-ratio: 1 / 1;
  max-height: 560px;
  overflow: hidden;
}
/* 本文末の小さな注記（写真の説明＋現況）。.rs-story__body p を上書きするため2クラス指定 */
.rs-story__body .rs-story__note {
  font-size: 12px;
  line-height: 1.9;
  color: var(--color-text-mute);
  margin: 0;
}
.rs-story__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rs-story__body {
  padding: 0;
}
@media (min-width: 768px) {
  .rs-story__body { padding: 0 16px; }
}
.rs-story__eyebrow {
  font-size: 12px;
  letter-spacing: 0.25em;
  color: var(--color-gold-dark);
  font-weight: 600;
  margin: 0 0 16px;
}
.rs-story__title {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.02em;
  margin: 0 0 24px;
  color: var(--color-ink);
}
@media (min-width: 768px) {
  .rs-story__title { font-size: 32px; }
}
.rs-story__body p {
  font-size: 17px;
  line-height: 2.1;
  margin: 0 0 24px;
  color: var(--color-text);
}
.rs-story__cta {
  /* セクション全幅に対して中央（一樹さんご指示 2026-09-15）。
     .rs-shop-info__cta と同じ扱い：テキスト列の外へ出し、2列にまたがる独立した行にする。
     上の余白はグリッドの gap（PC64px／SP32px）が担うので margin は 0 */
  display: block;
  grid-column: 1 / -1;
  justify-self: center;
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.15em;
  font-weight: 600;
  color: var(--color-gold-dark);
  border-bottom: 1px solid var(--color-gold-bright);
  padding: 10px 4px;
}

/* ========================================== */
/* === ⑤ 読みもの（コラム）プレビュー === */
/* ========================================== */
.rs-articles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 768px) {
  .rs-articles-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}

.rs-article-card {
  display: flex;
  flex-direction: column;
  color: inherit;
}
.rs-article-card__media {
  aspect-ratio: 16 / 9;
  margin-bottom: 16px;
}
.rs-article-card__category {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--color-gold-dark);
  font-weight: 600;
  margin: 0 0 8px;
}
.rs-article-card__title {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.55;
  margin: 0 0 12px;
  color: var(--color-ink);
}
@media (min-width: 768px) {
  .rs-article-card__title { font-size: 19px; }
}
.rs-article-card__excerpt {
  font-size: 14px;
  line-height: 1.85;
  color: var(--color-text-sub);
  margin: 0;
}
/* 日付表示は廃止（2026-09-15 一樹さんご判断）。
   記事はエバーグリーンで日付の情報価値が低く、更新が滞ると古く見えるため。
   JSON-LD の datePublished / dateModified は残してある。 */

/* ========================================== */
/* === ⑥ 店舗・営業案内 === */
/* ========================================== */
.rs-shop-info {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .rs-shop-info { grid-template-columns: 1fr 1fr; gap: 56px; }
}
.rs-shop-info__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.rs-shop-info__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rs-shop-info__title {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
  margin: 0 0 16px;
  color: var(--color-ink);
}
@media (min-width: 768px) {
  .rs-shop-info__title { font-size: 28px; }
}
.rs-shop-info__lead {
  font-size: 16px;
  line-height: 2;
  color: var(--color-text);
  margin: 0 0 24px;
}
.rs-shop-info__details {
  border-top: 1px solid var(--color-line);
  margin-top: 16px;
  padding-top: 24px;
  font-size: 14px;
  line-height: 2;
  color: var(--color-text-sub);
}
.rs-shop-info__details dt {
  font-weight: 600;
  color: var(--color-ink);
  margin-top: 12px;
}
.rs-shop-info__details dt:first-child { margin-top: 0; }
.rs-shop-info__details dd {
  margin: 0 0 8px;
}
.rs-shop-info__cta {
  /* セクション全幅に対して中央（一樹さんご指示 2026-09-15）。
     テキスト列の外に出し、2列にまたがる独立した行にしている。
     justify-self:center なので幅は文字ぶん＝下線も文字幅のまま。
     上の余白はグリッドの gap（PC56px／SP32px）が担うので margin は 0 */
  display: block;
  grid-column: 1 / -1;
  justify-self: center;
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.15em;
  font-weight: 600;
  color: var(--color-gold-dark);
  border-bottom: 1px solid var(--color-gold-bright);
  padding: 10px 4px;
}


/* === 商品自動取込：画像と読込状態 === */
.rs-product-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.rs-product-card:hover .rs-product-card__media img {
  transform: scale(1.04);
}
.rs-product-grid[aria-busy="true"] {
  min-height: 240px;
  opacity: 0.55;
}
.rs-product-grid[data-rs-error] {
  display: none;
}


/* ==========================================================================
   04 カテゴリLP16本すべて（旧 mothers-lp.css）
   --------------------------------------------------------------------------
   置き場所 : オリジナルCSS
   書くもの : LPのヒーロー・シーン別・特徴チップ・コーデ・FAQ・相互リンク。16本共通なので1本直せば全部変わる
   読み込み順: 4 番目（番号が大きいほど後＝強い）
   ※ ファイルを増やす／順番を変えるときは scripts/split_css.py と
     assets/css/README.md も一緒に直すこと
   ========================================================================== */

/* === breadcrumb === */
/* ==========================================
   カテゴリLP（マザーズドレス）固有スタイル
   ========================================== */

/* ----- パンくず ----- */
.rs-breadcrumb {
  border-bottom: 1px solid var(--color-line-soft);
  background: #fff;
}
.rs-breadcrumb__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 12px 16px;
  font-size: 12px;
  color: var(--color-text-sub);
}
@media (min-width: 768px) {
  .rs-breadcrumb__inner { padding: 14px 32px; }
}
.rs-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.rs-breadcrumb__list li + li::before {
  content: "›";
  margin-right: 8px;
  color: var(--color-text-mute);
}
.rs-breadcrumb__list a {
  color: var(--color-text-sub);
  text-decoration: none;
}
.rs-breadcrumb__list a:hover { color: var(--color-gold-dark); }
.rs-breadcrumb__list [aria-current="page"] {
  color: var(--color-text);
  font-weight: 500;
}

/* === cat-hero === */
/* ----- カテゴリヒーロー（単一画像版） ----- */
.rs-cat-hero {
  position: relative;
  width: 100%;
  /* スマホはトップのヒーローと同じ 4:3（4:5だと469pxあり初画面がヒーローで終わる）。
     ただし aspect-ratio で固定すると、見出しが3行に折れるページ
     （ステージ・膝丈）でコピーが枠から出て切れてしまう。
     min-height: 75vw（＝幅の3/4＝4:3）にしておけば、収まるページは
     ちょうど4:3、長いページだけ必要な分だけ伸びる */
  min-height: 75vw;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
@media (min-width: 768px) {
  .rs-cat-hero {
    display: block;
    height: 55vh;
    min-height: 440px;
    max-height: 620px;
  }
}
.rs-cat-hero__media {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.50), rgba(0,0,0,0.25)), #3a322c;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rs-cat-hero__media span {
  color: rgba(255,255,255,0.45);
  font-size: 12px;
  letter-spacing: 0.12em;
}
/* 写真を入れたヒーロー。<img> を枠いっぱいに敷く。
   PCは横長の帯で上下が切れるので、顔が残るよう縦位置を --rs-hero-y で調整する（既定 30%） */
.rs-cat-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% var(--rs-hero-y, 30%);
}
/* 写真の上に暗幕を重ね、白い見出しを読みやすくする（写真があるときだけ） */
.rs-cat-hero__media--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.20) 55%, rgba(0,0,0,0.05) 100%);
}
/* 暗幕は写真を暗く見せすぎないよう薄めにし（一樹さん 2026-10-01）、
   そのぶん見出しに柔らかい影をつけて読みやすさを保つ */
@media (min-width: 768px) {
  .rs-cat-hero__media--photo::after {
    background:
      linear-gradient(to right, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.10) 38%, rgba(0,0,0,0) 60%),
      linear-gradient(to top, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 40%);
  }
  .rs-cat-hero--photo .rs-cat-hero__overlay {
    text-shadow: 0 1px 14px rgba(0,0,0,0.45), 0 0 2px rgba(0,0,0,0.25);
  }
}
/* スマホでは通常配置。絶対配置のままだとヒーローが伸びても
   コピーが上へはみ出して切れる。
   ただし static のままだと、絶対配置の背景（.rs-cat-hero__media）が上に重なって
   見出しが隠れる（2026-10-01 発見）。relative ＋ z-index で背景より前に出す */
.rs-cat-hero__overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0 24px 36px;
  color: #fff;
}
@media (min-width: 768px) {
  .rs-cat-hero__overlay {
    position: absolute;
    width: auto;
    padding: 0;
    max-width: 760px;
    left: max(32px, calc((100vw - 1280px) / 2 + 32px));
    right: auto;
    bottom: 72px;
  }
}
/* 写真入りヒーローのスマホ表示。見出しを重ねると人物の顔にかかるので、
   写真（4:3）の下に見出しを置く。写真の下端は背景色へなじませる */
@media (max-width: 767px) {
  .rs-cat-hero--photo {
    display: block;
    min-height: 0;
    background: #1f1c1a;
  }
  .rs-cat-hero--photo .rs-cat-hero__media {
    position: relative;
    inset: auto;
    aspect-ratio: 4 / 3;
  }
  .rs-cat-hero--photo .rs-cat-hero__media--photo::after {
    background: linear-gradient(to top, #1f1c1a 0%, rgba(31,28,26,0) 26%);
  }
  .rs-cat-hero--photo .rs-cat-hero__overlay {
    padding: 20px 24px 32px;
  }
}
.rs-cat-hero__eyebrow {
  font-size: 11px;
  letter-spacing: 0.28em;
  font-weight: 600;
  margin: 0 0 14px;
  color: var(--color-gold-bright);
}
/* 英字の eyebrow の位置に、小さな H1（キーワード入りの和文）を置く場合（マザーズLP・2026-10-13 一樹さんB案）。
   大きなキャッチは見た目そのまま p にする。和文なので字間を詰め、少し大きくする */
.rs-cat-hero__eyebrow--h1 {
  font-size: 12px;
  letter-spacing: 0.12em;
  line-height: 1.6;
}
@media (min-width: 768px) {
  .rs-cat-hero__eyebrow--h1 { font-size: 14px; }
  /* PCは写真の上に重なり、金色だと明るいところで沈んで読めないので白にする */
  .rs-cat-hero--photo .rs-cat-hero__eyebrow--h1 { color: #fff; }
}
.rs-cat-hero__title {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.5;
  margin: 0 0 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
@media (min-width: 768px) {
  .rs-cat-hero__title { font-size: 34px; line-height: 1.45; }
}
.rs-cat-hero__title-line { display: block; }
/* スマホは見出し・リード文の改行をなくし、画面幅で自然に折り返す（一樹さん 2026-10-06）。
   1行ずつ区切ると「主／役を。」のように短い行が残るため。
   auto-phrase は対応ブラウザ（Chrome系）で文節の切れ目で折り返す。非対応では通常の折り返し */
@media (max-width: 767px) {
  /* 2つの span のあいだの改行が半角の空白として出るので、見出し自体の文字サイズを0にして消す */
  .rs-cat-hero__title { font-size: 0; }
  .rs-cat-hero__title-line { display: inline; font-size: 22px; }
  .rs-cat-hero__lead br { display: none; }
  .rs-cat-hero__title,
  .rs-cat-hero__lead { word-break: auto-phrase; }
}
.rs-cat-hero__lead {
  font-size: 15px;
  line-height: 1.8;
  margin: 0;
  opacity: 0.95;
}
@media (min-width: 768px) {
  .rs-cat-hero__lead { font-size: 17px; }
}

/* === intro-body === */
/* ----- イントロ本文 ----- */
.rs-intro-body {
  max-width: 760px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.95;
  color: var(--color-text-sub);
}
.rs-intro-body p { margin: 0 0 18px; }
.rs-intro-body p:last-child { margin-bottom: 0; }
.rs-intro-body strong {
  color: var(--color-text);
  font-weight: 600;
}

/* === scene-grid/card === */
/* ----- シーン別カード ----- */
.rs-scene-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .rs-scene-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
.rs-scene-card {
  background: #fff;
  border: 1px solid var(--color-line-soft);
  display: flex;
  flex-direction: column;
}
.rs-scene-card__media {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rs-scene-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rs-scene-card__body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.rs-scene-card__eyebrow {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--color-gold-dark);
  font-weight: 600;
  margin: 0 0 8px;
}
.rs-scene-card__title {
  font-family: var(--font-serif);
  font-size: 22px;
  margin: 0 0 12px;
  color: var(--color-text);
  letter-spacing: 0.02em;
}
.rs-scene-card__desc {
  font-size: 15px;
  line-height: 1.9;
  color: var(--color-text-sub);
  margin: 0;
  flex: 1;
}

/* === attr-band/chip === */
/* ----- サイズ・カラー展開バンド ----- */
.rs-attr-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  background: var(--color-bg-soft);
  padding: 32px 24px;
  border-radius: 4px;
}
@media (min-width: 768px) {
  .rs-attr-band {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    padding: 44px 48px;
  }
}
.rs-attr-band__group-title {
  font-size: 13px;
  letter-spacing: 0.16em;
  font-weight: 600;
  margin: 0 0 18px;
  color: var(--color-gold-dark);
}
.rs-attr-band__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.rs-attr-band__list--size li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 46px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid var(--color-line);
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--color-text);
}
.rs-attr-band__list--color li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--color-line);
  font-size: 13px;
  color: var(--color-text);
}
.rs-attr-chip {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid rgba(0,0,0,0.12);
}
.rs-attr-band__note {
  font-size: 12px;
  color: var(--color-text-mute);
  margin: 8px 0 0;
}


/* === coord-grid/card === */
.rs-coord-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 768px) {
  .rs-coord-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
.rs-coord-card {
  background: #fff;
  border: 1px solid var(--color-line-soft);
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rs-coord-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}
.rs-coord-card__media {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rs-coord-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rs-coord-card__body { padding: 20px 22px 24px; }
.rs-coord-card__eyebrow {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--color-gold-dark);
  font-weight: 600;
  margin: 0 0 6px;
}
.rs-coord-card__title {
  font-family: var(--font-serif);
  font-size: 18px;
  margin: 0 0 10px;
  color: var(--color-text);
}
.rs-coord-card__desc {
  font-size: 13px;
  line-height: 1.75;
  color: var(--color-text-sub);
  margin: 0 0 12px;
}
.rs-coord-card__cta {
  font-size: 13px;
  color: var(--color-gold-dark);
  font-weight: 600;
}


/* === faq-list/item === */
.rs-faq-list {
  max-width: 880px;
  margin: 0 auto;
}
.rs-faq-item {
  background: #fff;
  border: 1px solid var(--color-line-soft);
  margin: 0 0 12px;
}
.rs-faq-item__q {
  cursor: pointer;
  padding: 18px 56px 18px 22px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  list-style: none;
  position: relative;
  line-height: 1.55;
}
.rs-faq-item__q::-webkit-details-marker { display: none; }
.rs-faq-item__q::before {
  content: "Q";
  font-family: var(--font-serif);
  color: var(--color-gold-dark);
  font-weight: 500;
  margin-right: 12px;
  font-size: 16px;
}
.rs-faq-item__q::after {
  content: "+";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: var(--color-gold-dark);
  font-weight: 300;
  line-height: 1;
}
.rs-faq-item[open] .rs-faq-item__q::after { content: "−"; }
.rs-faq-item__a {
  padding: 0 22px 22px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--color-text-sub);
}
.rs-faq-item__a p { margin: 0; }
.rs-faq-item__a p + p { margin-top: 12px; }
/* 答えの中の読みものへのリンク（読みものの本文と同じ見た目・2026-10-13） */
.rs-faq-item__a a { color: var(--color-gold-dark); text-decoration: underline; text-underline-offset: 2px; }

/* === cross-cta === */
/* ----- セクション内CTAバー（カテゴリ間誘導） ----- */
.rs-cross-cta {
  background: var(--color-bg-soft);
  padding: 28px 24px;
  text-align: center;
  border-radius: 4px;
}
.rs-cross-cta__text {
  font-size: 15px;
  color: var(--color-text);
  margin: 0 0 14px;
}
.rs-cross-cta__link {
  font-size: 14px;
  color: var(--color-gold-dark);
  font-weight: 600;
  text-decoration: underline;
  line-height: 1;
}


/* ==========================================================================
   05 商品一覧・並び替え・ページャ・パンくず（商品グループ系で共通）
   --------------------------------------------------------------------------
   置き場所 : オリジナルCSS
   書くもの : 一覧のカード・在庫切れ・並び替えタブ・ページ送り
   読み込み順: 5 番目（番号が大きいほど後＝強い）
   ※ ファイルを増やす／順番を変えるときは scripts/split_css.py と
     assets/css/README.md も一緒に直すこと
   ========================================================================== */

/* === パンくず（fs-c-breadcrumb） === */
.fs-c-breadcrumb {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 12px 16px;
  font-size: 12px;
  color: var(--color-text-sub);
}
@media (min-width: 768px) {
  .fs-c-breadcrumb { padding: 14px 32px; font-size: 13px; }
}
.fs-c-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.fs-c-breadcrumb__listItem {
  display: inline-flex;
  align-items: center;
}
.fs-c-breadcrumb__listItem + .fs-c-breadcrumb__listItem::before {
  content: "›";
  margin-right: 8px;
  color: var(--color-text-mute);
}
.fs-c-breadcrumb__listItem a {
  color: var(--color-text-sub);
  text-decoration: none;
}
.fs-c-breadcrumb__listItem a:hover { color: var(--color-gold-dark); }

/* === 商品一覧の親 === */
.fs-c-productList {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 32px 16px 64px;
}
@media (min-width: 768px) {
  .fs-c-productList { padding: 48px 32px 96px; }
}

/* === 並び替え（fs-c-sortItems） === */
.fs-c-sortItems {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-line-soft);
  font-size: 12px;
}
.fs-c-sortItems__label {
  font-weight: 600;
  color: var(--color-text);
  font-size: 13px;
}
.fs-c-sortItems__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* 各項目。選択中は <span>、それ以外は <a> で出力されるため
   共通クラス __label にスタイルを当てる（a/button だけだと選択中が素通しになる） */
.fs-c-sortItems__list__item__label,
.fs-c-sortItems__list__item a,
.fs-c-sortItems__list__item button {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--color-line);
  background: #fff;
  color: var(--color-text-sub);
  text-decoration: none;
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
a.fs-c-sortItems__list__item__label:hover,
a.fs-c-sortItems__list__item__label:focus-visible,
.fs-c-sortItems__list__item a:hover,
.fs-c-sortItems__list__item button:hover {
  background: var(--color-bg-soft);
  border-color: var(--color-gold);
  color: var(--color-gold-dark);
  outline: none;
}
/* 選択中：ゴールドで塗って「今ここ」を明示。クリック対象ではない */
.fs-c-sortItems__list__item.is-active .fs-c-sortItems__list__item__label {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: #fff;
  font-weight: 500;
  cursor: default;
}
.fs-c-sortItems__list__item.is-active a,
.fs-c-sortItems__list__item--active a,
.fs-c-sortItems__list__item.is-active button {
  background: var(--color-ink);
  color: white;
  border-color: var(--color-ink);
}

/* === 件数表示・ページコントロール === */
.fs-c-listControl {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 0 0 24px;
  font-size: 12px;
  color: var(--color-text-sub);
  flex-wrap: wrap;
}
.fs-c-listControl__status {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* === 商品リスト本体（グリッド化） === */
.fs-c-productList__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 768px) {
  .fs-c-productList__list {
    grid-template-columns: repeat(4, 1fr);
    gap: 48px 24px;
  }
}

/* === 個別商品アイテム === */
.fs-c-productList__list__item,
.fs-c-productListItem {
  width: auto !important;
  display: block;
  margin: 0;
  padding: 0;
}
.fs-c-productListItem > form {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}

/* 画像 */
.fs-c-productListItem__imageContainer,
.fs-c-productListItem__image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin: 0 0 12px;
  background: var(--color-bg-soft);
  position: relative;
}
/* 大前提：商品画像は元サイズより大きく引き伸ばさない。
   ⚠ 以前ここが素の .fs-c-productImage__image だったため、
   お問い合わせモーダルの 100×100 サムネが 1292px まで拡大されて
   ボケていた。敷き詰めるのは一覧カードの中だけに限定する */
.fs-c-productImage__image {
  max-width: 100%;
  height: auto;
}
.fs-c-productListItem__imageContainer img,
.fs-c-productListItem__image img,
.fs-c-productListItem__image__image,
.fs-c-productListItem .fs-c-productImage__image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.fs-c-productListItem:hover .fs-c-productListItem__image__image,
.fs-c-productListItem:hover .fs-c-productImage__image,
.fs-c-productListItem:hover .fs-c-productListItem__imageContainer img {
  transform: scale(1.04);
}

/* 「他の画像を見る」ボタンは非表示（一覧では不要）
   ⚠ この要素は .fs-c-buttonContainer も持っており、後段の
   fs-system-pages.css の .fs-c-buttonContainer{display:flex} に
   負けてしまうので、必ず2クラスで指定して詳細度で上回ること */
.fs-c-productListItem__viewMoreImageButton,
.fs-c-productListItem__viewMoreImageButton.fs-c-buttonContainer { display: none; }

/* 画像モーダル類は非表示（fs側JSが必要時に表示） */
.fs-c-productImageModal[aria-hidden="true"],
.fs-c-modal--chooseVariation[aria-hidden="true"] {
  display: none;
}

/* 商品名 */
.fs-c-productListItem__productName,
.fs-c-productName {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
  margin: 0 0 6px;
  color: var(--color-ink);
  font-family: var(--font-sans);
  letter-spacing: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 768px) {
  .fs-c-productListItem__productName,
  .fs-c-productName { font-size: 14px; }
}
.fs-c-productListItem__productName a,
.fs-c-productName a {
  color: inherit;
  text-decoration: none;
}

/* 価格 */
.fs-c-productListItem__prices,
.fs-c-productPrices {
  margin: 4px 0 6px;
}
.fs-c-productPrice {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
}
.fs-c-productPrice__main {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.fs-c-productPrice__main__label {
  font-size: 12px;
  color: var(--color-text-mute);
  font-weight: normal;
  font-family: var(--font-sans);
}
.fs-c-productPrice__main__price,
.fs-c-price {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-price);
}
@media (min-width: 768px) {
  .fs-c-productPrice__main__price,
  .fs-c-price { font-size: 16px; }
}
.fs-c-productPrice__addon {
  font-size: 12px;
  color: var(--color-text-mute);
  font-family: var(--font-sans);
  font-weight: normal;
  margin-left: 4px;
}

/* === コントロール（カート・お気に入り） === */
/* 一覧では非表示（商品詳細でバリエーション選択するため） */
.fs-c-productListItem__control,
.fs-c-productListItem__control.fs-c-buttonContainer {
  display: none;
}

/* === モーダル（お問い合わせ／バリエーション選択） === */
.fs-c-modal,
.fs-c-modal--medium { display: none; }
.fs-c-modal.is-active,
.fs-c-modal[aria-hidden="false"] { display: block; }

.fs-c-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  /* スマホで画面いっぱいに見えて「モーダルだと気づかない」ため、
     周囲の暗幕をしっかり見せる */
  padding: 40px 24px;
  background: rgba(0, 0, 0, 0.6);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 768px) {
  .fs-c-modal { padding: 48px 24px; }
}
.fs-c-modal__inner {
  max-width: 600px;
  margin: 0 auto;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  /* 浮いているように見せる */
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}
.fs-c-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-line-soft);
}
@media (min-width: 768px) {
  .fs-c-modal__header { padding: 18px 24px; }
}
.fs-c-modal__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color-text);
}
@media (min-width: 768px) {
  .fs-c-modal__title { font-size: 17px; }
}
/* 画像拡大モーダルの✕と同じ見た目に揃える（黒の丸座＋白✕） */
.fs-c-modal__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}
.fs-c-modal__close:hover { background: rgba(0, 0, 0, 0.78); }
.fs-c-modal__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(141, 111, 77, 0.45);
}
.fs-c-modal__contents { padding: 20px; }
@media (min-width: 768px) {
  .fs-c-modal__contents { padding: 24px; }
}

/* お問い合わせモーダルの商品情報（サムネ＋商品名） */
.fs-c-inquiryProduct {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--color-line-soft);
}
.fs-c-inquiryProduct__productImage {
  flex: none;
  width: 84px;
  height: 84px;
  background: var(--color-bg-soft);
  overflow: hidden;
}
.fs-c-inquiryProduct__productImage__image {
  width: 84px !important;
  height: 84px !important;
  object-fit: cover;
  display: block;
}
.fs-c-inquiryProduct__productName {
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text);
}
.fs-c-inquiryProduct__productName .fs-c-productName__copy {
  display: block;
  font-size: 11px;
  color: var(--color-gold-dark);
}
.fs-c-inquiryMessage {
  font-size: 13px;
  line-height: 1.9;
  color: var(--color-text-sub);
  margin: 0 0 18px;
}

/* === ページネーション === */
.fs-c-pagination {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin: 40px 0 0;
  list-style: none;
  padding: 0;
  flex-wrap: wrap;
}
.fs-c-pagination__item,
.fs-c-pagination__item a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--color-line);
  text-decoration: none;
  color: var(--color-text-sub);
  font-size: 13px;
  background: #fff;
  transition: background 0.2s ease;
}
.fs-c-pagination__item:hover,
.fs-c-pagination__item a:hover {
  background: var(--color-bg-soft);
}
.fs-c-pagination__item--current,
.fs-c-pagination__item.is-current,
.fs-c-pagination__item[aria-current="page"] {
  background: var(--color-ink);
  color: white;
  border-color: var(--color-ink);
  pointer-events: none;
}

/* === 商品マーク === */
.fs-c-productMark {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 4px;
  list-style: none;
  padding: 0;
}
.fs-c-productMark__item {
  font-size: 10px;
  padding: 2px 6px;
  background: var(--color-bg-soft);
  color: var(--color-text-sub);
  letter-spacing: 0.05em;
}

/* === 在庫切れオーバーレイ ================================= */
/* JSで .fs-c-productListItem__outOfStock を imageContainer 内に移動済み */
.fs-c-productListItem__imageContainer .fs-c-productListItem__outOfStock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(50, 50, 50, 0.92);
  color: white;
  text-align: center;
  padding: 11px 0;
  z-index: 2;
  font-size: 0;
  letter-spacing: 0;
}
.fs-c-productListItem__imageContainer .fs-c-productListItem__outOfStock::after {
  content: "売り切れ";
  font-size: 13px;
  letter-spacing: 0.15em;
  font-family: var(--font-sans);
  font-weight: 500;
}
/* 売り切れの商品名・価格は少しグレーに */
.fs-c-productListItem:has(.fs-c-productListItem__outOfStock) .fs-c-productPrice__main__price {
  color: var(--color-text-mute);
}

/* === カテゴリLP：イントロ本文と商品一覧の間を詰める === */
/* イントロセクション（rs-intro-bodyを含むsection）の下余白を縮小 */
.rs-section:has(.rs-intro-body) {
  padding-top: 28px;
  padding-bottom: 28px;
}
@media (min-width: 768px) {
  .rs-section:has(.rs-intro-body) { padding-top: 56px; padding-bottom: 40px; }
}
/* システム商品一覧の上余白を縮小 */
.fs-c-productList {
  padding-top: 8px;
}
@media (min-width: 768px) {
  .fs-c-productList { padding-top: 16px; }
}