@charset "UTF-8";
/* ============================================================================
   common.css — 4案で共通の土台だけを持つファイル

   【ここに置いてよいもの】
   1. CSSリセット
   2. 固定予約CTAの「土台」（位置・z-index・safe-area・本文の逃がし）
   3. デモ用の切替バー

   【ここに書いてはいけないもの】
   レイアウト、配色、書体、セクションの設計。それらは a.css / b.css /
   c.css / d.css が各自で全部持つ。

   固定CTAの土台だけを共通にしている理由：
   ここは過去に実際バグを2件出した箇所（暗い配色でバーが白地＋白文字に
   なる／線ボタンがバー上で透明になって消える）。safe-areaとz-indexの
   処理を4回書けば4回とも間違える余地が生まれる。予約ボタンは全案で
   必ず動かなければならない最重要要素なので、ここだけ1箇所にまとめる。
   配色は変数で各案が自由に上書きする。
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. 固定バーの寸法と、CTAの配色フック
      各案のCSSはこれらを上書きするだけでCTAの見た目を変えられる
   -------------------------------------------------------------------------- */
:root {
  --header-h:    56px;
  --bottombar-h: 64px;

  /* ヘッダー内の予約ボタン（PC） */
  --cta-bg:      #b8352c;
  --cta-fg:      #ffffff;
  --cta-radius:  4px;
  --cta-weight:  700;
  --cta-border:  0 solid transparent;

  /* 画面下部の固定バー（スマホ）。
     本文の文字色を流用すると暗い配色でバーが潰れるため独立させている。
     予約側も、線ボタン系の案では透明になってしまうので別建てにする。 */
  --bar-bg:      #1f1c1a;
  --bar-fg:      #ffffff;
  --barcta-bg:   var(--cta-bg);
  --barcta-fg:   var(--cta-fg);
}

@media (min-width: 768px) {
  :root { --header-h: 72px; }
}

/* ----------------------------------------------------------------------------
   2. リセット
   -------------------------------------------------------------------------- */
*, *::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;
  overflow-x: hidden;                /* 横スクロールの発生を防ぐ */
  padding-top: var(--header-h);      /* 固定ヘッダーに本文が潜らないための逃がし */
  /* スマホは下部固定バー分も逃がす。env() は iPhone のホームバー対策 */
  padding-bottom: calc(var(--bottombar-h) + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 768px) {
  body { padding-bottom: 0; }        /* PCでは下部バーを出さないので不要 */
}

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, p, dl, dd, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
a { color: inherit; }

/* アンカーで飛んだとき、見出しが固定ヘッダーに隠れないようにする。
   各案が section に別のクラスを付けても効くよう [id] で当てている。 */
section[id], div[id].anchor { scroll-margin-top: var(--header-h); }

/* ----------------------------------------------------------------------------
   3. 固定ヘッダーの土台
      中身のレイアウト（店名・ナビ・電話の並べ方）は各案が自由に決める
   -------------------------------------------------------------------------- */
.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  height: var(--header-h);
  display: flex;
  align-items: center;
}

/* ヘッダー内の予約ボタン。スマホでは下部バーに集約するので出さない */
.hdr__reserve { display: none; }

@media (min-width: 768px) {
  .hdr__reserve {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 6px 24px;
    background: var(--cta-bg);
    color: var(--cta-fg);
    border: var(--cta-border);
    border-radius: var(--cta-radius);
    font-weight: var(--cta-weight);
    font-size: .9rem;
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .2s;
  }
  .hdr__reserve:hover { opacity: .85; }
  .hdr__reserve small {
    font-size: .55rem;
    letter-spacing: .2em;
    opacity: .85;
    font-weight: 400;
  }
}

/* ----------------------------------------------------------------------------
   4. 画面下部の固定バー（スマホ）
      親指の届く位置に主CTAを置く。居酒屋HPで最も成果に直結する部分
   -------------------------------------------------------------------------- */
.ctabar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 100;                        /* ヘッダー(90)より前面 */
  display: flex;
  background: var(--bar-bg);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -2px 14px rgba(0, 0, 0, .18);
}
.ctabar a {
  flex: 1 1 50%;
  min-height: var(--bottombar-h);      /* 44px以上。親指で押せる高さ */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  color: var(--bar-fg);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.ctabar a + a {
  background: var(--barcta-bg);
  color: var(--barcta-fg);
}
.ctabar small {
  font-size: .62rem;
  font-weight: 400;
  opacity: .85;
  letter-spacing: .06em;
}

@media (min-width: 768px) {
  .ctabar { display: none; }           /* PCはヘッダーの予約ボタンに集約 */
}

/* ----------------------------------------------------------------------------
   5. デモ用のデザイン案切替バー
      【契約が決まったら、このブロックとHTML側の .switchbar を丸ごと削除する】
      各案が別ページなのでJSは不要。ただのリンク。

      11案あるため、素直に並べると横幅が約490pxになりスマホからはみ出す。
      対策は3つ:
        1. max-width で画面幅に収め、あふれた分は「バーの中だけ」横スクロール
           （body には overflow-x:hidden があるので、ページ本体は動かない）
        2. スマホではラベルを隠す（約55px節約）
        3. 丸をスマホで26pxに縮める
   -------------------------------------------------------------------------- */
.switchbar {
  position: fixed;
  z-index: 110;
  left: 12px;
  bottom: calc(var(--bottombar-h) + env(safe-area-inset-bottom, 0px) + 12px);
  max-width: calc(100vw - 24px);   /* 画面からはみ出させない */
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(28, 26, 24, .92);
  color: #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .3);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-size: .68rem;
  letter-spacing: .08em;
  overflow-x: auto;
  overscroll-behavior-x: contain;  /* バーの端でページを引っ張らない */
  scrollbar-width: none;           /* スクロールバーは出さない（見た目優先） */
}
.switchbar::-webkit-scrollbar { display: none; }

/* ラベルは狭い画面では場所を食うだけなので隠す */
.switchbar__label { display: none; opacity: .8; white-space: nowrap; }

@media (min-width: 768px) {
  .switchbar { bottom: 20px; gap: 6px; padding: 8px 12px; }
  .switchbar__label { display: block; }
}

.switchbar a {
  flex: 0 0 auto;                  /* 数が増えても潰れないようにする */
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .45);
  background: var(--sw, #888);
  display: grid;
  place-items: center;
  font-size: .58rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  transition: transform .15s, border-color .15s;
}
@media (min-width: 768px) {
  .switchbar a { width: 30px; height: 30px; font-size: .62rem; }
}
.switchbar a:hover { transform: scale(1.12); }
.switchbar a[aria-current="page"] {
  border-color: #fff;
  transform: scale(1.12);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .3);
}

/* ----------------------------------------------------------------------------
   6. 提案用の注記
      お店の人に向けた文。契約後にHTMLごと削除する前提。
      お店のお客様に見せる文章ではないので、各案で見た目を揃えておく。
   -------------------------------------------------------------------------- */
.demo-note {
  max-width: 720px;
  margin: 40px auto 0;
  padding: 14px 18px;
  border: 1px dashed currentColor;
  border-radius: 4px;
  opacity: .65;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-size: .74rem;
  line-height: 1.9;
  text-align: center;
}

/* ----------------------------------------------------------------------------
   7. ユーティリティ

   ※ Airリザーブの埋め込みiframe用のスタイルはここにあったが、埋め込み自体を
      廃止したため削除した。理由：発行コードは height="1000px" 固定で改変禁止。
      最初の「メニューを選択」は約230pxしかなく灰色の空白が大きく出る一方、
      カレンダー段階では約850px必要で、高さを詰めると枠内に二重スクロールが出る。
      どちらに寄せても破綻するため、別タブで開くボタン方式に切り替えた。
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}