/* ==============================
   まちの１ページ / 共通スタイル(トップ・店舗ページ)
   CLAUDE.md のデザインルールに準拠:
   - 色・書体・角丸はテーマプリセットから選ぶ(下の「テーマプリセット」節が唯一の定義場所)
   - 余白は8の倍数 / フォント3段階(16/20/24) … こちらはテーマで変えない
   - 見出し以外(本文・補足テキスト・チップ・ナビのラベル)はすべて16px。
     ターゲットがスマホ中心の30〜50代のため、読みやすさを優先して14pxは使わない
   ============================== */

:root {
  /* テーマクラスが付かない状態(srcのHTMLを直接開いた場合など)のフォールバック。
     いま入っているのは style-casual + palette-kogecha と同じ値。
     サイトのテーマ(build.jsのSITE.design)と一致させる必要はないが、
     どのプリセットとも一致しない中途半端な配色にならないよう、
     「実在するプリセットの組み合わせであること」をbuild.jsが毎ビルド検査する */
  --main: #5C4433;        /* メイン:本文・見出し・チップ文字 */
  --accent: #C2410C;      /* アクセント:1パレットにつき1色 */
  --band: #FAF7F3;        /* 地色:中間帯・店舗ページ・写真プレースホルダ共通 */
  --soft: #7A6A5C;        /* 補足テキスト */
  --line: #E9E1D8;        /* 罫線・カード枠(装飾なのでAAの対象外) */

  /* 表示フォント(.display系のみ。本文はシステムフォントのまま)。
     太さも書体とセットでstyleプリセットが持つ。書体によって画面での見え方が違い、
     同じ700でも細く見えるものがあるため(下のstyle-formalを参照)。
     ここに書いた値はbuild.jsが読んでGoogle Fontsのwght@に使うので、
     その書体に実在するウェイトしか書けない(実在しないとビルドが止まる) */
  --font-display: "Zen Maru Gothic", -apple-system, "Hiragino Sans", sans-serif;
  --font-weight-display: 700;

  --radius: 8px;          /* 箱の角丸 */
  --radius-pill: 999px;   /* チップ・ラベルのピル形 */

  --page-max: 800px;      /* ページ最大幅(本文とフットナビで共有)。テーマで変えない */
}

/* ==============================
   テーマプリセット
   お店・活動ごとに shops.json の design で選ぶ。値の自由入力はしない(許可リスト制)。
   ここが色・書体・角丸の唯一の定義場所で、build.jsはこのファイルを読んで
   許可リストを導出し、コントラストを毎ビルド検査する(build.jsにHEXは書かない)。

   2軸に分かれている:
   - style   = 表示フォント + 角丸  … お店の「かたち」の印象
   - palette = メイン色 + アクセント色 … お店の「色」の印象
   bodyに .style-◯◯ と .palette-◯◯ を並べて付ける(:rootより後で定義するので上書きされる)。

   テーマで変えないもの: フォントサイズ(16/20/24)・余白(8の倍数)・タップ対象44px・
   3層構成・白#FFFFFF。白は「地の基準」で、ここがずれると4.5:1の基準自体が動くため
   変数にしない。
   ============================== */

/* ---------- style: 表示フォント + 角丸 ---------- */
/* styleは4つ。書体は3つだけ(popとcasualは同じ丸ゴで角丸だけが違う)。
   1ページに読み込む書体は必ず1つ。
   増やすとページ間のフォントキャッシュ共有が効かなくなるため、これ以上足さない。

   呼び名は書体名(丸ゴ/角ゴ/明朝)ではなくお店の印象で付けてある。
   加入時にお客さんに選んでもらう値なので、書体の名前が分からなくても選べるようにするため。
   下に向かって やわらかい → かたい の順に並べてある(この並び順は、値を間違えたときに
   build.jsが出す「使えるのは: …」の一覧の順にもなる) */

/* いちばんやわらかい。子ども向け・お菓子・体操の会などの集まり */
.style-pop {
  --font-display: "Zen Maru Gothic", -apple-system, "Hiragino Sans", sans-serif;
  --font-weight-display: 700;
  --radius: 16px;
  --radius-pill: 999px;
}

/* 既定。やさしく親しみやすい。パン・カフェ・洋菓子 */
.style-casual {
  --font-display: "Zen Maru Gothic", -apple-system, "Hiragino Sans", sans-serif;
  --font-weight-display: 700;
  --radius: 8px;
  --radius-pill: 999px;
}

/* 端正ですっきり。理容室・工務店・教室
   2026-08-15に一度廃止して同日戻した。廃止したのは、当時のformalが2pxで
   normalの4pxとの差が分からず、角丸を揃えたら違いが書体だけになったため。
   その後formalを0px(直角)にしたので前提が変わり、4pxはcasual(8px)とも
   formal(0px)とも見分けがつくようになった(廃止の理由がそのまま解消された)。
   ピルも箱と同じ4px。角ばった見た目を一つの印象にまとめるため、
   pop/casualのような完全なピル(999px)にはしない */
.style-normal {
  --font-display: "Zen Kaku Gothic New", -apple-system, "Hiragino Sans", sans-serif;
  /* この書体はDISPLAY_FONTSに700しか無い。900を書くとビルドが止まる */
  --font-weight-display: 700;
  --radius: 4px;
  --radius-pill: 4px;
}

/* 落ち着いた和の佇まい。そば・和菓子・美容室
   フォールバックを明朝系にするのが要点。display=swapで読み込む前に
   ゴシックが出ると、切り替わったときの印象の差が大きいため。
   4つの中でいちばん角ばっていて、ここだけ角丸が0px(直角)。以前は2pxだったが、
   スマホの画面では丸みとして認識されず、「角を落とした」というより中途半端に
   見えていたため、2026-08-15にTeturoの判断で直角に振り切った。丸ゴの pop(16px)・
   casual(8px)との差がはっきりし、和の佇まいという狙いにも合う。
   なお角丸を持つのは店舗ページ側だけで、トップ一覧のカードはサイト側のテーマ
   (SITE.design = casual)で描くため、この0pxの影響は受けない。

   ここだけ太さが900。明朝は縦画に対して横画が細く、その横画がスマホの画面で
   最初に潰れるため、700では見出しまで含めて読みづらかった。900にすると横画が
   太くなり、読みづらさの原因に直接効く。ファイルは増えない(実測で700より微減)。
   Zen系の明朝はこの書体しかなく(Zen Antique系は400のみで今より細くなる)、
   900がZenの中でできる上限 */
.style-formal {
  --font-display: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-weight-display: 900;
  --radius: 0px;
  --radius-pill: 0px;
}

/* ---------- palette: メイン色 + アクセント色 ---------- */
/* 地の2色(band/line)は色相だけパレットに合わせ、明るさは既定の値に揃えてある。
   こうすると「4.5:1を満たせる前景色の明るさの上限」が全パレットで共通になり、
   新しいパレットを足すときの基準が1本で済む。
   (以前はband/tintの2階調を持っていたが、実際に並べても見分けがつかないほど
   輝度差が小さく、パレットを増やすたびに2色ぶん決める手間だけが残っていたため
   2026-08-08にTeturoの判断で1色に統合した。中間帯・店舗ページの地・写真プレースホルダは
   すべて同じ--bandを指す)

   その上限は 相対輝度0.167 (地色の上で4.5:1を満たす境目。地色がいちばん暗い
   sumiで計算しているので、これを通れば他のパレットの地色は自動的に通る)。
   山吹・金赤・明るい緑はこの上限に入らないので、アクセントの候補にならない。
   新しいアクセントを検討するときは、まずこの上限に収まるかを計算すること。

   アクセントは必ずメインより明るくしてある。色相が近く見える人にも、
   明るさの差で見分けられるようにするため。有彩色のパレットは輝度比1.69〜1.75に
   揃えてあるが、sumiのようにメインが極端に暗いパレットは2.77まで開く。
   これは狙いに沿った方向(差が大きいほど見分けやすい)なので揃えなくてよい。

   全パレットの main/accent/soft × 白地/地色 の30通りが4.5:1以上であることは
   build.jsが毎ビルド検査する。最小は既定パレットのaccent×地色で4.849 */

/* 既定。あたたかく素朴。パン・カフェ・洋菓子・食堂 */
.palette-kogecha {
  --main: #5C4433;    /* 焦茶 */
  --accent: #C2410C;  /* 橙 */
  --soft: #7A6A5C;
  --band: #FAF7F3;
  --line: #E9E1D8;
}

/* 紺地に紅。凛として信頼感がある。そば・和食・酒屋・理容室・地域の活動 */
.palette-ai {
  --main: #354A67;    /* 藍 */
  --accent: #CE243B;  /* 紅 */
  --soft: #606C7F;
  --band: #F5F8FB;
  --line: #DCE3EB;
}

/* 緑地に朱(山と柿)。自然・健康まわり。直売所・お茶・花・造園・整体 */
.palette-fukamidori {
  --main: #29513E;    /* 深緑 */
  --accent: #C5381C;  /* 朱 */
  --soft: #567164;
  --band: #F5F9F2;
  --line: #DDE5D5;
}

/* やわらかく華やか。美容室・ネイル・雑貨・和菓子・花
   淡い桜色そのものはアクセントに使えない(白地で1.5:1程度しかなく検査を通らない)。
   面積の大きい地色を桜色に寄せ、アクセントは4.5:1を満たす濃い紅梅にすることで
   「さくら」の印象を作っている。淡いピンクを前景色に持ち込まないこと */
.palette-sakura {
  --main: #6D3A45;    /* 薄蘇芳 */
  --accent: #C82C55;  /* 紅梅 */
  --soft: #886169;    /* 桜鼠 */
  --band: #FCF6F7;
  --line: #EFDFE3;
}

/* 硬めでモダン。理容室・美容室・写真館・ラーメン・雑貨
   唯一のメインが無彩色のパレット。純黒#000000にはしない。白地の上の純黒は強すぎて
   「見やすい」より「きつい」に振れるため、名前どおりの墨色にとどめる。
   アクセントが赤なのは、黒と意味のある差が作れて輝度の上限に収まる色相が
   実質ここしかないため(金・山吹は明るすぎて上限0.167を超える) */
.palette-sumi {
  --main: #262626;    /* 墨 */
  --accent: #C2352F;  /* 赤 */
  --soft: #6C6C6C;    /* 鼠 */
  --band: #F7F7F7;
  --line: #E2E2E2;
}

/* 黄色系。カレー・定食・パン・焼き菓子・惣菜・古道具
   鮮やかな山吹をアクセントにはできない(明るすぎて白地4.5:1を満たせない)ため、
   明度を落とした辛子色にしてある。5色すべてを色相46〜48°(accentと同じ黄色の範囲)に
   揃えてあるのが要点。以前はmainをkogecha(焦茶)と見分けるために色相65°まで
   振っていたが、65°は黄色の範囲を超えて黄緑に入ってしまい「緑に見える」原因になった
   (2026-08-14 Teturoの指摘で修正)。色相を離さなくても、彩度・明度の設計だけで
   kogechaとの差はΔE22.2まで開く(既存パレット同士の最小差19.5より大きい)ので、
   色相を黄色の外へ振る必要はそもそも無かった */
.palette-karashi {
  --main: #5A480D;
  --accent: #8B6904;  /* 辛子 */
  --soft: #726D59;
  --band: #FAF7EF;
  --line: #E6E2D5;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ページ内アンカー(フットナビの「上へ」など)をなめらかに移動させる。
   店舗ページはscript.jsを読み込まないため、ここで指定しないとトップページだけ
   なめらかで店舗ページは瞬間移動、と感触が食い違う。
   script.js側でscrollIntoViewにbehaviorを明示している箇所はそちらが優先されるので、
   動きを減らす設定への対応は二重に効く */
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
               "Hiragino Sans", "Yu Gothic UI", Meiryo, sans-serif;
  color: var(--main);
  background: #FFFFFF;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* フットナビの高さ+iPhoneセーフエリアぶんの余白 */
  padding-bottom: calc(56px + env(safe-area-inset-bottom));
}

/* リンクの下線。日本語は漢字の下端まで字面が詰まっているため、
   ブラウザ既定の位置だと下線が文字にくっついて読みにくい。
   本文16pxに対して4px下げ、離したぶん下線だけが目立たないよう太さは1pxに固定する
   (既定の太さは書体依存で、テーマの明朝だけ太く出るのを防ぐ) */
a {
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

/* スキップリンク(本文へスキップ)。キーボード・スクリーンリーダー利用者が、
   毎ページのチップ一覧やフッターナビを読み上げずに本文まで飛べるようにする。
   display:noneにするとTabで到達できなくなるため、画面外へ飛ばす形にする。
   色・角丸は既存のパレット/--radiusをそのまま使う(新しい色は増やさない) */
.skiplink {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 10;
  padding: 8px 16px;
  background: var(--main);
  color: #FFFFFF;
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
}

.skiplink:focus {
  top: 8px;
}

/* ==============================
   余白の骨組み(セマンティックなタグ側で持つ)
   ページが増えてもクラスを足さずに済むよう、余白は「タグ同士の関係」で決める。
   タグだけで足りないところ(部品の内側)だけ、下の各クラスが個別に持つ。
   ============================== */

/* セクション同士の間隔。
   下(margin-bottom)ではなく上(margin-top)に持つのが要点。最後のセクションに
   余分な余白が残らないので、:last-childでの打ち消しが要らなくなる
   (帯の中に積むabout系と、mainに直接積む店舗ページの両方が同じ1本で通る) */
section + section {
  margin-top: 64px;
}

/* セクションの見出しは、本文の箱より16px内側から始める。
   店舗ページの店名(h1)もセクションの見出しなので同じ扱いにする。
   ヒーローのh1はページの表題であって見出しではないため、ここには入らない
   (section直下という条件で自然に外れる) */
section > h1,
section > h2 {
  margin-left: 16px;
}

/* ヒーローの表題とロゴの間隔 */
header h1 {
  margin-top: 8px;
}

.wrap {
  max-width: var(--page-max);
  /* 上下の余白はタグ側の指定に任せたいので、ショートハンドにせず左右だけ中央寄せする
     (ショートハンドだとmargin-topまで0で塗りつぶし、section + sectionの64pxが消えるため) */
  margin-left: auto;
  margin-right: auto;
  padding: 0 16px;
}

.display {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  color: var(--main);
}

/* 文の一部をアクセント色にするための共通クラス。付けた要素だけ色が変わる
   (親が.displayでも、こちらは要素自身に効くので上書きになる)。
   使いすぎないよう、増やすときはCLAUDE.mdの「アクセントの現在の使用箇所」に必ず追記する */
.accent {
  color: var(--accent);
}

/* 二重線の下線。1本線はサイト全体でリンクの合図に使っているため、
   リンクではない強調はここで見分けられるようにする。
   下げ幅と太さの考え方はリンクの下線(a)と同じ */
.underline-double {
  text-decoration: underline double;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

/* 白箱の共通スタイル(背景白+罫線+角丸)。カード・店舗ページの各セクション・
   about.htmlの本文など、複数のクラスが同じ作り方をしているのでここでまとめる */
.card,
.shop-intro,
.shop-notice,
.shop-facts,
.sample-note,
.cards-empty,
.gallery__item,
.about-block__body,
.shop-sns__link {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* 写真をカードの角丸に沿わせて切り抜くため、この2つだけ追加でoverflow:hiddenを持つ */
.card,
.gallery__item {
  overflow: hidden;
}

/* タップ対象は最小44px(CLAUDE.mdの最小タップ領域)。チップ・CTA・各種リンクで共通 */
.chip,
.footer__cta,
.footer__sample a,
.footer__note a,
.shop-sns__link {
  min-height: 44px;
}

/* ---------- 1層目:白ヒーロー ---------- */

.hero {
  background: #FFFFFF;
  /* 上を16pxに詰める(ロゴの上に余白を取りすぎると、主役の中身が下に押し出されるため)。
     下24pxはヒーロー自身の余白として独立に決める(帯側の余白と足し算して64にする計算はしない) */
  padding: 16px 0 24px;
  text-align: center;
}

.hero__brand {
  font-size: 16px;
  letter-spacing: 0.04em;
  /* ロゴはヘッダーらしく左寄せ(タイトルは中央のまま) */
  text-align: left;
}

/* ロゴの「１」。ロゴ表記(.hero__brand)でも、h1の中に出てくる「まちの１ページ」でも
   同じ見え方にしたいので、ヒーロー全体をスコープにする。
   16px/700はWCAGの「大きい文字」(太字18.66px以上)に該当しないため、
   旧朱#D8442E(4.39:1)ではAA未達だった。橙に一本化して解消済み */
.hero .one {
  color: var(--accent);
}

.hero__title {
  /* ロゴとの間隔は「余白の骨組み」節の header h1 が持つ */
  font-size: 24px; /* h1は24px(見出し階層の統一) */
  letter-spacing: 0.04em;
}

/* ---------- 2層目:帯(チップ+カード) ---------- */

.band {
  background: var(--band);
  /* 上64pxは帯自身の余白として独立に決める(ヒーロー側の24pxと足し算しない。
     セクション同士の間隔(section + sectionの64px)と同じ数値)。
     下64pxは帯の中身からフッターまでの間隔で、そのままセクション間と同じ値にする
     (店舗ページで同じ役目を持つ .shop-body main の下paddingと対になる)。
     検索ページ(#search)だけは下のオーバーライドで32pxのまま詰める */
  padding: 64px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* 検索ページ(トップ)はヒーロー直後にチップが来るため、他ページより詰めたまま据え置く */
#search {
  padding-top: 32px;
}

.band__label {
  font-size: 20px; /* h2は20px(見出し階層の統一。トップ・店舗共通) */
  /* 見出し下の余白は「余白の骨組み」節の h2 が持つ(このクラスは見た目だけを担当する)。
     見出しの左にアイコン、右に件数などを並べられるようにする(トップ・店舗共通)。
     アイコンが無い見出しでも文字が1つ並ぶだけで見た目は変わらない */
  display: flex;
  align-items: center;
  gap: 8px;
}

.band__label svg {
  width: 20px; /* h2の文字サイズ20pxに合わせる */
  height: 20px;
  flex-shrink: 0;
  /* 見出しのアイコンはメイン色(見出しの文字と同じ)。以前はアクセント(橙)で目立たせていたが、
     アクセントを使う箇所を絞る方針に合わせ、見出しは静かに揃える(2026-08-15 Teturoの判断)。
     トップの虫眼鏡と店舗ページのお知らせのメガホンが、これ1箇所で同じ色になる */
  color: var(--main);
}

/* 見出し右に添える一段弱いテキスト。件数(例:「お店、活動をさがす （6件）」)と、
   ギャラリーの「（タップで拡大します）」のような操作の補足で共有する。
   見出しより一段弱く見せるため、本文サイズ+補足テキスト色にする */
.band__count,
.band__note {
  font-size: 16px;
  color: var(--soft);
}

/* ジャンルチップ(折り返しで全表示。横スクロール禁止) */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}

/* チップ帯の改行役。「すべて」「お気に入り」の2枚はジャンルではなく表示の切り替えなので、
   画面幅にかかわらず1段目に固定し、ジャンルは2段目から始める。
   この要素自身が1行を占めるので、段の間は上下のgap(8px)＋自身の高さになる。
   ジャンルでない2枚との切れ目をはっきり見せるため、高さ8pxで24px空ける
   (8+8+8。他の段どうしはgapのまま8px) */
.chips__break {
  flex-basis: 100%;
  height: 8px;
}

.chip {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: 16px;
  color: var(--main);
  background: #FFFFFF;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill); /* チップはピル形(styleプリセットで変わる) */
  padding: 8px 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* 16pxアイコンの共通スタイル。隣の文字が16pxなので、アイコンだけ小さく沈まないよう合わせる */
.chip svg,
.card__area svg,
.shop-intro__genre svg,
.shop-facts__maplink svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.chip[aria-pressed="true"] {
  /* 選択中は焦茶ベタ+白文字(赤系は使わない) */
  background: var(--main);
  border-color: var(--main);
  color: #FFFFFF;
}

.chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 店舗カード(横型:144px正方形写真+テキスト) */

.cards {
  /* 画面幅に応じて1列⇔2列が自動で切り替わるグリッド。@mediaを使わないのは、
     ブレークポイントを増やさず幅そのものに追従させるサイト全体の方針に合わせるため。
     min(320px, 100%)は、320pxより狭い画面で列が画面外にはみ出すのを防ぐ保険。
     auto-fitではなくauto-fillにするのは、絞り込みで1件になったときに
     カード1枚だけが極端に横長にならないようにするため */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 16px;
  list-style: none;
}

/* 同じ行のカードの下端を揃える(店名が2行の店の隣が低くならないように)。
   :not([hidden])で限定するのが要点。ジャンル絞り込み(script.jsのli.hidden)は
   ブラウザ既定の[hidden]{display:none}に頼っているため、無条件にdisplay:flexを
   当てると作者スタイルが勝ってしまい、カードを非表示にできなくなる */
.cards > li:not([hidden]) {
  display: flex;
}

.card {
  display: flex;
  gap: 16px;
  /* サンプルバッジを写真の左上に重ねるための基準。写真はカードの左上の角に
     ぴったり付いているので、カードを基準にすればバッジは必ず写真の中に収まる
     (写真を包む要素を足さずに済む。実写真の<img>とダミーの<div>で分岐しないため) */
  position: relative;
  /* 親のli(display:flex)いっぱいに広げて、行内のカードの高さを揃える。
     店舗ページのli.cardはgridアイテムなのでflexは無視され、影響しない */
  flex: 1;
  /* 写真をカードの上下左の縁まで広げるため、余白はテキスト側(.card__body)に持たせる */
  text-decoration: none;
  color: inherit;
}

/* .chip/.footer__ctaと同じ作り(アクセント色のリング)。text-decoration:noneにしている分、
   ブラウザ既定の輪郭だけに頼らずキーボード操作での現在地を分かるようにする */
.card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.card__photo {
  width: 144px;
  /* 固定heightをやめ、カードの高さに合わせて縦に伸ばす。
     通常(店名1行)のカードはmin-heightで144px正方形を保ち、店名が2行になって本文が
     高くなる店だけ写真も縦に伸びて下端まで埋める(下の余白・見切れを防ぐ)。
     実写真の<img>はHTML属性height="144"を持つため、height:autoで明示的に打ち消すのが要点 */
  height: auto;
  min-height: 144px;
  align-self: stretch;
  flex-shrink: 0;
  /* 縁までぴったり付けるので角丸・枠線は持たない(カード側で切り抜く) */
  object-fit: cover;
  /* ダミー用:実写真が入るまで生成り地+ジャンルアイコン */
  background: var(--band);
  display: grid;
  place-items: center;
  color: var(--soft);
}

/* 実写真だけ枠を1:1に固定する。上のheightがautoなのは「本文が高い店では写真も伸ばして
   下端の余白を消す」ためだが、autoのままだと高さが写真そのものの比率で決まるので、
   縦長の写真が144pxの下限を超えて縦に伸びてしまう(HTMLのwidth/height属性は読み込み前の
   仮の比率でしかなく、読み込み後は実ファイルの比率が勝つので属性では止まらない)。
   1:1を明示すると、写真の比率に関わらず144px角になり、本文が高いときに
   align-self:stretchで伸びる動きだけが残る。
   imgに限定するのは、写真プレースホルダの<div>がdisplay:gridを持っており、
   このファイルの他の枠(ヒーロー・ギャラリー)でaspect-ratioを避けた理由(gridとの
   組み合わせが効かない環境があった)に触れないため。imgは置換要素なのでその心配がない */
img.card__photo {
  aspect-ratio: 1 / 1;
}

/* 32pxアイコンの共通スタイル(写真プレースホルダのジャンルアイコン) */
.card__photo svg,
.gallery__photo svg {
  width: 32px;
  height: 32px;
}

.card__body {
  min-width: 0;
  /* カード全体のpaddingを外したぶん、テキスト側に余白を持たせる(左はgap:16pxが担当) */
  padding: 16px 16px 16px 0;
}

.card__name {
  font-size: 16px;
}

.card__area {
  font-size: 16px;
  color: var(--soft);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.card__desc {
  font-size: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- 3層目:白フッター ---------- */

.footer {
  background: #FFFFFF;
  padding: 32px 0;
  text-align: center;
}

/* ページの先頭へ戻る操作。以前はフットナビの1枠だったが、
   店舗ページでtel/lineが揃うと5枠(1枠72px)になり、実際に使う導線が
   ページ内移動に押されていたため、本文を読み終えた位置=フッターの先頭へ移した
   (2026-08-13 Teturoの判断)。
   行き先ではなく操作なので、テキストリンク(下線=リンクの合図)ではなく
   罫線で囲ったボタン風にして、下のプライバシー/©の2本のリンクと見分けられるようにする。
   影は使わない方針なので、区切りは1px罫線だけで示す */
.footer__top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* タップ対象の最小44px。文字16px+上下padding 8pxでは足りないので下限で押さえる */
  min-height: 44px;
  padding: 8px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--main);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: 16px;
}

.footer__top svg {
  width: 20px;
  height: 20px;
  display: block;
}

.footer__top:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.footer__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: 16px;
  /* サイト内で唯一のCTA。LINE公式の緑(#06C755)のベタ塗り+白文字にする。
     LINEの友だち追加ボタンだと一目で分かることを優先したTeturoの判断(2026-08-06)。

     ★この1箇所だけコントラスト4.5:1の対象外。白文字は2.26:1しかない。
     テーマのパレットを使わない固定色なので、build.jsのcheckTheme()は
     この色を見ておらず、基準を割ってもビルドは止まらない(検査が通ったのではなく
     対象外というだけ)。ここを触るときは手で測ること。
     背景をパレット由来に戻すなら、build.jsの「ベタ塗り+白文字は白地の文字色と
     同じ比なので重ねて検査しない」という前提(checkTheme冒頭のコメント)も一緒に読むこと。

     角丸だけは例外にせず、styleプリセットの2値のうちピル形(--radius-pill)を使う */
  color: #FFFFFF;
  background: #06C755;
  border-radius: var(--radius-pill);
  padding: 8px 32px;
  text-decoration: none;
}

.footer__cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 掲載イメージ(/sample/)への導線。CTAの下に置く補助リンクなので、
   ベタ塗りにせず本文色のテキストリンクにとどめる */
.footer__sample {
  margin-top: 16px;
  font-size: 16px;
}

.footer__sample a {
  color: var(--main);
  display: inline-flex;
  align-items: center;
}

.footer__note {
  font-size: 16px;
  color: var(--soft);
}

/* 上に何か(掲載イメージへの導線など)がある場合だけ間隔を空ける。
   フッターが表記だけのページでは.footerのpadding 32pxで足りており、
   ここでmargin-topを固定で持つと上が56px空いて間延びするため */
* + .footer__note {
  margin-top: 24px;
}

.footer__note a {
  color: var(--soft);
  /* ©のサービス名から/about/へ張ったことでリンクが縦に2本並ぶようになったため、
     隣の行を押してしまわないよう1行ぶんの高さ(タップ対象44px)を確保している */
  display: inline-flex;
  align-items: center;
}

/* ---------- フットナビ ---------- */

.footnav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  /* 画面幅いっぱいの白背景にする(中身だけを内側コンテナで680px幅に収める)。
     ナビ自体を680pxに絞ると、それより広い画面で左右に背後のセクション色が
     透けて見え、スクロールのたびに色が変わって見えてしまうため */
  background: #FFFFFF;
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}

.footnav__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  display: flex;
}

/* <a>と<button>が混在する(店舗ページの「お気に入り」だけトグルなので<button>)。
   ボタンの既定の見た目を消して、リンクと同じ形で等分に並ぶようにする */
.footnav__item {
  flex: 1;
  height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--soft);
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.footnav__icon {
  width: 22px;
  height: 22px;
}

.footnav__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.footnav__label {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  /* アイコン22px+余白2px+文字16px=40pxで、ナビの高さ56pxに収まる */
  font-size: 16px;
  line-height: 1;
  margin-top: 2px;
  /* 店舗ページはtel/lineの有無で最大5枠(1枠72px)になる。折り返すと2行になって
     56px高に収まらなくなるため、常に1行に固定する */
  white-space: nowrap;
}

/* 押せない枠(サンプル店の「電話」「LINE」)。見た目は他の枠と同じままにして、
   指のカーソルだけ消す。番号もLINEのIDも実在しない仮の値なのでリンクにできないが、
   枠ごと消すと「電話・LINEの枠が出せる」ことが見本で伝わらなくなるため枠は残す。
   色を薄くしたり打ち消し線を引いたりはしない(見本として壊れて見えてしまうため) */
.footnav__item--static {
  cursor: default;
}

/* aria-current=現在地(ホーム) / aria-pressed=登録済み(店舗ページのお気に入り)。
   どちらも「いま効いている枠」なので同じ濃さにする。
   お気に入りはさらにハートが塗られる(favorite.jsがsvgのfillを切り替える) */
.footnav__item[aria-current="true"],
.footnav__item[aria-pressed="true"] {
  color: var(--main);
}

.footnav__item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* ==============================
   店舗個別ページ(shop-template.html)
   build.jsが生成する /{city}/{town}/{slug}/ 用。トップページと同じ配色・余白ルールに揃える。
   個別ページは生成り一色のbodyの上に、文字を書く場所ごとに白背景+ボーダーの
   カードを乗せる構成にする(ヘッダー・フッターも白)
   ============================== */

.shop-body {
  background: var(--band);
}

/* 店舗ページの本文の左右余白は共通の.wrap(16px)に任せる。
   以前はここで8pxに上書きしていたが、2026-08-17にTeturoの判断で倍の16pxへ広げた。
   結果としてトップページと同じ値になったため、同じ内容の規則を書き足すのではなく上書きごと外してある
   (ヒーローは.wrapの外＝フルブリードなので、この余白の対象外) */

/* 店舗ページのサンプル告知は上下にも余白を持たせる。
   ページ最上部にあり、既定(.sample-note)のmargin-topが無く上だけ0になるため、
   ここで店舗ページに限って上下8pxを与える(トップページのカード一覧側は既定のままでよい) */
.shop-body .sample-note {
  margin-top: 8px;
  margin-bottom: 8px;
}

/* 店舗ページのmainは帯(.band)を持たないので、フッターとの間隔をここで持つ
   (帯のpadding-bottomと同じ64px)。これでabout系と店舗ページの作りが揃い、
   どちらも「最後のセクションだけ余白を打ち消す」特別扱いが要らなくなる。
   セクション同士の間隔は「余白の骨組み」節の section + section が持つ */
.shop-body main {
  padding-bottom: 64px;
}

/* ---------- ヒーロー写真 ---------- */

/* padding-bottomの%は「自分の幅」ではなく「containing blockの幅」基準で計算されるため、
   幅の上限(max-width)は必ずcontaining block側(.shop-hero)に付ける。
   .shop-hero__frame側に付けると、幅の制限が無い広い画面でcontaining blockの幅(画面幅いっぱい)
   を基準に計算されてしまい、意図した比率よりはるかに縦長になる */
.shop-hero {
  max-width: var(--page-max);
  /* .wrapと同じ理由でショートハンドにしない(margin-topを0で塗りつぶすと
     section + sectionの64pxが消えるため)。次のセクションとの間隔はそちらが持つ */
  margin-left: auto;
  margin-right: auto;
}

/* 高さ0+padding-bottomで比率を作る(aspect-ratioプロパティに頼らない昔ながらの手法。
   display:gridとaspect-ratioの組み合わせが効かない環境があったため、幅を基準にした確実な方法に変更)。
   届く写真はスマホの縦長が大半で比率を揃えられないため、heroは原寸のWebPをそのまま置き、
   切り抜きはこの枠のobject-fit:coverに任せる(トリミング作業をなくすため)。

   比率はスマホ4:3、PCではOGP(1200×630=1.905:1)と同じにする。LINEでカードを見てから
   開いた人に、カードの絵とページ冒頭の絵が同じ切り取られ方で並ぶようにするため。
   メディアクエリで段差をつけず、min()で「高さの上限」を決めて自然に移行させる:
     ・幅560pxまで … 4:3
     ・幅560px超   … 高さ420pxのまま横に伸びる
     ・幅800px(=--page-max)… ちょうど1.905:1
   上限の420pxは --page-max × 630 / 1200 で導けるので直書きしない
   (ページ最大幅を変えたら上限も自動で追従する) */
.shop-hero__frame {
  position: relative;
  width: 100%;
  padding-bottom: min(calc(100% * 3 / 4), calc(var(--page-max) * 630 / 1200));
  /* 背景がbodyと同じ生成りになるため、枠の輪郭が分かるよう線を引く */
  background: var(--band);
  border: 1px solid var(--line);
  color: var(--soft);
}

.shop-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* img化した際、上の枠内で綺麗に切り抜く(divのプレースホルダには影響しない)。
     PCでは枠が横長になるぶん、上下方向の切り抜きが強くなる */
  object-fit: cover;
  display: grid;
  place-items: center;
}

.shop-hero__photo svg {
  width: 64px;
  height: 64px;
}

/* ---------- 店名・ジャンル・キャッチコピー ---------- */

.shop-intro {
  padding: 16px;
}

.shop-intro__name {
  font-size: 24px; /* 店舗ページのh1。トップの.hero__titleと同じ段階に揃える */
  /* 下と左の余白は「余白の骨組み」節の section > h1 が持つ(h2と同じ扱い) */
}

.shop-intro__genre {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: var(--soft);
  margin-bottom: 8px;
}

.shop-intro__tagline {
  font-size: 16px;
  margin-bottom: 8px;
}

.shop-intro__desc {
  font-size: 16px;
  color: var(--soft);
}

/* ---------- お知らせ枠(notice) ---------- */
/* 他セクションの箱(.shop-facts等)と同じ白地＋1px罫線に揃える。控えめに1件だけ。
   メガホンアイコンは箱の中ではなく見出し(.band__label)の左に置いてあるので、
   ここは白地＋焦茶の本文だけを持つ(枠を警告色にしない・build-spec.md §3) */
.shop-notice {
  padding: 16px;
  font-size: 16px;
  color: var(--main);
}

/* ---------- 基本情報(table) ---------- */

.shop-facts {
  padding: 8px 16px;
}

.shop-facts__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}

.shop-facts__table th,
.shop-facts__table td {
  text-align: left;
  vertical-align: top;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 400;
}

.shop-facts__table tr:first-child th,
.shop-facts__table tr:first-child td {
  padding-top: 0;
}

.shop-facts__table tr:last-child th,
.shop-facts__table tr:last-child td {
  border-bottom: none;
}

.shop-facts__table th {
  /* 最長ラベル「はじめての方」がアイコン16px+余白8px+6文字×16px=約120pxになり、
     white-space:nowrapで112pxを超えて列が勝手に広がるため128px(8の倍数)にする。
     全行のラベル左端・値左端を揃えるのが目的 */
  width: 128px;
  color: var(--main);
  white-space: nowrap;
  padding-right: 8px;
}

.shop-facts__table th svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-right: 8px;
  vertical-align: -3px;
}

.shop-facts__table a {
  /* 電話番号のtel:リンクがブラウザ既定の青にならないよう、パレット内の色にする */
  color: var(--main);
}

.shop-facts__maplink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
  color: var(--main);
  text-decoration: underline;
}

.shop-facts__maplink svg {
  color: inherit;
}

/* 表の値の中に置くアイコン付きの1行リンク。現在の使い手は住所の直下のGoogleマップリンクと
   LINEの行の2つ(2026-08-17に地図専用の .shop-facts__gmap から改名して共用にした)。
   表の値の列は360px幅で約160pxしかなく、.shop-facts__maplink のような inline-flex だと
   「Googleマップで開く」が折り返せず横にはみ出す。そこでブロックレベルのflexにして、
   アイコンは flex-shrink:0 で固定・文だけを折り返させる。
   最小タップ領域44pxは、独立した「地図」セクションだった頃の .shop-map__link から引き継ぐ */
.shop-facts__link {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--main);
  /* 表の中の他のリンク(.shop-facts__maplink)と同じく下線でリンクだと示す。
     displayをflexにするとブラウザ既定の下線の付き方が環境で揺れるため明示する */
  text-decoration: underline;
}

/* サンプル店のLINEはリンクにしない(spanで出す)ので、リンクの合図である下線だけを外す。
   色を薄くしたり打ち消し線を引いたりはしない(見本として壊れて見えるため)。
   min-height:44pxは残す = 実店舗のページと行の高さが揃い、見本として同じに見える */
.shop-facts__link--static {
  text-decoration: none;
}

.shop-facts__link svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.shop-facts__note {
  display: block;
  color: var(--soft);
}

/* 基本情報の表の直下に置く注記。表の最終行は border-bottom を消しているので、
   罫線は自分で持つ(影は使わず罫線で区切る方針に合わせる)。
   色は--softで、白地でも4.5:1を満たす(ビルドが毎回検査している3色のひとつ) */
.shop-facts__caution {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 16px;
  color: var(--soft);
}

/* ---------- メニュー/活動内容(既存.cards系を流用。card__metaのみ新規) ---------- */

.card__meta {
  font-size: 16px;
  color: var(--soft);
  margin-bottom: 8px;
}

/* ---------- サンプル掲載の告知 ---------- */
/* 加入者が入るまでの間、実在の店と誤解されないための表示。
   カード一覧・店舗ページの両方で使う。実店舗が入ればshops.jsonのisSampleを外すだけで消える */

.sample-note {
  /* 白地＋罫線で面を作る。帯(帯色)の上では白が最も浮き、白地の上では罫線が枠を示す。
     中のバッジ(アクセントのベタ塗り)が白地の上で際立ち、注意書きの入口になる */
  padding: 8px 16px;
  margin-bottom: 32px;
  font-size: 16px;
  line-height: 1.7;
}

/* お気に入り表示で1件も無いときの案内。以前は色を落とした地の文だったが、
   初めて見た人に押す対象が伝わらなかったため、白地＋罫線の箱にして
   先頭のinfoアイコンと文中のハートで導線を示す形にした(2026-08-13 Teturoの判断)。
   箱の作りはお知らせ枠(.shop-notice)と同じ白地＋罫線。
   アイコンを箱の中に置くのはこちらだけ(お知らせのメガホンは見出しの左へ移した)。
   ここは見出しを持たない案内文なので、箱の中に置く形を続ける */
.cards-empty {
  padding: 16px;
  margin-bottom: 32px;
  font-size: 16px;
  line-height: 1.7;
  /* 本文は補足なので--softのまま。文中のハートもcurrentColorで同じ色になり、
     店舗ページの「まだ登録していない」ときのフットナビのハートと同じ見え方になる */
  color: var(--soft);
}

/* display指定は:not([hidden])側に置く。無条件にflexを当てると作者スタイルが
   ブラウザ既定の[hidden]{display:none}に勝ってしまい、script.jsが隠せなくなる
   (.cards > li や .lightbox__prev と同じ理由・同じ書き方) */
.cards-empty:not([hidden]) {
  /* infoを本文の左に置く。文が2行以上でもアイコンは1行目の高さに留めたいので
     align-items は center ではなく flex-start にする */
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* 先頭のinfo。枠と本文は静かなままアイコンだけアクセントにして
   「読むところ」の目印にする(枠を警告色にしない) */
.cards-empty__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--accent);
  /* 本文1行分(16px × 行間1.7 = 27.2px)の中央に20pxを置くための光学調整。
     余白ではなく行の中心合わせなので8の倍数ルールの対象外 */
  margin-top: 4px;
}

/* アイコンの隣の本文。flexアイテムなので幅の伸縮を明示する */
.cards-empty__text {
  flex: 1;
}

/* 文中の「お気に入り」の左横のハート。フットナビのどの枠を指しているかの目印。
   色はcurrentColor(=本文の--soft)なので指定しない */
.cards-empty__heart {
  width: 16px;
  height: 16px;
  /* 字面の中心に合わせるための光学調整(8の倍数ルールの対象外) */
  vertical-align: -3px;
  margin-right: 2px;
}

.sample-badge {
  display: inline-block;
  /* 白地+アクセント(橙)の文字と罫線。newラベル(.item-label--new)と同じ作り。
     カードでは写真の上に重なるが、白地が不透明なので文字のコントラストは写真に左右されず、
     罫線が明るい写真の上でも輪郭を作る。
     アクセントは全パレットで白地4.5:1以上(build.jsが毎ビルド検査)なので14pxでも使ってよい */
  background: #FFFFFF;
  color: var(--accent); /* .displayの焦茶を打ち消してアクセントにする */
  border: 1px solid var(--accent);
  /* 商品ラベルと同じ扱いで、本文(16px)より一段小さくする(CLAUDE.mdの14px例外) */
  font-size: 14px;
  line-height: 1.7;
  /* 罫線1pxぶんを差し引いて、ベタ塗り時代と同じ外形の大きさを保つ */
  padding: 0 8px;
  border-radius: var(--radius-pill); /* チップと同じピル形 */
  margin-right: 8px;
}

/* カードの中では写真の左上に重ねる。文字の並び(店名/エリア/説明)を崩さずに、
   一覧をざっと見たときに写真そのものへ注意書きが乗るので見落としにくい。
   バッジ自身が白地+罫線で面を持つので、下がどんな写真でも読める(影・スクリムは足さない) */
.card > .sample-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  margin-right: 0;
}

/* メニューのラベル(おすすめ/人気/new)。1項目に1つだけ、写真の左上に重ねる。
   焦茶ベタ+白罫線 / 地色ベタ+罫線 / 白地+橙の罫線 の3段階で見分ける。
   いずれも罫線ありなので、濃淡が近い写真に重なっても縁が溶けない。
   newだけは新着として一番目に留めたいのでアクセント(橙)を使う。
   14pxでも橙は白地5.18:1でAAを満たすため、文字色に使ってよい */
.item-label {
  /* 検索カードのサンプルバッジ(.card > .sample-badge)と同じ仕組み。基準は.cardの
     position:relativeで、写真はカードの左上の角にぴったり付いているので、
     写真を包む要素を足さずに(実写真の<img>とダミーの<div>で分岐せずに)重ねられる。
     商品名の上ではなく写真に乗せることで、一覧をざっと見たときに見落としにくく、
     ラベルの有無で商品名の高さがずれることもなくなる。
     z-indexは不要(配置済み要素はフロー中の写真より上に描かれる) */
  position: absolute;
  top: 8px;
  left: 8px;
  /* 主役である商品名(16px)を食わないよう一段小さくする。
     「見出し以外は16px」ルールの唯一の例外(CLAUDE.md参照) */
  font-size: 14px;
  line-height: 1.7;
  padding: 0 8px;
  border-radius: var(--radius-pill); /* チップと同じピル形 */
}

.item-label--pick {
  background: var(--main);
  color: #FFFFFF; /* .displayの焦茶を打ち消す。ベタ塗りの上なので白 */
  /* 3種のうちこれだけ罫線が無いと、地色が濃い写真に重なったときバッジの縁が溶けて
     見えることがあるため、白い罫線で輪郭を作る(装飾なのでWCAGの対象外) */
  border: 1px solid #FFFFFF;
}

.item-label--popular {
  background: var(--band);
  color: var(--main);
  /* 3種のうちこれだけ面が薄いので、罫線が無いとピルの形が消えてしまう。
     地色は白にも写真プレースホルダの地(--band)にも近く、罫線を控えめな--lineに
     すると明るい写真の上で輪郭がほぼ残らないため(--lineと--bandは約1.15:1)、
     写真に重ねる置き方に合わせて--softまで強める。罫線は装飾なのでWCAGの対象外。
     これで「焦茶ベタ / 地色+濃いめ罫線 / 白地+橙罫線」の3段階の序列は保たれる */
  border: 1px solid var(--soft);
}

.item-label--new {
  background: #FFFFFF;
  /* .displayの焦茶を打ち消して橙にする。罫線も同色にして輪郭をはっきりさせる */
  color: var(--accent);
  border: 1px solid var(--accent);
}

/* ---------- ギャラリー ---------- */

.gallery {
  /* .cardsと同じ考え方で、幅に応じて列数が自動で増える(スマホ2列→ページ最大幅で4列)。
     @mediaを足さないのは、ブレークポイントを増やさず幅そのものに追従させる
     サイト全体の方針のため。min(152px, 100%)は152pxより狭い枠で列が画面外に
     はみ出すのを防ぐ保険。auto-fitではなくauto-fillにするのは、写真が2〜3枚
     しかない店で1枚が極端に大きく引き伸ばされないようにするため */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(152px, 100%), 1fr));
  gap: 16px;
  list-style: none;
}

.gallery__item {
  /* 基本情報の「写真で見る」からアンカーで飛んだとき、写真が画面最上端に貼りつかないようにする */
  scroll-margin-top: 16px;
}

/* 高さ0+padding-bottom:100%で正方形を作る(aspect-ratioプロパティに頼らない昔ながらの手法。
   display:gridとaspect-ratioの組み合わせが効かない環境があったため、幅を基準にした確実な方法に変更) */
.gallery__photo-frame {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  background: var(--band);
  color: var(--soft);
}

/* 実写真だけボタンでラップして拡大表示(lightbox.js)につなげる。プレースホルダーには
   拡大するものが無いのでボタンにしない。position:absoluteでフレームいっぱいに広げると、
   これがすぐ内側の.gallery__photo(img)にとっての新しい配置の基準になるので、
   .gallery__photoのposition:absolute側は変更しなくてよい */
.gallery__photo-btn {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* カード側(.gallery__item)がoverflow: hiddenで写真の角丸に沿って切り抜くため、
   フォーカスリングが縁で切れないよう内側にずらす(.footnav__itemと同じ考え方) */
.gallery__photo-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.gallery__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 元写真の縦横比は自由なので、正方形の枠に合わせて切り抜く */
  display: grid;
  place-items: center;
}

.gallery__caption {
  font-size: 16px;
  color: var(--soft);
  margin-top: 8px;
  padding: 0 8px 8px; /* 写真には掛けず、キャプションだけに余白を持たせる */
}

/* ---------- ギャラリーの拡大表示(lightbox.jsが開閉するdialog) ---------- */
/* 写真そのものを主役にする画面なので、店ごとのテーマパレットには追従しない固定色を使う。
   CLAUDE.mdの4.5:1検査はテーマパレット(--main/--accent/--soft)だけが対象で対象外になるが、
   白文字はほぼ黒の地の上なので目視でも差は十分にある */
.lightbox {
  position: fixed;
  inset: 0;
  margin: auto;
  max-width: min(92vw, 800px);
  max-height: 92vh;
  overflow: auto; /* 横向きの狭い画面でキャプションが収まりきらない場合の保険 */
  padding: 0;
  border: none;
  border-radius: var(--radius); /* 角丸の値そのものはテーマ共通の1本(--radius)を流用する */
  background: #1A1A1A;
  color: #FFFFFF;
}

/* 開いた直後のフォーカスの受け皿(lightbox.jsがtabindex="-1"を付けてfocus()する)なので、
   枠は出さない。ここはボタンではなく箱で、操作の位置を示す必要が無いため。
   閉じる/前後ボタン側のフォーカスリングはそのまま残してある */
.lightbox:focus,
.lightbox:focus-visible {
  outline: none;
}

.lightbox::backdrop {
  background: rgba(0, 0, 0, 0.85);
}

.lightbox__photo {
  display: block;
  /* 元写真は長辺800pxまでしか無いので、それ以上には広げない(引き伸ばしてぼやけさせない) */
  max-width: min(92vw, 800px);
  max-height: 76vh;
  width: auto;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

.lightbox__caption {
  padding: 8px 56px 16px; /* 左右は閉じる/前後ボタンの下に文字が回り込まないよう広めに取る */
  font-size: 16px;
  line-height: 1.7;
  text-align: center;
}

.lightbox__count {
  padding: 0 16px 8px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}

/* 閉じる/前後ボタン共通。アイコンのみの透過ボタン。タップ領域は44px四方を確保する
   (閉じるだけは下で地を敷く。CLAUDE.mdの「ベタ塗り+白文字はCTA1箇所だけ」の例外) */
.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  padding: 0;
  color: #FFFFFF;
  cursor: pointer;
}

/* 閉じるボタンだけは黒地を敷いて、明るい写真の上でも白い×が常に見えるようにする
   (2026-08-17 Teturoの判断)。以前は3つとも透過で、開いた直後にフォーカスリング
   (アクセント色)が出ている間しか輪郭が分からず、前後に送るとフォーカスが移って
   輪郭が消えるため「閉じ方が分からない」状態になっていた。
   色はライトボックス自身の地と同じ#1A1A1Aで新しい色を増やさない。角丸も個別の値を
   作らずテーマ共通の--radiusを流用する(このページで使う角丸は2値だけ、の規則どおり) */
.lightbox__close {
  display: grid;
  place-items: center;
  top: 8px;
  right: 8px;
  background: #1A1A1A;
  border-radius: var(--radius);
}

/* 先頭/末尾ではlightbox.jsがhidden属性を付けて隠す。.cardsのli非表示と同じ理由で
   :not([hidden])の側にだけdisplayを持たせる(そうしないとUAのhidden規定が
   このクラスのdisplay指定に負けてしまい、隠したはずのボタンが表示され続ける) */
.lightbox__prev:not([hidden]),
.lightbox__next:not([hidden]) {
  display: grid;
  place-items: center;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__prev {
  left: 8px;
}

.lightbox__next {
  right: 8px;
}

.lightbox__close svg,
.lightbox__prev svg,
.lightbox__next svg {
  width: 24px;
  height: 24px;
}

.lightbox__close:focus-visible,
.lightbox__prev:focus-visible,
.lightbox__next:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ライトボックスを開いている間、背景のスクロールを止める(保険。<dialog>のトップレイヤーは
   背景の操作は止めるが、スマホでのスクロールまでは保証しないため。lightbox.jsが付け外しする) */
body.lightbox-open {
  overflow: hidden;
}

/* ---------- SNS(アイコン+テキストの1行リンク) ---------- */
/* 地図リンクも以前はこの作りを共有していたが、独立セクションをやめて基本情報の
   住所の直下へ移したため .shop-facts__link に移った(2026-08-15。クラス名は2026-08-17に改名) */

.shop-sns__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  color: var(--main);
  text-decoration: none;
  font-size: 16px;
}

.shop-sns__link svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ---------- フッター(背景は白のまま。上線だけ追加。トップページの.footerは変更しない) ---------- */

.shop-body .footer {
  border-top: 1px solid var(--line);
}

/* ==============================
   このサイトについて(about.html)
   帯の中に文章のセクションを積むページ。店舗ページと同じ組み立てで、
   見出し(.band__label)は帯の上にそのまま置き、本文だけを白地+罫線の箱に入れる
   (文字色は body の焦茶をそのまま使う)。
   見出し・表(.shop-facts)・CTA(.footer__cta)は既存の部品を流用する
   ============================== */

/* セクション間の64pxも、見出し下の8pxと左の16pxも、すべて「余白の骨組み」節の
   タグ側の指定(section + section / section > h1, section > h2)が持つ。
   帯(.band)の中に積む作りだが、間隔をmargin-topで持つようにしたので、
   最後のセクションだけ打ち消すといった特別扱いは要らない */

/* 本文の白地の箱。カード(.card)や店舗ページの.shop-factsと同じ作り方に揃える。
   見出しをこの中に入れないことで、帯の上に見出し・その下に箱、という
   店舗ページと同じ縦の並びになる */
.about-block__body {
  padding: 16px;
}

/* 文章の箱の中で段落が続くときの間隔。段落は<p>なので、間隔もタグ同士で決める
   (無条件の p + p にするとカードの中まで効いてしまうため、箱で範囲だけ絞る) */
.about-block__body p + p {
  margin-top: 16px;
}

/* 申し込みのCTAは中央に置く。.footer__ctaはinline-flexなので、
   ボタン幅のブロックにしてから左右autoで寄せる
   (marginショートハンドにすると上の16px間隔まで0で消えるため、左右だけ指定する)。
   CTAは<p>ではないので上の p + p に乗らない。段落同士と同じ16pxをここで持つ */
.about-block__body > .footer__cta {
  display: flex;
  width: fit-content;
  margin-top: 16px;
  margin-left: auto;
  margin-right: auto;
}

/* CTAの下に置くメールの補足文。p + pではCTA(<a>)を挟むと拾えないため、
   .footer__sampleと同じ「CTAの下に16pxで置く」考え方で個別に間隔を持つ */
.about-block__body > .cta-note {
  margin-top: 16px;
  text-align: center;
}