/* トップページ（index.html）専用
 *
 * ヒーロー（スライドショー・パララックス・開幕演出）、ご利用シーンの見開き、
 * 文字送りのモーション、固定CTA、SNSバー、順路スライダー。
 * site.css の後に読むので、共通の値をここで上書きできる。 */

/* 固定ナビ分のアンカー位置補正（JS無効時のフォールバック） */
html { scroll-padding-top: 88px; }

/* 明朝の鉤括弧は全角ぶんの幅を取るが、中身はほとんど余白。
   見出しでは詰めたほうが収まりがよく、1行に入る確率も上がる。 */
.kagi { font-size: .74em; letter-spacing: 0; }

/* セクション見出しの英字ラベル */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #c79a3e;
}

.eyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #c79a3e);
}

/* ヒーロー */
.hero-section {
    min-height: 100svh;
    height: 100svh;
    isolation: isolate;
    /* スクロール量。末尾のパララックスIIFEが毎フレーム書き込む。
       --sy = スクロールした px、--sp = ヒーロー高さで割った 0→1 の進み具合。
       JSは値を渡すだけで、動かし方はすべてこの下のCSSが決める。 */
    --sy: 0px;
    --sp: 0;
    --hero-depth: .42;   /* 背景が沈む速さ。1 でスクロールと同速＝奥行きなし */
}

/* 背景スライドショー：.hero-slide を重ねてクロスフェード。
   暗幕（.hero-scrim）は写真の上・グロー(::after)の下に置く。
   .hero-bg ごと下へずらすことでパララックスを作る。スライド側の transform（寄り）とは
   別レイヤーなので、両者が打ち消し合わない。

   パララックスは transform ではなく translate、開幕は scale と、
   個別プロパティに分けてある。まとめて transform に書くと、
   開幕アニメーションが走っている間パララックスが固まってしまう。 */
.hero-bg {
    translate: 0 calc(var(--sy) * var(--hero-depth));
    animation: heroOpen var(--fx-open) var(--ease-out) forwards;
    will-change: translate, scale, filter;
}

/* 開幕：暗がりとボケから写真が像を結ぶ。
   幕やワイプのような「図形」を動かさず、写真そのものの見え方だけで開ける。
   ぼかしは要素の外側を透明として畳むため、端がにじまないよう
   1.08倍から始めて余白を作っておく（縦の食い込み27px > ぼかしの見かけの広がり）。 */
@keyframes heroOpen {
    from {
        scale: 1.08;
        filter: blur(var(--fx-open-blur, 14px)) brightness(.42) saturate(.7);
    }
    to {
        scale: 1;
        filter: blur(0) brightness(1) saturate(1);
    }
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: right 28%;
    transform-origin: 70% 40%;
    transform: scale(1.06);
    opacity: 0;
    transition: opacity 1.6s ease;
}

/* 2枚しかないので、寄る中心を変えて単調さを消す。拡大率は同じ。
   背景位置も1枚目とは別。コースの映る画面と笑っている二人が入る高さに合わせ、
   寄る中心も右側の三人に置く（1枚目は左寄り） */
.hero-slide[data-slide="2"] {
    transform-origin: 62% 45%;
    background-position: center 45%;
}

.hero-slide.is-active {
    opacity: 1;
    animation: heroDrift var(--hero-slide-hold) linear forwards;
}

.hero-slide[data-slide="1"] { background-image: url('../images/hero-01.webp?v=2'); }

.hero-scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(12, 9, 7, 0.86) 0%, rgba(12, 9, 7, 0.55) 38%, rgba(12, 9, 7, 0.12) 64%, rgba(12, 9, 7, 0.42) 100%),
        linear-gradient(180deg, rgba(12, 9, 7, 0.12) 0%, rgba(12, 9, 7, 0.04) 46%, rgba(12, 9, 7, 0.82) 100%);
}

/* スクロールに応じて沈み込みぶんだけ暗くする層。
   全面レイヤーに filter: brightness() をかけるより opacity のほうがずっと軽い。 */
.hero-sink {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: #0c0907;
    opacity: calc(var(--sp) * .55);
}

/* 終点(1.06)は非アクティブ時の transform と同じ値にしてある。
   クラスを外してアニメーションが消えても画がガクッと動かない。
   この不変条件があるので、尺は必ず切替間隔（--hero-slide-hold）以下にすること。 */
@keyframes heroDrift {
    from { transform: scale(1); }
    to   { transform: scale(1.06); }
}

.hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 24% 42%, rgba(230, 205, 146, 0.13), transparent 32%),
                radial-gradient(circle at 84% 18%, rgba(199, 154, 62, 0.16), transparent 30%);
    pointer-events: none;
}

.hero-title {
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.2;
    letter-spacing: .06em;
}

/* 文字は背景より速く上へ抜ける。速度差そのものが奥行きになる */
.hero-copy {
    max-width: 760px;
    transform: translate3d(0, calc(var(--sy) * -.16), 0);
    /* 最初の8%は薄くしない。スクロールし始めた途端に色が抜けると、
       まだ画面に残っているCTAが不具合のように見える。 */
    opacity: calc(1 - (var(--sp) - .08) * 1.35);
}

.hero-scroll-cue { opacity: calc(1 - var(--sp) * 3); }

/* 打ち消しなので、上書き対象（.hero-bg / .hero-copy / .hero-scroll-cue）より後に置くこと */
@media (prefers-reduced-motion: reduce) {
    /* 動かさないなら拡大する理由もない。等倍のほうが写真が鮮明に出る */
    .hero-slide { transform: none; }
    .hero-slide.is-active { animation: none; }
    .hero-bg { animation: none; translate: none; }
    .hero-copy { transform: none; }
    .hero-copy, .hero-scroll-cue { opacity: 1; }
    .hero-sink { opacity: 0; }
}

@media (max-height: 820px) and (min-width: 768px) {
    .hero-title { font-size: clamp(1.8rem, 3.4vw, 2.9rem); }
    .hero-copy p { font-size: .95rem; }
}

@media (max-width: 767px) {
    .hero-slide { background-position: center; }
    /* 2枚目は幅の3割しか映らず、1画面に全員は入らない。止め絵で妥協せず、
       一番左で構えている男性を起点に、右へごく ゆっくり振る。
       どこかへ「到達」させる送りではない。速さを落とすには距離を削るしかなく
       （尺は切替間隔で頭打ち）、右の男性まで行こうとすると必ず速くなる。
       いまは画面2割ぶんを7秒かけて動くだけ。足りないぶんの「動いている感じ」は
       寄り（scale）が担う。送りと寄りは向きが違うので、重ねても忙しくならない。
       送りは background-position ではなく translate。前者は毎フレーム全面を
       描き直すので、狭い端末ほど重い。写真の幅ぶんの箱を敷いて箱ごと動かせば
       合成だけで済む（切り抜きは .hero-section の overflow-hidden が担う）。
       translate の % は自分自身の幅が基準なので、-22% ＝ 写真の左から22%地点が
       画面左端、という読み方になる。出だしの -22% は、構えている女性の背中が
       画面左端に触れるぎりぎりの値。これ以上送ると彼女が切れる。 */
    .hero-slide[data-slide="2"] {
        right: auto;
        width: calc(100svh * 16 / 9);   /* 写真そのものの比。cover でも切り取られない */
        background-position: left center;
        /* 箱は画面の3.4倍の幅がある。原点を既定の中央（＝画面外）にすると
           寄りが横滑りに化けるので、送っている間の画面中央あたりに置く。 */
        transform-origin: 38% 45%;
        transform: scale(1.02);         /* 終点＝基準値。heroDrift と同じ不変条件 */
        translate: -24% 0;              /* 同上 */
    }
    .hero-slide[data-slide="2"].is-active {
        /* ここだけ --ease-out を使わないのは、あれが出だしで一気に動く曲線で、
           「ゆっくり右へ」と正反対の見え方になるため。両端が緩む ease-in-out が
           カメラの振りに近い。 */
        animation: heroPan2 var(--hero-slide-hold) ease-in-out forwards;
    }
    /* 動く量がここまで小さいと「止め」を長く取る意味がないので、頭だけ残して
       7.4秒かけて動かし切る。振り幅は画面の7%ぶん、寄りは2%。
       毎秒5pxほどの、言われないと気づかない速さ。 */
    @keyframes heroPan2 {
        0%, 10%   { translate: -22% 0; transform: scale(1); }
        92%, 100% { translate: -24% 0; transform: scale(1.02); }
    }
    /* 1枚目は中央だと打っている女性が右端に寄りすぎる。62%まで送ると
       画面のやや右に立ち、左に拍手する二人が入る。送りすぎると
       （72%超）右奥の女性が半身で切れるので、そこが上限。 */
    .hero-slide[data-slide="1"] { background-position: 80% center; }
    /* 文字組みは下半分に寄せてあるので、上半分は薄くして写真を見せる。
       全面を均一に落とすと、狭い画面では写真がほとんど残らない。
       上端だけ戻しているのはロゴとハンバーガーの可読性のため。 */
    .hero-scrim {
        background: linear-gradient(180deg,
            rgba(12, 9, 7, 0.34) 0%,
            rgba(12, 9, 7, 0.10) 20%,
            rgba(12, 9, 7, 0.22) 42%,
            rgba(12, 9, 7, 0.62) 62%,
            rgba(12, 9, 7, 0.88) 80%,
            rgba(12, 9, 7, 0.96) 100%);
    }
    /* 文字を画面の下側に寄せる。空いた上半分が写真の見せ場になる。
       要素セレクタを足しているのは Tailwind の items-center（同じ詳細度）に勝つため。 */
    section.hero-section { align-items: flex-end; }
    .hero-copy-wrap { padding-bottom: 6vh; }
    .hero-title { letter-spacing: .03em; }
    /* 端末が非力な前提で、ずらす量を控えめに。
       全面のぼかしは初回描画と競合するので、モバイルでは暗さと寄りだけで開ける。 */
    .hero-section { --hero-depth: .22; }
    .hero-bg { --fx-open-blur: 0px; }
}

/* 上の低モーション指定（.hero-slide.is-active）より詳細度が高いので、
   2枚目の送りはここで別に打ち消す。止まった先は基準値＝女性の側。 */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .hero-slide[data-slide="2"].is-active { animation: none; }
}

/* 横向きにした端末や、極端に低いウィンドウ。文字組みは下端寄せなので、収まらないぶんは
   上へはみ出す＝バッジがナビの裏に潜る。CTAの位置は動かさず、行間と余白だけを詰めて逃がす。
   幅の条件を付けていないのは、横向き（幅768px超・高さ400px前後）でも同じことが起きるため。
   モバイル用ブロック（max-width: 767px）が padding-bottom を指定しているので、必ずその後ろに置くこと。 */
@media (max-height: 500px) {
    .hero-copy > .fx-step:first-child { margin-bottom: 12px; }   /* バッジ */
    .hero-title { font-size: clamp(1.5rem, 3.4vw, 2rem); margin-bottom: 12px; }
    .hero-copy .lead-text { line-height: 1.65; margin-bottom: 16px; }
    .hero-copy > .fx-step:last-child { margin-bottom: 18px; }    /* CTA */
    .hero-copy-wrap { padding-bottom: 4vh; }
}

/* パネルの中に入れ子にする小パネル。落ち影は持たせず、面を沈めるだけで階層を出す */
.card-lux__inner {
    position: relative;
    border-radius: 14px;
    padding: 22px;
    background: linear-gradient(180deg, rgba(20, 16, 12, 0.92), rgba(12, 9, 7, 0.92));
    border: 1px solid rgba(47, 38, 25, 0.95);
    box-shadow: inset 0 1px 0 rgba(244, 239, 230, 0.04);
}

/* 写真の上に重ねる巨大な通し番号。塗ってしまうと絵を殺すので輪郭だけにする。
   金の面積が増えないので、大きくしても派手になりすぎない。 */
.idx-no--outline {
    background: none;
    -webkit-text-stroke: 1px rgba(199, 154, 62, 0.3);
    line-height: 0.8;
    letter-spacing: 0;
    pointer-events: none;
    user-select: none;
}

/* 同じアイコンを巨大化して隅に沈める。カードの中にも奥行きをつくる */
.card-lux__ghost {
    position: absolute;
    right: -26px;
    bottom: -30px;
    color: #c79a3e;
    opacity: 0.05;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .card-lux { transition: none; }
    .card-lux:hover { transform: none; }
}

/* ── ご利用シーンの見開き（#scene 専用） ──
   1シーン＝ほぼ1画面。全面写真の上に縦組みの明朝見出しを重ねる、誌面の見開きの組み方。
   左右は1シーンごとに反転する（暗幕・番号・文字組みが揃って入れ替わる）。 */
.scene-spread {
    position: relative;
    min-height: 78svh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .scene-spread { min-height: 92svh; align-items: center; }
}

.scene-spread + .scene-spread { border-top: 1px solid #2f2619; }

.scene-photo { position: absolute; inset: 0; }

/* 縦長に切り取られるスマホでは、被写体の位置を写真ごとに指定する
   （インラインの --focus で渡す。既定は中央）。 */
.scene-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--focus, 50%) 50%;
    transform: scale(1.06);
    transition: transform 1.4s var(--ease-out);
}

.scene-spread.is-visible .scene-photo img { transform: none; }

@media (min-width: 1024px) {
    /* 横幅に余裕があるので、写真は元の構図のまま見せる */
    .scene-photo img { object-position: 50% 50%; }
}

/* 暗幕は写真ごとに焼き込まず、この1枚で持つ。反転は transform だけで済む。 */
.scene-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(6, 4, 3, .94) 0%, rgba(6, 4, 3, .8) 26%, rgba(6, 4, 3, .38) 52%, rgba(6, 4, 3, .12) 74%, rgba(6, 4, 3, .3) 100%),
        linear-gradient(180deg, rgba(6, 4, 3, .55) 0%, rgba(6, 4, 3, 0) 34%, rgba(6, 4, 3, .55) 100%);
}

.scene-spread--flip .scene-scrim { transform: scaleX(-1); }

@media (max-width: 1023px) {
    /* スマホは横に逃げ場がないので、下から上へ暗くする一枚に差し替える */
    .scene-scrim,
    .scene-spread--flip .scene-scrim {
        transform: none;
        background: linear-gradient(180deg, rgba(6, 4, 3, .5) 0%, rgba(6, 4, 3, .72) 42%, rgba(6, 4, 3, .95) 100%);
    }
}

/* 番号は文字とは反対側の足元へ。3枚とも写真の下端は床なので、被写体に重ならない。 */
.scene-num {
    position: absolute;
    right: 4vw;
    bottom: 8vh;
    font-size: clamp(120px, 20vw, 300px);
    z-index: 2;
}

.scene-spread--flip .scene-num { right: auto; left: 4vw; }

@media (max-width: 1023px) {
    /* スマホは文字が下半分を占めるので、番号は上へ逃がす */
    .scene-num, .scene-spread--flip .scene-num { left: auto; right: 5vw; bottom: auto; top: 4vh; }
}

.scene-inner {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
    padding: 56px 24px;
}

/* 見出しと本文はひと組にして、暗幕の濃い側へ寄せる。
   見出しだけ写真の明るい側へ出すと、白い明朝が背景に負ける。 */
.scene-stack { display: block; }

@media (min-width: 1024px) {
    .scene-inner { min-height: 92svh; padding: 0 16px; display: flex; align-items: center; }
    .scene-stack { display: flex; align-items: flex-end; gap: 52px; max-width: 40rem; }
    .scene-spread--flip .scene-inner { justify-content: flex-end; }
    .scene-spread--flip .scene-stack { flex-direction: row-reverse; text-align: right; }
    .scene-spread--flip .scene-stack .eyebrow { flex-direction: row-reverse; }
    .scene-spread--flip .scene-stack .eyebrow::before {
        background: linear-gradient(270deg, transparent, #c79a3e);
    }
    .scene-spread--flip .scene-tags { justify-content: flex-end; }
}

/* 見出しは1つだけ置き、PCでだけ縦組みに切り替える（同じ文言を2つ並べると読み上げが二重になる）。
   縦組みでは height が「行の長さ」になる。auto だと段が勝手に折り返すので、
   height: max-content で「<br> で切ったところだけが段になる」状態に固定し、
   max-height を保険にする（画面が低いときだけ折り返して、はみ出さない）。
   1段は最長10文字までに収めること。それを超えると低い画面で段が増える。 */
.scene-head { font-size: clamp(26px, 6vw, 34px); line-height: 1.5; }

@media (min-width: 1024px) {
    .scene-head {
        writing-mode: vertical-rl;
        font-feature-settings: "palt" 0;   /* 縦組みで詰めると約物が崩れる */
        letter-spacing: .18em;
        line-height: 1.7;
        font-size: clamp(24px, 2.4vw, 34px);
        height: max-content;
        max-height: 62svh;
    }
}

/* 縦組みの見出しの上に立てる細い罫。.eyebrow の罫線と同じ語彙。 */
.scene-tate-wrap { flex-shrink: 0; }

.scene-tate-wrap::before {
    content: "";
    display: block;
    width: 1px;
    height: 42px;
    margin: 0 0 18px;
    background: linear-gradient(180deg, rgba(199, 154, 62, 0), rgba(199, 154, 62, .8));
}

@media (min-width: 1024px) {
    .scene-tate-wrap::before { height: 56px; margin: 0 auto 18px; }
}

/* 囲みではなく罫線だけのタグ。囲みが増えると途端に安く見える。 */
.scene-tag {
    font-size: 11px;
    letter-spacing: .16em;
    color: #a7967c;
    padding-bottom: 3px;
    border-bottom: 1px solid rgba(70, 56, 41, .9);
}

@media (prefers-reduced-motion: reduce) {
    .scene-photo img { transform: none; transition: none; }
}

/* 見出しを一文字ずつ立ち上げる。
   見出しに .fx-chars を付けると、末尾のJSが1文字ずつ span に割る。
   合図は自分自身の .is-visible（既存のスクロール演出が付ける）なので、
   .reveal の中にあってもなくても同じように動く。 */
.fx-chars .ln { display: block; }

.fx-chars .ch {
    display: inline-block;
    white-space: pre;
    opacity: 0;
    transform: translateY(16px);
    filter: blur(5px);
    will-change: opacity, transform, filter;
}

.fx-chars.is-visible .ch {
    opacity: 1;
    transform: none;
    filter: blur(0);
    transition: opacity .5s ease, transform .6s var(--ease-out), filter .5s ease;
    transition-delay: calc(var(--fx-lead) + var(--c) * var(--fx-char-step));
}

/* 見出しが出そろってから続く本文。遅延はJSが文字数から算出する。
   見出しの弟要素なので、兄弟セレクタで拾う。 */
.fx-follow { opacity: 0; transform: translateY(14px); }

.fx-chars.is-visible ~ .fx-follow {
    opacity: 1;
    transform: none;
    transition: opacity .8s ease, transform .8s var(--ease-out);
    transition-delay: var(--fx-follow-delay, 1.2s);
}

/* 見出し以外（バッジ・ボタンなど）を順番に立ち上げる。
   器に .fx-stage、対象に .fx-step と通し番号 --s を付ける。
   .fx-follow が「見出しのあと」なのに対し、こちらは器の中で好きな順に置ける。 */
.fx-stage .fx-step { opacity: 0; transform: translateY(14px); }

.fx-stage.is-visible .fx-step {
    opacity: 1;
    transform: none;
    transition: opacity .7s ease, transform .7s var(--ease-out);
    transition-delay: calc(var(--fx-stage-lead) + var(--s, 0) * var(--fx-step-gap));
}

/* ヒーローは開幕の完了を待たない。写真がまだ像を結んでいる途中で文字が書かれ、
   重なりながら収束する。順番に一つずつ出すと段取りが見えて古く感じる。
   トークンの上書きだけで済ませる（本文の遅延はJSがこの値を読んで計算する）。 */
.hero-copy .fx-chars { --fx-lead: 500ms; }

@media (prefers-reduced-motion: reduce) {
    .fx-chars .ch,
    .fx-follow,
    .fx-stage .fx-step {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}

/* モバイル固定CTA */
.floating-cta {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(20, 16, 12, 0.92);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(230, 205, 146, 0.16);
    transform: translateY(110%);
    transition: transform 0.4s ease;
}

.floating-cta.is-visible { transform: none; }

@media (min-width: 768px) { .floating-cta { display: none; } }

/* 下部固定CTAの高さぶん、フッター最下段（コピーライト）が隠れないよう余白を確保 */
@media (max-width: 767px) {
    body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* SNS固定バー（常時表示・ネイビー）。
   地色は少し透かして背景の写真を通す。ベタだと切り抜きのように浮くため。
   透かしたぶんアイコンが読みにくくならないよう backdrop-filter でぼかす。 */
.sns-bar {
    position: fixed;
    left: 16px;
    bottom: 92px;
    z-index: 61;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border-radius: 9999px;
    background: rgba(10, 32, 56, 0.62);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(230, 205, 146, 0.22);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.sns-bar a {
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9999px;
    color: #f4efe6;
    transition: transform 0.2s ease, background 0.2s ease;
}

.sns-bar a:hover { transform: translateY(-2px); background: rgba(255,255,255,0.1); }

@media (min-width: 768px) { .sns-bar { bottom: 24px; } }

/* スマホでは本文カラムに重なるため非表示（SNSはフッター・SNSセクションから辿れる） */
@media (max-width: 767px) { .sns-bar { display: none; } }


/* ライトボックスの拡大表示（画像タップで2.4倍・はみ出した分はスクロール） */
.lightbox-scroll {
    width: 100%; max-height: 80vh;
    display: flex; justify-content: center;
    overflow: auto; -webkit-overflow-scrolling: touch;
}

details > summary { list-style: none; }

details > summary::-webkit-details-marker { display: none; }

/* 順路スライダー */
.route-tab { color: #a7967c; }

.route-tab.is-active { background: linear-gradient(135deg, #e6cd92, #c79a3e); color: #0c0907; }

.route-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(12, 9, 7, 0.6); color: #f4efe6;
    border: 1px solid rgba(230, 205, 146, 0.3); backdrop-filter: blur(4px);
    transition: background 0.2s ease;
}

.route-nav:hover { background: rgba(199, 154, 62, 0.5); }

.route-dot { width: 8px; height: 8px; border-radius: 9999px; background: #463829; transition: background 0.2s ease; }

.route-dot.is-active { background: #e6cd92; width: 22px; }

/* ヒーローの上ではナビを透かして、写真が下を流れていくようにする（このページだけ）。
   JSが動かないときは従来どおりのすりガラスのまま＝下までスクロールしても読めなくならない。
   .is-solid は末尾のパララックスIIFEが付け外しする（ドロワーを開いている間も強制する）。
   詳細度 (0,2,1) で Tailwind の bg-luxury-dark/90 (0,1,0) に勝つ。 */
html.js nav.nav-hero {
    background: transparent;
    border-bottom-color: transparent;
    backdrop-filter: none;
    box-shadow: none;
    transition: background .4s ease, box-shadow .4s ease, backdrop-filter .4s ease, transform 0.35s var(--ease-out);
}

/* ヒーローの上では金の線も消す（写真の上に線だけ浮くと、切れ端のように見える） */
html.js nav.nav-hero::after { opacity: 0; transition: opacity .4s ease; }

html.js nav.nav-hero.is-solid {
    background: rgba(9, 7, 5, 0.93);
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px -20px rgba(0, 0, 0, 0.95);
}

html.js nav.nav-hero.is-solid::after { opacity: 1; }

/* よくあるご質問：カテゴリの切り替え
   タブを押すと該当カテゴリだけを残す。JSは index.html 側の data-faq-cat を見ている。 */
.faq-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 2.5rem;
}

.faq-tab {
    padding: 8px 18px;
    border: 1px solid var(--line2, #463829);
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 700;
    color: #a7967c;
    background: transparent;
    transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}

.faq-tab:hover { color: #e6cd92; border-color: #c79a3e; }

.faq-tab.is-active {
    background: linear-gradient(135deg, #e6cd92, #c79a3e);
    border-color: transparent;
    color: #0c0907;
}

.faq-group[hidden] { display: none; }

.faq-group__title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #e6cd92;
}

.faq-group__title::before {
    content: "";
    width: 24px;
    height: 1px;
    background: rgba(199, 154, 62, 0.6);
}

/* LINEの緑はブランド指定色なのでトークンにせず直接指定する */
.faq-line-btn { background: #06C755; }

/* ── ご利用の流れ（#flow 専用） ──
   以前は「流れ」と「入会後の案内」が別セクションに分かれ、同じ事実（予約単位・枠の保持・
   アプリ操作）を何度も繰り返していた。1本の縦の時系列にまとめ、上段のリード1〜2行だけで
   全体像が掴めるようにしてある。細部は details に畳んであるので、開かない人の視界を汚さない。 */
.flow-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* 番号の中心を通る縦の罫線で「順番がある」ことを示す。左に寄せた細い金線1本だけで足り、
   矢印やアイコンを足すと途端に安くなる。最後の1件は線を伸ばさない（::after で描くため）。 */
.flow-step {
    position: relative;
    padding: 26px 24px 24px 60px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(56, 44, 30, 0.42) 0%, rgba(31, 24, 17, 0.92) 46%, rgba(22, 17, 12, 0.96) 100%);
    border: 1px solid rgba(70, 56, 41, 0.9);
    box-shadow:
        inset 0 1px 0 rgba(244, 239, 230, 0.05),
        0 18px 38px -26px rgba(0, 0, 0, 0.95);
}

.flow-step::after {
    content: "";
    position: absolute;
    left: 32px;
    top: 56px;
    bottom: -14px;
    width: 1px;
    background: linear-gradient(180deg, rgba(199, 154, 62, 0.42), rgba(199, 154, 62, 0.08));
    pointer-events: none;
}

.flow-step:last-child::after { display: none; }

.flow-step__head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-left: -36px;   /* 番号だけ本文の左に出す。本文は padding-left で揃ったまま */
}

/* 番号は本文と同じ行に置かず、罫線の真上に載せる。地の色で塗って線を切り、
   数字が線に串刺しにされないようにしている。 */
.flow-step__head .idx-no {
    position: relative;
    z-index: 1;
    flex: none;
    width: 32px;
    text-align: center;
    font-size: 22px;
    background-color: rgba(22, 17, 12, 1);
    padding: 2px 0;
}

.flow-step__title { min-width: 0; }

.flow-step__lead {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.9;
    color: #a9a29a;
}

/* 「詳しく見る」。開閉のマーカーは自前で描く（ブラウザ既定の三角は行の高さを揺らす） */
.flow-step__more { margin-top: 14px; }

.flow-step__more > summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    list-style: none;
    font-size: 13px;
    font-weight: 700;
    color: #c79a3e;
    padding: 6px 2px;
    transition: color 0.3s ease;
}

.flow-step__more > summary::-webkit-details-marker { display: none; }

.flow-step__more > summary::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.3s var(--ease-out);
}

.flow-step__more[open] > summary::after { transform: translateY(1px) rotate(-135deg); }

.flow-step__more > summary:hover { color: #e6cd92; }

.flow-step__more > summary:focus-visible {
    outline: 1px solid rgba(199, 154, 62, 0.7);
    outline-offset: 3px;
    border-radius: 4px;
}

.flow-step__body {
    margin-top: 16px;
    padding-top: 18px;
    border-top: 1px solid rgba(70, 56, 41, 0.9);
}

/* 入会金は3プラン共通なので、カードの中ではなく3枚の上に1本の帯として置く。
   カードの中に入れると「そのプランだけ」に読めてしまい、実際に都度払いの欄だけに
   書かれていたのが、全プランにかかると伝わらなかった原因だった。 */
.price-admission {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 4px 12px;
    max-width: 640px;
    margin: 0 auto 22px;
    padding: 11px 20px;
    border: 1px solid rgba(199, 154, 62, 0.3);
    border-radius: 999px;
    background: rgba(199, 154, 62, 0.07);
    color: #d9cdb8;
    font-size: 13px;
    line-height: 1.7;
    text-align: center;
}

.price-admission__label {
    flex: none;
    font-weight: 700;
    color: #c79a3e;
    letter-spacing: .06em;
}

@media (max-width: 767px) {
    .price-admission {
        border-radius: 16px;
        padding: 10px 16px;
        font-size: 12.5px;
        gap: 2px;
    }
    /* 幅が足りず必ず2行になる。折り返し位置を成り行きに任せると
       「…を／申し受けます。」のような座りの悪い切れ方をするので、
       ラベルを1行目に固定して、本文をまるごと2行目へ送る。 */
    .price-admission__label { flex: 0 0 100%; text-align: center; }
}

/* 事実の列挙。段組みにせず、見出し（金）＋本文の2行組みを積む。
   項目名が短く本文が長いので、横並びの定義リストにすると本文だけが極端に細くなる。 */
.flow-facts {
    display: grid;
    gap: 16px;
    margin: 0;
}

@media (min-width: 640px) { .flow-facts { grid-template-columns: 1fr 1fr; gap: 18px 28px; } }

.flow-facts dt {
    font-size: 13px;
    font-weight: 700;
    color: #c79a3e;
    margin-bottom: 4px;
}

.flow-facts dd {
    margin: 0;
    font-size: 13px;
    line-height: 1.85;
    color: #a9a29a;
}

.flow-notes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.flow-notes li {
    position: relative;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.85;
    color: #a9a29a;
}

.flow-notes li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.75em;
    width: 6px;
    height: 1px;
    background: rgba(199, 154, 62, 0.8);
}

@media (max-width: 639px) {
    .flow-step { padding: 22px 18px 20px 50px; }
    .flow-step::after { left: 26px; top: 50px; }
    .flow-step__head { margin-left: -32px; gap: 12px; }
    .flow-step__head .idx-no { width: 28px; font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .flow-step__more > summary::after { transition: none; }
}