/* ============================================================
   page.css — 下層ページ共通（bohr: 追加handle 'page'）
   フロント以外（固定ページ/イベント詳細/アーカイブ等）で読み込む。
   ------------------------------------------------------------
   ★色・サイズは必ず tokens.css を参照。TOPと同じ部品（見出し・
     ボタン・カード）は common.css を流用し、ここには「下層特有の
     骨格」（見出し帯・パンくず・本文カラム・定義表）のみ書く。
   ============================================================ */

/* --- 下層のメイン枠 --- */
.page-main {
  padding-bottom: var(--space-section-sm);
}
/* パンくずの下～本文の間隔（見出し帯→本文リズムをTOPに合わせる） */
.page-main > .content-width { margin-top: var(--space-head-gap); }

/* ------------------------------------------------------------
   ページ ファーストビュー（全幅の写真帯・ダーク面）
   TOPのトンマナ継承: Jost英字＋頭文字アクセント＋和文サブ。
   背景写真＋ダークオーバーレイで可読性を確保（ヘッダー/フッターと同じ黒系）。
   ------------------------------------------------------------ */
.page-hero {
  position: relative;
  width: 100%;
  background-color: var(--color-brand);   /* 画像未取得時のフォールバック */
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.page-hero__overlay {
  position: absolute;
  inset: 0;
  /* 左を濃く→右を薄く。文字（左寄せ）の可読性を確保しつつ写真を見せる */
  background: linear-gradient(90deg, rgba(31,31,31,.78) 0%, rgba(31,31,31,.55) 45%, rgba(31,31,31,.35) 100%);
}
.page-hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(220px, 26vw, 340px);   /* PC実寸で240〜340px程度 */
  padding-block: 40px;
  color: var(--color-text-inverse);
}
.page-hero__en {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: var(--fs-section-head);        /* TOPセクション見出しと同値 */
  letter-spacing: var(--ls-section-head);
  line-height: 1;
  color: var(--color-text-inverse);
}
.page-hero__en .initial { color: var(--color-accent); }   /* ダーク面なので明るい赤で頭文字を立てる */
.page-hero__jp {
  margin-top: 16px;
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.08em;
  line-height: 1.4;
  color: var(--color-text-inverse);
}
@media (max-width: 767px) {
  .page-hero__inner { min-height: 168px; padding-block: 28px; }
  .page-hero__jp { font-size: 15px; margin-top: 12px; }
  .page-main > .content-width { margin-top: 32px; }
}

/* ------------------------------------------------------------
   パンくず（Breadcrumb NavXT / bcn_display）※FVの下・白地
   ------------------------------------------------------------ */
.breadcrumb {
  padding-block: 18px 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-gray);
}
.breadcrumb a { color: var(--color-gray); transition: color .2s; }
.breadcrumb a:hover { color: var(--color-nav-hover); }
.breadcrumb .sep { margin-inline: 8px; color: var(--color-gray-2); }

/* ------------------------------------------------------------
   本文セクション見出し（FVとは別の、本文エリア用の見出し）
   和文（主）＋英字（従）。TOPの赤アクセント作法を継承。
   ------------------------------------------------------------ */
.content-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  padding-left: 16px;
  border-left: 4px solid var(--color-accent-dark);   /* ブランドの赤（entry-content h2と統一） */
}
.content-head__jp {
  font-weight: 600;
  font-size: 24px;
  letter-spacing: 0.04em;
  line-height: 1.3;
}
.content-head__en {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.18em;
  line-height: 1;
  color: var(--color-gray);
  text-transform: uppercase;
}
.content-head + .content-head { margin-top: var(--space-section-sm); }  /* 同一ページ内の2つ目以降 */
@media (max-width: 767px) {
  .content-head { gap: 10px; margin-bottom: 20px; }
  .content-head__jp { font-size: 20px; }
  .content-head__en { font-size: 12px; }
}

/* ------------------------------------------------------------
   本文カラム（WYSIWYG the_content の共通タイポ）
   ------------------------------------------------------------ */
.entry-content {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text);
}
.entry-content > * + * { margin-top: var(--space-text); }

.entry-content h2 {
  margin-top: var(--space-section-sm);
  padding-left: 16px;
  border-left: 4px solid var(--color-accent-dark);   /* ブランドの赤で見出しを立てる */
  font-weight: 600;
  font-size: 24px;
  letter-spacing: 0.03em;
  line-height: 1.4;
}
.entry-content h2:first-child { margin-top: 0; }
.entry-content h3 {
  margin-top: 40px;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.03em;
  line-height: 1.5;
}
.entry-content h4 {
  margin-top: 32px;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.5;
}
.entry-content h2 + *,
.entry-content h3 + *,
.entry-content h4 + * { margin-top: var(--space-tight-lg); }

.entry-content a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.entry-content a:hover { color: var(--color-accent-dark); }
.entry-content strong { font-weight: 600; }

.entry-content ul,
.entry-content ol { padding-left: 1.4em; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li + li { margin-top: 6px; }
.entry-content li::marker { color: var(--color-gray); }

.entry-content img { max-width: 100%; height: auto; }

/* WYSIWYGの素のtable */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
}
.entry-content th,
.entry-content td {
  padding: 14px 16px;
  border: var(--border-light);
  text-align: left;
  vertical-align: top;
}
.entry-content th { background: var(--color-bg-off); font-weight: 600; white-space: nowrap; }

/* ------------------------------------------------------------
   定義表（会社概要など・label + value の2カラム）
   ------------------------------------------------------------ */
.def-table {
  border-top: var(--border-light);
}
.def-table__row {
  display: grid;
  grid-template-columns: 220px 1fr;
  border-bottom: var(--border-light);
}
.def-table__label {
  padding: 20px 24px;
  background: var(--color-bg-off);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.04em;
  line-height: 1.6;
}
.def-table__value {
  padding: 20px 24px;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}
.def-table__value a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
.def-table__value a:hover { color: var(--color-accent-dark); }
/* 未確定値の注記 */
.def-table__note {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 10px;
  background: var(--color-gray-light);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--color-gray);
  vertical-align: middle;
}
@media (max-width: 767px) {
  .def-table__row { grid-template-columns: 1fr; }
  .def-table__label { padding: 14px 16px; }
  .def-table__value { padding: 14px 16px; }
}

/* 店舗別営業時間：店名ラベルは左寄せ・リンク色 */
.def-table__label--shop {
  background: var(--color-bg);
  font-weight: 500;
}
.def-table__label--shop a {
  color: var(--color-text);
  transition: color .2s;
}
.def-table__label--shop a:hover { color: var(--color-accent); }

/* フロア小見出し（営業時間の店舗リスト） */
.hours-floor {
  margin-top: 40px;
  margin-bottom: 12px;
  display: inline-block;
  padding: 4px 16px;
  background: var(--color-brand);
  color: var(--color-text-inverse);
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.1em;
  line-height: 1.4;
}

/* 補足テキスト（表の下など） */
.page-note {
  margin-top: 24px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-gray);
}

/* ページ内アクション（ボタン等）
   ★2026-08-13修正: display:block のままだったので、複数ボタンが左端に密着して縦に積まれていた。
     さらに .btn-pill は幅320px固定＋右13pxに長矢印（52px）を敷くため、
     「万代シテイエリアの駐車場・駐輪場一覧」のような長いラベルが矢印に重なっていた。
   → 中央寄せの折り返し行にして、ボタンは中身に合わせて伸ばす。矢印ぶんの余白は右側に確保する。 */
.page-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 28px;
}
.page-actions .btn-pill {
  width: auto;                 /* 中身に合わせて伸びる（320px固定をやめる） */
  max-width: 100%;
  min-width: 240px;
  height: auto;                /* SPでラベルが2行になっても潰れない（高さ45px固定をやめる） */
  min-height: var(--btn-h);
  padding-block: 11px;
  padding-left: 32px;
  padding-right: 78px;         /* 長矢印（右13px・幅52px）に文字が重ならない幅 */
  line-height: 1.5;
  text-align: center;
}
/* 外部リンク用：長矢印は出さず、ラベル内の ↗（.btn-ext）だけで示す。
   矢印を二重に出すと何を指しているのか分からなくなるため。 */
.page-actions .btn-pill-ext { padding-right: 32px; }
.page-actions .btn-pill-ext::after { content: none; }

@media (max-width: 767px) {
  /* SPは1列。ボタン幅は親に追従させる */
  .page-actions { flex-direction: column; align-items: center; }
  .page-actions .btn-pill { width: 100%; max-width: 360px; min-width: 0; }
}

/* ------------------------------------------------------------
   フロアガイド（画像マップ＋フロアタブ）
   タブ見た目は common.css の .tab-bar/.tab-list/.tab-btn を流用
   ------------------------------------------------------------ */
.floor-panel { padding-top: 40px; }
.floor-map {
  width: 100%;
  margin-bottom: 32px;
  background: var(--color-bg-off);
  border: var(--border-light);
}
.floor-map img { display: block; width: 100%; height: auto; }
.floor-map__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(220px, 40vw, 420px);
  color: var(--color-gray);
  font-size: 15px;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 24px;
}
/* フロア店舗一覧（2〜3カラムの箇条書き） */
.floor-shop-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 40px;
  list-style: none;
}
.floor-shop-list li {
  border-bottom: var(--border-light);
}
.floor-shop-list a {
  display: block;
  padding: 16px 4px;
  font-size: 15px;
  letter-spacing: 0.03em;
  transition: color .2s;
}
.floor-shop-list a:hover { color: var(--color-accent); }
.floor-shop-ext { font-size: 12px; color: var(--color-gray); }
@media (max-width: 1023px) {
  .floor-shop-list { grid-template-columns: repeat(2, 1fr); gap: 0 24px; }
}
@media (max-width: 767px) {
  .floor-panel { padding-top: 28px; }
  .floor-shop-list { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   投稿一覧（SHOP NEWS / EVENT アーカイブ）カードグリッド
   カード部品は common.css（.card-item/.news-card/.post-*）を流用
   ------------------------------------------------------------ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--space-card-gap);
  row-gap: var(--space-card-row);
}
@media (max-width: 1023px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-card-gap-sm); }
}
@media (max-width: 767px) {
  .card-grid { grid-template-columns: 1fr 1fr; column-gap: 12px; row-gap: 40px; }
}

/* ページネーション（WP-PageNavi / paginate_links 両対応） */
.pagenavi {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: var(--space-section-sm);
}
.pagenavi a,
.pagenavi span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: var(--border-light);
  font-family: var(--font-en);
  font-size: 14px;
  letter-spacing: 0.04em;
  transition: background .2s, color .2s, border-color .2s;
}
.pagenavi a:hover { background: var(--color-bg-off); }
.pagenavi .current {
  background: var(--color-brand);
  color: var(--color-bg);
  border-color: var(--color-brand);
}

/* ------------------------------------------------------------
   投稿 個別記事（BP2 NEWS / SHOP NEWS / EVENT 詳細）
   2カラム：左＝本文／右＝ほかの記事（2026-08-13）
   1024px未満は縦積み。サイドバー300pxを割ると本文が読みづらい幅になるため、
   SP用の767pxではなく1024pxで切っている。
   ------------------------------------------------------------ */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 48px;
  align-items: start;
}
.article-layout .article { max-width: none; margin-inline: 0; }   /* 幅は列が決める */
/* ★スクロール追従（position:sticky）は入れない。
   本文を読んでいる間ずっと右側が付いてくる挙動が気になる、という指摘があったため
   （2026-08-13）。サイドバーは本文と一緒に自然に流れて消える。 */
@media (max-width: 1023px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-section-sm); }
}

.article { max-width: 800px; margin-inline: auto; }
.article-head { margin-bottom: 28px; }
.article-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.article-date {
  font-family: var(--font-base);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.05em;
  color: var(--color-gray);
}
.article-cat {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 12px;
  border-radius: 0 var(--radius-badge) var(--radius-badge) 0;
  background: var(--color-gray);
  color: var(--color-bg);
  font-family: var(--font-en);
  font-weight: 500;
  font-size: var(--fs-badge);
  letter-spacing: 0.12em;
}
/* TOPのカードバッジ（.post-cat-*）と同じ3階層の配色に揃える
   館＝黒 ／ 店舗＝ダークレッド ／ イベント＝グレー */
.article-cat--bp2news { background: var(--color-brand); }
.article-cat--shopnews { background: var(--color-accent-dark); }
.article-cat--event { background: var(--color-gray); }
.article-ttl {
  font-weight: 600;
  font-size: 26px;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.article-period {
  margin-top: 10px;
  font-size: 15px;
  color: var(--color-text);
}
/* どの店舗のお知らせかを本文冒頭で示す（SHOP NEWSのみ・ACF「この記事を出す店舗」） */
.article-shop { margin-top: 12px; font-size: 15px; }
.article-shop a {
  color: var(--color-accent-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.article-shop a:hover { color: var(--color-text); }
.article-thumb { margin-bottom: 32px; }
.article-thumb img { width: 100%; height: auto; }
.article-foot { margin-top: var(--space-section-sm); text-align: center; }
.article-foot .btn-pill { margin-inline: auto; }
@media (max-width: 767px) {
  .article-ttl { font-size: 21px; }
}

/* ------------------------------------------------------------
   投稿詳細の右カラム「ほかのお知らせ / ほかのイベント」（.psb = post sidebar）
   サムネイルは出さず日付＋タイトルのみ。店舗詳細の「この店舗からのお知らせ」と同じ流儀。
   ------------------------------------------------------------ */
.psb__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
  padding-bottom: 12px;
  border-bottom: var(--border-dark);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.05em;
}
.psb__en {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--color-gray);
}
.psb__list { list-style: none; margin: 0; padding: 0; }
.psb__item { border-bottom: var(--border-light); }
.psb__item a {
  display: block;
  padding: 14px 4px;
  color: inherit;
  text-decoration: none;
  transition: color .2s ease, background .2s ease;
}
.psb__item a:hover { color: var(--color-accent-dark); background: var(--color-bg-off); }
.psb__date {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--color-gray);
}
.psb__text { display: block; font-size: 14px; line-height: 1.6; }
.psb__more { margin-top: 16px; font-size: 14px; }
.psb__more a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text);
  text-decoration: none;
}
.psb__more a:hover { color: var(--color-accent-dark); }
@media (max-width: 1023px) {
  /* 縦積みのときは本文と同じ最大幅に合わせて中央に置く（横に広がりすぎるのを防ぐ） */
  .psb { max-width: 800px; margin-inline: auto; }
  /* 縦積みでは本文末尾の「一覧へ」ボタンがすぐ上に来るので、同じ行き先のリンクを重ねない */
  .psb__more { display: none; }
}

/* ------------------------------------------------------------
   駐車場・駐輪場（リスト／お得情報／店舗別割引）
   ------------------------------------------------------------ */
.lot-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 32px;
  list-style: none;
  border-top: var(--border-light);
}
.lot-list li {
  padding: 14px 4px;
  border-bottom: var(--border-light);
  font-size: 15px;
  line-height: 1.6;
}
@media (max-width: 767px) {
  .lot-list { grid-template-columns: 1fr; }
}

/* お得情報／カード特典の箱 */
.perk-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.perk {
  padding: 20px 22px;
  background: var(--color-bg-off);
  border-left: 3px solid var(--color-accent-dark);
}
.perk__ttl {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.perk__body {
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text);
}
@media (max-width: 767px) {
  .perk-list { grid-template-columns: 1fr; gap: 14px; }
}

/* ------------------------------------------------------------
   BPカード（カードごとのブロック）
   ------------------------------------------------------------ */
.card-block + .card-block { margin-top: 48px; }
/* カード見出し（券面画像＋名称＋注記） */
.card-block__top {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px;
  padding: 14px 18px;
  background: var(--color-brand);
  color: var(--color-text-inverse);
}
.card-block__face {
  flex-shrink: 0;
  width: 132px;                      /* 券面 190x110 を縮小表示 */
  line-height: 0;
}
.card-block__face img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
}
.card-block__meta { min-width: 0; }
.card-block__name {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.06em;
  line-height: 1.3;
}
.card-block__note {
  margin-top: 6px;
  font-family: var(--font-base);
  font-size: 12px;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--color-gray-light);
}
@media (max-width: 767px) {
  .card-block__top { gap: 14px; padding: 12px 14px; }
  .card-block__face { width: 96px; }
  .card-block__name { font-size: 17px; }
}

/* ------------------------------------------------------------
   お問い合わせ（Q&A アコーディオン ＋ CF7フォーム）
   ------------------------------------------------------------ */
.contact-lead { margin-bottom: 20px; }

/* Q&A（<details>アコーディオン） */
.faq-list { border-top: var(--border-light); }
.faq-item { border-bottom: var(--border-light); }
.faq-q {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 40px 18px 4px;
  position: relative;
  cursor: pointer;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  list-style: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 24px;
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: url(../img/chevron-down.svg) no-repeat center / 10px 10px;
  mask: url(../img/chevron-down.svg) no-repeat center / 10px 10px;
  rotate: -45deg;
  transition: rotate .2s;
  color: var(--color-gray);
}
.faq-item[open] .faq-q::after { rotate: 135deg; }
.faq-mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-brand);
  color: var(--color-bg);
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 14px;
}
.faq-mark--a { background: var(--color-accent-dark); }
.faq-a {
  display: flex;
  gap: 12px;
  padding: 0 4px 22px;
  font-size: 15px;
  line-height: var(--lh-base);
  color: var(--color-text);
}

/* CF7 フォーム */
.contact-notes {
  margin: 24px 0 40px;
  padding: 20px 24px;
  background: var(--color-bg-off);
  font-size: 13px;
  line-height: 1.9;
  color: var(--color-gray);
}
.contact-notes__ttl { font-weight: 600; margin-bottom: 6px; }
.contact-notes ul { padding-left: 1.2em; list-style: disc; }
.contact-notes a { color: var(--color-accent); text-decoration: underline; }

.contact-form .cf7-row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);   /* label + 入力欄（def-tableの220pxに合わせる） */
  gap: 8px 24px;
  align-items: start;
  padding: 20px 0;
  border-bottom: var(--border-light);
}
/* CF7のautopが行の中身を<p>1個で包むため、そのままではグリッドアイテムが
   <p>だけになり label と入力欄が220pxカラムに押し込まれる（右の1frが空になる）。
   <p>をボックスツリーから外して label／入力欄を直接グリッドアイテムにする。
   autopを無効化した環境でもこの指定は無害。 */
.contact-form .cf7-row > p { display: contents; }
.contact-form .cf7-row label {
  font-weight: 600;
  font-size: 15px;
  padding-top: 10px;
}
.contact-form .req {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 3px;
  background: var(--color-accent-dark);
  color: var(--color-bg);
  font-size: 11px;
  font-weight: 500;
  vertical-align: middle;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: var(--border-light);
  border-radius: 4px;
  font-family: var(--font-base);
  font-size: 16px;               /* iOSズーム防止で16px */
  line-height: 1.6;
  background: var(--color-bg);
  color: var(--color-text);
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-gray);
}
.contact-form textarea { min-height: 160px; resize: vertical; }
/* 桁数が決まっている項目は入る文字数に合わせて短くする（CF7が出すclassで指定） */
.contact-form .p-postal-code { max-width: 200px; }
.contact-form .wpcf7-tel { max-width: 340px; }
.contact-form .cf7-hint {
  display: block;
  grid-column: 2;                /* 入力欄カラムの下に置く（row-gap 8pxが効く） */
  font-size: 12px;
  color: var(--color-gray);
}
.contact-form .cf7-consent {
  margin: 28px 0;
  text-align: center;
  font-size: 15px;
}
.contact-form .cf7-submit { text-align: center; margin-top: 8px; }
.contact-form input.wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 320px;
  height: var(--btn-h);
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  color: var(--color-bg);
  font-family: var(--font-base);
  font-weight: 500;
  font-size: var(--fs-btn-jp);
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background .2s;
}
.contact-form input.wpcf7-submit:hover { background: var(--color-btn-hover); }
.contact-form .wpcf7-not-valid-tip { color: var(--color-accent-dark); font-size: 13px; }
.contact-form .wpcf7-response-output {
  margin: 20px 0 0 !important;
  padding: 14px 16px !important;
  font-size: 14px;
}
@media (max-width: 767px) {
  .contact-form .cf7-row { grid-template-columns: 1fr; padding: 16px 0; }
  .contact-form .cf7-row label { padding-top: 0; }
  .contact-form .cf7-hint { grid-column: auto; }   /* 1カラム時に2列目を作らせない */
  .contact-form .wpcf7-tel { max-width: none; }
}

/* ------------------------------------------------------------
   地図埋め込み（アクセス）— レスポンシブ枠
   ------------------------------------------------------------ */
.map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  margin-bottom: 40px;
  background: var(--color-gray-light);
  overflow: hidden;
}
.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
@media (max-width: 767px) {
  .map-embed { aspect-ratio: 4 / 3; margin-bottom: 28px; }
}

/* ============================================================
   T3（2026-08-12）で追加した要素
   下層ページの担当範囲をBP2固有に絞り、共通情報はBP1へリンクで委ねる構成にしたぶん
   ============================================================ */
/* カードの一行説明（対照表を廃止して代わりに置いたもの） */
.card-block__lead {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.8;
}
.card-block__link { margin-top: 12px; }
/* ★card-block__top はダーク面（--color-brand）。.link-arrow は既定で黒文字なので、
   そのままだと下線しか見えず文字が消える（T3で追加したときに踏んだ）。明示的に反転させる。 */
.card-block__top .link-arrow {
  color: var(--color-text-inverse);
  border-bottom-color: var(--color-gray);
}
.card-block__top .link-arrow:hover,
.card-block__top .link-arrow:focus-visible {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* 定義表の中の補足行（例: バス案内からBP1へ委ねる一文） */
.def-table__sub {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-gray);
}
.def-table__sub a {
  color: var(--color-accent-dark);
  text-decoration: underline;
}

/* 外部リンクを示す矢印（ボタン内） */
.btn-ext { margin-left: 4px; font-size: 12px; }

/* お得情報の見出し（駐車場・BPカードで主役になったので少し強く） */
.perk__ttl { font-weight: 600; letter-spacing: 0.03em; }