/**
 * dignified.css — テーマB「品格」
 * 士業・コンサル系。白×ティール × Noto Serif JP × 直線基調
 *
 * 構成:
 *   1. 既存トークン（--c-*, --radius-*, --font-* など、article-body.css/blocks.css 参照用）
 *   2. cms-design B-dignified 由来トークン（--accent, --ink, --bg など、_layout/_top/_category/_lower/_404.css 参照用）
 *   3. テーマB固有の末尾上書き
 */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600;700;900&family=Noto+Sans+JP:wght@300;400;500;700&display=swap');

:root {
  /* ============================================================
     1. 既存トークン（article-body.css / blocks.css 用）
     ============================================================ */

  /* 形状（直線基調・小さい角丸） */
  --radius: 4px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;

  /* 書体（B「品格」: 明朝でやや大きめ・行間広め — 既定値）
     管理画面の「タイポグラフィ」設定（colors.css）が値を持てばそちらが優先される */
  --font-heading: "Noto Serif JP", "游明朝", serif;
  --font-body: "Noto Serif JP", "Noto Sans JP", "Hiragino Sans", sans-serif;
  --font-size-base: var(--c-font-size-base, 18px);
  --line-height: var(--c-line-height, 2.05);
  --letter-spacing: var(--c-letter-spacing, 0.03em);

  /* レイアウト */
  --content-max: 720px;
  --site-max: 1100px;
  --spacing-section: 56px;

  /* トランジション */
  --transition: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* ステップブロック */
  --step-num-bg: var(--c-accent);
  --step-num-color: #fff;
  --step-num-radius: 50%;
  --step-line-color: var(--c-accent-pale);
  --step-border: none;

  /* FAQブロック */
  --faq-q-badge-bg: var(--c-accent);
  --faq-q-badge-color: #fff;
  --faq-q-badge-radius: var(--radius-sm);
  --faq-a-badge-bg: var(--c-accent-faint);
  --faq-a-badge-color: var(--c-accent);
  --faq-item-bg: var(--c-surface);
  --faq-item-border: 1px solid var(--c-border);

  /* ============================================================
     2. cms-design B-dignified 由来トークン（_layout/_top/_category/_lower/_404.css 用）
     既存 --c-* と意味が重なる項目は colors.css で上書きされる値を参照
     ============================================================ */
  --bg:           var(--c-bg, #FFFFFF);
  --surface:      var(--c-surface, #FFFFFF);
  --ink:          var(--c-text, #171717);
  --ink-2:        #262626;
  --muted:        var(--c-muted, #5E5E5E);
  --muted-2:      #A3A3A3;
  --line:         var(--c-border, #E5E8EA);
  --soft:         var(--c-highlight, #F5F7F8);
  --accent:       var(--c-accent, #2396A8);
  --accent-rgb:   var(--c-accent-rgb, 35, 150, 168);
  --accent-2:     var(--c-accent-2, #4FB4C2);
  --cta:          var(--c-cta, var(--c-accent, #2396A8));
  --cta-ink:      #FFFFFF;
  /* B「品格」: 1位金 / 2位銀 / 3位銅（cms-design B 元色、派手さ抑えめ単色）
     4位以降は薄ティール（テーマ色の薄バージョン） */
  --rank-1:       var(--c-rank-1, #C8A04A);     /* 1位 = 金 */
  --rank-2:       var(--c-rank-2, #9CA3AC);     /* 2位 = 銀 */
  --rank-3:       var(--c-rank-3, #B27B4A);     /* 3位 = 銅 */
  --rank-other-bg: rgba(35, 150, 168, 0.10);  /* 4位以降 = 薄ティール背景 */
  --rank-other-fg: var(--accent);
  --star-1:       #D4A04A;
  --star-2:       #E2C77A;

  --font-sans:    "Noto Serif JP", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Noto Serif JP", serif;

  --max:          720px;

  /* placeholder image (記事サムネ未設定時のストライプ) */
  --placeholder-1: #EAE7DD;
  --placeholder-2: #E0DCCF;

  /* avatar fallback gradient (.profile / .row .author) */
  --avatar-1:      #E8E6E0;
  --avatar-2:      #C9C7C0;
  --avatar-ink:    #5C5A55;

  /* lower / category page header background */
  --lp-header-bg:  #FBFAF7;

  /* hero (Top の .hero) — _top.css から参照
     hero-image は home.php 側で home_hero_image があれば inline style で上書きされる */
  --hero-accent:        #f3d9b8;
  --hero-accent-rgb:    243, 217, 184;
  --hero-bg-fallback:   #3a2e25;
  --hero-image:         none;
  --news-btn-hover:     #73323A;
}

/* ============================================================
   3. テーマB固有の末尾上書き（cms-design B-dignified _layout.css 末尾より）
   ============================================================ */

/* ---- topbar ---- */
.topbar{
  background: rgba(255,255,255,0.94) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: 0 1px 0 rgba(35, 150, 168, 0.05);
}
.brand-text{
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  letter-spacing: 0.18em !important;
}
.brand-mark{
  background: var(--accent) !important;
  color: #fff !important;
}
nav.cats a:hover{
  border-bottom-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* ---- progress bar ---- */
.progress > i{ background: var(--accent) !important; }

/* ---- footer ----
   --c-footer-bg が管理画面で設定されていればそれを優先、空ならグラデ既定 */
footer.site{
  background: var(--c-footer-bg, linear-gradient(180deg, #1F2937 0%, #111827 100%)) !important;
}

/* ---- 記事見出しは明朝 + 下線控えめ ---- */
article h2,
.article-body h2,
.lp h2,
main h2.body-h2{
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  border-bottom: 1px solid var(--line) !important;
  border-top: none !important;
  padding-bottom: 14px !important;
  padding-top: 0 !important;
}
article h3,
.article-body h3{
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}
article h3::before,
.article-body h3::before{
  background: var(--accent) !important;
}

/* ---- 記事ヘッダー ---- */
.article-head h1{
  font-family: var(--font-display) !important;
  font-size: 34px !important;
  line-height: 1.65 !important;
  letter-spacing: 0.04em !important;
}
.article-head .cat-chip{
  border: 1px solid var(--accent) !important;
  color: var(--accent) !important;
  border-radius: 0 !important;
  letter-spacing: 0.16em !important;
  font-weight: 500;
}

/* ---- CTA: アクセントと同色（B は派手にしない） ---- */
/* cms-design B の rgba(...,0.5) は CMS の既存装飾と重ねると濃く見えるため 0.22 に下げる */
.rank-row .go,
.pservice .ctas .primary,
.float-cta .btn-cta,
.bottom-cta .cta-btn,
.form-actions .submit,
.side-cta .side-btn{
  background: var(--cta) !important;
  color: var(--cta-ink) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 3px 10px -6px rgba(35, 150, 168, 0.22) !important;
}
.rank-row .go:hover,
.pservice .ctas .primary:hover,
.bottom-cta .cta-btn:hover,
.form-actions .submit:hover,
.side-cta .side-btn:hover{
  background: #1A7A89 !important;
  color: var(--cta-ink) !important;
}

/* ---- 比較表のCTAボタン（.block-ranking-cta）: 影をアクセント色（CMS設定追従）に ---- */
a.block-ranking-cta,
.block-ranking-cta{
  box-shadow: 0 4px 14px -8px rgba(var(--accent-rgb), 0.35), inset 0 -2px 0 rgba(0, 0, 0, 0.10) !important;
}
a.block-ranking-cta:hover,
.block-ranking-cta:hover{
  box-shadow: 0 6px 18px -8px rgba(var(--accent-rgb), 0.45), inset 0 -2px 0 rgba(0, 0, 0, 0.10) !important;
}

/* ---- 商品紹介ブロック: A 用のリッチ装飾（グリーングラデ + 濃影）を B 風（ティール + 控えめ影）に ---- */
.block-product-service{
  /* blocks.css の 0 18px 40px -22px rgba(20,30,25,0.2) を控えめに */
  box-shadow: 0 1px 0 var(--soft), 0 6px 22px -16px rgba(20, 30, 40, 0.10) !important;
}
.block-product-svc-btn--official{
  background: var(--cta) !important;
  color: var(--cta-ink) !important;
  border-radius: var(--radius-md) !important;
  /* blocks.css の 0 8px 22px -8px rgba(34,153,95,0.6) を B のティール + 薄めに */
  box-shadow: 0 4px 14px -8px rgba(35, 150, 168, 0.35), inset 0 -2px 0 rgba(0, 0, 0, 0.08) !important;
}
.block-product-svc-btn--official:hover{
  background: #1A7A89 !important;
  color: var(--cta-ink) !important;
}

/* ---- ranking バッジ（ゴールド/シルバー/ブロンズ） ---- */
.rank-row:nth-of-type(2) .badge::after{
  background: linear-gradient(135deg, #E2C77A, var(--rank-1)) !important;
  color: #fff !important;
  box-shadow:
    0 3px 10px -4px rgba(200, 160, 74, 0.5),
    inset 0 -2px 0 rgba(0, 0, 0, 0.10) !important;
}
.rank-row:nth-of-type(3) .badge::after{
  background: linear-gradient(135deg, #D8D8D8, var(--rank-2)) !important;
  color: #fff !important;
  box-shadow:
    0 3px 10px -4px rgba(0, 0, 0, 0.25),
    inset 0 -2px 0 rgba(0, 0, 0, 0.10) !important;
}
.rank-row:nth-of-type(4) .badge::after{
  background: linear-gradient(135deg, #D4956B, var(--rank-3)) !important;
  color: #fff !important;
  box-shadow:
    0 3px 10px -4px rgba(178, 123, 74, 0.5),
    inset 0 -2px 0 rgba(0, 0, 0, 0.08) !important;
}

/* ---- イチ推しリボン（ティール） ---- */
.rank-row.top::before{
  content: "イチ推し" !important;
  background: var(--accent) !important;
  color: #fff !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
}

/* ---- 比較表アクティブタブ ---- */
.rank-tabs button.is-on{
  border-bottom-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* ---- ranking 全体 ---- */
.ranking{
  border-color: var(--line) !important;
  box-shadow:
    0 1px 0 rgba(35, 150, 168, 0.04),
    0 12px 32px -18px rgba(20, 30, 40, 0.18) !important;
}
.rank-row.top{
  background: linear-gradient(180deg, #FAFBFC 0%, #FFFFFF 70%) !important;
}

/* ---- リンク・選択 ---- */
a{ color: var(--accent); }
::selection{ background: var(--accent); color: #fff; }

/* ============================================================
   CMS の .block-ranking-* / .block-product-svc-rank / .side-list 上書き
   blocks.css / _layout.css に A の暖色金属系がハードコードされているため、
   各テーマで明示的に上書きしないとテーマ非追従
   ============================================================ */

/* ---- 比較表 1位行: 薄ティール背景 ---- */
.block-ranking-item[data-rank="1"]{
  background:
    radial-gradient(circle at 88% 12%, rgba(35, 150, 168, 0.05) 0, transparent 50%),
    var(--surface) !important;
}

/* ---- 比較表 1位「イチ推し」リボン: ティールに ---- */
.block-ranking-item[data-rank="1"]::before{
  content: "イチ推し" !important;
  background: var(--accent) !important;
  color: #fff !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  font-family: var(--font-display) !important;
}

/* ---- 比較表 ランキングバッジ: 1位金 / 2位銀 / 3位銅（単色・派手さ抑えめ）/ 4位以降 薄ティール ---- */
.block-ranking-item[data-rank="1"] .block-ranking-num{
  background: var(--rank-1) !important;
  color: #fff !important;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.08) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
}
.block-ranking-item[data-rank="2"] .block-ranking-num{
  background: var(--rank-2) !important;
  color: #fff !important;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.08) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
}
.block-ranking-item[data-rank="3"] .block-ranking-num{
  background: var(--rank-3) !important;
  color: #fff !important;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.08) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
}
/* 4位以降（順位 data-rank が 1/2/3 以外）: 薄ティール */
.block-ranking-item:not([data-rank="1"]):not([data-rank="2"]):not([data-rank="3"]) .block-ranking-num{
  background: var(--rank-other-bg) !important;
  color: var(--rank-other-fg) !important;
  box-shadow: none !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
}

/* ---- 比較表 アクティブタブ ---- */
.block-ranking-tab.is-active{
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
}

/* ---- 商品紹介ブロックの「おすすめNo1」リボン: 金/銀/銅（派手さ抑えめ単色） ---- */
.block-product-svc-rank[data-rank="1"]{
  background: var(--rank-1) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
}
.block-product-svc-rank[data-rank="2"]{
  background: var(--rank-2) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
}
.block-product-svc-rank[data-rank="3"]{
  background: var(--rank-3) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
}

/* ---- サイドバー人気記事ランキング: 1位金 / 2位銀 / 3位銅 ---- */
.side-list li:nth-child(1) .rank-num{
  background: var(--rank-1) !important;
  color: #fff !important;
}
.side-list li:nth-child(2) .rank-num{
  background: var(--rank-2) !important;
  color: #fff !important;
}
.side-list li:nth-child(3) .rank-num{
  background: var(--rank-3) !important;
  color: #fff !important;
}
.side-list li:nth-child(1) .rank{ color: var(--rank-1) !important; }
.side-list li:nth-child(2) .rank{ color: var(--rank-2) !important; }
.side-list li:nth-child(3) .rank{ color: var(--rank-3) !important; }