@charset "utf-8";
/* ===========================================================
   古民家喫茶 あおき — page-index.css（TOP固有のレイアウトのみ）
   正本：_rough/references/sources.md v2 ／ 骨格・色・級数は base.css のトークンを使う
   ここでは トークン／コンポーネント（.btn .fig .chapter 等）を再定義しない
   =========================================================== */

/* -----------------------------------------------------------
   1. ヒーロー（TOP固有・34分割の内側30uで組む）
   色面（柳）13u/17u/上100px ・ 写真A 16u/14u/上0 ・ 写真B 0u/20u/上244px
   縦組みの題 3u/上137px
   ※ 100vh は使わない。高さは写真の aspect-ratio で作る
   ----------------------------------------------------------- */
.hero{position:relative;}
.hero>*{align-self:start;}

.hero__panel{
  grid-column:14/span 17;grid-row:1;
  margin-top:100px;
  aspect-ratio:17/19.771;      /* 写真A（14u・√2縦）と同じ高さ */
  z-index:0;
}
.hero__figB{grid-column:1/span 20;grid-row:1;margin-top:244px;z-index:1;}
.hero__figA{grid-column:17/span 14;grid-row:1;z-index:2;}

/* 題は生成り濃の色面に載せる（写真Bの上でも 12.9:1 を確保する） */
.hero__head{
  grid-column:1/span 9;grid-row:1;z-index:3;
  position:relative;
  padding:137px 0 8rem;
  padding-left:33.333%;        /* ＝3u（9u幅の3/9） */
  display:flex;flex-direction:column;align-items:flex-start;
}
.hero__head::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--paper2);
  transform:scaleY(0);transform-origin:top;
  transition:transform .8s ease-in-out;
}
.hero.is-in .hero__head::before{transform:scaleY(1);}

.hero__title{display:flex;align-items:flex-start;gap:3rem;}
.hero__name{
  writing-mode:vertical-rl;
  font-size:var(--fs-sub);line-height:1.2;letter-spacing:.2em;
  margin-block-end:-.2em;
}
.hero__catch{line-height:1.4;}
.hero__roman{margin-top:3.5rem;}

.hero__cta{grid-column:4/span 20;grid-row:2;margin-top:9rem;}
.hero__sub{max-width:38em;}
.hero__btns{display:flex;flex-wrap:wrap;gap:1rem 4rem;margin-top:4rem;}

/* -----------------------------------------------------------
   2. お知らせ（最新1件・左に縦罫）
   ----------------------------------------------------------- */
.news-one__rule{grid-column:3;grid-row:1;justify-self:start;}
.news-one__body{grid-column:5/span 18;grid-row:1;}
.news-one__link{display:block;}
.news-one__link .news__title{transition:color .2s ease;}
.news-one__link:hover .news__title{color:var(--timber);}
.news-one__more{margin-top:3rem;}

/* -----------------------------------------------------------
   3. 導入「家」（透かし紋＋大見出し＋本文＋ツイン写真）
   ----------------------------------------------------------- */
/* 格子戸の紋。線は図形と一緒に太らせる（1pxのまま拡大すると製図の罫に見える）。
   見出しの背後は避け、右下の空きに object として置く */
.intro__crest{
  position:absolute;right:4%;top:14rem;
  width:30%;                    /* 9u */
  aspect-ratio:1/1;
  color:var(--ink);opacity:.07;
  pointer-events:none;z-index:0;
}
.intro__crest svg{width:100%;height:100%;display:block;}

/* 節の一文字副題（章マーク＋読み） */
.secmark{display:flex;flex-direction:column;align-items:center;gap:1.2rem;}
.secmark__r{
  writing-mode:vertical-rl;
  font-size:var(--fs-small);letter-spacing:.1em;color:var(--olive);
}

.intro__ch{grid-column:28/span 2;grid-row:1/span 2;align-self:start;margin-top:1rem;position:relative;z-index:1;}
/* 「土間で珈琲、／座敷で茶を。」＝読点で6字ずつに割る（「を。」だけが残るのを防ぐ） */
.intro__display{grid-column:3/span 16;grid-row:1;position:relative;z-index:1;max-width:6.5em;}
.intro__body{grid-column:3/span 12;grid-row:2;margin-top:6rem;position:relative;z-index:1;}
.intro__body p+p{margin-top:2.4em;}
.intro__cta{grid-column:3/span 12;grid-row:3;margin-top:5rem;position:relative;z-index:1;}
.intro__twin{grid-column:3/span 24;grid-row:4;margin-top:12rem;position:relative;z-index:1;}

/* -----------------------------------------------------------
   4. 見どころ「灯」（カードにしない・連番を振らない・非対称に組む）
   ----------------------------------------------------------- */
.points__ch{grid-column:28/span 2;grid-row:1;align-self:start;}
.point{display:grid;align-items:start;}

.point--a{grid-column:1/span 26;grid-row:1;grid-template-columns:repeat(26,1fr);}
.point--a .point__fig{grid-column:1/span 15;}
.point--a .point__txt{grid-column:17/span 10;margin-top:9rem;}

.point--b{grid-column:5/span 26;grid-row:2;grid-template-columns:repeat(26,1fr);margin-top:14rem;}
.point--b .point__txt{grid-column:1/span 10;margin-top:6rem;}
.point--b .point__fig{grid-column:12/span 15;}

.point--c{grid-column:3/span 22;grid-row:3;grid-template-columns:repeat(26,1fr);margin-top:14rem;}
.point--c .point__fig{grid-column:1/span 14;}
.point--c .point__txt{grid-column:16/span 9;margin-top:11rem;}

/* -----------------------------------------------------------
   5. お品書き抜粋「味」（縦組みの品名＋価格）
   ----------------------------------------------------------- */
.taste__ch{grid-column:28/span 2;grid-row:1;align-self:start;}
.taste__row{display:grid;align-items:start;}

.taste__row--a{grid-column:1/span 26;grid-row:1;grid-template-columns:repeat(26,1fr);}
.taste__row--a .taste__fig--1{grid-column:1/span 14;}
.taste__row--a .taste__dishes{grid-column:17/span 10;display:flex;flex-direction:column;gap:8rem;}
.taste__row--a .dish--2{margin-left:18%;}

.taste__row--b{grid-column:3/span 28;grid-row:2;grid-template-columns:repeat(28,1fr);margin-top:14rem;}
.taste__row--b .dish--3{grid-column:1/span 7;margin-top:4rem;}
.taste__row--b .taste__fig--2{grid-column:10/span 11;}
.taste__row--b .taste__fig--3{grid-column:22/span 7;margin-top:14rem;}

.taste__row--c{grid-column:1/span 24;grid-row:3;grid-template-columns:repeat(24,1fr);margin-top:14rem;}
.taste__row--c .taste__fig--4{grid-column:1/span 14;}
.taste__row--c .dish--4{grid-column:17/span 8;margin-top:8rem;}

.taste__cta{grid-column:3/span 16;grid-row:4;margin-top:10rem;}

/* 一品（縦組みの品名を右、読み・価格・一言を左に置く） */
.dish{display:grid;grid-template-columns:1fr auto;column-gap:1.6rem;align-items:start;}
.dish__name{
  grid-column:2;grid-row:1/span 3;
  writing-mode:vertical-rl;letter-spacing:.05em;
  margin-block-end:-.05em;
}
.dish__reading{grid-column:1;grid-row:1;}
.dish__price{grid-column:1;grid-row:2;}
.dish__desc{grid-column:1;grid-row:3;margin-top:.6rem;}

/* -----------------------------------------------------------
   6. 営業案内「刻」（写真を敷かず、生成りのまま余白で見せる）
   ----------------------------------------------------------- */
.hours__ch{grid-column:28/span 2;grid-row:1/span 2;align-self:start;}
.hours__dl{grid-column:3/span 12;grid-row:1;}
.hours__note{grid-column:3/span 12;grid-row:2;margin-top:3rem;}
.hours__cta{grid-column:17/span 10;grid-row:1;margin-top:.5rem;}
.hours__cta p+p{margin-top:1.5rem;}

/* -----------------------------------------------------------
   7. タブレット・SP（≤1024）＝30分割を捨てて1カラム
   ヒーローだけ縦積みに組み直す
   ----------------------------------------------------------- */
@media screen and (max-width:1024px){

  /* ---- ヒーロー ---- */
  .hero.g{display:flex;flex-direction:column;}
  /* ⚠WebKit：align-self:start × aspect-ratio の子は幅が決まらず0×0に潰れる。
     SPでは明示的に stretch させて幅を与える */
  .hero>*{margin:0;width:100%;align-self:stretch;}
  .hero__panel{display:none;}
  .hero__head::before{display:none;}
  .hero__head{
    order:1;padding:2rem 0 0;
    align-items:flex-end;
  }
  .hero__title{gap:2rem;}
  .hero__roman{margin-top:2.5rem;}
  .hero__figB{order:2;margin-top:5rem;}
  .hero__figA{order:3;width:72%;margin:8% 0 0 auto;}
  .hero__cta{order:4;margin-top:6rem;}
  .hero__btns{gap:1rem 3rem;margin-top:3rem;}

  /* ---- 章見出し（縦組み）は右に寄せる ---- */
  .intro__ch,.points__ch,.taste__ch,.hours__ch{
    width:-moz-fit-content;width:fit-content;
    margin:0 0 4rem auto;
  }

  /* ---- お知らせ：SPは横罫 ---- */
  .news-one__rule{width:100%;height:1px;margin-bottom:2.4rem;}
  .news-one__more{margin-top:2.5rem;}

  /* ---- 導入 ---- */
  /* 狭い画面では紋が見出しと本文の背後に重なって読みにくいので出さない
     （紙のテクスチャは body::before で全面に効いている） */
  .intro__crest{display:none;}
  .intro__display{margin-bottom:4rem;}
  .intro__body{margin:0 0 4rem;}
  .intro__body p+p{margin-top:2em;}
  .intro__cta{margin-bottom:8rem;}

  /* ---- 見どころ ---- */
  .point{display:block;}
  .point+.point{margin-top:10rem;}
  .point--a,.point--b,.point--c{margin-top:0;}
  .point--a .point__fig{width:100%;}
  .point--b .point__fig{width:88%;margin-left:auto;}
  .point--c .point__fig{width:80%;}
  .point--a .point__txt,
  .point--c .point__txt{margin-top:3.5rem;}
  .point--b .point__txt{margin:0 0 3.5rem;}

  /* ---- お品書き抜粋 ---- */
  .taste__row{display:block;}
  .taste__row--b,.taste__row--c{margin-top:9rem;}
  .taste__row--a .taste__dishes{gap:6rem;margin-top:4rem;}
  .taste__row--a .dish--2{margin-left:12%;}
  .taste__row--a .taste__fig--1{width:100%;}
  .taste__row--b .taste__fig--2{width:80%;margin:4rem 0 0 auto;}
  .taste__row--b .taste__fig--3{width:60%;margin-top:4rem;}
  .taste__row--b .dish--3{margin-top:0;}
  .taste__row--c .taste__fig--4{width:90%;margin-left:auto;}
  .taste__row--c .dish--4{margin-top:4rem;}
  .taste__cta{margin-top:7rem;}

  /* ---- 営業案内 ---- */
  .hours__note{margin-top:2.5rem;}
  .hours__cta{margin-top:5rem;}
}

@media screen and (max-width:736px){
  .hero__figA{width:78%;}
  .point--b .point__fig{width:100%;}
  .point--c .point__fig{width:90%;}
  .taste__row--b .taste__fig--2{width:90%;}
  .taste__row--b .taste__fig--3{width:70%;}
  .taste__row--c .taste__fig--4{width:100%;}
}

/* -----------------------------------------------------------
   8. 動きを減らす設定（base.css に無い当ページ固有の演出を止める）
   ----------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .hero__head::before{transform:none !important;}
}