/* 賑わい酒場 纏 v2（7人の制作チームで作り直した版・2026-10-11）
   決めごとの元：v2/team/05_design.md（デザイン）・03_structure.md（設計）・04_copy.md（コピー）
   色は全部、店の写真とロゴから測った値：壁の緑・白木（カウンター）・天井の焦げ茶・ロゴの赤。
   赤は「600」の数字と地図のボタンだけ。白はヘッダー（看板）だけ。
   区切りは枠の箱ではなく、天井の梁のような 4px の焦げ茶の線と、地の色の切り替え。 */
:root {
  --wall: #a6a962;
  --wall-pale: #d2d3a0;
  --shiraki: #f5e8cc;
  --edge: #d9924f;
  --ceiling: #3a1e0f;
  --ceiling-hover: #24120a;
  --red: #e40004;
  --red-dark: #c8000a;
  --sign: #ffffff;
  --ig: linear-gradient(45deg, #f58529 0%, #dd2a7b 32%, #8134af 68%, #515bd4 100%);

  --f-head: "M PLUS 1p", "Hiragino Sans", "Yu Gothic", sans-serif;
  --f-body: "IBM Plex Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --f-num: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --fs-600: clamp(80px, 6.667vw + 56px, 152px);
  --fs-600s: clamp(56px, 3.704vw + 42.67px, 96px);
  --fs-yen: clamp(30px, 2.037vw + 22.67px, 52px);
  --fs-h1: clamp(26px, 1.667vw + 20px, 44px);
  --fs-h2: clamp(26px, 2.037vw + 18.67px, 48px);
  --fs-h3: clamp(20px, .741vw + 17.33px, 28px);
  --fs-charge: clamp(20px, .926vw + 16.67px, 30px);
  --fs-fact: clamp(18px, .556vw + 16px, 24px);
  --fs-body: clamp(16px, .185vw + 15.33px, 18px);
  --fs-label: clamp(14px, .185vw + 13.33px, 16px);
  --fs-note: clamp(14px, .093vw + 13.67px, 15px);

  --content: 1152px;
  --gutter: clamp(16px, 3.333vw + 4px, 48px);
  --sec-y: clamp(56px, 5.185vw + 37.33px, 112px);
  --band-h: clamp(200px, 30vw + 92px, 380px);
  --head-h: 60px;
  --beam: 4px;
  --bar-h: 60px;
}
@media (min-width: 768px) { :root { --head-h: 72px; } }
@media (max-width: 767px) and (max-height: 700px) { :root { --band-h: 150px; --head-h: 52px; --fs-600: 68px; } .fv__price { padding: 10px 0 8px; } .fv__charge { margin-top: 6px; } .price { margin-top: 4px; } .fv__facts { padding: 8px 0; } }
@media (max-width: 767px) and (max-height: 580px) { :root { --band-h: 110px; } .fv__kicker { display: none; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--shiraki);
  color: var(--ceiling);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: .03em;
  line-break: strict;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
:lang(ja) { word-break: keep-all; }
:lang(en) { word-break: normal; letter-spacing: 0; line-height: 1.6; overflow-wrap: break-word; hyphens: manual; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
figure { margin: 0; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; }
.nw { white-space: nowrap; }
.num { font-family: var(--f-num); font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(var(--content), 100% - 2 * var(--gutter)); margin-inline: auto; }
section[id] { scroll-margin-top: calc(var(--head-h) + 16px); }
@media (max-width: 767px) { section[id] { scroll-margin-top: 12px; } }
:focus-visible { outline: 3px solid var(--ceiling); outline-offset: 3px; }

/* しっくいの壁（ごく薄いざらつきと、こての跡のむら） */
.plaster {
  background-color: var(--wall);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .23 0 0 0 0 .12 0 0 0 0 .06 0 0 0 .10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .23 0 0 0 0 .12 0 0 0 0 .06 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.plaster--pale { background-color: var(--wall-pale); }

/* ボタン（角は立てる） */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 56px; padding: 10px 24px;
  font-family: var(--f-body); font-weight: 700; font-size: var(--fs-body); line-height: 1.35; letter-spacing: .04em;
  text-decoration: none; border: 0; border-radius: 0; white-space: nowrap; cursor: pointer;
  transition: background-color .2s, filter .2s;
}
.btn--map { background: var(--red); color: #fff; }
.btn--map:hover { background: var(--red-dark); }
.btn--tel { background: var(--ceiling); color: var(--shiraki); }
.btn--tel:hover { background: var(--ceiling-hover); }
.btn--tel .num { font-weight: 700; font-variation-settings: "wdth" 90; font-size: 1.05em; }
.btn--ig { background: var(--ig); background-color: #dd2a7b; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.btn--ig:hover { filter: brightness(.92); }
.btn--ig svg { width: 24px; height: 24px; flex: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.btn--map:focus-visible, .btn--tel:focus-visible, .btn--ig:focus-visible { outline-color: var(--ceiling); }

/* ヘッダー（白い看板）：ロゴはここだけ。下に梁の線 */
.hd { background: var(--sign); border-bottom: var(--beam) solid var(--ceiling); position: relative; z-index: 40; }
@media (min-width: 768px) { .hd { position: sticky; top: 0; } }
.hd__in { width: min(var(--content), 100% - 2 * var(--gutter)); margin-inline: auto; height: var(--head-h); display: flex; align-items: center; gap: 8px; }
.hd__logo { display: flex; align-items: center; margin-right: auto; min-height: 44px; }
.hd__logo img { height: 44px; width: auto; }
@media (min-width: 768px) { .hd__logo img { height: 52px; } }
@media (max-width: 767px) and (max-height: 600px) { .hd__logo img { height: 40px; } }
.hd__nav { display: none; }
.hd__nav a { display: flex; align-items: center; min-height: 44px; padding: 0 2px; font-weight: 700; font-size: 16px; text-decoration: none; border-bottom: 4px solid transparent; }
.hd__nav a:hover { border-bottom-color: var(--ceiling); }
.hd__nav a:lang(en) { font-family: var(--f-num); font-weight: 700; font-variation-settings: "wdth" 87; font-size: 17px; }
@media (min-width: 1024px) { .hd__nav { display: flex; gap: 28px; margin-right: 24px; } }
.hd__tel { display: none; align-items: center; min-height: 44px; padding: 0 8px; text-decoration: none; font-weight: 700; white-space: nowrap; }
.hd__tel .num { font-weight: 700; font-variation-settings: "wdth" 75; font-size: 20px; margin-left: 6px; }
.hd__tel:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 768px) { .hd__tel { display: inline-flex; } }
.hd__ig { min-height: 44px; min-width: 44px; padding: 0 10px; font-size: 16px; }
.hd__ig span { display: none; }
@media (min-width: 768px) { .hd__ig { padding: 0 14px; } .hd__ig span { display: inline; } }
.hd__lang {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 6px;
  font-family: var(--f-num); font-weight: 700; font-variation-settings: "wdth" 87; font-size: 16px; letter-spacing: .04em; text-decoration: none;
  border: 2px solid var(--ceiling);
}
.hd__lang:lang(ja) { font-family: var(--f-body); letter-spacing: .02em; font-size: 15px; padding: 0 8px; }
.hd__lang:hover { background: var(--ceiling); color: var(--shiraki); }

/* ① 流れる帯（止めない。動きを減らす設定のときだけ止めて横に送る） */
.band { background: var(--ceiling); overflow: hidden; height: var(--band-h); }
.band__track { display: flex; gap: 4px; width: max-content; height: 100%; animation: band 64s linear infinite; will-change: transform; }
.band__track li { flex: none; height: 100%; aspect-ratio: 4 / 3; }
.band__track picture { display: block; height: 100%; }
.band__track img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
@keyframes band { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-50% - 2px), 0, 0); } }
@media (max-width: 767px) { .band__track { animation-duration: 40s; } }
@media (min-width: 768px) and (max-width: 1279px) { .band__track { animation-duration: 52s; } }
@media (prefers-reduced-motion: reduce) {
  .band { overflow-x: auto; scroll-snap-type: x mandatory; }
  .band__track { animation: none; }
  .band__track li { scroll-snap-align: start; }
  .band__track li[aria-hidden="true"] { display: none; }
}

/* ① 料金のかたまり（白木）と、時間・場所（緑の壁） */
.fv__price { background: var(--shiraki); border-bottom: 8px solid var(--edge); padding: 16px 0 14px; }
.fv__facts { padding: 12px 0; }
.fv__inner { width: min(var(--content), 100% - 2 * var(--gutter)); margin-inline: auto; }
.fv__kicker { font-weight: 700; font-size: var(--fs-label); letter-spacing: .08em; line-height: 1.5; }
.fv__kicker:lang(en) { letter-spacing: .02em; }
.fv__h1 { font-family: var(--f-head); font-weight: 900; font-size: var(--fs-h1); line-height: 1.3; letter-spacing: .02em; margin-top: 2px; }
.fv__h1 .yomi { font-family: var(--f-body); font-weight: 500; font-size: 15px; letter-spacing: .06em; margin-left: .5em; vertical-align: .2em; }
.fv__h1:lang(en) { font-family: var(--f-num); font-weight: 800; font-variation-settings: "wdth" 87; letter-spacing: 0; }
.price { display: flex; align-items: stretch; gap: 12px; margin-top: 10px; white-space: nowrap; }
.price__lbl { display: flex; flex-direction: column; justify-content: space-between; padding: 4px 12px 2px 0; border-right: var(--beam) solid var(--ceiling); line-height: 1.2; }
.price__lbl span:first-child { font-weight: 700; font-size: 16px; }
.price__lbl .num { font-weight: 800; font-variation-settings: "wdth" 75; font-size: 22px; }
.price__v { display: flex; align-items: flex-end; gap: 4px; }
.price__n { color: var(--red); font-weight: 800; font-variation-settings: "wdth" 75; font-size: var(--fs-600); line-height: .86; }
.price__yen { display: flex; flex-direction: column; justify-content: flex-end; line-height: 1.1; padding-bottom: .05em; }
.price__yen b { font-family: var(--f-head); font-weight: 900; font-size: var(--fs-yen); line-height: 1; }
.price__yen small { font-weight: 700; font-size: var(--fs-note); margin-top: 4px; }
.price__cur { font-family: var(--f-num); font-weight: 800; font-variation-settings: "wdth" 75; font-size: var(--fs-yen); color: var(--red); align-self: flex-start; padding-top: .35em; }
.fv__charge { font-family: var(--f-head); font-weight: 900; font-size: var(--fs-charge); line-height: 1.4; margin-top: 12px; letter-spacing: .04em; }
.fv__charge:lang(en) { font-family: var(--f-num); font-weight: 800; font-variation-settings: "wdth" 87; letter-spacing: 0; margin-top: 0; margin-bottom: 4px; }
.fv__pay { font-weight: 500; margin-top: 2px; }
.facts { display: grid; grid-template-columns: 3em minmax(0, 1fr); column-gap: 12px; row-gap: 4px; align-items: baseline; }
.facts:lang(en) { grid-template-columns: 4em minmax(0, 1fr); }
.facts dt { font-weight: 700; font-size: 15px; }
.facts dd { font-weight: 700; font-size: var(--fs-fact); line-height: 1.45; }
.facts .num { font-weight: 700; font-variation-settings: "wdth" 87; }
.fv__btns { display: none; }

@media (min-width: 768px) {
  .fv__price { padding: 32px 0 28px; }
  .fv__facts { padding: 24px 0; }
  .fv__facts .fv__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 24px; align-items: center; }
  .fv__btns { display: flex; flex-direction: column; gap: 10px; }
}
/* PC：白木（左）と緑（右）を画面の端まで左右に割る */
@media (min-width: 1024px) {
  .fv__split { display: grid; grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, 672px) minmax(0, 480px) minmax(var(--gutter), 1fr); }
  .fv__split::before { content: ""; grid-column: 1 / 3; grid-row: 1; background: var(--shiraki); border-bottom: 8px solid var(--edge); }
  .fv__split::after { content: ""; grid-column: 3 / 5; grid-row: 1; }
  .fv__split > .fv__price { grid-column: 2; grid-row: 1; position: relative; z-index: 1; background: none; border: 0; padding: 48px 48px 48px 0; }
  .fv__split > .fv__facts { grid-column: 3 / 5; grid-row: 1; position: relative; z-index: 1; padding: 48px var(--gutter) 48px 48px; display: flex; align-items: center; }
  .fv__split .fv__inner { width: auto; margin: 0; }
  .fv__facts .fv__inner { display: flex; flex-direction: column; align-items: stretch; gap: 28px; width: min(100%, 432px); }
  .fv__btns .btn { width: 100%; }
}

/* 節の見出し：見出し → 梁の線 → 英字（右寄せ） */
.sec { padding: var(--sec-y) 0; }
.sh { margin-bottom: 32px; }
@media (min-width: 768px) { .sh { margin-bottom: 48px; } }
.sh__t { font-family: var(--f-head); font-weight: 900; font-size: var(--fs-h2); line-height: 1.3; letter-spacing: .02em; padding-bottom: 12px; border-bottom: var(--beam) solid currentColor; }
.sh__t:lang(en) { font-family: var(--f-num); font-weight: 800; font-variation-settings: "wdth" 87; letter-spacing: 0; line-height: 1.1; }
.sh__en { text-align: right; font-family: var(--f-num); font-weight: 800; font-size: var(--fs-label); letter-spacing: .14em; margin-top: 6px; line-height: 1.2; }
.lead { max-width: 34em; }

/* ② 飲み物（白木） */
.drink__top { display: grid; gap: 20px; align-items: end; }
@media (min-width: 1024px) { .drink__top { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; } }
.all { display: flex; align-items: flex-end; gap: 8px; white-space: nowrap; line-height: 1; }
.all__k { font-family: var(--f-num); font-weight: 800; font-variation-settings: "wdth" 75; font-size: calc(var(--fs-600s) * .38); padding-bottom: .2em; }
.all__n { font-family: var(--f-num); font-weight: 800; font-variation-settings: "wdth" 75; font-size: var(--fs-600s); color: var(--red); line-height: .86; }
.all__y { display: flex; flex-direction: column; line-height: 1.15; }
.all__y b { font-family: var(--f-head); font-weight: 900; font-size: calc(var(--fs-600s) * .4); }
.all__y small { font-weight: 700; font-size: var(--fs-note); margin-top: 4px; }
.all__cur { font-family: var(--f-num); font-weight: 800; font-variation-settings: "wdth" 75; font-size: calc(var(--fs-600s) * .45); color: var(--red); align-self: flex-start; }
.menu { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 40px; margin-top: 40px; }
@media (min-width: 768px) { .menu { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; } }
@media (min-width: 1024px) { .menu { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px; row-gap: 24px; } }
.menu__g { border-top: 2px solid var(--ceiling); padding: 14px 0 18px; }
@media (max-width: 767px) { .menu__h { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; } }
.menu__h { display: flex; flex-direction: column; line-height: 1.3; }
@media (min-width: 768px) { .menu__h { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; } }
.menu__h span:first-child { font-family: var(--f-head); font-weight: 900; font-size: 20px; letter-spacing: .02em; }
.menu__h .en { font-family: var(--f-num); font-weight: 700; font-size: 14px; letter-spacing: .12em; margin-top: 2px; }
.menu__g:lang(en) .menu__h span:first-child { font-family: var(--f-num); font-weight: 800; font-variation-settings: "wdth" 87; font-size: 22px; letter-spacing: 0; }
.menu__l li { font-weight: 500; line-height: 1.75; padding: 2px 0; }
.menu__l .sub { font-weight: 400; font-size: 15px; margin-left: .5em; }
.menu__l .note { font-weight: 400; font-size: 15px; line-height: 1.6; padding: 0 0 4px; }
.menu__l:lang(en) .sub { display: block; margin-left: 0; line-height: 1.45; }
.menu__desc { font-size: 15px; margin-top: 2px; line-height: 1.5; }

/* ② とっておき（焦げ茶の地）。写真2枚をまとめて上、品は下 */
.special { background: var(--ceiling); color: var(--shiraki); }
.special :focus-visible { outline-color: var(--shiraki); }
.sp__ph { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
@media (min-width: 768px) { .sp__ph { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .sp__ph { margin-inline: calc(-1 * var(--gutter)); } }
.sp__ph .zoom img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 767px) { .sp__ph li:first-child .zoom img { aspect-ratio: 1 / 1; } }
.sp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 36px; }
@media (min-width: 768px) { .sp { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } }
@media (min-width: 1280px) { .sp { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; } }
.sp__it { border-top: 2px solid var(--shiraki); padding-top: 14px; display: flex; flex-direction: column; }
.sp__name { font-family: var(--f-head); font-weight: 900; font-size: 20px; line-height: 1.35; letter-spacing: .02em; }
.sp__name:lang(en) { font-family: var(--f-num); font-weight: 800; font-variation-settings: "wdth" 87; font-size: 22px; letter-spacing: 0; }
.sp__brand { font-weight: 500; font-size: 16px; margin-top: 8px; line-height: 1.6; }
.sp__desc { font-size: 16px; margin-top: 6px; flex: 1; }
.sp__yen { font-family: var(--f-num); font-weight: 800; font-variation-settings: "wdth" 75; font-size: 32px; line-height: 1; margin-top: 12px; white-space: nowrap; }
.sp__yen small { font-family: var(--f-body); font-weight: 700; font-size: 16px; margin-left: 2px; }
.sp__ask { font-weight: 700; font-size: 16px; margin-top: 12px; }
.sp__note { font-size: var(--fs-note); margin-top: 28px; }

/* ② おつまみ（白木・上にカウンターの縁） */
.snacks { border-top: 6px solid var(--edge); padding: clamp(40px, 4vw, 64px) 0 var(--sec-y); }
.snacks__h { font-family: var(--f-head); font-weight: 900; font-size: var(--fs-h3); line-height: 1.3; padding-bottom: 10px; border-bottom: 3px solid var(--ceiling); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.snacks__h:lang(en) { font-family: var(--f-num); font-weight: 800; font-variation-settings: "wdth" 87; }
.snacks__h .en { font-family: var(--f-num); font-weight: 800; font-size: var(--fs-label); letter-spacing: .14em; }
.snacks__l { margin-top: 16px; font-weight: 700; max-width: 40em; }
.snacks__l li { display: inline; }
.snacks__l li + li::before { content: "／"; font-weight: 400; margin: 0 .3em; }
.snacks__l:lang(en) li { display: block; font-weight: 700; }
.snacks__l:lang(en) li + li::before { content: none; }
.snacks__l:lang(en) .sub { font-weight: 400; }
.snacks__note { font-size: var(--fs-note); margin-top: 12px; }

/* ③ 席（緑の壁）：写真を1枚ずつ幅いっぱい、文はその下 */
.seat__it + .seat__it { margin-top: 0; }
@media (min-width: 1024px) { .seat__it + .seat__it { margin-top: 96px; } }
.seat__ph .zoom img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 768px) { .seat__ph .zoom img { aspect-ratio: 3 / 2; } }
@media (min-width: 1024px) { .seat__ph .zoom img { aspect-ratio: 16 / 9; } }
.seat__ph[data-pos="counter"] img { object-position: 50% 60%; }
.seat__ph[data-pos="booth"] img { object-position: 50% 55%; }
.seat__ph[data-pos="standing"] img { object-position: 50% 45%; }
.seat__txt { padding: 20px 0 48px; display: grid; gap: 8px; }
@media (min-width: 768px) { .seat__txt { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px; padding: 24px 0 64px; } }
@media (min-width: 1024px) { .seat__txt { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; padding-bottom: 0; } }
.seat__h { font-family: var(--f-head); font-weight: 900; font-size: var(--fs-h3); line-height: 1.35; }
.seat__h:lang(en) { font-family: var(--f-num); font-weight: 800; font-variation-settings: "wdth" 87; }
.seat__h .num { font-family: var(--f-num); font-weight: 800; font-variation-settings: "wdth" 75; font-size: 1.25em; }
.seat__txt p { max-width: 34em; }
@media (max-width: 1023px) {
  .seat .wrap { width: 100%; }
  .seat .sh, .seat__txt { width: min(var(--content), 100% - 2 * var(--gutter)); margin-inline: auto; }
  .seat__it:last-child .seat__txt { padding-bottom: 0; }
}

/* 写真を押すと拡大 */
.zoom { display: block; width: 100%; padding: 0; border: 0; background: var(--wall); cursor: zoom-in; overflow: hidden; }
.zoom img { transition: transform .2s; }
.zoom:hover img { transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) { .zoom img { transition: none; } .zoom:hover img { transform: none; } }
.cap { font-size: var(--fs-note); margin-top: 8px; }

/* ④ 庄一さんと店のこと（白木）。写真は小さいので最大 340px */
.about__in { display: grid; gap: 28px; }
@media (min-width: 768px) { .about__in { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 72px); align-items: start; } }
.about__ph { width: min(100%, 340px); margin-inline: auto; border-bottom: 6px solid var(--edge); }
@media (min-width: 768px) { .about__ph { margin: 0; } }
.about__ph img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.about__txt { max-width: 30em; }
.about__txt p + p { margin-top: 14px; }
.about__txt .btn { margin-top: 24px; }
@media (max-width: 767px) { .about__txt .btn { width: 100%; } }
.about__h { font-family: var(--f-head); font-weight: 900; font-size: var(--fs-h2); line-height: 1.3; padding-bottom: 12px; border-bottom: var(--beam) solid var(--ceiling); margin-bottom: 20px; }
.about__h:lang(en) { font-family: var(--f-num); font-weight: 800; font-variation-settings: "wdth" 87; }
.about__en { text-align: right; font-family: var(--f-num); font-weight: 800; font-size: var(--fs-label); letter-spacing: .14em; margin: -14px 0 20px; }

/* ⑤ 場所とご案内（薄い壁）。表は罫線でなく白木と透明の縞 */
.access__in { display: grid; gap: 28px; }
@media (min-width: 1024px) { .access__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; align-items: start; } }
@media (max-width: 1023px) { .access__ph { margin-inline: calc(-1 * var(--gutter)); } .access__ph .cap { padding-inline: var(--gutter); } }
.access__ph .zoom img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 768px) and (max-width: 1023px) { .access__ph .zoom img { aspect-ratio: 3 / 2; object-position: 50% 30%; } }
.info > div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); column-gap: 12px; padding: 12px 16px; }
.info > div:nth-child(odd) { background: var(--shiraki); }
.info:lang(en) > div { grid-template-columns: 6em minmax(0, 1fr); }
.info dt { font-weight: 700; font-size: var(--fs-label); padding-top: .15em; }
.info dd { font-weight: 500; }
.info dd b { font-weight: 700; }
.info .ja { font-family: var(--f-body); font-size: 18px; font-weight: 500; display: block; margin-top: 4px; }
@media (max-width: 389px) { .info > div { grid-template-columns: 5.5em minmax(0, 1fr); padding: 12px; } }
.access__btns { display: grid; gap: 10px; margin-top: 24px; }
@media (min-width: 1024px) { .access__btns { max-width: 420px; } }
.access__note { font-size: var(--fs-note); margin-top: 12px; }

/* 英語：How it works */
.how ol { counter-reset: how; }
.how li { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); align-items: baseline; padding: 12px 0; border-top: 2px solid var(--ceiling); font-weight: 500; }
.how li:last-child { border-bottom: 2px solid var(--ceiling); }
.how li::before { counter-increment: how; content: counter(how); font-family: var(--f-num); font-weight: 800; font-variation-settings: "wdth" 75; font-size: 32px; line-height: 1; }
.how__note { font-size: var(--fs-note); margin-top: 14px; }

/* 足元（焦げ茶） */
.ft { background: var(--ceiling); color: var(--shiraki); padding: 56px 0; }
.ft :focus-visible { outline-color: var(--shiraki); }
.ft__in { display: grid; gap: 24px; }
@media (min-width: 768px) { .ft__in { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }
.ft__name { font-family: var(--f-head); font-weight: 900; font-size: 22px; letter-spacing: .04em; line-height: 1.4; }
.ft__name:lang(en) { font-family: var(--f-num); font-weight: 800; font-variation-settings: "wdth" 87; letter-spacing: 0; }
.ft__name small { font-family: var(--f-head); font-weight: 900; font-size: 16px; margin-left: .4em; }
.ft__info { margin-top: 8px; line-height: 1.8; }
.ft__info a { text-decoration: none; }
.ft__links { display: flex; flex-wrap: wrap; gap: 12px; }
.ft__links .btn { min-height: 48px; }
.ft__lang { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 44px; padding: 0 18px; border: 2px solid var(--shiraki); text-decoration: none; font-weight: 700; }
.ft__lang:lang(en) { font-family: var(--f-num); font-variation-settings: "wdth" 87; font-weight: 700; letter-spacing: .04em; }
.ft__lang:hover { background: var(--shiraki); color: var(--ceiling); }
.ft__c { font-size: 14px; margin-top: 28px; }
.ft__c small { font-size: 14px; }

/* スマホの下の帯（地図・電話・Instagram） */
.bar { display: none; }
@media (max-width: 767px) {
  body { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); }
  .bar {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--ceiling); padding-bottom: env(safe-area-inset-bottom);
  }
  .bar a { display: flex; align-items: center; justify-content: center; gap: 6px; height: var(--bar-h); font-weight: 700; font-size: 16px; text-decoration: none; white-space: nowrap; min-width: 0; }
  .bar a + a { border-left: 1px solid rgba(245, 232, 204, .35); }
  .bar__map { background: var(--red); color: #fff; }
  .bar__tel { background: var(--ceiling); color: var(--shiraki); }
  .bar__ig { background: var(--ig); background-color: #dd2a7b; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
  .bar__ig svg { width: 22px; height: 22px; flex: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
  .bar a:focus-visible { outline-color: var(--shiraki); outline-offset: -4px; }
}
@media (max-width: 359px) { .bar__ig span { display: none; } }

/* 写真の拡大表示（dialog。閉じている間は表示されない） */
.lb { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; color: var(--shiraki); }
.lb::backdrop { background: rgba(28, 14, 6, .94); }
.lb[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; animation: lbIn .15s ease-out; }
@keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lb[open] { animation: none; } }
.lb__img { max-width: 94vw; max-height: 84vh; max-height: 78dvh; width: auto; height: auto; object-fit: contain; }
.lb__cap { font-size: 15px; margin-top: 10px; padding: 0 16px; text-align: center; max-width: 40em; }
.lb__btn { position: absolute; display: flex; align-items: center; justify-content: center; border: 2px solid var(--shiraki); background: rgba(28, 14, 6, .6); color: var(--shiraki); font-weight: 700; font-size: 16px; cursor: pointer; }
.lb__close { top: 12px; right: 12px; min-width: 88px; height: 48px; padding: 0 14px; }
.lb__prev, .lb__next { top: 50%; transform: translateY(-50%); width: 56px; height: 64px; }
.lb__prev { left: 8px; } .lb__next { right: 8px; }
.lb__btn:focus-visible { outline-color: var(--shiraki); }
.lb__prev[hidden], .lb__next[hidden] { display: none; }
.menu__l .pre { font-weight: 400; font-size: 15px; margin-right: .5em; }
.fv__charge--top { margin-top: 10px; }
.info--gap { margin-top: 20px; }

.info dd a, .ft__info a { display: inline-block; padding: 10px 0; margin: -10px 0; min-height: 44px; }
/* M5: 目次の短い語も44px以上に */
.hd__nav a { min-width: 44px; justify-content: center; }
/* M6: 320px の英語で長い住所を折れるように */
@media (max-width: 340px) { .info:lang(en) .nw { white-space: normal; } }
.lb__btn { white-space: nowrap; }
@media (max-width: 767px) { .menu__h { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; } }