/**
 * localB2B.css — テーマE「ローカルB2B（Vernacular）」
 * 解体・建設・地域工務店・地域システム会社系
 * 白×鮮赤 #DA2128 × heavy gothic（Noto Sans JP / BIZ UDPGothic）× 完全角ばり × industrial
 *
 * 構成:
 *   1. 既存トークン（--c-*, --radius-*, --font-* など、article-body.css/blocks.css 参照用）
 *   2. cms-design E-localB2B 由来トークン（_layout/_top/_category/_lower/_404.css 用）
 *   3. テーマE固有の末尾上書き
 */

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

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

  /* 形状（完全角ばり） */
  --radius: 0;
  --radius-sm: 0;
  --radius-md: 2px;
  --radius-lg: 2px;

  /* 書体（E「Local B2B」: heavy gothic で締まり感・行間タイトめ — 既定値）
     管理画面の「タイポグラフィ」設定（colors.css）が値を持てばそちらが優先される */
  --font-heading: "Noto Sans JP", "BIZ UDPGothic", "Hiragino Sans", sans-serif;
  --font-body: "Noto Sans JP", "BIZ UDPGothic", "Hiragino Sans", sans-serif;
  --font-size-base: var(--c-font-size-base, 17px);
  --line-height: var(--c-line-height, 1.85);
  --letter-spacing: var(--c-letter-spacing, 0.03em);

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

  /* トランジション */
  --transition: 0.2s ease;
  --transition-slow: 0.35s ease;

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

  /* FAQブロック（E は完全角ばり） */
  --faq-q-badge-bg: var(--c-accent);
  --faq-q-badge-color: #fff;
  --faq-q-badge-radius: 0;
  --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 E-localB2B 由来トークン
     ============================================================ */
  --bg:           var(--c-bg, #FFFFFF);
  --surface:      var(--c-surface, #FFFFFF);
  --ink:          var(--c-text, #1A1A1A);
  --ink-2:        #444444;
  --muted:        var(--c-muted, #888888);
  --muted-2:      #BBBBBB;
  --line:         var(--c-border, #E5E5E5);
  --soft:         var(--c-highlight, #F4F4F4);
  --accent:       var(--c-accent, #DA2128);    /* 鮮やかな赤 — テーマの記憶色 */
  --accent-rgb:   218, 33, 40;
  --accent-2:     var(--c-accent-2, #B81C20);                      /* 濃赤（hover） */
  --cta:          var(--c-cta, var(--c-accent, #DA2128));
  --cta-ink:      #FFFFFF;
  --rank-1:       var(--c-rank-1, #DA2128);     /* 1位 = accent */
  --rank-2:       var(--c-rank-2, #1A1A1A);     /* 2位 = black */
  --rank-3:       var(--c-rank-3, #888888);     /* 3位 = mid-grey */
  --star-1:       #FFB300;                      /* 星評価（warm yellow） */
  --star-2:       #FFD66B;

  --font-sans:    "Noto Sans JP", "BIZ UDPGothic", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "Noto Sans JP", "BIZ UDPGothic", sans-serif;

  --max:          720px;

  --placeholder-1: #DDDDDD;
  --placeholder-2: #EEEEEE;

  --avatar-1:      #DDDDDD;
  --avatar-2:      #EEEEEE;
  --avatar-ink:    #1A1A1A;

  --lp-header-bg:  #F4F4F4;

  --hero-accent:        #F4F4F4;
  --hero-accent-rgb:    244, 244, 244;
  --hero-bg-fallback:   #1A1A1A;
  --hero-image:         none;
  --hero-overlay:       rgba(26, 26, 26, 0.55);
  --news-btn-hover:     #B81C20;

  /* vernacular 専用トークン（8px grid 規律） */
  --gap-section:   80px;
  --pad-card:      24px;
  --grid:          8px;
}

/* ============================================================
   3. テーマE固有の末尾上書き
   §7-4 単色塗りで終わらせない: 極微の grid texture で industrial 感
   ============================================================ */

/* ---- 微かなドット格子で industrial 感 ----
   注: 管理画面（body.admin-app）には適用しない */
body:not(.admin-app) {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(26, 26, 26, 0.05) 1px, transparent 0);
  background-size: 32px 32px;
  background-attachment: fixed;
}

/* ---- topbar ---- */
.topbar{
  background: rgba(255,255,255,0.97) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: 0 1px 0 rgba(26, 26, 26, 0.04);
}
/* brand-mark は赤い四角で seal/stamp 風 */
.topbar .brand-mark,
.drawer-head .brand-mark{
  border-radius: 0 !important;
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: none;
  font-weight: 900 !important;
}
.brand-text{
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
}
.topbar nav.cats a:hover{
  border-bottom-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* ---- progress bar: アクセント赤 ---- */
.progress > i{ background: var(--accent) !important; }

/* ---- footer: ほぼ純黒 industrial ----
   --c-footer-bg が管理画面で設定されていればそれを優先、空なら industrial 既定 */
footer.site{
  background: var(--c-footer-bg, #0F0F0F) !important;
}
footer.site .brand-mark{
  background: var(--accent) !important;
  color: #FFFFFF !important;
  border-radius: 0 !important;
  font-weight: 900 !important;
}

/* ---- CTA ボタン: ベタ赤 + 角張り（グラデなし） ---- */
.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-sm) !important;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.10),
    inset 0 -2px 0 rgba(0, 0, 0, 0.10) !important;
  letter-spacing: 0.06em !important;
  font-weight: 700 !important;
}
.rank-row .go:hover,
.pservice .ctas .primary:hover,
.bottom-cta .cta-btn:hover,
.form-actions .submit:hover,
.side-cta .side-btn:hover{
  background: var(--news-btn-hover) !important;
  color: var(--cta-ink) !important;
}

/* ---- secondary ボタン: 赤枠 ---- */
.rank-row .deep,
.pservice .ctas .secondary{
  border: 1px solid var(--accent) !important;
  color: var(--accent) !important;
  background: #fff !important;
  border-radius: var(--radius-sm) !important;
}
.rank-row .deep:hover,
.pservice .ctas .secondary:hover{
  background: var(--soft) !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: linear-gradient(180deg, var(--soft) 0%, #FFFFFF 70%) !important;
}

/* ---- 比較表 1位「イチ推し」リボン → 「No.1」赤角張り ---- */
.block-ranking-item[data-rank="1"]::before{
  content: "No.1" !important;
  background: var(--accent) !important;
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  border-radius: 0 !important;
}

/* ---- 比較表 ランキングバッジ: 1位赤 / 2位黒 / 3位グレー（単色・角ばり） ---- */
.block-ranking-item[data-rank="1"] .block-ranking-num{
  background: var(--rank-1) !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 2px 6px -2px rgba(218, 33, 40, 0.40) !important;
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
}
.block-ranking-item[data-rank="2"] .block-ranking-num{
  background: var(--rank-2) !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 2px 6px -2px rgba(26, 26, 26, 0.30) !important;
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
}
.block-ranking-item[data-rank="3"] .block-ranking-num{
  background: var(--rank-3) !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 2px 6px -2px rgba(136, 136, 136, 0.30) !important;
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
}

/* ---- 比較表 タブバー ---- */
.block-ranking-tab.is-active{
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
  background: #fff !important;
  font-weight: 700 !important;
}

/* ---- 星: 暖オレンジ単色 ---- */
.block-ranking-star{
  background: var(--star-1) !important;
}
.block-ranking-star.is-empty{ background: #E0E0E0 !important; }
.block-ranking-star.is-half{
  background: linear-gradient(90deg, var(--star-1) 50%, #E0E0E0 50%) !important;
}

/* ---- 比較表のCTAボタン ---- */
a.block-ranking-cta,
.block-ranking-cta{
  background: var(--cta) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.10),
    inset 0 -2px 0 rgba(0, 0, 0, 0.10) !important;
}
a.block-ranking-cta:hover,
.block-ranking-cta:hover{
  background: var(--news-btn-hover) !important;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.10),
    inset 0 -2px 0 rgba(0, 0, 0, 0.10) !important;
}

/* ---- 商品紹介ブロック: A の濃影 → 控えめ薄影 ---- */
.block-product-service{
  box-shadow: 0 1px 0 var(--soft), 0 4px 16px -10px rgba(26, 26, 26, 0.10) !important;
  border-radius: var(--radius-md) !important;
}
.block-product-svc-btn--official{
  background: var(--cta) !important;
  color: var(--cta-ink) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.10),
    inset 0 -2px 0 rgba(0, 0, 0, 0.10) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
}
.block-product-svc-btn--official:hover{
  background: var(--news-btn-hover) !important;
}

/* ---- 商品紹介ブロックの「おすすめNo1」リボン ---- */
.block-product-svc-rank[data-rank="1"]{
  background: var(--rank-1) !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 2px 6px -2px rgba(218, 33, 40, 0.40) !important;
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
}
.block-product-svc-rank[data-rank="2"]{
  background: var(--rank-2) !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 2px 6px -2px rgba(26, 26, 26, 0.30) !important;
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
}
.block-product-svc-rank[data-rank="3"]{
  background: var(--rank-3) !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 2px 6px -2px rgba(136, 136, 136, 0.30) !important;
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
}

/* ---- サイドバー人気記事ランキング: E 3色 ---- */
.side-list li:nth-child(1) .rank-num{
  background: var(--rank-1) !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
}
.side-list li:nth-child(2) .rank-num{
  background: var(--rank-2) !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
}
.side-list li:nth-child(3) .rank-num{
  background: var(--rank-3) !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !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; }

/* ============================================================
   E テーマ専用: callout 系（.block-box 系）を Pattern F 化
   cms-design E-localB2B _layout.css 501-531 行を CMS 構造に移植
   §6-3 例外手順: 既存 Pattern B（左ボーダー3px のみ・透明背景）を
   E 専用の「縦書き英語ラベル + 全周border + soft 背景」へ全面差し替え
   ============================================================ */

/* base: 全 .block-box 共通 — 全周 border + soft bg + 縦書きラベル分の左 padding */
.block-box{
  position: relative !important;
  border: 1px solid var(--line) !important;
  border-left: 1px solid var(--line) !important;        /* blocks.css の太い border-left を解除 */
  border-left-width: 1px !important;                    /* summary 系の 4px も解除 */
  background: var(--soft) !important;
  border-radius: var(--radius-md) !important;
  padding: 22px 24px 20px 64px !important;              /* 左 64px = ラベル(11px) + 罫(1px) + 余白 */
  margin: 22px 0 !important;
  overflow: visible !important;
}

/* example は blocks.css で border:none / box-shadow:none に弱められているため、再定義 */
.block-example{
  border: 1px solid var(--line) !important;
  border-left: 1px solid var(--line) !important;
  background: var(--soft) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  padding: 22px 24px 20px 64px !important;
}

/* type variants の border-left 太さ・色を 1px var(--line) に統一 */
.block-point,
.block-warning,
.block-merit,
.block-demerit,
.block-checklist,
.block-summary{
  border-left: 1px solid var(--line) !important;
  border-left-width: 1px !important;
  border-left-color: var(--line) !important;
}

/* 縦書き英語ラベル (::before) — 既定は POINT */
.block-box::before{
  content: "POINT";
  position: absolute;
  left: 20px;
  top: 22px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.20em;
  color: var(--muted);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  line-height: 1;
}

/* 細罫線 (::after) — ラベルと本文の区切り（左 48px の縦罫） */
.block-box::after{
  content: "";
  position: absolute;
  left: 48px;
  top: 22px;
  bottom: 22px;
  width: 1px;
  background: var(--line);
}

/* type variants — ラベルテキスト + 色（意味色は既存 _article.css の .ttl 色と整合） */
.block-warning::before   { content: "CAUTION";   color: #9A5C24; }
.block-merit::before     { content: "MERIT";     color: #1B7A52; }
.block-demerit::before   { content: "DEMERIT";   color: #7C3F43; }
.block-example::before   { content: "EXAMPLE";   color: var(--muted); }
.block-checklist::before { content: "CHECKLIST"; color: var(--ink); }
.block-summary::before   { content: "SUMMARY";   color: var(--ink); }

/* タイトル本体: padding-left の解除（block-example が padding-left:0 になっていた対策含む） */
.block-box-title{
  padding-left: 0 !important;
}