/* =========================================================
   sema-theme page-columns.css（「コラム一覧」固有）
   コンセプト＝「静かな編集室」。記事を商品カードのように並べず、雑誌の目次・編集された紙面の
   リズムで手渡す。記事タイトルを主役に、罫線・余白・段差・番号で整理する。
   3列カードグリッド／大型ヒーローバナー／全記事同一カード化はしない。画像頼みにしない。
   カテゴリー導線は大きなボタンの羅列ではなく索引・分類として見せる。
   共通土台（page.css）を継承。全クラス sema-col- プレフィックス（他ページのクラスは流用しない）。
   ========================================================= */

/* =========================================================
   導入面（このページ専用）：短い導入。編集の気配（細い罫）
   ========================================================= */
.sema-col-hero{
  background:var(--sema-ivory);
  border-bottom:1px solid var(--sema-line);
  padding:clamp(46px,6.8vw,90px) 0 clamp(24px,3.2vw,38px);
}
.sema-col-hero__inner{ position:relative; }
.sema-col-hero__kicker{
  display:block; width:34px; height:2px; background:var(--sema-sage); margin-bottom:1.1em;
}
.sema-col-hero__title{
  font-family:var(--sema-serif); font-weight:700;
  font-size:clamp(1.7rem, 3vw, 2.3rem); line-height:1.4; letter-spacing:.12em;
  margin:0; color:var(--sema-ink); text-wrap:balance;
}

/* =========================================================
   本文：中央に細くしすぎない読み幅
   ========================================================= */
.sema-col-body{ max-width:52rem; }

/* --- 導入リード（確定原稿・既存本文） --- */
.sema-col-body .sema-col-lead{ margin:0 0 clamp(38px,5.5vw,64px); }
.sema-col-body .sema-col-lead p{
  font-family:var(--sema-serif); font-size:clamp(1.06rem,1.6vw,1.2rem); line-height:1.95;
  letter-spacing:.04em; color:var(--sema-ink); margin:0; max-width:40rem;
}

/* =========================================================
   カテゴリー導線（確定原稿）：大きなボタンの羅列にせず、索引・分類として。
   PCは2列・スマホは1列（横スクロールなし）。記事数（現状0）は表示しない。
   ========================================================= */
.sema-col-body .sema-col-cats{ margin:0 0 clamp(48px,7vw,84px); }
.sema-col-body .sema-col-cats__head{
  display:flex; align-items:baseline; gap:.8em; margin:0 0 .5em;
}
.sema-col-body .sema-col-cats__head h2{
  font-family:var(--sema-serif); font-weight:600; font-size:clamp(1.24rem,2.3vw,1.5rem);
  line-height:1.45; letter-spacing:.06em; color:var(--sema-ink); margin:0;
}
.sema-col-body .sema-col-cats__intro{
  font-family:var(--sema-sans); font-size:.94rem; color:var(--sema-ink-soft); margin:0 0 clamp(16px,2.4vw,24px);
}
.sema-col-body .sema-col-cats__list{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:0 clamp(24px,3.5vw,48px);
  border-top:1px solid var(--sema-line-2);
}
.sema-col-body .sema-col-cat{
  display:flex; gap:.9em; padding:clamp(15px,2.2vw,20px) 0; border-bottom:1px solid var(--sema-line);
}
.sema-col-body .sema-col-cat__no{
  flex:0 0 auto; font-family:var(--sema-sans); font-size:.76rem; letter-spacing:.1em; color:var(--sema-bronze);
  padding-top:.35em;
}
.sema-col-body .sema-col-cat__main{ flex:1 1 auto; min-width:0; }
.sema-col-body .sema-col-cat__name{
  font-family:var(--sema-serif); font-weight:600; font-size:1.08rem; line-height:1.5; letter-spacing:.04em;
  color:var(--sema-ink); margin:0 0 .3em;
}
.sema-col-body .sema-col-cat__desc{
  font-family:var(--sema-sans); font-size:.86rem; line-height:1.75; color:var(--sema-ink-mute); margin:0 0 .5em;
}
.sema-col-body .sema-col-cat__link a{
  display:inline-flex; align-items:center; gap:.4em;
  font-family:var(--sema-sans); font-size:.86rem; letter-spacing:.04em; color:var(--sema-sage-deep); text-decoration:none;
}
.sema-col-body .sema-col-cat__link a::after{
  content:"\2192"; color:var(--sema-bronze); transition:margin .25s var(--sema-ease);
}
.sema-col-body .sema-col-cat__link a:hover{ color:var(--sema-bronze); text-decoration:underline; text-underline-offset:3px; }
.sema-col-body .sema-col-cat__link a:hover::after{ margin-left:.3em; }

/* =========================================================
   新着記事（確定原稿の見出し＋案内文）
   ========================================================= */
.sema-col-body .sema-col-latest{ margin:0; }
.sema-col-body .sema-col-latest__head{
  display:flex; align-items:baseline; gap:.8em;
  margin:0 0 .5em; padding-bottom:.55em; border-bottom:1.5px solid var(--sema-sage);
}
.sema-col-body .sema-col-latest__head h2{
  font-family:var(--sema-serif); font-weight:600; font-size:clamp(1.24rem,2.3vw,1.5rem);
  line-height:1.45; letter-spacing:.06em; color:var(--sema-ink); margin:0;
}
.sema-col-body .sema-col-latest__intro{
  font-family:var(--sema-sans); font-size:.94rem; color:var(--sema-ink-soft); margin:0 0 clamp(20px,3vw,30px);
}

/* =========================================================
   記事一覧：番号付きの編集目次（商品カード3列にしない）。タイトルが主役。
   画像あり・なしのどちらでも成立。先頭記事のみ一段強く（巨大ヒーローにしない）。
   ========================================================= */
.sema-col-body .sema-col-articles{ list-style:none; margin:0; padding:0; border-top:1px solid var(--sema-line-2); }
.sema-col-body .sema-col-article{
  position:relative;
  display:grid; grid-template-columns:auto 1fr; align-items:start; gap:clamp(14px,2.4vw,26px);
  padding:clamp(20px,2.8vw,30px) 0; border-bottom:1px solid var(--sema-line);
}
/* アイキャッチがある記事：番号｜画像（左）｜本文（タイトル） の3列。無い記事は上の2列（番号｜本文）でタイトルが広がる。 */
.sema-col-body .sema-col-article--has-media{ grid-template-columns:auto auto 1fr; }
.sema-col-body .sema-col-article--has-media .sema-col-article__body{ grid-column:3; }
/* 連番（装飾・aria-hidden） */
.sema-col-body .sema-col-article__num{
  grid-column:1; font-family:var(--sema-sans); font-size:.78rem; letter-spacing:.12em; color:var(--sema-bronze);
  padding-top:.4em;
}
/* 本文（カテゴリー・日付・タイトル） */
.sema-col-body .sema-col-article__body{ grid-column:2; min-width:0; }
.sema-col-body .sema-col-article__meta{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.4em .9em; margin:0 0 .45em;
}
.sema-col-body .sema-col-article__cat{
  font-family:var(--sema-sans); font-size:.78rem; letter-spacing:.06em; color:var(--sema-sage-deep);
}
.sema-col-body .sema-col-article__date{
  font-family:var(--sema-sans); font-size:.78rem; letter-spacing:.06em; color:var(--sema-ink-mute);
}
.sema-col-body .sema-col-article__title{
  font-family:var(--sema-serif); font-weight:600; font-size:clamp(1.1rem,1.9vw,1.28rem);
  line-height:1.55; letter-spacing:.03em; color:var(--sema-ink); margin:0; overflow-wrap:break-word;
}
.sema-col-body .sema-col-article__title a{ color:inherit; text-decoration:none; }
/* カード全体をクリック可能に（アクセシブルネームはタイトルのみ＝ストレッチリンク） */
.sema-col-body .sema-col-article__title a::after{ content:""; position:absolute; inset:0; }
.sema-col-body .sema-col-article__title a:hover{ color:var(--sema-sage-deep); text-decoration:underline; text-underline-offset:3px; }
/* アイキャッチ（任意）：無い記事は列ごと省略され、タイトルが広がる */
.sema-col-body .sema-col-article__media{
  grid-column:2; width:clamp(96px,15vw,150px); aspect-ratio:4 / 3; overflow:hidden;
  background:var(--sema-greige); border:1px solid var(--sema-line);
}
.sema-col-body .sema-col-article__media img{ width:100%; height:100%; object-fit:cover; display:block; }
/* アイキャッチのCSSプレースホルダー（画像未設定時／モックの画像面） */
.sema-col-body .sema-col-article__media--ph{
  background:
    linear-gradient(135deg, var(--sema-greige), var(--sema-paper));
}

/* --- 先頭記事（--lead）：一段強く。タイトル大＋やや広い余白。巨大ヒーローにしない --- */
.sema-col-body .sema-col-article--lead{ padding-top:clamp(6px,1vw,10px); }
.sema-col-body .sema-col-article--lead .sema-col-article__title{ font-size:clamp(1.2rem,2.2vw,1.5rem); line-height:1.5; }
.sema-col-body .sema-col-article--lead .sema-col-article__media{ width:clamp(120px,20vw,210px); }

/* =========================================================
   少数記事・0件時の案内（確定原稿を使う場合のみ／モック内で明示）
   ========================================================= */
.sema-col-body .sema-col-note{
  margin:clamp(20px,3vw,28px) 0 0; font-family:var(--sema-sans); font-size:.92rem; line-height:1.85;
  color:var(--sema-ink-soft);
}

/* =========================================================
   記事0件時の空状態（template-parts/columns/mock-list.php を置換）。
   「新着記事」見出しの下に、記事一覧と同じ位置（上罫）へ静かに収める。明朝を維持し、
   準備中を過度に強調せず、今後追加される余白を感じる控えめな余白・中央寄せにする。
   ========================================================= */
.sema-col-body .sema-col-empty{
  border-top:1px solid var(--sema-line-2);
  padding:clamp(46px,8vw,84px) 0;
  text-align:center;
}
.sema-col-body .sema-col-empty__title{
  font-family:var(--sema-serif); font-weight:700;
  font-size:clamp(1.16rem,2.4vw,1.4rem); line-height:1.6; letter-spacing:.06em;
  color:var(--sema-ink); margin:0 0 .9em;
}
.sema-col-body .sema-col-empty__text{
  font-family:var(--sema-serif); /* 明朝維持 */
  font-size:1rem; line-height:2; letter-spacing:.04em;
  color:var(--sema-ink-soft); margin:0 auto; max-width:34rem;
}
@media (max-width:767px){
  .sema-col-body .sema-col-empty__text{ font-size:.96rem; line-height:1.95; text-align:left; }
}

/* --- デザイン確認用モックの目印（画面上でも仮であることが分かる） --- */
.sema-col-body .sema-col-mock-flag{
  margin:0 0 clamp(14px,2vw,20px); padding:.5em .8em;
  font-family:var(--sema-sans); font-size:.76rem; letter-spacing:.04em; color:var(--sema-ink-soft);
  background:repeating-linear-gradient(45deg, var(--sema-paper), var(--sema-paper) 8px, var(--sema-ivory) 8px, var(--sema-ivory) 16px);
  border:1px dashed var(--sema-bronze);
}

/* =========================================================
   ページ末尾の補助導線（確定原稿）：CTAカードにせず、一覧の終わりとして静かに閉じる
   ========================================================= */
.sema-col-body .sema-col-more{
  margin:clamp(44px,6vw,72px) 0 0; padding-top:clamp(26px,3.6vw,38px); border-top:1px solid var(--sema-line);
}
.sema-col-body .sema-col-more p{
  font-family:var(--sema-sans); font-size:.94rem; line-height:1.9; color:var(--sema-ink-soft); margin:0;
}
.sema-col-body .sema-col-more a{
  color:var(--sema-sage-deep); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px;
}
.sema-col-body .sema-col-more a:hover{ color:var(--sema-bronze); }

/* =========================================================
   ページ番号式ページネーション（実投稿13件以上のときのみ出力）
   既存トーンの静かな番号列。大きな角丸ボタンの羅列にしない。横スクロールを出さない。
   現在ページは WordPress が aria-current="page" を付与（the_posts_pagination）。
   ========================================================= */
.sema-col-body .sema-col-pagination{ margin:clamp(32px,4.5vw,52px) 0 0; padding-top:clamp(22px,3vw,30px); border-top:1px solid var(--sema-line); }
.sema-col-body .sema-col-pagination .nav-links{ display:flex; flex-wrap:wrap; gap:.4em; align-items:center; justify-content:center; }
.sema-col-body .sema-col-pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center; min-width:2.2em; padding:.5em .72em;
  font-family:var(--sema-sans); font-size:.86rem; letter-spacing:.04em; line-height:1;
  color:var(--sema-sage-deep); text-decoration:none; border:1px solid var(--sema-line-2); border-radius:2px;
  transition:border-color .2s var(--sema-ease), background-color .2s var(--sema-ease);
}
.sema-col-body .sema-col-pagination a.page-numbers:hover{ border-color:var(--sema-sage); background:var(--sema-paper); }
.sema-col-body .sema-col-pagination .page-numbers.current{ color:#fff; background:var(--sema-sage-deep); border-color:var(--sema-sage-deep); }
.sema-col-body .sema-col-pagination .page-numbers.dots{ border-color:transparent; color:var(--sema-ink-mute); }

/* =========================================================
   スマホ：単純な縦積みのなぞりにしない。早く一覧へ到達／タイトルを主役に保ち、
   画像は小さく、番号・余白でリズムをつくる。横スクロールを出さない。
   ========================================================= */
@media (max-width:767px){
  .sema-col-body{ max-width:none; }
  /* カテゴリー導線は1列に */
  .sema-col-body .sema-col-cats__list{ grid-template-columns:1fr; }
  /* 記事：番号＋本文（タイトル主役）を上段、画像は右の小サムネで詰まらせない */
  .sema-col-body .sema-col-article{
    grid-template-columns:auto 1fr; column-gap:.9em; row-gap:.6em; padding:18px 0;
  }
  .sema-col-body .sema-col-article__body{ grid-column:2; }
  /* アイキャッチありは、トップの新着記事と同じ「画像左・タイトル右」。番号｜画像(1fr)｜本文(2fr)。 */
  .sema-col-body .sema-col-article--has-media{ grid-template-columns:auto 1fr 2fr; column-gap:14px; align-items:start; }
  .sema-col-body .sema-col-article--has-media .sema-col-article__media{
    grid-column:2; grid-row:auto; width:100%; max-width:none; aspect-ratio:4 / 3; margin:0;
  }
  .sema-col-body .sema-col-article--has-media .sema-col-article__body{ grid-column:3; }
  .sema-col-body .sema-col-article__title{ font-size:1.1rem; }
  .sema-col-body .sema-col-article--lead .sema-col-article__title{ font-size:1.28rem; }
  /* 「画像左・タイトル右」の右カラムは幅が狭いため、タイトルはトップ同様に詰める（先頭記事も同じ） */
  .sema-col-body .sema-col-article--has-media .sema-col-article__title{ font-size:1.05rem; line-height:1.55; }
}

/* 動きの抑制設定を尊重 */
@media (prefers-reduced-motion:reduce){
  .sema-col-body .sema-col-cat__link a::after{ transition:none; }
}