/* ============================================================
   brandcat_v4.css （自己完結版）
   v1からの変更:
   (1) :root デザイントークンを同梱
       → frt_itemDesc CSS を読み込まないカテゴリーページでも色が出る。
         値は css_patch（gigaplus）の :root と同一。既に定義済みのページでは
         同じ値で上書きされるだけで無害。
   (2) .brandCat-name を既定で非表示（ページH1がブランド名を出すため重複防止）。
   (3) v2→v3: ご利用ガイド枠を非表示／「詳細はこちら」リンク様式追加。
   (4) v3→v4: ブロック見出しを「商品概要／商品の使い方」級（約30px）に拡大＋下線アクセント。
       いずれも末尾の該当行で個別にON/OFF可能。
   ============================================================ */
:root {
  --fr-brand:       #8a5fa8;
  --fr-brand-ink:   #5a3b75;
  --fr-brand-tint:  #f3eef7;
  --fr-accent:      #d4537e;
  --fr-text:        #333;
  --fr-text-muted:  #8a857f;
  --fr-line:        #e7e2dd;
  --fr-surface:     #f7f5f0;
  --fr-guide-border:#cfe3c5;
  --fr-guide-bg:    #f6faf2;
  --fr-color-main:        #b8508f;
  --fr-color-main-hover:  #9a3d78;
  --fr-color-main-light:  #fce8f3;
  --fr-color-section-alt: #fdf8fb;
  --fr-color-text:        #3a3a36;
  --fr-color-sub:         #666666;
  --fr-color-link:        #b8508f;
  --fr-color-border:      #e8d8e2;
  --fr-color-white:       #ffffff;
  --fr-radius:      12px;
  --fr-radius-sm:    6px;
  --fr-space-xs:    0.5rem;
  --fr-space-sm:    0.75rem;
  --fr-space-md:    1rem;
  --fr-space-lg:    1.5rem;
  --fr-space-xl:    2rem;
}

/* 外枠：原寸・全幅・中央寄せ（トップ/詳細の frt-sec と統一） */
.brandCat {
  max-width: 1060px;
  margin: 0 auto;
  padding: var(--fr-space-lg) var(--fr-space-md);
  color: var(--fr-color-text);
  line-height: 1.8;
  font-size: 15px;
  word-break: break-word;
}
.brandCat * { box-sizing: border-box; }
.brandCat img { max-width: 100%; height: auto; display: block; }

/* 各セクション間の余白（1カラム縦積み） */
.brandCat-sec { margin-top: var(--fr-space-xl); }
.brandCat-head + .brandCat-banner,
.brandCat-banner + .brandCat-desc { margin-top: var(--fr-space-lg); }

/* ブロック見出し */
.brandCat-blockTitle {
  margin: 0 0 var(--fr-space-lg);
  font-size: 1.875rem;            /* v4: 商品概要/商品の使い方 と同等の大きさ（約30px） */
  font-weight: 700;
  color: var(--fr-color-text);
  line-height: 1.3;
}
/* v4: 見出し下の短い下線アクセント（商品概要の見た目に合わせる） */
.brandCat-blockTitle::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-top: var(--fr-space-sm);
  background: var(--fr-color-main);
  border-radius: 2px;
}

/* 1. ブランド名 */
.brandCat-head { text-align: center; }
.brandCat-name {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--fr-brand-ink);
}

/* 2. バナー */
.brandCat-banner { margin-top: var(--fr-space-md); }
.brandCat-banner img { margin: 0 auto; border-radius: var(--fr-radius); }

/* 3. 紹介文 */
.brandCat-desc { color: var(--fr-color-text); }

/* 4. ランキング（Phase2） */
.brandCat-rankList { list-style: none; margin: 0; padding: 0; }
.brandCat-rankList li {
  display: flex; align-items: center; gap: var(--fr-space-sm);
  padding: var(--fr-space-sm) 0; border-bottom: 1px solid var(--fr-color-border);
}
.brandCat-rankNo {
  flex: 0 0 auto; width: 1.6em; height: 1.6em; line-height: 1.6em; text-align: center;
  border-radius: 50%; background: var(--fr-color-main); color: var(--fr-color-white);
  font-size: .85em; font-weight: 700;
}

/* 5. 開発者プロフィール */
.brandCat-dev .brandCat-devBody {
  display: flex; gap: var(--fr-space-lg); align-items: flex-start;
  background: var(--fr-color-section-alt);
  border: 1px solid var(--fr-color-border);
  border-radius: var(--fr-radius);
  padding: var(--fr-space-lg);
}
.brandCat-devImg { flex: 0 0 120px; }
.brandCat-devImg img { border-radius: var(--fr-radius-sm); }
.brandCat-devName { margin: 0 0 var(--fr-space-xs); font-weight: 600; color: var(--fr-brand-ink); }
.brandCat-devProfile { margin: 0; color: var(--fr-color-sub); }

/* 6. 特徴・メリット */
.brandCat-featList { display: grid; gap: var(--fr-space-md); }
.brandCat-feat {
  background: var(--fr-brand-tint);
  border-radius: var(--fr-radius);
  padding: var(--fr-space-md) var(--fr-space-lg);
}
.brandCat-featTitle { margin: 0 0 var(--fr-space-xs); font-weight: 600; color: var(--fr-brand-ink); }
.brandCat-featDesc { margin: 0; color: var(--fr-color-text); }

/* 7. シリーズ・ラインナップ */
.brandCat-seriesList {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--fr-space-xs) var(--fr-space-md);
}
.brandCat-seriesList li {
  padding: var(--fr-space-xs) 0; border-bottom: 1px dotted var(--fr-color-border);
}
.brandCat-seriesLink { color: var(--fr-color-link); text-decoration: none; }
.brandCat-seriesLink:hover { color: var(--fr-color-main-hover); text-decoration: underline; }
.brandCat-seriesText { color: var(--fr-color-text); }
.brandCat-seriesCount { color: var(--fr-text-muted); font-size: .85em; }

/* 8. FAQ / 9. ガイドFAQ 共通 */
.brandCat-qa { padding: var(--fr-space-md) 0; border-bottom: 1px solid var(--fr-color-border); }
.brandCat-qa:last-child { border-bottom: 0; }
.brandCat-q { margin: 0 0 var(--fr-space-xs); font-weight: 600; color: var(--fr-brand-ink); }
.brandCat-q::before { content: "Q. "; color: var(--fr-color-main); }
.brandCat-a { margin: 0; color: var(--fr-color-text); }
.brandCat-a::before { content: "A. "; color: var(--fr-text-muted); }

/* 9. 利用ガイド枠 */
.brandCat-guide {
  background: var(--fr-guide-bg);
  border: 1px solid var(--fr-guide-border);
  border-radius: var(--fr-radius);
  padding: var(--fr-space-lg);
  margin-top: var(--fr-space-md);
}
.brandCat-guideName { margin: 0 0 var(--fr-space-xs); font-weight: 600; color: var(--fr-brand-ink); }
.brandCat-guideDesc { margin: 0 0 var(--fr-space-sm); color: var(--fr-color-text); }
.brandCat-guideLinks { margin: 0 0 var(--fr-space-sm); padding-left: 1.2em; }
.brandCat-guideLinks a { color: var(--fr-color-link); }
.brandCat-guideLinkDesc { display: block; color: var(--fr-color-sub); font-size: .85em; }
.brandCat-guideNote { margin: var(--fr-space-sm) 0 0; color: var(--fr-text-muted); font-size: .9em; }

/* スマホ（〜480px）：縦積み・1列化 */
@media (max-width: 480px) {
  .brandCat { padding: var(--fr-space-md) var(--fr-space-sm); }
  .brandCat-name { font-size: 1.25rem; }
  .brandCat-dev .brandCat-devBody { flex-direction: column; }
  .brandCat-devImg { flex-basis: auto; max-width: 160px; margin: 0 auto; }
  .brandCat-seriesList { grid-template-columns: 1fr; }
}


/* ============================================================
   重複防止：ページのH1がブランド名を表示するため、brandcat側の
   ブランド名見出しは既定で非表示。
   ★ブロック内にもブランド名を出したい場合は、次の1行を削除してください。
   ============================================================ */
.brandCat-name { display: none; }


/* ============================================================
   v3 追加分（個別にON/OFF可能）
   ============================================================ */

/* (A) ご利用ガイド枠：今回は非表示。再表示するなら次の1行を削除 */
.brandCat-guides { display: none; }

/* (B) 「詳細はこちら」リンク（タイトル下リード文の末尾に表示） */
.brandCat-jump {
  display: inline-block;
  margin-left: 0.25em;
  color: var(--fr-color-link);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.brandCat-jump:hover { color: var(--fr-color-main-hover); text-decoration: underline; }

/* (C) アンカー着地時に少し上に余白（先頭が隠れないように） */
#js-brandCat, .brandCat { scroll-margin-top: 16px; }