/* =============================================================================
   移行記事（plus-note CMS）の cluster-* 要素スタイル
   移行元サイト（https://plus-note.jp/cms/）の記事本文に含まれる cluster-* 要素の
   CSS を移植。レイアウトは元サイトに準拠し、配色は本サイト（灯）パレットへ変換
   （青系アクセント → #d98a3c、ネイビー → #0f1726 等）。
   記事本文用CSS（nipponia_ac_blog / nipponia-blog.css）より後に読み込む前提。
   ============================================================================= */

/* --- この記事のポイント（cluster-quick-answer） --------------------------- */
.cluster-quick-answer {
  margin: 0 0 40px;
  padding: 22px 26px;
  background: var(--color-bg-card, #fff);
  border-left: 4px solid var(--color-accent, #d98a3c);
  border-radius: 2px;
}
.cluster-qa-label {
  margin: 0 0 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent, #d98a3c);
}
.cluster-qa-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.9;
  color: var(--color-text, #1f1f1a);
}

/* --- 目次（cluster-toc） -------------------------------------------------- */
.cluster-toc {
  margin: 32px 0;
  padding: 22px 26px;
  background: var(--color-bg-light, #f0ede8);
  border-left: 3px solid var(--color-accent, #d98a3c);
  border-radius: 2px;
}
.cluster-toc-label {
  margin: 0 0 12px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent, #d98a3c);
}
.cluster-toc ol {
  margin: 0;
  padding-left: 24px;
  list-style: decimal; /* 本文用CSSの list-style:none を上書きして番号を復活 */
}
.cluster-toc ol li {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.85;
  list-style: decimal;
}
.cluster-toc ol li::before {
  content: none !important; /* nipponia-blog のカスタムマーカー（二重番号）を打ち消す */
}
.cluster-toc ol li a {
  color: var(--color-text-dark, #5a5a52);
  text-decoration: none;
}
.cluster-toc ol li a:hover {
  color: var(--color-accent, #d98a3c);
}

/* --- 関連するピラーガイド（cluster-pillar-link） -------------------------- */
.cluster-pillar-link {
  margin: 32px 0;
  padding: 24px 28px;
  border-radius: 4px;
  background: linear-gradient(135deg, #0f1726 0%, #1c2740 100%);
  color: #fff;
}
.cluster-pillar-label {
  display: block;
  margin-bottom: 10px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent, #d98a3c);
}
.cluster-pillar-link a {
  display: block;
  color: #fff;
  text-decoration: none;
}
.cluster-pillar-link a strong {
  display: block;
  margin-bottom: 6px;
  font-size: 1.05rem;
  font-weight: 700;
  /* 本文用CSS（nipponia-blog）の `:is(strong,b){color:#1f1f1a}` がネイビー背景上で
     ほぼ黒に沈むのを打ち消し、白で明示（詳細度 0,1,2 で確実に勝つ）。 */
  color: #fff;
}
.cluster-pillar-link a span {
  display: block;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.75);
  transition: padding-left 0.2s ease, color 0.2s ease;
}
.cluster-pillar-link a:hover span {
  padding-left: 6px;
  color: var(--color-accent, #d98a3c);
}
/* ネイビー背景ブロック（pillar-link / cta）内の強調・斜体は、本文用CSSの濃色指定を
   打ち消して親の明色を継承させる（将来コピーに <strong> 等が入っても沈ませない）。 */
.cluster-pillar-link :is(strong, b, em, i),
.cluster-cta :is(strong, b, em, i) {
  color: inherit;
}

/* --- 補足・注意（cluster-callout） ---------------------------------------- */
.cluster-callout {
  margin: 24px 0;
  padding: 20px 24px;
  background: #f7f2ea; /* 暖色の薄いトーン（元は淡い青） */
  border-left: 3px solid var(--color-accent, #d98a3c);
  border-radius: 2px;
}
.cluster-callout-label {
  margin: 0 0 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent, #d98a3c);
}
.cluster-callout p:last-child {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.85;
  color: var(--color-text, #1f1f1a);
}

/* --- 表（cluster-table） -------------------------------------------------- */
.cluster-table {
  width: 100%;
  margin: 20px 0;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.cluster-table th,
.cluster-table td {
  padding: 11px 14px;
  border: 1px solid var(--color-border, #e0d9cf);
  text-align: left;
  line-height: 1.7;
}
.cluster-table th {
  background: var(--color-bg-light, #f0ede8);
  font-weight: 700;
  color: var(--color-text, #1f1f1a);
}
.cluster-table td {
  color: var(--color-text-dark, #5a5a52);
}

/* --- FAQ（cluster-faq） --------------------------------------------------- */
.cluster-faq {
  margin: 24px 0;
}
.cluster-faq-item {
  margin-bottom: 14px;
  padding: 22px 24px;
  background: var(--color-bg-card, #fff);
  border: 1px solid var(--color-border, #e0d9cf);
  border-radius: 2px;
}
.cluster-faq-q {
  position: relative;
  margin: 0 0 12px;
  padding-left: 32px;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.55;
  color: var(--color-text, #1f1f1a);
}
.cluster-faq-q::before {
  content: "Q";
  position: absolute;
  left: 0;
  top: -2px;
  width: 24px;
  height: 24px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent, #d98a3c);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
}
.cluster-faq-a {
  position: relative;
  margin: 0;
  padding-left: 32px;
  font-size: 0.88rem;
  line-height: 1.95;
  color: var(--color-text-dark, #5a5a52);
}
.cluster-faq-a::before {
  content: "A";
  position: absolute;
  left: 0;
  top: -2px;
  width: 24px;
  height: 24px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-light, #f0ede8);
  border: 1px solid var(--color-border, #e0d9cf);
  color: var(--color-accent, #d98a3c);
  font-size: 0.78rem;
  font-weight: 700;
}

/* --- 関連記事リンク（cluster-related） ------------------------------------ */
.cluster-related {
  margin: 32px 0;
  padding: 24px;
  background: var(--color-bg-light, #f0ede8);
  border: 1px solid var(--color-border, #e0d9cf);
  border-radius: 2px;
}
.cluster-related-label {
  margin: 0 0 12px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent, #d98a3c);
}
.cluster-related ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cluster-related li {
  margin-bottom: 8px;
  padding: 0;
  background: transparent;
  border: 0;
}
.cluster-related li::before {
  content: none !important; /* nipponia-blog の箇条書きマーカーを打ち消す */
}
.cluster-related a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--color-bg-card, #fff);
  border: 1px solid var(--color-border, #e0d9cf);
  color: var(--color-text, #1f1f1a);
  text-decoration: none;
  font-size: 0.88rem;
  line-height: 1.55;
  transition: color 0.2s ease, padding-left 0.2s ease, border-color 0.2s ease;
}
.cluster-related a:hover {
  color: var(--color-accent, #d98a3c);
  border-color: var(--color-accent, #d98a3c);
  padding-left: 18px;
}
.cluster-related a::after {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 2px;
  white-space: nowrap;
}
.cluster-related a:not(.paid):not(.no-badge)::after {
  content: "✓ 無料";
  color: #2e7d32;
  background: #e8f5e9;
  border: 1px solid #a5d6a7;
}
.cluster-related a.paid::after {
  content: "🔒 有料";
  color: #b8860b;
  background: #fff8e1;
  border: 1px solid #e6c757;
}
.cluster-related a.no-badge::after {
  content: none;
}
.cluster-related li.coming {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #f5f4f2;
  border: 1px dashed #d6d2ca;
  color: #909098;
  font-size: 0.88rem;
  line-height: 1.55;
  cursor: default;
  user-select: none;
}
.cluster-related li.coming::after {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 9px;
  border-radius: 2px;
  white-space: nowrap;
}
.cluster-related li.coming:not(.paid):not(.no-badge)::after,
.cluster-related li.coming.free::after {
  content: "無料・公開予定";
  color: #2e7d32;
  background: #e8f5e9;
  border: 1px solid #a5d6a7;
}
.cluster-related li.coming.paid::after {
  content: "有料・公開予定";
  color: #b8860b;
  background: #fff8e1;
  border: 1px solid #e6c757;
}
.cluster-related li.coming.no-badge::after {
  content: none;
}

/* --- 記事末CTA（cluster-cta） --------------------------------------------- */
.cluster-cta {
  margin: 40px 0 0;
  padding: 36px 32px;
  background: #0f1726;
  text-align: center;
  border-radius: 4px;
}
.cluster-cta h1,
.cluster-cta h2,
.cluster-cta h3,
.cluster-cta h4,
.cluster-cta h5,
.cluster-cta h6,
.cluster-cta .cluster-cta-title {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.5;
  color: #fff !important;
}
/* CTA見出しは中央寄せの独自意匠。本文用CSSの見出しマーカー（h2短線 / h3ドット /
   h4左罫）を打ち消してクリーンに保つ。 */
.cluster-cta :is(h1, h2, h3, h4, h5, h6)::before,
.cluster-cta :is(h1, h2, h3, h4, h5, h6)::after {
  content: none !important;
}
.cluster-cta p,
.cluster-cta .cluster-cta-desc {
  margin: 0 0 22px;
  font-size: 0.88rem;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.85) !important;
}
.cluster-cta-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.cluster-cta-btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-radius: 2px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.cluster-cta-btn.primary {
  background: var(--color-accent, #d98a3c);
  color: #fff;
}
.cluster-cta-btn.primary:hover {
  background: var(--color-accent-hover, #c27a30);
}
.cluster-cta-btn.outline {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.cluster-cta-btn.outline:hover {
  border-color: var(--color-accent, #d98a3c);
  color: var(--color-accent, #d98a3c);
}

/* --- 補助金ビジュアライザ（cluster-subsidy-vis） --------------------------
   内部レイアウトCSS（cs-grid / cs-card / cs-ladder 等）は記事本文の
   インライン <style> で移行済み。ここでは配色変数のみ本サイトへ上書きする。
   本文インラインの :root 相当（.cluster-subsidy-vis）へ確実に勝つよう詳細度を上げる。 */
.p-activities-detail__body .cluster-subsidy-vis,
.p-news-detail__body .cluster-subsidy-vis,
.cluster-subsidy-vis {
  --cs-accent: #d98a3c;
  --cs-accent-light: #f6ede1;
  --cs-accent-dark: #c27a30;
  --cs-text: #1f1f1a;
  --cs-text-soft: #5a5a52;
  --cs-bg: #faf8f4;
  --cs-border: #e0d9cf;
}