/* ============================================================
   フラワーレメディ 商品詳細 CSS  ［gigaplus外部配信 frt_itemDesc_v3.css / ASCIIセーフ / 新ファイル名でアップ＋link変更が必須］
   ------------------------------------------------------------
   ★前版で表示が崩れた原因＝CSS内の生マルチバイト記号（花マーク等）が
     makeshop保存時の文字コード変換で壊れ、CSS全体が無効化されたため。
     本版では下記をエンコーディング安全化（既存CSSの \2740 運用に合わせた）：
       ・content の記号 → ユニコードエスケープ（花マーク→\2740 / 中点→\30FB）
       ・font-family の日本語フォント名→ 英字別名でカバーし削除
     （コード部は完全ASCII。makeshop保存はEUC-JP変換のためEUC-JP全文検証済み）
   ■ 設置先：gigaplus（remedy/css/frt_itemDesc_v2.css）にUTF-8でアップロード。
       商品詳細HTMLテンプレートの <link> で読み込む（外部配信＝管理画面のEUC-JP変換を受けない）
       ※ 商品スタイル本体は共通CSSで管理する運用（設計書 第9部）。
         「商品詳細 ＞ CSS欄」はこのページのスタイルとして読み込まれないため不可。
       ※ 既存の .itemDesc__ 系（--fr-）とはプレフィックスが異なる（.frt- / --frt-）ため
         共存可能。クラス・変数の衝突なし。他ページにも影響しない
         （.frt- 要素は商品ページのcol74内にしか存在しないため）。
   ■ 対：col74用HTML雛形（PC用追加商品説明文）と必ずセットで使用
   ■ 方針：色・文字は :root 変数（デザイントークン）に集約。直書き最小。
           クラスは .frt- 系（BEM風）。本文16px・タップ44px・コントラスト基準を満たす。
   ※ HTML側で使う全クラスにこのCSSが対応しています（CSSとHTMLは対）。
   ============================================================ */

/* ------------------------------------------------------------
   0. デザイントークン（唯一の真実）
   ------------------------------------------------------------ */
:root{
  /* ブランドカラー */
  --frt-brand:#b8508f;        /* ローズマゼンタ：アクセント・罫・見出し下線 */
  --frt-brand-deep:#a2247a;   /* 深マゼンタ：リンク文字・小ラベル（明地で4.5:1以上） */

  /* 背景・面（柔らかい花弁トーン） */
  --frt-cream:#fdfbfa;        /* 温かみのある下地（純白より目にやさしい） */
  --frt-petal:#fbf4f8;        /* 最も薄いピンクの面 */
  --frt-bloom:#f5e6ef;        /* カード用の少し濃いピンク */
  --frt-warm:#faf5f2;         /* 店長アドバイス用の暖色面 */

  /* 文字・罫（プラム寄りの黒＝マゼンタと調和） */
  --frt-ink:#3a3138;          /* 本文・見出し（高コントラスト） */
  --frt-ink-soft:#6a5d63;     /* 補助・ラベル（約5:1） */
  --frt-line:#ecdde6;         /* ヘアライン罫 */
  --frt-line-soft:#f1e7ed;

  /* BAカード配色（Before=クールなラベンダー／After=温かいローズ。色相差で前進感を出す） */
  --frt-ba-from:#f0ecf8; --frt-ba-to:#f9daea;

  /* タイポグラフィ（明朝＝見出し／ゴシック＝本文） */
  --frt-serif:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",serif;
  --frt-sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic","Noto Sans JP",sans-serif;
  --frt-fs-body:16px; --frt-lh-body:1.9;
  --frt-fs-h2:1.5rem; --frt-fs-label:.875rem; --frt-fs-eyebrow:.8125rem;

  /* 余白リズム（近接の法則：グループ内は狭く・グループ間は広く） */
  --frt-gap-section:64px;     /* セクション間 */
  --frt-gap-head:22px;        /* 見出し→本文 */

  /* 角丸・影 */
  --frt-radius:14px; --frt-radius-sm:9px;
  --frt-shadow:0 6px 22px rgba(162,36,122,.06);
}

/* ------------------------------------------------------------
   1. コンテナ＆共通要素（col74 のルート＝.frt-itemDesc）
   ------------------------------------------------------------ */
.frt-itemDesc{
  width:100%;                 /* 商品詳細のコンテンツ幅いっぱいに広げる */
  clear:both;                 /* 上部の画像/カート情報の回り込みを解除しフル幅へ */
  margin:0;
  font-family:var(--frt-sans);
  font-size:var(--frt-fs-body);
  line-height:var(--frt-lh-body);
  color:var(--frt-ink);
  background:var(--frt-cream);
  border-radius:var(--frt-radius);
  box-shadow:var(--frt-shadow);
  padding:40px clamp(20px,5vw,48px);
}
.frt-itemDesc *{ box-sizing:border-box; }

/* セクション間の余白（隣接セレクタで上方向に付与＝相殺事故を防ぐ） */
.frt-section + .frt-section{ margin-top:var(--frt-gap-section); }

/* ------------------------------------------------------------
   2. セクション見出し（案1フローラル：明朝タイトル＋長めグラデ下線）
   ------------------------------------------------------------ */
.frt-head{ margin:0 0 var(--frt-gap-head); }
.frt-head__eyebrow{
  display:block;
  font-size:var(--frt-fs-eyebrow);
  letter-spacing:.14em;
  color:var(--frt-brand-deep);
  margin:0 0 8px;
}
.frt-head__title{
  font-family:var(--frt-serif);
  font-size:var(--frt-fs-h2);
  font-weight:600;
  line-height:1.5;
  color:var(--frt-ink);
  margin:0;
  position:relative;
  padding-bottom:15px;
}
.frt-head__title::after{
  /* マゼンタ→淡色のグラデ下線（長め110px） */
  content:""; position:absolute; left:0; bottom:0;
  width:110px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--frt-brand-deep),var(--frt-brand) 55%,var(--frt-bloom));
}

/* ------------------------------------------------------------
   3. 本文段落
   ------------------------------------------------------------ */
.frt-prose{ margin:0; color:var(--frt-ink); }
.frt-prose + .frt-prose{ margin-top:1em; }

/* ------------------------------------------------------------
   4. リンク（下線なし／花弁ハイライトのチップ＋ホバー演出）
   ------------------------------------------------------------ */
.frt-link{
  color:var(--frt-brand-deep);
  text-decoration:none;
  font-weight:600;
  padding:2px 9px;
  border-radius:7px;
  background:var(--frt-petal);            /* 通常時から“押せる”と分かる淡いチップ */
  box-shadow:inset 0 0 0 1px #f0d9e7;     /* ごく薄い縁取りで輪郭を明確に */
  transition:background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.frt-link:hover{
  background:var(--frt-bloom);            /* ホバーで地色が濃くなる */
  box-shadow:inset 0 0 0 1px #e3c0d6, 0 2px 8px rgba(162,36,122,.12);
  transform:translateY(-1px);
}
.frt-link:focus-visible{                  /* キーボード操作の可視フォーカス */
  outline:2px solid var(--frt-brand-deep); outline-offset:2px;
}

/* ------------------------------------------------------------
   5. [1] 商品仕様テーブル（itemSpec）A案行順
   ------------------------------------------------------------ */
.frt-itemSpec__list{ margin:0; }
.frt-itemSpec__row{
  display:grid; grid-template-columns:7.5em 1fr; gap:0 16px;
  align-items:baseline; padding:13px 0; border-bottom:1px solid var(--frt-line);
}
.frt-itemSpec__row dt{ font-size:var(--frt-fs-label); color:var(--frt-ink-soft); letter-spacing:.04em; }
.frt-itemSpec__row dd{ margin:0; }
.frt-itemSpec__group2{ margin-top:10px; }   /* 上段グループと下段グループの間を少し広げる */
.frt-itemSpec__empty{ color:var(--frt-ink-soft); }  /* 値が空（）の行は控えめに */

/* ------------------------------------------------------------
   6. [3] BA：こんなあなたに → こうなりましょう（見せ場）
   ------------------------------------------------------------ */
.frt-ba{ display:grid; grid-template-columns:1fr auto 1fr; gap:18px; align-items:stretch; }
.frt-ba__card{ border-radius:var(--frt-radius); padding:24px 22px; }
.frt-ba__card--from{ background:var(--frt-ba-from); border:1px solid var(--frt-line); }
.frt-ba__card--to{ background:var(--frt-ba-to); border:1px solid #eccfe0; box-shadow:0 8px 20px rgba(162,36,122,.08); }
.frt-ba__label{
  font-family:var(--frt-serif); font-size:1.0625rem; font-weight:600;
  margin:0 0 14px; padding-bottom:10px; border-bottom:1px dashed #e3c6d8;
}
.frt-ba__card--from .frt-ba__label{ color:var(--frt-ink); }
.frt-ba__card--to   .frt-ba__label{ color:var(--frt-ink); }   /* #f9daea上で9.69:1（brand-deepは4.46:1で基準未満のため） */
.frt-ba__items{ list-style:none; margin:0; padding:0; }
.frt-ba__items li{ position:relative; padding-left:1.4em; margin:.55em 0; line-height:1.65; }
.frt-ba__items li::before{ content:"\2740"; position:absolute; left:0; top:.05em; color:var(--frt-brand); font-size:.85em; }
.frt-ba__arrow{ align-self:center; color:var(--frt-brand); font-size:1.6rem; line-height:1; }  /* PC：横→ */
.frt-ba__arrow--v{ display:none; }                                                              /* SP：縦↓（後述） */

/* ------------------------------------------------------------
   7. [4] 商品の使い方（useGuide）
   ------------------------------------------------------------ */
.frt-useGuide{ background:var(--frt-petal); border:1px solid var(--frt-line); border-radius:var(--frt-radius); padding:24px 22px; }

/* ------------------------------------------------------------
   4-b. 追加[1]「いろいろな使い方の紹介」（useCards）
        4枚・6枚どちらでも崩れないグリッド（PC=3列／スマホ=2列）。
        将来 aromatype_（4枚）でも同じクラスで対応可。
   ------------------------------------------------------------ */
.frt-useCards{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;   /* 6枚=3×2／4枚=3+1。どちらも収まる */
}
.frt-useCards__card{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background:var(--frt-cream); border:1px solid var(--frt-line);
  border-radius:var(--frt-radius); padding:18px 14px;
}
.frt-useCards__num{                       /* 番号：小さくブランドカラー */
  font-family:var(--frt-serif); font-size:.95rem; font-weight:600;
  color:var(--frt-brand); line-height:1; margin-bottom:6px;
}
.frt-useCards__title{ font-weight:600; font-size:1rem; color:var(--frt-ink); margin:0 0 10px; }
.frt-useCards__img{                       /* 画像はカード内に収め中央揃え（120×120相当） */
  display:block; width:120px; height:120px; max-width:100%; object-fit:contain; margin:0 0 12px;
}
.frt-useCards__text{ margin:0; font-size:.9375rem; color:var(--frt-ink-soft); line-height:1.7; }

/* ------------------------------------------------------------
   4-c. 追加[2]「トリートメントボトルの作り方」（recipe）
        番号付きステップ。注意書きは [7].frt-cautions の系統を流用。
   ------------------------------------------------------------ */
.frt-recipe__lead{ margin:0 0 18px; }
.frt-recipe__steps{ list-style:none; counter-reset:frt-step; margin:0; padding:0; }
.frt-recipe__steps li{
  position:relative; counter-increment:frt-step;
  padding:3px 0 0 44px; margin:0 0 16px; min-height:30px; line-height:1.7;
}
.frt-recipe__steps li::before{           /* 丸番号バッジ（白文字×ブランドカラー） */
  content:counter(frt-step); position:absolute; left:0; top:0;
  width:30px; height:30px; border-radius:50%;
  background:var(--frt-brand); color:#fff;
  font-family:var(--frt-serif); font-weight:600; font-size:.95rem;
  display:flex; align-items:center; justify-content:center;
}
.frt-recipe__steps li:last-child{ margin-bottom:0; }
.frt-recipe__note{ margin-top:20px; }    /* 注意書きブロックの上余白 */

/* useCards スマホ表示：2列×（3段／2段） */
@media (max-width:640px){
  .frt-useCards{ grid-template-columns:repeat(2,1fr); }
}

/* ------------------------------------------------------------
   8. [5] 店長の一言アドバイス（advice）figure/figcaption
   ------------------------------------------------------------ */
.frt-advice{ display:flex; gap:20px; align-items:flex-start; margin:0; background:var(--frt-warm); border:1px solid var(--frt-line); border-radius:var(--frt-radius); padding:24px 22px; }
.frt-advice__photo{ flex:0 0 auto; width:84px; height:84px; border-radius:50%; object-fit:cover; background:var(--frt-bloom); border:2px solid #fff; box-shadow:0 2px 10px rgba(162,36,122,.12); }
.frt-advice__name{ display:block; font-size:var(--frt-fs-label); color:var(--frt-brand-deep); margin-bottom:6px; }
.frt-advice__text{ margin:0; line-height:1.85; }
/* 将来：1セクション内に figure を複数並べる場合（セラピスト→店長の順）の縦余白 */
.frt-advice + .frt-advice{ margin-top:16px; }

/* ------------------------------------------------------------
   9. [6] よくあるご質問（FAQ）素の details/summary アコーディオン
   ------------------------------------------------------------ */
.frt-faq{ border-top:1px solid var(--frt-line); }
.frt-faq__item{ border-bottom:1px solid var(--frt-line); }
.frt-faq__item > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px;
  min-height:44px;                 /* タップ領域44px以上 */
  padding:14px 4px; font-weight:600; color:var(--frt-ink);
}
.frt-faq__item > summary::-webkit-details-marker{ display:none; }
.frt-faq__q{ flex:0 0 auto; font-family:var(--frt-serif); color:var(--frt-brand-deep); }
.frt-faq__icon{ flex:0 0 auto; margin-left:auto; width:22px; height:22px; position:relative; }
.frt-faq__icon::before,.frt-faq__icon::after{ content:""; position:absolute; background:var(--frt-brand); transition:transform .2s ease; }
.frt-faq__icon::before{ left:0; top:10px; width:22px; height:2px; }   /* 横棒 */
.frt-faq__icon::after { left:10px; top:0; width:2px; height:22px; }   /* 縦棒（開くと消えて − に） */
.frt-faq__item[open] .frt-faq__icon::after{ transform:scaleY(0); }
.frt-faq__a{ margin:0; padding:2px 4px 18px 30px; color:var(--frt-ink-soft); line-height:1.85; }

/* ------------------------------------------------------------
   10. [7] ご使用上の注意（cautions）
   ------------------------------------------------------------ */
.frt-cautions{ background:#fbf7f4; border:1px solid var(--frt-line); border-radius:var(--frt-radius); padding:22px 24px; }
.frt-cautions__list{ list-style:none; margin:0; padding:0; }
.frt-cautions__list li{ position:relative; padding-left:1.5em; margin:.5em 0; line-height:1.7; }
.frt-cautions__list li::before{ content:"\30FB"; position:absolute; left:0; color:var(--frt-brand); }

/* ------------------------------------------------------------
   11. レスポンシブ（〜640px：BAを縦積み＆アローを縦↓に）
   ------------------------------------------------------------ */
@media (max-width:640px){
  .frt-itemDesc{ padding:28px 18px; }
  :root{ --frt-gap-section:48px; }
  .frt-ba{ grid-template-columns:1fr; gap:0; }
  .frt-ba__arrow{ display:none; }
  .frt-ba__arrow--v{ display:block; text-align:center; color:var(--frt-brand); font-size:1.5rem; line-height:1; margin:10px 0; }
  .frt-advice{ flex-direction:column; align-items:center; text-align:center; }
}

/* 12. モーション配慮 */
@media (prefers-reduced-motion:reduce){
  .frt-faq__icon::before,.frt-faq__icon::after{ transition:none; }
  .frt-link{ transition:none; }
}


/* ============================================================
   [v2改修] 司令塔起票 2026-06-15 の確定8点を反映（末尾・後勝ち上書き）
   ・既存ルールは削除せず、ここで上書きする方式（適用ミス防止）
   ・全文ASCIIセーフ（日本語フォント名・生記号なし）
   ============================================================ */

/* [1] 幅：720px制限を撤廃しコンテンツ幅いっぱいに。
        回り込み（上部の画像/カート）はclearで解除し左寄りを防ぐ。 */
.frt-itemDesc{ max-width:100%; width:100%; clear:both; margin:0; padding:40px 0; }

/* [2] 余白削減：セクション間64->40 / 見出し->本文22->12 / 仕様行13->8 */
:root{ --frt-gap-section:40px; --frt-gap-head:12px; }
.frt-itemSpec__row{ padding:8px 0; }

/* [7]-3 eyebrow：細字テキスト -> 背景色付きバッジ型 */
.frt-head__eyebrow{
  display:inline-block; background:var(--frt-brand-deep); color:#fff;
  padding:3px 12px; border-radius:999px;
  letter-spacing:.08em; font-weight:600; margin:0 0 10px;
}

/* [7]-1 仕様テーブル偶数行に淡い地色 */
.frt-itemSpec__row:nth-child(even){ background:#fdf5fa; }

/* [7]-2 BAカード彩度UP（from=ラベンダー寄り / to=ローズ寄り） */
:root{ --frt-ba-from:#ede8f8; --frt-ba-to:#fce8f0; }

/* [8] FAQ：Q. を塗りバッジ化（角丸・白文字） */
.frt-faq__q{
  background:#8a4070; color:#fff; font-family:var(--frt-sans);
  font-weight:700; padding:2px 9px; border-radius:6px;
  font-size:.8125rem; line-height:1.4;
}

/* [5] HOW TO USE 階層化：h2配下のサブ見出し（h3） */
.frt-subhead{
  font-family:var(--frt-serif); font-size:1.125rem; font-weight:600;
  color:var(--frt-ink); margin:28px 0 12px; padding-left:12px;
  border-left:4px solid var(--frt-brand); line-height:1.5;
}
.frt-subhead:first-of-type{ margin-top:18px; }

/* [6] スタッフattribution：氏名を写真下・本文上の小ラベルに（見出し感を除去） */
.frt-advice__name{
  display:block; font-size:var(--frt-fs-label);
  color:var(--frt-brand-deep); font-weight:700; margin:0 0 6px;
}


/* ============================================================
   [v3改修] 2026-06-15：商品仕様テーブルをコンパクトな表組みに
   ・バッチ版に準拠：外枠＋行罫線＋ラベル列背景でグリッド化
   ・行paddingを詰めて俯瞰しやすく（前versionのrow余白/背景を後勝ちで上書き）
   ・見出し「PRODUCT INFO / 商品仕様」は不要 -> HTMLから削除（CSSでも保険的に非表示）
   ============================================================ */

/* テーブル外枠＋角丸。各行を罫線で区切る */
.frt-itemSpec__list{
  margin:0; border:1px solid var(--frt-line);
  border-radius:8px; overflow:hidden;
}
.frt-itemSpec__row{
  display:grid; grid-template-columns:8.5em 1fr; gap:0;
  padding:0; align-items:stretch;
  border-bottom:1px solid var(--frt-line);
  background:transparent;           /* 前versionのrow背景を解除（ddゼブラへ移す） */
}
.frt-itemSpec__row:last-child{ border-bottom:none; }
.frt-itemSpec__group2{ margin-top:0; }  /* グループ間余白は罫線に統一しコンパクト化 */

/* ラベル列：淡い背景＋右罫線 */
.frt-itemSpec__row dt{
  background:var(--frt-petal); color:var(--frt-ink-soft);
  font-size:.8125rem; font-weight:600;
  padding:8px 12px; border-right:1px solid var(--frt-line);
  display:flex; align-items:center; white-space:nowrap;
}
/* 値列：コンパクトなpadding。タグ/リンクは横並び */
.frt-itemSpec__row dd{
  margin:0; padding:8px 12px;
  display:flex; align-items:center; flex-wrap:wrap; gap:6px; line-height:1.6;
}
/* 値列のゼブラ（俯瞰しやすく） */
.frt-itemSpec__row:nth-child(even) dd{ background:#fdf5fa; }

/* 商品仕様セクションの見出し（frt-head）は非表示（HTMLでも削除。古いHTML残存への保険） */
.frt-itemSpec > .frt-head{ display:none; }

/* スマホ：ラベル幅を詰める */
@media (max-width:640px){
  .frt-itemSpec__row{ grid-template-columns:6.5em 1fr; }
  .frt-itemSpec__row dt{ font-size:.75rem; padding:7px 9px; }
  .frt-itemSpec__row dd{ padding:7px 9px; }
}


/* ============================================================
   商品仕様テーブル 最終調整（林さん指示の3点）2026-06-15
   [1] テーブルの周りに罫線  [2] ラベル列のみ背景色（バッチ版の淡いグレー）
   [3] 余白を詰めてコンパクト（値列のゼブラは廃止＝項目に背景色のみ）
   ※末尾・後勝ちで上書き
   ============================================================ */

/* [1] 外周の罫線をしっかり。角丸は控えめ（バッチ版の直角寄り） */
.frt-itemSpec__list{
  border:1px solid var(--frt-line);
  border-radius:6px; overflow:hidden;
}

/* [2] ラベル列（dt）にのみ淡いグレー背景（バッチ版の配色）。値列は白のまま */
.frt-itemSpec__row dt{ background:#f7f5f0; }
/* 値列のゼブラ（偶数行背景）は廃止 */
.frt-itemSpec__row:nth-child(even) dd{ background:transparent; }

/* [3] 余白を詰めてコンパクトに（ラベル・値とも） */
.frt-itemSpec__row dt,
.frt-itemSpec__row dd{ padding:7px 12px; }
.frt-itemSpec__row dd{ line-height:1.55; }

/* スマホでもコンパクトを維持 */
@media (max-width:640px){
  .frt-itemSpec__row dt,
  .frt-itemSpec__row dd{ padding:6px 10px; }
}


/* ============================================================
   商品仕様テーブル 追加調整 2026-06-15（注釈4点）
   [A] テーブル上部の余白を詰める
   [B] 背景を薄いグレーで統一（値列のピンクを排除）
   [C] 行内の余白をさらに削除してコンパクトに
   [D] リンクのアンダーライン除去＋パープル系の角丸ピル
   ※末尾・後勝ちで上書き
   ============================================================ */

/* [A] テーブル上部（罫線の下）の余白を詰める。商品仕様は先頭セクションなので上余白を最小化 */
.frt-itemDesc{ padding-top:14px; }
.frt-section.frt-itemSpec{ margin-top:0 !important; }

/* [B] 背景を薄いグレーで統一（ピンクのゼブラを廃止） */
.frt-itemSpec__row dt{ background:#f1f0ed; }            /* ラベル列：薄グレー */
.frt-itemSpec__row dd{ background:#fbfbfa; }            /* 値列：ごく薄いグレー */
.frt-itemSpec__row:nth-child(even) dd{ background:#fbfbfa !important; }  /* ゼブラ廃止＝全行統一 */

/* [C] 行の余白をさらに削除（コンパクト） */
.frt-itemSpec__row dt,
.frt-itemSpec__row dd{ padding:5px 12px !important; line-height:1.5 !important; }

/* [D] リンク：アンダーライン除去＋パープル系の角丸ピル（お悩みタグと同系） */
.frt-itemSpec__row dd a,
.frt-itemSpec__row dd a.frt-link{
  display:inline-block;
  background:#ede8f8 !important;      /* 薄パープル */
  color:#6f5b9e !important;           /* パープル文字 */
  text-decoration:none !important;    /* アンダーライン除去 */
  padding:2px 12px !important;
  border-radius:999px !important;
  font-size:.8125rem; font-weight:600;
  border:none !important;
  box-shadow:none !important;
}
.frt-itemSpec__row dd a:hover,
.frt-itemSpec__row dd a.frt-link:hover{
  background:#e2d8f2 !important; color:#5a4788 !important;
  transform:none !important; box-shadow:none !important; opacity:1;
}


/* ============================================================
   [v4] 2026-06-15 商品仕様テーブル＆上部余白：最終確定オーバーライド
   ・原因：過去の重複定義で「行(row)の箱」にピンク背景が残り、後段の
     transparent指定は詳細度不足で打ち消せていなかった（＝値セルは薄灰
     なのに箱のピンクが透ける）。上部余白は共通CSS .item-description.border-top
     が生成しており frtの管轄外だった。
   ・方針：以降この1ブロックだけを編集する（継ぎ足し禁止）。
     詳細度(.frt-itemDesc 起点)＋!important で過去の全競合を確実に制圧。
   ============================================================ */

/* [B] 背景は「行(div)全体」に塗る＝セルの縦伸縮に左右されず全面均一。
       （旧方式：dd(セル)に塗ると、グリッドでセルが縦いっぱいに伸びない時に
        上側だけ色が乗り下側が白く残る＝「グレーが上だけ」の原因。これを回避） */
.frt-itemDesc .frt-itemSpec__row,
.frt-itemDesc .frt-itemSpec__row:nth-child(even),
.frt-itemDesc .frt-itemSpec__row:nth-child(odd){ background:#fbfbfa !important; }

/* ラベル列(dt)だけやや濃いグレー＋全高stretch。値列(dd)は透明にして行の地色を見せる */
.frt-itemDesc .frt-itemSpec__row dt{ background:#f1f0ed !important; align-self:stretch !important; }
.frt-itemDesc .frt-itemSpec__row dd,
.frt-itemDesc .frt-itemSpec__row:nth-child(even) dd,
.frt-itemDesc .frt-itemSpec__row:nth-child(odd) dd{ background:transparent !important; }

/* [A] テーブル上部の余白：共通CSS(.item-description.border-top)を
       :has() で frtページのみに限定して上書き（旧商品ページには影響させない） */
.item-description.border-top:has(.frt-itemDesc){
  padding-top:18px !important;
  margin-top:20px !important;
}
.frt-itemDesc{ padding-top:0 !important; }
.frt-section.frt-itemSpec{ margin-top:0 !important; }


/* ============================================================
   [v6] 2026-06-15 商品仕様テーブル：テーブル表示方式へ切替（確実版）
   ・grid方式ではセルの縦stretchが環境により効かず「色が上側だけ」が再発した。
   ・table-cellは同一行のセルが必ず同じ高さになる（ブラウザの確定挙動）ため、
     背景の上下差が構造的に発生しない。以降この方式を正とする。
   ============================================================ */
.frt-itemDesc .frt-itemSpec__list{
  display:table !important; width:100% !important;
  border-collapse:separate !important; border-spacing:0 !important;
  border:1px solid var(--frt-line); border-radius:6px; overflow:hidden; margin:0;
}
.frt-itemDesc .frt-itemSpec__row{ display:table-row !important; background:transparent !important; }
.frt-itemDesc .frt-itemSpec__row dt{
  display:table-cell !important; width:8.5em !important;
  vertical-align:middle !important; white-space:nowrap;
  background:#f1f0ed !important; color:var(--frt-ink-soft);
  font-size:.8125rem; font-weight:600;
  padding:7px 12px !important; line-height:1.5 !important;
  border-right:1px solid var(--frt-line);
  border-bottom:1px solid var(--frt-line);
}
.frt-itemDesc .frt-itemSpec__row dd{
  display:table-cell !important; vertical-align:middle !important;
  background:#fbfbfa !important; color:var(--frt-ink);
  padding:7px 12px !important; line-height:1.6 !important;
  border-bottom:1px solid var(--frt-line);
}
.frt-itemDesc .frt-itemSpec__row:last-child dt,
.frt-itemDesc .frt-itemSpec__row:last-child dd{ border-bottom:none; }
@media (max-width:640px){
  .frt-itemDesc .frt-itemSpec__row dt{ width:6.5em !important; font-size:.75rem; padding:6px 9px !important; }
  .frt-itemDesc .frt-itemSpec__row dd{ padding:6px 9px !important; }
}


/* ============================================================
   [v7] 2026-06-15 SP：BAカード縦矢印を撤去し、カード間に余白を付与
   ------------------------------------------------------------
   ・対象は SP(@media max-width:640px) のみ。PCの横矢印/レイアウトは現状維持。
   ・根拠：v6のSPでは .frt-ba{gap:0} で、縦矢印 .frt-ba__arrow--v{margin:10px 0}
     がカード間の唯一の間隔だった。矢印を消すと間隔がゼロになるため、
     grid の row-gap で間隔を代替する。
   ・余白値は :root トークンに新設（直書き回避）。値はPCの .frt-ba{gap:18px} と統一。
   ・末尾・後勝ちで section11 の SP定義（arrow--v{display:block} / .frt-ba{gap:0}）を上書き。
   ・!important 不使用・HTML(col74)/JS/データ(v14) は不変。
   ============================================================ */
:root{ --frt-gap-ba-card:18px; }   /* 縦積みBAカードの行間（PCのカラム間gapと同値で統一） */

@media (max-width:640px){
  .frt-ba__arrow--v{ display:none; }            /* (1) SP用の縦矢印「↓」を非表示 */
  .frt-ba{ gap:var(--frt-gap-ba-card); }        /* (2) 縦積みカード間に行余白（grid-template-columns:1fr は既存継承） */
}