@charset "UTF-8";
/* ////////////////////////////////////////////////////////////////////
///// CAFE（Figma「PC_CAFE - DETAIL」2763:11）
///// 共通部品（背景・左のロゴ・ヒーローの写真スライダー・単位 --d）は common/css/detail.css
///// 数値は Figma（PC 1280px）の値。calc(N * var(--d)) で伸縮する
//////////////////////////////////////////////////////////////////// */

/* ヒーローの写真スライダー（Figma：上 126・左 288、写真の高さ 481、間隔 20.5、写真の下 15 にページ送り） */
.dtHeroSliderArea {
  --heroLeft: 288;
  --heroH: 481;
  --heroGap: 20.5;
  --ar1: 740 / 481;
  --pagerTop: 15;
}

/* ==================================================
リード（THE PATH COFFEE のロゴ＋英文・和文の2カラム）
================================================== */
.leadArea {
  margin-top: calc(56 * var(--d));
}
.shopLogoObj {
  width: calc(200 * var(--d));
  line-height: 0;
}
.shopLogoObj img {
  display: block;
  width: 100%;
  height: auto;
}
.leadGlp {
  display: flex;
  flex-flow: column;
  gap: calc(32 * var(--d));
  margin-top: calc(32 * var(--d));
}
.leadTtlObj {
  font-size: calc(16 * var(--d));
  font-weight: 640;
  line-height: 1.7;
}
.leadTxtObj {
  margin-top: calc(16 * var(--d));
  font-size: max(10px, calc(12 * var(--d)));
  line-height: 2;
}
.leadJpTxtObj {
  font-size: max(9px, calc(11 * var(--d)));
  line-height: 2.4;
  letter-spacing: 0.02em;
  color: #000;
}

/* ==================================================
Menu（店頭のメニュー表どおり Drink と Foods & Sweets の2グループ。PC は5列グリッドの2列分ずつ）
・Drink と Foods & Sweets の間は 2026-10-13 ユーザー指定で以前の倍（SP 40 → 80、TAB 32 → 64、PC 16 → 32）
・グループ名は情報欄の見出し（.dtInfoTtlObj：Menu の見出しの代わり）
・品名（＋小さな補足）の下に和名。値段は右寄せ。Drink は S / M / L の3列で、サイズ名と値段を列の中央に揃える
================================================== */
.cafeMenuArea {
  margin-top: calc(72 * var(--d));
}
.menuLists {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: calc(80 * var(--d));
}
.menuGrpHead,
.menuSet {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: calc(12 * var(--d));
}
.menuGrpHead {
  align-items: end;
  padding-bottom: calc(4 * var(--d));
}
.menuSet {
  align-items: start;
  padding: calc(8 * var(--d)) 0;
  font-size: max(10px, calc(12 * var(--d)));
  line-height: 1.7;
}
.menuSet .nameObj {
  display: block;
}
.menuSet small {
  font-size: max(8px, calc(10 * var(--d)));
}
.menuSet .jpObj {
  display: block;
  margin-top: calc(2 * var(--d));
  font-size: max(8px, calc(9 * var(--d)));
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: #000;
}
/* 値段：サイズの数（--cols）だけ列を作って右寄せ。サイズが無いグループは縦に積む
   サイズのあるグループ（.is-sized）は、サイズ名が値段の真ん中に来るよう両方を列の中央揃えに */
.priceGlp {
  display: grid;
  grid-template-columns: repeat(var(--cols, 1), minmax(calc(32 * var(--d)), auto));
  column-gap: calc(8 * var(--d));
  text-align: right;
  white-space: nowrap;
}
.menuGrp.is-sized .priceGlp {
  text-align: center;
}
.priceGlp.is-size {
  font-size: max(8px, calc(10 * var(--d)));
  font-weight: 640;
  line-height: 1.7;
}

/* ==================================================
店舗情報と地図
================================================== */
.accessArea {
  margin-top: calc(72 * var(--d));
}
.accessTtlObj {
  font-size: calc(16 * var(--d));
  font-weight: 640;
  line-height: 1.7;
}
.accessTxtObj {
  margin-top: calc(10 * var(--d));
  font-size: max(9px, calc(10 * var(--d)));
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: #000;
}
.mapObj {
  --ar: 622 / 354;
  margin-top: calc(24 * var(--d));
}

@media screen and (min-width: 769px) {
  .menuLists {
    grid-template-columns: repeat(2, 1fr);
    column-gap: calc(64 * var(--d));
  }
}

@media screen and (min-width: 961px) {
  /* ロゴはページ送りの下 82.78、2カラムはロゴの下 48（Figma：ロゴ 710.78 / 英文 779 / 和文 778） */
  .leadArea {
    margin-top: calc(82.78 * var(--d));
    padding-left: calc(4 * var(--d));
  }
  .shopLogoObj {
    width: calc(256 * var(--d));
  }
  .leadGlp {
    flex-flow: row;
    gap: calc(48 * var(--d));
    margin-top: calc(48.16 * var(--d));
  }
  .leadGlp .txtSet:first-child {
    width: calc(456 * var(--d));
  }
  .leadGlp .txtSet:last-child {
    width: calc(408 * var(--d));
    margin-top: calc(-1 * var(--d));
  }
  .leadTxtObj {
    margin-top: calc(27.2 * var(--d)); /* Figma：見出しの下に 16px の空行 */
  }
  .leadJpTxtObj {
    font-size: max(8px, calc(10 * var(--d)));
  }

  /* Menu：上 1090（グループ名の上）
     下層の5列グリッド（288〜1248、1列 179.2・間隔 16。base.css の .styleGuide.is-lower）の2列分ずつ
     DRINK は1〜2列目、FOODS & SWEETS は3〜4列目 */
  .cafeMenuArea {
    margin-top: calc(119 * var(--d));
    padding-left: calc(4 * var(--d));
  }
  .menuLists {
    grid-template-columns: repeat(5, 1fr);
    column-gap: calc(16 * var(--d));
    width: calc(960 * var(--d));
  }
  .menuGrp {
    grid-column: span 2;
  }
  /* Foods & Sweets は3列目の左端から 16 右へ（Drink との間 16 ＋ 16 ＝ 32。Drink はグリッドの1〜2列目のまま） */
  .menuGrp + .menuGrp {
    margin-left: calc(16 * var(--d));
  }
  .menuSet {
    font-size: calc(12 * var(--d));
  }
  .menuSet small {
    font-size: calc(10 * var(--d));
  }

  /* 店舗情報：上 1476。文章は見出しの上から 37。地図は左 626・622×354 */
  .accessArea {
    display: flex;
    align-items: flex-start;
    gap: calc(48 * var(--d));
    margin-top: calc(134.4 * var(--d));
    padding-left: calc(7 * var(--d));
  }
  .accessArea .txtSet {
    flex: none;
    width: calc(287 * var(--d));
  }
  .accessTxtObj {
    margin-top: calc(9.8 * var(--d));
    font-size: max(8px, calc(10 * var(--d)));
  }
  .mapObj {
    flex: none;
    width: calc(622 * var(--d));
    margin-top: 0;
  }
}