/* ==========================================================================
   POTOMAK 2026 — BRANDページ専用スタイル
   出典: Figma「POTOSITE_FINAL」BRAND_0619 (node 2083:520)

   セクション順:
     ページ見出し / Recent Restaurant&Brands / Our Brands /
     Area Search / All Shop List
   (ページ見出し .page-hero は base.css にある共通パーツ)
   ========================================================================== */

/* ---------- Recent Restaurant&Brands ---------- */

.recent {
  /*
   * ここは共通ルール(--rule-section)だけでは足りない。
   *
   * コラージュの店名キャプションは、写真の枠の外(下)に出る作り
   * (.collage__caption が top:100% の絶対配置)。
   * ふだんは透明だが、マウスを乗せると現れて枠の下にはみ出す。
   * 48pxしか空けないと、そのキャプションが下の Our Brands に重なる。
   *
   * そこで「キャプションの高さ」+「区切りの空き」を足している。
   *   写真からの空き 12px + 1行目 19px + 店名までの空き 4px + 店名 29px ≒ 64px
   * キャプションの文字サイズや空きを変えたら、この64pxも measure し直すこと。
   *
   * 足す区切りは --rule-fill(48px)。下が地色を沈ませた面なので、
   * 色の境目の外側は48pxというルールに合わせている
   * (64pxはキャプションが入る場所＝中身であって、空きではない)。
   */
  padding-bottom: calc(64px + var(--rule-fill));
}

/*
 * 写真を散らして置くための枠。
 * 枠の縦横比を固定し、中の写真は % で位置と大きさを指定する
 * (位置の値はテンプレート側の style 属性で渡している)。
 * こうすると画面幅が変わっても、散らし方の比率が崩れない。
 */
.collage {
  position: relative;
  /* 縦の空きを詰めたぶん、枠も低くしている(Figma原寸は 1267 / 1366) */
  aspect-ratio: 1267 / 1233;

  /*
   * 上の空きは持たない。
   *
   * すぐ上のページ見出し(.page-hero)が自分の下余白として48pxを持っており、
   * BUSINESSの大判写真も同じ作りになっている。
   * ここでも持つと足し算されて96pxになる
   * (見出しを置いていた頃の名残)。
   */
  margin-top: 0;
}

/*
 * 枠の高さは写真の高さ。店名はその下にはみ出す形で置く。
 * こうすると散らし配置の比率を崩さずに、写真の真下へ文字を添えられる。
 */
.collage__item {
  position: absolute;
  margin: 0;
}

.collage__item > a {
  display: block;
  width: 100%;
  height: 100%;
}

.collage__thumb {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--color-grayge);
}

.collage__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.collage__item:hover img {
  transform: scale(1.03);
}

.collage__item .placeholder {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
}

/*
 * 写真の真下。枠の外に置くので position: absolute の top: 100% を使う。
 * 普段は隠しておき、写真にカーソルを乗せたときだけ表示する
 * (Figmaでは写真だけが散らばっている見た目のため)。
 */
.collage__caption {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  /* 写真 → その説明。全ページ共通(tokens.css の --rule-caption)。元は24px */
  padding-top: var(--rule-caption);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.collage__item:hover .collage__caption,
.collage__item:focus-within .collage__caption {
  opacity: 1;
}

.collage__area {
  display: block;
  font: var(--type-caption);
  letter-spacing: var(--ls-caption);
  color: var(--color-text-sub);
}

/* Figmaの Hero カードと同じ、ゴシック24px(Name-San) */
.collage__name {
  display: block;
  margin-top: var(--space-2xs);
  font: var(--type-name);
  letter-spacing: var(--ls-heading);
  color: var(--color-ink);
}

/*
 * 新着の帯(.recent-strip)はスマートフォンだけのもの。
 * PCは上の散らし配置(.collage)で足りているので出さない。
 * 中身の指定はこのファイル末尾、スマートフォンの章にある。
 */
.recent-strip {
  display: none;
}


/* ---------- Our Brands ---------- */

/*
 * 地色を一段沈ませた面(has-tint)。
 *
 * 色の境目から中身までは、内も外も --rule-fill(48px)にするのが決まり
 * (理由は tokens.css の --rule-fill を参照)。
 * 下の Area Search は上の余白を持っていないので、
 * 外側の48pxはこちらが全部持つ(差し引きしない)。
 *
 * 上だけは足していない。すぐ上のコラージュが、
 * ホバーで出る店名のぶん(64px)を自分の下余白として既に持っているため。
 */
.our-brands {
  /*
   * 外側は「--rule-fill から --rule-section を引いた値」。
   * 隣のセクションが自分の上下に --rule-section を先に持っているので、
   * 足して --rule-fill(48px)になる。tokens.css の決まりどおり。
   * 以前は48pxをそのまま書いていて、隣のぶんと足されて72pxになっていた。
   */
  margin-bottom: calc(var(--rule-fill) - var(--rule-section));
  padding-block: var(--rule-fill);
}

/*
 * 4組ぶんのまとまり。
 * 区切りの罫線は本文の幅で引く(画面の端までは伸ばさない)。
 */
.brand-rows {
  /*
   * 見出しと罫線のあいだ。
   * 見出しが線の上に乗っているように見せたいので、かなり近づけている。
   * 罫線から下が一覧の本体。「店舗リスト」(.all-shops__list)と同じ組み方。
   */
  margin-top: var(--rule-title);
  border-top: 1px solid var(--color-line);

  /*
   * カード同士のすき間。
   * 写真の帯と見出し帯が同じ4列のグリッドを使い、
   * その列の間隔もこの値なので、上下の左端がそのままそろう。
   */
  --shop-card-gap: 24px;
}

/*
 * 1組ぶん。上に見出しの帯(名前・説明・リンク)、下に店舗カードの帯。
 *
 * 以前は左に説明カラム(372px)を置いて右に写真を並べていたが、
 * それだと写真の帯が半分の幅しか使えず、2枚しか見えなかった。
 * 説明を上の帯に移したことで、写真が画面の幅をまるごと使える。
 *
 * 罫線・見出し・写真の左端は、すべて本文と同じ位置でそろえる。
 */
/*
 * TOPのブランドカードから飛んでくる位置。
 * ヘッダーが画面上部に貼り付くので、その高さぶんだけ手前で止める
 * (これが無いと、見出しがヘッダーの下に隠れる)。BUSINESSの領域見出しと同じ考え方。
 */
.brand-row {
  scroll-margin-top: var(--header-height);
  /*
   * 1組ぶんの上下の空き。罫線をはさんで上下とも同じ値。
   * 「境目をはさんで内側と外側は同じ数値」というサイト共通の考え方
   * (tokens.css の --rule-section)を、この線にも当てている。
   * 最初の1組は、この空きが見出しの罫線からの距離になる。
   *
   * 守る範囲は 32px 超 96px 未満。
   *   下限 … 組の中の空き(見出し帯→写真24px、写真→リンク32px)より
   *          広いこと。逆転すると、写真が自分のブランド名よりも
   *          上の組のほうに近く見えて、1組の範囲が分からなくなる。
   *   上限 … セクションの終わり(96px)より狭いこと。組の切れ目が
   *          セクションの切れ目と同じ強さになると階層が読めない。
   *
   * もとは64px(--space-2xl)だったが、組と組のあいだには罫線があり、
   * 切れ目は線が示してくれる。空きで分ける必要が無いぶん詰められるので、
   * かたまりどうしの48px(--rule-block)に落とした。
   */
  padding-block: var(--space-xl);
}

/*
 * 組と組の区切り。
 * 2組目から上に引く(1組目の上には見出しの罫線があるため)。
 */
.brand-row + .brand-row {
  border-top: 1px solid var(--color-line);
}

/*
 * 最後の組だけ、下の48pxを外す。
 *
 * この48pxは「次の組と分けるため」の空きで、下に組が続かない
 * 最後の1つには要らない。残すと、セクション自身の下の空き(48px)と
 * 足されて96pxになり、次のセクションの見出しまでの空き(48px)より
 * ずっと広くなる。「店舗リストへ」が、自分のセクションから
 * 切り離されて宙に浮いて見えていた。
 */
.brand-row:last-child {
  padding-bottom: 0;
}

/*
 * 見出しの帯。名前 / 説明 / リンク の3つ。
 *
 * 下の写真と同じ4列のグリッドに乗せている。
 * 同じ列を使うので、名前や説明の左端が写真の左端とそのままそろう。
 *
 *   名前 … 1列目(1枚目の写真の上)
 *   説明 … 2〜3列目(2枚目と3枚目の写真の上)
 * リンクは写真の下に置くので、この帯には入らない。
 */
.brand-row__info {
  display: grid;
  /* 下の写真と同じ3列。列の割り当ては下の .brand-row__name / __body で指定 */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--shop-card-gap);

  /*
   * 名前と説明を「文字の頭」でそろえる。
   *
   * 説明が2〜3行になったので、足元(ベースライン)でそろえると
   * 名前が文章の1行目ではなく最後の行に並んでしまう。
   * 1行のタグラインだった頃はベースラインでよかった。
   *
   * start は箱の上端でそろえる指定。
   * 名前(32px/行送り1.5)と説明(15px/行送り1.9)では
   * 文字の上に入る空きが 8px と 6.75px でほぼ同じなので、
   * これで文字の頭が並んで見える。
   */
  align-items: start;
}

/*
 * 見出し帯の入れ物2つ(head / detail)。
 *
 * 広い画面では display:contents にして「無かったこと」にしている。
 * こうすると中の 名前 / 説明 / リンク がそのまま3列の中身になり、
 * 入れ物を足す前とまったく同じ並びを保てる。
 * 狭い画面(下のスマホ指定)でだけ、この入れ物が意味を持つ。
 */
.brand-row__head,
.brand-row__detail,
.brand-row__detail-inner {
  display: contents;
}

/*
 * ブランド名。明朝の32px(H1-Serif)。
 *
 * 一段上の Display-Serif(38px)だと、一番長い「ひとつのコンセプト」が
 * 名前の列(カード1枚 + すき間 = 324px)に収まらず折り返してしまう。
 * 説明文を2枚目の写真にそろえることを優先して、こちらを選んでいる。
 * 狭い画面では --fs-h1 自体が24pxまで縮むので、ここでの指定は不要。
 */
/*
 * ブランド名。Name-San(ゴシック20px / 350)。
 *
 * このサイトで「ブランド名・店名・施設名」に当てている書式。
 * TOPのブランドカードも、店舗カードも、コラージュの店名も同じもの。
 *
 * 以前はここだけ32px(H1-San)にしていたが、
 * すぐ上のセクション見出し「ブランドリスト」(明朝32px)と同じ大きさになり、
 * 中の項目が親の見出しと並んで上下関係が消えていた。
 * しかも書体が違うぶんゴシックのほうが目立ち、主客が逆転していた。
 *
 * 字間は英字用の --ls-en。ラテン文字の大文字が続くと字面が詰まって見えるため。
 */
/*
 * ブランド名。
 *
 * 店名(Name-San 20px)と同じ数値だと、欧文だけ小さく見える。
 * 同じ20pxでも、日本語は字面がほぼ20px分あるのに対し、
 * 欧文の大文字は実際の高さが14px程度しかないため。
 * そこでここだけ26px(H2と同じ大きさ)に上げて、
 * 日本語の20pxと並んだときに見た目が釣り合うようにしている。
 *
 * ブランド名はそのかたまりの主役なので、
 * 中の店名より一段大きいこと自体にも意味がある。
 */
.brand-row__name {
  font: var(--type-name);
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-en);
}

/* 2〜3列目。2枚目と3枚目の写真の上に乗る */
.brand-row__body {
  grid-column: 2 / 4;
  font: var(--type-body);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}

/*
 * 写真の下に置くリンク。
 *
 * 名前と説明を読み、写真を見たあとに「もっと見る」が来る順にしている。
 * 右端にそろえるのは、TOPのセクション末尾のリンク(.section-foot)と同じ考え方。
 * 写真の帯が本文の右端まで届いているので、そこで受けると帯が閉じて見える。
 *
 * 見た目はサイト共通の pill-link(文字 + 青い丸の矢印)を使う。
 * 書式はそちらが持っているので、ここでは並べ方と位置だけを決める。
 */
.brand-row__links {
  display: flex;
  /* 右端でそろえる。増えても横1行 */
  justify-content: flex-end;
  /*
   * 保険。幅320pxのような極端に狭い画面でだけ折り返す。
   * 折り返さないと、文字が枠からはみ出して横に流れてしまう。
   * 幅360px以上では1行に収まる(下のメディアクエリの計算を参照)。
   */
  flex-wrap: wrap;
  gap: var(--space-2xl);
  /* 中身とリンクのあいだ。セクションの中の区切りなので --rule-row */
  margin-top: var(--rule-row);
}

/*
 * 店舗カードの帯。4枚を横に並べる。
 * 左端も右端も、上下の罫線と同じ位置(本文の幅)にそろう。
 */
.shop-strip {
  /*
   * 6枚(店舗数の少ないまとまりは3枚)を並べきる。横スクロールはしない。
   *
   * 以前は全件(一点ものは約30件)を横スクロールで流し、
   * JavaScriptでカードを複製して輪のようにつないでいたが、
   * 出す枚数を4件に絞ったので、隠す仕掛けごとやめている。
   * 一目で全部見えるほうが、「これで全部ではない」ことも含めて誤解が無い。
   *
   * 並びは PC 3列 × 2段 / スマホ 2列 × 3段。
   * 1枚の幅は本文の幅を3等分した値。画面が広がれば1枚も大きくなる。
   * 列の数は、ブランドごとの店舗一覧(.mosaic)と同じ3列にそろえている。
   * 写真は横長(5:3)なので、高さはその 3/5。
   * 空間写真はほぼ横構図なので、正方形に切ると店の広がりが失われる。
   */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--shop-card-gap);
  /*
   * 段どうしの空きは24px。列の間と同じ値。
   *
   * 写真の下には「12px + 店名」が付くので、次の段までは
   * 数値より広く見える。32pxまで空けると6枚がひとつの
   * かたまりに見えなくなり、12pxまで詰めると窮屈になる。
   */
  row-gap: var(--space-md);

  /*
   * 見出し帯とのあいだ。
   * ここが詰まりすぎると文字と写真がくっついて見える。
   * 広い画面・狭い画面とも同じ空き。
   * ただし罫線まわりの空きより狭いことは保つ。
   */
  margin-top: var(--space-md);
}

.shop-card {
  display: block;
  /* グリッドの中で文字が縮めるようにするための決まり文句(店名の「…」に必要) */
  min-width: 0;
}

/*
 * 狭い画面のためだけに1枚足したカード。
 *
 * 3列(PC)では3枚でちょうど段が埋まるが、2列(スマホ)だと最後に空きが出る。
 * CMSから1枚多く引いておいて、広い画面ではこれを出さない。
 * 表示の都合だけの分岐なので、CMS側の設定(strip)は3枚のまま。
 */
@media (min-width: 769px) {
  .shop-card--sp {
    display: none;
  }
}

.shop-card__thumb {
  aspect-ratio: 5 / 3;
  overflow: hidden;
  background-color: var(--color-grayge);
}

.shop-card__name {
  /* 写真 → その説明。全ページ共通(tokens.css の --rule-caption) */
  margin-top: var(--rule-caption);
  /*
   * 店名は Caption(12px)。
   * ここは写真で雰囲気を伝える場所なので、文字は控えめに添えるだけにする。
   * (一度 List(14px)まで上げたが、写真の主張を弱めるので戻した)
   */
  font: var(--type-caption);
  letter-spacing: var(--ls-caption);
  color: var(--color-ink);

  /*
   * 1行に収め、入りきらない分は「…」で省略する。
   * 2行に折り返すと、その1枚だけ背が伸びて段の下端がそろわず、
   * 6枚のかたまりが崩れて見える。
   * 店名の全文は、押した先の店舗ページで読める。
   */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


/* ---------- Area Search ---------- */

/*
 * 下の空きは持たせない。
 * このすぐ下に来る All Shop List が自分の上の空き(120px)を持っているため、
 * ここでも持つと二重になって開きすぎる。
 */
/*
 * 下の「店舗リスト」はベタ面で、色の境目の外側に48pxを求める。
 * 向こうは「隣が24px持っている」前提で残りの24pxだけを margin で足しているので、
 * こちらが24pxを持たないと境目が24pxになってしまう。
 */
/* フッターから飛んでくるので、ヘッダーの高さぶん手前で止める */
.area-search,
.all-shops {
  scroll-margin-top: var(--header-height);
}

/*
 * 上下ともセクション共通の24px。
 * 隣のセクションも同じ24pxを持っているので、境目は合わせて48pxになる。
 */
.area-search {
  padding-top: var(--rule-section);
  padding-bottom: var(--rule-section);
}

/*
 * BRANDページの店舗リストは、地色のまま(ベタ面にしない)。
 *
 * 店舗リスト(.all-shops)は本来ベタ面で、
 * 店舗の個別ページではページの終わりを示す役目を持っている。
 * ただしBRANDでは、すぐ上の「ブランドリスト」(.our-brands)がすでにベタ面。
 * 面が2つ続くと、そこで切り分ける意味が無くなり、
 * 細い地色の帯が1本挟まっただけに見える。
 *
 * セクションは地色とベタ面を交互にするのが決まりなので、
 * ここだけ地色に戻し、余白も普通のセクションと同じにする。
 */
body.post-type-archive-brand .all-shops {
  background-color: transparent;
  /* 隣のセクションが --rule-section を持つので、合わせて --rule-fill になる */
  margin-block: calc(var(--rule-fill) - var(--rule-section) * 2);
  padding-block: var(--rule-section);
}

/*
 * 地方の切り替え。
 *
 * 以前は文字だけを並べて、選んだものに下線を引いていたが、
 * 「押せるもの」に見えず、下線も見出しの装飾と紛らわしかった。
 * 枠のある錠剤型にして、選んでいるものは塗りつぶす。
 *
 * 見た目は同じページのブランドの絞り込み(.shop-find__brand /
 * assets/css/page-shop-search.css)と同じ値にしてある。
 * 1ページに「条件で絞る」操作が2か所あるので、形が違うと
 * 別の機能に見えてしまう。片方を直すときは必ず両方を直すこと。
 */
.area-tabs {
  display: flex;
  flex-wrap: wrap;
  /*
   * 左ぞろえ。中央ぞろえにはしない。
   * 上の段(地方3つ)と下の段(その中の市6つ)は幅が違うので、
   * それぞれの中央でそろえると、2段の左端も右端もかみ合わず、
   * 上の段が宙に浮いて見える。
   * 段をまたいで揃うのは左端しかない。
   */
  /*
   * ボタンどうしの間。
   * 枠で1つずつ区切られているので、ほとんど空けなくても切れて見える。
   * 逆に空けると、並びではなく別々のボタンが散らばって見える。
   */
  gap: var(--space-2xs);
  margin-top: var(--rule-head);
}

/*
 * 地方の切り替えボタン。
 * 大きさは下のサブエリア(.area-subs__btn)とそろえている。
 * 2段の上下関係は、大きさではなく「上の段が地方、下の段がその中の市」
 * という並び順で示す。
 */
.area-tabs__btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background-color: transparent;
  font: var(--type-caption);
  letter-spacing: var(--ls-caption);
  color: var(--color-text-sub);
  transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

@media (hover: hover) {
  .area-tabs__btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }
}

/* 選んでいるものは青で塗りつぶす */
.area-tabs__btn.is-active {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  color: var(--color-white);
}

/*
 * サブエリアの絞り込みボタン(神戸 / 大阪 など)。
 * 数が増えても折り返さず、横に流して見せる。
 *
 * 形も大きさも上の地方の切り替えと同じ。
 * 以前は一回り小さくしていたが、2段の大きさが違うほうが
 * ちぐはぐに見えたので、そろえた。
 */
.area-subs {
  display: flex;
  gap: var(--space-2xs);
  /* 上の地方の切り替えとの間。ひと続きの絞り込みなので近づける */
  margin-top: var(--space-2xs);
  overflow-x: auto;
  scrollbar-width: none;
}

.area-subs::-webkit-scrollbar {
  display: none;
}

.area-subs__btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background-color: transparent;
  font: var(--type-caption);
  letter-spacing: var(--ls-caption);
  color: var(--color-text-sub);
  white-space: nowrap;
  transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

@media (hover: hover) {
  .area-subs__btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }
}

/* 選んでいるものは青で塗りつぶす。上の切り替えと同じ扱い */
.area-subs__btn.is-active {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  color: var(--color-white);
}

/*
 * 地図の枠。左上に店舗リストを重ねる。
 * position: relative は、その重ねる位置の基準になる。
 */
.area-map__stage {
  position: relative;
  margin-top: var(--space-md);
  /* Figma実測は 1200 x 608。そこから縦を9割に詰めている */
  aspect-ratio: 1200 / 547;
  overflow: hidden;
  background-color: var(--color-grayge);
}

/*
 * 地図そのもの（Googleが中身を描く器）。
 *
 * touch-action で、この中の指の動きのうち
 * ブラウザ側が受け取ってよいものを「縦スクロールだけ」に絞る。
 *
 *   指1本の上下 … これまで通りページが進む
 *   指2本       … ブラウザは何もしない → Googleの地図が受け取る
 *
 * 指定しないと、指2本を広げたときにブラウザが先に反応して
 * 地図ではなくページ全体が拡大されることがある。
 * ページ自体の拡大は禁止していない(header.php の viewport は
 * initial-scale=1 だけ。文字を大きくして読む人の妨げになるため)。
 * 拡大を止めるのは地図の上だけ。
 */
.area-map__canvas {
  width: 100%;
  height: 100%;
  touch-action: pan-y;
}

/* --- 地図の上に重ねる店舗リスト --- */

.area-map__panel {
  position: absolute;
  z-index: 2;
  top: 20px;
  left: 20px;
  width: 280px;
  max-height: calc(100% - 40px);
  display: flex;
  flex-direction: column;
  padding: 20px;
  background-color: var(--color-paper);
  border-radius: 4px;
  box-shadow: 0 2px 12px rgb(31 27 24 / 12%);
}

.area-map__count {
  flex: none;
  /* 件数 → その下の一覧。写真とその説明と同じ12px */
  margin-bottom: var(--rule-caption);
  font: var(--type-caption);
  letter-spacing: var(--ls-caption);
  color: var(--color-text-weak);
}

/* 件数が多いエリアがあるので、リストの中だけを縦にスクロールさせる */
.area-map__list {
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0;
}

.area-map__item {
  display: block;
  width: 100%;
  padding: 6px 0;
  text-align: left;
  transition: color 0.2s ease;
}

.area-map__item-name {
  display: block;
  font: var(--type-list);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}

.area-map__item-area {
  display: block;
  margin-top: 2px;
  font: var(--type-caption);
  letter-spacing: var(--ls-caption);
  color: var(--color-text-weak);
}

.area-map__item:hover .area-map__item-name,
.area-map__item.is-active .area-map__item-name {
  color: var(--color-accent);
}

/* --- 地図に重ねる店名(近づいたときだけ出る) --- */

/*
 * JavaScript が緯度・経度から画面上の位置を計算して、
 * 各文字の left / top を直接書き込む。
 * ここでは見た目だけを決める。
 */
.area-map__labels {
  position: absolute;
  left: 0;
  top: 0;
  /* 枠そのものは地図の操作を邪魔しない。押せるのは文字だけ */
  pointer-events: none;
}

.area-map__label {
  position: absolute;
  pointer-events: auto;
  /* 指定された位置を基準に、ピンの真上へ持ち上げる */
  transform: translate(-50%, -100%);
  margin-top: -12px;
  white-space: nowrap;
  cursor: pointer;

  font-family: var(--font-sans);
  /* キャプションと同じ12px。表(tokens.css)から取る */
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--color-ink);

  /*
   * 文字の外側に紙色のフチを付ける。
   * paint-order: stroke を指定すると、フチが文字の下に回り込むので
   * 文字そのものが痩せない。
   */
  paint-order: stroke;
  -webkit-text-stroke: 3px var(--color-paper);
}

.area-map__label:hover {
  color: var(--color-accent);
}

/* --- ピンを押したときのカード --- */

/*
 * ここから3つは Google が作る枠そのものへの指定。
 * gm- で始まる名前は Google 側のものなので、
 * 将来Googleの作りが変わると効かなくなる可能性がある。
 * そのときは「バツが出る」「余白が広い」だけで、機能は壊れない。
 */

/* バツボタンの行ごと消す(カードの外を押して閉じる方式にしたため) */
.area-map__stage .gm-style-iw-chr {
  display: none;
}

/*
 * Googleが用意している余白を全部ゼロにして、こちらで持ち直す。
 * Google側の余白が残っていると、写真が枠いっぱいに広がらず、
 * 左右にずれて見える。
 */
.area-map__stage .gm-style-iw-c {
  padding: 0 !important;
  border-radius: 4px;
  overflow: hidden;
}

.area-map__stage .gm-style-iw-d {
  overflow: hidden !important;
  padding: 0 !important;
  max-width: none !important;
  max-height: none !important;
}

.area-map__bubble {
  width: 200px;
}

/* 写真は枠の上半分いっぱい。余白を持たせない */
.area-map__bubble-photo {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background-color: var(--color-grayge);
}

/*
 * 文字の左右の余白は、写真ではなく文字側が持つ。
 * こうすると写真だけが枠いっぱいに広がる。
 */
.area-map__bubble-name {
  padding: 14px 14px 0;
  font: var(--type-list);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}

.area-map__bubble-area {
  padding: 2px 14px 0;
  font: var(--type-caption);
  letter-spacing: var(--ls-caption);
  color: var(--color-text-weak);
}

/* 下の余白を厚めに取って、カードの底が詰まって見えないようにする */
.area-map__bubble-links {
  display: flex;
  gap: var(--space-sm);
  padding: 12px 14px 18px;
}

.area-map__bubble-links a {
  font: var(--type-caption);
  letter-spacing: var(--ls-caption);
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/*
 * APIキーが未設定のとき。
 * 地図が無いので、リストを重ねずに普通の一覧として並べる。
 */
.area-map__stage--nomap {
  aspect-ratio: auto;
  background-color: transparent;
}

/* 地図が無いので、リストは重ねずに縦に並べる */
.area-map__stage--nomap .js-area-pane[hidden] {
  display: none;
}

.area-map__stage--nomap .area-map__panel {
  position: static;
  width: 100%;
  max-height: none;
  padding: 0;
  background-color: transparent;
  box-shadow: none;
}

.area-map__stage--nomap .area-map__list {
  overflow: visible;
  column-count: 3;
  column-gap: var(--space-2xl);
}

.area-map__stage--nomap .area-map__item {
  break-inside: avoid;
}

/*
 * Googleの地図の中では、サイト側のリセットCSSが邪魔をすることがある。
 * 地図の中の画像だけは、Google側の指定にまかせる。
 */
.area-map__canvas img {
  max-width: none;
}


/* ---------- タブレット ---------- */

@media (max-width: 1100px) {
  /* 3つ横並びだと説明文が窮屈になるので、縦に積む */
  .brand-row__info {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  /*
   * 1列になったら、列の指定を外す。
   * 広い画面用の「2〜3列目」「4列目」が残ったままだと、
   * 1列しかないグリッドに2列目以降が作られ、
   * 説明とリンクが右へはみ出してしまう。
   */
  .brand-row__body {
    grid-column: auto;
  }


  .area-map__stage--nomap .area-map__list {
    column-count: 2;
  }
}


/* ---------- スマートフォン ---------- */

@media (max-width: 768px) {

  /*
   * ブランドの帯の下にある読み進めリンク。横1行のまま。
   *
   * PCの間隔(--space-2xl / 64px)のままだと幅が足りず、
   * 文字のほうが折り返して2行になっていた。
   * 「すべての店舗を見る」と丸い矢印で約176px、
   * それが2つで352px。本文の幅(約342px)を超える。
   *
   * そこで
   *   ・間隔を 64px → 32px に詰める
   *   ・文字と矢印のあいだを 24px → 16px に詰める
   *   ・文字は折り返さない(nowrap)
   * これで2つ合わせて約326px。右端にまとめたまま1行に収まる。
   *
   * 左右に振り分ける(space-between)のは試したが、
   * 2つが離れすぎて、ひとまとまりの案内に見えなくなった。
   * 進むリンクなので、PCと同じく右端に寄せる。
   */
  /*
   * TOOTH TOOTH と こななには「店舗リストへ」と「ブランドサイトへ」が
   * 2本並ぶ。狭い画面でも横1行に保ちたいので、ここだけ詰める。
   *
   * 幅360pxの端末で使えるのは 360 − 24×2 = 312px。
   * 2本ぶんに必要なのは、この2つを詰めた状態で308px。
   * どちらかを元に戻すと316〜324pxになり、収まらなくなる。
   */
  .brand-row__links {
    gap: var(--space-md);
  }

  /* 文字と丸い矢印のあいだ。PCは24px、ここは12px */
  .brand-row__links .pill-link {
    gap: 12px;
  }

  .brand-row__links .pill-link__label {
    white-space: nowrap;
  }

  .recent,

  /*
   * 狭い画面では、リストを重ねると地図がほとんど見えなくなる。
   * かといって下に並べると48件が延々と続いて邪魔になる。
   *
   * → 【試行中】スマホではリストを出さず、地図だけにしている。
   *   店名から探したい人には、ページ下部の All Shop List がある。
   *   子エリアでの絞り込みを入れるなら、ここを作り直すことになる。
   */
  .area-map__stage {
    aspect-ratio: auto;
    overflow: visible;
  }

  /*
   * 地図は 5:6 の縦長。
   *
   * 以前は画面の高さに追従させていたが(clamp)、端末によって形が変わり、
   * 上の写真や下のカードと縦横がそろわなかった。幅に対する比率で決める。
   *
   * 比率はサイト内で縦長に使っている 5:6 にそろえた。
   * (TOPのメインビジュアル front-page.css の --visual-ratio: 1.2、
   *  RECRUITのヒーロー page-recruit.css の --photo-strip-ratio と同じ)
   * 正方形だと、店が縦に散らばる地図では上下が窮屈だった。
   */
  /*
   * 地図の縦横比。
   *
   * 幅375pxの画面での高さの目安(地図の幅は約335px)。
   *   5 / 6  … 402px  以前の値
   *   3 / 4  … 447px  ← いま
   *   2 / 3  … 503px  画面のほとんどが地図になる
   *
   * 縦に伸ばすと、ピンどうしが離れて押し分けやすくなる。
   * ただし伸ばしすぎると、地図の下にある店舗リストへ
   * たどり着くまでのスクロールが長くなる。
   */
  .area-map__canvas {
    height: auto;
    aspect-ratio: 3 / 4;
  }

  /* サブエリアは指で横に流して選ぶ */
  .area-subs {
    margin-top: var(--space-2xs);
    /* 画面の端まで流せるようにして、続きがあることを分かりやすくする */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }

  .area-map__panel {
    display: none;
  }

  /*
   * ただし、APIキーが無くて地図が出せないときは話が別。
   * 何も無くなってしまうので、そのときだけリストを出す。
   */
  .area-map__stage--nomap .area-map__panel {
    display: block;
    position: static;
    width: 100%;
    max-height: none;
    padding: 0;
    background-color: transparent;
    box-shadow: none;
  }

  .area-map__stage--nomap .area-map__list {
    overflow: visible;
    column-count: 1;
  }

  /*
   * 散らし配置はPCだけにする。
   *
   * 狭い画面では5枚が重なって読めず、縦に積むと画面3つぶんを超える。
   * 積んだ場合に出せるのは3枚までで、
   * 「最近できた店の顔ぶれ」としては物足りなかった。
   *
   * かわりに下の帯(.recent-strip)を出す。
   * 候補10店舗すべてが写真1枚ぶんの高さに収まる。
   */
  .collage {
    display: none;
  }

  /* ---------- 新着の帯(スマートフォンのみ) ---------- */

  .recent-strip {
    display: block;
  }

  /*
   * 帯そのもの。
   *
   * 画面の端まで流せるように、コンテナの左右余白ぶんだけ外へ出してから
   * 同じ量を内側へ戻す(エリア検索のサブエリアと同じ手)。
   * こうすると、右端で見切れているカードが画面の端まで届き、
   * 「まだ続きがある」が形で伝わる。
   */
  .recent-strip__track {
    display: flex;
    /* 写真どうしの空き。左右の余白と同じ24px */
    gap: var(--space-md);
    overflow-x: auto;
    margin-inline: calc(var(--pad-content) * -1);
    padding-inline: var(--pad-content);
    /* 指で送るものなので、横線が見えると邪魔になる */
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }

  .recent-strip__track::-webkit-scrollbar {
    display: none;
  }

  .recent-strip__card {
    /* 縮ませない。右端に次の1枚が少しだけ見える幅にする */
    flex: 0 0 auto;
    width: 78%;
    max-width: 460px;
  }

  .recent-strip__card a {
    display: block;
    color: inherit;
    text-decoration: none;
  }

  /*
   * 写真は縦長。
   *
   * 正方形だと、横に送る帯の中では1枚が小さく感じる。
   * 縦を伸ばすと画面に占める面積が増え、写真そのものが主役に戻る。
   *
   * 幅375pxの画面での高さの目安(カード幅は約275px)。
   *   4 / 5  … 344px  ← いま
   *   3 / 4  … 367px
   *   2 / 3  … 413px  店名まで入れて画面の7割
   *   3 / 5  … 458px  ほぼ全画面。1枚ずつ見せる形になる
   *
   * これ以上伸ばすと、次の写真が画面から追い出されて
   * 「続きがある」ことが伝わらなくなる。
   */
  .recent-strip__thumb {
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 5;
  }

  .recent-strip__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 写真 → その説明。全ページ共通の12px */
  .recent-strip__cap {
    display: block;
    padding-top: var(--rule-caption);
  }

  .recent-strip__area {
    display: block;
    font: var(--type-caption);
    letter-spacing: var(--ls-caption);
    color: var(--color-text-sub);
  }

  .recent-strip__name {
    display: block;
    margin-top: var(--space-2xs);
    font: var(--type-name);
    letter-spacing: var(--ls-heading);
    color: var(--color-ink);
  }

  /*
   * 下の Our Brands は上の余白を持っていないので、
   * セクションの区切り(前後24pxずつ＝48px)はこちらが全部持つ。
   */
  .recent {
    padding-bottom: calc(var(--rule-section) * 2);
  }

  /*
   * スマートフォンでは、1枚を画面の中央に置き、左右に隣を少しだけ覗かせる。
   * 覗きが「まだ続きがある」の合図になるので、枚数を見せる必要はない。
   *
   * 帯だけ左右の余白の外まで広げている(margin を負にする)。
   * こうすると覗いているカードが画面の端まで届いて、
   * 「見切れている」が意図した形に見える。
   *
   * 左右の padding は「(画面幅 - カード幅) ÷ 2」。
   * これがあるおかげで、先頭と最後のカードも中央まで来られる。
   *
   * 指を離すと1枚ずつ吸い付いて止まる(mandatory)。
   * 途中の半端な位置では止まらない。
   */
  /* カードどうしの間だけ、狭い画面用に詰める */
  .brand-rows {
    --shop-card-gap: 20px;
  }

  /*
   * 狭い画面では、説明を開け閉めできるようにしまっておく。
   * 画面が狭いほど写真までの距離が遠くなるので、
   * まず写真を見せて、読みたい人だけ開く形にしている。
   */
  .brand-row__info {
    /* 空きは中身(detail-inner)側で持つ。閉じたときに一緒に畳むため */
    gap: 0;
  }

  .brand-row__head {
    display: block;
  }

  /* 名前の下に説明、その下にリンク、と素直に積む */
  .brand-row__detail {
    display: block;
  }

  .brand-row__detail-inner {
    display: block;
    padding-top: var(--space-md);
  }

  /*
   * 狭い画面では2列×2段。4枚とも1画面に収まる。
   * 横に4枚だと1枚が画面の1/4になり、何の写真か分からなくなる。
   */
  .shop-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* 段どうしの空きは広い画面と同じ24px(理由は .shop-strip 本体のコメント) */
    row-gap: var(--space-md);
  }
}



/* ==========================================================================
   ブランドごとの店舗一覧 ( /brand/concept/ /brand/license/ )

   【使われていない】2026/09/09にこの2ページを廃止した。
   店舗の一覧は /shop/ に一本化し、BRANDページからは
   /shop/#brand-concept のように絞り込んだ状態で送っている。
   経緯とテンプレートは _removed-2026-09-09_ブランド別一覧ページ/ を参照。

   すぐ消さずに残しているのは、戻す判断が出たときにテンプレートを
   戻すだけで済むようにするため。公開後の整理で削ること。
   ========================================================================== */

/*
 * 大きさの違う写真を敷き詰める並び。
 *
 * 3枚を1組として、そのうち1枚だけを大きく出す。
 *
 *   ┌──────────┬────┐
 *   │          │ 2  │
 *   │    1     ├────┤
 *   │          │ 3  │
 *   └──────────┴────┘
 *
 * 大小の割り当ては :nth-child() の規則でやっている(下を参照)。
 * 1枚ずつ手で位置を決めていないので、店舗が増えても減っても崩れない。
 *
 * なお、大きい枠にあたるのは 3枚ごとの1枚目 = 1, 4, 7, 10 … なので、
 * 「大きい枠かどうか」を指すときは :nth-child(3n + 1) で拾える。
 * 左右どちらに置くかだけを 6n+1 / 6n+4 で分けている。
 *
 * grid-auto-flow: dense は「空いた枠があれば、後ろの小さいものを前へ詰める」指定。
 * 大きい枠が入りきらなかったときに、穴が残らないようにするため。
 */
.mosaic {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: dense;

  /*
   * 写真どうしのすき間。
   *
   * 縦を横より広くしているのは、段と段のあいだには店名が挟まるから。
   * 同じ値にすると、店名が下の写真に近づいて、
   * どの写真の名前なのか分からなくなる。
   *
   */
  column-gap: var(--space-md);
  row-gap: var(--rule-row);

  /* 上の空きは .page-hero の padding-bottom が持つ(.scatter と同じ理由) */
}

/*
 * 3枚に1枚を、横2枠ぶん・縦2枠ぶんの大きさにする。
 * 大きい枠の高さは、小さい枠2つとそのすき間を足した高さになる。
 *
 * さらに、大きい枠を1組ごとに左・右と入れ替える。
 *
 *   1組目          2組目
 *   ┌──────┬──┐   ┌──┬──────┐
 *   │      │2 │   │5 │      │
 *   │  1   ├──┤   ├──┤  4   │
 *   │      │3 │   │6 │      │
 *   └──────┴──┘   └──┴──────┘
 *
 * 同じ形が続くと、大小をつけているのに型に見えてしまう。
 * 左右が入れ替わるだけで、繰り返している感じがかなり消える。
 *
 * 6n+1 と 6n+4 は「3枚ごとの1枚目」を1つおきに拾う書き方。
 * 小さい枠は指定せず、空いたところへ自動で入る
 * (.mosaic の grid-auto-flow: dense が手前から詰めてくれる)。
 */
.mosaic__item:nth-child(6n + 1) {
  grid-column: 1 / span 2;
  grid-row: span 2;
}

.mosaic__item:nth-child(6n + 4) {
  grid-column: 2 / span 2;
  grid-row: span 2;
}

/*
 * ただし最後の3枚は、大小をつけずに横並びにする。
 * ページの終わりが大きい写真だと、そこで途切れた感じが出るため。
 * (件数が3の倍数でないときは、この指定は空振りするだけで崩れはしない)
 */
.mosaic__item:nth-last-child(-n + 3) {
  grid-column: auto;
  grid-row: auto;
}

/*
 * 1枚ぶん。
 * 上が写真(伸び縮みする)、下が店名(中身ぶん)。
 * 大きい枠は縦2枠ぶんの高さを持つので、そのぶん写真が高くなる。
 */
.mosaic__item {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  /*
   * min-width: 0 は「中身より小さくなってよい」という指定。
   * グリッドの中身は既定でこれが効かず、長い店名やエリア名が
   * 枠を押し広げて、列がはみ出してしまう。
   */
  min-width: 0;
}

/*
 * 写真の枠。
 *
 * 【重要】中の画像は position: absolute で浮かせている。
 *
 * ふつうに置くと、画像が自分の原寸ぶんの高さを主張してしまう。
 * ここは行の高さを「小さい枠の16:9」だけで決めたいので、
 * 画像を高さの計算から外す必要がある。
 * (これを怠ると、写真ごとに行の高さが変わって並びが崩れる)
 *
 * 小さい枠は下の aspect-ratio で高さが決まり、
 * 大きい枠は縦2枠ぶんの高さが外から与えられて、その中を画像が埋める。
 */
.mosaic__thumb {
  position: relative;
  /* 縦2枠ぶんの枠の中で、余った高さを写真が受け取れるようにする */
  min-height: 0;
  overflow: hidden;
  background-color: var(--color-grayge);
  /* 小さい枠の形。1枠ぶんの行の高さはここで決まる */
  aspect-ratio: 16 / 9;
}

/* 大きい枠は高さが外(グリッド)で決まるので、比率の指定は外す */
.mosaic__item:nth-child(3n + 1):not(:nth-last-child(-n + 3)) .mosaic__thumb {
  aspect-ratio: auto;
}

.mosaic__thumb img,
.mosaic__thumb .placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 枠側で形を決めているので、中身が持つ比率と枠線は打ち消す */
  aspect-ratio: auto;
  border: 0;
}

/*
 * 店名は左、エリアは右。行の両端で受ける。
 *
 * 折り返させないのは、ここが2行になるとその枠だけ背が高くなり、
 * 行の高さが揃わなくなるため。
 * 長い店名は右端で「…」に切る(エリアは切らない)。
 */
.mosaic__caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  /* 親と同じ理由。ここでも「縮んでよい」と言っておく必要がある */
  min-width: 0;
  /* 写真 → その説明。全ページ共通(tokens.css の --rule-caption) */
  margin-top: var(--rule-caption);
}

/*
 * 店名。
 *
 * BRANDトップの店舗カード(.shop-card__name)は Caption(12px)だが、
 * こちらは List(14px)のまま。別扱いにしている。
 * あちらは「ブランドの雰囲気を写真で見せる」場所で文字は添えるだけ、
 * こちらは「店を探す」ための一覧で、店名を読ませる必要があるため。
 */
.mosaic__name {
  /* min-width: 0 は、flexの中で文字が縮めるようにするための決まり文句 */
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: var(--type-list);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}

/*
 * エリア名。
 * 「大阪 吹田・万博公園」のように長いものがあるので、
 * 店名より縮みにくいだけで、最後は同じように「…」で切る。
 */
.mosaic__area {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: var(--type-caption);
  letter-spacing: var(--ls-caption);
  color: var(--color-text-sub);
}

@media (max-width: 768px) {
  /*
   * 狭い画面では大小をやめて1列に積む。
   * 3列のまま縮めると、小さい枠が画面の3分の1になって何も見えない。
   */
  .mosaic {
    grid-template-columns: 1fr;
    /* 1列に積むので、写真どうしのすき間は「かたまりどうし」の48px */
    row-gap: var(--rule-block);
  }

  .mosaic__item:nth-child(6n + 1),
  .mosaic__item:nth-child(6n + 4) {
    grid-column: auto;
    grid-row: auto;
  }

  /*
   * 大きい枠にしていたものも、ここでは16:9に戻す。
   *
   * セレクタを上の「比率を外す」指定とそっくり同じ形にしているのは、
   * 短く書くと向こうのほうが強くなり、こちらが効かないため
   * (比率が外れたまま高さがゼロになり、写真が消える)。
   * :not(...) を削らないこと。
   */
  .mosaic__item:nth-child(3n + 1):not(:nth-last-child(-n + 3)) .mosaic__thumb {
    aspect-ratio: 16 / 9;
  }
}


/* ---------- 散らし置き（scatter） ---------- */

/*
 * BRANDトップの上のコラージュと同じ考え方。
 * 枠の縦横比を固定し、中の写真は％で位置と大きさを指定する
 * (位置の値はテンプレート側の style 属性で渡している)。
 * こうすると画面幅が変わっても、散らし方の比率が崩れない。
 *
 * 1組6枚。店舗が多いときはこの枠が縦に繰り返される。
 *
 * ※ この並びは試作。テンプレート先頭の $layout を 'mosaic' にすると
 *   格子の並び(.mosaic)に戻る。両方の指定を残してあるので行き来できる。
 */
.scatter {
  position: relative;
  aspect-ratio: 1 / 1;
  /*
   * 上の空きは持たない。
   * ページ見出しの下の空きは .page-hero の padding-bottom(48px)が
   * すでに持っていて、ここで足すと二重になる。
   * 他のページ(BUSINESS / ポリシー / お問い合わせ)は、
   * どれもヒーローの48pxだけで受けている。
   */
}

/*
 * 組どうしの空き。
 * 最後の列の写真は枠の下ぎりぎりに置いてあり、
 * その下に店名がはみ出す作りなので、そのぶんも見込んで広めに取る。
 */
.scatter + .scatter {
  margin-top: var(--space-2xl);
}

.scatter__item {
  position: absolute;
  display: block;
}

/*
 * 写真の枠。
 *
 * 【重要】中の画像は position: absolute で浮かせている。
 * ふつうに置くと画像が原寸ぶんの高さを主張し、
 * ％で決めた枠の大きさからはみ出してしまう。
 */
.scatter__thumb {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--color-grayge);
}

.scatter__thumb img,
.scatter__thumb .placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 枠側で形を決めているので、中身が持つ比率と枠線は打ち消す */
  aspect-ratio: auto;
  border: 0;
}

/*
 * 店名は写真の枠の外(下)に出す。
 * 枠の高さは写真の高さなので、絶対配置で下にぶら下げている。
 * こうすると散らし配置の比率を崩さずに、写真の真下へ文字を添えられる。
 */
.scatter__caption {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  min-width: 0;
  /* 写真 → その説明。全ページ共通(tokens.css の --rule-caption) */
  padding-top: var(--rule-caption);
}

.scatter__name {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: var(--type-list);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}

.scatter__area {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: var(--type-caption);
  letter-spacing: var(--ls-caption);
  color: var(--color-text-sub);
}

@media (hover: hover) {
  .scatter__item:hover .scatter__thumb img {
    transform: scale(1.04);
  }

  .scatter__thumb img {
    transition: transform 0.5s ease;
  }
}

@media (max-width: 768px) {
  /*
   * 狭い画面では散らし置きをやめて、縦に1枚ずつ積む。
   * ％で散らしたままだと1枚が画面の3分の1になり、何も見えない。
   */
  .scatter {
    aspect-ratio: auto;
    display: grid;
    gap: var(--rule-block);
  }

  .scatter + .scatter {
    margin-top: var(--rule-block);
  }

  /* テンプレートが style 属性で渡している位置を打ち消す */
  .scatter__item {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
  }

  .scatter__thumb {
    height: auto;
    aspect-ratio: 16 / 9;
  }

  /* 1列に積むので、店名も普通に下へ流す */
  .scatter__caption {
    position: static;
  }
}