@charset "UTF-8";
/* ============================================================
   column.css — コラム記事
   担当スレッド：白系：施工実績・コラムの調整
   読み込み：コラム記事（投稿の詳細ページ）
   2026-09-29 追加CSSから中身を変えずに移設（白系：基盤）。
   ============================================================ */


/* ============================================================
   COLUMN 記事 共通フォーマット  対象: .single-post
   2026-09-23 改訂：タイトル〜要点、要点〜本文、H2上下の余白を圧縮
   ------------------------------------------------------------
   01 タイトル周り
   02 見出し（H2=章 / H3=節 / H4=定型パーツ専用ラベル）
   03 定型パーツ（この記事の要点 / 定義 / 出典 / 関連記事）
   04 本文要素（段落・強調・リスト・表・リンク）
   05 スマートフォン
   ------------------------------------------------------------
   注意1: 日本語コメントは必ず半角の閉じ記号で閉じること。
          閉じ忘れると以降のルールがまるごと無効になる。
   注意2: 見出しの装飾は、カスタマイザーの「見出しデザイン」を
          H2/H3/H4とも「装飾なし」にしたうえで、このCSSで作る。
          02冒頭のリセットは、設定を変え忘れた場合の保険。
   注意3: 余白は em 指定。フォントサイズに追従させるため、
          値を変えるときは上下のバランスを見ながら 0.2em 刻みで。
   ============================================================ */


/* ===== 01 タイトル周り ===================================== */

.single-post .c-postTitle{ margin-bottom:.6rem !important; }
.single-post .c-postTitle__ttl{ font-size:1.75rem; line-height:1.5; }
.single-post .p-articleMetas{ margin-bottom:.4rem !important; }

/* タイトル〜本文先頭（この記事の要点）の間隔 */
.single-post .post_content{ margin-top:.6rem !important; }
.single-post .post_content > *:first-child{ margin-top:0 !important; }

/* SWELLがタイトル下に入れる余白の打ち消し（テーマ更新時の保険） */
.single-post .l-articleTop{ margin-bottom:.6rem !important; }


/* ===== 02 見出し =========================================== */

/* SWELL見出しプリセットの打ち消し（保険） */
.single-post .post_content h2,
.single-post .post_content h3,
.single-post .post_content h4{
  background:none !important; border:none !important;
  padding:0 !important; border-radius:0 !important;
}
.single-post .post_content h2::before,
.single-post .post_content h2::after,
.single-post .post_content h3::before,
.single-post .post_content h3::after,
.single-post .post_content h4::before,
.single-post .post_content h4::after{ display:none !important; }

/* H2＝章。このページで唯一の強い装飾（左のレンガ色の縦棒） */
.single-post .post_content h2{
  font-size:1.35rem; line-height:1.5; font-weight:600;
  margin:2em 0 .8em !important;
  padding-left:.7em !important;
  border-left:4px solid var(--color_main,#b5754a) !important;
}

/* 定型パーツ（要点の帯）直後に来る最初のH2は、さらに詰める */
.single-post .post_content h4:has(+ ul) + ul + h2{ margin-top:1.4em !important; }
.single-post .post_content > *:first-child + h2{ margin-top:1.4em !important; }

/* H3＝節。細い罫線だけの控えめな見出し */
.single-post .post_content h3{
  font-size:1.1rem; line-height:1.6; font-weight:600;
  margin:1.8em 0 .7em !important;
  padding-bottom:.3em !important;
  border-bottom:1px solid #e0d9cf !important;
}

/* H2の直後にH3が来る場合は、間を詰める */
.single-post .post_content h2 + h3{ margin-top:1em !important; }

/* H4＝定型パーツのラベル。装飾しない */
.single-post .post_content h4{
  font-size:.95rem; line-height:1.6; font-weight:600;
  color:#5f574e;
  margin:1.8em 0 .5em !important;
}


/* ===== 03 定型パーツ ======================================= */

/* 「この記事の要点」「関連記事」＝ H4＋箇条書き を一つの帯にまとめる */
.single-post .post_content h4:has(+ ul),
.single-post .post_content h4:has(+ ul) + ul{
  background:#f4f1ec;
}
.single-post .post_content h4:has(+ ul){
  margin:0 !important;
  padding:.9em 1.5em .1em !important;
}
.single-post .post_content h4:has(+ ul) + ul{
  margin:0 0 1.6em !important;
  padding:.2em 1.5em 1em 2.8em !important;
  font-size:.95rem;
}
.single-post .post_content h4:has(+ ul) + ul li{ margin-bottom:.3em; line-height:1.8; }
.single-post .post_content h4:has(+ ul) + ul li:last-child{ margin-bottom:0; }

/* 記事末尾の「関連記事」は、本文から少し離す */
.single-post .post_content h2 ~ h4:has(+ ul){ margin-top:2.2em !important; }

/* 「定義」＝ H4＋引用ブロック */
.single-post .post_content blockquote{
  margin:0 0 1.8em !important;
  padding:1em 1.4em !important;
  background:#f4f1ec; border:none !important;
  border-left:3px solid var(--color_main,#b5754a) !important;
  font-size:1rem;
}
.single-post .post_content blockquote p:last-child{ margin-bottom:0 !important; }
.single-post .post_content blockquote::before,
.single-post .post_content blockquote::after{ display:none !important; }

/* 「出典」＝ H4＋番号付きリスト。小さく、控えめに */
.single-post .post_content h4:has(+ ol) + ol{
  font-size:.85rem; line-height:1.7; color:#6f6862;
  margin:0 0 1.6em !important; padding-left:1.6em !important;
}
.single-post .post_content h4:has(+ ol) + ol li{ margin-bottom:.2em; }


/* ===== 04 本文要素 ========================================= */

/* 段落（行間は変更しない。段落間だけ整える） */
.single-post .post_content p{ margin:0 0 1.3em !important; }

/* 見出し直後の段落は、上の余白を持たせない */
.single-post .post_content h2 + p,
.single-post .post_content h3 + p{ margin-top:0 !important; }

/* 強調は太字のみ。マーカー・色は使わない */
.single-post .post_content strong{ font-weight:600; background:none !important; }

/* 本文中の箇条書き（定型パーツ以外） */
.single-post .post_content ul:not(h4 + ul),
.single-post .post_content ol:not(h4 + ol){
  margin:0 0 1.5em !important; padding-left:1.6em !important;
}
.single-post .post_content li{ margin-bottom:.4em; line-height:1.9; }

/* 表：数値・比較用。罫線は水平のみ */
.single-post .post_content table{
  margin:0 0 1.8em !important; font-size:.92rem; width:100%;
  border-collapse:collapse;
}
.single-post .post_content th,
.single-post .post_content td{
  padding:.6em .9em !important;
  border:none !important; border-bottom:1px solid #e0d9cf !important;
  text-align:left;
}
.single-post .post_content thead th{
  background:#f4f1ec; font-weight:600;
  border-bottom:2px solid #d8cfc2 !important;
}

/* 本文中のリンク */
.single-post .post_content a{
  color:var(--color_main,#b5754a);
  text-decoration:underline; text-underline-offset:.2em;
}

/* 空の段落（Markdown貼り付け時に混入しがち）を潰す */
.single-post .post_content p:empty{ display:none !important; }

/* 1行の文字数を抑えたい場合は、次の3行のコメントを外す
.single-post .post_content{ max-width:42em; }
.single-post .post_content > table{ max-width:none; }
*/


/* ===== 05 スマートフォン =================================== */

@media (max-width:600px){
  .single-post .c-postTitle__ttl{ font-size:1.3rem; }
  .single-post .post_content h2{ font-size:1.15rem; margin-top:1.8em !important; }
  .single-post .post_content h3{ font-size:1.02rem; margin-top:1.6em !important; }
  .single-post .post_content h4:has(+ ul){ padding:.9em 1.1em .1em !important; }
  .single-post .post_content h4:has(+ ul) + ul{ padding:.2em 1.1em 1em 2.2em !important; }
  .single-post .post_content blockquote{ padding:.9em 1.1em !important; }
  .single-post .post_content table{ font-size:.86rem; }
  .single-post .post_content p{ margin-bottom:1.2em !important; }
}