@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Sans+JP:wght@400;500;700;900&display=swap');
:root{--blue:#193c51;--cream:#fff7e7;--yellow:#f8ca62;--coral:#eb987e;--line:#233c4c}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--blue);font-family:'Noto Sans JP',sans-serif}button{font:inherit;cursor:pointer}a{color:inherit}.skip{position:absolute;left:-9999px;z-index:30}.skip:focus{left:12px;top:12px;background:white;padding:12px}.demo-banner{background:var(--blue);color:white;padding:8px 20px;text-align:center;font-size:10px;line-height:1.7}header{height:78px;padding:0 4%;display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid var(--blue)}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-size:19px;font-weight:900}.brand-icon{width:42px;height:42px;border-radius:12px;background:var(--yellow);display:grid;place-items:center;font-size:24px}.brand small{display:block;font:9px 'DM Mono',monospace;letter-spacing:.08em}header nav{display:flex;gap:28px;font:11px 'DM Mono',monospace}header nav a{text-decoration:none}.hero{display:grid;grid-template-columns:.82fr 1.18fr;min-height:730px;border-bottom:2px solid var(--blue)}.hero-text{padding:70px 8% 70px 10%;display:flex;flex-direction:column;align-items:flex-start}.hero-text>span,.rooms-title>span,.planner-title>span,.output-house>span,.memo-content>span,.closing>span{font:10px 'DM Mono',monospace;letter-spacing:.12em}.hero h1{font-size:clamp(65px,6.8vw,116px);letter-spacing:-.12em;line-height:1.35;margin:80px 0 25px}.hero-text p{font-size:13px;line-height:2.3;max-width:430px}.hero-text a{font-size:12px;text-decoration:none;border-bottom:2px solid;padding:10px 0;margin-top:auto}.house-graphic{background:#f4e9d3;display:flex;flex-direction:column;padding:5%;overflow:hidden}.roof{height:28%;background:var(--blue);clip-path:polygon(50% 0,100% 88%,100% 100%,0 100%,0 88%);display:flex;justify-content:center;align-items:flex-end;color:var(--cream);font:11px 'DM Mono',monospace;letter-spacing:.1em;padding-bottom:15px}.house-grid{height:62%;display:grid;grid-template-columns:1fr 1fr;border:8px solid var(--blue);border-top:0}.room{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;border-right:6px solid var(--blue);transition:background .45s}.room:last-child{border:0}.room-entry{background:var(--yellow)}.room-kitchen{background:var(--coral)}.room>span{position:absolute;top:15px;left:15px;font:14px 'DM Mono',monospace}.room b{font-size:clamp(90px,10vw,190px);font-weight:400;line-height:1}.room strong{font-size:clamp(28px,3vw,54px)}.room small{font:11px 'DM Mono',monospace;letter-spacing:.12em}.foundation{height:10%;background:var(--blue);display:grid;place-items:center;color:var(--cream);font:10px 'DM Mono',monospace;letter-spacing:.05em}
.rooms{padding:120px 5%;background:#e9f0ed}.rooms-title{display:grid;grid-template-columns:.4fr 1.2fr .6fr;gap:30px;align-items:end;max-width:1450px;margin:0 auto 60px}.rooms h2,.planner h2{font-size:clamp(48px,5vw,85px);line-height:1.35;letter-spacing:-.1em;margin:0}.rooms-title p,.planner-title p{font-size:12px;line-height:2.2}.room-photos{max-width:1450px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:20px}.room-photos figure{margin:0;border:3px solid var(--blue);background:var(--cream);display:grid;grid-template-rows:450px 90px}.room-photos img{height:100%;width:100%;object-fit:cover}.room-photos figcaption{display:flex;align-items:center;gap:25px;padding:12px 25px}.room-photos b{font:700 52px 'DM Mono',monospace}.room-photos span{font-size:23px;font-weight:900}
.planner{background:var(--yellow);padding:110px 5% 130px}.planner-title{display:grid;grid-template-columns:.4fr 1.2fr .6fr;gap:30px;align-items:end;max-width:1450px;margin:0 auto 60px}.planner-grid{max-width:1450px;margin:auto;display:grid;grid-template-columns:.75fr 1.25fr;gap:5%}.group{border-top:3px solid var(--blue);padding:23px 0 35px}.group h3{font-size:20px;margin:0 0 20px}.group h3 span{font:700 25px 'DM Mono',monospace;margin-right:15px}.options{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.option{border:2px solid var(--blue);background:var(--cream);min-height:75px;text-align:left;padding:10px;font-size:11px;font-weight:700}.option.active{background:var(--blue);color:white}.controls>p{font-size:10px;line-height:2}.output{background:var(--cream);border:3px solid var(--blue);padding:22px}.output-house>span{display:block;margin-bottom:20px}.mini-house{display:grid;grid-template-columns:1fr 1fr;height:280px;border:6px solid var(--blue);background:#e6d8c6;position:relative}.mini-house:before{content:'';position:absolute;inset:-50px -6px auto;height:48px;background:var(--blue);clip-path:polygon(50% 0,100% 100%,0 100%)}.output-house{padding-top:50px}.mini-room{display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:5px solid var(--blue);transition:filter .35s,transform .35s}.mini-room:last-child{border:0}.mini-entry{background:var(--yellow)}.mini-kitchen{background:var(--coral)}.mini-room b{font-size:90px;font-weight:400;line-height:1}.mini-room small{font-size:16px;font-weight:900}.mini-house.entry .mini-kitchen,.mini-house.kitchen .mini-entry{filter:grayscale(.8) opacity(.45)}.mini-house.entry .mini-entry,.mini-house.kitchen .mini-kitchen{transform:scale(1.04);z-index:1;outline:4px solid var(--blue)}.memo{display:grid;grid-template-columns:.65fr 1fr;margin-top:35px;border-top:2px solid var(--blue);padding-top:25px;gap:25px}.memo-image{position:relative;overflow:hidden;min-height:270px}.memo-image img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.memo-image span{position:absolute;bottom:0;left:0;background:var(--blue);color:#fff;font:9px 'DM Mono',monospace;padding:9px}.memo h3{font-size:24px;margin:10px 0}.memo dl{margin:0}.memo dl div{display:flex;justify-content:space-between;gap:15px;border-top:1px solid #b1a78f;padding:9px 0;font-size:11px}.memo dd{margin:0;text-align:right;font-weight:700}.memo button{background:var(--blue);color:white;border:0;padding:12px 17px;margin-top:15px;font-size:11px}.memo p{font-size:9px;line-height:1.8}
.closing{text-align:center;background:var(--coral);padding:120px 20px}.closing h2{font-size:clamp(52px,6vw,100px);line-height:1.4;letter-spacing:-.1em;margin:20px}.closing p{font-size:11px;line-height:2}.closing a{display:inline-block;text-decoration:none;border-bottom:2px solid;padding:10px;margin-top:20px;font-size:12px}footer{background:var(--blue);color:white;display:flex;justify-content:space-between;padding:25px 4%;font:10px 'DM Mono',monospace}footer a{text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #7e478c;outline-offset:3px}
@media(max-width:1000px){.hero{grid-template-columns:1fr}.hero-text{min-height:570px}.house-graphic{height:600px}.rooms-title,.planner-title{grid-template-columns:1fr 2fr}.rooms-title p,.planner-title p{grid-column:2}.planner-grid{grid-template-columns:1fr}.controls{margin-bottom:55px}.room-photos figure{grid-template-rows:330px 80px}}
@media(max-width:600px){header{height:65px}.brand{font-size:15px}.brand small{font-size:7px}.brand-icon{width:35px;height:35px;font-size:19px}header nav a:not(:last-child){display:none}.hero-text{padding:50px 6%;min-height:500px}.hero h1{font-size:65px;margin:75px 0 20px}.hero-text p{font-size:11px}.house-graphic{height:430px}.room b{font-size:80px}.room strong{font-size:25px}.roof{font-size:8px}.foundation{font-size:7px}.rooms,.planner{padding:75px 5%}.rooms-title,.planner-title{display:block}.rooms h2,.planner h2{font-size:50px;margin:20px 0}.room-photos{grid-template-columns:1fr}.room-photos figure{grid-template-rows:300px 70px}.room-photos b{font-size:35px}.room-photos span{font-size:18px}.options{gap:5px}.option{padding:7px;font-size:10px;min-height:70px}.output{padding:14px}.mini-house{height:210px}.mini-room b{font-size:60px}.memo{grid-template-columns:1fr}.memo-image{min-height:210px}.closing{padding:85px 20px}footer{flex-direction:column;gap:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.room,.mini-room{transition:none}}

/* Two photographed rooms under a wide service heading. */
.hero{display:block;min-height:0;border-bottom:2px solid var(--blue);background:var(--blue)}
.hero-text{display:grid;grid-template-columns:1.1fr .9fr;grid-template-rows:auto 1fr;column-gap:40px;min-height:0;padding:28px 5% 35px;background:var(--yellow);align-items:end}
.hero-text>span{grid-column:1/-1;display:block;align-self:start;margin-bottom:18px}
.hero h1{grid-column:1;grid-row:2;font-size:clamp(55px,6.3vw,100px);line-height:1.08;letter-spacing:.02em;margin:0;white-space:nowrap}
.hero-intro{grid-column:2;grid-row:2;align-self:end;padding-bottom:8px}
.hero-text .hero-intro p{font-size:13px;line-height:1.9;margin:0 0 12px;max-width:35em}
.hero-text .hero-intro a{font-size:12px;padding:6px 0;margin:0;display:inline-block}
.hero-gallery{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px;background:var(--blue);height:500px}
.hero-gallery figure{position:relative;overflow:hidden;margin:0;min-width:0;background:#cbbda9}
.hero-gallery img{display:block;width:100%;height:100%;object-fit:cover;filter:none}
.hero-gallery figure:first-child img{object-position:48% 50%}
.hero-gallery figure:last-child img{object-position:53% 50%}
.hero-gallery figcaption{position:absolute;left:18px;bottom:18px;background:#fff7e7e8;padding:8px 12px;font:700 12px 'Noto Sans JP',sans-serif}
@media(max-width:1000px){.hero-text{min-height:0;display:grid;grid-template-columns:1fr 1fr;padding:25px 5% 30px}.hero h1{font-size:clamp(51px,7vw,70px)}.hero-gallery{height:430px}}
@media(max-width:600px){.hero-text{display:block;padding:21px 5% 25px;min-height:0}.hero-text>span{font-size:9px;margin-bottom:14px}.hero h1{font-size:clamp(52px,13vw,66px);line-height:1.12;white-space:normal;margin:0 0 12px}.hero-intro{padding:0}.hero-text .hero-intro p{font-size:10px;line-height:1.7;margin:0 0 8px}.hero-text .hero-intro a{font-size:11px;padding:3px 0}.hero-gallery{height:320px;gap:5px;padding:5px}.hero-gallery figcaption{left:6px;bottom:6px;font-size:9px;line-height:1.2;padding:6px}.hero-gallery figure:first-child img{object-position:40% 50%}.hero-gallery figure:last-child img{object-position:55% 50%}}