/* ==========================================================================
   OSEKKAI FAMILY（family.osekkai-rooms.jp・2026-10-20〜）
   --------------------------------------------------------------------------
   見た目は見本 第2版 v4（ユーザー承認・社内資料/ファミリー新サイト見本_20261020/family-site-mock.html）。
   - 色は案A：墨・生成り・木の色。見出しは明朝（Shippori Mincho B1）、数字は Outfit、手書きの一言は Klee One
   - のっぺりさせない：写真を主役にし、浮かせて重ねる。影は --lift-1／--lift-2 の2種類だけ。
     白・生成り・墨の帯で節に強弱をつける。英字の小見出しは使わない。大きいものは1画面に1つ。カプセル形の札は使わない
   - TOP（f- で始まるクラス）は、居住用サイトの中にあった /family/ のTOP（rooms #420）の見た目をそのまま移した
     （下の「TOP」の節。居住用の .has-pc.is-family の指定を活かすため、このサイトの body はいつも has-pc is-family）
   ========================================================================== */
:root {
  --ink: #221e1b;
  --ink-2: #3a332e;
  --sub: #5e554d;
  --mute: #958b82;
  --faint: #ddd5cb;
  --wood: #7a5638;
  --cream: #f3eee7;
  --cream-2: #e9e1d6;
  --paper: #ffffff;
  --line-green: #06c755;
  --sage: #a6d6bc;
  --sand: #e2c4a5;
  --lift-1: 0 1px 2px rgba(34, 30, 27, .06), 0 10px 24px -14px rgba(34, 30, 27, .28);
  --lift-2: 0 2px 6px rgba(34, 30, 27, .06), 0 30px 60px -24px rgba(34, 30, 27, .42);
  --serif: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --en: "Outfit", "Noto Sans JP", sans-serif;
  --hand: "Klee One", "Hiragino Maru Gothic ProN", cursive;
  --gl: max(20px, env(safe-area-inset-left, 0px));
  --gr: max(20px, env(safe-area-inset-right, 0px));
  --ease: cubic-bezier(.22, .7, .12, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.85; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
/* 会員かどうかの出し分け・登録の送信後の切り替え・ページ送りなどは hidden 属性の付け外しで行う。
   display を指定した部品（.form・.reg-done・.rs-mnote・.fav__empty など）は hidden 属性だけでは消えないので、ここで必ず消す */
[hidden] { display: none !important; }
p, h1, h2, h3 { margin: 0; }
ul, ol, dl, dd { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--wood); outline-offset: 3px; }
h1, h2, h3 { text-wrap: balance; word-break: auto-phrase; }
.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding-left: var(--gl); padding-right: var(--gr); }
.num { font-family: var(--en); font-variant-numeric: tabular-nums; }

/* ---- ヘッダー ---- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 50; background: var(--paper); }
.hd { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: rgba(255, 255, 255, .94); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); transition: box-shadow .3s; }
.hd.is-scrolled { box-shadow: 0 10px 30px -24px rgba(34, 30, 27, .6); }
.hd .wrap { display: flex; align-items: center; gap: 14px; height: 68px; }
.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo svg { width: 34px; height: 34px; }
.logo__name { display: flex; flex-direction: column; line-height: 1; font-family: var(--en); }
.logo__name b { font-weight: 400; font-size: 17px; letter-spacing: .14em; }
.logo__name small { margin-top: 5px; font-size: 9px; letter-spacing: .42em; color: var(--wood); }
/* ヘッダーのロゴはマークの上にキャッチコピーを添え、ひと回り大きく出す（フッターのロゴは添えない・大きさもそのまま） */
.logo--tagline { display: grid; grid-template-columns: auto auto; align-items: center; gap: 4px 10px; }
.logo__tagline { grid-column: 1 / -1; font-family: var(--serif); font-weight: 600; font-size: 10px; line-height: 1.3; letter-spacing: .14em; color: var(--wood); white-space: nowrap; }
.hd .logo svg { width: 36px; height: 36px; }
.hd .logo__name b { font-size: 18px; }
.hd__nav, .hd__live, .hd__line { display: none; }
.hd__fav { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 13px; }
.hd__fav svg { width: 22px; height: 22px; }
.hd__fav span { display: none; }
.hd__login { padding: 8px 14px; border: 1px solid var(--ink); font-size: 12.5px; line-height: 1; white-space: nowrap; }
/* スマホのメニュー（☰）。押すと×に変わり、ヘッダーの下に一覧が開く。PC（991px以上）では出さない */
.hd__burger { position: relative; flex-shrink: 0; width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
.hd__burger span { position: absolute; left: 3px; right: 3px; height: 1.5px; background: var(--ink); transition: transform .3s var(--ease), opacity .2s; }
.hd__burger span:nth-child(1) { top: 8px; }
.hd__burger span:nth-child(2) { top: 13.25px; }
.hd__burger span:nth-child(3) { top: 18.5px; }
.hd__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.25px) rotate(45deg); }
.hd__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hd__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.25px) rotate(-45deg); }
html.is-sp-menu-open { overflow: hidden; }
/* 高さの上限は svh（iOS 15.3 以前は効かない）の前に vh を予備で書く */
.hd__sp { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 68px - env(safe-area-inset-top, 0px)); max-height: calc(100svh - 68px - env(safe-area-inset-top, 0px)); overflow: auto; overscroll-behavior: contain; padding: 22px var(--gr) calc(28px + env(safe-area-inset-bottom, 0px)) var(--gl); background: var(--paper); box-shadow: var(--lift-2); }
.hd__sp-live { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--sub); }
.hd__sp-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #1e9e55; box-shadow: 0 0 0 4px rgba(30, 158, 85, .14); }
.hd__sp-live b { font-family: var(--en); font-weight: 500; font-size: 15px; color: var(--ink); }
.hd__sp-list { margin-top: 10px; }
.hd__sp-list a { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; font-family: var(--serif); font-weight: 600; font-size: 16px; letter-spacing: .06em; }
.hd__sp-list a::after { content: "›"; font-family: var(--en); font-size: 20px; line-height: 1; color: var(--wood); }
.hd__sp-list a[aria-current="page"] { color: var(--wood); }
.hd__sp-line { display: flex; justify-content: center; margin-top: 18px; padding: 15px; background: var(--line-green); color: var(--paper); font-size: 14px; font-weight: 500; letter-spacing: .06em; }
/* 幅360px未満の小さいスマホは、ヘッダーに全部並ばないので♡を隠す（☰の一覧に「お気に入り」がある） */
@media (max-width: 359px) {
  .hd__fav { display: none; }
  .hd .wrap > .hd__login, .hd__member { margin-left: auto; }
}

/* ---- 共通 ---- */
.crumb { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 11.5px; color: var(--mute); }
.crumb a:hover { color: var(--ink); }
.crumb li + li::before { content: "/"; margin-right: 8px; color: var(--faint); }
.kicker { font-family: var(--hand); font-weight: 600; font-size: 15px; letter-spacing: .04em; color: var(--wood); }
.title { font-family: var(--serif); font-weight: 700; font-size: 26px; line-height: 1.45; letter-spacing: .08em; }
.title--l { font-size: 32px; }
.lead { color: var(--sub); line-height: 2; }
.note { font-size: 11.5px; line-height: 1.85; color: var(--mute); }
.more { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; letter-spacing: .04em; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.more::after { content: "→"; transition: transform .3s var(--ease); }
.more:hover::after { transform: translateX(3px); }
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 17px 18px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font: 500 14.5px/1.2 var(--sans); letter-spacing: .14em; cursor: pointer; transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); }
.btn:hover { background: #000; }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--paper { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn--paper:hover { background: var(--cream); }
.tag { display: inline-flex; align-items: center; padding: 5px 10px; border: 1px solid var(--faint); font-size: 11.5px; line-height: 1.2; letter-spacing: .04em; white-space: nowrap; color: var(--sub); }
/* 超希少（普通借家と分かっている70㎡以上・物件ページの札の先頭）は墨の札 */
.tag--rare { border-color: var(--ink); background: var(--ink); color: var(--paper); font-weight: 500; }
.band-cream { background: var(--cream); }
.band-ink { background: var(--ink); color: var(--paper); }

/* ---- 物件カード（浮いた白い面＋写真） ---- */
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.rc { position: relative; min-width: 0; background: var(--paper); box-shadow: var(--lift-1); transition: box-shadow .4s var(--ease), transform .4s var(--ease); }
.rc:hover { box-shadow: var(--lift-2); transform: translateY(-3px); }
.rc__img { position: relative; overflow: hidden; background: var(--cream-2); }
.rc__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1s var(--ease); }
.rc:hover .rc__img img { transform: scale(1.04); }
.rc__img::after { content: ""; position: absolute; inset: auto 0 0; height: 48%; background: linear-gradient(to top, rgba(20, 17, 15, .62), rgba(20, 17, 15, 0)); }
.rc__phrase { position: absolute; left: 16px; right: 16px; bottom: 12px; z-index: 1; font-family: var(--serif); font-weight: 700; font-size: 17px; line-height: 1.45; letter-spacing: .08em; color: var(--paper); text-shadow: 0 1px 12px rgba(0, 0, 0, .25); }
.rc__tag { position: absolute; top: 0; left: 0; z-index: 1; padding: 7px 12px; background: var(--paper); font-size: 11px; font-weight: 500; letter-spacing: .1em; line-height: 1; }
.rc__tag--members { background: var(--ink); color: var(--paper); }
/* 新着は縦書きのしおり（木の色・明朝）。写真の上端から垂らし、下端を切り込む */
.rc__tag--new { left: 18px; padding: 12px 9px 18px; background: var(--wood); color: var(--paper); writing-mode: vertical-rl; font-family: var(--serif); font-size: 15px; font-weight: 700; letter-spacing: .3em; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 7px), 0 100%); }
.rc__lock { position: absolute; inset: 0 0 30%; display: grid; place-content: center; gap: 2px; text-align: center; color: var(--paper); z-index: 1; }
.rc__lock b { font-family: var(--en); font-weight: 400; font-size: 11px; letter-spacing: .34em; }
.rc__lock span { font-family: var(--serif); font-weight: 700; font-size: 15px; letter-spacing: .1em; }
.rc__fav { position: absolute; top: 8px; right: 8px; z-index: 2; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); cursor: pointer; }
.rc__fav svg { width: 19px; height: 19px; fill: none; stroke: var(--ink); stroke-width: 1.5; }
.rc__fav[aria-pressed="true"] svg { fill: #d0453f; stroke: #d0453f; }
.rc__body { padding: 16px 18px 18px; }
/* 超希少の札：写真のすぐ下に、カードの幅いっぱいの墨の帯（頭の「超希少」だけ明朝・砂の色）。狭いカードでは本文が次の行へ回る */
.rc__rare { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: -16px -18px 14px; padding: 9px 18px; background: var(--ink); color: var(--paper); font-size: 11.5px; line-height: 1.45; letter-spacing: .06em; }
.rc__rare b { font-family: var(--serif); font-size: 13px; font-weight: 700; letter-spacing: .16em; color: var(--sand); }
.rc__rent { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; }
.rc__rent b { font-family: var(--en); font-weight: 500; font-size: 26px; line-height: 1.1; letter-spacing: -.01em; }
.rc__rent b small { margin-left: 2px; font-family: var(--sans); font-weight: 700; font-size: 12px; }
.rc__rent span { font-size: 11.5px; color: var(--mute); }
.rc__spec { margin-top: 6px; font-size: 13px; font-weight: 500; }
.rc__spec span { white-space: nowrap; }
.rc__where { font-size: 12px; color: var(--sub); }
.rc__foot { display: grid; gap: 0; margin-top: 10px; font-size: 11px; color: var(--mute); }
.rc__foot span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc a { display: block; }

/* ---- 会員の件数ボード（墨の帯・components/MemberBoard.astro・2026-10-29〜） ----
   見出しと登録ボタン → 見比べ写真 → 割合の棒 → 3段の内訳 → 電話・LINE・最終更新日。PC は見出しと見比べを左右に並べる */
.mboard { position: relative; overflow: hidden; }
.mboard__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px 56px; padding-block: 56px 48px; }
.mboard__k { font-family: var(--hand); font-weight: 600; font-size: 15px; color: var(--sand); }
.mboard__scope { margin-top: 10px; font-size: 14px; color: rgba(255, 255, 255, .78); letter-spacing: .04em; }
.mboard__scope b { margin: 0 3px; font-weight: 300; font-size: 20px; color: var(--paper); }
.mboard__title { margin-top: 6px; font-family: var(--serif); font-weight: 700; font-size: 22px; line-height: 1.55; letter-spacing: .08em; }
.mboard__title b { font-weight: 200; font-size: 60px; line-height: 1; letter-spacing: -.02em; }
.mboard__title small { margin: 0 2px 0 4px; font-family: var(--serif); font-size: 22px; }
.mboard__lead { margin-top: 14px; font-family: var(--hand); font-weight: 600; font-size: 17px; color: var(--sand); }
.mboard__acts { display: grid; gap: 4px; margin-top: 26px; max-width: 400px; }
.mboard__acts .btn { justify-content: center; }
.mboard__login { padding: 12px; border: 0; background: none; color: rgba(255, 255, 255, .78); font-size: 13px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.mboard__cmp { margin: 0; align-self: center; min-width: 0; }
.mboard__cmp figcaption { margin-top: 10px; font-size: 12px; color: rgba(255, 255, 255, .6); }
/* 見比べ写真：左がぼかし（いまの見え方）、--pos より右が鮮明。境目をつかんだときだけ動く（当たりは幅44px） */
.cmp { position: relative; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--lift-2); --pos: 52%; }
.cmp:has(.cmp__range:focus-visible) { outline: 2px solid var(--sand); outline-offset: 3px; }
.cmp__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; }
.cmp__img--blur { inset: -14px; width: calc(100% + 28px); height: calc(100% + 28px); filter: blur(14px) saturate(.9); }
.cmp__clear { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.cmp__tag { position: absolute; top: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; font-size: 11.5px; letter-spacing: .06em; }
.cmp__tag--now { left: 12px; background: rgba(34, 30, 27, .78); color: var(--paper); }
.cmp__tag--member { right: 12px; background: var(--paper); color: var(--ink); }
.cmp__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--paper); cursor: grab; touch-action: none; }
.cmp__handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -21px; width: 44px; }
.cmp.is-dragging, .cmp.is-dragging .cmp__handle { cursor: grabbing; }
.cmp__knob { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--paper); color: var(--ink); box-shadow: var(--lift-1); }
.cmp__range { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mboard__under { display: grid; gap: 22px; min-width: 0; }
/* 割合の棒：白＝一般公開、木の色＝会員限定（ぼかした会員限定の写真を3枚重ねる・スマホでは写真を出さない） */
.ratio { display: flex; height: 54px; }
.ratio__pub { display: flex; align-items: center; padding-left: 14px; background: var(--paper); color: var(--ink); font-size: 12.5px; letter-spacing: .06em; white-space: nowrap; }
.ratio__mem { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 10px; overflow: hidden; background: var(--wood); color: var(--paper); font-size: 12.5px; letter-spacing: .06em; white-space: nowrap; }
.ratio__mem img { display: none; width: 34px; height: 34px; object-fit: cover; border: 1px solid rgba(255, 255, 255, .5); }
.ratio__mem img + img { margin-left: -16px; }
.ratio__mem b { font-weight: 500; }
.tiers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: rgba(255, 255, 255, .12); }
.tiers li { display: grid; align-content: start; gap: 4px; padding: 18px 20px 20px; background: var(--ink); }
.tiers__name { font-size: 12.5px; color: rgba(255, 255, 255, .7); letter-spacing: .06em; }
.tiers li.is-mem .tiers__name { color: var(--sand); }
.tiers__num { font-family: var(--serif); font-size: 15px; }
.tiers__num b { margin-right: 3px; font-weight: 300; font-size: 30px; }
.tiers__catch { margin-top: 4px; font-family: var(--serif); font-weight: 700; font-size: 17px; letter-spacing: .06em; }
.tiers__note { font-size: 12px; line-height: 1.8; color: rgba(255, 255, 255, .6); }
.mboard__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; font-size: 12.5px; color: rgba(255, 255, 255, .6); }
.mboard__foot a { color: var(--paper); }
.mboard__foot a b { margin-left: 6px; font-weight: 400; font-size: 18px; letter-spacing: .06em; }
.mboard__line { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--line-green); color: #fff; font-size: 13px; }
.mboard__line svg { flex: none; width: 18px; height: 18px; fill: currentColor; }
.mboard__foot time .num { letter-spacing: .06em; }

/* =========================================================
   物件ページ
   ========================================================= */
.dt-top { padding-top: 18px; }
.mosaic { position: relative; margin-top: 14px; margin-left: calc(var(--gl) * -1); margin-right: calc(var(--gr) * -1); }
.mosaic__strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.mosaic__strip::-webkit-scrollbar { display: none; }
.mosaic__strip button { flex: 0 0 100%; padding: 0; border: 0; background: var(--cream-2); scroll-snap-align: start; cursor: zoom-in; }
.mosaic__strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* 間取り図（自社図面＝A4横の1枚を含む）は切り抜かず全体を収める。余白は紙と同じ白 */
.mosaic__strip .mosaic__plan-img { background: #fff; }
.mosaic__strip .mosaic__plan-img img { object-fit: contain; }
.mosaic__strip button:nth-child(n+6) { display: none; }
.mosaic__all { position: absolute; right: calc(var(--gr) + 0px); bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 0; background: var(--paper); font-size: 12.5px; font-weight: 500; box-shadow: var(--lift-1); cursor: pointer; }
.mosaic__all svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.mosaic__plan { position: absolute; left: var(--gl); bottom: 14px; padding: 9px 14px; border: 0; background: rgba(34, 30, 27, .82); color: var(--paper); font-size: 12.5px; cursor: pointer; }
.dt-grid { display: block; }
.dt-intro { padding-top: 26px; }
.dt-intro h1 { margin-top: 6px; font-family: var(--serif); font-weight: 700; font-size: 27px; line-height: 1.45; letter-spacing: .06em; }
.dt-intro__where { margin-top: 8px; font-size: 13px; color: var(--sub); }
.keys { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 26px; margin-top: 22px; }
.keys div { display: flex; flex-direction: column; }
.keys dt { order: 2; font-size: 11px; letter-spacing: .1em; color: var(--mute); }
.keys dd { font-family: var(--serif); font-weight: 700; font-size: 26px; line-height: 1.25; letter-spacing: .02em; }
.keys dd small { font-size: 14px; margin-left: 2px; }
.dt-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
/* 価格の箱（PCでは写真の下の端に重ねて浮かせ、スクロールしても付いてくる） */
.price { position: relative; z-index: 3; margin-top: 26px; padding: 26px 22px 22px; background: var(--paper); box-shadow: var(--lift-2); }
.state { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--sub); }
.state__badge { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; color: #1d7a45; }
.state__badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #1e9e55; box-shadow: 0 0 0 4px rgba(30, 158, 85, .14); }
.rent { display: flex; align-items: baseline; gap: 6px; margin-top: 10px; }
.rent b { font-family: var(--en); font-weight: 500; font-size: 52px; line-height: 1; letter-spacing: -.03em; }
.rent span { font-weight: 700; font-size: 16px; }
.rent-sub { margin-top: 8px; font-size: 12.5px; color: var(--sub); }
.rent-sub b { font-family: var(--en); font-weight: 500; font-size: 14px; color: var(--ink); }
.fees { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--cream-2); font-size: 12.5px; }
.fees dt { font-size: 11px; color: var(--mute); }
.fees dd { font-weight: 500; }
.inq { display: grid; gap: 8px; margin-top: 20px; }
.inq__note { margin-top: 2px; font-size: 11.5px; line-height: 1.8; color: var(--mute); }
.minor { display: flex; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--cream-2); font-size: 12px; }
.minor a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 2px; color: var(--sub); white-space: nowrap; }
.minor a:hover { color: var(--ink); }
.minor svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
/* 画面の端から端まで地色を敷く節（本文の列の中に置いたまま、地色だけ左右へ伸ばす。sticky を止めないよう overflow は clip） */
.l-main { overflow-x: clip; }
.bleed { position: relative; margin-top: 72px; }
.bleed::before { content: ""; position: absolute; top: 0; bottom: 0; left: -100vw; right: -100vw; z-index: -1; background: var(--cream); }
/* 本文 */
.sec { padding-block: 64px; }
.sec__head { display: grid; gap: 8px; margin-bottom: 28px; }
.sec__head .lead { font-size: 13px; }
.plan { display: grid; gap: 28px; }
.paper { position: relative; padding: 22px; background: var(--paper); box-shadow: var(--lift-2); rotate: -.6deg; }
.paper img { width: 100%; max-height: 560px; object-fit: contain; }
.paper[data-label]::after { content: attr(data-label); position: absolute; right: 18px; bottom: -14px; padding: 6px 12px; background: var(--ink); color: var(--paper); font-size: 12px; letter-spacing: .08em; rotate: .6deg; }
.plan__text .title { font-size: 28px; }
.plan__text p + p { margin-top: 14px; }
.plan__illust { width: 150px; margin-top: 22px; mix-blend-mode: multiply; }
.plan__fact { font-size: 13px; line-height: 2; color: var(--sub); }
.plan__fact b { font-family: var(--en); font-weight: 500; font-size: 15px; color: var(--ink); }
.dl { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 48px; }
.dl div { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--cream-2); }
.dl dt { font-size: 12px; color: var(--mute); }
.dl dd { font-size: 14px; }
.costbox { display: grid; gap: 28px; }
.cost__total { display: grid; gap: 4px; }
.cost__total span { font-size: 12px; letter-spacing: .1em; color: var(--mute); }
.cost__total b { font-family: var(--en); font-weight: 200; font-size: 56px; line-height: 1; letter-spacing: -.03em; white-space: nowrap; }
.cost__total b small { font-family: var(--sans); font-weight: 700; font-size: 16px; margin-left: 4px; letter-spacing: 0; }
.cost__rows { display: grid; }
.cost__row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--cream-2); font-size: 13.5px; }
.cost__row span:first-child { color: var(--sub); }
.cost__row span:last-child { font-family: var(--en); font-weight: 500; font-variant-numeric: tabular-nums; }
.fac { display: grid; gap: 30px; }
.fac__kids { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.fac__kids li { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--cream-2); font-family: var(--serif); font-weight: 600; font-size: 15px; letter-spacing: .04em; }
.fac__kids li::before { content: ""; width: 7px; height: 7px; background: var(--wood); rotate: 45deg; flex-shrink: 0; }
.fac__label { margin-bottom: 8px; font-size: 12px; letter-spacing: .1em; color: var(--mute); }
/* 設備1つずつを並べ、改行は設備と設備の間でだけ（1行に収まらない長い設備だけは中で折り返す） */
.fac__rest { display: flex; flex-wrap: wrap; font-size: 12.5px; line-height: 2.1; color: var(--sub); }
.fac__rest li:not(:last-child)::after { content: "/" / ""; margin: 0 .5em; }
.sup { position: relative; overflow: hidden; }
.sup .wrap { position: relative; padding-block: 72px; }
.sup__head .kicker { color: var(--sand); }
.sup__head .title { color: var(--paper); margin-top: 6px; }
.sup__big { display: grid; gap: 2px; margin-top: 34px; }
.sup__big div { padding: 22px 0 20px; border-top: 1px solid rgba(255, 255, 255, .14); }
.sup__big dt { font-size: 12px; letter-spacing: .1em; color: rgba(255, 255, 255, .55); }
.sup__big dd { margin-top: 6px; font-size: 13.5px; line-height: 1.85; color: rgba(255, 255, 255, .78); }
.sup__big dd strong { display: block; font-family: var(--serif); font-weight: 700; font-size: 22px; line-height: 1.5; letter-spacing: .06em; color: var(--paper); }
.sup__big dd strong.n { font-family: var(--en); font-weight: 200; font-size: 64px; line-height: 1; letter-spacing: -.02em; color: var(--sage); }
.sup__big dd strong.n small { font-family: var(--serif); font-weight: 700; font-size: 18px; margin-left: 6px; color: var(--paper); }
.sup__progs { margin-top: 28px; display: grid; gap: 16px; }
.sup__progs li { font-size: 13px; line-height: 1.85; color: rgba(255, 255, 255, .72); }
.sup__progs li b { display: block; font-weight: 500; color: var(--paper); }
.sup .note { margin-top: 26px; color: rgba(255, 255, 255, .45); }
.sup .more { margin-top: 18px; color: var(--sand); }
.map { display: grid; place-content: center; gap: 6px; aspect-ratio: 16 / 9; margin-top: 18px; background: var(--cream); color: var(--mute); text-align: center; font-size: 12px; box-shadow: inset 0 0 0 1px var(--cream-2); }
.map svg { width: 28px; height: 28px; margin: 0 auto; fill: var(--wood); }
.company { font-size: 13px; line-height: 2; color: var(--sub); }
.company b { display: block; font-weight: 500; color: var(--ink); }
.similar { padding-block: 72px 80px; }
.similar__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 30px; }
/* スマホの下の固定バー（上に検索結果の前後送りの段・下に♡と2つのボタンの段。会員限定は♡が無い） */
.dock { position: fixed; inset: auto 0 0; z-index: 30; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px var(--gr) calc(10px + env(safe-area-inset-bottom, 0px)) var(--gl); background: rgba(255, 255, 255, .97); box-shadow: 0 -16px 36px -26px rgba(34, 30, 27, .7); }
.dock[hidden] { display: none; }
.dock__row { display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.dock__row--nofav { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dock .btn { padding: 15px 6px; font-size: 12.5px; letter-spacing: .04em; }
.dock__fav { display: grid; place-items: center; border: 1px solid var(--faint); background: var(--paper); cursor: pointer; }
.dock__fav svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.4; }
.dock__fav[aria-pressed="true"] svg { fill: #d0453f; stroke: #d0453f; }
/* 固定バーに隠れる分の余白は、ページの白ではなくフッター（墨の帯）の中に取る（ページ側に取ると墨の帯の下に白い帯が出る） */
.has-dock .ft { padding-bottom: 84px; }
/* 検索結果から来て前後送りの段があるときは、その段のぶんも足す（scripts/property.ts が has-dnav を付ける） */
.has-dock.has-dnav .ft { padding-bottom: 132px; }
/* 写真をすべて見る */
.viewer { position: fixed; inset: 0; z-index: 60; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: rgba(17, 15, 13, .96); color: var(--paper); padding: env(safe-area-inset-top, 0px) var(--gr) env(safe-area-inset-bottom, 0px) var(--gl); }
.viewer[hidden] { display: none; }
.viewer__bar { display: flex; justify-content: space-between; align-items: center; height: 56px; font-family: var(--en); letter-spacing: .1em; }
.viewer__bar button { border: 0; background: none; color: var(--paper); font-size: 14px; cursor: pointer; }
.viewer__img { display: grid; place-items: center; min-height: 0; }
.viewer__img img { max-height: 100%; width: auto; object-fit: contain; }
.viewer__nav { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 14px 0 20px; }
.viewer__nav > button { flex: none; width: 52px; height: 52px; border: 1px solid rgba(255, 255, 255, .3); background: none; color: var(--paper); font-size: 18px; cursor: pointer; }
/* ← → の間の、全部の写真の小さい一覧（多いときは横にすべらせる。今の写真は白枠で明るく） */
.viewer__thumbs { position: relative; display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.viewer__thumbs::-webkit-scrollbar { display: none; }
.viewer__thumbs button { flex: none; width: 56px; height: 42px; padding: 0; border: 0; background: none; opacity: .45; cursor: pointer; transition: opacity .2s; }
/* 指で押す画面では押したあとも明るさが残るので、マウスのある画面だけ */
@media (hover: hover) { .viewer__thumbs button:hover { opacity: .8; } }
.viewer__thumbs button[aria-current="true"] { opacity: 1; outline: 2px solid var(--paper); outline-offset: -2px; }
.viewer__thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   検索結果（生成りの地に、白い面を浮かせる）
   ========================================================= */
.rs { background: var(--cream); padding-bottom: 80px; }
.rs-top { padding-top: 22px; padding-bottom: 8px; }
.rs-head { margin-top: 16px; }
.rs-head h1 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 14px; font-family: var(--serif); font-weight: 700; font-size: 22px; letter-spacing: .08em; }
.rs-head h1 b { font-family: var(--en); font-weight: 200; font-size: 64px; line-height: 1; letter-spacing: -.03em; }
.rs-head h1 b small { font-family: var(--serif); font-weight: 700; font-size: 18px; margin-left: 4px; }
.rs-cond { display: flex; flex-wrap: wrap; gap: 4px 0; margin-top: 10px; font-size: 13px; color: var(--sub); }
.rs-cond span + span::before { content: "・"; margin: 0 6px; color: var(--mute); }
.rs-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; }
.rs-change { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border: 0; background: var(--ink); color: var(--paper); font-size: 13px; cursor: pointer; }
.rs-change svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.sel { -webkit-appearance: none; appearance: none; padding: 11px 32px 11px 14px; border: 0; border-radius: 0; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%23221e1b' stroke-width='1.3'/%3E%3C/svg%3E") right 13px center / 9px no-repeat; font: 13px/1.3 var(--sans); color: var(--ink); cursor: pointer; box-shadow: inset 0 0 0 1px var(--cream-2); }
.rs-mnote { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 22px; padding: 16px; background: var(--ink); color: var(--paper); }
.rs-mnote img { width: 76px; aspect-ratio: 1; object-fit: cover; }
.rs-mnote p { font-size: 13px; line-height: 1.8; }
.rs-mnote p b { font-family: var(--en); font-weight: 400; font-size: 20px; color: var(--sand); }
.rs-mnote .more { margin-top: 6px; font-size: 12.5px; color: var(--sand); }
.rs-list { margin-top: 26px; }
.rs-more { margin-top: 44px; display: flex; justify-content: center; }
.rs-more .btn { max-width: 420px; background: var(--paper); color: var(--ink); border-color: var(--paper); box-shadow: var(--lift-1); }
.filters { display: none; }
.f-group { padding: 18px 0; }
.f-group + .f-group { border-top: 1px solid var(--cream-2); }
.f-label { margin-bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.seg { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); box-shadow: inset 0 0 0 1px var(--cream-2); }
.seg button { padding: 10px 2px; border: 0; background: transparent; font-size: 12px; cursor: pointer; transition: background-color .25s, color .25s; }
.seg button + button { box-shadow: inset 1px 0 0 var(--cream-2); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.checks { display: grid; gap: 2px; }
.checks label { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 13px; cursor: pointer; }
.checks input { width: 16px; height: 16px; accent-color: var(--ink); }
.rangesel { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; font-size: 12px; color: var(--mute); }
.rangesel .sel { width: 100%; }

/* =========================================================
   さがす
   ========================================================= */
.sc-hero { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); }
.sc-hero__img { position: absolute; inset: 0; }
.sc-hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; opacity: .55; }
.sc-hero .wrap { position: relative; padding-block: 34px 120px; }
.sc-hero .crumb { color: rgba(255, 255, 255, .6); }
.sc-hero .kicker { margin-top: 30px; color: var(--sand); }
.sc-hero h1 { margin-top: 6px; font-family: var(--serif); font-weight: 800; font-size: 36px; line-height: 1.35; letter-spacing: .1em; }
.sc-hero .lead { margin-top: 10px; color: rgba(255, 255, 255, .82); font-size: 13.5px; }
.sc-body { position: relative; z-index: 2; margin-top: -88px; }
.sizes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.size { position: relative; display: grid; grid-template-rows: 92px auto auto auto; gap: 2px; padding: 16px 14px 16px; border: 0; background: var(--paper); text-align: left; box-shadow: var(--lift-1); cursor: pointer; transition: box-shadow .35s var(--ease), transform .35s var(--ease), background-color .35s; }
.size:hover { box-shadow: var(--lift-2); transform: translateY(-3px); }
.size img { height: 88px; width: auto; justify-self: start; mix-blend-mode: multiply; }
.size__m { margin-top: 8px; font-family: var(--en); font-weight: 300; font-size: 38px; line-height: 1; letter-spacing: -.02em; }
.size__m small { font-family: var(--serif); font-weight: 700; font-size: 13px; margin-left: 2px; }
.size__life { font-family: var(--serif); font-weight: 700; font-size: 13.5px; line-height: 1.5; letter-spacing: .04em; }
.size__count { font-size: 11.5px; color: var(--mute); }
.size[aria-pressed="true"] { background: var(--ink); color: var(--paper); transform: translateY(-6px); box-shadow: var(--lift-2); }
.size[aria-pressed="true"] img { filter: invert(1); mix-blend-mode: screen; }
.size[aria-pressed="true"] .size__count { color: rgba(255, 255, 255, .6); }
.sc-grid { display: block; }
.sc-sec { margin-top: 56px; }
.sc-sec__title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.sc-sec__title h2 { font-family: var(--serif); font-weight: 700; font-size: 21px; letter-spacing: .08em; }
.wardlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
.wardlist button { display: flex; justify-content: space-between; align-items: baseline; padding: 11px 2px; border: 0; border-bottom: 1px solid var(--cream-2); background: none; font-family: var(--serif); font-weight: 600; font-size: 15px; letter-spacing: .04em; text-align: left; cursor: pointer; }
.wardlist button small { font-family: var(--en); font-weight: 400; font-size: 12px; color: var(--mute); }
.wardlist button[aria-pressed="true"] { color: var(--wood); border-bottom-color: var(--wood); box-shadow: 0 1px 0 var(--wood); }
.row3 { display: grid; gap: 16px; }
.row3 label { display: grid; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.row3 .sel { width: 100%; background-color: var(--cream); box-shadow: none; }
.scenes { display: grid; gap: 10px; }
.scene { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 0 16px 0 0; border: 0; background: var(--paper); text-align: left; box-shadow: var(--lift-1); cursor: pointer; transition: box-shadow .35s var(--ease); }
.scene img { width: 96px; height: 80px; object-fit: cover; }
.scene b { display: block; font-family: var(--serif); font-weight: 700; font-size: 15.5px; letter-spacing: .06em; }
.scene small { font-size: 11.5px; color: var(--mute); }
.scene > span:last-child { font-family: var(--en); font-weight: 300; font-size: 20px; }
.scene[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ink), var(--lift-2); }
.scene[aria-pressed="true"]::after { content: "✓"; position: absolute; top: 6px; left: 6px; display: grid; place-items: center; width: 22px; height: 22px; background: var(--ink); color: var(--paper); font-size: 12px; }
.factchips { display: flex; flex-wrap: wrap; gap: 6px; }
.factchips button { padding: 9px 14px; border: 1px solid var(--faint); background: var(--paper); font-size: 12.5px; cursor: pointer; }
.factchips button.is-on { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.sc-sum { position: sticky; bottom: 0; z-index: 20; margin-top: 48px; margin-left: calc(var(--gl) * -1); margin-right: calc(var(--gr) * -1); padding: 12px var(--gr) calc(12px + env(safe-area-inset-bottom, 0px)) var(--gl); background: var(--ink); color: var(--paper); }
.sc-sum__inner { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; }
.sc-sum__count { line-height: 1.15; }
.sc-sum__count small { display: block; font-size: 11px; color: rgba(255, 255, 255, .6); }
.sc-sum__count b { font-family: var(--en); font-weight: 300; font-size: 32px; }
.sc-sum__count span { font-size: 12px; margin-left: 2px; }
.sc-sum__cond { display: none; }
.sc-sum .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* =========================================================
   区のページ
   ========================================================= */
.wd-hero { position: relative; }
/* 写真と区名をひとまとまりにして、区名は写真の下の端から測る（数字の面の後ろに隠れないように） */
.wd-hero__visual { position: relative; }
.wd-hero__photos { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; gap: 6px; margin-top: 14px; margin-left: calc(var(--gl) * -1); margin-right: calc(var(--gr) * -1); }
.wd-hero__photos img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; }
.wd-hero__photos img:nth-child(2) { aspect-ratio: auto; }
.wd-hero__photos::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 17, 15, .78) 0%, rgba(20, 17, 15, .2) 60%, rgba(20, 17, 15, 0) 100%), linear-gradient(to right, rgba(20, 17, 15, .55) 0%, rgba(20, 17, 15, 0) 60%); pointer-events: none; }
.wd-hero__title { position: absolute; left: 0; right: 0; bottom: 42px; z-index: 2; color: var(--paper); }
.wd-hero__title p { font-family: var(--hand); font-weight: 600; font-size: 15px; color: var(--sand); }
.wd-hero__title h1 { margin-top: 4px; font-family: var(--serif); font-weight: 800; font-size: 34px; line-height: 1.35; letter-spacing: .1em; text-shadow: 0 2px 20px rgba(0, 0, 0, .3); }
.wd-card { position: relative; z-index: 3; margin-top: -18px; padding: 24px 22px; background: var(--paper); box-shadow: var(--lift-2); }
.wd-card .lead { font-size: 13.5px; }
.wd-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; margin-top: 18px; }
.wd-stats dt { font-size: 11px; letter-spacing: .08em; color: var(--mute); }
.wd-stats dd { font-family: var(--en); font-weight: 300; font-size: 36px; line-height: 1.1; letter-spacing: -.02em; }
.wd-stats dd small { font-family: var(--sans); font-weight: 700; font-size: 12px; margin-left: 3px; letter-spacing: 0; }
.wd-stats dd.t { font-family: var(--serif); font-weight: 700; font-size: 26px; }
.wd-sup { margin-top: 72px; }
.wd-sup .wrap { padding-block: 72px; }
.wd-sup__head .kicker { color: var(--sand); }
.wd-sup__head .title { margin-top: 6px; color: var(--paper); }
.wd-sup__head .note { margin-top: 14px; color: rgba(255, 255, 255, .5); }
.wd-sup__official { display: inline-block; margin-top: 12px; font-size: 12.5px; color: var(--sand); text-decoration: underline; text-underline-offset: 4px; }
.wd-sup__facts { display: grid; margin-top: 34px; }
.wd-sup__facts div { padding: 22px 0 20px; border-top: 1px solid rgba(255, 255, 255, .14); }
.wd-sup__facts dt { font-size: 12px; letter-spacing: .1em; color: rgba(255, 255, 255, .55); }
.wd-sup__facts dd { margin-top: 6px; font-size: 13.5px; line-height: 1.85; color: rgba(255, 255, 255, .78); }
.wd-sup__facts dd strong { display: block; font-family: var(--serif); font-weight: 700; font-size: 24px; line-height: 1.45; letter-spacing: .06em; color: var(--paper); }
.wd-sup__facts dd strong.n { font-family: var(--en); font-weight: 200; font-size: 76px; line-height: 1; letter-spacing: -.03em; color: var(--sage); }
.wd-sup__facts dd strong.n small { font-family: var(--serif); font-weight: 700; font-size: 20px; margin-left: 6px; color: var(--paper); }
.wd-sup__facts a, .wd-sup__progs a { font-size: 11px; color: rgba(255, 255, 255, .5); text-decoration: underline; text-underline-offset: 3px; }
.wd-sup__progs { margin-top: 30px; }
.wd-sup__progs h3 { font-family: var(--serif); font-weight: 700; font-size: 17px; letter-spacing: .08em; }
.wd-sup__progs ul { display: grid; gap: 10px; margin-top: 14px; }
.wd-sup__progs li { padding: 18px 20px; background: var(--ink-2); font-size: 13px; line-height: 1.85; color: rgba(255, 255, 255, .76); }
.wd-sup__progs li b { display: block; margin-bottom: 2px; font-weight: 500; color: var(--paper); }
.wd-new { padding-block: 72px 80px; }
.wd-new__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 30px; }
.wd-links { display: grid; gap: 36px; padding-block: 0 80px; }
.wd-links h3 { margin-bottom: 14px; font-family: var(--serif); font-weight: 700; font-size: 17px; letter-spacing: .08em; }
.wd-links .list { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 13.5px; }
.wd-links .list a { padding: 4px 0; }
.wd-links .list a:hover { color: var(--wood); }
.wd-links .list a + a::before { content: "／"; margin: 0 10px; color: var(--faint); }
.wd-links .list small { font-family: var(--en); font-size: 11px; color: var(--mute); margin-left: 4px; }

/* ---- フッター（2026-10-21 作り直し・見本＝社内資料/ファミリーフッター改案_20261021）----
   生成りの帯（相談の入口）→ 墨の帯（区・暮らしの場面・広さ・ご案内）→ 会社、の順。
   - 線画の家族が生成りの帯の下の端を歩き、白い面（相談の入口）が下の墨の帯へまたがって浮く（影は --lift-2）
   - 節は線で区切らず、地色と余白で分ける
   - 相談の入口の帯を出さないページ（components/Footer.astro の call={false}）では、墨の帯の上の余白を詰める */
.ft { background: var(--ink); color: rgba(255, 255, 255, .74); overflow: hidden; }
.ft a { transition: color .3s var(--ease); }

/* 1段目：相談の入口 */
.ft-call { background: var(--cream); }
.ft-call__in { display: grid; padding-block: 56px 0; }
.ft-call__art { width: min(64%, 300px); margin: 0 0 0 4px; }
.ft-call__panel { position: relative; z-index: 1; margin: -26px 0 -64px; padding: 32px 24px 30px; background: var(--paper); color: var(--ink); box-shadow: var(--lift-2); }
.ft-call__kicker { font-family: var(--hand); font-weight: 600; font-size: 15px; letter-spacing: .04em; color: var(--wood); }
.ft-call__title { margin-top: 6px; font-family: var(--serif); font-weight: 600; font-size: 22px; line-height: 1.6; letter-spacing: .08em; }
.ft-call__lead { margin-top: 12px; font-size: 13px; line-height: 2; color: var(--sub); }
.ft-call__acts { display: grid; gap: 10px; margin-top: 22px; }
.ft-call__line { display: flex; align-items: center; justify-content: center; padding: 17px 20px; background: var(--line-green); color: #fff; font-size: 15px; font-weight: 500; letter-spacing: .12em; transition: filter .3s; }
.ft-call__line:hover { filter: brightness(.94); }
.ft-call__tel { display: flex; align-items: baseline; justify-content: center; gap: 12px; padding: 13px 20px; border: 1px solid var(--ink); transition: background-color .3s var(--ease); }
.ft-call__tel:hover { background: var(--cream); }
.ft-call__tel small { font-size: 12px; color: var(--sub); }
.ft-call__tel b { font-weight: 400; font-size: 19px; letter-spacing: .06em; }
.ft-call__reg { margin-top: 16px; font-size: 12.5px; line-height: 1.9; color: var(--sub); }
.ft-call__reg a { color: var(--wood); text-decoration: underline; text-underline-offset: 3px; }

/* 2段目：サイトの地図（墨の帯） */
.ft-map .wrap { padding-block: 112px 0; }
.ft--plain .ft-map .wrap { padding-block: 64px 0; }
.ft-map__grid { display: grid; gap: 44px; }
.ft-map__h { font-family: var(--serif); font-weight: 600; font-size: 15px; letter-spacing: .14em; color: var(--paper); }
.ft-map a:hover { color: var(--paper); }
.ft-wards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 8px; margin-top: 18px; font-size: 13px; }
.ft-map__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 12.5px; color: var(--sand); border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.ft-map__more::after { content: "→"; transition: transform .3s var(--ease); }
.ft-map__more:hover { color: var(--paper); }
.ft-map__more:hover::after { transform: translateX(3px); }
.ft-list { display: grid; gap: 11px; margin-top: 18px; font-size: 13px; }
.ft-sizes { display: grid; gap: 12px; margin-top: 16px; }
.ft-sizes a { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: baseline; gap: 2px 12px; }
.ft-sizes b { font-weight: 300; font-size: 26px; line-height: 1.2; letter-spacing: .02em; color: var(--paper); }
.ft-sizes b small { margin-left: 2px; font-family: var(--sans); font-size: 11.5px; font-weight: 400; }
.ft-sizes span { font-size: 12px; line-height: 1.7; color: rgba(255, 255, 255, .56); transition: color .3s var(--ease); }
.ft-sizes a:hover span { color: rgba(255, 255, 255, .86); }

/* 3段目：会社（同じ墨の帯の下のほう。余白で分ける）。ロゴは墨の地に合わせて白黒を反転する */
.ft-base { display: grid; gap: 26px; margin-top: 64px; }
.ft .logo svg rect { fill: var(--paper); }
.ft .logo svg [stroke="#fff"] { stroke: var(--ink); }
.ft .logo svg [fill="#fff"] { fill: var(--ink); }
.ft .logo__name b { color: var(--paper); }
.ft .logo__name small { color: var(--sand); }
.ft__co { margin-top: 18px; font-size: 12px; line-height: 1.9; color: rgba(255, 255, 255, .56); }
.ft-base__side { display: grid; gap: 16px; }
.ft-base__links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 12.5px; }
.ft-base__links a::after { content: "↗"; margin-left: 4px; font-size: 11px; color: rgba(255, 255, 255, .4); }
.ft__sites { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; color: rgba(255, 255, 255, .56); }
.ft__sites a { color: rgba(255, 255, 255, .74); text-decoration: underline; text-underline-offset: 3px; }
.ft__copy { font-family: var(--en); font-size: 11px; letter-spacing: .1em; color: rgba(255, 255, 255, .38); }

/* いちばん下：大きな名前（読ませない飾り。下の端で少し切れる） */
.ft-word { margin-top: 48px; font-family: var(--en); font-weight: 200; font-size: clamp(40px, 11.6vw, 184px); line-height: .8; letter-spacing: .04em; white-space: nowrap; text-align: center; color: rgba(255, 255, 255, .07); transform: translateY(.14em); user-select: none; }

@media (min-width: 640px) {
  .ft-wards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ft-map__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft-map__col:first-child { grid-column: 1 / -1; }
  .ft-call__acts { grid-template-columns: auto auto; justify-content: start; }
}

@media (min-width: 991px) {
  .ft-call__in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: end; gap: 64px; padding-block: 96px 0; }
  .ft-call__art { width: 100%; max-width: 430px; margin: 0 0 0 auto; }
  .ft-call__panel { margin: 0 0 -96px; padding: 52px 56px 48px; }
  .ft-call__title { font-size: 28px; }
  .ft-map .wrap { padding-block: 176px 0; }
  .ft--plain .ft-map .wrap { padding-block: 88px 0; }
  .ft-map__grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, .95fr) minmax(0, .7fr); gap: 56px; }
  .ft-map__col:first-child { grid-column: auto; }
  .ft-wards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ft-sizes { gap: 14px; }
  .ft-sizes a { grid-template-columns: 1fr; }
  .ft-base { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px; margin-top: 96px; }
  .ft-base__side { justify-items: end; text-align: right; }
  .ft-base__links, .ft__sites { justify-content: flex-end; }
  .ft-word { margin-top: 64px; }
}

/* =========================================================
   タブレット以上
   ========================================================= */
@media (min-width: 640px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sizes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .row3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .row3--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wd-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wardlist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =========================================================
   PC（991px以上）
   ========================================================= */
@media (min-width: 991px) {
  :root { --gl: max(48px, env(safe-area-inset-left, 0px)); --gr: max(48px, env(safe-area-inset-right, 0px)); }
  body { font-size: 15px; }
  .hd .wrap { height: 96px; gap: 32px; }
  .logo svg { width: 40px; height: 40px; }
  .logo__name b { font-size: 20px; }
  .logo--tagline { gap: 6px 12px; }
  .logo__tagline { font-size: 12px; letter-spacing: .16em; }
  .hd .logo svg { width: 50px; height: 50px; }
  .hd .logo__name b { font-size: 26px; }
  .hd .logo__name small { margin-top: 7px; font-size: 11px; }
  .hd__nav { display: flex; gap: 30px; font-size: 14px; font-weight: 500; letter-spacing: .08em; }
  .hd__nav a { position: relative; padding: 6px 0; }
  .hd__nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--ink); }
  .hd__live { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 12.5px; white-space: nowrap; color: var(--sub); }
  .hd__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #1e9e55; box-shadow: 0 0 0 4px rgba(30, 158, 85, .14); }
  .hd__live b { font-family: var(--en); font-weight: 500; font-size: 15px; color: var(--ink); }
  .hd__fav { margin-left: 0; }
  .hd__fav span { display: inline; }
  .hd__login { padding: 12px 20px; font-size: 13px; }
  .hd__line { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; background: var(--line-green); color: var(--paper); font-size: 13.5px; font-weight: 500; white-space: nowrap; }
  .hd__line:hover { background: #05b34c; }
  .hd__burger, .hd__sp { display: none; }
  .title { font-size: 32px; }
  .title--l { font-size: 40px; }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 28px; }
  .cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }

  /* 物件ページ：写真は大1枚＋小4枚（写真が640pxまでなので、1枚を画面いっぱいには伸ばさない） */
  .mosaic { margin: 18px 0 0; }
  .mosaic__strip { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; height: 520px; overflow: hidden; }
  .mosaic__strip button { flex: none; }
  .mosaic__strip button:first-child { grid-row: 1 / 3; }
  .mosaic__strip img { height: 100%; aspect-ratio: auto; transition: transform 1s var(--ease), filter .4s; }
  .mosaic__strip button:hover img { transform: scale(1.03); filter: brightness(1.04); }
  /* 右下は家賃の箱が重なるので、写真をすべて見るボタンは右上へ */
  .mosaic__all { right: 20px; top: 20px; bottom: auto; }
  .mosaic__plan { left: 20px; bottom: 20px; }
  /* 大きく見る窓の小さい一覧は少し大きく。広い画面でも ← → が両端へ離れすぎないよう幅を抑える */
  .viewer__thumbs { max-width: 840px; }
  .viewer__thumbs button { width: 72px; height: 54px; }
  /* 本文の節は左の列に上から積み、家賃の箱だけ右の列で全部の行にまたがる（＝最後の節まで付いてくる） */
  .dt-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; column-gap: 72px; align-items: start; }
  .dt-grid > * { grid-column: 1; min-width: 0; }
  .dt-grid > .side { grid-column: 2; grid-row: 1 / span 12; align-self: stretch; }
  .side .price { position: sticky; top: 120px; }
  .side { position: relative; margin-top: -96px; z-index: 5; }
  .price { margin-top: 0; padding: 32px 30px 26px; }
  .rent b { font-size: 60px; }
  .dt-intro { padding-top: 40px; }
  .dt-intro h1 { font-size: 38px; letter-spacing: .08em; }
  .keys { gap: 10px 44px; margin-top: 30px; }
  .keys dd { font-size: 32px; }
  .sec { padding-block: 84px; }
  .plan { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .plan__text { position: relative; padding-right: 190px; }
  .plan__illust { position: absolute; right: 0; bottom: 0; margin: 0; }
  .dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .costbox { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: end; }
  .cost__total b { font-size: 60px; }
  .fac { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; }
  .fac__kids { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
  .sup .wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 2fr); gap: 72px; padding-block: 96px; }
  .sup__big { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin-top: 0; }
  .sup__progs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
  .dock { display: none; }
  .has-dock .ft { padding-bottom: 0; }
  .mboard__in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); padding-block: 88px 72px; }
  .mboard__under { grid-column: 1 / -1; }
  .mboard__title { font-size: 26px; }
  .mboard__title b { font-size: 76px; }
  .mboard__title small { font-size: 24px; }
  .ratio__mem { justify-content: flex-end; padding: 0 14px; }
  .ratio__mem img { display: block; }
  .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mboard__foot time { margin-left: auto; }

  /* 検索結果：生成りの地に、白い条件の面とカードを浮かせる */
  .rs-top { padding-top: 26px; }
  .rs-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 44px; align-items: start; }
  .filters { display: block; position: sticky; top: 116px; max-height: calc(100vh - 136px); overflow: auto; margin-top: 20px; padding: 6px 24px 24px; background: var(--paper); box-shadow: var(--lift-1); scrollbar-width: thin; }
  .filters .btn { margin-top: 12px; }
  .filters__save { display: block; width: 100%; margin-top: 10px; padding: 8px; border: 0; background: none; font-size: 12.5px; color: var(--sub); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .rs-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 24px; margin-top: 20px; }
  .rs-head h1 b { font-size: 88px; }
  .rs-change { display: none; }
  .rs-tools { margin-top: 0; }
  .rs-mnote { grid-template-columns: 96px minmax(0, 1fr) auto; gap: 22px; padding: 18px 26px 18px 18px; }
  .rs-mnote img { width: 96px; }
  .rs-mnote .more { margin-top: 0; }
  .rs-list { gap: 28px 24px; }

  /* さがす */
  .sc-hero .wrap { padding-block: 34px 150px; }
  .sc-hero h1 { font-size: 52px; }
  .sc-body { margin-top: -110px; }
  .sc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; align-items: start; }
  .sc-sum { position: sticky; top: 120px; bottom: auto; margin: 56px 0 0; padding: 30px; box-shadow: var(--lift-2); }
  .sc-sum__inner { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .sc-sum__count b { font-size: 72px; font-weight: 200; letter-spacing: -.03em; }
  .sc-sum__cond { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 12.5px; color: rgba(255, 255, 255, .78); }
  .sc-sum__cond span + span::before { content: "・"; margin: 0 6px; color: rgba(255, 255, 255, .4); }
  .scenes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .wardlist { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 28px; }

  /* 区のページ：写真に区名を重ね、数字の面を下の端に浮かせる */
  /* 高さを決めて切り抜く（縦長の写真がそのままの高さで伸びないよう、行の高さも決める） */
  .wd-hero__photos { margin: 18px 0 0; grid-template-columns: 1.6fr 1fr 1fr; grid-template-rows: minmax(0, 1fr); height: 540px; }
  .wd-hero__photos img { aspect-ratio: auto; min-height: 0; }
  .wd-hero__title { left: 48px; bottom: 150px; }
  .wd-hero__title h1 { font-size: 64px; }
  .wd-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 48px; align-items: center; width: calc(100% - 96px); margin: -112px auto 0; padding: 32px 40px; }
  .wd-stats { margin-top: 0; }
  .wd-stats dd { font-size: 46px; }
  .wd-sup .wrap { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 2fr); gap: 72px; padding-block: 104px; }
  .wd-sup__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin-top: 0; }
  .wd-sup__progs ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wd-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }
}
/* 小さめのPCでは、ヘッダーに全部並べるとメニューが折れるので件数を隠す */
@media (min-width: 991px) and (max-width: 1199px) {
  .hd__live { display: none; }
  /* 検索結果は左に条件の面がある分カードが細い（1024pxで文字の幅143px＝広さの行の87%が折り返していた）ので2列 */
  .rs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   TOP（居住用サイトの /family/ から移した・rooms #420 の見た目）
   ========================================================================== */
:root {
  --f-ink: #2b2622;
  --f-sub: #5e554d;
  --f-mute: #8b8178;
  --f-wood: #7a5638;
  --f-wood-light: #d2b89c;
  --f-tint: #f4f2ef;
  --f-rule: #e4e0da;
  --f-serif: var(--serif);
  --f-en: var(--en);
  --f-hand: var(--hand);
  --f-plane: #e9e2d8;
  --f-sage: #a6d6bc;
  --f-sand: #e2c4a5;
  --f-ease: cubic-bezier(.22, .7, .12, 1);
  --font-base: var(--sans);
  --side: var(--gl);
}

@media screen and (min-width: 991px) {
  .has-pc {
    --pc-wrap: 1184px;
    --pc-gutter: 48px;
    --pc-inline: max(var(--pc-gutter), calc((100% - var(--pc-wrap)) / 2));
    --pc-header-h: 96px;
  }
}

/* 歩いていく家族が横にはみ出しても、ページを横に広げない */
.l-page--top {
  overflow-x: clip;
}

/* ---- TOP：共通の小さな部品 ---- */
.f-hand {
  font-family: var(--f-hand);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--f-wood);
}

.f-head {
  padding-inline: var(--side);
}

.f-head--row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 24px;
}

.f-kicker {
  font-size: 15px;
  line-height: 1.6;
}

.f-title {
  margin-top: 4px;
  font-family: var(--f-serif);
  font-size: 25px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .1em;
  color: var(--f-ink);
  word-break: auto-phrase;
}

.f-note {
  margin-top: 10px;
  max-width: 34em;
  font-size: 13px;
  line-height: 2;
  color: var(--f-sub);
}

.f-more {
  display: inline-block;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--f-wood);
}

/* ---- TOP：線画（components/FamilyDraw.astro。線を描き終えたら筆の線の画像に替える） ---- */
.f-art {
  position: relative;
  margin: 0;
}

.f-art__png {
  display: block;
  width: 100%;
  height: auto;
}

.f-art__draw {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .9s ease;
}

.f-motion .f-art__png {
  opacity: 0;
  transition: opacity .9s ease;
}

.f-motion .f-art__draw {
  opacity: 1;
}

.f-motion .f-art__draw path {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
}

.f-motion .f-art.is-drawing .f-art__draw path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset calc(var(--l) * var(--D, 1.8s)) linear calc(var(--s) * var(--D, 1.8s) + var(--delay, 0s));
}

.f-motion .f-art.is-done .f-art__png {
  opacity: 1;
}

.f-motion .f-art.is-done .f-art__draw {
  opacity: 0;
}

/* ---- TOP：最初の画面（写真いっぱい・縦書きのコピー・描き込まれる家族） ---- */
.f-hero {
  position: relative;
  z-index: 2;
  /* ヘッダーの上の「新着速報」の帯（.ntk・2026-10-30〜）がある分も引く（帯の高さは --ntk-h） */
  height: calc(92svh - 72px - var(--ntk-h, 0px));
  min-height: 540px;
  max-height: 860px;
}

.f-hero__photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.f-hero__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 38% 50%;
  transform-origin: 40% 60%;
}

.f-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, .35) 45%, rgba(255, 255, 255, .05) 70%);
}

/* 1行目（家族の暮らしは、）と2行目（広さから。）は span で分けてある。縦書きなので、それぞれが1列になる */
.f-hero__catch {
  position: absolute;
  top: 24px;
  left: var(--side);
  z-index: 3;
  writing-mode: vertical-rl;
  font-family: var(--f-serif);
  font-size: 38px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .14em;
  white-space: nowrap;
  color: var(--f-ink);
}

.f-hero__catch > span {
  display: block;
}

.f-hero__ch {
  display: inline-block;
}

.f-hero__walk {
  position: absolute;
  left: 8%;
  bottom: 110px;
  z-index: 6;
  width: 62%;
  will-change: transform;
}

/* 写真の上でも線が読めるよう、家族の後ろだけ白くぼかす */
.f-hero__walk::before {
  content: "";
  position: absolute;
  inset: -12% -16% -6%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0));
}

/* 家族の絵の高さ（幅の約0.96倍）の上に置く */
.f-hero__note {
  position: absolute;
  right: 6%;
  bottom: calc(110px + 60vw + 16px);
  z-index: 4;
  font-size: 16px;
  line-height: 1.6;
  transform: rotate(-5deg);
}

/* 件数と検索（写真の下の端に重ねる生成りの面。歩いていく家族はこの面の後ろへ入る） */
.f-hero__panel {
  position: relative;
  z-index: 7;
  width: calc(100% - var(--side));
  margin: -86px 0 0 auto;
  padding: 28px var(--side) 28px 24px;
  background: var(--f-tint);
}

.f-hero__count {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.f-hero__num {
  font-family: var(--f-en);
  font-size: 56px;
  font-weight: 200;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--f-ink);
}

.f-hero__unit {
  font-family: var(--f-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  white-space: nowrap;
  color: var(--f-ink);
}

.f-hero__lead {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: .04em;
  color: var(--f-sub);
}

/* 文章の形の検索（「23区すべてで、40㎡以上、…のお部屋を。」）。言葉の途中で折り返さないよう、まとまりごとに nowrap */
.f-finder {
  margin-top: 18px;
}

.f-finder__sentence {
  font-family: var(--f-serif);
  font-size: 16px;
  font-weight: 500;
  line-height: 2.3;
  letter-spacing: .04em;
  color: var(--f-sub);
}

.f-finder__nw {
  white-space: nowrap;
}

/* iOS が入力時に画面を拡大しないよう 16px 以上 */
.f-finder__select {
  -webkit-appearance: none;
  appearance: none;
  margin: 0 1px;
  padding: 0 15px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%237a5638' stroke-width='1.3'/%3E%3C/svg%3E") right 2px center / 9px no-repeat;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--f-ink);
  cursor: pointer;
}

.f-finder__select:focus-visible {
  outline: 2px solid var(--f-wood);
  outline-offset: 4px;
}

.f-finder__go {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 16px 20px;
  border: 0;
  border-radius: 2px;
  background: var(--f-ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .24em;
  color: #fff;
  cursor: pointer;
  transition: background-color .3s;
}

.f-finder__go:hover {
  background: #000;
}

.f-finder__more {
  display: inline-block;
  margin-top: 14px;
  font-size: 12.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--f-sub);
}

/* 検索の下の会員限定の件数（会員でない方にだけ・2026-10-29〜）。ぼかした会員限定の写真3枚を重ね、白い面を浮かせる */
.f-finder__members {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 12px 16px 12px 12px;
  background: #fff;
  box-shadow: var(--lift-1);
  color: var(--f-ink);
  transition: background-color .3s;
}

.f-finder__members:hover {
  background: var(--f-tint);
}

.f-finder__stk {
  position: relative;
  flex: none;
  width: 74px;
  height: 44px;
}

.f-finder__stk img {
  position: absolute;
  top: 0;
  width: 44px;
  height: 44px;
  object-fit: cover;
  border: 2px solid #fff;
}

.f-finder__stk img:nth-child(2) { left: 15px; }
.f-finder__stk img:nth-child(3) { left: 30px; }

.f-finder__mtext {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  line-height: 1.7;
}

.f-finder__mtext b {
  margin: 0 2px;
  font-weight: 400;
  font-size: 17px;
}

.f-finder__mtext small {
  display: block;
  font-size: 12px;
  color: var(--f-sub);
}

.f-finder__members i {
  flex: none;
  font-style: normal;
  font-size: 18px;
  color: var(--f-wood);
}

/* ---- TOP：暮らしの場面から、さがす（lib/family/scenes.ts） ---- */
.f-scenes {
  margin-top: 88px;
}

.f-scene-list {
  margin: 26px 0 0;
  padding: 0 var(--side);
  list-style: none;
}

.f-scene {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  grid-template-areas:
    "no name count"
    "no cond count"
    "ph ph   ph";
  gap: 0 12px;
  padding: 22px 0;
  color: var(--f-ink);
  transition: background-color .4s;
}

.f-scene__no {
  grid-area: no;
  padding-top: 6px;
  font-family: var(--f-en);
  font-size: 13px;
  font-weight: 300;
  color: var(--f-mute);
}

.f-scene__name {
  grid-area: name;
  font-family: var(--f-serif);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .08em;
  word-break: auto-phrase;
  transition: color .3s;
}

.f-scene__cond {
  grid-area: cond;
  font-size: 12px;
  color: var(--f-mute);
}

/* 会員さまだけの、お部屋（2026-10-29〜）。条件の前に「会員限定」の札 */
.f-scene--members .f-scene__cond::before {
  content: "会員限定";
  display: inline-block;
  margin-right: 8px;
  padding: 0 7px;
  font-size: 10.5px;
  letter-spacing: .08em;
  white-space: nowrap;
  background: var(--f-wood);
  color: #fff;
}

.f-scene__count {
  grid-area: count;
  align-self: center;
  font-family: var(--f-en);
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
  white-space: nowrap;
}

.f-scene__count small {
  margin-left: 2px;
  font-family: var(--font-base);
  font-size: 11px;
  color: var(--f-sub);
}

.f-scene__count i {
  display: block;
  margin-top: 6px;
  font-family: var(--font-base);
  font-size: 11px;
  font-style: normal;
  text-align: right;
  color: var(--f-wood);
}

.f-scene__photos {
  grid-area: ph;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 14px;
}

.f-scene__photos > span {
  overflow: hidden;
}

.f-scene__photos img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .9s var(--f-ease);
}

.f-scene:hover .f-scene__photos img {
  transform: scale(1.05);
}

.f-scene:hover .f-scene__name {
  color: var(--f-wood);
}

/* ---- TOP：今週、入ったお部屋（このサイトの物件カード .rc を生成りの帯に浮かせる） ---- */
.f-new {
  margin-top: 88px;
  padding: 56px 0 72px;
  background: var(--cream);
}

.f-new .cards {
  margin-top: 4px;
  padding-inline: var(--side);
}

/* ---- TOP：広さの目安（lib/family/size-guide.ts） ---- */
.f-sizes {
  margin-top: 100px;
}

.f-size-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px 18px;
  margin: 34px 0 0;
  padding: 0 var(--side);
  list-style: none;
}

/* 線画は高さをそろえる。figure を絵の幅にちぢめて、描く線（SVG）と筆の線（画像）をぴったり重ねる */
.f-sz__art {
  display: flex;
  align-items: flex-end;
  height: 120px;
}

.f-sz__art .f-art {
  display: inline-block;
  height: 100%;
}

.f-sz__art .f-art__png {
  width: auto;
  height: 100%;
}

.f-sz__num {
  margin-top: 16px;
  font-family: var(--f-en);
  font-size: 48px;
  font-weight: 200;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--f-ink);
}

.f-sz__num small {
  margin-left: 4px;
  font-family: var(--f-serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .06em;
}

.f-sz__life {
  margin-top: 8px;
  font-family: var(--f-serif);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .06em;
  word-break: auto-phrase;
  color: var(--f-ink);
}

.f-sz__fact {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.9;
  color: var(--f-sub);
}

.f-sz__link {
  display: inline-block;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--f-wood);
}

.f-sz__link b {
  margin: 0 2px;
  font-family: var(--f-en);
  font-size: 14px;
  font-weight: 400;
}

/* ---- TOP：区をえらぶ（墨色の面・23区の地図＝components/FamilyWardMap.astro） ---- */
.f-wards {
  margin-top: 110px;
  padding: 80px var(--side) 84px;
  background: var(--f-ink);
  color: #fff;
}

.f-wards .f-head {
  padding-inline: 0;
}

.f-wards .f-kicker {
  color: var(--f-sand);
}

.f-wards .f-title {
  color: #fff;
}

.f-wards .f-note {
  color: rgba(255, 255, 255, .7);
}

.f-wards__illust {
  width: 92px;
  margin-bottom: 20px;
}

.f-common {
  margin-top: 30px;
  padding: 22px 22px 20px;
  background: rgba(255, 255, 255, .06);
}

.f-common__title {
  font-size: 12px;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .6);
}

.f-common dl {
  margin: 8px 0 0;
}

.f-common dl div {
  padding: 6px 0;
}

.f-common dt {
  font-size: 12px;
  color: rgba(255, 255, 255, .6);
}

.f-common dd {
  margin: 0;
  font-family: var(--f-serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .05em;
}

.f-common dd small {
  font-family: var(--font-base);
  font-size: 11px;
  font-weight: 400;
  color: rgba(255, 255, 255, .55);
}

.f-wards__sub {
  margin-top: 54px;
  font-family: var(--f-serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: .06em;
}

.f-wards__note {
  margin-top: 34px;
  font-size: 11px;
  line-height: 1.9;
  color: rgba(255, 255, 255, .48);
}

.f-wmap {
  margin-top: 22px;
}

.f-wmap__map svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* 区の境目は墨色の線（＝地の色の隙間）。色の濃さ（--a）は40㎡以上のお部屋の数 */
.f-wmap__ward {
  fill: rgba(255, 255, 255, var(--a, .08));
  stroke: var(--f-ink);
  stroke-width: 3;
  stroke-linejoin: round;
  cursor: pointer;
  outline: none;
  transition: fill .4s;
}

.f-wmap__ward:hover,
.f-wmap__ward:focus-visible {
  fill: rgba(255, 255, 255, .34);
}

.f-wmap[data-filter="zero"] .f-wmap__ward.is-zero {
  fill: rgba(166, 214, 188, .72);
}

.f-wmap[data-filter="house"] .f-wmap__ward.is-house {
  fill: rgba(226, 196, 165, .72);
}

.f-wmap .f-wmap__ward.is-on {
  fill: var(--f-tint);
}

/* 区名は地図の目盛り（viewBox 1000）の大きさ。スマホの幅では約10px・PCは下の節で小さくする */
.f-wmap__labels text {
  font-family: var(--f-serif);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: .04em;
  text-anchor: middle;
  dominant-baseline: central;
  fill: rgba(255, 255, 255, .86);
  pointer-events: none;
  transition: fill .3s;
}

.f-wmap[data-filter="zero"] .f-wmap__labels text.is-zero,
.f-wmap[data-filter="house"] .f-wmap__labels text.is-house,
.f-wmap .f-wmap__labels text.is-on {
  fill: var(--f-ink);
}

.f-wmap__legend {
  margin-top: 10px;
  font-size: 11px;
  color: rgba(255, 255, 255, .5);
}

.f-wmap__panel {
  margin-top: 26px;
}

.f-wmap__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.f-wmap__chips[hidden],
.f-wmd[hidden] {
  display: none;
}

.f-wmap__chip {
  padding: 10px 16px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .86);
  cursor: pointer;
  transition: background-color .3s, color .3s;
}

.f-wmap__chip:hover {
  background: rgba(255, 255, 255, .16);
}

.f-wmap__chip--zero[aria-pressed="true"] {
  background: var(--f-sage);
  color: var(--f-ink);
}

.f-wmap__chip--house[aria-pressed="true"] {
  background: var(--f-sand);
  color: var(--f-ink);
}

.f-wmd {
  margin-top: 30px;
}

.f-wmd__k {
  font-size: 11px;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .5);
}

.f-wmd__name {
  margin-top: 4px;
  font-family: var(--f-serif);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: .1em;
  color: #fff;
}

.f-wmd__count {
  margin-top: 2px;
  font-size: 13px;
  color: rgba(255, 255, 255, .75);
}

.f-wmd__count b {
  margin-right: 4px;
  font-family: var(--f-en);
  font-size: 40px;
  font-weight: 200;
  color: #fff;
}

.f-wmd__facts {
  margin: 20px 0 0;
}

.f-wmd__facts div {
  padding: 10px 0;
}

.f-wmd__facts dt {
  font-size: 11.5px;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .55);
}

.f-wmd__facts dd {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.8;
}

.f-wmd__facts dd small {
  margin-left: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, .5);
}

.f-wmd__facts ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.f-wmd__facts li::before {
  content: "・";
  color: rgba(255, 255, 255, .45);
}

.f-wmd__facts .is-zero {
  font-weight: 500;
  color: var(--f-sage);
}

.f-wmd__act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin-top: 22px;
}

.f-wmd__btn {
  display: inline-block;
  padding: 15px 24px;
  background: var(--f-tint);
  font-size: 14px;
  letter-spacing: .1em;
  color: var(--f-ink);
  transition: background-color .3s;
}

.f-wmd__btn:hover {
  background: #fff;
}

.f-wmd__link {
  font-size: 13px;
  color: var(--f-sand);
}

.f-wmap__all {
  margin-top: 44px;
  font-size: 12.5px;
  line-height: 2.2;
  color: rgba(255, 255, 255, .6);
}

.f-wmap__all a {
  margin-right: 14px;
  white-space: nowrap;
  color: inherit;
  transition: color .25s;
}

.f-wmap__all a:hover {
  color: var(--f-sand);
}

.f-wmap__all small {
  margin-left: 3px;
  font-family: var(--f-en);
  font-size: 11px;
  color: rgba(255, 255, 255, .4);
}

/* ---- TOP：専属エージェント（components/FamilyAgents.astro・lib/staff.ts） ---- */
.f-agents {
  margin-top: 110px;
}

.f-agents__list {
  display: flex;
  gap: 18px;
  margin-top: 36px;
  padding: 0 var(--side) 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--side);
  scrollbar-width: none;
}

.f-agents__list::-webkit-scrollbar {
  display: none;
}

.f-agent {
  flex: 0 0 76%;
  scroll-snap-align: start;
}

.f-agent__photo {
  margin: 0;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--f-plane);
}

.f-agent:nth-child(2) .f-agent__photo {
  background: var(--f-tint);
}

.f-agent:nth-child(3) .f-agent__photo {
  background: #efe6d9;
}

.f-agent:nth-child(4) .f-agent__photo {
  background: #ece6df;
}

.f-agent__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.f-agent__role {
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
  margin-top: 16px;
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--f-wood);
}

.f-agent__role span {
  color: var(--f-sub);
}

.f-agent__name {
  margin-top: 2px;
  font-family: var(--f-serif);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--f-ink);
}

.f-agent__name small {
  margin-left: 10px;
  font-family: var(--font-base);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--f-mute);
}

.f-agent__lead {
  margin-top: 12px;
  font-family: var(--f-serif);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: .04em;
  word-break: auto-phrase;
  color: var(--f-ink);
}

.f-agent__more {
  margin-top: 6px;
  font-size: 13px;
  line-height: 2;
  color: var(--f-sub);
}

/* ---- TOP：専属エージェントと相談の流れ（components/LineCta.astro・2026-10-21〜・CVR 5% のための作り直し） ----
   見本＝社内資料/ファミリーCV強化見本_20261021 第2版（ユーザー承認）。担当者の写真の下半分から生成りの面を敷き、
   人の紹介と「何が起きるか」の3つを同じ面に載せる。LINE のボタンの白い面は、生成りの面の下の端からはみ出させて浮かせる
   （写真が上の端に、白い面が下の端に重なる）。数字は広さの目安と同じ細い数字、一言は手書き。
   面の上端は写真の高さの約55%（カードの幅＝写真の高さを、入れ物の幅から計算する） */
.f-ask__stage {
  position: relative;
  container-type: inline-size;
  margin-top: 36px;
}

.f-ask__stage::before {
  content: "";
  position: absolute;
  inset: calc((100cqw - var(--side) * 2) * .76 * .55) 0 72px;
  background: var(--f-tint);
}

.f-ask .f-agents__list {
  position: relative;
  margin-top: 0;
}

.f-ask .f-agent__photo {
  box-shadow: var(--lift-1);
}

.f-ask__flow {
  position: relative;
  margin-top: 52px;
  padding: 0 var(--side);
}

.f-ask__kicker {
  font-size: 15px;
}

.f-ask__title {
  margin-top: 6px;
  font-family: var(--f-serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .06em;
  word-break: auto-phrase;
  color: var(--f-ink);
}

.f-ask__steps {
  display: grid;
  gap: 26px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: ask;
}

.f-ask__steps li {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-content: start;
  column-gap: 12px;
  counter-increment: ask;
}

.f-ask__steps li::before {
  content: counter(ask);
  grid-row: span 2;
  font-family: var(--f-en);
  font-size: 48px;
  font-weight: 200;
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--f-ink);
}

.f-ask__steps b {
  font-family: var(--f-serif);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .06em;
  color: var(--f-ink);
}

.f-ask__steps span {
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--f-sub);
}

/* LINE のボタンの白い面（生成りの面の下の端からはみ出させて浮かせる） */
.f-ask__card {
  position: relative;
  z-index: 1;
  margin-top: 36px;
  padding: 28px 22px 24px;
  background: #fff;
  box-shadow: var(--lift-2);
}

/* 手書きの一言と、ボタンへ向かう手書きの矢印 */
.f-ask__aside {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.5;
  transform: rotate(-2deg);
  transform-origin: left bottom;
}

.f-ask__aside svg {
  flex: none;
  width: 34px;
  height: 30px;
  fill: none;
  stroke: var(--f-wood);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.f-ask__line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 60px;
  padding: 0 20px;
  background: var(--line-green);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .12em;
  color: #fff;
  transition: filter .3s;
}

.f-ask__line:hover {
  filter: brightness(.94);
}

.f-ask__line svg {
  flex: none;
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.f-ask__free {
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.9;
  word-break: auto-phrase;
  color: var(--f-sub);
}

.f-ask__alt {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--f-sub);
}

.f-ask__alt a {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--f-wood);
}

/* ---- スマホの下に出し続ける相談のバー（components/CtaBar.astro・scripts/cta-bar.ts・2026-10-21〜） ----
   最初の画面を過ぎたら出し、相談の流れ・フッターの相談の入口が見えている間は画面の下へ逃がす（is-away）。
   出すのは TOP・23区と駅の一覧・区・駅・検索結果（物件ページ・さがすは自分の下の帯があるので出さない）。PC では出さない（ヘッダーに LINE がある） */
.cta-bar {
  position: fixed;
  inset: auto 0 0;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 6px;
  padding: 8px var(--gr) calc(8px + env(safe-area-inset-bottom, 0px)) var(--gl);
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 -16px 36px -26px rgba(34, 30, 27, .7);
  transition: transform .35s var(--ease);
}

.cta-bar.is-away {
  transform: translateY(110%);
}

.cta-bar[hidden] {
  display: none;
}

/* 会員には会員登録を出さない（data-auth）ので、LINE を横いっぱいに */
.cta-bar:has(.cta-bar__member[hidden]),
.cta-bar:not(:has(.cta-bar__member)) {
  grid-template-columns: minmax(0, 1fr);
}

.cta-bar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 4px 8px;
  text-align: center;
  line-height: 1.3;
}

.cta-bar .cta-bar__line {
  flex-direction: row;
  gap: 8px;
  background: var(--line-green);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .08em;
  color: #fff;
}

.cta-bar__line svg {
  flex: none;
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* 会員登録は会員の案内と同じ木の色 */
.cta-bar__member {
  background: var(--f-wood);
  font-size: 13px;
  letter-spacing: .04em;
  color: #fff;
}

.cta-bar__member small {
  font-size: 10.5px;
  color: rgba(255, 255, 255, .78);
}

/* バーがフッターの一番下（会社名・免許番号）を覆わないよう、そのぶん余白を足す */
.has-cta-bar .ft {
  padding-bottom: 76px;
}

@media (prefers-reduced-motion: reduce) {
  .cta-bar {
    transition: none;
  }
}

/* ---- TOP：会員の案内（線画を淡い面に重ね、木の色の面に言葉を置く） ---- */
.f-members {
  position: relative;
  margin: 110px 0 90px;
  padding: 0 var(--side);
}

.f-members__visual {
  position: relative;
  width: 76%;
  padding: 26px 0 0 18px;
}

.f-members__visual::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 78%;
  height: 84%;
  background: var(--f-plane);
}

.f-members__visual .f-art {
  position: relative;
  z-index: 1;
}

.f-members__body {
  position: relative;
  z-index: 1;
  margin: -70px 0 0 16%;
  padding: 34px 26px 32px;
  background: var(--f-wood);
  color: #fff;
}

.f-members__kicker {
  font-size: 15px;
  color: rgba(255, 255, 255, .85);
}

.f-members__title {
  margin-top: 6px;
  font-family: var(--f-serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .06em;
  word-break: auto-phrase;
  text-wrap: balance;
}

.f-members__title b {
  margin-right: 4px;
  font-family: var(--f-en);
  font-size: 46px;
  font-weight: 200;
}

.f-members__benefits {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 2;
  color: rgba(255, 255, 255, .85);
}

.f-members__benefits li::before {
  content: "・";
}

.f-members__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 24px;
}

.f-members__btn {
  display: inline-block;
  padding: 15px 26px;
  background: #fff;
  font-size: 14px;
  letter-spacing: .12em;
  color: var(--f-ink);
  transition: background-color .3s;
}

.f-members__btn:hover {
  background: var(--f-tint);
}

/* 全体の件数と、電話・LINE の行（2026-10-29〜） */
.f-members__scope {
  margin-top: 10px;
  font-size: 14px;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .82);
}

.f-members__scope b {
  margin: 0 3px;
  font-weight: 400;
  font-size: 19px;
  color: #fff;
}

.f-members__alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  margin-top: 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, .82);
}

.f-members__alt a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
}

.f-members__alt b {
  margin-left: 6px;
  font-weight: 400;
  font-size: 17px;
}

.f-members__alt svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.f-members__login {
  padding: 8px 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: rgba(255, 255, 255, .85);
  cursor: pointer;
}

/* ---- TOP：動き（.f-motion のときだけ最初を隠す・scripts/family-top.ts） ---- */
.f-motion [data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s var(--f-ease), transform 1.1s var(--f-ease);
  transition-delay: var(--d, 0s);
}

.f-motion [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

.f-motion .f-hero__photo {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.6s var(--f-ease);
}

.f-motion .f-hero__photo img {
  transform: scale(1.18);
  transition: transform 2.6s var(--f-ease);
}

.f-motion .f-hero__panel {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.2s var(--f-ease) 1.2s, transform 1.2s var(--f-ease) 1.2s;
}

.f-motion .f-hero__note {
  opacity: 0;
  transition: opacity .8s ease;
}

.f-motion .f-hero__note.is-in {
  opacity: 1;
}

/* 1文字ずつに分ける前のコピーも隠しておく（分けた瞬間に一度見えて消える、を防ぐ） */
.f-motion .f-hero__catch:not(.is-split) {
  opacity: 0;
}

.f-motion .f-hero__ch {
  opacity: 0;
  transform: translateY(-18px);
  transition: opacity .9s var(--f-ease), transform .9s var(--f-ease);
  transition-delay: calc(.6s + var(--i) * .06s);
}

.f-loaded .f-hero__photo {
  clip-path: inset(0 0 0 0);
}

/* 写真が出たあとは、スクロールで寄る動きに素早くついていく（2.6秒かけると遅れて見える） */
.f-loaded .f-hero__photo img {
  transform: scale(var(--zoom, 1));
}

.f-settled .f-hero__photo img {
  transition: transform .4s linear;
}

.f-loaded .f-hero__panel,
.f-loaded .f-hero__ch {
  opacity: 1;
  transform: none;
}

.f-motion .f-scene__photos > span,
.f-motion .f-new .rc__img,
.f-motion .f-agent__photo {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.2s var(--f-ease) var(--d, 0s);
}

.f-motion .f-scene__photos > span:nth-child(2) {
  --d: .08s;
}

.f-motion .f-scene__photos > span:nth-child(3) {
  --d: .16s;
}

.f-motion .f-scene.is-in .f-scene__photos > span,
.f-motion .f-new .rc.is-in .rc__img,
.f-motion .f-agent.is-in .f-agent__photo {
  clip-path: inset(0 0 0 0);
}

/* ---- TOP：幕開け（訪問の最初のページが TOP のときだけ・約3.3秒・押すと飛ばす・components/FamilyOpening.astro） ----
   見本＝社内資料/ファミリーオープニング見本_20261021/（ユーザー承認）。描く所は CSS だけで動き、
   扉の穴と寄りは FamilyOpening.astro のスクリプトが受け持つ。<html class="f-opening"> のときだけ出す */
.f-op {
  display: none;
}

.f-opening .f-op {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--cream);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* 幕の上で指でなぞっても、裏のページをスクロールさせない（押せば扉が開く） */
  touch-action: none;
  overscroll-behavior: contain;
}

/* 扉が開いたら、幕は扉の形の穴のあいた面（.f-op__curtain）だけになる */
.f-op.is-open {
  background: transparent;
}

.f-op__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* 穴のふち＝扉の枠の線（寄っても太くならない） */
.f-op__curtain {
  fill: var(--cream);
  fill-rule: evenodd;
  stroke: var(--f-ink);
  stroke-width: 1.4;
  stroke-opacity: 0;
}

/* 23区：真ん中から外へ、区の線を順に引いてから、ごく薄く色を置く */
.f-op__ward {
  fill: var(--f-plane);
  fill-opacity: 0;
  stroke: var(--f-wood-light);
  stroke-width: 2.4;
  stroke-linejoin: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  animation: f-op-draw .5s var(--f-ease) calc(var(--i) * .016s) both, f-op-fill-ward .5s ease .5s both;
}

/* 家（ロゴの形）：ペンで一筆に描く → 目 → 口 → 扉 */
.f-op__ln {
  fill: none;
  stroke: var(--f-ink);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
}

.f-op__roof {
  animation: f-op-draw .7s cubic-bezier(.55, .1, .3, 1) .06s both;
}

/* 家の中を生成りで塗って地図の線を隠す。扉の所はくり抜いてある（扉の穴から写真が見えるように） */
.f-op__fill {
  fill: var(--cream);
  fill-rule: evenodd;
  fill-opacity: 0;
  animation: f-op-fill .4s ease .2s both;
}

.f-op__smile {
  animation: f-op-draw .28s ease-out .74s both;
}

.f-op__eye {
  fill: var(--f-ink);
  transform-box: fill-box;
  transform-origin: center;
  animation: f-op-pop .3s cubic-bezier(.3, 1.6, .5, 1) .62s both;
}

.f-op__eye--r {
  animation-delay: .68s;
}

.f-op__door {
  transition: opacity .28s ease;
}

.f-op__door path {
  fill: var(--f-ink);
  animation: f-op-fade .22s ease .88s both;
}

.f-op.is-light .f-op__door {
  opacity: 0;
}

/* 寄るあいだは線の太さを変えない（太い墨の帯にならないように）・目は先に消す */
.f-op.is-zoom .f-op__ln {
  animation: none;
  stroke-dasharray: none;
  vector-effect: non-scaling-stroke;
  stroke-width: 2.4px;
}

.f-op.is-zoom .f-op__eye {
  opacity: 0;
  transition: opacity .15s ease;
}

/* 文字：ロゴの字 → 線 → 一言 → 件数と会社名（地図の下に置く位置 --op-ty はスクリプトが入れる） */
.f-op__text {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--op-ty, 66%);
  display: grid;
  justify-items: center;
  gap: 12px;
  padding-inline: var(--gl) var(--gr);
  text-align: center;
  transition: opacity .3s ease, transform .45s var(--f-ease);
}

.f-op.is-light .f-op__text {
  opacity: 0;
  transform: translateY(-6px);
}

.f-op__text > * {
  margin: 0;
  animation: f-op-up .6s var(--f-ease) both;
}

/* 文字は書体が届くまで止めておく（届く前に手元の書体で出て、途中で切り替わるのを防ぐ・届かなくても0.9秒で .is-fonts が付く） */
.f-op:not(.is-fonts) .f-op__text > * {
  animation-play-state: paused;
}

/* 裏のタブで開いたときは、表に出るまで描く動きを全部止めておく（見ていない間に終わらせない） */
.f-op.is-wait *,
.f-op.is-wait *::before,
.f-op.is-wait *::after {
  animation-play-state: paused !important;
}

.f-op__mark {
  display: grid;
  justify-items: center;
  font-family: var(--f-en);
  line-height: 1;
  color: var(--f-ink);
  animation-delay: .35s;
}

.f-op__mark b {
  font-weight: 400;
  font-size: 30px;
  letter-spacing: .14em;
  padding-left: .14em;
}

.f-op__mark small {
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: .42em;
  padding-left: .42em;
  color: var(--f-wood);
}

.f-op__rule {
  width: 28px;
  height: 1px;
  background: var(--f-wood);
  transform-origin: center;
  animation-name: f-op-rule;
  animation-delay: .5s;
}

.f-op__lead {
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .12em;
  color: var(--f-ink);
  animation-delay: .55s;
}

.f-op__meta {
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--f-sub);
  animation-delay: .66s;
}

.f-op__meta b {
  font-family: var(--f-en);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--f-ink);
}

@keyframes f-op-draw { to { stroke-dashoffset: 0; } }
@keyframes f-op-fill { to { fill-opacity: 1; } }
@keyframes f-op-fill-ward { to { fill-opacity: .55; } }
@keyframes f-op-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes f-op-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes f-op-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes f-op-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 幕開けを見せたときの最初の画面：写真は扉の向こうに最初から置いておき（上から降ろさない）、少し寄った所から落ち着かせる */
.f-motion.f-op-shown .f-hero__photo {
  clip-path: none;
  transition: none;
}

.f-motion.f-op-shown .f-hero__photo img {
  transform: scale(1.1);
}

.f-loaded.f-op-shown .f-hero__photo img {
  transform: scale(var(--zoom, 1));
}

@media screen and (min-width: 991px) {
  .f-op__text {
    gap: 14px;
  }

  .f-op__mark b {
    font-size: 42px;
  }

  .f-op__mark small {
    margin-top: 10px;
    font-size: 12px;
  }

  .f-op__lead {
    font-size: 22px;
  }

  .f-op__meta {
    font-size: 13px;
  }

  .f-op__meta b {
    font-size: 15px;
  }
}


@media screen and (min-width: 991px) {
  .has-pc .f-btn:hover,
  .has-pc .f-entrance__btn:hover {
    filter: brightness(1.25);
  }

  /* ---- TOP：節 ---- */
  .has-pc.is-family .f-sec {
    margin-top: 96px;
    padding-inline: var(--pc-inline);
  }

  .has-pc.is-family .f-sec__title {
    font-size: 30px;
  }

  /* ---- TOP（2026-10-20 作り直し）：PC。コピー・家族・手書きの一言・件数の面は重ねず、間に余白を取る ---- */
  .has-pc.is-family .f-head {
    padding-inline: var(--pc-inline);
  }

  .has-pc.is-family .f-head--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: 40px;
  }

  .has-pc.is-family .f-title {
    font-size: 36px;
  }

  .has-pc.is-family .f-note {
    font-size: 14px;
  }

  .has-pc.is-family .f-hero {
    height: calc(100vh - var(--pc-header-h));
    min-height: 600px;
    max-height: 920px;
  }

  .has-pc.is-family .f-hero__veil {
    background: linear-gradient(90deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, .5) 26%, rgba(255, 255, 255, 0) 52%);
  }

  /* 画面の高さに合わせて縦書きの大きさを決める（低い画面で「、」が次の列へこぼれないように） */
  .has-pc.is-family .f-hero__catch {
    top: 92px;
    left: var(--pc-inline);
    font-size: min(56px, 7vh);
    line-height: 1.55;
    letter-spacing: .16em;
  }

  /* 家族の右端が件数の面（右の余白から540px）にかからない位置・大きさ（1024〜1920pxの幅で確かめた） */
  .has-pc.is-family .f-hero__walk {
    left: calc(var(--pc-inline) + 250px);
    bottom: 96px;
    width: min(22vw, 300px);
  }

  /* 家族の絵の高さ（幅の約0.96倍）の上に置く */
  .has-pc.is-family .f-hero__note {
    right: auto;
    left: calc(var(--pc-inline) + 290px);
    bottom: calc(96px + min(21vw, 289px) + 40px);
    font-size: 20px;
  }

  .has-pc.is-family .f-hero__note br {
    display: none;
  }

  .has-pc.is-family .f-hero__panel {
    width: min(540px, 44vw);
    margin: calc(-1 * min(330px, 40vh)) var(--pc-inline) 0 auto;
    padding: 36px 44px 34px;
  }

  .has-pc.is-family .f-hero__num {
    font-size: 80px;
  }

  .has-pc.is-family .f-hero__unit {
    font-size: 15px;
  }

  .has-pc.is-family .f-hero__lead {
    font-size: 13.5px;
  }

  .has-pc.is-family .f-finder__sentence {
    font-size: 17px;
  }

  /* 場面は1行に「番号・名前・写真3枚・件数」 */
  .has-pc.is-family .f-scenes {
    margin-top: 140px;
  }

  .has-pc.is-family .f-scene-list {
    margin-top: 40px;
    padding-inline: var(--pc-inline);
  }

  .has-pc.is-family .f-scene {
    grid-template-columns: 64px minmax(0, 1fr) 452px 132px;
    grid-template-areas:
      "no name ph count"
      "no cond ph count";
    align-items: center;
    gap: 0 28px;
    margin: 0 -18px;
    padding: 20px 18px;
  }

  .has-pc.is-family .f-scene:hover {
    background: var(--f-tint);
  }

  .has-pc.is-family .f-scene__no {
    align-self: start;
    padding-top: 10px;
  }

  .has-pc.is-family .f-scene__name {
    align-self: end;
    font-size: 26px;
  }

  .has-pc.is-family .f-scene__cond {
    align-self: start;
    font-size: 13px;
  }

  .has-pc.is-family .f-scene__photos {
    gap: 8px;
    margin-top: 0;
  }

  .has-pc.is-family .f-scene__count {
    justify-self: end;
    font-size: 36px;
  }

  /* 新着は4列×2段のカード（見本 v4 の .cards--4） */
  .has-pc.is-family .f-new {
    margin-top: 130px;
    padding: 90px 0 110px;
  }

  .has-pc.is-family .f-new .cards {
    padding-inline: var(--pc-inline);
  }

  .has-pc.is-family .f-sizes {
    margin-top: 150px;
  }

  .has-pc.is-family .f-size-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px;
    margin-top: 50px;
    padding-inline: var(--pc-inline);
  }

  .has-pc.is-family .f-sz__art {
    height: 170px;
  }

  .has-pc.is-family .f-sz__num {
    font-size: 64px;
  }

  .has-pc.is-family .f-sz__life {
    font-size: 18px;
  }

  .has-pc.is-family .f-sz__fact {
    font-size: 13px;
  }

  /* 地図は左に大きく、えらんだ区の中身は右に（スクロールしても右に残る） */
  .has-pc.is-family .f-wards {
    margin-top: 160px;
    padding: 120px var(--pc-inline) 110px;
  }

  .has-pc.is-family .f-wards .f-head {
    padding-inline: 0;
  }

  .has-pc.is-family .f-wards__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: 60px;
  }

  .has-pc.is-family .f-wards__illust {
    width: 120px;
  }

  .has-pc.is-family .f-common {
    margin-top: 0;
    padding: 30px 34px 26px;
  }

  .has-pc.is-family .f-common dd {
    font-size: 18px;
  }

  .has-pc.is-family .f-wards__sub {
    margin-top: 80px;
    font-size: 20px;
  }

  .has-pc.is-family .f-wmap {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
    align-items: start;
    gap: 0 64px;
    margin-top: 30px;
  }

  .has-pc.is-family .f-wmap__panel {
    position: sticky;
    top: calc(var(--pc-header-h) + 40px);
    margin-top: 10px;
  }

  .has-pc.is-family .f-wmap__labels text {
    font-size: 24px;
  }

  .has-pc.is-family .f-wmd__name {
    font-size: 42px;
  }

  .has-pc.is-family .f-wmd__count b {
    font-size: 52px;
  }

  /* 専属エージェントは4人を横に並べ、2人目・4人目を少し下げる */
  .has-pc.is-family .f-agents {
    margin-top: 160px;
  }

  .has-pc.is-family .f-agents__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 36px;
    margin-top: 56px;
    padding: 0 var(--pc-inline);
    overflow: visible;
  }

  .has-pc.is-family .f-agent:nth-child(even) {
    margin-top: 56px;
  }

  .has-pc.is-family .f-agent__name {
    font-size: 22px;
  }

  /* 相談の流れ：写真の下から生成りの面。左に3つの流れ、右に白い面（面の下の端からはみ出す） */
  .has-pc.is-family .f-ask__stage {
    margin-top: 56px;
  }

  .has-pc.is-family .f-ask__stage::before {
    top: calc((100cqw - var(--pc-inline) * 2 - 108px) / 4 * .55);
    bottom: 88px;
  }

  .has-pc.is-family .f-ask__flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    align-items: end;
    gap: 72px;
    margin-top: 96px;
    padding-inline: var(--pc-inline);
  }

  .has-pc.is-family .f-ask__plane {
    padding-bottom: 136px;
  }

  .has-pc.is-family .f-ask__title {
    font-size: 30px;
  }

  .has-pc.is-family .f-ask__steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    margin-top: 36px;
  }

  .has-pc.is-family .f-ask__steps li {
    grid-template-columns: minmax(0, 1fr);
  }

  .has-pc.is-family .f-ask__steps li::before {
    grid-row: auto;
    margin-bottom: 12px;
  }

  .has-pc.is-family .f-ask__card {
    margin-top: 0;
    padding: 40px 36px 32px;
  }

  .has-pc.is-family .f-ask__line {
    min-height: 68px;
    font-size: 17px;
  }

  /* PC ではスマホの下の相談のバーを出さない（ヘッダーに LINE がある） */
  .cta-bar {
    display: none;
  }

  .has-cta-bar .ft {
    padding-bottom: 0;
  }

  .has-pc.is-family .f-members {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    margin: 160px 0 130px;
    padding-inline: var(--pc-inline);
  }

  .has-pc.is-family .f-members__visual {
    width: 100%;
    padding: 40px 30px 0 40px;
  }

  .has-pc.is-family .f-members__body {
    margin: 60px 0 0 -40px;
    padding: 56px 56px 52px;
  }

  .has-pc.is-family .f-members__title {
    font-size: 26px;
  }

  .has-pc.is-family .f-members__title b {
    font-size: 60px;
  }

  /* ---- 居住用TOPの入口（左に言葉・右にボタン） ---- */
  .has-pc .f-entrance:not(.f-entrance--detail) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand btn"
      "title btn"
      "text  btn";
    align-items: center;
    gap: 0 48px;
    margin: 96px var(--pc-inline) 0;
    padding: 48px 56px;
  }

  .has-pc .f-entrance:not(.f-entrance--detail) .f-entrance__brand {
    grid-area: brand;
  }

  .has-pc .f-entrance:not(.f-entrance--detail) .f-entrance__title {
    grid-area: title;
    font-size: 30px;
  }

  .has-pc .f-entrance:not(.f-entrance--detail) .f-entrance__text {
    grid-area: text;
    max-width: 640px;
  }

  .has-pc .f-entrance:not(.f-entrance--detail) .f-entrance__btn {
    grid-area: btn;
    margin-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .f-btn,
  .f-entrance__btn {
    transition: none;
  }
}


/* ==========================================================================
   見本 v4 に無かった部品（同じ色・影・書体の決まりで足した）
   ========================================================================== */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hp { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; }
.link-btn { padding: 0 2px; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
@media (max-width: 990px) { .hide-sp { display: none !important; } }

/* ---- ヘッダー：会員メニュー ---- */
.hd__login { background: transparent; cursor: pointer; }
.hd__member { position: relative; }
.hd__menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 45; min-width: 190px; padding: 6px 0; background: var(--paper); box-shadow: var(--lift-2); }
.hd__menu a, .hd__menu button { display: block; width: 100%; padding: 11px 18px; border: 0; background: none; font-size: 13px; text-align: left; cursor: pointer; }
.hd__menu a:hover, .hd__menu button:hover { background: var(--cream); }

/* ---- 短い通知 ---- */
.toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 70; max-width: calc(100% - 40px); padding: 12px 20px; background: var(--ink); color: var(--paper); font-size: 13px; line-height: 1.6; box-shadow: var(--lift-2); opacity: 0; pointer-events: none; transform: translate(-50%, 10px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.toast.is-shown { opacity: 1; transform: translate(-50%, 0); }

/* ---- さがす：札・カードは本物の入力（ラジオ・チェック）を中に持つ。選んだら見本の aria-pressed と同じ見た目 ---- */
.size { cursor: pointer; }
.size:has(input:checked) { background: var(--ink); color: var(--paper); transform: translateY(-6px); box-shadow: var(--lift-2); }
.size:has(input:checked) img { filter: invert(1); mix-blend-mode: screen; }
.size:has(input:checked) .size__count { color: rgba(255, 255, 255, .6); }
.size:has(input:focus-visible), .scene:has(input:focus-visible), .wardlist label:has(input:focus-visible), .factchips label:has(input:focus-visible), .seg label:has(input:focus-visible) { outline: 2px solid var(--wood); outline-offset: 3px; }
.scene:has(input:checked) { box-shadow: inset 0 0 0 2px var(--ink), var(--lift-2); }
.scene:has(input:checked)::after { content: "✓"; position: absolute; top: 6px; left: 6px; display: grid; place-items: center; width: 22px; height: 22px; background: var(--ink); color: var(--paper); font-size: 12px; }
.scene__noimg { width: 96px; height: 80px; background: var(--cream-2); }
.wardlist label { display: flex; justify-content: space-between; align-items: baseline; padding: 11px 2px; border-bottom: 1px solid var(--cream-2); font-family: var(--serif); font-weight: 600; font-size: 15px; letter-spacing: .04em; cursor: pointer; }
.wardlist label small { font-family: var(--en); font-weight: 400; font-size: 12px; color: var(--mute); }
.wardlist label:has(input:checked) { color: var(--wood); border-bottom-color: var(--wood); box-shadow: 0 1px 0 var(--wood); }
.factchips label span { display: inline-block; padding: 9px 14px; border: 1px solid var(--faint); background: var(--paper); font-size: 12.5px; cursor: pointer; }
.factchips label:has(input:checked) span { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.sc-note { margin-top: 12px; }
.sc-sum .btn:disabled { opacity: .45; cursor: not-allowed; }
.sc-hero--short .wrap { padding-block: 34px 72px; }

/* ---- 検索結果：条件の面の札（ラジオ） ---- */
.seg label { display: block; cursor: pointer; }
.seg label span { display: block; padding: 10px 2px; font-size: 12px; text-align: center; transition: background-color .25s, color .25s; }
.seg label + label span { box-shadow: inset 1px 0 0 var(--cream-2); }
.seg label:has(input:checked) span { background: var(--ink); color: var(--paper); }
/* 2段以上になる札（築年数）。1pxのすき間から下地の色をのぞかせて線にする（1段に何個並んでも、何段になっても線がそろう） */
.seg--rows { gap: 1px; padding: 1px; background: var(--cream-2); box-shadow: none; }
.seg.seg--rows label span { background: var(--paper); box-shadow: none; }
.sel--wide { width: 100%; }
a.rs-change { text-decoration: none; }
.rs-mnote.is-empty { display: none; }
.rs-empty { margin-top: 32px; padding: 28px; background: var(--paper); text-align: center; color: var(--sub); }
.rs-similar { margin-top: 56px; }
.rs-similar .title { font-size: 22px; margin-bottom: 22px; }

/* ---- 物件ページ ---- */
.plan--text { grid-template-columns: minmax(0, 1fr); }
.plan__fact--first { margin-top: 14px; }
.room__lead p + p { margin-top: 12px; }
.room__lead { color: var(--sub); line-height: 2; }
.room__points { display: grid; gap: 6px; margin-top: 22px; padding: 20px 22px; background: var(--cream); }
.room__points li { font-size: 13.5px; }
.room__points li::before { content: "—"; margin-right: 10px; color: var(--wood); }
/* 担当エージェントより（担当コメントがある物件だけ・2026-10-22〜）。見本の案A（社内資料/ファミリー担当コメント見本_20261022）：
   丸い顔写真から生成りの吹き出しが出て、担当者が話しかけている形。スマホは顔と名前が上・吹き出しが下（しっぽは上の顔へ）、
   PCは顔と名前が左・吹き出しが右（しっぽは左の顔へ）。吹き出しの頭の名乗りは手書き体 */
.agent-talk { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 16px 14px; }
.agent-talk--noface { grid-template-columns: minmax(0, 1fr); }
.agent-talk__who { display: contents; }
.agent-talk__face { display: grid; place-items: center; width: 64px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--cream-2); box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--cream-2), var(--lift-1); font-family: var(--serif); font-weight: 700; font-size: 24px; color: var(--wood); }
.agent-talk__face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.agent-talk__role { font-size: 11px; letter-spacing: .08em; color: var(--wood); }
.agent-talk__role span { margin-left: 10px; color: var(--sub); }
.agent-talk__name { margin-top: 2px; font-family: var(--serif); font-weight: 600; font-size: 18px; letter-spacing: .1em; }
.agent-talk__bubble { position: relative; grid-column: 1 / -1; padding: 20px; background: var(--cream); border-radius: 22px; line-height: 2; }
.agent-talk__bubble::before { content: ""; position: absolute; left: 22px; top: -14px; border-style: solid; border-width: 0 10px 16px 10px; border-color: transparent transparent var(--cream) transparent; }
.agent-talk--noface .agent-talk__bubble::before { display: none; }
.agent-talk__hello { display: block; margin-bottom: 8px; font-family: var(--hand); font-weight: 600; font-size: 16px; letter-spacing: .04em; color: var(--wood); }
@media (min-width: 991px) {
  .agent-talk { grid-template-columns: 112px minmax(0, 1fr); align-items: start; gap: 0 26px; }
  .agent-talk--noface { grid-template-columns: minmax(0, 1fr); }
  .agent-talk__who { display: grid; justify-items: center; gap: 10px; text-align: center; }
  .agent-talk__face { width: 112px; font-size: 40px; }
  .agent-talk__role span { display: block; margin-left: 0; }
  .agent-talk__bubble { grid-column: 2; padding: 24px 28px; font-size: 15px; }
  .agent-talk--noface .agent-talk__bubble { grid-column: 1; }
  .agent-talk__bubble::before { left: -14px; top: 40px; border-width: 10px 16px 10px 0; border-color: transparent var(--cream) transparent transparent; }
}
.sec--tight { padding-top: 0; }
.dl__note { margin-top: 14px; }
.cost__note { margin-top: 12px; letter-spacing: 0; }
.company { margin-top: 32px; }
.minor__fav { display: inline-flex; align-items: center; gap: 6px; padding: 4px 2px; border: 0; background: none; color: var(--sub); font-size: 12px; white-space: nowrap; cursor: pointer; }
.minor__fav:hover { color: var(--ink); }
.minor__fav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.minor__fav[aria-pressed="true"] svg { fill: #d0453f; stroke: #d0453f; }
.inq .btn.is-sending { opacity: .6; pointer-events: none; }
.inq .btn.is-done { background: var(--cream); border-color: var(--cream-2); color: var(--sub); cursor: default; }
.inq__msg { font-size: 12.5px; line-height: 1.8; color: #1d7a45; }
.inq__msg.is-error { color: #b3261e; }
.price__members { margin-top: 18px; padding: 16px; background: var(--cream); font-size: 12.5px; line-height: 1.85; color: var(--sub); }
.price__members-badge { margin-bottom: 4px; font-family: var(--serif); font-weight: 700; font-size: 14px; letter-spacing: .06em; color: var(--ink); }
.price__members-acts { display: grid; gap: 4px; margin-top: 12px; }
.price__members-login { padding: 8px; border: 0; background: none; font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sup__src { margin-left: 4px; font-size: 11px; color: rgba(255, 255, 255, .5); text-decoration: underline; text-underline-offset: 3px; }
.sup .note { margin-top: 16px; color: rgba(255, 255, 255, .5); }
.sup .more { display: inline-flex; }
html.is-viewer-open { overflow: hidden; }

/* ---- 物件ページ：事業用（OSEKKAI TENANTs）の物件詳細にならって足した部品（2026-10-22〜）。色・影・書体はこのサイトの決まりのまま ---- */
/* ページの中への飛び先（家賃の箱の「AIに相談」→ #ai・初期費用 → #cost）。上に張り付くヘッダー（スマホ68px・PC96px）の裏に見出しが隠れないよう、その高さ＋少しの余白を空ける */
#ai, #cost { scroll-margin-top: 84px; }
/* パンくずと検索結果の前後送り（PCは横並び・スマホはパンくずの下に1行） */
.dt-crumbs { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; }
.dnav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12.5px; }
.dt-crumbs .dnav { flex: 1 1 100%; }
.dnav__back { color: var(--sub); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.dnav__back:hover { color: var(--ink); }
.dnav__pos { font-size: 12px; letter-spacing: .04em; color: var(--mute); white-space: nowrap; }
.dnav__btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border: 1px solid var(--faint); background: var(--paper); font-size: 12px; white-space: nowrap; cursor: pointer; transition: border-color .2s var(--ease); }
.dnav [data-nav-prev] { margin-left: auto; }
.dnav__btn:hover { border-color: var(--ink); }
.dnav__btn[data-nav-prev]::before { content: "←"; font-family: var(--en); }
.dnav__btn[data-nav-next]::after { content: "→"; font-family: var(--en); }
.dnav__btn[aria-disabled="true"] { opacity: .35; pointer-events: none; }
.dock__nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* 写真：枠（写真の上に重ねるボタン・札の基準）・新着のしおり・会員限定の案内と、鮮明にしたあとの札と帯 */
.mosaic__frame { position: relative; }
.mosaic__new { position: absolute; top: 0; left: var(--gl); z-index: 2; padding: 12px 9px 18px; background: var(--wood); color: var(--paper); writing-mode: vertical-rl; font-family: var(--serif); font-size: 15px; font-weight: 700; line-height: 1; letter-spacing: .3em; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 7px), 0 100%); pointer-events: none; }
.mosaic__members { padding: 20px var(--gr) 22px var(--gl); background: var(--ink); color: var(--paper); }
.mosaic__members-ttl { font-family: var(--serif); font-weight: 700; font-size: 16px; letter-spacing: .08em; }
.mosaic__members-txt { margin-top: 6px; font-size: 12.5px; line-height: 1.85; color: rgba(255, 255, 255, .78); }
.mosaic__members-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 14px; }
.mosaic__members-acts .btn { width: auto; padding: 12px 22px; font-size: 13px; letter-spacing: .08em; }
.mosaic__members-acts .link-btn { font-size: 12.5px; color: rgba(255, 255, 255, .85); }
.mosaic__plate { position: absolute; top: 14px; left: var(--gl); z-index: 2; padding: 8px 12px; background: var(--ink); color: var(--sand); font-family: var(--en); font-size: 10.5px; line-height: 1; letter-spacing: .3em; text-transform: uppercase; pointer-events: none; }
.mosaic-band { margin-top: 14px; padding: 16px 20px; background: var(--cream); box-shadow: inset 3px 0 0 var(--wood); }
.mosaic-band__ttl { font-family: var(--serif); font-weight: 700; font-size: 15px; letter-spacing: .06em; }
.mosaic-band__txt { margin-top: 4px; font-size: 12.5px; color: var(--sub); }

/* 見出しの下の交通（全部の駅） */
.dt-access { display: grid; gap: 2px; margin-top: 6px; font-size: 13px; color: var(--sub); }
.dt-access li { display: flex; flex-wrap: wrap; gap: 0 10px; }
.dt-access b { font-weight: 500; color: var(--ink); }

/* 家賃の箱の小さな4つ（同じ形・同じ重さ） */
.minor { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin-top: 6px; padding-top: 14px; }
.minor .minor__item { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 2px 9px; border: 1px solid var(--cream-2); background: var(--paper); color: var(--sub); font-size: 11.5px; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: border-color .2s var(--ease), color .2s var(--ease); }
.minor .minor__item:hover { border-color: var(--ink); color: var(--ink); }
.minor .minor__item svg { width: 18px; height: 18px; }
.minor .minor__item.is-sending { opacity: .6; pointer-events: none; }
.minor .minor__item.is-done { background: var(--cream); color: var(--sub); cursor: default; }

/* 設備のまとまり（「そのほかの設備」を種類ごとに） */
.fac__groups { display: grid; gap: 14px; }
.fac__groups .fac__label { margin-bottom: 0; }
.fac__group-label { font-size: 11.5px; font-weight: 500; letter-spacing: .06em; color: var(--wood); }

/* 物件概要：会員限定で伏せている項目の断り書き */
.dl__members { margin-top: 16px; padding: 14px 16px; background: var(--cream); font-size: 12.5px; line-height: 1.9; color: var(--sub); }
.dl__members b { font-weight: 500; color: var(--ink); }

/* この建物の空き部屋（表。狭い画面では表だけ横にすべらせる） */
.bld { overflow-x: auto; }
.bld__table { width: 100%; min-width: 440px; border-collapse: collapse; font-size: 13.5px; }
.bld__table th, .bld__table td { padding: 12px 10px; border-bottom: 1px solid var(--cream-2); text-align: left; vertical-align: middle; white-space: nowrap; }
.bld__table thead th { padding-top: 0; font-size: 11.5px; font-weight: 400; letter-spacing: .08em; color: var(--mute); }
.bld__table tbody th { font-weight: 500; }
.bld__table .num { font-family: var(--en); font-weight: 500; font-size: 15px; }
.bld__table small { display: block; font-size: 11px; color: var(--mute); }
.bld__table tr.is-self { background: var(--cream); }
.bld__table .bld__go { text-align: right; }
.bld__go a { font-size: 12.5px; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.bld__go a::after { content: " →"; font-family: var(--en); }
.bld__now { font-size: 11.5px; font-weight: 500; letter-spacing: .06em; color: var(--wood); }
.bld__more { margin-top: 10px; }

/* このお部屋を、AIに相談する（生成りの面に白い丸の印） */
.ai { padding: 28px 22px; background: var(--cream); }
.ai__head { display: flex; align-items: center; gap: 14px; }
.ai__mark { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--paper); box-shadow: var(--lift-1); }
.ai__mark svg { width: 26px; height: 26px; fill: var(--ink); }
.ai__head .title { margin-top: 2px; font-size: 22px; }
.ai__lead { margin-top: 18px; color: var(--sub); line-height: 2; }
.ai__listttl { margin-top: 18px; font-size: 12px; letter-spacing: .1em; color: var(--mute); }
.ai__list { margin-top: 4px; counter-reset: ai; }
.ai__list li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--cream-2); font-size: 13.5px; counter-increment: ai; }
.ai__list li::before { content: counter(ai); font-family: var(--en); font-weight: 500; color: var(--wood); }
.ai__btn { margin-top: 22px; }
.ai__note { margin-top: 12px; }

/* 周辺情報：地図とストリートビューの切り替え・地図の下の住所と操作・大きく見る窓 */
.geo__tabs { display: inline-flex; margin-bottom: 12px; border: 1px solid var(--faint); }
.geo__tabs button { padding: 9px 18px; border: 0; background: var(--paper); font-size: 12.5px; letter-spacing: .06em; cursor: pointer; }
.geo__tabs button + button { border-left: 1px solid var(--faint); }
.geo__tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.geo__frame { position: relative; aspect-ratio: 16 / 10; background: var(--cream); box-shadow: inset 0 0 0 1px var(--cream-2); }
.geo__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.geo__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; margin-top: 12px; }
.geo__address { font-size: 13.5px; }
.geo__acts { display: flex; flex-wrap: wrap; gap: 6px; }
.geo__act { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--faint); background: var(--paper); font-size: 12px; white-space: nowrap; cursor: pointer; transition: border-color .2s var(--ease); }
.geo__act:hover { border-color: var(--ink); }
.geo__act svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.geo__note { margin-top: 8px; }
.geo-modal { position: fixed; inset: 0; z-index: 60; display: grid; grid-template-rows: auto minmax(0, 1fr); padding: env(safe-area-inset-top, 0px) var(--gr) calc(16px + env(safe-area-inset-bottom, 0px)) var(--gl); background: rgba(17, 15, 13, .96); color: var(--paper); }
.geo-modal[hidden] { display: none; }
.geo-modal__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; padding-block: 8px; }
.geo-modal__bar p { display: grid; gap: 2px; font-size: 14px; letter-spacing: .06em; }
.geo-modal__bar small { font-size: 11.5px; letter-spacing: 0; color: rgba(255, 255, 255, .6); }
.geo-modal__bar button { flex: none; border: 0; background: none; color: var(--paper); font-size: 14px; cursor: pointer; }
.geo-modal__body { position: relative; min-height: 0; }
.geo-modal__body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--ink-2); }

@media (min-width: 991px) {
  #ai, #cost { scroll-margin-top: 116px; }
  .dt-crumbs .dnav { flex: 0 1 auto; }
  .mosaic__new { left: 18px; }
  /* 会員限定の案内は、大きい写真（左半分）の下の端に重ねる（写真の真ん中は覆わない） */
  .mosaic__members { position: absolute; left: 0; bottom: 0; z-index: 2; width: calc((100% - 12px) / 2); padding: 80px 28px 24px; background: linear-gradient(to top, rgba(20, 17, 15, .88) 0%, rgba(20, 17, 15, .74) 55%, rgba(20, 17, 15, 0) 100%); }
  /* 左下は案内が重なるので、間取り図のボタンは左上へ */
  .mosaic--members .mosaic__plan { top: 20px; bottom: auto; }
  .mosaic__plate { top: auto; left: 20px; bottom: 20px; }
  /* 鮮明にしたあとの帯は、右の列の家賃の箱（写真の下の端に重なる）の下に入らない幅に */
  .mosaic-band { margin-top: 18px; max-width: calc(100% - 380px - 72px); }
  .dt-access { font-size: 14px; }
  .bld__table { font-size: 14px; }
  .ai { padding: 40px 44px; }
  .ai__head .title { font-size: 26px; }
  .ai__btn { display: inline-flex; width: auto; padding-inline: 44px; }
  .geo-modal__bar p { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 16px; }
  .has-dock.has-dnav .ft { padding-bottom: 0; }
}

/* ---- 区・駅のページ ---- */
.wd-crumb { padding-top: 18px; }
.wd-hero__photos--none { min-height: 320px; background: var(--ink-2); }
.wd-links { padding-top: 64px; }
.wd-new-band { margin-top: 72px; }

/* ---- 募集終了 ---- */
.ended .wrap { max-width: 760px; padding-block: 64px 88px; }
.ended .title { margin-top: 6px; }
.ended__lead { margin-top: 18px; }
.ended__spec { margin-top: 26px; padding: 20px 22px; background: var(--cream); }
.ended__label { font-size: 12px; letter-spacing: .1em; color: var(--mute); }
.ended__rent { margin-top: 4px; font-family: var(--en); font-weight: 500; font-size: 22px; }
.ended__meta { font-size: 13px; color: var(--sub); }
.ended__acts { display: grid; gap: 10px; margin-top: 28px; max-width: 460px; }
.ended__acts .more { justify-self: start; margin-top: 8px; }

/* ---- フォームのページ（会員登録・お問い合わせ・LINEで相談） ---- */
.form-page { background: var(--cream); padding-bottom: 88px; }
.form-page__wrap { padding-top: 22px; }
.form-page__wrap--narrow { max-width: 860px; }
.form-page__head { margin-top: 22px; }
.form-page__head .lead { margin-top: 12px; max-width: 640px; }
.form-page__head .lead a { text-decoration: underline; text-underline-offset: 3px; }
.form-card { padding: 26px 22px; background: var(--paper); box-shadow: var(--lift-1); }
.form { display: grid; gap: 22px; }
.form__field { display: grid; gap: 8px; }
.form__label { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.form__req, .form__opt { padding: 3px 8px; font-size: 10.5px; font-weight: 500; line-height: 1.2; letter-spacing: .06em; }
.form__req { background: var(--ink); color: var(--paper); }
.form__opt { background: var(--cream-2); color: var(--sub); }
.form__input { width: 100%; padding: 14px 14px; border: 1px solid var(--faint); border-radius: 0; background: var(--paper); font: 16px/1.5 var(--sans); color: var(--ink); }
.form__input:focus { outline: 2px solid var(--wood); outline-offset: 0; border-color: transparent; }
.form__input[aria-invalid] { border-color: #b3261e; }
.form__input--area { min-height: 180px; resize: vertical; }
.form__input.sel { padding-right: 34px; box-shadow: none; }
.form__note { font-size: 12px; line-height: 1.8; color: var(--mute); }
.form__note a { text-decoration: underline; text-underline-offset: 3px; }
.form__check { display: flex; align-items: center; gap: 10px; font-size: 13.5px; cursor: pointer; }
.form__check input { width: 18px; height: 18px; accent-color: var(--ink); }
.form__message { padding: 12px 14px; background: #fbeceb; color: #b3261e; font-size: 13px; line-height: 1.7; }
.form__login { font-size: 13px; text-align: center; color: var(--sub); }
.reg-listing { padding: 16px; background: var(--cream); font-size: 13px; line-height: 1.8; }
.reg-listing__head { font-size: 11.5px; letter-spacing: .1em; color: var(--mute); }
.reg-listing__name { font-family: var(--serif); font-weight: 700; font-size: 16px; }
.reg-listing__req { font-weight: 700; color: var(--wood); }
.reg-listing__meta { font-size: 12px; color: var(--sub); }
.reg-listing__head--fav::before { content: "♡ "; color: var(--wood); }

/* ---- お気に入りの会員登録の小窓（会員でない方が開くたび・2026-10-29〜・pages/favorite.astro） ---- */
.fav-pop { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: max(20px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); background: rgba(34, 30, 27, .5); }
.fav-pop__box { position: relative; width: min(440px, 100%); padding: 34px 28px 26px; background: var(--paper); box-shadow: var(--lift-2); }
.fav-pop__k { font-family: var(--hand); font-weight: 600; font-size: 15px; color: var(--wood); }
.fav-pop__title { margin-top: 6px; font-family: var(--serif); font-weight: 700; font-size: 21px; line-height: 1.6; letter-spacing: .06em; text-wrap: balance; }
.fav-pop__list { display: grid; gap: 6px; margin-top: 14px; font-size: 13px; color: var(--sub); }
.fav-pop__list li::before { content: "—"; margin-right: 8px; color: var(--wood); }
.fav-pop__acts { display: grid; gap: 4px; margin-top: 22px; }
.fav-pop__acts .btn { justify-content: center; }
.fav-pop__later { padding: 10px; border: 0; background: none; color: var(--sub); font-size: 13px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.fav-pop__x { position: absolute; top: 8px; right: 10px; width: 40px; height: 40px; border: 0; background: none; font-size: 22px; color: var(--sub); cursor: pointer; }
.reg-member { display: grid; gap: 10px; padding: 16px; background: var(--cream); font-size: 13px; }
.reg-done { display: grid; gap: 12px; font-size: 13.5px; line-height: 1.9; }
.reg-done__title { font-family: var(--serif); font-weight: 700; font-size: 20px; letter-spacing: .06em; }
.reg-done__resend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; }
.btn--line { background: var(--line-green); border-color: var(--line-green); }
.btn--line:hover { background: #05b34c; }
.line-cases { display: grid; gap: 22px; margin-top: 34px; }
.line-case { display: grid; gap: 12px; align-content: start; }
.line-case__no { font-family: var(--en); font-weight: 200; font-size: 44px; line-height: 1; color: var(--wood); }
.line-case .title { font-size: 22px; }
.line-case__acts { display: grid; gap: 10px; margin-top: 8px; }
.line-case__acts .more { justify-self: start; margin-top: 6px; }
.line-qa__head { margin-top: 6px; font-family: var(--serif); font-weight: 700; font-size: 15px; letter-spacing: .06em; }
.line-qa { display: grid; gap: 14px; }
.line-hours { margin-top: 18px; }

/* ---- 送信完了・404 ---- */
.message { background: var(--cream); }
.message__wrap { display: grid; justify-items: center; gap: 10px; max-width: 720px; padding-block: 64px 96px; text-align: center; }
.message__illust { width: 180px; height: auto; mix-blend-mode: multiply; }
.message .lead { margin-top: 8px; }
.message__acts { display: grid; gap: 10px; width: 100%; max-width: 360px; margin-top: 24px; }

/* ---- お気に入り ---- */
.fav__head { margin-top: 18px; }
.fav__head .lead { margin-top: 10px; }
.fav__sec { margin-top: 48px; }
.fav__title { display: flex; align-items: baseline; gap: 8px; font-size: 22px; margin-bottom: 22px; }
.fav__title b { font-family: var(--en); font-weight: 300; font-size: 32px; }
.fav__title small { font-size: 13px; }
.fav__empty { display: grid; justify-items: start; gap: 14px; padding: 26px; background: var(--paper); }
.fav__conds { display: grid; gap: 8px; }
.fav__conds li { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 18px; background: var(--paper); box-shadow: var(--lift-1); font-size: 13.5px; }
.fav__conds li a { text-decoration: underline; text-underline-offset: 3px; }
.fav__conds li .link-btn { flex-shrink: 0; font-size: 12px; color: var(--mute); }
.fav__member { margin-top: 48px; }

/* ---- 23区と駅の一覧 ---- */
.areas { padding-block: 0 88px; }
.areas__sec { margin-top: 56px; }
.arealist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.arealist a { display: grid; gap: 2px; padding: 16px 16px 14px; background: var(--paper); box-shadow: var(--lift-1); transition: box-shadow .35s var(--ease), transform .35s var(--ease); }
.arealist a:hover { box-shadow: var(--lift-2); transform: translateY(-2px); }
.arealist b { font-family: var(--serif); font-weight: 700; font-size: 17px; letter-spacing: .06em; }
.arealist small { font-family: var(--en); font-size: 12px; color: var(--mute); }
.arealist__note { justify-self: start; margin-top: 4px; padding: 3px 8px; background: var(--cream); font-size: 11px; color: var(--wood); }
.wd-links--lines { padding-top: 0; }
/* 駅からさがす：見出しの横の絞り込みの窓（scripts/station-filter.ts）。狭い画面では見出しの下に全幅で置く */
.sc-sec__title--search { flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 14px 28px; margin-bottom: 28px; }
.st-search { position: relative; display: block; flex: 1 1 100%; }
.st-search__icon { position: absolute; top: 50%; left: 15px; transform: translateY(-50%); color: var(--mute); pointer-events: none; transition: color .25s; }
.st-search:focus-within .st-search__icon { color: var(--wood); }
.st-search__input { width: 100%; height: 48px; padding: 0 14px 0 44px; border: 1px solid var(--faint); border-radius: 0; background: var(--paper); font: 16px/1.5 var(--sans); color: var(--ink); -webkit-appearance: none; appearance: none; transition: border-color .25s; }
.st-search__input::placeholder { color: var(--mute); }
.st-search__input:hover { border-color: var(--mute); }
.st-search__input:focus { outline: 2px solid var(--wood); outline-offset: 0; border-color: transparent; }
/* 消すボタン（×）。ブラウザ標準の青い×を、細い線の×（グレー・触ると木の色）に替える。色は mask で線の形に切り抜いて付ける */
.st-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-left: 10px; cursor: pointer;
  background-color: var(--mute); transition: background-color .2s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 3.5l9 9M12.5 3.5l-9 9' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 3.5l9 9M12.5 3.5l-9 9' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.st-search__input::-webkit-search-cancel-button:hover { background-color: var(--wood); }
/* 絞り込んで前の駅を隠したとき、残った先頭の駅の前に「／」を出さない */
.wd-links .list a.is-first::before { content: none; }
.st-search__empty { grid-column: 1 / -1; color: var(--sub); font-size: 13.5px; }

/* ---- ログインの小窓 ---- */
.auth { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: rgba(17, 15, 13, .55); }
.auth[hidden] { display: none; }
.auth__panel { position: relative; width: 100%; max-width: 420px; max-height: calc(100vh - 40px); overflow: auto; padding: 30px 26px 26px; background: var(--paper); box-shadow: var(--lift-2); }
.auth__close { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border: 0; background: none; font-size: 16px; cursor: pointer; }
.auth__title { font-family: var(--serif); font-weight: 700; font-size: 22px; letter-spacing: .08em; }
.auth__form { gap: 12px; margin-top: 18px; }
.auth__link { justify-self: center; font-size: 12.5px; color: var(--sub); text-decoration: underline; text-underline-offset: 3px; }
.auth__google { margin-top: 14px; }
.auth__intro { display: grid; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--cream-2); }
.auth__intro-label { font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.auth__intro-note { font-size: 12.5px; line-height: 1.85; color: var(--sub); }


@media (min-width: 640px) {
  .arealist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .st-search { flex: 0 1 380px; }
}

@media (min-width: 991px) {
  .form-card { padding: 36px 40px; }
  .line-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arealist { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .wd-links--lines { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 48px; }
  /* 16px未満はスマホで入力のときに画面が拡大されるので、PCの幅でだけ小さくする */
  .st-search__input { height: 46px; font-size: 14.5px; }
  .toast { bottom: 40px; }
}

/* ==========================================================================
   会員登録ページ（2026-10-21 作り直し・見本＝社内資料/ファミリー会員登録見本_20261021・ユーザー承認）
   最初の画面で会員限定のお部屋を重ねて見せ、フォームを上に。スマホは最初の画面にフォームを重ねて浮かせ、
   下の帯（.rg-dock）でいつでもフォームへ。PCは右の列でフォームが sticky でついてくる。
   ⚠ フォームは1つだけ（id を重ねない）。並び替えは grid の areas だけで行う
   ========================================================================== */
.rg-page { display: grid; grid-template-columns: minmax(0, 1fr); }

/* ---- 最初の画面：生成りの帯は画面の端から端まで（PCは写真の束の途中で切って、写真を白地へはみ出させる） ---- */
.rg-hero { position: relative; isolation: isolate; padding: 18px 0 120px; }
.rg-hero::before { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--cream); box-shadow: 0 0 0 100vmax var(--cream); clip-path: inset(0 -100vmax); }
.rg-hero__kicker { margin-top: 22px; }
.rg-hero__pre { margin-top: 10px; font-size: 13px; letter-spacing: .06em; color: var(--sub); }
.rg-hero__pre b { margin: 0 2px; font-weight: 400; font-size: 16px; color: var(--ink); }
.rg-hero__title { margin-top: 2px; font-family: var(--serif); font-weight: 700; font-size: 25px; line-height: 1.5; letter-spacing: .06em; }
.rg-hero__title .num { margin-right: 4px; font-weight: 200; font-size: 64px; line-height: 1; letter-spacing: 0; vertical-align: -4px; }
.rg-hero__lead { margin-top: 14px; max-width: 460px; font-size: 13px; line-height: 2; color: var(--sub); }

/* 写真の束（会員でない方に出しているぼかし写真）。いちばん手前だけ札を付ける */
.rg-stack { position: relative; height: 236px; margin-top: 26px; }
.rg-stack__card { position: absolute; overflow: hidden; aspect-ratio: 4 / 3; background: var(--cream-2); box-shadow: var(--lift-1); }
.rg-stack__card img { width: 100%; height: 100%; object-fit: cover; filter: blur(3px) saturate(1.05); transform: scale(1.12); }
.rg-stack__card--1 { left: 0; top: 34px; width: 46%; rotate: -4deg; }
.rg-stack__card--2 { left: 30%; top: 0; width: 40%; aspect-ratio: 3 / 4; rotate: 3deg; }
.rg-stack__card--3 { right: 0; top: 46px; width: 42%; rotate: -2deg; }
.rg-stack__card--front { z-index: 2; left: 14%; top: 92px; width: 58%; box-shadow: var(--lift-2); rotate: 1deg; }
.rg-stack__label { position: absolute; left: 10px; bottom: 10px; z-index: 3; display: grid; gap: 1px; padding: 8px 12px 9px; background: var(--paper); box-shadow: var(--lift-1); font-size: 12px; line-height: 1.5; letter-spacing: .02em; }
.rg-stack__label b { display: flex; align-items: center; gap: 6px; font-weight: 500; font-size: 10.5px; letter-spacing: .12em; color: var(--wood); }
.rg-stack__label b svg { width: 12px; height: 12px; }
.rg-stack__label .num { font-size: 14px; }

/* ---- フォーム：スマホは最初の画面の帯に重ねて浮かせる ---- */
.rg-aside { position: relative; z-index: 2; margin-top: -86px; }
.rg-form { padding: 26px 22px 24px; box-shadow: var(--lift-2); scroll-margin-top: 84px; }
.rg-form .form { gap: 18px; }
.rg-form__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.rg-form__title { font-family: var(--serif); font-weight: 700; font-size: 21px; letter-spacing: .08em; }
.rg-form__sub { font-size: 12px; color: var(--sub); }
.rg-form__sub b { font-weight: 500; color: var(--wood); }
.rg .btn svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.rg .btn:hover svg { transform: translateX(3px); }
.rg .reg-listing { display: grid; gap: 2px 14px; padding: 14px; }
.rg .reg-listing:has(> .reg-listing__photo:not([hidden])) { grid-template-columns: 76px minmax(0, 1fr); }
.rg .reg-listing__photo { grid-row: span 3; width: 76px; height: 76px; object-fit: cover; box-shadow: var(--lift-1); }
.rg .reg-listing__name { font-size: 15px; line-height: 1.5; }
.rg .reg-listing__meta { grid-column: 1 / -1; margin-top: 6px; line-height: 1.8; }

/* ---- ご登録でできること ---- */
.rg-sec { padding-top: 72px; }
.rg-sec .kicker { font-size: 14px; }
.rg-sec__title { font-family: var(--serif); font-weight: 700; font-size: 24px; line-height: 1.55; letter-spacing: .08em; }
.rg-point { margin-top: 26px; }
.rg-point__no { font-weight: 200; font-size: 15px; letter-spacing: .1em; color: var(--wood); }
.rg-point__title { margin-top: 2px; font-family: var(--serif); font-weight: 700; font-size: 19px; line-height: 1.6; letter-spacing: .06em; }
.rg-point__text { margin-top: 8px; font-size: 13px; line-height: 2; color: var(--sub); }

/* 1. 写真：ぼかしの上に鮮明な写真を重ねる（一般公開のお部屋の写真で見え方の例を見せる） */
.rg-ba { position: relative; margin-top: 30px; padding-bottom: 46px; }
.rg-ba__before { position: relative; width: 74%; aspect-ratio: 3 / 2; overflow: hidden; background: var(--cream-2); }
.rg-ba__before img { width: 100%; height: 100%; object-fit: cover; filter: blur(9px) saturate(.9); transform: scale(1.12); }
.rg-ba__after { position: absolute; right: 0; bottom: 0; width: 66%; aspect-ratio: 3 / 2; box-shadow: var(--lift-2); }
.rg-ba__after img { width: 100%; height: 100%; object-fit: cover; }
.rg-ba__tag { position: absolute; left: 10px; top: 10px; z-index: 2; padding: 5px 10px; background: rgba(255, 255, 255, .9); color: var(--sub); font-size: 11px; line-height: 1.4; letter-spacing: .1em; }
.rg-ba__tag--ink { background: var(--ink); color: var(--paper); }
.rg-ba__cap { margin-top: 10px; font-size: 10.5px; color: var(--mute); text-align: right; }

/* 2. 担当エージェント：墨の帯で強く */
.rg-agents { margin-top: 72px; padding: 60px 0 56px; background: var(--ink); color: var(--paper); }
.rg-agents .rg-point__no { color: var(--sand); }
.rg-agents .rg-point__text { color: rgba(255, 255, 255, .78); }
.rg-faces { display: flex; margin-top: 26px; }
.rg-faces li { flex-shrink: 0; width: 84px; margin-left: -14px; }
.rg-faces li:first-child { margin-left: 0; }
.rg-faces img { width: 84px; height: 84px; object-fit: cover; background: #efe6d9; border: 3px solid var(--ink); }
.rg-faces span { display: block; margin-top: 6px; font-size: 11px; letter-spacing: .08em; text-align: center; color: rgba(255, 255, 255, .72); }
.rg-quote { margin: 28px 0 0; padding: 22px 22px 20px; background: var(--paper); color: var(--ink); box-shadow: var(--lift-2); }
.rg-quote p { font-family: var(--serif); font-weight: 600; font-size: 15.5px; line-height: 1.9; letter-spacing: .03em; }
.rg-quote cite { display: block; margin-top: 10px; font-style: normal; font-size: 11.5px; color: var(--sub); }

/* 3・4. LINE とパーソナルサイト：生成りの面に2つ並べる */
.rg-pair { display: grid; gap: 14px; margin-top: 56px; }
.rg-pair__item { display: grid; grid-template-columns: minmax(0, 1fr) 92px; gap: 0 14px; align-items: end; padding: 24px 20px 22px; background: var(--cream); }
.rg-pair__item .rg-point { margin-top: 0; }
.rg-pair__item .rg-point__title { font-size: 17px; }
.rg-pair__line { display: grid; place-items: center; justify-self: end; width: 64px; height: 64px; background: var(--line-green); color: var(--paper); box-shadow: var(--lift-1); }
.rg-pair__line svg { width: 30px; height: 30px; }
.rg-pair__ill { width: 92px; margin-bottom: -6px; mix-blend-mode: multiply; }

/* ---- ご登録のあとの流れ：細い横並びの道のり ---- */
.rg-flow { margin-top: 72px; padding: 56px 0 60px; background: var(--cream); }
.rg-road { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 30px; }
.rg-road::before { content: ""; position: absolute; left: 6px; right: 16%; top: 6px; height: 1px; background: var(--wood); opacity: .5; }
.rg-road li { position: relative; padding-top: 24px; }
.rg-road li::before { content: ""; position: absolute; left: 0; top: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--cream); border: 1px solid var(--wood); }
.rg-road li.is-here::before { background: var(--wood); }
.rg-road__no { font-weight: 200; font-size: 30px; line-height: 1; }
.rg-road__title { margin-top: 8px; font-family: var(--serif); font-weight: 700; font-size: 14px; line-height: 1.5; letter-spacing: .04em; }
.rg-road__text { margin-top: 6px; font-size: 11.5px; line-height: 1.8; color: var(--sub); }
.rg-road__here { display: inline-block; margin-top: 6px; font-size: 10.5px; letter-spacing: .08em; color: var(--wood); }
.rg-dedicated { margin-top: 30px; padding: 22px 20px; background: var(--paper); box-shadow: var(--lift-1); }
.rg-dedicated__title { font-family: var(--serif); font-weight: 700; font-size: 15px; letter-spacing: .06em; }
.rg-dedicated ul { display: grid; gap: 4px; margin-top: 10px; font-size: 12.5px; line-height: 1.85; color: var(--sub); }
.rg-dedicated li::before { content: "—"; margin-right: 8px; color: var(--wood); }

/* ---- 最後のひと押し（スマホだけ）。下のフッターが墨なので、ここは白地で区切る ---- */
.rg-closing { padding: 60px 0 64px; text-align: center; }
.rg-closing__title { font-family: var(--serif); font-weight: 700; font-size: 22px; line-height: 1.7; letter-spacing: .06em; }
.rg-closing__title .num { margin: 0 2px; font-weight: 200; font-size: 40px; vertical-align: -3px; }
.rg-closing .btn { margin-top: 24px; }
.rg-closing__login { margin-top: 14px; font-size: 12.5px; color: var(--sub); }

/* ---- スマホの下の帯：フォームが画面に見えている間は引っ込める（scripts/register.ts） ---- */
.rg-dock { position: fixed; inset: auto 0 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 10px var(--gr) calc(10px + env(safe-area-inset-bottom, 0px)) var(--gl); background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 -10px 30px -18px rgba(34, 30, 27, .5); transition: transform .45s var(--ease); }
.rg-dock.is-away { transform: translateY(110%); }
.rg-dock__text { flex: 1; min-width: 0; font-size: 11px; line-height: 1.5; color: var(--sub); }
.rg-dock__text b { display: block; font-family: var(--serif); font-weight: 700; font-size: 13.5px; letter-spacing: .04em; color: var(--ink); }
.rg-dock__text .num { font-weight: 400; }
.rg-dock .btn { width: auto; min-height: 48px; padding: 12px 18px; font-size: 13.5px; letter-spacing: .1em; white-space: nowrap; }

@media (max-width: 990px) {
  .rg-agents, .rg-flow { margin-left: calc(-1 * var(--gl)); margin-right: calc(-1 * var(--gr)); padding-left: var(--gl); padding-right: var(--gr); }
  /* フッターのいちばん下が下の帯に隠れないように */
  .l-page--register .ft { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

@media (min-width: 991px) {
  /* 右の列にフォームを固定し、左の説明だけが流れる */
  .rg-page { grid-template-columns: minmax(0, 1fr) 440px; grid-template-areas: "hero aside" "body aside"; column-gap: 72px; align-items: start; }
  .rg-hero { grid-area: hero; padding: 26px 0 0; }
  .rg-hero::before { bottom: 150px; }
  .rg-aside { grid-area: aside; align-self: stretch; margin-top: 0; padding: 64px 0 80px; }
  .rg-form { position: sticky; top: 120px; padding: 34px 36px 30px; }
  .rg-body { grid-area: body; min-width: 0; padding-bottom: 88px; }
  .rg-hero__kicker { margin-top: 40px; font-size: 16px; }
  .rg-hero__pre { margin-top: 18px; font-size: 14px; }
  .rg-hero__pre b { font-size: 19px; }
  .rg-hero__title { font-size: 34px; line-height: 1.45; }
  .rg-hero__title .num { font-size: 104px; vertical-align: -10px; }
  .rg-hero__lead { font-size: 14px; }
  .rg-stack { max-width: 700px; height: 330px; margin-top: 40px; }
  .rg-stack__card--1 { top: 40px; width: 38%; }
  .rg-stack__card--2 { left: 31%; width: 30%; }
  .rg-stack__card--3 { top: 30px; width: 36%; }
  .rg-stack__card--front { left: 22%; top: 120px; width: 46%; }
  .rg-sec { padding-top: 36px; }
  .rg-ba { max-width: 700px; }
  .rg-agents { margin-top: 80px; padding: 56px 56px 52px; }
  /* 言葉の箱は顔写真の下に置き、右へ寄せて墨の帯からはみ出させる（横に2列で並べると、左の列が狭く4人目の写真に箱がかぶった・2026-10-21） */
  .rg-agents__grid { display: grid; gap: 32px; }
  .rg-agents .rg-quote { justify-self: end; max-width: 460px; margin: 0 -40px 0 0; padding: 30px 30px 26px; }
  .rg-agents .rg-quote p { font-size: 18px; }
  .rg-faces li, .rg-faces img { width: 96px; }
  .rg-faces img { height: 96px; }
  .rg-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rg-flow { margin-top: 80px; padding: 52px 56px 56px; }
  .rg-road__title { font-size: 16px; }
  .rg-road__text { font-size: 12.5px; }
  .rg-closing, .rg-dock { display: none; }
}

/* ===================================================================================================
   家賃相場（/market＝.mk-*）と 23区の子育て支援をくらべる（/childcare＝.cc-*）（2026-10-30〜・
   見本＝社内資料/ファミリー相場と子育て支援見本_20261030 第2版・ユーザー承認）。2ページで共通＝.sx-head・.faq・.method・.refs・.xlink。
   最初の画面は家賃相場が区のページと同じ .wd-hero、子育て支援は墨の帯に地図（TOP の地図と同じ形・色の付け方だけ違う）
   =================================================================================================== */
.sx-head .kicker { display: block; }
.sx-head .title { margin-top: 6px; }
.sx-head .sub { margin-top: 12px; max-width: 40em; font-size: 13.5px; line-height: 1.95; color: var(--sub); }
.band-ink .sx-head .kicker { color: var(--sand); }
.band-ink .sx-head .title { color: var(--paper); }
.band-ink .sx-head .sub { color: rgba(255, 255, 255, .62); }

/* 相場：最初の画面の数字（4桁の件数で「件」を折り返さない） */
.wd-hero--market .wd-stats dd { white-space: nowrap; }

/* 相場：間取り別（真ん中の2LDK＝表の並びの軸だけ墨の面にして浮かせる） */
.mk-lay .wrap { padding-block: 84px 72px; }
.mk-lay__grid { display: grid; gap: 14px; margin-top: 34px; }
.mk-lay__item { position: relative; display: block; padding: 26px 24px 22px; background: var(--paper); box-shadow: var(--lift-2); transition: transform .3s var(--ease); }
.mk-lay__item:hover { transform: translateY(-3px); }
.mk-lay__item > span { display: block; }
.mk-lay__item.is-key { background: var(--ink); color: var(--paper); }
.mk-lay__name { font-family: var(--serif); font-weight: 700; font-size: 22px; letter-spacing: .06em; }
.mk-lay__num { margin-top: 8px; font-weight: 200; font-size: 64px; line-height: 1; letter-spacing: -.03em; }
.mk-lay__num small { margin-left: 4px; font-family: var(--sans); font-weight: 700; font-size: 14px; letter-spacing: 0; }
.mk-lay__bar { height: 4px; margin-top: 18px; background: var(--faint); }
.mk-lay__bar i { display: block; width: calc(var(--w) * 100%); height: 100%; background: var(--wood); }
.mk-lay__item.is-key .mk-lay__bar { background: rgba(255, 255, 255, .16); }
.mk-lay__item.is-key .mk-lay__bar i { background: var(--sage); }
.mk-lay__meta { margin-top: 12px; font-size: 12.5px; color: var(--mute); }
.mk-lay__item.is-key .mk-lay__meta { color: rgba(255, 255, 255, .6); }
.mk-lay__item > .mk-lay__go { position: absolute; top: 28px; right: 22px; font-size: 12px; color: var(--wood); border-bottom: 1px solid currentColor; }
.mk-lay__item.is-key .mk-lay__go { color: var(--sand); }
.mk-lay__also { margin-top: 18px; font-size: 12.5px; color: var(--mute); }

/* 相場：区別の表（墨の帯・軸の2LDKだけ若竹色の棒） */
.mk-wards .wrap { padding-block: 84px 80px; }
.mk-sort { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.mk-sort button { padding: 8px 16px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: none; color: rgba(255, 255, 255, .78); font: 500 12.5px/1.2 var(--sans); letter-spacing: .06em; cursor: pointer; }
.mk-sort button[aria-pressed="true"] { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.mk-sort button:focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; }
.mk-table-wrap { overflow-x: auto; }
.mk-table { width: 100%; margin-top: 22px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mk-table thead th { padding: 0 6px 12px; font-size: 10.5px; font-weight: 500; letter-spacing: .06em; color: rgba(255, 255, 255, .5); text-align: right; white-space: nowrap; }
.mk-table thead th:first-child { text-align: left; }
.mk-table td, .mk-table tbody th { padding: 12px 6px; border-top: 1px solid rgba(255, 255, 255, .1); text-align: right; vertical-align: middle; }
.mk-table .w { text-align: left; font-weight: 400; }
.mk-table .w a, .mk-table .w span { font-family: var(--serif); font-weight: 700; font-size: 15px; letter-spacing: .06em; color: var(--paper); }
.mk-table .w small { display: block; font-family: var(--en); font-size: 10.5px; letter-spacing: .02em; color: rgba(255, 255, 255, .45); }
.mk-table .n { font-family: var(--en); font-weight: 300; font-size: 19px; color: rgba(255, 255, 255, .86); }
.mk-table .n a { color: inherit; }
.mk-table .n a:hover { text-decoration: underline; text-underline-offset: 4px; }
.mk-table .n.is-key { font-weight: 400; color: var(--sage); }
.mk-table .kv { display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 6px; }
.mk-table .bar { display: block; width: 100%; height: 3px; }
.mk-table .bar i { display: block; width: calc(var(--w) * 100%); height: 100%; margin-left: auto; background: var(--sage); opacity: .7; }
.mk-table .c-count, .mk-table .c-m2 { display: none; }
.mk-table .dash { color: rgba(255, 255, 255, .3); }
.mk-unit { margin-top: 14px; font-size: 11.5px; color: rgba(255, 255, 255, .45); }

/* 相場：広さ別（生成りの帯） */
.mk-size .wrap { padding-block: 84px 80px; }
.mk-size__rows { display: grid; gap: 10px; margin-top: 30px; }
.mk-size__row { display: grid; grid-template-columns: 5.2em minmax(0, 1fr); gap: 4px 16px; align-items: center; padding: 20px 22px; background: var(--paper); }
.mk-size__band { font-family: var(--serif); font-weight: 700; font-size: 17px; letter-spacing: .04em; }
.mk-size__bar { display: flex; align-items: center; gap: 12px; }
.mk-size__bar i { display: block; flex: 0 0 calc(var(--w) * (100% - 7.5em)); height: 10px; background: var(--wood); opacity: calc(.45 + var(--w) * .55); }
.mk-size__bar b { font-weight: 300; font-size: 30px; line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.mk-size__bar b small { margin-left: 3px; font-family: var(--sans); font-weight: 700; font-size: 12px; }
.mk-size__meta { grid-column: 2; font-size: 12px; color: var(--mute); }

/* よくあるご質問（両ページ・components/FamilyFaq.astro） */
.faq .wrap { padding-block: 84px 40px; }
.faq.band-cream .wrap { padding-block: 84px 72px; }
.faq__list { display: grid; max-width: 880px; margin-top: 30px; }
.faq__item { padding: 24px 0; border-top: 1px solid var(--faint); }
.faq__item:last-child { border-bottom: 1px solid var(--faint); }
.faq__q { display: grid; grid-template-columns: 2em minmax(0, 1fr); font-family: var(--serif); font-weight: 700; font-size: 17px; line-height: 1.65; letter-spacing: .04em; }
.faq__q::before { content: "Q"; font-family: var(--en); font-weight: 300; font-size: 22px; line-height: 1.2; color: var(--wood); }
.faq__a { display: grid; grid-template-columns: 2em minmax(0, 1fr); margin-top: 10px; font-size: 14px; line-height: 2; color: var(--sub); }
.faq__a::before { content: "A"; font-family: var(--en); font-weight: 300; font-size: 22px; line-height: 1.2; color: var(--mute); }
.faq__a b { font-weight: 700; color: var(--ink); }

/* 数字の出し方と参照している資料（家賃相場） */
.method .wrap { padding-block: 8px 72px; }
.method__box { max-width: 880px; padding: 22px 24px; background: var(--cream); font-size: 12.5px; line-height: 1.95; color: var(--sub); }
.method__box h2 { font-family: var(--serif); font-weight: 700; font-size: 15px; letter-spacing: .06em; color: var(--ink); }
.method__box ul { margin-top: 8px; padding-left: 1.1em; list-style: disc; }
.method__box time { display: block; margin-top: 10px; font-family: var(--en); font-size: 12px; color: var(--mute); }

/* 参考資料（子育て支援をくらべる） */
.refs .wrap { padding-block: 72px 56px; }
.refs__list { display: grid; gap: 26px; max-width: 980px; margin-top: 28px; }
.refs__g h3 { font-family: var(--serif); font-weight: 700; font-size: 15px; letter-spacing: .06em; }
.refs__g p { margin-top: 4px; font-size: 12.5px; line-height: 1.9; color: var(--sub); }
.refs a { color: var(--wood); text-decoration: underline; text-underline-offset: 3px; }
.refs__wards { display: grid; gap: 10px 32px; margin-top: 12px; }
.refs__wards div { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 10px; font-size: 12px; line-height: 1.85; }
.refs__wards dt { font-weight: 500; color: var(--ink); }
.refs__wards dd { color: var(--mute); }

/* もう一方のページへ（両ページ） */
.xlink .wrap { padding-block: 0 88px; }
.xlink__card { display: grid; gap: 14px; align-items: center; padding: 30px 28px; background: var(--ink); color: var(--paper); box-shadow: var(--lift-2); }
.xlink__body > span { display: block; }
.xlink__card .kicker { color: var(--sand); }
.xlink__title { margin-top: 4px; font-family: var(--serif); font-weight: 700; font-size: 24px; line-height: 1.45; letter-spacing: .08em; }
.xlink__sub { margin-top: 6px; font-size: 13px; color: rgba(255, 255, 255, .62); }
.xlink__card .more { justify-self: start; color: var(--sand); }

/* 子育て：最初の画面（墨の帯・4つの数字と地図。色の付いた区＝待機児童0人） */
.cc-hero { margin-top: 18px; }
.cc-hero .wrap { display: grid; gap: 36px; padding-block: 56px 64px; }
.cc-hero .kicker { color: var(--sand); }
.cc-hero h1 { margin-top: 8px; font-family: var(--serif); font-weight: 800; font-size: 32px; line-height: 1.4; letter-spacing: .1em; color: var(--paper); }
.cc-hero .note { margin-top: 16px; color: rgba(255, 255, 255, .55); }
.cc-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; margin-top: 30px; }
.cc-facts div { display: flex; flex-direction: column; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .16); }
.cc-facts dd { order: -1; font-weight: 200; font-size: 56px; line-height: 1; letter-spacing: -.03em; color: var(--sage); }
.cc-facts dd small { margin-left: 4px; font-family: var(--serif); font-weight: 700; font-size: 17px; letter-spacing: .04em; color: var(--paper); }
.cc-facts dt { margin-top: 10px; font-size: 12.5px; line-height: 1.75; color: rgba(255, 255, 255, .72); }
.cc-facts dt span { display: block; font-size: 11px; color: rgba(255, 255, 255, .45); }
.cc-map svg { display: block; width: 100%; height: auto; overflow: visible; }
.cc-map path { fill: rgba(255, 255, 255, .08); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.cc-map path.is-zero { fill: rgba(166, 214, 188, .78); }
.cc-map text { font-family: var(--serif); font-size: 30px; font-weight: 600; text-anchor: middle; dominant-baseline: central; fill: rgba(255, 255, 255, .7); }
.cc-map text.is-zero { fill: var(--ink); }
.cc-map figcaption { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; color: rgba(255, 255, 255, .6); }
.cc-map figcaption i { flex: none; width: 14px; height: 14px; background: rgba(166, 214, 188, .78); }

/* 子育て：23区の一覧。スマホは1区＝「区名｜待機児童」→ 制度の札 → 「2LDK｜くわしく」の3段、PC は表 */
.cc-list .wrap { padding-block: 84px 72px; }
.cc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.cc-chips button { padding: 8px 16px; border: 1px solid var(--faint); border-radius: 999px; background: var(--paper); color: var(--sub); font: 500 12.5px/1.2 var(--sans); letter-spacing: .06em; cursor: pointer; }
.cc-chips button b { margin-left: 6px; font-weight: 500; }
.cc-chips button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.cc-chips button:focus-visible { outline: 2px solid var(--wood); outline-offset: 2px; }
.cc-table { width: 100%; margin-top: 20px; border-collapse: collapse; }
.cc-table thead { display: none; }
.cc-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 14px; padding: 16px 0; border-top: 1px solid var(--faint); }
.cc-table td, .cc-table tbody th { display: block; font-size: 12.5px; line-height: 1.8; color: var(--sub); text-align: left; font-weight: 400; }
.cc-table .sp-l { margin-right: 6px; font-size: 10.5px; letter-spacing: .06em; color: var(--mute); }
.cc-table .w a, .cc-table .w span { font-family: var(--serif); font-weight: 700; font-size: 18px; letter-spacing: .06em; color: var(--ink); }
.cc-table .wl { text-align: right; }
.cc-table .wl b { font-weight: 300; font-size: 24px; line-height: 1; color: var(--ink); }
.cc-table .wl b small { margin-left: 2px; font-family: var(--sans); font-weight: 700; font-size: 11px; }
.cc-table .wl.is-zero b { display: inline-block; padding: 3px 9px; background: rgba(166, 214, 188, .55); }
.cc-table .pg { grid-column: 1 / -1; }
.cc-table .pg.is-empty { display: none; }
.cc-table .pg ul { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-table .pg li { padding: 2px 9px; background: var(--cream); font-size: 11.5px; color: var(--ink); }
.cc-table .pg li.is-house { background: rgba(226, 196, 165, .5); }
.cc-table .pg li.is-house::before { content: "住まい｜"; color: var(--wood); }
.cc-table .none { color: var(--mute); }
.cc-table .rent b { font-weight: 400; font-size: 17px; color: var(--ink); }
.cc-table .rent b small { margin-left: 2px; font-family: var(--sans); font-size: 11px; }
.cc-table .go { text-align: right; }
.cc-table .go a { font-size: 12px; color: var(--wood); border-bottom: 1px solid currentColor; }
.cc-src { max-width: 60em; margin-top: 18px; font-size: 11.5px; line-height: 1.9; color: var(--mute); }

/* 今あるページから2ページへの一行リンク（TOP の広さの目安・区をえらぶ／区のページ／23区と駅の一覧） */
.f-more { margin-top: 34px; padding-inline: var(--side); font-size: 13px; }
.f-wards > .f-more { margin-top: 26px; padding-inline: 0; }
.f-more--ink .more { color: var(--f-sand); }
.wd-card__x { margin-top: 14px; font-size: 12.5px; color: var(--wood); }
.wd-sup__x { margin-top: 12px; font-size: 12.5px; color: var(--paper); }
.areas__note { margin-top: 14px; font-size: 11.5px; color: var(--mute); }
.areas__more { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 18px; font-size: 13px; color: var(--wood); }

@media (min-width: 991px) {
  .mk-lay__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  .mk-lay__item { padding: 34px 32px 28px; }
  .mk-lay__item.is-key { transform: translateY(-14px); }
  .mk-lay__item.is-key:hover { transform: translateY(-17px); }
  .mk-lay__num { font-size: 84px; }
  .mk-table thead th { padding-bottom: 14px; font-size: 11px; }
  .mk-table td, .mk-table tbody th { padding: 10px; }
  .mk-table .c-count, .mk-table .c-m2 { display: table-cell; }
  .mk-table .w small { display: none; }
  .mk-table .w a, .mk-table .w span { font-size: 17px; }
  .mk-table .n { font-size: 22px; }
  .mk-table .kv { flex-direction: row; align-items: center; justify-content: flex-end; gap: 14px; }
  .mk-table .bar { width: 150px; height: 8px; background: rgba(255, 255, 255, .06); }
  .mk-table .bar i { margin-left: 0; }
  .wd-hero--market .wd-stats dd { font-size: 40px; }
  .mk-size__row { grid-template-columns: 7em minmax(0, 1fr) 21em; padding: 22px 30px; }
  .mk-size__meta { grid-column: 3; text-align: right; }
  .mk-size__bar b { font-size: 34px; }
  .faq__q { font-size: 18.5px; }
  .refs__wards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xlink__card { grid-template-columns: minmax(0, 1fr) auto; padding: 40px 48px; }
  .cc-hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; padding-block: 80px; }
  .cc-hero h1 { font-size: 46px; }
  .cc-facts dd { font-size: 64px; }
  .cc-map text { font-size: 24px; }
  .cc-table thead { display: table-header-group; }
  .cc-table thead th { padding: 0 12px 14px; font-size: 11px; font-weight: 500; letter-spacing: .06em; color: var(--mute); text-align: left; white-space: nowrap; }
  .cc-table tr { display: table-row; padding: 0; border-top: 0; }
  .cc-table td, .cc-table tbody th { display: table-cell; padding: 16px 12px; border-top: 1px solid var(--faint); vertical-align: top; }
  .cc-table .pg.is-empty { display: table-cell; }
  .cc-table .pg { width: 28%; }
  .cc-table .pg li.is-house::before { content: none; }
  .cc-table .sp-l { display: none; }
  .cc-table .wl, .cc-table .go { text-align: left; }
  .cc-table .wl b { font-size: 28px; }
  .cc-table .go { white-space: nowrap; }
  .has-pc.is-family .f-sizes > .f-more { padding-inline: var(--pc-inline); }
}

/* ---- 物件リクエスト（/request・2026-10-30〜）。「家族のために、探そう！」と「わが家の探してます」カード（2026-10-30 作り直し）。
   区の札は「さがす」の .wardlist、選ぶ欄は .sel をそのまま使う。面は生成り・白・紙のカードの3枚で、重ねて浮かせる（区切り線は使わない） ---- */
.rq .form__field { border: 0; margin: 0; padding: 0; min-width: 0; }
.rq legend.form__label { margin-bottom: 8px; padding: 0; }
.rq .btn svg { width: 16px; height: 16px; flex: none; }

/* 見出し：生成りの面に、線画の家族と記入例のカードを重ねる */
.rq-hero { background: var(--cream); overflow: hidden; }
.rq-hero__in { display: grid; gap: 8px; padding-block: 18px 40px; }
.rq-hero .kicker { margin-top: 18px; font-size: 17px; }
.rq-hero__title { margin-top: 10px; font-family: var(--serif); font-weight: 700; font-size: 40px; line-height: 1.35; letter-spacing: .06em; }
.rq-hero__lead { margin-top: 18px; max-width: 520px; color: var(--sub); line-height: 2; }
.rq-hero__go { display: inline-flex; width: auto; margin-top: 26px; padding-inline: 28px; }
.rq-hero__note { margin-top: 10px; font-size: 12px; color: var(--mute); }
.rq-hero__art { position: relative; margin: 8px 0 0; min-height: 300px; }
.rq-hero__ill { display: block; width: 74%; max-width: 420px; margin-left: auto; opacity: .92; }
.poster--sample { position: absolute; left: 0; bottom: -8px; width: min(260px, 70%); transform: rotate(-4deg); }

/* 「わが家の探してます」カード（紙を貼った見た目。テープは2枚） */
.poster { position: relative; padding: 30px 22px 18px; background: var(--paper); box-shadow: var(--lift-2); transform: rotate(-1.2deg); }
.poster::before, .poster::after { content: ""; position: absolute; top: -11px; width: 76px; height: 22px; background: rgba(226, 211, 186, .78); }
.poster::before { left: 18px; transform: rotate(-6deg); }
.poster::after { right: 18px; transform: rotate(5deg); }
.poster__tag { position: absolute; top: 10px; right: 12px; padding: 2px 8px; background: var(--cream-2); font-size: 10.5px; color: var(--sub); letter-spacing: .08em; }
.poster__title { font-family: var(--hand); font-weight: 600; font-size: 26px; line-height: 1.3; letter-spacing: .04em; }
.poster__title span { display: block; font-size: 15px; color: var(--wood); }
.poster__rows { display: grid; gap: 7px; margin-top: 16px; }
.poster__rows div { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); gap: 8px; align-items: baseline; }
.poster__rows dt { font-size: 11.5px; color: var(--mute); letter-spacing: .06em; }
.poster__rows dd { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 14.5px; line-height: 1.6; overflow-wrap: anywhere; }
.poster__voices { display: grid; gap: 6px; margin-top: 14px; font-family: var(--hand); font-size: 15px; line-height: 1.7; }
.poster__voices:empty, .poster__rows:empty { display: none; }
.poster__voices b { margin-right: 4px; font-weight: 600; color: var(--wood); }
.poster__empty { margin-top: 14px; font-family: var(--hand); font-size: 14px; line-height: 1.8; color: var(--mute); }
.poster__foot { display: flex; align-items: center; gap: 10px; margin-top: 20px; font-size: 11.5px; color: var(--sub); }
.poster__faces { display: flex; }
.poster__faces li + li { margin-left: -8px; }
.poster__faces img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--paper); }
.poster__stamp { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 78px; height: 78px; border: 3px double #b8452f; border-radius: 50%; color: #b8452f; font-family: var(--serif); font-weight: 700; font-size: 22px; letter-spacing: .1em; transform: rotate(-14deg); opacity: .88; animation: rq-stamp .45s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes rq-stamp { from { transform: rotate(-14deg) scale(1.8); opacity: 0; } to { transform: rotate(-14deg) scale(1); opacity: .88; } }

/* 流れ：白い面に大きな番号の3つ */
.rq-flow { background: var(--paper); }
.rq-flow__list { display: grid; gap: 30px; padding-block: 48px; }
.rq-flow__no { font-family: var(--en); font-size: 40px; line-height: 1; color: var(--wood); }
.rq-flow__title { margin-top: 10px; font-family: var(--serif); font-weight: 700; font-size: 19px; letter-spacing: .06em; }
.rq-flow__text { margin-top: 8px; font-size: 13.5px; line-height: 1.9; color: var(--sub); }
.rq-faces { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.rq-faces li { display: grid; justify-items: center; gap: 4px; font-size: 11px; color: var(--sub); }
.rq-faces img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }

/* 作るところ：生成りの面に、白い紙の手順を重ね、右（スマホは途中）にカード */
.rq-make { padding-block: 56px 96px; background: var(--cream); scroll-margin-top: 80px; }
.rq-make__title { font-family: var(--serif); font-weight: 700; font-size: 26px; letter-spacing: .06em; }
.rq-form { margin-top: 44px; gap: 40px; }
.rq-step { position: relative; display: grid; gap: 22px; padding: 38px 20px 26px; background: var(--paper); box-shadow: var(--lift-1); }
.rq-step__no { position: absolute; top: -22px; left: 16px; font-family: var(--en); font-size: 46px; line-height: 1; color: var(--wood); }
.rq-step__title { font-family: var(--serif); font-weight: 700; font-size: 20px; letter-spacing: .06em; }
.rq-step__lead { margin-top: -10px; font-size: 13px; line-height: 1.9; color: var(--sub); }
.rq-wards { column-gap: 14px; }
.rq-wards label { font-size: 14px; padding: 9px 2px; }
.rq-stations { display: grid; gap: 8px; }
.rq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rq-grid label { display: grid; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.rq-grid .sel { width: 100%; background-color: var(--cream); box-shadow: none; }
.rq-voices { display: grid; gap: 10px; }
.rq-voice { display: grid; grid-template-columns: 5.6em minmax(0, 1fr); gap: 8px; }
.rq-voice__who { font-family: var(--hand); text-align: center; background: var(--cream); border-color: transparent; }
.rq-side { display: grid; gap: 14px; padding-top: 10px; }
.rq-share { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 18px; background: var(--line-green); color: var(--paper); font-size: 14px; font-weight: 500; letter-spacing: .06em; }
.rq-share svg { width: 20px; height: 20px; fill: currentColor; }
.rq-share__note { font-size: 11.5px; line-height: 1.8; color: var(--mute); }
.rq-member { padding: 14px 16px; background: var(--paper); font-size: 13px; line-height: 1.8; }
.rq-done { padding: 30px 22px; background: var(--paper); box-shadow: var(--lift-1); }
.rq-done:focus { outline: none; }
.rq-form.is-done > .rq-step, .rq-form.is-done > .rq-consent, .rq-form.is-done > .rq-submit, .rq-form.is-done > .rq-member, .rq-form.is-done > .form__message { display: none; }

/* 検索結果の一覧の下の入口 */
.rs-request { display: grid; gap: 14px; margin-top: 32px; padding: 22px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--cream-2); text-decoration: none; color: var(--ink); }
.rs-request__text { display: grid; gap: 6px; }
.rs-request__text b { font-family: var(--serif); font-size: 16px; letter-spacing: .06em; }
.rs-request__text small { font-size: 12.5px; line-height: 1.8; color: var(--sub); }
.rs-request__go { justify-self: start; padding: 11px 18px; background: var(--ink); color: var(--paper); font-size: 13px; letter-spacing: .1em; }
.rg-form__request a { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 640px) {
  .rq-stations { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rq-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rq-wards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rq-flow__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .rq-step { padding: 44px 34px 32px; }
  .rq-step__no { left: 28px; font-size: 54px; top: -26px; }
  .rs-request { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .rs-request__go { justify-self: end; }
}
@media (min-width: 991px) {
  .rq-hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); align-items: center; gap: 48px; padding-block: 22px 72px; }
  .rq-hero__title { font-size: 58px; }
  .rq-hero__art { min-height: 440px; }
  .poster--sample { width: 280px; left: -12px; bottom: 0; }
  .rq-flow__list { padding-block: 64px; }
  .rq-make { padding-block: 80px 120px; }
  .rq-make__title { font-size: 32px; }
  .rq-form { grid-template-columns: minmax(0, 1fr) 340px; column-gap: 56px; row-gap: 48px; }
  .rq-form > * { grid-column: 1; }
  .rq-form > .rq-side { grid-column: 2; grid-row: 1 / span 9; align-self: start; position: sticky; top: 124px; padding-top: 0; }
  .rq-wards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .rq-done { padding: 40px 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .poster__stamp { animation: none; }
}

/* ---- 物件リクエストの幕（2026-10-30〜）。歩く家族が入り、「探してます」の紙が落ちてきて1行ずつ書き込まれ、案内が出る。
   「わが家の探してますを作る」で幕が上がる（pages/request.astro の先頭のスクリプト）。文は data-variant で「ふつう／家族から届いた」を出し分ける ---- */
html.rq-intro-on { overflow: hidden; }
.rq-intro { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; overflow: auto; padding: calc(28px + env(safe-area-inset-top, 0px)) var(--gr) calc(28px + env(safe-area-inset-bottom, 0px)) var(--gl); background: var(--cream); }
.rq-intro[hidden] { display: none; }
.rq-intro [data-for] { display: none; }
.rq-intro[data-variant="default"] [data-for="default"], .rq-intro[data-variant="family"] [data-for="family"] { display: revert; }
.rq-intro__go [data-for] { display: none !important; }
.rq-intro[data-variant="default"] .rq-intro__go [data-for="default"], .rq-intro[data-variant="family"] .rq-intro__go [data-for="family"] { display: inline !important; }
.rq-intro__in { position: relative; display: grid; justify-items: center; gap: 4px; width: 100%; max-width: 560px; text-align: center; }
.rq-intro__ill { width: 168px; height: auto; animation: rq-walk 1s .1s cubic-bezier(.2, .8, .3, 1) both; }
.rq-intro__card { width: min(300px, 86vw); margin-top: -18px; text-align: left; animation: rq-drop .8s .55s cubic-bezier(.2, .9, .3, 1.25) both; }
.rq-intro__card .poster__rows div, .rq-intro__card .poster__voices li { animation: rq-write .5s calc(1.15s + var(--d, 0) * .22s) ease-out both; }
.rq-intro__text { display: grid; justify-items: center; gap: 12px; margin-top: 28px; animation: rq-rise .6s 1.9s ease-out both; }
.rq-intro__kicker { font-size: 15px; }
.rq-intro__title { font-family: var(--serif); font-weight: 700; font-size: 30px; line-height: 1.4; letter-spacing: .06em; }
.rq-intro__lead { max-width: 440px; font-size: 14px; line-height: 1.95; color: var(--sub); }
.rq-intro__go { width: auto; margin-top: 10px; padding-inline: 30px; }
.rq-intro__go svg { width: 16px; height: 16px; flex: none; }
.rq-intro.is-leaving { animation: rq-lift .8s cubic-bezier(.7, 0, .25, 1) forwards; }
.rq-intro.is-leaving .rq-intro__in { animation: rq-away .5s ease-in forwards; }
@keyframes rq-walk { from { transform: translateX(-90px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rq-drop { from { transform: translateY(-110px) rotate(-14deg); opacity: 0; } to { transform: rotate(-2deg); opacity: 1; } }
@keyframes rq-write { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes rq-rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rq-lift { to { transform: translateY(-100%); } }
@keyframes rq-away { to { transform: translateY(-40px) scale(.94); opacity: 0; } }
@media (min-width: 991px) {
  .rq-intro__ill { width: 200px; }
  .rq-intro__card { width: 320px; }
  .rq-intro__title { font-size: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .rq-intro__ill, .rq-intro__card, .rq-intro__card .poster__rows div, .rq-intro__card .poster__voices li, .rq-intro__text { animation: none; }
  .rq-intro__card { transform: rotate(-2deg); }
}

/* ==========================================================================
   新着速報の帯と「新着を一気に見る」の束（2026-10-30〜・見本＝社内資料/ファミリー速報帯と束見本_20261030・ユーザー承認）
   --------------------------------------------------------------------------
   帯（.ntk）：ヘッダーの上の墨の細い帯。スクロールで流れていく（ヘッダーの sticky の位置は変えない）。
   束（.ndk）：パーソナルサイトの未読の束と同じ動き（scripts/deck.ts）。詳しく見る（.ndt）・会員の打診（.nask）・最後の画面（.nend）。
   重なり順：スマホの下のバー 30 ＜ 束 60 ＜ 短い通知 70 ＜ ログインの小窓 80（束からログインの小窓を開くため）
   ========================================================================== */
:root:has(.ntk) { --ntk-h: 40px; }
html.is-deck-open { overflow: hidden; }

/* ---- 帯 ---- */
.ntk { position: relative; z-index: 45; display: flex; align-items: stretch; height: var(--ntk-h, 40px); background: var(--ink); color: var(--cream); font-size: 12.5px; line-height: 1.4; }
.ntk__label { flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 0 16px 0 max(var(--gl), calc((100% - 1280px) / 2 + var(--gl))); background: var(--wood); color: var(--paper); font-family: var(--serif); font-weight: 600; font-size: 13px; letter-spacing: .12em; white-space: nowrap; }
.ntk__label i { width: 7px; height: 7px; border-radius: 50%; background: var(--sand); animation: ntk-pulse 2s infinite; }
.ntk__label-short { display: none; }
@keyframes ntk-pulse { 0% { box-shadow: 0 0 0 0 rgba(226, 196, 165, .7); } 70% { box-shadow: 0 0 0 7px rgba(226, 196, 165, 0); } 100% { box-shadow: 0 0 0 0 rgba(226, 196, 165, 0); } }
.ntk__view { position: relative; flex: 1; min-width: 0; overflow: hidden; }
.ntk__item { position: absolute; inset: 0; display: flex; align-items: center; gap: 14px; padding: 0 18px; white-space: nowrap; color: inherit; transform: translateY(100%); opacity: 0; transition: transform .55s var(--ease), opacity .55s var(--ease); }
.ntk__item.is-on { transform: none; opacity: 1; }
.ntk__item.is-out { transform: translateY(-100%); opacity: 0; }
.ntk__item:hover .ntk__spec em, .ntk__item:focus-visible .ntk__spec em { text-decoration: underline; text-underline-offset: 3px; }
.ntk__mem { flex-shrink: 0; padding: 1px 7px; border: 1px solid var(--sand); color: var(--sand); font-size: 11px; letter-spacing: .08em; }
.ntk__where { flex-shrink: 0; color: var(--faint); }
.ntk__pts { display: flex; gap: 10px; min-width: 0; overflow: hidden; }
.ntk__pts b { flex-shrink: 0; color: var(--sand); font-weight: 500; }
.ntk__pts b + b::before { content: "・"; margin-right: 10px; color: var(--mute); font-weight: 400; }
.ntk__spec { flex-shrink: 0; color: var(--faint); }
.ntk__spec em { margin-left: 6px; font-style: normal; font-family: var(--en); font-weight: 500; font-size: 14px; color: var(--paper); }
.ntk__spec em::after { content: " ›"; color: var(--sand); }
.ntk__count { flex-shrink: 0; align-self: center; padding: 0 12px; font-size: 11px; color: var(--mute); letter-spacing: .06em; }
.ntk__note { flex-shrink: 0; align-self: center; margin-right: 10px; padding: 4px 6px; border: 0; background: none; color: var(--mute); font-size: 11px; cursor: pointer; }
.ntk__note:hover { color: var(--cream); }
.ntk__note-short { display: none; }
.ntk__go { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 0 max(var(--gr), calc((100% - 1280px) / 2 + var(--gr))) 0 18px; border: 0; background: var(--cream); color: var(--ink); font-weight: 700; font-size: 12.5px; letter-spacing: .06em; white-space: nowrap; cursor: pointer; }
.ntk__go b { font-weight: inherit; }
.ntk__go small { font-family: var(--en); font-weight: 400; font-size: 11px; color: var(--wood); letter-spacing: .02em; }
.ntk__go i { display: inline-grid; place-items: center; width: 22px; height: 22px; background: var(--ink); color: var(--cream); font-style: normal; font-size: 12px; transition: transform .3s var(--ease); }
.ntk__go:hover i { transform: translateX(3px); }
.ntk__pop { position: absolute; z-index: 5; top: calc(100% + 4px); right: 12px; width: min(380px, calc(100% - 24px)); padding: 14px 16px; background: var(--paper); color: var(--ink); box-shadow: var(--lift-2); font-size: 12.5px; line-height: 1.8; }
@media (max-width: 700px) {
  :root:has(.ntk) { --ntk-h: 38px; }
  .ntk { font-size: 12px; }
  .ntk__label { padding: 0 10px 0 var(--gl); gap: 6px; font-size: 12px; letter-spacing: .1em; }
  .ntk__label-full, .ntk__go b, .ntk__go small, .ntk__note-full, .ntk__where, .ntk__count, .ntk__plan { display: none; }
  .ntk__label-short, .ntk__note-short { display: inline; }
  .ntk__item { gap: 8px; padding: 0 10px; }
  .ntk__pts b:nth-child(n+2) { display: none; }
  .ntk__spec em { margin-left: 0; font-size: 13px; }
  .ntk__mem { padding: 0 5px; font-size: 10px; }
  .ntk__note { margin-right: 2px; padding: 4px; font-size: 12px; }
  .ntk__go { gap: 6px; padding: 0 var(--gr) 0 12px; font-size: 12px; }
  .ntk__go i { width: 18px; height: 18px; font-size: 10px; }
}

/* ---- 束 ---- */
.ndk { position: fixed; inset: 0; z-index: 60; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); background: rgba(34, 30, 27, .95); color: var(--cream); overflow: hidden; }
.ndk__intro { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; text-align: center; pointer-events: none; opacity: 0; }
.ndk__intro-kicker { font-family: var(--hand); font-size: 15px; color: var(--sand); }
.ndk__intro b { display: block; margin: 6px 0 4px; font-family: var(--en); font-weight: 200; font-size: clamp(64px, 14vw, 120px); line-height: 1; color: var(--paper); }
.ndk__intro p:last-child { font-family: var(--serif); font-size: 17px; letter-spacing: .06em; }
.ndk__top { display: flex; align-items: center; gap: 14px; padding: 14px 20px 6px; }
.ndk__undo, .ndk__close { padding: 6px 10px; border: 0; background: none; color: var(--cream); font-size: 13px; letter-spacing: .04em; cursor: pointer; }
.ndk__undo:disabled { opacity: .3; cursor: default; }
.ndk__prog { flex: 1; display: flex; align-items: center; gap: 10px; }
.ndk__bar { flex: 1; height: 2px; background: rgba(243, 238, 231, .18); }
.ndk__bar i { display: block; width: 0; height: 100%; background: var(--sand); transition: width .35s var(--ease); }
.ndk__num { min-width: 48px; font-size: 13px; color: var(--faint); text-align: right; }
/* カードの重なり（z-index）を束の中に閉じ込める。打診・最後の画面・通知はこの上に出す */
.ndk__stage { position: relative; z-index: 1; touch-action: none; }
.ndk__loading { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 20px; font-size: 13px; color: var(--faint); text-align: center; pointer-events: none; }
.ndk__loading[hidden] { display: none; }
.ndk__card { position: absolute; left: 50%; top: 50%; width: min(360px, calc(100% - 40px)); height: min(540px, calc(100% - 72px)); margin: 0; background: var(--ink-2); overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); user-select: none; -webkit-user-select: none; touch-action: none; will-change: transform; transform-origin: 50% 90%; }
.ndk__card.is-anim { transition: transform .32s var(--ease), opacity .32s var(--ease); }
.ndk__card.is-flying { transition: transform .34s cubic-bezier(.4, 0, .6, 1), opacity .34s; }
.ndk__card:not(.is-top) .ndk__body, .ndk__card:not(.is-top) .ndk__bars { opacity: 0; }
.ndk__ph { position: absolute; inset: 0; }
.ndk__ph img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.ndk__ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(34, 30, 27, .35) 0, rgba(34, 30, 27, 0) 18%, rgba(34, 30, 27, 0) 42%, rgba(34, 30, 27, .88) 78%, rgba(34, 30, 27, .96) 100%); }
.ndk__bars { position: absolute; z-index: 2; top: 10px; left: 12px; right: 12px; display: flex; gap: 4px; }
.ndk__bars i { flex: 1; height: 2px; background: rgba(255, 255, 255, .35); }
.ndk__bars i.is-on { background: var(--paper); }
.ndk__tag { position: absolute; z-index: 2; top: 22px; left: 14px; padding: 3px 9px 4px; background: var(--wood); color: var(--paper); font-family: var(--serif); font-weight: 600; font-size: 12px; letter-spacing: .1em; }
.ndk__tag--mem { background: var(--paper); color: var(--ink); }
.ndk__lock { position: absolute; z-index: 2; left: 0; right: 0; top: 34%; text-align: center; font-size: 12.5px; color: var(--paper); text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.ndk__lock b { display: block; margin-bottom: 2px; font-family: var(--serif); font-size: 17px; letter-spacing: .06em; }
.ndk__body { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 0 18px 16px; color: var(--paper); }
.ndk__pts { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.ndk__pts li { padding: 2px 8px; background: var(--sand); color: var(--ink); font-size: 11.5px; font-weight: 700; letter-spacing: .03em; }
.ndk__name { font-family: var(--serif); font-weight: 600; font-size: 18px; line-height: 1.4; letter-spacing: .03em; }
.ndk__where { margin-top: 3px; font-size: 12.5px; color: var(--cream); }
.ndk__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 8px; }
.ndk__rent { font-family: var(--en); font-weight: 300; font-size: 34px; line-height: 1; }
.ndk__rent small { margin-left: 2px; font-family: var(--sans); font-size: 13px; font-weight: 500; }
.ndk__spec { margin-top: 4px; font-size: 12px; color: var(--faint); }
.ndk__more { flex-shrink: 0; padding: 6px 10px; border: 1px solid rgba(255, 255, 255, .5); background: none; color: var(--paper); font-size: 12px; cursor: pointer; }
.ndk__basis { margin-top: 8px; padding: 0; border: 0; background: none; color: var(--mute); font-size: 10.5px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.ndk__stamp { position: absolute; z-index: 3; top: 44px; padding: 4px 12px; border: 3px solid; font-family: var(--serif); font-weight: 700; font-size: 22px; letter-spacing: .1em; pointer-events: none; }
.ndk__stamp--no { right: 18px; color: #fff; border-color: #fff; transform: rotate(12deg); opacity: var(--lean-no, 0); }
.ndk__stamp--ok { left: 18px; color: var(--sand); border-color: var(--sand); transform: rotate(-12deg); opacity: var(--lean-ok, 0); }
.ndk__stamp--go { left: 50%; top: 40%; color: var(--ink); background: var(--sand); border-color: var(--sand); transform: translateX(-50%) rotate(-4deg); opacity: var(--lean-go, 0); }
.ndk__foot { position: relative; z-index: 2; }
.ndk__btns { display: flex; justify-content: center; gap: 26px; padding: 4px 20px 16px; }
.ndk__btn { display: grid; justify-items: center; gap: 6px; border: 0; background: none; color: var(--cream); font-size: 11.5px; letter-spacing: .04em; cursor: pointer; }
.ndk__btn span { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; font-size: 26px; line-height: 1; transition: transform .2s var(--ease); }
.ndk__btn:hover span { transform: scale(1.06); }
.ndk__btn--no span { border: 1.5px solid rgba(243, 238, 231, .5); color: var(--cream); font-family: var(--en); font-weight: 200; font-size: 34px; }
.ndk__btn--ok span { background: var(--paper); color: var(--wood); font-size: 30px; }
.ndk__btn--go span { width: 68px; height: 68px; background: var(--sand); color: var(--ink); font-size: 30px; }
.ndk__hint { padding-bottom: 10px; font-size: 11px; color: var(--mute); text-align: center; }
.ndk.is-intro .ndk__top, .ndk.is-intro .ndk__foot { opacity: 0; }
.ndk__top, .ndk__foot { transition: opacity .5s var(--ease); }
/* 束の通知は上に出す（会員の ○ で出るサイトの通知「候補にも入れました！」は下に出るので、重ならないように） */
.ndk__toast { position: absolute; z-index: 30; left: 50%; top: calc(56px + env(safe-area-inset-top, 0px)); max-width: calc(100% - 40px); padding: 10px 16px; background: var(--paper); color: var(--ink); font-size: 12.5px; line-height: 1.6; box-shadow: var(--lift-2); opacity: 0; transform: translate(-50%, -12px); transition: .3s var(--ease); pointer-events: none; }
.ndk__toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 900px) {
  .ndk__card { width: min(820px, calc(100% - 120px)); height: min(500px, calc(100% - 72px)); transform-origin: 50% 100%; }
  .ndk__ph::after { background: linear-gradient(90deg, rgba(34, 30, 27, .94) 0, rgba(34, 30, 27, .82) 30%, rgba(34, 30, 27, 0) 56%), linear-gradient(180deg, rgba(34, 30, 27, .3) 0, rgba(34, 30, 27, 0) 18%); }
  .ndk__body { top: 0; right: auto; width: 46%; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 30px 28px; }
  .ndk__name { font-size: 22px; }
  .ndk__rent { font-size: 42px; }
  .ndk__lock { left: 46%; }
  .ndk__btns { gap: 40px; }
}

/* ---- 詳しく見る（スマホは下からのシート・PCは真ん中の窓） ---- */
.ndt { position: absolute; inset: 0; z-index: 45; background: rgba(20, 17, 15, .5); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); }
.ndt.is-on { opacity: 1; pointer-events: auto; }
.ndt__panel { position: absolute; left: 0; right: 0; bottom: 0; top: 56px; display: flex; flex-direction: column; background: var(--paper); color: var(--ink); transform: translateY(100%); transition: transform .3s cubic-bezier(.2, .8, .3, 1), opacity .3s; }
.ndt.is-on .ndt__panel { transform: none; }
.ndt__head { display: flex; justify-content: flex-end; padding: 8px 10px 0; }
.ndt__close { padding: 6px 8px; border: 0; background: none; font-size: 12.5px; color: var(--sub); cursor: pointer; }
.ndt__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 20px 22px; }
.ndt__strip { display: flex; gap: 6px; margin: 0 -20px; padding: 0 20px 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.ndt__strip img { flex-shrink: 0; width: 224px; height: 168px; object-fit: cover; background: var(--cream); scroll-snap-align: start; }
.ndt__mem { margin-top: 14px; padding: 8px 12px; background: var(--cream); font-size: 12px; color: var(--sub); }
.ndt__mem b { display: block; font-family: var(--serif); font-size: 14px; color: var(--ink); }
.ndt__name { margin-top: 14px; font-family: var(--serif); font-weight: 700; font-size: 20px; line-height: 1.45; letter-spacing: .04em; }
.ndt__where { margin-top: 2px; font-size: 12.5px; color: var(--sub); }
.ndt__rent { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-top: 8px; font-size: 12px; color: var(--sub); }
.ndt__rent b { font-weight: 300; font-size: 32px; line-height: 1.1; color: var(--ink); }
.ndt__rent b small { margin-left: 2px; font-family: var(--sans); font-size: 13px; font-weight: 500; }
.ndt__pts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.ndt__pts li { padding: 2px 8px; background: var(--ink); color: var(--sand); font-size: 11.5px; font-weight: 700; letter-spacing: .03em; }
.ndt__basis { margin-top: 8px; font-size: 11px; line-height: 1.7; color: var(--mute); }
.ndt__dl { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 9px 12px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--cream-2); font-size: 13px; line-height: 1.6; }
.ndt__dl dt { color: var(--mute); }
.ndt__dl dd { margin: 0; overflow-wrap: anywhere; }
.ndt__agent { display: flex; align-items: flex-start; gap: 10px; margin-top: 20px; }
.ndt__face { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--cream-2); font-family: var(--serif); font-weight: 700; }
.ndt__face img { width: 100%; height: 100%; object-fit: cover; }
.ndt__who { font-size: 11px; color: var(--mute); }
.ndt__bubble { position: relative; margin-top: 4px; padding: 10px 14px; background: var(--cream); font-size: 13px; line-height: 1.85; white-space: pre-line; }
.ndt__bubble::before { content: ""; position: absolute; left: -6px; top: 12px; border: 6px solid transparent; border-left: 0; border-right-color: var(--cream); }
.ndt__full { display: inline-block; margin-top: 20px; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--wood); text-decoration: underline; text-underline-offset: 4px; }
.ndt__acts { display: flex; gap: 8px; padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -12px 22px -18px rgba(20, 12, 8, .5); }
.ndt__acts button { flex: 1; height: 48px; border: 0; background: var(--cream); font-size: 13px; letter-spacing: .04em; cursor: pointer; }
.ndt__acts button:hover { background: var(--cream-2); }
.ndt__acts .is-go { background: var(--wood); color: var(--paper); font-weight: 700; }
.ndt__acts .is-go:hover { background: #6a4a30; }
@media (min-width: 900px) {
  .ndt__panel { left: 50%; right: auto; top: 32px; bottom: 32px; width: min(800px, calc(100% - 64px)); transform: translate(-50%, 24px); opacity: 0; }
  .ndt.is-on .ndt__panel { transform: translate(-50%, 0); opacity: 1; }
  .ndt__body { padding: 0 32px 26px; }
  .ndt__strip { margin: 0 -32px; padding: 0 32px 4px; }
  .ndt__strip img { width: 280px; height: 210px; }
  .ndt__dl { grid-template-columns: 120px minmax(0, 1fr) 120px minmax(0, 1fr); }
}

/* ---- 会員の打診：ばん！の一言 → その場の登録 → 詳しい説明 ---- */
.nask { position: absolute; inset: 0; z-index: 40; display: grid; align-items: end; justify-items: center; background: rgba(20, 17, 15, .55); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); }
.nask.is-on { opacity: 1; pointer-events: auto; }
.nask__sheet { position: relative; width: 100%; max-width: 920px; max-height: calc(100% - 16px); overflow-y: auto; overscroll-behavior: contain; background: var(--paper); color: var(--ink); transform: translateY(40px); transition: transform .45s var(--ease); }
.nask.is-on .nask__sheet { transform: none; }
.nask__x { position: absolute; z-index: 2; top: 8px; right: 8px; width: 38px; height: 38px; border: 0; background: none; font-size: 22px; color: var(--cream); cursor: pointer; }
.nask__ban { position: relative; padding: 26px 22px 24px; background: var(--ink); color: var(--cream); overflow: hidden; }
.nask__ban::after { content: ""; position: absolute; right: -60px; bottom: -80px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(226, 196, 165, .22), rgba(226, 196, 165, 0) 70%); pointer-events: none; }
.nask__kicker { font-family: var(--hand); font-size: 15px; color: var(--sand); }
.nask__kicker b { margin: 0 2px; font-size: 22px; font-weight: 400; color: var(--paper); }
.nask__flow { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.nask__thumbs { display: flex; }
.nask__thumbs span { position: relative; width: 58px; height: 74px; margin-right: -14px; border: 2px solid var(--ink); overflow: hidden; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .6); }
.nask__thumbs span:nth-child(1) { transform: rotate(-7deg); }
.nask__thumbs span:nth-child(2) { z-index: 1; transform: rotate(2deg) translateY(-4px); }
.nask__thumbs span:nth-child(3) { z-index: 2; transform: rotate(8deg); }
.nask__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.nask__thumbs i { position: absolute; left: 4px; bottom: 4px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--paper); color: var(--wood); font-style: normal; font-size: 12px; font-weight: 700; }
.nask__thumbs i.is-go { background: var(--sand); color: var(--ink); }
.nask__thumbs span.is-no { opacity: .45; }
.nask__thumbs span.is-no i { background: var(--ink-2); color: var(--cream); }
.nask__arrow { margin-left: 20px; font-family: var(--en); font-weight: 200; font-size: 28px; color: var(--sand); animation: nask-nudge 1.4s var(--ease) infinite; }
@keyframes nask-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
.nask__ps { display: grid; padding: 8px 12px 9px; background: var(--paper); color: var(--ink); line-height: 1.25; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6); }
.nask__ps span { font-family: var(--en); font-size: 9px; letter-spacing: .32em; color: var(--wood); }
.nask__ps b { font-family: var(--serif); font-size: 14px; letter-spacing: .04em; }
.nask__ps small { font-size: 10px; color: var(--sub); }
.nask__title { margin-top: 16px; font-family: var(--serif); font-weight: 700; font-size: 25px; line-height: 1.42; letter-spacing: .03em; color: var(--paper); text-wrap: initial; }
.nask__title em { font-style: normal; color: var(--sand); white-space: nowrap; }
.nask__plus { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 15px; font-weight: 500; letter-spacing: .02em; }
.nask__plus-mark { flex-shrink: 0; display: grid; place-items: center; width: 26px; height: 26px; background: var(--sand); color: var(--ink); font-weight: 700; }
.nask__plus b { color: var(--sand); font-weight: 700; }
.nask__plus sup { font-size: 10px; color: var(--mute); }
.nask__main { padding: 22px 22px 6px; }
.nask__ftitle { font-family: var(--serif); font-weight: 700; font-size: 18px; letter-spacing: .04em; }
.nask__ftitle small { margin-left: 10px; font-family: var(--sans); font-weight: 500; font-size: 12px; color: var(--wood); letter-spacing: .02em; }
.nask__form { display: grid; gap: 10px; }
.nask__field { display: grid; gap: 4px; font-size: 12.5px; color: var(--sub); }
.nask__field i { margin-left: 6px; font-style: normal; font-size: 11px; color: var(--mute); }
.nask__field input, .nask__field select { width: 100%; padding: 12px; border: 1px solid var(--faint); border-radius: 0; background: var(--paper); font: inherit; font-size: 16px; color: var(--ink); }
.nask__field input:focus, .nask__field select:focus { outline: none; border-color: var(--ink); }
.nask__agree { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.nask__agree input { width: 18px; height: 18px; accent-color: var(--ink); }
.nask__agree a { text-decoration: underline; text-underline-offset: 3px; }
.nask__submit { display: flex; justify-content: center; align-items: baseline; gap: 8px; margin-top: 4px; padding: 16px; border: 0; background: var(--ink); color: var(--paper); font-weight: 700; font-size: 16px; letter-spacing: .08em; cursor: pointer; }
.nask__submit:disabled { opacity: .5; cursor: default; }
.nask__submit small { font-size: 11.5px; color: var(--sand); letter-spacing: .04em; }
.nask__msg { font-size: 12.5px; line-height: 1.7; color: #a23b2a; }
.nask__msg:empty { display: none; }
.nask__msg button, .nask__loginrow button { margin: 0 2px; padding: 0; border: 0; background: none; color: var(--ink); font-size: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.nask__loginrow { font-size: 12.5px; color: var(--sub); text-align: center; }
.nask__done { display: grid; gap: 10px; align-content: start; font-size: 13.5px; }
.nask__done[hidden], .nask__form[hidden] { display: none; }
.nask__next { padding: 14px; border: 0; background: var(--ink); color: var(--paper); font-weight: 700; letter-spacing: .08em; cursor: pointer; }
.nask__more { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--cream-2); }
.nask__mtitle { font-size: 13px; font-weight: 700; color: var(--sub); letter-spacing: .04em; }
.nask__road { display: grid; gap: 10px; margin-top: 10px; }
.nask__step { position: relative; padding: 14px 16px 14px 62px; background: var(--cream); }
.nask__step + .nask__step { background: var(--ink); color: var(--cream); }
.nask__no { position: absolute; left: 16px; top: 14px; font-weight: 300; font-size: 26px; line-height: 1; color: var(--wood); }
.nask__step + .nask__step .nask__no { color: var(--sand); }
.nask__name { font-family: var(--serif); font-weight: 700; font-size: 16px; letter-spacing: .04em; }
.nask__name small { margin-left: 8px; font-family: var(--sans); font-weight: 500; font-size: 11.5px; color: var(--wood); letter-spacing: .02em; }
.nask__step + .nask__step .nask__name small { color: var(--sand); }
.nask__how { margin-top: 2px; font-size: 12px; color: var(--faint); }
.nask__list { display: grid; gap: 4px; margin-top: 8px; font-size: 13px; }
.nask__list li { position: relative; padding-left: 18px; }
.nask__list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 5px; border-left: 1.5px solid var(--wood); border-bottom: 1.5px solid var(--wood); transform: rotate(-45deg); }
.nask__step + .nask__step .nask__list li::before { border-color: var(--sand); }
.nask__note { margin-top: 10px; font-size: 11.5px; line-height: 1.8; color: var(--mute); }
.nask__skip { display: block; margin: 8px auto calc(18px + env(safe-area-inset-bottom, 0px)); border: 0; background: none; color: var(--sub); font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (min-width: 900px) {
  .nask { align-items: center; }
  .nask__ban { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "flow kicker" "flow title" "flow plus"; column-gap: 40px; align-items: end; padding: 34px 40px 32px; }
  .nask__ban .nask__flow { grid-area: flow; align-self: center; margin: 0; }
  .nask__kicker { grid-area: kicker; }
  .nask__title { grid-area: title; margin-top: 4px; font-size: 28px; }
  .nask__plus { grid-area: plus; font-size: 17px; }
  .nask__thumbs span { width: 66px; height: 86px; }
  .nask__main { display: grid; grid-template-columns: 1fr 1.1fr; gap: 36px; padding: 28px 40px 8px; }
  .nask__more { margin-top: 0; padding: 0 0 0 36px; border-top: 0; border-left: 1px solid var(--cream-2); }
  .nask__road { grid-template-columns: 1fr; }
}

/* ---- 最後の画面 ---- */
.nend { position: absolute; inset: 0; z-index: 25; display: grid; place-items: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .4s var(--ease); }
.nend.is-on { opacity: 1; pointer-events: auto; }
.nend__paper { width: 100%; max-width: 560px; max-height: 100%; overflow-y: auto; padding: 28px 24px 22px; background: var(--paper); color: var(--ink); }
.nend__kicker { font-family: var(--hand); font-size: 14px; color: var(--wood); }
.nend__title { font-family: var(--serif); font-weight: 700; font-size: 24px; letter-spacing: .04em; }
.nend__tally { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; text-align: center; }
.nend__tally div { padding: 10px 6px; background: var(--cream); font-size: 12px; color: var(--sub); }
.nend__tally b { display: block; font-weight: 300; font-size: 30px; line-height: 1.1; color: var(--ink); }
.nend__list { display: grid; gap: 6px; margin-top: 14px; font-size: 13px; }
.nend__list li { display: flex; gap: 8px; }
.nend__list li span { flex-shrink: 0; width: 1.4em; color: var(--wood); font-weight: 700; }
.nend__list a { text-decoration: underline; text-underline-offset: 3px; }
.nend__note { margin-top: 12px; font-size: 12.5px; color: var(--sub); }
.nend__cta { margin-top: 18px; padding: 16px; background: var(--ink); color: var(--cream); }
.nend__cta p { font-family: var(--serif); font-size: 15px; font-weight: 600; letter-spacing: .03em; }
.nend__cta a, .nend__cta button { display: grid; place-items: center; width: 100%; margin-top: 12px; padding: 13px; border: 0; background: var(--cream); color: var(--ink); font-size: 14px; font-weight: 700; letter-spacing: .08em; cursor: pointer; }
.nend__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin-top: 14px; font-size: 13px; }
.nend__links a, .nend__links button { padding: 4px; border: 0; background: none; color: var(--sub); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.nend__links .is-line { color: var(--line-green); font-weight: 700; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .ntk__item, .ndk__card.is-anim, .ndk__card.is-flying, .ndt, .ndt__panel, .nask, .nask__sheet, .nend { transition: none; }
  .ntk__label i, .nask__arrow { animation: none; }
}

/* ===================================================================================================
   区・駅×条件のページと区・駅の家賃相場のページ（2026-10-30〜・見本＝社内資料/ファミリー区駅条件ページ見本_20261030 第2版・ユーザー承認）。
   条件の札＝.cx（区・駅のページの「条件をしぼる」と条件のページの「条件をかえる」）・0件の案内＝.cx-empty・23区とくらべる一行＝.cx-compare。
   ページの形は区のページ（.wd-*）、家賃相場の間取り別・広さ別は 23区の相場ページ（.mk-lay・.mk-size）をそのまま使う
   =================================================================================================== */
.cx { margin-top: 26px; }
.cx__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.cx__title { font-family: var(--serif); font-weight: 700; font-size: 16px; letter-spacing: .08em; }
.cx__note { font-size: 11.5px; color: var(--mute); }
.cx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cx-chips a, .cx-chips span { display: inline-flex; align-items: baseline; gap: 6px; padding: 9px 15px; border: 1px solid var(--faint); border-radius: 999px; background: var(--paper); font-size: 13px; letter-spacing: .04em; color: var(--ink); transition: border-color .2s; }
.cx-chips a:hover { border-color: var(--ink); }
.cx-chips a:focus-visible { outline: 2px solid var(--wood); outline-offset: 2px; }
.cx-chips small { font-size: 11.5px; color: var(--mute); }
.cx-chips .is-zero small { color: var(--faint); }
.cx-chips [aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.cx-chips [aria-current="page"] small { color: rgba(255, 255, 255, .6); }
.wd-cx { padding-block: 34px 0; }
.wd-cx .cx { margin-top: 0; }
.cx-sup { font-size: 13px; }
.cx-sup a { color: var(--wood); border-bottom: 1px solid currentColor; }

/* 0件のとき：物件リクエストへ */
.cx-empty { margin-top: 56px; }
.cx-empty .wrap { padding-block: 56px 64px; }
.cx-empty__box { display: grid; gap: 18px; padding: 30px 26px; background: var(--paper); box-shadow: var(--lift-2); }
.cx-empty__box .kicker { display: block; }
.cx-empty__box .title { margin-top: 4px; }
.cx-empty__text { margin-top: 10px; font-size: 13.5px; line-height: 1.95; color: var(--sub); }
.cx-empty__acts { display: grid; gap: 10px; }
.cx-empty__line { justify-self: start; font-size: 13px; color: var(--wood); border-bottom: 1px solid currentColor; }

/* 家賃相場：23区全体とくらべる一行 */
.cx-compare { margin-top: 16px; font-size: 13px; color: var(--sub); }
.cx-compare a { color: var(--wood); border-bottom: 1px solid currentColor; }

@media (min-width: 991px) {
  .wd-cx { padding-block: 40px 0; }
  .cx-empty__box { grid-template-columns: minmax(0, 1fr) 320px; align-items: center; padding: 40px 48px; }
}

/* ---- 物件リクエスト：スマホの下の「わが家の探してます」の帯（2026-10-30〜）。書き込んだ中身を上に出し、紙を揺らす（scripts/request.ts）。PCは出さない ---- */
.rq-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px var(--gr) calc(10px + env(safe-area-inset-bottom, 0px)) var(--gl); background: rgba(255, 255, 255, .97); box-shadow: 0 -16px 36px -26px rgba(34, 30, 27, .7); }
.rq-dock[hidden] { display: none; }
.rq-dock__btn { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 0; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; }
.rq-dock__paper { position: relative; display: grid; align-content: center; gap: 4px; width: 36px; height: 42px; padding: 0 7px; background: var(--paper); box-shadow: 0 2px 8px rgba(34, 30, 27, .18); transform: rotate(-5deg); }
.rq-dock__paper::before { content: ""; position: absolute; top: -5px; left: 9px; width: 18px; height: 8px; background: rgba(226, 211, 186, .9); transform: rotate(-6deg); }
.rq-dock__paper i { display: block; height: 2px; background: var(--wood); opacity: .55; }
.rq-dock__paper i:nth-child(2) { width: 75%; }
.rq-dock__paper i:nth-child(3) { width: 55%; }
.rq-dock__text { display: grid; gap: 2px; min-width: 0; }
.rq-dock__text b { font-family: var(--hand); font-weight: 600; font-size: 15px; }
.rq-dock__text small { font-size: 11.5px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rq-dock__go { padding: 9px 14px; background: var(--ink); color: var(--paper); font-size: 12.5px; letter-spacing: .08em; }
.rq-dock__go::after { content: " ↓"; }
.rq-dock__added { position: absolute; left: var(--gl); right: var(--gr); bottom: calc(100% + 8px); margin: 0; padding: 9px 14px; background: var(--ink); color: var(--paper); font-family: var(--hand); font-size: 14px; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: var(--lift-2); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .25s, transform .25s; }
.rq-dock.is-added .rq-dock__added { opacity: 1; transform: none; }
.rq-dock.is-added .rq-dock__paper { animation: rq-paper .6s ease-out; }
@keyframes rq-paper { 0% { transform: rotate(-5deg) scale(1); } 30% { transform: rotate(4deg) scale(1.18); } 60% { transform: rotate(-8deg) scale(1.05); } 100% { transform: rotate(-5deg) scale(1); } }
.l-page--request .rq-make { padding-bottom: 150px; }
@media (min-width: 991px) {
  .rq-dock { display: none !important; }
  .l-page--request .rq-make { padding-bottom: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .rq-dock.is-added .rq-dock__paper { animation: none; }
  .rq-dock__added { transition: none; }
}

/* ---- 物件リクエスト：エリアの希望（自由に）と、押すと文に足される札（2026-10-30〜） ---- */
.rq-area-note { min-height: 96px; resize: vertical; }
.rq-hints { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.rq-hint { padding: 8px 12px; border: 1px solid var(--faint); background: var(--paper); font: 12.5px/1.2 var(--sans); color: var(--ink); cursor: pointer; transition: background-color .2s, color .2s; }
.rq-hint:hover { background: var(--cream); }
.rq-hint:active { background: var(--ink); color: var(--paper); }

/* ---- 物件リクエスト：家族と相談する口（LINEで送る・コピー）と「最後に、ご連絡先」（2026-10-30〜） ---- */
.rq-share-box { display: grid; gap: 10px; }
.rq-share-box__title { font-family: var(--hand); font-weight: 600; font-size: 16px; color: var(--wood); text-align: center; }
.rq-copy { padding: 12px 18px; border: 1px solid var(--ink); background: var(--paper); font: 500 13.5px/1.2 var(--sans); letter-spacing: .06em; color: var(--ink); cursor: pointer; }
.rq-copy:hover { background: var(--cream); }
.rq-copy__done { padding: 10px 14px; background: var(--ink); color: var(--paper); font-family: var(--hand); font-size: 14px; line-height: 1.6; text-align: center; }
.rq-next { margin-top: 6px; font-family: var(--hand); font-size: 15px; color: var(--sub); text-align: center; }
.rq-next::after { content: " ↓"; }
/* PCはカードが右の列にあり、ご連絡先は左の列で続くので出さない */
@media (min-width: 991px) {
  .rq-next { display: none; }
}

/* ---- 検索結果の0件：条件を1つ外す・この条件のまま担当が探す（2026-10-30〜・計画表の便5・見本＝社内資料/ファミリー0件と前回の条件見本_20261030/） ---- */
.rs-zero { margin-top: 28px; padding: 24px 24px 26px; background: var(--paper); box-shadow: var(--lift-1); }
.rs-zero__none { font-size: 13px; color: var(--sub); }
.rs-zero__title { margin-top: 6px; font-family: var(--serif); font-weight: 700; font-size: 19px; letter-spacing: .08em; }
.rs-zero__title span, .rs-ask__title span { display: inline-block; }
.rs-relax { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.rs-relax button { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; padding: 14px 16px; border: 1px solid var(--faint); background: var(--paper); font: inherit; color: var(--ink); text-align: left; cursor: pointer; transition: border-color .2s; }
.rs-relax button:hover { border-color: var(--ink); }
.rs-relax button:focus-visible { outline: 2px solid var(--wood); outline-offset: 2px; }
.rs-relax__what { font-size: 13.5px; letter-spacing: .04em; line-height: 1.6; }
.rs-relax__n { display: flex; align-items: baseline; gap: 2px; white-space: nowrap; }
.rs-relax__n b { font-family: var(--en); font-weight: 300; font-size: 26px; line-height: 1; }
.rs-relax__n small { font-size: 12px; }
.rs-relax__n i { margin-left: 10px; font-style: normal; color: var(--wood); }
.rs-ask { display: grid; gap: 20px; margin-top: 16px; padding: 26px 24px; background: var(--ink); color: var(--paper); }
.rs-ask__faces { display: flex; }
.rs-ask__faces img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--ink); }
.rs-ask__faces img + img { margin-left: -10px; }
.rs-ask__title { margin-top: 14px; font-family: var(--serif); font-weight: 700; font-size: 19px; line-height: 1.6; letter-spacing: .08em; }
.rs-ask__cond { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.rs-ask__cond span { padding: 5px 10px; border: 1px solid rgba(255, 255, 255, .28); font-size: 12px; letter-spacing: .04em; }
.rs-ask__s { margin-top: 12px; font-size: 12.5px; line-height: 1.9; color: rgba(255, 255, 255, .72); }
.rs-ask__acts { display: grid; gap: 14px; align-content: center; }
.rs-ask__go { display: block; padding: 15px 18px; background: var(--paper); color: var(--ink); text-align: center; font-size: 14px; letter-spacing: .1em; text-decoration: none; }
.rs-ask__sub { justify-self: center; padding-bottom: 2px; border-bottom: 1px solid rgba(255, 255, 255, .5); font-size: 13px; color: var(--paper); text-decoration: none; }
.rs-ask__sub--line::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--line-green); vertical-align: 1px; }
.rs-ask a:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
@media (min-width: 991px) {
  .rs-zero { padding: 28px 30px 30px; }
  .rs-relax { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rs-relax button { grid-template-columns: 1fr; align-content: space-between; min-height: 112px; padding: 16px 18px; }
  .rs-relax__n b { font-size: 30px; }
  .rs-ask { grid-template-columns: minmax(0, 1fr) 280px; align-items: center; gap: 32px; padding: 30px 32px; }
}

/* ---- 前回の条件でさがす（TOP の検索の面・さがすの見出しの下・2026-10-30〜・components/LastSearch.astro） ---- */
.lx { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; margin-top: 16px; padding: 13px 14px 13px 16px; background: var(--paper); box-shadow: var(--lift-1); text-decoration: none; color: var(--ink); }
.lx__k { grid-column: 1; font-size: 11.5px; letter-spacing: .1em; color: var(--wood); }
.lx__v { grid-column: 1; font-size: 14px; letter-spacing: .03em; line-height: 1.6; }
.lx__v span { display: inline-block; }
.lx__v span + span::before { content: "・"; color: var(--mute); }
.lx__go { grid-column: 2; grid-row: 1 / 3; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--faint); border-radius: 50%; font-size: 15px; color: var(--wood); }
.lx:hover .lx__go { border-color: var(--ink); }
.lx:focus-visible { outline: 2px solid var(--wood); outline-offset: 2px; }
.sc-hero .lx { max-width: 460px; }