/* ==========================================================================
   POTOMAK 2026 — SHOP個別ページ専用スタイル
   出典: Figma「POTOSITE_FINAL」SHOP_0619 (node 2122:669)

   セクション順:
     ヒーロー / 店舗概要 / News / メニュー /
     SHOP DATA / 同ブランドの店舗 / 周辺エリアの店舗
   ========================================================================== */

/* ---------- セクション共通 ---------- */

.shop-section {
  padding-block: var(--rule-section);
}

/* エリアなどの丸いタグ */
.shop-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.shop-tag {
  display: inline-flex;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--color-line);
  border-radius: 55px;
  font: var(--type-caption);
  letter-spacing: var(--ls-caption);
  color: var(--color-text-sub);
}


/* ---------- ヒーロー ---------- */

/*
 * 写真2枚を横に並べる。Figma実測では 554 : 886。
 * 高さをそろえたいので、比率で幅を配分する。
 */
.shop-hero {
  display: grid;
  grid-template-columns: 554fr 886fr;
  height: 600px;
}

.shop-hero__item {
  overflow: hidden;
  background-color: var(--color-grayge);
}

/*
 * 2枚目を1pxだけ左に重ねる。
 *
 * 列の幅は 554fr : 886fr の比なので、たいてい小数になる(例 553.6px)。
 * その小数の位置で2枚が切り替わるため、継ぎ目に0.5pxほど
 * 地色(ほぼ白)がのぞいて、細い線に見える。
 * 重ねて隙間を塞ぐ。狭い画面では縦に積むので、同じことを上下でやっている。
 */
.shop-hero__item + .shop-hero__item {
  margin-left: -1px;
}

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

/* 写真が1枚しかない店舗は、その1枚を全幅で使う */
.shop-hero__item:only-child {
  grid-column: 1 / -1;
}

/*
 * 写真に重ねるロゴ。狭い画面でだけ出す。
 * 広い画面ではロゴは左の列(.shop-intro__logo)にあるので、ここでは出さない。
 */
.shop-hero__logo {
  display: none;
}


/* ---------- 店舗概要 ---------- */

.shop-intro {
  /*
   * 上だけ広い。
   *
   * すぐ上のヒーローは全面写真で、下端が硬い縁になっている。
   * 地色が続くセクション同士の 24px + 24px と同じ空きにすると、
   * 写真が上の余白を1つも負担しないぶん、文字が写真に貼り付いて見える。
   * ベタ面の外側と同じ扱いで、この面だけで区切りを作りきる(--rule-fill)。
   */
  padding-top: var(--rule-fill);
  padding-bottom: var(--rule-section);
}

/*
 * 左にロゴ、右に文章。
 * ロゴは正方形の枠(Figma実測 391.69px)に収める。
 */
.shop-intro__inner {
  display: grid;
  grid-template-columns: 392px minmax(0, 1fr);
  gap: var(--space-3xl);
  align-items: start;
}

/*
 * 左の列。上にロゴ、下にSNSアイコン。
 *
 * SNSアイコンを右の列の「ご予約」ボタンと同じ高さに揃えたい。
 * そこで左の列を縦積みの箱にして、SNSに margin-top: auto を持たせ、
 * 余った空きを全部その上に寄せる = SNSが列の一番下に来る。
 * 列の高さは背の高い右の列に合わされるので、結果としてボタンと並ぶ。
 */
/* 左の列に入るのはロゴだけ。SNSはボタンと同じ並びに移した */
.shop-intro__side {
  display: flex;
  flex-direction: column;
}

/*
 * ロゴは正方形の枠いっぱいに入れる。
 * 枠線は引かない(ロゴ画像自身が余白を持っているため)。
 */
.shop-intro__logo {
  aspect-ratio: 1 / 1;
}

.shop-intro__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.shop-intro__brand {
  /* エリアのタグとは別のかたまりなので、ひと呼吸置く */
  margin-top: var(--space-sm);
}

.shop-intro__name {
  /* ラベル → 見出し。全ページ共通の 8px */
  margin-top: var(--space-xs);
  font: var(--type-h1);
  letter-spacing: var(--ls-display);
}

.shop-intro__name-ja {
  /* 読みがなは店名の続き。行を変えただけに見える距離まで詰める */
  margin-top: var(--space-xs);
  font: var(--type-body);
  letter-spacing: var(--ls-body);
  color: var(--color-text-sub);
}

/*
 * キャッチコピーと本文のまとまり。
 * 上との空きはこの箱が持つので、キャッチが無い店舗でも
 * 本文の位置が変わらない。
 */
.shop-intro__lead {
  /* 見出し → 本文。全ページ共通の 24px */
  margin-top: var(--rule-head);
}

.shop-intro__text {
  font: var(--type-body);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}

.shop-intro__text p + p {
  margin-top: 1.9em;
}

/*
 * ボタンとSNSアイコンの並び。
 *
 * ボタンの数は店舗によって変わり(1〜3個)、入りきらなければ折り返す。
 * SNSアイコンも同じ並びに入れているので、
 * 最後のボタンのすぐ後ろに続き、余白があれば同じ行に乗る。
 */
.shop-intro__buttons {
  display: flex;
  flex-wrap: wrap;
  /* 丸いアイコンとボタンの高さが違うので、中心で合わせる */
  align-items: center;
  /* ボタンどうし。お問い合わせ帯のボタンと同じすき間 */
  gap: var(--space-sm);
  /*
   * 本文 → ボタン。
   * ふつうの行の区切り(--rule-row)だと文章にボタンがくっついて見えるので、
   * ここだけ倍にして、読み終わりの余韻をつくる。
   */
  margin-top: calc(var(--rule-row) * 2);
}

/*
 * アイコンどうしのすき間は、ボタンのすき間にそろえる。
 *
 * ボタンの右にまだ余白があるときは、そこを全部アイコンの左側の空きにして、
 * アイコンを行の右端にそろえる(margin-left: auto)。
 * 行が埋まっているときは押し出す余白が無いので、
 * これまで通り最後のボタンのすぐ後ろに続く。
 */
.shop-intro__buttons .sns-links {
  gap: var(--space-sm);
  margin-left: auto;
}

.shop-intro__buttons .btn {
  min-width: 260px;
  justify-content: space-between;
}

/*
 * ボタンの右端の矢印。
 * メニューのボタンの「PDF」と同じ位置にそろえている。
 * 色は文字と同じ(currentColor)を薄くしたもの。
 * 「PDF」と同じ濃さ(0.6)にそろえてあり、
 * 色そのものは持たないので、反転にもそのまま追従する。
 */
.btn__arrow {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
}

.btn__arrow svg {
  width: 10px;
  height: 10px;
}

/*
 * 店舗ごとの自由なリンク(オンラインショップ、イベントスペースなど)。
 * ボタンにするほどではないので、その下に控えめな一覧として置く。
 */
.shop-intro__links {
  display: grid;
  gap: var(--space-xs);
  margin-top: var(--rule-row);
  font: var(--type-caption);
  letter-spacing: var(--ls-caption);
  color: var(--color-ink);
}

.shop-intro__links a {
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.2s ease;
}

@media (hover: hover) {
  .shop-intro__links a:hover {
    color: var(--color-accent);
  }
}


/* ---------- News ---------- */

/*
 * お知らせの一覧。
 * 並べ方(行型・罫線・空き)は base.css の .news-list が持っている。
 *
 * 幅は指定しない。以前は886pxで中央に置いていたが、
 * 下のメニューやSHOP DATAは中身の幅いっぱいに広がるので、
 * ここだけ内側に入って左右がずれて見えていた。
 */



/* ---------- メニュー ---------- */

/*
 * メニュー名とPDFの印を1つにしたボタンを、左から順に並べる。
 * 数が増えたら折り返す。列数を決め打ちしないので、
 * 1枚の店舗でも5枚の店舗でも同じ見え方になる。
 */
.shop-menu__list {
  display: flex;
  flex-wrap: wrap;
  /* ボタンどうしのすき間 */
  gap: var(--space-sm);
}

/*
 * ボタンの中は「名前(左) …… PDF(右)」。
 * 名前が長い行があるので、折り返しを許して上限だけ決める。
 */
.menu-item {
  justify-content: space-between;
  gap: var(--space-lg);
  max-width: 100%;
  text-align: left;
}

.menu-item__name {
  font: var(--type-list);
  letter-spacing: var(--ls-body);
}

/* PDFの印。名前より弱く見せて、押し先が資料であることだけ伝える */
.menu-item__pdf {
  flex: none;
  font: var(--type-caption);
  letter-spacing: var(--ls-display);
  opacity: 0.6;
}


/* ---------- SHOP DATA ---------- */

.shop-data__inner {
  display: grid;
  grid-template-columns: 500px minmax(0, 1fr);
  gap: var(--space-3xl);
  align-items: start;
}

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

/*
 * 住所・営業時間などは「文章」なので Body(15px)。
 * 項目名(ADDRESS など)も同じ大きさに揃える。
 * 大きさが違うと、左右で文字の基準線がずれて雑に見えるため。
 */
.shop-data__row {
  display: flex;
  gap: var(--space-md);
  /* 罫線と文字の空き。行が多いので、ふつうの24pxの半分にして詰める */
  padding: calc(var(--space-md) / 2) 10px;
  border-bottom: 1px solid var(--color-line);
  font: var(--type-body);
  letter-spacing: var(--ls-body);
}

.shop-data__row dt {
  flex: none;
  width: 140px;
  color: var(--color-ink);
}

.shop-data__row dd {
  flex: 1;
  color: var(--color-ink);
}

/* 地図。埋め込みのiframeは自前の枠にぴったり合わせる */
.shop-data__map-frame {
  aspect-ratio: 600 / 420;
  overflow: hidden;
  background-color: var(--color-grayge);
}

.shop-data__map-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.shop-data__map-foot {
  /* 地図 → ボタン。セクションの中の区切りぶん */
  margin-top: var(--rule-row);
  text-align: center;
}


/* ---------- 同じブランドの他の店舗 ---------- */

/*
 * ここだけ地色を一段沈めたベタ面。
 *
 * ベタ面の境目は、内も外も、地色が続くところの倍を取る(tokens.css の --rule-fill)。
 *   外 … 前後のセクションの padding(24px) と合わせて 48px
 *   内 … 色の縁から中身まで 48px
 * ふつうの 24px のままだと、色の縁に見出しが貼り付いて見える。
 */
.shop-fill {
  background-color: var(--color-bg-alt);
  margin-block: calc(var(--rule-fill) - var(--rule-section));
  padding-block: var(--rule-fill);
}

/*
 * 面の上下の空きは面の側(padding-block)が持つので、
 * 端のセクションは自分の外側の空きを持たない。
 * 面の中でセクションが2つ並ぶところは、いつも通り 24px + 24px。
 */
.shop-fill > .shop-section:first-child {
  padding-top: 0;
}

.shop-fill > .shop-section:last-child {
  padding-bottom: 0;
}

.shop-siblings__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

/* 左に写真、右に文字を並べる横長のカード */
.sibling-card {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--space-md);
  padding: var(--space-md);
  background-color: var(--color-bg);
}

.sibling-card__thumb {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--color-grayge);
}

.sibling-card__name {
  font: var(--type-name);
  letter-spacing: var(--ls-heading);
  color: var(--color-ink);
}

.sibling-card__kana {
  margin-top: var(--space-2xs);
  font: var(--type-caption);
  letter-spacing: var(--ls-caption);
  color: var(--color-text-sub);
}

.sibling-card .shop-tags {
  margin-top: var(--space-sm);
}

.sibling-card__hours {
  margin-top: var(--space-sm);
  font: var(--type-caption);
  letter-spacing: var(--ls-caption);
  color: var(--color-text-sub);
}


/* ---------- 周辺エリアの店舗 ---------- */

.shop-nearby__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.nearby-card__thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--color-grayge);
}

.nearby-card__area {
  /* 写真 → 説明。全ページ共通(tokens.css の --rule-caption) */
  margin-top: var(--rule-caption);
  font: var(--type-caption);
  /*
   * 1行だけなので行送りは詰める。
   * 下に付く見えない空きが減って、店名との間が指定どおりに近づく。
   * (4px の指定 + 上下の行送りぶんで、見た目およそ8px)
   */
  line-height: 1.2;
  letter-spacing: var(--ls-caption);
  color: var(--color-text-weak);
}

.nearby-card__name {
  margin-top: var(--space-2xs);
  font: var(--type-body);
  /*
   * 1行だけの店名なので、本文の行送り(1.9)は要らない。
   * 行送りが広いと、文字の上に見えない空きが乗って、
   * エリア名との間が指定した4pxよりずっと開いて見える。
   */
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}


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

@media (max-width: 1100px) {
  .shop-intro__inner {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: var(--space-2xl);
  }

  .shop-data__inner {
    grid-template-columns: 1fr;
    /*
     * 横並びが縦積みになると、左右の空き(--space-3xl)が
     * そのまま上下の空きとして出てしまい、地図の上だけ大きく空く。
     * 縦に積んだときは「セクションの中の区切り」= --rule-row に戻す。
     */
    gap: var(--rule-row);
  }

  .shop-menu__list {
    gap: var(--space-sm);
  }

  .shop-siblings__grid {
    grid-template-columns: 1fr;
  }
}


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

@media (max-width: 768px) {
  /*
   * セクションの空きは画面幅で変えない(tokens.css の方針)。
   * ここで 96px に上書きしていたため、狭い画面だけ
   * セクションの境目が 192px になっていた。
   * 広い画面と同じ 24px + 24px = 48px に戻す。
   */

  /*
   * 紹介文の「途中の改行」を無効にして、文章を流し込む。
   *
   * CMSの紹介文には、旧サイトの横幅に合わせて手で入れた改行が残っている。
   * 広い画面ではきれいに揃うが、狭い画面では1行が短くなるので
   * 「〜できる、」で切れて次の行が2文字だけ、といった妙な切れ方になる。
   *
   * br を display:none にすると改行が無効になり、文章はそのまま続けて流れる。
   * 段落の区切りは <br> ではなく <p> で作られている(wpautop)ので、
   * 段落は残る。日本語なので、つながった箇所に空白は要らない。
   */
  .shop-intro__text br {
    display: none;
  }

  /* ヒーローは2枚を縦に積む */
  .shop-hero {
    grid-template-columns: 1fr;
    height: auto;
    /* 上に重ねるロゴの位置の基準にする */
    position: relative;
  }

  .shop-hero__item {
    aspect-ratio: 4 / 3;
  }

  /*
   * 写真の高さは「画面幅の3/4」なので、たいてい小数になる(例 292.5px)。
   * 上下に積むと、その小数の位置で2枚が切り替わるため、
   * 継ぎ目に0.5pxほど地色(ほぼ白)がのぞいて、細い線に見える。
   * 2枚目を1pxだけ上に重ねて、その隙間を塞ぐ。
   */
  .shop-hero__item + .shop-hero__item {
    /* 広い画面の左右の重なりは解除して、上下で重ねる */
    margin-left: 0;
    margin-top: -1px;
  }

  /*
   * ロゴを白い箱に入れて、ヒーローの中央に重ねる。
   *
   * 写真は同じ高さで縦に2枚積むので、ヒーローの中央 = 2枚の境目。
   * 高さを数値で計算せず「50%」で置いているので、
   * 写真の比率を変えても、写真が1枚の店舗でも、ずれない。
   *
   * ロゴ画像は自分で15%の余白を持っているため、
   * 白い箱の側で余白を足す必要はない。
   */
  .shop-hero__logo {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: min(56%, 260px);
    aspect-ratio: 1 / 1;
    background-color: var(--color-white);
  }

  /*
   * ロゴ自体が色面で塗りつぶされているもの(四角や横長のベタ)は、
   * 白い下敷きを敷かない。
   *
   * 整えたロゴは全部15%の余白を持っているので、白い箱に入れると
   * 色面のまわりに必ずその15%ぶんの白が出て、額縁のように見える。
   * この手のロゴは自分で下地の色を持っていて写真の上でも読めるため、
   * 下敷きは要らない。どのロゴがそれに当たるかは
   * functions.php の potomak2026_shop_logo_is_solid() が持っている。
   */
  .shop-hero__logo.is-solid {
    background-color: transparent;
  }

  .shop-hero__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* ロゴはヒーローに出したので、左の列からは消す */
  .shop-intro__logo {
    display: none;
  }

  /* 1列に積む。ロゴが上、その下に本文 */
  .shop-intro__inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  /*
   * 狭い画面ではロゴがヒーローへ移るので、この列は空になる。
   * 空のまま置いておくと、そのぶんのすき間だけが残ってしまう。
   */
  .shop-intro__side {
    display: none;
  }

  .sns-links__item {
    width: 48px;
    height: 48px;
  }

  .sns-links__item svg {
    width: 22px;
    height: 22px;
  }

  .sns-links__text {
    font-size: 10px;
  }

  .shop-intro__buttons {
    flex-direction: column;
    gap: var(--space-sm);
    /* 縦積みでは中央ぞろえにしない(アイコンが真ん中に寄ってしまう) */
    align-items: stretch;
  }

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

  /* 縦積みなので、右端に寄せる指定は戻して左からそのまま並べる */
  .shop-intro__buttons .sns-links {
    margin-left: 0;
  }

  .shop-nearby__grid {
    grid-template-columns: 1fr;
    /* 縦に積むので、カードどうしはPCと同じ24pxで十分 */
    gap: var(--space-md);
  }

  .shop-data__row {
    flex-direction: column;
    gap: var(--space-2xs);
  }

  .shop-data__row dt {
    width: auto;
  }

  .sibling-card {
    grid-template-columns: 120px minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  /* 幅が足りないので、ボタンを縦に積んで横幅いっぱいにする */
  .shop-menu__list {
    flex-direction: column;
  }

  .menu-item {
    width: 100%;
  }
}