/* ============================================================
   common.css — 全ページ共通（bohr: handle 'theme-common' 相当）
   旧 layout.css + components.css を規約構成に統合。命名は bohr フラット式。
   ------------------------------------------------------------
   ※ カードギャラリー等の面組みは CSS Grid を使用（規約§7-1 の
     「flexboxで崩れにくく」の趣旨に沿う意図的な選択。float は不使用）。
     bohr の横並びユーティリティも下記に用意し、単純な行に使う。
   ============================================================ */

/* --- レイアウトユーティリティ（bohr流・float不使用） --- */
.flex-between { display: flex; flex-wrap: wrap; justify-content: space-between; }
.flex-start  { display: flex; flex-wrap: wrap; justify-content: flex-start; }

/* --- ページ内で一意な大枠は ID（bohr流・§6-1） --- */
#wrapper { width: 100%; }   /* bohrは min-width:1040px の固定幅だが、本案件は流動レスポンシブ（構築仕様§0.4/§6.5）のため踏襲しない */

/* ============================================================
   共通レイアウト（旧 layout.css）
   値はすべて tokens.css を参照（実測値のみ例外的にpx直書き→コメント明記）
   ============================================================ */

/* --- コンテナ（コンテンツ幅1040px・指示書実測） --- */
.content-width {
  width: 100%;
  max-width: calc(var(--container-max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- セクション共通の縦リズム（指示書: セクション上下間 基本160px） --- */
.section {
  padding-block: var(--space-section);
}
.section-sm {
  padding-block: var(--space-section-sm);
}

/* セクション見出し（Jost Medium 48px 字間15%・頭文字ダークレッド） */
.sec-ttl-box {
  margin-bottom: var(--space-head-gap);
  display: flex;
  align-items: baseline;
  gap: var(--space-tight);
  flex-wrap: wrap;
}
.sec-ttl {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: var(--fs-section-head);   /* 見出し英語48px（変換時に変数名が化けていたのを復元） */
  letter-spacing: var(--ls-section-head);
  line-height: 1;
}
.sec-ttl .initial {
  color: var(--color-accent-dark);
}
.sec-ttl-sub {
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 40px;   /* CINEMA（T-JOY新潟万代）実測40px */
  letter-spacing: 0.05em;
  line-height: 1;
}
@media (max-width: 767px) {
  .sec-ttl-sub { font-size: 22px; }
}

/* ============================================================
   ヘッダー（ダーク・§5.1／実測: h80・BLK・Jost 16 字間10%）
   ============================================================ */
#header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-header-bg);
  color: var(--color-header-text);
  height: var(--header-h);
}
.h-inner {
  display: flex;
  align-items: center;
  height: 100%;
  max-width: var(--frame-max);
  margin-inline: auto;
}
.h-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ロゴ共通（マーク＋店名テキスト）— ヘッダー/フッターで共用 */
.logo-mark {
  height: 46px;                 /* 63x60マークを視認しやすいサイズに */
  width: auto;
  flex-shrink: 0;
}
.logo-text {
  font-family: var(--font-base);
  font-weight: 300;             /* 細めのゴシック（Noto Sans JP Light） */
  font-size: 19px;
  letter-spacing: 0.22em;       /* ちょっとだけ字間を開けてかっこよく */
  line-height: 1.2;
  white-space: nowrap;
  color: var(--color-text-inverse);   /* ダーク面上の白文字 */
}
@media (max-width: 767px) {
  .logo-mark { height: 38px; }
  .logo-text { font-size: 15px; letter-spacing: 0.16em; }
}

/* グローバルナビ（PC・実測: Jost Medium 16px 字間10%） */
#gnav {
  margin-left: auto;
}
.gnav-list {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.6vw, 38px);   /* 実測間隔≒30-40px。中間幅は詰める（§6.5補完） */
}
.gnav-link {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: var(--fs-nav);
  letter-spacing: 0.1em;
  white-space: nowrap;
  transition: color .2s;
}
.gnav-link:hover,
.gnav-link.is-current {
  color: var(--color-nav-hover);   /* 指示書: メニューバー hover=赤 */
}

/* BP1サイトへ ボタン（実測: 150x34・角丸pill・オフホワイト枠） */
.h-bp1 {
  flex-shrink: 0;
  margin-left: clamp(16px, 2.5vw, 40px);
  margin-right: clamp(16px, 3.5vw, 50px);
}

/* ハンバーガー（SP/タブレットのみ表示） */
.gnav-toggle { display: none; }

/* 中間幅（1024〜1279）: Figmaに指定なし → §6.5で破綻なく圧縮 */
@media (min-width: 1024px) and (max-width: 1279px) {
  .h-logo img { height: 56px; }
  .gnav-link { font-size: 14px; letter-spacing: 0.06em; }
  .btn-bp1 { width: 130px; font-size: 14px; }
}

@media (max-width: 1023px) {
  .gnav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;                 /* タップ領域 最低44px（§6.5） */
    padding: 10px;
    margin-left: auto;
    margin-right: var(--gutter);
  }
  .gnav-toggle span {
    width: 24px; height: 2px; background: currentColor; display: block;
    transition: transform .25s, opacity .25s;
  }
  .gnav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .gnav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .gnav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  #gnav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    overflow-y: auto;
    background: var(--color-header-bg);
    transform: translateY(-120%);
    transition: transform .25s ease, visibility 0s linear .25s;  /* 閉じ切ってから不可視に */
    padding: 32px var(--gutter) 40px;
    margin-left: 0;
    visibility: hidden;
  }
  #gnav.is-open { visibility: visible; transition: transform .25s ease; }
  #gnav.is-open { transform: translateY(0); }
  .gnav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .gnav-link {
    display: block;
    padding: 14px 4px;             /* タップ領域確保 */
    border-bottom: 1px solid var(--color-gray);
  }
  .gnav-bp1-sp { margin-top: 24px; }
  /* .btn-bp1（components.css・後読み）の display:flex に勝つよう詳細度を上げる */
  #header .h-bp1 { display: none; }
}
@media (min-width: 1024px) {
  .gnav-bp1-sp { display: none; }
}

/* ============================================================
   フッター（ダーク・§5.2／実測: BLK・4カラムリンク・BP1ボタン）
   ============================================================ */
#footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
  padding-block: 79px 100px;       /* 実測: ロゴtop79・全体h597 */
}
.f-inner {
  display: grid;
  /* 実測: ロゴ=左端0 / カラム開始位置 353・614・925 / 右端1240（=1440-200） */
  grid-template-columns: 353px 261px 311px 1fr;
  align-items: start;
  max-width: var(--frame-max);
  margin-inline: auto;
  padding-right: 200px;
}
.f-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.f-nav-group + .f-nav-group { margin-top: 40px; }  /* 実測: リスト末尾→次見出し */

.f-nav-ttl {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: var(--fs-footer-head);
  letter-spacing: 0.15em;
  line-height: 1;
  color: var(--color-bg);          /* 実測: 見出しは真っ白 */
}
.f-nav-ttl .initial { color: var(--color-accent); }  /* 実測: 頭文字は赤 #ca242a */

.f-nav-list {
  margin-top: 16px;                /* 実測: 見出し→リンク */
  line-height: 1;
}
.f-nav-list li + li { margin-top: 20px; }  /* 実測: 行送り32px（12px文字+20） */
.f-nav-list a {
  display: inline-block;
  font-size: var(--fs-footer-link);
  letter-spacing: 0.15em;
  transition: color .2s;
}
.f-nav-list a:hover { color: var(--color-nav-hover); }  /* 指示書: hover=赤文字 */

.f-bp1 {
  grid-column: 4;
  justify-self: start;
  width: 320px;                    /* 実測 */
  margin-top: 60px;                /* 実測: FLOOR GUIDEリスト下端→ボタン452 */
}

/* コピーライト（© BANDAI CITY BP2. All Rights Reserved.） */
.f-copyright {
  max-width: var(--frame-max);
  margin: 56px auto 0;
  padding-inline: var(--gutter);
  font-size: var(--fs-footer-link);
  letter-spacing: 0.08em;
  color: var(--color-gray-light);
  text-align: center;
}

@media (max-width: 1279px) {
  .f-inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 48px;
    padding-inline: var(--gutter);
  }
  .f-logo { grid-column: 1 / -1; margin-top: 0; }
  .f-bp1 { grid-column: 1 / -1; margin-top: 8px; }
}
@media (max-width: 767px) {
  #footer { padding-block: 56px 64px; }
  /* SPも全縦積みにせず2カラム（ユーザー要望）。ロゴとBP1ボタンは2列ぶち抜き */
  .f-inner {
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    row-gap: 36px;
  }
  .f-logo { grid-column: 1 / -1; }
  .f-bp1 { grid-column: 1 / -1; justify-self: stretch; width: 100%; max-width: 320px; margin-inline: auto; }
}


/* ============================================================
   共通部品（旧 components.css）
   実測値（Figma）に基づく。px直書きは実測値のみ・コメント明記。
   ============================================================ */

/* ------------------------------------------------------------
   ピル型ボタン（実測: w320 h45 r24・和文16px Medium 字間5%・長矢印）
   ------------------------------------------------------------ */
.btn-pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 320px;                /* 実測（カード内では親幅に追従） */
  height: var(--btn-h);
  border-radius: var(--radius-pill);
  font-family: var(--font-base);
  font-weight: 500;
  font-size: var(--fs-btn-jp);
  letter-spacing: 0.05em;
  background: var(--color-brand);
  color: var(--color-bg);
  transition: background .2s, color .2s, border-color .2s;
}
/* 長矢印（SVGをmaskで currentColor 化） */
.btn-pill::after {
  content: "";
  position: absolute;
  right: 13px;                     /* 実測: left255/320 → 右13px */
  top: 50%;
  width: 52px;                     /* 実測 */
  height: 9px;
  transform: translateY(-50%);
  background: currentColor;
  -webkit-mask: url(../img/arrow-btn.svg) no-repeat center / contain;
  mask: url(../img/arrow-btn.svg) no-repeat center / contain;
}
.btn-pill:hover { background: var(--color-btn-hover); }   /* 指示書: hover=グレー */

/* ライトグレー版（RESTAURANT・実測: #ddd地 黒文字 → hover ダークレッド白文字） */
.btn-pill-light {
  background: var(--color-gray-light);
  color: var(--color-text);
}
.btn-pill-light:hover {
  background: var(--color-btn-light-hover);
  color: var(--color-bg);
}

/* 枠線版（フッターBP1・実測: BLK地 #ddd枠 白文字） */
.btn-pill-ghost {
  background: transparent;
  border: var(--border-light);
  color: var(--color-text-inverse);
}
.btn-pill-ghost:hover {
  background: var(--color-bg-off);
  color: var(--color-text);
}

/* ヘッダーのBP1ボタン（実測: 150x34 r24 オフホワイト枠・矢印小） */
.btn-bp1 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 34px;
  border-radius: var(--radius-pill);
  border: var(--border-inverse);
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 16px;                 /* 実測 */
  letter-spacing: 0.03em;
  color: var(--color-text-inverse);
  padding-right: 18px;
  transition: background .2s, color .2s;
}
.btn-bp1::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 24px;                     /* 実測: 23.5px */
  height: 5px;
  transform: translateY(-50%);
  background: currentColor;
  -webkit-mask: url(../img/arrow-btn.svg) no-repeat center / contain;
  mask: url(../img/arrow-btn.svg) no-repeat center / contain;
}
.btn-bp1:hover {
  background: var(--color-bg-off);
  color: var(--color-text);
}

/* ------------------------------------------------------------
   フロア表記チップ（実測: 88x25・1px枠・16px Regular 字間5%）
   ------------------------------------------------------------ */
.floor-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--chip-w);
  height: var(--chip-h);
  border: var(--border-dark);
  font-size: 16px;                 /* 実測 */
  letter-spacing: 0.05em;
  line-height: 1;
}
.floor-chip-inverse { border: var(--border-inverse); }

/* ------------------------------------------------------------
   カード共通（CINEMA / NEWS：w320・正方形画像・日付・タイトル・ボタン）
   ★画像は縦長・正方形どちらでも崩れない（§5.4 必須要件）
   ------------------------------------------------------------ */
.card-item {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* タイトルが2行になってもボタンがカード下端で揃うように */
.card-item .post-link {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.post-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;             /* 実測: 320x320 正方形基準の枠 */
  background: var(--color-gray-light);
  overflow: hidden;
}
.post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;               /* 縦長・横長・正方形いずれもトリミング充填 */
  transform: scale(1);             /* ★基点をscale(1)に固定（none→scale間の1pxズレを防止） */
  transform-origin: center center;
  backface-visibility: hidden;
  transition: transform .3s ease, opacity .3s ease;
}
/* ロゴ画像カード用（白地に余白をとって contain 表示・SHOP&CULTURE実測） */
.post-thumb-contain { background: var(--color-bg); }
.post-thumb-contain img {
  object-fit: contain;
  padding: 18%;
}

/* 指示書: ニュースカード hover=透過70%・拡大 */
.news-card a.post-link:hover .post-thumb img,
a.post-link:hover .post-thumb img {
  opacity: .7;
  transform: scale(1.05);
}
.post-date {
  margin-top: var(--space-text-lg);    /* 実測: 画像→日付 20px */
  font-weight: 600;                     /* Noto Sans JP SemiBold */
  font-size: var(--fs-date);
  letter-spacing: 0.05em;
  line-height: 1;
}
.post-ttl {
  margin-top: var(--space-tight-lg);   /* 実測: 日付→タイトル 10px */
  font-weight: 500;                     /* 指示書: 映画名・タイトル＝Medium（旧600→太すぎのため修正） */
  font-size: var(--fs-card-title);
  letter-spacing: 0.05em;
  line-height: 1.45;
  min-height: calc(var(--fs-card-title) * 1.45 * 2);  /* 2行分を確保して段を揃える */
}
.post-ttl { margin-bottom: 24px; }  /* 実測: タイトル→ボタン（最小ギャップ） */
.post-btn {
  margin-top: auto;                    /* ボタンは常にカード下端で段が揃う */
}
.card-item .btn-pill { max-width: none; }   /* カード内はカード幅に追従 */

/* カテゴリバッジ（NEWS・実測: 112x24・右下角丸16・Jost 12px 字間15%） */
.post-cat {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 24px;
  border-bottom-right-radius: var(--radius-badge);
  font-family: var(--font-en);
  font-weight: 500;
  font-size: var(--fs-badge);
  letter-spacing: 0.15em;
  color: var(--color-bg);
  background: var(--color-gray);
}
.post-cat-shopnews { background: var(--color-accent-dark); }

/* ------------------------------------------------------------
   店舗カード（RESTAURANT / SHOP&CULTURE：w242・チップ＋店名＋ボタン）
   ------------------------------------------------------------ */
.shop-card .post-thumb { aspect-ratio: 1 / 1; }        /* 実測: 242x242 */
.shop-card-shadow .post-thumb { box-shadow: var(--shadow-card); }  /* SHOP&CULTURE実測 */
.shop-card .post-floor-box { margin-top: var(--space-text-lg); }  /* 実測: 画像→チップ 20px */
.shop-card .shop-name {
  margin-top: var(--space-text);       /* 実測: チップ→店名 16px */
  font-weight: 500;                     /* 指示書: 店名＝Medium（旧600→太すぎのため修正） */
  font-size: var(--fs-card-title-sm);
  letter-spacing: 0.05em;
  line-height: 1.4;
}
.shop-card .shop-name-sm { font-size: var(--fs-card-title-xs); }  /* SHOP&CULTURE 16px */
.shop-card .shop-name { margin-bottom: 32px; }  /* 実測: 店名→ボタンの最小ギャップ */

/* ------------------------------------------------------------
   タブ（NEWS & MEDIA・§6.3 実測:
   w260 / 通常h30 グレー / active h35 ダークレッド / 上角丸15 / 黒1px罫）
   ------------------------------------------------------------ */
.tab-bar {
  border-bottom: var(--border-dark);   /* 実測: 全幅の黒1px線 */
}
.tab-list {
  display: flex;
  align-items: flex-end;
  /* コンテンツ幅（content-width）と左右を厳密に揃える（旧: container-maxのみで40px狭かった） */
  max-width: calc(var(--container-max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  min-height: 35px;   /* activeの高さで固定＝タブ拡縮で下の要素が上下にブレない */
}
.tab-btn {
  width: 260px;                        /* 実測（4本で1040） */
  height: 30px;
  flex: 1 1 0;
  border: var(--border-dark);
  border-bottom: none;
  border-radius: var(--radius-tab) var(--radius-tab) 0 0;
  background: var(--color-gray);
  color: var(--color-bg);
  font-family: var(--font-en);
  font-weight: 500;
  font-size: var(--fs-tab);
  letter-spacing: 0.2em;
  line-height: 1;
  white-space: nowrap;
  transition: background .2s, height .2s;
}
/* hoverで拡大＋色変化、クリック（selected）でそのサイズ・色のまま固定（ユーザー要望） */
.tab-btn:hover,
.tab-btn[aria-selected="true"] {
  background: var(--color-accent-dark);   /* 指示書: hover/active=ダークレッド */
  height: 35px;                           /* 実測: activeは5px高い。hover時も同じだけ拡大 */
}
.tab-panel[hidden] { display: none; }

@media (max-width: 767px) {
  /* SPは横スクロールで切れて分かりづらいため、2×2で全タブを常時表示（ユーザー要望） */
  .tab-bar { border-bottom: none; }          /* 2段になるため連結罫線は外す */
  .tab-list {
    flex-wrap: wrap;
    gap: 6px;
  }
  .tab-btn {
    flex: 1 1 calc(50% - 3px);               /* 2列×2段で4タブすべて表示 */
    width: auto;
    height: 40px;                            /* タップ領域確保 */
    font-size: 12px;
    letter-spacing: 0.12em;
    border-radius: var(--radius-tab);        /* 単独ボタン化するので4隅角丸 */
    border-bottom: var(--border-dark);
  }
  .tab-btn[aria-selected="true"] { height: 40px; }  /* SPは高さ差を付けない */
}

/* ------------------------------------------------------------
   導線カード（施設概要アンカー / ACCESS・PARKING・HOURS）
   実測: 217x145・r5・1px枠・アイコン＋Jost Medium 20px 字間15%＋チェブロン
   ------------------------------------------------------------ */
.anchor-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: var(--anchor-card-w);
  height: var(--anchor-card-h);
  border-radius: var(--radius-card);
  padding-top: 24px;                   /* 実測: アイコンtop23-29 */
  transition: background .25s, color .25s;
}
.anchor-card-icon {
  height: 46px;                        /* 実測 */
  display: flex;
  align-items: center;
}
.anchor-card-icon svg { height: 100%; width: auto; }
.anchor-card-label {
  margin-top: 12px;                    /* 実測: アイコン下→ラベル */
  font-family: var(--font-en);
  font-weight: 500;
  font-size: var(--fs-btn-en);
  letter-spacing: 0.15em;
  line-height: 1;
}
.anchor-card-chevron {
  position: absolute;
  left: 50%;
  bottom: 14px;                        /* 実測: top108.9/145 */
  width: 14px;
  height: 14px;
  transform: translateX(-50%);
  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;
  /* chevron-down.svg — -45度回転で下向き「∨」に（Figma実装と同じ） */
  rotate: -45deg;
}

/* ダーク面用（施設概要・実測: #ddd枠 #ddd文字 → hover グレー面） */
.anchor-card-dark {
  border: var(--border-light);
  color: var(--color-gray-light);
}
.anchor-card-dark:hover { background: var(--color-gray); color: var(--color-bg-off); }

/* ライト面用（ACCESS等・実測: BLK枠 BLK文字 → hover グレー面白文字） */
.anchor-card-light {
  border: var(--border-dark);
  color: var(--color-text);
}
.anchor-card-light:hover { background: var(--color-btn-hover); color: var(--color-bg-off); }

/* ------------------------------------------------------------
   カルーセル矢印（RESTAURANT・実測: 16px円形・カード中央高さ）
   ------------------------------------------------------------ */
.carousel {
  position: relative;
}
/* RESTAURANT: 4件がPC幅にちょうど収まるため矢印廃止→ふつうの4カラム（SPは2カラム・home.css） */
.carousel-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--space-card-gap-sm);
}
.carousel-arrow {
  position: absolute;
  top: 105px;                          /* 実測: 画像(242px)の中央付近 */
  width: 32px;
  height: 32px;                        /* タップ領域確保（表示は16px相当） */
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-bg-off);
  z-index: 2;
}
.carousel-arrow svg { width: 16px; height: 16px; }     /* 実測 */
.carousel-arrow-prev { left: 2px; }
.carousel-arrow-next { right: 2px; transform: scaleX(-1); }
.carousel-arrow:hover { color: var(--color-bg); }

/* ------------------------------------------------------------
   CINEMA用 SPカルーセル（PCは card-list の3列グリッドのまま。
   SPのみ横スクロール＋矢印。「スライドできる」ことが伝わるよう次カードを覗かせる）
   ------------------------------------------------------------ */
.cinema-carousel { position: relative; }
.cinema-carousel .carousel-arrow { display: none; }   /* PCでは非表示（3列グリッドのため） */

@media (max-width: 767px) {
  .cinema-carousel .carousel-scroll {
    display: flex;
    grid-template-columns: none;         /* card-listのgrid指定を打ち消す */
    max-width: none;
    margin-inline: 0;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .cinema-carousel .carousel-scroll::-webkit-scrollbar { display: none; }
  .cinema-carousel .carousel-scroll > .card-item {
    flex: 0 0 78%;                        /* 次のカードが覗く＝スワイプ可能の合図 */
    scroll-snap-align: center;
  }
  .cinema-carousel .carousel-arrow {
    display: flex;
    top: 39%;                            /* カード画像の中央付近 */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(31, 31, 31, .55);   /* SPで視認しやすいよう円背景 */
    color: var(--color-bg);
  }
  .cinema-carousel .carousel-arrow svg { width: 22px; height: 22px; }
  .cinema-carousel .carousel-arrow-prev { left: 4px; }
  .cinema-carousel .carousel-arrow-next { right: 4px; }
}

/* RESTAURANT: PCはカルーセル、SPは2カラムで全件表示（ユーザー要望） */
@media (max-width: 767px) {
  #restaurant .carousel-track {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: auto;
    column-gap: 12px;
    row-gap: 40px;
    overflow: visible;
  }
  #restaurant .carousel-arrow { display: none; }
}

/* NEWS/EVENT 空状態 */
.news-empty { grid-column: 1 / -1; text-align: center; padding: 40px 0; color: var(--color-gray); }

/* ============================================================
   フロアガイド（縦フロアセレクター＋大マップ＋店舗一覧）
   ホバー/クリックでフロア切替（JS: initFloorGuide）。TOP・専用ページ共用。
   ============================================================ */
.fg {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 32px;
  align-items: start;
}
/* 縦フロアセレクター（エレベーターの階数表示風・3F→1F） */
.fg__selector {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fg__floor-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 72px;
  border: var(--border-dark);
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}
.fg__floor-num {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: 0.1em;
  line-height: 1;
}
.fg__floor-btn:hover,
.fg__floor-btn.is-active {
  background: var(--color-brand);
  color: var(--color-bg);
  border-color: var(--color-brand);
}

/* ステージ：アクティブなフロアのみ「マップ｜番号リスト」の2カラムで表示 */
.fg__stage { position: relative; min-width: 0; }
.fg__panel { display: none; }
.fg__panel.is-active {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 28px;
  align-items: start;
  animation: fgFade .35s ease;
}
@keyframes fgFade { from { opacity: 0; } to { opacity: 1; } }

/* マップ（ホットスポットの基準・relative） */
.fg__mapwrap { min-width: 0; }
.fg__map {
  position: relative;
  background: var(--color-bg-off);
  border: var(--border-light);
}
.fg__map > img { display: block; width: 100%; height: auto; }
.fg__map-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(240px, 42vw, 460px);
  color: var(--color-gray);
  font-size: 15px;
  letter-spacing: 0.04em;
  padding: 24px;
}
.fg__map-hint { margin-top: 10px; font-size: 12px; line-height: 1.6; color: var(--color-gray); }

/* 番号ホットスポット（マップ上の各店舗位置） */
.fg__hot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.fg__hot-dot {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(31,31,31,.55);
  color: var(--color-bg);
  border: 2px solid rgba(255,255,255,.9);
  font-family: var(--font-en); font-weight: 500; font-size: 13px; line-height: 1;
  transition: background .2s, transform .2s;
}
.fg__hot-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--color-brand);
  color: var(--color-bg);
  font-size: 12px; letter-spacing: .02em;
  padding: 5px 10px; border-radius: 4px;
  opacity: 0; visibility: hidden;
  transition: opacity .2s;
  pointer-events: none; z-index: 3;
}
.fg__hot-tip::after {
  content: ""; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--color-brand);
}
a.fg__hot { cursor: pointer; }
a.fg__hot:hover .fg__hot-dot,
a.fg__hot:focus-visible .fg__hot-dot,
.fg__hot.is-hot .fg__hot-dot { background: var(--color-accent-dark); transform: scale(1.15); }
a.fg__hot:hover .fg__hot-tip,
a.fg__hot:focus-visible .fg__hot-tip,
.fg__hot.is-hot .fg__hot-tip { opacity: 1; visibility: visible; }

/* 番号リスト（常時表示・スマホの主導線） */
.fg__list { min-width: 0; }
.fg__list-ttl { margin-bottom: 12px; }
.fg__srlist { list-style: none; border-top: var(--border-light); }
.fg__srow {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 6px;
  border-bottom: var(--border-light);
  transition: background .2s;
}
.fg__srow:hover, .fg__srow.is-hot { background: var(--color-bg-off); }
.fg__badge {
  flex-shrink: 0;
  display: 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: 13px; line-height: 1;
  transition: background .2s;
}
.fg__srow:hover .fg__badge, .fg__srow.is-hot .fg__badge { background: var(--color-accent-dark); }
.fg__srtext { min-width: 0; }
.fg__srname { display: block; font-size: 15px; font-weight: 500; letter-spacing: .02em; line-height: 1.4; color: var(--color-text); }
.fg__srext { font-size: 12px; color: var(--color-gray); margin-left: 4px; }
.fg__srgenre { display: block; font-size: 12px; color: var(--color-gray); margin-top: 2px; }

/* タブレット：マップとリストを縦積み */
@media (max-width: 1023px) {
  .fg__panel.is-active { grid-template-columns: 1fr; gap: 24px; }
}
/* スマホ：セレクターを横並び。ツールチップは使わず一覧タップを主導線に */
@media (max-width: 767px) {
  .fg { grid-template-columns: 1fr; gap: 20px; }
  .fg__selector { flex-direction: row; gap: 8px; }
  .fg__floor-btn { height: 52px; }
  .fg__floor-num { font-size: 22px; }
  .fg__hot { width: 30px; height: 30px; }
  .fg__hot-dot { width: 24px; height: 24px; font-size: 12px; }
  .fg__hot-tip { display: none; }
}

/* ============================================================
   フッター上バナーセクション（関連リンクのバナー群・全ページ共通）
   画像はいずれも約3.75:1。均一グリッドで“バナーウォール”に。
   ============================================================ */
.footer-banners {
  padding-block: 56px;
  background: var(--color-bg);          /* フッター(黒)の直前は白面で区切る */
  border-top: var(--border-light);
}
.fbnr-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.fbnr {
  display: block;
  border: var(--border-light);
  background: var(--color-bg);
  transition: box-shadow .2s ease, transform .2s ease;
}
.fbnr img {
  display: block;
  width: 100%;
  height: auto;                          /* 元画像が3.75:1で統一のため高さは自動で揃う */
}
a.fbnr:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.fbnr--nolink { cursor: default; }
@media (max-width: 1023px) {
  .fbnr-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .footer-banners { padding-block: 40px; }
  .fbnr-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ============================================================
   モバイルメニュー内の INFORMATION（下層ページ）
   PCは非表示（フッターで導線を確保）。ハンバーガー内のみ表示。
   ============================================================ */
.gnav-info-group { display: none; }
@media (max-width: 1023px) {
  .gnav-info-group { display: block; margin-top: 8px; }
  .gnav-info-ttl {
    font-family: var(--font-en);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.15em;
    color: var(--color-gray-2);
    padding: 18px 4px 8px;
  }
  .gnav-info { display: block; }
  .gnav-info-link {
    display: block;
    padding: 12px 4px 12px 16px;      /* 主要ナビより一段下げてサブ扱いに */
    font-size: 14px;
    letter-spacing: 0.02em;
    color: var(--color-header-text);
    border-bottom: 1px solid var(--color-gray);
    transition: color .2s;
  }
  .gnav-info-link:hover { color: var(--color-nav-hover); }
}