.eq-tag-strip { background: var(--bg); padding: clamp(28px, 4vw, 44px) 24px clamp(14px, 2vw, 22px); border-bottom: 1px solid var(--bc); } .eq-tag-inner { text-align: left; } .eq-tag-title { font-family: var(--font); font-size: clamp(22px, 3vw, 32px); font-weight:var(--fw-head); letter-spacing:var(--tracking-head); color: var(--ink-1); line-height:var(--leading-head); margin: 0 0 6px; } .eq-tag-sub { font-size: clamp(13px, 1.3vw, 15px); color: var(--ink-3); line-height: 1.55; margin: 0; max-width: 720px; } @media (max-width: 640px) { .eq-tag-strip { padding: 20px 24px 12px; } } .quick-cats { padding: 20px 24px 8px; } .qc-title { font-size: clamp(17px, 1.8vw, 20px); font-weight:var(--fw-head); color: var(--ink-1); margin: 0 0 10px; letter-spacing:var(--tracking-head); } .qc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; } .qc-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 12px; background: var(--bg-card); border: 0; border-radius: var(--r-lg); box-shadow: var(--sh-card); cursor: pointer; transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); text-align: center; min-height: 64px; } .qc-tile:hover { transform: translateY(-2px); box-shadow: var(--sh-lg); background: var(--bg-soft); } .qc-ico { font-size: 26px; line-height: 1; } .qc-lbl { font-size: 12.5px; font-weight: 700; color: var(--ink-1); letter-spacing: -0.005em; } @media (max-width:640px) { .quick-cats { padding: 24px 24px 12px; } .qc-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; } .qc-tile { padding: 16px 6px; min-height: 78px; } .qc-ico { font-size: 20px; } .qc-lbl { font-size: 11px; } } .trust-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; padding: 20px 24px; margin: 8px auto 20px; background: var(--bg-soft); border-radius: var(--r-lg); } .trust-strip .ts-item { text-align: center; padding: 8px 6px; } .ts-num { font-size: clamp(20px, 2.4vw, 28px); font-weight: 800; color: var(--brand-primary); letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; } .ts-lbl { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; letter-spacing: 0.02em; } @media (max-width:640px) { .trust-strip { grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 14px 12px; } .ts-lbl { font-size: 10.5px; } } .hero-stats { margin-top: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .hst { display: inline-flex; align-items: baseline; gap: 4px; font-size: 12px; color: var(--ink-3); white-space: nowrap; } .hst b { font-size: 13px; font-weight: 600; color: var(--ink-2); letter-spacing: -.01em; font-variant-numeric: tabular-nums; display: inline-block; min-width: 2ch; text-align: center; } .hst-sep { color: var(--bc-hover); font-size: 12px; user-select: none; } .hst-star { color: #f5a623; font-size: 12px; margin: 0 1px 0 1px; } @media (max-width: 560px) { .hero-stats { gap: 6px 8px; } .hst { font-size: 11px; } .hst b { font-size: 13px; } } .sponsor-banner { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; background: linear-gradient(105deg, var(--brand-primary-tint) 0%, var(--bg-card) 60%); border: 1px solid var(--bc); border-radius: var(--r-lg); padding: 14px 18px; margin: 0 0 12px; overflow: hidden; isolation: isolate; box-shadow: 0 1px 2px rgba(28,24,20,.04); transition: box-shadow var(--t-std), transform var(--t-std); } .sponsor-banner::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(180deg, var(--brand-primary), var(--brand-primary)); z-index: 1; } .sponsor-banner:hover { box-shadow: 0 10px 28px rgba(28,24,20,.08); transform: translateY(-1px); } .sponsor-banner .sb-logo { width: 56px; height: 56px; border-radius: var(--r); background: var(--bg-card); border: 1px solid var(--bc); display: grid; place-items: center; font-size: 26px; flex: 0 0 auto; box-shadow: 0 2px 6px rgba(28,24,20,.06); } .sponsor-banner .sb-body { min-width: 0; } .sponsor-banner .sb-title { font-size: 15px; font-weight:var(--fw-head); color: var(--ink-1); margin: 0 0 3px; letter-spacing:var(--tracking-head); } .sponsor-banner .sb-sub { font-size: 12px; color: var(--ink-3); margin: 0; line-height: 1.45; overflow: hidden; text-overflow: ellipsis; } .sponsor-banner .sb-cta { flex: 0 0 auto; padding: 10px 20px; border-radius: var(--r-sm); background: var(--brand-primary); color: #fff; font-size: 13px; font-weight: 700; border: 0; cursor: pointer; white-space: nowrap; transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); text-decoration: none; box-shadow: 0 2px 8px rgba(67,83,233,.25); } .sponsor-banner .sb-cta:hover { background: var(--brand-primary-hover); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(67,83,233,.32); } .ad-flag { position: absolute; top: 9px; right: 11px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); background: rgba(255,255,255,.7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border: 1px solid var(--bc); border-radius: var(--radius); padding: 1px 6px; z-index: 2; } @media (max-width: 640px) { .sponsor-banner { grid-template-columns: auto 1fr; gap: 12px; padding: 14px 14px 14px 16px; } .sponsor-banner .sb-cta { grid-column: 1 / -1; text-align: center; } } .listing-card.is-sponsored { border-color: rgba(67,83,233,.28); box-shadow: 0 0 0 1px rgba(67,83,233,.12) inset, var(--sh); } .listing-card.is-sponsored:hover { border-color: rgba(67,83,233,.5); box-shadow: 0 20px 40px rgba(67,83,233,.12), 0 4px 12px rgba(28,24,20,.06); } .listing-card.is-sponsored .listing-cover::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28,24,20,.28) 0%, transparent 38%, transparent 62%, rgba(28,24,20,.42) 100%); z-index: 1; pointer-events: none; } .sponsored-ribbon { position: absolute; top: 10px; left: 10px; z-index: 2; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #1f2937; background: rgba(255,255,255,.82); -webkit-backdrop-filter: saturate(180%) blur(8px); backdrop-filter: saturate(180%) blur(8px); border: 1px solid rgba(255,255,255,.6); border-radius: var(--radius); padding: 3px 10px; box-shadow: 0 2px 8px rgba(28,24,20,.18); } .listing-card.is-sponsored .lc-agent .agency { color: var(--brand-primary); font-weight: 700; } .lc-agent .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } .verify-badge { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: var(--brand-primary); color: #fff; font-size: 9px; font-weight: 900; line-height: 1; vertical-align: middle; margin-left: 3px; flex: 0 0 auto; } .eq-mega-hero { background: var(--bg-soft); } .eq-mega-kicker { display: block; font-family: var(--font); font-weight: 600; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-primary); margin-bottom: 24px; } .eq-mega-h1 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(30px, 4.6vw, 54px); letter-spacing: .06em; line-height: 1.5; } .eq-mega-lead { letter-spacing: .04em; font-size: clamp(15px, 1.6vw, 18px); } .logo { font-family: var(--font-serif-en); font-weight: 600; font-size: 21px; letter-spacing: .14em; } .logo-dot { display: none; } .fs-title, .areas-title, .rv-title, .hero-title, .detail-title { font-family: var(--font-serif); font-weight: 600; letter-spacing: .08em; line-height: 1.5; } .fs-head, .areas-head { border-top: 2px solid var(--brand-primary); padding-top: 16px; } .fs-title, .areas-title { font-size: 22px; } .detail-title { letter-spacing: .06em; font-weight: 600; } .hs-go, .cta-btn { background: var(--ink-1); border-radius: var(--r); letter-spacing: .1em; font-weight: 500; } .hs-go:hover, .cta-btn:hover { background: var(--ink-2); transform: none; box-shadow: none; } .cta-btn.ghost { background: transparent; border: 1px solid var(--bc-hover); } .cta-btn.ghost:hover { background: transparent; border-color: var(--brand-primary); color: var(--brand-primary) !important; transform: none; } .hq-pill, .persona-card, .hs-tab, .hs-tabs, .lang-switch, .lang-btn, .hs-bed-chip { border-radius: var(--r) !important; } .hq-pill { letter-spacing: .06em; } .hq-pill:hover { background: transparent; } .listing-card { border-radius: var(--r-lg); } .listing-card:hover { transform: none; border-color: var(--brand-primary); } .eq-trust-item { letter-spacing: .08em; font-size: 11.5px; } .topbar { background: rgba(255,255,255,.94); } .listing-body h4, .feat-body h4, .unit-flat-card h4 { font-family: var(--font-serif); font-weight:var(--fw-head); letter-spacing:var(--tracking-head); } .area-card:hover, .units-section .unit-card:hover { transform: none; box-shadow: var(--sh); } .area-card:hover img { transform: none; } .units-section .unit-card:hover { border-color: var(--brand-primary); } .eq-mega-hero { text-align: left; padding-bottom: clamp(32px, 5vw, 52px); } .eq-mega-inner { max-width: var(--container); } .eq-mega-lead { margin: 0; } .eq-trust-bar { background: var(--ink-1); border-bottom: 0; } .eq-trust-inner { padding: 20px 24px; gap: 14px 30px; } .eq-trust-label { display: inline-flex; font-family: var(--font); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.72); margin-right: 14px; white-space: nowrap; } .eq-trust-item { color: rgba(255,255,255,.85); letter-spacing: .1em; font-size: 11.5px; } .eq-trust-item:not(:last-child)::after { color: rgba(255,255,255,.25); right: -18px; } @media (max-width: 600px) { .eq-trust-label { width: 100%; justify-content: center; margin-right: 0; } } .hero { background: var(--bg); border-bottom: 1px solid var(--bc); } .hero-search { box-shadow: none; border: 1px solid var(--bc); border-radius: var(--r); padding: 18px 24px 24px; } .hs-tabs { display: flex; width: 100%; background: transparent; padding: 0; gap: 22px; margin-bottom: 18px; border-bottom: 1px solid var(--bc); border-radius: 0 !important; } .hs-tab { padding: 9px 2px 11px; border-radius: 0 !important; letter-spacing: .12em; color: var(--ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; } .hs-tab.active { background: transparent; box-shadow: none; color: var(--ink-1); border-bottom-color: var(--brand-primary); } .hs-label { font-family: var(--font); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; color: var(--ink-3); } .hs-field input { background: transparent; border: 0; border-bottom: 1px solid var(--bc); border-radius: 0; padding: 10px 2px; } .hs-field input:focus { background: transparent; box-shadow: none; border-bottom-color: var(--brand-primary); } .hero-quick { margin-top: 16px; } .hq-label { font-family: var(--font); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; color: var(--ink-3); } .sec-label { display: block; font-family: var(--font); font-weight: 600; font-size: 12px; letter-spacing: .14em; color: var(--brand-primary); margin-bottom: 6px; } .listing-card, .feat-card, .rv-card, .unit-flat-card { border-radius: var(--r); box-shadow: none; } .listing-card:hover, .feat-card:hover, .rv-card:hover, .unit-flat-card:hover { transform: none; box-shadow: none; border-color: var(--brand-primary); } .listing-card.is-sponsored { box-shadow: none; } .listing-card.is-sponsored:hover { box-shadow: none; } .sponsor-banner { border-radius: var(--r); box-shadow: none; } .sponsor-banner:hover { transform: none; box-shadow: none; border-color: var(--brand-primary); } .filter-bar { background: rgba(255,255,255,.97); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } .amenity-chip { border-radius: var(--r) !important; letter-spacing: .04em; } .amenity-chip.on { background: var(--ink-1); border-color: var(--ink-1); box-shadow: none; } .src-seg, .view-toggle { background: transparent; padding: 0; gap: 0; border: 1px solid var(--bc); border-radius: var(--r); overflow: hidden; } .src-seg button, .vt-btn { border-radius: 0; } .src-seg button.active { background: var(--ink-1); box-shadow: none; } .vt-btn.active { box-shadow: none; } .hs-bed-chip.on { background: var(--ink-1); border-color: var(--ink-1); } .af-chip { border-radius: var(--r); } html, body { background: var(--pa-paper, #FCFBF8) !important; color: var(--ink-1); } :root { --bg-soft: #FAFAFA; --bc: rgba(20,17,14,.08); --bc-hover: rgba(20,17,14,.20); } .eq-tag-strip { display: none !important; } .hero { background: #FFFFFF; border-bottom: 0; position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 30%, rgba(67,83,233,.05), transparent 60%), radial-gradient(ellipse at 80% 70%, rgba(199,110,45,.04), transparent 55%); pointer-events: none; z-index: 0; } .hero .hero-inner { position: relative; z-index: 1; text-align: center; } .hero .hero-inner::before { content: none !important; } .hero-inner-head-h1 { word-break: keep-all !important; line-break: strict !important; overflow-wrap: normal !important; text-wrap: balance; } .pl-clarify .pl-key::before, .pl-clarify .pl-key::after { display: none !important; animation: none !important; } .pl-clarify .pl-key { animation: none !important; } .pl-clarify .pl-key { position: relative; display: inline-block; animation: pl-clarify 1100ms cubic-bezier(.2, .7, .3, 1) both; } .pl-clarify .pl-key::before { content: ''; position: absolute; left: 0; right: 0; bottom: .06em; height: .1em; background: linear-gradient(90deg, rgba(67,83,233,.85), rgba(58,168,184,.5)); border-radius: 999px; transform-origin: left center; animation: pl-fill 900ms 700ms cubic-bezier(.2, .7, .3, 1) both; } .pl-clarify .pl-key::after { content: ''; position: absolute; right: -.42em; bottom: .28em; width: .17em; height: .17em; border-radius: 50%; background: rgba(58,168,184,.55); pointer-events: none; animation: pl-bubble 2600ms 1500ms ease-in-out 1 both; } @keyframes pl-clarify { from { filter: blur(9px); opacity: .28; letter-spacing: .04em; } 60% { filter: blur(1.5px); opacity: .85; } to { filter: none; opacity: 1; letter-spacing: inherit; } } @keyframes pl-fill { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } } @keyframes pl-bubble { 0% { transform: translateY(0) scale(.6); opacity: 0; } 18% { opacity: .8; } 70% { transform: translateY(-1.5em) scale(1); opacity: .35; } 100% { transform: translateY(-2.2em) scale(1.1); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .pl-clarify .pl-key, .pl-clarify .pl-key::before, .pl-clarify .pl-key::after { animation: none !important; } .pl-clarify .pl-key::after { opacity: 0; } } .hero-inner-head-sub { font-size: 14px !important; color: #6E675C !important; letter-spacing: 0.02em !important; margin: 0 auto 32px !important; max-width: 720px !important; line-height: 1.6 !important; } .hero .hero-search { max-width: 920px; margin: 0 auto; background: #FFFFFF; border: 1px solid rgba(20,17,14,.10); box-shadow: 0 20px 60px -30px rgba(20,17,14,.30), 0 8px 24px -12px rgba(20,17,14,.10); border-radius: var(--radius); padding: 12px; } .hero .hs-row { gap: 6px; padding: 0; } .hero .hs-field { border: 0; padding: 10px 14px; background: transparent; } .hero .hs-field + .hs-field { border-left: 1px solid rgba(20,17,14,.08); } .hero .hs-label { font-size: 10.5px; letter-spacing: .06em; font-weight: 700; color: #6E675C; text-transform: uppercase; margin-bottom: 4px; display: block; } .hero .hs-field input { font-size: 15px; font-weight: 600; color: #14120E; } .hero .hs-go { min-width: 60px; padding: 0 24px; background: #14120E; border-radius: var(--radius); box-shadow: none; font-weight: 700; font-size: 14px; } .hero .hs-go:hover { background: #4353E9; } .hero .hs-tabs { justify-content: center; margin: 0 0 20px !important; gap: 8px; border-bottom: 0 !important; padding: 0 !important; background: transparent !important; } .hero .hs-tab { border-radius: 999px !important; padding: 9px 24px !important; font-size: 13px !important; font-weight: 700 !important; border: 1px solid rgba(10,10,10,.14) !important; background: transparent !important; color: #0A0A0A !important; margin: 0 !important; letter-spacing: 0 !important; line-height: 1 !important; } .hero .hs-tab.active { background: #0A0A0A !important; color: #FFFFFF !important; border-color: #0A0A0A !important; } .hero .hs-tab:hover:not(.active) { background: rgba(10,10,10,.05) !important; border-color: rgba(10,10,10,.24) !important; } .hero .hs-bed-chips { gap: 4px !important; display: flex !important; flex-wrap: nowrap !important; } .hero .hs-bed-chip { padding: 7px 10px !important; min-width: 34px; font-size: 12.5px !important; font-weight: 600 !important; border-radius: var(--radius) !important; flex-shrink: 0 !important; white-space: nowrap !important; } .hero .hs-field-area { flex: 2.4 !important; } .hero .hs-field-price { flex: 1.4 !important; } .hero .hs-field-bedrooms { flex: 2.2 !important; min-width: 260px !important; } body, input, textarea, select, button, .eq-tag-title, .eq-tag-sub, h1, h2, h3, h4, h5, h6, p, span, div, a, label, .logo, .cta-btn, .detail-title, .detail-tagline, .detail-section h3, .eq-mega-h1, .eq-mega-brand, .eq-mega-kicker, .eq-mega-lead, .listing-body h4, .feat-body h4, .unit-flat-card h4, .section-heading, .sec-label, .fs-title, .areas-title, .rv-title, .hero-title, .detail-title, .msl-name, .msl-price, .tsb-num, .qcb-title, .qcb-lbl, .qc-title, .qc-lbl, .ts-num, .pl-logo, .qcb-title, .filter-input, .filter-select, .amenity-chip, .msl-area, .msl-addr, .msl-stn, .msl-spec, .eq-mpop, .eq-mpop *, .lc-price-row, .lc-price-row *, .hs-tab, .hs-label, .hs-field input, .hq-pill, .hq-label, .hero-inner-head-h1, .hero-inner-head-sub { font-family: 'Plus Jakarta Sans','Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',system-ui,-apple-system,BlinkMacSystemFont,sans-serif !important; } .eq-mega-brand, .eq-mega-h1, .detail-title, .qcb-title, .fs-title, .areas-title, .rv-title { font-weight: 800 !important; } .detail-section h3, .section-heading, .qc-title, .sec-label { font-weight: 700 !important; } .listing-body h4, .feat-body h4, .unit-flat-card h4, .msl-name { font-weight: 700 !important; } .detail-tagline { font-weight: 400 !important; font-style: normal !important; } .eq-tag-title { font-weight:var(--fw-head) !important; } .hs-label, .hq-label { font-weight: 700 !important; } .amenity-chip, .hq-pill, .qcb-lbl, .qc-lbl { font-weight: 600 !important; } .eq-mega-h1, .detail-title { letter-spacing: -0.03em !important; } .detail-title { letter-spacing: -0.025em !important; } .detail-section h3, .qcb-title, .fs-title, .areas-title { letter-spacing:var(--tracking-head) !important; } .listing-body h4, .feat-body h4, .unit-flat-card h4, .msl-name { letter-spacing: -0.01em !important; } .eq-mega-brand, .logo { letter-spacing: 0.04em !important; } .sec-label, .hs-label, .hq-label, .qc-title, .tsb-lbl, .qcb-sub { letter-spacing: 0.06em !important; text-transform: uppercase !important; } .detail-area { letter-spacing: 0.14em !important; text-transform: uppercase !important; } .lc-price-row .price, .msl-price, .tsb-num, .ts-num, .mort-result .value, .inquiry-card .price-display .p, .hst b, .hst { font-variant-numeric: tabular-nums !important; } button svg, a svg { stroke: currentColor; } .detail-content { padding-top: 32px !important; padding-bottom: 96px !important; } .detail-grid { gap: 64px !important; } @media (max-width: 900px) { .detail-grid { gap: 40px !important; grid-template-columns: minmax(0, 1fr) !important; } .detail-content { padding-top: 24px !important; padding-bottom: 64px !important; } } .detail-topbar { padding: 24px 0 14px !important; font-size: 13px; } .detail-topbar a { border-radius: 999px !important; padding: 7px 14px !important; font-weight: 600 !important; border-color: rgba(10,10,10,.10) !important; color: #0A0A0A !important; } .detail-topbar a:hover { background: #0A0A0A !important; color: #FFFFFF !important; border-color: #0A0A0A !important; } .detail-topbar .crumb { font-size: 12px; color: #6E675C; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; } .detail-topbar .crumb-sep { color: rgba(10,10,10,.24); } .detail-lead-badge:not([hidden]) { display: inline-block !important; padding: 5px 14px !important; background: transparent !important; border: 1px solid rgba(10,10,10,.14) !important; border-radius: 999px !important; font-size: 11px !important; font-weight: 700 !important; color: #0A0A0A !important; letter-spacing: 0.10em !important; margin-bottom: 20px !important; } .detail-title { font-family: 'Plus Jakarta Sans','Noto Sans JP',sans-serif !important; font-size: clamp(28px, 3.6vw, 44px) !important; font-weight: 800 !important; letter-spacing: -0.03em !important; line-height: 1.15 !important; margin: 0 0 14px !important; color: #0A0A0A !important; } .detail-area { font-size: 12px !important; color: #6E675C !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; font-weight: 600 !important; margin-bottom: 24px !important; } .detail-tagline { font-family: 'Plus Jakarta Sans','Noto Sans JP',sans-serif !important; font-size: 17px !important; font-style: normal !important; color: #403B33 !important; line-height: 1.65 !important; padding: 0 0 0 20px !important; border-left: 3px solid #0A0A0A !important; margin: 0 0 32px !important; font-weight: 400 !important; } .detail-share { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 10px !important; margin-bottom: 40px !important; padding-bottom: 32px !important; border-bottom: 1px solid rgba(10,10,10,.08) !important; } .detail-share .share-label { font-size: 12px !important; font-weight: 600 !important; color: #6E675C !important; letter-spacing: 0.04em !important; text-transform: uppercase; margin-right: 6px; } .detail-share .share-btn { width: 44px !important; height: 44px !important; border-radius: 50% !important; border: 1px solid rgba(10,10,10,.10) !important; background: #FFFFFF !important; color: #0A0A0A !important; font-size: 15px !important; transition: all .18s !important; } .detail-share .share-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 20px -8px rgba(10,10,10,.20) !important; border-color: #0A0A0A !important; } .detail-section { margin-bottom: 56px !important; } .detail-section h3 { font-family: 'Plus Jakarta Sans','Noto Sans JP',sans-serif !important; font-size: 20px !important; font-weight:var(--fw-head) !important; letter-spacing:var(--tracking-head) !important; color: #0A0A0A !important; margin: 0 0 20px !important; padding: 0 !important; border-bottom: 0 !important; line-height:var(--leading-head) !important; display: flex !important; align-items: baseline !important; gap: 10px !important; } .detail-section h3::before { content: ""; width: 4px; height: 20px; background: #0A0A0A; border-radius: 2px; display: inline-block; flex-shrink: 0; align-self: center; } .detail-section p { font-size: 15px !important; line-height:var(--leading-body) !important; color: #403B33 !important; margin: 0 !important; letter-spacing:var(--tracking-body); } .kv-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important; border-top: 1px solid rgba(10,10,10,.08) !important; } .kv-grid .kv { display: grid !important; grid-template-columns: 140px 1fr !important; align-items: center !important; padding: 14px 4px !important; border-bottom: 1px solid rgba(10,10,10,.08) !important; font-size: 14px !important; gap: 16px; } .kv-grid .kv .k { color: #6E675C !important; font-size: 12.5px !important; font-weight: 600 !important; letter-spacing: 0.02em !important; text-transform: uppercase !important; margin: 0 !important; } .kv-grid .kv .v { color: #0A0A0A !important; font-weight: 600 !important; text-align: left !important; font-size: 14.5px !important; letter-spacing: -0.005em !important; } @media (min-width: 640px) { .kv-grid { grid-template-columns: 1fr 1fr !important; column-gap: 40px !important; row-gap: 0 !important; } } .amenity-list { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; } .amenity-list .a { padding: 8px 14px !important; background: #FFFFFF !important; border: 1px solid rgba(10,10,10,.12) !important; border-radius: 999px !important; font-size: 13px !important; color: #0A0A0A !important; font-weight: 600 !important; letter-spacing: -0.005em !important; } .inquiry-card { border-radius: var(--radius) !important; border: 1px solid rgba(10,10,10,.10) !important; box-shadow: 0 20px 44px -20px rgba(10,10,10,.16) !important; padding: 26px 26px 22px !important; background: #FFFFFF !important; } .inquiry-card .price-display { padding: 0 0 20px !important; margin: 0 0 20px !important; border-bottom: 1px solid rgba(10,10,10,.10) !important; } .inquiry-card .price-display .p { font-size: 30px !important; font-weight: 800 !important; letter-spacing: -0.03em !important; color: #0A0A0A !important; line-height: 1.1 !important; } .inquiry-card .price-display .l { font-size: 11.5px !important; color: #6E675C !important; margin-top: 4px !important; font-weight: 600 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; } .inq-trust { background: rgba(46,125,91,.10) !important; color: #2E7D5B !important; padding: 4px 12px !important; border-radius: 999px !important; font-size: 11.5px !important; font-weight: 700 !important; } .inq-trust-sub { font-size: 12px !important; color: #6E675C !important; line-height: 1.55 !important; margin: 0 0 18px !important; } .inquiry-form input, .inquiry-form textarea { border-radius: var(--radius) !important; border: 1px solid rgba(10,10,10,.12) !important; background: #FAFAFA !important; padding: 13px 14px 13px 38px !important; transition: background .15s, border-color .15s, box-shadow .15s !important; } .inquiry-form input:focus, .inquiry-form textarea:focus { background: #FFFFFF !important; border-color: #0A0A0A !important; box-shadow: 0 0 0 3px rgba(10,10,10,.06) !important; outline: none !important; } .inquiry-form button { border-radius: 999px !important; background: #0A0A0A !important; padding: 15px 24px !important; font-weight: 700 !important; font-size: 14.5px !important; letter-spacing: -0.01em !important; } .inquiry-form button:hover { background: #262626 !important; } .mort-box { background: #FAFAFA !important; border: 1px solid rgba(10,10,10,.08) !important; border-radius: var(--radius) !important; padding: 20px 22px !important; } .mort-field label { font-size: 11.5px !important; color: #6E675C !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; } .mort-field input { border-radius: var(--radius) !important; border: 1px solid rgba(10,10,10,.12) !important; background: #FFFFFF !important; padding: 10px 12px !important; } .mort-result { padding-top: 16px !important; margin-top: 16px !important; border-top: 1px solid rgba(10,10,10,.10) !important; } .mort-result .label { font-size: 11.5px !important; color: #6E675C !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; margin-bottom: 4px !important; } .mort-result .value { font-size: 28px !important; font-weight: 800 !important; color: #0A0A0A !important; letter-spacing: -0.03em !important; line-height: 1.1 !important; } .mort-result .total { font-size: 12.5px !important; color: #6E675C !important; margin-top: 4px !important; } .fp-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; gap: 16px !important; } .fp-grid > * { border-radius: var(--radius) !important; overflow: hidden !important; border: 1px solid rgba(10,10,10,.08) !important; background: #FFFFFF !important; transition: transform .18s, box-shadow .18s !important; } .fp-grid > *:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -12px rgba(10,10,10,.18); } .ph-card, .la-card, .co-card, .pa-box, .cost-box { background: #FAFAFA !important; border: 1px solid rgba(10,10,10,.08) !important; border-radius: var(--radius) !important; padding: 20px 22px !important; } .la-card, .co-card { display: flex !important; align-items: center !important; gap: 16px !important; } .cx-list { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; } .cx-list > * { min-width: 0 !important; } .cx-row > * { min-width: 0; } .cx-list > * { padding: 14px 16px !important; background: #FFFFFF !important; border: 1px solid rgba(10,10,10,.08) !important; border-radius: var(--radius) !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; } .unit-table { border-collapse: separate !important; border-spacing: 0 !important; width: 100%; } .unit-table th { background: #FAFAFA !important; padding: 14px 16px !important; font-size: 11px !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: #6E675C !important; font-weight: 700 !important; border-bottom: 1px solid rgba(10,10,10,.10) !important; text-align: left; } .unit-table td { padding: 14px 16px !important; border-bottom: 1px solid rgba(10,10,10,.08) !important; font-size: 14px !important; color: #0A0A0A !important; } .unit-table tr:hover td { background: #FAFAFA !important; } .filter-bar { position: sticky !important; top: 60px !important; z-index: 30 !important; background: #FFFFFF !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 16px 0 12px !important; margin-bottom: 0 !important; border-bottom: 1px solid rgba(10,10,10,.08) !important; box-shadow: 0 4px 16px -12px rgba(10,10,10,.14) !important; } .filter-row { gap: 10px !important; margin-bottom: 10px !important; align-items: center !important; } .filter-row.secondary { padding-top: 12px !important; border-top: 1px dashed rgba(10,10,10,.08) !important; margin-bottom: 0 !important; gap: 8px !important; } .filter-input, .filter-select { padding: 10px 14px !important; border: 1px solid rgba(10,10,10,.12) !important; border-radius: 999px !important; background: #FFFFFF !important; font-size: 14px !important; color: #0A0A0A !important; height: 42px !important; box-sizing: border-box !important; font-weight: 500 !important; transition: border-color .15s, box-shadow .15s !important; } .filter-input { min-width: 220px !important; flex: 1 !important; max-width: 320px !important; } .filter-input:focus, .filter-select:focus { border-color: #0A0A0A !important; box-shadow: 0 0 0 3px rgba(10,10,10,.06) !important; outline: none !important; } .filter-select { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; padding: 10px 34px 10px 16px !important; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' stroke='%236B6862' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 12px 8px !important; text-overflow: ellipsis; } .filter-select::-ms-expand { display: none; } .filter-row:not(.secondary) .filter-input, .filter-row:not(.secondary) .filter-select, .filter-row:not(.secondary) .price-range input, .filter-row:not(.secondary) .map-view-btn, .filter-row:not(.secondary) .save-search-btn, .filter-row:not(.secondary) .cta-btn, .filter-row:not(.secondary) .fdrop-btn { height: 42px !important; box-sizing: border-box !important; } .amenity-chip { display: inline-flex !important; align-items: center !important; min-height: 34px !important; box-sizing: border-box !important; } .filter-row .filter-divider { height: 24px !important; align-self: center !important; } .filter-row.secondary { align-items: center !important; } .amenity-chip { padding: 8px 16px !important; background: #FFFFFF !important; border: 1px solid rgba(10,10,10,.12) !important; border-radius: 999px !important; font-size: 12.5px !important; color: #0A0A0A !important; cursor: pointer !important; user-select: none !important; transition: all .15s !important; font-weight: 600 !important; letter-spacing: -0.005em !important; line-height: 1 !important; } .amenity-chip.on { background: #0A0A0A !important; color: #FFFFFF !important; border-color: #0A0A0A !important; box-shadow: 0 6px 16px -8px rgba(10,10,10,.30) !important; font-weight: 700 !important; } .amenity-chip:not(.on):hover { border-color: rgba(10,10,10,.28) !important; background: rgba(10,10,10,.03) !important; } .af-chip { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 7px 8px 7px 14px !important; background: #0A0A0A !important; color: #FFFFFF !important; border: 0 !important; border-radius: 999px !important; font-size: 12.5px !important; font-weight: 600 !important; letter-spacing: -0.005em !important; line-height: 1 !important; } .af-chip .x { width: 20px !important; height: 20px !important; border-radius: 50% !important; background: rgba(255,255,255,.20) !important; color: #FFFFFF !important; font-size: 13px !important; } .af-chip .x:hover { background: rgba(255,255,255,.36) !important; transform: scale(1.05); } .map-view-btn { padding: 10px 18px !important; background: #FFFFFF !important; border: 1px solid rgba(10,10,10,.14) !important; border-radius: 999px !important; font-size: 13px !important; color: #0A0A0A !important; font-weight: 700 !important; gap: 8px !important; transition: all .15s !important; } .map-view-btn:hover { background: #0A0A0A !important; color: #FFFFFF !important; border-color: #0A0A0A !important; } .map-view-btn.on { background: #0A0A0A !important; color: #FFFFFF !important; border-color: #0A0A0A !important; } .save-search-btn { padding: 10px 18px !important; background: #FFFFFF !important; border: 1px solid rgba(10,10,10,.14) !important; border-radius: 999px !important; font-size: 13px !important; color: #0A0A0A !important; font-weight: 700 !important; } .save-search-btn:hover { background: #0A0A0A !important; color: #FFFFFF !important; border-color: #0A0A0A !important; } .filter-row .cta-btn { border-radius: 999px !important; padding: 10px 22px !important; font-weight: 700 !important; } .src-seg, .view-toggle { border: 1px solid rgba(10,10,10,.12) !important; border-radius: 999px !important; padding: 3px !important; background: #FAFAFA !important; overflow: hidden !important; height: 42px !important; box-sizing: border-box !important; align-items: center; } .src-seg button, .vt-btn { border-radius: 999px !important; padding: 6px 14px !important; font-size: 12.5px !important; font-weight: 600 !important; color: #6E675C !important; background: transparent !important; } .src-seg button.active, .vt-btn.active { background: #0A0A0A !important; color: #FFFFFF !important; box-shadow: none !important; } .src-seg button:hover:not(.active), .vt-btn:hover:not(.active) { background: rgba(10,10,10,.04) !important; color: #0A0A0A !important; } #f-sort { border-radius: var(--btn-radius) !important; border: 1px solid var(--btn-line) !important; padding: 0 var(--btn-dd-pad-r) 0 var(--btn-dd-pad-l) !important; font-size: var(--btn-fs) !important; font-weight: var(--btn-dd-fw) !important; color: var(--btn-dd-ink) !important; background-color: var(--btn-secondary-bg) !important; background-image: var(--btn-chevron) !important; background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 14px 14px !important; height: var(--btn-h) !important; box-sizing: border-box !important; cursor: pointer; } #f-sort:hover { border-color: var(--btn-line-hover) !important; } @media (max-width:640px) { .filter-bar { padding: 12px 0 8px !important; top: 56px !important; } .filter-row { gap: 6px !important; margin-bottom: 8px !important; } .filter-input, .filter-select, .amenity-chip, .map-view-btn, .save-search-btn { font-size: 12.5px !important; } .filter-input { min-width: 140px !important; } .amenity-chip { padding: 7px 12px !important; } } .hero-map-cta-wrap { display: flex; justify-content: center; margin-top: 20px; } .hero-map-cta { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; background: #FFFFFF; border: 1px solid rgba(10,10,10,.14); border-radius: 999px; color: #0A0A0A; font-size: 13.5px; font-weight: 700; cursor: pointer; letter-spacing: -0.005em; transition: background .18s, border-color .18s, box-shadow .18s, transform .18s; } .hero-map-cta svg { flex-shrink: 0; } .hero-map-cta .hmc-arrow { font-size: 15px; color: #6E675C; transition: transform .18s, color .18s; } .hero-map-cta:hover { background: #0A0A0A; border-color: #0A0A0A; color: #FFFFFF; transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgba(10,10,10,.28); } .hero-map-cta:hover .hmc-arrow { color: #FFFFFF; transform: translateX(3px); } @media (max-width: 640px) { .hero-map-cta { padding: 10px 18px; font-size: 12.5px; } } .hero { min-height: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; } .hero .hero-inner { padding: 0 24px; width: 100%; max-width: var(--container); } .featured-section { padding: 28px 24px 24px !important; margin-top: 0 !important; } .areas-section { padding: 24px 24px 48px !important; margin-top: 0 !important; } .recently-viewed { padding: 24px var(--plh-pad) 36px !important; margin-top: 0 !important; } .filter-bar { margin-top: 0 !important; } #view-list > .hero + * { margin-top: 0 !important; } .hero-inner-head-sub { margin: 0 auto 40px !important; } .hero .hero-stats { margin-top: 32px !important; gap: 28px !important; } .hero .hero-quick { margin-top: 24px !important; } @media (max-width: 780px) { .hero { min-height: auto !important; } .hero-inner-head-sub { margin: 0 auto 28px !important; } .featured-section { padding: 20px 20px 16px !important; } } .popular-areas-inline { display: flex; align-items: center; justify-content: center; gap: 8px 12px; flex-wrap: wrap; margin: 24px auto 0; max-width: 900px; } .popular-areas-inline .pai-lbl { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #6E675C; font-weight: 700; } .popular-areas-inline a { display: inline-flex; align-items: center; padding: 6px 14px; background: transparent; border: 1px solid rgba(10,10,10,.14); border-radius: 999px; color: #0A0A0A; font-size: 13px; font-weight: 600; text-decoration: none; transition: background .15s, border-color .15s; } .popular-areas-inline a:hover { background: #0A0A0A; border-color: #0A0A0A; color: #FFFFFF; } .areas-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; gap: 16px !important; } .areas-grid .area-card, .areas-grid > * { aspect-ratio: 4/3 !important; height: auto !important; min-height: 0 !important; } .areas-grid .area-card img, .areas-grid > * img { width: 100% !important; height: 100% !important; object-fit: cover !important; } .rv-strip { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; gap: 12px !important; overflow: visible !important; } .rv-card { min-height: 0 !important; height: auto !important; } .rv-card .cover, .rv-card img { aspect-ratio: 4/3 !important; width: 100% !important; height: auto !important; object-fit: cover !important; } .fs-strip { display: flex !important; gap: 18px !important; overflow-x: auto !important; align-items: stretch !important; } .feat-card { display: flex !important; flex-direction: column !important; height: 100% !important; border-radius: var(--radius) !important; overflow: hidden; } .feat-card .feat-cover, .feat-card > a > div:first-child { aspect-ratio: 4/3 !important; flex-shrink: 0; } .feat-card .feat-body { flex: 1 1 auto; display: flex !important; flex-direction: column !important; padding: 14px 16px 16px !important; gap: 6px !important; } .feat-card h4 { font-size: 14.5px !important; font-weight:var(--fw-head) !important; letter-spacing:var(--tracking-head) !important; line-height: 1.35 !important; margin: 0 !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } .feat-card h4 .lc-name-ja { grid-row: 2 !important; display: -webkit-box !important; -webkit-line-clamp: 1 !important; -webkit-box-orient: vertical !important; font-size: 11px !important; font-weight: 500 !important; color: #6E675C !important; margin: 2px 0 0 !important; line-height: 1.4 !important; overflow: hidden !important; } .feat-card .feat-area { font-size: 12px !important; color: #6E675C !important; line-height: 1.5 !important; margin: 0 !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } .feat-card .feat-area + .feat-area { font-size: 11.5px !important; color: #6E675C !important; line-height: 1.4 !important; margin: 0 !important; -webkit-line-clamp: 2 !important; } .feat-card .feat-meta { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; padding-top: 12px !important; border-top: 1px solid rgba(10,10,10,.08) !important; margin-top: auto !important; } .feat-card .feat-meta > b { font-size: 13px !important; font-weight: 800 !important; color: #0A0A0A !important; margin: 0 !important; letter-spacing: -0.005em; flex-shrink: 0; } .feat-card .feat-meta > span:not(.price) { display: none !important; } .feat-card .feat-meta .price { font-size: 16.5px !important; font-weight: 800 !important; color: #0A0A0A !important; text-align: right !important; line-height: 1.15 !important; margin: 0 !important; white-space: nowrap !important; display: inline-flex !important; align-items: baseline !important; gap: 2px !important; } .feat-card .feat-meta .price span { font-size: 10.5px !important; color: #6E675C !important; font-weight: 600 !important; } .hero .hero-quick { display: flex !important; align-items: center; justify-content: center; gap: 8px 10px; flex-wrap: wrap; margin-top: 22px; } .hero .hq-label { display: inline-flex !important; font-size: 11px !important; letter-spacing: .16em !important; text-transform: uppercase; color: #6E675C !important; font-weight: 700 !important; margin-right: 4px; } .hero .hq-pill { display: inline-flex !important; align-items: center; padding: 6px 14px !important; background: transparent !important; border: 1px solid rgba(10,10,10,.14) !important; border-radius: 999px !important; color: #0A0A0A !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .hero .hq-pill:hover { background: #0A0A0A !important; border-color: #0A0A0A !important; color: #FFFFFF !important; } .hero .hero-stats { justify-content: center; margin-top: 20px; gap: 16px; } .hero .hst { font-size: 12px; color: #6E675C; } .hero .hst b { font-size: 15px; color: #14120E; } .quick-cats { padding: 56px 24px 20px; max-width: var(--container); margin: 0 auto; } .qc-title { text-align: center; font-size: clamp(20px, 2.4vw, 26px); font-weight:var(--fw-head); margin: 0 0 4px; color: #14120E; letter-spacing:var(--tracking-head); } .quick-cats::after { display: none; } .quick-cats > .qc-grid + * { display: none; } .quick-cats::before { content: "目的から絞り込む"; display: block; text-align: center; font-size: 12px; color: #6E675C; margin-bottom: 24px; letter-spacing: 0.02em; } :lang(en) .quick-cats::before, html[lang="en"] .quick-cats::before { content: "Browse by category"; } .qc-grid { gap: 12px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .qc-tile { background: #FFFFFF; border: 1px solid rgba(20,17,14,.08); box-shadow: none; padding: 24px 12px; border-radius: var(--radius); min-height: 108px; transition: border-color .18s, transform .18s, box-shadow .18s; } .qc-tile:hover { border-color: rgba(67,83,233,.35); background: #FFFFFF; transform: translateY(-3px); box-shadow: 0 10px 28px -14px rgba(20,17,14,.18); } .qc-ico { font-size: 32px; margin-bottom: 4px; } .qc-lbl { font-size: 13px; font-weight: 700; color: #14120E; } .trust-strip { background: #FFFFFF; border: 1px solid rgba(20,17,14,.08); border-radius: var(--radius); margin: 20px auto 48px; max-width: var(--container); } .ts-num { color: #14120E; font-weight: 900; } .ts-lbl { color: #6E675C; } .featured-section, .areas-section { background: #FFFFFF; padding: 48px 24px; max-width: var(--container); margin: 0 auto; } .fs-title, .areas-title { font-family: 'Plus Jakarta Sans','Noto Sans JP',sans-serif; font-size: clamp(20px, 2.4vw, 28px); font-weight:var(--fw-head); letter-spacing:var(--tracking-head); color: #14120E; } .fs-sub, .areas-sub { color: #6E675C; font-size: 13.5px; } .sec-label { font-size: 10.5px; letter-spacing: .28em; color: #6E675C; font-weight: 700; } .filter-bar { background: rgba(255,255,255,.95); border-bottom: 1px solid rgba(20,17,14,.08); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); padding: 12px 0; } .filter-input, .filter-select { background: #FFFFFF; border: 1px solid rgba(20,17,14,.10); border-radius: var(--radius); } .listing-card { background: #FFFFFF; border: 0; box-shadow: 0 1px 3px rgba(20,17,14,.06); border-radius: var(--radius); overflow: hidden; } .listing-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -18px rgba(20,17,14,.22); } .listing-cover { aspect-ratio: 4/3 !important; border-radius: 0; } .listing-cover img { transition: transform .5s ease; } .listing-card:hover .listing-cover img { transform: scale(1.04); } .listing-body { padding: 14px 16px 16px !important; } .listing-body h4 { font-size: 15.5px !important; font-weight:var(--fw-head) !important; letter-spacing:var(--tracking-head) !important; } .lc-price-row .price { font-size: 20px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; } .lc-spec-row { border: 0 !important; padding: 8px 0 0 !important; margin: 6px 0 0 !important; font-size: 12.5px !important; color: #6E675C !important; } .lc-agent { display: none !important; } .eq-badge { border-radius: 999px !important; font-size: 10px !important; } .listings-grid { gap: 20px; } .pl-footer { background: #FAFAFA; } .detail-hero { height: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; } .detail-content { padding-top: 32px !important; padding-bottom: 60px !important; } .detail-section { margin-bottom: 40px !important; } .cta-btn, .btn, .hs-go, .hs-tab, .lmn-cta, .rv-clear { border-radius: 999px !important; } .quick-cats[hidden], .trust-strip[hidden], section.trust-strip.container[hidden] { display: none !important; } .hero .hero-stats { justify-content: center; gap: 24px; margin-top: 28px !important; } .hero .hst { font-size: 13px; } .hero .hst b { font-size: 16px; font-weight: 800; } .hero .hst-sep { color: #C4BFB6; } :root { --brand-primary: #4353E9 !important; --brand-primary-hover: #3538B8 !important; --brand-primary-tint: rgba(67,83,233,.06) !important; --brand-primary-subtle: rgba(67,83,233,.12) !important; --brass: #4353E9 !important; --brand-grad: linear-gradient(135deg, #8B5CF6 0%, #4F6AF6 55%, #38BDF8 100%) !important; --orange: #4353E9 !important; } .hs-go { background: #4353E9 !important; color: #FFFFFF !important; } .hs-go:hover { background: #3538B8 !important; } .hs-tab.active { background: #4353E9 !important; border-color: #4353E9 !important; } .hs-bed-chip.on, .amenity-chip.on { background: #4353E9 !important; border-color: #4353E9 !important; } .src-seg button.active { background: #4353E9 !important; } .pl-logo::before, .logo-dot { background: #4353E9 !important; } .pl-newsletter button { background: #4353E9 !important; } .pl-newsletter button:hover { background: #3538B8 !important; } .pl-social a:hover { background: #4353E9 !important; border-color: #4353E9 !important; } .lc-price-row .price { color: #4353E9 !important; } .list-pagination button.active { background: #4353E9 !important; border-color: #4353E9 !important; } .list-more-notice .lmn-cta { background: #4353E9 !important; } .list-more-notice .lmn-cta:hover { background: #3538B8 !important; } .trust-strip .ts-num, .tsb-num { color: #4353E9 !important; } .detail-hero-overlay .hero-badge, .eq-badge, .filter-input:focus, .filter-select:focus { border-color: #4353E9 !important; } .inquiry-card { border-color: rgba(10,10,10,.10) !important; } .eq-badge.mm2h { background: #4353E9 !important; color: #FFFFFF !important; } .eq-badge.expat-hub, .eq-badge.furnished, .eq-badge.jp-staff { background: rgba(10,10,10,.06) !important; color: #4353E9 !important; border-color: rgba(10,10,10,.15) !important; } .hero::before { background: radial-gradient(ellipse at 30% 30%, rgba(10,10,10,.04), transparent 60%), radial-gradient(ellipse at 70% 70%, rgba(10,10,10,.03), transparent 55%) !important; } .hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; } .hero .container { padding: 0 24px; width: 100%; } .hero .hero-inner { max-width: 1100px; margin: 0 auto; } .hero::after { position: static !important; margin-bottom: 12px !important; opacity: .8; } .hero .hero-inner::before { font-size: clamp(36px, 6vw, 72px) !important; font-weight: 800 !important; letter-spacing: -0.035em !important; margin: 8px auto 16px !important; } .hero .hero-inner::after { font-size: clamp(14px, 1.4vw, 16px) !important; margin-bottom: 44px !important; } .hero .hero-search { box-shadow: 0 40px 100px -40px rgba(10,10,10,.35), 0 12px 40px -18px rgba(10,10,10,.15) !important; } .hero::before { background: radial-gradient(ellipse 800px 400px at 20% 20%, rgba(10,10,10,.05), transparent 60%), radial-gradient(ellipse 700px 500px at 80% 80%, rgba(10,10,10,.04), transparent 55%), linear-gradient(180deg, #FAFAFA 0%, #FFFFFF 100%) !important; } @media (max-width: 780px) { .hero { min-height: 88vh; } .hero .hero-inner::before { font-size: clamp(28px, 8vw, 42px) !important; } .hero .hero-inner::after { margin-bottom: 24px !important; } } .hero .hero-stats { margin-top: 40px !important; } .quick-cats-bottom { padding: 28px 24px 8px; max-width: var(--container); margin: 12px auto 0; text-align: left; } .qcb-title { font-size: clamp(20px, 2.2vw, 26px); font-weight:var(--fw-head); color: #0A0A0A; margin: 0 0 4px; letter-spacing:var(--tracking-head); } .qcb-sub { font-size: 13px; color: #6E675C; margin: 0 0 16px; letter-spacing: 0.005em; } .qcb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 14px; } .qcb-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 16px; background: #FFFFFF; border: 1px solid rgba(10,10,10,.08); border-radius: var(--radius); text-decoration: none; color: #0A0A0A; transition: transform .18s, border-color .18s, box-shadow .18s; position: relative; } .qcb-tile:hover { transform: translateY(-4px); border-color: #0A0A0A; box-shadow: 0 20px 40px -20px rgba(10,10,10,.20); } .qcb-tile::after { content: "→"; position: absolute; right: 16px; bottom: 14px; font-size: 14px; color: #6E675C; transition: transform .18s, color .18s; } .qcb-tile:hover::after { color: #0A0A0A; transform: translateX(4px); } .qcb-ico { font-size: 30px; line-height: 1; } .qcb-lbl { font-size: 14px; font-weight: 700; color: #0A0A0A; letter-spacing: -0.008em; } @media (max-width:640px) { .quick-cats-bottom { padding: 48px 20px 12px; text-align: left; } .qcb-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .qcb-tile { padding: 18px 16px; } .qcb-ico { font-size: 24px; } .qcb-lbl { font-size: 13px; } } .trust-strip-bottom { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 20px 24px 24px; max-width: var(--container); margin: 12px auto 8px; background: #FFFFFF; } .tsb-item { text-align: left; padding: 16px 18px; border: 1px solid rgba(10,10,10,.08); border-radius: var(--radius); transition: border-color .18s, box-shadow .18s, transform .18s; } .tsb-item:hover { border-color: rgba(10,10,10,.20); box-shadow: 0 12px 32px -16px rgba(10,10,10,.16); transform: translateY(-2px); } .tsb-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .tsb-ico { width: 34px; height: 34px; border-radius: var(--radius); background: #0A0A0A; color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .tsb-ico svg { width: 22px; height: 22px; } .tsb-num { font-family: 'Plus Jakarta Sans','Noto Sans JP',sans-serif; font-size: clamp(30px, 3.2vw, 40px); font-weight: 900; color: #0A0A0A; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; } .tsb-num span { font-size: 0.55em; font-weight: 800; margin-left: 1px; color: #0A0A0A; opacity: .9; } .tsb-lbl { font-size: 13.5px; color: #0A0A0A; margin-top: 8px; font-weight: 700; letter-spacing: -0.005em; } .tsb-desc { font-size: 12.5px; color: #6E675C; margin-top: 8px; line-height: 1.55; letter-spacing: 0.005em; } @media (max-width:900px) { .trust-strip-bottom { grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 40px 20px; } } @media (max-width:520px) { .trust-strip-bottom { grid-template-columns: 1fr; padding: 28px 16px; } .tsb-item { padding: 20px 18px; } .tsb-ico { width: 36px; height: 36px; margin-bottom: 14px; } } .no-bait { max-width: var(--container); margin: 8px auto 40px; padding: 32px 24px 36px; background: var(--bg-soft, #F7F8FA); border: 1px solid var(--bc, #E3E6EC); border-radius: var(--radius); } .nb-title { font-size: clamp(20px, 2.4vw, 26px); font-weight:var(--fw-head); letter-spacing:var(--tracking-head); color: var(--ink-1, #0A0A0A); margin: 0 0 10px; } .nb-lead { font-size: 16px; line-height: 1.85; color: var(--ink-2, #3B4250); margin: 0 0 22px; } .no-bait ol.nb-list { list-style: none; counter-reset: nb; margin: 0; padding: 0; display: grid; gap: 18px; } .no-bait ol.nb-list > li { counter-increment: nb; position: relative; padding-left: 46px; } .no-bait ol.nb-list > li::before { content: counter(nb); position: absolute; left: 0; top: 1px; width: 30px; height: 30px; border-radius: 50%; background: #4353E9; color: #fff; font-size: 15px; font-weight: 800; display: grid; place-items: center; } .no-bait ol.nb-list strong { display: block; font-size: 17px; font-weight: 700; line-height: 1.6; color: var(--ink-1, #0A0A0A); margin-bottom: 5px; } .no-bait ol.nb-list span { display: block; font-size: 16px; line-height: 1.85; color: var(--ink-2, #3B4250); } .nb-honest { margin: 26px 0 0; padding: 18px 20px; background: #fff; border-left: 3px solid #4353E9; border-radius: 0 var(--radius) var(--radius) 0; font-size: 15.5px; line-height: 1.9; color: var(--ink-2, #3B4250); } @media (max-width:520px) { .no-bait { padding: 26px 18px 28px; margin: 8px 12px 32px; border-radius: var(--radius); } .no-bait ol.nb-list > li { padding-left: 40px; } .no-bait ol.nb-list > li::before { width: 27px; height: 27px; font-size: 14px; } } .pl-footer { margin-top: 80px; padding: 56px 24px 32px; background: var(--bg-soft); border-top: 1px solid var(--bc); } .pl-footer-inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 48px; } .pl-footer-col h4 { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; } .pl-footer-col .pl-logo { font-family: 'Plus Jakarta Sans','Noto Sans JP',sans-serif; font-weight: 600; font-size: 18px; letter-spacing: 0.04em; color: var(--ink-1); margin-bottom: 12px; display: inline-flex; align-items: center; gap: 8px; } .pl-footer-col .pl-logo::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-primary); } .pl-footer-col p, .pl-footer-col li { font-size: 13px; line-height: 1.7; color: var(--ink-3); margin: 0 0 6px; } .pl-footer-col ul { list-style: none; margin: 0; padding: 0; } .pl-footer-col a { color: var(--ink-2); transition: color var(--t-fast); } .pl-footer-col a:hover { color: var(--ink-1); } .pl-newsletter { display: flex; gap: 8px; margin-top: 14px; } .pl-newsletter input { flex: 1; padding: 10px 14px; border: 1px solid var(--bc); border-radius: var(--r-pill); font-size: 13px; background: var(--bg-card); color: var(--ink-1); } .pl-newsletter input:focus { outline: none; border-color: var(--brand-primary); } .pl-newsletter button { padding: 10px 18px; border: 0; background: var(--brand-primary); color: #fff; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; cursor: pointer; transition: background var(--t-fast); } .pl-newsletter button:hover { background: var(--brand-primary-hover); } .pl-social { display: flex; gap: 10px; margin-top: 12px; } .pl-social a { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg-card); color: var(--ink-2); font-size: 15px; transition: background var(--t-fast), color var(--t-fast); border: 1px solid var(--bc); } .pl-social a:hover { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); } .pl-footer-bottom { max-width: var(--container); margin: 40px auto 0; padding-top: 20px; border-top: 1px solid var(--bc); display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 11.5px; color: var(--ink-4); flex-wrap: wrap; } .pl-footer-bottom a { color: var(--ink-4); margin-left: 16px; } .pl-footer-bottom a:hover { color: var(--ink-1); } @media (max-width: 780px) { .pl-footer { padding: 40px 20px 24px; margin-top: 48px; } .pl-footer-inner { grid-template-columns: 1fr; gap: 32px; } .pl-footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; } .pl-footer-bottom > div:last-child a { margin: 0 12px 0 0; } } .map-modal { top: 62px; } @media (max-width: 500px) { .map-modal { top: 56px; } } .pl-anim [data-anim]{opacity:0} .pl-anim [data-anim][data-anim-done]{opacity:1} @media(prefers-reduced-motion:reduce){.pl-anim [data-anim]{opacity:1!important}} .pl-i{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.18em;flex:0 0 auto} .pl-i-lg{width:28px;height:28px} .qc-ico .pl-i{width:22px;height:22px;vertical-align:middle} .vcard .ic .pl-i{width:26px;height:26px} .listings-grid:not(.view-list) > .listing-card { align-self: stretch; } .listings-grid:not(.view-list) .listing-body .area { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.45; max-height: 2.9em; overflow: hidden; } .listings-grid:not(.view-list) .lc-units-hint { order: 1; } .listings-grid:not(.view-list) .lc-spec-row { order: 2; margin-top: auto !important; } .sp-cover { background: var(--ink-1); overflow: hidden; } .sp-plate { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 26px 24px; background: var(--ink-1); color: #FFFFFF; } .sp-plate .sp-mark { color: rgba(255,255,255,.62); line-height: 0; } .sp-plate .sp-mark svg { width: 26px !important; height: 26px !important; margin: 0 !important; vertical-align: top !important; } .sp-plate .sp-word { font-family: var(--font); font-size: clamp(24px, 3.1vw, 33px); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; color: #FFFFFF; } .sp-plate .sp-word b { display: block; font-weight: 800; } .sp-plate .sp-rule { width: 40px; height: 2px; background: rgba(255,255,255,.5); } .listing-card.is-sponsored .sp-plate::before { content: none; } .sponsor-banner .sb-logo.sb-plate { background: var(--ink-1); color: #FFFFFF; border: 0; font-family: var(--font); font-weight: 800; font-size: 17px; letter-spacing: -.02em; } .listing-card.is-sponsored .lc-agent { display: flex !important; } .listing-card.is-sponsored .lc-agent .ctas .cta.wa { background: var(--ink-1); border-color: var(--ink-1); color: #FFFFFF; } h1,h2,h3,h4,.hero h1,.head h1{text-wrap:balance} p,li,dd,figcaption,.sub,.lead,.ex{text-wrap:pretty} :lang(ja) h1,:lang(ja) h2,:lang(ja) h3,:lang(ja) h4,:lang(ja) .sub,:lang(ja) .lead{word-break:auto-phrase} .nbk{white-space:nowrap} .listing-body .area, .feat-area, .feat-card .feat-area, .feat-card .feat-area + .feat-area { font-size: 14px !important; line-height: 1.55 !important; } .lc-price-row .price-jpy { font-size: 14px !important; } .listing-body h4 .lc-name-ja, .feat-body h4 .lc-name-ja, .feat-card h4 .lc-name-ja { font-size: 14px !important; line-height: 1.4 !important; } .area-card .tagline { font-size: 14px !important; line-height: 1.55 !important; } .hs-label, .hero .hs-label { font-size: 14px !important; letter-spacing: .02em !important; } .sponsor-banner .sb-sub { font-size: 14px !important; line-height: 1.6 !important; } .qcb-sub { font-size: 14px !important; } @media (max-width: 420px) { .areas-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; padding: 0 16px !important; } .areas-grid .area-card, .areas-grid > * { aspect-ratio: 4/3 !important; } .area-card .tagline { display: none !important; } } @media (max-width: 980px) { .filter-bar { position: static !important; top: auto !important; } } @media (max-width: 640px) { .filter-input, .filter-select, .amenity-chip, .map-view-btn, .save-search-btn { font-size: 14px !important; } .filter-input { font-size: 16px !important; } } .area-card.no-photo { background: #FFFFFF; border: 1px solid rgba(20,17,14,.14); } .area-card.no-photo::before { content: none; } .area-card.no-photo::after { content: none; } .area-card.no-photo { display: flex; align-items: flex-end; } .area-card.no-photo .area-card-body { position: static; width: 100%; padding: 16px; } .area-card.no-photo .name { color: #14120E; text-shadow: none; } .area-card.no-photo .tagline { color: rgba(20,17,14,.62); text-shadow: none; } .ua-grid { display: grid; gap: 8px; } .ua-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--bc); border-radius: var(--r); background: var(--bg-card); } .ua-row.on { border-color: var(--brand-primary); background: rgba(67,83,233,.04); } .ua-ph { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: 0 0 52px; border: 1px solid var(--bc); } .ua-info { flex: 1 1 auto; min-width: 0; } .ua-nm { font-size: 14.5px; font-weight: 700; color: var(--ink-1); } .ua-vf { color: var(--green); font-weight: 700; } .ua-cur { font-size: 10.5px; font-weight: 700; color: #fff; background: var(--brand-primary); border-radius: 999px; padding: 1px 8px; margin-left: 4px; vertical-align: middle; } .ua-co { font-size: 12px; color: var(--ink-3); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ua-meta { display: flex; gap: 10px; font-size: 11.5px; color: var(--ink-3); margin-top: 4px; flex-wrap: wrap; } .ua-right { text-align: right; flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; } .ua-price { font-size: 15px; font-weight: 800; color: var(--ink-1); white-space: nowrap; } .ua-go { font-size: 12px; font-weight: 700; color: var(--brand-primary); text-decoration: none; border: 1px solid var(--bc); border-radius: 999px; padding: 5px 12px; white-space: nowrap; } .ua-go:hover { background: var(--bg-soft); } @media (max-width: 560px) { .ua-row { flex-wrap: wrap; } .ua-right { flex-basis: 100%; flex-direction: row; justify-content: space-between; align-items: center; } } .la-multi { display: grid; gap: 10px; background: transparent !important; border: 0 !important; padding: 0 !important; } .la-multi .la-row { display: flex; align-items: center; gap: 16px; background: #FAFAFA; border: 1px solid rgba(10,10,10,.08); border-radius: var(--radius); padding: 16px 18px; } .la-multi .la-row:first-child { border-left: 3px solid #4353E9; } .la-multi .la-avatar { width: 72px; height: 72px; border-radius: 50%; flex: 0 0 auto; overflow: hidden; } .la-multi .la-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .la-multi .la-info { flex: 1 1 auto; min-width: 0; } .la-multi .la-info .lbl { display: flex; align-items: center; gap: 6px; min-height: 0; margin-bottom: 4px; } .la-multi .la-info .lbl:empty { display: none; } .la-multi .la-info .name { font-size: 19px; font-weight: 800; color: var(--ink-1); letter-spacing: -.01em; line-height: 1.3; } .la-multi .la-info .meta { font-size: 14px; color: var(--ink-3); display: flex; gap: 10px; flex-wrap: wrap; } .la-multi .la-info .meta:empty { display: none; } .la-badge { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; } .la-badge-excl { background: #14120E; color: #fff; } .la-badge-cert { background: rgba(67,83,233,.10); color: #1A3F63; } .la-stars { font-size: 13px; color: #B8860B; letter-spacing: .5px; } .la-stars-n { margin-left: 4px; color: var(--ink-3); font-weight: 700; } .la-cnt { font-size: 14px; color: var(--ink-4); } .la-multi .la-actions { flex: 0 0 auto; } @media (max-width: 560px) { .la-multi .la-row { gap: 12px; } .la-multi .la-avatar { width: 60px; height: 60px; } } .lst-rail-wrap { display: block; } .lst-rail { display: none; } @media (min-width: 1360px) { .lst-rail-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; align-items: start; } .lst-main { min-width: 0; } .lst-rail { display: block; align-self: start; } } .lst-ad { display: block; margin-bottom: 16px; border: 1px solid var(--bc); border-radius: var(--radius); overflow: hidden; background: var(--bg-card); text-decoration: none; color: inherit; transition: box-shadow .16s, transform .16s; } .lst-ad:hover { box-shadow: 0 10px 28px rgba(28,24,20,.10); transform: translateY(-1px); } .lst-ad-img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: #14120E; } .lst-ad-body { padding: 14px 16px 16px; } .lst-ad-flag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--ink-4); border: 1px solid var(--bc); border-radius: 999px; padding: 2px 9px; margin-bottom: 8px; } .lst-ad-title { font-size: 15px; font-weight:var(--fw-head); color: var(--ink-1); margin: 0 0 5px; line-height:var(--leading-head); } .lst-ad-sub { font-size: 14px; color: var(--ink-3); margin: 0 0 12px; line-height: 1.55; } .lst-ad-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: var(--radius); background: #14120E; color: #fff; font-size: 14px; font-weight: 700; } .lst-ad-cta:hover { background: #2b2620; } .unit-flat-card.no-cover .cover { display: none; } .unit-flat-card.no-cover { border-left: 3px solid var(--brand-primary, #4353E9); } .unit-flat-card.no-cover .body { padding-left: 2px; } .hs-fields, .hero-search-fields, .hs-row { align-items: start !important; } .hs-label { min-height: 2.6em; display: flex; align-items: flex-end; line-height: 1.3; } .hs-bed-chips { display: flex; align-items: center; min-height: 46px; } .hs-bed-chip { min-height: 38px; } .hero .hero-stats { margin: 0; } .fb-tabs { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; margin: 0 0 10px; } .fb-tabs .hs-tabs { display: inline-flex; width: auto; margin: 0; padding: 3px; gap: 2px; border-bottom: 0; background: #FAFAFA; border: 1px solid rgba(10,10,10,.12); border-radius: 999px !important; height: 42px; box-sizing: border-box; align-items: center; } .fb-tabs .hs-tab { border-radius: 999px !important; padding: 6px 16px; margin: 0; border-bottom: 0; font-size: 13px !important; letter-spacing: 0; min-height: 34px; display: inline-flex; align-items: center; } .fb-tabs .hs-tab.active { background: #0A0A0A; color: #FFFFFF; } @media (max-width: 640px) { .fb-tabs { gap: 8px; } .fb-tabs .hs-tab, .fb-tabs .src-seg button { padding: 6px 11px !important; font-size: 12px !important; } } .listing-card .lc-agent { margin-top: auto; } .eq-login-ov { position: fixed; inset: 0; z-index: 100001; background: rgba(28,24,20,.5); display: flex; align-items: center; justify-content: center; padding: 20px; } .eq-login-box { position: relative; width: 100%; max-width: 400px; background: var(--bg-card, #fff); border-radius: var(--radius); padding: 30px 26px 26px; box-shadow: 0 24px 60px rgba(28,24,20,.25); } .eqlg-close { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border: 0; background: transparent; font-size: 22px; color: var(--ink-3); cursor: pointer; } .eqlg-btn { width: 100%; margin-top: 12px; padding: 13px; font-size: 14px; font-weight: 700; background: var(--ink-1, #1C1814); color: #fff; border: 0; border-radius: 999px; cursor: pointer; } .eqlg-btn:disabled { opacity: .5; } .eq-stars { display: inline-flex; gap: 2px; } .eq-star { border: 0; background: transparent; font-size: 26px; line-height: 1; color: #D8D3CA; cursor: pointer; padding: 2px; min-width: 34px; min-height: 34px; } .eq-star.on { color: #FFB400; } .listing-badge.lc-seen { background: rgba(28,24,20,.62); color: #fff; } .lc-seen-inline { font-size: 11px; font-weight: 700; color: var(--green); white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .eq-login-ov, .eq-login-box { transition: none !important; animation: none !important; } } .eq-mp-ov { position: fixed; inset: 0; z-index: 100003; background: rgba(28,24,20,.5); display: flex; justify-content: flex-end; } .eq-mp-panel { position: relative; width: 100%; max-width: 440px; height: 100%; background: var(--bg-card, #fff); box-shadow: -18px 0 60px rgba(28,24,20,.22); display: flex; flex-direction: column; } .eq-mp-head { display: flex; align-items: center; gap: 10px; padding: 18px 20px 14px; border-bottom: 1px solid var(--bc); flex: 0 0 auto; } .eq-mp-head h3 { margin: 0; font-size: 17px; color: var(--ink-1); } .eq-mp-who { font-size: 12px; color: var(--ink-3); margin-left: auto; text-align: right; line-height: 1.4; } .eq-mp-close { width: 44px; height: 44px; border: 0; background: transparent; font-size: 24px; color: var(--ink-3); cursor: pointer; flex: 0 0 auto; } .eq-mp-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 20px 40px; } .eq-mp-sec { margin-bottom: 26px; } .eq-mp-sec > h4 { margin: 0 0 10px; font-size: 13px; font-weight:var(--fw-head); color: var(--ink-1); display: flex; align-items: center; gap: 7px; } .eq-mp-empty { font-size: 12.5px; color: var(--ink-3); line-height: 1.7; background: var(--bg-soft); border: 1px solid var(--bc); border-radius: var(--radius); padding: 12px 14px; } .eq-mp-row { display: flex; gap: 11px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--bc); } .eq-mp-row:last-child { border-bottom: 0; } .eq-mp-th { width: 58px; height: 44px; border-radius: var(--radius); object-fit: cover; flex: 0 0 auto; background: var(--bg-soft); } .eq-mp-main { flex: 1 1 auto; min-width: 0; } .eq-mp-name { font-size: 13.5px; font-weight: 700; color: var(--ink-1); text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .eq-mp-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; } .eq-mp-x { width: 44px; height: 44px; min-width: 44px; border: 0; background: transparent; color: var(--ink-3); font-size: 18px; cursor: pointer; flex: 0 0 auto; } .eq-mp-btn { padding: 9px 15px; font-size: 13px; font-weight: 700; border-radius: 999px; border: 1px solid var(--bc); background: var(--bg-card,#fff); color: var(--ink-1); cursor: pointer; min-height: 44px; } .eq-mp-btn.primary { background: var(--ink-1,#1C1814); color: #fff; border-color: var(--ink-1,#1C1814); } .eq-mp-alert { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-3); cursor: pointer; min-height: 44px; } @media (max-width: 560px) { .eq-mp-panel { max-width: 100%; } } @media (prefers-reduced-motion: reduce) { .eq-mp-ov, .eq-mp-panel { transition: none !important; animation: none !important; } } .mqf-search { position: relative; flex: 0 1 240px; min-width: 170px; } .mqf-search input { width: 100%; height: 42px; padding: 0 14px; font-size: 13px; border: 1px solid rgba(10,10,10,.12); border-radius: 999px; background: #FAFAFA; color: var(--ink-1); box-sizing: border-box; } .mqf-search input:focus { outline: none; border-color: var(--ink-1); background: #fff; } .mqf-sug { position: absolute; top: 46px; left: 0; right: 0; z-index: 30; background: #fff; border: 1px solid var(--bc); border-radius: var(--radius); box-shadow: 0 12px 30px rgba(28,24,20,.16); overflow: hidden; } .mqf-sug-i { display: block; width: 100%; text-align: left; padding: 10px 14px; border: 0; background: #fff; font-size: 13px; cursor: pointer; font-family: inherit; color: var(--ink-1); } .mqf-sug-i:hover { background: var(--bg-soft); } .mqf-sug-i span { font-size: 11px; color: var(--ink-3); } .eq-pin .tail { display: none !important; } .eq-pin .bubble { border-radius: 999px !important; background: #FFFFFF !important; color: var(--ink-1, #1C1814) !important; border: 1px solid rgba(28,24,20,.16) !important; box-shadow: 0 4px 14px rgba(28,24,20,.22) !important; padding: 5px 12px !important; font-weight: 800; transition: transform .12s ease, box-shadow .12s ease; } .eq-pin:hover .bubble, .eq-pin.active .bubble { transform: translateY(-2px) scale(1.06); box-shadow: 0 8px 22px rgba(28,24,20,.3) !important; background: var(--ink-1, #1C1814) !important; color: #fff !important; } .hero-search { display: none !important; } .lst-rail:empty { display: none; } .lst-rail-wrap:has(.lst-rail:empty) { display: block; } .fdrop { position: relative; } .fdrop-btn { display: inline-flex; align-items: center; gap: 5px; height: 44px; padding: 0 16px; border: 1px solid rgba(10,10,10,.14); border-radius: 999px; background: #fff; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-1); cursor: pointer; white-space: nowrap; } .fdrop-btn:hover { border-color: var(--ink-1); } .fdrop-btn[aria-expanded="true"] { border-color: var(--ink-1); background: var(--bg-soft); } .fdrop-pop { position: absolute; top: 50px; left: 0; z-index: 60; min-width: 300px; background: #fff; border: 1px solid var(--bc); border-radius: var(--radius); box-shadow: 0 16px 40px rgba(28,24,20,.16); padding: 16px; } .fdrop-pop-wide { min-width: min(560px, 86vw); right: auto; } @media (max-width: 700px) { .fdrop { position: static; } .fdrop-pop { left: 12px; right: 12px; min-width: 0; } } .fdrop-pop .filter-row.secondary { margin: 0 0 4px; padding: 0; border: 0; } .fdrop-chip { border: 1px solid rgba(10,10,10,.14); background: #FAFAFA; border-radius: 999px; padding: 7px 13px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; } .fdrop-chip:hover { border-color: var(--ink-1); color: var(--ink-1); } .fdrop-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--ink-1); color: #fff; font-size: 11px; font-weight: 700; } .lc-id { font-size: 10px; color: var(--ink-4); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0; user-select: all; -webkit-user-select: all; cursor: copy; white-space: nowrap; } .lc-id-row { margin-top: 6px; } .kv-grid .v.v-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; user-select: all; -webkit-user-select: all; cursor: copy; } .unit-flat-card .meta-row .lc-id { margin-left: auto; } .lc-id { position: relative; border-radius: var(--radius); padding: 1px 5px; margin: -1px -5px; transition: background .12s, color .12s; } .lc-id:hover, .kv-grid .v.v-id:hover { background: var(--ink-1); color: #fff !important; cursor: pointer; } .lc-id:hover::before { content: "⧉ "; } .lc-id-lg { font-size: 12px; color: var(--ink-3); } .d-id-row { margin: 4px 0 0; } .lc-id-tip { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); background: var(--ink-1); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; pointer-events: none; z-index: 20; font-family: var(--font); } .kv-grid .v.v-id { position: relative; border-radius: var(--radius); padding: 1px 5px; transition: background .12s, color .12s; } .unit-flat-card .cover { position: relative; } .cover-src { position: absolute; bottom: 6px; left: 6px; background: rgba(28,24,20,.72); color: #fff; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 999px; pointer-events: none; } .unit-flat-card .cover .cover-src { font-size: 9px; padding: 1px 6px; bottom: 5px; left: 5px; letter-spacing: 0; max-width: calc(100% - 58px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .unit-flat-card .cover .photo-count { position: absolute; bottom: 5px; right: 5px; display: inline-flex; align-items: center; gap: 3px; background: rgba(28,24,20,.72); color: #fff; font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 999px; pointer-events: none; line-height: 1.6; } .unit-flat-card .cover .photo-count svg { width: 9px; height: 9px; display: block; } .eq-ico-train { width: 11px; height: 11px; vertical-align: -1px; margin-right: 3px; } .listings-grid:not(.view-list) .unit-flat-card { flex-direction: column; padding: 0 0 12px; } .listings-grid:not(.view-list) .unit-flat-card .cover { width: 100%; flex: none; aspect-ratio: 16/10; border-radius: var(--r-lg) var(--r-lg) 0 0; } .listings-grid:not(.view-list) .unit-flat-card .body { padding: 12px 14px 0; } .listings-grid:not(.view-list) .unit-flat-card.no-cover { padding-top: 12px; } .hero { min-height: 0 !important; display: block !important; } .hero .hero-stats { margin-top: 14px !important; } @media (max-width: 640px) { .hero .hero-stats { gap: 4px 10px !important; margin-top: 10px !important; overflow: visible; } .hero .hero-stats .hst { font-size: 10.5px; white-space: nowrap; } .hero .hero-stats .hst b { font-size: 13px; } .hero .hero-stats .hst-sep { opacity: .45; } .hero .hero-stats #hst-rating-chip, .hero .hero-stats #hst-rating-sep { display: none !important; } .result-meta { flex-direction: row !important; align-items: center !important; justify-content: space-between; gap: 6px; flex-wrap: wrap; } .result-meta > div { gap: 6px !important; justify-content: flex-end; min-width: 0; } .result-meta .sort-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .result-meta #f-sort { max-width: 132px; padding-left: 12px !important; padding-right: 30px !important; } .result-meta .at-btn, .result-meta .vt-btn { min-width: 34px; } #result-count { white-space: nowrap; } .filter-row #f-q { flex: 1 1 100% !important; width: 100%; min-width: 0; } .filter-row #f-area, .filter-row #f-bedrooms { flex: 1 1 130px; width: auto; min-width: 118px; max-width: 152px; } } .hero .hero-stats { gap: 6px 8px !important; } .hero, .filter-bar { background: #f9fafb !important; } .hero::before { background: none !important; } .fb-tabs { justify-content: center; } .fb-tabs .hs-tabs, .fb-tabs .src-seg { height: 44px !important; background: #FFFFFF !important; } .fb-tabs .hs-tab, .fb-tabs .src-seg button { min-height: 36px; } .fb-map-btn { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 18px; box-sizing: border-box; border: 1px solid rgba(10,10,10,.12); border-radius: 999px; background: #FFFFFF; color: var(--ink-1); font: inherit; font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); } .fb-map-btn svg { flex-shrink: 0; color: #4353E9; } .fb-map-btn:hover { border-color: #4353E9; color: #4353E9; } .fb-map-btn:focus-visible { outline: 2px solid #4353E9; outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .fb-map-btn { transition: none; } } @media (max-width: 640px) { .fb-map-btn { padding: 0 14px; } } #view-list > .filter-bar > .container, #view-list > .container, #view-list > section.container, #view-list > .r697-sec { max-width: calc(var(--plh-max) + 2 * var(--plh-pad)); padding-left: var(--plh-pad); padding-right: var(--plh-pad); } html[lang^="zh"] .plh, html[lang^="zh"] .plh h1, html[lang^="zh"] .plh p, html[lang^="zh"] .plh span, html[lang^="zh"] .plh a { font-family: 'Plus Jakarta Sans','Noto Sans SC','Noto Sans CJK SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif !important; } .plh .hero-trust { margin: 12px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; font-size: 14px; line-height: 1.6; color: #374151; text-align: left; } .plh .hero-trust .ht-text::before { content: "✓ "; color: #1F4E79; font-weight: 700; } .plh .hero-trust .ht-more { display: inline-flex; align-items: center; min-height: 44px; color: #1F4E79; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 640px) { .plh .hero-trust { margin-top: 2px; } .plh .hero-trust .ht-text { display: none; } .plh .hero-trust .ht-more::before { content: "✓ "; font-weight: 700; } } .result-meta .rm-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .result-meta .sort-wrap { gap: 10px; } .result-meta .sort-label { font-size: 14px; line-height: 1; color: #6E675C; white-space: nowrap; } .result-meta #f-sort, .result-meta .area-toggle, .result-meta .view-toggle { height: 44px !important; box-sizing: border-box !important; border: 1px solid rgba(10,10,10,.14) !important; border-radius: 999px !important; background-color: #FFFFFF !important; } .result-meta #f-sort:hover, .result-meta .area-toggle:hover, .result-meta .view-toggle:hover { border-color: rgba(10,10,10,.28) !important; } .result-meta .area-toggle, .result-meta .view-toggle { display: inline-flex; align-items: stretch; gap: 0; padding: 0 !important; overflow: hidden !important; } .result-meta .at-btn, .result-meta .vt-btn { display: inline-flex; align-items: center; justify-content: center; height: auto; min-height: 0 !important; min-width: 44px; padding: 0 14px !important; border: 0 !important; border-radius: 999px !important; box-shadow: none !important; background: transparent !important; color: #6E675C !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1; cursor: pointer; transition: background-color .15s, color .15s; } .result-meta .vt-btn svg { display: block; width: 16px; height: 16px; } .result-meta .at-btn.active, .result-meta .vt-btn.active { background: #0A0A0A !important; color: #FFFFFF !important; } .result-meta .at-btn:hover:not(.active), .result-meta .vt-btn:hover:not(.active) { background: rgba(10,10,10,.05) !important; color: #0A0A0A !important; } .result-meta .at-btn:focus-visible, .result-meta .vt-btn:focus-visible { outline: 2px solid currentColor; outline-offset: -5px; } @media (prefers-reduced-motion: reduce) { .result-meta .at-btn, .result-meta .vt-btn { transition: none; } } :root { --pa-paper:#FCFBF8; --pa-soft:#F9F6F0; --pa-card:#FFFFFF; --pa-gold:#1F4A75; --pa-r:var(--radius); --pa-sh:0 10px 30px -14px rgba(80,55,30,.28); --bg:var(--pa-paper); --bg-soft:var(--pa-soft); --bg-card:var(--pa-card); --ink-1:#2B2622; --ink-2:#4A423B; --ink-3:#6B6158; --bc:rgba(80,60,40,.14); } .filter-bar { background: rgba(251,247,241,.86) !important; } .unit-flat-card, .lc-card, .similar-section a[class*="card"] { border: 0 !important; border-radius: var(--pa-r) !important; box-shadow: var(--pa-sh) !important; background: var(--pa-card) !important; overflow: hidden; } .unit-flat-card .u-agent-row { align-items: center; gap: 12px; min-height: 0; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--bc); } .unit-flat-card .u-agent-row img { width: 64px; height: 64px; border: 2px solid #fff; box-shadow: 0 0 0 2px var(--pa-gold); } .unit-flat-card .u-agent-row .nm { display: block; font-size: 16px; line-height: 1.35; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; } .unit-flat-card .u-agent-row .co { display: block; font-size: 14px; line-height: 1.4; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; } .unit-flat-card .u-agent-row .eq-wa-ico-btn { align-self: center; } .unit-flat-card .u-agent-row + .u-agent-one { margin: 6px 0 0 76px; } .unit-flat-card .u-agent-row:not(:has(img)) + .u-agent-one { margin-left: 0; } .detail-section > h3 { border-left: 0 !important; padding-left: 0 !important; display: flex; align-items: center; gap: 10px; } .detail-section > h3::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--pa-gold); flex: none; } .inquiry-card { border: 0 !important; border-radius: var(--radius) !important; box-shadow: var(--pa-sh) !important; background: var(--pa-card) !important; } #d-agent-mini { background: var(--pa-card) !important; border: 0 !important; border-radius: var(--radius) !important; box-shadow: var(--pa-sh); padding: 20px !important; gap: 16px !important; } #d-agent-mini img { width: 80px !important; height: 80px !important; border: 3px solid #fff !important; box-shadow: 0 0 0 2px var(--pa-gold); } #d-agent-mini [data-i18n="detail.agentLabel"], #d-agent-mini-sub { font-size: 14px !important; } #d-agent-mini-name { font-size: 18px !important; } #view-list .listings-grid:not(.view-list) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6, 32px) var(--pl-card-gap, 28px); } @media (min-width: 1280px) { #view-list .lst-rail-wrap:has(.lst-rail:not(:empty)) .listings-grid:not(.view-list) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1080px) { #view-list .listings-grid:not(.view-list) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { #view-list .listings-grid:not(.view-list) { grid-template-columns: minmax(0, 1fr); gap: var(--pl-card-gap, 20px); } #view-list .filter-bar .container, #view-list .container:has(> .lst-rail-wrap) { padding-left: 16px; padding-right: 16px; } } #view-list .listings-grid .unit-flat-card { background: #fffefb !important; border: 1px solid #e9e6df !important; box-shadow: none !important; transition: transform .2s, box-shadow .2s; } #view-list .listings-grid .unit-flat-card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 12px 28px rgba(0,0,0,.08) !important; border-color: #e9e6df !important; } @media (prefers-reduced-motion: reduce) { #view-list .listings-grid .unit-flat-card, #view-list .listings-grid .unit-flat-card:hover { transition: none; transform: none; } } #view-list .listings-grid:not(.view-list) .unit-flat-card { padding: 0; gap: 0; } #view-list .listings-grid:not(.view-list) .unit-flat-card .body { padding: 20px 22px 18px; gap: 0; } #view-list .unit-flat-card .u-info { flex: 1 0 auto; display: flex; flex-direction: column; padding-bottom: 18px; min-width: 0; } #view-list .listings-grid:not(.view-list) .unit-flat-card .cover { aspect-ratio: 16 / 10; overflow: hidden; } #view-list .unit-flat-card .cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } #view-list .unit-flat-card .cover::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(to top, rgba(0,0,0,.34), rgba(0,0,0,0)); pointer-events: none; z-index: 1; } #view-list .unit-flat-card .u-cover-badges { position: absolute; top: 12px; left: 12px; right: 62px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; pointer-events: none; } #view-list .unit-flat-card .u-cover-badges .u-boost { position: static; border-radius: 999px; font-size: 11.5px; font-weight: 700; padding: 5px 10px; line-height: 1.2; letter-spacing: 0; box-shadow: 0 1px 3px rgba(0,0,0,.12); pointer-events: auto; } .u-pill { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 1.2; letter-spacing: 0; background: #f3f2ef; color: #4a4a4a; pointer-events: auto; } .u-pill svg { width: 12px; height: 12px; flex: none; } .u-pill-ok { color: #1f8a4c; background: #e9f6ee; } .u-pill-warn { color: #c26a00; background: #fdf1e2; } .u-pill-np { color: #fff; background: #27407f; } #view-list .unit-flat-card .u-cover-badges .u-pill-ok, #view-list .unit-flat-card .u-cover-badges .u-pill-warn { background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 1px 3px rgba(0,0,0,.12); } #view-list .unit-flat-card .u-cover-badges .u-pill-np { box-shadow: 0 1px 3px rgba(0,0,0,.12); } #view-list .unit-flat-card .unit-badges { margin: 10px 0 0; gap: 6px; } #view-list .unit-flat-card .fav-btn { top: 12px; right: 12px; width: 38px; height: 38px; min-height: 0; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.14); } @media (max-width: 720px) { #view-list .unit-flat-card .fav-btn { width: 44px; height: 44px; } #view-list .unit-flat-card .u-cover-badges { right: 68px; } } #view-list .unit-flat-card .cover .photo-count, #view-list .unit-flat-card .cover .cover-src { position: absolute; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; background: rgba(0,0,0,.55); color: #fff; border-radius: var(--radius); font-size: 11.5px; font-weight: 600; line-height: 1.3; padding: 3px 8px; letter-spacing: 0; } #view-list .unit-flat-card .cover .photo-count { right: 10px; left: auto; font-variant-numeric: tabular-nums; } #view-list .unit-flat-card .cover .photo-count svg { width: 12px; height: 12px; } #view-list .unit-flat-card .cover .cover-src { left: 10px; max-width: calc(100% - 90px); } #view-list .unit-flat-card .price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 2px 12px; flex-wrap: wrap; margin: 0; } #view-list .unit-flat-card .price { font-size: 25px; font-weight: 800; color: #141414; letter-spacing: -.01em; line-height: 1.15; font-variant-numeric: tabular-nums; } #view-list .unit-flat-card .price .cur { font-size: 14px; font-weight: 700; letter-spacing: 0; } #view-list .unit-flat-card .price .unit { font-size: 14px; font-weight: 500; color: #8a8a8a; margin-left: 2px; } #view-list .unit-flat-card.is-off .price { color: #8a8a8a; } #view-list .unit-flat-card .u-psf { margin-left: auto; font-size: 13px; color: #8a8a8a; white-space: nowrap; font-variant-numeric: tabular-nums; } #view-list .unit-flat-card .price-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; font-size: 13px; color: #8a8a8a; font-variant-numeric: tabular-nums; } #view-list .unit-flat-card .u-drop { color: #C0392B; font-size: 12px; font-weight: 700; background: rgba(192,57,43,.08); border-radius: var(--radius); padding: 2px 7px; white-space: nowrap; } #view-list .unit-flat-card .u-drop s { font-weight: 500; opacity: .75; } #view-list .unit-flat-card .bldg { margin-top: 16px; font-size: 17px; font-weight: 700; line-height: 1.3; color: #141414; } #view-list .unit-flat-card .unit-headline { margin: 4px 0 0; } #view-list .unit-flat-card .area-line { margin-top: 4px; font-size: 13.5px; line-height: 1.4; color: #4a4a4a; } #view-list .unit-flat-card .specs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; padding: 0; border: 0; font-size: 12.5px; color: #4a4a4a; } #view-list .unit-flat-card .u-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: var(--radius); background: #f3f2ef; font-size: 12.5px; font-weight: 500; line-height: 1.3; color: #4a4a4a; white-space: nowrap; } #view-list .unit-flat-card .u-chip b { color: #141414; font-weight: 700; } #view-list .unit-flat-card .u-chip.u-st i { width: 6px; height: 6px; flex: 0 0 6px; box-shadow: none; } #view-list .unit-flat-card .u-chip.u-st-ok { background: #e9f6ee; color: #1f8a4c; font-weight: 700; } #view-list .unit-flat-card .u-chip.u-st-ok i { background: #1f8a4c; } #view-list .unit-flat-card .u-chip.u-st-warn { background: #fdf1e2; color: #c26a00; font-weight: 700; } #view-list .unit-flat-card .u-chip.u-st-warn i { background: #c26a00; } #view-list .unit-flat-card .u-chip.u-st-off { color: #8a8a8a; font-weight: 700; } #view-list .unit-flat-card .u-mrt { display: flex; align-items: center; gap: 2px; margin-top: 12px; font-size: 13px; line-height: 1.4; color: #8a8a8a; } #view-list .unit-flat-card .u-mrt .eq-ico-train { width: 14px; height: 14px; flex: none; margin-right: 4px; vertical-align: 0; } #view-list .unit-flat-card .u-agent-row { margin-top: 0; padding-top: 16px; border-top: 1px solid #e9e6df; gap: 12px; min-height: 0; } #view-list .unit-flat-card .u-agent-row img { width: 42px; height: 42px; border: 2px solid #fff; box-shadow: 0 0 0 2px var(--pa-gold); } #view-list .unit-flat-card .u-agent-row .nm { font-size: 14px; font-weight: 700; line-height: 1.35; color: #141414; } #view-list .unit-flat-card .u-agent-row .co { font-size: 12.5px; line-height: 1.35; color: #8a8a8a; } #view-list .unit-flat-card .u-agent-row .eq-wa-ico-btn { width: 40px; height: 40px; background: #128c5a; } #view-list .unit-flat-card .u-agent-row .eq-wa-ico-btn:hover { background: #0f774c; } #view-list .unit-flat-card .u-agent-row .eq-wa-ico-btn svg { width: 20px; height: 20px; } @media (max-width: 720px) { #view-list .unit-flat-card .u-agent-row .eq-wa-ico-btn { width: 44px; height: 44px; } } #view-list .unit-flat-card .u-agent-row + .u-agent-one { margin-left: 54px; } #view-list .unit-flat-card .u-agent-row:not(:has(img)) + .u-agent-one { margin-left: 0; } #view-list .listings-grid:not(.view-list) .unit-flat-card .meta-row { margin: 18px -22px -18px; padding: 10px 22px; } #view-list .listings-grid:not(.view-list) .unit-flat-card .u-info + .meta-row { margin-top: 0; } #view-list .unit-flat-card .meta-row { display: flex; align-items: center; gap: 10px; min-width: 0; background: #fafaf8; border-top: 1px solid #e9e6df; font-size: 11.5px; line-height: 1.4; color: #8a8a8a; } #view-list .unit-flat-card .meta-row > span:not(.lc-id) { white-space: nowrap; flex: none; } #view-list .unit-flat-card .meta-row .lc-id { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: #8a8a8a; } #view-list .unit-flat-card .meta-row .lc-id:has(.lc-id-tip) { overflow: visible; } @media (min-width: 681px) { #view-list .listings-grid.view-list .unit-flat-card .u-cover-badges { right: 12px; } #view-list .listings-grid.view-list .unit-flat-card .price-row { padding-right: 48px; } } #view-list .listings-grid.view-list .unit-flat-card .u-info { padding-bottom: 12px; } #view-list .listings-grid.view-list .unit-flat-card .meta-row { margin-top: 10px; padding: 6px 10px; } #view-list .listings-grid.view-list .unit-flat-card .u-info + .meta-row { margin-top: 0; } #view-list .filter-bar { padding: 14px 0 !important; border-bottom: 1px solid #e9e6df !important; -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important; box-shadow: none !important; } @media (min-width: 981px) { #view-list .filter-bar { position: sticky !important; top: 0 !important; z-index: 30 !important; } body:not(.map-open):has(#view-list:not([hidden])) .eq-topbar-injected { position: relative; } } #view-list .filter-bar .fb-main { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px !important; margin: 0 !important; position: relative; } #view-list .filter-bar .fb-main .fb-tabs { order: 1; flex: none; display: block; margin: 0; } #view-list .filter-bar .fb-main .fb-search { order: 2; flex: 1 1 auto; min-width: 180px; position: relative; } #view-list .filter-bar .fb-main .fb-filters { order: 3; flex: none; display: flex; align-items: center; gap: 10px; } #view-list .filter-bar .fb-main .fb-map-btn { order: 4; flex: none; } #view-list .filter-bar .fb-tabs .hs-tabs { display: inline-flex; align-items: center; height: 44px !important; box-sizing: border-box; margin: 0 !important; padding: 4px !important; gap: 0; background: #f1f0ed !important; border: 0 !important; border-radius: 999px !important; } #view-list .filter-bar .fb-tabs .hs-tab { display: inline-flex; align-items: center; height: 36px; min-height: 36px; box-sizing: border-box; margin: 0 !important; padding: 0 18px !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; box-shadow: none !important; color: #4a4a4a !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0 !important; white-space: nowrap; } #list-hero .plh-title, #list-hero .plh-title *, #list-hero .plh-sub, #list-hero .plh-stat, #list-hero .plh-stat * { font-family: var(--pl-head-font) !important; } #view-list .filter-bar .fb-tabs .hs-tab.active { background: var(--pl-selected-bg, #27407f) !important; color: var(--pl-selected-ink, #fff) !important; font-weight: 700 !important; } #view-list .filter-bar .fb-search .fb-ico { position: absolute; left: 16px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: #8a8a8a; pointer-events: none; } #view-list .filter-bar .fb-main .fb-search { max-width: var(--pl-search-max, 520px); } #view-list .filter-bar .fb-search #f-q { display: block; width: 100% !important; min-width: 0 !important; max-width: none !important; flex: none !important; height: var(--pl-search-h, 44px) !important; box-sizing: border-box !important; padding: 0 16px 0 42px !important; border: 1px solid var(--plh-chip-line, #DEDBD3) !important; border-radius: var(--pl-search-radius, 999px) !important; background: var(--pl-search-bg, #fff) !important; font-size: var(--pl-search-fs, 16px) !important; color: var(--plh-ink, #141414) !important; } #view-list .filter-bar .fb-search #f-q::placeholder { color: #8a8a8a; opacity: 1; } #view-list .filter-bar .fb-filters .filter-select, #view-list .filter-bar .fb-filters .fdrop-btn { height: var(--btn-h) !important; box-sizing: border-box !important; min-width: 0 !important; width: auto !important; max-width: none; flex: none !important; border: 1px solid var(--btn-line) !important; border-radius: var(--btn-radius) !important; background-color: var(--btn-secondary-bg) !important; box-shadow: none !important; font-size: var(--btn-fs) !important; font-weight: var(--btn-dd-fw) !important; color: var(--btn-dd-ink) !important; white-space: nowrap; } #view-list .filter-bar .fb-filters .filter-select { field-sizing: content; padding: 0 var(--btn-dd-pad-r) 0 var(--btn-dd-pad-l) !important; background-image: var(--btn-chevron) !important; background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 14px 14px !important; } #view-list .filter-bar .fb-filters .fdrop-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px 0 var(--btn-dd-pad-l) !important; } #view-list .filter-bar .fb-filters .fdrop-btn .fb-chev { width: 14px; height: 14px; flex: none; color: var(--btn-chevron-color); } #view-list .filter-bar .fb-filters .fdrop-btn .fb-ico { width: 16px; height: 16px; flex: none; color: #4a4a4a; } #view-list .filter-bar .fb-filters .filter-select:hover, #view-list .filter-bar .fb-filters .fdrop-btn:hover, #view-list .filter-bar .fb-filters .fdrop-btn[aria-expanded="true"] { border-color: #27407f !important; } #view-list .filter-bar .fb-filters .filter-select:focus-visible, #view-list .filter-bar .fb-filters .fdrop-btn:focus-visible, #view-list .filter-bar .fb-search #f-q:focus { border-color: #27407f !important; box-shadow: 0 0 0 3px rgba(39,64,127,.14) !important; outline: none; } #view-list .filter-bar .fb-map-btn { height: var(--btn-h); padding: 0 var(--btn-pad-x); border: 1px solid var(--btn-line) !important; border-radius: var(--btn-radius); background: var(--btn-secondary-bg) !important; color: var(--btn-secondary-ink) !important; font-size: var(--btn-fs); font-weight: var(--btn-fw) !important; } #view-list .filter-bar .fb-map-btn svg { color: currentColor; } #view-list .filter-bar .fb-map-btn:hover { border-color: var(--btn-line-hover) !important; background: var(--btn-secondary-bg) !important; color: var(--btn-secondary-ink) !important; } #view-list .filter-bar .fb-map-btn:focus-visible { outline: 2px solid #27407f; outline-offset: 2px; } @media (min-width: 1181px) { #view-list .filter-bar .fb-filters .fdrop-pop { left: auto; right: 0; } } @media (max-width: 1180px) { #view-list .filter-bar .fb-filters .fdrop { position: static; } #view-list .filter-bar .fb-filters .fdrop-pop { top: auto; margin-top: 6px; } #view-list .filter-bar .fb-filters #fd-price-pop { left: 0; right: auto; } #view-list .filter-bar .fb-filters #fd-more-pop { left: auto; right: 0; } } @media (max-width: 1180px) { #view-list .filter-bar .fb-main { flex-wrap: wrap; } #view-list .filter-bar .fb-main .fb-search { order: 0; flex: 1 1 100%; } #view-list .filter-bar .fb-main .fb-map-btn { margin-left: auto; } } @media (max-width: 720px) { #view-list .filter-bar { padding: 12px 0 !important; } #view-list .filter-bar .fb-main { gap: 8px !important; } #view-list .filter-bar .fb-main .fb-tabs { order: 1; } #view-list .filter-bar .fb-main .fb-map-btn { order: 2; padding: 0 14px; } #view-list .filter-bar .fb-main .fb-filters { order: 3; flex: 1 1 100%; flex-wrap: nowrap; gap: 8px; overflow-x: auto; overflow-y: hidden; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } #view-list .filter-bar .fb-main .fb-filters::-webkit-scrollbar { display: none; } #view-list .filter-bar .fb-tabs .hs-tab { padding: 0 16px !important; } #view-list .filter-bar .fb-filters #fd-price-pop, #view-list .filter-bar .fb-filters #fd-more-pop { left: 0; right: 0; min-width: 0; } } @media (max-width: 640px) { #view-list .filter-bar .fb-search #f-q { font-size: 16px !important; } } html:has(#view-detail:not([hidden])), body:has(#view-detail:not([hidden])) { background: #FCFBF8 !important; } #view-detail { --pd-bg: #FCFBF8; --pd-card: #FFFFFF; --pd-line: #EEEAE3; --pd-ink: #121212; --pd-ink2: #3D3830; --pd-mut: #6B6358; --pd-gold: #1F4A75; --pd-ok: #1F7A4D; --pd-okbg: #EAF4EC; --pd-wa: #008069; --pd-r: 18px; background: var(--pd-bg); color: var(--pd-ink); } #view-detail, #view-detail * { font-family: 'Manrope', 'Plus Jakarta Sans', 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', system-ui, -apple-system, sans-serif !important; } html[lang^="zh"] #view-detail, html[lang^="zh"] #view-detail * { font-family: 'Manrope', 'Plus Jakarta Sans', 'Noto Sans SC', 'Noto Sans CJK SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif !important; } #view-detail .lc-id, #view-detail .kv-grid .v.v-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; } #view-detail > .container { max-width: 1240px; padding-left: 24px; padding-right: 24px; } #view-detail .detail-content { padding-top: 16px !important; padding-bottom: 72px !important; } #view-detail .detail-topbar { padding: 8px 0 14px !important; } #view-detail .pdv-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0 !important; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } #view-detail .pdv-gallery { position: relative; margin: 0 0 24px !important; padding: 0 !important; border-top: 0 !important; } #view-detail #d-carousel { display: none; } #view-detail .pdv-mosaic { position: relative; } #view-detail .pdv-mosaic-grid { display: grid; gap: 8px; height: clamp(300px, 36vw, 470px); grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; border-radius: var(--pd-r); overflow: hidden; } #view-detail .pdv-mosaic-grid[data-n="1"] { grid-template-columns: 1fr; grid-template-rows: 1fr; } #view-detail .pdv-mosaic-grid[data-n="2"] { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr; } #view-detail .pdv-mosaic-grid[data-n="3"] { grid-template-columns: 2fr 1fr; } #view-detail .pdv-mosaic-grid[data-n="4"] { grid-template-columns: 2fr 1fr 1fr; } #view-detail .pdv-mosaic-grid[data-n="4"] .pdv-tile:nth-child(4) { grid-column: 2 / span 2; } #view-detail .pdv-tile { position: relative; display: block; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; margin: 0; background: #E9E3D8; cursor: zoom-in; overflow: hidden; } #view-detail .pdv-tile:first-child { grid-row: 1 / span 2; } #view-detail .pdv-mosaic-grid[data-n="1"] .pdv-tile:first-child, #view-detail .pdv-mosaic-grid[data-n="2"] .pdv-tile:first-child { grid-row: auto; } #view-detail .pdv-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; } #view-detail .pdv-tile:hover img { transform: scale(1.03); } #view-detail .pdv-tile:focus-visible { outline: 3px solid var(--pd-gold); outline-offset: -3px; } #view-detail .pdv-ready { position: absolute; top: 14px; left: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.95); color: var(--pd-ok); font-size: 14px; font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,.12); pointer-events: none; } #view-detail .pdv-ready.is-later { color: #9A5B12; } #view-detail .pdv-mosaic .stock-chip { position: absolute; left: 14px; bottom: 14px; z-index: 2; } #view-detail .pdv-mosaic .img-credit { position: absolute; left: 14px; bottom: 14px; z-index: 2; } #view-detail .pdv-mosaic .stock-chip + .img-credit { bottom: 48px; } #view-detail .pdv-all { position: absolute; right: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: var(--btn-gap); box-sizing: border-box; min-height: var(--btn-h); padding: 0 var(--btn-pad-x); border: 1px solid var(--btn-line); border-radius: var(--btn-radius); background: var(--btn-secondary-bg); color: var(--btn-secondary-ink); font-size: var(--btn-fs); font-weight: var(--btn-fw); cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.12); } #view-detail .pdv-all svg { width: 16px; height: 16px; } #view-detail .pdv-all:hover { background: #F3EEE5; } #view-detail .pdv-gallery-note:empty { display: none; } #view-detail .pdv-gallery-note { margin-top: 8px; font-size: 14px; color: var(--pd-mut); } #view-detail .pdv-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin: 0 0 24px; } #view-detail .pdv-head-main { flex: 1 1 520px; min-width: 0; } #view-detail .pdv-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; } #view-detail .pdv-chips .detail-lead-badge { margin: 0 !important; padding: 5px 12px !important; font-size: 12.5px !important; } #view-detail .pdv-chip, #view-detail .lc-id.lc-id-lg.pdv-chip { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 12px; border: 1px solid var(--pd-line); border-radius: 999px; background: #fff; color: var(--pd-ink2); font-size: 13px; font-weight: 600; letter-spacing: 0; } #view-detail .pdv-chip[hidden] { display: none; } #view-detail .detail-title { font-family: var(--pl-head-font) !important; font-size: var(--pl-h1-size) !important; font-weight: var(--pl-h1-weight) !important; letter-spacing: var(--pl-h1-tracking) !important; line-height: var(--pl-h1-leading) !important; margin: 0 0 8px !important; color: var(--pl-h1-ink) !important; } #view-detail .detail-tagline { font-family: var(--pl-head-font) !important; border-left: 0 !important; padding: 0 !important; margin: calc(var(--pl-h1-h2-gap) - 8px) 0 8px !important; font-size: var(--pl-h2-size) !important; font-weight: var(--pl-h2-weight) !important; font-style: normal !important; letter-spacing: var(--pl-h2-tracking) !important; line-height: var(--pl-h2-leading) !important; color: var(--pl-h2-ink) !important; } #view-detail .detail-area { display: flex; align-items: center; gap: 6px; margin: 0 !important; font-size: 14px !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 500 !important; color: var(--pd-mut) !important; } #view-detail .detail-area::before { content: ""; width: 14px; height: 14px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E") center / contain no-repeat; } #view-detail .detail-area:empty { display: none; } #view-detail .detail-share { margin: 0 !important; padding: 0 !important; border: 0 !important; gap: 8px !important; flex-wrap: nowrap !important; } #view-detail .detail-share .share-label { display: none; } #view-detail .detail-share .share-btn { width: 44px !important; height: 44px !important; border: 1px solid var(--pd-line) !important; background: #fff !important; color: var(--pd-ink) !important; } #view-detail .detail-share .share-btn:hover { transform: none !important; border-color: var(--pd-ink) !important; box-shadow: none !important; } #view-detail .detail-share .share-wa { color: var(--pd-wa) !important; } #view-detail .detail-share .share-fb { color: #1877F2 !important; } #view-detail .detail-share .share-wa svg, #view-detail .detail-share .share-fb svg, #view-detail .detail-share .share-wa svg path, #view-detail .detail-share .share-fb svg path { fill: currentColor; } #view-detail .detail-share .pdv-save { width: auto !important; display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; border-radius: 999px !important; font-size: 14px; font-weight: 700; } #view-detail .detail-share .pdv-save svg { width: 16px; height: 16px; } #view-detail .detail-share .pdv-save.on svg { fill: #C0392B; stroke: #C0392B; } #view-detail .detail-grid { grid-template-columns: minmax(0, 1fr) 380px !important; gap: 40px !important; align-items: start; } #view-detail .pdv-side { position: sticky; top: 88px; align-self: start; max-height: calc(100vh - 104px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } #view-detail .detail-section { margin: 0 !important; padding: var(--pl-sub-y, 36px) 0 !important; border-top: 1px solid var(--pd-line); } #view-detail #sec-overview { margin-top: 12px !important; border-top: 0; } #view-detail .detail-section > h3, #view-detail .pdv-loc-h, #view-detail .units-section h3 { font-size: 22px !important; font-weight:var(--fw-head) !important; letter-spacing:var(--tracking-head) !important; line-height:var(--leading-head) !important; color: var(--pd-ink) !important; margin: 0 0 18px !important; padding: 0 !important; border: 0 !important; } #view-detail .detail-section > h3::before { content: none !important; display: none !important; } #view-detail #d-description { font-size: 15.5px !important; line-height: var(--pl-leading, 1.8) !important; max-width: var(--pl-measure, 40em); color: var(--pd-ink2) !important; white-space: pre-line; } #view-detail #d-description.pdv-clamp { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } #view-detail .pdv-more, #view-detail .pdv-btn-ghost { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; padding: 0 18px; border: 1px solid var(--pd-ink); border-radius: 999px; background: #fff; color: var(--pd-ink); font-size: 14px; font-weight: 700; cursor: pointer; } #view-detail .pdv-more { border: 0; padding: 0; background: none; text-decoration: underline; text-underline-offset: 3px; } #view-detail .pdv-btn-ghost { min-height: var(--btn-h); padding: 0 var(--btn-pad-x); border-color: var(--btn-line); border-radius: var(--btn-radius); background: var(--btn-secondary-bg); color: var(--btn-secondary-ink); font-size: var(--btn-fs); font-weight: var(--btn-fw); } #view-detail .pdv-btn-ghost:hover { background: var(--btn-secondary-bg); color: var(--btn-secondary-ink); border-color: var(--btn-line-hover); } #view-detail .pdv-more[hidden], #view-detail .pdv-btn-ghost[hidden] { display: none; } #view-detail .pdv-facts, #view-detail .pdv-transit { background: var(--pd-card); border: 1px solid var(--pd-line); border-radius: var(--pd-r); } #view-detail .pdv-facts[hidden], #view-detail .pdv-transit[hidden], #view-detail .pdv-avail[hidden] { display: none; } #view-detail .pdv-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } #view-detail .pdv-stats[data-n="1"] { grid-template-columns: 1fr; } #view-detail .pdv-stats[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } #view-detail .pdv-stats[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } #view-detail .pdv-stat { padding: 20px 22px; min-width: 0; } #view-detail .pdv-stat + .pdv-stat { border-left: 1px solid var(--pd-line); } #view-detail .pdv-stat-v { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--pd-ink); overflow-wrap: anywhere; } #view-detail .pdv-stat-v small { font-size: 14px; font-weight: 600; color: var(--pd-mut); letter-spacing: 0; } #view-detail .pdv-stat-k { margin-top: 6px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pd-mut); } #view-detail .pdv-transit { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding: 14px 18px; font-size: 15px; } #view-detail .pdv-transit .pdv-ico { width: 34px; height: 34px; padding: 6px; flex: none; border-radius: 10px; background: #F6EEDD; color: #8A6420; } #view-detail .pdv-transit b { font-weight: 700; color: var(--pd-ink); } #view-detail .pdv-transit b a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } #view-detail .pdv-transit b a:hover { color: var(--pd-gold); } #view-detail .pdv-transit span { margin-left: auto; font-size: 14px; color: var(--pd-mut); } #view-detail .pdv-avail { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding: 14px 18px; border-radius: var(--pd-r); background: var(--pd-okbg); color: var(--pd-ok); font-size: 14px; line-height: 1.55; } #view-detail .pdv-avail .pdv-ico { width: 20px; height: 20px; flex: none; } #view-detail .pdv-avail-t { flex: 1 1 260px; color: #1A5E3C; } #view-detail .pdv-avail-a { display: inline-flex; align-items: center; min-height: 44px; color: #1A5E3C; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } #view-detail #pdv-units-top:empty, #view-detail #pdv-units-bottom:empty { display: none; } #view-detail #pdv-units-top .units-section { margin-top: 12px; } #view-detail .kv-grid { border-top: 0 !important; column-gap: 40px !important; } #view-detail .kv-grid .kv { display: flex !important; justify-content: space-between !important; gap: 16px !important; padding: 13px 0 !important; border-bottom: 1px solid var(--pd-line) !important; } #view-detail .kv-grid .kv .k { font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--pd-mut) !important; } #view-detail .kv-grid .kv .v { text-align: right !important; font-size: 14.5px !important; font-weight: 700 !important; color: var(--pd-ink) !important; } #view-detail .amenity-list .a { background: #fff !important; border: 1px solid var(--pd-line) !important; font-size: 14px !important; padding: 9px 14px !important; } #view-detail .pdv-loc { padding: var(--pl-sub-y, 36px) 0; border-top: 1px solid var(--pd-line); } #view-detail .pdv-loc[hidden] { display: none; } #view-detail .pdv-loc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; } #view-detail .pdv-loc-grid > .detail-section { position: relative; padding: 0 !important; border: 0; } #view-detail .pdv-loc-grid > .detail-section[hidden] { display: none; } #view-detail .pdv-loc-grid:has(> #sec-poi[hidden]) { grid-template-columns: 1fr; } #view-detail .map-embed { display: block; height: 100%; min-height: 300px; aspect-ratio: auto; margin: 0; border-radius: var(--pd-r); border: 1px solid var(--pd-line); background: #EDE7DC; } #view-detail .pdv-map-open { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; background: #fff; color: var(--pd-ink); font-size: 14px; font-weight: 700; text-decoration: none; box-shadow: 0 2px 8px rgba(0,0,0,.14); } #view-detail .pdv-map-open[hidden] { display: none; } #view-detail #sec-poi { padding: 16px !important; background: #fff; border: 1px solid var(--pd-line); border-radius: var(--pd-r); } #view-detail .pdv-tab { min-height: 36px; padding: 6px 14px; border: 1px solid var(--pd-line); border-radius: 999px; background: #fff; color: var(--pd-ink2); font-size: 14px; cursor: pointer; } #view-detail .pdv-tab.on { background: var(--pd-ink); border-color: var(--pd-ink); color: #fff; } #view-detail .pdv-poi-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--pd-line); } #view-detail .pdv-poi-nm { font-size: 14px; font-weight: 600; color: var(--pd-ink); min-width: 0; overflow-wrap: anywhere; } #view-detail .pdv-poi-mt { flex: none; padding: 3px 10px; border-radius: 999px; background: #F3EEE5; font-size: 13px; color: var(--pd-ink2); white-space: nowrap; } #view-detail #d-poi-attr { font-size: 12.5px !important; color: var(--pd-mut) !important; } #view-detail .pdv-mi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: #fff; border: 1px solid var(--pd-line); border-radius: var(--pd-r); overflow: hidden; } #view-detail .pdv-mi-in { padding: 22px; } #view-detail .pdv-mi-f { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--pd-mut); } #view-detail .pdv-mi-f input { width: 100%; min-height: 46px; padding: 0 14px; border: 1px solid var(--pd-line); border-radius: 12px; background: #FAF8F4; color: var(--pd-ink); font-size: 16px; font-weight: 700; } #view-detail .pdv-mi-f input:focus { outline: none; border-color: var(--pd-ink); background: #fff; box-shadow: 0 0 0 3px rgba(18,18,18,.08); } #view-detail .pdv-mi-months { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; } #view-detail .pdv-mi-out { padding: 22px; background: #FBF6EC; border-left: 1px solid var(--pd-line); } #view-detail .pdv-mi-k { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pd-mut); } #view-detail .pdv-mi-total { margin: 6px 0 14px; font-size: 34px; font-weight: 800; letter-spacing: -.02em; color: var(--pd-ink); font-variant-numeric: tabular-nums; } #view-detail .pdv-mi-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: #ECE5D8; } #view-detail .pdv-mi-bar i, #view-detail .pdv-mi-rows i { display: block; } #view-detail .is-dep { background: var(--pd-ink); } #view-detail .is-util { background: var(--pd-gold); } #view-detail .is-adv { background: var(--pd-ok); } #view-detail .pdv-mi-rows { list-style: none; margin: 14px 0 0; padding: 0; } #view-detail .pdv-mi-rows li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 14px; color: var(--pd-ink2); } #view-detail .pdv-mi-rows li span { display: inline-flex; align-items: center; gap: 8px; } #view-detail .pdv-mi-rows li i { width: 9px; height: 9px; border-radius: 50%; } #view-detail .pdv-mi-rows li b { font-variant-numeric: tabular-nums; color: var(--pd-ink); } #view-detail .pdv-mi-note { margin: 12px 0 0 !important; font-size: 13px !important; color: var(--pd-mut) !important; } #view-detail .mort-box { background: #fff !important; border: 1px solid var(--pd-line) !important; border-radius: var(--pd-r) !important; } #view-detail .pdv-rv-empty { display: grid; grid-template-columns: 200px minmax(0, 1fr); background: #fff; border: 1px solid var(--pd-line); border-radius: var(--pd-r); overflow: hidden; } #view-detail .pdv-rv-score { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 22px; border-right: 1px solid var(--pd-line); font-size: 14px; color: var(--pd-mut); text-align: center; } #view-detail .pdv-rv-score b { font-size: 30px; color: var(--pd-ink); line-height: 1; } #view-detail .pdv-rv-stars { color: #C9BFAE; letter-spacing: 2px; } #view-detail .pdv-rv-ask { padding: 22px; } #view-detail .pdv-rv-ask p { margin: 0 !important; font-size: 15px !important; color: var(--pd-ink2) !important; } #view-detail #eq-rev-form { background: #fff !important; border: 1px solid var(--pd-line) !important; border-radius: var(--pd-r) !important; } #view-detail #eq-rev-form[hidden] { display: none; } #view-detail .pdv-units-empty #units-count, #view-detail .pdv-units-empty #units-shown { display: none; } #view-detail #units-section { padding-top: 0; } #view-detail #units-section, #view-detail #similar-section { background-color: transparent !important; } #view-detail #pdv-units-bottom .units-section { padding-top: var(--pl-sub-y, 36px); border-top: 1px solid var(--pd-line); } #view-detail #pdv-units-bottom .pdv-units-head { margin-top: 0 !important; } #view-detail .pdv-alert { background: #fff; border: 1px solid var(--pd-line); border-radius: var(--pd-r); overflow: hidden; } #view-detail .pdv-alert-top { display: flex; align-items: center; gap: 14px; padding: 20px 22px 0; } #view-detail .pdv-bell { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: none; border-radius: 12px; background: #F6EEDD; color: var(--pd-mut); } #view-detail .pdv-bell .pdv-ico { display: block; width: 28px; height: 28px; } #view-detail .pdv-alert-top b { display: block; font-size: 16px; color: var(--pd-ink); } #view-detail .pdv-alert-top div > span { display: block; font-size: 14px; color: var(--pd-mut); } #view-detail .pdv-alert-form { display: flex; gap: 10px; padding: 16px 22px 18px; } #view-detail .pdv-alert-form input { flex: 1 1 auto; min-width: 0; min-height: 46px; padding: 0 16px; border: 1px solid var(--pd-line); border-radius: 12px; background: #FAF8F4; font-size: 16px; color: var(--pd-ink); } #view-detail .pdv-alert-form input:focus { outline: none; border-color: var(--pd-ink); background: #fff; } #view-detail .pdv-alert-form button { flex: none; min-height: var(--btn-h); padding: 0 var(--btn-pad-x); border: 1px solid var(--btn-primary-bg); border-radius: var(--btn-radius); background: var(--btn-primary-bg); color: var(--btn-primary-ink); font-size: var(--btn-fs); font-weight: var(--btn-fw); cursor: pointer; } #view-detail .pdv-alert-form button:hover { background: var(--btn-primary-hover); border-color: var(--btn-primary-hover); } #view-detail .pdv-alert-msg { margin: -6px 22px 14px !important; font-size: 14px !important; color: var(--pd-ok) !important; } #view-detail .pdv-alert-msg.is-bad { color: #B3261E !important; } #view-detail .pdv-list-free { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding: 12px 22px; border-top: 1px dashed var(--pd-line); font-size: 14px; color: var(--pd-ink2); } #view-detail .pdv-list-free a { display: inline-flex; align-items: center; min-height: 44px; color: var(--pd-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } #view-detail .pdv-list-free > span { flex: 1 1 0; min-width: 0; } #view-detail .pdv-list-free a { flex: none; margin-left: auto; } #view-detail .inquiry-card { position: static !important; max-height: none !important; overflow: visible !important; padding: 24px !important; background: #fff !important; border: 1px solid var(--pd-line) !important; border-radius: var(--pd-r) !important; box-shadow: 0 18px 40px -26px rgba(40,30,15,.30) !important; } #view-detail .inquiry-card .price-display { padding: 0 0 18px !important; margin: 0 0 18px !important; border-bottom: 1px solid var(--pd-line) !important; } #view-detail .inquiry-card .price-display .l { margin: 0 0 6px !important; font-size: 12.5px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--pd-mut) !important; } #view-detail .inquiry-card .price-display .p { font-size: 30px !important; font-weight: 800 !important; color: var(--pd-ink) !important; } #view-detail .pdv-price-sub { margin-top: 6px; font-size: 14px; color: var(--pd-mut); } #view-detail .pdv-price-sub[hidden] { display: none; } #view-detail #d-agent-mini { display: flex; align-items: center; gap: 12px; margin: 0 0 16px !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } #view-detail #d-agent-mini img { width: 52px !important; height: 52px !important; border: 2px solid #fff !important; box-shadow: 0 0 0 1px var(--pd-line) !important; } #view-detail .pdv-agent-body { flex: 1; min-width: 0; } #view-detail .pdv-agent-nm { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } #view-detail #d-agent-mini-name { font-size: 16px !important; font-weight: 800; color: var(--pd-ink); overflow-wrap: anywhere; } #view-detail #d-agent-mini.is-none #d-agent-mini-name { font-size: 14px !important; font-weight: 600; color: var(--pd-mut); } #view-detail #d-agent-mini-sub { font-size: 14px !important; color: var(--pd-mut); } #view-detail #d-agent-mini-sub:empty { display: none; } #view-detail .pdv-badges { display: inline-flex; gap: 4px; } #view-detail .pdv-badges[hidden] { display: none; } #view-detail .pdv-badges .la-badge, #view-detail .pdv-agent-more .la-badge { padding: 2px 8px; border-radius: 6px; background: var(--pd-ink); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } #view-detail .pdv-badges .la-badge-cert, #view-detail .pdv-agent-more .la-badge-cert { background: var(--pd-okbg); color: var(--pd-ok); } #view-detail .pdv-agent-more { margin: -4px 0 16px; padding: 12px 0 0; border-top: 1px solid var(--pd-line); } #view-detail .pdv-agent-more[hidden] { display: none; } #view-detail .pdv-agent-more-h { margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--pd-mut); } #view-detail .pdv-agent-more .la-multi { display: flex; flex-direction: column; gap: 4px; } #view-detail .pdv-agent-more .la-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; } #view-detail .pdv-agent-more .la-avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; } #view-detail .pdv-agent-more .la-info { flex: 1; min-width: 0; } #view-detail .pdv-agent-more .name { font-size: 14px; font-weight: 700; color: var(--pd-ink); } #view-detail .pdv-agent-more .meta { font-size: 13px; color: var(--pd-mut); } #view-detail .pdv-agent-more .meta:empty, #view-detail .pdv-agent-more .lbl:empty { display: none; } #view-detail .inq-wa-btn { background: var(--pd-wa) !important; border-radius: var(--btn-radius) !important; min-height: var(--btn-h); padding-top: 0; padding-bottom: 0; font-size: var(--btn-fs); font-weight: var(--btn-fw); } #view-detail .inq-wa-btn:hover { background: #006B57 !important; } #view-detail .inq-or { margin: 16px 0 12px !important; font-size: 13px !important; color: var(--pd-mut) !important; } #view-detail .inquiry-form input, #view-detail .inquiry-form textarea, #view-detail .inq-phone-row select { background: #FAF8F4 !important; border: 1px solid var(--pd-line) !important; border-radius: 12px !important; } #view-detail .inq-phone-row input { padding-left: 14px !important; } #view-detail .inquiry-form input:focus, #view-detail .inquiry-form textarea:focus { background: #fff !important; border-color: var(--pd-ink) !important; } #view-detail .inquiry-form button { background: var(--btn-primary-bg) !important; border-radius: var(--btn-radius) !important; min-height: var(--btn-h); padding-top: 0 !important; padding-bottom: 0 !important; font-size: var(--btn-fs) !important; font-weight: var(--btn-fw); } #view-detail .inquiry-form button:hover { background: var(--btn-primary-hover) !important; transform: none; } #view-detail .inq-foot { text-align: left !important; } #view-detail .pdv-once { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 12px 16px; background: #fff; border: 1px solid var(--pd-line); border-radius: 14px; font-size: 14px; color: var(--pd-ink2); } #view-detail .pdv-once[hidden] { display: none; } #view-detail .pdv-once .pdv-ico { width: 18px; height: 18px; flex: none; color: var(--pd-ok); } #view-detail .similar-section { margin-top: var(--pl-sub-y, 48px); padding-top: var(--pl-sub-y, 40px); border-top: 1px solid var(--pd-line); } #view-detail .pdv-sim-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; } #view-detail .pdv-sim-head h3 { margin: 0; font-size: 26px; font-weight:var(--fw-head); letter-spacing:var(--tracking-head); line-height:var(--leading-head); color: var(--pd-ink); } #view-detail .pdv-sim-all { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 700; color: var(--pd-ink); text-decoration: underline; text-underline-offset: 3px; } #view-detail .pdv-sim-all[hidden] { display: none; } #view-detail #similar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pl-card-gap, 20px); } #view-detail #similar-grid .listing-card { background: #fff !important; border: 1px solid var(--pd-line) !important; border-radius: var(--pd-r) !important; box-shadow: none !important; } #view-detail #similar-grid .listing-card:hover { box-shadow: 0 14px 30px -18px rgba(40,30,15,.35) !important; } #view-detail #similar-grid .lc-price-row { flex-direction: row; align-items: baseline; } #view-detail #similar-grid .lc-price-row .price { color: var(--pd-ink) !important; font-size: 19px; } #view-detail #similar-grid .lc-price-row .price-jpy { display: none; } #view-detail #similar-grid .lc-units-hint, #view-detail #similar-grid .lc-id-row, #view-detail #similar-grid .lc-eq-badges:empty { display: none; } #view-detail #similar-grid .listing-tag { font-size: 12.5px; } #view-detail #similar-grid .photo-cnt { left: 12px; bottom: 12px; background: rgba(18,18,18,.72); font-size: 12.5px; } #view-detail #similar-grid .view-cnt { display: none; } #view-detail #similar-grid .fav-btn { width: 40px; height: 40px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.14); opacity: 1; } #view-detail .pdv-sim-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: auto -16px -16px; padding: 10px 16px; border-top: 1px solid var(--pd-line); font-size: 13px; color: var(--pd-mut); } #view-detail .pdv-sim-ok { color: var(--pd-ok); font-weight: 700; } @media (prefers-reduced-motion: reduce) { #view-detail .pdv-tile img, #view-detail .pdv-tile:hover img { transition: none; transform: none; } } @media (max-width: 1100px) { #view-detail .detail-grid { grid-template-columns: minmax(0, 1fr) 340px !important; gap: 28px !important; } } @media (max-width: 900px) { #view-detail .detail-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; } #view-detail .pdv-side { position: static; max-height: none; overflow: visible; } #view-detail .pdv-mosaic-grid, #view-detail .pdv-mosaic-grid[data-n="4"], #view-detail .pdv-mosaic-grid[data-n="5"] { grid-template-columns: 2fr 1fr; height: clamp(240px, 62vw, 420px); } #view-detail .pdv-mosaic-grid .pdv-tile:nth-child(n+4) { display: none; } #view-detail .pdv-mosaic-grid[data-n="4"] .pdv-tile:nth-child(4) { grid-column: auto; } #view-detail .pdv-stats, #view-detail .pdv-stats[data-n="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } #view-detail .pdv-stat + .pdv-stat { border-left: 0; } #view-detail .pdv-stat:nth-child(even) { border-left: 1px solid var(--pd-line); } #view-detail .pdv-stat:nth-child(n+3) { border-top: 1px solid var(--pd-line); } #view-detail .pdv-loc-grid { grid-template-columns: 1fr; } #view-detail .map-embed { min-height: 260px; } #view-detail #similar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { #view-detail > .container { padding-left: 16px; padding-right: 16px; } #view-detail .pdv-mosaic-grid, #view-detail .pdv-mosaic-grid[data-n="4"], #view-detail .pdv-mosaic-grid[data-n="5"] { border-radius: 14px; gap: 6px; } #view-detail .pdv-all { right: 10px; bottom: 10px; padding: 0 12px; } #view-detail .pdv-head { align-items: flex-start; } #view-detail .detail-share { flex-wrap: wrap !important; } #view-detail .pdv-stat { padding: 16px; } #view-detail .pdv-stat-v { font-size: 22px; } #view-detail .pdv-mi { grid-template-columns: 1fr; } #view-detail .pdv-mi-out { border-left: 0; border-top: 1px solid var(--pd-line); } #view-detail .pdv-rv-empty { grid-template-columns: 1fr; } #view-detail .pdv-rv-score { border-right: 0; border-bottom: 1px solid var(--pd-line); } #view-detail .pdv-alert-form { flex-direction: column; } #view-detail .pdv-list-free { flex-direction: column; align-items: flex-start; } #view-detail .pdv-list-free a { margin-left: 0; } #view-detail #similar-grid { grid-template-columns: minmax(0, 1fr); } #view-detail .pdv-transit span { margin-left: 46px; } } .detail-sticky-cta .pdv-cta-price { flex: 1 1 auto; min-width: 0; align-self: center; font-size: 15px; font-weight: 800; color: #121212; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .detail-sticky-cta .pdv-cta-price:empty { display: none; } .detail-sticky-cta a.wa, .detail-sticky-cta a.pdv-cta-enq { flex: 0 0 auto; min-height: 44px; padding: 0 16px; font-size: 14px; } .detail-sticky-cta a.pdv-cta-enq { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-pill); background: #121212; color: #fff; font-weight: 700; text-decoration: none; } .r697-sec { --r697-gold: #1F4A75; --r697-tint: #F9F6F0; --r697-line: rgba(80,60,40,.16); --r697-ink: #141414; --r697-mut: #6B6158; max-width: var(--container, 1208px); margin: 0 auto; padding: var(--pl-sec-y, 56px) 24px 8px; color: var(--r697-ink); box-sizing: border-box; } .r697-sec *, .r697-sec *::before, .r697-sec *::after { box-sizing: border-box; } .r697-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 0 0 var(--pl-block-gap, 24px); } .r697-head-txt { min-width: 0; } .r697-eyebrow { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--r697-gold); } .r697-h { margin: 0; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: var(--r697-ink); } .r697-sub { margin: var(--pl-head-gap, 12px) 0 0; max-width: 520px; font-size: 16px; line-height: var(--pl-leading, 1.55); color: var(--r697-mut); } .r697-sec[data-deal="buy"] .r697-only-rent, .r697-sec:not([data-deal="buy"]) .r697-only-buy { display: none; } .r697-more { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15px; font-weight: 700; color: var(--r697-ink); text-decoration: none; } .r697-more > span { border-bottom: 1.5px solid currentColor; padding-bottom: 2px; } .r697-more:hover { color: var(--r697-gold); } .r697-sec a:focus-visible, .r697-sec button:focus-visible { outline: 2px solid #1F4E79; outline-offset: 2px; } .r697-fs-wrap { position: relative; } .r697-strip { display: flex; gap: var(--pl-card-gap, 22px); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px 2px 14px; } .r697-strip::-webkit-scrollbar { display: none; } .r697-strip > * { flex: 0 0 calc((100% - 3 * var(--pl-card-gap, 22px)) / 4); min-width: 0; scroll-snap-align: start; } @media (max-width: 1080px) { .r697-strip > * { flex-basis: calc((100% - 2 * var(--pl-card-gap, 22px)) / 3); } } @media (max-width: 780px) { .r697-strip > * { flex-basis: calc((100% - var(--pl-card-gap, 22px)) / 2); } } @media (max-width: 560px) { .r697-strip > * { flex-basis: 84%; } } .r697-nav { position: absolute; top: 50%; z-index: 3; width: 48px; height: 48px; margin-top: -31px; border-radius: 50%; border: 1px solid var(--r697-line); background: #fff; color: var(--r697-ink); box-shadow: 0 4px 14px rgba(20,17,14,.16); display: inline-flex; align-items: center; justify-content: center; font-size: 26px; line-height: 1; cursor: pointer; padding: 0 0 3px; } .r697-nav.next { right: -24px; } .r697-nav.prev { left: -24px; } .r697-nav[hidden] { display: none; } @media (max-width: 1280px) { .r697-nav.next { right: -8px; } .r697-nav.prev { left: -8px; } } @media (max-width: 720px) { .r697-nav { display: none; } } .r697-skel { border: 1px solid var(--r697-line); border-radius: 16px; overflow: hidden; background: #fff; } .r697-skel-ph { aspect-ratio: 4 / 3; background: var(--r697-tint); } .r697-skel-b { display: flex; flex-direction: column; gap: 12px; height: 178px; padding: 18px; } .r697-skel-b i { display: block; height: 14px; border-radius: 7px; background: var(--r697-tint); } .r697-skel-b i:nth-child(1) { width: 55%; } .r697-skel-b i:nth-child(2) { width: 80%; height: 18px; } .r697-skel-b i:nth-child(3) { width: 65%; } .r697-fc { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--r697-line); border-radius: 16px; overflow: hidden; transition: box-shadow .18s, transform .18s; } .r697-fc:hover { box-shadow: 0 14px 32px -18px rgba(20,17,14,.30); transform: translateY(-2px); } .r697-fc-link { display: flex; flex-direction: column; flex: 1 1 auto; color: inherit; text-decoration: none; } .r697-fc-ph { position: relative; aspect-ratio: 4 / 3; background: var(--r697-tint); overflow: hidden; } .r697-fc-ph img { width: 100%; height: 100%; object-fit: cover; } .r697-fc-badge { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border-radius: 999px; background: #fff; color: var(--r697-ink); font-size: 13px; font-weight: 700; line-height: 1.2; box-shadow: 0 1px 3px rgba(0,0,0,.12); } .r697-fc-cnt { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: rgba(20,17,14,.74); color: #fff; font-size: 13px; font-weight: 700; line-height: 1.2; } .r697-fav { position: absolute; top: 4px; right: 4px; z-index: 2; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .r697-fav > span { width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--r697-ink); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.16); } .r697-fav[aria-pressed="true"] svg { fill: #D93A5B; stroke: #D93A5B; } .r697-fc-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 18px 18px 16px; } .r697-fc-top { flex: 1 1 auto; min-width: 0; } .r697-fc-meta { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--r697-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .r697-fc-name { margin: 0 0 12px; font-size: 18px; font-weight: 800; line-height: 1.3; color: var(--r697-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .r697-fc-stn { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; font-size: 14px; color: #403B33; } .r697-fc-stn > svg { flex: none; color: var(--r697-mut); } .r697-fc-stn-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .r697-fc-pill { flex: none; padding: 3px 9px; border-radius: 999px; background: var(--r697-tint); color: #5C4A2E; font-size: 13px; font-weight: 700; line-height: 1.3; white-space: nowrap; } .r697-fc-pill.is-walk { background: #E5F3E9; color: #1D7443; } .r697-fc-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--r697-line); } .r697-fc-price { min-width: 0; } .r697-fc-from { display: block; margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--r697-mut); } .r697-fc-amt { display: block; font-size: 20px; font-weight: 800; line-height: 1.2; color: var(--r697-ink); white-space: nowrap; } .r697-fc-cur { margin-right: 5px; font-size: 14px; font-weight: 600; color: var(--r697-mut); } .r697-fc-mo { margin-left: 2px; font-size: 14px; font-weight: 600; color: var(--r697-mut); } .r697-fc-ask { font-size: 16px; } .r697-fc-spec { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--r697-mut); text-align: right; white-space: nowrap; } .r697-area-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } @media (max-width: 1080px) { .r697-area-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 560px) { .r697-area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .r697-at { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; isolation: isolate; background: linear-gradient(160deg, #3A332C, #1C1814); color: #fff; text-decoration: none; } .r697-at img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } .r697-at:hover img { transform: scale(1.04); } .r697-at::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.74) 0%, rgba(0,0,0,.28) 36%, rgba(0,0,0,0) 62%); } .r697-at-body { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; } .r697-at-name { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.25; color: #fff; } .r697-at-n { margin: 4px 0 0; font-size: 14px; font-weight: 600; line-height: 1.3; color: rgba(255,255,255,.92); } .r697-qs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pl-card-gap, 16px); } @media (max-width: 900px) { .r697-qs-grid { grid-template-columns: minmax(0, 1fr); } } .r697-qs-col { padding: 22px 20px 10px; border: 1px solid var(--r697-line); border-radius: 16px; background: #fff; } .r697-qs-cap { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--r697-mut); } .r697-qs-list { list-style: none; margin: 0; padding: 0; } .r697-qs-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 58px; padding: 6px 2px; border: 0; background: transparent; font: inherit; font-size: 15px; font-weight: 700; color: var(--r697-ink); text-align: left; text-decoration: none; cursor: pointer; } .r697-qs-ico { flex: none; width: 36px; height: 36px; border-radius: 8px; background: var(--r697-tint); color: var(--r697-gold); display: inline-flex; align-items: center; justify-content: center; } .r697-qs-rm { font-size: 14px; font-weight: 700; font-style: italic; letter-spacing: -.01em; } .r697-qs-lbl { flex: 1 1 auto; min-width: 0; } .r697-qs-arr { flex: none; color: #8A8278; transition: transform .18s, color .18s; } .r697-qs-row:hover .r697-qs-arr { color: var(--r697-ink); transform: translateX(3px); } @media (max-width: 720px) { .r697-sec { padding: var(--pl-sec-y, 40px) 16px 4px; } .r697-head { flex-direction: column; align-items: flex-start; gap: 8px; } } @media (prefers-reduced-motion: reduce) { .r697-fc, .r697-at img, .r697-qs-arr { transition: none; } .r697-fc:hover, .r697-at:hover img, .r697-qs-row:hover .r697-qs-arr { transform: none; } } html:has(#view-list:not([hidden])), body:has(#view-list:not([hidden])) { background: #FFFFFF !important; } #view-list { background: #FFFFFF; } #view-list .hero, #view-list .filter-bar { background: #FFFFFF !important; } #view-list .unit-flat-card { box-shadow: 0 0 0 1px var(--bc), var(--pa-sh) !important; } #view-list .listings-grid:not(.view-list) .listing-card:not(.is-sponsored) { box-shadow: 0 0 0 1px var(--bc), 0 1px 3px rgba(20,17,14,.06); } #view-list .listings-grid:not(.view-list) .listing-card:not(.is-sponsored):hover { box-shadow: 0 0 0 1px var(--bc), 0 20px 40px -18px rgba(20,17,14,.22); } @media (pointer: coarse) { .hs-tab, .area-toggle .at-btn, .vt-btn, .hq-pill { min-height: 44px; } #back-to-list { display: inline-flex; align-items: center; min-height: 44px; } .fav-btn, .cmp-btn { min-width: 44px; min-height: 44px; } .cmp-btn { top: 60px; } }