/* ============================================================
   E案：昼の光が入った部屋（2026/9/17）

   写真は大きいまま。写真そのものを明るく書き出し直し、文字は写真の
   明るい場所にネイビーで置く。文字を読ませるために写真へ幕をかけない。
   文字だけの面（料金・FAQ・流れ・アクセス・SNS）は白地。
   ネイビー #001A33 の面は「コンセプト帯」「見開きの間」「フッター」の3か所だけで、
   ゴールドの文字 #E6CD92 はその上でしか使わない。白地のゴールドは罫と数字だけ。

   実サイトの上からかぶせる確認用シート（_design-e-room.html が読む）。
   Tailwind の CDN は実行時にスタイルを差し込むので、読み込み順では勝てない。
   ここが全部 !important なのはそのため（theme-light-gold.css と同じ理由）。

   写真の参照先
     ヒーロー1枚目は CSS 背景なので、ここで images/relight/hero-01-plus.webp
     （ガンマ0.68＋明度1.18＋彩度0.92、平均152）へ向ける。
     他の写真は HTML 側で images/relight/ に差し替え済み。
   ============================================================ */

:root {
    --e-bg: #f8f9fa;        /* 3.3 アーキテクチュラルホワイト */
    --e-card: #ffffff;
    --e-alt: #eef1f4;       /* 1段沈めた帯 */
    --e-navy: #001a33;      /* 3.1 マネジメントネイビー */
    --e-text2: #2c3a47;
    --e-muted: #5a6674;
    --e-faint: #7a8593;
    --e-gold: #c79a3e;      /* 罫線・数字・アイコン用。白地の文字には使わない */
    --e-gold-on-navy: #e6cd92;
    --e-line: #dfe4e8;
    --e-line2: #c9d0d6;
    --e-on-navy: #f4f6f8;
    --e-on-navy-2: #b8c2cc;
}

/* ---------- 地と本文 ---------- */

body { background: var(--e-bg) !important; color: var(--e-navy) !important; }

.bg-luxury-deep, .bg-luxury-dark { background-color: var(--e-bg) !important; }
.bg-luxury-card { background-color: var(--e-alt) !important; }
.bg-luxury-deep\/80 { background-color: rgba(248, 249, 250, .8) !important; }
.bg-luxury-line2 { background-color: var(--e-line) !important; }

.text-luxury-text { color: var(--e-navy) !important; }
.text-luxury-text2 { color: var(--e-text2) !important; }
.text-luxury-muted { color: var(--e-muted) !important; }
.text-luxury-faint { color: var(--e-faint) !important; }
.text-luxury-deep { color: var(--e-navy) !important; }
/* 白地の「ゴールドの文字」はネイビーへ。アイコンだけは金の線として残す */
.text-luxury-goldLight, .text-luxury-goldLight\/70 { color: var(--e-navy) !important; }
svg.text-luxury-goldLight, i.text-luxury-goldLight { color: var(--e-gold) !important; }

.border-luxury-line { border-color: var(--e-line) !important; }
.border-luxury-line2 { border-color: var(--e-line2) !important; }
.border-luxury-gold\/25, .border-luxury-gold\/40,
.border-luxury-goldLight, .border-luxury-goldLight\/50,
.border-luxury-goldLight\/60, .border-luxury-goldLight\/70 { border-color: rgba(199, 154, 62, .5) !important; }

.bg-luxury-gold\/5, .bg-luxury-gold\/12, .bg-luxury-gold\/15,
.bg-luxury-goldLight\/10 { background-color: rgba(199, 154, 62, .08) !important; }
.bg-luxury-muted\/40 { background-color: rgba(90, 102, 116, .25) !important; }

/* 金のグラデーション文字は、白地では塗りが飛ぶ。見出しの色（ネイビー）に戻す */
.gold-gradient-text {
    background: none !important;
    -webkit-text-fill-color: var(--e-navy) !important;
    color: var(--e-navy) !important;
}

/* 数字は白地でもゴールドのまま（線・数字はゴールドを許す）。グラデは1色に落とす */
.idx-no {
    background: none !important;
    -webkit-text-fill-color: var(--e-gold) !important;
    color: var(--e-gold) !important;
}
.eyebrow { color: var(--e-muted) !important; }
.eyebrow::before, .card-lux__rule { background: var(--e-gold) !important; }

/* 価格の数字。白地で等幅フォントは帳票に見えるので、本文書体の等幅数字に */
.font-mono { font-family: 'Noto Sans JP', sans-serif !important; font-variant-numeric: tabular-nums; }

/* ---------- 重ねている陰を外す ---------- */

.layer-plane, .layer-vignette { background: none !important; }
.layer-grain { opacity: .03 !important; mix-blend-mode: multiply !important; }
.glow { display: none !important; }

/* ---------- カード ---------- */

.card-lux {
    background: var(--e-card) !important;
    border-color: var(--e-line) !important;
    box-shadow: 0 1px 2px rgba(0, 26, 51, .04), 0 12px 28px rgba(0, 26, 51, .06) !important;
}
.card-lux::before { background: none !important; }
.card-lux::after { background: linear-gradient(90deg, rgba(199, 154, 62, .6), rgba(199, 154, 62, .12) 50%, transparent) !important; }
.card-lux--hover:hover { box-shadow: 0 6px 12px rgba(0, 26, 51, .07), 0 20px 40px rgba(0, 26, 51, .10) !important; }
.card-lux__inner { background: var(--e-alt) !important; border-color: var(--e-line) !important; box-shadow: none !important; }
.card-lux__ghost { opacity: .05 !important; color: var(--e-navy) !important; }
.media-ring { box-shadow: inset 0 0 0 1px rgba(0, 26, 51, .10) !important; }

/* ---------- ボタン ---------- */
/* 金のグラデーションのボタンは、白地ではネイビー塗りに。矢印だけ金 */
a[class*="from-luxury-goldLight"][class*="to-luxury-gold"] {
    background-image: none !important;
    background-color: var(--e-navy) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 32px rgba(0, 26, 51, .22) !important;
}
a[class*="from-luxury-goldLight"][class*="to-luxury-gold"] svg { color: var(--e-gold-on-navy) !important; }

/* ---------- ナビ・ドロワー ---------- */
/* ヘッダーはメインビジュアルの上では透明、スクロールでネイビーの不透明。
   どちらの状態でも下地は写真かネイビーなので、文字とロゴは白のまま。 */

/* ヘッダーは最初から不透明のネイビー帯（72px）。写真の上に直接ロゴを置くと、ブランド規定 2.7 の
   禁止例「複雑な背景への配置」に当たるため、ロゴとメニューは平らな地の上に置く。
   スクロール後も同じ帯なので、見た目は連続する。ロゴには影などの効果を足さない。 */
nav.nav-bar,
html.js nav.nav-hero,
html.js nav.nav-hero.is-solid {
    background: #001a33 !important;
    border-bottom-color: rgba(255, 255, 255, .08) !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}
nav.nav-bar .text-luxury-text { color: var(--e-on-navy) !important; }
nav.nav-bar .text-luxury-text2 { color: var(--e-on-navy) !important; }
nav.nav-bar .text-luxury-goldLight { color: var(--e-gold-on-navy) !important; }
nav.nav-bar .hover\:text-luxury-goldLight:hover { color: var(--e-gold-on-navy) !important; }
/* ネイビーの帯の上では、入会ボタンはゴールドに戻す（ネイビー塗りだと帯に沈む） */
nav.nav-bar a[class*="from-luxury-goldLight"][class*="to-luxury-gold"] {
    background-image: linear-gradient(90deg, #e6cd92, #c79a3e) !important;
    color: var(--e-navy) !important;
    box-shadow: none !important;
}
/* 下へスクロールするとバーは隠れ、右上のボタンだけが白い面の上に残る。
   囲みのボタン（見学・体験）には白い下地とネイビーの文字を与える。 */
nav.nav-bar.nav-hidden .nav-keep > a[class*="border-luxury-goldLight"] {
    background: rgba(255, 255, 255, .96) !important;
    color: var(--e-navy) !important;
    border-color: rgba(0, 26, 51, .14) !important;
    box-shadow: 0 10px 24px rgba(0, 26, 51, .18) !important;
}
nav.nav-bar.nav-hidden #menuToggle,
nav.nav-bar.nav-hidden:not(:has(:focus-visible)) #menuToggle {
    background: var(--e-navy) !important;
    border-color: var(--e-navy) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(0, 26, 51, .22) !important;
}
nav.nav-bar #menuToggle { color: var(--e-on-navy) !important; border-color: rgba(255, 255, 255, .35) !important; }

.nav-menu-inner { background: #ffffff !important; border-color: var(--e-line) !important; box-shadow: 0 18px 40px rgba(0, 26, 51, .12) !important; }
.nav-menu-inner a { color: var(--e-navy) !important; }
.nav-menu-inner a:hover, .nav-menu-inner a:focus-visible { background: var(--e-alt) !important; color: var(--e-navy) !important; }

.mobile-menu-panel { background: #ffffff !important; }
.mobile-menu-panel .text-luxury-goldLight { color: var(--e-muted) !important; }
.mobile-menu-panel .border-luxury-line { border-color: var(--e-line) !important; }
.mobile-link { color: var(--e-navy) !important; }
.mobile-link:active, .mobile-sub a:active { color: var(--e-gold) !important; }
.mobile-sub a { color: var(--e-muted) !important; }
.mobile-menu-panel a[class*="border-luxury-goldLight"] { color: var(--e-navy) !important; border-color: rgba(0, 26, 51, .3) !important; }
.mobile-menu-panel a[class*="border-luxury-line2"] { color: var(--e-navy) !important; border-color: var(--e-line2) !important; }
.mobile-menu-panel button { color: var(--e-navy) !important; border-color: var(--e-line2) !important; }

/* ---------- メインビジュアル ---------- */
/* 写真は lift+ 版を全面に。文字は左1/3のコンクリート壁（補正後 平均193）の上に
   ネイビーの明朝で置く。横方向の幕は全廃し、縦方向に1本だけ残す：
   上端はロゴのために少し沈め、下端は床の反射を残す程度に。 */

.hero-slide[data-slide="1"] {
    background-image: url('../images/relight/hero-01-plus.webp?v=2') !important;
    /* 左に壁だけが来る位置。既定の right 28% だとネットとエアコンが左に入る */
    background-position: 18% 30% !important;
}
/* 写真はネイビーの帯（72px）の下から始める。帯の裏に写真を敷く意味はなく、
   スマホでは上端の被写体（頭）が帯に隠れる。 */
.hero-bg { top: 72px !important; }
/* 縦方向の幕はこの1本だけ。上端は帯からの継ぎ目を馴染ませる程度、下端は床の反射を残す程度。 */
.hero-scrim {
    background: linear-gradient(180deg,
        rgba(0, 26, 51, .2) 0%, rgba(0, 26, 51, 0) 14%,
        rgba(0, 26, 51, 0) 66%, rgba(0, 26, 51, .38) 100%) !important;
}
/* 文字組みを少し上げる。本文3行目の末尾と CTA が、壁の下にある黒い計測器
   （画面 y≈650 から）に掛からない高さに置くため。上下中央揃えなので下の余白で押し上げる。
   上げすぎると h1 の1行目が天井寄りの暗い壁（150前後）に入るので、この値。 */
@media (min-width: 768px) { .hero-copy-wrap { padding-bottom: 100px; } }
/* 追加のグラデーション（index.html の hero-bg の次の div）と、金の光は消す */
.hero-section > div.absolute:not(.hero-bg) { background: none !important; }
.hero-bg::after { display: none !important; }
/* スクロールで沈む層は残すが、昼の部屋なので沈む深さは半分ほどに */
.hero-sink { background: var(--e-navy) !important; opacity: calc(var(--sp) * .32) !important; }

/* 開幕。暗がりから像を結ぶ演出は「昼の部屋」と食い違うので、暗さだけ浅くする
   （同名の @keyframes を後から宣言すると、後勝ちで差し替わる） */
@keyframes heroOpen {
    from { scale: 1.08; filter: blur(var(--fx-open-blur, 14px)) brightness(.85) saturate(.8); }
    to   { scale: 1;    filter: blur(0) brightness(1) saturate(1); }
}

.hero-section .text-luxury-text, .hero-section .text-luxury-text2 { color: var(--e-navy) !important; }
.hero-section .lead-text { color: var(--e-text2) !important; font-weight: 500; }
/* 本文は壁の幅（左1/3）に収める。既定の max-w-2xl だと2文目が拍手している人の上まで届く */
@media (min-width: 768px) { .hero-section .lead-text { max-width: 27em !important; } }
.hero-section .text-luxury-muted, .hero-scroll-cue { color: var(--e-muted) !important; }
.hero-title { filter: none !important; }
.hero-title .gold-gradient-text,
.hero-title .ch.gold-gradient-text {
    background: none !important;
    -webkit-text-fill-color: var(--e-navy) !important;
    color: var(--e-navy) !important;
}
/* 可読性の保険。壁には柱の継ぎ目の暗い筋があるので、文字の周りだけ白くにじませる。
   .fx-chars が1文字ずつ span.ch に割るので、影は文字側に当てる。 */
.hero-title .ch, .hero-section .lead-text { text-shadow: 0 0 24px rgba(248, 249, 250, .75), 0 0 6px rgba(248, 249, 250, .6); }
/* 「ゴルフを嗜む。」の下に、ゴールドの罫を1本 */
.hero-title::after {
    content: "";
    display: block;
    width: 34px;
    height: 1px;
    margin-top: 22px;
    background: var(--e-gold);
}
/* バッジ：白80%の地にネイビー文字 */
.hero-section .bg-white\/8 {
    background-color: rgba(255, 255, 255, .8) !important;
    border-color: rgba(0, 26, 51, .12) !important;
    backdrop-filter: none !important;
}
.hero-section .bg-white\/8 svg { color: var(--e-gold) !important; }
.hero-scroll-cue span { background: linear-gradient(180deg, var(--e-gold), transparent) !important; }

@media (max-width: 767px) {
    /* 390px には文字を「写真の明るい場所」に置く余地がないので、上54svh を写真、
       下を白地にして文字を置く。幕はかけない（写真と文字を重ねない）。 */
    .hero-section { background: var(--e-bg); }
    /* 写真の箱そのものを上54svh にする。全高のまま下を白で隠すと、写真が縦844pxに
       拡大されて胴体のアップ（青いシャツだけ）になり、何の施設か分からない。
       箱を 54svh にすると写真は全高が入り、幅の48%が見える。60% で計測器〜スイングの
       女性までの範囲（写真の31〜79%）が入る。 */
    .hero-bg { top: 72px !important; bottom: 46svh !important; }
    .hero-slide[data-slide="1"] { background-position: 80% center !important; }
    .hero-scrim { background: linear-gradient(180deg, rgba(0, 26, 51, .12) 0%, rgba(0, 26, 51, 0) 14%) !important; }
    /* 追加グラデの div は写真の外側（下46svh）を白で塗る板として使い回す */
    .hero-section > div.absolute:not(.hero-bg) {
        background: linear-gradient(180deg, transparent 54svh, var(--e-bg) 54svh) !important;
    }
    .hero-title .ch, .hero-section .lead-text { text-shadow: none; }
    .hero-title::after { margin-top: 14px; }
    .hero-copy > .fx-step:first-child { margin-bottom: 14px; }
    .hero-title { margin-bottom: 14px; }
    .hero-copy .lead-text { line-height: 1.8; margin-bottom: 18px; }
    .hero-copy > .fx-step:last-child { margin-bottom: 0; }
    .hero-copy-wrap { padding-bottom: 5vh; }
}

/* ---------- コンセプト：ネイビー帯 ---------- */
/* 写真（scene-private の lift 版）は右62%の全高パネルのまま。ネイビーへのフェードは
   86%→30% に短縮して写真の7割を見せる。文字は白、見出しの補助行だけゴールド。 */

#concept { background: var(--e-navy) !important; color: var(--e-on-navy); }
#concept .text-luxury-text { color: var(--e-on-navy) !important; }
#concept .text-luxury-text2 { color: var(--e-on-navy) !important; }
#concept .text-luxury-muted { color: var(--e-on-navy-2) !important; }
#concept .text-luxury-goldLight, #concept svg.text-luxury-goldLight { color: var(--e-gold-on-navy) !important; }
#concept .hover\:text-luxury-text:hover { color: #ffffff !important; }
#concept .eyebrow { color: var(--e-gold-on-navy) !important; }
#concept [style*="to right"] {
    background: linear-gradient(to right, #001a33 0%, rgba(0, 26, 51, .92) 8%, rgba(0, 26, 51, .55) 18%, rgba(0, 26, 51, .18) 26%, rgba(0, 26, 51, 0) 32%) !important;
}
#concept [style*="to bottom"].md\:block {
    background: linear-gradient(to bottom, rgba(0, 26, 51, .55) 0%, rgba(0, 26, 51, 0) 12%, rgba(0, 26, 51, 0) 86%, rgba(0, 26, 51, .55) 100%) !important;
}
/* 帯の下の2枚のカードは白。ネイビーの上で唯一の明るい面になる */
#concept .card-lux .text-luxury-text { color: var(--e-navy) !important; }
#concept .card-lux .text-luxury-muted { color: var(--e-muted) !important; }
#concept .card-lux .eyebrow { color: var(--e-muted) !important; }

@media (max-width: 767px) {
    /* スマホは写真と文字を重ねず、写真を上に置いて下はネイビーだけにする */
    #concept .absolute.inset-0.md\:left-auto {
        position: relative !important;
        inset: auto !important;
        height: 64vw;
        pointer-events: auto;
    }
    #concept [style*="to bottom"].md\:hidden {
        background: linear-gradient(to bottom, rgba(0, 26, 51, .2) 0%, rgba(0, 26, 51, 0) 30%, rgba(0, 26, 51, 0) 70%, #001a33 100%) !important;
    }
    #concept .max-w-6xl.py-24 { padding-top: 2.5rem; }
}

/* ---------- ご利用シーン：見開き ---------- */
/* 全面の見開きは残す。写真は lift 版で、幕は文字側 .5、反対側 0、縦方向は 0。
   見開き同士の間には 96px のネイビーの帯を挟み、4枚が続く重さを切る。 */

#scene { background: var(--e-bg) !important; border-color: var(--e-line) !important; }
.scene-scrim {
    /* シーン02は文字側にシミュレーターの明るい画面が来るので、端だけ .6 まで上げる */
    background: linear-gradient(90deg, rgba(0, 12, 24, .6) 0%, rgba(0, 12, 24, .4) 22%, rgba(0, 12, 24, .12) 48%, rgba(0, 12, 24, 0) 66%) !important;
}
.scene-spread + .scene-spread { border-top: 96px solid var(--e-navy) !important; }
.scene-spread .text-luxury-text, .scene-spread .text-luxury-text2, .scene-spread .text-luxury-muted { color: #ffffff !important; }
.scene-spread .eyebrow { color: var(--e-gold-on-navy) !important; }
.scene-inner, .scene-head, .scene-num { text-shadow: 0 2px 18px rgba(0, 12, 24, .6), 0 1px 3px rgba(0, 12, 24, .45); }
.scene-num { -webkit-text-stroke-color: rgba(255, 255, 255, .55) !important; }
.scene-tate-wrap::before { background: linear-gradient(180deg, rgba(230, 205, 146, 0), rgba(230, 205, 146, .9)) !important; }
.scene-tag { border-color: rgba(255, 255, 255, .45) !important; color: #ffffff !important; }

@media (max-width: 1023px) {
    .scene-spread + .scene-spread { border-top-width: 48px !important; }
    .scene-scrim, .scene-spread--flip .scene-scrim {
        background: linear-gradient(180deg, rgba(0, 12, 24, .04) 0%, rgba(0, 12, 24, .16) 40%, rgba(0, 12, 24, .66) 100%) !important;
    }
}

/* ---------- 施設・設備：白地に矩形の写真 ---------- */
/* facility-simulator の lift+ 版を左58%の矩形で置く。地に溶かす3枚のグラデはやめる */

#facility { background: var(--e-bg) !important; border-color: var(--e-line) !important; }
#facility [style*="to left"], #facility [style*="to bottom"] { background: none !important; }
#facility .md\:w-\[58\%\] img { box-shadow: inset 0 0 0 1px rgba(0, 26, 51, .1); }
#facility .media-frame .from-black\/80 { opacity: .85; }

@media (max-width: 767px) {
    #facility .absolute.inset-0.md\:right-auto {
        position: relative !important;
        inset: auto !important;
        height: 64vw;
        pointer-events: auto;
    }
    #facility .max-w-5xl.py-16 { padding-top: 2rem; }
}

/* ---------- 料金プラン：白地、3プランは同じ形 ---------- */
/* 修正 No.19 で先方は「3プランを同じ形で並べる」を選んでいるので、
   ゴールド会員だけを濃い面にはしない。差は 1.5px の金のヘアライン枠と MOST POPULAR の札だけ。 */

#price { background: var(--e-alt) !important; border-color: var(--e-line) !important; }
#price .card-lux { box-shadow: 0 1px 2px rgba(0, 26, 51, .04), 0 12px 28px rgba(0, 26, 51, .05) !important; }
[class*="from-[#241b12]"] { background-image: none !important; background-color: #ffffff !important; }
#price [class*="p-[1.5px]"] { box-shadow: 0 1px 2px rgba(0, 26, 51, .04), 0 12px 28px rgba(0, 26, 51, .05) !important; }
#price [class*="p-[1.5px]"] .blur-3xl { display: none !important; }
#price .rounded-3xl.bg-luxury-dark { background-color: #ffffff !important; border-color: var(--e-line) !important; }
#price .rounded-3xl .blur-3xl { display: none !important; }
#price [class*="bg-luxury-gold/[0.07]"] { background-color: var(--e-alt) !important; border-color: var(--e-line) !important; }
.price-admission { background: #ffffff !important; border-color: var(--e-line2) !important; }
.price-admission__label { color: var(--e-muted) !important; }

/* ---------- ご来館の流れ ---------- */

#flow { background: var(--e-bg) !important; }
.flow-step { background: var(--e-card) !important; border-color: var(--e-line) !important; box-shadow: 0 10px 24px rgba(0, 26, 51, .06) !important; }
.flow-step::after { background: var(--e-line2) !important; }
.flow-step__head .idx-no { background-color: var(--e-alt) !important; -webkit-text-fill-color: var(--e-navy) !important; color: var(--e-navy) !important; }
.flow-step__more > summary { color: var(--e-muted) !important; }
.flow-step__more > summary:hover { color: var(--e-navy) !important; }
.flow-step__body, .flow-step__lead { color: var(--e-text2) !important; }
.flow-facts { border-color: var(--e-line) !important; }

/* ---------- よくあるご質問：沈めた帯に白いカード、下線タブ ---------- */

#faq { background: var(--e-alt) !important; border-color: var(--e-line) !important; }
.faq-tabs { gap: 0 !important; border-bottom: 1px solid var(--e-line2); }
.faq-tab {
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    padding: 10px 14px !important;
    margin-bottom: -1px;
    background: none !important;
    color: var(--e-muted) !important;
}
.faq-tab:hover { color: var(--e-navy) !important; }
.faq-tab.is-active { color: var(--e-navy) !important; border-bottom-color: var(--e-navy) !important; }
.faq-group__title { color: var(--e-navy) !important; }
.faq-group__title::before { background: var(--e-gold) !important; }
/* Q. と A. の記号だけゴールド */
#faq summary .text-luxury-goldLight, #faq details > div > .text-luxury-goldLight { color: var(--e-gold) !important; }

/* ---------- アクセス ---------- */

#access { background: var(--e-alt) !important; border-color: var(--e-line) !important; }
#access .card-lux, #access .bg-luxury-card { background: #ffffff !important; }
#access iframe { background: #ffffff; }
.route-tab { color: var(--e-muted) !important; }
.route-tab.is-active { background: var(--e-navy) !important; color: #ffffff !important; }
.route-nav { background: rgba(0, 26, 51, .55) !important; color: #ffffff !important; border-color: rgba(255, 255, 255, .3) !important; }
.route-nav:hover { background: rgba(0, 26, 51, .75) !important; }
.route-dot { background: var(--e-line2) !important; }
.route-dot.is-active { background: var(--e-gold) !important; }

/* ---------- SNS・固定ボタン ---------- */

#sns { background: var(--e-bg) !important; border-color: var(--e-line) !important; }
#sns .bg-luxury-card { background: #ffffff !important; }
.floating-cta { background: rgba(248, 249, 250, .96) !important; border-top-color: var(--e-line) !important; }
.sns-bar a { background: rgba(0, 26, 51, .08) !important; color: var(--e-navy) !important; }
.sns-bar a:hover { background: rgba(0, 26, 51, .16) !important; }

/* ---------- フッター：ページ末尾に1回だけネイビー ---------- */

footer.bg-luxury-navy, .bg-luxury-navy { background-color: var(--e-navy) !important; }
footer .text-luxury-text { color: var(--e-on-navy) !important; }
footer .text-luxury-text2, footer .text-luxury-muted, footer .text-luxury-faint { color: var(--e-on-navy-2) !important; }
footer .text-luxury-goldLight, footer svg.text-luxury-goldLight { color: var(--e-gold-on-navy) !important; }
footer .gold-gradient-text { -webkit-text-fill-color: var(--e-gold-on-navy) !important; color: var(--e-gold-on-navy) !important; }
footer .eyebrow { color: var(--e-gold-on-navy) !important; }
footer .border-luxury-line, footer .border-luxury-line2 { border-color: rgba(184, 194, 204, .28) !important; }
footer .card-lux { background: rgba(255, 255, 255, .06) !important; border-color: rgba(184, 194, 204, .26) !important; box-shadow: none !important; }
footer .card-lux .text-luxury-text { color: var(--e-on-navy) !important; }
footer .layer-grain { mix-blend-mode: overlay !important; opacity: .05 !important; }
/* ネイビーの上のボタンはゴールドに戻す（白地のネイビー塗りと逆） */
footer a[class*="from-luxury-goldLight"][class*="to-luxury-gold"] {
    background-image: linear-gradient(90deg, #e6cd92, #c79a3e) !important;
    color: var(--e-navy) !important;
    box-shadow: 0 0 28px rgba(199, 154, 62, .3) !important;
}
footer a[class*="from-luxury-goldLight"][class*="to-luxury-gold"] svg { color: var(--e-navy) !important; }

/* ============================================================
   2026/9/24 追記：写真の上に乗る小さい文字の可読性
   実測で、シーン01のタグの裏が132〜140、シーン02の本文の裏が126あり、
   白文字が負けていた（シミュレーターの画面と大理石のテーブルが明るいため）。
   E案は「文字が乗る場所に幕をかけない」が骨なので、幕は広げず文字の側で解く。
   タグは文字が小さく影だけでは足りないので、半透明の濃い地を敷く。
   ============================================================ */

.scene-tag {
    background: rgba(0, 18, 34, .6) !important;
    border-color: rgba(255, 255, 255, .32) !important;
    padding: 5px 12px !important;
    border-radius: 9999px !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    text-shadow: 0 1px 3px rgba(0, 8, 18, .7) !important;
}

.scene-inner p, .scene-inner .lead-text {
    text-shadow: 0 2px 16px rgba(0, 8, 18, .88), 0 1px 3px rgba(0, 8, 18, .72) !important;
}

.scene-head {
    text-shadow: 0 2px 22px rgba(0, 8, 18, .82), 0 1px 3px rgba(0, 8, 18, .62) !important;
}

/* 2026/9/24 追記：スマホのシーン見出し。
   スマホでは見出しが横書きになって写真の中ほどに乗り、シーン03・04で
   裏の明るさが143／125あった。下側の幕を中ほどから効かせる（上半分の写真は素のまま）。 */
@media (max-width: 1023px) {
    .scene-scrim, .scene-spread--flip .scene-scrim {
        background: linear-gradient(180deg, rgba(0, 10, 20, .08) 0%, rgba(0, 10, 20, .1) 30%, rgba(0, 10, 20, .5) 50%, rgba(0, 10, 20, .78) 70%, rgba(0, 10, 20, .88) 100%) !important;
    }
    .scene-head { text-shadow: 0 2px 18px rgba(0, 8, 18, .9), 0 1px 3px rgba(0, 8, 18, .75) !important; }
}

/* 2026/9/24 追記：シーンの説明文とタグ。
   幕を濃くすると写真ごと暗くなるので、幕は元のまま、文字の塊だけに半透明のカードを敷く。 */
.scene-stack > div:not(.scene-tate-wrap) {
    background: rgba(0, 18, 34, .62);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 6px;
    padding: 22px 26px 24px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    max-width: 30rem;
}
.scene-stack > div:not(.scene-tate-wrap) .scene-tags { margin-top: 1.25rem !important; }
.scene-stack > div:not(.scene-tate-wrap) .scene-tag {
    background: rgba(255, 255, 255, .08) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.scene-inner p, .scene-inner .lead-text { text-shadow: none !important; }
@media (max-width: 1023px) {
    .scene-stack > div:not(.scene-tate-wrap) { padding: 18px 18px 20px; }
}

/* シミュレーター紹介：58%幅の写真が右の本文の下に入り込み、白地用の濃い文字が写真に乗っていた。
   写真は本文の手前（中央から16px左）で止める。 */
@media (min-width: 768px) {
    #facility .md\:w-\[58\%\] { width: calc(50% - 16px) !important; }
}

/* 2026/9/24：その他設備の4枚の写真のキャプション（01 ラウンジソファ など）。
   明るい地のテーマで文字色がネイビーに置き換わり、写真の暗い部分の上で読めなくなっていた。
   写真の上に乗る文字なので、白に戻して下から暗いグラデーションを敷く。 */
#facility .media-frame > .bg-gradient-to-t {
    background-image: linear-gradient(to top, rgba(0, 12, 24, .84) 0%, rgba(0, 12, 24, .18) 55%, rgba(0, 12, 24, 0) 100%) !important;
}
#facility .media-frame .absolute.bottom-3,
#facility .media-frame .absolute.bottom-3 * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .55) !important;
}
#facility .media-frame .absolute.bottom-3 .idx-no {
    background: none !important;
    color: #e6cd92 !important;
    -webkit-text-fill-color: #e6cd92 !important;
}