/* ==========================================================================
   Demo portfolio top page — shares the Melglobe official-site design language
   (Outfit + Zen Kaku Gothic New, warm brown palette, editorial layout)
   ========================================================================== */
:root{
  --primary:#8A644A; --primary-dark:#664A36;
  --bg:#FDFBF8; --white:#FFFFFF;
  --brown-dark:#3E3028; --brown-light:#C0A898;
  --text:#2C241F; --muted:#6B5B53;
  --line:rgba(62,48,40,.10);
  --font-en:'Outfit',sans-serif; --font-ja:'Zen Kaku Gothic New',sans-serif;
  --header-h:76px; --max:1100px;
  --ease:all .4s cubic-bezier(.25,.8,.25,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;font-size:16px;}
body{font-family:var(--font-ja);color:var(--text);background:var(--bg);line-height:1.8;letter-spacing:.04em;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
html[lang="zh-CN"] body{font-family:'Noto Sans SC',var(--font-ja);}
html[lang="en"] body{letter-spacing:.02em;}
a{color:inherit;text-decoration:none;transition:var(--ease);}
ul{list-style:none;} img{max-width:100%;height:auto;display:block;}
.container{max-width:var(--max);margin:0 auto;padding:0 5%;}
.section{padding:96px 0;}
.bg-white{background:var(--white);} .bg-light{background:var(--bg);}
.en{font-family:var(--font-en);}

/* fade-in */
.fade{opacity:0;transform:translateY(34px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1);}
.fade.visible{opacity:1;transform:none;}
.d1{transition-delay:.15s;} .d2{transition-delay:.3s;}

/* buttons */
.btn{display:inline-block;padding:15px 36px;border-radius:4px;font-weight:500;letter-spacing:.1em;text-align:center;cursor:pointer;transition:var(--ease);font-size:.95rem;}
.btn-primary{background:var(--primary);color:#fff;border:1px solid var(--primary);}
.btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);transform:translateY(-2px);box-shadow:0 10px 25px rgba(138,100,74,.3);}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55);}
.btn-ghost:hover{background:#fff;color:var(--brown-dark);}
.btn-outline{background:transparent;color:var(--primary);border:1px solid var(--primary);}
.btn-outline:hover{background:var(--primary);color:#fff;}
.btn.disabled{opacity:.55;pointer-events:none;}

/* header */
.header{position:fixed;top:0;left:0;width:100%;height:var(--header-h);z-index:100;transition:background-color .4s,box-shadow .4s;}
.header.scrolled{background:rgba(253,251,248,.96);backdrop-filter:blur(10px);box-shadow:0 4px 20px rgba(0,0,0,.05);}
/* nav-open: no backdrop-filter, otherwise the fixed nav overlay is clipped to the header box */
.header.nav-open{background:rgba(253,251,248,.98);backdrop-filter:none;box-shadow:none;}
.header-inner{display:flex;justify-content:space-between;align-items:center;height:100%;padding:0 5%;max-width:1400px;margin:0 auto;}
.logo{font-family:var(--font-en);font-weight:400;font-size:1.25rem;letter-spacing:.16em;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.3);white-space:nowrap;}
.logo small{font-family:var(--font-ja);font-size:.68rem;letter-spacing:.06em;margin-left:10px;opacity:.85;font-weight:400;}
.header.scrolled .logo,.header.nav-open .logo{color:var(--brown-dark);text-shadow:none;}
.header.scrolled .logo small{color:var(--muted);opacity:1;}
.nav-list{display:flex;align-items:center;gap:1.8rem;}
.nav-list a{font-family:var(--font-en);font-size:.92rem;color:rgba(255,255,255,.92);text-shadow:0 1px 3px rgba(0,0,0,.3);position:relative;}
.header.scrolled .nav-list a,.header.nav-open .nav-list a{color:var(--text);text-shadow:none;}
.nav-list a.nav-link::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;background:var(--primary);transition:width .3s;}
.nav-list a.nav-link:hover::after{width:100%;}
.nav-cta{border:1px solid rgba(255,255,255,.55);padding:7px 18px !important;border-radius:30px;}
.header.scrolled .nav-cta,.header.nav-open .nav-cta{border-color:var(--primary);color:var(--primary) !important;}
.header.scrolled .nav-cta:hover{background:var(--primary);color:#fff !important;}
.lang-switch{display:flex;align-items:center;gap:2px;margin-left:4px;padding-left:18px;border-left:1px solid rgba(255,255,255,.35);}
.header.scrolled .lang-switch,.header.nav-open .lang-switch{border-left-color:rgba(62,48,40,.18);}
.lang-switch button{font-family:var(--font-en);font-size:.78rem;padding:3px 8px;border-radius:12px;opacity:.75;background:none;border:none;color:#fff;cursor:pointer;text-shadow:0 1px 3px rgba(0,0,0,.3);}
.header.scrolled .lang-switch button,.header.nav-open .lang-switch button{color:var(--text);text-shadow:none;}
.lang-switch button.active{opacity:1;background:rgba(255,255,255,.22);}
.header.scrolled .lang-switch button.active,.header.nav-open .lang-switch button.active{background:rgba(138,100,74,.14);color:var(--primary);}
.nav-toggle{display:none;width:44px;height:44px;background:none;border:none;cursor:pointer;position:relative;z-index:120;}
.nav-toggle span{display:block;width:24px;height:1.5px;background:#fff;margin:6px auto;transition:var(--ease);box-shadow:0 1px 3px rgba(0,0,0,.3);}
.header.scrolled .nav-toggle span,.header.nav-open .nav-toggle span{background:var(--brown-dark);box-shadow:none;}
.nav-toggle.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

/* hero */
.hero{position:relative;height:92vh;min-height:560px;max-height:860px;display:flex;align-items:flex-end;overflow:hidden;}
.hero-bg{position:absolute;inset:0;background:url('komachi-house/images/house/room.jpg') center/cover no-repeat;animation:zoomOut 10s ease-out forwards;}
@keyframes zoomOut{from{transform:scale(1.06);}to{transform:scale(1);}}
.hero-ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(44,36,31,.18) 0%,rgba(44,36,31,.74) 100%);}
.hero .container{position:relative;z-index:2;color:#fff;padding-bottom:76px;width:100%;}
.hero .eyebrow{display:block;font-family:var(--font-en);font-size:.85rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-bottom:8px;}
.hero h1{font-family:var(--font-ja);font-weight:400;font-size:clamp(1.9rem,4.2vw,3.1rem);line-height:1.4;margin-bottom:18px;text-shadow:0 4px 20px rgba(0,0,0,.3);}
html[lang="en"] .hero h1{font-family:var(--font-en);font-weight:300;letter-spacing:.02em;}
.hero p{max-width:620px;color:rgba(255,255,255,.9);margin-bottom:30px;text-shadow:0 2px 10px rgba(0,0,0,.35);}
.hero .btns{display:flex;gap:14px;flex-wrap:wrap;}
.hero .demo-note{display:inline-block;margin-top:26px;font-size:.72rem;color:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.3);border-radius:20px;padding:2px 12px;}

/* section header */
.sec-head{margin-bottom:56px;}
.sec-en{display:block;font-family:var(--font-en);font-size:.85rem;letter-spacing:.22em;color:var(--primary);text-transform:uppercase;margin-bottom:4px;}
.sec-ja{font-family:var(--font-ja);font-weight:500;font-size:2rem;color:var(--brown-dark);line-height:1.4;}
html[lang="en"] .sec-ja{font-family:var(--font-en);font-weight:300;}
.sec-line{width:40px;height:1px;background:var(--primary);margin-top:18px;}
.sec-lead{color:var(--muted);max-width:760px;margin:-30px 0 40px;font-size:.95rem;}

/* device composite */
.device{position:relative;aspect-ratio:16/11;border-radius:10px;overflow:hidden;background:linear-gradient(135deg,#EFE6DC,#F8F3EC);box-shadow:0 30px 60px rgba(62,48,40,.14);}
.device-a{background:linear-gradient(135deg,#E4E7F3,#F4F4EF);}
.device-b{background:linear-gradient(135deg,#FDE4DC,#FFF4C2);}
.device-c{background:linear-gradient(135deg,#E6ECE3,#F6F3EC);}
.device .pc{position:absolute;left:6%;top:11%;width:76%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:6px;box-shadow:0 12px 30px rgba(62,48,40,.18);border:1px solid rgba(62,48,40,.08);}
.device .sp{position:absolute;right:6%;bottom:-7%;width:25%;aspect-ratio:9/17;object-fit:cover;object-position:top;border-radius:14px;border:4px solid #2C241F;background:#2C241F;box-shadow:0 14px 30px rgba(62,48,40,.3);}

/* patterns */
.pat{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;padding:56px 0;border-bottom:1px solid var(--line);}
.pat:last-child{border-bottom:none;padding-bottom:10px;}
.pat.rev .pat-visual{order:2;}
.pat-visual a{display:block;transition:var(--ease);}
.pat-visual a:hover{transform:translateY(-4px);}
.pat-no{font-family:var(--font-en);font-weight:300;font-size:4rem;line-height:1;color:var(--brown-light);}
.pat-no small{font-size:1.1rem;color:var(--primary);letter-spacing:.2em;margin-left:8px;}
.pat h3{font-family:var(--font-ja);font-weight:500;font-size:1.7rem;color:var(--brown-dark);margin:10px 0 14px;line-height:1.4;}
html[lang="en"] .pat h3{font-family:var(--font-en);font-weight:400;}
.pat p{color:var(--muted);margin-bottom:16px;}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:22px;}
.chips li{font-size:.75rem;color:var(--primary);border:1px solid rgba(138,100,74,.35);border-radius:20px;padding:2px 10px;}
.pat .go{color:var(--primary);font-weight:500;border-bottom:1px solid var(--primary);padding-bottom:2px;}
.pat .go:hover{color:var(--primary-dark);letter-spacing:.08em;}

/* included */
.inc{display:grid;grid-template-columns:1fr 1fr;gap:0 60px;max-width:980px;}
.inc li{display:grid;grid-template-columns:54px 1fr;gap:14px;padding:22px 0;border-bottom:1px solid var(--line);}
.inc .n{font-family:var(--font-en);font-weight:300;font-size:1.4rem;color:var(--brown-light);line-height:1.2;}
.inc h4{font-family:var(--font-ja);font-weight:500;font-size:1.02rem;color:var(--brown-dark);}
.inc p{font-size:.86rem;color:var(--muted);margin-top:4px;}

/* flow */
.tl{display:grid;grid-template-columns:repeat(4,1fr);position:relative;}
.tl::before{content:"";position:absolute;left:0;right:0;top:22px;height:1px;background:rgba(138,100,74,.35);}
.tl-step{position:relative;padding:60px 24px 0 0;}
.tl-dot{position:absolute;top:12px;left:0;width:22px;height:22px;border-radius:50%;background:var(--bg);border:1px solid var(--primary);}
.tl-dot::after{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--primary);}
.tl-no{font-family:var(--font-en);font-size:.8rem;letter-spacing:.2em;color:var(--primary);}
.tl h4{font-family:var(--font-ja);font-weight:500;font-size:1.05rem;color:var(--brown-dark);margin:6px 0 8px;}
.tl p{font-size:.88rem;color:var(--muted);}
.tl .tag{display:inline-block;margin-top:10px;font-size:.75rem;color:var(--primary);border:1px solid rgba(138,100,74,.35);border-radius:20px;padding:2px 10px;}

/* price */
.pr{display:grid;grid-template-columns:1.2fr 1fr 1fr;background:#fff;border-radius:10px;box-shadow:0 10px 30px rgba(62,48,40,.06);overflow:hidden;}
.pr>div{padding:40px 34px;border-right:1px solid var(--line);}
.pr>div:last-child{border-right:none;}
.pr .tag{display:inline-block;background:var(--primary);color:#fff;font-size:.72rem;padding:2px 12px;border-radius:20px;letter-spacing:.1em;margin-bottom:12px;}
.pr h4{font-family:var(--font-ja);font-weight:500;font-size:1.15rem;color:var(--brown-dark);margin-bottom:8px;}
.pr .big{font-family:var(--font-en);font-weight:300;font-size:2.8rem;color:var(--primary);line-height:1;}
.pr .big small{font-family:var(--font-ja);font-size:.9rem;margin-left:4px;}
.pr .sub{font-size:.82rem;color:var(--primary);margin-top:6px;}
.pr .reg{font-size:.82rem;color:var(--muted);}
.pr ul{margin-top:14px;}
.pr li{font-size:.86rem;color:var(--muted);padding-left:14px;position:relative;margin:5px 0;}
.pr li::before{content:"";position:absolute;left:0;top:.8em;width:7px;height:1px;background:var(--primary);}
.pr .note{font-size:.78rem;color:var(--muted);margin-top:14px;line-height:1.7;}

/* cta + footer */
.cta{background:var(--brown-dark);color:#fff;text-align:center;padding:84px 20px;}
.cta h3{font-family:var(--font-ja);font-weight:400;font-size:1.7rem;margin-bottom:12px;}
html[lang="en"] .cta h3{font-family:var(--font-en);font-weight:300;}
.cta p{color:rgba(255,255,255,.75);margin-bottom:30px;font-size:.95rem;max-width:640px;margin-left:auto;margin-right:auto;}
.cta .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.cta .soon{display:block;margin-top:14px;font-size:.8rem;color:rgba(255,255,255,.6);}
.footer{background:#2C241F;color:rgba(255,255,255,.6);text-align:center;padding:40px 20px;font-size:.78rem;line-height:1.9;}
.footer .foot-links{margin-top:14px;} .footer .foot-links a{color:rgba(255,255,255,.55);border-bottom:1px solid rgba(255,255,255,.25);} .footer .foot-links a:hover{color:#fff;}
.footer .brand{font-family:var(--font-en);letter-spacing:.2em;color:#fff;font-size:.9rem;margin-bottom:10px;}

/* responsive */
@media (max-width:1024px){
  .pat{gap:44px;} .pat-no{font-size:3.2rem;} .pat h3{font-size:1.45rem;}
  .pr .big{font-size:2.3rem;} .pr>div{padding:32px 24px;}
}
@media (max-width:900px){
  .nav-toggle{display:block;}
  .nav{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(253,251,248,.98);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s;z-index:110;}
  .nav.open{opacity:1;pointer-events:auto;}
  .nav-list{flex-direction:column;gap:26px;}
  .nav-list a{color:var(--text) !important;text-shadow:none !important;font-size:1.25rem;}
  .nav-cta{border-color:var(--primary) !important;color:var(--primary) !important;}
  .lang-switch{border-left:none;padding-left:0;margin:6px 0 0;gap:8px;}
  .lang-switch button{font-size:.95rem !important;padding:6px 14px;border:1px solid rgba(138,100,74,.3);opacity:1;color:var(--text) !important;text-shadow:none !important;}
  .lang-switch button.active{background:var(--primary) !important;color:#fff !important;border-color:var(--primary);}
  .section{padding:64px 0;}
  .hero{height:auto;min-height:min(78vh,720px);padding-top:calc(var(--header-h) + 56px);}
  .hero .container{padding-bottom:56px;}
  .pat{grid-template-columns:1fr;gap:30px;padding:40px 0;}
  .pat.rev .pat-visual{order:0;}
  .inc{grid-template-columns:1fr;}
  .tl{grid-template-columns:1fr;} .tl::before{display:none;}
  .tl-step{padding:0 0 30px 40px;} .tl-dot{top:2px;}
  .pr{grid-template-columns:1fr;}
  .pr>div{border-right:none;border-bottom:1px solid var(--line);}
  .pr>div:last-child{border-bottom:none;}
}
@media (max-width:480px){
  .logo{font-size:1.05rem;letter-spacing:.12em;} .logo small{display:none;}
  .hero h1{font-size:1.75rem;}
  html[lang="en"] .hero h1{font-size:1.6rem;}
  .hero .btns .btn{width:100%;}
  .sec-ja{font-size:1.42rem;}
  .pat-no{font-size:2.6rem;}
  .pat h3{font-size:1.3rem;}
  .pr .big{font-size:2.4rem;}
  .cta h3{font-size:1.35rem;}
  .cta .btns .btn{width:100%;}
}

/* 2026-09-25 price notes */
small.note{display:block;margin-top:2px;font-size:.78rem;color:var(--muted);line-height:1.7;}