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

/* ============================================================
   和文の折り返し（禁則処理）2026-08-28
   既定の line-break:auto は長音符「ー」や小書き仮名「ャ」を行頭に置いてしまう。
   実測（iPhone 15 Pro / 幅393px）:
     「カルチャ／ーも。」（キャッチ）／「フレッシュネスバ／ーガー」（店舗名カード）
   strict は JLREQ の禁則に従い、ー・ぁぃぅっゃゅょ・〜 などを行頭に置かない。
   店舗名やお知らせタイトルはDB由来でマークアップを足せないため、CSSで一括して効かせる。
   ※全要素に当てても改行位置が変わるだけで、はみ出しは発生しないことを実測で確認済み。
   ============================================================ */
body { line-break: strict; }

/* 語のまとまりを「改行させない単位」にするユーティリティ。
   strict でも語中改行を防げないケース（カルチャー等、語そのものが長い）で使う。
   inline-block なので、まとまりの境目だけが改行候補になる。 */
.jp-nobr { display: inline-block; }

/* --- ページ内で一意な大枠は 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;
  /* ロゴに詰め寄らないための最小の余白（BILLBOARD PLACE 表記でボタンが広くなったため） */
  padding-left: 24px;
}
.gnav-list {
  display: flex;
  align-items: center;
  /* 実測間隔≒30-40px だったが、ボタン表記を BILLBOARD PLACE に変更して
     横幅が61px増えたため、全幅で少し詰めてロゴとの接触を防ぐ（2026-08-24） */
  gap: clamp(14px, 2vw, 32px);
}
.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 → 表記変更に伴い可変幅・下の .btn-bp1 参照） */
.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) {
  /* 基本46pxより大きい56pxになっていたが、この帯は横幅が最も厳しいので縮める */
  .h-logo img { height: 40px; }
  .gnav-link { font-size: 14px; letter-spacing: 0.06em; }
  /* ちょうど1024pxでヘッダーが27px溢れていた（BP1ボタンが画面外）。
     clamp のvw依存で余白が広がりすぎるため、この帯だけ固定値に落として詰める（T6-1で検出） */
  /* ボタンの表記を「BILLBOARD PLACE」に変えて横幅が増えたため、
     ロゴ字送りとナビ間隔をさらに詰めてロゴとナビの接触を防ぐ（2026-08-24） */
  .gnav-list { gap: 14px; }
  .h-bp1 { margin-left: 14px; margin-right: 18px; }
  .logo-text { font-size: 15px; letter-spacing: 0.06em; }
}

@media (max-width: 1023px) {
  /* ロゴが左端にくっつかないよう内側余白（右のハンバーガー余白と対称に・2026-08-12 FB） */
  .h-inner { padding-left: var(--gutter); }

  .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;
    transform-origin: center;
    transition: transform .38s cubic-bezier(.65,0,.35,1), opacity .2s ease, width .38s cubic-bezier(.65,0,.35,1);
  }
  .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; width: 0; }
  .gnav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* ------------------------------------------------------------
     モバイルメニュー：すりガラス（半透明＋ぼかし）でページが薄く透ける。
     可読性を担保するため不透明度は0.92まで確保し、blur非対応環境では
     @supports で不透明背景にフォールバックする。
     ------------------------------------------------------------ */
  #gnav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* 透け感と可読性の両立：
       ★可読性は「重ねる色そのもの」で担保する（0.78＝白背景に重ねても約rgb(72,72,72)＝
         白文字とのコントラスト比 8:1超）。backdrop-filter が効かない／合成が弱い環境でも
         文字が読めなくならない。blur/saturate は“効けば綺麗”な上乗せに留める。 */
    background: linear-gradient(180deg, rgba(22,22,22,.76) 0%, rgba(16,16,16,.84) 100%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
    /* 上から滑り込む＋わずかにフェード */
    opacity: 0;
    transform: translateY(-14px);
    transition: opacity .38s ease, transform .44s cubic-bezier(.22,1,.36,1), visibility 0s linear .44s;
    padding: 34px var(--gutter) 48px;
    margin-left: 0;
    visibility: hidden;
  }
  /* 背景色だけで可読性が成立する設計のため、blur非対応環境でも
     そのまま（半透明のまま）で問題なし＝@supports の切り分けは不要 */
  #gnav.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: opacity .38s ease, transform .44s cubic-bezier(.22,1,.36,1);
  }

  .gnav-list { flex-direction: column; align-items: stretch; gap: 0; }

  /* 各項目を時間差でふわっと立ち上げる（開いた時だけ） */
  .gnav-list > li {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .45s ease, transform .5s cubic-bezier(.22,1,.36,1);
  }
  #gnav.is-open .gnav-list > li { opacity: 1; transform: translateY(0); }
  #gnav.is-open .gnav-list > li:nth-child(1) { transition-delay: .10s; }
  #gnav.is-open .gnav-list > li:nth-child(2) { transition-delay: .16s; }
  #gnav.is-open .gnav-list > li:nth-child(3) { transition-delay: .22s; }
  #gnav.is-open .gnav-list > li:nth-child(4) { transition-delay: .28s; }
  #gnav.is-open .gnav-list > li:nth-child(5) { transition-delay: .34s; }
  #gnav.is-open .gnav-list > li:nth-child(6) { transition-delay: .40s; }
  #gnav.is-open .gnav-list > li:nth-child(7) { transition-delay: .46s; }

  /* 主要ナビのリンク：下線が左から伸びるインジケータ付き */
  .gnav-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 4px;             /* タップ領域確保 */
    border-bottom: 1px solid rgba(255,255,255,.14);
    transition: color .25s ease, padding-left .3s ease;
  }
  .gnav-link::after {
    content: "";
    position: absolute;
    left: 0; bottom: -1px;
    width: 0; height: 1px;
    background: var(--color-accent);
    transition: width .35s cubic-bezier(.22,1,.36,1);
  }
  .gnav-link:hover, .gnav-link:focus-visible { padding-left: 10px; }
  .gnav-link:hover::after, .gnav-link:focus-visible::after { width: 100%; }

  .gnav-bp1-sp { margin-top: 28px; }
  /* SPメニュー内は横幅に余裕があるので、読みやすいサイズで幅いっぱいに置く */
  .gnav-bp1-sp .btn-bp1 { width: 100%; max-width: 300px; height: 44px; font-size: 15px; }

  /* モーションを控える設定では動きを止め、即時表示にする */
  @media (prefers-reduced-motion: reduce) {
    #gnav, #gnav.is-open, .gnav-list > li, .gnav-toggle span, .gnav-link, .gnav-link::after {
      transition: none !important;
      animation: none !important;
    }
    #gnav { transform: none; }
    .gnav-list > li { opacity: 1; transform: none; }
  }
  /* .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);
  /* 実測はロゴtop79・下100だったが、施設情報を足したぶん縦に長くなっていたため
     2026-08-27に下だけ 100→64 に詰めた（上は実測のまま） */
  padding-block: 79px 64px;
}
.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: 32px; }  /* 実測40px。2026-08-27に縦を詰めて32pxへ */

.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=赤文字 */

/* ------------------------------------------------------------
   BP1導線カード（旧ピルボタンの位置に写真カードで設置・2026-08-12）
   背景＝BP2↔BP1間の道の夜景。フッター内に収まるコンパクトなカード。
   ------------------------------------------------------------ */
/* INFORMATION と BP1カードを同じ列にまとめる（2026-08-28）
   旧: カードだけ grid-column:4 の「2行目」に置いていた。1行目の高さは一番背の高い列
       （SHOP & CULTURE + NEWS & MEDIA＝524px）に揃うため、300pxしかない INFORMATION の
       下に224pxの空白ができ、さらにカード専用の2行目212pxが足されていた。
   新: INFORMATION の下にカードを入れて1行に収める（300+32+180=512 < 524）。
       → 空白が埋まり、フッターが212px短くなる（939→727px）。 */
.f-info-col { grid-column: 4; }
.f-bp1card {
  /* grid-column は .f-info-col の中に入ったため不要（グリッドアイテムではなくなった） */
  justify-self: start;
  position: relative;
  display: block;
  width: 320px;                    /* 旧ボタン幅を踏襲 */
  aspect-ratio: 16 / 9;
  margin-top: 32px;                /* 旧60px。2026-08-27にフッターの縦を詰めた */
  border: var(--border-light);
  background-color: #101010;
  background-size: cover;
  background-position: center 58%; /* 道の奥（連絡通路）を見せる */
  overflow: hidden;
  isolation: isolate;
  transition: border-color .3s ease, transform .3s ease;
}
.f-bp1card__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(31,31,31,.9) 0%, rgba(31,31,31,.5) 55%, rgba(31,31,31,.2) 100%);
  transition: opacity .35s ease;
}
.f-bp1card__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 18px 16px;
}
/* 「BILLBOARD PLACE」単独表示（BP1テキストは不採用・2026-08-12 FB）→ これを主役の組みに */
.f-bp1card__note {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.16em;
  line-height: 1.3;
  color: var(--color-bg);
  text-shadow: 0 2px 14px rgba(0,0,0,.65);
}
/* 右上のCTAチップ */
.f-bp1card__cta {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: var(--border-inverse);
  border-radius: var(--radius-pill);
  background: rgba(31,31,31,.45);
  color: var(--color-text-inverse);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.f-bp1card__arrow { font-size: 12px; line-height: 1; }
/* hover：ベールが薄まり道の奥が見え、CTAが白反転 */
.f-bp1card:hover { border-color: var(--color-bg-off); transform: translateY(-2px); }
.f-bp1card:hover .f-bp1card__veil { opacity: .62; }
.f-bp1card:hover .f-bp1card__cta {
  background: var(--color-bg-off);
  color: var(--color-text);
  border-color: var(--color-bg-off);
}
.f-bp1card:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

/* 施設情報（住所・電話・営業時間）— 全ページ共通・ダーク面
   2026-08-27: フッター下部の全幅ブロックから、ロゴと同じ列（左上）へ移動した。
   ・ロゴから遠くて「どこの施設情報か」が伝わりにくかった
   ・1ブロックぶん（約170px）フッターが短くなった
   ・SPではBP1への遷移カードの真下に来るため、どちらの施設の情報か紛らわしかった
   ロゴ列（PCで353px）は元々ロゴだけで下が空いていたので、高さは増えない。
   字送り・サイズは .f-nav-list（フッターリンク）に合わせる。 */
.f-logo-col { grid-column: 1; }
.f-meta {
  margin-top: 22px;
  font-size: var(--fs-footer-link);
  letter-spacing: 0.08em;          /* .f-nav-list は 0.15em だが、住所や営業時間のような
                                      長い1行では375pxで余裕が12pxしか残らず、
                                      Webフォント読み込み前のフォールバック時に行が切れる */
  line-height: 1.85;
  color: var(--color-footer-text);
}
.f-meta__name { font-weight: 600; }
.f-meta__note { margin-top: 4px; color: var(--color-gray-light); }
.f-meta a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.f-meta a:hover { color: var(--color-accent); }
.f-meta__tel a { text-decoration: none; }   /* 電話番号はタップ発信。下線なしで番号として見せる */
.f-meta__tel a:hover { text-decoration: underline; }

/* コピーライト（© 万代シテイBP2. All Rights Reserved.） */
.f-copyright {
  max-width: var(--frame-max);
  margin: 40px auto 0;   /* 2026-08-27: 施設情報がロゴ列へ移り下が空いたので56→40に詰めた */
  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-col { grid-column: 1 / -1; margin-top: 0; }
  .f-info-col { grid-column: auto; }
  .f-bp1card { margin-top: 32px; }   /* INFORMATIONの下に入るので、列内の間隔として32px */
}
@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-col { grid-column: 1 / -1; }
  /* INFORMATION＋BP1カードは2カラムぶち抜き。
     ぶち抜くとINFORMATIONの右側が空くので、リスト自体を2段にして埋める。 */
  .f-info-col { grid-column: 1 / -1; }
  .f-info-col .f-nav-list { columns: 2; column-gap: 24px; }
  .f-info-col .f-nav-list li { break-inside: avoid; }
  /* ペアの入れ物を解いて、5グループを個別にグリッドへ流す（2026-08-28）
     旧: [CINEMA+RESTAURANT] と [SHOP & CULTURE + NEWS & MEDIA] の2つを左右に置いていた。
         項目数が 6 対 13 で釣り合わず、左列の下に大きな空白ができていた。
     新: CINEMA|RESTAURANT ／ SHOP & CULTURE|NEWS & MEDIA と横に組み替えて高さを近づける。
     ★display:contents にするとグループ自身がグリッドアイテムになる。
       このとき .f-nav-group + .f-nav-group の 32px が「横並びの右側だけ下にずれる」原因に
       なるので0に戻し、縦の間隔はグリッドの row-gap に任せる。 */
  .f-nav-col { display: contents; }
  .f-inner .f-nav-group + .f-nav-group { margin-top: 0; }
  /* BP1への遷移カードは最後（施設情報はロゴ列にあるので隣り合わない） */
  .f-bp1card { width: 100%; max-width: 320px; margin-inline: auto; }
  /* 住所や営業時間は長いので中央寄せにせず左寄せ（読みやすさ優先） */
  .f-meta { margin-top: 18px; }
}


/* ============================================================
   共通部品（旧 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 オフホワイト枠・矢印小） */
/* 姉妹館サイトへのボタン。表記を「BP1」から正式名の「BILLBOARD PLACE」に変更したため、
   固定幅150pxをやめて内容に応じた可変幅にしている（15文字＋矢印が入る）。
   「サイトへ」は文字数を抑えるため視覚的には省き、aria-label で意味を保持している。 */
.btn-bp1 {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 36px;
  border-radius: var(--radius-pill);
  border: var(--border-inverse);
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.06em;          /* ブランド名なので少し開ける */
  white-space: nowrap;
  color: var(--color-text-inverse);
  padding-left: 20px;
  padding-right: 48px;             /* 矢印（右14px+24px）の逃げ */
  transition: background .2s, color .2s;
}
.btn-bp1__brand { display: block; }
.btn-bp1::after {
  content: "";
  position: absolute;
  right: 14px;
  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);
}

/* 中間幅（1024〜1279）は横に余裕がないので、ボタンだけ一段小さくする。
   ★この指定は .btn-bp1 の基本定義より後ろに置く必要がある。
     ヘッダー節（上方）の @media に書くと、後方のこの基本定義に上書きされて効かない
     （メディアクエリは詳細度を上げないため、同詳細度では後に書いた方が勝つ）。 */
@media (min-width: 1024px) and (max-width: 1279px) {
  .btn-bp1 {
    font-size: 13.5px;
    letter-spacing: 0.03em;
    height: 33px;
    padding-left: 16px;
    padding-right: 40px;
  }
  .btn-bp1::after { right: 12px; width: 20px; }
}

/* ------------------------------------------------------------
   フロア表記チップ（実測: 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; }   /* カード内はカード幅に追従 */

/* ------------------------------------------------------------
   カード内ボタン：矢印とラベルの衝突を解消（2026-08-28）
   .btn-pill の矢印は「右13px・幅52px の絶対配置」で、ボタン側に padding が無い。
   PCは幅320px固定なので隙間53pxあるが、カード内は max-width:none で
   カード幅に追従するため、SPでは矢印の横線がラベルを貫通していた。
   実測（ラベル「詳細を見る」84px）:
     幅393px→カード170.5px：矢印左端105.5 / 文字右端127.3 ＝ 21.7px 重なり
     幅375px→161.5px：26.2px 重なり ／ 幅320px→134px：40px 重なり
     タブレット768pxの4列グリッド（226.7px）も隙間6.3pxしかない
   → 矢印を絶対配置から通常のフレックスアイテムに変え、gap で間隔を保証する。
     幅に関係なく必ず10px空く。文字＋矢印のかたまりが中央に来るので中央寄せも崩れない。
   矢印は 52px では物理的に入らない（84+52＝136px でカード幅を超える）ので
   短い arrow-btn-sm.svg に差し替える。長さだけを詰めた同縮尺のSVGなので
   線の太さはPC（0.98px）と揃う。単純に52pxを24pxへ縮小すると
   mask の contain で線が0.45pxまで細り、薄く見えてしまう。
   PC（1024px以上）の見た目は一切変えない。
   ------------------------------------------------------------ */
@media (max-width: 1023px) {
  .card-item .btn-pill {
    gap: 10px;
    padding-inline: 8px;
    white-space: nowrap;   /* 高さ45px固定なので2行に折らせない */
  }
  .card-item .btn-pill::after {
    position: static;
    right: auto;
    transform: none;
    flex: 0 0 auto;
    width: 24px;
    height: 9px;           /* PCと同じ高さ＝同じ縮尺＝同じ線の太さ */
    -webkit-mask-image: url(../img/arrow-btn-sm.svg);
    mask-image: url(../img/arrow-btn-sm.svg);
  }
}

/* カテゴリバッジ（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);
}
/* 状態バッジ（いまはEVENTの「終了」だけ）。A-7/2026-08-26
   .post-cat と同じ高さ・字送りで、サムネの右上に置く（区分バッジは左上なので重ならない）。
   終了したものを目立たせる必要はないので、面は暗く・文字は控えめにする。 */
.post-status {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  height: 24px;
  padding-inline: 10px;
  border-bottom-left-radius: var(--radius-badge);
  font-family: var(--font-base);
  font-weight: 500;
  font-size: var(--fs-badge);
  letter-spacing: 0.1em;
  color: var(--color-gray-light);
  background: rgba(31, 31, 31, 0.82);
}

/* バッジ配色＝情報の出どころの階層。館＝黒（ブランド色）／店舗＝ダークレッド／イベント＝グレー（既定） */
.post-cat-bp2news  { background: var(--color-brand); }
.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; }

/* タブ切替の演出（2026-08-27・ユーザー要望「いきなりパッと変わりすぎ」）
   hidden の付け外しだけだと中身が瞬時に入れ替わるので、開いたパネルの中身を
   下から短くフェードインさせる。JS側（initTabs）が .is-tab-enter を付け直して再生する。
   ★パネル自体ではなく「中の要素」を動かす。親子の両方に opacity をかけると
     0.5×0.5=0.25 のように掛け算になって濁って見える。
   ★.reveal（スクロール時のふんわり表示・0.85s）と重なると二重演出になるため、
     切替時は .reveal のトランジションを止めてこちらの演出に一本化する。 */
@keyframes bp2TabIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.tab-panel.is-tab-enter .card-item,
.tab-panel.is-tab-enter .news-banner,
.tab-panel.is-tab-enter .news-empty,
.tab-panel.is-tab-enter .banner-note,
.tab-panel.is-tab-enter .tab-more {
  animation: bp2TabIn .4s cubic-bezier(.22, .61, .36, 1) both;
}
.tab-panel.is-tab-enter .reveal { transition: none; }
/* カード・バナーは少しずつ遅らせて出す（1件あたり40ms・6件ぶん＝最大240ms） */
.tab-panel.is-tab-enter .card-item:nth-child(2),
.tab-panel.is-tab-enter .news-banner:nth-child(2) { animation-delay: .04s; }
.tab-panel.is-tab-enter .card-item:nth-child(3),
.tab-panel.is-tab-enter .news-banner:nth-child(3) { animation-delay: .08s; }
.tab-panel.is-tab-enter .card-item:nth-child(4) { animation-delay: .12s; }
.tab-panel.is-tab-enter .card-item:nth-child(5) { animation-delay: .16s; }
.tab-panel.is-tab-enter .card-item:nth-child(6) { animation-delay: .20s; }
.tab-panel.is-tab-enter .tab-more { animation-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .tab-panel.is-tab-enter .card-item,
  .tab-panel.is-tab-enter .news-banner,
  .tab-panel.is-tab-enter .news-empty,
  .tab-panel.is-tab-enter .banner-note,
  .tab-panel.is-tab-enter .tab-more { animation: 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); }

/* ------------------------------------------------------------
   矢印付きテキストリンク（セクション内の補助導線）
   ------------------------------------------------------------ */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-gray-light);
  padding-bottom: 3px;
  transition: color .25s, border-color .25s;
}
.link-arrow__mark { font-size: 16px; line-height: 1; transition: transform .25s; }
.link-arrow:hover,
.link-arrow:focus-visible { color: var(--color-accent-dark); border-color: var(--color-accent-dark); }
.link-arrow:hover .link-arrow__mark { transform: translateX(3px); }

/* ------------------------------------------------------------
   CINEMAセクション：上映カードの後ろに置くT・ジョイ詳細への導線
   写真つき横型カード。上映スケジュール（各カードのピル）と役割が競合しないよう
   ボタンではなく「面で押せるカード」にしている。
   ------------------------------------------------------------ */
.cinema-more { margin-top: 44px; }
.tjoy-card {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 640px;
  margin-inline: auto;
  padding: 16px 20px 16px 16px;
  border: var(--border-dark);
  background: var(--color-bg);
  transition: background .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.tjoy-card__thumb {
  flex-shrink: 0;
  width: 104px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 3px;
  background: var(--color-gray-light);
}
/* カード本体の transition が .3s なので、画像も .3s に揃える（.5s だとカード内で速度がずれる） */
.tjoy-card__thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1);
  transform-origin: center center;
  backface-visibility: hidden;
  transition: transform .3s ease, opacity .3s ease;
}
.tjoy-card__body { min-width: 0; flex: 1 1 auto; }
.tjoy-card__label {
  display: block;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--color-accent-dark);
}
.tjoy-card__ttl {
  display: block;
  margin-top: 6px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.45;
  color: var(--color-text);
}
.tjoy-card__note {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--color-gray);
}
.tjoy-card__arrow {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--color-brand);
  color: var(--color-bg);
  font-size: 18px; line-height: 1;
  transition: background .3s ease, transform .3s ease;
}
.tjoy-card:hover,
.tjoy-card:focus-visible {
  background: var(--color-bg-off);
  border-color: var(--color-accent-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.tjoy-card:hover .tjoy-card__thumb img { opacity: .7; transform: scale(1.05); }   /* 他カードと同値 */
.tjoy-card:hover .tjoy-card__arrow { background: var(--color-accent-dark); transform: translateX(3px); }

@media (max-width: 767px) {
  .cinema-more { margin-top: 32px; }
  .tjoy-card { gap: 14px; padding: 14px; }
  .tjoy-card__thumb { width: 76px; }
  .tjoy-card__ttl { font-size: 15px; }
  .tjoy-card__note { display: none; }   /* SPは説明を省いて2行に収める */
  .tjoy-card__arrow { width: 28px; height: 28px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .tjoy-card, .tjoy-card__thumb img, .tjoy-card__arrow { transition: none; }
  .tjoy-card:hover { transform: none; }
  .tjoy-card:hover .tjoy-card__thumb img { transform: none; }
}

/* ------------------------------------------------------------
   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-btn {
  flex-direction: column;
  gap: 4px;
}
.fg__floor-num {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: 0.1em;
  line-height: 1;
}
.fg__floor-cnt {
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--color-gray);
  transition: color .25s;
}
.fg__floor-btn:hover,
.fg__floor-btn.is-active {
  background: var(--color-brand);
  color: var(--color-bg);
  border-color: var(--color-brand);
}
.fg__floor-btn:hover .fg__floor-cnt,
.fg__floor-btn.is-active .fg__floor-cnt { color: var(--color-gray-2); }

/* ステージ：アクティブなフロアのみ「マップ｜番号リスト」の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）
   マップ画像は縦長（800:930）なので幅を抑えて縦に伸びすぎないようにする */
.fg__mapwrap { min-width: 0; }
.fg__map {
  position: relative;
  max-width: 620px;
  margin-inline: auto;
  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__hint-sp { display: none; }

/* マップで選んだ店舗を出す帯（SPの主導線。PCはホバーでも追従する） */
.fg__pick {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px auto 0;
  max-width: 620px;
  padding: 12px 14px;
  border: var(--border-dark);
  background: var(--color-bg);
}
/* 未選択時：PCはホバーで店名が出るのでバーごと隠す（SPは案内文を出す＝下のSP指定） */
.fg__pick.is-empty { display: none; }
.fg__pick-empty {
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-gray);
}
.fg__pick.is-empty .fg__pick-badge,
.fg__pick.is-empty .fg__pick-text,
.fg__pick.is-empty .fg__pick-btn { display: none; }
.fg__pick:not(.is-empty) .fg__pick-empty { display: none; }
.fg__pick-badge {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--color-accent-dark); color: var(--color-bg);
  font-family: var(--font-en); font-weight: 500; font-size: 13px; line-height: 1;
}
.fg__pick-text { min-width: 0; flex: 1 1 auto; }
.fg__pick-name {
  display: block;
  font-size: 15px; font-weight: 600; letter-spacing: .02em; line-height: 1.4;
  color: var(--color-text);
  /* 店名が1行でも2行でもバーの高さを動かさない＝選択のたびに下のリストがずれない
     （長い店名例: FM-NIIGATA万代シテイサテライトスタジオ は2行になる） */
  min-height: 2.8em;
}
.fg__pick-genre { display: block; margin-top: 2px; font-size: 12px; color: var(--color-gray); }
.fg__pick-btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  background: var(--color-brand); color: var(--color-bg);
  font-size: 13px; letter-spacing: .04em; white-space: nowrap;
  transition: background .25s;
}
.fg__pick-btn:hover, .fg__pick-btn:focus-visible { background: var(--color-btn-hover); }
/* 店舗未選択のときは main.js が link.hidden = !url で隠すが、上の display:flex が
   hidden属性に勝ってしまい隠れていなかった（2026-08-28）。
   隠れないと href="#" のボタンが押せてページ先頭に飛ぶ。
   同ファイルの .tab-panel[hidden]（:841）と同じ打ち消しを入れる。 */
.fg__pick-btn[hidden] { display: none; }
.fg__pick-arrow { font-size: 15px; line-height: 1; }

/* 番号ピン（マップ上の各店舗位置） */
.fg__hot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.fg__hot-dot {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--color-brand);
  color: var(--color-bg);
  border: 2px solid var(--color-bg);
  box-shadow: 0 2px 6px rgba(0,0,0,.28);
  font-family: var(--font-en); font-weight: 500; font-size: 14px; 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; }
  /* 横並びでは「左→右で1F→3F」が自然（縦並びのPCは建物どおり上が3F）。
     DOM順は3F→2F→1F（＝建物の積み方）のままにして、表示だけ反転させる。 */
  .fg__selector { flex-direction: row-reverse; gap: 8px; }
  .fg__floor-btn { flex: 1 1 0; height: 56px; }
  .fg__floor-num { font-size: 22px; }
  .fg__hot-tip { display: none; }
  .fg__hint-pc { display: none; }
  .fg__hint-sp { display: inline; }
  /* ピンは指で押せる大きさを確保（当たり判定38px・見た目28px） */
  .fg__hot { width: 38px; height: 38px; }
  .fg__hot-dot { width: 28px; height: 28px; font-size: 13px; }
  /* 選択中のピンをはっきり大きく（どれを押したか分かるように） */
  .fg__hot.is-hot { z-index: 4; }
  .fg__hot.is-hot .fg__hot-dot { transform: scale(1.35); }
  /* 選択バーは縦積みにしてボタンを全幅＝押しやすく。
     ★未選択の案内文／店名1行／店名2行のどの状態でも同じ高さになるよう min-height を確保する
       （タップごとにバーが伸び縮みして下のリストが動くのを防ぐ）。 */
  .fg__pick {
    flex-wrap: wrap;
    gap: 10px;
    min-height: 146px;
    align-content: center;
  }
  .fg__pick-text { flex-basis: calc(100% - 40px); }
  .fg__pick-btn { flex-basis: 100%; justify-content: center; padding-block: 12px; }
  /* SPはホバーが無いので、未選択でも「タップできる」ことを案内しておく */
  .fg__pick.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-style: dashed;
    border-color: var(--color-gray-light);
  }
}

/* ============================================================
   フッター上バナーセクション（関連リンクのバナー群・全ページ共通）
   画像はいずれも約3.75:1。均一グリッドで“バナーウォール”に。
   ============================================================ */
.footer-banners {
  padding-block: 56px;
  background: var(--color-bg);          /* フッター(黒)の直前は白面で区切る */
  /* 上の罫線は削除（2026-08-13）。前のセクションとの間に細い線が浮いて見えるため。
     区切りは白面＋余白だけで足りる。 */
}
.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 rgba(255,255,255,.1);
    transition: color .25s ease, padding-left .3s ease;
  }
  .gnav-info-link:hover,
  .gnav-info-link:focus-visible { color: var(--color-nav-hover); padding-left: 22px; }
}

/* ============================================================
   写真スライダー（.pslider）— 店舗詳細 と TOPのT・ジョイ館内で共用
   フェード切替。矢印・サムネ・枚数表示。1枚のときは静止画（--single）。
   ============================================================ */
.pslider { width: 100%; min-width: 0; }   /* グリッド/フレックス内で縮めるため（T6-1） */
.pslider__stage {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--color-gray-light);
}
.pslider__slides { list-style: none; margin: 0; padding: 0; height: 100%; }
.pslider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility 0s linear .5s;
}
.pslider__slide.is-current {
  opacity: 1;
  visibility: visible;
  transition: opacity .5s ease, visibility 0s linear 0s;
}
.pslider__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 1枚のときは重ねずそのまま流す（高さも写真なり） */
.pslider--single .pslider__stage { aspect-ratio: auto; }
.pslider--single .pslider__slide { position: static; opacity: 1; visibility: visible; }
.pslider--single .pslider__slide img { height: auto; }

.pslider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(31, 31, 31, .55);
  color: var(--color-text-inverse);
  cursor: pointer;
  transition: background .25s ease;
  z-index: 2;
}
.pslider__arrow svg { width: 20px; height: 20px; }
.pslider__arrow-prev { left: 12px; }
.pslider__arrow-next { right: 12px; }
.pslider__arrow:hover,
.pslider__arrow:focus-visible { background: var(--color-accent-dark); }

.pslider__count {
  position: absolute;
  right: 12px;
  bottom: 12px;
  margin: 0;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: rgba(31, 31, 31, .6);
  color: var(--color-text-inverse);
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 0.1em;
  z-index: 2;
}

.pslider__thumbs {
  list-style: none;
  min-width: 0;                 /* 横スクロールを成立させる（親トラックを押し広げない） */
  margin: 10px 0 0;
  padding: 0 0 4px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.pslider__thumbs::-webkit-scrollbar { height: 4px; }
.pslider__thumbs::-webkit-scrollbar-thumb { background: var(--color-gray-light); border-radius: 2px; }
/* 枚数が多いときは96pxから縮んで1行に収める（60pxまで。それ以上は横スクロール） */
.pslider__thumbs > li { flex: 0 1 96px; min-width: 60px; }
.pslider__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  padding: 0;
  border: 0;
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  background: none;
  opacity: .55;
  transition: opacity .25s ease, outline-color .25s ease;
  outline: 2px solid transparent;
  outline-offset: 1px;
}
.pslider__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pslider__thumb:hover { opacity: .85; }
.pslider__thumb.is-current { opacity: 1; outline-color: var(--color-accent-dark); }

@media (max-width: 767px) {
  .pslider__arrow { width: 38px; height: 38px; }
  .pslider__arrow-prev { left: 8px; }
  .pslider__arrow-next { right: 8px; }
  .pslider__thumbs > li { flex: 0 1 72px; min-width: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .pslider__slide,
  .pslider__slide.is-current { transition: none; }
}

/* ============================================================
   スクロールでふんわり表示（.reveal）
   ★.reveal は JS（initReveal）が付ける。CSSだけでは何も起きない＝
     JS無効・IntersectionObserver非対応・reduced-motion では最初から見えている。
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .85s cubic-bezier(.22,1,.36,1) var(--reveal-delay, 0ms),
    transform .85s cubic-bezier(.22,1,.36,1) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-inview {
  opacity: 1;
  transform: none;
}
/* 表示が終わったら will-change を降ろす（合成レイヤーを持ち続けない） */
.reveal.is-inview { will-change: auto; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}
/* 印刷はスクロールが発生しないので is-inview が付かず、まだ出ていない要素が
   opacity:0 のまま白抜けで出力される。印刷時は必ず見える状態にする（2026-08-28） */
@media print {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================
   電話番号：発信リンクはタッチ端末のみ（2026-08-28）
   PCで tel: を押しても発信できず、通話アプリの連携ダイアログが出るだけなので
   リンクに見せない。判定は画面幅ではなく端末特性で行う。
   幅で切ると 768〜1023px のタブレット（タッチ端末）で発信できなくなり、
   PCブラウザを細めただけで発信リンクが復活してしまう。
   main.js のフロアガイド（(hover: none) で分岐）と判定軸を揃えている。
   ★HTMLは1種類のまま＝ページキャッシュやCDNが入っても事故らない。
     PHPのUA判定（wp_is_mobile）でHTMLを2種類に分けるとキャッシュ事故になるため採らない。
   ここは見た目だけの担保で、リンクの無効化そのものは main.js の initTelPc() が行う
   （aをspanに置換）。pointer-events:none は文字が選択できなくなるので使わない。
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  a[href^="tel:"],
  .f-meta__tel a[href^="tel:"],
  .def-table__value a[href^="tel:"],
  .entry-content a[href^="tel:"] {
    color: inherit;
    text-decoration: none;
    cursor: default;
  }
  .f-meta__tel a[href^="tel:"]:hover,
  .def-table__value a[href^="tel:"]:hover,
  .entry-content a[href^="tel:"]:hover {
    text-decoration: none;
  }
}

/* ============================================================
   T6-2: リサイズ中はメニュー系のトランジションを止める
   ブレークポイント（1024px）を跨いだ瞬間に #gnav の opacity 1→0 が
   .38s かけて再生され、全画面メニューが一瞬見えてしまうのを防ぐ。
   .is-resizing は main.js が resize 中だけ <html> に付ける。
   ============================================================ */
.is-resizing #gnav,
.is-resizing .gnav-list > li,
.is-resizing .gnav-link::after,
.is-resizing .gnav-toggle span { transition: none !important; }

/* 上映作品カードの補助表示（公開状況バッジ・本編時間） */
.post-date__status {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: var(--radius-badge);
  background: var(--color-accent-dark);
  color: var(--color-bg);
  font-family: var(--font-base);
  font-size: 11px;
  letter-spacing: 0.04em;
  vertical-align: 1px;
}
.cinema-minutes {
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-gray);
}
/* 上映作品カードだけ、タイトルの下に「本編○分」が入る（2026-08-28修正）
   カード内の“文字→ボタン”の最小ギャップは .post-ttl { margin-bottom: 24px } で
   作っているが、分数の行がその下に入るため24pxが追い越され、
   ボタンが文字に接していた（実測0px。ニュースカードは24px）。
   24pxを「.post-link の最後の子」へ移すことで、分数の行があっても無くても効く。
   ★下の2行は順序を入れ替えないこと。分数が無いカードでは .post-ttl 自身が
     :last-child になるため、後ろの行が勝つ必要がある。 */
.cinema-card .post-ttl { margin-bottom: 0; }
.cinema-card .post-link > :last-child { margin-bottom: 24px; }

/* ------------------------------------------------------------
   上映作品カードのサムネ枠
   ★T・ジョイが配信しているサムネイルは 200×282px しかない。
     枠に合わせて引き伸ばすとボケるので、拡大せず中央に置く
     （max-width/max-height + width:auto）。将来大きい画像が来ても縮小して収まる。
   ------------------------------------------------------------ */
.cinema-thumb {
  aspect-ratio: auto;
  height: clamp(240px, 26vw, 300px);
  display: grid;
  place-items: center;
  background: var(--color-bg-off);
  overflow: hidden;
}
.cinema-thumb img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* ★transition は .post-thumb img と同じ内容を維持する。
     ここで opacity だけに絞ると transform の遷移が消え、
     共通ルールの hover 拡大（scale 1.05）が瞬間的に起きて“カクッ”と見える。 */
  transform: scale(1);
  transform-origin: center center;
  backface-visibility: hidden;
  transition: transform .3s ease, opacity .3s ease;
}
/* hover の見え方は .post-thumb の共通ルール（opacity .7 ／ scale 1.05）に委ねる。
   ここで個別に上書きすると他セクションのカードと演出がずれる。 */