:root{--paper:#f7f7f5;--ink:#202424;--muted:#727773;--accent:#e94f25;--line:#d9ddda;--serif:'Yu Mincho','Hiragino Mincho ProN','Noto Serif JP',serif;--sans:'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;color-scheme:light;font-family:var(--sans);color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:28px}body{margin:0}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a,label,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,label:has(+input:focus-visible),input:focus-visible{outline:2px solid var(--accent);outline-offset:5px}button{color:var(--ink)}button:disabled{cursor:wait}.skip-link{position:absolute;z-index:10;top:8px;left:16px;transform:translateY(-160%);background:#fff;padding:12px}.skip-link:focus{transform:none}.site-header{height:94px;display:flex;align-items:center;gap:25px;padding:0 4.5%;position:relative;z-index:3;background:var(--paper)}.brand{font:500 39px/1 var(--serif);letter-spacing:.06em;white-space:nowrap}.brand-prefix{display:block;font:500 12px/1.3 var(--sans);letter-spacing:.16em;margin-bottom:7px}.brand-description{font-size:12px;letter-spacing:.12em;border-left:1px solid #8c918d;padding-left:22px}.site-header nav{margin-left:auto;display:flex;align-items:center;gap:31px;font-size:12px;letter-spacing:.08em}.site-header nav a{padding:12px 0}.location{font-size:11px;color:#626763}.eyebrow{font-size:10px;letter-spacing:.19em;margin:0;font-weight:500}.top-sequence{height:calc(100svh + 600px);min-height:1140px;position:relative}.top-sticky{height:calc(100svh - 94px);min-height:600px;max-height:1050px;position:sticky;top:0;isolation:isolate;overflow:hidden}.top-background{position:absolute;inset:0;z-index:-1;background:var(--paper);background-size:cover;background-position:center}.top-content{height:100%;display:flex;flex-direction:column;padding:30px 4.5% 30px}.top-eyebrow{display:none}h1{font:500 clamp(38px,5.8vw,88px)/1.5 var(--serif);letter-spacing:.045em;white-space:nowrap;margin:0;text-align:center}h1>span{display:inline-block}.mobile-break{display:none}.hero-object-area{position:relative;flex:1;display:flex;align-items:center;justify-content:center;min-height:360px;padding:48px 80px 44px}.hero-aside{font:500 clamp(16px,1.4vw,24px)/1.85 var(--serif);letter-spacing:.18em;position:absolute;left:0;top:52px;margin:0}.hero-aside:before{content:'';display:block;width:33px;height:1px;background:var(--accent);margin-bottom:20px}.frame-object{position:relative;isolation:isolate}.frame-object .art-plane{position:absolute;inset:var(--inset-y) var(--inset-x);box-shadow:3px 13px 19px #1f252323;overflow:hidden}.art-plane>img{width:100%;height:100%;object-fit:cover;display:block}.frame-rails{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(5px 12px 8px #282d2b26)}.top-frame{width:min(55vw,calc((100svh - 335px)*1.46),710px);aspect-ratio:640/438;min-width:350px}.puzzle-seams{position:absolute;inset:0;width:100%;height:100%;opacity:.25;mix-blend-mode:multiply;pointer-events:none}.hero-side-label{position:absolute;right:5px;top:76px;display:flex;align-items:center;gap:18px;writing-mode:vertical-rl;color:#666d67;font-size:11px;letter-spacing:.18em}.hero-side-label i{display:block;width:1px;height:120px;background:linear-gradient(#bbb,var(--accent),#bbb)}.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;font-size:10px;color:var(--muted);letter-spacing:.08em;padding-top:8px}.hero-art-credit,.hero-index{flex:1}.hero-index{text-align:right}.scroll-cue{display:flex;flex-direction:column;align-items:center;gap:11px;color:var(--ink);font-size:12px;letter-spacing:.15em}.down-arrow{color:var(--accent);font-size:24px;line-height:1}.top-end{position:absolute;bottom:14svh;height:1px;width:1px}.completion-flash{position:fixed;inset:0;z-index:100;pointer-events:none;background:#fff;opacity:0}.introduction{padding:110px 15%;display:grid;grid-template-columns:1fr 1fr;column-gap:12%;row-gap:25px;background:#ecefeb}.introduction .eyebrow{grid-column:1/-1;color:#747a74}.introduction h2{font:500 clamp(30px,3.4vw,50px)/1.6 var(--serif);margin:0;letter-spacing:.06em}.introduction>p:not(.eyebrow){font-size:14px;line-height:2.2;letter-spacing:.09em;margin:10px 0 0}.text-link{font-size:12px;letter-spacing:.08em;grid-column:2;display:flex;align-items:center;gap:28px}.text-link span{font-size:22px;color:var(--accent)}.yohaku-section{background:#fff;padding:60px 5.5% 110px;scroll-margin-top:12px}.section-topline{font-size:10px;letter-spacing:.12em;display:flex;justify-content:space-between;color:#7c827c;padding-bottom:18px;border-bottom:1px solid var(--line)}.yohaku-heading{display:flex;justify-content:space-between;align-items:flex-end;padding:44px 0 32px}.yohaku-heading h2{font:500 22px/1.6 var(--serif);letter-spacing:.12em;margin:0}.yohaku-heading>p{font-size:12px;line-height:2;letter-spacing:.08em;margin:0 0 4px;color:#686e68}.preview-layout{display:grid;grid-template-columns:minmax(0,1fr) 248px;gap:34px;align-items:start}.room-scene{position:relative;aspect-ratio:3/2;background:#f0f2f2;isolation:isolate;overflow:hidden}.room-image{width:100%;height:100%;display:block;object-fit:cover}.room-frame{position:absolute;transition:width .4s,height .4s,top .4s,left .4s;--inset-x:2.4%;--inset-y:3.2%}.room-frame .art-plane{box-shadow:3px 7px 10px #252b2933}.room-frame .frame-rails{filter:drop-shadow(2px 5px 4px #252b2933)}.room-caption{position:absolute;left:18px;bottom:16px;background:#ffffffde;padding:8px 13px;font-size:11px;letter-spacing:.09em}.scene-caption{display:flex;justify-content:space-between;gap:10px;font-size:10px;letter-spacing:.05em;color:#767d77;padding-top:15px}.scene-caption [data-selection-summary]{color:#3e4841}.configurator fieldset{border:0;margin:0 0 25px;padding:0;min-width:0}.configurator legend{font-size:12px;letter-spacing:.06em;display:flex;align-items:center;justify-content:space-between;width:100%;padding:0;margin-bottom:13px}.configurator legend>span{font-size:11px;color:#828981}.finish-options{display:flex;gap:14px}.finish-options button{background:none;border:0;position:relative;padding:3px 3px 0;min-width:51px;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:10px}.swatch{width:33px;height:33px;display:block;border-radius:50%;box-shadow:inset 0 0 0 1px #00000014}.swatch.white{background:#f5f6f6}.swatch.black{background:linear-gradient(125deg,#363b3e,#111415)}.swatch.silver{background:linear-gradient(125deg,#8b9294,#e4e8e9 43%,#a9b0b1 55%,#dce1e2)}.finish-options [aria-pressed=true] .swatch{outline:1px solid #48504a;outline-offset:4px}.finish-options [aria-pressed=true]{font-weight:600}.size-options{display:flex;flex-direction:column;gap:6px}.size-options button{display:flex;align-items:center;justify-content:space-between;gap:5px;padding:12px 12px;border:1px solid #e0e4e0;background:#fff;min-height:47px;text-align:left;font-size:11px}.size-options b{font-size:16px;font-weight:500;font-family:Arial,sans-serif;letter-spacing:.025em}.size-options small{font-size:10px;color:#737b74;white-space:nowrap}.size-options [aria-pressed=true]{border-color:#606c63;background:#f1f4f1}.field-note{font-size:10px;color:#858b85;line-height:1.6;margin:8px 0 0}.room-options{display:flex;gap:5px}.room-options button{flex:1;white-space:nowrap;padding:10px 4px;background:#fff;border:1px solid #e0e4e0;font-size:10px}.room-options [aria-pressed=true]{background:#34423a;color:#fff;border-color:#34423a}.position-control label{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.05em}.position-control label span{font-size:10px;color:#848b85}.position-control input{width:100%;height:22px;margin:9px 0 0;accent-color:#45594b}.range-labels{display:flex;justify-content:space-between;font-size:9px;color:#858c86}.photo-control{border-top:1px solid #e5e8e5;margin-top:23px;padding-top:18px}.upload-button{font-size:11px;display:block;text-align:center;padding:12px 6px;border:1px solid #bbc3bc;cursor:pointer;background:#fff}#room-upload{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}.reset-photo{font-size:10px;background:none;padding:4px 0;border:0;text-decoration:underline;margin-top:7px}.upload-status{font-size:11px;line-height:1.6;color:#8d4934;margin-bottom:0}.site-footer{border-top:1px solid var(--line);padding:48px 5.5%;display:flex;align-items:center;gap:40px;background:var(--paper)}.site-footer .company-info{display:flex;flex-direction:column;gap:20px;flex-shrink:0}.site-footer .brand{font-size:29px}.company-details{margin:0;font-size:12px;line-height:1.9;letter-spacing:.04em}.company-details>div{display:grid;grid-template-columns:6em 1fr;gap:14px}.company-details dt{color:#727a73}.company-details dd{margin:0}.company-details address{font-style:normal}.site-footer .artwork-credit{font-size:10px;line-height:1.9;color:#727a73;margin-left:auto}.site-footer .artwork-credit a{text-decoration:underline;text-underline-offset:3px}.back-top{font-size:11px;margin-left:22px;white-space:nowrap}
@media(min-width:1500px){.preview-layout{grid-template-columns:minmax(0,1fr) 290px;gap:50px}.yohaku-section{padding-left:9%;padding-right:9%}.room-options button,.size-options button,.configurator legend{font-size:12px}}
@media(max-width:1000px){.site-header{height:82px;gap:18px}.brand{font-size:32px}.brand-description{font-size:10px;padding-left:15px}.site-header nav{gap:20px}.location{display:none}.hero-art-credit{font-size:9px}.hero-index{display:none}.hero-bottom{justify-content:center}.hero-art-credit{position:absolute;left:4.5%;bottom:27px;max-width:180px}.hero-aside{font-size:16px}.preview-layout{gap:24px;grid-template-columns:minmax(0,1fr) 224px}.introduction{padding:90px 10%;column-gap:9%}.site-footer{gap:25px}}
@media(max-width:760px){.site-header{padding:0 6%;height:80px;gap:0;justify-content:space-between}.brand{font-size:28px}.brand-prefix{font-size:10px;margin-bottom:6px}.brand-description{display:none}.site-header nav{margin:0;gap:23px;font-size:11px}.site-header nav a:last-child{display:none}.top-sequence{height:calc(100svh + 440px);min-height:1040px}.top-sticky{height:calc(100svh - 80px);min-height:600px}.top-content{padding:28px 6% 35px}.top-eyebrow{display:block;text-align:center;font-size:8px;margin-bottom:18px;letter-spacing:.16em}h1{font-size:clamp(32px,8.8vw,52px);letter-spacing:.045em;line-height:1.65;white-space:normal}.mobile-break{display:initial}.hero-object-area{padding:35px 25px 28px;min-height:290px}.top-frame{width:80%;min-width:0;max-width:470px}.hero-aside{top:auto;bottom:5px;left:-1px;font-size:12px;letter-spacing:.1em}.hero-aside:before{width:19px;margin-bottom:10px}.hero-side-label{display:none}.hero-bottom{position:relative;justify-content:center;padding:26px 0 0;min-height:88px}.hero-art-credit{left:auto;bottom:-18px;max-width:none;font-size:8px}.scroll-cue{font-size:10px;gap:8px}.introduction{grid-template-columns:1fr;gap:22px;padding:70px 8%}.introduction .eyebrow{grid-column:auto}.introduction h2{font-size:33px}.introduction>p:not(.eyebrow){font-size:12px}.text-link{grid-column:auto;margin-top:8px}.yohaku-section{padding:34px 6% 70px}.section-topline{font-size:9px;padding-bottom:14px}.yohaku-heading{padding:35px 0 24px;align-items:flex-start;gap:20px}.yohaku-heading h2{font-size:17px;letter-spacing:.06em}.yohaku-heading>p{font-size:10px;line-height:1.9;padding-top:7px;max-width:158px}.preview-layout{grid-template-columns:1fr;gap:28px}.room-caption{font-size:9px;left:11px;bottom:10px;padding:6px 10px}.scene-caption{font-size:9px;padding-top:11px}.configurator{display:grid;grid-template-columns:1fr 1fr;gap:22px}.configurator fieldset{margin:0}.configurator fieldset:nth-child(2){grid-column:2;grid-row:1/3}.configurator legend{font-size:11px}.position-control{grid-column:1}.photo-control{margin:0;padding-top:15px;grid-column:2}.finish-options{gap:10px}.finish-options button{min-width:40px;font-size:10px}.swatch{width:29px;height:29px}.room-options{flex-wrap:wrap}.room-options button{padding:10px 4px;min-width:45px}.size-options button{padding:10px 8px;gap:4px;flex-wrap:wrap;min-height:53px}.size-options small{font-size:9px}.size-options b{font-size:14px}.field-note{font-size:9px}.upload-button{font-size:10px;line-height:1.6;padding:8px 5px}.site-footer{padding:35px 6%;flex-wrap:wrap;align-items:flex-start;gap:26px}.site-footer .artwork-credit{margin:0;font-size:10px;flex:1;min-width:180px}.back-top{margin:0;flex-basis:100%;font-size:10px}}
@media(max-width:380px){.yohaku-heading{display:block}.yohaku-heading>p{padding-top:15px;max-width:none}.yohaku-heading>p br{display:none}.configurator{gap:20px 14px}.scene-caption{flex-wrap:wrap}.hero-aside{font-size:11px}.hero-object-area{padding-left:16px;padding-right:16px}.top-frame{width:86%}}
.room-column{position:sticky;top:30px}.wall-scene{--wall-color:#f2f3f2;--texture-opacity:.042;isolation:isolate}.wall-base,.wall-texture,.wall-daylight{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.wall-base{background:var(--wall-color)}.wall-texture{mix-blend-mode:multiply;opacity:var(--texture-opacity)}.wall-daylight{background:linear-gradient(128deg,#ffffff2b 0%,#ffffff05 48%,#1823200c 100%)}.wall-edge{position:absolute;left:0;right:0;bottom:0;height:5%;background:linear-gradient(#ffffff88,#ffffff25 3px,#00000004);border-top:1px solid #ffffff88;box-shadow:0 -1px 0 #0000000b}.wall-controls{border-top:1px solid #e1e5e1;padding-top:22px}.texture-control label{display:flex;justify-content:space-between;gap:8px;font-size:11px}.texture-control label span{font-size:10px;color:#798179}.texture-control input{display:block;width:100%;height:22px;margin:8px 0 0;accent-color:#45594b}.wall-controls .wall-color-field{margin:0}.texture-control{margin-top:24px}.wall-color-options{display:flex;justify-content:space-between;gap:6px;padding:4px}.wall-color-options button{border:1px solid #00000016;background:var(--chip);width:28px;height:28px;border-radius:50%;padding:0;flex-shrink:0}.wall-color-options [aria-pressed=true]{outline:1px solid #48504a;outline-offset:3px}.custom-color-label{display:flex;gap:9px;align-items:center;border:1px solid #e0e4e0;padding:9px 8px;cursor:pointer;font-size:10px;margin-top:13px}.custom-color-label input{width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer}.custom-color-label input::-webkit-color-swatch-wrapper{padding:0}.custom-color-label input::-webkit-color-swatch{border:1px solid #00000020;border-radius:3px}.custom-color-label [data-wall-hex]{margin-left:auto;color:#828b83;font-size:9px;font-family:Arial,sans-serif}.preview-layout{align-items:start}.scene-caption{line-height:1.6}
@media(max-width:760px){.room-column{top:0;z-index:3;background:#fff;padding-top:6px;padding-bottom:8px}.preview-layout{display:block}.configurator{margin-top:28px}.wall-controls{grid-column:1/-1;display:block}.wall-controls .wall-color-field{grid-column:1/-1;margin:0}.wall-color-options{justify-content:flex-start;gap:20px}.wall-color-options button{width:30px;height:30px}.custom-color-label{font-size:11px;min-height:42px}.custom-color-label [data-wall-hex]{font-size:10px}.wall-controls .texture-control label{flex-direction:row;gap:10px}.wall-controls .texture-control input{margin-top:15px}.scene-caption{font-size:9px}.wall-color-field legend{margin-bottom:10px}.room-column{position:sticky}.wall-controls .wall-color-field legend{grid-column:auto}}
.scene-tabs{display:flex;gap:15px;padding:0 0 16px;background:#fff}.scene-tabs button{display:flex;align-items:center;justify-content:center;gap:12px;flex:1;border:0;border-bottom:2px solid #e0e5e0;background:#fff;padding:0 0 11px;color:#687168;font-size:14px;min-width:0}.scene-tabs button img{width:64px;height:44px;object-fit:cover}.scene-tabs [aria-pressed=true]{border-color:#34483b;color:#243729}.scene-tabs [aria-pressed=true] span{font-weight:600}.scene-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}.clip-definitions{position:absolute;width:0;height:0;overflow:hidden}.editable-wall{position:absolute;inset:0;clip-path:url(#wall-area);pointer-events:none}.scene-credit{font-size:12px;color:#68736b;display:block;margin-top:10px;text-decoration:underline;text-underline-offset:3px}.scene-credit[hidden]{display:none}.wall-daylight{background:linear-gradient(112deg,#ffffff20 0%,#ffffff02 35%,#1823200e 100%)}.configurator legend{font-size:14px}.configurator legend>span{font-size:12px}.finish-options button{font-size:12px}.size-options button{font-size:12px}.size-options small{font-size:12px}.texture-control label{font-size:13px}.texture-control label span{font-size:12px}.custom-color-label{font-size:12px}.field-note{font-size:12px}.range-labels{font-size:11px}.scene-caption{font-size:12px;flex-wrap:wrap}.scene-caption span:last-child{font-size:11px}.room-caption{font-size:12px}.yohaku-heading>p{font-size:14px}.configurator fieldset{margin-bottom:25px}.size-options button{flex-wrap:wrap;gap:6px}.room-column{top:16px}
@media(max-width:760px){.yohaku-heading{display:block;padding:30px 0 24px}.yohaku-heading h2{font-size:20px;letter-spacing:.07em}.yohaku-heading>p{max-width:none;font-size:12px;line-height:1.8;padding-top:14px}.yohaku-heading>p br{display:none}.scene-tabs{gap:9px;padding-bottom:10px}.scene-tabs button{font-size:12px;gap:6px;padding-bottom:9px}.scene-tabs button img{width:38px;height:30px}.scene-caption{font-size:11px;gap:4px;padding-top:9px}.scene-caption span:last-child{font-size:10px}.room-column{top:0}.room-caption{font-size:10px}.configurator{gap:18px}.configurator legend{font-size:13px}.configurator legend>span{font-size:11px}.size-options button{font-size:12px;min-height:65px}.size-options small{font-size:11px}.field-note{font-size:11px}.texture-control label{font-size:12px}.texture-control label span{font-size:11px}.custom-color-label{font-size:12px}.scene-credit{font-size:11px}.wall-controls .wall-color-field{margin-top:0}}
.editable-wall{clip-path:none;mask-size:100% 100%;-webkit-mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat}
.wall-daylight.photo-shadows{background-size:cover;mix-blend-mode:multiply;filter:grayscale(1) brightness(1.25)}
@media(prefers-reduced-motion:reduce){.completion-flash{display:none}html{scroll-behavior:auto}.room-frame{transition:none}.top-sequence{height:auto;min-height:0}.top-sticky{position:relative}.top-end{bottom:0}}

.yohaku-identity{display:flex;align-items:center;gap:30px;min-width:0}.yohaku-logo{display:block;flex:0 0 auto;width:112px;height:auto;aspect-ratio:286/362}.yohaku-identity h2 span{display:inline-block}.yohaku-heading{align-items:center;gap:30px}
@media(max-width:760px){.yohaku-identity{gap:20px}.yohaku-logo{width:84px}.yohaku-identity h2{flex:1;font-size:20px;line-height:1.9}.yohaku-heading>p{padding-top:22px}}
@media(max-width:380px){.yohaku-logo{width:76px}.yohaku-identity{gap:16px}.yohaku-identity h2{font-size:18px}}

/* Keep the room and controls together while the visitor tries combinations. */
.preview-track{position:relative;overflow-anchor:none}.preview-track::after{content:"";display:block;height:clamp(280px,55svh,560px)}
.preview-layout{position:sticky;top:28px;height:min(900px,calc(100svh - 48px));min-height:0;align-items:stretch}
.room-column{position:static;display:flex;flex-direction:column;min-width:0;min-height:0;padding:0;background:#fff}
.scene-tabs,.scene-caption,.scene-credit{flex-shrink:0}
.scene-stage{display:flex;align-items:center;justify-content:center;flex:1;min-height:0;overflow:hidden;background:#f4f5f4}
.scene-stage .wall-scene{flex-shrink:0;margin:0;max-width:100%;max-height:100%}
.configurator{height:100%;min-height:0;min-width:0;overflow-y:auto;overscroll-behavior-y:contain;scroll-behavior:auto;scrollbar-gutter:stable;padding:8px 8px 20px;margin:0;scroll-padding-block:16px}
.configurator:focus-visible{outline:1px solid #7f8c82;outline-offset:5px}
.configurator button,.configurator input{scroll-margin-block:16px}
.site-footer .company-info{max-width:100%}
.texture-control input{touch-action:none}
@media(max-width:760px){
  /* One document scroll on phones: settings never trap a swipe above the footer. */
  .preview-track::after{display:none}
  .preview-layout{position:static;height:auto;display:flex;flex-direction:column;gap:16px}
  .room-column{position:static;flex:none;height:auto;z-index:auto}
  .scene-stage{flex:none;width:100%;height:auto;aspect-ratio:3/2}
  .configurator{flex:none;height:auto;overflow:visible;overscroll-behavior:auto;scrollbar-gutter:auto;display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:18px 14px;padding:8px 6px 20px;border-top:1px solid var(--line)}
  .configurator fieldset{margin-bottom:0}
  .finish-options{gap:8px}
  .finish-options button{flex:1;min-width:0;padding:3px 0 0}
  .room-caption{max-width:calc(100% - 22px);line-height:1.45}
  .wall-color-options{justify-content:space-between;gap:8px}
  .wall-controls{padding-top:18px}
  .scene-caption{line-height:1.45}
  .scene-credit{margin-top:5px}
  .texture-control input{touch-action:pan-y}
}
@media(prefers-reduced-motion:reduce){.preview-track::after{height:0}}
@media(max-width:480px){.scene-tabs button img{display:none}.scene-tabs button span{white-space:nowrap}}
@media(max-width:380px){.scene-tabs button img{width:28px;height:24px}.scene-tabs button span{white-space:nowrap}}

.site-header nav a[aria-current=page]{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:7px}
.company-history-link{align-self:flex-start;font-size:14px;text-decoration:underline;text-underline-offset:5px}
@media(max-width:760px){
  .site-header nav{gap:8px;font-size:12px;letter-spacing:0;white-space:nowrap}
  .site-header nav a:last-child{display:inline-block}
  .site-header nav .nav-about{display:none}
}
@media(max-width:380px){.site-header>.brand{font-size:26px}}