@charset "utf-8";
/* ===========================================================
   古民家喫茶 あおき — page-house.css（家のこと／このページ固有のレイアウトのみ）
   正本：_rough/references/sources.md v2 ／ 文言：_rough/references/rough-copy.md §5
   ・色・級数・余白は base.css のトークンを使う（トークン／共通部品は再定義しない）
   ・PCの列指定は @media (min-width:1025px) の中だけ（≤1024 は base.css が1カラム化する）
   ・sticky を使う節の祖先に overflow:hidden を作らない
   =========================================================== */

/* ---------- 章の頭（縦組みの章見出し＋一文字副題） ---------- */
.chead{display:flex;flex-direction:column;align-items:center;gap:2.4rem;}
.chead .kanji{flex-direction:column;align-items:center;gap:.6rem;}

/* ---------- 来歴「年」＝年表8項目（罫は引かない） ---------- */
.hist__fig{aspect-ratio:1024/1536;}
.hist__row{padding:1.4rem 0;}
.hist__year{color:var(--olive);font-size:var(--fs-desc);letter-spacing:.06em;line-height:2;}
.hist__ev{font-size:var(--fs-body-s);line-height:2;}

/* ---------- 部屋（色面の上に写真を重ねる） ---------- */
.room__panel{grid-row:1;}
.room__fig{grid-row:1;position:relative;z-index:1;aspect-ratio:3/2;}
.room__body{grid-row:1;position:relative;z-index:2;}
.room__kanji{margin:-1em 0 2.4rem;}
.room__dl{margin-top:3.2rem;}

/* ---------- 改修の考え方「直」 ---------- */
.reno__head{grid-row:1;}
.reno__body{grid-row:1;}

/* ---------- 細部のギャラリー（素直な横スクロールの帯） ---------- */
.gal__tick{width:52px;height:1px;margin-top:1.6rem;}
.gal__strip{
  display:flex;align-items:flex-start;gap:2.4rem;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  padding-bottom:1.6rem;
}
.gal__fig{flex:0 0 auto;scroll-snap-align:start;width:300px;}
.gal__strip:focus-visible{outline:2px solid var(--olive);outline-offset:6px;}

/* ---------- 全体の席数 ---------- */
.seats__line{line-height:2;}

/* ===========================================================
   PC（≥1025）＝30分割の列指定
   =========================================================== */
@media screen and (min-width:1025px){

  /* 来歴：左に縦写真（sticky で本文に並走）／右に年表／右端に章の頭 */
  .hist__head{grid-column:28/span 3;grid-row:1;align-self:start;}
  .hist__media{grid-column:3/span 9;grid-row:1;}
  .hist__fig{position:sticky;top:15vh;}
  .hist__list{grid-column:14/span 13;grid-row:1;padding-top:2rem;}
  .hist__row{display:grid;grid-template-columns:11em 1fr;column-gap:2rem;padding:1.6rem 0;}

  /* 土間：色面は左上、写真は大きく左、本文は右 */
  .room--a .room__panel{grid-column:1/span 13;aspect-ratio:1/1;align-self:start;}
  .room--a .room__fig{grid-column:4/span 16;align-self:start;margin-top:72px;}
  .room--a .room__body{grid-column:22/span 9;align-self:center;}

  /* 座敷：左右を入れ替え。色面は写真の左下へ大きくずらす */
  .room--b .room__body{grid-column:3/span 9;align-self:start;padding-top:2rem;}
  .room--b .room__panel{grid-column:12/span 14;aspect-ratio:1/1;align-self:start;margin-top:120px;}
  .room--b .room__fig{grid-column:15/span 16;align-self:start;}

  /* 縁側：写真をいちばん広く。色面は縦長で右へ抜け、本文が下に重なる */
  .room--c .room__fig{grid-column:1/span 18;align-self:start;}
  .room--c .room__panel{grid-column:14/span 12;aspect-ratio:3/4;align-self:start;margin-top:104px;}
  .room--c .room__body{grid-column:20/span 10;align-self:end;padding:0 0 4rem 2rem;}

  /* 蔵：写真を小さく右へ。色面は右端の縦長 */
  .room--d .room__body{grid-column:3/span 12;align-self:center;}
  .room--d .room__panel{grid-column:22/span 9;aspect-ratio:3/4;align-self:start;}
  .room--d .room__fig{grid-column:17/span 12;align-self:start;margin-top:110px;}

  /* 改修の考え方：章の頭を左に立て、本文を右へ */
  .reno__head{grid-column:3/span 3;align-self:start;}
  .reno__body{grid-column:8/span 15;align-self:center;}

  /* 細部のギャラリー */
  .gal__head{grid-column:3/span 4;grid-row:1;align-self:start;}
  .gal__strip{grid-column:8/span 23;grid-row:1;}
  .gal__fig{width:340px;}

  /* 全体の席数 */
  .seats__line{grid-column:3/span 24;}
}

/* ===========================================================
   タブレット・SP（≤1024）＝1カラム。sticky は解除する
   =========================================================== */
@media screen and (max-width:1024px){

  .chead{align-items:flex-start;flex-direction:row;gap:2rem;margin-bottom:5rem;}
  .chead .kanji{flex-direction:row;align-items:baseline;gap:.6rem;}

  /* 来歴 */
  .hist__fig{position:static;top:auto;}
  .hist__media{margin-bottom:7rem;}
  .hist__row{padding:1.2rem 0;}
  .hist__year{display:block;margin-bottom:.2rem;}

  /* 部屋：色面は短い帯にして、写真を上へ食い込ませる */
  .room__panel{width:78%;height:88px;}
  .room--b .room__panel,
  .room--d .room__panel{margin-left:22%;}
  .room__fig{margin-top:-52px;}
  .room__body{margin-top:9%;}
  .room__kanji{margin:-.6em 0 2rem;}
  .room__dl{margin-top:2.4rem;}

  /* 改修の考え方 */
  .reno__body{margin-top:1rem;}

  /* ギャラリー */
  .gal__head{display:flex;align-items:center;gap:2rem;margin-bottom:3rem;}
  .gal__tick{margin-top:0;}
  .gal__fig{width:64%;}
}

@media screen and (max-width:736px){
  .gal__fig{width:74%;}
  .room__panel{height:72px;}
  .room__fig{margin-top:-44px;}
}