/* ==========================================================================
   06 商品詳細ページ（ギャラリー／全画像アコーディオン／追従購入バー含む）
   --------------------------------------------------------------------------
   置き場所 : アイテム
   書くもの : 商品詳細だけに出るもの全部
   読み込み順: 6 番目（番号が大きいほど後＝強い）
   ※ ファイルを増やす／順番を変えるときは scripts/split_css.py と
     assets/css/README.md も一緒に直すこと
   ========================================================================== */

/* === レイアウトコンテナ：全幅1カラム、内側は900pxに揃える === */
.fs-l-productLayout {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 16px 80px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .fs-l-productLayout {
    /* レビュー欄の下余白(64px)と合わせて200px超になっていたので詰める */
  padding: 40px 32px 56px;
    row-gap: 20px;
  }
}

/* すべての主要ブロックを 900px に統一・中央寄せ */
.fs-l-productLayout > .fs-c-productMainImage,
.fs-l-productLayout > .fs-c-productThumbnail,
.fs-l-productLayout > .fs-c-productNameHeading,
.fs-l-productLayout > .fs-c-productNumber,
.fs-l-productLayout > .fs-c-productPrices,
.fs-l-productLayout > .fs-c-productPrices--productDetail,
.fs-l-productLayout > .fs-c-productPointDisplay,
.fs-l-productLayout > .fs-c-productPostage,
.fs-l-productLayout > .fs-c-variationAndActions,
.fs-l-productLayout > .rs-jump-variation,
.fs-l-productLayout > .fs-c-returnedSpecialContract,
.fs-l-productLayout > .fs-c-inquiryAboutProduct,
.fs-l-productLayout > .fs-p-productDescription,
.fs-l-productLayout > .rs-product-comment1,
.fs-l-productLayout > .rs-allimg,
.fs-l-productLayout > .rs-gallery-bar,
.fs-l-productLayout > .rs-related,
.fs-l-productLayout > .fs-c-productReview,
.fs-l-productLayout > .fs-c-aggregateRating,
.fs-l-productLayout > .fs-p-recommendedProduct,
.fs-l-productLayout > .fs-c-productList {
  max-width: 900px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* === サブグループパンくず（この商品が属する他カテゴリ） ===
   futureshop は所属カテゴリの数だけパンくずを出すので、同じ商品名が
   何度も並ぶ。末尾の商品名（主パンくずと重複）と先頭の店名を隠し、
   「関連カテゴリの一覧」として読める形に畳む */
.fs-c-breadcrumb:has(.fs-c-breadcrumb__list--subgroup) {
  padding-top: 20px;
  padding-bottom: 10px;
}
@media (min-width: 768px) {
  .fs-c-breadcrumb:has(.fs-c-breadcrumb__list--subgroup) { padding-top: 26px; }
}
/* ラベルはCSS固定文字列。bodyクラスは fs-body-product-<商品コード> しか
   持たずカテゴリを判別できないため、ドレス／バッグ／アクセサリーの
   どれでも成立する「アイテム」で通す */
.fs-c-breadcrumb:has(.fs-c-breadcrumb__list--subgroup)::before {
  content: "このアイテムが属するカテゴリ";
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--color-text-mute);
  margin-bottom: 8px;
}
.fs-c-breadcrumb__list--subgroup {
  font-size: 11.5px;
  gap: 6px;
  margin: 0 0 3px;
}
.fs-c-breadcrumb__list--subgroup .fs-c-breadcrumb__listItem:first-child,
.fs-c-breadcrumb__list--subgroup .fs-c-breadcrumb__listItem:last-child {
  display: none;
}
/* 先頭を隠した分、2番目の頭に出る「›」も消す
   （隣接セレクタはDOM順で効くので display:none では消えない） */
.fs-c-breadcrumb__list--subgroup .fs-c-breadcrumb__listItem:nth-child(2)::before {
  content: none;
}
.fs-c-breadcrumb__list--subgroup .fs-c-breadcrumb__listItem a {
  color: var(--color-text-mute);
}
.fs-c-breadcrumb__list--subgroup .fs-c-breadcrumb__listItem a:hover {
  color: var(--color-gold-dark);
}

/* === メイン画像（fs-c-productMainImage）幅900px === */
.fs-c-productMainImage {
  position: relative;
  margin: 0 auto;
}
.fs-c-productMainImage__image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-bg-soft);
  margin: 0;
  position: relative;
  /* 横フリックは画像切替に使い、縦スクロールはブラウザに任せる */
  touch-action: pan-y;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
/* ドラッグ中：掴んでいる感じを出しつつ、選択やスナップを止める */
.fs-c-productMainImage__image.is-rs-dragging { cursor: grabbing; }
.fs-c-productMainImage__image img { -webkit-user-drag: none; }
.fs-c-productMainImage__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  display: block;
}
/* 拡大ボタン */
.fs-c-productMainImage__expandButton {
  position: absolute;
  right: 12px;
  bottom: 12px;
  margin: 0;
  padding: 0;
  background: transparent;
}
/* 11px は「操作要素」としては小さすぎる。写真の上に載るので背景も少し濃く */
.fs-c-button--viewExtendedImage {
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--color-line);
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-sub);
  cursor: pointer;
  letter-spacing: 0.05em;
  position: relative;
}
/* 見た目は変えずタップ領域だけ広げる */
.fs-c-button--viewExtendedImage::after {
  content: "";
  position: absolute;
  inset: -6px;
}

/* ==========================================================================
   全画像アコーディオン ｜ JS: rs-product-gallery.js（initAllImages）
   サムネイル40枚を指で追うのは負担なので、大きい画像を一気に見られる
   入口を用意する。初期は閉じていて通信ゼロ、開いたときだけ画像を生成する
   ========================================================================== */
.rs-allimg {
  margin: 14px 0 4px;
}
.rs-allimg__toggle {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 16px;
  background: #fff;
  border: 1px solid var(--color-line);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 0.04em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.rs-allimg__toggle:hover {
  background: var(--color-bg-soft);
  border-color: var(--color-gold);
}
.rs-allimg__toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--color-gold-dark);
}
.rs-allimg__count {
  font-size: 12px;
  color: var(--color-text-mute);
  font-variant-numeric: tabular-nums;
}
/* 開いている間は「画像を閉じる 40枚」と読めてしまうので枚数は隠す */
.rs-allimg.is-open .rs-allimg__count { display: none; }
/* 開閉が分かるように、ラベルの前に向きの変わる印を置く */
.rs-allimg__toggle::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1px solid var(--color-gold-dark);
  border-bottom: 1px solid var(--color-gold-dark);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.25s ease;
}
.rs-allimg.is-open .rs-allimg__toggle::before {
  transform: rotate(-135deg) translate(-3px, -3px);
}
@media (prefers-reduced-motion: reduce) {
  .rs-allimg__toggle::before { transition: none; }
}

.rs-allimg__panel {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}
/* クラスの display:grid が hidden 属性の display:none を打ち消すので、
   明示的に戻す。これが無いと閉じても場所を取ったままになる */
.rs-allimg__panel[hidden] { display: none; }
.rs-allimg__item {
  margin: 0;
  position: relative;
}
.rs-allimg__item img {
  display: block;
  width: 100%;
  height: auto;
  /* 読み込むまでは高さ0でスクロールが跳ねるので、いったん正方形で
     場所を取る（多くが正方形のため）。読み込めたら is-loaded が付いて
     本来の縦横比に戻る。縦長・横長でも絶対に歪ませないよう contain */
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--color-bg-soft);
}
.rs-allimg__item img.is-loaded {
  aspect-ratio: auto;
}
.rs-allimg__close {
  order: 999;   /* グリッドの最後＝画像の下に置く */
  min-height: 52px;
  margin-top: 4px;
  background: #fff;
  border: 1px solid var(--color-line);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.rs-allimg__close:hover {
  background: var(--color-bg-soft);
  border-color: var(--color-gold);
}

/* === ギャラリー操作（矢印・カウンタ）｜JS: rs-product-gallery.js === */

/* --- 画像とサムネイルのあいだの操作バー（スマホのみ） ---
   スマホはフリックで切り替えられるが、それに気づかない方が多い。
   画像の外に矢印を出して、切り替えられることを目で分かるようにする。
   矢印の字形は拡大モーダル（slick）と同じ fs-icon の U+E90B / U+E90C。
   ただしモーダルの半透明の黒＋白アイコンは白背景だと読めないので、
   白地に線＋濃い字に置き換えている */
.rs-gallery-bar { display: none; }
@media (max-width: 767px) {
  .rs-gallery-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 10px 0 2px;
  }
  .rs-gallery-bar__btn {
    flex: 0 0 auto;
    width: 56px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--color-line);
    color: var(--color-text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease, border-color 0.2s ease;
  }
  .rs-gallery-bar__btn::before {
    font-family: fs-icon;
    font-size: 26px;
    line-height: 1;
  }
  .rs-gallery-bar__btn--prev::before { content: "\e90b"; }
  .rs-gallery-bar__btn--next::before { content: "\e90c"; }
  .rs-gallery-bar__btn:active {
    background: var(--color-bg-soft);
    border-color: var(--color-gold);
  }
  .rs-gallery-bar__btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--color-gold-dark);
  }
  .rs-gallery-bar__count {
    font-size: 13px;
    letter-spacing: 0.06em;
    color: var(--color-text-sub);
    font-variant-numeric: tabular-nums;
  }
  /* バーにカウンタを出すので、画像に重ねていた方は消す */
  .rs-gallery-count { display: none; }
}
/* PCは矢印クリック、SPはフリック。矢印はSPでは出さない */
.rs-gallery-nav {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.14);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
@media (min-width: 768px) {
  .rs-gallery-nav { display: inline-flex; }
}
.rs-gallery-nav::before {
  content: "";
  width: 11px;
  height: 11px;
  border-top: 1.5px solid var(--color-text);
  border-right: 1.5px solid var(--color-text);
}
.rs-gallery-nav--prev { left: 12px; }
.rs-gallery-nav--prev::before { transform: rotate(-135deg); margin-left: 4px; }
.rs-gallery-nav--next { right: 12px; }
.rs-gallery-nav--next::before { transform: rotate(45deg); margin-right: 4px; }
.rs-gallery-nav:hover { background: #fff; }
/* ⚠ 半透明ゴールドのリングは白背景に合成すると約1.5:1でWCAG 1.4.11(3:1)に届かない。
   白の内側リングで写真から浮かせ、外側を不透明のゴールドダークにする。
   box-shadow は上書きなので、平常時の影も必ず併記すること */
.rs-gallery-nav:focus-visible {
  outline: none;
  box-shadow:
    0 1px 6px rgba(0, 0, 0, 0.14),
    0 0 0 2px #ffffff,
    0 0 0 5px var(--color-gold-dark);
}

/* 何枚目か。右下は拡大ボタンが居るので左下に置く */
.rs-gallery-count {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(26, 26, 26, 0.6);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* === サムネイル：40枚＝8列×5段（PC） / SP は5列 === */
.fs-c-productThumbnail {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  /* 行間 / 列間。縦は詰めてコンタクトシートのように見せる */
  gap: 3px 4px;
  align-items: start;
  list-style: none;
  margin: 12px auto 0;
  padding: 0;
}
@media (min-width: 768px) {
  .fs-c-productThumbnail {
    grid-template-columns: repeat(8, 1fr);
    gap: 4px 6px;
    margin-top: 16px;
  }
}
.fs-c-productThumbnail__image {
  /* fs既定の figure margin:4px 6px が縦に14pxの隙間を作るので殺し、
     間隔は grid の gap だけで決める */
  margin: 0;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-bg-soft);
  cursor: pointer;
  /* 表示中でないものは少し落として、いま見ている1枚を目立たせる */
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.fs-c-productThumbnail__image:hover { opacity: 0.85; }
.fs-c-productThumbnail__image.is-active,
.fs-c-productThumbnail__image[aria-current="true"] { opacity: 1; }
/* 枠は ::after で内側に描く（border だと画像が縮んでガタつくため） */
.fs-c-productThumbnail__image.is-active::after,
.fs-c-productThumbnail__image[aria-current="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--color-gold);
  pointer-events: none;
}
/* img を絶対配置にして「行の高さ」に一切関与させない。
   通常フローのままだと Safari が画像本来の縦横比で行トラックを広げ、
   aspect-ratio で正方形にした figure の下に隙間ができる */
.fs-c-productThumbnail__image img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

/* === 商品名 H1（900px・中央寄せテキスト） === */
.fs-c-productNameHeading {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--color-ink);
  margin: 24px auto 12px;
  text-align: center;
}
@media (min-width: 768px) {
  .fs-c-productNameHeading {
    font-size: 26px;
    margin: 32px auto 20px;
  }
}
.fs-c-productNameHeading__copy {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-gold-dark);
  letter-spacing: 0.15em;
  margin: 0 0 10px;
  font-family: var(--font-sans);
}
.fs-c-productNameHeading__name {
  display: block;
}

/* === 商品番号 === */
.fs-c-productNumber {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  color: var(--color-text-mute);
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  margin: 0 auto 16px;
  padding: 0;
  background: transparent;
  border: 0;
}
.fs-c-productNumber__label {
  color: var(--color-text-mute);
}
.fs-c-productNumber__number {
  color: var(--color-text-sub);
  font-weight: 500;
}

/* === 価格（商品詳細用に大きめ・中央寄せ） === */
.fs-c-productPrices--productDetail {
  margin: 8px auto 16px;
  text-align: center;
}
/* fs側が .fs-c-productPrice を display:flex にしているので、
   親の text-align:center では中央に寄らない。flex側で寄せる */
.fs-c-productPrices--productDetail .fs-c-productPrice,
.fs-c-productPrices--productDetail .fs-c-productPrice__main {
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.fs-c-productPrices--productDetail .fs-c-productPrice__main__price,
.fs-c-productPrices--productDetail .fs-c-price {
  font-size: 24px;
}
@media (min-width: 768px) {
  .fs-c-productPrices--productDetail .fs-c-productPrice__main__price,
  .fs-c-productPrices--productDetail .fs-c-price {
    font-size: 28px;
  }
}
.fs-c-productPrices--productDetail .fs-c-productPrice__main__label {
  font-size: 13px;
}
.fs-c-productPrices--productDetail .fs-c-productPrice__addon {
  font-size: 13px;
}

/* === ポイント表示 ===
   900pxコンテナの width:100% が効いて帯が全幅に伸び、中の文字だけ左端に
   残っていた。価格・送料と同じ中央のリズムに合わせて小さなチップにする */
.fs-c-productPointDisplay {
  display: block;
  font-size: 12px;
  color: var(--color-gold-dark);
  background: var(--color-gold-faint, rgba(184,149,106,0.12));
  padding: 6px 12px;
  margin: 0 auto 12px;
  text-align: center;
}
.fs-l-productLayout > .fs-c-productPointDisplay { width: fit-content; }

/* === 送料表示 === */
.fs-c-productPostage {
  font-size: 12px;
  color: var(--color-text-sub);
  margin: 0 auto 8px;
  text-align: center;
}

/* === 「サイズ・カラーを選ぶ ↓」アンカー（JSで送料の下に挿入） ===
   最初のカートまで PC 3,621px / SP 3,776px あり、購入手段が4画面先だった。
   並び順（A7-e の決定）は変えずに、ここから飛べるようにする */
.rs-jump-variation {
  margin: 0 auto;
  text-align: center;
  font-size: 13px;
}
.rs-jump-variation a {
  display: inline-block;
  padding: 12px 16px;          /* 実効44px＝当たり判定も同時に確保 */
  color: var(--color-gold-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rs-jump-variation a:hover { color: var(--color-text); }

/* === バリエーション選択エリア（900px・テキストは左揃え） === */
.fs-c-variationAndActions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 24px auto;
  padding: 24px 0;
  border-top: 1px solid var(--color-line-soft);
  border-bottom: 1px solid var(--color-line-soft);
  text-align: left;
}
.fs-c-variationLabel {
  /* 「カラー」「サイズ」の2spanが縦積みになっていたので1行に。
     区切りの「/」は fs 側CSSの ::before */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px;
}
.fs-c-variationLabel__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: 0.05em;
}
.fs-c-variationList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fs-c-variationList__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--color-bg-soft);
  border-radius: 2px;
}
/* カラー名（グループ見出し）。配下のサイズ名より一段上を保つ */
.fs-c-variationList__item__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  flex: 1;
}
.fs-c-variationList__item__body {
  flex: 1 1 100%;
}

/* バリエーションカート（1セル＝［画像］名前＋お気に入り＋カート）
   ⚠ 以前は ul をグリッドにして li を display:contents で流し込んでいたが、
   商品によって li の子要素数が 3 or 4（バリエーション画像の有無）で変わり、
   4つの商品ではセルが1つずつずれて全体が崩れた。
   li 自身を flex 行にすれば子要素の数に依存しない。 */
.fs-c-variationCart {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
/* サイズが縦一列だと10色×5サイズで数千pxになるので2列に畳む。
   左列のカートボタン（黒ベタ）と右列のサムネイルが隣り合うので、
   列間はしっかり空ける */
@media (min-width: 700px) {
  .fs-c-variationCart {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 64px;
  }
}
.fs-c-variationCart > li {
  display: flex;
  align-items: center;
  /* ハートとカートが8pxで隣接していて誤タップしやすかった */
  gap: 12px;
  min-width: 0;
  padding: 3px 0;
}
.fs-c-variationCart__image {
  flex: none;
  width: 44px;
}
.fs-c-variationCart__image img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  display: block;
}
.fs-c-variationCart__variationName {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  /* 購入判断そのものの情報なので13px→14px。
     行高は 14×1.5=21 + gap1 + 在庫12×1.5=18 = 40px で、
     サムネ44px・カートボタン42/46px の内側に収まる＝ページは伸びない */
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
}
.fs-c-variationCart__variationName__name {
  overflow-wrap: anywhere;
}
.fs-c-variationCart__variationName__stock {
  /* 在庫は購入判断に直結するので11px→12px */
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-mute);
  margin: 0;
}
.fs-c-variationCart__variationName__stock--outOfStock {
  color: var(--color-price);
  font-weight: 500;
}
/* カートボタンと在庫切れ表示は同じ幅で列を通す（ラッパーで幅を決め、
   中身を100%にすれば「カートに入れる」と「SOLD OUT」が必ず揃う） */
.fs-c-variationCart__cartButton {
  flex: none;
  margin: 0;
  width: 112px;
  min-height: 44px;   /* iOS の 44pt ちょうど。48pxにすると50行で数百px伸びる */
  /* ラッパーをflexにして中身を縦にも伸ばす＝両者の高さも一致する */
  display: flex;
}
@media (min-width: 768px) {
  .fs-c-variationCart__cartButton { width: 132px; min-height: 46px; }
}

/* === セルごとの「お気に入り」をハートアイコン化（本番と同じ挙動） === */
.fs-c-variationCart__wishlist {
  flex: none;
  margin: 0;
}
.fs-c-button--addToWishList--icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: border-color 0.2s ease, background 0.2s ease;
}
/* 見た目は36px円のまま、当たり判定だけ4px外へ広げて44x44相当にする
   （::before はハートの字形に使っているので ::after を使う） */
.fs-c-variationCart .fs-c-button--addToWishList--icon::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
}
.fs-c-button--addToWishList--icon:hover {
  border-color: var(--color-gold);
  background: rgba(184,149,106,0.08);
}
/* テキストは読み上げのみ残して視覚的に隠す */
.fs-c-button--addToWishList--icon .fs-c-button__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
/* ハートを ::before で描画 */
.fs-c-button--addToWishList--icon::before {
  content: "♡";
  font-size: 18px;
  color: var(--color-text-sub);
  line-height: 1;
}
.fs-c-button--addToWishList--icon:hover::before {
  color: var(--color-gold);
}

/* === カートボタン === */
.fs-c-button--addToCart--variation,
.fs-c-button--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background: var(--color-ink);
  color: white;
  border: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: opacity 0.2s ease;
  font-family: var(--font-sans);
}
.fs-c-button--addToCart--variation:hover,
.fs-c-button--primary:hover {
  opacity: 0.85;
}
.fs-c-button--addToCart--variation:disabled {
  background: var(--color-text-mute);
  cursor: not-allowed;
  opacity: 0.6;
}
/* ラベル側の .fs-c-button__label が 13px/0.1em を持っていて、
   112px幅にちょうど収まらず「カートに入れ／る」と折り返していた。
   バリエーション行では両方を明示して1行に固定する */
.fs-c-variationCart .fs-c-button--addToCart--variation,
.fs-c-variationCart .fs-c-button--addToCart--variation .fs-c-button__label {
  font-size: 12px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.fs-c-variationCart .fs-c-button--addToCart--variation {
  width: 100%;
  min-width: 0;
  padding: 11px 6px;
}
@media (min-width: 768px) {
  .fs-c-variationCart .fs-c-button--addToCart--variation { padding: 12px 6px; }
}
/* 在庫切れ：fs は「—」しか出さないので、カートボタンと同じ形の
   グレーのブロックにして「在庫切れ」と読ませる */
.fs-c-variationCart__cartButton--outOfStock {
  align-items: center;
  justify-content: center;
  background: var(--color-line);
  color: var(--color-text-sub);
}
.fs-c-variationCart__cartButton--outOfStock .fs-c-outOfStockButton {
  display: block;
  width: 100%;
  text-align: center;
  background: none;
  padding: 0;
  font-size: 0;          /* 元の「—」を消す */
}
.fs-c-variationCart__cartButton--outOfStock .fs-c-outOfStockButton::after {
  content: "在庫切れ";
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-text-sub);
}
/* 名前の下の赤い「在庫切れ」はボタン側の表示と重複するので隠す
   （「残りわずか」等の他の在庫ラベルは従来どおり表示される） */
.fs-c-variationCart > li:has(.fs-c-variationCart__cartButton--outOfStock)
  .fs-c-variationCart__variationName__stock--outOfStock {
  display: none;
}
.fs-c-button__label {
  font-size: 13px;
  letter-spacing: 0.1em;
}

/* === 返品特約・問い合わせ === */
.fs-c-returnedSpecialContract,
.fs-c-inquiryAboutProduct {
  font-size: 12px;
  margin: 0 auto;
  text-align: center;
}
/* 文字ボックスがそのまま当たり判定になっていて、SPで返品特約が96x12pxしかなかった。
   見た目（12px・下線・グレー・中央揃え）は変えず、当たり判定だけ44pxにする */
.fs-c-returnedSpecialContract a,
.fs-c-button--inquiryAboutProduct {
  color: var(--color-text-sub);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 12px;
  display: inline-block;
  box-sizing: border-box;
  min-height: 44px;
  padding: 12px 16px;
}
/* 増えた上下ぶんを相殺して従来の縦リズムを保つ */
.fs-l-productLayout > .fs-c-returnedSpecialContract,
.fs-l-productLayout > .fs-c-inquiryAboutProduct {
  margin-top: -10px;
  margin-bottom: -10px;
}

/* === 商品説明（小）／（大）／独自コメント（1） ===
   送料の下・バリエーションの上に3つ続けて出る。
   区切りは「送料の下線」と「バリエーションの上線」だけにして、
   3つはひと続きの本文として同じ体裁で読ませる（一樹さん指定：文字サイズ共通） */
.fs-p-productDescription,
.rs-product-comment1 {
  margin: 0 auto;
  padding: 32px 0;
  /* 区切り線は各ブロックの上に付ける。
     ⚠ 以前は送料パーツの下線でグループの始まりを示していたが、
     メール便商品など送料パーツが出ない商品では線が消えてしまう */
  border-top: 1px solid var(--color-line-soft);
  /* 30〜60代の可読下限16px。行間はコラム本文（.rs-col-body）と同値に揃える */
  font-size: 16px;
  line-height: 1.95;
  color: var(--color-text);
}
@media (min-width: 768px) {
  .fs-p-productDescription,
  .rs-product-comment1 { padding: 40px 0; }
}

/* 独自コメント（1）が空の商品では枠ごと出さない */
.rs-product-comment1:empty { display: none; }

.fs-p-productDescription p,
.rs-product-comment1 p {
  margin: 0 0 18px;
}
.fs-p-productDescription img,
.rs-product-comment1 img,
.rs-product-comment1 iframe,
.rs-product-comment1 video {
  max-width: 100%;
  height: auto;
}
/* 独自コメントには動画の埋め込みが入ることがある */
.rs-product-comment1 iframe { aspect-ratio: 16 / 9; width: 100%; }
.rs-product-comment1 a { color: var(--color-gold-dark); text-decoration: underline; }

/* 店舗側は古いHTML（cellpadding付きの table）で組まれていることがある。
   セルの左右余白はそのまま活かす（一樹さん判断：内側の余白はあってよい）。
   はみ出しだけ防ぐ */
.rs-product-comment1 table { max-width: 100%; }
.rs-product-comment1 th { text-align: left; }

/* 本文16px化で埋没しないよう見出しも一段上げる */
.fs-p-productDescription--full h3,
.fs-p-productDescription--full strong {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-ink);
  display: block;
  margin: 32px 0 12px;
}

/* === レビューエリア（fs-c-productReview） === */
.fs-c-productReview {
  padding: 40px 0;
  margin: 0 auto;
  border-top: 1px solid var(--color-line-soft);
}
@media (min-width: 768px) {
  .fs-c-productReview { padding: 64px 0; }
}
.fs-c-aggregateRating {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 auto 24px;
  padding: 16px;
  background: var(--color-bg-soft);
}
.fs-c-aggregateRating__rating {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.fs-c-rating__value,
.fs-c-aggregateRating__rating .fs-c-reviewStars {
  font-family: var(--font-serif);
}
.fs-c-aggregateRating__count {
  font-size: 13px;
  color: var(--color-text-sub);
}

/* レビュースター */
.fs-c-reviewStars {
  font-size: 14px;
  color: var(--color-gold);
}

/* レビューリスト */
.fs-c-reviewList,
.fs-c-productReview__reviewList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.fs-c-reviewList__item {
  padding: 20px 0;
  border-bottom: 1px solid var(--color-line-soft);
}
.fs-c-reviewList__item__info {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--color-text-sub);
}
/* 投稿者情報：名前／購入者／県・年代 が縦3行に積まれ、その横に投稿日と星が
   バラバラの高さで並んでいた。星→名前→属性→（右端に）投稿日 の1行に整える */
.fs-c-reviewInfo__reviewer {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.fs-c-reviewer__name,
.fs-c-reviewer__status,
.fs-c-reviewer__profile {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.fs-c-reviewer__name a { color: var(--color-text); text-decoration: none; }
.fs-c-reviewer__name a:hover { text-decoration: underline; }
.fs-c-reviewer__profile {
  font-weight: 600;
  color: var(--color-text);
}
/* 星がいちばん速く読めるので先頭へ */
.fs-c-reviewRating { order: -1; }
/* 投稿日は右端に寄せて、ラベルと日付を1行に */
.fs-c-reviewInfo__date {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 0 auto;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-mute);
}
.fs-c-reviewInfo__date dt,
.fs-c-reviewInfo__date dd {
  margin: 0;
  font-family: var(--font-sans);
}
.fs-c-reviewInfo__date dd { font-family: var(--font-mono); }
@media (max-width: 767px) {
  /* スマホでは右寄せをやめて素直に折り返す */
  .fs-c-reviewInfo__date { margin-left: 0; }
}
.fs-c-reviewBody {
  font-size: 14px;
  line-height: 1.85;
  color: var(--color-text-sub);
}

/* レビュー投稿ボタン */
.fs-c-reviewsForm,
.fs-c-productReviewed {
  margin-top: 32px;
}

/* レビューページ（/p/reviews/*）のレビュー対象商品ブロック
   一樹さんご指示（2026-09-15）：商品画像を中央寄せ／画像の下の商品名は削除
   画像は display:block なので text-align では中央にならず margin-inline:auto が要る。
   商品番号と価格は fs-c-productNumber / fs-c-productPrice が flex なので justify-content。
   ※ .fs-c-productReviewed はレビュー一覧・レビュー投稿ページにしか出ない要素 */
.fs-c-productReviewed {
  text-align: center;
}
.fs-c-productReviewed__image__image {
  margin-left: auto;
  margin-right: auto;
}
.fs-c-productReviewed__name {
  display: none;
}
.fs-c-productReviewed__number .fs-c-productNumber,
.fs-c-productReviewed__prices .fs-c-productPrice {
  justify-content: center;
}
/* 画像の下・価格の下に余白、番号と価格は一覧サイズ（12/16px）だと小さいので上げる
   （一樹さんご指示 2026-09-15）。商品詳細の 28px までは上げず中間に置く */
.fs-c-productReviewed__image {
  margin-bottom: 24px;
}
.fs-c-productReviewed__number .fs-c-productNumber {
  font-size: 14px;
}
.fs-c-productReviewed__prices {
  margin: 0 0 28px;
}
.fs-c-productReviewed__prices .fs-c-price {
  font-size: 22px;
}
.fs-c-productReviewed__prices .fs-c-productPrice__main__label,
.fs-c-productReviewed__prices .fs-c-productPrice__addon {
  font-size: 13px;
}
.fs-c-button--addReview--detail {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid var(--color-line);
  background: #fff;
  color: var(--color-text);
  text-decoration: none;
  font-size: 13px;
  cursor: pointer;
}
.fs-c-button--addReview--detail:hover {
  background: var(--color-bg-soft);
}

/* === 関連商品（fs-p-recommendedProduct） === */
.fs-p-recommendedProduct {
  padding: 40px 0 0;
  margin: 0 auto;
  border-top: 1px solid var(--color-line-soft);
}
@media (min-width: 768px) {
  .fs-p-recommendedProduct { padding: 64px 0 0; }
}
.fs-p-recommendedProduct__title,
.fs-c-heading--section {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  text-align: center;
  margin: 0 0 32px;
  color: var(--color-ink);
}

/* === 画像拡大モーダル（fs-c-productImageModal） === */
.fs-c-productImageModal {
  z-index: 1000;
}
/* 閉じる✕。背景は暗いオーバーレイ（rgba(0,0,0,.7)）なので白に。
   ただし真後ろに白い画像が来ることもあるので、黒55%の丸座を必ず敷く。
   （白画像の上でも実効 #737373 になり、白文字とのコントラストは約4.7:1）
   さらに暗い画像の上で輪郭が消えないよう、白の細いリングを添える */
.fs-c-productImageModal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}
.fs-c-productImageModal__close:hover { background: rgba(0, 0, 0, 0.78); }
.fs-c-productImageModal__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28), 0 0 0 4px rgba(255, 255, 255, 0.55);
}
/* ✕ の字形が ::before で入る実装にも備えて色を通す */
.fs-c-productImageModal__close::before,
.fs-c-productImageModal__close::after { color: #fff; }

/* === このカテゴリの他のアイテム（自前の関連商品） ===
   一覧の .fs-c-productListItem をそのまま複製して並べるので、
   カード本体の見た目は商品一覧のCSSがそのまま効く */
.rs-related {
  padding: 40px 0 0;
  border-top: 1px solid var(--color-line-soft);
}
/* 読み込みが終わるまでは高さ0のまま置いておく。
   display:none にすると IntersectionObserver が発火せず永久に読み込まれない */
.rs-related:not([data-rs-ready]) {
  padding: 0;
  border: 0;
  /* ⚠ 面積0の要素は IntersectionObserver が発火しないので1pxだけ残す */
  min-height: 1px;
}
.rs-related:not([data-rs-ready]) > * { display: none; }
.rs-related__title {
  margin: 0 0 24px;
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--color-text);
}
.rs-related__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 12px;
}
@media (min-width: 768px) {
  .rs-related { padding-top: 56px; }
  .rs-related__title { font-size: 19px; margin-bottom: 32px; }
  .rs-related__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 32px 20px;
  }
}



.rs-buybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* ヘッダー100・ドロワー200/201・モーダル1000 の下に潜らせる */
  z-index: 90;
  background: #fff;
  border-top: 1px solid var(--color-line);
  box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.10);
  /* iPhone のホームバー分を足す（対応外ブラウザでは 0） */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(110%);
  /* 隠れている間はフォーカスも当たらないように visibility で落とす */
  visibility: hidden;
  transition: transform 0.22s ease, visibility 0s linear 0.22s;
}
.rs-buybar.is-shown {
  transform: none;
  visibility: visible;
  transition: transform 0.22s ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  /* .rs-buybar.is-shown は詳細度0-2-0。ここも同じ2クラスで書かないと
     「出る側」のスライドだけ残ってしまう */
  .rs-buybar,
  .rs-buybar.is-shown { transition: none; }
}
/* PC は購入エリアが2列で見渡せるので出さない */
@media (min-width: 768px) {
  .rs-buybar { display: none; }
}
/* ドロワーを開けている間は引っ込める */
body.rs-no-scroll .rs-buybar { display: none; }

.rs-buybar__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
}
.rs-buybar__price {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  white-space: nowrap;
}
.rs-buybar__value {
  font-size: 19px;
  font-weight: 600;   /* 本文の価格と同じ見え方に揃える */
  line-height: 1.2;
  color: var(--color-price);
  letter-spacing: 0.01em;
}
.rs-buybar__tax {
  font-size: 12px;
  color: var(--color-text-sub);
}

.rs-buybar__btn {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 0 16px;
  border: 0;
  outline: none;
  border-radius: 2px;
  background: var(--color-gold);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.2;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.rs-buybar__btn::-moz-focus-inner { border: 0; padding: 0; }
.rs-buybar__btn:active { background: var(--color-gold-dark); }
.rs-buybar__btn:focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--color-gold-dark);
}
/* 買えない商品では金額を主役にしない */
.rs-buybar--soldOut .rs-buybar__value { color: var(--color-text-sub); }
.rs-buybar--soldOut .rs-buybar__btn {
  background: #fff;
  color: var(--color-text);
  /* --color-line だと白地に1.5:1でボタンの輪郭が見えない */
  border: 1px solid var(--color-text-sub);
}
.rs-buybar--soldOut .rs-buybar__btn:active { background: var(--color-bg-soft); }

/* ラベルが伸びても、はみ出しをボタンの下に潜らせず price の右端で止める */
.rs-buybar__price { overflow: hidden; }

/* iPhone の「画面表示の拡大」等で 320px になると価格＋ボタンが入りきらず、
   「税込」がボタンに食い込む。下限12pxを割らない範囲で詰める */
@media (max-width: 359px) {
  .rs-buybar__inner { gap: 8px; padding: 8px 12px; }
  .rs-buybar__value { font-size: 17px; }
  .rs-buybar__btn { padding: 0 12px; font-size: 14px; letter-spacing: 0; }
}

/* JSがジャンプ先として focus する。マウス起点では枠を出さない */
.fs-c-variationAndActions:focus { outline: none; }
.fs-c-variationAndActions:focus-visible {
  outline: 2px solid var(--color-gold-dark);
  outline-offset: 4px;
}


/* ==========================================================================
   07 コラム記事（/f/column/*）と読みもの一覧（/f/column）
   --------------------------------------------------------------------------
   置き場所 : アイテム
   書くもの : 記事本文・目次・関連記事・一覧ページのカテゴリ見出し
   読み込み順: 7 番目（番号が大きいほど後＝強い）
   ※ ファイルを増やす／順番を変えるときは scripts/split_css.py と
     assets/css/README.md も一緒に直すこと
   ========================================================================== */

.rs-guide-toc {border: 1px solid var(--color-line);
  border-radius: 4px;
  padding: 24px;
  margin: 40px 0;}
@media (min-width: 768px) {
  .rs-guide-toc {padding: 28px 32px;}
}
.rs-guide-toc__title {font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-text);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-line-soft);}
.rs-guide-toc__list {display: grid;
  grid-template-columns: 1fr;
  gap: 10px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;}
@media (min-width: 768px) {
  .rs-guide-toc__list {grid-template-columns: 1fr 1fr;}
}
.rs-guide-toc__link {display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
  color: var(--color-text-sub);
  text-decoration: none;
  padding: 4px 0;
  counter-increment: toc;}
.rs-guide-toc__link::before {content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-gold);
  font-weight: 600;
  flex-shrink: 0;}
.rs-guide-toc__link:hover {color: var(--color-gold-dark); text-decoration: underline;}
.rs-col-wrap {max-width: 820px; margin: 0 auto;}
.rs-col-head {text-align: center; padding: 8px 0 4px;}
.rs-col-cat {display:inline-block; font-size:12px; letter-spacing:.12em; color:var(--color-gold); font-weight:600; margin:0 0 12px;}
.rs-col-title {font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:30px; line-height:1.5; font-weight:600; color:var(--color-text); margin:0 0 16px;}
@media (max-width:767px) {
  .rs-col-title {font-size:23px;}
}
.rs-col-lead {font-size:16px; line-height:1.95; color:var(--color-text-sub); text-align:left; margin:0 auto 8px;}
.rs-col-hero {margin:24px 0 34px;}
.rs-col-hero .wf-placeholder {aspect-ratio:16/9; border-radius:6px;}
/* 実画像を入れたとき。プレースホルダーと同じ 16:9・角丸に揃える */
.rs-col-hero img {display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:6px;}
/* 記事カードのサムネイル（一覧・関連の読みもの共通） */
.rs-article-card__media img {display:block; width:100%; height:100%; object-fit:cover;}
.rs-col-body {font-size:16px; line-height:1.95; color:var(--color-text-sub);}
.rs-col-body > h2 {font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:22px; line-height:1.5; color:var(--color-text); margin:64px 0 16px; padding:0 0 10px; border-bottom:2px solid var(--color-line);}
.rs-col-body > h3 {font-size:17px; color:var(--color-text); margin:28px 0 10px; padding-left:12px; border-left:4px solid var(--color-gold);}
.rs-col-body p {margin:0 0 18px;}
.rs-col-body strong {color:var(--color-gold-dark); font-weight:600;}
.rs-col-body a {color:var(--color-gold-dark); text-decoration:underline; text-underline-offset:2px;}
.rs-col-body ul {margin:0 0 20px; padding-left:1.3em;}
.rs-col-body li {margin:0 0 9px;}
.rs-col-note {background:var(--color-bg-soft); border-radius:6px; padding:18px 22px; margin:24px 0; font-size:14.5px; line-height:1.85; color:var(--color-text-sub);}
.rs-col-note strong {color:var(--color-gold-dark);}
.rs-col-cta {background:var(--color-bg-soft); border:1px solid var(--color-line-soft); border-radius:8px; padding:28px 24px; margin:36px 0; text-align:center;}
.rs-col-cta__eyebrow {font-size:12px; letter-spacing:.1em; color:var(--color-gold); font-weight:600; margin:0 0 8px;}
.rs-col-cta__title {font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:19px; color:var(--color-text); margin:0 0 16px;}
.rs-col-cta__btn {display:inline-block; background:var(--color-text); color:#fff; font-size:15px; font-weight:600; letter-spacing:.04em; padding:14px 36px; border-radius:4px; text-decoration:none; transition:background .2s;}
.rs-col-cta__btn:hover {background:#000;}
.rs-col-body a.rs-col-cta__btn {color:#fff; text-decoration:none;}
.rs-col-body a.rs-col-cta__btn:hover {color:#fff;}
.rs-col-secttl {text-align:center; margin:48px 0 24px;}
.rs-col-secttl__en {display:block; font-size:11px; letter-spacing:.18em; color:var(--color-gold); font-weight:600;}
.rs-col-secttl__ja {font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:20px; color:var(--color-text); margin-top:6px;}
.rs-col-author {display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--color-line-soft); border-radius:8px; padding:16px 20px; margin:32px 0;}
.rs-col-author__avatar {width:48px; height:48px; border-radius:50%; background:var(--color-bg-soft); flex:0 0 auto; display:flex; align-items:center; justify-content:center; color:var(--color-gold); font-size:18px;}
.rs-col-author__name {font-weight:600; color:var(--color-text); font-size:14px;}
.rs-col-author__desc {font-size:12.5px; color:var(--color-text-mute); margin-top:2px;}

/* ==========================================================================
   読みもの一覧（/f/column/）
   ・カテゴリ別に全記事を並べる。記事は各カテゴリに1回だけ出る
   ・グリッドは data-rs-mount="band"。columns.js 配置後は自動更新になる
   ========================================================================== */
.rs-col-index__head {
  max-width: 720px;
  margin: 0 auto 28px;
  text-align: center;
}
.rs-col-index__en {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--color-gold-dark);
}
.rs-col-index__title {
  margin: 0 0 18px;
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-text);
}
@media (min-width: 768px) {
  .rs-col-index__title { font-size: 32px; }
}
.rs-col-index__lead {
  margin: 0;
  font-size: 15px;
  line-height: 2;
  color: var(--color-text-sub);
}
@media (min-width: 768px) {
  .rs-col-index__lead { font-size: 16px; }
}
.rs-col-index__nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rs-col-index__nav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* 指で押せる高さを確保する */
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  font-size: 13.5px;
  letter-spacing: 0.03em;
  color: var(--color-text);
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.rs-col-index__nav a:hover {
  border-color: var(--color-gold);
  background: var(--color-bg-soft);
  color: var(--color-gold-dark);
}
.rs-col-index__count {
  font-size: 11px;
  color: var(--color-text-mute);
  font-variant-numeric: tabular-nums;
}
/* 見出しから飛んだときに追従ヘッダーへ潜らないように（html側の
   scroll-padding-top が効くので個別指定は不要だが、節の余白は確保する） */
.rs-section[id^="col-"] .rs-col-secttl { margin-bottom: 24px; }


/* ==========================================================================
   08 ガイド6本（guide/faq/contact/company/size-guide/fitting-reservation）
   --------------------------------------------------------------------------
   置き場所 : アイテム
   書くもの : 手順ステップ・電話CTA・FAQアコーディオン・サイズ表
   読み込み順: 8 番目（番号が大きいほど後＝強い）
   ※ ファイルを増やす／順番を変えるときは scripts/split_css.py と
     assets/css/README.md も一緒に直すこと
   ========================================================================== */

.rs-guide-hero {background: var(--color-bg-soft);
  padding: 40px 0;
  text-align: center;}
@media (min-width: 768px) {
  .rs-guide-hero {padding: 56px 0;}
}
.rs-guide-hero__eyebrow {font-size: 12px;
  letter-spacing: 0.25em;
  color: var(--color-gold-dark);
  font-weight: 600;
  margin: 0 0 12px;}
.rs-guide-hero__title {font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 12px;
  letter-spacing: 0.04em;}
@media (min-width: 768px) {
  .rs-guide-hero__title {font-size: 36px;}
}
.rs-guide-hero__lead {font-size: 15px;
  line-height: 1.85;
  color: var(--color-text-sub);
  margin: 0;}
@media (min-width: 768px) {
  .rs-guide-toc {padding: 28px 32px;}
}
@media (min-width: 768px) {
  .rs-guide-toc__list {grid-template-columns: 1fr 1fr;}
}
.rs-guide-sec {padding: 40px 0;
  border-top: 1px solid var(--color-line-soft);
}
.rs-guide-sec__title {display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 24px;
  line-height: 1.3;}
@media (min-width: 768px) {
  .rs-guide-sec__title {font-size: 26px;}
}
.rs-guide-sec__num {font-family: var(--font-mono);
  font-size: 16px;
  color: var(--color-gold);
  font-weight: 600;
  flex-shrink: 0;}
.rs-guide-body {font-size: 15px;
  line-height: 1.9;
  color: var(--color-text-sub);}
.rs-guide-body p {margin: 0 0 16px;}
.rs-guide-body p:last-child {margin-bottom: 0;}
.rs-guide-body strong {color: var(--color-text); font-weight: 600;}
.rs-guide-body .rs-em {color: var(--color-price); font-weight: 600;}
.rs-steps {display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;}
@media (min-width: 768px) {
  .rs-steps {grid-template-columns: repeat(4, 1fr); gap: 12px;}
}
.rs-step {position: relative;
  background: var(--color-bg-soft);
  padding: 24px 18px;
  text-align: center;
  counter-increment: step;}
.rs-step__num {display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-gold);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 12px;}
.rs-step__num::before {content: "STEP " counter(step); font-size: 0;}
.rs-step__title {font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 8px;}
.rs-step__desc {font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-sub);
  margin: 0;}
.rs-pay-list {display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;}
@media (min-width: 600px) {
  .rs-pay-list {grid-template-columns: 1fr 1fr;}
}
.rs-pay-item {border: 1px solid var(--color-line);
  border-radius: 4px;
  padding: 16px 18px;}
.rs-pay-item__name {font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 6px;}
.rs-pay-item__desc {font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-sub);
  margin: 0;}
.rs-guide-table-wrap {overflow-x: auto;}
.rs-guide-table {width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 420px;}
.rs-guide-table th, .rs-guide-table td {border: 1px solid var(--color-line);
  padding: 12px;
  text-align: center;}
.rs-guide-table thead th {background: var(--color-ink);
  color: #fff;
  font-weight: 600;}
.rs-guide-table tbody th {background: var(--color-bg-soft);
  font-weight: 600;
  white-space: nowrap;}
.rs-guide-table .rs-rate {font-family: var(--font-serif);
  font-size: 16px;
  color: var(--color-gold-dark);
  font-weight: 600;}
.rs-guide-notes {list-style: none;
  margin: 16px 0 0;
  padding: 18px 20px;
  background: var(--color-bg-soft);
  border-radius: 4px;}
.rs-guide-notes li {font-size: 13px;
  line-height: 1.8;
  color: var(--color-text-sub);
  padding-left: 18px;
  position: relative;}
.rs-guide-notes li + li {margin-top: 8px;}
.rs-guide-notes li::before {content: "※";
  position: absolute;
  left: 0;
  color: var(--color-gold-dark);}
.rs-guide-more {margin-top: 20px;}
.rs-guide-more__link {display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-gold-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--color-gold-bright);
  padding-bottom: 2px;}
.rs-guide-more__link:hover {color: var(--color-ink); border-bottom-color: var(--color-ink);}
.rs-guide-contact {display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 8px;}
@media (min-width: 768px) {
  .rs-guide-contact {grid-template-columns: 1fr 1fr;}
}
.rs-guide-contact__box {border: 1px solid var(--color-line);
  border-radius: 4px;
  padding: 22px 24px;}
.rs-guide-contact__label {font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--color-gold-dark);
  font-weight: 600;
  margin: 0 0 10px;}
.rs-guide-contact__tel {font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 4px;
  line-height: 1.2;}
.rs-guide-contact__note {font-size: 13px;
  color: var(--color-text-sub);
  margin: 0 0 4px;}
.rs-guide-contact__btn {display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 12px 22px;
  background: var(--color-ink);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 2px;}
.rs-guide-contact__btn:hover {background: #000;}
.rs-form {max-width: 720px;}
.rs-form__row {margin: 0 0 22px;}
.rs-form__label {display: block; font-size: 14px; font-weight: 600; color: var(--color-text); margin: 0 0 8px;}
.rs-form__req {display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 600; color: #fff; background: var(--color-price); border-radius: 2px; padding: 1px 6px; vertical-align: 2px;}
.rs-form__opt {display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 600; color: var(--color-text-sub); background: var(--color-bg-soft); border-radius: 2px; padding: 1px 6px; vertical-align: 2px;}
.rs-form__input, .rs-form__select, .rs-form__textarea {width: 100%; font-size: 16px; color: var(--color-text); background: #fff;
      border: 1px solid var(--color-line); border-radius: 4px; padding: 12px 14px;
      font-family: inherit; line-height: 1.6; box-sizing: border-box; appearance: none; -webkit-appearance: none;}
.rs-form__select {background-image: linear-gradient(45deg, transparent 50%, var(--color-text-sub) 50%), linear-gradient(135deg, var(--color-text-sub) 50%, transparent 50%); background-position: calc(100% - 20px) center, calc(100% - 15px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 40px;}
.rs-form__textarea {min-height: 160px; resize: vertical;}
.rs-form__input:focus, .rs-form__select:focus, .rs-form__textarea:focus {outline: none; border-color: var(--color-gold); box-shadow: 0 0 0 3px rgba(184,149,106,0.18);}
.rs-form__check {display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--color-text-sub); line-height: 1.7;}
.rs-form__check input {margin-top: 4px; width: 18px; height: 18px; flex: 0 0 auto;}
.rs-form__submit {display: inline-block; width: 100%; max-width: 360px; margin: 8px auto 0; font-size: 16px; font-weight: 600; letter-spacing: 0.06em; color: #fff; background: var(--color-text); border: 0; border-radius: 4px; padding: 16px 24px; cursor: pointer; transition: background .2s;}
.rs-form__submit:hover {background: #000;}
.rs-form__submit:focus-visible {outline: none; box-shadow: 0 0 0 3px rgba(184,149,106,0.35);}
.rs-form__submit-wrap {text-align: center; margin-top: 28px;}
.rs-form__namegrid {display: grid; grid-template-columns: 1fr 1fr; gap: 12px;}
.rs-form__sublabel {display: block; font-size: 12px; color: var(--color-text-mute); margin: 0 0 4px;}
.rs-form__lead-note {font-size: 13px; color: var(--color-text-sub); margin: 14px 0 0;}
.rs-tel-cta {background: var(--color-bg-soft);
  border: 1px solid var(--color-gold-bright);
  border-radius: 6px;
  padding: 32px 24px;
  text-align: center;}
@media (min-width: 768px) {
  .rs-tel-cta {padding: 40px 32px;}
}
.rs-tel-cta__label {font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-text);
  margin: 0 0 16px;}
.rs-tel-cta__num {display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-serif);
  font-size: 34px;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  line-height: 1.1;
  letter-spacing: 0.02em;}
@media (min-width: 768px) {
  .rs-tel-cta__num {font-size: 44px;}
}
.rs-tel-cta__num svg {width: 30px;
  height: 30px;
  color: var(--color-gold-dark);
  flex-shrink: 0;}
@media (min-width: 768px) {
  .rs-tel-cta__num svg {width: 38px; height: 38px;}
}
.rs-tel-cta__hours {font-size: 14px;
  color: var(--color-text-sub);
  margin: 12px 0 0;}
.rs-tel-cta__attention {font-size: 13px;
  line-height: 1.8;
  color: var(--color-price);
  font-weight: 600;
  margin: 18px auto 0;
  max-width: 560px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 4px;}
/* 白カードの見出し。カードの中に入れられない（ul の外）ので、
   同じ 560px の列に左揃えで乗せて、間を詰めて一体に見せる */
.rs-tel-points__lead {font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin: 22px auto 0;
  max-width: 560px;
  text-align: left;
  line-height: 1.7;}
.rs-tel-points__lead + .rs-tel-points {margin-top: 8px;}
.rs-tel-points {display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  list-style: none;
  margin: 22px auto 0;
  padding: 18px 20px;
  max-width: 560px;
  text-align: left;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 4px;}
.rs-tel-points li {font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  padding-left: 26px;
  position: relative;
  line-height: 1.7;}
.rs-tel-points li::before {content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-gold-dark);
  font-weight: 700;}
.rs-tel-note {font-size: 13px;
  line-height: 1.85;
  color: var(--color-text-sub);
  margin: 16px auto 0;
  max-width: 560px;
  text-align: left;}
.rs-tel-note + .rs-tel-note {margin-top: 8px;}
.rs-map {aspect-ratio: 16 / 9;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-line-soft);
  display: block;
  color: var(--color-text-mute);
  font-size: 13px;
  margin: 0 0 20px;}
/* 表の直後に地図を置く場合の余白（会社概要ページ） */
.rs-guide-table-wrap + .rs-map {margin-top: 16px;}
/* Googleマップの iframe を枠いっぱいに（枠の背景・枠線は読み込み中のプレースホルダーを兼ねる） */
.rs-map iframe {width: 100%;
  height: 100%;
  border: 0;
  display: block;}
@media (min-width: 768px) {
  .rs-map {aspect-ratio: 21 / 9;}
}
.rs-guide-photos {display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0 0 20px;}
@media (min-width: 600px) {
  .rs-guide-photos {grid-template-columns: 1fr 1fr;}
}
.rs-guide-photo {margin: 0;}
/* 1枚だけ全幅で見せるとき（試着室の写真）。枠の余白は実画像では不要なので消す
   上の本文とくっついて見えたので上に余白（一樹さんご指示 2026-09-15） */
.rs-guide-photo--wide {margin: 50px 0 20px;}
.rs-guide-photo--wide .rs-guide-photo__frame {aspect-ratio: 16 / 9;
  padding: 0;}
.rs-guide-photo__frame {aspect-ratio: 4 / 3;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-line-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-text-mute);
  font-size: 12px;
  line-height: 1.6;
  padding: 12px;
  overflow: hidden;}
.rs-guide-photo__frame img {width: 100%; height: 100%; object-fit: cover;}
.rs-guide-photo__caption {font-size: 12px;
  color: var(--color-text-sub);
  margin: 8px 0 0;
  line-height: 1.6;}

/* ---------- 会社概要：社名「HERSTORY」に込めた想い（2026-10-01） ---------- */
.rs-herstory {
  margin: 28px 0;
  padding: 28px 20px 26px;
  background: var(--color-bg-soft);
  text-align: center;
}
.rs-herstory__words {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 4px 16px;
  margin: 0 0 14px;
  font-family: var(--font-serif);
  font-size: 26px;
  letter-spacing: 0.12em;
  line-height: 1.3;
  color: var(--color-text);
}
@media (min-width: 768px) {
  .rs-herstory__words { font-size: 34px; }
}
.rs-herstory__his {
  color: var(--color-text-mute);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.rs-herstory__her { color: var(--color-gold); }
.rs-herstory__arrow { font-size: 0.6em; color: var(--color-gold); }
/* スマホは縦に積み、矢印を下向きにする（横並びだと矢印が1行目の末尾に残る） */
@media (max-width: 767px) {
  .rs-herstory__words { flex-direction: column; align-items: center; gap: 0; }
  .rs-herstory__arrow { display: inline-block; transform: rotate(90deg); line-height: 1; margin: 2px 0 4px; }
}
.rs-herstory__line {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--color-text-sub);
}

/* ---------- 会社概要：HISTORY｜沿革（2026-10-01） ----------
   年／縦線上の点／出来事。手本は hrm.co.jp の HISTORY。
   年の右端〜縦線 と 縦線〜出来事 を同じ間隔にする（PC 35px／スマホ 15px・一樹さん）。
   年は右寄せにして、文字幅が違っても縦線までの距離が変わらないようにしている。
   月を入れる行があれば、年の下に小さく出る */
.rs-history {
  --rs-hy: 46px;     /* 年の列（右寄せ。年の文字幅より少し広く） */
  --rs-hgap: 15px;   /* 年〜縦線、縦線〜出来事の間隔（同じ値） */
  list-style: none;
  margin: 0;
  /* 見出しの下24px＋20px。表と違って太字の行がすぐ始まるので詰まって見える。
     margin だと見出しの margin-bottom と相殺されて広がらないので padding で取る */
  padding: 20px 0 0;
}
@media (min-width: 768px) {
  .rs-history { --rs-hgap: 35px; }
}
.rs-history__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--rs-hy) calc(var(--rs-hgap) * 2) minmax(0, 1fr);
  padding-bottom: 22px;
}
/* 縦線：最初の行は点から下へ、最後の行は点まで */
.rs-history__item::before {
  content: "";
  position: absolute;
  left: calc(var(--rs-hy) + var(--rs-hgap) - 1px);
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-line);
}
.rs-history__item:first-child::before { top: 12px; }
.rs-history__item:last-child::before { bottom: auto; height: 12px; }
/* 点（出来事の1行目の高さにそろえる） */
.rs-history__item::after {
  content: "";
  position: absolute;
  left: calc(var(--rs-hy) + var(--rs-hgap) - 5px);
  top: 7px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-gold);
  box-shadow: 0 0 0 3px var(--color-bg);
}
.rs-history__date {
  grid-column: 1;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.rs-history__y {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--color-gold-dark);
}
.rs-history__m {
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-text-mute);
}
.rs-history__body { grid-column: 3; }
.rs-history__ev {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--color-text);
}
.rs-history__desc {
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--color-text-sub);
}
/* 同じ年の2つ目は年を見せない（読み上げでは年を残す） */
.rs-history__item--same .rs-history__y {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* 〜そして これから */
.rs-history-next {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--color-line-soft);
}
.rs-history-next__title {
  margin: 0 0 14px;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-gold-dark);
}
.rs-history-next__motto {
  margin: 26px 0;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 22px;
  letter-spacing: 0.1em;
  color: var(--color-text);
}
@media (min-width: 768px) {
  .rs-history-next__motto { font-size: 28px; }
}
/* 「ものづくりの基本を、丁寧に。」を HERSTORY と同じベージュの囲みで目立たせる（2026-10-13） */
.rs-history-next__box {
  margin: 28px 0 0;
  padding: 28px 20px 26px;
  background: var(--color-bg-soft);
  text-align: center;
}
.rs-history-next__box .rs-history-next__motto { margin: 0 0 14px; line-height: 1.5; }
.rs-history-next__lead {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--color-text-sub);
  text-align: left;
}
@media (min-width: 768px) {
  .rs-history-next__lead { max-width: 640px; margin: 0 auto; text-align: center; }
}


/* ==========================================================================
   09 下層グループへのリンク（fs-c-subgroup）
   --------------------------------------------------------------------------
   置き場所 : アイテム
   書くもの : long-dress などで出る「カテゴリから探す」。08 より後に読ませる必要があるのでこの位置
   読み込み順: 9 番目（番号が大きいほど後＝強い）
   ※ ファイルを増やす／順番を変えるときは scripts/split_css.py と
     assets/css/README.md も一緒に直すこと
   ========================================================================== */

/* --- 外枠：本文と同じコンテナ幅に揃える --- */
.fs-c-subgroup {
  max-width: var(--container-max, 1280px);
  margin: 0 auto;
  padding: 40px 16px 8px;
}
@media (min-width: 768px) {
  .fs-c-subgroup {
    padding: 56px 32px 8px;
  }
}

/* --- 「3件中 1-3件表示」は下層リンクには不要 --- */
.fs-c-subgroup .fs-c-listControl {
  display: none;
}

/* --- 見出し（CSSで付与：システム側にラベルが無いため） --- */
.fs-c-subgroupList::before {
  content: "カテゴリから探す";
  display: block;
  grid-column: 1 / -1;
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-text);
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--color-line);
}
@media (min-width: 768px) {
  .fs-c-subgroupList::before {
    font-size: 18px;
    padding-bottom: 14px;
  }
}

/* --- リスト：SP 1列 / TB 2列 / PC 3列 --- */
.fs-c-subgroupList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 24px;
}
@media (min-width: 600px) {
  .fs-c-subgroupList {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 900px) {
  .fs-c-subgroupList {
    grid-template-columns: repeat(3, 1fr);
  }
}

.fs-c-subgroupList__item {
  margin: 0;
  padding: 0;
}

/* --- 1件＝下線付きのリンク行。矢印で遷移を示す --- */
.fs-c-subgroupList__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 14px 16px 4px;
  border-bottom: 1px solid var(--color-line-soft);
  color: var(--color-text);
  text-decoration: none;
  transition: background-color 0.18s ease, padding-left 0.18s ease;
}
.fs-c-subgroupList__link::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-top: 1px solid var(--color-gold);
  border-right: 1px solid var(--color-gold);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}
.fs-c-subgroupList__link:hover,
.fs-c-subgroupList__link:focus-visible {
  background: var(--color-bg-soft);
  padding-left: 12px;
  outline: none;
}
.fs-c-subgroupList__link:hover .fs-c-subgroupList__label,
.fs-c-subgroupList__link:focus-visible .fs-c-subgroupList__label {
  color: var(--color-gold-dark);
}
.fs-c-subgroupList__link:hover::after {
  transform: rotate(45deg) translate(2px, -2px);
}

.fs-c-subgroupList__label {
  font-size: 14.5px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  transition: color 0.18s ease;
}
@media (min-width: 768px) {
  .fs-c-subgroupList__label {
    font-size: 15px;
  }
}

/* --- 画像付きの下層グループが登録された場合の保険 --- */
.fs-c-subgroupList__image {
  display: none;
}


/* ==========================================================================
   10 カート・会員登録・ログイン・マイページ・検索結果・メルマガ
   --------------------------------------------------------------------------
   置き場所 : アイテム
   書くもの : fs-c-* のシステムページ全般。会員登録の特典案内・会員ステージ表もここ
   読み込み順: 10 番目（番号が大きいほど後＝強い）
   ※ ファイルを増やす／順番を変えるときは scripts/split_css.py と
     assets/css/README.md も一緒に直すこと
   ========================================================================== */

/* --- ページ種別スコープ ------------------------------------
   fs-body-category / fs-body-product / fs-body-custom / fs-body-top
   以外＝システムページ。これらは fs-l-main 直下に幅の制御が無いため
   ここでコンテナ幅を与える。rs-header / rs-footer は fs-l-page 直下
   （JSで移動済み）なので影響を受けない。
------------------------------------------------------------ */
body:not(.fs-body-category):not(.fs-body-product):not(.fs-body-custom):not(.fs-body-top) .fs-l-main > * {
  /* --rs-main-width を body 側で上書きすればページ種別ごとに読み幅を変えられる
     （詳細度の勝負をせずに済ませるための変数経由） */
  max-width: var(--rs-main-width, var(--container-max, 1280px));
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 768px) {
  body:not(.fs-body-category):not(.fs-body-product):not(.fs-body-custom):not(.fs-body-top) .fs-l-main > * {
    padding-left: 32px;
    padding-right: 32px;
  }
}
/* 上下の余白は main 側でまとめて確保 */
body:not(.fs-body-category):not(.fs-body-product):not(.fs-body-custom):not(.fs-body-top) .fs-l-main {
  padding: 32px 0 72px;
}
@media (min-width: 768px) {
  body:not(.fs-body-category):not(.fs-body-product):not(.fs-body-custom):not(.fs-body-top) .fs-l-main {
    padding: 44px 0 96px;
  }
}

/* === 見出し ============================================== */
.fs-c-heading--page,
.fs-c-subSection__title,
.fs-c-featuredProduct__header,
.fs-c-documentColumn__heading {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-text);
  text-align: center;
  margin: 0 0 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-line);
}
@media (min-width: 768px) {
  .fs-c-heading--page,
  .fs-c-subSection__title,
  .fs-c-featuredProduct__header {
    font-size: 26px;
    margin-bottom: 36px;
  }
}
.fs-c-subSection__title {
  font-size: 18px;
  text-align: left;
  margin-top: 40px;
}
@media (min-width: 768px) {
  .fs-c-subSection__title { font-size: 19px; }
}

/* === メッセージ・注意書き ================================= */
.fs-c-pageMessage,
.fs-c-noResultMessage,
.fs-c-subSection__message,
.fs-c-inputInformation__message {
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text-sub);
  margin: 0 0 24px;
}
.fs-c-noResultMessage {
  background: var(--color-bg-soft);
  padding: 28px 20px;
  text-align: center;
}
.fs-c-noResultMessage__title {
  font-size: 15px;
  color: var(--color-text);
}

/* === ボタン ============================================== */
.fs-c-buttonContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 24px 0;
}
.fs-c-button--standard,
.fs-c-button--continueShopping,
.fs-c-button--memberRegister,
.fs-c-button--secondary,
.fs-c-button--login,
.fs-c-button--register {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  padding: 14px 28px;
  border: 1px solid var(--color-line);
  background: #fff;
  color: var(--color-text);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.fs-c-button--standard:hover,
.fs-c-button--continueShopping:hover,
.fs-c-button--memberRegister:hover,
.fs-c-button--secondary:hover,
.fs-c-button--login:hover,
.fs-c-button--register:hover {
  background: var(--color-bg-soft);
  border-color: var(--color-gold);
  color: var(--color-gold-dark);
}
/* 主要導線は反転 */
.fs-c-button--purchase,
.fs-c-button--checkout,
.fs-c-button--next,
.fs-c-button--confirm,
.fs-c-button--sendInquiry,
/* メルマガ登録の「次へ」は fs 側で --secondary が付くが、
   このページでは唯一の主要導線なので黒側に寄せる */
.fs-c-button--sendVerificationCode {
  background: var(--color-text);
  border-color: var(--color-text);
  color: #fff;
  font-weight: 600;
}
.fs-c-button--purchase:hover,
.fs-c-button--checkout:hover,
.fs-c-button--next:hover,
.fs-c-button--confirm:hover,
.fs-c-button--sendInquiry:hover,
.fs-c-button--sendVerificationCode:hover {
  opacity: 0.86;
  background: var(--color-text);
  color: #fff;
}
.fs-c-continueShopping {
  text-align: center;
  margin: 28px auto;
}

/* === 入力フォーム（会員登録・ログイン・お客様情報） ======== */
.fs-c-inputInformation,
.fs-c-fsLogin,
.fs-c-newUsers,
.fs-c-otherServiceLogin {
  margin: 0 auto 40px;
}
.fs-c-inputInformation__field,
.fs-c-fsLogin__form {
  max-width: 620px;
  margin: 0 auto;
}
.fs-c-inputTable {
  width: 100%;
  border-collapse: collapse;
}
.fs-c-inputTable > tbody > tr {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-line-soft);
}
@media (min-width: 768px) {
  .fs-c-inputTable > tbody > tr {
    display: grid;
    grid-template-columns: 210px 1fr;
    align-items: start;
    gap: 20px;
    padding: 18px 0;
  }
}
.fs-c-inputTable__headerCell {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-text);
  text-align: left;
  padding: 0;
}
.fs-c-inputTable__dataCell { padding: 0; }

.fs-c-inputField__field input[type="text"],
.fs-c-inputField__field input[type="email"],
.fs-c-inputField__field input[type="tel"],
.fs-c-inputField__field input[type="number"],
.fs-c-inputField__field input[type="password"],
.fs-c-inputField__field textarea,
.fs-c-inputField__field select,
.fs-c-dropdown select,
input.fs-c-input,
textarea.fs-c-input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--color-line);
  background: #fff;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 15px;   /* 16px未満だとiOSで自動ズームするため下げすぎない */
  line-height: 1.6;
  border-radius: 0;
  transition: border-color 0.2s ease;
}
.fs-c-inputField__field input:focus,
.fs-c-inputField__field textarea:focus,
.fs-c-inputField__field select:focus,
input.fs-c-input:focus {
  border-color: var(--color-gold);
  outline: none;
  box-shadow: 0 0 0 3px rgba(141, 111, 77, 0.13);
}
.fs-c-requiredMark {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  background: var(--color-price, #c8102e);
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.04em;
  vertical-align: middle;
  /* fs既定CSSが text-indent:-999px + ::before"*" で文字を飛ばし、
     さらに width:14px を効かせて中身を0幅にしているので全部戻す */
  text-indent: 0;
  overflow: visible;
  width: auto;
  height: auto;
  line-height: 1.6;
  white-space: nowrap;
}
.fs-c-requiredMark::before { content: none; }
.fs-c-inputField__explanation,
.fs-c-inputTextGroup__item__label {
  font-size: 12px;
  color: var(--color-text-mute);
  margin-top: 4px;
}
.fs-c-inputTextGroup {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* === 生年月日の 年/月/日 ==================================
   .fs-c-dropdown（幅auto・overflow:hidden・矢印を ::after で18px）の中に
   width:100% の select が入る構造で、親の幅が決まらず年が「19」で切れていた。
   ラッパー側に幅を与え、矢印にかぶらないよう右余白も確保する
   ------------------------------------------------------- */
.fs-c-dropdownGroup {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.fs-c-dropdownGroup .fs-c-dropdown { flex: 0 0 auto; }
.fs-c-inputDate__year { width: 104px; }
.fs-c-inputDate__month,
.fs-c-inputDate__date { width: 92px; }
.fs-c-dropdownGroup .fs-c-dropdown__menu {
  width: 100%;
  padding-left: 12px;
  padding-right: 28px;   /* ::after の矢印18px + 余白 */
}

/* === パスワードの表示切替ボタン ============================
   スケルトンではアイコンが入らず、17px幅の空ボタンが
   入力欄の右にくっついているだけに見えていた。
   クラスが display/hide で入れ替わるので、状態ごとに文字を出す
   ------------------------------------------------------- */
.fs-c-inputGroup {
  display: flex;
  align-items: stretch;
}
.fs-c-inputGroup > input { flex: 1 1 auto; min-width: 0; }
.fs-c-button--displayPassword,
.fs-c-button--hidePassword {
  flex: 0 0 auto;
  width: 68px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-line);
  border-left: 0;
  background: var(--color-bg-soft);
  color: var(--color-text-sub);
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.fs-c-button--displayPassword::before { content: "表示"; }
.fs-c-button--hidePassword::before { content: "隠す"; }
.fs-c-button--displayPassword:hover,
.fs-c-button--hidePassword:hover {
  background: #fff;
  color: var(--color-gold-dark);
}

/* 入力欄と同意チェックのあいだを空けて、ひとかたまりに見せる */
.fs-c-memberPolicyAgreeField { margin-top: 28px; }
/* 姓と名（フリガナも）を左右に並べる。中の input が width:100% なので
   基準幅を 0 にしておかないと、それぞれが1行を占めて縦に積まれる */
.fs-c-inputTextGroup__item {
  flex: 1 1 0;
  min-width: 0;
}

/* === メルマガ登録ページの「登録解除」案内 ｜ パーツ RS_メルマガ解除案内 === */
/* === メルマガ登録ページ ================================== */
/* 表の最終行の下線が、同意チェック／ボタンの真上に来て
   余計な区切りに見えるので消す（登録・停止の両ページ） */
body.fs-body-newsletter-subscribe .fs-c-inputTable > tbody > tr:last-child,
body.fs-body-newsletter-unsubscribe .fs-c-inputTable > tbody > tr:last-child {
  border-bottom: 0;
}
/* 同意チェックとその注記を中央に置く（ラベルは inline-flex なので
   親の text-align で寄る） */
body.fs-body-newsletter-subscribe .fs-c-privacyPolicyAgreeField .fs-c-inputField__field {
  text-align: center;
}
/* 入力欄とのあいだを空けて、同意の一かたまりとして見せる */
body.fs-body-newsletter-subscribe .fs-c-privacyPolicyAgreeField {
  margin-top: 32px;
}
/* ボタン下の「登録に必要な認証コードをメールにてお送りします。」は
   同意チェック下の注記と同じ内容なので出さない */
body.fs-body-newsletter-subscribe .fs-c-inputInformation__buttonMessage {
  display: none;
}
.rs-agree-note {
  /* 下は「次へ」ボタンとの間隔 */
  margin: 12px 0 28px;
  font-size: 14px;   /* 「個人情報保護方針に同意する」と同じ */
  line-height: 1.8;
  text-align: center;
  color: var(--color-text-sub);
}

/* このパーツは .fs-l-main の外（.fs-l-page 直下）に出るので、
   .fs-l-main > * に効いているコンテナ幅・左右余白を自分で持つ。
   main 側が下に 72px 空けているぶん、上マージンは持たない */
.rs-newsletter-note {
  /* padding ではなく幅で内側に寄せる。padding だと区切り線だけが
     画面の端まで伸びて、本文の左端と揃わない */
  max-width: min(var(--rs-main-width, 720px), calc(100% - 32px));
  margin: 0 auto;
  padding: 32px 0 0;
  border-top: 1px solid var(--color-line);
}
@media (min-width: 768px) {
  .rs-newsletter-note {
    max-width: min(var(--rs-main-width, 720px), calc(100% - 64px));
  }
}
.rs-newsletter-note__title {
  margin: 0 0 12px;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-text);
}
.rs-newsletter-note__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  text-align: center;
  color: var(--color-text-sub);
}
.rs-newsletter-note__text a {
  color: var(--color-gold-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  /* 本文中のリンクでもタップしやすい高さを確保する */
  display: inline-block;
  padding: 4px 0;
}
.rs-newsletter-note__text a:hover { color: var(--color-text); }
.fs-c-checkbox__label,
.fs-c-radio__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
}

/* === ログイン画面の2カラム =============================== */
@media (min-width: 900px) {
  .fs-c-fsLogin,
  .fs-c-newUsers {
    max-width: 620px;
  }
}
.fs-c-newUsers {
  background: var(--color-bg-soft);
  padding: 28px 24px;
}
.fs-c-newUsers .fs-c-subSection__title {
  margin-top: 0;
  border-bottom-color: var(--color-line);
}
.fs-c-otherServiceLogin,
.fs-c-linkedServiceLogin {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* === リンク ============================================== */
.fs-c-textLinkContainer,
.fs-c-inputInformation__link {
  text-align: center;
  margin: 16px 0;
  font-size: 13.5px;
}
.fs-c-textLinkContainer a,
.fs-c-inputInformation__link a {
  color: var(--color-text-sub);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fs-c-textLinkContainer a:hover,
.fs-c-inputInformation__link a:hover {
  color: var(--color-gold-dark);
}

/* === おすすめ商品カルーセル（画像が原寸で出る対策） ======= */
.fs-c-featuredProduct {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--color-line-soft);
}
.fs-c-featuredProduct__list,
.fs-c-productListCarousel__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 14px;
  align-items: start;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 768px) {
  .fs-c-featuredProduct__list,
  .fs-c-productListCarousel__list {
    grid-template-columns: repeat(4, 1fr);
    gap: 28px 20px;
  }
}
/* 原寸1281pxのまま出るのを抑える */
.fs-c-featuredProduct img,
.fs-c-productListCarousel img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  display: block;
}
.fs-c-featuredProduct .fs-c-productListItem__image,
.fs-c-productListCarousel .fs-c-productListItem__image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-bg-soft);
}
.fs-c-featuredProduct .fs-c-productListItem__productName,
.fs-c-productListCarousel .fs-c-productListItem__productName {
  font-size: 13px;
  line-height: 1.65;
  margin: 10px 0 4px;
}
/* slick未初期化時に矢印だけ残るのを隠す */
.fs-c-featuredProduct .slick-arrow,
.fs-c-productListCarousel .slick-arrow {
  display: none !important;
}
/* slick本体のCSSを読み込んでいないため、カルーセルの内部ラッパーが
   原寸（1190px超）のまま幅を持ってしまう。中間ラッパーを display:contents で
   透過させ、商品カードを直接グリッドの子にしてカルーセルをグリッド表示に倒す。
   itemTrack も外さないと、全商品が1マス目に縦積みになる（カートのおすすめ商品・2026-10-08） */
.fs-c-productListCarousel .fs-c-productListCarousel__list__itemTrack,
.fs-c-productListCarousel .slick-list,
.fs-c-productListCarousel .slick-track,
.fs-c-productListCarousel .slick-slide,
.fs-c-productListCarousel .slick-slide > div,
.fs-c-featuredProduct__list > div {
  display: contents !important;
}
/* slick-track の clearfix（::before / ::after）が、display:contents で
   グリッドの子に繰り上がり、1マス目を空けてしまうので消す */
.fs-c-productListCarousel .slick-track::before,
.fs-c-productListCarousel .slick-track::after {
  display: none !important;
}
.fs-c-productListCarousel .fs-c-productListItem {
  width: auto !important;
  max-width: 100%;
  float: none !important;
}

/* === カート（2026-10-15 作り直し・一樹さん「全て修正」） ======
   システムの fs_style は表に #ccc の枠、スマホ（〜600px）でセルを縦に積んで小さな見出しを付ける。
   それと競らないよう、カートでは body.fs-body-cart を頭に付けて指定を強くしている。
   PC（1024px〜）：左に商品・右に合計とボタン（システムの mainColumn / sideColumn）。右は画面に追従
   スマホ（〜767px）：1商品を「写真＋商品名＋価格」と「数量・小計・削除」の2段にまとめる */
.fs-l-cart__contentsArea {
  margin-bottom: 40px;
}
@media (min-width: 1024px) {
  .fs-l-cart__contentsArea {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 40px;
    align-items: start;
  }
  .fs-l-cart__sideColumn {
    position: sticky;
    top: 130px;          /* 追従するヘッダーの下 */
  }
}

/* --- 商品の表 --- */
.fs-body-cart .fs-c-cartTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.fs-body-cart .fs-c-cartTable__headerCell,
.fs-body-cart .fs-c-cartTable__dataCell {
  border: 0;
  border-bottom: 1px solid var(--color-line-soft);
}
.fs-body-cart .fs-c-cartTable__headerCell {
  padding: 12px 10px;
  background: var(--color-bg-soft);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-text-sub);
  text-align: left;
  white-space: nowrap;
  border-bottom-color: var(--color-line);
}
.fs-body-cart .fs-c-cartTable__dataCell {
  padding: 18px 10px;
  vertical-align: top;
}
.fs-body-cart .fs-c-cartTable__headerCell--subtotal,
.fs-body-cart .fs-c-cartTable__headerCell--point,
.fs-body-cart .fs-c-cartTable__dataCell--subtotal,
.fs-body-cart .fs-c-cartTable__dataCell--point { text-align: right; }
.fs-body-cart .fs-c-cartTable__product { display: flex; gap: 14px; }
.fs-body-cart .fs-c-cartTable__product > .fs-c-cartTable__productImage { padding: 0; flex: none; }
.fs-c-cartTable__productImage img {
  width: 88px;
  height: 88px;
  object-fit: cover;
}
.fs-c-cartTable__productName {
  font-size: 14px;
  line-height: 1.6;
}
.fs-c-cartTable__productName a { color: var(--color-text); }
.fs-c-cartTable__productName a:hover { color: var(--color-gold-dark); }
.fs-body-cart .fs-c-listedProductName__variation {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--color-text-mute);
}
.fs-c-cartTable__unitPrice { margin-top: 4px; font-size: 13px; }
.fs-c-cartTable__price,
.fs-c-orderTotalTable__price {
  font-family: var(--font-sans);
  color: var(--color-price, #c8102e);
  font-weight: 600;
  white-space: nowrap;
}
/* 数量 */
.fs-body-cart .fs-c-quantity__number,
.fs-body-cart .fs-c-quantity__select {
  width: 64px;
  height: 38px;
  padding: 0 8px;
  border: 1px solid var(--color-line);
  border-radius: 4px;
  background: #fff;
  font-size: 14px;
  text-align: center;
}
/* 削除・あとで買う：小さな文字リンク（縦に並べ、折り返さない） */
.fs-body-cart .fs-c-cartTable__actionButton {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  white-space: nowrap;
}
.fs-body-cart .fs-c-button--cancel--cart,
.fs-body-cart .fs-c-button--buyItLater {
  display: inline;
  width: auto;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--color-text-sub);
  font-size: 12.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.fs-body-cart .fs-c-button--cancel--cart:hover { color: var(--color-price); }
.fs-body-cart .fs-c-button--buyItLater:hover { color: var(--color-gold-dark); }

/* スマホ：1商品を2段に */
@media (max-width: 767px) {
  .fs-body-cart .fs-c-cartTable > thead { display: none; }
  .fs-body-cart .fs-c-cartTable,
  .fs-body-cart .fs-c-cartTable > tbody { display: block; }
  .fs-body-cart .fs-c-cartTable__row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "product product product"
      "qty     subtotal action";
    gap: 14px 12px;
    align-items: center;
    margin: 0;
    padding: 18px 0;
    border-bottom: 1px solid var(--color-line-soft);
  }
  .fs-body-cart .fs-c-cartTable__dataCell {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
    position: static;
    text-align: left;
  }
  .fs-body-cart .fs-c-cartTable__dataCell--product { grid-area: product; }
  .fs-body-cart .fs-c-cartTable__dataCell--quantity { grid-area: qty; display: flex; align-items: center; gap: 8px; }
  .fs-body-cart .fs-c-cartTable__dataCell--subtotal { grid-area: subtotal; text-align: right; }
  .fs-body-cart .fs-c-cartTable__dataCell--action { grid-area: action; }
  /* 獲得ポイントは合計の表に出るので、スマホの商品の行では省く */
  .fs-body-cart .fs-c-cartTable__dataCell--point { display: none; }
  .fs-body-cart .fs-c-cartTable__dataCell--quantity::before,
  .fs-body-cart .fs-c-cartTable__dataCell--subtotal::before {
    content: attr(data-cell-label);
    position: static;
    margin-right: 6px;
    min-width: 0;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--color-text-mute);
  }
  .fs-c-cartTable__productImage img { width: 76px; height: 76px; }
  .fs-body-cart .fs-c-cartTable__actionButton { align-items: flex-end; }
}

/* --- 送料無料などのお知らせ（商品の表の下） --- */
.fs-c-cartDiscountInfo {
  margin: 16px 0 0;
  padding: 14px 16px;
  background: var(--color-bg-soft);
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-text-sub);
}
.fs-c-cartDiscountInfo__info { font-size: 0; }   /* span のあいだの空白（「送料無料 です」）を消す */
/* 「送料無料です。」は大きく、価格と同じ赤で（一樹さん 2026-10-15） */
.fs-c-cartDiscountInfo__info > * { font-size: 18px; font-weight: 500; color: var(--color-price); }
.fs-c-cartDiscountInfo__info__current { font-weight: 700; color: var(--color-price) !important; }
.fs-c-cartDiscountInfo__note {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  font-size: 12px;
  color: var(--color-text-mute);
}
.fs-c-cartDiscountInfo__note b { font-weight: 500; color: var(--color-text-sub); }

/* --- 右の列：合計とボタン --- */
.fs-l-cart__sideColumn {
  margin-top: 24px;
  padding: 22px 20px 24px;
  background: var(--color-bg-soft);
}
@media (min-width: 1024px) {
  .fs-l-cart__sideColumn { margin-top: 0; padding: 26px 24px 28px; }
}
/* カートが空のときは右の列を出さず、1列に戻す */
.fs-l-cart__sideColumn[data-empty="true"] { display: none; }
.fs-l-cart__contentsArea:has(.fs-l-cart__sideColumn[data-empty="true"]) { display: block; }
.fs-body-cart .fs-c-orderTotalTable {
  display: table;      /* スマホ幅の「.fs-l-main table { display:block }」（横スクロール用）を打ち消す */
  width: 100%;
  max-width: none;
  margin: 0;
  border-collapse: collapse;
  font-size: 14px;
}
.fs-body-cart .fs-c-orderTotalTable > tbody > tr > th,
.fs-body-cart .fs-c-orderTotalTable > tbody > tr > td {
  padding: 11px 2px;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  text-align: left;
  font-weight: 400;
  color: var(--color-text-sub);
}
.fs-body-cart .fs-c-orderTotalTable > tbody > tr > td { text-align: right; color: var(--color-text); }
.fs-body-cart .fs-c-orderTotalTable__mainRow > th { font-weight: 600; color: var(--color-text); }
.fs-body-cart .fs-c-orderTotalTable__mainRow .fs-c-price {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-price);
}

/* 購入ボタン：会員でない方の「ご注文手続きへ進む」を主役（黒）、「ログインして進む」を白枠に。
   並びも「ご注文手続き」を上にする。幅はすべて列いっぱいでそろえる */
.fs-body-cart .fs-c-purchaseHere {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.fs-body-cart .fs-c-purchaseHere__message {
  order: 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--color-text-sub);
}
.fs-body-cart .fs-c-purchaseHere__message p { margin: 0; }
.fs-body-cart .fs-c-buttonContainer--purchaseHere,
.fs-body-cart .fs-c-buttonContainer--unregisteredUserPurchase { order: 1; }
.fs-body-cart .fs-c-buttonContainer--loginAndPurchase,
.fs-body-cart .fs-c-buttonContainer--registerAndPurchase { order: 2; }
.fs-body-cart .fs-c-cartPayment__button {
  display: block;
  margin: 0;
  width: 100%;
}
.fs-body-cart .fs-c-cartPayment__button > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 54px;
  padding: 12px 16px;
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.fs-body-cart .fs-c-button--unregisteredUserPurchase,
.fs-body-cart .fs-c-button--purchaseHere {
  background: var(--color-ink);
  color: #fff;
  border: 1px solid var(--color-ink);
}
.fs-body-cart .fs-c-button--unregisteredUserPurchase:hover,
.fs-body-cart .fs-c-button--purchaseHere:hover { opacity: 0.85; color: #fff; }
.fs-body-cart .fs-c-button--loginAndPurchase,
.fs-body-cart .fs-c-button--registerAndPurchase {
  background: #fff;
  color: var(--color-text);
  border: 1px solid var(--color-ink);
}
.fs-body-cart .fs-c-button--loginAndPurchase:hover,
.fs-body-cart .fs-c-button--registerAndPurchase:hover { background: var(--color-bg); color: var(--color-gold-dark); border-color: var(--color-gold); }

/* Amazon Pay：説明は小さく、ボタンと一緒に列の幅で */
.fs-body-cart .fs-c-payWithAmazon {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--color-line);
}
.fs-body-cart .fs-c-payWithAmazon__message {
  margin-bottom: 10px;
  text-align: center;
  font-size: 12px;
  line-height: 1.7;
  color: var(--color-text-sub);
}
.fs-body-cart .fs-c-payWithAmazon__message p { margin: 0; }
.fs-body-cart #AmazonPayButton {
  width: 100% !important;
  max-width: 100%;
  margin: 0 auto;
}
.fs-body-cart .fs-c-applePay:empty,
.fs-body-cart .fs-c-applePay__button:empty { display: none; }

/* ショッピングを続ける */
.fs-body-cart .fs-c-continueShopping {
  display: flex;
  justify-content: center;
  margin: 8px 0 48px;
}
.fs-body-cart .fs-c-continueShopping .fs-c-button--continueShopping { width: 100%; max-width: 340px; }

/* 安心の一言（RS_カート_安心・合計の下に入る） */
.rs-cart-assure {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.rs-cart-assure__item {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  align-items: start;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-text-sub);
}
.rs-cart-assure__item svg {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  fill: none;
  stroke: var(--color-gold-dark);
  stroke-width: 1.6;
}
.rs-cart-assure__item strong {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text);
}
/* カートの下（スクリプトで移す前・動かない環境）に出たときも見られるように */
.fs-l-main > .rs-cart-assure { max-width: 520px; margin: 0 auto 32px; padding: 16px 18px; background: var(--color-bg-soft); }

/* 合計の表の共通指定（購入手続きなど、カート以外のページ用。カートでは上の .fs-body-cart の指定が勝つ） */
.fs-c-orderTotalTable {
  width: 100%;
  max-width: 460px;
  margin-left: auto;
  border-collapse: collapse;
  font-size: 14px;
}
.fs-c-orderTotalTable th,
.fs-c-orderTotalTable td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--color-line-soft);
  text-align: left;
}
.fs-c-orderTotalTable td { text-align: right; }
.fs-c-orderTotalTable .fs-c-price { font-size: 17px; }


/* === 購入手続き /p/checkout（2026-10-15 一樹さん「このページも改善して」） ======
   システムの fs_style のままだと、中身が画面いっぱいに広がり、見出し・表・ボタンが素の見た目だった。
   カートと見た目をそろえる。PC（1024px〜）：左に入力・確認（mainColumn）、右に合計と「注文を確定する」（sideColumn・追従）
   ※ 注文系のページなので、見た目（CSS）だけを変えている。項目・文言・動きには触らない */
/* 左右の余白は、システムページ共通の「.fs-l-main > * に 16px／32px」をそのまま使う。
   2列のときは各列がその余白を持つので、右の列の幅は 340px＋左右32px＝404px、列のあいだは余白どうしで 64px */
.fs-body-checkout .fs-l-main {
  max-width: 1280px;
  margin: 0 auto;
  box-sizing: border-box;
}
@media (min-width: 1024px) {
  .fs-body-checkout .fs-l-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 404px;
    column-gap: 0;
    align-items: start;
  }
  /* 共通の margin: auto が付いていると、グリッドの中で箱が中身の幅まで縮むので、幅いっぱいを指定する */
  .fs-body-checkout .fs-l-main > * { grid-column: 1 / -1; width: 100%; box-sizing: border-box; }
  .fs-body-checkout .fs-l-checkout__mainColumn { grid-column: 1; }
  .fs-body-checkout .fs-l-checkout__sideColumn {
    grid-column: 2;
    position: sticky;
    top: 130px;          /* 追従するヘッダーの下 */
  }
}

/* --- 各ブロック（お客様の情報・お届け先・お支払い方法…） --- */
.fs-body-checkout .fs-l-checkout__mainColumn .fs-c-checkout-preview {
  margin: 0 0 28px;
  padding: 0 0 28px;
  border-bottom: 1px solid var(--color-line-soft);
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text);
}
.fs-body-checkout .fs-c-checkout-preview__title {
  margin: 0 0 14px;
  padding: 0 0 0 12px;
  border-left: 3px solid var(--color-gold);
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--color-text);
}
.fs-body-checkout [class*="__message"] p,
.fs-body-checkout .fs-c-checkout-paymentInfo__message,
.fs-body-checkout .fs-c-checkout-couponInfo__message,
.fs-body-checkout .fs-c-checkout-communicationInfo__message {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--color-text-sub);
}
.fs-body-checkout .fs-c-checkout-customerInfo,
.fs-body-checkout .fs-c-checkout-destination__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fs-body-checkout .fs-c-checkout-confirmationContent:empty { display: none; }

/* 「変更」などの小さなボタン：左寄せ・控えめに */
.fs-body-checkout .fs-l-checkout__mainColumn .fs-c-buttonContainer {
  justify-content: flex-start;
  margin: 12px 0 0;
  gap: 8px;
}
.fs-body-checkout .fs-c-button--change--small,
.fs-body-checkout .fs-c-button--chooseDestination,
.fs-body-checkout .fs-c-button--inputCreditCardData,
.fs-body-checkout .fs-c-button--useCoupon {
  min-width: 0;
  width: auto;
  padding: 9px 20px;
  font-size: 13px;
  letter-spacing: 0.06em;
}
/* お届け先：宛先の右（スマホは下）に「変更」「お届け先リストから選ぶ」 */
.fs-body-checkout .fs-c-checkout-destination__destination {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px 20px;
}
.fs-body-checkout .fs-c-checkout-destination__control {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fs-body-checkout .fs-c-checkout-destination__control .fs-c-buttonContainer,
.fs-body-checkout .fs-c-checkout-destination__button { margin: 0; }

/* お支払い方法：1つずつ枠の行に。選んだものは金色の枠 */
.fs-body-checkout .fs-c-checkout-paymentMethodList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.fs-body-checkout .fs-c-checkout-paymentMethod {
  padding: 12px 16px;
  border: 1px solid var(--color-line);
  background: #fff;
}
.fs-body-checkout .fs-c-checkout-paymentMethod:has(.fs-c-radio__radio:checked) {
  border-color: var(--color-gold);
  background: var(--color-bg-soft);
}
.fs-body-checkout .fs-c-checkout-paymentMethod.is-disabled { background: var(--color-bg-soft); }
.fs-body-checkout .fs-c-checkout-paymentMethod.is-disabled .fs-c-radio__radioLabelText { color: var(--color-text-mute); }
.fs-body-checkout .fs-c-radio__radioLabelText { font-size: 14px; color: var(--color-text); }
.fs-body-checkout .fs-c-checkout-paymentMethod__disabledMessage p {
  margin: 6px 0 0 28px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-text-mute);
}
.fs-body-checkout .fs-c-checkout-paymentMethod__body:not(:empty) {
  margin-top: 10px;
  font-size: 13px;
  color: var(--color-text-sub);
}

/* クーポン：入力欄とボタンの高さをそろえる */
.fs-body-checkout .fs-c-checkout-couponCodeInput {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.fs-body-checkout .fs-c-checkout-couponCodeInput input[type="text"],
.fs-body-checkout .fs-c-checkout-couponCodeInput input:not([type]) {
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--color-line);
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}
.fs-body-checkout .fs-c-button--useCoupon { height: 42px; }
/* スマホ：見出しは1行目、入力欄とボタンを2行目に横並び */
@media (max-width: 767px) {
  .fs-body-checkout .fs-c-checkout-couponCodeInput__title { flex-basis: 100%; font-size: 13px; }
  .fs-body-checkout .fs-c-checkout-couponCodeInput__input { flex: 1; min-width: 0; }
  .fs-body-checkout .fs-c-checkout-couponCodeInput__input input { width: 100%; }
}

/* 配送方法 */
.fs-body-checkout .fs-c-checkout-delivery__method__title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
}
.fs-body-checkout .fs-c-checkout-delivery__method__message { font-size: 13px; color: var(--color-text-sub); margin-bottom: 8px; }
.fs-body-checkout .fs-c-pairList {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 16px;
  margin: 0;
  font-size: 13.5px;
}
.fs-body-checkout .fs-c-pairList > dt,
.fs-body-checkout .fs-c-pairList > dd,
.fs-body-checkout .fs-c-pairList__item { margin: 0; }

/* ご注文内容（カートと同じ表） */
.fs-body-checkout .fs-c-cartTable { width: 100%; border-collapse: collapse; font-size: 14px; }
.fs-body-checkout .fs-c-cartTable__headerCell,
.fs-body-checkout .fs-c-cartTable__dataCell {
  border: 0;
  border-bottom: 1px solid var(--color-line-soft);
}
.fs-body-checkout .fs-c-cartTable__headerCell {
  padding: 10px;
  background: var(--color-bg-soft);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-text-sub);
  text-align: left;
  white-space: nowrap;
  border-bottom-color: var(--color-line);
}
.fs-body-checkout .fs-c-cartTable__dataCell { padding: 14px 10px; vertical-align: top; }
.fs-body-checkout .fs-c-cartTable__headerCell--quantity,
.fs-body-checkout .fs-c-cartTable__headerCell--subtotal,
.fs-body-checkout .fs-c-cartTable__headerCell--point,
.fs-body-checkout .fs-c-cartTable__dataCell--quantity,
.fs-body-checkout .fs-c-cartTable__dataCell--subtotal,
.fs-body-checkout .fs-c-cartTable__dataCell--point { text-align: right; white-space: nowrap; }
.fs-body-checkout .fs-c-cartTable__product { display: flex; gap: 12px; }
.fs-body-checkout .fs-c-cartTable__product > .fs-c-cartTable__productImage { padding: 0; flex: none; }
.fs-body-checkout .fs-c-cartTable__productImage img { width: 64px; height: 64px; object-fit: cover; }
.fs-body-checkout .fs-c-listedProductName__variation { display: block; font-size: 12px; color: var(--color-text-mute); }
@media (max-width: 767px) {
  .fs-body-checkout .fs-c-cartTable > thead { display: none; }
  .fs-body-checkout .fs-c-cartTable,
  .fs-body-checkout .fs-c-cartTable > tbody { display: block; }
  .fs-body-checkout .fs-c-cartTable__row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "product product" "qty subtotal";
    gap: 8px 12px;
    margin: 0;
    padding: 14px 0;
    border-bottom: 1px solid var(--color-line-soft);
  }
  .fs-body-checkout .fs-c-cartTable__dataCell { display: block; width: auto; padding: 0; border: 0; position: static; }
  .fs-body-checkout .fs-c-cartTable__dataCell--product { grid-area: product; }
  .fs-body-checkout .fs-c-cartTable__dataCell--quantity { grid-area: qty; text-align: left; }
  .fs-body-checkout .fs-c-cartTable__dataCell--subtotal { grid-area: subtotal; }
  .fs-body-checkout .fs-c-cartTable__dataCell--point { display: none; }
  .fs-body-checkout .fs-c-cartTable__dataCell--quantity::before,
  .fs-body-checkout .fs-c-cartTable__dataCell--subtotal::before {
    content: attr(data-cell-label);
    position: static;
    margin-right: 6px;
    min-width: 0;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--color-text-mute);
  }
}
.fs-body-checkout .fs-c-returnedSpecialContract {
  margin: 4px 0 24px;
  text-align: center;
  font-size: 12.5px;
}
.fs-body-checkout .fs-c-returnedSpecialContract a { color: var(--color-text-sub); text-decoration: underline; text-underline-offset: 3px; }

/* --- 右の列：お支払い金額と「注文を確定する」 --- */
.fs-body-checkout .fs-l-checkout__sideColumn .fs-c-checkout-preview {
  margin: 8px 0 0;
  padding: 22px 20px 24px;
  background: var(--color-bg-soft);
  border: 0;
}
@media (min-width: 1024px) {
  .fs-body-checkout .fs-l-checkout__sideColumn .fs-c-checkout-preview { margin: 0; padding: 26px 24px 28px; }
}
.fs-body-checkout .fs-c-orderTotalTable {
  display: table;      /* スマホ幅の「.fs-l-main table { display:block }」（横スクロール用）を打ち消す */
  width: 100%;
  max-width: none;
  margin: 0;
  border-collapse: collapse;
  font-size: 14px;
}
.fs-body-checkout .fs-c-orderTotalTable > tbody > tr > th,
.fs-body-checkout .fs-c-orderTotalTable > tbody > tr > td {
  padding: 10px 2px;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  text-align: left;
  font-weight: 400;
  color: var(--color-text-sub);
}
.fs-body-checkout .fs-c-orderTotalTable > tbody > tr > td { text-align: right; color: var(--color-text); }
.fs-body-checkout .fs-c-orderTotalTable .fs-c-orderTotalTable__grandTotal > th { font-weight: 600; color: var(--color-text); }
.fs-body-checkout .fs-c-orderTotalTable .fs-c-orderTotalTable__grandTotal > td,
.fs-body-checkout .fs-c-orderTotalTable .fs-c-orderTotalTable__grandTotal .fs-c-price {
  font-size: 22px;
  font-weight: 600;
  color: var(--color-price);
}
.fs-body-checkout .fs-c-confirmOrder { margin-top: 20px; }
.fs-body-checkout .fs-c-confirmOrder .fs-c-buttonContainer { display: block; margin: 0; }
.fs-body-checkout .fs-c-button--confirmOrder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 58px;
  padding: 14px 16px;
  box-sizing: border-box;
  background: var(--color-ink);
  color: #fff;
  border: 1px solid var(--color-ink);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
}
.fs-body-checkout .fs-c-button--confirmOrder:hover { opacity: 0.85; }

/* --- 購入手続きの小窓（配送方法・通信欄・お客様情報の変更など）（2026-10-15） --- */
/* 小窓の中の入力表は1列（見出しのない通信欄が、2列指定の左210pxに押し込まれていた） */
.fs-body-checkout .fs-c-modal__contents .fs-c-inputTable > tbody > tr {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 0 14px;
  border-bottom: 0;
}
.fs-body-checkout .fs-c-modal__contents .fs-c-inputTable__dataCell { width: 100%; }
.fs-body-checkout .fs-c-modal__contents .fs-c-inputInformation__field { margin: 0; width: 100%; max-width: none; }   /* システムの左50pxの字下げと幅の指定を外す */
.fs-body-checkout .fs-c-modal__contents textarea {
  width: 100%;
  min-height: 140px;
  padding: 11px 13px;
  border: 1px solid var(--color-line);
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.7;
  box-sizing: border-box;
  resize: vertical;
}
.fs-body-checkout .fs-c-modal__contents textarea:focus { border-color: var(--color-gold); outline: none; box-shadow: 0 0 0 3px rgba(141, 111, 77, 0.13); }
.fs-body-checkout .fs-c-inputInformation__message p,
.fs-body-checkout .fs-c-checkout-deliveryMethod__body > p {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-text-sub);
}
/* 配送方法 */
.fs-body-checkout .fs-c-checkout-deliveryMethodList { list-style: none; margin: 0; padding: 0; }
.fs-body-checkout .fs-c-checkout-deliveryMethod__title { margin-bottom: 8px; }
.fs-body-checkout .fs-c-checkout-deliveryMethod__body { font-size: 13px; line-height: 1.8; color: var(--color-text-sub); }
.fs-body-checkout .fs-c-checkout-deliveryMethod__option {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-line-soft);
}
.fs-body-checkout .fs-c-checkout-deliveryMethod__option__title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}
.fs-body-checkout .fs-c-checkout-deliveryMethod__option__setting { margin: 12px 0 0; }
.fs-body-checkout .fs-c-checkout-deliveryMethod__option__setting > dt {
  margin: 14px 0 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
}
.fs-body-checkout .fs-c-checkout-deliveryMethod__option__setting > dt:first-child { margin-top: 0; }
.fs-body-checkout .fs-c-checkout-deliveryMethod__option__setting > dd { margin: 0; }
.fs-body-checkout .fs-c-checkout-deliveryMethod__option__setting > dd > p,
.fs-body-checkout .fs-c-checkout-deliveryMethod__option__setting__message {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--color-text-mute);
}
/* 選択欄：右端の灰色の箱をなくし、白地に矢印だけ */
.fs-body-checkout .fs-c-modal__contents .fs-c-dropdown { border-radius: 4px; }
.fs-body-checkout .fs-c-modal__contents .fs-c-dropdown::after { background: transparent; border-left: 0; }
.fs-body-checkout .fs-c-modal__contents .fs-c-dropdown__menu {
  height: 46px;
  padding: 0 40px 0 13px;
  border: 1px solid var(--color-line);
  border-radius: 4px;
  font-size: 15px;
}
/* 「設定」「キャンセル」：同じ幅で横並び */
.fs-body-checkout .fs-c-modal__contents .fs-c-buttonContainer--pair {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 22px 0 0;
}
.fs-body-checkout .fs-c-modal__contents .fs-c-buttonContainer--pair > button {
  flex: 1 1 0;
  max-width: 220px;
  min-width: 0;
  min-height: 50px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.fs-body-checkout .fs-c-button--settings { background: var(--color-ink); color: #fff; border: 1px solid var(--color-ink); }

/* ラジオの印：システムの青をサイトの金茶に（サイト全体） */
body .fs-c-radio__radio:checked:enabled + label > .fs-c-radio__radioMark { border-color: var(--color-gold-dark); }
body .fs-c-radio__radio:checked:enabled + label > .fs-c-radio__radioMark::before { background: var(--color-gold-dark); }

/* === 規約・ガイド系（/p/about/*） ========================= */
.fs-c-documentArticle,
.fs-c-documentColumn {
  max-width: 860px;
  margin: 0 auto;
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--color-text-sub);
}
.fs-c-documentArticle__heading {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--color-text);
  margin: 36px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-line-soft);
}
.fs-c-documentArticle__content table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 13.5px;
}
.fs-c-documentArticle__content th,
.fs-c-documentArticle__content td {
  padding: 11px 12px;
  border: 1px solid var(--color-line-soft);
  text-align: left;
  vertical-align: top;
}
.fs-c-documentArticle__content th {
  background: var(--color-bg-soft);
  font-weight: 500;
  white-space: nowrap;
}

/* === マイページ ========================================== */
.fs-c-accountService {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 768px) {
  .fs-c-accountService {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}
.fs-c-accountService__page a,
.fs-c-accountService__page__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 74px;
  padding: 14px;
  border: 1px solid var(--color-line);
  background: #fff;
  color: var(--color-text);
  text-decoration: none;
  font-size: 13.5px;
  text-align: center;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.fs-c-accountService__page a:hover,
.fs-c-accountService__page__link:hover {
  background: var(--color-bg-soft);
  border-color: var(--color-gold);
  color: var(--color-gold-dark);
}

/* === 横幅の暴走を止める最終防衛線 ========================= */
.fs-l-main img,
.fs-l-main table {
  max-width: 100%;
}
.fs-l-main table {
  display: block;
  overflow-x: auto;
}
@media (min-width: 768px) {
  .fs-l-main table { display: table; }
}



.fs-p-announcement {
  margin: 0 auto 32px;
  padding: 24px 0 0;
}
.fs-p-announcement__title {
  margin: 0 0 18px;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--color-text);
}
@media (min-width: 768px) {
  .fs-p-announcement__title { font-size: 21px; }
}
/* パーツ内の空の <br> でリズムが崩れる */
.fs-p-announcement__body > br { display: none; }
.fs-p-announcement__body .fs-c-orderedList {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.fs-p-announcement__body .fs-c-orderedList > li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-text);
}
/* 順序に意味は無いので数字ではなく印にする */
.fs-p-announcement__body .fs-c-orderedList > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-gold);
}

/* === 会員ステージの表 === */
.fs-body-register .fs-c-specTableContainer{
  margin: 0 auto 36px;
  overflow-x: auto;   /* 万一入りきらないときは表だけ横に流す */
}
.fs-body-register .fs-c-specTable{
  width: 100%;
  border-collapse: collapse;
  /* auto だと見出しの「購入ポイント付与率」が幅を取り、条件の列が
     125pxまで痩せる。列比を固定して条件に幅を回す */
  table-layout: fixed;
  font-size: 13px;
}
.fs-body-register .fs-c-specTable thead .fs-c-specTable__headerCell:nth-child(1){ width: 24%; }
.fs-body-register .fs-c-specTable thead .fs-c-specTable__headerCell:nth-child(2){ width: 50%; }
.fs-body-register .fs-c-specTable thead .fs-c-specTable__headerCell:nth-child(3){ width: 26%; }
@media (min-width: 768px) {
.fs-body-register .fs-c-specTable{ font-size: 14px; }
}
.fs-body-register .fs-c-specTable thead .fs-c-specTable__headerCell{
  background: var(--color-bg-soft);
  color: var(--color-text);
  font-weight: 600;
  text-align: center;
  /* 規約系の表用に書いた既存の .fs-c-specTable__headerCell が
     white-space:nowrap を持っていて、これが残っていると列比の指定が
     効かない（見出しの文字幅が優先されて 99/125/138 になる） */
  white-space: normal;
}
.fs-body-register .fs-c-specTable__headerCell,
.fs-body-register .fs-c-specTable__dataCell{
  padding: 11px 10px;
  border-bottom: 1px solid var(--color-line-soft);
  line-height: 1.6;
  vertical-align: middle;
}
/* 行見出し（VIP・ゴールド…）は左、条件は左、還元率は右 */
.fs-body-register .fs-c-specTable tbody .fs-c-specTable__headerCell{
  text-align: left;
  font-weight: 600;
  color: var(--color-gold-dark);
  white-space: normal;
}
.fs-body-register .fs-c-specTable tbody .fs-c-specTable__dataCell:last-child{
  text-align: right;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   11 規約系6ページ（/p/about/*）と 404
   --------------------------------------------------------------------------
   置き場所 : アイテム
   書くもの : 特商法・送料/支払い・個人情報・返品特約・会員規約・ポイント
   読み込み順: 11 番目（番号が大きいほど後＝強い）
   ※ ファイルを増やす／順番を変えるときは scripts/split_css.py と
     assets/css/README.md も一緒に直すこと
   ========================================================================== */

/* 読み物なので行長を絞る。fs-system-pages.css の
   .fs-l-main > * が --rs-main-width を見るので、変数だけ差し替える */
body[class*="fs-body-about-"] { --rs-main-width: 900px; }
body.fs-body-notfound { --rs-main-width: 720px; }

/* 見出しに包まれていない地の文（規約本文は素のテキストノードが多い）が
   ブラウザ既定の16pxで浮かないように、ページ全体の基準を下げておく */
body[class*="fs-body-about-"] .fs-l-main,
body.fs-body-notfound .fs-l-main {
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text-sub);
}
body[class*="fs-body-about-"] .fs-l-main p { margin: 0 0 12px; }
body[class*="fs-body-about-"] .fs-l-main p:last-child { margin-bottom: 0; }

/* === 記事ブロック（h2） ================================== */
.fs-c-documentArticle { margin-bottom: 48px; }
.fs-c-documentArticle:last-child { margin-bottom: 0; }

.fs-c-documentArticle__heading {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-text);
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-line);
}
@media (min-width: 768px) {
  .fs-c-documentArticle__heading { font-size: 22px; }
}
.fs-c-documentArticle__content {
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text-sub);
}

/* === セクション（h3） ==================================== */
.fs-c-documentColumn { margin: 0 0 28px; }
.fs-c-documentColumn:last-child { margin-bottom: 0; }
/* 冒頭の表（制定日・改定日・会社名など）のすぐ後の見出しがくっつかないように（プライバシーポリシー「はじめに」・2026-10-13） */
.fs-c-explainList + .fs-c-documentColumn { margin-top: 32px; }

/* 共通の見出し指定（中央寄せ明朝）を規約系では打ち消す */
.fs-c-documentArticle .fs-c-documentColumn__heading,
.fs-p-pageNotFound .fs-c-documentColumn__heading {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-text);
  text-align: left;
  margin: 0 0 10px;
  padding: 0 0 0 10px;
  border: 0;
  border-left: 3px solid var(--color-gold);
}
.fs-c-documentColumn__content {
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text-sub);
}
.fs-c-documentColumn__content > p { margin: 0 0 12px; }
.fs-c-documentColumn__content > p:last-child { margin-bottom: 0; }
.fs-c-documentColumn__emphasis {
  color: var(--color-price);
  font-weight: 600;
}

.fs-c-documentSubColumn { margin: 0 0 18px; }
.fs-c-documentSubColumn__heading {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 6px;
}
.fs-c-documentSubColumn__content {
  font-size: 13.5px;
  line-height: 1.9;
}

/* === 定義リスト（店舗情報・送料表） ====================== */
.fs-c-explainList,
.fs-c-postage__list {
  display: grid;
  grid-template-columns: 1fr;
  margin: 0;
  font-size: 14px;
  border-top: 1px solid var(--color-line-soft);
}
.fs-c-explainList > dt,
.fs-c-postage__list > dt {
  margin: 0;
  padding: 12px 12px 2px 0;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.7;
}
.fs-c-explainList > dd,
.fs-c-postage__list > dd {
  margin: 0;
  padding: 0 0 12px;
  color: var(--color-text-sub);
  line-height: 1.7;
  border-bottom: 1px solid var(--color-line-soft);
}
@media (min-width: 600px) {
  .fs-c-explainList,
  .fs-c-postage__list { grid-template-columns: 200px 1fr; }
  /* 都道府県別送料は47行あるので2列ぶん並べる */
  .fs-c-postage__list--prefecture { grid-template-columns: repeat(2, 130px 1fr); }
  .fs-c-explainList > dt,
  .fs-c-postage__list > dt {
    padding: 12px 16px 12px 0;
    border-bottom: 1px solid var(--color-line-soft);
  }
  .fs-c-explainList > dd,
  .fs-c-postage__list > dd { padding: 12px 0; }
  .fs-c-postage__list--prefecture > dd { padding-right: 24px; }
}

.fs-c-postage > p {
  margin: 0 0 12px;
  font-size: 13.5px;
}
/* 送料・規約内の金額は商品価格と違ってワインレッドにしない */
body[class*="fs-body-about-"] .fs-c-postage .fs-c-price,
body[class*="fs-body-about-"] .fs-c-explainList .fs-c-price,
body[class*="fs-body-about-"] .fs-c-specTable .fs-c-price,
body[class*="fs-body-about-"] .fs-c-documentColumn__content .fs-c-price{
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  font-family: var(--font-sans);
}

/* === 表（消費税・返品条件など） ========================== */
body[class*="fs-body-about-"] .fs-c-specTableContainer{ margin: 0 0 16px; }
body[class*="fs-body-about-"] .fs-c-specTable{
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  line-height: 1.7;
}
body[class*="fs-body-about-"] .fs-c-specTable__caption{
  text-align: left;
  font-weight: 600;
  color: var(--color-text);
  padding: 0 0 8px;
}
body[class*="fs-body-about-"] .fs-c-specTable__headerCell,
body[class*="fs-body-about-"] .fs-c-specTable__dataCell{
  border: 1px solid var(--color-line-soft);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
body[class*="fs-body-about-"] .fs-c-specTable__headerCell{
  background: var(--color-bg-soft);
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}
body[class*="fs-body-about-"] .fs-c-specTable__dataCell{ color: var(--color-text-sub); }

/* === 注記・箇条書き ====================================== */
.fs-c-note,
.fs-c-list,
.fs-c-orderedList {
  margin: 8px 0 12px;
  padding-left: 1.4em;
  font-size: 13px;
  line-height: 1.85;
  color: var(--color-text-mute);
}
.fs-c-list,
.fs-c-orderedList { color: var(--color-text-sub); font-size: 13.5px; }
.fs-c-note { list-style: none; padding-left: 0; }
.fs-c-note__item { padding-left: 1.2em; text-indent: -1.2em; }
.fs-c-note__item::before { content: "※"; margin-right: 0.2em; }
.fs-c-list { list-style: disc; }
.fs-c-orderedList { list-style: decimal; }
.fs-c-list > li,
.fs-c-orderedList > li { margin: 0 0 4px; }
/* 規約本文の素の ul / ol もリセットで潰れているので戻す。
   クラス付き（fs-c-creditCardIcons 等）は各自のスタイルを優先させるため除外 */
.fs-c-documentColumn__content ul:not([class]),
.fs-c-documentSubColumn__content ul:not([class]),
.fs-c-documentArticle__content > ul:not([class]) { list-style: disc; padding-left: 1.4em; margin: 8px 0 12px; }
.fs-c-documentColumn__content ol:not([class]),
.fs-c-documentSubColumn__content ol:not([class]),
.fs-c-documentArticle__content > ol:not([class]) { list-style: decimal; padding-left: 1.6em; margin: 8px 0 12px; }
/* 入れ子リストも同様 */
.fs-c-documentColumn__content li > ul:not([class]) { list-style: circle; }
.fs-c-documentColumn__content li > ol:not([class]) { list-style: decimal; }

/* 本文中のリンク（プライバシーポリシーのGoogleの案内・メールアドレスなど）。本文と同じ色だとリンクと分からない（2026-10-13） */
.fs-c-documentColumn__content a:not([class]) { color: var(--color-gold-dark); text-decoration: underline; text-underline-offset: 2px; }

/* 消費税の表：軽減税率（8%）は当店の商品に該当しないので行を隠す（一樹さん 2026-10-15）。
   システムが出す表で文言は編集できない。行の順は 標準税率 → 軽減税率 */
.fs-c-specTable--salesTax tr:nth-child(2) { display: none; }

/* === 住所表記 ============================================ */
.fs-p-address { font-style: normal; line-height: 1.9; }
.fs-p-address__companyName { font-weight: 600; color: var(--color-text); }
.fs-p-address__zipCode,
.fs-u-zipCode { display: inline-block; margin-right: 4px; }

/* === クレジットカードアイコン ============================ */
.fs-c-creditCardIcons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.fs-c-creditCardIcons__icon { margin: 0; }
.fs-c-creditCardIcons__image { height: 26px; width: auto; display: block; }

/* === ラベル風の小文字 ====================================
   ⚠ .fs-c-string--label は商品詳細の在庫切れ表示など他でも使われるので
   規約系ページに限定する（無指定だとベージュのチップが商品ページに漏れる） */
body[class*="fs-body-about-"] .fs-c-string--label {
  display: inline-block;
  padding: 1px 6px;
  background: var(--color-bg-soft);
  font-size: 12px;
  color: var(--color-text-sub);
}

/* === 404 ================================================= */
.fs-p-pageNotFound { text-align: center; padding: 24px 0 8px; }
.fs-p-pageNotFound__title {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-text);
  margin: 0 0 16px;
}
.fs-p-pageNotFound__body {
  font-size: 14px;
  line-height: 2;
  color: var(--color-text-sub);
}
.fs-p-pageNotFound__image img { margin: 0 auto 20px; }