/*
Theme Name: 内省変容コーチング ブログ (coaching)
Theme URI: https://coaching.ukeru-llc.com/blog/
Description: 内省変容コーチング（UKERU合同会社）の限定ブログ用SWELL子テーマ。静的モックの記事装飾（吹き出し・受講生の引用・黄マーカー・点線の箱・濃色まとめ枠）をそのままWordPressへ移植したもの。配色の正本は かえる道場/ブログ/style.css の :root トークン。
Author: UKERU合同会社
Template: swell
Version: 1.0.0
*/

/* ============================================================
   0. デザイントークン（正本 = かえる道場/ブログ/style.css の :root）
   かえる恋愛の緑 #008f6d は一切使わない。
   ============================================================ */
:root {
  --c-bg-light: #F5F5F4;
  --c-bg-mid:   #E7E5E3;
  --c-bg-dark:  #3A3A38;
  --c-text:     #1A1A1A;
  --c-yellow:   #F7DB55;
  --c-bg-lighter: #FAFAF9;
  --c-white:    #FFFFFF;
  --c-text-sub: #57534E;
  --c-line:     #D8D5D1;

  --font-head: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-body: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-min:  "Hiragino Mincho ProN", "Hiragino Mincho Pro", "YuMincho", "Yu Mincho", serif;

  --pad: 20px;
  --w-max: 1120px;
  --w-read: 680px;
  --radius: 6px;
  --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-5: 40px;
  --sp-6: 48px; --sp-7: 56px; --sp-8: 64px; --sp-9: 76px; --sp-12: 96px;
}

/* SWELLのブランドカラーをこのブログのトークンへ寄せる（緑・青は持ち込まない） */
:root {
  --color_main: #3A3A38;
  --color_link: #1A1A1A;
  --color_text: #1A1A1A;
}

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

body {
  font-family: var(--font-body);
  color: var(--c-text);
  background: var(--c-bg-light);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .05em;
}

/* ============================================================
   1. SWELL本体の飾りを解除する（ここを外すと装飾が壊れる）
   - .post_content h2::before は position:absolute の枠線飾り。
     解除しないと擬似要素が左上に飛んで黄色の縦線と喧嘩する。
   ============================================================ */
.post_content h2::before,
.post_content h2::after,
.swell-content-body h2::before,
.swell-content-body h2::after,
.post_content h3::before,
.post_content h3::after,
.swell-content-body h3::before,
.swell-content-body h3::after {
  content: none !important;
  display: none !important;
  position: static !important;
  background: none !important;
  border: 0 !important;
}

/* SWELLの引用・リストの既定飾りも殺す（.q / .dash に自前の見た目を当てるため） */
.swell-content-body blockquote::before,
.swell-content-body blockquote::after { content: none !important; }

/* ============================================================
   2. 本文の器（読みやすい幅で中央に置く）
   記事本文は <div class="swell-content-body"> で包まれて投入される。
   ============================================================ */
.swell-content-body {
  max-width: var(--w-read);
  margin-left: auto;
  margin-right: auto;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .05em;
  color: var(--c-text);
}
.swell-content-body > *:first-child { margin-top: 0 !important; }

/* 折り返してほしくない語（自己否定・受講生名など） */
.swell-content-body .nw { white-space: nowrap; display: inline; }

/* ============================================================
   3. 見出し・段落
   ============================================================ */
.swell-content-body h2,
.post_content .swell-content-body h2 {
  margin: var(--sp-9) 0 var(--sp-3) !important;
  padding: 0 0 0 14px !important;
  border: 0 !important;
  border-left: 4px solid var(--c-yellow) !important;
  border-radius: 0 !important;
  background: none !important;
  color: var(--c-text) !important;
  font-family: var(--font-head) !important;
  font-weight: 900 !important;
  font-size: 21px !important;
  line-height: 1.5 !important;
  letter-spacing: .02em;
  font-feature-settings: "palt";
  box-shadow: none !important;
  text-align: left !important;
}

.swell-content-body h3,
.post_content .swell-content-body h3 {
  margin: var(--sp-7) 0 var(--sp-2) !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: var(--c-text) !important;
  font-family: var(--font-head) !important;
  font-weight: 900 !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  font-feature-settings: "palt";
  box-shadow: none !important;
}

/* h3 の連番バッジ <h3><span class="n">1</span>見出し</h3> */
.swell-content-body h3 .n {
  display: inline-block;
  width: 1.7em; height: 1.7em; line-height: 1.7em;
  text-align: center;
  background: var(--c-text);
  color: var(--c-bg-light);
  border-radius: 50%;
  font-size: .72em;
  font-weight: 900;
  margin-right: .55em;
  vertical-align: .12em;
}

.swell-content-body p,
.post_content .swell-content-body p {
  margin: 26px 0 0 !important;
  line-height: 2.15 !important;
  color: var(--c-text);
  font-size: 16px;
}

.swell-content-body a {
  color: var(--c-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--c-yellow);
  text-decoration-thickness: 2px;
  font-weight: 700;
}

.swell-content-body img { max-width: 100%; height: auto; display: block; }

/* ============================================================
   4. マーカー
   .mk  = 黄マーカー（本文に5本以上）
   .mk1 = 一番の強調（1記事にちょうど1箇所。黄＋下線）
   ============================================================ */
.swell-content-body .mk {
  background: linear-gradient(transparent 62%, var(--c-yellow) 62%) !important;
  font-weight: 700;
  color: var(--c-text);
}
.swell-content-body .mk1 {
  background: linear-gradient(transparent 62%, var(--c-yellow) 62%) !important;
  border-bottom: 2px solid var(--c-text);
  font-weight: 700;
  padding-bottom: 1px;
  color: var(--c-text);
}

/* ============================================================
   5. 久田の吹き出し .bal（セリフだけ明朝）
   ============================================================ */
.swell-content-body .bal {
  display: flex !important;
  align-items: flex-start;
  gap: 14px;
  margin: var(--sp-7) 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
}
.swell-content-body .bal .ic {
  flex-shrink: 0;
  width: 60px;
  text-align: center;
}
.swell-content-body .bal .ic img {
  width: 52px !important;
  height: 52px !important;
  max-width: 52px !important;
  border-radius: 50% !important;
  object-fit: cover;
  margin: 0 auto !important;
  border: 2px solid var(--c-bg-mid);
  display: block;
}
.swell-content-body .bal .ic span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--c-text-sub);
  margin-top: 4px;
  line-height: 1.2;
}
.swell-content-body .bal .say {
  flex: 1;
  background: var(--c-bg-light) !important;
  border: 2px solid var(--c-bg-mid) !important;
  border-radius: 0 12px 12px 12px !important;
  padding: 16px 18px !important;
  margin: 0 !important;
  line-height: 1.95;
  color: var(--c-text);
  font-size: 15px;
  font-family: var(--font-min) !important;
}

/* ============================================================
   6. 受講生の引用 .q
   ============================================================ */
.swell-content-body .q {
  margin: var(--sp-5) 0 !important;
  background: var(--c-white) !important;
  border: 1px solid var(--c-line) !important;
  border-left: 3px solid var(--c-text) !important;
  border-radius: 0 var(--radius) var(--radius) 0 !important;
  padding: 18px 20px !important;
  font-size: 15px;
  line-height: 1.9;
  color: var(--c-text);
}
.swell-content-body .q i {
  display: block;
  font-style: normal;
  font-size: 12px;
  color: var(--c-text-sub);
  margin-top: 8px;
}
.swell-content-body .q p { margin: 0 !important; }

/* ============================================================
   7. 1文だけ抜き出して足を止める枠 .pull
   ============================================================ */
.swell-content-body .pull {
  margin: var(--sp-7) 0 !important;
  background: var(--c-white) !important;
  border: 0 !important;
  border-left: 6px solid var(--c-yellow) !important;
  border-radius: 0 4px 4px 0 !important;
  padding: 22px 20px !important;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 17px;
  line-height: 1.75;
  color: var(--c-text);
}
.swell-content-body .pull p { margin: 0 !important; font-weight: 900; }

/* ============================================================
   8. 持ち帰る目安・手順の枠 .dash（点線）
   ============================================================ */
.swell-content-body .dash {
  margin: var(--sp-7) 0 !important;
  border: 2px dashed var(--c-text-sub) !important;
  border-radius: var(--radius) !important;
  background: var(--c-white) !important;
  padding: 22px 20px !important;
}
.swell-content-body .dash ul,
.swell-content-body .dash ol {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.swell-content-body .dash li {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  list-style: none !important;
  font-weight: 700;
  line-height: 1.9;
  font-size: 15px;
  color: var(--c-text);
}
.swell-content-body .dash li::before,
.swell-content-body .dash li::after { content: none !important; display: none !important; }
.swell-content-body .dash li + li { margin-top: 8px !important; }

/* ============================================================
   9. 箇条書きの枠 .box（見出し付き・黄の四角マーカー）
   ============================================================ */
.swell-content-body .box {
  margin: var(--sp-3) 0 0 !important;
  background: var(--c-white) !important;
  border: 1px solid var(--c-line) !important;
  border-top: 3px solid var(--c-yellow) !important;
  border-radius: var(--radius) !important;
  padding: 22px 20px !important;
}
.swell-content-body .box b {
  display: block;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 15px;
  margin-bottom: 10px;
}
.swell-content-body .box ul { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.swell-content-body .box li {
  position: relative;
  margin: 0 !important;
  padding: 0 0 0 20px !important;
  border: 0 !important;
  background: none !important;
  list-style: none !important;
  font-size: 15px;
  line-height: 1.9;
}
.swell-content-body .box li + li { margin-top: 6px !important; }
.swell-content-body .box li::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  left: 2px; top: .75em;
  width: 7px; height: 7px;
  border-radius: 0;
  background: var(--c-yellow) !important;
}

/* ============================================================
   10. 比較表 .cmp
   ============================================================ */
.swell-content-body .cmp { overflow-x: auto; margin: var(--sp-5) 0 !important; }
.swell-content-body .cmp table {
  width: 100%; border-collapse: collapse; font-size: 14px; margin: 0 !important;
}
.swell-content-body .cmp th {
  padding: 12px 14px; text-align: left;
  background: var(--c-bg-mid) !important;
  border: 1px solid var(--c-line) !important;
  font-weight: 700; white-space: nowrap; color: var(--c-text);
}
.swell-content-body .cmp th:first-child {
  background: var(--c-text) !important; color: var(--c-bg-light) !important;
}
.swell-content-body .cmp td {
  padding: 12px 14px;
  border: 1px solid var(--c-line) !important;
  background: var(--c-white) !important;
  color: var(--c-text);
}
.swell-content-body .cmp td:first-child {
  font-weight: 700; white-space: nowrap; background: var(--c-bg-light) !important;
}

/* ============================================================
   11. まとめ枠 .matome（濃い色・中の文字は明るいグレー）
   ============================================================ */
.swell-content-body .matome {
  margin: var(--sp-9) 0 0 !important;
  background: var(--c-bg-dark) !important;
  color: var(--c-bg-light) !important;
  border: 0 !important;
  border-radius: var(--radius) !important;
  padding: 32px 24px !important;
}
.swell-content-body .matome p {
  margin: 0 !important;
  font-weight: 700 !important;
  line-height: 1.9 !important;
  color: var(--c-bg-light) !important;
}
.swell-content-body .matome p + p { margin-top: 20px !important; }
.swell-content-body .matome .end {
  border-bottom: 2px solid var(--c-yellow);
  padding-bottom: 2px;
  font-size: 1.1em;
  color: var(--c-bg-light) !important;
}

/* ============================================================
   12. 記事末のCTA .cta / 関連 .rel
   （投稿本文の末尾に入る想定。テンプレ側で出す場合もここが効く）
   ============================================================ */
.swell-content-body .cta,
.l-articleBottom .cta {
  margin-top: var(--sp-8) !important;
  background: var(--c-white) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--radius) !important;
  padding: 28px 22px !important;
  text-align: center;
}
.swell-content-body .cta b {
  display: block;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 19px;
  line-height: 1.5;
}
.swell-content-body .cta p {
  margin: 12px 0 0 !important;
  font-size: 14px;
  line-height: 1.9;
  color: var(--c-text-sub) !important;
}
.swell-content-body .cta .btn {
  margin-top: 20px;
  display: inline-block;
  background: var(--c-yellow) !important;
  color: var(--c-text) !important;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .04em;
  padding: 15px 28px;
  border-radius: var(--radius);
  text-decoration: none !important;
}

.swell-content-body .rel { margin-top: var(--sp-8) !important; }
.swell-content-body .rel .lab {
  font-size: 11px; font-weight: 600; letter-spacing: .16em;
  color: var(--c-text-sub) !important; margin: 0 0 14px !important;
}
.swell-content-body .rel a {
  display: block;
  border-top: 1px solid var(--c-line);
  padding: 16px 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  text-decoration: none !important;
  color: var(--c-text);
}
.swell-content-body .rel a:last-child { border-bottom: 1px solid var(--c-line); }
.swell-content-body .rel a i {
  display: block; font-style: normal; font-size: 11px;
  letter-spacing: .1em; color: var(--c-text-sub); margin-bottom: 6px;
}

/* ============================================================
   13. 目次・プロフィール枠など、SWELL側の部品の色合わせ
   ============================================================ */
.swell-content-body .toc,
.swell-toc,
.p-toc {
  background: var(--c-white) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--radius) !important;
}
.p-toc__ttl { color: var(--c-text) !important; }

/* カテゴリーラベル・メインビジュアル等（SWELL既定の色を持ち込ませない） */
.c-postThumb__cat, .cat-label, .p-postList__cat, .post-cat {
  background: var(--c-text) !important; color: #fff !important;
}

/* wpautop が入れる空の <p> で余白が伸びるのを殺す */
.swell-content-body p:empty { display: none !important; margin: 0 !important; }

/* ============================================================
   14. レスポンシブ（基準は390px。768px以上で本文を少し大きく）
   ============================================================ */
@media (min-width: 768px) {
  :root { --pad: 40px; }
  .swell-content-body p,
  .post_content .swell-content-body p { font-size: 17px; }
  .swell-content-body h2,
  .post_content .swell-content-body h2 { font-size: 24px !important; }
}

/* ============================================================
   15. 一覧・ヘッダー・フッター
   正本 = かえる道場/ブログ/style.css（.hd / .top / .cats / .list /
   .grid / .card / .more / .art / .cta / .rel / footer）をそのまま移植。
   ここは記事本文（.swell-content-body）の「外側」。
   上の 1〜14 の記事装飾には一切手を入れていない。

   SWELLの既定スタイルと殴り合う場所なので、
   見出し・段落・リンクの margin / font / color は明示して打ち消す。
   ============================================================ */

/* ── 土台。SWELLのbody背景・行間を上書きする ──
   【重要】SWELLは固定ヘッダーの高さぶん body に padding-top:64px を入れる。
   このブログはSWELLのヘッダーを出さないので、消さないと上に64pxの空白が残る。 */
body.cb {
  padding: 0 !important;
  background: var(--c-bg-light) !important;
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .05em;
}
body.cb img { max-width: 100%; height: auto; display: block; }
body.cb .nw { white-space: nowrap; display: inline; }

/* SWELLのレイアウト箱が万一出てきても幅を潰さない保険 */
body.cb #content, body.cb #main_content, body.cb .l-mainContent,
body.cb .l-container, body.cb .l-content {
  max-width: none !important; width: auto !important;
  padding: 0 !important; margin: 0 !important; background: none !important;
}
body.cb .l-sidebar, body.cb #sidebar, body.cb .l-header, body.cb #header,
body.cb .p-mainVisual, body.cb .c-pageTitle, body.cb .l-topTitleArea,
body.cb .p-breadcrumb, body.cb .l-articleBottom, body.cb .l-footer {
  display: none !important;
}

/* SWELLの自動目次はモックに無いので出さない（本体は functions.php で外している。ここは保険） */
body.cb .p-toc, body.cb .swell-toc, body.cb .swell-block-toc, body.cb #toc_container { display: none !important; }

.wrap { max-width: var(--w-max); margin: 0 auto; padding: 0 var(--pad); }
.read { max-width: var(--w-read); margin: 0 auto; }

/* ── ヘッダー ── */
.hd {
  position: sticky; top: 0; z-index: 50;
  background: rgba(245,245,244,.92);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--c-line);
}
body.admin-bar .hd { top: 32px; }
.hd .in {
  max-width: var(--w-max); margin: 0 auto; padding: 14px var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.hd a { color: var(--c-text); text-decoration: none !important; box-shadow: none !important; }
.hd .lk { line-height: 1.9; }   /* モックは body の 1.9 を継承している。SWELLに上書きされないよう明示 */
.hd .lk b {
  display: block; font-family: var(--font-head); font-weight: 900;
  font-size: 15px; letter-spacing: .04em; line-height: 1.3;
}
.hd .lk i { font-style: normal; font-size: 11px; letter-spacing: .12em; color: var(--c-text-sub); }
.hd .back {
  font-size: 12px; letter-spacing: .08em; color: var(--c-text-sub);
  border: 1px solid var(--c-line); border-radius: 999px;
  padding: 7px 14px; white-space: nowrap;
}

/* ── 一覧の頭（見出し帯と斜めの線2本） ──
   【地雷】SWELLはトップページの <body> に "top" というクラスを付ける。
   セレクタを .top のままにすると body にも当たり、body が
   position:relative + overflow:hidden になって sticky ヘッダーが壊れる。
   必ず section.top と書くこと。 */
section.top { padding: var(--sp-8) 0 var(--sp-5); position: relative; overflow: hidden; }
section.top .ln {
  position: absolute; left: -10%; width: 130%; height: 1px;
  background: var(--c-text); opacity: .14;
  transform: rotate(-24deg); transform-origin: left top;
}
section.top .l1 { top: 44%; }
section.top .l2 { top: 38%; left: 3%; }
.lab {
  font-size: 11px !important; font-weight: 600; letter-spacing: .16em;
  color: var(--c-text-sub) !important; margin: 0 0 10px !important; line-height: 1.9;
}
section.top h1 {
  margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important;
  font-family: var(--font-head); font-weight: 900; color: var(--c-text) !important;
  font-size: clamp(28px, 7vw, 48px); line-height: 1.3; letter-spacing: .03em;
  font-feature-settings: "palt"; text-align: left !important;
}
section.top .sub {
  word-break: auto-phrase;
  margin: 18px 0 0 !important; font-size: 15px; line-height: 1.9;
  color: var(--c-text-sub) !important; max-width: 34em;
}

/* ── カテゴリーのピル ── */
.cats {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 0 var(--pad) 2px; margin: var(--sp-5) 0 0;
  scrollbar-width: none; position: relative; z-index: 1;
}
.cats::-webkit-scrollbar { display: none; }
.cats a {
  flex: 0 0 auto; font-size: 13px; font-weight: 600; letter-spacing: .04em;
  padding: 9px 16px; border: 1px solid var(--c-line); border-radius: 999px;
  background: var(--c-white); white-space: nowrap;
  color: var(--c-text) !important; text-decoration: none !important; box-shadow: none !important;
}
.cats a.on { background: var(--c-text); color: #fff !important; border-color: var(--c-text); }
.cats a i { font-style: normal; color: var(--c-text-sub); font-weight: 400; margin-left: 6px; font-size: 11px; }
.cats a.on i { color: rgba(255,255,255,.6); }

/* ── 記事一覧 ── */
.list { padding: var(--sp-6) 0 var(--sp-12); }
.grid {
  /* 区切り線はカード側の border-bottom で引く。
     グリッドの背景で作ると、記事の数が列数で割り切れないときに
     空きマスがそのまま灰色の板になって出てしまう。 */
  display: grid; gap: 0; background: transparent;
  border-top: 1px solid var(--c-line);
}
.card {
  background: transparent; padding: 22px 0; display: block;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-text) !important; text-decoration: none !important; box-shadow: none !important;
}
/* margin-top と line-height はあえて指定しない。
   モックは .card p{margin-top:8px; line-height:1.85} を .m にも効かせているため。 */
.card .m {
  display: flex; align-items: center; gap: 12px;
  font-size: 11px !important; letter-spacing: .1em;
  color: var(--c-text-sub) !important;
}
.card .m b {
  font-weight: 600; color: var(--c-text);
  border-bottom: 2px solid var(--c-yellow); padding-bottom: 1px;
}
.card h2 {
  margin: 10px 0 0 !important; padding: 0 !important; border: 0 !important;
  background: none !important; box-shadow: none !important;
  font-family: var(--font-head); font-weight: 900; color: var(--c-text) !important;
  font-size: 19px !important; line-height: 1.55; letter-spacing: .02em;
  font-feature-settings: "palt"; text-align: left !important;
}
.card p {
  margin: 8px 0 0 !important; font-size: 14px; line-height: 1.85; color: var(--c-text-sub) !important;
}
.card .go { margin-top: 12px !important; font-size: 12px; letter-spacing: .1em; color: var(--c-text-sub) !important; }
.more {
  margin: var(--sp-6) auto 0; display: block; width: 100%; max-width: 320px;
  text-align: center; border: 1px solid var(--c-text); border-radius: var(--radius);
  padding: 15px; font-weight: 600; font-size: 14px; letter-spacing: .06em;
  color: var(--c-text) !important; text-decoration: none !important; background: none;
}
.more.prev { margin-top: 12px; border-color: var(--c-line); color: var(--c-text-sub) !important; }
.empty { margin: 0 !important; color: var(--c-text-sub) !important; font-size: 15px; }

/* ── 記事ページの器 ── */
.art { padding: var(--sp-6) 0 var(--sp-12); }
.crumb {
  font-size: 11px !important; letter-spacing: .08em;
  color: var(--c-text-sub) !important; margin: 0 0 20px !important; line-height: 1.9;
}
.crumb a { color: var(--c-text-sub) !important; text-decoration: none !important; }
.art h1 {
  margin: 0 !important; padding: 0 !important; border: 0 !important;
  background: none !important; box-shadow: none !important;
  font-family: var(--font-head); font-weight: 900; color: var(--c-text) !important;
  font-size: clamp(24px, 5.6vw, 38px); line-height: 1.45; letter-spacing: .02em;
  font-feature-settings: "palt"; text-align: left !important;
}
.art .meta {
  margin: 16px 0 0 !important; display: flex; gap: 12px; align-items: center;
  font-size: 11px !important; letter-spacing: .1em; color: var(--c-text-sub) !important;
  padding-bottom: 20px; border-bottom: 1px solid var(--c-line); line-height: 1.9;
}
.art .meta b {
  font-weight: 600; color: var(--c-text);
  border-bottom: 2px solid var(--c-yellow); padding-bottom: 1px;
}
/* 本文の器は .swell-content-body 側（セクション2）で幅を決めている。
   ここでは記事タイトルとの間隔だけ足す。 */
.art .swell-content-body { margin-top: var(--sp-5); }

/* ── 記事末のCTA（テンプレートが出す。本文の外側なので .swell-content-body を付けない） ── */
.cta {
  margin-top: var(--sp-8); background: var(--c-white);
  border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: 28px 22px; text-align: center;
}
.cta b {
  display: block; font-family: var(--font-head); font-weight: 900;
  font-size: 19px; line-height: 1.5; color: var(--c-text);
}
.cta p {
  margin: 12px 0 0 !important; font-size: 14px; line-height: 1.9; color: var(--c-text-sub) !important;
}
.cta .btn {
  margin-top: 20px; display: inline-block;
  background: var(--c-yellow) !important; color: var(--c-text) !important;
  font-weight: 700; font-size: 15px; letter-spacing: .04em;
  padding: 15px 28px; border-radius: var(--radius);
  text-decoration: none !important; box-shadow: none !important;
}

/* ── あわせて読む（本文の末尾にある .rel を、CTAの後ろへ回して出している） ──
   wpautop が .rel の中の <a> を <p> でくるむので、その <p> の余白を消す。
   （.rel .lab のほうが詳細度が高いので、見出しの余白14pxは生き残る） */
.rel { margin-top: var(--sp-8); }
.rel p { margin: 0 !important; }
.rel .lab { margin: 0 0 14px !important; }
.rel a {
  display: block; border-top: 1px solid var(--c-line); padding: 16px 0;
  font-size: 15px; font-weight: 600; line-height: 1.6;
  color: var(--c-text) !important; text-decoration: none !important; box-shadow: none !important;
}
.rel a:last-child { border-bottom: 1px solid var(--c-line); }
.rel a i {
  display: block; font-style: normal; font-size: 11px;
  letter-spacing: .1em; color: var(--c-text-sub); margin-bottom: 6px;
}

/* ── フッター ── */
body.cb footer {
  background: var(--c-bg-dark) !important; color: #fff; padding: var(--sp-6) 0; display: block !important;
}
body.cb footer .in {
  max-width: var(--w-max); margin: 0 auto; padding: 0 var(--pad);
  display: flex; flex-wrap: wrap; gap: 18px 28px;
  align-items: center; justify-content: space-between;
}
body.cb footer b { font-family: var(--font-head); font-weight: 900; font-size: 14px; color: #fff; }
body.cb footer i {
  font-style: normal; font-size: 11px; letter-spacing: .1em;
  color: rgba(255,255,255,.6); display: block; margin-top: 4px;
}
body.cb footer nav { display: flex; gap: 18px; font-size: 12px; flex-wrap: wrap; }
body.cb footer nav a { color: rgba(255,255,255,.75) !important; text-decoration: none !important; }
body.cb footer small { font-size: 10px; letter-spacing: .08em; color: rgba(255,255,255,.5); }

/* ── 768px以上（PC）。基準は390pxのまま ── */
@media (min-width: 768px) {
  .grid { grid-template-columns: 1fr; }   /* 1列。カードの中で画像と文字を横に並べる */
  .card { padding: 28px 0; }
}

/* 受講生の引用。<blockquote class="q"><p>…</p><cite>誰</cite></blockquote> */
.body .q,.swell-content-body .q{margin-left:0;margin-right:0}
.body .q p,.swell-content-body .q p{margin:0 !important;font-size:15px;line-height:1.9}
.body .q .who,.swell-content-body .q .who{margin:8px 0 0 !important}
.body .q cite,.swell-content-body .q cite{display:block;font-style:normal;font-size:12px !important;color:var(--c-text-sub) !important;line-height:1.7 !important}
/* パンくず。<nav class="crumb"><ol><li>…</li></ol></nav> */
.crumb ol{display:flex;flex-wrap:wrap;gap:0;list-style:none;margin:0;padding:0}
.crumb li{display:inline}
.crumb li+li::before{content:" ／ ";white-space:pre}

/* ── アイキャッチ ──
   1200x630で作ってある。比率を固定して、切れないように置く。 */
.eyecatch{margin:var(--sp-5) 0 0;padding:0}
.eyecatch img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;border-radius:var(--radius)}
.card .th{display:block;margin:0 0 16px}
.card .th img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;border-radius:var(--radius)}
@media (min-width:768px){
  .card{display:grid;grid-template-columns:280px 1fr;gap:0 28px;align-items:start}
  .card .th{grid-row:1 / span 4;margin:0}
}

/* ── カテゴリのピル。スマホでは横スクロールではなく折り返す ── */
.cats{flex-wrap:wrap !important;overflow-x:visible !important;row-gap:8px}

/* ── 並び替え ── */
.sortbar{display:flex;gap:18px;margin:0 0 var(--sp-4);padding:0 var(--pad)}
.sortbar a{font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--c-text-sub) !important;
  text-decoration:none !important;padding:6px 0;border-bottom:2px solid transparent}
.sortbar a.on{color:var(--c-text) !important;border-bottom-color:var(--c-yellow)}