/*
Theme Name: Search Brand Media
Theme URI: https://rebranding.co.jp/media/
Author: Rebranding Inc.
Description: Vercel版「検索ブランド相談室」の静的HTMLを直接基準に、PC・モバイル双方の見た目を忠実にWordPress化した専用テーマ。
Version: 0.61.0
Text Domain: search-brand-media
*/

html { scroll-behavior: smooth; }
body { font-family: 'Noto Sans JP', sans-serif; }

/* Compact Brand Intro(旧・大型Hero)。PC/Mobile同一DOMをresponsive CSSのみで
   出し分ける。背景はtransparentとし、body(#F8FAFC)にそのまま馴染ませる。
   v0.91.0: Hero内の重複ブランドラベル削除に伴い、上部paddingも少し詰めて
   Main Copy全体を自然に引き上げる(ラベル削除分と合わせて概ね50px前後の短縮)。 */
.sb-brand-intro { padding-top: 20px; padding-bottom: 32px; }
@media (min-width: 1024px) {
  .sb-brand-intro { padding-top: 40px; padding-bottom: 40px; }
}

/* v0.91.0 TOP Contextual Header Reveal: TOPページ限定(sb-top-header-reveal、
   functions.phpのbody_classフィルタでis_front_page()の時のみ付与。WP core標準の
   body_class()はこのサイトでは'front-page'リテラルクラスを出力しないため、
   将来のWP core挙動変化に依存しない自前クラスを使う)。ページ最上部では
   既存Headerを完全に隠し(レイアウト上の空白を残さないよう position:fixed で
   浮かせる)、#main-pillars(6つの専門領域から探す)到達時に上からslide-inさせる。
   記事ページ・Pillarページ等その他全ページのHeaderは無変更(スコープ外)。 */
body.sb-top-header-reveal header {
  position: fixed;
  top: 0; left: 0; right: 0;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform .3s ease-out, opacity .3s ease-out;
}
html.sb-header-pre-reveal body.sb-top-header-reveal header,
body.sb-top-header-reveal.header-revealed header {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  body.sb-top-header-reveal header { transition: none; }
}
.sb-brand-intro-label {
  display: block;
  font-size: 13px; font-weight: 700; letter-spacing: .05em;
  color: #2563eb;
  margin-bottom: 18px;
}
.sb-brand-intro-h1 {
  /* v0.81.2: 大型Hero感をさらに弱め、6ピラーへの視線移動を早くするため
     PC上限を44pxまで縮小(clamp(34px,3.4vw,44px))。 */
  font-size: clamp(30px, 7vw, 40px);
  font-weight: 900;
  line-height: 1.22;
  color: #071938;
  letter-spacing: -.025em;
}
@media (min-width: 1024px) {
  .sb-brand-intro-h1 { font-size: clamp(34px, 3.4vw, 44px); }
}
.sb-brand-intro-lead {
  margin-top: 22px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  font-size: 13px;
  line-height: 1.75;
  color: #5f6b7a;
}
@media (min-width: 1024px) {
  .sb-brand-intro-lead { margin-top: 22px; font-size: 15px; line-height: 1.8; }
}

[data-mega-menu-panel] {
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
[data-mega-menu].is-open [data-mega-menu-panel] {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
[data-mega-menu-arrow] { display: inline-block; transition: transform .18s ease; }
[data-mega-menu].is-open [data-mega-menu-arrow] { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  [data-mega-menu-panel], [data-mega-menu-arrow] { transition: none; }
}
/* 「テーマ・学び方から探す」テーマ選択ボタン(人気の解決テーマ) */
.sb-theme-btn {
  position:relative;display:flex;align-items:center;gap:.75rem;width:100%;min-height:44px;
  padding:.625rem 1.25rem;border-radius:8px;text-align:left;
  background-color:#fff;border:1px solid #e5e7eb;color:#071938;font-weight:700;font-size:1rem;
  cursor:pointer;transition:all .15s ease;word-break:keep-all;overflow-wrap:break-word;
}
.sb-theme-btn:hover { border-color:#93c5fd;background-color:#f9fafb; }
.sb-theme-btn:focus-visible { outline:2px solid #1d4ed8;outline-offset:2px; }
/* 選択チェックはボタン枠の左外側に半分はみ出すバッジとして表示する */
.sb-theme-check {
  position:absolute;left:-10px;top:50%;transform:translateY(-50%);
  width:1.375rem;height:1.375rem;border-radius:9999px;background-color:#fff;
  color:#1d4ed8;opacity:0;transition:opacity .15s ease;
}
.sb-theme-check svg { width:100%;height:100%; }
.sb-theme-icon { width:1.375rem;height:1.375rem;flex:none;color:#9ca3af;transition:color .15s ease; }
.sb-theme-icon svg { width:100%;height:100%; }
.sb-theme-label { flex:1 1 auto; }
.sb-theme-chevron { width:1.125rem;height:1.125rem;flex:none;color:#9ca3af;transition:color .15s ease; }
.sb-theme-btn[aria-pressed="true"] { background-color:#eff6ff;border-color:#1d4ed8;color:#1d4ed8; }
.sb-theme-btn[aria-pressed="true"] .sb-theme-check { opacity:1; }
.sb-theme-btn[aria-pressed="true"] .sb-theme-icon,
.sb-theme-btn[aria-pressed="true"] .sb-theme-chevron { color:#1d4ed8; }

/* 「テーマ・学び方から探す」基礎/実践トグルスイッチ */
/* モバイルは独立した2つの角丸ボタンを縦積み、lg以上は1本のトラックの中をつまみがスライドするスイッチ型 */
.sb-level-track { display:flex;flex-direction:column;gap:.75rem; }
@media (min-width:1024px) {
  .sb-level-track {
    position:relative;flex-direction:row;gap:.375rem;padding:.375rem;
    background-color:#fff;border:1px solid #e5e7eb;border-radius:9999px;
  }
}
/* つまみ本体。基本は非表示(opacity:0)で、data-active属性が付いたときだけ該当側へスライド表示する */
.sb-level-knob {
  display:none;
}
@media (min-width:1024px) {
  .sb-level-knob {
    display:block;position:absolute;top:.375rem;bottom:.375rem;left:.375rem;
    width:calc(50% - .5625rem);border-radius:9999px;
    background-color:#eff6ff;border:1px solid #1d4ed8;
    opacity:0;transform:translateX(0);
    transition:transform .2s ease,opacity .2s ease;pointer-events:none;
  }
  .sb-level-track[data-active="basic"] .sb-level-knob { opacity:1;transform:translateX(0); }
  .sb-level-track[data-active="practical"] .sb-level-knob { opacity:1;transform:translateX(calc(100% + .375rem)); }
}
.sb-level-btn {
  position:relative;flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:.625rem;min-height:52px;
  padding:1rem 1.25rem;border-radius:9999px;
  background-color:#fff;border:1px solid #e5e7eb;color:#071938;font-weight:700;font-size:1.0625rem;
  cursor:pointer;transition:all .15s ease;
}
@media (min-width:1024px) {
  .sb-level-btn { min-height:84px;border-color:transparent;background-color:transparent; }
}
.sb-level-btn svg { width:1.375rem;height:1.375rem;flex:none; }
.sb-level-btn:hover { border-color:#93c5fd; }
.sb-level-btn:focus-visible { outline:2px solid #1d4ed8;outline-offset:2px; }
.sb-level-btn[aria-pressed="true"] { background-color:#eff6ff;border-color:#1d4ed8;color:#1d4ed8; }
@media (min-width:1024px) {
  /* デスクトップでは色付けはつまみ(.sb-level-knob)が担うため、ボタン自体の背景/枠は付けない */
  .sb-level-btn[aria-pressed="true"] { background-color:transparent;border-color:transparent;color:#1d4ed8; }
}

/* =====================================================================
   v0.83.0 TOP「テーマ・学び方から探す」Precision Interactive Finderへ再設計
   ---------------------------------------------------------------------
   旧v0.63.1のGlass/Gradient演出(32px radius・4層gradient背景・青み付き
   半透明border・多層box-shadow・Finder専用の孤立Blueパレット約10色)を
   廃止し、6 Pillars/Original Researchと同じ標準パレット
   (#071938/#2563eb/#1d4ed8/#eff6ff/#e5e7eb)とRule/Typography主体の
   Visual Languageへ統合した。data-filter/aria-pressed選択ロジック・
   REST件数取得・検索遷移(theme.js initFilter())・#filter-search-btnの
   id(initFloating()のIntersectionObserver対象でもある)は一切無変更。
   base(.sb-theme-btn/.sb-level-btn)の選択状態(#eff6ff背景+#1d4ed8枠)は
   既にv0.63.1以前から標準パレットで実装済みだったため、このスコープ内の
   上書きは新しい色や影を増やさず、旧Glass上書きを取り除いてbaseの実装を
   そのまま活かす方針にしている(同じSelected Stateの二重実装を避ける)。 */
.sb-topic-finder {
  position: relative;
  border-radius: 16px;
  background: #eff6ff;
  border: 1px solid #e5e7eb;
  box-shadow: none;
  overflow: hidden;
}
/* 内側は独自の枠・背景・影を持たない透明な余白コンテナのまま(二重外枠にしない) */
.sb-topic-finder-inner {
  position: relative;
  background: transparent;
  border: none;
  box-shadow: none;
}
.sb-topic-finder-divider {
  background: #e5e7eb;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.sb-topic-finder-footer { border-top: 1px solid #e5e7eb; }
/* 768px以上(.sb-level-leadが表示されたままの幅)でのみ、#filter-level-descの初期(未選択)
   文言を非表示にして.sb-level-leadとの重複を防ぐ。767.98px以下は.sb-level-lead自体が
   既存CSS(下の@media (max-width:767.98px)ブロック)で非表示のため対象外(常時表示のまま)。 */
@media (min-width: 768px) {
  #filter-level-desc.sb-level-desc-default { display: none; }
}

/* 左小見出し「人気の解決テーマ」を、Finder専用の孤立Blue(#1677FF)から標準Inkへ。
   v0.?.0でセマンティクス修正のため見出しタグ(h3)からFilter group labelとしての
   p(#theme-filter-label)へ変更したため、タグではなくidで対象を特定する。 */
.sb-topic-finder #theme-filter-label { color: #071938; }

/* P2 Accessibility: Finder内の説明文(text-gray-500, #eff6ff背景上で4.44:1=WCAG AA未達)を
   このスコープ内だけgray-600相当へ補正(6.94:1、AAを安全マージン込みで満たす)。
   Muted explanatory textという意図は維持し、サイト全体のtext-gray-500は変更しない。 */
.sb-topic-finder .text-gray-500 { color: #4b5563; }

/* 左: テーマ選択ボタン。色・枠・影はbaseの.sb-theme-btn実装をそのまま使う
   (ここでは何も上書きしない=Glass特有のrgba半透明・box-shadowを増やさない)。 */

/* 右: 基礎知識/実践。Desktop(1024px以上)はトラック内をスライドするknobが選択色を
   担うため、ボタン自体は透明のまま、選択時のみ文字/アイコンを白にしてknobの上で
   読めるようにする(構造はv0.63.1から変更なし、色のみGradient→単色Interactive Blue)。 */
@media (min-width: 1024px) {
  .sb-topic-finder .sb-level-knob {
    background: #1d4ed8;
    border: none;
    box-shadow: none;
  }
  .sb-topic-finder .sb-level-btn { background-color: transparent; }
  .sb-topic-finder .sb-level-btn[aria-pressed="true"] { background-color: transparent; border-color: transparent; color: #fff; }
}

/* CTA: この条件で探す。Conversion CTA(Header/CTA Banner=#071938)より強く
   見えすぎないよう、Finder内のActionとして単色#071938・影なしで統一する。 */
.sb-topic-finder-cta {
  background: #071938;
  box-shadow: none;
  font-weight: 700;
}
.sb-topic-finder-cta:hover:not(:disabled) { filter: brightness(1.15); }

/* Tablet(768-1023px)のみ余白を精密化し、約901pxの過剰heightを抑える。
   この幅ではTheme 6項目がmd:flex md:flex-colで1列縦積み表示になり(grid-cols-2
   なMobileとも3カラムなDesktop≥1024pxとも異なるレイアウト)、ボタン自体の
   積み重ねが高さの大半を占めるため、ここではタッチターゲット・可読性を
   維持できる範囲でPanel外側/内側のpaddingとグループ間gapだけを詰める
   (Layout構造・Theme/Level選択ロジックは無変更)。 */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .sb-topic-finder { padding: 8px; }
  .sb-topic-finder-inner { padding: 20px; }
  .sb-topic-finder-inner > .grid { gap: 28px; }
}

/* WordPress paginate_links(type=>'list') default markup is a bare <ul>/<li> list,
   which stacks vertically without this. Used by home.php and the dept/level/topic
   taxonomy archives and other post lists. */
.page-numbers {
  list-style:none; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.5rem; margin:0; padding:0;
}
.page-numbers li { display:inline-flex; }
.page-numbers a, .page-numbers span.page-numbers {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2.25rem; height:2.25rem; padding:0 .75rem; border-radius:9999px;
  border:1px solid #e5e7eb; color:#374151; font-size:.875rem; font-weight:600;
  text-decoration:none; transition:all .15s ease;
}
.page-numbers a:hover { border-color:#3b82f6; color:#1d4ed8; }
.page-numbers span.page-numbers.current { background-color:#071938; border-color:#071938; color:#fff; }
.page-numbers span.page-numbers.dots { border-color:transparent; color:#6b7280; }

/* Gutenberg article body: intentionally limited and predictable for future automation. */
.sb-article-content { color:#243247; font-size:1rem; line-height:1.95; }
.sb-article-content > *, .sb-article-content > :where(.sb-aio-intro) > * { margin-top:1.25rem; margin-bottom:1.25rem; }
.sb-article-content > p:first-child, .sb-article-content > :where(.sb-aio-intro) > p:first-child { font-size:1.08rem; line-height:2; color:#334155; margin-top:0; margin-bottom:2rem; }
.sb-article-content p + p { margin-top:.9rem; }
.sb-article-content h2 { color:#071938;font-size:1.65rem;font-weight:900;line-height:1.45;margin-top:3rem;padding-bottom:.65rem;border-bottom:2px solid #071938; }
.sb-article-content h3 { color:#071938;font-size:1.3rem;font-weight:800;line-height:1.5;margin-top:2.4rem; }
.sb-article-content h4 { color:#071938;font-size:1.1rem;font-weight:800;margin-top:2rem; }
.sb-article-content p, .sb-article-content li { overflow-wrap:anywhere; }
.sb-article-content ul { list-style:disc;padding-left:1.5rem; }
.sb-article-content li + li { margin-top:.45rem; }
.sb-article-content ol { list-style:decimal;padding-left:1.5rem; }
.sb-article-content a { color:#1d4ed8;text-decoration:underline;text-underline-offset:3px; }
.sb-article-content img { border-radius:1rem;max-width:100%;height:auto; }
.sb-article-content blockquote { border-left:4px solid #071938;background:#f8fafc;padding:1rem 1.25rem;color:#475569; }
.sb-article-content table { width:100%;border-collapse:collapse;display:block;overflow-x:auto; }
.sb-article-content th,.sb-article-content td { border:1px solid #e5e7eb;padding:.65rem .8rem;min-width:110px; }
.sb-article-content th { background:#f8fafc;color:#071938;font-weight:700; }


/* v0.6.0 article detail v1: readable measure + automatic TOC without changing Gutenberg content. */
.sb-article-inner { max-width: 760px; margin: 0 auto; }
.sb-article-featured { max-width: 760px; margin-left: auto; margin-right: auto; }
.sb-article-toc {
  margin: 0 0 2rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  background: #f8fafc;
  color: #071938;
}
.sb-article-toc-title { font-weight: 900; margin-bottom: .7rem; }
.sb-article-toc ul { margin: 0; padding-left: 0; list-style: none; }
.sb-article-toc li + li { margin-top: .45rem; }
.sb-article-toc li.is-h3 { margin-left: 1rem; font-size: .94rem; }
.sb-article-toc a { color: #334155; text-decoration: none; }
.sb-article-toc a:hover { color: #1d4ed8; text-decoration: underline; text-underline-offset: 3px; }
/* v0.84.0 目次デザイン改善: H2/H3の視覚階層と一覧性のみ調整。目次の生成ロジック・
   開閉ロジック・見出しテキスト・アンカーは一切変更しない。
   H2はfont-weightを強め、H3は既存のまま(相対的に軽く)することで階層差を明確化。
   項目間マージンは「H2セクションの区切り(広め)」と「同じH2配下のH3同士(狭め)」を
   区別し、情報量は変えずに一覧性だけを高める。 */
.sb-article-toc li:not(.is-h3) > a { font-weight: 700; }
.sb-article-toc li.is-h3 + li.is-h3 { margin-top: .3rem; }
.sb-article-toc li:not(.is-h3) + li.is-h3 { margin-top: .35rem; }
.sb-article-toc li.is-h3 + li:not(.is-h3),
.sb-article-toc li:not(.is-h3) + li:not(.is-h3) { margin-top: .85rem; }
/* v0.85.0 目次UI最終仕様: 開閉アコーディオン(v0.83.0)を廃止し、PC/Mobile共通で
   「初期一部表示+下部フェード+続きを見るで全文展開(一方向)」に統一する。
   目次の生成方式・対象h2/h3・見出しテキスト・アンカーは一切変更しない。
   閉じる操作は追加しないため、.sb-disclosure/initDisclosures()には依存せず、
   単純なmax-height clampとクリックで.is-expanded を付けるだけの専用実装にする。
   他のアコーディオン(「検索ブランドとは？」等)には一切影響しない。 */
.sb-article-toc-panel { position: relative; max-height: 12rem; overflow: hidden; }
.sb-article-toc-panel.is-expanded { max-height: none; overflow: visible; }
.sb-article-toc-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3.25rem;
  background: linear-gradient(to bottom, rgba(248, 250, 252, 0), #f8fafc 82%);
  pointer-events: none;
}
.sb-article-toc-panel.is-expanded .sb-article-toc-fade { display: none; }
.sb-article-toc-more {
  display: flex; align-items: center; justify-content: center; gap: .3rem;
  width: 100%; margin: .9rem 0 0; padding: .55rem 1rem;
  background: #fff; border: 1px solid #cbd5e1; border-radius: 9999px;
  color: #071938; font-weight: 700; font-size: .88rem; line-height: 1.4; cursor: pointer;
}
.sb-article-toc-more:hover { border-color: #93c5fd; background: #f0f7ff; }
.sb-article-toc-more:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.sb-article-toc-more[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .sb-article-toc-panel { transition: none; }
}
/* v0.85.0 目次ナンバリング(表示専用): CSS counterでH2=1,2,3...、H3=親H2番号を継承した
   1-1,1-2...をリンクの前に付加する。DOM上のリンクテキスト・href・見出し本文は無変更。 */
#sb-article-toc-list { counter-reset: sb-toc-h2; }
.sb-article-toc li:not(.is-h3) { counter-increment: sb-toc-h2; counter-reset: sb-toc-h3; }
.sb-article-toc li.is-h3 { counter-increment: sb-toc-h3; }
.sb-article-toc li:not(.is-h3) > a::before {
  content: counter(sb-toc-h2) " | "; margin-right: .15em; color: #1d4ed8; font-weight: 900;
}
.sb-article-toc li.is-h3 > a::before {
  content: counter(sb-toc-h2) "-" counter(sb-toc-h3) " | "; margin-right: .15em; color: #64748b; font-weight: 700;
}
.sb-article-content h2, .sb-article-content h3 { scroll-margin-top: 7rem; }
.sb-article-content .wp-block-image { margin-top: 2rem; margin-bottom: 2rem; }
.sb-article-content .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sb-article-content .wp-block-table table { min-width: 620px; }
/* v0.87.0 「参考文献・データ元」等の見た目アコーディオン化。search-brand-core.php側の
   the_contentフィルタ(sbc_reference_section_disclosure)がH2の直後(H2自体は無変更・
   無ラップ)に、案内文(.sb-reference-disclosure-hint)と常時可視のテキストボタン
   (.sb-reference-disclosure-toggle、「参考情報を見る＋」/「参考情報を閉じる−」)を
   追加する。閉じていても見出し・案内文・ボタンが常に見えるため、参考情報の存在が
   一目で分かる。本文(.sb-reference-disclosure-body、既存の参考情報をそのまま包んだ
   もの)はCSSのmax-height/visibilityで開閉するだけで常にDOMに存在させる。
   他の.sb-disclosure/目次アコーディオンとは独立したscopeで、他UIには影響しない。 */
.sb-reference-disclosure { margin: 1rem 0 0; }
.sb-reference-disclosure-hint { margin: 0 0 .75rem; color: #64748b; font-size: .88rem; }
.sb-reference-disclosure-toggle {
  display: flex; align-items: center; justify-content: center; gap: .3rem;
  width: 100%; margin: 0; padding: .55rem 1rem;
  background: #fff; border: 1px solid #cbd5e1; border-radius: 9999px;
  color: #071938; font-weight: 700; font-size: .88rem; line-height: 1.4; cursor: pointer;
}
.sb-reference-disclosure-toggle:hover { border-color: #93c5fd; background: #f0f7ff; }
.sb-reference-disclosure-toggle:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.sb-reference-disclosure-body {
  margin-top: 0; max-height: 0; overflow: hidden; visibility: hidden;
  background: #f8fafc; border: 1px solid #e5e7eb; border-radius: .9rem;
  color: #475569; font-size: .92rem; line-height: 1.85;
  transition: max-height .28s ease;
}
.sb-reference-disclosure-body.is-open { margin-top: .85rem; max-height: 4000px; visibility: visible; padding: 1.1rem 1.25rem; }
.sb-reference-disclosure-body a { color: #1d4ed8; word-break: break-word; overflow-wrap: anywhere; }
.sb-reference-disclosure-body > *:first-child { margin-top: 0; }
.sb-reference-disclosure-body > *:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .sb-reference-disclosure-body { transition: none; }
}
@media (max-width: 767.98px) {
  .sb-article-content { font-size: .98rem; line-height: 1.9; }
  .sb-article-content > p:first-child { font-size: 1rem; line-height: 1.95; margin-bottom: 1.6rem; }
  .sb-article-content h2 { font-size: 1.45rem; margin-top: 2.5rem; }
  .sb-article-content h3 { font-size: 1.18rem; margin-top: 2rem; }
  .sb-article-toc { padding: 1rem 1.05rem; }
  .sb-reference-disclosure-hint { font-size: .85rem; }
  .sb-reference-disclosure-body.is-open { padding: .95rem 1rem; font-size: .89rem; }
}


/* v0.7.0 article detail v2: mobile-first reading comfort. */
.sb-single-head { background:#fff; border-bottom:1px solid #f1f5f9; }
.sb-single-head-inner { max-width:1080px; margin:0 auto; }
.sb-single-main { max-width:1080px; margin:0 auto; }
.sb-single-card { background:#fff; }
.sb-article-content figure { margin-left:0; margin-right:0; }
.sb-article-content figcaption { margin-top:.65rem; color:#64748b; font-size:.82rem; line-height:1.65; text-align:center; }
.sb-article-content .wp-block-image img { display:block; width:auto; max-width:100%; margin-left:auto; margin-right:auto; }
.sb-article-content .wp-block-table { width:100%; max-width:100%; margin-top:1.7rem; margin-bottom:1.7rem; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.sb-article-content .wp-block-table table { display:table; width:100%; min-width:620px; }

@media (max-width: 767.98px) {
  .sb-single-head-inner { padding:1.35rem 1.25rem 1.5rem; }
  .sb-single-head .sb-breadcrumb { margin-bottom:.75rem; font-size:.72rem; }
  .sb-single-head h1 { font-size:1.5rem !important; line-height:1.45 !important; letter-spacing:-.015em; }
  .sb-single-head .sb-post-meta { margin-top:.85rem; font-size:.75rem; }
  .sb-single-main { padding:1.15rem 0 0; }
  .sb-single-card { border:0 !important; border-radius:0 !important; box-shadow:none !important; padding:0 1.25rem !important; }
  .sb-article-featured { margin:0 0 1.5rem; border-radius:.8rem !important; }
  .sb-article-inner { max-width:none; }
  .sb-article-toc { margin:0 0 1.6rem; padding:1rem 1rem 1.05rem; border-radius:.8rem; }
  .sb-article-toc-title { font-size:1rem; }
  .sb-article-toc ul { font-size:.9rem; line-height:1.7; }
  .sb-article-toc-panel { max-height: 10.5rem; }
  .sb-article-content { font-size:1rem; line-height:1.9; color:#172033; }
  .sb-article-content > *, .sb-article-content > :where(.sb-aio-intro) > * { margin-top:1.05rem; margin-bottom:1.05rem; }
  .sb-article-content > p:first-child, .sb-article-content > :where(.sb-aio-intro) > p:first-child { font-size:1.02rem; line-height:1.95; color:#26354a; margin-bottom:1.75rem; }
  .sb-article-content p + p { margin-top:.8rem; }
  .sb-article-content h2 { font-size:1.42rem; line-height:1.45; margin-top:2.65rem; margin-bottom:1.15rem; padding-bottom:.55rem; border-bottom:2px solid #071938; }
  .sb-article-content h3 { font-size:1.18rem; line-height:1.5; margin-top:2.15rem; margin-bottom:.9rem; }
  .sb-article-content h4 { font-size:1.05rem; line-height:1.55; margin-top:1.8rem; }
  .sb-article-content ul, .sb-article-content ol { padding-left:1.35rem; }
  .sb-article-content li { line-height:1.8; }
  .sb-article-content .wp-block-image { margin-top:1.6rem; margin-bottom:1.6rem; }
  .sb-article-content .wp-block-image img { width:100%; height:auto; border-radius:.8rem; }
  .sb-article-content .wp-block-table { margin-left:-.15rem; margin-right:-.15rem; width:calc(100% + .3rem); }
  .sb-article-content .wp-block-table table { min-width:640px; font-size:.9rem; }
  .sb-article-content th, .sb-article-content td { padding:.65rem .7rem; min-width:120px; vertical-align:top; }
  .sb-related-section, .sb-single-cta { margin-left:1.25rem; margin-right:1.25rem; }
  .sb-single-cta { margin-top:2rem !important; }
}


/* v0.7.1: mobile tables keep readable column widths and scroll horizontally. */
@media (max-width: 767.98px) {
  .sb-article-content figure.wp-block-table {
    display:block;
    width:calc(100% + .5rem);
    max-width:none;
    margin-left:-.25rem;
    margin-right:-.25rem;
    padding:0 .25rem .35rem;
    overflow-x:auto !important;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }
  .sb-article-content figure.wp-block-table table,
  .sb-article-content .wp-block-table table {
    display:table !important;
    width:max-content !important;
    min-width:720px !important;
    max-width:none !important;
    table-layout:auto !important;
    font-size:.92rem;
  }
  .sb-article-content figure.wp-block-table th,
  .sb-article-content figure.wp-block-table td,
  .sb-article-content .wp-block-table th,
  .sb-article-content .wp-block-table td {
    min-width:150px;
    width:auto !important;
    white-space:normal;
    word-break:normal;
    overflow-wrap:break-word;
    padding:.7rem .8rem;
  }
  .sb-article-content figure.wp-block-table th:first-child,
  .sb-article-content figure.wp-block-table td:first-child {
    min-width:165px;
  }
}


/* v0.8.3: deterministic Japanese phrase wrapping for titles/headings.
   Post data stays plain text. JavaScript adds display-only phrase spans so
   separators such as ｜ and compounds using ・ do not dangle at line ends. */
.sb-smart-phrase-wrap,
.sb-single-head h1,
.sb-article-content h2,
.sb-article-content h3,
.sb-article-content h4,
.sb-related-section a .text-sm.font-bold {
  word-break: auto-phrase;
  overflow-wrap: normal;
  line-break: strict;
  text-wrap: pretty;
}
/* Fallback spans are only injected when auto-phrase is unavailable. */
.sb-smart-phrase-wrap .sb-phrase {
  display: inline;
  white-space: nowrap;
}
.sb-smart-phrase-wrap .sb-long-token {
  overflow-wrap: anywhere;
  white-space: normal;
}
/* v0.65.1: initSmartJapaneseWrap()(theme.js)は対応状況に関わらず常に.sb-phrase
   spanを注入するため、word-break:auto-phraseに対応したブラウザでは、ネイティブの
   phrase改行とJS注入spanのnowrapが二重に働く。通常は問題にならないが、句読点の
   無い長い複合語(例:「──」で連結された2つの名詞句)ではspan間に改行機会が
   見つからず、Mobile幅でページ全体が数px横スクロールする実例を確認した
   (sns-part-time-job-scandal記事のH3、390/375/360pxで実測)。
   spanの外側の改行だけをMobileで許可する(spanの中身にはスペースが無いため、
   overflow-wrap:normalのまま単語内部が破壊されることはない。フレーズ単位を
   保つという意図は維持したまま、フレーズ同士の間で折り返せるようにするだけ)。 */
@media (max-width: 767.98px) {
  .sb-smart-phrase-wrap .sb-phrase { white-space: normal; }
}
/* Tables keep normal cell wrapping; mobile tables scroll horizontally. */
.sb-article-content th,
.sb-article-content td {
  line-break: strict;
  word-break: normal;
  overflow-wrap: break-word;
}

/* v0.8.3: the full-width vertical bar is a semantic title delimiter.
   Keep it in WordPress data, but do not paint it on the front end; use it as
   a clean break opportunity so it cannot hang at the beginning/end of a line. */
.sb-smart-phrase-wrap .sb-semantic-separator {
  display:inline-block;
  width:0;
  height:0;
  overflow:hidden;
  font-size:0;
  line-height:0;
}


/* v0.8.4: article title must never overflow on narrow screens.
   Keep the WordPress title as plain text. The front end only adds break
   opportunities after ・ and at ｜, with no nowrap phrase spans. */
.sb-single-head h1 {
  max-width: 100%;
  min-width: 0;
  word-break: normal;
  overflow-wrap: anywhere;
  line-break: strict;
  text-wrap: pretty;
  white-space: normal;
}
@supports (word-break: auto-phrase) {
  .sb-single-head h1 { word-break: auto-phrase; }
}
@media (max-width: 1023px) {
  .sb-single-head h1 {
    font-size: 1.28rem;
    line-height: 1.42;
    letter-spacing: 0;
  }
}

/* v0.9.0: article data is fully driven by WordPress post data. */
.sb-classification-grid { display:flex; flex-wrap:wrap; gap:.5rem .75rem; }
.sb-classification-item { display:flex; align-items:center; gap:.45rem; font-size:.78rem; }
.sb-classification-item dt { font-weight:800; color:#071938; }
.sb-classification-item dd { margin:0; color:#475569; background:#f8fafc; border:1px solid #e2e8f0; border-radius:9999px; padding:.2rem .65rem; }
@media (max-width: 639px) {
  .sb-classification-grid { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
  .sb-classification-item { align-items:flex-start; flex-direction:column; gap:.2rem; }
  .sb-classification-item dd { width:100%; border-radius:.6rem; }
}

/* v0.15.0: 支援実績（PDF準拠の事例フォーマット）。
   ご相談の背景・ご支援内容・実施施策・成果・今後の取り組みは、標準Gutenbergブロック
   （columns/list）+ classNameで再現するため、その表示だけをここで定義する。
   事例サマリー・ご担当者様の声はテンプレート側（single-achievement.php）が
   構造化フィールドから直接HTMLを組み立てるので、それぞれ専用クラスを用意する。 */
.sb-case-tag {
  display:inline-block; font-size:.75rem; font-weight:700; color:#1d4ed8;
  background:#eff6ff; border:1px solid #bfdbfe; border-radius:9999px;
  padding:.3rem .9rem; margin-bottom:1rem;
}

/* v0.17.0: 事例サマリー〜今後の取り組みまでを1つの白い箱（.sb-case-article、
   single-achievement.phpの.sb-single-cardが兼ねる）に統合。各セクションは
   区切り線（border-top）で仕切り、見出しは大きい下線見出しではなく
   コンパクトな「絵文字アイコン＋短いラベル」に変更してPDFの見た目に近づける。 */
.sb-case-summary {
  display:grid; grid-template-columns:1fr; gap:1.5rem;
  padding-bottom:2rem; margin-bottom:2rem; border-bottom:1px solid #e5e7eb;
}
@media (min-width:768px) { .sb-case-summary { grid-template-columns:1.1fr 1fr; } }
.sb-case-summary-logo { max-height:40px; width:auto; margin-bottom:1rem; }
.sb-case-summary-name { font-size:1.15rem; font-weight:800; color:#071938; margin-bottom:.75rem; }
.sb-case-summary-catchcopy { font-size:1.3rem; font-weight:900; color:#071938; line-height:1.55; }
.sb-case-summary-facts {
  display:grid; grid-template-columns:1fr; gap:.9rem; align-content:start;
  background:#f8fafc; border:1px solid #e5e7eb; border-radius:.75rem; padding:1.1rem 1.25rem;
}
.sb-case-summary-fact { display:flex; gap:.5rem; }
.sb-case-summary-fact dt { flex-shrink:0; font-size:.72rem; font-weight:700; color:#6b7280; width:5.5em; margin:0; }
.sb-case-summary-fact dd { font-size:.85rem; color:#071938; margin:0; white-space:pre-line; }

/* 見出しはこの中限定でコンパクト化（通常記事の.sb-article-content h2は変更しない） */
.sb-case-article .sb-article-content h2 {
  font-size:1.25rem; font-weight:800; color:#071938;
  border-bottom:none; border-top:1px solid #e5e7eb;
  padding-top:2rem; padding-bottom:0; margin-top:2.5rem;
}
.sb-case-article .sb-article-content > h2:first-child { border-top:none; padding-top:0; margin-top:0; }
/* 上のh2コンパクト化に対応するh3ルールが無く、基本スタイル(1.3rem)のままH2より
   大きく表示されてしまっていたため追加。通常記事のh2:h3比(1.65rem:1.3rem≈0.79)に
   合わせてH2(1.25rem)よりひとまわり小さいサイズにしている。 */
.sb-case-article .sb-article-content h3 {
  font-size:1rem; font-weight:800; color:#071938; margin-top:2rem;
}

.sb-case-cards.wp-block-columns { gap:1.25rem; margin-top:1.5rem !important; margin-bottom:2rem !important; flex-wrap:wrap; }
.sb-case-card.wp-block-column { flex:1 1 220px; background:#fff; border:1px solid #e5e7eb; border-radius:1rem; padding:1.5rem; }
.sb-case-card-icon {
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:9999px; background:#eff6ff; border:1px solid #dbeafe;
  font-size:1.2rem; line-height:1; margin:0 0 .9rem !important;
}
.sb-case-card h4 { margin-top:0 !important; margin-bottom:.5rem !important; }
.sb-case-card p:not(.sb-case-card-icon) { font-size:.875rem; color:#4b5563; line-height:1.7; margin:0 !important; }

.sb-case-checklist.wp-block-list {
  list-style:none; margin:1.5rem 0 2rem; padding:0;
  display:grid; grid-template-columns:1fr; gap:.75rem;
}
@media (min-width:768px) { .sb-case-checklist.wp-block-list { grid-template-columns:1fr 1fr; column-gap:2rem; } }
.sb-case-checklist li { position:relative; padding-left:1.75rem; font-size:.9375rem; color:#374151; margin:0 !important; }
.sb-case-checklist li::before { content:"✓"; position:absolute; left:0; top:0; color:#0d9488; font-weight:700; }

.sb-case-stats.wp-block-columns { gap:1.25rem; margin-top:1.5rem !important; margin-bottom:2rem !important; flex-wrap:wrap; }
.sb-case-stat.wp-block-column { flex:1 1 180px; text-align:center; }
.sb-case-stat-label { font-size:.8rem; color:#6b7280; margin:0 0 .5rem !important; }
.sb-case-stat-value { font-size:2.1rem; font-weight:900; color:#0d9488; margin:0 0 .375rem !important; line-height:1.1; border-bottom:none !important; padding-bottom:0 !important; }
.sb-case-stat-note { font-size:.75rem; color:#9ca3af; margin:0 !important; }

.sb-case-voice {
  display:flex; flex-direction:column; gap:1rem;
  padding-top:2rem; margin-top:2.5rem; border-top:1px solid #e5e7eb;
}
@media (min-width:640px) { .sb-case-voice { flex-direction:row; align-items:flex-start; } }
.sb-case-voice-photo { width:88px; height:88px; border-radius:9999px; object-fit:cover; flex-shrink:0; }
.sb-case-voice-name { font-weight:800; color:#071938; }
.sb-case-voice-position { font-size:.8125rem; color:#6b7280; margin-bottom:.75rem; }
.sb-case-voice-comment { font-size:.9375rem; color:#374151; line-height:1.8; }

@media (max-width: 639px) {
  .sb-case-summary-catchcopy { font-size:1.1rem; }
  .sb-case-stat-value { font-size:1.6rem; }
}

/* v0.9.1: pillar page (P01 AIO / P02-P06) intro is a couple of short paragraphs,
   not a long-form article, so it keeps a tighter vertical rhythm than
   .sb-article-content's default (通常記事の見出し間隔は変更しない). */
.sb-pillar-content > p, .sb-pillar-content > :where(.sb-aio-intro) > p { margin-bottom: 0; }
.sb-pillar-content h2 { margin-top: 0.25rem; }
.sb-pillar-content > p:first-child, .sb-pillar-content > :where(.sb-aio-intro) > p:first-child { font-size: 0.9rem; line-height: 1.7; margin-bottom: 0.5rem; }
.sb-pillar-content h2 { font-size: 1.05rem; }
/* AIOページのみ、the_content()をアコーディオン用ラッパー(.sb-aio-intro)で包むため、
   直下の子要素扱いだった上記ルールが素通りしないよう対象を拡張している。
   :where(.sb-aio-intro)を使い、ラッパーぶんの詳細度を増やさないようにしている
   (単純に.sb-aio-intro > *のようにクラスを1つ増やすと、詳細度が
   .sb-article-content h2/h3等(クラス1+要素1)より高くなってしまい、
   本来もっと詳細度の低いはずの汎用marginルールがh2/h3側のmargin-topを
   意図せず上書きしてしまう不具合が実際に発生したため、:where()で
   詳細度をラッパー追加前と完全に同一に保っている)。
   .sb-aio-intro自体は.sb-article-content > *にも一致してしまうため、
   二重の余白が付かないよう自身の上下marginは明示的に0へ戻す
   (実際の余白は内包する各段落側のルールでこれまでどおり制御する)。 */
.sb-pillar-content > .sb-aio-intro { margin-top: 0; margin-bottom: 0; }

/* 記事本文カード内の「テーマ別に探す」ジャンプリンク。sb-article-content側の
   ul(list-style:disc)・a(underline)のデフォルトを、より詳細度の高いこちらで上書きする
   (Tailwind CDNの読み込みタイミングに依存しないようにするため)。PC2列グリッド化に伴い、
   行間はグリッドのgap-yに任せるため縦marginは持たせない。
   v0.78.0: 単体class(0,1,0)は.sb-article-content ul(0,1,1)より詳細度が低く
   実際には上書きできていなかった(旧テキストリンク一覧では目立たなかったが、
   カードUI化で余白外に孤立したbulletとして視認できてしまう不具合)。
   .sb-article-content を前置して詳細度(0,2,0)を確保し、コメントが元々意図していた
   「より詳細度の高いこちらで上書きする」を実際に成立させる。 */
.sb-article-content .sb-pillar-theme-nav { list-style:none; padding-left:0; }
.sb-pillar-theme-nav a { color:#1d4ed8; font-weight:700; text-decoration:none; }
.sb-pillar-theme-nav a:hover { color:#1e40af; text-decoration:underline; }
.sb-pillar-theme-nav a.sb-pillar-nav-card,
.sb-pillar-theme-nav a.sb-pillar-nav-card:hover { text-decoration:none; }


/* =====================================================================
   v0.28.0 スマートフォンTOPページ UI/UX最適化
   ---------------------------------------------------------------------
   方針: PC(1024px〜)とタブレット(768〜1023px)の見た目は変更せず、
   スマートフォン(〜767px)だけ表示方法を最適化する。
   PC用HTML/スマホ用HTMLの二重生成は行わず、同一DOMをmedia queryで
   切り替える(重要コンテンツ・見出し・内部リンクはPCと完全に同一)。
   横スワイプ(独自調査・検証)だけは、640〜767pxで既存の
   sm:grid-cols-2(2列グリッド)を維持するため 〜639.98px に限定する。
   ===================================================================== */

/* 「検索ブランドとは？」アコーディオン(§18-§23)。
   本文は初期HTMLに全文存在し、CSSで表示量だけを制御する。
   段落間マージンは従来のspace-y-4(16px)と同値なのでPC表示は不変。 */
.sb-about-body p { margin-bottom: 1rem; }
.sb-about-body p:last-child { margin-bottom: 0; }
.sb-disclosure-close { display: none; }
.sb-disclosure[aria-expanded="true"] .sb-disclosure-open { display: none; }
.sb-disclosure[aria-expanded="true"] .sb-disclosure-close { display: inline; }
.sb-disclosure-arrow { width: 1rem; height: 1rem; flex: none; transition: transform .2s ease; }
.sb-disclosure[aria-expanded="true"] .sb-disclosure-arrow { transform: rotate(180deg); }

/* =====================================================================
   v0.84.0 「立場から探す」Role-led Visual Navigationへ調整
   ---------------------------------------------------------------------
   対象: template-parts/dept-cards.php内の.sb-dept-card(DOM構造・Role順序・
   primary_audience_id優先+dept taxonomy fallbackの記事取得ロジックは
   無変更、CSSのみでの実装)。768-1023px(Tablet)で.sb-hswipe配下が
   中間breakpoint欠落によりTailwindのgrid-cols-1のまま適用され続け、
   4枚のdept-cardが全幅縦積みになっていた問題(実測768px=2742px〜
   1023px=3316px)を、#dept-articlesスコープのみでgrid-template-columns
   を上書きして解消する。.sb-hswipe自体の共通ルール(taxonomy-dept.php等、
   他9ファイルで共有)は一切変更していない。
   Role Head(icon+EN label+JP sub)に専用classが無いため、EN label/
   JP subの強調は.sb-dept-head配下の子要素位置(2番目のdiv=Role情報
   ラッパー、その1番目の子=EN label、2番目の子=JP sub)で指定している
   (dept-cards.php側の構造自体は変更していない)。 */
.sb-dept-card {
  border-radius: 12px;
  box-shadow: none;
}
.sb-dept-card:hover {
  box-shadow: none;
  border-color: #e5e7eb;
}
.sb-dept-thumb { border-radius: 8px; }
.sb-dept-thumb img { transition: transform .2s ease-out; }
.sb-dept-card h3 { transition: color .2s ease-out; }
@media (hover: hover) and (pointer: fine) {
  .sb-dept-card:hover .sb-dept-thumb img { transform: scale(1.01); }
  .sb-dept-card:hover h3 { color: #1d4ed8; }
}
.sb-dept-card:focus-visible {
  outline: 2px solid rgba(37, 99, 235, .5);
  outline-offset: 2px;
}

/* Role Identity(EN label/JP sub)を記事情報より先に認識できるよう強調。
   Mobile/Tabletは16px、Desktopは17pxへ段階調整。 */
.sb-dept-head > div:last-child > div:first-child {
  font-size: 16px;
  font-weight: 800;
}
.sb-dept-head > div:last-child > div:last-child {
  color: #6b7280;
}
@media (min-width: 1024px) {
  .sb-dept-head > div:last-child > div:first-child { font-size: 17px; }
}

/* Tablet(768-1023px): 2列×2段。.sb-hswipe本体のbaseルールは変更せず、
   #dept-articlesスコープのみでgrid-template-columnsを上書きする
   (768px未満はこのmedia query対象外、1024px以上は後続のlg:grid-cols-4
   がそのまま優先される)。
   実装後の実測で、dept-cards.php側のh3が元々 line-clamp-1 + h-[1.4em]
   (lg:line-clamp-2 + lg:h-[2.8em]はlg=1024px以上のみ適用)という
   Tablet帯では2行目が省略記号なしに物理的に切り落とされる状態だった
   ことが判明した(scrollHeight>clientHeightで実測確認)。これは今回の
   2列化以前から768-1023px帯に存在していた潜在不具合で、1列全幅表示
   だった旧レイアウトでは1行に収まりやすく顕在化していなかった。
   既存のMobile専用(max-width:767.98px)の2行対応ルールと同じ考え方を
   Tabletにも適用し、切り落としを解消する(font-sizeはTailwindのtext-sm
   =14pxのまま変更しない、line-clamp/heightのみ対応)。 */
@media (min-width: 768px) and (max-width: 1023.98px) {
  #dept-articles .sb-hswipe {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
  .sb-dept-card h3 {
    height: auto;
    max-height: none;
    -webkit-line-clamp: 2;
  }
}

@media (max-width: 767.98px) {
  /* --- §9 テーマ6項目: 横長1列 → 2列×3段のコンパクトボタン --- */
  /* 2列化で1ボタンの横幅が狭くなるため、word-break:keep-all(PC用)のままだと
     「採用ブランディング」等の長いタグ名が折り返せず文字切れになる。
     スマホでは折り返しを許可し、対応ブラウザでは文節単位(auto-phrase)で改行する。 */
  .sb-theme-btn {
    gap: .5rem; min-height: 52px; padding: .5rem .625rem .5rem .75rem;
    border-radius: 8px; font-size: .875rem; line-height: 1.3;
    word-break: normal; overflow-wrap: anywhere;
  }
  @supports (word-break: auto-phrase) {
    .sb-theme-btn { word-break: auto-phrase; }
  }
  /* PC版では上下2箇所に同じ説明文を置くデザインだが、スマホでは重複が
     スクロール量だけ増やすため、選択に応じて変化する下側(#filter-level-desc)のみ残す。 */
  .sb-level-lead { display: none; }
  .sb-theme-icon { width: 1.125rem; height: 1.125rem; order: 1; }
  .sb-theme-label { order: 2; }
  .sb-theme-chevron { display: none; }
  /* 選択チェックはボタン枠の外へはみ出すと2列グリッドで隣のボタンに重なるため、
     スマホではボタン内側の右上バッジにする(aria-pressed連動・意味はPCと同一)。 */
  .sb-theme-check { left: auto; right: .3125rem; top: .3125rem; transform: none; width: 1rem; height: 1rem; }

  /* --- §10 基礎知識/実践: 縦積み → 2分割セグメント --- */
  .sb-level-track { flex-direction: row; gap: .5rem; }
  .sb-level-btn { min-height: 52px; padding: .75rem .5rem; font-size: .9375rem; gap: .375rem; }
  .sb-level-btn svg { width: 1.125rem; height: 1.125rem; }

  /* =====================================================================
     v0.29.0 横スワイプカードのデザインシステム（スマホ共通規格）
     「独自調査・検証」「立場から探す」「6つの専門領域」の3セクションで
     カード幅・間隔・余白・文字サイズ・角丸・スワイプ感を統一する。
     カード高さはflexのstretchで行内均一になるため、高さを固定して
     中身を隠す実装は行わない（これが従来の見切れの原因だったため）。
     ===================================================================== */
  .sb-hswipe > * { padding: 1rem; display: flex; flex-direction: column; }
  .sb-hswipe h3 { font-size: .9375rem; line-height: 1.55; margin-bottom: .5rem; }
  .sb-hswipe > * > p { font-size: .8125rem; line-height: 1.7; }

  /* --- 立場から探す: 高さ固定(h-[1.4em])による記事タイトルの見切れを解消 ---
     PC用の h-[1.4em] + line-clamp-1 は、タイトルが2行に達すると2行目が
     そのまま切り落とされ、日本語グリフの下端も欠けていた。
     スマホでは高さ指定を外し、「独自調査・検証」と同じ2行＋省略記号へ揃える。 */
  .sb-dept-card h3 {
    height: auto; max-height: none; -webkit-line-clamp: 2;
    font-size: .9375rem; line-height: 1.55; margin-bottom: .625rem;
  }
  .sb-dept-head { margin-bottom: .75rem; }
  .sb-dept-head > div:first-child { width: 2.25rem; height: 2.25rem; }
  .sb-dept-head > div:first-child svg { width: 1.25rem; height: 1.25rem; }
  .sb-dept-thumb { margin-bottom: .75rem; }
  .sb-dept-badge { align-self: flex-start; margin-bottom: .5rem; }
  .sb-dept-tags { margin-bottom: .5rem; }
  .sb-dept-date { margin-bottom: .75rem; text-align: left; }
  .sb-dept-more { margin-top: auto; align-self: flex-start; }

  /* --- 独自調査・検証 --- */
  .sb-research-card > p { font-size: .75rem; line-height: 1.65; }

  /* --- §18-§23 「検索ブランドとは？」アコーディオン(スマホのみ) ---
     初期レンダリング時点から折りたたまれた見た目になるためCLSは発生しない。 */
  .sb-collapse { max-height: 0; overflow: hidden; visibility: hidden; transition: max-height .28s ease; }
  .sb-collapse.is-open { max-height: 3000px; visibility: visible; }
  .sb-disclosure {
    display: inline-flex; align-items: center; gap: .375rem;
    margin-top: 1rem; min-height: 44px; padding: .625rem 1.125rem;
    border: 1px solid #cbd5e1; border-radius: 9999px; background: #f8fafc;
    color: #071938; font-size: .875rem; font-weight: 700; cursor: pointer;
  }
  .sb-disclosure:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
}

@media (max-width: 767.98px) {
  /* --- 横スワイプの共通レール ---
     CSSネイティブのスクロールのみで実装し、スライダーライブラリは追加しない。
     コンテナ幅いっぱいに1枚だけ見える状態を避けるため、カード幅は
     ビューポートの82%（上限340px）とし、次カードを意図的に覗かせる。 */
  .sb-hswipe {
    display: flex; gap: .75rem;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-left: -1.5rem; margin-right: -1.5rem;
    padding: .25rem 1.5rem .75rem;
    scroll-padding-left: 1.5rem;
  }
  .sb-hswipe::-webkit-scrollbar { display: none; }
  .sb-hswipe > * { flex: 0 0 min(82%, 340px); scroll-snap-align: start; }
}

@media (max-width: 639.98px) {
  /* 親コンテナのpaddingがpx-4(16px)になる幅では、はみ出し量もそれに合わせる */
  .sb-hswipe {
    margin-left: -1rem; margin-right: -1rem;
    padding-left: 1rem; padding-right: 1rem;
    scroll-padding-left: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sb-collapse, .sb-disclosure-arrow { transition: none; }
}


/* =====================================================================
   v0.30.0 全ページ横断 スマートフォンUI/UX最適化
   ---------------------------------------------------------------------
   TOPページ(v0.28.0/v0.29.0)で確立したデザインシステム(横スワイプ
   カード .sb-hswipe、タップ領域、アコーディオン等)を、TOPから遷移する
   主要な下層ページ横断で一貫させる。PC(1024px〜)・タブレット
   (768〜1023px)のクラス・レイアウトは変更しない。DOM二重生成はせず、
   既存テンプレートへのクラス付与とCSSのみで対応する。
   ===================================================================== */

@media (max-width: 767.98px) {
  /* --- 記事一覧カード(template-parts/article-card.php)を .sb-hswipe に
     載せる場合の専用調整。抜粋(70語)をそのまま出すとカードが縦に伸びて
     隣のカードと高さが揃わなくなるため、他のスワイプカードと同じく
     2行＋省略記号に丸める(本文はDOMから削除しない、表示行数の制御のみ)。 */
  .sb-hswipe .sb-card-excerpt {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden; margin-bottom: .625rem;
  }
  .sb-hswipe .sb-card-date { margin-bottom: .625rem; }

  /* --- 記事一覧カードの「記事を読む›」「事例を読む›」タップ領域 ---
     文字の行送りのみ(実測20px)でタップ領域が44pxを下回っていたため、
     スマホのみ縦方向のパディングでヒット領域を確保する
     (見た目のテキスト位置・文言・リンク先は変更しない)。 */
  .sb-card-cta { min-height: 44px; padding: .5rem 0; margin-top: auto; }

  /* =====================================================================
     全記事一覧・独自調査一覧・支援実績一覧・テーマ/レベル別一覧など、
     ページネーションを伴う「網羅的なリスト」向けの横型コンパクトカード。
     横スワイプにはしない(全件を比較・スキャンする一覧であり、
     独自調査・検証のような少数の厳選プレビューとは性質が異なるため)。
     立場から探す(.sb-dept-card)と同じ「画像を左列に固定し、右列へ
     テキストを流し込む」CSS Gridの手法を再利用し、デザインの一貫性を保つ。
     ===================================================================== */
  .sb-card-list { display: flex; flex-direction: column; gap: .75rem; }
  .sb-article-card {
    display: grid; grid-template-columns: 34% 1fr; column-gap: .75rem;
    align-items: start; padding: .75rem;
  }
  .sb-article-card > * { grid-column: 2; min-width: 0; }
  .sb-card-thumb {
    /* grid-row:1/-1 は、明示配置された最初の子要素の時点ではまだ暗黙の行が
       生成されておらず1行分にしか広がらないため、.sb-dept-card と同じく
       十分大きいspan数を明示して縦方向いっぱいに伸ばす。
       v0.63.0 画像見切れ修正: taxonomy-level.php/taxonomy-topic.phpは
       article-card.phpの共通パーツを使わず同等のマークアップを個別複製して
       おり、サムネイルに(共通パーツのaspect-videoではなく)固定高さのh-44を
       付けたままだった。この列は本レイアウトでgrid-column:1により34%幅へ
       縮むが、高さはh-44で176px固定のままのため、横幅だけ縮んで縦横比が
       崩れ、object-fit:coverで画像の大部分(特に左右)が失われていた
       (align-self:stretchやgrid-row spanは高さの直接原因ではない。h-44が
       明示的な高さである以上、そちらが優先されるため)。
       ここではh-44を実サムネイル比率(16:9、他コンポーネントのaspect-video
       と同一)のaspect-ratioに揃え、align-self:stretch→startとmin-height
       88px→0で.sb-hswipe修正と同じ扱いにし、幅に応じて高さが追従する
       一定のcrop量にする(横型グリッドのレイアウト自体・カード幅・ページ
       対象は無変更。h-44→aspect-videoへのクラス置換は該当2ファイル側で
       別途実施)。 */
    grid-column: 1; grid-row: 1 / span 12; align-self: start;
    aspect-ratio: 16 / 9; min-height: 0; margin-bottom: 0;
  }
  .sb-article-card h2, .sb-article-card h3 {
    font-size: .9375rem; line-height: 1.5; margin-bottom: .375rem;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  }
  .sb-card-excerpt {
    font-size: .75rem; line-height: 1.6; margin-bottom: .5rem;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  }
  .sb-card-date { margin-bottom: .5rem; text-align: left; font-size: .6875rem; }
  .sb-card-cta { font-size: .75rem; }
  .sb-article-card .flex-wrap { margin-bottom: .375rem; }
  .sb-article-card .flex-wrap span { font-size: .625rem; padding: .05rem .5rem; }

  /* --- お問い合わせ・資料請求フォーム: タップ領域を44px前後まで拡張 ---
     入力欄はPC/スマホ共通のTailwindユーティリティ(py-2.5)で実測42pxと
     わずかに足りなかったため、スマホのみ縦paddingを1段階広げる。 */
  #contact-form input:not([type="checkbox"]),
  #contact-form select,
  #download-form input:not([type="checkbox"]),
  #download-form select {
    padding-top: .75rem; padding-bottom: .75rem;
  }

  /* --- サイト全体の「もっと見る」「すべて見る」「トップページに戻る」等の
     補助的なテキストリンクのタップ領域 ---
     「記事を読む›」と同じ理由(行送りのみで実測20px)で全ページ共通に
     発生していたため、ボタン化されている実装(rounded-full等の既存パディング
     を持つCTA)は対象から除き、テキストリンクだけを対象にmin-height/paddingで
     ヒット領域を確保する(文言・リンク先・見た目の詰まり方は変えない)。 */
  a.inline-flex.items-center:not([class*="rounded-full"]):not(.sb-card-cta) {
    min-height: 44px; padding-top: .375rem; padding-bottom: .375rem;
  }
}

/* =====================================================================
   /media/articles/（全記事一覧）専用: サムネイル見切れ修正。
   上の .sb-card-thumb 共通ルールは aspect-ratio:auto + 縦方向の
   grid-row:1/span 12 stretch により、隣接テキスト量に応じて画像コンテナの
   高さが変動し、object-fit:coverでのクロップ量が記事ごとに不安定になっていた
   （テキストが短い記事ほど画像が大きく見切れる）。dept/level/topicアーカイブ等
   他の .sb-card-list 共有ページには影響させず、本ページの一覧wrapperにのみ
   付与した専用クラス(.sb-articles-archive-list)で固定aspect-ratioに変更する。
   v0.44.0: それでも本番で見切れが残ったため再修正。object-fit:coverは
   コンテナ比率と元画像比率が一致しない限り必ずどこかをクロップする仕様のため、
   「枠を埋める」より「画像全体を見せる」ことを優先し、このページの
   サムネイルに限りobject-fit:containへ変更する(はみ出た余白はbg-gray-100の
   既存背景で自然に埋まる)。Desktop/Mobile共通、他ページのカード画像
   (dept/level/topicアーカイブ・TOP・shorts等)は従来通りcoverのまま。
   ===================================================================== */
.sb-articles-archive-list .sb-card-thumb img {
  object-fit: contain;
}
@media (max-width: 767.98px) {
  .sb-articles-archive-list .sb-card-thumb {
    grid-row: 1;
    align-self: start;
    aspect-ratio: 4 / 3;
    min-height: 0;
  }
}



/* =====================================================================
   v0.31.0 6ピラーページ デスクトップUI改善（PC限定／スマホ・タブレットHARD LOCK）
   ---------------------------------------------------------------------
   対象: template-parts/pillar-cluster.php・pillar-theme-nav.php
   （AIO/SEO/MEO/口コミ・風評対策/採用改善/集客改善の6ページが共有する
   共通テンプレートのため、ここを直せば6ページ全てに反映される）。
   全てのルールを @media (min-width:1024px) に閉じ込め、
   768px以下（スマホ・タブレット）の見た目・挙動を一切変更しない。
   ===================================================================== */
@media (min-width: 1024px) {
  /* --- 改善①②: 「○○で最重要論点まとめ」見出しの視覚的強調 ---
     このh2は the_content() の直後、.sb-pillar-content 内に出力されるため、
     既存の .sb-pillar-content h2{font-size:1.05rem}（記事導入文中に見出しが
     現れた場合向けの控えめな縮小指定）を継承し、見出しとしての存在感が
     弱くなっていた。h2.sb-pillar-nav-heading と要素+クラスの2点で指定し、
     同じ詳細度(0,1,1)の後勝ちで.sb-pillar-content h2を上書きする
     （.sb-pillar-content内の他のh2・スマホ/タブレット表示には影響しない）。
     v0.42.0: 左の青いアクセントバー(border-left)を装飾として撤去。
     バーのために確保していたpadding-leftも、不要な右ずれとして残らないよう
     同時に撤去した(見出しの文言・タグ・階層・文字サイズ・文字色・font-weight・
     margin-top/bottomは無変更)。 */
  h2.sb-pillar-nav-heading {
    font-size: 1.25rem;
    line-height: 1.4;
    margin-top: 2rem;
    margin-bottom: 1rem;
  }

  /* --- 改善③: 6つの重要論点リンクの整列 ---
     原因: Gutenberg本文向けの汎用ルール .sb-article-content li + li
     { margin-top:.45rem } が、記事本文の外にあるこのCSS Grid(2カラム)にも
     継承されていた。li:first-childにはこのmargin-topが付かないため、
     1行目の左(1番目のli)だけ margin-top:0、右(2番目のli)は7.2pxという
     非対称な状態になり、「左右の行の開始位置が揃わない」原因になっていた。
     ここでは、このナビゲーション内のliにだけ margin-topを打ち消し、
     CSS Grid本来の行揃え（同じ行のセルは行の上端で揃う）を復元する。
     文章量による高さの差はそのまま許容し、固定heightは使わない。 */
  .sb-pillar-theme-nav li + li { margin-top: 0; }
  .sb-pillar-theme-nav { row-gap: .75rem; }

  /* --- 改善⑤⑥: 「新着記事」および各論点＋3記事の区切りを明確化 ---
     新着記事の見出しにだけ区切り線が無く、論点見出しとデザインが
     不揃いだったため、共通クラスで同じアクセント（左ボーダー＋下線）に統一する。
     新着記事だけ別デザインにしない、囲み過ぎない、という指示に沿い、
     装飾は既存のborder-gray-100と同系統の細い罫線＋既存アクセントカラーの
     左ボーダーのみに留める。 */
  .sb-pillar-group-heading {
    padding-left: .75rem;
    border-left: 3px solid #1d4ed8;
    padding-bottom: .5rem;
    border-bottom: 1px solid #e5e7eb;
  }
}


/* =====================================================================
   v0.32.0 AIOピラーページ＋マーケティング担当者向け記事一覧
   スマートフォンUI改善（PC/タブレットはHARD LOCK）
   ---------------------------------------------------------------------
   対象: page-aio.php（「AIOとは」アコーディオン化）、
   template-parts/pillar-theme-nav.php（6論点リンクの間隔）、
   template-parts/pillar-cluster.php（新着記事・各論点記事群の横スワイプ化）、
   taxonomy-dept.php経由のtemplate-parts/article-card.php（画像見切れ修正）。
   全て @media (max-width:767.98px) に閉じ込め、768px以上（タブレット・PC）
   の見た目・挙動を一切変更しない。
   ===================================================================== */
@media (max-width: 767.98px) {
  /* --- AIO「AIOとは」アコーディオン ---
     本文はpage-aio.php側で常にHTMLに全文出力されており(削除・外部取得なし)、
     ここでは表示量だけを.sb-collapse(既存の汎用折りたたみ機構)で制御する。
     ボタンの見た目は既存の.sb-disclosureをそのまま使い、初期位置(margin-top:1rem、
     本文の後に置く前提のスペーシング)だけAIOページ用に上書きする。 */
  .sb-aio-intro-toggle {
    display: flex; width: 100%; justify-content: space-between;
    margin-top: 0; margin-bottom: .75rem;
  }

  /* --- 「AIOで最重要論点まとめ」6テーマの間隔調整 ---
     従来はGrid本来のgap-y-1(4px)に加え、記事本文向け汎用ルール
     .sb-article-content li + li{margin-top:.45rem}が二重に効いており、
     窮屈というより間隔の付き方が冗長だった。v0.31.0のPC版(min-width:1024px)
     と同じ「li側のmargin-topは打ち消し、row-gapのみで間隔を持たせる」手法を
     スマホ用の値で適用し、余白の付き方を一本化しつつ少しだけ詰める
     (アンカー#pillar-l2-*・リンク先・文言は無変更)。 */
  .sb-pillar-theme-nav li + li { margin-top: 0; }
  .sb-pillar-theme-nav { row-gap: .5rem; }
  .sb-pillar-theme-nav a { padding-top: .375rem; padding-bottom: .375rem; }

  /* --- AIOページ「新着記事」「各論点＋3記事」を横スワイプ化 ---
     template-parts/pillar-cluster.php側で対象のgridに.sb-hswipeクラスを
     追加済み。カード幅・gap・スナップ挙動は既存の.sb-hswipe共通ルールを
     そのまま流用するため、ここでの追加CSSは不要（pillar-mini-card.phpの
     画像・タイトルは既存のaspect-video/line-clamp-2のままで問題なく収まる）。 */

  /* --- マーケティング担当者ページ等、.sb-hswipe内article-cardの画像見切れ修正 ---
     原因: v0.30.0で追加した「網羅的リスト」向けの横型グリッドカードCSS
     (.sb-article-card{display:grid;grid-template-columns:34% 1fr;...}、
     .sb-card-thumb{aspect-ratio:auto;min-height:88px;...})が、対象を
     .sb-card-listだけに絞っておらず、.sb-hswipe(横スワイプ)配下の
     article-card(TOPの新着記事・立場から探すページの新着記事/各ピラー記事群等)
     にも同じ詳細度・後勝ちで適用されていた。結果、横スワイプの縦型カード内で
     画像が34%幅(≒100px前後)・aspect-ratio:auto・min-height:88pxの
     縦長に近い箱へ押し込められ、object-coverで左右が大きく切り取られていた
     (これが画像見切れの実際の原因。固定height自体・カード幅・overflow設定・
     media query自体に誤りはなく、2つの異なるカード規格が同じクラス名に
     衝突していたことが原因)。
     ここでは.sb-hswipe配下のarticle-cardだけを対象に、横型グリッドを解除し
     .sb-hswipe > *(既存の縦積みflexレイアウト)へ戻し、画像を元のaspect-video
     相当(16:9)のフル幅表示に戻す。.sb-card-listページ側のカード(全記事一覧等)
     は対象外のため無変更。 */
  .sb-hswipe .sb-article-card { display: flex; flex-direction: column; }
  .sb-hswipe .sb-card-thumb {
    grid-column: auto; grid-row: auto;
    aspect-ratio: 16 / 9; min-height: 0; margin-bottom: .75rem;
  }
}


/* =====================================================================
   v0.44.0 独自調査・検証ページ スマートフォン記事カード画像見切れ修正
   （対象: page-original-content.php、.sb-original-research-list配下のみ。
   PC/タブレット・他の.sb-card-list使用ページはHARD LOCK）
   ---------------------------------------------------------------------
   原因: v0.30.0で追加した「網羅的なリスト」向け横型グリッドカードCSS
   (.sb-card-list{display:flex;flex-direction:column}／.sb-article-card
   {display:grid;grid-template-columns:34% 1fr;...}／.sb-card-thumb
   {grid-column:1;grid-row:1/span 12;align-self:stretch;aspect-ratio:auto;
   min-height:88px})は、その導入コメント自体に「独自調査・検証のような
   少数の厳選プレビューとは性質が異なる」と明記されているとおり本来
   original-research向けではなかったが、page-original-content.php側の
   カード一覧が同じ.sb-card-listクラスを使っているため、意図せずこの
   コンパクト横型カードへ巻き込まれていた。画像(.sb-card-thumb)は34%幅の
   列でalign-self:stretchによりグリッド行いっぱいに引き伸ばされる一方、
   img自体は元のTailwind class(w-full h-full object-cover)のままのため、
   高さが右列のテキスト量に応じて不安定になり、object-coverによる
   大きなトリミング（見切れ）が発生していた。
   ここでは.sb-original-research-list配下だけを対象に、記事カードを
   article-card.phpのベースクラス(flex flex-col)どおりの縦積みへ戻し、
   画像をグリッド配置から解放してheight:autoで元画像比率のまま全体表示
   させる(object-fit:containで歪み・トリミングなし。overflow-hidden・
   rounded-lg・bg-gray-100は既存のまま維持し、新しい色・枠線は追加
   していない)。バッジ・タイトル・抜粋・日付・「記事を読む」の
   font-size/line-clamp等、画像以外の文字まわりのスタイルはv0.30.0のまま
   変更していない。他の.sb-card-list使用ページ(全記事一覧・支援実績一覧・
   テーマ/レベル別一覧)はこの新規クラスを持たないため無影響。
   ===================================================================== */
@media (max-width: 767.98px) {
  .sb-original-research-list .sb-article-card {
    display: flex;
    flex-direction: column;
  }
  .sb-original-research-list .sb-card-thumb {
    grid-column: auto;
    grid-row: auto;
    align-self: auto;
    aspect-ratio: auto;
    min-height: 0;
    margin-bottom: .75rem;
  }
  .sb-original-research-list .sb-card-thumb img {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }
}


/* =====================================================================
   v0.34.0 6ピラーページ スマホUI改善（PC HARD LOCK）
   ---------------------------------------------------------------------
   対象: page-seo.php/page-meo.php/page-reputation.php/page-recruiting.php/
   page-owned-media.php（AIOページ(v0.32.0)と同じ「○○とは」アコーディオンへ統一。
   markup・CSSの仕組み自体はv0.32.0で追加済みの.sb-aio-intro/.sb-collapse/
   .sb-disclosureをそのまま再利用するため、本ブロックでの追加CSSは不要）、
   template-parts/pillar-cluster.php（新着記事・各L2論点グループを
   「見出し+記事群」ひとつの面として視覚的にグループ化）。
   全て @media (max-width:767.98px) に閉じ込め、768px以上（タブレット・PC）
   の見た目・挙動を一切変更しない。「最重要論点まとめ」(pillar-theme-nav.php)
   自体には触れていない。
   ===================================================================== */
@media (max-width: 767.98px) {
  /* --- 新着記事・各重要論点の記事群のグループ化 ---
     デスクトップ版(v0.31.0)は「見出しの左ボーダー+下線」という線による区切りで
     解決したが、スマホは横スワイプでカードが画面端まで見切れるため、線だけでは
     どこまでが1グループか伝わりにくい。デスクトップ版の縮小移植は禁止されているため、
     ここでは記事本文の目次(.sb-article-toc)と同じ既存の「薄い背景+細い罫線+角丸」の
     情報ボックス表現(bg:#f8fafc/border:#e5e7eb/radius:1rem)を転用し、
     「見出し+横スワイプ行」をひとつの面としてまとめる。新しい配色・装飾は追加していない。
     左右paddingは.sb-hswipeの負のmarginと同じ値(1.5rem/1rem)に揃えており、
     横スワイプの記事カードはこのグループ面の内側の辺まで(ビューポート端ではなく)
     届く形になる。見出し自体のタグ・文言・階層は変更していない。 */
  .sb-pillar-group {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    padding: 1rem 1.5rem 1.25rem;
  }
}

@media (max-width: 639.98px) {
  .sb-pillar-group { padding-left: 1rem; padding-right: 1rem; }
}


/* =====================================================================
   v0.35.0 6ピラーページ＋4立場別ページ 記事群カルーセル化（PC/タブレット追加）
   ---------------------------------------------------------------------
   対象: template-parts/pillar-cluster.php・taxonomy-dept.phpの記事群のみ。
   既存の.sb-hswipe自体はTOPページ・home.php・page-level-guide.php・single.php等
   サイト横断で共有されているクラスのため、その挙動(モバイル横スワイプ)は
   一切変更していない。新規クラス.sb-carousel/.sb-carousel-track/
   .sb-carousel-arrowを併記した要素だけ、768px以上でも横スクロール操作を
   追加する(対象10ページ以外への影響なし)。カードは常に全件DOM上に存在し、
   このCSS/JSは表示位置の移動のみを担当する。
   ===================================================================== */
.sb-carousel { position: relative; }

@media (min-width: 768px) {
  /* gapはpillar-cluster.php(gap-5 lg:gap-6)とtaxonomy-dept.php(gap-6 lg:gap-8)とで
     Tailwindのクラス値が異なる。flex-basisの引き算がその実際のgapと食い違うと
     数px〜十数pxの端数オーバーフローが生じ、3件でぴったり収まるはずの行でも
     矢印が誤って表示されてしまう不具合が実機描画で見つかったため、gap自体を
     ここで統一の値に上書きし、flex-basisの計算式と必ず一致させている
     (既存の余白からのズレは1px単位で、視覚上ほぼ差が無い範囲)。 */
  .sb-carousel-track {
    display: flex; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    scrollbar-width: none; scroll-behavior: smooth;
    gap: 1.5rem;
  }
  .sb-carousel-track::-webkit-scrollbar { display: none; }
  .sb-carousel-track > * {
    scroll-snap-align: start; min-width: 0;
    flex: 0 0 calc(50% - .75rem);
  }
}
@media (min-width: 1024px) {
  .sb-carousel-track { gap: 2rem; }
  .sb-carousel-track > * { flex: 0 0 calc(33.333% - 1.3334rem); }
}

/* 矢印は「続きがある」ときだけ表示する(指示書■5「矢印UIを過剰に目立たせない」)。
   JS側がスクロール可能な量(overflow)を検知した場合のみ.sb-carousel-has-overflow
   を付与する。JS無効時は要素自体は存在するが常に非表示のままになり、
   ネイティブのトラックパッド/マウスホイールの横スクロールで操作できる。 */
.sb-carousel-arrow { display: none; }
@media (min-width: 768px) {
  .sb-carousel.sb-carousel-has-overflow .sb-carousel-arrow {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 2.25rem; height: 2.25rem; border-radius: 9999px;
    background: #fff; border: 1px solid #e5e7eb; box-shadow: 0 1px 4px rgba(15, 23, 42, .12);
    color: #071938; cursor: pointer; z-index: 2; padding: 0;
  }
  .sb-carousel-arrow svg { width: 1.125rem; height: 1.125rem; }
  .sb-carousel-prev { left: .5rem; }
  .sb-carousel-next { right: .5rem; }
  .sb-carousel-arrow:hover { border-color: #93c5fd; color: #1d4ed8; }
  .sb-carousel-arrow:disabled { opacity: .35; cursor: default; pointer-events: none; }
  .sb-carousel-arrow:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
}

/* =====================================================================
   v0.36.0 6ピラー＋4立場別＋人気テーマ×レベル 共通カルーセル・デザイン統一
   ＋6ピラー説明ブロックのFAQ直前移動
   ---------------------------------------------------------------------
   対象: taxonomy-dept.php（立場×ピラーの記事取得上限3件を撤廃）、
   home.php（「テーマ・学び方から探す」の複数テーマ×レベル絞り込み結果を
   テーマ×レベルの組み合わせごとにグループ化して表示）、
   template-parts/pillar-cluster.php（「○○について」説明ブロックをFAQ直前へ
   追加）、page-aio.php等6ピラーページ（同ブロックをh1直下から撤去）。
   いずれもv0.35.0で追加済みの.sb-carousel/.sb-carousel-track/
   .sb-carousel-arrow、および記事本文向け.sb-article-content/
   .sb-pillar-content/.sb-collapse/.sb-disclosureの各既存CSSをそのまま
   再利用しており、本バージョンで新規に追加したCSSルールは無い
   (指示書■7「固定値を無意味に新設しない」「既存class・spacingが安全に
   利用できる場合は優先する」に沿った対応)。 */

/* =====================================================================
   v0.40.0 4立場ページ不要CTA削除＋全ページ「ページ上部へ戻る」ボタン追加
   ---------------------------------------------------------------------
   対象: taxonomy-dept.php（下部「○○の記事をすべて見る›」CTAをDOMごと削除。
   CSS側の変更なし）、footer.php・assets/js/theme.js（全ページ共通の
   「ページ上部へ戻る」フローティングボタンを新規追加）。
   ===================================================================== */
.sb-back-to-top {
  position: fixed;
  right: 1.25rem;
  /* 全ページ共通のフローティングCTA(#floating-mobile-cta、bottom-5=1.25rem/right-5)
     と全画面幅で重ならないよう、その高さぶん(実測約2.75rem+隙間)高い位置に置く。 */
  bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .12);
  color: #071938;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s, bottom .2s ease;
}
.sb-back-to-top svg { width: 1.25rem; height: 1.25rem; }
.sb-back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.sb-back-to-top:hover { border-color: #93c5fd; color: #1d4ed8; }
.sb-back-to-top:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .sb-back-to-top { transition: none; }
}

/* =====================================================================
   v0.41.0 4立場ページ ファーストビュー見出し・説明文統一修正
   ---------------------------------------------------------------------
   対象: taxonomy-dept.php（4立場ページ共通テンプレート）のh1直下の説明文のみ。
   6ピラー正式名称（特に内部に「・」を含む「口コミ・風評対策」）の途中で
   改行されないよう、各名称をwhitespace-nowrap(Tailwind既存ユーティリティ)で
   個別に包んでいるため、名称同士の間の「・」だけでは折り返せないケースに備え、
   それ以外の部分(「の」「対策情報をまとめています。」等)がPCまで不要に
   強制改行されないよう、最小限のword-break調整のみ追加する。
   ===================================================================== */
.sb-dept-lead {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* =====================================================================
   v0.46.0 contactページ 問い合わせ種別カード選択化
   ---------------------------------------------------------------------
   対象: page-contact.php の3枚の「お問い合わせ種別」カード(.sb-inquiry-card)
   のみ。従来は非機能の装飾カードだったが、カード全体をlabel化しradio input
   (.sb-inquiry-card-input、視覚上は既存のTailwind sr-onlyで非表示、
   キーボード操作・スクリーンリーダーには引き続き認識される)を内包させ、
   選択状態を:has()で表現する。.sb-inquiry-card はcontactページにしか
   存在しないクラス名のため、`input[type="radio"] + label` のような
   サイト全体へ波及する広いselectorは使用していない。
   ===================================================================== */
.sb-inquiry-card:has(.sb-inquiry-card-input:checked) {
  border-color: #1d4ed8;
  background-color: #eff6ff;
}
.sb-inquiry-card:has(.sb-inquiry-card-input:checked) .sb-inquiry-card-title {
  color: #1d4ed8;
}
.sb-inquiry-card:has(.sb-inquiry-card-input:focus-visible) {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}

/* =====================================================================
   v0.54.0「動画から探す」(TOP新規セクション＋新規ページ /media/shorts/)
   ---------------------------------------------------------------------
   対象: front-page.php #shorts-videos・page-shorts.php・
   template-parts/shorts-card.php・template-parts/shorts-modal.phpのみ。
   専用namespace(.sv-*)だけを使用し、.card/.title/.section/.container/
   img/a/button等の汎用セレクタは直接上書きしない(指示書■30 CSSスコープ
   HARD LOCK)。カルーセルの左右ナビ・スクロール判定は既存の
   .sb-carousel/.sb-carousel-track/.sb-carousel-arrow(v0.35.0)と
   initCarousels()をそのまま流用し(指示書■29)、ここでは動画専用の
   カード幅・9:16サムネイル領域・再生モーダルのみを追加する。
   9:16サムネイルはaspect-[9/16](Tailwind、page-shorts.php等で使用)+
   object-fit:contain(HTML側)で実現しており、CSS側での変形・crop相当の
   指定は一切行っていない(指示書■22〜■24 サムネイルHARD LOCK)。
   ===================================================================== */

/* --- カルーセル: 動画専用のカード幅だけを上書き(既存.sb-carousel-track/
   .sb-hswipeの挙動そのものは無変更。スマホは65〜72vw・上限260〜280px程度、
   タブレットは2列、PCは4列を目安にする、指示書■25〜■28)。 --- */
@media (max-width: 767.98px) {
  .sv-carousel-track.sb-hswipe > * { flex: 0 0 clamp(210px, 68vw, 280px); }
}
@media (min-width: 768px) {
  .sv-carousel-track.sb-carousel-track { gap: 1.25rem; }
  .sv-carousel-track.sb-carousel-track > * { flex: 0 0 calc(50% - .625rem); }
}
@media (min-width: 1024px) {
  .sv-carousel-track.sb-carousel-track { gap: 1.5rem; }
  .sv-carousel-track.sb-carousel-track > * { flex: 0 0 calc(25% - 1.125rem); }
}

/* --- カード --- */
/* v0.63.5: .sv-carousel-track(親、display:flexでalign-items未指定=stretch)は
   本来、行内の全カードを最も高いカードに合わせて伸縮させ、.sv-meta{flex:1}+
   .sv-card-actions{margin-top:auto}でCTAを下端に揃える設計だった。しかし
   .sv-card側にheight:100%という明示値があると、flexboxの仕様上その値が
   stretchより優先され伸縮が無効化されるため、カードごとの実高さがタイトル/
   説明文/日付等の分量差でバラバラになり、結果としてCTA(動画を見る/詳しい
   記事を読む)の縦位置がズレていた(本番実測で確認: 2カードの高さが826px/
   810pxと不一致)。height指定を外すだけで、既存のflex+margin-top:auto設計が
   本来通り機能し、カードの伸縮吸収でCTAが揃うようになる。 */
.sv-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e5e7eb; border-radius: 1rem; overflow: hidden; }
.sv-thumbnail img { display: block; }
/* v0.63.3: pointer-events:noneのままだと、data-sv-play等を付与してもクリックが
   このoverlay自体を素通りしてしまい(下のimg/thumbnailで拾われず何も起きない)、
   サムネイル中央の再生ボタンが反応しない原因の一つだった。theme.js側の
   既存クリックハンドラ(closest('[data-sv-play]'))へ届くよう有効化する。
   auto化に伴い、視覚的な再生アイコン部分だけでなくサムネイル全体(inset:0)が
   クリック対象になるが、これは既存の「動画を見る」ボタンと同じopenModal()を
   呼ぶだけで新規挙動の追加ではない。 */
.sv-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: auto; cursor: pointer; }
.sv-play-dot { width: 2.75rem; height: 2.75rem; border-radius: 9999px; background: rgba(7,25,56,.72); display: flex; align-items: center; justify-content: center; }
.sv-play-dot svg { width: 1.125rem; height: 1.125rem; color: #fff; margin-left: 2px; }
/* 記事内動画「再生されっぱなし」対策(theme.js initShortsInlineVideo)の一部。
   再生中はカスタム再生ボタンのoverlay(サムネイル全面・pointer-events:auto)が
   video要素の上に重なったままだったため、.sv-card-playing付与時は非表示にし、
   一時停止(手動・viewport離脱・タブ非表示のいずれでも)でtheme.js側が
   このクラスを外すと自動的に再表示される。 */
.sv-card.sv-card-playing .sv-play { display: none; }
.sv-meta { padding: .875rem; display: flex; flex-direction: column; flex: 1; }
.sv-badges { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: .5rem; }
.sv-badge { display: inline-block; background: #eff6ff; color: #1d4ed8; font-size: .6875rem; font-weight: 700; padding: .1875rem .5rem; border-radius: 9999px; }
.sv-card-title { font-size: .875rem; font-weight: 800; color: #071938; line-height: 1.5; margin-bottom: .375rem; }
.sv-card-desc { font-size: .75rem; color: #6b7280; line-height: 1.6; margin-bottom: .5rem; }
.sv-card-date { font-size: .6875rem; color: #6b7280; margin-bottom: .625rem; }
.sv-card-actions { margin-top: auto; display: flex; flex-direction: column; gap: .5rem; }
.sv-btn-play { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; background: #071938; color: #fff; font-size: .75rem; font-weight: 700; padding: .5rem .75rem; border-radius: 9999px; border: none; cursor: pointer; min-height: 40px; }
.sv-btn-play:hover { background: #0b2545; }
.sv-btn-play:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.sv-link-article { display: inline-flex; align-items: center; justify-content: center; gap: .25rem; font-size: .75rem; font-weight: 700; color: #071938; min-height: 40px; flex: 1; }
.sv-link-article:hover { color: #1d4ed8; }
.sv-link-article:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
/* CTAグループ(記事を読む/資料ダウンロード)。flex:1(.sv-link-article側)により、
   リンクが1個の時は横幅100%、2個の時は横並び均等割りになる。 */
.sv-cta-group { display: flex; gap: .5rem; }
.sv-cta-group a { white-space: nowrap; }

/* --- /media/shorts/ 6テーマナビ --- */
.sv-theme-nav { display: flex; flex-wrap: wrap; gap: .5rem; }
.sv-theme-nav a { display: inline-flex; align-items: center; background: #f8fafc; border: 1px solid #e5e7eb; color: #071938; font-size: .8125rem; font-weight: 700; padding: .5rem 1rem; border-radius: 9999px; min-height: 40px; }
.sv-theme-nav a:hover { border-color: #93c5fd; color: #1d4ed8; }
.sv-theme-nav a:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }

/* --- 空状態(台帳未反映時) --- */
.sv-empty { background: #fff; border: 1px solid #e5e7eb; border-radius: 1rem; padding: 2rem; text-align: center; color: #6b7280; font-size: .875rem; }

/* --- 動画再生モーダル(ネイティブ<dialog>。9:16維持・画面内に収まる最大サイズ・
   閉じるボタン。Esc close/フォーカス制御/背景inert化はブラウザ標準機能に委ね、
   theme.js initShortsModal()は<video>/<iframe>の生成・破棄のみを行う、
   指示書■36〜■38)。 --- */
.sv-modal { border: none; border-radius: 1rem; padding: 0; max-width: min(92vw, 420px); width: 100%; background: transparent; }
.sv-modal::backdrop { background: rgba(7,25,56,.72); }
.sv-modal-inner { position: relative; background: #000; border-radius: 1rem; overflow: hidden; aspect-ratio: 9 / 16; max-height: 88vh; margin: 0 auto; }
.sv-modal-inner video, .sv-modal-inner iframe { width: 100%; height: 100%; object-fit: contain; border: 0; display: block; }
.sv-modal-close { position: absolute; top: .5rem; right: .5rem; z-index: 2; width: 2.25rem; height: 2.25rem; border-radius: 9999px; background: rgba(0,0,0,.55); color: #fff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sv-modal-close svg { width: 1.125rem; height: 1.125rem; }
.sv-modal-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 480px) {
  .sv-modal { max-width: 94vw; }
  .sv-modal-inner { max-height: 80vh; }
}
/* モーダル表示中は背景スクロールを止める(指示書■37「背景スクロール制御」)。
   このクラスはJS側がモーダルを開いている間だけ付与/削除する状態クラスであり、
   通常時のbody{}(既存, style.css先頭)には一切影響しない。 */
body.sv-modal-open { overflow: hidden; }

/* =====================================================================
   v0.61.0 Mobile監査(Playwright 390×844)で確定した安全修正2件
   ---------------------------------------------------------------------
   1) モバイルメニュー(header.php #mobile-menu-toggle)のfocus-visible表示。
      v0.63.9でcheckbox+labelからbutton単体へ変更したため、button自身に
      直接:focus-visibleを当てるだけでよくなった(:has()による伝播は不要)。
   2) 問い合わせフォーム(page-contact.php #contact-form)のテキスト系
      入力欄がtext-sm(14px)のため、iOS Safariでフォーカス時に自動ズームが
      発生していた。#contact-formにスコープしたMobile限定(max-width:767px)
      のfont-size:16px指定のみを追加し、radio/checkbox/submit/デスクトップ
      表示・他ページのフォーム(page-download.php等)には一切影響しない。
   ===================================================================== */
#mobile-menu-toggle:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}
@media (max-width: 767px) {
  #contact-form input[type="text"],
  #contact-form input[type="email"],
  #contact-form input[type="tel"],
  #contact-form textarea {
    font-size: 16px;
  }
}

/* axe link-in-text-block対応: 同意文中の「プライバシーポリシー」リンクが
   周囲のテキストと色でしか区別できなかったため、常時下線を付与する
   (Tailwindのunderlineユーティリティは本ビルドに未生成のため、この
   1リンクだけを対象にした明示CSSで対応。サイト全体のリンクスタイルは
   無変更)。 */
.sb-consent-link { text-decoration: underline; }

/* =====================================================================
   v0.65.0 SHORTS→ARTICLE 関連動画自動表示(専用namespace .sav-*)。
   /media/shorts/ の .sv-card/.sv-thumbnail 等はマークアップ再利用のため
   そのまま使うが、このブロック内でのサイズだけを .sav-* 側から上書きする
   (.sv-*自体の定義・/media/shorts/表示には一切触れない)。
   優先順位: 目次あり(.sav-toc-row) > 目次なし・導入文あり(.sav-intro-row) >
   どちらもなし(.sav-standalone、単独小型表示)。
   動画は元動画の実アスペクト比(9:16、.sv-thumbnailのaspect-[9/16]を継承)を
   維持し、16:9への強制・crop・変形は行わない。
   ===================================================================== */
.sav-video-label {
  font-size: .75rem;
  font-weight: 700;
  color: #6b7280;
  margin-bottom: .5rem;
}
.sav-video-block .sv-card { height: auto; }
.sav-video-block .sv-card-title { font-size: .8125rem; }

/* 優先順位2(目次なし・導入文ありの場合のフォールバック): 導入文 左 + 関連動画 右 */
.sav-intro-row {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 1.75rem;
}
.sav-intro-row .sav-intro-col { flex: 1 1 0; min-width: 0; }
.sav-intro-row .sav-intro-col p { margin: 0 0 1rem; }
.sav-intro-row .sav-intro-col p:last-child { margin-bottom: 0; }

/* 優先順位1(第一優先): 目次 左 + 関連動画 右。TOC内部HTML/機能は無変更、外側レイアウトのみ。 */
.sav-toc-row {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.sav-toc-row .sb-article-toc { flex: 1 1 0; min-width: 0; margin-bottom: 0; }

/* 動画サイズ(実測)。Desktop 220〜250px程度。本文・目次の可読幅を最優先し、
   動画は補助コンテンツとして控えめに扱う(目次横・導入文横とも共通)。
   パーセンテージ基準+px上下限で、コンテンツ幅が変わっても比率を維持する。 */
.sav-intro-row .sav-video-block,
.sav-toc-row .sav-video-block {
  flex: 0 1 24%;
  width: auto;
  max-width: 250px;
  min-width: 220px;
}

/* 優先順位3: 目次・導入文とも無い記事のみ。単独の小型ブロック */
.sav-standalone { margin-bottom: 1.5rem; }
.sav-standalone .sav-video-block { max-width: 250px; margin: 0 auto; }

@media (max-width: 1023.98px) {
  .sav-intro-row .sav-video-block,
  .sav-toc-row .sav-video-block { flex-basis: 22%; max-width: 230px; min-width: 200px; }
}

/* Tablet幅でも本文/目次が狭くなりすぎる場合はMobileと同じ縦積みに切り替える
   (767.98px以下は既存のMobileブレークポイントに統一)。 */
@media (max-width: 767.98px) {
  .sav-intro-row,
  .sav-toc-row {
    flex-direction: column;
  }
  .sav-intro-row .sav-video-block,
  .sav-toc-row .sav-video-block,
  .sav-standalone .sav-video-block {
    width: 100%;
    max-width: 250px;
    flex-basis: auto;
    margin: 0 auto;
  }
}

/* =====================================================================
   記事詳細ページ共通フローティングCTA(.sb-fcta)
   ---------------------------------------------------------------------
   出力: footer.php -> template-parts/article-floating-cta.php(is_singular('post')のみ)。
   制御: theme.jsのinitArticleFloatingCta()(表示=記事本文開始から約300pxスクロール後、
   非表示=フッター到達/LEADの.sb-single-cta到達/×押下)。
   - position:fixedのみで本文レイアウトを押し下げない(CLSなし)。初期状態はdisplay:none
     (JS無効時は表示されない=害を及ぼさない。画像も最初の表示まで読み込まれない)。
   - 境界は既存サイトと同じ767.98px/768px。PC=最大680px/約90px/下20px、
     モバイル=calc(100% - 24px)・最大390px/約88px/下10px+safe-area。縦積みにはしない。
   - z-index:40(既存のヘッダーz-50より下、ピル/ページ上部へ戻るボタンと同じ40)。
   - 画像が未配置の間は.sb-fcta-visual--placeholderのCSSグラデーションで表示する。 */
.sb-fcta {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 40;
  box-sizing: border-box;
  width: min(680px, calc(100% - 24px));
  height: 90px;
  display: none;
  align-items: stretch;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(7, 25, 56, .18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.sb-fcta.is-armed { display: flex; }
.sb-fcta.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
/* 背景レイヤーだけを半透明にし、ぼかしで背景の記事文字を分離する(SALES・LEADとも同一仕様:
   濃紺#071938→#0f2a5c、α.82+blur 4px)。文字色もSALESと同じ体系(見出し#fff、説明文・6ピラー#cbd5e1)。
   opacityはCTA全体に使わない(見出し・画像・ボタン・×は不透明のまま)。
   「透明度を下げる」設定のユーザーには不透明の濃紺背景を出す(下記)。 */
.sb-fcta--sales { background: linear-gradient(90deg, rgba(7, 25, 56, .82) 0%, rgba(15, 42, 92, .82) 100%); color: #fff; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sb-fcta--lead { background: linear-gradient(90deg, rgba(7, 25, 56, .82) 0%, rgba(15, 42, 92, .82) 100%); color: #fff; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
@media (prefers-reduced-transparency: reduce) {
  .sb-fcta--sales { background: linear-gradient(90deg, #071938 0%, #0f2a5c 100%); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .sb-fcta--lead { background: linear-gradient(90deg, #071938 0%, #0f2a5c 100%); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.sb-fcta-visual { flex: 0 0 120px; position: relative; overflow: hidden; }
.sb-fcta-visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.sb-fcta-visual--placeholder { background: linear-gradient(135deg, #1e40af 0%, #38bdf8 100%); }
.sb-fcta--lead .sb-fcta-visual--placeholder { background: linear-gradient(135deg, #dbeafe 0%, #93c5fd 100%); }
.sb-fcta-copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 8px 14px; }
.sb-fcta-title { font-size: 1rem; font-weight: 900; line-height: 1.4; }
.sb-fcta-desc {
  margin: 2px 0 0;
  font-size: .75rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.sb-fcta--sales .sb-fcta-desc { color: #cbd5e1; }
.sb-fcta--lead .sb-fcta-desc { color: #cbd5e1; }
.sb-fcta-button {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 8px;
  background: #2563eb;
  color: #fff;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease;
}
.sb-fcta--lead .sb-fcta-button { background: #1d4ed8; }
.sb-fcta-button:hover { background: #1d4ed8; }
.sb-fcta--lead .sb-fcta-button:hover { background: #1e40af; }
.sb-fcta-button:focus-visible,
.sb-fcta-close:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
.sb-fcta-close {
  position: relative;
  flex: 0 0 auto;
  align-self: flex-start;
  width: 28px;
  height: 28px;
  margin: 6px 6px 0 6px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: inherit;
  opacity: .75;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sb-fcta-close::after { content: ""; position: absolute; inset: -8px; }
.sb-fcta-close:hover { opacity: 1; }
.sb-fcta-close svg { width: 16px; height: 16px; }
/* 6ピラー(AIO/SEO/MEO/口コミ/オウンドメディア/採用)はモバイル専用の表示。PCでは出さない。 */
.sb-fcta-pillars { display: none; }
/* CTA表示中だけ「ページ上部へ戻る」をCTAの上へ逃がす(PC: 下20px+高さ90px+隙間、
   モバイル: 下10px+高さ100px+隙間。どちらも7.75rem)。CTAが隠れれば元の位置(5.5rem)へ戻る。 */
body.sb-fcta-on .sb-back-to-top { bottom: calc(7.75rem + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 767.98px) {
  .sb-fcta {
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    width: calc(100% - 24px);
    max-width: 390px;
    height: 100px;
    border-radius: 12px;
  }
  /* モバイルもPCと同じ「画像→見出し→6ピラー→CTAボタン」の情報階層にする(高さ100px)。
     画像枠は画面幅に応じて64〜96px(高さいっぱい)に伸縮し、コピー領域は本文幅136pxを確保する
     (見出し2行+6ピラーのチップ2行が収まる幅)。ボタンはバー全体の縦中央(上下余白が等しい)。 */
  .sb-fcta-visual { flex: 0 1 96px; min-width: 44px; }
  /* LEAD(資料DL)の画像は「SEARCH BRAND GUIDE」が横長画像の左寄りにあり、縦長の枠へ
     中央基準のcoverで収めると左側が欠けるため、表示範囲を左寄せする(SALES・PCは対象外)。 */
  .sb-fcta--lead .sb-fcta-visual img { object-position: 8% 50%; }
  .sb-fcta-copy { flex: 1 0 146px; padding: 10px 6px 10px 8px; justify-content: center; }
  /* LEADは見出しが短く(最長117px)、その分を画像枠に回す。 */
  .sb-fcta--lead .sb-fcta-copy { flex-basis: 136px; }
  .sb-fcta-title { font-size: .8125rem; line-height: 1.35; }
  /* 見出しはフレーズ(.sb-fcta-ph)の途中では折り返さない。 */
  .sb-fcta-ph { white-space: nowrap; }
  /* 説明文はモバイルでは出さず、同じ6領域(6ピラー)を見出しの下の小さな補助テキスト
     「AIO・SEO・MEO・口コミ・オウンドメディア・採用」として見せる。枠線・背景・アイコンは付けず、
     色は既存の説明文の色(SALES=#cbd5e1、LEAD=#475569)。区切りの「・」は字間を詰め(-2.5px)、
     ゼロ幅スペース(\200B)で語の間でだけ折り返す(2行: 「…口コミ・」/「オウンドメディア・採用」)。
     width:0+min-width:100%で、この行がコピー領域の幅(見出しの折り返し幅)を押し広げないようにしている。 */
  .sb-fcta-desc { display: none; }
  .sb-fcta-pillars { display: block; margin: 5px 0 0; padding: 0; list-style: none; width: 0; min-width: 100%; font-size: 10px; line-height: 1.4; font-weight: 500; }
  .sb-fcta-pillars li { display: inline; white-space: nowrap; }
  .sb-fcta-pillars li:not(:last-child)::after { content: "・\200B"; margin: 0 -2.5px; }
  .sb-fcta--sales .sb-fcta-pillars { color: #cbd5e1; }
  .sb-fcta--lead .sb-fcta-pillars { color: #cbd5e1; }
  .sb-fcta-button { align-self: center; min-height: 40px; padding: 0 8px; font-size: .75rem; margin: 0 8px 0 0; }
  /* ×は右上に重ね(flex幅を消費しない)。当たり判定はボタンの上端(上から約30px)を越えない。 */
  .sb-fcta-close { position: absolute; top: 3px; right: 3px; margin: 0; width: 24px; height: 24px; }
  .sb-fcta-close::after { inset: -2px; }
}
/* 幅351px以下(320px前後の小型端末)では、ボタンと画像枠をわずかに絞り、コピー領域(本文幅122px)
   でも見出し2行+6ピラー2行に収める。 */
@media (max-width: 351.98px) {
  .sb-fcta-copy, .sb-fcta--lead .sb-fcta-copy { flex-basis: 136px; }
  .sb-fcta-button { padding: 0 6px; }
}
/* 幅352px以上では、フレーズのグループ(例:「選ばれる会社」へ。)も途中で折り返さない
   (SALES「検索から／「選ばれる会社」へ。」、LEAD「検索で「選ばれる」／ためのお役立ち資料」の
   2行になる)。352px未満では、グループ内のフレーズ間でのみ折り返す(「選ばれる」「会社」は
   それぞれ途中で切れない)。 */
@media (min-width: 352px) and (max-width: 767.98px) {
  .sb-fcta-pg { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .sb-fcta, .sb-fcta-button { transition: none; }
}
@media print {
  .sb-fcta { display: none !important; }
}

/* =====================================================================
   v0.69.0 動画SEO/AIO Phase 2B: 1動画専用watch page /media/shorts/{slug}/
   (専用namespace .svw-*)。SHORTS→ARTICLE(.sav-*)と同じ考え方で、
   /media/shorts/の.sv-card等はマークアップ・theme.jsをそのまま再利用し、
   このページ単体でのカード幅だけを上書きする(.sv-*自体の定義・
   /media/shorts/ハブ表示には一切触れない)。9:16の実アスペクト比のまま、
   単独ページとして見やすい幅(420px)へ中央寄せする。16:9への強制はしない。
   ===================================================================== */
.svw-video-wrap { max-width: 420px; margin: 0 auto; }
.svw-video-wrap .sv-card { height: auto; }
.svw-points-label { font-size: .6875rem; font-weight: 700; color: #1d4ed8; letter-spacing: .02em; }
/* v0.69.0: ハブ(/media/shorts/)カードのタイトルからwatch pageへのリンク。
   カード内の見た目を変えない(色・下線ともに既存タイトルの見た目を継承)。 */
.sv-card-title-link { color: inherit; text-decoration: none; }
.sv-card-title-link:hover, .sv-card-title-link:focus-visible { text-decoration: underline; }


/* =====================================================================
   v0.81.0 TOP「6つの専門領域」カード: 0ベース再設計(Flip/Glass廃止)。
   演出カードではなく、内容が一目で分かる横長ナビゲーションカードへ変更。
   Flip(perspective/preserve-3d/rotateY/front-back face/backdrop-filter/
   Deep Navy半透明)は全廃止し、JSも使わない。名前空間は.sb-pillar-*に
   限定(他コンポーネントでは不使用、削除前にgrep確認済み)。

   構造: <a class="sb-pillar-card">
           <div class="sb-pillar-meta">
             <span class="sb-pillar-index" aria-hidden="true">01 / 06</span>
             <span class="sb-pillar-label">AIO</span>
           </div>
           <h3>AI検索・生成AI時代の検索対策</h3>
           <span class="sb-pillar-cta">AIOの記事を見る <span class="sb-pillar-cta__arrow">→</span></span>
         </a>

   Mobileの横スワイプ(.sb-hswipeクラス)は、この6カード専用wrapperの
   class属性から外すことで無効化した(.sb-hswipe自体の共通ルールは
   変更していない、他セクションでの利用に影響なし)。Grid自体は既存の
   Tailwindユーティリティ(grid-cols-1 sm:grid-cols-2 lg:grid-cols-3)を
   そのまま使い、gapのみこのブロックで指定する。

   追記: 「Editorial Index Grid」化。.sb-pillar-index(01/06等)はこの
   6領域が並列な専門領域であり優先順位や工程ではないため、意味情報では
   なく視覚的な整理要素としてaria-hidden="true"にし、スクリーンリーダー
   へはLabel/H3/CTAのみを読ませる。階層表現をtranslateY+box-shadowの
   「浮き上がり」からborder-color/文字色の遷移に差し替えたため、hover時
   のtransform/box-shadow変化は廃止した(Precision重視、装飾を増やさない
   方針のため)。 */
.sb-pillar-grid {
  column-gap: 20px;
  row-gap: 20px;
}
@media (min-width: 1024px) {
  .sb-pillar-grid { column-gap: 22px; row-gap: 22px; }
}
@media (max-width: 767.98px) {
  .sb-pillar-grid { row-gap: 14px; }
}

.sb-pillar-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
  text-align: left;
  background: #fff;
  border: 1px solid #e4eaf1;
  border-radius: 4px;
  box-shadow: none;
  padding: 20px 22px;
  min-height: 168px;
  transition: border-color .2s ease-out, background-color .15s ease-out;
}
.sb-pillar-card h3 {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.4;
  color: #071938;
}
.sb-pillar-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.sb-pillar-index {
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: #94a3b8;
  transition: color .2s ease-out;
}
.sb-pillar-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #2563eb;
}
.sb-pillar-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  color: #2563eb;
}
.sb-pillar-cta__arrow { display: inline-block; transition: transform .2s ease-out; }

@media (hover: hover) and (pointer: fine) {
  /* hoverが利用できる環境のみで変化させる(スマホへのhover疑似挙動持ち込み
     禁止)。カードは浮かせず、border-color/Index文字色/矢印の移動のみで
     階層を表現する(Typography・Border・Whitespaceで作るPrecision重視)。 */
  .sb-pillar-card:hover {
    border-color: #2563eb;
  }
  .sb-pillar-card:hover .sb-pillar-index { color: #2563eb; }
  .sb-pillar-card:hover .sb-pillar-cta__arrow { transform: translateX(2px); }
}
.sb-pillar-card:active {
  background: #fafbfc;
}
.sb-pillar-card:focus-visible {
  outline: 2px solid rgba(37, 99, 235, .5);
  outline-offset: 2px;
}

@media (max-width: 1023.98px) {
  .sb-pillar-card { min-height: 152px; }
  .sb-pillar-card h3 { font-size: 19px; }
}
@media (max-width: 767.98px) {
  .sb-pillar-card { min-height: 108px; padding: 16px 18px; }
  .sb-pillar-card h3 { font-size: 18px; }
}

/* =====================================================================
   v0.82.0 「独自調査・検証」Signature Section: Generic 4-card Gridから
   Editorial Research Feature(Featured 1件 + Secondary Research Journal
   List 3件)へ再設計。6 Pillars(Editorial Navigation、01/06・border
   interaction)とは役割が異なるため、同じ見た目にはせず、Featuredは
   Typography/Image/Whitespace主体、Secondaryは.sb-article-content h2の
   既存2px navy ruleグラマーを再利用したJournal List形式にしている。
   shadowは使わず、Featured/Secondaryともcard chrome(背景/border/radius
   の囲み)を持たせない。LATEST RESEARCH・RESEARCH 0Xは意味情報ではなく
   視覚整理用のためaria-hidden="true"。
   構造: <div class="sb-research-feature">
           <a class="sb-research-feature__featured">...</a>
           <div class="sb-research-feature__secondary">
             <a class="sb-research-secondary">...</a> ×3
           </div>
         </div>
   Mobile/Tabletはカルーセル化せず(.sb-hswipe不使用)、Featured全幅+
   Secondaryは独自調査の発見しやすさを優先し縦リスト(Tabletのみ3列)。 */
.sb-research-feature {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sb-research-feature__featured {
  display: block;
  text-decoration: none;
}
.sb-research-feature__eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #2563eb;
  margin-bottom: 8px;
}
.sb-research-feature__image-wrap {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #f1f5f9;
  margin-bottom: 10px;
}
.sb-research-feature__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .2s ease-out;
}
.sb-research-feature__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.sb-research-feature__category {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: #2563eb;
  background: #eff6ff;
  padding: 3px 10px;
  border-radius: 9999px;
}
.sb-research-feature__date { font-size: 12px; color: #6b7280; }
.sb-research-feature__title {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.4;
  color: #071938;
  margin-bottom: 6px;
}
.sb-research-feature__desc {
  font-size: 14px;
  line-height: 1.7;
  color: #5f6b7a;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sb-research-feature__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  color: #2563eb;
}

.sb-research-feature__secondary {
  display: flex;
  flex-direction: column;
}
.sb-research-secondary {
  display: block;
  padding: 14px 0;
  border-top: 2px solid #071938;
  text-decoration: none;
  transition: border-color .2s ease-out;
}
.sb-research-feature__secondary > .sb-research-secondary:first-child { padding-top: 0; border-top: none; }
.sb-research-secondary__meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.sb-research-secondary__index {
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: #94a3b8;
}
.sb-research-secondary__category { font-size: 12px; font-weight: 700; color: #2563eb; }
.sb-research-secondary__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  color: #071938;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sb-research-secondary__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #6b7280;
}
.sb-research-secondary__arrow {
  color: #2563eb;
  font-weight: 700;
  transition: transform .2s ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .sb-research-feature__featured:hover .sb-research-feature__image { transform: scale(1.02); }
  .sb-research-feature__featured:hover .sb-research-feature__title { color: #1d4ed8; }
  .sb-research-secondary:hover { border-top-color: #2563eb; }
  .sb-research-secondary:hover .sb-research-secondary__arrow { transform: translate(2px, -2px); }
}
.sb-research-feature__featured:focus-visible,
.sb-research-secondary:focus-visible {
  outline: 2px solid rgba(37, 99, 235, .5);
  outline-offset: 2px;
}

/* Tablet以上(768px〜): Featured 58% / Secondary(縦Journal List) 42%の非対称2カラム。
   実測検証の結果、「Featured全幅+Secondary3列(または縦積み)」はFeatured画像が
   コンテナ全幅になり縦に伸びすぎ、旧Generic 2×2 Grid(770-807px)より高さが
   悪化したため、Tabletの時点からDesktopと同じasymmetric構造に揃えている
   (Tablet/Desktopで構造は共通、文字サイズのみ段階的に拡大)。 */
@media (min-width: 768px) {
  .sb-research-feature {
    flex-direction: row;
    align-items: flex-start;
    gap: 28px;
  }
  .sb-research-feature__featured { flex: 0 0 58%; max-width: 58%; }
  .sb-research-feature__secondary { flex: 1 1 0; flex-direction: column; gap: 0; }
  .sb-research-feature__secondary > .sb-research-secondary {
    flex: none;
    padding: 18px 0;
    border-top: 2px solid #071938;
  }
  .sb-research-feature__secondary > .sb-research-secondary:first-child { padding-top: 0; border-top: none; }
  .sb-research-feature__secondary > .sb-research-secondary:last-child { padding-bottom: 0; }
  .sb-research-feature__title { font-size: 22px; }
}

/* Desktop(1024px〜): gap・余白・文字サイズをさらに拡大(構造はTabletと共通) */
@media (min-width: 1024px) {
  .sb-research-feature { gap: 32px; }
  .sb-research-feature__featured { flex: 0 0 60%; max-width: 60%; }
  .sb-research-feature__secondary > .sb-research-secondary { padding: 20px 0; }
  .sb-research-feature__title { font-size: 26px; }
  .sb-research-feature__desc { font-size: 15px; -webkit-line-clamp: 3; }
}

/* =====================================================================
   v0.85.0 About + Editorial Trust: Generic White CardからQuiet Editorial
   / Institutional Zoneへ調整
   ---------------------------------------------------------------------
   対象: front-page.php内の#about-search-brand・#editorial-trustの外側
   Card(bg-white rounded-2xl border shadow-sm)のみ。DOM構造・文言・H2・
   本文・Trust navの3リンク先URL・.sb-disclosure/.sb-collapseの機能は
   一切無変更。.sb-disclosure/.sb-collapse系の基底ルールはtemplate-parts/
   pillar-cluster.phpとも共有されているため変更せず、新規ルールは全て
   #about-search-brand・#editorial-trustスコープに限定している。
   Card chrome(background/border/radius/shadow)を除去し、
   Typography・Whitespace・1本のRuleだけで両Sectionを構成する。
   Trust navigationはRule-separated Directory Listへ変更(6 Pillarsの
   Editorial Indexとは異なる文法、番号は使用しない)。 */
#about-search-brand > div,
#editorial-trust > div {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

/* About本文の行長を日本語の読みやすさに合わせて調整(現行max-w-4xl=896px
   は1行あたりやや長いため、720-760px程度へ)。 */
#about-search-brand .max-w-4xl {
  max-width: 740px;
}

/* About/Editorial Trustの意味的な境界として、Trust側の上端に1本だけ
   Ruleを配置する(Card下線ではなく、2つのEditorial Sectionの区切りとして
   見える位置)。Section間のmarginは既存space-y(Tailwind)の値をそのまま
   活かし、Rule前後の余白はpadding-topのみで最小限に調整する。 */
#editorial-trust {
  border-top: 1px solid #e5e7eb;
  padding-top: 28px;
}
@media (min-width: 768px) {
  #editorial-trust { padding-top: 32px; }
}
@media (min-width: 1024px) {
  #editorial-trust { padding-top: 40px; }
}

/* Trust Navigation: 個別Card風ボタン(bg-slate-50 rounded-xl border)から
   Rule-separated Directory Listへ。6 Pillarsの01/06形式はコピーせず、
   番号を使わないシンプルなList文法とする。 */
#editorial-trust nav a {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  border-top: 1px solid #e5e7eb;
  padding: 14px 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: color .2s ease-out;
}
#editorial-trust nav a:first-child {
  border-top: none;
}
@media (hover: hover) and (pointer: fine) {
  #editorial-trust nav a:hover {
    color: #1d4ed8;
    background: transparent;
  }
}
#editorial-trust nav a:focus-visible {
  outline: 2px solid rgba(37, 99, 235, .5);
  outline-offset: 2px;
}

/* =====================================================================
   v0.86.0 「今月の調査・お役立ち資料」Refined Publication Cardへ精密化
   ---------------------------------------------------------------------
   対象: template-parts/featured-material.php内の外側Card
   (bg-white rounded-2xl border shadow-sm)のみ。DOM構造・データ取得
   ロジック(post_type=material最新1件取得)・文言・CTA・リンク先URLは
   完全無変更、style.cssのみで実装。
   実測で、画像(download-checklist.jpg)の実寸比率が1672×941=ほぼ16:9
   であるにも関わらず、768-1023px(Tablet)でw-full+h-40(固定160px)の
   組み合わせにより約4.3:1という極端な横長boxになり、資料イラストの
   左右が大きくクロップされていた問題を解消する(Image Option A:
   Tablet Row Layout採用)。
   18幅の実測検証で、同じw-full+h-32(固定128px)構成が640-767px幅
   (サイト既存のsm:640pxブレークポイント未満の、いわゆる"Mobile"域の
   上限付近)ではTabletの旧問題よりさらに悪化した約5.35:1に達すること
   が判明したため、Row Layoutの適用範囲を768pxからサイト既存の
   sm:640pxブレークポイントまで広げ、この帯も合わせて解消している。
   360-639pxの狭いMobile帯(実機の主要な幅)は従来のcrop比率が軽微
   (約2.3-4.3:1)だったため「必要最低限の精密化」の方針通り変更せず、
   Desktop(既存1.56:1)も同様に変更しない。 */
#materials > div {
  border-radius: 12px;
  box-shadow: none;
}
@media (min-width: 768px) {
  #materials h3 { font-size: 19px; }
}

@media (min-width: 640px) and (max-width: 1023.98px) {
  #materials > div {
    flex-direction: row;
  }
  #materials > div > div:first-child {
    width: 240px;
    flex-shrink: 0;
  }
  #materials img {
    height: auto;
    aspect-ratio: 16 / 9;
  }
}