@charset "UTF-8";
/**
 * column-single.css — コラム記事ページ（single-column.php）専用
 *
 * 読み込み条件は functions.php セクション2（common.css の後に読む）。
 *
 * ■ ここに書くもの／書かないもの
 *   書く    … 記事の枠（.column-article）とその中の見出し・メタ行・アイキャッチ・前後導線
 *   書かない… 本文の体裁（.single__body の見出し・段落・リスト・表）は common.css 469行〜が正本。
 *             ヒーロー帯（.page-title）・タグ（.tag-icon）・ボタン（.btn--4 / .btn--5）・
 *             矢印（.ar--2 系）も common.css の共通コンポーネントをそのまま流用する。
 *
 * ■ 数値の作り方
 *   カンプ幅 1440px 基準のリキッド。clamp(最小, 実測px ÷ 14.4 vw, 実測px) で 1440px 時に実測値へ一致。
 *   固定値は「固定でないと整わない箇所」だけに使い、その場で理由を書く。
 *   メディアクエリは max-width の単独指定（下の帯へ継承させるため min-width で下限を切らない）。
 */

/* =============================================================
   1. 記事の枠
   ============================================================= */

/* 1行の文字数を読みやすい範囲に抑えるための読み物幅。
   ここは固定値が正しい（vw にすると広い画面ほど1行が長くなり、
   本文の可読性が落ちる。コンテナの max-width は固定という全案件共通の取り決め）。 */
.column-article {
  max-width: 72rem;
  margin-inline: auto;
}


/* =============================================================
   2. メタ行（カテゴリータグ＋日付）
   ============================================================= */
.column-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.2rem, 1.11vw, 1.6rem);
}

/* .tag-icon は span 想定のコンポーネントのため、リンクにした分だけ足す */
.column-article__cat {
  text-decoration: none;
  transition: var(--transition);
}
.column-article__cat:hover {
  background: var(--color_main_dark);
}

.column-article__date {
  font-family: var(--font_eng);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .05em;
  color: var(--color_muted);
}


/* =============================================================
   3. タイトル
   ============================================================= */
.column-article__title {
  margin-top: clamp(1.6rem, 1.67vw, 2.4rem);
  font-size: clamp(2.4rem, 2.22vw, 3.2rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
}


/* =============================================================
   4. アイキャッチ（本文の前）
   ============================================================= */
.column-article__thumb {
  margin: clamp(2.4rem, 2.78vw, 4rem) 0 clamp(3.2rem, 3.33vw, 4.8rem);
}
.column-article__thumb img {
  margin-inline: auto; /* 記事幅より小さい画像は中央に置く */
}


/* =============================================================
   5. 記事フット（前の記事｜一覧へ戻る｜次の記事）
   前後が無い側も枠だけ残すので、3列のまま「一覧へ戻る」が中央に留まる。
   ============================================================= */
.column-article__nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(1.2rem, 1.67vw, 2.4rem);
  margin-top: clamp(4rem, 5.56vw, 8rem);
}

/* min-width: 0 が無いと 1fr の下限が中のボタンの幅（160px）に張り付き、
   360px 以下の端末で枠から右へはみ出す（実測 320px 幅で +12px） */
.column-article__nav-item {
  display: flex;
  min-width: 0;
}
.column-article__nav-item--prev {
  justify-content: flex-start;
}
.column-article__nav-item--list {
  justify-content: center;
}
.column-article__nav-item--next {
  justify-content: flex-end;
}

/* ボタンは共通コンポーネント既定の 185×52。実インスタンス幅はセクション側で
   上書きしてよい取り決め（common.css 610行〜の記述）に従い、3つ並べても
   記事幅に収まるよう縮む側に振っている。max-width は枠より広くならないための保険。 */
.column-article__nav-btn {
  width: clamp(16rem, 12.85vw, 18.5rem);
  max-width: 100%;
}

/* 「前の記事」だけ矢印を左向き・左寄せにする。共通の矢印 SVG（.ar--2）を180度回して使う。
   矢印は translateY(-50%) で縦中央にしているため、回転は1つの transform にまとめる
   （common.css 602行の注意書き）。padding は左右を入れ替えて矢印分の余白を左に持ってくる。 */
.column-article__nav-btn--prev {
  padding: 0 2rem 0 3rem;
}
.column-article__nav-btn--prev .ar--2 {
  right: auto;
  left: .8rem;
  transform: translateY(-50%) rotate(180deg);
}


/* =============================================================
   6. SP（375px カンプ相当）
   前後を上段に横並び、「一覧へ戻る」を下段中央に置く。
   ============================================================= */
@media (max-width: 768px) {
  .column-article__nav {
    grid-template-columns: 1fr 1fr;
  }
  .column-article__nav-item--prev {
    grid-row: 1;
    grid-column: 1;
  }
  .column-article__nav-item--next {
    grid-row: 1;
    grid-column: 2;
  }
  .column-article__nav-item--list {
    grid-row: 2;
    grid-column: 1 / -1;
  }
  .column-article__nav-btn {
    width: 16rem;
  }
}