@charset "utf-8";

/* Topics archive cards --------------------------------------------------- */
/* サイドバーを外して全幅になったので、PC は4列（1ページ12件で3行）。1280px 以下は従来の3列。 */
.topics-list #items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg) var(--space-md);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.topics-archive-card {
  min-width: 0;
  background: var(--color-surface);
}

.topics-archive-card__article {
  display: flex;
  height: 100%;
  min-width: 0;
  flex-direction: column;
}

.topics-archive-card__media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-line);
}

.topics-archive-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.topics-archive-card__media--empty::after {
  display: block;
  height: 100%;
  background: linear-gradient(135deg, var(--color-line), var(--color-bg));
  content: "";
}

.topics-archive-card__body {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  padding: var(--space-xs) var(--space-sm);
}

/* 題名の欄。題名は 15px で最大3行（16px・2行では、PC の4列で題名 202件中 24件が「…」で切れていた。15px・3行で 3件）。
   箱を持っていた頃は欄の高さを「題名2行 + 抜粋2行」に固定していた。今は末尾の箱を持たないカードの指定が高さを外し、
   抜粋も出さない（2026-10-20）。 */
.topics-archive-card__text {
  --topics-card-line: 1.3125rem; /* 21px = 題名 15px × 1.4 */

  block-size: calc(4 * var(--topics-card-line) + var(--space-2xs));
  overflow: hidden;
}

/* 1行の題名も2行の枠の中央に置き、抜粋の始まりをそろえる。
   折り返しは普通の詰め方（2026-10-05 ユーザー指摘）。カードは幅が狭く、文節で折る（word-break: auto-phrase）と
   見出し共通の text-wrap: balance（css/foundation.css）が重なって、行末が平均 99px 空いていた（4列・題名 202件）。
   外すと 11px で、行数に収まらない題名も減る（390px で 59 → 39件）。禁則は line-break: strict が守る。 */
.topics-archive-card__title {
  display: flex;
  min-block-size: calc(2 * var(--topics-card-line));
  margin: 0;
  align-items: center;
  color: var(--color-text);
  font-family: var(--font-jp);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: var(--topics-card-line);
  line-break: strict;
  overflow-wrap: normal;
  text-wrap: wrap;
  word-break: normal;
}

.topics-archive-card__title a {
  display: -webkit-box;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.topics-archive-card__meta {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
  margin-top: auto;
  padding-top: var(--space-xs);
  color: #666666;
  font-family: var(--font-latin);
  font-size: var(--fs-2xs);
  line-height: var(--lh-snug);
}

.topics-archive-card__term {
  display: inline-flex;
  min-height: 1.5rem;
  flex-shrink: 0;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 0.125rem;
  background: #d9d9d9;
  color: var(--color-text);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}

.topics-archive-card__term:hover {
  color: var(--color-link-hover);
}

.topics-archive-card__term--news {
  background: #cfe1ec;
}

.topics-archive-card__term--press-release {
  background: #cbe0d9;
}

.topics-archive-card__term--media {
  background: #d9d2e7;
}

.topics-archive-card__term--award {
  background: #dfdfb9;
}

.topics-archive-card__meta time {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-3xs);
  white-space: nowrap;
}

.topics-archive-card__pin {
  width: 0.625rem;
  height: 0.625rem;
}

.topics-archive-empty {
  grid-column: 1 / -1;
  padding: var(--space-xl) var(--space-md);
  border-block: 1px solid var(--color-line);
  color: var(--color-text-muted);
  text-align: center;
}

@media (max-width: 1280px) {
  .topics-list #items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .topics-archive-card__media {
    aspect-ratio: 16 / 9;
  }

  /* 抜粋を出さない幅。欄は題名3行ぶんにして、2行以下の題名はその中央に置く。 */
  .topics-archive-card__text {
    block-size: calc(3 * var(--topics-card-line));
  }

  .topics-archive-card__title {
    min-block-size: calc(3 * var(--topics-card-line));
  }
}

@media (max-width: 768px) {
  .topics-list #items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--space-md);
  }
}

@media (max-width: 640px) {
  .topics-list #items {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  /* 写真は 3:2 の横長（2026-10-05 ユーザー指定。列の幅を割合で決めていたので、カードの高さとほぼ同じ正方形になっていた）。
     幅はカードの高さから出す。写真が広がるぶん本文の列が狭くなるので、高さは少し詰める。 */
  .topics-archive-card__article {
    --topics-card-height: clamp(6rem, 26vw, 7.5rem);

    display: grid;
    height: var(--topics-card-height);
    grid-template-columns: calc(var(--topics-card-height) * var(--topics-card-ratio, 3 / 2)) minmax(0, 1fr);
  }

  .topics-archive-card__media {
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
  }

  .topics-archive-card__body {
    min-height: 0;
    overflow: hidden;
  }

  /* 横並びのカードは高さをカード側で決めているので、欄の高さは外して題名を縦の中央に置く。
     題名は2行まで（2026-10-05 ユーザー指定。以前は 480px 以下だけ3行）。行の高さは文字の 1.5 倍（以前の値）。 */
  .topics-archive-card__text {
    --topics-card-line: 1.5em;

    block-size: auto;
    margin-block: auto;
  }

  .topics-archive-card__title {
    min-block-size: calc(2 * var(--topics-card-line));
  }

  .topics-archive-card__title a {
    -webkit-line-clamp: 2;
  }

  .topics-archive-card__meta {
    margin-top: 0;
  }
}

@media (max-width: 480px) {
  .topics-archive-card__body {
    padding: var(--space-xs);
  }

  .topics-archive-card__title {
    font-size: var(--fs-xs);
  }

  .topics-archive-card__meta {
    gap: var(--space-3xs);
    padding-top: var(--space-2xs);
    font-size: 0.625rem;
  }

  .topics-archive-card__term {
    min-height: 1.25rem;
    padding: 0.1875rem 0.375rem;
    font-size: 0.625rem;
  }

  .topics-archive-card__pin {
    width: 0.5rem;
    height: 0.5rem;
  }
}

/* 320px 幅（iPhone SE）は 3:2 だと本文の列が狭く、Press Release の横の日付が切れた（ラベルと日付で 138px 要る）。
   写真を 4:3 に寄せ、本文とラベルの左右の余白も詰めて 1 行に収める。 */
@media (max-width: 360px) {
  .topics-archive-card__article {
    --topics-card-ratio: 4 / 3;
  }

  .topics-archive-card__body {
    padding-inline: var(--space-2xs);
  }

  .topics-archive-card__term {
    padding-inline: var(--space-3xs);
  }
}

/* --- 箱を持たないカード（2026-10-09 に ?card=plain で試し、2026-10-20 に正式採用・ユーザー判断）----------------
   上の指定に重ねて上書きする（順番を変えないこと）。カードには常に .topics-archive-card--plain が付く（functions.php の gkk_render_topic_card()）。

   箱をやめる。白い箱と色付きの札がよくあるブログの型に見え、グレーでそろえたサイトの中で Topics だけ浮いていた
   （2026-10-09 ユーザー指摘「あまりスタイリッシュじゃない」）。Works の一覧・Service の事例と同じく、写真と文字を地の上へ直接置く。
   - 写真の下に、カテゴリと日付を小さな欧文で添える（「News ── 2024.02.15」）
   - その下に題名。カテゴリと日付を題名の上に置くのは、カードの下端に左右に分かれて付いていた形がフッターのように見えたため
   - 箱の余白が無くなるぶん、行の間を広げてまとまりを分ける
   - 抜粋は出さない（写真と題名だけのほうがすっきりする） */

/* 行の間。Top の Topics（.home-topics__grid・css/home_style.css）も同じにする。Top は 32px（タブレット幅は 24px）のままで、
   題名が3行のカードと次の行の写真が近すぎた（同日ユーザー指摘）。home_style.css の指定に勝つよう .home-topics から書く。 */
.topics-list #items:has(.topics-archive-card--plain),
.home-topics .home-topics__grid:has(.topics-archive-card--plain) {
  row-gap: var(--space-xl);
}

/* 地の色は Top の上書き（css/home_style.css の .home-topics .topics-archive-card）にも勝たせる。 */
li.topics-archive-card.topics-archive-card--plain {
  background: none;
}

.topics-archive-card--plain .topics-archive-card__body {
  padding: var(--space-sm) 0 0;
}

.topics-archive-card--plain .topics-archive-card__text {
  block-size: auto;
  overflow: visible;
}

.topics-archive-card--plain .topics-archive-card__title {
  min-block-size: 0;
  align-items: flex-start;
  font-size: 0.9375rem; /* 15px */
  line-height: 1.5rem;  /* 24px */
}

/* カテゴリと日付は題名の上に、左寄せで続けて置く。カテゴリは絞り込みの「Category」の候補と同じく、用語の名前どおりに
   字間を空けずに書く（2026-10-20 ユーザー指定。試作のころは大文字にして字間 0.1em を空けていた）。 */
.topics-archive-card--plain .topics-archive-card__meta {
  order: -1;
  justify-content: flex-start;
  gap: 0;
  margin: 0 0 var(--space-2xs);
  padding: 0;
  color: #717171;
  font-size: 0.6875rem; /* 11px */
  font-variant-numeric: tabular-nums;
  line-height: 1rem;
}

/* 色付きの札をやめて、文字だけにする。 */
.topics-archive-card--plain .topics-archive-card__term {
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  font-weight: 400;
  letter-spacing: inherit;
  line-height: inherit;
}

/* カテゴリと日付をつなぐ細い線。 */
.topics-archive-card--plain .topics-archive-card__term::after {
  width: 1rem;
  height: 1px;
  margin-inline: var(--space-2xs);
  background: currentColor;
  opacity: 0.6;
  content: "";
}

.topics-archive-card--plain .topics-archive-card__term:hover {
  color: var(--color-link-hover);
}

.topics-archive-card--plain .topics-archive-card__meta time {
  gap: var(--space-2xs);
}

/* --- カード全体を1つのリンクとして見せる（同日ユーザー指摘。ホバーで反応が欲しい・写真と記事の情報のつながりを分かりやすく）。
   題名のリンクをカード全体へ広げ（::after）、写真・余白・題名のどこを押しても記事へ行く。カテゴリのリンクだけは上に出して単独で押せる。
   ホバー（とキーボードで題名にいるとき）は、題名に下線と濃い色、写真にごく薄い影をフェードで出す。写真と文字が同時に反応するので、
   どの写真がどの題名かが分かる。サイト共通の決まりに合わせて、拡大や移動はしない。 */
.topics-archive-card--plain .topics-archive-card__article {
  position: relative;
}

.topics-archive-card--plain .topics-archive-card__title a::after {
  position: absolute;
  inset: 0;
  content: "";
}

.topics-archive-card--plain .topics-archive-card__term {
  position: relative;
  z-index: 1;
}

.topics-archive-card--plain .topics-archive-card__media {
  position: relative;
}

.topics-archive-card--plain .topics-archive-card__media::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgb(0 0 0 / 8%);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
  content: "";
  pointer-events: none;
}

.topics-archive-card--plain .topics-archive-card__title a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease);
}

.topics-archive-card--plain:focus-within .topics-archive-card__title a {
  color: var(--color-link-hover);
  text-decoration-color: currentColor;
}

.topics-archive-card--plain:focus-within .topics-archive-card__media::before {
  opacity: 1;
}

@media (hover: hover) {
  .topics-archive-card--plain:hover .topics-archive-card__title a {
    color: var(--color-link-hover);
    text-decoration-color: currentColor;
  }

  .topics-archive-card--plain:hover .topics-archive-card__media::before {
    opacity: 1;
  }
}

/* スマホ（640px 以下）は「写真 | 文字」の横並びのまま、箱だけ外す。
   カテゴリと日付は写真の上端近く（上 4px）に固定し、題名は行数によらず写真の上下中央にそろえる（日付からは最低 4px・同日ユーザー指摘）。
   題名が1行なら日付との間が広く、2行なら狭くなる。全体を上下中央に置くと題名が短いときに文字が写真の真ん中に小さく固まり、
   全体を上端にそろえると写真の上へはみ出して見え、上に 12px 空けて上から並べると短い題名の下が空きすぎた。 */
@media (max-width: 640px) {
  .topics-list #items:has(.topics-archive-card--plain),
  .home-topics .home-topics__grid:has(.topics-archive-card--plain) {
    row-gap: var(--space-md);
  }

  /* 写真を一回り小さくする（同日ユーザー指摘。箱が無いと写真どうしが近すぎた）。カードの高さ＝写真の高さを
     今の clamp(6rem, 26vw, 7.5rem)（390px で約 101px）から下げ、行の間 24px との釣り合いを取る。比率はそのままなので文字の列が広がる。 */
  .topics-archive-card--plain .topics-archive-card__article {
    --topics-card-height: clamp(5.25rem, 22vw, 6.5rem);
  }

  .topics-archive-card--plain .topics-archive-card__body {
    justify-content: flex-start;
    /* 上 4px（同日ユーザー指定。2px も試して 4px に戻した）。写真との間は 12px（16px だと画面の左右の余白 20px と変わらず広く見えた・同日ユーザー指摘） */
    padding: var(--space-3xs) 0 0 var(--space-xs);
  }

  /* 題名は行数によらず写真の上下中央にそろえる（同日ユーザー指定）。題名の欄はカテゴリと日付の下の高さを全部取り、下にカテゴリと日付と
     同じ高さ（上の余白 4px + 行 16px）を空けて、欄の中央＝写真の中央にする。日付と重ならないよう最低 4px は空ける
     （390px の2行の題名は中央でちょうど約 4px。下限が効くのは 320px で日付が2行目に送られたカードくらい）。
     経緯: 残りの高さの上下中央・上 2 : 下 3・日付からの上限 14px・2行だけ日付から 8px と試し、写真に対する中央が正しいとなった。 */
  .topics-archive-card--plain .topics-archive-card__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    margin-block: 0;
    padding-bottom: calc(var(--space-3xs) + 1rem);
  }

  .topics-archive-card--plain .topics-archive-card__text::before,
  .topics-archive-card--plain .topics-archive-card__text::after {
    flex: 1;
    content: "";
  }

  .topics-archive-card--plain .topics-archive-card__text::before {
    min-height: var(--space-3xs);
  }

  .topics-archive-card--plain .topics-archive-card__text::after {
    min-height: 0;
  }

  /* 題名の箱は縮ませない（縮むと中の文字だけがあふれ、欄の中央の計算から外れる）。 */
  .topics-archive-card--plain .topics-archive-card__title {
    flex-shrink: 0;
    font-size: var(--fs-xs);
    line-height: 1.5;
  }

  /* 文字の列が狭い（390px で約 180px）ので、文字とつなぎの線を詰める。それでも入らない幅（320px など）では
     日付を次の行へ送る（1行のままだと日付の末尾が切れた）。 */
  .topics-archive-card--plain .topics-archive-card__meta {
    flex-wrap: wrap;
    margin: 0;
    font-size: 0.625rem; /* 10px */
  }

  .topics-archive-card--plain .topics-archive-card__term::after {
    width: 0.625rem;
    margin-inline: 0.375rem;
  }

  .topics-archive-card--plain .topics-archive-card__term {
    min-height: 0;
    padding: 0;
    font-size: inherit;
  }
}

/* 320px（iPhone SE）では Press Release の日付が次の行へ送られ、つなぎの線が行末に取り残された。線をやめて間だけ空ける。 */
@media (max-width: 360px) {
  .topics-archive-card--plain .topics-archive-card__meta {
    column-gap: var(--space-xs);
  }

  .topics-archive-card--plain .topics-archive-card__term::after {
    display: none;
  }
}