/* =========================================================
   Project A — 売却物件情報  (public pages)
   ========================================================= */
:root {
  --ink: #1e1e1e;
  --ink-2: #333333;
  --muted: #4a4a4a;
  --sub: #6b6b6b;
  --line: #d9d7d3;
  --line-2: #e4e2de;
  --paper: #f7f6f4;
  --white: #ffffff;
  --char: #262626;
  --char-2: #1a1a1a;
  --red: #e60012;
  --gold: #b8975a;       /* lines */
  --gold-text: #8a6d2f;  /* text on light */
  --gold-light: #c9a961; /* text on dark */
  --serif: "Zen Old Mincho", "Yu Mincho", serif;
  --sans: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --gutter: 160px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--paper); line-height: 1.8; font-feature-settings: "palt"; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color .2s, opacity .2s; }
a:hover { color: var(--gold-text); }
button { font-family: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.serif { font-family: var(--serif); }
.wrap { padding-inline: var(--gutter); }

/* ---------- label / heading ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 16px; font-size: 11px; letter-spacing: .36em; color: var(--gold-text); text-transform: uppercase; }
.eyebrow::before { content: ""; width: 40px; height: 1px; background: var(--gold); }
.on-dark .eyebrow, .eyebrow.on-dark { color: var(--gold-light); }
.eyebrow.center::after { content: ""; width: 40px; height: 1px; background: var(--gold); }
.sec-head { display: flex; align-items: baseline; gap: 28px; margin-bottom: 48px; }
.sec-head h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 30px; letter-spacing: .12em; line-height: 1.5; }
.sec-head .en { font-size: 11px; letter-spacing: .36em; color: var(--gold-text); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 52px; padding: 0 28px; border: 1px solid var(--ink); font-size: 13px; letter-spacing: .18em; background: transparent; color: var(--ink); cursor: pointer; }
.btn::after { content: ""; width: 40px; height: 1px; background: currentColor; transition: width .25s; }
.btn:hover { color: var(--ink); }
.btn:hover::after { width: 56px; }
.btn--dark { background: var(--char); border-color: var(--char); color: #fff; }
.btn--dark::after { background: var(--gold); }
.btn--dark:hover { color: #fff; }
.btn--ghost-light { border-color: rgba(255,255,255,.6); color: #fff; }
.btn--ghost-light::after { background: var(--gold-light); }
.btn--ghost-light:hover { color: #fff; background: rgba(255,255,255,.06); }
.btn--red { background: var(--red); border-color: var(--red); color: #fff; }
.btn--red:hover { color: #fff; opacity: .9; }
.btn--block { width: 100%; }

/* ---------- header ---------- */
.site-header { position: absolute; inset: 0 0 auto 0; z-index: 20; height: 96px; padding: 0 64px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.18); color: #fff; }
.site-header.solid { position: sticky; top: 0; background: rgba(26,26,26,.92); backdrop-filter: blur(6px); }
.logo img { height: 36px; width: auto; }
.gnav { display: flex; align-items: center; gap: 40px; font-size: 13px; letter-spacing: .12em; }
.gnav a { color: #fff; padding: 8px 0; border-bottom: 1px solid transparent; }
.gnav a:hover { color: var(--gold-light); }
.gnav a[aria-current="page"] { border-bottom-color: var(--gold); }
.gnav .gnav-contact { border: 1px solid rgba(255,255,255,.6); padding: 0 28px; height: 44px; display: flex; align-items: center; letter-spacing: .24em; font-size: 12px; }
.menu-btn, .tel-btn { display: none; width: 48px; height: 48px; align-items: center; justify-content: center; color: #fff; background: transparent; border: 0; cursor: pointer; }

/* ---------- hero (list page) ---------- */
.hero { position: relative; height: 620px; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: var(--char); }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,20,20,.35) 0%, rgba(20,20,20,.15) 40%, rgba(20,20,20,.6) 100%); }
.hero__vertical { position: absolute; left: 56px; top: 200px; z-index: 2; writing-mode: vertical-rl; font-family: var(--serif); font-size: 13px; letter-spacing: .6em; color: var(--gold-light); }
.hero__body { position: relative; z-index: 2; padding: 0 var(--gutter) 88px; display: flex; flex-direction: column; gap: 28px; }
.hero h1 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 60px; letter-spacing: .14em; line-height: 1.3; }
.hero__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.hero__lead { margin: 0; font-size: 15px; line-height: 2.1; letter-spacing: .06em; color: #e8e8e8; }
.crumb { font-size: 11px; letter-spacing: .16em; color: #cfcfcf; }
.crumb a { color: #cfcfcf; }

/* ---------- intro + search ---------- */
.intro { padding-top: 120px; padding-bottom: 120px; display: flex; flex-direction: column; gap: 72px; }
.intro__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 80px; }
.intro h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 34px; line-height: 1.7; letter-spacing: .1em; }
.intro p { margin: 0; max-width: 520px; font-size: 14px; line-height: 2.2; color: var(--muted); }
.search { border-top: 1px solid var(--ink); padding-top: 36px; display: flex; flex-direction: column; gap: 36px; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px 44px; }
.tab { height: 44px; padding: 0; background: none; border: 0; border-bottom: 1px solid transparent; font-size: 15px; letter-spacing: .12em; color: var(--sub); cursor: pointer; }
.tab .n { margin-left: 10px; font-family: var(--serif); font-size: 13px; }
.tab[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--gold); }
.tab[aria-pressed="true"] .n { color: var(--gold-text); }
.fields { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 36px; align-items: end; }
.field { display: flex; flex-direction: column; gap: 10px; font-size: 11px; letter-spacing: .28em; color: var(--sub); }
.field select { height: 44px; padding: 0 2px; font: inherit; font-size: 14px; letter-spacing: .04em; color: var(--ink); border: 0; border-bottom: 1px solid #9a9a9a; background: transparent; border-radius: 0; }
.search .btn { height: 52px; }

/* ---------- pick up ---------- */
.pickup { position: relative; height: 780px; margin-bottom: 140px; color: #fff; overflow: hidden; }
.pickup__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.pickup:hover .pickup__img { transform: scale(1.03); }
.pickup::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,20,20,.35), rgba(20,20,20,0) 45%); z-index: 1; }
.pickup__label { position: absolute; left: var(--gutter); top: 64px; z-index: 2; }
.pickup__label .eyebrow { color: #fff; }
.pickup__count { position: absolute; left: var(--gutter); bottom: 64px; z-index: 2; display: flex; align-items: center; gap: 20px; font-family: var(--serif); font-size: 14px; letter-spacing: .2em; }
.pickup__count .bar { width: 120px; height: 1px; background: rgba(255,255,255,.4); position: relative; }
.pickup__count .bar::after { content: ""; position: absolute; left: 0; top: 0; width: 24px; height: 1px; background: var(--gold-light); }
.pickup__panel { position: absolute; right: var(--gutter); bottom: 0; z-index: 2; width: 500px; background: var(--char); padding: 48px 48px 44px; display: flex; flex-direction: column; gap: 20px; }
.pickup__panel .meta { font-family: var(--serif); font-size: 13px; letter-spacing: .2em; color: var(--gold-light); }
.pickup__panel h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 28px; line-height: 1.6; letter-spacing: .08em; }
.pickup__panel .sub { font-size: 12px; color: #cfcfcf; letter-spacing: .04em; }
.kv2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.2); padding-top: 20px; }
.kv2 > div { display: flex; flex-direction: column; gap: 8px; }
.kv2 > div + div { padding-left: 28px; border-left: 1px solid rgba(255,255,255,.2); }
.kv2 .k { font-size: 10px; letter-spacing: .24em; color: #bdbdbd; }
.big { font-family: var(--serif); font-size: 42px; line-height: 1; }
.big small { font-size: 15px; margin-left: 4px; }
.gold { color: var(--gold-light); }

/* ---------- results ---------- */
.results-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 48px; }
.results-head h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 28px; letter-spacing: .12em; }
.results-head .count { margin-left: 20px; font-family: var(--serif); font-size: 15px; letter-spacing: .1em; color: var(--sub); }
.results-head .right { display: flex; align-items: center; gap: 32px; font-size: 12px; color: var(--sub); }
.results-head .field { flex-direction: row; align-items: center; gap: 12px; }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; row-gap: 96px; }
.card { display: flex; flex-direction: column; gap: 24px; color: var(--ink); }
.card[hidden] { display: none; }
.card:hover { color: var(--ink); }
.card__photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #cfcac2; }
.card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s ease; }
.card:hover .card__photo img { transform: scale(1.04); }
.tag { position: absolute; left: 20px; top: 20px; padding: 6px 14px; background: var(--char); color: var(--gold-light); font-size: 11px; letter-spacing: .16em; }
.photos { position: absolute; right: 20px; bottom: 20px; display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: rgba(20,20,20,.6); color: #fff; font-size: 11px; letter-spacing: .14em; }
.card__meta { display: flex; justify-content: space-between; font-family: var(--serif); font-size: 12px; letter-spacing: .2em; color: var(--sub); }
.card__name { font-family: var(--serif); font-size: 22px; font-weight: 500; line-height: 1.5; letter-spacing: .06em; margin: 0; }
.card__access { font-size: 12px; color: var(--muted); letter-spacing: .04em; margin-top: 8px; }
.card:hover .card__name { color: var(--gold-text); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.stats > div { padding: 18px 0; display: flex; flex-direction: column; gap: 8px; }
.stats > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.stats .k { font-size: 10px; letter-spacing: .2em; color: var(--sub); }
.stats .k em { font-style: normal; margin-left: 6px; color: var(--gold-text); }
.stats .v { font-family: var(--serif); font-size: 30px; line-height: 1; }
.stats .v small { font-size: 13px; margin-left: 3px; }
.stats .v.gold { color: var(--gold-text); }
.stats .t { font-size: 14px; line-height: 1.6; }
.card__income { font-size: 12px; color: var(--muted); }

.note { margin: 0; font-size: 12px; line-height: 1.9; color: var(--sub); text-align: center; }
.pager { display: flex; justify-content: center; align-items: center; gap: 32px; font-family: var(--serif); font-size: 15px; }
.pager a { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--sub); }
.pager a[aria-current] { color: var(--ink); border-bottom: 1px solid var(--gold); }
.pager .next { width: auto; gap: 16px; font-family: var(--sans); font-size: 12px; letter-spacing: .24em; color: var(--ink); }
.pager .next::after { content: ""; width: 40px; height: 1px; background: var(--ink); }
.results-foot { padding-top: 56px; padding-bottom: 140px; display: flex; flex-direction: column; align-items: center; gap: 40px; }

/* ---------- owners / contact / footer ---------- */
.owners { display: grid; grid-template-columns: 640px 1fr; background: var(--char); color: #fff; min-height: 560px; }
.owners img { width: 100%; height: 100%; object-fit: cover; }
.owners__body { padding: 88px var(--gutter) 88px 96px; display: flex; flex-direction: column; justify-content: center; gap: 28px; }
.owners h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 34px; line-height: 1.7; letter-spacing: .1em; }
.owners p { margin: 0; font-size: 14px; line-height: 2.2; color: #d0d0d0; }
.owners .btn { align-self: flex-start; }

.contact { padding: 120px var(--gutter); display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.contact p.lead { margin: 0; font-family: var(--serif); font-size: 22px; letter-spacing: .1em; line-height: 1.8; }
.contact__row { display: flex; align-items: center; gap: 64px; margin-top: 12px; }
.tel { font-family: var(--serif); font-size: 40px; letter-spacing: .08em; line-height: 1.2; }
.contact__row small { display: block; font-size: 12px; color: var(--sub); }

.site-footer { background: var(--char-2); color: #c8c8c8; padding: 80px var(--gutter); display: flex; justify-content: space-between; gap: 64px; font-size: 12px; letter-spacing: .06em; line-height: 1.9; }
.site-footer .logo img { height: 30px; margin-bottom: 8px; }
.site-footer .info { display: flex; flex-direction: column; gap: 12px; }
.site-footer .lic { color: #a8a8a8; }
.site-footer nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 72px; row-gap: 14px; align-content: start; letter-spacing: .1em; }
.site-footer nav a { color: #c8c8c8; }
.site-footer nav a:hover { color: var(--gold-light); }
.copy { display: block; margin-top: 16px; color: #8a8a8a; }

/* =========================================================
   Detail page
   ========================================================= */
.d-hero { position: relative; height: 860px; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: var(--char); }
.d-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.d-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,20,20,.35) 0%, rgba(20,20,20,0) 25%, rgba(20,20,20,0) 50%, rgba(20,20,20,.7) 100%); }
.d-hero__body { position: relative; z-index: 2; padding: 0 var(--gutter) 72px; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.d-hero__body .left { display: flex; flex-direction: column; gap: 22px; }
.d-hero h1 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 46px; letter-spacing: .1em; line-height: 1.4; }
.d-hero .addr { font-size: 14px; letter-spacing: .08em; color: #e8e8e8; }
.gallery-btn { display: inline-flex; align-items: center; gap: 14px; height: 52px; padding: 0 24px; background: rgba(20,20,20,.55); border: 1px solid rgba(255,255,255,.5); color: #fff; font-size: 12px; letter-spacing: .2em; cursor: pointer; }
.gallery-btn:hover { color: #fff; background: rgba(20,20,20,.75); }

.summary { padding-top: 112px; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 80px; align-items: start; }
.pricing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pricing > div { display: flex; flex-direction: column; gap: 12px; }
.pricing > div + div { padding-left: 48px; border-left: 1px solid var(--line); }
.pricing .k { font-size: 11px; letter-spacing: .2em; color: var(--sub); }
.pricing .v { font-family: var(--serif); font-weight: 500; font-size: 80px; line-height: 1; }
.pricing .v small { font-size: 22px; margin-left: 6px; }
.pricing .v.gold { color: var(--gold-text); }
.pricing .s { font-size: 12px; color: var(--muted); }
.facts { margin: 40px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.facts > div { padding: 26px 0; display: flex; flex-direction: column; gap: 10px; }
.facts > div + div { padding-left: 28px; border-left: 1px solid var(--line); }
.facts dt { font-size: 11px; letter-spacing: .24em; color: var(--sub); }
.facts dd { margin: 0; font-family: var(--serif); font-size: 22px; }
.lead-text { margin: 0; font-size: 15px; line-height: 2.3; color: var(--ink-2); letter-spacing: .04em; }
.inquiry { position: sticky; top: 120px; background: var(--char); color: #fff; padding: 44px 40px; display: flex; flex-direction: column; gap: 16px; }
.inquiry p { margin: 0 0 8px; font-family: var(--serif); font-size: 18px; line-height: 1.8; letter-spacing: .06em; }
.inquiry .btn { width: 100%; }
.inquiry .telbox { margin-top: 12px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.18); display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #bdbdbd; }
.inquiry .telbox a { font-family: var(--serif); font-size: 30px; letter-spacing: .08em; color: #fff; }

.block { padding-top: 140px; }
.mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 280px 280px; gap: 16px; }
.mosaic button { position: relative; padding: 0; border: 0; overflow: hidden; cursor: zoom-in; background: #cfcac2; }
.mosaic button:first-child { grid-column: span 2; grid-row: span 2; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.mosaic button:hover img { transform: scale(1.04); }
.mosaic .cap { position: absolute; left: 20px; bottom: 16px; font-family: var(--serif); font-size: 12px; letter-spacing: .3em; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.mosaic .more { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #fff; cursor: pointer; }
.mosaic .more img { position: absolute; inset: 0; filter: brightness(.45); }
.mosaic .more span { position: relative; z-index: 1; }
.mosaic .more .num { font-family: var(--serif); font-size: 30px; }
.mosaic .more .txt { font-size: 12px; letter-spacing: .2em; }
.chips { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }
.chip { height: 44px; padding: 0 20px; font-size: 12px; letter-spacing: .12em; background: transparent; color: var(--ink); border: 1px solid #9a9a9a; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--char); color: #fff; border-color: var(--char); }

.invest { background: #fff; border-top: 2px solid var(--gold); padding: 56px 64px; display: flex; flex-direction: column; gap: 48px; }
.invest__kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.invest__kpi > div { display: flex; flex-direction: column; gap: 12px; padding: 0 32px; }
.invest__kpi > div:first-child { padding-left: 0; }
.invest__kpi > div + div { border-left: 1px solid var(--line-2); }
.invest__kpi .k { font-size: 11px; letter-spacing: .16em; color: var(--sub); }
.invest__kpi .v { font-family: var(--serif); font-size: 44px; line-height: 1; }
.invest__kpi .v small { font-size: 18px; margin-left: 4px; }
.invest__kpi .v.gold { color: var(--gold-text); }
.invest__kpi .s { font-size: 12px; color: var(--muted); }
.invest__tables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
.ledger { margin: 0; display: grid; grid-template-columns: 1fr auto; font-size: 14px; align-content: start; }
.ledger .h { grid-column: span 2; padding-bottom: 12px; border-bottom: 1px solid var(--ink); font-size: 12px; letter-spacing: .2em; }
.ledger dt, .ledger dd { padding: 16px 0; border-bottom: 1px solid var(--line-2); }
.ledger dt { color: var(--muted); }
.ledger dd { margin: 0; font-family: var(--serif); text-align: right; }
.ledger dd.small { font-family: var(--sans); font-size: 12px; color: var(--muted); }
.ledger > :nth-last-child(-n+2) { border-bottom: 0; }
.invest__foot { display: flex; justify-content: space-between; align-items: center; gap: 48px; padding-top: 32px; border-top: 1px solid var(--line-2); }
.invest__foot p { margin: 0; font-size: 12px; line-height: 1.9; color: var(--sub); }

.points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.point { display: flex; flex-direction: column; gap: 20px; }
.point figure { margin: 0; position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.point figure img { width: 100%; height: 100%; object-fit: cover; }
.point .no { position: absolute; left: 20px; top: 14px; font-family: var(--serif); font-size: 36px; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.point h3 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 20px; letter-spacing: .06em; }
.point p { margin: 0; font-size: 14px; line-height: 2.1; color: var(--muted); }

.honest { background: #fff; border-top: 2px solid var(--gold); padding: 64px 72px; display: grid; grid-template-columns: 320px 1fr; gap: 80px; }
.honest h2 { margin: 18px 0; font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.7; letter-spacing: .08em; }
.honest .side p { margin: 0; font-size: 13px; line-height: 2; color: var(--muted); }
.honest dl { margin: 0; display: grid; grid-template-columns: 140px 1fr; }
.honest dt, .honest dd { padding: 24px 0; border-bottom: 1px solid var(--line-2); }
.honest dt { font-size: 13px; letter-spacing: .12em; }
.honest dd { margin: 0; font-size: 14px; line-height: 1.9; color: var(--ink-2); }
.honest dl > :nth-last-child(-n+2) { border-bottom: 0; }

.fullbleed { margin-top: 140px; position: relative; height: 600px; overflow: hidden; color: #fff; }
.fullbleed img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fullbleed::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,20,20,.55), rgba(20,20,20,0) 55%); }
.fullbleed .cap { position: absolute; left: var(--gutter); bottom: 72px; z-index: 2; display: flex; flex-direction: column; gap: 14px; }
.fullbleed .cap .eyebrow { color: #fff; }
.fullbleed .cap p { margin: 0; font-family: var(--serif); font-size: 30px; line-height: 1.7; letter-spacing: .1em; }

.outline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 72px; border-top: 1px solid var(--ink); }
.outline dl { margin: 0; display: grid; grid-template-columns: 150px 1fr; font-size: 14px; }
.outline dt, .outline dd { padding: 20px 0; border-bottom: 1px solid var(--line); }
.outline dt { font-size: 12px; letter-spacing: .14em; color: var(--sub); }
.outline dd { margin: 0; letter-spacing: .04em; }
.small-note { display: block; margin-top: 24px; font-size: 12px; color: var(--sub); }

.access { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 72px; }
.access .map { height: 400px; overflow: hidden; }
.access .map img { width: 100%; height: 100%; object-fit: cover; }
.access ul { margin: 0; padding: 0; list-style: none; font-size: 14px; border-top: 1px solid var(--ink); }
.access li { display: flex; justify-content: space-between; padding: 20px 0; border-bottom: 1px solid var(--line); }
.access li span:last-child { font-family: var(--serif); }

.d-contact { margin-top: 140px; background: var(--char); color: #fff; padding: 104px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.d-contact p { margin: 20px 0 0; font-family: var(--serif); font-size: 24px; line-height: 1.8; letter-spacing: .08em; }
.d-contact .btns { display: flex; flex-direction: column; gap: 16px; width: 380px; }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(15,15,15,.94); display: none; align-items: center; justify-content: center; padding: 64px; }
.lightbox.open { display: flex; }
.lightbox img { max-height: 80vh; width: auto; }
.lightbox figcaption { position: absolute; left: 64px; bottom: 32px; color: #fff; font-family: var(--serif); letter-spacing: .2em; font-size: 13px; }
.lb-btn { position: absolute; width: 56px; height: 56px; border: 1px solid rgba(255,255,255,.4); background: transparent; color: #fff; font-size: 20px; cursor: pointer; }
.lb-close { top: 24px; right: 24px; }
.lb-prev { left: 24px; top: 50%; }
.lb-next { right: 24px; top: 50%; }

/* sticky mobile CTA */
.sp-cta { display: none; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1200px) {
  :root { --gutter: 64px; }
  .fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .summary { grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; }
  .owners { grid-template-columns: 1fr 1fr; }
  .owners__body { padding: 72px var(--gutter) 72px 64px; }
}
@media (max-width: 960px) {
  .gnav { display: none; }
  .menu-btn, .tel-btn { display: inline-flex; }
  .site-header { padding: 0 8px 0 20px; height: 64px; }
  .logo img { height: 28px; }
  .grid { column-gap: 32px; row-gap: 64px; }
  .summary { grid-template-columns: 1fr; }
  .inquiry { position: static; }
  .invest__tables, .outline, .access { grid-template-columns: 1fr; }
  .invest__kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .invest__kpi > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .points { grid-template-columns: 1fr; }
  .honest { grid-template-columns: 1fr; gap: 24px; padding: 48px 40px; }
  .pickup__panel { right: 0; left: auto; width: min(500px, 100%); }
}
@media (max-width: 768px) {
  :root { --gutter: 24px; }
  body { font-size: 14px; }
  .hero { height: 520px; }
  .hero__vertical { display: none; }
  .hero__body { padding-bottom: 48px; gap: 18px; }
  .hero h1 { font-size: 36px; }
  .hero__foot { flex-direction: column; align-items: flex-start; gap: 16px; }
  .hero__lead { font-size: 13px; }
  .intro { padding-top: 56px; padding-bottom: 56px; gap: 40px; }
  .intro__row { flex-direction: column; align-items: flex-start; gap: 20px; }
  .intro h2 { font-size: 24px; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; gap: 24px; scrollbar-width: none; border-bottom: 1px solid var(--line); }
  .tab { flex-shrink: 0; font-size: 14px; }
  .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .fields .btn { grid-column: span 2; }
  .pickup { height: auto; margin-bottom: 72px; display: flex; flex-direction: column; }
  .pickup__img { position: relative; height: 320px; }
  .pickup::before { display: none; }
  .pickup__label { top: 20px; left: 24px; }
  .pickup__count { display: none; }
  .pickup__panel { position: relative; width: 100%; padding: 32px 24px; }
  .big { font-size: 34px; }
  .results-head { flex-direction: column; align-items: flex-start; margin-bottom: 32px; }
  .results-head .right { width: 100%; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .grid { grid-template-columns: 1fr; row-gap: 56px; margin-inline: calc(var(--gutter) * -1); }
  .card { gap: 16px; }
  .card > :not(.card__photo) { margin-inline: var(--gutter); }
  .card__photo { aspect-ratio: 13 / 10; }
  .card__name { font-size: 19px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats > div:nth-child(3) { display: none; }
  .stats .v { font-size: 28px; }
  .results-foot { padding-bottom: 72px; }
  .owners { grid-template-columns: 1fr; }
  .owners img { height: 240px; }
  .owners__body { padding: 48px 24px; gap: 20px; }
  .owners h2 { font-size: 24px; }
  .contact { padding: 64px 24px; }
  .contact p.lead { font-size: 17px; }
  .contact__row { flex-direction: column; gap: 20px; width: 100%; }
  .contact__row .btn { width: 100%; }
  .tel { font-size: 30px; }
  .site-footer { flex-direction: column; padding: 48px 24px 96px; gap: 32px; }
  .site-footer nav { column-gap: 24px; }
  .sec-head { margin-bottom: 28px; gap: 16px; flex-wrap: wrap; }
  .sec-head h2 { font-size: 22px; }
  .block { padding-top: 80px; }
  .d-hero { height: 560px; }
  .d-hero__body { flex-direction: column; align-items: flex-start; padding-bottom: 40px; gap: 20px; }
  .d-hero h1 { font-size: 26px; }
  .summary { padding-top: 48px; }
  .pricing .v { font-size: 48px; }
  .pricing > div + div { padding-left: 20px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts > div:nth-child(3) { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .facts > div:nth-child(4) { border-top: 1px solid var(--line); }
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 220px 140px 140px; gap: 8px; }
  .mosaic button:first-child { grid-row: span 1; }
  .invest { padding: 32px 20px; gap: 32px; }
  .invest__kpi > div { padding: 0 16px; }
  .invest__kpi .v { font-size: 32px; }
  .invest__foot { flex-direction: column; align-items: flex-start; }
  .fullbleed { height: 360px; margin-top: 80px; }
  .fullbleed .cap p { font-size: 20px; }
  .outline dl { grid-template-columns: 110px 1fr; }
  .access .map { height: 260px; }
  .d-contact { margin-top: 80px; flex-direction: column; align-items: stretch; padding: 56px 24px; }
  .d-contact .btns { width: 100%; }
  .sp-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(26,26,26,.96); }
  .sp-cta .btn { min-height: 48px; padding: 0 16px; font-size: 12px; letter-spacing: .1em; }
  .sp-cta .btn::after { display: none; }
  .sp-cta .btn { justify-content: center; }
}

/* header on scroll + drawer */
.site-header.scrolled { position: fixed; height: 72px; background: rgba(26,26,26,.94); backdrop-filter: blur(6px); animation: hdrIn .3s ease; }
@keyframes hdrIn { from { transform: translateY(-100%); } to { transform: none; } }
.drawer { position: fixed; inset: 0; z-index: 30; background: rgba(20,20,20,.97); display: none; padding: 96px 32px 40px; }
.drawer.open { display: block; }
.drawer nav { display: flex; flex-direction: column; }
.drawer a { color: #fff; font-family: var(--serif); font-size: 18px; letter-spacing: .12em; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.drawer a[aria-current="page"] { color: var(--gold-light); }
.drawer .gnav-contact { margin-top: 24px; border: 1px solid var(--gold); text-align: center; font-family: var(--sans); font-size: 13px; letter-spacing: .24em; }
.menu-btn[aria-expanded="true"] { position: relative; z-index: 40; }
@media (max-width: 960px) { .site-header { z-index: 35; } }
@media (max-width: 768px) {
  .honest { padding: 36px 20px; }
  .honest dl { grid-template-columns: 88px 1fr; }
  .honest dt, .honest dd { padding: 18px 0; }
  body:has(.sp-cta) { padding-bottom: 72px; }
}

/* ---- portrait (smartphone) art direction ---- */
picture { display: contents; }
@media (max-width: 768px) {
  .hero { height: min(100svh, 760px); min-height: 560px; }
  .pickup__img { height: 72svh; min-height: 460px; }
  .card__photo { aspect-ratio: 4 / 5; }
  .d-hero { height: min(100svh, 780px); min-height: 600px; }
  .fullbleed { height: 80svh; min-height: 480px; }
  .point figure { aspect-ratio: 4 / 3; }
}

/* =========================================================
   本番実装で追加したスタイル
   ========================================================= */
a.tab { display: inline-flex; align-items: center; }
.noimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #cfcac2; color: #8f897f; font-size: 11px; letter-spacing: .3em; }
.card__photo .noimg, .d-hero .noimg { position: absolute; }
.empty-note { padding: 80px 0; text-align: center; }
.preview-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--gold); color: var(--ink); text-align: center; font-size: 13px; font-weight: 700; padding: 10px 16px; }

/* ギャラリー：枚数が少ないときの並び */
.mosaic[hidden] { display: none; }
.mosaic button[hidden] { display: none; }
.mosaic.n1 { grid-template-columns: 1fr; grid-template-rows: 560px; }
.mosaic.n1 button:first-child { grid-column: auto; grid-row: auto; }
.mosaic.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 460px; }
.mosaic.n2 button:first-child { grid-column: auto; grid-row: auto; }
.mosaic.n3 { grid-template-columns: 2fr 1fr; }
.mosaic.n3 button:first-child { grid-column: auto; }
.mosaic.n4 { grid-template-columns: 2fr 1fr 1fr; }
.mosaic.n4 button:first-child { grid-column: auto; }
.mosaic.n4 button:nth-child(4) { grid-column: span 2; }
.mosaic.is-plan button { background: #fff; border: 1px solid var(--line); }
.mosaic.is-plan img { object-fit: contain; padding: 16px; }
.mosaic.is-plan .cap { color: var(--ink); text-shadow: none; }
.access .map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.35); }

/* ---------- 下層ページ（お問い合わせ・404） ---------- */
.page-head { background: var(--char-2); color: #fff; padding-top: 180px; padding-bottom: 72px; }
.page-head .wrap { display: flex; flex-direction: column; gap: 20px; }
.page-head h1 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 40px; letter-spacing: .14em; }
.form-wrap { padding-top: 72px; padding-bottom: 140px; max-width: 1120px; margin: 0 auto; box-sizing: content-box; }
.steps { display: flex; gap: 40px; margin: 0 0 48px; padding: 0; list-style: none; font-size: 13px; letter-spacing: .12em; color: var(--sub); border-bottom: 1px solid var(--line); }
.steps li { padding: 0 0 14px; display: flex; gap: 10px; align-items: baseline; border-bottom: 1px solid transparent; margin-bottom: -1px; }
.steps li span { font-family: var(--serif); }
.steps li[aria-current] { color: var(--ink); border-bottom-color: var(--gold); }
.steps li[aria-current] span { color: var(--gold-text); }
.form-lead { margin: 0 0 40px; font-size: 14px; line-height: 2.1; color: var(--muted); }
.form-lead a { text-decoration: underline; text-underline-offset: 3px; }
.form-alert { margin: 0 0 32px; padding: 16px 20px; border-left: 3px solid var(--red); background: #fff; color: #b0000e; font-size: 14px; }
.cform { display: flex; flex-direction: column; gap: 32px; }
.cform__prop { display: flex; gap: 20px; align-items: center; padding: 16px; background: #fff; border: 1px solid var(--line); }
.cform__prop img { width: 120px; height: 80px; object-fit: cover; flex-shrink: 0; }
.cform__prop div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cform__prop span { font-size: 11px; letter-spacing: .16em; color: var(--gold-text); }
.cform__prop b { font-family: var(--serif); font-weight: 500; font-size: 18px; letter-spacing: .06em; }
.cform__prop small { font-size: 12px; color: var(--sub); }
.cf { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; font-size: 14px; letter-spacing: .06em; }
.cf > span, .cf legend { font-weight: 500; padding: 0; margin-bottom: 10px; }
.cf em { font-style: normal; margin-left: 10px; padding: 1px 8px; font-size: 10px; letter-spacing: .1em; background: var(--red); color: #fff; vertical-align: 2px; }
.cf input[type=text], .cf input[type=email], .cf input[type=tel], .cf textarea { width: 100%; font: inherit; font-size: 16px; padding: 14px 16px; border: 1px solid #b9b6b0; background: #fff; border-radius: 0; color: var(--ink); }
.cf textarea { line-height: 1.9; resize: vertical; }
.cf input:focus, .cf textarea:focus { outline: 2px solid var(--gold); outline-offset: -1px; }
.cf.is-err input, .cf.is-err textarea { border-color: #d98a8a; background: #fffafa; }
.form-err { font-size: 13px; color: #b0000e; }
.cf-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.cf-row[hidden] { display: none; }
.radios { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.radios--inline { display: flex; flex-wrap: wrap; gap: 10px; }
.radios label { position: relative; cursor: pointer; }
.radios input { position: absolute; opacity: 0; }
.radios span { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 18px; border: 1px solid #b9b6b0; background: #fff; font-size: 14px; }
.radios span::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1px solid #9a9a9a; flex-shrink: 0; }
.radios input:checked + span { border-color: var(--char); box-shadow: inset 0 0 0 1px var(--char); }
.radios input:checked + span::before { border: 4px solid var(--char); }
.radios input:focus-visible + span { outline: 2px solid var(--gold); }
.agree label { display: flex; gap: 12px; align-items: center; cursor: pointer; }
.agree input { width: 20px; height: 20px; accent-color: var(--char); }
.agree a { text-decoration: underline; text-underline-offset: 3px; }
.agree small { font-size: 12px; color: var(--sub); }
.form-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.form-actions .btn { min-width: 280px; }
.btn--line { border-color: var(--ink); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.confirm { display: grid; grid-template-columns: 220px 1fr; margin: 0 0 48px; border-top: 1px solid var(--ink); font-size: 15px; }
.confirm dt, .confirm dd { margin: 0; padding: 20px 0; border-bottom: 1px solid var(--line); }
.confirm dt { color: var(--sub); font-size: 13px; letter-spacing: .08em; }
.confirm dd { line-height: 1.9; word-break: break-word; }
.done { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding: 24px 0; }
.done h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 26px; letter-spacing: .08em; line-height: 1.6; }
.done p { margin: 0; font-size: 14px; line-height: 2.1; color: var(--muted); }
.page-form .site-header { background: transparent; }

@media (max-width: 960px) {
  .page-head { padding-top: 140px; padding-bottom: 48px; }
  .page-head h1 { font-size: 30px; }
  .mosaic.n3, .mosaic.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 220px 140px; }
  .mosaic.n3 button:first-child, .mosaic.n4 button:first-child { grid-column: span 2; grid-row: auto; }
  .mosaic.n4 { grid-template-rows: 220px 140px 140px; }
  .mosaic.n4 button:nth-child(4) { grid-column: span 2; }
  .mosaic.n1 { grid-template-rows: 300px; }
  .mosaic.n2 { grid-template-rows: 240px; }
}
@media (max-width: 768px) {
  .form-wrap { padding-top: 40px; padding-bottom: 96px; }
  .cf-row { grid-template-columns: 1fr; gap: 32px; }
  .confirm { grid-template-columns: 1fr; }
  .confirm dt { padding-bottom: 0; border-bottom: 0; }
  .confirm dd { padding-top: 6px; }
  .form-actions .btn { min-width: 0; width: 100%; }
  .steps { gap: 24px; }
  .cform__prop img { width: 88px; height: 64px; }
  .preview-banner { bottom: 76px; font-size: 12px; }
}
.ledger { grid-template-columns: minmax(12em, 1fr) auto; }
.ledger dd { padding-left: 24px; }
.ledger dd.full { padding-left: 0; }
.ledger dt.full { grid-column: span 2; border-bottom: 0; padding-bottom: 4px; }
.ledger dd.full { grid-column: span 2; text-align: left; padding-top: 0; line-height: 1.9; }
.access .map { background: #e8e6e1; }
@media (max-width: 480px) {
  .pricing .v { font-size: 38px; white-space: nowrap; }
  .pricing .v small { font-size: 13px; margin-left: 3px; }
  .pricing .v.long { font-size: 28px; }
  .pricing > div + div { padding-left: 16px; }
}