@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&family=Noto+Serif+JP:wght@500;600&display=swap');
:root{--ink:#24362c;--muted:#5e6e63;--paper:#f5f2ea;--orange:#d5986d;scroll-behavior:smooth}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans','Noto Sans JP',sans-serif}a{color:inherit;text-decoration:none}img{display:block;width:100%}h1,h2,h3,p{margin-top:0}.wrap{width:min(1200px,90%);margin-inline:auto}.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;background:white;padding:12px;z-index:20}.header{height:82px;display:flex;align-items:center;justify-content:space-between}.logo{font-size:23px;font-weight:700;letter-spacing:-.08em}.logo span{color:#bd815c;margin-left:3px}.header nav{display:flex;align-items:center;gap:31px;font-size:11px;font-weight:700;letter-spacing:.13em}.header nav a:hover,.text-link:hover,.footer-right a:hover{color:#bc8058}.header .nav-contact{background:var(--ink);color:#fff;padding:13px 19px;border-radius:25px}.header .nav-contact:hover{color:#fff;background:#496454}.hero{display:grid;grid-template-columns:1fr 43%;gap:7%;align-items:center;padding-top:38px;padding-bottom:106px;min-height:670px}.eyebrow,.kicker,.meta,.life-card>span,.life-card>div>span{font-size:11px;font-weight:700;letter-spacing:.17em}.eyebrow,.kicker{color:#a46e4c}h1{font-size:clamp(48px,6.1vw,86px);line-height:1.32;letter-spacing:-.075em;margin:24px 0 27px;font-weight:600;white-space:nowrap}h1 em,h2 em{font-family:'Noto Serif JP',serif;font-weight:500;font-style:normal}h1 em,h2 em{color:#b87b56}.hero-intro{font-size:16px;line-height:2.15;color:#506257;max-width:490px}.hero-actions{display:flex;gap:26px;align-items:center;margin-top:32px}.button{display:inline-flex;justify-content:space-between;align-items:center;gap:30px;border-radius:28px;padding:17px 21px;font-size:13px;font-weight:700;transition:transform .2s,background .2s;background:var(--ink);color:#fff}.button:hover{transform:translateY(-3px);background:#40594a}.button span{font-size:18px;line-height:1}.text-link{font-size:12px;font-weight:700;border-bottom:1px solid #8d998b;padding-bottom:7px}.sample-note{font-size:10px;line-height:1.8;color:#7a867b;margin:42px 0 0;max-width:465px}.hero-media{height:555px;position:relative}.hero-media>img{height:100%;object-fit:cover;object-position:center 35%;border-radius:230px 230px 16px 16px}.sticker{position:absolute;right:-25px;bottom:21px;width:124px;height:124px;background:var(--orange);border-radius:50%;color:white;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(12deg);text-align:center;font-size:17px;font-weight:700;line-height:1.15;box-shadow:0 12px 25px #26332624}.sticker small{font-size:9px;margin-top:7px;letter-spacing:.17em}.caption{position:absolute;left:0;bottom:-29px;font-size:10px;letter-spacing:.16em;color:#879085}.ticker{overflow:hidden;background:#d9e8ad;padding:17px 0;color:#3e5742;white-space:nowrap;text-align:center;font-size:13px;font-weight:700;letter-spacing:.18em}.section{padding-block:120px}.kicker{margin-bottom:27px}h2{font-size:clamp(34px,4vw,54px);line-height:1.48;letter-spacing:-.055em;font-weight:600;margin:0}.about{background:#e8eee3}.two-col{display:grid;grid-template-columns:1fr 1.15fr;gap:12%}.about-copy{padding-top:10px;color:#596a5d;font-size:14px;line-height:2.1}.about-copy .large{font-size:19px;color:var(--ink);line-height:2.05}.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:25px}.tags span{border:1px solid #a8b9a3;border-radius:30px;padding:8px 14px;font-size:11px;color:#4d6751}.section-head{display:flex;justify-content:space-between;align-items:end;gap:8%;margin-bottom:47px}.section-head>p{max-width:330px;color:var(--muted);font-size:13px;line-height:2;margin-bottom:4px}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.service-grid article{min-height:340px;background:#fff;border:1px solid #e5e7dc;border-radius:12px;padding:26px;display:flex;flex-direction:column}.num,.service-grid small{font-size:10px;letter-spacing:.15em;color:#a5785a;font-weight:700}.symbol{font-size:37px;color:#bd8a68;margin:35px 0 13px}.service-grid h3{font-size:21px;margin-bottom:13px}.service-grid p{font-size:13px;line-height:1.9;color:var(--muted);margin-bottom:24px}.service-grid small{margin-top:auto}.projects{background:#e9e1d4}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}.project>img{height:305px;object-fit:cover;border-radius:12px}.meta{display:flex;justify-content:space-between;gap:10px;color:#a46e4c;margin:20px 0 12px;font-size:10px}.project h3{font-size:21px;line-height:1.6;margin:0 0 9px}.project p{font-size:13px;line-height:1.9;color:var(--muted);max-width:520px}.life-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.life-card{min-height:290px;border-radius:11px;overflow:hidden;position:relative;padding:29px}.life-card h3{font-size:24px;margin:13px 0}.life-card p{font-size:13px;line-height:1.9;max-width:410px;margin:0}.photo{color:white;display:flex;align-items:end}.photo:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#112019db,transparent 80%)}.photo img{position:absolute;inset:0;height:100%;object-fit:cover}.photo>div{position:relative;z-index:1}.plain{background:#e7eee2}.plain.peach{background:#f1dfc9}.plain>span,.plain b{color:#ae7858}.plain b{position:absolute;right:28px;bottom:13px;font-size:65px;line-height:1;font-weight:400}.contact{background:#dbe8d8}.contact .two-col{align-items:center}.contact .two-col>div:first-child>p:last-child{font-size:14px;line-height:2.1;color:#526658;max-width:410px;margin-top:25px}.contact-card{background:#f9f8f1;padding:34px;border-radius:13px}.contact-arrow{font-size:35px;color:#ae7858}.contact-card .kicker{margin:24px 0 8px}.contact-card strong{display:block;font-size:clamp(19px,2.4vw,28px);letter-spacing:-.04em;overflow-wrap:anywhere}.warning{font-size:11px;line-height:1.8;color:#6e7b70;margin:15px 0 25px}.contact-card .button{width:100%}footer{display:flex;justify-content:space-between;gap:25px;padding-top:45px;padding-bottom:37px}footer p{font-size:12px;color:#6e7d70;margin:8px 0 0}.footer-right{display:flex;flex-direction:column;align-items:end;justify-content:space-between;gap:22px}.footer-right a{font-size:11px;font-weight:700;letter-spacing:.14em}.footer-right small{font-size:9px;color:#859083;letter-spacing:.1em}.credits{border-top:1px solid #e1e4da;padding:16px 5%;font-size:10px;color:#7a8579;line-height:1.9;text-align:center}.credits a{text-decoration:underline}
@media(max-width:850px){.header nav{gap:16px}.hero{grid-template-columns:1fr;gap:55px;padding-top:25px}.hero-copy{order:2}.hero-media{order:1;width:min(480px,83%);height:450px;margin:auto}.hero h1{font-size:clamp(48px,8vw,70px)}.section{padding-block:85px}.two-col{grid-template-columns:1fr;gap:32px}.about-copy{padding:0}.service-grid{grid-template-columns:1fr 1fr}.service-grid article:last-child{grid-column:span 2;min-height:240px}.project>img{height:255px}}
@media(max-width:600px){.header{height:68px}.logo{font-size:20px}.header nav{gap:10px;font-size:9px;letter-spacing:.02em}.header nav a[href="#about"],.header nav a[href="#favorites"]{display:none}.header .nav-contact{padding:10px 12px}.hero{padding-bottom:82px}.hero-media{width:86%;height:365px}.sticker{width:96px;height:96px;font-size:14px;right:-22px}.hero h1{font-size:clamp(42px,11vw,58px)}.hero-intro{font-size:14px}.hero-actions{gap:17px;flex-wrap:wrap}.sample-note{margin-top:30px}.section-head{display:block}.section-head>p{margin-top:22px}.service-grid,.project-grid,.life-grid{grid-template-columns:1fr}.service-grid article,.service-grid article:last-child{grid-column:auto;min-height:285px}.project>img{height:230px}.life-card{min-height:250px}.contact-card{padding:25px}footer{align-items:start}.footer-right small{line-height:1.7;text-align:right}}

/* Concept A — warm editorial */
:root{--ink:#263e37;--muted:#61756b;--paper:#faf7f1;--orange:#db8765;color-scheme:light}
body{background:var(--paper);color:var(--ink)}
::selection{background:#f2d7ac;color:#263e37}
.header{border-bottom:1px solid #e3e8dd}
.logo{letter-spacing:-.07em}.logo span{color:#d67b59}
.header nav a:hover,.text-link:hover,.footer-right a:hover{color:#c66e50}
.header .nav-contact{background:#d67b59;color:#fff;border-radius:28px}
.header .nav-contact:hover{background:#b85f43;color:#fff}
.hero{position:relative;isolation:isolate;padding-top:54px;padding-bottom:120px}
.hero:before{content:"A / 01";position:absolute;right:0;top:25px;font-size:11px;letter-spacing:.25em;color:#9eaa9c}
.eyebrow,.kicker{color:#b96448}
.hero h1{font-size:clamp(42px,5.25vw,72px);white-space:normal;line-height:1.25;font-weight:700;letter-spacing:-.075em}
h1 em,h2 em{color:#c66e50}
.hero-intro{color:#526a5c}
.button{background:#263e37;color:#fff;border-radius:28px}
.button:hover{background:#3d6253;color:#fff}
.text-link{border-color:#b5beae}
.sample-note{color:#728579}
.hero-media{isolation:isolate}
.hero-media:before{content:"";position:absolute;inset:-11px 10px 11px -11px;border:1px solid #e2a78a;border-radius:230px 230px 16px 16px;z-index:-1}
.hero-media>img{filter:none;border-radius:230px 230px 16px 16px}
.hero-screen{position:absolute;left:-54px;bottom:42px;width:54%;padding:8px;background:#fffdf8;border:1px solid #e2ddd1;box-shadow:0 18px 38px #263e3733;transform:rotate(-5deg);z-index:2}
.hero-screen img{height:142px;object-fit:cover}
.hero-screen span{display:block;color:#6b7e70;font-size:9px;font-weight:700;letter-spacing:.16em;padding:7px 3px 1px}
.sticker{z-index:3;right:-34px;bottom:50px;font-size:14px;background:#e8aa81;color:#293d33;box-shadow:0 12px 25px #263e3729}
.caption{color:#819184}
.ticker{background:#dce7ce;color:#315243;padding-block:15px}
.about{background:#edf1e7;border-block:1px solid #dee7da}
.about-copy{color:#536b5b}.about-copy .large{color:#263e37}
.tags span{border-color:#b7c9b1;color:#3f634d;background:#ffffff80}
.service-grid article{background:#fff;border-color:#e5e8dd;border-radius:15px;box-shadow:0 8px 24px #263e3709;transition:transform .25s,box-shadow .25s}
.service-grid article:hover{transform:translateY(-5px);box-shadow:0 15px 30px #263e3719}
.num,.service-grid small,.symbol,.meta{color:#ba674c}
.service-grid p,.section-head>p,.project p{color:#5d7065}
.projects{background:#f4e8de;border-block:1px solid #eadbd0}
.project>img{border-radius:12px;filter:none}
.life-card{border-radius:12px}
.photo img{filter:none}
.plain{background:#eaf1e5;border:1px solid #d7e4d2}
.plain.peach{background:#f5e7d9;border-color:#ead6c3}
.plain>span,.plain b{color:#be7051}
.contact{background:#e5efdf;border-block:1px solid #d7e4d0}
.contact .two-col>div:first-child>p:last-child{color:#526a5b}
.contact-card{background:#fffdf8;border:1px solid #e5e8db;border-radius:16px;box-shadow:12px 12px 0 #cfdbc2}
.contact-arrow{color:#be7051}
.contact-card strong{color:#263e37}
.warning{color:#697d6c}
footer p,.footer-right small,.credits{color:#738678}
.credits{border-color:#e1e8dc}
.credits a:hover{color:#b96448}
.design-notes{display:grid;grid-template-columns:280px 1fr;gap:5%;align-items:end;margin-top:76px;padding-top:48px;border-top:1px solid #d6e1d2}
.design-notes-head .kicker{margin-bottom:18px}
.design-notes-head h3{font-size:clamp(24px,2.4vw,32px);line-height:1.55;letter-spacing:-.05em;margin-bottom:16px}
.design-notes-head>p:last-child{font-size:12px;line-height:1.9;color:#65796a}
.design-notes-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.design-notes figure{margin:0;background:#fff;border:1px solid #e5e8dd;border-radius:12px;overflow:hidden}
.design-notes figure img{height:210px;object-fit:cover}
.design-notes figcaption{display:flex;flex-direction:column;gap:7px;padding:15px 16px 18px;font-size:14px;font-weight:700}
.design-notes figcaption span{font-size:10px;letter-spacing:.16em;color:#b96448}
@media(max-width:850px){.hero:before{top:0}.hero-copy{order:1}.hero-media{order:2}.hero-screen{left:-25px;width:49%}.design-notes{grid-template-columns:1fr;gap:20px}.design-notes-head>p:last-child{max-width:580px}}
@media(max-width:600px){.hero{padding-top:30px}.hero h1{font-size:clamp(40px,10vw,56px)}.hero-media:before{inset:-8px 7px 8px -8px}.hero-screen{left:-20px;bottom:25px;width:52%;padding:5px}.hero-screen img{height:94px}.hero-screen span{font-size:7px}.sticker{right:-22px;bottom:36px;font-size:11px}.contact-card{box-shadow:8px 8px 0 #cfdbc2}.ticker{font-size:10px;letter-spacing:.1em}.design-notes{margin-top:52px;padding-top:36px}.design-notes-grid{grid-template-columns:1fr}.design-notes figure img{height:185px}}