@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
}
/*834px以下*/
@media screen and (max-width: 834px){
}
/*480px以下*/
@media screen and (max-width: 480px){
}


/* ###########################################################################
   ↓↓↓ ここから biz-trend カスタムCSS(全部・最終版・2026-05-10) ↓↓↓
   ###########################################################################
   含まれるブロック:
     1. biz-trend サイト全体カスタム CSS(記事ページ・ヘッダー・フッター等、~1700行)
     2. biz-trend ホームページデザイン v1.0(.biz-trend-homepage 配下、~700行)
     3. biz-trend 図解キット v1.0(.bt-dia--* 各種、~700行)
     4. Cocoon オーバーライド強化(レイアウト崩れ修正、~100行)
   ########################################################################### */


/* =====================================================================
   biz-trend Custom CSS for Cocoon Child Theme
   ---------------------------------------------------------------------
   Version : 1.0.0
   Date    : 2026-05-09
   Target  : Cocoon Child Theme (parent: Cocoon)
   Style   : Business Elite / B2B Professional / Magazine-style
   ---------------------------------------------------------------------
   設置先   : 外観 → テーマファイルエディター → Cocoon Child の style.css
   貼付方法 : 既存内容の最下部にこの全文を追記
   ===================================================================== */

/* =====================================================================
   1. Design Tokens (CSS Variables)
   ===================================================================== */
:root {
  /* ----- Color: Brand ----- */
  --bt-navy-900: #0B1F3F;       /* メインブランドカラー(深いネイビー) */
  --bt-navy-800: #14274A;
  --bt-navy-700: #1D2F58;
  --bt-navy-600: #2C3E5C;       /* セカンダリ */
  --bt-navy-500: #485B7A;       /* ナビゲーション・ボーダー */
  --bt-navy-400: #6B7B96;       /* マイナーテキスト */
  --bt-navy-300: #9AA5BA;       /* 補助 */

  /* ----- Color: Accent (Gold) ----- */
  --bt-gold-700: #A88845;
  --bt-gold-600: #C9A961;       /* メインアクセント(マットゴールド) */
  --bt-gold-500: #D4B97A;
  --bt-gold-400: #E0C99A;
  --bt-gold-100: #F5EFE0;

  /* ----- Color: Neutral ----- */
  --bt-white: #FFFFFF;
  --bt-bg-soft: #FAFBFC;        /* 微妙なオフホワイト */
  --bt-bg-section: #F4F6F9;     /* セクション背景 */
  --bt-border: #E5EAF0;         /* 標準ボーダー */
  --bt-border-strong: #CDD4DF;  /* 強調ボーダー */

  /* ----- Color: Text ----- */
  --bt-text-primary: #1A1F36;   /* 本文(濃灰) */
  --bt-text-secondary: #4A5568; /* サブテキスト */
  --bt-text-muted: #6B7280;     /* 補足 */
  --bt-text-disabled: #A0AEC0;  /* 無効 */

  /* ----- Color: Semantic ----- */
  --bt-success: #10B981;
  --bt-warning: #F59E0B;
  --bt-danger:  #EF4444;
  --bt-info:    #3B82F6;

  /* ----- Typography ----- */
  --bt-font-sans: "Noto Sans JP", -apple-system, "BlinkMacSystemFont",
                  "Helvetica Neue", "Arial", "Hiragino Sans",
                  "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --bt-font-serif: "Noto Serif JP", "Hiragino Mincho ProN",
                   "Yu Mincho", "MS PMincho", serif;
  --bt-font-mono: "JetBrains Mono", "SFMono-Regular", "Consolas",
                  "Menlo", monospace;

  /* ----- Font Size Scale ----- */
  --bt-fs-xs:    0.75rem;       /* 12px */
  --bt-fs-sm:    0.875rem;      /* 14px */
  --bt-fs-base:  1rem;          /* 16px */
  --bt-fs-md:    1.125rem;      /* 18px */
  --bt-fs-lg:    1.25rem;       /* 20px */
  --bt-fs-xl:    1.5rem;        /* 24px */
  --bt-fs-2xl:   1.875rem;      /* 30px */
  --bt-fs-3xl:   2.25rem;       /* 36px */
  --bt-fs-4xl:   3rem;          /* 48px */

  /* ----- Spacing Scale ----- */
  --bt-space-1:  0.25rem;
  --bt-space-2:  0.5rem;
  --bt-space-3:  0.75rem;
  --bt-space-4:  1rem;
  --bt-space-5:  1.25rem;
  --bt-space-6:  1.5rem;
  --bt-space-8:  2rem;
  --bt-space-10: 2.5rem;
  --bt-space-12: 3rem;
  --bt-space-16: 4rem;
  --bt-space-20: 5rem;
  --bt-space-24: 6rem;

  /* ----- Border Radius ----- */
  --bt-radius-sm:  4px;
  --bt-radius-md:  8px;
  --bt-radius-lg:  12px;
  --bt-radius-xl:  16px;

  /* ----- Shadows (refined, business-grade) ----- */
  --bt-shadow-sm: 0 1px 2px rgba(11, 31, 63, 0.04),
                  0 1px 3px rgba(11, 31, 63, 0.06);
  --bt-shadow-md: 0 4px 8px rgba(11, 31, 63, 0.06),
                  0 2px 4px rgba(11, 31, 63, 0.04);
  --bt-shadow-lg: 0 12px 24px rgba(11, 31, 63, 0.08),
                  0 4px 8px rgba(11, 31, 63, 0.04);
  --bt-shadow-xl: 0 20px 40px rgba(11, 31, 63, 0.10),
                  0 8px 16px rgba(11, 31, 63, 0.05);
  --bt-shadow-gold: 0 4px 16px rgba(201, 169, 97, 0.20);

  /* ----- Transitions ----- */
  --bt-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --bt-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --bt-transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* =====================================================================
   2. Global / Body Reset
   ===================================================================== */
body,
body.home,
body.single,
body.page {
  font-family: var(--bt-font-sans);
  font-size: var(--bt-fs-base);
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: 0.025em;
  color: var(--bt-text-primary);
  background-color: var(--bt-bg-soft);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* テキスト選択時のハイライト */
::selection {
  background-color: var(--bt-gold-600);
  color: var(--bt-white);
}

/* リンク */
a {
  color: var(--bt-navy-700);
  text-decoration: none;
  transition: color var(--bt-transition-fast);
}
a:hover {
  color: var(--bt-gold-600);
  text-decoration: none;
}
a:focus-visible {
  outline: 2px solid var(--bt-gold-600);
  outline-offset: 2px;
  border-radius: var(--bt-radius-sm);
}

/* =====================================================================
   3. Site Header
   ===================================================================== */
#header,
.header {
  background-color: var(--bt-white);
  border-bottom: 1px solid var(--bt-border);
  box-shadow: var(--bt-shadow-sm);
  padding: var(--bt-space-4) 0;
}

#header-in.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--bt-space-6);
}

/* サイトロゴ・タイトル */
.site-name-text-link,
.header-container .site-name a {
  font-family: var(--bt-font-sans);
  font-weight: 800;
  font-size: var(--bt-fs-2xl);
  letter-spacing: -0.02em;
  color: var(--bt-navy-900) !important;
  text-decoration: none;
  position: relative;
}

.site-name-text-link::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: var(--bt-gold-600);
  border-radius: 50%;
  margin-left: 4px;
  vertical-align: top;
  margin-top: 8px;
}

.tagline {
  color: var(--bt-text-muted);
  font-size: var(--bt-fs-xs);
  letter-spacing: 0.1em;
  margin-top: 4px;
}

/* =====================================================================
   4. Global Navigation
   ===================================================================== */
#navi,
.navi-in {
  background-color: var(--bt-navy-900);
  border-top: 3px solid var(--bt-gold-600);
}

#navi .navi-in > .menu-header > .menu-item > a,
.menu-header li a {
  color: var(--bt-white) !important;
  font-weight: 500;
  font-size: var(--bt-fs-sm);
  letter-spacing: 0.05em;
  padding: 1.25rem 1.5rem;
  transition: all var(--bt-transition-fast);
  position: relative;
}

#navi .navi-in > .menu-header > .menu-item > a:hover,
.menu-header li a:hover {
  background-color: var(--bt-navy-700);
  color: var(--bt-gold-400) !important;
}

/* メニューホバー時のアンダーライン */
#navi .navi-in > .menu-header > .menu-item > a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 3px;
  background-color: var(--bt-gold-600);
  transition: all var(--bt-transition-base);
  transform: translateX(-50%);
}
#navi .navi-in > .menu-header > .menu-item > a:hover::after {
  width: 60%;
}

/* サブメニュー */
.menu-header .sub-menu {
  background-color: var(--bt-navy-800);
  border-top: 2px solid var(--bt-gold-600);
  box-shadow: var(--bt-shadow-lg);
}

/* =====================================================================
   5. Article List (Top Page / Category)
   ===================================================================== */
.entry-card,
.related-entry-card {
  background-color: var(--bt-white);
  border: 1px solid var(--bt-border);
  border-radius: var(--bt-radius-md);
  overflow: hidden;
  transition: all var(--bt-transition-base);
  margin-bottom: var(--bt-space-6);
  box-shadow: var(--bt-shadow-sm);
}

.entry-card:hover,
.related-entry-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--bt-shadow-lg);
  border-color: var(--bt-gold-400);
}

.entry-card-thumb img,
.entry-card-thumb-content img,
.related-entry-card-thumb img {
  transition: transform var(--bt-transition-slow);
}
.entry-card:hover .entry-card-thumb img {
  transform: scale(1.05);
}

.entry-card-content {
  padding: var(--bt-space-6) var(--bt-space-5) var(--bt-space-5);
}

.entry-card-title,
.related-entry-card-title {
  color: var(--bt-navy-900) !important;
  font-weight: 700;
  font-size: var(--bt-fs-md);
  line-height: 1.5;
  letter-spacing: 0.01em;
  margin-bottom: var(--bt-space-3);
}

.entry-card-snippet {
  color: var(--bt-text-secondary);
  font-size: var(--bt-fs-sm);
  line-height: 1.7;
}

.entry-card-meta,
.related-entry-card-info {
  color: var(--bt-text-muted);
  font-size: var(--bt-fs-xs);
}

/* カテゴリーバッジ */
.cat-label,
.entry-card .cat-label,
.entry-card .post-categories a {
  background-color: var(--bt-navy-700);
  color: var(--bt-white);
  font-size: var(--bt-fs-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 4px 12px;
  border-radius: 2px;
  text-transform: uppercase;
}

/* =====================================================================
   6. Single Article Page
   ===================================================================== */
.article {
  background-color: var(--bt-white);
  padding: var(--bt-space-10) var(--bt-space-12);
  border-radius: var(--bt-radius-lg);
  box-shadow: var(--bt-shadow-md);
  margin-bottom: var(--bt-space-10);
}

@media (max-width: 768px) {
  .article {
    padding: var(--bt-space-6) var(--bt-space-4);
  }
}

/* アイキャッチ */
.eye-catch {
  margin: 0 calc(var(--bt-space-12) * -1) var(--bt-space-8);
  border-radius: 0;
  overflow: hidden;
  position: relative;
}

@media (max-width: 768px) {
  .eye-catch {
    margin: 0 calc(var(--bt-space-4) * -1) var(--bt-space-6);
  }
}

/* 記事タイトル(H1) */
.entry-title,
.article h1 {
  font-family: var(--bt-font-sans);
  font-weight: 800;
  font-size: var(--bt-fs-3xl);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--bt-navy-900);
  margin: 0 0 var(--bt-space-6);
  padding-bottom: var(--bt-space-5);
  border-bottom: 4px solid var(--bt-navy-900);
  position: relative;
}

.entry-title::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 80px;
  height: 4px;
  background-color: var(--bt-gold-600);
}

@media (max-width: 768px) {
  .entry-title,
  .article h1 {
    font-size: var(--bt-fs-2xl);
  }
}

/* 投稿日・更新日 */
.date-tags {
  margin-bottom: var(--bt-space-8);
  font-size: var(--bt-fs-xs);
  color: var(--bt-text-muted);
  letter-spacing: 0.05em;
}

.date-tags .post-date,
.date-tags .post-update {
  display: inline-flex;
  align-items: center;
  margin-right: var(--bt-space-4);
}

/* =====================================================================
   7. Article Body Typography
   ===================================================================== */

/* H2 - セクション見出し(★最重要) */
.entry-content h2,
.article-body h2 {
  font-weight: 700;
  font-size: var(--bt-fs-xl);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--bt-navy-900);
  margin: var(--bt-space-12) 0 var(--bt-space-6);
  padding: var(--bt-space-4) 0 var(--bt-space-4) var(--bt-space-6);
  border-left: 6px solid var(--bt-gold-600);
  background: linear-gradient(
    90deg,
    var(--bt-bg-section) 0%,
    transparent 80%
  );
  border-radius: 0 var(--bt-radius-md) var(--bt-radius-md) 0;
  position: relative;
}

.entry-content h2::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 0;
  bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, var(--bt-gold-700), var(--bt-gold-400));
}

/* H3 - サブセクション */
.entry-content h3,
.article-body h3 {
  font-weight: 700;
  font-size: var(--bt-fs-lg);
  line-height: 1.5;
  color: var(--bt-navy-800);
  margin: var(--bt-space-10) 0 var(--bt-space-4);
  padding-bottom: var(--bt-space-2);
  border-bottom: 2px solid var(--bt-navy-300);
  position: relative;
}

.entry-content h3::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 60px;
  height: 2px;
  background-color: var(--bt-gold-600);
}

/* H4 - 詳細見出し */
.entry-content h4,
.article-body h4 {
  font-weight: 600;
  font-size: var(--bt-fs-md);
  color: var(--bt-navy-700);
  margin: var(--bt-space-8) 0 var(--bt-space-3);
  padding-left: var(--bt-space-4);
  border-left: 4px solid var(--bt-navy-500);
}

/* 本文段落 */
.entry-content p,
.article-body p {
  margin: 0 0 var(--bt-space-5);
  line-height: 1.95;
  color: var(--bt-text-primary);
  font-size: var(--bt-fs-base);
  letter-spacing: 0.025em;
}

/* リード文 (最初の段落) */
.entry-content > p:first-of-type {
  font-size: var(--bt-fs-md);
  font-weight: 400;
  color: var(--bt-navy-800);
  border-left: 3px solid var(--bt-gold-600);
  background-color: var(--bt-bg-section);
  padding: var(--bt-space-5) var(--bt-space-6);
  border-radius: 0 var(--bt-radius-md) var(--bt-radius-md) 0;
  margin-bottom: var(--bt-space-8);
}

/* 強調 */
.entry-content strong,
.article-body strong {
  font-weight: 700;
  color: var(--bt-navy-900);
  background: linear-gradient(transparent 60%, rgba(201, 169, 97, 0.3) 60%);
  padding: 0 2px;
}

/* イタリック */
.entry-content em,
.article-body em {
  color: var(--bt-navy-700);
  font-style: normal;
  font-weight: 600;
}

/* リンク(本文内) */
.entry-content a,
.article-body a {
  color: var(--bt-navy-700);
  text-decoration: underline;
  text-decoration-color: var(--bt-gold-400);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: all var(--bt-transition-fast);
}

.entry-content a:hover,
.article-body a:hover {
  color: var(--bt-gold-700);
  text-decoration-color: var(--bt-gold-600);
}

/* =====================================================================
   8. Lists
   ===================================================================== */
.entry-content ul,
.entry-content ol {
  margin: var(--bt-space-5) 0;
  padding-left: 0;
}

.entry-content ul li,
.entry-content ol li {
  list-style: none;
  position: relative;
  padding: var(--bt-space-2) 0 var(--bt-space-2) var(--bt-space-8);
  line-height: 1.85;
  color: var(--bt-text-primary);
}

/* ul のマーカー(ゴールドの丸) */
.entry-content ul > li::before {
  content: "";
  position: absolute;
  left: var(--bt-space-3);
  top: 1.1em;
  width: 8px;
  height: 8px;
  background-color: var(--bt-gold-600);
  border-radius: 50%;
}

/* ol の数字 */
.entry-content ol {
  counter-reset: bt-counter;
}
.entry-content ol > li {
  counter-increment: bt-counter;
}
.entry-content ol > li::before {
  content: counter(bt-counter);
  position: absolute;
  left: 0;
  top: var(--bt-space-2);
  width: 24px;
  height: 24px;
  background-color: var(--bt-navy-900);
  color: var(--bt-white);
  font-size: var(--bt-fs-xs);
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ネストされたリスト */
.entry-content ul ul,
.entry-content ol ol,
.entry-content ul ol,
.entry-content ol ul {
  margin: var(--bt-space-2) 0;
}

.entry-content ul ul > li::before {
  background-color: var(--bt-navy-300);
  width: 6px;
  height: 6px;
}

/* =====================================================================
   9. Blockquote (引用)
   ===================================================================== */
.entry-content blockquote,
.article-body blockquote {
  background-color: var(--bt-bg-section);
  border-left: 5px solid var(--bt-navy-700);
  padding: var(--bt-space-6) var(--bt-space-8);
  margin: var(--bt-space-6) 0;
  border-radius: 0 var(--bt-radius-md) var(--bt-radius-md) 0;
  position: relative;
  font-style: normal;
  color: var(--bt-text-secondary);
}

.entry-content blockquote::before {
  content: "“";
  position: absolute;
  top: var(--bt-space-2);
  left: var(--bt-space-4);
  font-family: var(--bt-font-serif);
  font-size: 4rem;
  color: var(--bt-gold-400);
  line-height: 1;
  font-weight: 700;
}

.entry-content blockquote p {
  margin-left: var(--bt-space-8);
  margin-bottom: var(--bt-space-2);
}

.entry-content blockquote cite,
.entry-content blockquote .source {
  display: block;
  font-size: var(--bt-fs-sm);
  color: var(--bt-text-muted);
  margin-top: var(--bt-space-2);
  font-style: normal;
}

/* =====================================================================
   10. Tables (Comparison Tables - ★最重要)
   ===================================================================== */
.entry-content .wp-block-table,
.article-body table,
.wp-block-table figure {
  margin: var(--bt-space-8) 0;
}

.entry-content .wp-block-table table,
.entry-content table,
.article-body table {
  width: 100%;
  border-collapse: collapse;
  border: none;
  background-color: var(--bt-white);
  box-shadow: var(--bt-shadow-md);
  border-radius: var(--bt-radius-md);
  overflow: hidden;
}

/* テーブルヘッダー */
.entry-content table th,
.article-body table th,
.wp-block-table table th {
  background: linear-gradient(
    135deg,
    var(--bt-navy-900) 0%,
    var(--bt-navy-700) 100%
  );
  color: var(--bt-white);
  font-weight: 600;
  font-size: var(--bt-fs-sm);
  letter-spacing: 0.05em;
  padding: var(--bt-space-4) var(--bt-space-5);
  text-align: left;
  border: none;
  position: relative;
}

.entry-content table th:not(:last-child)::after,
.wp-block-table table th:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 25%;
  bottom: 25%;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.15);
}

/* テーブルセル */
.entry-content table td,
.article-body table td,
.wp-block-table table td {
  padding: var(--bt-space-4) var(--bt-space-5);
  border-bottom: 1px solid var(--bt-border);
  color: var(--bt-text-primary);
  font-size: var(--bt-fs-sm);
  line-height: 1.7;
  vertical-align: top;
}

/* 偶数行の背景色(縞模様) */
.entry-content table tr:nth-child(even) td,
.wp-block-table table tr:nth-child(even) td {
  background-color: var(--bt-bg-soft);
}

/* 行ホバー */
.entry-content table tr:hover td,
.wp-block-table table tr:hover td {
  background-color: var(--bt-gold-100);
  transition: background-color var(--bt-transition-fast);
}

/* 最初の列(ラベル列)を強調 */
.entry-content table tr td:first-child,
.wp-block-table table tr td:first-child {
  font-weight: 600;
  color: var(--bt-navy-800);
  background-color: var(--bt-bg-section);
}

/* レスポンシブ:横スクロール */
.wp-block-table {
  overflow-x: auto;
}

@media (max-width: 768px) {
  .entry-content table th,
  .entry-content table td {
    padding: var(--bt-space-3);
    font-size: var(--bt-fs-xs);
  }
}

/* =====================================================================
   11. Buttons & CTAs (★アフィリエイトリンク用)
   ===================================================================== */

/* ベース - WordPress ブロックボタン */
.wp-block-button__link,
.wp-element-button {
  display: inline-block;
  background: linear-gradient(135deg, var(--bt-navy-900) 0%, var(--bt-navy-700) 100%);
  color: var(--bt-white);
  padding: var(--bt-space-4) var(--bt-space-10);
  font-size: var(--bt-fs-base);
  font-weight: 600;
  letter-spacing: 0.05em;
  border: none;
  border-radius: var(--bt-radius-md);
  box-shadow: var(--bt-shadow-md);
  transition: all var(--bt-transition-base);
  text-decoration: none !important;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
  background: linear-gradient(135deg, var(--bt-gold-700) 0%, var(--bt-gold-600) 100%);
  color: var(--bt-white);
  transform: translateY(-2px);
  box-shadow: var(--bt-shadow-lg), var(--bt-shadow-gold);
}

/* CTA ボタン(プライマリ・大) */
.wp-block-button.is-style-fill .wp-block-button__link {
  padding: var(--bt-space-5) var(--bt-space-12);
  font-size: var(--bt-fs-md);
}

/* アウトライン版 */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--bt-navy-900);
  border: 2px solid var(--bt-navy-900);
  box-shadow: none;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--bt-navy-900);
  color: var(--bt-white);
}

/* Cocoon スタイルのボタン (.btn) */
.entry-content .btn,
a.btn {
  display: inline-block;
  background: var(--bt-navy-900);
  color: var(--bt-white) !important;
  padding: var(--bt-space-3) var(--bt-space-8);
  border-radius: var(--bt-radius-md);
  font-weight: 600;
  text-decoration: none !important;
  transition: all var(--bt-transition-base);
  box-shadow: var(--bt-shadow-md);
}

.entry-content .btn:hover,
a.btn:hover {
  background: var(--bt-gold-600);
  transform: translateY(-2px);
  box-shadow: var(--bt-shadow-lg);
}

/* CTA ブロック(目立たせ用) */
.cta-box {
  background: linear-gradient(135deg, var(--bt-navy-900) 0%, var(--bt-navy-700) 100%);
  color: var(--bt-white);
  padding: var(--bt-space-8);
  border-radius: var(--bt-radius-lg);
  margin: var(--bt-space-8) 0;
  text-align: center;
  border: 2px solid var(--bt-gold-600);
  box-shadow: var(--bt-shadow-xl);
}

.cta-box h3 {
  color: var(--bt-gold-400) !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: var(--bt-space-4);
}

.cta-box p {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--bt-space-6);
}

/* =====================================================================
   12. Cocoon Specific Blocks
   ===================================================================== */

/* 吹き出し([chat]) */
.speech-wrap {
  margin: var(--bt-space-6) 0;
}

.speech-balloon {
  background: var(--bt-bg-section) !important;
  border: 2px solid var(--bt-navy-300) !important;
  border-radius: var(--bt-radius-lg) !important;
  padding: var(--bt-space-4) var(--bt-space-5) !important;
  box-shadow: var(--bt-shadow-sm);
}

.speech-balloon::before {
  border-right-color: var(--bt-navy-300) !important;
}

/* 注意ボックス([alert]) */
.alert-box {
  background: linear-gradient(135deg, #FFF7E6 0%, #FFEFC9 100%);
  border: 1px solid var(--bt-warning);
  border-left: 5px solid var(--bt-warning);
  padding: var(--bt-space-5) var(--bt-space-6);
  border-radius: var(--bt-radius-md);
  margin: var(--bt-space-6) 0;
  position: relative;
}

.alert-box::before {
  content: "⚠️";
  font-size: var(--bt-fs-xl);
  margin-right: var(--bt-space-3);
}

/* ポイントボックス([point]) */
.point-box,
.information-box {
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
  border: 1px solid var(--bt-info);
  border-left: 5px solid var(--bt-info);
  padding: var(--bt-space-5) var(--bt-space-6);
  border-radius: var(--bt-radius-md);
  margin: var(--bt-space-6) 0;
}

.point-box::before {
  content: "💡 ";
  font-size: var(--bt-fs-xl);
  margin-right: var(--bt-space-2);
}

/* メモボックス */
.memo-box {
  background-color: var(--bt-bg-section);
  border-left: 4px solid var(--bt-navy-500);
  padding: var(--bt-space-4) var(--bt-space-5);
  border-radius: 0 var(--bt-radius-md) var(--bt-radius-md) 0;
  margin: var(--bt-space-5) 0;
  font-size: var(--bt-fs-sm);
  color: var(--bt-text-secondary);
}

/* PR/AI 開示文(設計書 Patch 1.6) */
.ai-pr-disclosure,
.pr-disclosure,
.ai-disclosure {
  background: linear-gradient(135deg, var(--bt-bg-section) 0%, var(--bt-bg-soft) 100%) !important;
  border: 1px solid var(--bt-border);
  border-left: 4px solid var(--bt-navy-500) !important;
  padding: var(--bt-space-4) var(--bt-space-5) !important;
  border-radius: 0 var(--bt-radius-md) var(--bt-radius-md) 0 !important;
  margin-bottom: var(--bt-space-8) !important;
  font-size: var(--bt-fs-sm) !important;
  color: var(--bt-text-secondary) !important;
  line-height: 1.7 !important;
}

/* =====================================================================
   13. Table of Contents (目次)
   ===================================================================== */
.toc {
  background-color: var(--bt-white);
  border: 1px solid var(--bt-border);
  border-top: 4px solid var(--bt-navy-900);
  border-radius: var(--bt-radius-md);
  padding: var(--bt-space-6) var(--bt-space-8);
  margin: var(--bt-space-8) 0;
  box-shadow: var(--bt-shadow-sm);
  position: relative;
}

.toc::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 60px;
  height: 4px;
  background-color: var(--bt-gold-600);
}

.toc-title {
  color: var(--bt-navy-900) !important;
  font-weight: 700;
  font-size: var(--bt-fs-md);
  margin-bottom: var(--bt-space-4) !important;
  padding-bottom: var(--bt-space-3);
  border-bottom: 1px solid var(--bt-border);
  letter-spacing: 0.02em;
}

.toc-list,
.toc-list li {
  list-style: none !important;
}

.toc-list a {
  color: var(--bt-navy-700);
  font-weight: 500;
  text-decoration: none;
  padding: var(--bt-space-2) 0;
  display: block;
  transition: all var(--bt-transition-fast);
  border-left: 3px solid transparent;
  padding-left: var(--bt-space-3);
}

.toc-list a:hover {
  color: var(--bt-gold-700);
  border-left-color: var(--bt-gold-600);
  background-color: var(--bt-bg-soft);
  padding-left: var(--bt-space-4);
}

.toc-list ul {
  padding-left: var(--bt-space-6);
}

.toc-list ul a {
  font-size: var(--bt-fs-sm);
  color: var(--bt-text-secondary);
}

/* =====================================================================
   14. Breadcrumb (パンくずリスト)
   ===================================================================== */
#breadcrumb,
.breadcrumb {
  background-color: transparent;
  padding: var(--bt-space-4) 0;
  font-size: var(--bt-fs-xs);
  color: var(--bt-text-muted);
  letter-spacing: 0.05em;
}

#breadcrumb a,
.breadcrumb a {
  color: var(--bt-navy-700);
  text-decoration: none;
}

#breadcrumb a:hover,
.breadcrumb a:hover {
  color: var(--bt-gold-700);
}

/* =====================================================================
   15. Sidebar
   ===================================================================== */
#sidebar {
  font-size: var(--bt-fs-sm);
}

.widget,
.widget_search,
.widget_categories,
.widget_archive {
  background-color: var(--bt-white);
  border: 1px solid var(--bt-border);
  border-radius: var(--bt-radius-md);
  padding: var(--bt-space-5);
  margin-bottom: var(--bt-space-5);
  box-shadow: var(--bt-shadow-sm);
}

.widget h3,
.widget-sidebar-title,
.widget-title {
  color: var(--bt-navy-900) !important;
  font-weight: 700;
  font-size: var(--bt-fs-md);
  margin-bottom: var(--bt-space-4);
  padding-bottom: var(--bt-space-3);
  border-bottom: 2px solid var(--bt-navy-900);
  border-left: none;
  background: none;
  position: relative;
  padding-left: 0;
}

.widget h3::after,
.widget-sidebar-title::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 40px;
  height: 2px;
  background-color: var(--bt-gold-600);
}

.widget ul li,
.widget ol li {
  border-bottom: 1px solid var(--bt-border);
  padding: var(--bt-space-3) 0;
}

.widget ul li::before,
.widget ol li::before {
  display: none;
}

.widget a {
  color: var(--bt-navy-700);
  text-decoration: none;
}

.widget a:hover {
  color: var(--bt-gold-700);
}

/* 人気記事ウィジェット */
.popular-entry-card {
  border-bottom: 1px solid var(--bt-border);
  padding: var(--bt-space-3) 0;
}

.popular-entry-card-title {
  color: var(--bt-navy-800) !important;
  font-weight: 600;
}

/* =====================================================================
   16. Footer
   ===================================================================== */
#footer,
.footer {
  background-color: var(--bt-navy-900);
  color: var(--bt-navy-300);
  padding: var(--bt-space-12) 0 var(--bt-space-6);
  margin-top: var(--bt-space-16);
  border-top: 4px solid var(--bt-gold-600);
}

#footer a,
.footer a {
  color: var(--bt-navy-300);
  text-decoration: none;
}

#footer a:hover,
.footer a:hover {
  color: var(--bt-gold-400);
}

.footer-widgets {
  border-bottom: 1px solid var(--bt-navy-700);
  padding-bottom: var(--bt-space-8);
  margin-bottom: var(--bt-space-6);
}

.footer-widgets h3 {
  color: var(--bt-white) !important;
  font-weight: 600;
  font-size: var(--bt-fs-base);
  margin-bottom: var(--bt-space-4);
  border: none;
  padding: 0;
}

.copyright,
.footer-bottom {
  color: var(--bt-navy-400);
  font-size: var(--bt-fs-xs);
  text-align: center;
  letter-spacing: 0.05em;
}

/* フッターメニュー */
.menu-footer {
  display: flex;
  justify-content: center;
  gap: var(--bt-space-6);
  flex-wrap: wrap;
  margin-bottom: var(--bt-space-4);
  list-style: none;
  padding: 0;
}

.menu-footer li {
  border: none !important;
}

.menu-footer li::before {
  display: none !important;
}

.menu-footer a {
  color: var(--bt-navy-300);
  font-size: var(--bt-fs-xs);
  letter-spacing: 0.05em;
  transition: color var(--bt-transition-fast);
}

.menu-footer a:hover {
  color: var(--bt-gold-400);
}

/* =====================================================================
   17. Related Posts
   ===================================================================== */
.related-entry-card,
.related-entry-card-wrap {
  background-color: var(--bt-white);
  border: 1px solid var(--bt-border);
  border-radius: var(--bt-radius-md);
  transition: all var(--bt-transition-base);
}

.related-entry-card:hover {
  border-color: var(--bt-gold-400);
  box-shadow: var(--bt-shadow-md);
  transform: translateY(-2px);
}

.related-list-title {
  color: var(--bt-navy-900);
  font-weight: 700;
  font-size: var(--bt-fs-lg);
  border-bottom: 3px solid var(--bt-navy-900);
  padding-bottom: var(--bt-space-3);
  margin-bottom: var(--bt-space-6);
  position: relative;
}

.related-list-title::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 60px;
  height: 3px;
  background-color: var(--bt-gold-600);
}

/* =====================================================================
   18. Pagination
   ===================================================================== */
.pagination {
  margin: var(--bt-space-10) 0;
  text-align: center;
}

.pagination a,
.pagination span {
  display: inline-block;
  padding: var(--bt-space-2) var(--bt-space-4);
  margin: 0 var(--bt-space-1);
  border-radius: var(--bt-radius-sm);
  background-color: var(--bt-white);
  border: 1px solid var(--bt-border);
  color: var(--bt-navy-700);
  font-weight: 500;
  transition: all var(--bt-transition-fast);
}

.pagination a:hover {
  background-color: var(--bt-navy-900);
  color: var(--bt-white);
  border-color: var(--bt-navy-900);
}

.pagination .current {
  background-color: var(--bt-navy-900);
  color: var(--bt-white);
  border-color: var(--bt-navy-900);
}

/* =====================================================================
   19. Forms (Contact Form 7)
   ===================================================================== */
.wpcf7-form {
  background-color: var(--bt-white);
  padding: var(--bt-space-8);
  border-radius: var(--bt-radius-lg);
  box-shadow: var(--bt-shadow-md);
  border: 1px solid var(--bt-border);
}

.wpcf7-form label {
  display: block;
  font-weight: 600;
  color: var(--bt-navy-800);
  margin-bottom: var(--bt-space-4);
  font-size: var(--bt-fs-sm);
}

.wpcf7-form .required {
  background-color: var(--bt-danger);
  color: var(--bt-white);
  font-size: var(--bt-fs-xs);
  padding: 2px 8px;
  border-radius: 2px;
  margin-left: var(--bt-space-2);
  font-weight: 500;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100%;
  padding: var(--bt-space-3) var(--bt-space-4);
  border: 1.5px solid var(--bt-border);
  border-radius: var(--bt-radius-sm);
  font-size: var(--bt-fs-base);
  font-family: var(--bt-font-sans);
  background-color: var(--bt-bg-soft);
  transition: all var(--bt-transition-fast);
  color: var(--bt-text-primary);
}

.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
  outline: none;
  border-color: var(--bt-navy-700);
  background-color: var(--bt-white);
  box-shadow: 0 0 0 3px rgba(11, 31, 63, 0.1);
}

.wpcf7-form .wpcf7-submit {
  background: linear-gradient(135deg, var(--bt-navy-900) 0%, var(--bt-navy-700) 100%);
  color: var(--bt-white);
  padding: var(--bt-space-4) var(--bt-space-12);
  border: none;
  border-radius: var(--bt-radius-md);
  font-size: var(--bt-fs-base);
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  width: auto;
  margin-top: var(--bt-space-4);
  box-shadow: var(--bt-shadow-md);
  transition: all var(--bt-transition-base);
}

.wpcf7-form .wpcf7-submit:hover {
  background: linear-gradient(135deg, var(--bt-gold-700) 0%, var(--bt-gold-600) 100%);
  transform: translateY(-2px);
  box-shadow: var(--bt-shadow-lg);
}

/* =====================================================================
   20. Top Page Hero / Sections
   ===================================================================== */
.appeal {
  background: linear-gradient(135deg, var(--bt-navy-900) 0%, var(--bt-navy-700) 100%);
  color: var(--bt-white);
  padding: var(--bt-space-16) var(--bt-space-8);
  text-align: center;
  position: relative;
  overflow: hidden;
  border-bottom: 4px solid var(--bt-gold-600);
}

.appeal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(
    circle at 30% 50%,
    rgba(201, 169, 97, 0.1) 0%,
    transparent 50%
  );
  pointer-events: none;
}

.appeal h1,
.appeal-title {
  color: var(--bt-white) !important;
  font-size: var(--bt-fs-4xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: var(--bt-space-4);
  border: none !important;
  padding: 0 !important;
}

.appeal-message {
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--bt-fs-md);
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.8;
}

@media (max-width: 768px) {
  .appeal {
    padding: var(--bt-space-10) var(--bt-space-4);
  }
  .appeal h1 {
    font-size: var(--bt-fs-2xl);
  }
}

/* =====================================================================
   21. Code Blocks
   ===================================================================== */
.entry-content code,
.article-body code {
  font-family: var(--bt-font-mono);
  background-color: var(--bt-bg-section);
  border: 1px solid var(--bt-border);
  padding: 2px 8px;
  border-radius: var(--bt-radius-sm);
  font-size: 0.9em;
  color: var(--bt-navy-800);
}

.entry-content pre,
.article-body pre {
  background-color: var(--bt-navy-900);
  color: #E5E7EB;
  padding: var(--bt-space-5);
  border-radius: var(--bt-radius-md);
  overflow-x: auto;
  margin: var(--bt-space-6) 0;
  box-shadow: var(--bt-shadow-md);
  border: 1px solid var(--bt-navy-700);
}

.entry-content pre code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
}

/* =====================================================================
   22. Search Form
   ===================================================================== */
.search-form input[type="search"],
.searchform input[type="text"] {
  background-color: var(--bt-white);
  border: 1.5px solid var(--bt-border);
  padding: var(--bt-space-3) var(--bt-space-4);
  border-radius: var(--bt-radius-md);
  font-size: var(--bt-fs-sm);
}

.search-form input[type="search"]:focus {
  border-color: var(--bt-navy-700);
}

/* =====================================================================
   23. Cookie / Privacy Notice / Modal
   ===================================================================== */
.appeal-area-content,
.notice-box {
  background-color: var(--bt-bg-section);
  border-left: 4px solid var(--bt-gold-600);
  padding: var(--bt-space-4) var(--bt-space-5);
  border-radius: 0 var(--bt-radius-md) var(--bt-radius-md) 0;
  margin: var(--bt-space-6) 0;
  font-size: var(--bt-fs-sm);
  color: var(--bt-text-secondary);
}

/* =====================================================================
   24. Author Box (執筆者情報)
   ===================================================================== */
.author-box {
  background-color: var(--bt-white);
  border: 1px solid var(--bt-border);
  border-radius: var(--bt-radius-lg);
  padding: var(--bt-space-6);
  margin: var(--bt-space-8) 0;
  box-shadow: var(--bt-shadow-sm);
  display: flex;
  gap: var(--bt-space-5);
  align-items: flex-start;
}

.author-box-thumb img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid var(--bt-gold-600);
}

.author-box-name {
  color: var(--bt-navy-900);
  font-weight: 700;
  font-size: var(--bt-fs-md);
  margin-bottom: var(--bt-space-2);
}

.author-box-description {
  color: var(--bt-text-secondary);
  font-size: var(--bt-fs-sm);
  line-height: 1.7;
}

/* =====================================================================
   25. SNS Share Buttons
   ===================================================================== */
.sns-share {
  margin: var(--bt-space-8) 0;
  padding-top: var(--bt-space-6);
  border-top: 1px solid var(--bt-border);
}

.sns-share-buttons {
  display: flex;
  gap: var(--bt-space-3);
  flex-wrap: wrap;
}

.sns-share a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--bt-space-3) var(--bt-space-5);
  border-radius: var(--bt-radius-md);
  background-color: var(--bt-bg-section);
  color: var(--bt-navy-800);
  font-weight: 500;
  font-size: var(--bt-fs-sm);
  text-decoration: none;
  transition: all var(--bt-transition-fast);
  border: 1px solid var(--bt-border);
}

.sns-share a:hover {
  background-color: var(--bt-navy-900);
  color: var(--bt-white);
  border-color: var(--bt-navy-900);
}

/* =====================================================================
   26. Cocoon Skin Reset (スキンが付与する不要な装飾の打ち消し)
   ===================================================================== */
.cf::before,
.cf::after {
  content: none !important;
}

/* スキンによる不要なグラデーションをリセット */
.entry-card::before,
.entry-card::after,
.related-entry-card::before,
.related-entry-card::after {
  content: none;
}

/* =====================================================================
   27. Print Style
   ===================================================================== */
@media print {
  body {
    background: white;
    color: black;
    font-size: 12pt;
  }

  #header,
  #footer,
  #sidebar,
  .sns-share,
  .related-entry-cards,
  .breadcrumb,
  .pagination,
  .ad,
  .wp-block-button {
    display: none !important;
  }

  .article {
    box-shadow: none;
    padding: 0;
  }

  a {
    color: black;
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }
}

/* =====================================================================
   28. Mobile Responsive Adjustments
   ===================================================================== */
@media (max-width: 1024px) {
  #header-in.wrap {
    padding: 0 var(--bt-space-4);
  }
}

@media (max-width: 768px) {
  body {
    font-size: var(--bt-fs-sm);
  }

  .entry-content h2 {
    font-size: var(--bt-fs-lg);
    margin: var(--bt-space-8) 0 var(--bt-space-4);
    padding: var(--bt-space-3) 0 var(--bt-space-3) var(--bt-space-4);
  }

  .entry-content h3 {
    font-size: var(--bt-fs-base);
    margin: var(--bt-space-6) 0 var(--bt-space-3);
  }

  .article {
    padding: var(--bt-space-5) var(--bt-space-4);
  }

  .toc {
    padding: var(--bt-space-4);
  }

  .wpcf7-form {
    padding: var(--bt-space-4);
  }
}

@media (max-width: 480px) {
  .site-name-text-link {
    font-size: var(--bt-fs-xl);
  }

  .entry-title {
    font-size: var(--bt-fs-xl) !important;
  }
}

/* =====================================================================
   29. Utility Classes (記事内で使えるクラス)
   ===================================================================== */
.bt-text-center { text-align: center !important; }
.bt-text-right  { text-align: right !important; }
.bt-text-bold   { font-weight: 700 !important; }
.bt-text-muted  { color: var(--bt-text-muted) !important; }
.bt-text-gold   { color: var(--bt-gold-700) !important; }
.bt-text-navy   { color: var(--bt-navy-900) !important; }

.bt-bg-section  { background-color: var(--bt-bg-section) !important; }
.bt-bg-soft     { background-color: var(--bt-bg-soft) !important; }

.bt-mt-0   { margin-top: 0 !important; }
.bt-mt-4   { margin-top: var(--bt-space-4) !important; }
.bt-mt-8   { margin-top: var(--bt-space-8) !important; }
.bt-mb-0   { margin-bottom: 0 !important; }
.bt-mb-4   { margin-bottom: var(--bt-space-4) !important; }
.bt-mb-8   { margin-bottom: var(--bt-space-8) !important; }

/* 商品比較カード(記事内のアフィリエイト訴求用) */
.bt-product-card {
  background: var(--bt-white);
  border: 2px solid var(--bt-border);
  border-radius: var(--bt-radius-lg);
  padding: var(--bt-space-6);
  margin: var(--bt-space-6) 0;
  box-shadow: var(--bt-shadow-md);
  transition: all var(--bt-transition-base);
  position: relative;
}

.bt-product-card:hover {
  border-color: var(--bt-gold-600);
  box-shadow: var(--bt-shadow-xl);
  transform: translateY(-2px);
}

.bt-product-card.bt-recommended::before {
  content: "おすすめ";
  position: absolute;
  top: -12px;
  left: var(--bt-space-6);
  background: var(--bt-gold-600);
  color: var(--bt-white);
  padding: 4px 16px;
  border-radius: 20px;
  font-size: var(--bt-fs-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.bt-product-name {
  color: var(--bt-navy-900);
  font-weight: 700;
  font-size: var(--bt-fs-lg);
  margin-bottom: var(--bt-space-3);
  border-bottom: 2px solid var(--bt-border);
  padding-bottom: var(--bt-space-3);
}

.bt-product-spec {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--bt-space-2);
  margin-bottom: var(--bt-space-4);
}

.bt-product-spec dt {
  font-weight: 600;
  color: var(--bt-text-secondary);
  font-size: var(--bt-fs-sm);
  background: var(--bt-bg-section);
  padding: var(--bt-space-2);
  border-radius: var(--bt-radius-sm);
}

.bt-product-spec dd {
  margin: 0;
  padding: var(--bt-space-2);
  font-size: var(--bt-fs-sm);
}

/* =====================================================================
   30. Subtle Animations
   ===================================================================== */
@keyframes bt-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.entry-card,
.bt-product-card {
  animation: bt-fade-in-up 0.4s ease-out;
}

/* =====================================================================
   END of biz-trend Custom CSS
   ---------------------------------------------------------------------
   メンテナンスメモ:
   - Cocoon 親テーマのアップデート時は、念のためサイト表示確認
   - 不具合があれば、該当セクションを一時的にコメントアウトして切り分け
   - カラー変更したい場合は :root の CSS 変数のみ書き換え
   - 全体の色味を変えたい場合:--bt-navy-900 を別の色に
   - アクセントを変えたい場合:--bt-gold-600 を別の色に
   ===================================================================== */
/* ===========================================================================
   biz-trend ホームページデザイン CSS v1.0
   作成日: 2026-05-10

   設計方針:
   - すべてのスタイルを .biz-trend-homepage 配下にスコープ
   - 既存の cocoon-child-biz-trend.css(1692行)と完全に独立
   - BEM 風命名(.bt-{block}__{element}--{modifier})
   - !important 使用禁止

   配置先: WordPress 子テーマの style.css 末尾、または別ファイルとして読み込み
   詳細: 06_IMPLEMENTATION_GUIDE.md 参照
   =========================================================================== */


/* ===========================================================================
   1. CSS Custom Properties (Design Tokens)
   =========================================================================== */

.biz-trend-homepage {
  /* Colors - Primary */
  --bt-navy: #0B1F3F;
  --bt-navy-90: #1A3460;
  --bt-navy-70: #3D5680;
  --bt-navy-50: #6B7B95;

  /* Colors - Accent */
  --bt-gold: #C9A961;
  --bt-gold-soft: #E5D4A3;
  --bt-gold-deep: #A88A45;

  /* Colors - Neutral */
  --bt-white: #FFFFFF;
  --bt-bg: #FAFAFA;
  --bt-bg-card: #FFFFFF;
  --bt-bg-section: #F5F5F0;

  /* Colors - Text */
  --bt-text: #1A1A1A;
  --bt-text-strong: #0B1F3F;
  --bt-text-meta: #6B7280;
  --bt-text-light: #9CA3AF;
  --bt-text-on-dark: #FAFAFA;

  /* Colors - Border */
  --bt-border: #E5E7EB;
  --bt-border-soft: #F3F4F6;

  /* Typography */
  --bt-font-serif: "Noto Serif JP", "Yu Mincho", "游明朝", "Hiragino Mincho ProN", serif;
  --bt-font-sans: "Noto Sans JP", "Yu Gothic Medium", "游ゴシック Medium", "Hiragino Kaku Gothic ProN", sans-serif;

  /* Type Scale */
  --bt-text-xs: 11px;
  --bt-text-sm: 13px;
  --bt-text-base: 16px;
  --bt-text-lg: 18px;
  --bt-text-xl: 20px;
  --bt-text-2xl: 24px;
  --bt-text-3xl: 32px;
  --bt-text-4xl: 40px;
  --bt-text-5xl: 48px;

  /* Line Height */
  --bt-leading-tight: 1.2;
  --bt-leading-snug: 1.4;
  --bt-leading-normal: 1.6;
  --bt-leading-relaxed: 1.75;

  /* Letter Spacing */
  --bt-tracking-tight: -0.02em;
  --bt-tracking-normal: 0;
  --bt-tracking-wide: 0.04em;
  --bt-tracking-wider: 0.08em;

  /* Spacing (4px base) */
  --bt-space-1: 4px;
  --bt-space-2: 8px;
  --bt-space-3: 12px;
  --bt-space-4: 16px;
  --bt-space-5: 24px;
  --bt-space-6: 32px;
  --bt-space-7: 48px;
  --bt-space-8: 64px;
  --bt-space-9: 80px;
  --bt-space-10: 120px;

  /* Shadows */
  --bt-shadow-sm: 0 1px 3px rgba(11, 31, 63, 0.04);
  --bt-shadow-md: 0 4px 12px rgba(11, 31, 63, 0.06);
  --bt-shadow-lg: 0 10px 30px rgba(11, 31, 63, 0.08);

  /* Radius */
  --bt-radius-sm: 2px;
  --bt-radius: 4px;
  --bt-radius-md: 8px;
  --bt-radius-lg: 12px;

  /* Transitions */
  --bt-transition-fast: 150ms ease-out;
  --bt-transition: 250ms ease-out;
  --bt-transition-slow: 400ms ease-out;

  /* Container */
  --bt-container-max: 1280px;
  --bt-container-padding: 48px;
}

/* Mobile container padding */
@media (max-width: 768px) {
  .biz-trend-homepage {
    --bt-container-padding: 20px;
  }
}


/* ===========================================================================
   2. Base Reset (scoped)
   =========================================================================== */

.biz-trend-homepage,
.biz-trend-homepage * {
  box-sizing: border-box;
}

.biz-trend-homepage {
  font-family: var(--bt-font-sans);
  color: var(--bt-text);
  background-color: var(--bt-bg);
  line-height: var(--bt-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.biz-trend-homepage img {
  max-width: 100%;
  height: auto;
  display: block;
}

.biz-trend-homepage a {
  color: inherit;
  text-decoration: none;
  transition: color var(--bt-transition-fast);
}

.biz-trend-homepage a:hover {
  color: var(--bt-gold-deep);
}

.biz-trend-homepage a:focus-visible {
  outline: 2px solid var(--bt-gold);
  outline-offset: 2px;
  border-radius: var(--bt-radius);
}

.biz-trend-homepage h1,
.biz-trend-homepage h2,
.biz-trend-homepage h3 {
  margin: 0;
  font-family: var(--bt-font-serif);
  color: var(--bt-text-strong);
  letter-spacing: var(--bt-tracking-tight);
  line-height: var(--bt-leading-snug);
}

.biz-trend-homepage p {
  margin: 0;
}

.biz-trend-homepage ul,
.biz-trend-homepage ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Utility */
.biz-trend-homepage .bt-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ===========================================================================
   3. Container
   =========================================================================== */

.biz-trend-homepage .bt-container {
  max-width: var(--bt-container-max);
  margin: 0 auto;
  padding-left: var(--bt-container-padding);
  padding-right: var(--bt-container-padding);
}


/* ===========================================================================
   4. Hero Section
   =========================================================================== */

.biz-trend-homepage .bt-hero {
  padding-top: var(--bt-space-7);
  padding-bottom: var(--bt-space-9);
}

.biz-trend-homepage .bt-hero__grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--bt-space-7);
  align-items: stretch;
}

@media (max-width: 1024px) {
  .biz-trend-homepage .bt-hero__grid {
    grid-template-columns: 1fr;
    gap: var(--bt-space-6);
  }
}

/* Hero - Main Card */

.biz-trend-homepage .bt-hero__main {
  display: flex;
  flex-direction: column;
}

.biz-trend-homepage .bt-hero__main-figure {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--bt-radius);
  background-color: var(--bt-border-soft);
  margin-bottom: var(--bt-space-5);
}

.biz-trend-homepage .bt-hero__main-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--bt-transition-slow);
}

.biz-trend-homepage .bt-hero__main:hover .bt-hero__main-figure img {
  transform: scale(1.03);
}

.biz-trend-homepage .bt-hero__main-tag {
  font-family: var(--bt-font-sans);
  font-size: var(--bt-text-xs);
  font-weight: 700;
  letter-spacing: var(--bt-tracking-wider);
  text-transform: uppercase;
  color: var(--bt-gold-deep);
  margin-bottom: var(--bt-space-3);
}

.biz-trend-homepage .bt-hero__main-title {
  font-size: var(--bt-text-4xl);
  font-weight: 600;
  line-height: var(--bt-leading-tight);
  margin-bottom: var(--bt-space-4);
}

@media (min-width: 1024px) {
  .biz-trend-homepage .bt-hero__main-title {
    font-size: var(--bt-text-5xl);
  }
}

@media (max-width: 640px) {
  .biz-trend-homepage .bt-hero__main-title {
    font-size: var(--bt-text-3xl);
  }
}

.biz-trend-homepage .bt-hero__main-summary {
  font-size: var(--bt-text-lg);
  line-height: var(--bt-leading-normal);
  color: var(--bt-text);
  margin-bottom: var(--bt-space-5);
}

/* Hero - Sub Cards */

.biz-trend-homepage .bt-hero__sub {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--bt-space-4);
}

.biz-trend-homepage .bt-hero__sub-card {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--bt-space-4);
  align-items: start;
  padding-bottom: var(--bt-space-4);
  border-bottom: 1px solid var(--bt-border-soft);
}

.biz-trend-homepage .bt-hero__sub-card:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

@media (max-width: 1024px) {
  .biz-trend-homepage .bt-hero__sub {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: var(--bt-space-2);
    gap: var(--bt-space-5);
  }
  .biz-trend-homepage .bt-hero__sub-card {
    grid-template-columns: 1fr;
    min-width: 240px;
    padding-bottom: 0;
    border-bottom: none;
  }
}

.biz-trend-homepage .bt-hero__sub-figure {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--bt-radius);
  background-color: var(--bt-border-soft);
}

.biz-trend-homepage .bt-hero__sub-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--bt-transition);
}

.biz-trend-homepage .bt-hero__sub-card:hover .bt-hero__sub-figure img {
  transform: scale(1.05);
}

.biz-trend-homepage .bt-hero__sub-tag {
  font-size: var(--bt-text-xs);
  font-weight: 700;
  letter-spacing: var(--bt-tracking-wider);
  text-transform: uppercase;
  color: var(--bt-gold-deep);
  margin-bottom: var(--bt-space-2);
  display: block;
}

.biz-trend-homepage .bt-hero__sub-title {
  font-family: var(--bt-font-serif);
  font-size: var(--bt-text-base);
  font-weight: 500;
  line-height: var(--bt-leading-snug);
  color: var(--bt-text-strong);
}


/* ===========================================================================
   5. Meta (date / author / category)
   =========================================================================== */

.biz-trend-homepage .bt-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bt-space-4);
  font-size: var(--bt-text-sm);
  color: var(--bt-text-meta);
  font-weight: 400;
}

.biz-trend-homepage .bt-meta__item {
  display: inline-flex;
  align-items: center;
  gap: var(--bt-space-1);
}

.biz-trend-homepage .bt-meta__item + .bt-meta__item::before {
  content: "·";
  margin-right: var(--bt-space-3);
  color: var(--bt-text-light);
}

.biz-trend-homepage .bt-meta time {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}


/* ===========================================================================
   6. Category Navigation
   =========================================================================== */

.biz-trend-homepage .bt-cat-nav {
  border-top: 1px solid var(--bt-border);
  border-bottom: 1px solid var(--bt-border);
  background-color: var(--bt-white);
  position: sticky;
  top: 0;
  z-index: 10;
  margin-bottom: var(--bt-space-9);
}

.biz-trend-homepage .bt-cat-nav__list {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.biz-trend-homepage .bt-cat-nav__list::-webkit-scrollbar {
  display: none;
}

.biz-trend-homepage .bt-cat-nav__item {
  display: inline-flex;
  align-items: center;
  height: 56px;
  padding: 0 var(--bt-space-5);
  font-size: var(--bt-text-sm);
  font-weight: 600;
  color: var(--bt-text);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: border-color var(--bt-transition-fast), color var(--bt-transition-fast);
}

.biz-trend-homepage .bt-cat-nav__item:hover {
  color: var(--bt-navy);
  border-bottom-color: var(--bt-gold-soft);
}

.biz-trend-homepage .bt-cat-nav__item--active {
  color: var(--bt-navy);
  border-bottom-color: var(--bt-gold);
}


/* ===========================================================================
   7. Section
   =========================================================================== */

.biz-trend-homepage .bt-section {
  padding-top: var(--bt-space-8);
  padding-bottom: var(--bt-space-9);
}

.biz-trend-homepage .bt-section + .bt-section {
  padding-top: 0;
}

.biz-trend-homepage .bt-section--alt {
  background-color: var(--bt-bg-section);
  padding-top: var(--bt-space-9);
  padding-bottom: var(--bt-space-9);
  margin-top: var(--bt-space-9);
}

.biz-trend-homepage .bt-section__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--bt-border);
  padding-bottom: var(--bt-space-4);
  margin-bottom: var(--bt-space-7);
  position: relative;
}

.biz-trend-homepage .bt-section__head::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 64px;
  height: 2px;
  background-color: var(--bt-gold);
}

.biz-trend-homepage .bt-section__title {
  font-size: var(--bt-text-2xl);
  font-weight: 600;
  color: var(--bt-text-strong);
  letter-spacing: var(--bt-tracking-tight);
}

.biz-trend-homepage .bt-section__more {
  font-size: var(--bt-text-sm);
  font-weight: 600;
  color: var(--bt-text-meta);
  letter-spacing: var(--bt-tracking-wide);
  white-space: nowrap;
  transition: color var(--bt-transition-fast);
}

.biz-trend-homepage .bt-section__more:hover {
  color: var(--bt-gold-deep);
}

.biz-trend-homepage .bt-section__more::after {
  content: " →";
  margin-left: var(--bt-space-1);
}


/* ===========================================================================
   8. Grid
   =========================================================================== */

.biz-trend-homepage .bt-grid {
  display: grid;
  gap: var(--bt-space-6);
}

.biz-trend-homepage .bt-grid--3col {
  grid-template-columns: repeat(3, 1fr);
}

.biz-trend-homepage .bt-grid--2col {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 1024px) {
  .biz-trend-homepage .bt-grid--3col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .biz-trend-homepage .bt-grid--3col,
  .biz-trend-homepage .bt-grid--2col {
    grid-template-columns: 1fr;
    gap: var(--bt-space-5);
  }
}


/* ===========================================================================
   9. Card
   =========================================================================== */

.biz-trend-homepage .bt-card {
  display: flex;
  flex-direction: column;
  background-color: var(--bt-bg-card);
  border-radius: var(--bt-radius);
  overflow: hidden;
  box-shadow: var(--bt-shadow-sm);
  transition: transform var(--bt-transition), box-shadow var(--bt-transition);
}

.biz-trend-homepage .bt-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--bt-shadow-md);
}

.biz-trend-homepage .bt-card__figure {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--bt-border-soft);
}

.biz-trend-homepage .bt-card__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--bt-transition-slow);
}

.biz-trend-homepage .bt-card:hover .bt-card__figure img {
  transform: scale(1.05);
}

.biz-trend-homepage .bt-card__body {
  padding: var(--bt-space-5);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.biz-trend-homepage .bt-card__tag {
  font-size: var(--bt-text-xs);
  font-weight: 700;
  letter-spacing: var(--bt-tracking-wider);
  text-transform: uppercase;
  color: var(--bt-gold-deep);
  margin-bottom: var(--bt-space-2);
}

.biz-trend-homepage .bt-card__title {
  font-family: var(--bt-font-sans);
  font-size: var(--bt-text-lg);
  font-weight: 700;
  line-height: var(--bt-leading-snug);
  color: var(--bt-text-strong);
  margin-bottom: var(--bt-space-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: var(--bt-tracking-normal);
}

.biz-trend-homepage .bt-card__summary {
  font-size: var(--bt-text-sm);
  line-height: var(--bt-leading-normal);
  color: var(--bt-text-meta);
  margin-bottom: var(--bt-space-4);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.biz-trend-homepage .bt-card__meta {
  margin-top: auto;
  font-size: var(--bt-text-xs);
}


/* ===========================================================================
   10. Card - Featured (large)
   =========================================================================== */

.biz-trend-homepage .bt-card--featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background-color: var(--bt-bg-card);
}

.biz-trend-homepage .bt-card--featured .bt-card__figure {
  aspect-ratio: auto;
  height: 100%;
  min-height: 280px;
}

.biz-trend-homepage .bt-card--featured .bt-card__body {
  padding: var(--bt-space-7);
  justify-content: center;
}

.biz-trend-homepage .bt-card--featured .bt-card__title {
  font-family: var(--bt-font-serif);
  font-size: var(--bt-text-2xl);
  font-weight: 600;
  -webkit-line-clamp: 3;
}

@media (max-width: 768px) {
  .biz-trend-homepage .bt-card--featured {
    grid-template-columns: 1fr;
  }
  .biz-trend-homepage .bt-card--featured .bt-card__figure {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
  .biz-trend-homepage .bt-card--featured .bt-card__body {
    padding: var(--bt-space-5);
  }
}


/* ===========================================================================
   11. Buttons
   =========================================================================== */

.biz-trend-homepage .bt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bt-space-2);
  padding: 14px 28px;
  font-family: var(--bt-font-sans);
  font-size: var(--bt-text-sm);
  font-weight: 600;
  letter-spacing: var(--bt-tracking-wide);
  border-radius: var(--bt-radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all var(--bt-transition-fast);
  text-decoration: none;
  white-space: nowrap;
}

.biz-trend-homepage .bt-btn--primary {
  background-color: var(--bt-gold);
  color: var(--bt-navy);
  border-color: var(--bt-gold);
}

.biz-trend-homepage .bt-btn--primary:hover {
  background-color: var(--bt-gold-deep);
  border-color: var(--bt-gold-deep);
  color: var(--bt-white);
  transform: translateY(-1px);
  box-shadow: var(--bt-shadow-md);
}

.biz-trend-homepage .bt-btn--outline {
  background-color: transparent;
  color: var(--bt-navy);
  border-color: var(--bt-navy);
}

.biz-trend-homepage .bt-btn--outline:hover {
  background-color: var(--bt-navy);
  color: var(--bt-white);
}

.biz-trend-homepage .bt-btn--lg {
  padding: 18px 36px;
  font-size: var(--bt-text-base);
}


/* ===========================================================================
   12. Newsletter Section
   =========================================================================== */

.biz-trend-homepage .bt-newsletter {
  background: linear-gradient(135deg, var(--bt-navy) 0%, var(--bt-navy-90) 100%);
  color: var(--bt-text-on-dark);
  padding: var(--bt-space-9) var(--bt-container-padding);
  margin-top: var(--bt-space-9);
  position: relative;
  overflow: hidden;
}

.biz-trend-homepage .bt-newsletter::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--bt-gold), transparent);
}

.biz-trend-homepage .bt-newsletter__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.biz-trend-homepage .bt-newsletter__eyebrow {
  font-size: var(--bt-text-xs);
  font-weight: 700;
  letter-spacing: var(--bt-tracking-wider);
  text-transform: uppercase;
  color: var(--bt-gold);
  margin-bottom: var(--bt-space-4);
}

.biz-trend-homepage .bt-newsletter__title {
  font-family: var(--bt-font-serif);
  font-size: var(--bt-text-3xl);
  font-weight: 600;
  color: var(--bt-text-on-dark);
  margin-bottom: var(--bt-space-4);
  line-height: var(--bt-leading-snug);
}

@media (min-width: 1024px) {
  .biz-trend-homepage .bt-newsletter__title {
    font-size: var(--bt-text-4xl);
  }
}

.biz-trend-homepage .bt-newsletter__lead {
  font-size: var(--bt-text-base);
  line-height: var(--bt-leading-relaxed);
  color: var(--bt-text-on-dark);
  opacity: 0.85;
  margin-bottom: var(--bt-space-6);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.biz-trend-homepage .bt-newsletter__form {
  display: flex;
  gap: var(--bt-space-3);
  max-width: 480px;
  margin: 0 auto;
}

@media (max-width: 640px) {
  .biz-trend-homepage .bt-newsletter__form {
    flex-direction: column;
  }
}

.biz-trend-homepage .bt-newsletter__input {
  flex: 1;
  padding: 14px 18px;
  font-family: var(--bt-font-sans);
  font-size: var(--bt-text-base);
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--bt-text-on-dark);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--bt-radius);
  outline: none;
  transition: border-color var(--bt-transition-fast);
}

.biz-trend-homepage .bt-newsletter__input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.biz-trend-homepage .bt-newsletter__input:focus {
  border-color: var(--bt-gold);
  background-color: rgba(255, 255, 255, 0.12);
}

.biz-trend-homepage .bt-newsletter__note {
  margin-top: var(--bt-space-4);
  font-size: var(--bt-text-xs);
  color: var(--bt-text-on-dark);
  opacity: 0.7;
}


/* ===========================================================================
   13. Editor Pick Section
   =========================================================================== */

.biz-trend-homepage .bt-pick {
  background-color: var(--bt-bg-section);
  padding: var(--bt-space-9) 0;
  margin-top: var(--bt-space-9);
}

.biz-trend-homepage .bt-pick__head {
  text-align: center;
  margin-bottom: var(--bt-space-8);
}

.biz-trend-homepage .bt-pick__eyebrow {
  font-size: var(--bt-text-xs);
  font-weight: 700;
  letter-spacing: var(--bt-tracking-wider);
  text-transform: uppercase;
  color: var(--bt-gold-deep);
  margin-bottom: var(--bt-space-3);
}

.biz-trend-homepage .bt-pick__title {
  font-family: var(--bt-font-serif);
  font-size: var(--bt-text-3xl);
  font-weight: 600;
  color: var(--bt-text-strong);
  margin-bottom: var(--bt-space-4);
}

.biz-trend-homepage .bt-pick__lead {
  font-size: var(--bt-text-base);
  color: var(--bt-text-meta);
  line-height: var(--bt-leading-relaxed);
  max-width: 560px;
  margin: 0 auto;
}


/* ===========================================================================
   14. Trust Bar (信頼感を出す薄いバー)
   =========================================================================== */

.biz-trend-homepage .bt-trust {
  background-color: var(--bt-white);
  border-top: 1px solid var(--bt-border-soft);
  border-bottom: 1px solid var(--bt-border-soft);
  padding: var(--bt-space-5) 0;
  margin-bottom: var(--bt-space-9);
}

.biz-trend-homepage .bt-trust__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--bt-space-7);
  flex-wrap: wrap;
}

.biz-trend-homepage .bt-trust__item {
  display: inline-flex;
  align-items: center;
  gap: var(--bt-space-2);
  font-size: var(--bt-text-xs);
  font-weight: 600;
  letter-spacing: var(--bt-tracking-wide);
  text-transform: uppercase;
  color: var(--bt-text-meta);
}

.biz-trend-homepage .bt-trust__item::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: var(--bt-gold);
  border-radius: 50%;
}


/* ===========================================================================
   15. Footer Note (記事一覧ページへの導線)
   =========================================================================== */

.biz-trend-homepage .bt-foot-cta {
  text-align: center;
  padding: var(--bt-space-8) 0 var(--bt-space-9);
  background-color: var(--bt-bg);
}

.biz-trend-homepage .bt-foot-cta__title {
  font-family: var(--bt-font-serif);
  font-size: var(--bt-text-2xl);
  font-weight: 600;
  color: var(--bt-text-strong);
  margin-bottom: var(--bt-space-5);
}


/* ===========================================================================
   16. Cocoon Override (homepage page only)
   ホームページ固定ページに限り、Cocoon の不要要素を非表示にする
   =========================================================================== */

/* ホームページではタイトルとパンくずリストを非表示 */
body.home .article-header,
body.front-top-page .article-header,
body.home .breadcrumb,
body.front-top-page .breadcrumb {
  display: none;
}

/* ホームページでは記事の上下マージン削減 */
body.home .article,
body.front-top-page .article {
  padding: 0;
  margin: 0;
  background: transparent;
  box-shadow: none;
  border: none;
}

/* ホームページのコンテンツ領域は最大幅解除 */
body.home #main,
body.front-top-page #main {
  width: 100%;
  max-width: none;
}

body.home .main,
body.front-top-page .main {
  padding: 0;
  margin: 0;
  width: 100%;
  background: transparent;
}


/* ===========================================================================
   17. Print
   =========================================================================== */

@media print {
  .biz-trend-homepage .bt-cat-nav,
  .biz-trend-homepage .bt-newsletter,
  .biz-trend-homepage .bt-foot-cta {
    display: none;
  }
}


/* ===========================================================================
   18. Reduced Motion
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .biz-trend-homepage *,
  .biz-trend-homepage *::before,
  .biz-trend-homepage *::after {
    animation-duration: 0.01ms;
    transition-duration: 0.01ms;
  }
}


/* ===========================================================================
   END OF FILE
   biz-trend ホームページデザイン CSS v1.0
   合計: ~700行
   =========================================================================== */
/* ===========================================================================
   biz-trend 図解キット 共通CSS v1.0
   作成日: 2026-05-10

   配置先: WordPress 子テーマの style.css 末尾に追記
   または: output/design/03_styles_homepage.css と統合

   設計方針:
   - 全クラスに .bt-dia 接頭辞(他要素と衝突回避)
   - 既存の biz-trend デザインシステム変数を再利用
   - レスポンシブ(モバイルで縦積み)
   - print 対応(印刷時に色保持)
   =========================================================================== */


/* ===========================================================================
   1. 共通基盤
   =========================================================================== */

.bt-dia {
  /* デザイントークン(既存と統一) */
  --bt-navy: #0B1F3F;
  --bt-navy-90: #1A3460;
  --bt-gold: #C9A961;
  --bt-gold-soft: #E5D4A3;
  --bt-gold-deep: #A88A45;
  --bt-bg: #FAFAFA;
  --bt-bg-card: #FFFFFF;
  --bt-text: #1A1A1A;
  --bt-text-meta: #6B7280;
  --bt-border: #E5E7EB;
  --bt-border-soft: #F3F4F6;
  --bt-shadow-sm: 0 1px 3px rgba(11, 31, 63, 0.04);
  --bt-shadow-md: 0 4px 12px rgba(11, 31, 63, 0.06);
  --bt-radius: 4px;

  /* 自身のスタイル */
  margin: 32px 0;
  font-family: "Noto Sans JP", sans-serif;
  color: var(--bt-text);
  line-height: 1.6;
}

.bt-dia *,
.bt-dia *::before,
.bt-dia *::after {
  box-sizing: border-box;
}

.bt-dia__title {
  font-family: "Noto Serif JP", serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--bt-navy);
  margin: 0 0 16px 0;
  padding-left: 12px;
  border-left: 3px solid var(--bt-gold);
  line-height: 1.4;
}

.bt-dia__caption {
  font-size: 12px;
  color: var(--bt-text-meta);
  margin-top: 8px;
  text-align: right;
}

.bt-dia__source {
  display: block;
  font-size: 11px;
  color: var(--bt-text-meta);
  margin-top: 4px;
}


/* ===========================================================================
   2. Pattern: 比較表マトリクス(.bt-dia--comparison)
   =========================================================================== */

.bt-dia--comparison {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.bt-dia--comparison table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bt-bg-card);
  box-shadow: var(--bt-shadow-sm);
  border-radius: var(--bt-radius);
  overflow: hidden;
  font-size: 14px;
}

.bt-dia--comparison thead th {
  background: var(--bt-navy);
  color: #fff;
  font-weight: 600;
  padding: 14px 16px;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.02em;
  border: none;
}

.bt-dia--comparison thead th:first-child {
  background: var(--bt-navy-90);
  text-align: left;
}

.bt-dia--comparison tbody th {
  background: var(--bt-bg);
  color: var(--bt-navy);
  font-weight: 600;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--bt-border-soft);
  font-size: 13px;
}

.bt-dia--comparison tbody td {
  padding: 12px 16px;
  text-align: center;
  border-bottom: 1px solid var(--bt-border-soft);
  vertical-align: middle;
}

.bt-dia--comparison tbody tr:last-child th,
.bt-dia--comparison tbody tr:last-child td {
  border-bottom: none;
}

.bt-dia--comparison tbody tr:hover {
  background: rgba(201, 169, 97, 0.04);
}

/* セル内のチェック記号・バツ */
.bt-dia__check {
  color: var(--bt-gold-deep);
  font-weight: 700;
  font-size: 16px;
}

.bt-dia__cross {
  color: #9CA3AF;
  font-weight: 400;
  font-size: 16px;
}

.bt-dia__partial {
  color: var(--bt-text-meta);
  font-size: 13px;
  font-style: italic;
}

/* おすすめカラム強調 */
.bt-dia--comparison .bt-dia__col--highlight {
  background: linear-gradient(180deg, rgba(201, 169, 97, 0.08), rgba(201, 169, 97, 0.02));
}

.bt-dia--comparison thead th.bt-dia__col--highlight {
  background: linear-gradient(180deg, var(--bt-gold-deep), var(--bt-gold));
  color: var(--bt-navy);
  position: relative;
}

.bt-dia--comparison thead th.bt-dia__col--highlight::after {
  content: "★ おすすめ";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  background: var(--bt-navy);
  color: var(--bt-gold);
  padding: 2px 8px;
  border-radius: 99px;
  white-space: nowrap;
}


/* ===========================================================================
   3. Pattern: 棒グラフ(.bt-dia--bar)
   =========================================================================== */

.bt-dia--bar {
  background: var(--bt-bg-card);
  padding: 24px;
  border-radius: var(--bt-radius);
  box-shadow: var(--bt-shadow-sm);
}

.bt-dia--bar .bt-bar {
  display: grid;
  grid-template-columns: 140px 1fr 60px;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

@media (max-width: 640px) {
  .bt-dia--bar .bt-bar {
    grid-template-columns: 100px 1fr 50px;
    font-size: 13px;
  }
}

.bt-dia--bar .bt-bar__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--bt-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bt-dia--bar .bt-bar__track {
  height: 28px;
  background: var(--bt-border-soft);
  border-radius: var(--bt-radius);
  overflow: hidden;
  position: relative;
}

.bt-dia--bar .bt-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--bt-navy) 0%, var(--bt-navy-90) 100%);
  border-radius: var(--bt-radius);
  transition: width 0.8s ease-out;
  position: relative;
}

.bt-dia--bar .bt-bar__fill--gold {
  background: linear-gradient(90deg, var(--bt-gold-deep) 0%, var(--bt-gold) 100%);
}

.bt-dia--bar .bt-bar__fill--highlight {
  background: linear-gradient(90deg, var(--bt-gold) 0%, var(--bt-gold-soft) 100%);
  box-shadow: 0 0 0 2px var(--bt-gold);
}

.bt-dia--bar .bt-bar__value {
  font-size: 13px;
  font-weight: 700;
  color: var(--bt-navy);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.bt-dia--bar .bt-bar__unit {
  font-size: 11px;
  color: var(--bt-text-meta);
  margin-left: 2px;
  font-weight: 400;
}


/* ===========================================================================
   4. Pattern: 決定木(.bt-dia--tree)
   =========================================================================== */

.bt-dia--tree {
  background: var(--bt-bg-card);
  padding: 32px 24px;
  border-radius: var(--bt-radius);
  box-shadow: var(--bt-shadow-sm);
  text-align: center;
}

.bt-dia--tree .bt-tree__node {
  display: inline-block;
  padding: 14px 24px;
  background: var(--bt-bg-card);
  border: 1.5px solid var(--bt-navy);
  border-radius: var(--bt-radius);
  font-size: 14px;
  font-weight: 600;
  color: var(--bt-navy);
  max-width: 320px;
  line-height: 1.4;
}

.bt-dia--tree .bt-tree__node--question {
  background: var(--bt-navy);
  color: #fff;
  border-color: var(--bt-navy);
}

.bt-dia--tree .bt-tree__node--result {
  background: linear-gradient(180deg, var(--bt-gold-soft) 0%, var(--bt-gold) 100%);
  border-color: var(--bt-gold-deep);
  color: var(--bt-navy);
  font-weight: 700;
}

.bt-dia--tree .bt-tree__connector {
  width: 2px;
  height: 28px;
  background: var(--bt-border);
  margin: 0 auto;
}

.bt-dia--tree .bt-tree__branch {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.bt-dia--tree .bt-tree__path {
  flex: 1;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.bt-dia--tree .bt-tree__answer {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--bt-gold-deep);
  background: var(--bt-bg);
  border: 1px solid var(--bt-border);
  padding: 4px 12px;
  border-radius: 99px;
  margin: 8px 0;
}

.bt-dia--tree .bt-tree__answer--no {
  color: var(--bt-text-meta);
}


/* ===========================================================================
   5. Pattern: プロセスフロー(.bt-dia--process)
   =========================================================================== */

.bt-dia--process {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--bt-bg-card);
  padding: 24px;
  border-radius: var(--bt-radius);
  box-shadow: var(--bt-shadow-sm);
}

.bt-dia--process .bt-step {
  flex: 1;
  min-width: 140px;
  padding: 16px;
  background: var(--bt-bg);
  border-radius: var(--bt-radius);
  border-top: 3px solid var(--bt-gold);
  position: relative;
}

.bt-dia--process .bt-step__num {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  background: var(--bt-navy);
  color: var(--bt-gold);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
}

.bt-dia--process .bt-step__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--bt-navy);
  margin: 0 0 4px 0;
  line-height: 1.4;
}

.bt-dia--process .bt-step__desc {
  font-size: 12px;
  color: var(--bt-text-meta);
  line-height: 1.5;
}

.bt-dia--process .bt-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bt-gold);
  font-size: 20px;
  font-weight: 700;
  flex: 0 0 auto;
}

@media (max-width: 768px) {
  .bt-dia--process {
    flex-direction: column;
  }
  .bt-dia--process .bt-arrow {
    transform: rotate(90deg);
    padding: 4px 0;
  }
}


/* ===========================================================================
   6. Pattern: 統計強調(.bt-dia--stat)
   =========================================================================== */

.bt-dia--stat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.bt-dia--stat .bt-stat {
  background: var(--bt-bg-card);
  padding: 24px 20px;
  border-radius: var(--bt-radius);
  box-shadow: var(--bt-shadow-sm);
  border-top: 3px solid var(--bt-gold);
  text-align: center;
}

.bt-dia--stat .bt-stat__number {
  font-family: "Noto Serif JP", serif;
  font-size: 36px;
  font-weight: 600;
  color: var(--bt-navy);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}

.bt-dia--stat .bt-stat__unit {
  font-size: 18px;
  color: var(--bt-text-meta);
  font-weight: 400;
  margin-left: 2px;
}

.bt-dia--stat .bt-stat__label {
  font-size: 13px;
  color: var(--bt-text);
  line-height: 1.5;
  font-weight: 500;
}

.bt-dia--stat .bt-stat__source {
  font-size: 10px;
  color: var(--bt-text-meta);
  margin-top: 8px;
  letter-spacing: 0.02em;
}

.bt-dia--stat .bt-stat--featured {
  background: linear-gradient(135deg, var(--bt-navy) 0%, var(--bt-navy-90) 100%);
  border-top-color: var(--bt-gold);
}

.bt-dia--stat .bt-stat--featured .bt-stat__number,
.bt-dia--stat .bt-stat--featured .bt-stat__label {
  color: #fff;
}

.bt-dia--stat .bt-stat--featured .bt-stat__unit,
.bt-dia--stat .bt-stat--featured .bt-stat__source {
  color: rgba(255, 255, 255, 0.7);
}


/* ===========================================================================
   7. Pattern: 賛否対比(.bt-dia--procons)
   =========================================================================== */

.bt-dia--procons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 640px) {
  .bt-dia--procons {
    grid-template-columns: 1fr;
  }
}

.bt-dia--procons .bt-pc {
  background: var(--bt-bg-card);
  border-radius: var(--bt-radius);
  padding: 20px 24px;
  box-shadow: var(--bt-shadow-sm);
}

.bt-dia--procons .bt-pc__title {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bt-dia--procons .bt-pc--pro .bt-pc__title {
  color: var(--bt-gold-deep);
  border-bottom-color: var(--bt-gold);
}

.bt-dia--procons .bt-pc--pro .bt-pc__title::before {
  content: "✓";
  display: inline-flex;
  width: 22px;
  height: 22px;
  background: var(--bt-gold);
  color: var(--bt-navy);
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
}

.bt-dia--procons .bt-pc--con .bt-pc__title {
  color: var(--bt-navy);
  border-bottom-color: var(--bt-navy);
}

.bt-dia--procons .bt-pc--con .bt-pc__title::before {
  content: "!";
  display: inline-flex;
  width: 22px;
  height: 22px;
  background: var(--bt-navy);
  color: #fff;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
}

.bt-dia--procons ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.bt-dia--procons li {
  font-size: 13px;
  line-height: 1.6;
  color: var(--bt-text);
  padding: 6px 0 6px 18px;
  position: relative;
}

.bt-dia--procons li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--bt-text-meta);
}


/* ===========================================================================
   8. Eyecatch: CSS-only タイポグラフィカード
   =========================================================================== */

.bt-eyecatch {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #0B1F3F 0%, #1A3460 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px;
  color: #fff;
  font-family: "Noto Serif JP", serif;
  overflow: hidden;
  border-radius: var(--bt-radius);
}

.bt-eyecatch::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #C9A961, transparent);
}

.bt-eyecatch::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(201, 169, 97, 0.12), transparent 60%);
  pointer-events: none;
}

.bt-eyecatch__category {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #C9A961;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

.bt-eyecatch__title {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.25;
  position: relative;
  z-index: 1;
  letter-spacing: -0.01em;
}

.bt-eyecatch__brand {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.04em;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bt-eyecatch__brand::before {
  content: "";
  width: 16px;
  height: 1px;
  background: #C9A961;
}

/* バリエーション: ライト */
.bt-eyecatch--light {
  background: linear-gradient(135deg, #FAFAFA 0%, #F5F5F0 100%);
  color: var(--bt-navy);
}

.bt-eyecatch--light .bt-eyecatch__category {
  color: var(--bt-gold-deep);
}

.bt-eyecatch--light .bt-eyecatch__brand {
  color: var(--bt-text-meta);
}

/* バリエーション: ゴールド */
.bt-eyecatch--gold {
  background: linear-gradient(135deg, #C9A961 0%, #A88A45 100%);
  color: var(--bt-navy);
}

.bt-eyecatch--gold .bt-eyecatch__category {
  color: var(--bt-navy);
}

.bt-eyecatch--gold .bt-eyecatch__brand {
  color: rgba(11, 31, 63, 0.7);
}

.bt-eyecatch--gold .bt-eyecatch__brand::before {
  background: var(--bt-navy);
}


/* ===========================================================================
   9. Print 対応
   =========================================================================== */

@media print {
  .bt-dia,
  .bt-eyecatch {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    page-break-inside: avoid;
  }
}


/* ===========================================================================
   END OF FILE
   biz-trend 図解キット 共通CSS v1.0
   =========================================================================== */


/* ===========================================================================
   ★ Cocoon オーバーライド強化(2026-05-10 追加・最終版)
   biz-trend Front Page テンプレート専用 + ホームページの崩れ修正
   =========================================================================== */

/* ホームページ・固定ページテンプレート時、Cocoon の article ラッパーを完全無効化 */
body.page-template-page-front #content,
body.page-template-page-front #main,
body.page-template-page-front .main,
body.page-template-page-front .content,
body.page-template-page-front .article,
body.page-template-page-front .entry-content,
body.home #content,
body.home #main,
body.home .main,
body.home .content {
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
  background: transparent;
  box-shadow: none;
  border: none;
}

/* タイトル・パンくず・メタ情報を完全非表示 */
body.page-template-page-front .article-header,
body.page-template-page-front .breadcrumb,
body.page-template-page-front .entry-title,
body.page-template-page-front .a-wrap,
body.home .article-header,
body.home .breadcrumb {
  display: none;
}

/* メイン領域の左右余白を解除 */
body.page-template-page-front .main {
  padding-left: 0;
  padding-right: 0;
}

/* Cocoon の自動段落マージンが biz-trend-homepage 内で出ないように */
.biz-trend-homepage p {
  margin: 0;
}

.biz-trend-homepage h1,
.biz-trend-homepage h2,
.biz-trend-homepage h3 {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  border: none;
}

/* Cocoon の見出し背景・装飾を打ち消し */
.biz-trend-homepage h2::before,
.biz-trend-homepage h2::after,
.biz-trend-homepage h3::before,
.biz-trend-homepage h3::after {
  display: none;
}

/* Cocoon の <a> リンクのアンダーライン・カラーを継承に */
.biz-trend-homepage a {
  text-decoration: none;
  color: inherit;
}

/* グリッドが効いてない場合のセーフティ */
.biz-trend-homepage .bt-hero__grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
}

@media (max-width: 1024px) {
  .biz-trend-homepage .bt-hero__grid {
    grid-template-columns: 1fr;
  }
}

.biz-trend-homepage .bt-grid--3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

@media (max-width: 1024px) {
  .biz-trend-homepage .bt-grid--3col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .biz-trend-homepage .bt-grid--3col {
    grid-template-columns: 1fr;
  }
}

.biz-trend-homepage .bt-grid--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

@media (max-width: 768px) {
  .biz-trend-homepage .bt-grid--2col {
    grid-template-columns: 1fr;
  }
}

/* 記事カードの画像比率を確実に16:9に */
.biz-trend-homepage .bt-card__figure,
.biz-trend-homepage .bt-hero__main-figure,
.biz-trend-homepage .bt-hero__sub-figure {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.biz-trend-homepage .bt-card__figure img,
.biz-trend-homepage .bt-hero__main-figure img,
.biz-trend-homepage .bt-hero__sub-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ###########################################################################
   END:biz-trend カスタムCSS 完全版(2026-05-10)
   ########################################################################### */


/* ===========================================================================
   ★ ヘッダー検索ボックス スタイル(2026-05-10 追加)
   =========================================================================== */

.bt-search-menu-item {
  display: inline-flex !important;
  align-items: center;
  padding: 0 16px !important;
  list-style: none;
  /* 2026-05-10 23:30 修正:検索バーをヘッダーメニューの左端に配置
     order: -1 で flex 内の他メニュー項目より先頭に並べる
     margin-right: auto で右側のメニュー項目を右側に押し出す */
  order: -1 !important;
  margin-right: auto !important;
}

/* メニュー全体を flex で並べて order を有効化(Cocoon の既存ナビは flex 既定だが念のため) */
#navi .menu-header,
#navi-in .menu-header,
.navi-in > ul,
.navi > ul,
ul.menu-header {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
}

.bt-header-search {
  position: relative;
  display: inline-flex;
}

.bt-header-search input[type="search"] {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  padding: 8px 14px 8px 36px;
  font-size: 13px;
  width: 200px;
  font-family: "Noto Sans JP", sans-serif;
  color: inherit;
  transition: all 0.2s ease-out;
  box-sizing: border-box;
}

.bt-header-search input[type="search"]::placeholder {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
}

.bt-header-search input[type="search"]:focus {
  background: rgba(255, 255, 255, 0.15);
  border-color: #C9A961;
  outline: none;
  box-shadow: 0 0 0 2px rgba(201, 169, 97, 0.3);
  width: 240px;
}

.bt-header-search::before {
  content: "🔍";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 834px) {
  .bt-search-menu-item {
    width: 100%;
    padding: 8px 16px !important;
  }
  .bt-header-search input[type="search"] {
    width: 100%;
  }
}


/* ===========================================================================
   ★ デザイン改善パッチ v2(2026-05-10 夜・運営者フィードバック反映)
   - カード/アイキャッチ シャドウ強化
   - ホバー軽量化(transform 廃止)
   - フォント ゴシック統一(明朝廃止)
   - 左揃え強化
   - カード余白改善
   ※ ヘッダー全幅 Navy 化はサイドバー競合を起こしたので削除
   ※ ヘッダーは Cocoon 既存スタイル(白ロゴ部+ Navy ナビ)に従う
   =========================================================================== */

/* ===== ① カード/アイキャッチに深いシャドウ ===== */
.biz-trend-homepage .bt-card,
.biz-trend-homepage .bt-hero__main {
  box-shadow:
    0 1px 3px rgba(11, 31, 63, 0.04),
    0 8px 24px rgba(11, 31, 63, 0.08) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #FFFFFF !important;
  transition: box-shadow 0.3s ease !important;
}

.biz-trend-homepage .bt-hero__main-figure {
  box-shadow:
    0 4px 12px rgba(11, 31, 63, 0.10),
    0 12px 32px rgba(11, 31, 63, 0.08) !important;
  border-radius: 8px !important;
}

.biz-trend-homepage .bt-card__figure,
.biz-trend-homepage .bt-hero__sub-figure {
  border-radius: 8px 8px 0 0 !important;
}

.biz-trend-homepage .bt-hero__sub-card {
  box-shadow: 0 1px 3px rgba(11, 31, 63, 0.04) !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  padding: 12px !important;
}

/* ===== ② ホバー軽量化(transform 廃止) ===== */
.biz-trend-homepage .bt-card,
.biz-trend-homepage .bt-card *,
.biz-trend-homepage .bt-hero__main,
.biz-trend-homepage .bt-hero__main *,
.biz-trend-homepage .bt-hero__sub-card,
.biz-trend-homepage .bt-hero__sub-card *,
.biz-trend-homepage img {
  transform: none !important;
  transition: box-shadow 0.25s ease, opacity 0.2s ease !important;
}

.biz-trend-homepage .bt-card:hover {
  box-shadow:
    0 4px 12px rgba(11, 31, 63, 0.10),
    0 16px 40px rgba(11, 31, 63, 0.12) !important;
  transform: none !important;
}

.biz-trend-homepage .bt-card:hover .bt-card__figure img {
  transform: none !important;
  opacity: 0.95;
}

.biz-trend-homepage .bt-hero__main:hover .bt-hero__main-figure img,
.biz-trend-homepage .bt-hero__sub-card:hover .bt-hero__sub-figure img {
  transform: none !important;
  opacity: 0.95;
}

/* ===== ③ フォント ゴシック統一(明朝廃止) ===== */
.biz-trend-homepage h1,
.biz-trend-homepage h2,
.biz-trend-homepage h3,
.biz-trend-homepage .bt-hero__main-title,
.biz-trend-homepage .bt-hero__sub-title,
.biz-trend-homepage .bt-card__title,
.biz-trend-homepage .bt-card--featured .bt-card__title,
.biz-trend-homepage .bt-section__title,
.biz-trend-homepage .bt-pick__title,
.biz-trend-homepage .bt-newsletter__title,
.biz-trend-homepage .bt-foot-cta__title {
  font-family: "Noto Sans JP", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

.biz-trend-homepage .bt-hero__main-title {
  font-size: 28px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  text-align: left !important;
}

@media (min-width: 1024px) {
  .biz-trend-homepage .bt-hero__main-title {
    font-size: 32px !important;
  }
}

/* ===== ④ 左揃え強化 ===== */
.biz-trend-homepage .bt-hero__main,
.biz-trend-homepage .bt-hero__main-tag,
.biz-trend-homepage .bt-hero__main-title,
.biz-trend-homepage .bt-hero__main-summary,
.biz-trend-homepage .bt-hero__main .bt-meta,
.biz-trend-homepage .bt-card__body,
.biz-trend-homepage .bt-card__tag,
.biz-trend-homepage .bt-card__title,
.biz-trend-homepage .bt-card__summary,
.biz-trend-homepage .bt-card__meta,
.biz-trend-homepage .bt-section__title,
.biz-trend-homepage .bt-pick__title,
.biz-trend-homepage .bt-pick__lead {
  text-align: left !important;
}

.biz-trend-homepage .bt-newsletter,
.biz-trend-homepage .bt-newsletter * {
  text-align: center;
}

/* ===== ⑤ カード内余白の改善(より洗練された印象に) ===== */
.biz-trend-homepage .bt-card__body {
  padding: 20px !important;
}

.biz-trend-homepage .bt-card__title {
  font-size: 16px !important;
  line-height: 1.5 !important;
  margin-bottom: 12px !important;
}

.biz-trend-homepage .bt-card__summary {
  font-size: 13px !important;
  color: #4A5568 !important;
  line-height: 1.7 !important;
}

.biz-trend-homepage .bt-card__tag {
  font-size: 11px !important;
  color: #A88845 !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 8px !important;
  font-weight: 700 !important;
}

/* ===== ⑥ ヒーローサブ記事のテキスト読みやすさ強化 ===== */
.biz-trend-homepage .bt-hero__sub-title {
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #1A1A1A !important;
  font-weight: 600 !important;
}

.biz-trend-homepage .bt-hero__sub-tag {
  color: #A88845 !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
}

/* ===== ⑦ セクション見出しの装飾(ゴールドライン)===== */
.biz-trend-homepage .bt-section__head {
  border-bottom: 1px solid #E5E7EB !important;
}

.biz-trend-homepage .bt-section__head::before {
  width: 48px !important;
  height: 3px !important;
  background-color: #C9A961 !important;
}

/* ===== ⑧ ヘッダー固定時の上部余白(ヒーローが隠れないように) ===== */
body.is-header-fixed .biz-trend-homepage .bt-hero {
  padding-top: 32px !important;
}


/* ###########################################################################
   END: biz-trend カスタムCSS 完全版 v2(2026-05-10)
   ########################################################################### */


/* ===========================================================================
   ★ ヒーロー余白修正パッチ(2026-05-10 夜)
   .bt-hero__main をカード化したため文字が窮屈に詰まる問題を解消
   =========================================================================== */

.biz-trend-homepage .bt-hero__main {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  display: block !important;
}

.biz-trend-homepage .bt-hero__main-figure {
  box-shadow:
    0 4px 12px rgba(11, 31, 63, 0.08),
    0 16px 40px rgba(11, 31, 63, 0.12) !important;
  border-radius: 12px !important;
  margin-bottom: 32px !important;
  overflow: hidden !important;
}

.biz-trend-homepage .bt-hero__main-tag {
  display: block !important;
  margin-bottom: 16px !important;
  padding: 0 !important;
  text-align: left !important;
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  color: #A88845 !important;
  font-weight: 700 !important;
}

.biz-trend-homepage .bt-hero__main-title {
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
  text-align: left !important;
  font-size: 28px !important;
  line-height: 1.45 !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: #0B1F3F !important;
}

@media (min-width: 1024px) {
  .biz-trend-homepage .bt-hero__main-title {
    font-size: 32px !important;
    line-height: 1.4 !important;
  }
}

.biz-trend-homepage .bt-hero__main-summary {
  margin: 0 0 24px 0 !important;
  padding: 0 !important;
  text-align: left !important;
  font-size: 15px !important;
  line-height: 1.85 !important;
  color: #4A5568 !important;
  font-weight: 400 !important;
}

.biz-trend-homepage .bt-hero__main .bt-meta {
  text-align: left !important;
  padding: 0 !important;
  margin: 0 !important;
}

.biz-trend-homepage .bt-hero {
  padding-top: 48px !important;
  padding-bottom: 64px !important;
}

.biz-trend-homepage .bt-hero__grid {
  gap: 56px !important;
}

@media (max-width: 1024px) {
  .biz-trend-homepage .bt-hero__grid {
    gap: 32px !important;
  }
}

.biz-trend-homepage .bt-hero__sub {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

.biz-trend-homepage .bt-hero__sub-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}

.biz-trend-homepage .bt-hero__sub-figure {
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(11, 31, 63, 0.08) !important;
  margin-bottom: 8px !important;
  aspect-ratio: 16 / 9 !important;
}

.biz-trend-homepage .bt-hero__sub-tag {
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  color: #A88845 !important;
  font-weight: 700 !important;
  margin-bottom: 4px !important;
}

.biz-trend-homepage .bt-hero__sub-title {
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: #0B1F3F !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  margin: 0 !important;
}


/* ===========================================================================
   ★ 編集部のおすすめ アイキャッチ見切れ修正(2026-05-10 夜)
   bt-card--featured を縦並び(画像上+テキスト下)に変更し、画像を 16:9 で全表示
   =========================================================================== */

.biz-trend-homepage .bt-card--featured {
  display: flex !important;
  flex-direction: column !important;
  background: #FFFFFF !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow:
    0 1px 3px rgba(11, 31, 63, 0.04),
    0 8px 24px rgba(11, 31, 63, 0.08) !important;
}

.biz-trend-homepage .bt-card--featured .bt-card__figure {
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  min-height: 0 !important;
  width: 100% !important;
  border-radius: 8px 8px 0 0 !important;
  margin: 0 !important;
}

.biz-trend-homepage .bt-card--featured .bt-card__figure img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.biz-trend-homepage .bt-card--featured .bt-card__body {
  padding: 24px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  text-align: left !important;
}

.biz-trend-homepage .bt-card--featured .bt-card__tag {
  margin-bottom: 12px !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  color: #A88845 !important;
  font-weight: 700 !important;
}

.biz-trend-homepage .bt-card--featured .bt-card__title {
  font-family: "Noto Sans JP", sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  color: #0B1F3F !important;
  margin: 0 0 14px 0 !important;
  letter-spacing: -0.01em !important;
  -webkit-line-clamp: 3 !important;
}

.biz-trend-homepage .bt-card--featured .bt-card__summary {
  font-size: 14px !important;
  line-height: 1.8 !important;
  color: #4A5568 !important;
  margin: 0 0 16px 0 !important;
  -webkit-line-clamp: 3 !important;
}

.biz-trend-homepage .bt-card--featured .bt-card__meta {
  margin-top: auto !important;
  padding-top: 8px !important;
  font-size: 12px !important;
  text-align: left !important;
}

@media (max-width: 768px) {
  .biz-trend-homepage .bt-card--featured {
    grid-template-columns: 1fr !important;
  }
  .biz-trend-homepage .bt-card--featured .bt-card__body {
    padding: 20px !important;
  }
}


/* ###########################################################################
   END: biz-trend カスタムCSS 完全版 v3(2026-05-10)
   ########################################################################### */


/* ============================================================================
   biz-trend CSS v4 — メディアサイト化アップグレード(2026-05-10 23:50 統合)
   3 並列エージェントの成果物を v3 末尾に追加(後勝ちで上書き)

   v4-01: タスク 1+2+3(レイアウトワイド化 + ヘッダースリム化 + ホームグリッド密化)
   v4-02: タスク 5(マーカー / Callout / 引用 / TOC / 余白最適化)
   v4-03: タスク 4(SVG サムネイルテンプレ・別管理 output/design/v4/03_thumbnails/)

   後方互換:既存の .bt-* クラスは保持。v4 は !important または高い詳細度で上書き。
   ロールバック:本ファイル末尾の v4 ブロック以降を削除すれば v3 状態に戻る。
   ============================================================================ */

/* ===========================================================================
   biz-trend v4 レイアウト & ヘッダーリファクタ CSS
   作成日: 2026-05-10
   配置先: cocoon-child-master/style.css の末尾(v3 の後ろ)に追記する
   依存:
     - v3 (CLEAN_style_css_v3.css) が先に読み込まれていること
     - 04b_page-front_v2_CSS.css と併用可
   設計思想:
     - v3 を破壊しない(.bt-* クラスは後方互換)
     - Cocoon の既存スタイルを上書きするため !important を多用
     - メディアサイト級の密度と緊張感を出す(日経ビジネス / NewsPicks 級)
   タスク構成:
     タスク 1: 全体レイアウトのワイド化(1600px + clamp パディング)
     タスク 2: ヘッダーをスリム化(64px 固定 + 検索アイコン化)
     タスク 3: ホーム画面のサムネイル密度アップ(auto-fill グリッド)
   =========================================================================== */


/* ===========================================================================
   タスク 1:全体レイアウトをワイド化
   ---------------------------------------------------------------------------
   目的:1280px だと現代の 1920px モニタで両側がスカスカ → 1600px に拡張し、
        ファーストビューでサムネイルが画面いっぱいに敷き詰まる感覚を作る。
   =========================================================================== */

/* コンテナ最大幅を 1600px へ拡張(v3 の 1280px / v2 追加 CSS の 1600px を統一) */
.biz-trend-homepage,
.biz-trend-homepage--v2 {
  --bt-container-max: 1600px !important; /* v3 の CSS 変数を上書き */
  --bt-container-padding: clamp(16px, 4vw, 48px) !important; /* レスポンシブ余白 */
}

/* メインコンテナを全部 1600px + clamp パディングで統一 */
.biz-trend-homepage .bt-container,
.biz-trend-homepage .bt-container--wide,
.biz-trend-homepage--v2 .bt-container,
.biz-trend-homepage--v2 .bt-container--wide,
.bt-container--wide {
  max-width: 1600px !important; /* ワイド画面でも記事数が画面に乗る */
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(16px, 4vw, 48px) !important; /* 視口幅に応じてスケール */
  padding-right: clamp(16px, 4vw, 48px) !important;
  box-sizing: border-box !important;
  width: 100% !important; /* Cocoon の親が float/inline でも 100% 確保 */
}

/* フルブリード(背景色を画面端まで)が必要な要素用ヘルパー */
.biz-trend-homepage .bt-fullbleed,
.biz-trend-homepage--v2 .bt-fullbleed {
  width: 100vw !important; /* ビューポート全幅 */
  margin-left: calc(50% - 50vw) !important; /* 中央寄せから両端まで伸ばす */
  margin-right: calc(50% - 50vw) !important;
  max-width: none !important;
}

/* Cocoon の #main / #content がコンテンツ幅を制限している場合の解放 */
body.page-template-page-front #main,
body.page-template-page-front #content,
body.home #main,
body.home #content {
  max-width: 100% !important; /* 親側の 1080px 制限を解除 */
  width: 100% !important;
  padding-left: 0 !important; /* パディングは bt-container 側で持つ */
  padding-right: 0 !important;
}

/* ファーストビューの不要な中央寄せを撤廃(運営者要件) */
.biz-trend-homepage .bt-hero,
.biz-trend-homepage--v2 .bt-hero {
  text-align: left !important; /* 中央寄せが残っていれば左揃えに矯正 */
}


/* ===========================================================================
   タスク 2:ヘッダーをスリム化(優先度最高)
   ---------------------------------------------------------------------------
   目的:現状 100px+ の太いヘッダーを 64px に固定。検索バーは虫眼鏡アイコン化し、
        クリックで右から入力欄がスライド展開する仕様に変更。
   対象:Cocoon Child の #header / #navi / .navi-in 構造
   モバイル(< 768px):Cocoon 既定のハンバーガーに任せる(本 CSS は触らない)
   =========================================================================== */

/* ----- 2-1. ヘッダー本体の高さを 64px に固定 ----- */
@media (min-width: 768px) {
  body #header,
  body #header-in,
  body .header,
  body .header-in {
    min-height: 64px !important; /* 太すぎるヘッダーをスリム化 */
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* ロゴ画像の縦サイズを 36-40px に抑える(視覚的にナビと揃える) */
  body #header .logo img,
  body #header .site-name-text-link img,
  body #header-in .logo img,
  body .header-container .logo img {
    max-height: 40px !important; /* ヘッダー 64px に対して上下 12px の余白 */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* サイト名テキストのフォントサイズも詰める */
  body #header .site-name,
  body #header .site-name-text-link {
    font-size: 18px !important; /* 24-28px の Cocoon 既定を圧縮 */
    line-height: 1.2 !important;
    padding: 0 !important;
  }
}

/* ----- 2-2. ナビゲーションを 1 段組(左ロゴ / 中央メニュー / 右検索)に ----- */
@media (min-width: 768px) {
  /* ヘッダーコンテナを Flex 横一列に */
  body .header-container,
  body #header-container,
  body #header-in {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    min-height: 64px !important;
    padding-left: clamp(16px, 4vw, 48px) !important;
    padding-right: clamp(16px, 4vw, 48px) !important;
  }

  /* グローバルナビをスリム化 */
  body #navi,
  body .navi {
    min-height: 0 !important; /* Cocoon 既定の 50px 等を解除 */
    height: auto !important;
    background: transparent !important; /* 親ヘッダーの背景に統一 */
    line-height: 1 !important;
  }

  body #navi .navi-in,
  body .navi .navi-in {
    min-height: 0 !important;
    padding: 0 !important;
  }

  /* メニュー項目を中央寄せ + 詰めた padding に */
  body #navi .menu-header,
  body #navi-in .menu-header,
  body .navi-in > ul,
  body .navi > ul,
  body ul.menu-header {
    display: flex !important;
    flex-wrap: nowrap !important; /* 折り返さず1段に */
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 64px !important;
  }

  body #navi .menu-header > li > a,
  body #navi-in .menu-header > li > a,
  body .navi-in > ul > li > a,
  body .navi > ul > li > a {
    padding: 0 14px !important; /* 上下 padding を消し、左右だけに */
    font-size: 13px !important; /* 15px → 13px に詰める */
    line-height: 64px !important; /* 縦中央寄せ */
    height: 64px !important;
    letter-spacing: 0.02em !important;
    font-weight: 500 !important;
  }
}

/* ----- 2-3. 検索バーをアイコン化(常設入力欄を撤廃) ----- */
/* v3 の .bt-search-menu-item は order:-1 で左端固定だったが、運営者要件で右端へ */
@media (min-width: 768px) {
  .bt-search-menu-item {
    order: 999 !important; /* メニュー項目の最右へ */
    margin-right: 0 !important; /* v3 の auto を解除 */
    margin-left: auto !important; /* 右端寄せ */
    padding: 0 !important;
    height: 64px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* 入力欄を初期は非表示(width: 0)→ .is-open で展開 */
  .bt-header-search {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 36px !important;
  }

  /* 虫眼鏡アイコンボタン(クリックで展開トリガー) */
  .bt-header-search__toggle {
    background: transparent !important;
    border: none !important;
    color: inherit !important;
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    border-radius: 4px !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    transition: background 0.2s ease !important;
    z-index: 2 !important; /* 入力欄より前面で押せる */
  }

  .bt-header-search__toggle:hover,
  .bt-header-search__toggle:focus-visible {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #C9A961 !important; /* ホバー時 Gold で視覚フィードバック */
  }

  .bt-header-search__toggle:focus-visible {
    outline: 2px solid #C9A961 !important;
    outline-offset: 2px !important;
  }

  /* 入力欄:閉時は width:0 で見えない、開時は 240px に展開 */
  .bt-header-search input[type="search"],
  .bt-header-search__input {
    width: 0 !important;
    padding: 0 !important;
    border: 1px solid transparent !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: inherit !important;
    font-family: "Noto Sans JP", sans-serif !important;
    font-size: 13px !important;
    height: 36px !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
    opacity: 0 !important;
    overflow: hidden !important;
    transition: width 0.3s ease, padding 0.3s ease, opacity 0.2s ease, border-color 0.2s ease !important;
    margin-right: 4px !important; /* アイコンとの隙間 */
  }

  /* .is-open クラス付与時に入力欄を展開(JS で付け外し) */
  .bt-header-search.is-open input[type="search"],
  .bt-header-search.is-open .bt-header-search__input {
    width: 240px !important;
    padding: 8px 14px !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    opacity: 1 !important;
  }

  .bt-header-search.is-open input[type="search"]:focus,
  .bt-header-search.is-open .bt-header-search__input:focus {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: #C9A961 !important; /* フォーカス時 Gold で強調 */
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(201, 169, 97, 0.3) !important;
  }

  .bt-header-search input[type="search"]::placeholder,
  .bt-header-search__input::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 12px !important;
  }

  /* v3 の ::before 絵文字虫眼鏡を無効化(新ボタンと重複するため) */
  .bt-header-search::before {
    content: none !important;
  }
}

/* ----- 2-4. モバイル(< 768px):Cocoon 既定のハンバーガーに任せる ----- */
@media (max-width: 767px) {
  /* 検索アイテムは Cocoon ハンバーガー内に格納されるので最小限のスタイルだけ */
  .bt-search-menu-item {
    width: 100% !important;
    padding: 8px 16px !important;
    order: 0 !important;
  }

  .bt-header-search {
    width: 100% !important;
  }

  /* モバイルでは入力欄を常時表示(アイコンスライドはデスクトップのみ) */
  .bt-header-search input[type="search"],
  .bt-header-search__input {
    width: 100% !important;
    padding: 8px 14px !important;
    opacity: 1 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
  }

  .bt-header-search__toggle {
    display: none !important; /* モバイルではアイコンボタンは隠す */
  }
}


/* ===========================================================================
   タスク 3:ホーム画面をサムネイル密度高めの構成に
   ---------------------------------------------------------------------------
   目的:1 行 4-5 枚のサムネイルが複数段並ぶ「メディアトップ」感を出す。
        ヒーローは高さ 400px に圧縮、グリッドは auto-fill で柔軟に。
   =========================================================================== */

/* ----- 3-1. ヒーローカルーセルの高さを 400px に抑える ----- */
.biz-trend-homepage--v2 .bt-hero--carousel,
.biz-trend-homepage .bt-hero--carousel {
  padding: 24px 0 16px !important; /* 上下余白を圧縮 */
}

.biz-trend-homepage--v2 .bt-hero__carousel,
.biz-trend-homepage .bt-hero__carousel {
  min-height: 400px !important; /* 420px → 400px、過大化を防ぐ */
}

/* ヒーロー画像の高さを 400px 固定で object-fit cover */
.biz-trend-homepage--v2 .bt-hero__main-figure,
.biz-trend-homepage .bt-hero__main-figure {
  margin-bottom: 20px !important; /* 32px → 20px に詰める */
}

.biz-trend-homepage--v2 .bt-hero__main-figure img,
.biz-trend-homepage .bt-hero__main-figure img {
  width: 100% !important;
  height: 400px !important; /* 固定高さで横一直線に揃える */
  max-height: 400px !important;
  object-fit: cover !important;
  aspect-ratio: auto !important; /* 16:9 を上書き、固定高さ優先 */
  display: block !important;
}

/* タブレット以下では 280px に縮小 */
@media (max-width: 1023px) {
  .biz-trend-homepage--v2 .bt-hero__main-figure img,
  .biz-trend-homepage .bt-hero__main-figure img {
    height: 280px !important;
  }
  .biz-trend-homepage--v2 .bt-hero__carousel,
  .biz-trend-homepage .bt-hero__carousel {
    min-height: 280px !important;
  }
}

/* ヒーロースライドリンクのレイアウトを「画像上 + テキスト下」に簡素化 */
.biz-trend-homepage--v2 .bt-hero__slide-link,
.biz-trend-homepage .bt-hero__slide-link {
  display: block !important; /* 2.5fr:1fr の grid を解除しシンプルに */
  grid-template-columns: none !important;
  gap: 0 !important;
}

.biz-trend-homepage--v2 .bt-hero__main-content,
.biz-trend-homepage .bt-hero__main-content {
  max-width: 880px !important; /* 文章は読みやすい幅に制限 */
  padding: 0 !important;
}


/* ----- 3-2. カテゴリ別グリッド:1 行 4-5 枚 × 複数段 ----- */
/* auto-fill + minmax(280px, 1fr) で画面幅に応じて柔軟に列数変動
   (1600px 幅なら 5 列、1280px なら 4 列、1024px なら 3 列に自動切替) */
.biz-trend-homepage .bt-grid,
.biz-trend-homepage--v2 .bt-grid,
.biz-trend-homepage .bt-grid--3col,
.biz-trend-homepage .bt-grid--4col-xl,
.biz-trend-homepage--v2 .bt-grid--4col-xl {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; /* メディア感の核 */
  gap: 24px !important; /* カード間 24px(運営者指定) */
  align-items: stretch !important; /* カード高さを揃える */
}

/* 2col グリッド(編集部のおすすめ)は元の挙動を維持しつつ余白だけ統一 */
.biz-trend-homepage .bt-grid--2col,
.biz-trend-homepage--v2 .bt-grid--2col {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)) !important; /* 大カード 2 枚並び */
  gap: 24px !important;
}

/* スマホ:1 列に切替 */
@media (max-width: 639px) {
  .biz-trend-homepage .bt-grid,
  .biz-trend-homepage--v2 .bt-grid,
  .biz-trend-homepage .bt-grid--3col,
  .biz-trend-homepage .bt-grid--4col-xl,
  .biz-trend-homepage .bt-grid--2col,
  .biz-trend-homepage--v2 .bt-grid--4col-xl,
  .biz-trend-homepage--v2 .bt-grid--2col {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}


/* ----- 3-3. カードのサムネイルを密に詰める ----- */
/* カード画像のアスペクト比を 16:9 で統一(高さがバラバラになるのを防ぐ) */
.biz-trend-homepage .bt-card__figure,
.biz-trend-homepage--v2 .bt-card__figure {
  aspect-ratio: 16 / 9 !important; /* 横長で揃える */
  overflow: hidden !important;
  background: #F3F4F6 !important; /* 画像読込中のフォールバック背景 */
  margin: 0 !important;
}

.biz-trend-homepage .bt-card__figure img,
.biz-trend-homepage--v2 .bt-card__figure img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* カード本文の余白を少し詰める(密度向上) */
.biz-trend-homepage .bt-card__body,
.biz-trend-homepage--v2 .bt-card__body {
  padding: 16px 18px !important; /* v2 の 20px → 16-18px に詰める */
}

.biz-trend-homepage .bt-card__title,
.biz-trend-homepage--v2 .bt-card__title {
  font-size: 15px !important; /* 16px → 15px に詰めて 4-5 列に耐える */
  line-height: 1.5 !important;
  margin-bottom: 8px !important;
  display: -webkit-box !important; /* 2 行で打ち切り */
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.biz-trend-homepage .bt-card__summary,
.biz-trend-homepage--v2 .bt-card__summary {
  font-size: 12px !important; /* 13px → 12px、メディアサイト風の密度 */
  line-height: 1.6 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important; /* 抜粋は 2 行で打ち切り */
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin-bottom: 8px !important;
}

.biz-trend-homepage .bt-card__tag,
.biz-trend-homepage--v2 .bt-card__tag {
  font-size: 10px !important; /* 11px → 10px、SMALL CAPS 風 */
  letter-spacing: 0.1em !important;
  margin-bottom: 6px !important;
  text-transform: uppercase !important;
}


/* ----- 3-4. セクション間の余白を圧縮(密度を上げる) ----- */
.biz-trend-homepage .bt-section,
.biz-trend-homepage--v2 .bt-section {
  padding-top: 48px !important; /* v3 既定 80px+ を 48px に */
  padding-bottom: 48px !important;
}

.biz-trend-homepage .bt-section + .bt-section,
.biz-trend-homepage--v2 .bt-section + .bt-section {
  padding-top: 0 !important; /* セクション連続時は重ね padding 解除 */
}

.biz-trend-homepage .bt-pick,
.biz-trend-homepage--v2 .bt-pick {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}

/* セクション見出しは詰めて表示(タイトル+「すべて見る」を 1 行に) */
.biz-trend-homepage .bt-section__head,
.biz-trend-homepage--v2 .bt-section__head {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 24px !important; /* 32-48px → 24px に圧縮 */
  padding-bottom: 12px !important;
}

.biz-trend-homepage .bt-section__title,
.biz-trend-homepage--v2 .bt-section__title {
  font-size: 20px !important; /* 24px → 20px、密度重視 */
  margin: 0 !important;
}


/* ----- 3-5. ヒーロー直下の余白とトラストバー ----- */
/* ヒーロー直後のトラストバー / カテゴリーナビを詰める */
.biz-trend-homepage--v2 .bt-trust,
.biz-trend-homepage .bt-trust {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

.biz-trend-homepage--v2 .bt-cat-nav,
.biz-trend-homepage .bt-cat-nav {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  margin-bottom: 16px !important;
}


/* ===========================================================================
   仕上げ:Cocoon 既定スタイルの最終上書き(v3 の後ろに来た時の保険)
   =========================================================================== */

/* Cocoon の .article 等が幅制限してくる場合の最終解放 */
body.page-template-page-front .biz-trend-homepage,
body.home .biz-trend-homepage,
body.page-template-page-front .biz-trend-homepage--v2,
body.home .biz-trend-homepage--v2 {
  max-width: 100% !important; /* 親 .article の制限を貫通 */
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* END v4 layout & header */


/*!
 * biz-trend Article Body Visuals (v4 / Task 5)
 * --------------------------------------------------------
 * 記事本文を「読ませる」ための追加スタイル集。
 * Stripe Press / Notion / Smashing Magazine / 日経ビジネスを参考に
 * 余白・マーカー・Callout・引用・TOC・擬似グラフを定義。
 *
 * 親 CSS:CLEAN_style_css_v3.css(:root の --bt-* 変数を継承)
 * 既存記事(WP 26, 32-40)には retrofit しない方針(凍結ポリシー v2)。
 *
 * 構成:
 *   A. Image / Caption / 擬似グラフ
 *   B. Marker (蛍光ハイライト)
 *   C. Callout (まとめボックス)
 *   D. Blockquote 強化
 *   E. TOC (目次)
 *   F. 段落間余白の最適化
 *
 * 命名:すべて BEM (.bt-xxx, .bt-xxx--variant)
 * 上書きは最小限。!important は TOC の sticky 周りのみ。
 * --------------------------------------------------------
 */

/* =====================================================================
   A. Image / Figure / Caption / 擬似グラフ
   --------------------------------------------------------------------
   - 角丸 + 軽いシャドウで「印刷物っぽい」読み心地に
   - スクショ用は枠線を強めにして Stripe Press 風
   - figcaption / .bt-caption はグレー 13-14px 中央
   - .bt-bar* は CSS だけで作れる擬似横棒グラフ
   ===================================================================== */

/* --- 画像共通(角丸 + 軽シャドウ)----------------------------------- */
.entry-content .bt-image,
.entry-content .bt-image--rounded,
.article-body .bt-image--rounded {
  display: block;
  max-width: 100%;
  height: auto;
  margin: var(--bt-space-8) auto;
  border-radius: var(--bt-radius-lg);
  box-shadow: var(--bt-shadow-md);
}

/* --- スクショ用(枠線つき)------------------------------------------ */
.entry-content .bt-image--screenshot,
.article-body .bt-image--screenshot {
  display: block;
  max-width: 100%;
  height: auto;
  margin: var(--bt-space-8) auto;
  border: 1px solid var(--bt-border-strong);
  border-radius: var(--bt-radius-md);
  box-shadow: var(--bt-shadow-lg);
  background-color: var(--bt-white);
}

/* --- フチなし(ロゴや透過 PNG 用)----------------------------------- */
.entry-content .bt-image--plain,
.article-body .bt-image--plain {
  display: block;
  max-width: 100%;
  height: auto;
  margin: var(--bt-space-6) auto;
  border-radius: 0;
  box-shadow: none;
}

/* --- figure ラッパ(画像+キャプションをグループ化)----------------- */
.entry-content figure.bt-figure,
.article-body figure.bt-figure {
  margin: var(--bt-space-8) auto;
  text-align: center;
}

.entry-content figure.bt-figure img,
.article-body figure.bt-figure img {
  border-radius: var(--bt-radius-lg);
  box-shadow: var(--bt-shadow-md);
  max-width: 100%;
  height: auto;
}

/* --- figcaption / .bt-caption(画像下キャプション)------------------ */
.entry-content figure.bt-figure figcaption,
.entry-content .bt-caption,
.article-body .bt-caption,
.article-body figure figcaption {
  display: block;
  font-size: 0.8125rem;        /* 13px */
  line-height: 1.6;
  color: var(--bt-text-muted);
  text-align: center;
  margin-top: var(--bt-space-3);
  letter-spacing: 0.02em;
}

/* キャプション内のリンクはほんのり下線 */
.entry-content figure.bt-figure figcaption a,
.entry-content .bt-caption a {
  color: var(--bt-text-secondary);
  text-decoration: underline;
  text-decoration-color: var(--bt-border-strong);
}

/* --- 擬似横棒グラフ(.bt-bar*)-------------------------------------
   <div class="bt-bar-chart">
     <div class="bt-bar-chart__title">…</div>
     <div class="bt-bar-row">
       <span class="bt-bar-row__label">…</span>
       <div class="bt-bar-row__track"><div class="bt-bar-row__fill" style="width:72%"></div></div>
       <span class="bt-bar-row__value">72%</span>
     </div>
     …
   </div>
   ------------------------------------------------------------------- */
.bt-bar-chart {
  margin: var(--bt-space-8) 0;
  padding: var(--bt-space-6);
  background-color: var(--bt-white);
  border: 1px solid var(--bt-border);
  border-radius: var(--bt-radius-lg);
  box-shadow: var(--bt-shadow-sm);
}

.bt-bar-chart__title {
  font-size: var(--bt-fs-md);
  font-weight: 700;
  color: var(--bt-navy-900);
  margin-bottom: var(--bt-space-5);
  padding-bottom: var(--bt-space-3);
  border-bottom: 2px solid var(--bt-gold-600);
  letter-spacing: 0.02em;
}

.bt-bar-chart__caption {
  margin-top: var(--bt-space-4);
  font-size: 0.8125rem;
  color: var(--bt-text-muted);
  text-align: right;
}

.bt-bar-row {
  display: grid;
  grid-template-columns: minmax(110px, 25%) 1fr 60px;
  align-items: center;
  gap: var(--bt-space-3);
  padding: var(--bt-space-2) 0;
}

.bt-bar-row + .bt-bar-row {
  border-top: 1px dashed var(--bt-border);
}

.bt-bar-row__label {
  font-size: var(--bt-fs-sm);
  font-weight: 600;
  color: var(--bt-text-primary);
  letter-spacing: 0.02em;
}

.bt-bar-row__track {
  position: relative;
  height: 14px;
  background-color: var(--bt-bg-section);
  border-radius: 999px;
  overflow: hidden;
}

.bt-bar-row__fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--bt-navy-700) 0%,
    var(--bt-navy-500) 100%
  );
  border-radius: 999px;
  transition: width var(--bt-transition-slow);
}

/* アクセント(ゴールド)バリアント */
.bt-bar-row--gold .bt-bar-row__fill {
  background: linear-gradient(
    90deg,
    var(--bt-gold-700) 0%,
    var(--bt-gold-500) 100%
  );
}

.bt-bar-row--success .bt-bar-row__fill {
  background: linear-gradient(90deg, #059669 0%, #10B981 100%);
}

.bt-bar-row--danger .bt-bar-row__fill {
  background: linear-gradient(90deg, #B91C1C 0%, #EF4444 100%);
}

.bt-bar-row__value {
  font-family: var(--bt-font-mono);
  font-size: var(--bt-fs-sm);
  font-weight: 700;
  color: var(--bt-navy-900);
  text-align: right;
  letter-spacing: 0.02em;
}

/* モバイル:ラベル幅を圧縮 */
@media (max-width: 640px) {
  .bt-bar-row {
    grid-template-columns: 90px 1fr 50px;
    gap: var(--bt-space-2);
  }
  .bt-bar-row__label {
    font-size: var(--bt-fs-xs);
  }
}

/* =====================================================================
   B. Marker (蛍光ペン風ハイライト)
   --------------------------------------------------------------------
   <mark class="bt-mark--yellow">テキスト</mark>
   linear-gradient で「下半分だけ塗る」蛍光ペン風表現。
   日本語縦の文字は上が抜ける見え方になるので、塗り開始は 60%。
   ===================================================================== */
.entry-content mark.bt-mark,
.entry-content mark.bt-mark--yellow,
.entry-content mark.bt-mark--blue,
.entry-content mark.bt-mark--pink,
.article-body mark.bt-mark,
.article-body mark.bt-mark--yellow,
.article-body mark.bt-mark--blue,
.article-body mark.bt-mark--pink,
mark.bt-mark,
mark.bt-mark--yellow,
mark.bt-mark--blue,
mark.bt-mark--pink {
  background-color: transparent;   /* ブラウザ既定の黄べた塗りを消す */
  color: inherit;
  padding: 0 0.08em;
  border-radius: 2px;
  font-weight: 600;                /* マーカー部分だけ若干太く読みやすく */
}

/* 黄(重要)*/
mark.bt-mark--yellow,
.entry-content mark.bt-mark--yellow,
.article-body mark.bt-mark--yellow {
  background-image: linear-gradient(
    transparent 60%,
    rgba(255, 235, 59, 0.45) 60%
  );
}

/* 青(補足)*/
mark.bt-mark--blue,
.entry-content mark.bt-mark--blue,
.article-body mark.bt-mark--blue {
  background-image: linear-gradient(
    transparent 60%,
    rgba(33, 150, 243, 0.30) 60%
  );
}

/* ピンク(注意)*/
mark.bt-mark--pink,
.entry-content mark.bt-mark--pink,
.article-body mark.bt-mark--pink {
  background-image: linear-gradient(
    transparent 60%,
    rgba(244, 67, 54, 0.25) 60%
  );
}

/* デフォルト指定(クラスなし mark)は黄扱い */
.entry-content mark:not([class]),
.article-body mark:not([class]) {
  background-color: transparent;
  background-image: linear-gradient(
    transparent 60%,
    rgba(255, 235, 59, 0.45) 60%
  );
  color: inherit;
  font-weight: 600;
  padding: 0 0.08em;
}

/* =====================================================================
   C. Callout (ポイントまとめボックス)
   --------------------------------------------------------------------
   構造例:
     <aside class="bt-callout bt-callout--summary">
       <div class="bt-callout__title">まとめ</div>
       <div class="bt-callout__body">
         <p>…</p>
       </div>
     </aside>
   アイコンは ::before に絵文字で。色は左 4px の縦帯 + 薄い背景。
   Notion のソフトな角丸 + 日経の章端処理を参考。
   ===================================================================== */
.bt-callout {
  position: relative;
  margin: var(--bt-space-8) 0;
  padding: var(--bt-space-5) var(--bt-space-6) var(--bt-space-5)
    calc(var(--bt-space-6) + 8px);
  border-radius: var(--bt-radius-md);
  border-left: 4px solid var(--bt-navy-700);
  background-color: var(--bt-bg-section);
  color: var(--bt-text-primary);
  font-size: var(--bt-fs-base);
  line-height: 1.8;
  box-shadow: var(--bt-shadow-sm);
}

.bt-callout__title {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--bt-fs-md);
  font-weight: 700;
  color: var(--bt-navy-900);
  margin: 0 0 var(--bt-space-2) 0;
  letter-spacing: 0.02em;
}

.bt-callout__title::before {
  content: attr(data-icon);
  font-size: 1.25em;
  line-height: 1;
}

.bt-callout__body {
  color: var(--bt-text-secondary);
}

.bt-callout__body > *:first-child { margin-top: 0; }
.bt-callout__body > *:last-child  { margin-bottom: 0; }

.bt-callout__body p {
  margin: 0 0 var(--bt-space-3) 0;
  line-height: 1.8;
}

.bt-callout__body ul,
.bt-callout__body ol {
  margin: var(--bt-space-2) 0 var(--bt-space-2) 1.4em;
}

.bt-callout__body li + li { margin-top: var(--bt-space-1); }

/* --- 種類別 ---------------------------------------------------------
   data-icon を付けないユーザー向けに、各 variant で擬似要素を強制。
   HTML 側で .bt-callout__title に data-icon="💡" を書けばそれが優先。
   ------------------------------------------------------------------- */

/* 💡 まとめ(ゴールド系) */
.bt-callout--summary {
  border-left-color: var(--bt-gold-600);
  background-color: #FCF7EA;
}
.bt-callout--summary .bt-callout__title { color: #6E4F1F; }
.bt-callout--summary .bt-callout__title:not([data-icon])::before { content: "💡"; }

/* ⚠️ 注意(赤系) */
.bt-callout--warning {
  border-left-color: var(--bt-danger);
  background-color: #FEF2F2;
}
.bt-callout--warning .bt-callout__title { color: #991B1B; }
.bt-callout--warning .bt-callout__title:not([data-icon])::before { content: "⚠️"; }

/* 📊 データ(ネイビー系) */
.bt-callout--data {
  border-left-color: var(--bt-navy-700);
  background-color: #EEF2F8;
}
.bt-callout--data .bt-callout__title { color: var(--bt-navy-900); }
.bt-callout--data .bt-callout__title:not([data-icon])::before { content: "📊"; }

/* 📌 ポイント(深緑系) */
.bt-callout--point {
  border-left-color: #047857;
  background-color: #ECFDF5;
}
.bt-callout--point .bt-callout__title { color: #065F46; }
.bt-callout--point .bt-callout__title:not([data-icon])::before { content: "📌"; }

/* ❓ 補足(グレー系) */
.bt-callout--note {
  border-left-color: var(--bt-text-muted);
  background-color: var(--bt-bg-soft);
}
.bt-callout--note .bt-callout__title { color: var(--bt-text-secondary); }
.bt-callout--note .bt-callout__title:not([data-icon])::before { content: "❓"; }

/* モバイル:左パディング控えめ */
@media (max-width: 640px) {
  .bt-callout {
    padding: var(--bt-space-4) var(--bt-space-4) var(--bt-space-4)
      calc(var(--bt-space-4) + 6px);
  }
  .bt-callout__title { font-size: var(--bt-fs-base); }
}

/* =====================================================================
   D. Blockquote (引用) 強化
   --------------------------------------------------------------------
   v3 に既存スタイルあり(L631-)。ここでは:
     - font-size を 1.05em に拡大
     - イタリック OFF を再保証(英文混在時の保険)
     - <cite> を右下グレー、Times 系
   既存 v3 と矛盾しないよう .entry-content / .article-body のみで上書き。
   ===================================================================== */
.entry-content blockquote,
.article-body blockquote,
.bt-quote {
  font-size: 1.05em;
  font-style: normal;            /* 日本語ではイタリック OFF */
  border-left-width: 6px;        /* v3 は 5px / 仕様で 6px に統一 */
}

.entry-content blockquote em,
.entry-content blockquote i,
.article-body blockquote em,
.article-body blockquote i {
  font-style: normal;            /* 強制解除 */
}

.entry-content blockquote cite,
.article-body blockquote cite,
.bt-quote cite {
  display: block;
  text-align: right;
  margin-top: var(--bt-space-3);
  font-family: "Times New Roman", "Hiragino Mincho ProN",
    var(--bt-font-serif);
  font-style: normal;
  font-size: 0.875rem;
  color: var(--bt-text-muted);
  letter-spacing: 0.02em;
}

.entry-content blockquote cite::before,
.article-body blockquote cite::before {
  content: "— ";
  margin-right: 0.2em;
  color: var(--bt-text-muted);
}

/* 強調引用(章末などで効かせたい時)*/
.bt-quote--feature {
  background-color: var(--bt-white);
  border-left: 6px solid var(--bt-gold-600);
  padding: var(--bt-space-6) var(--bt-space-8);
  border-radius: 0 var(--bt-radius-md) var(--bt-radius-md) 0;
  box-shadow: var(--bt-shadow-md);
  font-size: 1.1em;
  color: var(--bt-text-primary);
}

/* =====================================================================
   E. TOC (目次)
   --------------------------------------------------------------------
   想定セレクタ:
     - Easy Table of Contents : .ez-toc-container / #ez-toc-container
     - Table of Contents Plus : #toc_container
     - 汎用 biz-trend         : .bt-toc
   デスクトップは右サイド sticky、モバイルは折りたたみ。
   ===================================================================== */

.ez-toc-container,
#ez-toc-container,
#toc_container,
.bt-toc {
  background-color: var(--bt-white);
  border: 1px solid var(--bt-border);
  border-radius: var(--bt-radius-md);
  padding: var(--bt-space-5) var(--bt-space-6);
  box-shadow: var(--bt-shadow-sm);
  font-size: var(--bt-fs-sm);
  line-height: 1.75;
  color: var(--bt-text-secondary);
  margin: var(--bt-space-6) 0;
}

.ez-toc-container .ez-toc-title,
#ez-toc-container .ez-toc-title,
#toc_container .toc_title,
.bt-toc__title {
  font-size: var(--bt-fs-md);
  font-weight: 700;
  color: var(--bt-navy-900);
  margin-bottom: var(--bt-space-3);
  padding-bottom: var(--bt-space-2);
  border-bottom: 2px solid var(--bt-gold-600);
  letter-spacing: 0.04em;
}

.ez-toc-container ul,
#toc_container ul,
.bt-toc ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.ez-toc-container ul ul,
#toc_container ul ul,
.bt-toc ul ul {
  padding-left: var(--bt-space-4);
  border-left: 1px dashed var(--bt-border);
  margin-top: var(--bt-space-1);
}

.ez-toc-container li,
#toc_container li,
.bt-toc li {
  position: relative;
  padding: 0.25em 0 0.25em 1em;
}

.ez-toc-container li::before,
#toc_container li::before,
.bt-toc li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--bt-navy-300);
}

.ez-toc-container a,
#toc_container a,
.bt-toc a {
  color: var(--bt-text-secondary);
  text-decoration: none;
  transition: color var(--bt-transition-fast);
}

.ez-toc-container a:hover,
#toc_container a:hover,
.bt-toc a:hover {
  color: var(--bt-navy-900);
}

/* 現在地ハイライト(JS 側で .is-active を付与する想定 / プラグインの aria-current 対応)*/
.ez-toc-container a.is-active,
.ez-toc-container a[aria-current="true"],
#toc_container a.is-active,
.bt-toc a.is-active {
  color: var(--bt-navy-900);
  font-weight: 700;
  background: linear-gradient(
    transparent 60%,
    rgba(201, 169, 97, 0.30) 60%
  );
}

/* デスクトップ:右サイド sticky(WP の sidebar slot に置く前提)*/
@media (min-width: 1024px) {
  .bt-toc--sticky,
  aside.widget_ez-toc,
  aside.widget_toc {
    position: sticky !important;
    top: 100px;                   /* グローバルヘッダ分のオフセット */
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    align-self: flex-start;
  }
  .bt-toc--sticky::-webkit-scrollbar,
  aside.widget_ez-toc::-webkit-scrollbar { width: 6px; }
  .bt-toc--sticky::-webkit-scrollbar-thumb,
  aside.widget_ez-toc::-webkit-scrollbar-thumb {
    background: var(--bt-border-strong);
    border-radius: 3px;
  }
}

/* モバイル:折りたたみ。<details><summary> ベース(プラグイン側にも合わせる)*/
@media (max-width: 1023px) {
  .ez-toc-container,
  #toc_container,
  .bt-toc {
    padding: var(--bt-space-4);
  }

  details.bt-toc[open] > summary,
  .ez-toc-container.bt-toc--collapsible.is-open > .ez-toc-title,
  #toc_container.contracted > .toc_title {
    margin-bottom: var(--bt-space-3);
  }

  details.bt-toc > summary {
    cursor: pointer;
    list-style: none;
    font-size: var(--bt-fs-md);
    font-weight: 700;
    color: var(--bt-navy-900);
    padding: var(--bt-space-2) 0;
  }

  details.bt-toc > summary::-webkit-details-marker { display: none; }

  details.bt-toc > summary::after {
    content: "▾";
    float: right;
    color: var(--bt-gold-600);
    transition: transform var(--bt-transition-fast);
  }

  details.bt-toc[open] > summary::after {
    transform: rotate(180deg);
  }
}

/* =====================================================================
   F. 段落間余白の最適化
   --------------------------------------------------------------------
   仕様:
     article p { line-height: 1.85; margin-bottom: 1.6em; }
     h2 前 margin-top: 3em / h3 前 2em
     1段落 max-width: 72ch(コンテナを超えない)
   v3 の .entry-content 既存値と整合させるため、
   .bt-article または article 配下のみで適用(homepage は無影響)。
   ===================================================================== */

article.bt-article p,
.entry-content.bt-article-body p,
.bt-article-body p {
  line-height: 1.85;
  margin-bottom: 1.6em;
  max-width: 72ch;        /* コンテナ幅を超えない(width 100% は親で制御)*/
}

/* h2 / h3 前に呼吸を */
article.bt-article h2,
.entry-content.bt-article-body h2,
.bt-article-body h2 {
  margin-top: 3em;
}

article.bt-article h3,
.entry-content.bt-article-body h3,
.bt-article-body h3 {
  margin-top: 2em;
}

/* 直前が見出しなら margin-top をリセット(連続見出し対策)*/
article.bt-article h2 + h3,
.bt-article-body h2 + h3 {
  margin-top: 0.6em;
}

/* 図解・Callout・引用の前後に呼吸 */
.bt-article-body .bt-callout,
.bt-article-body .bt-bar-chart,
.bt-article-body figure.bt-figure,
.bt-article-body blockquote {
  margin-top: 2.4em;
  margin-bottom: 2.4em;
}

/* リード文(冒頭の太字段落)*/
.bt-article-body > p.bt-lead,
article.bt-article > p.bt-lead {
  font-size: 1.125rem;
  line-height: 1.9;
  color: var(--bt-text-primary);
  font-weight: 500;
  margin-bottom: 2.2em;
  padding-bottom: 1.2em;
  border-bottom: 1px dashed var(--bt-border);
  max-width: 72ch;
}

/* セクション間に飾り罫(任意)*/
.bt-article-body hr.bt-section-rule,
article.bt-article hr.bt-section-rule {
  border: 0;
  text-align: center;
  margin: 3em 0;
}

.bt-article-body hr.bt-section-rule::after,
article.bt-article hr.bt-section-rule::after {
  content: "❉   ❉   ❉";
  color: var(--bt-gold-600);
  letter-spacing: 0.5em;
  font-size: 0.875rem;
}

/* ===================== EOF ===================== */


/* === END biz-trend CSS v4 === */


/* ============================================================================
   biz-trend CSS v5 — メディア化 + 配色采配入替 + ロゴ馴染み(2026-05-11 23:10 合成)

   4 並列エージェント検証後の合成:
   - 基盤:Agent D のデザイントークン(配色入替 4 行で完結する未来資産)
   - 構成:Agent C の最小差分パッチ(既存資産 78% 活用、凍結ポリシー遵守)
   - ヒーロー修正:Agent A の aspect-ratio + object-fit(サムネ見切れ根治)
   - 数値根拠:Agent B の東洋経済オンライン実測(ヘッダー 108px、カテゴリ 48px)

   解決した 6 不具合:
   1. ヒーロー画像見切れ        → aspect-ratio: 16/9 + object-fit + object-position center
   2. ロゴ画面最上部ベタ付き     → 上下対称 padding: 16px 確保
   3. ヘッダー上下パディング非対称 → padding: 16px clamp(24px,4vw,48px) で完全対称
   4. 検索バー右側未配置        → flex + margin-left: auto で右端固定
   5. ロゴ枠線(浮き)            → border:0 / background:transparent / box-shadow:none
   6. ヘッダーメニュー中央集中   → flex + 左右ブロックで端まで繋がる

   配色采配の入替(色そのものは変更しない):
   - トップヘッダー:ネイビー → 白(ロゴ馴染み)
   - カテゴリナビ :透明or白 → ネイビー(ブランドアクセント)
   - メイン背景  :白(維持)

   ロールバック:本セクション(v5)を削除すれば v4 状態に戻る。
   ============================================================================ */

/* ================================================================
   v5 §1:デザイントークン(Agent D 採用・配色入替 4 行で完結)
   ================================================================ */

/* ==========================================================================
   biz-trend v5 — Agent D : Design System / Tokens
   File   : output/design/v5/D_designsystem/tokens.css
   Author : Agent D (Design System Extension)
   Date   : 2026-05-11
   --------------------------------------------------------------------------
   方針:
     - すべての値(色 / 余白 / フォントサイズ / レイアウト / シャドウ / 時間)
       を CSS Custom Properties に集約する単一の真実 (Single Source of Truth)。
     - 役割(role)ベースの命名を採用:値そのもの(navy)ではなく、
       使う場所(bg-header-top)を主名称にすることで、配色入れ替えが
       「ロール → 値」の付け替えだけで完結する。
     - 配色入れ替えの実例:
         --bt-bg-header-top: var(--bt-color-white);
         → これを var(--bt-color-navy) に書き換えるだけで上下反転が完了。
     - [data-theme="dark"] / [data-theme="seasonal-gold"] 等で一括差替可。
     - 値の重複は禁止:同じ値は必ず原色トークンを参照する(DRY)。
     - components.css 側は #ffffff のような直値を 1 回も書かない。

   構成(ANCHOR タグで目次・LSP 検索を容易化):
     [01] PALETTE        — 原色(brand primitives)
     [02] SEMANTIC COLOR — 役割色(背景/前景/罫線/リンク)
     [03] HEADER ROLES   — 2 段ヘッダー専用ロール
     [04] LAYOUT         — 3 カラム比率 / コンテナ幅 / ヘッダー高
     [05] TYPOGRAPHY     — フォント / サイズ / ウェイト / 行送り
     [06] SPACING        — 余白(8/12/16/24/32/48)
     [07] BORDER & RADIUS
     [08] SHADOW & MOTION
     [09] Z-INDEX
     [10] THEMES         — [data-theme] による差替え例
   ========================================================================== */

:root {

  /* ---------------------------------------------------------------------- */
  /* [01] PALETTE — 原色(値そのもの。他のトークンから参照される側) */
  /* 値そのものの変更はここだけ。新色追加もここで行う。 */
  /* ---------------------------------------------------------------------- */

  --bt-color-navy:           #0B1F3F; /* ブランドのネイビー(背骨) */
  --bt-color-navy-90:        #1A3460; /* ホバー・グラデ中間 */
  --bt-color-navy-70:        #3D5680; /* 補助:小見出し背景 */
  --bt-color-navy-50:        #6B7B95; /* 装飾線 */

  --bt-color-gold:           #C9A961; /* アクセント:CTA / ライン */
  --bt-color-gold-soft:      #E5D4A3; /* ホバー */
  --bt-color-gold-deep:      #A88A45; /* アクティブ */

  --bt-color-white:          #FFFFFF;
  --bt-color-off-white:      #FAFAFA; /* ページ背景 */
  --bt-color-beige:          #F5F5F0; /* セクション帯 */
  --bt-color-gray-50:        #F3F4F6; /* カード placeholder */
  --bt-color-gray-100:       #E5E7EB; /* 罫線 */
  --bt-color-gray-300:       #9CA3AF; /* メタ(薄) */
  --bt-color-gray-500:       #6B7280; /* メタ(基本) */
  --bt-color-gray-900:       #1A1A1A; /* 本文 */

  --bt-color-red-accent:     #C7263D; /* 速報リボン(東洋経済の赤に対応) */

  /* ---------------------------------------------------------------------- */
  /* [02] SEMANTIC COLOR — 役割で使う(components.css はこちらを参照) */
  /* ---------------------------------------------------------------------- */

  --bt-bg-page:              var(--bt-color-off-white); /* body 背景 */
  --bt-bg-card:              var(--bt-color-white);     /* カード */
  --bt-bg-section:           var(--bt-color-beige);     /* 帯セクション */
  --bt-bg-placeholder:       var(--bt-color-gray-50);   /* 画像枠 fallback */

  --bt-fg-default:           var(--bt-color-gray-900);  /* 本文 */
  --bt-fg-strong:            var(--bt-color-navy);      /* 見出し */
  --bt-fg-meta:              var(--bt-color-gray-500);  /* 日付・著者 */
  --bt-fg-meta-soft:         var(--bt-color-gray-300);  /* 補助 */
  --bt-fg-on-dark:           var(--bt-color-white);     /* 濃背景上のテキスト */

  --bt-border-default:       var(--bt-color-gray-100);
  --bt-border-soft:          #F3F4F6;
  --bt-border-strong:        var(--bt-color-navy);

  --bt-link-default:         var(--bt-color-navy);
  --bt-link-hover:           var(--bt-color-gold-deep);
  --bt-link-visited:         var(--bt-color-navy-90);

  --bt-accent-line:          var(--bt-color-gold);      /* セクション左の金線 */
  --bt-accent-ribbon:        var(--bt-color-red-accent);/* 速報リボン */

  /* ---------------------------------------------------------------------- */
  /* [03] HEADER ROLES — 2 段ヘッダー専用(東洋経済構造の核) */
  /* ★★ 配色入れ替えはここの 4 行だけで完結する ★★            */
  /* 現行: 上段=ネイビー(ロゴ+検索)/ 下段=白(カテゴリーナビ) */
  /* 反転:--bt-bg-header-top → white、--bt-bg-header-cat → navy */
  /* ---------------------------------------------------------------------- */

  --bt-bg-header-top:        var(--bt-color-navy);      /* 上段背景 */
  --bt-fg-header-top:        var(--bt-color-white);     /* 上段文字 */
  --bt-bg-header-cat:        var(--bt-color-white);     /* 下段背景 */
  --bt-fg-header-cat:        var(--bt-color-navy);      /* 下段文字 */

  --bt-header-cat-border:    var(--bt-color-gray-100);  /* 下段の下罫線 */
  --bt-header-cat-active:    var(--bt-color-gold);      /* アクティブ下線 */
  --bt-header-cat-hover-bg:  var(--bt-color-beige);     /* ホバー帯 */

  /* ---------------------------------------------------------------------- */
  /* [04] LAYOUT — 3 カラム比率 / コンテナ幅 / ヘッダー高 */
  /* 3 カラム比率の調整はここの 3 行だけ。components.css の grid 定義は触らない。 */
  /* ---------------------------------------------------------------------- */

  --bt-col-left:             45%;     /* メインコラム(ヒーロー+主要記事) */
  --bt-col-center:           35%;     /* セカンダリ(ランキング・編集部) */
  --bt-col-right:            20%;     /* サイドバー(広告・新着) */
  --bt-col-gap:              32px;    /* 3 カラム間の溝 */

  --bt-container-max:        1280px;  /* コンテンツ最大幅 */
  --bt-container-pad-x:      clamp(16px, 4vw, 48px); /* レスポンシブ左右余白 */

  --bt-header-top-height:    72px;    /* 上段(ロゴ+検索) */
  --bt-header-cat-height:    48px;    /* 下段(カテゴリーナビ) */
  --bt-header-total-height:  calc(var(--bt-header-top-height) + var(--bt-header-cat-height)); /* 120px */

  --bt-hero-aspect:          16 / 9;  /* ヒーロー画像のアスペクト */
  --bt-hero-max-height:      480px;   /* 見切れ防止の上限(後述) */

  /* ---------------------------------------------------------------------- */
  /* [05] TYPOGRAPHY */
  /* ---------------------------------------------------------------------- */

  --bt-font-serif:           "Noto Serif JP","Yu Mincho","游明朝","Hiragino Mincho ProN",serif;
  --bt-font-sans:            "Noto Sans JP","Yu Gothic Medium","游ゴシック Medium","Hiragino Kaku Gothic ProN",sans-serif;
  --bt-font-mono:            "JetBrains Mono","SFMono-Regular","Consolas",monospace;

  --bt-text-xs:              11px;    /* カテゴリラベル / 著作権 */
  --bt-text-sm:              13px;    /* メタ情報 */
  --bt-text-base:            16px;    /* 本文 */
  --bt-text-lg:              18px;    /* カード見出し */
  --bt-text-xl:              20px;    /* サブセクション見出し */
  --bt-text-2xl:             24px;    /* セクション見出し */
  --bt-text-3xl:             32px;    /* サブヒーロー */
  --bt-text-4xl:             40px;    /* ヒーロー(モバイル) */
  --bt-text-5xl:             48px;    /* ヒーロー(デスクトップ) */

  --bt-weight-regular:       400;
  --bt-weight-medium:        500;
  --bt-weight-semibold:      600;
  --bt-weight-bold:          700;

  --bt-leading-tight:        1.2;     /* 大見出し */
  --bt-leading-snug:         1.4;     /* 中見出し */
  --bt-leading-normal:       1.6;     /* 本文 */
  --bt-leading-relaxed:      1.75;    /* 長文 */

  --bt-tracking-tight:       -0.02em;
  --bt-tracking-normal:      0;
  --bt-tracking-wide:        0.04em;  /* SMALL CAPS */
  --bt-tracking-wider:       0.08em;

  /* ---------------------------------------------------------------------- */
  /* [06] SPACING — 8px ベース(指示通り 8/12/16/24/32/48) */
  /* ---------------------------------------------------------------------- */

  --bt-space-xs:             8px;
  --bt-space-sm:             12px;
  --bt-space-md:             16px;
  --bt-space-lg:             24px;
  --bt-space-xl:             32px;
  --bt-space-2xl:            48px;
  --bt-space-3xl:            64px;
  --bt-space-section:        80px;    /* セクション間 */

  /* ---------------------------------------------------------------------- */
  /* [07] BORDER & RADIUS */
  /* ---------------------------------------------------------------------- */

  --bt-radius-none:          0;
  --bt-radius-sm:            2px;
  --bt-radius-md:            4px;     /* カード既定 */
  --bt-radius-lg:            8px;
  --bt-radius-pill:          9999px;

  --bt-border-width:         1px;
  --bt-border-width-strong:  2px;
  --bt-border-style:         solid;

  /* ---------------------------------------------------------------------- */
  /* [08] SHADOW & MOTION */
  /* ---------------------------------------------------------------------- */

  --bt-shadow-none:          none;
  --bt-shadow-sm:            0 1px 3px rgba(11,31,63,0.04);
  --bt-shadow-md:            0 4px 12px rgba(11,31,63,0.06);
  --bt-shadow-lg:            0 10px 30px rgba(11,31,63,0.08);

  --bt-transition-fast:      150ms ease-out;
  --bt-transition-base:      250ms ease-out;
  --bt-transition-slow:      400ms ease-out;

  /* ---------------------------------------------------------------------- */
  /* [09] Z-INDEX(スタッキングの単一管理) */
  /* ---------------------------------------------------------------------- */

  --bt-z-base:               0;
  --bt-z-content:             1;
  --bt-z-sticky:             50;
  --bt-z-header:            100;
  --bt-z-dropdown:          200;
  --bt-z-modal:             900;
  --bt-z-toast:            1000;
}

/* ============================================================================
   [10] THEMES — [data-theme] による配色一括差替の参考実装
   ----------------------------------------------------------------------------
   利用例:<html data-theme="dark"> または <body data-theme="seasonal-gold">
   変更されるのは「ロール → 値」のマッピングのみで、components.css は無変更。
   ============================================================================ */

/* --- (a) 配色入れ替え:上段=白 / 下段=ネイビー(東洋経済オンラインの反転版) -- */
[data-theme="header-invert"] {
  --bt-bg-header-top:  var(--bt-color-white);
  --bt-fg-header-top:  var(--bt-color-navy);
  --bt-bg-header-cat:  var(--bt-color-navy);
  --bt-fg-header-cat:  var(--bt-color-white);
  --bt-header-cat-border:    var(--bt-color-navy-90);
  --bt-header-cat-hover-bg:  var(--bt-color-navy-90);
}

/* --- (b) ダークモード(夜間閲覧 / 出張中の機内モード対応) ------------------ */
[data-theme="dark"] {
  --bt-bg-page:      #0E141F;
  --bt-bg-card:      #18202E;
  --bt-bg-section:   #1F2738;

  --bt-fg-default:   #E5EAF0;
  --bt-fg-strong:    var(--bt-color-white);
  --bt-fg-meta:      #9CA3AF;
  --bt-fg-meta-soft: #6B7280;

  --bt-border-default: #2A3243;
  --bt-border-soft:    #1F2738;
  --bt-link-default:   var(--bt-color-gold);
  --bt-link-hover:     var(--bt-color-gold-soft);

  --bt-bg-header-top:  #0E141F;
  --bt-fg-header-top:  var(--bt-color-white);
  --bt-bg-header-cat:  #18202E;
  --bt-fg-header-cat:  #E5EAF0;
  --bt-header-cat-border: #2A3243;

  --bt-shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --bt-shadow-md: 0 4px 12px rgba(0,0,0,0.5);
  --bt-shadow-lg: 0 10px 30px rgba(0,0,0,0.6);
}

/* --- (c) 季節限定:年末年始ゴールドアクセント(任意イベント運用) --------- */
[data-theme="seasonal-gold"] {
  --bt-accent-line:    var(--bt-color-gold-deep);
  --bt-link-hover:     var(--bt-color-gold-deep);
  --bt-header-cat-active: var(--bt-color-gold-deep);
}

/* --- (d) ユーザー設定:可読性優先(コントラスト強化) ---------------------- */
[data-theme="high-contrast"] {
  --bt-fg-default:   #000000;
  --bt-fg-strong:    #000000;
  --bt-fg-meta:      #1A1A1A;
  --bt-border-default: #000000;
  --bt-link-default: #003399;
  --bt-link-hover:   #B91C1C;
}

/* prefers-color-scheme(OS 設定追従)— [data-theme] が未指定なら自動でダーク */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bt-bg-page:      #0E141F;
    --bt-bg-card:      #18202E;
    --bt-bg-section:   #1F2738;
    --bt-fg-default:   #E5EAF0;
    --bt-fg-strong:    var(--bt-color-white);
    --bt-fg-meta:      #9CA3AF;
    --bt-border-default: #2A3243;
    --bt-bg-header-top:  #0E141F;
    --bt-fg-header-top:  var(--bt-color-white);
    --bt-bg-header-cat:  #18202E;
    --bt-fg-header-cat:  #E5EAF0;
    --bt-header-cat-border: #2A3243;
  }
}

/* === END tokens.css === */


/* ================================================================
   v5 §2:Agent C 最小差分パッチ(既存資産 78% 活用、凍結遵守)
   ================================================================ */

/* ===========================================================================
   biz-trend v5 patch CSS  (Agent C: 最小差分 / Component Decomposition)
   ---------------------------------------------------------------------------
   作成日 : 2026-05-11
   配置先 : cocoon-child-master/style.css の末尾(CLEAN_style_css_v4.css の後ろ)に
            ★追記だけ★ で適用する。v4 までの CSS は一切修正しない。
   ロールバック : 本ファイル全体(BEGIN v5 patch ~ END v5 patch)を削除すれば
                  即座に v4 状態へ復帰。差分は加算のみで破壊的変更なし。

   設計哲学(Agent C):
     - 既存 .bt-* / Cocoon クラスを壊さず、必要な分だけ追記
     - 上書きが必須な箇所のみ !important(v4 が既に !important なので最小限で勝てる)
     - 新規クラスは .bt-v5-* 名前空間で衝突回避
     - 1 ファイル / 単一ブロック / 1 つの削除でロールバック完了

   解決する 6 件の不具合(東洋経済オンライン構造との差分):
     [F-1] ヒーロー画像が 400px 固定 + cover で SP / タブレット時に見切れる
     [F-2] 白ヘッダー上のネイビーロゴが浮く(ロゴ馴染み不足)
     [F-3] ホームが 1 カラムでレール(ランキング/速報)が無い → 3 カラム 45:35:20
     [F-4] カテゴリナビが薄い → ネイビー帯で東洋経済風に強調(配置入れ替え)
     [F-5] ヒーロー右にセカンダリ記事リストが無い(東洋経済の Pickup 風)
     [F-6] ヘッダーがスクロール時に消える → sticky 化で固定ヘッダー印象

   依存する CSS 変数(v3 で定義済・継承)
     --bt-navy-900 / --bt-navy-800 / --bt-navy-700
     --bt-gold-600 / --bt-gold-400
     --bt-bg-soft / --bt-text-primary / --bt-text-muted
     --bt-radius-md / --bt-shadow-sm
   =========================================================================== */

/* ==================== BEGIN v5 patch ==================== */


/* ---------------------------------------------------------------------------
   [F-2] ロゴ馴染み:白ヘッダー上のネイビーロゴが浮く問題
   ---------------------------------------------------------------------------
   現状 #header は白(v3 #header background-color: var(--bt-white))、
   site-name は navy-900 で配置されている。 v5 では「白に細く溶ける」印象を
   作るため、ロゴ周りに微細な下線アクセントと gold-dot を再配置。
   既存 .site-name-text-link::after の gold dot は v3 で定義済 → そのまま活用。
   --------------------------------------------------------------------------- */
.site-name-text-link,
.header-container .site-name a {
  /* font-weight だけ既存(800)から 700 に軽く落として馴染ませる */
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* 白ヘッダー下端に金 1px のシンライン(東洋経済風) */
#header,
.header {
  box-shadow:
    0 1px 0 0 var(--bt-gold-600),
    var(--bt-shadow-sm);
}


/* ---------------------------------------------------------------------------
   [F-6] ヘッダー sticky 化(スクロール時も常時表示)
   ---------------------------------------------------------------------------
   Cocoon の is-header-fixed 機能と競合しないよう、デスクトップのみ position:
   sticky で軽量化。768px 未満は Cocoon ハンバーガーに任せる。
   --------------------------------------------------------------------------- */
@media (min-width: 768px) {
  #header,
  .header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: var(--bt-white);  /* sticky 時に透過しないよう保険 */
  }
  /* ヒーローが sticky ヘッダーの下に潜らないよう scroll-margin */
  .biz-trend-homepage,
  .biz-trend-homepage--v2 {
    scroll-margin-top: 64px;
  }
}


/* ---------------------------------------------------------------------------
   [F-4] カテゴリナビをネイビー帯に(配置入れ替え)
   ---------------------------------------------------------------------------
   既存の .bt-cat-nav は背景透明 → ネイビー帯にして東洋経済オンラインの
   2 段目ナビ風に。リンク色は白、hover で gold。
   .bt-category-nav も同名で受ける(タスク指示文の名称揺れ吸収)。
   --------------------------------------------------------------------------- */
.bt-cat-nav,
.bt-category-nav {
  background-color: var(--bt-navy-900);
  border-top: 1px solid var(--bt-navy-700);
  border-bottom: 1px solid var(--bt-gold-600);
}

.bt-cat-nav .bt-cat-nav__list,
.bt-category-nav .bt-cat-nav__list {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;          /* 項目が増えても横スクロールで対応 */
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  scrollbar-width: thin;
}

.bt-cat-nav .bt-cat-nav__item,
.bt-category-nav .bt-cat-nav__item {
  display: inline-block;
  padding: 12px 18px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease;
}

.bt-cat-nav .bt-cat-nav__item:hover,
.bt-cat-nav .bt-cat-nav__item:focus-visible,
.bt-category-nav .bt-cat-nav__item:hover,
.bt-category-nav .bt-cat-nav__item:focus-visible {
  color: var(--bt-gold-400);
  background-color: var(--bt-navy-800);
}

.bt-cat-nav .bt-cat-nav__item--active,
.bt-category-nav .bt-cat-nav__item--active {
  color: var(--bt-gold-600);
  border-bottom: 2px solid var(--bt-gold-600);
}


/* ---------------------------------------------------------------------------
   [F-1] ヒーロー見切れ防止(SP / タブレット時の被写体保護)
   ---------------------------------------------------------------------------
   v4-01 で hero img height: 400px !important が強制されている。これに
   勝つため最小限の !important を使い、aspect-ratio ベースに切替。
   1024px 未満では auto + max-height で被写体上端を保護。
   --------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .biz-trend-homepage--v2 .bt-hero__main-figure img,
  .biz-trend-homepage .bt-hero__main-figure img {
    height: auto !important;
    max-height: 56vh !important;       /* スマホでも視認できる比率 */
    aspect-ratio: 16 / 9 !important;
    object-position: center 30% !important;  /* 顔/見出しが上に来やすい */
  }
}

@media (max-width: 639px) {
  .biz-trend-homepage--v2 .bt-hero__main-figure img,
  .biz-trend-homepage .bt-hero__main-figure img {
    aspect-ratio: 4 / 3 !important;   /* SP は縦長気味で見切れ最小化 */
    max-height: 48vh !important;
  }
}


/* ---------------------------------------------------------------------------
   [F-3] [F-5] 3 カラム 45:35:20(本文 / セカンダリ / レール)
   ---------------------------------------------------------------------------
   既存ホーム(.biz-trend-homepage--v2)を壊さないため、新しいラッパ
   .bt-v5-layout の中に .bt-v5-main / .bt-v5-secondary / .bt-v5-rail の 3 つを
   差し込む追記専用構造を提供。HTML 側で <div class="bt-v5-layout"> ... </div>
   で既存セクション(bt-section / bt-pick 等)を包むだけで適用される。

   45:35:20 は CSS grid-template-columns で表現。
   1280px 以上:3 カラム  / 768-1279:2 カラム(本文 + レール)
   < 768:1 カラム縦積み
   --------------------------------------------------------------------------- */
.bt-v5-layout {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 35fr) minmax(0, 20fr);
  gap: 32px;
  align-items: start;
}

.bt-v5-main    { min-width: 0; }   /* grid item で内部 grid が破綻しないよう */
.bt-v5-secondary { min-width: 0; }
.bt-v5-rail    { min-width: 0; position: sticky; top: 80px; }  /* スクロール追従 */

@media (max-width: 1279px) {
  .bt-v5-layout {
    grid-template-columns: minmax(0, 65fr) minmax(0, 35fr);
  }
  .bt-v5-secondary {
    grid-column: 1 / -1;   /* タブレットではセカンダリを全幅に */
    order: 3;
  }
  .bt-v5-rail { order: 2; position: static; }
}

@media (max-width: 767px) {
  .bt-v5-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .bt-v5-main      { order: 1; }
  .bt-v5-rail      { order: 2; position: static; }
  .bt-v5-secondary { order: 3; }
}


/* ---------------------------------------------------------------------------
   [F-5] レール:Ranking / Pickup の最小スタイル(東洋経済風)
   ---------------------------------------------------------------------------
   新規コンポーネント .bt-v5-rail-card / .bt-v5-ranking。
   ボディ余白を詰めて密度を上げ、ナンバリングは gold。
   --------------------------------------------------------------------------- */
.bt-v5-rail-card {
  background: #fff;
  border: 1px solid var(--bt-border, #E5E7EB);
  border-radius: var(--bt-radius-md, 6px);
  padding: 20px 18px;
  margin-bottom: 20px;
  box-shadow: var(--bt-shadow-sm);
}

.bt-v5-rail-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 2px solid var(--bt-navy-900);
  font-family: "Noto Serif JP", serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--bt-navy-900);
  letter-spacing: 0.02em;
}

.bt-v5-rail-card__head::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 16px;
  background: var(--bt-gold-600);
  margin-right: 8px;
  vertical-align: middle;
}

/* ランキングリスト本体 */
.bt-v5-ranking {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: bt-v5-rank;
}

.bt-v5-ranking__item {
  counter-increment: bt-v5-rank;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed #E5E7EB;
  font-size: 13px;
  line-height: 1.5;
}

.bt-v5-ranking__item:last-child { border-bottom: none; }

.bt-v5-ranking__item::before {
  content: counter(bt-v5-rank);
  font-family: "Noto Serif JP", serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--bt-gold-600);
  line-height: 1;
  padding-top: 2px;
}

.bt-v5-ranking__item:nth-child(-n+3)::before {
  color: var(--bt-navy-900);
}

.bt-v5-ranking__item a {
  color: var(--bt-text-primary);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bt-v5-ranking__item a:hover {
  color: var(--bt-navy-700);
  text-decoration: underline;
}


/* ---------------------------------------------------------------------------
   [F-5] セカンダリ:中央カラム用のミドルカード(東洋経済の中央リスト風)
   ---------------------------------------------------------------------------
   既存 .bt-card と並べても破綻しない、横並び型のリストカード。
   --------------------------------------------------------------------------- */
.bt-v5-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bt-v5-list__item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid #E5E7EB;
}

.bt-v5-list__item:last-child { border-bottom: none; }

.bt-v5-list__figure {
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 4px;
  background: #F3F4F6;
}

.bt-v5-list__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bt-v5-list__title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bt-v5-list__title a {
  color: var(--bt-navy-900);
  text-decoration: none;
}

.bt-v5-list__title a:hover { color: var(--bt-navy-700); }

.bt-v5-list__meta {
  font-size: 11px;
  color: var(--bt-text-muted);
  letter-spacing: 0.04em;
}


/* ---------------------------------------------------------------------------
   仕上げ:.bt-v5-layout 内で既存グリッドの列数を狭幅に最適化
   ---------------------------------------------------------------------------
   左カラム(45%)の中で v4 の auto-fill minmax(280px,1fr) を使うと 1 列に
   なってしまうケースがあるので、main カラム内では minmax(220px,1fr) に
   トーン調整。bt-v5-layout 配下のみに適用するので既存ホーム単独表示には
   影響しない。
   --------------------------------------------------------------------------- */
.bt-v5-layout .bt-v5-main .bt-grid,
.bt-v5-layout .bt-v5-main .bt-grid--3col,
.bt-v5-layout .bt-v5-main .bt-grid--4col-xl {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 18px !important;
}

.bt-v5-layout .bt-v5-main .bt-grid--2col {
  grid-template-columns: 1fr !important;  /* 狭い main では 2col を 1col 化 */
}


/* ==================== END v5 patch ==================== */


/* ================================================================
   v5 §3:Agent A のヒーロー修正抽出(aspect-ratio 根治)
   既存 .bt-hero__main-figure を上書きしてサムネ見切れを完全防止
   ================================================================ */

/* ヒーロー aspect-ratio で固定 + object-fit で見切れ防止 */
.biz-trend-homepage .bt-hero__main-figure,
.bt-hero-carousel,
.bt-hero {
  aspect-ratio: 16 / 9 !important;
  max-height: 480px !important;
  min-height: 240px !important;
  height: auto !important;
  overflow: hidden !important;
  background: var(--bt-color-navy-900, #0B1F3F);
}

.biz-trend-homepage .bt-hero__main-figure img,
.bt-hero-carousel img,
.bt-hero img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* ロゴ馴染み:枠線/影/背景色完全削除(★最重要・運営者強い指示) */
.site-name-text-link,
.site-name-logo-image,
.logo-image,
#site-name,
#site-name img,
.header-container .logo,
.header-in .logo,
header .logo img {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  filter: none !important;
  padding: 0 !important;
}

/* ヘッダー左右パディング対称化 + 端まで繋がる構造 */
#header-container,
.header-container,
.header-in {
  max-width: none !important;
  padding-left: clamp(24px, 4vw, 48px) !important;
  padding-right: clamp(24px, 4vw, 48px) !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  display: flex !important;
  align-items: center !important;
  background: #FFFFFF !important;
  width: 100% !important;
  box-sizing: border-box;
}

/* 検索バーを右端に追い出す + 虫眼鏡アイコン化 */
.bt-search-menu-item,
.bt-header-search,
.search-form-wrap {
  margin-left: auto !important;
  order: 99 !important;
}

/* カテゴリナビをネイビー帯化(配色采配の核心) */
#navi,
.navi-in,
.bt-cat-nav,
.bt-v5-cat-nav {
  background: var(--bt-color-navy-900, #0B1F3F) !important;
  color: #FFFFFF !important;
  height: 48px;
  width: 100% !important;
  max-width: none !important;
  padding: 0 clamp(24px, 4vw, 48px);
  box-sizing: border-box;
}

#navi a,
.navi-in a,
.bt-cat-nav a {
  color: #FFFFFF !important;
}

#navi li.current-menu-item > a,
.navi-in li.current-menu-item > a,
.bt-cat-nav .is-active {
  border-bottom: 2px solid #FFFFFF !important;
}

/* === END v5(2026-05-11 23:10 合成版・4 並列エージェント検証完了) === */


/* ============================================================================
   biz-trend CSS v5 緊急復旧パッチ(2026-05-11 23:50 = v5_fix)

   ★リグレッション事案への対応:
   - 4 並列エージェント検証(A/B/C/D)後、Agent B(最小差分・164 行)を採用
   - 全 4 案の独立 REPORT は output/design/v5_fix/{A,B,C,D}_*/ 配下

   修正方針:
   - v5 本体は 1 行も削除しない(後勝ち補正のみ)
   - body:not(.home) で全ページ波及を完全遮断
   - sticky header 解除(★依頼にない仕様の撤去)
   - .entry-content に max-width: 760px ガード(Agent A の R4 警告組込)
   - メニュー文字色を navy に(WCAG AA 16.8:1 合格)

   ロールバック手順:
   本セクション(===== v5_fix START =====)以降を削除すれば v5 元状態に戻る。
   v5 自体に戻したい場合は本ファイル全体を CLEAN_style_css_v4.css に置換。

   再発防止:docs/regression_prevention.md(防止策 A-E)
   ============================================================================ */

/* ===== v5_fix START(緊急復旧パッチ・2026-05-11 23:50)===== */

/* =============================================================================
   v5 リグレッション復旧パッチ（Agent B: 最小差分・外科的修正）
   生成日: 2026-05-11
   方針:
     - v5 本体（CLEAN_style_css_v5.css）は 1 行も削除しない。
     - 末尾にこのパッチを「追記」するだけで 4 つの障害を治す。
     - グローバルセレクタ追加禁止（防止策 C）。
     - 依頼書にない仕様の独断追加禁止（防止策 E）。
     - 上書きは詳細度＋宣言順＋!important の最小組み合わせで実現。
   修正対象（v5 内の問題箇所）:
     [1] CLEAN_style_css_v5.css:5670-5683 sticky header（依頼外・F-6）
     [2] CLEAN_style_css_v5.css:6031-6044 #header-container max-width: none 全ページ波及
     [3] CLEAN_style_css_v5.css:6054-6066 #navi max-width: none 全ページ波及
     [4] メニュー文字色（ネイビー背景前提）が白ヘッダー上で消える可能性
     [5] .bt-v5-layout と既存 .bt-grid--3col の競合
   ============================================================================= */


/* -----------------------------------------------------------------------------
   [B-1] sticky header の解除（依頼書外・防止策 E 違反の外科切除）
   -----------------------------------------------------------------------------
   v5:5670-5683 ブロックは Agent C が東洋経済流を解釈して独断追加したもの。
   Futaba 依頼書（2026-05-11）に sticky 指示はゼロ。
   v5 本体を編集せず、後勝ち（position: static）で打ち消す。
   z-index と scroll-margin-top も巻き戻し、副作用を残さない。
   ----------------------------------------------------------------------------- */
@media (min-width: 768px) {
  #header,
  .header {
    position: static !important;       /* sticky を打ち消し */
    top: auto !important;
    z-index: auto !important;
    /* background-color は v5 の白ヘッダー指示があるので残す */
  }
  body.home .biz-trend-homepage,
  body.home .biz-trend-homepage--v2 {
    scroll-margin-top: 0 !important;   /* sticky 用の保険を巻き戻し */
  }
}


/* -----------------------------------------------------------------------------
   [B-2] #header-container の max-width: none をホーム限定スコープへ降格
   -----------------------------------------------------------------------------
   v5:6031-6044 は「ホームのヘッダーを端まで広げる」意図だが、
   #header-container / .header-container / .header-in は全ページ共通のため
   記事・カテゴリ・固定ページのヘッダー幅も解放されて崩壊した。
   対応:
     1) 既存 v5 ルールは消さない（後勝ち上書きで補正）。
     2) 非ホームページ（body:not(.home)）では max-width を Cocoon 既定へ戻す。
     3) ホーム（body.home）では v5 の意図通り端まで広がる（変化なし）。
   max-width: 1230px は Cocoon の標準 #header-container 既定値。
   ----------------------------------------------------------------------------- */
body:not(.home) #header-container,
body:not(.home) .header-container,
body:not(.home) .header-in {
  max-width: 1230px !important;          /* Cocoon 既定に戻す */
  margin-left: auto !important;
  margin-right: auto !important;
  /* padding-left / padding-right は v5 の clamp() をそのまま温存 */
}


/* -----------------------------------------------------------------------------
   [B-3] #navi（カテゴリナビ）の max-width: none をホーム限定スコープへ
   -----------------------------------------------------------------------------
   v5:6054-6066 の `#navi { max-width: none !important }` も同じ事故。
   非ホームでは Cocoon 既定幅に戻す。ネイビー帯（色）は維持。
   ----------------------------------------------------------------------------- */
body:not(.home) #navi,
body:not(.home) .navi-in {
  max-width: 1230px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  /* background のネイビーは v5 の指示通り全ページ維持（依頼書 OK） */
}


/* -----------------------------------------------------------------------------
   [B-4] .entry-content の幅ガード（Agent A の R4 を後追い実装）
   -----------------------------------------------------------------------------
   v5 は #main / #content への max-width 解除も含むため、
   本文がコンテナ全幅に伸びて可読性が壊滅した。
   Agent A が R4 として警告していた `.entry-content { max-width: 760px }`
   を、記事・固定ページ・カテゴリのみに適用してガードする。
   ホームには適用しない（.entry-content がそもそも出ない／出ても影響軽微）。
   ----------------------------------------------------------------------------- */
body.single .entry-content,
body.page .entry-content,
body.archive .entry-content,
body.category .entry-content,
body.search .entry-content {
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* -----------------------------------------------------------------------------
   [B-5] メニュー文字色の視認性確保（白ヘッダー × ネイビー文字、WCAG AA）
   -----------------------------------------------------------------------------
   v5 ヘッダーは白背景に変わったが、Cocoon 既定のヘッダー上メニュー
   `.menu-header li a` 等は v3 で `color: var(--bt-white) !important` 指定済。
   → 白背景に白文字で消える。
   対応:ヘッダー“内”（#header / .header 配下）の menu link 色をネイビーへ。
   カテゴリナビ（#navi 配下）はネイビー帯のままなので白文字維持。
   コントラスト計算:
     - ネイビー #0B1F3F / 白 #FFFFFF = 16.8:1（AA AAA 余裕で合格）
     - 既存 hover 時 var(--bt-gold-400) は別途確認（gold-400 #E0B96A / 白 = 2.5:1
       → hover 限定でも可読性低下リスクあり → 同色トーンの gold-700 系へ降格推奨だが
       本パッチでは hover 色は v5 の指示を尊重し変更しない）。
   ----------------------------------------------------------------------------- */
#header .menu-header li a,
#header .menu-header > .menu-item > a,
.header .menu-header li a,
.header .menu-header > .menu-item > a,
#header-container .menu-header li a,
.header-container .menu-header li a,
.header-in .menu-header li a {
  color: var(--bt-navy-900, #0B1F3F) !important;
}

/* 既存 v5 で #navi a に white !important が当たっているのは維持
   （カテゴリナビ＝ネイビー帯側のリンク。白背景ヘッダーとは別物） */


/* -----------------------------------------------------------------------------
   [B-6] .bt-v5-layout と既存 .bt-grid--3col の優先順位明確化
   -----------------------------------------------------------------------------
   v3 由来 .bt-grid--3col / v4 .bt-grid--4col-xl / v5 .bt-v5-layout が並列定義。
   v5 が最後勝ちで意図通りだが、ホーム以外のページに .bt-v5-layout が誤って
   付与されると 220px 列のグリッドが連鎖する。
   対応:.bt-v5-layout の効果を `body.home` または `.biz-trend-homepage` 配下に限定。
   既存 v5 セレクタは削除せず、より具体的なスコープで上書き打ち消し。
   ----------------------------------------------------------------------------- */
body:not(.home) .bt-v5-layout .bt-v5-main .bt-grid,
body:not(.home) .bt-v5-layout .bt-v5-main .bt-grid--3col,
body:not(.home) .bt-v5-layout .bt-v5-main .bt-grid--4col-xl {
  grid-template-columns: revert !important;   /* ホーム以外では v3/v4 の既定へ戻す */
  gap: revert !important;
}


/* -----------------------------------------------------------------------------
   [B-7] body.home 以外での #main / #content の max-width 巻き戻し（保険）
   -----------------------------------------------------------------------------
   v5:4119-4120 `body.home #main, body.home #content` は既にホーム限定だが、
   v3/v4 で #main / #content にグローバル max-width: none を当てた行が残存する
   可能性があるため、非ホームでは Cocoon 既定（1230px）に戻す保険を 1 ブロックだけ。
   詳細度を確保するため body:not(.home) を前置。
   ----------------------------------------------------------------------------- */
body:not(.home) #main,
body:not(.home) #content {
  max-width: 1230px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* =============================================================================
   END v5 復旧パッチ（Agent B 最小差分版）
   行数: 約 130 行
   削除した v5 セレクタ数: 0（v5 本体は不変・後勝ち補正のみ）
   ============================================================================= */


/* ===== v5_fix END ===== */


/* ============================================================================
   biz-trend CSS v6 — Claude.ai Artifacts 由来デザイン統合(2026-05-12)

   元デザイン: https://api.anthropic.com/v1/design/h/gNVdRjnJaNuauGlbGOagUA
             (運営者が Claude.ai で作成、東洋経済オンライン参照型)

   採用方針(ハイブリッド戦略):
   - Claude.ai が視覚プロト作成(BENCHMARK ブランド名で出力)
   - 私(Claude Code)が WP/Cocoon 統合(BizTrend へリブランド)
   - body.home スコープで非ホームへの波及を完全遮断(防止策 C)
   - sticky 化はホーム以外で抑制(防止策 E:依頼書外仕様の独断追加禁止)

   セクション構成(全 11 ブロック):
   §1  CSS 変数定義(:root, body.home スコープ)
   §2  HEADER(2 段:白ヘッダー + Navy カテゴリナビ)
   §3  HERO(高さ 400px + aspect-ratio 16:9 + object-fit cover)
   §4  SECTION primitives(セクション見出し共通)
   §5  3-COL GRID(45:35:20 = feature + list + ranking)
   §6  CATEGORY GRID(repeat(5, 1fr) サムネカード)
   §7  ARTICLE PREVIEW(TOC sidebar + 本文 + 右レール)
   §8  MARKERS(蛍光マーカー 3 色)
   §9  CALLOUTS(💡まとめ / ⚠️注意 / 📊データ)
   §10 MEMBER CTA(ニュースレター帯)
   §11 FOOTER(5 カラム + 著作権)

   ロールバック:本 v6 ブロック全削除で v5_fix 状態に復帰。
   ============================================================================ */

/* ===== v6 START(2026-05-12 / Claude.ai Artifacts 統合)===== */

:root{
  --navy:#0B1F3F;
  --navy-2:#142a4f;
  --navy-deep:#061528;
  --gold:#C9A961;
  --gold-2:#a88a3e;
  --white:#ffffff;
  --bg-warm:#f6f4ef;
  --bg-soft:#faf8f3;
  --ink:#1a1a1a;
  --ink-2:#3a3a3a;
  --muted:#6a6a6a;
  --line:#e5e2da;
  --line-2:#ecebe6;
  --mk-yellow:#fff2a8;
  --mk-blue:#cfe2ff;
  --mk-pink:#ffd6e3;
  --max:1600px;
  --pad:40px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{background:#fff;}
body{
  font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--ink);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
button{font-family:inherit;}
ul,ol{list-style:none;}

/* ============ HEADER ============ */
.bt-header{background:#fff;}
.bt-header__top{
  height:64px;
  background:#fff;
  border-bottom:1px solid var(--line);
}
.bt-header__inner{
  max-width:var(--max);
  margin:0 auto;
  height:100%;
  padding:0 var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}
.bt-logo{
  display:flex;
  align-items:baseline;
  gap:12px;
}
.bt-logo__mark{
  font-family:"Noto Serif JP",serif;
  font-weight:900;
  font-size:26px;
  letter-spacing:0.14em;
  color:var(--navy);
  line-height:1;
}
.bt-logo__mark span{color:var(--gold);}
.bt-logo__sub{
  font-size:10.5px;
  letter-spacing:0.22em;
  color:var(--muted);
  font-weight:500;
  padding-left:12px;
  border-left:1px solid var(--line);
}
.bt-header__actions{
  display:flex;
  align-items:center;
  gap:18px;
}
.bt-iconbtn{
  width:40px;height:40px;
  display:grid;place-items:center;
  background:none;border:none;cursor:pointer;
  color:var(--navy);
  transition:color .2s;
}
.bt-iconbtn:hover{color:var(--gold-2);}
.bt-header__login{
  font-size:13px;
  font-weight:500;
  color:var(--ink-2);
}
.bt-header__login:hover{color:var(--gold-2);}
.bt-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 20px;
  background:var(--navy);
  color:#fff;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.05em;
  border:1px solid var(--navy);
  transition:all .2s;
}
.bt-cta:hover{background:var(--gold);border-color:var(--gold);color:var(--navy);}
.bt-cta__icon{font-size:14px;line-height:1;}

/* Nav (Navy band) */
.bt-nav{
  height:48px;
  background:var(--navy);
}
.bt-nav__inner{
  max-width:var(--max);
  margin:0 auto;
  height:100%;
  padding:0 var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.bt-nav__list{
  display:flex;
  height:100%;
}
.bt-nav__link{
  display:flex;
  align-items:center;
  height:48px;
  padding:0 22px;
  color:rgba(255,255,255,0.88);
  font-size:13.5px;
  font-weight:500;
  letter-spacing:0.04em;
  border-bottom:2px solid transparent;
  transition:all .15s;
}
.bt-nav__link:hover,
.bt-nav__item--active .bt-nav__link{
  color:var(--gold);
  border-bottom-color:var(--gold);
}
.bt-nav__item--active .bt-nav__link{font-weight:700;}
.bt-nav__date{
  color:rgba(255,255,255,0.55);
  font-size:11.5px;
  letter-spacing:0.15em;
  font-family:"Noto Serif JP",serif;
}

/* ============ HERO ============ */
.bt-hero{
  background:#fff;
  padding:32px 0 16px;
}
.bt-hero__inner{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--pad);
}
.bt-hero__card{
  position:relative;
  display:block;
  height:400px;
  aspect-ratio:16/9;
  width:100%;
  max-height:400px;
  overflow:hidden;
  background:#000;
}
/* Force 16:9 visual area but cap at 400px */
.bt-hero__media{position:absolute;inset:0;}
.bt-hero__media img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
}
.bt-hero__overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(11,31,63,0.95) 0%, rgba(11,31,63,0.78) 35%, rgba(11,31,63,0.25) 75%, rgba(11,31,63,0.05) 100%),
    linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.4) 100%);
}
.bt-hero__body{
  position:absolute;
  inset:0;
  padding:48px 56px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  color:#fff;
  max-width:780px;
}
.bt-hero__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
  align-self:flex-start;
}
.bt-hero__cat{
  display:inline-block;
  padding:5px 13px;
  background:var(--gold);
  color:var(--navy);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:0.14em;
}
.bt-hero__series{
  font-family:"Noto Serif JP",serif;
  font-size:12px;
  letter-spacing:0.2em;
  color:rgba(255,255,255,0.75);
}
.bt-hero__title{
  font-family:"Noto Serif JP",serif;
  font-size:38px;
  font-weight:700;
  line-height:1.42;
  margin-bottom:18px;
  text-wrap:pretty;
  letter-spacing:0.01em;
}
.bt-hero__excerpt{
  font-size:14.5px;
  line-height:1.85;
  color:rgba(255,255,255,0.82);
  max-width:580px;
  margin-bottom:20px;
}
.bt-hero__meta{
  display:flex;
  gap:18px;
  align-items:center;
  font-size:12px;
  color:rgba(255,255,255,0.7);
}
.bt-hero__meta-author{
  display:flex;align-items:center;gap:8px;
}
.bt-hero__avatar{
  width:24px;height:24px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
}
.bt-hero__meta-sep{color:rgba(255,255,255,0.3);}

/* ============ SECTION primitives ============ */
.bt-section{padding:56px 0;}
.bt-section--alt{background:var(--bg-warm);}
.bt-section__inner{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--pad);
}
.bt-section__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:32px;
  padding-bottom:14px;
  border-bottom:2px solid var(--navy);
  gap:24px;
}
.bt-section__title{
  font-family:"Noto Serif JP",serif;
  font-size:24px;
  font-weight:700;
  color:var(--navy);
  display:flex;
  align-items:baseline;
  gap:14px;
  line-height:1.2;
}
.bt-section__en{
  font-family:"Noto Serif JP",serif;
  font-size:11px;
  letter-spacing:0.32em;
  color:var(--gold);
  font-weight:600;
}
.bt-section__more{
  font-size:12.5px;
  font-weight:600;
  color:var(--navy);
  letter-spacing:0.08em;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.bt-section__more:hover{color:var(--gold-2);}
.bt-section__more::after{content:"›";font-size:16px;}

/* ============ 3-COL GRID ============ */
.bt-grid3{
  display:grid;
  grid-template-columns:45fr 35fr 20fr;
  gap:48px;
}

/* Main feature (45) */
.bt-feature{display:block;}
.bt-feature__media{
  aspect-ratio:16/10;
  overflow:hidden;
  background:#ece9e1;
  margin-bottom:20px;
}
.bt-feature__media img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  transition:transform .5s;
}
.bt-feature:hover .bt-feature__media img{transform:scale(1.03);}
.bt-feature__eyebrow{
  display:flex;align-items:center;gap:10px;margin-bottom:12px;
}
.bt-feature__cat{
  font-size:11.5px;
  font-weight:700;
  letter-spacing:0.12em;
  color:var(--gold-2);
}
.bt-feature__series{
  font-size:11px;letter-spacing:0.18em;
  color:var(--muted);
  font-family:"Noto Serif JP",serif;
}
.bt-feature__title{
  font-family:"Noto Serif JP",serif;
  font-size:26px;
  font-weight:700;
  line-height:1.5;
  color:var(--ink);
  margin-bottom:14px;
  text-wrap:pretty;
}
.bt-feature:hover .bt-feature__title{color:var(--navy);}
.bt-feature__excerpt{
  font-size:14px;
  line-height:1.85;
  color:#444;
  margin-bottom:14px;
}
.bt-feature__meta{
  display:flex;gap:14px;align-items:center;
  font-size:11.5px;color:var(--muted);
}

/* Middle list (35) */
.bt-list{display:flex;flex-direction:column;}
.bt-list__item{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:18px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
}
.bt-list__item:first-child{padding-top:0;}
.bt-list__item:last-child{border-bottom:none;}
.bt-list__media{
  aspect-ratio:4/3;
  overflow:hidden;
  background:#ece9e1;
}
.bt-list__media img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
}
.bt-list__cat{
  font-size:10.5px;
  font-weight:700;
  color:var(--gold-2);
  letter-spacing:0.1em;
  margin-bottom:8px;
}
.bt-list__title{
  font-family:"Noto Serif JP",serif;
  font-size:15px;
  font-weight:700;
  line-height:1.6;
  color:var(--ink);
  margin-bottom:10px;
  text-wrap:pretty;
}
.bt-list__item:hover .bt-list__title{color:var(--navy);}
.bt-list__meta{
  font-size:11px;color:var(--muted);
  display:flex;gap:10px;
}

/* Right ranking (20) */
.bt-rank{
  background:var(--bg-warm);
  padding:28px 24px;
}
.bt-rank__head{
  display:flex;
  align-items:baseline;
  gap:12px;
  padding-bottom:14px;
  border-bottom:1px solid var(--gold);
  margin-bottom:8px;
}
.bt-rank__title{
  font-family:"Noto Serif JP",serif;
  font-size:18px;
  font-weight:700;
  color:var(--navy);
}
.bt-rank__sub{
  font-family:"Noto Serif JP",serif;
  font-size:10px;
  letter-spacing:0.3em;
  color:var(--gold);
  font-weight:600;
}
.bt-rank__list{}
.bt-rank__item{
  display:flex;
  gap:14px;
  padding:14px 0;
  border-bottom:1px dashed #d8d3c5;
}
.bt-rank__item:last-child{border-bottom:none;}
.bt-rank__num{
  font-family:"Noto Serif JP",serif;
  font-size:24px;
  font-weight:900;
  line-height:1;
  flex-shrink:0;
  width:26px;
  color:#c4c0b3;
}
.bt-rank__item--1 .bt-rank__num{color:var(--gold);}
.bt-rank__item--2 .bt-rank__num{color:#9a9a9a;}
.bt-rank__item--3 .bt-rank__num{color:#b87333;}
.bt-rank__txt-cat{
  font-size:10px;
  font-weight:700;
  color:var(--gold-2);
  letter-spacing:0.08em;
  margin-bottom:4px;
}
.bt-rank__txt-title{
  font-family:"Noto Serif JP",serif;
  font-size:13px;
  font-weight:700;
  line-height:1.55;
  color:var(--ink);
}
.bt-rank__item:hover .bt-rank__txt-title{color:var(--navy);}

/* ============ CATEGORY GRID ============ */
.bt-cards{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:28px;
}
.bt-card{display:block;}
.bt-card__media{
  aspect-ratio:4/3;
  overflow:hidden;
  background:#ece9e1;
  margin-bottom:14px;
}
.bt-card__media img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  transition:transform .5s;
}
.bt-card:hover .bt-card__media img{transform:scale(1.05);}
.bt-card__cat{
  font-size:10.5px;
  color:var(--gold-2);
  font-weight:700;
  letter-spacing:0.1em;
  margin-bottom:8px;
}
.bt-card__title{
  font-family:"Noto Serif JP",serif;
  font-size:15px;
  font-weight:700;
  line-height:1.6;
  color:var(--ink);
  margin-bottom:10px;
  text-wrap:pretty;
}
.bt-card:hover .bt-card__title{color:var(--navy);}
.bt-card__meta{
  font-size:11px;
  color:var(--muted);
}

/* Category bar (sub categories within section) */
.bt-tabs{
  display:flex;
  gap:0;
  margin-bottom:32px;
  border-bottom:1px solid var(--line);
}
.bt-tabs__item{
  padding:14px 22px;
  font-size:13px;
  font-weight:500;
  color:var(--muted);
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  cursor:pointer;
  letter-spacing:0.03em;
}
.bt-tabs__item--active{
  color:var(--navy);
  border-bottom-color:var(--navy);
  font-weight:700;
}
.bt-tabs__item:hover{color:var(--navy);}

/* ============ ARTICLE PREVIEW ============ */
.bt-article-section{
  background:#fff;
  padding:72px 0;
  border-top:1px solid var(--line);
}
.bt-article-wrap{
  max-width:1280px;
  margin:0 auto;
  padding:0 var(--pad);
  display:grid;
  grid-template-columns:220px 1fr 240px;
  gap:48px;
}

/* TOC sidebar (sticky) */
.bt-toc{
  position:sticky;
  top:24px;
  align-self:start;
}
.bt-toc__head{
  padding:12px 0 14px;
  border-top:2px solid var(--navy);
  margin-bottom:14px;
  display:flex;
  align-items:baseline;
  gap:10px;
}
.bt-toc__title{
  font-family:"Noto Serif JP",serif;
  font-size:14px;
  font-weight:700;
  color:var(--navy);
  letter-spacing:0.05em;
}
.bt-toc__sub{
  font-size:10px;
  letter-spacing:0.3em;
  color:var(--gold);
  font-family:"Noto Serif JP",serif;
}
.bt-toc__list{}
.bt-toc__link{
  display:block;
  font-size:12px;
  line-height:1.6;
  padding:8px 0 8px 14px;
  border-left:2px solid var(--line);
  color:var(--muted);
  transition:all .15s;
}
.bt-toc__item--active .bt-toc__link{
  border-left-color:var(--gold);
  color:var(--navy);
  font-weight:700;
  background:linear-gradient(90deg,rgba(201,169,97,0.06),transparent);
}
.bt-toc__link:hover{color:var(--navy);}

/* Article body */
.bt-article{
  font-size:15.5px;
  line-height:1.85;
  color:#262626;
}
.bt-article__header{
  margin-bottom:32px;
  padding-bottom:24px;
  border-bottom:1px solid var(--line);
}
.bt-article__cat{
  display:inline-block;
  padding:5px 12px;
  background:var(--navy);
  color:#fff;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:0.12em;
  margin-bottom:18px;
}
.bt-article__title{
  font-family:"Noto Serif JP",serif;
  font-size:30px;
  font-weight:700;
  line-height:1.5;
  color:var(--ink);
  margin-bottom:18px;
  text-wrap:pretty;
}
.bt-article__meta{
  font-size:12px;
  color:var(--muted);
  display:flex;
  gap:14px;
  align-items:center;
}
.bt-article__lead{
  font-size:16.5px;
  line-height:1.95;
  color:#2a2a2a;
  font-weight:500;
  margin-bottom:36px;
  padding-left:16px;
  border-left:3px solid var(--gold);
}
.bt-article h2{
  font-family:"Noto Serif JP",serif;
  font-size:22px;
  font-weight:700;
  color:var(--navy);
  margin:48px 0 20px;
  padding-bottom:12px;
  border-bottom:2px solid var(--navy);
  line-height:1.5;
  letter-spacing:0.01em;
}
.bt-article h3{
  font-family:"Noto Serif JP",serif;
  font-size:18px;
  font-weight:700;
  color:var(--ink);
  margin:32px 0 14px;
  padding-left:14px;
  border-left:4px solid var(--gold);
  line-height:1.55;
}
.bt-article p{
  margin-bottom:20px;
  line-height:1.85;
}

/* Markers */
.bt-mk{padding:0 3px;background-repeat:no-repeat;background-position:0 88%;background-size:100% 38%;}
.bt-mk--yellow{background-image:linear-gradient(var(--mk-yellow),var(--mk-yellow));}
.bt-mk--blue{background-image:linear-gradient(var(--mk-blue),var(--mk-blue));}
.bt-mk--pink{background-image:linear-gradient(var(--mk-pink),var(--mk-pink));}

/* Callouts */
.bt-callout{
  position:relative;
  margin:28px 0;
  padding:22px 26px 22px 64px;
  border:1px solid var(--line);
  background:var(--bg-soft);
  font-size:14px;
  line-height:1.85;
}
.bt-callout::before{
  position:absolute;
  left:22px;
  top:20px;
  font-size:22px;
  line-height:1;
}
.bt-callout__title{
  font-family:"Noto Serif JP",serif;
  font-weight:700;
  font-size:13.5px;
  color:var(--navy);
  margin-bottom:6px;
  letter-spacing:0.08em;
}
.bt-callout--summary{border-left:4px solid var(--gold);}
.bt-callout--summary::before{content:"💡";}
.bt-callout--warn{border-left:4px solid #d97757;background:#fdf6f1;}
.bt-callout--warn::before{content:"⚠️";}
.bt-callout--warn .bt-callout__title{color:#a44a22;}
.bt-callout--data{border-left:4px solid #2a6fdb;background:#f3f7fd;}
.bt-callout--data::before{content:"📊";}
.bt-callout--data .bt-callout__title{color:#1b4e9c;}

/* Quote */
.bt-quote{
  margin:32px 0;
  padding:24px 28px 22px;
  background:var(--bg-warm);
  border-left:4px solid var(--navy);
  position:relative;
}
.bt-quote::before{
  content:"\201C";
  position:absolute;
  top:-8px;
  left:18px;
  font-family:"Noto Serif JP",serif;
  font-size:60px;
  color:var(--gold);
  line-height:1;
  opacity:0.6;
}
.bt-quote__text{
  font-family:"Noto Serif JP",serif;
  font-size:17px;
  line-height:1.85;
  color:var(--navy);
  font-style:italic;
  padding-left:24px;
}
.bt-quote__cite{
  display:block;
  margin-top:12px;
  padding-left:24px;
  font-size:12px;
  color:var(--muted);
  font-style:normal;
  font-family:"Noto Sans JP",sans-serif;
}

/* Comparison table */
.bt-table-wrap{
  margin:24px 0;
  overflow:hidden;
  border:1px solid var(--line);
}
.bt-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.bt-table thead th{
  background:var(--navy);
  color:#fff;
  padding:12px 14px;
  text-align:left;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.05em;
}
.bt-table tbody td{
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  line-height:1.6;
}
.bt-table tbody tr:nth-child(even) td{background:var(--bg-soft);}
.bt-table tbody tr:last-child td{border-bottom:none;}
.bt-table__product{font-weight:700;color:var(--navy);}
.bt-table__score{
  display:inline-block;padding:2px 8px;
  background:var(--gold);color:var(--navy);
  font-weight:700;font-size:11px;
}

/* Right rail */
.bt-rail{
  position:sticky;
  top:24px;
  align-self:start;
}
.bt-rail__title{
  font-family:"Noto Serif JP",serif;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:0.18em;
  color:var(--navy);
  border-top:2px solid var(--navy);
  padding-top:14px;
  margin-bottom:14px;
}
.bt-rail__ad{
  background:linear-gradient(160deg,var(--navy) 0%, var(--navy-2) 100%);
  color:#fff;
  padding:24px 22px;
  margin-bottom:24px;
  position:relative;
  overflow:hidden;
}
.bt-rail__ad::after{
  content:"";
  position:absolute;
  right:-30px;top:-30px;
  width:90px;height:90px;
  border:1px solid rgba(201,169,97,0.3);
  border-radius:50%;
}
.bt-rail__ad-eyebrow{
  font-size:10px;
  letter-spacing:0.3em;
  color:var(--gold);
  margin-bottom:12px;
  font-family:"Noto Serif JP",serif;
}
.bt-rail__ad-title{
  font-family:"Noto Serif JP",serif;
  font-size:17px;
  font-weight:700;
  line-height:1.55;
  margin-bottom:18px;
}
.bt-rail__ad-btn{
  display:inline-block;
  padding:9px 18px;
  background:var(--gold);
  color:var(--navy);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:0.05em;
}
.bt-rail__mini{
  padding-bottom:14px;
  margin-bottom:14px;
  border-bottom:1px solid var(--line);
}
.bt-rail__mini:last-child{border-bottom:none;}
.bt-rail__mini-cat{
  font-size:10.5px;
  color:var(--gold-2);
  font-weight:700;
  letter-spacing:0.08em;
  margin-bottom:6px;
}
.bt-rail__mini-title{
  font-family:"Noto Serif JP",serif;
  font-size:13px;
  font-weight:700;
  line-height:1.55;
  color:var(--ink);
}

/* ============ MEMBER CTA band ============ */
.bt-member{
  background:var(--navy);
  color:#fff;
  padding:64px 0;
  position:relative;
  overflow:hidden;
}
.bt-member::before{
  content:"";
  position:absolute;
  right:-80px;top:-80px;
  width:280px;height:280px;
  border:1px solid rgba(201,169,97,0.2);
  border-radius:50%;
}
.bt-member::after{
  content:"";
  position:absolute;
  right:20px;top:20px;
  width:140px;height:140px;
  border:1px solid rgba(201,169,97,0.15);
  border-radius:50%;
}
.bt-member__inner{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--pad);
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:64px;
  align-items:center;
  position:relative;
  z-index:1;
}
.bt-member__eyebrow{
  font-size:11px;
  letter-spacing:0.32em;
  color:var(--gold);
  margin-bottom:14px;
  font-family:"Noto Serif JP",serif;
}
.bt-member__title{
  font-family:"Noto Serif JP",serif;
  font-size:32px;
  font-weight:700;
  line-height:1.5;
  margin-bottom:18px;
  text-wrap:pretty;
}
.bt-member__txt{
  font-size:14px;
  line-height:1.9;
  color:rgba(255,255,255,0.78);
  margin-bottom:26px;
  max-width:520px;
}
.bt-member__form{
  display:flex;
  gap:0;
  max-width:480px;
}
.bt-member__form input{
  flex:1;
  padding:14px 18px;
  border:none;
  font-size:13.5px;
  font-family:inherit;
  outline:none;
}
.bt-member__form button{
  padding:14px 28px;
  background:var(--gold);
  color:var(--navy);
  border:none;
  font-weight:700;
  font-size:13px;
  letter-spacing:0.08em;
  cursor:pointer;
  transition:background .2s;
}
.bt-member__form button:hover{background:#dcbb6f;}
.bt-member__benefits{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(201,169,97,0.3);
  padding:32px 36px;
}
.bt-member__benefits-head{
  font-family:"Noto Serif JP",serif;
  font-size:14px;
  color:var(--gold);
  letter-spacing:0.1em;
  margin-bottom:16px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(201,169,97,0.25);
}
.bt-member__benefits-list li{
  font-size:13.5px;
  padding:9px 0;
  display:flex;
  align-items:flex-start;
  gap:12px;
  line-height:1.6;
  color:rgba(255,255,255,0.92);
}
.bt-member__benefits-list li::before{
  content:"";
  flex-shrink:0;
  width:6px;height:6px;
  background:var(--gold);
  margin-top:8px;
}

/* ============ FOOTER ============ */
.bt-footer{
  background:var(--navy-deep);
  color:#fff;
  padding:56px 0 28px;
}
.bt-footer__inner{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--pad);
}
.bt-footer__cols{
  display:grid;
  grid-template-columns:2.2fr 1fr 1fr 1fr 1fr;
  gap:48px;
  margin-bottom:48px;
}
.bt-footer__brand{
  font-family:"Noto Serif JP",serif;
  font-weight:900;
  font-size:24px;
  letter-spacing:0.14em;
  margin-bottom:14px;
}
.bt-footer__brand span{color:var(--gold);}
.bt-footer__desc{
  font-size:12px;
  line-height:1.85;
  color:rgba(255,255,255,0.55);
  max-width:380px;
}
.bt-footer__h{
  font-family:"Noto Serif JP",serif;
  font-size:12.5px;
  font-weight:700;
  color:var(--gold);
  letter-spacing:0.12em;
  margin-bottom:16px;
}
.bt-footer__list li{
  margin-bottom:10px;
  font-size:12px;
  color:rgba(255,255,255,0.65);
}
.bt-footer__list a:hover{color:var(--gold);}
.bt-footer__bot{
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,0.08);
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:11px;
  color:rgba(255,255,255,0.4);
}
.bt-footer__legal{display:flex;gap:18px;}


/* ----------------------------------------------------------------------------
   v6 §C-OVERRIDE:Cocoon 既存要素との統合(ホーム限定)
   ホーム(body.home / body.page-template-page-front)では Cocoon 標準ヘッダー
   と新 .bt-header を共存させない(Cocoon を非表示にして bt-header だけ表示)。
   それ以外のページは Cocoon 既定のまま動く。
   ---------------------------------------------------------------------------- */

body.home #header-container,
body.home .header-container,
body.home #navi,
body.home .navi-in,
body.page-template-page-front #header-container,
body.page-template-page-front #navi {
  display: none !important;  /* ホームでは bt-header / bt-nav を代用 */
}

/* 既存 .bt-cat-nav(v5 由来)は v6 の .bt-nav と被るが、後勝ちで OK */
body.home .bt-cat-nav { display: none !important; }

/* ホーム以外では v6 の .bt-header コンテナは出ない(HTML 自体が無い)が、
   将来のミスで .bt-header が記事ページに混入した場合に隠す保険。 */
body:not(.home):not(.page-template-page-front) .bt-header,
body:not(.home):not(.page-template-page-front) .bt-nav,
body:not(.home):not(.page-template-page-front) .bt-hero {
  display: none !important;
}

/* 既存 v5 / v5_fix の bt-hero と新 v6 の bt-hero は名前衝突する。
   v6 の方が後ろにあるので v6 が勝つが、明示的に v5 残骸を消す。 */
/* (現状 v5 fix では bt-hero 関連の独自スタイルは限定的なので削除不要)*/

/* ----------------------------------------------------------------------------
   v6 §C-COCOON-CTX:Cocoon の本文コンテナ #main / #content への影響を遮断
   ホームの v6 はフルブリードレイアウトなので、Cocoon の #main 上限を解放する。
   ただし body.home 限定で、他ページは v5_fix の 1230px ガードのまま。
   ---------------------------------------------------------------------------- */

body.home #main,
body.home #content {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ----------------------------------------------------------------------------
   v6 §C-RAIL-STICKY:v6 の TOC / Rail は記事ページ内のみ sticky(設計通り)
   記事プレビューセクション(.bt-article-section)内に限定するため追加スコープなし
   ---------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------
   v6 §C-COCOON-NUKE:Cocoon 干渉の完全排除(ホーム限定・2026-05-12 追加)
   ----------------------------------------------------------------------------
   page-front.php v6 は `get_header()` `get_footer()` を呼ぶため、Cocoon 親テーマの
   ヘッダー/フッター/サイドバー/ブレッドクラム/各種ラッパが HTML として出力される。
   これらは v6 のフルブリードレイアウトと衝突する。
   ホーム(body.home)に限定して、Cocoon の chrome を全面的に非表示・幅解放する。
   ホーム以外は v5_fix の挙動を完全に維持(影響ゼロ)。
   ---------------------------------------------------------------------------- */

/* Cocoon ヘッダー周辺を完全に隠す(body.home 限定) */
body.home .header-container,
body.home #header-container,
body.home #header,
body.home .header,
body.home #navi,
body.home .navi-in,
body.home .navi-fixed,
body.home #navi-fixed,
body.home .top,
body.home .breadcrumb,
body.home .breadcrumbs,
body.home #breadcrumb,
body.home .pankuzu,
body.home .bt-cat-nav {
  display: none !important;
}

/* Cocoon のメインコンテナ幅制限を完全解放(body.home 限定) */
body.home .body-wrap,
body.home #body-container,
body.home #container,
body.home #wrap,
body.home .wrap,
body.home #main,
body.home #content,
body.home .main,
body.home .content {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Cocoon のサイドバー非表示(ホーム) */
body.home #sidebar,
body.home .sidebar,
body.home aside.sidebar {
  display: none !important;
}

/* Cocoon の記事ラッパ(本文用 padding 等)をホームでは無効化 */
body.home article,
body.home .article,
body.home .entry-content,
body.home .entry,
body.home .main .entry-content {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* Cocoon は #main を flex/grid にすることがあるが、ホームでは block 戻し */
body.home #main {
  display: block !important;
}

/* Cocoon のフッターは v6 の bt-member CTA の下に出るが、v4/v5_fix の 3 列スタイルを維持 */
/* もしフッター完全置換したいなら下記コメント解除:
body.home .footer,
body.home #footer { display: none !important; }
*/

/* page-template-page-front 系の class でも同様に効くよう保険 */
body.page-template-page-front-v6 .header-container,
body.page-template-page-front-v6 #header,
body.page-template-page-front-v6 #navi,
body.page-template-page-front-v6 .breadcrumb,
body.page-template-page-front-v6 #sidebar {
  display: none !important;
}
body.page-template-page-front-v6 #container,
body.page-template-page-front-v6 #main,
body.page-template-page-front-v6 #content {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* bt-header / bt-hero / bt-section が必ず body 直下フルブリードで描画されるよう保険 */
body.home .bt-header,
body.home .bt-hero,
body.home .bt-section,
body.home .bt-member {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  position: relative !important;
}

/* ----------------------------------------------------------------------------
   v6 §C-PATCH(2026-05-12 運営者フィードバック対応):
   1. ヒーロー画像の見切れ修正(aspect-ratio と height の競合解消)
   2. 注目の記事(.bt-rank)にサムネ追加 + 整理
   3. メンバー CTA バンドのスタイル
   4. 5 列フッターの完成形 + Cocoon フッター完全非表示
   5. ヘッダー検索アイコンの SVG 整形
   ---------------------------------------------------------------------------- */

/* ----- 1. ヒーロー見切れ修正 ------------------------------------------------ */
/* 旧 .bt-hero__card は aspect-ratio: 16/9 + height: 400px + width: 100% が競合し、
   1600px 幅では 900px 高さを試みて max-height: 400px で押し戻され、内部の object-fit
   cover が想定外にトリミングされていた。aspect-ratio を解除し、高さだけ固定する。 */
.bt-hero__card {
  aspect-ratio: auto !important;       /* aspect-ratio 解除 */
  height: 400px !important;             /* 高さ固定 */
  max-height: 400px !important;
  width: 100% !important;
  position: relative;
  overflow: hidden;
}

/* 画像は枠を完全に埋め、視覚的重心(タイトル文字の付近)が見えるよう中央上寄せ */
.bt-hero__card .bt-hero__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  /* 'center 30%' = 画像中央の上 30% 位置を表示中心に。
     biz-trend の Featured Image は中央上部にタイトル文字が入っているため、
     この位置調整でタイトルを欠けずに表示できる。 */
  object-position: center 30% !important;
}

/* モバイルでもヒーロー高さを抑える */
@media (max-width: 767px) {
  .bt-hero__card {
    height: 280px !important;
    max-height: 280px !important;
  }
}

/* ----- 2. 注目の記事(.bt-rank)サムネ + レイアウト整理 -------------------- */
/* 旧:番号 + テキストの 2 ペーン
   新:番号 + サムネ(60×60)+ テキスト の 3 ペーン flex */
.bt-rank__link {
  display: grid !important;
  grid-template-columns: 26px 60px 1fr;
  gap: 12px;
  align-items: center;
  text-decoration: none;
  color: inherit;
  width: 100%;
}

.bt-rank__thumb {
  width: 60px;
  height: 60px;
  overflow: hidden;
  background: #ece9e1;
  flex-shrink: 0;
  display: block;
}

.bt-rank__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .35s;
}

.bt-rank__item:hover .bt-rank__thumb img {
  transform: scale(1.05);
}

/* テキストは縦並びに */
.bt-rank__txt {
  display: flex !important;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.bt-rank__txt-cat {
  font-size: 10px;
  font-weight: 700;
  color: var(--gold-2, #a88a3e);
  letter-spacing: 0.08em;
}

.bt-rank__txt-title {
  font-family: "Noto Serif JP", serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink, #1a1a1a);
  /* 3 行で打ち切り */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bt-rank__item:hover .bt-rank__txt-title {
  color: var(--navy, #0B1F3F);
}

/* ----- 3. メンバー CTA バンド(.bt-member__cta = ボタン)------------------ */
.bt-member__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--gold, #C9A961);
  color: var(--navy, #0B1F3F) !important;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-decoration: none;
  border: 1px solid var(--gold, #C9A961);
  transition: all .2s;
  margin-top: 8px;
}

.bt-member__cta:hover {
  background: #dcbb6f;
  border-color: #dcbb6f;
}

/* ----- 4. SNS アイコン(フッター内)---------------------------------------- */
.bt-footer__sns {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

.bt-footer__sns-link {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.65);
  transition: all .2s;
  border-radius: 50%;
}

.bt-footer__sns-link:hover {
  border-color: var(--gold, #C9A961);
  color: var(--gold, #C9A961);
}

.bt-footer__sns-link svg {
  display: block;
}

/* ----- 5. Cocoon フッターを body.home 限定で完全非表示 -------------------- */
/* page-front_v6.php は独自 <footer class="bt-footer"> を持ち、get_footer() を
   呼ばない設計に変更済(2026-05-12)。
   ただし Cocoon 親テーマの構造的フッター要素が body.home 上に出る可能性に備えて、
   念のため CSS でもガード。 */
body.home .footer,
body.home #footer,
body.home .footer-bottom,
body.home #footer-bottom,
body.home .footer-in,
body.home #site-bottom,
body.home .navi-footer-in {
  display: none !important;
}

/* body.home の最下部に余計な空白を作らない */
body.home {
  overflow-x: hidden;
}

/* ----- 6. 検索アイコンの SVG 整形(ヘッダー右)----------------------------- */
.bt-iconbtn svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* ===== v6 END(BENCHMARK → BizTrend / Cocoon 完全分離 / フッター 5 列 / 見切れ修正済)===== */


/* ============================================================================
   biz-trend CSS v7 — 記事ページ統合(2026-05-12)

   元デザイン:自動化メディアデザイン総括/記事ページデザイン/project/記事ページ v7 - 法人カード乗換え.html
   採用方針:Claude.ai 視覚プロト → 4 並列エージェント検証 → Agent D 合成採用

   構成:
   - Agent D の v7_css_addon.css(1,107 行)= Cocoon 排除 + v7 元 CSS 287 行 + 衝突解消
   - Agent C の v7-article.css.snippet(44 行)= JS 連携用 CSS

   スコープ:body.single-post / body.single 限定(ホーム v6 への影響ゼロ)
   保存セクション:.bt-aff(アフィリ Box)/ .bt-author(著者プロフィール)
   ※ 上記 2 セクションは CSS 残存・HTML 側はコメントアウト運用

   ロールバック:本 v7 セクション削除で v6 状態に復帰
   ============================================================================ */

/* ===== v7 START — 記事ページ統合(2026-05-12)===== */

/* =============================================================================
   biz-trend v7 ARTICLE CSS ADDON(2026-05-12 構築・Agent D 担当)
   -----------------------------------------------------------------------------
   配置先: cocoon-child-biz-trend/style.css 末尾(CLEAN_style_css_v6.css の後ろ)
   役割  : 記事ページ(single-post / single)に v7 デザインを適用しつつ、
           Cocoon 親テーマの chrome(ヘッダー / ブレッドクラム / サイドバー /
           フッター / 本文ラッパ)を body.single-post 限定で完全分離。

   v6(ホーム)への影響: ゼロ
     - すべてのセレクタに body.single-post または body.single または
       既存 .bt-* 既定スコープを必ず付与。
     - body.home / body.page-template-page-front-v6 の見え方は 1px も変えない。

   構成:
     §V7-1  v7 元 HTML <style>(287 行)からそのまま抽出した変数 + 共通スタイル
            (BENCHMARK 名残はリブランドではなく、CSS にはそもそも存在しないため
            置換 0 件。BENCHMARK 文字列は HTML 側のみで、CSS には未登場。)
     §V7-2  記事ページ専用 v7 セクションスタイル(.bt-crumb / .bt-ahead /
            .bt-hero-img / .bt-body / .bt-aff / .bt-author / .bt-meta-bar /
            .bt-rel-sect / .bt-ctaband)
     §V7-3  v6 既存クラスとの衝突解消(body.single-post 限定で v7 仕様を再宣言)
     §V7-4  ★Cocoon 干渉排除(body.single-post / body.single 限定)
     §V7-5  幅解放(body.single-post の #main / #content / #container)
     §V7-6  ロールバック手順 / メモ

   防止策 B:影響範囲 = body.single-post 限定。home / page-front 影響なし。
   防止策 C:グローバルセレクタ追加なし。全セレクタが body.single-post / .bt-* スコープ。
   防止策 E:依頼書外の sticky / animation / font 変更なし。sticky は TOC・右レール限定(v7 元 HTML 準拠)。
   ============================================================================= */


/* =============================================================================
   §V7-1  v7 共通変数 + 共通リセット(body.single-post 限定)
   -----------------------------------------------------------------------------
   v6 :root の変数(--navy / --gold / --line / --grid 等)は既存 v6 ブロックで
   既に定義済。v7 で新規追加する変数は --read / --mk-yellow / --mk-blue / --mk-pink
   のみ。本ファイルでは衝突を避けるため body.single-post スコープで再定義する。
   ============================================================================= */

body.single-post,
body.single {
  /* v7 が要求する追加変数(v6 と非競合) */
  --bt-v7-read: 920px;      /* 記事カラム max-width */
  --bt-v7-grid: 1280px;     /* 全幅 max-width */
  --bt-v7-pad: 40px;        /* セクション内パディング */
  --bt-v7-bg-warm: #f6f4ef; /* 引用 / タグ背景 */
  --bt-v7-bg-soft: #faf8f3; /* Callout 背景 */
  --bt-v7-line: #e5e2da;
  --bt-v7-line-2: #ecebe6;
  --bt-v7-mk-yellow: rgba(255,235,59,0.45);
  --bt-v7-mk-blue:   rgba(33,150,243,0.30);
  --bt-v7-mk-pink:   rgba(244,67,54,0.25);
}


/* =============================================================================
   §V7-4  Cocoon 干渉排除(body.single-post 限定)★最重要
   -----------------------------------------------------------------------------
   Cocoon 親テーマは single.php で以下の chrome を必ず出力する:
     - .header-container / #header / #navi / .navi-in(ヘッダー帯)
     - .breadcrumb / .breadcrumbs / .pankuzu / #breadcrumb(パンくず)
     - #sidebar / .sidebar / aside.sidebar(右サイドバー)
     - .footer / #footer / .footer-in / .navi-footer-in / #site-bottom
     - .entry-content / .entry の本文ラッパ(独自 padding / margin / max-width)
     - #main / #content / #container の最大幅 1078px(Cocoon デフォルト)

   v7 では子テーマ独自の <header class="bt-header"> 等を出力するため、
   親テーマ chrome は完全に display:none、ラッパ幅は 100% に解放する。

   ホーム(body.home)は §C-COCOON-NUKE で既に同等処理済(v6 末尾)なので、
   本ブロックは body.single-post / body.single に限定する。
   ============================================================================= */

/* ----- §V7-4a  Cocoon ヘッダー帯を非表示(記事ページ限定)--------------------- */
body.single-post .header-container,
body.single-post #header-container,
body.single-post #header,
body.single-post .header,
body.single-post #navi,
body.single-post .navi-in,
body.single-post .navi-fixed,
body.single-post #navi-fixed,
body.single-post .top,
body.single .header-container,
body.single #header-container,
body.single #header,
body.single .header,
body.single #navi,
body.single .navi-in,
body.single .navi-fixed,
body.single #navi-fixed,
body.single .top {
  display: none !important;
}

/* ----- §V7-4b  Cocoon ブレッドクラムを非表示(v7 独自 .bt-crumb を使う)--------- */
body.single-post .breadcrumb,
body.single-post .breadcrumbs,
body.single-post #breadcrumb,
body.single-post .pankuzu,
body.single .breadcrumb,
body.single .breadcrumbs,
body.single .pankuzu {
  display: none !important;
}

/* ----- §V7-4c  Cocoon サイドバーを非表示(v7 は独自 .bt-rail を中央 grid 内に持つ)--- */
body.single-post #sidebar,
body.single-post .sidebar,
body.single-post aside.sidebar,
body.single-post .sidebar-form,
body.single #sidebar,
body.single .sidebar,
body.single aside.sidebar {
  display: none !important;
}

/* ----- §V7-4d  Cocoon フッターを非表示(v7 独自 .bt-footer / .bt-ctaband を使う)--- */
body.single-post .footer,
body.single-post #footer,
body.single-post .footer-in,
body.single-post .navi-footer-in,
body.single-post .footer-bottom,
body.single-post #footer-bottom,
body.single-post #site-bottom,
body.single .footer,
body.single #footer,
body.single .footer-in,
body.single .navi-footer-in {
  display: none !important;
}


/* =============================================================================
   §V7-5  幅解放:#main / #content / #container を 100% に(body.single-post 限定)
   -----------------------------------------------------------------------------
   Cocoon は #main / #content に max-width: 1078px(または 834px)を設定する。
   v7 は .bt-body / .bt-ahead 等が自前で max-width(1280 / 920px)を持つため、
   親側のラッパは無制限にし、内側の bt-* で中央寄せ + 最大幅制御する。
   ============================================================================= */

body.single-post .body-wrap,
body.single-post #body-container,
body.single-post #container,
body.single-post #wrap,
body.single-post .wrap,
body.single-post #main,
body.single-post #content,
body.single-post .main,
body.single-post .content,
body.single .body-wrap,
body.single #body-container,
body.single #container,
body.single #wrap,
body.single .wrap,
body.single #main,
body.single #content,
body.single .main,
body.single .content {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Cocoon は #main を flex/grid にして 2 カラムを作るが、記事ページでは block 戻し */
body.single-post #main,
body.single #main {
  display: block !important;
}

/* Cocoon の .entry-content / .entry / article 本体ラッパ余白を無効化
   (v7 の .bt-article / .bt-body__wrap で再構築するため)*/
body.single-post article,
body.single-post .article,
body.single-post .entry-content,
body.single-post .entry,
body.single-post .main .entry-content,
body.single article,
body.single .article,
body.single .entry-content,
body.single .entry {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* body 自身の overflow-x ガード(v7 の絵的装飾円が画面外に流れる場合の保険)*/
body.single-post,
body.single {
  overflow-x: hidden;
}


/* =============================================================================
   §V7-2  v7 記事ページ専用セクション(body.single-post スコープ無しで OK)
   -----------------------------------------------------------------------------
   下記クラス群は v6 に存在しない新規 BEM クラス(.bt-crumb / .bt-ahead /
   .bt-hero-img / .bt-body / .bt-aff / .bt-author / .bt-meta-bar / .bt-rel-sect
   / .bt-ctaband 等)。v6 既存記事 HTML には登場しないため、グローバルに定義しても
   ホームには影響しない(防止策 C 適合)。

   v7 元 HTML の <style>(287 行)を素直に移植。BENCHMARK 残存は CSS 内には
   無いため置換 0 件(HTML 内のみ・別 Agent で差し替え)。
   ============================================================================= */

/* ----- §V7-2-1  パンくず(.bt-crumb)新規 ------------------------------------- */
.bt-crumb { background:#fff; border-bottom:1px solid var(--line-2, #ecebe6); }
.bt-crumb__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  height: 40px;
  display: flex;
  align-items: center;
  font-size: 11.5px;
  color: var(--muted, #6a6a6a);
}
.bt-crumb__inner a { color: var(--muted, #6a6a6a); transition: color .15s; }
.bt-crumb__inner a:hover { color: var(--gold-2, #a88a3e); }
.bt-crumb__sep { margin: 0 10px; opacity: 0.5; }
.bt-crumb__cur { color: var(--ink-2, #3a3a3a); }

/* ----- §V7-2-2  記事ヘッダー(.bt-ahead)新規 -------------------------------- */
.bt-ahead { background:#fff; padding: 48px 0 32px; }
.bt-ahead__inner {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 40px;
}
.bt-ahead__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.bt-ahead__cat {
  display: inline-block;
  padding: 5px 13px;
  background: var(--navy, #0B1F3F);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
}
.bt-ahead__series {
  font-family: "Noto Serif JP", serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--gold-2, #a88a3e);
  font-weight: 600;
}
.bt-ahead__title {
  font-family: "Noto Serif JP", serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--navy, #0B1F3F);
  text-wrap: pretty;
  margin-bottom: 24px;
}
.bt-ahead__lead {
  font-family: "Noto Serif JP", serif;
  font-size: 17.5px;
  line-height: 1.95;
  color: #2a2a2a;
  font-weight: 500;
  margin-bottom: 28px;
  text-wrap: pretty;
}
.bt-ahead__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted, #6a6a6a);
  padding-top: 18px;
  border-top: 1px solid var(--line-2, #ecebe6);
}
.bt-ahead__author { display: flex; align-items: center; gap: 10px; }
.bt-ahead__avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold, #C9A961), var(--gold-2, #a88a3e));
  flex-shrink: 0;
}
.bt-ahead__author-name {
  color: var(--ink-2, #3a3a3a);
  font-weight: 500;
  font-size: 12.5px;
}
.bt-ahead__sep { color: rgba(0,0,0,0.18); }
.bt-ahead__date { font-family:"Noto Serif JP", serif; font-size: 12px; }

/* ----- §V7-2-3  ヒーロー画像(.bt-hero-img)新規 ----------------------------- */
.bt-hero-img { background:#fff; padding: 0 0 48px; }
.bt-hero-img__wrap { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.bt-hero-img__frame {
  aspect-ratio: 16/9;
  max-height: 540px;
  overflow: hidden;
  background: #ece9e1;
}
.bt-hero-img__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.bt-hero-img__cap {
  margin-top: 10px;
  font-size: 11px;
  color: var(--muted, #6a6a6a);
  font-family: "Noto Serif JP", serif;
}

/* ----- §V7-2-4  3 カラム本体(.bt-body)新規 -------------------------------- */
.bt-body { background:#fff; padding: 0 0 64px; }
.bt-body__wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 220px 1fr 240px;
  gap: 48px;
}

/* ----- §V7-2-5  ★アフィリエイト Box(.bt-aff)新規 --------------------------
   ★運営者依頼:CSS 実体は残し、本文では HTML 側でコメントアウト運用想定。
   ASP との合意が取れたら HTML のコメント外しで即時表示できる。
   --------------------------------------------------------------------------- */
.bt-aff {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  margin: 28px 0;
  padding: 24px;
  border: 1px solid var(--navy, #0B1F3F);
  background: #fff;
  transition: all .2s;
  align-items: center;
}
.bt-aff:hover { border-color: var(--gold, #C9A961); background: #fefcf6; }
.bt-aff__main { min-width: 0; }
.bt-aff__row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.bt-aff__badge {
  font-family: "Noto Serif JP", serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  padding: 3px 10px;
  background: var(--navy, #0B1F3F);
  color: #fff;
}
.bt-aff__rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: "Noto Serif JP", serif;
  font-size: 13px;
  color: var(--gold-2, #a88a3e);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.bt-aff__rating::before {
  content: "★ ★ ★ ★ ★";
  letter-spacing: 1px;
  color: var(--gold, #C9A961);
  font-size: 12px;
}
.bt-aff__name {
  font-family: "Noto Serif JP", serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--navy, #0B1F3F);
  margin-bottom: 8px;
  line-height: 1.45;
}
.bt-aff__name small {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--muted, #6a6a6a);
  margin-top: 3px;
  font-family: "Noto Sans JP", sans-serif;
}
.bt-aff__price {
  font-family: "Noto Serif JP", serif;
  font-size: 14px;
  color: var(--ink-2, #3a3a3a);
  margin-bottom: 8px;
}
.bt-aff__price b {
  font-size: 20px;
  color: var(--navy, #0B1F3F);
  font-weight: 700;
  margin: 0 4px;
}
.bt-aff__review {
  font-size: 13px;
  color: #444;
  line-height: 1.7;
  margin: 0;
}
.bt-aff__cta-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 180px;
}
.bt-aff__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  background: var(--gold, #C9A961);
  color: var(--navy, #0B1F3F);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  border: 1px solid var(--gold, #C9A961);
  transition: all .2s;
}
.bt-aff__cta:hover { background: #dcbb6f; }
.bt-aff__cta::after { content: "›"; font-size: 16px; }
.bt-aff__sub {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  font-size: 11px;
  color: var(--muted, #6a6a6a);
  border: 1px solid var(--line, #e5e2da);
  letter-spacing: 0.06em;
}
.bt-aff__disc {
  margin-top: 8px;
  font-size: 10.5px;
  color: #999;
  text-align: right;
}

/* ----- §V7-2-6  右レール新規部分(.bt-rail__h / .bt-rail__rel-* / .bt-rail__rank-* / .bt-rail__news)
   v6 にある .bt-rail / .bt-rail__ad-* と非競合(別 BEM 要素)----------------- */
.bt-rail__sect { margin-bottom: 32px; }
.bt-rail__h {
  font-family: "Noto Serif JP", serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--navy, #0B1F3F);
  border-top: 2px solid var(--navy, #0B1F3F);
  padding-top: 12px;
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.bt-rail__h-en { font-size: 9.5px; letter-spacing: 0.25em; color: var(--gold, #C9A961); }
.bt-rail__rel-item {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed #d8d3c5;
}
.bt-rail__rel-item:last-child { border-bottom: none; }
.bt-rail__rel-thumb {
  width: 60px; height: 60px;
  overflow: hidden;
  background: #ece9e1;
  flex-shrink: 0;
}
.bt-rail__rel-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bt-rail__rel-cat {
  font-size: 10px;
  color: var(--gold-2, #a88a3e);
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.bt-rail__rel-title {
  font-family: "Noto Serif JP", serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink, #1a1a1a);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bt-rail__rank-item {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed #d8d3c5;
}
.bt-rail__rank-item:last-child { border-bottom: none; }
.bt-rail__rank-num {
  font-family: "Noto Serif JP", serif;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  color: #c4c0b3;
}
.bt-rail__rank-item--1 .bt-rail__rank-num { color: var(--gold, #C9A961); }
.bt-rail__rank-item--2 .bt-rail__rank-num { color: #9a9a9a; }
.bt-rail__rank-item--3 .bt-rail__rank-num { color: #b87333; }
.bt-rail__rank-cat {
  font-size: 9.5px;
  color: var(--gold-2, #a88a3e);
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 3px;
}
.bt-rail__rank-title {
  font-family: "Noto Serif JP", serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink, #1a1a1a);
}
.bt-rail__news {
  background: var(--bg-warm, #f6f4ef);
  padding: 22px 20px;
  border: 1px solid var(--line, #e5e2da);
}
.bt-rail__news-en {
  font-size: 9.5px;
  letter-spacing: 0.28em;
  color: var(--gold, #C9A961);
  font-family: "Noto Serif JP", serif;
  margin-bottom: 10px;
}
.bt-rail__news-h {
  font-family: "Noto Serif JP", serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy, #0B1F3F);
  margin-bottom: 8px;
}
.bt-rail__news-txt {
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--ink-2, #3a3a3a);
  margin-bottom: 14px;
}
.bt-rail__news-btn {
  display: block;
  width: 100%;
  padding: 11px;
  background: var(--navy, #0B1F3F);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  border: 1px solid var(--navy, #0B1F3F);
}
.bt-rail__news-btn:disabled { opacity: 0.6; }
.bt-rail__news-note {
  display: block;
  text-align: center;
  font-size: 10px;
  color: var(--muted, #6a6a6a);
  margin-top: 8px;
}

/* ----- §V7-2-7  著者プロフィール(.bt-author)新規 ★コメントアウト想定 --------
   運営者依頼:HTML 側でコメントアウト運用想定。CSS 実体は残す。
   --------------------------------------------------------------------------- */
.bt-author { background:#fff; padding: 48px 0; }
.bt-author__inner {
  max-width: 920px;
  margin: 0 auto;
  padding: 32px 40px;
  border-top: 1px solid var(--navy, #0B1F3F);
  border-bottom: 1px solid var(--navy, #0B1F3F);
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 32px;
  align-items: start;
}
.bt-author__avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold, #C9A961), var(--gold-2, #a88a3e));
  display: grid;
  place-items: center;
  font-family: "Noto Serif JP", serif;
  color: var(--navy, #0B1F3F);
  font-size: 30px;
  font-weight: 900;
}
.bt-author__eyebrow {
  font-family: "Noto Serif JP", serif;
  font-size: 10.5px;
  letter-spacing: 0.3em;
  color: var(--gold-2, #a88a3e);
  font-weight: 600;
  margin-bottom: 6px;
}
.bt-author__name {
  font-family: "Noto Serif JP", serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--navy, #0B1F3F);
  margin-bottom: 4px;
}
.bt-author__role { font-size: 12px; color: var(--muted, #6a6a6a); margin-bottom: 14px; }
.bt-author__bio {
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ink-2, #3a3a3a);
  margin-bottom: 14px;
  max-width: 620px;
}
.bt-author__sns { display: flex; gap: 10px; }
.bt-author__sns a {
  width: 34px; height: 34px;
  border: 1px solid var(--line, #e5e2da);
  display: grid;
  place-items: center;
  color: var(--navy, #0B1F3F);
  transition: all .15s;
}
.bt-author__sns a:hover { border-color: var(--gold, #C9A961); color: var(--gold-2, #a88a3e); }

/* ----- §V7-2-8  タグ + シェアバー(.bt-meta-bar)新規 ----------------------- */
.bt-meta-bar { background:#fff; padding: 24px 0; }
.bt-meta-bar__inner {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.bt-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.bt-tag {
  display: inline-block;
  padding: 6px 12px;
  font-size: 11.5px;
  color: var(--ink-2, #3a3a3a);
  background: var(--bg-warm, #f6f4ef);
  border: 1px solid var(--line, #e5e2da);
  transition: all .15s;
}
.bt-tag:hover { border-color: var(--gold, #C9A961); color: var(--gold-2, #a88a3e); background: #fff; }
.bt-share { display: flex; gap: 10px; align-items: center; }
.bt-share__label {
  font-family: "Noto Serif JP", serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--muted, #6a6a6a);
  margin-right: 6px;
}
.bt-share__btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--navy, #0B1F3F);
  color: var(--navy, #0B1F3F);
  background: #fff;
  cursor: pointer;
  transition: all .15s;
}
.bt-share__btn:hover { background: var(--navy, #0B1F3F); color: var(--gold, #C9A961); }

/* ----- §V7-2-9  関連記事セクション(.bt-rel-sect)新規 --------------------- */
.bt-rel-sect { background: var(--bg-warm, #f6f4ef); padding: 64px 0; }
.bt-rel-sect__inner { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.bt-rel-sect__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--navy, #0B1F3F);
  margin-bottom: 32px;
}
.bt-rel-sect__title {
  font-family: "Noto Serif JP", serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--navy, #0B1F3F);
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.bt-rel-sect__en {
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--gold, #C9A961);
  font-weight: 600;
}
.bt-rel-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.bt-rel-card { display: block; }
.bt-rel-card__media {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #ece9e1;
  margin-bottom: 14px;
}
.bt-rel-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s;
}
.bt-rel-card:hover .bt-rel-card__media img { transform: scale(1.05); }
.bt-rel-card__cat {
  font-size: 10.5px;
  color: var(--gold-2, #a88a3e);
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.bt-rel-card__title {
  font-family: "Noto Serif JP", serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink, #1a1a1a);
  margin-bottom: 10px;
  text-wrap: pretty;
}
.bt-rel-card:hover .bt-rel-card__title { color: var(--navy, #0B1F3F); }
.bt-rel-card__meta { font-size: 11px; color: var(--muted, #6a6a6a); }

/* ----- §V7-2-10  CTA バンド(.bt-ctaband)新規 ------------------------------ */
.bt-ctaband {
  background: var(--navy, #0B1F3F);
  color: #fff;
  padding: 56px 0;
  position: relative;
  overflow: hidden;
}
.bt-ctaband::before {
  content: "";
  position: absolute;
  left: -60px; top: -60px;
  width: 200px; height: 200px;
  border: 1px solid rgba(201,169,97,0.18);
  border-radius: 50%;
}
.bt-ctaband::after {
  content: "";
  position: absolute;
  right: -80px; bottom: -80px;
  width: 240px; height: 240px;
  border: 1px solid rgba(201,169,97,0.15);
  border-radius: 50%;
}
.bt-ctaband__inner {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.bt-ctaband__eyebrow {
  font-family: "Noto Serif JP", serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--gold, #C9A961);
  margin-bottom: 14px;
}
.bt-ctaband__title {
  font-family: "Noto Serif JP", serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.55;
  margin-bottom: 28px;
  text-wrap: pretty;
}
.bt-ctaband__actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.bt-cta--outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: transparent;
  color: var(--gold, #C9A961);
  border: 1px solid var(--gold, #C9A961);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  transition: all .2s;
}
.bt-cta--outline:hover { background: var(--gold, #C9A961); color: var(--navy, #0B1F3F); }
.bt-cta--outline::after { content: "›"; font-size: 16px; }

/* ----- §V7-2-11  v7 fig / figure(.bt-fig)新規 ---------------------------- */
.bt-fig { margin: 32px 0; }
.bt-fig__frame {
  overflow: hidden;
  background: #ece9e1;
  box-shadow: 0 2px 8px rgba(11,31,63,0.08);
}
.bt-fig__frame img { width: 100%; height: auto; display: block; }
.bt-fig__cap {
  margin-top: 10px;
  text-align: center;
  font-size: 11.5px;
  color: var(--muted, #6a6a6a);
  font-family: "Noto Serif JP", serif;
}


/* =============================================================================
   §V7-3  v6 既存クラスとの衝突解消(body.single-post 限定で v7 仕様を上書き)
   -----------------------------------------------------------------------------
   既存 v6 と v7 で名前が同じだが詳細が異なるクラス(全 57 件)のうち、
   ★視覚的に差分がある 8 件のみ body.single-post スコープで v7 仕様を再宣言する。
   残りの 49 件は v6 定義をそのまま流用しても v7 デザイン上の問題が無い(ピクセル
   レベルで一致 or 許容範囲)ので、上書きを最小化する(防止策 C「!important 多用回避」)。

   衝突解消が必要だった主な差分:
     1. .bt-article  (v7: font-size 16px / line-height 1.95 / 段落 1.6em は v6 同等)
        → v6 既存 .bt-article は別構造で list-style 系が異なる。v7 では .bt-article > ul/ol
        の独自スタイルが必須。body.single-post スコープで再宣言。
     2. .bt-callout / __title  (v7 は line-height 1.9 / font-size 14.5 で v6 1.85 / 14 と僅差)
        → 視覚的にはほぼ同じだが、v7 の .bt-callout--summary background:#fbf8ef が v6 と異なる
        → body.single-post 限定で再宣言。
     3. .bt-callout--warn / --note の有無差(v6 は --warning、v7 は --warn)
        → v6 にも --warn は存在(v6:6991)するので両対応。
     4. .bt-quote::before の上下位置(v6: top:-8px font-size:60px / v7: top:-6px font-size:64px)
        → 微差、v7 仕様を採用するため再宣言。
     5. .bt-quote__text (v7: font-style:normal / v6: font-style:italic)→ 上書き必要。
     6. .bt-table tbody td (v7: padding:14px / v6: padding:12px 14px)→ 微差、再宣言。
     7. .bt-mk background-size (v7: 100% 42% / v6: 100% 38%)→ 微差、再宣言。
     8. .bt-toc__head / __title (v7 は border-top:2px solid navy で v6 と異なる)
        → body.single-post 限定で再宣言。
   ============================================================================= */

/* ----- §V7-3-1  .bt-article 本文構造(v7 仕様)----------------------------- */
body.single-post .bt-article,
body.single .bt-article {
  font-size: 16px;
  line-height: 1.95;
  color: #262626;
  min-width: 0;
}
body.single-post .bt-article p,
body.single .bt-article p {
  margin-bottom: 1.6em;
  line-height: 1.95;
}
body.single-post .bt-article > p:first-of-type,
body.single .bt-article > p:first-of-type {
  margin-top: 8px;
}
body.single-post .bt-article h2,
body.single .bt-article h2 {
  font-family: "Noto Serif JP", serif;
  font-size: 25px;
  font-weight: 700;
  color: var(--navy, #0B1F3F);
  margin: 48px 0 22px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--navy, #0B1F3F);
  line-height: 1.5;
  scroll-margin-top: 24px;
  text-wrap: pretty;
}
body.single-post .bt-article h2:first-child,
body.single .bt-article h2:first-child { margin-top: 0; }
body.single-post .bt-article h3,
body.single .bt-article h3 {
  font-family: "Noto Serif JP", serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--ink, #1a1a1a);
  margin: 32px 0 14px;
  padding-left: 14px;
  border-left: 4px solid var(--gold, #C9A961);
  line-height: 1.55;
  scroll-margin-top: 24px;
  text-wrap: pretty;
}
body.single-post .bt-article strong,
body.single .bt-article strong { color: var(--navy, #0B1F3F); font-weight: 700; }
body.single-post .bt-article a:not(.bt-aff__cta):not(.bt-aff):not(.bt-share__btn):not(.bt-aff__sub),
body.single .bt-article a:not(.bt-aff__cta):not(.bt-aff):not(.bt-share__btn):not(.bt-aff__sub) {
  color: var(--gold-2, #a88a3e);
  border-bottom: 1px solid rgba(168,138,62,0.35);
}
body.single-post .bt-article ul,
body.single-post .bt-article ol,
body.single .bt-article ul,
body.single .bt-article ol { margin: 14px 0 24px 8px; }
body.single-post .bt-article ul li,
body.single-post .bt-article ol li,
body.single .bt-article ul li,
body.single .bt-article ol li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  line-height: 1.85;
}
body.single-post .bt-article ul li::before,
body.single .bt-article ul li::before {
  content: "";
  position: absolute;
  left: 4px; top: 13px;
  width: 6px; height: 6px;
  background: var(--gold, #C9A961);
}
body.single-post .bt-article ol,
body.single .bt-article ol { counter-reset: ol; }
body.single-post .bt-article ol li,
body.single .bt-article ol li { counter-increment: ol; }
body.single-post .bt-article ol li::before,
body.single .bt-article ol li::before {
  content: counter(ol, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  color: var(--gold-2, #a88a3e);
  font-size: 13px;
  letter-spacing: 0.04em;
}

/* ----- §V7-3-2  .bt-mk マーカー(v7 仕様の background-size 42%)------------ */
body.single-post .bt-mk,
body.single .bt-mk {
  padding: 0 3px;
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% 42%;
}

/* ----- §V7-3-3  .bt-callout 本体(v7 仕様の padding / 背景色)------------- */
body.single-post .bt-callout,
body.single .bt-callout {
  margin: 32px 0;
  padding: 22px 26px 22px 64px;
  font-size: 14.5px;
  line-height: 1.9;
}
body.single-post .bt-callout--summary,
body.single .bt-callout--summary {
  background: #fbf8ef;
  border-left: 4px solid var(--gold, #C9A961);
}
body.single-post .bt-callout--point,
body.single .bt-callout--point {
  border-left: 4px solid var(--navy, #0B1F3F);
  background: #f3f5f9;
}
body.single-post .bt-callout--point .bt-callout__title,
body.single .bt-callout--point .bt-callout__title { color: var(--navy, #0B1F3F); }
body.single-post .bt-callout--note,
body.single .bt-callout--note {
  border-left: 4px solid #9a9a9a;
  background: #f6f5f3;
}
body.single-post .bt-callout--note .bt-callout__title,
body.single .bt-callout--note .bt-callout__title { color: #555; }

/* ----- §V7-3-4  .bt-quote(v7 仕様:italic 解除 / 引用符位置)-------------- */
body.single-post .bt-quote,
body.single .bt-quote {
  margin: 36px 0;
  padding: 26px 30px 24px;
  background: var(--bg-warm, #f6f4ef);
  border-left: 4px solid var(--gold, #C9A961);
}
body.single-post .bt-quote::before,
body.single .bt-quote::before {
  top: -6px;
  font-size: 64px;
  opacity: 0.55;
}
body.single-post .bt-quote__text,
body.single .bt-quote__text {
  font-style: normal;
  font-size: 17.5px;
  padding-left: 28px;
  margin: 0 0 12px;
  text-wrap: pretty;
}
body.single-post .bt-quote__cite,
body.single .bt-quote__cite {
  margin-top: 0;
  padding-left: 28px;
}

/* ----- §V7-3-5  .bt-table(v7 仕様:padding 14px / 商品セル subtitle)------ */
body.single-post .bt-table tbody td,
body.single .bt-table tbody td {
  padding: 14px;
  vertical-align: middle;
  line-height: 1.65;
}
body.single-post .bt-table thead th,
body.single .bt-table thead th { padding: 13px 14px; letter-spacing: 0.06em; }
body.single-post .bt-table__product,
body.single .bt-table__product { font-size: 13.5px; }
body.single-post .bt-table__product small,
body.single .bt-table__product small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted, #6a6a6a);
  margin-top: 2px;
}
body.single-post .bt-table__score,
body.single .bt-table__score {
  padding: 3px 10px;
  font-size: 11.5px;
  letter-spacing: 0;
}

/* ----- §V7-3-6  .bt-toc(v7 仕様:border-top 2px navy / __sub 表示)-------- */
body.single-post .bt-toc,
body.single .bt-toc {
  position: sticky;
  top: 24px;
  align-self: start;
}
body.single-post .bt-toc__head,
body.single .bt-toc__head {
  padding: 14px 0;
  border-top: 2px solid var(--navy, #0B1F3F);
  margin-bottom: 14px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
body.single-post .bt-toc__title,
body.single .bt-toc__title {
  font-family: "Noto Serif JP", serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy, #0B1F3F);
  letter-spacing: 0.05em;
}
body.single-post .bt-toc__sub,
body.single .bt-toc__sub {
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--gold, #C9A961);
  font-family: "Noto Serif JP", serif;
}
body.single-post .bt-toc__item,
body.single .bt-toc__item { margin: 0; }
body.single-post .bt-toc__link,
body.single .bt-toc__link {
  display: block;
  font-size: 12px;
  line-height: 1.55;
  padding: 9px 0 9px 14px;
  border-left: 2px solid var(--line, #e5e2da);
  color: var(--muted, #6a6a6a);
  transition: all .15s;
}
body.single-post .bt-toc__link:hover,
body.single .bt-toc__link:hover { color: var(--navy, #0B1F3F); }
body.single-post .bt-toc__item--h3 .bt-toc__link,
body.single .bt-toc__item--h3 .bt-toc__link {
  padding-left: 26px;
  font-size: 11.5px;
  color: #888;
}
body.single-post .bt-toc__item--active > .bt-toc__link,
body.single .bt-toc__item--active > .bt-toc__link {
  border-left-color: var(--gold, #C9A961);
  color: var(--navy, #0B1F3F);
  font-weight: 700;
  background: linear-gradient(90deg, rgba(201,169,97,0.10), transparent);
}


/* =============================================================================
   §V7-6  メモ / ロールバック手順
   -----------------------------------------------------------------------------
   - 本ブロックを丸ごと削除すれば、記事ページは Cocoon デフォルト + v6 既存
     .bt-* スタイル(共通ヘッダー類)に戻る。ホーム / 固定ページには無影響。
   - 記事 HTML(WP の content)は無修正。v7 デザインの適用は single-bt.php
     テンプレ + 本 CSS の合わせ技で行う(別 Agent A 担当)。
   - sticky は §V7-3-6 の .bt-toc と §V7-2-6 の .bt-rail のみ。ヘッダーは static。
   - !important は §V7-4 / §V7-5 の Cocoon 解除のみ(他は使わない)。
   ============================================================================= */

/* ===== v7 ARTICLE ADDON END ================================================ */


/* ----- Agent C の JS 連携用 CSS(scroll-margin-top 等)----- */
/* =========================================================
 * biz-trend 記事ページ v7 — JS 連携用 CSS スニペット
 * 出力先想定:CLEAN_style_css_v7.css の末尾に追記
 *
 * 防止策遵守:
 *   C  .bt-* プレフィックス内のみ、グローバルセレクタ追加なし
 *   E  scroll-margin / toast 以外の追加なし(animation は toast のみ)
 * ========================================================= */

/* --- 1. アンカースクロール時のヘッダー被り回避 -------------- */
/* IntersectionObserver の rootMargin と整合(上端 100px 想定) */
body.single-post .bt-article h2[id],
body.single-post .bt-article h3[id] {
  scroll-margin-top: 24px;
}

/* TOC 自身も #hash で飛ばれた時のため余白を確保 */
body.single-post .bt-toc {
  scroll-margin-top: 24px;
}

/* --- 2. URL コピー成功トースト --------------------------- */
.bt-toc-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  padding: 12px 18px;
  background: rgba(20, 20, 20, 0.92);
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  border-radius: 4px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.bt-toc-toast--visible {
  opacity: 1;
  transform: translateY(0);
}




/* ============================================================================
   v7 §C-PATCH(2026-05-12 運営者フィードバック対応・3 並列エージェント合成)

   1. Cocoon ショートコード([point] [alert] [catch] 等)のスタイル復元
      → Agent A の output/design/v7_article/A_displaybug/cocoon_shortcode_css.css
   2. アイキャッチ左寄り解消 + 見切れ修正(object-position center 30%)
      → Agent B の output/design/v7_article/B_visualfix/visualfix_v7.css
   3. 本文の overflow / 文字飛び出し防止(英数字 break-all / 日本語 normal)
   ========================================================================== */

/* ----- Agent A:Cocoon ショートコードスタイル復元 ----- */

/* =============================================================
   Cocoon ショートコード × v7 統合スタイル(任意・追加分のみ)
   -------------------------------------------------------------
   Agent A(2026-05-12)
   配置先候補:
     - `output/design/CLEAN_style_css_v7.css` の §12 末尾(L941 付近)に追記
     - もしくは子テーマ追加 CSS として独立配信(凍結対象外)
   スコープ:`body.single-post` のみ(記事個別ページ)
   方針  :既存の `.point-box` `.alert-box`(v7 CSS L884-915)は活かしたうえで、
           Cocoon 内部の子要素(`.point-title` `.alert-title` 等の title span)と
           v7 で未カバーだった追加ボックス(`.catch-box` `.short-box` 他)のみ補う。
   防止策:
     - すべて `body.single-post` プレフィックスでスコープ限定(連鎖影響ゼロ)
     - グローバルセレクタ・要素単独セレクタ・`#main` `#content` の上書きなし
     - 既存色(`var(--bt-…)`)を再利用、新規 CSS 変数の追加なし
   ============================================================= */

/* ── [point title="…"] の見出し span(`<span class="point-title">…</span>`) ── */
body.single-post .point-box .point-title {
  display: block;
  font-weight: 700;
  font-size: var(--bt-fs-lg, 1.05rem);
  margin-bottom: var(--bt-space-2, 6px);
  color: var(--bt-info, #2563EB);
  letter-spacing: 0.02em;
}

/* ── [alert title="…"] の見出し span(`<span class="alert-title">…</span>`) ── */
body.single-post .alert-box .alert-title {
  display: block;
  font-weight: 700;
  font-size: var(--bt-fs-lg, 1.05rem);
  margin-bottom: var(--bt-space-2, 6px);
  color: var(--bt-warning, #B45309);
  letter-spacing: 0.02em;
}

/* ── [catch title="…"] / `.catch-box`(v7 未カバー)──
   Cocoon の catch 系は中央寄せ・大きめ字の引用ボックス。v7 では quote 風に統一。 */
body.single-post .catch-box {
  background: var(--bt-bg-section, #F8FAFC);
  border-top: 2px solid var(--bt-navy-900, #0F172A);
  border-bottom: 2px solid var(--bt-navy-900, #0F172A);
  padding: var(--bt-space-6, 24px) var(--bt-space-6, 24px);
  margin: var(--bt-space-6, 24px) 0;
  text-align: center;
  font-size: var(--bt-fs-lg, 1.1rem);
  line-height: 1.7;
  color: var(--bt-text-primary, #0F172A);
}
body.single-post .catch-box .catch-title {
  display: block;
  font-weight: 700;
  font-size: var(--bt-fs-xl, 1.2rem);
  margin-bottom: var(--bt-space-3, 10px);
  color: var(--bt-navy-900, #0F172A);
}

/* ── [short title="…"] / `.short-box`(v7 未カバー)── */
body.single-post .short-box {
  background: var(--bt-bg-soft, #F1F5F9);
  border-left: 4px solid var(--bt-navy-500, #1E293B);
  padding: var(--bt-space-4, 16px) var(--bt-space-5, 20px);
  margin: var(--bt-space-5, 20px) 0;
  border-radius: 0 var(--bt-radius-md, 8px) var(--bt-radius-md, 8px) 0;
}
body.single-post .short-box .short-title {
  display: block;
  font-weight: 700;
  margin-bottom: var(--bt-space-2, 6px);
  color: var(--bt-text-primary, #0F172A);
}

/* ── 既存 .point-box / .alert-box の補強(v7 CSS L884-915 と整合する追記) ──
   make_clickable で挿入された <a> リンクのカラーをボックス内で目立たせる */
body.single-post .point-box a,
body.single-post .alert-box a,
body.single-post .catch-box a,
body.single-post .short-box a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── 本文内の裸 URL から make_clickable で生成された <a> の最低限の可視化 ──
   既存の `.bt-article a` 系統で大体カバーされているはずだが、出典行などの
   インライン URL がリンク化された際に色弱者にも判別できる下線を保証する。 */
body.single-post .bt-article a[href^="http"]:not([class]) {
  color: var(--bt-info, #2563EB);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;       /* 長い URL の折り返し対策(モバイル幅) */
}
body.single-post .bt-article a[href^="http"]:not([class]):hover {
  color: var(--bt-navy-900, #0F172A);
}


/* ----- Agent B:アイキャッチ左寄り + 見切れ + 文字 overflow 修正 ----- */

/* =============================================================================
   v7 記事ページ視覚バグ修正 — Agent B(アイキャッチ + 文字飛び出し修正)
   -----------------------------------------------------------------------------
   対応バグ:
     Bug 3 = アイキャッチ「左寄り」(右が空白で中央寄せにならない)
     Bug 4 = アイキャッチ「見切れ」(タイトル文字等が object-fit: cover で欠ける)
     Bug 5 = 本文の文字飛び出し(長 URL / 日本語の overflow)

   配置:
     CLEAN_style_css_v7.css の末尾(L8830 以降)へ「§V7-BFIX」として追記。
     既存 §V7-2-3(ヒーロー)/ §V7-5(幅解放)を上書きする。

   防止策遵守:
     B = body.single-post / body.single スコープ限定(home / page-front 影響ゼロ)
     C = 既存 v7 クラスの上書きのみ。新規グローバルセレクタ追加なし。
     D = 配色変更なし(コントラスト検証不要)
     E = sticky / animation / font 追加なし。依頼書範囲のみ。
   ============================================================================= */


/* =============================================================================
   §V7-BFIX-1  ヒーロー画像 中央寄せ強化(Bug 3:左寄り解消)
   -----------------------------------------------------------------------------
   ★根本原因:
     既存 §V7-2-3 で `.bt-hero-img__wrap { max-width: 1280px; margin: 0 auto; }`
     を宣言しているが、親側の Cocoon `#main` / `#content` / `.content-in` が
     display: flex(または text-align や margin-left: 0)で配置されていると
     中央寄せにならず左寄せに見えるケースがある。
     §V7-5(幅解放)で width: 100% にしているが、Cocoon が
     justify-content: flex-start などを残している場合の保険として
     親側の margin auto / display block / text-align: initial を明示。
   ============================================================================= */

body.single-post #main,
body.single-post #content,
body.single-post .content-in,
body.single-post #container,
body.single #main,
body.single #content,
body.single .content-in,
body.single #container {
  /* §V7-5 と整合:幅 100% + 中央寄せ(余白 auto)を明示 */
  margin-left: auto !important;
  margin-right: auto !important;
  /* Cocoon が justify-content: flex-start / center を継承させる場合の遮断 */
  display: block !important;
  /* 親 text-align: center を継承して img / figure が左寄せ崩れする場合の対策 */
  text-align: initial !important;
}

/* ヒーロー wrap 自身も margin auto を強制(親が flex の場合に備えた二重防衛) */
body.single-post .bt-hero-img__wrap,
body.single .bt-hero-img__wrap {
  max-width: 1280px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 40px;
  width: 100%;
  box-sizing: border-box;
}

/* ヒーローセクション全体も 100% 幅で中央配置(Cocoon の `.entry-content` 内に
   入る可能性に備えた保険)*/
body.single-post .bt-hero-img,
body.single .bt-hero-img {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}


/* =============================================================================
   §V7-BFIX-2  ヒーロー画像 見切れ修正(Bug 4:タイトル欠け防止)
   -----------------------------------------------------------------------------
   ★v6 §C-PATCH(L7491-7500)整合:
     v6 では `.bt-hero__card .bt-hero__media img` に
     `object-position: center 30% !important` を当てて、
     Featured Image の中央上部にあるタイトル文字を欠けさせない対応を済ませている。
     v7 のヒーロー(`.bt-hero-img__frame img`)にも同思想で統一する。
   ============================================================================= */

body.single-post .bt-hero-img__frame,
body.single .bt-hero-img__frame {
  aspect-ratio: 16/9;
  max-height: 540px;
  overflow: hidden;
  background: #ece9e1;
  width: 100%;
}

body.single-post .bt-hero-img__frame img,
body.single .bt-hero-img__frame img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  /* v6 §C-PATCH と同じ値:画像の上 30% 位置を視覚的中心に
     biz-trend の Featured Image は中央上部にタイトル文字がある */
  object-position: center 30% !important;
  display: block;
}

/* モバイルでもアスペクト比を維持(v6 §C-PATCH のモバイル方針と整合)*/
@media (max-width: 767px) {
  body.single-post .bt-hero-img__frame,
  body.single .bt-hero-img__frame {
    max-height: 280px;
  }
  body.single-post .bt-hero-img__wrap,
  body.single .bt-hero-img__wrap {
    padding: 0 20px;
  }
}


/* =============================================================================
   §V7-BFIX-3  本文 overflow 防止(Bug 5:文字 / URL 飛び出し)
   -----------------------------------------------------------------------------
   戦略:
     - 英数字 URL(`https://...`)= word-break: break-all + overflow-wrap: anywhere
       → 単語境界を無視して任意位置で改行(URL は意味境界が無いので OK)
     - 日本語本文 = overflow-wrap: anywhere + word-break: normal
       → 句読点が行頭/行末に飛び出さない通常の禁則処理を維持しつつ、
         長い単語(URL や英語語彙)だけは折り返す
     - Callout / Quote / 表 = overflow-wrap: break-word(穏当)
       → 日本語句読点の位置を壊さず、必要時のみ折り返し
   ============================================================================= */

/* ---- 本文ルート:日本語禁則を維持しつつ、長 URL/英単語は折り返し ---- */
body.single-post .bt-article,
body.single .bt-article {
  overflow-wrap: anywhere;
  word-break: normal;        /* 日本語の句読点禁則を維持 */
  hyphens: auto;
  /* 念のため横はみ出し防止 */
  max-width: 100%;
}

body.single-post .bt-article p,
body.single .bt-article p {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* ---- リンク URL は積極的に改行可(英数字 URL の専用ルール) ---- */
body.single-post .bt-article a,
body.single .bt-article a {
  word-break: break-all;
  overflow-wrap: anywhere;
}

/* ---- 表セル:日本語句読点禁則は維持しつつ、長語のみ折返し ---- */
body.single-post .bt-article table,
body.single .bt-article table,
body.single-post .bt-table,
body.single .bt-table {
  max-width: 100%;
  table-layout: auto;
}

body.single-post .bt-article td,
body.single-post .bt-article th,
body.single .bt-article td,
body.single .bt-article th,
body.single-post .bt-table td,
body.single-post .bt-table th,
body.single .bt-table td,
body.single .bt-table th {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* セル内リンクは表でも break-all(URL の長さ問題は表で顕著) */
body.single-post .bt-article td a,
body.single-post .bt-article th a,
body.single .bt-article td a,
body.single .bt-article th a {
  word-break: break-all;
  overflow-wrap: anywhere;
}

/* ---- Callout / Quote / Aff Box / Point Box / Alert Box ---- */
/* 日本語が中心なので break-word(穏当)。break-all にすると句読点禁則が壊れる */
body.single-post .bt-callout,
body.single-post .bt-quote,
body.single-post .bt-aff,
body.single-post .bt-aff__box,
body.single-post .point-box,
body.single-post .alert-box,
body.single .bt-callout,
body.single .bt-quote,
body.single .bt-aff,
body.single .bt-aff__box,
body.single .point-box,
body.single .alert-box {
  overflow-wrap: break-word;
  word-break: normal;
  max-width: 100%;
  box-sizing: border-box;
}

/* これらの内部リンクも積極改行 */
body.single-post .bt-callout a,
body.single-post .bt-quote a,
body.single-post .bt-aff a,
body.single-post .point-box a,
body.single-post .alert-box a,
body.single .bt-callout a,
body.single .bt-quote a,
body.single .bt-aff a,
body.single .point-box a,
body.single .alert-box a {
  word-break: break-all;
  overflow-wrap: anywhere;
}

/* ---- 本文内画像:親要素を超えない(レスポンシブ保険) ---- */
body.single-post .bt-article img,
body.single .bt-article img {
  max-width: 100%;
  height: auto;
}

/* ---- pre / code:コード/長 URL は横スクロール可で逃がす ---- */
body.single-post .bt-article pre,
body.single .bt-article pre {
  overflow-x: auto;
  max-width: 100%;
  white-space: pre;          /* code 内は強制改行しない(意味を壊さない)*/
  -webkit-overflow-scrolling: touch;
}

body.single-post .bt-article code,
body.single .bt-article code {
  /* インライン code はテキストとして自然改行 */
  overflow-wrap: anywhere;
  word-break: break-all;
}

/* ---- 見出し:超長見出しの飛び出し防止 ---- */
body.single-post .bt-article h2,
body.single-post .bt-article h3,
body.single-post .bt-article h4,
body.single .bt-article h2,
body.single .bt-article h3,
body.single .bt-article h4 {
  overflow-wrap: break-word;
  word-break: normal;
  max-width: 100%;
}

/* ---- リスト:長 URL を含む li でも飛び出さない ---- */
body.single-post .bt-article ul,
body.single-post .bt-article ol,
body.single-post .bt-article li,
body.single .bt-article ul,
body.single .bt-article ol,
body.single .bt-article li {
  overflow-wrap: anywhere;
  word-break: normal;
  max-width: 100%;
  box-sizing: border-box;
}

/* ===== §V7-BFIX END ===== */


/* ----------------------------------------------------------------------------
   v7 §C-PATCH-2(2026-05-12 第 2 弾・運営者フィードバック反映):
   1. 比較表の「★おすすめ」リボン見切れ修正(overflow:visible で逃がす)
   2. 個別記事のヘッダーメニュー追加(single.php 側で対応・CSS は v6 流用)
   ---------------------------------------------------------------------------- */

/* ----- 1. ★おすすめ リボン / バッジ見切れ防止 ----- */
/* Cocoon の [comp] [comp-c] / 自作 .bt-table の「おすすめ」ヘッダーは
   通常 position: absolute + top: -X px で「上に飛び出す」レイアウト。
   親 table セルや .bt-table-wrap が overflow:hidden だとクリップされる。
   body.single-post 限定でホーム / カテゴリページに影響しない。 */

body.single-post .bt-article {
  overflow: visible;
}

/* table 系コンテナの clip を解除 */
body.single-post .bt-article .bt-table-wrap,
body.single-post .bt-article .table-wrap,
body.single-post .bt-article .scroll-table {
  overflow: visible !important;
}

/* table 自身も visible に */
body.single-post .bt-article table {
  overflow: visible;
}
body.single-post .bt-article th,
body.single-post .bt-article td {
  position: relative;  /* 子の absolute 位置決めの基準 */
  overflow: visible;
}

/* Cocoon 系リボン要素を確実に最前面 + 切らない */
body.single-post .bt-article [class*="ribbon"],
body.single-post .bt-article .recommended,
body.single-post .bt-article .star-ribbon,
body.single-post .bt-article .recommend-mark,
body.single-post .bt-article .badge-osusume {
  z-index: 5;
  overflow: visible;
}

/* リボン付き比較表の上部に余白を確保(上に飛び出す分) */
body.single-post .bt-article .comp-table,
body.single-post .bt-article .recommend-table,
body.single-post .bt-article table.has-ribbon {
  margin-top: 32px !important;
}

/* 全表に小さい margin-top で「おすすめ」が出る可能性に備える */
body.single-post .bt-article table {
  margin-top: 24px;
}



/* ============================================================================
   v7 §C-PATCH-3(2026-05-12 第 3 弾・運営者フィードバック反映):
   1. アイキャッチ contain 化(切り取りゼロ・Navy 余白で額縁感)
   2. 比較表の行ヘッダー真っ黒修正(tbody th 文字色明示)
   ========================================================================== */

/* ----- Agent A:アイキャッチ object-fit:contain 化(Navy 額縁)----- */

/* =============================================================================
   §A-THUMB-CONTAIN (2026-05-12)  アイキャッチ「切り取りゼロ」表示パッチ
   -----------------------------------------------------------------------------
   担当 : Agent A (biz-trend v6 視覚バグ修正)
   依頼 : 運営者
       「ホームのページでアイキャッチが切れている。これアイキャッチは切り取りせず
        に単純に拡大縮小でいいんじゃないかな。」

   ★方針
     - すべての記事サムネ/ヒーロー画像を `object-fit: cover`(切り取り)から
       `object-fit: contain`(アスペクト比維持・縮小)へ切替。
     - contain で発生する上下/左右の余白を Navy(--bt-navy / --navy = #0B1F3F)で
       塗り、v7 元デザイン(Navy + Gold + 白)のトーンと一貫した「Navy 額縁」
       表示にする。
     - コンテナ背景も同色 Navy にして、画像とコンテナ余白の境目を消し、
       「枠なしの一体感」を演出する。

   ★スコープ(防止策 B)
     - body.home      (ホームページ全般)
     - body.single    (記事ページのヒーロー .bt-hero-img__frame)
     ※グローバル汚染を避けるため、すべて body.* スコープで限定。
       既存 v6/v7 CSS の `.bt-*__media img` 単独セレクタは触らない。

   ★既存 v7 §C-PATCH (L7491-7500) / §V7-BFIX-2 (L9035-9044) との関係
     - 既存パッチは `object-fit: cover !important` + `object-position: center 30%`
       で「上 30% を中心に切り取り」する設定。
     - 本パッチはそれを上書きして「切り取りなし・中央配置・Navy 余白」に変更。
     - 既存 !important を上書きするため、本パッチも !important + 後ろに置く前提。

   ★防止策チェック
     A (visual regression) : 適用後に visual_regression.sh で home / 記事 / カテゴリの
                              diff を確認推奨。修正対象ページの差分は意図通り「大」。
     B (影響範囲申告)       : 下記 6 セレクタ + 2 body スコープのみ。
     C (コンポーネントスコープ): 既存セレクタの上書きのみ。グローバル(* / body直 / a直)
                              は一切追加していない。
     D (コントラスト)       : 配色変更は背景 #0B1F3F (Navy) の追加のみ。Navy 上に文字を
                              新規に重ねる箇所はない(画像が乗るだけ)。コントラスト
                              基準への影響なし。
     E (独断追加禁止)       : 依頼書「contain 化 + Navy 余白」の範囲外の挙動(animation,
                              sticky, hover 新規, font 変更等)は一切追加していない。
                              既存の `transition: transform .5s` 等は維持。
   ============================================================================= */


/* ----- §A-1  ホーム:ヒーロー画像 contain 化 -------------------------------- */
/* 対象 : 編集部のおすすめ「大」のヒーローカルーセル / 単一ヒーロー
   既存 : v7 L7492-7500 (object-fit:cover !important + object-position:center 30%)
   上書 : object-fit:contain !important + object-position:center !important   */

body.home .bt-hero__card {
  background-color: var(--bt-navy, var(--navy, #0B1F3F)) !important;
}

body.home .bt-hero__card .bt-hero__media,
body.home .bt-hero__media {
  background-color: var(--bt-navy, var(--navy, #0B1F3F)) !important;
}

body.home .bt-hero__card .bt-hero__media img,
body.home .bt-hero__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background-color: var(--bt-navy, var(--navy, #0B1F3F)) !important;
}


/* ----- §A-2  ホーム:編集部のおすすめ「大」(.bt-feature)--------------------- */
/* 対象 : 3カラム左 45fr の主役カード画像 (aspect-ratio:16/10)
   既存 : v7 L6610-6621 (object-fit:cover; background:#ece9e1)                 */

body.home .bt-feature__media {
  background-color: var(--bt-navy, var(--navy, #0B1F3F)) !important;
}

body.home .bt-feature__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background-color: var(--bt-navy, var(--navy, #0B1F3F)) !important;
}


/* ----- §A-3  ホーム:中央リスト 140px サムネ(.bt-list)----------------------- */
/* 対象 : 3カラム中央 35fr の記事リストサムネ (aspect-ratio:4/3)
   既存 : v7 L6668-6676 (object-fit:cover; background:#ece9e1)                 */

body.home .bt-list__media {
  background-color: var(--bt-navy, var(--navy, #0B1F3F)) !important;
}

body.home .bt-list__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background-color: var(--bt-navy, var(--navy, #0B1F3F)) !important;
}


/* ----- §A-4  ホーム:カテゴリーグリッドカード(.bt-card)----------------------- */
/* 対象 : 5列カテゴリーグリッドのカード画像 (aspect-ratio:4/3)
   既存 : v7 L6768-6779 (object-fit:cover; background:#ece9e1)                 */

body.home .bt-card__media {
  background-color: var(--bt-navy, var(--navy, #0B1F3F)) !important;
}

body.home .bt-card__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background-color: var(--bt-navy, var(--navy, #0B1F3F)) !important;
}


/* ----- §A-5  ホーム:右レール ランキング 60×60 サムネ(.bt-rank__thumb)-------- */
/* 対象 : 注目の記事ランキング 3 ペーン flex のサムネ
   既存 : v7 L7523-7542 (60×60; object-fit:cover; background:#ece9e1)           */

body.home .bt-rank__thumb {
  background-color: var(--bt-navy, var(--navy, #0B1F3F)) !important;
}

body.home .bt-rank__thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background-color: var(--bt-navy, var(--navy, #0B1F3F)) !important;
}


/* ----- §A-6  記事ページ:ヒーロー画像(.bt-hero-img__frame)------------------- */
/* 対象 : 個別記事冒頭のフルワイドヒーロー (aspect-ratio:16/9, max-height:540px)
   既存 : v7 L7975-7985 (object-fit:cover) と
          v7 §V7-BFIX-2 L9035-9044 (object-fit:cover !important + center 30%)
   ★運営者方針:ホームの記事サムネ全部の意図だが、記事ページも同じ仕様で OK   */

body.single-post .bt-hero-img__frame,
body.single .bt-hero-img__frame {
  background-color: var(--bt-navy, var(--navy, #0B1F3F)) !important;
}

body.single-post .bt-hero-img__frame img,
body.single .bt-hero-img__frame img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background-color: var(--bt-navy, var(--navy, #0B1F3F)) !important;
}


/* ----- §A-7  モバイル維持(防止策 E:独断追加禁止)----------------------------
   モバイル時のアスペクト比 / 高さは v7 既存パッチ(L7503-7508 / L9047-9056)を
   そのまま継続。本パッチではモバイル固有の上書きは追加しない。
   ----------------------------------------------------------------------------- */


/* ----- Agent B:比較表 行ヘッダー文字色明示(真っ黒修正)----- */

/* ============================================================================
   v7 §B-TABLE-ROWHEAD(2026-05-12 緊急修正・運営者フィードバック反映)

   症状:freee 関連の比較表(主要クラウド会計4サービス比較等)で、
         左の項目列(項目 / 月額 / UI/UX / 仕訳の自動化 / 税理士連携 等)が
         真っ黒に塗りつぶされて文字が読めない。

   原因:`<tbody> <th scope="row">` で組まれた行ヘッダーに対して、
         CLEAN_style_css_v7.css L691-707 の
         `.entry-content table th, .wp-block-table table th`
         が thead/tbody 区別なく Navy グラデ背景を当てる一方、
         Cocoon 親テーマや WP コアの後続スタイルで color が上書きされ、
         Navy 背景 + Navy 文字 = 黒塊に化けるケースがある。

   対策:body.single-post 限定で、tbody の行ヘッダー / 1列目 の
         文字色を白で強制し、Navy 背景でも必ず可読にする。

   スコープ:body.single-post .bt-article 配下の表のみ。
            ホーム / カテゴリ / 固定ページには無影響(防止策 B / C)。

   コントラスト:Navy(#0B1F3F) + 白(#FFFFFF) = 16.8:1(WCAG AAA、防止策 D)
   ============================================================================ */

/* ----- 1. tbody の行ヘッダー(th scope="row")の文字色を白で強制 -----
   .bt-table / Cocoon 比較表(.compare-table .comparison-table .comp-table .comp-c)
   / WP コアブロック(.wp-block-table)/ Cocoon 親テーマ table すべて網羅。
   背景は既存ルール(L693 等の Navy グラデ)に任せ、文字色のみ修正する。 */
body.single-post .bt-article .bt-table tbody th,
body.single-post .bt-article table tbody th,
body.single-post .bt-article .wp-block-table table tbody th,
body.single-post .bt-article .compare-table tbody th,
body.single-post .bt-article .comparison-table tbody th,
body.single-post .bt-article .comp-table tbody th,
body.single-post .bt-article .comp-c tbody th,
body.single-post .entry-content table tbody th,
body.single .bt-article .bt-table tbody th,
body.single .bt-article table tbody th {
  color: #FFFFFF !important;
  background-color: var(--bt-navy-900, #0B1F3F);
  font-weight: 700;
  text-align: left;
  letter-spacing: 0.04em;
}

/* ----- 2. Cocoon の比較表が「項目名セル」を <td.compare-name> 等で
            出力するケースのフォールバック ----- */
body.single-post .bt-article .compare-table td.compare-name,
body.single-post .bt-article .comparison-table td.compare-name,
body.single-post .bt-article .comp-table td.compare-name,
body.single-post .bt-article td.compare-name,
body.single-post .bt-article td.compare-item {
  color: #FFFFFF !important;
  background-color: var(--bt-navy-900, #0B1F3F);
  font-weight: 700;
}

/* ----- 3. tbody の <th> が存在しないが、1列目を「項目ラベル」として
            Navy 系の背景で塗っているケース(L750 の bg-section 由来)の救済。
            既存の `tr td:first-child` ルールは bg-section(明るいグレー)+
            navy-800 文字なので本来は黒くならない。ただし Cocoon 親テーマで
            tr td:first-child の background が Navy に上書きされる事故に備え、
            明示的に明るい背景 + 暗い navy 文字を再宣言する(防御的 idempotent)。 */
body.single-post .bt-article .wp-block-table table tbody tr td:first-child,
body.single-post .bt-article .entry-content table tbody tr td:first-child,
body.single-post .entry-content table tbody tr td:first-child {
  /* 既存 v7 ルール(L745-751)を body.single-post スコープで強化再宣言。
     navy 上書き事故が起きていたらここで明示的に戻す。 */
  background-color: var(--bt-bg-section, #F4F6F9);
  color: var(--bt-navy-800, #14274A);
  font-weight: 600;
}

/* ----- 4. thead と tbody の視覚的差別化 -----
            両方 Navy 背景になるが、thead は letter-spacing 広め + 中央寄せで、
            tbody th はやや狭い letter-spacing + 左寄せで区別。
            (色違いは情報設計を混乱させるので採用しない) */
body.single-post .bt-article .bt-table thead th,
body.single-post .bt-article table thead th {
  text-align: left;
  letter-spacing: 0.06em;
  font-size: 12.5px;
}

/* ===== §B-TABLE-ROWHEAD END ===== */


/* ============================================================================
   ★v7 §B-TABLE-ROWHEAD-FIX-2(2026-05-13 緊急修正)

   症状(BUG-2026-05-12-009 再発 = #26 iPhone 記事 / 全 publish 記事横断):
     - WP Gutenberg `<figure class="wp-block-table"><table class="has-fixed-layout">`
       配下の `<td>` で左列が完全黒(Navy)背景 + 暗色文字 → 読めない

   根本原因:
     - 既存 v7 セレクタが `body.single-post .bt-article ...` で .bt-article ラッパー必須
     - 実際の WP レンダリング HTML には .bt-article が table を囲んでいない
       (single.php の構造変更 or Cocoon 標準テンプレ経由でレンダリングされている)
     - → セレクタが当たらず Cocoon 親テーマ or 別 CSS の Navy 背景指定が残存

   修正:
     - `.bt-article` 依存を外し、`body.single-post` + `.wp-block-table` で確実に取る
     - `!important` 付きで Cocoon 親テーマの優先度に勝つ
     - 全 11 publish 記事(WP 26, 32-40, 96)に一括反映可
   ============================================================================ */

/* ----- A. WP Gutenberg `wp:table` ブロック(class="has-fixed-layout")対応 ----- */
body.single-post .wp-block-table table tbody tr td:first-child,
body.single-post figure.wp-block-table table tbody tr td:first-child,
body.single .wp-block-table table tbody tr td:first-child {
  background-color: #F4F6F9 !important;     /* bt-bg-section 明るいグレー */
  color: #14274A !important;                 /* bt-navy-800 暗い Navy */
  font-weight: 600 !important;
}

/* ----- B. entry-content スコープでの保険(.bt-article ラッパー外も含む) ----- */
body.single-post .entry-content table tbody tr td:first-child,
body.single .entry-content table tbody tr td:first-child {
  background-color: #F4F6F9 !important;
  color: #14274A !important;
  font-weight: 600 !important;
}

/* ----- C. thead に <td> が並ぶ(WP Gutenberg は thead 不在で先頭行が <tr><td> 構造)
            場合の救済:1 行目の全 td はヘッダー扱いで Navy 背景 + 白文字 ----- */
body.single-post .wp-block-table table tbody tr:first-child td,
body.single-post .entry-content table tbody tr:first-child td {
  background-color: #14274A !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
}

/* ただし「1 行目の最初の td」だけは A. のルールで明るい背景になる必要がある:
   `<tr><td>項目</td><td>Apple Intelligence</td>...` の「項目」セル。
   → A. の優先度を更に上げるため特異性同じだが後勝ちで明るく戻す */
body.single-post .wp-block-table table tbody tr:first-child td:first-child,
body.single-post .entry-content table tbody tr:first-child td:first-child {
  background-color: #F4F6F9 !important;
  color: #14274A !important;
}

/* ----- D. Cocoon 親テーマの `td.compare-name` 系を念のため再確認 ----- */
body.single-post td.compare-name,
body.single-post td.comp-name,
body.single-post .comp-c td:first-child {
  background-color: #F4F6F9 !important;
  color: #14274A !important;
}

/* ===== §B-TABLE-ROWHEAD-FIX-2 END ===== */


/* ============================================================================
   ★v7 §B-TABLE-ROWHEAD-FIX-3(2026-05-13 緊急修正・縦書き化 + ヘッダー透明 救済)

   症状(BUG-2026-05-13-013 = #26 iPhone 比較表):
     A. 左列(項目 / 提供元 / 月額(個人) / iPhone 連携 / 守秘性方針 等)が
        セル幅約 70px に圧縮されて1 文字ずつ縦に積まれて読めない(縦書き化)
     B. 1 行目「Apple Intelligence」「ChatGPT Plus」「Claude Pro」が
        白背景・薄文字で見えない(§B-TABLE-ROWHEAD-FIX-2 の C. が効いていない)

   根本原因:
     - <table class="has-fixed-layout"> = WP Gutenberg のデフォルト
       table-layout: fixed + 全列均等割 → 5 列なら左列も右列も 20% に圧縮
     - 日本語は word-break: break-all が効いて 1 文字単位で折り返し
       → 結果として「縦書き」のように見える
     - 加えて、tr:first-child td へのスタイルが Cocoon 親テーマ
       (.wp-block-table table.has-fixed-layout td)の特異性に負けている

   修正:
     1. table-layout: auto を強制 → 列幅は内容に合わせて自動調整
     2. 左列(td:first-child)に min-width: 7em + word-break: keep-all
        → 日本語は単語単位でしか折り返さない・最小幅確保で縦書き化阻止
     3. writing-mode: horizontal-tb を !important で強制(縦書き完全禁止)
     4. 1 行目 td の Navy 背景 + 白文字を更に強い特異性 + !important で再宣言
        body.single-post .entry-content figure.wp-block-table table tr:first-child td
   ============================================================================ */

/* ----- A. table-layout を auto に強制(列幅を内容ベースに自動調整) ----- */
body.single-post .wp-block-table table.has-fixed-layout,
body.single-post .entry-content table.has-fixed-layout,
body.single-post figure.wp-block-table table {
  table-layout: auto !important;
}

/* ----- B. 左列(項目ラベル列)の最小幅確保 + 日本語折り返し緩和 ----- */
body.single-post .wp-block-table table tbody tr td:first-child,
body.single-post .entry-content table tbody tr td:first-child,
body.single-post figure.wp-block-table table tbody tr td:first-child {
  min-width: 7em !important;        /* 7 文字分は確保(「守秘性方針」が 1 行に収まる)*/
  width: auto !important;
  white-space: normal !important;
  word-break: keep-all !important;  /* 日本語は単語単位でのみ折り返し */
  overflow-wrap: anywhere !important;
  writing-mode: horizontal-tb !important;  /* 縦書き完全禁止 */
  text-orientation: mixed !important;
}

/* ----- C. 1 行目ヘッダー(td 構造)を Navy 背景 + 白文字で再々宣言 -----
   §B-TABLE-ROWHEAD-FIX-2 の C. が反映されていない場合の保険:
   特異性をさらに 1 ランク上げる(figure.wp-block-table を含める) */
body.single-post figure.wp-block-table table tbody tr:first-child td,
body.single-post .entry-content figure.wp-block-table table tbody tr:first-child td,
body.single-post .wp-block-table table.has-fixed-layout tbody tr:first-child td {
  background-color: #14274A !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  writing-mode: horizontal-tb !important;
}

/* 1 行目の左上(交差セル)は明るい背景に戻す(B. の最小幅は維持) */
body.single-post figure.wp-block-table table tbody tr:first-child td:first-child,
body.single-post .entry-content figure.wp-block-table table tbody tr:first-child td:first-child,
body.single-post .wp-block-table table.has-fixed-layout tbody tr:first-child td:first-child {
  background-color: #F4F6F9 !important;
  color: #14274A !important;
}

/* ----- D. 2 行目以降の右側セル(データ列)の縦書き化も予防 ----- */
body.single-post .wp-block-table table tbody td,
body.single-post .entry-content table tbody td,
body.single-post figure.wp-block-table table tbody td {
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
}

/* ----- E. モバイル(< 768px)では table 横スクロール許可 + 最小幅を緩める ----- */
@media (max-width: 768px) {
  body.single-post .wp-block-table,
  body.single-post .entry-content .wp-block-table,
  body.single-post figure.wp-block-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  body.single-post .wp-block-table table tbody tr td:first-child {
    min-width: 5em !important;    /* モバイルでも最低 5 文字幅は確保 */
  }
  body.single-post .wp-block-table table {
    min-width: 600px !important;  /* table 全体の最小幅 = 横スクロールで読める */
  }
}

/* ===== §B-TABLE-ROWHEAD-FIX-3 END ===== */


/* ===== v7 END(2026-05-13 第 2 弾 緊急修正・table 縦書き + ヘッダー透明 救済)===== */


/* ============================================================================
   ★v7 §C-PATCH-RAKUTEN-1(2026-05-12 楽天バナー共通スタイル統合)
   ============================================================================ */

/* ============================================================================
   File:        rakuten_banner.css
   Purpose:     biz-trend.works(WP + Cocoon 子テーマ)
                楽天市場(もしも経由)バナー共通スタイル
                サイドバー skyscraper / square / 記事末尾 full / フッタークレジット
   Placement:   Cocoon 子テーマ style.css(= CLEAN_style_css_v7.css)末尾に追記
   Updated:     2026-05-12
   Related:     output/design/rakuten/sidebar_skyscraper.html
                output/design/rakuten/sidebar_square.html
                output/design/rakuten/article_footer.php
                output/design/rakuten/footer_credit.html
                data/affiliate_banners_rakuten.yml
                docs/RAKUTEN_BANNER_PLAYBOOK.md
   Notes:
     - もしも発行 HTML 内の <img style="border:none;"> はそのまま温存。
       外側ラッパー .bt-banner-rakuten のみで装飾(COMMON-005 改変禁止に準拠)。
     - グローバルセレクタは追加しない(防止策 C)。
     - 全セレクタは .bt-banner-rakuten をルートに名前空間化。
   ============================================================================ */

/* ----- 共通ラッパー ------------------------------------------------------- */
.bt-banner-rakuten {
  background: #FAFAFA;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 12px;
  margin: 24px 0;
  text-align: center;
  box-sizing: border-box;
}

.bt-banner-rakuten .bt-pr-mini {
  display: block;
  font-size: 11px;
  color: #6B7280;
  margin-bottom: 6px;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

/* ASP 発行 HTML 内の img を中央揃え＆オーバーフロー保護 */
.bt-banner-rakuten__slot {
  display: block;
  line-height: 0;
}
.bt-banner-rakuten__slot img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

/* ----- skyscraper(サイドバー縦長 120x500) ------------------------------- */
.bt-banner-rakuten--skyscraper {
  position: sticky;
  top: 24px;
  width: 120px;
}

/* ----- square(サイドバー 120x120) --------------------------------------- */
.bt-banner-rakuten--square {
  width: 120px;
}

/* ----- full(記事末尾 468x60) ------------------------------------------- */
.bt-banner-rakuten--full {
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

/* ----- credit(フッター 116x32 控えめ表示) ------------------------------ */
.bt-banner-rakuten--credit {
  background: none;
  border: none;
  border-radius: 0;
  padding: 4px;
  margin: 8px 0;
  display: inline-block;
  text-align: left;
}
.bt-banner-rakuten--credit .bt-pr-mini {
  display: inline-block;
  margin: 0 6px 0 0;
  vertical-align: middle;
}
.bt-banner-rakuten--credit a {
  vertical-align: middle;
}

/* ----- モバイル対応 ------------------------------------------------------ */
@media (max-width: 768px) {
  /* 縦長スカイスクレイパーはモバイルでは非表示(レール領域がないため) */
  .bt-banner-rakuten--skyscraper {
    display: none;
  }
  /* 468px のフルバナーはモバイル幅に収める */
  .bt-banner-rakuten--full {
    max-width: 100%;
  }
}