/* /pm/assets/style.css — 賃貸管理システムの共通CSS（2026-09-19 Task 2）。
   配色・フォントは既存 home_index.php（--navy/--crimson/--border/--muted）に合わせる。
   スマホ優先（幅360pxで崩れない）。ボタン・入力欄は高さ44px以上（指で押しやすく）。 */

:root{
  --navy:#1c2f4a; --navy-deep:#14233a; --crimson:#9c2b2b;
  --panel:#f2f4f7; --border:#d6dbe2; --ink:#33373d; --muted:#6b7682;
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:#fff; color:var(--ink);
  font-family:"Helvetica Neue","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",sans-serif;
  line-height:1.7;
}

/* ── ヘッダー・ナビ ─────────────────────────────────────────── */
/* position:relative は、スマホのドロワー（.pm-nav-panel）をヘッダーの真下に重ねる基準（2026-09-22） */
.pm-head{ position:relative; border-bottom:2px solid var(--navy); margin-bottom:20px; }
.pm-head-in{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:8px; max-width:1100px; margin:0 auto; padding:10px 14px 0;
}
.pm-brand{
  font-size:1.05rem; font-weight:700; color:var(--navy); text-decoration:none;
  letter-spacing:.02em; white-space:nowrap;
}
.pm-userbox{ display:flex; align-items:center; gap:12px; font-size:.85rem; }
.pm-uname{ color:var(--muted); font-weight:600; }
.pm-logout{ display:inline-block; min-height:34px; line-height:32px; padding:0 12px; border:1px solid var(--crimson); border-radius:4px;
  color:var(--crimson); background:#fff; text-decoration:none; font-weight:700; font-size:.85rem; }  /* ボタン型（2026-09-19 ユーザー要望） */
.pm-logout:hover{ background:var(--crimson); color:#fff; text-decoration:none; }

/* 2026-09-22: <nav> は .pm-head-in の中（<details class="pm-nav-d">）へ移した。
   PC では .pm-nav-d が幅100%の行になるので、max-width と左右padding は親に任せる＝
   タブの左端は今までどおり建物名(brand)の左端と揃う。 */
.pm-nav{
  display:flex; flex-wrap:wrap; gap:0 3px; align-items:flex-end;
  max-width:none; margin:0; padding:4px 0 0;
}
/* ナビの入れ物。PC では幅100%の行＝今までの <nav> と同じ位置。メニューボタンは隠す */
.pm-nav-d{ flex:0 0 100%; order:3; min-width:0; }
.pm-navbtn{ display:none; }
.pm-userbox-sp{ display:none; }   /* ドロワー内の氏名・ログアウトはスマホだけ */
/* タブ型（2026-09-19 ユーザー要望）。ヘッダー下の 2px 線（.pm-head の border-bottom）に乗せ、
   選択中のタブは下辺を白で塗って線を切り、本文とつながって見せる。 */
.pm-nav a{
  display:inline-block; padding:8px 16px 7px; min-height:38px; margin-bottom:-2px;
  color:var(--muted); text-decoration:none; font-size:.9rem; font-weight:600;
  border:2px solid transparent; border-bottom:2px solid var(--navy); border-radius:7px 7px 0 0; background:transparent;
}
.pm-nav a:hover{ color:var(--navy); background:var(--panel); }

/* ── 本文 ────────────────────────────────────────────────── */
.pm-main{ max-width:1100px; margin:0 auto; padding:0 14px 60px; }
.pm-title{ font-size:1.25rem; color:var(--navy); margin:6px 0 16px; }
h2{ font-size:1.05rem; color:var(--navy); margin:0 0 12px; }
.pm-muted{ color:var(--muted); font-size:.85rem; }

/* お知らせ／状態 */
.note{ padding:10px 14px; border-radius:4px; margin:0 0 16px; font-size:.9rem; }
.note.ok{ background:#eef7f0; border-left:4px solid #0a7a2f; color:#0a5a24; }
.note.ng{ background:#fdf5f5; border-left:4px solid var(--crimson); color:#6b3535; }
.ok{ color:#0a7a2f; font-weight:700; }
.ng{ color:var(--crimson); font-weight:700; }

/* ── 表（横スクロールで包む）─────────────────────────────────── */
.tblwrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 20px; }
.tbl{ border-collapse:collapse; width:100%; font-size:.9rem; }  /* min-width:360px はやめた（2026-09-19: スマホで上のパネルより幅がはみ出た） */
.tbl th,.tbl td{ border:1px solid var(--border); padding:8px 10px; text-align:left; vertical-align:middle; }
.tbl thead th{ background:var(--panel); color:var(--navy); font-weight:600; white-space:nowrap; }
.pm-stamp-thumb{ display:inline-block; object-fit:contain; vertical-align:middle; background:#fafafa; border:1px solid var(--border); }

/* ── カード・フォーム ──────────────────────────────────────── */
.pm-card{
  border:1px solid var(--border); border-radius:6px; padding:16px 16px 18px;
  margin:0 0 20px; background:#fff; max-width:520px;
}
.pm-field{ display:block; margin:0 0 14px; }
.pm-field > span{ display:block; font-size:.82rem; font-weight:700; color:var(--muted); margin:0 0 5px; }
.pm-field input, .pm-field select{
  width:100%; min-height:44px; padding:10px 12px; font:inherit; font-size:1rem;
  border:1px solid var(--border); border-radius:4px; background:#fff; color:var(--ink);
}
.pm-field input:focus, .pm-field select:focus{ outline:none; border-color:var(--navy); }
.pm-check{
  display:flex; align-items:center; gap:9px; margin:0 0 16px;
  font-size:.9rem; color:var(--ink); font-weight:600; cursor:pointer;
}
.pm-check input{ width:20px; height:20px; accent-color:var(--navy); flex:none; margin:0; }

.pm-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.pm-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:10px 18px; font:inherit; font-size:.95rem; font-weight:700;
  border:1px solid var(--navy); border-radius:4px; background:#fff; color:var(--navy);
  text-decoration:none; cursor:pointer; transition:.15s;
}
.pm-btn:hover{ background:var(--panel); }
.pm-btn-primary{ background:var(--navy); color:#fff; }
.pm-btn-primary:hover{ background:var(--crimson); border-color:var(--crimson); }
.pm-btn-small{ min-height:36px; padding:6px 12px; font-size:.85rem; }

/* ── ログイン画面 ─────────────────────────────────────────── */
.pm-login-body{
  display:flex; align-items:center; justify-content:center; min-height:100vh;
  background:var(--panel); padding:20px;
}
.pm-login-card{
  width:100%; max-width:340px; background:#fff;
  border:1px solid var(--border); border-radius:8px; padding:28px 24px 24px;
}
.pm-login-brand{
  text-align:center; font-size:1.15rem; font-weight:700; color:var(--navy);
  line-height:1.4; margin:0 0 20px; letter-spacing:.02em;
}
.pm-login-err{ color:var(--crimson); font-size:.85rem; font-weight:700; margin:12px 0 0; text-align:center; }
.pm-login-card .pm-btn-primary{ width:100%; margin-top:6px; }

/* ── マスタ画面の追加クラス（2026-09-19 Task 3）──────────────────────── */

/* 検索バー（一覧の上の1欄＋ボタン） */
.pm-searchbar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 16px; }
.pm-searchbar input[type="search"]{
  flex:1 1 200px; min-height:44px; padding:10px 12px; font:inherit; font-size:1rem;
  border:1px solid var(--border); border-radius:4px; background:#fff; color:var(--ink);
}
.pm-searchbar input[type="search"]:focus{ outline:none; border-color:var(--navy); }

/* 建物・管理物件の広いカード（号室表や66項目チェックを含むので横幅を広げる） */
.pm-card-wide{ max-width:900px; }

/* フォーム内の小見出し（号室・対象箇所・契約者など） */
.pm-subhead{ font-size:.95rem; color:var(--navy); font-weight:700; margin:18px 0 8px; padding-top:10px; border-top:1px solid var(--border); }

/* textarea も .pm-field input と同じ見た目に */
.pm-field textarea{
  width:100%; min-height:64px; padding:10px 12px; font:inherit; font-size:1rem;
  border:1px solid var(--border); border-radius:4px; background:#fff; color:var(--ink); resize:vertical;
}
.pm-field textarea:focus{ outline:none; border-color:var(--navy); }

/* 表の中の入力欄（号室表・契約者表）。指で押しやすい高さを確保しつつ列幅に収める */
.tbl input, .tbl select{
  width:100%; min-width:80px; min-height:40px; padding:7px 8px; font:inherit; font-size:.95rem;
  border:1px solid var(--border); border-radius:4px; background:#fff; color:var(--ink);
}
.tbl input[type="date"]{ min-width:140px; }
.tbl input:focus, .tbl select:focus{ outline:none; border-color:var(--navy); }

/* 対象箇所（66項目）の分類見出しとチェック項目 */
.pm-chk-catl{ font-size:.9rem; font-weight:700; color:var(--crimson); margin:14px 0 2px; }
.pm-chk-catm{ font-size:.82rem; font-weight:700; color:var(--muted); margin:8px 0 2px; padding-left:2px; }
.pm-chk-item{ margin:0 0 4px; padding-left:12px; font-weight:500; }

/* 追加/編集フォームは畳んで表示（2026-09-19 ユーザー要望）。幅は上の一覧と同じ */
.pm-card-full{ max-width:none; }
.pm-fold > summary{ cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px; user-select:none; }
.pm-fold > summary::-webkit-details-marker{ display:none; }
.pm-fold > summary::before{ content:"▸"; font-size:1rem; color:var(--muted); transition:transform .15s; }
.pm-fold[open] > summary::before{ transform:rotate(90deg); }
.pm-fold > summary h2{ margin:0; }
.pm-fold:not([open]){ padding-bottom:16px; }

/* 一覧のページ送り（2026-09-19）: 件数・表示件数・ページ番号 */
.pm-paging{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; margin:0 0 10px; font-size:.9rem; color:var(--muted); }
.pm-paging-count b{ color:var(--ink); font-size:1.05rem; }
.pm-paging-per{ margin:0; display:inline; }
.pm-paging-per select{ min-height:34px; padding:2px 8px; font-size:.9rem; margin-left:4px; }
.pm-paging-nav{ display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.pm-paging-nav a, .pm-paging-nav span{ display:inline-block; min-width:36px; min-height:36px; line-height:34px; text-align:center; padding:0 10px; border:1px solid var(--border); border-radius:4px; text-decoration:none; color:var(--ink); background:#fff; }
.pm-paging-nav a:hover{ background:#f3f3f3; }
.pm-paging-nav .cur{ background:var(--navy, #1f2d4d); color:#fff; border-color:var(--navy, #1f2d4d); font-weight:700; }
.pm-paging-nav .dis{ color:#aaa; background:#fafafa; }
.pm-paging-nav .gap{ border:0; min-width:auto; padding:0 2px; background:transparent; }

/* ナビの現在ページ＝選択中のタブ（2026-09-19） */
.pm-nav a.is-active{ color:var(--navy); background:#fff; border-color:var(--navy); border-bottom-color:#fff; font-weight:700; }
.pm-nav a.is-active:hover{ background:#fff; color:var(--navy); }

/* ホームの絞り込み（2026-09-19） */
.pm-filter{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px; }
.pm-filter-btn{ display:inline-block; min-height:36px; line-height:34px; padding:0 14px; border:1px solid var(--border); border-radius:18px; text-decoration:none; color:var(--ink); background:#fff; font-size:.88rem; font-weight:600; }
.pm-filter-btn:hover{ background:var(--panel); }
.pm-filter-btn.is-on{ background:var(--navy); color:#fff; border-color:var(--navy); }

/* 操作ボタン列は中身の幅だけにする（2026-09-19 ユーザー要望） */
.tbl th.act, .tbl td.act{ width:1%; white-space:nowrap; padding-left:8px; padding-right:8px; }

/* 貸主一覧: 貸主名とフリガナを同じ幅に固定（2026-09-19 ユーザー要望。建物名との幅揃えは取り消し） */
.tbl th.col-eq{ width:14%; }

/* 一覧の交互背景（2026-09-22 ユーザー要望「ゼブラ背景で」） */
.tbl tbody tr:nth-child(even){ background:#fafbfc; }
.tbl tbody tr:hover{ background:#f1f5f9; }

/* ══════════════════════════════════════════════════════════════════════════
   スマホ表示（2026-09-22 ユーザー要望「スマホブラウザの画面がダサすぎてなえる」）

   現場（巡回）でスマホを使うのが主用途なので、ここが一番大事な画面。
     ・768px未満 … ナビ11項目をドロワーに畳む（以前は3行に折り返して画面の1/4を食っていた）
     ・640px未満 … 一覧の表をカードに組み替える（以前は住所が1文字ずつ縦積みになり、
                   右端の「編集」ボタンが画面外に出ていた）
   **768px以上（PC）の見た目は一切変えない。** 配色（--navy/--crimson/--border/--panel）と
   Helvetica Neue のフォント指定も変えない（社内の他画面と揃えているため）。
   ══════════════════════════════════════════════════════════════════════════ */

/* スマホだけに出す注記（640px未満で display:block になる）。既定は非表示 */
.pm-sp-only{ display:none; }

/* ── 768px未満: ヘッダー1行＋ドロワー ───────────────────────────────────── */
@media (max-width:767px){
  .pm-head{ margin-bottom:14px; }
  .pm-head-in{ flex-wrap:nowrap; gap:10px; padding:7px 12px; }
  .pm-brand{ font-size:1.02rem; overflow:hidden; text-overflow:ellipsis; }
  .pm-brand-co{ display:none; }        /* 「オネスティ京都 」を落として1行に収める */
  .pm-userbox-pc{ display:none; }      /* 氏名・ログアウトはドロワーの中へ */

  .pm-nav-d{ flex:none; order:2; }
  .pm-navbtn{
    display:flex; align-items:center; gap:7px; list-style:none; cursor:pointer; user-select:none;
    min-height:42px; padding:0 13px; margin:0;
    border:1px solid var(--border); border-radius:7px; background:#fff;
    color:var(--navy); font-size:.82rem; font-weight:700; white-space:nowrap;
  }
  .pm-navbtn::-webkit-details-marker{ display:none; }
  .pm-navbtn-bars{ position:relative; width:18px; height:2px; border-radius:2px; background:var(--navy); }
  .pm-navbtn-bars::before, .pm-navbtn-bars::after{
    content:""; position:absolute; left:0; width:18px; height:2px; border-radius:2px; background:var(--navy);
  }
  .pm-navbtn-bars::before{ top:-6px; }
  .pm-navbtn-bars::after{ top:6px; }
  .pm-nav-d[open] .pm-navbtn{ background:var(--navy); border-color:var(--navy); color:#fff; }
  .pm-nav-d[open] .pm-navbtn-bars,
  .pm-nav-d[open] .pm-navbtn-bars::before,
  .pm-nav-d[open] .pm-navbtn-bars::after{ background:#fff; }

  /* ドロワー本体。JS が動いていれば（html.pm-js）ヘッダーの下に重ねて出す。
     JS 無効なら <details open> のまま普通に下へ積む＝全項目に辿り着ける。 */
  .pm-nav-panel{ padding:4px 0 8px; }
  /* JS 無効時は重ねられないので、ヘッダーの下に幅いっぱいの行として積む */
  html:not(.pm-js) .pm-head-in{ flex-wrap:wrap; align-items:flex-start; }
  html:not(.pm-js) .pm-nav-d{ flex:0 0 100%; order:3; }
  .pm-js .pm-nav-panel{
    position:absolute; left:0; right:0; top:100%; z-index:30;
    background:#fff; border-bottom:2px solid var(--navy);
    box-shadow:0 12px 26px rgba(20,35,58,.20);
    max-height:calc(100vh - 58px); overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  .pm-nav{ display:block; padding:0; }
  .pm-nav a{
    display:block; margin:0; padding:0 16px; min-height:48px; line-height:48px;
    border:0; border-bottom:1px solid var(--border); border-radius:0;
    font-size:.98rem; font-weight:600; color:var(--ink);
  }
  .pm-nav a:hover{ background:var(--panel); }
  .pm-nav a.is-active{
    background:var(--panel); color:var(--navy); font-weight:700;
    border:0; border-bottom:1px solid var(--border); box-shadow:inset 4px 0 0 var(--crimson);
  }
  .pm-nav a.is-active:hover{ background:var(--panel); }
  .pm-userbox-sp{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:12px 16px 4px; font-size:.85rem;
  }
  .pm-userbox-sp .pm-logout{ min-height:44px; line-height:42px; padding:0 16px; }
}

/* ── 640px未満: 一覧の表をカードに組み替える ─────────────────────────────
   使うのは <table class="tbl tbl-cards">（一覧だけ。号室表・契約者表のような
   入力用の表や、file.php の項目表には付けない＝今までどおり横スクロール）。
   各 <td> の data-label="列名" を ::before で行内に出す。 */
@media (max-width:640px){
  .pm-main{ padding:0 12px 48px; }
  .pm-title{ font-size:1.15rem; margin:4px 0 12px; }
  h2{ font-size:1rem; }

  .tblwrap:has(> .tbl-cards){ overflow:visible; }   /* カードなら横スクロールは要らない */
  .tbl-cards, .tbl-cards thead, .tbl-cards tbody, .tbl-cards tr, .tbl-cards td{ display:block; }
  /* 見出し行は各セルの data-label に出るので画面からは外す（読み上げには残す） */
  .tbl-cards thead{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }
  .tbl-cards tbody tr{
    border:1px solid var(--border); border-radius:10px; background:#fff;
    margin:0 0 10px; padding:12px 14px 12px; box-shadow:0 1px 3px rgba(20,35,58,.07);
  }
  .tbl-cards tbody tr:nth-child(even),
  .tbl-cards tbody tr:hover{ background:#fff; }     /* ゼブラはカードでは使わない */
  /* 「ラベル: 値」の1行。flex ではなく block＋ぶら下げインデントにしてある＝
     セルの中に <br> や <div>（住所の〒・ログの詳細）が入っても素直に折り返すため。 */
  .tbl-cards td{
    display:block; width:auto; border:0; white-space:normal;
    padding:3px 0 3px 76px; text-indent:-76px;
    font-size:.92rem; line-height:1.55;
  }
  .tbl-cards td::before{
    content:attr(data-label); display:inline-block; width:66px; margin-right:10px;
    text-indent:0; white-space:nowrap;
    color:var(--muted); font-size:.76rem; font-weight:700; letter-spacing:.02em;
  }
  /* セルの中の箱（ボタン・フォーム・詳細div）には、ぶら下げインデントを持ち込まない。
     inline-flex の .pm-btn が text-indent を継いで文字がボタンの外へ出るため（2026-09-22 実機で発見）。 */
  .tbl-cards td *{ text-indent:0; }
  .tbl-cards td:empty{ display:none; }              /* 空の項目は行ごと出さない */
  .tbl-cards td form{ display:inline-block; vertical-align:middle; margin:0; }

  /* 先頭列＝カードの見出し（建物名・貸主名など）。他より大きく、下に区切り線 */
  .tbl-cards tbody td:first-child:not([colspan]){
    display:block; margin:0 0 9px; padding:0 0 9px; text-indent:0;
    border-bottom:1px solid var(--border);
    font-size:1.02rem; font-weight:700; color:var(--navy); line-height:1.45; overflow-wrap:anywhere;
  }
  .tbl-cards tbody td:first-child:not([colspan])::before{ display:none; }
  .tbl-cards tbody td:first-child a{ color:var(--navy); }

  /* 操作ボタンはカードの下端に全幅で置く（画面外に出さない） */
  .tbl-cards td.act{
    display:flex; flex-wrap:wrap; gap:8px; width:auto; white-space:normal; text-indent:0;
    margin:11px 0 0; padding:11px 0 0; border-top:1px solid var(--border);
  }
  .tbl-cards td.act::before{ display:none; }
  .tbl-cards td.act .pm-btn{ flex:1 1 40%; min-height:44px; font-size:.9rem; }
  .tbl-cards td.act .pm-inline-form{ flex:1 1 40%; display:flex; margin:0; }
  .tbl-cards td.act .pm-inline-form .pm-btn{ width:100%; }

  /* 「該当なし」など colspan の1行は見出しにしない */
  .tbl-cards tbody td[colspan]{ display:block; padding:2px 0; text-indent:0; }
  .tbl-cards tbody td[colspan]::before{ display:none; }

  /* 操作ログ: 日時は見出しだが控えめに。IP はスマホでは省く（表の上に断り書きを出す） */
  .tbl-cards tbody td.pm-log-time:first-child{
    font-size:.82rem; font-weight:700; color:var(--muted); margin-bottom:7px; padding-bottom:7px;
  }
  .tbl-cards td.pm-log-ip{ display:none; }

  /* 余白・文字まわりの整え（スマホだけ） */
  .pm-card{ padding:14px 13px 16px; border-radius:8px; }
  .pm-card-wide, .pm-card-full{ max-width:none; }
  .pm-fold > summary{ min-height:44px; }
  .pm-paging{ gap:8px 14px; font-size:.85rem; }
  .pm-filter{ gap:7px; }
  .pm-filter-btn{ min-height:40px; line-height:38px; }
  .note{ font-size:.88rem; }
  .pm-actions .pm-btn{ flex:1 1 44%; }
  .pm-sp-only{ display:block; }     /* スマホだけの断り書き（既定の display:none はこの節の直前で定義） */
}

/* ── 建物名の50音バー（2026-09-22）─────────────────────────────────────────
   pm_kana_bar_html が出す `.pm-filter.pm-kana`。色・枠・角丸・is-on は .pm-filter-btn の
   ままで、1文字ボタンなので「正方形寄りに詰める」だけを足す（色は一切足さない）。 */
.pm-kana .pm-filter-btn{ min-width:36px; padding:0 9px; text-align:center; }

@media (max-width:640px){
  /* スマホは12個（すべて / あ〜わ / 他）を 6列×2段で必ず収める。
     flex の折り返しだと文字幅で段が揺れるので、ここだけ grid にして列数を固定する。
     高さ・行高は上のスマホ節の .pm-filter-btn（40px/38px）をそのまま使う。 */
  .pm-kana{ display:grid; grid-template-columns:repeat(6, 1fr); gap:6px; }
  .pm-kana .pm-filter-btn{ min-width:0; padding:0 2px; font-size:.9rem; }
}

/* 紐付け済みの相手（貸主/建物フォームの紐付け区画・2026-09-22） */
.pm-linked{ margin:4px 0 0; padding:0 0 0 1.2em; }
.pm-linked li{ margin:2px 0; }

/* 承認待ち一覧など、簡素な箇条書き（2026-09-22） */
.pm-list{ margin:6px 0 0; padding:0 0 0 1.2em; }
.pm-list li{ margin:3px 0; }

/* ── 写真の拡大表示（ライトボックス・2026-09-22）───────────────────────────────
   巡回入力/承認の画面でサムネイルを押したときに出る全画面の重ね。DOM は upload.js が作る。
   スマホで必ず画面に収める（max-width/height は 100vw/100vh ではなく、閉じる・送るボタンの
   ぶんを空けた calc。100vh だと iOS のアドレスバーの分だけ下がはみ出る）。 */
.pm-lb{ display:none; position:fixed; inset:0; z-index:9000; background:rgba(0,0,0,.82);
  align-items:center; justify-content:center; }
.pm-lb.is-open{ display:flex; }
.pm-lb-img{ max-width:calc(100vw - 24px); max-height:calc(100vh - 96px); object-fit:contain;
  background:#111; }
.pm-lb-close, .pm-lb-prev, .pm-lb-next{
  position:absolute; min-width:44px; min-height:44px; padding:0 10px; border:0; border-radius:4px;
  background:rgba(0,0,0,.45); color:#fff; font-size:1.6rem; line-height:1; cursor:pointer; }
.pm-lb-close{ top:10px; right:10px; font-size:1.4rem; }
.pm-lb-prev{ left:6px; top:50%; transform:translateY(-50%); }
.pm-lb-next{ right:6px; top:50%; transform:translateY(-50%); }
.pm-lb-cap{ position:absolute; left:0; right:0; bottom:12px; text-align:center;
  color:#fff; font-size:.85rem; }
/* 拡大中は背後の本文をスクロールさせない */
body.pm-lb-lock{ overflow:hidden; }

/* PC のメニューを1行に（2026-09-22 ユーザー要望「取込が改行される。幅を広げていいので1行で」）。
   コンテナを 1100→1320px に広げ、タブは折り返さない。スマホ（767px 以下）はドロワーなので影響なし。 */
@media (min-width:768px){
  .pm-head-in, .pm-main{ max-width:1320px; }
  .pm-nav{ flex-wrap:nowrap; }
  .pm-nav a{ white-space:nowrap; padding-left:10px; padding-right:10px; }
}

/* ── 一覧の並べ替え（2026-09-22 ユーザー要望「建物と貸主のページで、それぞれの項目でソートできるように」）──
   見出しの中身は <a class="pm-sort-link">（HTML は pm_lib.php の pm_sort_th() が作る）。
   セルいっぱいを押せるように block ＋ 負のマージンで th の padding（8px 10px）の上に被せる
   （指で押す面積を確保する。th の padding を変えたらここも一緒に直す）。 */
.pm-sort-link{
  display:block; margin:-8px -10px; padding:8px 10px;
  color:inherit; text-decoration:none; white-space:nowrap;
}
.pm-sort-link:hover{ background:#e6eaf0; text-decoration:underline; }
.pm-sort-link:focus-visible{ outline:2px solid var(--navy); outline-offset:-2px; }
/* 並べ替え中の列。**色だけに頼らず矢印の形でも分かるようにする**
   （矢印は aria-hidden。読み上げには th の aria-sort が伝わる）。 */
.tbl thead th.is-sorted{ background:#e4e9f0; }
.tbl thead th.is-sorted .pm-sort-link{ font-weight:700; color:var(--navy); }
.pm-sort-mark{ margin-left:4px; font-size:.78rem; line-height:1; color:var(--crimson); }

/* スマホ用の「並び順」。640px 以下は .tbl-cards の thead を画面から外している＝
   見出しを押して並べ替えられないので、同じ選択肢を select で出す。
   **PC では出さない**（見出しを押せるので二重になる）。 */
.pm-sortbar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 10px;
  font-size:.9rem; color:var(--muted); }
.pm-sortbar select{ min-height:40px; padding:4px 8px; border:1px solid var(--border);
  border-radius:4px; background:#fff; font-size:.95rem; color:var(--ink); }
@media (min-width:641px){ .pm-sortbar{ display:none; } }

/* 必須の印（2026-09-22 ユーザー要望「(必須)は赤文字で」） */
.pm-req{ color:var(--crimson); font-weight:700; }