@charset "UTF-8";

/* =========================================================
   variables
   ========================================================= */
:root{
  --moss:#176B5B;
  --moss-deep:#173B35;
  --moss-tint:#EDF2F0;
  /* 緑を直書きしていた箇所を変数にしたもの（値は上の緑と同じ＝東京の見た目は変わらない）。
     大阪エリアでは末尾の html[data-area="osaka"] が墨色へ差し替える（2026-09-29）。
     ⚠ 緑を足すときは色を直書きせず、ここの変数を使うこと。直書きすると大阪のページに緑が残る */
  --moss-rgb:23,107,91;
  --moss-deep-rgb:23,59,53;
  --shadow-rgb:31,78,70;
  --hero-tint-rgb:30,113,100;
  --hero-band:rgba(0,125,99,.8);
  --moss-hover:#03626A;
  --moss-btn:#07705B;
  /* 同じく直書きしていた緑（値はそのまま）。大阪では末尾で墨・参考サイトの地の色へ差し替える */
  --mint:#EDF9F5;
  --cta-green:#3C9C8D;
  --cta-grad-a:#196C5B;
  --cta-grad-b:#267871;
  --cta-hover:#277971;
  --cta-line:#287A71;
  --cta-panel-a:#EDF7CB;
  --cta-panel-b:#CCF9EA;
  --swatch-line:#C2DACF;
  --ink:#27272A;
  --ink-2:#32363B;
  --gray:#666666;
  --gray-light:#ACABAF;
  --paper:#FFFFFF;
  --cream:#F7F7F5;
  --cream-2:#FBFAF7;
  --line:#E2E2E2;
  --live:#2EA36A;
  --live-pale:#EAF7F0;
  --warn:#B4813F;
  /* 文字を載せる金。--warn は明るすぎて、白文字を置くとコントラスト比が 3.3:1 しかなく
     12px の文字が背景に溶ける（読みやすさの目安は 4.5:1 以上）。こちらは 5.6:1。
     **面（バッジの地・小さい文字そのもの）にはこちらを使い、--warn は縁・淡い面に使う。** */
  --warn-deep:#8C5F26;
  --warn-tint:#FBF6EF;
  /* 金の札（「本日募集開始」）専用。--warn 系は**茶色**で、単色で置くと安い焼き付け看板に見える。
     金は1色では金に見えず、明るい面と陰の差ではじめて金属として読まれるので4段持つ。
     ⚠ **明暗の振れ幅を縮めないこと。** 近い色だけで作ると、金ではなく**黄土色の単色**に見える
        （実際に3段・振れ幅を抑えて作ったら、画面では茶色い札のままだった）。
     ⚠ **金の上に白文字を置かないこと。** 明るい金(#E4C56B)に白は 1.7:1 しかなく、12px では読めない。
        文字は --gold-ink（金に対して 5.4:1）を使う。金は面、文字は焦茶、という組み合わせで固定する。
     ⚠ 増やすのはここまで。札のためだけに色を足すと、1枚のカードに緑・金・赤が並んで逆に安っぽくなる。 */
  --gold-hi:#F7E9B4;
  --gold-lit:#E3C55F;
  --gold:#C39A22;
  --gold-shade:#A87F1A;
  --gold-ink:#2E2007;
  --warn2:#C9527A;
  --warn2-tint:rgba(201,82,122,.1);
  --ng:#C6C3BC;
  --favorite:#FF335C;
  --ff-jp:"Gen Interface JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif;
  --ff-en:"Gen Interface JP",var(--ff-jp);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* hidden 属性は常に非表示にする。
   このサイトは display:flex/grid を当てた要素（.h-link、.h-menu-link 等）を hidden で出し分けるが、
   ブラウザ既定の [hidden]{display:none} は後から書いた display 指定に負けるため、ここで一度だけ強くする。
   （個別に .xxx[hidden]{display:none} を書き足していく運用は書き漏れが事故になる） */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  font-family:var(--ff-jp);color:var(--ink);background:var(--paper);
  font-size:16px;line-height:1.7;letter-spacing:.02em;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
site-header,site-footer,site-cta,site-cta-member,site-tagdir{display:block}
.en{font-family:var(--ff-en);letter-spacing:.02em}
.wrap{max-width:1120px;margin:0 auto;padding:0 32px}
:focus-visible{outline:2px solid var(--moss);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* =========================================================
   letter-spacing ルール（全ページ共通・新規ページも本ルールに従うこと）
   用途で4段階に統一する（px数ではなく役割で決める）
   ① 2%  … 数字（Outfit等の価格・件数・統計値）＋その直後に続く単位・件数などの随伴テキスト
            （例：万円・坪・件など、数字に直接くっつく単位語）
   ② 4%  … 補足テキスト（スペック行・時刻・引用文・注記など13〜18px程度の説明文）
   ③ 8%  … 基本UI・見出し（ナビ・ボタン・タグ・バッジ・見出し・タイトル全般）※迷ったらこれ
   ④ 16〜20% … 強調ラベル（フォーム項目名=16%／写真・小パネルの英字キャプション=20%）
   例外（このルールの対象外・個別に判断済み）：
     ・ブランドロゴ(.logo-word)、背景装飾文字(.voice-bgtext/.footer-bgtext/.cta-panel-bgtext等)
     ・Figma仕様で個別値が確定している要素(.badge-live等)
     ・SEOフッターやタグ一覧のような大量リンクが並ぶ密集リスト(.seo-row .sv a/.tagdir-links a)は2%のまま
     ・.fx-ward は normal、.fx-select は2%（意図的なリセット。長い選択肢を欄の幅に収めるため）
   ========================================================= */

/* 見出し共通 */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:32px;gap:16px}
.eyebrow{
  font-family:var(--ff-en);font-size:12px;font-weight:600;letter-spacing:.08em;
  color:var(--moss);text-transform:uppercase;display:block;margin-bottom:8px;
}
h2.st{font-size:28px;font-weight:700;letter-spacing:.08em;line-height:1.5}
#about .st{color:var(--moss)}
.st-sub{font-size:14px;color:var(--gray);margin-top:8px;letter-spacing:.02em}
.more{
  display:inline-flex;align-items:center;gap:8px;font-size:14px;letter-spacing:.08em;
  color:var(--moss);border-bottom:1px solid var(--moss);padding-bottom:8px;white-space:nowrap;
  transition:opacity .25s ease;
}
.more:hover{opacity:.55}
.st-link{display:inline-flex;align-items:center;gap:8px;transition:opacity .25s ease}
.st-link:hover{opacity:.55}
.st-link .st-arrow{flex-shrink:0}
.section{padding-top:80px}
#result{scroll-margin-top:calc(var(--header-h) + 16px)}
#area{scroll-margin-top:calc(var(--header-h) + 16px)}
#station{scroll-margin-top:calc(var(--header-h) + 16px)}

/* ═══ ヘッダー（Figma準拠） ═══ */
/* ヘッダーの実測高さ。さがすページの条件パネル（.se-side）と並び替えバー（.se-tools）が
   この値を基準に画面へ貼り付く。⚠ ヘッダーの余白・ロゴサイズを変えたら実測して直すこと。
   直さないと、貼り付いた要素とヘッダーの間に隙間が空く／潜り込む */
:root{--header-h:73px}
.header{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
}
/* 1段。左からロゴ → 物件の導線 → （余白）→ 閲覧履歴・お気に入り・ログイン → LINE。
   ⚠ flex-wrap させないこと。折り返すとヘッダーの高さが変わり、--header-h とズレる */
.header-inner{
  padding:12px 24px;position:relative;
  display:flex;align-items:center;gap:24px;
}
.logo{display:flex;align-items:center;gap:12px;flex-shrink:0}
.logo-brand{display:flex;align-items:center;gap:8px}
.header-tag{
  font-family:var(--ff-jp);font-weight:500;font-size:13px;letter-spacing:.06em;
  line-height:1.6;color:var(--gray);white-space:nowrap;
}
.logo-mark{
  width:48px;height:48px;flex-shrink:0;border-radius:2px;background:var(--moss);
  overflow:hidden;
}
.logo-mark img{width:100%;height:100%;object-fit:cover}
.logo-word{
  font-family:"Outfit",var(--ff-jp);font-weight:500;font-size:20px;letter-spacing:.16em;
  line-height:1.15;color:var(--moss);white-space:nowrap;
}
/* 物件の導線。いま見ているページだけ緑＋下線にする
   （印は SiteHeader.astro がビルド時に aria-current で付ける。JSで後から塗らない） */
.h-nav{display:flex;align-items:center;gap:4px;flex-shrink:0}
.h-nav-link{
  position:relative;padding:10px 12px;
  font-family:var(--ff-jp);font-weight:500;font-size:15px;letter-spacing:.06em;
  color:var(--ink-2);white-space:nowrap;transition:color .2s ease;
}
.h-nav-link:hover{color:var(--moss)}
.h-nav-link[aria-current="page"]{color:var(--moss);font-weight:600}
/* 下線はヘッダー下端に合わせる（bottom はヘッダーの下パディング12px＋境界線1pxぶん） */
.h-nav-link[aria-current="page"]::after{
  content:"";position:absolute;left:12px;right:12px;bottom:-13px;height:2px;background:var(--moss);
}
.h-right{margin-left:auto;display:flex;align-items:center;gap:16px}
.h-links{display:flex;align-items:center;gap:4px}
.h-link{
  display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:8px;
  font-family:var(--ff-jp);font-weight:500;font-size:14px;letter-spacing:.04em;
  color:var(--gray);white-space:nowrap;transition:background .22s ease,color .22s ease;
}
.h-link:hover{background:var(--moss-tint);color:var(--moss)}
.h-link img{width:20px;height:20px;flex-shrink:0;transition:filter .22s ease}
/* 問い合わせの主導線。ここだけ塗りにして、隣のテキストリンクと重さを分ける */
.h-line-btn{
  display:flex;align-items:center;gap:8px;flex-shrink:0;
  padding:11px 20px;border-radius:999px;background:#06C755;
  font-family:var(--ff-jp);font-weight:500;font-size:14px;letter-spacing:.06em;
  color:#fff;white-space:nowrap;transition:background .22s ease;
}
.h-line-btn:hover{background:#06BD51}
.h-line-btn img{width:20px;height:20px;flex-shrink:0}
/* ---- 表示言語の切り替え（ヘッダー右・リンク群とLINEボタンの間） ----
   隣の .h-link と同じ重さ（灰色の文字＋ホバーで淡い緑）に揃え、主導線（LINE）より目立たせない。
   開いたパネルはハンバーガーメニュー（.h-menu-panel）と同じ白カード。挙動は js/translate.js */
.h-lang{position:relative;flex-shrink:0}
.h-lang-btn{
  display:flex;align-items:center;gap:5px;padding:6px 8px;border-radius:8px;border:none;background:none;cursor:pointer;
  font-family:"Outfit",var(--ff-jp);font-weight:500;font-size:14px;letter-spacing:.06em;
  color:var(--gray);white-space:nowrap;transition:background .22s ease,color .22s ease;-webkit-tap-highlight-color:transparent;
}
.h-lang-btn:hover,.h-lang-btn[aria-expanded="true"]{background:var(--moss-tint);color:var(--moss)}
.h-lang-btn svg{display:block;flex-shrink:0}
.h-lang-panel{
  position:absolute;top:100%;right:0;margin-top:8px;z-index:70;
  min-width:168px;padding:8px;border-radius:12px;background:#fff;
  border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.08);
  display:flex;flex-direction:column;
}
.h-lang-panel[hidden]{display:none}
.h-lang-opt{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:10px 12px;border-radius:8px;border:none;background:none;cursor:pointer;text-align:left;
  font-family:var(--ff-jp);font-weight:500;font-size:14px;letter-spacing:.04em;color:var(--ink-2);
  -webkit-tap-highlight-color:transparent;
}
@media(hover:hover){.h-lang-opt:hover{background:var(--moss-tint)}}
/* 選択中は緑の文字＋右端のドット（チェックの絵文字は使わない） */
.h-lang-opt[aria-checked="true"]{color:var(--moss);font-weight:600}
.h-lang-opt[aria-checked="true"]::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--moss);flex-shrink:0}
/* ハンバーガーメニュー先頭の3択（990px以下だけ出す）。区切り線で下の導線と分ける */
.h-menu-lang{display:none;gap:4px;padding:4px 0 8px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.h-menu-lang .h-lang-opt{
  flex:1;justify-content:center;padding:8px 6px;border:1px solid var(--line);
  font-size:13px;letter-spacing:.02em;white-space:nowrap;
}
.h-menu-lang .h-lang-opt[aria-pressed="true"]{border-color:var(--moss);background:var(--moss-tint);color:var(--moss);font-weight:600}

/* ---- エリアの切り替え（ロゴの右「TOKYO ▾」。中身は AreaSwitch.astro・開閉は js/components.js） ----
   ロゴに寄せて「このサイトはどのエリアか」の札に見せる。.header-inner の間隔（24px）のままだと
   ロゴと離れて物件の導線の一部に見えるので、左だけ詰めている。
   ⚠ この1段は幅がほぼ埋まっている（下の .h-tel の注記）。ここを大きくしたら、その注記の幅の内訳ごと測り直すこと。
   990px以下はヘッダーに出さず、ハンバーガーメニューの先頭（.h-menu-area）が受け持つ。 */
.h-area{position:relative;flex-shrink:0;margin-left:-14px}
.h-area-btn{
  display:flex;align-items:center;gap:4px;padding:4px 8px 4px 10px;border-radius:999px;
  border:1px solid var(--line);background:var(--paper);cursor:pointer;
  font-family:"Outfit",var(--ff-jp);font-weight:500;font-size:12px;letter-spacing:.12em;line-height:1.4;
  color:var(--moss);white-space:nowrap;transition:background .22s ease,border-color .22s ease;-webkit-tap-highlight-color:transparent;
}
.h-area-btn:hover,.h-area-btn[aria-expanded="true"]{background:var(--moss-tint);border-color:var(--moss)}
.h-area-btn svg{display:block;flex-shrink:0}
.h-area-panel{
  position:absolute;top:100%;left:0;margin-top:8px;z-index:70;
  min-width:220px;padding:8px;border-radius:12px;background:#fff;
  border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.08);
  display:flex;flex-direction:column;
}
.h-area-panel[hidden]{display:none}
.h-area-opt{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;
  font-family:var(--ff-jp);font-weight:500;font-size:13px;letter-spacing:.04em;color:var(--ink-2);white-space:nowrap;
}
@media(hover:hover){.h-area-opt:hover{background:var(--moss-tint)}}
.h-area-opt-code{font-family:"Outfit",var(--ff-jp);font-size:14px;letter-spacing:.12em;min-width:56px}
.h-area-opt-name{color:var(--gray);font-size:12px}
/* 表示中は言語の切り替えと同じく、緑の文字＋右端のドット */
.h-area-opt[aria-checked="true"]{color:var(--moss);font-weight:600}
.h-area-opt[aria-checked="true"]::after{content:"";width:6px;height:6px;margin-left:auto;border-radius:50%;background:var(--moss);flex-shrink:0}
/* 準備中の札。押せるが（行き先は準備中の1枚）、物件があるエリアより一段軽く見せる */
.h-area-soon{
  margin-left:auto;padding:2px 8px;border-radius:999px;background:#F4F4F5;
  font-family:var(--ff-jp);font-weight:500;font-size:11px;letter-spacing:.04em;color:var(--gray);white-space:nowrap;
}
/* ハンバーガーメニュー先頭のエリア（990px以下だけ出す）。言語の3択（.h-menu-lang）と同じ形 */
.h-menu-area{display:none;gap:4px;padding:4px 0 8px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.h-menu-area-opt{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 6px;border-radius:8px;
  border:1px solid var(--line);font-family:"Outfit",var(--ff-jp);font-weight:500;font-size:13px;letter-spacing:.1em;
  color:var(--ink-2);white-space:nowrap;
}
.h-menu-area-opt[aria-current="true"]{border-color:var(--moss);background:var(--moss-tint);color:var(--moss);font-weight:600}
.h-menu-area-opt .h-area-soon{margin-left:0;padding:1px 6px;font-size:10px}

/* ---- Google 翻訳の標準UIを出さない ----
   訳すのは Google、見た目は自前（上の .h-lang）。Google が差し込む上部の帯・原文の吹き出し・
   訳した文字の黄色いハイライトを消し、帯のぶん body を押し下げる top:40px も打ち消す。
   ⚠ Google は予告なくクラス名を変える（2023年頃に goog-te-* → VIpgJd-* へ変わった）ため新旧両方を書いてある。
     帯が再び出るようになったら、まずここのクラス名を実物と突き合わせること */
.goog-te-banner-frame,
iframe.skiptranslate,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
#goog-gt-tt,
.goog-te-balloon-frame,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,
.VIpgJd-yAWNEb-L7lbkb{display:none!important}
body{top:0!important}
.goog-text-highlight,
.VIpgJd-yAWNEb-VIpgJd-fmcmS-sn54Q{background:none!important;box-shadow:none!important}
/* 中国語表示のときは中国語の書体を先に当てる。日本語の書体（Gen Interface JP）には簡体字が無く、
   そのままだと日本語の字形と簡体字の代替書体が1行の中で混ざって見える。
   Google 翻訳は訳した言語を <html lang> に書き込むので、それを目印にする */
html[lang^="zh"]{--ff-jp:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif}

/* ---- 英語・中国語で見ているときの調整（目印 html[data-site-lang] は BaseLayout の <head> と js/translate.js が付ける） ----
   訳し終わるまで本文を隠し、中央に読み込み中の輪だけ出す（訳す前の日本語を見せないため）。
   輪は <body> の外（html::after）に置くので、本文を隠しても見える */
html.is-translating body{opacity:0}
html[data-site-lang] body{transition:opacity .25s ease}
/* 表示後にページのJSが日本語で書き直した箇所。訳し終わるまで透明にする（付け外しは js/translate.js）。
   場所は取ったままにする（display:none だと周りが詰まって、訳し終わった瞬間にガタつく） */
html[data-site-lang] [data-tr-pending]{opacity:0!important}
html.is-translating::after{
  content:"";position:fixed;left:50%;top:50%;z-index:300;width:28px;height:28px;margin:-14px 0 0 -14px;
  border-radius:50%;border:2px solid var(--moss-tint);border-top-color:var(--moss);animation:tr-spin .8s linear infinite;
}
@keyframes tr-spin{to{transform:rotate(360deg)}}
/* 日本語の長さ前提で「折り返さない」にしてある箇所を、訳文では折り返せるようにする
   （実測：英語でトップの説明文が1行のまま最大約700px、業種カードの「A/B/C/D」が画面の右へ突き抜けた） */
html[data-site-lang] .hero-copy p{white-space:normal}
html[data-site-lang] .ind-card-items{overflow-wrap:anywhere}
html[data-site-lang] .ward .wl{white-space:normal;overflow-wrap:anywhere}
/* さがすページの「空室確認 ◯分前」（実測：英語 375px 幅で約210px、中国語 320px 幅で約55px はみ出した） */
html[data-site-lang] .se-livebar{white-space:normal}
/* 同じ段の「募集中」札が英語では倍の長さになり、隣の文に残る幅が単語1つぶんも無くなる。
   段を折り返して、入らなければ文を札の下へ回す */
html[data-site-lang] .se-htop-live{flex-wrap:wrap}
/* スマホでは見出しの隣に残る幅に「募集中」の札（英語で148px）が入らない（実測：320px幅で8px）。
   札と文の段ごと見出しの下の行へ回す */
@media(max-width:540px){
  html[data-site-lang] .se-htop-live{flex-basis:100%}
}
/* 一覧の上の「条件を変更」「条件を保存」。英語だと2つ並べた幅が画面に入らず、一覧ごと押し広げた
   （実測：320px幅で9px・375px幅で2px）。ボタンの中で折り返させる（ボタンの幅は均等のまま） */
html[data-site-lang] .se-toolbar-btn{white-space:normal;text-align:center;letter-spacing:.02em}
/* ヘッダーは英語だけ詰める。英語は日本語の2〜3倍の幅になり（実測：物件の導線 199→396px、
   電話の注記 138→230px、キャッチ 208→576px）、どの幅でも横にはみ出した。中国語は日本語並みで崩れない。
   キャッチと電話の注記を隠し、右上のリンクはアイコンだけ（読み上げ名は aria-label に残してある）。
   991〜1239px は電話番号も隠す（ハンバーガーメニューの「電話で相談」が受け持つ）。
   ⚠ 実測：この指定で 991〜1240px の各幅ではみ出し0。文言や項目を増やしたら必ず測り直すこと */
html[data-site-lang="en"] .header-tag,
html[data-site-lang="en"] .h-tel-note,
html[data-site-lang="en"] .h-link span{display:none}
@media(min-width:991px){
  html[data-site-lang="en"] .h-link{padding:6px}
}
@media(min-width:991px) and (max-width:1239px){
  html[data-site-lang="en"] .h-tel{display:none}
  html[data-site-lang="en"] .h-nav-link{padding:10px 8px;font-size:14px;letter-spacing:.02em}
  html[data-site-lang="en"] .h-nav-link[aria-current="page"]::after{left:8px;right:8px}
}

/* ---- 言語を切り替えたときの歓迎の幕（SiteHeader.astro の .lang-welcome・挙動は js/translate.js） ----
   Google 翻訳が訳し終えるまでの数秒を、その言語でのあいさつに使う。
     開く … 押したボタンの位置（--lx/--ly、JS が入れる）から円が広がって画面を覆う
     中身 … ロゴの金の輪が描かれる → あいさつが回って選んだ言語で止まる → 見出し・本文が浮かぶ
     引く … 幕ごと上へ引き上がる（.is-leaving）
   ⚠ 中身の動きは「始まりの姿」だけを keyframes に書き、止まった姿は素の指定にしてある。
     動きを減らす設定（prefers-reduced-motion）では冒頭の指定で animation が全部切られるので、
     逆に書くと文字が透明のまま出てこなくなる。 */
.lang-welcome{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 38%,var(--moss) 0%,var(--moss-deep) 72%);color:#fff;
  clip-path:circle(0px at var(--lx,50%) var(--ly,0%));
  transition:clip-path .75s cubic-bezier(.7,0,.2,1),transform .7s cubic-bezier(.7,0,.2,1);
  cursor:pointer;
}
.lang-welcome[hidden]{display:none}
.lang-welcome.is-open{clip-path:circle(150vmax at var(--lx,50%) var(--ly,0%))}
.lang-welcome.is-leaving{transform:translateY(-100%)}
/* 背景の透かし文字。フッターの大きな英字と同じ扱いで、線だけの文字をゆっくり流す */
.lang-welcome-bg{
  position:absolute;left:0;bottom:6vh;white-space:nowrap;pointer-events:none;
  font-family:"Outfit",var(--ff-jp);font-weight:500;font-size:min(18vw,220px);letter-spacing:.06em;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.09);
}
.lang-welcome.is-open .lang-welcome-bg{animation:lw-drift 14s linear both}
.lang-welcome-inner{position:relative;text-align:center;padding:0 24px;max-width:600px}
.lang-welcome-mark{position:relative;display:block;width:112px;height:112px;margin:0 auto 28px}
.lang-welcome-mark img{position:absolute;inset:24px;width:64px;height:64px;border-radius:2px}
.lang-welcome-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.lang-welcome-ring circle{fill:none;stroke:var(--gold-lit);stroke-width:1.5;stroke-dasharray:327;stroke-dashoffset:0}
.lang-welcome.is-open .lang-welcome-mark img{animation:lw-pop .7s cubic-bezier(.2,1.4,.4,1) .35s both}
.lang-welcome.is-open .lang-welcome-ring circle{animation:lw-draw 1.1s cubic-bezier(.6,0,.2,1) .45s both}
.lang-welcome-copy[hidden]{display:none}
/* あいさつの回転。1行ぶん（1.4em）ずつ上へ送り、3行目（選んだ言語）で止める */
.lang-welcome-roll{display:block;height:1.4em;overflow:hidden;margin-bottom:14px;
  font-family:"Outfit",var(--ff-jp);font-weight:500;font-size:15px;letter-spacing:.32em;line-height:1.4;color:var(--gold-lit)}
.lang-welcome-roll > span{display:flex;flex-direction:column;transform:translateY(-2.8em)}
.lang-welcome-roll > span > span{display:block;height:1.4em}
.lang-welcome.is-open .lang-welcome-roll > span{animation:lw-roll 1.5s cubic-bezier(.7,0,.2,1) .7s both}
.lang-welcome-title{
  font-family:"Outfit",var(--ff-jp);font-weight:500;font-size:clamp(24px,4.4vw,40px);letter-spacing:.04em;line-height:1.3;
}
.lang-welcome-text{margin-top:18px;font-family:var(--ff-jp);font-weight:500;font-size:15px;line-height:1.9;letter-spacing:.04em;color:rgba(255,255,255,.82)}
.lang-welcome [lang="zh-CN"],.lang-welcome-copy[lang="zh-CN"] .lang-welcome-title,.lang-welcome-copy[lang="zh-CN"] .lang-welcome-text{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
}
.lang-welcome.is-open .lang-welcome-title{animation:lw-rise .9s cubic-bezier(.2,.8,.2,1) 1.5s both}
.lang-welcome.is-open .lang-welcome-text{animation:lw-rise .9s cubic-bezier(.2,.8,.2,1) 1.75s both}
/* 待っている間の印。金の光が細い線の上を行き来する */
.lang-welcome-bar{position:relative;display:block;width:160px;height:1px;margin:32px auto 0;overflow:hidden;background:rgba(255,255,255,.18)}
.lang-welcome-bar::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:40%;
  background:linear-gradient(90deg,transparent,var(--gold-hi),transparent);transform:translateX(-100%);
}
.lang-welcome.is-open .lang-welcome-bar::after{animation:lw-sweep 1.4s ease-in-out .6s infinite}
@keyframes lw-drift{from{transform:translateX(0)}to{transform:translateX(-25%)}}
@keyframes lw-pop{from{opacity:0;transform:scale(.6)}}
@keyframes lw-draw{from{stroke-dashoffset:327}}
@keyframes lw-roll{
  0%,22%{transform:translateY(0)}
  40%,62%{transform:translateY(-1.4em)}
  80%,100%{transform:translateY(-2.8em)}
}
@keyframes lw-rise{from{opacity:0;transform:translateY(14px);filter:blur(8px)}}
@keyframes lw-sweep{to{transform:translateX(250%)}}
@media(max-width:540px){
  .lang-welcome-mark{width:96px;height:96px;margin-bottom:22px}
  .lang-welcome-mark img{inset:20px;width:56px;height:56px}
  .lang-welcome-text{font-size:14px}
  .lang-welcome-text br{display:none}
}
/* ---- 代表電話（ヘッダー右・LINEボタンの隣） ----
   ⚠ **ヘッダーの高さを増やさないこと。** --header-h:73px をさがすページの条件パネル・
   並び替えバー・各所の scroll-margin-top が基準にしている。番号＋注記の2行は
   ロゴ（48px）の内側に収まる寸法で組んであるので、文字サイズを上げるときは必ず高さを測り直す。

   ⚠ **出す幅は実測で決めている。** この1段はロゴ＋キャッチ＋導線2本＋リンク3本＋LINEで
   ほぼ埋まっており（電話を足す前の空きは1024px幅で35px、1366px幅でも141px）、素直に足すと
   1024px付近と1300〜1400px付近ではみ出して折り返す＝ヘッダーが2段になり高さが狂う。そこで
     ・991px以上 … 電話を出す
     ・991〜1199px … 右上のリンクをアイコンだけにして、そのぶんの場所を作る
     ・1439px以下 … キャッチコピー（.header-tag）を出さない（電話と並べると入らない）
     ・990px以下 … 電話は出さず、ハンバーガーメニューとスマホの導線が受け持つ
   実測した必要幅（電話ブロック136px込み）：
     文字あり＋キャッチあり = 1377px ／ 文字あり = 1141px ／ アイコンのみ = 921px
   幅の内訳を変えたら、必ずブラウザで実測して切り直すこと。
   ⚠ 言語の切り替え（.h-lang）を足したので、上の実測値にさらに次のぶんが乗る（計算値・未実測）：
     文字あり（地球儀＋「EN」）… 約86px（ボタン約70px＋.h-right の間隔16px）
     アイコンのみ（地球儀だけ）… 約46px
   そのため「アイコンだけにする幅」を1199px→1239px、キャッチを出さない幅を1439px→1499px に引き上げた。
   ⚠ 2026-09-29 にエリアの切り替え（.h-area「TOKYO ▾」・幅81px）をロゴの右に足した。実測で
     991〜1015px が最大24px・1240〜1243px が4px はみ出した（足す前はどの幅も0）ため、
       ・「アイコンだけにする幅」を 1239px → 1279px に引き上げ
       ・991〜1099px だけ .header-inner と .h-right の間隔を詰める（下の @media）
     にした。この指定で 360〜1920px の各幅ではみ出し0（日本語表示と、英語表示の近似＝導線・LINEボタンに
     長めの訳語を差し込んだ状態で実測。Google 翻訳を実際に通した画面では測っていない）。 */
.h-tel{display:none;align-items:center;gap:6px;flex-shrink:0;color:var(--moss);white-space:nowrap;transition:color .22s ease}
.h-tel:hover{color:var(--moss-hover)}
.h-tel-icon{display:block;flex-shrink:0}
.h-tel-text{display:flex;flex-direction:column;gap:1px;line-height:1.15}
.h-tel-num{font-family:"Outfit",var(--ff-jp);font-weight:600;font-size:17px;letter-spacing:.02em}
.h-tel-note{font-family:var(--ff-jp);font-weight:500;font-size:10px;letter-spacing:.02em;color:var(--gray)}
@media(min-width:991px){.h-tel{display:flex}}
/* 991〜1199px は電話ブロックを入れる幅が足りない（文字ありだと1141px必要で、余裕が無い）。
   右上のリンクを文字なし（アイコンだけ）にして場所を作る。
   ⚠ 文字を消すと読み上げの名前が消えるので、リンク側には必ず aria-label を付けてある */
@media(min-width:991px) and (max-width:1279px){
  .h-link span{display:none}
  .h-link{padding:6px}
  .h-lang-code{display:none}
  .h-lang-btn{padding:6px}
}
/* 991〜1099px はエリアの切り替えを足したぶん、アイコンだけにしても入らない（上の注記）。
   並びは変えずに間隔だけ詰める（ロゴと切り替えの間は .h-area の margin-left で今までどおり10pxに保つ） */
@media(min-width:991px) and (max-width:1099px){
  .header-inner{gap:16px}
  .h-area{margin-left:-6px}
  .h-right{gap:10px}
}
/* キャッチコピーは電話と並べても入る幅でだけ出す（電話ブロック約125px＋余白のぶん）。
   ⚠ 以前は1280px以下で消していたが、電話を足したことで足りなくなったので引き上げた */
@media(max-width:1499px){.header-tag{display:none}}
/* 541〜599px は右上のリンク（お気に入り・ログイン）の文字を入れる幅が無い
   （実測：541〜569px でヘッダーが最大29pxはみ出し、ページごと横スクロールになっていた）。
   991〜1199px と同じく文字を消してアイコンだけにする（読み上げ名は aria-label に残してある）。
   600px まで広げてあるのは、会員表示「マイページ」がログインより長いぶんの余裕 */
@media(min-width:541px) and (max-width:599px){
  .h-link span{display:none}
}
.h-mobile-cta{display:none}
.h-menu-btn{
  display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  width:40px;height:40px;border-radius:2px;background:var(--moss-tint);
  border:none;padding:0;cursor:pointer;flex-shrink:0;
}
.h-menu-bar{width:18px;height:2px;border-radius:1px;background:var(--moss)}
.h-menu-panel{
  position:absolute;top:100%;right:16px;margin-top:8px;z-index:70;
  min-width:200px;padding:8px;border-radius:12px;background:#fff;
  border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.08);
  display:flex;flex-direction:column;gap:0;
}
.h-menu-panel[hidden]{display:none}
.h-menu-link{
  display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:8px;
  font-family:var(--ff-jp);font-weight:500;font-size:15px;letter-spacing:.08em;
  color:var(--moss);white-space:nowrap;transition:background .22s ease;
  border:none;background:none;width:100%;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.h-menu-link img{width:20px;height:20px;flex-shrink:0}
/* 電話だけアイコンがインラインSVG（色を親から継ぐため）なので、大きさを画像と揃える */
.h-menu-link .h-menu-ico{display:block;width:20px;height:20px;flex-shrink:0}
/* 番号は行の右端に寄せる（項目名と数字が混ざって読みにくくなるため） */
.h-menu-tel-num{margin-left:auto;font-weight:600;letter-spacing:.04em}
@media(hover:hover){.h-menu-link:hover{background:var(--moss-tint)}}
.h-menu-link--history,.h-menu-link--fc,.h-menu-link--line{display:none}
.h-menu-link--login,.h-menu-link--fav,.h-menu-link--search{display:none}

/* ═══ ログイン／会員登録 モーダル（Figma準拠） ═══ */
site-auth-modal{display:contents}
.auth-overlay{
  position:fixed;inset:0;z-index:90;background:rgba(var(--moss-rgb),.7);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:24px;overflow-y:auto;
}
.auth-overlay[hidden]{display:none}
.auth-modal{
  position:relative;width:471px;max-width:100%;background:#fff;border-radius:24px;
  padding:32px 40px;display:flex;flex-direction:column;align-items:center;gap:24px;
  box-shadow:8px 8px 16px rgba(var(--shadow-rgb),.16);margin:auto;
}
.auth-close{
  position:absolute;top:16px;right:16px;width:32px;height:32px;display:grid;place-items:center;
  border:none;background:none;border-radius:8px;color:var(--gray);cursor:pointer;
  transition:background .2s ease,color .2s ease;
}
.auth-close:hover{background:var(--moss-tint);color:var(--moss)}
.auth-logo{display:flex;align-items:center;justify-content:center;gap:8px;width:100%}
.auth-logo .logo-mark{width:80px;height:80px}
.auth-logo .logo-word{font-size:40px}
.auth-form{display:flex;flex-direction:column;gap:24px;width:100%}
.auth-fields{display:flex;flex-direction:column;gap:8px;width:100%}
.auth-field{position:relative}
.auth-input{
  width:100%;border:none;border-radius:8px;background:var(--mint);height:52px;padding:16px;
  font-family:var(--ff-jp);font-size:15px;color:var(--ink);
}
.auth-input:focus-visible{outline:none}
.auth-input::placeholder{color:rgba(39,39,42,.4)}
.auth-input.is-invalid{box-shadow:inset 0 0 0 1px var(--warn2)}
.auth-error{font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--warn2);margin-top:4px}
/* 入力欄ごとではなく、送信そのものが通らなかったときの案内（認証エラー・送信失敗など） */
.auth-formerror{font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--warn2);margin-bottom:12px;text-align:center}
/* 再送パネルの中では .auth-resend-panel p（要素セレクタ付きで詳細度が高い）の灰色に負けるため、
   エラーだけは同じ詳細度で赤に戻す。付けないと文言は出るのにエラーに見えない */
.auth-resend-panel .auth-formerror{color:var(--warn2)}
.auth-field--password .auth-input{padding-right:48px}
.auth-field-input{position:relative}
.auth-eye{
  position:absolute;top:50%;right:16px;transform:translateY(-50%);width:20px;height:20px;
  border:none;background:none;padding:0;cursor:pointer;color:var(--ink);
}
.auth-eye img{width:100%;height:100%}
.auth-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.auth-remember{display:flex;align-items:center;gap:4px;cursor:pointer}
.auth-remember input{
  appearance:none;-webkit-appearance:none;flex-shrink:0;width:20px;height:20px;padding:0;margin:0;
  background:url(../images/icons/checkbox.svg) center/20px 20px no-repeat;cursor:pointer;
}
.auth-remember input:checked{background-image:url(../images/icons/checkbox-on.svg)}
.auth-remember span{font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--ink);white-space:nowrap}
.auth-forgot{border:none;background:none;padding:0;font-family:var(--ff-jp);font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--gray);white-space:nowrap;cursor:pointer}
.auth-forgot:hover{color:var(--moss)}
.auth-plain-link{border:none;background:none;padding:0;font-family:var(--ff-jp);font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--gray);cursor:pointer;text-align:center;width:100%}
.auth-plain-link:hover{color:var(--moss)}
.auth-submit{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:52px;border:none;border-radius:40px;background:var(--moss);
  font-family:var(--ff-jp);font-size:15px;font-weight:500;letter-spacing:.08em;color:#fff;
  text-decoration:none;cursor:pointer;transition:background .25s ease;
}
.auth-submit:hover{background:var(--moss-deep)}
.auth-submit:disabled{cursor:default;opacity:.7}
.auth-divider{width:100%;border-top:1px solid var(--line)}
.auth-intro{display:flex;flex-direction:column;align-items:center;width:100%}
.auth-intro-label{font-size:13px;font-weight:500;letter-spacing:.08em;color:var(--gray);text-align:center}
.auth-intro-note{font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--gray);text-align:center;margin-top:8px}
.auth-intro-note span{color:var(--moss)}
.auth-cta-group{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:16px}
.auth-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:52px;
  border-radius:40px;background:#fff;font-family:var(--ff-jp);font-size:15px;font-weight:600;
  letter-spacing:.08em;border:none;cursor:pointer;transition:background .22s ease,color .22s ease;
}
.auth-btn-icon{position:relative;width:24px;height:24px;flex-shrink:0}
.auth-btn-icon img{position:absolute;inset:0;width:100%;height:100%}
.auth-btn-icon .ic-hover{opacity:0;transition:opacity .22s ease}
.auth-btn:hover .ic-hover{opacity:1}
.auth-btn--mail{border:1px solid var(--moss);color:var(--moss)}
.auth-btn--mail:hover{background:var(--moss);color:#fff}
.auth-btn--line{border:1px solid #06C755;color:#06C755}
.auth-btn--line:hover{background:#06C755;color:#fff}
.auth-btn--tel{border:1px solid var(--moss);color:var(--moss)}
.auth-btn--tel:hover{background:var(--moss);color:#fff}
/* 「Googleでログイン」（登録済みの会員だけ・2026-10-12〜）。Google の決まり（白地・グレーの細い枠・4色の G）に合わせ、
   マウスを載せても色を反転させない。出すかどうかは public/js/components.js が決める */
.auth-google{display:flex;flex-direction:column;gap:8px;width:100%}
.auth-google[hidden]{display:none}
.auth-google-note{font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--gray);text-align:center}
.auth-btn--google{border:1px solid #747775;color:#1f1f1f;font-weight:500}
.auth-btn--google:hover{background:#f7f8f8}
.auth-btn-google-icon{width:18px;height:18px;flex-shrink:0}
.auth-btn-tel-icon{flex-shrink:0}
/* 再設定で登録が見つからないときの電話・LINE。上のエラー文とひと続きに読ませるため、
   .auth-signup-actions の gap（16px）を詰めてエラー文の直下に寄せる */
.auth-contact{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:-16px}
.auth-contact[hidden]{display:none}
.auth-contact-note{font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--gray);text-align:center;margin-bottom:4px}
.auth-consent{font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--gray);text-align:center;line-height:1.6}
.auth-consent a{color:#0061AA;text-decoration:underline}
.auth-view{display:flex;flex-direction:column;align-items:center;gap:24px;width:100%}
.auth-view[hidden]{display:none}
.auth-title{font-size:24px;font-weight:700;letter-spacing:.08em;color:var(--ink);text-align:center;width:100%}
.auth-signup-fields{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}
.auth-signup-actions{display:flex;flex-direction:column;gap:16px;width:100%}
.auth-switch{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--gray)}
.auth-link-btn{border:none;background:none;padding:0;font:inherit;letter-spacing:inherit;color:var(--live);cursor:pointer}
.auth-link-btn:hover{opacity:.7}
.auth-btn-outline{
  width:100%;height:52px;border:1px solid var(--moss);border-radius:40px;background:#fff;
  font-family:var(--ff-jp);font-size:15px;font-weight:500;letter-spacing:.08em;color:var(--moss);
  cursor:pointer;transition:background .22s ease,color .22s ease;
}
.auth-btn-outline:hover{background:var(--moss);color:#fff}
.auth-sent-head{display:flex;flex-direction:column;gap:8px;width:100%}
.auth-sent-note{font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--gray);text-align:center;line-height:1.6}
.auth-sent-note b{color:var(--moss);font-weight:700}
.auth-sent-actions{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}
.auth-resend-toggle{border:none;background:none;padding:0;font-family:var(--ff-jp);font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--gray);cursor:pointer;transition:color .2s ease}
.auth-resend-toggle:hover{color:var(--moss)}
.auth-resend-panel{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;border-radius:8px;background:var(--moss-tint)}
.auth-resend-panel p{font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--gray);text-align:center;line-height:1.6}
.auth-resend-btn{
  border:1px solid var(--moss);border-radius:40px;background:#fff;padding:8px 24px;
  font-family:var(--ff-jp);font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--moss);
  cursor:pointer;transition:background .22s ease,color .22s ease;
}
.auth-resend-btn:hover{background:var(--moss);color:#fff}
.auth-resend-btn:disabled{opacity:.7;cursor:default}
.auth-reset-fields{display:flex;flex-direction:column;gap:8px;width:100%}
.auth-field-group{display:flex;flex-direction:column;gap:4px;width:100%}
.auth-field-label{font-size:13px;font-weight:500;letter-spacing:.08em;color:var(--gray)}
@media(max-width:540px){
  .auth-overlay{padding:16px}
  .auth-modal{padding:32px 24px;border-radius:16px}
  .auth-logo .logo-mark{width:64px;height:64px}
  .auth-logo .logo-word{font-size:28px}
  /* iOSはinputのfont-sizeが16px未満だとフォーカス時にページ全体を自動拡大するため、
     モーダル再表示時に拡大されたまま/右側に余白が残る不具合を防ぐ */
  .auth-input{font-size:16px}
}

/* ═══ 会員登録メール確認後のローディング（verify.html／Figma準拠） ═══ */
.verify-loading{
  position:fixed;inset:0;z-index:90;background:rgba(var(--moss-rgb),.7);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;
}
.verify-logo{display:flex;align-items:center;justify-content:center;gap:8px}
.verify-logo .logo-mark{width:80px;height:80px}
.verify-logo .logo-word{font-size:40px;color:#fff}
.verify-spinner{
  width:32px;height:32px;border-radius:50%;
  border:3px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:verify-spin .8s linear infinite;
}
@keyframes verify-spin{to{transform:rotate(360deg)}}
@media(max-width:540px){
  .verify-logo .logo-mark{width:64px;height:64px}
  .verify-logo .logo-word{font-size:28px}
}

/* ═══ ヒーロー（Figma準拠） ═══ */
.hero{position:relative;height:480px;background:var(--paper)}
.hero-bg{position:absolute;left:8px;right:8px;top:8px;bottom:0;border-radius:16px;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover;filter:blur(8px);transform:scale(1.08)}
.hero-bg::after{content:"";position:absolute;inset:0;background:rgba(var(--hero-tint-rgb),.54)}
.hero-photo{position:absolute;left:57.78%;top:10%;width:33.33%;height:66.67%;border-radius:16px;overflow:hidden;z-index:1}
.hero-photo-img{width:100%;height:100%;object-fit:cover}
.hero-illust-people{
  position:absolute;left:5%;top:25%;width:30%;aspect-ratio:375/624;
  z-index:1;pointer-events:none;
}
.hero-illust-bike{
  position:absolute;right:1.7%;bottom:0;width:33.3%;aspect-ratio:411/288;
  z-index:1;pointer-events:none;
}
.hero-photo::after{content:"";position:absolute;inset:0;background:rgba(var(--moss-rgb),.1);z-index:2}
.hero-copy{position:absolute;left:0;right:0;top:116px;z-index:2}
.hero-copy h1{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.hero-copy h1 span{
  display:inline-block;background:var(--hero-band);color:#fff;
  padding:0 8px;border-radius:4px;font-weight:600;font-size:48px;
  letter-spacing:.08em;line-height:1.4;
}
/* ⚠ 説明文は右の写真カード（左端 57.78%）の手前で折り返す。以前は nowrap で1行に伸ばしていて、
     1440px 幅で写真の上に重なり、大阪（墨の文字）では後半が写真に埋もれて読めなかった（2026-09-29）。
     オーナー・閉業のページ（.page-owner 等）と同じ幅の決め方 */
.hero-copy p{
  margin-top:16px;font-weight:500;font-size:16px;color:#fff;
  letter-spacing:.08em;line-height:1.6;max-width:min(600px,52vw);white-space:normal;
}

/* ═══ 検索パネル ═══ */
.search-panel{
  position:relative;z-index:3;max-width:1056px;margin:-80px auto 0;
  background:#fff;border-radius:16px;
  padding:24px 32px 24px;box-shadow:8px 8px 16px rgba(var(--shadow-rgb),.16);
}
.sp-tabs{
  display:flex;gap:24px;border-bottom:1px solid var(--line);margin-bottom:24px;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent 100%);
  mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent 100%);
}
.sp-tabs::-webkit-scrollbar{display:none}
.sp-tab{
  font-family:var(--ff-jp);font-size:16px;letter-spacing:.08em;line-height:1.4;
  padding:0 0 10px;color:#8A8883;background:none;border:none;white-space:nowrap;
  border-bottom:2px solid transparent;cursor:pointer;transition:color .22s ease,border-color .22s ease;
}
.sp-tab:hover{color:var(--moss)}
.sp-tab.on{color:var(--moss);border-color:var(--moss);font-weight:600}
.sp-tab:focus-visible{outline:2px solid var(--moss);outline-offset:3px;border-radius:2px}
.sp-tab .n{margin-left:4px;font-size:16px;font-weight:400;letter-spacing:.08em;color:var(--gray-light)}
.sp-tab.on .n{color:var(--moss)}
.search-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;transition:opacity .22s ease}
.search-row.swap{opacity:0}
.field{position:relative;min-width:0}
.field label{display:block;font-size:12px;letter-spacing:.16em;color:#9B9892;margin-bottom:8px;font-family:var(--ff-en);font-weight:500}
.field .box{
  width:100%;border:none;border-radius:4px;padding:16px;font-size:15px;
  font-family:var(--ff-jp);color:var(--gray);display:flex;justify-content:space-between;align-items:center;gap:8px;
  background:#F5F3EF;cursor:pointer;
}
.field .box .box-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.field .box svg{flex-shrink:0}
.field .box.filled{color:var(--ink)}

/* 検索フィールドのドロップダウン */
.opt-panel{
  position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:20;
  background:#fff;border:1px solid var(--line);border-radius:3px;
  box-shadow:0 8px 30px rgba(var(--shadow-rgb),.10);padding:8px;max-height:280px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.opt-panel::-webkit-scrollbar{width:6px}
.opt-panel::-webkit-scrollbar-track{background:transparent}
.opt-panel::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.opt{
  display:block;width:100%;text-align:left;border:none;background:none;border-radius:2px;
  padding:8px 8px;font-family:var(--ff-jp);font-size:14px;letter-spacing:.04em;color:var(--ink);
  cursor:pointer;transition:background .18s ease;
}
.opt:hover{background:var(--cream-2)}
.opt.on{color:var(--moss);font-weight:500;background:var(--moss-tint)}
.opt.opt-check{display:flex;align-items:center;gap:4px;cursor:pointer;color:var(--gray)}
.field[data-key="AREA"] .opt-check{background:var(--cream-2)}
.opt-check input{accent-color:var(--moss)}
.opt-foot{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);display:flex;justify-content:flex-end}
.opt-apply{
  background:var(--moss);color:#fff;border:none;border-radius:2px;padding:8px 16px;
  font-family:var(--ff-jp);font-size:13px;letter-spacing:.08em;cursor:pointer;transition:background .22s ease;
}
.opt-apply:hover{background:var(--moss-deep)}

/* 常時展開の絞り込みグループ（さがすページのサイドバー用）。実際のレイアウト定義は
   このページ専用スタイル（.se-side配下）にまとめてあり、ここではfg-bodyの間隔のみ */
.fg-body{display:flex;flex-direction:column;gap:10px}
.fg-body .opt-check{padding:0;margin-bottom:0}
.search-foot{display:flex;align-items:center;justify-content:space-between;margin-top:16px;gap:16px}
/* TOPの「詳細検索はこちら」。検索ボタンの下に右寄せの文字リンクで置く（主役はあくまでボタン） */
.sp-adv{margin-top:10px;text-align:right}
.sp-adv-link{font-size:13px;letter-spacing:.04em;color:var(--moss);text-decoration:underline;text-underline-offset:3px}
.sp-adv-link:hover{color:var(--moss-deep)}
.hit{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--gray);letter-spacing:.08em}
.hit b{font-family:var(--ff-en);font-size:40px;font-weight:800;letter-spacing:.02em;color:var(--live)}
.btn-search{
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--moss);color:#fff;border:none;border-radius:4px;
  padding:16px 32px;font-family:var(--ff-jp);font-size:15px;letter-spacing:.16em;
  cursor:pointer;transition:background .25s ease;
}
.btn-search:hover{background:var(--moss-hover)}
/* 検索ボタンの中の件数（さがすページの #se-apply だけ）。条件を触るたびここが動き、
   押すと一覧がこの件数に入れ替わる。TOPの検索パネルのボタンには付けていない */
.btn-search-n{font-size:13px;font-weight:600;letter-spacing:.06em}
.btn-search-n .en{font-size:15px;font-weight:700;letter-spacing:.02em;margin-right:1px}
/* まだ押していない条件変更があるあいだの印。件数だけ動いて一覧が変わらない状態を
   「壊れている」と読ませないよう、押せることを目立たせる */
.btn-search.is-dirty{background:var(--moss-hover);box-shadow:0 0 0 3px rgba(var(--moss-rgb),.2)}

/* ═══ ライブバー（署名要素） ═══ */
.livebar{
  margin-top:24px;
  background:var(--moss-tint);
}
.livebar-inner{
  max-width:1120px;margin:0 auto;padding:20px 32px;
  display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap;
}
/* ライブドット（ソナー波紋）: OSEKKAI ROOMsの .c-badge__dot / .c-live__dot 準拠 */
.badge-live{
  display:inline-flex;align-items:center;gap:4px;padding:4px 8px;
  border-radius:40px;overflow:hidden;background:var(--live-pale);
}
.live-chip{
  display:inline-flex;align-items:center;gap:6px;padding:8px 24px;margin-right:28px;
  border-radius:40px;overflow:hidden;background:#fff;font-size:16px;letter-spacing:.08em;
  color:var(--live);font-weight:600;box-shadow:0 2px 6px rgba(var(--shadow-rgb),.1);
}
.sonar{position:relative;width:7px;height:7px;flex-shrink:0}
.sonar i{position:absolute;inset:0;border-radius:50%;background:var(--live)}
.sonar i::after{
  content:"";position:absolute;inset:0;border-radius:50%;background:var(--live);
  animation:sonar 2s cubic-bezier(.2,.5,.4,1) infinite;
}
@keyframes sonar{0%{transform:scale(1);opacity:.4}70%,100%{transform:scale(3.6);opacity:0}}
.live-stat{
  font-size:16px;font-weight:500;color:var(--ink);letter-spacing:.08em;display:flex;align-items:center;gap:8px;
  padding:0 24px;border-left:1px solid rgba(var(--shadow-rgb),.14);
}
.live-stat--tight{gap:4px}
.live-stat b{font-family:var(--ff-en);font-size:40px;font-weight:800;letter-spacing:.02em;color:var(--live)}

/* 業種チップ */
.uses{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.uses .lbl{font-size:13px;letter-spacing:.08em;color:var(--gray-light);margin-right:8px;font-family:var(--ff-en);font-weight:600}
.chip{
  border:1px solid var(--line);border-radius:99px;padding:8px 16px;font-size:14px;
  letter-spacing:.08em;color:var(--ink);background:#fff;transition:all .22s ease;
}
.chip:hover{border-color:var(--moss);color:var(--moss);background:var(--moss-tint)}
.chip.alt{border-style:dashed;color:var(--gray)}
.chip.alt:hover{border-style:dashed;border-color:var(--moss);color:var(--moss)}
.chip .num{font-family:var(--ff-en);font-size:12px;color:var(--gray-light);margin-left:8px}

/* ═══ 物件カード ═══ */
.rail{display:flex;gap:16px;overflow-x:auto;padding-bottom:24px;scroll-snap-type:x mandatory;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.card{flex:0 0 320px;scroll-snap-align:start}
.card-fig{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:3px;background:var(--cream)}
.card-fig img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
/* 1枚目が間取り図の掲載（本番9件）。写真と縦横比が違うので cover だと四辺が欠ける。
   図面だけ全体を収める（詳細ページの .gallery-main img.is-drawing と同じ扱い）。
   ⚠ **未公開物件（.card-locked）にも付ける。** 間取り図は物件名が写らないので、
      未公開でもぼかさず素通しで配っている（cloud 側で判定）。ここだけ切り抜くと、
      せっかく読める唯一の絵の四辺が欠ける。 */
.card-fig img.is-drawing{object-fit:contain;background:#fff}
.card:hover .card-fig img{transform:scale(1.04)}
.badge{
  position:absolute;left:8px;top:8px;background:#fff;
  box-shadow:0 0 1px rgba(204,204,204,.4);
  font-size:12px;line-height:1.4;letter-spacing:.08em;padding:2px 6px;
  border-radius:4px;color:#666;font-weight:500;white-space:nowrap;
}
.fav{
  position:absolute;right:8px;top:8px;z-index:2;width:32px;height:32px;border:none;
  background:none;display:grid;place-items:center;cursor:pointer;
}
/* OSEKKAI ROOMsと同じ手法：見た目は32x32のまま、指の当たりだけ44px（Appleの推奨最小値）まで
   透明な::beforeで広げる。カード画像は最低でも100px超あるため、はみ出してoverflow:hiddenに
   切られる心配はない（ROOMsの24pxアイコンと違い、こちらは32pxなので広げ幅も6pxで済む） */
.fav::before{
  content:"";position:absolute;top:50%;left:50%;width:100%;height:100%;
  min-width:44px;min-height:44px;transform:translate(-50%,-50%);
}

/* お気に入りページで、FC物件由来のカードと一般物件を見分けるための追加バッジ
   （js/franchise.jsのbuildFavCardSnapshotが出力。.badgeは単体では絶対配置のため、
   並べて置く場合はこの.scard-badgesでラップしてstaticに戻す）。
   物件カードの札（未公開物件＋募集開始）も同じ仕組みで並べる
   （src/components/CardBadges.astro・js/search.js・js/detail.js）。

   **横並び。** 縦に積むと札が写真の左辺を上から下へ覆い、いちばん見せたい建物の顔が隠れる。
   ⚠ 入りきらないときは折り返す（wrap）。1行に押し込むと札の文字が縮んで読めなくなる。
   ⚠ 右上のお気に入りハート（32px＋余白）に重ねないこと。max-width はその逃げ幅。 */
.scard-badges{
  position:absolute;left:8px;top:8px;z-index:1;display:flex;flex-wrap:wrap;
  align-items:center;gap:4px;max-width:calc(100% - 56px);
}
.scard-badges .badge{position:static}

/* 未公開物件の札。**在庫の8割がこの札を付けて並ぶ**ので、ここだけは他の札（白地・グレー文字の
   「スケルトン」「1階・路面店」）と同じ顔にしない。深緑地に金の細い縁で、見せていない物件の
   ほうが値打ちがあると読ませる。
   ⚠ 色は既存のトークン内（--moss-deep / --warn）に収めること。札のためだけに色を増やすと、
   1枚のカードに緑・金・赤が並んで安っぽくなる。 */
.badge-members{
  background:var(--moss-deep);color:#fff;font-weight:600;
  border:1px solid rgba(180,129,63,.55);
  box-shadow:0 1px 6px rgba(var(--moss-deep-rgb),.28);
  letter-spacing:.06em;
}

/* 「本日募集開始」。文言は閲覧時にJSが入れる（src/lib/freshness.ts）ので、
   **中身が空のまま出ることがある**——入るまでは hidden が付いている。
   金地にしているのは未公開物件の札の縁と揃えるため（同じ金を、片方は縁・片方は地に使う）。

   斜めのグラデーションと内側の白いハイライトで、平らな面ではなく**金のプレート**として見せる。
   単色（旧 --warn-deep）だとくすんだ茶色に見え、いちばん目に入る札が地味になっていた。
   ⚠ 文字は焦茶（--gold-ink）。白に戻さないこと（明るい金の上で溶ける・トークンの注意書き参照）。 */
.badge-fresh{
  background:linear-gradient(160deg,
    var(--gold-hi) 0%,var(--gold-lit) 22%,var(--gold) 48%,var(--gold-shade) 72%,var(--gold-lit) 100%);
  color:var(--gold-ink);font-weight:700;
  box-shadow:0 1px 6px rgba(120,90,20,.38),
    inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(120,90,20,.35);
  letter-spacing:.06em;
}

/* 「早い者勝ちです！」。札に入れるとカードの幅（PCで横4列・1枚268px）に収まらないので、
   写真の下の行（.card-stat）へ分けている。**急かす言葉なので色は敷かない**——
   「募集中」の緑バッジの隣で赤や金を敷くと、1行に色が3つ並んで広告のように見える。 */
.card-urge{
  font-size:12px;line-height:1.4;letter-spacing:.04em;color:var(--warn-deep);font-weight:600;
  white-space:nowrap;
}
.badge-fc{
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(var(--moss-rgb),.8);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  box-shadow:0 0 2px 0 rgba(204,204,204,.40);
  font-size:12px;line-height:1.4;letter-spacing:.08em;padding:2px 6px;
  border-radius:4px;color:#fff;font-weight:500;white-space:nowrap;
}
.scard-badges .badge-fc svg{display:block;width:16px;height:16px}
/* 線と塗りをCSSで切り替えるため、ハートはインラインSVGで置いている */
.fav-icon{display:block;width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.5;transition:fill .15s ease,stroke .15s ease}
.fav[aria-pressed="true"] .fav-icon{fill:var(--favorite);stroke:var(--favorite)}

/* お気に入り追加時のトースト（お気に入りページ以外の全ページ共通。js/app.js制御。1つのみ使い回す） */
.fav-toast{
  position:fixed;left:50%;bottom:24px;z-index:200;max-width:calc(100% - 32px);
  display:flex;align-items:center;gap:24px;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  background:rgba(147,153,158,.4);border-radius:8px;padding:16px;
  opacity:0;pointer-events:none;transform:translate(-50%,16px);transition:opacity .25s ease,transform .25s ease;
}
.fav-toast.is-show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.fav-toast-msg{display:flex;align-items:center;gap:4px;flex-shrink:0;font-family:var(--ff-jp);font-size:14px;font-weight:500;letter-spacing:.08em;line-height:1.4;color:var(--ink);white-space:nowrap}
.fav-toast-msg svg{display:block;width:20px;height:20px;flex-shrink:0;fill:var(--favorite)}
.fav-toast-link{flex-shrink:0;font-family:var(--ff-jp);font-size:14px;font-weight:500;letter-spacing:.08em;line-height:1.4;color:var(--ink);text-decoration:underline;white-space:nowrap;-webkit-tap-highlight-color:transparent}
@media(max-width:540px){
  .fav-toast{gap:12px;padding:12px}
  .fav-toast-msg,.fav-toast-link{font-size:13px}
}
/* 会員の ♡（パーソナルサイトの候補にも入る・2026-10-13〜）は文言が長いので、入らなければ折り返す。
   ハートは1行目の頭にそろえ、「開く」は折り返さない */
.fav-toast.is-personal-site .fav-toast-msg{flex-shrink:1;white-space:normal;align-items:flex-start}
.fav-toast.is-personal-site .fav-toast-msg svg{margin-top:-1px}

.card-body{padding:16px 8px 0}
/* 「募集中」バッジ＋「空室確認 ◯分前」。狭い幅で1行に入りきらないとき、.badge-live の
   overflow:hidden でバッジの文字が切れてしまうため、切らずに2行へ折り返す。
   row-gap は gap の後に置くこと（先に書くと gap:8px に上書きされて行間が空きすぎる） */
.card-stat{display:flex;align-items:center;flex-wrap:wrap;gap:8px;row-gap:2px}
.card-stat .badge-live{font-size:12px;letter-spacing:.02em;color:var(--live);font-weight:500}
.card-stat .sonar{width:6px;height:6px}
/* 完売（募集終了）の札。募集中の緑と取り違えられないよう灰色にする。
   点滅する丸（.sonar）は出さないので、そのぶん左右の余白を足して形を揃える。
   `.card-stat .badge-live` と詳細度が同じなので、必ずこの後ろに置くこと */
.badge-live--ended{background:var(--line)}
.card-stat .badge-live--ended{color:var(--gray);padding-left:10px;padding-right:10px}
/* ⚠ **行間を 1.8 に戻さないこと。** 1行しか入らない行に文章向けの行間を当てると、
   文字は同じなのに行の箱だけが 23px に膨らむ（13px の文字に対して上下 5px ずつ）。
   カードに「対応可能業種」の帯を足したぶんを、この手の余りで返している（2026-09-22）。 */
.card-checked{font-size:13px;color:var(--gray);letter-spacing:.04em;line-height:1.5}
.card-ttl{margin-top:6px;font-size:20px;font-weight:600;letter-spacing:.08em;line-height:1.35;min-height:3em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.scard .card-ttl{min-height:0;color:var(--ink-2)}
/* 見出し（セールスポイント）の下に出す物件名の行。見出しより一段落として、
   カードの主役があくまで見出しであることが分かるようにする。
   1行に収める（同じビルの別区画で名前が長いとき、ここが伸びてカードの高さが揃わなくなる）。

   ⚠ **この行は出ない掲載がある**（セールスポイントが未生成のとき）。本番1,630件を書き終えるまで
   「出る掲載」と「出ない掲載」が横に並ぶので、素直に条件表示すると価格の高さが1段ズレる。
   そこで `.card-body` 側で1行ぶんの高さを常に確保し、行の有無で位置が動かないようにする
   （`.card-sub` 自体に min-height を付けても、要素ごと無い掲載では効かないため）。 */
.card-sub{margin-top:2px;font-size:14px;font-weight:500;letter-spacing:.04em;line-height:1.45;color:var(--gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 物件名の行のぶん（margin-top 2px + 14px×1.45）を、行が無いカードにも空けておく。
   見出しの次に来る要素はカードの種類で違う（TOP新着・類似＝.card-price／検索結果・閲覧履歴＝.card-spec）
   ので両方を書く。`.card-sub` があるカードでは隣接セレクタが外れ、通常の 8px に戻る。
   ※ `:has()` を使えば1本で書けるが、対応していない環境で**空けた高さだけが効かず**
      ズレが残る（壊れ方が静かなので採らない） */
.card-ttl + .card-price,
.card-ttl + .card-spec{margin-top:calc(6px + 2px + 14px * 1.45)}
/* マイページのカードだけは例外。まだダミーデータ（js/mypage.js の RECO_PROPS）で、
   物件名の行を持つ掲載と並ぶことが無いため、空けても隙間が開くだけになる。
   実データへ差し替えるときにこの打ち消しを消すこと */
.page-mypage .card-ttl + .card-spec{margin-top:6px}
.card-price{margin-top:6px;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.card-price .num{font-family:var(--ff-en);font-size:26px;font-weight:800;color:var(--moss);letter-spacing:.02em}
/* 賃料が要確認の物件（lib/card の rentNeedsCheck）。金額の代わりに「賃料は要問合せ」 */
.card-price .num--ask{font-family:var(--ff-jp);font-size:16px;font-weight:700}
.card-price .unit{font-size:14px;color:var(--gray);letter-spacing:.02em}
.card-price .tsubo{font-size:14px;color:var(--gray);letter-spacing:.02em;margin-left:auto}
.card-price .fee{width:100%;font-size:14px;color:var(--gray);letter-spacing:.04em;line-height:1.4}
.card-spec{margin-top:6px;font-size:14px;color:var(--gray);letter-spacing:.04em;line-height:1.5}
/* 業種可否 */
.uselist{margin-top:8px;display:flex;gap:0;border-radius:2px;overflow:hidden}
.uselist div{flex:1;text-align:center;padding:8px 0;font-size:13px;letter-spacing:.04em;color:var(--gray-light);line-height:1.5}
.uselist div .mk{display:block;font-family:var(--ff-en);font-size:14px;font-weight:600}
.uselist div.ok{color:var(--moss);background:var(--moss-tint)}
.uselist div.ask{color:#C77A52}
.uselist div.ng{color:#C6C3BC}
/* 未入力（＝オーナーに確認すれば分かる。文言は card.ts の UNKNOWN_MARK＝「応相談」）。
   ×（.ng）と見分けがつくよう、薄い地色を敷いたうえで**文字も読める濃さ**にする。
   以前は薄いグレー（--gray-light）で、地色を敷いても×と同じ「消えている」見え方になり
   「調べた結果ダメだった」と読まれていた。◯の緑・△のオレンジとも重ならない中間色にしている。
   「応相談」は和文なので欧文フォント（--ff-en）は当てず、幅に収まるよう小さめにする */
.uselist div.unk{color:var(--ink-2);background:var(--cream)}
.uselist div.unk .mk{font-family:inherit;font-size:11px;font-weight:500;letter-spacing:0}

/* ═══ カードの「対応可能業種」 ═══
   物件詳細の同名セクション（.dtl-industry）を、カードに収まる形へ削ったもの。
   出すのは「できます」だけで、残りは注記1行が受ける（理由は CardIndustryTags.astro）。

   ⚠ **区切り線は引かない。** すぐ上の賃料と離すのが目的なので、余白だけで足りる。
      線を引くと1枚のカードの中に横線が増え、狭い幅では切り分けが多すぎて騒がしくなる。
   ⚠ **「できます」のラベルを別の列にしないこと。** 左に固定列を作ると、2行目以降のチップが
      その幅ぶん内側に押し込まれ、同じ中身で1行余計に折り返す（実測で1枚あたり20px）。
      ラベルもチップと同じ流れに置き、行頭に1回だけ出す。 */
.card-ind{margin-top:7px;display:flex;flex-direction:column;gap:2px;min-width:0}
.card-ind-row{display:flex;flex-wrap:wrap;align-items:center;gap:3px;min-width:0}
/* ⚠ **`--live` を使わないこと。** 白地に置くとコントラスト比 3.2:1 で、11px では読めない
   （このファイルの他の箇所と同じく、読みやすさの目安は 4.5:1）。`--moss` なら 6.4:1。
   ⚠ チップと同じ色になるが、緑の段差は**札の塗り**が付けるので見分けは残る。 */
.card-ind-label{display:inline-flex;align-items:center;height:19px;margin-right:2px;font-size:11px;font-weight:600;letter-spacing:0;color:var(--moss);white-space:nowrap}
/* 塗りは詳細ページの「できます」と同じ #EDF9F5。枠も塗りと同色にして、小さい札が
   輪郭で目立ちすぎないようにする（枠は残す。太さが変わると行の高さがずれる） */
.card-ind-tag{display:inline-flex;align-items:center;height:19px;padding:0 5px;border:1px solid var(--mint);border-radius:3px;background:var(--mint);font-size:11px;font-weight:600;letter-spacing:0;color:var(--moss);white-space:nowrap}
/* ⚠ **12px に上げないこと。** 文言が28文字あり、12px だと2行に折り返してカードが20px伸びる
   （11px なら 300px 弱の幅に1行で収まる）。短くするなら文言のほうを短くすること。 */
.card-ind-note{margin:0;font-size:11px;line-height:1.6;color:var(--gray);letter-spacing:0}

/* ═══ 新着物件・未公開物件カード ═══
   未公開物件の写真は **cloud がぼかしを焼き込んだ別画像**（長辺20pxまで潰したもの）に
   差し替えて配られてくる。ブラウザが引き伸ばすときに滑らかに補間するので、ここでぼかす必要はない。

   ⚠ **CSS で filter:blur() を足さないこと。** 二重にぼけて何も分からない箱になるうえ、
      素通しで配っている**間取り図まで読めなくなる**（未公開物件で唯一そのまま見せている絵）。
   ⚠ **image-rendering:pixelated を当てないこと。** 20px の絵が四角いモザイクとして出る。
      滑らかに見えているのはブラウザの補間のおかげで、その補間を切ってしまう。
   ⚠ 2026-09-22 まではここで blur(10px) を掛けていた。当時は**鮮明な元画像がそのまま配信されており**、
      表示の加工でしか隠せていなかった（開発者ツールから原寸が取り出せた）。隠すなら配信の時点で潰すこと。 */
.card-locked{position:relative}
.card-locked .card-body{position:relative;padding-left:0;padding-right:0}

/* 未公開物件の写真の中央に置く鍵マーク。ぼかしただけだと「準備中の空カード」に見えるため、
   伏せてあることを一目で分かるようにする印。TOPの .card-locked と検索結果の .scard-locked で
   同じものを使い回すので、どちらの写真枠（.card-fig / .scard-fig。ともに position:relative）に
   置いても中央に来るよう inset:0 で敷いている。
   ⚠ クリックはカード全体（親の<a>）に通すこと。pointer-events を外すとここだけリンクが死ぬ。
   意味は左上の「未公開物件（会員限定公開）」の札が伝えているので、読み上げからは除く（装飾扱い）。 */
.lock-mark{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.lock-mark span{
  display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  box-shadow:0 2px 12px rgba(var(--moss-deep-rgb),.16);
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s ease;
}
.lock-mark svg{display:block;width:24px;height:24px;fill:none;stroke:var(--moss);stroke-width:1.5}
.card-locked:hover .lock-mark span,
.scard-locked:hover .lock-mark span{transform:scale(1.06);box-shadow:0 4px 16px rgba(var(--moss-deep-rgb),.22)}
/* 1枚目が間取り図のカードでは鍵マークを出さない。
   間取り図は未公開物件で**唯一そのまま読ませている絵**なので、中央に56pxの丸を置くと
   いちばん見せたい部分（間取り・区画）が隠れる。伏せてあることは左上の札が伝えている。 */
.card-fig:has(img.is-drawing) .lock-mark,
.scard-fig:has(img.is-drawing) .lock-mark{display:none}

.cat-note{margin-top:24px;font-size:12px;letter-spacing:.04em;color:var(--gray);line-height:1.8}

/* ═══ 探す入口のカード（TOP「開店・開業する業種から探す」「こだわりからさがす」共用） ═══
   同じ「探す入口」なので、2つのセクションはまったく同じカードで組む。
   業種で押すのはグループ。細かい業種は説明文として下に添えるだけで、押せるリンクにはしない
   （判定がグループ単位なので、業種を個別に押しても結果が変わらない）。
   1行3枚・どちらも10枚なので最終行は1枚になる。左詰めのままでよい（中央寄せにすると
   他のセクションと左端が揃わなくなる）。 */
.ind-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ind-card{
  display:flex;align-items:flex-start;gap:14px;min-width:0;
  padding:18px 20px;border:1px solid var(--line);border-radius:4px;background:#fff;
  transition:border-color .22s ease,background .22s ease;
}
.ind-card:hover{border-color:var(--moss);background:var(--cream-2)}
.ind-card-illust{flex:none;width:56px;height:42px;display:block}
.ind-card-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.ind-card-name{font-size:16px;font-weight:500;letter-spacing:.08em;color:var(--moss)}
.ind-card-items{font-size:12px;letter-spacing:.04em;color:var(--gray);line-height:1.7}
/* 件数はこだわりだけが出す（業種は同グループで同じ数字になるので出さない）。
   説明文の下に小さく置く。0件は要素ごと出ない */
.ind-card-count{font-family:var(--ff-en);font-size:13px;letter-spacing:.04em;color:var(--gray)}

/* ═══ 未公開バンド ═══ */
.limited{margin-top:80px;background:var(--moss);color:#fff;padding:56px 0}
.limited-inner{display:flex;align-items:center;gap:48px;justify-content:space-between}
.limited .eyebrow{color:rgba(255,255,255,.75)}
.limited h2{font-size:32px;font-weight:700;letter-spacing:.08em;line-height:1.5}
.limited p{margin-top:16px;font-size:15px;color:rgba(255,255,255,.9);letter-spacing:.04em;line-height:1.75;max-width:520px}
.btn-ghost{
  display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--moss);
  padding:16px 32px;border-radius:3px;font-size:15px;letter-spacing:.08em;font-weight:500;
  white-space:nowrap;transition:opacity .25s ease;
}
.btn-ghost:hover{opacity:.85}
.mb-list{margin-top:16px;display:grid;gap:8px 24px;grid-template-columns:1fr 1fr}
.mb-list li{font-size:14px;color:rgba(255,255,255,.92);letter-spacing:.02em;padding-left:16px;position:relative;line-height:1.75}
.mb-list li::before{content:"";position:absolute;left:0;top:16px;width:8px;height:1px;background:rgba(255,255,255,.55)}
.mb-list li b{font-family:var(--ff-en);font-size:16px;font-weight:800;margin:0 8px}
.mb-act{display:flex;flex-direction:column;gap:8px;flex-shrink:0}
.btn-outline-w{
  display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.55);
  color:#fff;padding:16px 32px;border-radius:3px;font-size:14px;letter-spacing:.08em;
  transition:background .25s ease;white-space:nowrap;
}
.btn-outline-w:hover{background:rgba(255,255,255,.12)}
.mb-note{font-size:13px;color:rgba(255,255,255,.75);letter-spacing:.03em;text-align:center}
.mb-note a{border-bottom:1px solid rgba(255,255,255,.6)}

/* ═══ エリア（23区） ═══ */
.ward-lead{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px}
.ward-big{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:3px}
.ward-big img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.ward-big:hover img{transform:scale(1.05)}
.ward-big::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--moss-deep-rgb),0) 42%,rgba(var(--moss-deep-rgb),.74) 100%)}
.wb-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px;color:#fff}
.wb-cap .we{font-family:var(--ff-en);font-size:12px;letter-spacing:.2em;opacity:.72;text-transform:uppercase}
.wb-cap .wn{font-size:18px;font-weight:500;letter-spacing:.08em}
.wb-cap .wc{font-size:14px;opacity:.82;margin-top:8px;letter-spacing:.04em}
.ward-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.ward{
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:16px 16px;display:flex;justify-content:space-between;align-items:center;gap:8px;
  transition:background .22s ease;
}
.ward:hover{background:var(--cream-2)}
.ward:hover .wl{color:var(--moss)}
.ward .wl{font-size:15px;letter-spacing:.08em;white-space:nowrap}
/* 掲載0件の区・こだわり（AreaGrid / FeatureGrid）。リンクを外して押せなくし、薄く出す */
.ward.is-empty,.ward-big.is-empty,.ind-card.is-empty{cursor:default;opacity:.55;pointer-events:none}
.ward.is-empty .wq{font-size:12px}
.ward .wq{font-family:var(--ff-en);font-size:14px;color:var(--gray)}

/* ═══ 3つの約束 ═══ */
.promise{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pr-media{width:100%;aspect-ratio:4/3;border-radius:8px;background:var(--line);overflow:hidden}
.pr-media.pr-media-anim1,.pr-media.pr-media-anim2,.pr-media.pr-media-anim3{background:linear-gradient(155deg,#F4F7EA 0%,var(--mint) 100%)}
.pr-media-anim1 svg,.pr-media-anim2 svg,.pr-media-anim3 svg{width:100%;height:100%;display:block}
.pr h3{margin-top:24px;font-size:22px;font-weight:600;letter-spacing:.08em;line-height:1.4;color:var(--moss)}
.pr p{margin-top:16px;font-size:16px;color:var(--ink);letter-spacing:.08em;line-height:1.6}

@keyframes s1ca{0%,10%{opacity:0;transform:scale(.4)}16%{opacity:1;transform:scale(1.25)}21%,86%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(.4)}}
@keyframes s1cc{0%,42%{opacity:0;transform:scale(.4)}48%{opacity:1;transform:scale(1.25)}53%,86%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(.4)}}
@keyframes s1x{0%,26%{opacity:0;transform:scale(.6)}33%{opacity:1;transform:scale(1.12)}38%,86%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(.6)}}
@keyframes s1dim{0%,26%{opacity:1}36%,86%{opacity:.36}94%,100%{opacity:1}}
@keyframes s1pulse{0%{transform:scale(.5);opacity:.55}100%{transform:scale(5.4);opacity:0}}
@keyframes s1prog{0%,4%{transform:scaleX(0)}52%,86%{transform:scaleX(1)}94%,100%{transform:scaleX(0)}}
.s1-check-a{opacity:0;transform-box:view-box;transform-origin:108px 189px;animation:s1ca 4s ease-out infinite}
.s1-check-c{opacity:0;transform-box:view-box;transform-origin:352px 189px;animation:s1cc 4s ease-out infinite}
.s1-x{opacity:0;transform-box:view-box;transform-origin:230px 189px;animation:s1x 4s ease-out infinite}
.s1-dim{animation:s1dim 4s ease-out infinite}
.s1-pulse{transform-box:view-box;transform-origin:46px 62px;animation:s1pulse 2s linear infinite}
.s1-pulse-delay{animation-delay:-1s}
.s1-prog{transform-box:view-box;transform-origin:26px 248px;animation:s1prog 4s cubic-bezier(.33,0,.25,1) infinite}

@keyframes s2dash{0%,42%{opacity:1}52%,88%{opacity:0}95%,100%{opacity:1}}
@keyframes s2r1{0%,44%{opacity:0;transform:translateY(18px) scale(.97)}54%{opacity:1;transform:translateY(-5px) scale(1)}59%,88%{opacity:1;transform:translateY(0) scale(1)}94%,100%{opacity:0;transform:translateY(18px) scale(.97)}}
@keyframes s2lock{0%,40%{opacity:1}50%,88%{opacity:0}95%,100%{opacity:1}}
@keyframes s2sh{0%,22%{transform:translateY(0) rotate(0deg)}25%{transform:translateY(1.5px) rotate(0deg)}28%{transform:translateY(0) rotate(0deg)}36%{transform:translateY(-14px) rotate(0deg)}44%,66%{transform:translateY(-14px) rotate(20deg)}74%,100%{transform:translateY(0) rotate(0deg)}}
@keyframes s2ring{0%,38%{opacity:0;transform:scale(.86)}47%{opacity:.42;transform:scale(1.12)}62%,100%{opacity:0;transform:scale(1.3)}}
.s2-dash{transform-box:view-box;animation:s2dash 4s ease-out infinite}
.s2-r1{opacity:0;transform-box:view-box;animation:s2r1 4s cubic-bezier(.34,1.3,.5,1) infinite}
.s2-lock{animation:s2lock 4s ease-out infinite}
.s2-ring{transform-box:view-box;transform-origin:200px 145px;animation:s2ring 4s ease-out infinite}
.s2-shackle{transform-box:view-box;transform-origin:209.3px 142.5px;animation:s2sh 4s cubic-bezier(.3,1.35,.5,1) infinite}

@keyframes s3doc{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes s3sign{0%,14%{stroke-dashoffset:120;opacity:1}34%,88%{stroke-dashoffset:0;opacity:1}95%{opacity:0;stroke-dashoffset:0}96%,100%{opacity:0;stroke-dashoffset:120}}
@keyframes s3stamp{0%,44%{opacity:0;transform:scale(2.3) rotate(-22deg)}51%{opacity:1;transform:scale(1) rotate(-9deg)}55%,88%{opacity:1;transform:scale(1) rotate(-9deg)}95%,100%{opacity:0;transform:scale(1) rotate(-9deg)}}
@keyframes s3shock{0%,54%{opacity:0;transform:scale(.55)}58%{opacity:.5;transform:scale(1)}72%,100%{opacity:0;transform:scale(1.9)}}
.s3-doc{animation:s3doc 4s ease-in-out infinite}
.s3-sign{stroke-dasharray:120;stroke-dashoffset:120;animation:s3sign 4s cubic-bezier(.4,0,.3,1) infinite}
.s3-shock{opacity:0;transform-box:view-box;transform-origin:252px 228px;animation:s3shock 4s ease-out infinite}
.s3-stamp{opacity:0;transform-box:view-box;transform-origin:252px 228px;animation:s3stamp 4s cubic-bezier(.3,1.5,.4,1) infinite}

/* ═══ 担当するエージェント ═══ */
.sec-divider{display:block;width:100%;height:auto;margin-bottom:48px}
#staff .st{color:var(--moss)}
.staff-lead{margin-top:8px;font-size:16px;line-height:1.6;letter-spacing:.08em;color:var(--ink)}
/* 担当者は4名（src/lib/staff.ts）。広い幅は2列×2段、1280px以下は1列 */
.staff-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.staff-card{flex:1;display:flex;flex-direction:column;gap:28px;padding:24px;background:var(--mint);border-radius:16px}
.staff-head{display:flex;align-items:center;gap:24px}
.staff-avatar{position:relative;flex-shrink:0;width:88px;height:88px;border-radius:50%;overflow:hidden;background:var(--cta-green)}
.staff-avatar img{position:absolute;max-width:none;object-fit:cover;pointer-events:none}
.staff-avatar--watanabe .staff-photo{left:7px;top:9.21px;width:96px;height:165.076px}
.staff-avatar--watanabe .staff-hair{left:18.77px;top:8px;width:49.811px;height:50.7px}
.staff-avatar--yagisawa .staff-photo{left:8px;top:12.34px;width:80px;height:142.919px}
.staff-avatar--yagisawa .staff-hair{left:24.62px;top:12px;width:38.968px;height:31.989px}
/* 2026-09-30 に足した2名。髪の重ね画像は無く、写真1枚を頭の大きさが上の2名とそろう位置に置く */
.staff-avatar--yamauchi .staff-photo{left:.5px;top:7.83px;width:80px;height:141.25px}
.staff-avatar--ito .staff-photo{left:19.33px;top:7.9px;width:72.135px;height:116.09px}
.staff-info{flex:1;display:flex;flex-direction:column;color:var(--moss);line-height:1.4}
.staff-info p{font-size:16px;letter-spacing:.08em}
.staff-name{font-size:18px;font-weight:500;letter-spacing:.08em;margin-top:2px}
.staff-quote{font-size:20px;font-weight:600;line-height:1.4;letter-spacing:.08em;color:var(--moss)}

/* ═══ フランチャイズ・バンド（Figma準拠） ═══ */
.fcband{position:relative;margin-top:80px;padding:80px 0;overflow:hidden;color:#fff}
.fcband-media{position:absolute;inset:0;z-index:0}
.fcband-media img{width:100%;height:100%;object-fit:cover}
.fcband-media::after{content:"";position:absolute;inset:0;background:rgba(var(--moss-rgb),.92);backdrop-filter:blur(8px)}
.fcband-in{position:relative;z-index:1}
.fcband-eyebrow{display:block;font-family:var(--ff-en);font-size:16px;letter-spacing:.08em;line-height:1.8;color:var(--mint)}
.fcband-in h2{margin-top:0;margin-bottom:40px;font-size:40px;font-weight:700;letter-spacing:.08em;line-height:1.4;color:#fff}
.fc-inner{
  display:grid;grid-template-columns:1fr 486px;gap:48px;align-items:end;
  background:rgba(255,255,255,.9);backdrop-filter:blur(4px);border-radius:16px;padding:40px;
  overflow:hidden;
}
.fc-text p{font-size:20px;font-weight:500;letter-spacing:.08em;line-height:1.8;color:var(--moss);word-break:keep-all;overflow-wrap:break-word}
.fc-text .fc-sub{margin-top:8px}
.fc-btn{
  margin-top:24px;margin-left:auto;display:flex;width:fit-content;align-items:center;gap:8px;background:var(--moss-btn);color:#fff;
  padding:16px 32px;border-radius:4px;font-size:15px;letter-spacing:.16em;font-weight:500;
  transition:background .25s ease;
}
.fc-btn:hover{background:var(--moss-hover)}

/* 照合結果のミニプレビュー */
.fc-demo{background:#fff;border:1px solid var(--live);border-radius:24px 24px 0 0;overflow:hidden;margin-bottom:-40px}
.fcd-head{padding:16px 24px;border-bottom:1px solid var(--live);display:flex;justify-content:space-between;align-items:center}
.fcd-t{font-size:16px;letter-spacing:.08em;font-weight:500;line-height:1.6;color:var(--ink)}
.fcd-s{font-size:12px;letter-spacing:.2em;color:var(--moss);font-weight:500;line-height:1.6;text-transform:uppercase}
.fcd-row{display:flex;gap:16px;padding:16px 24px;border-bottom:1px solid #F6F6F8}
.fcd-row:last-child{border-bottom:none;background:#fff;border-top:1px solid var(--live);transition:background-color .3s ease}
.fcd-row:last-child.is-done{background:#E4E8EB}
.fcd-main{flex:1;min-width:0}
.fcd-n{font-size:16px;font-weight:500;letter-spacing:.05em;line-height:1.6;color:var(--ink)}
.fcd-m{font-size:14px;color:var(--gray);letter-spacing:.04em;line-height:1.8;margin-top:8px}
.fcd-cks{margin-top:8px;display:flex;flex-wrap:wrap;gap:8px}
.fck{font-family:var(--ff-en);font-size:12px;letter-spacing:.04em;line-height:1.4;padding:8px;border-radius:4px;background:transparent}
.fck.ok{background:var(--moss-tint);color:var(--moss)}
.fck.ng{background:#fff;color:var(--gray)}
.fcd-cks.fcd-anim .fck{opacity:0;transform:translateY(4px);transition:opacity .3s ease,transform .3s ease}
.fcd-cks.fcd-anim .fck.show{opacity:1;transform:translateY(0)}
/* 伏せる行。タグが出そろってから is-done が付いて背景が沈む（public/js/app.js） */
.fcd-row--lock{align-items:center}
.fcd-lock{flex-shrink:0;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--moss-tint);color:var(--moss)}
.fcd-lock svg{width:20px;height:20px}

/* ═══ 相談3分岐 ═══ */
.consult{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cs{
  border:1px solid var(--line);border-radius:3px;padding:32px 32px;background:#fff;
  transition:all .25s ease;display:flex;flex-direction:column;
}
.cs:hover{border-color:var(--moss);background:var(--cream-2)}
.cs .ce{font-family:var(--ff-en);font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--moss);text-transform:uppercase}
.cs h3{margin-top:8px;font-size:20px;font-weight:700;letter-spacing:.08em}
.cs p{margin-top:8px;font-size:14px;color:var(--gray);line-height:1.75;flex:1}
.cs .go{margin-top:16px;display:inline-flex;align-items:center;gap:8px;font-size:14px;letter-spacing:.08em;color:var(--moss)}

/* ═══ お客様の声（Figma準拠） ═══ */
.voice-sec{position:relative;padding:80px 0 0;overflow:hidden;height:717px}
.voice-media{position:absolute;right:0;top:0;width:40%;height:100%;z-index:1}
.voice-media img{width:100%;height:100%;object-fit:cover}
.voice-in{position:relative;z-index:3}
.voice-content{max-width:550px}
.voice-card{
  margin-top:24px;background:#F7F6F2;border-radius:16px;padding:32px;
  display:flex;flex-direction:column;gap:16px;
}
.voice-card .vq{font-size:18px;font-weight:500;letter-spacing:.04em;line-height:1.8;color:var(--moss)}
.voice-card .vm{font-size:14px;letter-spacing:.04em;color:var(--moss);text-align:right}
.voice-nav{margin-top:16px;display:flex;justify-content:flex-end;gap:8px}
.voice-arrow{position:relative;width:48px;height:48px;border-radius:50%;cursor:pointer;background:none;border:none;padding:0}
.voice-arrow img{width:100%;height:100%;display:block}
.voice-arrow.prev img{transform:scaleX(-1)}
.voice-arrow .ic-hover{position:absolute;inset:0;opacity:0;transition:opacity .22s ease}
.voice-arrow:hover .ic-hover{opacity:1}
.voice-illust{position:absolute;left:0;top:0;width:1440px;height:717px;pointer-events:none;z-index:2}
.voice-illust img{position:absolute}
.vi-man{left:112px;top:412px;width:152px;height:200px}
.vi-woman-line{left:48px;top:425px;width:164px;height:184px}
.vi-woman-fill{left:50px;top:426px;width:160px;height:181px}
.vi-woman-bag{left:127px;top:455px;width:38px;height:60px}
.voice-bgtext-wrap{position:absolute;left:0;top:613px;width:1440px;height:120px;overflow:hidden;z-index:0;pointer-events:none;margin:0}
.bgtext-track{display:flex;width:max-content;animation:bgtext-loop 20s linear infinite}
.voice-bgtext{
  font-family:var(--ff-en);font-weight:700;font-size:120px;line-height:1;
  color:var(--moss);letter-spacing:.01em;white-space:nowrap;
}
@keyframes bgtext-loop{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ═══ CTA ═══ */
.cta{margin-top:88px}
.cta--flush-top{margin-top:0}
.cta-top{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:32px;
  background:var(--cta-green);color:#fff;padding:80px 128px;overflow:hidden;
}
.cta-top::before{
  content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--cta-grad-a),var(--cta-grad-b));
  transition:opacity .3s ease;
}
.cta-top:hover::before{opacity:0}
.cta-top-body,.cta-arrow{position:relative;z-index:1}
.cta-top-ttl{font-size:48px;font-weight:500;letter-spacing:.08em;line-height:1.4}
.cta-top-note{margin-top:16px;font-size:16px;letter-spacing:.08em;line-height:1.6}
.cta-arrow{flex-shrink:0;width:96px;height:96px}
.cta-arrow img{width:100%;height:100%}
.cta-row{display:flex;border-bottom:1px solid var(--moss)}
.cta-cell{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:40px 32px;color:var(--moss);transition:background .25s ease,color .25s ease;text-align:center;
}
.cta-tel{border-right:1px solid var(--moss)}
.cta-row .cta-tel,.cta-row .cta-line{padding-bottom:48px}
.cta-cell-ttl{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;row-gap:0;column-gap:16px;font-size:48px;font-weight:700;letter-spacing:.08em}
.cta-tel .cta-cell-ttl > span:last-child{white-space:nowrap}
.cta-tel-lbl{font-size:32px}
.cta-pill{
  display:inline-flex;align-items:center;padding:4px 12px;border:1px solid currentColor;
  border-radius:56px;font-size:14px;font-weight:500;letter-spacing:.08em;
}
.cta-tel:hover{background:var(--cta-hover);color:#fff}
.cta-tel:hover .cta-pill{background:#fff;border-color:#fff;color:var(--cta-hover)}
.cta-line:hover{background:#06C755;color:#fff}
.cta-line:hover .cta-pill{background:#fff;border-color:#fff;color:var(--moss)}

/* ═══ 会員登録CTA（variant="member"） ═══ */
.cta-top--member{flex-direction:column;justify-content:flex-start;gap:40px}
.cta-swirl{position:absolute;left:546px;top:0;width:788px;height:317px;mix-blend-mode:screen;pointer-events:none}
.cta-head{position:relative;z-index:1;width:100%;max-width:1120px;display:flex;align-items:center;justify-content:space-between;gap:32px}
.cta-head-copy{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.cta-eyebrow{font-family:var(--ff-en);font-size:16px;font-weight:400;letter-spacing:.08em;line-height:1.4}
/* ⚠ 高さを決め打ちにしないこと。note（説明文）はページごとに長さが違うため、
   固定高さ＋絶対配置だと長い文章がパネル下端で切れ、カードの下にも潜り込む
   （実際に幅320〜1000pxの全域で重なり・行の消失が起きていた）。
   note を通常のフローに戻し、パネルが文字量に合わせて伸びる作りにしてある。 */
.cta-panel{
  /* カードの寸法。幅だけ決めれば、高さ・のぞかせる量・回転のはみ出しは下の3つが自動で従く。
     数字の出どころ: 148/198＝カード画像の縦横比、.7＝カード高さのうち見せる割合、
     sin16deg 起因の持ち上がり＝(幅*sin16 + 高さ*cos16 - 高さ)/2 ≒ 幅*.123（回転は16deg固定） */
  --cta-card-w:320px;
  --cta-card-h:calc(var(--cta-card-w) * 148 / 198);
  --cta-card-peek:calc(var(--cta-card-h) * .7 + var(--cta-card-w) * .123);
  position:relative;z-index:1;width:100%;max-width:1120px;min-height:234px;overflow:hidden;border-radius:16px;
  display:flex;align-items:center;
}
.cta-panel-bg{
  position:absolute;inset:0;border-radius:16px;overflow:hidden;
  background:linear-gradient(174deg,var(--cta-panel-a) 8.49%,var(--cta-panel-b) 91.51%);
}
.cta-panel-bgtext{
  position:absolute;left:312px;bottom:0;font-family:var(--ff-en);font-weight:700;
  font-size:80px;line-height:.8;letter-spacing:.01em;color:rgba(var(--moss-rgb),.06);
  white-space:nowrap;pointer-events:none;
}
/* ⚠ position:static にしないこと。絶対配置の .cta-panel-bg より下に描かれて文字ごと消える。
   z-index も同じ理由（カードは cta-shuffle の中で z-index 2〜3 を持つ） */
.cta-panel-note{
  position:relative;z-index:4;margin:24px 56px;max-width:460px;
  font-size:24px;letter-spacing:.08em;line-height:1.6;color:var(--moss);
}
.cta-panel-note b{font-weight:700}
/* 位置は下端基準（bottom）。top 基準だと、note が長くてパネルが伸びたときに
   カードだけ上に取り残されて宙に浮く。-53.45px は元の top:47.45px と同じ見え方（234-47.45-240） */
.cta-stack-card{
  position:absolute;bottom:-53.45px;width:320px;height:240px;border-radius:16px;overflow:hidden;background:#F7F7F5;
  animation:cta-shuffle 9s ease-in-out infinite;
}
.cta-stack-card img{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;object-fit:cover}
.cta-stack-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;backdrop-filter:blur(8px);background:rgba(var(--moss-rgb),.6);
  animation:cta-reveal 9s ease-in-out infinite;
}
.cta-stack-tag{
  position:absolute;left:16px;top:16px;z-index:1;background:#fff;border-radius:4px;padding:2px 6px;
  font-size:12px;font-weight:500;letter-spacing:.08em;color:var(--moss);
  box-shadow:0 0 1px rgba(204,204,204,.4);
}
.cta-stack-card--1,.cta-stack-card--1::after{animation-delay:-3s}
.cta-stack-card--2,.cta-stack-card--2::after{animation-delay:-6s}
@keyframes cta-shuffle{
  0%,28%{right:52px;transform:rotate(16deg);z-index:3}
  33%,61%{right:120px;transform:rotate(0deg);z-index:1}
  66%,94%{right:98px;transform:rotate(8deg);z-index:2}
  100%{right:52px;transform:rotate(16deg);z-index:3}
}
@keyframes cta-reveal{
  0%{opacity:1}
  10%{opacity:0}
  24%{opacity:0}
  28%{opacity:1}
  100%{opacity:1}
}
.cta-top--member:hover .cta-panel-bg{background:#fff}
.cta-top--member:hover .cta-panel-bgtext{color:rgba(var(--moss-rgb),.08)}

/* ═══ フッター（Figma準拠） ═══ */
.footer{position:relative;overflow:hidden;background:#F0EEE6;padding:80px 0 0}
.footer-in{max-width:1120px;margin:0 auto}
.footer-row{display:flex;gap:64px;align-items:flex-start}
.footer-brand{display:flex;flex-direction:column;gap:16px;flex-shrink:0;width:393px;padding-left:40px}
.footer-brand-top{display:flex;flex-direction:column;gap:8px}
.footer-brand .logo{gap:8px}
.footer-brand .logo-mark{width:88px;height:88px;border-radius:2px}
.footer-brand .logo-word{font-size:40px;color:var(--moss)}
.footer-tag{font-size:16px;color:var(--moss);letter-spacing:.08em;line-height:1.8}
.footer-info{display:flex;flex-direction:column;gap:8px}
.footer-info p{font-size:16px;color:var(--moss);letter-spacing:.08em;line-height:1.8}
/* 住所の地図ピン。p を display:flex にすると住所とピンが別々の箱になり、住所が折り返したとき
   ピンだけ右端へ取り残される（幅の狭いスマホで顕著）。文末に流し込む inline-block にして住所の直後に置く */
.footer-info p a{display:inline-block;margin-left:8px;vertical-align:middle}
.footer-info p a img{display:block}
/* 括弧でくくった注記は丸ごと1かたまりで折り返す（括弧の途中で改行させない） */
.footer-info-note{display:inline-block}
/* padding-left は 0。上の会社情報テキストと左端を揃えるため（8px あると1行だけ内側にずれて見える） */
.footer-sns{display:flex;align-items:center;justify-content:space-between;padding:8px 8px 8px 0;width:224px;color:var(--moss);transition:opacity .22s ease}
.footer-sns:hover{opacity:.7}
.footer-sns span{display:flex;align-items:center;gap:8px;font-size:15px;letter-spacing:.08em}
.footer-sns .arrow{width:24px;height:24px}
.footer-cta{flex:1;display:flex;flex-direction:column}
.footer-cta-top{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:40px;
  padding:32px 40px;background:var(--cta-green);color:#fff;overflow:hidden;
}
.footer-cta-top::before{
  content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--cta-grad-a),var(--cta-grad-b));
  transition:opacity .3s ease;
}
.footer-cta-top:hover::before{opacity:0}
.footer-cta-body,.footer-cta-arrow{position:relative;z-index:1}
.footer-cta-ttl{font-size:28px;font-weight:500;letter-spacing:.08em;line-height:1.4}
.footer-cta-note{margin-top:8px;font-size:12px;letter-spacing:.08em;line-height:1.6}
.footer-cta-arrow{flex-shrink:0;width:80px;height:80px}
.footer-cta-row{display:flex;border-bottom:1px solid var(--moss);background:#fff}
.footer-cta-cell{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:24px 32px;color:var(--moss);transition:background .25s ease,color .25s ease;text-align:center;
}
.footer-cta-tel{border-right:1px solid var(--cta-line)}
.footer-cta-cell p{display:flex;align-items:center;gap:16px;font-size:28px;font-weight:700;letter-spacing:.08em;white-space:nowrap}
.footer-cta-tel p .en:first-child{font-size:18px;letter-spacing:.02em}
.footer-cta-tel p .en:last-child{letter-spacing:.02em}
.footer-cta-pill{
  display:inline-flex;align-items:center;padding:9px 21px;border:1px solid currentColor;
  border-radius:56px;font-size:12px;font-weight:500;letter-spacing:.08em;
}
.footer-cta-tel:hover{background:var(--cta-hover);color:#fff}
.footer-cta-tel:hover .footer-cta-pill{background:#fff;border-color:#fff;color:var(--cta-hover)}
.footer-cta-line:hover{background:#06C755;color:#fff}
.footer-cta-line:hover .footer-cta-pill{background:#fff;border-color:#fff;color:var(--moss)}
.footer-links{margin-top:48px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));padding:0 40px}
/* ⚠ **`white-space:nowrap` を戻さないこと。** 1列はおよそ200pxしかないのに、ここには
   「未公開物件（特別法人会員に優先紹介）」のような20文字級のリンクが並ぶ。折り返しを止めると
   枠からはみ出し、グリッドは溢れた分を切らないので**隣のリンクの文字に重なって読めなくなる**
   （実際に「おせっかい特別法人会員について」「掲載を希望されるオーナー様へ」「お客様の声」の
   3つが重なる事故が起きた）。長いものは2行になってよい。
   リンクを足すときも、文言の長さでレイアウトが壊れないことがここで担保される。 */
.footer-links a{
  display:flex;align-items:center;gap:8px;padding:8px;
  font-size:15px;color:var(--moss);letter-spacing:.08em;line-height:1.8;transition:opacity .22s ease;
}
.footer-links a:hover{opacity:.7}
.footer-links a img{width:24px;height:24px;flex-shrink:0}
.footer-bottom{margin-top:56px;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--ink);letter-spacing:.08em;padding:0 40px}
.footer-top{display:flex;align-items:center;gap:16px;font-size:16px;color:var(--ink);letter-spacing:.08em;line-height:1.8}
.footer-top-dot{position:relative;width:12px;height:12px;flex-shrink:0}
.footer-top-dot::before{
  content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:12px;height:12px;border-radius:50%;background:var(--ink);
  transition:width .22s ease,height .22s ease,background-color .22s ease;
}
.footer-top-arrow{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-45deg);
  width:9px;height:9px;opacity:0;transition:opacity .22s ease;
}
@media(hover:hover){
  .footer-top:hover .footer-top-dot::before{width:37px;height:37px;background:var(--moss)}
  .footer-top:hover .footer-top-arrow{opacity:1}
}
@media(hover:none){
  .footer-top-dot::before{width:37px;height:37px;background:var(--moss)}
  .footer-top-arrow{opacity:1}
}
.footer-bgtext-wrap{height:120px;overflow:hidden}
.footer-bgtext-wrap .bgtext-track{animation-duration:36s}
.footer-bgtext{
  font-family:var(--ff-en);font-weight:700;font-size:120px;line-height:1;
  color:rgba(var(--moss-rgb),.06);letter-spacing:.01em;white-space:nowrap;
}


@media(max-width:1280px){
  .cta-panel-note{max-width:clamp(300px, calc(100% - 536px), 460px)}
  .hero-copy p{white-space:normal;max-width:520px}
  .ward-lead{grid-template-columns:1fr}
  .ward-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ind-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .promise,.consult{grid-template-columns:repeat(2,1fr)}
  .staff-grid{grid-template-columns:1fr}
  .fc-inner{grid-template-columns:1fr;gap:32px}
  .limited-inner{flex-direction:column;align-items:flex-start;gap:32px}
  .cta-top{padding:56px 48px}
  .cta-top-ttl{font-size:36px}
  .cta-cell{padding:24px 12px}
  .cta-cell-ttl{font-size:40px;column-gap:6px}
  .cta-tel-lbl{font-size:16px}
  .footer-cta-cell{padding:24px 12px}
  .footer-cta-cell p{font-size:40px;gap:6px}
  .footer-cta-tel p .en:first-child{font-size:16px}
  .cta-swirl,.cta-panel-bgtext{display:none}
  .mb-act{width:100%}
  .mb-act .btn-ghost,.mb-act .btn-outline-w{justify-content:center;width:100%}
}
@media(max-width:990px){
  .h-link--history{display:none}
  /* 言語・エリアの切り替えはハンバーガーメニューの先頭へ移す（ヘッダーに置く幅が無い） */
  .h-lang{display:none}
  .h-menu-lang{display:flex}
  .h-area{display:none}
  .h-menu-area{display:flex}
  .h-menu-btn{display:flex}
  .h-menu-link--history{display:flex}
  /* 物件の導線は横に並べる幅がないので、ここからはハンバーガーに集約する */
  .h-nav{display:none}
  .logo-mark{width:44px;height:44px}
  .logo-word{font-size:15px}
  .h-right{gap:8px}
  .h-links{gap:2px}
  .h-link{padding:4px 4px}
  .h-line-btn{padding:9px 14px;font-size:13px;gap:6px}
  .cta-row{flex-direction:column}
  .cta-row .cta-tel,.cta-row .cta-line{padding-bottom:32px}
  .cta-tel{border-right:none;border-bottom:1px solid var(--moss)}
  .footer-row{flex-direction:column;gap:32px}
  .footer-brand,.footer-cta{width:100%}
  .footer-brand{padding-right:40px}
  .footer-cta-row{flex-direction:column}
  .footer-cta-tel{border-right:none;border-bottom:1px solid var(--cta-line)}
  .footer-cta-cell{gap:8px}
  .footer-cta-cell p{font-size:32px}
  .footer-cta-tel p .en:first-child{font-size:32px}
  .hero-illust-bike{display:none}
  .hero-photo{left:61.31%;width:34.88%}
  .hero-illust-people{display:none}
  .hero-copy{top:103px}
  .hero-copy h1 span{font-size:clamp(40px,calc(21.51px + 2.68vw),48px)}
  /* 写真カード（左端 61.31%）の手前で折り返す。固定の 492px だとタブレット幅（〜900px）で写真に重なっていた */
  .hero-copy p{max-width:min(492px,calc(61.31vw - 88px))}
}
@media(max-width:640px){
  .cta-top{padding:56px 16px}
}
/* エリアのTOPの見出し（2行目「まだ空いている物件を」10字）が、右に並ぶ写真カード（左端 61.31%）に重なる幅。
   写真の手前に収まる大きさまで縮める（541px 以下は写真が文章の下へ回るので対象外） */
@media(min-width:541px) and (max-width:767px){
  .hero--area .hero-copy h1 span{font-size:clamp(26px,calc((61.31vw - 80px) / 10.8),40px)}
}
/* 320px 前後では説明文が4行になって写真の上端にかかるので、少し詰めて3行に収める */
@media(max-width:359px){
  .hero--area .hero-copy p{font-size:12px;letter-spacing:.04em}
}
@media(max-width:948px){
  /* ここから「文章の下にカード」の段組み。上詰めにして、文章の下に
     カードがのぞく帯（--cta-card-peek）＋16pxの余白を確保する */
  .cta-panel{align-items:flex-start;min-height:350px}
  .cta-panel-note{margin:24px 56px calc(var(--cta-card-peek) + 16px);max-width:none}
  /* カード高さの7割だけ見せ、残りはパネル下端からはみ出して切れる（元デザインの見え方） */
  .cta-stack-card{bottom:calc(var(--cta-card-h) * -.3)}
}
@media(max-width:540px){
  body{font-size:14px}
  .wrap{padding:0 16px}
  .page-fc .wrap{padding:0 10px}
  .header-inner{padding:16px 16px}
  /* スマホはアイコンだけの導線（.h-mobile-cta）とハンバーガーに置き換える */
  .h-links,.h-line-btn{display:none}
  .h-right{gap:8px;align-items:center}
  .h-mobile-cta{display:flex;align-items:center;gap:12px}
  .h-mobile-cta a{display:flex;align-items:center;justify-content:center}
  .h-mobile-cta img{width:24px;height:24px;flex-shrink:0}
  /* 電話だけインラインSVG（色を親から継ぐため）。大きさを画像アイコンと揃える */
  .h-mobile-cta svg{display:block;width:24px;height:24px;flex-shrink:0}
  .h-mobile-tel{color:var(--moss)}
  .h-menu-link--fc,.h-menu-link--line{display:flex}
  .logo-mark{width:48px;height:48px}
  .logo-word{font-size:15px}
  /* 説明文（3行）の下端が写真の上端に数px重なっていたので、写真を16px下げ、面も同じだけ伸ばす（検索パネルとの間は変えない） */
  .hero{height:calc(304.5px + 56.25vw)}
  .hero-bg{left:0;right:0;top:0}
  .hero-photo{left:20px;right:20px;top:216px;height:auto;aspect-ratio:16/9;width:auto;border-radius:16px}
  .hero-photo-img{object-position:bottom}
  .hero-illust-people{display:block;left:4.78%;top:28.57%;width:22%}
  .hero-copy{top:40px}
  .hero-copy h1 span{font-size:28px;padding:0 8px}
  .hero-copy p{font-size:13px;margin-top:16px;white-space:normal;max-width:100%}
  .search-panel{margin:-87px 0 0;padding:24px 16px}
  .search-row{grid-template-columns:1fr 1fr;gap:8px}
  .search-foot{flex-direction:column;align-items:stretch;gap:16px}
  .btn-search{width:100%;padding:16px 0}
  .hit{justify-content:center}
  .rail{padding-bottom:16px}
  .livebar-inner{padding:16px 16px;gap:12px}
  .live-chip{margin-right:0;font-size:13px}
  .live-stat{border-left:none;padding:0;font-size:13px}
  .section{padding-top:64px}
  .sec-head{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:16px}
  h2.st{font-size:22px}
  .promise,.consult{grid-template-columns:1fr}
  /* スマホは1列。カード1枚が横いっぱいになる */
  .ind-cards{grid-template-columns:1fr;gap:12px}
  .ind-card{padding:14px 16px;gap:12px}
  .wb-cap .wc{font-size:13px}
  .ward .wq{font-size:13px}
  .ward-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .voice-sec{height:auto;padding-top:0;padding-bottom:112px}
  .voice-media{position:static;width:100%;height:280px;margin-bottom:24px}
  .voice-content{max-width:100%}
  .voice-illust{display:none}
  .voice-bgtext-wrap{width:100%;left:0;top:auto;bottom:0;height:80px}
  .voice-bgtext{font-size:80px}
  .voice-nav{margin-top:8px}
  .fcband{margin-top:64px;padding:48px 0}
  .fcband-in{padding:0 10px}
  .fcband-in h2{font-size:26px}
  .fc-inner{padding:16px}
  .fc-text p{font-size:18px;word-break:normal}
  .fc-demo{margin-bottom:-24px}
  .fc-btn{width:100%;justify-content:center}
  .fcd-row{padding-left:16px;padding-right:16px}
  .mb-list{grid-template-columns:1fr}
  .seo-row{grid-template-columns:1fr;gap:8px}
  .seo-row .sk{padding-top:0}
  .promise{gap:32px}
  .pr-media{aspect-ratio:16/9}
  .pr h3{margin-top:16px;font-size:18px}
  .pr p{margin-top:8px;font-size:15px}
  .staff-quote{font-size:16px}
  .staff-info p{font-size:14px}
  .staff-avatar{width:64px;height:64px}
  .staff-avatar--watanabe .staff-photo{left:5.091px;top:6.7px;width:69.818px;height:120.055px}
  .staff-avatar--watanabe .staff-hair{left:13.651px;top:5.818px;width:36.226px;height:36.873px}
  .staff-avatar--yagisawa .staff-photo{left:5.818px;top:8.975px;width:58.182px;height:103.941px}
  .staff-avatar--yagisawa .staff-hair{left:17.905px;top:8.727px;width:28.34px;height:23.265px}
  .staff-avatar--yamauchi .staff-photo{left:.364px;top:5.694px;width:58.182px;height:102.727px}
  .staff-avatar--ito .staff-photo{left:14.058px;top:5.745px;width:52.462px;height:84.43px}
  .card{flex:0 0 264px}
  /* 写真が小さくなる分だけ鍵マークも落とす（写真に対する占有感を保つため） */
  .lock-mark span{width:48px;height:48px}
  .lock-mark svg{width:20px;height:20px}
  .limited{margin-top:64px;padding:48px 0}
  .limited h2{font-size:24px}
  .cta{margin-top:64px}
  .cta--flush-top{margin-top:0}
  .cta-top{padding:40px 16px;flex-direction:column;align-items:flex-start;gap:24px}
  .cta-top-ttl{font-size:32px}
  .cta-top-note{font-size:13px}
  .cta-arrow{width:56px;height:56px;align-self:flex-end}
  .cta-head{flex-direction:column;align-items:flex-start;gap:0}
  .cta-swirl,.cta-panel-bgtext{display:none}
  .cta-panel{--cta-card-w:clamp(160px,27vw + 74px,260px);min-height:284px}
  /* 説明文はスマホでは本文の大きさ（担当者紹介・お問い合わせの説明文と同じ16px）。
     以前は22pxで、1行12文字前後が8行続き見出しのように大きかった（2026-09-30 ユーザー指摘） */
  .cta-panel-note{margin:24px 24px calc(var(--cta-card-peek) + 16px);font-size:16px}
  .cta-stack-card{
    width:var(--cta-card-w);height:auto;aspect-ratio:198/148;border-radius:10px;
  }
  @keyframes cta-shuffle{
    0%,28%{right:calc(var(--cta-card-w) * .1616);transform:rotate(16deg);z-index:3}
    33%,61%{right:calc(var(--cta-card-w) * .3737);transform:rotate(0deg);z-index:1}
    66%,94%{right:calc(var(--cta-card-w) * .3081);transform:rotate(8deg);z-index:2}
    100%{right:calc(var(--cta-card-w) * .1616);transform:rotate(16deg);z-index:3}
  }
  .cta-row{flex-direction:column}
  .cta-tel{border-right:none;border-bottom:1px solid var(--moss)}
  .cta-cell{padding:24px 24px}
  .cta-cell-ttl{font-size:36px}
  .cta-pill{font-size:12px}
  .cta-tel-lbl{font-size:20px}
  .footer{padding:56px 0 0}
  .footer-brand .logo-mark{width:64px;height:64px}
  .footer-brand .logo-word{font-size:28px}
  /* 左右の余白はサイト共通の16px（.wrap）に揃える。40px のままだと会社情報だけ内側に引っ込み、
     すぐ下の全幅CTAと左端が揃わないうえ、文字の入る幅が狭すぎて住所・電話が中途半端に折り返す */
  .footer-brand{padding-left:16px;padding-right:16px}
  .footer-links{grid-template-columns:1fr;padding:0 16px}
  .footer-bottom{padding:0 16px}
  /* 本文と同じ14pxへ。16pxのままだと狭い幅で「…LIT / 4F」のように折り返す */
  .footer-tag{font-size:14px}
  .footer-info p{font-size:14px}
  /* 幅224px固定の両端揃えだと矢印だけ遠くに離れるので、テキストのすぐ隣に置く */
  .footer-sns{width:auto;justify-content:flex-start;gap:8px}
  .footer-links a{justify-content:space-between}
  .footer-cta-row{flex-direction:column}
  .footer-cta-tel{border-right:none;border-bottom:1px solid var(--cta-line)}
  .footer-cta-cell{padding:32px 24px}
  .footer-cta-cell p{font-size:28px}
  .footer-cta-tel p .en:first-child{font-size:20px}
  .footer-cta-top{gap:16px;padding:24px}
  .footer-cta-arrow{width:48px;height:48px}
  .footer-bottom{flex-direction:column;align-items:center;gap:8px}
  .footer-top{gap:8px}
  .footer-top-dot,.footer-top-dot::before,.footer-top:hover .footer-top-dot::before{width:21px;height:21px}
  .footer-top-arrow{width:7px;height:7px;opacity:1}
  .footer-bgtext-wrap{height:56px}
  .footer-bgtext{font-size:56px}
}
@media(max-width:540px){
  .header-inner{padding:8px}
}
/* 375px未満のヘッダーは横幅がぎりぎりで、スマホ導線にアイコンを1つ足すと**横スクロールが出る**
   （実測：350px幅で1pxはみ出した）。まず間隔を詰めて場所を作り、それでも足りない359px以下では
   電話アイコンだけ下ろす。ハンバーガーメニューの「電話で相談」は残るので導線は消えない。
   ⚠ ここを緩めるときは、必ず320〜375pxの各幅で document.scrollWidth が画面幅を超えないか実測すること */
@media(max-width:374px){
  .header-inner{gap:12px}
  .h-mobile-cta{gap:8px}
}
@media(max-width:359px){
  /* ⚠ `.h-mobile-tel` 単体では消えない。`.h-mobile-cta a{display:flex}` の方が指定が強く、
     クラス1つの指定は負ける。必ず親も含めて書くこと */
  .h-mobile-cta .h-mobile-tel{display:none}
}
/* ═══ ミニ基準（320〜360px） ═══ */
@media(max-width:360px){
  .fcd-row{flex-direction:column;gap:16px}
  .fcd-row--lock{align-items:flex-start}
  .livebar-inner{row-gap:0}
  .live-stat b{font-size:32px}
}
@media(max-width:320px){
  .h-mobile-cta{display:none}
  .h-menu-link--login,.h-menu-link--fav,.h-menu-link--search{display:flex}
  .cta-cell-ttl{font-size:32px}
  .cta-tel .cta-cell-ttl > span:last-child{white-space:normal;word-break:break-all}
  .cta-top-ttl{font-size:28px}
  .cta-panel{--cta-card-w:180px}
  .hero-copy h1 span{font-size:27px}
}

/* ═══ フランチャイズページ（franchise.html） ═══ */
.crumb{padding:16px 16px 16px 0;font-size:12px;color:var(--ink);letter-spacing:.04em;line-height:1.8;text-align:right}
/* さがすページだけパンくずを薄く。ここは物件を一覧する画面で、上に置く情報が多いほど
   1画面に出る物件が減る（他ページは従来どおりの余白） */
body.page-search .crumb{padding:6px 16px 6px 0}
.crumb a:hover{color:var(--moss)}
.crumb-sep{margin:0 8px}
.crumb-current{color:var(--moss);font-weight:500}

.fx-hero{position:relative;overflow:hidden;color:#fff;padding:64px 0 88px}
.fx-hero-bg{position:absolute;inset:0;z-index:0}
.fx-hero-bg img{width:100%;height:100%;object-fit:cover}
.fx-hero-tint{position:absolute;inset:0;z-index:1;background:rgba(var(--hero-tint-rgb),.54);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.fx-hero .wrap{position:relative;z-index:2}
.fx-hero .eyebrow{color:rgba(255,255,255,.82);font-size:14px;font-weight:500;letter-spacing:.08em;text-transform:none;margin-bottom:0}
.fx-hero h1{margin-top:8px;font-size:48px;font-weight:700;letter-spacing:.08em;line-height:1.4}
.fx-hero-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-top:16px}
.fx-hero p{font-size:16px;color:rgba(255,255,255,.82);letter-spacing:.08em;max-width:640px;line-height:2}
.fx-note{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;background:#fff;border-radius:40px;padding:8px 24px;box-shadow:0 2px 6px rgba(var(--shadow-rgb),.1)}
.fx-note .label{font-size:14px;font-weight:600;letter-spacing:.08em;color:var(--live)}

/* ── 入力パネル（4ステップ） ──
   ヒーローに食い込ませて「まず入力する場所」を画面の主役にする。 */
.fx-panel-wrap{position:relative;z-index:3;margin:-56px auto 0;max-width:1056px;padding:0 32px}
.fx-panel{background:#fff;border-radius:16px;box-shadow:8px 8px 16px rgba(var(--shadow-rgb),.16);padding:32px}

.fx-bar{margin-bottom:32px}
.fx-bar-track{height:3px;border-radius:99px;background:var(--line);overflow:hidden}
.fx-bar-fill{display:block;height:100%;width:25%;background:var(--moss);border-radius:99px;transition:width .45s cubic-bezier(.22,.8,.3,1)}
.fx-bar-steps{display:flex;gap:24px;margin-top:12px;list-style:none}
.fx-bar-step{display:flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.08em;color:var(--gray-light)}
.fx-bar-step span{font-family:var(--ff-en);font-size:11px;font-weight:600;letter-spacing:.02em}
.fx-bar-step.on{color:var(--moss);font-weight:600}
.fx-bar-step.done{color:var(--ink)}

.fx-step-h{font-size:20px;font-weight:700;letter-spacing:.08em;line-height:1.6}
.fx-step-h:focus{outline:none}
.fx-step-s{margin-top:8px;font-size:14px;color:var(--gray);letter-spacing:.04em;line-height:1.9}
.fx-step-s b{color:var(--moss);font-weight:600}
.fx-sub-h{margin-top:32px;font-size:15px;font-weight:600;letter-spacing:.08em}

.fx-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.fx-chips--sm{margin-top:12px}
.fx-chips .chip{cursor:pointer}
.fx-chips .chip.on{background:var(--moss-tint);border-color:var(--moss);color:var(--moss);font-weight:600}

/* 用途（業種）は種別ごとに見出しを付けて並べる。
   店舗系だけ並べていた頃は「事務所を探しに来た人が選べない」状態だった */
.fx-groups{margin-top:24px}
.fx-group+.fx-group{margin-top:20px}
.fx-group-h{font-size:12px;font-weight:600;letter-spacing:.16em;color:#9B9892}
.fx-group .fx-chips{margin-top:8px}

/* ── 条件の入力欄（すべて選択式） ──
   数値の手入力をやめ、`<select>` に統一した。独自ドロップダウンではなく素の select を使うのは、
   スマホで OS のピッカーが出て圧倒的に選びやすいため（項目数も増えたので自作は割に合わない）。 */
.fx-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px}
.fx-f{position:relative;min-width:0}
.fx-cap{display:block;font-size:12px;letter-spacing:.16em;color:#9B9892;margin-bottom:8px;font-weight:500}

.fx-sel{position:relative;border-radius:4px;background:#F5F3EF;transition:background .2s ease}
.fx-sel::after{
  content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;pointer-events:none;
  border-right:1.2px solid #A6AAB0;border-bottom:1.2px solid #A6AAB0;
  transform:translateY(-70%) rotate(45deg);
}
.fx-sel:focus-within{background:#fff;box-shadow:0 0 0 1px var(--moss) inset}
.fx-select{
  appearance:none;-webkit-appearance:none;
  width:100%;min-width:0;height:55px;padding:16px 36px 16px 16px;
  border:none;border-radius:4px;background:none;
  font-family:var(--ff-jp);font-size:14px;letter-spacing:.02em;color:var(--ink);
  outline:none;cursor:pointer;
  /* 長い選択肢（「通りからの見えやすさを重視」等）が欄からはみ出さないように */
  text-overflow:ellipsis;
}
.fx-select option[value=""]{color:var(--gray-light)}

/* 「その他（数値を入力）」を選んだときだけ出る自由入力 */
.fx-other{display:flex;align-items:center;margin-top:8px;border-radius:4px;background:#F5F3EF;transition:background .2s ease}
.fx-other:focus-within{background:#fff;box-shadow:0 0 0 1px var(--moss) inset}
.fx-other-input{width:100%;min-width:0;border:none;background:none;padding:12px 16px;font-family:var(--ff-en);font-size:15px;color:var(--ink);outline:none;letter-spacing:.02em}
.fx-unit{font-size:12px;color:var(--gray);padding-right:16px;white-space:nowrap;letter-spacing:.02em}

/* ── 範囲の入力欄（坪数）──
   下限と上限で `<select>` が2つ並ぶぶん、欄そのものが横2列ぶんを使う。
   1列に押し込むと「〜」の左右が狭すぎて、どちらが下限か読み取れなくなる。 */
.fx-f--range{grid-column:span 2}
.fx-range{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:8px}
.fx-range-b{min-width:0}
.fx-range-sep{display:flex;align-items:center;height:55px;font-size:14px;color:var(--gray)}
/* 「下限」「上限」の見出しは、横に並んでいるうちは「〜」で分かるので出さない */
.fx-range-lbl{display:none}

/* 本部の出店基準表をお持ちの方（交通量・周辺人口）。既定では畳んでおく */
.fx-adv{margin-top:24px;border:1px dashed var(--line);border-radius:4px;padding:16px}
.fx-adv-sum{font-size:13px;letter-spacing:.04em;color:var(--gray);cursor:pointer;list-style:none}
.fx-adv-sum::-webkit-details-marker{display:none}
.fx-adv-sum::before{content:"＋ ";color:var(--moss);font-weight:600}
.fx-adv[open] .fx-adv-sum::before{content:"− "}
.fx-adv[open] .fx-adv-sum{color:var(--moss);font-weight:600}
.fx-adv .fx-grid{margin-top:16px}

/* ── 区の複数選択 ── */
.fx-wards{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:24px}
.fx-ward{display:flex;align-items:center;gap:6px;padding:10px 12px;border:1px solid var(--line);border-radius:4px;font-size:13px;letter-spacing:normal;color:var(--ink);background:#fff;cursor:pointer;transition:all .18s ease}
.fx-ward:hover{border-color:var(--moss);color:var(--moss)}
.fx-ward:has(input:checked){background:var(--moss-tint);border-color:var(--moss);color:var(--moss);font-weight:600}
.fx-ward input{appearance:none;-webkit-appearance:none;flex-shrink:0;width:16px;height:16px;margin:0;border:none;background:url(../images/icons/checkbox.svg) center/16px 16px no-repeat;cursor:pointer}
.fx-ward input:checked{background-image:url(../images/icons/checkbox-on.svg)}
/* 区の見出し（東京23区／大阪市）。格子の1行を丸ごと使う。2つ目以降の見出しは上を空けて塊を分ける */
.fx-ward-group{grid-column:1/-1;margin:0;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--gray)}
.fx-ward + .fx-ward-group{margin-top:16px}

/* ── ステップ間の移動 ── */
.fx-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
/* 戻るボタンが無いステップ（STEP1）は送りだけを右に置く */
.fx-nav--end{justify-content:flex-end}
.fx-back{font-size:14px;letter-spacing:.08em;color:var(--gray);background:none;border:none;cursor:pointer;transition:color .2s ease}
.fx-back:hover{color:var(--moss)}
.fx-next,.fx-run{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--moss);color:#fff;border:none;border-radius:4px;padding:16px 32px;font-size:15px;letter-spacing:.16em;cursor:pointer;transition:background .25s ease}
.fx-next:hover,.fx-run:hover{background:var(--moss-hover)}
.fx-run:disabled{opacity:.6;cursor:default}
.fx-run img{flex-shrink:0}

/* ── 照会の受付演出 ── */
.fx-scan{margin:56px auto 0;max-width:1056px;padding:0 32px}
.fx-scan-in{background:var(--moss-deep);color:#fff;border-radius:16px;padding:40px 32px;text-align:center}
.fx-scan-t{font-size:14px;letter-spacing:.08em;color:rgba(255,255,255,.72)}
.fx-scan-ward{margin-top:8px;font-size:32px;font-weight:700;letter-spacing:.08em;line-height:1.4;min-height:1.4em}
.fx-scan-track{margin:24px auto 0;max-width:420px;height:3px;border-radius:99px;background:rgba(255,255,255,.22);overflow:hidden}
.fx-scan-fill{display:block;height:100%;width:0;background:#fff;border-radius:99px}
.fx-scan-s{margin-top:16px;font-size:13px;letter-spacing:.04em;color:rgba(255,255,255,.72);line-height:1.9}

/* ── 結果（ぼかし） ── */
.fx-res-head{margin-bottom:32px}
.fx-res-head .eyebrow{margin-bottom:8px}
.fx-receipt{margin-top:12px;font-size:14px;letter-spacing:.04em;color:var(--gray);line-height:1.9}

.fx-karte{background:var(--cream-2);border:1px solid var(--line);border-radius:8px;padding:24px}
.fx-karte-h{font-size:13px;font-weight:600;letter-spacing:.16em;color:var(--moss)}
.fx-karte-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.fx-karte-chip{font-size:13px;letter-spacing:.04em;padding:8px 12px;border-radius:4px;background:var(--moss-tint);color:var(--moss)}
.fx-karte-chip--empty{background:var(--warn-tint);color:var(--warn)}
.fx-karte-meta{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.fx-karte-meta dt{font-size:13px;letter-spacing:.08em;color:var(--gray-light);white-space:nowrap}
.fx-karte-meta dd{font-size:14px;letter-spacing:.04em;color:var(--ink);line-height:1.8}

.fx-hidden{margin-top:56px}
.fx-hidden-head h3{font-size:20px;font-weight:700;letter-spacing:.08em;line-height:1.6}
.fx-hidden-head p{margin-top:12px;font-size:14px;color:var(--gray);letter-spacing:.04em;line-height:2}
.fx-hidden-head b{color:var(--moss);font-weight:600}

/* 伏せ札。**中身をでっち上げないための枠**なので、物件名・賃料・写真は入れない
   （骨組みだけを出して「ここに入るものがある」ことだけを伝える）。 */
.fx-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
.fx-card{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.fx-card-fig{position:relative;aspect-ratio:4/3;background:repeating-linear-gradient(135deg,var(--moss-tint) 0 12px,#F4F8F6 12px 24px);display:grid;place-items:center}
.fx-card-lock{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(var(--shadow-rgb),.12);color:var(--moss)}
.fx-card-lock svg{width:22px;height:22px}
.fx-card-body{padding:16px;display:flex;flex-direction:column;gap:10px}
.fx-skel{display:block;height:12px;border-radius:99px;background:linear-gradient(90deg,#EFEDE8 0%,#F7F6F3 50%,#EFEDE8 100%);background-size:200% 100%;animation:fx-skel 1.8s ease-in-out infinite}
.fx-skel--ttl{height:16px;width:78%}
.fx-skel--sub{width:58%}
.fx-skel--price{height:20px;width:40%}
@keyframes fx-skel{0%{background-position:200% 0}100%{background-position:-200% 0}}
.fx-cards-note{margin-top:16px;font-size:12.5px;color:var(--gray-light);letter-spacing:.04em;line-height:1.9}

/* ── 受付フォーム ── */
.fx-form{margin-top:56px;background:#fff;border:1px solid var(--moss);border-radius:16px;padding:32px}
.fx-form-head{padding-bottom:24px;border-bottom:1px solid var(--line)}
.fx-form-h{font-size:22px;font-weight:700;letter-spacing:.08em;line-height:1.5}
.fx-form-s{margin-top:8px;font-size:14px;color:var(--gray);letter-spacing:.04em;line-height:1.9}
.fx-form-s b{color:var(--moss);font-weight:600}
.fx-form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:24px}
.fx-field-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.fx-field-head label{font-size:14px;font-weight:500;letter-spacing:.16em}
.fx-badge{font-size:11px;font-weight:600;letter-spacing:.08em;padding:3px 8px;border-radius:4px;background:var(--warn2-tint);color:var(--warn2)}
.fx-badge.is-optional{background:var(--cream);color:var(--gray-light)}
.fx-input{width:100%;border:none;border-radius:4px;background:#F5F3EF;padding:16px;font-size:15px;color:var(--ink);outline:none;letter-spacing:.02em;transition:background .2s ease}
.fx-input:focus{background:#fff;box-shadow:0 0 0 1px var(--moss) inset}
.fx-field-note{margin-top:8px;font-size:12.5px;color:var(--gray);letter-spacing:.04em;line-height:1.8}

.fx-agree{display:flex;align-items:flex-start;gap:8px;margin-top:24px;font-size:13px;color:var(--gray);letter-spacing:.04em;line-height:1.9;cursor:pointer}
.fx-agree input{appearance:none;-webkit-appearance:none;flex-shrink:0;width:20px;height:20px;margin:2px 0 0;border:none;background:url(../images/icons/checkbox.svg) center/20px 20px no-repeat;cursor:pointer}
.fx-agree input:checked{background-image:url(../images/icons/checkbox-on.svg)}
.fx-agree a{color:var(--moss);text-decoration:underline}

.fx-formerror{margin-top:16px;padding:12px 16px;border-radius:4px;background:var(--warn2-tint);color:var(--warn2);font-size:13px;letter-spacing:.04em;line-height:1.8}
.fx-submit{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:24px;background:var(--moss);color:#fff;border:none;border-radius:4px;padding:20px 32px;font-size:16px;letter-spacing:.16em;cursor:pointer;transition:background .25s ease}
.fx-submit:hover{background:var(--moss-hover)}
.fx-submit:disabled{opacity:.6;cursor:default}

.fx-staff{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:20px}
.fx-staff-faces{display:flex}
.fx-staff-faces img{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--cream);border:2px solid #fff}
.fx-staff-faces img+img{margin-left:-12px}
.fx-staff p{font-size:13px;color:var(--gray);letter-spacing:.04em}

/* カルテと受付フォームはステップの中（STEP4）に置く。
   結果ゾーンにあった頃の大きな余白のままだと、パネルの中で間延びする */
.fx-step .fx-karte{margin-top:24px}
.fx-step .fx-form{margin-top:24px}
/* 送りボタンが無く戻るだけのステップ（STEP4）。フォームの中に送信ボタンがある */
.fx-nav--back{justify-content:flex-start}

/* ── 受付完了のLINEご案内 ──
   電話での折り返しが主で、LINEは「そのうえで、やり取りもできます」という位置づけ。
   ここを電話より目立たせないこと（折り返しの約束が霞む） */
.fx-line{margin-top:56px}
.fx-line-in{background:#fff;border:1px solid var(--line);border-radius:16px;padding:32px;text-align:center}
.fx-line-h{font-size:20px;font-weight:700;letter-spacing:.08em;line-height:1.6}
.fx-line-s{margin-top:12px;font-size:14px;color:var(--gray);letter-spacing:.04em;line-height:2}
.fx-line-s b{color:var(--moss);font-weight:600}
.fx-line-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:24px;padding:18px 40px;border-radius:4px;background:#06C755;color:#fff;font-size:16px;letter-spacing:.16em;transition:background .25s ease}
.fx-line-btn:hover{background:#05A948}
.fx-line-note{margin-top:16px;font-size:12.5px;color:var(--gray-light);letter-spacing:.04em;line-height:1.8}

/* ── なぜ表に出ないのか ── */
.fx-why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.fx-why-item{border-top:1px solid var(--line);padding-top:16px}
.fx-why-n{font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--moss)}
.fx-why-item h3{margin-top:8px;font-size:16px;font-weight:700;letter-spacing:.08em;line-height:1.7}
.fx-why-item p{margin-top:8px;font-size:13px;color:var(--gray);line-height:1.9;letter-spacing:.04em}

/* ═══ 受付ページ共通（/owner.html・/closing.html） ═══
   **物件を出さない受付ページ2枚が使う `.ow-*`。** もとは「掲載を希望されるオーナー様へ」
   （貸したい側）のために足したが、「閉業をお考えの方へ」（/closing.html＝借りている側）も
   同じ塊（数字／できること／料金／FAQ＋受付まわり）を持つため、そのまま共用している
   （owner が franchise の `.fx-*` を借りているのと同じ関係）。

   ⚠ **`.ow-*` を触ると2枚とも変わる。** 片方だけ変えたいときは `.page-owner` /
      `.page-closing` で限定すること。複製して `.cl-*` を作り直さないこと（同じ見た目が
      2本になると、片方だけ直されてページ同士がずれる）。

   ヒーロー・フォーム・3カラム（.fx-*）と流れ（.flow/.fl）は借りたい側と同じ部品をそのまま使う。
   色・書体・角丸は :root から動かさない。 */

/* ── 掲載の実数 ──
   盛った数字を置く場所ではない。3つとも配信中の在庫から数えたものだけを出す。 */
/* ヒーローはTOPの `.hero` をそのまま使う。ただしTOPのリード文は1行に収まる短さを前提に
   `white-space:nowrap` が入っており、こちらのリード文だと画面外へ突き抜ける。
   このページだけ折り返す（スマホ幅は元から normal なので、ここはPC向けの上書き）。

   ⚠ **幅は右の写真カードの手前で止める。** `.hero-photo` は左端が `57.78%`（画面幅に比例）で、
      既定の `max-width:704px` のまま折り返すと文字が写真の上に重なる（`.hero-copy` は
      写真より前面なので隠れはしないが、白い文字が明るい写真に乗って読めなくなる）。
      画面幅に追従させるため vw も噛ませている（固定値だけだと 1100px 以下でまたぶつかる）。

   閉業ページ（.page-closing）も帯3段＋折り返すリード文で条件がまったく同じなので、
   同じ値を共有する。片方だけ直すと2枚の見出しの位置がずれる。 */
.page-owner .hero-copy p,
.page-closing .hero-copy p,
.page-zoning-top .hero-copy p{white-space:normal;max-width:min(600px,52vw)}

/* 見出しの上に置く小さな宛名。帯（h1 span）と同じ緑を敷くと帯が4段に見えるので、
   白い細字のまま置いて「宛名」と「問いかけ」を見分けさせる */
.ow-hero-eyebrow{font-size:14px;font-weight:600;letter-spacing:.16em;color:rgba(255,255,255,.88);margin-bottom:12px}

/* 帯が3段あるぶん、TOP（2段・top:116px）より上から始めないと
   リード文が下の数字パネル（ヒーローへ -80px 食い込む）に隠れる。
   64px では実測でリード文の最終行が2px潜り込んだので、48px まで上げている。
   閉業ページも同じ3段なので同じ値。 */
.page-owner .hero-copy,
.page-closing .hero-copy,
.page-zoning-top .hero-copy{top:48px}

/* TOPの検索パネル（.search-panel）・franchise の入力パネルと同じ食い込ませ方。
   ヒーローの下に素直に置くと、TOPと並べたときだけこのページが間延びして見える */
.ow-stats-wrap{position:relative;z-index:3;max-width:1056px;margin:-80px auto 0;padding:0 32px}
/* 列数を固定しない。出す数字は「盛らない」方針で増減するため、
   repeat(3,1fr) のまま1つ減らすと右端に空の列ができる */
.ow-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:32px;box-shadow:8px 8px 16px rgba(var(--shadow-rgb),.16)}
.ow-stat{text-align:center}
/* 「入力は1分」のバッジ枠。数字の列と並ぶが数字ではないので、罫線で仕切って別物だと示す */
.ow-stat--note{display:flex;flex-direction:column;align-items:center;gap:8px;border-left:1px solid var(--line)}
.ow-stat-n{font-size:40px;font-weight:700;letter-spacing:.02em;color:var(--moss);line-height:1.2}
.ow-stat-n small{font-size:16px;font-weight:600;letter-spacing:.02em;margin-left:4px}
.ow-stat-l{margin-top:8px;font-size:14px;font-weight:600;letter-spacing:.08em}
.ow-stat-s{margin-top:4px;font-size:12.5px;color:var(--gray);letter-spacing:.04em;line-height:1.8}

/* ── お引き受けできること ──
   .fx-why-item（罫線＋番号）と見た目を変えて、悩みの並びと地続きに見えないようにする。 */
.ow-can{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.ow-can-item{background:var(--cream);border-radius:16px;overflow:hidden}
/* 写真は雰囲気の添え物。比率を固定して4枚の高さを揃える（揃っていないとカードが段違いになる） */
.ow-can-fig{aspect-ratio:16/9;background:var(--moss-tint);overflow:hidden}
.ow-can-fig img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.ow-can-item:hover .ow-can-fig img{transform:scale(1.04)}
.ow-can-body{padding:24px}
.ow-can-item h3{font-size:16px;font-weight:700;letter-spacing:.08em;line-height:1.7;color:var(--moss)}
.ow-can-item p{margin-top:8px;font-size:13px;color:var(--gray);line-height:1.9;letter-spacing:.04em}

/* ── 費用 ──
   他社のオーナー向けページは例外なく料金を明示していた。濁すと問い合わせが来ない。 */
.ow-fee{background:var(--moss-deep);color:#fff;border-radius:16px;padding:40px 32px;text-align:center}
.ow-fee-h{font-size:14px;letter-spacing:.08em;color:rgba(255,255,255,.72)}
.ow-fee-n{margin-top:8px;font-size:56px;font-weight:700;letter-spacing:.02em;line-height:1.2}
.ow-fee-n span{font-size:24px;font-weight:600;letter-spacing:.08em;margin-left:4px}
.ow-fee-s{margin-top:16px;font-size:13px;letter-spacing:.04em;color:rgba(255,255,255,.72);line-height:2}
.ow-fee-s b{color:#fff;font-weight:600}
/* 「0円」への断り書き。読み飛ばされる大きさにはしないが、約束そのものより目立たせない */
.ow-fee-note{max-width:640px;margin:20px auto 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.22);font-size:12.5px;letter-spacing:.04em;color:rgba(255,255,255,.62);line-height:1.9;text-align:left}

/* ── よくあるご質問 ──
   既定で畳む。5問を開いたまま並べると、下にある受付フォームが画面から遠くなる。 */
.ow-faq{border-top:1px solid var(--line)}
.ow-faq-item{border-bottom:1px solid var(--line)}
.ow-faq-q{display:flex;align-items:flex-start;gap:12px;padding:20px 0;font-size:15px;font-weight:600;letter-spacing:.08em;line-height:1.7;cursor:pointer;list-style:none}
.ow-faq-q::-webkit-details-marker{display:none}
.ow-faq-q::before{content:"Q";font-family:var(--ff-en);font-weight:700;letter-spacing:.02em;color:var(--moss);flex-shrink:0}
.ow-faq-item[open] .ow-faq-q{color:var(--moss)}
.ow-faq-a{display:flex;gap:12px;padding:0 0 20px;font-size:13px;color:var(--gray);line-height:1.9;letter-spacing:.04em}
.ow-faq-a::before{content:"A";font-family:var(--ff-en);font-weight:700;letter-spacing:.02em;color:var(--gray-light);flex-shrink:0}

/* ── 非公開募集の希望 ──
   このページの要。他の任意項目と同じ見た目にすると読み飛ばされるため、
   同意チェック（.fx-agree）とも違う枠で出す。 */
.ow-check{display:flex;align-items:flex-start;gap:12px;margin-top:24px;padding:20px;border:1px solid var(--moss);border-radius:8px;background:var(--moss-tint);font-size:13px;color:var(--ink);letter-spacing:.04em;line-height:1.9;cursor:pointer}
.ow-check input{appearance:none;-webkit-appearance:none;flex-shrink:0;width:20px;height:20px;margin:2px 0 0;border:none;background:url(../images/icons/checkbox.svg) center/20px 20px no-repeat;cursor:pointer}
.ow-check input:checked{background-image:url(../images/icons/checkbox-on.svg)}
.ow-check b{color:var(--moss);font-weight:700;letter-spacing:.08em}

/* ── ご相談内容（自由記述） ── */
.ow-note-field{margin-top:24px}
.ow-textarea{width:100%;border:none;border-radius:4px;background:#F5F3EF;padding:16px;font-family:var(--ff-jp);font-size:15px;color:var(--ink);outline:none;letter-spacing:.02em;line-height:1.8;resize:vertical;transition:background .2s ease}
.ow-textarea:focus{background:#fff;box-shadow:0 0 0 1px var(--moss) inset}

/* ── 受付完了 ──
   ⚠ 送信が成功したあとにだけ出す（public/js/owner.js）。フォームと入れ替えて表示する。 */
.ow-done{margin-top:56px;background:#fff;border:1px solid var(--moss);border-radius:16px;padding:40px 32px;text-align:center}
.ow-done-ttl{font-size:22px;font-weight:700;letter-spacing:.08em;line-height:1.5;color:var(--moss)}
.ow-done-note{margin-top:12px;font-size:14px;color:var(--gray);letter-spacing:.04em;line-height:2}
.ow-done-note b{color:var(--ink);font-weight:600}
.ow-done-line{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:24px;padding:16px 32px;border-radius:4px;background:#06C755;color:#fff;font-size:15px;letter-spacing:.16em;transition:background .25s ease}
.ow-done-line:hover{background:#05A948}

/* ── 電話のご案内 ──
   貸主には電話が一番効くので、フォームのすぐ下に置く。 */
.ow-tel{margin-top:32px;text-align:center}
.ow-tel-h{font-size:13px;color:var(--gray);letter-spacing:.08em}
.ow-tel-n{display:inline-block;margin-top:8px;font-size:32px;font-weight:700;letter-spacing:.02em;color:var(--moss);transition:opacity .25s ease}
.ow-tel-n:hover{opacity:.55}
.ow-tel-s{margin-top:4px;font-size:12.5px;color:var(--gray-light);letter-spacing:.04em}

/* ═══ 閉業をお考えの方へ（/closing.html）専用 ═══
   数字・できること・費用・FAQ・受付まわりは上の `.ow-*` をそのまま共用している。
   ここに置くのは、閉業ページにしか無い3つの塊だけ。 */

/* ── 閉め方は2つあります ──
   「元どおりに戻して返す」と「そのまま引き継ぐ」を横に並べて、
   出ていくお金と残るお金の向きを対で見せる。
   ⚠ 金額（原状回復の坪単価・造作譲渡料の相場）を入れる作りにしないこと。
      物件と契約でまるきり変わるうえ、当社が数えた数字でもない。 */
.cl-compare{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:start}
.cl-way{background:var(--cream);border:1px solid var(--line);border-radius:16px;overflow:hidden}
/* 引き継ぐ側（B）だけ枠を締める。色を増やさず、既存の緑の濃淡だけで差を付ける */
.cl-way.is-recommend{border-color:var(--moss);background:var(--moss-tint)}
.cl-way-fig{aspect-ratio:16/9;background:var(--moss-tint);overflow:hidden}
.cl-way-fig img{width:100%;height:100%;object-fit:cover}
.cl-way-body{padding:24px}
.cl-way-tag{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:99px;background:var(--gray-light);color:#fff;font-family:var(--ff-en);font-size:14px;font-weight:700;letter-spacing:.02em}
.cl-way.is-recommend .cl-way-tag{background:var(--moss)}
.cl-way-body h3{margin-top:12px;font-size:17px;font-weight:700;letter-spacing:.08em;line-height:1.7;color:var(--moss)}
.cl-way-body>p{margin-top:8px;font-size:13px;color:var(--gray);line-height:1.9;letter-spacing:.04em}
.cl-way-body>p b{color:var(--ink);font-weight:600}
.cl-way-list{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);list-style:none}
.cl-way.is-recommend .cl-way-list{border-top-color:rgba(var(--moss-rgb),.24)}
.cl-way-list li{position:relative;padding-left:20px;font-size:13px;line-height:1.9;letter-spacing:.04em}
.cl-way-list li+li{margin-top:6px}
/* 印は文字ではなく点で出す。記号（✓/×）を使うと端末ごとに字形が変わって揃わない */
.cl-way-list li::before{content:"";position:absolute;left:0;top:.75em;width:8px;height:8px;border-radius:99px}
/* 出ていくお金（A）は沈んだ灰、残るお金（B）は緑。色は :root のものだけ */
.cl-way-list--out li{color:var(--gray)}
.cl-way-list--out li::before{background:var(--gray-light)}
.cl-way-list--in li{color:var(--ink)}
.cl-way-list--in li::before{background:var(--moss)}
/* ⚠ この注記を消さないこと。Bを「必ずそうなる」と読まれると、
      承諾が下りなかったときに話が違うことになる。 */
.cl-compare-note{max-width:760px;margin:20px auto 0;font-size:12.5px;color:var(--gray);line-height:1.9;letter-spacing:.04em;text-align:center}

/* ── 秘密厳守の約束 ──
   言葉ではなく「やらないこと」を並べる箇所。他社を見て回って効いていたのはこちらだった。
   費用（.ow-fee）が濃い緑の塊なので、こちらは白地＋緑の縁で受けて、同じ重さで2つ続かないようにする。 */
.cl-secret{background:#fff;border:1px solid var(--moss);border-radius:16px;padding:32px}
.cl-secret-list{list-style:none}
.cl-secret-list li{position:relative;padding-left:28px;font-size:14px;color:var(--gray);line-height:1.9;letter-spacing:.04em}
.cl-secret-list li+li{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.cl-secret-list li b{color:var(--moss);font-weight:700;letter-spacing:.08em}
.cl-secret-list li::before{content:"";position:absolute;left:8px;top:.8em;width:8px;height:8px;border-radius:99px;background:var(--moss)}
.cl-secret-list li+li::before{top:calc(16px + .8em)}

/* ── 譲り受けたい方への導線 ──
   間違ってこちらへ来た「引き継ぎたい側」を /franchise.html へ戻す1本だけ。
   ⚠ 逆向き（franchise → closing）は付けない。借りたい人の導線に閉業の話を混ぜると、
      何を探すページか分からなくなる。 */
.cl-cross{margin-top:56px;padding-top:32px;border-top:1px solid var(--line);text-align:center}
.cl-cross-h{font-size:15px;font-weight:600;letter-spacing:.08em;color:var(--ink)}
.cl-cross-h b{color:var(--moss);font-weight:700}
.cl-cross-s{margin-top:8px;font-size:13px;color:var(--gray);letter-spacing:.04em;line-height:1.9}
.cl-cross-btn{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:12px 24px;border:1px solid var(--moss);border-radius:4px;font-size:14px;letter-spacing:.08em;color:var(--moss);transition:background .25s ease,color .25s ease}
.cl-cross-btn:hover{background:var(--moss);color:#fff}
/* 矢印は緑のSVG。反転時に見えなくなるので、ホバー中だけ白へ寄せる */
.cl-cross-btn:hover img{filter:brightness(0) invert(1)}

/* ── いまの状況（受付フォーム） ──
   このページの要。他の任意項目と横並びにすると読み飛ばされるので、行を分けて置く。 */
.cl-status-field{margin-top:24px}

@media(prefers-reduced-motion:reduce){
  .fx-bar-fill,.fx-scan-fill{transition:none}
  .fx-skel{animation:none}
}

.pagination{margin-top:24px;display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap}
#se-pagination{margin-top:40px}
.page-btn{
  border:1px solid var(--line);border-radius:99px;min-width:36px;height:36px;padding:0 12px;
  font-size:14px;font-family:var(--ff-en);letter-spacing:.02em;color:var(--ink);background:#fff;
  transition:all .22s ease;
}
.page-btn:hover:not(:disabled){border-color:var(--moss);color:var(--moss);background:var(--moss-tint)}
.page-btn.on{background:var(--moss-tint);border-color:var(--moss);color:var(--moss);font-weight:700}
.page-btn:disabled{color:var(--gray-light);cursor:default;opacity:.5}
/* 省いた番号の場所に出す「…」。押せるものではないので枠も背景も持たせない
   （.page-btn と同じ高さに揃えて、番号の列から浮かないようにするだけ） */
.page-ellipsis{
  display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:36px;
  font-size:14px;color:var(--gray-light);letter-spacing:.02em;
  /* ⚠ iOS Safari 16以前はプレフィックス側しか見ない。番号を続けて押すときに
     「…」だけが選択されて青く反転するのを防ぐため、両方書く */
  -webkit-user-select:none;user-select:none;
}

.tagdir{padding:24px 0}
.tagdir-row{display:flex;gap:16px;padding:16px 0 17px;border-bottom:1px solid var(--line)}
.tagdir-row:last-child{border-bottom:none}
.tagdir-label{flex-shrink:0;width:96px;padding-top:8px;font-size:14px;color:var(--ink);letter-spacing:.08em}
.tagdir-links{flex:1;display:flex;flex-wrap:wrap;align-items:center}
.tagdir-links a{display:inline-flex;align-items:center;height:24px;padding:0 9px 0 8px;border-right:1px solid var(--line);font-size:14px;color:var(--gray);letter-spacing:.02em;transition:color .2s ease}
.tagdir-links a:last-child{border-right:none}
.tagdir-links a:hover{color:var(--moss)}

.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.fl{border-top:1px solid var(--line);padding-top:16px}
.fl .fn{font-family:var(--ff-en);font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--moss)}
.fl h3{margin-top:8px;font-size:15px;font-weight:700;letter-spacing:.08em;line-height:1.7}
.fl p{margin-top:8px;font-size:13px;color:var(--gray);line-height:1.9}

@media(max-width:1280px){
  .fx-grid{grid-template-columns:repeat(2,1fr)}
  .fx-wards{grid-template-columns:repeat(4,1fr)}
  .flow{grid-template-columns:repeat(2,1fr)}
  .fx-hero h1{font-size:36px}
}
@media(max-width:990px){
  .fx-cards{grid-template-columns:1fr}
  .fx-why-grid{grid-template-columns:1fr}
  .fx-form-grid{grid-template-columns:1fr}
  .fx-hero-foot{flex-direction:column;align-items:flex-start;gap:16px}
  .fx-note{align-self:flex-end}
  .ow-can{grid-template-columns:1fr}
  /* 2択の比較。横に並べられなくなったら縦に積む（A→Bの順は変えない） */
  .cl-compare{grid-template-columns:1fr}
}
@media(max-width:540px){
  .fx-hero{padding:40px 0 64px}
  .fx-hero h1{font-size:26px}
  .fx-hero p{font-size:13px;line-height:1.7}
  .fx-panel-wrap{margin-top:-32px;padding:0 16px}
  .fx-panel{padding:24px 16px}
  .fx-bar-steps{gap:12px}
  .fx-bar-step{font-size:12px}
  .fx-step-h{font-size:18px}
  .fx-grid{grid-template-columns:1fr;gap:12px}
  /* 1列になったら範囲欄も1列ぶん。span 2 のままだと空の列ができてしまう */
  .fx-f--range{grid-column:auto}
  /* 1列に select を2つ並べると「その他（数値を入力）」が読めないほど狭くなるので、
     下限・上限を縦に積んで、どちらの欄か分かる見出しを出す */
  .fx-range{grid-template-columns:1fr;gap:12px}
  .fx-range-sep{display:none}
  .fx-range-lbl{display:block;margin-bottom:4px;font-size:12px;letter-spacing:.08em;color:#9B9892}
  .fx-wards{grid-template-columns:repeat(2,1fr)}
  .fx-chips .chip{padding:8px 14px;font-size:13px}
  /* ステップの送りはタップ目標を大きく取りたいので縦積みにする */
  .fx-nav{flex-direction:column-reverse;align-items:stretch;gap:16px}
  .fx-next,.fx-run{width:100%}
  .fx-scan{padding:0 16px}
  .fx-scan-ward{font-size:24px}
  .fx-form{padding:24px 16px}
  .fx-form-h{font-size:18px}
  .fx-line-in{padding:24px 16px}
  .fx-line-h{font-size:18px}
  .fx-line-btn{display:flex;width:100%;padding:18px 24px;font-size:15px}
  .fx-karte-meta{grid-template-columns:1fr;gap:4px 0}
  .fx-karte-meta dd{margin-bottom:8px}
  .flow{grid-template-columns:1fr}
  .tagdir-row{flex-direction:column;gap:4px}
  .tagdir-label{width:auto}
  /* オーナー様ページ・閉業ページ（どちらも帯3段＋折り返すリード文で条件が同じ）。
     ヒーローのリード幅の上書き（写真を避けるための min(600px,52vw)）はPC向け。
     スマホでは写真が文字の**下**へ回るので避ける必要が無く、52vw を効かせたままだと
     幅200px ほどの細い柱になって行数が増え、今度は縦から写真にぶつかる。 */
  .page-owner .hero-copy p,
  .page-closing .hero-copy p,
  .page-zoning-top .hero-copy p{max-width:100%}
  /* 帯が3段あるぶん、TOP（2段前提の値）のままだとリード文が写真にぶつかる。
     見出しを上へ寄せ、写真とヒーローの高さを1段ぶん下へずらす。
     写真を 260px に置いたときは実測でリード文の下端とちょうど接したので、余白を足して 288px。 */
  .page-owner .hero,
  .page-closing .hero,
  .page-zoning-top .hero{height:calc(376px + 56.25vw)}
  .page-owner .hero-copy,
  .page-closing .hero-copy,
  .page-zoning-top .hero-copy{top:24px}
  .page-owner .hero-photo,
  .page-closing .hero-photo,
  .page-zoning-top .hero-photo{top:288px}
  .ow-hero-eyebrow{font-size:12px;margin-bottom:8px}
  /* 数字は1列に積む（3列のままだと桁が折り返して読めない） */
  .ow-stats-wrap{margin-top:-56px;padding:0 16px}
  .ow-stats{grid-template-columns:1fr;gap:20px;padding:24px 16px}
  /* 1列になったら仕切りは左ではなく上（左罫線は縦積みだと意味を成さない） */
  .ow-stat--note{border-left:none;border-top:1px solid var(--line);padding-top:20px}
  .ow-stat-n{font-size:32px}
  .ow-can-item{padding:20px 16px}
  .ow-fee{padding:32px 16px}
  .ow-fee-n{font-size:44px}
  .ow-faq-q{font-size:14px}
  .ow-check{padding:16px}
  .ow-done{padding:32px 16px}
  .ow-done-ttl{font-size:18px}
  .ow-done-line{display:flex;width:100%;padding:16px 24px;font-size:14px}
  .ow-tel-n{font-size:26px}
  /* 閉業ページ。左右の余白を詰めるだけで、構造は変えない */
  .cl-way-body{padding:20px 16px}
  .cl-way-body h3{font-size:15px}
  .cl-compare-note{text-align:left}
  .cl-secret{padding:24px 16px}
  .cl-secret-list li{font-size:13px}
  .cl-cross-btn{display:flex;justify-content:center;width:100%;padding:16px 24px}
}
/* ═══ ミニ基準（320〜360px） ═══ */
@media(max-width:360px){
  .fx-wards{grid-template-columns:1fr}
  .fx-bar-steps{flex-wrap:wrap;gap:8px 12px}
}

/* ═══ さがすページ（検索結果） ═══
   PCは条件パネルを左サイドバーに常設し、結果を見ながらその場で条件を直せる。
   タブレット以下はサイドバーをオーバーレイ化し、「絞り込む」ボタンから開閉する。
   条件パネルの中身（タブ・フィールド）はTOPの検索パネルと同じ部品（#sp-fields等）を
   使い回しているため、専用のCSSはレイアウト（サイドバー化・折りたたみ）のみ。 */
/* 一覧は横に並べて見比べる画面なので、他ページ（1120px）より広く取る。
   ヘッダーは元から全幅なので、広げても上下で幅が食い違わない */
/* 見出し・件数・タブで画面の上半分を使ってしまうと、肝心の物件が1行しか見えない。
   ここは意図的に詰めている（余白・文字サイズを大きく戻さないこと） */
.se-wrap{max-width:1400px;margin:0 auto;padding:12px 32px 96px;scroll-margin-top:calc(var(--header-h) + 16px)}
.se-top{display:flex;flex-direction:column;gap:12px}
.se-top .sp-tabs{border-top:1px solid var(--line)}
.se-top .sp-tab{padding:10px 0 12px}
.se-body{display:flex;align-items:flex-start;gap:32px}
/* 条件パネルは画面に貼り付けて、どこまでスクロールしても触れる位置に置く。
   以前は本文と一緒に流れて画面外へ消えてしまい、条件を変えるたびにページ先頭へ
   戻る必要があった。ヘッダー（sticky・高さ103px）の下に留め、はみ出すぶんは
   パネルの中（.se-side-scroll）だけでスクロールさせる。 */
.se-side{
  flex:0 0 280px;min-width:0;background:#fff;border-radius:16px;padding:16px;
  position:sticky;top:calc(var(--header-h) + 16px);max-height:calc(100vh - var(--header-h) - 32px);
  display:flex;flex-direction:column;
}
.se-side .search-row{grid-template-columns:1fr;gap:0}
/* 条件と会員登録の案内だけが内側でスクロールし、見出し（絞り込み／条件をクリア）と
   「この条件で◯件を見る」はパネルの上下に留まる */
.se-side-scroll{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:6px;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.se-side-scroll::-webkit-scrollbar{width:6px}
.se-side-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.se-side-head{display:flex;align-items:center;justify-content:space-between;width:100%;flex:0 0 auto;margin-bottom:0;padding-bottom:12px;border-bottom:1px solid var(--line)}
.se-side-title{font-size:16px;font-weight:600;letter-spacing:.06em;color:var(--ink)}
/* 件数は見出しの右。条件を触るたびここが動くので、押す前に結果が分かる */
.se-side-total{font-size:13px;color:var(--gray);letter-spacing:.04em}
.se-side-total b{font-family:var(--ff-en);font-size:16px;font-weight:700;color:var(--moss);margin:0 2px}

/* フリーワード（物件名・区・最寄駅に当たる） */
.se-kw{position:relative;margin-bottom:12px}
.se-kw-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--gray-light);pointer-events:none}
.se-kw-input{
  width:100%;height:40px;padding:0 10px 0 32px;border:1px solid var(--line);border-radius:4px;background:#fff;
  font-family:var(--ff-jp);font-size:14px;color:var(--ink);letter-spacing:.04em;
}
.se-kw-input::placeholder{color:var(--gray-light)}
.se-kw-input:focus{outline:none;border-color:var(--moss)}

/* いま効いている条件。一覧の上にも同じチップが出る */
.se-side-cond{margin-bottom:12px;padding:12px;background:var(--cream-2);border-radius:8px}
.se-side-cond[hidden]{display:none}
.se-side-cond-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.se-side-cond-title{font-size:13px;font-weight:600;color:var(--ink);letter-spacing:.04em}
.se-side-cond-clear{border:none;background:none;font-family:var(--ff-jp);font-size:12px;color:var(--moss);letter-spacing:.04em;cursor:pointer;text-decoration:underline}
.se-side-cond-clear:hover{color:var(--moss-deep)}
.se-side-close{display:none;border:none;background:none;color:var(--gray);width:32px;height:32px;place-items:center;cursor:pointer}
.se-overlay{display:none}

/* --- 詳細検索（モーダル） ------------------------------------------------
   サイドバー（.se-side）そのものを画面中央へ広げる（js/search.js の openAdvanced）。
   中身は同じ部品なので、ここでは「モーダルのときだけ出す／隠す／並べ方」だけを書く。
   ⚠ .se-side.is-modal はクラス2つぶんの強さで、タブレット以下の引き出し用
     （@media(max-width:990px) の .se-side）より後ろに書かなくても勝つ。
     逆に、下の狭い画面用の .se-side.is-modal はここより**後ろ**に置くこと（同じ強さなので） */
/* 入口。サイドバーで足りている人の邪魔をしないよう、見出しの横に文字リンク程度で置く */
.se-adv-open{
  display:inline-flex;align-items:center;gap:4px;margin:0 auto 0 10px;padding:2px 0;
  border:none;background:none;font-family:var(--ff-jp);font-size:12px;letter-spacing:.04em;
  color:var(--moss);cursor:pointer;white-space:nowrap;
}
.se-adv-open:hover{text-decoration:underline}
.se-side-title-modal{display:none}
.se-adv-tabs{display:none}

.se-side.is-modal{
  position:fixed;z-index:70;inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(1040px,calc(100vw - 48px));max-width:none;max-height:calc(100vh - 48px);
  padding:24px 28px;border-radius:12px;box-shadow:0 16px 48px rgba(0,0,0,.18);
  overflow:hidden;transition:none;
}
.se-side.is-modal .se-side-head{gap:16px;padding-bottom:16px}
.se-side.is-modal .se-side-title{font-size:20px}
.se-side.is-modal .se-side-title-side,
.se-side.is-modal .se-adv-open{display:none}
.se-side.is-modal .se-side-title-modal{display:inline}
.se-side.is-modal .se-side-total{margin-left:auto}
.se-side.is-modal .se-side-close{display:grid}
/* 検索対象（すべて／事務所物件／店舗物件）。見た目は一覧の「区画すべて／物件でまとめる」と揃える */
.se-side.is-modal .se-adv-tabs{
  display:inline-flex;align-self:flex-start;gap:2px;padding:2px;margin:16px 0 8px;
  background:var(--mint);border-radius:4px;flex:0 0 auto;
}
.se-adv-tab{
  border:none;border-radius:3px;background:none;padding:8px 20px;
  font-family:var(--ff-jp);font-size:14px;letter-spacing:.06em;line-height:1.4;color:var(--moss);
  cursor:pointer;white-space:nowrap;transition:background .2s ease,color .2s ease;
}
.se-adv-tab:hover{background:rgba(255,255,255,.6)}
.se-adv-tab[aria-pressed="true"]{background:var(--moss);color:#fff}
.se-side.is-modal .se-side-scroll{padding-right:12px}
.se-side.is-modal .se-kw{max-width:480px;margin-top:8px}
/* 条件欄は段組み。欄ごとに高さがまちまち（エリア23・駅・人数…）なので、
   格子ではなく新聞の段のように上から詰める。欄の途中で段が割れないようにする */
.se-side.is-modal .search-row{display:block;column-count:3;column-gap:40px}
.se-side.is-modal .search-row .field{break-inside:avoid}
/* ⚠ 段の長さを揃えるため、縦に長くなる欄をモーダルでだけ詰める。
   以前はこだわり条件のタグが汎用の .opt（width:100%）を受けて1個1行の大きなボタンになり、
   その欄だけで629pxあった。業種だけが入った中の段が443pxで止まり、下半分が空いて見えていた。
   - こだわり条件：タグを中身の幅にして横に折り返す
   - 業種：2列にする
   サイドバー（幅280px）はこれまでどおり1列のまま */
.se-side.is-modal .opt-tag{width:auto}
.se-side.is-modal .field[data-key="USE"] .fg-body{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
/* 物件種別（店舗・事務所・居抜き）はモーダルでは上のタブと二重になるので隠す。
   ⚠ 「居抜き」はこだわり条件の「居抜き」と同じものなので、隠しても選べなくはならない */
.se-side.is-modal .field[data-key="KIND"]{display:none}
.se-side.is-modal .search-foot{flex-direction:row;justify-content:flex-end;align-items:center;gap:12px;padding-top:16px}
.se-side.is-modal .btn-clear{width:auto;padding:0 24px}
.se-side.is-modal .btn-search{width:auto;min-width:300px}
/* PCは普段この背景を使わない（タブレット以下の引き出し専用）ので、モーダルのときだけ出す */
body.se-adv-on .se-overlay{display:block;position:fixed;inset:0;z-index:69;background:rgba(0,0,0,.32)}
body.se-adv-on .se-overlay[hidden]{display:none}
/* サイドバーが抜けたぶん一覧が左へ寄ると、背景越しにカードがずれて見える。元の幅を空けておく
   （280px＋間隔32px。1280px以下は .se-side が264pxになる） */
@media(min-width:991px){
  body.se-adv-on .se-main{margin-left:312px}
}
@media(min-width:991px) and (max-width:1280px){
  body.se-adv-on .se-main{margin-left:296px}
}
@media(max-width:990px){
  .se-side.is-modal{
    left:0;top:0;transform:none;width:100%;height:100%;max-height:none;
    border-radius:0;padding:20px 16px;box-shadow:none;
  }
  .se-side.is-modal .search-row{column-count:2;column-gap:24px}
  .se-side.is-modal .btn-search{min-width:0;flex:1}
}
@media(max-width:640px){
  .se-side.is-modal .search-row{column-count:1}
  .se-side.is-modal .se-adv-tabs{align-self:stretch}
  .se-side.is-modal .se-adv-tab{flex:1;padding:8px 0}
  .se-side.is-modal .search-foot{flex-direction:column;align-items:stretch}
  .se-side.is-modal .btn-clear{width:100%}
}

/* 区切りは淡いグレー。全欄が緑の線だと、どれも同じ強さで主張して読み分けられない */
.field--expanded{border-bottom:1px solid var(--line);padding:16px 0;margin-bottom:0}
.field--expanded:last-child{border-bottom:none;padding-bottom:0}

/* 欄の見出し。押すと中身（.fg-inner）ごと畳む。条件は残したまま見た目だけ閉じる。
   ⚠ 見出しは button。以前の `label` 指定は、選択肢の行（これも label 要素）にも当たって
     いたので残さないこと */
.fg-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:0;
  border:none;background:none;cursor:pointer;font-family:var(--ff-jp);text-align:left;
}
.fg-head-label{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:.04em}
.fg-head-caret{
  flex-shrink:0;width:9px;height:9px;margin-top:-3px;
  border-right:1.5px solid var(--gray);border-bottom:1.5px solid var(--gray);
  transform:rotate(-135deg);transition:transform .2s ease;
}
.fg-head[aria-expanded="false"] .fg-head-caret{transform:rotate(45deg);margin-top:-6px}
.fg-inner{margin-top:10px}
.field--expanded.is-closed .fg-inner{display:none}

/* ⚠ エリア・駅の欄にあった max-height:220px（欄の中だけのスクロール）は**外した**。
   パネル自体がスクロールするようになった今、入れ子にすると二重スクロールになり、
   「23区あるのに6件しか見えず、どこを転がしているのか分からない」状態に戻る。
   長い欄は件数で畳み（.is-folded）、絞り込み入力で目的の候補へ辿り着かせる。 */

/* 欄そのものへの断り書き（いまは駅の「最寄駅が登録されている物件だけが対象です」） */
.fg-note{margin:2px 0 8px;font-size:12px;line-height:1.6;color:var(--gray-light);letter-spacing:.04em}

/* 候補の絞り込み入力 */
.fg-filter{
  width:100%;height:36px;margin:4px 0 10px;padding:0 10px;
  border:1px solid var(--line);border-radius:4px;background:#fff;
  font-family:var(--ff-jp);font-size:14px;color:var(--ink);letter-spacing:.04em;
  transition:border-color .16s ease;
}
.fg-filter::placeholder{color:var(--gray-light)}
.fg-filter:focus{outline:none;border-color:var(--moss)}
.fg-filter::-webkit-search-cancel-button{cursor:pointer}

/* 畳んである候補。**DOMには残っていて、見た目だけ隠している**（理由は js/app.js の注意書き） */
.field--expanded .opt-check.is-folded{display:none}
.field--foldable.is-expanded .opt-check.is-folded,
.field--foldable.is-searching .opt-check.is-folded{display:flex}
/* 絞り込み入力に一致しなかった候補。
   ⚠ 畳みを解除する上の2つ（.is-expanded / .is-searching）はクラス4つぶんの強さがあるので、
     `.field--expanded .opt-check.is-hidden` だけでは**負けて消えない**。同じ強さで並べて打ち消す
     （実際、これが無いと「渋谷」で絞ったのに9件目以降が全部出たままになる）。 */
.field--expanded .opt-check.is-hidden,
.field--foldable.is-expanded .opt-check.is-hidden,
.field--foldable.is-searching .opt-check.is-hidden{display:none}
/* 選択済みの候補は、畳んでいても検索中でも必ず見せる（いま何で絞っているか見失うため）。
   上の .is-hidden 群と同じ強さ＋:has のぶんで勝つよう、3通りとも書き出す */
.field--expanded .opt-check:has(input:checked),
.field--foldable.is-expanded .opt-check:has(input:checked),
.field--foldable.is-searching .opt-check:has(input:checked){display:flex}

.fg-more{
  display:flex;align-items:center;gap:6px;margin-top:10px;padding:0;border:none;background:none;
  font-family:var(--ff-jp);font-size:13px;letter-spacing:.04em;color:var(--moss);cursor:pointer;
}
.fg-more:hover{text-decoration:underline}
.fg-more[hidden]{display:none}
.fg-more-n{color:var(--gray-light)}
.fg-more-n::before{content:"+"}
.fg-more-n[hidden]{display:none}
/* 掲載0件で押せなくした区（js/app.js）。「掲載準備中」と添えて薄く出す */
.field--expanded .opt-check.is-empty{cursor:not-allowed;opacity:.55}
.field--expanded .opt-check.is-empty .opt-count{font-size:12px}
.fg-empty{margin-top:8px;font-size:13px;color:var(--gray-light);letter-spacing:.04em}
.fg-empty[hidden]{display:none}
/* TOPヒーローのドロップダウンではAREAの行にcream背景を付けているが（.field[data-key="AREA"] .opt-check）、
   サイドバーの常時展開表示はUSE等の他フィールドと見た目を揃えるため打ち消す */
.field--expanded[data-key="AREA"] .opt-check{background:none}

/* さがすページのサイドバー限定（.field--expanded配下）。TOPヒーロー検索の
   ドロップダウン内チェックボックス（.field .opt-check）とはマークアップが異なるため、
   影響が出ないよう常に.field--expandedの子孫として指定する */
.field--expanded .opt-check{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;cursor:pointer}
.field--expanded .opt-check input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.field--expanded .opt-left{display:flex;align-items:center;gap:4px;min-width:0}
.field--expanded .opt-swatch{position:relative;flex-shrink:0;width:14px;height:14px;border:1.5px solid var(--swatch-line);border-radius:2px;background:#fff;transition:background .15s ease,border-color .15s ease}
.field--expanded .opt-swatch::after{content:"";position:absolute;left:3px;top:1px;width:4px;height:7px;border:solid var(--live-pale);border-width:0 1.5px 1.5px 0;transform:rotate(45deg);opacity:0}
.field--expanded .opt-check input:checked + .opt-left .opt-swatch{background:var(--moss);border-color:var(--moss)}
.field--expanded .opt-check input:checked + .opt-left .opt-swatch::after{opacity:1}
.field--expanded .opt-label{font-size:15px;color:var(--gray);letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.field--expanded .opt-check input:checked + .opt-left .opt-label{color:var(--ink)}
.field--expanded .opt-count{flex-shrink:0;font-size:15px;color:var(--gray-light);letter-spacing:.04em}

/* こだわり条件はタグを押して選ぶ。件数を持たない項目なので、1行ずつ並べるより一覧しやすい。
   ⚠ .field--expanded .opt-check（幅100%の行）より**後**に置くこと。先に書くと負ける */
.fg-body--tags{flex-direction:row;flex-wrap:wrap;gap:8px}
.opt-tag{
  display:inline-flex;align-items:center;padding:7px 12px;border:1px solid var(--line);border-radius:999px;
  background:#fff;font-family:var(--ff-jp);font-size:13px;color:var(--gray);letter-spacing:.04em;cursor:pointer;
  transition:border-color .16s ease,background .16s ease,color .16s ease;
}
.opt-tag input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.opt-tag:hover{border-color:var(--moss);color:var(--moss)}
.opt-tag:has(input:checked){background:var(--moss-tint);border-color:var(--moss);color:var(--moss);font-weight:600}
/* こだわり条件は「選んだものを全部満たす」（AND）ので、同時に成立しない組み合わせ
   （居抜き⇔スケルトン・10坪以下⇔30坪以上・1階路面⇔地下）は片方を選ぶともう片方を押せなくする。
   押せてしまうと必ず0件になり、何が悪いのか分からない画面になる（js/search.js の EXCLUSIVE_FEATURES） */
.opt-tag.is-disabled{opacity:.4;cursor:not-allowed}
.opt-tag.is-disabled:hover{border-color:var(--line);color:var(--gray)}
/* 物件種別は数が少ないので横に並べる */
.fg-body--inline{flex-direction:row;flex-wrap:wrap;gap:8px 16px}
.fg-body--inline .opt-check{width:auto}

/* 賃料・広さ・坪単価：数値の入力欄2つ＋2つまみのスライダー（app.js の rangeFieldMarkup） */
/* 広さの「坪／㎡」切り替え。表示単位の選択であって条件そのものではないので、
   こだわり条件のタグより控えめに（小さく・枠なし・選んだほうだけ塗る） */
.rng-unitsw{display:inline-flex;gap:2px;padding:2px;margin-bottom:8px;background:var(--mint);border-radius:4px}
.rng-unitsw-btn{
  border:none;border-radius:3px;background:none;padding:4px 12px;
  font-family:var(--ff-jp);font-size:12px;letter-spacing:.04em;line-height:1.4;color:var(--moss);
  cursor:pointer;transition:background .2s ease,color .2s ease;
}
.rng-unitsw-btn:hover{background:rgba(255,255,255,.6)}
.rng-unitsw-btn.is-on{background:var(--moss);color:#fff}
.rng-nums{display:flex;align-items:center;gap:8px;width:100%}
.rng-sep{flex-shrink:0;font-size:14px;color:var(--gray)}
.rng-num-box{
  display:flex;align-items:center;gap:4px;flex:1;min-width:0;height:40px;padding:0 10px;
  border:1px solid var(--line);border-radius:4px;background:#fff;
}
.rng-num-box:focus-within{border-color:var(--moss)}
.rng-num{
  width:100%;min-width:0;border:none;background:none;text-align:right;
  font-family:var(--ff-jp);font-size:15px;color:var(--ink);
  appearance:textfield;-moz-appearance:textfield;
}
/* 数字の上下ボタンは出さない（幅を食ううえ、刻みが決まっているので使い道がない） */
.rng-num::-webkit-outer-spin-button,.rng-num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.rng-num:focus{outline:none}
.rng-num::placeholder{color:var(--gray-light)}
.rng-unit{flex-shrink:0;font-size:13px;color:var(--gray)}
/* 事務所の「人数から探す」。区切りのタグの下に「□人〜□人」の自由入力を置く（app.js の peopleFieldMarkup）。
   入力欄の枠は広さ・賃料と同じ .rng-num-box を使い、中身だけ .ppl-num にしている */
.ppl-custom-t{margin:14px 0 6px;font-size:12px;color:var(--gray);letter-spacing:.04em}
.ppl-num{
  width:100%;min-width:0;border:none;background:none;text-align:right;
  font-family:var(--ff-jp);font-size:15px;color:var(--ink);
  appearance:textfield;-moz-appearance:textfield;
}
.ppl-num::-webkit-outer-spin-button,.ppl-num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ppl-num:focus{outline:none}
.ppl-num::placeholder{color:var(--gray-light)}
/* 「募集開始日」。区切りは短い語なので、サイドバーでもタグを中身の幅で横に並べる（app.js の listedFieldMarkup）。
   「カスタム」のときだけ下に日付2つを出す（出し入れは js/search.js の syncListedField） */
.field[data-key="LISTED"] .opt-tag{width:auto}
.lst-custom{display:flex;align-items:center;gap:8px;margin-top:12px}
.lst-custom[hidden]{display:none}
.lst-date{
  flex:1;min-width:0;height:40px;padding:0 8px;border:1px solid var(--line);border-radius:4px;background:#fff;
  font-family:var(--ff-jp);font-size:14px;color:var(--ink);
}
.lst-date:focus{outline:none;border-color:var(--moss)}
/* サイドバー（幅280px）で横に2つ並べると年が切れる（実測「026/09/10」）。モーダル以外は縦に積む */
.se-side:not(.is-modal) .lst-custom{flex-direction:column;align-items:stretch;gap:4px}
.se-side:not(.is-modal) .lst-custom .rng-sep{text-align:center;line-height:1}
.se-side:not(.is-modal) .lst-date{flex:0 0 auto}

/* スライダーは range を2本重ねている。
   ⚠ 重ねたままだと上の1本が全面を覆って下のつまみを掴めないので、
     **帯は pointer-events:none、つまみだけ auto** にしている。ここを外さないこと。 */
.rng-slider{position:relative;height:24px;margin-top:12px}
.rng-track{position:absolute;left:0;right:0;top:11px;height:2px;border-radius:2px;background:var(--line)}
.rng-fill{position:absolute;top:11px;height:2px;border-radius:2px;background:var(--moss)}
.rng-range{
  position:absolute;left:0;top:0;width:100%;height:24px;margin:0;
  background:none;pointer-events:none;appearance:none;-webkit-appearance:none;
}
.rng-range::-webkit-slider-thumb{
  -webkit-appearance:none;pointer-events:auto;
  width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--moss);
  box-shadow:0 1px 3px rgba(17,17,17,.2);cursor:pointer;
}
.rng-range::-moz-range-thumb{
  pointer-events:auto;
  width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--moss);
  box-shadow:0 1px 3px rgba(17,17,17,.2);cursor:pointer;
}
.rng-range:focus-visible::-webkit-slider-thumb{outline:2px solid var(--moss);outline-offset:2px}

.se-side-note{width:100%;margin-top:16px;background:var(--moss-tint);border-radius:4px;padding:14px 15px}
.se-side-note .t{font-size:14px;font-weight:600;color:var(--moss);letter-spacing:.04em}
.se-side-note p{margin-top:4px;font-size:14px;color:var(--gray);letter-spacing:.04em;line-height:1.6}
.se-side-note a{display:block;margin-top:10px;text-align:center;background:var(--moss);color:#fff;border-radius:4px;padding:9px 0;font-size:14px;letter-spacing:.08em;transition:background .22s ease}
.se-side-note a:hover{background:var(--moss-deep)}
/* 会員登録CTA（.se-side-note）は条件と一緒にパネルの中をスクロールする。
   「この条件で◯件を見る」はパネルの下端に固定して、常に同じ位置で押せるようにする。
   ⚠ 以前は sticky bottom:16px で条件の上に浮かせており、**駅の欄に重なって**
     その部分が触れなくなっていた。position は戻さないこと。 */
.se-side .search-foot{
  flex:0 0 auto;margin-top:0;padding-top:12px;flex-direction:column;align-items:stretch;gap:8px;
  background:#fff;border-top:1px solid var(--line);
}
/* 下段は「条件をクリア」と「この条件で検索」の2つ。片方は打ち消し、片方は実行 */
.btn-clear{
  width:100%;height:44px;border:1px solid var(--line);border-radius:4px;background:#fff;
  font-family:var(--ff-jp);font-size:14px;letter-spacing:.06em;color:var(--gray);cursor:pointer;
  transition:border-color .2s ease,color .2s ease;
}
.btn-clear:hover{border-color:var(--moss);color:var(--moss)}
.se-side .btn-search{display:flex;align-items:center;justify-content:center;gap:8px}
.se-side .hit{justify-content:center}
.se-side .btn-search{width:100%;justify-content:center;padding-left:16px;padding-right:16px;border-radius:4px}

.se-main{flex:1;min-width:0}
.se-htop{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.se-heading{font-size:22px;font-weight:700;letter-spacing:.06em;color:var(--ink-2)}
/* ⚠ 伸び縮みの基準を中身の幅（auto）にしておくこと。`flex:1`（基準0）だと入りきらなくても
   次の行へ折り返らず、下の「空室確認 ◯時間前」が画面の右へ突き抜ける。スマホではその分だけ
   ページが横に広がって縮小表示になり、条件パネルの「この条件で検索」が画面の外へ出て押せなくなった
   （2026-09-25 実測：390px幅でページが441pxに） */
.se-htop-live{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0}
.se-htop-badge{display:inline-flex;align-items:center;gap:4px;flex-shrink:0;background:var(--live-pale);border-radius:40px;padding:4px 8px}
.se-htop-badge .sonar{width:6px;height:6px}
.se-htop-status{font-size:12px;font-weight:500;color:var(--live);letter-spacing:.02em}
.se-livebar{margin:0;font-size:13px;color:var(--gray);letter-spacing:.02em;line-height:1.8}
.se-ahead{margin-top:6px;font-size:13px;color:var(--gray);letter-spacing:.04em;line-height:1.7}
.se-ahead b{font-family:var(--ff-en);font-weight:600;color:var(--moss)}

/* 並び替え・条件チップは、一覧をどれだけ下へ送っても見えている必要がある。
   ヘッダー（sticky・103px）の直下に留める。背景を敷かないと、下を流れるカードが
   透けて文字が読めなくなる（body と同じ paper を敷く） */
.se-tools{
  display:flex;align-items:center;flex-wrap:wrap;gap:16px;padding:10px 0 12px;margin-bottom:16px;
  border-bottom:1px solid var(--line);
  position:sticky;top:var(--header-h);z-index:20;background:var(--paper);
}
.se-chips{display:flex;flex-wrap:wrap;gap:8px}
.se-chips[hidden]{display:none}
/* スペック未記載の物件も含める旨の断り書き（補足テキストなのでletter-spacingは4%） */
.se-spec-note{font-size:13px;color:var(--gray);letter-spacing:.04em;line-height:1.6}
.se-spec-note[hidden]{display:none}
.se-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid #E6E5DD;background:var(--cream-2);border-radius:99px;padding:6px 6px 6px 14px;font-size:13px;letter-spacing:.04em;color:var(--ink-2)}
.se-chip button{width:18px;height:18px;flex-shrink:0;border:none;border-radius:50%;background:none;color:#8A8883;cursor:pointer;font-size:13px;line-height:1;display:grid;place-items:center;transition:color .2s ease,background .2s ease}
.se-chip button:hover{color:var(--moss);background:var(--moss-tint)}

.se-count{font-size:14px;letter-spacing:.04em;color:var(--gray)}
.se-count b{font-family:var(--ff-en);font-size:24px;font-weight:800;letter-spacing:.02em;color:var(--live);margin-right:2px}

/* OSEKKAI ROOMsのさがすページと同じ、条件変更／条件保存／並び替えの3列ツールバー（Figma: node 1655:4217）。
   990px以下でもレイアウトは変えず、常に横並び3列のまま */
.se-toolbar{display:flex;align-items:center;gap:8px;padding:8px;flex-shrink:0;background:var(--mint);border-radius:4px;margin-left:auto}
.se-toolbar-btn{
  display:flex;flex:1 0 0;min-width:0;align-items:center;justify-content:center;gap:4px;
  border:none;border-radius:4px;background:none;padding:6px 0;
  font-family:var(--ff-jp);font-size:15px;letter-spacing:.08em;line-height:1.4;color:var(--moss);
  cursor:pointer;white-space:nowrap;transition:background .2s ease,color .2s ease;
}
.se-toolbar-btn:hover{background:rgba(255,255,255,.6)}
#se-filter-open{display:none}
.se-toolbar-btn svg{flex-shrink:0}
.se-toolbar-btn[aria-pressed="true"]{background:var(--moss);color:#fff}
/* 選んだまま「この条件で検索」を押していないときの印。タブレット以下ではパネルを閉じると
   検索ボタンごと隠れるので、一覧側に残るこのボタンで気づけるようにする */
#se-filter-open.is-dirty{background:var(--moss);color:#fff}
.se-toolbar-sort{padding:0}
.se-sort{
  width:100%;height:100%;padding:6px 20px 6px 0;border:none;border-radius:4px;background:none;
  font-family:var(--ff-jp);font-size:15px;letter-spacing:.08em;color:var(--moss);cursor:pointer;text-align:center;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M13 6L8 10L3 6' stroke='%23176B5B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right center;
}
.se-sort:focus-visible{outline:none}

/* 表示単位の切り替え（区画すべて／物件でまとめる）。
   同じビルの別区画が何枚も並ぶため、1棟1枚へ畳めるようにしたもの。
   ツールバーの下に1行で置く（ツールバー内へ入れると4列になり、360px で文字が潰れる） */
.se-viewmode{display:inline-flex;gap:2px;padding:2px;margin-top:8px;background:var(--mint);border-radius:4px}
.se-viewmode-btn{
  border:none;border-radius:3px;background:none;padding:6px 14px;
  font-family:var(--ff-jp);font-size:13px;letter-spacing:.06em;line-height:1.4;color:var(--moss);
  cursor:pointer;white-space:nowrap;transition:background .2s ease,color .2s ease;
}
.se-viewmode-btn:hover{background:rgba(255,255,255,.6)}
.se-viewmode-btn.is-on{background:var(--moss);color:#fff}

/* 「物件でまとめる」で畳んだカードに出す「この建物に4区画（72.9〜118万円）」。
   賃料の下・カードの最下段に置く。押した先は代表区画の詳細ページで、そこに区画の表がある */
.card-units{
  margin-top:6px;font-family:var(--ff-jp);font-size:12px;letter-spacing:.04em;line-height:1.5;
  color:var(--moss);
}

/* 「条件保存」を押したときに、ボタンの真下へ出すパネル（js/save-cond-panel.js）。
   何を・どこに保存したか・何件目かを見せる。自動では消さない（×・外側のクリック・Escで閉じる）。
   PCは .se-tools（sticky）を基準に右端へ重ねるので、一覧を送ってもツールバーと一緒に付いてくる。
   ⚠ 以前ここにあった画面下の帯（.se-toast）は pointer-events:none が中のリンクにまで効き、
      「保存した条件を見る」が押せなかった。重ねる部品にリンクを置くときは押せるか確かめること */
.se-save-panel{
  position:absolute;top:calc(100% - 4px);right:0;z-index:30;width:360px;max-width:calc(100vw - 32px);
  padding:20px 48px 20px 20px;background:#fff;border-radius:8px;box-shadow:8px 8px 24px rgba(var(--shadow-rgb),.16);
  font-family:var(--ff-jp);letter-spacing:.04em;color:var(--ink-2);
}
/* 中の部品は display を持つものがあるので、hidden を確実に効かせる */
.se-save-panel[hidden],.se-save-panel [hidden]{display:none}
.se-save-panel:focus{outline:none}
.se-save-panel-close{
  position:absolute;top:10px;right:10px;width:32px;height:32px;border:none;border-radius:8px;background:none;
  color:#8A8883;cursor:pointer;display:grid;place-items:center;transition:color .2s ease,background .2s ease;
}
.se-save-panel-close:hover{color:var(--moss);background:var(--moss-tint)}
.se-save-panel-ttl{font-size:16px;font-weight:600;line-height:1.5}
.se-save-panel-cond{margin-top:8px;font-size:14px;line-height:1.6;word-break:break-all}
.se-save-panel-where{margin-top:8px;font-size:12px;line-height:1.6;color:var(--gray)}
.se-save-panel-note{margin-top:4px;font-size:12px;line-height:1.6;color:var(--gray)}
.se-save-panel-note a{color:var(--moss);text-decoration:underline}
.se-save-panel-actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-top:16px}
.se-save-panel-view{
  display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:8px;background:var(--moss);
  font-size:13px;font-weight:500;letter-spacing:.08em;color:#fff;transition:opacity .2s ease;
}
.se-save-panel-view:hover{opacity:.85}
.se-save-panel-remove{
  border:none;background:none;padding:0;font-family:var(--ff-jp);font-size:13px;letter-spacing:.04em;
  color:var(--gray);text-decoration:underline;cursor:pointer;
}
.se-save-panel-remove:hover{color:var(--ink-2)}
.se-save-panel-remove:disabled{opacity:.5;cursor:default}

/* 一覧は常にグリッド表示（デザインにリスト表示の切替は存在しない） */
/* 列数は画面幅に追従させる（広い画面ほど1画面に多く並ぶ）。
   最小幅256pxはFigmaのカード幅。3列固定だと、広い画面で右側が余ったままだった */
.se-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(256px,1fr));gap:24px}
/* 0件のときの案内。グリッドの1マスではなく全幅に置く */
.se-empty{grid-column:1 / -1;padding:48px 16px;text-align:center;font-size:14px;color:var(--gray);letter-spacing:.04em;line-height:1.9}
.se-empty b{display:block;font-size:16px;font-weight:600;color:var(--ink);margin-bottom:4px}
.se-empty-clear{border:none;background:none;padding:0;font-family:var(--ff-jp);font-size:14px;color:var(--moss);text-decoration:underline;cursor:pointer}
.se-empty-clear:hover{color:var(--moss-deep)}
/* ホバーは影だけ。何十件も並べて目で追う画面なので、カードが動くと逆に読みにくい
   （写真の軽いズームは .scard:hover .scard-fig img が持っている） */
/* ⚠ **`min-width:0` を外さないこと。** グリッドのマスは既定で `min-width:auto`＝中身より
   小さくならないため、折り返せない要素（`white-space:nowrap` の業種チップなど）が1つでも
   入ると、マスごと広がってカードが枠から飛び出す。 */
.scard{display:flex;flex-direction:column;gap:0;padding:0;border-radius:8px;min-width:0;transition:box-shadow .18s ease}
.scard:hover{box-shadow:0 4px 16px rgba(17,17,17,.08)}
.scard-fig{position:relative;width:100%;aspect-ratio:4/3;border-radius:3px;overflow:hidden;background:var(--cream)}
.scard-fig img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
/* さがす結果・お気に入りの図面。枠は 4:3／16:9／1:1 と場面で変わるが、どれでも切り抜かず収める
   （.card-fig img.is-drawing と同じ扱い。未公開物件 .scard-locked にも付ける） */
.scard-fig img.is-drawing{object-fit:contain;background:#fff}
.scard:hover .scard-fig img{transform:scale(1.04)}
.scard .card-body{flex:1;min-width:0;padding-top:13px}
.uselist div.val{color:var(--ink);font-weight:500;background:var(--cream-2)}

/* 未公開物件（TOPの .card-locked と同じ考え方：写真は伏せ、募集条件はそのまま読ませる）。
   ぼかしは配信の時点で焼き込まれているので、ここでは何もしない（.card-locked の注意書き参照）。 */
.scard-locked{position:relative}

/* 写真が1枚も無い未公開物件（本番 2,237 件のうち 375 件）に敷く飾り。
   images/no-photo-members-*.jpg は**他所の物件の写真**をぼかしたもので、この物件の写真ではない。
   ⚠ **「※イメージ」の札を必ず出すこと。** 無いとこの物件の写真として伝わる。
      画像のパスで当てているのは、未公開カードを描く4か所（js/search.js・NewListings.astro・
      js/detail.js・js/favorites.js が保存するカードHTML）すべてに、JSを触らず同じ札を出すため。
   ⚠ ファイル名を変えるときは src/lib/card.ts の NO_PHOTO_MEMBERS と一緒に直すこと。
   :has() は Safari 15.4 / Chrome 105 以降。使えない環境では札が出ないだけで、画像は正常に出る。 */
.card-fig:has(img[src*="/no-photo-members-"])::after,
.scard-fig:has(img[src*="/no-photo-members-"])::after{
  content:"※イメージ";position:absolute;right:8px;bottom:8px;pointer-events:none;
  padding:3px 8px;border-radius:4px;background:rgba(17,17,17,.55);
  color:#fff;font-size:11px;font-weight:500;letter-spacing:.04em;line-height:1.4;
}

/* ログイン中の会員の画面で、未公開物件のカードの写真を鮮明なものへ差し替えた状態（2026-10-14〜・js/search.js の fillMemberCovers）。
   中央の鍵マークは「伏せてある」印なので消し、代わりに写真左下の金のプレートで「会員さまだけに公開中」と書いて伝える
   （左上の「未公開物件（会員限定公開）」の札はそのまま）。プレートは未公開カードにいつも描いてあり、差し替えたカードでだけ出す。
   面の色・額縁は詳細ページの会員の画面（.gallery-members-plate・.gallery.is-member-unlocked .gallery-main::after）と同じ。
   ⚠ 文字は焦茶（--gold-ink）。白にしないこと（明るい金の上で溶ける）。
   ⚠ 写真が無い未公開カード（※イメージ）は差し替えないので、右下の札とは重ならない。 */
.scard-members-plate{display:none}
.scard-locked.is-member-unlocked .lock-mark{display:none}
.scard-locked.is-member-unlocked .scard-members-plate{
  position:absolute;left:8px;bottom:8px;z-index:2;pointer-events:none;
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px 4px 8px;border-radius:2px;
  font-size:11px;font-weight:700;letter-spacing:.08em;line-height:1.4;white-space:nowrap;
  color:var(--gold-ink);
  background:linear-gradient(160deg,
    var(--gold-hi) 0%,var(--gold-lit) 22%,var(--gold) 48%,var(--gold-shade) 72%,var(--gold-lit) 100%);
  box-shadow:0 2px 10px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(120,90,20,.35);
}
.scard-members-plate svg{display:block;width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2}
.scard-locked.is-member-unlocked .scard-fig::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(227,197,95,.95),inset 0 0 0 4px rgba(247,233,180,.16);
}
/* その場で差し替えたときだけ、ぼかしからピントが合うように一度だけ切り替える（会員だから見えた、と感じてもらう演出）。
   ⚠ transform は動かさない（詳細ページの member-focus を使わない）。fill で transform を握ると、
      カードに乗せたときの写真の拡大（.scard:hover .scard-fig img）が効かなくなる */
.scard-locked.is-member-focus .scard-fig img{animation:member-card-focus .9s cubic-bezier(.2,.7,.2,1) both}
.scard-locked.is-member-focus .scard-members-plate{animation:member-band-in .6s ease .3s both}
@keyframes member-card-focus{
  from{filter:blur(14px)}
  to{filter:none}
}

@media(max-width:1280px){
  .se-side{flex-basis:264px}
  /* ⚠ ここにあった .se-list の2列固定は外した。列数は auto-fill が画面幅から決めるので、
     途中の幅で固定すると、入るはずの3列目が空いたまま右が余る */
}
@media(max-width:990px){
  .se-wrap{padding:8px 16px 64px}
  .se-body{flex-direction:column}
  #se-filter-open{display:flex}
  /* タブレット以下は「条件変更」から開くオーバーレイ。画面いっぱいに出すので、
     PC用の sticky（top / max-height）は打ち消す。中身の縦の構造（条件はスクロールし、
     「この条件で◯件を見る」は下端に残る）はPCと同じで、そのほうが押しやすい。
     ⚠ overflow は .se-side-scroll 側だけに持たせる。ここにも付けると二重にスクロールする */
  .se-side{
    position:fixed;inset:0;z-index:70;flex-basis:auto;width:100%;max-width:360px;
    /* ⚠ ここで top を触らないこと。inset:0 が top:0 まで面倒を見ている。
       打ち消すつもりで top:auto と書くと bottom:0 だけが効き、高さがコンテンツなりに伸びて
       パネルの上半分が画面の外へ飛び出す（実際そうなった）。max-height だけ解除すれば足りる */
    max-height:none;
    border:none;border-radius:0;box-shadow:8px 0 24px rgba(0,0,0,.12);
    overflow:hidden;padding:24px 16px;transform:translateX(-100%);transition:transform .28s ease;
  }
  .se-side.is-open{transform:translateX(0)}
  .se-side-head{margin-bottom:0}
  .se-side-close{display:grid}
  /* 一覧の上に貼り付けると、ただでさえ狭い画面がさらに削られる。狭い画面では従来どおり流す */
  .se-tools{position:static;padding-top:0}
  .se-overlay{display:block;position:fixed;inset:0;z-index:69;background:rgba(0,0,0,.32)}
  .se-overlay[hidden]{display:none}
  .se-toolbar{width:100%;margin-left:0}
  /* .se-tools が sticky でなくなる幅では重ねず、ツールバーの下に1行ぶん差し込む */
  .se-save-panel{position:static;width:100%;max-width:none}
}
@media(max-width:540px){
  .se-tools{margin-bottom:16px}
  .se-count b{font-size:24px}
  .scard-fig{aspect-ratio:16/9}
  .se-list{grid-template-columns:1fr;gap:16px}
  #se-pagination{margin-top:24px}
}
@media(max-width:360px){
  /* 画面幅ぎりぎりでツールバー（横並び3列は変えない）がはみ出さないよう、内側の余白と文字サイズだけ詰める */
  .se-toolbar{gap:4px;padding:6px}
  .se-toolbar-btn{gap:2px;font-size:13px}
  .se-toolbar-btn svg{width:14px;height:14px}
  .se-sort{padding-right:16px;font-size:13px}
}

/* ═══ お気に入りページ（favorites.html）
   物件カードはさがす結果と同じ .scard／.card-body を使い回す（js/app.jsが
   お気に入り登録時にカードのHTMLごとスナップショット保存し、ここで再描画する）。
   絞り込みパネルがなく全幅レイアウトなので、さがすページの.se-listとは
   別にグリッド専用クラスを用意している。 ═══ */
.fav-wrap{max-width:1120px;margin:0 auto;padding:24px 0 96px}
.fav-heading{font-size:28px;font-weight:700;letter-spacing:.08em;color:#27272A}
.fav-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.fav-tab{
  display:inline-flex;align-items:center;padding:8px 16px;border:1px solid var(--line);border-radius:16px;
  background:#F7F6F2;font-family:var(--ff-jp);font-size:15px;letter-spacing:.01em;line-height:1;color:#666;
  cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.fav-tab .en{margin-left:2px}
.fav-tab.on{background:#27272A;border-color:#27272A;color:#fff}
.fav-sub{margin-top:16px;font-size:16px;color:#666;letter-spacing:.04em;line-height:1.8}

.fav-panel{margin-top:24px}
.fav-panel[hidden]{display:none}
.fav-list{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.fav-empty{grid-column:1/-1;max-width:480px;margin:0 auto;padding:64px 24px;text-align:center;background:#fff;border-radius:16px;color:var(--gray);font-size:16px;letter-spacing:.04em;line-height:1.8}
.fav-empty a{color:var(--moss);text-decoration:underline}

/* お気に入りページ「募集終了」カード（空室確認で募集終了と判定された、お気に入り済みの物件）。
   価格・スペックは既に意味を持たないため、通常のscardの中身は出さず、状態説明と
   次の行動（似た物件を見る／リストから削除）だけを見せる簡略カードに差し替える。
   実データ・実APIを持たない静的デモのため、どの物件を募集終了扱いにするかは
   js/favorites.js側で物件IDを固定してシミュレーションしている。 */
.scard-expired-veil{position:absolute;inset:0;background:rgba(39,39,42,.5);pointer-events:none}
.scard-expired-body{background:#E2E2E2;display:flex;flex-direction:column;gap:8px;padding:13px 8px 16px}
.scard-expired-head{display:flex;align-items:center;gap:8px}
.scard-expired-badge{display:inline-flex;align-items:center;background:#ECECE8;border-radius:40px;padding:4px 8px;font-family:var(--ff-jp);font-size:12px;letter-spacing:.01em;line-height:1.4;color:#666;white-space:nowrap}
.scard-expired-time{font-family:var(--ff-jp);font-size:12px;letter-spacing:.01em;line-height:1.4;color:#666;white-space:nowrap}
.scard-expired-note{font-family:var(--ff-jp);font-size:14px;letter-spacing:.04em;line-height:1.6;color:#8A8883}
.scard-expired-actions{display:flex;align-items:center;justify-content:space-between;gap:8px}
.scard-expired-link{font-family:var(--ff-jp);font-size:12px;letter-spacing:.01em;line-height:1.4;color:#2C537E;text-decoration:underline;background:none;border:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}

/* 保存した条件がどこにあるか（この端末／アカウント）の一文。会員かどうかは data-auth で出し分ける */
.fav-cond-note{margin-bottom:16px;font-size:13px;color:var(--gray);letter-spacing:.04em;line-height:1.6}
.fav-cond-note a{color:var(--moss);text-decoration:underline}
.fav-cond-list{display:flex;flex-direction:column;gap:12px}
.fav-cond-item{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#fff;border-radius:12px;padding:16px 20px;box-shadow:8px 8px 16px rgba(var(--shadow-rgb),.08)}
.fav-cond-main{display:flex;flex-direction:column;gap:4px;min-width:0}
.fav-cond-label{font-size:15px;font-weight:600;color:var(--ink-2);letter-spacing:.04em;word-break:break-all}
/* 名前を付けた条件だけ、見出し（名前）の下に条件の中身を小さく残す */
.fav-cond-sub{font-size:13px;color:var(--gray);letter-spacing:.04em;line-height:1.6;word-break:break-all}
.fav-cond-meta{font-size:13px;color:var(--gray);letter-spacing:.04em}
.fav-cond-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.fav-cond-view{
  display:inline-flex;align-items:center;height:36px;padding:0 16px;border:1px solid var(--moss);border-radius:8px;
  background:#fff;font-family:var(--ff-jp);font-size:13px;font-weight:500;letter-spacing:.08em;color:var(--moss);
  cursor:pointer;transition:background .2s ease;
}
.fav-cond-view:hover{background:var(--moss-tint)}
.fav-cond-rename,.fav-cond-del{width:36px;height:36px;flex-shrink:0;border:none;border-radius:8px;background:none;color:#8A8883;cursor:pointer;display:grid;place-items:center;transition:color .2s ease,background .2s ease}
.fav-cond-rename:hover,.fav-cond-del:hover{color:var(--moss);background:var(--moss-tint)}

/* 名前の編集（✎ を押した行だけ入力欄に変わる・js/favorites.js）。編集中は右のボタン列を隠し、入力欄に幅を渡す */
.fav-cond-item.is-editing .fav-cond-main{flex:1}
.fav-cond-item.is-editing .fav-cond-actions{display:none}
.fav-cond-rename-form{display:flex;flex-direction:column;gap:8px;width:100%}
/* ⚠ 16px 未満にしないこと。iOS Safari は入力欄の文字が16px未満だと、タップした瞬間に画面を拡大する */
.fav-cond-name-input{
  width:100%;max-width:480px;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:#fff;
  font-family:var(--ff-jp);font-size:16px;letter-spacing:.04em;color:var(--ink-2);
}
.fav-cond-name-input:focus{outline:none;border-color:var(--moss)}
.fav-cond-rename-actions{display:flex;align-items:center;gap:8px}
.fav-cond-rename-save,.fav-cond-rename-cancel{
  height:36px;padding:0 16px;border-radius:8px;font-family:var(--ff-jp);font-size:13px;font-weight:500;letter-spacing:.08em;
  cursor:pointer;transition:background .2s ease,opacity .2s ease;
}
.fav-cond-rename-save{border:none;background:var(--moss);color:#fff}
.fav-cond-rename-save:hover{opacity:.85}
.fav-cond-rename-save:disabled{opacity:.5;cursor:default}
.fav-cond-rename-cancel{border:1px solid var(--line);background:#fff;color:var(--ink-2)}
.fav-cond-rename-cancel:hover{background:#F7F6F2}
.fav-cond-rename-note{font-size:12px;color:var(--gray);letter-spacing:.04em;line-height:1.6}
.fav-cond-rename-error{font-size:12px;color:#C54B4B;letter-spacing:.04em;line-height:1.6}
.fav-cond-rename-error[hidden]{display:none}

/* お気に入り解除の確認ポップアップ（お気に入りページ限定。他ページのハート解除では出さない） */
.fav-confirm{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;background:rgba(39,39,42,.7);padding:16px;-webkit-tap-highlight-color:transparent}
.fav-confirm[hidden]{display:none}
.fav-confirm-box{width:100%;max-width:600px;background:#fff;border-top:1px solid var(--mint);border-radius:8px;padding:40px 56px;display:flex;flex-direction:column;align-items:center;gap:24px}
.fav-confirm-msg{font-family:var(--ff-jp);font-size:16px;letter-spacing:.01em;line-height:1.2;color:var(--ink);text-align:center}
.fav-confirm-actions{display:flex;align-items:center;justify-content:center;gap:16px;width:100%}
.fav-confirm-cancel,.fav-confirm-del{flex:1 0 0;border:none;border-radius:8px;padding:20px 24px;font-family:var(--ff-jp);font-weight:600;font-size:16px;letter-spacing:.01em;line-height:1.2;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fav-confirm-cancel{background:#F0F0F0;color:var(--ink)}
.fav-confirm-cancel:hover{background:#E6E6E6}
.fav-confirm-del{background:#C54B4B;color:#fff}
.fav-confirm-del:hover{background:#B33F3F}

@media(max-width:990px){
  .fav-wrap{padding:8px 16px 64px}
  .fav-list{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:540px){
  .fav-wrap{padding-left:10px;padding-right:10px}
  .fav-list{grid-template-columns:1fr;gap:16px}
  .fav-empty{padding:48px 20px}
  .fav-cond-item{flex-direction:column;align-items:stretch}
  .fav-cond-actions{justify-content:flex-end}
  .fav-confirm-box{padding:24px 20px;gap:16px}
  .fav-confirm-msg{font-size:14px}
  .fav-confirm-cancel,.fav-confirm-del{padding:14px;font-size:14px}

  /* お気に入り一覧のモバイル横並びカード（Figma node 1712-2331／1712-2279準拠）。
     縦積みだと間延びするため、画像＋テキストを横並びにした専用レイアウトに切り替える。
     Figmaは375px幅・左右16px余白（コンテンツ幅343px）を想定した120x120角。
     固定pxだと画面幅が変わるたびに比率がずれるため、120/343≒35%を画像側のflex-basisにして
     コンテンツ幅に対する比率をFigma通りに保ったまま追従させる（高さはaspect-ratio:1/1で正方形維持）。
     数値・色はFigma仕様に合わせてこのブレイクポイント内でのみ上書きする（他ページの.scard等には影響しない）。 */
  .fav-list .scard{flex-direction:row;align-items:flex-start}
  .fav-list .scard-fig{width:35%;flex:0 0 35%;height:auto;aspect-ratio:1/1;border-radius:0}
  .fav-list .card-body{display:flex;flex-direction:column;gap:4px;padding:8px}
  .fav-list .card-ttl{margin-top:0;font-size:16px;line-height:1.6}
  .fav-list .card-checked{letter-spacing:.02em;line-height:1.4}
  .fav-list .card-spec{margin-top:0;font-size:12px;line-height:1.6;color:#8A8883}
  .fav-list .card-price{margin-top:0;gap:4px}
  .fav-list .card-price .unit,
  .fav-list .card-price .tsubo{color:#8A8883}
  .fav-list .card-price .fee{font-size:12px}
  .fav-list .uselist{margin-top:0}
  .fav-list .uselist div{font-size:11px}

  /* FCバッジはアイコンを省略し「FC」の文字だけ見せる（間延び対策と同じ理由で最小限の情報量に絞る） */
  .fav-list .badge-fc svg{display:none}

  /* 画像が35%幅まで狭まる分、長いバッジ名（例：スケルトン渡し）だとハートと衝突しやすい。
     左右の余白を8px→4pxに詰めて外側へ寄せ、バッジとハートの間の隙間を少しでも稼ぐ */
  .fav-list .badge,
  .fav-list .scard-badges{left:4px;top:4px}
  .fav-list .fav{right:4px;top:4px}
  /* 札は写真の幅（35%）に収める。「未公開物件（会員限定公開）」は折り返さない指定なので、
     そのままだと枠を突き抜けて右上のハートに重なり、ハートが押せなかった（2026-09-25） */
  .fav-list .scard-badges{max-width:calc(100% - 44px)}
  .fav-list .scard-badges .badge{max-width:100%;overflow:hidden;text-overflow:ellipsis}

  /* 募集終了カードも同じ横並びに揃える。バッジは出さず、写真には27272Aの50%マスクをかけたまま、
     カード全体・右側テキストともデスクトップと同じE2E2E2にする */
  .fav-list .scard--expired{flex-direction:row;align-items:flex-start;background:#E2E2E2}
  .fav-list .scard--expired .scard-fig{width:35%;flex:0 0 35%;height:auto;aspect-ratio:1/1;border-radius:0}
  .fav-list .scard-expired-body{background:#E2E2E2;flex:1;min-width:0;align-self:stretch;justify-content:space-between;padding:8px}
  .fav-list .scard-expired-time{font-size:13px}
  .fav-list .scard-expired-note{font-size:12px;letter-spacing:.04em;color:#666}
}
@media(max-width:360px){
  /* ミニ基準：画像が35%幅で100px前後まで縮むため、文字サイズを詰めるだけでは
     「スケルトン渡し」「内装スケルトン」等7文字クラスの長いバッジ名がハートと被る。
     ハートと重ならない幅（52px）で「…」省略に切り替える */
  .fav-list .badge{font-size:10px;padding:2px 4px;max-width:52px;overflow:hidden;text-overflow:ellipsis}
}

/* ═══ お問い合わせページ（contact.html）
   AREA/USE/SIZE/RENTのドロップダウンはTOPの検索パネルと同じ部品（.field/.box/.opt-panel）を
   使い回す。テキスト入力欄・カード・送信ボタンはこのページ専用のスタイル。 ═══ */
.ctc-wrap{max-width:1120px;margin:24px auto 96px}
.ctc-head{display:flex;align-items:center;justify-content:space-between;gap:40px}
.ctc-head-jp{font-size:16px;font-weight:500;letter-spacing:.08em;color:var(--ink);margin-bottom:8px}
.ctc-head-en{font-size:80px;font-weight:700;letter-spacing:.08em;line-height:1.2;color:var(--moss)}
.ctc-lead{flex-shrink:0;font-size:16px;color:var(--gray);letter-spacing:.08em;line-height:1.6}

.ctc-card{
  margin-top:56px;background:#fff;border-radius:40px;box-shadow:8px 8px 16px rgba(var(--shadow-rgb),.16);
  padding:120px;display:flex;flex-direction:column;align-items:center;gap:40px;
}
.ctc-fields{display:flex;flex-direction:column;gap:32px;width:100%}
.ctc-field{display:flex;flex-direction:column;gap:8px;width:100%}
.ctc-field-head{display:flex;align-items:center;gap:8px}
.ctc-field-head label{font-size:16px;font-weight:600;letter-spacing:.08em;color:var(--moss)}
.ctc-badge{font-size:12px;font-weight:400;letter-spacing:.08em;line-height:1.2;color:#fff;background:var(--moss);border-radius:4px;padding:2px 4px}
.ctc-badge.is-optional{background:var(--line);color:var(--gray)}
.ctc-input,.ctc-textarea{
  width:100%;border:none;border-radius:8px;background:#F5F3EF;padding:16px;
  font-family:var(--ff-jp);font-size:16px;color:var(--ink);line-height:1.4;
}
.ctc-input::placeholder,.ctc-textarea::placeholder{color:rgba(39,39,42,.3)}
.ctc-textarea{min-height:120px;resize:vertical}
.ctc-tel-note{font-size:13px;color:var(--gray);letter-spacing:.04em;line-height:1.6}

.ctc-cond-row{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.ctc-cond-row[hidden]{display:none}
/* 物件付きで来たときだけ出す「探している条件も伝える」（js/contact.js） */
.ctc-cond-toggle{align-self:flex-start;border:none;background:none;padding:0;font-family:var(--ff-jp);font-size:14px;letter-spacing:.04em;color:var(--moss);text-decoration:underline;cursor:pointer}
.ctc-cond-toggle[hidden]{display:none}
/* お問い合わせ物件（物件詳細から来たとき） */
.ctc-listing{margin-bottom:24px;padding:16px 20px;border-radius:8px;background:var(--cream-2)}
.ctc-listing[hidden]{display:none}
.ctc-listing-head{font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--moss)}
.ctc-listing-name{margin-top:4px;font-size:16px;font-weight:600;letter-spacing:.04em;color:var(--ink)}
.ctc-listing-meta,.ctc-listing-req{margin-top:4px;font-size:13px;letter-spacing:.04em;color:var(--gray)}
.ctc-listing-meta a{color:var(--moss);text-decoration:underline}
.ctc-listing-req[hidden]{display:none}
.ctc-cond-row .field label{margin-bottom:8px}

.ctc-agree{display:flex;align-items:center;gap:8px;padding:8px;border-radius:4px;cursor:pointer}
.ctc-agree input{
  appearance:none;-webkit-appearance:none;flex-shrink:0;width:20px;height:20px;padding:0;margin:0;
  background:url(../images/icons/checkbox.svg) center/20px 20px no-repeat;cursor:pointer;
}
.ctc-agree input:checked{background-image:url(../images/icons/checkbox-on.svg)}
.ctc-agree span{flex:1;font-size:15px;color:var(--ink);letter-spacing:.08em;line-height:1.6}
.ctc-agree a{color:var(--ink);text-decoration:underline}

/* 送信そのものが通らなかったときの案内（通信エラー等）。送信ボタンの直前に出す。
   .ctc-card は flex 縦並び＋gap:40px なので、余白は gap に任せる（margin を足すと二重に空く）。
   align-items:center で幅が内容なりに縮むため、width:100% で他の要素と幅を揃える。 */
.ctc-formerror{
  width:100%;
  font-size:14px;font-weight:500;letter-spacing:.04em;line-height:1.6;color:var(--warn2);
  text-align:center;
}

.ctc-submit{
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--moss);border:1px solid var(--moss);border-radius:40px;padding:16px 24px;
  font-family:var(--ff-jp);font-size:15px;font-weight:600;letter-spacing:.08em;line-height:1.8;color:#fff;
  cursor:pointer;transition:background .25s ease;
}
.ctc-submit:hover{background:var(--moss-deep)}
.ctc-submit:disabled{background:var(--gray-light);border-color:var(--gray-light);cursor:default}

@media(max-width:1280px){
  .ctc-card{padding:64px}
  .ctc-head-en{font-size:56px}
}
@media(max-width:990px){
  .ctc-wrap{padding:0 16px}
  .ctc-head{flex-direction:column;align-items:flex-start;gap:16px}
  .ctc-lead{line-height:1.8}
  .ctc-card{padding:32px;border-radius:24px}
  .ctc-cond-row{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:540px){
  .ctc-head-en{font-size:40px}
  .ctc-card{padding:24px 16px;margin-top:32px}
  .ctc-cond-row{grid-template-columns:1fr}
  .ctc-submit{width:100%}
}

/* ═══ 無料会員の登録ページ（register.astro）
   カード・入力欄・送信ボタンはお問い合わせページ（.ctc-*）をそのまま使い回し、
   このページだけに要る部品（会員のステップ・補足文・送信完了の表示）をここに足す。 ═══ */

/* 会員のステップを、フォームの前に3段で置く（2026-10-13〜）。
   STEP 1 無料会員 → STEP 2 専属エージェント会員 → STEP 3 ご提案・ご内見・ご契約。
   「段が上がっていく」と読ませるために、次の3つを重ねる（色は既存のトークンだけ）：
   ① 地の色が段ごとに濃くなる（生成り → 薄い緑 → 深緑）。枠線は使わず、地の色だけで分ける
   ② 左上の目盛り（高さの違う3本）が、段の数だけ埋まる
   ③ PCでは右へ行くほど段が高くなる（上の余白を1段ぶんずつ減らす＝階段。下端は揃う）
   段の間の矢印は ::before で描く（PCは右向き・990px以下は縦に積んで下向き）。
   .ctc-card 側が margin-top を持っているので、ここでは上の余白だけ持たせる */
.reg-steps{
  --reg-step-rise:28px;  /* 階段の1段ぶんの高さ */
  --reg-step-gap:32px;
  list-style:none;margin-top:40px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--reg-step-gap);align-items:stretch;
}
.reg-step{position:relative;border-radius:16px;padding:28px 24px 32px;background:var(--cream);color:var(--ink)}
.reg-step--1{margin-top:calc(var(--reg-step-rise) * 2)}
.reg-step--2{margin-top:var(--reg-step-rise);background:var(--moss-tint)}
.reg-step--3{background:var(--moss-deep);color:#fff}

/* 段の間の矢印（2段目・3段目の手前に置く） */
.reg-step + .reg-step::before{
  content:"";position:absolute;top:50%;left:calc(var(--reg-step-gap) / -2);
  width:10px;height:10px;border-top:2px solid var(--moss);border-right:2px solid var(--moss);
  transform:translate(-75%,-50%) rotate(45deg);
}

/* 目盛り（段の高さ）。埋まった本数＝段の数 */
.reg-step-head{display:flex;align-items:flex-end;gap:10px}
.reg-step-meter{display:inline-flex;align-items:flex-end;gap:3px;height:14px}
.reg-step-meter i{display:block;width:4px;border-radius:1px;background:rgba(var(--moss-rgb),.2)}
.reg-step-meter i:nth-child(1){height:6px}
.reg-step-meter i:nth-child(2){height:10px}
.reg-step-meter i:nth-child(3){height:14px}
.reg-step-meter i.is-on{background:var(--moss)}
.reg-step--3 .reg-step-meter i.is-on{background:#fff}
.reg-step-num{font-size:11px;font-weight:600;letter-spacing:.24em;line-height:1;color:var(--gray)}
.reg-step--2 .reg-step-num{color:var(--moss)}
.reg-step--3 .reg-step-num{color:rgba(255,255,255,.72)}

.reg-step-ttl-row{margin-top:14px;display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
.reg-step-ttl{font-size:19px;font-weight:700;letter-spacing:.06em;line-height:1.5;color:inherit}
.reg-step--2 .reg-step-ttl{color:var(--moss)}
.reg-step-tag{
  font-size:12px;font-weight:600;letter-spacing:.04em;line-height:1.4;color:var(--moss);
  background:#fff;border-radius:20px;padding:3px 10px;
}
.reg-step-path{margin-top:10px;font-size:13px;letter-spacing:.04em;line-height:1.8;color:var(--ink-2)}
.reg-step--3 .reg-step-path{color:rgba(255,255,255,.8)}
/* ヒアリングシートの届け先（STEP 2）。次に何をすればよいかなので、地の文より一段強く */
.reg-step-note{margin-top:4px;font-size:13px;font-weight:600;letter-spacing:.04em;line-height:1.8;color:var(--moss)}

.reg-promise{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:10px}
.reg-promise li{position:relative;padding-left:20px;font-size:14px;color:inherit;letter-spacing:.04em;line-height:1.8}
.reg-promise li::before{content:"";position:absolute;left:2px;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--moss)}
.reg-step--3 .reg-promise li::before{background:rgba(255,255,255,.75)}
.reg-promise b{font-weight:600;color:var(--moss)}
/* STEP 2 の「パーソナルサイト」（事業用パーソナルサイトの紹介ページへ・新しいタブ）。
   サイト全体の a は下線なし（a{text-decoration:none}）なので、押せると分かるよう下線を付ける */
.reg-promise-link{
  font-weight:600;color:var(--moss);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
}
.reg-promise-link:hover{text-decoration-thickness:2px}

/* 990px以下は縦に積む。階段はやめ（幅が無く段差が読めない）、矢印を下向きにして段の間に置く */
@media(max-width:990px){
  .reg-steps{--reg-step-gap:28px;grid-template-columns:1fr}
  .reg-step--1,.reg-step--2{margin-top:0}
  .reg-step + .reg-step::before{
    top:calc(var(--reg-step-gap) / -2);left:50%;
    transform:translate(-50%,-75%) rotate(135deg);
  }
}
@media(max-width:540px){
  .reg-steps{margin-top:24px}
  .reg-step{padding:20px 16px 24px;border-radius:12px}
  .reg-step-ttl{font-size:17px}
}

.reg-note{font-size:13px;color:var(--gray);letter-spacing:.04em;line-height:1.6}
.reg-consent{font-size:13px;color:var(--gray);letter-spacing:.04em;line-height:1.8}
.reg-consent a{color:var(--ink);text-decoration:underline}

.ctc-input.is-invalid{box-shadow:inset 0 0 0 1px var(--warn2)}

.reg-alt{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}
.reg-line{
  display:flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--line);border-radius:40px;padding:12px 24px;
  font-size:14px;font-weight:600;letter-spacing:.08em;color:var(--ink);transition:background .25s ease;
}
.reg-line:hover{background:#F5F3EF}
.reg-links{font-size:14px;color:var(--gray);letter-spacing:.08em}
.reg-link-btn{
  margin-left:8px;padding:0;background:none;border:none;cursor:pointer;
  font-family:var(--ff-jp);font-size:14px;font-weight:600;letter-spacing:.08em;color:var(--moss);text-decoration:underline;
}

.reg-sent{text-align:center}
.reg-sent-ttl{font-size:20px;font-weight:700;letter-spacing:.08em;color:var(--moss)}
.reg-sent-note{font-size:15px;color:var(--ink);letter-spacing:.08em;line-height:1.8}
.reg-sent-panel{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.reg-resend{
  background:none;border:1px solid var(--line);border-radius:40px;padding:12px 24px;cursor:pointer;
  font-family:var(--ff-jp);font-size:14px;font-weight:600;letter-spacing:.08em;color:var(--ink);
}
.reg-resend:disabled{color:var(--gray);cursor:default}
/* すでに会員のメールアドレスだったときの案内（js/register.js・2026-10-12〜）。.ctc-card の gap に余白を任せ、
   .ctc-formerror と同じく width:100% で幅を揃える */
.reg-member{width:100%;display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 16px;border-radius:16px;background:var(--moss-tint);text-align:center}
.reg-member-msg{font-size:15px;font-weight:600;letter-spacing:.06em;line-height:1.8;color:var(--moss)}
.reg-member .reg-resend{background:#fff}

@media(max-width:540px){
  .reg-line,.reg-resend{width:100%}
}

/* ═══ サンクスページ・404ページ（thanks.html／404.html）
   構成が共通（見出し・本文・イラスト・TOPへ戻るボタン）のため専用クラスを共有する。 ═══ */
.state-wrap{max-width:543px;margin:120px auto;display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
.page-thanks .state-wrap{max-width:571px}
.state-title{font-size:80px;font-weight:700;letter-spacing:.08em;line-height:1.2;color:var(--moss);white-space:nowrap}
.state-body{font-size:18px;font-weight:500;color:var(--gray);letter-spacing:.08em;line-height:1.8;white-space:nowrap}
.state-illust{position:relative;width:368px;max-width:100%;aspect-ratio:368/231}
.state-illust img{position:absolute}
.page-404 .state-illust{aspect-ratio:368/284}
.state-btn{
  display:inline-flex;align-items:center;justify-content:center;background:var(--moss);color:#fff;
  border-radius:4px;padding:16px 32px;font-family:var(--ff-jp);font-size:15px;font-weight:500;
  letter-spacing:.16em;transition:background .25s ease;
}
.state-btn:hover{background:var(--moss-deep)}
.only-sp{display:none}

@media(max-width:540px){
  .state-wrap{margin:64px auto;padding:0 16px}
  .state-title{font-size:48px;white-space:normal}
  .state-body{font-size:15px;white-space:normal}
  .state-illust{width:280px}
  .state-btn{width:100%;padding:13px 32px}
  .only-sp{display:inline}
}

/* ═══ 物件詳細ページ（detail.html）
   PCは左カラム（タイトル・価格・DATA表）を480px固定、右カラム（ギャラリー・ROOM・AREA）を
   残り幅で可変にした2カラム構成（Figma: 1666:5651 は左400px／全体1120pxだったが、
   ワイドな画面で左右に余白が余りすぎるため広げた）。990px以下は元の1カラムラフの並び順
   （左カラムの内容→右カラムの内容の順）に戻して縦積みする。 ═══ */
.dtl-demo-note{margin:0;padding:12px 32px;text-align:center;font-family:var(--ff-en);font-size:40px;font-weight:800;letter-spacing:.16em;color:var(--warn2);background:#FDF1EC}
.dtl-wrap{max-width:1440px;margin:0 auto;padding:24px 32px 64px}
/* パンくず・「似た条件の物件」・最下部のタグ導線は本文(.dtl-wrap)とは別の .wrap(1120px) で
   幅が決まっている。本文だけ広げると横位置がズレるので、詳細ページとプレビューに限って揃える。
   ⚠ body.page-detail を外さないこと。外すと TOP・FC・オーナー等の全ページの .wrap も広がる */
body.page-detail .wrap{max-width:1440px}
.dtl-cols{display:grid;grid-template-columns:480px 1fr;grid-template-rows:auto auto;column-gap:48px;row-gap:0;align-items:start}
.dtl-gallery-col{grid-column:2;grid-row:1;min-width:0}
.dtl-left{grid-column:1;grid-row:1 / 3;min-width:0}
.dtl-right{grid-column:2;grid-row:2;min-width:0}

/* タイトル・価格ブロック（col-left上部。Figma: title-block／price-block） */
.dtl-title-block{display:flex;flex-direction:column;gap:8px}
.dtl-addr{font-size:28px;font-weight:700;letter-spacing:.08em;line-height:1.4;color:var(--ink)}
/* 建物名。見出し（h1）がセールスポイントのときだけ出る（一覧のカードと同じ2段構え）。
   セールスポイントが無い掲載では h1 がそのまま建物名なので、この行は出ない。
   ⚠ クラス名を `.dtl-building` にしないこと。物件概要の「建物名」行とは別物で、
   あちらは行ラベル付きの表。ここは見出し直下の1行 */
.dtl-name{font-size:16px;font-weight:600;letter-spacing:.06em;line-height:1.5;color:var(--ink-2)}
/* 区画（部屋番号）。見出しは建物名だけにしたが、同じビルの別区画が別々に載っているため
   見出しだけでは見分けがつかない。判別できる最小限として、見出しの下に小さく添える。
   値は "102" "4階" "B2" と媒体の表記のままなので、単位は足さない。
   ⚠ 名前を `.dtl-room` にしないこと。後方（「お部屋の紹介」セクション）に
   `.dtl-room{margin-top:40px}` があり、後勝ちで余白を持っていかれる */
.dtl-unit{font-size:12px;letter-spacing:.04em;line-height:1.6;color:var(--gray)}
.dtl-price-block{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.dtl-price-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.dtl-price-num{font-family:var(--ff-en);font-size:28px;font-weight:800;letter-spacing:.02em;color:var(--moss)}
.dtl-price-num--ask{font-family:var(--ff-jp);font-size:20px;font-weight:700}
.dtl-price-unit{font-size:14px;letter-spacing:.02em;color:var(--gray)}
.dtl-price-note{font-size:14px;color:var(--gray);letter-spacing:.04em}
.dtl-fee-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px}
.dtl-fee-item{display:flex;align-items:center;gap:4px}
.dtl-fee-lbl{color:var(--gray);letter-spacing:.04em}
.dtl-fee-val{font-weight:600;color:var(--moss);letter-spacing:.02em}
.dtl-price-spec{font-size:14px;color:var(--gray);letter-spacing:.04em;line-height:1.6}
/* 交通（沿線・駅・徒歩分）。面積／階のすぐ下に置く。配色は物件概要の表（.dtl-station）と同じで、
   駅名だけを濃く出す。複数路線ある物件は行を重ねる（実データでは最大3行） */
.dtl-price-access{display:flex;flex-direction:column;gap:2px;font-size:14px;letter-spacing:.04em;line-height:1.6}
.dtl-price-access-row{display:flex;gap:6px;flex-wrap:wrap}
.dtl-price-access-row .ln{color:var(--gray)}
.dtl-price-access-row .st{font-weight:700;color:var(--ink)}
.dtl-price-access-row .wk{color:var(--gray)}

/* 「空き状況を確認する」「初期費用を確認する」（components/DetailInquiryCta.astro）。賃料の塊のすぐ下。
   主役は1つ（空き状況＝塗り）に絞り、もう1つは同じ色の枠にする（2つとも塗ると強調が効かない）。
   ⚠ 枠線・区切り線で塊を囲まない（地の色と余白で分ける）。 */
.dtl-inq{margin-top:24px}
.dtl-inq-btns{display:flex;gap:12px}
.dtl-inq-btn{
  flex:1;min-width:0;display:flex;align-items:center;justify-content:center;padding:14px 12px;border-radius:32px;
  border:1px solid var(--moss);background:#fff;color:var(--moss);font-size:14px;font-weight:600;letter-spacing:.06em;
  white-space:nowrap;transition:background-color .22s ease,color .22s ease,border-color .22s ease;
}
.dtl-inq-btn:hover{background:var(--moss-tint)}
.dtl-inq-btn.is-primary{background:var(--moss-btn);border-color:var(--moss-btn);color:#fff}
.dtl-inq-btn.is-primary:hover{background:var(--moss-hover);border-color:var(--moss-hover)}
/* 送っている間（会員がその場で送るとき）。押せないことを見た目でも伝える */
.dtl-inq-btn.is-sending{opacity:.6;pointer-events:none}
/* 受け付けたあと。同じ依頼を重ねて送らないよう押せない見た目にする */
.dtl-inq-btn.is-done,.dtl-inq-btn.is-done:hover{background:var(--mint);border-color:var(--mint);color:var(--moss);cursor:default}
.dtl-inq-note{margin-top:8px;font-size:12px;color:var(--gray);letter-spacing:.04em;line-height:1.6}
.dtl-inq-msg{margin-top:8px;font-size:13px;font-weight:600;color:var(--moss);letter-spacing:.04em;line-height:1.6}
.dtl-inq-msg.is-error{color:var(--warn-deep)}
/* 追従バーの「この物件に問い合わせる」も会員はその場で送る（2026-10-12〜。js/detail.js） */
.dtl-cta-btn.is-sending{opacity:.6;pointer-events:none}
.dtl-cta-btn[aria-disabled="true"]{cursor:default}
.dtl-stickybar .dtl-inq-msg{font-size:12px;text-align:center}
@media(max-width:400px){
  .dtl-inq-btns{flex-direction:column}
}

/* 空き確認（元付・管理会社の連絡先）。**管理者専用ビューだけ**（components/AdminContact.astro）。
   賃料の塊のすぐ下に置き、物件を開いたその場で電話できるようにする。
   社内だけの物だと一目で分かるよう、管理者の帯・マイソクのタイルと同じ色（#3d3a34）を差し色にする。
   ⚠ 枠線・区切り線で囲まない（地の色と余白で分ける）。 */
.dtl-admincontact{margin-top:24px;padding:20px;border-radius:8px;background:var(--cream);color:var(--ink)}
.dtl-admincontact-head{display:flex;align-items:center;gap:8px}
.dtl-admincontact-ttl{font-size:14px;font-weight:700;letter-spacing:.08em;color:#3d3a34}
.dtl-admincontact-tag{padding:2px 8px;border-radius:2px;background:#3d3a34;color:#fff;font-size:11px;letter-spacing:.04em}
.dtl-admincontact-company{margin-top:12px;font-size:16px;font-weight:700;letter-spacing:.04em;line-height:1.5}
.dtl-admincontact-meta{margin-top:4px;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13px;color:var(--gray);letter-spacing:.04em;line-height:1.6}
.dtl-admincontact-phones{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.dtl-admincontact-call{
  display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:4px;
  background:#3d3a34;color:#fff;font-size:14px;letter-spacing:.04em;line-height:1.4;transition:opacity .2s ease;
}
.dtl-admincontact-call:hover{opacity:.85}
/* 桁が合わず発信用に直せなかった番号。押せないことが分かるよう、塗らずに文字だけ見せる */
.dtl-admincontact-call.is-off{background:#fff;color:var(--gray);cursor:not-allowed}
.dtl-admincontact-call.is-off:hover{opacity:1}
.dtl-admincontact-call-mark{width:16px;height:16px;flex-shrink:0}
.dtl-admincontact-call-lbl{font-size:12px;opacity:.8}
.dtl-admincontact-call-num{font-family:var(--ff-en);font-weight:700;letter-spacing:.06em}
.dtl-admincontact-empty{margin-top:12px;font-size:14px;color:var(--warn-deep);letter-spacing:.04em;line-height:1.6}
.dtl-admincontact-src{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font-size:13px;letter-spacing:.04em;line-height:1.6}
.dtl-admincontact-portal{font-weight:600;color:var(--ink-2)}
.dtl-admincontact-copy{display:inline-flex;align-items:center;gap:6px;padding:0;border:none;background:none;cursor:pointer;color:var(--ink);font:inherit}
.dtl-admincontact-copy-lbl{color:var(--gray)}
.dtl-admincontact-copy-val{font-family:var(--ff-en);font-weight:600;text-decoration:underline dotted;text-underline-offset:3px}
.dtl-admincontact-copy-msg{font-size:12px;color:var(--live)}
.dtl-admincontact-open{color:#3d3a34;font-weight:600;border-bottom:1px solid currentColor;transition:opacity .25s ease}
.dtl-admincontact-open:hover{opacity:.55}
.dtl-admincontact-note{margin-top:6px;font-size:12px;color:var(--gray);letter-spacing:.04em;line-height:1.6}

/* 業種可否（既存.uselistをそのまま流用。TOP／さがすの物件カードと同じマークアップ・数値） */
.dtl-use{margin-top:16px}
.dtl-use-note{margin-top:8px;font-size:12px;color:var(--gray);letter-spacing:.04em;line-height:1.6}

/* 本文セクション見出し（Figma「SecHead」＝既存.eyebrow＋見出し。h2.stは28px仕様のため、
   このページの本文セクション見出し（22px）は専用クラスで管理する） */
.sec-title{font-size:22px;font-weight:700;letter-spacing:.08em;line-height:1.4;color:var(--ink)}

/* この建物の空き区画。同じビルの別区画がそれぞれ別の掲載になっているため、1つの表にまとめる。
   行の見出し（階）がその区画の詳細ページへのリンクで、いま開いている区画は色を変えて示す。
   4列（階・広さ・賃料・坪単価）は狭い画面だと収まらないので、表だけ横スクロールさせる */
.dtl-units{margin-top:40px}
.dtl-units-scroll{margin-top:16px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.dtl-units-table{width:100%;min-width:340px;border-collapse:collapse;font-size:14px;letter-spacing:.04em;line-height:1.8}
.dtl-units-table th,.dtl-units-table td{padding:12px 8px;border-bottom:1px solid var(--live);text-align:left;white-space:nowrap}
.dtl-units-table thead th{font-size:12px;font-weight:600;color:var(--moss);border-top:1px solid var(--live)}
.dtl-units-table tbody th{font-weight:600}
.dtl-units-table tbody th a{color:var(--moss);text-decoration:underline;text-underline-offset:2px}
.dtl-units-table tbody th a:hover{text-decoration:none}
.dtl-units-table td{color:var(--ink)}
.dtl-units-table tr.is-self{background:var(--mint)}
/* いま開いている区画。リンクにせず「表示中」と添える（押しても同じページで、迷子になるため） */
.dtl-units-now{margin-left:6px;padding:1px 6px;border-radius:2px;background:var(--moss);color:#fff;font-size:11px;font-weight:400;letter-spacing:.04em}
.dtl-units-sub{margin-left:4px;color:var(--moss);font-size:12px}
.dtl-units-note{margin-top:12px;font-size:12px;line-height:1.7;color:var(--moss)}

/* DATA（物件概要）：DefRow定義リスト。Figmaでは行罫線がvar(--live)、KEY列は96px固定 */
.dtl-data{margin-top:40px}
.dtl-deflist{margin-top:16px;display:flex;flex-direction:column}
.dtl-defrow{display:flex;gap:0;padding:12px 0;border-bottom:1px solid var(--live);font-size:14px;letter-spacing:.04em;line-height:1.8}
.dtl-defrow:first-child{border-top:1px solid var(--live)}
.dtl-defkey{flex:0 0 96px;font-weight:600;color:var(--moss)}
.dtl-defval{flex:1;min-width:0;color:var(--ink)}
/* 値の下に添えるリンク（用途地域 → 用途地域ガイド）。.more と同じ緑の下線リンクで、値より一段小さく */
.dtl-deflink{
  display:flex;align-items:center;gap:4px;width:fit-content;margin-top:4px;
  font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--moss);
  border-bottom:1px solid currentColor;transition:opacity .25s ease;
}
.dtl-deflink:hover{opacity:.55}
.dtl-deflink img{flex-shrink:0}
.dtl-station{display:flex;flex-direction:column;gap:4px;min-width:0}
.dtl-station-row{display:flex;gap:2px;flex-wrap:wrap}
.dtl-station-row .ln{color:var(--gray)}
.dtl-station-row .st{font-weight:700;color:var(--ink)}
.dtl-station-row .wk{color:var(--gray)}
.dtl-meta{margin-top:16px;font-size:14px;color:var(--ink);letter-spacing:.04em;line-height:1.4}
/* 用途地域の出典・加工表記。国交省の利用規約で表示が求められる項目なので、
   目立たせる必要はないが、消したり見えなくしたりしないこと */
.dtl-zoning-credit{margin-top:12px;font-size:12px;color:var(--gray);letter-spacing:.04em;line-height:1.6}

/* 未公開物件の目印と断り書き。出していない項目があることを、空欄ではなく言葉で伝える */
.dtl-members-badge{
  display:inline-flex;align-items:center;background:var(--cream);color:var(--moss);
  font-size:12px;font-weight:600;letter-spacing:.06em;padding:4px 10px;border-radius:20px;
}
/* ログイン中の会員の画面で、鮮明な写真に差し替えたあと上の薄い札と入れ替える札（2026-10-13〜）。
   写真の左上の札（.badge-members）と同じ「深緑地＋金の細い縁」に揃え、英字の MEMBERS ONLY を金で添える。
   ⚠ 色は既存のトークンの中だけ。静的HTMLでは hidden で置いてあり、js/detail.js が出す */
.dtl-members-seal{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--moss-deep);color:#fff;
  border:1px solid rgba(195,154,34,.6);border-radius:20px;
  padding:4px 14px 4px 12px;
  box-shadow:0 1px 6px rgba(var(--moss-deep-rgb),.22);
}
.dtl-members-seal-en{
  font-family:"Outfit",var(--ff-jp);font-size:10px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;line-height:1.4;
  color:var(--gold-lit);padding-right:10px;border-right:1px solid rgba(227,197,95,.45);
}
.dtl-members-seal-jp{font-size:12px;font-weight:600;letter-spacing:.08em;line-height:1.4}
/* 見出しのすぐ下の一言（会員の画面だけ）。左に金の細い縦線を添えて、物件の説明と見分ける */
.dtl-members-lead{
  margin-top:12px;padding:2px 0 2px 12px;border-left:2px solid var(--gold);
  font-size:13px;font-weight:500;letter-spacing:.04em;line-height:1.8;color:var(--ink-2);
}
.dtl-members-note{
  margin-top:16px;background:var(--mint);border-radius:8px;padding:16px;
  font-size:14px;color:var(--ink);letter-spacing:.04em;line-height:1.7;
}
.dtl-members-note b{font-weight:600}

/* ギャラリー（col-right上部。main-photoは4:3固定にして、680px幅〜モバイル全幅まで可変にする） */
.gallery-main{position:relative;width:100%;aspect-ratio:4/3;border-radius:3px;overflow:hidden;background:var(--cream)}
.gallery-main img{width:100%;height:100%;object-fit:cover}
/* 間取り図。写真と縦横比が違うので cover で切り抜くと四辺が欠ける（本番263枚・257掲載が該当）。
   図面のときだけ contain にして枠内へ全体を収める。余白を白にするのは図面の地色と地続きに見せるため
   （--cream のままだと図面の外側だけ色が付いて、切れているように見える）。
   ⚠ 枠（.gallery-main）の 4:3 は変えないこと。変えるとページ全体の縦位置がずれる。 */
.gallery-main img.is-drawing{object-fit:contain;background:#fff}
.gallery-counter{position:absolute;right:16px;bottom:16px;background:rgba(0,0,0,.6);color:#fff;font-size:13px;font-weight:500;letter-spacing:.08em;padding:4px 8px;border-radius:20px}
.gallery-arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border:none;padding:0;background:none;cursor:pointer}
.gallery-arrow img{width:100%;height:100%;display:block}
.gallery-arrow.prev{left:8px}
.gallery-arrow.next{right:8px}
.gallery-thumbs{margin-top:8px;display:flex;flex-wrap:wrap;gap:8px}
/* 1行5枚。gap 8px × 4 ＝ 32px を5枚で割って 6.4px ずつ引く。
   ⚠ 枚数を変えるときは .gallery-search-tile の幅も必ず揃えること（並びが崩れる） */
.gallery-thumb{position:relative;flex:0 0 calc(20% - 6.4px);aspect-ratio:1/1;border-radius:4px;overflow:hidden;background:var(--cream);border:none;padding:0;cursor:pointer}
.gallery-thumb img{width:100%;height:100%;object-fit:cover}
/* サムネイルは 1:1 なので図面はさらに切れる（中央の一部だけが出て何の図か分からない）。
   メイン写真と同じく、図面だけ全体を収める。 */
.gallery-thumb img.is-drawing{object-fit:contain;background:#fff}

/* 写真の並びの末尾に置く「もっと写真を探す」（別タブでGoogle画像検索）。
   媒体に写真が1〜2枚しか無い物件が大半なので、続きを探しに行ける出口をここに置く。
   ⚠ **クラス名に .gallery-thumb を使わないこと。** js/detail.js が
   `#gallery-thumbs .gallery-thumb` を写真の枚数として数えており、同じ印を付けると
   カウンターが「1 / 3」と実在しない枚数になり、前後送りに空振りの枠が混ざる。
   サムネイルと同じ大きさ・同じ並びに置くのは、写真を見ている流れの中に出口を置くため
   （文章のリンクとして下に出すと、写真を見る流れから外れる）。 */
.gallery-search-tile{
  position:relative;flex:0 0 calc(20% - 6.4px);aspect-ratio:1/1;border-radius:4px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:6px;text-align:center;
  background:var(--moss-tint);box-shadow:inset 0 0 0 1px rgba(var(--moss-rgb),.16);
  color:var(--moss-deep);
}
.gallery-search-tile:hover{background:#fff;box-shadow:inset 0 0 0 1px var(--moss)}
.gallery-search-tile-mark{width:22px;height:22px;flex-shrink:0}
.gallery-search-tile-txt{font-size:11px;font-weight:600;letter-spacing:.02em;line-height:1.4}
.gallery-search-tile-arw{margin-left:2px;opacity:.7}

/* 図面（マイソク）。**管理者専用ビューだけ**（components/AdminMaisokuTile.astro / AdminMaisokuViewer.astro）。
   タイルは「もっと写真を探す」と同じ大きさで写真の列の末尾に並べ、押すと写真枠の上に図面を重ねる。
   ⚠ タイルに .gallery-thumb を使わないこと（写真の枚数・並び替えの保存に数えられてしまう）。
   お客様向けの緑と分けて管理者の帯と同じ色（#3d3a34・.gallery-sort-save と同じ）にしてあるのは、
   社内だけの物だと一目で分かるようにするため。 */
.gallery-maisoku-tile{
  position:relative;flex:0 0 calc(20% - 6.4px);aspect-ratio:1/1;border-radius:4px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:6px;text-align:center;border:none;cursor:pointer;
  background:#fff;box-shadow:inset 0 0 0 1px var(--line);color:#3d3a34;
}
.gallery-maisoku-tile:hover{box-shadow:inset 0 0 0 1px #3d3a34}
.gallery-maisoku-tile.on{box-shadow:inset 0 0 0 2px #3d3a34}
.gallery-maisoku-tile-mark{width:22px;height:22px;flex-shrink:0}
.gallery-maisoku-tile-txt{font-size:11px;font-weight:600;letter-spacing:.02em;line-height:1.4}
/* 写真枠（.gallery-main・4:3）いっぱいに重ねる。札・矢印・枚数（最大 z-index:1）より上に出す */
.gallery-maisoku{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;background:#fff}
.gallery-maisoku[hidden]{display:none}
.gallery-maisoku-bar{
  display:flex;align-items:center;gap:12px;flex-shrink:0;padding:8px 12px;
  background:#3d3a34;color:#fff;font-size:12px;letter-spacing:.04em;
}
.gallery-maisoku-ttl{margin-right:auto;font-weight:600;min-width:0}
.gallery-maisoku-sub{margin-left:8px;font-weight:400;opacity:.7}
.gallery-maisoku-open,.gallery-maisoku-close{
  flex-shrink:0;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600;
  color:#fff;background:none;border:1px solid rgba(255,255,255,.5);cursor:pointer;white-space:nowrap;
}
.gallery-maisoku-open:hover,.gallery-maisoku-close:hover{background:rgba(255,255,255,.12)}
.gallery-maisoku-frame{flex:1;width:100%;min-height:0;border:0;background:#fff}
/* スマホは帯が狭いので補足を落とす（ボタン2つを1行に残す） */
@media(max-width:540px){
  .gallery-maisoku-sub{display:none}
}

/* 写真が1枚も無い未公開物件に敷く飾り（一覧のカードと同じ絵。images/no-photo-members-*.jpg）。
   ⚠ **ここで filter:blur() を足さないこと。** 画像は書き出しの時点でぼかしてある。
      写真がある未公開物件も同じで、ぼかしは cloud が焼き込んだうえで配ってくる。
      2026-09-22 まではここで blur(14px) を掛けていたが、当時は**鮮明な元画像がそのまま配信されており**、
      開発者ツールから原寸が取り出せた。隠すなら配信の時点で潰すこと。 */
.gallery-blurred-note{
  position:absolute;right:0;bottom:0;left:0;display:flex;flex-direction:column;gap:4px;
  padding:20px 16px 16px;background:linear-gradient(to top,rgba(0,0,0,.66),rgba(0,0,0,0));
}
.gallery-blurred-ttl{color:#fff;font-size:16px;font-weight:600;letter-spacing:.08em}
.gallery-blurred-sub{color:rgba(255,255,255,.85);font-size:12px;letter-spacing:.04em;line-height:1.6}

/* 写真の下に置く断り書き。
   「※写真はイメージです」（他所の写真を敷いた枠）と
   「※未公開につき画像を隠しています」（ぼかした実物を出している枠）の2通りがある。
   ⚠ **この断り書きは写真の上に重ねないこと。** 隠している枠でさらに絵を覆うことになるうえ、
      サムネイルを切り替えるたびに読み直させることになる。
      写真の上に重ねてよいのは、下の会員登録の案内（.gallery-members-cta）だけ（2026-09-26 の運用判断）。 */
.gallery-note{
  margin-top:10px;font-size:12px;line-height:1.7;letter-spacing:.04em;color:var(--gray);
}
.gallery-note a{color:var(--moss);font-weight:600;border-bottom:1px solid rgba(var(--moss-rgb),.3);padding-bottom:1px}
.gallery-note a:hover{border-bottom-color:var(--moss)}

/* 未公開物件の写真に重ねる会員登録の案内。写真の下側を暗くして白文字で置く（赤い箱などで目立たせない）。
   写真が無い未公開物件の .gallery-blurred-note と同じ見せ方にそろえている。
   ⚠ 箱ごとクリックを通す（pointer-events:none）。リンクだけ押せるようにする。
   ⚠ 右下の枚数表示（.gallery-counter）と重ならないよう、最後の行はリンク（左寄せ）にしている。 */
.gallery-members-cta{
  position:absolute;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:64px 24px 20px;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.5) 55%,rgba(0,0,0,0) 100%);
}
.gallery-members-cta-lead{color:#fff;font-size:14px;font-weight:600;letter-spacing:.06em;line-height:1.7}
.gallery-members-cta-body{color:rgba(255,255,255,.88);font-size:13px;letter-spacing:.04em;line-height:1.75}
.gallery-members-cta-link{
  pointer-events:auto;margin-top:6px;color:#fff;font-size:13px;font-weight:600;letter-spacing:.06em;
  border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:2px;
}
.gallery-members-cta-link::after{content:'→';margin-left:6px}
/* 「無料で会員登録」と「会員の方はログイン」を横に並べる（幅が足りなければ折り返す）。
   箱は案内の箱と同じくクリックを通し、押せるのはリンクだけ */
.gallery-members-cta-links{display:flex;flex-wrap:wrap;align-items:center;gap:0 22px}
.gallery-members-cta-link:hover{border-bottom-color:#fff}
/* 前後送りの矢印は案内より手前に出す（狭いPCでは案内が写真の中ほどまで伸びるため） */
.gallery-main:has(.gallery-members-cta) .gallery-arrow{z-index:1}
/* 間取り図を表示している間は出さない。間取り図は未公開物件でも素通しで読ませている唯一の絵
   （js/detail.js がメイン画像に .is-drawing を付け外しする） */
.gallery-main:has(img.is-drawing) .gallery-members-cta{display:none}
/* スマホ用に写真の下へ出す残りの文。PC では写真の上に全文があるので出さない */
.gallery-members-more{display:none}

/* ログイン中の会員の画面で、未公開物件の写真を鮮明なものへ差し替えた状態（2026-10-13〜・js/detail.js が付ける）。
   会員登録の案内と「※未公開につき画像を隠しています」は、もう当てはまらないので消す。
   メイン写真は、ぼかしからピントが合うように一度だけ切り替える（会員だから見えた、と感じてもらう演出）。
   動きを減らす設定の端末では、冒頭の prefers-reduced-motion の指定で動きが消えて即座に切り替わる。 */
.gallery.is-member-unlocked .gallery-members-cta,
.gallery.is-member-unlocked .gallery-members-more,
.gallery.is-member-unlocked .gallery-note--locked{display:none}
.gallery.is-member-unlocked #gallery-main-img{animation:member-focus .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes member-focus{
  from{filter:blur(14px);transform:scale(1.03)}
  to{filter:none;transform:none}
}
/* 写真の右上の金のプレート（会員の画面だけ・2026-10-13〜）。「本日募集開始」（.badge-fresh）と同じ金の面。
   ⚠ 文字は焦茶（--gold-ink）。白にしないこと（明るい金の上で溶ける）。
   ⚠ スマホは左上の札が折り返して右上まで届くので、左下へ逃がす（下の @media(max-width:640px)） */
.gallery-members-plate{
  position:absolute;top:12px;right:12px;z-index:2;pointer-events:none;
  padding:6px 12px 6px 14px;border-radius:2px;
  font-family:"Outfit",var(--ff-jp);font-size:11px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;line-height:1.3;
  color:var(--gold-ink);
  background:linear-gradient(160deg,
    var(--gold-hi) 0%,var(--gold-lit) 22%,var(--gold) 48%,var(--gold-shade) 72%,var(--gold-lit) 100%);
  box-shadow:0 2px 10px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(120,90,20,.35);
  animation:member-band-in .6s ease .3s both;
}
/* 写真のふちの金の細い額縁（会員の画面だけ）。前後送り・サムネイルの操作の邪魔をしないよう pointer-events を抜く */
.gallery.is-member-unlocked .gallery-main::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(227,197,95,.95),inset 0 0 0 5px rgba(247,233,180,.16);
}

/* 鮮明な写真に差し替えたあと、写真の下に出す帯（「会員さまだけに公開している物件です」）。
   未公開の札（.badge-members）と同じ**深緑地＋金の細い縁**で、見せていない物件を会員だから見られている、と読ませる。
   ⚠ 色は既存のトークン（--moss-deep / --gold 系）の中に収めること。帯のためだけに色を増やさない。
   ⚠ 絵文字・アイコンで賑やかにしない（事業用のお客様向けの見せ方。静かな格で値打ちを出す）。
   静的HTMLでは hidden で置いてあり、差し替えに成功したときだけ js/detail.js が出す。 */
.gallery-members-band{
  margin-top:14px;padding:18px 22px 20px;border-radius:2px;
  background:var(--moss-deep);color:#fff;
  border:1px solid rgba(195,154,34,.55);
  box-shadow:0 2px 12px rgba(var(--moss-deep-rgb),.18);
  animation:member-band-in .6s ease .2s both;
}
@keyframes member-band-in{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}
.gallery-members-band-eyebrow{
  display:flex;align-items:center;gap:14px;
  font-family:"Outfit",var(--ff-jp);font-size:11px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold-lit);
}
.gallery-members-band-eyebrow::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,rgba(227,197,95,.7),rgba(227,197,95,0));
}
.gallery-members-band-ttl{margin-top:10px;font-size:16px;font-weight:600;letter-spacing:.08em;line-height:1.6}
.gallery-members-band-body{margin-top:6px;font-size:13px;letter-spacing:.04em;line-height:1.8;color:rgba(255,255,255,.86)}
.gallery-members-band-body+.gallery-members-band-body{margin-top:2px}

/* 写真が1枚も無い物件で、代わりに建物の外観（ストリートビュー）を出す枠。
   ⚠ **写真と偽らない。** 出どころを札で必ず明示する（札は .gallery-exterior-tag）。
   ⚠ 未公開物件では出さない。判定は src/lib/card.ts の showsExteriorFallback 1か所に置いてある。
   箱は .gallery-main を流用するので 4:3 のまま＝写真がある物件と高さが揃う。 */
.gallery-main--exterior{background:var(--moss-tint)}
.gallery-exterior-frame{width:100%;height:100%;border:0;display:block}
/* 札は操作の邪魔をしないこと（外観はドラッグで見回せるのが値打ちなので pointer-events を抜く） */
.gallery-exterior-tag{
  position:absolute;top:12px;left:12px;pointer-events:none;
  padding:6px 12px;border-radius:999px;background:var(--moss);
  color:#fff;font-size:12px;font-weight:600;letter-spacing:.06em;
  box-shadow:0 2px 10px rgba(var(--moss-deep-rgb),.22);
}
.gallery-exterior-note{
  margin-top:10px;display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:4px 16px;
}
.gallery-exterior-txt{font-size:12px;line-height:1.7;letter-spacing:.04em;color:var(--gray)}
/* 「写真をお取り寄せする」（.gallery-exterior-cta）は 2026-10-12 に廃止した */

/* 写真も外観も無い物件のギャラリー。媒体に写真の掲載が無いだけで、こちらの不具合ではない。
   一覧のカードと同じ「ロゴ＋No Photo」（images/no-photo.svg）を敷くので、箱は .gallery-main のまま。
   ⚠ **説明文つきの独自の箱に戻さないこと。** 一覧と絵が変わり、同じ物件を見続けている感覚が切れる。
      無いことは、枠の下の .gallery-exterior-note（外観の枠と共用）で伝える。 */
.gallery--nophoto .gallery-main{background:var(--moss)}

/* ROOM（お部屋の紹介） */
.dtl-room{margin-top:40px}
.dtl-room-body{margin-top:16px;font-size:15px;color:var(--ink);letter-spacing:.04em;line-height:1.8}
.dtl-pickbox{margin-top:16px;background:var(--mint);border-radius:8px;padding:20px;display:flex;flex-direction:column;gap:8px}
.dtl-pickbox-ttl{font-size:15px;font-weight:600;letter-spacing:.08em;color:var(--moss)}
.dtl-pickbox p{font-size:15px;color:var(--ink);letter-spacing:.04em;line-height:1.6}

/* EQUIPMENT（設備・条件）。SPEC 6-4 の「居抜き設備リスト」の位置。
   媒体の設備タグを見出しごとに仕分けて並べるだけで、金額や可否は足さない */
.dtl-facility{margin-top:40px}
.dtl-facility-lead{margin-top:16px;background:var(--mint);border-radius:8px;padding:16px 20px;font-size:14px;color:var(--ink);letter-spacing:.04em;line-height:1.8}
.dtl-facility-groups{margin-top:16px;display:flex;flex-direction:column;gap:16px}
.dtl-facility-label{font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--moss)}
.dtl-facility-items{margin-top:8px;display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0}
.dtl-facility-items li{border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:13px;color:var(--ink);letter-spacing:.04em;line-height:1.4;background:#fff}
.dtl-facility-note{margin-top:16px;font-size:12px;color:var(--gray);letter-spacing:.04em;line-height:1.8}
.dtl-facility-note a{color:var(--moss);text-decoration:underline}
/* 媒体の原文どうしが食い違っているときの断り。消さずに出すので目立たせる */
.dtl-facility-note--warn{color:var(--ink);background:var(--cream);border-radius:8px;padding:12px 16px}

/* SIMILAR（似た条件の物件）。カードはTOPの新着物件と同じ .rail / .card を使う */
.dtl-similar{border-top:1px solid var(--line)}

/* AREA（周辺情報） */
/* 周辺情報は右カラムではなく全幅の1セクション（.dtl-cols の直下・AI相談と同じ置き方）。
   右カラムに入れていた頃は、左の物件概要が先に終わるとその下に空白の帯ができていた。
   並びは SPEC 6-4 に合わせて 設備 → おせっかいメモ → 周辺情報 の順（AI相談はさらに下）。 */
/* 3行目は対応可能業種（.dtl-industry）が使うので、周辺情報は4行目 */
.dtl-area{grid-column:1 / -1;grid-row:4;margin-top:40px}
.dtl-map-ph{margin-top:16px;height:520px;border-radius:3px;background:#E0E0E0;padding:16px}
.dtl-map-ph p{font-size:13px;color:var(--gray);letter-spacing:.04em;line-height:1.8}
/* Googleマップ・ストリートビューの埋め込み。枠の高さはプレースホルダと揃える。
   ⚠ 280px から広げた（PC 520px／スマホ 340px）。小さい窓では「どんな場所か」が伝わらず、
   周辺を触って動かすにも指が入らなかった。スマホ側の指定は @media(max-width:990px) にある */
.dtl-map{margin-top:16px;height:520px;border-radius:3px;overflow:hidden;background:var(--cream)}
.dtl-map iframe{display:block;width:100%;height:100%;border:0}
.dtl-map-link{display:inline-block;margin-top:8px;font-size:13px;color:var(--moss);letter-spacing:.04em;text-decoration:underline}
/* 周辺情報の「地図／ストリートビュー」切り替え。さがすページの種別タブ(.sp-tab)と同じ形で、
   見出しではなく本文の大きさ(14px)に落としてある（セクションの中に入る小さいタブのため） */
.dtl-map-tabs{display:flex;gap:16px;margin-top:16px;border-bottom:1px solid var(--line)}
.dtl-map-tab{
  font-family:var(--ff-jp);font-size:14px;letter-spacing:.04em;line-height:1.4;
  padding:0 0 8px;color:#8A8883;background:none;border:none;white-space:nowrap;
  border-bottom:2px solid transparent;cursor:pointer;transition:color .22s ease,border-color .22s ease;
}
.dtl-map-tab:hover{color:var(--moss)}
.dtl-map-tab.on{color:var(--moss);border-color:var(--moss);font-weight:600}
.dtl-map-tab:focus-visible{outline:2px solid var(--moss);outline-offset:3px;border-radius:2px}
/* タブ自体が上に16px空けているので、枠との間は詰める。
   隣接(+)ではなく一般兄弟(~)にするのは、2つ目のペイン（ストリートビュー）にも同じ余白を効かせるため
   （+ だと切り替えたときに上端が4pxずれる） */
.dtl-map-tabs ~ .dtl-map{margin-top:12px}
.dtl-map[hidden]{display:none}
/* ストリートビューの枠に重ねる「拡大して見る」。
   枠を広げても（PC 520px）その中で歩き回るには足りないので、枠ぜんたいを押せるようにして
   全画面へ渡す。ここは「外観が見える大きめの静止画」と割り切る。
   iframe の上に透明なボタンを敷いている（iframe がマウス操作を先に食べるため） */
.dtl-map{position:relative}
.dtl-map-expand{
  position:absolute;inset:0;width:100%;height:100%;border:0;background:none;padding:0;
  cursor:pointer;display:flex;align-items:flex-end;justify-content:flex-end;
}
.dtl-map-expand-pill{
  display:inline-flex;align-items:center;gap:6px;margin:12px;padding:8px 12px;
  border-radius:999px;background:rgba(255,255,255,.94);color:var(--moss);
  font-size:12px;font-weight:600;letter-spacing:.04em;
  box-shadow:0 2px 8px rgba(var(--shadow-rgb),.2);transition:background .2s ease,color .2s ease;
}
.dtl-map-expand:hover .dtl-map-expand-pill{background:var(--moss);color:#fff}
.dtl-map-expand:focus-visible{outline:2px solid var(--moss);outline-offset:-2px;border-radius:3px}
/* 枠の下に並べる「拡大して見る」「Googleマップで開く」。
   ⚠ 拡大は**枠の中に重ねない**。地図の右下は Google 自身のズームボタンがある場所で、
   そこを覆うと地図を拡大縮小できなくなる（ストリートビューの枠は静止画と割り切って
   全面を覆っているが、地図は動かせるままにする） */
.dtl-map-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:8px}
.dtl-map-actions .dtl-map-link{margin-top:0}
.dtl-map-zoom{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--ff-jp);font-size:13px;letter-spacing:.04em;
  padding:0;border:0;background:none;color:var(--moss);text-decoration:underline;cursor:pointer;
}
.dtl-map-zoom:hover{opacity:.72}
.dtl-map-zoom:focus-visible{outline:2px solid var(--moss);outline-offset:3px;border-radius:2px}
/* 枠の下に出す物件の住所。Google が枠の中に出す地名は「千代田区, 東京都」のように粗く、
   Maps Embed API ではその文字を指定できないため、こちらの住所をここで補う。
   断り書き(.dtl-map-note)と違い中身そのものなので、補足の12pxではなく本文の14px */
.dtl-map-addr{margin-top:10px;font-size:14px;color:var(--gray);letter-spacing:.02em;line-height:1.7}
/* ストリートビューが出せない物件の断り書き。補足なので12px・淡い色に留める */
.dtl-map-note{margin-top:6px;font-size:12px;color:var(--gray-light);letter-spacing:.04em;line-height:1.7}

/* ═══ 地図・ストリートビューの全画面表示 ═══
   周辺情報の枠（PC 520px／スマホ 340px）では周りを見て回れないため、押したらここで大きく操作してもらう。
   **枠は地図とストリートビューで共用**し、押されたほうのURLを detail.js が iframe へ入れる。
   重なり順は他の全画面オーバーレイ（.fav-confirm / .mypage-logout-overlay）と同じ300。
   追従バー（z-index:200）より上に出さないと、下端のボタンがモーダルの上に残る */
.sv-overlay{
  position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  background:rgba(39,39,42,.78);padding:24px;-webkit-tap-highlight-color:transparent;
}
.sv-overlay[hidden]{display:none}
.sv-modal{
  position:relative;display:flex;flex-direction:column;background:#fff;border-radius:4px;
  width:min(1200px,100%);height:min(86vh,100%);overflow:hidden;
  box-shadow:8px 8px 16px rgba(var(--shadow-rgb),.16);
}
.sv-modal-head{
  display:flex;align-items:center;gap:16px;padding:14px 16px;border-bottom:1px solid var(--line);
}
/* 物件名は長いので1行で切る。読ませたいのは下の写真のほう */
.sv-modal-title{
  flex:1;min-width:0;font-size:14px;font-weight:600;color:var(--ink);letter-spacing:.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* いま見ているのが地図か街並みか。枠は共用なので、これが無いとどちらを開いたか分からない */
.sv-modal-kind{margin-left:10px;font-weight:400;color:var(--gray)}
.sv-modal-kind:empty{display:none}
.sv-close{
  flex:none;width:32px;height:32px;display:grid;place-items:center;border:none;background:none;
  border-radius:8px;color:var(--gray);cursor:pointer;transition:background .2s ease,color .2s ease;
}
.sv-close:hover{background:var(--moss-tint);color:var(--moss)}
/* 写真が主役なので、縦の余りは全部ここへ渡す */
.sv-modal-body{flex:1;min-height:0;background:var(--cream)}
.sv-modal-body iframe{display:block;width:100%;height:100%;border:0}
.sv-modal-foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 16px;border-top:1px solid var(--line);
}
.sv-modal-addr{font-size:14px;color:var(--gray);letter-spacing:.02em;line-height:1.7}
.sv-modal-link{flex:none;font-size:13px;color:var(--moss);letter-spacing:.04em;text-decoration:underline}

@media (max-width:640px){
  /* スマホは枠を作らず画面いっぱい。小さい画面で余白を取ると写真が潰れる。
     ⚠ 高さは dvh。inset:0 だけだとアドレスバーを含む高さになり、
     下端の「Googleマップで開く」が画面の外へ隠れる */
  .sv-overlay{padding:0;height:100dvh}
  .sv-modal{width:100%;height:100%;border-radius:0}
  /* 住所とリンクが横に並ぶと2行とも折れるので縦に積む */
  .sv-modal-foot{flex-direction:column;align-items:flex-start;gap:6px}
}

/* CONSULT（この物件をAIに相談する）。
   ボタンは ChatGPT 自身の黒（#0D0D0D）。追従バーの2ボタン（問い合わせ＝moss／LINE＝#06C755）と
   色で競合せず、遷移先がChatGPTだと一目で分かる。
   ⚠ ロゴは OpenAI の商標。リンク先を示す用途でのみ使い、加工・単独掲出はしない */
/* `.dtl-cols` の直下に置いてあるので、PCでは下段いっぱい（2列ぶん）に広げる。
   細い左カラムに入れたままだと320px幅に潰れて、箇条書きもボタンも折り返す */
/* ═══ 対応可能業種（物件詳細） ═══
   **3段とも同じカードで組む。** 判定はもともとグループ単位なので、表示もグループへ畳む。
   ⚠ 以前は「できます」だけカード、残り2段は業種名のタグをベタ並べだった。15個のタグから
   自分の商売を探す作業になっていて自分ごとにならず、絵のあるグループは寝ていた。
   段の差は**濃さだけ**で付ける（濃い＝できます／白＝ご相談／グレー＝難しい）。
   ⚠ 段ごとに組み方を変えないこと。同じページの中でこのブロックだけが騒がしくなる
   （独自の枠と ◎○△× で組んでいた頃に一度やっている）。
   段の違いは**ラベルの文言**で伝わる。色は見分けを助けるだけで、色だけに意味を持たせない。 */
.dtl-industry{grid-column:1 / -1;grid-row:3;margin-top:40px}
.dtl-industry-groups{margin-top:16px;display:flex;flex-direction:column;gap:16px}
.dtl-industry-label{font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--moss)}
.dtl-industry-note{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:12px;color:var(--gray);letter-spacing:.04em;line-height:1.8}
/* ═══ グループのカード ═══
   絵は `INDUSTRY_GROUPS` の11グループ単位（23業種ぶんは描き分けられないし、
   描き分けても粒が細かすぎて絵の意味が立たない）。
   既定は「ご相談ください」の見た目＝白。上下の段が、これに色を足す／抜くだけで済む。 */
.dtl-industry-cards{margin-top:12px;display:flex;flex-wrap:wrap;gap:16px}
/* ⚠ 幅は 300px 以上を保つこと。260px だと線画と余白を引いた文字幅が 148px しか残らず、
   「テイクアウト・デリバ／リー」「コンビニ・ドラッグス／トア」のように業種名が
   中途半端に折り返す。**ひと目で自分の業種を見つけてもらうのが目的**なので、ここは効く */
/* ⚠ **縦の余白と行間はこの値から緩めないこと。** グループ名を見出しに立てたぶん行が1本増えた
   ので、上下の余白（16→12）と行間を詰めて元の高さに戻してある。緩めると1枚あたり15〜18px、
   セクション全体で50px近く伸びる。左右の20pxは詰めていない（横は余っていない） */
.dtl-industry-card{
  flex:0 1 300px;display:flex;flex-direction:column;gap:6px;
  padding:12px 20px;border:1px solid var(--line);border-radius:8px;background:#fff;
}
/* 絵と業種名は横並び。根拠はその下に積むので、頭だけを行にする */
.dtl-industry-cardhead{display:flex;align-items:center;gap:16px}
/* 絵は「自分の業種を探す」入口なので、カードを大きくしない範囲でいっぱいまで大きくする。
   ⚠ **72×54 が上限。** ここは幅と高さの両方で挟まれている：
   ・幅 — 300px から余白40と絵とすき間16を引いた残りが業種名の幅。80px にすると 164px しか
     残らず「テイクアウト・デリバリー」(168px) が折り返す（一度直した不具合が戻る）
   ・高さ — 業種名より絵が高くなると、その差がそのままカードの高さに乗る。54px は業種名3行
     (71px)の内側に収まるので、**業種名が多い段（できます・難しい）は高さが変わらない**。
     業種名が1〜2件の「ご相談ください」だけは絵が最も高い要素になり 8〜12px 伸びる
   ⚠ 絵を業種名の「上」に置くとこの逃げ道が無くなり、高さが 133px→160px に増える。
     カードを大きくしない方針を採るなら、絵は左に置いたままにすること。 */
.dtl-industry-illust{flex:none;width:72px;height:54px;display:block}
.dtl-industry-cardbody{display:flex;flex-direction:column;gap:2px;min-width:0}
/* グループ名が見出し。判定の単位はグループなので、ここが「何に対する答えか」を示す */
.dtl-industry-cardgroup{margin:0;font-size:15px;font-weight:600;color:var(--ink);letter-spacing:.04em;line-height:1.4}
/* 業種名は見出しの中身。見出しより一段落として、それでも読める大きさを保つ。
   ⚠ **12px まで落とさない。** 自分の業種を見つけてもらうのがこのブロックの目的で、
   注釈と同じ大きさにすると読み飛ばされる。縦を詰めるのは行間でやること（下の 1.45）。
   ⚠ 行間を 1.5 に戻さない（3業種のカードで6px、セクション全体で30px伸びる） */
.dtl-industry-cardlist{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;min-width:0}
.dtl-industry-cardlist li{font-size:13px;font-weight:400;color:var(--gray);letter-spacing:.04em;line-height:1.45}
/* 根拠はカードの中。ぶら下げず、業種名の下に静かに置く
   （未公開物件では配信に含まれないので、そもそも出ない） */
.dtl-industry-reason{margin:0;font-size:12px;color:var(--gray);letter-spacing:.04em;line-height:1.7}
/* 「できます」は問い合わせに直結する段なので、ここだけ塗って視線の着地点を作る。
   ⚠ **塗りは #EDF9F5。** すぐ上の `.dtl-facility-lead`（居抜きの説明）と `.dtl-pickbox`
   （おせっかいメモ）が同じ色で、この物件詳細ページの「淡い緑の面」はこの値で通っている。
   `--live-pale`(#EAF7F0) は小さなバッジ用の色で、面に使うと隣のボックスと3だけずれた緑が
   並び、揃えそこねたように見える。**枠も塗りと同色**にして、上のボックス（枠なし）に揃える
   （border は残す。太さが変わると他の段とカードの高さがずれる）。
   ⚠ **グラデーションにしないこと。** 上から72pxで白へ抜く指定にしていたせいで、根拠文が入って
   カードが高くなるPC表示では緑が上端しか残らず、「ご相談ください」の白とほぼ同じに見えていた。
   段の差が消えるとこのブロックは意味を失うので、高さに左右されない単色で塗る。 */
.dtl-industry-group--possible .dtl-industry-label{color:var(--live)}
.dtl-industry-group--possible .dtl-industry-card{
  border-color:var(--mint);
  background:var(--mint);
}
/* 「難しいかもしれません」は落としたほうなので、文字と絵を沈めるだけにする。
   ⚠ 破線の枠は付けない（同じページのどこにも破線が無く、ここだけ落書きのように浮く）。
   ⚠ 打ち消し線も付けない。**「できない」と読ませないため**（相談の余地は残す言い方に
      統一した。旧「不可」の段に打ち消し線を引いていたのは、断定してよい値だった頃の名残）。 */
.dtl-industry-group--hard .dtl-industry-label{color:var(--warn)}
.dtl-industry-group--hard .dtl-industry-card{background:var(--cream)}
/* ⚠ **`--gray-light` は使わない。** `--cream` の上に置くとコントラスト比 2.1:1 で、
   業種名が読めなかった（読みやすさの基準は 4.5:1）。`--gray` なら 5.3:1 で基準を満たす。
   沈めるのは太さ（400）と絵の濃さ（.6）で足りる。**読めなくしてはいけない** */
.dtl-industry-group--hard .dtl-industry-cardgroup{color:var(--gray)}
.dtl-industry-group--hard .dtl-industry-illust{opacity:.6}

/* 対応可能業種が3行目・周辺情報が4行目を使うので、AI相談は5行目 */
.dtl-ai{grid-column:1 / -1;grid-row:5;margin-top:40px;border:1px solid var(--moss-tint);border-radius:8px;padding:24px;background:linear-gradient(180deg,#F4FAF8 0%,var(--paper) 120px)}
.dtl-ai-head{display:flex;align-items:flex-start;gap:12px}
.dtl-ai-mark{flex-shrink:0;width:40px;height:40px;border-radius:50%;background:var(--paper);border:1px solid var(--moss-tint);box-shadow:0 1px 6px rgba(var(--moss-rgb),.12);display:grid;place-items:center}
.dtl-ai-mark img{display:block;width:22px;height:22px}
.dtl-ai-headtext{min-width:0}
.dtl-ai-lead{margin-top:16px;font-size:14px;color:var(--ink);letter-spacing:.04em;line-height:1.8}
.dtl-ai-listttl{margin-top:20px;font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--moss)}
.dtl-ai-list{margin-top:8px;padding:0;list-style:none;counter-reset:aiitem;display:flex;flex-direction:column;gap:6px}
.dtl-ai-list li{counter-increment:aiitem;position:relative;padding-left:28px;font-size:14px;color:var(--ink);letter-spacing:.04em;line-height:1.7}
.dtl-ai-list li::before{content:counter(aiitem);position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:var(--moss-tint);color:var(--moss);font-size:11px;font-weight:700;display:grid;place-items:center}
/* PCで下段いっぱいに広がるため、ボタンだけは追従バーのCTAと同じ幅（400px）で止める */
.dtl-ai-btn{margin:20px auto 0;width:100%;max-width:400px;display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 24px;border-radius:32px;background:#0D0D0D;border:1px solid #0D0D0D;font-size:14px;font-weight:500;letter-spacing:.08em;color:#fff;transition:background-color .22s ease}
.dtl-ai-btn:hover{background:#343541;border-color:#343541}
.dtl-ai-btn img{display:block;width:20px;height:20px;flex-shrink:0}
.dtl-ai-note{margin-top:12px;font-size:12px;color:var(--gray);letter-spacing:.04em;line-height:1.8}
/* パネルの中身として使うときは、枠・余白・背景をパネル側に任せて装飾を落とす */
.dtl-ai--panel{grid-column:auto;grid-row:auto;margin-top:0;border:none;border-radius:0;padding:0;background:none}
/* 右端タブのレールとAIパネルは PC 専用。990px以下では存在ごと出さない（本文のカードが受け持つ） */
.dtl-stickydock-rail{display:none}
.dtl-aipanel{display:none}
.dtl-adminpanel{display:none}

/* 追従バー（sticky-cta-bar）。画面下にposition:fixedで常時表示するため、
   本文側にbody.page-detailのpadding-bottomで逃げ場を確保する */
.dtl-stickybar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(255,255,255,.6);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border-top:1px solid var(--mint);padding:16px 20px;display:flex;flex-direction:column;align-items:center;gap:16px}
.dtl-stickybar-note{font-size:14px;color:var(--ink);letter-spacing:.04em;text-align:center}
.dtl-stickybar-row{display:flex;align-items:center;justify-content:center;gap:32px;width:100%;max-width:1120px}
/* js/detail.jsが共通の.favクラスを付与するが、.fav側のposition:absolute等（カード右上の
   ハート用）は追従バーのレイアウトと合わないため、この要素分だけ明示的に打ち消す。
   ⚠ static には**しないこと**。.fav::before（当たり判定を44pxまで広げる透明な擬似要素）は
   absoluteなので、ここをstaticにすると位置の基準が祖先の.dtl-stickybar（position:fixed）へ
   ずれ上がり、width/height:100%が「バー全体」と解釈されて問い合わせ・LINEの両ボタンを覆う。
   そうなるとバーのどこを押してもお気に入りがトグルされ（app.jsがpreventDefaultも呼ぶため）
   リンクが一切開かなくなる。relative＋right/top:autoなら、配置はstatic相当のまま
   ::beforeの基準だけがこのボタン自身に戻る */
.dtl-fav{position:relative;right:auto;top:auto;flex-shrink:0;width:56px;height:56px;border-radius:50%;border:none;background:rgba(255,255,255,.6);box-shadow:0 0 8px rgba(204,204,204,.41);display:grid;place-items:center;cursor:pointer;padding:0}
.dtl-fav-icon{width:24px;height:22px;fill:none;stroke:var(--favorite);stroke-width:2;transition:fill .15s ease}
.dtl-fav[aria-pressed="true"] .dtl-fav-icon{fill:var(--favorite)}
/* 見出しの上（札の並びの右端）の ♡（2026-10-13〜）。PC は追従バーが右端のタブの中で閉じていて ♡ が見えないため、
   開いた瞬間の画面にも置く。札と同じ高さの白い丸角に、ハート＋「お気に入り」。押すとハートだけ塗る（追従バーと同じ） */
.dtl-fav.dtl-fav--inline{
  margin-left:auto;width:auto;height:32px;padding:0 12px 0 10px;border-radius:999px;
  /* 追従バーの ♡ 向けの画面幅ごとの指定（align-self:flex-start）が効かないよう、札の並びと縦の中央をそろえる */
  display:inline-flex;align-items:center;align-self:center;gap:6px;
  background:var(--paper);border:1px solid var(--line);box-shadow:none;
  font-family:var(--ff-jp);font-size:12.5px;font-weight:500;letter-spacing:.06em;line-height:1;color:var(--ink);
}
.dtl-fav.dtl-fav--inline .dtl-fav-icon{width:16px;height:15px}
.dtl-fav.dtl-fav--inline:hover{border-color:var(--favorite)}
.dtl-cta-group{flex:1;display:flex;gap:32px;min-width:0}
.dtl-cta-btn{flex:1;max-width:400px;display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 32px;border-radius:32px;font-size:14px;font-weight:500;letter-spacing:.08em;color:#fff;white-space:nowrap;transition:background-color .22s ease}
.dtl-cta-btn img{width:24px;height:24px;flex-shrink:0}
.dtl-cta-btn.tel{background:var(--moss);border:1px solid var(--moss)}
.dtl-cta-btn.tel:hover{background:var(--moss-hover);border-color:var(--moss-hover)}
.dtl-cta-btn.line{background:#06C755;border:1px solid #06C755}
.dtl-cta-btn.line:hover{background:#06BD51;border-color:#06BD51}
body.page-detail{padding-bottom:116px}
/* 完売御礼を出すページは追従バーを出さないので、その場所取りも外す（末尾に空白の帯が残るため） */
body.page-detail--nobar{padding-bottom:0}

/* 検索結果の「前の物件／次の物件」（js/detail.js が検索から来たときだけ出す）。
   上部（--top）はパンくずの下に流れる1行、下部（--bar）は990px以下の追従バーの案内文と差し替える。
   ⚠ display を指定しているので [hidden] を明示で打ち消す（しないと検索外から来ても出る） */
.dtl-pnav{display:flex;align-items:center;gap:16px}
.dtl-pnav[hidden]{display:none}
.dtl-pnav--top{justify-content:space-between;padding-top:0;padding-bottom:8px;font-size:14px;letter-spacing:.04em}
.dtl-pnav-back{color:var(--moss);font-weight:500;white-space:nowrap}
.dtl-pnav-back::before{content:"‹";margin-right:6px}
.dtl-pnav-back:hover{text-decoration:underline}
.dtl-pnav-pos{color:var(--gray);font-size:12px;white-space:nowrap}
.dtl-pnav-btns{display:flex;gap:8px;margin-left:auto}
.dtl-pnav-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 16px;border:1px solid var(--moss);border-radius:20px;background:var(--paper);color:var(--moss);font-size:14px;font-weight:500;white-space:nowrap;transition:background-color .2s ease}
.dtl-pnav-btn[data-nav-prev]::before{content:"‹"}
.dtl-pnav-btn[data-nav-next]::after{content:"›"}
.dtl-pnav-btn:hover{background:var(--moss-tint)}
.dtl-pnav-btn[aria-disabled="true"]{border-color:var(--line);color:var(--gray-light);background:var(--paper);pointer-events:none}
/* 下部バーの中。案内文と同じ段に置くので、ボタンは低くしてバーの高さを変えない */
.dtl-pnav--bar{justify-content:space-between;width:100%;max-width:1120px}
.dtl-pnav--bar .dtl-pnav-btn{min-height:32px;padding:0 14px;font-size:13px}
.dtl-stickybar.has-pnav .dtl-stickybar-note{display:none}
/* ボタン（32px）は案内文の1行より少し高いので、そのぶん段の間を詰めて、バー全体の高さを据え置く */
.dtl-stickybar.has-pnav{gap:8px}
@media(min-width:991px){
  /* PCの右端パネルでは出さない（上部の送りバーで足りる）。案内文と段の間も元に戻す */
  .dtl-pnav--bar{display:none}
  .dtl-stickybar.has-pnav{gap:12px}
  .dtl-stickybar.has-pnav .dtl-stickybar-note{display:block}
}
@media(max-width:540px){
  /* スマホは上部を「戻る」と前後ボタンだけにし、位置（◯/◯件）は下部バーに任せる＝1行に収める */
  .dtl-pnav--top{gap:8px;font-size:13px}
  .dtl-pnav--top .dtl-pnav-pos{display:none}
  .dtl-pnav--top .dtl-pnav-btn{min-height:36px;padding:0 12px;font-size:13px}
}

/* PC（991px以上）は、画面下いっぱいの横バーではなく**右端に貼り付いた細いタブ**にして、
   押したときだけ縦置きカード（パネル）を出す。
   横バーは本文の下端をずっと覆っていて読みにくく、右下カードに変えた後も写真・本文の上に
   出しっぱなしで邪魔だった。タブの幅ぶんは本文側に余白を作って確保するので、**タブが
   文字・写真の上に乗ることは無い**（開いたパネルだけは、開いている間だけ本文に重なる）。
   990px以下（タブレット・スマホ）は横幅が足りず本文に被るので、今までどおり下部バーのまま。 */
@media(min-width:991px){
  .dtl-stickybar{left:auto;right:24px;bottom:24px;width:auto;max-width:288px;align-items:stretch;padding:16px;gap:12px;background:rgba(255,255,255,.92);border:1px solid var(--mint);border-radius:16px;box-shadow:0 4px 20px rgba(17,17,17,.1)}
  .dtl-stickybar-note{text-align:left;font-size:13px;line-height:1.6}
  .dtl-stickybar-row{flex-direction:column;align-items:stretch;gap:12px;width:100%;max-width:none}
  .dtl-cta-group{flex-direction:column;width:100%;gap:12px}
  .dtl-cta-btn{max-width:none;width:100%}
  /* お気に入りは丸のまま縦並びの先頭に置く。全幅にすると問い合わせ・LINEと同じ重さに見えてしまう */
  .dtl-fav{align-self:flex-start;width:48px;height:48px}
  /* 下端に張り付かなくなるので、本文末尾の場所取りは外す（そのままだと空白の帯が残る） */
  body.page-detail{padding-bottom:40px}
  /* 完売御礼のページは追従バー自体が無い。上の 40px が後勝ちで効いてしまうため、ここでも 0 に戻す */
  body.page-detail--nobar{padding-bottom:0}

  /* ---- 右端タブ ----
     ふだんは画面右端に貼り付いたこのタブ1本だけを出し、押したときにパネルを出す。
     ⚠ **問い合わせパネルを隠す指定に `.is-tabbed` を使わないこと。** あのクラスを付けるのは
     ページ末尾の detail.js で、それまでパネルが開いたまま描かれる＝**読み込みのたびに
     一瞬開いて見える**（2026-09-22 に実際に起きた）。最初から閉じておき、JSが動かない人には
     DetailStickyBar.astro の <noscript> で出し戻す。AI相談のパネルも同じ考え方。
     `.is-tabbed` を条件にしてよいのは「JSが動くときだけ効かせたい飾り」（×の余白など）に限る。 */
  /* タブは縦に積む（上＝お問い合わせ、下＝AIに相談）。位置はレールが持ち、タブ自身は中身だけ持つ */
  .dtl-stickydock-rail{
    position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:51;
    display:flex;flex-direction:column;align-items:flex-end;gap:8px;
    transition:opacity .2s ease,visibility .2s ease;
  }
  .dtl-stickybar-tab{
    display:flex;flex-direction:column;align-items:center;gap:8px;
    padding:18px 10px;border:none;border-radius:12px 0 0 12px;
    background:var(--moss);color:#fff;cursor:pointer;
    box-shadow:0 2px 12px rgba(17,17,17,.14);
    transition:background-color .22s ease;
  }
  .dtl-stickybar-tab--ai{background:#0D0D0D}
  /* ⚠ 上の display:flex が [hidden] を打ち消すので、消す側を明示する。
     これが無いと、JSがタブの hidden を外す前（＝スマホ幅でも）タブが出てしまう */
  .dtl-stickybar-tab[hidden]{display:none}
  .dtl-stickybar-tab:hover{background:var(--moss-hover)}
  /* ⚠ AIのタブ（中身がChatGPTなので黒）の hover は、上の緑の hover より**後ろ**に書くこと。
     同じ強さの指定なので、先に書くと緑で上書きされて色が戻る */
  .dtl-stickybar-tab--ai:hover{background:#343541}
  /* 管理者タブ（管理者専用ビューのときだけ出る）。色は管理者帯（.admin-bar）と揃え、
     お客様にも見えるタブと一目で区別できるようにする。hover は上の緑より後ろに書く（理由はAIと同じ） */
  .dtl-stickybar-tab--admin{background:#3d3a34}
  .dtl-stickybar-tab--admin:hover{background:#57534b}
  .dtl-stickybar-tab img,.dtl-stickybar-tab svg{display:block;width:20px;height:20px}
  .dtl-stickybar-tab-label{writing-mode:vertical-rl;font-size:13px;letter-spacing:.14em;line-height:1}
  /* 本文の中のAIカードは、PCでは右端タブのパネルが同じ中身を持つので出さない。
     ⚠ **JSで消してはいけない。** JSで消すと、読み込み直後に本文のカードが一瞬見えてから
     消えて本文が飛ぶ（レイアウトがガタつく）。CSSで最初から消しておくこと。
     JSが動かない環境ではパネルが開けず導線ごと消えてしまうので、
     そのときだけ DetailAiConsult の <noscript> がこの指定を打ち消して本文のカードを出し戻す */
  .dtl-ai:not(.dtl-ai--panel){display:none}

  /* どれかが開いている間はタブを丸ごと引っ込める（ほぼ同じ場所にパネルが出るため） */
  .dtl-stickydock.is-open .dtl-stickydock-rail{opacity:0;visibility:hidden;pointer-events:none}

  /* タブ運用中のパネル。閉じている間は右へ少しずらして消す。
     ⚠ 画面の外へ出し切る（translateX(100%)等）ことはしない。position:fixed でも
     環境によっては横スクロールが生まれるため、visibility で消す方式にしている。
     ⚠ 出すかどうかは `is-open` ではなく `data-open` で見る。タブが2本あるので、
     `is-open` だけだとAIを開いたときに問い合わせパネルまで一緒に出て重なる

     ⚠ **`.is-tabbed` を条件に入れないこと。** あのクラスを付けるのはページ末尾の detail.js で、
     それまでパネルが開いたまま描かれる＝**読み込みのたびに一瞬開いて見える**（実際に起きた）。
     最初から閉じておき、JSが動かない人には下の <noscript>（DetailStickyBar.astro）で出し戻す。
     AI相談のパネルが同じ理由で同じ作りにしてある。 */
  .dtl-stickydock .dtl-stickybar{
    top:50%;bottom:auto;transform:translateY(-50%) translateX(24px);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .22s ease,transform .22s ease,visibility .22s ease;
  }
  .dtl-stickydock[data-open="contact"] .dtl-stickybar{
    opacity:1;visibility:visible;pointer-events:auto;transform:translateY(-50%);
  }

  /* ---- AI相談のパネル ----
     問い合わせパネル（288px）は読み物には狭いので、こちらは広めに取る。
     ⚠ 縦は画面に収まらないことがある（4項目＋ボタン＋注記）。はみ出したぶんは
     パネルの中でスクロールさせる。画面の高さを超えて伸ばすと下のボタンが押せなくなる。
     ⚠ **スクロールさせるのはパネル自身ではなく中身（.dtl-ai--panel）**。パネル側を
     スクロールさせると、中に絶対配置している×が中身と一緒に上へ流れて消える。
     ⚠ 見せる指定を `.is-tabbed`（detail.js が PC でだけ付ける）の内側に置いているのは、
     JSが動かない環境でここが出てしまうと、本文のカードと二重に出てしまうため */
  .dtl-stickydock.is-tabbed .dtl-aipanel{
    display:block;position:fixed;right:24px;top:50%;z-index:50;
    width:min(440px, calc(100vw - 96px));max-height:calc(100vh - 48px);overflow:hidden;
    padding:24px;border-radius:16px;background:rgba(255,255,255,.98);
    border:1px solid var(--mint);box-shadow:0 4px 20px rgba(17,17,17,.1);
    transform:translateY(-50%) translateX(24px);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .22s ease,transform .22s ease,visibility .22s ease;
  }
  .dtl-stickydock.is-tabbed[data-open="ai"] .dtl-aipanel{
    opacity:1;visibility:visible;pointer-events:auto;transform:translateY(-50%);
  }
  /* ×は問い合わせパネルと同じ見た目・同じ位置に置く。
     ⚠ パネル自身がスクロールするので、基準は .dtl-aipanel（position:fixed）のまま。
     ここを position:sticky 等にすると、スクロール時に見出しへ重なる */
  .dtl-aipanel-close{
    position:absolute;top:16px;right:16px;width:32px;height:32px;
    display:grid;place-items:center;border:none;background:none;border-radius:8px;
    color:var(--gray);cursor:pointer;transition:background .2s ease,color .2s ease;
  }
  .dtl-aipanel-close[hidden]{display:none}
  .dtl-aipanel-close:hover{background:var(--moss-tint);color:var(--moss)}
  /* 見出しが×の下へ潜らないよう右を空ける */
  .dtl-aipanel .dtl-ai-head{padding-right:40px}
  /* はみ出したぶんはここがスクロールする（パネルの上下の余白24px×2を引いた高さまで） */
  .dtl-aipanel .dtl-ai--panel{max-height:calc(100vh - 96px);overflow-y:auto}

  /* ---- 管理者メニューのパネル（管理者専用ビューのときだけ） ----
     出し方はAIパネルと同じ（`.is-tabbed` の内側・data-open で出す）。×も .dtl-aipanel-close を共用。
     ストーリーの下見（9:16）が入るので、縦は画面に収め、はみ出したぶんはパネルの中でスクロールさせる */
  .dtl-stickydock.is-tabbed .dtl-adminpanel{
    display:block;position:fixed;right:24px;top:50%;z-index:50;
    width:min(360px, calc(100vw - 96px));max-height:calc(100vh - 48px);overflow:hidden;
    padding:24px;border-radius:16px;background:rgba(255,255,255,.98);
    border:1px solid var(--line);box-shadow:0 4px 20px rgba(17,17,17,.1);
    transform:translateY(-50%) translateX(24px);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .22s ease,transform .22s ease,visibility .22s ease;
  }
  .dtl-stickydock.is-tabbed[data-open="admin"] .dtl-adminpanel{
    opacity:1;visibility:visible;pointer-events:auto;transform:translateY(-50%);
  }
  /* ⚠ スクロールするのは中身だけ。パネル自身をスクロールさせると絶対配置の×が一緒に流れて消える（AIパネルと同じ） */
  .dtl-adminpanel-body{max-height:calc(100vh - 96px);overflow-y:auto}
  .dtl-adminpanel-eyebrow{font-size:12px;color:var(--gray);letter-spacing:.08em;padding-right:40px}
  .dtl-adminstory{margin-top:8px}
  /* 2つ目以降の欄（物件概要レポートの下のストーリー）。区切り線は引かず、余白で分ける */
  .dtl-adminstory--next{margin-top:40px}
  .dtl-adminstory-ttl{font-size:16px;font-weight:700;letter-spacing:.04em;color:var(--ink)}
  .dtl-adminstory-note,.dtl-adminstory-last{margin-top:8px;font-size:12px;line-height:1.8;color:var(--gray);letter-spacing:.04em}
  .dtl-adminstory-last[hidden],.dtl-adminstory-preview[hidden]{display:none}
  /* 下見は実物（1080×1920）と同じ縦横比のまま縮めて出す */
  .dtl-adminstory-preview{margin:16px auto 0;width:180px;aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:var(--cream)}
  .dtl-adminstory-preview img{display:block;width:100%;height:100%;object-fit:cover}
  .dtl-adminstory-msg{margin-top:12px;font-size:12px;line-height:1.8;letter-spacing:.04em;color:var(--ink)}
  .dtl-adminstory-msg:empty{display:none}
  .dtl-adminstory-msg[data-tone="error"]{color:var(--warn2)}
  .dtl-adminstory-actions{margin-top:16px;display:flex;flex-direction:column;gap:8px}
  .dtl-adminstory-btn{
    width:100%;padding:12px 16px;border-radius:24px;border:1px solid #3d3a34;background:var(--paper);
    color:#3d3a34;font-size:14px;font-weight:500;letter-spacing:.06em;cursor:pointer;transition:background-color .2s ease;
  }
  .dtl-adminstory-btn:hover{background:var(--cream)}
  .dtl-adminstory-btn--primary{background:#3d3a34;color:#fff}
  .dtl-adminstory-btn--primary:hover{background:#57534b}
  .dtl-adminstory-btn[hidden]{display:none}
  .dtl-adminstory-btn:disabled{border-color:var(--line);background:var(--paper);color:var(--gray-light);cursor:default}
  /* 物件概要レポートの欄の中の「図面（マイソク）」。区切り線は引かず、余白で分ける */
  .dtl-adminreport-maisoku{margin-top:24px}
  .dtl-adminreport-maisoku-ttl{font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--ink)}
  /* 閉じる×。タブ運用のときだけ detail.js が hidden を外す（見た目は .sv-close と揃える） */
  .dtl-stickybar-close{
    position:absolute;top:8px;right:8px;width:32px;height:32px;
    display:grid;place-items:center;border:none;background:none;border-radius:8px;
    color:var(--gray);cursor:pointer;transition:background .2s ease,color .2s ease;
  }
  .dtl-stickybar-close[hidden]{display:none}
  .dtl-stickybar-close:hover{background:var(--moss-tint);color:var(--moss)}
  /* 文言が×の下へ潜らないよう右を空ける */
  .dtl-stickydock.is-tabbed .dtl-stickybar-note{padding-right:32px}

  /* ---- タブのぶんの場所を本文側に空ける ----
     これが無いとタブが写真・本文の上に乗る。タブの実幅は約44px（アイコン20＋左右10）なので
     48px を確保する。.wrap / .dtl-wrap は元の左右32pxに足して80px。
     完売御礼のページはタブ自体が出ないので、余白も作らない。
     ⚠ 全幅の背景帯（.cta-top は左右128px・フッターの背景）はそのまま。背景ごと縮めると
     右端に白い筋が残って壊れて見えるため、帯の上はタブが通る（文字・写真には掛からない） */
  body.page-detail:not(.page-detail--nobar) .dtl-wrap{padding-right:80px}
  body.page-detail:not(.page-detail--nobar) .wrap{padding-right:80px}
  body.page-detail:not(.page-detail--nobar) .footer-in{padding-right:48px}
}

@media(max-width:1280px){
  .dtl-cols{grid-template-columns:320px 1fr;column-gap:32px}
}
@media(max-width:990px){
  .dtl-cols{grid-template-columns:1fr;grid-template-rows:none;gap:0}
  .dtl-gallery-col{grid-column:1;grid-row:1}
  .dtl-left{grid-column:1;grid-row:2;margin-top:24px}
  /* 1列になるスマホでは「物件概要 → AI相談 → 設備・条件／対応可能業種／お部屋の紹介 → 周辺情報」
     の順に積む。周辺情報は PC で全幅にするため右カラムの外へ出しているので、ここでも行を指定して
     右カラムの後ろへ回す（指定しないと自動配置で並びが入れ替わる） */
  .dtl-ai{grid-column:1;grid-row:3}
  .dtl-right{grid-column:1;grid-row:4;margin-top:40px}
  .dtl-industry{grid-column:1;grid-row:5}
  /* ⚠ **flex で伸ばさないこと。** `flex:1 1 240px` にしていたら、その行に1枚しかない
     最後のカード（事務所・倉庫）だけが2枚ぶんの幅に伸び、768px でそこだけ別物に見えた。
     grid なら列が固定されるので、1枚しかない行でも幅が揃う */
  .dtl-industry-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
  /* どの段も最大11枚（＝11グループ）まで積み上がる。判定が付いていない物件は
     「ご相談ください」に11枚とも並ぶので、この2段だけ絵と余白を詰めて縦を吸収する。
     **「できます」は詰めない**（主役なので） */
  .dtl-industry-group--consult .dtl-industry-card,
  .dtl-industry-group--hard .dtl-industry-card{padding:12px 14px;gap:6px}
  .dtl-industry-group--consult .dtl-industry-cardhead,
  .dtl-industry-group--hard .dtl-industry-cardhead{gap:12px}
  /* 枚数の多い2段は絵を一段小さく。⚠ 詰めすぎない — 40px まで落とすと「できます」の 72px と
     差が開きすぎ、同じ画面の中で別の部品に見える */
  .dtl-industry-group--consult .dtl-industry-illust,
  .dtl-industry-group--hard .dtl-industry-illust{width:56px;height:42px}
  .dtl-area{grid-column:1;grid-row:6}
}

/* ═══ スマホは対応可能業種を2列にする ═══
   1列で縦に積むと10枚で1,391pxあり、グループ名を見出しに立てたぶんがそのまま縦に効く
   （PCは根拠のある行に高さを合わせるので吸収できるが、1列では逃げ場が無い）。
   ⚠ **2列にするなら絵は上に置くこと。** 横並びのままだとカード幅173pxから余白と絵を引いて
   文字が75pxしか残らず、「エステ・リラクゼーション」がずたずたに折り返す。
   絵を上に置くと縦は伸びるが、**枚数が半分の行数になるぶうが効く**（実測で差し引き縮む）。 */
@media(max-width:640px){
  /* ⚠ **flex ではなく grid にすること。** flex で幅を calc(50%) にすると、その行に1枚しか
     ない最後のカード（事務所・倉庫）が伸びて横いっぱいになり、そこだけ別物に見えた */
  .dtl-industry-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
  .dtl-industry-card{min-width:0;padding:12px}
  /* 絵を上、グループ名と業種名をその下に。align-items を戻さないと絵が横いっぱいに伸びる */
  .dtl-industry-cardhead{flex-direction:column;align-items:flex-start;gap:6px}
  .dtl-industry-illust,
  .dtl-industry-group--consult .dtl-industry-illust,
  .dtl-industry-group--hard .dtl-industry-illust{width:48px;height:36px}
  .dtl-industry-cardgroup{font-size:14px}
  /* 狭い列では業種名の折り返しは不自然に見えない（1列の広いカードで折り返すのとは別） */
  .dtl-industry-group--consult .dtl-industry-card,
  .dtl-industry-group--hard .dtl-industry-card{padding:12px}
  /* スマホは画面の高さが限られるので、PC の 520px より控えめに。
     それでも元の 280px より広く取り、街並みが分かる大きさにする */
  .dtl-map,.dtl-map-ph{height:340px}
  /* スマホは写真のサムネイルを出さない（メイン写真を前後送りで見る）。
     ⚠ ただし「もっと写真を探す」だけは残す。列ごと消すと、媒体に写真がほとんど無い物件で
     スマホのお客様だけ写真を探しに行く手段が無くなる。列は消さず、写真の枠だけを隠す。 */
  .gallery-thumbs>.gallery-thumb{display:none}
  /* 余白はタイル側が持つ。列に付けたままだと、タイルが出ない物件
     （未公開物件・建物名が取れない物件）でメイン写真の下に8pxの空きだけが残る */
  .gallery-thumbs{margin-top:0}
  /* 1枚だけ残るので、サムネイルの枡ではなく指で押せる横帯にする */
  .gallery-search-tile{
    flex:0 0 100%;aspect-ratio:auto;flex-direction:row;gap:8px;padding:13px 16px;margin-top:8px;
  }
  .gallery-search-tile-txt{font-size:13px}
  /* 写真が小さいので、写真の上は1文目とリンクだけ。残りの文は写真のすぐ下へ回す */
  /* 右は枚数表示（.gallery-counter・右下16px）のぶん空ける。1文目が2行に折れると右端で重なるため */
  .gallery-members-cta{padding:40px 76px 14px 16px;gap:2px}
  .gallery-members-cta-lead{font-size:13px}
  .gallery-members-cta-body{display:none}
  .gallery-members-cta-link{font-size:12px;margin-top:4px}
  .gallery-members-cta-links{column-gap:16px}
  .gallery-members-more{
    display:flex;flex-direction:column;gap:6px;margin-top:10px;
    font-size:13px;line-height:1.75;letter-spacing:.04em;color:var(--ink);
  }
  /* 会員向けの帯。スマホはサムネイルが無くメイン写真のすぐ下に来るので、間を詰めて左右も狭める */
  .gallery-members-band{margin-top:10px;padding:16px 16px 18px}
  /* 写真の金のプレートは左下へ（右上だと折り返した左上の札と重なる。右下は枚数表示） */
  .gallery-members-plate{top:auto;right:auto;bottom:12px;left:12px;font-size:10px;letter-spacing:.24em;padding:5px 10px 5px 12px}
  .gallery-members-band-ttl{font-size:15px}
  .dtl-price-block{margin-top:8px}
  .dtl-fee-row{gap:8px;font-size:14px}
  .dtl-defrow{font-size:15px}
  .dtl-stickybar-row{gap:16px}
  .dtl-cta-group{gap:16px}
  .dtl-cta-btn{padding:14px 16px;font-size:13px}
}
@media(max-width:540px){
  .dtl-demo-note{font-size:24px;padding:10px 16px}
  .dtl-wrap{padding:16px 16px 40px}
  .dtl-addr{font-size:20px}
  body.page-detail .eyebrow{margin-bottom:0}
  .gallery-thumb{flex:0 0 calc(50% - 4px)}
  .dtl-ai{padding:20px 16px}
  .dtl-stickybar{padding:12px 16px}
  .dtl-stickybar-note{font-size:12px}
  .dtl-stickybar-row{gap:8px}
  .dtl-fav{width:40px;height:40px;flex-shrink:0}
  .dtl-fav-icon{width:20px;height:18px}
  .dtl-cta-group{gap:8px}
  .dtl-cta-btn{padding:13px 8px;gap:6px;font-size:13px}
  .dtl-cta-btn img{width:18px;height:18px}
  .dtl-cta-label{display:none}
  body.page-detail{padding-bottom:104px}
  body.page-detail--nobar{padding-bottom:0}
}

/* ═══ マイページ ═══ */
body.page-mypage{background:#F7F9F8}
.mypage-shell{max-width:1424px;margin:0 auto;padding:24px 32px 96px}
.mypage-grid{display:flex;align-items:flex-start;gap:32px}

/* サイドバー */
.mypage-side{flex:0 0 224px;width:224px;display:flex;flex-direction:column;gap:8px;position:sticky;top:96px}
.mypage-user{background:#fff;border-radius:8px;padding:16px;display:flex;gap:8px;align-items:center}
.mypage-user img{width:24px;height:24px;flex-shrink:0}
.mypage-user-text{font-size:13px;font-weight:500;color:var(--ink);letter-spacing:.04em;line-height:1.6}
.mypage-line{background:#fff;border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:8px}
.mypage-line-head{display:flex;align-items:center;justify-content:space-between;width:100%}
.mypage-line-head img{width:24px;height:24px}
.mypage-line-badge{display:inline-flex;align-items:center;background:#FBDFDE;color:#C54B4B;font-size:12px;font-weight:500;letter-spacing:.04em;border-radius:4px;padding:2px 4px;border:none;font-family:var(--ff-jp);cursor:default;-webkit-tap-highlight-color:transparent}
.mypage-line-badge.is-on{background:var(--mint);color:var(--moss);cursor:pointer}
.mypage-line-note{font-size:15px;color:var(--gray);letter-spacing:.04em;line-height:1.4}
.mypage-line-btn{display:flex;align-items:center;justify-content:space-between;width:100%;background:#F1F8F4;border:none;border-radius:4px;padding:8px;font-family:var(--ff-jp);font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--moss);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .32s cubic-bezier(.2,.7,.3,1),color .32s cubic-bezier(.2,.7,.3,1)}
.mypage-line-btn:hover{background:var(--moss);color:#fff}
.mypage-line-btn img{width:24px;height:24px}
.mypage-arrow-dot{position:relative;flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--moss);color:#fff;display:grid;place-items:center;transition:background .32s cubic-bezier(.2,.7,.3,1),color .32s cubic-bezier(.2,.7,.3,1)}
.mypage-line-btn:hover .mypage-arrow-dot{background:#fff;color:var(--moss)}
.mypage-arrow-icon{width:13px;height:13px;transform:rotate(45deg)}
.mypage-nav{background:#fff;border-radius:8px;padding:16px;display:flex;flex-direction:column}
.mypage-nav-item{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;border:none;background:none;width:100%;text-align:left;font-family:var(--ff-jp);font-weight:500;font-size:15px;letter-spacing:.08em;color:var(--moss);white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .2s ease}
.mypage-nav-icon{position:relative;width:24px;height:24px;flex-shrink:0}
.mypage-nav-icon img{position:absolute;inset:0;width:100%;height:100%}
.mypage-nav-icon .ic-hover{opacity:0;transition:opacity .2s ease}
.mypage-nav-item:hover{color:var(--live)}
.mypage-nav-item:hover .ic-hover{opacity:1}

/* メインカラム */
.mypage-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:24px}
#mypage-overview{display:flex;flex-direction:column;gap:24px}

/* SP／タブレットのログアウト確認ダイアログ（.fav-confirmと同じ暗幕＋白ボックスの土台を流用し、
   ボタンだけピル形状にしたバリエーション） */
.mypage-logout-overlay{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;background:rgba(39,39,42,.7);padding:16px;-webkit-tap-highlight-color:transparent}
.mypage-logout-overlay[hidden]{display:none}
.mypage-logout-box{width:100%;max-width:335px;background:#fff;border-top:1px solid var(--mint);border-radius:8px;padding:40px 16px;display:flex;flex-direction:column;align-items:center;gap:24px}
.mypage-logout-msg{font-family:var(--ff-jp);font-size:16px;color:var(--ink);text-align:center}
.mypage-logout-actions{display:flex;align-items:center;justify-content:center;gap:8px;width:100%}
.mypage-logout-cancel,.mypage-logout-ok{flex:1 0 0;border:1px solid transparent;border-radius:40px;padding:12px 32px;font-family:var(--ff-jp);font-weight:500;font-size:16px;letter-spacing:.08em;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .2s ease,color .2s ease,border-color .2s ease}
.mypage-logout-cancel{background:#F0F0F0;border-color:#F0F0F0;color:var(--ink)}
.mypage-logout-cancel:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.mypage-logout-ok{background:var(--moss);border-color:var(--moss);color:#fff}
.mypage-logout-ok:hover{background:#fff;border-color:var(--moss);color:var(--moss)}
.mypage-card{background:#fff;border-radius:32px;box-shadow:8px 8px 32px rgba(var(--shadow-rgb),.08);padding:32px 40px 40px}
.mypage-card--reco{padding:32px}
.mypage-lead{margin-top:8px;font-size:16px;color:var(--ink);letter-spacing:.04em;line-height:1.6}
.mypage-stats{margin-top:24px;display:flex;gap:16px}
.mypage-stat{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:8px;background:#EFF3F6;border-radius:8px;padding:16px 0 16px clamp(16px,4vw,40px);overflow:hidden;transition:background .2s ease}
.mypage-stat:hover{background:var(--moss-tint)}
.mypage-stat-num{display:flex;align-items:flex-end;gap:4px;color:var(--live);white-space:nowrap}
.mypage-stat-num b{font-family:var(--ff-en);font-size:56px;line-height:1;letter-spacing:.02em;font-weight:600}
.mypage-stat-num span{font-size:24px;letter-spacing:.02em}
.mypage-stat-label{margin-top:0;display:flex;align-items:center;justify-content:center;gap:0;font-size:13px;color:var(--ink);letter-spacing:.04em;text-align:center;width:100%}
.mypage-stat-label img{width:16px;height:16px;flex-shrink:0}
.mypage-stat-img{width:clamp(80px,48%,160px);aspect-ratio:4/3;flex-shrink:0;border-radius:8px 0 0 8px;overflow:hidden}
.mypage-stat-img img{width:100%;height:100%;object-fit:cover}
.mypage-reco-head{display:flex;align-items:center;gap:8px;width:fit-content}
.mypage-reco-head img{width:24px;height:24px}
.mypage-reco-head .fav-heading{transition:color .2s ease}
.mypage-reco-head:hover .fav-heading{color:var(--moss)}
.mypage-reco-list{margin-top:32px;display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.mypage-reco-list::-webkit-scrollbar{display:none}
.mypage-reco-list .scard{flex:1 1 220px;min-width:220px;max-width:280px;scroll-snap-align:start}

@media(max-width:1280px){
  .mypage-shell{max-width:100%}
}
/* サイドバーが隠れる990px以下も含め、写真付き3カラムのままだと左paddingに押されて
   写真とテキストが詰まって見えるため、写真自体を早めに落として中央寄せにする */
@media(max-width:1120px){
  .mypage-stat-img{display:none}
  .mypage-stat{padding-left:24px;justify-content:center}
  .mypage-stat-num{justify-content:center;width:100%}
}
@media(max-width:990px){
  .mypage-side{display:none}
  .mypage-card{padding:24px}
}
@media(max-width:540px){
  .mypage-shell{padding:16px 16px 64px}
  .mypage-card{padding:16px;border-radius:16px}
  /* 見出しは他ページのh2.st（28→22px）と同じ縮小率に揃える。.fav-headingはお気に入り
     ページのh1とも共有しているため、影響がマイページ内に留まるようスコープを絞る */
  .mypage-card .fav-heading{font-size:22px}
  .mypage-stat-num b{font-size:44px}
  .mypage-stat-num span{font-size:20px}
  .mypage-stats{flex-wrap:wrap}
  .mypage-stat{flex:1 1 calc(50% - 8px);padding-left:16px}
  .mypage-stat:last-child{flex:1 1 100%}
}

/* =========================================================
   おせっかいメディア（読み物）の入口 — TOP
   別サイト（media.osekkai-rooms.jp）へ送る。物件カードと見分けがつくよう、
   写真を小さめ・横並びにして「読み物」の見た目にしている
   ========================================================= */
.media-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.media-card{display:flex;flex-direction:column;background:var(--paper)}
.media-card-fig{
  aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:var(--moss-tint);position:relative;
}
.media-card-fig img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.media-card:hover .media-card-fig img{transform:scale(1.04)}
/* 画像が無い記事でも枠が崩れないようにする */
.media-card-fig--empty::after{
  content:"OSEKKAI";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-en);font-size:13px;letter-spacing:.2em;color:var(--moss);opacity:.45;
}
.media-card-body{padding-top:14px}
.media-card-cat{
  display:inline-block;font-size:11px;letter-spacing:.08em;color:var(--moss);
  background:var(--moss-tint);border-radius:999px;padding:3px 10px;
}
.media-card-ttl{
  margin-top:10px;font-size:16px;font-weight:700;line-height:1.6;letter-spacing:.08em;
  /* 3行を超えたら省略する（カードの高さを揃えないと一覧が読みにくい） */
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.media-card:hover .media-card-ttl{color:var(--moss)}
.media-card-date{display:block;margin-top:10px;font-size:12px;color:var(--gray-light);letter-spacing:.02em}
@media(max-width:900px){.media-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.media-cards{grid-template-columns:1fr;gap:20px}}

/* ══ 管理者専用ビューの帯 ══
   `/admin/*` のページ（src/components/AdminBar.astro）だけで使う。
   配色はサイトの色から意図的に外してある。お客様向けの画面と一目で区別が付かないと、
   未公開物件が出たままの画面を共有してしまう事故が起きる。 */
/* ⚠ **1行に収める。** 帯が厚いとそのぶん物件が押し下げられ、一覧を見るたびに邪魔になる。
      文言を足したくなったら、まず何かを落とせないか考えること。 */
.admin-bar{
  display:flex;align-items:center;justify-content:space-between;gap:4px 16px;flex-wrap:wrap;
  padding:5px 16px;background:#3d3a34;color:#fff;font-size:12px;line-height:1.5;
}
/* 見出しと本文を横に並べる（縦に積むと帯が2行ぶんの高さになる） */
.admin-bar-main{flex:1 1 320px;margin:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.admin-bar-main strong{letter-spacing:.04em;white-space:nowrap}
.admin-bar-main b{font-weight:700}
.admin-bar-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.admin-bar-link,.admin-bar-leave{
  display:inline-flex;align-items:center;height:24px;padding:0 10px;
  border:1px solid rgba(255,255,255,.45);border-radius:4px;
  background:transparent;color:#fff;font-size:11px;letter-spacing:.04em;cursor:pointer;
}
.admin-bar-link:hover,.admin-bar-leave:hover{background:rgba(255,255,255,.12)}
@media(max-width:600px){
  .admin-bar{font-size:11px;padding:5px 12px}
  .admin-bar-actions{width:100%}
  .admin-bar-link,.admin-bar-leave{flex:1 1 0;justify-content:center}
}

/* ══ 管理者専用ビューの提案モード ══
   js/admin.js が帯の「提案モード」・顧客を選ぶ窓・左下の札・カードの「＋提案」を差し込む。
   お客様のブラウザには要素ごと出ないので、ここの指定は当たらない。
   色は帯（#3d3a34）と揃え、お客様にも見える部品と一目で区別できるようにする。 */
.admin-bar-proposal.is-on{background:#fff;border-color:#fff;color:#3d3a34;font-weight:700}
.admin-bar-proposal.is-on:hover{background:rgba(255,255,255,.88)}

/* 左下の札（提案モード中だけ）。物件詳細では「＋この物件を提案に追加」もここに入る */
.apd{
  position:fixed;left:16px;bottom:16px;z-index:60;width:320px;max-width:calc(100vw - 32px);
  padding:14px 16px;border-radius:12px;background:#3d3a34;color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.18);font-size:12px;line-height:1.6;letter-spacing:.04em;
}
.apd-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.apd-target{min-width:0;display:flex;flex-direction:column;gap:2px}
.apd-eyebrow{font-size:11px;color:rgba(255,255,255,.7)}
.apd-name,.apd-company{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.apd-name{font-size:14px;font-weight:700}
.apd-company{font-size:12px;color:rgba(255,255,255,.8)}
.apd-company:empty{display:none}
.apd-actions{display:flex;gap:6px;flex-shrink:0}
.apd-link{
  height:24px;padding:0 10px;border:1px solid rgba(255,255,255,.45);border-radius:4px;
  background:transparent;color:#fff;font-size:11px;letter-spacing:.04em;cursor:pointer;
}
.apd-link:hover{background:rgba(255,255,255,.12)}
.apd-add{
  display:block;width:100%;height:44px;margin-top:12px;border:none;border-radius:8px;
  background:#fff;color:#3d3a34;font-family:var(--ff-jp);font-size:14px;font-weight:700;letter-spacing:.06em;
  cursor:pointer;transition:background .2s ease;
}
.apd-add:hover{background:#F2F1EE}
.apd-add.is-added,.apd-add.is-busy{background:rgba(255,255,255,.14);color:#fff;cursor:default}
.apd-msg{margin-top:8px;font-size:12px;line-height:1.7;color:rgba(255,255,255,.9)}
.apd-msg:empty{display:none}
.apd-msg[data-tone="error"]{color:#F3B8CB}
/* スマホ・タブレットの物件詳細は画面下に追従バー（約104〜116px）があるので、その上に出す */
@media(max-width:990px){
  body.page-detail:not(.page-detail--nobar) .apd{bottom:128px}
}
@media(max-width:600px){
  .apd{left:12px;right:12px;width:auto;max-width:none}
}

/* 一覧カードの「＋提案」。写真の左下に置く（右上はお気に入り・左上は札） */
.scard-proposal{
  position:absolute;left:8px;bottom:8px;z-index:2;height:32px;padding:0 12px;
  border:none;border-radius:16px;background:#3d3a34;color:#fff;
  font-family:var(--ff-jp);font-size:12px;font-weight:700;letter-spacing:.06em;
  box-shadow:0 2px 8px rgba(0,0,0,.2);cursor:pointer;
}
.scard-proposal:hover{background:#57534b}
.scard-proposal.is-added{background:#fff;color:#3d3a34;cursor:default}
.scard-proposal.is-busy{opacity:.7;cursor:default}

/* 顧客を選ぶ窓 */
body.is-apm-open{overflow:hidden}
.apm-overlay{
  position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-start;justify-content:center;
  padding:10vh 16px 16px;background:rgba(30,28,25,.45);
}
.apm{
  width:560px;max-width:100%;max-height:80vh;display:flex;flex-direction:column;
  padding:20px 20px 12px;border-radius:12px;background:#fff;color:var(--ink);
  box-shadow:0 16px 48px rgba(0,0,0,.2);
}
.apm-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.apm-ttl{font-size:16px;font-weight:700;letter-spacing:.06em}
.apm-close{width:32px;height:32px;display:grid;place-items:center;border:none;border-radius:50%;background:none;color:var(--ink);cursor:pointer}
.apm-close:hover{background:var(--cream)}
.apm-input{
  width:100%;height:44px;margin-top:12px;padding:0 14px;border:1px solid var(--line);border-radius:8px;
  font-family:var(--ff-jp);font-size:16px;color:var(--ink);outline:none;
}
.apm-input:focus{border-color:#3d3a34}
.apm-note{margin-top:8px;font-size:12px;line-height:1.7;letter-spacing:.04em;color:var(--gray)}
.apm-list{min-height:0;margin-top:12px;overflow-y:auto;list-style:none}
.apm-item{
  width:100%;display:flex;align-items:center;gap:12px;padding:10px 12px;border:none;border-radius:8px;
  background:none;font-family:var(--ff-jp);color:var(--ink);text-align:left;cursor:pointer;
}
.apm-item:hover,.apm-item.is-active{background:var(--cream)}
.apm-item[aria-current="true"] .apm-main b::after{content:"選択中";margin-left:8px;font-size:11px;font-weight:500;color:var(--gray)}
/* ティアは一番左（顧客一覧と同じ並び）。S・Aだけ濃くして、今日動く人を目で拾えるようにする */
.apm-tier{
  flex-shrink:0;min-width:64px;padding:2px 6px;border-radius:4px;background:var(--cream);color:var(--gray);
  font-size:11px;font-weight:700;letter-spacing:.04em;text-align:center;
}
.apm-tier[data-tier="S"],.apm-tier[data-tier="A"]{background:var(--ink);color:#fff}
.apm-tier.is-none{background:none;color:var(--gray-light)}
.apm-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.apm-main b{font-size:14px;font-weight:700;letter-spacing:.04em}
.apm-main span{overflow:hidden;font-size:12px;color:var(--gray);text-overflow:ellipsis;white-space:nowrap}
.apm-meta{flex-shrink:0;font-size:12px;letter-spacing:.02em;color:var(--gray)}
.apm-msg{margin-top:8px;font-size:12px;color:var(--gray)}
.apm-msg:empty{display:none}
.apm-msg[data-tone="error"]{color:var(--warn2)}
@media(max-width:600px){
  .apm-overlay{padding:16px 12px}
  .apm{max-height:calc(100vh - 32px)}
  .apm-meta{display:none}
}

/* ══ 管理者専用ビューのカート（物件概要レポートをまとめて作る） ══
   js/admin.js が帯の「カート（N）」・カートの窓・カードの「＋カート」・右下の知らせを差し込む。
   お客様のブラウザには要素ごと出ないので、ここの指定は当たらない。色は提案モードと同じ帯の色（#3d3a34）。 */
.admin-bar-cart.is-on{background:#fff;border-color:#fff;color:#3d3a34;font-weight:700}
.admin-bar-cart.is-on:hover{background:rgba(255,255,255,.88)}

/* 一覧カードの「＋カート」。写真の右下に置く（左下は「＋提案」・右上はお気に入り・左上は札） */
.scard-cart{
  position:absolute;right:8px;bottom:8px;z-index:2;height:32px;padding:0 12px;
  border:none;border-radius:16px;background:#3d3a34;color:#fff;
  font-family:var(--ff-jp);font-size:12px;font-weight:700;letter-spacing:.06em;
  box-shadow:0 2px 8px rgba(0,0,0,.2);cursor:pointer;
}
.scard-cart:hover{background:#57534b}
.scard-cart.is-in{background:#fff;color:#3d3a34}

/* 入れた／外したの知らせ。右下に少し出して消す（失敗は長めに残す） */
.acart-toast{
  position:fixed;right:16px;bottom:16px;z-index:1001;max-width:min(360px,calc(100vw - 32px));
  padding:12px 16px;border-radius:10px;background:#3d3a34;color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.18);font-size:12px;line-height:1.7;letter-spacing:.04em;
}
.acart-toast[data-tone="error"]{color:#F3B8CB}
/* スマホ・タブレットの物件詳細は画面下に追従バーがあるので、その上に出す */
@media(max-width:990px){
  body.page-detail:not(.page-detail--nobar) .acart-toast{bottom:128px}
}

/* カートの窓（顧客を選ぶ窓と同じ作り） */
body.is-acart-open{overflow:hidden}
.acart-overlay{
  position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-start;justify-content:center;
  padding:10vh 16px 16px;background:rgba(30,28,25,.45);
}
.acart{
  width:560px;max-width:100%;max-height:80vh;display:flex;flex-direction:column;
  padding:20px 20px 16px;border-radius:12px;background:#fff;color:var(--ink);
  box-shadow:0 16px 48px rgba(0,0,0,.2);
}
.acart-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.acart-ttl{font-size:16px;font-weight:700;letter-spacing:.06em}
.acart-ttl span{margin-left:10px;font-size:12px;font-weight:500;color:var(--gray)}
.acart-close{width:32px;height:32px;display:grid;place-items:center;border:none;border-radius:50%;background:none;color:var(--ink);font-size:18px;cursor:pointer}
.acart-close:hover{background:var(--cream)}
.acart-note{margin-top:8px;font-size:12px;line-height:1.7;letter-spacing:.04em;color:var(--gray)}
.acart-list{min-height:0;margin-top:12px;overflow-y:auto;list-style:none}
.acart-item{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--line)}
/* 物件名と、その下の図面ページの一言（js/admin.js の drawingCell） */
.acart-body{flex:1;min-width:0}
.acart-body .acart-name{display:block}
.acart-drawing{margin-top:2px;font-size:11px;line-height:1.6;letter-spacing:.02em;color:var(--gray)}
/* マイソクの切り取りをこの場で開く（マイソクがある物件だけ） */
.acart-crop{flex-shrink:0;height:28px;padding:0 12px;border:1px solid var(--line);border-radius:14px;background:#fff;
  font-family:var(--ff-jp);font-size:12px;color:var(--ink);cursor:pointer}
.acart-crop:hover{background:var(--cream)}
.acart-crop:disabled{color:var(--gray-light);cursor:default}
.acart-no{flex-shrink:0;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--gray)}
.acart-name{flex:1;min-width:0;overflow:hidden;font-size:14px;font-weight:700;letter-spacing:.04em;color:var(--ink);
  text-overflow:ellipsis;white-space:nowrap;text-decoration:none}
.acart-name:hover{text-decoration:underline}
.acart-remove{flex-shrink:0;width:28px;height:28px;display:grid;place-items:center;border:none;border-radius:50%;
  background:none;color:var(--gray);font-size:16px;cursor:pointer}
.acart-remove:hover{background:var(--cream);color:var(--ink)}
.acart-empty{margin-top:16px;font-size:13px;line-height:1.8;color:var(--gray)}
.acart-msg{margin-top:12px;font-size:12px;line-height:1.7;color:var(--ink)}
.acart-msg:empty{display:none}
.acart-msg[data-tone="error"]{color:var(--warn2)}
.acart-actions{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.acart-download{
  flex:1 1 240px;height:44px;border:none;border-radius:8px;background:#3d3a34;color:#fff;
  font-family:var(--ff-jp);font-size:14px;font-weight:700;letter-spacing:.06em;cursor:pointer;
}
.acart-download:hover{background:#57534b}
.acart-clear{
  flex:0 0 auto;height:44px;padding:0 16px;border:1px solid var(--line);border-radius:8px;background:#fff;
  font-family:var(--ff-jp);font-size:13px;color:var(--ink);cursor:pointer;
}
.acart-clear:hover{background:var(--cream)}
.acart-download:disabled,.acart-clear:disabled{border-color:var(--line);background:var(--paper);color:var(--gray-light);cursor:default}
@media(max-width:600px){
  .acart-overlay{padding:16px 12px}
  .acart{max-height:calc(100vh - 32px)}
}

/* マイソクの切り取りを確認する窓（js/admin.js の「図面とマイソクの切り取り」。カートの窓と同じ作り）。
   画像の上に切り取り線を重ね、線より下（元付の帯）を暗くして「載りません」と見せる。
   カートの窓の上にも開くので、z-index はカート（1000）より1つ上にする。
   ⚠ 線と暗くする範囲は画像の枠（.mcrop-frame）に対する割合で置く。枠は画像の大きさぴったりにする
      （枠が画像より大きいと、線の位置と実際に切る位置がずれる） */
body.is-mcrop-open{overflow:hidden}
.mcrop-overlay{
  position:fixed;inset:0;z-index:1001;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(30,28,25,.45);
}
.mcrop-overlay[hidden]{display:none}
.mcrop{
  width:720px;max-width:100%;max-height:calc(100vh - 32px);display:flex;flex-direction:column;
  padding:20px 20px 16px;border-radius:12px;background:#fff;color:var(--ink);
  box-shadow:0 16px 48px rgba(0,0,0,.2);
}
.mcrop-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mcrop-ttl{min-width:0;font-size:16px;font-weight:700;letter-spacing:.06em}
.mcrop-ttl span{margin-left:10px;font-size:12px;font-weight:500;color:var(--gray)}
.mcrop-close{flex-shrink:0;width:32px;height:32px;display:grid;place-items:center;border:none;border-radius:50%;background:none;color:var(--ink);font-size:18px;cursor:pointer}
.mcrop-close:hover{background:var(--cream)}
.mcrop-note{margin-top:8px;font-size:12px;line-height:1.7;letter-spacing:.04em;color:var(--gray)}
.mcrop-stage{min-height:0;margin-top:12px;display:flex;justify-content:center;overflow:auto}
.mcrop-frame{position:relative;display:inline-block;max-width:100%;min-height:120px;min-width:120px;touch-action:none;user-select:none}
.mcrop-frame.is-ready{min-height:0;min-width:0;cursor:ns-resize}
/* 縁取りは outline で描く（border だと枠が画像より太り、線の位置と切る位置が数px ずれる） */
.mcrop-img{display:block;max-width:100%;max-height:calc(100vh - 280px);outline:1px solid var(--line);pointer-events:none}
.mcrop-img[hidden]{display:none}
.mcrop-shade{
  position:absolute;left:0;right:0;bottom:0;top:100%;display:flex;align-items:flex-start;justify-content:center;
  background:rgba(30,28,25,.55);pointer-events:none;overflow:hidden;
}
.mcrop-shade span{margin-top:8px;padding:2px 10px;border-radius:10px;background:var(--warn2);color:#fff;font-size:11px;font-weight:700;letter-spacing:.06em;white-space:nowrap}
.mcrop-line{position:absolute;left:-8px;right:-8px;top:100%;height:0;border-top:3px solid var(--warn2);outline:none}
/* 細い線でもつかみやすいよう、上下に見えない掴みしろを持たせる */
.mcrop-line::before{content:"";position:absolute;left:0;right:0;top:-12px;height:24px}
.mcrop-line:focus-visible{box-shadow:0 0 0 3px rgba(201,82,122,.35)}
.mcrop-frame:not(.is-ready) .mcrop-line,.mcrop-frame:not(.is-ready) .mcrop-shade{display:none}
.mcrop-msg{margin-top:12px;font-size:12px;line-height:1.7;color:var(--ink)}
.mcrop-msg:empty{display:none}
.mcrop-msg[data-tone="error"]{color:var(--warn2)}
.mcrop-actions{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.mcrop-nudge,.mcrop-exclude{
  flex:0 0 auto;height:44px;padding:0 16px;border:1px solid var(--line);border-radius:8px;background:#fff;
  font-family:var(--ff-jp);font-size:13px;color:var(--ink);cursor:pointer;
}
.mcrop-nudge:hover,.mcrop-exclude:hover{background:var(--cream)}
.mcrop-confirm{
  flex:1 1 200px;height:44px;border:none;border-radius:8px;background:#3d3a34;color:#fff;
  font-family:var(--ff-jp);font-size:14px;font-weight:700;letter-spacing:.06em;cursor:pointer;
}
.mcrop-confirm:hover{background:#57534b}
.mcrop-nudge:disabled,.mcrop-exclude:disabled,.mcrop-confirm:disabled{border-color:var(--line);background:var(--paper);color:var(--gray-light);cursor:default}

/* ══ 管理者専用ビューの写真並び替え ══
   `/admin/property` のギャラリーだけ（js/admin.js）。お客様向けのページには
   この印（data-admin-sortable）自体が出力されないので、ここの指定は当たらない。 */

/* ⚠ つまめる範囲でだけ指を止める。これが無いとタッチ操作では指の動きが
      ページのスクロールに取られ、pointermove が届かず並べ替えられない。
      サムネイル以外（ページのほとんど）は今までどおりスクロールできる。 */
#gallery-thumbs[data-admin-sortable] .gallery-thumb{touch-action:none;cursor:grab}
#gallery-thumbs[data-admin-sortable].is-sorting .gallery-thumb{cursor:grabbing}
/* 動かしている1枚。掴んでいることが分かればよいので、控えめに浮かせるだけにする。
   ⚠ **`pointer-events:none` が要る。** 指やカーソルの真下にあるのは掴んでいる写真自身なので、
      これが無いと「入れ替える相手」を探すたびに自分を拾ってしまい、並べ替えが鈍る
      （掴んでいる間のイベントは setPointerCapture で確保済みなので、これを消しても届く）。 */
#gallery-thumbs[data-admin-sortable] .gallery-thumb.is-dragging{
  opacity:.55;outline:2px solid #3d3a34;outline-offset:1px;pointer-events:none;
}
.gallery-sort{margin-top:10px;font-size:12px;line-height:1.7;color:var(--gray)}
.gallery-sort-hint{margin:0}
/* 借り物の写真である旨。並び替えると別の掲載ページにも影響するので、押す前に目に入れる */
.gallery-sort-hint b{display:block;margin-top:2px;color:#8a5a2b;font-weight:700}
.gallery-sort-bar{
  margin-top:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
/* 文言はボタンとは別枠。何も言うことが無いうちは行ごと消す */
.gallery-sort-status{margin:6px 0 0}
.gallery-sort-status:empty{display:none}
.gallery-sort-status.is-done{color:var(--moss);font-weight:700}
.gallery-sort-status.is-error{color:#b3261e;font-weight:700}
.gallery-sort-save,.gallery-sort-reset{
  display:inline-flex;align-items:center;height:30px;padding:0 14px;
  border-radius:4px;font-size:12px;letter-spacing:.04em;cursor:pointer;
}
/* 社内向けの確定操作なので、サイトの色ではなく管理者の帯と同じ色に寄せる */
.gallery-sort-save{border:1px solid #3d3a34;background:#3d3a34;color:#fff}
.gallery-sort-reset{border:1px solid var(--line);background:#fff;color:var(--gray)}
.gallery-sort-save:disabled,.gallery-sort-reset:disabled{opacity:.5;cursor:default}

/* ═══ 用途地域ガイド（/zoning 配下） ═══
   ⚠ 新しい見た目は作らない。見出しはお問い合わせ（.ctc-head）、業種は .uses/.chip、地域のカードは
   .ind-card、解説は .fx-why-item、FAQ は .ow-faq-*、検索窓は .se-kw を借りている。
   ここに足すのは並べ方と、借りられる部品が無かったもの（○△×の印・早見表・結論・候補）だけで、
   色・字間は :root のトークンと字間ルール（数字2%・補足4%・見出し8%）から動かさない。
   ○△× の色は「開ける＝緑／条件つき＝金茶／開けない＝灰」。赤は使わない（×は禁止ではなく「この地域では無い」だけ）。 */
/* 地域ページ・業種ページの見出し。淡い緑の面に、本題（h1）を主役にして置く。
   右の線画は TOP の業種カードの絵（.ind-card-illust）を大きくしたもの、数字はライブバー（.live-stat b）と同じ英字 */
/* ヒーロー（.hero-bg）と同じ、左右8pxの余白と角丸16pxで浮かせる */
.zg-head{background:var(--moss-tint);margin:8px 8px 0;border-radius:16px}
.zg-head-inner{display:flex;align-items:center;justify-content:space-between;gap:40px;padding-top:48px;padding-bottom:48px}
.zg-head-body{min-width:0}
.zg-head-label{color:var(--gray);font-weight:500}
.zg-head-title{font-size:32px;font-weight:700;letter-spacing:.08em;line-height:1.5;color:var(--moss-deep)}
.zg-head-lead{margin-top:12px;max-width:600px;font-size:14px;letter-spacing:.04em;line-height:1.9;color:var(--ink)}
.zg-head-illust{flex:none;width:168px;height:auto}
/* 数字のカードは面の下端からはみ出させる（owner の数字パネルがヒーローへ食い込むのと同じ奥行き） */
.zg-head-stats{flex:none;display:flex;gap:0;background:#fff;border-radius:16px;padding:20px 8px;box-shadow:8px 8px 16px rgba(var(--shadow-rgb),.16);align-self:flex-end;margin-bottom:-96px;position:relative;z-index:1}
/* 地域ページ：右に街並みの写真（ヒーローの写真カードと同じ角丸・影）、数字のカードを写真の左下へ重ねる */
.zg-head--photo .zg-head-inner{align-items:flex-start;padding-bottom:72px}
.zg-head-media{position:relative;flex:none;width:min(440px,40vw);margin-bottom:-40px}
.zg-head-photo{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:16px;box-shadow:12px 12px 24px rgba(var(--shadow-rgb),.18)}
.zg-head-media .zg-head-stats{position:absolute;left:-48px;bottom:-40px;margin:0;align-self:auto}
/* 業種ページ：直後の結論パネルを面へ食い込ませる */
.zg-head--overlap .zg-head-inner{padding-bottom:104px}
.zg-head--overlap + .zg-first{padding-top:0}
.zg-head--overlap + .zg-first .zg-conclusion{margin-top:-64px;position:relative;z-index:1;box-shadow:8px 8px 16px rgba(var(--shadow-rgb),.16)}
.zg-head-stat{display:flex;flex-direction:column;align-items:center;padding:0 24px;font-size:12px;letter-spacing:.04em;color:var(--gray)}
.zg-head-stat + .zg-head-stat{border-left:1px solid var(--line)}
.zg-head-stat b{font-size:36px;font-weight:800;letter-spacing:.02em;line-height:1.2;color:var(--moss)}
.zg-head-stat small{font-size:12px;color:var(--gray)}
.zg-head-stat-label{font-weight:600;letter-spacing:.08em;color:var(--ink)}

/* トップの検索カード。owner の数字パネル（.ow-stats）と同じ、ヒーローに食い込む白いカード */
.zg-search-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:32px;box-shadow:8px 8px 16px rgba(var(--shadow-rgb),.16)}
.zg-search-card .zg-search{max-width:none}
.zg-popular{margin-top:16px}

/* 検索カードのタブ（TOP の .sp-tabs を借りる）。カードの中なので下の余白だけ詰める */
.zg-tabs{margin-bottom:20px}

/* 住所で調べる：入力欄とボタンを1行に。ボタンは帯の「非公開物件マッチングへ」（.fc-btn）と同じ緑 */
.zg-addr-form{display:flex;gap:12px;align-items:stretch}
.zg-addr-form .se-kw{flex:1;margin-bottom:0}
.zg-addr-form .se-kw-input{height:48px;font-size:15px}
.zg-addr-btn{
  flex:none;display:flex;align-items:center;padding:0 24px;border:none;border-radius:4px;cursor:pointer;
  background:var(--moss-btn);color:#fff;font-family:var(--ff-jp);font-size:14px;font-weight:500;letter-spacing:.16em;
  transition:background .25s ease;
}
.zg-addr-btn:hover{background:var(--moss-hover)}
.zg-addr-btn:disabled{opacity:.5;cursor:default}
.zg-addr-hint{margin-top:10px;font-size:12px;letter-spacing:.04em;color:var(--gray)}

/* ローディング「いま調べています…てくてく」。ヘッダーのロゴと同じ緑の角丸に家の顔をのせ、
   左右に揺れながら弾むように歩かせる。後ろに足跡が順に浮かんで消える */
.zg-walk{margin-top:24px;display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 0 8px}
.zg-walk-stage{position:relative;display:flex;align-items:flex-end;gap:10px;height:64px}
.zg-walk-logo{
  display:grid;place-items:center;width:52px;height:52px;border-radius:12px;background:var(--moss);
  box-shadow:0 6px 12px rgba(var(--shadow-rgb),.2);animation:zg-walk-step .6s ease-in-out infinite alternate;transform-origin:50% 100%;
}
.zg-walk-logo img{width:36px;height:36px}
.zg-walk-steps{display:flex;gap:10px;align-items:flex-end;padding-bottom:4px}
.zg-walk-steps i{
  display:block;width:8px;height:12px;border-radius:50%;background:var(--moss);opacity:0;
  animation:zg-walk-print 2.4s linear infinite;
}
.zg-walk-steps i:nth-child(odd){transform:translateY(-6px)}
.zg-walk-steps i:nth-child(1){animation-delay:0s}
.zg-walk-steps i:nth-child(2){animation-delay:.6s}
.zg-walk-steps i:nth-child(3){animation-delay:1.2s}
.zg-walk-steps i:nth-child(4){animation-delay:1.8s}
.zg-walk-text{font-size:14px;font-weight:600;letter-spacing:.08em;color:var(--moss)}
.zg-walk-dots i{font-style:normal;animation:zg-walk-dot 1.2s ease-in-out infinite}
.zg-walk-dots i:nth-child(2){animation-delay:.2s}
.zg-walk-dots i:nth-child(3){animation-delay:.4s}
.zg-walk-sub{margin-left:8px;font-size:12px;font-weight:500;color:var(--gray)}
@keyframes zg-walk-step{
  from{transform:translateY(0) rotate(-8deg)}
  to{transform:translateY(-8px) rotate(8deg)}
}
@keyframes zg-walk-print{0%{opacity:0}10%{opacity:.5}60%{opacity:.5}80%,100%{opacity:0}}
@keyframes zg-walk-dot{0%,100%{opacity:.2}50%{opacity:1}}
/* 動きを抑える設定の端末では歩かせない（文字だけで調べていることを伝える） */
@media(prefers-reduced-motion:reduce){
  .zg-walk-logo,.zg-walk-steps i,.zg-walk-dots i{animation:none}
  .zg-walk-steps{display:none}
}

/* 住所の判定結果 */
.zg-addr-result{margin-top:24px;padding:24px;border-radius:16px;background:var(--moss-tint)}
.zg-addr-matched{font-size:12px;letter-spacing:.04em;color:var(--gray)}
.zg-addr-area{margin-top:8px;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;font-size:14px;letter-spacing:.08em}
.zg-addr-area b{font-size:28px;font-weight:700;letter-spacing:.08em;color:var(--moss-deep)}
.zg-addr-ratio{margin-top:4px;font-size:13px;letter-spacing:.04em;color:var(--ink)}
.zg-addr-note{margin-top:12px;font-size:13px;letter-spacing:.04em;line-height:1.8;color:var(--warn-deep)}
.zg-addr-nums{margin-top:16px;display:flex;align-items:baseline;gap:6px;font-size:13px;letter-spacing:.04em;color:var(--gray)}
.zg-addr-nums b{font-size:32px;font-weight:800;letter-spacing:.02em;color:var(--moss)}
.zg-addr-result .more{margin-top:16px}
.zg-addr-credit{margin-top:16px;font-size:11px;letter-spacing:.04em;line-height:1.7;color:var(--gray)}
.zg-addr-msg{font-size:14px;letter-spacing:.04em;line-height:1.8;color:var(--ink)}

/* 業種カード。TOP の .ind-card と同じ枠で、中の業種名がそれぞれリンクになる */
.zg-ind-card:hover{background:#fff;border-color:var(--line)}
.zg-ind-links{display:flex;flex-wrap:wrap;gap:4px 12px}
.zg-ind-links a{font-size:13px;letter-spacing:.04em;line-height:1.8;color:var(--ink);border-bottom:1px solid var(--line);transition:color .22s ease,border-color .22s ease}
.zg-ind-links a:hover{color:var(--moss);border-color:var(--moss)}

.zg-first{padding-top:40px}
.zg-cta{margin-top:24px}
.zg-search{position:relative;max-width:640px}
.zg-search .se-kw{margin-bottom:0}
.zg-search .se-kw-input{height:48px;font-size:15px}
.zg-suggest{
  list-style:none;margin-top:4px;border:1px solid var(--line);border-radius:4px;background:#fff;overflow:hidden;
}
.zg-suggest li + li{border-top:1px solid var(--line)}
.zg-suggest a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;transition:background .22s ease}
.zg-suggest a:hover,.zg-suggest li.is-active a{background:var(--moss-tint)}
.zg-suggest-label{font-size:14px;letter-spacing:.08em;color:var(--ink)}
.zg-suggest-kind{flex-shrink:0;font-size:12px;letter-spacing:.04em;color:var(--gray)}
.zg-search-empty{margin-top:8px;font-size:12px;letter-spacing:.04em;color:var(--gray)}

/* ⚠ 用途地域ガイドでは、まとまりの上に区切り線を引かない（AIっぽく見える・2026-09-25 の指摘）。余白で分ける */
.zg-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.zg-group .uses{margin-top:12px}
.zg-group-name,.zg-table-cat{font-size:14px;font-weight:700;letter-spacing:.08em;color:var(--moss)}


/* ── トップのずらし・奥行き（2026-09-25「中央にぎゅっとなっていてAIっぽい」への対応） ──
   全セクションが同じ幅で左揃えに積まれていると、画面の中央に詰まった一覧に見える。
   TOP の「お客様の声」（左右非対称・画面端までの写真）と「表に出ない物件から、出店する」（帯からはみ出すカード）と
   同じ考え方で、左右を割る・段をずらす・重ねる。 */

/* 業種：左に見出しの列（スクロールしても残る）、右に2列のカード */
.zg-split{display:grid;grid-template-columns:280px minmax(0,1fr);gap:56px;align-items:start}
.zg-split-head{position:sticky;top:112px}
.zg-split-head .st-sub{margin-top:16px;line-height:1.9}
.zg-split-num{margin-top:32px;font-size:14px;letter-spacing:.08em;color:var(--gray)}
.zg-split-num b{display:block;font-size:80px;font-weight:800;letter-spacing:.02em;line-height:1;color:var(--moss-tint);-webkit-text-stroke:1px var(--moss)}
.zg-split-body.ind-cards{grid-template-columns:repeat(2,minmax(0,1fr))}

/* 帯の見出しは2行。TOP の帯（40px）のままだと1行目が長く、2段目の頭が揃わないので少しだけ詰める */
.zg-band .fcband-in h2{font-size:36px}
/* TOP の帯の文章は keep-all（語の途中で折り返さない）。ガイドの文は句読点なしで長く続くので、
   そのままだと左の列が縮まず、右の見本カードがパネルの外へ53px押し出された。ここだけ普通に折り返す */
.zg-band .fc-text p{word-break:normal}

/* 業種の分割と左右を入れ替え、見出しを右に置く（同じ分割が2回続くので、段をずらして単調にしない） */
.zg-split--reverse{grid-template-columns:minmax(0,1fr) 280px}
.zg-split--reverse .zg-split-head{order:2}

/* 用途地域の一覧：1行1地域。開ける業種の数を横棒で見せる（住居系は短く、商業系は長い） */
.zg-zlist-legend{display:grid;grid-template-columns:260px minmax(0,1fr) 88px 14px;gap:16px;padding:0 0 8px;font-size:12px;letter-spacing:.04em;color:var(--gray)}
.zg-zlist-legend span:last-child{grid-column:3}
.zg-zlist-group + .zg-zlist-group{margin-top:16px}
.zg-zlist-cat{display:inline-block;margin:12px 0 4px;padding:2px 10px;border-radius:99px;font-size:12px;font-weight:600;letter-spacing:.08em}
.zg-zlist-group--residential .zg-zlist-cat{background:var(--moss-tint);color:var(--moss)}
.zg-zlist-group--commercial .zg-zlist-cat{background:var(--warn-tint);color:var(--warn-deep)}
.zg-zlist-group--industrial .zg-zlist-cat{background:var(--cream);color:var(--gray)}
.zg-zlist-row{display:grid;grid-template-columns:260px minmax(0,1fr) 88px 14px;gap:16px;align-items:center;padding:10px 8px;margin:0 -8px;border-radius:8px;transition:background .22s ease}
.zg-zlist-row:hover{background:var(--cream-2)}
.zg-zlist-name{font-size:14px;font-weight:600;letter-spacing:.08em;color:var(--moss)}
/* 地域名の下の口語のひとこと。地域名より一段小さく、灰色で */
.zg-zlist-sub{display:block;margin-top:2px;font-size:12px;font-weight:400;letter-spacing:.04em;line-height:1.6;color:var(--gray)}
/* 積み上げ棒。全長＝全業種。濃い色＝制限なく開ける、斜線＝条件つき、地＝開けない。
   住居系は斜線が長く、商業系は濃い部分が長い——性格の違いが棒の見た目だけで分かる */
.zg-zlist-bar{display:flex;align-items:center;gap:12px;min-width:0;--c:var(--moss)}
.zg-zlist-group--commercial .zg-zlist-bar{--c:var(--gold)}
.zg-zlist-group--industrial .zg-zlist-bar{--c:var(--gray-light)}
.zg-zlist-track{flex:1;min-width:0;display:flex;height:14px;border-radius:99px;background:var(--cream);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.zg-zlist-seg{display:block;height:100%;width:calc(100% * var(--w, 0));flex-shrink:0}
.zg-zlist-seg--open{background:var(--c)}
.zg-zlist-seg--cond{background:repeating-linear-gradient(135deg,var(--c) 0 3px,transparent 3px 7px);opacity:.75}
.zg-zlist-num{flex:none;width:64px;display:flex;flex-direction:column;align-items:flex-start;line-height:1.2}
.zg-zlist-num b{font-size:18px;font-weight:800;letter-spacing:.02em;color:var(--ink)}
.zg-zlist-num small{margin-top:2px;font-family:var(--ff-en);font-size:11px;letter-spacing:.02em;color:var(--gray);white-space:nowrap}
.zg-zlist-k{color:var(--gray-light);margin-right:1px}
/* 見出しの凡例（小さな見本） */
.zg-zlist-legend-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.zg-zlist-key{display:inline-block;width:14px;height:8px;border-radius:99px;margin-left:8px}
.zg-zlist-key--open{background:var(--moss)}
.zg-zlist-key--cond{background:repeating-linear-gradient(135deg,var(--moss) 0 2px,transparent 2px 5px);opacity:.75;box-shadow:inset 0 0 0 1px var(--line)}
.zg-zlist-key--closed{background:var(--cream);box-shadow:inset 0 0 0 1px var(--line)}
.zg-zlist-count{text-align:right;font-size:12px;letter-spacing:.04em;color:var(--gray)}
.zg-zlist-count b{font-size:16px;font-weight:800;letter-spacing:.02em;color:var(--ink);margin-right:2px}

/* 用途地域とは：お客様の声（.voice-sec）の左側に、3つの要点を縦に並べる */
/* お客様の声（.voice-sec）は中身がカード1枚の前提で、線画（top:412px〜）と流れる英字（top:613px〜）の位置が
   固定されている。ここは要点が3つあって背が高いので、面を140px伸ばし、線画と英字を同じだけ下げて文字と重ねない */
.zg-about{margin-top:80px}
@media(min-width:991px){
  .zg-about{height:857px}
  .zg-about .voice-illust{top:140px}
  .zg-about .voice-bgtext-wrap{top:753px}
}
.zg-about-list{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:32px}
.zg-about-list li{display:flex;gap:16px}
.zg-about-list li .fx-why-n{flex-shrink:0;padding-top:4px}
.zg-about-list h3{font-size:16px;font-weight:700;letter-spacing:.08em;line-height:1.7}
.zg-about-list p{margin-top:4px;font-size:13px;color:var(--gray);line-height:1.9;letter-spacing:.04em}
/* 右の写真（幅40%）に文字がかからないよう、左の列を写真の手前までに収める */
.zg-about-content{max-width:min(550px,52vw)}

/* ○△× の印。文字の横に置く小さな丸い札 */
.zg-mark{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:22px;height:22px;border-radius:50%;font-size:12px;font-weight:700;line-height:1;
}
.zg-mark--open{background:var(--moss);color:#fff}
.zg-mark--conditional{background:var(--warn-tint);color:var(--warn-deep);border:1px solid var(--warn)}
.zg-mark--closed{background:var(--cream);color:var(--gray-light);border:1px solid var(--line)}

/* 地域ページの「開ける／条件つき／開けない」 */
.zg-avail{display:flex;flex-direction:column;gap:48px}
.zg-avail-title{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;letter-spacing:.08em}
.zg-avail-block .uses{margin-top:12px}
.zg-avail-none{margin-top:12px;font-size:13px;letter-spacing:.04em;color:var(--gray)}
/* 「ほぼ制限なく開ける」の但し書き。大型店の面積の上限がある業種に ※ を付け、下に上限を添える */
.zg-note-mark{margin-left:2px;font-size:12px;color:var(--gray)}
.zg-avail-notes{margin-top:12px;display:flex;flex-direction:column;gap:4px;font-size:12px;line-height:1.8;letter-spacing:.04em;color:var(--gray)}
/* 見出しの横の件数（開ける 4／条件つき 27 など） */
.zg-avail-n{margin-left:4px;font-size:20px;font-weight:800;letter-spacing:.02em;color:var(--moss)}

/* 条件つき：条件ごとのカード。左にビルの図（何階まで入れるか）、右に条件の言い換えと、その条件で開ける業種 */
.zg-conds{margin-top:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.zg-cond-card{display:flex;gap:16px;padding:20px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:6px 6px 14px rgba(var(--shadow-rgb),.06)}
/* 業種の多いカード（先頭）は横いっぱいに。同じ幅のカードが並ぶだけにしない */
.zg-conds .zg-cond-card:first-child{grid-column:1 / -1;background:var(--warn-tint);border-color:transparent}
.zg-cond-visual{flex:none;color:var(--moss)}
.zg-floors{display:block}
.zg-floors-open{fill:var(--moss)}
.zg-floors-closed{fill:#fff;stroke:var(--line);stroke-width:1.5}
.zg-floors-n{font-family:var(--ff-en);font-size:9px;font-weight:700;fill:#fff}
.zg-floors-closed + .zg-floors-n{fill:var(--gray-light)}
.zg-cond-body{min-width:0}
.zg-cond-head{font-size:18px;font-weight:700;letter-spacing:.08em;color:var(--warn-deep)}
.zg-cond-tag{display:inline-block;margin-left:8px;padding:2px 10px;border-radius:99px;background:var(--warn-deep);color:#fff;font-size:11px;font-weight:600;letter-spacing:.08em;vertical-align:3px}
.zg-cond-lines{list-style:none;margin-top:6px}
.zg-cond-lines li{position:relative;padding-left:14px;font-size:13px;letter-spacing:.04em;line-height:1.8;color:var(--ink)}
.zg-cond-lines li::before{content:"";position:absolute;left:2px;top:.75em;width:5px;height:5px;border-radius:50%;background:var(--warn)}
.zg-cond-fuei{margin-top:6px;font-size:12px;letter-spacing:.04em;color:var(--warn-deep)}
.zg-cond-industries{margin-top:12px;display:flex;flex-wrap:wrap;gap:4px 12px}
.zg-cond-industries a{font-size:13px;font-weight:500;letter-spacing:.04em;line-height:1.8;color:var(--moss);border-bottom:1px solid var(--line);transition:border-color .22s ease}
.zg-cond-industries a:hover{border-color:var(--moss)}

/* 横棒一覧の「今いる地域」 */
.zg-zlist-row.is-current{background:var(--moss-tint)}
.zg-zlist-row.is-current .zg-zlist-arrow{visibility:hidden}
.zg-zlist-here{display:inline-block;white-space:nowrap;margin-left:8px;padding:1px 8px;border-radius:99px;background:var(--moss);color:#fff;font-size:11px;font-weight:600;letter-spacing:.08em;vertical-align:2px}
.zg-cond-text{font-size:12px;letter-spacing:.04em;color:var(--warn-deep)}

/* 業種ページの結論。owner の「費用について」（.ow-fee）と同じ濃い緑のパネルで、いちばん伝えたい答えを立たせる。
   見出しの面（淡い緑）と同じ色にすると、上下に同じ面が2枚並んで単調になる */
.zg-conclusion{background:var(--moss-deep);color:#fff;border-radius:16px;padding:32px}
.zg-conclusion-label{font-size:12px;font-weight:600;letter-spacing:.16em;color:rgba(255,255,255,.72)}
.zg-conclusion-line{margin-top:8px;font-size:20px;font-weight:700;letter-spacing:.08em;line-height:1.7}
.zg-conclusion-line + .zg-conclusion-line{font-size:15px;font-weight:500;color:rgba(255,255,255,.86)}
.zg-conclusion-check{margin-top:20px;font-size:13px;letter-spacing:.04em;line-height:1.8;color:var(--gold-hi)}

/* 早見表。物件概要（.dtl-defrow）の行の組み方に合わせ、地域名の列だけ広げる */
.zg-legend{list-style:none;display:flex;flex-wrap:wrap;gap:8px 24px;margin-bottom:24px}
.zg-legend li{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.04em;color:var(--gray)}
.zg-table + .zg-table{margin-top:24px}
.zg-table-cat{margin-bottom:8px}
.zg-table-row{display:flex;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;letter-spacing:.04em;line-height:1.8}
.zg-table-row:first-of-type{border-top:1px solid var(--line)}
.zg-table-key{flex:0 0 240px;font-weight:600;color:var(--moss);letter-spacing:.08em;transition:opacity .25s ease}
.zg-table-key:hover{opacity:.55}
.zg-table-val{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.zg-table-verdict{font-weight:600;color:var(--ink)}

/* 業種ページの「ほかの業種と比べる表」（components/ZoningCompareTable.astro）。
   1行目＝今の業種を淡い緑で立たせ、ほかの行は今の業種と違うマスだけ濃く、同じマスは薄くする。
   13列あるので狭い画面では横スクロール。業種名の列は左に固定する */
.zg-cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:12px;background:#fff}
.zg-cmp-table{width:100%;min-width:760px;border-collapse:separate;border-spacing:0;font-size:13px;letter-spacing:.04em}
.zg-cmp-table th,.zg-cmp-table td{border-bottom:1px solid var(--line)}
.zg-cmp-table tbody tr:last-child th,.zg-cmp-table tbody tr:last-child td{border-bottom:none}
.zg-cmp-name{position:sticky;left:0;z-index:1;width:220px;min-width:180px;padding:12px 16px;text-align:left;vertical-align:middle;background:#fff;border-right:1px solid var(--line);font-weight:500;line-height:1.6}
.zg-cmp-name a{font-weight:600;color:var(--moss);transition:opacity .25s ease}
.zg-cmp-name a:hover{opacity:.55}
.zg-cmp-name small{display:block;font-size:12px;font-weight:400;line-height:1.6;color:var(--gray)}
.zg-cmp-remark{color:var(--ink) !important}
.zg-cmp-band{padding:8px 4px 0;font-size:12px;font-weight:700;letter-spacing:.08em;text-align:center;border-bottom:none !important}
.zg-cmp-band--residential{color:var(--moss)}
.zg-cmp-band--commercial{color:var(--warn-deep)}
.zg-cmp-band--industrial{color:var(--gray)}
.zg-cmp-district{padding:4px 2px 8px;font-size:12px;font-weight:600;text-align:center;white-space:nowrap}
.zg-cmp-district a{color:var(--ink);transition:color .25s ease}
.zg-cmp-district a:hover{color:var(--moss)}
.zg-cmp-cell{padding:10px 2px;text-align:center;vertical-align:middle}
/* 条件つきは ○ の下に小さく「条件」。結論（開ける）が主役で、条件はサブ */
.zg-cmp-cond{display:block;margin-top:2px;font-size:11px;font-weight:600;line-height:1.3;letter-spacing:.04em;color:var(--warn-deep);white-space:nowrap}
.zg-legend-mark{display:inline-flex;flex-direction:column;align-items:center}
/* 今の業種の行 */
.zg-cmp-current th,.zg-cmp-current td{background:var(--moss-tint);border-bottom:2px solid var(--moss)}
.zg-cmp-current .zg-cmp-name b{display:block;font-size:14px;font-weight:700;color:var(--moss-deep)}
.zg-cmp-here{display:inline-block;margin-bottom:2px;padding:1px 8px;border-radius:99px;background:var(--moss);color:#fff;font-size:11px;font-weight:600;letter-spacing:.08em}
/* 条件の内訳 */
.zg-cmp-notes{margin-top:12px;display:flex;flex-direction:column;gap:4px;font-size:12px;line-height:1.8;letter-spacing:.04em;color:var(--gray)}
.zg-cmp-notes div{display:flex;gap:8px}
.zg-cmp-notes dt{flex:none;font-weight:700;color:var(--warn-deep)}
.zg-cmp-notes dd{color:var(--ink)}
.zg-cmp-notes-where{color:var(--gray)}
/* 残りの行（開閉） */
.zg-cmp-more{margin-top:16px}
.zg-cmp-more summary{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border:1px solid var(--moss);border-radius:99px;font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--moss);cursor:pointer;list-style:none;transition:background .22s ease,color .22s ease}
.zg-cmp-more summary::-webkit-details-marker{display:none}
.zg-cmp-more summary::after{content:"＋";font-weight:700}
.zg-cmp-more[open] summary::after{content:"－"}
.zg-cmp-more summary:hover{background:var(--moss);color:#fff}
.zg-cmp-more .zg-cmp-scroll{margin-top:12px}

.zg-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}

.zg-disclaimer{background:var(--cream);border-radius:8px;padding:20px 24px;font-size:12px;letter-spacing:.04em;line-height:1.9;color:var(--gray)}
.zg-disclaimer-title{font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--ink);margin-bottom:4px}
.zg-disclaimer-basis{margin-top:4px}

@media(max-width:990px){
  .zg-head-inner{flex-direction:column;align-items:flex-start;gap:24px}
  .zg-head-stats{align-self:flex-start;margin-bottom:0}
  .zg-head--photo .zg-head-inner{padding-bottom:48px}
  .zg-head-media{width:100%;margin-bottom:24px}
  .zg-head-media .zg-head-stats{left:12px;bottom:-24px}
  .zg-groups,.zg-points,.zg-conds{grid-template-columns:1fr}
  .zg-split{grid-template-columns:1fr;gap:24px}
  .zg-split-head{position:static}
  .zg-split-num{display:none}
  .zg-split--reverse{grid-template-columns:1fr}
  .zg-split--reverse .zg-split-head{order:0}
  .zg-about-content{max-width:100%}
}
@media(max-width:540px){
  .zg-conclusion{padding:20px}
  .zg-head-inner{padding-top:32px;padding-bottom:32px}
  .zg-head-title{font-size:24px}
  .zg-head-illust{width:120px}
  .zg-head-stat{padding:0 14px}
  .zg-head-stat b{font-size:28px}
  .zg-search-card{padding:24px 16px}
  .zg-addr-form{flex-direction:column}
  .zg-addr-btn{justify-content:center;height:48px}
  .zg-addr-result{padding:20px 16px}
  .zg-split-body.ind-cards{grid-template-columns:1fr}
  .zg-zlist-legend{display:none}
  .zg-zlist-row{grid-template-columns:minmax(0,1fr) 64px 14px;row-gap:4px}
  .zg-zlist-name{grid-column:1 / 2}
  .zg-zlist-bar{grid-column:1 / 2;grid-row:2}
  .zg-zlist-count{grid-column:2;grid-row:1 / 3}
  .zg-zlist-arrow{grid-column:3;grid-row:1 / 3}
  .zg-band .fcband-in h2{font-size:24px}
  .zg-conclusion-line{font-size:16px}
  .zg-table-row{flex-direction:column;align-items:flex-start;gap:4px}
  .zg-table-key{flex:none}
}

/* ============================================================
   エリア選択（/・src/pages/index.astro）
   TOKYO / OSAKA の2面。スマホは上下、768px以上は左右。
   玄関（apps/gate）と同じ型だが、色はこのサイトの白・墨・緑に揃える。
   面の区切りは線ではなく余白で取る（面どうしの間を空けるだけ）。
   ============================================================ */
.ag{
  min-height:100vh;min-height:100dvh; /* ⚠ 100vh を先に書く。dvh 非対応の古い iOS で高さ0にならないように */
  display:flex;flex-direction:column;background:var(--paper);
}
.ag-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px}
.ag-ask{font-family:var(--ff-jp);font-weight:500;font-size:14px;letter-spacing:.08em;color:var(--gray)}
.ag-split{
  flex:1;display:grid;grid-template-columns:1fr;grid-auto-rows:minmax(300px,1fr);gap:12px;
  padding:0 24px;
}
.ag-panel{
  position:relative;overflow:hidden;border-radius:4px;display:flex;align-items:flex-end;
  color:#fff;background:var(--moss-deep);
}
.ag-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
/* 写真の上で白文字が読めるよう、下から暗くする（文字は下寄せ）。写真の面を足したらここにも足す */
.ag-panel--tokyo::after,
.ag-panel--osaka::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.62) 0%,rgba(0,0,0,.28) 45%,rgba(0,0,0,.08) 100%);
}
@media(hover:hover){.ag-panel:not(.is-soon):hover .ag-bg{transform:scale(1.03)}}
.ag-body{position:relative;z-index:1;padding:32px 28px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.ag-en{font-family:"Outfit",var(--ff-jp);font-weight:500;font-size:44px;letter-spacing:.16em;line-height:1}
.ag-title{font-family:var(--ff-jp);font-weight:600;font-size:16px;letter-spacing:.08em}
.ag-lead{font-family:var(--ff-jp);font-weight:500;font-size:13px;line-height:1.8;letter-spacing:.04em;opacity:.9}
.ag-count{font-family:var(--ff-jp);font-weight:500;font-size:13px;letter-spacing:.04em}
.ag-count b{font-family:"Outfit",var(--ff-jp);font-weight:500;font-size:22px;letter-spacing:.02em;margin:0 2px}
.ag-cta{
  display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:12px 20px;border-radius:999px;
  background:#fff;color:var(--moss);font-family:var(--ff-jp);font-weight:600;font-size:14px;letter-spacing:.06em;
}
.ag-cta-arrow{transition:transform .22s ease}
@media(hover:hover){.ag-panel:not(.is-soon):hover .ag-cta-arrow{transform:translateX(3px)}}
/* 準備中の面。押せないことが一目で分かるよう、写真を敷かず薄いグレーの地に墨の文字 */
.ag-panel.is-soon{background:#F4F4F5;color:var(--ink-2);cursor:default}
.ag-panel.is-soon .ag-lead{color:var(--gray);opacity:1}
.ag-soon{
  margin-top:12px;padding:8px 16px;border-radius:999px;border:1px solid var(--gray-light);
  font-family:"Outfit",var(--ff-jp);font-weight:500;font-size:12px;letter-spacing:.2em;color:var(--gray);
}
.ag-foot{
  display:flex;flex-wrap:wrap;gap:4px 16px;padding:20px 24px 24px;
  font-family:var(--ff-jp);font-weight:500;font-size:11px;letter-spacing:.04em;color:var(--gray);
}
@media(min-width:768px){
  .ag-split{grid-template-columns:1fr 1fr;grid-auto-rows:1fr}
  .ag-body{padding:48px 40px}
  .ag-en{font-size:64px}
}
@media(max-width:540px){
  .ag-head{padding:16px}
  .ag-ask{font-size:12px}
  .ag-split{padding:0 16px}
  .ag-body{padding:24px 20px}
  .ag-en{font-size:36px}
  .ag-foot{padding:16px}
}

/* ============================================================
   大阪の準備中（/osaka・src/pages/osaka.astro）
   ============================================================ */
.soon-wrap{max-width:640px;margin:0 auto;padding:96px 24px 120px;text-align:center}
.soon-en{display:block;font-family:"Outfit",var(--ff-jp);font-weight:500;font-size:48px;letter-spacing:.16em;color:var(--ink-2);line-height:1}
.soon-title{margin-top:20px;font-family:var(--ff-jp);font-weight:600;font-size:22px;letter-spacing:.06em;color:var(--ink)}
.soon-body{margin-top:20px;font-family:var(--ff-jp);font-weight:500;font-size:14px;line-height:2;letter-spacing:.04em;color:var(--gray)}
.soon-actions{margin-top:40px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.soon-btn{
  display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:999px;
  font-family:var(--ff-jp);font-weight:600;font-size:14px;letter-spacing:.06em;
  background:var(--moss);color:#fff;transition:background .22s ease;
}
.soon-btn:hover{background:var(--moss-deep)}
.soon-btn--ghost{background:#fff;color:var(--moss);border:1px solid var(--moss)}
.soon-btn--ghost:hover{background:var(--moss-tint)}
@media(max-width:540px){
  .soon-wrap{padding:64px 16px 88px}
  .soon-en{font-size:36px}
  .soon-title{font-size:18px}
}

/* =========================================================
   エリアの出し分け（2026-09-29 大阪エリアを開設）
   ========================================================= */
/* エリアの外の共通ページは、開いている全エリアの分をHTMLに出し（SEO用）、見せるのは <html data-area> のエリアの分だけ
   （src/components/SiteTagdir.astro の data-area-only。data-area は BaseLayout が最後に見ていたエリアで決める） */
html[data-area="tokyo"] [data-area-only]:not([data-area-only="tokyo"]),
html[data-area="osaka"] [data-area-only]:not([data-area-only="osaka"]){display:none!important}

/* 写真の無い「大きく出す区」の札（大阪。写真が用意できたら AreaGrid の image を足すだけで写真の札に戻る）。
   参考サイト（interoffice.co.jp）の地の色 #F1F1EC に墨の文字、左上に黄色の小さな印 */
.ward-big--text{display:block;background:var(--moss-tint)}
.ward-big--text::after{display:none}
.ward-big--text::before{content:"";position:absolute;left:16px;top:16px;width:32px;height:6px;background:#FFDB00;z-index:2}
.ward-big--text .wb-cap{color:var(--ink)}
.ward-big--text .we{font-size:28px;letter-spacing:.14em;opacity:1;line-height:1.2}
.ward-big--text .wn{margin-top:4px}
.ward-big--text .wp{font-size:13px;letter-spacing:.04em;color:var(--gray);margin-top:2px}
.ward-big--text .wc{opacity:1}
@media(hover:hover){.ward-big--text:hover{background:#E9E9E2}}

/* エリア選択（/）の大阪の面。作りは東京と同じ（写真＋下から暗くするグラデ＋白文字）。
   ボタンだけ大阪の色：東京の「白地に緑の文字」の置き換えで、黄色の地に墨の文字（白地の黄色文字は読めない） */
.ag-panel--osaka .ag-cta{background:#FFDB00;color:#303232}
.ag-panel--osaka .ag-cta-arrow{filter:brightness(0) invert(18%)}

/* ---------------------------------------------------------
   大阪のテーマ（html[data-area="osaka"]）
   色の使い方は参考サイト interoffice.co.jp に合わせる（2026-09-29 ユーザー指示）：
     黄色 #FFDB00 … 面（主なボタン・選択中の印・ロゴの地・TOPの最初の画面の見出しの帯）と小さな印にだけ使う
     墨 #303232  … 文字・線・濃い帯。緑の役目はすべて墨が引き継ぐ（--moss を墨へ差し替える）
     地 #F1F1EC  … 薄い色の地（--moss-tint）
   ⚠ **黄色を文字色・細い線に使わないこと。** 白地の黄色文字も、黄色の上の白文字も読めない（1.3:1）。
      黄色の上の文字・アイコンは必ず墨。
   ⚠ 意味を持たせた色（LINEの緑・未公開の紺と金・お気に入りの赤）はそのまま。
   --------------------------------------------------------- */
html[data-area="osaka"]{
  --moss:#303232;
  --moss-deep:#1E2020;
  --moss-tint:#F1F1EC;
  --moss-rgb:48,50,50;
  --moss-deep-rgb:30,32,32;
  --shadow-rgb:48,50,50;
  --hero-tint-rgb:48,50,50;
  --hero-band:#FFDB00;
  --moss-hover:#1E2020;
  --moss-btn:#303232;
  --mint:#F1F1EC;
  --cta-green:#303232;
  --cta-grad-a:#303232;
  --cta-grad-b:#3E4040;
  --cta-hover:#1E2020;
  --cta-line:#4A4C4C;
  --cta-panel-a:#FFF6C2;
  --cta-panel-b:#FFFFFF;
  --swatch-line:#C9C9C4;
  --osaka-yellow:#FFDB00;
  --osaka-yellow-hover:#F2CF00;
  --osaka-ink:#303232;
}

/* ロゴ：黄色の四角に墨のマーク */
html[data-area="osaka"] .logo-mark{background:var(--osaka-yellow)}
html[data-area="osaka"] .logo-mark img{filter:brightness(0) invert(18%)}

/* TOPの最初の画面：作りは東京と同じ（ぼかした写真に色をかぶせ、見出しは帯・説明文は白）。色だけ大阪にする。
   かぶせは墨（--hero-tint-rgb）、見出しの帯は黄色（--hero-band）に墨の文字（東京の「緑の帯に白文字」の置き換え。黄色の上の白文字は読めない）。
   ⚠ 以前は写真を消して黄色一色にしていたが、東京と見た目がそろわないので東京の作りに戻した（2026-09-29 ユーザー指示） */
html[data-area="osaka"] .hero-copy h1 span{color:var(--osaka-ink)}

/* 主なボタン：黄色の地に墨の文字 */
html[data-area="osaka"] :is(.btn-search,.opt-apply,.fx-next,.fx-run,.fx-submit,.auth-submit,.ctc-submit,.state-btn,.fc-btn,.zg-addr-btn,.se-side-note a,.se-save-panel-view,.fav-cond-rename-save,.mypage-logout-ok),
/* 選択中の印（押している切り替え・条件が変わった合図） */
html[data-area="osaka"] :is(.se-adv-tab[aria-pressed="true"],.se-toolbar-btn[aria-pressed="true"],#se-filter-open.is-dirty,.se-viewmode-btn.is-on,.rng-unitsw-btn.is-on){
  background:var(--osaka-yellow);border-color:var(--osaka-yellow);color:var(--osaka-ink);
}
html[data-area="osaka"] :is(.btn-search,.opt-apply,.fx-next,.fx-run,.fx-submit,.auth-submit,.ctc-submit,.state-btn,.fc-btn,.zg-addr-btn,.se-side-note a,.fav-cond-rename-save,.mypage-logout-ok):not(:disabled):hover{
  background:var(--osaka-yellow-hover);border-color:var(--osaka-yellow-hover);
}
/* 押せない間（送信中）。ほとんどのボタンは東京と同じく「色はそのまま薄くする」（元の :disabled の opacity）。
   お問い合わせの送信ボタンだけは元がグレーに変える作りなので、大阪でもグレーにする（黄色のままだと押せそうに見える）。
   マウスを乗せたときの色の変化は、押せるとき（:not(:disabled)）だけ */
html[data-area="osaka"] .ctc-submit:disabled{background:var(--gray-light);border-color:var(--gray-light)}
html[data-area="osaka"] .btn-search.is-dirty{background:var(--osaka-yellow-hover);box-shadow:0 0 0 3px rgba(255,219,0,.35)}
/* 黄色の上の白いアイコンは読めないので墨にする */
html[data-area="osaka"] :is(.btn-search,.opt-apply,.fx-next,.fx-run,.fx-submit,.auth-submit,.ctc-submit,.state-btn,.fc-btn,.zg-addr-btn,.se-side-note a,.se-save-panel-view,.fav-cond-rename-save,.mypage-logout-ok,.se-adv-tab[aria-pressed="true"],.se-toolbar-btn[aria-pressed="true"],#se-filter-open.is-dirty,.se-viewmode-btn.is-on,.rng-unitsw-btn.is-on) img{filter:brightness(0) invert(18%)}

/* 選択中の下線（ヘッダーの「物件を探す」・検索パネルのタブ）は墨。
   ⚠ 黄色にしないこと。白地の上の黄色の線は 1.36:1 で、太くしてもほぼ見えない（2026-09-29 見直しで墨へ戻した） */
html[data-area="osaka"] .h-nav-link[aria-current="page"]::after{background:var(--osaka-ink)}
html[data-area="osaka"] .sp-tab.on{border-color:var(--osaka-ink)}

/* チェックボックスの「選択中」は背景画像なので、墨の版に差し替える */
html[data-area="osaka"] :is(.auth-remember,.fx-ward,.fx-agree,.ow-check,.ctc-agree) input:checked{background-image:url(../images/icons/checkbox-on-osaka.svg)}

/* 「募集中」の緑（--live）は状態を表す色なので大阪でも残す（募集中の札・点滅する点・「できます」）。
   ただし同じ緑を**飾り**に使っている所（件数の数字・表の罫線・リンクの色）は、大阪では墨・グレーにする */
html[data-area="osaka"] :is(.hit b,.live-stat b,.se-count b,.mypage-stat-num,.auth-link-btn){color:var(--osaka-ink)}
html[data-area="osaka"] :is(.dtl-defrow,.dtl-defrow:first-child,.dtl-units-table th,.dtl-units-table td,.fc-demo,.fcd-head,.fcd-row:last-child){border-color:#CFCFCB}

/* 会員案内の帯の渦の飾り（緑の画像を screen で重ねている）。墨の帯の上では白黒にして、うっすら明るい渦として残す */
html[data-area="osaka"] .cta-swirl{filter:grayscale(1)}

/* TOPの「約束」の挿絵（インラインSVG）は淡い緑が十数色使われているので、挿絵ごと白黒にする */
html[data-area="osaka"] .pr-media svg{filter:grayscale(1)}

/* 本文に埋め込んだ図の緑。CSS は属性より強いので、HTMLを書き換えずに墨へ差し替えられる */
html[data-area="osaka"] [stroke="#176B5B"]{stroke:var(--moss)}
html[data-area="osaka"] [fill="#176B5B"]{fill:var(--moss)}
html[data-area="osaka"] [flood-color="#176B5B"]{flood-color:var(--moss)}

/* 緑で描いたアイコン・挿絵（画像ファイル）は墨寄りのグレーにする。白・黒の部分はそのまま残る。
   一覧は「#176B5B を含む画像」を機械的に拾ったもの（画像を足したときは、緑を含むならここにも足す）。
   ⚠ 白いアイコン（line-logo-white.svg 等）まで灰色にしないよう、画像を名指しで挙げている */
html[data-area="osaka"] img[src="/images/hero-illust-people.png"],
html[data-area="osaka"] img[src="/images/hero-illust-bike.png"],
html[data-area="osaka"] img[src="/images/icons/arrow-diagonal.svg"],
html[data-area="osaka"] img[src="/images/icons/arrow-r-circle.svg"],
html[data-area="osaka"] img[src="/images/icons/arrow-r.svg"],
html[data-area="osaka"] img[src="/images/icons/arrow-right.svg"],
html[data-area="osaka"] img[src="/images/icons/map-pin.svg"],
html[data-area="osaka"] img[src="/images/icons/doc-search-two.svg"],
html[data-area="osaka"] img[src="/images/icons/fc-a-storefront.svg"],
html[data-area="osaka"] img[src="/images/icons/fc-b-chain.svg"],
html[data-area="osaka"] img[src="/images/icons/fc-c-multishop.svg"],
html[data-area="osaka"] img[src="/images/icons/fc-d-growth.svg"],
html[data-area="osaka"] img[src="/images/icons/fc.svg"],
html[data-area="osaka"] img[src="/images/icons/figma-flatten-selection.svg"],
html[data-area="osaka"] img[src="/images/icons/heart.svg"],
html[data-area="osaka"] img[src="/images/icons/history.svg"],
html[data-area="osaka"] img[src="/images/icons/icon-chart-graph.svg"],
html[data-area="osaka"] img[src="/images/icons/icon-history.svg"],
html[data-area="osaka"] img[src="/images/icons/icon-mail-moss.svg"],
html[data-area="osaka"] img[src="/images/icons/icon-me.svg"],
html[data-area="osaka"] img[src="/images/icons/icon-no-photo.svg"],
html[data-area="osaka"] img[src="/images/icons/icon-search.svg"],
html[data-area="osaka"] img[src="/images/icons/instagram.svg"],
html[data-area="osaka"] img[src="/images/icons/media-book.svg"],
html[data-area="osaka"] img[src="/images/icons/mypage-apartment.svg"],
html[data-area="osaka"] img[src="/images/icons/mypage-chevron-r.svg"],
html[data-area="osaka"] img[src="/images/icons/mypage-heart.svg"],
html[data-area="osaka"] img[src="/images/icons/mypage-label.svg"],
html[data-area="osaka"] img[src="/images/icons/mypage-lock.svg"],
html[data-area="osaka"] img[src="/images/icons/mypage-logout.svg"],
html[data-area="osaka"] img[src="/images/icons/mypage-setting.svg"],
html[data-area="osaka"] img[src="/images/icons/nav-heart.svg"],
html[data-area="osaka"] img[src="/images/icons/nav-search.svg"],
html[data-area="osaka"] img[src="/images/icons/search.svg"],
html[data-area="osaka"] img[src="/images/icons/sort-arrow.svg"],
html[data-area="osaka"] img[src="/images/icons/time.svg"],
html[data-area="osaka"] img[src="/images/icons/voice-arrow-r-hover.svg"],
html[data-area="osaka"] img[src="/images/icons/voice-arrow-r.svg"],
html[data-area="osaka"] img[src="/images/icons/voice-man.svg"],
html[data-area="osaka"] img[src="/images/icons/voice-woman-fill-inner.svg"],
html[data-area="osaka"] img[src="/images/icons/voice-woman-fill.svg"],
html[data-area="osaka"] img[src="/images/icons/voice-woman-line.svg"],
html[data-area="osaka"] img[src="/images/illustrations/404-line-a.svg"],
html[data-area="osaka"] img[src="/images/illustrations/404-line-b.svg"],
html[data-area="osaka"] img[src="/images/illustrations/404-line-c.svg"],
html[data-area="osaka"] img[src="/images/illustrations/404-line-d.svg"],
html[data-area="osaka"] img[src="/images/illustrations/feature-basement.svg"],
html[data-area="osaka"] img[src="/images/illustrations/feature-inuki.svg"],
html[data-area="osaka"] img[src="/images/illustrations/feature-large.svg"],
html[data-area="osaka"] img[src="/images/illustrations/feature-late.svg"],
html[data-area="osaka"] img[src="/images/illustrations/feature-members.svg"],
html[data-area="osaka"] img[src="/images/illustrations/feature-nodeposit.svg"],
html[data-area="osaka"] img[src="/images/illustrations/feature-now.svg"],
html[data-area="osaka"] img[src="/images/illustrations/feature-roadside.svg"],
html[data-area="osaka"] img[src="/images/illustrations/feature-skeleton.svg"],
html[data-area="osaka"] img[src="/images/illustrations/feature-small.svg"],
html[data-area="osaka"] img[src="/images/illustrations/industry-bar.svg"],
html[data-area="osaka"] img[src="/images/illustrations/industry-heavy-food.svg"],
html[data-area="osaka"] img[src="/images/illustrations/industry-light-food.svg"],
html[data-area="osaka"] img[src="/images/illustrations/industry-lodging.svg"],
html[data-area="osaka"] img[src="/images/illustrations/industry-medical.svg"],
html[data-area="osaka"] img[src="/images/illustrations/industry-office.svg"],
html[data-area="osaka"] img[src="/images/illustrations/industry-relax.svg"],
html[data-area="osaka"] img[src="/images/illustrations/industry-retail.svg"],
html[data-area="osaka"] img[src="/images/illustrations/industry-salon.svg"],
html[data-area="osaka"] img[src="/images/illustrations/industry-service.svg"],
html[data-area="osaka"] img[src="/images/illustrations/industry-warehouse.svg"],
html[data-area="osaka"] img[src="/images/illustrations/thanks-line-a.svg"],
html[data-area="osaka"] img[src="/images/illustrations/thanks-line-b.svg"],
html[data-area="osaka"] img[src="/images/illustrations/thanks-line-c.svg"],
html[data-area="osaka"] img[src="/images/no-photo.svg"]{filter:grayscale(1) contrast(1.35)}

/* 閉業相談の「非公開物件マッチングへ」：乗せたら墨の地に白い矢印（上の白黒化より強く効かせる） */
html[data-area="osaka"] .cl-cross-btn:hover img{filter:brightness(0) invert(1)}

/* 緑みの薄い地（AI相談の欄・非公開物件マッチングの結果の縞）は、大阪では参考サイトの地 #F1F1EC 系にする */
html[data-area="osaka"] .dtl-ai{background:linear-gradient(180deg,#F6F6F2 0%,var(--paper) 120px)}
html[data-area="osaka"] .fx-card-fig{background:repeating-linear-gradient(135deg,var(--moss-tint) 0 12px,#F7F7F4 12px 24px)}

/* さがすの並び替えの▼（CSS に埋め込んだ緑の線）を墨の版にする */
html[data-area="osaka"] .se-sort{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M13 6L8 10L3 6' stroke='%23303232' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* エリア選択（/）の見直し（2026-09-29）
   - ロゴはどちらのエリアでもない画面なので墨（緑だと東京のページに見える） */
.page-area-gate .ag-head .logo-mark{background:var(--osaka-ink,#303232)}
.page-area-gate .ag-head .logo-word{color:#303232}