/* ============================================================
   home.css — トップ専用（bohr: is_home/is_front_page 時のみ enqueue）
   旧 pages.css を規約構成に合わせ改名。
   共通部品は components.css。ここはセクションの器のみ。
   ============================================================ */

/* ------------------------------------------------------------
   2. メインビジュアル（FV・夜景／PC 2400x1100・SP 1080x1350）
   ネオンサインを主役に、下端をグラデで暗転させ次セクション（黒面）へ繋ぐ。
   ------------------------------------------------------------ */
#mainvisual {
  position: relative;
  width: 100%;
  aspect-ratio: 1536 / 560;            /* 横長（約2.74:1）。上下をトリミングし直下のセクションを早く見せる */
  max-height: 62vh;
  overflow: hidden;
  background: var(--color-brand);
}
#mainvisual picture { display: block; width: 100%; height: 100%; }
.mainvisual-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  animation: mvIn 1.2s ease-out both;  /* フェードのみ（拡大するとボケるためscaleは使わない） */
}
@keyframes mvIn {
  from { opacity: .3; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .mainvisual-img { animation: none; }
}

/* ------------------------------------------------------------
   MV下端の処理：写真そのものを下へ向けて「消す」（maskで透明にする）
   ------------------------------------------------------------
   ベール（暗い面を上に重ねる）方式だと、重ねた色と #about の地色を
   完全に一致させても最後の数pxで濃度差が残り、境界線として見えてしまった。
   そこで写真のアルファを0まで落とし、下に敷いた #mainvisual の背景
   （= --color-brand = #about と同じ色）をそのまま見せる方式に変更。
   ひと続きに塗られた同じ色なので、原理的に境目が発生しない。
   mask非対応環境では下の .mv-veil（重ねる方式）が働く。
   ------------------------------------------------------------ */
/* ★下端の溶かし方の変更履歴
   2026-08-31: 夜景 → 昼の外観への差し替えに伴い 26% → 62% 起点へ（溶かす範囲を狭めた）。
               夜景は元から暗いので26%起点でも分からなかったが、昼の明るい写真では
               溶けている範囲が見え、エントランスと足元が暗く沈んでいた。
   2026-09-01: さらに 62% → 88% 起点へ。62%でも「下側が暗い印象になる」との指摘。
               継ぎ目を隠すのに必要なのは境界の直前だけで、画像の4割を暗くする必要はない。
               開始を下げて代わりに急にすることで、暗くなる範囲を 38% → 12% に縮めた。
               実測: PC1440 → 199px から 63px ／ SP393 → 99px から 31px。
               どちらの幅でも段差は出ないことを描画して確認済み。
   ★これ以上（92%以上）は短い窓サイズで遷移距離が足りなくなるため下げない。
   ★夜景に戻す場合の旧値:
     #000 26%, .94 40%, .82 52%, .62 64%, .40 74%, .20 84%, .07 92%, 0 98%
   比較資料: 03_management/BP2_メインビジュアル比較_詳細版_20260831.pdf のP10 */
@supports ((-webkit-mask-image: linear-gradient(#000, transparent)) or (mask-image: linear-gradient(#000, transparent))) {
  .mainvisual-img {
    -webkit-mask-image: linear-gradient(to bottom,
      #000 88%, rgba(0,0,0,.70) 94%, rgba(0,0,0,.25) 98%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom,
      #000 88%, rgba(0,0,0,.70) 94%, rgba(0,0,0,.25) 98%, rgba(0,0,0,0) 100%);
  }
  .mv-veil { display: none; }
}

/* 下端の暗転ベール（mask非対応環境のフォールバック） */
.mv-veil {
  position: absolute;
  inset: auto 0 0 0;
  height: 12%;                          /* 2026-09-01: maskの88%起点に合わせた（旧 38%＝62%起点／さらに旧 72%） */
  /* 多段ストップでイージング曲線を近似し、どこにも段差が出ないようにする。
     ★88%で完全な不透明に到達させる＝最後の1〜2pxが中途半端な濃さにならず境界線が見えない。 */
  background: linear-gradient(to bottom,
    rgba(31,31,31,0)    0%,
    rgba(31,31,31,.02) 12%,
    rgba(31,31,31,.06) 24%,
    rgba(31,31,31,.13) 36%,
    rgba(31,31,31,.24) 48%,
    rgba(31,31,31,.39) 60%,
    rgba(31,31,31,.58) 70%,
    rgba(31,31,31,.78) 79%,
    rgba(31,31,31,.93) 85%,
    rgba(31,31,31,1)   88%,
    rgba(31,31,31,1)  100%);
  pointer-events: none;
}

@media (max-width: 767px) {
  #mainvisual { aspect-ratio: 1024 / 680; max-height: 58vh; }   /* SPは少し縦を足して被写体を確保 */
  .mainvisual-img { object-position: center 58%; }
  .mv-veil { height: 12%; }   /* 2026-09-01: PCと同じ起点に合わせた（旧 38%） */
}

/* MV→施設概要をひと続きに見せる（境界の線を出さない） */
#about { margin-top: -1px; }

/* ------------------------------------------------------------
   3. BILLBOARD PLACE 30th Anniversary 帯バナー（全幅・期間限定）
   撤去容易性のため独立ブロック。削除・非表示はこのブロック単位で完結。
   ------------------------------------------------------------ */
.banner-30th {
  width: 100%;
  padding-block: 40px;                 /* 上下に余白を持たせる */
}
.banner-30th-link {
  display: block;
  max-width: 900px;                    /* 全幅→少し小さめに（周囲に余白） */
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.banner-30th-img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity .3s ease;
}
.banner-30th-link:hover .banner-30th-img { opacity: .85; }
@media (max-width: 767px) {
  .banner-30th { padding-block: 28px; }
}

/* ------------------------------------------------------------
   4. 施設概要（BP2とは）— CINEMAより前・必須（§6.1）
   実測: BLK面 h626・上下80px（要素の少ないセクション）
   ------------------------------------------------------------ */
#about {
  background: var(--color-brand);
  color: var(--color-text-inverse);
  padding-block: var(--space-section-sm);   /* 実測80px */
  text-align: center;
}
.about-en {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 20px;                     /* 実測 */
  letter-spacing: 0.4em;               /* 実測: 字間8px/20px */
  color: var(--color-gray-light);
  line-height: 1;
}
.about-catch {
  margin-top: 28px;                    /* 実測: 102→131 */
  font-weight: 500;
  font-size: var(--fs-catch);
  letter-spacing: 0.05em;
  line-height: 1.55;
}
.about-lead {
  margin-top: 40px;                    /* 実測: キャッチ下端206→リード245 */
  font-weight: 500;
  font-size: var(--fs-lead);
  letter-spacing: 0.05em;
  line-height: calc(40 / 24);          /* 実測: lh40px */
  color: var(--color-gray-light);
}
.about-nav {
  margin-top: 76px;                    /* 実測: リード下端325→カード401 */
  display: flex;
  justify-content: center;
  gap: 17px;                           /* 実測: 260/494/728/962 → 217+17 */
  flex-wrap: wrap;
}
/* カード4→3枚（2026-08-28）。SHOP と CULTURE は両方 href="#shop" で同じ場所へ
   飛んでいたため統合した。ラベル「SHOP & CULTURE」は 20px・字間0.15em で 203.9px あり、
   217px のカードだと左右6.5pxしか残らず、隣（RESTAURANT 151.3px）と釣り合わない。
   このナビのカードだけ 250px に広げる（250×3 + gap17×2 = 784px < コンテンツ幅1040px）。
   floor-nav（PARKING / HOURS）は --anchor-card-w = 217px のまま。 */
.about-nav .anchor-card { width: 250px; }
/* 中間幅（768〜1023）: Figmaに指定なし → §6.5で破綻なく補完 */
@media (min-width: 768px) and (max-width: 1023px) {
  .about-catch { font-size: 36px; }
  .about-lead { font-size: 18px; line-height: 2; }
  /* 3枚なので3列。250px固定だと768pxで入らない（784 > 728）ため流動幅にする */
  .about-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: center; }
  .about-nav .anchor-card { width: 100%; }
}
@media (max-width: 767px) {
  /* SPは1列（2026-08-28・ユーザー判断で「案D 横並びの行」に変更）
     旧: 2カラム＋3枚目（SHOP & CULTURE）だけ全幅
         → 一番大きいカードが SHOP & CULTURE になり、「CINEMAがメイン」（ヒロセ様）と
           逆の優先順位を視覚的に示していた。全幅にしていたのは階層の判断ではなく、
           ラベル183.5pxが2カラム幅170.5pxに収まらないという都合。
     新: 3枚を同じ大きさの1行カードにして、優先順位は「順番」で表す。
         高さ 302px → 264px（38px短くなる）。ラベル長の制約も無くなる。 */
  .about-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-top: 40px;
  }
  .about-nav .anchor-card { width: 100%; }
  .about-catch { line-height: 1.7; }
}
/* 案D の横並び（アイコン左・ラベル・シェブロン右）。
   360px未満では「アイコン＋ラベル183.5px＋シェブロン」が横に並びきらないため、
   その幅だけは従来の縦組みカード（1列・全幅）のまま残す。 */
@media (min-width: 360px) and (max-width: 767px) {
  .about-nav .anchor-card {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    height: 80px;
    padding: 0 18px;
  }
  /* アイコンの実寸はSVGの縦横比で変わる（CINEMA 41.3px / RESTAURANT 26.4px / SHOP 27.3px）。
     枠幅を固定して中央寄せしないと、3行のラベル左端が最大15pxずれる。 */
  .about-nav .anchor-card-icon {
    height: 38px;
    width: 44px;
    flex: 0 0 auto;
    justify-content: center;
  }
  .about-nav .anchor-card-label {
    margin-top: 0;
    margin-left: 16px;
  }
  /* シェブロンは「ページ内を下へ飛ぶ」意味なので ∨ の向き（rotate:-45deg）は変えず、右端へ。
     ★transform は使わない。基底の rotate: -45deg と併用すると、個別トランスフォーム
       プロパティの適用順（translate → rotate → scale → transform）により
       translateY が回転後の座標系で効いて斜めにずれる。(80-14)/2 = 33px を直接指定する。 */
  .about-nav .anchor-card-chevron {
    left: auto;
    right: 18px;
    bottom: auto;
    top: 33px;
    transform: none;
  }
}

/* ------------------------------------------------------------
   カードグリッド（実測: CINEMA/NEWS 3列 gap40x60 ／ SHOP 4列 gap24x60）
   ------------------------------------------------------------ */
.card-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--space-card-gap);
  row-gap: var(--space-card-row);
}
.card-list-4 {
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--space-card-gap-sm);
  row-gap: 80px;                       /* 実測: SHOP&CULTURE 行間80 */
}
@media (max-width: 1023px) {
  .card-list { grid-template-columns: repeat(2, 1fr); }       /* §6.5 中間幅の補完 */
  .card-list-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  /* NEWS等はSP2カラム（ユーザー要望）。CINEMAは .cinema-carousel 側で横スクロールに上書き */
  .card-list {
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
    row-gap: 32px;
  }
  .card-list-4 {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 12px;
  }
}

/* ------------------------------------------------------------
   5. NEWS & MEDIA（実測: 紙テクスチャ背景・タブ＋カード）
   ------------------------------------------------------------ */
/* ★背景テクスチャは cover を使わない（2026-08-13修正）
   cover はセクションの箱に合わせて画像を拡縮するため、タブを切り替えて高さが変わるたびに
   テクスチャの倍率と位置が変わり「背景がずれる／ズームする」ように見えていた。
   実測: SHOP NEWS 1619px→倍率0.67 ／ BP MEDIA 630px→倍率0.35（1.9倍も変わる）。
   → 倍率を「幅だけ」で決め（100% auto）、上端に固定して縦にタイルする。
     高さが変わっても見た目が一切動かない。
   ※bg-news-tile.jpg は「原画＋上下反転」を積んだ鏡像タイル。境界の行が一致するので継ぎ目が出ない
     （元の bg-news.jpg は上端と下端の明度差が17.6あり、そのまま縦repeatすると帯に見えた）。 */
#news {
  background: url(../img/bg-news-tile.jpg) center top / 100% auto repeat-y;
  background-color: var(--color-bg-off);   /* 画像未読込時のフォールバック */
}
#news .sec-ttl-box { margin-bottom: 34px; }                /* 実測: 見出し201→タブ235 */
#news .tab-bar { margin-bottom: var(--space-head-gap); }  /* 実測: タブ270→カード320 */

/* ------------------------------------------------------------
   6. RESTAURANT（実測: 黒岩肌テクスチャ背景・白見出し）
   ------------------------------------------------------------ */
#restaurant {
  background: url(../img/bg-restaurant.jpg) center / cover no-repeat;
  background-color: var(--color-brand);
  color: var(--color-text-inverse);
  padding-block: var(--space-section);
}
#restaurant .sec-ttl { color: var(--color-bg-off); }
#restaurant .shop-card .shop-name { color: var(--color-bg-off); }

/* ------------------------------------------------------------
   8. FLOOR GUIDE（実測: 白テクスチャ背景・マップ570px＋一覧＋導線）
   ------------------------------------------------------------ */
/* フロア切替（3F/2F/1F）でマップと一覧の高さが変わるので、#news と同じ理由で cover をやめる */
#floor {
  background: url(../img/bg-floor-tile.jpg) center top / 100% auto repeat-y;
  background-color: var(--color-bg-off);
}
.floor-body {
  display: grid;
  grid-template-columns: 570px 1fr;    /* 実測: マップ570 */
  grid-template-rows: 1fr auto;        /* 右列＝一覧＋ボタン（マップと同じ高さに収める） */
  column-gap: 30px;                    /* 実測: 770→800 */
}
.floor-map {
  grid-row: 1 / 3;
  aspect-ratio: 570 / 380;             /* 実測: マップ枠570x380（画像はcover） */
  background: var(--color-bg);
  border: var(--border-dark);
  overflow: hidden;
}
.floor-map img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.floor-lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
  align-content: start;
}
.floor-list-items { margin-top: 28px; }         /* 実測: チップ下→リスト */
.floor-list-items li + li { margin-top: 20px; } /* 実測: 行間32px（12px文字+20） */
.floor-list-items li {
  font-weight: 500;                 /* 指示書: 店名＝Medium（旧600→太すぎのため修正） */
  font-size: var(--fs-floor-list);
  letter-spacing: 0.05em;
  line-height: 1;
}
.floor-btn {
  grid-column: 2;
  justify-self: end;
  align-self: end;
  width: 320px;                        /* 実測 */
}
/* CTAの上余白（2026-08-28）
   .floor-more には定義が無く margin-top:0 で、フロア一覧に直付けになっていた。
   他セクションのCTAは .tab-more 40px ／ .cinema-more 44px。同じリズムに合わせる。
   ★水平位置は触らない（PC=右寄せ／SP=中央がデザイン側の指定。.floor-btn 側で効いている）。 */
.floor-more { margin-top: 40px; }
/* ACCESS / PARKING / HOURS 3カラム導線（実測: フロアガイド内・中央揃え gap94） */
.floor-nav {
  margin-top: 110px;                   /* 実測: マップ下端→導線724 */
  display: flex;
  justify-content: center;
  gap: 94px;                           /* 実測: 300/611/923 */
  flex-wrap: wrap;
}
@media (max-width: 1023px) {
  .floor-body { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 40px; }
  .floor-map { grid-row: auto; }
  .floor-btn { grid-column: 1; justify-self: stretch; width: 100%; max-width: 320px; margin-inline: auto; }
  .floor-nav { gap: 24px; margin-top: 64px; }
}
@media (max-width: 767px) {
  .floor-lists { column-gap: 16px; }
  /* ACCESS/PARKING/HOURS はSPでも横3並び（ユーザー要望）。カード幅は可変に */
  .floor-nav {
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 56px;
  }
  .floor-nav .anchor-card {
    flex: 1 1 0;
    width: auto;
    height: auto;
    min-height: 108px;
    padding: 16px 4px;
  }
  .floor-nav .anchor-card-icon { height: 32px; }
  .floor-nav .anchor-card-label { font-size: 13px; letter-spacing: 0.08em; }
  .floor-nav .anchor-card-chevron { bottom: 10px; }
}

/* ------------------------------------------------------------
   NEWS & MEDIA バナー（BP PRESS / BP MAGAZINE ＝ BP1へのリンク・複数対応）
   ------------------------------------------------------------ */

/* BP MEDIAタブ（旧 BP PRESS / BP MAGAZINE の2タブを統合・2026-08-13）
   タブ名を短く保つ代わりに、ブランド名はここの見出しで残す。
   PCは2列で並べて「2媒体ある」ことが一目で分かるようにし、SPは縦積み。 */
/* BP MEDIA（バナー3枠）— 2026-08-27
   旧: ブランドごとに見出し＋バナー1枚を2カラム（.media-cols / .media-col）
   新: 見出しを外して3枠を横並び（バナー画像自体にブランド名が入っているため見出しは重複だった）
   ★3枚とも縦横比が違う（BP PRESS 2.5:1 / assh 1.79:1 / Chit chat 1.56:1）。
     cover で切り抜くと画像内の文字が欠けるので、枠の比率を16:9に固定して中に収める（contain相当）。
     これで3枚の外枠とキャプション帯の高さが揃い、文字も欠けない。 */
.media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: var(--container-max);
  margin-inline: auto;
}
.media-grid .news-banner { display: flex; flex-direction: column; }
.media-grid .news-banner__img {
  /* 3枚のうち一番縦長なのが Chit chat（1.56:1）。枠を3:2にしておくとこれがほぼ枠いっぱいに入り、
     余白がいちばん少なくて済む（16:9にすると Chit chat が枠より高くなって下が切れる）。 */
  aspect-ratio: 3 / 2;
  min-height: 0;        /* ★これが無いと flex アイテムの min-height:auto で
                           枠が画像の高さまで伸び、aspect-ratio が効かずに下が切れる */
  display: grid;
  place-items: center;
  padding: 6px;
}
.media-grid .news-banner__img img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.media-grid .news-banner__cap { margin-top: auto; }

@media (max-width: 1023px) {
  /* 3列だと1枠が狭すぎてバナー内の文字が読めなくなるため2列 */
  .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 700px; }
}
@media (max-width: 767px) {
  .media-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 420px; }
}

.banner-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 900px;
  margin-inline: auto;
}
/* パネル冒頭の説明（BP1へのリンクである旨を明示） */
.banner-note {
  max-width: 900px;
  margin: 0 auto 20px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-gray);
  text-align: center;
}

/* バナー＝カード化（画像＋「BP1サイトで読む↗」キャプション） */
.news-banner {
  display: block;
  border: var(--border-light);
  background: var(--color-bg);
  transition: box-shadow .25s ease, transform .25s ease;
}
.news-banner__img { display: block; overflow: hidden; }
.news-banner__img img { width: 100%; height: auto; display: block; transition: opacity .3s ease; }
.news-banner__cap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 18px;
  background: var(--color-brand);
  color: var(--color-bg);
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.08em;
  transition: background .25s ease;
}
.news-banner__arrow { font-size: 15px; line-height: 1; }
.news-banner:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.news-banner:hover .news-banner__img img { opacity: .85; }
.news-banner:hover .news-banner__cap { background: var(--color-accent-dark); }   /* hoverで赤＝クリックできる合図 */

/* NEWSタブ下の「一覧へ」導線 */
.tab-more { margin-top: 40px; display: flex; justify-content: center; }
.tab-more .btn-pill { margin-inline: auto; }

/* ------------------------------------------------------------
   ACCESS セクション（フッター直上・写真パネル｜地図）
   ------------------------------------------------------------ */
.access-cta {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) 1.6fr;
}
.access-cta__info {
  position: relative;
  display: flex;
  align-items: center;
  padding: 56px var(--gutter);
  background-color: var(--color-brand);
  background-size: cover;
  background-position: center;
  color: var(--color-text-inverse);
}
.access-cta__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(31,31,31,.85) 0%, rgba(31,31,31,.62) 100%);
}
.access-cta__inner { position: relative; width: 100%; max-width: 420px; margin-inline: auto; }
.access-cta__icon { display: inline-flex; height: 46px; color: var(--color-bg); margin-bottom: 16px; }
.access-cta__icon svg { height: 100%; width: auto; }
.access-cta__en {
  font-family: var(--font-en); font-weight: 500;
  font-size: var(--fs-section-head); letter-spacing: var(--ls-section-head); line-height: 1;
}
.access-cta__en .initial { color: var(--color-accent); }
.access-cta__jp { margin-top: 10px; font-size: 16px; letter-spacing: 0.08em; color: var(--color-gray-light); }
.access-cta__addr { margin-top: 22px; font-size: 15px; line-height: 1.9; }
.access-cta__btn { margin-top: 28px; }
.access-cta__map { min-height: 440px; background: var(--color-gray-light); }
.access-cta__map iframe { display: block; width: 100%; height: 100%; min-height: 440px; }

@media (max-width: 900px) {
  .access-cta { grid-template-columns: 1fr; }
  .access-cta__info { padding-block: 48px; }
  .access-cta__map, .access-cta__map iframe { min-height: 300px; height: 300px; }
}