/* ガガマル食堂 方向案C「寄る」 2026-10-03 */

:root{
  --c-white:#fff;
  --c-ink:#111;
  --c-sub:#555;
  --c-line:rgba(0, 0, 0, .16);
  --c-vermillion:#b5321f;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--c-white);
  color:var(--c-ink);
  font-family:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
a:focus-visible{outline:2px solid var(--c-ink);outline-offset:2px}

.nb{display:inline-block}
.ln{display:block;word-break:keep-all}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
}

/* ---------- 小ラベル ---------- */
.label, .plate-label{
  font-family:"Zen Kaku Gothic New",sans-serif;
  font-weight:500;
  font-size:13px;
  letter-spacing:.12em;
  color:var(--c-sub);
  margin:0 0 10px;
}
.dot{color:var(--c-vermillion)}

/* ---------- ヘッダー ---------- */
.site-head{
  position:relative;
  min-height:56px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  background:var(--c-white);
  border-bottom:1px solid var(--c-line);
}
.site-head-name{
  font-family:"Kaisei Tokumin",serif;
  font-weight:800;
  font-size:18px;
  letter-spacing:.02em;
  text-decoration:none;
  color:var(--c-ink);
}
.menu-btn{
  min-width:44px;
  min-height:44px;
  display:flex;
  align-items:center;
  gap:6px;
  background:none;
  border:0;
  font-size:22px;
  line-height:1;
  color:var(--c-ink);
  cursor:pointer;
  font-family:inherit;
}
.menu-btn-label{font-size:12px;letter-spacing:.06em}
.menu-btn:focus-visible{outline:2px solid var(--c-ink);outline-offset:2px}

/* 既定（JS無し）＝通常の流れに入れる（本文の上に重ねない。JSなしでも全部見える） */
.menu-list{
  position:static;
  flex:1 0 100%;
  background:var(--c-white);
  border-bottom:1px solid var(--c-line);
  display:flex;
  flex-direction:column;
  padding:4px 20px 12px;
}
.menu-list a{
  display:block;
  padding:12px 0;
  border-top:1px solid var(--c-line);
  text-decoration:none;
  font-size:16px;
  color:var(--c-ink);
}
.menu-list a:first-child{border-top:0}

/* JSが有効な時だけ、ドロップダウンの重ね表示＋開閉を切り替える */
html.js .menu-list{
  position:absolute;
  top:56px;
  right:0;
  left:0;
  z-index:500;
  display:none;
}
html.js .menu-list.is-open{display:flex}

/* ---------- 寄る ---------- */
.close{
  position:relative;
  /* ラウンド2：完成状態（最大拡大）を80pxぶん余分に保つ（script.jsのHOLD_PXと対）*/
  height:calc(280svh + 80px);
}
.stage{
  position:sticky;
  top:0;
  /* 帯+ヘッダー(実測 約187px)と、下の固定ドック(実測57px+セーフエリア)ぶんを引く。
     札の3行目がドックの裏に隠れないように少し余裕を持たせている（報告.md参照） */
  height:100svh;
  min-height:360px;
  overflow:hidden;
  background:var(--c-ink);
}
.stage .hk-photo, .stage .photo{
  position:absolute;
  inset:0;
  margin:0;
  height:100%;
  width:100%;
}
.stage .photo img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  /* ラウンド2：何へ寄るか＝JSONの close.origin（--close-origin）。既定は52% 58% */
  object-position:var(--close-origin, 52% 58%);
  transform-origin:var(--close-origin, 52% 58%);
  transform:scale(1.25);
  will-change:transform;
}
.stage .hk-photo .hk-photo-note{z-index:3}
/* 白札b＝写真を24px下から開始し、札が写真に食い込む見え方にする */
.stage.stage-bite .hk-photo, .stage.stage-bite .photo{inset:24px 0 0 0}

.plate{
  position:absolute;
  left:0;
  top:0;
  z-index:4;
  /* ラウンド3：幅は「型の下限」と「見出しの一番長い行の必要幅」の大きい方（build.pyで計算・上限92%） */
  max-width:var(--plate-w, 85%);
  width:fit-content;
  background:var(--c-white);
  padding:18px 20px;
}
/* ラウンド2：白札の型崩し（a/b/c。slugのコード和%3、plateキーで上書き可）。
   ラウンド3：型の違いは下限幅(--plate-wの既定値)と位置だけに留める。実際の幅は常に--plate-w */
.plate-a{max-width:var(--plate-w, 72%)}
.plate-b{max-width:var(--plate-w, 58%)}
.plate-c{max-width:var(--plate-w, 84%);top:42px}
.plate-label{margin-bottom:8px}
.plate-head{
  margin:0;
  font-family:"Kaisei Tokumin",serif;
  font-weight:800;
  /* ラウンド3：文字が収まらない時だけ44→40→36pxに下げる（build.pyで計算） */
  font-size:var(--plate-head-size, 44px);
  line-height:1.3;
  letter-spacing:.02em;
  color:var(--c-ink);
  word-break:keep-all;
}
.plate-head .ln{
  display:block;
  white-space:nowrap;
  clip-path:inset(0 0 0% 0);
  transition:clip-path .5s ease-out;
}
/* 保険：スクロール処理が止まっても2.5秒後には3行とも強制的に見える状態にする */
html.hk-forceshow .plate-head .ln{clip-path:inset(0) !important}

/* ---------- 事実 ---------- */
.facts{
  padding:64px 20px 48px;
  background:var(--c-white);
}
.facts-head{
  margin:0 0 36px;
  font-family:"Kaisei Tokumin",serif;
  font-weight:800;
  font-size:34px;
  line-height:1.3;
  letter-spacing:.02em;
  word-break:keep-all;
}

.nums{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  margin-bottom:28px;
}
.num-item{
  min-width:0;
  padding:0 12px;
  border-left:1px solid var(--c-line);
}
.num-item:first-child{border-left:0;padding-left:0}
.num{white-space:nowrap;
  margin:0;
  font-family:"Bodoni Moda",serif;
  font-weight:500;
  font-size:clamp(40px, 12.8vw, 56px);
  line-height:1.05;
}
.num-note{
  margin:6px 0 0;
  font-size:13px;
  letter-spacing:.04em;
  color:var(--c-sub);
}

.fact-table{margin:0 0 28px}
.fact-row{padding:16px 0;border-top:1px solid var(--c-line)}
.fact-table .fact-row:last-child{border-bottom:1px solid var(--c-line)}
.fact-b{
  margin:0 0 6px;
  font-family:"Zen Kaku Gothic New",sans-serif;
  font-weight:500;
  font-size:20px;
}
.fact-p{
  margin:0;
  font-size:15px;
  color:var(--c-sub);
  line-height:1.7;
}

.pending-box{
  border:1px dashed var(--c-line);
  padding:14px 16px;
  margin-bottom:28px;
}
.pending-box p{
  margin:0;
  font-size:15px;
  color:var(--c-sub);
  line-height:1.8;
}

/* ---------- 案内文 ---------- */
.intro{padding:0 20px 48px}
.body-text{font-size:17px;line-height:1.9;margin:0 0 14px}
.link-u{
  display:inline-block;
  font-size:16px;
  color:var(--c-ink);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ---------- 見開き ---------- */
/* overflow-x:hidden は .spread だけに付ける（html/bodyに付けると .stage の
   position:sticky が壊れるため。.spread は .close の祖先ではないので影響しない） */
.spread{padding:0 20px 48px;overflow-x:hidden}
.spread-item{
  position:relative;
  display:block;
  text-decoration:none;
  color:var(--c-ink);
}
.spread-a{
  width:86%;
  margin:0 0 40px;
}
.spread-b{
  width:72%;
  margin:0 0 0 auto;
}
.spread-item .hk-photo{height:64vw}
.spread-b .hk-photo{height:50vw}
.spread-item .hk-photo, .spread-item .photo, .spread-item img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.spread-cap{
  display:block;
  margin-top:10px;
  font-size:16px;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ラウンド2／3：中盤に1回だけの「誌面の事故」（モバイルのみ。横スクロールは.spread側で止める）。
   はみ出しは写真を包む .spread-photo-wrap だけに付け、<a>（注記・リンクの基準）は動かさない。 */
.spread-photo-wrap{position:relative;display:block}
@media (max-width:1023.98px){
  .spread-photo-wrap.accident{
    width:118vw;
    max-width:118vw;
    margin-left:-18vw;
    margin-right:0;
  }
  /* 写真がはみ出すぶん、注記は「見えている範囲」の左端から10pxに置き直す（共通部品hk-photo-note自体は変えない）。
     .spread の左パディング20pxぶんを差し引くため 18vw - 10px（.spreadの構造に合わせて調整済み） */
  .spread-photo-wrap.accident .hk-photo-note{
    left:calc(18vw - 10px);
  }
}
.spread-vertical{
  position:absolute;
  top:12px;
  right:12px;
  z-index:3;
  writing-mode:vertical-rl;
  background:var(--c-white);
  color:var(--c-ink);
  font-family:"Kaisei Tokumin",serif;
  font-weight:800;
  font-size:14px;
  line-height:1.7;
  letter-spacing:.06em;
  padding:8px 6px;
  word-break:keep-all;
}

/* ---------- 場所 ---------- */
.place{padding:0 20px 56px}
.addr{font-size:17px;margin:0 0 6px}
.map-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 24px;
  margin:16px 0 14px;
  background:var(--c-white);
  color:var(--c-ink);
  border:2px solid var(--c-vermillion);
  text-decoration:none;
  font-size:15px;
  font-weight:500;
  transform:translateY(0);
  transition:background-color .15s, transform .1s;
}
.map-btn:hover{background:#faf2f0}
.map-btn:active{transform:translateY(2px)}
.map-btn:focus-visible{outline:2px solid var(--c-ink);outline-offset:2px}
.note-pending{font-size:14px;color:var(--c-sub);line-height:1.8;margin:0}

/* ---------- フッター（ラウンド2：雑誌の裏表紙） ---------- */
.site-foot{
  border-top:1px solid var(--c-line);
  padding:40px 20px 32px;
  min-height:60vh;
  display:flex;
  flex-direction:column;
}
.ft-cover{margin:0 0 28px}
.ft-cover-top{
  margin:0 0 6px;
  font-size:13px;
  letter-spacing:.14em;
  color:var(--c-sub);
}
.ft-cover-main{
  margin:0 0 10px;
  font-family:"Kaisei Tokumin",serif;
  font-weight:800;
  font-size:40px;
  line-height:1.25;
  word-break:keep-all;
}
.ft-cover-tagline{margin:0;font-size:15px;color:var(--c-sub)}

.ft-info-table{margin:0 0 auto;padding-bottom:28px}
.ft-info-row{display:flex;gap:16px;padding:14px 0;border-top:1px solid var(--c-line)}
.ft-info-table .ft-info-row:last-child{border-bottom:1px solid var(--c-line)}
.ft-info-k{flex:0 0 88px;font-size:14px;color:var(--c-sub);letter-spacing:.04em}
.ft-info-v{flex:1;min-width:0;font-size:16px;line-height:1.8}

.ft-note p{font-size:12.5px;line-height:1.8;color:var(--c-sub);margin:0 0 10px}
.ft-pages{
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
  margin:18px 0 18px;
  padding-top:16px;
  border-top:1px solid var(--c-line);
}
.ft-pages a{font-size:14px;text-decoration:underline;text-underline-offset:3px}
.ft-credit{font-size:12px;color:var(--c-sub);margin:0}

/* ---------- 1024px以上 ---------- */
@media (min-width:1024px){
  .site-head, .facts, .intro, .spread, .place, .ft-cover, .ft-info-table, .ft-note, .ft-pages{
    max-width:1100px;
    margin-left:auto;
    margin-right:auto;
    padding-left:40px;
    padding-right:40px;
  }
  /* 帯+ヘッダー(実測 約166px)とドック(実測57px+余裕)ぶんを引く。モバイルと同じ考え方 */
  .stage{height:100svh}

  .plate{max-width:min(640px, 60%)}
  .plate-head{font-size:72px}

  .facts{
    padding-top:96px;
    padding-bottom:72px;
    display:grid;
    grid-template-columns:repeat(12, 1fr);
    column-gap:32px;
  }
  .facts-left{grid-column:1 / 6}
  .facts-right{grid-column:6 / 13}
  .facts .label, .facts .facts-head, .facts .nums{grid-column:1 / 6}
  .facts .fact-table, .facts .pending-box{grid-column:6 / 13}
  .facts-head{font-size:40px}

  .intro{display:grid;grid-template-columns:repeat(12, 1fr);column-gap:32px}
  .intro .body-text, .intro .link-u{grid-column:6 / 13}

  .spread{display:flex;align-items:flex-start;gap:40px}
  .spread-a{width:60%;margin:0}
  .spread-b{width:36%;margin:80px 0 0}
  .spread-item .hk-photo{height:40vw}
  .spread-b .hk-photo{height:26vw}
}

/* ========================================================
   下層ページ（メニュー2ページ・お店について）v3 2026-10-03
   ======================================================== */

/* ---------- 冒頭：写真＋札（静止） ---------- */
.page-hero{
  position:relative;
  height:66svh;
  min-height:320px;
  overflow:hidden;
  background:var(--c-ink);
}
.page-hero .hk-photo, .page-hero .photo{
  position:absolute;
  inset:0;
  margin:0;
  height:100%;
  width:100%;
}
.page-hero .photo img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.page-plate{
  position:absolute;
  left:0;
  top:0;
  z-index:4;
  max-width:92%;
  width:fit-content;
  background:var(--c-white);
  padding:16px 18px;
}
.page-head{
  margin:0;
  font-family:"Kaisei Tokumin",serif;
  font-weight:800;
  font-size:36px;
  line-height:1.35;
  letter-spacing:.02em;
}

/* ---------- メニューのページ ---------- */
.menu-page{padding:40px 20px 48px}
.menu-head{
  margin:0 0 20px;
  font-family:"Kaisei Tokumin",serif;
  font-weight:800;
  font-size:28px;
  line-height:1.45;
  word-break:keep-all;
}
.item-list{list-style:none;margin:0 0 24px;padding:0}
.item-row{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:4px 16px;
  padding:16px 0;
  border-top:1px solid var(--c-line);
}
.item-list .item-row:last-child{border-bottom:1px solid var(--c-line)}
.item-name{
  flex:1 1 auto;
  min-width:0;
  font-family:"Kaisei Tokumin",serif;
  font-weight:800;
  font-size:22px;
}
.item-price, .item-note{flex:0 1 auto;min-width:0;text-align:right}
.item-price{white-space:nowrap;font-size:14px;color:var(--c-sub)}
.item-price b{
  font-family:"Bodoni Moda",serif;
  font-weight:500;
  font-size:28px;
  color:var(--c-ink);
  margin-right:2px;
}
.item-note{font-size:14px;color:var(--c-sub)}
.note-box{border:1px solid var(--c-line);padding:16px 18px;margin-bottom:24px}
.note-box-ttl{margin:0 0 6px;font-size:14px;font-weight:700;letter-spacing:.02em}
.note-box-p{margin:0;font-size:15px;color:var(--c-sub);line-height:1.8}

/* ---------- お店についてページ ---------- */
.about-page{padding:40px 20px 48px}
.about-lead{margin-bottom:28px}
.points{margin-bottom:8px}
.point{padding:16px 0;border-top:1px solid var(--c-line)}
.points .point:last-child{border-bottom:1px solid var(--c-line)}
.point-b{
  margin:0 0 6px;
  font-family:"Kaisei Tokumin",serif;
  font-weight:800;
  font-size:20px;
}
.point-p{margin:0;font-size:16px;line-height:1.85}

.info-table{margin:28px 0}
.info-row{display:flex;gap:16px;padding:14px 0;border-top:1px solid var(--c-line)}
.info-table .info-row:last-child{border-bottom:1px solid var(--c-line)}
.info-k{flex:0 0 88px;font-size:14px;color:var(--c-sub);letter-spacing:.04em}
.info-v{flex:1;min-width:0;font-size:16px;line-height:1.8}

.faq-list{margin:28px 0}
.faq-item{padding:14px 0;border-top:1px solid var(--c-line)}
.faq-list .faq-item:last-child{border-bottom:1px solid var(--c-line)}
.faq-item summary{
  cursor:pointer;
  font-size:16px;
  font-weight:500;
  padding:4px 28px 4px 0;
  position:relative;
  list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";
  position:absolute;
  right:4px;
  top:2px;
  font-size:18px;
  color:var(--c-sub);
}
.faq-item[open] summary::after{content:"−"}
.faq-item summary:focus-visible{outline:2px solid var(--c-ink);outline-offset:2px}
.faq-item p{margin:10px 0 0;font-size:15px;line-height:1.85;color:var(--c-sub)}

.about-page .addr{margin-top:28px}
.about-page .map-btn{margin-bottom:14px}

/* ---------- ページ送り（全ページ共通） ---------- */
.pagenav{padding:0 20px 56px}
.pn-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pn-item{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 0;
  border-top:1px solid var(--c-line);
  text-decoration:none;
  color:var(--c-ink);
  transform:translateY(0);
  transition:transform .1s;
}
.pn-list .pn-item:last-child{border-bottom:1px solid var(--c-line)}
.pn-item:active{transform:translateY(1px)}
.pn-item:hover .pn-text b{text-decoration:underline;text-underline-offset:3px}
.pn-thumb{flex:0 0 84px;width:84px;height:84px;overflow:hidden;display:block}
.pn-thumb picture, .pn-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pn-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.pn-text b{font-family:"Kaisei Tokumin",serif;font-weight:800;font-size:16px;word-break:keep-all}
.pn-text span{font-size:13px;color:var(--c-sub)}

/* ---------- 1024px以上：下層ページ ---------- */
@media (min-width:1024px){
  .menu-page, .about-page, .pagenav{
    max-width:1100px;
    margin-left:auto;
    margin-right:auto;
    padding-left:40px;
    padding-right:40px;
  }
  .page-hero{height:72svh}
  .page-plate{max-width:min(560px, 55%)}
  .page-head{font-size:44px}

  .menu-page{
    padding-top:72px;
    display:grid;
    grid-template-columns:repeat(12, 1fr);
    column-gap:32px;
  }
  .menu-page .label, .menu-page .menu-head{grid-column:1 / 6}
  .menu-page .body-text, .menu-page .item-list, .menu-page .note-box{grid-column:6 / 13}

  .about-page{
    padding-top:72px;
    display:grid;
    grid-template-columns:repeat(12, 1fr);
    column-gap:32px;
  }
  .about-page .body-text{grid-column:6 / 13}
  .about-page .about-lead{grid-column:1 / 13;max-width:760px}
  .about-page .points{grid-column:1 / 6}
  .about-page .info-table, .about-page .faq-list, .about-page .addr, .about-page .map-btn{grid-column:6 / 13}

  .pn-list{flex-direction:row;gap:32px}
  .pn-item{flex:1;flex-direction:column;align-items:flex-start;border-top:0;padding:0}
  .pn-list .pn-item:last-child{border-bottom:0}
  .pn-thumb{width:100%;height:160px}
}