/* =============================================================
   BizMow コラム個別記事ページ — single-column.css
   既存の .single-column 構造に乗せるスタイル拡張版
============================================================= */

/* ------------------------------------------------------------
   Lightning 親テーマ干渉リセット
------------------------------------------------------------ */
.single-column h1,
.single-column h2,
.single-column h3,
.single-column h4 {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}
.single-column h1::before, .single-column h1::after,
.single-column h2::before, .single-column h2::after,
.single-column h3::before, .single-column h3::after,
.single-column h4::before, .single-column h4::after {
  content: none !important;
}
.single-column { padding-top: 15px; }

/* ------------------------------------------------------------
   CSS 変数
------------------------------------------------------------ */
:root {
  --sc-gold:      #FFB800;
  --sc-gold-soft: #FFF9E0;
  --sc-gold-dark: #7A5C00;
  --sc-or:        #F97040;
  --sc-tl:        #2FA3BD;
  --sc-text:      #383838;
  --sc-mute:      #888888;
  --sc-border:    #E5E7EB;
  --sc-surface:   #F7F6F3;
}

/* ============================================================
   .inner：2カラム化のため幅を拡張
============================================================= */
.single-column .inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px 56px;
}

/* ============================================================
   記事ヘッダー
============================================================= */
.sc-article-header {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--sc-border);
}

/* カテゴリバッジ */
.sc-article-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.sc-article-cat-badge {
  display: inline-block;
  /* background: var(--sc-gold); */
  background: var(--sc-or);
  /* color: #1a1a1a; */
  color: #FFF;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 999px;
  text-decoration: none;
  transition: opacity .2s;
}
.sc-article-cat-badge:hover { opacity: .8; }

/* タイトル */
.single-column .column-title {
  font-size: clamp(22px, 3.5vw, 34px) !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  color: var(--sc-text) !important;
  margin-bottom: 16px !important;
}

/* メタ */
.single-column .column-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--sc-mute);
  margin-bottom: 0;
}
.sc-meta-date,
.sc-meta-updated {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.sc-meta-updated { color: var(--sc-tl); }

/* ============================================================
   アイキャッチ（2カラム内・本文の上）
============================================================= */
.single-column .column-thumbnail {
  margin-bottom: 32px;
}
.single-column .column-thumbnail img {
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  border-radius: 16px;
  margin-bottom: 0;
  display: block;
}

/* ============================================================
   本文 + サイドバー 2カラム
============================================================= */
.sc-article-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 56px;
  align-items: start;
  margin-top: 40px;
}

/* ── 本文スタイル ── */
.single-column .column-content {
  font-size: 16px;
  line-height: 1.9;
  color: var(--sc-text);
}
.single-column .column-content p { margin-bottom: 1.6em; }

.single-column .column-content h2 {
  font-size: clamp(18px, 2.4vw, 22px) !important;
  font-weight: 700 !important;
  padding: 12px 16px 12px 20px !important;
  border-left: 4px solid var(--sc-or) !important;
  background: var(--sc-surface) !important;
  border-radius: 0 8px 8px 0 !important;
  margin: 2.4em 0 1.2em !important;
  line-height: 1.45 !important;
}
.single-column .column-content h3 {
  font-size: clamp(16px, 2vw, 18px) !important;
  font-weight: 700 !important;
  padding-bottom: 8px !important;
  border-bottom: 2px solid var(--sc-gold) !important;
  margin: 2em 0 1em !important;
  line-height: 1.5 !important;
}
.single-column .column-content h4 {
  font-size: 16px !important;
  font-weight: 700 !important;
  margin: 1.8em 0 .8em !important;
}
.single-column .column-content ul,
.single-column .column-content ol {
  padding-left: 1.6em;
  margin-bottom: 1.4em;
}
/* ul：ディスク（●）を明示的に復活 */
.single-column .column-content ul {
  list-style: disc !important;
}
/* ol：数字を明示的に復活 */
.single-column .column-content ol {
  list-style: decimal !important;
}
.single-column .column-content li {
  list-style: inherit !important;
  margin-bottom: .5em;
  padding-left: .2em;
}
.single-column .column-content blockquote {
  border-left: 4px solid var(--sc-border) !important;
  background: var(--sc-surface) !important;
  padding: 12px 20px !important;
  border-radius: 0 8px 8px 0 !important;
  margin: 1.6em 0 !important;
  color: var(--sc-mute);
  font-style: normal !important;
}
.single-column .column-content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 1.2em 0;
}
.single-column .column-content a {
  color: var(--sc-or);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.single-column .column-content a:hover { opacity: .75; }
.single-column .column-content strong { font-weight: 700; }
.single-column .column-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.6em;
  font-size: 14px;
}
.single-column .column-content th,
.single-column .column-content td {
  border: 1px solid var(--sc-border);
  padding: 10px 14px;
}
.single-column .column-content th {
  background: var(--sc-surface);
  font-weight: 700;
}

/* タグ */
.sc-article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--sc-border);
}
.sc-article-tag {
  font-size: 13px;
  color: var(--sc-mute);
  background: var(--sc-surface);
  padding: 4px 12px;
  border-radius: 999px;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.sc-article-tag:hover { background: var(--sc-gold-soft); color: var(--sc-gold-dark); }

/* 前後記事ナビ */
.sc-post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 40px;
}
.sc-post-nav__link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--sc-border);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s, transform .2s;
}
.sc-post-nav__link:hover { border-color: var(--sc-gold); transform: translateY(-2px); }
.sc-post-nav__link--next { text-align: right; }
.sc-post-nav__dir { font-size: 11px; color: var(--sc-mute); }
.sc-post-nav__ttl {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   サイドバー
============================================================= */
.sc-article-sidebar {
  display: flex;
  flex-direction: column;
  gap: 28px;
  /* sticky は JS（sidebar-sticky.js）で制御 */
  position: relative;
  will-change: transform;
}
.sc-side-widget { background: transparent; }
.sc-side-title {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--sc-text) !important;
  background: transparent !important;
  padding: 0 0 8px !important;
  border-bottom: 2px solid var(--sc-border) !important;
  margin: 0 0 8px !important;
}
.sc-side-title svg { color: var(--sc-or); flex-shrink: 0; }

/* 検索 */
.sc-search-form { padding: 0; }
.sc-search-inner {
  display: flex;
  border: 1.5px solid var(--sc-or);
  border-radius: 8px;
  overflow: hidden;
}
.sc-search-inner:focus-within { box-shadow: 0 0 0 3px rgba(249,112,64,.12); }
.sc-search-input {
  flex: 1; border: none; outline: none;
  padding: 9px 12px; font-size: 14px;
  font-family: 'Noto Sans JP', sans-serif;
  background: #fff; color: var(--sc-text);
}
.sc-search-input::placeholder { color: #bbb; }
.sc-search-btn {
  display: flex; align-items: center; justify-content: center;
  padding: 0 14px; background: var(--sc-or);
  border: none; cursor: pointer; transition: background .15s;
}
.sc-search-btn:hover { background: #e05a2a; }

/* カテゴリ */
.sc-side-cats { list-style: none; margin: 0; padding: 0; }
.sc-side-cats li { border-bottom: 1px solid var(--sc-border); }
.sc-side-cats li:last-child { border-bottom: none; }
.sc-side-cat {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; font-size: 14px; color: var(--sc-text);
  text-decoration: none; background: #fff; transition: background .15s; gap: 8px;
}
.sc-side-cat:hover { background: var(--sc-gold-soft) !important; color: var(--sc-gold-dark) !important; }
.sc-side-cat.is-current {
  background: var(--sc-gold-soft) !important;
  color: var(--sc-gold-dark) !important;
  font-weight: 700;
}
.sc-side-cat.is-current::before {
  content: ''; display: inline-block; width: 3px; height: 14px;
  background: var(--sc-gold); border-radius: 2px; flex-shrink: 0;
}
.sc-side-cat__count {
  font-size: 12px; color: var(--sc-mute);
  background: var(--sc-surface); padding: 1px 7px; border-radius: 999px; flex-shrink: 0;
}

/* 人気記事 */
.sc-popular-list { list-style: none; margin: 0; padding: 0; }
.sc-popular-item { border-bottom: 1px solid var(--sc-border); }
.sc-popular-item:last-child { border-bottom: none; }
.sc-popular-link {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 0; text-decoration: none; color: var(--sc-text); transition: opacity .15s;
}
.sc-popular-link:hover { opacity: .75; }
.sc-popular-rank {
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; flex-shrink: 0;
  background: var(--sc-border); color: var(--sc-mute);
}
.sc-popular-rank--1 { background: var(--sc-gold); color: #1a1a1a; }
.sc-popular-rank--2 { background: #C0C0C0; color: #1a1a1a; }
.sc-popular-rank--3 { background: #C87941; color: #fff; }
.sc-popular-thumb {
  width: 72px; height: 54px; border-radius: 6px; overflow: hidden;
  flex-shrink: 0; background: var(--sc-surface);
}
.sc-popular-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sc-popular-thumb__ph { width: 100%; height: 100%; background: linear-gradient(135deg,#f0ede8,#e8e4de); }
.sc-popular-title {
  font-size: 12px; font-weight: 500; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}

/* サイドCTA（サイドバー全体がJS追尾なので個別stickyは不要） */
.sc-side-cta {
  background: var(--sc-gold-soft);
  border: 1.5px solid var(--sc-gold);
  border-radius: 14px; padding: 20px 18px; text-align: center;
}
.sc-side-cta__lead {
  font-size: 11px; font-weight: 700; color: var(--sc-gold-dark);
  letter-spacing: .08em; margin-bottom: 6px;
}
.sc-side-cta__text { font-size: 13px; color: var(--sc-text); line-height: 1.7; margin-bottom: 14px; }
.sc-side-cta__btn {
  display: block; background: var(--sc-or); color: #fff;
  font-size: 14px; font-weight: 700; padding: 11px 16px;
  border-radius: 999px; text-decoration: none; transition: opacity .2s;
}
.sc-side-cta__btn:hover { opacity: .85; }

/* CTAが sc-article-main 内に入った場合の上マージン */
.sc-article-main .bm-cta3-section,
.sc-article-main .sc-cta-simple {
  margin-top: 40px;
}

/* js-fadeup-cta が opacity:0 のままになるのを防ぐ */
.sc-article-main .bm-cta3-section.js-fadeup-cta {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* ============================================================
   シンプルCTA（パターンB/C/D）
============================================================= */
.sc-cta-simple { padding: 56px 24px; }
.sc-cta-simple--contact  { background: linear-gradient(135deg,#fff9e0,#fff,#fff0ea); }
.sc-cta-simple--diagnosis { background: linear-gradient(135deg,#fff0ea,#fff,#e1f5ee); }
.sc-cta-simple--seminar  { background: linear-gradient(135deg,#e1f5ee,#fff,#e6f1fb); }
.sc-cta-simple__inner {
  display: flex; align-items: center; gap: 48px;
  background: #fff; border-radius: 20px; padding: 40px 48px;
  box-shadow: 0 4px 32px rgba(0,0,0,.06);
  max-width: 1100px; margin: 0 auto;
}
.sc-cta-simple__text { flex: 1; }
.sc-cta-simple__label {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  color: var(--sc-or); background: #fff3ee; padding: 3px 12px;
  border-radius: 999px; margin-bottom: 10px;
}
.sc-cta-simple__title {
  font-size: clamp(20px,2.5vw,26px) !important; font-weight: 700 !important;
  line-height: 1.45 !important; color: var(--sc-text) !important; margin-bottom: 10px !important;
}
.sc-cta-simple__title strong { color: var(--sc-or) !important; }
.sc-cta-simple--seminar .sc-cta-simple__title strong { color: var(--sc-tl) !important; }
.sc-cta-simple__desc { font-size: 14px; color: var(--sc-mute); line-height: 1.8; }
.sc-cta-simple__btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 32px; border-radius: 999px; font-size: 15px; font-weight: 700;
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
  transition: transform .18s, opacity .18s;
}
.sc-cta-simple__btn:hover { transform: translateY(-2px); opacity: .9; }
.sc-cta-simple__btn--gold    { background: var(--sc-gold); color: #1a1a1a; }
.sc-cta-simple__btn--orange  { background: var(--sc-or); color: #fff; }
.sc-cta-simple__btn--teal    { background: var(--sc-tl); color: #fff; }

/* ============================================================
   関連記事
============================================================= */
.sc-related { background: var(--sc-surface); padding: 56px 24px 64px; }
.sc-related__inner { max-width: 1100px; margin: 0 auto; }
.sc-related__title {
  font-size: 20px !important; font-weight: 700 !important; color: var(--sc-text) !important;
  display: flex; align-items: center; gap: 10px; margin-bottom: 24px !important;
}
.sc-related__title::before {
  content: ''; display: inline-block; width: 4px; height: 20px;
  background: var(--sc-or); border-radius: 2px; flex-shrink: 0;
}
.sc-related__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.sc-related__card {
  background: #fff; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--sc-border); text-decoration: none; color: inherit;
  transition: transform .2s, box-shadow .2s; display: block;
}
.sc-related__card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,.08); }
.sc-related__thumb {
  position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--sc-surface);
}
.sc-related__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.sc-related__card:hover .sc-related__thumb img { transform: scale(1.04); }
.sc-related__thumb-ph { width: 100%; height: 100%; background: linear-gradient(135deg,#f0ede8,#e8e4de); }
.sc-related__badge {
  position: absolute; bottom: 8px; left: 8px;
  background: var(--sc-gold); color: #1a1a1a;
  font-size: 10px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
}
.sc-related__body { padding: 14px 16px 16px; }
.sc-related__date { font-size: 11px; color: var(--sc-mute); margin-bottom: 6px; }
.sc-related__ttl {
  font-size: 14px; font-weight: 700; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* 関連記事：PCのみ表示（スマホはサイドバーが下に来るので不要） */
.sc-related--pc-only { display: block; }

/* 前後ナビラッパー */
.sc-post-nav-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px 48px;
}

/* ============================================================
   レスポンシブ
============================================================= */
@media screen and (max-width: 1024px) {
  .sc-article-layout { grid-template-columns: 1fr 250px; gap: 36px; }
  .sc-related__grid { grid-template-columns: repeat(2,1fr); }
}
@media screen and (max-width: 768px) {
  .single-column .inner { padding: 24px 16px 40px; }
  .sc-article-layout { grid-template-columns: 1fr; gap: 0; }
  .sc-article-sidebar { position: static; margin-top: 48px; }
  .sc-post-nav { grid-template-columns: 1fr; }
  .sc-post-nav-wrap { padding: 24px 16px 40px; }
  .sc-cta-simple__inner { flex-direction: column; gap: 24px; padding: 28px 20px; }
  .sc-cta-simple__btn { width: 100%; justify-content: center; }
  .sc-related--pc-only { display: none; } /* スマホでは関連記事を非表示 */
  .single-column .column-thumbnail img { border-radius: 0; max-height: 240px; }
}