/* ============================================================
   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);
}

/* ページ内アクション（ボタン等） */
.page-actions {
  margin-top: 28px;
}
.page-actions .btn-pill { max-width: 320px; }

/* ------------------------------------------------------------
   フロアガイド（画像マップ＋フロアタブ）
   タブ見た目は 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);
}

/* ------------------------------------------------------------
   投稿 個別記事（SHOP NEWS / EVENT 詳細）
   ------------------------------------------------------------ */
.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;
}
.article-cat--shopnews { background: var(--color-accent-dark); }
.article-cat--event { background: var(--color-brand); }
.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);
}
.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; }
}

/* ------------------------------------------------------------
   駐車場・駐輪場（リスト／お得情報／店舗別割引）
   ------------------------------------------------------------ */
.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 1fr;
  gap: 8px 24px;
  align-items: start;
  padding: 20px 0;
  border-bottom: var(--border-light);
}
.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; }
.contact-form .cf7-hint {
  display: block;
  margin-top: 6px;
  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; }
}

/* ------------------------------------------------------------
   地図埋め込み（アクセス）— レスポンシブ枠
   ------------------------------------------------------------ */
.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; }
}