@charset "utf-8";

/* Topics共通シェル。外枠・右レール・段落ち条件を一覧と単体で共有する。 */
#content {
  --topics-sidebar-size: 15.625rem;
  --topics-layout-gap: var(--space-lg);
}

.topics-page-heading,
#main.topics-layout {
  width: 100%;
  max-width: var(--container-wide-box);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

#main.topics-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--topics-sidebar-size);
  align-items: start;
  gap: var(--topics-layout-gap);
}

/* 見出し。Recruit / Company の見出し（css/page-shell.css の先頭項目）と同じ書体・大きさ・色で、
   文字の下 6px に罫を引く（2026-10-05 ユーザー指定。旧来の「Topics すべて」の英和併記をやめた）。
   一覧（全件・カテゴリ・年・検索結果）だけに置く。記事ページは持たない。
   見出しは一覧へのリンクを兼ねる。page-shell.css はこのページで読まないので、値はここで持つ。
   上の余白は Company と最初の文字の位置を揃える（PC 0 / 1024px 以下 8px / 790px 以下 0。2026-10-06 に PC 8 → 0・1024px 以下 16 → 8。
   ヘッダー下の gap を 44 → 48 にしたぶん、文字で始まる見出しは上げて写真で始まるページとの中間に寄せた（css/foundation.css）。
   page-shell 側はヘッダー下の gap を 790px 以下で 8px 詰めているので、こちらは詰めない gap 16px に 0 を足す）。 */
.topics-heading {
  --topics-heading-pad-top: 0px;
  --topics-heading-size: 20px;

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 0;
  margin-block-end: var(--space-lg);
}

/* flex にして、本文の行の高さ（28px）の中にリンクが載らないようにする。載ると 5px 下がって Company とずれた。 */
.topics-heading__title {
  display: flex;
  align-items: flex-end;
  margin: 0;
  border-bottom: 1px solid var(--color-line);
  font: inherit;
}

.topics-heading__link {
  display: inline-block;
  flex-shrink: 0;
  padding-block: var(--topics-heading-pad-top) 6px;
  color: var(--color-heading);
  font-family: var(--font-latin);
  font-size: var(--topics-heading-size);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: var(--lh-snug);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

/* 絞り込み中の条件（カテゴリ名・年・年月・検索語）。「Topics」の右に続け、見出しとは別のものに見えるよう 14px に落とす
   （2026-10-05 ユーザー指定。絞り込んだ後に、何で絞り込んでいるかが見出しから分からなかった。同じ大きさでは「Topics」と対等に見えた）。
   文字の下端（ベースライン）は「Topics」にそろえる（h1 を baseline 揃えにする）。区切りの「/」だけ薄くする。
   検索語は和文もあるので、欧文の書体の後に和文の基本書体（--font-jp）を置く。長いときは行に収まる所で「…」にする。 */
.topics-heading__title:has(.topics-heading__condition) {
  align-items: baseline;
}

.topics-heading__condition {
  min-width: 0;
  overflow: hidden;
  color: var(--color-heading);
  font-family: "helvetica-lt-pro", "Helvetica Neue", Helvetica, Arial, var(--font-jp);
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: var(--lh-snug);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topics-heading__separator {
  margin-inline: 0.4em;
  color: var(--color-text-muted);
}

a.topics-heading__link:hover {
  color: var(--color-link-hover);
}

.topics-heading__link:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.sub-menu {
  display: none;
}

/* 1024px 以下は見出しを小さくし、1列にする。 */
@media (max-width: 1024px) {
  .topics-heading {
    --topics-heading-pad-top: var(--space-2xs);
    --topics-heading-size: 16px;
  }

  #main.topics-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 790px) {
  .topics-heading {
    --topics-heading-pad-top: 0px;
    margin-block-end: var(--space-md);
  }
}

@media (max-width: 768px) {
  /* スマホは見出しの行が「Topics」と右のタブで埋まり、条件が入りきらない（320px では「2023」まで切れた）。
     条件は罫の下に1行で出し、見出しの行の下の余白をそのぶん広げる。区切りの「/」は出さない。 */
  .topics-heading__title {
    position: relative;
  }

  /* 罫と条件の間は約 4px、条件とカードの間は約 16px（条件の無いページの罫→カード 24px より狭く）。 */
  .topics-heading:has(.topics-heading__condition) {
    margin-block-end: calc(var(--space-lg) + var(--space-2xs));
  }

  .topics-heading__condition {
    position: absolute;
    top: calc(100% + var(--space-3xs));
    left: 0;
    width: 100vw;
    max-width: calc(100vw - 2 * var(--gutter));
    padding: 0;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
  }

  .topics-heading__separator {
    display: none;
  }
}