/**
 * コラム（CPT column）共通CSS — トップの新着欄・一覧／カテゴリ一覧・詳細
 *
 * 2026-10-31 tag 20261031a 新設。enqueue は inc/assets-pages-cpt.php（トップ・/column/・/column/topic/・/column/{slug}/）。
 * 一覧・詳細の器はお知らせと同じ（news-archive.css／news-detail.css を併読）。ここはコラム固有の部品だけ。
 *
 * 見た目の参考＝R+house山口のトップのコラム欄・/columns（ディレクター指示）：
 *   2列のリスト／左に正方形のサムネイル（アイキャッチ）／カテゴリの丸タグ＋日付／タイトル／点線の区切り。
 * 丸タグはサイト共通の規則（2026-11-01 P189②＝A「タグ＝丸」・design-system.css［20261101d］）。
 * ⚠️ 丸ボタン（カテゴリの絞り込み .col-tabs__link）と点線はコラムだけの例外（ディレクター指示・docs/19 P189①）。
 *    角を戻すときは下の --col-radius を 0 に、点線を戻すときは --col-rule-style を solid にするだけ。
 *
 * @package idworks
 */

:root{
  --col-radius: 999px;
  --col-rule-style: dashed;
  --col-thumb: 96px;   /* SP */
}
@media(min-width:768px){
  :root{ --col-thumb: 128px; }
}

/* ============================================================================
   1. 記事の行（parts/column-item.php）
   ---------------------------------------------------------------------------- */
.col-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);}
@media(min-width:1024px){
  .col-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap-5);}
}
.col-list__item{border-bottom:1px var(--col-rule-style) var(--c-line-dark);}
.col-list__link{
  display:grid;grid-template-columns:var(--col-thumb) minmax(0,1fr);column-gap:20px;align-items:start;
  padding:24px 0;text-decoration:none;color:var(--c-text);
}
@media(min-width:768px){
  .col-list__link{column-gap:28px;padding:36px 0 40px;}
}
.col-list__thumb{display:block;width:var(--col-thumb);aspect-ratio:1/1;overflow:hidden;background:var(--c-ph);}
.col-list__thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.36,1);}
.col-list__link:hover .col-list__thumb img,
.col-list__link:focus-visible .col-list__thumb img{transform:scale(1.05);}
.col-list__body{display:block;min-width:0;}
.col-list__meta{display:flex;align-items:center;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;margin-bottom:12px;}
/* カテゴリの丸タグ（一覧の行・詳細のメタで共通）。最長「暮らしのメンテナンス」10字が1行に収まる幅 */
.col-list__tag{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:min(9.5em,100%);padding:3px 14px;box-sizing:border-box;
  border:1px solid var(--c-line-dark);border-radius:var(--col-radius);background:var(--c-bg);
  font-size:var(--fs-micro);line-height:1.6;letter-spacing:.1em;color:var(--c-text-label);
  white-space:nowrap;text-decoration:none;
}
.col-list__date{font-family:var(--ff-en);font-size:var(--fs-caption);letter-spacing:.06em;color:var(--c-text-sub);font-variant-numeric:tabular-nums;}
.col-list__title{
  display:block;font-size:var(--fs-body);font-weight:var(--fw-normal);
  line-height:1.8;letter-spacing:var(--ls-body);
}
@media(min-width:768px){
  .col-list__title{font-size:var(--fs-lead);}
}

/* ============================================================================
   2. トップの新着欄（front-page.php・DESIGN／PERFORMANCE の入口の直後）
   ---------------------------------------------------------------------------- */
.col-home{background:var(--c-bg-sub);}
.col-home .col-list{max-width:1180px;margin:var(--sp-5) auto 0;}
/* 1行目の上に罫線を引かない（R+house と同じ・行の下だけ点線） */

/* ============================================================================
   3. 一覧／カテゴリ一覧（parts/column-archive.php）
   ---------------------------------------------------------------------------- */
.col-archive .col-list{max-width:1180px;margin:0 auto;}
/* カテゴリの丸ボタン（R+house /columns「すべて／注文住宅／新築…」）。現在地＝塗り */
.col-tabs{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px;max-width:1080px;margin:0 auto var(--sp-5);padding:0;}
.col-tabs__link{
  display:inline-flex;align-items:center;justify-content:center;min-width:min(160px,100%);box-sizing:border-box;
  padding:9px 24px;border:1px solid var(--c-line-dark);border-radius:var(--col-radius);background:var(--c-bg);
  font-size:var(--fs-caption);letter-spacing:.1em;line-height:1.6;color:var(--c-text);text-decoration:none;
  transition:background-color .3s,border-color .3s,color .3s;
}
.col-tabs__link:hover{border-color:var(--c-btn);}
.col-tabs__link.is-current{background:var(--c-btn);border-color:var(--c-btn);color:var(--c-btn-text);}
@media(max-width:767px){
  .col-tabs{gap:8px;justify-content:flex-start;}
  .col-tabs__link{min-width:0;padding:6px 16px;}
}
.col-empty{text-align:center;color:var(--c-text-sub);}

/* ============================================================================
   4. 詳細（single-column.php）
   ---------------------------------------------------------------------------- */
/* メタのカテゴリ札（お知らせの角札 .article__cat の代わりに一覧と同じ丸タグ・カテゴリ一覧へのリンク） */
.article__meta .col-list__tag{min-width:0;}
.article__meta .col-list__tag:hover{border-color:var(--c-btn);color:var(--c-text);}

/* この記事の要点（ACF column_summary） */
.col-summary{margin:0 0 48px;padding:24px 24px 22px;border:1px solid var(--c-line);background:var(--c-bg-soft);}
@media(min-width:768px){ .col-summary{padding:28px 36px 26px;} }
.col-summary__label{margin:0 0 10px;font-size:var(--fs-caption);letter-spacing:.14em;color:var(--c-text-sub);}
.col-summary__list{list-style:none;margin:0;padding:0;}
.col-summary__list li{position:relative;padding-left:1.2em;font-size:var(--fs-body);line-height:1.9;letter-spacing:var(--ls-body);}
.col-summary__list li::before{content:"";position:absolute;left:0;top:.85em;width:6px;height:6px;background:var(--c-text);}
.col-summary__list li + li{margin-top:6px;}

/* 本文の組版（ブロックエディタの出力）。お知らせの .article__body（段落・箇条書き・リンク）に、見出し・写真・表・引用・脚注を足す */
.col-body > *:first-child{margin-top:0;}
.col-body h2{
  margin:72px 0 24px;padding-top:24px;border-top:1px solid var(--c-line);
  font-size:var(--fs-h3-lg);font-weight:500;line-height:1.7;letter-spacing:var(--ls-2);
}
@media(min-width:768px){ .col-body h2{font-size:22px;margin-top:88px;} }
.col-body h3{margin:48px 0 16px;font-size:var(--fs-lead);font-weight:500;line-height:1.8;letter-spacing:var(--ls-2);}
.col-body ol{margin:0 0 var(--c1-para-gap) 1.6em;font-size:var(--fs-body);line-height:var(--lh-body);}
.col-body li + li{margin-top:4px;}
.col-body figure{margin:48px 0;}
.col-body figure img,.col-body .wp-block-image img{display:block;width:100%;height:auto;}
.col-body figcaption,.col-body .wp-element-caption{margin-top:10px;font-size:var(--fs-note);line-height:1.8;letter-spacing:.06em;color:var(--c-text-note);text-align:left;}
.col-body .wp-block-table{overflow:visible;margin:48px 0;}
/* 5列以上の表（1-4 の断熱タイプ表＝6列）は SP で収まらず右端の列が画面外で切れていた（2026-11-03 tag 20261103b）＝SP だけ表の箱を横スクロールにし、表は読める幅を確保する */
@media(max-width:767px){ .col-body .wp-block-table{overflow-x:auto;-webkit-overflow-scrolling:touch;} .col-body table:has(tr > :nth-child(5)){min-width:560px;} }
.col-body .wp-block-table thead{border-bottom:0;}
.col-body .wp-block-table tfoot{border-top:0;}
.col-body table{width:100%;border-collapse:collapse;font-size:var(--fs-body-sm);line-height:1.8;letter-spacing:.04em;}
.col-body th,.col-body td{padding:12px 12px;border:1px solid var(--c-line);text-align:left;vertical-align:top;}
/* 1列目（部位・項目名）は折り返さない＝自動レイアウトで1字ずつ縦に割れるのを防ぐ（原稿の表は2〜4列・1列目は短い語） */
.col-body tr > :first-child{white-space:nowrap;}
.col-body thead th,.col-body th{background:var(--c-bg-soft);font-weight:500;}
@media(max-width:767px){ .col-body table{font-size:var(--fs-caption);} .col-body th,.col-body td{padding:10px 8px;} }
.col-body blockquote{margin:40px 0;padding:4px 0 4px 20px;border-left:2px solid var(--c-line-dark);color:var(--c-text-sub);}
.col-body blockquote p:last-child{margin-bottom:0;}
.col-body .wp-block-embed{margin:48px 0;}
.col-body .wp-block-embed iframe{max-width:100%;}
.col-body .wp-block-separator{margin:56px 0;border:0;border-top:1px solid var(--c-line);}
/* 脚注（ブロックエディタの脚注＝sup.fn ＋ ol.wp-block-footnotes） */
.col-body sup.fn{font-size:.72em;line-height:1;vertical-align:super;margin-left:2px;}
.col-body sup.fn a{text-decoration:none;}
.col-body .wp-block-footnotes{margin:72px 0 0 0;padding:24px 0 0 1.6em;border-top:1px solid var(--c-line);font-size:var(--fs-note);line-height:1.9;color:var(--c-text-sub);}

/* 執筆者（本文の後・2026-11-01 tag 20261101e）。顔写真は円で切り抜く（顔が上寄りの写真が多いので少し上を基準に） */
.col-author{margin:72px 0 0;padding:28px 0 0;border-top:1px solid var(--c-line);}
.col-author__label{margin:0 0 18px;font-size:var(--fs-caption);letter-spacing:.14em;color:var(--c-text-sub);}
.col-author__body{display:flex;align-items:center;gap:20px;}
.col-author__photo{flex:0 0 88px;width:88px;aspect-ratio:1/1;border-radius:50%;overflow:hidden;background:var(--c-ph);}
.col-author__photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 25%;}
.col-author__text{min-width:0;}
.col-author__role{margin:0 0 4px;font-size:var(--fs-caption);letter-spacing:.08em;line-height:1.7;color:var(--c-text-sub);}
.col-author__name{margin:0;font-size:var(--fs-lead);font-weight:500;letter-spacing:var(--ls-2);line-height:1.6;}
.col-author__en{display:block;margin-top:2px;font-family:var(--ff-en);font-size:var(--fs-caption);font-weight:var(--fw-normal);letter-spacing:.12em;color:var(--c-text-sub);}
.col-author__quals{list-style:none;display:flex;flex-wrap:wrap;gap:4px 14px;margin:10px 0 0;padding:0;font-size:var(--fs-caption);line-height:1.7;letter-spacing:.06em;color:var(--c-text-label);}
@media(min-width:768px){
  .col-author__body{gap:28px;}
  .col-author__photo{flex-basis:120px;width:120px;}
}
.col-author + .col-next{margin-top:48px;}

/* 次に読む（記事の下に1本） */
.col-next{margin:72px 0 0;padding:28px 0 0;border-top:1px solid var(--c-text);}
.col-next__label{display:flex;align-items:baseline;gap:14px;margin:0;font-size:var(--fs-body-sm);letter-spacing:.14em;}
.col-next__en{font-family:var(--ff-en);font-size:var(--fs-caption);letter-spacing:.22em;color:var(--c-text-sub);}
.col-list--single{grid-template-columns:minmax(0,1fr) !important;}
.col-list--single .col-list__item{border-bottom:0;}
.col-list--single .col-list__link{padding-bottom:0;}

/* 関連記事（同じカテゴリ） */
.col-related{background:var(--c-bg-sub);}
.col-related .section__inner > .col-list{max-width:1180px;margin:0 auto;}
.col-related__title{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:4px 16px;
  margin:0 0 var(--sp-4);font-size:var(--fs-h3-lg);font-weight:500;letter-spacing:var(--ls-2);text-align:center;
}
.col-related__en{flex-basis:100%;font-family:var(--ff-en);font-size:var(--fs-caption);font-weight:var(--fw-normal);letter-spacing:.22em;color:var(--c-text-sub);}
.col-related__topic{font-size:var(--fs-caption);font-weight:var(--fw-normal);letter-spacing:.1em;color:var(--c-text-sub);}
.col-related__topic{flex-basis:100%;} /* RELATED／関連記事／カテゴリ名を1行ずつ（2026-11-03 tag 20261103c） */
.col-related__foot{display:flex;flex-direction:column;align-items:center;gap:16px;}

/* 本文末の相談ボタン（.col-cta＝コラム原稿の CTA・2026-11-02 tag 20261102c）。2つ並ぶときに枠が接しないよう間隔をとる */
.col-body .col-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin:40px 0 0;}
/* CTA の直前の一文も中央に（2026-11-03 tag 20261103c） */
.col-body p:has(+ .col-cta){text-align:center;}
.col-body .col-cta .btn{margin:0;}