:root{--ink:#303630;--muted:#65685f;--paper:#faf9f6;--brass:#78603a;--line:#deded6}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);line-height:1.9}a{color:inherit;text-underline-offset:5px}img{max-width:100%;display:block}button{font:inherit}h1,h2,h3,p,figure{margin:0}h1{font-size:clamp(1.85rem,3.2vw,3.15rem);line-height:1.65;font-weight:400;letter-spacing:.04em}h2{font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:1.7;font-weight:400;margin-bottom:24px}h3{font-size:1.1rem}p{font-size:1rem}section{padding:85px max(6vw,24px)}#header{display:flex;justify-content:space-between;align-items:center;padding:18px 4vw;background:var(--paper);gap:20px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:20px;text-decoration:none}.brand img{width:110px;height:auto}.brand span{font-size:.875rem}nav{display:flex;align-items:center;gap:28px}nav a{font-size:.875rem;text-decoration:none}.button{display:inline-flex;align-items:center;justify-content:center;background:var(--ink);color:#fff;text-decoration:none;padding:16px 26px;font-size:.9375rem;line-height:1.6;text-align:center;min-height:48px;transition:background .2s}.button:hover{background:#515a4e}:focus-visible{outline:3px solid #ad853c;outline-offset:5px}.hero{display:grid;grid-template-columns:1fr 1.1fr;padding:0;min-height:650px}.hero-copy{align-self:center;padding:55px 4vw 55px 6vw}.eyebrow{font-family:var(--font-body);font-size:.875rem;letter-spacing:.14em;color:var(--brass);margin-bottom:22px}.hero-copy>p:not(.eyebrow){margin-top:24px}.hero-copy>.button{margin-top:30px}.hero-note{font-size:.875rem;color:var(--muted);line-height:1.8}.text-link{display:inline-block;margin-top:22px;font-size:.875rem}.hero-photo{position:relative;min-width:0}.hero-photo>img{width:100%;height:100%;object-fit:cover;object-position:61% center}.hero-photo figcaption{position:absolute;bottom:20px;left:20px;right:20px;color:white;text-shadow:0 1px 8px #000;font-size:.875rem}#gallery{text-align:center;background:#eeefeb}#gallery h2 svg,.section-icon{display:none}.section-lead{color:var(--muted);margin:-8px auto 34px;max-width:700px}.gallery-swiper{max-width:1200px;padding-bottom:42px}.gallery-item{display:block}.gallery-item img{aspect-ratio:1;object-fit:cover;width:100%}.swiper-button-next,.swiper-button-prev{color:white;filter:drop-shadow(0 1px 3px #333)}.swiper-pagination{--swiper-pagination-color:var(--ink)}.section-action{margin-top:26px}.section-action p{font-size:.875rem;color:var(--muted);margin-top:14px}.intro-section{text-align:center;padding-block:100px}.intro-section p{line-height:2.2}.story-section{display:flex;gap:7vw;align-items:center;max-width:1320px;margin:auto;padding-block:55px}.story-section.reverse{flex-direction:row-reverse}.story-image{flex:1;min-width:0}.story-image img{width:100%;aspect-ratio:1.2;object-fit:cover}.story-content{flex:1}.story-content p{color:var(--muted);line-height:2}#reviews{text-align:center}.review-slider{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;max-width:1150px;margin:auto}.review{text-align:left;border-top:1px solid var(--line);padding-top:25px}.review-header{margin-bottom:18px}.review-icon{display:none}.review p{color:var(--muted)}#process{background:#eeefeb;text-align:center}.process-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;max-width:1100px;margin:auto}.step img{width:70px;height:70px;object-fit:contain;margin:0 auto 18px}.step p{color:var(--muted);margin-top:14px;text-align:left}.step{min-width:0}#faq{max-width:1000px;margin:auto}#faq h2{margin-bottom:32px}.faq-list details{border-top:1px solid var(--line);padding:22px 0}.faq-list details:last-child{border-bottom:1px solid var(--line)}summary{cursor:pointer;padding-right:24px;font-size:1rem}details p{color:var(--muted);padding-top:18px}#cta{background:#303630;color:#fff;text-align:center}#cta .eyebrow{color:#d3bd91}#cta .button{margin:30px auto 18px;background:#fff;color:var(--ink)}#cta .hero-note{color:#ddd}footer{text-align:center;padding:38px 24px}.sns-icons{display:flex;justify-content:center;gap:24px;margin-bottom:15px}.sns-icon{width:23px;height:23px}footer p{font-size:.875rem}.mobile-break,.mobile-line-break,.mobile-extra-space{display:none}#lightbox{border:0;padding:45px 12px 12px;background:#faf9f6;max-width:92vw;max-height:92dvh}#lightbox::backdrop{background:#000c}#lightbox img{max-height:80dvh;width:auto;max-width:85vw;object-fit:contain}.lightbox-close{position:absolute;top:0;right:6px;background:none;border:0;font-size:2rem;line-height:1;min-width:44px;min-height:44px;cursor:pointer}.mobile-cta{display:none}
@media(max-width:1000px){.brand span{display:none}nav{gap:18px}.hero-copy{padding:40px 24px}.hero{min-height:580px}.hero-copy>.button{padding:16px}.review-slider{gap:22px}}
@media(max-width:700px){#header{padding:15px 20px}.brand img{width:90px}nav>a:not(.button){display:none}nav .button{padding:10px 14px;font-size:.875rem}.hero{display:flex;flex-direction:column;min-height:0}.hero-copy{padding:34px 24px}.hero-copy .eyebrow{margin-bottom:12px}.hero-copy>p:not(.eyebrow){margin-top:16px}.hero-copy>.button{margin-top:22px;width:100%}.hero-photo img{height:auto;aspect-ratio:1.3;object-position:center}.hero-photo figcaption{font-size:.8125rem}.hero-note{font-size:.875rem}.text-link{margin-top:16px}section{padding:56px 24px}.intro-section{padding-block:65px}.story-section,.story-section.reverse{flex-direction:column;gap:24px;padding-block:32px}.story-image,.story-content{width:100%}.story-content h2{margin-bottom:16px}.review-slider,.process-steps{grid-template-columns:1fr;gap:28px}.process-steps{text-align:left}.step{display:grid;grid-template-columns:55px 1fr;column-gap:20px}.step img{width:55px;height:55px;grid-row:span 2;margin:0}.step p{margin-top:8px}.mobile-cta{display:block;position:fixed;bottom:0;left:0;right:0;padding:10px 18px calc(10px + env(safe-area-inset-bottom));background:#faf9f6f5;border-top:1px solid var(--line);z-index:10}.mobile-cta .button{width:100%}body{padding-bottom:85px}#gallery h2{font-size:1.45rem}.section-lead{font-size:.9375rem}.mobile-hide-break{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Installation examples: preserve the full photograph and its surroundings. */
.installation-section{max-width:1440px;margin:auto;text-align:center}.installation-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}.installation-grid figure{min-width:0;text-align:left}.installation-grid .gallery-item{background:#eeefeb}.installation-grid .gallery-item img{width:100%;height:auto;aspect-ratio:3/4;object-fit:contain}.installation-grid figcaption{padding-top:22px}.installation-grid h3{font-weight:400;margin-bottom:12px}.installation-grid p{color:var(--muted);font-size:.9375rem}.installation-grid .installation-note{margin-top:12px;font-size:.875rem}.installation-grid .text-link{margin-top:16px}.installation-help{margin-top:28px;color:var(--muted);font-size:.875rem}@media(max-width:700px){.installation-grid{grid-template-columns:1fr;gap:38px}.installation-grid .gallery-item img{max-height:560px}.installation-grid figcaption{padding-top:18px}}

#story-brass .story-image img{width:100%;height:auto;aspect-ratio:1;object-fit:contain}#story-brass figcaption{font-size:.875rem;color:var(--muted);margin-top:12px;line-height:1.8}#story-brass .story-content>p+p{margin-top:18px}#story-brass .brass-care-note{font-size:.875rem;line-height:1.9;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}

/* Shared brand typography with lp_project_codex. */
:root{--font-heading:'Shippori Mincho','Yu Mincho','Hiragino Mincho ProN',serif;--font-body:'Noto Sans JP','Hiragino Sans',Meiryo,sans-serif}
body{font-weight:400;letter-spacing:.025em;line-height:1.95}
h1,h2,.installation-grid h3{font-family:var(--font-heading);font-weight:500;letter-spacing:.045em}
h2{line-height:1.65}
.step h3{font-family:var(--font-body);font-weight:500}
.review h3{font-family:var(--font-body);font-weight:600}
.button,.text-link{font-family:var(--font-body);font-weight:500;letter-spacing:.035em}
.eyebrow{font-family:var(--font-body);font-weight:500;letter-spacing:.12em}
.brand span{font-family:var(--font-heading);font-weight:500;letter-spacing:.12em}
h1,h2,h3,p{overflow-wrap:anywhere}

/* Keep all four design proposals visible without cropping. */
#design-options .story-image img{width:100%;height:auto;aspect-ratio:1;object-fit:contain}

/* Scoped navigation overrides also win over the later-loaded Swiper stylesheet. */
#gallery .gallery-swiper{--swiper-theme-color:var(--ink);--swiper-navigation-color:var(--ink);--swiper-navigation-size:18px;--swiper-pagination-color:var(--ink)}
#gallery .swiper-button-prev,#gallery .swiper-button-next{width:44px;height:44px;margin-top:-22px;color:var(--ink);background:rgba(250,249,246,.94);border:1px solid rgba(48,54,48,.18);border-radius:50%;filter:none;box-shadow:none;transition:background .2s}
#gallery .swiper-button-prev:hover,#gallery .swiper-button-next:hover{background:#fff}
#gallery .swiper-button-prev::after,#gallery .swiper-button-next::after{font-size:18px}

/* Editorial text follows normal Japanese line breaking. */
.phrase{display:inline-block;max-width:100%;overflow-wrap:normal}
h1,h2,h3,p,summary,figcaption{overflow-wrap:break-word;word-break:normal;line-break:strict}
.button{flex-wrap:wrap}
.delivery-line{display:block}
.delivery-line strong{font-weight:500;white-space:nowrap}
#intro p+p,.story-content p+p{margin-top:18px}
#installations .installation-lead-detail{margin-top:-20px}
.question-text{display:block}
summary{display:flex;gap:12px;align-items:baseline;list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:'+';flex:0 0 16px;font-size:20px;line-height:1}
details[open]>summary::before{content:'−'}

/* Mobile reading column: aligned left inside an evenly centred container. */
@media(max-width:700px){
 html{scroll-padding-top:24px}
 body{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
 #header{padding:14px 24px;gap:12px}
 nav .button{font-size:.875rem;padding:10px 12px}
 section,#gallery,#installations,#intro,#reviews,#process,#faq,#cta{
   width:100%;max-width:100%;padding:48px 24px;text-align:left;
 }
 h2,#gallery h2,#process h2{font-size:1.65rem;line-height:1.6;letter-spacing:.035em;margin:0 0 20px}
 h3{line-height:1.7}
 p,.section-lead,.story-content p,.intro-section p{font-size:1rem;line-height:1.95;letter-spacing:.02em;text-align:left;text-wrap:pretty}
 .eyebrow{font-size:.8125rem;line-height:1.5;margin:0 0 14px;letter-spacing:.1em}
 .section-lead{max-width:none;margin:0 0 24px}
 #installations .installation-lead-detail{margin-top:-12px}
 #hero{display:flex;flex-direction:column;gap:0;padding:28px 24px 40px;min-height:0}
 .hero-copy{display:contents}
 .hero-copy>.eyebrow{order:-4;margin:0 0 12px}
 .hero-copy h1{order:-3;font-size:clamp(1.5rem,7.2vw,2rem);line-height:1.6;letter-spacing:.025em;margin:0 0 24px;width:100%}
 .hero-photo{order:-2;width:100%;margin:0 0 22px}
 .hero-photo>img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
 .hero-photo figcaption{position:static;margin-top:10px;color:var(--muted);font-size:.8125rem;line-height:1.7;text-shadow:none}
 .hero-copy>p:not(.eyebrow){margin:0;width:100%}
 .desktop-break{display:none}
 .hero-copy>.button{order:1;width:100%;margin:24px 0 14px}
 .hero-copy>.hero-note{order:2;font-size:.875rem;line-height:1.85;color:var(--muted)}
 .hero-copy>.text-link{order:3;margin-top:18px}
 .button{min-height:52px;font-size:.9375rem;padding:14px 12px}
 #gallery h2 .phrase{display:block}
 .gallery-swiper{width:100%;padding-bottom:32px}
 .section-action{margin-top:20px}
 .section-action .button{width:100%}
 .section-action p{font-size:.875rem;line-height:1.8;margin-top:14px}
 .installation-grid{gap:36px}
 .installation-grid .gallery-item img{width:100%;height:auto;aspect-ratio:auto;max-height:none;object-fit:contain}
 .installation-grid figcaption{padding-top:16px}
 .installation-grid h3{font-size:1.1875rem;margin:0 0 10px}
 .installation-grid p{font-size:.9375rem;line-height:1.85}
 .installation-grid .installation-note{font-size:.875rem;margin-top:10px}
 .installation-help{margin-top:24px;font-size:.875rem}
 #intro{border-top:1px solid var(--line);padding-bottom:32px}
 #intro p+p{margin-top:16px}
 .story-section,.story-section.reverse{display:flex;flex-direction:column;gap:0;align-items:stretch;padding:32px 24px 40px}
 .story-content{display:contents}
 .story-content>.eyebrow{order:-3;margin:0 0 12px}
 .story-content>h2{order:-2;margin:0 0 22px}
 .story-image{order:-1;flex:none;width:100%;margin:0 0 22px}
 .story-image img{width:100%;height:auto;object-fit:contain}
 .story-content>p{width:100%;margin:0}
 .story-content>p+p,#story-brass .story-content>p+p{margin-top:16px}
 #story-brass .story-content>.eyebrow{margin-top:0}
 #story-brass .brass-care-note{font-size:.875rem;line-height:1.85;margin-top:20px;padding-top:18px}
 #story-brass figcaption{font-size:.8125rem;line-height:1.7}
 #reviews{border-top:1px solid var(--line)}
 .review-slider{gap:24px}
 .review{padding-top:22px}
 .review h3{font-size:1rem;line-height:1.8}
 .review-header{margin-bottom:10px}
 .review p{font-size:.9375rem;line-height:1.95}
 .process-steps{gap:24px}
 .step{display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px 14px;align-items:center;border-top:1px solid #d2d5cd;padding-top:22px}
 .step img{width:36px;height:36px;grid-row:auto;margin:0}
 .step h3{font-size:1.0625rem}
 .step p{grid-column:1/-1;margin:0;font-size:1rem}
 #process .section-lead{font-size:.9375rem;line-height:1.9}
 .delivery-line+.delivery-line{margin-top:8px}
 #faq h2{margin-bottom:24px}
 .faq-list details{padding:20px 0}
 .faq-list summary{font-size:.9375rem;line-height:1.8;padding-right:0}
 details p{font-size:.9375rem;line-height:1.95;padding-top:16px}
 #cta .button{width:100%;margin:24px 0 16px}
 #cta .hero-note{font-size:.875rem;line-height:1.85}
 .mobile-cta{padding:10px 24px calc(10px + env(safe-area-inset-bottom))}
 .mobile-cta .button{min-height:48px;font-size:.875rem;padding:12px 8px}
 footer{padding:28px 24px}
}
@media(max-width:350px){
 #header{padding-inline:20px}.brand img{width:82px}nav .button{font-size:.8125rem}
 h2,#gallery h2,#process h2{font-size:1.5rem}
 .hero-copy>.button,#cta .button{font-size:.875rem}
 .button .phrase{display:inline}
 .mobile-cta{padding-inline:16px}
}