/* ==========================================================================
   POTOMAK 2026 — 全ページ共通の枠組みと共通パーツ

   ヘッダー / フッター / お問い合わせ帯 / All Shop List / SNSアイコン
   (複数ページで使うパーツは、ページ固有CSSではなくここに置く)
   ========================================================================== */

/* ---------- SNSアイコン(template-parts/sns-links.php) ---------- */

/*
 * 灰色の丸の中に白い記号を置く。
 * 入っているものだけが並ぶので、店舗によって1〜3個と数が変わる。
 */
.sns-links {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sns-links__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--color-muted);
  color: var(--color-white);
  text-decoration: none;
  transition: background-color 0.25s ease;
}

.sns-links__item:hover,
.sns-links__item:focus-visible {
  background-color: var(--color-accent);
}

/* SVGの記号。currentColor なので、上の color をそのまま拾う */
.sns-links__item svg {
  width: 26px;
  height: 26px;
  display: block;
}

/* LINE@ だけは記号がないので文字を丸に収める */
.sns-links__text {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
}

/* ---------- ヘッダー ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-bg);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.site-header.is-scrolled {
  border-bottom-color: var(--color-line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  /* 上の空きは左右と同じ値にする(下は少し詰める) */
  padding: var(--pad-page) var(--pad-page) 34px;
}

.site-header__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  /* SVGは fill="currentColor"。ここの color がロゴの色になる */
  color: var(--color-ink);
}

/* 高さ14pxで固定(画面幅によらず共通)。横幅は元比率(510.24 : 44.9)から自動算出 */
.site-header__logo-svg {
  display: block;
  height: 14px;
  width: auto;
}

.site-header__right {
  display: flex;
  align-items: center;
  /*
   * ナビ右端 〜 JP/EN の空き。Figma実測は87px。
   * 項目が7つになり、1101〜1400pxでは87pxのままだと収まらないので、
   * 狭くなるにつれて48pxまで詰まるようにしている。
   */
  gap: clamp(48px, 6vw, 87px);
}

.global-nav__list {
  display: flex;
  align-items: center;
  /*
   * 項目どうしの間隔。Figma実測は71pxで一定。
   *
   * ただしそれは項目が6つだったときの値で、SHOPを足して7つになった。
   * ドロワーに切り替わるのは1100px以下なので、
   * 1101〜1400pxでは71pxのままだとロゴやJP/ENにぶつかる。
   *
   * 広い画面ではFigmaどおりの71px、狭くなるにつれて32pxまで詰める。
   * 段階を作らず連続で変えているので、
   * どの幅で見ても「急に詰まった」瞬間が出てこない。
   */
  gap: clamp(32px, 4.4vw, 71px);
}

.global-nav__link {
  font: var(--type-nav);
  letter-spacing: var(--ls-nav);
  color: var(--color-ink);
  padding-block: var(--space-xs);
  transition: color 0.2s ease;
}

.global-nav__link:hover {
  color: var(--color-accent);
}

.lang-switch {
  font: var(--type-nav);
  letter-spacing: var(--ls-nav);
  color: var(--color-muted);
  white-space: nowrap;
}

.lang-switch a:hover {
  color: var(--color-accent);
}

/* ハンバーガー(スマホのみ表示) */
.nav-toggle {
  display: none;
  width: 28px;
  height: 20px;
  position: relative;
  flex-shrink: 0;
}

.nav-toggle span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-ink);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-toggle span:nth-child(1) { top: 0; }
.nav-toggle span:nth-child(2) { top: 50%; }
.nav-toggle span:nth-child(3) { bottom: 0; }

.nav-toggle.is-open span:nth-child(1) { top: 50%; transform: rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { bottom: 50%; transform: rotate(-45deg); }


/* ---------- フッター ---------- */

/*
 * 上の空きの考え方:
 * 「本文の最後のセクションが自分の下の空きを持ち、
 *   フッターはそこに一定の空きを足すだけ」とする。
 * ここを大きくすると全ページのフッター上が一律で開くので、
 * 控えめな値にしておく。
 */
.site-footer {
  /* 地色はページと同じ。グレージュにはしない */
  background-color: var(--color-bg);
  /*
   * 本文とフッターの境目。
   *
   * ここだけ区切りの4倍。全ページ共通。
   * フッターの地色は本文と同じなので、ふつうの区切りと同じ空きだと
   * 「まだ本文が続いている」ように見えて、ページの終わりが分からない。
   * ここは「読み終わり」を示す場所なので、他のどの境目より広く取る。
   */
  padding-top: calc(var(--rule-section) * 4);
  padding-inline: var(--pad-content);
}

/*
 * ただし、直前がお問い合わせ帯(写真)のときは詰める。
 *
 * 上の96pxは「フッターの地色が本文と同じで、境目が見えない」ことへの
 * 手当て。写真の帯で終わるページは、そこですでに切れて見えているので、
 * 同じ96pxを取ると、写真とフッターのあいだに空白の帯がもう1本
 * できたように見える。
 *
 * 対象は本文(main)の最後がお問い合わせ帯になっているページだけ
 * (TOP / BUSINESS)。
 * :has() を読めない古いブラウザでは今までどおり96pxになるが、
 * 空きが広いだけで崩れはしない。
 */
main:has(> .contact:last-child) + .site-footer {
  padding-top: calc(var(--rule-section) * 2);
}

.site-footer__inner {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  /*
   * 下の罫線までの空き。
   *
   * 罫線の反対側は32px(.site-footer__bottom の padding-block)。
   * 同じ32pxにすると数値の上では左右対称になるが、
   * 見ると上のほうが詰まって感じる。
   *
   * 下は1行の文字が上下の真ん中に置かれているのに対して、
   * 上はリンクが4列あり、いちばん長い列(カスタマーハラスメント方針)が
   * 2行に折り返して罫線の近くまで下りてくるため。
   *
   * 数値ではなく見た目でそろえたいので、上だけ広く取る(72px)。
   */
  padding-bottom: calc(var(--rule-section) * 3);
}

/* --- 左のロゴブロック --- */

.site-footer__brand {
  flex: 0 0 27%;
}

/*
 * 公式ロゴ(鯨マーク + POTOMAK + タグライン)の1枚もの。
 *
 * 高さの目安は「フッター上の罫線 〜 右のリンク1組目の最後の行」。
 * ただし高さで指定すると横がはみ出すので、幅で決めて高さは比率にまかせる。
 * 大きさを変えたいときは、この width の数字だけ触ればよい。
 */
.site-footer__logo {
  display: block;
  width: 200px;
  max-width: 100%;
  /*
   * 右の列の「COMPANY」の文字の頭に高さをそろえる。
   *
   * ロゴのSVGは絵ぴったりの寸法なので、箱の上端から絵が始まる。
   * 一方、文字は箱の上端から少し下がったところに現れる。
   *   ・見出しの上の罫線ぶんの余白  24px
   *   ・文字の上に付く行の余白      約10px
   * そのぶん下げないと、ロゴだけ浮いて見える。
   *
   * 数値ではなく見た目でそろえるための調整。
   */
  margin-top: var(--rule-row);
}

.site-footer__logo-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* --- 右のリンク4列 --- */

.site-footer__nav {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

/*
 * 列を2つずつ包んでいる箱(footer.php)。
 * 広い画面では無いものとして扱い、中の4列をそのまま横に並べる。
 * 狭い画面でだけ、この箱が1本の縦の並びになる。
 */
.footer-pair {
  display: contents;
}

/* 1列の中に複数グループ(COMPANY + NEWS など)が縦に並ぶ */
/*
 * 1列ぶん。グループを縦に積む。
 *
 * グループどうしの空きは24px。
 * 罫線は「次のグループのもの」なので、線をはさんだ上下をそろえる。
 * 線の下は見出しの padding-top(24px)。線の上がこの24px。
 *
 * 以前は64pxで、線の上だけが大きく空き、
 * 前のグループの終わりが宙に浮いて見えていた。
 * 狭い画面側(.footer-nav-group の margin-bottom)と同じ値。
 */
.footer-col {
  display: grid;
  gap: var(--space-md);
  align-content: start;
}

/* グループ見出しの上に細い罫線を引く(左右にわずかにはみ出させる) */
.footer-nav-group__title {
  position: relative;
  padding-top: var(--space-md);
  font-family: var(--font-sans);
  /* 本文と同じ15px。表(tokens.css)から取る */
  font-size: var(--fs-body);
  font-weight: 400;
  letter-spacing: var(--ls-en);
  color: var(--color-ink);
  /*
   * 見出しと最初のリンクの間。
   * 見出しも一覧の1行として続けて読ませたいので、
   * リンクどうしの間(下の .footer-nav-group__list の gap)と同じにする。
   */
  margin-bottom: var(--space-xs);
}

/*
 * 見出しがリンクになっている列(COMPANY など)。
 * 見出しの見え方は変えたくないので、色と下線は引き継がせる。
 * 押せる範囲は文字のぶんだけでよい。
 */
.footer-nav-group__title a {
  color: inherit;
  text-decoration: none;
}

.footer-nav-group__title::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--rule-overhang) * -1);
  right: calc(var(--rule-overhang) * -1);
  border-top: 1px solid var(--color-line);
}

.footer-nav-group__list {
  display: grid;
  /* リンク同士の間 */
  gap: var(--space-xs);

  /*
   * 1項目が2行に折り返したときの行送り。
   *
   * 指定しないと、本文の行送り(1.9)が箱の高さを決めてしまい、
   * 「特定食材の除去に関するポリシー」のような長い項目だけ
   * 行がばらけて、別の項目のように見える。
   * 項目どうしの間は上の gap が持つので、行送りは詰めてよい。
   */
  line-height: var(--lh-heading);
}

/* Figmaの List(Noto Sans JP / 14px) */
.footer-nav-group__list a {
  font: var(--type-list);
  letter-spacing: var(--ls-body);
  color: var(--color-text-sub);
  transition: color 0.2s ease;
}

.footer-nav-group__list a:hover {
  color: var(--color-accent);
}

/* --- 最下部の帯 --- */

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  position: relative;
  padding-block: var(--space-lg);
  /* Figmaの Caption */
  font: var(--type-caption);
  letter-spacing: var(--ls-caption);
  color: var(--color-text-sub);
}

.site-footer__bottom::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--rule-overhang) * -1);
  right: calc(var(--rule-overhang) * -1);
  border-top: 1px solid var(--color-line);
}

.site-footer__lang a:hover {
  color: var(--color-accent);
}

/* 言語切替の前に区切り線を置く */
.site-footer__lang {
  position: relative;
  padding-left: var(--space-lg);
  white-space: nowrap;
}

.site-footer__lang::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 1em;
  background-color: var(--color-line);
}


/* ---------- お問い合わせ帯(ページ末尾の共通パーツ) ---------- */

/*
 * template-parts/contact-band.php の見た目。
 * TOP・BUSINESSなど複数ページの最後に入るため、
 * ページ固有CSSではなくここ(全ページ読み込み)に置いている。
 */
.contact {
  position: relative;
  /*
   * 上の境目は、内側も外側も区切りの3倍(72px)。
   * 「境目の内と外は同じ数値」という決まりに合わせている。
   *
   * 外側は上のセクションの padding-bottom(24px)が先に入っているので、
   * そのぶんを引いた値を書く。
   * 下の外側だけはフッターが自分で空きを持っているので、ここでは足さない。
   *
   * ※ 下の padding-block を変えるときは、この値も一緒に直すこと。
   */
  margin-top: calc(var(--rule-section) * 3 - var(--rule-section));
  /*
   * 内側は区切りの3倍(72px)。
   *
   * ここだけ他のベタ面より広い。地色ではなく写真を敷いている帯なので、
   * 薄いと写真が細い帯に切り取られただけに見えて、場所が伝わらない。
   *
   * 以前は96pxだったが、中身が見出し1語とボタン1つだけなので、
   * 上下が空きすぎて帯だけが間延びして見えた。
   * 写真が帯として成立する下限がこのあたり。
   */
  padding-block: calc(var(--rule-section) * 3);
  color: var(--color-white);
  background-color: #2A2622;
  overflow: hidden;
}

.contact__bg {
  position: absolute;
  inset: 0;
}

.contact__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

.contact__inner {
  position: relative;
  text-align: center;
}

/*
 * 見出しは英字1語。
 *
 * 以前はサイトで一番大きい Display(38px)を当てていたが、
 * それはページの見出し(BRAND / BUSINESS など)のための大きさ。
 * ここはページの中に置く帯なので、
 * 他のセクション見出し(.section-title)と同じ32pxにそろえる。
 * 1語しかないぶん、38pxだと帯の中で幅を取りすぎていた。
 */
.contact__title {
  font: var(--type-h1);
  letter-spacing: var(--ls-display);
}

/*
 * 用件を並べた本文。
 * 見出しのすぐ下にボタンを置く。
 */

.contact__buttons {
  /* 見出し → ボタン。見出しの下は全ページ共通の24px */
  margin-top: var(--rule-head);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

.contact__buttons .btn {
  min-width: 180px;
}


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

/*
 * ナビの間隔を固定にしたぶん、横に入りきらなくなる幅で
 * ハンバーガーメニューへ切り替える(1100px)。
 */
@media (max-width: 1100px) {
  .site-header__inner {
    padding: var(--gutter) var(--gutter) var(--space-sm);
  }

  /* ロゴ(高さ14px)と高さを揃える */
  .nav-toggle {
    display: block;
    width: 24px;
    height: 14px;
  }

  .site-header__right {
    position: fixed;
    /*
     * ヘッダーの下から、画面の一番下まで全面をふさぐ。
     *
     * 以前は中身の高さぶんだけの板だった。
     * ただしこの板の地色はページと同じなので、
     * どこまでがメニューでどこからがページなのか分からなかった。
     * 影や罫線で境目を示す手もあるが、全面にしてしまえば
     * 「いま開いているのはメニューだけ」が形で伝わり、境目が要らなくなる。
     *
     * 上端はヘッダーの真下。高さは main.js が書き出す実測値を使う
     * (以前は60pxと決め打ちしていて、実際の高さと合わず隙間が出ていた)。
     * 1px引いているのは、ヘッダー下端にある透明な線を塞ぐため。
     */
    inset: calc(var(--header-height) - 1px) 0 auto 0;
    /*
     * 画面の高さぶんの丈を持たせる。
     *
     * 下端を 0 で止めると、スマートフォンでは画面の下に細い隙間が残る。
     * ブラウザの下のバーが出たり隠れたりするたびに画面の高さが変わり、
     * 「下端」の位置が動くため。
     * ヘッダーの下から始めて100vh取れば、必ず画面の下を越える。
     * はみ出した分は見えないので、隙間が生まれる余地がなくなる。
     */
    height: 100vh;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg) var(--gutter) var(--space-2xl);
    background-color: var(--color-bg);
    border-top: 1px solid var(--color-line);
    /* 項目が増えて画面に入りきらなくなったときのために、中で送れるようにする */
    overflow-y: auto;
    /*
     * メニューの端まで送ったあと、そのまま後ろのページが動き出さないようにする。
     *
     * ※ 後ろのページを完全に止める方法(html に overflow:hidden)は使えない。
     *   ヘッダーが position:sticky なので、親に overflow が付くと
     *   stickyが効かなくなり、ヘッダーが画面から流れてしまう。
     */
    overscroll-behavior: contain;
    transform: translateY(-120%);
    transition: transform 0.3s ease;
  }

  .site-header__right.is-open {
    transform: translateY(0);
  }

  .global-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }

  /*
   * 項目を大きくする。
   *
   * 13px はPCの横並びのための値で、全画面のメニューには小さい。
   * 押す部分の高さも 13 + 8 + 8 = 約21px しかなく、
   * 指で押す目安(44px前後)の半分だった。隣を押してしまう。
   *
   * 15px + 上下10px で、高さ約35px。
   * これ以上大きくすると、項目8つでメニューが画面に収まらなくなる。
   */
  /*
   * JP/EN も同じ余白にする。
   * ナビの項目だけが余白を持っていると、そこだけ詰まって見えるため。
   */
  .global-nav__link,
  .lang-switch {
    font-size: var(--fs-body);
    padding-block: 10px;
  }
}

@media (max-width: 768px) {
  /*
   * 本文とフッターの境目。
   * 広い画面は区切りの4倍(96px)だが、狭い画面では64pxまで詰める。
   * 縦に積むぶん1画面に入る量が少なく、96pxだとロゴの上だけが
   * ぽっかり空いて見えるため。ページの終わりを示す役目は
   * これでも十分に果たせる。
   */
  .site-footer__inner {
    flex-direction: column;
    /*
     * リンク → ロゴ → 罫線 の空きを、上下とも64pxで揃える。
     *
     * 罫線までの空き(padding-bottom)は広い画面では32pxだが、
     * それだとロゴの上が64px・下が32pxになり、
     * ロゴが罫線のほうへ寄って見える。
     * ロゴは署名として置いているので、上下の真ん中にいてほしい。
     */
    gap: var(--space-2xl);
    padding-bottom: var(--space-2xl);
  }

  /*
   * ロゴはリンクの下、いちばん最後に置く。
   *
   * PCでは左の列に置かれ、右のリンク4列と釣り合っている。
   * 狭い画面では縦積みになるため、そのままだと
   * 幅200pxの鯨とPOTOMAKが、フッターの先頭に単独で大きく載る。
   * ここは読み終えた人を送り出す場所なので、
   * その入口に一番大きな絵が来ると、話が戻ってしまう。
   *
   * 最後に回すと、リンクを見終えたあとの署名として働く。
   * 大きさも200px → 140pxに落として、署名の重さにする。
   *
   * 並び順を order で入れ替えているだけなので、
   * 読み上げソフトや検索エンジンが読む順(HTMLの並び)は変わらない。
   */
  .site-footer__brand {
    order: 1;
    flex: none;
    align-self: center;
  }

  .site-footer__logo {
    width: 170px;
    /* 狭い画面では中央に単独で置くので、頭をそろえる相手がいない */
    margin-top: 0;
  }

  .site-footer__nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-lg);
    align-items: start;
  }

  /* 組が1本の縦の並びになる。グループどうしの空きは広い画面と同じ24px */
  .footer-pair {
    display: grid;
    gap: var(--space-md);
    align-content: start;
  }

  .footer-col {
    display: grid;
    gap: var(--space-md);
    align-content: start;
  }

  /*
   * グループどうしの空きは、上の .footer-pair / .footer-col の gap が持つ。
   * ここで margin を足すと二重になる。
   */
  .footer-nav-group {
    margin-bottom: 0;
  }

  /*
   * 狭い画面のフッター最下段。
   *
   *   (C) Potomak All rights reserved.            JP / EN
   *
   * 規約類は CONTACT の列へ移したので、ここに残るのはこの2つだけ。
   * どちらも短いので、狭い画面でも1行のまま左右に振り分ける。
   */
  .site-footer__bottom {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    column-gap: var(--space-md);
  }

  /*
   * 左に著作権表示、右に JP / EN。広い画面と同じ左右の関係。
   *
   * 段(grid-row)まで書いているのは、格子の自動配置が前に戻らないため。
   * 列だけ指定すると、あとから置くほうが2段目に落ちることがある。
   */
  .site-footer__copyright {
    grid-column: 1;
    grid-row: 1;
  }

  .site-footer__lang {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    padding-left: 0;
  }

  .site-footer__lang::before {
    display: none;
  }
}

@media (max-width: 768px) {
  /*
   * ボタンの左右幅を、見出し「CONTACT」の幅にそろえる。
   *
   * 以前は本文の幅いっぱいに伸ばしていたが、
   * 見出しより横に長いボタンが下に付く形になり、
   * ひとかたまりに見えなかった。
   *
   * 1列のグリッドにすると、列の幅はいちばん広い中身
   * (ここでは見出し)で決まる。
   * そこへボタンを幅いっぱいで入れると、見出しの左右に収まる。
   * 見出しの文字数が変わっても、そのたびに追いかけてくれる。
   *
   * .btn が持っている最小幅(220px)は外す。
   * 残っていると、見出しより広いときにそちらが勝ってしまう。
   */
  .contact__inner {
    display: grid;
    justify-content: center;
  }

  .contact__buttons .btn {
    width: 100%;
    min-width: 0;
  }
}


/* ---------- All Shop List(共通パーツ) ---------- */

/* ---------- 次のページへの導線(template-parts/page-next.php) ---------- */

/*
 * ページの終わりに置く、次のページへ渡すリンク。
 *
 * BRANDと店舗検索(/shop/)が互いを行き先に持つために使っている。
 * 詳しくは template-parts/page-next.php の頭に書いてある。
 *
 * 全ページで読み込むこのファイルに置いているのは、
 * どのページから呼んでも同じ形で出るようにするため。
 *
 * ------------------------------------------------------------------
 * 上下の空き
 * ------------------------------------------------------------------
 * このかたまりは必ずページの最後、フッターの直前に置く。
 * フッターは自分で96px(区切りの4倍)を上に持っているので、
 * こちらが下に足すと、リンクの上だけ詰まって下だけ広い形になる。
 *
 *   上 … 隣のセクションが24pxを持っているので、こちらも24px。
 *          合わせて48pxで、全ページ共通のセクションの境目と同じ
 *   下 … 0。フッターの96pxがそのまま空きになる
 *
 * 上下が揃わないのは意図したもの。
 * 上は「セクションどうしの境目」、下は「ページそのものの終わり」で、
 * 意味の違う切れ目に同じ値を当てる必要はない。
 */
.page-next {
  padding-top: var(--rule-section);
  padding-bottom: 0;
}

/*
 * 読み進めリンクは右端にそろえる。全ページ共通の決まり。
 * 左に置くと、上の一覧や地図の続きに見えてしまう。
 */
.page-next .container {
  display: flex;
  justify-content: flex-end;
}


/*
 * template-parts/all-shop-list.php の見た目。
 * BRANDページと店舗ページの両方で使うため、
 * ページ固有CSSではなくここ(全ページ読み込み)に置いている。
 */
/*
 * ページの終わりに置く索引なので、地色を一段沈めたベタ面にして、
 * それまでの本編と切り分ける。
 *
 * 境目の空きは内も外も --rule-fill(考え方は tokens.css)。
 * 外側は隣のセクションの padding(--rule-section) が先に入っているので、
 * margin にはそのぶんを引いた値を書く。
 */
.all-shops {
  background-color: var(--color-bg-alt);
  margin-block: calc(var(--rule-fill) - var(--rule-section));
  padding-block: var(--rule-fill);
}

/*
 * 4列に流し込む。
 * 件数が増減しても列の割り振りをブラウザが調整してくれるので、
 * PHP側で分割する必要がない。上から下へ読んで五十音順になる。
 */
.all-shops__list {
  column-count: 4;
  column-gap: var(--space-2xl);
  /* 見出しは線の上に乗せる。線から下が一覧本体 */
  margin-top: var(--rule-title);
  padding-top: var(--rule-row);
  border-top: 1px solid var(--color-line);
  font: var(--type-list);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}

.all-shops__list li {
  /* 店名が列をまたいで途中で切れないようにする */
  break-inside: avoid;
  /*
   * 店舗どうしの空き。
   * 上ではなく下に付けることで、各列の先頭がきれいにそろう。
   */
  margin-bottom: var(--space-xs);
}

.all-shops__list a {
  transition: color 0.2s ease;
}

.all-shops__list a:hover {
  color: var(--color-accent);
}

/* いま見ている店舗。リンクにせず、瑠璃色にして現在地を示す */
.all-shops__current {
  color: var(--color-accent);
}

.all-shops__count {
  margin-top: var(--space-lg);
  font: var(--type-caption);
  letter-spacing: var(--ls-caption);
  /*
   * 右下に置く。
   * 一覧の締めくくりの数字なので、読み終わる側に置く。
   * 左下だと、4列の一覧の続き(5列目の頭)のように見えてしまう。
   */
  text-align: right;
  /*
   * 補足の文字は --color-text-sub にそろえる。
   * ここは以前 --color-text-weak(もう一段薄いほう)だったが、
   * すぐ下に置いた「店舗を探す」の補足と2種類のグレーが並んでしまった。
   * 同じ役目の文字は、同じ濃さにする。
   */
  color: var(--color-text-sub);
}

@media (max-width: 1100px) {
  .all-shops__list {
    column-count: 2;
    column-gap: var(--space-lg);
  }
}


@media (max-width: 600px) {
  .all-shops__list {
    column-count: 1;
  }
}


/* ---------- 写真を並べた帯(template-parts/hero-photos.php) ---------- */

/*
 * TOPの採用セクションと、RECRUITトップのヒーローで共通のパーツ。
 * 共通で使うものなので、ページ専用のCSSではなくここに置く。
 *
 * 形や暗さは使う側で変えたいので、下の4つを「つまみ」にしてある。
 * 使う側のCSSで、同じ名前に別の値を入れれば上書きできる。
 *
 *   front-page.css  → .recruit__visual
 *   page-recruit.css → .rec-hero__art
 */
.photo-strip {
  /*
   * 帯全体のタテヨコ比。写真の高さはこれで決まる。
   * 数字を小さくするほど背が高くなる(16/9 は横長、5/6 は縦長)。
   */
  --photo-strip-ratio: 16 / 9;

  /*
   * 写真どうしの継ぎ目の太さ。初期値は 0 = 隙間なしでぴったり並べる。
   *
   * ここは「余白」ではなく罫線に近い見た目の要素なので、
   * サイト共通の余白トークン(--rule-*)はあえて使っていない。
   * 継ぎ目を見せたくなったときだけ 1〜2px を入れる。
   */
  --photo-strip-seam: 0;

  /*
   * 下にかける黒の濃さ(0 = なし / 1 = 真っ黒)。
   * 文字を重ねる場所でだけ使う。初期値は 0 = グラデーションなし。
   */
  --photo-strip-shade: 0;

  /*
   * 写真を切り取るときの基準点(左右 上下)。
   *
   * 写真は縦長(約5:9)で枠の形とは違うので、必ずどこかが切れる。
   * 上下の数字を小さくすると「上のほう」を残す = 顔が下がる。
   */
  --photo-strip-focus: 50% 50%;

  /*
   * 重ねるスローガンの置き場所。slogan を渡したときだけ効く。
   *   w      … 文字のかたまりの幅(帯の幅に対する％)
   *   x / y  … かたまりの基準点(帯の左上からの％)
   *   anchor … その基準点を、かたまりのどこに合わせるか
   *            -100% = 下端   /  -50% = 上下の中心
   *
   * 初期値は「帯の下のほうに置く」。
   * 下に向かって濃くなる黒(--photo-strip-shade)とセットで、
   * 白ヌキの文字が読めるようにしている。
   * ％で持たせているので、画面幅が変わっても写真との位置関係が崩れない。
   */
  --photo-strip-slogan-w: 63%;
  --photo-strip-slogan-x: 50%;
  --photo-strip-slogan-y: 92%;
  --photo-strip-slogan-anchor: -100%;

  position: relative;

  /*
   * grid-auto-flow: column は「置いた数だけ横に列を作る」書き方。
   * repeat(4, 1fr) のように枚数を決め打ちしないので、
   * 写真が3枚になれば自動で3列になる(空の列が残らない)。
   */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--photo-strip-seam);
  aspect-ratio: var(--photo-strip-ratio);
}

/*
 * object-fit: cover は「枠を写真で埋め、はみ出た分を切る」指定。
 * これがないと、縦長の写真が枠に合わせて潰れる。
 * min-width / min-height: 0 は、gridの中で画像が縮まないための決まり文句。
 */
.photo-strip img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
  object-position: var(--photo-strip-focus);
}

/*
 * 下に向かう黒のグラデーション。文字を重ねる場所でだけ効く。
 *
 * 写真に焼き込まず、ここで重ねている。
 * 濃さを直すのに写真を書き出しなおさなくて済むのと、
 * 写真を差し替えても暗さがそのまま引き継がれるため。
 *
 * デザイン上は「乗算」で作っているが、mix-blend-mode は使っていない。
 * 乗せる色が黒のときは、乗算もふつうの重ねも計算結果が同じになるため
 * (黒との乗算は「元の色 × 0」なので、どちらも同じ暗さに落ちる)。
 * 効果が同じなら、対応の古い指定は増やさないほうがよい。
 *
 * 途中の2つの止め位置は、まっすぐ暗くすると境目が帯に見えるのを避けるため。
 */
.photo-strip::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 38%,
    rgba(0, 0, 0, calc(var(--photo-strip-shade) * .28)) 62%,
    rgba(0, 0, 0, calc(var(--photo-strip-shade) * .68)) 82%,
    rgba(0, 0, 0, var(--photo-strip-shade)) 100%
  );
}

/*
 * 重ねるスローガン(SVG)。
 *
 * translate は「x / y で指した点を、文字のかたまりのどこに合わせるか」の打ち消し。
 * 左右はつねに中心(-50%)、上下だけ --photo-strip-slogan-anchor で切り替える。
 * こうしておくと、文字の大きさを変えても基準にした端は動かない。
 *
 * z-index: 1 が要るのは、上の ::after(黒のグラデーション)が
 * あとから描かれるため。付けないと文字がグラデーションの下に潜る。
 *
 * 色はSVG側が currentColor なので、使う側の color がそのまま乗る。
 */
.photo-strip__lettering {
  position: absolute;
  z-index: 1;
  left: var(--photo-strip-slogan-x);
  top: var(--photo-strip-slogan-y);
  transform: translate(-50%, var(--photo-strip-slogan-anchor));
  width: var(--photo-strip-slogan-w);
}

.photo-strip__lettering svg {
  display: block;
  width: 100%;
  height: auto;
}

.photo-strip .placeholder {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*
 * スマートフォン。
 *
 * 並びはPCと同じ「横に4枚」のまま、枠の形だけ正方形に変える。
 *
 *   PC   :  01  02  03  04  (16:9 の横長)
 *   スマホ:  01  02  03  04  (正方形)
 *
 * 以前は2×2に組み替えていたが、
 * 4枚が横に並んだ帯であることがデザインの主眼なので、
 * 狭い画面でもその並びを崩さないことにした。
 * 1コマは縦長(正方形の4分の1幅)になり、素材(約5:9)に近い形なので
 * 切り取りは中央のまま(--photo-strip-focus は初期値)で収まる。
 */
@media (max-width: 768px) {
  .photo-strip {
    --photo-strip-ratio: 1 / 1;

    /*
     * 画面が狭いぶん、重ねる文字は枠の左右いっぱいまで使う。
     * 96% にしているのは、写真の左右の縁に文字が触れないよう
     * 片側2%ずつを空けておくため。
     */
    --photo-strip-slogan-w: 96%;
  }
}