@charset "utf-8";
/* ============================================================
   category.css — category.php / tag.php / 検索 / その他アーカイブ
   共通の型は common.css。ここは一覧固有のものだけ。
   ============================================================ */

/* ============ アーカイブ見出し ============ */
.arch{
  position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:var(--band);
}
/* §05 写真背景はTOPのヒーローだけ。一覧の見出しは帯の上にキャラ1体 */
.arch .inner{position:relative;z-index:1;display:flex;align-items:flex-end;gap:var(--s5);padding-top:var(--s7);padding-bottom:var(--s7);min-height:260px;}
.arch__body{flex:1 1 auto;max-width:640px;}
.arch__label{
  display:inline-block;font-family:var(--f-mono);font-size:12px;letter-spacing:.2em;color:var(--accent);
  border-top:3px solid var(--gold);padding-top:8px;margin-bottom:12px;
}
.arch__title{
  font-family:var(--f-head);font-weight:900;font-size:clamp(24px,4vw,34px);line-height:1.4;
  color:var(--ink);margin:0;
}
.arch__title small,
.arch__count{
  display:block;font-family:var(--f-mono);font-size:11px;font-weight:400;
  letter-spacing:.18em;color:var(--ink-dim);margin-top:10px;
}
.arch__desc{font-size:14px;color:var(--ink-mid);line-height:1.9;margin-top:var(--s3);max-width:56ch;}
.arch__chara{flex:none;align-self:flex-end;margin-left:auto;}
.arch__chara img{height:220px;width:auto;}
@media (max-width:900px){
  .arch .inner{min-height:0;padding-top:var(--s6);padding-bottom:var(--s5);}
  .arch__chara{display:none;}
}

/* 子カテゴリのチップ */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s4);}
.chips a{
  font-size:13px;color:var(--ink-mid);background:var(--card);
  border:1px solid var(--line);border-radius:3px;padding:7px 14px;
}
.chips a:hover{color:var(--accent);border-color:var(--accent-deep);}
.chips .is-on{color:#04101F;background:var(--accent);border-color:var(--accent);}

/* ============ 件数と並び替え ============ */
.sortbar{
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);align-items:center;justify-content:space-between;
  border:1px solid var(--line);border-radius:4px;background:var(--card);
  padding:14px 18px;margin-bottom:var(--s4);
}
.sortbar__count{font-size:13px;color:var(--ink-mid);}
.sortbar__count b{font-family:var(--f-mono);font-variant-numeric:tabular-nums;color:var(--gold);font-weight:500;margin:0 2px;}
.sortbar__opts{display:flex;flex-wrap:wrap;gap:6px;}
.sortbar__opts a{
  font-size:12.5px;color:var(--ink-mid);border:1px solid var(--line);border-radius:3px;padding:6px 12px;
}
.sortbar__opts a:hover{color:var(--accent);border-color:var(--accent-deep);}
.sortbar__opts .is-on{color:#04101F;background:var(--accent);border-color:var(--accent);}
/* 並び替えを出さないアーカイブ（地域別など）は件数だけの1行にする */
.sortbar--count-only{justify-content:flex-start;padding:12px 18px;}

/* ============ 記事リスト ============ */
.post-list{display:flex;flex-direction:column;gap:var(--s3);}
.post-item{
  display:grid;grid-template-columns:260px minmax(0,1fr);gap:var(--s4);
  background:var(--card);border:1px solid var(--line);border-radius:4px;overflow:hidden;
}
.post-item:hover{border-color:var(--accent-deep);}
@media (max-width:760px){
  .post-item{grid-template-columns:1fr;gap:0;}
  /* 縦積みのときは高さの基準が無くなるので、比率で決める */
  .post-item__thumb{aspect-ratio:16/9;min-height:0;}
  .post-item__thumb .no-thumb{aspect-ratio:16/9;}
}

/* サムネイルは行の高さいっぱいまで伸ばす。
   aspect-ratio で高さを固定すると、本文が長い行でサムネイルの下に空きができる。 */
.post-item__thumb{
  position:relative;display:block;overflow:hidden;
  background:linear-gradient(135deg,#16304A,#0B1E33);
  min-height:180px;
}
.post-item__thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.post-item__thumb .no-thumb{height:100%;aspect-ratio:auto;}
.post-item__no{
  position:absolute;left:0;top:0;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;
  color:var(--ink);background:rgba(4,16,31,.85);border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:5px 10px;
}
.post-item__no--1{color:#04101F;background:var(--gold);border-color:var(--gold);}

.post-item__body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px;}
@media (max-width:760px){.post-item__body{padding:16px;}}
.post-item__meta{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;color:var(--ink-dim);}
.post-item h3{font-family:var(--f-head);font-weight:700;font-size:17px;line-height:1.6;margin:0;border:0;padding:0;}
.post-item h3 a{color:var(--ink);}
.post-item h3 a:hover{color:var(--accent);}
.post-item__excerpt{font-size:13px;color:var(--ink-mid);line-height:1.85;margin:0;}

/* 会社レビュー記事のスペック行（カスタムフィールドが入っている記事だけ出る） */
.post-item__spec{
  display:flex;flex-wrap:wrap;gap:1px;margin-top:auto;padding-top:12px;
  border-top:1px solid var(--line-soft);
}
.post-item__spec > div{
  display:flex;flex-direction:column;gap:2px;
  padding:8px 16px 8px 0;margin-right:16px;
  font-size:11.5px;color:var(--ink-dim);border-right:1px solid var(--line-soft);
}
.post-item__spec > div:last-child{border-right:0;margin-right:0;}
.post-item__spec b{
  font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:13.5px;
  color:var(--gold);font-weight:500;
}

/* ============ タグクラウド ============ */
.tag-cloud{display:flex;flex-wrap:wrap;gap:8px;}
.tag-cloud a{
  display:inline-flex;align-items:baseline;gap:7px;
  font-family:var(--f-mono);font-size:12px;color:var(--ink-mid);
  background:var(--card);border:1px solid var(--line);border-radius:3px;padding:7px 12px;
}
.tag-cloud a:hover{color:var(--accent);border-color:var(--accent-deep);}
.tag-cloud em{font-style:normal;font-size:10px;color:var(--ink-dim);}
.tag-cloud .is-hot{color:var(--ink);border-color:var(--accent-deep);}
.tag-cloud .is-hot em{color:var(--gold);}