/*
Theme Name: code-career-lab-child
Template: swell
Version: 3.0.0
Description: コードキャリアラボ子テーマ — ネイビー×オレンジ / 30代文系プログラミング転職特化
*/

@import url("https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;500;700;800&family=Noto+Serif+JP:wght@600;700&display=swap");

/* =========================================================
   カラーシステム
   Main:   #1E3A6E (Deep Navy)
   Accent: #E87B2A (Warm Orange)
   ========================================================= */
:root {
  --color-main:       #1E3A6E;
  --color-main-dark:  #142A52;
  --color-main-mid:   #2A4E8A;
  --color-main-light: #3A6CB8;
  --color-accent:     #E87B2A;
  --color-accent-dark:#C96520;
  --color-accent-light:#FF9A50;
  --color-accent-bg:  #FFF3E8;
  --color-bg:         #F4F6FA;
  --color-bg-white:   #FFFFFF;
  --color-text:       #1A1A2E;
  --color-text-muted: #5A6070;
  --color-border:     #D0D9EA;
  --shadow-sm:        0 1px 4px rgba(30,58,110,.10);
  --shadow-md:        0 4px 20px rgba(30,58,110,.14);
  --shadow-lg:        0 8px 40px rgba(30,58,110,.18);
  --radius-sm:        6px;
  --radius-md:        12px;
  --radius-lg:        20px;
  --max-w:            1080px;
}

/* SWELL変数との連携 */
body, .l-header, .l-content, .l-container {
  --color_main:   #1E3A6E;
  --color_accent: #E87B2A;
}

/* =========================================================
   Base
   ========================================================= */
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: "M PLUS 1p", "Noto Sans JP", sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.8;
}

/* =========================================================
   Typography
   ========================================================= */
h1, h2, h3, h4, h5, h6 {
  font-family: "Noto Serif JP", "M PLUS 1p", serif;
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-main);
}

.l-article h2, article h2 {
  border-left: 4px solid var(--color-accent);
  background: linear-gradient(90deg, #EBF0F8 0%, transparent 100%);
  padding: .65em 1em;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 1.2rem;
  margin-top: 2.5em;
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 800;
}

.l-article h3, article h3 {
  position: relative;
  padding-left: 1em;
  font-size: 1.05rem;
  margin-top: 1.8em;
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 700;
}
.l-article h3::before, article h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 1em;
  background: var(--color-accent);
  border-radius: 2px;
}

/* =========================================================
   ヘッダー
   ========================================================= */
.l-header {
  background: var(--color-main) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.25) !important;
}

.l-header__bar { background: var(--color-main) !important; }

/* ロゴ */
.c-headLogo__link,
.c-headLogo.-txt .c-headLogo__link,
.p-siteName a {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-family: "Noto Serif JP", serif !important;
  font-weight: 700 !important;
  white-space: nowrap;
}
.c-headLogo__img { filter: brightness(10) !important; }

/* グローバルナビ */
.c-gnav > li > a,
.p-globalNav a,
.p-globalNav__item a {
  color: rgba(255,255,255,.9) !important;
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .02em;
}
.c-gnav > li > a:hover,
.p-globalNav a:hover { color: var(--color-accent-light) !important; }

/* ハンバーガー */
.c-menuBtn span,
.p-menuBtn span { background: #FFFFFF !important; }

/* =========================================================
   SWELL メインビジュアル非表示
   ========================================================= */
#main_visual,
.p-mainVisual { display: none !important; }

/* トップページ余白除去 */
.top #content,
.home #content { padding-top: 0 !important; }

/* トップページ サイドバー非表示 */
.top #sidebar,
.home #sidebar { display: none !important; }

/* トップページ フル幅 */
.top .l-mainContent,
.home .l-mainContent {
  max-width: 100% !important;
  width: 100% !important;
  flex: 1 1 100% !important;
}
.top .l-article,
.home .l-article {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* =========================================================
   ヒーローセクション
   ========================================================= */
.ccl-hero {
  background: linear-gradient(150deg, #0D2240 0%, #1E3A6E 45%, #2A5298 100%);
  color: #FFFFFF;
  padding: 5rem 1.5rem 4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* 背景装飾 — 斜めライン */
.ccl-hero::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -10%;
  width: 55%;
  height: 200%;
  background: rgba(255,255,255,.04);
  transform: rotate(-18deg);
  pointer-events: none;
}
.ccl-hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-light) 50%, var(--color-accent) 100%);
}

.ccl-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
}

/* バッジ */
.ccl-hero-badge {
  display: inline-block;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.30);
  border-radius: 50px;
  font-size: .78rem;
  font-weight: 700;
  padding: .35em 1.2em;
  margin-bottom: 1.5rem;
  letter-spacing: .08em;
  color: rgba(255,255,255,.95);
}

/* メインタイトル */
.ccl-hero-title {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 1.25rem;
  color: #FFFFFF !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.25);
  -webkit-text-fill-color: #FFFFFF !important;
}
.ccl-hero-title span {
  color: var(--color-accent-light) !important;
  -webkit-text-fill-color: var(--color-accent-light) !important;
}

/* サブテキスト */
.ccl-hero-sub {
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(255,255,255,.85) !important;
  margin: 0 0 2.25rem;
  font-weight: 400;
}

/* CTAボタン */
.ccl-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  background: var(--color-accent) !important;
  color: #FFFFFF !important;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 1em 2.4em;
  border-radius: 50px;
  text-decoration: none !important;
  box-shadow: 0 6px 24px rgba(232,123,42,.5);
  transition: transform .2s ease, box-shadow .2s ease;
  min-height: 52px;
  letter-spacing: .02em;
}
.ccl-hero-cta::after { content: "→"; font-size: .9em; }
.ccl-hero-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(232,123,42,.6);
  color: #FFFFFF !important;
  text-decoration: none !important;
}

/* =========================================================
   数字バッジ行（実績の可視化）
   ========================================================= */
.ccl-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  background: #FFFFFF;
  border-bottom: 1px solid var(--color-border);
}

.ccl-badge {
  flex: 1;
  min-width: 120px;
  padding: 1.5rem 1rem;
  text-align: center;
  border-right: 1px solid var(--color-border);
  position: relative;
}
.ccl-badge:last-child { border-right: none; }

.ccl-badge-num {
  display: block;
  font-family: "Noto Serif JP", serif;
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 700;
  color: var(--color-main);
  line-height: 1.1;
  margin-bottom: .3rem;
}

.ccl-badge-label {
  display: block;
  font-size: .75rem;
  color: var(--color-text-muted);
  line-height: 1.4;
  font-weight: 500;
}

/* =========================================================
   カテゴリセクション
   ========================================================= */
.ccl-cat-section {
  padding: 3.5rem 1.5rem;
  background: var(--color-bg);
}

.ccl-cat-section-title {
  text-align: center;
  font-family: "Noto Serif JP", serif;
  font-size: 1.4rem;
  color: var(--color-main);
  margin: 0 0 .5rem;
  font-weight: 700;
}
.ccl-cat-section-sub {
  text-align: center;
  font-size: .88rem;
  color: var(--color-text-muted);
  margin: 0 0 2rem;
}

.ccl-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  max-width: var(--max-w);
  margin: 0 auto;
}

.ccl-cat-card {
  background: #FFFFFF;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  padding: 1.6rem 1.25rem 1.4rem;
  text-decoration: none !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .5rem;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.ccl-cat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-main-light);
  text-decoration: none !important;
}

.ccl-cat-icon {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: .25rem;
}

.ccl-cat-name {
  font-weight: 700;
  font-size: .95rem;
  color: var(--color-main);
  line-height: 1.3;
}

.ccl-cat-desc {
  font-size: .78rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}

/* =========================================================
   選ばれる理由（強み）セクション
   ========================================================= */
.ccl-strengths {
  background: var(--color-main);
  padding: 4rem 1.5rem;
}

.ccl-strengths-title {
  text-align: center;
  font-family: "Noto Serif JP", serif;
  font-size: 1.4rem;
  color: #FFFFFF;
  margin: 0 0 2.5rem;
  font-weight: 700;
  -webkit-text-fill-color: #FFFFFF !important;
}
.ccl-strengths-title::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: var(--color-accent);
  margin: .6rem auto 0;
  border-radius: 2px;
}

.ccl-strength-item {
  max-width: 680px;
  margin: 0 auto 1.5rem;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 1.25rem;
  align-items: flex-start;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.75rem;
  transition: background .2s;
}
.ccl-strength-item:last-child { margin-bottom: 0; }
.ccl-strength-item:hover { background: rgba(255,255,255,.11); }

.ccl-strength-num {
  font-family: "Noto Serif JP", serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1;
  text-align: center;
  padding-top: .15rem;
}

.ccl-strength-title {
  font-weight: 700;
  font-size: 1.05rem;
  color: #FFFFFF;
  margin: 0 0 .5rem;
  -webkit-text-fill-color: #FFFFFF !important;
  font-family: "M PLUS 1p", sans-serif;
}

.ccl-strength-desc {
  font-size: .88rem;
  color: rgba(255,255,255,.80);
  line-height: 1.75;
  margin: 0;
}

/* =========================================================
   編集部紹介ブロック
   ========================================================= */
.ccl-editorial-block {
  background: #FFFFFF;
  border-top: 4px solid var(--color-accent);
  padding: 2.5rem 1.5rem;
  text-align: center;
  max-width: 100%;
}

.ccl-editorial-block p {
  max-width: 640px;
  margin: 0 auto .75rem;
  font-size: .92rem;
  color: var(--color-text-muted);
  line-height: 1.8;
}

.ccl-editorial-link {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  color: var(--color-main) !important;
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none !important;
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: .1em;
  transition: color .18s;
}
.ccl-editorial-link:hover { color: var(--color-accent) !important; }

/* =========================================================
   記事内 CTA ・ボタン
   ========================================================= */
.wp-block-button .wp-block-button__link,
a.c-btn {
  background: var(--color-accent) !important;
  color: #FFFFFF !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  padding: .9em 2.2em !important;
  box-shadow: 0 4px 16px rgba(232,123,42,.35) !important;
  transition: transform .18s, box-shadow .18s !important;
  min-height: 48px !important;
  font-size: 1rem !important;
}
.wp-block-button .wp-block-button__link:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 7px 20px rgba(232,123,42,.45) !important;
}

.has-black-background-color,
.has-gray-background-color { background-color: var(--color-accent) !important; }

/* PR引用系CTAクラス */
.ccl-cta {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  background: var(--color-accent);
  color: #FFFFFF !important;
  font-weight: 700;
  font-size: 1rem;
  padding: .95em 2.4em;
  border-radius: 50px;
  text-decoration: none !important;
  box-shadow: 0 4px 16px rgba(232,123,42,.4);
  transition: transform .2s, box-shadow .2s;
  min-height: 52px;
}
.ccl-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 22px rgba(232,123,42,.5);
  color: #FFFFFF !important;
}

/* =========================================================
   記事内コンポーネント
   ========================================================= */

/* 比較表 */
.ccl-compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.5rem 0; }
.ccl-compare-table { width: 100%; min-width: 500px; border-collapse: collapse; font-size: .88rem; }
.ccl-compare-table th {
  background: var(--color-main);
  color: #FFFFFF;
  padding: .75em 1em;
  text-align: center;
  font-weight: 700;
}
.ccl-compare-table td {
  padding: .65em 1em;
  text-align: center;
  border: 1px solid var(--color-border);
  vertical-align: middle;
}
.ccl-compare-table tr:nth-child(even) td { background: #F5F7FA; }
.ccl-compare-table .ccl-best {
  background: #FFF3E8 !important;
  font-weight: 700;
  color: var(--color-accent-dark);
}

/* FAQ */
.ccl-faq details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: .6rem;
  background: #FFFFFF;
  overflow: hidden;
}
.ccl-faq summary {
  padding: .9em 1.2em;
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: .6em;
  color: var(--color-main);
  background: #F4F6FA;
}
.ccl-faq summary::-webkit-details-marker { display: none; }
.ccl-faq summary::before { content: "Q."; color: var(--color-accent); font-weight: 700; flex-shrink: 0; }
.ccl-faq summary::after { content: "＋"; margin-left: auto; flex-shrink: 0; color: var(--color-text-muted); }
.ccl-faq details[open] summary { border-bottom: 1px solid var(--color-border); }
.ccl-faq details[open] summary::after { content: "－"; }
.ccl-faq details > div { padding: .9em 1.2em; font-size: .92rem; line-height: 1.8; }
.ccl-faq details > div::before { content: "A."; color: #2A7A3B; font-weight: 700; margin-right: .4em; }

/* PR表記 */
.ccl-pr-notice {
  background: #FFFDE7;
  border-left: 4px solid #F5C842;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: .6em 1em;
  font-size: .82rem;
  color: #5A4900;
  margin: 0 0 1.5rem;
}

/* 著者ボックス */
.ccl-author-box {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: #FFFFFF;
  margin: 2.5rem 0;
  box-shadow: var(--shadow-sm);
}
.ccl-author-box__img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 3px solid var(--color-main);
}
.ccl-author-box__name { font-weight: 700; font-size: 1rem; color: var(--color-main); margin-bottom: .2rem; }
.ccl-author-box__role { font-size: .8rem; color: var(--color-accent); font-weight: 700; margin-bottom: .4rem; }
.ccl-author-box__bio { font-size: .87rem; line-height: 1.7; color: var(--color-text-muted); }

/* 評価スコア */
.ccl-score-box {
  background: #F4F6FA;
  border-radius: var(--radius-md);
  padding: 1.25rem;
  margin: 1.5rem 0;
  border: 1px solid var(--color-border);
}
.ccl-score-row { display: flex; align-items: center; gap: .75rem; margin-bottom: .45rem; font-size: .88rem; }
.ccl-score-row__label { width: 8em; flex-shrink: 0; color: var(--color-text-muted); }
.ccl-score-bar { flex: 1; height: 10px; background: var(--color-border); border-radius: 5px; overflow: hidden; }
.ccl-score-bar__fill { height: 100%; background: linear-gradient(90deg, var(--color-main), var(--color-accent)); border-radius: 5px; }
.ccl-score-row__val { font-weight: 700; color: var(--color-accent); width: 3em; text-align: right; }

/* 関連カード */
.ccl-related-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.ccl-related-card {
  display: block;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem;
  text-decoration: none !important;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s, transform .2s;
}
.ccl-related-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.ccl-related-card__title { display: block; font-weight: 700; font-size: .92rem; color: var(--color-main); margin-bottom: .4rem; line-height: 1.4; }
.ccl-related-card__meta { display: block; font-size: .78rem; color: var(--color-text-muted); margin-bottom: .5rem; }
.ccl-related-card__cta {
  display: block;
  background: var(--color-accent);
  color: #FFFFFF !important;
  text-align: center;
  font-weight: 700;
  font-size: .82rem;
  padding: .5em .8em;
  border-radius: var(--radius-sm);
  text-decoration: none !important;
}

/* 商品カード */
.ccl-product-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: #FFFFFF; box-shadow: var(--shadow-sm); transition: box-shadow .2s; }
.ccl-product-card:hover { box-shadow: var(--shadow-md); }
.ccl-product-card__img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.ccl-product-card__body { padding: .9rem 1rem; }
.ccl-product-card__name { font-weight: 700; font-size: .95rem; color: var(--color-main); margin-bottom: .35rem; line-height: 1.4; }
.ccl-product-card__comment { font-size: .82rem; background: #F4F6FA; border-left: 3px solid var(--color-accent); padding: .4em .7em; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-bottom: .65rem; }
.ccl-product-card__cta { display: block; background: var(--color-accent); color: #FFFFFF !important; text-align: center; font-weight: 700; font-size: .88rem; padding: .65em 1em; border-radius: var(--radius-sm); text-decoration: none !important; }

/* PR引用ブロック */
.ccl-press-quote {
  border-left: 4px solid var(--color-main);
  background: #F4F6FA;
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: .92rem;
  line-height: 1.8;
}
.ccl-press-quote cite { display: block; margin-top: .6rem; font-size: .78rem; color: var(--color-text-muted); font-style: normal; }

/* =========================================================
   フォーカス・アクセシビリティ
   ========================================================= */
*:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

/* =========================================================
   フッター
   ========================================================= */
.l-siteFooter,
.l-footer {
  background: var(--color-main-dark) !important;
  color: rgba(255,255,255,.8) !important;
}
.l-siteFooter a,
.l-footer a { color: rgba(255,255,255,.7) !important; }
.l-siteFooter a:hover,
.l-footer a:hover { color: var(--color-accent-light) !important; }
.l-footer__foot,
.l-siteFooter .l-footer__foot { background: rgba(0,0,0,.25) !important; }
.l-footer__foot *,
.c-footerCopy { color: rgba(255,255,255,.45) !important; font-size: .78rem !important; }

/* =========================================================
   スマホ対応（768px以下）
   ========================================================= */
@media (max-width: 768px) {
  .ccl-hero { padding: 3rem 1.25rem 2.5rem; }
  .ccl-hero-title { font-size: clamp(1.55rem, 6vw, 2rem); }
  .ccl-hero-sub { font-size: .92rem; }
  .ccl-hero-cta { font-size: .95rem; padding: .9em 2em; }

  .ccl-badges { flex-wrap: wrap; }
  .ccl-badge { flex: 1 1 50%; min-width: 0; border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
  .ccl-badge:nth-child(2n) { border-right: none; }
  .ccl-badge:nth-last-child(-n+2) { border-bottom: none; }

  .ccl-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .ccl-cat-card { padding: 1.2rem .9rem; }

  .ccl-strength-item { grid-template-columns: 48px 1fr; gap: .9rem; padding: 1.2rem 1.25rem; }
  .ccl-strength-num { font-size: 1.5rem; }

  .ccl-related-cards { grid-template-columns: 1fr; }
  .l-article h2 { font-size: 1.05rem !important; }
  .l-article h3 { font-size: .98rem !important; }
  .ccl-author-box { flex-direction: column; }
}

@media (max-width: 480px) {
  .ccl-cat-grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .ccl-cat-icon { font-size: 1.6rem; }
  .ccl-cat-name { font-size: .88rem; }
}

/* スマホナビ非表示 */
.l-header__spNav { display: none !important; }

/* =========================================================
   v3.1 — 新HTML構造対応パッチ (2026-06-12)
   ========================================================= */

/* 強みアイテム: コンテンツラッパー */
.ccl-strength-content {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.ccl-strength-content .ccl-strength-title {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font-size: 1.05rem;
  font-weight: 700;
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF !important;
  font-family: "M PLUS 1p", sans-serif;
}
.ccl-strength-content .ccl-strength-desc {
  margin: 0;
  font-size: .88rem;
  color: rgba(255,255,255,.80);
  line-height: 1.75;
}

/* カスタムセクションタイトルH2: article h2スタイルをリセット */
h2.ccl-cat-section-title,
h2.ccl-strengths-title,
h2.ccl-editorial-title {
  border-left: none !important;
  background: none !important;
  padding: 0 !important;
  margin-top: 0 !important;
}

/* 編集部タイトル */
.ccl-editorial-title {
  font-family: "Noto Serif JP", serif;
  font-size: 1.35rem;
  color: var(--color-main);
  margin: 0 0 1rem;
  font-weight: 700;
  text-align: center;
}

/* セクション間余白 */
.ccl-cat-section + .ccl-strengths { margin-top: 0; }
.ccl-strengths + .ccl-editorial-block { margin-top: 0; }

/* モバイル: 強みアイテム */
@media (max-width: 768px) {
  .ccl-strength-item { grid-template-columns: 48px 1fr; gap: .9rem; padding: 1.2rem 1.25rem; }
  .ccl-strength-num { font-size: 1.5rem; }
}

/* =========================================================
   v3.2 — SWELL customizer h2 white color override (2026-06-12)
   SWELLが .post_content h2:where(...){color:#FFF} を注入するため
   ネスト選択子で特定性 0,2,1 に引き上げ
   ========================================================= */

/* カテゴリセクションタイトル → ネイビー */
.ccl-cat-section h2.ccl-cat-section-title,
.ccl-cat-section .ccl-cat-section-title {
  color: var(--color-main) !important;
  -webkit-text-fill-color: var(--color-main) !important;
}

/* 編集部タイトル → ネイビー */
.ccl-editorial-block h2.ccl-editorial-title,
.ccl-editorial-block .ccl-editorial-title {
  color: var(--color-main) !important;
  -webkit-text-fill-color: var(--color-main) !important;
}

/* 強みセクションタイトル → 白（ダーク背景上） */
.ccl-strengths h2.ccl-strengths-title,
.ccl-strengths .ccl-strengths-title {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* 強みセクション内 h3 → 白（SWELLがh3にも干渉する場合の保険） */
.ccl-strengths .ccl-strength-content h3,
.ccl-strengths h3.ccl-strength-title {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border: none !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 0 .3rem !important;
}