/* ガガマル食堂 方向案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}

.nb{display:inline-block}

@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;
  height:56px;
  display:flex;
  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}

.menu-list{
  position:absolute;
  top:56px;
  right:0;
  left:0;
  background:var(--c-white);
  border-bottom:1px solid var(--c-line);
  display:flex;
  flex-direction:column;
  padding:4px 20px 12px;
  z-index:500;
}
.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が有効な時だけ、開閉を切り替える（JS無しなら常時表示） */
html.js .menu-list{display:none}
html.js .menu-list.is-open{display:flex}

/* ---------- 寄る ---------- */
.close{
  position:relative;
  height:280svh;
}
.stage{
  position:sticky;
  top:40px;
  /* 帯+ヘッダー(実測 約187px)と、下の固定ドック(実測57px+セーフエリア)ぶんを引く。
     札の3行目がドックの裏に隠れないように少し余裕を持たせている（報告.md参照） */
  height:calc(100svh - 40px);
  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;
  object-position:52% 58%;
  transform-origin:52% 58%;
  transform:scale(1.25);
  will-change:transform;
}
.stage .hk-photo .hk-photo-note{z-index:3}

.plate{
  position:absolute;
  left:0;
  top:0;
  z-index:4;
  max-width:85%;
  width:fit-content;
  background:var(--c-white);
  padding:18px 20px;
}
.plate-label{margin-bottom:8px}
.plate-head{
  margin:0;
  font-family:"Kaisei Tokumin",serif;
  font-weight:800;
  font-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);
}

.short-facts{
  list-style:none;
  margin:0 0 24px;
  padding:0;
}
.short-facts li{
  padding:14px 0;
  border-top:1px solid var(--c-line);
  font-family:"Zen Kaku Gothic New",sans-serif;
  font-weight:500;
  font-size:20px;
}
.short-facts li:last-child{border-bottom:1px solid var(--c-line)}

.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;
}

.about-detail .lead{
  font-size:17px;
  line-height:1.9;
  margin:0 0 14px;
}

/* ---------- 案内文 ---------- */
.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;
}

/* ---------- 見開き ---------- */
.spread{padding:0 20px 48px}
.spread-item{
  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;
}

/* ---------- 場所 ---------- */
.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}

/* ---------- フッター ---------- */
.site-foot{
  border-top:1px solid var(--c-line);
  padding:28px 20px 32px;
}
.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-note, .ft-pages{
    max-width:1100px;
    margin-left:auto;
    margin-right:auto;
    padding-left:40px;
    padding-right:40px;
  }
  /* 帯+ヘッダー(実測 約166px)とドック(実測57px+余裕)ぶんを引く。モバイルと同じ考え方 */
  .stage{height:calc(100svh - 40px)}

  .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 .short-facts, .facts .pending-box, .facts .about-detail{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}
}

/* 見比べ用の切り替えバー（デモだけ） */
.hk-switch{position:fixed;top:0;left:0;right:0;z-index:9600;height:40px;display:flex;align-items:center;gap:6px;padding:0 10px;background:#111;color:#fff;font:600 13px/1 "Hiragino Sans","Noto Sans JP",sans-serif;letter-spacing:0}
.hk-switch span{color:#aaa;margin-right:4px;white-space:nowrap;font-weight:400}
.hk-switch a{flex:1;text-align:center;color:#fff;text-decoration:none;padding:8px 0;border:1px solid #666}
.hk-switch a.on{background:#fff;color:#111;border-color:#fff}
body{padding-top:40px}