:root{
  --ink:#171717;
  --paper:#f7f7f5;
  --white:#ffffff;
  --line:#deded9;
  --orange:#f36a10;
  --orange-dark:#dc5704;
  --muted:#747474;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Noto Sans JP",sans-serif;
  color:var(--ink);
  background:var(--white);
}
a{color:inherit;text-decoration:none}
.wrap{width:min(1180px,calc(100% - 48px));margin:auto}

.header{
  position:sticky;top:0;z-index:20;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(0,0,0,.07);
}
.header-inner{
  height:82px;display:flex;align-items:center;justify-content:space-between;
}
.brand{display:flex;align-items:center;gap:16px}
.brand-symbol{
  font-size:30px;font-weight:700;letter-spacing:-.08em;
  border-left:8px solid var(--orange);padding-left:13px;
}
.brand-text{display:flex;flex-direction:column;gap:2px}
.brand-text span{font-weight:600;font-size:14px;letter-spacing:.08em}
.brand-text small{font:600 10px/1.2 Montserrat,sans-serif;letter-spacing:.2em;color:#777}
.nav{display:flex;align-items:center;gap:30px;font-size:13px;font-weight:600}
.nav a{position:relative}
.nav a:not(.nav-cta):after{
  content:"";position:absolute;left:0;bottom:-8px;width:0;height:2px;background:var(--orange);transition:.2s;
}
.nav a:hover:after{width:100%}
.nav-cta{padding:14px 20px;background:var(--ink);color:white}
.menu{display:none;border:0;background:none;font:600 12px Montserrat,sans-serif}

.hero{
  min-height:720px;position:relative;overflow:hidden;
  background:var(--paper);border-bottom:1px solid var(--line);
}
.hero-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(0,0,0,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.035) 1px,transparent 1px);
  background-size:64px 64px;
}
.orange-shape{position:absolute;background:var(--orange);transform:skewX(-24deg)}
.orange-shape-a{width:34%;height:120%;right:-7%;top:-10%}
.orange-shape-b{width:70px;height:230px;right:29%;bottom:-45px}
.hero-inner{
  position:relative;z-index:2;min-height:720px;
  display:grid;grid-template-columns:1fr 360px;align-items:center;gap:70px;
}
.eyebrow{
  margin:0 0 24px;font:700 12px Montserrat,sans-serif;letter-spacing:.22em;
}
.eyebrow.orange{color:var(--orange)}
.eyebrow.light{color:#ffb581}
.hero h1{
  margin:0;font-size:clamp(46px,6vw,82px);line-height:1.1;letter-spacing:-.06em;font-weight:700;
}
.hero h1 span{display:block}
.lead{
  margin:32px 0 0;font-size:17px;line-height:2;color:#484848;
}
.hero-actions{display:flex;gap:12px;margin-top:40px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:180px;padding:16px 22px;font-weight:700;font-size:14px;
  border:1px solid var(--ink);transition:.2s;
}
.btn.primary{background:var(--ink);color:white}
.btn.primary:hover{background:var(--orange);border-color:var(--orange)}
.btn.secondary{background:white}
.btn.secondary:hover{color:var(--orange);border-color:var(--orange)}
.hero-side{position:relative;align-self:stretch;display:flex;align-items:flex-end;justify-content:flex-end;padding-bottom:90px}
.vertical-en{
  position:absolute;right:60px;top:60px;
  writing-mode:vertical-rl;color:rgba(255,255,255,.82);
  font:700 42px Montserrat,sans-serif;letter-spacing:.12em;
}
.hero-card{
  width:300px;background:white;padding:30px;position:relative;z-index:3;
  box-shadow:0 20px 50px rgba(0,0,0,.12);border-top:5px solid var(--ink)
}
.hero-card-label{font:700 10px Montserrat,sans-serif;letter-spacing:.2em;color:var(--orange)}
.hero-card strong{display:block;font-size:25px;margin:10px 0 12px}
.hero-card p{margin:0;color:#666;line-height:1.8;font-size:13px}

.section{padding:110px 0}
.section-title-row{display:flex;justify-content:space-between;align-items:end;margin-bottom:45px}
.section h2{font-size:40px;letter-spacing:-.04em;margin:0}
.section-note{font-size:12px;color:#777}

.property-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.property-card{border:1px solid var(--line);background:white;transition:.25s}
.property-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(0,0,0,.08)}
.property-image{
  height:240px;position:relative;overflow:hidden;
  background:
    linear-gradient(135deg,rgba(0,0,0,.06),rgba(0,0,0,.01)),
    repeating-linear-gradient(90deg,#e8e8e3 0 28px,#f3f3ef 28px 56px);
}
.demo-b{background:linear-gradient(135deg,#eee 0 50%,#dfdfdc 50%)}
.demo-c{background:linear-gradient(145deg,#efefec 0 40%,#ddd 40% 70%,#f5f5f1 70%)}
.property-tag{
  position:absolute;left:0;top:0;background:var(--orange);color:white;
  padding:9px 14px;font-size:12px;font-weight:700;
}
.property-number{
  position:absolute;right:14px;bottom:8px;font:700 48px Montserrat,sans-serif;color:rgba(0,0,0,.12)
}
.property-content{padding:24px}
.property-type{font-size:11px;color:var(--orange);font-weight:700;margin:0 0 7px}
.property-content h3{font-size:21px;margin:0}
.location{font-size:13px;color:#777;margin:10px 0 18px}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chips span{font-size:11px;padding:6px 9px;background:#f3f3f1}
.property-footer{
  margin-top:24px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:10px
}
.property-footer strong{font-size:13px}
.property-footer a{font:700 11px Montserrat,sans-serif;color:var(--orange)}

.about{background:#f6f6f3}
.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:110px}
.about-copy>p{font-size:16px;line-height:2;margin:0 0 20px;color:#4d4d4d}
.points{margin-top:38px;border-top:1px solid #ccc}
.points div{display:grid;grid-template-columns:60px 1fr;gap:14px;padding:20px 0;border-bottom:1px solid #ccc}
.points span{font:700 13px Montserrat,sans-serif;color:var(--orange)}
.points strong{font-size:15px}

.direct-banner{background:var(--ink);color:white;padding:70px 0;position:relative;overflow:hidden}
.direct-banner:after{
  content:"";position:absolute;width:280px;height:280px;background:var(--orange);
  right:-80px;top:-90px;transform:rotate(30deg)
}
.direct-inner{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;position:relative;z-index:2}
.direct-inner h2{font-size:38px;margin:0;line-height:1.4}
.direct-inner>p{line-height:2;color:#ccc;font-size:14px}

.company-grid{display:grid;grid-template-columns:330px 1fr;gap:90px}
.company-sign{margin-top:42px;border-left:7px solid var(--orange);padding-left:18px}
.company-sign strong{display:block;font-size:22px}
.company-sign span{font:600 10px Montserrat,sans-serif;letter-spacing:.17em;color:#777}
.company-table{margin:0}
.company-table div{display:grid;grid-template-columns:160px 1fr;border-top:1px solid var(--line);padding:21px 0}
.company-table div:last-child{border-bottom:1px solid var(--line)}
.company-table dt{font-weight:600;color:#555}
.company-table dd{margin:0}
.company-table dd,.company-table dt{font-size:14px}

.contact{background:var(--orange);color:white;padding:100px 0}
.contact-inner{max-width:760px}
.contact h2{font-size:44px;margin:0 0 15px}
.contact p{margin:0 0 28px}
.contact-btn{
  display:inline-block;background:white;color:var(--ink);padding:17px 28px;
  font:700 13px Montserrat,sans-serif;margin-right:15px
}
.contact small{font-size:11px;opacity:.85}

.footer{background:#111;color:#aaa;padding:32px 0}
.footer-inner{display:flex;justify-content:space-between;align-items:end}
.footer strong{display:block;color:white;font-size:16px}
.footer span{font:600 9px Montserrat,sans-serif;letter-spacing:.16em}
.footer p{margin:0;font:500 9px Montserrat,sans-serif;letter-spacing:.1em}

@media(max-width:900px){
  .nav{display:none;position:absolute;top:82px;left:0;right:0;background:white;padding:22px 24px;flex-direction:column;align-items:flex-start;border-bottom:1px solid #ddd}
  .nav.open{display:flex}
  .menu{display:block}
  .hero{min-height:680px}
  .hero-inner{min-height:680px;grid-template-columns:1fr}
  .hero-side{display:none}
  .orange-shape-a{width:40%;right:-20%;opacity:.9}
  .orange-shape-b{display:none}
  .property-grid{grid-template-columns:1fr}
  .about-grid,.company-grid,.direct-inner{grid-template-columns:1fr;gap:45px}
  .section-title-row{display:block}
  .section-note{margin-top:12px}
}
@media(max-width:560px){
  .wrap{width:min(100% - 30px,1180px)}
  .header-inner{height:72px}
  .brand-text{display:none}
  .hero,.hero-inner{min-height:610px}
  .hero h1{font-size:44px}
  .lead{font-size:14px}
  .hero-actions{flex-direction:column;align-items:flex-start}
  .btn{width:100%}
  .section{padding:75px 0}
  .section h2{font-size:32px}
  .company-table div{grid-template-columns:1fr;gap:7px}
  .property-image{height:200px}
  .direct-inner h2,.contact h2{font-size:32px}
  .footer-inner{display:block}
  .footer p{margin-top:18px}
}

/* --- Hanetaku business-card palette / single active listing --- */
:root{
  --orange:#0b6a3b;
  --orange-dark:#07532e;
  --green:#0b6a3b;
  --deep-green:#0d2f27;
  --gold:#b19a5b;
}
.orange-shape{background:var(--green)}
.brand-symbol{border-left-color:var(--green)}
.nav a:not(.nav-cta):after{background:var(--green)}
.btn.primary:hover{background:var(--green);border-color:var(--green)}
.btn.secondary:hover{color:var(--green);border-color:var(--green)}
.hero-card{border-top-color:var(--green)}
.hero-card-label,.eyebrow.orange,.property-type,.property-footer a{color:var(--green)}
.property-tag{background:var(--green)}
.company-sign{border-left-color:var(--green)}
.direct-banner{background:var(--deep-green)}
.direct-banner:after{background:var(--green)}
.contact{background:var(--green)}
.eyebrow.light{color:#d7c58f}

/* --- listing (single property) --- */
.listing{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(340px,.7fr);gap:48px;align-items:start}
.gallery{min-width:0}
.g-main{margin:0;position:relative;aspect-ratio:4/3;background:#1d2622;overflow:hidden}
.g-bg{position:absolute;inset:-30px;width:calc(100% + 60px);height:calc(100% + 60px);object-fit:cover;filter:blur(24px) brightness(.75);transform:scale(1.05)}
.g-img{position:relative;width:100%;height:100%;object-fit:contain;display:block;transition:opacity .2s}
.g-img.is-fading{opacity:0}
.g-main .property-tag{z-index:2;padding:10px 16px;font-size:12px;letter-spacing:.06em}
.g-main figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;justify-content:space-between;gap:12px;background:linear-gradient(transparent,rgba(0,0,0,.55));color:#fff;font-size:13px;padding:28px 16px 12px}
#gCount{font:600 12px Montserrat,sans-serif;letter-spacing:.08em;opacity:.85;white-space:nowrap}
.g-nav{position:absolute;top:50%;z-index:2;transform:translateY(-50%);width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.88);color:var(--ink);font-size:26px;line-height:1;cursor:pointer;opacity:.85;transition:.2s}
.g-nav:hover{opacity:1;background:#fff}
.g-nav.prev{left:14px}.g-nav.next{right:14px}
.g-thumbs{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;margin-top:8px}
.g-thumbs button{padding:0;border:0;background:none;cursor:pointer;aspect-ratio:1/1;overflow:hidden;opacity:.55;outline:2px solid transparent;outline-offset:-2px;transition:.2s}
.g-thumbs button:hover{opacity:.85}
.g-thumbs button.is-active{opacity:1;outline-color:var(--green)}
.g-thumbs img{width:100%;height:100%;object-fit:cover;display:block}

.listing-summary h3{font-size:28px;line-height:1.4;margin:0}
.listing-summary h3 small{display:block;font-size:14px;font-weight:500;color:#555;margin-top:4px}
.listing-summary .location{margin:10px 0 0}
.price-block{margin:24px 0;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.price-block span{display:block;font-size:11px;color:#777;margin-bottom:4px}
.price-block strong{font-size:38px;font-weight:600;letter-spacing:-.03em;color:var(--deep-green)}
.price-block strong em{font-style:normal;font-size:18px;margin-left:2px}
.price-block p{margin:6px 0 0;font-size:12px;color:#777}
.property-specs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.property-specs div{background:#fff;padding:12px 14px}
.property-specs span{display:block;font-size:10px;color:#888;margin-bottom:3px}
.property-specs strong{font-size:15px}
.access{list-style:none;margin:20px 0 0;padding:0;font-size:13px;line-height:2;color:#444}
.access li:before{content:"";display:inline-block;width:6px;height:6px;background:var(--green);margin-right:10px;vertical-align:2px}
.listing-cta{width:100%;margin-top:26px;border-color:var(--deep-green);background:var(--deep-green)!important}
.listing-cta:hover{background:var(--green)!important}
.listing-note{font-size:11px;color:#888;margin:10px 0 0;text-align:center}

.listing-detail{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:80px;padding-top:60px;border-top:1px solid var(--line);align-items:center}
.point-list .eyebrow{margin-bottom:10px}
.point-list h3{font-size:26px;margin:0 0 24px}
.point-list ol{list-style:none;margin:0;padding:0;counter-reset:p}
.point-list li{counter-increment:p;display:grid;grid-template-columns:44px 1fr;padding:18px 0;border-top:1px solid var(--line)}
.point-list li:before{content:"0" counter(p);grid-row:span 2;font:700 13px Montserrat,sans-serif;color:var(--green);padding-top:2px}
.point-list li strong{font-size:16px}
.point-list li span{font-size:13px;color:#666;line-height:1.8;margin-top:4px}
.floorplan{margin:0;border:1px solid var(--line);padding:24px;background:#fff}
.floorplan img{display:block;width:100%;max-width:460px;margin:auto}
.floorplan figcaption{font-size:11px;color:#888;margin-top:12px;text-align:center}

.outline{margin-top:80px}
.outline h3{font-size:22px;margin:0 0 18px;padding-left:14px;border-left:5px solid var(--green)}
.outline dl{margin:0;display:grid;grid-template-columns:1fr 1fr;column-gap:40px;border-top:1px solid var(--line)}
.outline dl div{display:grid;grid-template-columns:120px 1fr;padding:13px 0;border-bottom:1px solid var(--line);font-size:13px}
.outline dt{color:#666;font-weight:600}
.outline dd{margin:0}

@media(max-width:900px){
  .listing,.listing-detail{grid-template-columns:1fr;gap:32px}
  .outline dl{grid-template-columns:1fr}
}
@media(max-width:560px){
  .listing-summary h3{font-size:23px}
  .price-block strong{font-size:31px}
  .g-thumbs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}
  .g-thumbs button{flex:0 0 64px;scroll-snap-align:start}
  .g-nav{width:36px;height:36px;font-size:22px}
  .listing-detail,.outline{margin-top:55px}
  .outline dl div{grid-template-columns:96px 1fr}
}