@charset "UTF-8";
/* ==========================================================================
   raremon.css — レアモン 独自スタイル
   --------------------------------------------------------------------------
   EC-CUBE 標準の style.css の【後】に読み込まれる上書き用スタイル。
   style.css（リセット・グリッド・コンポーネントの土台）は変更せず、
   このファイルで見た目だけを上書きする。

   さらに後段で html/user_data/assets/css/customize.css が読み込まれる。
   そちらは将来クライアントが触る最終上書き点として空けておくこと。

   --------------------------------------------------------------------------
   【配色の原則】
     ヘッダー・フッター・KV・セクション見出し … 黒 ＋ ゴールド
     商品画像まわり                          … 濃色背景（カードが映える）
     カート・購入フロー・マイページ・フォーム … 白ベース ＋ ゴールドのアクセント

   理由：EC-CUBE のフォーム類は明るい背景を前提とした Bootstrap ベースで
   組まれており、全体をダークにすると入力欄・プルダウン・バリデーション表示で
   可読性が破綻する箇所が必ず出るため。
   → ダーク化は「ガワ」（header / footer / KV / 見出し）に限定し、
     フォームを含む本文領域には手を入れない。

   【ゴールドの扱い】
     単色ではなく linear-gradient(180deg, gold-light, gold-dark) を基本とする
     （ロゴの金属質感に寄せるため）。
     グラデを使うのは「ボタンの地」と「見出しの罫」。文字色は単色を使う。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. カラートークン
   -------------------------------------------------------------------------- */
:root {
  --rm-black:      #0B0E1A;
  --rm-black-soft: #171B2C;
  --rm-gold:       #D4AF37;
  --rm-gold-light: #F2D785;
  --rm-gold-dark:  #8B6F1F;
  --rm-beige:      #B89A6B;
  --rm-text:       #2B2B2B;
  --rm-bg:         #FFFFFF;

  /* 派生値（グラデーション・境界線） */
  --rm-gold-grad:  linear-gradient(180deg, var(--rm-gold-light), var(--rm-gold-dark));
  --rm-gold-line:  linear-gradient(90deg, var(--rm-gold-dark), var(--rm-gold-light), var(--rm-gold-dark));
  --rm-header-h:   88px;
}

/* --------------------------------------------------------------------------
   2. 汎用ユーティリティ（ガワ以外への適用は次フェーズで行う）
   -------------------------------------------------------------------------- */

/* ゴールドのボタン。地はグラデ、文字は黒の単色 */
.rm-btnGold {
  display: inline-block;
  padding: 12px 28px;
  border: 0;
  border-radius: 2px;
  background: var(--rm-gold-grad);
  color: var(--rm-black);
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  transition: filter .2s ease, transform .2s ease;
}
.rm-btnGold:hover,
.rm-btnGold:focus {
  filter: brightness(1.08);
  color: var(--rm-black);
  text-decoration: none;
}
.rm-btnGold:active { transform: translateY(1px); }

/* 見出しの下罫。罫のみグラデ、文字色は単色 */
.rm-headingRule {
  position: relative;
  padding-bottom: 14px;
  color: var(--rm-text);
}
.rm-headingRule::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 2px;
  background: var(--rm-gold-line);
}
.rm-headingRule--center { text-align: center; }
.rm-headingRule--center::after { left: 50%; transform: translateX(-50%); }

/* 濃色背景の上に置く見出し */
.rm-onDark { color: #FFFFFF; }
.rm-onDark .rm-headingRule { color: #FFFFFF; }

/* --------------------------------------------------------------------------
   3. ヘッダー（黒 ＋ ゴールド）
   -------------------------------------------------------------------------- */
.ec-layoutRole__header {
  background: var(--rm-black);
  border-bottom: 1px solid rgba(212, 175, 55, .28);
}

/* ロゴ帯 */
.ec-layoutRole__header .ec-headerRole {
  color: #FFFFFF;
  padding-top: 12px;
  padding-bottom: 12px;
}
.ec-layoutRole__header .ec-headerRole__title { width: 100%; }
.ec-layoutRole__header .ec-headerTitle__title h1 { margin: 0; }
.ec-layoutRole__header .ec-headerTitle__title a {
  display: inline-block;
  color: #FFFFFF;
  text-decoration: none;
}
.rm-logo {
  display: block;
  width: auto;
  height: 56px;
  max-width: 100%;
}

/* ナビ帯 */
.ec-layoutRole__header .ec-headerNaviRole {
  color: #FFFFFF;
  padding-top: 4px;
  padding-bottom: 12px;
  border-top: 0;
}
.ec-layoutRole__header .ec-headerNav__item a,
.ec-layoutRole__header .ec-headerNav__itemLink {
  color: #FFFFFF;
  text-decoration: none;
  transition: color .2s ease;
}
.ec-layoutRole__header .ec-headerNav__item a:hover,
.ec-layoutRole__header .ec-headerNav__item a:hover .ec-headerNav__itemLink,
.ec-layoutRole__header .ec-headerNav__item a:hover .ec-headerNav__itemIcon {
  color: var(--rm-gold-light);
  text-decoration: none;
}
.ec-layoutRole__header .ec-headerNav__itemIcon {
  color: var(--rm-gold);
  transition: color .2s ease;
}

/* カート */
.ec-layoutRole__header .ec-cartNavi { color: #FFFFFF; }
.ec-layoutRole__header .ec-cartNavi__icon { color: var(--rm-gold); }
.ec-layoutRole__header .ec-cartNavi__price { color: #FFFFFF; }
.ec-layoutRole__header .ec-cartNavi__badge {
  background: var(--rm-gold-grad);
  color: var(--rm-black);
  font-weight: 700;
}

/* 検索フォームは白ベースのまま（配色の原則どおりフォームには手を入れない）。
   枠線だけゴールドに寄せて黒地から浮かせる */
.ec-layoutRole__header .ec-headerSearch .ec-input input,
.ec-layoutRole__header .ec-headerSearch .ec-select select {
  border-color: rgba(212, 175, 55, .45);
}

/* ヘッダー右端にあった CTA「商品を探す」はデザイン改修③で廃止。
   検索窓が同じ導線（商品を探す）を担うため。 */

/* SP のハンバーガー（黒地にゴールド） */
.ec-headerNavSP {
  background: var(--rm-black);
  color: var(--rm-gold);
  border: 1px solid rgba(212, 175, 55, .5);
}

@media (max-width: 767px) {
  .rm-logo { height: 40px; margin: 0 auto; }
  .ec-layoutRole__header .ec-headerTitle__title { text-align: center; }
}

/* --------------------------------------------------------------------------
   4. フッター（黒 ＋ ゴールド）
   -------------------------------------------------------------------------- */
.ec-footerRole {
  background: var(--rm-black);
  border-top: 2px solid transparent;
  border-image: var(--rm-gold-line) 1;
  margin-top: 60px;
}
.ec-footerRole .ec-footerNavi { color: #FFFFFF; }
.ec-footerRole .ec-footerNavi__link a {
  color: #FFFFFF;
  border-bottom-color: rgba(255, 255, 255, .18);
  transition: color .2s ease;
}
.ec-footerRole .ec-footerNavi__link:hover a,
.ec-footerRole .ec-footerNavi__link a:hover {
  color: var(--rm-gold-light);
  opacity: 1;
  text-decoration: none;
}
.ec-footerRole .ec-footerTitle__logo a {
  color: var(--rm-gold);
  text-decoration: none;
  transition: color .2s ease;
}
.ec-footerRole .ec-footerTitle__logo a:hover { color: var(--rm-gold-light); }
.ec-footerRole .ec-footerTitle__copyright { color: rgba(255, 255, 255, .6); }

/* フッターロゴ画像。
   style.css の PC 用メディアクエリに
     .ec-footerRole .ec-footerRole__inner img { width: 100%; }
   があり、単独クラスでは詳細度で負けて横に引き伸ばされる。
   そのため同じ入れ子でセレクタを組み、詳細度を上回らせている。 */
.rm-footerLogo,
.ec-footerRole .ec-footerRole__inner img.rm-footerLogo {
  display: inline-block;
  width: auto;
  height: 44px;
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   5. ページ先頭に戻るボタン（ガワの一部）
   -------------------------------------------------------------------------- */
.ec-blockTopBtn {
  background: var(--rm-black);
  color: var(--rm-gold);
  border: 1px solid rgba(212, 175, 55, .5);
}

/* --------------------------------------------------------------------------
   6. ヘッダー内のカテゴリナビ・カート（黒地になじませる）
   -------------------------------------------------------------------------- */

/* カテゴリナビ。style.css では各リンクが白背景のため黒地から浮いてしまう */
.ec-layoutRole__header .ec-categoryNaviRole { background: transparent; }
.ec-layoutRole__header .ec-itemNav__nav li a {
  background: transparent;
  color: #FFFFFF;
  border-bottom: none;
  transition: color .2s ease;
}
.ec-layoutRole__header .ec-itemNav__nav li a:hover {
  background: transparent;
  color: var(--rm-gold-light);
}
/* ドロップダウンの子階層は視認性のため濃色の面を敷く */
.ec-layoutRole__header .ec-itemNav__nav li ul li a {
  background: var(--rm-black-soft);
  border-bottom: 1px solid rgba(212, 175, 55, .2);
}
.ec-layoutRole__header .ec-itemNav__nav li ul li a:hover {
  background: var(--rm-black-soft);
  color: var(--rm-gold-light);
}

/* カート。PC では style.css が白い角丸ピルにしているため黒地に合わせる */
.ec-layoutRole__header .ec-cartNavi {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(212, 175, 55, .35);
  color: #FFFFFF;
}
.ec-layoutRole__header .ec-cartNavi:hover { background: rgba(212, 175, 55, .12); }

/* カート中身のドロップダウンは白ベースのまま（金額・商品名の可読性を優先） */

/* --------------------------------------------------------------------------
   7. キービジュアル（トップページ）
   -------------------------------------------------------------------------- */

/* 視覚的にのみ隠す（display:none と違い、スクリーンリーダーは読み上げる） */
.rm-visuallyHidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.rm-kv {
  position: relative;
  background-color: var(--rm-black);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  overflow: hidden;
}
.rm-kv__inner {
  position: relative;
  margin: 0 auto;
  padding: 48px 20px 56px;
  max-width: 1130px;
  box-sizing: border-box;
  text-align: center;
}
.rm-kv__art { display: block; margin: 0 auto; }
.rm-kv__art img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  /* width/height 属性を付けられない（PC と SP で縦横比が違う）ため、
     CLS 対策として aspect-ratio で領域を確保する。既定は PC の kv01。 */
  aspect-ratio: 1884 / 682;
}
.rm-kv__action { margin: 28px 0 0; }
.rm-btnGold--lg { padding: 16px 48px; font-size: 17px; }

/* 背景画像は PC / SP をメディアクエリで完全に分ける。
   合致しないメディアクエリ内の background-image はブラウザが取得しないため、
   2枚用意しても転送量は増えない。
   なお kv_bg / kv_bg_sp は JPEG のみで WebP 版を持たないため
   image-set() は使用していない（JPEG の WebP 化は実測で効果が無く見送ったため）。 */
@media (min-width: 768px) {
  .rm-kv { background-image: url("../img/top/kv_bg.jpg"); }
  /* PC は kv01 に焼き込まれたキャッチコピーが十分読めるため、
     h1 は視覚的にのみ隠す（文言の重複を避ける） */
  .rm-kv__catch {
    position: absolute !important;
    width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
  }
}

@media (max-width: 767px) {
  .rm-kv { background-image: url("../img/top/kv_bg_sp.jpg"); }
  .rm-kv__inner { padding: 44px 16px 48px; }

  /* SP の前景は kv01 ではなく logo（ロックアップ）。<picture> の media で切替済み。
     クロップが不要になったので overflow:hidden と margin-top のマイナス値は廃止した。
     背景 kv_bg_sp.jpg は約 4:3 なので、ロゴ・h1・CTA を上下の余白込みで収める。 */
  .rm-kv__art {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  }
  .rm-kv__art img { aspect-ratio: 677 / 212; }

  /* SP ではキャッチコピーを実テキストで見せる */
  .rm-kv__catch {
    margin: 18px 0 0;
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.5;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
  }
}

/* --------------------------------------------------------------------------
   8. 特徴セクション（画像を使わず HTML + CSS のみ）
   -------------------------------------------------------------------------- */
.rm-features {
  background: var(--rm-bg);
  padding: 56px 0;
}
.rm-features__inner {
  margin: 0 auto;
  padding: 0 20px;
  max-width: 1130px;
  box-sizing: border-box;
}
.rm-features__heading {
  position: relative;
  margin: 0 0 40px;
  padding-bottom: 14px;
  color: var(--rm-text);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .08em;
  text-align: center;
}
.rm-features__heading::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 64px;
  height: 2px;
  background: var(--rm-gold-line);
}
.rm-features__list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rm-features__item {
  flex: 1 1 220px;
  box-sizing: border-box;
  padding: 28px 20px;
  border: 1px solid rgba(184, 154, 107, .35);
  border-radius: 2px;
  background: #FFFFFF;
  text-align: center;
}
.rm-features__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--rm-black);
  color: var(--rm-gold);
  font-size: 22px;
}
.rm-features__itemTitle {
  margin: 0 0 10px;
  color: var(--rm-text);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .04em;
}
.rm-features__itemText {
  margin: 0;
  color: var(--rm-text);
  font-size: 14px;
  line-height: 1.8;
  text-align: left;
}

@media (max-width: 767px) {
  .rm-features { padding: 40px 0; }
  .rm-features__list { gap: 16px; }
  /* タブレット幅では2列。1列だと間延びするため */
  .rm-features__item { flex: 1 1 calc(50% - 8px); padding: 24px 18px; }
}

@media (max-width: 520px) {
  /* スマホ幅は1列 */
  .rm-features__item { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   9. 既存ブロックのセクション見出し（黒＋ゴールドの罫に寄せる）
   新着商品・トピックスなどが使う .ec-secHeading 系。
   ブロック自体は DB（dtb_block_position）で管理されるため Twig には手を入れない。
   -------------------------------------------------------------------------- */
.ec-secHeading,
.ec-secHeading--tandem {
  color: var(--rm-text);
}
.ec-secHeading .ec-secHeading__line,
.ec-secHeading--tandem .ec-secHeading__line {
  background: var(--rm-gold-line);
}
.ec-secHeading--tandem .ec-secHeading__line {
  width: 48px;
  height: 2px;
}
.ec-secHeading .ec-secHeading__en,
.ec-secHeading--tandem .ec-secHeading__en {
  color: var(--rm-text);
}
.ec-secHeading .ec-secHeading__ja,
.ec-secHeading--tandem .ec-secHeading__ja {
  color: var(--rm-gold-dark);
}

/* ==========================================================================
   10. ヘッダーの再設計（デザイン改修③）
   --------------------------------------------------------------------------
   EC-CUBE 標準は HEADER セクションに header / logo / category_nav_pc の
   3ブロックが縦に積まれる3段構成。ブロックの配置は DB（dtb_block_position）で
   管理されているため Twig で並び替えず、CSS の flex と order で2段にする。

     1段目： ロゴ（大） ｜ 検索 ………… アイコン群 ｜ CTA
     2段目： カテゴリナビゲーション（--rm-black-soft の帯）

   1段目は左右 24px のパディングのみで全幅に広げている。中央寄せの
   コンテナを噛ませると2段目の帯が全幅にならないため。
   ========================================================================== */
@media (min-width: 768px) {
  .ec-layoutRole__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  /* ロゴ（1段目・左） */
  .ec-layoutRole__header .ec-headerRole {
    order: 1;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 10px 0 10px 24px;
  }
  .ec-layoutRole__header .ec-headerRole__title { width: auto; }
  .ec-layoutRole__header .ec-headerTitle { padding: 0; }
  .rm-logo { height: 68px; }

  /* 検索＋アイコン群＋CTA（1段目・右） */
  .ec-layoutRole__header .ec-headerNaviRole {
    order: 2;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 10px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .ec-layoutRole__header .ec-headerNaviRole__left {
    flex: 0 1 380px;
    min-width: 0;
    display: flex;
    align-items: center;
  }
  .ec-layoutRole__header .ec-headerNaviRole__right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
  }


  /* 検索窓：枠線のみの細身に */
  .ec-layoutRole__header .ec-headerSearch { width: 100%; padding: 0; }
  .ec-layoutRole__header .ec-headerSearch .ec-headerSearch__keyword { width: 100%; }
  .ec-layoutRole__header .ec-headerSearch .ec-input input {
    height: 40px;
    border: 1px solid rgba(212, 175, 55, .45);
    border-radius: 2px;
    background: transparent;
    color: #FFFFFF;
    box-shadow: none;
  }
  .ec-layoutRole__header .ec-headerSearch .ec-input input::placeholder { color: rgba(255,255,255,.45); }
  .ec-layoutRole__header .ec-headerSearch .ec-input input:focus {
    border-color: var(--rm-gold);
    outline: none;
  }
  .ec-layoutRole__header .ec-headerSearch__keywordBtn img { filter: invert(78%) sepia(38%) saturate(700%) hue-rotate(1deg) brightness(92%); }

  /* アイコン群：ラベルを消しているぶん控えめに揃える */
  .ec-layoutRole__header .ec-headerNav { padding: 0; display: flex; align-items: center; }
  .ec-layoutRole__header .ec-headerNav__item { margin: 0; }
  .ec-layoutRole__header .ec-headerNav__item a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 2px;
  }
  .ec-layoutRole__header .ec-headerNav__itemIcon {
    margin: 0;
    font-size: 17px;
    color: rgba(255, 255, 255, .72);
  }
  .ec-layoutRole__header .ec-headerNav__item a:hover .ec-headerNav__itemIcon { color: var(--rm-gold-light); }

  /* カートだけは目立たせる（バッジ付き） */
  .ec-layoutRole__header .ec-headerRole__cart { margin-left: 4px; }
  .ec-layoutRole__header .ec-cartNavi {
    padding: 10px 16px 8px;
    min-width: 0;
    height: 40px;
  }

  /* 2段目：カテゴリナビ */
  .ec-layoutRole__header .ec-categoryNaviRole {
    order: 3;
    flex: 0 0 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    max-width: none;
    background: var(--rm-black-soft);
    border-top: 1px solid rgba(212, 175, 55, .35);
  }
  .ec-layoutRole__header .ec-categoryNaviRole .ec-itemNav {
    margin: 0 auto;
    padding: 0 24px;
    max-width: 1130px;
  }
  .ec-layoutRole__header .ec-itemNav__nav li a { padding: 14px 18px; }
}

/* SP：ハンバーガー構造は維持したままロゴだけ大きくする */
@media (max-width: 767px) {
  .rm-logo { height: 52px; }
}

/* 検索窓の外枠。style.css は .ec-headerSearch__keyword に
   薄グレー地＋下角丸を当てているため、黒地に合わせて上書きする
   （カテゴリのプルダウンを外したので下だけ角丸にする必然性も無い） */
@media (min-width: 768px) {
  .ec-layoutRole__header .ec-headerSearch .ec-headerSearch__keyword {
    border: 1px solid rgba(212, 175, 55, .45);
    border-radius: 2px;
    background-color: transparent;
    color: #FFFFFF;
  }
  .ec-layoutRole__header .ec-headerSearch .ec-headerSearch__keyword input[type=search] {
    height: 38px;
    color: #FFFFFF;
    background: transparent;
  }
  .ec-layoutRole__header .ec-headerSearch .ec-headerSearch__keyword input[type=search]::placeholder {
    color: rgba(255, 255, 255, .45);
  }
  .ec-layoutRole__header .ec-headerSearch .ec-headerSearch__keyword:focus-within {
    border-color: var(--rm-gold);
  }
  /* 虫めがねアイコン（黒い svg）をゴールドに寄せる */
  .ec-layoutRole__header .ec-headerSearch__keywordBtn img {
    filter: invert(72%) sepia(63%) saturate(420%) hue-rotate(1deg) brightness(95%);
  }
}

/* ==========================================================================
   11. ヘッダーの修正（デザイン改修③-b）
   1段目の並びを [ロゴ] ……… [アイコン群] │ [検索窓] に変更し、
   カートをアイコン扱いに揃え、SP は1段に圧縮する。
   ========================================================================== */
@media (min-width: 768px) {
  /* 並び替え：右寄せにして「アイコン群 → 検索窓」の順にする */
  .ec-layoutRole__header .ec-headerNaviRole { justify-content: flex-end; }
  .ec-layoutRole__header .ec-headerNaviRole__right { order: 1; }
  .ec-layoutRole__header .ec-headerNaviRole__left {
    order: 2;
    flex: 0 0 300px;
    padding-left: 20px;
    margin-left: 8px;
    /* アイコン群と検索窓の間の細いゴールドの縦罫 */
    border-left: 1px solid rgba(212, 175, 55, .45);
  }

  /* 虫めがねボタンは style.css の top:50% / translateY(-55%) をそのまま活かす。
     以前 top:8px を上書きしていたため transform と噛み合わず枠外へはみ出していた。 */
  .ec-layoutRole__header .ec-headerSearch__keywordBtn { transform: translateY(-50%); }

  /* カートを他のアイコンと同じ扱いに（ピルと金額をやめ、バッジだけ残す） */
  .ec-layoutRole__header .ec-headerRole__cart { margin-left: 0; }
  .ec-layoutRole__header .ec-cartNavi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: transparent;
  }
  .ec-layoutRole__header .ec-cartNavi:hover { background: rgba(212, 175, 55, .12); }
  .ec-layoutRole__header .ec-cartNavi__icon { font-size: 17px; color: rgba(255, 255, 255, .72); }
  .ec-layoutRole__header .ec-cartNavi:hover .ec-cartNavi__icon { color: var(--rm-gold-light); }
  /* 金額表示は出さない。件数バッジのみ残す */
  .ec-layoutRole__header .ec-cartNavi__label { display: none; }
  .ec-layoutRole__header .ec-cartNavi__badge {
    top: -6px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 3px;
    font-size: 10px;
    line-height: 1;
  }
}

/* --------------------------------------------------------------------------
   SP（768px以下）：ヘッダーを1段に圧縮する
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* 右上のアイコン群（会員登録・お気に入り・ログイン・カート）は非表示。
     ハンバーガー内のドロワーに カート / 新規会員登録 / お気に入り / ログイン /
     ホーム がすべて存在することを実DOMで確認済みのため、機能欠落にはならない。

     【注意】ハンバーガー（Block/nav_sp.twig）は .ec-headerNaviRole__left の中に
     入っているため、.ec-headerNaviRole ごと display:none にするとハンバーガーまで
     消えて SP のナビゲーションが完全に失われる。隠すのは __right だけにすること。 */
  .ec-layoutRole__header .ec-headerNaviRole__right { display: none; }
  .ec-layoutRole__header .ec-headerNaviRole { padding: 0; margin: 0; }

  /* 残ったロゴ帯だけで1段にする。ハンバーガーは position:fixed で左上に重なる */
  .ec-layoutRole__header .ec-headerRole {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 6px 56px;   /* 左右にハンバーガー用の逃げを確保 */
    margin: 0;
  }
  .ec-layoutRole__header .ec-headerRole__title { width: 100%; margin: 0; }
  .ec-layoutRole__header .ec-headerTitle { padding: 0; }
  .ec-layoutRole__header .ec-headerTitle__title h1 { margin: 0; line-height: 1; }
  .rm-logo { height: 38px; }

  /* ハンバーガーをヘッダーの高さに合わせて上詰めにする */
  .ec-headerNavSP { top: 12px; left: 12px; width: 36px; height: 36px; padding: 8px; font-size: 16px; }
}

/* h1 > a > picture > img がインライン要素のため、ベースライン分の余白が生まれて
   ロゴ帯が実際のロゴ高さより 30px ほど高くなる。ブロック化して解消する。
   PC / SP 共通で必要なためメディアクエリの外に置く。 */
.ec-layoutRole__header .ec-headerTitle__title h1,
.ec-layoutRole__header .ec-headerTitle__title a,
.ec-layoutRole__header .ec-headerTitle__title picture {
  display: block;
  margin: 0;
  line-height: 0;
}

/* ヘッダーロゴの縦横比を守る。
   style.css:9951 に `.ec-headerTitle img { width: 100%; }`（詳細度 0,1,1）があり、
   単独クラスの .rm-logo（0,1,0）では負けて img が親要素の幅いっぱいに
   引き伸ばされる（SP 375px では 263x38 = 比率 6.92 になっていた）。
   PC で崩れなかったのは .ec-headerRole が shrink-to-fit の flex アイテムで、
   幅が内容から決まっていたための偶然。
   フッターロゴと同じ対処で、同じ入れ子＋要素セレクタで詳細度（0,2,1）を上回らせる。
   高さは各メディアクエリの .rm-logo 側で指定する（幅と競合しない）。 */
.ec-headerTitle img.rm-logo,
.ec-layoutRole__header .ec-headerTitle img.rm-logo {
  width: auto;
  max-width: 100%;
  object-fit: contain;
  /* 幅が内容基準になったぶん、block 要素として中央に置き直す
     （style.css の text-align:center は block 要素には効かないため） */
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   12. キービジュアルのフルブリード化（デザイン改修③）
   --------------------------------------------------------------------------
   KV は .ec-layoutRole__contents（max-width あり）の内側に描画されるため、
   そのままではコンテナ幅で左右が切れる。KV セクションだけ画面幅に広げる。

   採用した手法：
     margin-left / margin-right: calc(50% - 50vw)（width は auto のまま）
     ＋ 祖先の .ec-layoutRole に overflow-x: clip

   100vw はスクロールバーの幅を含むため、margin だけだとスクロールバーの分
   （Windows で 15〜17px）だけ横にはみ出して横スクロールが出る。
   overflow-x: clip は overflow:hidden と違いスクロールコンテナを作らないため、
   position: sticky などを壊さずにはみ出しだけを切り落とせる。
   （.ec-drawerRole は .ec-layoutRole の外にあるためドロワーは影響を受けない）
   ========================================================================== */
.ec-layoutRole {
  overflow-x: clip;
}
.rm-kv {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ==========================================================================
   13. ボタンの刷新（デザイン改修④）
   Bootstrap 標準そのままの見た目が EC-CUBE 感の主因のひとつのため作り替える。
   主要ボタン＝ゴールドのグラデ地＋濃色の文字／副次ボタン＝ゴールドの枠線のみ。
   フォーム内の送信ボタンにも同じスタイルが当たるが、白背景の上でも
   コントラストが確保できる配色にしている（本文の白背景は維持する）。
   ========================================================================== */
.ec-blockBtn--action,
.ec-inlineBtn--action,
.ec-blockBtn--top {
  background: var(--rm-gold-grad);
  border: 1px solid var(--rm-gold-dark);
  border-radius: 3px;
  color: var(--rm-black);
  font-weight: 700;
  letter-spacing: .06em;
  padding: 14px 32px;
  font-size: 15px;
  line-height: 1.4;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
  transition: filter .2s ease, box-shadow .2s ease, transform .1s ease;
}
.ec-blockBtn--action:hover,
.ec-inlineBtn--action:hover,
.ec-blockBtn--top:hover,
.ec-blockBtn--action:focus,
.ec-inlineBtn--action:focus {
  background: var(--rm-gold-grad);
  filter: brightness(1.1);
  color: var(--rm-black);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .14);
}
.ec-blockBtn--action:active,
.ec-inlineBtn--action:active { transform: translateY(1px); }

.ec-blockBtn--cancel,
.ec-inlineBtn--cancel,
.ec-blockBtn {
  background: transparent;
  border: 1px solid var(--rm-gold-dark);
  border-radius: 3px;
  color: var(--rm-gold-dark);
  font-weight: 700;
  letter-spacing: .06em;
  padding: 13px 30px;
  font-size: 15px;
  line-height: 1.4;
  box-shadow: none;
  transition: background .2s ease, color .2s ease;
}
.ec-blockBtn--cancel:hover,
.ec-inlineBtn--cancel:hover,
.ec-blockBtn:hover {
  background: rgba(212, 175, 55, .1);
  border-color: var(--rm-gold);
  color: var(--rm-gold-dark);
}

/* 新着商品ブロックの「more」は style.css で黒地固定になっているため、
   副次ボタン（ゴールドの枠線）に揃える。インラインなので一回り小さいサイズ。 */
.ec-inlineBtn--top {
  background: transparent;
  background-color: transparent;
  border: 1px solid var(--rm-gold-dark);
  border-radius: 3px;
  color: var(--rm-gold-dark);
  font-weight: 700;
  letter-spacing: .06em;
  padding: 9px 22px;
  font-size: 13px;
  line-height: 1.4;
  box-shadow: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.ec-inlineBtn--top:hover,
.ec-inlineBtn--top:focus,
.ec-inlineBtn--top:active,
.ec-inlineBtn--top.active,
.ec-inlineBtn--top:disabled {
  background: rgba(212, 175, 55, .1);
  background-color: rgba(212, 175, 55, .1);
  border-color: var(--rm-gold);
  color: var(--rm-gold-dark);
  box-shadow: none;
}

/* ==========================================================================
   14. 見出しの刷新
   英字サブタイトルは残しつつ配置と字送りを変え、下線は文字幅に依存しない
   固定幅のゴールドグラデ罫にする。上下の余白を広げて区切りを明確にする。
   ========================================================================== */
.ec-secHeading,
.ec-secHeading--tandem {
  position: relative;
  margin: 0 0 40px;
  padding-bottom: 18px;
  color: var(--rm-text);
  text-align: center;
}
.ec-secHeading::after,
.ec-secHeading--tandem::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 64px;             /* 文字幅に依存しない固定幅 */
  height: 2px;
  background: var(--rm-gold-line);
}
.ec-secHeading .ec-secHeading__en,
.ec-secHeading--tandem .ec-secHeading__en {
  display: block;
  color: var(--rm-gold-dark);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .32em;   /* 字送りを広げる */
  text-indent: .32em;
  margin-bottom: 6px;
}
/* 英字と日本語の間の縦罫は不要になるので出さない */
.ec-secHeading .ec-secHeading__line,
.ec-secHeading--tandem .ec-secHeading__line { display: none; }
.ec-secHeading .ec-secHeading__ja,
.ec-secHeading--tandem .ec-secHeading__ja {
  display: block;
  color: var(--rm-text);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .1em;
  margin-bottom: 0;
  vertical-align: baseline;
}
/* ページ見出し（商品詳細の商品名など） */
.ec-headingTitle {
  color: var(--rm-text);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.5;
}

/* ==========================================================================
   15. 商品カード（商品一覧・トップの新着商品で共通）
   画像エリアは濃色＋ゴールド枠、情報エリアは白。
   トレカは縦長なので画像エリアを 3:4 にし、object-fit: contain で
   縦横比がまちまちでも切れずに収める。
   ========================================================================== */

/* --- グリッド：PC 4列 / タブレット 3列 / SP 2列 --- */
.ec-shelfGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 24px;
}
.ec-shelfGrid .ec-shelfGrid__item {
  width: auto;             /* style.css の width:50% を打ち消す */
  margin-bottom: 0;
  padding: 0;
  background: #FFFFFF;
  border: 1px solid rgba(184, 154, 107, .3);
  border-radius: 3px;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
/* style.css が奇数/偶数でパディングを振り分けているのを打ち消す（2列前提のため） */
.ec-shelfGrid .ec-shelfGrid__item:nth-child(odd),
.ec-shelfGrid .ec-shelfGrid__item:nth-child(even) { padding: 0; }
.ec-shelfGrid .ec-shelfGrid__item:hover {
  border-color: var(--rm-gold);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  transform: translateY(-3px);
}

/* --- 画像エリア（濃色＋ゴールドの細枠） --- */
.ec-shelfGrid .ec-shelfGrid__item-image {
  margin: 0 0 14px;
  aspect-ratio: 3 / 4;                       /* 縦長カードを想定 */
  background: var(--rm-black-soft);
  border-bottom: 1px solid rgba(212, 175, 55, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ec-shelfGrid .ec-shelfGrid__item img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;                       /* 切らずに収める */
  padding: 10px;
  box-sizing: border-box;
}

/* --- 情報エリア（白背景） ---
   【注意】商品名と説明文の <p> には本体テンプレートで class が付いていないため、
   やむを得ず構造セレクタで指定している（Product/list.twig の
   <p>{{ Product.name }}</p> がそれにあたる）。
   本体バージョンアップでマークアップが変わると崩れるので、
   アップグレード時はこのセレクタが効いているか必ず確認すること。 */
.ec-shelfGrid .ec-shelfGrid__item > a { display: block; }
.ec-shelfGrid .ec-shelfGrid__item > a > p:not([class]) {
  margin: 0 14px 8px;
  color: var(--rm-text);
  font-size: 15px;
  line-height: 1.7;
}
.ec-shelfGrid .ec-shelfGrid__item > a > p.price02-default {
  margin: 0 14px 14px;
  color: var(--rm-gold-dark);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .02em;
}
/* カード内のフォーム（規格選択・数量・カートに入れる）は白背景のまま */
.ec-shelfGrid .ec-shelfGrid__item form { padding: 0 14px 16px; }
.ec-shelfGrid .ec-shelfGrid__item .ec-productRole__btn { margin-top: 10px; }

@media (max-width: 991px) {
  .ec-shelfGrid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .ec-shelfGrid { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
  .ec-shelfGrid .ec-shelfGrid__item > a > p:not([class]) { margin: 0 10px 6px; font-size: 14px; }
  .ec-shelfGrid .ec-shelfGrid__item > a > p.price02-default { margin: 0 10px 10px; font-size: 15px; }
  .ec-shelfGrid .ec-shelfGrid__item form { padding: 0 10px 12px; }
  .ec-blockBtn--action, .ec-inlineBtn--action { padding: 12px 18px; font-size: 14px; }
}

/* --- トップの新着商品ブロックのカードも同じ見た目に --- */
.ec-newItemRole .ec-newItemRole__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 24px;
}
.ec-newItemRole .ec-newItemRole__listItem {
  width: auto;
  margin: 0;
  padding: 0;
  background: #FFFFFF;
  border: 1px solid rgba(184, 154, 107, .3);
  border-radius: 3px;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.ec-newItemRole .ec-newItemRole__listItem:hover {
  border-color: var(--rm-gold);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  transform: translateY(-3px);
}
.ec-newItemRole .ec-newItemRole__listItem img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  background: var(--rm-black-soft);
  border-bottom: 1px solid rgba(212, 175, 55, .35);
  padding: 10px;
  box-sizing: border-box;
}
/* 「画像なし」プレースホルダは白地の画像なので、そのままだと濃色の画像エリアの
   中で白い箱として浮く。反転・減光して濃色地になじませる。
   （src で判定しているのは、本体テンプレート側に目印になる class が無いため。
     本体バージョンアップで no_image_product.png のファイル名が変わると
     効かなくなるので、アップグレード時は確認すること。） */
.ec-newItemRole .ec-newItemRole__listItem img[src*="no_image"],
.ec-shelfGrid .ec-shelfGrid__item img[src*="no_image"] {
  filter: grayscale(1) invert(1) brightness(.9);
  opacity: .5;
}
.ec-newItemRole .ec-newItemRole__listItemTitle {
  margin: 12px 14px 6px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--rm-text);
}
.ec-newItemRole .ec-newItemRole__listItemPrice {
  margin: 0 14px 16px;
  color: var(--rm-gold-dark);
  font-size: 17px;
  font-weight: 700;
}
@media (max-width: 991px) { .ec-newItemRole .ec-newItemRole__list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) {
  .ec-newItemRole .ec-newItemRole__list { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
  .ec-newItemRole .ec-newItemRole__listItemTitle { margin: 10px 10px 4px; font-size: 14px; }
  .ec-newItemRole .ec-newItemRole__listItemPrice { margin: 0 10px 12px; font-size: 15px; }
}

/* ==========================================================================
   16. 商品一覧ページ
   ========================================================================== */
.ec-searchnavRole {
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(184, 154, 107, .35);
}
.ec-searchnavRole .ec-searchnavRole__topicpath {
  margin-bottom: 14px;
  padding: 0;
  border: 0;
}
.ec-topicpath { color: var(--rm-gold-dark); font-size: 13px; letter-spacing: .04em; }
.ec-topicpath .ec-topicpath__item a { color: var(--rm-gold-dark); }
.ec-searchnavRole .ec-searchnavRole__infos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
}
.ec-searchnavRole .ec-searchnavRole__counter {
  margin: 0;
  color: var(--rm-text);
  font-size: 15px;
}
.ec-searchnavRole .ec-searchnavRole__counter span,
.ec-searchnavRole .ec-searchnavRole__counter strong {
  color: var(--rm-gold-dark);
  font-weight: 700;
}
.ec-searchnavRole .ec-searchnavRole__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  text-align: left;
}
/* 並び替え・表示件数のセレクトをゴールド系の枠線に（背景は白のまま） */
.ec-searchnavRole .ec-select select,
.ec-searchnavRole select {
  border: 1px solid rgba(184, 154, 107, .6);
  border-radius: 3px;
  background-color: #FFFFFF;
  color: var(--rm-text);
  padding: 8px 34px 8px 12px;
  height: auto;
}
.ec-searchnavRole .ec-select select:focus,
.ec-searchnavRole select:focus { border-color: var(--rm-gold); outline: none; }
.ec-searchnavRole .ec-select { margin-bottom: 0; }

/* 0件のときも枠だけ残って破綻しないようにする */
.ec-searchnavRole .errormsg,
.ec-searchnavRole .ec-searchnavRole__counter span:only-child {
  display: block;
  padding: 4px 0;
}

/* --- ページャー --- */
.ec-pagerRole { margin-top: 48px; }
.ec-pager { padding: 0; }
.ec-pager .ec-pager__item,
.ec-pager .ec-pager__item--active {
  min-width: 0;
  margin: 0 4px;
  padding: 0;
}
.ec-pager .ec-pager__item a,
.ec-pager .ec-pager__item--active a {
  display: inline-block;
  min-width: 40px;
  padding: 10px 12px;
  border: 1px solid rgba(184, 154, 107, .5);
  border-radius: 3px;
  background: #FFFFFF;
  color: var(--rm-text);
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.ec-pager .ec-pager__item a:hover {
  background: rgba(212, 175, 55, .12);
  border-color: var(--rm-gold);
  color: var(--rm-text);
}
.ec-pager .ec-pager__item--active a {
  background: var(--rm-gold-grad);
  border-color: var(--rm-gold-dark);
  color: var(--rm-black);
  font-weight: 700;
}
/* style.css は --active に背景を当てているので打ち消す */
.ec-pager .ec-pager__item--active { background: transparent; }

/* ==========================================================================
   17. 商品詳細ページ
   フォーム（規格選択・数量・カートに入れる）は白背景のまま触らない。
   ========================================================================== */
.ec-productRole { padding-top: 8px; }

/* 画像エリア：濃色＋ゴールド枠でカードが映えるように */
.ec-sliderItemRole .item_visual {
  background: var(--rm-black-soft);
  border: 1px solid rgba(212, 175, 55, .35);
  border-radius: 3px;
  overflow: hidden;
}
.ec-sliderItemRole .item_visual img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  padding: 16px;
  box-sizing: border-box;
}
.ec-sliderItemRole .item_nav { margin-top: 12px; gap: 8px; }
.ec-sliderItemRole .item_nav .slideThumb {
  background: var(--rm-black-soft);
  border: 1px solid rgba(212, 175, 55, .25);
  border-radius: 2px;
  overflow: hidden;
}
.ec-sliderItemRole .item_nav .slideThumb img { object-fit: contain; }

/* 商品名・価格まわりの余白と強調 */
.ec-productRole .ec-productRole__title { margin-bottom: 20px; }
.ec-productRole .ec-productRole__tags { margin-bottom: 20px; padding-bottom: 0; border: 0; }
.ec-productRole .ec-productRole__tag {
  background: rgba(212, 175, 55, .12);
  border: 1px solid rgba(184, 154, 107, .5);
  border-radius: 2px;
  color: var(--rm-gold-dark);
}
.ec-productRole .ec-productRole__price {
  margin-bottom: 24px;
  padding: 16px 0;
  border-top: 1px solid rgba(184, 154, 107, .3);
  border-bottom: 1px solid rgba(184, 154, 107, .3);
}
.ec-productRole .ec-price__price,
.ec-productRole .price02-default {
  color: var(--rm-gold-dark);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .02em;
}
.ec-productRole .ec-price__tax { color: #777; font-size: 13px; }
.ec-productRole .ec-productRole__priceRegular { color: #888; }
.ec-productRole .ec-productRole__code,
.ec-productRole .ec-productRole__category { margin-bottom: 14px; color: #666; font-size: 14px; }
.ec-productRole .ec-productRole__category a { color: var(--rm-gold-dark); }
.ec-productRole .ec-productRole__description { margin-top: 32px; line-height: 1.9; }
.ec-productRole .ec-productRole__actions { margin-bottom: 20px; }
.ec-productRole .ec-productRole__btn { margin-top: 8px; }

/* ==========================================================================
   18. TOP 下部ブロックのセクション間余白
   ブロックの配置は dtb_block_position（DB）で決まるため Twig は触らない。
   ========================================================================== */
.ec-newItemRole,
.ec-topicRole,
.ec-eyecatchRole,
.ec-categoryRole,
.ec-newsRole { padding-top: 56px; padding-bottom: 56px; }
.ec-topicRole { background: transparent; }
.ec-newsRole .ec-newsRole__news { border-color: rgba(184, 154, 107, .35); }
.ec-topicRole .ec-topicRole__listItemTitle { margin-top: 12px; color: var(--rm-text); }

@media (max-width: 767px) {
  .ec-newItemRole,
  .ec-topicRole,
  .ec-eyecatchRole,
  .ec-categoryRole,
  .ec-newsRole { padding-top: 36px; padding-bottom: 36px; }
  .ec-secHeading .ec-secHeading__ja,
  .ec-secHeading--tandem .ec-secHeading__ja { font-size: 20px; }
  .ec-headingTitle { font-size: 22px; }
  .ec-productRole .ec-price__price,
  .ec-productRole .price02-default { font-size: 24px; }
}

/* ==========================================================================
   19. 商品カードのボタン位置を揃える（デザイン改修⑤）
   規格ありの商品（プルダウン2つ）と規格なしの商品で高さが変わり、
   「カートに入れる」の位置がバラつくため、カード内をカラム方向の flex にして
   ボタンを最下部に固定する。商品名が1行/2行でずれるのも同時に解消される。
   グリッドの行内で高さが揃うのは CSS Grid の既定の stretch による。
   ========================================================================== */
.ec-shelfGrid .ec-shelfGrid__item {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.ec-shelfGrid .ec-shelfGrid__item > a {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
}
.ec-shelfGrid .ec-shelfGrid__item > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;          /* 情報エリアを伸縮させる */
}
.ec-shelfGrid .ec-shelfGrid__item .ec-productRole__actions {
  flex: 1 1 auto;
  margin-bottom: 10px;
}
.ec-shelfGrid .ec-shelfGrid__item .ec-productRole__btn {
  margin-top: auto;        /* ボタンをカード最下部へ */
  margin-bottom: 0;
}

/* ==========================================================================
   20. ヘッダーのカートのドロップダウン
   標準はピンク地の警告表示で浮くため、濃色＋ゴールドの枠線に揃える。
   ========================================================================== */
.ec-cartNaviNull,
.ec-cartNaviIsset {
  background: var(--rm-black-soft);
  border: 1px solid rgba(212, 175, 55, .45);
  border-radius: 3px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  color: #FFFFFF;
}
/* 空のとき */
.ec-cartNaviNull .ec-cartNaviNull__message {
  background-color: transparent;
  border: 1px solid rgba(212, 175, 55, .35);
  border-radius: 2px;
  color: #FFFFFF;
  font-weight: 400;
}
.ec-cartNaviNull .ec-cartNaviNull__message p { color: #FFFFFF; }
/* 三角（吹き出しの矢印）も同じ配色に */
.ec-cartNaviNull::before,
.ec-cartNaviIsset::before,
.ec-cartNaviNull::after,
.ec-cartNaviIsset::after { border-bottom-color: var(--rm-black-soft); }

/* 商品が入っているとき */
.ec-cartNaviIsset .ec-cartNaviIsset__cart { border-bottom-color: rgba(212, 175, 55, .25); }
.ec-cartNaviIsset .ec-cartNaviIsset__cartContent,
.ec-cartNaviIsset .ec-cartNaviIsset__cartContentTitle,
.ec-cartNaviIsset .ec-cartNaviIsset__cartContentNumber { color: #FFFFFF; }
.ec-cartNaviIsset .ec-cartNaviIsset__cartContentPrice {
  color: var(--rm-gold-light);
  font-weight: 700;
}
.ec-cartNaviIsset .ec-cartNaviIsset__cartContentTax { color: rgba(255, 255, 255, .65); }
.ec-cartNaviIsset .ec-cartNaviIsset__cartImage { background: rgba(255, 255, 255, .06); }
/* 「カートへ進む」は主要ボタン、「閉じる」は濃色の上でも読める枠線ボタンに */
.ec-cartNaviIsset .ec-cartNaviIsset__action .ec-blockBtn--action { width: 100%; }
.ec-cartNaviIsset .ec-cartNaviIsset__action .ec-blockBtn,
.ec-cartNaviIsset .ec-cartNavi--cancel {
  width: 100%;
  margin-top: 8px;
  border-color: rgba(212, 175, 55, .6);
  color: var(--rm-gold-light);
  background: transparent;
}
.ec-cartNaviIsset .ec-cartNavi--cancel:hover { background: rgba(212, 175, 55, .14); color: var(--rm-gold-light); }

/* ==========================================================================
   21. 下層ページの見出し（.ec-pageHeader）
   商品ページの .ec-secHeading と統一感を出しつつ、下層は左寄せのままにする。
   ========================================================================== */
.ec-pageHeader h1,
.ec-pageHeader .h1 {
  position: relative;
  margin: 0 0 32px;
  padding: 0 0 16px;
  border-top: 0;                 /* 標準の上下の罫線をやめる */
  border-bottom: 0;
  color: var(--rm-text);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.5;
  text-align: left;
}
.ec-pageHeader h1::after,
.ec-pageHeader .h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;                   /* .ec-secHeading と同じ固定幅のゴールド罫 */
  height: 2px;
  background: var(--rm-gold-line);
}
.ec-pageHeader { margin-top: 8px; }

@media (max-width: 767px) {
  .ec-pageHeader h1,
  .ec-pageHeader .h1 { font-size: 21px; margin-bottom: 24px; padding-bottom: 12px; }
}

/* ==========================================================================
   22. SP の左右余白
   .ec-searchnavRole と .ec-pagerRole は本体CSSで padding が 0 のため、
   SP で画面左端に文字が張り付く（.ec-shelfRole や .ec-role は 20px 持っている）。
   PC には影響させないよう SP だけに余白を入れる。
   ========================================================================== */
@media (max-width: 767px) {
  .ec-searchnavRole,
  .ec-pagerRole {
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }
  .ec-searchnavRole .ec-searchnavRole__infos { gap: 8px; }
  .ec-searchnavRole .ec-searchnavRole__actions { flex-wrap: wrap; }
}