@charset "utf-8";
/* ===========================================================
   古民家喫茶 あおき — page-access.css（access.html 固有のレイアウトのみ）
   正本：_rough/references/sources.md v2
   色・級数・余白は base.css のトークンを使う（再定義しない）
   =========================================================== */

/* ---------- 1. 店舗情報（罫で囲まない・2列） ---------- */
.acc-info__ttl{grid-column:3/span 24;grid-row:1;margin-bottom:2.4rem;}
.acc-info__dl{grid-column:3/span 12;grid-row:2;}
.acc-info__tel{grid-column:17/span 14;grid-row:2;}
.acc-info__tel .tel{display:inline-block;}

/* ---------- 2. 章の題（縦組み＋一文字副題） ---------- */
.acc-chap{
  display:flex;flex-direction:row-reverse;
  justify-content:flex-start;align-items:flex-start;
  gap:1.4rem;
}
.acc-chap__sub{
  writing-mode:vertical-rl;
  color:var(--olive);opacity:.9;line-height:1.2;
  margin-top:.6em;
}
.acc-chap__c{font-size:2.8rem;letter-spacing:.1em;}
.acc-chap__r{font-size:var(--fs-small);letter-spacing:.2em;margin-top:1.2em;}

/* ---------- 3. 交通（3経路・縦に流し、列位置を変える） ---------- */
.acc-traffic__chap{grid-column:26/span 4;grid-row:1/span 3;align-self:start;}
.acc-way--1{grid-column:3/span 12;grid-row:1;}
.acc-way--2{grid-column:11/span 12;grid-row:2;margin-top:9rem;}
.acc-way--3{grid-column:6/span 12;grid-row:3;margin-top:9rem;}

/* ---------- 4. 経路の言葉（SVGの経路図＋同内容のテキスト） ---------- */
.acc-route__chap{grid-column:1/span 3;grid-row:1;justify-content:flex-end;}
.acc-route__body{grid-column:5/span 26;grid-row:1;min-width:0;}
.acc-route__frame{width:100%;}
.acc-route__svg{display:block;width:100%;height:auto;}

.steps{margin-top:7rem;}
.steps__item{display:flex;align-items:baseline;padding:.5em 0;}
.steps__t{font-size:var(--fs-body-s);line-height:2;}

/* ---------- 5. 駐車場（白の色面に載せる） ---------- */
.acc-park__box{grid-column:7/span 18;grid-row:1;position:relative;}
.acc-park__panel{position:absolute;inset:0;}
.acc-park__in{position:relative;padding:6rem 7rem;}

/* ---------- 6. 徒歩圏の見どころ（枠・角丸・連番なし／上下をずらす） ---------- */
.acc-spots{align-items:start;}
.acc-spots__chap{grid-column:26/span 4;grid-row:1;}
.acc-spot{grid-row:1;margin-top:var(--mt,0);}
.acc-spot--1{grid-column:2/span 5;}
.acc-spot--2{grid-column:8/span 5;}
.acc-spot--3{grid-column:14/span 5;}
.acc-spot--4{grid-column:20/span 5;}
.acc-spot__name{font-size:var(--fs-sub);line-height:1.5;margin:2.4rem 0 .4rem;}
.acc-spot__min{font-size:var(--fs-small);letter-spacing:.1em;color:var(--olive);margin-bottom:1rem;}

/* ---------- 7. タブレット・SP（≤1024） ---------- */
@media screen and (max-width:1024px){
  .acc-info__ttl{margin-bottom:1.6rem;}
  .acc-info__tel{margin-top:4rem;}

  .acc-chap{justify-content:flex-end;margin-bottom:5rem;}

  .acc-way--2,.acc-way--3{margin-top:8rem;}

  /* SVGは潰さず、帯の中で最小幅を確保して横に送る */
  .acc-route__frame{
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:1.2rem;border-bottom:1px solid var(--rule);
  }
  .acc-route__svg{min-width:840px;}
  .steps{margin-top:5rem;}

  .acc-park__in{padding:12% 9%;}

  /* 4件は幅と寄せを変えて単調にしない */
  .acc-spot{
    margin-top:0;margin-bottom:14%;
    width:var(--w,100%);margin-left:var(--ml,0);
  }
  .acc-spot:last-child{margin-bottom:0;}
  .acc-spot__name{margin-top:1.6rem;}
}

@media screen and (max-width:736px){
  /* 電話は級数が大きいので、SPでは項目名を上に置く */
  .acc-info__tel .dl__row{display:block;}
  .acc-park__in{padding:14% 8%;}
}