@charset "utf-8";
/* ===========================================================
   古民家喫茶 あおき — page-news.css
   対象：news.html（お知らせ）／privacy.html／404.html
   正本：_rough/references/sources.md v2 §7
   ここに書くのはこの3ページ固有のレイアウトだけ。
   色・級数・余白・演出は base.css のトークンとクラスを使う（再定義しない）
   =========================================================== */

/* ---------- 1. 写真の無い題箱（privacy・404） ---------- */
.subhero--plain{margin-bottom:16rem;}
.subhero--plain .subhero__head{padding:4rem 4rem 0;}
/* 縦組みの題が長いので、一列 7〜8 字で次の列へ送る（右→左） */
.subhero--plain .pagetitle{max-height:8em;}

/* ---------- 2. お知らせ一覧（罫は引かない＝余白と日付の色で切る） ---------- */
.news__item+.news__item{margin-top:4rem;}
.news__row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);   /* 縦組みの分類 ＋ 本体 */
  column-gap:2.4rem;
  align-items:start;
}
.news__cat{grid-row:1;grid-column:1;}
.news__main{grid-row:1;grid-column:2;}
.news__title{margin-bottom:1.2rem;}

/* ---------- 3. プライバシーポリシー（漢数字は左の余白へ出す） ---------- */
.policy__item{position:relative;padding-left:8rem;}
.policy__item+.policy__item{margin-top:7rem;}
.policy__num{position:absolute;left:0;top:0;}
.policy__contact{margin-top:1.5rem;}

/* ---------- 4. 404（写真を置かず余白で見せる） ---------- */
.nf__btn{margin-top:8rem;}

/* ---------- 5. タブレット・SP（≤1024） ---------- */
@media screen and (max-width:1024px){
  .subhero--plain{margin-bottom:10rem;}
  .subhero--plain .subhero__head{padding:10% 0 0;}

  .news__item+.news__item{margin-top:3rem;}
  .news__row{column-gap:1.6rem;}

  .policy__item{padding-left:5.5rem;}
  .policy__item+.policy__item{margin-top:5rem;}

  .nf__btn{margin-top:6rem;}
}

@media screen and (max-width:736px){
  .subhero--plain .pagetitle{max-height:9em;}
  .policy__item{padding-left:4.5rem;}
}