@charset "UTF-8";
/* ==========================================================================
   一覧ページ（トップ／カテゴリー／タグ）
   --------------------------------------------------------------------------
   カードそのものは cards.css。ここはページの枠組み。

   デザイン案の構成
     ページ見出し → カテゴリーフィルタ → 一覧 → ページネーション

   現行の問題
     ・見出し（.archive-title）が PC 20px / SP 16px で、記事カードより小さい
     ・ページ送りが「次のページ」ボタン（.pagination-next）と
       番号ページャ（.pagination）の二重表示になっている
   ========================================================================== */

/* --------------------------------------------------------------------------
   ページ見出し
   -------------------------------------------------------------------------- */
#archive-title.archive-title{
  margin:      32px 0 0;
  padding:     0;
  border:      0;
  background:  none;
  font-size:   26px;          /* 現状 PC 20px / SP 16px */
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .02em;
  color:       var(--c-ink);  /* 現状 #555 */
  text-align:  left;
}
/* フォルダアイコンは使わない（カテゴリーはフィルタのチップで示す） */
#archive-title.archive-title .fa{ display: none; }

/* --------------------------------------------------------------------------
   トップの見出し文
   functions.php の lg_top_lead_html() が出力する。
   検索の帯とカテゴリーチップの間を埋め、「何のメディアか」を最初に伝える。
   -------------------------------------------------------------------------- */
.lg-toplead{
  /* 幅は本文カラム（PCで824px）に任せる。
     640px に絞ると1文目が2行に折れ、<br> と合わせて3行になってしまう。 */
  margin:      0 0 24px;
  font-size:   14px;
  line-height: 1.9;
  color:       var(--c-ink-3);
}
.lg-toplead strong{
  color:       var(--c-ink);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   カテゴリーフィルタ
   functions.php の lg_category_filter_html() が出力する。
   並び替えは入れていない（チップが2段に折り返したとき、
   並び替えだけが中央に浮いて見えるため。デザイン案でも一覧見出し側に置いている）
   -------------------------------------------------------------------------- */
.lg-filter{
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         8px;
  margin:      22px 0 0;
  padding:     0 0 20px;
  border-bottom: 1px solid var(--c-line);
}

.lg-filter .lg-filter__chip{
  flex:        none;
  display:     inline-flex;
  align-items: center;
  gap:         7px;
  height:      36px;
  padding:     0 15px;
  border:        1px solid var(--c-line);
  border-radius: 999px;
  background:  var(--c-bg);
  color:       var(--c-ink-2);
  font-size:   13.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition:  border-color .15s, background-color .15s, color .15s;
}
.lg-filter .lg-filter__chip:hover,
.lg-filter .lg-filter__chip:focus{
  border-color: var(--c-brand);
  color:        var(--c-brand-dark);
  background:   var(--c-brand-pale);
  text-decoration: none;
}
.lg-filter .lg-filter__chip[aria-current="page"]{
  background:   var(--c-brand);
  border-color: var(--c-brand);
  color:        var(--c-on-dark);
}

/* 件数。opacity で薄めるとコントラストが 4.24:1 まで落ちるので色で明示する */
.lg-filter .lg-filter__count{
  font-size:   11px;
  font-weight: 400;
  color:       var(--c-ink-3);
  font-variant-numeric: tabular-nums;
}
.lg-filter .lg-filter__chip:hover .lg-filter__count{ color: var(--c-brand-dark); }
.lg-filter .lg-filter__chip[aria-current="page"] .lg-filter__count{ color: var(--c-on-dark); }

/* --------------------------------------------------------------------------
   セクション見出し（注目記事・一覧見出し 共通）
   -------------------------------------------------------------------------- */
.lg-section-title{
  display:     flex;
  align-items: center;
  gap:         10px;
  margin:      0;
  padding:     0;
  border:      0;
  background:  none;
  font-size:   20px;
  font-weight: 700;
  letter-spacing: .03em;
  color:       var(--c-ink);
}
.lg-section-title::before{
  content:  "";
  flex:     none;
  width:    5px;
  height:   20px;
  border-radius: 3px;
  background: var(--c-brand);
}
.lg-section-title .lg-section-title__sub{
  font-size:   12px;
  font-weight: 400;
  letter-spacing: .08em;
  color:       var(--c-ink-3);
}

/* --------------------------------------------------------------------------
   今週の注目記事
   一覧へ入る前の回遊の起点。トップの1ページ目・新着順のときだけ出す。
   カード自体は cards.css（#list と共通）が担当する。
   -------------------------------------------------------------------------- */
.lg-picks{
  margin:        28px 0 0;
  padding:       24px;
  border:        1px solid var(--c-brand-line);
  border-radius: var(--radius-lg);
  background:    var(--c-bg);
}
.lg-picks .lg-section-title{ margin-bottom: 18px; }
.lg-picks__grid{
  display:               grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:                   16px;
}

/* --------------------------------------------------------------------------
   一覧の見出し行（左に見出し、右に並び替え）
   -------------------------------------------------------------------------- */
.lg-listhead{
  display:     flex;
  align-items: center;
  justify-content: space-between;
  gap:         16px;
  margin:      34px 0 20px;
}

/* 並び替え。ボタン＋JSではなくリンクにしているので、
   URLに状態が残り、戻る／進む・共有・JS無効環境でもそのまま動く。 */
.lg-sortbar{
  flex:    none;
  display: inline-flex;
  border:  1px solid var(--c-line);
  border-radius: 999px;
  overflow: hidden;
  background: var(--c-bg);
}
.lg-sortbar .lg-sortbar__btn{
  display:     inline-flex;
  align-items: center;
  height:      34px;
  padding:     0 16px;
  border:      0;
  background:  var(--c-bg);
  color:       var(--c-ink-3);
  font-size:   12.5px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition:  background-color .15s, color .15s;
}
.lg-sortbar .lg-sortbar__btn:hover{
  color:           var(--c-brand-dark);
  text-decoration: none;
}
.lg-sortbar .lg-sortbar__btn[aria-current="page"]{
  background: var(--c-brand);
  color:      var(--c-on-dark);
}

/* --------------------------------------------------------------------------
   一覧の位置
   見出し行があるので、一覧自体の上マージンは詰める
   -------------------------------------------------------------------------- */
#list.ect-vertical-card{ margin-top: 0; }

/* --------------------------------------------------------------------------
   ページネーション
   「次のページ」ボタンと番号ページャが二重に出ていたので、番号ページャに一本化する。
   -------------------------------------------------------------------------- */
.pagination-next{ display: none; }

.pagination{
  display:     flex;
  align-items: center;
  justify-content: center;
  /* 320px幅では「前へ・数字5つ・次へ」が1行に収まらず画面からはみ出す。
     折り返しを許可しておく（収まる幅では1行のまま変わらない）。 */
  flex-wrap:   wrap;
  gap:         8px;
  margin:      44px 0 0;
}
.pagination .page-numbers{
  /* Cocoon 既定の margin:4px は gap と二重になり、
     390px幅でページャが1行に収まらなくなるので外す */
  margin:      0;
  display:     grid;
  place-items: center;
  min-width:   42px;
  height:      42px;
  /* 左右の padding は小さくする。12px にすると内容領域が 18px しか残らず、
     2桁（「22」＝18.4px）が入りきらずに左端へ寄って右へずれて見える。
     箱の大きさは min-width で担保する。
     上の 1px は、数字の墨が行ボックスの上寄りに来るぶんの押し下げ
     （8倍に拡大して実測。0px と 1px は -0.31px、2px だと +0.69px 下がる）。 */
  padding:     1px 4px 0;
  border:      1px solid var(--c-line);
  border-radius: var(--radius);   /* 現状は 50% の丸 */
  background:  var(--c-bg);
  color:       var(--c-ink-2);
  font-size:   14px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pagination a.page-numbers:hover{
  border-color: var(--c-brand);
  color:        var(--c-brand-dark);
  background:   var(--c-brand-pale);
  text-decoration: none;
}
.pagination .page-numbers.current{
  background:   var(--c-brand);
  border-color: var(--c-brand);
  color:        var(--c-on-dark);
}
.pagination .page-numbers.dots{
  min-width: 20px;
  padding:   1px 0 0;
  border:    0;
  background: none;
  color:     var(--c-ink-3);
}
/* 「次へ」は <span class="screen-reader-text">次へ</span> と 矢印アイコンの
   2要素でできている。grid だと2行に積まれてアイコンが中心からずれるので、
   同じセルへ重ねる。左右の padding も数字と揃える。
   アイコンは数字と墨の位置が違い、上の押し下げは不要なので 0 に戻す。 */
.pagination .page-numbers.next,
.pagination .page-numbers.prev{ padding: 0 4px 1px; }
.pagination .page-numbers > *{ grid-area: 1 / 1; }

/* 記事が0件のときの表示は、P10 で search.css の .lg-empty に置き換えた
   （Cocoon の .posts-not-found は functions.php のフィルターで差し替え済み）。
   ここにあった .posts-not-found の指定は出番が無くなったため削除。 */

/* --------------------------------------------------------------------------
   SP（834px以下）
   -------------------------------------------------------------------------- */
@media screen and (max-width: 834px){
  .lg-toplead{ margin-bottom: 18px; font-size: 13.5px; }

  #archive-title.archive-title{ margin-top: 20px; font-size: 21px; }

  /* チップは折り返さず横スクロールさせる（2段に増えると一覧が下に押される） */
  .lg-filter{
    flex-wrap:      nowrap;
    overflow-x:     auto;
    margin-top:     18px;
    padding-bottom: 14px;
    scrollbar-width: none;
  }
  .lg-filter::-webkit-scrollbar{ display: none; }
  .lg-filter .lg-filter__chip{ height: 34px; padding: 0 13px; font-size: 13px; }

  .lg-section-title{ font-size: 18px; }
  .lg-section-title::before{ height: 18px; }

  /* 注目記事は 3件を1列のコンパクトなリストにする（カード側は cards.css が横並びにする） */
  .lg-picks{ margin-top: 20px; padding: 18px; }
  .lg-picks .lg-section-title{ margin-bottom: 10px; }
  .lg-picks__grid{ grid-template-columns: minmax(0, 1fr); gap: 0; }

  /* 見出しと並び替えは2段に。横並びだと見出しが潰れる */
  .lg-listhead{
    flex-direction: column;
    align-items:    flex-start;
    gap:            12px;
    margin:         26px 0 14px;
  }

  #list.ect-vertical-card{ margin-top: 0; }

  .pagination{ gap: 6px; margin-top: 32px; }
  /* SPは箱も文字も一回り小さいので、押し下げ量も 1px に */
  .pagination .page-numbers{ min-width: 38px; height: 38px; padding: 1px 4px 0; font-size: 13px; }
  .pagination .page-numbers.next,
  .pagination .page-numbers.prev{ padding: 0 4px; }

  .posts-not-found{ padding: 36px 18px; }
}