/* ── 昼（生成と墨）を基準に、夜（藍鉄と金茶）へ反転する ────────────── */
:root {
  /* Meiryo UI 優先。無い環境は OS 標準の日本語 UI 書体へ落とす */
  --ui: "Meiryo UI", Meiryo, "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", sans-serif;
  --paper:      #F2EDE3;
  --paper-2:    #E8E1D4;
  --paper-3:    #DCD3C2;
  --ink:        #14161A;
  --ink-2:      #3E4249;
  --ink-3:      #6E7480;
  --bengara:    #A2483A;   /* 弁柄 — 差し色はここだけ */
  --koke:       #5F6B4E;   /* 苔 */
  --kincha:     #B8894A;   /* 金茶 */
  --line:       #C9BFAC;
  --line-soft:  #DED5C5;
  --panel:      #FBF8F2;
  --shadow:     0 1px 2px rgba(20,22,26,.06), 0 8px 24px rgba(20,22,26,.06);

  /* パララックス空（昼） */
  --sky-a: #DCE4E8;
  --sky-b: #F2EDE3;
  --far:   #B9C3C6;
  --mid:   #8D9A9C;
  --near:  #5A6668;
  --front: #2C3437;

  --wet:   #E3E9F0;        /* 間取り図：水回り */
  --out:   #E9EDE6;        /* 間取り図：屋外 */
  --room:  #FFFFFF;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:     #14181C;
    --paper-2:   #1B2026;
    --paper-3:   #232A31;
    --ink:       #ECE6DA;
    --ink-2:     #B6B1A6;
    --ink-3:     #8A8781;
    --bengara:   #D0705F;
    --koke:      #93A37C;
    --kincha:    #D8A860;
    --line:      #333C45;
    --line-soft: #29313A;
    --panel:     #191F25;
    --shadow:    0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
    --sky-a: #0F1418;
    --sky-b: #14181C;
    --far:   #1E272E;
    --mid:   #27333B;
    --near:  #313F49;
    --front: #0B0F12;
    --wet:   #1E2933;
    --out:   #1D2621;
    --room:  #232A31;
  }
}
:root[data-theme="dark"] {
  --paper:     #14181C;  --paper-2: #1B2026;  --paper-3: #232A31;
  --ink:       #ECE6DA;  --ink-2:   #B6B1A6;  --ink-3:   #8A8781;
  --bengara:   #D0705F;  --koke:    #93A37C;  --kincha:  #D8A860;
  --line:      #333C45;  --line-soft: #29313A; --panel:   #191F25;
  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
  --sky-a: #0F1418; --sky-b: #14181C; --far: #1E272E;
  --mid:   #27333B; --near: #313F49; --front: #0B0F12;
  --wet:   #1E2933; --out: #1D2621;  --room: #232A31;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--ui); font-weight: 700; margin: 0; text-wrap: balance; }
a { color: inherit; }
.mono { font-family: var(--ui); font-variant-numeric: tabular-nums; }

/* ── サンプル表記 ──────────────────────────────────────────── */
.band {
  background: var(--bengara); color: #FBF8F2;
  font-size: 11.5px; letter-spacing: .06em;
  padding: 7px 20px; text-align: center;
  position: relative; z-index: 60;
}

/* ── ヒーロー：5層パララックス ──────────────────────────────── */
.hero {
  position: relative;
  height: 78vh; min-height: 500px; max-height: 780px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sky-a) 0%, var(--sky-b) 64%);
}
/* 奥の層ほど大きく「遅れる」＝下へずれる。手前が奥を追い越さない */
.layer {
  position: absolute; left: 0; right: 0;
  will-change: transform;
  pointer-events: none;
}
.layer svg { display: block; width: 100%; height: auto; }
/* 層の下に同じ色を延ばしておく。ずれても地が抜けない */
.layer::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%;
  height: 60vh; background: var(--fill, transparent);
}

.motes { position: absolute; inset: 0; pointer-events: none; }
.mote {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: var(--kincha); opacity: .0;
  animation: drift linear infinite;
}
@keyframes drift {
  0%   { opacity: 0;   transform: translate3d(0, 0, 0); }
  12%  { opacity: .55; }
  88%  { opacity: .45; }
  100% { opacity: 0;   transform: translate3d(24px, -160px, 0); }
}

.hero-copy {
  position: absolute; z-index: 5;
  top: 7%; right: 6vw; max-height: 80%;
  display: flex; gap: 22px;
  writing-mode: vertical-rl;
  text-orientation: upright;
}
.hero-copy h1 {
  font-size: clamp(30px, 4.4vw, 54px);
  line-height: 1.5; letter-spacing: .16em;
  color: var(--ink);
  text-shadow: 0 1px 12px var(--paper);
}
.hero-copy .sub {
  font-size: 13px; letter-spacing: .3em; color: var(--ink-2);
  align-self: flex-start; padding-top: 4px;
}
/* 一文字ずつ立ち上がる */
.ch {
  display: inline-block; opacity: 0; transform: translateY(-14px);
  transition: opacity .5s ease, transform .55s cubic-bezier(.2,.8,.3,1);
}
.lit .ch { opacity: 1; transform: none; }

.cue {
  position: absolute; left: 50%; bottom: 22px; z-index: 5;
  transform: translateX(-50%);
  font-size: 10.5px; letter-spacing: .28em; color: var(--ink-2);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.cue i { display: block; width: 1px; height: 34px; background: var(--ink-3); animation: cueline 1.9s ease-in-out infinite; transform-origin: top; }
@keyframes cueline { 0%,100% { transform: scaleY(.35); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

/* ── アプリ本体：左固定パネル＋右リスト ──────────────────────── */
.app {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 0;
  max-width: 1320px; margin: 0 auto;
  border-left: 1px solid var(--line-soft);
  border-right: 1px solid var(--line-soft);
}
.panel {
  position: sticky; top: 0; align-self: start;
  height: 100vh; overflow-y: auto;
  padding: 26px 22px 40px;
  background: var(--panel);
  border-right: 1px solid var(--line-soft);
}
.panel h2 { font-size: 15px; letter-spacing: .1em; margin-bottom: 4px; }
.panel .lead { font-size: 11.5px; color: var(--ink-3); letter-spacing: .04em; margin: 0 0 18px; }

.fld { margin-bottom: 20px; }
.fld > label,
.fld > .lbl {
  display: block; font-size: 10.5px; letter-spacing: .18em;
  color: var(--ink-3); margin-bottom: 8px;
}
select {
  width: 100%; padding: 8px 10px; font: inherit; font-size: 13px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: 2px;
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font: inherit; font-size: 12px; padding: 5px 11px; cursor: pointer;
  background: transparent; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 2px;
  transition: background .18s, color .18s, border-color .18s;
}
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip:hover { border-color: var(--ink-2); }

input[type="range"] { width: 100%; accent-color: var(--bengara); }
.rangeval { font-size: 12px; color: var(--ink-2); }

.checks { display: grid; gap: 5px; }
.checks label { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.checks input { accent-color: var(--bengara); }

.reset {
  width: 100%; font: inherit; font-size: 12px; padding: 8px;
  background: transparent; color: var(--ink-3); cursor: pointer;
  border: 1px dashed var(--line); border-radius: 2px;
}
.reset:hover { color: var(--bengara); border-color: var(--bengara); }

/* 碁盤の目の略地図 */
.kmap { margin-bottom: 22px; }
.kmap svg { width: 100%; height: auto; display: block; }
.kcell { fill: var(--paper-2); stroke: var(--line-soft); stroke-width: .5; transition: fill .25s; cursor: pointer; }
.kcell.on { fill: var(--bengara); }
.kcell.dim { fill: var(--paper-3); }
.kmap text { font-size: 3.4px; fill: var(--ink-3); font-family: var(--ui); }

/* ── リスト ────────────────────────────────────────────────── */
.list { padding: 34px 30px 60px; min-width: 0; }
.listhead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.listhead h2 { font-size: 21px; letter-spacing: .06em; }
.hit { font-size: 12.5px; color: var(--ink-3); }
.hit b { font-size: 22px; color: var(--bengara); font-family: var(--ui); font-variant-numeric: tabular-nums; }

.prop {
  display: grid; grid-template-columns: 168px minmax(0,1fr);
  gap: 22px; padding: 22px 0;
  border-top: 1px solid var(--line-soft);
  opacity: 0; transform: translateY(18px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.3,1);
}
.prop.seen { opacity: 1; transform: none; }
.prop.gone { display: none; }
.prop:hover .plan rect.rm { fill: var(--paper-2); }

.plan { background: var(--paper); border: 1px solid var(--line-soft); border-radius: 2px; padding: 8px; }
.plan svg { display: block; width: 100%; height: auto; }
/* 間取り図を線から描く */
.plan .draw { stroke-dasharray: var(--len); }
.prop.seen .plan .draw { animation: draw 1.1s cubic-bezier(.4,0,.2,1) both; }
@keyframes draw { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
.plan .rm { fill: var(--room); opacity: 0; transition: opacity .4s .5s; }
.prop.seen .plan .rm { opacity: 1; }
.plan .rm.wet { fill: var(--wet); }
.plan .rm.out { fill: var(--out); }
.plan .cap { font-size: 4px; fill: var(--ink-3); font-family: var(--ui); opacity: 0; transition: opacity .4s .8s; }
.prop.seen .plan .cap { opacity: 1; }

.body { min-width: 0; }
.tag { display: inline-block; font-size: 10.5px; letter-spacing: .14em; color: var(--koke); border: 1px solid var(--koke); border-radius: 2px; padding: 1px 7px; margin-bottom: 8px; }
.prop h3 { font-size: 19px; letter-spacing: .04em; margin-bottom: 4px; }
.addr { font-size: 12.5px; color: var(--ink-3); margin: 0 0 12px; }
.rent { font-family: var(--ui); font-size: 26px; color: var(--bengara); font-variant-numeric: tabular-nums; line-height: 1.2; }
.rent small { font-size: 12px; color: var(--ink-3); font-family: var(--ui); }
.specs { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 10px 0 12px; padding: 0; list-style: none; font-size: 12.5px; color: var(--ink-2); }
.specs b { font-family: var(--ui); color: var(--ink); font-weight: 500; }
.feats { display: flex; flex-wrap: wrap; gap: 5px; }
.feat { font-size: 11px; padding: 2px 8px; border-radius: 2px; background: var(--paper-2); color: var(--ink-2); }
.note { font-size: 12.5px; color: var(--ink-2); margin: 10px 0 0; }

.empty { padding: 60px 0; text-align: center; color: var(--ink-3); font-size: 14px; display: none; }
.empty.on { display: block; }

/* ── 技術メモ・フッタ ──────────────────────────────────────── */
.tech {
  max-width: 1320px; margin: 0 auto; padding: 34px 30px;
  border-top: 1px solid var(--line-soft);
  border-left: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft);
  background: var(--panel);
}
.tech h2 { font-size: 14px; letter-spacing: .14em; color: var(--ink-3); margin-bottom: 14px; }
.techgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px 26px; }
.techgrid dt { font-size: 12.5px; font-weight: 700; margin-bottom: 2px; }
.techgrid dd { margin: 0; font-size: 12px; color: var(--ink-3); line-height: 1.7; }
/* ── 問い合わせ ────────────────────────────────────────────── */
.contact {
  max-width: 1320px; margin: 0 auto; padding: 44px 30px 54px;
  border-top: 1px solid var(--line-soft);
  border-left: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft);
}
.contact h2 { font-size: 24px; letter-spacing: .06em; margin-bottom: 6px; }
.contact .clead { font-size: 13.5px; color: var(--ink-3); margin: 0 0 26px; max-width: 62ch; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 16px 22px; max-width: 860px; }
.f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.f.wide { grid-column: 1 / -1; }
.f > label { font-size: 11px; letter-spacing: .16em; color: var(--ink-3); }
.f .req { color: var(--bengara); }
.f input[type="text"], .f input[type="email"], .f input[type="tel"], .f textarea, .f select {
  font: inherit; font-size: 14px; padding: 9px 11px; width: 100%;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: 2px;
}
.f textarea { min-height: 118px; resize: vertical; }
.f .err { font-size: 11.5px; color: var(--bengara); min-height: 1.15em; }
.f.bad input, .f.bad textarea, .f.bad select { border-color: var(--bengara); }
.consent { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.consent input { accent-color: var(--bengara); margin-top: 5px; }
.submit {
  font: inherit; font-size: 15px; padding: 13px 42px; margin-top: 4px;
  background: var(--ink); color: var(--paper); border: none; border-radius: 2px; cursor: pointer;
  transition: background .2s, transform .16s;
}
.submit:hover { background: var(--bengara); transform: translateY(-1px); }
.sent { display: none; margin-top: 16px; padding: 12px 14px; border: 1px solid var(--koke); background: var(--paper-2); font-size: 13px; max-width: 860px; }
.sent.on { display: block; }

/* ── ページ上部へ ──────────────────────────────────────────── */
.pagetop {
  position: fixed; right: 20px; bottom: 20px; z-index: 40;
  width: 50px; height: 50px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--ink); color: var(--paper); text-decoration: none;
  box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity .3s, transform .3s, background .2s;
}
.pagetop.on { opacity: 1; pointer-events: auto; transform: none; }
.pagetop:hover { background: var(--bengara); }
.pagetop b { font-size: 15px; line-height: 1; }
.pagetop span { font-size: 7.5px; letter-spacing: .1em; margin-top: 3px; }

footer { max-width: 1320px; margin: 0 auto; padding: 26px 30px 60px; font-size: 12px; color: var(--ink-3); border-left: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .panel { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--line-soft); }
  .list { padding: 26px 20px 50px; }
  .prop { grid-template-columns: 120px minmax(0,1fr); gap: 16px; }
  .hero-copy { right: 5vw; }
}
@media (prefers-reduced-motion: reduce) {
  .layer { transform: none !important; }
  .mote { display: none; }
  .ch, .prop { opacity: 1 !important; transform: none !important; animation: none !important; }
  .plan .draw { stroke-dashoffset: 0 !important; animation: none !important; }
  .plan .rm, .plan .cap { opacity: 1 !important; }
  .cue i { animation: none; }
  * { scroll-behavior: auto !important; }
}
:focus-visible { outline: 2px solid var(--bengara); outline-offset: 2px; }