/* ==========================================================================
   POTOMAK 2026 — ベーススタイル
   リセットと、サイト全体で共通の見た目(文字・リンク・レイアウト土台)。
   個別ページの装飾はここには書かない。
   ========================================================================== */

/* ---------- リセット ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

/*
 * hidden 属性を必ず効かせる。
 *
 * hidden は「隠す」という意味の標準の書き方だが、
 * ブラウザはそれを display: none で実現している。
 * そのため、こちら側で display: flex などを書くと、
 * あとから書いたほうが勝ってしまい、隠れなくなる。
 * ここで一度きり優先させておけば、その事故が起きない。
 */
[hidden] {
  display: none !important;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/*
 * リンクとボタンのカーソルは、ブラウザ標準の指の形(pointer)。
 *
 * 以前は瑠璃色の丸の画像(images/cursor-dot.png)に差し替えていたが、
 * 見慣れない形はそれ自体が「何かの表示」に見えてしまい、
 * 押せることを伝えるより先に気が散る。標準に戻した。
 *
 * ※ All Shop List の店名だけは、店舗ごとのロゴを出すため
 *   別の指定で上書きしている(layout.css)。こちらは残している。
 */
a[href],
button,
[role="tab"],
label {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}


/* ---------- 土台 ---------- */

body {
  font: var(--type-body);
  letter-spacing: var(--ls-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  /* 和文の字面を整える。ぶら下げと約物の詰めを有効に */
  font-feature-settings: "palt" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}


/* ---------- 見出し ---------- */

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

/*
 * セクション上に置く英字の小ラベル。字間をかなり広く取るのが本デザインの特徴。
 * 大文字化はCSSでは行わない(「OUR BRAND and SHOP」のように
 * 一部だけ小文字にする指定があるため、原稿の表記をそのまま使う)。
 */
.eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-accent);
}

/*
 * ラベルがそのままセクションの見出しを兼ねるとき(ニュースなど)。
 * 下に続く見出しが無いぶん、「見出し→中身」の空きを自分で持つ。
 */
.eyebrow--heading {
  margin-bottom: var(--rule-head);
}

/* eyebrow の直下に来る大見出し。イントロの h1 と同じ H1-Serif */
.section-title {
  /* 英字ラベル→見出しの間隔。RECRUITの見出しに合わせて詰めている */
  margin-top: var(--space-xs);
  /* 見出し→中身。全ページ共通のルール */
  margin-bottom: var(--rule-head);
  font: var(--type-h1);
  letter-spacing: var(--ls-display);
}

/*
 * すぐ下にリード文が続くときだけ、空きを詰める。
 * リード文は見出しの続きとして読ませたいので、
 * 見出しと中身のあいだのルール(24px)よりも近づける。
 *
 * :has() が効かない古い環境では全部24pxになるだけで、崩れはしない。
 */
.section-title:has(+ .section-lead) {
  margin-bottom: var(--space-sm);
}

/* 見出し下のリード文。全ページ共通で Lead Body(16px) */
.section-lead {
  font: var(--type-body);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
  margin-bottom: var(--rule-head);
}

/*
 * セクション末尾のリンク。
 * 画面の広さにかかわらず右寄せ。例外は作らない。
 *
 * 各セクションの中身(写真の並び)は本文の右端まで届いているので、
 * そこにリンクが乗ると、帯が閉じたように見える。
 * 左に置くと右半分の空白にリンクだけが取り残される。
 */
.section-foot {
  /*
   * 中身とリンクのあいだ。
   *
   * セクションの中の区切りなので --rule-row。
   * セクションどうしの区切り(48px)より必ず狭くしておくこと。
   * 逆転すると、リンクが自分のセクションより次のセクションに
   * 近く見えて、どのセクションのリンクなのか分からなくなる。
   * (以前は --space-xl(48px)で、区切りと同じ幅だった)
   */
  margin-top: var(--rule-row);
  text-align: right;
}

/*
 * 戻る導線のとき。
 * 読み進めるリンクは右端だが、戻るリンクは左端に置く。
 * 中の矢印も逆向き(.pill-link--back)にして、進む・戻るを形で見分けられるようにする。
 */
.section-foot--back {
  text-align: left;
}


/* ---------- レイアウト ---------- */

/*
 * 内容の器。
 * 最大幅は設けず、画面幅に追従させる。左右の余白だけを一定に保つ。
 */
.container {
  width: 100%;
  padding-inline: var(--pad-content);
}

/* 画面いっぱいに広げたい帯(写真バンドなど) */
.full-bleed {
  width: 100%;
}

/* セクションの縦余白。デザインの余白感に合わせて広めに取る */
.section {
  padding-block: var(--rule-section);
}


/* ---------- 共通パーツ ---------- */

/* ==========================================================================
   何枚目かを示す丸印

   横に送る帯(TOPの事業領域 / COMPANYの価値観)の下に置く共通パーツ。
   出す・出さないは使う側で決める(.○○__dots に display を書く)。
   ========================================================================== */

.dots {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.dots__item {
  width: 6px;
  height: 6px;
  border: 1px solid var(--color-text-weak);
  border-radius: 50%;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.dots__item.is-current {
  background-color: var(--color-ink);
  border-color: var(--color-ink);
}


/* ==========================================================================
   「読み進める先へ送る」リンク

   普段は文字リンク(丸い矢印つき)。
   カーソルを乗せると、全体が瑠璃色に塗られたボタンに変わる。

   マークアップは functions.php の potomak2026_pill_link() が出力する。
   ========================================================================== */

.pill-link {
  /* 丸い矢印の直径 */
  --pill-icon: 26px;

  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  /* 指で押しやすい高さを確保する。左右は付けない(文字の頭を本文と揃えるため) */
  padding-block: var(--space-xs);

  /*
   * 本文(15px)より一段小さい List(14px)。
   * 読ませる文章ではなく「次へ送る案内」なので、
   * 本文と同じ大きさだと主張が強すぎる。
   * さらに小さくするなら var(--type-caption)(12px。ボタンと同じ)。
   */
  font: var(--type-list);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}

/*
 * 文字の下に引かれる線。
 * 普段は横幅0で見えず、カーソルを乗せると左から右へ伸びる。
 * 幅そのものではなく「横方向の伸縮」で動かしているので、
 * 描き直しが起きず、なめらかに引ける。
 */
.pill-link__label {
  position: relative;
}

.pill-link__label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  /* 丸と同じ瑠璃色。同じリンクの中で青が2種類にならないようにする */
  background-color: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pill-link__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--pill-icon);
  height: var(--pill-icon);
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  color: var(--color-white);
  background-color: var(--color-accent);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.pill-link__icon svg {
  width: 10px;
  height: 10px;
}

/*
 * 戻るリンク。丸い矢印を文字の前に置き、向きを左にする。
 *
 * 進むときは「文字 → 矢印」で、読んでから送り出される順。
 * 戻るときはその逆で、先に「←」が来て、そこから文字を読む。
 * 進む・戻るが形で見分けられるようにするための入れ替え。
 *
 * 矢印はSVGを別に用意せず、左右を反転させて使い回している。
 * 下線の伸びる向きも、矢印と同じ左向きにそろえる。
 */
.pill-link--back {
  flex-direction: row-reverse;
}

.pill-link--back .pill-link__icon svg {
  transform: scaleX(-1);
}

.pill-link--back .pill-link__label::after {
  transform-origin: right center;
}

/*
 * カーソルを乗せたときの動き。
 *
 *   ・文字の下に線が左から右へ伸びる
 *   ・丸が少し前へ出て、中の矢印もさらに少し前へ出る
 *
 * 丸と矢印で動く量を変えているのが要で、
 * 同じだけ動かすと絵が丸ごとずれただけに見える。
 * 差をつけると、矢印が丸を追い越そうとしているように見えて、
 * 「この先へ進む」という意味が出る。
 *
 * (hover: hover) で囲っているのは、指で操作する端末を除くため。
 * 囲わずに書くと、スマートフォンで一度触れたあとに
 * 「乗せたまま」の状態が残ってしまう。
 */
@media (hover: hover) {
  .pill-link:hover .pill-link__label::after {
    transform: scaleX(1);
  }

  /* 塗り → 同じ色の線。ボタンと同じ考え方 */
  .pill-link:hover .pill-link__icon {
    color: var(--color-accent);
    background-color: transparent;
  }
}

/* 指で押している間の反応。ホバーが無い端末でも手応えが出る */
.pill-link:active .pill-link__label::after {
  transform: scaleX(1);
}

.pill-link:active .pill-link__icon {
  color: var(--color-accent);
  background-color: transparent;
}


/* 塗りのボタン */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-width: 220px;
  padding: 14px var(--space-lg);
  font: var(--type-caption);
  letter-spacing: var(--ls-caption);
  color: var(--color-white);
  background-color: var(--color-accent);
  /*
   * 見えない枠線を最初から持たせておく。
   * 触れたときに枠線が現れる作りなので、
   * ここで場所を確保しておかないと、その瞬間にボタンが
   * 1pxぶん大きくなって文字がずれる。
   */
  border: 1px solid transparent;
  border-radius: 999px;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/*
 * 枠線だけのボタン(塗りの .btn と対にして使う)。
 * サイトのほとんどのボタンはこちら。塗りの青は導線を1つに絞りたいところだけ。
 * ホバーの動きは下の共通の指定が受け持つ(墨色に塗りつぶし、文字を白に)。
 */
.btn--line {
  color: var(--color-ink);
  background-color: transparent;
  border: 1px solid var(--color-ink);
}

/*
 * 写真の上に置くボタン。白で塗りつぶす。
 *
 * 以前は「白い枠 + 白い文字」で、中は写真が透けていた。
 * 見た目は静かだが、写真がその都度違うので、明るい場所や
 * 情報の多い場所に重なると枠も文字も沈んで見つからなくなる。
 * ここはページの終わりにある唯一の行き先なので、
 * 写真がどうであっても必ず見えるほうを取る。
 */
.btn--outline {
  color: var(--color-ink);
  background-color: var(--color-white);
  border: 1px solid var(--color-white);
}

/*
 * カーソルを乗せたときの見た目。考え方は全ボタン共通で1つ。
 *
 *   「塗りと線が、同じ色のまま入れ替わる」
 *
 * 塗られていたものは、その色の線だけになる。
 * 線だったものは、その色で塗りつぶされる。
 * 色は変えないので、どのボタンも自分の色のまま反応する。
 *
 *   塗りの青ボタン … 青の塗り → 青の線(文字も青へ)
 *   SHOPの黒枠     … 黒の線   → 黒の塗り(文字は白へ)
 *   お問い合わせ帯 … 白の塗り → 白の線(文字は白へ)
 *
 * (hover: hover) で囲っているのは、指で操作する端末を除くため。
 * 囲わずに書くと、スマートフォンで一度触れたあとに
 * 「乗せたまま」の状態が残ってしまう。
 */
@media (hover: hover) {
  /* 塗り → 同じ色の線 */
  .btn:not(.btn--outline):not(.btn--line):hover {
    color: var(--color-accent);
    background-color: transparent;
    border-color: var(--color-accent);
  }

  /* 線 → 同じ色の塗り */
  .btn--line:hover {
    color: var(--color-white);
    background-color: var(--color-ink);
    border-color: var(--color-ink);
  }

  /* 塗り → 同じ色の線。他のボタンと同じ入れ替え方 */
  .btn--outline:hover {
    color: var(--color-white);
    background-color: transparent;
    border-color: var(--color-white);
  }
}

/* 指で押している間の反応。ホバーが無い端末でも手応えが出る */
.btn:not(.btn--outline):not(.btn--line):active {
  color: var(--color-accent);
  background-color: transparent;
  border-color: var(--color-accent);
}

.btn--line:active {
  color: var(--color-white);
  background-color: var(--color-ink);
  border-color: var(--color-ink);
}

.btn--outline:active {
  color: var(--color-white);
  background-color: transparent;
  border-color: var(--color-white);
}

/*
 * スマホ幅でだけ改行を入れる。<br class="u-br-sp"> の形で使う。
 *
 * 境目が600pxなのは、文字サイズの切り替え(768px)より狭くしたいため。
 * 768pxはタブレットの縦がまだ入る幅で、そこは1行に収まるので
 * 改行を入れると行が半分で終わって間延びして見える。
 *
 * 実機は、スマートフォンが最大430px、タブレットが744px以上。
 * その間には何も無いので、この2つの数字のあいだで切れば誤爆しない。
 * 600pxはすでにサイト内で使っている幅なので、段を増やさずに済む。
 */
.u-br-sp {
  display: none;
}

@media (max-width: 600px) {
  .u-br-sp {
    display: inline;
  }
}

/*
 * 広い画面でだけ改行を入れる。<br class="u-br-pc"> の形で使う。
 * u-br-sp とちょうど反対の働きをする(狭い画面では改行しない)。
 * 対になるので、境目も u-br-sp と同じ600pxにそろえること。
 */
@media (max-width: 600px) {
  .u-br-pc {
    display: none;
  }
}

/*
 * 広い画面でだけ改行を入れる。<br class="u-br-wide"> の形で使う。
 * u-br-pc との違いは、改行をやめる幅がもっと狭い(500px)こと。
 *
 * 「ここで改行すると読みやすい」という位置に入れておき、
 * 画面が狭くてその行自体が折り返してしまう幅になったら
 * 改行をやめて、自然に流れるようにする。
 */
@media (max-width: 500px) {
  .u-br-wide {
    display: none;
  }
}

/*
 * 下層ページの先頭に置く見出しのまとまり(BUSINESS / BRAND など共通)。
 * 「ページ名(英字) → 大見出し → リード文」を中央ぞろえで積む。
 */
/*
 * ヘッダー下からラベルまでの空きは 64px。
 * COMPANYの青ヒーロー(.company-hero)と同じ値にして、
 * どのページでも見出しが同じ高さから始まるようにしている。
 */
.page-hero {
  padding-top: var(--space-2xl);

  /*
   * リード文 → 次のセクションまでの空き。
   *
   * ここは共通ルール(--rule-section)ではなく48px。
   * ページの入口なので、読み終えたあとに少し間を置いてから
   * 本編へ渡したい。24pxだと文章のすぐ下に次が始まってしまう。
   * ※ 元は上の余白と同じ64pxだったが、下に大きな写真が来ると
   *   離れすぎて、見出しと写真が別のページのものに見えた。
   *
   * COMPANYのヒーローは同じ役割で96pxだが、あちらは青ベタの中の余白で、
   * 色の縁が空きを受け止めるぶん大きくても間延びしない。
   * こちらは地色のままなので、同じ96pxだと空きすぎて見える。
   */
  padding-bottom: var(--space-xl);
  text-align: center;
}

/*
 * ページ名のラベル。共通の .eyebrow(12px・瑠璃色)とは別物で、
 * こちらは黒・字間が極端に広い(0.35em)。サイズは List(14px)。
 * ※ 12px(Eyebrow)も試したが、字間が広いぶん小さすぎて名札に見えなかった。
 */
.page-hero__eyebrow {
  font: var(--type-list);
  letter-spacing: var(--ls-page-label);
  /* 字間は文字の右側にも付く。そのぶん中央がずれて見えるのを打ち消す */
  text-indent: var(--ls-page-label);
  color: var(--color-ink);
}

.page-hero__title {
  /*
   * ページ名ラベルとの空き。全ページ共通の8px。
   *
   * 以前は30px(のちに32px)で、ここと COMPANY の青ヒーローだけが
   * サイトの決まり(英字ラベル → 見出しは8px)から外れていた。
   * 名札と見出しはひとかたまりとして読ませたいので、決まりに寄せる。
   */
  margin-top: var(--space-xs);
  font: var(--type-display);
  letter-spacing: var(--ls-display);
}

/*
 * 見出しを span に分けておくと、折り返しがその位置でだけ起きる。
 * 分けずに1つ渡せば、ふつうの流し込み(成り行き)になる。
 *
 * 分けるときの注意: 1つの span が1行に入りきらないと、
 * その中でも折り返して「…空間を創/り出す。」のような切れ方になる。
 * 狭い画面(390px)で入るのは1行あたり10字ほど。それ以下に分けること。
 */
.page-hero__title span {
  display: inline-block;

  /*
   * 対応しているブラウザでは、文節の切れ目で折り返す。
   * 「空/間」のように語の途中で切れるのを避けられる。
   * 非対応のブラウザではふつうの折り返しに戻るだけで、崩れはしない。
   */
  word-break: auto-phrase;
}

/* リード文は Body Lead(16px / 行間2.0)。折り返す文章を読みやすくするため */
.page-hero__lead {
  max-width: 886px;
  margin-inline: auto;
  /* 見出し → 中身。全ページ共通の24px(tokens.css の --rule-head) */
  margin-top: var(--rule-head);
  font: var(--type-body-lg);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}

/*
 * 見出しを小さいほうで組むページ(店舗検索 / 一点もの / ライセンス)。
 *
 * 分けているのは階層ではなく、ページの性格。
 *
 *   大きいほう(38px) … BRAND / BUSINESS / COMPANY / RECRUIT
 *     「日常をハレに変える一口と空間」のように、読ませる言葉を置くページ。
 *
 *   小さいほう(32px) … この3つ
 *     「店舗を探す」は読ませる言葉ではなく名札。
 *     主役は、その下にある検索窓や店舗の一覧のほう。
 *
 * 組み方は BUSINESSページの中の見出し(SIGNATURE PROJECT)と同じ。
 *
 *   ラベル  14px 墨色  →  12px 瑠璃色
 *   見出し  38px       →  32px
 *   リード  17px       →  15px
 *
 * 中央ぞろえや余白は共通のまま。変えるのは大きさと色だけ。
 * どのページに付くかは functions.php の potomak2026_body_class を参照。
 */
body.has-quiet-hero .page-hero__eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  /* 字間は文字の右側にも付く。そのぶん中央がずれて見えるのを打ち消す */
  text-indent: var(--ls-eyebrow);
  color: var(--color-accent);
}

body.has-quiet-hero .page-hero__title {
  font: var(--type-h1);
}

body.has-quiet-hero .page-hero__lead {
  font: var(--type-body);
  /*
   * 見出し → リード文も16px。
   * BUSINESSの「プロジェクト事例」(.signature__intro)と同じ値。
   * 見出しもリード文も文字の外側に余白を持っているので、
   * 24pxを足すと見た目は40px近くになり、2つが離れて見える。
   */
  margin-top: var(--space-sm);
}

@media (max-width: 768px) {
  .page-hero {
    padding-top: var(--space-2xl);
  }

  /*
   * ページ先頭のリード文。大きさ(17px)はトークン側で決まっているので、
   * ここでは狭い画面だけの2点を足す。
   *   ・行送りを2.0 → 1.8。1行11文字ほどしか入らず行数が増えるため
   *   ・左揃え。理由は下のコメント
   */
  .page-hero__lead,
  .company-hero__lead,
  .rec-intro__lead {
    line-height: 1.8;

    /*
     * 左揃えにする。ラベルと見出しは中央揃えのまま。
     *
     * 日本語の長い文章を中央揃えにすると、行ごとに左右の端がずれ、
     * 最後の1行だけ短く真ん中に浮く。
     * PCは1〜2行なので目立たないが、狭い画面では4〜5行になり、
     * 行の端のガタつきがそのまま「雑に見える」原因になる。
     */
    text-align: left;
  }

  /*
   * 店舗検索(/shop/)だけは中央揃えのまま。
   *
   * 上の左揃えは「狭い画面で4〜5行になる長い文章」への手当て。
   * このページのリード文は「名前・エリア・用途から全国の店舗を探せます。」の
   * 1文だけで、狭い画面でも1〜2行にしかならない。
   * 行の端がガタつく問題が起きないので、ラベル・見出しと揃えて中央に置く。
   */
  body.post-type-archive-shop .page-hero__lead {
    text-align: center;
  }
}


/* ==========================================================================
   1画面で完結するページ ( 404 / 英語版の準備中 )
   ========================================================================== */

/*
 * ヘッダーとフッターの間を、これだけで埋める。
 *
 * 中身が数行しか無いので、ふつうに置くとフッターがせり上がって
 * 画面の真ん中に来てしまう。画面の高さの半分を最低の高さとして持たせ、
 * その中で天地中央に置く。
 * 上下の余白はセクションの終わりと同じ 96px(--rule-section × 3)。
 */
.simple-page {
  display: grid;
  place-items: center;
  min-height: 50vh;
  padding-block: calc(var(--rule-section) * 3);
  text-align: center;
}

/* 英字ラベル。他のページの page-hero__eyebrow と同じ扱い */
.simple-page__label {
  font: var(--type-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  /* 字間は文字の右側にも付く。そのぶん中央がずれて見えるのを打ち消す */
  text-indent: var(--ls-eyebrow);
  color: var(--color-accent);
}

/*
 * 見出し。
 * 404は英字だけなので、英字ラベルと同じ広い字間(--ls-eyebrow)で組む。
 * 英文の見出し(.simple-page--en)は下で字間を詰め直す。
 */
.simple-page__title {
  font: var(--type-h2-san);
  letter-spacing: var(--ls-eyebrow);
  text-indent: var(--ls-eyebrow);
  color: var(--color-ink);
}

/* ラベルがあるときは、見出しとの間を8px(--space-xs)に。全ページ共通の値 */
.simple-page__label + .simple-page__title {
  margin-top: var(--space-xs);
}

/* 見出し → 中身。全ページ共通の24px(--rule-head) */
.simple-page__lead {
  margin-top: var(--rule-head);
  font: var(--type-body);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}

.simple-page .btn {
  margin-top: calc(var(--rule-head) * 2);
}

/*
 * 英文のページ。字間を詰める。
 * 日本語の 0.04em をそのまま当てると、単語の切れ目が分からなくなる。
 */
.simple-page--en .simple-page__title,
.simple-page--en .simple-page__lead {
  letter-spacing: 0.01em;
  text-indent: 0;
}


/*
 * 目には見せないが、読み上げソフトには読ませたい文字。
 * display:none だと読み上げからも消えてしまうので、
 * 大きさを1pxにして切り抜くことで「あるけど見えない」状態にする。
 */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/*
 * 地色を一段沈ませたセクション。
 *
 * 隣り合うセクションの区別がつきにくいときに使う。
 * <section class="... has-tint"> の形で付ける。
 * 色は --color-bg-alt(= グレージュ)。ページごとに別の色を作らないこと。
 */
.has-tint {
  background-color: var(--color-bg-alt);
}



/*
 * 権利表記(ライセンス元から表示を求められているもの)。
 *
 * 店名のすぐ下に、一段小さく添える。
 * 名前の一部ではないので、書式(12px・グレー)で切り離している。
 *
 * 出す場所が多い(店舗詳細・各カード・ブランドの一覧・メインビジュアル)ので、
 * 書式はここに1つだけ置き、位置だけ各ページで調整する。
 * 文言を決めているのは functions.php の potomak2026_credit_for_name()。
 */
.shop-credit,
.shop-intro__credit,
.shop-card__credit,
.mosaic__credit,
.collage__credit,
.mainvisual__credit {
  display: block;
  margin-top: var(--space-2xs);
  font: var(--type-caption);
  letter-spacing: var(--ls-caption);
  color: var(--color-text-sub);
}

/* 写真に重ねる場所だけ、地の色に合わせて白にする */
.mainvisual__credit {
  color: var(--color-white);
  opacity: 0.8;
}

/* 画像がまだ用意できていない箇所の仮置き */
.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  background-color: var(--color-grayge);
  border: 1px solid var(--color-line);
  color: var(--color-text-weak);
  font: var(--type-caption);
  letter-spacing: var(--ls-caption);
}


/* ==========================================================================
   NEWSのカード(共通)

   TOPの一覧と NEWS一覧ページ(archive-event.php)で共用する骨格。
   マークアップは template-parts/news-card.php。

   何列に並べるか・見出しを何行で切るかは、置く側のCSSで決める。
   ========================================================================== */

.news-card__thumb {
  position: relative;
  /*
   * 記事の写真。3:2。
   * 記事のトップに出る大きい写真(NEWS詳細・インタビュー詳細)と同じ比率で、
   * 一覧と記事の中で写真の形が変わらないようにしている。
   * 狭い画面のリスト表示だけは、下のほうで正方形に上書きしている。
   */
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-color: var(--color-grayge);
}

.news-card__date {
  display: block;
  /* 写真 → その説明。全ページ共通(tokens.css の --rule-caption) */
  margin-top: var(--rule-caption);
  font: var(--type-caption);
  letter-spacing: var(--ls-caption);
  color: var(--color-text-weak);
}

.news-card__title {
  margin-top: var(--space-2xs);
  font: var(--type-caption);
  letter-spacing: var(--ls-caption);
  color: var(--color-ink);
  /* 何行で切るかは置く側で決める。既定は2行 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/*
 * セクションの見出し。
 *
 * 大きな明朝の中央ぞろえではなく、左端に置く小さな1行に統一している。
 * 一覧や項目が続くページでは、見出しが強いと中身より目立ってしまうため。
 *
 *   — NEWS  お知らせ
 *   ↑英語   ↑日本語(span・少し薄く)
 *
 * 店舗ページの各セクションと、全ページ共通の全店舗一覧で使う。
 */
.section-label {
  /* 見出し → 中身。全ページ共通の 24px */
  margin-bottom: var(--rule-head);
  font: var(--type-body);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}

.section-label span {
  margin-left: 1em;
  color: var(--color-text-weak);
}


/*
 * NEWSの「行型」の一覧。
 *
 * カード型(横に並べる)ではなく、写真と文字を横に組んだ1行を、
 * 罫線で区切って上から積む形。
 *   ・TOPの狭い画面(front-page.css の 768px 以下)
 *   ・店舗ページのお知らせ(こちらは画面幅によらず常にこの形)
 * の2か所で同じ見え方をする。
 *
 * 罫線は行の上に引き、最後の1行だけ下にも引く。
 * 罫線と中身のあいだは上下とも同じ(--space-xs)。
 * ここを24pxも空けると1件が独立したカードに見えて、
 * 上から順に流し見する動きが止まってしまう。
 */
.news-list {
  display: flex;
  flex-direction: column;
  /* 区切りは罫線が受け持つので、すき間は持たせない */
  gap: 0;
}

.news-list .news-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding-block: var(--space-xs);
  border-top: 1px solid var(--color-line);
}

.news-list .news-card:last-child {
  border-bottom: 1px solid var(--color-line);
}

.news-list .news-card__thumb {
  flex: 0 0 100px;
  width: 100px;
  aspect-ratio: 1 / 1;
}

.news-list .news-card__body {
  flex: 1;
  /* 長い見出しがはみ出さないように(flexの子は既定で縮まない) */
  min-width: 0;
}

/* 行の中では日付が一番上に来るので、カード型のときの上余白は要らない */
.news-list .news-card__date {
  margin-top: 0;
}



/*
 * カードのサムネイル(共通)
 *
 * 各カードの __thumb img / .placeholder / ホバー時のズームは、以前は
 * 各ページCSSに同じ内容がコピーされていた。中身が同一のものをここに
 * 1つにまとめている。枠の縦横比(aspect-ratio)はカードごとに違うので、
 * それは各ページCSSの .○○-card__thumb 側に残してある。
 * ※ 新しいカードを足したら、この一覧にもセレクタを追加すること。
 */

/* 画像(ホバーでゆっくり拡大する系) */
.news-card__thumb img,
.brand-card__thumb img,
.shop-card__thumb img,
.itv-card__thumb img,
.rec-person__thumb img,
.rec-position__thumb img,
.sibling-card__thumb img,
.nearby-card__thumb img,
.business-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* 画像(ホバー拡大なし) */
.work-card__thumb img,
.project-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ホバーで画像を少し拡大 */
.news-card:hover .news-card__thumb img,
.brand-card:hover .brand-card__thumb img,
.shop-card:hover .shop-card__thumb img,
.itv-card:hover .itv-card__thumb img,
.rec-person:hover .rec-person__thumb img,
.rec-position:hover .rec-position__thumb img,
.sibling-card:hover .sibling-card__thumb img,
.nearby-card:hover .nearby-card__thumb img,
.business-item__link:hover .business-item__thumb img {
  transform: scale(1.04);
}

/* 仮置き枠を __thumb 内で全面に広げる */
.business-item__thumb .placeholder,
.brand-card__thumb .placeholder,
.shop-card__thumb .placeholder,
.work-card__thumb .placeholder,
.project-card__thumb .placeholder,
.rec-person__thumb .placeholder,
.rec-position__thumb .placeholder {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
}


/*
 * ページ切り替わりのフェード
 *
 * 画面全体を地色で覆う板。読み込み時は下のアニメーションで自動的に消えるので、
 * JavaScriptが動かない環境でも覆われたままにはならない(安全側)。
 * 次のページへ移るときは main.js が .is-leaving を付けて、もう一度濃くする。
 *
 * 重なり順はオープニング(9999)より下。オープニングが出る日は、
 * この板はその裏側で静かに消えるだけで、見た目には影響しない。
 */
.page-fade {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background-color: var(--color-bg);
  pointer-events: none;
  opacity: 1;
  animation: page-fade-in 0.45s ease forwards;
}

@keyframes page-fade-in {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* 次のページへ移るとき */
.page-fade.is-leaving {
  animation: none;
  visibility: visible;
  opacity: 1;
  transition: opacity 0.35s ease;
}

/*
 * #付きで来たときは、位置が定まるまで覆ったまま止めておく。
 * 目印を外した瞬間に animation が付き直すので、そこから薄くなりはじめる。
 * 外すのは main.js。
 */
.is-anchor-hold .page-fade {
  animation: none;
  opacity: 1;
  visibility: visible;
}

/* 「視差効果を減らす」設定の人には、フェードを使わず即座に切り替える */
@media (prefers-reduced-motion: reduce) {
  .page-fade {
    animation: none;
    opacity: 0;
    visibility: hidden;
  }

  .page-fade.is-leaving {
    display: none;
  }

  /*
   * この設定の人にも、位置が定まるまでは覆っておく(先頭が見えるのを防ぐ)。
   * ただし薄くなる動きは付けず、目印を外した瞬間に消える。
   */
  .is-anchor-hold .page-fade {
    opacity: 1;
    visibility: visible;
  }
}


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

/* 狭い画面では本文の左右余白を詰める */
@media (max-width: 1100px) {
  :root {
    --pad-content: 40px;
  }
}

/* Special-Serif は行が長いので、他より一段早く縮める */
@media (max-width: 1100px) {
  :root {
    --fs-special: 24px;
    --lh-special: 1.7;
  }
}

@media (max-width: 768px) {
  :root {
    /*
     * スマートフォンの左右余白。
     * 本文もヘッダー/フッターも同じ20pxにそろえるので、
     * ロゴ・見出し・写真の左端が縦一直線に並ぶ。
     */
    --pad-content: 20px;
    --gutter:      20px;

    /*
     * 狭い画面での見出しの大きさ。
     *
     * 【重要】本文(--fs-body)は狭い画面でも縮めていない。
     * そのため見出しだけを大きく縮めると、見出しと本文の差が詰まって
     * 見出しが本文に埋もれ、ページの印象そのものが変わってしまう。
     *   PC   … 32 / 15 = 2.13倍
     *   以前 … 24 / 15 = 1.60倍  ← 階層がつぶれていた
     *   いま … 28 / 15 = 1.87倍
     * 縮めるのは1割程度にとどめ、PCと同じ「見出しが効いている」状態を保つ。
     *
     * Display と H1 は 4px の差を残す。
     * 差が2pxしか無いと、明朝の大きな文字では見分けがつかなくなる。
     */
    --fs-display:   32px;
    --fs-h1:        28px;
    --fs-h2:        23px;
    --fs-name:      18px;
    --fs-h3:        18px;
    --fs-lead:      17px;
  }

}

/*
 * ニュースの並び。
 *
 * TOPの「NEWS」と、記事ページの「ほかのニュース」で同じ形を使う。
 * front-page.css に置いていたが、TOP以外でも使うようになったので
 * カードの骨格(.news-card)と同じここへ移した。
 * (page-*.css に置いた部品を他ページで使って崩れる事故を、何度か起こしている)
 *
 * NEWS一覧ページ(/event/)は列数と行送りを別に決めているので
 * .news-archive__grid を使うが、狭い画面のリスト型だけは共通にしている
 * (このファイルの 520px のところ)。同じカードが場所によって
 * 違う積まれ方をすると、別のサイトに来たように見えるため。
 */
.news__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

/*
 * カードの骨格(写真の比率・日付・見出し)はこのファイルの .news-card にある。
 * 4枚を横に並べる形なので、見出しは2行で省略(既定どおり)。
 * 1枚だけ3行になるとその列だけ背が伸びて、下の端がそろわなくなる。
 */

@media (max-width: 768px) {
  /* 4列だと1枚が小さくなりすぎるので2列に */
  .news__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  /*
   * ニュースは画像を大きく積むカード型をやめ、
   * サムネイル(小さめの正方形)+ テキストを横に並べるリスト型にする。
   * 参考: NOMURA(乃村工藝社)サイトのニュース一覧(2026/08/14 Kosaiさん共有)
   */
  /*
   * NEWS一覧(.news-archive__grid)の並びの切り替えは page-news.css にある。
   * このファイルより後に読み込まれ、そちらで display: grid にしているため、
   * ここに書いても上書きされてしまう。カード側の指定(下)は共通。
   */
  .news__grid {
    display: flex;
    flex-direction: column;

    /*
     * カード型のときの 24px のすき間をここで打ち消す。
     *
     * リスト型では区切りが罫線に変わり、上下の空きは
     * 各行の padding が持つ。すき間を残したままだと、
     * その24pxがまるごと罫線の「上側」だけに乗ってしまい、
     * 罫線の上が32px・下が8pxという不揃いになる。
     */
    gap: 0;
  }

  .news__grid .news-card,
  .news-archive__grid .news-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    /*
     * 罫線と中身のあいだ。
     *
     * ここはセクションの区切りではなく、一覧の行の切れ目。
     * 24pxも空けると1件が独立したカードに見えて、
     * 上から順に流し見する動きが止まってしまう。
     * 罫線が「行の区切り」に見える最小限まで詰めている。
     */
    padding-block: var(--space-xs);
  }

  /*
   * 区切りの罫線。
   * 一番上と一番下にも引いて、一覧全体をひとつの帯として閉じる。
   * 上の罫線は全行が持ち、下の罫線だけ最後の行が持つ。
   */
  .news__grid .news-card,
  .news-archive__grid .news-card {
    border-top: 1px solid var(--color-line);
  }

  .news__grid .news-card:last-child,
  .news-archive__grid .news-card:last-child {
    border-bottom: 1px solid var(--color-line);
  }

  .news__grid .news-card__thumb,
  .news-archive__grid .news-card__thumb {
    flex: 0 0 100px;
    width: 100px;
    aspect-ratio: 1 / 1;
  }

  .news__grid .news-card__body,
  .news-archive__grid .news-card__body {
    flex: 1 1 auto;
    min-width: 0; /* flexアイテム内でテキストがはみ出さないようにする */
  }

  .news__grid .news-card__date,
  .news-archive__grid .news-card__date {
    margin-top: 0;
  }

  .news__grid .news-card__title,
  .news-archive__grid .news-card__title {
    margin-top: var(--space-2xs);
    /*
     * ここだけ3行。
     * 狭い画面では写真の横に文字を置く形になり、文字の列がぐっと狭くなる。
     * 横に並べているわけではないので、行数が増えても端はそろう。
     */
    -webkit-line-clamp: 3;
  }
}


/* ==========================================================================
   外部リンクの印

   押した先がこのサイトの外であることを、文字の前の小さな図で示す。
   大きさは文字に合わせる(em)ので、置く場所の文字サイズが変われば一緒に変わる。
   ========================================================================== */

.external-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  /* 文字 → 印。行の中なので、全ページ共通の8pxではなく文字幅基準にする */
  margin-right: 0.5em;
  /* ベースラインより少し上げて、文字の高さの真ん中あたりに置く */
  vertical-align: -0.1em;
}

.external-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}