/* ============================================================
   F案：ネイビー × 白で、明るく力強く（2026/9/24）

   E案（theme-e-room.css）の白地化をそのまま土台にし、この上から重ねる。
   変えたのは4点。
     1. 明朝をやめ、見出しは Noto Sans JP の 900（ガイドライン 4.2）。
        英字は Helvetica Neue／Arial の太字斜体を大きく敷く（同 4.1）。
     2. ヒーローを左右2分割に組み直す。左にネイビーの面と白い大見出し、
        右に写真。境目はゴールドの斜めの帯1本。写真と文字を重ねない。
     3. 面の配分を「白・ネイビー・白」と大きく切り替える。
        ネイビーはヒーロー左・施設・フッター。白はそれ以外。
     4. ゴールドは差し色として、ボタン・見出しの下線マーカー・太い罫・数字だけに使う
        （3.4 のサブカラー面積 5〜10% に収める）。

   Tailwind の CDN が実行時にスタイルを差し込むので、ここも !important で勝つ。
   ============================================================ */

:root {
    --f-navy: #001a33;      /* 3.1 マネジメントネイビー */
    --f-gray: #99a0aa;      /* 3.2 コンクリートグレー */
    --f-white: #f8f9fa;     /* 3.3 アーキテクチュラルホワイト */
    --f-gold: #c79a3e;      /* 差し色。ネイビー文字を載せても 7:1 */
    --f-gold-lt: #e6cd92;   /* ネイビー地の上の文字用 */
    --f-text2: #2c3a47;
    --f-muted: #56616e;
    --f-on-navy-2: #c3cad2;
    --f-en: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --f-radius: 20px;
}

/* ---------- 書体：明朝をすべてゴシックへ ---------- */

body, .font-serif, .font-sans { font-family: 'Noto Sans JP', sans-serif !important; }
.font-serif { font-weight: 900 !important; letter-spacing: .02em !important; }
h2.font-serif { line-height: 1.35 !important; }
body { color: var(--f-navy) !important; }
.lead-text, p { letter-spacing: .02em; }

/* 英字（ラベル・番号・価格）は Helvetica Neue の太字 */
.eyebrow, .idx-no, .font-mono, .scene-num { font-family: var(--f-en) !important; }

/* 白地の見出しで強調していた金のグラデ文字は、ネイビー文字＋ゴールドの下線マーカーに */
.gold-gradient-text {
    -webkit-text-fill-color: var(--f-navy) !important;
    color: var(--f-navy) !important;
    background: linear-gradient(transparent 64%, rgba(199, 154, 62, .42) 64%, rgba(199, 154, 62, .42) 92%, transparent 92%) !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    padding: 0 .06em;
}
/* 1文字ずつ割る見出しでは、マーカーも1文字ずつ付く（隙間なく続いて見える） */
.ch.gold-gradient-text { padding: 0; }

/* ---------- セクション見出し ---------- */
/* 英字ラベルを大きな斜体で敷き、その下に和文の太い見出し。
   ラベルは装飾ではなく「いまどこか」の目印なので、読める濃さ（グレー）にする。 */

.eyebrow:has(+ h2),
.eyebrow:has(+ p + h2) {
    display: block !important;
    font-size: clamp(40px, 7vw, 84px) !important;
    font-weight: 700 !important;
    font-style: italic;
    letter-spacing: -.02em !important;
    line-height: 1 !important;
    text-transform: uppercase;
    color: var(--f-gray) !important;
    opacity: .55;
    margin-bottom: 0 !important;
}
.eyebrow:has(+ h2)::before,
.eyebrow:has(+ p + h2)::before { display: none !important; }
section h2.font-serif { font-size: clamp(28px, 4.2vw, 44px) !important; margin-top: 10px !important; }
/* 見出しの下に、太いゴールドの短い罫 */
section h2.font-serif::after {
    content: "";
    display: block;
    width: 56px;
    height: 5px;
    border-radius: 3px;
    margin-top: 18px;
    background: var(--f-gold);
}
.text-center h2.font-serif::after { margin-left: auto; margin-right: auto; }

/* 小さい英字ラベル（カードの中など）は太字の詰めた組みに */
.eyebrow {
    font-weight: 700 !important;
    letter-spacing: .14em !important;
    color: var(--f-muted) !important;
}
.eyebrow::before { width: 20px !important; height: 3px !important; border-radius: 2px; background: var(--f-gold) !important; }

/* 番号：太字斜体のゴールド */
.idx-no {
    font-weight: 700 !important;
    font-style: italic;
    letter-spacing: -.02em !important;
    -webkit-text-fill-color: var(--f-gold) !important;
    color: var(--f-gold) !important;
}

/* ---------- ボタン ---------- */
/* 主ボタンはゴールドの塗り、文字はネイビーの太字。どの地の上でも同じ形にする */
a[class*="from-luxury-goldLight"][class*="to-luxury-gold"],
nav.nav-bar a[class*="from-luxury-goldLight"][class*="to-luxury-gold"],
footer a[class*="from-luxury-goldLight"][class*="to-luxury-gold"] {
    background-image: none !important;
    background-color: var(--f-gold) !important;
    color: var(--f-navy) !important;
    font-weight: 900 !important;
    letter-spacing: .04em;
    box-shadow: 0 6px 0 #8f6c25, 0 16px 30px rgba(0, 26, 51, .22) !important;
    transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out) !important;
}
a[class*="from-luxury-goldLight"][class*="to-luxury-gold"]:hover {
    transform: translateY(2px) !important;
    box-shadow: 0 4px 0 #8f6c25, 0 10px 20px rgba(0, 26, 51, .2) !important;
}
a[class*="from-luxury-goldLight"][class*="to-luxury-gold"] svg { color: var(--f-navy) !important; }
nav.nav-bar a[class*="from-luxury-goldLight"][class*="to-luxury-gold"] { box-shadow: 0 3px 0 #8f6c25 !important; }

/* 囲みのボタン：白地ではネイビーの太い枠 */
a[class*="border-luxury-goldLight"][class*="rounded"]:not(nav a):not(footer a):not(.mobile-menu-panel a) {
    border-width: 2px !important;
    border-color: var(--f-navy) !important;
    color: var(--f-navy) !important;
    font-weight: 700 !important;
}

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

.card-lux {
    border: 0 !important;
    border-radius: var(--f-radius) !important;
    background: #ffffff !important;
    box-shadow: 0 2px 4px rgba(0, 26, 51, .05), 0 18px 40px rgba(0, 26, 51, .08) !important;
}
/* 上辺の金の極細線は、左上の太い短い帯に */
.card-lux::after {
    left: 28px !important; right: auto !important; top: 0 !important;
    width: 44px !important; height: 5px !important;
    border-radius: 0 0 3px 3px;
    background: var(--f-gold) !important;
    opacity: 1 !important;
}
.card-lux__inner { border-radius: 14px !important; }

/* ============================================================
   メインビジュアル：左にネイビーの面、右に写真
   ============================================================ */

.hero-section { background: var(--f-navy) !important; }
/* 写真の箱。左端を斜めに切る。スクロールのパララックスはやめる
   （切り口の形と、その裏のゴールドの帯がずれるため） */
.hero-bg {
    top: 72px !important;
    left: 44% !important;
    translate: none !important;
    clip-path: polygon(110px 0, 100% 0, 100% 100%, 0 100%);
    z-index: 1;
}
/* 切り口と平行に走るゴールドの帯。写真の箱と同じ形を 12px 左へずらして裏に置く */
.hero-section::before {
    content: "";
    position: absolute;
    top: 72px; bottom: 0;
    left: calc(44% - 12px); right: 0;
    background: var(--f-gold);
    clip-path: polygon(110px 0, 100% 0, 100% 100%, 0 100%);
    z-index: 0;
}
/* 右の箱は正方形に近いので、スイングの女性と拍手の2人が入る右寄りの位置 */
.hero-slide[data-slide="1"] { background-position: 80% 40% !important; }
.hero-scrim { background: linear-gradient(180deg, rgba(0, 26, 51, .18) 0%, rgba(0, 26, 51, 0) 18%) !important; }
.hero-sink { display: none !important; }
.hero-section > div.absolute:not(.hero-bg) { background: none !important; }

/* 開幕：切り口があるのでボケと拡大は使わず、明るさだけで立ち上げる */
@keyframes heroOpen {
    from { opacity: 0; filter: brightness(.6); }
    to   { opacity: 1; filter: brightness(1); }
}

/* 背景に大きく敷く英字。ロゴではなく、ただの文字組み（ロゴ画像は触らない） */
.f-hero-word {
    position: absolute;
    left: 3vw; bottom: 3vh;
    z-index: 0;
    font-family: var(--f-en);
    font-weight: 700;
    font-style: italic;
    font-size: clamp(56px, 6.2vw, 110px);
    line-height: .86;
    letter-spacing: -.03em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(153, 160, 170, .28);
    pointer-events: none;
    user-select: none;
}

.hero-copy-wrap { z-index: 2 !important; }
.hero-copy { max-width: min(540px, 38vw) !important; }
@media (min-width: 768px) { .hero-copy-wrap { padding-bottom: 40px !important; } }

.hero-section .text-luxury-text, .hero-section .text-luxury-text2 { color: #ffffff !important; }
.hero-section .lead-text { color: var(--f-on-navy-2) !important; font-weight: 500; max-width: none !important; }
.hero-title .ch, .hero-section .lead-text { text-shadow: none !important; }
.hero-title {
    font-weight: 900 !important;
    font-size: clamp(2.2rem, 3.9vw, 3.7rem) !important;
    line-height: 1.28 !important;
    letter-spacing: .01em !important;
}
/* ネイビーの上の強調はゴールドの文字（マーカーは白地専用） */
.hero-title .gold-gradient-text,
.hero-title .ch.gold-gradient-text {
    background: none !important;
    -webkit-text-fill-color: var(--f-gold-lt) !important;
    color: var(--f-gold-lt) !important;
}
.hero-title::after { width: 64px !important; height: 6px !important; border-radius: 3px; background: var(--f-gold) !important; margin-top: 24px !important; }
.hero-section .bg-white\/8 {
    background: transparent !important;
    border: 2px solid rgba(255, 255, 255, .5) !important;
    color: #ffffff !important;
}
.hero-section .bg-white\/8 svg { color: var(--f-gold-lt) !important; }
.hero-scroll-cue { display: none !important; left: 4vw !important; translate: none !important; --tw-translate-x: 0 !important; color: var(--f-gray) !important; z-index: 2; }
.hero-scroll-cue span { background: linear-gradient(180deg, var(--f-gold), transparent) !important; }

/* タブレット以下：写真を上、ネイビーの面を下に。境目は下辺を斜めに切る */
@media (max-width: 1023px) {
    section.hero-section { align-items: flex-end !important; }
    .hero-bg {
        left: 0 !important;
        bottom: auto !important;
        height: 50svh !important;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), 0 100%);
    }
    .hero-section::before {
        left: 0; bottom: auto;
        height: calc(50svh + 10px);
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), 0 100%);
    }
    .hero-slide[data-slide="1"] { background-position: 80% center !important; }
    .hero-copy { max-width: 36rem !important; }
    .f-hero-word { display: none; }
    .hero-scroll-cue { display: none !important; }
}
@media (max-width: 767px) {
    .hero-title { font-size: clamp(1.75rem, 7.6vw, 2.2rem) !important; }
    .hero-title::after { margin-top: 12px !important; height: 5px !important; width: 48px !important; }
    .hero-copy .lead-text { font-size: 13.5px !important; line-height: 1.75 !important; margin-bottom: 16px !important; }
    .hero-copy > .fx-step:first-child { margin-bottom: 10px !important; }
    .hero-copy-wrap { padding-bottom: 3.5vh !important; }
}
/* 画面の低いスマホ（2026/10/21 先方の端末）では、文字が写真へ押し上がって帯の下に隠れていた。
   文字は必ず写真と帯の下から始め、収まらないぶんはヒーローを縦に伸ばす */
@media (max-width: 1023px) {
    .hero-section { height: auto !important; }
    .hero-copy-wrap { padding-top: calc(72px + 50svh + 24px) !important; }
}

/* ============================================================
   コンセプト：白地。写真は右端まで抜け、角を丸めてネイビーの影を落とす
   ============================================================ */

#concept { background: var(--f-white) !important; color: var(--f-navy) !important; }
#concept .text-luxury-text, #concept .text-luxury-text2 { color: var(--f-navy) !important; }
#concept .text-luxury-muted { color: var(--f-muted) !important; }
#concept .text-luxury-goldLight { color: var(--f-navy) !important; }
#concept svg.text-luxury-goldLight, #concept i.text-luxury-goldLight { color: var(--f-gold) !important; }
#concept .eyebrow { color: var(--f-gray) !important; }
#concept .card-lux .eyebrow { color: var(--f-muted) !important; }
#concept .reveal > p.text-lg { font-weight: 700; color: var(--f-muted) !important; }
#concept [style*="linear-gradient"] { background: none !important; }
#concept a.border-b.border-luxury-goldLight { border-width: 0 0 3px !important; border-color: var(--f-gold) !important; }

@media (min-width: 768px) {
    #concept .absolute.inset-0.md\:left-auto {
        width: 46% !important;
        top: 72px !important; bottom: 72px !important;
        border-radius: 32px 0 0 32px;
        overflow: hidden;
    }
    /* 影は写真の外側に出す。overflow:hidden の箱でも box-shadow は外に描ける */
    #concept .absolute.inset-0.md\:left-auto { box-shadow: -18px 18px 0 var(--f-navy); }
}
@media (max-width: 767px) {
    #concept .absolute.inset-0.md\:left-auto { margin: 24px 16px 0 0; border-radius: 0 24px 24px 0; overflow: hidden; box-shadow: 10px 10px 0 var(--f-navy); }
}

/* チェックのリストは、小さなゴールドの丸に */
#concept ul li i[data-lucide="check"], #concept ul li svg {
    background: var(--f-gold);
    color: var(--f-navy) !important;
    border-radius: 9999px;
    padding: 3px;
    stroke-width: 3.2;
}

/* ============================================================
   ご利用シーン：見開きを、角の丸い大きなカードに並べ直す
   ============================================================ */

#scene { background: var(--f-white) !important; border: 0 !important; padding-bottom: clamp(24px, 4vw, 56px); }
.scene-spread {
    margin: 0 clamp(12px, 3vw, 40px);
    border-radius: 28px;
    min-height: 80svh !important;
}
.scene-spread + .scene-spread { border-top: 0 !important; margin-top: clamp(14px, 2vw, 24px); }
@media (min-width: 1024px) { .scene-spread { min-height: 86svh !important; } }

/* 見出しは縦組みをやめて横組みの太字。1段の長さの縛り（10字）は縦組みのものなので外れる */
.scene-head {
    writing-mode: horizontal-tb !important;
    height: auto !important;
    max-height: none !important;
    letter-spacing: .01em !important;
    line-height: 1.35 !important;
    font-size: clamp(26px, 3.4vw, 46px) !important;
    font-weight: 900 !important;
}
@media (min-width: 1024px) {
    .scene-stack { display: block !important; max-width: 34rem !important; }
    .scene-spread--flip .scene-stack { text-align: left !important; }
    .scene-spread--flip .scene-stack .eyebrow { flex-direction: row !important; }
    .scene-spread--flip .scene-tags { justify-content: flex-start !important; }
    .scene-stack .mt-6 { margin-top: 20px !important; }
}
/* 見出しの上の細い縦罫は、太いゴールドの横棒に */
.scene-tate-wrap::before {
    width: 48px !important; height: 5px !important;
    border-radius: 3px;
    margin: 0 0 18px !important;
    background: var(--f-gold) !important;
}
.scene-spread .eyebrow { color: var(--f-gold-lt) !important; }
.scene-num {
    font-weight: 700 !important;
    font-style: italic;
    -webkit-text-stroke: 2px rgba(255, 255, 255, .7) !important;
}
.scene-tag {
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    font-size: 12px !important;
    background: rgba(0, 26, 51, .72) !important;
    border: 0 !important;
}

/* ============================================================
   施設・設備：ネイビーの面。写真は左端から抜けて角を丸める
   ============================================================ */

#facility { background: var(--f-navy) !important; border: 0 !important; color: #ffffff; }
#facility .text-luxury-text, #facility .text-luxury-text2, #facility h2, #facility h3 { color: #ffffff !important; }
#facility .text-luxury-muted { color: var(--f-on-navy-2) !important; }
#facility .eyebrow { color: var(--f-on-navy-2) !important; }
#facility .eyebrow:has(+ h2) { color: var(--f-gray) !important; opacity: .45; }
#facility .gold-gradient-text {
    background: none !important;
    -webkit-text-fill-color: var(--f-gold-lt) !important;
    color: var(--f-gold-lt) !important;
}
#facility .layer-grain { mix-blend-mode: overlay !important; opacity: .05 !important; }
#facility [style*="linear-gradient"] { background: none !important; }
#facility a { color: var(--f-gold-lt) !important; }
#facility .card-lux { background: rgba(255, 255, 255, .06) !important; box-shadow: none !important; }
#facility .border-luxury-line, #facility .border-luxury-line2 { border-color: rgba(195, 202, 210, .22) !important; }
#facility a[class*="border-luxury-goldLight"] { border-color: var(--f-gold) !important; color: var(--f-gold-lt) !important; }
@media (min-width: 768px) {
    #facility .absolute.inset-0.md\:right-auto {
        width: 46% !important;
        top: 24px !important; bottom: 24px !important;
        border-radius: 0 32px 32px 0;
        overflow: hidden;
        box-shadow: 18px 18px 0 var(--f-gold);
    }
}
@media (max-width: 767px) {
    #facility .absolute.inset-0.md\:right-auto { margin: 0 0 0 16px; border-radius: 24px 0 0 24px; overflow: hidden; box-shadow: -10px 10px 0 var(--f-gold); }
}

/* ============================================================
   料金プラン：白いカードを3枚、同じ形で（修正 No.19）
   ============================================================ */

#price { background: #eef1f4 !important; border: 0 !important; }
#price .font-mono { font-weight: 700 !important; letter-spacing: -.01em; }
#price p.font-mono { color: var(--f-navy) !important; -webkit-text-fill-color: var(--f-navy) !important; background: none !important; }
#price [class*="p-[1.5px]"] { background: var(--f-navy) !important; padding: 3px !important; border-radius: 26px !important; }
#price [class*="p-[1.5px]"] > div { border-radius: 23px !important; }
#price .text-luxury-goldLight\/70, #price .text-xs.font-mono { color: var(--f-muted) !important; }
.price-admission { border-radius: 9999px !important; border-width: 2px !important; font-weight: 700; }
.price-admission__label { background: var(--f-navy); color: #ffffff !important; border-radius: 9999px; padding: 2px 10px; }

/* ============================================================
   ご利用の流れ・よくあるご質問・アクセス・SNS
   ============================================================ */

#flow { background: var(--f-white) !important; }
.flow-step { border: 0 !important; border-radius: var(--f-radius) !important; }
.flow-step__head .idx-no {
    background: var(--f-navy) !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
    font-style: italic;
}

#faq { background: #eef1f4 !important; border: 0 !important; }
.faq-tab { font-weight: 700 !important; }
.faq-tab.is-active { border-bottom-width: 4px !important; border-bottom-color: var(--f-gold) !important; }
#faq details { border-radius: 14px !important; }
#faq summary { font-weight: 700; }

#access { background: var(--f-white) !important; border: 0 !important; }
#access iframe { border-radius: 16px; }
.route-tab { font-weight: 700 !important; }

#sns { background: #eef1f4 !important; border: 0 !important; }

/* フッター前の「まずは、見学・体験から。」はネイビーの面の上なので白 */
footer h2.font-serif, footer .text-luxury-text { color: #ffffff !important; }
footer .eyebrow:has(+ h2) { color: var(--f-gray) !important; opacity: .45; }
footer p.font-serif { font-weight: 700 !important; }

/* ============================================================
   ナビ：E案のネイビーの帯のまま。ロゴ横の文字だけゴシックの太字に
   ============================================================ */

nav.nav-bar .font-serif { font-family: var(--f-en) !important; font-weight: 700 !important; letter-spacing: .08em !important; }
nav.nav-bar .text-luxury-goldLight { color: var(--f-gold-lt) !important; }
nav.nav-bar a.nav-link, nav.nav-bar .hidden.lg\:flex a { font-weight: 700; }

/* 2026/9/24 確認後の手直し */
/* 見出しそのものに強調が付くとき（ゴールド会員）は、マーカーを文字の幅だけに */
h3.gold-gradient-text { display: inline-block; }
.price-admission, .price-admission span { color: var(--f-navy) !important; -webkit-text-fill-color: var(--f-navy) !important; }
/* 質問が縦に並ぶところでは、カードごとの金の帯は多すぎる */
#faq .card-lux::after, #flow .card-lux::after { display: none !important; }
/* E案の「#concept svg.text-luxury-goldLight」より強くして、チェックの線をネイビーに */
#concept ul li svg.text-luxury-goldLight { color: var(--f-navy) !important; }
/* スマホで札が行いっぱいに伸びないように */
.price-admission__label { align-self: center; width: fit-content; }

/* ============================================================
   2026/9/24 ご指摘への対応
   ============================================================ */

/* ご利用シーン：写真の上の文字が読みにくい（シミュレーターの画面や大理石のテーブルが
   文字の裏に来る）。幕を濃くすると写真が暗くなるので、文字のまとまりだけを
   ネイビーの板に載せる。板の上なので、文字の影はもう要らない。 */
.scene-stack {
    background: rgba(0, 26, 51, .88);
    border-radius: 20px;
    padding: 28px 24px 30px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 18px 40px rgba(0, 12, 24, .28);
}
@media (min-width: 1024px) {
    .scene-stack { padding: 40px 44px 44px !important; }
}
.scene-inner, .scene-head, .scene-inner p, .scene-inner .lead-text, .scene-tag { text-shadow: none !important; }
.scene-inner p, .scene-inner .lead-text { color: #e6eaee !important; }
/* 板の上のタグは、白い枠線だけの軽い形に */
.scene-tag { background: transparent !important; border: 1.5px solid rgba(255, 255, 255, .5) !important; backdrop-filter: none !important; }
/* 板が文字を受け持つので、写真の幕は縁を締める程度まで薄くする */
.scene-scrim, .scene-spread--flip .scene-scrim {
    background: linear-gradient(180deg, rgba(0, 12, 24, 0) 55%, rgba(0, 12, 24, .25) 100%) !important;
}

/* 「ご入会はこちら」：文字を白に。いつものゴールド #C79A3E に白では 2.6:1 しか出ないので、
   このボタンだけゴールドを沈めた #946F26（白と 4.6:1）で塗る。 */
a[href*="admission.smarthello"][class*="from-luxury-goldLight"] {
    background-color: #946f26 !important;
    color: #ffffff !important;
    box-shadow: 0 5px 0 #6b5019, 0 14px 28px rgba(0, 26, 51, .22) !important;
}
a[href*="admission.smarthello"][class*="from-luxury-goldLight"] svg { color: #ffffff !important; }
/* ナビ側は上の「nav.nav-bar a[class*=…][class*=…]」がネイビー文字で強いので、同じ強さ以上で書き直す */
nav.nav-bar a[href*="admission.smarthello"][class*="from-luxury-goldLight"][class*="to-luxury-gold"],
footer a[href*="admission.smarthello"][class*="from-luxury-goldLight"][class*="to-luxury-gold"] {
    background-color: #946f26 !important;
    color: #ffffff !important;
    box-shadow: 0 3px 0 #6b5019 !important;
}
/* PCでは板を写真の下端・左右の端へ寄せる。顔は写真の上半分にあるので、下に置けば人に掛からない
   （中央寄りだとシーン03のコーチが板の裏に隠れた）。
   板の幅は「プライベートレッスン」10字が1行に入る 40rem。 */
@media (min-width: 1024px) {
    .scene-inner { max-width: none !important; padding: 0 clamp(28px, 4vw, 64px) clamp(28px, 4vw, 56px) !important; align-items: flex-end !important; }
    .scene-stack { max-width: 40rem !important; }
    .scene-head { font-size: clamp(26px, 2.8vw, 40px) !important; }
}

/* 2026/9/24 ご指摘：「見学・体験を申し込む」が暗く沈んで見える。
   原因は #C79A3E の単色塗りと、下に敷いた濃い茶色の段（#8F6C25）。
   明るいゴールドの縦グラデーションに替え、段はやめて、柔らかい影で浮かせる。
   ネイビー文字とのコントラストは明るくした分だけ上がる（9:1 前後）。
   白文字の「ご入会はこちら」は、白が読める濃さが要るので対象外。 */
a[class*="from-luxury-goldLight"][class*="to-luxury-gold"]:not([href*="admission.smarthello"]),
footer a[class*="from-luxury-goldLight"][class*="to-luxury-gold"]:not([href*="admission.smarthello"]) {
    background-color: #e2c27a !important;
    background-image: linear-gradient(180deg, #f0d9a0 0%, #dcb766 100%) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset, 0 12px 28px rgba(199, 154, 62, .38) !important;
}
a[class*="from-luxury-goldLight"][class*="to-luxury-gold"]:not([href*="admission.smarthello"]):hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset, 0 16px 34px rgba(199, 154, 62, .46) !important;
}

/* 2026/9/24 ご指摘：「ご入会はこちら」が黄土色に見える。白文字のまま、ゴールドへ寄せる。
   上 #C29A45 → 下 #A07A2C のグラデーション。白との比は平均で約 3.2:1 と、
   前の #946F26（4.6:1）より下がるので、文字に薄い影を足して輪郭を立てる。 */
a[href*="admission.smarthello"][class*="from-luxury-goldLight"],
nav.nav-bar a[href*="admission.smarthello"][class*="from-luxury-goldLight"][class*="to-luxury-gold"],
footer a[href*="admission.smarthello"][class*="from-luxury-goldLight"][class*="to-luxury-gold"] {
    background-color: #b08a38 !important;
    background-image: linear-gradient(180deg, #c29a45 0%, #a07a2c 100%) !important;
    text-shadow: 0 1px 2px rgba(60, 40, 5, .45);
}

/* コンセプト：数字の帯（箇条書きの置き換え）。
   ここは「何があるか」を数字で言い切り、下の2枚のカードは「どう過ごせるか」を語る。 */
.f-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 8px;
}
.f-facts > div {
    position: relative;
    padding: 16px 18px 14px;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 26, 51, .05), 0 10px 24px rgba(0, 26, 51, .07);
}
.f-facts > div::before {
    content: "";
    position: absolute; left: 18px; top: 0;
    width: 28px; height: 4px;
    border-radius: 0 0 3px 3px;
    background: var(--f-gold);
}
/* dt → dd → p の順に書いてあるが、見た目は数字を主役にする */
.f-facts dt { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--f-muted); }
.f-facts dd {
    margin: 2px 0 0;
    font-family: var(--f-en);
    font-weight: 700;
    font-style: italic;
    font-size: clamp(34px, 3.6vw, 44px);
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--f-navy);
}
.f-facts dd small {
    font-family: 'Noto Sans JP', sans-serif;
    font-style: normal;
    font-weight: 900;
    font-size: .42em;
    margin-left: 3px;
    color: var(--f-gold);
}
/* 「持込OK」は漢字が主役なので、和文の太字で組む */
.f-facts > div:last-child dd { font-family: 'Noto Sans JP', sans-serif; font-style: normal; font-weight: 900; font-size: clamp(28px, 3vw, 36px); }
.f-facts p { margin-top: 4px; font-size: 12px; color: var(--f-muted); }

/* ============================================================
   2026/9/24 第2弾：「もっと遊んで、若者らしい疾走感を」
   動きは速く短く、向きは左→右（読む向き・前へ進む向き）にそろえる。
   斜めの角度は、ヒーローの切り口（高さに対して 110px ずれる）を全体の基準にする。
   prefers-reduced-motion では末尾でまとめて止める。
   ============================================================ */

:root {
    --f-fast: cubic-bezier(.2, .9, .1, 1);   /* 一気に出て、ぴたっと止まる */
    --fx-char-step: 28ms;                    /* 1文字の送りを速く（既定 45ms） */
}

/* ---------- 共通：出方を「下から」から「左から斜めに滑り込む」へ ---------- */

.fx-chars .ch {
    transform: translateX(-28px) skewX(-14deg) !important;
    filter: none !important;
}
.fx-chars.is-visible .ch {
    transform: none !important;
    transition: opacity .35s ease, transform .5s var(--f-fast) !important;
    transition-delay: calc(var(--fx-lead) + var(--c) * var(--fx-char-step)) !important;
}
.reveal { transform: translateX(-40px) skewX(-4deg); transition: opacity .6s ease, transform .7s var(--f-fast); }
.reveal.is-visible { transform: none; }
.fx-stage .fx-step, .fx-follow { transform: translateX(-24px); }
.fx-stage.is-visible .fx-step, .fx-chars.is-visible ~ .fx-follow { transform: none; }

/* ---------- 1. ヒーロー ---------- */

.f-hero-word { display: none !important; }

/* 2行目「ゴルフを嗜む。」だけ前傾させる。和文に斜体はないので skew で傾ける */
.hero-title .ln:last-child { transform: skewX(-9deg); transform-origin: 0 100%; }

/* 切り口と平行な線。写真の箱と同じ台形の切り方を、幅だけ細くして使う */
.f-speed { position: absolute; top: 72px; bottom: 0; left: 44%; right: 0; z-index: 1; pointer-events: none; }
.f-speed i {
    position: absolute; inset: 0;
    background: #ffffff;
    clip-path: polygon(110px 0, calc(110px + var(--w)) 0, var(--w) 100%, 0 100%);
    translate: var(--x) 0;
    opacity: var(--o);
    animation: fSwoosh .9s var(--f-fast) both;
    animation-delay: var(--d);
}
.f-speed i:nth-child(1) { --x: -40px;  --w: 3px;  --o: .35; --d: .15s; }
.f-speed i:nth-child(2) { --x: -64px;  --w: 10px; --o: 1;   --d: .25s; background: var(--f-gold); }
.f-speed i:nth-child(3) { --x: -96px;  --w: 2px;  --o: .2;  --d: .35s; }
@keyframes fSwoosh {
    from { translate: calc(var(--x) - 38vw) 0; opacity: 0; }
    to   { translate: var(--x) 0; opacity: var(--o); }
}

/* 下端を流れる英字の帯。白地にネイビーの斜体、区切りだけゴールド。少し傾けて走らせる */
.f-ticker {
    position: absolute;
    left: -2%; right: -2%; bottom: 34px;
    z-index: 3;
    background: #ffffff;
    transform: rotate(-2deg);
    box-shadow: 0 10px 30px rgba(0, 12, 24, .28);
    overflow: hidden;
    pointer-events: none;
}
.f-ticker__track { display: flex; width: max-content; animation: fTicker 38s linear infinite; }
.f-ticker__track span {
    display: block;
    padding: 11px 0;
    white-space: nowrap;
    font-family: var(--f-en);
    font-weight: 700;
    font-style: italic;
    font-size: 17px;
    letter-spacing: .06em;
    color: var(--f-navy);
}
.f-ticker__track b { color: var(--f-gold); margin: 0 .9em; font-weight: 700; }
@keyframes fTicker { to { transform: translateX(-50%); } }

/* ボタンの矢印を、前へ前へと小刻みに動かす */
.hero-section a[class*="from-luxury-goldLight"] svg { animation: fNudge 1.4s var(--f-fast) infinite; }
@keyframes fNudge { 0%, 55%, 100% { transform: none; } 30% { transform: translateX(5px); } }

@media (min-width: 1024px) { .hero-copy-wrap { padding-bottom: 90px !important; } }

@media (max-width: 1023px) {
    .f-speed { display: none; }
    /* スマホは写真の下辺（斜めの切り口）に沿わせる */
    .f-ticker { bottom: auto; top: calc(72px + 50svh - 46px); transform: rotate(-4deg); }
    .f-ticker__track span { font-size: 13px; padding: 8px 0; }
}

@media (prefers-reduced-motion: reduce) {
    .f-speed i, .f-ticker__track, .hero-section a[class*="from-luxury-goldLight"] svg { animation: none !important; }
    .reveal, .fx-stage .fx-step, .fx-follow { transform: none !important; }
}

/* ---------- 2. コンセプト ---------- */

/* 数字のカードを平行四辺形に。器を傾け、中身は逆に傾けて文字をまっすぐ戻す */
.f-facts { gap: 14px 16px; padding-left: 8px; }
.f-facts > div { transform: skewX(-10deg); border-radius: 12px; transition: transform .35s var(--f-fast), box-shadow .35s var(--f-fast); }
.f-facts > div > * { transform: skewX(10deg); }
.f-facts > div:hover { transform: skewX(-10deg) translateY(-4px); box-shadow: 0 2px 4px rgba(0, 26, 51, .06), 0 18px 34px rgba(0, 26, 51, .14); }
/* 左上の短い金の帯は、傾けた器の左上角に沿う */
.f-facts > div::before { left: 14px; }
/* 見えた順に、左から1枚ずつ滑り込む */
#concept .reveal .f-facts > div { opacity: 0; translate: -36px 0; transition: opacity .45s ease, translate .6s var(--f-fast), transform .35s var(--f-fast), box-shadow .35s var(--f-fast); }
#concept .reveal.is-visible .f-facts > div { opacity: 1; translate: 0 0; }
#concept .reveal.is-visible .f-facts > div:nth-child(1) { transition-delay: .5s, .5s, 0s, 0s; }
#concept .reveal.is-visible .f-facts > div:nth-child(2) { transition-delay: .6s, .6s, 0s, 0s; }
#concept .reveal.is-visible .f-facts > div:nth-child(3) { transition-delay: .7s, .7s, 0s, 0s; }
#concept .reveal.is-visible .f-facts > div:nth-child(4) { transition-delay: .8s, .8s, 0s, 0s; }

/* 写真の裏に、ゴールドの斜線（スピード線）の面を1枚。ネイビーの影とは反対側へずらす */
@media (min-width: 768px) {
    #concept > .relative { position: relative; }
    #concept > .relative::before {
        content: "";
        position: absolute;
        right: 0; top: 30px;
        width: 30%; height: 180px;
        background: repeating-linear-gradient(-60deg, rgba(199, 154, 62, .55) 0 3px, transparent 3px 14px);
        z-index: 0;
        pointer-events: none;
    }
}
/* 英字の大見出しは、左から大きく流れ込む */
#concept .eyebrow:has(+ p + h2) { transform: translateX(-60px); opacity: 0; transition: transform .9s var(--f-fast), opacity .6s ease; }
#concept .reveal.is-visible .eyebrow:has(+ p + h2) { transform: none; opacity: .55; }

@media (prefers-reduced-motion: reduce) {
    #concept .reveal .f-facts > div { opacity: 1 !important; translate: none !important; }
    #concept .eyebrow:has(+ p + h2) { transform: none !important; opacity: .55 !important; }
}

/* ---------- 3. ご利用シーン ---------- */

/* シーン名を流す帯（BUSINESS／PRIVATE…）は、うるさいとのことで外した（2026/9/24）。
   流れる帯はヒーローとフッター手前の2本だけ。 */

/* カードの右下の角を斜めに落とす。切り口の向きはヒーローと同じ（右上がり） */
.scene-spread { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 72px), calc(100% - 72px) 100%, 0 100%); }
.scene-spread--flip { clip-path: polygon(0 0, 100% 0, 100% 100%, 72px 100%, 0 calc(100% - 72px)); }

/* 文字の板を平行四辺形に。中身は逆に傾けてまっすぐ戻す */
.scene-stack { transform: skewX(-6deg); border-radius: 14px !important; }
.scene-stack > * { transform: skewX(6deg); }

/* 板は見えたときに横から滑り込む。flip（板が右）は右から、通常は左から */
.scene-spread .scene-stack { opacity: 0; translate: -80px 0; transition: opacity .5s ease .15s, translate .8s var(--f-fast) .15s; }
.scene-spread--flip .scene-stack { translate: 80px 0; }
.scene-spread.is-visible .scene-stack { opacity: 1; translate: 0 0; }

/* 番号は、板と逆の側から大きく流れ込む */
.scene-spread .scene-num { transition: translate .9s var(--f-fast) .25s, opacity .6s ease .25s; translate: 90px 0; opacity: 0; }
.scene-spread--flip .scene-num { translate: -90px 0; }
.scene-spread.is-visible .scene-num { translate: 0 0; opacity: 1; }

/* 写真は、少し寄った状態から引いて落ち着く */
.scene-spread .scene-photo img { transition: transform 1.4s var(--f-fast) !important; transform: scale(1.12) !important; }
.scene-spread.is-visible .scene-photo img { transform: scale(1) !important; }

@media (prefers-reduced-motion: reduce) {
    .scene-spread .scene-stack, .scene-spread .scene-num { opacity: 1 !important; translate: none !important; }
    .scene-spread .scene-photo img { transform: none !important; }
}
/* カード全体は傾けずに出す（中の板と番号が動くので、器まで動くとうるさい） */
.scene-spread.reveal { transform: none !important; }

/* ---------- 4. 施設・設備 ---------- */

/* ネイビーの面そのものを、上下とも斜めに切って前後のセクションへ食い込ませる */
#facility {
    position: relative;
    z-index: 2;
    margin-top: -64px;
    margin-bottom: -64px;
    padding-top: calc(6rem + 64px) !important;
    padding-bottom: calc(6rem + 64px) !important;
    clip-path: polygon(0 64px, 100% 0, 100% calc(100% - 64px), 0 100%);
}
#price { padding-top: calc(5rem + 64px) !important; }

/* 写真の右辺を、ヒーローの切り口と同じ向きに斜めに切る。裏にゴールドの帯を1本 */
@media (min-width: 768px) {
    #facility .absolute.inset-0.md\:right-auto {
        border-radius: 0 !important;
        box-shadow: none !important;
        clip-path: polygon(0 0, 100% 0, calc(100% - 110px) 100%, 0 100%);
    }
    #facility > .relative:has(> .absolute.inset-0.md\:right-auto)::before {
        content: "";
        position: absolute;
        left: 0; top: 24px; bottom: 24px;
        width: 46%;
        translate: 16px 0;
        background: var(--f-gold);
        clip-path: polygon(calc(100% - 10px) 0, 100% 0, calc(100% - 110px) 100%, calc(100% - 120px) 100%);
    }
}

/* 01〜03 の番号を大きく。項目は上から順に、左から滑り込む */
#facility .idx-no { font-size: clamp(40px, 4vw, 56px) !important; line-height: 1; }
#facility .space-y-8 > div { opacity: 0; translate: -48px 0; transition: opacity .45s ease, translate .7s var(--f-fast); }
#facility .reveal.is-visible.space-y-8 > div { opacity: 1; translate: 0 0; }
#facility .reveal.is-visible.space-y-8 > div:nth-child(2) { transition-delay: .12s; }
#facility .reveal.is-visible.space-y-8 > div:nth-child(3) { transition-delay: .24s; }

/* 英字の大見出しは右から流れ込む（コンセプトと逆向き） */
#facility .eyebrow:has(+ h2) { transform: translateX(60px); opacity: 0; transition: transform .9s var(--f-fast), opacity .6s ease; }
#facility .reveal.is-visible .eyebrow:has(+ h2) { transform: none; opacity: .45; }

@media (max-width: 767px) {
    #facility { clip-path: polygon(0 36px, 100% 0, 100% calc(100% - 36px), 0 100%); }
}
@media (prefers-reduced-motion: reduce) {
    #facility .space-y-8 > div { opacity: 1 !important; translate: none !important; }
    #facility .eyebrow:has(+ h2) { transform: none !important; opacity: .45 !important; }
}

/* ---------- 5. 料金プラン ---------- */

/* 3枚は、左右は外から、中央は下から勢いよく入る */
#price .grid > .reveal:nth-child(1) { transform: translateX(-70px) rotate(-3deg); }
#price .grid > .reveal:nth-child(3) { transform: translateX(70px) rotate(3deg); }
#price .grid > .reveal:nth-child(2) { transform: translateY(50px) scale(.94); }
#price .grid > .reveal.is-visible { transform: none; transition: opacity .5s ease, transform .75s var(--f-fast); }
#price .grid > .reveal.is-visible:nth-child(2) { transition-delay: .12s; }

/* 触れると少し前傾して浮く */
@media (hover: hover) {
    #price .grid > .reveal.is-visible:hover { transform: translateY(-6px) rotate(-1deg); transition: transform .3s var(--f-fast); }
}

/* 背景に、左上から走るゴールドの斜線を1束 */
#price::before {
    content: "";
    position: absolute;
    left: 0; top: 120px;
    width: 26%; height: 160px;
    background: repeating-linear-gradient(-60deg, rgba(199, 154, 62, .4) 0 3px, transparent 3px 14px);
    pointer-events: none;
}
/* 価格の数字は、他の英数字と同じく少し前傾 */
#price p.font-mono { font-style: italic; }

@media (prefers-reduced-motion: reduce) {
    #price .grid > .reveal { transform: none !important; }
}
/* 入会金の札：前に書いた「.price-admission span をネイビーに」が札の文字まで塗っていた */
.price-admission .price-admission__label { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }
@media (max-width: 767px) {
    /* 札は文字幅のまま1行目、本文をまるごと2行目へ（既定は札を100%幅にして改行させている） */
    .price-admission .price-admission__label { flex: 0 0 auto !important; }
    .price-admission > span[data-mgp] { flex: 0 0 100%; text-align: center; }
}

/* ---------- 6. ご利用の流れ ---------- */

/* 番号札を平行四辺形のネイビーに */
.flow-step__head .idx-no {
    transform: skewX(-10deg);
    border-radius: 4px !important;
    font-size: 22px !important;
    width: 40px !important;
    padding: 2px 0;
    text-align: center;
}
/* 段と段をつなぐ縦線を、ゴールドの太線に */
.flow-step::after { background: linear-gradient(180deg, var(--f-gold), rgba(199, 154, 62, .15)) !important; width: 3px !important; }
/* 左右から交互に滑り込む */
.flow-steps > .flow-step.reveal:nth-child(even) { transform: translateX(40px) skewX(4deg); }
.flow-steps > .flow-step.reveal.is-visible { transform: none; }
/* 触れると右へ少し進む */
@media (hover: hover) {
    .flow-step { transition: transform .3s var(--f-fast), box-shadow .3s var(--f-fast), opacity .6s ease !important; }
    .flow-step.is-visible:hover { transform: translateX(6px); box-shadow: -6px 0 0 var(--f-gold), 0 14px 30px rgba(0, 26, 51, .1) !important; }
}

/* ---------- 7. よくあるご質問 ---------- */

/* タブを、下線から平行四辺形のボタンに */
.faq-tabs { gap: 8px !important; border-bottom: 0 !important; flex-wrap: wrap; justify-content: center; }
.faq-tab {
    transform: skewX(-10deg);
    border-radius: 6px !important;
    border: 2px solid rgba(0, 26, 51, .14) !important;
    background: #ffffff !important;
    padding: 8px 16px !important;
    margin: 0 !important;
    transition: background .2s ease, color .2s ease, transform .25s var(--f-fast) !important;
}
.faq-tab:hover { transform: skewX(-10deg) translateY(-2px); }
.faq-tab.is-active { background: var(--f-navy) !important; border-color: var(--f-navy) !important; color: #ffffff !important; }
/* Q. と A. を大きな斜体に */
#faq summary .text-luxury-goldLight, #faq details > div > .text-luxury-goldLight {
    font-family: var(--f-en); font-style: italic; font-weight: 700; font-size: 20px;
}
/* 開いた質問は、左にゴールドの太線 */
#faq details[open] { box-shadow: inset 5px 0 0 var(--f-gold), 0 12px 28px rgba(0, 26, 51, .08) !important; }

/* ---------- 8. アクセス ---------- */

#access iframe { border-radius: 0 !important; clip-path: polygon(0 0, 100% 0, calc(100% - 40px) 100%, 0 100%); }
.route-tab { border-radius: 6px !important; transform: skewX(-10deg); }

/* ---------- 9. 公式SNS ---------- */

#sns a.reveal { border: 0 !important; box-shadow: 0 12px 28px rgba(0, 26, 51, .08); transition: transform .3s var(--f-fast), box-shadow .3s var(--f-fast), opacity .6s ease !important; }
@media (hover: hover) {
    #sns a.reveal.is-visible:hover { transform: translateY(-6px) rotate(-1.2deg); box-shadow: 0 20px 36px rgba(0, 26, 51, .14); }
}

/* ---------- 10. フッターへの境目 ---------- */

.f-ticker--foot {
    position: relative;
    left: auto; right: auto; bottom: auto; top: auto;
    margin: 0 -2% -18px;
    background: var(--f-gold);
    transform: rotate(-1.6deg);
    z-index: 5;
}
.f-ticker--foot .f-ticker__track { animation-duration: 26s; }
.f-ticker--foot .f-ticker__track span { color: var(--f-navy); font-size: clamp(18px, 2.2vw, 28px); padding: 12px 0; }
.f-ticker--foot .f-ticker__track b { color: #ffffff; }
@media (max-width: 1023px) { .f-ticker--foot { top: auto; transform: rotate(-1.6deg); } }

@media (prefers-reduced-motion: reduce) {
    .f-ticker__track { animation: none !important; }
    .flow-steps > .flow-step.reveal:nth-child(even) { transform: none !important; }
}


/* ---------- ヒーローのスライド（2026/9/24 ご指摘） ---------- */

/* 1枚目：スイングする女性の顔へ、ゆっくり寄る。寄る中心は末尾のJSが顔の位置から計算して
   --face-x / --face-y に入れる。index.css の heroDrift と同じく「終点＝基準値」にして、
   is-active が外れた瞬間に画が跳ねないようにする（基準の transform も 1.10）。
   2026/9/24「速すぎる」とのご指摘で、1.18・9秒・ease-in-out から 1.10・12秒・一定速に。
   中盤の最速どうしで比べて約4分の1の速さ。尺はJSの切替間隔と共通なので、2枚目も12秒になる。 */
:root { --hero-slide-hold: 12000ms; }
.hero-slide[data-slide="1"] {
    transform-origin: var(--face-x, 62%) var(--face-y, 30%) !important;
    transform: scale(1.10);
}
.hero-slide[data-slide="1"].is-active { animation: fZoomHer var(--hero-slide-hold) linear forwards; }
@keyframes fZoomHer {
    from { transform: scale(1); }
    to   { transform: scale(1.10); }
}

/* 2枚目：E案で外していたものを戻す。右の箱はほぼ正方形なので、
   構える女性とコーチ、画面の弾道が入る位置。切り口に女性が掛からないよう少し右へ */
.hero-slide[data-slide="2"] { background-position: 34% 45% !important; transform-origin: 40% 45%; }
@media (max-width: 1023px) {
    /* index.css はスマホで2枚目を横長の箱にして右へ流す（全画面ヒーロー用）。
       F案の写真は上半分の箱なので、その仕組みを外して普通の寄りに戻す */
    .hero-slide[data-slide="2"] {
        right: 0 !important; width: auto !important;
        translate: none !important;
        background-position: 30% center !important;
        transform: scale(1.06) !important;
    }
    .hero-slide[data-slide="2"].is-active { animation: heroDrift var(--hero-slide-hold) linear forwards !important; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide[data-slide="1"], .hero-slide[data-slide="2"] { transform: none !important; }
    .hero-slide[data-slide="1"].is-active, .hero-slide[data-slide="2"].is-active { animation: none !important; }
}

/* ============================================================
   2026/9/24 ご指摘：シーン03・04で、文字の板が写真の人物に被る
   板を写真の上に載せる限り、人物の位置は写真ごとに違うので、どこかで必ず被る。
   ヒーローと同じく「写真と文字を重ねない」組みに、4枚そろえて切り替える。
   PC：カードをネイビーの面にし、写真は6割、文字は4割。写真の文字側の辺は
       ヒーローと同じ角度（高さに対して110pxずれる）で斜めに切る。
   スマホ：写真を上、文字を下に積む。
   左右の入れ替え（flip）は従来どおり写真の人物の位置で決まっている。
   ============================================================ */

.scene-spread { background: var(--f-navy) !important; }
.scene-scrim { display: none !important; }
.scene-spread .layer-grain { mix-blend-mode: overlay !important; opacity: .05 !important; }

/* 板はやめて、ネイビーの面そのものに文字を置く */
.scene-stack {
    background: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
}
.scene-stack > * { transform: none !important; }

@media (min-width: 1024px) {
    .scene-spread { min-height: 74svh !important; align-items: stretch !important; }
    /* 通常：文字が左、写真が右 */
    .scene-photo { inset: 0 0 0 40% !important; clip-path: polygon(110px 0, 100% 0, 100% 100%, 0 100%); }
    /* flip：写真が左、文字が右 */
    .scene-spread--flip .scene-photo { inset: 0 40% 0 0 !important; clip-path: polygon(0 0, 100% 0, calc(100% - 110px) 100%, 0 100%); }
    /* 写真の箱が縦長寄りになったので、スマホ用の横位置（--focus）をPCでも使う */
    .scene-photo img { object-position: var(--focus, 50%) 50% !important; }

    .scene-inner {
        width: 44% !important;
        max-width: none !important;
        margin: 0 !important;
        min-height: 0 !important;
        padding: clamp(150px, 20vh, 200px) clamp(32px, 4vw, 64px) 64px !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }
    .scene-spread--flip .scene-inner { margin-left: auto !important; padding-left: calc(110px + 8px) !important; }
    .scene-spread:not(.scene-spread--flip) .scene-inner { padding-right: calc(110px + 8px) !important; }
    .scene-stack { max-width: 30rem !important; }

    /* 番号は写真の上から、文字側のネイビーの面の左上へ移す */
    .scene-num,
    .scene-spread--flip .scene-num {
        font-size: clamp(88px, 9vw, 140px) !important;
        top: clamp(32px, 5vh, 56px) !important;
        bottom: auto !important;
        right: auto !important;
        left: clamp(32px, 4vw, 64px) !important;
    }
    .scene-spread--flip .scene-num { left: calc(56% + 110px + 8px) !important; }
}

@media (max-width: 1023px) {
    .scene-spread { display: block !important; min-height: 0 !important; }
    .scene-photo {
        position: relative !important;
        inset: auto !important;
        height: 64vw;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), 0 100%);
    }
    .scene-inner { padding: 20px 22px 56px !important; }
    .scene-num, .scene-spread--flip .scene-num { font-size: clamp(64px, 18vw, 96px) !important; top: 12px !important; right: 16px !important; left: auto !important; }
}

/* E案（theme-e-room.css）が説明文に敷いた半透明のカードは、F案ではネイビーの面の上なので要らない。
   F案はE案のCSSの上に重ねているため、E案の追記がそのまま効いてしまう。ここで打ち消す。 */
.scene-stack > div:not(.scene-tate-wrap) {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
.scene-stack > div:not(.scene-tate-wrap) .scene-tag { background: transparent !important; }

/* 写真の横位置。スマホは箱がほぼ写真と同じ比率になったので中央でよい。
   PCは箱が縦寄りで左右が切れる。04は構えている男性が左端にいて、切り口にも掛かるので左へ寄せる */
@media (max-width: 1023px) { .scene-photo img { object-position: 50% 50% !important; } }
@media (min-width: 1024px) {
    .scene-photo img { object-position: 50% 50% !important; }
    #scene article.scene-spread:nth-of-type(4) .scene-photo img { object-position: 40% 50% !important; }
}

/* フッター手前の傾いた帯は左右に2%はみ出す。body で切っても画面の幅が広がるので、帯を包んで横だけ切る
   （見本ページの <style> にあったものを、本番化にあわせてここへ移した。2026/9/29） */
.f-ticker-clip { overflow-x: clip; }

/* ============================================================
   サブページ（2026/9/29）
   運営者情報・ご利用のお願い・お問い合わせは、ページ専用のCSSに
   黒×金の色を直接書いていた。白地では文字が消えるので、ここで塗り直す。
   ============================================================ */

/* 運営者情報：表組み */
.info-table th, .info-table td { border-bottom-color: var(--e-line2) !important; }
.info-table th { color: var(--f-navy) !important; }
.info-table td { color: var(--f-text2) !important; }
.info-table a { color: var(--f-navy) !important; }

/* ご利用のお願い：写真の下のラベル */
.step-label { color: var(--f-text2) !important; }
.step-card:focus-visible .step-thumb { box-shadow: 0 0 0 2px var(--f-gold) !important; }

/* お問い合わせ：案内の箱・入力欄・バッジ */
.contact-note, .contact-lead, .contact-agree {
    background: var(--e-card) !important;
    border-color: var(--e-line2) !important;
    color: var(--f-text2) !important;
}
.contact-lead--gold { border-color: rgba(199, 154, 62, .55) !important; }
.contact-note *, .contact-lead p, .contact-lead span, .contact-agree span { color: var(--f-text2) !important; }
.contact-lead a:not(.contact-line-btn), .contact-note a { color: var(--f-navy) !important; font-weight: 700; }
.contact-lead .contact-line-btn, .contact-lead .contact-line-btn * { color: #fff !important; }
.contact-group { border-color: var(--e-line2) !important; background: var(--e-card); }
.contact-group > legend { color: var(--f-navy) !important; }
.contact-label, .contact-visit__title { color: var(--f-navy) !important; }
.contact-visit { background: rgba(199, 154, 62, .06) !important; border-color: rgba(199, 154, 62, .4) !important; }
.contact-field {
    background-color: #fff !important;  /* shorthand だとセレクトの矢印（背景画像）まで消える */
    border-color: var(--e-line2) !important;
    color: var(--f-navy) !important;
}
.contact-field::placeholder { color: var(--e-faint) !important; }
.contact-help { color: var(--f-muted) !important; }
.contact-req { background: rgba(199, 154, 62, .14) !important; border-color: rgba(199, 154, 62, .55) !important; color: #7a5a17 !important; }
.contact-opt { background: var(--e-alt) !important; border-color: var(--e-line2) !important; color: var(--f-muted) !important; }
.contact-agree a { color: var(--f-navy) !important; }
.contact-submit { color: var(--f-navy) !important; }
.contact-errors { background: #fdecec !important; border-color: #e5a3a3 !important; color: #9b1c1c !important; }
.contact-errors p { color: #9b1c1c !important; }
.contact-done-mark { color: #7a5a17 !important; }