/* 20-layout.css
   --------------------------------
   - 2カラムレイアウト（本文 + サイドバー）
   - NEWS / WORKS 黒帯（ページヘッダ）の幅・余白
-------------------------------- */

/* 共通：2カラムの器（本文 / サイドバー） */
.with-sidebar .container.two-cols {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
}

/* スマホでは1カラム。サイドバーは本文の「下」に来る */
@media (max-width: 900px) {
  .with-sidebar .container.two-cols {
    grid-template-columns: 1fr;
  }
  .with-sidebar .sidebar {
    order: 2;
    margin-top: 1.25rem;
  }
}

/* NEWS / WORKS の黒帯：ページ幅いっぱいに伸ばす */
body.category-news .page-header,
body.tax-work-category .page-header {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  margin-top: 0;
  margin-bottom: 2.5rem;
  padding: 56px 0;
}

/* WORKS 側だけ背景を強制的に黒・文字色を白に */
body.tax-work-category .page-header {
  background: #222;
  color: #fff;
}

/* 内側の最大幅（NEWS/WORKS 共通） */
body.category-news .page-header .container,
body.tax-work-category .page-header .page-header-inner,
body.tax-work-category .page-header .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}