@charset "UTF-8";
/**********************

  stay-lp.scss — 宿泊体験LP（page-stay02.php）のスタイル

  ・既存の style.scss / style2.scss は変更しない。追記が必要ならこのファイルに書く。
  ・出力先は css/stay-lp.css（`npm run css:watch` で自動コンパイル）。
  ・既存の変数は v.$bk のように参照できる（_variable.scss）。
  ・css/stay-lp.css は style.css / style2.css より後に読み込むこと。
    後勝ちになるので、既存スタイルの上書きに !important を使わなくて済む。

**********************/
/* ============================================================
   タブレット縦（431〜798px）の上限 — SP レイアウトを引き伸ばさない（案A）

   ■ 何が起きていたか
     SP 分岐（@media screen and (max-width : 798px) = max-width:798px）に**幅の上限が無く**、
     KV / VOICE / GALLERY が aspect-ratio と % で幅なりに拡大していた。
     文字サイズだけは SP 値のままなので図版だけが巨大化し、
     768px（iPad 縦）でページ全高がカンプ幅(390px)の 1.37 倍、
     798 → 799 の 1px でさらに 34% 落ちる段差になっていた。

   ■ 採用した方針（案A）
     カンプにタブレット用のデザインが無い。SP デザインを引き伸ばさず、
     **上限まで来たら中央に置く**。
     背景（KV / CTA の写真・各セクションの地色）は**全幅のまま**にして、
     絞るのは中身（__inner）だけ。

   ■ 上限を 430px にした根拠
     ※ この値は**カンプ由来ではない**（カンプにタブレットの指定が無いため実装側で決めた）。
     SP カンプは 390px ＝ iPhone 14 / 15 / 16 の標準幅。
     縦持ちの実機で最も広いのが 430px（iPhone 14 / 15 / 16 Pro Max。
     12 / 13 Pro Max は 428px・Pixel 8 Pro は 412px・iPhone 8 Plus は 414px）。
     つまり 430px は「この SP デザインが実機で実際に描かれる最大幅」であり、
     そこまでは現に起きている表示、そこから先（＝タブレット）は中央寄せに切り替える。
     カンプ比 430/390 = 1.103（+10.3%）で、実機で既に起きている範囲に収まる。

   ■ 使い方
     ・各セクションの __inner の SP 分岐に max-width: $sp-cap を足す
       （margin: 0 auto は既に基底にあるので中央寄せはそれで成立する）。
     ・KV は 2026-08-21 の変更で高さの発生源が **100svh** になったので、
       幅に比例して伸びる経路そのものが無くなった（旧 $sp-cap-kv-h は撤去）。
       431〜798px でも高さは画面の高さで決まる。KV のセクションを参照。
     ・vw で伸びる font-size（KV のキャッチ・リード）も 430px 相当で頭打ちにする。
       器だけ止めて文字が伸び続けると、狭い器に大きな文字が入って行数が増える。
   ============================================================ */
/* ※ 旧 $sp-cap-kv-h（= 430 × 590/390 = 650.5px）は撤去した。
   あれは「__bg の aspect-ratio × 幅」で高さが決まっていたときの**幅方向の**上限で、
   高さの発生源が 100svh に変わった今は KV の高さに一切関与しない。
   残すと __bg（写真）だけが 650.5px で頭打ちになり、
   画面が高い端末（iPad 縦 768x1024 など）で写真の下に地色の帯が出る。 */
/* ============================================================
   ボタンの共有部品（mixin）

   ■ ここに置いてある理由
     KV のベージュボタン（RS-01）／CTA のゴールドボタン（RS-02）／
     RESERVE の送信ボタン（RS-02）／追従CTA（RS-42）の 4 箇所は、
     矢印の描き方（RS-19）と hover の挙動（RS-43）が完全に同じ。
     4 箇所に同じ 10 数行を複製すると、片方だけ直る事故が起きる。
     最初に使うのが KV（このすぐ下）なので、定義はファイル先頭に置く。

   ■ %placeholder(@extend) ではなく mixin にした理由
     @p-stay-lp-title-typography と同じ。@extend は出力位置でセレクタを合流させるため、
     ルールがファイル内で移動して「後勝ちで既存グローバルを打ち消す」順序が変わる。
     mixin は宣言をその場に展開するだけなので出力の並びが変わらない。
     page-stay02.php の申し送りも「.p-stay-lp-cta__button のセレクタ自体を
     共有セレクタに書き換えないこと」＝ mixin か %placeholder、と指定している。
   ============================================================ */
/* --- 矢印（RS-19）＋ hover の右移動（RS-43）----------------------------------
   arrow.svg は fill が黒なので mask で塗り分ける（色ちがいの SVG を複製しない）。

   ⚠ 位置は **right で決める**。transform は translateY(-50%) の縦センタリングと
     hover の横移動にだけ使う。right を transform で作ってしまうと RS-43 の移動と衝突する。

   $shift（RS-43 ユーザー指示「hover で少し右に動かす」）の既定 4px の根拠：
     矢印の見える幅は 14.2〜19.6px なので 4px ＝ 幅の 20〜28%。動いたと分かる最小量。
     右余白は KV 24.8 / CTA 28.4（SP 23.4）/ RESERVE 31.3（SP 23.6）/ 追従 20px あるので、
     4px 動かしてもボタンの縁に届かない（最も狭い追従CTAでも残り 16px）。
     色は変えない（RS-01 / RS-02 は「hover で背景色だけ変わる」）。

   pointer-events: none は 4 箇所すべてに付ける。
   RESERVE だけは必須（矢印が <input type="submit"> の**外**＝ラッパー側にあるので、
   付けないと矢印の上のクリックがボタンに届かない）。<a> の 3 箇所では挙動は変わらないが、
   「装飾は当たり判定を持たない」で揃えておく。

   $enabled … hover を許す条件をセレクタとして足す（既定は無条件）。
     RESERVE の送信ボタンだけ、**押せる状態のときしか矢印を動かさない**ために使う。
     矢印はラッパーの ::after なので、素の `&:hover` だと
     **ボタンが disabled でもマウスを乗せれば動く**（実測：disabled のまま arrowX が 0 → 4 になった）。
     押せないのに反応するのは誤ったフィードバックなので条件を足す。
     ⚠ 古い Safari（15.3 以下 / browserslist の safari>=10 に含まれる）は :has() を解釈できず
       **ルールごと落ちる**＝矢印が一切動かない。「押せないのに動く」より安全な劣化なので許容する。
       :has() はこのファイル（人数カウンターの罫線）と style.css で既に使っている。 */
/* --- ゴールドボタンの見た目（RS-02）-------------------------------------------
   CTA（.p-stay-lp-cta__button 380x80 / 340x80）と追従CTA（.p-stay-lp-floating-cta）で共有する。
   **寸法・余白・文字サイズ・margin は入れない**（利用側で決まる。CTA 側は実測の確定値）。

   $transition … 追従CTA だけ表示/非表示のフェードを足すので差し替えられるようにしてある。
                 ここを利用側の後置き宣言で上書きすると
                 mixin 内の prefers-reduced-motion（transition: none）より後になって
                 「動きを減らす」設定を素通りさせてしまうため、引数で渡す。 */
/* ============================================================
   KV（ファーストビュー） page-stay02.php / .p-stay-lp-kv

   数値の正：tmp-spec/kv/design-spec.json（PC 4027:1047 = 1440x860 /
   SP 6030:8 = 390x590）と、そこからのスポット再計測（absoluteRenderBounds）。
   このファイルの % / vw は「カンプ座標 ÷ カンプ幅」で導出したもので、
   コメントに必ず元の px を残す（実装値からの逆算をしないため）。

   ■ 高さの作り方（設計判断）2026-08-21 変更
     KV の高さは **min-height: 100svh**（画面いっぱいを最低ライン）で作る。
     旧仕様は「カンプの比率」（PC 1440:860 / SP 390:590）を背景 <picture> の
     aspect-ratio に持たせていたが、SCROLL まで含めて画面内に収める要件のため
     画面の高さを基準に切り替えた。

     ・**height ではなく min-height**。height で固定すると、横向きスマホ
       （844x390 など 100svh = 390px しかない画面）でキャッチ3行＋リード＋
       ボタン＋SCROLL が入らず切れる。min-height なら中身が入りきらない画面では
       セクションの方が伸びる（grid アイテムの自動最小サイズがそのまま効く）。
     ・**単位は svh**（small viewport height ＝ アドレスバーが**出ている**ときの高さ）。
         dvh … バーの出入りで高さが動くので、スクロールのたびに KV がガタつく
         lvh … バーが出ている間は 100lvh > 実表示領域になり、SCROLL が画面外に出る
         svh … 常に「バーが出ている状態の高さ」＝ SCROLL が必ず画面内に入る
       代わりにバーが隠れているときは KV の下に次のセクションが少し覗く（了承済み）。
     ・**フォールバック必須**。browserslist に safari >= 10 / ios >= 10 が入っており、
       svh は Safari 15.4 / iOS 15.4 以降。1行目の 100vh を残すこと
       （svh 非対応環境では 100vh ＝ lvh 相当なので、バーが出ている間だけ
        SCROLL が画面外に出る。旧仕様の固定比率よりは要件に近い）。
     ・コンテンツ（__inner）は 1セル grid で背景に重ねる。grid アイテムには
       自動最小サイズが効くので、文字が大きくなって収まらない幅では
       **切れずにセクションが伸びる**（__inner を position:absolute で重ねると
       この保険が効かない）。写真は逆に、伸びた分まで追従してほしいので absolute。

   ■ 既存テーマの前提
     ・css/stay-lp.css はトップページとこのLPが読む。セレクタは必ず
       .p-stay-lp… 始まり。要素セレクタを素で書かない。
     ・style.css のグローバル（* { color:#323232 } / p{padding:1% 0}
       / a,p{font-size:1.6rem; line-height:1.5; letter-spacing:.1rem}
       / a:hover{opacity:.7} / img{height:auto}）を各所で打ち消している。
     ・ブレークポイントは _variable.scss の既存方式（max-width）に合わせ、
       PC を基底にして @media screen and (max-width : 798px) で上書きする。
     ・#top-head（position:fixed / PC 118px・SP<=600px 74px）はこの KV に
       重なる。KV 側だけで成立させる（#top-head は一切触らない）。
   ============================================================ */
.p-stay-lp-kv {
  position: relative;
  /* 疑似要素の暗幕(z-index:1)とコンテンツ(z-index:2)を KV 内に閉じ込める。
     これが無いと #top-head(z-index:999) との前後関係に影響しうる */
  isolation: isolate;
  display: grid;
  /* minmax(0,1fr)：分割不能な英数字語が入ってもトラックを膨張させない */
  grid-template-columns: minmax(0, 1fr);
  /* 高さ：画面いっぱいを**最低ライン**にする（詳細は上のブロック）。
     min-height なので、中身が入りきらない画面ではセクションの方が伸びる。
     ⚠ 2行必要。1行目は svh 非対応（Safari 15.3 以下 / iOS 15.3 以下）用のフォールバックで、
       消すとその世代だけ min-height が丸ごと無効になり、KV が中身なりの高さに潰れる
       （＝写真が画面いっぱいにならない）。順序も入れ替えないこと */
  min-height: 100vh;
  min-height: 100svh;
  /* RS-05 暗幕：写真の上に黒40%。画像には焼き込まれていないので CSS で重ねる。
     rgba() ではなく background-color + opacity で作る。rgba のアルファは
     computed の rgba→hex 正規化で落ちて検証できないが、opacity なら数値ガードできる */
}
.p-stay-lp-kv::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background-color: #000;
  opacity: 0.4;
  pointer-events: none;
}

/* 背景写真：**器いっぱいに敷いて cover で切る**だけの層。高さは持たない。
   画像実寸 2880x1720（PC）/ 780x1180（SP）＝ カンプの 2倍。

   ⚠ **position: absolute にしてある理由**（grid アイテムに戻さないこと）
     高さの発生源が 100svh に変わったので、写真は「KV の高さに従う」側になった。
     ところが <picture> を grid アイテムのまま aspect-ratio だけ外すと、
     中の <img> の**固有比率**（2880:1720 = 高さ 0.597 × 幅）がそのまま
     行トラックの max-content 貢献になり、結局 aspect-ratio があるのと同じ高さを
     行に要求してしまう（1440x650 の画面で KV が 860px になり SCROLL が画面外へ出る）。
     absolute にすると行トラックの計算から完全に外れ、KV（position: relative）の
     padding ボックス ＝ 100svh もしくは中身なりの高さに、上下左右 0 で貼り付く。
     同じ層の RS-05 暗幕（::before）も absolute の inset 0 なので、写真と暗幕が
     同じ座標系に乗る。
     ※ 高さが「切れずに伸びる」保険は **__inner 側**（grid アイテムのまま）が持っている */
.p-stay-lp-kv__bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* 暗幕(::before = 1) の背面・コンテンツ(__inner = 2) の背面。
     auto でも暗幕(1)には負けるが、同じ作りの CTA（.p-stay-lp-cta__bg）に合わせて明示する。
     前後関係を「DOM 順」ではなく「数値」で決めておく方が、後から要素が増えたときに壊れない */
  z-index: 0;
  display: block;
}
.p-stay-lp-kv__bg img {
  display: block;
  width: 100%;
  height: 100%; /* style.css の img{height:auto} を打ち消す */
  -o-object-fit: cover;
     object-fit: cover;
  /* 既定（center）のまま。cover なので、カンプ比（PC 1440:860 / SP 390:590）より
     **縦長の画面では左右**が、**縦が短い画面では上下**が切られる。
     中庭の主役（灯りのともった大開口・中央の木・ベンチ）は画面のほぼ中央にあり、
     切れるのは上端の空＋軒と下端の床タイル、左右端の暗い壁で、どれも構図の要ではない。
     top に寄せるとベンチ・石の前景が丸ごと落ち、bottom に寄せると明るい窓の上に
     白いキャッチが乗って可読性が落ちる。左右も同様で、left は右の大開口（＝訴求の中心）、
     right は木を失う。実測（1440x900 / 1440x650 / 390x844 / 844x390 のスクショ）でも
     center が最も原本に近かった。 */
  -o-object-position: center;
     object-position: center;
}

/* コンテンツ：**唯一の grid アイテム**（背景は absolute なので行の高さに関与しない）。
   行トラックはこの中身の高さで決まり、それが 100svh に満たなければ
   align-content: stretch（既定）で 100svh まで引き伸ばされる。
   ⚠ SCROLL はこの __inner の padding ボックス下端（bottom: 0）を基準にしているので、
     ここが KV の高さまで伸びていることが「SCROLL が KV の下端に来る」の前提。
     position: relative を外したり、行を fit-content にしたりしないこと。
   padding は「カンプ座標 ÷ カンプ幅」なので % がそのまま比率になる */
.p-stay-lp-kv__inner {
  grid-area: 1/1;
  position: relative;
  z-index: 2;
  /* 上 205/1440・左右 180/1440。
     下は SCROLL（下端固定）のための予約席。**px と % を混ぜるのが要点**で、
       80px  … 縦線の長さ。幅に比例しない固定値
       4.6528% … 67/1440。KV 下端から SCROLL 下端までの余白（幅に比例）
       24px  … ボタンと SCROLL の最小すきま
     これを 10.2083%（=147/1440）のように全部 % にすると、線の 80px まで
     幅に比例して縮むため、狭い PC 幅で予約席が足りずボタンに重なる（799px で実際に重なった） */
  padding: 14.2361% 12.5% calc(104px + 4.6528%);
  /* 上 padding だけ「幅比例」と「#top-head の高さ(118px 固定)」の両にらみにする。
     14.2361% だけだと、比例して痩せる余白に対して #top-head は px 固定のままなので、
     幅が縮むほどヘッダー下端との間隔だけが消える（830px で 0px・799px で −4px になり、
     ロゴ／ボタン行とキャッチが一体に見える）。
       118px      … #top-head の実高（PC。SP<=600px は 74px だが、そちらは下の SP 分岐が持つ）
       6.0417%    … 87/1440。カンプのヘッダー下端(118) → キャッチ上端(205) の間隔を幅比例させる
     max() の 2 項は 1440px で 205px を通る（118+87 = 0.142361x1440）ので、
     カンプ幅では従来どおり 205px。1440px 超は 14.2361% が勝って現状のまま、
     1440px 未満は calc が勝って「ヘッダー分＋比例した間隔」が確保される。
     ※ max() 非対応（Safari 10 等）には上の shorthand がフォールバックとして残る */
  padding-top: max(14.2361%, 118px + 6.0417%);
  /* ── 1440px を超えたら縦に伸ばさない（2026-08-22 ユーザー判断）──
     KV は `min-height: 100svh`＝**「これ以上縮まない床」**でしかなく、上限ではない。
     中身の積み上げが床より高ければ KV は押し広げられ、SCROLL が画面外へ出る。
     ところがこの KV は余白も文字も**幅**に比例して伸びる作りなので、
     「横に広いが縦は高くない」ウィンドウで必ず破綻する（画面の高さは幅に連動しない）。
       実測 1910x813 … 中身 1037px ＞ 画面 813px ＝ SCROLL が 135px はみ出す
                        （ログイン中は管理バー 32px ぶんさらに悪化）
       実測 2560x900 … 中身 1197px ＝ 178px はみ出す
     → **カンプ幅 1440px 相当で頭打ち**にする。1440px 以下は min() の % 側が勝つので
       従来の見た目は 1px も変わらない（実測 1440/1280/1024/390 で差分なし）。
     ⚠ 頭打ちにするのは**縦に効くものだけ**。左右 padding（12.5%）は触らない——
       止めると広い画面でキャッチの左端が内側へ寄り、横の構図が動くため。
     ⚠ これは「幅が広い」ケースの対処。**1366x630 のような「高さが低い」画面は直らない**
       （中身 793px ＞ 画面 630px）。直すなら高さ側にも別の仕組みが要る。 */
  padding-top: min(max(14.2361%, 118px + 6.0417%), 205px); /* 14.2361% x 1440 = 205 */
  padding-bottom: min(104px + 4.6528%, 171px); /* 104 + 4.6528% x 1440 = 171 */
}
@media screen and (max-width : 798px) {
  .p-stay-lp-kv__inner {
    /* 上 103/390・左右 45/390・下 = 縦線60px + 44/390 + 最小すきま20px
       （下の min() 版に対応していないブラウザ用のフォールバックとして残す） */
    padding: 26.4103% 11.5385% calc(80px + 11.2821%);
    /* 案A：430px を超えたら引き伸ばさず中央に置く。
       ⚠ **width: 100% を省かないこと**。グリッドアイテムに auto マージンを付けると
         justify-self: stretch が効かなくなり、幅が fit-content（≒ max-content）扱いになる。
         320px では 1行の最大幅 242px + 左右 padding 70.4px = 312.4px が器(305px)を超え、
         ページに横スクロールが出た（実測 scrollWidth 312）。
         width: 100% で幅を確定させてから max-width で頭打ちにすれば、
         余った分だけ auto マージンが吸って中央に寄る。 */
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    /* ⚠ **グリッドアイテムの % padding は「グリッド領域（＝全幅）」基準**で、
         max-width を付けても % 側は縮まない（768px なら 11.5385% = 88.6px が
         430px の器の内側に入り、中身が 253px まで潰れる）。
         430px 幅の端末での実寸で頭打ちにする：
           26.4103% × 430 = 113.56  /  11.5385% × 430 = 49.62  /  11.2821% × 430 = 48.51
       430px 以下では % 側が勝つので、従来の見た目は 1px も変わらない */
    padding: min(26.4103%, 113.56px) min(11.5385%, 49.62px) calc(80px + min(11.2821%, 48.51px));
    /* 上 padding だけ #top-head（position:fixed）との両にらみにする。PC 側と同じ考え方。
       <=600px の #top-head は 74px。カンプ SP はヘッダー下端 74 → キャッチ上端 103 ＝
       間隔 29px（= 7.4359% × 390）なので、390px では従来どおり 103px を通る。
       601〜798px は #top-head が 118px に変わるので、下の別分岐で持つ */
    padding-top: max(min(26.4103%, 113.56px), 74px + min(7.4359%, 31.97px));
  }
}

/* 601〜798px は css/style.css の @media(max-width:600px) の外＝ #top-head が 118px になる。
   上の分岐は 74px 前提なので、この帯だけキャッチの上を押し下げてヘッダーに潜らせない。
     118px  … #top-head の実高（この帯）
     31.97px … 7.4359% × 430（カンプ SP のヘッダー下端 → キャッチ上端 29px を上限幅に当てた値）
   ※ 上限 430px は案A の値でカンプ由来ではない */
@media screen and (min-width: 601px) and (max-width: 798px) {
  .p-stay-lp-kv__inner {
    padding-top: 149.97px;
  }
}
/* キャッチコピー 60px / Shippori Mincho SemiBold / 行送り130% / 3行 */
.p-stay-lp-kv__catch {
  color: #fff;
  font-family: "Local Shippori Mincho", "Shippori Mincho", serif;
  font-weight: 600;
  font-size: 60px; /* clamp 非対応ブラウザ用フォールバック */
  /* 上限はカンプ値の 60px。以前は 80px（=1920px 相当）まで伸ばしていたが、
     1910px 幅で 79.6px まで育ち、キャッチだけで 310px（1440px では 234px）を占めて
     SCROLL を画面外へ押し出していた。上の __inner の注記を参照。 */
  font-size: clamp(30px, 4.1667vw, 60px); /* 60/1440=4.1667vw。上限＝カンプ値 */
  line-height: 1.3;
  letter-spacing: 0; /* カンプの letterSpacing は未指定＝0。2行目 8字 x 60px = 480px がカンプ幅と一致する */
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-kv__catch {
    font-size: 36px;
    /* 36/390=9.2308vw。上限は**案A の 430px 相当**（9.2308% × 430 = 39.69px）。
       器を 430px で止めるので文字だけ 55px まで伸ばすと行数が増えて破綻する。
       ※ 430 はカンプ由来ではない（案A の判断値） */
    font-size: clamp(26px, 9.2308vw, 39.69px);
  }
}

/* リード 15px / Noto Sans JP / 行送り170% / 字送り16% */
.p-stay-lp-kv__lead {
  /* 29px（キャッチ下端439 → リード上端468）÷ コンテンツ幅1080 */
  margin-top: min(2.6852%, 38.67px); /* 2.6852% x 1440 = 38.67 で頭打ち */
  padding: 0; /* style.css の p{padding:1% 0} を打ち消す */
  color: #fff;
  font-size: 15px;
  font-size: clamp(12px, 1.0417vw, 15px); /* 15/1440=1.0417vw。上限＝カンプ値（旧 20px） */
  line-height: 1.7;
  letter-spacing: 0.16em;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-kv__lead {
    /* 17.6px（キャッチ下端243.4 → リード上端261）÷ コンテンツ幅300 */
    margin-top: 5.8667%;
    /* カンプのリードだけ左右非対称（design-spec sp 6030:39 = x45 / w288 / textAutoResize:NONE。
       左 45 に対し右は 390-45-288 = 57）。__inner の padding は左右対称 11.5385% なので、
       計測幅が 300px になって 1 行あたり 1 文字多く入り、3行目の「ぜ」が繰り上がって
       「ぜひ」が行またぎになる（12px x 1.16em = 13.92px/字。300/13.92 = 21字・288/13.92 = 20字）。
       288/300 = 96%。<br> を足すより文言差し替えに強い */
    max-width: 96%;
    font-size: 12px;
    /* 12/390=3.0769vw。上限は案A の 430px 相当（3.0769% × 430 = 13.23px） */
    font-size: clamp(11px, 3.0769vw, 13.23px);
  }
}

/* 矢印（RS-19）の見える実寸と右余白。ボタンの padding-right（ラベルの席）と
   ::after の位置で同じ値を使い、席が矢印の実寸と必ず連動するようにする。
     $kv-arrow-w     … 見える幅 14.2px（design-spec 6001:79 の w13/h14.2 は回転前の値）
     $kv-arrow-right … ボタン右端 422 − 矢印右端 397.2（SP も 287 − 262.2 で同値） */
/* ボタン RS-01：ベージュ 242x56・角丸なし・hover で白（文字と矢印は変えない） */
.p-stay-lp-kv__button {
  /* 49.5px（リード下端544.5 → ボタン上端594）÷ コンテンツ幅1080 */
  margin-top: min(4.5833%, 66px); /* 4.5833% x 1440 = 66 で頭打ち */
  position: relative;
  display: flex; /* 1行ラベルの縦センタリング（矢印は ::after の absolute で別管理） */
  align-items: center;
  width: 242px;
  max-width: 100%;
  min-height: 56px;
  /* 左28px＝テキスト左端208−ボタン左端180。
     右は「矢印の右余白 24.8 + 矢印の見える幅 14.2 = 39px」。矢印を padding の中へ出し、
     コンテンツボックス（＝ラベルの席）の右端を矢印の左端 383（=397.2−14.2）に一致させる。
     24.8px のままだと矢印がコンテンツボックスの内側に乗り、ラベルが伸びたときに
     行を折らずに矢印の下へ潜り込む（余裕は SP 21px / PC 29px しかなかった）。
     この 39px は矢印を絶対配置のまま「席」だけを確保する書き方で、
     矢印をフレックスアイテム（margin-left:auto）にした場合と幾何は同一。
     ※ position:static の疑似要素は verify-layout.mjs の __vlRect が測れなくなる
       （absolute / fixed のみ対応）ため、矢印は absolute のまま残している */
  padding: 0 39px 0 28px;
  background-color: #efe9e0;
  border-radius: 0;
  color: #323232;
  /* RS-18 Roboto に和文グリフが無いので和文は $font-family に落とす。
     連結には総称ファミリを含まない $roboto-name を使う。$roboto（= "Roboto", sans-serif）
     をそのまま繋ぐと "Roboto", sans-serif, "Noto Sans JP", … となり、
     途中の sans-serif が OS 既定ゴシック（Win: Meiryo / Yu Gothic UI）に解決して
     和文がそこで確定するため、後続の Noto Sans JP に一度も到達しない */
  font-family: "Roboto", "Local Noto Sans JP", "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.16em;
  /* カンプに動きの指定は無い（RS-04）が、**同じページのヘッダーボタン**
     （#top-head .btn_list02 li a）が style.css:48 の a{transition: all .3s} を持っていて
     hover がふわっと変わるため、時間を 0.3s にそろえる。
     このボタンも <a> なので all .3s が既に効いている状態だが、
     **変化するのは background-color だけ**（RS-01：文字色・矢印色は変えない）。
     all のままだと :focus-visible の outline まで遅れて描かれ、
     将来 padding などを足したときにレイアウトまでアニメーションしてしまうので、
     プロパティを明示して絞る。 */
  transition: background-color 0.3s;
  /* RS-19 矢印（＋ RS-43 hover の右移動）。見える実寸は 14.2x13
     （design-spec の w:13 h:14.2 は回転前の値なので使わない）。
     KV だけ矢印は #323232（RS-01：hover でも色は変えない） */
}
.p-stay-lp-kv__button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 24.8px;
  transform: translateY(-50%);
  width: 14.2px;
  height: 13px;
  background-color: #323232;
  -webkit-mask-image: url(../img/stay-lp/arrow.svg);
          mask-image: url(../img/stay-lp/arrow.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  pointer-events: none;
  /* ⚠ 遷移は**基底（::after）側**に置く。`&:hover::after` の中に書くと
     **ホバー中しか transition が有効にならず、外した瞬間にパッと戻る**
     （transition は「遷移後の状態」の指定を見るため、戻り先＝基底に無いと効かない）。
     transform だけを遷移させること。all にすると mask / background まで巻き込む */
  transition: transform 0.3s;
}
@media (hover: hover) {
  .p-stay-lp-kv__button {
    /* タッチ端末で :hover が張り付くのを防ぐため必ず (hover: hover) で囲う。
       translateY(-50%) を translate() に畳む＝縦センタリングを失わないこと */
  }
  .p-stay-lp-kv__button:hover::after {
    transform: translate(4px, -50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .p-stay-lp-kv__button::after {
    /* 動かさないだけでなく、戻りのアニメーションも消す */
    transition: none;
  }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) {
  .p-stay-lp-kv__button {
    /* 「動きを減らす」設定では**移動そのものをしない**（遷移を消すだけだと瞬間移動する）。
       上の (hover: hover) と同じ詳細度なので、後に置くこの宣言が勝つ。
       Sass は入れ子の @media を
       `(prefers-reduced-motion: reduce) and (hover: hover)` に合成する */
  }
  .p-stay-lp-kv__button:hover::after {
    transform: translateY(-50%);
  }
}
.p-stay-lp-kv__button {
  /* style.css の a:hover{opacity:.7} を打ち消す。
     @media (hover:hover) の外に置く＝タッチ端末で :hover が張り付いても半透明にならない */
}
.p-stay-lp-kv__button:hover {
  opacity: 1;
}
@media (hover: hover) {
  .p-stay-lp-kv__button:hover {
    background-color: #fff;
    /* 文字色・矢印色は RS-01 のとおり変えない */
  }
}
.p-stay-lp-kv__button {
  /* カンプに focus の指定は無い（RS-03）。キーボード操作の視認性だけ確保する */
}
.p-stay-lp-kv__button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .p-stay-lp-kv__button {
    /* 「動きを減らす」設定の端末では即時に切り替える（色の変化そのものは残す＝
       hover が効いていることは分かる）。style.css の a{transition: all .3s} は
       このセレクタの方が詳細度が高いので、ここで none にすれば無効化まで届く。
       ※ コメントは media の**内側**に置く。外に置くと Sass が空ルール
         `.p-stay-lp-kv__button { }` を吐く */
    transition: none;
  }
}
@media screen and (max-width : 798px) {
  .p-stay-lp-kv__button {
    /* 46.4px（リード下端342.6 → ボタン上端389）÷ コンテンツ幅300 */
    margin-top: 15.4667%;
    /* 左25px＝テキスト左端70−ボタン左端45。右は PC と同じ矢印の席 39px */
    padding: 0 39px 0 25px;
    font-size: 15px;
  }
}

/* SCROLL の上下運動（RS-41。ユーザー指示「下がる時ははやく、上がる時はゆっくり」
   ／ 2026-08-21 追加指示「縦線は動かさず文字だけ」「もう少し大きく」）。

   ■ 動かすのは text-indent（＝ 文字だけ動く。縦線も箱も動かない）
     この要素は writing-mode: vertical-rl なので**インライン方向＝縦**。
     text-indent はインライン方向に1行目をずらすので、**下方向に文字が動く**。
     - 縦線は ::before（この要素の子）。**要素を transform すると必ず一緒に動く**ため不採用。
     - text-indent は要素のボーダーボックスを変えない（実測：箱 0/0/0/0・縦線 0/0 のまま、
       文字だけ +10px。tmp-spec/_probe-textindent.mjs）。
     - 代償：transform と違い**行ボックスのレイアウトをやり直す**。
       ただし対象は position: absolute の葉要素・6 グリフ・高さは min-height 80px で固定
       （文字 47px + 10px = 57px なので箱の寸法は動かない）ので、
       祖先にも兄弟にも波及しない。「縦線は動かさない」を満たす他の手段が無いための選択。

   ■ 移動量 10px の根拠（カンプに動きの指定は無い＝ RS-04。実装側で決めた値）
     PC：縦線 80px・文字の実測 47px（見えるインクは 3〜47px）。10px 下げても 13〜57px で、
         縦線の下端 80px まで 23px 余る＝**はみ出さない**。文字サイズ 10px の 1 文字分＝視認できる。
     SP：縦線 60px・文字 約 37.6px（8px × 6 字 + 字送り 20%）。10px 下げて 47.6px で 12.4px 余る。
     ボタンとの関係：**下方向にしか動かない**ので、上にあるボタンには近づかない
     （最小の vGap は 24px の幅でも変わらない）。

   ■ 割合と easing の根拠（緩急は初版のまま）
     0 〜 30%（2.4s のうち 0.72s）で 10px 落ち、30 〜 100%（1.68s）で戻す。**落ち：戻り = 1 : 2.33**。
     落ちは cubic-bezier(.4, 0, 1, 1)（ease-in ＝ 加速しながら落ちる。重力の見え方）、
     戻りは cubic-bezier(.33, 0, .67, 1)（ease-in-out ＝ 両端がゆるく、浮き上がるように戻る）。
     下端で速度が 0 に落ちる不連続は「とん、と落ちてゆっくり浮く」読み味を作るのでそのまま使う。

   ■ 検証への影響：無し
     要素の箱が動かないので、tmp-spec/kv/verify-spec.json の relations（vGap / bottomDiff / leftDiff）は
     **カンプ由来の値のまま**でよい。transform 版では 42 本に許容窓を貼る必要があったが、
     text-indent 版ではその必要が無くなったので**全て元の期待値に戻してある**。

   ■ 無限ループを CSS だけで止める手は無い（要 JS。今回は書かない）
     「画面内かどうか」を表せる CSS セレクタが無いため、KV を抜けた後も回り続ける。
     ・animation-timeline: view() はスクロール連動になり「勝手に上下する」動き自体が消える
     ・content-visibility: auto は KV に size containment が掛かって高さが潰れる（採用不可）
     受け口として .is-paused（animation-play-state: paused）だけ用意してある。
     JS 側は IntersectionObserver で KV が画面外になったら .is-paused を付ける、で足りる
     （.js-floating-cta / .is-visible と同じ「JS は状態クラスだけ付け外し」の流儀）。 */
@keyframes p-stay-lp-kv-scroll-bob {
  0% {
    text-indent: 0;
    animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
  }
  30% {
    text-indent: 10px;
    animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
  }
  100% {
    text-indent: 0;
  }
}
/* SCROLL：縦線（PC 80px / SP 60px）は疑似要素。KV 下端に固定し、
   文字量や上のブロックの伸縮に影響されないようにする */
.p-stay-lp-kv__scroll {
  position: absolute;
  left: 12.5%; /* 180/1440。キャッチ・ボタンと同じ左端 */
  /* KV 下端から 67px（67/1440）上げる。bottom: % は「包含ブロックの高さ」基準なので使わない
     ——コンテンツが多くて KV が伸びた幅で下余白まで一緒に伸び、予約席とズレて重なる。
     margin-% は abspos でも「包含ブロックの幅」基準なので、KV の高さに影響されない */
  bottom: 0;
  margin-bottom: 4.6528%;
  padding: 0 0 0 10px; /* 文字左端190 − 線の位置180。p{padding:1% 0} の打ち消しも兼ねる */
  min-height: 80px; /* 縦線の長さ。文字は 47px なので余裕がある */
  -webkit-writing-mode: vertical-rl;
          writing-mode: vertical-rl; /* カンプは rotation:-90 の回転＝上から下へ読む向き */
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.2em; /* 20% */
  /* RS-41。振幅 10px・2.4s ループ。動くのは文字だけ（縦線 ::before と箱は動かない） */
  animation: p-stay-lp-kv-scroll-bob 2.4s infinite;
  /* JS（IntersectionObserver）が KV の外で付ける受け口。CSS だけでは判定できない */
}
.p-stay-lp-kv__scroll.is-paused {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .p-stay-lp-kv__scroll {
    /* 「動きを減らす」設定では**完全に止める**（play-state: paused だと
       途中のフレームで固まって 4px ずれた位置に居座ることがある） */
    animation: none;
  }
}
.p-stay-lp-kv__scroll::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background-color: #fff;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-kv__scroll {
    left: 11.5385%; /* 45/390 */
    margin-bottom: 11.2821%; /* 44/390 */
    padding-left: 9px; /* 文字左端54 − 線の位置45 */
    min-height: 60px;
    font-size: 8px;
  }
}

/* ============================================================
   ヘッダーの「来場予約 / カタログ請求」ボタン（#top-head .btn_list02）

   既存テーマは「KVにヘッダーを重ねるページ」の分岐を body.home で表現している
   （style2.css:993）。LP は home ではないので同じ指定を自分で当てる。
   基底は style.css:769 の border:1px solid #000 ＋ 継承の黒文字なので、
   暗い KV 写真の上で読めなくなる。カンプは白枠・白文字。

   既存の style2.scss は変更しない方針なので、後勝ちする stay-lp.scss 側で解決する。
   （css/stay-lp.css は style.css / style2.css より後に読むので !important は不要）
   ※ セレクタが p-stay-lp 始まりでない例外。body.page-stay02 で始まるので他ページには漏れない。
   ※ .scrolled 時（ヘッダーが白背景になる）は基底の黒のままでよいので :not(.scrolled) を守る。
   ============================================================ */
body.page-stay02 #top-head:not(.scrolled) .inner .btn_list02 li a {
  color: #fff;
  border-color: #fff;
}
body.page-stay02 #top-head:not(.scrolled) .inner .btn_list02 li a:hover {
  color: #323232;
  background-color: #fff;
}

/* ============================================================
   見出しの共通部品 .p-stay-lp-heading

   DIFFERENCE / EXPERIENCE / MOVIE / SCHEDULE / VOICE / GALLERY /
   ACCESS / RESERVE の 8セクションで使い回す（page-stay02.php の契約）。
   ここを変えると 8箇所に波及するので、変更時は必ず申し送ること。

   数値の正：tmp-spec/difference/design-spec.json
     PC 6001:94「タイトル」 itemSpacing 16 / ラベル 6001:97（Roboto Regular 12px・
     letterSpacing 40%・#81734d）/ 見出し 6001:98（Shippori Mincho SemiBold 40px・
     lineHeight 130%・#323232）/ 線 6001:96（w40・strokeWeight 1・#81734d、x0 に対し
     文字は x48 ＝ 線40 + すきま8）
     SP 6030:46 は同じ構造でラベル 10px / 見出し 24px（線と 8px は PC と同値）。

   ■ 背景色ちがいのセクションへの対応（後続7セクションはベージュ / 濃いグレー / 白）
     色は **CSS カスタムプロパティで受ける**。使う側のセクションが自分自身に
     値を書くだけでよい（この部品を触らない・descendant セレクタも足さない）：

       .p-stay-lp-movie {              // 濃いグレー背景のセクション
         --p-stay-lp-heading-label-color: #fff;
         --p-stay-lp-heading-title-color: #fff;
       }

     ⚠ **既定値は var() の第2引数だけに置き、.p-stay-lp-heading 自身では宣言しない。**
       ブロックで宣言すると、祖先（セクション）が指定した値をブロックが上書きしてしまい
       継承で受けられなくなる。
     ⚠ この打ち消しが必要なのは style.css の `* { color: #323232 }` があるため。
       `*` は全要素に色を直接当てるので、**セクションに color を書いても子には継承されない**。
       カスタムプロパティは `*` の影響を受けないので、この構造でだけ色を差し替えられる。

   ■ 入れていないもの（カンプに無いので既定にしない）
     ・見出し下の横線（VOICE 等で必要になったら __title--line 等で足す）
     ・中央揃え（DIFFERENCE は左揃え。センタリングが要るセクションが出たら modifier で）
   ============================================================ */
/* 英字ラベル。左の横線は装飾なので疑似要素（空要素を置かない契約） */
.p-stay-lp-heading__label {
  position: relative; /* ::before の横線の基準 */
  margin: 0; /* p の UA 既定 margin: 1em 0 を消す。css/reset.css（header.php で style.css より先に読む）が
   既に落としているので現状は無害だが、外の1ファイルへの依存を明示するために書く。
   これが無い状態で reset が外れると、margin が .p-stay-lp-heading の外へ相殺で抜け、
   セクション上 padding に 1em 足された位置になる */
  padding: 0 0 0 48px; /* 線 40px + 文字とのすきま 8px。style.css の p{padding:1% 0} も打ち消す */
  color: var(--p-stay-lp-heading-label-color, #81734d);
  font-family: "Roboto", sans-serif; /* 英字のみのラベルなので $roboto 単体でよい（RS-18） */
  font-weight: 400;
  font-size: 12px; /* clamp 非対応ブラウザ用フォールバック */
  /* 12/1440 = .8333vw。上限はカンプ値で止める（__inner が 1080px で頭打ちなので
     1440px より広くしても器は広がらない＝文字だけ大きくする理由がない）。
     下限 10px は SP 分岐の実値と同じ。798/799 の境界で段差が出ないようにしてある */
  font-size: clamp(10px, 0.8333vw, 12px);
  line-height: 1.2; /* Figma は AUTO（Roboto の既定 ≒ 1.17）。実装は 1.2 で固定して高さを確定させる */
  letter-spacing: 0.4em; /* 40% */
}
.p-stay-lp-heading__label::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 40px;
  height: 1px;
  /* ラベルの色に自動追従させる。背景色ちがいのセクションでも
     --p-stay-lp-heading-label-color を1つ変えるだけで線までそろう */
  background-color: currentColor;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-heading__label {
    /* 10px はラベルの可読性の下限。SP カンプが既にその値なので clamp で縮めない
       （KV の SCROLL 8px / SP ボタン 15px と同じ扱い） */
    font-size: 10px;
  }
}

/* 和文見出しのタイポグラフィ（Shippori Mincho SemiBold / PC 40px・SP 24px / 行送り130%）。
   数値の正：tmp-spec/difference/design-spec.json 6001:98（PC）・6030:50（SP）。

   ■ なぜ mixin にしてあるか
     CTA（.p-stay-lp-cta__title）が**同じタイポで別ブロック**だから。
     CTA には英字ラベルが無く、共通部品 .p-stay-lp-heading の契約（ラベル + 見出しの2段組み）に
     当てはまらないためブロックを分けている（page-stay02.php の申し送り）。
     同じ数値を2箇所に書くと片方だけ直る事故が起きるので、値はここ1箇所に置く。
   ■ 色・余白は入れない
     色は利用側で決まる（共通部品は var()、CTA は白）。上下の余白も
     「ラベルとの16px」「CTAでは0」と用途が違うので、利用側の宣言に残す。
   ■ %placeholder(@extend) にしなかった理由
     @extend は出力位置でセレクタを合流させるので、.p-stay-lp-heading__title の
     ルールがファイル内で移動し、後勝ちで成り立っている既存グローバルの打ち消し順が変わる。
     mixin は宣言をその場に展開するだけなので出力の並びが変わらない。 */
/* 日本語見出し。1行のセクションと2行のセクションがあるので高さを固定しない */
.p-stay-lp-heading__title {
  /* ラベルとの間隔 16px。h2{margin: 2rem 0 4rem}（style.css）の打ち消しも兼ねる */
  margin: 16px 0 0;
  padding: 0; /* h2{padding:12px} の打ち消し */
  color: var(--p-stay-lp-heading-title-color, #323232);
  font-family: "Local Shippori Mincho", "Shippori Mincho", serif;
  font-weight: 600; /* SemiBold。h2,h3,h4{font-weight:500} の打ち消し */
  font-size: 40px; /* clamp 非対応ブラウザ用フォールバック */
  /* 40/1440 = 2.7778vw。下限 24px は SP 分岐の実値と同じで、798/799 の境界で段差が出ない
     （PC 側は 864px 以下で 24px に張り付く） */
  font-size: clamp(24px, 2.7778vw, 40px);
  line-height: 1.3; /* 130% */
  /* カンプの letterSpacing は未指定＝0。h2,h3,h4{letter-spacing:1px} を必ず打ち消すこと。
     残すと SP で 14字 x (24+1) = 350px となり、カンプの器 340px を超えて2行に折れる */
  letter-spacing: 0;
  overflow-wrap: break-word;
  overflow-wrap: anywhere; /* 分割不能な英数字語が入っても器から溢れさせない */
}
@media screen and (max-width : 798px) {
  .p-stay-lp-heading__title {
    font-size: 24px;
    font-size: clamp(18px, 6.1538vw, 24px); /* 24/390 = 6.1538vw */
  }
}

/* ============================================================
   DIFFERENCE  page-stay02.php / .p-stay-lp-difference

   数値の正：tmp-spec/difference/design-spec.json
     PC 6001:91（1440x1204）paddingTop/Bottom 120・itemSpacing 40・#e6e1d6
       中身 6001:93「Frame 63」x180 w1080（＝左右 180 の余白は max-width + auto margin）
       itemSpacing 40（見出し → リード）／比較図 6025:123 w1080 h698
     SP 6030:44（390x813）padding 80 / 25・itemSpacing 40
       中身 6030:45 w340 ／ 比較図 6038:817 w340 h394
   ============================================================ */
.p-stay-lp-difference {
  padding: 120px 0; /* 左右は __inner が持つ（背景色は画面端まで敷く） */
  background-color: #e6e1d6;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-difference {
    padding: 80px 0;
  }
}

.p-stay-lp-difference__inner {
  /* コンテンツ幅 1080px + 左右 padding 20px。カンプの左右 180px は
     「中央に収めるための余白」なので padding ではなく max-width + auto margin で作る。
     padding を 0 にしないのは、1120px 未満でテキストが画面端に触れないようにするため */
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-difference__inner {
    /* 案A：430px を超えたら SP レイアウトを引き伸ばさず中央に置く
       （中央寄せは基底の margin: 0 auto が持つ。背景はセクション側なので全幅のまま） */
    max-width: 430px;
    padding: 0 25px; /* カンプ SP の paddingLeft / paddingRight */
  }
}

/* リード 15px / Noto Sans JP / 行送り170% / 字送り16% / <br> で4行（PC カンプ） */
.p-stay-lp-difference__lead {
  margin: 40px 0 0; /* 見出しブロックとの間隔。下の要素に margin-top を付ける側で作る。
   0 を書いているのは p の UA 既定 margin-bottom: 1em を消すため */
  padding: 0; /* style.css の p{padding:1% 0} を打ち消す */
  color: #323232;
  font-size: 15px; /* clamp 非対応ブラウザ用フォールバック */
  font-size: clamp(12px, 1.0417vw, 15px); /* 15/1440 = 1.0417vw。下限 12px は SP 分岐と同値 */
  line-height: 1.7;
  letter-spacing: 0.16em;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-difference__lead {
    font-size: 12px;
  }
}

/* 比較図（RS-22：画像1枚で組む。table 化しない）。
   PC と SP で縦横比が違う画像なので、<source media> の切り替え幅（798px）と
   同じところで aspect-ratio も切り替える。**page-stay02.php と対で保守すること** */
.p-stay-lp-difference__figure {
  display: block; /* picture は既定 inline */
  margin-top: 40px;
  width: 100%;
  /* 画像の読み込み前から場所を取り、レイアウトシフトを出さない。
     実寸 2160x1396（表示 1080x698）＝ この比率と一致する */
  aspect-ratio: 1080/698;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-difference__figure {
    aspect-ratio: 340/394; /* 実寸 680x788（表示 340x394） */
  }
}

.p-stay-lp-difference__image {
  display: block; /* inline のままだと行ボックスの下端余白が aspect-ratio の箱からはみ出す */
  width: 100%;
  height: 100%; /* style.css の img{height:auto} を打ち消し、箱と絵柄を一致させる */
  /* 比率は箱と一致しているのでどちらでも同じ描画になるが、差し替えで比率が変わったとき
     クロップ（＝比較表の一部が消える）ではなくレターボックスに倒す */
  -o-object-fit: contain;
     object-fit: contain;
}

/* ============================================================
   EXPERIENCE  page-stay02.php / .p-stay-lp-experience

   数値の正：tmp-spec/experience/design-spec.json
     PC 6004:184（1440x1582）paddingTop/Bottom 120・itemSpacing 48・背景 #efe9e0
       Frame 63「見出し」x180 w1080 h134 ／ Frame 159「一覧」x180 y302 w1080 h1160
       カード 520x531（03 だけ h557）を 2列 x 2行。横 itemSpacing 40 / 行 72
       画像 520x318 ／ 画像→小見出し 24 ／ 小見出し→本文 16 ／ 本文→帯 16
     SP 6030:53（390x2008.7）padding 80 / 25・itemSpacing 40
       Frame 159「一覧」w340・itemSpacing 48（縦1列）
       画像 340x207.9（PC と同アスペクト）／ 画像→小見出し 8 ／ 小見出し→本文 8 ／ 本文→帯 16

   ■ 背景色（ブリーフとカンプが食い違った箇所）
     引き継ぎメモには「EXPERIENCE の背景は白」とあったが、カンプは #efe9e0（ベージュ）。
     design-spec の pc / sp とも fills[0] = #efe9e0 var:"ベージュ" で、_variable.scss の
     $lp-bg-beige のコメントにも「EXPERIENCE / VOICE / RESERVE 背景」と書いてある。
     カンプを正とした。見出しの色は DIFFERENCE と同じ既定（ラベル #81734d / 見出し #323232）
     なので --p-stay-lp-heading-*-color の上書きは不要＝共通部品には一切触っていない。

   ■ 列数の切り替えは 798 / 799（既存の $sp-big）にそろえた
     ・KV / DIFFERENCE と同じ境界なので、LP 全体で折り返し位置が1本になる。
     ・799px での 2列カード幅は (799-40)x0.481481 = 365px で、SP カンプのカード 340px より広い。
       つまり 2列のまま下ろしても、カンプより狭いカードは一度も出ない。
     ・逆に 1024 等で先に1列へ落とすと、カード幅が最大 984px・写真高 602px の
       別物（ヒーロー画像）になる。どちらのカンプにも根拠が無いので採らない。

   ■ 行 gap 72 の扱い（カンプから直接は取れていない導出値）
     Figma の Frame 159 は wrap の counterAxisSpacing を出しておらず、
     itemSpacing 40 は横方向だけ。行間は座標から 603 - 531 = 72 で逆算した。
     ただし ①1行目の 2枚は top 0 / bottom 531 でぴったり揃っている（siblingAlignments）
     ②2行目の top が 603 で確定している の2点から、72 は誤差を含まない引き算であり、
     かつ 8 の倍数・セクション itemSpacing 48 の 1.5 倍と、このカンプの刻みに乗っている。
     → キリのよい値へのスナップは不要と判断して 72px のまま採用した（80 や 64 に丸めると
        セクション総高 1582 が合わなくなる）。根拠として総高もガードしてある。

   ■ 連番 01〜04 は CSS カウンタ（HTML に数字は無い。唯一の出力元がここ）
     __list に counter-reset / __item に counter-increment / __keyword::before に content。
     数字を変える・消すときは page-stay02.php の申し送りと対で直すこと。

   ■ 既存グローバルの打ち消し（css/style.css・css/reset.css）
     * { color:#323232 }        … 親に color を書いても子に継承されない。白文字は要素ごとに指定する
     h2,h3,h4 { font-weight:500; letter-spacing:1px; line-height:1.3 } と
     h3 { font-size:2.4rem; padding:40px 0 10px }（SP 20px 0 10px）
     a,p,li,th,td,dt,dd { font-size:1.6rem; line-height:1.5; letter-spacing:.1rem }（幅で 1.5/1.4/1.2rem に変化）
     p { padding:1% 0 } ／ img { height:auto }
   ============================================================ */
/* カード内の font-size は「カード幅 C に比例させる」で統一してある。以下がその導出。
   （clamp の中に直接書くので Sass 変数にはしていない。各 clamp のコメントに分子を残す）
     コンテンツ幅 W = min(vw, 1120px) - 40   ← __inner の max-width と padding
     C = (W - 横gap 3.7037%) / 2 = W x 0.4814815
   ゆえに C = calc(48.14815vw - 19.259px)（vw < 1120px のとき）。
   カンプ幅 1440px では __inner が頭打ちなので C = 520px で一定になる。
   ※ 素の Nvw（= 値 / 1440）だと 1120〜1440px の帯で「カードは 520px のままなのに
      文字だけ小さい」状態になる。器が max-width で頭打ちするレイアウトでは使えない。 */
/* 帯（__benefit）の itemSpacing 16。ラベル→線→本文の各すきま。
   線は疑似要素なのでフレックスアイテムとして席を取らない。gap は 16 x 2 にして
   線をその中央（ラベル右端 + 16）へ置く＝1つの変数から両方を作る */
/* 縦線の太さ。カンプの Line 16 は strokeWeight 1 の「幅0のパス」なので、
   x146.3 を**中心に** 145.8〜146.8 で描かれている。CSS の 1px の箱を同じ見え方に
   するには、右オフセットを 16 ではなく 16 + 太さ/2 にして gap の中央へ置く
   （16 のままだと線がラベル寄りになり、左右のすきまが 16 / 15 と非対称になる） */
.p-stay-lp-experience {
  padding: 120px 0; /* 左右は __inner が持つ（背景色は画面端まで敷く） */
  background-color: #efe9e0;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-experience {
    padding: 80px 0;
  }
}

/* DIFFERENCE の __inner と同値。左右端がそろうこと自体が仕様（design-spec の
   siblingAlignments が Frame 63 と Frame 159 の left / right 一致を出している）。
   ⚠ 申し送り：この器は残り 6セクション（MOVIE 以降）でも同じ値になる見込み。
      3つ目が出た時点で .p-stay-lp__inner のような共通クラスへ引き上げるべきだが、
      HTML が p-stay-lp-<section>__inner で確定済みなので、ここでは複製にとどめた
      （指示のないリファクタはしない）。 */
.p-stay-lp-experience__inner {
  max-width: 1120px; /* コンテンツ幅 1080 + 左右 padding 20 */
  margin: 0 auto;
  padding: 0 20px;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-experience__inner {
    /* 案A：430px を超えたら SP レイアウトを引き伸ばさず中央に置く
       （中央寄せは基底の margin: 0 auto が持つ。背景はセクション側なので全幅のまま） */
    max-width: 430px;
    padding: 0 25px; /* カンプ SP の paddingLeft / paddingRight */
  }
}

/* カード一覧。3枚以上の同型カードが並ぶので grid（CLAUDE.md のグリッド標準パターン） */
.p-stay-lp-experience__list {
  counter-reset: experience; /* 連番の親。__item の counter-increment と対 */
  margin-top: 48px; /* セクションの itemSpacing 48（見出しブロック → 一覧） */
  display: grid;
  /* minmax(0,1fr)：1fr のままだと自動最小サイズ（min-content）が効いて、
     分割不能な英数字語でトラックが語長まで膨張する。カンプ文言では露見しない */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  -moz-column-gap: 3.7037%;
       column-gap: 3.7037%; /* 40/1080。横方向の gap は % */
  /* ⚠ 行間は row-gap ではなく __item の margin-top で作る（値はカンプどおり PC 72 / SP 48）。
     __item が subgrid（下の @supports 参照）なので、row-gap をここに置くと
     **subgrid のトラックが「親の row-gap 以上」に膨らむ**。
     Chromium 実測（tmp-spec の使い捨て計測）：トラック = max(中身, 親の row-gap − 子の margin-top)
       row-gap 72 のとき 小見出し 40.8→48（72-24）／本文 51→56（72-16）
       → カンプ 1440 のカード高 531.3 が 543.5 に膨らむ（＝カンプとズレる）
     row-gap を 0 にすると 4トラックとも中身なりの高さに戻り、block だったときと 1px も変わらない。 */
  row-gap: 0;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-experience__list {
    margin-top: 40px; /* SP の itemSpacing 40 */
    grid-template-columns: minmax(0, 1fr);
  }
}

.p-stay-lp-experience__item {
  counter-increment: experience; /* 表示順 = DOM 順。HTML に数字を書かない契約 */
}

/* カード行 → 次のカード行のすきま（カンプ PC 72 = 603-531 の導出値 / SP は itemSpacing 48）。
   __list の row-gap から移してきたもの（移した理由は __list のコメント参照）。
   ⚠ 「何枚目から次の行か」は __list の grid-template-columns（PC 2列 / SP 1列）と対。
      列数を変えるときはここも直すこと。SP 側を後ろに置いて後勝ちにしている（同詳細度）。
   ⚠ 見える行間そのものは verify-spec の relations（カード1↔3 vGap 72 / カード1↔2 vGap 48）で
      全 viewport ガード済み。row-gap の宣言読み返しに頼らない。 */
.p-stay-lp-experience__item:nth-child(n+3) {
  margin-top: 72px;
}

@media screen and (max-width : 798px) {
  .p-stay-lp-experience__item:nth-child(n+2) {
    margin-top: 48px;
  }
}
/* ■ 帯（__benefit）の上端を「行内でそろえる」ための subgrid
   カンプ PC の実測（tmp-spec/experience/design-spec.json）：
     カード 01/02（1行目）… h531・帯 y465 h66
     カード 03/04（2行目）… 03 h557・帯 y465 h92 ／ 04 h531・帯 y465 h66
   → **4枚とも帯の上端は y465（カード上端基準）でそろい、下端は 03 だけ 26px 長い。**
     カンプは「下端そろえ」ではなく **「上端そろえ ＋ 帯は中身なりの高さ」**。

   素の block だと帯の上端は「写真 + 小見出し + 本文」の実高で決まるので、
   小見出しが1枚だけ2行に折れた幅（実測 799px でカード03）で 34px ずれる。
   文言が1文字増えれば任意の幅で同じことが起きる＝**構造の問題**。

   ⚠ margin-top: auto（下端そろえ）は使えない：
     ・カンプは上端そろえなので、1440 でカード04 の帯が 26px 下がって**カンプとズレる**
     ・auto マージンは intrinsic sizing で 0 扱いになるため、トラック高が
       「本文→帯 16px」ぶん縮み、いちばん高いカードでは帯が本文に密着する
   → 行内でトラックを共有する subgrid（カードの4要素＝4トラック）が唯一カンプ再現になる。
     align-items: start … トラックが伸びても各要素は中身なりの高さのまま
                          （既定の stretch だとカード04 の金帯が 66→92px に伸びてカンプが崩れる）
     row-gap: 0        … 4トラック間に隙間を作らない。縦の間隔は従来どおり各要素の
                          margin-top が持つ（写真→小見出し 24/8・小見出し→本文 16/8・本文→帯 16。
                          値は一切変えていない）。
   ⚠ span 4 はカードの子が4つ（写真 / 小見出し / 本文 / 帯）である前提。
     page-stay02.php の li の子を増減したらここも直すこと。
   ⚠ @supports で囲うのは、subgrid 非対応ブラウザで grid-template-rows だけが落ちて
     grid-row: span 4 が生き残る状態を作らないため（親の暗黙トラックの数が変わる）。
     非対応時は従来どおり block で流れ、帯の上端はそろわないが崩れはしない。 */
@supports (grid-template-rows: subgrid) {
  .p-stay-lp-experience__item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    align-items: start;
    row-gap: 0;
  }
}
/* 写真。position の基準・aspect-ratio・overflow の担当（グラデも連番もこの中） */
.p-stay-lp-experience__visual {
  position: relative;
  /* ::before の mix-blend-mode: multiply の**合成対象をこの箱の中だけに限定する**（必須）。
     isolate が無いと、乗算する相手（backdrop）は「祖先で最も近い stacking context」＝
     実質ルートまで遡り、写真の外側で描かれたもの（セクションのベージュ地・カードの余白）まで
     合成グループに入る。今は overflow:hidden が疑似要素を写真の矩形に切っているので
     見た目は同じだが、この箱に transform / opacity が足された瞬間に染み出し方が変わる。
     **isolate を書いて「相手は自分の中の <img> だけ」と固定する。**
     ⚠ isolate は stacking context を作るが、::before と __keyword はどちらもこの中の
       z-index:auto の位置指定要素なので、描画順は DOM 順のまま（連番は前面）変わらない */
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  /* PC 520x318。SP の 340x207.9 も 1.6354 で同値なので1本でよい */
  aspect-ratio: 520/318;
  /* RS-27（RS-07 の訂正）下方向グラデ。画像には焼き込まれていない（Figma では写真の真上の
     Rectangle 62）。数値の正：tmp-spec/experience/design-spec.json 6004:274 / 6030:68 と、
     その fills[0] のスポット再取得（blendMode / position はどちらも measure スクリプトが
     記録しないキーなので Figma から直接読んだ）：
       blendMode: "MULTIPLY" ／ stops = [#484848 a0 @0.6490384, #484848 a1 @1]
       gradientTransform [[0,1,0],[-1,0,1]] → t = y ＝ **上→下**（to bottom）
     ⚠ **mix-blend-mode: multiply が無いと通常合成になり、最下部が不透明な #484848 の
       ベタ塗りになって写真が完全に消える**（実測で最下部4点が (76,76,76)(76,76,76)
       (70,70,70)(75,75,74) とほぼ一枚色だった）。乗算なら「写真の色 x 72/255 = 0.282」
       なので陰影が残る。
     ⚠ この違いは background-image の値としては**どちらも正しい**ので computed の数値検証では
       原理的に捕まらない。画素で見るガードを tmp-spec/experience/_probe-multiply.mjs に置いてある。
     ⚠ z-index を付けないこと。__keyword は DOM 上これより後の位置指定要素なので、
       どちらも z-index:auto のままなら __keyword が前面に出る。ここに z-index:1 を足すと
       連番と縦線がグラデの下に潜る */
}
.p-stay-lp-experience__visual::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(to bottom, rgba(72, 72, 72, 0) 64.9038%, #484848 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.p-stay-lp-experience__image {
  display: block; /* inline のままだと行ボックス下端の余白が箱からはみ出す */
  width: 100%;
  height: 100%; /* style.css の img{height:auto} を打ち消す */
  -o-object-fit: cover;
     object-fit: cover;
}

/* 「01 ｜ 光」。連番は ::before、縦線は ::after（HTML に空要素を置かない契約）。
   位置は写真に対する % と、フォントサイズに対する em の2本立てにしてある：
     left / bottom … 写真の寸法比。PC 35.2/520・SP 23/340 が同値、
                     PC 24.6/318・SP 16.07/207.9 も同値なので PC / SP の分岐が要らない
     ::before の席・::after の位置 … 文字サイズ比（em）。同じく PC / SP で同値 */
.p-stay-lp-experience__keyword {
  position: absolute;
  left: 6.7692%; /* 35.2/520（SP 23/340 = 6.7647%） */
  /* 下端基準にする。上端基準（239/318）でも同じ位置になるが、キーワードが折り返したとき
     上端基準だと写真の下へはみ出して overflow:hidden に切られる。下端基準なら上へ伸びる。
     24.6 = 写真 318 - 文字上端 239 - 行ボックス 32x1.7。
     SP も 207.9 - 156.3 - 20.9x1.7 = 16.07 → 16.07/207.9 = 7.73% で一致する */
  bottom: 7.7358%;
  /* 連番の席。数字の左端からキーワードの左端まで 97px（132.2 - 35.2）＝ 97/32 = 3.0313em。
     SP も 63.4/20.9 = 3.0335em で一致する。席を固定するのは、フォント差や桁数（10 以降）で
     「光」の位置が動かないようにするため。
     ⚠ 席を ::before 側の width で作らないこと。position:static の疑似要素は
       verify-layout.mjs が矩形を確定できず、inkBox（＝連番が本当に描かれているかの唯一の物差し）
       が「セレクタ不一致」で測れなくなる。席は親の padding、連番は absolute の対で持たせる */
  padding-left: 3.0313em;
  color: #fff; /* * { color:#323232 } は継承ではなく直接当たるので要素ごとに指定する */
  font-family: "Local Shippori Mincho", "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 32px; /* clamp 非対応ブラウザ用フォールバック */
  /* 32/520 = 6.1538% of カード幅 → 6.1538% x calc(48.14815vw - 19.259px)。
     下限 20.9px は SP カンプの実値 */
  font-size: clamp(20.9px, 2.96296vw - 1.1852px, 32px);
  line-height: 1.7;
  letter-spacing: 0.16em;
  /* 連番 01〜04。HTML に数字は無いので、ここが唯一の出力元 */
}
.p-stay-lp-experience__keyword::before {
  content: counter(experience, decimal-leading-zero);
  position: absolute; /* 席は親の padding-left が持つ。上のコメント参照 */
  top: 0;
  left: 0;
}
.p-stay-lp-experience__keyword {
  /* 縦線（Line 15）。PC 32px x 1px / SP 20.9px x 0.7px。
     長さは文字サイズと同じ（32/32 = 1em・20.9/20.9 = 1em）なので em で持つ */
}
.p-stay-lp-experience__keyword::after {
  content: "";
  position: absolute;
  top: 0.4375em; /* 14/32（SP 9.1/20.9 = 0.4354em）。行ボックス上端からの下げ */
  left: 2.125em; /* 68/32（SP 44.5/20.9 = 2.1292em）。文字左端からの距離 */
  width: 1px;
  height: 1em;
  background-color: #fff;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-experience__keyword {
    font-size: 20.9px;
  }
  .p-stay-lp-experience__keyword::after {
    width: 0.7px; /* SP カンプの strokeWeight 0.7 */
  }
}

/* 小見出し（h3）。1行のカードと2行のカードがあるので高さを固定しない */
.p-stay-lp-experience__title {
  margin: 24px 0 0; /* 写真 → 小見出し 24 */
  padding: 0; /* h3{padding:40px 0 10px}（SP 20px 0 10px）の打ち消し */
  color: #323232;
  font-family: "Local Shippori Mincho", "Shippori Mincho", serif;
  font-weight: 400; /* カンプは Regular。h2,h3,h4{font-weight:500} の打ち消し */
  font-size: 24px; /* clamp 非対応ブラウザ用フォールバック */
  /* 24/520 = 4.6154% of カード幅。下限 20px は SP カンプの実値で、
     798/799 の境界で段差が出ない（PC 側は 940px 以下で 20px に張り付く） */
  font-size: clamp(20px, 2.22222vw - 0.8889px, 24px);
  line-height: 1.7; /* h2,h3,h4{line-height:1.3} の打ち消し */
  letter-spacing: 0.16em; /* 16%。h2,h3,h4{letter-spacing:1px} を必ず打ち消すこと */
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-experience__title {
    margin-top: 8px; /* SP は写真 → 小見出し 8 */
    font-size: 20px;
  }
}

/* 本文（p）。カンプは PC・SP とも <br> で2行 */
.p-stay-lp-experience__text {
  margin: 16px 0 0; /* 小見出し → 本文 16。0 を書いているのは p の UA 既定 margin-bottom 消し */
  padding: 0; /* style.css の p{padding:1% 0} の打ち消し */
  color: #323232;
  font-size: 15px; /* clamp 非対応ブラウザ用フォールバック */
  font-size: clamp(12px, 1.38889vw - 0.5556px, 15px); /* 15/520 = 2.8846% of カード幅 */
  line-height: 1.7;
  letter-spacing: 0.16em;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-experience__text {
    margin-top: 8px;
    font-size: 12px;
  }
}

/* 「宿泊すると… ｜ 本文」の帯。
   ⚠ 高さを固定しない。PC は 03 だけ本文2行（カンプ h92 / 他 h66）、SP は全カード2行。

   ■ 上下 padding を 20px にしている理由（カンプの paddingTop / Bottom は 16）
     カンプの帯の高さを決めているのは中の縦線 Line 16 で、その長さは
     本文の高さ + 8（PC 26→34 / 52→60）。CSS では疑似要素の縦線が親の高さを
     決められないので、その 8px を上下 padding へ振り替える（16 + 4 = 20）。
     結果：帯 = 20 + 本文 + 20、縦線 = 本文 + 8（下の calc）。
       PC 1行 65.5（カンプ 66）／ PC 2行 91（カンプ 92）／ 縦線 33.5・59（カンプ 34・60）
     SP は Line 16 の長さ 40 = 本文 40.8 と一致していて +8 が無いので padding 16 のまま。 */
.p-stay-lp-experience__benefit {
  margin-top: 16px; /* 本文 → 帯 16 */
  display: flex;
  align-items: center;
  gap: 32px; /* ラベル→線 16 と 線→本文 16 の合算（線は席を取らない疑似要素） */
  padding: 20px 24px;
  background-color: #81734d;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-experience__benefit {
    padding: 16px;
  }
}

.p-stay-lp-experience__benefit-label {
  position: relative; /* ::after の縦線の基準 */
  align-self: stretch; /* 帯のコンテンツ高いっぱいに伸ばす＝縦線が本文の行数に自動追従する */
  /* 伸ばした箱の中で1行のラベルを縦センタリングする（疑似要素の位置調整ではない）。
     カンプでもラベルは帯の中央（PC 03：ラベル中心 46 = 帯の中心 46） */
  display: flex;
  align-items: center;
  flex-shrink: 0; /* 「宿泊すると…」は折らない（カンプは hug 幅） */
  color: #fff;
  font-size: 15px; /* clamp 非対応ブラウザ用フォールバック */
  font-size: clamp(12px, 1.38889vw - 0.5556px, 15px);
  line-height: 1.7;
  letter-spacing: 0.16em;
  /* 縦線（Line 16）。長さ = 帯のコンテンツ高 + 8（上のコメント参照）。
     位置は gap の中央 = ラベル右端 + 16。gap と同じ変数から作るので、
     すきまを変えたときに線だけ取り残されることがない */
}
.p-stay-lp-experience__benefit-label::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -16.5px; /* gap の中央（左右とも 15.5px） */
  width: 1px;
  height: calc(100% + 8px);
  background-color: #fff;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-experience__benefit-label {
    font-size: 12px;
  }
  .p-stay-lp-experience__benefit-label::after {
    /* SP は Line 16 の長さ 40 が本文の高さと一致している（PC のような +8 が無い） */
    top: 0;
    height: 100%;
  }
}

.p-stay-lp-experience__benefit-text {
  min-width: 0; /* フレックスアイテムの自動最小サイズを外す（長い語で帯を破裂させない） */
  color: #fff;
  font-size: 15px; /* clamp 非対応ブラウザ用フォールバック */
  font-size: clamp(12px, 1.38889vw - 0.5556px, 15px);
  line-height: 1.7;
  letter-spacing: 0.16em;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-experience__benefit-text {
    font-size: 12px;
  }
}

/* ============================================================
   MOVIE  page-stay02.php / .p-stay-lp-movie

   数値の正：tmp-spec/movie/design-spec.json
     PC 6004:362（1440x1113）paddingTop/Bottom 120・itemSpacing 40・背景 #4d4541
       Frame 63「見出し+リード」x180 w1080（itemSpacing 40）
         タイトル（itemSpacing 16）= Frame 147（線40 + ラベル）+ 見出し 40px
         リード 15px / 行送り170% / 字送り16% / <br>で2行
       Frame 84「動画枠」x180 y386 w1080 h607・背景 #373737
         中身は Group 60（再生ボタン 73x73）1つだけ。上下左右とも完全な中央
         （_spot._derived: playLeft/Right 503.5・playTop/Bottom 267 → centered:true）
     SP 6030:141（390x581.3）padding 80 / 25・itemSpacing 40
       Frame 63 w340 ／ Frame 84 340x191.3 ／ 再生ボタン 23x23（同じく完全中央）

   ■ このLPで最初の「暗い背景」セクション
     共通部品 .p-stay-lp-heading はベージュ背景前提の色（ラベル・線 #81734d /
     見出し #323232）なので、ここだけ白へ反転する。カンプの実測は4つとも #ffffff
     （Line 14 / ラベル / 見出し / リード）。
     **部品の既定は変えず、このセクションの下でだけカスタムプロパティを上書きする。**
     既定を白にすると DIFFERENCE / EXPERIENCE など残り7セクションが読めなくなる。

   ■ 動画枠の高さ（RS-15：動画URL未確定なので枠だけ）
     PC 1080:607 も SP 340:191.25 も 16:9 なので aspect-ratio 1本で足りる
     （1080/16x9 = 607.5・340/16x9 = 191.25）。高さを px で持たない＝幅に自動追従する。
   ============================================================ */
.p-stay-lp-movie {
  /* 共通部品の色をこのセクションの下でだけ差し替える（部品側は一切触らない）。
     style.css の * { color:#323232 } は全要素へ**直接**当たるので、セクションに
     color を書いても子には継承されない。カスタムプロパティは * の影響を受けないため、
     この受け渡しだけが色を通せる経路になる（.p-stay-lp-heading の申し送り参照） */
  --p-stay-lp-heading-label-color: #fff;
  --p-stay-lp-heading-title-color: #fff;
  padding: 120px 0; /* 左右は __inner が持つ（背景色は画面端まで敷く） */
  background-color: #4d4541;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-movie {
    padding: 80px 0;
  }
}

/* DIFFERENCE / EXPERIENCE の __inner と同値（カンプ _layoutFlags.siblingAlignments が
   PC left 180 / right 1260、SP left 25 / right 365 で見出しと動画枠の一致を出している）。
   ⚠ 申し送り：同じ器がこれで3つ目。.p-stay-lp__inner のような共通クラスへ引き上げるべきだが、
      HTML が p-stay-lp-<section>__inner で確定済みなので複製にとどめた（指示のないリファクタはしない）。 */
.p-stay-lp-movie__inner {
  max-width: 1120px; /* コンテンツ幅 1080 + 左右 padding 20 */
  margin: 0 auto;
  padding: 0 20px;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-movie__inner {
    /* 案A：430px を超えたら SP レイアウトを引き伸ばさず中央に置く
       （中央寄せは基底の margin: 0 auto が持つ。背景はセクション側なので全幅のまま） */
    max-width: 430px;
    padding: 0 25px; /* カンプ SP の paddingLeft / paddingRight */
  }
}

/* リード 15px / Noto Sans JP / 行送り170% / 字送り16% / <br>で2行（PC・SPとも） */
.p-stay-lp-movie__lead {
  margin: 40px 0 0; /* Frame 63 の itemSpacing 40。0 は p の UA 既定 margin-bottom 消し */
  padding: 0; /* style.css の p{padding:1% 0} を打ち消す */
  /* * { color:#323232 } は継承ではなく直接当たるので、白は要素ごとに指定する */
  color: #fff;
  font-size: 15px; /* clamp 非対応ブラウザ用フォールバック */
  font-size: clamp(12px, 1.0417vw, 15px); /* 15/1440 = 1.0417vw。下限 12px は SP 分岐と同値 */
  line-height: 1.7;
  letter-spacing: 0.16em;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-movie__lead {
    font-size: 12px;
  }
}

/* 動画プレーヤーが入る枠。中身が空でも場所を取るよう aspect-ratio で高さを作る */
.p-stay-lp-movie__frame {
  position: relative; /* --placeholder の再生ボタン（疑似要素）の基準 */
  margin-top: 40px; /* セクションの itemSpacing 40（Frame 63 → Frame 84） */
  width: 100%;
  aspect-ratio: 16/9; /* PC 1080:607.5 / SP 340:191.25 とも 16:9 */
  background-color: #373737;
  /* 動画が支給されたとき、枠にぴったり収めるための受け皿。
     page-stay02.php の「差し替え手順」3 と対で保守すること */
}
.p-stay-lp-movie__frame > iframe,
.p-stay-lp-movie__frame > video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 再生ボタン。**--placeholder を外したら消える**のが契約なので、
   __frame 側ではなく修飾子側に描く（動画が入った枠にボタンが残らない）。
   img/stay-lp/play.svg は白い円の輪郭 + 白い三角。色替えが要らないので mask ではなく
   background-image で置く。パスは SCSS に直書き（style属性やCSS変数で渡すと
   url() の解決基準がずれて 404 になり、computed では検出できない）。 */
.p-stay-lp-movie__frame--placeholder::before {
  content: "";
  position: absolute;
  /* 上下左右とも完全な中央（カンプ _spot._derived の centered: true）。
     枠が 16:9 で伸縮しても中心に留まるよう % + transform で置く */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 73px; /* カンプ PC の Group 60 = 73x73 */
  height: 73px;
  background-image: url(../img/stay-lp/play.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-movie__frame--placeholder::before {
    width: 23px; /* カンプ SP の Group 60 = 23x23 */
    height: 23px;
  }
}

/* ============================================================
   SCHEDULE  page-stay02.php / .p-stay-lp-schedule

   数値の正：tmp-spec/schedule/design-spec.json
     PC 6004:379（1440x2194）paddingTop/Bottom 120・itemSpacing 40
       fills = GRADIENT_LINEAR。stops [#ffffff @0 → #c8d2d3 @1]、
       gradientTransform [[0,1,0],[-1,0,1]] → t = y ＝ **上→下**（RS-08 の方向・停止位置はこれで確定）
       Frame 63 x180 w1080 h174（見出し + リード / itemSpacing 40）
       Group 95 x180 y334 w1080 h1740 ＝ 軸 + 行リスト
         Line 17  x720 y334 w1740 rotation -90（＝ **縦 1740 の 1本通し**。#c1baa3 / strokeWeight 1）
         Frame 165 x180 y371 w1080 h1652（6行・itemSpacing 40）
           行 Frame 162 ほか 1080x242：写真 480 / ドット 8（x536） / 本文 480（x600）
           ドット Ellipse 5 = 8x8 #323232、行の vcenter 121・hcenter 540
     SP 6030:153（390x2513）padding 80 / 25・itemSpacing 40
       Frame 63 w340 h210 ／ Frame 202 x25 y330 w340 h2103
         Group 104 の Line 17 x4 y0 w2103 rotation -90（**軸は左端**。中心 x=4）
         Frame 165 x24 y25.9 w300 h2043.3（＝行は 24px 右にインデント・右に 16px 余る）
         Ellipse 5〜10 は y31.9 / 391.9 / 747.9 / 1084.9 / 1420.9 / 1758
           → 中心は各行の先頭から 10.0 / 13.0 / 11.7 / 11.5 / 10.2 / 10.1 ＝ **時刻の行の中心**
             （PC の「行の上下中央」とは合わせ方が違う）

   ■ 左右交互は HTML に書かない（マークアップ担当との契約）
     DOM は全行 「__body → __visual」 で固定。写真が左に来る 1・3・5 行目は
     **:nth-child(odd) { flex-direction: row-reverse }** で作る。
     --reverse のような修飾子を HTML に持たせると、行を1つ足した／入れ替えた瞬間に
     DOM と表示がズレて二重管理になる（EXPERIENCE の連番を CSS カウンタにしたのと同じ理由）。

   ■ 軸は「1本通し」＝ __list::before（行ごとに引かない）
     カンプの LINE は PC も SP も**長さ 1740 / 2103 の 1本だけ**で、行間 40px の所でも切れていない。
     __item ごとに引くと 5 箇所に隙間ができる。
     軸は行リストより **PC で上 37px・下 51px／SP で上 25.9px・下 33.8px** はみ出すので、
     そのぶんを __list の padding として持たせ、::before を top:0 / bottom:0 で
     **padding box いっぱい**に伸ばす（1740 = 37 + 1652 + 51 ／ 2103 = 25.9 + 2043.3 + 33.8）。
     ⚠ この padding は「軸のはみ出し」専用。見出しとの 40px（セクションの itemSpacing）は
       __list の margin-top が持つ＝**1つの余白を margin と padding の両方で作っていない**。
       リード下端 → 1行目上端の見た目の余白 77px は 40 + 37 の内訳で、カンプの
       294 → 371 と一致する。

   ■ ドットは行ごとに1つ ＝ __item::before（8x8 / #323232）
     PC は行の上下中央（top:50%）・行の左右中央（left:50% ＝ 軸の位置）。
     SP は **時刻の行の中心**に合わせるので top を px で持つ（下の $sch-time-* から算出）。
     軸もドットも装飾なので HTML に空要素は無い（疑似要素で作る契約）。

   ■ SP の右 16px を詰めない（判断）
     カンプの行リストは 340 の器に対し 300（左 24 + 右 16）。この 16 は
     **ドット → 本文の 16px と同値**で、行ブロックを左右対称にインセットした指定に読める。
     `width: 300px` のような固定幅ではなく **__list の padding-right: 16px** で持たせれば、
     可変幅のまま カンプどおりの見た目になる（器が広がれば行も広がる）。
     指示のないカンプからの逸脱をしない方針（CLAUDE.md 優先順位2）に合わせ、詰めない。

   ■ ブレークポイントは他5セクションと同じ $sp-big（798/799）
     この帯で __inner の左右 padding（20 ↔ 25）も切り替わる。SCHEDULE だけ別の幅で折り返すと、
     前後のセクションと**左右端がそろわない帯**ができる。799px では 本文/写真とも
     44.4444% x 759 = 337px で、写真 170px・本文 153px なので横並びのまま無理がない。

   ■ 既存グローバルの打ち消し（css/style.css・css/reset.css）
     * { color:#323232 } … 親に color を書いても子に継承されない（今回は既定色と同じなので実害なし）
     h2,h3,h4 { font-weight:500; letter-spacing:1px; line-height:1.3 } と
     h3 { font-size:2.4rem; padding:40px 0 10px }（SP 20px 0 10px）
     a,p,li,th,td,dt,dd { font-size:1.6rem; line-height:1.5; letter-spacing:.1rem }
     p { padding:1% 0 } ／ img { height:auto }
   ============================================================ */
/* 軸とドット。カンプの実測値を1箇所に置き、PC / SP の両方から参照する */
/* #c1baa3。_variable.scss の $lp-line と同値であることを確認済み */
/* カンプ Ellipse 5 = 8x8 */
/* カンプ SP Line 17 の中心 x（__list の左端から） */
/* カンプ SP Frame 165 の x。= ドット右端(8) + すきま 16 */
/* カンプ SP 行リストの右の余り（340 - 24 - 300） */
/* 軸が行リストからはみ出す長さ（カンプ実測。PC は Group 95 と Frame 165 の差、SP は Frame 202 と Frame 165 の差） */
/* 時刻の行。カンプは PC / SP とも 18px。lineHeight は AUTO（Roboto の既定 ≒ 1.17 / カンプの箱は h21）だが、
   .p-stay-lp-heading__label と同じ扱いで 1.2 に固定して高さを確定させる。
   SP のドットは「時刻の行の中心」に置くので、その位置をこの2つから作る（値を二重に書かない） */
.p-stay-lp-schedule {
  padding: 120px 0; /* 左右は __inner が持つ（背景は画面端まで敷く） */
  /* RS-08 縦グラデ。カンプ fills[0] の stops / gradientTransform から
     「上 #fff → 下 #c8d2d3・停止位置 0% と 100%」で確定（上のコメント参照） */
  background-image: linear-gradient(to bottom, #fff 0%, #c8d2d3 100%);
}
@media screen and (max-width : 798px) {
  .p-stay-lp-schedule {
    padding: 80px 0;
  }
}

/* DIFFERENCE / EXPERIENCE / MOVIE の __inner と同値（カンプ _layoutFlags.siblingAlignments が
   PC left 180 / right 1260・hcenter 720 で Frame 63 と Group 95 の一致を出している）。
   ⚠ 申し送り：同じ器がこれで4つ目。.p-stay-lp__inner のような共通クラスへ引き上げるべきだが、
      HTML が p-stay-lp-<section>__inner で確定済みなので複製にとどめた（指示のないリファクタはしない）。 */
.p-stay-lp-schedule__inner {
  max-width: 1120px; /* コンテンツ幅 1080 + 左右 padding 20 */
  margin: 0 auto;
  padding: 0 20px;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-schedule__inner {
    /* 案A：430px を超えたら SP レイアウトを引き伸ばさず中央に置く
       （中央寄せは基底の margin: 0 auto が持つ。背景はセクション側なので全幅のまま） */
    max-width: 430px;
    padding: 0 25px; /* カンプ SP の paddingLeft / paddingRight */
  }
}

/* リード 15px / Noto Sans JP / 行送り170% / 字送り16% / <br>で2行（PC・SPとも） */
.p-stay-lp-schedule__lead {
  margin: 40px 0 0; /* Frame 63 の itemSpacing 40。0 は p の UA 既定 margin-bottom 消し */
  padding: 0; /* style.css の p{padding:1% 0} を打ち消す */
  font-size: 15px; /* clamp 非対応ブラウザ用フォールバック */
  font-size: clamp(12px, 1.0417vw, 15px); /* 15/1440 = 1.0417vw。下限 12px は SP 分岐と同値 */
  line-height: 1.7;
  letter-spacing: 0.16em;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-schedule__lead {
    font-size: 12px;
  }
}

/* 行リスト ＝ カンプの Group 95（PC）/ Frame 202（SP）。軸（::before）の器も兼ねる */
.p-stay-lp-schedule__list {
  position: relative; /* 軸（::before）の基準 */
  margin-top: 40px; /* セクションの itemSpacing 40（Frame 63 → Group 95） */
  /* 軸が行リストからはみ出すぶん。ここは「軸の長さ」を作るための padding で、
     セクションの 40px（margin-top）とは発生源が別（上のコメント参照） */
  padding: 37px 0 51px;
  /* 軸。行ごとではなく **1本通し**（カンプの Line 17 は 1本しかない） */
}
.p-stay-lp-schedule__list::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%; /* PC は __inner の中央 x=540。行の中央（＝ドット）と同じ位置 */
  transform: translateX(-50%); /* 幅 1px の箱を中心線にそろえる（カンプの線は x=540 を中心に 539.5〜540.5） */
  width: 1px; /* strokeWeight 1 */
  background-color: #c1baa3;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-schedule__list {
    /* 右 16px は「詰めない」判断（上のコメント参照）。width: 300px の固定幅にはしない */
    padding: 25.9px 16px 33.8px 24px;
  }
  .p-stay-lp-schedule__list::before {
    /* SP の軸は中央ではなく左端。中心が __list の左端から 4px */
    left: 4px;
  }
}

/* 1行。PC は [本文][軸][写真] の横並び、SP は縦積み。
   ⚠ 写真の左右は :nth-child(odd) で入れ替える。HTML には修飾子を持たせない契約 */
.p-stay-lp-schedule__item {
  position: relative; /* ドット（::before）の基準 */
  display: flex;
  align-items: center; /* 本文は行の上下中央（カンプ Frame 161 y32 / h178 で 242 の中央） */
  /* 本文 480 と写真 480 のあいだ ＝ 56 + ドット 8 + 56 = 120 → 120/1080。
     ⚠ Figma の itemSpacing 38 は space-between に上書きされた残骸なので使わない。
       ドットは席を取らない絶対配置なので、gap は「56 + 8 + 56」をまとめて持つ。
       44.4444 x 2 + 11.1111 = 100（検算済み） */
  gap: 11.1111%;
  /* ドット。PC は行の上下中央 x 左右中央（＝軸の上） */
}
.p-stay-lp-schedule__item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #323232; /* #323232 */
}
.p-stay-lp-schedule__item {
  /* 写真が左に来る行（カンプの 18:00 / 20:00 / 7:00）。
     DOM 順は変えずに見た目だけ入れ替える。行の増減・並べ替えに追従する */
}
.p-stay-lp-schedule__item:nth-child(odd) {
  flex-direction: row-reverse;
}
.p-stay-lp-schedule__item {
  /* 行間 40px（PC / SP とも同値なので分岐しない）。縦の余白は下の要素の margin-top で作る */
}
.p-stay-lp-schedule__item + .p-stay-lp-schedule__item {
  margin-top: 40px;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-schedule__item {
    /* 縦積み。間隔だけのために flex を使わない（__visual の margin-top が持つ）。
       display:block にすることで :nth-child(odd) の flex-direction も自動的に無効化される */
    display: block;
  }
  .p-stay-lp-schedule__item::before {
    /* 上下：時刻の行の中心（カンプの実測 10.0〜13.0 に対し 21.6/2 = 10.8）。
       左右：軸の上（__item は __list の content 左端 ＝ 軸から $sch-indent-sp 右にいる） */
    top: 10.8px;
    left: -20px; /* -20px */
  }
}

/* 本文ブロック。時刻 → 見出し → 本文は margin-top で積む（縦の間隔だけに flex を使わない） */
.p-stay-lp-schedule__body {
  width: 44.4444%; /* 480/1080 */
  min-width: 0; /* 分割不能な英数字語で flex アイテムが膨らんで行からはみ出すのを防ぐ */
}
@media screen and (max-width : 798px) {
  .p-stay-lp-schedule__body {
    width: auto; /* 縦積みでは器いっぱい */
  }
}

/* 時刻 18px / Roboto Bold / 字送り4% / #81734d。PC・SP とも 18px なので clamp を使わない */
.p-stay-lp-schedule__time {
  margin: 0;
  padding: 0; /* style.css の p{padding:1% 0} を打ち消す */
  color: #81734d;
  /* RS-18：総称ファミリを含まない $roboto-name で連結する。
     $roboto（= "Roboto", sans-serif）を繋ぐと途中の sans-serif が実体に解決して
     後続の Noto Sans JP に到達しない */
  font-family: "Roboto", "Local Noto Sans JP", "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 0.04em;
}

/* 小見出し 20px / 18px / Shippori Mincho SemiBold / 字送り4% */
.p-stay-lp-schedule__title {
  margin: 16px 0 0; /* カンプ Frame 161 の itemSpacing 16（時刻 → 小見出し） */
  padding: 0; /* h3{padding:40px 0 10px}（SP 20px 0 10px）を打ち消す */
  color: #323232;
  font-family: "Local Shippori Mincho", "Shippori Mincho", serif;
  font-weight: 600; /* SemiBold。h2,h3,h4{font-weight:500} の打ち消し */
  font-size: 20px; /* clamp 非対応ブラウザ用フォールバック */
  font-size: clamp(18px, 1.3889vw, 20px); /* 20/1440 = 1.3889vw。下限 18px は SP 分岐と同値 */
  /* カンプは lineHeight AUTO。箱は PC 29/20px・SP 26/18px なので比 1.45 で写す
     （h2,h3,h4{line-height:1.3} の打ち消しも兼ねる） */
  line-height: 1.45;
  letter-spacing: 0.04em; /* h2,h3,h4{letter-spacing:1px} を必ず打ち消すこと */
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-schedule__title {
    font-size: 18px;
  }
}

/* 本文 15px / 12px / Noto Sans JP / 行送り170% / 字送り16% */
.p-stay-lp-schedule__text {
  margin: 8px 0 0; /* カンプ Frame 168 の itemSpacing 8（小見出し → 本文） */
  padding: 0; /* style.css の p{padding:1% 0} を打ち消す */
  color: #323232;
  font-size: 15px; /* clamp 非対応ブラウザ用フォールバック */
  font-size: clamp(12px, 1.0417vw, 15px); /* 15/1440 = 1.0417vw。下限 12px は SP 分岐と同値 */
  line-height: 1.7;
  letter-spacing: 0.16em;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-schedule__text {
    font-size: 12px;
  }
}

/* 写真。寸法（width + aspect-ratio）と overflow の担当。角丸はカンプに無い */
.p-stay-lp-schedule__visual {
  overflow: hidden;
  width: 44.4444%; /* 480/1080 */
  /* PC 480x242。SP の 300x151.3 も 1.983 で同値なので1本でよい */
  aspect-ratio: 480/242;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-schedule__visual {
    margin-top: 16px; /* SP の行 itemSpacing 16（本文ブロック → 写真） */
    width: auto; /* 縦積みでは器いっぱい */
  }
}

.p-stay-lp-schedule__image {
  display: block; /* inline のままだと行ボックス下端の余白が箱からはみ出す */
  width: 100%;
  height: 100%; /* style.css の img{height:auto} を打ち消す */
  -o-object-fit: cover;
     object-fit: cover;
}

/* ============================================================
   CTA（予約するボタン）  page-stay02.php / .p-stay-lp-cta

   数値の正：tmp-spec/cta/design-spec.json
     PC 6005:559（1440x556）padding 120 / 180・itemSpacing 40
       fills = [IMAGE(CROP), SOLID #000000 opacity 0.75]  ← 暗幕は写真に焼き込まれていない
       Frame 63 x180 w1080（itemSpacing 40）= タイトル 40px 2行 + リード 15px 2行
       ボタン 6005:576 x180 y356 w380 h80（#81734d / 文字 #ffffff 18px Bold / 字送り16%）
     SP 6030:219（390x462）padding 80 / 25・itemSpacing 40
       タイトル 24px 2行 / リード 12px / ボタン 340x80

   ■ 見出しに共通部品を使っていない（page-stay02.php の判断）
     このセクションだけ英字ラベルが無く、部品の契約（ラベル+見出しの2段組み）から外れる。
     タイポは同値なので @mixin p-stay-lp-title-typography で値を1箇所から共有する。

   ■ ボタンの組み方（inline-flex + gap では作れない）
     カンプ実測（_spot._derived）：
       ラベルはボタン内で**完全な中央**（左右とも PC 97 / SP 77）
       矢印はそれとは**独立に**右端から PC 28.4 / SP 23.4、上下は中央
     gap で並べるとラベルが矢印のぶん左へずれる。ラベルを中央に置き、
     矢印は position: absolute で右端から測るのが正しい写し方。
   ============================================================ */
/* 矢印（RS-19）。KV と同じ img/stay-lp/arrow.svg の別サイズ。
   見える実寸 19.6 x 18（design-spec の w18/h19.6 は rotation:-90 の回転前の値なので使わない）。
   右余白はカンプ実測（_spot._derived.arrowRightOffset）。
   ボタンの左右 padding をこの2つの和から作る＝矢印の席が実寸と必ず連動する */
.p-stay-lp-cta {
  position: relative;
  /* 暗幕(z-index:1)・写真(0)・コンテンツ(2)をこのセクション内に閉じ込める。
     これが無いと z-index が #top-head(999) や前後のセクションと張り合う */
  isolation: isolate;
  padding: 120px 0; /* 左右は __inner が持つ（写真は画面端まで敷く） */
  /* 写真が読めなかったときも白文字が読める地色。カンプに地色の指定は無いが、
     暗幕と同じ黒を敷いておけば「写真だけ落ちた」状態でも見た目が崩れない */
  background-color: #000;
  /* RS-06 暗幕：写真の上に黒75%。cta_01-*.jpg には焼き込まれていない
     （カンプではフレーム自身の2枚目の塗り SOLID #000000 / opacity 0.75）。
     KV と同じく rgba() ではなく background-color + opacity で作る。
     rgba のアルファは computed の hex 正規化で落ちるため、暗幕が消えても検証が通る偽ガードになる */
}
.p-stay-lp-cta::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background-color: #000;
  opacity: 0.75;
  pointer-events: none;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-cta {
    padding: 80px 0;
  }
}

/* 背景写真。aspect-ratio で高さを作らない——
   このセクションの高さは中身（padding + 見出し + リード + ボタン）が決めるので、
   写真は絶対配置でその高さを埋める側に回す。文言が増えて伸びても写真が追従する。
   ※ KV も 2026-08-21 に同じ作り（高さは min-height:100svh と中身が決め、写真は absolute）
     になったので、この 2 セクションは対で保守する。 */
.p-stay-lp-cta__bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* 暗幕(1) の背面・セクション背景の前面。**auto にしないこと**——
     暗幕は ::before で DOM 上この要素より前にあるため、どちらも auto だと
     DOM 順で写真の方が前面になり、暗幕が写真の下に隠れて効かなくなる */
  z-index: 0;
  display: block; /* picture は既定 inline */
}
.p-stay-lp-cta__bg img {
  display: block; /* inline のままだと行ボックス下端の余白が箱からはみ出す */
  width: 100%;
  height: 100%; /* style.css の img{height:auto} を打ち消す */
  -o-object-fit: cover;
     object-fit: cover;
}

.p-stay-lp-cta__inner {
  position: relative;
  z-index: 2; /* 写真(0) と暗幕(1) の前面 */
  max-width: 1120px; /* コンテンツ幅 1080 + 左右 padding 20 */
  margin: 0 auto;
  padding: 0 20px;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-cta__inner {
    /* 案A：430px を超えたら SP レイアウトを引き伸ばさず中央に置く
       （中央寄せは基底の margin: 0 auto が持つ。背景はセクション側なので全幅のまま） */
    max-width: 430px;
    padding: 0 25px; /* カンプ SP の paddingLeft / paddingRight */
  }
}

/* CTA 専用の見出し（共通部品ではない。上のコメント参照）。
   タイポの数値は @mixin p-stay-lp-title-typography が唯一の出どころ */
.p-stay-lp-cta__title {
  margin: 0; /* h2{margin: 2rem 0 4rem}（style.css）の打ち消し。上の余白はセクションの padding が持つ */
  padding: 0; /* h2{padding:12px} の打ち消し */
  color: #fff; /* * { color:#323232 } は直接当たるので要素ごとに指定する */
  font-family: "Local Shippori Mincho", "Shippori Mincho", serif;
  font-weight: 600; /* SemiBold。h2,h3,h4{font-weight:500} の打ち消し */
  font-size: 40px; /* clamp 非対応ブラウザ用フォールバック */
  /* 40/1440 = 2.7778vw。下限 24px は SP 分岐の実値と同じで、798/799 の境界で段差が出ない
     （PC 側は 864px 以下で 24px に張り付く） */
  font-size: clamp(24px, 2.7778vw, 40px);
  line-height: 1.3; /* 130% */
  /* カンプの letterSpacing は未指定＝0。h2,h3,h4{letter-spacing:1px} を必ず打ち消すこと。
     残すと SP で 14字 x (24+1) = 350px となり、カンプの器 340px を超えて2行に折れる */
  letter-spacing: 0;
  overflow-wrap: break-word;
  overflow-wrap: anywhere; /* 分割不能な英数字語が入っても器から溢れさせない */
}
@media screen and (max-width : 798px) {
  .p-stay-lp-cta__title {
    font-size: 24px;
    font-size: clamp(18px, 6.1538vw, 24px); /* 24/390 = 6.1538vw */
  }
}

/* リード。MOVIE / DIFFERENCE と同じ 15px→12px の本文スタイル（色だけ白） */
.p-stay-lp-cta__lead {
  margin: 40px 0 0; /* Frame 63 の itemSpacing 40 */
  padding: 0; /* style.css の p{padding:1% 0} を打ち消す */
  color: #fff;
  font-size: 15px; /* clamp 非対応ブラウザ用フォールバック */
  font-size: clamp(12px, 1.0417vw, 15px); /* 15/1440 = 1.0417vw */
  line-height: 1.7;
  letter-spacing: 0.16em;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-cta__lead {
    font-size: 12px;
  }
}

/* ゴールドボタン RS-02：PC 380x80 / SP 340x80・角丸なし。
   KV のベージュボタン（242x56 / #efe9e0）とは別の見た目なので流用しない */
.p-stay-lp-cta__button {
  margin-top: 40px; /* セクションの itemSpacing 40（Frame 63 → ボタン） */
  position: relative; /* ::after の矢印の基準 */
  width: 380px; /* カンプ PC の Rectangle 60 */
  max-width: 100%; /* 器より狭い幅でもはみ出さない */
  min-height: 80px; /* 固定 height にしない。文言が伸びたら高くなる */
  /* 左右**対称**の padding。値は矢印の席（右余白 28.4 + 見える幅 19.6 = 48）。
     右だけ空けるとラベルの中央がずれるので、同じ量を左にも取る。
     コンテンツ幅は 380-96 = 284 で、カンプのラベル 186 に対して余裕がある
     （ラベルが伸びても矢印の下へ潜らず、先に折り返して min-height が伸びる） */
  padding: 0 48px;
  font-size: 18px; /* PC・SP とも 18px（カンプ 6005:578 / 6030:226） */
  /* 色・書体・角丸・hover・focus はファイル先頭の mixin が唯一の出どころ
     （追従CTA と共有。寸法と余白だけこのルールが持つ） */
  /* ⚠ position は**入れない**。矢印 ::after の基準は利用側が決める
     （CTA は relative / 追従CTA は fixed。ここで relative を書くと fixed を潰す）。
     ラベルをボタンの**両軸中央**に置く（CLAUDE.md が flex を許可するパターン）。
     矢印はフレックスアイテムにせず ::after の absolute で別管理する——
     gap で並べるとラベルの中央がその分だけ左へずれてカンプと合わない */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #81734d;
  border-radius: 0; /* カンプ cornerRadius なし */
  color: #fff;
  /* RS-18 Roboto に和文グリフが無いので和文は $font-family に落とす。
     連結には総称ファミリを含まない $roboto-name を使う（$roboto をそのまま繋ぐと
     途中の sans-serif が OS 既定ゴシックに解決し、後続の Noto Sans JP に到達しない） */
  font-family: "Roboto", "Local Noto Sans JP", "Noto Sans JP", sans-serif;
  font-weight: 700; /* Bold */
  line-height: 1.2; /* Figma は AUTO（Roboto の既定 ≒ 1.17）。1.2 に固定して高さを確定させる */
  letter-spacing: 0.16em; /* 16% */
  text-align: center; /* 狭い幅で2行になったときも中央（a,p,li… の既定を上書き） */
  /* 分割不能な英数字語が入っても器を破裂させない。**フレックスアイテムなので必須**——
     ラベルは <a> 直下のテキストノード（匿名フレックスアイテム）で、自動最小サイズが
     min-content ＝ 語の長さになるため、これが無いと 320px で横スクロールが出る。
     break-word は min-content に効かないので anywhere が要る */
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
  /* style.css:48 の a{transition: all .3s} が既に効いているが、変化するのは
     background-color だけ（RS-02：文字色・矢印色は変えない）なのでプロパティを明示して絞る
     （all のままだと focus の outline まで遅れて描かれる） */
  transition: background-color 0.3s;
  /* style.css の a:hover{opacity:.7} を打ち消す。
     @media (hover:hover) の**外**に置く＝タッチ端末で :hover が張り付いても半透明にならない */
}
.p-stay-lp-cta__button:hover {
  opacity: 1;
}
@media (hover: hover) {
  .p-stay-lp-cta__button:hover {
    background-color: #a69056; /* RS-02。文字色・矢印色は変えない */
  }
}
.p-stay-lp-cta__button:focus-visible {
  /* カンプに focus の指定は無い（RS-03）。キーボード操作の視認性だけ確保する */
  outline: 2px solid #fff;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .p-stay-lp-cta__button {
    /* 「動きを減らす」設定では即時に切り替える（色の変化そのものは残す）。
       ※ コメントは media の内側に置く。外に置くと Sass が空ルールを吐く */
    transition: none;
  }
}
.p-stay-lp-cta__button {
  /* 矢印は「ボタン右端からの距離」で置く（ラベルの中央揃えとは独立。カンプ実測） */
}
.p-stay-lp-cta__button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 28.4px;
  transform: translateY(-50%);
  width: 19.6px;
  height: 18px;
  background-color: #fff;
  -webkit-mask-image: url(../img/stay-lp/arrow.svg);
          mask-image: url(../img/stay-lp/arrow.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  pointer-events: none;
  /* ⚠ 遷移は**基底（::after）側**に置く。`&:hover::after` の中に書くと
     **ホバー中しか transition が有効にならず、外した瞬間にパッと戻る**
     （transition は「遷移後の状態」の指定を見るため、戻り先＝基底に無いと効かない）。
     transform だけを遷移させること。all にすると mask / background まで巻き込む */
  transition: transform 0.3s;
}
@media (hover: hover) {
  .p-stay-lp-cta__button {
    /* タッチ端末で :hover が張り付くのを防ぐため必ず (hover: hover) で囲う。
       translateY(-50%) を translate() に畳む＝縦センタリングを失わないこと */
  }
  .p-stay-lp-cta__button:hover::after {
    transform: translate(4px, -50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .p-stay-lp-cta__button::after {
    /* 動かさないだけでなく、戻りのアニメーションも消す */
    transition: none;
  }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) {
  .p-stay-lp-cta__button {
    /* 「動きを減らす」設定では**移動そのものをしない**（遷移を消すだけだと瞬間移動する）。
       上の (hover: hover) と同じ詳細度なので、後に置くこの宣言が勝つ。
       Sass は入れ子の @media を
       `(prefers-reduced-motion: reduce) and (hover: hover)` に合成する */
  }
  .p-stay-lp-cta__button:hover::after {
    transform: translateY(-50%);
  }
}
@media screen and (max-width : 798px) {
  .p-stay-lp-cta__button {
    width: 100%; /* カンプ SP の 340 は __inner のコンテンツ幅そのもの */
    padding: 0 43px; /* SP の矢印の席 23.4 + 19.6 = 43 */
  }
  .p-stay-lp-cta__button::after {
    right: 23.4px;
  }
}

/* ============================================================
   VOICE  page-stay02.php / .p-stay-lp-voice

   数値の正：tmp-spec/voice/design-spec.json
     PC 6026:357（1440x1862）paddingTop/Bottom 120・itemSpacing 40・背景 #efe9e0
       Frame 63「見出し」x180 w1080 h82
       Frame 174「白パネル」x180 y242 w1080 h1500・fill #ffffff・stroke #cdc6b8 / 1px
         Frame 205「3ブロックの器」x140 y23 w800 h1456（左右 140 ＝ パネル幅の 12.963% ずつ）
         ※注釈 6026:369 x798 y1461（右下）
         イラスト3点（オートレイアウト外の絶対座標）
           01 6026:370 (42,51) 196x251 ／ 02 6026:471 (846,465) 202x250 ／ 03 6026:408 (49,988) 280x297
     SP 6031:368（390x2041）padding 80 / 25・itemSpacing 40
       Frame 174 x25 y179 w340 h1782 ／ Frame 205 x0 y0 w340 h1237（パネル幅いっぱい）
       イラストは1つの塊 6034:662 (13,1213) 313x518 に**重なって**入る
       ※注釈 6031:380 x69 y1748

   ■ PC の左右振り分けは HTML に書かれていない（:nth-child で作る契約）
     1つ目 6043:1204 … 小見出しは全幅中央、その下が [グラフ 82..383.3][文 427..725]
     2つ目 6043:1318 … 1カラム中央（小見出し → 文 → グラフ）
     3つ目 6043:1264 … 小見出しは全幅中央、その下が [文 152..403][グラフ 438..738]
     SP は3ブロックとも1カラム中央。DOM 順（小見出し → 文 →（注釈）→ グラフ）と一致する。
     SCHEDULE の row-reverse と同じ方針で、HTML に --modifier を持たせない。

   ■ 2カラムの作り方（grid の「余白トラック」で組む理由）
     li の直下に h3 / p / p / img が**並んでいるだけ**でラッパーが無い（HTML の契約）。
     そのため「小見出しは全幅・その下だけ2カラム」を1つの grid で作る。
     カンプの左右の寄りは中央でも均等でもない（1つ目は左に 82、3つ目は右に 62 の余白）ので、
     column-gap ではなく**余白そのものをトラックにして** % で持たせている。
     こうすると小見出し（grid-column: 1 / -1）は余白を含む**器いっぱい**に広がり、
     カンプどおり「小見出しは器の中央・2カラムは寄せて配置」が同時に成立する
     （column-gap で作ると全トラック間に隙間が入り、小見出しの中央がずれる）。

   ■ 縦位置（行トラック）
     行は [1] 小見出し / [2] 44px の空きトラック / [3] 1fr / [4] 文 /（[5] 注釈）/ 最後 1fr。
     グラフは 3 行目から最終行までを占め、上下の 1fr が等しいので
     **文（＋注釈）の塊がグラフの高さの中央に来る**。カンプの実測は
     1つ目 = 文の塊の中心 309.5 / グラフの中心 314、3つ目 = 1248 / 1256 で
     いずれも中央（差 4.5〜8px）。固定 px のオフセットにすると
     799〜1120px 帯でグラフだけが縮んで文が上に取り残されるため 1fr で持たせる。

   ■ 既存グローバルの打ち消し（css/style.css）
     * { color:#323232 } ／ p { padding:1% 0 } ／ h3 { font-size:2.4rem; padding:40px 0 10px }
     ／ h2,h3,h4 { font-weight:500; letter-spacing:1px; line-height:1.3 }
     ／ a,p,li,th,td { font-size:1.6rem; line-height:1.5; letter-spacing:.1rem }
   ============================================================ */
.p-stay-lp-voice {
  padding: 120px 0; /* 左右は __inner が持つ（背景色は画面端まで敷く） */
  background-color: #efe9e0;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-voice {
    padding: 80px 0;
  }
}

/* DIFFERENCE / EXPERIENCE / MOVIE / SCHEDULE と同値の器（カンプ PC left 180 / right 1260） */
.p-stay-lp-voice__inner {
  max-width: 1120px; /* コンテンツ幅 1080 + 左右 padding 20 */
  margin: 0 auto;
  padding: 0 20px;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-voice__inner {
    /* 案A：430px を超えたら SP レイアウトを引き伸ばさず中央に置く
       （中央寄せは基底の margin: 0 auto が持つ。背景はセクション側なので全幅のまま） */
    max-width: 430px;
    padding: 0 25px; /* カンプ SP の paddingLeft / paddingRight */
  }
}

/* 白パネル Frame 174。イラスト（PC）の絶対配置の基準も兼ねる。
   上下 padding は「パネル上端 → 1つ目の小見出し」までの実測から作る
     PC 95 = Frame 205 の y23 + 1つ目の小見出しの y72
     SP 37 = Frame 205 の y0  + 1つ目の小見出しの y37
   下 padding は「注釈の下端 → パネル下端」PC 19 / SP 14。 */
.p-stay-lp-voice__panel {
  position: relative;
  margin-top: 40px; /* セクションの itemSpacing 40（Frame 63 → Frame 174） */
  padding: 95px 0 19px;
  background-color: #fff;
  /* カンプの stroke は 1px / #cdc6b8。Figma の枠線は内側なので border-box と同じ扱い
     （style.css の * { box-sizing: border-box } が既に効いている） */
  border: 1px solid #cdc6b8;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-voice__panel {
    padding: 37px 0 14px;
  }
}

/* 3ブロックの器 ＝ Frame 205。PC は 800/1080 でパネルの中央。SP はパネル幅いっぱい */
.p-stay-lp-voice__list {
  width: 74.0741%; /* 800/1080 */
  margin: 0 auto;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-voice__list {
    width: 100%; /* カンプ SP の Frame 205 は 340 ＝ パネル幅と同じ */
  }
}

/* ブロック間の縦間隔。カンプは均等ではない（グラフの縦横比が3枚とも違うため）ので
   実測どおり :nth-child で持つ。均等に丸めない（DO_NOT「unevenGaps を均等配置にしない」）。
     PC 1つ目の下端 464 → 2つ目の上端 538 ＝ 74 ／ 2つ目 923 → 3つ目 1014 ＝ 91
     SP 439.5 → 490.5 ＝ 51 ／ 769.5 → 817.5 ＝ 48 */
.p-stay-lp-voice__item:nth-child(2) {
  margin-top: 74px;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-voice__item:nth-child(2) {
    margin-top: 51px;
  }
}
.p-stay-lp-voice__item:nth-child(3) {
  margin-top: 91px;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-voice__item:nth-child(3) {
    margin-top: 48px;
  }
}
.p-stay-lp-voice__item {
  /* ⚠ SP の 1カラム化（display: block）は **:nth-child(1) / :nth-child(3) の中**に置いてある。
     ここ（.p-stay-lp-voice__item = 詳細度 0,1,0）に書くと、grid を宣言している
     .p-stay-lp-voice__item:nth-child(1)（0,2,0）に**メディアクエリの中でも負ける**。
     実際にそれで SP が 2カラムのまま残り、注釈とグラフが 180px 重なった。 */
}

/* 小見出し。下の 18px の横線（カンプ「Line 20」PC/SP とも w18・#000000・strokeWeight 1）は
   装飾なので疑似要素で描く。padding-bottom = 文字と線のすきま（PC 16 / SP 14）+ 線 1px。 */
.p-stay-lp-voice__subtitle {
  position: relative; /* ::after の横線の基準 */
  margin: 0;
  padding: 0 0 17px; /* h3 { padding:40px 0 10px }（style.css）の打ち消しも兼ねる */
  color: #323232;
  font-family: "Local Shippori Mincho", "Shippori Mincho", serif;
  font-weight: 600; /* SemiBold。h2,h3,h4 { font-weight:500 } の打ち消し */
  font-size: 24px; /* clamp 非対応ブラウザ用フォールバック */
  font-size: clamp(20px, 1.6667vw, 24px); /* 24/1440 = 1.6667vw。下限 20px は SP 分岐と同値 */
  line-height: 1.3; /* 130% */
  letter-spacing: 0; /* カンプ未指定＝0。h2,h3,h4 { letter-spacing:1px } を必ず打ち消す */
  text-align: center; /* カンプ textAlignHorizontal: CENTER。器の中央に置く */
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}
.p-stay-lp-voice__subtitle::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 1px;
  background-color: #000; /* カンプ Line 20 は #000000（本文の #323232 ではない） */
}
@media screen and (max-width : 798px) {
  .p-stay-lp-voice__subtitle {
    padding: 0 0 15px; /* SP は文字と線のすきま 14 + 線 1 */
    font-size: 20px;
  }
}

/* 説明文。PC は 1つ目・3つ目だけ左揃え（2カラムの右／左カラム）、それ以外は中央 */
.p-stay-lp-voice__text {
  margin: 0;
  padding: 0; /* style.css の p { padding:1% 0 } を打ち消す */
  color: #323232;
  font-size: 17px; /* clamp 非対応ブラウザ用フォールバック */
  font-size: clamp(14px, 1.1806vw, 17px); /* 17/1440 = 1.1806vw。下限 14px は SP 分岐と同値 */
  line-height: 1.7;
  letter-spacing: 0.16em;
  text-align: center;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-voice__text {
    font-size: 14px;
  }
}

/* 注釈（1つ目だけにある）。説明文の下 PC 17 / SP 10 */
.p-stay-lp-voice__note {
  margin: 17px 0 0;
  padding: 0;
  color: #323232;
  font-size: 12px;
  font-size: clamp(10px, 0.8333vw, 12px); /* 12/1440 = .8333vw。下限 10px は SP 分岐と同値 */
  line-height: 1.7;
  letter-spacing: 0.16em;
  text-align: center;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-voice__note {
    margin-top: 10px;
    font-size: 10px;
  }
}

/* グラフ（SVG）。PC の 1つ目・3つ目は grid のトラックが幅を持つので width:100%。
   ■ aspect-ratio を img 自身に持たせている理由（CLAUDE.md の「親に aspect-ratio」の例外）
     li の直下に h3 / p / p / img が並ぶだけで**ラッパー要素が無い**（HTML の契約）。
     指定しないと SVG が読み込まれるまで高さ 0 のままになり、
     ・読み込み後にレイアウトが飛ぶ（CLS）
     ・grid の行トラックが 0 に潰れ、文の塊を中央に置く 1fr が機能しない
     実際に未指定で検証したところ、全 viewport で高さ 0（loading="lazy" で画面外のうちは
     naturalWidth も 0）だった。値は SVG ファイルの実寸（カンプの箱とは 1px 未満ずれる）。 */
.p-stay-lp-voice__graph {
  display: block; /* inline のままだと行ボックスの下端余白が付く */
  width: 100%;
  height: auto;
}

/* --- 1つ目：グラフ左 / 文右（PC）------------------------------------------
   列 [1] 左の余白 82 ／ [2] グラフ 301.3 ／ [3] すきま 43.7 ／ [4] 文（内容幅）／ [5] 余り
       82/800 = 10.25% ／ 301.3/800 = 37.6625% ／ 43.7/800 = 5.4625%
   行 [1] 小見出し ／ [2] 小見出し → グラフの 44 ／ [3] 詰め物 ／ [4] 文 ／ [5] 注釈 ／ [6] 詰め物 */
.p-stay-lp-voice__item:nth-child(1) {
  display: grid;
  grid-template-columns: 10.25% 37.6625% 5.4625% auto minmax(0, 1fr);
  grid-template-rows: auto 44px 1fr auto auto 1fr;
}
.p-stay-lp-voice__item:nth-child(1) .p-stay-lp-voice__subtitle {
  grid-column: 1/-1; /* 余白トラックも含めた器いっぱい＝カンプの中央 x400 と一致 */
  grid-row: 1;
}
.p-stay-lp-voice__item:nth-child(1) .p-stay-lp-voice__graph {
  grid-column: 2;
  grid-row: 3/-1;
  /* stretch（grid の既定）だと「箱の高さ = トラックの高さ = 中身の高さ」が循環し、
     グラフが行トラックを押し広げなくなる。中央固定にして本来の高さを保つ */
  align-self: center;
  aspect-ratio: 302/300; /* voice_graph_01.svg の実寸 */
}
.p-stay-lp-voice__item:nth-child(1) .p-stay-lp-voice__text {
  grid-column: 4;
  grid-row: 4;
  text-align: left; /* カンプ textAlignHorizontal: LEFT */
}
.p-stay-lp-voice__item:nth-child(1) .p-stay-lp-voice__note {
  grid-column: 4;
  grid-row: 5;
  text-align: left;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-voice__item:nth-child(1) {
    display: block; /* SP は1カラム。子の grid-column / grid-row は grid コンテナでなくなるので無効になる */
  }
  .p-stay-lp-voice__item:nth-child(1) .p-stay-lp-voice__text {
    margin-top: 19px; /* 小見出しの箱 78 → 文 97 */
    text-align: center;
  }
  .p-stay-lp-voice__item:nth-child(1) .p-stay-lp-voice__note {
    text-align: center;
  }
  .p-stay-lp-voice__item:nth-child(1) .p-stay-lp-voice__graph {
    margin: 18.5px auto 0; /* 注釈の下端 172 → グラフ 190.5 */
    width: 73.5294%; /* 250/340 */
  }
}

/* --- 2つ目：1カラム中央（PC / SP とも同じ型）------------------------------ */
.p-stay-lp-voice__item:nth-child(2) .p-stay-lp-voice__text {
  margin-top: 24px; /* 小見出しの箱 586 → 文 610 */
}
.p-stay-lp-voice__item:nth-child(2) .p-stay-lp-voice__graph {
  margin: 28px auto 0; /* 文の下端 697 → グラフ 725 */
  width: 65.7625%; /* 526.1/800 */
  aspect-ratio: 527/198; /* voice_graph_02.svg の実寸 */
}
@media screen and (max-width : 798px) {
  .p-stay-lp-voice__item:nth-child(2) .p-stay-lp-voice__text {
    margin-top: 24px; /* 531.5 → 555.5 */
  }
  .p-stay-lp-voice__item:nth-child(2) .p-stay-lp-voice__graph {
    margin-top: 25px; /* 627.5 → 652.5 */
    width: 91.4412%; /* 310.9/340 */
  }
}

/* --- 3つ目：文左 / グラフ右（PC）------------------------------------------
   列 [1] 余り ／ [2] 文（内容幅）／ [3] すきま 35 ／ [4] グラフ 300 ／ [5] 右の余白 62
       35/800 = 4.375% ／ 300/800 = 37.5% ／ 62/800 = 7.75%
   1fr を左に置くことで「右に 62 を残して右寄せ」＝ カンプの 152..738 と一致する */
.p-stay-lp-voice__item:nth-child(3) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 4.375% 37.5% 7.75%;
  grid-template-rows: auto 44px 1fr auto 1fr;
}
.p-stay-lp-voice__item:nth-child(3) .p-stay-lp-voice__subtitle {
  grid-column: 1/-1;
  grid-row: 1;
}
.p-stay-lp-voice__item:nth-child(3) .p-stay-lp-voice__text {
  grid-column: 2;
  grid-row: 4;
  text-align: left;
}
.p-stay-lp-voice__item:nth-child(3) .p-stay-lp-voice__graph {
  grid-column: 4;
  grid-row: 3/-1;
  align-self: center; /* 1つ目と同じ理由（stretch だとトラックが潰れる） */
  aspect-ratio: 300/300; /* voice_graph_03.svg の実寸 */
}
@media screen and (max-width : 798px) {
  .p-stay-lp-voice__item:nth-child(3) {
    display: block; /* SP は1カラム */
  }
  .p-stay-lp-voice__item:nth-child(3) .p-stay-lp-voice__text {
    margin-top: 21px; /* 858.5 → 879.5 */
    text-align: center;
  }
  .p-stay-lp-voice__item:nth-child(3) .p-stay-lp-voice__graph {
    margin: 15px auto 0; /* 927.5 → 942.5 */
    width: 73.5294%; /* 250/340 */
  }
}

/* イラスト3点。
   PC はパネル内の**絶対配置**（カンプに親のオートレイアウトが無く、座標で置かれている）。
     位置・大きさはパネル 1080x1500 に対する % で持つ（幅が変われば一緒に動く）。
   SP は 313x518 の枠の中で**3点が重なる**（01 の 0-229 と 02 の 82-272 が 147px 重複）。
     縦積み flex では再現できないので、枠に aspect-ratio を与えて中で絶対配置する。
     ⚠ 見た目の並びは 02 → 01 → 03。DOM は 01 → 02 → 03 なので :nth-child の対応がずれる。
       SP 専用ファイル（-sp.svg）は縦横比が PC 版と違うため aspect-ratio も上書きすること。 */
@media screen and (max-width : 798px) {
  .p-stay-lp-voice__comments {
    position: relative; /* 中の .__comment の基準。PC では static のままパネルを基準にする */
    margin: 20.5px auto 0; /* 3つ目の下端 1192.5 → 枠 1213 */
    width: 92.0588%; /* 313/340 */
    /* 枠の高さ。中身が絶対配置なので外から与える必要があるが、固定 px にすると
       幅が変わったとき中身とずれる（DO_NOT「脆弱な固定高さ」） */
    aspect-ratio: 313/518;
  }
}

.p-stay-lp-voice__comment {
  position: absolute; /* PC は .p-stay-lp-voice__panel が基準（__comments は static） */
  display: block; /* picture は既定 inline */
  /* 01（PC 42,51 / 196x251） */
}
.p-stay-lp-voice__comment:nth-child(1) {
  top: 3.4%; /* 51/1500 */
  left: 3.8889%; /* 42/1080 */
  width: 18.1481%; /* 196/1080 */
  aspect-ratio: 196/251;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-voice__comment:nth-child(1) {
    top: 15.888%; /* 82.3/518 */
    left: 45.7508%; /* 143.2/313 */
    width: 54.2173%; /* 169.7/313 */
    aspect-ratio: 170/191; /* voice_illust_01-sp.svg の実寸 */
  }
}
.p-stay-lp-voice__comment {
  /* 02（PC 846,465 / 202x250） */
}
.p-stay-lp-voice__comment:nth-child(2) {
  top: 31%; /* 465/1500 */
  left: 78.3333%; /* 846/1080 */
  width: 18.7037%; /* 202/1080 */
  aspect-ratio: 202/250;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-voice__comment:nth-child(2) {
    top: 0; /* SP はこの 02 が枠の左上（見た目の1点目） */
    left: 0;
    width: 58.2748%; /* 182.4/313 */
    aspect-ratio: 183/229; /* voice_illust_02-sp.svg の実寸 */
  }
}
.p-stay-lp-voice__comment {
  /* 03（PC 49,988 / 280x297） */
}
.p-stay-lp-voice__comment:nth-child(3) {
  top: 65.8667%; /* 988/1500 */
  left: 4.537%; /* 49/1080 */
  width: 25.9259%; /* 280/1080 */
  aspect-ratio: 280/297;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-voice__comment:nth-child(3) {
    top: 53.1467%; /* 275.3/518 */
    left: 2.8115%; /* 8.8/313 */
    width: 96.8371%; /* 303.1/313 */
    aspect-ratio: 304/243; /* voice_illust_03-sp.svg の実寸 */
  }
}

.p-stay-lp-voice__comment-image {
  width: 100%;
  height: 100%; /* style.css の img { height:auto } を打ち消し、枠と絵柄を一致させる */
}

/* 出典の注釈。カンプは右下（PC 右余白 16 / SP 右余白 5 ＝ どちらもパネル幅の約 1.48%） */
.p-stay-lp-voice__source {
  margin: 32px 0 0; /* 3つ目の下端 1429 → 注釈 1461 */
  padding: 0 1.4815% 0 0; /* 16/1080。style.css の p { padding:1% 0 } の打ち消しも兼ねる */
  color: #323232;
  font-size: 12px; /* PC / SP とも 12px（カンプ 6026:369 / 6031:380）。clamp しない */
  line-height: 1.7;
  letter-spacing: 0.16em;
  text-align: right;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-voice__source {
    margin-top: 17px; /* 枠の下端 1731 → 注釈 1748 */
  }
}

/* ============================================================
   GALLERY  page-stay02.php / .p-stay-lp-gallery

   数値の正：tmp-spec/gallery/design-spec.json
     PC 6026:511（1440x2792）paddingTop/Bottom 120・itemSpacing 40・背景 #393736
       Frame 63 x180 w1080（itemSpacing 40）＝ 見出し → リード → 写真グリッド
       リード 6026:518 15px / 行送り170% / 字送り16% / #ffffff（1行）
       Frame 183「写真グリッド」w1080 h2364・itemSpacing 8（縦）
         全幅 1080x568 ／ 2列 536x368（すきま 8）／ 3列 354x460（すきま 8）／ 全幅 ／ 2列
     SP 6031:522（390x1096.9）padding 80 / 25・itemSpacing 40
       Frame 183 w340 h757.9・itemSpacing 8
         全幅 340x178.8 ／ 2列 166x114 ／ 3列 108x140.3 ／ 全幅 ／ 2列

   ■ 背景は MOVIE と**別色**
     MOVIE は $lp-bg-dark(#4d4541)、ここは $lp-bg-dark02(#393736)。取り違えないこと。

   ■ 見出し・リードの色（部品の既定は絶対に変えない）
     カンプの実測は Line 14 / 英字ラベル / 見出し / リードの**4つとも #ffffff**。
     MOVIE と同じく、共通部品 .p-stay-lp-heading には触れず
     このセクションの下でだけカスタムプロパティを上書きする。
     既定を白にすると DIFFERENCE / EXPERIENCE / SCHEDULE / ACCESS / RESERVE が読めなくなる。
     __lead は部品の外なので、style.css の `* { color:#323232 }`（全要素に**直接**当たるので
     祖先に color を書いても継承されない）を打ち消すため**そのセレクタ自身**に色を書く。

   ■ 列は PC / SP で変わらない（実測で確認済み）
     どちらも 全幅1 / 2列 / 3列 / 全幅1 / 2列。写真の縦横比も PC / SP で一致する
     （1080/568 = 340/178.8 ／ 536/368 = 166/114 ／ 354/460 = 108/140.3）。
     → **6カラムのグリッド1つ**で両方まかなえる。検算：
        PC 列幅 = (1080 - 5x8) / 6 = 173.333 → span2 = 354.7（カンプ 354）
                                              span3 = 536（カンプ 536）
                                              span6 = 1080（カンプ 1080）
        SP 列幅 = (340 - 5x8) / 6 = 50       → span2 = 108 ／ span3 = 166 ／ span6 = 340（全て一致）
     すきまは PC / SP とも 8px。**ここだけは % にしない**——カンプが両幅で同じ 8px を
     指定しており、% にすると PC(0.74%) と SP(2.35%) のどちらかが必ずカンプと食い違う
     （8px は「面の分割」ではなく写真どうしを離す髪の毛幅の見切り線）。
     span の割り当ては :nth-child()。HTML に --wide のような修飾子は書かない契約。
     ⚠ 写真を足す / 減らすと nth-child の割り当てがまるごとズレる。CMS 化していない。
   ============================================================ */
.p-stay-lp-gallery {
  /* 共通部品の色をこのセクションの下でだけ差し替える（部品側は一切触らない）。
     カスタムプロパティは * { color:#323232 } の影響を受けないので、これが唯一の経路 */
  --p-stay-lp-heading-label-color: #fff;
  --p-stay-lp-heading-title-color: #fff;
  padding: 120px 0; /* 左右は __inner が持つ（背景色は画面端まで敷く） */
  background-color: #393736;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-gallery {
    padding: 80px 0;
  }
}

/* DIFFERENCE / EXPERIENCE / MOVIE / SCHEDULE / VOICE と同値の器 */
.p-stay-lp-gallery__inner {
  max-width: 1120px; /* コンテンツ幅 1080 + 左右 padding 20 */
  margin: 0 auto;
  padding: 0 20px;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-gallery__inner {
    /* 案A：430px を超えたら SP レイアウトを引き伸ばさず中央に置く
       （中央寄せは基底の margin: 0 auto が持つ。背景はセクション側なので全幅のまま） */
    max-width: 430px;
    padding: 0 25px; /* カンプ SP の paddingLeft / paddingRight */
  }
}

/* リード 15px / Noto Sans JP / 行送り170% / 字送り16%（<br> は無い。PC 1行・SP 2行） */
.p-stay-lp-gallery__lead {
  margin: 40px 0 0; /* Frame 63 の itemSpacing 40。0 は p の UA 既定 margin-bottom 消し */
  padding: 0; /* style.css の p { padding:1% 0 } を打ち消す */
  color: #fff; /* * { color:#323232 } は継承ではなく直接当たるので要素ごとに指定する */
  font-size: 15px; /* clamp 非対応ブラウザ用フォールバック */
  font-size: clamp(12px, 1.0417vw, 15px); /* 15/1440 = 1.0417vw。下限 12px は SP 分岐と同値 */
  line-height: 1.7;
  letter-spacing: 0.16em;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-gallery__lead {
    font-size: 12px;
  }
}

/* 写真グリッド。列数・すきまは PC / SP で同じなので分岐しない */
.p-stay-lp-gallery__list {
  display: grid;
  /* minmax(0, 1fr)：分割不能な英数字語が入ってもトラックを膨張させない（1fr は min-content が効く） */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px; /* カンプ Frame 183 / Frame 180 / Frame 181 の itemSpacing（縦・横とも 8） */
  margin-top: 40px; /* Frame 63 の itemSpacing 40（リード → グリッド） */
}

/* 既定は全幅（1枚目・7枚目）。高さは aspect-ratio が持ち、固定 px にしない */
.p-stay-lp-gallery__item {
  grid-column: span 6;
  overflow: hidden; /* object-fit: cover のはみ出しを箱で切る */
  aspect-ratio: 1080/568; /* PC 1080x568 ／ SP 340x178.8（比は同じ） */
  /* 2列の行（2・3枚目と 8・9枚目） */
}
.p-stay-lp-gallery__item:nth-child(2), .p-stay-lp-gallery__item:nth-child(3), .p-stay-lp-gallery__item:nth-child(8), .p-stay-lp-gallery__item:nth-child(9) {
  grid-column: span 3;
  aspect-ratio: 536/368; /* PC 536x368 ／ SP 166x114 */
}
.p-stay-lp-gallery__item {
  /* 3列の行（4・5・6枚目） */
}
.p-stay-lp-gallery__item:nth-child(4), .p-stay-lp-gallery__item:nth-child(5), .p-stay-lp-gallery__item:nth-child(6) {
  grid-column: span 2;
  aspect-ratio: 354/460; /* PC 354x460 ／ SP 108x140.3 */
}

.p-stay-lp-gallery__image {
  display: block; /* inline のままだと行ボックスの下端余白が aspect-ratio の箱からはみ出す */
  width: 100%;
  height: 100%; /* style.css の img { height:auto } を打ち消し、箱と絵柄を一致させる */
  -o-object-fit: cover;
     object-fit: cover; /* カンプはトリミングされた写真。差し替えでも比を崩さない */
}

/* ============================================================
   ACCESS  page-stay02.php / .p-stay-lp-access

   ⚠ Figma のフレーム名は「DIFFERENCE」だが中身は ACCESS / INFORMATION（RS-17）。
   数値の正：tmp-spec/access/design-spec.json
     PC 6026:541（1440x652）paddingTop/Bottom 120・itemSpacing 40・背景 #ffffff
       Frame 63 x180 w1080（itemSpacing 40）
       Frame 201「写真 + 情報」w1080 h290
         写真 6026:549 x0 w388 h290 ／ 情報 6026:550 x450 w630 h287（上端そろえ）
         ⚠ Frame 201 の itemSpacing 40 は space-between に上書きされた**残骸**。
           座標が正：写真の右端 388 に対し情報が x450 ＝ すきま 62。
           % に直すと 35.9259% / 5.7407% / 58.3333%（合計 100%。SCHEDULE・RESERVE と同じ罠）
       Frame 188（itemSpacing 24）= 会場名 18px → 表
       Frame 200（itemSpacing 16）= 罫線 #cdc6b8 / 1px が**5本**（先頭行の上・行間3本・最終行の下）
         行の中身は th 15px（w120 固定・#81734d）+ td 14px（#323232）
     SP 6031:552（390x832.1）padding 80 / 25・itemSpacing 40
       Frame 201 は VERTICAL（縦積み・itemSpacing 40）／ 写真 340x254.1
       会場名 16px ／ th 12px（w80 固定）／ td 12px（1行目だけ 2行に折り返す）

   ■ table のまま組む（display を上書きしない）
     SP でも th / td は横並びのままで、値だけが折り返す（カンプ実測）。
     縦積みに切り替えないので暗黙 ARIA ロールを壊さず、role の明示も要らない
     （examples/table-list のパターンB）。
     table-layout: fixed にしてあるのは、住所が長くてもラベル列 120 / 80 を動かさないため。

   ■ 既存グローバルの打ち消し（css/style.css）
     a,p,li,**th,td** { font-size:1.6rem; line-height:1.5; letter-spacing:.1rem }（1300/1024/600 で段階変化）
     h3 { font-size:2.4rem; padding:40px 0 10px } ／ h2,h3,h4 { font-weight:500; letter-spacing:1px; line-height:1.3 }
     a { text-decoration:none }（【MAP】の下線を戻す必要がある）
     ※ @media (min-width:768px) の a[href^="tel:"] { pointer-events:none } は既存サイトの仕様なので
        そのまま残す（PC で電話リンクを押せなくする既存の共通挙動）。
   ============================================================ */
.p-stay-lp-access {
  padding: 120px 0; /* 左右は __inner が持つ */
  background-color: #fff; /* カンプ fills #ffffff。GALLERY のような色の反転はしない */
}
@media screen and (max-width : 798px) {
  .p-stay-lp-access {
    padding: 80px 0;
  }
}

.p-stay-lp-access__inner {
  max-width: 1120px; /* コンテンツ幅 1080 + 左右 padding 20 */
  margin: 0 auto;
  padding: 0 20px;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-access__inner {
    /* 案A：430px を超えたら SP レイアウトを引き伸ばさず中央に置く
       （中央寄せは基底の margin: 0 auto が持つ。背景はセクション側なので全幅のまま） */
    max-width: 430px;
    padding: 0 25px;
  }
}

/* PC は [写真][情報] の横並び。写真 388 / すきま 62 / 情報 630 を % に直して 100% で検算する */
.p-stay-lp-access__content {
  display: flex;
  align-items: flex-start; /* カンプ _layoutFlags は top 0 でそろう（vcenter 145 は 1.5px 差の副産物） */
  gap: 5.7407%; /* 62/1080 */
  margin-top: 40px; /* セクションの itemSpacing 40（見出し → Frame 201） */
}
@media screen and (max-width : 798px) {
  .p-stay-lp-access__content {
    /* SP は縦積み。間隔だけのために flex を使わない（__body の margin-top が持つ） */
    display: block;
  }
}

.p-stay-lp-access__visual {
  width: 35.9259%; /* 388/1080 */
  overflow: hidden;
  /* 読み込み前から場所を取り、レイアウトシフトを出さない。
     比は PC 388/290 と SP 340/254.1 で一致するので1本で足りる */
  aspect-ratio: 388/290;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-access__visual {
    width: 100%; /* カンプ SP の 340 は __inner のコンテンツ幅そのもの */
  }
}

.p-stay-lp-access__image {
  display: block;
  width: 100%;
  height: 100%; /* style.css の img { height:auto } を打ち消す */
  -o-object-fit: cover;
     object-fit: cover;
}

.p-stay-lp-access__body {
  width: 58.3333%; /* 630/1080 */
  min-width: 0; /* 分割不能な英数字語で flex アイテムが膨らんで横並びを壊すのを防ぐ */
}
@media screen and (max-width : 798px) {
  .p-stay-lp-access__body {
    margin-top: 40px; /* カンプ SP の Frame 201 itemSpacing 40（写真 → 情報） */
    width: auto; /* 縦積みでは器いっぱい */
  }
}

/* 会場名。h3 だが見出しの装飾は無く、本文と同じ Noto Sans（カンプ 6026:551 / 6031:562） */
.p-stay-lp-access__name {
  margin: 0;
  padding: 0; /* h3 { padding:40px 0 10px }（style.css）の打ち消し */
  color: #323232;
  font-family: "Local Noto Sans JP", "Noto Sans JP", sans-serif; /* reset.css の font: inherit で html から来るが明示しておく */
  font-weight: 400; /* h2,h3,h4 { font-weight:500 } の打ち消し */
  font-size: 18px; /* clamp 非対応ブラウザ用フォールバック */
  font-size: clamp(16px, 1.25vw, 18px); /* 18/1440 = 1.25vw。下限 16px は SP 分岐と同値 */
  line-height: 1.7; /* h2,h3,h4 { line-height:1.3 } の打ち消し */
  letter-spacing: 0.16em; /* h2,h3,h4 { letter-spacing:1px } の打ち消し */
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-access__name {
    font-size: 16px;
  }
}

.p-stay-lp-access__table {
  margin-top: 24px; /* カンプ Frame 188 の itemSpacing 24（会場名 → 表） */
  width: 100%;
  border-collapse: collapse; /* tr の border を効かせるために必須（reset.css で既に指定済み） */
  /* ラベル列の幅を値の長さで動かさないために固定レイアウトにする。
     住所（1行目）が長くても th は 120 / 80 のまま＝カンプどおり */
  table-layout: fixed;
}

/* 罫線は #cdc6b8 / 1px が5本。行の上に1本ずつ + 最終行の下に1本＝行数の増減に自動追従する */
.p-stay-lp-access__row {
  border-top: 1px solid #cdc6b8;
}
.p-stay-lp-access__row:last-child {
  border-bottom: 1px solid #cdc6b8;
}

/* ラベル列。PC 120px / SP 80px 固定（カンプ実測）。表の中の小さな部品なので px でよい */
.p-stay-lp-access__label {
  padding: 16px 0; /* カンプ Frame 200 の itemSpacing 16（罫線 ⇄ 行の中身） */
  width: 120px;
  vertical-align: top; /* 値が2行に折り返しても、ラベルは行頭にそろえる */
  color: #81734d; /* カンプ #81734d */
  font-size: 15px; /* clamp 非対応ブラウザ用フォールバック */
  font-size: clamp(12px, 1.0417vw, 15px); /* 15/1440 = 1.0417vw。下限 12px は SP 分岐と同値 */
  font-weight: 400; /* th の既定 bold と style.css の打ち消し */
  line-height: 1.7; /* th { line-height:1.5 }（style.css）の打ち消し */
  letter-spacing: 0.16em; /* th { letter-spacing:.1rem } の打ち消し */
  text-align: left; /* th の既定 center の解除 */
  /* table-layout: fixed の列は内容ではみ出すので、分割不能な英数字語は必ず折る
     （verify-spec の stress「ラベルに分割不能語36字(320)」が実際に 38px の横スクロールを検出した） */
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-access__label {
    width: 80px;
    font-size: 12px;
  }
}

.p-stay-lp-access__value {
  padding: 16px 0;
  vertical-align: top;
  color: #323232;
  font-size: 14px; /* clamp 非対応ブラウザ用フォールバック */
  font-size: clamp(12px, 0.9722vw, 14px); /* 14/1440 = .9722vw。下限 12px は SP 分岐と同値 */
  line-height: 1.7;
  letter-spacing: 0.16em;
  /* table-layout: fixed の列は内容ではみ出さないので、分割不能な英数字語は必ず折る */
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-access__value {
    font-size: 12px;
  }
}

/* 【MAP】だけ下線（カンプは住所と同じテキストノードだが末尾4文字に UNDERLINE が掛かっている）。
   style.css の a { text-decoration:none } を打ち消す。色は住所と同じ #323232 のまま */
.p-stay-lp-access__map {
  color: #323232;
  font-size: inherit; /* a { font-size:1.6rem }（style.css）が td の値より大きくなるのを防ぐ */
  line-height: inherit;
  letter-spacing: inherit;
  text-decoration: underline;
}

/* 電話番号。カンプに下線は無い。色・字送りは値と同じ（a の既定値を td にそろえる） */
.p-stay-lp-access__tel {
  color: #323232;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

/* ============================================================
   RESERVE  page-stay02.php / .p-stay-lp-reserve

   数値の正：tmp-spec/reserve/design-spec.json
     PC 6026:570（1440x1282）paddingTop/Bottom 120・背景 #efe9e0
       Frame 184 x180 w1080（＝左右 180 の余白は max-width + auto margin）
         ⚠ Frame 184 の itemSpacing 48 は primaryAxisAlignItems: SPACE_BETWEEN に
           上書きされた**残骸**。座標が正：__body 右端 400 に対しパネルが x450 ＝ すきま 50。
           % に直すと 37.037% / 4.6296% / 58.3333%（合計 100%。SCHEDULE / ACCESS / VOICE と同じ罠で4度目）
         2カラムは**上端そろえ**（_layoutFlags: Frame 184 edge top at 0 で Frame 64 と Frame 189 が一致）
       Frame 64 w400（itemSpacing 40）= 見出し 82 → リード 104（PC 15px・170%・16%・4行）
       Frame 189 w630 h1042 = 白パネル。#ffffff / border 1px #cdc6b8（strokeAlign INSIDE ＝ border-box）
         padding 40／中身 Frame 188 w550 itemSpacing 40
     SP 6031:581（390x1363）padding 80 / 25・Frame 184 は VERTICAL itemSpacing 48
       Frame 64 w340（itemSpacing 40）／ パネル 340x977・padding 24・中身 294・itemSpacing 32

   ■ フォームは Contact Form 7（RS-12）
     マークアップの原本は scripts/wp-cf7-stay-lp.php の $form。CF7 が出す DOM は
       .p-stay-lp-reserve__field
         > label.p-stay-lp-reserve__label ( + span.p-stay-lp-reserve__badge )
         > span.wpcf7-form-control-wrap > input.p-stay-lp-reserve__input
     の形。**.wpcf7-* は必ず .p-stay-lp-reserve 配下に閉じ込める**——素で書くと
     既存4本のフォームページ（.container_form 系）に波及する。

   ■ 打ち消した既存グローバル（css/style.css・css/reset.css・CF7 の styles.css）
     ⚠ **css/stay-lp.css は CF7 の styles.css より“先”に読まれる**（テーマは header で直リンク、
       CF7 は wp_head 経由）。同一詳細度では CF7 が勝つので、CF7 由来の打ち消しは
       必ず詳細度で上回らせる（下の各所に「(0,n,0) で勝つ」と根拠を書いた）。
     ・input, select, textarea { width:100%; padding:5px; margin:0 0 10px; font-size:1.3em;
       font-family: Arial, sans-serif; border: solid 1px #ccc; vertical-align: middle }  → 各コントロールで上書き
     ・input[type="submit"] { border-radius:50vh; padding:20px; font-size:14px; background-color:#323232 }
       ⚠ 詳細度 (0,1,1)。**クラス1つ (0,1,0) では負ける**ので送信ボタンは
         .p-stay-lp-reserve__submit-wrap .p-stay-lp-reserve__submit（0,2,0）で書く
     ・.wpcf7-acceptance input[type=checkbox] { width:20px; height:20px; border:1px solid #ccc; … }（0,2,1）
       と :checked:before の黒いチェック → (0,3,0) / (0,4,0) で上書き
     ・* { color:#323232 } ／ p { padding:1% 0 } ／ a { text-decoration:none; transition:all .3s }
       ／ a:hover { opacity:.7 } ／ a,p,li,th,td { font-size:1.6rem; line-height:1.5; letter-spacing:.1rem }
     ・reset.css は fieldset/legend/label の margin・padding・border を落とすが
       **fieldset の min-inline-size: min-content は残る** → min-width: 0 を明示（狭い幅で器が縮まない事故）
     ・CF7 styles.css：.wpcf7-form-control-wrap{position:relative}（0,1,0）／
       .wpcf7-list-item{display:inline-block;margin-left:1em}（0,1,0）／
       .wpcf7-list-item-label::before/::after{content:" "}（0,1,0）／
       .wpcf7-spinner{background:#23282d;opacity:.75;margin:0 24px}（0,1,0）／
       .wpcf7 form .wpcf7-response-output{margin:2em .5em 1em;border-width:2px}（**0,2,1**）

   ■ #reserve への着地（KV / CTA の href="#reserve"）
     #top-head は position: fixed で 118px（<=600px は 74px）。.scrolled で 70px になるが
     ただし「 /stay-lp/#reserve 」を直接開いた場合は scroll イベントが発火せず 118px のまま（RS-26）。
     → scroll-margin-top は小さい方（70）ではなく**大きい方**に合わせる。

   ■ カンプに無く、実装側の定石で決めたもの（要確認・報告済み）
     ・入力欄の hover / focus / エラーの見た目（RS-03）
     ・必須 / 任意バッジの見た目（RS-10。7個の必須 + 1個の任意）
     ・同意チェックボックスの見た目（RS-09）
     ・送信中スピナー（CF7 が JS で .wpcf7-spinner を submit の直後に挿す）と
       .wpcf7-response-output（送信後メッセージ）の見た目
   ============================================================ */
/* 矢印（RS-19）。design-spec の _derived（absoluteRenderBounds）が正で、
   **見える実寸は 18.9 x 18**（ノードの w:18 h:18.9 は rotation:-90 の回転前の値）。
   右端からの距離も _derived の arrowRightInset（PC 31.3 / SP 23.6）。
   ⚠ 素材の img/stay-lp/arrow.svg は 14.16:13（= 1.0892）で、カンプの 18.9:18（= 1.05）と
     わずかに比が違う（RESERVE の矢印は CTA より 0.7px 短い別ベクター）。
     mask-size: contain なので**幅 18.9 が効き、高さは 17.35 に収まる**。
     色ちがい・比ちがいの SVG を増やさず1枚で回す判断（差は 0.65px）。 */
/* 送信ボタンの「押せない」状態の色。**カンプ由来ではない導出値**なので _variable.scss には置かない
   （同意チェック自体が RS-09 でカンプに無い追加要素。他セクションから参照する予定も無い）。
   地 #c9c2b2 / 文字・矢印 #4a4535 ＝ コントラスト **5.40:1**（実測。WCAG AA の 4.5:1 を満たす）。
   有効時のゴールド $lp-gold より彩度を落としてあるので「押せない」ことは伝わる。 */
/* 人数カウンタ（Frame 194 / 195）。
   カンプ由来の値：
     82    … ラベル「大人」の席（罫線が x81.5 から始まる ＝ ラベルは 0..81.5）
     26    … PC で2組を横に並べたときのすきま（Frame 193 itemSpacing 26）
     16    … 縦に折り返したときのすきま（SP の Frame 193 itemSpacing 16）
   横並びだが**面を分割するレイアウトではない**（内在サイズの小部品が並ぶ行）ので px でよい

   ■ カンプ由来ではない値（ユーザー指示で「−／＋」ボタンを追加したため）
     カンプの1組は [ラベル 82][数値 82][人+余り 52] = 216px。
     ここへ数値の左右にボタンが2つ入るので、**216px のままでは物理的に収まらない**。
     44 … ボタン1個の辺（＝タップ領域の下限 44x44px。カンプではなく
           WCAG 2.5.8 / Apple HIG の下限から取った実装側の値。
           601〜798px の帯もタッチ端末（タブレット縦）なので PC / SP で共通にする）
     46 … 数値の席。カンプの 82 から縮めた。入力は最大2桁（input の max=20）で、
           PC 16px なら「20」は約 18px + 字送り ＝ 23px。46px あれば中央揃えで収まる
     24 … 「人」の席（実測の字送り 16.24 + 数値とのすきま 8）
   1組 = 82 + 44 + 46 + 44 + 24 = 240px。
   PC の白パネルの中身は 550px なので 240 x 2 + 26 = 506px < 550px ＝ 2組は横に並ぶ。 */
/* = 240px */
/* ラベルの席を1組の幅に対する比で表したもの（82 / 240）。
   器が 240px を切ったとき、ラベルの席と罫線の始まりを一緒に縮めるために使う */
/* 入力コントロール共通のタイポ。入力欄・数値・テキストエリアで3回書かないための mixin。
   PC 16px / SP 14px・170%・16%（カンプ 6026:584 ほか） */
.p-stay-lp-reserve {
  padding: 120px 0; /* 左右は __inner が持つ（背景色は画面端まで敷く） */
  background-color: #efe9e0; /* カンプ fills #efe9e0。VOICE と同じ色 */
  /* KV / CTA の href="#reserve" がここへ着地する。#top-head(position:fixed) の実高に合わせる。
     .scrolled(70px) ではなく**未スクロール時の 118px**が正——URL 直開きでは
     scroll イベントが発火せず .scrolled が付かないため（RS-26）。小さい方に合わせると見出しが潜る */
  scroll-margin-top: 118px;
}
@media screen and (max-width : 600px) {
  .p-stay-lp-reserve {
    /* #top-head は <=600px で 74px（css/style.css の @media max-width:600px） */
    scroll-margin-top: 74px;
  }
}
@media screen and (max-width : 798px) {
  .p-stay-lp-reserve {
    padding: 80px 0;
  }
}

/* PC は [__body 400][すきま 50][パネル 630]。% に直して 100% で検算する */
.p-stay-lp-reserve__inner {
  max-width: 1120px; /* コンテンツ幅 1080 + 左右 padding 20 */
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: flex-start; /* カンプは上端そろえ（_layoutFlags: Frame 184 edge top at 0） */
  gap: 4.6296%; /* 50/1080。37.037 + 4.6296 + 58.3333 = 100% */
}
@media screen and (max-width : 798px) {
  .p-stay-lp-reserve__inner {
    /* 案A：430px を超えたら SP レイアウトを引き伸ばさず中央に置く
       （中央寄せは基底の margin: 0 auto が持つ。背景はセクション側なので全幅のまま） */
    max-width: 430px;
    /* SP は縦積み。間隔だけのために flex は使わない（__panel の margin-top が持つ） */
    display: block;
    padding: 0 25px;
  }
}

.p-stay-lp-reserve__body {
  width: 37.037%; /* 400/1080 */
  min-width: 0; /* 分割不能な英数字語で flex アイテムが膨らんで横並びを壊すのを防ぐ */
}
@media screen and (max-width : 798px) {
  .p-stay-lp-reserve__body {
    width: auto; /* 縦積みでは器いっぱい */
  }
}

/* リード文。カンプは PC 4行 / SP 4行（<br> は3本だが、2文目が器の幅で折れて4行になる） */
.p-stay-lp-reserve__lead {
  margin: 40px 0 0; /* Frame 64 の itemSpacing 40（見出し → リード）。PC / SP 同値 */
  padding: 0; /* style.css の p{padding:1% 0} を打ち消す */
  color: #323232;
  font-size: 15px; /* clamp 非対応ブラウザ用フォールバック */
  font-size: clamp(12px, 1.0417vw, 15px); /* 15/1440。下限 12px は SP 分岐と同値 */
  line-height: 1.7; /* p{line-height:1.5} の打ち消し */
  letter-spacing: 0.16em; /* p{letter-spacing:.1rem} の打ち消し */
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-reserve__lead {
    font-size: 12px;
  }
}

/* 白パネル。strokeAlign が INSIDE なので box-sizing: border-box（*{} で全要素に効いている）で幅どおり */
.p-stay-lp-reserve__panel {
  width: 58.3333%; /* 630/1080 */
  min-width: 0;
  padding: 40px;
  background-color: #fff;
  border: 1px solid #cdc6b8;
  border-radius: 0; /* カンプ cornerRadius なし */
}
@media screen and (max-width : 798px) {
  .p-stay-lp-reserve__panel {
    width: auto;
    margin-top: 48px; /* SP の Frame 184 itemSpacing 48（__body → パネル） */
    padding: 24px;
  }
}

/* --- フォームの縦リズム（Frame 188 の itemSpacing。PC 40 / SP 32）-------------------
   縦の間隔だけのために flex は使わない（CLAUDE.md）。下の要素の margin-top で作る。
   __note / __consent / __submit-wrap は必ず先頭ではないので :first-child の除外は要らない */
.p-stay-lp-reserve__field + .p-stay-lp-reserve__field,
.p-stay-lp-reserve__note,
.p-stay-lp-reserve__consent,
.p-stay-lp-reserve__submit-wrap {
  margin-top: 40px;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-reserve__field + .p-stay-lp-reserve__field,
  .p-stay-lp-reserve__note,
  .p-stay-lp-reserve__consent,
  .p-stay-lp-reserve__submit-wrap {
    margin-top: 32px;
  }
}

/* fieldset（人数）も __field として並ぶ。reset.css が margin/padding/border は落としているが
   **min-inline-size: min-content（UA 既定）は残る**ので明示的に 0 にする。
   これが無いと狭い幅で fieldset だけが縮まず横スクロールが出る */
.p-stay-lp-reserve__field--guests {
  min-width: 0;
  border: 0;
  padding: 0;
  margin-top: 40px; /* 上の + セレクタは fieldset にも当たるが、順序に依存しないよう明示 */
}
@media screen and (max-width : 798px) {
  .p-stay-lp-reserve__field--guests {
    margin-top: 32px;
  }
}

/* 項目名。<label> と <legend> の両方に付く（legend は inline 相当なので block を明示） */
.p-stay-lp-reserve__label {
  display: block;
  width: 100%; /* legend が中身幅で止まらないように */
  padding: 0; /* legend の UA padding-inline: 2px を落とす */
  color: #81734d; /* カンプ #81734d */
  font-family: "Local Noto Sans JP", "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 14px; /* clamp 非対応ブラウザ用フォールバック */
  font-size: clamp(12px, 0.9722vw, 14px); /* 14/1440。下限 12px は SP 分岐と同値 */
  line-height: 1.7; /* 170% */
  letter-spacing: 0.16em; /* 16% */
  /* 分割不能な英数字語が入っても器を破裂させない（verify の stress がここを突く） */
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-reserve__label {
    font-size: 12px;
  }
}

/* 必須 / 任意バッジ（RS-10。カンプに無いので実装側の定石）。
   高さは 11 x 1.4 = 15.4px に抑えてある——ラベルの行ボックス（14 x 1.7 = 23.8px）の
   中に収まる寸法にしないと、バッジを足しただけで項目の高さが伸びてカンプとズレる */
.p-stay-lp-reserve__badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  padding: 0 0.6em;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.08em; /* ラベルの .16em をそのまま継ぐと末尾に空きが出る */
  white-space: nowrap;
  border-radius: 0; /* このLPは全体を通して角丸なし */
}
@media screen and (max-width : 798px) {
  .p-stay-lp-reserve__badge {
    font-size: 10px;
  }
}

.p-stay-lp-reserve__badge--required {
  background-color: #81734d;
  color: #fff;
}

.p-stay-lp-reserve__badge--optional {
  background-color: #fff;
  border: 1px solid #cdc6b8;
  color: #81734d;
}

/* CF7 のラッパー span。既定は inline なので入力欄が label の右に回り込む。
   .wpcf7-form-control-wrap（0,1,0）に対して (0,2,0) で勝つ */
.p-stay-lp-reserve__field .wpcf7-form-control-wrap {
  display: block;
}

/* テキスト入力・テキストエリア。カンプは4辺の枠ではなく**下罫線1本**（Line 18 / #cdc6b8） */
.p-stay-lp-reserve__input,
.p-stay-lp-reserve__textarea {
  color: #323232;
  /* reset.css の font: inherit は input に掛からない（対象は label/legend/fieldset/form まで）。
     style.css の input{font-family: Arial, sans-serif} を明示的に打ち消す */
  font-family: "Local Noto Sans JP", "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 16px; /* clamp 非対応ブラウザ用フォールバック。style.css の font-size:1.3em も潰す */
  /* 16/1440 = 1.1111vw。下限 14px は SP 分岐と同値で、798/799 の境界に段差を作らない */
  font-size: clamp(14px, 1.1111vw, 16px);
  line-height: 1.7; /* 170% */
  letter-spacing: 0.16em; /* 16% */
  display: block;
  width: 100%;
  margin: 0; /* style.css の input{margin:0 0 10px} を打ち消す */
  /* 縦 1em（PC 16 / SP 14。カンプ実測 16.9 / 13.3）・横 8px（PC / SP とも 8）。
     高さは padding + line-height で決まる＝文字量が変わっても壊れない（固定 height にしない） */
  padding: 1em 8px;
  background-color: transparent;
  /* 4辺とも**幅 0**にしたうえで、色だけ持たせて下辺だけ 1px にする。
     ・style.css の input{border: solid 1px #ccc} は幅 0 で打ち消される
       （検証も borderWidthPx=0 で見張れる。枠が復活したら 1 になって FAIL する）
     ・border-color を4辺に持たせておくと hover / focus / エラーで
       **border-color 1行**を差し替えるだけで下罫線の色が変わる。
       computed の borderTopColor に出るので数値検証もできる
       （verify-layout.mjs の borderColor は border-**top**-color しか読まない） */
  border: 0 solid #cdc6b8;
  border-bottom-width: 1px;
  border-radius: 0;
  -webkit-appearance: none; /* iOS の内側シャドウ・角丸を消す */
  -moz-appearance: none;
       appearance: none;
  outline-offset: 2px;
  transition: border-color 0.3s;
}
.p-stay-lp-reserve__input::-webkit-input-placeholder, .p-stay-lp-reserve__textarea::-webkit-input-placeholder {
  color: #ababab; /* カンプ #ababab */
  opacity: 1; /* Firefox の既定 opacity を戻す */
}
.p-stay-lp-reserve__input::-moz-placeholder, .p-stay-lp-reserve__textarea::-moz-placeholder {
  color: #ababab; /* カンプ #ababab */
  opacity: 1; /* Firefox の既定 opacity を戻す */
}
.p-stay-lp-reserve__input::placeholder,
.p-stay-lp-reserve__textarea::placeholder {
  color: #ababab; /* カンプ #ababab */
  opacity: 1; /* Firefox の既定 opacity を戻す */
}
.p-stay-lp-reserve__input,
.p-stay-lp-reserve__textarea {
  /* RS-03：カンプに指定が無いので実装側の定石。
     hover は @media (hover: hover) の中だけ＝タッチ端末で :hover が張り付かない */
}
.p-stay-lp-reserve__input:focus-visible,
.p-stay-lp-reserve__textarea:focus-visible {
  outline: 2px solid #81734d; /* リングは消さない（RS-03） */
  border-color: #81734d;
  border-bottom-width: 2px;
  /* 罫線が 1px 太くなった分を padding から引き、フォーカスで行が 1px 動くのを防ぐ */
  padding-bottom: calc(1em - 1px);
}
@media (hover: hover) {
  .p-stay-lp-reserve__input:hover,
  .p-stay-lp-reserve__textarea:hover {
    border-color: #81734d;
  }
}
.p-stay-lp-reserve__input,
.p-stay-lp-reserve__textarea {
  /* CF7 の AJAX 検証が付けるクラス（.wpcf7-not-valid は 0,1,0 なので 0,2,0 で勝つ）。
     ⚠ **hover / focus より後に置く**。3つとも同じ詳細度 (0,2,0) なので後勝ちになり、
     「エラーの赤」が hover / focus のゴールドに塗り潰されない。
     focus 時は太さ（2px）と outline は focus 側が担当し、色だけ赤が残る＝
     エラーであることを見失わずにフォーカス位置もわかる */
}
.p-stay-lp-reserve__input.wpcf7-not-valid,
.p-stay-lp-reserve__textarea.wpcf7-not-valid {
  border-color: #e3000d;
}
@media (prefers-reduced-motion: reduce) {
  .p-stay-lp-reserve__input,
  .p-stay-lp-reserve__textarea {
    transition: none;
  }
}

/* テキストエリア。高さは rows=3（CF7 の 40x3）と line-height が持つ＝固定 height にしない。
   カンプ右下のグリップはブラウザ既定のリサイズハンドル（縦だけ許可する） */
.p-stay-lp-reserve__textarea {
  resize: vertical;
  min-height: 0;
}

/* --- 人数（大人 / 子ども）------------------------------------------------------ */
/* PC は2組を横並び（すきま 26）、器が足りなくなったら折り返して縦に積む（すきま 16）。
   SP は器 294 に 216x2 + 26 = 458 が入らないので自動的に縦積みになる＝カンプ SP と同じ形。
   メディアクエリを増やさずに PC の中間幅（799〜1000px 付近）の破綻も同時に防いでいる */
.p-stay-lp-reserve__guests {
  display: flex;
  flex-wrap: wrap;
  /* 既定の stretch だと「片方だけエラーが出た」ときに、エラーの無い側の箱まで
     同じ高さに引き伸ばされ、その中で行トラックが伸びて**罫線だけが下がる**。
     カンプでは2組の高さが常に等しいので、この指定で見た目は1pxも変わらない */
  align-items: flex-start;
  gap: 16px 26px;
  margin-top: 0; /* legend の直後。カンプは Group 101 の中で 23px ≒ ラベルの行送りぶんだけ */
}

/* 1組 ＝ [ラベル 82][数値 82][人] で、罫線は**数値と「人」の下だけ**（カンプ x81.5..215.5）。
   罫線は装飾なので疑似要素で引く（空の <span> を置かない・flex で位置決めしない）。

   ■ flex ではなく grid にしている理由（2次元の配置が要るため）
     CF7 のエラー文言（.wpcf7-not-valid-tip）は**入力欄の下・1組の幅いっぱい**に出したい。
     つまりこの部品は「1行目＝ラベル/数値/単位の3列」＋「2行目＝エラー文言（全列）」という
     2次元の器で、flex では表現できない（エラー文言は数値のラッパーの中に挿入されるので
     flex-wrap でも 82px の列から出られない）。
     以前は絶対配置で逃がしていたが、それだと**エラー時に行の高さが確保されず**
     子ども行やその下のラベルに食い込む（実測 SP390：大人のエラー文が子ども行に 12px 侵入）。
     CF7 の検証文言は wp-admin から変更できる＝**壊れる条件がクライアント操作で成立する**。
   ■ 罫線を「1行目の下端」に固定できるのも grid の効果
     ::after は position: absolute のまま grid-row/column を持たせる。
     絶対配置の grid 子は**自動配置に参加しない**（ラベル/数値/単位の並びを一切邪魔しない）が、
     包含ブロックはそのグリッド領域になるので、bottom: 0 が「1行目の下端」を指す。
     ＝ 2行目にエラー文言が生えても罫線は入力欄の直下に留まる。 */
.p-stay-lp-reserve__guest {
  position: relative; /* ::after の包含ブロック（グリッド領域）を確定させる */
  display: grid;
  /* [ラベル 82][− 44][数値 1fr][＋ 44][人 auto]。
     ⚠ **列数は行に並ぶ要素数と必ず一致させること。** ここが3列のままだと
       5個の子（ラベル / − / input / ＋ / 人）が自動配置で2行目に折り返し、
       「＋ 人」だけが下の行に落ちて罫線（1行目の下端）が数値から離れる。
     ・数値の席は minmax(0, 1fr)：器が 240px を切ったときに縮む側。
       1fr（= minmax(auto,1fr)）にすると自動最小サイズが効いて縮まず、器からはみ出す。
     ・ラベルの席は min(82px, 34.1667%)：**器が 240px のときだけ 82px**（＝カンプの値）で、
       それより狭いときは器に比例して縮む。320px（器 222px）で 82px を守ると
       数値の席が 24px まで潰れて2桁（最大 20）が切れるため。
       ⚠ 罫線（::after）の left も**同じ式**にすること。片方だけ変えると
         線の始まりとラベルの席の右端がズレる。
     ・「人」は auto（内在幅）。3列目までを固定にすると罫線の右端と関係が読めなくなる */
  grid-template-columns: min(82px, 34.1666666667%) 44px minmax(0, 1fr) 44px auto;
  align-items: center; /* カンプはラベル・数値・単位とも行の縦中央（_layoutFlags vcenter 30.5） */
  width: 240px;
  max-width: 100%; /* 320px 幅でも器からはみ出さない */
}
.p-stay-lp-reserve__guest::after {
  content: "";
  position: absolute;
  /* エラー文言（2行目）が生えても罫線は1行目の下端に留まる。
     ⚠ 終端まで書くこと（`grid-row: 1` は `1 / auto` で、**絶対配置の子の auto は
       グリッド領域ではなくコンテナのパディング辺**を指す＝ bottom:0 が箱の一番下になり、
       エラー文の下へ罫線が落ちる。実測で y=51.8 のはずが 80.5 になった）。 */
  grid-row: 1/2;
  /* 全列にしておく（2列目〜ではなく）。こうすると包含ブロックの左右が .__guest と一致し、
     罫線の位置は従来どおり left/right だけで決まる。
     ⚠ 2列目〜にすると verify-layout.mjs の疑似要素計測（__vlRect）がズレる——
       あれは「ホストの padding ボックス + computed left」で矩形を出すので、
       グリッド領域が包含ブロックになったことを知らない（実測で 74px ズレて偽 FAIL した）。 */
  grid-column: 1/-1;
  right: 0;
  bottom: 0;
  /* カンプ：罫線は x81.5 から（＝ラベルの席の右端）。
     ⚠ grid-template-columns の1列目と**同じ式**。% は包含ブロック（grid-column: 1/-1
       ＝ 1組の幅）基準なので、列トラックの % と同じ値を指す */
  left: min(82px, 34.1666666667%);
  height: 1px;
  background-color: #cdc6b8;
  transition: background-color 0.3s, height 0.3s;
}
.p-stay-lp-reserve__guest {
  /* 数値入力の状態は罫線（親の ::after）で見せる。:has() は既存 style.css でも使っている */
}
.p-stay-lp-reserve__guest:has(.p-stay-lp-reserve__number:focus-visible)::after {
  height: 2px;
  background-color: #81734d;
}
.p-stay-lp-reserve__guest:has(.wpcf7-not-valid)::after {
  background-color: #e3000d;
}
@media (hover: hover) {
  .p-stay-lp-reserve__guest:has(.p-stay-lp-reserve__number:hover)::after {
    background-color: #81734d;
  }
}
@media (prefers-reduced-motion: reduce) {
  .p-stay-lp-reserve__guest::after {
    transition: none;
  }
}

.p-stay-lp-reserve__guest-label {
  /* 1列目のトラック幅いっぱい（＝ カンプ幅では 82px）。
     ⚠ 82px を直に書かないこと。トラックは min(82px, 34.1667%) で狭い器では縮むので、
       固定 82px だと**ラベルだけがトラックからはみ出して「−」に重なる**（320px で実測 12px 重複）。
     text-align: center の基準になる可視の箱なので width は明示して残す */
  width: 100%;
  text-align: center; /* カンプ：ラベルは罫線の左（0..81.5）の中に置かれている */
  color: #81734d;
  font-family: "Local Noto Sans JP", "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-size: clamp(12px, 0.9722vw, 14px);
  line-height: 1.7;
  letter-spacing: 0.16em;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-reserve__guest-label {
    font-size: 12px;
  }
}

/* --- 「−／＋」ボタン（カンプに無い。ユーザー指示で追加した部品）--------------- */
/* ■ 見た目の根拠
     カンプにこのボタンは無い（数値入力と「人」だけ）。フォームの造形言語は
     **4辺の枠を持たず 1px の細い罫線（#cdc6b8）とゴールド（#81734d）だけ**で
     出来ているので、それに合わせて「1px の細い円 + ゴールドの記号」にした。
     ブラウザ既定の立体ボタン（灰色の角丸矩形）は打ち消す。
   ■ 寸法
     44x44px。**カンプ由来ではない**——タップ領域の下限（WCAG 2.5.8 / Apple HIG）。
     PC / SP で同じ値にしているのは、601〜798px の帯（タブレット縦）も指で触るため。
     CLAUDE.md の「円形にするなら width + aspect-ratio: 1 + 両軸センタリング」に従う。
   ■ 無効状態は :disabled ではなく [aria-disabled="true"]
     JS が上下限で属性を付ける（disabled にするとフォーカスが body に落ちて
     キーボード利用者が迷子になるため、意図的に aria-disabled にしてある）。
     .is-disabled のような状態クラスは併用しない（意味と見た目の二重管理を避ける）。
   ■ js-reserve-step はスタイルのセレクタに使わない（JS フック専用） */
.p-stay-lp-reserve__step {
  /* 両軸センタリング（記号1文字を円の中央に置く）。CLAUDE.md が認める flex の使い方 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  aspect-ratio: 1; /* 高さは幅から作る＝固定 height にしない */
  margin: 0;
  padding: 0;
  background-color: transparent; /* UA 既定の buttonface（灰色）を消す */
  border: 1px solid #cdc6b8; /* UA 既定の 2px outset を消す。色は罫線と同じ */
  border-radius: 50%;
  color: #81734d; /* style.css の * { color:#323232 } は継承ではなく直接当たる */
  font-family: "Local Noto Sans JP", "Noto Sans JP", sans-serif; /* UA 既定のシステムフォントを打ち消す */
  font-size: 18px; /* UA 既定の 13.33px。記号1文字なので clamp は使わない */
  line-height: 1;
  letter-spacing: 0; /* 1文字なので字送りは要らない（中央がずれる） */
  cursor: pointer;
  /* ダブルタップ拡大の 300ms 待ちを消す。連打する部品なので体感差が大きい */
  touch-action: manipulation;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
  /* フォーカスリングは消さない（入力欄と同じ扱い） */
}
.p-stay-lp-reserve__step:focus-visible {
  outline: 2px solid #81734d;
  outline-offset: 2px;
  border-color: #81734d;
}
.p-stay-lp-reserve__step {
  /* 上下限に達した側。JS が付ける属性だけを見る */
}
.p-stay-lp-reserve__step[aria-disabled=true] {
  border-color: #e6e1d6;
  color: #ababab;
  cursor: default;
}
.p-stay-lp-reserve__step {
  /* hover は @media (hover: hover) の中だけ＝タッチ端末で :hover が張り付かない。
     無効側は除く（押せないのに反応すると押せるように見える） */
}
@media (hover: hover) {
  .p-stay-lp-reserve__step:not([aria-disabled=true]):hover {
    background-color: #efe9e0;
    border-color: #81734d;
  }
}
@media (prefers-reduced-motion: reduce) {
  .p-stay-lp-reserve__step {
    transition: none;
  }
}

/* 数値のラッパー（CF7 が必ず挿す span）。箱を消して、中の <input> と
   エラー文言（.wpcf7-not-valid-tip）を **.__guest のグリッド子に昇格**させる。
   こうしないとエラー文言は 82px の列に閉じ込められ、通常フローに戻せない。
   ・span は意味を持たない要素なので display: contents でアクセシビリティツリーは変わらない
   ・CF7 既定の .wpcf7-form-control-wrap{position:relative} も箱ごと消えるので打ち消し不要
   ⚠ 上の .p-stay-lp-reserve__field .wpcf7-form-control-wrap{display:block}（0,2,0）と同詳細度。
     ここが**後ろにある**ことで勝っている。順番を入れ替えないこと */
.p-stay-lp-reserve__guest .wpcf7-form-control-wrap {
  display: contents;
}

.p-stay-lp-reserve__number {
  color: #323232;
  /* reset.css の font: inherit は input に掛からない（対象は label/legend/fieldset/form まで）。
     style.css の input{font-family: Arial, sans-serif} を明示的に打ち消す */
  font-family: "Local Noto Sans JP", "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 16px; /* clamp 非対応ブラウザ用フォールバック。style.css の font-size:1.3em も潰す */
  /* 16/1440 = 1.1111vw。下限 14px は SP 分岐と同値で、798/799 の境界に段差を作らない */
  font-size: clamp(14px, 1.1111vw, 16px);
  line-height: 1.7; /* 170% */
  letter-spacing: 0.16em; /* 16% */
  display: block;
  width: 100%;
  margin: 0;
  /* 横 padding は 0。席が 46px（カンプの 82 から縮めた）しかなく、
     text-align: center なので左右の padding は表示可能な桁を削るだけになる。
     縦 1em は入力欄・テキストエリアと同じ（行の高さの発生源） */
  padding: 1em 0;
  background-color: transparent;
  border: 0; /* 罫線は .__guest::after が引く */
  border-radius: 0;
  text-align: center; /* カンプの「0」は数値の席の中央（カンプでは中心 121.5） */
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  outline-offset: 2px;
  /* ネイティブのスピンボタンを消す（RS-追記：カンプに無い判断）。
     すぐ左右に「−／＋」を置いたので、内蔵の上下ボタンは**同じ機能の二重表示**になり、
     46px しかない席をさらに削る。**消してもキーボードの ↑ / ↓ による増減は残る**ので
     機能は失われない（appearance: none だけでは Chrome / Safari は消えない）。
     Firefox は appearance: textfield が必要なので個別に足す */
  -moz-appearance: textfield;
}
.p-stay-lp-reserve__number::-webkit-outer-spin-button, .p-stay-lp-reserve__number::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.p-stay-lp-reserve__number::-webkit-input-placeholder {
  color: #ababab;
  opacity: 1;
}
.p-stay-lp-reserve__number::-moz-placeholder {
  color: #ababab;
  opacity: 1;
}
.p-stay-lp-reserve__number::placeholder {
  color: #ababab;
  opacity: 1;
}
.p-stay-lp-reserve__number:focus-visible {
  outline: 2px solid #81734d;
}

/* 単位「人」。カンプは #323232（ラベルのゴールドではない） */
.p-stay-lp-reserve__unit {
  /* 3列目（1fr = 52px）に置かれるが、文字は中身幅のまま左端から。
     既定の stretch のままだと箱が 52px に伸びて、罫線の右端との関係が読めなくなる */
  justify-self: start;
  margin-left: 8px; /* カンプの「数値の席の右端 163」と「人 171..」のすきま 8px。
   ボタン追加後は「＋」と「人」のすきまになる */
  color: #323232;
  font-family: "Local Noto Sans JP", "Noto Sans JP", sans-serif;
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.16em;
}

/* 人数のエラー文言。**通常フローのまま**2行目（全列）へ落とす。
   見た目（赤・12px・margin-top 8）は他の項目と同じ
   .p-stay-lp-reserve__field .wpcf7-not-valid-tip がそのまま効く＝ここでは席だけ決める。
   ⚠ 絶対配置に戻さないこと。行の高さが確保されず、文言が2行になった瞬間に
     下の行（子ども / 次の項目のラベル）へ確実に重なる。CF7 の検証文言は
     wp-admin から編集できるので、長い文言は**クライアント操作で成立する**。 */
.p-stay-lp-reserve__guest .wpcf7-not-valid-tip {
  grid-row: 2;
  grid-column: 1/-1;
}

/* --- 注釈 ------------------------------------------------------------------- */
/* カンプ PC 2行 / SP 3行。Frame 188 の子として注釈 → 送信ボタンの間隔 40 / 32 */
.p-stay-lp-reserve__note {
  padding: 0; /* style.css の p{padding:1% 0} */
  color: #323232;
  font-size: 14px;
  font-size: clamp(12px, 0.9722vw, 14px);
  line-height: 1.7;
  letter-spacing: 0.16em;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-reserve__note {
    font-size: 12px;
  }
}

/* --- 同意チェック（RS-09。カンプに無い。実装側の定石）------------------------- */
/* CF7 の [acceptance] は
     span.wpcf7-form-control-wrap > span.wpcf7-acceptance > span.wpcf7-list-item > label > input + span
   を出す。ラッパー3枚は block にして、実際の並びは label（flex）で作る */
.p-stay-lp-reserve__consent .wpcf7-form-control-wrap,
.p-stay-lp-reserve__consent .wpcf7-acceptance,
.p-stay-lp-reserve__consent .wpcf7-list-item {
  display: block; /* CF7 の .wpcf7-list-item{display:inline-block}（0,1,0）に (0,2,0) で勝つ */
  margin: 0;
}

/* チェックボックスと本文の行。小部品が並ぶだけの行なので gap は px でよい。
   ■ min-height / padding は **WCAG 2.2 の 2.5.8（Target Size (Minimum), AA）** が根拠。
     カンプ由来の値ではない（RS-09 のとおり同意チェック自体がカンプに無い要素）。
     基準は「操作対象は 24 x 24 CSS px 以上」。この <label> 全体がクリック領域なので、
     行の高さが 24px を下回らないことが条件になる（実測 SP390 で 20px しかなかった）。
     この1タップが送信ボタンの disabled を外す唯一のゲートなので、押しやすさが完了率に直結する。
     ・min-height … 文字が小さくなっても 24px を割らないための床
     ・padding 4px 0 … 実際の指の当たりを 28px 前後まで広げる（padding も当たり判定に入る）
     ⚠ 文字の位置が 4px 下がり、同意ブロックの高さが 8px 増える。
       カンプに無い要素なので許容（完了報告に差分を記載済み）。 */
.p-stay-lp-reserve__consent label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  padding: 4px 0;
  cursor: pointer;
}

/* CF7 が本文の前後に入れる空白（.wpcf7-list-item-label::before/::after{content:" "}）を消す */
.p-stay-lp-reserve__consent .wpcf7-list-item-label {
  color: #323232;
  font-size: 14px;
  font-size: clamp(12px, 0.9722vw, 14px);
  line-height: 1.7;
  letter-spacing: 0.16em;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}
.p-stay-lp-reserve__consent .wpcf7-list-item-label::before, .p-stay-lp-reserve__consent .wpcf7-list-item-label::after {
  content: none;
}
@media screen and (max-width : 798px) {
  .p-stay-lp-reserve__consent .wpcf7-list-item-label {
    font-size: 12px;
  }
}

/* .wpcf7-acceptance input[type=checkbox]（0,2,1）を上回るため、クラス3枚（0,3,0）で書く */
.p-stay-lp-reserve__consent .wpcf7-acceptance .p-stay-lp-reserve__consent-check {
  flex: none;
  position: relative;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  background-color: #fff;
  border: 1px solid #cdc6b8;
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s;
}
.p-stay-lp-reserve__consent .wpcf7-acceptance .p-stay-lp-reserve__consent-check:checked {
  background-color: #81734d;
  border-color: #81734d;
}
.p-stay-lp-reserve__consent .wpcf7-acceptance .p-stay-lp-reserve__consent-check {
  /* 既存の .wpcf7-acceptance input[type=checkbox]:checked:before（黒いチェック・20px の箱前提）を
     18px の箱と白いチェックで置き換える。(0,4,0) で勝つ */
}
.p-stay-lp-reserve__consent .wpcf7-acceptance .p-stay-lp-reserve__consent-check:checked::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  border-radius: 0;
  transform: rotate(45deg);
}
.p-stay-lp-reserve__consent .wpcf7-acceptance .p-stay-lp-reserve__consent-check:focus-visible {
  outline: 2px solid #81734d;
  outline-offset: 2px;
}
@media (hover: hover) {
  .p-stay-lp-reserve__consent .wpcf7-acceptance .p-stay-lp-reserve__consent-check:hover {
    border-color: #81734d;
  }
}
@media (prefers-reduced-motion: reduce) {
  .p-stay-lp-reserve__consent .wpcf7-acceptance .p-stay-lp-reserve__consent-check {
    transition: none;
  }
}

/* プライバシーポリシーへのリンク。a{text-decoration:none; font-size:1.6rem} の打ち消し */
.p-stay-lp-reserve__consent-link {
  color: #81734d;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-decoration: underline;
}

/* --- 送信ボタン（RS-02 / RS-18 / RS-19）--------------------------------------- */
/* 矢印は .__submit-wrap の疑似要素で描く。CF7 の [submit] は <input type="submit"> なので
   ::after が付かない（RS-19 の申し送り）。pointer-events: none を必ず付ける——
   付けないと矢印の上のクリックがボタンに届かない */
.p-stay-lp-reserve__submit-wrap {
  position: relative;
  /* ⚠ RS-43 の hover はこのラッパーに掛かる（:hover は ::after を持つ要素にしか使えない）。
     **ラッパーの箱がボタンの箱と一致していることが前提**。
     実測（1440px / 390px）でラッパーと <input> の上下左右は完全一致していた——
     .__submit が display:block / width:100% / margin:0 で、ラッパーの子は他に
     .wpcf7-spinner（position:absolute でフローから外してある）しか無いため。
     ラッパーに padding や兄弟要素を足すと「ボタンの外なのに矢印が動く」状態になるので、
     足すときは必ずこの一致を測り直すこと。 */
  /* RS-43 の hover は **送信ボタンが押せるときだけ**（$enabled）。
     [acceptance] に同意するまで CF7 が <input type="submit"> に disabled を付けるので、
     素の :hover だと「押せないのに矢印が動く」誤ったフィードバックになる。
     背景色の hover は既に `:hover:not(:disabled)` で除外済み（実測で確認）。 */
}
.p-stay-lp-reserve__submit-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 31.3px;
  transform: translateY(-50%);
  width: 18.9px;
  height: 18px;
  background-color: #fff;
  -webkit-mask-image: url(../img/stay-lp/arrow.svg);
          mask-image: url(../img/stay-lp/arrow.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  pointer-events: none;
  /* ⚠ 遷移は**基底（::after）側**に置く。`&:hover::after` の中に書くと
     **ホバー中しか transition が有効にならず、外した瞬間にパッと戻る**
     （transition は「遷移後の状態」の指定を見るため、戻り先＝基底に無いと効かない）。
     transform だけを遷移させること。all にすると mask / background まで巻き込む */
  transition: transform 0.3s;
}
@media (hover: hover) {
  .p-stay-lp-reserve__submit-wrap {
    /* タッチ端末で :hover が張り付くのを防ぐため必ず (hover: hover) で囲う。
       translateY(-50%) を translate() に畳む＝縦センタリングを失わないこと */
  }
  .p-stay-lp-reserve__submit-wrap:has(.p-stay-lp-reserve__submit:not(:disabled)):hover::after {
    transform: translate(4px, -50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .p-stay-lp-reserve__submit-wrap::after {
    /* 動かさないだけでなく、戻りのアニメーションも消す */
    transition: none;
  }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) {
  .p-stay-lp-reserve__submit-wrap {
    /* 「動きを減らす」設定では**移動そのものをしない**（遷移を消すだけだと瞬間移動する）。
       上の (hover: hover) と同じ詳細度なので、後に置くこの宣言が勝つ。
       Sass は入れ子の @media を
       `(prefers-reduced-motion: reduce) and (hover: hover)` に合成する */
  }
  .p-stay-lp-reserve__submit-wrap:has(.p-stay-lp-reserve__submit:not(:disabled)):hover::after {
    transform: translateY(-50%);
  }
}
.p-stay-lp-reserve__submit-wrap {
  /* 押せないときは矢印も文字と同じ色に落とす。
     ⚠ ボタン本体の `:disabled` からは届かない——矢印はボタンではなく**ラッパーの ::after**なので、
       ラッパー側で `:has()` を使ってボタンの状態を見に行く必要がある。
     これが無いと、地を #c9c2b2 にした瞬間に白い矢印がコントラスト 1.3:1 で消える
     （opacity: .5 の頃は矢印も一緒に薄まっていたので問題が表面化していなかった）。 */
}
.p-stay-lp-reserve__submit-wrap:has(.p-stay-lp-reserve__submit:disabled)::after {
  background-color: #4a4535;
}
.p-stay-lp-reserve__submit-wrap {
  /* ⚠ 矢印の background-color は **遷移させないこと**（transition に足さない）。
     mask-image を持つ疑似要素に background-color の transition を足すと、
     **実際に描かれる範囲が膨らむ**——inkBox（対象を隠した画面との画素差分）で
     実描画 19x17 → **36x35** に増えるのを実測した。transform だけの再宣言では起きず、
     background-color を足したときだけ再現する（mixin の transform .3s のままにする）。
     得られるのは 0.3 秒の色フェードだけなので、描画が崩れるリスクに見合わない。
     色は同意した瞬間にパッと切り替わる（地の 0.3s より先に白へ戻る）。 */
}
@media screen and (max-width : 798px) {
  .p-stay-lp-reserve__submit-wrap::after {
    right: 23.6px;
  }
}

/* ⚠ input[type="submit"]（css/style.css・詳細度 0,1,1）に勝つため**必ず2クラス**で書く。
   .p-stay-lp-reserve__submit 単独（0,1,0）だと border-radius:50vh の黒丸ボタンに戻る */
.p-stay-lp-reserve__submit-wrap .p-stay-lp-reserve__submit {
  display: block;
  width: 100%; /* カンプ PC 550 / SP 295 は、いずれもパネルのコンテンツ幅そのもの */
  min-height: 80px; /* 固定 height にしない。文言が伸びたら高くなる */
  margin: 0; /* input{margin:0 0 10px} の打ち消し */
  /* 左右**対称**の padding。値は矢印の席（右余白 31.3 + 見える幅 18.9 = 50.2）。
     input[type=submit] のラベルはコンテンツボックスの中央に描かれるので、
     右だけ空けるとラベルの中央がずれる（カンプのラベルは完全な中央：ズレ 0.15px） */
  padding: 0 50.2px;
  background-color: #81734d; /* input[type=submit]{background-color:#323232} の打ち消し */
  border: 0;
  border-radius: 0; /* input[type=submit]{border-radius:50vh} の打ち消し */
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  color: #fff;
  /* RS-18：Roboto に和文グリフが無いので和文は $font-family に落とす。
     連結には総称ファミリを含まない $roboto-name を使う（$roboto を繋ぐと
     途中の sans-serif が OS 既定ゴシックに解決し、後続の Noto Sans JP に到達しない） */
  font-family: "Roboto", "Local Noto Sans JP", "Noto Sans JP", sans-serif;
  font-weight: 700; /* Bold */
  font-size: 18px; /* clamp 非対応ブラウザ用フォールバック。input{font-size:14px} も潰す */
  font-size: clamp(16px, 1.25vw, 18px); /* 18/1440。下限 16px は SP 分岐と同値 */
  line-height: 1.2; /* Figma は AUTO（Roboto の既定 ≒ 1.17）。1.2 に固定して高さを確定させる */
  letter-spacing: 0.16em; /* 16% */
  text-align: center;
  cursor: pointer;
  /* ⚠ background-color だけを遷移させないこと。
     :disabled の解除で 地(#c9c2b2 → $lp-gold) と 文字(#4a4535 → 白) が同時に変わるが、
     地だけ 0.3s かけて動くと、その 0.3 秒は「薄い地に白文字」＝ コントラスト 1.77:1 になる
     （実測で確認）。color も同じ duration で遷移させて足並みを揃える。 */
  transition: background-color 0.3s, color 0.3s;
}
.p-stay-lp-reserve__submit-wrap .p-stay-lp-reserve__submit:focus-visible {
  /* 白いパネルの上のゴールドボタンなので、白 → ゴールドの二重リングにする。
     リングを box-shadow で描き、outline は**透明で残す**——
     強制カラーモード（Windows ハイコントラスト）では box-shadow が描かれないため、
     outline を消すとキーボード操作の手がかりが完全に無くなる。
     ※ computed に出る box-shadow は数値検証できるが outline-width は測れない（verify-layout.mjs） */
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #81734d;
}
.p-stay-lp-reserve__submit-wrap .p-stay-lp-reserve__submit {
  /* 押せない状態。**同意前の初期表示にも効く**（＝全訪問者が最初に見る姿）。
     CF7 は [acceptance] に同意するまで <input type="submit"> に disabled を付けるため、
     送信中（form の [inert]）だけでなく、着地直後からこの見た目になる。
     ⚠ opacity で薄めない。opacity は地と文字を同じ率で薄めるので**必ず比が壊れる**——
       実測で背景 rgb(191,184,165) / 文字 白 ＝ コントラスト 1.98:1（AA の 4.5:1 未満）まで落ち、
       ページ最終CVの文言が読めなくなっていた。色を明示して「押せない」だけを伝える。
     $submit-disabled-bg / -fg は #c9c2b2 / #4a4535 ＝ コントラスト 5.40:1（実測。AA 適合）。
     カンプ由来ではない導出値（同意チェック自体が RS-09 でカンプに無い追加要素）。 */
}
.p-stay-lp-reserve__submit-wrap .p-stay-lp-reserve__submit:disabled {
  background-color: #c9c2b2;
  color: #4a4535;
  cursor: not-allowed;
}
@media (hover: hover) {
  .p-stay-lp-reserve__submit-wrap .p-stay-lp-reserve__submit:hover:not(:disabled) {
    background-color: #a69056; /* RS-02。文字色・矢印色は変えない */
  }
}
@media (prefers-reduced-motion: reduce) {
  .p-stay-lp-reserve__submit-wrap .p-stay-lp-reserve__submit {
    transition: none;
  }
}
@media screen and (max-width : 798px) {
  .p-stay-lp-reserve__submit-wrap .p-stay-lp-reserve__submit {
    min-height: 70px; /* カンプ SP の Rectangle 60（295x70） */
    padding: 0 42.5px; /* 23.6 + 18.9 = 42.5 */
  }
}

/* 送信中スピナー。CF7 が JS で submit の**直後**に <span class="wpcf7-spinner"> を挿すので、
   放っておくとボタンの下に 24px + 左右 24px の余白が生まれて行が伸びる。
   絶対配置にしてレイアウトから外す（.wpcf7-spinner（0,1,0）に (0,2,0) で勝つ） */
.p-stay-lp-reserve__submit-wrap .wpcf7-spinner {
  position: absolute;
  top: 50%;
  left: 24px;
  transform: translateY(-50%);
  margin: 0;
  background-color: #fff;
  opacity: 1;
  pointer-events: none;
}
.p-stay-lp-reserve__submit-wrap .wpcf7-spinner::before {
  background-color: #81734d; /* ゴールドのボタンの上なので、内側の点はゴールド */
}

/* --- CF7 の検証メッセージ ------------------------------------------------------ */
/* 入力欄の下に出るエラー（.wpcf7-not-valid-tip）。**普通のフローに置く**ので、
   出た分だけ項目が下へ伸びるだけで重なりは起きない（固定高さを持たせていないため） */
.p-stay-lp-reserve__field .wpcf7-not-valid-tip {
  display: block;
  margin-top: 8px;
  color: #e3000d;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.16em;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}

/* 送信後のメッセージ。CF7 は .wpcf7 form .wpcf7-response-output（**0,2,1**）で
   margin: 2em .5em 1em / border-width: 2px を当ててくる。クラス3枚（0,3,0）で上回る。
   ⚠ display（form.init / .submitting のときの非表示）は CF7 に任せる＝上書きしない */
.p-stay-lp-reserve .wpcf7 .wpcf7-response-output {
  margin: 24px 0 0;
  padding: 1em;
  border-width: 1px;
  border-radius: 0;
  color: #323232;
  font-size: 14px;
  font-size: clamp(12px, 0.9722vw, 14px);
  line-height: 1.7;
  letter-spacing: 0.16em;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}

/* ============================================================
   追従CTA（RS-42）  page-stay02.php / .p-stay-lp-floating-cta

   カンプに無い。ユーザー指示で足した部品。
   **要素は <a> 1つだけ**（PC / SP で作り分けない。DOM に同じリンクが2つあると
   読み上げでもタブ順でも重複する）。見た目の出し分けはここだけで行う。
     PC   … 右下の小さめのボタン
     SP   … 画面下に横いっぱいの帯（798px 以下）

   ■ 見た目は CTA のゴールドボタンと同じ（mixin で共有。サイズだけ小さい）
     通常 $lp-gold / hover $lp-gold-hover / 角丸なし / 文字 #fff / Roboto Bold。
     文字と矢印の色は hover でも変わらない（RS-02）。

   ■ 矢印のサイズは CTA からの導出値（カンプ由来ではない）
     ボタンの高さが 80 → 60px（0.75 倍）なので、矢印も CTA の 19.6x18 を 0.75 倍して
     14.7x13.5。右余白も 28.4 → 20px（0.70 倍。0.75 倍の 21.3 だと帯の中で間延びする）。
     素材の arrow.svg は 14.16:13（=1.0892）で 14.7:13.5 と同比なので、
     mask-size: contain でも余白が出ない。

   ■ 非表示の作り方（**opacity: 0 だけにしない**）
     opacity だけだと「見えないのにタブキーでフォーカスが当たる」最悪の状態になる。
     visibility: hidden を必ず併記する（＝ フォーカス不可・当たり判定なし）。
     **既定＝状態クラス無し＝非表示。** JS が .is-visible を付けたときだけ出る。
     opacity は「フェードのため」に添えているだけで、非表示の主役ではない。

   ■ z-index: 998（#top-head の 999 より下）— ドロワーと重ねないため
     ドロワー（#global-nav）は **#top-head の内側**にある（header.php）。
     #top-head 自身が z-index: 999 の stacking context なので、
     ドロワーの中で何番を振られていても**外から見れば 999 の塊**。
     998 にしておけば、ドロワーを開いたとき帯は必ずその背面に隠れる。
     実測：390px でハンバーガーを開いた状態を撮影し、帯が見えないことを確認済み。

   ■ タップ領域
     PC 60px / SP 56px の高さがそのまま当たり判定（min-height）。どちらも 44px 以上。

   ■ JS 側の契約（js/stay-lp.js。まだ無い）
     受け口は .js-floating-cta、付け外しするのは .is-visible の1クラスだけ。
     表示は「KV を出た後 かつ CTA の領域外 かつ RESERVE より手前」。
     ⚠ フォーカスを持ったまま .is-visible を外さないこと
       （visibility: hidden になった瞬間フォーカスが body に飛ぶ）。
   ============================================================ */
/* 矢印。CTA（19.6 x 18 / 右 28.4）からの導出値。上のコメント参照 */
/* ラベルと矢印のあいだ。**幅が中身なりに決まる（shrink-to-fit）ので、矢印の席ぶんだけの
   padding にするとラベルの末尾が矢印にくっつく。** CTA（380px 固定幅・ラベル 186px）は
   構造上 49px の余りが出ていたが、追従CTA には余りが出ない。文字サイズ 15px と同等の 16px を
   左右に足して、ラベルが矢印から離れるようにする（左右対称なのでラベルは中央のまま）。 */
.p-stay-lp-floating-cta {
  position: fixed; /* これが無いとページ末尾のフローに素の <a> が積まれる */
  right: 40px;
  bottom: 40px;
  z-index: 998; /* #top-head（ドロワーを内包）の 999 より下。上のコメント参照 */
  /* 幅は指定しない。position: fixed で left: auto なので shrink-to-fit ＝ ラベルなり。
     文言が差し替わっても折り返さずボタンが伸びる（DO_NOT「固定幅を使わない」） */
  max-width: calc(100% - 80px); /* 画面が狭いときに右 40px + 左 40px を残して折り返す */
  min-height: 60px; /* タップ領域 44px 以上。CTA の 80px より小さい＝「小さめ」 */
  padding: 0 50.7px; /* 矢印の席 34.7 + 逃げ 16 */
  font-size: 15px; /* CTA の 18px より小さい */
  /* 既定＝非表示。**visibility が主役**（opacity だけだとフォーカスが当たる） */
  visibility: hidden;
  opacity: 0;
  /* 色・書体・角丸・hover・focus は CTA と同じ mixin。
     transition だけ表示フェードを足す（mixin の中で prefers-reduced-motion まで面倒を見るので、
     ここで後置き宣言せず引数で渡す） */
  /* ⚠ position は**入れない**。矢印 ::after の基準は利用側が決める
     （CTA は relative / 追従CTA は fixed。ここで relative を書くと fixed を潰す）。
     ラベルをボタンの**両軸中央**に置く（CLAUDE.md が flex を許可するパターン）。
     矢印はフレックスアイテムにせず ::after の absolute で別管理する——
     gap で並べるとラベルの中央がその分だけ左へずれてカンプと合わない */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #81734d;
  border-radius: 0; /* カンプ cornerRadius なし */
  color: #fff;
  /* RS-18 Roboto に和文グリフが無いので和文は $font-family に落とす。
     連結には総称ファミリを含まない $roboto-name を使う（$roboto をそのまま繋ぐと
     途中の sans-serif が OS 既定ゴシックに解決し、後続の Noto Sans JP に到達しない） */
  font-family: "Roboto", "Local Noto Sans JP", "Noto Sans JP", sans-serif;
  font-weight: 700; /* Bold */
  line-height: 1.2; /* Figma は AUTO（Roboto の既定 ≒ 1.17）。1.2 に固定して高さを確定させる */
  letter-spacing: 0.16em; /* 16% */
  text-align: center; /* 狭い幅で2行になったときも中央（a,p,li… の既定を上書き） */
  /* 分割不能な英数字語が入っても器を破裂させない。**フレックスアイテムなので必須**——
     ラベルは <a> 直下のテキストノード（匿名フレックスアイテム）で、自動最小サイズが
     min-content ＝ 語の長さになるため、これが無いと 320px で横スクロールが出る。
     break-word は min-content に効かないので anywhere が要る */
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
  /* style.css:48 の a{transition: all .3s} が既に効いているが、変化するのは
     background-color だけ（RS-02：文字色・矢印色は変えない）なのでプロパティを明示して絞る
     （all のままだと focus の outline まで遅れて描かれる） */
  transition: background-color 0.3s, opacity 0.3s, visibility 0s 0.3s;
  /* style.css の a:hover{opacity:.7} を打ち消す。
     @media (hover:hover) の**外**に置く＝タッチ端末で :hover が張り付いても半透明にならない */
}
.p-stay-lp-floating-cta:hover {
  opacity: 1;
}
@media (hover: hover) {
  .p-stay-lp-floating-cta:hover {
    background-color: #a69056; /* RS-02。文字色・矢印色は変えない */
  }
}
.p-stay-lp-floating-cta:focus-visible {
  /* カンプに focus の指定は無い（RS-03）。キーボード操作の視認性だけ確保する */
  outline: 2px solid #fff;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .p-stay-lp-floating-cta {
    /* 「動きを減らす」設定では即時に切り替える（色の変化そのものは残す）。
       ※ コメントは media の内側に置く。外に置くと Sass が空ルールを吐く */
    transition: none;
  }
}
.p-stay-lp-floating-cta::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width: 14.7px;
  height: 13.5px;
  background-color: #fff;
  -webkit-mask-image: url(../img/stay-lp/arrow.svg);
          mask-image: url(../img/stay-lp/arrow.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  pointer-events: none;
  /* ⚠ 遷移は**基底（::after）側**に置く。`&:hover::after` の中に書くと
     **ホバー中しか transition が有効にならず、外した瞬間にパッと戻る**
     （transition は「遷移後の状態」の指定を見るため、戻り先＝基底に無いと効かない）。
     transform だけを遷移させること。all にすると mask / background まで巻き込む */
  transition: transform 0.3s;
}
@media (hover: hover) {
  .p-stay-lp-floating-cta {
    /* タッチ端末で :hover が張り付くのを防ぐため必ず (hover: hover) で囲う。
       translateY(-50%) を translate() に畳む＝縦センタリングを失わないこと */
  }
  .p-stay-lp-floating-cta:hover::after {
    transform: translate(4px, -50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .p-stay-lp-floating-cta::after {
    /* 動かさないだけでなく、戻りのアニメーションも消す */
    transition: none;
  }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) {
  .p-stay-lp-floating-cta {
    /* 「動きを減らす」設定では**移動そのものをしない**（遷移を消すだけだと瞬間移動する）。
       上の (hover: hover) と同じ詳細度なので、後に置くこの宣言が勝つ。
       Sass は入れ子の @media を
       `(prefers-reduced-motion: reduce) and (hover: hover)` に合成する */
  }
  .p-stay-lp-floating-cta:hover::after {
    transform: translateY(-50%);
  }
}
.p-stay-lp-floating-cta.is-visible {
  /* JS が付けたときだけ出る。visibility は遅延なしで即 visible にする
     （出るときに遅らせるとフェードの間だけ透明で当たり判定がある状態になる） */
  visibility: visible;
  opacity: 1;
  transition: background-color 0.3s, opacity 0.3s;
}
@media (prefers-reduced-motion: reduce) {
  .p-stay-lp-floating-cta.is-visible {
    /* mixin 側の transition: none は (0,1,0)。.is-visible は (0,2,0) で勝ってしまうので、
       同じ詳細度で後から潰す */
    transition: none;
  }
}
@media screen and (max-width : 798px) {
  .p-stay-lp-floating-cta {
    /* SP は画面下の帯。left / right を 0 にして width: auto のまま横いっぱいにする */
    right: 0;
    bottom: 0;
    left: 0;
    max-width: none; /* PC の calc(100% - 80px) を外す（残すと左寄せの短い帯になる） */
    min-height: 56px; /* タップ領域 44px 以上。帯なので PC より薄くてよい */
  }
  .p-stay-lp-floating-cta::after {
    right: 25px; /* __inner の左右 padding（25px）と縦のラインを揃える */
  }
}

/* ============================================================
   reCAPTCHA バッジの退避（追従CTA との衝突回避）
   ------------------------------------------------------------
   .grecaptcha-badge は CF7 が **全ページに出す** position: fixed の要素で、
   Google 側の inline style で right: -186px / bottom: 14px に固定されている
   （折りたたみ時に見えるのは右端の 70px ほど）。
   追従CTA（RS-42）の定位置と**完全に重なる**：

     PC 1440  CTA x1142-1400 / y800-860   バッジ x1370-1626 / y826-886
     SP  390  CTA x0-390     / y788-844   バッジ x320-576   / y770-830

   CTA のほうが z-index: 998 で前面なので、SP では帯の上端からバッジの白い角が
   70px ほど突き出して見える。カンプに無い異物なので逃がす。

   ■ display: none で消さないこと
     バッジを隠す場合、Google の利用条件で「このサイトは reCAPTCHA によって保護されており…」の
     表記をフォーム付近に出す義務が生じる。隠すのではなく**位置をずらす**。

   ■ CTA の表示状態に連動させない（:has() を使わない）
     連動させると CTA が消えるたびにバッジが動いてちらつく。
     常時オフセットのほうが挙動が読めるし、JS の状態にも依存しない。

   ■ このLPだけに効かせる（body.page-stay02）
     既存ページには追従CTA が無いので衝突しない。共通CSS ではないので既存には触れない。
   ============================================================ */
body.page-stay02 .grecaptcha-badge {
  /* CTA 下端 40px + CTA 高さ 60px + 逃げ 10px */
  bottom: 110px !important; /* Google の inline style（要素側）に勝つには !important が要る */
}

@media screen and (max-width : 798px) {
  body.page-stay02 .grecaptcha-badge {
    /* 帯の高さ 56px + 逃げ 10px */
    bottom: 66px !important;
  }
}
/*# sourceMappingURL=stay-lp.css.map */