/* ④ 売主型 ── 分譲デベロッパーのブランドサイト。土地から暮らしまでを物語で見せる */
:root{
  --ink:#121110;--ink-2:#1c1a18;--ivory:#ede8df;--ivory-2:#d9d2c5;--stone:#8c877e;--brass:#b89a62;--brass-2:#d4bb88;--line:rgba(237,232,223,.14);
  --mincho:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
  --en:"Cormorant Garamond",Georgia,serif;
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--ivory);font-family:var(--sans);font-weight:300;line-height:2;letter-spacing:.04em;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1280px;margin:0 auto;padding:0 40px}
.en{font-family:var(--en);font-weight:500;letter-spacing:.24em;text-transform:uppercase;font-size:13px;color:var(--brass)}
.h2{font-family:var(--mincho);font-weight:500;font-size:clamp(28px,3.4vw,46px);line-height:1.6;margin:18px 0 22px;letter-spacing:.08em}
.lead{color:var(--ivory-2);max-width:560px;margin:0;font-size:15px}
.sec{padding:160px 0}
.link{display:inline-flex;align-items:center;gap:16px;font-family:var(--en);letter-spacing:.2em;text-transform:uppercase;font-size:13px;padding-bottom:6px;border-bottom:1px solid var(--brass)}
.link:after{content:"";width:34px;height:1px;background:currentColor;transition:width .3s}
.link:hover:after{width:56px}
.btn{display:inline-flex;align-items:center;justify-content:center;height:58px;padding:0 38px;border:1px solid var(--brass);color:var(--ivory);font-family:var(--mincho);letter-spacing:.18em;transition:background .3s,color .3s}
.btn:hover{background:var(--brass);color:var(--ink)}
.btn.fill{background:var(--brass);color:var(--ink)}

/* header */
.hd{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .4s}
.hd.solid{background:rgba(18,17,16,.92);backdrop-filter:blur(10px)}
.hd .wrap{display:flex;align-items:center;height:88px;gap:40px}
.logo{font-family:var(--en);font-size:22px;letter-spacing:.32em;font-weight:500}
.logo small{display:block;font-family:var(--mincho);font-size:10px;letter-spacing:.3em;color:var(--stone);margin-top:-4px}
.gnav{display:flex;gap:34px;margin-left:auto;font-family:var(--en);font-size:13px;letter-spacing:.2em}
.gnav a{opacity:.85}.gnav a:hover{opacity:1;color:var(--brass-2)}
.hd .btn{height:44px;padding:0 22px;font-size:13px}

/* hero */
.hero{position:relative;height:100vh;min-height:680px;overflow:hidden}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:zoom 18s ease-out forwards}
@keyframes zoom{from{transform:scale(1.14)}to{transform:scale(1)}}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,17,16,.55),rgba(18,17,16,.05) 35%,rgba(18,17,16,.75))}
.hero .copy{position:absolute;right:8vw;top:20vh;z-index:2;writing-mode:vertical-rl;font-family:var(--mincho);font-size:clamp(22px,2.4vw,34px);line-height:2.2;letter-spacing:.32em;opacity:0;animation:fade 2s 1s forwards}
.hero .big{position:absolute;left:40px;bottom:70px;z-index:2;font-family:var(--en);font-weight:400;font-size:clamp(48px,8.4vw,132px);line-height:.95;letter-spacing:.02em;opacity:0;animation:fade 2s .4s forwards}
.hero .big em{color:var(--brass-2);font-style:italic}
.hero .scroll{position:absolute;left:50%;bottom:30px;z-index:2;font-family:var(--en);font-size:11px;letter-spacing:.3em;display:grid;justify-items:center;gap:8px}
.hero .scroll:after{content:"";width:1px;height:50px;background:linear-gradient(var(--ivory),transparent);animation:line 2s infinite}
@keyframes line{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes fade{to{opacity:1}}
.hero .now{position:absolute;right:40px;bottom:70px;z-index:2;border:1px solid var(--line);background:rgba(18,17,16,.5);backdrop-filter:blur(6px);padding:18px 24px;font-size:13px;max-width:300px}
.hero .now b{font-family:var(--mincho);font-weight:500;font-size:17px;display:block;letter-spacing:.1em}

/* statement */
.statement{text-align:center}
.statement p.big{font-family:var(--mincho);font-size:clamp(22px,2.4vw,32px);line-height:2.2;letter-spacing:.12em;margin:40px auto 0;max-width:940px}
.nums{display:grid;grid-template-columns:repeat(3,1fr);margin-top:110px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.nums div{padding:50px 20px;border-right:1px solid var(--line)}
.nums div:last-child{border-right:0}
.nums b{font-family:var(--en);font-weight:400;font-size:clamp(56px,6vw,92px);line-height:1;color:var(--brass-2);display:block}
.nums b small{font-family:var(--mincho);font-size:22px;margin-left:6px;color:var(--ivory)}
.nums span{font-size:14px;color:var(--ivory-2);display:block;margin-top:18px}

/* projects */
.proj-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:60px;flex-wrap:wrap}
.rail{display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 40px 30px max(22px,calc((100vw - 1280px)/2 + 40px));scroll-padding-inline-start:max(22px,calc((100vw - 1280px)/2 + 40px));scrollbar-width:thin;scrollbar-color:var(--brass) transparent}
.pcard{flex:0 0 min(520px,82vw);scroll-snap-align:start}
.pcard .ph{aspect-ratio:4/5;overflow:hidden;position:relative}
.pcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s,filter .6s;filter:saturate(.85)}
.pcard:hover .ph img{transform:scale(1.05);filter:saturate(1)}
.pcard .st{position:absolute;left:20px;top:20px;font-family:var(--en);letter-spacing:.2em;font-size:12px;padding:6px 14px;background:var(--ivory);color:var(--ink)}
.pcard .st.sold{background:transparent;border:1px solid var(--ivory);color:var(--ivory)}
.pcard .st.soon{background:var(--brass);color:var(--ink)}
.pcard h3{font-family:var(--en);font-weight:500;font-size:30px;letter-spacing:.08em;margin:24px 0 2px}
.pcard .jp{font-family:var(--mincho);font-size:15px;color:var(--ivory-2)}
.pcard dl{display:grid;grid-template-columns:auto 1fr;gap:4px 20px;margin:16px 0 0;font-size:13px;border-top:1px solid var(--line);padding-top:16px}
.pcard dt{color:var(--stone)}
.pcard dd{margin:0}

/* story */
.story{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.story .pin{position:sticky;top:120px;height:calc(100vh - 200px);min-height:520px;overflow:hidden}
.story .pin img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s,transform 6s;transform:scale(1.06)}
.story .pin img.on{opacity:1;transform:scale(1)}
.story .pin .cap{position:absolute;left:24px;bottom:20px;z-index:2;font-family:var(--en);font-size:90px;line-height:1;color:var(--ivory);opacity:.9}
.chapter{min-height:78vh;display:flex;flex-direction:column;justify-content:center;border-top:1px solid var(--line);padding:60px 0}
.chapter .no{font-family:var(--en);font-size:15px;letter-spacing:.3em;color:var(--brass)}
.chapter h3{font-family:var(--mincho);font-weight:500;font-size:clamp(26px,2.8vw,38px);line-height:1.7;margin:16px 0 20px;letter-spacing:.1em}
.chapter p{color:var(--ivory-2);margin:0;font-size:15px}
.chapter ul{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:10px;font-size:14px}
.chapter li{display:flex;gap:14px}
.chapter li:before{content:"";width:18px;height:1px;background:var(--brass);margin-top:15px;flex:none}

/* compare */
.cmp{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line)}
.cmp div{padding:50px}
.cmp div+div{border-left:1px solid var(--line);background:var(--ink-2)}
.cmp h3{font-family:var(--mincho);font-weight:500;margin:10px 0 26px;font-size:22px;letter-spacing:.12em}
.cmp table{width:100%;border-collapse:collapse;font-size:14px}
.cmp td{padding:14px 0;border-bottom:1px solid var(--line)}
.cmp td:last-child{text-align:right;font-family:var(--en);font-size:22px}
.cmp .total td{border-bottom:0;padding-top:24px}
.cmp .total td:last-child{color:var(--brass-2);font-size:34px}

/* buyback */
.bb{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:center}
.ba{position:relative;aspect-ratio:4/3;overflow:hidden;user-select:none}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .after{clip-path:inset(0 0 0 var(--x,50%))}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;background:var(--ivory);transform:translateX(-1px);pointer-events:none}
.ba .handle:after{content:"◀ ▶";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--ivory);color:var(--ink);font-size:11px;padding:10px 12px;border-radius:999px;white-space:nowrap}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba .tag{position:absolute;top:18px;z-index:2;font-family:var(--en);letter-spacing:.2em;font-size:12px;background:rgba(18,17,16,.7);padding:6px 12px}
.ba .tag.l{left:18px}.ba .tag.r{right:18px}

/* visit */
.visit{position:relative;padding:170px 0;text-align:center;overflow:hidden}
.visit img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32}
.visit .wrap{position:relative}
.dates{display:flex;justify-content:center;gap:12px;margin:40px 0;flex-wrap:wrap}
.dates button{background:transparent;border:1px solid var(--line);color:var(--ivory);width:92px;padding:14px 0;cursor:pointer;font-family:var(--sans)}
.dates button b{display:block;font-family:var(--en);font-size:30px;font-weight:400;line-height:1.1}
.dates button small{font-size:11px;color:var(--stone)}
.dates button[aria-pressed=true]{background:var(--brass);color:var(--ink);border-color:var(--brass)}
.dates button[aria-pressed=true] small{color:var(--ink)}

/* footer */
.ft{border-top:1px solid var(--line);padding:70px 0 40px;font-size:12px;color:var(--stone)}
.ft .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.ft .logo{color:var(--ivory)}
.ft ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.ft h4{font-family:var(--en);letter-spacing:.2em;color:var(--ivory);font-weight:500;margin:0 0 10px}
.ft .copy{grid-column:1/-1;border-top:1px solid var(--line);padding-top:24px}

/* project page */
.phero{height:78vh;min-height:560px;position:relative;overflow:hidden}
.phero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,17,16,.4),rgba(18,17,16,.15) 40%,rgba(18,17,16,.9))}
.phero .t{position:absolute;left:0;right:0;bottom:60px;z-index:2}
.phero h1{font-family:var(--en);font-weight:400;font-size:clamp(46px,7vw,104px);line-height:1;margin:14px 0 10px;letter-spacing:.04em}
.phero .jp{font-family:var(--mincho);font-size:18px;letter-spacing:.2em}
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts div{padding:34px 26px;border-right:1px solid var(--line)}
.facts div:last-child{border-right:0}
.facts small{color:var(--stone);font-size:12px;display:block}
.facts b{font-family:var(--mincho);font-weight:500;font-size:22px}
.plot{display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:start}
.plot svg{width:100%;height:auto;background:var(--ink-2);border:1px solid var(--line)}
.lot{cursor:pointer;transition:fill .3s}
.lot:hover{fill:#3a3530}
.lot.on{fill:var(--brass)!important}
.lot-info{border:1px solid var(--line);padding:34px;position:sticky;top:120px}
.lot-info h3{font-family:var(--en);font-weight:500;font-size:44px;margin:0;line-height:1}
.lot-info .price{font-family:var(--en);font-size:40px;color:var(--brass-2)}
.lot-info .price small{font-family:var(--mincho);font-size:16px;color:var(--ivory)}
.lot-info dl{display:grid;grid-template-columns:110px 1fr;margin:20px 0 26px;font-size:14px}
.lot-info dt,.lot-info dd{margin:0;padding:10px 0;border-bottom:1px solid var(--line)}
.lot-info dt{color:var(--stone)}
.legend{display:flex;gap:20px;font-size:12px;color:var(--stone);margin-top:14px}
.legend i{display:inline-block;width:12px;height:12px;margin-right:6px;vertical-align:-1px}
.gal{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:300px 300px;gap:14px}
.gal img{width:100%;height:100%;object-fit:cover}
.gal img:first-child{grid-row:1/3}
.spec{width:100%;border-collapse:collapse;font-size:14px}
.spec th,.spec td{text-align:left;padding:18px 0;border-bottom:1px solid var(--line);vertical-align:top}
.spec th{width:200px;color:var(--stone);font-weight:400}

.fade-up{opacity:0;transform:translateY(40px);transition:opacity 1.2s,transform 1.2s}
.fade-up.in{opacity:1;transform:none}

@media (max-width:1000px){
  .wrap{padding:0 22px}
  .gnav{display:none}
  .sec{padding:110px 0}
  .story,.bb,.plot{grid-template-columns:1fr}
  .story .pin{position:relative;top:0;height:60vh}
  .chapter{min-height:auto}
  .cmp{grid-template-columns:1fr}.cmp div+div{border-left:0;border-top:1px solid var(--line)}
  .nums{grid-template-columns:1fr}.nums div{border-right:0;border-bottom:1px solid var(--line)}
  .facts{grid-template-columns:1fr 1fr}
  .hero .now{display:none}
  .hero .big{left:22px}
  .rail{padding-left:22px}
  .ft .wrap{grid-template-columns:1fr}
  .gal{grid-template-columns:1fr;grid-template-rows:auto}.gal img:first-child{grid-row:auto}
  .lot-info{position:static}
}
@media (max-width:640px){.logo{font-size:16px;letter-spacing:.2em;white-space:nowrap}.hd .btn{display:none}.hero .big{bottom:90px}}

/* ---- 詰め直し（2026-11-04）----
   参考：Sobha Privy Collection（https://sobha-privy-collection.com/ Awwwards SOTD）… 中央にロゴ・左右に最小限のリンクだけのヘッダー、黒の導入から白へ切り替わる構成、大文字セリフの中央見出しと段違いの写真ギャラリー
         Pyzhevsky（https://pyzhevsky.estate/ Awwwards Nominee）… 「部屋を選ぶ」「エリアマップ」をヘッダーに置く導線、画面を区切る細い縦線、字間を広くとったロゴ */
.hd2 .wrap{display:grid;grid-template-columns:auto auto 1fr auto auto;gap:34px;align-items:center;height:88px}
.hd2 .logo{justify-self:center;text-align:center}
.hlink{font-family:var(--en);font-size:12px;letter-spacing:.22em;display:flex;align-items:center;gap:12px;opacity:.9}
.hlink:hover{opacity:1;color:var(--brass-2)}
.hlink.sub{font-family:var(--mincho);letter-spacing:.2em}
.hlink.r2{border:1px solid var(--brass);padding:10px 18px;font-family:var(--mincho);letter-spacing:.18em}
.burger{width:26px;height:7px;border-top:1px solid currentColor;border-bottom:1px solid currentColor}
.vlines{position:fixed;inset:0;pointer-events:none;z-index:40;display:flex;justify-content:space-evenly}
.vlines i{width:1px;height:100%;background:rgba(237,232,223,.07)}
.ivory{background:var(--ivory);color:var(--ink);padding:150px 0 140px;text-align:center;position:relative;z-index:41}
.ivory .en{color:#8a6f3c}
.caps{font-family:var(--mincho);font-weight:500;font-size:clamp(28px,3.6vw,50px);line-height:1.7;letter-spacing:.14em;margin:22px 0 70px}
.stagger{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:26px;align-items:start;margin:0 auto 80px;max-width:1100px}
.stagger img{width:100%;aspect-ratio:3/4;object-fit:cover}
.stagger img:nth-child(1){margin-top:110px}
.stagger img:nth-child(3){margin-top:60px}
.ivory .big{font-family:var(--mincho);font-size:clamp(18px,1.8vw,24px);line-height:2.3;letter-spacing:.1em;max-width:880px;margin:0 auto}
.ivory .nums{border-color:rgba(18,17,16,.15);margin-top:90px}
.ivory .nums div{border-color:rgba(18,17,16,.15)}
.ivory .nums b{color:#8a6f3c}
.ivory .nums b small,.ivory .nums span{color:var(--ink)}
@media (max-width:1000px){.hd2 .wrap{grid-template-columns:auto 1fr auto;gap:16px}.hlink.sub{display:none}.hlink.r2{padding:8px 12px;font-size:11px}.stagger{grid-template-columns:1fr 1fr}.stagger img:nth-child(3){display:none}.stagger img:nth-child(1){margin-top:60px}}
@media (max-width:640px){.hd2 .logo{font-size:14px;letter-spacing:.18em}.hlink{font-size:10px}.hlink.r2{display:none}.hd2 .wrap{grid-template-columns:auto 1fr}}