:root { --night:#0b1018; --ink:#17232d; --paper:#f3f2ee; --white:#fff; --gold:#d7b471; --line:rgba(255,255,255,.25); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; background:var(--night); color:var(--ink); font:400 1rem/1.85 'Noto Sans JP',sans-serif; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
em { font-style:normal; }
::selection { background:var(--gold); color:var(--night); }
.site-header { height:88px; padding:0 clamp(28px,5.2vw,96px); position:fixed; z-index:50; inset:0 0 auto; display:flex; align-items:center; justify-content:space-between; color:#fff; border-bottom:1px solid rgba(255,255,255,.24); transition:background .35s,height .35s,color .35s; }
.site-header.scrolled { height:72px; color:var(--night); background:rgba(248,248,245,.96); border-bottom-color:rgba(19,29,38,.15); backdrop-filter:blur(16px); }
.brand,.footer-brand { display:inline-flex; align-items:center; gap:14px; font:700 1.15rem/1 'DM Sans',sans-serif; letter-spacing:.26em; }
.brand > span:last-child { display:flex; flex-direction:column; gap:6px; }
.brand small { font:500 .57rem/1 'Noto Sans JP',sans-serif; letter-spacing:.14em; }
.brand-mark { flex:none; width:36px; height:36px; display:grid; place-items:center; color:var(--night); background:var(--gold); font:700 1.15rem/1 'DM Sans',sans-serif; letter-spacing:0; }
.nav { display:flex; gap:clamp(20px,2.4vw,45px); font-size:.82rem; font-weight:600; letter-spacing:.06em; }
.nav a { position:relative; padding:10px 0; }
.nav a::after { content:""; position:absolute; left:0; right:100%; bottom:5px; height:1px; background:var(--gold); transition:right .3s; }
.nav a:hover::after,.nav a:focus-visible::after { right:0; }
.menu-button { display:none; border:0; background:none; color:inherit; font:700 .85rem 'DM Sans',sans-serif; letter-spacing:.15em; cursor:pointer; }
.sales-story,.delivery-story,.house-story { height:240vh; height:240svh; background:var(--night); }
.sales-sticky,.delivery-sticky,.house-sticky { position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; isolation:isolate; }
.story-video { position:absolute; z-index:1; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:center; background:var(--night); pointer-events:none; }
.hero-shade,.delivery-overlay { position:absolute; z-index:2; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(5,10,15,.75),rgba(5,10,15,.18) 66%,rgba(5,10,15,.08)),linear-gradient(0deg,rgba(5,10,15,.64),transparent 36%,rgba(5,10,15,.17)); }
.delivery-overlay { background:linear-gradient(90deg,rgba(5,10,15,.70),rgba(5,10,15,.09) 75%),linear-gradient(0deg,rgba(5,10,15,.62),transparent 38%); }
.hero-copy,.delivery-copy,.house-copy { position:absolute; z-index:4; left:clamp(28px,8vw,155px); color:white; max-width:900px; text-shadow:0 1px 25px rgba(0,0,0,.18); }
.hero-copy { top:48%; transform:translateY(calc(-50% + var(--hero-shift,0px))); opacity:var(--hero-opacity,1); }
.delivery-copy { top:50%; transform:translateY(calc(-50% + var(--delivery-copy-y,0px))); opacity:var(--delivery-copy-opacity,1); }
.house-copy { bottom:14%; transform:translateY(var(--house-copy-y,35px)); opacity:var(--house-copy-opacity,0); }
.eyebrow,.section-label { margin:0 0 30px; font:600 .82rem/1.3 'DM Sans',sans-serif; letter-spacing:.22em; }
.eyebrow { display:flex; align-items:center; gap:15px; color:var(--gold); }
.fine-line { display:inline-block; width:32px; height:1px; background:currentColor; }
.hero-copy h1,.delivery-copy h2,.house-copy h2 { margin:0; font:500 clamp(3rem,6.8vw,7.2rem)/1.34 'Noto Serif JP',serif; letter-spacing:-.075em; }
.hero-copy h1 em,.delivery-copy h2 em,.house-copy h2 em { color:var(--gold); }
.hero-copy > p:last-child,.delivery-copy > p:last-child,.house-copy > p:last-child { margin:34px 0 0; font-size:clamp(.94rem,1.25vw,1.17rem); letter-spacing:.08em; }
.sales-message { position:absolute; z-index:4; bottom:8%; left:clamp(28px,8vw,155px); display:flex; align-items:baseline; gap:26px; color:white; opacity:var(--message-opacity,0); transform:translateY(var(--message-shift,28px)); }
.sales-kicker { margin:0; color:var(--gold); font:700 .79rem 'DM Sans',sans-serif; letter-spacing:.17em; }
.sales-line { margin:0; font:500 clamp(1rem,2vw,1.65rem) 'Noto Serif JP',serif; }
.scene-index { position:absolute; z-index:4; right:clamp(28px,5.2vw,96px); bottom:8%; color:white; font:500 clamp(1.6rem,3vw,2.7rem) 'DM Sans',sans-serif; letter-spacing:.04em; }
.scene-index span { color:var(--gold); opacity:.9; font-size:.7em; }
.scroll-hint { position:absolute; z-index:4; right:clamp(28px,5.2vw,96px); top:50%; transform:translateY(-50%); color:#fff; display:flex; align-items:center; gap:20px; writing-mode:vertical-rl; font:700 .67rem 'DM Sans',sans-serif; letter-spacing:.24em; }
.scroll-hint span { display:block; width:1px; height:60px; background:var(--gold); }
.story-progress { position:absolute; z-index:5; left:0; bottom:0; width:100%; height:3px; background:rgba(255,255,255,.22); }
.story-progress span { display:block; width:calc(var(--story-progress,0)*100%); height:100%; background:var(--gold); }
.delivery-progress span,.house-progress span { width:0; }
.intro { padding:clamp(110px,13vw,215px) clamp(28px,8vw,155px) clamp(125px,15vw,235px); background:var(--paper); }
.intro-top { display:flex; justify-content:space-between; align-items:center; padding-bottom:42px; border-bottom:1px solid rgba(23,35,45,.22); color:#866a3d; }
.intro-top > span { font-size:.8rem; letter-spacing:.14em; }
.section-label { margin:0; color:#947449; }
.section-label span { color:#67717b; font:500 .83rem 'Noto Sans JP',sans-serif; letter-spacing:.08em; }
.intro-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(40px,8vw,140px); align-items:end; margin-top:clamp(55px,7vw,120px); }
.intro h2,.business h2,.company h2 { margin:0; font:500 clamp(2.5rem,4.6vw,5.3rem)/1.55 'Noto Serif JP',serif; letter-spacing:-.075em; }
.intro h2 em { color:#9b7540; }
.intro-grid > div { padding-left:clamp(0px,2vw,35px); border-left:1px solid #baa579; color:#47545e; font-size:clamp(1rem,1.15vw,1.15rem); line-height:2.15; }
.intro-grid p { margin:0 0 22px; }
.intro-grid p:last-child { margin:0; }
.business { padding:clamp(115px,13vw,205px) clamp(28px,8vw,155px); background:var(--night); color:#fff; }
.business-heading { display:grid; grid-template-columns:1fr 2fr; align-items:start; gap:40px; margin-bottom:clamp(70px,8vw,120px); }
.business .section-label { color:var(--gold); }
.business .section-label span { color:#8c98a1; }
.business h2 em { color:var(--gold); }
.service-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--line); }
.service-list article { min-height:185px; display:grid; grid-template-columns:58px minmax(0,1fr); gap:20px; padding:33px 34px 38px 0; border-bottom:1px solid var(--line); transition:background .3s; }
.service-list article:nth-child(odd) { border-right:1px solid var(--line); }
.service-list article:nth-child(even) { padding-left:clamp(25px,4vw,75px); }
.service-list article:hover { background:rgba(255,255,255,.035); }
.service-list article > span { padding-top:4px; color:var(--gold); font:600 .85rem 'DM Sans',sans-serif; }
.service-list h3 { margin:0 0 13px; font:500 clamp(1.2rem,1.6vw,1.65rem) 'Noto Serif JP',serif; }
.service-list p { max-width:500px; margin:0; color:#adb9c0; font-size:.95rem; line-height:1.85; }
.company { padding:clamp(110px,12vw,190px) clamp(28px,8vw,155px); background:var(--paper); }
.company-heading { display:flex; align-items:baseline; gap:clamp(30px,10vw,180px); padding-bottom:45px; border-bottom:1px solid rgba(23,35,45,.23); margin-bottom:clamp(60px,7vw,105px); }
.company-details { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(45px,7vw,125px); align-items:start; }
.company-details dl { margin:0; }
.company-details dl > div { display:grid; grid-template-columns:105px minmax(0,1fr); gap:18px; padding:26px 0; border-bottom:1px solid rgba(23,35,45,.19); }
.company-details dt { font-size:.875rem; font-weight:600; color:#707a80; }
.company-details dd { margin:0; font-weight:500; overflow-wrap:anywhere; }
.company-details dd a { border-bottom:1px solid #9b7540; }
.company-map { min-width:0; }
.map-frame { position:relative; padding:9px; background:#fff; box-shadow:0 24px 80px rgba(20,32,43,.10); }
.company-map iframe { display:block; width:100%; height:clamp(350px,37vw,525px); border:0; background:#dce2e4; }
.map-zoom { position:absolute; right:23px; top:23px; display:flex; flex-direction:column; overflow:hidden; background:#fff; box-shadow:0 4px 18px rgba(0,0,0,.18); }
.map-zoom button { display:grid; place-items:center; width:45px; height:45px; border:0; background:#fff; color:var(--night); font-size:1.6rem; cursor:pointer; }
.map-zoom button + button { border-top:1px solid #d7dadd; }
.map-zoom button:hover,.map-zoom button:focus-visible { background:#eceeef; }
.map-zoom button:disabled { opacity:.4; cursor:default; }
.company-map > a { display:inline-flex; gap:12px; align-items:center; margin-top:19px; border-bottom:1px solid #9b7540; font-size:.9rem; font-weight:600; }
footer { display:grid; grid-template-columns:1fr auto; gap:23px; padding:80px clamp(28px,8vw,155px) 30px; color:#fff; background:#070b10; }
.footer-brand { font-size:1.45rem; }
footer > p { margin:0; color:#aeb7bd; }
.copyright { grid-column:1/-1; padding-top:25px; border-top:1px solid var(--line); font:500 .8rem 'DM Sans',sans-serif; letter-spacing:.09em; }
@media(max-width:900px) { .nav { gap:18px; font-size:.77rem; } .intro-grid,.company-details { grid-template-columns:1fr; } .intro-grid > div { max-width:650px; } }
@media(max-width:700px) {
  .site-header { height:68px; padding:0 22px; }
  .site-header.scrolled { height:68px; }
  .brand { font-size:1rem; }
  .brand-mark { width:32px; height:32px; }
  .menu-button { display:block; }
  .nav { position:fixed; left:0; right:0; top:68px; display:flex; flex-direction:column; gap:0; padding:8px 24px 22px; background:rgba(248,248,245,.98); color:var(--night); box-shadow:0 20px 30px rgba(0,0,0,.14); transform:translateY(-145%); opacity:0; pointer-events:none; transition:transform .3s,opacity .3s; }
  .nav.open { transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav a { padding:12px 0; border-bottom:1px solid rgba(0,0,0,.08); }
  .sales-story,.delivery-story,.house-story { height:210svh; }
  .story-video { inset:30% 0 auto; height:auto; aspect-ratio:16/9; object-fit:contain; }
  .hero-shade,.delivery-overlay { background:linear-gradient(0deg,var(--night) 0%,transparent 27%,transparent 70%,var(--night) 100%); }
  .hero-copy,.delivery-copy,.house-copy { left:25px; right:25px; top:16%; bottom:auto; transform:translateY(0); }
  .hero-copy { transform:translateY(var(--hero-shift,0px)); }
  .delivery-copy { transform:translateY(var(--delivery-copy-y,0px)); }
  .house-copy { transform:translateY(var(--house-copy-y,35px)); }
  .hero-copy h1,.delivery-copy h2,.house-copy h2 { font-size:clamp(2.35rem,9.2vw,3.7rem); line-height:1.42; }
  .eyebrow { margin-bottom:18px; font-size:.69rem; }
  .hero-copy > p:last-child,.delivery-copy > p:last-child,.house-copy > p:last-child { margin-top:16px; font-size:.86rem; }
  .sales-message { bottom:9%; left:25px; right:90px; display:block; }
  .sales-kicker { margin-bottom:8px; }
  .sales-line { font-size:1.06rem; }
  .scene-index { right:24px; bottom:8%; font-size:1.35rem; }
  .scroll-hint { display:none; }
  .intro,.business,.company { padding:90px 24px 105px; }
  .intro-top { padding-bottom:23px; }
  .intro-top > span { display:none; }
  .intro-grid { margin-top:45px; gap:35px; }
  .intro h2,.business h2,.company h2 { font-size:clamp(2.15rem,8vw,3.25rem); }
  .intro-grid > div { padding-left:18px; }
  .business-heading { grid-template-columns:1fr; gap:35px; margin-bottom:50px; }
  .service-list { grid-template-columns:1fr; }
  .service-list article { min-height:0; grid-template-columns:36px minmax(0,1fr); padding:26px 0!important; border-right:0!important; }
  .service-list h3 { font-size:1.18rem; }
  .company-heading { display:block; margin-bottom:38px; padding-bottom:25px; }
  .company-heading .section-label { margin-bottom:20px; }
  .company-details { gap:42px; }
  .company-details dl > div { grid-template-columns:90px minmax(0,1fr); gap:8px; padding:20px 0; }
  .company-map iframe { height:380px; }
  footer { grid-template-columns:1fr; padding:60px 24px 28px; }
  .copyright { grid-column:1; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition-duration:.01ms!important; animation-duration:.01ms!important; } }