@charset "utf-8";
/* ===========================================================
   古民家喫茶 あおき — page-menu.css（お品書き専用のレイアウトだけ）
   正本：_rough/references/sources.md v2 §0 §2 §3 §7 §6-A②
   色・級数はすべて base.css のトークン（var(--…)）を参照する。
   トークン・共通コンポーネントの再定義はしない。
   =========================================================== */

/* ---------- 1. 章（縦組みの見出し＋一文字副題） ----------
   PC＝品目グリッドと同じ行に並べ、分類ごとに左右の位置を変える。
   縦組みなので row-reverse＝先頭の子（章見出し）が右に立つ。 */
.mchap{
  grid-row:1;
  display:flex;
  flex-direction:row-reverse;
  align-items:flex-start;
  justify-content:flex-start;      /* 右端に寄せる（列の右辺が継ぎ目） */
  gap:1.2rem;
}
.mchap--l{justify-content:flex-end;}  /* 左端に寄せる（列の左辺が継ぎ目） */
.mchap--drop{margin-top:8rem;}        /* 単調にしないための落とし込み */
.mchap--drop2{margin-top:16rem;}

.mchap__kanji{
  display:flex;
  flex-direction:row-reverse;
  align-items:flex-start;
  gap:.4rem;
  color:var(--olive);
  opacity:.9;
}
.mchap__k{
  writing-mode:vertical-rl;
  font-size:var(--fs-sub);
  line-height:1.4;
  letter-spacing:.15em;
  margin-block-end:-.15em;         /* iOS：縦組み末尾の字間を詰める */
}
.mchap__r{
  writing-mode:vertical-rl;
  font-size:var(--fs-small);
  line-height:1.6;
  letter-spacing:.2em;
  margin-block-end:-.2em;
}

/* ---------- 2. 品目の2列（罫で囲まない・連番を振らない） ---------- */
.mgrid{
  grid-row:1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:9%;                   /* 列間＝およそ2u */
  row-gap:9rem;
  align-items:start;
}

/* ---------- 3. 分類の代表写真（色面の矩形に少しずらして重ねる） ---------- */
.mfig{
  display:grid;
  grid-template-columns:repeat(10,1fr);
  align-items:start;
}
.mfig__panel{grid-column:1/span 8;grid-row:1;aspect-ratio:1/1;}
.mfig__img{grid-column:3/span 8;grid-row:1;margin-top:12%;}

/* 写真を右列に置く分類（甘味・季節のもの） */
.mgrid--figr .mfig{grid-column:2;grid-row:1;}
.mgrid--figr .mfig__panel{grid-column:3/span 8;}
.mgrid--figr .mfig__img{grid-column:1/span 8;}

/* ---------- 4. 一品（写真 → 品名＋読み → 価格 → 説明） ---------- */
.mitem__head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.4em 1.2rem;
}
.mitem__yomi{white-space:nowrap;}
.mitem__price{margin:.2em 0 1em;}
.mitem .vlist{margin-bottom:1.6rem;}

/* ---------- 5. 末尾の注記 ---------- */
.mnote{margin-top:4rem;}
.mnote .label{display:block;margin-bottom:1.2rem;}

/* ---------- 6. タブレット・SP（≤1024＝1カラム） ---------- */
@media screen and (max-width:1024px){
  .mchap{justify-content:flex-end;}          /* 左端へ */
  .mchap--drop,.mchap--drop2{margin-top:0;}

  .mgrid{
    grid-template-columns:minmax(0,1fr);
    column-gap:0;
    row-gap:7rem;
    margin-top:5rem;
  }
  .mgrid--figr .mfig{grid-column:1;grid-row:auto;}

  .mnote{margin-top:3rem;}
}

@media screen and (max-width:736px){
  .mgrid{row-gap:6rem;margin-top:4rem;}
}