/*!
 * 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}}
  /* ★逆に、**狭いときだけ**入れる改行。★520px は「17字の行が入らなくなる幅」から
     決めている（29px × 約0.97em × 17字 ＝ 約478px ＋ 左右の余白40px）。
     広い画面で出すと、まだ余裕のある行を無駄に折る。 */
  .br-sp{display:none}
  @media(max-width:520px){.br-sp{display:inline}}

  /* 帯（無料で見られることを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}


  /* 料金（3段） */
  /* ★プランは5段（無料2つ＋有料3つ）。狭い画面では1列に落とす。 */
  /* ★2026-09-02: 5枚 → 4枚（無料・非会員と会員Freeを Free に統合）。
     ★枚数を変えたら必ずここも直す。5列のままだと最後の1列が空いて、
       「もう1つプランがあるのに読み込めていない」ように見える。 */
  /* ★★2026-09-09: Freeプランを廃止してカードが3枚になったのに、ここが4列のままだった。
     余った1列ぶんが最後のカードの続きに見えて、**メガ大家だけ幅広く**なっていた
     （利用者の指摘）。★カードを増減したら、この数と下の折り返しを必ず一緒に直す。 */
  .price-tiers{list-style:none;margin:26px 0 0;padding:0;display:grid;
    grid-template-columns:repeat(3,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))}
    /* ★3枚目が1列ぶんだけ残ると、右半分が空いて欠けて見える */
    .price-tiers>li:nth-child(3){grid-column:span 2}}
  @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}
  /* ★★権限を開いている行は**折り返す**（2026-09-07）。`.sh-list li` は横並びなので、
     そのまま設定を足すとメールの隣に押し込まれ、**ボタンが縦に潰れる**。 */
  .sh-list li.is-editing{flex-wrap:wrap}
  .sh-list li.is-editing>.macc{flex:1 1 100%;margin-top:12px}
  .macc{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px}
  .macc .alloc-row{display:flex;gap:14px;flex-wrap:wrap}
  .macc .alloc-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:2px}
  .macc .alloc-list li{display:flex;align-items:center;gap:12px;padding:8px 0;
    border-bottom:1px solid var(--line);background:none}
  .macc .alloc-list li .nm{flex:1 1 auto;min-width:0;font-size:13.5px}
  .macc .alloc-list li select{width:auto;min-width:150px}
  .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)}
  /* ★★共有一覧（2026-09-08）。**行＝物件・列＝共有者のクロス表**。
     ⚠⚠ 初版は1マスに共有者を何人も詰めていた（利用者の指摘で作り直した）。
     1セル1値でないと、誰の権限なのかを目で辿れない。 */
  .sh-matrix th.sh-c,.sh-matrix td.sh-c{text-align:center;white-space:nowrap}
  /* 列の見出しは共有者そのもの。⚠ メールアドレスは長いので、見出しだけ縦に積む。 */
  .sh-matrix th.sh-c .nm{display:block;font-weight:700;color:var(--ink);
    overflow-wrap:anywhere;max-width:14em}
  .sh-role{display:inline-block;font-size:11.5px;padding:2px 8px;border-radius:999px;
    background:var(--sand);color:var(--muted);white-space:nowrap}
  /* ★編集のマスだけ色を変える。**帳簿を書き換えられる相手**が一目で分かること。 */
  .sh-role.is-edit{background:#FDECEC;color:var(--danger);font-weight:700}
  .sh-kind{display:block;font-size:11px;color:var(--muted);font-weight:400;white-space:nowrap}
  .sh-none{color:var(--muted);font-size:12.5px}
  .sh-links .sh-seen{font-size:12.5px;color:var(--muted);white-space:nowrap}
  /* ★★狭い画面では**潰さずに横スクロール**させる（2026-09-08・320pxで実測）。
     ⚠ `min-width` が無いと、器に収めようとして
     **メールアドレスが1文字ずつ縦に割れる**（物件名も所有者も2〜3行に折れる）。
     CLAUDE.md の決めごと —— 中身を読ませないと意味が伝わらないものは、縮めない。 */
  .sh-matrix,.sh-links{min-width:30em}
  .sh-matrix td:first-child,.sh-links td:first-child{min-width:8em}
  /* ⚠ 2列目（所有者・渡し先）にも下限が要る。無いと 320px で
     「サンプル法人（株）」が3行に折れて、行の高さが倍になる（実測）。 */
  .sh-matrix td:nth-child(2),.sh-links td:nth-child(2){min-width:8em}
  .sh-scroll-hint{font-size:12px;color:var(--muted);margin:8px 2px 0}
  @media(min-width:640px){.sh-scroll-hint{display:none}}
  /* ★★作った直後の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}
  /* ===== 探す（設計書 5-4）=====
     ★条件の行は**名義・年度の行の下**に置く（並べると1行に収まらず、折り返しで読みにくい）。
     ★「条件を消す」は条件が入っているときだけ出す（押せないボタンを置かない）。 */
  .dg-search{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 10px}
  .dg-search .dg-q{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);
    flex:1 1 260px;min-width:220px}
  .dg-search .dg-q input{flex:1 1 auto;min-width:0;font-size:13px;padding:7px 10px;
    border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink)}
  .dg-search .dash-filter input{font-size:13px;padding:6px 8px;border:1px solid var(--line);
    border-radius:8px;background:var(--surface);color:var(--ink);width:118px}
  .dg-search .dash-filter input[inputmode="numeric"]{width:84px;text-align:right}
  .dg-search .dg-sep{color:var(--muted);font-size:12px}
  .dg-chk{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
  /* 探した結果（表では金額もメモも出せないので、一覧で出す） */
  .dg-results{margin:0 0 14px}
  .dgr li{align-items:flex-start}
  .dgr .dgr-main{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
  .dgr .dgr-meta{color:var(--muted);font-size:12px;flex:1 1 100%}
  .dgr .dgr-amount{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
  .dg-skip{margin:10px 0 0;background:var(--sand);border-radius:10px;padding:9px 12px}
  /* 選んでZIPに出す帯。★押せないときは理由が見えるように、帯ごと消さない。 */
  .dgr-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:10px 0 0;
    padding:9px 12px;background:var(--sand);border-radius:10px;font-size:12.5px}
  .dgr-all{display:flex;align-items:center;gap:6px;color:var(--ink)}
  .dgr-selcount{color:var(--brown-deep);font-weight:700}
  .dgr-bar .btn{margin-left:auto}
  .dgr-bar-note{margin:10px 0 0}
  /* 重複の候補。★警告色にしない（「よく似た別の書類」であることもある）。 */
  .dg-dup{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 10px;
    padding:9px 12px;background:var(--sand);border-radius:10px;font-size:12.5px;color:var(--ink)}
  .dg-dup .btn{margin-left:auto}
  .dgl-dup{margin-left:8px;font-size:11.5px;color:var(--brown-deep);font-weight:700}
  .dup-group{margin:0 0 12px}
  .dup-group h4{margin:0 0 6px;font-size:13px;color:var(--brown-deep)}
  /* 消したものの取り消し。★消えたことと、まだ戻せることの両方を出す。 */
  .dg-undo{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 10px;
    padding:9px 12px;background:var(--sand);border-radius:10px;font-size:12.5px;color:var(--ink)}
  .dg-undo .btn{margin-left:auto}
  /* ★チェックボックスの幅は、原本の無い行でも空けておく（行の頭が揃わないと読みにくい）。 */
  .dgr-pick{flex:0 0 auto;width:18px;display:flex;align-items:center;justify-content:center}
  .dgr li > .dgr-main{flex:1 1 auto;min-width: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}
    .steps{grid-template-columns:repeat(2,1fr)}
    .intro h2{font-size:25px}.point h3{font-size:23px}
  }
  @media(max-width:767px){
    .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の側にある） */
/* ★★スマホのメニュー（2026-09-08・利用者の指示で下部ナビから引き出しへ）。
   デスクトップでは出さない —— 左メニューが常に見えているので、開く操作が要らない。 */
.th-burger{display:none;background:none;border:0;padding:8px;margin:0 2px 0 -4px;
  color:var(--ink);cursor:pointer;border-radius:10px;line-height:0}
.th-burger:hover{background:var(--sand)}
/* ★★閉じる × は **☰ と同じ位置（左上）**に置く。引き出しはヘッダーごと覆うので、
   開けたときに ☰ が隠れる。同じ場所を押せば閉じる、が効くようにするため
   （右上に置くと「開けた指の位置」と閉じる場所が画面の端から端になる）。 */
.nav-close{display:none;position:absolute;left:6px;top:4px;background:none;border:0;
  font-size:26px;line-height:1;color:var(--muted);cursor:pointer;padding:8px 12px;font-family:inherit}
.nav-scrim{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つで作ると、アイコンを持たない項目が出たときに文字だけ左へ戻る。
   ★★2026-09-08: スマホを**引き出し**にしたので、出し分けは `nav-sp`（スマホだけ＝
     ハブの「ツール」）の1つだけになった。**引き出しにはPCと同じ姿を出す。**
     出し分けを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}
  /* =====================================================================
     ★★★スマホのメニューは「引き出し」（2026-09-08・利用者の指示）
     ---------------------------------------------------------------------
     ⚠ **下部ナビ（5項目）はやめた。** それまでは画面の下に5項目を並べていたが、
       ①「共有設定」と「使い方」は入りきらず**スマホからは辿り着けなかった**
       ②物件調査の4つも「ツール」の奥にしか無く、行き先が2段になっていた
       ③本文の下に常に70px 取られていた。
     ★引き出しには**PCの左メニューをそのまま全部出す**（群の見出し・アイコン・
       現在地・「準備中」の印も同じ）。**見せ方を2つ持たない。**
     ★★閉じているあいだは `visibility:hidden` にする。`transform` だけで画面の外へ
       追い出すと、**中のリンクが読み上げと Tab に残る**（見えないものを順に辿る）。
     ★重なり順は 62（引き出し）／61（覆い）。**はじめての案内（70）より下**にする ——
       案内は引き出しの項目を指すので、案内のほうが手前でないと穴が開かない。 */
  .th-burger{display:inline-flex;align-items:center}
  .nav-close{display:block}
  .nav-scrim{display:block;position:fixed;inset:0;z-index:61;background:rgba(35,26,18,.5)}
  .nav-scrim[hidden]{display:none}
  .app-nav{position:fixed;left:0;top:0;bottom:0;right:auto;z-index:62;
    width:min(300px,86vw);background:var(--surface);border-right:1px solid var(--line);
    box-shadow:6px 0 24px rgba(35,26,18,.18);
    padding:12px 12px calc(20px + env(safe-area-inset-bottom));
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    transform:translateX(-100%);visibility:hidden}
  body.nav-open .app-nav{transform:none;visibility:visible}
  /* ★★★**引き出しに transition を付けないこと**（2026-09-08 に実機で見つけた）。
     `visibility:hidden` の要素の `transform` を transition で戻すと、Chrome は
     **`currentTime:0` のまま止まった動き**を作り、引き出しは -300px に居座る
     （`nav-open` は付き、`visibility` は visible になるのに、開いて見えない）。
     ⚠ この日、案内の枠でも同じ壊れ方をしている。**動きは飾りで、開くことが本体。**
     ★案内も引き出しを開けてから指す先を測るので、動かさないほうが正しい。 */
  .app-nav ul{padding-top:34px}
  /* ★「ツール」（ハブ）はスマホだけ。★引き出しに調査ツール4つが直接並ぶようになったが、
     ハブそのものはサンプルや使い方のカードを置いた**画面**なので残す。 */
  .app-nav .nav-sp{display:block}
  .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}
  /* ★下部ナビをやめたので、下の余白も要らなくなった（本文が画面の下まで使える）。
     ★残数のバーも最下部へ戻した（重なる相手がもう無い）。 */
  /* ★引き出しが開いているあいだは、後ろの本文を動かさない。 */
  body.nav-open{overflow:hidden}
}

/* =====================================================================
   アプリ画面の配色（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;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease}
.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}
/* ===== 数字のカードに触れたときの手当て（2026-09-08）=====
   ★★**押せるものに見せない。** 押しても何も起きないカードなので、持ち上げるのは
     2pxまでにし、カーソルも変えない。8pxも浮かせて影を強くすると「押せる」に見え、
     押して何も起きないことを確かめさせることになる。
   ★★**`border-color` を触らない。** 下段のカードは左の帯（`--tone-neutral` /
     `--tone-warn`）で意味を出しており、`border-color` の一括指定は**その帯まで塗り替える**。
     色は影だけで足す。
   ★触れて得があるのは**注記が読めるようになる**こと。薄い字（--muted）を本文の濃さに
     戻す。数字は 3% だけ大きくする（左端をそろえたまま伸びるように transform-origin は左）。
   ★カードどうしを比べる目盛りは無いので、数字を少し大きくしても別の値には見えない
     （グラフの棒とはここが違う）。 */
.kpi-card:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(35,26,18,.13)}
.kpi-value{transition:transform .18s cubic-bezier(.34,1.56,.64,1);transform-origin:left center}
.kpi-card:hover .kpi-value{transform:scale(1.03)}
.kpi-note{font-size:11.5px;color:var(--muted);margin:6px 0 0;line-height:1.6;
  transition:color .18s ease}
.kpi-card:hover .kpi-note{color:var(--ink)}
.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}
/* ★`overflow-y:hidden` を明示する。`overflow-x:auto` だけだと縦も auto と見なされ、
   吹き出しが数px はみ出した瞬間に**縦のスクロールバーが出て**グラフが揺れる。 */
.chart-body{margin-top:10px;overflow-x:auto;overflow-y:hidden}
/* ★直接の子だけに最小幅を与える。円グラフは .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}
.pie-list li{border-radius:8px;padding:3px 6px;margin:0 -6px;transition:background .15s ease}
.pie-list li.is-on{background:var(--sand)}

/* ===== グラフに触れたときの手当て（2026-09-08）=====
   ★★**高さ・角度・長さは値そのものなので動かさない。** 触れた印は
     ①横にすこし膨らむ ②明るくする ③白い縁 ④その月の帯に下敷きを敷く、の4つで出す。
     棒を持ち上げると軸から離れて値が変わって見え、円の切片を大きくすると
     割合が変わって見える。**動かしてよいのは「値を表していない向き」だけ。**
   ★色だけで「いま触れているもの」を示さない（下敷きの面と膨らみで、形でも分かる）。
   ★動きは 160〜220ms。長くすると月から月へ移るときに前の月の動きが残って、
     どれを読んでいるのか分からなくなる。 */
.chart-body{position:relative}
/* 当たり判定。★見えないが**いちばん上**にある（棒と棒のあいだでも反応させるため） */
.ch-hit{fill:transparent}
/* 触れている月の下敷き。★棒の背中に敷く（棒より先に描いてある） */
.ch-plate{fill:var(--brown);opacity:0;transition:opacity .16s ease}
.ch-plate.is-on{opacity:.07}

.ch-bar{transform-box:fill-box;transform-origin:50% 50%;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),opacity .18s ease,filter .18s ease}
.ch-bar.is-on{transform:scaleX(1.1);filter:brightness(1.06);stroke:#fff;stroke-width:1.5}
/* ★触れていない月は薄くする。消さない（比べる相手が見えなくなると、
     その月が高いのか低いのか分からなくなる） */
.ch-bar.is-off{opacity:.4}

.ch-dot{transform-box:fill-box;transform-origin:50% 50%;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1)}
.ch-dot.is-on{transform:scale(1.8)}

/* 円グラフの切片。★中心から見た**その切片の向き**へ出す（一律にずらすと、
   下半分の切片が円へ食い込む）。向きは layoutPie の `pop` から画面側が入れる */
.ch-slice{transition:transform .2s cubic-bezier(.34,1.56,.64,1),filter .2s ease}
.ch-slice.is-on{transform:translate(var(--px,0px),var(--py,0px));filter:brightness(1.06)}

/* ヒートマップで触れているマスの枠。★マスそのものを拡大しない
   （隣に重なって、どのマスを読んでいるのか分からなくなる） */
@keyframes ch-pop{from{transform:scale(1.45)}to{transform:scale(1)}}
.ch-ring{fill:none;stroke:var(--ink);stroke-width:2;opacity:0;
  transform-box:fill-box;transform-origin:50% 50%;transition:opacity .14s ease}
.ch-ring.is-on{opacity:1;animation:ch-pop .22s cubic-bezier(.34,1.56,.64,1)}

/* 数字の吹き出し。★器（.chart-body）の中に置く。器は横スクロールするので、
   外に出すとスクロールした先で棒と吹き出しがずれる。
   ★`pointer-events:none`。これが無いと、吹き出し自身が指を受けて
   その下の棒から離れ、出たり消えたりを繰り返す。 */
.ch-tip{position:absolute;left:0;top:0;z-index:5;pointer-events:none;
  max-width:300px;background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:12px;padding:8px 11px;
  box-shadow:0 8px 24px rgba(35,26,18,.16);font-size:12.5px;line-height:1.6;
  opacity:0;transform:translateY(4px);transition:opacity .13s ease,transform .13s ease}
.ch-tip.is-on{opacity:1;transform:none}
.ch-tip .ch-h{font-weight:700;font-size:12px;color:var(--muted);margin:0 0 3px}
.ch-tip .ch-rows{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:2px 8px;align-items:center}
/* ★吹き出しの中は**線**の印にする。塗りの四角は凡例の役で、この密度では
     色の面が数字より目立ってしまう */
.ch-tip .k{width:12px;height:3px;border-radius:2px}
.ch-tip .n{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ch-tip .v{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
/* ★区切りは3列を通した1本の線にする（セルごとに罫線を引くと隙間で途切れる） */
.ch-tip .ch-sum{grid-column:1/-1;height:1px;background:var(--line);margin:4px 0 2px}
.ch-tip .ch-note{color:var(--muted);font-size:11.5px;margin:3px 0 0}
/* ★キーボードでも同じ数字が出る。左右キーで月を選べることを、枠を出して知らせる */
.chart-body[tabindex]:focus-visible{outline:3px solid #C79A62;outline-offset:2px;border-radius:10px}

@media (prefers-reduced-motion: reduce){
  /* ★動きは止めるが、印は消さない（明るさ・白い縁・下敷き・枠・影・行の色は残る）。 */
  .ch-bar.is-on,.ch-dot.is-on,.ch-slice.is-on{transform:none}
  .ch-ring.is-on{animation:none}
  .ch-tip{transform:none}
  .kpi-card:hover,.kpi-card:hover .kpi-value{transform:none}
}

/* ヒートマップ */
.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}
/* ★行に触れたら、その行だけ地の色を変える。12か月ぶんは 1,325px あって1画面に収まらず、
     横へ送った先で**いま見ている行を見失う**（sticky の科目名だけでは目が迷子になる）。
   ★★**1列目も同じ強さで塗り直す。** sticky のセルは自前の背景を持っているので、
     行だけ塗ると**科目名のところだけ白いまま**残る。
   ★★**行を動かさない（transform を使わない）。** `tr` に transform を掛けると
     包含ブロックができて、**1列目の `position:sticky` が効かなくなる**。
     ここは動かさずに、色で示す。 */
.cf tbody tr:not(.cf-group):hover th,
.cf tbody tr:not(.cf-group):hover td,
.cf tbody tr:not(.cf-group):hover th:first-child,
.cf tbody tr:not(.cf-group):hover td:first-child{background:#EFE4D6}

@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}
}

/* ===== 物件一覧に足したもの（2026-09-08・利用者の指示）===== */
/* 築年数・購入年月・管理会社・融資条件の1行。★本文より弱く、住所の行より少し強く。
   ★入っている項目だけ並ぶので、行ごと消えることがある（空の行を残さない）。 */
.pf-terms{margin:2px 0 0;font-size:12.5px;color:var(--ink);opacity:.86;line-height:1.7}

/* 自分の並びを動かす（↑↓ と、掴む取っ手）。★カードでは右上に小さく置く
   （カードの主役は数字なので、操作が数字より目立たないようにする）。
   ★表では「並び」の列の中に入るので、位置は決めない。 */
.pf-move{display:inline-flex;gap:4px;align-items:center}
.pf-card .pf-move{position:absolute;top:10px;right:10px}
/* 掴む取っ手。★見た目の合図で、実際に掴めるのはカード・行ごと。
   ★`aria-hidden` を付けてある（読み上げには↑↓のボタンだけが要る）。 */
.pf-grip{color:var(--muted);font-size:13px;line-height:1;padding:0 2px;cursor:grab;user-select:none}
.pf-card[draggable="true"],.pf-table tr[draggable="true"]{cursor:grab}
.pf-card[draggable="true"]:active,.pf-table tr[draggable="true"]:active{cursor:grabbing}
/* 掴んでいるもの。★消さずに薄くする（どこから運んでいるのかが分かるように） */
.pf-card.is-dragging,.pf-table tr.is-dragging{opacity:.45}
/* 落とし先。★★**色だけで示さない。** 太い線を1本引いて、どこに入るのかを形でも出す */
.pf-card.is-dragover{outline:2px solid var(--brown);outline-offset:2px}
.pf-table tr.is-dragover td{box-shadow:inset 0 3px 0 var(--brown)}
/* 表の「並び」の列。★数字の列より狭く、折り返さない */
.pf-movecol{width:1%;white-space:nowrap;padding-left:8px !important;padding-right:8px !important}
.pf-table thead th.pf-movecol{padding:9px 8px;font-size:12px;color:var(--muted)}
.pf-move-btn{width:28px;height:28px;min-height:28px;padding:0;line-height:1;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  border-radius:8px;cursor:pointer;font-size:13px;font-family:inherit;
  transition:background .15s ease,transform .15s cubic-bezier(.34,1.56,.64,1)}
.pf-move-btn:hover:not(:disabled){background:var(--sand);transform:translateY(-1px)}
/* ★★端の物件では**押せなくする**（押しても動かないボタンを出さない）。
   色だけで示さず、`disabled` で実際に押せなくする。 */
.pf-move-btn:disabled{opacity:.35;cursor:default}
/* ★カードの中で右上に置くので、器に位置の基準が要る */
.pf-card{position:relative}
/* ★ボタンのぶん、札や見出しが重ならないように右を空ける */
.pf-card .pf-card-head{padding-right:70px}

/* 並びの向き（昇順・降順）。★「自分の並び」のときは JS が hidden にする */
.pf-dir{border:1px solid var(--line);background:var(--surface);color:var(--ink);
  border-radius:9px;padding:7px 11px;min-height:38px;font-size:13px;font-weight:600;
  cursor:pointer;font-family:inherit;white-space:nowrap}
.pf-dir:hover{background:var(--sand)}

@media (prefers-reduced-motion: reduce){
  .pf-move-btn:hover:not(:disabled){transform:none}
}

/* 物件マップ（#/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)}

/* ===== LPの見た目（2026-09-07 に作り直し）=====
   ★★このCSSは app / share / guide も読む。**`:root` と既存の規則を変えないこと。**
     LP専用の指定は、index.html だけが持つ `.is-lp` の下に閉じ込める（詳細度で勝つ）。
   ★★一度「地味・スカスカ」と差し戻している。原因は3つだった:
     ①節の上下余白が大きすぎて、画面のほとんどが空白 ②中身を details に畳みすぎて
     ページが薄く見える ③CTA帯が茶、フッターが紺で、暗い色が2つあり締まらない。
     → 余白を詰め、6種類の一覧は表に出し、暗い色は**フッターと同じ紺**に統一した。
   ★アクセントは褐色1色。画面写真が青系なので、枠や飾りに青を足すと写真とけんかする。 */

/* ---- 下地 ---- */
.is-lp{background:#fff}
.is-lp .section{padding:64px 0;border:0;background:#fff}
.is-lp .wrap{max-width:1120px;padding-inline:28px}
.is-lp .section h2{font-size:clamp(25px,2.7vw,34px);line-height:1.5;letter-spacing:-.02em;
  margin:0 0 14px;color:#1E1813;border:0;padding:0;font-weight:800;text-wrap:balance}
.is-lp .section-note{font-size:15px;line-height:1.95;color:#5C5147;margin:0 0 4px;max-width:62ch}
.is-lp .section-note b{color:#1E1813}
/* 節の名札。短い罫と組にして、見出しの前に置く（節の切れ目が余白だけだと流れて見える）。 */
.is-lp .section-label{display:flex;align-items:center;gap:10px;margin:0 0 14px;
  font-size:11.5px;font-weight:700;letter-spacing:.14em;color:var(--brown)}
.is-lp .section-label::before{content:"";width:22px;height:2px;background:var(--brown);flex:none}

/* ---- ヘッダー ---- */
.is-lp .toolhead{background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid #EDE7DE;box-shadow:none}
.is-lp .th-nav a{font-size:13.5px;color:#5C5147}
.is-lp .th-nav a:hover{color:var(--brown-deep)}
.is-lp .th-nav .th-saved{background:var(--brown);color:#fff;border:0;border-radius:9px;
  padding:10px 16px;font-weight:700}
.is-lp .th-nav .th-saved:hover{background:var(--brown-deep);color:#fff}

/* ---- ヒーロー ----
   ★中央寄せ1段にすると、幅の広い画面でひたすら空白が伸びる。本文と実画面を横に並べる。 */
.is-lp .hero{padding:64px 0 72px;background:linear-gradient(180deg,#FCFAF7 0%,#fff 100%);border-bottom:1px solid #F0EAE1}
/* ★★`grid-template-areas` を必ず上書きすること。素の .hero-in は
     "copy" "screen" "photo" の名前付き領域で並べているので、列だけ変えても
     **画面写真が2行目に落ちる**（列は効いているのに縦に並ぶので原因が分かりにくい）。
   ★★2026-09-07: キービジュアルは**人物写真**（利用者の指示）。本文が左、写真が右。
     ここに画面写真を置いてはいけない——右半分（約450px）に 1240px のダッシュボードを
     入れると、**数字も見出しも5px相当まで縮んで何の画面か分からなくなる**
     （一度そうして差し戻された）。**情報の密な画面は、幅を削った時点で働かなくなる。**
     実画面は「よくある困りごと」の節で、幅いっぱいに見せている。 */
.is-lp .hero-in{max-width:1120px;margin:0 auto;padding:0 28px;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.72fr);grid-template-areas:"copy photo";
  gap:56px;align-items:center;text-align:left}
.is-lp .hero-photo{margin:0;align-self:center}
.is-lp .hero-photo img{display:block;width:100%;height:auto;border-radius:14px;
  box-shadow:0 24px 60px -30px rgba(30,24,19,.45)}
.is-lp .hero-copy{margin:0}
.is-lp .hero-eyebrow{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--brown);margin:0 0 18px}
/* ★★H1の最大値は「1行の字数 × 字送り」が列幅に収まるかで決める。
   ★2026-09-07 に見出しを差し替えた（利用者の指示）。長いほうの行が
     「物件ごとの収支が、ひと目でわかる。」の **17字** になり、43px のままだと
     2列のヒーローの左列（1120px幅で586px）に入らず**3行に折り返した**。
     17字 × 約0.97em ＝ 約16.5em なので、586 ÷ 16.5 ＝ **35px が上限**。
   ★2026-09-11 にまた差し替えた（利用者の指示）。長いほうの行は
     「ひと目でわかる経営に。」の **11字**。11字 × 約0.97em ＝ 約10.7em なので
     上限は 586 ÷ 10.7 ＝ **約54px** まで上がった。
   ★★同日、利用者の指示で **大きくした**。⚠ **上限（3つ目）だけ上げても効かない**
     —— `clamp` は真ん中の `vw` が効いているので、1120px では 2.9vw ＝ 32.5px にしか
     ならず、35→50 に上げても見た目が変わらない。**両方上げること。**
     `4.4vw` の根拠: 2列で最も狭くなるのは 1001px（1000px 以下は1列）で、
     そのとき左列は (1001−56−56) ÷ 1.72 ＝ **517px**、11字の上限は 517 ÷ 10.7 ＝ 48px。
     4.4vw は 1001px で 44px なので収まる。1120px では 49px、以降は 50px で頭打ち。
   ★★字数を変えたら、この数字も計算し直すこと。**指定した改行が守られているか**を
     必ず実機の幅で見る（列だけ広げても、字が大きければまた折り返す）。
   ★1000px 以下は1列になって列幅が一気に広がるので、下の media で大きくし直す。 */
.is-lp .hero h1{font-size:clamp(29px,4.4vw,50px);line-height:1.34;letter-spacing:-.03em;
  font-weight:800;color:#1E1813;margin:0 0 20px}
.is-lp .hero-lead{font-size:16px;line-height:2;color:#5C5147;margin:0 0 28px;max-width:36em}
.is-lp .hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin:0}
.is-lp .hero-cta .btn{border-radius:10px;font-size:15px;font-weight:700;padding:15px 26px;box-shadow:none}
.is-lp .hero-cta .btn.lg{background:var(--brown);border:1px solid var(--brown);color:#fff}
.is-lp .hero-cta .btn.lg:hover{background:var(--brown-deep);border-color:var(--brown-deep)}
.is-lp .hero-cta .btn.sub{background:#fff;border:1px solid #DDD4C7;color:#1E1813}
.is-lp .hero-cta .btn.sub:hover{border-color:var(--brown);color:var(--brown-deep)}
/* 実画面は右に置き、右端をわずかに画面外へ逃がす（切れているほうが「続き」が想像できる）。 */
/* ★元画像の下端はグラフの途中で終わる。枠でぶつ切りにすると未完成に見えるので、
     下だけ白へぼかして「まだ続く」ことを示す（画像自体は加工しない）。 */


/* ---- できること（Point 1〜6）＋ 読み取りの図 ---- */
.is-lp .intro{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:52px;align-items:center}
.is-lp .intro>div{min-width:0}
.is-lp .pointlist{list-style:none;margin:26px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.is-lp .pointlist li{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:baseline;gap:12px;
  padding:15px 0;border-bottom:1px solid #F0EAE1;font-size:14.5px;line-height:1.7;
  font-weight:700;color:#1E1813}
.is-lp .pointlist span{font-size:0;color:var(--brown);font-weight:800;font-variant-numeric:tabular-nums}
/* ★`Point N` の札はそのまま残す（テストが markup を見ている）。画面には番号だけを出す。 */
.is-lp .pointlist span::after{content:"0" counter(pt);font-size:15px;letter-spacing:-.02em}
.is-lp .pointlist{counter-reset:pt}
.is-lp .pointlist li{counter-increment:pt}
/* 「できること」の右。★SVGなので枠も影も付けない（図の中で紙に影が付いている）。 */
.is-lp .lp-ocr{margin:0}
.is-lp .lp-ocr img{display:block;width:100%;height:auto}
.is-lp .lp-ocr figcaption{margin-top:6px;font-size:11.5px;color:#8A7B69;text-align:center}

/* ---- 左右2段組の節 ---- */
.is-lp .share-sec{background:#FBF8F4}
.is-lp .lp-feature{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:52px;align-items:center}
.is-lp .lp-feature.is-rev>div{order:2}
.is-lp .lp-feature.is-rev>figure{order:1}
.is-lp .lp-feature>div{min-width:0}

/* ---- 画面写真の枠 ---- */
.is-lp .shot{margin:0;border:1px solid #E7E1D8;border-radius:12px;background:#fff;overflow:hidden;
  box-shadow:0 18px 44px -30px rgba(30,24,19,.35);min-width:0}
.is-lp .shot img{display:block;width:100%;height:auto}
.is-lp .shot figcaption{padding:13px 18px;font-size:12.5px;color:#6A5D50;border-top:1px solid #F0EAE1;background:#fff}
/* 元画像の余白を切って、操作している所だけを見せる。img の寸法・比率は変えず、枠で切る。
   書き出し: 1240×820 の左260・上190から960×260。 */
.is-lp .lp-export-crop{aspect-ratio:960/260;overflow:hidden;background:#F5F7FA}
.is-lp .lp-export-crop img{width:129.1667%;max-width:none;transform:translate(-20.9677%,-23.1707%)}
/* ---- 画面を並べる（見えるもの）----
   ★★2026-09-07（利用者の指示）: **収支ダッシュボードが左、地図と円グラフが右。**
     重ねるのをやめて、左右に並べる形にした。
   ★★★**重ねる形に戻さないこと。** 重ねると、どこに置いても
     ダッシュボードの数字のどれかが必ず隠れる:
       - 右下に重ねる → **KPIの数字が途中で切れる**（「12,10…」「479,00…」）
       - 左下に重ねる → ナビの上なので数字は無事だが、**左右の指定と両立しない**
     切れた数字は演出ではなく**壊れて見える**。並べれば、どの画面も丸ごと読める。
   ★★右の2枚は**上端をそろえて上から詰める**（`align-items:start`）。
     左に高さを合わせようとすると、(a) 真ん中に大きな隙間ができて置き忘れに見えるか、
     (b) 引き伸ばして地図と円グラフの縦横比が崩れるか、どちらかになる。
     余りは右下に置く。**左右の高さをそろえないこと。** */
.is-lp .lp-collage{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:24px;align-items:start;margin-top:32px}
.is-lp .lp-collage-side{display:grid;gap:16px}
.is-lp .lp-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;align-items:start;margin-top:32px}
.is-lp .docs-keep .shot{margin-top:30px}
.is-lp .lp-document-key{margin:18px 0 0;font-size:14px;line-height:1.9;color:#6A5D50}
.is-lp .lp-document-key b{color:#1E1813}

/* ---- 共有 ---- */
/* ★★3枚に増やした（2026-09-07・利用者の指示。税理士／銀行／家族）。
   ★画像は上いっぱい。カードの余白は本文だけに付ける（`.tool-cards` と同じ作り）。 */
.is-lp .share-cards{list-style:none;margin:30px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.is-lp .share-cards li{padding:0 0 24px;border:1px solid #E7E1D8;border-radius:12px;background:#fff;
  box-shadow:none;overflow:hidden}
/* ★写真は 16/10 に固定して `cover` で切る（`.tool-shot` と同じ比）。
   ★★比を固定しないと、写真を差し替えた日にカードの高さが3枚バラバラになる。 */
.is-lp .share-shot{margin:0 0 18px;background:#FBF8F4;border-bottom:1px solid #F0EAE1}
.is-lp .share-shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.is-lp .share-cards li.is-accent{border-color:#D6BE9F;background:#FFFDFA}
.is-lp .share-who{margin:0 24px 8px;font-size:11.5px;font-weight:700;letter-spacing:.1em;color:var(--brown)}
.is-lp .share-cards h3{margin:0 24px 10px;font-size:18px;font-weight:800;color:#1E1813;letter-spacing:-.02em;line-height:1.6}
.is-lp .share-cards p{margin:0 24px;font-size:13.5px;line-height:1.9;color:#6A5D50}
.is-lp .share-cards p b{color:#1E1813}

/* ---- 折りたたみ ----
   ★★畳んでよいのは「条件・但し書き・裏づけ」だけ。**売りどころを畳まない**
     （6種類の一覧を畳んで「スカスカ」と言われた）。 */
.is-lp details.keep-fold,.is-lp details.plan-fold,.is-lp details.tier-fold{
  background:transparent;border:0;border-top:1px solid #E7E1D8;border-radius:0;margin-top:26px}
.is-lp details.keep-fold>summary,.is-lp details.plan-fold>summary,.is-lp details.tier-fold>summary{
  padding:16px 0;font-size:13px;color:#6A5D50;font-weight:700}
.is-lp details.keep-fold>*:not(summary),.is-lp details.plan-fold>*:not(summary),
.is-lp details.tier-fold>*:not(summary){margin-left:0;margin-right:0}
.is-lp details .hint{color:#6A5D50;font-size:13px;line-height:1.95}

/* ---- 無料ツール ---- */
.is-lp .tools-sec{background:#fff}
.is-lp .tool-cards{gap:30px;margin-top:32px}
.is-lp .tool-cards li{padding:0 0 20px;border:1px solid #E7E1D8;border-radius:12px;gap:10px;
  overflow:hidden;background:#fff;box-shadow:none}
.is-lp .tool-cards li:hover{border-color:#D6BE9F}
.is-lp .tool-shot{margin:0 0 14px;border:0;border-bottom:1px solid #F0EAE1;border-radius:0;background:#F5F7FA}
.is-lp .tool-cards h3{margin:0 20px;font-size:19px;font-weight:800;letter-spacing:-.02em;color:#1E1813}
.is-lp .tool-cards p{margin:0 20px;font-size:14px;line-height:1.9;color:#6A5D50;flex:1}
.is-lp .tool-cards li>a{margin:4px 20px 0;font-size:14px;font-weight:700;color:var(--brown-deep);
  border:0;padding:6px 0;min-height:44px;display:inline-flex;align-items:center;gap:8px}
.is-lp .tool-cards li>a::after{content:"→"}
.is-lp .tool-cards li>a:hover{text-decoration:underline;text-underline-offset:5px}

/* ---- 料金 ---- */
.is-lp #pricing{background:#FBF8F4;border-top:1px solid #F0EAE1;border-bottom:1px solid #F0EAE1}
.is-lp .tier-note.is-lead{font-size:13.5px;line-height:1.9;color:#4A3F35;background:#F3E9DA;
  border-left:3px solid var(--brown);border-radius:0 8px 8px 0;padding:16px 20px;margin:26px 0 0}
.is-lp .price-tiers{gap:0;margin-top:26px;border:1px solid #E3DACC;border-radius:12px;overflow:hidden;background:#fff}
.is-lp .price-tiers>li{padding:26px 24px;border:0;border-right:1px solid #EFE7DA;border-radius:0;
  background:transparent;box-shadow:none}
.is-lp .price-tiers>li:last-child{border-right:0}
.is-lp .price-tiers>li.is-free{background:#F7F1E7}
.is-lp .tier-name{font-size:13.5px;font-weight:700;color:#5C5147;margin:0 0 10px}
.is-lp .tier-price{margin:0 0 10px}
.is-lp .tier-price b{font-size:34px;font-weight:800;color:#1E1813;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
/* ★2026-09-09・利用者の指摘「円/月（税込）と〜100棟が細い」。
   単位と対象棟数は**金額と同じくらい効く情報**なので、読める大きさにする。 */
.is-lp .tier-price small{display:block;margin-left:0;font-size:14px;color:#5C5147;font-weight:600}
.is-lp .tier-cap{font-size:16px;font-weight:700;color:#3A322A;margin:0}
.is-lp .plan-table-wrap{margin-top:4px;border-radius:8px}
.is-lp .plan-table th[scope="row"]{max-width:260px}

/* ---- FAQ ---- */
.is-lp .faq{gap:0 36px}
.is-lp .faq details{border:0;border-bottom:1px solid #E7E1D8;border-radius:0;background:none}
.is-lp .faq summary{padding:19px 0;font-size:14px;line-height:1.8;color:#1E1813}
.is-lp .faq .a{padding:6px 0 20px;color:#6A5D50;font-size:13.5px;line-height:1.95}
.is-lp .faq-more{grid-column:1/-1}

@media(max-width:1000px){
  /* ★3列のままだと1枚が280px以下になり、図の中身が読めない。 */
  .is-lp .share-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* ★★キービジュアルは1列に積む。ここに `grid-template-columns` を2列で書いた
       ルールを**あとから足さないこと**（2026-09-07に直した実害）。
       `grid-template-areas` は "copy" "photo" ＝**1列ぶんの名前しか無い**ので、
       列だけ2つにすると本文も写真も1列目に入り、**右の1列がまるごと空**になる。
       画面は「文字も写真も左半分に寄って、右が白い」崩れ方をする。 */
  .is-lp .hero-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "photo";gap:28px}
  .is-lp .hero-photo{max-width:340px;margin-inline:auto}
  /* ★1列になると本文の列が画面いっぱいに広がるので、見出しを大きく戻す。
       2列用の上限（35px）のままだと、広い列に小さな見出しが浮いて見える。 */
  /* ★1列は左列の制約が消えるので、もっと大きくできる（1000px で1行あたり約88px まで）。
     2026-09-11: 11字になったので 40 → 48px。⚠ ここも vw を上げないと効かない。 */
  .is-lp .hero h1{font-size:clamp(29px,5.2vw,48px)}
  .is-lp .hero-lead{max-width:none}
  .is-lp .lp-feature,.is-lp .lp-feature.is-rev{grid-template-columns:1fr;gap:30px}
  .is-lp .lp-feature.is-rev>div,.is-lp .lp-feature.is-rev>figure{order:0}
  .is-lp .intro{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:36px}
}
@media(max-width:900px){
  /* ★ヘッダーの項目は増やさない。狭い画面で先に折り返すのは右端の「大家のセンセイをひらく」。 */
  .is-lp .toolhead-in{padding:12px 16px;gap:6px}
  .is-lp .th-brand svg{width:28px;height:28px;flex-shrink:0}
  .is-lp .th-name{font-size:12px}
  /* ★★狭い画面でも「大家のセンセイをひらく」だけは残す（2026-09-07）。
     素の `.th-nav a{display:none}` は**節へのリンクごとボタンも消す**ので、
     スマホのヘッダーがロゴだけになっていた。消してよいのは節へのリンクで、
     いちばん押してほしいものまで一緒に消さない。
     ★ここに項目を足さないこと。320px でも収まるのは「ロゴ＋名前＋ボタン1つ」まで。 */
  .is-lp .th-nav .th-saved{display:inline-flex;align-items:center;
    padding:9px 12px;font-size:12px;margin:0;white-space:nowrap}
  .is-lp .price-tiers>li:nth-child(2){border-right:0}
  .is-lp .price-tiers>li:nth-child(-n+2){border-bottom:1px solid #EFE7DA}
}
@media(max-width:767px){
  .is-lp .wrap,.is-lp .hero-in{padding-inline:20px}
  .is-lp .section{padding:52px 0;scroll-margin-top:64px}
  .is-lp .hero{padding:36px 0 48px}
  .is-lp .hero h1{font-size:29px;line-height:1.5}
  /* ★★2026-09-07: **見出しの改行を消さない。** 以前はここで全部消していたが、
       見出しが「家賃も、経費も。／物件ごとの収支が、ひと目でわかる。」に変わってから、
       消すと **「物件ご／との」「わ／かる。」** のように語の途中で折り返した。
       指定した位置で折るほうが読める。狭い画面用の追加の改行は `.br-sp`。 */
  .is-lp .hero-lead{font-size:14.5px;margin-bottom:24px}
  .is-lp .hero-cta{gap:10px}
  .is-lp .hero-cta .btn{width:100%;justify-content:center}
  .is-lp .hero-screen figcaption{text-align:left}
  .is-lp .section h2 br{display:none}
  .is-lp .pointlist{grid-template-columns:1fr;gap:0}
  .is-lp .intro{grid-template-columns:1fr;gap:32px}
  .is-lp .lp-ocr{max-width:420px;margin:0 auto}
  .is-lp .share-cards,.is-lp .lp-results{grid-template-columns:1fr}
  /* ===== 狭い画面での画面写真の決めごと（2026-09-07）=====
     ★★**読ませようとしない。ただし「空に見える」ものは作らない。**
       348px の幅に 1240〜1400px の画面を入れると 25〜28% まで縮み、
       本文（12〜13px）は3〜4px相当＝**にじんだ灰色**になる。
     ★形そのものが意味を持つもの（地図・棒グラフ・円グラフ・ヒートマップ・
       書類の一覧の格子）は**そのまま全部見せる**。縮んでも「何の絵か」は伝わる。
     ★中身を読ませないと意味が伝わらないもの（合計の数字・書き出し形式のボタン）は
       **その部分だけに寄せる**。全体を出しても、節が約束したものが画面に残らない。 */
  /* ダッシュボード＝合計の数字の帯だけ。
     元画像1240×820のうち x250 y372 から 985×335 を見せる:
       幅 = 1240/985、左 = -250/1240、上 = -372/820、箱の比 = 985/335 */
  .is-lp .lp-collage-main{aspect-ratio:985/335}
  .is-lp .lp-collage-main img{width:125.888%;max-width:none;
    transform:translate(-20.1613%,-45.3659%)}
  /* 書き出し画面＝形式のボタン列だけ。
     元画像1240×820のうち x745 y274 から 480×80 を見せる:
       幅 = 1240/480、左 = -745/1240、上 = -274/820、箱の比 = 480/80 */
  .is-lp .lp-export-crop{aspect-ratio:480/80}
  .is-lp .lp-export-crop img{width:258.3333%;transform:translate(-60.0806%,-33.4146%)}
  /* ★狭い画面では左右をやめて縦に1列。2列のままだと1枚が170px以下になり、
       地図も円グラフも「何の絵か」すら分からなくなる。 */
  .is-lp .lp-collage{grid-template-columns:minmax(0,1fr);gap:16px}
  .is-lp .lp-results{gap:18px;margin-top:24px}
  .is-lp .share-cards{gap:16px}
  .is-lp .tool-cards{gap:22px}
  .is-lp .faq{grid-template-columns:1fr}
}
@media(max-width:640px){
  .is-lp .price-tiers>li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
    gap:4px 12px;padding:20px;border-right:0;border-bottom:1px solid #EFE7DA}
  .is-lp .price-tiers>li:last-child{border-bottom:0}
  .is-lp .tier-name{margin:0}
  .is-lp .tier-price{grid-column:2;grid-row:1/3;margin:0;text-align:right}
  .is-lp .tier-price b{font-size:28px}
  .is-lp .tier-cap{grid-column:1}
  .is-lp .plan-table th[scope="row"]{min-width:150px;max-width:170px;font-size:12px}
}

/* =====================================================================
   はじめての人への案内（.tour・2026-09-08・利用者の指示）
   ---------------------------------------------------------------------
   ★★穴は「覆い」ではなく**指している枠の巨大な影**で開ける
     （`.tour-ring` の box-shadow）。覆いを別に敷いて、指す項目だけ z-index を
     持ち上げる作りにすると、下部ナビ（position:fixed）や sticky のサイドバーと
     重なり順を取り合って、**端末ごとに違うものが手前に出る**。
   ★★指しているものは「見える」が「押せない」。案内の最中に別の画面へ飛ぶと、
     指す先が消えて案内が宙に浮く。行き先は吹き出しのボタンで渡す。
   ★覆いを押しても閉じない。4歩の途中で誤って消すと、`ooya_tour_done` が立って
     二度と自動では出ない（出し直しは「設定・バックアップ」から）。閉じるのは
     ×・「閉じる」・Esc の3つだけ。
   ★z-index はモーダル（80）より下、残数バー（60）より上。案内の最中に
     ログインのモーダルが出たら、そちらが手前でなければならない。 */
.tour{position:fixed;inset:0;z-index:70}
.tour[hidden]{display:none}
/* ★覆いそのものは色を持たない。色は `.tour-ring` の影が塗る（穴が空くのはそのため）。
   これが受けるのは「後ろを押させない」役だけ。 */
.tour-veil{position:absolute;inset:0}
/* ★★★**枠に transition を付けないこと**（2026-09-08 に実機で見つけた）。
   9999px の影を持つ要素の top/left/width/height を transition で動かすと、
   Chrome は**影を描かず、位置も古いまま**になる（インラインは新しい座標なのに、
   `getBoundingClientRect()` は前の歩の座標を返し続ける。動いている印も残らない）。
   ⚠ 覆いが暗くならない・枠が前の項目に居座る、という形で出る。
   ★歩の移動は**跳ぶ**。動きは飾りで、指す先が正しいことが本体。 */
.tour-ring{position:fixed;border-radius:12px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(35,26,18,.62), 0 0 0 3px var(--brown) inset;
  outline:2px solid #fff;outline-offset:0}
.tour-ring[hidden]{display:none}
/* ★指す先が見えないとき（スマホの「共有設定」「使い方」）は枠を出さない。
   代わりに覆いを自前で塗る。★塗らないと、札だけが宙に浮いて背景と混ざる。 */
.tour.is-card .tour-veil{background:rgba(35,26,18,.62)}

.tour-tip{position:fixed;width:min(340px,calc(100vw - 32px));background:var(--surface);
  color:var(--ink);border-radius:16px;padding:18px 18px 14px;
  box-shadow:0 24px 60px rgba(0,0,0,.3);text-align:left}
/* 札（矢印なし）は画面の真ん中に出す */
.tour.is-card .tour-tip{left:50%;top:50%;transform:translate(-50%,-50%);width:min(400px,calc(100vw - 32px))}
.tour-tip h2{margin:0 0 6px;font-size:16.5px;line-height:1.5}
.tour-tip p{margin:0 0 10px;font-size:13.5px;line-height:1.85;color:#4A3B2C}
.tour-tip .tour-note{margin:0 0 10px;font-size:12px;line-height:1.8;color:var(--muted);
  background:var(--sand);border-radius:10px;padding:9px 11px}
.tour-tip .tour-no{font-size:11.5px;font-weight:800;color:var(--brown-deep);letter-spacing:.04em;
  display:block;margin:0 0 4px}
.tour-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}
.tour-acts .btn{padding:8px 14px;min-height:36px;font-size:13px}
.tour-acts .tour-spacer{flex:1 1 auto}
.tour-close{position:absolute;right:10px;top:8px;background:none;border:0;font-size:20px;
  color:var(--muted);cursor:pointer;line-height:1;padding:6px 8px;font-family:inherit}
/* ★歩の位置を点で出す。数字（「2 / 4」）も別に出す —— 点だけだと、
   色の見分けが付かない人に何歩目かが伝わらない。 */
.tour-dots{display:flex;gap:5px}
.tour-dots i{width:6px;height:6px;border-radius:50%;background:#D9CBB6;display:block}
.tour-dots i.on{background:var(--brown)}
/* 吹き出しの三角。★指している側と反対の辺に出す。 */
.tour-tip::after{content:"";position:absolute;width:0;height:0;border:8px solid transparent}
/* ★★三角の位置は JS が `--tour-arrow` で渡す。**50% に固定しない** ——
   吹き出しは画面に収めるために丸められるので、丸めたあとの真ん中は
   もう指しているものの真ん中ではない（2026-09-08 に実機で発見）。 */
.tour-tip.s-right::after{left:-16px;top:calc(var(--tour-arrow,50%) - 8px);border-right-color:var(--surface)}
.tour-tip.s-left::after{right:-16px;top:calc(var(--tour-arrow,50%) - 8px);border-left-color:var(--surface)}
.tour-tip.s-below::after{left:calc(var(--tour-arrow,50%) - 8px);top:-16px;border-bottom-color:var(--surface)}
.tour-tip.s-above::after{left:calc(var(--tour-arrow,50%) - 8px);bottom:-16px;border-top-color:var(--surface)}
.tour.is-card .tour-tip::after{display:none}

@media (max-width:900px){
  /* ★スマホでは吹き出しを画面幅いっぱいに寄せる。下部ナビの上に出るので、
     三角は下向き（`s-above`）になる。 */
  .tour-tip{width:calc(100vw - 24px)}
}
/* ★動きを減らす設定でも、案内そのものは残す（動きだけ止める。2026-09-08 のグラフと
   同じ決めごと）。★枠はもともと動かさないので、ここで止めるものは無い ——
   それでも指定を置いておくのは、あとから transition を足されたときの受けとして。 */
@media (prefers-reduced-motion: reduce){
  .tour-ring{transition:none}
}

/* ===== 無料期間の帯（2026-09-09・利用者の指示。ヘッダーの下） ===== */
.free-band{background:#FBF4E8;border-bottom:1px solid #E8DCC6}
.free-band .wrap{padding:14px 24px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px}
.free-band .fb-main{margin:0;font-size:19px;line-height:1.5;color:#1E1813;letter-spacing:.01em}
.free-band .fb-main b{font-weight:800}
.free-band .fb-sub{margin:0;font-size:13.5px;line-height:1.7;color:#5C5147}
@media(max-width:767px){
  .free-band .wrap{padding:12px 18px;display:block}
  .free-band .fb-main{font-size:17px}
  .free-band .fb-sub{margin-top:4px;font-size:13px}
}

/* ===== ヘッダーのアカウント（2026-09-09・利用者の指摘「ログアウトボタンも必要」） ===== */
.th-acct{display:inline-flex;align-items:center;gap:8px;margin-left:6px}
.th-acct-who{font-size:12px;color:#5C5147;max-width:190px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.th-out{border:1px solid #E3DACC;background:#fff;color:#5C5147;border-radius:9px;
  padding:7px 12px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
.th-out:hover{background:#FBF4E8}
/* ★狭い画面ではメールを隠す。ボタンは残す（押せる場所を減らさない）。 */
@media(max-width:767px){ .th-acct-who{display:none} }

/* ===== 書類の中身（2026-09-09・利用者の指示） ===== */
.dv-modal{max-width:900px}
.dv-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.dv-body{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:18px;align-items:start}
.dv-shot img{width:100%;border-radius:12px;border:1px solid #E3DACC;cursor:zoom-in;display:block}
.dv-shot .hint{margin:0}
.dv-list{min-width:0;max-height:60vh;overflow:auto}
.dv-ent{border:1px solid #EFE7DA;border-radius:12px;padding:12px 14px;margin-bottom:10px;background:#fff}
.dv-ent-top{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.dv-ent-top b{font-size:15px}
.dv-ent-amt{margin-left:auto;font-weight:800;font-variant-numeric:tabular-nums}
.dv-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
@media(max-width:767px){ .dv-body{grid-template-columns:1fr} .dv-list{max-height:none} }
/* ★PDFはブラウザの表示をそのまま借りる（2026-09-09）。縦長の書類が多いので高さを取る。 */
.dv-pdf{width:100%;height:min(70vh,560px);border:1px solid #E3DACC;border-radius:12px;background:#fff}
@media(max-width:767px){ .dv-pdf{height:60vh} }