/* =========================================================
   Heaven Retreat — Owner immersive viewer (tilt)
   owner-mypage / owner-property のヒーロー・ギャラリー用。
   既存クラスと衝突しないよう全て hri- 接頭辞。
   ========================================================= */
:root{
  --hri-gold:#b89455;
  --hri-gold-soft:#d8c39a;
  --hri-serif:"Hiragino Mincho ProN","Yu Mincho",serif;
}

/* ---- オーナー画面は全幅で表示（ヒーロー画像・予約詳細の背景が 1140px で途切れるのを解消） ----
   .main は max-width:1140px;margin:0 auto で中央寄せ＝広い画面で両脇が余り、画像/背景がそこで途切れる。
   オーナーのページだけ全幅化（admin/cleaning/restaurant は対象外）。 */
.main-owner{max-width:none}

/* ---- containers ---- */
/* ヒーローの高さ（HR-REV-V4・2026-08-18）
   ★ 高さを変えるときは、この2つの clamp() の数値だけを直せば済む。
   min-height:612px は撤去した。72vh(=約490px) を打ち消して画面の90%を占めていたため
   （実測 1366×768 でヒーロー612px＝90%／スマホ相当で82%）。
   狙いは「次のセクションの頭が画面内に見えていること」。 */
.hri-hero{position:relative;overflow:hidden;background:#0d0f14;touch-action:pan-y;
  height:clamp(360px, 62vh, 520px);height:clamp(360px, 62dvh, 520px);margin:-16px -16px 16px}
@media(min-width:721px){.hri-hero{margin:-20px -20px 20px}}
@media(min-width:881px){.hri-hero{margin:-28px -32px 24px;height:clamp(420px, 72vh, 620px)}}

.hri-gallery{position:relative;overflow:hidden;background:#0d0f14;touch-action:pan-y;
  height:56vh;min-height:340px;border-radius:16px}
@media(min-width:881px){.hri-gallery{height:72vh}}

/* ---- slides / tilt ---- */
.hri-inner{position:absolute;inset:0}
.hri-stage{position:absolute;inset:0}
.hri-slide{position:absolute;inset:0;opacity:0;transition:opacity .7s ease;pointer-events:none}
.hri-slide.on{opacity:1;pointer-events:auto}
.hri-tiltwrap{position:absolute;perspective:2200px}
.hri-tilt{position:absolute;inset:0;background-size:cover;background-position:center;
  transform-style:preserve-3d;transition:transform .14s ease-out;will-change:transform}

/* ---- overlays ---- */
.hri-grad{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,10,14,.4) 0%,rgba(8,10,14,0) 30%,rgba(8,10,14,0) 52%,rgba(8,10,14,.72) 100%)}
.hri-caption{position:absolute;left:0;right:0;bottom:0;padding:22px 22px 28px;color:#fff;pointer-events:none;z-index:4}
@media(min-width:900px){.hri-caption{padding:36px 48px 44px}}
.hri-eyebrow{font-size:15px;letter-spacing:.32em;text-transform:uppercase;color:var(--hri-gold-soft);margin-bottom:8px}
.hri-roomname{font-family:var(--hri-serif);font-weight:400;font-size:clamp(24px,5.5vw,44px);line-height:1.14;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.hri-roomsub{margin-top:6px;font-size:17px;color:rgba(255,255,255,.78);letter-spacing:.05em}

.hri-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(255,255,255,.4);background:rgba(15,17,22,.32);backdrop-filter:blur(6px);color:#fff;
  font-size:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s}
.hri-arrow svg{width:16px;height:16px;display:block}
.hri-arrow:hover{background:rgba(184,148,85,.85);border-color:var(--hri-gold)}
.hri-arrow.prev{left:12px}.hri-arrow.next{right:12px}
@media(min-width:900px){.hri-arrow{width:42px;height:42px}.hri-arrow svg{width:18px;height:18px}.hri-arrow.prev{left:22px}.hri-arrow.next{right:22px}}

.hri-dots{position:absolute;left:0;right:0;bottom:13px;z-index:6;display:flex;gap:8px;justify-content:center;pointer-events:none}
.hri-dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.4);transition:all .3s}
.hri-dots span.on{background:var(--hri-gold);width:22px;border-radius:4px}
.hri-counter{position:absolute;top:14px;right:14px;z-index:6;color:#fff;font-size:16px;letter-spacing:.1em;
  background:rgba(15,17,22,.32);backdrop-filter:blur(6px);padding:5px 12px;border-radius:999px}
@keyframes hri-pulse{0%,100%{opacity:.5}50%{opacity:1}}

/* ---- 詳細情報を見る（ギャラリー） ---- */
.hri-detail{position:absolute;right:14px;bottom:42px;z-index:7;pointer-events:auto;display:inline-flex;align-items:center;gap:8px;
  cursor:pointer;padding:10px 17px;border-radius:999px;border:1px solid rgba(255,255,255,.55);
  background:rgba(15,17,22,.42);backdrop-filter:blur(8px);color:#fff;font-size:17px;letter-spacing:.05em;
  font-family:inherit;transition:background .2s,border-color .2s}
.hri-detail:hover{background:var(--hri-gold);color:#1a1d24;border-color:var(--hri-gold)}
@media(min-width:900px){.hri-detail{right:28px;bottom:60px;padding:12px 20px;font-size:18px}}

/* ---- TOP greeting + alert ---- */
.hri-greet{position:absolute;left:0;right:0;top:0;z-index:4;padding:40px 22px 0;color:#fff;pointer-events:none}
@media(min-width:900px){.hri-greet{padding:64px 48px 0}}
.hri-greet .hri-g-eyebrow{font-size:15px;letter-spacing:.32em;text-transform:uppercase;color:var(--hri-gold-soft)}
.hri-greet .hri-g-name{font-family:var(--hri-serif);font-size:clamp(28px,6.5vw,54px);line-height:1.12;margin-top:12px;text-shadow:0 2px 22px rgba(0,0,0,.45)}
.hri-greet .hri-g-meta{margin-top:12px;font-size:17px;letter-spacing:.06em;color:rgba(255,255,255,.85)}
/* 現在表示物件ラベル。座布団（背景ピル・すりガラス）は撤去し素のテキストに。
   背景が明るい時は下の .hri-lightbg で黒系へ自動反転して可読性を担保する。 */
.hri-greet .hri-g-now{display:inline-block;margin-top:14px;
  font-size:16px;letter-spacing:.14em;color:rgba(255,255,255,.9);font-family:var(--hri-serif);
  text-shadow:0 1px 12px rgba(0,0,0,.5)}
.hri-greet .hri-g-now span{color:#fff}
@media(min-width:900px){.hri-greet .hri-g-now{font-size:17px}}
/* 背景画像が明るくコントラストが不足する時、JS が .hri-lightbg を付与 →
   Welcome back / Now Displaying のテキストを黒系に自動反転（可読性の担保）。 */
.hri-lightbg .hri-greet .hri-g-name{color:#14171e;text-shadow:0 1px 12px rgba(255,255,255,.55)}
.hri-lightbg .hri-greet .hri-g-meta{color:rgba(20,23,28,.82)}
.hri-lightbg .hri-greet .hri-g-eyebrow{color:#8a6a28}
.hri-lightbg .hri-greet .hri-g-now{color:rgba(20,23,28,.85);text-shadow:0 1px 10px rgba(255,255,255,.55)}
.hri-lightbg .hri-greet .hri-g-now span{color:#14171e}

.hri-alert{position:absolute;top:13px;right:13px;z-index:9;display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(199,73,68,.9);
  color:#fff;font-size:16.5px;font-weight:600;cursor:pointer;font-family:inherit;letter-spacing:.02em;
  box-shadow:0 4px 14px rgba(0,0,0,.2);backdrop-filter:blur(6px);
  transition:transform .15s,box-shadow .2s,background .2s}
.hri-alert:hover{background:rgba(176,55,50,.95);transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.26)}
.hri-alert .hri-alert-dot{width:7px;height:7px;border-radius:50%;background:#fff;opacity:.9}
@media(min-width:900px){.hri-alert{top:18px;right:22px;font-size:17px;padding:10px 18px}}
/* アラート発光（少しグローする） */
.hri-alert-glow{animation:hri-alert-glow 2.4s ease-in-out infinite}
.hri-alert-glow .hri-alert-dot{box-shadow:0 0 0 4px rgba(255,255,255,.18);animation:hri-pulse 1.6s infinite}
@keyframes hri-alert-glow{
  0%,100%{box-shadow:0 0 0 1px rgba(255,150,140,.35),0 0 12px rgba(214,72,64,.42),0 4px 14px rgba(0,0,0,.22)}
  50%{box-shadow:0 0 0 1px rgba(255,176,166,.6),0 0 26px rgba(226,86,76,.78),0 4px 14px rgba(0,0,0,.22)}
}

/* ---- property selector: trigger bar + grouped dropdown ---- */
.hri-pselect{position:relative;margin:2px 0 22px}
.hri-pselect-bar{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.hri-pselect-label{font-size:17px;font-weight:600;color:var(--muted-foreground,#6b6a66);letter-spacing:.02em}

/* trigger button */
.hri-pselect-trigger{display:inline-flex;align-items:center;gap:12px;cursor:pointer;
  background:var(--card,#fff);border:1px solid var(--border,#e5e2db);border-radius:14px;
  padding:8px 14px 8px 8px;min-width:236px;max-width:430px;text-align:left;font-family:inherit;
  box-shadow:0 1px 3px rgba(0,0,0,.05);transition:border-color .2s,box-shadow .2s}
.hri-pselect-trigger:hover{border-color:var(--hri-gold);box-shadow:0 6px 18px rgba(0,0,0,.1)}
.hri-pselect-trigger:focus-visible{outline:2px solid var(--hri-gold);outline-offset:2px}
.hri-pselect-thumb{flex:0 0 auto;width:46px;height:46px;border-radius:10px;overflow:hidden;background:#eee}
.hri-pselect-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.hri-pselect-cur{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.hri-pselect-cur-tag{font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--hri-gold);font-weight:700}
.hri-pselect-cur-name{font-size:18.5px;font-weight:700;color:var(--foreground,#1d1d1b);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.hri-pselect-chev{flex:0 0 auto;width:18px;height:18px;color:#9a9a96;transition:transform .25s ease}
.hri-pselect.is-open .hri-pselect-chev{transform:rotate(180deg);color:var(--hri-gold)}

/* backdrop */
.hri-pselect-backdrop{position:fixed;inset:0;z-index:60;background:rgba(12,14,20,0);
  transition:background .25s ease}
.hri-pselect.is-open .hri-pselect-backdrop{background:rgba(12,14,20,.42)}

/* dropdown panel */
.hri-pselect-panel{position:absolute;z-index:61;top:calc(100% + 10px);left:0;
  width:min(430px,calc(100vw - 32px));background:var(--card,#fff);border:1px solid var(--border,#e5e2db);
  border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.22);overflow:hidden;transform-origin:top left;
  opacity:0;transform:translateY(-10px) scale(.97);pointer-events:none;
  transition:opacity .26s cubic-bezier(.22,1,.36,1),transform .26s cubic-bezier(.22,1,.36,1)}
.hri-pselect.is-open .hri-pselect-panel{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.hri-pselect-scroll{max-height:min(70vh,560px);overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 8px 10px;scrollbar-width:thin}

/* group header */
.hri-pgroup-head{display:flex;align-items:center;gap:10px;padding:14px 12px 8px}
.hri-pgroup-name{font-size:15px;font-weight:700;letter-spacing:.16em;color:var(--hri-gold);white-space:nowrap}
.hri-pgroup-rule{flex:1 1 auto;height:1px;background:linear-gradient(90deg,var(--hri-gold-soft),transparent)}
.hri-pgroup-count{font-size:15px;color:#9a9a96;font-variant-numeric:tabular-nums}
.hri-pgroup-list{display:flex;flex-direction:column;gap:2px}

/* option row: photo + name（横並び） */
.hri-popt{display:flex;align-items:center;gap:13px;padding:9px 11px;border-radius:12px;
  text-decoration:none;color:inherit;position:relative;transition:background .16s,transform .16s}
.hri-popt:hover{background:#f4f2ed;transform:translateX(2px)}
.hri-popt:focus-visible{outline:2px solid var(--hri-gold);outline-offset:-2px}
.hri-popt-thumb{flex:0 0 auto;width:64px;height:48px;border-radius:9px;overflow:hidden;background:#eee}
.hri-popt-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.hri-popt:hover .hri-popt-thumb img{transform:scale(1.07)}
.hri-popt-body{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.hri-popt-name{font-size:18px;font-weight:600;color:var(--foreground,#1d1d1b);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hri-popt-loc{font-size:15.5px;color:#8a8a8a;margin-top:2px}
.hri-popt-check{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:var(--hri-gold);color:#fff}
.hri-popt-check svg{width:14px;height:14px}
.hri-popt.is-current{background:linear-gradient(90deg,rgba(184,148,85,.13),rgba(184,148,85,.04))}
.hri-popt.is-current .hri-popt-name{color:#8a6a28}

/* 行のふわっとカスケード（パネル展開時） */
.hri-pselect.is-open .hri-popt{animation:hri-popt-in .42s cubic-bezier(.22,1,.36,1) both}
.hri-pselect.is-open .hri-popt:nth-child(1){animation-delay:.03s}
.hri-pselect.is-open .hri-popt:nth-child(2){animation-delay:.06s}
.hri-pselect.is-open .hri-popt:nth-child(3){animation-delay:.09s}
.hri-pselect.is-open .hri-popt:nth-child(4){animation-delay:.12s}
.hri-pselect.is-open .hri-popt:nth-child(5){animation-delay:.15s}
.hri-pselect.is-open .hri-popt:nth-child(6){animation-delay:.18s}
.hri-pselect.is-open .hri-popt:nth-child(n+7){animation-delay:.21s}
@keyframes hri-popt-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
  .hri-pselect-panel{transition:opacity .15s linear}
  .hri-pselect.is-open .hri-popt{animation:none}
}

/* SP: ラベルの下にボタン、パネルはほぼ全幅 */
@media(max-width:620px){
  .hri-pselect-bar{flex-direction:column;align-items:stretch;gap:9px}
  .hri-pselect-trigger{width:100%;max-width:none;min-width:0}
  .hri-pselect-panel{right:0;left:0;width:auto}
}

/* ---- gallery category panes ---- */
.hri-pane{display:none}
.hri-pane.is-active{display:block}

/* ---- 写真ギャラリーをファーストビュー（全幅没入）として表示 ---- */
.opx-fv-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:0 0 12px}
.opx-fv-eyebrow{font-size:15px;letter-spacing:.28em;text-transform:uppercase;color:var(--hri-gold);font-weight:700}
.opx-fv{position:relative;margin:0 -16px 22px;background:#0d0f14;overflow:hidden}
@media(min-width:721px){.opx-fv{margin:0 -20px 24px}}
@media(min-width:881px){.opx-fv{margin:0 -32px 28px}}
/* FV 内のギャラリーは角丸なし・ヒーロー級の高さに上書き */
.opx-fv .hri-gallery{border-radius:0;height:60vh;min-height:380px}
@media(min-width:881px){.opx-fv .hri-gallery{height:74vh}}
/* 物件名グリーティング（左上オーバーレイ・操作を妨げない） */
.opx-fv-greet{position:absolute;left:0;right:0;top:0;z-index:5;padding:34px 22px 0;color:#fff;pointer-events:none}
@media(min-width:900px){.opx-fv-greet{padding:52px 48px 0}}
.opx-fv-g-eyebrow{font-size:15px;letter-spacing:.3em;text-transform:uppercase;color:var(--hri-gold-soft)}
.opx-fv-g-name{font-family:var(--hri-serif);font-size:clamp(26px,6vw,48px);line-height:1.12;margin-top:10px;
  text-shadow:0 2px 22px rgba(0,0,0,.5)}
.opx-fv-g-meta{margin-top:10px;font-size:16.5px;letter-spacing:.05em;color:rgba(255,255,255,.85)}

/* ---- hero 下部：物件名（大）＋ CTAボタン ---- */
.hri-foot{position:absolute;left:0;right:0;bottom:0;z-index:7;padding:0 22px 26px;pointer-events:none}
@media(min-width:900px){.hri-foot{padding:0 48px 40px}}
.hri-foot-name{font-family:var(--hri-serif);color:#fff;font-weight:400;line-height:1.1;
  font-size:clamp(28px,6vw,48px);text-shadow:0 2px 20px rgba(0,0,0,.5);margin-bottom:16px}
/* CTA：背景がほんのり透ける半透明ボタン。PC は下部中央＋3つ均一幅。 */
.hri-ctas{display:flex;flex-wrap:wrap;gap:10px;pointer-events:auto;justify-content:center}
.hri-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:999px;
  min-width:230px;white-space:nowrap;
  font-size:18px;font-weight:600;text-decoration:none;cursor:pointer;font-family:inherit;
  border:1px solid rgba(255,255,255,.4);
  transition:transform .15s,background .2s,box-shadow .2s,border-color .2s}
.hri-cta-primary{background:rgba(184,148,85,.34);color:#fff;border-color:rgba(216,195,154,.62);
  box-shadow:0 6px 20px rgba(0,0,0,.28)}
.hri-cta-primary:hover{background:rgba(184,148,85,.6);border-color:var(--hri-gold);transform:translateY(-1px)}
.hri-cta-ghost{background:rgba(15,17,22,.30);color:#fff;border-color:rgba(255,255,255,.5)}
.hri-cta-ghost:hover{background:rgba(255,255,255,.18);transform:translateY(-1px)}
/* ---- スマホのヒーロー（HR-NEW-100・2026-08-18）------------------------------
   実機（iPhone 17 Safari・402×655）で、左右の矢印が1つ目のボタンに重なっていた。
   原因は高さ。ヒーローは画面の高さに比例する（62dvh）のに、**ボタンの山は下端から
   積み上がるので縮まない**。実機は Safari のバーで表示領域が狭く、ヒーローが 406px まで
   縮んだ結果、ボタンの山が「矢印のいる縦中央」まで迫り上がっていた。
   （背の高いiframeで確認しているとヒーローは上限520pxのままなので、この不具合は出ない）

   ★ただし本当の問題は重なりではなく**詰まり**だった。ボタン同士の間隔が 8px しかなく、
     3つが1つの塊に見えて圧迫感が出ていた（2026-08-18 ユーザー指摘。矢印をどけた3案は却下）。
   → 高さを 62dvh → 80dvh（上限520px）に戻し、余白を取り直した。
     上限520pxは「次のセクションの YOUR RESIDENCES の見出しが画面下端に少し覗く」高さ。
     HR-REV-V4 の「本文がほぼ見えない」を防ぐ狙いは満たしたまま（V4以前は約82%だった）。
   ★PC（min-width:881px の 72vh）には触れていない。 */
@media(max-width:520px){
  .hri-hero{height:clamp(420px, 80vh, 520px);height:clamp(420px, 80dvh, 520px)}
  .hri-greet{padding:44px 22px 0}
  .hri-foot{padding:0 16px 44px}
  /* 縦の余白（ゆとり）は14px。横の間隔だけ詰めて、2段目の文字が入る幅を稼ぐ */
  .hri-ctas{row-gap:14px;column-gap:10px}
  .hri-cta{padding:13px 8px;font-size:16.5px;border-radius:999px;min-width:0}
  /* 1段目は全幅、2段目は横に2つ。写真（＝ご所有の物件）が広く見えるようにする */
  .hri-cta-primary{flex:1 1 100%}
  .hri-cta-ghost{flex:1 1 calc(50% - 5px);min-width:0;font-size:15.5px}
  .hri-dots{bottom:15px}
  /* 見出しが建物と重なって読めなかったので、上のグラデーションを少しだけ強く・長く */
  .hri-grad{background:linear-gradient(180deg,rgba(8,10,14,.58) 0%,rgba(8,10,14,.22) 34%,rgba(8,10,14,0) 52%,rgba(8,10,14,.72) 100%)}
}
@media(max-width:390px){
  /* 375px級では2段目の余りが 0px になる。文字と内側の余白を少しだけ削って確実に収める */
  .hri-cta-ghost{font-size:15px}
  .hri-cta{padding:13px 6px}
}
@media(max-width:374px){
  /* 375px より狭いと、横に2つ並べても文字とボタンの余りが 1px しか残らない。
     実機のSafariは描画がわずかに違うので、この余りでは危ない。
     無理に並べず全幅3段へ戻す（360px級のAndroidもここに入る）。
     ★「収まったか」ではなく「余りが十分か」で決めている（HR-NEW-100） */
  .hri-cta-ghost{flex:1 1 100%;font-size:16.5px}
  .hri-cta{padding:13px 14px}
}

/* ---- 「ご契約のヴィラ」見出し ---- */
.hri-section-title{font-family:var(--hri-serif);font-weight:400;font-size:24px;margin:6px 0 14px;letter-spacing:.02em}

/* ====================================================================
   オーナー物件 宿泊残日数（白リファイン・マトリクス表）
   確定仕様: 白基調・黒×金は使わない（表には不可）・直角統一・ゲージ廃止で数字のみ
   列＝今期/次期/次々期、各期にハイシーズン枠/平日枠。物件名のみ明朝。
   PC/SP 共通で横スクロール、SP は物件名列を sticky（カード型は廃止）。
   .card.hrq-card に適用。
   ==================================================================== */
.hrq-card{margin-bottom:20px}
.hrq-head{position:relative;border-bottom:1px solid var(--border);padding-bottom:14px}
.hrq-eyebrow{display:block;font-size:14px;letter-spacing:.14em;color:var(--subtle);text-transform:uppercase;margin-bottom:8px}
.hrq-title{font-size:21px;font-weight:600;color:var(--foreground);letter-spacing:.04em}
.hrq-count{position:absolute;right:2px;bottom:16px;color:var(--muted-foreground);font-size:17px}

.hrq-scroll{margin-top:16px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.hrq-table{width:100%;border-collapse:collapse;font-size:16.5px;min-width:720px}
.hrq-table th,.hrq-table td{border:1px solid var(--border);padding:9px 10px;text-align:center;vertical-align:middle}
.hrq-table thead th{background:var(--muted);font-weight:500}
.hrq-h-period{font-size:16px;color:var(--foreground);font-weight:700}
.hrq-h-waku{font-size:15px;color:var(--muted-foreground);font-weight:500}
.hrq-c-kuchi{color:var(--muted-foreground);font-size:16px}
.hrq-c-prop{text-align:left;white-space:nowrap}
.hrq-table tbody .hrq-c-prop .hrq-pn{font-family:var(--hri-serif);font-size:20px;font-weight:500;color:var(--foreground);line-height:1.2}
.hrq-table tbody .hrq-c-prop .hrq-ps{font-size:14.5px;color:var(--muted-foreground);margin-top:4px}
.hrq-kuchi{font-size:18px;color:var(--foreground);white-space:nowrap}
.hrq-kuchi small{font-size:14px;color:var(--muted-foreground);margin-left:1px}
.hrq-cell{color:var(--foreground);white-space:nowrap}
.hrq-cell b{font-size:19px;font-weight:600;color:var(--foreground)}
.hrq-cell small{font-size:14px;color:var(--muted-foreground)}
/* 2026-08-31: 内数表示（残り◯/◯泊 ＋ うちハイシーズン◯泊まで） */
.hrq-cell .hrq-hs{display:block;font-size:12.5px;color:var(--muted-foreground);margin-top:2px;white-space:nowrap}
.hrq-cell .hrq-hs b{font-size:13.5px;font-weight:600;color:var(--foreground)}
.hrqc-grid.one{grid-template-columns:1fr}
.hrqc-box .hrqc-hs{display:block;font-size:12px;color:var(--muted-foreground);margin-top:3px}
.hrqc-box .hrqc-hs b{font-size:13px;color:var(--foreground)}
/* 今期の色付けは廃止（HR-NEW-45）。日付の見出しで分かるため。
   .hrq-dim（予約できる日が無い期の淡色）は別の意味なので残す */
.hrq-table tbody tr.clickable{cursor:pointer;transition:background .15s}
.hrq-table tbody tr.clickable:hover td{background:var(--muted)}
.hrq-table tfoot td{background:var(--muted)}
.hrq-table tfoot .hrq-c-prop,.hrq-table tfoot .hrq-kuchi,.hrq-table tfoot .hrq-cell b{font-weight:700;color:var(--foreground)}
.hrq-foot{margin-top:16px;font-size:14.5px;color:var(--muted-foreground);line-height:1.7}
.hrq-foot b{color:var(--foreground);font-weight:600}

/* SP: 物件名列を固定して横スクロール（カード型は廃止） */
@media(max-width:640px){
  .hrq-table{font-size:15.5px;min-width:600px}
  .hrq-table th,.hrq-table td{padding:8px 8px}
  .hrq-c-prop{position:sticky;left:0;z-index:2;background:var(--card)}
  .hrq-table thead .hrq-c-prop,.hrq-table tfoot .hrq-c-prop{background:var(--muted)}
  .hrq-table tbody tr.clickable:hover .hrq-c-prop{background:var(--muted)}
  .hrq-table tbody .hrq-c-prop .hrq-pn{font-size:18px}
  .hrq-count{position:static;display:block;margin-top:6px}
}

/* ---- SP: グリッド内の表で画面が横にずれるのを防ぐ ---- */
.two-col > *{min-width:0}
.kv-compact dd{overflow-wrap:anywhere}

/* ---- ご契約のヴィラ：パスポートと次回予定を等幅に ---- */
.hri-eqcols{grid-template-columns:1fr 1fr}
@media(max-width:960px){.hri-eqcols{grid-template-columns:1fr}}

/* ---- 次回ご宿泊予定 期間：イン→アウトを縦並び＋デザイン矢印＋泊数を改行 ---- */
.hri-stay-dd{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.hri-stay-arrow{display:block;color:var(--hri-gold);margin:2px 0 2px 3px}
.hri-stay-nights{margin-top:3px;font-size:16px;color:var(--muted-foreground)}

/* ---- 右上アラートのスクロール着地位置（ヘッダー＋余白分あける） ---- */
#next-stay{scroll-margin-top:80px}

/* Oda追加: ドラッグヒント */
.hri-hint{position:absolute;top:14px;left:14px;z-index:6;color:#fff;font-size:15px;letter-spacing:.06em;
  background:rgba(15,17,22,.32);backdrop-filter:blur(6px);padding:6px 12px;border-radius:999px;
  display:flex;align-items:center;gap:6px;animation:hri-pulse 2.6s ease-in-out infinite}
@keyframes hri-pulse{0%,100%{opacity:.5}50%{opacity:1}}

/* ====================================================================
   FV「全ての所有物件を見る」ポップアップ（ご所有物件）
   PC=ヒーロー右の浮遊パネル / SP=下からせり上がるボトムシート
   背景が少し透ける黒ボックス。重みのある（cubic-bezier）登場演出。
   ==================================================================== */
.hri-owned{position:absolute;inset:0;z-index:20;display:flex;pointer-events:none;
  opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s ease}
.hri-owned.is-open{opacity:1;visibility:visible;pointer-events:auto}
/* パネルの後ろにうっすらスクリム（背景はまだ見える） */
.hri-owned::before{content:"";position:absolute;inset:0;background:rgba(8,10,14,.18);
  opacity:0;transition:opacity .45s ease}
.hri-owned.is-open::before{opacity:1}

.hri-owned-panel{position:absolute;display:flex;flex-direction:column;color:#fff;overflow:hidden;
  background:rgba(18,21,28,.91);
  border:1px solid rgba(184,148,85,.30);box-shadow:0 26px 64px rgba(0,0,0,.5);
  transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .45s ease}

/* head：見出しはゴシック（他の見出しと同じ）・区切り線なし */
.hri-owned-head{position:relative;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  padding:16px 16px 8px}
.hri-owned-title{font-family:inherit;font-size:19px;font-weight:600;letter-spacing:.1em;color:#fff}
.hri-owned-close{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:32px;height:32px;
  border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,border-color .2s}
.hri-owned-close:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4)}

/* list */
.hri-owned-list{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:4px 14px 14px;display:flex;flex-direction:column;gap:0}
.hri-owned-list::-webkit-scrollbar{width:6px}
.hri-owned-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px}
.hri-owned-item{display:flex;gap:14px;padding:14px 6px;border-radius:8px;
  border:0;background:transparent;transition:background .2s}
.hri-owned-item + .hri-owned-item{border-top:1px solid rgba(255,255,255,.08)}
.hri-owned-item.is-current{background:rgba(255,255,255,.13)}
.hri-owned-thumb{flex:0 0 112px;width:112px;height:84px;border-radius:6px;overflow:hidden;background:#0d0f14}
.hri-owned-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.hri-owned-info{min-width:0;display:flex;flex-direction:column;gap:8px;justify-content:center}
.hri-owned-name{font-family:var(--hri-serif);font-size:20px;line-height:1.22;color:#fff}
.hri-owned-act{display:inline-flex;align-items:center;gap:8px;font-size:16.5px;color:rgba(255,255,255,.86);
  text-decoration:none;background:none;border:0;padding:0;cursor:pointer;font-family:inherit;
  text-align:left;letter-spacing:.02em;transition:color .2s}
.hri-owned-act:hover{color:var(--hri-gold-soft)}
.hri-owned-ico{flex:0 0 auto;color:#fff}
/* 表示中：座布団なし・白文字だけ・星は隠す */
.hri-owned-item.is-current .hri-owned-set{color:#fff;font-size:16.5px;letter-spacing:.06em;cursor:default}
.hri-owned-item.is-current .hri-owned-set:hover{color:#fff}
.hri-owned-item.is-current .hri-owned-ico-star{display:none}

/* PC：右の浮遊パネル */
@media(min-width:721px){
  .hri-owned{justify-content:flex-end}
  .hri-owned-panel{top:18px;right:18px;bottom:18px;width:min(440px,46%);border-radius:18px;
    transform:translateX(30px) scale(.985);opacity:0}
  .hri-owned.is-open .hri-owned-panel{transform:none;opacity:1}
}
/* SP：画面（表示領域）の最下部からせり上がるボトムシート。
   FV内ではなくビューポート基準にするため position:fixed（ヘッダーより前面）。 */
@media(max-width:720px){
  .hri-owned{position:fixed;z-index:100}
  .hri-owned-panel{left:0;right:0;bottom:0;top:auto;max-height:82dvh;max-height:82vh;
    border-radius:18px 18px 0 0;transform:translateY(46px);opacity:0}
  .hri-owned.is-open .hri-owned-panel{transform:none;opacity:1}
  .hri-owned-thumb{flex:0 0 96px;width:96px;height:74px}
  .hri-owned-name{font-size:19px}
}


/* ==========================================================================
   宿泊残日数：SP（640px以下）は 1物件＝1カード（2026-08-08 / P3-A）
   表は8列あり SP316px枠に839px必要で横スクロールになるため出し分ける。
   下敷きは /owner-calendar/ の .qcard（airbnb.php:394-410）。
   枠の並びは「通常枠 → ハイシーズン枠」で calendar 側と統一。
   ========================================================================== */
.hrq-cards { display: none; flex-direction: column; gap: 10px; margin-top: 16px; }

.hrqc { border: 1px solid var(--border-strong); background: #fff; }
.hrqc-hd {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 13px; background: var(--muted);
  color: inherit; text-decoration: none;
}
.hrqc-name { font-family: var(--hri-serif); font-size: 18px; font-weight: 500; line-height: 1.35; }
.hrqc-name small { display: block; font-family: var(--font-sans); font-size: 14px; font-weight: 400; color: var(--muted-foreground); margin-top: 2px; }
.hrqc-kuchi { margin-left: auto; font-size: 18px; font-weight: 600; white-space: nowrap; }
.hrqc-kuchi small { font-size: 14px; color: var(--muted-foreground); margin-left: 1px; }
.hrqc-arrow { font-size: 20px; color: var(--subtle); line-height: 1; }

.hrqc-per { padding: 10px 13px; border-top: 1px solid var(--border); }
/* 今期の色付けは廃止（HR-NEW-45）。SPカードもPC表と揃えて外した */
.hrqc-pl { font-size: 15px; color: var(--foreground); font-weight: 600; margin-bottom: 7px; }
.hrqc-pl small { font-family: var(--font-sans); font-size: 14px; font-weight: 400; color: var(--muted-foreground); margin-left: 7px; }
.hrqc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.hrqc-box { border: 1px solid var(--border); padding: 8px 10px; background: #fff; }
.hrqc-box.hi { background: #fdfbf6; }
.hrqc-bl { display: block; font-size: 14px; color: var(--muted-foreground); margin-bottom: 3px; }
.hrqc-box b { font-size: 20px; font-weight: 700; color: var(--foreground); }
.hrqc-box small { font-size: 14px; color: var(--muted-foreground); }

.hrqc-more { border-top: 1px solid var(--border); }
.hrqc-more > summary {
  list-style: none; cursor: pointer;
  padding: 11px 13px; font-size: 15px; color: var(--muted-foreground);
  display: flex; align-items: center; gap: 7px;
}
.hrqc-more > summary::-webkit-details-marker { display: none; }
.hrqc-more > summary::before {
  content: ""; width: 8px; height: 8px; flex: 0 0 auto;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);   /* 閉＝下向き▾（HR横断ルール） */
  transition: transform .18s ease;
}
.hrqc-more[open] > summary::before { transform: rotate(-135deg) translate(-2px, -2px); }
.hrqc-more[open] > summary { color: var(--foreground); }
.hrqc-more .hrqc-per:first-of-type { border-top: 0; }

/* 見出し脇の「全 N 物件・計 N 口」（合計行・合計カードの代わり / HR-NEW-22） */
.hrq-count-sep { margin: 0 6px; color: var(--border-strong); }

/* 見出しと「?」を縦中央で揃える。文字と詰まって見えないよう間隔を空ける（2026-08-08） */
.hrq-titlerow { display: flex; align-items: center; gap: 10px; }

/* 合計行（tfoot）を廃止したことで、app.css:372 の全体指定
   `tr:last-child td { border-bottom: none }` が tbody の最終行に効いてしまい、
   表の一番下の枠線が消えた。ここで戻す（2026-08-08） */
.hrq-table tr:last-child td { border-bottom: 1px solid var(--border); }

@media (max-width: 640px) {
  .hrq-scroll { display: none; }
  .hrq-cards { display: flex; }
}

/* ==========================================================================
   チェックイン情報（QRコード・Wi-Fi）— HR-NEW-21
   「直近の予約履歴」を消して空いた右カラムの枠。中身は別途デザイン中のため
   現状はプレースホルダー。差し替え時にこのブロックごと置き換えてよい。
   ========================================================================== */
#checkin-info { display: flex; flex-direction: column; }
.cki-placeholder {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
  padding: 22px 18px;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  background: var(--muted);
}
.cki-ph-note { font-size: 15px; color: var(--muted-foreground); }
.cki-ph-items { display: flex; flex-direction: column; gap: 10px; }
.cki-ph-item { display: flex; align-items: center; gap: 10px; }
.cki-ph-ico {
  width: 30px; height: 30px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: var(--card); color: var(--muted-foreground);
  border: 1px solid var(--border);
  font-size: 15px; line-height: 1;
}
.cki-ph-label { font-size: 16px; color: var(--foreground); }
.cki-ph-target {
  padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 15px; color: var(--muted-foreground);
}
.cki-ph-target-sub { margin-left: 8px; }

/* 透過画像の下に白を敷く（2026-09-01 小田さん指示）。
   物件情報ページと同じ理由：登録画像に透過PNGが混ざっても、暗い面の上で消えないように */
.hri-pselect-thumb img, .hri-popt-thumb img, .hri-owned-thumb img { background:#fff; }