/* ============================================================
   shop.css — 店舗詳細（single-shop.php）専用（is_singular('shop')時のみ）
   ============================================================ */
.shop-detail { padding-block: var(--space-section-sm); }
.shop-detail__genre {
  margin-top: 12px;
  color: var(--color-gray);
  letter-spacing: 0.05em;
}
.shop-detail__body {
  display: grid;
  /* ★minmax(0,1fr)。既定の 1fr は最小値が min-content なので、中の
     写真スライダー（サムネ9枚）の最小幅にトラックが引き伸ばされて320pxで溢れる（T6-1） */
  grid-template-columns: 480px minmax(0, 1fr);
  gap: 40px;
  margin-top: 32px;
  align-items: start;
}
/* グリッド子の既定 min-width:auto を解除。これがないと overflow-x:auto が効かない */
.shop-detail__thumb,
.shop-detail__info { min-width: 0; }
.shop-detail__thumb img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}
.shop-detail__catch {
  font-weight: 600;
  font-size: var(--fs-card-title);
  letter-spacing: 0.05em;
}
.shop-detail__desc { margin-top: 16px; line-height: 1.9; }
/* 「上映スケジュールを見る」CTA（2026-08-28）
   .shop-detail__cta はCSS定義が1行も無く、sanitize.css の p{margin:0} で margin-top:0
   ＝説明文の最終行にボタンが直付けになっていた。直前の .shop-detail__desc も
   margin-bottom を持たないので、隙間は完全に 0px だった。
   直後の .shop-detail__meta が 28px なので同値にして desc→CTA→meta を上下対称にする。
   本文直下のCTAはサイト共通で .page-actions（page.css）＝28px。同じリズム。 */
.shop-detail__cta { margin-top: 28px; }
/* ラベルに ↗ が付いているので長矢印は二重表現。かつ11文字で320px中央寄せだと
   矢印に重なる。page-parking / page-bp-card の .btn-pill-ext と同じ考えで長矢印を消す。 */
.shop-detail__cta .btn-pill { padding-inline: 24px; }
.shop-detail__cta .btn-pill::after { content: none; }
.shop-detail__meta {
  margin-top: 28px;
  border-top: var(--border-light);
}
.shop-detail__meta dt { font-weight: 600; margin-top: 16px; }
.shop-detail__meta dd { margin: 4px 0 0; line-height: 1.6; }
.shop-detail__links { margin-top: 20px; }
.shop-detail__links a {
  color: var(--color-accent-dark);
  text-decoration: underline;
}
/* 外部リンクの ↗（page.css にも同じ指定があるが、店舗詳細では page.css を読まないため） */
.shop-detail__links .btn-ext { margin-left: 4px; font-size: 12px; text-decoration: none; }
.shop-detail__back { margin-top: 48px; }
.shop-detail__back .btn-pill { max-width: 240px; margin-inline: auto; }

/* ------------------------------------------------------------
   この店舗からのお知らせ（SHOP NEWSのうち当該店舗を指定した投稿）
   サムネイルは出さず、日付＋タイトルの行リストだけ（ユーザー要望）。
   1行1リンク・行全体がクリック領域。0件のときはPHP側でブロックごと出さない。
   ------------------------------------------------------------ */
.shop-news { margin-top: var(--space-section-sm); }
.shop-news__head {
  margin-bottom: 8px;
  padding-bottom: 12px;
  border-bottom: var(--border-dark);
  font-weight: 600;
  font-size: var(--fs-card-title);
  letter-spacing: 0.05em;
}
.shop-news__list { list-style: none; margin: 0; padding: 0; }
.shop-news__item { border-bottom: var(--border-light); }
.shop-news__item a {
  display: flex;
  gap: 20px;
  align-items: baseline;
  padding: 16px 4px;
  color: inherit;
  text-decoration: none;
  transition: color .2s ease, background .2s ease;
}
.shop-news__item a:hover { color: var(--color-accent-dark); background: var(--color-bg-off); }
.shop-news__date {
  flex: 0 0 auto;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--color-gray);
}
.shop-news__text { line-height: 1.6; }

/* ------------------------------------------------------------
   採用情報（id="recruit"）2026-09-16
   BP1の求人一覧 /recruit のリンクは https://www.bandai-bp.com/shop/{id}#recruit。
   /shop/{id} はBP2へ転送されるが、転送先にフラグメントが無いときブラウザは
   元の #recruit を引き継ぐため、このidだけでBP1側の既存リンクが着地する。
   → BP1側・CRMセンター様の改修は不要。

   格を下げる3点（2026-09-16・ユーザー判断）
   ①「一覧へ戻る」の下に置く（テンプレート側）＝本編の外に出す
   ② 見出しは小見出し扱い（14px・グレー）。お知らせ見出しと同格にしない
   ③ 表は13px・行間も詰める。幅も本文いっぱいをやめて 720px
   さらに職種・雇用形態だけ常時表示し、残りは .shop-recruit__more で畳む。
   ------------------------------------------------------------ */
.shop-recruit {
  margin-top: var(--space-section-sm);
  /* 本文いっぱいに広げると表が主要コンテンツに見える。左寄せで幅を絞る */
  max-width: 720px;
  /* #header は position:sticky・高さ --header-h。これが無いと BP1 からの着地時に
     見出しがヘッダーの下に潜る（このセクションは必ずアンカー着地する） */
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.shop-recruit__head {
  padding-bottom: 10px;
  border-bottom: var(--border-light);
  color: var(--color-gray);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.08em;
}
/* 定義リストを表組みに見せる。罫線は border-bottom 側に持たせて
   見出しの下線（__head）と二重にならないようにする */
.shop-recruit__meta {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  /* ★dl のブラウザ既定 margin:1em 0 を消す。sanitize.css に dl のリセットが無いため、
     これが無いと「採用情報」の下・トグルの下・表の末尾に16pxの隙間が入る。
     .shop-detail__meta は margin-top を上書きしているので気づきにくかった（下は空いたまま） */
  margin: 0;
  font-size: 13px;
}
.shop-recruit__meta dt,
.shop-recruit__meta dd { border-bottom: var(--border-light); }
.shop-recruit__meta dt { padding: 10px 12px 10px 4px; font-weight: 600; }
.shop-recruit__meta dd { margin: 0; padding: 10px 4px; line-height: 1.7; }
.shop-recruit__meta dd a {
  color: var(--color-accent-dark);
  text-decoration: underline;
}
/* 「勤務条件・応募先を見る」。<details> なのでJSが無くても開閉する。
   main.js の initRecruitAnchor は BP1 から #recruit で来たときに開くだけ */
.shop-recruit__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: var(--border-light);
  cursor: pointer;
  /* Safari/Chrome の既定マーカー（▶）を消す。list-style だけでは Safari に残る */
  list-style: none;
  color: var(--color-accent-dark);
  font-size: 13px;
  letter-spacing: 0.05em;
}
.shop-recruit__toggle::-webkit-details-marker { display: none; }
.shop-recruit__toggle:hover { text-decoration: underline; }
.shop-recruit__toggle::after { content: "＋"; font-size: 14px; line-height: 1; }
.shop-recruit__more[open] .shop-recruit__toggle::after { content: "−"; }
.shop-recruit__cta { margin-top: 16px; }
/* .shop-detail__cta と同じ扱い。ラベルに ↗ があるので長矢印は消す */
.shop-recruit__cta .btn-pill {
  max-width: 280px;
  margin-inline: 0;
  padding-inline: 24px;
}
.shop-recruit__cta .btn-pill::after { content: none; }
.shop-recruit__cta .btn-ext { margin-left: 4px; font-size: 12px; text-decoration: none; }

@media (max-width: 767px) {
  .shop-detail__body { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  /* SPは日付を上、タイトルを下に。横並びだと長いタイトルが2文字幅まで潰れる */
  .shop-news__item a { flex-direction: column; gap: 4px; padding: 14px 2px; }
  .shop-news__date { font-size: 13px; }
  /* 採用情報は縦積み。120pxの見出し列を残すと給与や仕事内容が数文字幅まで潰れる */
  .shop-recruit__meta { grid-template-columns: minmax(0, 1fr); }
  .shop-recruit__meta dt { padding: 10px 4px 0; border-bottom: none; }
  .shop-recruit__meta dd { padding: 2px 4px 10px; }
  .shop-recruit__cta .btn-pill { max-width: 100%; }
}