@charset "UTF-8";
/**
 * column.css — コラム一覧（archive-column.php / taxonomy-column_cat.php）
 *
 * トップページのコラムセクション（template-parts/top/column.php）でも読み込む。
 * 使うのは .column-card 一式だけで、絞り込み・一覧グリッドは使わない
 * （トップ側は .top-column__list＝top.css で3列を持つ。.column-list を使うと
 *   1023px 以下で2列になり3枚が「2枚＋1枚」に割れる）。
 *
 * 一覧まわりだけを持つ。使い回しの効くもの（ヒーロー帯 .page-title / タグ .tag-icon /
 * ページ送り .pagination / セクション枠 .section）は common.css 側にあるので
 * このファイルでは再定義しない。
 *
 * 1rem = 10px（html{font-size:62.5%}）。
 * 寸法はカンプ幅 1440px 基準の可変指定（clamp の vw 値は「1440px のときの px 値」に一致する）。
 * 固定値を使った箇所は、その行に理由をコメントで残している。
 * ブレイクポイントは max-width の単独指定（下の帯へ継承させる）。
 */

/* -----------------------------------------------------------------------------
 * カテゴリー絞り込み（すべて＋コラムカテゴリー3件）
 * 見た目は共通ボタン .btn--3（白地＋1px 線・高さ40px）に寄せるが、
 * 幅100%・中央寄せ・矢印なしと条件が違うため .btn--3 は使わず独立に持つ。
 * -------------------------------------------------------------------------- */
.column-filter {
  margin-bottom: clamp(3rem, 3.47vw, 5rem);
}

.column-filter__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.8rem, .69vw, 1rem);
}

.column-filter__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 4rem; /* 固定：共通ボタン .btn--3 と同じ高さ。折り返しても潰れないよう下限として持つ */
  padding: .8rem clamp(1rem, 1.39vw, 2rem);
  background: #fff;
  border: 1px solid var(--color_line); /* 固定：1px の罫線 */
  color: var(--color_dark);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .05em;
  text-align: center;
  text-decoration: none;
  transition: var(--transition);
}

.column-filter__link:hover {
  border-color: var(--color_main);
  color: var(--color_main);
}

/* 現在地（/blog/ では「すべて」、カテゴリー別ページでは該当カテゴリー） */
.column-filter__link[aria-current="page"] {
  background: var(--color_main);
  border-color: var(--color_main);
  color: #fff;
}

.column-filter__link[aria-current="page"]:hover {
  color: #fff;
}

/* -----------------------------------------------------------------------------
 * 記事一覧（カード型）
 * -------------------------------------------------------------------------- */
.column-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(2rem, 2.78vw, 4rem);
  row-gap: clamp(3rem, 3.47vw, 5rem);
}

.column-card {
  display: block;
  color: var(--color_dark);
  text-decoration: none;
  transition: var(--transition);
}

.column-card:hover {
  opacity: .65; /* 2026-08-26 CEO 指示: ホバーが効いているか分かるよう .8/.85 → .65 に統一 */
}

/* 比率は登録済み画像サイズ card（800×533）と同じ 3:2 に固定する */
.column-card__thumb {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--color_light); /* アイキャッチが無い記事はこの下地だけが出る */
}

.column-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.column-card__body {
  padding-top: clamp(1.2rem, 1.11vw, 1.6rem);
}

.column-card__meta {
  display: flex; /* 行ボックスでタグが 25px より高くならないようにする */
  align-items: center;
  gap: clamp(.8rem, .83vw, 1.2rem);
}

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

.column-card__title {
  margin-top: clamp(.8rem, .83vw, 1.2rem);
  font-size: clamp(1.6rem, 1.25vw, 1.8rem);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .05em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.column-list__empty {
  text-align: center;
}

/* -----------------------------------------------------------------------------
 * タブレット（1023px 以下）：絞り込み・一覧とも2列
 * -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .column-filter__list {
    grid-template-columns: repeat(2, 1fr);
  }

  .column-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* -----------------------------------------------------------------------------
 * スマートフォン（768px 以下）：一覧は1列
 * -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .column-list {
    grid-template-columns: 1fr;
  }

  /* 「イヤホンガイドコラム」が2行に折り返すため 13px に下げる（CEO 指示 2026-08-11）。
     固定：本文の最小サイズとして扱う値のため可変にしない。
     13px だけでは 375px 幅で 2.5px 足りず折り返しが残ったため、左右の余白も詰めて1行に収めた
     （文字の内容量＝10文字×13.65px＝136.5px に対し、余白 1rem では有効幅 134px しか無かった） */
  .column-filter__link {
    padding-right: .6rem;
    padding-left: .6rem;
    font-size: 1.3rem;
  }
}