/*!
 * ooya.css — 大家の経営台帳（/ooya）の見た目
 *
 * ★ランディングページ（/ooya）とアプリ（/ooya/app）の**両方**が読む。
 *   2ページに同じCSSを持たせると必ず片方だけ直して食い違うので、ここに集める。
 *   片方でしか使わない規則が混ざっているが、それで困ることはない。
 *
 * ★版をファイル名に入れていないので、_headers で長期キャッシュを付けないこと
 *   （付けると古いCSSがエッジに残る。CLAUDE.md の /receipt の項と同じ理由）。
 */
/* ===== デザイントークン =====
     アクセントは褐色（#8A5A2B・白背景でコントラスト比 5.5:1）。
     既存ツールが青系・緑系で埋まっているため、見分けが付く色を選んでいる。
     黄は「要確認」、赤は「出力不可」にだけ使う。色だけで意味を伝えず、必ず語も添える。 */
  :root{
    --ink:#231A12; --brown:#8A5A2B; --brown-deep:#6E4622; --umber:#3B2A18;
    --sand:#F5EDE3; --bg:#FAF7F2; --surface:#FFFFFF; --line:#E5DAC9; --muted:#7A6B59;
    --warn:#9A6C05; --warn-bg:#FFF7E6; --danger:#B3261E; --danger-bg:#FDECEA;
    --ok:#1F6E52; --ok-bg:#E9F3EE;
    --radius:18px; --shadow:0 10px 30px rgba(35,26,18,.08);
    --wrap:1180px;
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{margin:0;background:var(--bg);color:var(--ink);
    font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
    font-size:15px;line-height:1.75;-webkit-font-smoothing:antialiased}
  img{max-width:100%}
  /* ★hidden 属性を必ず効かせる。`.btn{display:inline-flex}` のような
     クラス指定は、同じ詳細度で後から書かれると UA の `[hidden]{display:none}` に勝ってしまう。
     実際 `pfGeoBtn` が hidden なのに表示されていた（2026-08-26）。 */
  [hidden]{display:none !important}
  a{color:var(--brown-deep)}
  .wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  :focus-visible{outline:3px solid #C79A62;outline-offset:2px}

  /* ===== 全ページ共通のヘッダー・フッター（他ページと同じ見た目を保つ。ここは触らない）===== */
  :root{--bg-white:#FFFFFF;--bg-line:#E3E9F2;--navy-900:#0F1D3D}
  .site-header{background:var(--bg-white);border-bottom:1px solid var(--bg-line);padding:0 24px;display:flex;align-items:center;justify-content:flex-end;gap:14px;height:60px;position:static;z-index:100;box-shadow:0 1px 0 var(--bg-line),0 2px 8px rgba(0,0,0,0.04)}
  .site-header .logo{display:flex;align-items:center;gap:10px;text-decoration:none}
  .logo-mark{flex-shrink:0}
  .logo-block{display:flex;flex-direction:column;line-height:1.2}
  .logo-text{font-size:15px;font-weight:700;color:#2B2B2B;letter-spacing:.22em}
  .logo-sub{font-size:9.5px;color:#666;letter-spacing:.35em;margin-top:1px}
  @media(max-width:480px){.logo-sub{display:none}}
  .site-footer{background:var(--navy-900);color:#D8DEEA;margin-top:0}
  .footer-inner{max-width:1080px;margin:0 auto;padding:48px 24px 20px;display:grid;grid-template-columns:1.4fr 1fr;gap:40px}
  @media(max-width:700px){.footer-inner{grid-template-columns:1fr;gap:28px}}
  .footer-logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
  .footer-logo-block{display:flex;flex-direction:column;line-height:1.2}
  .footer-logo-text{font-size:15px;font-weight:700;color:#F2F2F2;letter-spacing:.22em}
  .footer-logo-sub{font-size:9px;color:#99A3B8;letter-spacing:.35em;margin-top:1px}
  .footer-desc{font-size:12px;color:#9AA3B8;line-height:1.9;margin-top:14px}
  .footer-col-title{font-size:11px;letter-spacing:.2em;color:#7C88A3;margin-bottom:10px;text-transform:uppercase}
  .footer-col a{display:block;color:#C6CEDE;font-size:13.5px;margin-bottom:8px;font-style:normal}
  .footer-col a:hover{color:#fff;text-decoration:none}
  .footer-copy{max-width:1080px;margin:0 auto;padding:16px 24px 32px;border-top:1px solid rgba(255,255,255,.08);font-size:12px;color:#7C88A3;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

  /* ===== ボタン ===== */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
    background:var(--brown);color:#fff;border:1px solid var(--brown);border-radius:12px;
    padding:12px 20px;font-size:14.5px;font-weight:700;cursor:pointer;font-family:inherit;
    min-height:44px;text-decoration:none;transition:background .15s,border-color .15s}
  .btn:hover{background:var(--brown-deep);border-color:var(--brown-deep)}
  .btn:disabled{opacity:.5;cursor:default}
  .btn.sub{background:var(--surface);color:var(--ink);border-color:var(--line)}
  .btn.sub:hover{background:var(--sand);border-color:#D6C3A8}
  .btn.ghost{background:transparent;color:var(--muted);border-color:transparent;padding:10px 12px}
  .btn.ghost:hover{color:var(--danger);background:var(--danger-bg)}
  .btn.lg{padding:15px 26px;font-size:16px;border-radius:14px}
  .btn.sm{padding:7px 12px;font-size:13px;min-height:36px;border-radius:9px}

  /* ===== ツールヘッダー ===== */
  .toolhead{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
  .toolhead-in{max-width:var(--wrap);margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:14px}
  .th-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
  .th-brand svg{width:34px;height:34px;border-radius:9px;display:block}
  .th-name{font-size:15.5px;font-weight:800;letter-spacing:.01em;white-space:nowrap}
  .th-nav{margin-left:auto;display:flex;align-items:center;gap:4px}
  .th-nav a{color:var(--muted);text-decoration:none;font-size:13.5px;font-weight:600;padding:9px 12px;border-radius:9px}
  .th-nav a:hover{color:var(--ink);background:var(--sand)}
  .chip{display:inline-flex;align-items:center;gap:8px;background:var(--sand);border:1px solid #E0CFB4;
    border-radius:999px;padding:7px 14px;font-size:13px;color:var(--umber);white-space:nowrap}
  .chip b{font-size:15px;font-weight:800}
  .chip.is-low{background:var(--warn-bg);border-color:#F0DFB4;color:#7A5405}
  .chip.is-zero{background:var(--danger-bg);border-color:#F3CFCB;color:#8C1D18}
  .chip.is-error{background:#F3F1EE;border-color:var(--line);color:var(--muted)}
  .chip-detail{font-size:11px;color:var(--muted)}
  .chip-retry{background:none;border:0;color:var(--brown-deep);font:inherit;font-size:12px;text-decoration:underline;cursor:pointer;padding:0 2px}
  /* ★★チップの中の「ログイン」「料金を見る」（2026-09-02）。
     チップ自体はボタンにしない（中に「再取得」が入ることがあり、ボタンの入れ子になる）。 */
  .chip-act{background:var(--brown);border:0;color:#fff;font:inherit;font-size:11.5px;
    font-weight:700;border-radius:999px;padding:3px 10px;margin-left:6px;cursor:pointer;
    line-height:1.4}
  .chip-act:hover{background:var(--brown-deep)}
  .skeleton{display:inline-block;width:74px;height:13px;border-radius:7px;
    background:linear-gradient(90deg,#E5DAC9,#F3ECE2,#E5DAC9);background-size:200% 100%;animation:sk 1.2s ease-in-out infinite}
  @keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
  .th-saved{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:9px 14px;
    font-size:13px;font-weight:700;color:var(--ink);cursor:pointer;font-family:inherit;min-height:40px}
  .th-saved:hover{background:var(--sand)}
  /* ★★スマホでヘッダーを横に溢れさせない（2026-08-30）。
     残数チップは `white-space:nowrap` で、「取得できません 再取得」のような長い文言に
     なると**ページ全体が横スクロールになる**（320pxで実測 349px）。そうなると指で
     少しなぞっただけで画面が横にずれ、「横幅が広がった」ように見える。
     チップは折り返しを許し、ツール名は縮められるようにして、器の中に収める。 */
  @media(max-width:900px){
    .th-nav a{display:none}
    .th-name{font-size:14px;overflow:hidden;text-overflow:ellipsis}
    .toolhead-in{gap:10px;min-width:0}
    .th-brand{min-width:0}
    .th-nav{min-width:0}
    .chip{min-width:0;white-space:normal;line-height:1.45;text-align:right}
  }

  /* ===== ファーストビュー ===== */
  .hero{padding:52px 0 48px;background:
    radial-gradient(circle at 82% 20%,rgba(138,90,43,.13),transparent 28%),
    linear-gradient(180deg,#FFFDF9 0%,var(--bg) 100%)}
  /* ★2026-08-30 に組み直した。写真は 3:4 の縦・実画面は 1000:340 の横で、
     形が正反対なので**同じ列に両方を入れると必ずどちらかが潰れる**。
     そこで左の列に「本文＋実画面」、右の列に「写真」を置き、写真は列いっぱいの
     高さを使う。以前は右カラム594pxに両方を押し込み、写真を高さ460pxに cover で
     切ったうえにカードを重ねていた。 */
  .hero-in{max-width:var(--wrap);margin:0 auto;padding:0 20px;display:grid;
    grid-template-columns:.62fr .38fr;grid-template-areas:"copy photo" "screen photo";
    column-gap:44px;row-gap:26px;align-items:start}
  .hero-copy{grid-area:copy;min-width:0}
  .hero-screen{grid-area:screen;min-width:0;margin:0}
  .hero-photo{grid-area:photo;align-self:center;margin:0}
  .hero-label{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:12.5px;color:var(--muted);margin-bottom:18px}
  .hero-label .pill{background:var(--sand);color:var(--umber);border-radius:999px;padding:5px 12px;font-weight:700}
  .hero h1{font-size:42px;line-height:1.22;letter-spacing:-.025em;margin:0 0 18px;font-weight:800}
  .hero h1 .accent{color:var(--brown)}
  .hero-lead{font-size:16px;color:#4A3B2C;margin:0 0 28px;max-width:650px}
  .hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
  .hero-trust{display:flex;flex-wrap:wrap;gap:16px;margin-top:20px;font-size:12.5px;color:var(--muted)}
  .hero-trust span::before{content:"✓";color:var(--brown);font-weight:800;margin-right:6px}
  /* ★キービジュアル：人物写真＋実画面のグラフ（2026-08-27／2026-08-30 に組み直し）。
     写真だけでは何の道具か伝わらず、画面だけでは固い。両方を出すのは変えていないが、
     **重ねるのをやめた。**
     ★★写真は 3:4（672×900）のまま出す。`max-height` で押し込むと人物が途中で切れる。
       幅だけを決めて残りは `aspect-ratio` に任せれば、どの画面幅でもトリミングされない。
     ★`height:auto` を落とさないこと。img の `height="900"` 属性が生きてしまい、
       `aspect-ratio` が無視されて900px角の枠になる（実際に一度そうなった）。 */
  .hero-kv-photo{display:block;width:100%;max-width:400px;height:auto;aspect-ratio:3/4;
    object-fit:cover;border-radius:22px;box-shadow:0 22px 55px rgba(68,43,20,.18);
    margin-left:auto}
  /* 実画面。3枚を重ねて、`is-on` の1枚だけを見せる（切り替えは ooya.html の末尾） */
  /* ★カードは大きめに。小さいと表の数字が読めず、画面を見せる意味が無くなる。 */
  .hero-kv-screen{position:relative;width:100%;
    aspect-ratio:1000/340;background:#fff;border:1px solid var(--line);border-radius:14px;
    padding:8px 10px;box-shadow:0 16px 40px rgba(68,43,20,.20)}
  .hero-kv-screen img{position:absolute;left:8px;right:8px;top:8px;bottom:8px;
    width:calc(100% - 16px);height:calc(100% - 16px);object-fit:contain;
    opacity:0;transition:opacity .7s ease}
  .hero-kv-screen img.is-on{opacity:1}
  @media (prefers-reduced-motion: reduce){
    .hero-kv-screen img{transition:none}
  }
  .hero-pts{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0}
  .hero-pts li{font-size:12.5px;font-weight:700;color:var(--brown-deep);
    background:var(--sand);border-radius:999px;padding:7px 13px}
  /* ★横に並べる余地が無くなったら縦に積む。順は 本文 → 実画面 → 写真。
     最初に見せるのは説明でも写真でもなく実際の画面、という並びを保つため。
     写真は中央に置き、ここでも 3:4 は崩さない。 */
  @media(max-width:1023px){
    .hero-in{grid-template-columns:1fr;grid-template-areas:"copy" "screen" "photo";row-gap:24px}
    .hero-photo{align-self:auto}
    .hero-kv-photo{max-width:320px;margin-inline:auto}
  }
  @media(max-width:767px){
    .hero-kv-photo{max-width:250px;border-radius:18px}
  }

  .hero-art{margin:0;background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:28px;padding:22px;box-shadow:0 22px 55px rgba(68,43,20,.13);backdrop-filter:blur(5px)}
  .hero-art svg{display:block;width:100%;height:auto}
  .hero-art figcaption{margin-top:10px;text-align:center;font-size:12px;color:var(--muted)}
  @media(max-width:1023px){.hero h1{font-size:36px}}
  @media(max-width:767px){
    .hero{padding:30px 0 26px}
    .hero h1{font-size:31px}
    .hero-cta .btn{width:100%}
  }

  /* ===== 画面のスクリーンショット（2026-08-27 追加）=====
     ★実画面を見せるための枠。ブラウザ風の細い帯 ＋ 影だけの素朴なもので、
       競合の端末モックの画像は使わない（意匠・商標の問題になるため）。
     ★画像は `/ooya/img/*.jpg`。`/ooya/app?sample=1` の実物を撮ったもの（合成データ）。
       画面を変えたら撮り直すこと。撮り方は HANDOFF_2026-08-27.md 9 節。 */
  .shot{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:16px;
    overflow:hidden;box-shadow:0 18px 46px rgba(68,43,20,.14)}
  .shot-bar{display:flex;gap:6px;align-items:center;padding:9px 12px;background:#F7F1E8;
    border-bottom:1px solid var(--line)}
  .shot-bar span{width:9px;height:9px;border-radius:50%;background:#DCC9AB}
  .shot img{display:block;width:100%;height:auto}
  .hero-shot{transform:translateZ(0)}
  /* ★スマホでは改行しない。狭い画面で入れると、行の途中で不自然に折れる。 */
  .br-desk{display:inline}
  @media(max-width:767px){.br-desk{display:none}}

  /* 帯（無料で見られることを1行で） */
  .band{background:var(--umber);color:#F2E9DE;text-align:center;
    padding:15px 20px;font-size:14px;font-weight:700;letter-spacing:.02em}

  /* 導入（何のツールか）＋ スマホ */
  .intro{display:grid;grid-template-columns:1.25fr .75fr;gap:44px;align-items:center}
  .intro h2{font-size:30px;line-height:1.35;letter-spacing:-.02em;margin:0 0 16px;font-weight:800}
  .intro-lead{font-size:15.5px;color:#4A3B2C;margin:0 0 22px}
  .point-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
  .point-list li{display:grid;grid-template-columns:104px 1fr;gap:14px;align-items:baseline;
    font-size:14px;color:#4A3B2C;padding-bottom:10px;border-bottom:1px solid var(--line)}
  .point-list b{color:var(--brown-deep);font-weight:800}
  .phone{margin:0;text-align:center}
  .phone img{width:100%;max-width:260px;height:auto;border-radius:22px;border:1px solid var(--line);
    box-shadow:0 18px 46px rgba(68,43,20,.16)}
  .phone figcaption{margin-top:10px;font-size:12px;color:var(--muted)}

  /* 見どころ（左右交互に画面を置く） */
  .points{background:linear-gradient(180deg,#FFFDF9,var(--bg))}
  .point{display:grid;grid-template-columns:.82fr 1.18fr;gap:44px;align-items:center;
    padding:44px 0;border-top:1px solid var(--line)}
  .point:first-child{border-top:0;padding-top:8px}
  .point.rev .point-tx{order:2}
  .point.rev .shot{order:1}
  .point-label{font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--brown);margin:0 0 10px}
  .point h3{font-size:27px;line-height:1.35;letter-spacing:-.02em;margin:0 0 14px;font-weight:800}
  .point p{font-size:14.5px;color:#4A3B2C;margin:0}

  /* 読み取れる書類 */
  .doc-grid{list-style:none;margin:22px 0 0;padding:0;display:grid;
    grid-template-columns:repeat(3,1fr);gap:14px}
  .doc-grid li{background:var(--surface);border:1px solid var(--line);border-radius:14px;
    padding:16px 18px;font-size:13px;color:var(--muted)}
  .doc-grid b{display:block;font-size:15px;color:var(--ink);margin-bottom:5px}
  .doc-grid.is-plain li{font-size:12.5px}

  /* 料金（3段） */
  /* ★プランは5段（無料2つ＋有料3つ）。狭い画面では1列に落とす。 */
  /* ★2026-09-02: 5枚 → 4枚（無料・非会員と会員Freeを Free に統合）。
     ★枚数を変えたら必ずここも直す。5列のままだと最後の1列が空いて、
       「もう1つプランがあるのに読み込めていない」ように見える。 */
  .price-tiers{list-style:none;margin:26px 0 0;padding:0;display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .price-tiers > li.is-free{background:var(--sand);border-style:dashed}
  .tier-cap{display:block;font-size:12px;color:var(--muted);margin:-6px 0 12px}
  .price-tiers > li{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px 18px;min-width:0}
  .price-tiers > li.is-mid{border-color:var(--brown);box-shadow:0 10px 30px rgba(138,90,43,.10)}
  .tier-name{font-size:13px;font-weight:800;color:var(--brown);margin:0 0 8px}
  .tier-price{margin:0 0 14px;color:var(--ink)}
  .tier-price b{font-size:28px;letter-spacing:-.02em}
  .tier-price small{font-size:12px;color:var(--muted);margin-left:4px}
  .price-tiers ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
  .price-tiers ul li{font-size:13px;color:#4A3B2C;padding-left:18px;position:relative}
  .price-tiers ul li::before{content:"✓";position:absolute;left:0;color:var(--brown);font-weight:800}
  .tier-note{margin-top:14px}
  @media(max-width:1100px){.price-tiers{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(max-width:640px){.price-tiers{grid-template-columns:1fr}}

  /* ===== 重複の候補の帯（収支ダッシュボード・2026-09-02）=====
     ★数字より先に読ませたいので、KPIの直前に出す。
     ★★警告色にしすぎない（重複は「候補」であって、間違いだと決まったわけではない）。 */
  .dash-dup{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 14px;
    padding:12px 14px;background:var(--warn-bg);border:1px solid var(--warn-line, var(--line));
    border-radius:12px}
  .dash-dup-tx{margin:0;font-size:13px;line-height:1.75;flex:1 1 320px;min-width:0}
  .dash-dup-acts{display:flex;gap:8px;flex-wrap:wrap}
  .dash-dup .btn.ghost{background:transparent}

  /* ===== 物件の共有（2026-09-02）=====
     オーナー側のパネル（物件一覧のカードの「共有」から開く）。 */
  .sh-panel{margin-top:14px}
  .sh-h{font-size:13px;font-weight:800;color:var(--brown-deep);margin:18px 0 8px}
  .sh-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
  .sh-list li{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--sand);
    border-radius:10px;font-size:13.5px}
  .sh-list li.is-revoked{opacity:.55}
  .sh-list li>span:first-child{flex:1 1 auto;min-width:0;display:grid;gap:2px}
  .sh-when{font-size:12px;color:var(--muted)}
  /* ★★作った直後の1回しか出ないリンク。目立たせて、閉じる前に渡してもらう。 */
  .sh-new{margin-top:14px;padding:14px;border:1px solid var(--brown);border-radius:12px;
    background:#FFFDF8}
  .sh-new p{margin:0 0 10px;font-size:13.5px;line-height:1.8}
  .sh-new input{width:100%;font-size:13px;padding:10px 12px;border:1px solid var(--line);
    border-radius:8px;background:var(--surface)}

  /* ===== 書類の一覧（#/documents・2026-09-02）=====
     ★横に長い表なので、**表だけ**を横スクロールにする（ページ全体は動かさない）。
     ★物件の列は貼り付ける（どの行を見ているか分からなくならないように）。
     ★空欄の「＋」は薄く。空欄が多いのは普通のことなので、赤や警告色を使わない
       （「未提出」に見せない）。 */
  .dg-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);
    border-radius:12px;background:var(--surface)}
  /* ★★1画面に**3か月**が収まる幅にしてある（2026-09-02・利用者の指示）。
     列を細くして4か月詰め込むより、**文字と印を大きく**して3か月のほうが読める。
     ★幅を変えるときは「物件190 ＋ 基本情報3列 ＋ 月3つ」が 1,250px に収まるか確かめること。 */
  .dg-table{border-collapse:separate;border-spacing:0;font-size:13.5px;white-space:nowrap}
  .dg-table th,.dg-table td{border-bottom:1px solid var(--line);padding:7px 6px;text-align:center}
  .dg-table thead th{background:var(--sand);font-weight:700;font-size:12.5px;color:var(--brown-deep);
    position:sticky;top:0;z-index:2}
  .dg-table thead tr:nth-child(2) th{top:30px}
  .dg-table .dg-group{border-left:2px solid var(--line)}
  .dg-table .dg-group.is-unknown{color:var(--muted)}
  .dg-table .dg-col{font-weight:600;color:var(--muted);width:56px;min-width:56px;max-width:56px;
    white-space:normal;line-height:1.35}
  /* ★基本情報の列だけ少し広い（「マイソク」が2行に折れないぶん）。広げすぎると3か月入らない。 */
  .dg-table .dg-col.is-base{width:66px;min-width:66px;max-width:66px}
  .dg-table th.dg-name{position:sticky;left:0;z-index:3;background:var(--surface);
    text-align:left;width:190px;min-width:190px;max-width:190px;white-space:normal;line-height:1.4}
  .dg-table thead th.dg-name{z-index:4;background:var(--sand)}
  .dg-mc{display:block;font-size:11.5px;color:var(--muted);font-weight:400}
  .dg-cell{width:56px;min-width:56px}
  .dg-item{border:0;background:transparent;cursor:pointer;font-size:18px;line-height:1;
    padding:3px 4px;border-radius:6px}
  /* ★★原本のない「登録あり」の印（✓）は**緑の太字**（2026-09-02・利用者の指示）。
     ★色だけで意味を伝えない（`title` に書類の名前と日付を必ず入れてある）。 */
  .dg-item:not(.has-file){color:var(--ok);font-weight:800;font-size:20px}
  .dg-item:hover{background:var(--sand)}
  .dg-item.is-excluded{opacity:.5}
  /* ★★2件以上は**件数**で出す。領収書は1か月に10枚以上届くことがあり、
     印を並べると読めないうえ、1マスが横に伸びて表が崩れる。 */
  .dg-count{display:inline-flex;align-items:center;gap:3px;border:0;background:transparent;
    cursor:pointer;border-radius:6px;padding:3px 5px;font-size:15px;line-height:1;color:var(--ok)}
  .dg-count .dg-n{font-size:14px;font-weight:800;color:var(--ink)}
  .dg-count:hover{background:var(--sand)}
  .dg-add{border:1px dashed var(--line);background:transparent;color:var(--muted);
    cursor:pointer;border-radius:6px;width:28px;height:28px;line-height:1;font-size:15px;padding:0}
  .dg-add:hover{border-color:var(--brown);color:var(--brown-deep);background:var(--sand)}
  /* ★★横に長い表なので、**進むボタン**を必ず置く（2026-09-02・利用者の指示）。
     スクロールできる手がかりが無いと「4月までしか無い」と読まれる
     （スマホの下部ナビで一度踏んだのと同じ形）。 */
  .dg-nav{display:flex;align-items:center;gap:8px;margin:0 0 8px}
  .dg-nav .dg-range{font-size:12.5px;color:var(--muted)}
  .dg-nav button{border:1px solid var(--line);background:var(--surface);color:var(--brown-deep);
    border-radius:8px;width:34px;height:30px;line-height:1;cursor:pointer;font-size:14px;padding:0}
  .dg-nav button:hover:not(:disabled){background:var(--sand);border-color:var(--brown)}
  .dg-nav button:disabled{opacity:.35;cursor:default}
  .dg-form{margin-top:14px}
  .dg-notice{margin:0 0 12px;font-size:13.5px;line-height:1.8}
  .dg-note{margin-top:12px;background:var(--sand);border-radius:10px;padding:10px 12px}
  /* 1つの欄の中身（件数を押したときに出る一覧） */
  .dg-list{margin-top:14px}
  .dgl{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
  .dgl li{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--sand);
    border-radius:10px;font-size:13.5px}
  .dgl li.is-excluded{opacity:.6}
  .dgl li > span:first-child{flex:1 1 auto;min-width:0}
  .dgl-who{margin-left:8px;color:var(--muted);font-size:12.5px}
  .dgl-date{color:var(--muted);font-size:12.5px}
  .dgl-nofile{margin-left:8px;font-size:11.5px;color:var(--muted)}
  .dg-file{display:flex;align-items:center;gap:10px;margin:10px 0 0}
  @media(max-width:767px){
    .dg-table th.dg-name{min-width:120px}
    .dg-table .dg-col{max-width:72px}
  }

  /* ===== プランごとにできること（比較表）=====
     ★狭い画面では横に溢れるので、**表だけ**を横スクロールにする（ページ全体は動かさない）。
     ★項目の列は貼り付けて、どの列を見ているか分からなくならないようにする。 */
  .plan-h{font-size:17px;font-weight:800;margin:34px 0 0}
  .plan-table-wrap{margin:26px 0 0;overflow-x:auto;-webkit-overflow-scrolling:touch;
    border:1px solid var(--line);border-radius:16px;background:var(--surface)}
  .plan-table{border-collapse:separate;border-spacing:0;width:100%;min-width:760px;font-size:13px}
  .plan-table th,.plan-table td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:center;
    vertical-align:middle}
  .plan-table thead th{position:sticky;top:0;background:var(--sand);font-size:12px;font-weight:800;
    color:var(--umber);line-height:1.5;z-index:2}
  .plan-table thead th small{display:block;font-weight:700;color:var(--muted);font-size:11px}
  .plan-table th[scope="row"]{position:sticky;left:0;background:var(--surface);text-align:left;
    font-weight:600;color:var(--ink);min-width:200px;z-index:1}
  .plan-table tbody tr:last-child th,.plan-table tbody tr:last-child td{border-bottom:0}
  .plan-table .cat th{background:var(--sand);text-align:left;font-size:12px;font-weight:800;
    color:var(--brown-deep);letter-spacing:.04em;position:sticky;left:0;z-index:1}
  .plan-yes{color:var(--ok);font-weight:800}
  .plan-no{color:#B9AC9A}
  .plan-soon{font-size:11.5px;font-weight:700;background:#EFE7DA;color:var(--muted);
  border-radius:999px;padding:2px 9px;white-space:nowrap;display:inline-block}
.plan-lim{font-size:12px;color:var(--muted);line-height:1.5;display:inline-block}
  .plan-scroll-hint{font-size:12px;color:var(--muted);margin:8px 2px 0}
  @media(min-width:1101px){.plan-scroll-hint{display:none}}

  /* 書類の保管 */
  .docs-keep{background:linear-gradient(180deg,var(--bg),#FFFDF9)}
  .keep-grid{list-style:none;margin:24px 0 0;padding:0;display:grid;
    grid-template-columns:repeat(2,1fr);gap:16px}
  .keep-grid li{background:var(--surface);border:1px solid var(--line);border-radius:16px;
    padding:20px 22px;font-size:13.5px;line-height:1.9;color:#4A3B2C}
  /* ★見出しの b だけを block に。全部の b に掛けると、文中の強調まで改行される（実際にそうなった）。 */
  .keep-grid li > b:first-child{display:block;font-size:15.5px;color:var(--ink);margin-bottom:6px}
  .keep-grid li.is-accent{border-color:var(--brown);box-shadow:0 10px 30px rgba(138,90,43,.10)}
  .keep-grid li.is-accent > b:first-child{color:var(--brown-deep)}
  .keep-note{margin-top:16px}
  @media(max-width:767px){.keep-grid{grid-template-columns:1fr}}

  /* 書類の一覧（表の読み方・2026-09-02）
     ★★画面の記号（✓ と ＋ と空欄）の意味をここで言い切る。表の写真だけを置くと、
       いちばん効く「空欄は未登録であって、届いていないとは限らない」が伝わらない。 */
  .doc-note{list-style:none;margin:20px 0 0;padding:0;display:grid;
    grid-template-columns:repeat(3,1fr);gap:14px}
  .doc-note li{background:var(--surface);border:1px solid var(--line);border-radius:14px;
    padding:16px 18px;font-size:13px;line-height:1.85;color:#4A3B2C}
  .doc-note li > b:first-child{display:block;font-size:14.5px;color:var(--brown-deep);margin-bottom:4px}
  @media(max-width:900px){.doc-note{grid-template-columns:1fr}}

  /* 共有（2026-09-02）
     ★★2枚のカードは**できることの広さが違う**。並べる以上、見た目でも差を付ける
       （家族のほうが広いので枠を強調する）。同じ見た目で並べると「どちらも共有」に見える。 */
  .share-sec{background:linear-gradient(180deg,#FFFDF9,var(--bg))}
  .share-cards{list-style:none;margin:24px 0 0;padding:0;display:grid;
    grid-template-columns:repeat(2,1fr);gap:16px}
  .share-cards li{background:var(--surface);border:1px solid var(--line);border-radius:16px;
    padding:22px 24px}
  .share-cards li.is-accent{border-color:var(--brown);box-shadow:0 10px 30px rgba(138,90,43,.10)}
  .share-who{font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--brown);margin:0 0 8px}
  .share-cards li > b{display:block;font-size:19px;line-height:1.45;letter-spacing:-.01em;
    color:var(--ink);margin-bottom:10px}
  .share-cards span{display:block;font-size:13.5px;line-height:1.9;color:#4A3B2C}
  .share-sec .shot{margin-top:22px}
  @media(max-width:767px){.share-cards{grid-template-columns:1fr}
    .share-cards li > b{font-size:17px}}

  /* 使い方 */
  .steps{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .steps li{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;
    font-size:13px;color:var(--muted)}
  .steps .no{display:inline-flex;width:30px;height:30px;border-radius:50%;background:var(--brown);
    color:#fff;font-weight:800;align-items:center;justify-content:center;font-size:14px;margin-bottom:12px}
  .steps b{display:block;font-size:16px;color:var(--ink);margin-bottom:6px}

  @media(max-width:1023px){
    .intro,.point{grid-template-columns:1fr;gap:26px}
    .point.rev .point-tx,.point.rev .shot{order:0}
    .doc-grid,.steps{grid-template-columns:repeat(2,1fr)}
    .intro h2{font-size:25px}.point h3{font-size:23px}
  }
  @media(max-width:767px){
    .doc-grid,.steps{grid-template-columns:1fr}
    .point{padding:30px 0}
    .point-list li{grid-template-columns:1fr;gap:2px}
    .band{font-size:13px}
  }

  /* ===== できること（1行 × 5つ・2026-09-01）=====
     ★説明文を持たせない。ヤモリ /ownerapp と同じで、何ができるかは
       読ませるより一覧で見せたほうが速い。行を増やすより、行を短くする。 */
  .pointlist{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:0}
  .pointlist li{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:baseline;
    padding:13px 0;border-top:1px solid var(--line);font-size:16px;font-weight:700;color:var(--ink)}
  .pointlist li:last-child{border-bottom:1px solid var(--line)}
  .pointlist span{font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--brown)}
  @media(max-width:640px){
    .pointlist li{grid-template-columns:1fr;gap:3px;padding:11px 0;font-size:15px}
  }

  /* ===== 物件調査ツール4つ（2026-09-01）=====
     ★工程のラベル（探す／土地を確かめる／収支を試す／退去のたびに）を先に読ませる。
     ★4枚目（原状回復チェック）は「買ったあと」の道具なので、色を変えて分ける。 */
  .tools-sec{background:var(--sand);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  /* ★2列にしてある。4列だとカード幅が約270pxになり、実画面のサムネイルが
     「灰色の塊」にしか見えない（1枚目は4列で作って読めなかった）。 */
  .tool-cards{list-style:none;margin:24px 0 0;padding:0;display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .tool-cards li{background:var(--surface);border:1px solid var(--line);border-radius:16px;
    padding:0 0 18px;display:flex;flex-direction:column;gap:7px;min-width:0;overflow:hidden}
  .tool-cards li > :not(.tool-shot){margin-left:18px;margin-right:18px}
  /* ★実画面のサムネイル。カードごとに高さが変わると4枚が揃わないので比率で固定する */
  .tool-shot{margin:0 0 12px;background:#F3EFE9;border-bottom:1px solid var(--line)}
  .tool-shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
    object-position:left top}
  .tool-step{margin:14px 0 0;font-size:11.5px;font-weight:800;letter-spacing:.06em;color:var(--brown);
    background:var(--sand);border-radius:999px;padding:4px 10px;align-self:flex-start}
  .tool-cards li > b{font-size:18px;color:var(--ink);line-height:1.4}
  .tool-cards li > span{font-size:13px;color:#4A3B2C;line-height:1.75;flex:1 1 auto}
  .tool-cards li > a{align-self:flex-start;margin-top:4px;font-size:13px;font-weight:700;
    color:var(--brown-deep);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
  .tool-cards li > a::after{content:" →"}
  .tool-cards li > a:hover{border-bottom-color:var(--brown)}
  .tool-cards li.is-after{border-color:var(--brown);box-shadow:0 10px 30px rgba(138,90,43,.10)}
  .tool-cards li.is-after .tool-step{background:var(--brown);color:#fff}
  .tools-note{margin-top:16px}
  @media(max-width:767px){.tool-cards{grid-template-columns:1fr}}

  /* 経営台帳への橋渡し（Point 1〜4 の前置き） */
  .point-intro{max-width:720px;margin:0 0 8px}
  .point-intro h2{margin-bottom:12px}

  /* 「いまできること」3つ（旧・使い方3ステップ） */
  /* ★リンクは行を変える。本文の続きに置くと、説明の一部に見えて押されない */
  .steps li a{display:block;width:fit-content;margin-top:12px;font-size:13px;font-weight:700;
    color:var(--brown-deep);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
  .steps li a::after{content:" →"}
  .steps li a:hover{border-bottom-color:var(--brown)}

  /* 折りたたみ（比較表・書類の保管・解約） */
  details.plan-fold,details.keep-fold,details.tier-fold{margin-top:18px;border:1px solid var(--line);
    border-radius:12px;background:var(--surface)}
  details.plan-fold>summary,details.keep-fold>summary,details.tier-fold>summary{
    cursor:pointer;padding:14px 16px;font-size:14px;font-weight:700;color:var(--ink);list-style:none}
  details.plan-fold>summary::-webkit-details-marker,
  details.keep-fold>summary::-webkit-details-marker,
  details.tier-fold>summary::-webkit-details-marker{display:none}
  details.plan-fold>summary::before,details.keep-fold>summary::before,
  details.tier-fold>summary::before{content:"＋ ";color:var(--brown)}
  details.plan-fold[open]>summary::before,details.keep-fold[open]>summary::before,
  details.tier-fold[open]>summary::before{content:"− "}
  details.plan-fold>*:not(summary),details.keep-fold>*:not(summary),
  details.tier-fold>*:not(summary){margin-left:16px;margin-right:16px}
  details.plan-fold>*:last-child,details.keep-fold>*:last-child,
  details.tier-fold>*:last-child{margin-bottom:16px}
  details.keep-fold .keep-grid{margin-top:4px}

  /* 停止の案内（料金の節の先頭） */
  .tier-note.is-lead{font-size:13px;color:#4A3B2C;background:var(--sand);
    border-left:3px solid var(--brown);border-radius:0 10px 10px 0;padding:12px 16px;margin-top:16px}

  /* 末尾のCTA */
  .cta-band{background:var(--umber);color:#F2E9DE;text-align:center}
  .cta-band h2{color:#fff}
  .cta-band .section-note{color:#C4B29A}
  .cta-band .hero-cta{justify-content:center;margin-top:20px}
  /* ★濃い背景の上では、褐色のボタンはコントラストが足りない。白地に反転する */
  .cta-band .btn:not(.sub){background:#fff;color:var(--umber);border-color:#fff}
  .cta-band .btn:not(.sub):hover{background:#F2E9DE;border-color:#F2E9DE}
  .cta-band .btn.sub{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
  .cta-band .btn.sub:hover{background:rgba(255,255,255,.10)}

  /* ===== 価値の要約バー ===== */
  .strip{background:var(--umber);color:#F2E9DE}
  .strip-in{max-width:var(--wrap);margin:0 auto;padding:22px 20px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
  .strip b{display:block;font-size:17px;font-weight:800;color:#fff}
  .strip span{font-size:12px;color:#C4B29A}
  @media(max-width:767px){.strip-in{grid-template-columns:1fr 1fr;gap:16px}}

  /* ===== セクション・ワークスペース ===== */
  .section{padding:56px 0}
  .section-label{font-size:11.5px;letter-spacing:.18em;color:var(--brown);font-weight:800;margin:0 0 10px}
  .section h2{font-size:29px;font-weight:800;margin:0 0 10px;letter-spacing:-.01em}
  .section-note{color:var(--muted);font-size:13.5px;margin:0}
  .ws{margin-top:26px;display:grid;grid-template-rows:auto 1fr;gap:0;background:var(--surface);
    border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:var(--shadow)}
  .ws-side{background:#F8F3EC;border-bottom:1px solid var(--line);padding:20px 24px 16px}
  .stepper{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
  .stepper li{display:flex;gap:10px;align-items:center;padding:0 18px 0 0;position:relative;min-width:0}
  .stepper li:last-child{padding-right:0}
  .stepper li::after{content:"";position:absolute;left:34px;right:4px;top:13px;height:2px;background:var(--line)}
  .stepper li:last-child::after{display:none}
  .stepper .no{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:#fff;border:2px solid var(--line);
    color:var(--muted);font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;z-index:1}
  .stepper .tx{z-index:1;background:#F8F3EC;padding-right:7px;min-width:0}
  .stepper .tx b{display:block;font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap}
  .stepper .tx span{font-size:10.5px;color:#96856F;white-space:nowrap}
  .stepper .is-current .no{background:var(--brown);border-color:var(--brown);color:#fff}
  .stepper .is-current .tx b{color:var(--ink)}
  .stepper .is-done .no{background:var(--sand);border-color:var(--brown);color:var(--brown-deep)}
  .stepper .is-done .tx b{color:var(--umber)}
  .ws-privacy{margin:14px 0 0 38px;font-size:11px;color:var(--muted);line-height:1.6}
  .ws-main{padding:26px}
  @media(max-width:1023px){
    .ws-side{padding:18px}
    .stepper li{padding-right:8px;flex-direction:column;align-items:flex-start;gap:6px}
    .stepper li::after{left:30px;right:4px}
    .stepper .tx{padding-right:3px}
    .stepper .tx span{display:none}
    .ws-privacy{display:none}
    .ws-main{padding:18px}
  }

  /* 書類の種類を選ぶ */
  .doc-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px;counter-reset:docs}
  .doc-pick button{font:inherit;text-align:left;background:var(--surface);border:1.5px solid var(--line);
    border-radius:16px;padding:42px 15px 14px;cursor:pointer;color:var(--ink);min-height:112px;position:relative;transition:transform .15s,box-shadow .15s,border-color .15s}
  .doc-pick button::before{counter-increment:docs;content:counter(docs,decimal-leading-zero);position:absolute;left:15px;top:13px;color:var(--brown);font-size:12px;font-weight:800;letter-spacing:.08em}
  .doc-pick button::after{content:"";position:absolute;right:14px;top:14px;width:20px;height:20px;border:1.5px solid #CDBA9C;border-radius:50%;background:#fff}
  .doc-pick button:hover{background:#FFFCF8;border-color:#CDBA9C;transform:translateY(-2px);box-shadow:0 8px 18px rgba(68,43,20,.08)}
  .doc-pick button[aria-pressed="true"]{border-color:var(--brown);background:var(--sand);box-shadow:0 0 0 3px rgba(138,90,43,.12)}
  .doc-pick button[aria-pressed="true"]::after{background:var(--brown);border:5px solid #fff;box-shadow:0 0 0 1.5px var(--brown)}
  .doc-pick b{display:block;font-size:14px;font-weight:800;margin-bottom:3px;line-height:1.45}
  .doc-pick span{font-size:11.5px;color:var(--muted);line-height:1.5;display:block}
  @media(max-width:1000px){.doc-pick{grid-template-columns:1fr 1fr}}
  @media(max-width:420px){.doc-pick{grid-template-columns:1fr}}

  /* 初期状態 */
  .drop{display:block;border:2px dashed #D3BE9D;border-radius:18px;background:#FDFBF8;padding:40px 24px;text-align:center;cursor:pointer}
  .drop.drag{border-color:var(--brown);background:var(--sand)}
  .drop input[type=file]{display:none}
  .drop .ic{width:60px;height:60px;margin:0 auto 14px;display:block}
  .drop .t{font-size:17px;font-weight:800;margin-bottom:6px}
  .drop .s{font-size:13px;color:var(--muted)}
  .idle-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:20px}
  .idle-hint{margin:16px auto 0;max-width:560px;text-align:center;font-size:12.5px;color:var(--muted)}
  .idle-safe{margin:18px auto 0;max-width:600px;background:var(--sand);border-radius:12px;padding:10px 14px;
    text-align:center;font-size:12px;color:var(--umber)}
  .cam-only{display:none}
  @media(max-width:767px){.cam-only{display:block}.drop{padding:26px 16px}.idle-cta .btn{width:100%}}
  /* ★`pc-only` は「スマホで撮影（QR中継）」。**`display` を指定しない**で隠すだけにする。
     `.btn` の素の display（inline-flex）を block に置き換えると、物件フォームの中で
     ボタンが1行を占めて並びが崩れる。 */
  @media(max-width:767px){.pc-only{display:none}}

  /* スマホで撮影（PCからスマホのカメラを借りる）。★/receipt の同じ画面に合わせてある */
  .scan-modal{max-width:420px;text-align:center}
  .scan-modal h2{text-align:center}
  .scan-modal .sub{text-align:center}
  #qrBox{display:inline-block;padding:10px;background:#fff;border:1px solid var(--line);
    border-radius:12px;min-width:190px;min-height:190px}
  #qrBox img,#qrBox canvas{display:block}
  .qr-fallback{padding:24px;font-size:12px;color:var(--muted);margin:0}
  .scan-link{display:block;margin-top:10px;font-size:12px;word-break:break-all;color:var(--brown-deep)}
  .scan-state{display:inline-flex;align-items:center;gap:8px;border-radius:999px;
    padding:6px 14px;font-size:13px;font-weight:700;margin-top:12px}
  .scan-state::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor}
  .s-wait{background:var(--warn-bg);color:#7A5405}
  .s-ready,.s-recv{background:#E7F3EC;color:#1F6E52}
  .s-expired,.s-error{background:var(--danger-bg);color:#8C1D18}
  .scan-count{margin:6px 0 0;font-size:12.5px;color:var(--muted)}
  .scan-acts{margin-top:14px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
  .scan-ttl{margin:10px 0 0;font-size:11px;color:var(--muted);line-height:1.7;text-align:left}

  /* 進行中 */
  .prog{list-style:none;margin:0;padding:0}
  .prog li{display:flex;gap:10px;align-items:center;padding:11px 0;font-size:14px;color:var(--muted);border-bottom:1px solid #F1EAE0}
  .prog li:last-child{border-bottom:0}
  .prog .mk{width:22px;text-align:center;font-weight:800}
  .prog li.active{color:var(--ink);font-weight:700}
  .prog li.active .mk{color:var(--brown)}
  .prog li.done{color:var(--umber)}
  .prog li.done .mk{color:var(--brown)}
  .prog-note{margin:14px 0 0;font-size:12.5px;color:var(--muted)}

  /* 確認 */
  .rev-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:18px}
  .rev-head .ok{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--sand);color:var(--brown-deep);
    display:flex;align-items:center;justify-content:center;font-weight:800}
  .rev-head b{display:block;font-size:16px}
  .rev-head span{font-size:12.5px;color:var(--muted)}
  .badge-sample{margin-left:8px;background:var(--warn-bg);color:#7A5405;border:1px solid #F0DFB4;
    border-radius:999px;padding:3px 10px;font-size:11px;font-weight:800}
  .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
  /* ★4つ横並びなので、ラベルも数字も折り返させない（「仕訳の金／額」と割れて読めなくなる）。
     数字が長い月でも収まるよう、狭いときは縦積みに落とす。 */
  .tile{background:#FBF7F1;border:1px solid var(--line);border-radius:14px;padding:14px 16px;
    display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
  .tile .k{font-size:12px;color:var(--muted);white-space:nowrap}
  .tile .v{font-size:21px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;margin-left:auto}
  .tile .v small{font-size:12px;font-weight:700;color:var(--muted);margin-left:3px}
  .tile.is-warn{background:var(--warn-bg);border-color:#F0DFB4}
  .tile.is-warn .v{color:#7A5405}
  @media(max-width:900px){.tiles{grid-template-columns:1fr 1fr}}
  /* ★とても狭い画面（〜420px）は2列に入らない。金額は桁が多く `white-space:nowrap` なので、
     列を減らすほうが読める（文字を小さくして詰めない。9桁になると読めなくなる）。 */
  @media(max-width:420px){.tiles{grid-template-columns:1fr}}

  .rv-row{border:1px solid var(--line);border-left:4px solid #CDBA9C;border-radius:14px;margin-bottom:10px;background:#fff;overflow:hidden;box-shadow:0 3px 10px rgba(35,26,18,.035)}
  .rv-row.st-needs_review{border-color:#EBD8A6;background:var(--warn-bg)}
  .rv-row.st-failed{border-color:#F0CFCC;background:var(--danger-bg)}
  .rv-head{width:100%;display:grid;grid-template-columns:48px minmax(210px,1fr) 130px 118px 108px 18px;gap:14px;align-items:center;
    background:none;border:0;padding:15px 16px;cursor:pointer;text-align:left;font-family:inherit;font-size:14px;color:inherit}
  .rv-thumb{width:44px;height:44px;object-fit:cover;border-radius:8px;background:#F1EAE0;border:1px solid var(--line)}
  .rv-main b{display:block;font-weight:800;font-size:15px;line-height:1.4}
  .rv-main span{font-size:12px;color:var(--muted)}
  .rv-cat{font-size:13px;color:var(--muted)}
  .rv-amt{font-size:17px;font-weight:800;text-align:right;font-variant-numeric:tabular-nums;color:var(--umber)}
  .rv-st{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
  .tag{font-size:11px;font-weight:800;border-radius:999px;padding:3px 10px;white-space:nowrap}
  .t-reviewed{background:var(--ok-bg);color:var(--ok)}
  .t-unreviewed{background:#F2EEE8;color:var(--muted)}
  .t-needs_review{background:#F6E7BE;color:#7A5405}
  .t-failed{background:#F6D6D3;color:#8C1D18}
  .save{font-size:10.5px;color:var(--muted)}
  .save.s-ok{color:var(--ok)}
  .save.s-err{color:var(--danger)}
  .rv-caret{color:var(--muted);transition:transform .15s}
  .rv-row.is-open .rv-caret{transform:rotate(180deg)}
  .rv-edit{padding:4px 14px 16px;border-top:1px solid var(--line)}
  .rv-why{margin:12px 0;padding:10px 14px;background:#fff;border:1px solid #EBD8A6;border-radius:10px;font-size:12.5px;color:#7A5405}
  .rv-why ul{margin:6px 0 0;padding-left:18px}
  .rv-err{margin:12px 0;font-size:13px;color:#8C1D18}
  .rv-note{margin:12px 0 0;padding:10px 14px;background:#F7F3ED;border:1px solid var(--line);border-radius:10px;font-size:12.5px;color:var(--muted)}
  .rv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:12px}
  .rv-f label{display:block;font-size:11.5px;color:var(--muted);margin-bottom:4px;font-weight:600}
  .rv-f input,.rv-f select,.rv-f textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-size:14px;
    font-family:inherit;color:var(--ink);background:#fff;min-height:40px}
  .rv-f input:focus,.rv-f select:focus{outline:none;border-color:var(--brown);box-shadow:0 0 0 3px rgba(138,90,43,.14)}
  .rv-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
  .rv-badges{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
  .bdg{display:inline-block;font-size:10.5px;font-weight:700;border-radius:9px;padding:2px 7px;border:1px solid transparent;line-height:1.5}
  .bdg.b-prop{background:var(--sand);color:var(--brown-deep);border-color:#DFC9A9}
  .bdg.b-split{background:#EEF3FF;color:#2A4B9B;border-color:#C9D8F5}
  .bdg.b-capex{background:var(--warn-bg);color:var(--warn);border-color:#EEDDA8}
  .bdg.b-doc{background:#F1EAE0;color:var(--muted);border-color:var(--line)}
  @media(max-width:767px){
    .rv-head{grid-template-columns:44px 1fr auto;grid-template-areas:"th main st" "th cat amt";row-gap:4px}
    .rv-thumb{grid-area:th}.rv-main{grid-area:main}.rv-cat{grid-area:cat}.rv-amt{grid-area:amt}.rv-st{grid-area:st}
    .rv-caret{display:none}
  }

  /* 仕訳の行 */
  .jl{width:100%;border-collapse:collapse;font-size:13px;margin-top:10px}
  .jl th,.jl td{border-bottom:1px solid var(--line);padding:7px 8px;text-align:left;vertical-align:middle}
  .jl th{font-size:11.5px;color:var(--muted);font-weight:600;white-space:nowrap}
  .jl td input,.jl td select{font:inherit;font-size:13px;padding:6px 8px;border:1px solid var(--line);
    border-radius:8px;background:var(--surface);color:var(--ink);max-width:100%;width:100%}
  .jl td.num{text-align:right;font-variant-numeric:tabular-nums}
  .jl-sum{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;margin:8px 0}
  .jl-sum b{font-variant-numeric:tabular-nums}
  .jl-sum .gap{color:var(--danger);font-weight:700}
  .jl-sum .gap.is-ok{color:var(--ok)}
  .scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* 按分パネル */
  .alloc{border:1px solid var(--line);border-radius:12px;padding:12px;margin:10px 0;background:#FBF7F1}
  .alloc h4{margin:0 0 8px;font-size:13px}
  .alloc-row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:8px}
  .alloc-row label{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--muted)}
  .alloc-row select,.alloc-row input{font:inherit;font-size:13.5px;padding:8px 10px;border:1px solid var(--line);
    border-radius:9px;background:var(--surface);color:var(--ink);min-height:38px}
  .alloc-list{list-style:none;margin:6px 0 0;padding:0}
  .alloc-list li{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px dashed #EAE0D2;font-size:13px}
  .alloc-list li:last-child{border-bottom:0}
  .alloc-list .nm{flex:1}
  .alloc-list .amt{font-variant-numeric:tabular-nums;font-weight:700}
  .alloc-list input{width:120px;text-align:right;font:inherit;font-size:13px;padding:5px 8px;
    border:1px solid var(--line);border-radius:8px}

  /* 資本的支出の候補 */
  .capex{border:1px solid #EEDDA8;background:var(--warn-bg);border-radius:12px;padding:12px;margin:10px 0}
  .capex h4{margin:0 0 6px;font-size:13px;color:#7A5405}
  .capex ul{margin:6px 0;padding-left:18px;font-size:12.5px;color:#5F4406}
  .capex li{margin-bottom:5px}
  .capex .src{color:var(--muted);font-size:11px}
  .capex-pick{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
  .capex-note{font-size:11.5px;color:var(--muted);margin:6px 0 0}

  /* ===== カード型セクション ===== */
  .card-box{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:var(--shadow)}
  .card-top{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:14px}
  .card-top h3{margin:0;font-size:17px}
  .card-count{font-size:12.5px;color:var(--muted)}
  .warn-box{background:var(--warn-bg);border:1px solid #F0DFB4;border-radius:12px;padding:14px 16px;margin-bottom:16px;font-size:12.5px;color:#5F4406}
  .warn-box b{color:#7A5405}
  details.panel{margin-top:14px;border:1px solid var(--line);border-radius:12px;background:#FBF7F1}
  details.panel>summary{cursor:pointer;padding:12px 16px;font-size:13.5px;font-weight:700;list-style:none}
  details.panel>summary::-webkit-details-marker{display:none}
  details.panel>summary::before{content:"＋ ";color:var(--brown)}
  details.panel[open]>summary::before{content:"− "}
  details.panel .inner{padding:0 16px 16px}
  .hint{font-size:12px;color:var(--muted);line-height:1.8}

  /* 物件マスタ */
  /* ★`min(280px,100%)`。素の `minmax(280px,1fr)` は器が280pxより狭いときに
     はみ出す（列は縮まない）。小さいスマホでページが横スクロールになる原因だった。 */
  .prop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:14px}
  .prop-card{border:1px solid #DCC9AB;border-top:5px solid var(--brown);border-radius:16px;padding:17px 18px;background:linear-gradient(145deg,#FFF 0%,#FBF4E9 100%);box-shadow:0 8px 20px rgba(68,43,20,.07);position:relative}
  .prop-card::after{content:"物件";position:absolute;right:16px;top:14px;font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--brown);background:var(--sand);border-radius:999px;padding:3px 8px}
  .prop-card h4{margin:0 52px 5px 0;font-size:17px;line-height:1.45}
  .prop-card .meta{font-size:12px;color:var(--muted);margin-bottom:8px}
  .prop-card .nums{display:flex;flex-wrap:wrap;gap:6px;font-size:11.5px;color:var(--umber)}
  .prop-card .nums span{background:#fff;border:1px solid var(--line);border-radius:7px;padding:3px 7px}
  .prop-card .acts{display:flex;gap:8px;margin-top:10px}
  .prop-empty{border:2px dashed #D3BE9D;border-radius:14px;padding:28px 20px;text-align:center;color:var(--muted);font-size:13.5px}
  .form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:12px}
  .form-grid label{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--muted);font-weight:600}
  .form-grid input,.form-grid select,.form-grid textarea{font:inherit;font-size:14px;padding:9px 11px;
    border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);min-height:40px}
  .form-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}

  /* 損益 */
  .rep-table{width:100%;border-collapse:collapse;font-size:13.5px}
  .rep-table th,.rep-table td{border-bottom:1px solid var(--line);padding:9px 10px;text-align:left}
  .rep-table th{font-size:12px;color:var(--muted);font-weight:600}
  /* ★折り返さないのは**見出し行だけ**。tbody の <th>（項目名の列）にも掛けると、
     「少額減価償却資産の特例（40万円未満）」のような長い名前が1行に伸びて、
     狭い画面で表が器を突き破る（320pxで実測 311px）。 */
  .rep-table thead th{white-space:nowrap}
  .rep-table td.num,.rep-table th.num{text-align:right;font-variant-numeric:tabular-nums}
  .rep-table tr.total td{font-weight:800;border-top:2px solid var(--line);background:#FBF7F1}
  .rep-table td.neg{color:var(--danger)}
  .rep-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-bottom:14px}
  .rep-bar label{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--muted)}
  .rep-bar select{font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:#fff;min-height:40px}
  .kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
  @media(max-width:900px){.kpi{grid-template-columns:1fr 1fr}}
  /* ★`.tiles` と同じ理由で、とても狭い画面は1列に落とす（金額は折り返せない）。 */
  @media(max-width:420px){.kpi{grid-template-columns:1fr}}

  /* 集計のタブ（支出／収入／突合）*/
  .rep-tabs{display:flex;flex-wrap:wrap;gap:6px;border-bottom:2px solid var(--line);margin:0 0 18px}
  .rep-tabs button{font:inherit;font-size:14px;font-weight:700;color:var(--muted);background:none;border:0;
    border-bottom:3px solid transparent;margin-bottom:-2px;padding:10px 14px;cursor:pointer;
    display:inline-flex;align-items:center;gap:7px;min-height:44px}
  .rep-tabs button:hover{color:var(--ink)}
  .rep-tabs button[aria-selected="true"]{color:var(--brown-deep);border-bottom-color:var(--brown)}
  /* ★色だけで意味を伝えない。件数の語を必ず添える（rt-badge の中身は「◯件」）。 */
  .rep-tabs .rt-badge{font-size:11.5px;font-weight:800;background:var(--warn-bg);color:var(--warn);
    border:1px solid #E6D3A5;border-radius:999px;padding:1px 8px;font-variant-numeric:tabular-nums}
  .rep-tabs button[aria-selected="true"] .rt-badge{background:#F6ECDF;border-color:#DCC3A0;color:var(--brown-deep)}

  /* 並び替えのできる見出し */
  .rep-table th.sortable{cursor:pointer;user-select:none}
  .rep-table th.sortable button{font:inherit;font-size:12px;color:inherit;font-weight:600;background:none;
    border:0;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
  .rep-table th.sortable .ar{font-size:10px;color:var(--brown)}
  .rep-table th[aria-sort="none"] .ar{opacity:.3}
  .rep-table tr.sub td{background:#FCFAF6}
  .rep-table td.mth{white-space:nowrap;font-variant-numeric:tabular-nums}

  /* 突合 */
  .rc-group{border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:16px;background:#fff}
  .rc-group>h4{margin:0 0 4px;font-size:15px}
  .rc-group>p.rc-lead{margin:0 0 12px;font-size:12.5px;color:var(--muted)}
  .rc-group.is-dup{border-color:#E6D3A5;background:var(--warn-bg)}
  .rc-pair{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px;background:#fff}
  .rc-sides{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  @media(max-width:720px){.rc-sides{grid-template-columns:1fr}}
  .rc-side{border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13px}
  .rc-side .who{font-weight:700;display:block;margin-bottom:2px}
  .rc-side .meta{display:block;color:var(--muted);font-size:12px;line-height:1.6}
  .rc-side .amt{display:block;margin-top:4px;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
  .rc-side.is-out{background:#F6F3EE;color:var(--muted)}
  .rc-why{margin:10px 0 0;padding-left:18px;font-size:12px;color:var(--muted)}
  .rc-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
  .rc-empty{font-size:13px;color:var(--muted);margin:0}

  /* 確認モーダルの本文は複数行を出す（何件が上書きされるかを並べるため）*/
  #confirmBody{white-space:pre-line;text-align:left}
  /* ★退避した版・上書きされた版の中身（2026-08-30）。**生のJSONを見せないための表。**
     ★`#confirmBody` が `white-space:pre-line` なので、ここで戻さないと
     組み立てたHTMLの改行がそのまま空行になる。 */
  .rec-lead{white-space:normal;margin:0 0 12px;font-size:13px;color:#4A3B2C;line-height:1.7}
  .rec-view{white-space:normal;max-height:min(52vh,400px);overflow:auto;margin:0 0 16px;
    border:1px solid var(--line);border-radius:12px;background:#FBF7F1}
  .rec-view table{width:100%;border-collapse:collapse;font-size:13px}
  .rec-view caption{caption-side:top;text-align:left;padding:10px 12px 4px;
    font-size:12px;font-weight:700;color:var(--brown-deep)}
  .rec-view th,.rec-view td{padding:7px 12px;text-align:left;vertical-align:top;
    border-bottom:1px solid var(--line)}
  .rec-view th{width:38%;font-weight:600;color:var(--muted)}
  .rec-view td{font-variant-numeric:tabular-nums;word-break:break-word;color:var(--ink)}
  .rec-view tr:last-child th,.rec-view tr:last-child td{border-bottom:0}
  .rec-note,.rec-empty{white-space:normal;margin:0;padding:9px 12px;
    font-size:11.5px;color:var(--muted);line-height:1.7}
  /* バックアップ・復元 */
  .bk-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
  .bk-note{font-size:12px;color:var(--muted);margin:10px 0 0}

  /* 出力前チェック */
  .export-bar{margin-top:20px;border-top:1px solid var(--line);padding-top:18px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
  .export-bar .lbl{font-size:12px;color:var(--muted);margin-right:auto}
  .export-bar .lbl b{display:block;font-size:13.5px;color:var(--ink)}
  .exp-note{width:100%;font-size:12px;color:var(--muted);margin:0}
  .pf-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;width:100%;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
  .pf-sum{font-size:13px;color:var(--muted)}
  .pf-sum b{color:var(--ink)}
  .pf-sum.is-bad b{color:var(--danger)}
  .pf-sum.is-warn b{color:var(--warn)}
  .pf-modal{max-width:min(720px,94vw);text-align:left}
  .pf-list{max-height:min(52vh,460px);overflow:auto;margin:8px 0 4px;border:1px solid var(--line);border-radius:12px}
  .pf-group{border-bottom:1px solid var(--line)}
  .pf-group:last-child{border-bottom:0}
  .pf-group>h3{margin:0;padding:10px 14px;font-size:13px;background:var(--bg)}
  .pf-group.g-block>h3{background:var(--danger-bg);color:var(--danger)}
  .pf-group.g-warn>h3{background:var(--warn-bg);color:var(--warn)}
  .pf-item{display:block;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--line);
    padding:10px 14px;font:inherit;font-size:13px;cursor:pointer;color:var(--ink)}
  .pf-item:hover{background:var(--sand)}
  .pf-item .who{display:block;font-size:11.5px;color:var(--muted);margin-bottom:2px}
  .pf-item .mk{font-weight:700;margin-right:6px}
  .pf-group.g-block .pf-item .mk{color:var(--danger)}
  .pf-group.g-warn .pf-item .mk{color:var(--warn)}
  .pf-empty{padding:16px;font-size:13px;color:var(--muted)}

  .status{margin-top:14px;font-size:13px;border-radius:10px;padding:10px 14px}
  .st-run{background:#F2EEE8;color:var(--muted)}
  .st-ok{background:var(--ok-bg);color:var(--ok)}
  .st-err{background:var(--danger-bg);color:#8C1D18}

  /* ===== できること・料金・FAQ ===== */
  .cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:26px}
  .card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px 24px;display:grid;grid-template-columns:42px 1fr;column-gap:12px;align-content:start}
  .card .no{grid-row:1 / span 2;margin:2px 0 0;width:36px;height:36px;border-radius:10px;background:var(--sand);display:grid;place-items:center}
  .card h3{margin:0 0 8px;font-size:16px}
  .card p{margin:0;font-size:13px;color:var(--muted)}
  .card .no{font-size:11.5px;font-weight:800;color:var(--brown);letter-spacing:.1em}
  @media(max-width:900px){.cards{grid-template-columns:1fr}}
  .privacy{margin-top:20px;background:var(--umber);color:#F2E9DE;border-radius:20px;padding:26px 28px}
  .privacy h3{margin:0 0 8px;font-size:19px;color:#fff}
  .privacy p{margin:0;font-size:13.5px;color:#CBB9A2}
  .privacy a{color:#F0D9B8}
  .pricing{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;margin-top:26px}
  .price-card{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:var(--shadow)}
  .price-card .amt{font-size:40px;font-weight:800;letter-spacing:-.02em}
  .price-card .amt small{font-size:15px;font-weight:700;color:var(--muted);margin-left:4px}
  .price-card .per{font-size:13px;color:var(--muted);margin-bottom:16px}
  .price-card ul{list-style:none;margin:0 0 20px;padding:0}
  .price-card li{font-size:13.5px;padding:6px 0 6px 24px;position:relative;color:#4A3B2C}
  .price-card li::before{content:"✓";position:absolute;left:0;color:var(--brown);font-weight:800}
  @media(max-width:900px){.pricing{grid-template-columns:1fr;gap:20px}}
  .faq{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
  .faq details{background:var(--surface);border:1px solid var(--line);border-radius:12px;margin:0}
  .faq summary{cursor:pointer;padding:14px 18px;font-weight:700;font-size:14px;list-style:none}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::before{content:"Q ";color:var(--brown);font-weight:800}
  .faq details[open] summary{border-bottom:1px solid var(--line)}
  .faq .a{padding:13px 18px;font-size:13.5px;color:var(--muted);line-height:1.9}
  @media(max-width:767px){
    .faq{grid-template-columns:1fr}
    .ws-main{padding:16px}
    .stepper .tx b{font-size:11px;white-space:normal;line-height:1.35}
    .doc-pick{gap:8px}
    .doc-pick button{min-height:106px;padding:39px 11px 11px}
    .doc-pick button::before{left:11px}.doc-pick button::after{right:11px}
    .doc-pick b{font-size:12.5px}.doc-pick span{font-size:10.5px}
    .rv-head{grid-template-columns:40px minmax(0,1fr) auto;padding:12px 10px;gap:9px}
    .rv-thumb{width:40px;height:40px}
    .rv-main b{font-size:13.5px}.rv-main span{font-size:11px}
    .rv-amt{font-size:15px}.rv-cat{font-size:11.5px}
    .rv-badges{gap:3px}.bdg{font-size:9.5px;padding:2px 5px}
    .card{grid-template-columns:36px 1fr;padding:19px 17px;column-gap:9px}
  }

  /* ===== モーダル ===== */
  .modal{position:fixed;inset:0;background:rgba(35,26,18,.55);display:flex;align-items:center;justify-content:center;padding:20px;z-index:80}
  .modal[hidden]{display:none}
  .modal-in{background:var(--surface);border-radius:22px;padding:28px;max-width:460px;width:100%;box-shadow:0 24px 60px rgba(0,0,0,.25)}
  .modal-in h2{margin:0 0 6px;font-size:21px;line-height:1.4}
  .modal-in .sub{margin:0 0 18px;font-size:13px;color:var(--muted)}
  .modal-list{list-style:none;margin:0 0 20px;padding:14px 16px;background:#FBF7F1;border-radius:14px}
  .modal-list li{font-size:12.5px;padding:4px 0 4px 20px;position:relative;color:#4A3B2C}
  .modal-list li::before{content:"・";position:absolute;left:2px;color:var(--brown)}
  .modal-acts{display:flex;flex-direction:column;gap:10px;align-items:center}
  .modal-close{position:absolute;right:14px;top:14px;background:none;border:0;font-size:22px;color:var(--muted);cursor:pointer;line-height:1;padding:6px}
  .modal-wrap{position:relative}
  .modal-legal{margin:14px 0 0;font-size:11px;color:var(--muted);line-height:1.8}
  .link-btn{background:none;border:0;color:var(--muted);font:inherit;font-size:13px;text-decoration:underline;cursor:pointer;padding:8px}
  .wide-modal{max-width:min(920px,96vw);text-align:left}
  .wide-modal .body{max-height:min(64vh,560px);overflow:auto}

  /* 残り少ないときのバー */
  .lowbar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--umber);color:#F2E9DE;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}
  .lowbar p{margin:0;font-size:13px}
  .lowbar .btn{padding:9px 16px;min-height:38px}
  .lowbar .x{background:none;border:0;color:#C4B29A;font-size:20px;cursor:pointer;line-height:1;padding:4px 8px}

  /* 拡大表示 */
  .lb{position:fixed;inset:0;background:rgba(35,26,18,.8);display:none;align-items:center;justify-content:center;z-index:90;padding:20px}
  .lb.show{display:flex}
  .lb img{max-width:100%;max-height:90vh;border-radius:12px;background:#fff}
  .lb .close{position:absolute;top:16px;right:22px;color:#fff;font-size:30px;cursor:pointer;background:none;border:0;line-height:1;padding:6px 10px;font-family:inherit}

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  }

/* ===== アプリシェル（/ooya/app）=====
   ★デスクトップは左サイドバー、スマホは下部ナビ（設計書 4-3）。
     色だけで状態を示さない（「準備中」は語も添える・設計書 11-2）。 */
.app-shell{max-width:var(--wrap);margin:0 auto;padding:0 20px;display:grid;
  grid-template-columns:236px minmax(0,1fr);gap:28px;align-items:start}
.app-nav{position:sticky;top:16px;padding:16px 0 24px}
.app-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.app-nav ul a{display:flex;align-items:center;justify-content:flex-start;gap:10px;
  padding:11px 13px;border-radius:11px;text-decoration:none;color:var(--ink);
  font-size:14px;font-weight:700;min-height:44px;box-sizing:border-box}
.app-nav ul a:hover{background:var(--sand)}
/* ★ナビのラベルは長短の2つを書き出してあり、CSSで出し分ける（横幅の事情はCSSの側にある） */
.app-nav .nav-short{display:none}
.app-nav ul a[aria-current="page"]{background:var(--brown);color:#fff}
.app-nav ul a.is-todo{color:var(--muted);font-weight:600}
/* ★★「＋書類をアップ」は画面の移動ではなく**操作**なので、見た目を分ける
   （2026-09-02・利用者の指示でメニューのいちばん上に置いた）。
   ★現在地（aria-current）の塗りつぶしより弱くする。色だけで意味を伝えないよう、
   ラベル自体に「＋」が入っている。 */
.app-nav ul a.is-action{background:var(--sand);border:1px solid #E3D3BB;font-weight:800;
  color:var(--brown-deep)}
.app-nav ul a.is-action:hover{background:#F0E4D2}
.app-nav ul a.is-action[aria-current="page"]{background:var(--brown);color:#fff;
  border-color:var(--brown)}
.app-nav .todo-mark{font-size:11px;font-weight:700;background:#EFE7DA;color:var(--muted);
  border-radius:999px;padding:2px 8px;white-space:nowrap;margin-left:auto}
.app-nav ul a[aria-current="page"] .todo-mark{background:rgba(255,255,255,.22);color:#fff}
.app-nav-note{font-size:11.5px;color:var(--muted);line-height:1.7;margin:14px 4px 0}
.app-nav-note a{color:var(--brown-deep);text-decoration:underline}
/* ===== ナビの群（2026-08-31・2026-09-02 に見直し）=====
   ★2026-09-02: 上の2つ（＋書類をアップ／ダッシュボード）には見出しを付けない
   （`NAV_GROUPS` の label が空なら出さない）。
   ★★2026-09-02（夜・利用者の指示）: **見出しと画面の名前の字下げが同じで見分けられなかった。**
     画面の名前の頭にだけアイコンを置き、文字の始まりを見出しより右へずらして段を付ける。
     見出し（13px）→ 画面の名前（13 + 18 + 10 = 41px）。
     ★**見出しにアイコンを足さないこと**（足した瞬間に段が消えて、元の見づらさに戻る）。
     ★字下げは**アイコンの幅で作る**（`padding-left` を別に足さない）。
       2つで作ると、アイコンを持たない項目が出たときに文字だけ左へ戻る。
   ★nav-pc=デスクトップだけ / nav-sp=スマホだけ / nav-both=両方。
     出し分けを2本のナビに分けて書かないこと（必ず片方だけ直して食い違う）。 */
.app-nav .nav-ico{flex:0 0 18px;width:18px;height:18px;opacity:.8}
.app-nav ul a[aria-current="page"] .nav-ico{opacity:1}
.app-nav .nav-group{list-style:none;font-size:11.5px;font-weight:800;color:var(--brown-deep);
  letter-spacing:.06em;padding:0 13px;margin:18px 0 6px}
.app-nav ul>.nav-group:first-child{margin-top:0}
.app-nav .nav-sep{list-style:none;height:1px;background:var(--line);margin:18px 6px 12px}
.app-nav .nav-sp{display:none}
.app-main{min-width:0;padding-bottom:40px}

/* ===== 物件調査ツール ===== */
.tools-h{font-size:12px;font-weight:800;color:var(--brown-deep);letter-spacing:.04em;
  margin:18px 0 8px}
.tools-h:first-of-type{margin-top:8px}
.tools-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:8px}
.tool-card{display:flex;align-items:flex-start;gap:14px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;
  box-shadow:var(--shadow);text-decoration:none;color:var(--ink);min-height:44px}
.tool-card:hover{border-color:#D6C3A8;background:#FFFDFA}
.tool-ic{flex:0 0 auto;width:44px;height:44px;border-radius:12px;background:var(--sand);
  color:var(--brown-deep);display:inline-flex;align-items:center;justify-content:center}
.tool-body{min-width:0;display:flex;flex-direction:column;gap:4px}
.tool-body b{font-size:16px;font-weight:700}
.tool-body span{font-size:13px;color:var(--muted);line-height:1.75}
.tool-note{font-size:12.5px;color:var(--muted);background:var(--sand);border-radius:10px;
  padding:12px 14px;margin:16px 0 0;line-height:1.8}
.tool-open{margin:0 0 10px;font-size:12.5px}
.tool-open a{color:var(--brown-deep)}
/* ★埋め込みは高さを子から受け取って合わせる（入れ子のスクロールを作らない）。
   受け取れなかったときのために既定の高さを置く。 */
.toolframe{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--surface);box-shadow:var(--shadow)}
.toolframe-if{display:block;width:100%;height:820px;border:0}
/* ★開けなかったときの知らせ。枠が真っ白なだけだと、何が起きたのか分からない */
/* 「次にすること」。★出すのは1つだけ。空のKPIとグラフの代わりに置く */
/* 全画面の状態バー。★1本だけ。色だけで意味を伝えないので、必ず語も出す */
/* 経費・仕訳のタブ（読み取る／要確認／帳簿／書き出す）。
   ★選んでいるものを色と太字の両方で示す（色だけにしない） */
.acct-tabs{display:flex;gap:4px;background:var(--sand);border-radius:10px;padding:4px;margin:18px 0 0;
  overflow-x:auto}
.acct-tabs button{appearance:none;border:0;background:none;font:inherit;font-size:13.5px;font-weight:700;
  color:var(--muted);padding:9px 16px;border-radius:8px;cursor:pointer;min-height:40px;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px}
.acct-tabs button[aria-selected="true"]{background:#fff;color:var(--brown);
  box-shadow:0 1px 2px rgba(15,23,42,.08)}
.acct-badge{background:var(--warn);color:#fff;border-radius:999px;font-size:11px;font-weight:800;
  padding:1px 7px;min-width:18px;text-align:center}
.app-status{margin:10px 0 0;padding:9px 13px;border-radius:10px;font-size:12.5px;line-height:1.7}
.app-status.is-quiet{background:var(--sand);color:var(--muted)}
.app-status.is-warn{background:var(--warn-bg);color:var(--warn)}
.app-status.is-danger{background:var(--danger-bg);color:var(--danger)}
.status-act{appearance:none;border:0;background:none;font:inherit;font-size:12.5px;font-weight:700;
  color:var(--brown-deep);text-decoration:underline;cursor:pointer;padding:2px 4px;min-height:32px}
.next-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 28px;box-shadow:var(--shadow);margin:18px 0 0;max-width:640px}
.next-title{margin:0;font-size:19px;font-weight:800;letter-spacing:-.01em}
.next-body{margin:8px 0 18px;font-size:14px;color:var(--muted);line-height:1.8}
.next-sub{margin-left:16px;font-size:13.5px;color:var(--brown-deep)}
.pf-map-empty{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 16px;
  padding:14px 16px;background:var(--sand);border-radius:12px;font-size:13px;color:var(--muted)}
.toolframe-fail{margin:0;padding:14px 16px;background:var(--warn-bg);border-bottom:1px solid var(--line);
  font-size:13.5px;color:var(--warn)}
.toolframe-fail a{color:var(--brown-deep);margin-left:8px}
.app-head{padding:22px 0 6px}
.app-head h1{font-size:24px;margin:0 0 4px}
.app-head p{margin:0;font-size:13.5px;color:var(--muted)}
.app-panel[hidden]{display:none}

/* ご契約が無い方に出す案内（経営台帳の画面の代わり・2026-09-02）。
   ★無料でできること（サンプル・4つの道具）を先に置く。行き止まりにしない。 */
.lock-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;margin:18px 0;box-shadow:var(--shadow)}
.lock-wrap h2{margin:0 0 8px;font-size:19px}
.lock-wrap .section-note{margin:0 0 6px;font-size:14px}
.lock-wrap .hint{margin:0 0 14px}
.lock-wrap .bk-acts{display:flex;flex-wrap:wrap;gap:10px}

/* まだ作っていない画面。★見せかけの数字やボタンを置かない（設計書 17）。 */
.app-todo{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;margin:18px 0;box-shadow:var(--shadow)}
.app-todo h2{margin:0 0 6px;font-size:18px}
.app-todo>p{margin:0 0 14px;font-size:14px;color:var(--muted)}
.app-todo-h{font-size:12px;font-weight:800;color:var(--brown-deep);letter-spacing:.04em;margin:0 0 6px !important}
.app-todo ul{margin:0 0 14px;padding-left:20px;font-size:13.5px;line-height:1.9}
.app-todo-note{font-size:12px;color:var(--muted);background:var(--sand);border-radius:10px;
  padding:11px 13px;margin:0 !important}

@media(max-width:900px){
  .app-shell{grid-template-columns:1fr;gap:0;padding:0 14px}
  /* スマホは下部ナビ。指が届く位置に置き、本文が隠れないよう下に余白を取る */
  .app-nav{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:60;padding:6px 8px
    calc(6px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line);
    box-shadow:0 -6px 18px rgba(35,26,18,.08)}
  /* ★★横スクロールをやめ、6項目を必ず1画面に収める（2026-08-30）。
     以前は `overflow-x:auto` で溢れたぶんを横スクロールに逃がしていたが、
     **スクロールできる手がかりが無い**ので「設定・バックアップ」は画面の外にあるのと
     同じだった（ログインも同期もその奥にある）。指で触ると横に動くので、
     画面そのものが横にずれたようにも見える。
     ★収めるためにラベルを短くする（`nav-short`）。項目を減らして解決しないこと。 */
  .app-nav ul{flex-direction:row;overflow-x:visible;gap:4px}
  .app-nav ul li{flex:1 1 0;min-width:0}
  .app-nav .nav-long{display:none}
  .app-nav .nav-short{display:inline}
  /* ★スマホの下部ナビはアイコンを出さない。5項目を1画面に収める決めごとがあり、
     1行ぶんの高さを増やす余地が無い（2026-09-02）。 */
  .app-nav .nav-ico{display:none}
  /* ★下部ナビに出すのは5項目だけ（収支・物件・仕訳・調べる・設定）。
     物件調査ツールの4つは「調べる」の一覧から入る。見出しと区切り線も出さない。 */
  .app-nav .nav-pc{display:none}
  .app-nav .nav-sp{display:block}
  .app-nav ul a{flex-direction:column;justify-content:center;gap:2px;padding:7px 4px;
    font-size:11.5px;white-space:nowrap;border-radius:9px;min-height:46px}
  .app-nav .todo-mark{font-size:9.5px;padding:1px 6px}
  .app-nav-note{display:none}
  .tools-grid{grid-template-columns:1fr;gap:10px}
  .tool-card{padding:16px 15px;gap:12px}
  .toolframe-if{height:640px}
  .app-main{padding-bottom:24px}
  .app-head{padding:16px 0 4px}
  .app-head h1{font-size:20px}
  /* ★下部ナビは position:fixed なので、その高さぶんを body で確保する。
     .app-main だけに余白を付けても、ナビが覆うのは画面の最下部＝フッターの側。 */
  body.is-app{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  /* 残数が少ないときのバーも同じ最下部に出る。重ねるとどちらも押せなくなる。 */
  body.is-app .lowbar{bottom:calc(64px + env(safe-area-inset-bottom))}
}

/* =====================================================================
   アプリ画面の配色（body.is-app）
   ---------------------------------------------------------------------
   ★ここだけ**トークンを差し替える**。LP（/ooya）は褐色のまま、アプリは
     経営ソフトらしい青灰（スレート）にそろえる。個別の規則を上書きするのではなく
     :root のトークンを body.is-app で再定義することで、既存の .btn / .rv-row /
     .card などが**まとめて**追随する。1か所ずつ塗り替えると必ず塗り残す。
   ★白背景に対するコントラスト比: --ink #1E293B = 13.6:1、--muted #64748B = 4.8:1、
     --accent #2563EB = 5.2:1。いずれも本文・UI文字の基準（4.5:1）を満たす。
   ===================================================================== */
body.is-app{
  /* ★★アプリだけ横幅を広く取る（2026-08-27）。
     LP（/ooya）は文章を読ませる場所なので 1180px のまま。**アプリは数字を見る場所**で、
     科目×12か月のキャッシュフロー表・18室×12か月のヒートマップ・12か月の棒グラフが並ぶ。
     1180px（本文876px）だと**1年が1画面に入らず横スクロールになっていた**
     （表は1,483px 必要なのに枠が830pxだった）。
     ★競合のヤモリは本文1,198px（画面幅にそのまま追随）。同じくらいの幅にそろえる。
     ★★ただし追随はさせず**上限を置く**。このアプリは注記や説明文が多く、
     1行が長くなると読めなくなるため（下の `.app-main` の max-width と対で効かせる）。 */
  --wrap:1560px;
  --ink:#1E293B; --muted:#64748B;
  --bg:#F5F7FA; --surface:#FFFFFF; --line:#E2E8F0; --sand:#EEF2F7;
  --brown:#2563EB; --brown-deep:#1D4ED8; --umber:#1E293B;
  --warn:#B45309; --warn-bg:#FFFBEB; --danger:#B91C1C; --danger-bg:#FEF2F2;
  --ok:#047857; --ok-bg:#ECFDF5;
  --radius:12px; --shadow:0 1px 3px rgba(15,23,42,.1);
  /* KPIカードの左帯。灰＝ふつう、橙＝気にしたほうがよい数字 */
  --tone-neutral:#64748B; --tone-warn:#F59E0B;
}
/* ★幅を広げたぶん、**文章だけ**は行が長くなりすぎないように抑える。
   表・グラフ・カードの並びには掛けない（それらは広いほど読みやすい）。
   ★1行が全角50字前後で収まる長さ。これを外すと、注記が1行100字を超えて読めなくなる。 */
body.is-app .app-main > .app-head p,
body.is-app .app-main .section-note,
body.is-app .app-main .app-todo-note,
body.is-app .app-main .ws-privacy,
body.is-app .app-main .bk-note{max-width:78ch}

body.is-app .app-head h1{color:var(--brown);font-size:26px;letter-spacing:-.01em}
body.is-app .app-nav ul a[aria-current="page"]{background:var(--brown)}
body.is-app .toolhead .logo-badge,body.is-app .tool-badge{background:var(--brown)}

/* 物件フォームの「書類から自動入力」（2026-08-27 追加）。
   ★入力を置き換えず、空いている欄だけ埋める。結果はここに文章で出す。 */
.pr-box{background:var(--sand);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;margin:0 0 16px;display:grid;gap:8px;justify-items:start}
.pr-box > b{font-size:14px;color:var(--ink)}
.pr-box > span{font-size:13px;line-height:1.8;color:var(--muted)}
.pr-box.is-off{opacity:.75}
.pr-note{margin:0;font-size:13px;line-height:1.9;color:var(--ink)}
.pr-note:empty{display:none}
.pr-note.is-warn{color:var(--warn);background:var(--warn-bg);border-radius:9px;padding:9px 11px}
.pr-conf,.pr-sugg{display:block;margin-top:4px;color:var(--muted);font-size:12.5px}
/* ★構造の根拠（書類の原文）。耐用年数が変わる欄なので、他の注記より目を引かせる */
.pr-basis{display:block;margin-top:6px;padding:6px 9px;border-left:3px solid var(--warn);
  background:var(--sand);font-size:12.5px;line-height:1.7}
.pr-check{display:block;margin-top:6px;font-size:12.5px;color:var(--warn)}
.pr-box .link-btn{color:var(--brown);font-size:12.5px;padding:2px 4px}

/* ===== ダッシュボード ===== */
.dash-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:4px 0 18px}
.dash-bar .spacer{flex:1 1 auto;min-width:0}
/* グラフ／テーブルの切替。★選んでいるほうを色と太字の両方で示す（色だけにしない） */
.viewtabs{display:inline-flex;gap:4px;background:var(--sand);border-radius:9px;padding:3px}
.viewtabs button{appearance:none;border:0;background:none;font:inherit;font-size:13.5px;font-weight:700;
  color:var(--muted);padding:7px 15px;border-radius:7px;cursor:pointer;min-height:38px;
  display:inline-flex;align-items:center;gap:7px}
.viewtabs button[aria-pressed="true"]{background:#fff;color:var(--brown);box-shadow:0 1px 2px rgba(15,23,42,.08)}
.dash-filter{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--muted)}
.dash-filter select{font:inherit;font-size:13.5px;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:8px;padding:9px 11px;min-height:42px;max-width:210px}

/* KPI。上段＝お金、下段＝運営。★下段だけ左に帯を付けて、意味の違いを形でも示す */
/* ★KPIは6枚（2026-08-27に滞納の2枚を外した）。4列だと2段目が2枚で歯抜けになるので3列。
   ★枚数を増やすときは列も見直すこと。 */
.kpi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:16px}
/* ★クラス名は .kpi-card。.kpi は集計タブのKPIの「入れ物」として先にあるので、
   ここで使うと display:grid が当たってカードの中身が横に並ぶ（実際にそうなった）。 */
.kpi-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--shadow);min-width:0}
.kpi-card.tone-neutral{border-left:3px solid var(--tone-neutral)}
.kpi-card.tone-warn{border-left:3px solid var(--tone-warn)}
.kpi-label{font-size:12.5px;color:var(--muted);margin:0 0 6px;display:flex;align-items:center;gap:6px}
.kpi-value{font-size:24px;font-weight:800;line-height:1.25;font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;word-break:break-all}
/* ★読み取れていないときは数字を出さない。薄い字の「—」と、何を読み込めば出るかを添える */
.kpi-card.is-unknown .kpi-value{color:var(--muted);font-weight:700}
.kpi-note{font-size:11.5px;color:var(--muted);margin:6px 0 0;line-height:1.6}
.kpi-why{font-size:11.5px;color:var(--muted);margin:6px 0 0}

/* グラフのカード */
.chart-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px 16px;box-shadow:var(--shadow);margin-bottom:16px;min-width:0}
.chart-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-bottom:4px}
.chart-head h2{font-size:17px;font-weight:700;margin:0}
.chart-head .hint{font-size:12px;color:var(--muted);margin:0}
.chart-body{margin-top:10px;overflow-x:auto}
/* ★直接の子だけに最小幅を与える。円グラフは .pie-wrap の中にあり、ここに含めると
   180pxの円が420pxに引き伸ばされて、隣の内訳一覧に重なる（実際にそうなった）。 */
.chart-body>svg{display:block;min-width:420px}
.chart-body .pie-wrap svg{display:block;flex:0 0 auto}
.chart-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:12px;color:var(--muted)}
.ch-key{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.ch-key i{width:10px;height:10px;border-radius:3px;display:inline-block;flex:0 0 auto}
.chart-empty{font-size:13px;color:var(--muted);background:var(--sand);border-radius:10px;
  padding:16px 18px;margin:10px 0 0;line-height:1.8}
.chart-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.chart-2>.chart-card{margin-bottom:0}
.pie-wrap{display:grid;grid-template-columns:180px minmax(0,1fr);gap:14px;align-items:center}
.pie-list{margin:0;padding:0;list-style:none;font-size:12.5px;min-width:0}
.pie-list li{display:flex;align-items:center;gap:8px;padding:3px 0;min-width:0}
.pie-list i{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.pie-list b{margin-left:auto;font-variant-numeric:tabular-nums;white-space:nowrap}
.pie-list span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ヒートマップ */
.heat-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--muted);margin-top:10px}
.heat-rowlabels{font-size:11px}

/* キャッシュフロー表 */
.cf-wrap{overflow-x:auto}
.cf{border-collapse:collapse;width:100%;font-size:13px;min-width:760px}
.cf th,.cf td{border-bottom:1px solid var(--line);padding:9px 8px;white-space:nowrap}
.cf thead th{background:var(--sand);color:var(--ink);font-weight:700}
.cf tbody th{text-align:left;font-weight:400;color:var(--ink)}
/* ★★科目の列は横スクロールしても残す（2026-08-27）。
   12か月ぶんは 1,325px あり、本文を広げても1画面には収まらない。
   ★収まらないことより、**スクロールした先で行の名前が分からなくなる**ほうが困る。
   文字を小さくして詰め込む案は採らなかった（金額が9桁になると読めなくなる）。 */
.cf th:first-child,.cf td:first-child{position:sticky;left:0;z-index:2;
  background:var(--surface);min-width:190px;max-width:240px;white-space:normal;
  box-shadow:1px 0 0 var(--line)}
.cf thead th:first-child{background:var(--sand);z-index:3}
.cf .is-sub th:first-child,.cf .is-sub td:first-child{background:#FBFCFE}
.cf .is-net th:first-child,.cf .is-net td:first-child{background:var(--sand)}
.cf-group th:first-child{background:var(--surface)}
.cf td{text-align:right;font-variant-numeric:tabular-nums}
.cf .is-sub th,.cf .is-sub td{font-weight:700;background:#FBFCFE}
.cf .is-net th,.cf .is-net td{font-weight:800;border-top:2px solid #CBD5E1;background:var(--sand)}
.cf .minus{color:var(--danger)}
.cf-group th{padding-top:16px;color:var(--muted);font-size:12px;font-weight:700}

@media(max-width:1023px){
  .kpi-grid{grid-template-columns:1fr 1fr}
  .chart-2{grid-template-columns:1fr}
  .pie-wrap{grid-template-columns:1fr}
}
@media(max-width:600px){
  .kpi-grid{grid-template-columns:1fr 1fr;gap:10px}
  .kpi-card{padding:14px}
  .kpi-value{font-size:20px}
  .dash-filter select{max-width:44vw}
  .chart-card{padding:16px 14px 12px}
}

/* =====================================================================
   物件一覧（#/properties）
   ★「読み取れていない」は .is-unknown で灰色＋「—」。色だけで示さず語も添える。
   ===================================================================== */
.pf-check{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.pf-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;box-shadow:0 1px 3px rgba(15,23,42,.06);border-left:3px solid var(--line)}
.pf-card.is-attn{border-left-color:var(--tone-warn)}
.pf-card-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pf-card-head h3{margin:0;font-size:16px;font-weight:700}
.pf-tag{font-size:11px;font-weight:700;border-radius:999px;padding:2px 8px;
  background:var(--sand);color:var(--muted)}
.pf-tag.is-attn{background:#FDF3E3;color:var(--brown)}
.pf-sub{margin:6px 0 0;font-size:12.5px;color:var(--muted);line-height:1.7}
.pf-figs{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin:14px 0 0}
.pf-fig{min-width:0}
.pf-fig dt{font-size:11.5px;color:var(--muted)}
.pf-fig dd{margin:2px 0 0;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.pf-fig dd.is-unknown{color:var(--muted)}
.pf-fig-note{margin:2px 0 0;font-size:11px;color:var(--muted);line-height:1.6}
.pf-card .acts{margin-top:14px}

.pf-table{border-collapse:collapse;width:100%;font-size:13px;min-width:860px}
.pf-table th,.pf-table td{border-bottom:1px solid var(--line);padding:9px 10px;white-space:nowrap}
.pf-table thead th{background:var(--sand);font-weight:700;padding:0}
.pf-table th.num,.pf-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.pf-table .is-unknown{color:var(--muted)}
.pf-table tr.is-attn td{background:#FFFDF7}
.pf-table tr.total td{font-weight:800;border-top:2px solid var(--line);background:var(--sand)}
.pf-sort{appearance:none;border:0;background:none;font:inherit;font-weight:700;color:inherit;
  padding:9px 10px;width:100%;text-align:inherit;cursor:pointer}
.pf-sort:hover{text-decoration:underline}
.pf-link{appearance:none;border:0;background:none;font:inherit;color:var(--brown);
  padding:0;cursor:pointer;text-align:left}
.pf-link:hover{text-decoration:underline}
.pf-partial{display:block;font-size:10.5px;font-weight:600;color:var(--muted)}

@media(max-width:600px){
  .pf-grid{grid-template-columns:1fr}
  .pf-card{padding:16px 14px}
}

/* 書類の画像の一括書き出し（設定・バックアップ） */
.arc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin:14px 0 0}
/* ★`min-width:0` が要る。グリッドの子は既定が `min-width:auto` で、<select> は
   **いちばん長い選択肢の幅**まで広がろうとする。狭い画面では器を突き破り、
   ページ全体が横スクロールになる（390pxで実測 436px）。 */
.arc-grid label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--muted);min-width:0}
.arc-grid select{font:inherit;font-size:13.5px;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:9px;padding:8px 10px;width:100%;min-width:0;box-sizing:border-box}
.arc-opts{display:flex;flex-direction:column;gap:7px;margin:12px 0 0}
.arc-preview{background:var(--sand);border-radius:10px;padding:14px 16px;margin:14px 0 0;
  font-size:13px;line-height:1.8}
.arc-preview p{margin:0}
.arc-preview p+p{margin-top:5px}
.arc-warn{color:var(--brown-deep)}

@media(max-width:600px){
  .arc-grid{grid-template-columns:1fr}
}

/* 物件マップ（#/properties・地理院タイル） */
.pf-map-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;margin:0 0 16px;box-shadow:0 1px 3px rgba(15,23,42,.06)}
.pf-map-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 12px}
.pf-map-head h2{margin:0;font-size:16px;font-weight:700}
.pf-map-head .spacer{flex:1 1 auto;min-width:0}
.pf-map-note{font-size:12px;color:var(--muted)}
.pf-map{height:340px;border-radius:12px;overflow:hidden;background:#dfe6ee}
/* ★Leaflet の既定マーカー画像は vendor に置いていない。divIcon のSVGで描く */
.pf-pin{background:none;border:0}
.pf-pin-label{position:absolute;left:50%;top:34px;transform:translateX(-50%);
  white-space:nowrap;font-size:11px;font-weight:700;color:var(--ink);
  background:rgba(255,255,255,.9);border-radius:4px;padding:1px 5px;
  box-shadow:0 1px 2px rgba(15,23,42,.15)}
.pf-pop-btn{appearance:none;border:1px solid var(--line);background:#fff;font:inherit;
  font-size:12px;border-radius:8px;padding:4px 10px;margin-top:6px;cursor:pointer;color:var(--brown)}
.leaflet-container{font:inherit}
/* 確認モーダルで改行を活かす（住所検索の結果を1件ずつ並べるため） */
#confirmBody{white-space:pre-wrap}

@media(max-width:600px){
  .pf-map{height:260px}
}

/* どの画面でも見える警告（DBが別タブに掴まれている等） */
.app-alert{margin:10px 0 0;padding:12px 14px;border-radius:10px;font-size:13.5px;line-height:1.7;
  background:#FDECEA;border:1px solid #F0B4AE;color:#8A2018}

/* ★家族（招待された方）への常時の断り書き。警告（赤）ではないので落ち着いた色にする。 */
.app-note{margin:10px 0 0;padding:10px 14px;border-radius:10px;font-size:13px;line-height:1.7;
  background:#F1F5F9;border:1px solid #D8E0E8;color:#33414F}

/* ログインとアカウント */
.login-gbtn{display:flex;justify-content:center;margin:14px 0 0;min-height:44px}
.login-or{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--muted);font-size:12.5px}
.login-or::before,.login-or::after{content:"";flex:1;height:1px;background:var(--line)}
.login-mail{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--muted)}
.login-mail input{font:inherit;font-size:15px;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:11px 12px}
.acct-h{margin:16px 0 4px;font-size:12px;font-weight:700;color:var(--muted)}
.acct-list{font-size:13.5px}
.acct-list ul{margin:0;padding-left:1.2em}
.acct-list li{padding:3px 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.acct-when{color:var(--muted);font-size:12px}
.acct-warn{margin:10px 0 0;padding:11px 13px;border-radius:10px;font-size:13px;line-height:1.7;
  background:#FDF3E3;border:1px solid #E8CFA6;color:#6E4622}
/* 取り返しのつかない操作だけに使う（アカウントの削除）。★色だけで示さず、
   ボタンの語と手前の説明でも「削除」と分かるようにしてある（設計書 11-2）。 */
/* プランの選択（設定・ご契約）。★通数の上限は書かない。棟数で選ぶ。 */
  .plan-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
  .plan{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;
    background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
  .plan.is-fit{border-color:var(--brown);box-shadow:0 0 0 1px var(--brown) inset}
  .plan-name{font-weight:800;font-size:14px;color:var(--ink)}
.plan-name small{display:block;font-size:11.5px;font-weight:600;color:var(--muted);margin-top:2px}
  .plan-price{font-size:13px;color:var(--muted)}
  .plan-price b{font-size:17px;color:var(--ink)}
  .plan-na{font-size:12px;color:var(--muted)}
  @media(max-width:600px){.plan{grid-template-columns:1fr auto;gap:6px}
    .plan .btn,.plan-na{grid-column:1/-1;justify-self:start}}
  .btn.ghost.danger{color:#B3261E;border-color:#E7B4AF}
.btn.ghost.danger:hover{background:#FDECEA;border-color:#B3261E}

/* 同期（設定・バックアップ） */
.sync-conf{background:#FDF3E3;border:1px solid #E8CFA6;border-radius:10px;
  padding:12px 14px;margin:12px 0 0;font-size:13px;line-height:1.8}
.sync-conf p{margin:0 0 6px}
.sync-conf ul{margin:0;padding-left:1.2em}
.sync-conf li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:2px 0}
.sync-when{color:var(--muted);font-size:12px}

/* ご契約（P4） */
.sub-warn{margin:10px 0 0;padding:11px 13px;border-radius:10px;font-size:13px;line-height:1.7;
  background:#FDF3E3;border:1px solid #E8CFA6;color:var(--brown-deep)}
.ro-note{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 16px;
  padding:12px 14px;border-radius:10px;font-size:13.5px;line-height:1.7;
  background:var(--sand);border:1px solid var(--line)}
.ro-note span{flex:1 1 260px;min-width:0}

/* ===================================================================
   スマホで画面幅が勝手に広がるのを止める（2026-08-30・利用者の報告）
   ===================================================================
   ★★iOS Safari は **font-size が 16px 未満の入力欄にフォーカスすると、ページを
     勝手に拡大する**。拡大は自動では戻らないので、どれか1つの欄に触った時点で
     「横幅が少し広がったまま」になる。`/ooya` の入力欄は 13.3〜15px しかなく、
     ログイン・物件フォーム・絞り込みのどれを触っても起きていた。
   ★★`user-scalable=no` や `maximum-scale=1` で塞がないこと。
     指での拡大を奪うので読めない人を締め出すうえ、**iOS 10 以降は無視される**ので
     そもそも直らない。直し方は「入力欄を 16px 以上にする」の一手しかない。
   ★`.mtfb`（ご意見フォーム）はページ内の <style> で 14px を当てているため、
     詳細度を合わせて上書きする。ここを削ると LP だけ拡大が復活する。
   ★指で触る端末すべてが対象なので、幅だけでなく `pointer:coarse` でも効かせる。 */
@media (max-width:1023px), (hover:none) and (pointer:coarse) {
  /* ★`!important` はここでは正しい。入力欄の字の大きさは画面のあちこちで
     `.dash-filter select` `#loginEmail` `.mtfb textarea` のように個別に決めてあり、
     詳細度で勝とうとすると**同じ規則を何十個も並べる**ことになる。ここで守りたいのは
     見た目ではなく「拡大させない」という端末の都合なので、まとめて上書きしてよい。 */
  input, select, textarea { font-size:16px !important }
}

/* ===== 共有された物件を見る画面（/ooya/share・2026-09-02）=====
   ★★読み取り専用。入力欄も保存ボタンも置かない。
   ★アプリ（body.is-app）の配色をそのまま使う。 */
/* ★`.wrap` の左右の余白を消さない（padding を丸ごと上書きすると端に貼り付く）。 */
.sh-wrap{padding:24px 20px 60px;max-width:1180px}
.sh-badge{margin-left:auto;font-size:12px;font-weight:800;background:var(--sand);
  color:var(--brown-deep);border-radius:999px;padding:4px 12px}
.sh-head{margin:0 0 18px}
.sh-head h1{font-size:24px;margin:0 0 6px}
.sh-lead{margin:0 0 12px;font-size:13.5px;color:var(--muted);line-height:1.8;max-width:78ch}
.sh-sec{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;margin:0 0 18px;box-shadow:var(--shadow)}
.sh-sec h2{font-size:17px;margin:0 0 12px}
.sh-sec-head{display:flex;align-items:center;gap:12px}
.sh-sec-head h2{margin:0;flex:1 1 auto}
.sh-table{width:100%;font-size:13.5px}
.sh-table th{text-align:left;white-space:nowrap;color:var(--muted);font-weight:600}
.sh-table td.num,.sh-table th.num{text-align:right}
.sh-scroll{overflow-x:auto}
.sh-count{display:inline-flex;align-items:center;gap:3px}
.sh-rest{display:none}
.sh-empty{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:40px 24px;text-align:center;box-shadow:var(--shadow)}
.sh-empty h1{font-size:20px;margin:0 0 8px}
.sh-empty p{margin:0;color:var(--muted);font-size:13.5px}
.sh-foot{border-top:1px solid var(--line);margin-top:30px;padding:20px 16px 40px;text-align:center}
.sh-foot p{margin:0 0 6px;font-size:12.5px;color:var(--muted)}
.sh-foot a{color:var(--brown-deep)}