/* Japanese, code-rendered sample websites and concrete workflow examples. */
.jp-portfolio{min-width:0;width:100%;padding-top:4px}
.portfolio-label{display:flex;align-items:center;justify-content:space-between;gap:16px;color:#d5c7ac;font-size:12px;letter-spacing:.035em;margin:0 0 29px}
.portfolio-dot{width:5px;height:5px;border-radius:50%;background:#d5b779;flex-shrink:0}
.portfolio-stack{position:relative;aspect-ratio:1/1.26;isolation:isolate}
.mini-site{position:absolute;width:84%;overflow:hidden;background:#fff;color:#26364a;box-shadow:0 15px 38px #050a1466;border:1px solid #ffffff8f;border-radius:5px;line-height:1.5;font-family:"Yu Gothic",YuGothic,Meiryo,sans-serif;text-align:left}
.mini-browser{display:flex;align-items:center;gap:4px;padding:7px 10px;background:#eeeef0;border-bottom:1px solid #dde0e4;color:#8b8f97}
.mini-browser i{width:4px;height:4px;border-radius:50%;background:#b9bdc4}
.mini-browser span{font-size:6px;margin-left:7px;letter-spacing:.025em}
.mini-nav{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;white-space:nowrap}
.mini-nav b{font-size:13px;font-weight:700;letter-spacing:.04em}
.mini-nav>span{font-size:6px;color:#607084}
.mini-symbol{font:20px/1 Arial,sans-serif;margin-right:5px}
.mini-bottom{display:flex;justify-content:space-between;gap:6px;padding:14px 15px;font-size:7px;line-height:1.7;background:#fff}
.mini-garden{right:0;top:0;transform:rotate(4deg);width:79%;z-index:1}
.mini-garden .mini-nav{color:#365644;background:#fbfaf5}
.garden-photo{height:134px;background:linear-gradient(90deg,#0a1f16a6,transparent),url('/assets/engawa-veranda.webp') center 54%/cover;color:white;display:flex;align-items:center;padding:23px}
.garden-photo p{font:500 21px/1.75 "Yu Mincho",serif;letter-spacing:.06em;margin:0;text-shadow:0 1px 5px #0007}
.mini-garden .mini-bottom{color:#3b5b47;font-size:6px}
.mini-delivery{left:-1%;top:23%;transform:rotate(-6deg);z-index:2}
.mini-delivery .mini-nav{color:#1e5c9c}
.delivery-photo{position:relative;height:162px;padding:23px 19px;background:linear-gradient(90deg,#0e3662dc,#0e36622b),url('/assets/sample-delivery.jpg') center 57%/cover;color:white}
.delivery-photo p{font-size:22px;font-weight:700;letter-spacing:.025em;line-height:1.65;margin:0 0 15px}
.mini-cta{display:inline-block;font-size:7px;background:#fff;color:#1c4f85;padding:6px 11px;border-radius:2px;letter-spacing:.02em}
.mini-delivery .mini-bottom{color:#1e5c9c}
.mini-moving{right:-1%;top:50%;transform:rotate(4deg);z-index:3;width:88%}
.mini-moving .mini-nav{color:#bd5839;background:#fffdf7}
.moving-photo{background:#f4ede0;display:grid;grid-template-columns:58% 42%;align-items:stretch;min-height:160px}
.moving-photo>div{padding:23px 0 24px 17px;z-index:1}
.moving-eyebrow{font-size:7px;color:#9e694c}
.moving-photo p{font-size:18px;line-height:1.8;color:#6a392a;font-weight:700;white-space:nowrap;margin:11px 0 17px;letter-spacing:-.01em}
.moving-photo img{width:100%;height:100%;min-height:160px;object-fit:cover;object-position:48% center}
.moving-photo .mini-cta{background:#bb6545;color:white}
.mini-moving .mini-bottom{font-size:6px;background:#fffdf7;color:#a86a4b}
.portfolio-caption{font-size:11px;line-height:1.9;margin:18px 0 0;color:#b9c5d4;max-width:40em}
.portfolio-caption span{font-size:9px;color:#8799af}
.hero-consult-note{margin:17px 0 0;font-size:12px;color:#dfc18a;line-height:1.9;letter-spacing:.02em}
.hero-consult-note span{display:block;color:#b5c2d2;font-size:10px;letter-spacing:0;margin-top:3px}
.service-hero .hero-location-note{margin-top:18px}
.free-consult-label{font-size:13px;font-weight:600;color:#735b31;letter-spacing:.045em;margin:0 0 13px;display:flex;align-items:center;gap:11px}
.free-consult-label:before{content:"";display:block;width:20px;height:1px;background:#9e8355}
.service-contact .contact-copy h2{font-size:clamp(24px,2.2vw,34px);line-height:1.85;letter-spacing:.025em}
.service-contact .contact-copy>p:last-child{max-width:36em}
.service-contact{grid-template-columns:1.1fr 1fr;gap:7%}
.work-solution{border-top:1px solid #9daec33d;padding:26px 0 0;min-width:0}
.solution-kicker{color:#c4ae82;font-size:12px;margin:0 0 16px}
.work-solution h2{font:500 clamp(19px,1.8vw,27px)/1.8 "Yu Gothic",YuGothic,Meiryo,sans-serif;letter-spacing:.01em;margin:0 0 25px}
.work-solution h2 span{color:#d9e1eb;font-size:.8em;font-weight:400}
.solution-before{background:#ffffff04;border:1px solid #a3b0c330;padding:20px}
.solution-tag{display:block;font-size:9px;letter-spacing:.08em;color:#8fa1b8;margin-bottom:15px}
.repeat-docs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.repeat-docs>span{position:relative;padding:18px 7px 13px;background:#dce2e9;color:#344356;min-width:0;text-align:center;font-size:11px;border-radius:2px;border-top:3px solid #aab9cb}
.repeat-docs>span:nth-child(2){transform:translateY(5px)}
.repeat-docs>span small{display:block;font-size:8px;line-height:1.8;color:#6a798e;margin-top:9px}
.solution-before>p{font-size:11px;color:#97a8be;margin:19px 0 0;line-height:1.9}
.solution-transition{display:flex;align-items:center;justify-content:center;gap:14px;padding:15px 0;font-size:10px;color:#afbdd0}
.solution-transition>span:first-child{font:25px/1 Arial;color:#c8ae79}
.solution-after{padding:22px;background:#e6d5b0;color:#1c2b3b;box-shadow:0 7px 25px #050a1420}
.solution-after .solution-tag{color:#77613d;margin-bottom:10px}
.solution-after>p{margin:0;font-size:14px;line-height:2;letter-spacing:.015em}
.solution-after strong{font:500 31px/1.8 "Yu Mincho",serif;letter-spacing:.04em}
.solution-results{display:flex;flex-wrap:wrap;gap:7px 15px;margin-top:13px;border-top:1px solid #a88b554d;padding-top:13px;font-size:9px;color:#615641}
.solution-note{font-size:9px;color:#8497b0;margin:15px 0 0}
.web-page .service-hero h1{font-size:clamp(30px,3.5vw,56px);letter-spacing:.035em}
.web-page .service-hero-grid{gap:6%;grid-template-columns:1.05fr 1fr}
@media(max-width:1100px){.moving-photo p{font-size:16px}.mini-nav{padding:10px 12px}.mini-nav b{font-size:11px}.mini-nav>span{font-size:5px}.delivery-photo p{font-size:20px}.delivery-photo{height:150px}.moving-photo{min-height:145px}.moving-photo>div{padding-left:12px}.moving-photo img{min-height:145px}.portfolio-stack{aspect-ratio:1/1.5}.work-solution h2{font-size:22px}.repeat-docs>span{font-size:10px}.service-hero .service-button{font-size:11px;gap:18px}}
@media(max-width:760px){.portfolio-label{font-size:11px;margin-bottom:24px}.jp-portfolio{max-width:460px;margin:auto}.portfolio-stack{aspect-ratio:1/1.5}.mini-browser{padding:6px 8px}.mini-browser span{font-size:5px}.mini-nav{padding:10px 12px}.mini-nav b{font-size:11px}.mini-nav>span{font-size:5px}.garden-photo{height:100px;padding:18px}.garden-photo p{font-size:18px}.mini-bottom{font-size:6px;padding:11px 12px}.mini-garden .mini-bottom,.mini-moving .mini-bottom{font-size:5px}.delivery-photo{height:135px;padding:19px 15px}.delivery-photo p{font-size:19px;margin-bottom:12px}.mini-cta{font-size:6px;padding:6px 8px}.moving-photo{min-height:132px;grid-template-columns:59% 41%}.moving-photo>div{padding:16px 0 18px 12px}.moving-photo img{min-height:132px}.moving-photo p{font-size:15px;margin:10px 0 12px}.moving-eyebrow{font-size:6px}.portfolio-caption{font-size:10px;margin-top:18px}.portfolio-caption span{font-size:8px}.hero-consult-note{font-size:11px}.hero-consult-note span{font-size:9px}.free-consult-label{font-size:12px}.service-contact{grid-template-columns:1fr;gap:26px}.service-contact .contact-copy h2{font-size:23px;letter-spacing:.005em}.service-contact .contact-copy>p:last-child{font-size:12px}.work-solution{padding-top:22px;max-width:460px;width:100%;margin:auto}.solution-kicker{font-size:11px}.work-solution h2{font-size:22px}.work-solution h2 span{font-size:17px}.solution-before{padding:17px}.repeat-docs>span{font-size:10px;padding:15px 6px 11px}.repeat-docs>span small{font-size:7px}.solution-before>p{font-size:10px}.solution-after{padding:19px}.solution-after strong{font-size:29px}.solution-after>p{font-size:13px}.solution-results{font-size:8px}.web-page .service-hero h1{font-size:clamp(25px,7.1vw,40px)}.web-page .service-hero-grid{grid-template-columns:1fr;gap:42px}.web-page .service-lead{font-size:12px}.service-hero .service-button{font-size:11px;padding-inline:17px}}
@media(max-width:360px){.mini-nav>span{display:none}.moving-photo p{font-size:13px}.delivery-photo p{font-size:17px}.portfolio-stack{aspect-ratio:1/1.75}.mini-moving{top:50%}.moving-photo{grid-template-columns:65% 35%}.moving-photo>div{padding-left:10px}.mini-bottom{font-size:5px;padding-inline:9px}.work-solution h2{font-size:19px}.work-solution h2 span{font-size:15px}.repeat-docs{gap:5px}.repeat-docs>span{font-size:9px}.service-contact .contact-copy h2{font-size:21px}}
.production-preview{width:100%;max-width:380px;margin:0;justify-self:center;align-self:center;min-width:0}
.production-preview-label{font-size:10px;font-weight:400;letter-spacing:.06em;color:#a4afbd;margin:0 0 14px;text-align:center}
.production-preview img{display:block;width:100%;height:auto;object-fit:contain}
.production-preview figcaption{font-size:9px;line-height:1.9;color:#8999ae;letter-spacing:.01em;text-align:center;margin:13px 0 0}
.web-page .service-hero-grid{align-items:center;grid-template-columns:1.15fr .85fr;gap:6%;padding-bottom:55px}
@media(max-width:1100px){.production-preview{max-width:330px}.web-page .service-hero-grid{gap:5%;grid-template-columns:1.15fr .85fr}}
@media(max-width:760px){.web-page .service-hero-grid{grid-template-columns:minmax(0,1fr);gap:35px;padding-bottom:33px}.production-preview{max-width:290px;margin:0 auto}.production-preview-label{font-size:9px;margin-bottom:11px}.production-preview figcaption{font-size:8px;margin-top:11px}}