/* ===========================================================
   3ハブ（/haka/ /jikka/ /shukatsu/）のサイドバー & CTAを
   既存記事の jsc-sidebar-card / hkn-cta-block と統一
   2026-06-26 追加 / 2026-06-27 jsc-sidebar warmスキン拡張
   =========================================================== */

/* ── article-warm.css の jsa-* CSS変数定義をハブにも展開
   （article-warm.cssはis_single限定で読まれないため） ── */
body.page-id-700,
body.page-id-699,
body.page-id-701 {
  --jsa-cream: #F3EEE5;
  --jsa-paper: #FFFFFF;
  --jsa-beige: #EDE7DB;
  --jsa-ink: #2B2A26;
  --jsa-mute: #6E6A60;
  --jsa-forest: #27432F;
  --jsa-forest-deep: #1C3123;
  --jsa-forest-soft: #E3EAE2;
  --jsa-clay: #C5613A;
  --jsa-clay-deep: #AC5230;
  --jsa-line: #E3DDD0;
  --jsa-line-soft: #EDE8DD;
  --jsa-serif: "Noto Serif JP", serif;
  --jsa-sans: "Noto Sans JP", sans-serif;
}

/* ===========================================================
   sidebar.php修正で出力されるjsc-sidebarに、article-warm.cssの
   body.single用warmスキンと同じスタイルをハブにも適用
   =========================================================== */
body.page-id-700 .jsc-sidebar .widget-sidebar-title,
body.page-id-699 .jsc-sidebar .widget-sidebar-title,
body.page-id-701 .jsc-sidebar .widget-sidebar-title,
body.page-id-700 .jsc-sidebar .hkn-side-title,
body.page-id-699 .jsc-sidebar .hkn-side-title,
body.page-id-701 .jsc-sidebar .hkn-side-title {
  font-family: var(--jsa-serif) !important;
  color: var(--jsa-ink) !important;
  border-left: 4px solid var(--jsa-clay) !important;
  padding-left: 12px !important;
  background: none !important;
}

body.page-id-700 .jsc-sidebar-card,
body.page-id-699 .jsc-sidebar-card,
body.page-id-701 .jsc-sidebar-card {
  background: #fff !important;
  border: 1px solid var(--jsa-line) !important;
  border-radius: 14px !important;
  padding: 22px !important;
  display: block !important;
  box-shadow: 0 18px 40px -32px rgba(43, 42, 38, .3) !important;
  margin-bottom: 16px !important;
}

body.page-id-700 .jsc-sidebar-card > *,
body.page-id-699 .jsc-sidebar-card > *,
body.page-id-701 .jsc-sidebar-card > * {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body.page-id-700 .jsc-sidebar-card__eyebrow,
body.page-id-699 .jsc-sidebar-card__eyebrow,
body.page-id-701 .jsc-sidebar-card__eyebrow {
  color: var(--jsa-clay) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  margin: 0 0 8px !important;
  text-transform: uppercase;
}

body.page-id-700 .jsc-sidebar-card h2,
body.page-id-699 .jsc-sidebar-card h2,
body.page-id-701 .jsc-sidebar-card h2 {
  color: var(--jsa-ink) !important;
  font-family: var(--jsa-serif) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  margin: 0 0 10px !important;
  border: 0 !important;
  padding: 0 !important;
  background: none !important;
}

body.page-id-700 .jsc-sidebar-card p:not(.jsc-sidebar-card__eyebrow),
body.page-id-699 .jsc-sidebar-card p:not(.jsc-sidebar-card__eyebrow),
body.page-id-701 .jsc-sidebar-card p:not(.jsc-sidebar-card__eyebrow) {
  color: var(--jsa-mute) !important;
  font-size: 13.5px !important;
  line-height: 1.7 !important;
  margin: 0 0 14px !important;
}

body.page-id-700 .jsc-sidebar-card .jsc-button,
body.page-id-699 .jsc-sidebar-card .jsc-button,
body.page-id-701 .jsc-sidebar-card .jsc-button {
  display: inline-flex !important;
  width: 100% !important;
  justify-content: center !important;
}

body.page-id-700 .jsc-sidebar-card--diagnosis,
body.page-id-699 .jsc-sidebar-card--diagnosis,
body.page-id-701 .jsc-sidebar-card--diagnosis {
  background: linear-gradient(135deg, var(--jsa-forest-deep), var(--jsa-forest)) !important;
  border-color: transparent !important;
  color: #fff !important;
}

body.page-id-700 .jsc-sidebar-card--diagnosis .jsc-sidebar-card__eyebrow,
body.page-id-699 .jsc-sidebar-card--diagnosis .jsc-sidebar-card__eyebrow,
body.page-id-701 .jsc-sidebar-card--diagnosis .jsc-sidebar-card__eyebrow {
  color: #E2A483 !important;
}

body.page-id-700 .jsc-sidebar-card--diagnosis h2,
body.page-id-699 .jsc-sidebar-card--diagnosis h2,
body.page-id-701 .jsc-sidebar-card--diagnosis h2 {
  color: #fff !important;
}

body.page-id-700 .jsc-sidebar-card--diagnosis p:not(.jsc-sidebar-card__eyebrow),
body.page-id-699 .jsc-sidebar-card--diagnosis p:not(.jsc-sidebar-card__eyebrow),
body.page-id-701 .jsc-sidebar-card--diagnosis p:not(.jsc-sidebar-card__eyebrow) {
  color: #CBD3CB !important;
}

/* ===========================================================
   旧サイドバーウィジェット（widget area "sidebar"）を強制非表示
   sidebar.php修正でjsc-sidebarが優先される設計だが、念のため
   =========================================================== */
body.page-id-700 #sidebar.sidebar:not(.jsc-sidebar),
body.page-id-699 #sidebar.sidebar:not(.jsc-sidebar),
body.page-id-701 #sidebar.sidebar:not(.jsc-sidebar) {
  display: none !important;
}

/* ── ハブの背景を既存記事と統一（薄ベージュ） ── */
body.page-id-700,
body.page-id-699,
body.page-id-701 {
    background: var(--jsa-cream) !important;
}

/* メインコンテナの背景も透過に（cream BGが見えるように） */
body.page-id-700 .wrap,
body.page-id-699 .wrap,
body.page-id-701 .wrap,
body.page-id-700 #content-in,
body.page-id-699 #content-in,
body.page-id-701 #content-in,
body.page-id-700 #main,
body.page-id-699 #main,
body.page-id-701 #main {
    background: transparent !important;
}

/* ── サイドバーウィジェットを jsc-sidebar-card 風に ── */
body.page-id-700 .sidebar > .widget,
body.page-id-699 .sidebar > .widget,
body.page-id-701 .sidebar > .widget,
body.page-id-700 .sidebar > aside,
body.page-id-699 .sidebar > aside,
body.page-id-701 .sidebar > aside {
    background: #fff;
    border: 1px solid #e5e0d4;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* サイドバーカードの見出し統一 */
body.page-id-700 .sidebar .widget-sidebar-title,
body.page-id-699 .sidebar .widget-sidebar-title,
body.page-id-701 .sidebar .widget-sidebar-title,
body.page-id-700 .sidebar h2,
body.page-id-699 .sidebar h2,
body.page-id-701 .sidebar h2,
body.page-id-700 .sidebar h3,
body.page-id-699 .sidebar h3,
body.page-id-701 .sidebar h3 {
    color: #2d4a3e;
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 12px;
    padding: 0;
    border: none;
    letter-spacing: 0.02em;
    line-height: 1.4;
}

/* hkn-sidebar-cta を hkn-cta-block 風に */
body.page-id-700 .hkn-sidebar-cta a,
body.page-id-699 .hkn-sidebar-cta a,
body.page-id-701 .hkn-sidebar-cta a {
    display: block;
    background: #2d4a3e;
    color: #fff !important;
    padding: 16px 20px;
    border-radius: 8px;
    text-decoration: none;
    text-align: center;
    transition: background 0.2s;
}

body.page-id-700 .hkn-sidebar-cta a:hover,
body.page-id-699 .hkn-sidebar-cta a:hover,
body.page-id-701 .hkn-sidebar-cta a:hover {
    background: #1f3328;
}

body.page-id-700 .hkn-sidebar-cta-badge,
body.page-id-699 .hkn-sidebar-cta-badge,
body.page-id-701 .hkn-sidebar-cta-badge {
    display: inline-block;
    font-size: 11px;
    background: #b85946;
    color: #fff;
    padding: 3px 10px;
    border-radius: 4px;
    margin-bottom: 8px;
    font-weight: 700;
}

body.page-id-700 .hkn-sidebar-cta-title,
body.page-id-699 .hkn-sidebar-cta-title,
body.page-id-701 .hkn-sidebar-cta-title {
    display: block;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    margin: 6px 0;
    color: #fff;
}

body.page-id-700 .hkn-sidebar-cta-desc,
body.page-id-699 .hkn-sidebar-cta-desc,
body.page-id-701 .hkn-sidebar-cta-desc {
    display: block;
    font-size: 13px;
    opacity: 0.92;
    margin: 8px 0;
    line-height: 1.5;
    color: #fff;
}

body.page-id-700 .hkn-sidebar-cta-btn,
body.page-id-699 .hkn-sidebar-cta-btn,
body.page-id-701 .hkn-sidebar-cta-btn {
    display: inline-block;
    background: #fff;
    color: #2d4a3e;
    padding: 6px 14px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 700;
    margin-top: 10px;
}

/* カテゴリリスト統一 */
body.page-id-700 .widget_categories ul,
body.page-id-699 .widget_categories ul,
body.page-id-701 .widget_categories ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

body.page-id-700 .widget_categories li,
body.page-id-699 .widget_categories li,
body.page-id-701 .widget_categories li {
    padding: 9px 0;
    border-bottom: 1px solid #f5f2ea;
}

body.page-id-700 .widget_categories li:last-child,
body.page-id-699 .widget_categories li:last-child,
body.page-id-701 .widget_categories li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

body.page-id-700 .widget_categories a,
body.page-id-699 .widget_categories a,
body.page-id-701 .widget_categories a {
    color: #3d4b5f;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.5;
}

body.page-id-700 .widget_categories a:hover,
body.page-id-699 .widget_categories a:hover,
body.page-id-701 .widget_categories a:hover {
    color: #2d4a3e;
    text-decoration: underline;
}

/* ── ハブの cta-primary / cta-ghost を hkn-cta-block ボタン風に ── */
.hkn-hub .cta-primary,
.hkn-hub a.cta-primary {
    display: inline-block;
    background: #2d4a3e;
    color: #fff !important;
    padding: 14px 28px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    transition: background 0.2s, border-color 0.2s;
    border: 2px solid #2d4a3e;
    line-height: 1.4;
}

.hkn-hub .cta-primary:hover,
.hkn-hub a.cta-primary:hover {
    background: #1f3328;
    border-color: #1f3328;
    color: #fff !important;
}

.hkn-hub .cta-ghost,
.hkn-hub a.cta-ghost {
    display: inline-block;
    background: #fff;
    color: #2d4a3e !important;
    padding: 12px 26px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    border: 2px solid #2d4a3e;
    transition: background 0.2s;
    line-height: 1.4;
}

.hkn-hub .cta-ghost:hover,
.hkn-hub a.cta-ghost:hover {
    background: #f5f2ea;
    color: #2d4a3e !important;
}

.hkn-hub .cta-line,
.hkn-hub a.cta-line {
    display: inline-block;
    background: #2d4a3e !important;
    color: #fff !important;
    padding: 14px 28px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    transition: background 0.2s;
    border: 2px solid #2d4a3e;
    line-height: 1.4;
}

.hkn-hub .cta-line:hover,
.hkn-hub a.cta-line:hover {
    background: #1f3328 !important;
    color: #fff !important;
}

/* AIバナーのCTA（/jikka/ で使用） */
.hkn-hub .hkn-hub-ai-banner-cta {
    display: inline-block;
    background: #2d4a3e;
    color: #fff !important;
    padding: 14px 28px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    border: 2px solid #2d4a3e;
    margin-top: 12px;
    transition: background 0.2s;
}

.hkn-hub .hkn-hub-ai-banner-cta:hover {
    background: #1f3328;
}