:root{
 --ink:#1B2540;      /* 藍 */
 --ink-2:#2A3656;
 --text:#2B3044;
 --sub:#646B80;
 --line:#DCDFE5;
 --paper:#FFFFFF;
 --mist:#F3F4F6;     /* 澄んだ薄灰（クリームではない） */
 --brass:#A8854A;    /* 差し色は線と点だけ */
 --mincho:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
 --gothic:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
 --e:cubic-bezier(.22,.8,.24,1);
 --gut:clamp(20px,5vw,72px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--gothic);font-weight:400;color:var(--text);background:var(--paper);line-height:2;letter-spacing:.05em;font-size:15px;word-break:auto-phrase;line-break:strict}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.wrap{padding:0 var(--gut);max-width:1440px;margin:0 auto}

/* header */
.hd{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.96);transition:box-shadow .3s}
.hd.is-scrolled{box-shadow:0 1px 0 var(--line)}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;height:84px}
.mark{font-family:var(--mincho);font-weight:700;font-size:1.45rem;letter-spacing:.06em;color:var(--ink);text-decoration:none;display:flex;align-items:baseline;gap:2px}
.mark .dot{width:6px;height:6px;border-radius:50%;background:var(--brass);display:inline-block;margin-left:3px}
.mark small{font-family:var(--gothic);font-weight:500;font-size:.68rem;letter-spacing:.12em;color:var(--sub);margin-left:14px}
.gnav{display:flex;align-items:center;gap:clamp(18px,2.6vw,40px)}
.gnav a{text-decoration:none;font-size:.86rem;font-weight:500;color:var(--ink)}
.gnav a:not(.btn){background:linear-gradient(var(--ink),var(--ink)) left bottom/0 1px no-repeat;padding-bottom:2px;transition:background-size .35s var(--e)}
.gnav a:not(.btn):hover{background-size:100% 1px}
.menu{display:none;background:none;border:0;font:500 .82rem var(--gothic);letter-spacing:.12em;color:var(--ink);cursor:pointer;padding:10px 0;display:none;align-items:center;gap:10px}
.menu i{width:22px;height:9px;position:relative;display:inline-block;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);transition:.3s}

/* button */
.btn{display:inline-flex;align-items:center;gap:16px;padding:15px 26px;border:1px solid var(--ink);color:var(--ink);text-decoration:none;font-size:.86rem;font-weight:500;letter-spacing:.1em;border-radius:2px;transition:background .3s,color .3s}
.btn .ar{width:22px;height:1px;background:currentColor;position:relative;transition:width .35s var(--e)}
.btn .ar:after{content:"";position:absolute;right:0;top:-3px;width:7px;height:1px;background:currentColor;transform:rotate(35deg);transform-origin:right}
.btn:hover .ar{width:32px}
.btn.fill{background:var(--ink);color:#fff}
.btn.fill:hover{background:var(--ink-2)}
.btn.ghost-w{border-color:rgba(255,255,255,.6);color:#fff}
.btn.ghost-w:hover{background:#fff;color:var(--ink)}
.gnav .btn{padding:11px 20px}

/* hero */
.hero{position:relative;padding:28px 0 0}
.hero .wrap{display:grid;grid-template-columns:minmax(260px,4fr) 8fr;gap:clamp(24px,4vw,64px);align-items:stretch}
.hero-copy{display:flex;flex-direction:column;justify-content:space-between;padding:32px 0 8px;min-height:min(calc(100svh - 120px),760px)}
.vh{writing-mode:vertical-rl;font-family:var(--mincho);font-weight:500;color:var(--ink);font-size:clamp(2.4rem,min(4vw,6.4vh),4.2rem);line-height:1.6;letter-spacing:.1em;font-feature-settings:"vpal" 1;align-self:flex-start;height:max-content}
.vh .l{display:block}
.vh .l + .l{margin-right:.15em}
.hero-lead{max-width:26em;font-size:.92rem;color:var(--text);margin-top:32px}
.hero-acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero-pic{position:relative;margin-right:calc(var(--gut) * -1);min-height:min(calc(100svh - 120px),760px)}
.hero-pic .p1{position:absolute;inset:0 0 72px 0;overflow:hidden}
.hero-pic .p1 img{width:100%;height:100%;object-fit:cover;object-position:68% 50%}
.hero-pic .p2{position:absolute;left:-48px;bottom:0;width:clamp(150px,19vw,250px);aspect-ratio:1;overflow:hidden;border:10px solid var(--paper)}
.hero-pic .p2 img{width:100%;height:100%;object-fit:cover}
.hero-pic .cap{position:absolute;right:var(--gut);bottom:30px;font-size:.72rem;color:var(--sub);letter-spacing:.1em}

/* load sequence — the one orchestrated moment (JS only) */
.js .hero .p1{clip-path:inset(100% 0 0 0)}
.js .hero .p1 img{transform:scale(1.08)}
.js .hero .p2{opacity:0;transform:translateY(24px)}
.js .hero .vh .c{opacity:0}
.js .hero .later{opacity:0}
.js .hero.go .p1{clip-path:inset(0 0 0 0);transition:clip-path 1.5s var(--e)}
.js .hero.go .p1 img{transform:none;transition:transform 2.4s var(--e)}
.js .hero.go .p2{opacity:1;transform:none;transition:opacity 1s 1.1s var(--e),transform 1s 1.1s var(--e)}
.js .hero.go .vh .c{opacity:1;transition:opacity 1.1s var(--e);transition-delay:calc(.45s + var(--i) * 70ms)}
.js .hero.go .later{opacity:1;transition:opacity 1s 1.5s var(--e)}

/* sections */
.sec{padding:clamp(96px,12vw,168px) 0}
.sh{display:flex;align-items:baseline;gap:18px;margin-bottom:clamp(40px,5vw,64px)}
.sh h2{font-family:var(--mincho);font-weight:500;font-size:clamp(1.5rem,2.2vw,1.9rem);color:var(--ink);letter-spacing:.12em}
.sh span{font-size:.78rem;color:var(--sub);letter-spacing:.08em}
.sh:before{content:"";width:28px;height:1px;background:var(--brass);align-self:center}

/* about */
.about .wrap{display:grid;grid-template-columns:7fr 5fr;gap:clamp(32px,6vw,110px);align-items:end}
.about .stmt{font-family:var(--mincho);font-weight:500;font-size:clamp(1.55rem,2.7vw,2.35rem);line-height:1.85;color:var(--ink);letter-spacing:.1em;margin-bottom:40px}
.about .stmt span{display:inline-block}
.about p.body{max-width:34em;margin-bottom:1.2em}
.about figure{aspect-ratio:3/4;overflow:hidden}
.about figure img{width:100%;height:100%;object-fit:cover}
.about .acts{margin-top:36px}

/* services: index list + swapping picture */
.svc{background:var(--mist)}
.svc-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,5vw,88px);align-items:start}
.svc-pic{position:sticky;top:118px}
.svc-pic .frame{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--line)}
.svc-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s var(--e),transform 1.6s var(--e);transform:scale(1.04)}
.svc-pic img.on{opacity:1;transform:none}
.svc-pic img:first-child{opacity:1;transform:none}
.js .svc-pic img:first-child:not(.on){opacity:0}
.svc-pic .note{font-size:.72rem;color:var(--sub);margin-top:12px}
.svc-list{list-style:none;border-top:1px solid var(--ink)}
.svc-row{display:grid;grid-template-columns:1fr auto;gap:8px 32px;padding:30px 0 30px 0;border-bottom:1px solid var(--line);position:relative;cursor:default}
.svc-row:before{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--brass);transition:width .6s var(--e)}
.svc-row.on:before{width:100%}
.svc-row h3{font-family:var(--mincho);font-weight:500;font-size:clamp(1.15rem,1.6vw,1.35rem);color:var(--ink);letter-spacing:.1em;line-height:1.6}
.svc-row .pr{font-family:var(--mincho);font-weight:500;color:var(--ink);font-size:1.02rem;text-align:right;white-space:nowrap;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.svc-row .pr small{display:block;font-family:var(--gothic);font-size:.7rem;color:var(--sub);letter-spacing:.06em}
.svc-row p{grid-column:1/-1;font-size:.88rem;color:var(--sub);max-width:36em;line-height:1.9}
.svc-row .m{display:none}
.svc-foot{margin-top:40px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.svc-foot p{font-size:.8rem;color:var(--sub)}

/* flow — a real sequence, so it is numbered */
.flow ol{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.flow li{padding:34px 28px 0 0;position:relative}
.flow li:before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;background:var(--ink)}
.flow .n{font-family:var(--mincho);font-size:.9rem;color:var(--brass);letter-spacing:.1em}
.flow h3{font-family:var(--mincho);font-weight:500;font-size:1.15rem;color:var(--ink);margin:6px 0 10px;letter-spacing:.1em}
.flow p{font-size:.86rem;color:var(--sub);max-width:18em}

/* contact */
.contact{background:var(--ink);color:#fff}
.contact .wrap{display:grid;grid-template-columns:6fr 5fr;gap:clamp(32px,6vw,100px);align-items:end}
.contact h2{font-family:var(--mincho);font-weight:500;font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.7;letter-spacing:.1em}
.contact .lede{color:rgba(255,255,255,.72);margin-top:22px;max-width:30em}
.contact dl{border-top:1px solid rgba(255,255,255,.22)}
.contact dl div{display:grid;grid-template-columns:5.5em 1fr;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.22);font-size:.9rem}
.contact dt{color:rgba(255,255,255,.6)}
.contact .acts{margin-top:30px}

/* footer */
.ft{background:#141C31;color:rgba(255,255,255,.78);padding:72px 0 36px;font-size:.84rem}
.ft .top{display:grid;grid-template-columns:5fr 3fr 4fr;gap:40px}
.ft .mark{color:#fff}
.ft address{font-style:normal;margin-top:18px;line-height:2}
.ft nav{display:flex;flex-direction:column;gap:8px}
.ft nav a{text-decoration:none}
.ft nav a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.ft .bottom{margin-top:60px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.72rem;color:rgba(255,255,255,.5)}

/* sub pages */
.ph{padding:clamp(56px,8vw,110px) 0 clamp(40px,5vw,64px);border-bottom:1px solid var(--line)}
.ph .crumb{font-size:.74rem;color:var(--sub);margin-bottom:18px}
.ph .crumb a{text-decoration:none}
.ph h1{font-family:var(--mincho);font-weight:500;font-size:clamp(1.8rem,3.2vw,2.6rem);color:var(--ink);letter-spacing:.12em;line-height:1.5}
.ph p{color:var(--sub);font-size:.84rem;margin-top:12px}
.doc{max-width:860px;padding:clamp(48px,6vw,80px) 0 clamp(96px,10vw,140px)}
.doc .lc-head{display:none}
.doc .lc-in{max-width:none;padding:0}
.doc .lc-sec{padding:0}
.doc h2.l,.doc .lc-doc h2{font-family:var(--mincho);font-weight:500;font-size:1.25rem;color:var(--ink);letter-spacing:.1em;margin:56px 0 18px;padding-top:22px;border-top:1px solid var(--line);position:relative}
.doc h2.l:before,.doc .lc-doc h2:before{content:"";position:absolute;left:0;top:-1px;width:40px;height:1px;background:var(--brass)}
.doc > h2.l:first-child,.doc .lc-sec:first-child h2.l:first-child,.doc .lc-doc > h2:first-of-type{margin-top:0}
table.lc-t{width:100%;border-collapse:collapse;margin:8px 0 28px;font-size:.9rem;border-top:1px solid var(--ink)}
.lc-t th,.lc-t td{padding:20px 16px 20px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.lc-t th{width:30%;font-weight:500;color:var(--ink)}
.lc-t td.r{text-align:right;white-space:nowrap;font-family:var(--mincho);color:var(--ink);padding-right:0}
.lc-t ul,.lc-doc ul,.lc-doc ol,.lc-notes ul,.lc-box ul{padding-left:1.3em}
.lc-t li,.lc-doc li,.lc-notes li,.lc-box li{margin-bottom:6px}
.lc-doc p,.lc-doc li{font-size:.92rem}
.lc-doc p + p{margin-top:1em}
.lc-notes,.lc-box{background:var(--mist);padding:22px 26px;margin:16px 0;font-size:.88rem}
.lc-box.warn{background:#F7F3EA}
.lc-small{font-size:.8rem;color:var(--sub)}
.doc a:not(.btn):not(.lc-cta){color:var(--ink);text-underline-offset:4px;text-decoration-color:var(--brass)}
.lc-mailbox{border-top:1px solid var(--ink);border-bottom:1px solid var(--line);padding:30px 0;margin-bottom:10px}
.lc-mailbox p{margin-bottom:12px}
.lc-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px;counter-reset:s;border-top:1px solid var(--line);padding-top:24px}
.lc-step:before{counter-increment:s;content:counter(s);font-family:var(--mincho);color:var(--brass);display:block}
.lc-step b{font-family:var(--mincho);font-weight:500;color:var(--ink);display:block;margin-bottom:4px}
.lc-step p{font-size:.84rem;color:var(--sub)}
.lc-cta{display:inline-flex;align-items:center;gap:16px;padding:15px 26px;background:var(--ink);color:#fff!important;text-decoration:none;font-size:.86rem;letter-spacing:.1em;border-radius:2px}
.todo{background:#FFF1A6;color:#6B5200;font-weight:700;padding:0 4px}

/* responsive */
@media(max-width:1000px){
 .gnav{position:fixed;inset:0;background:var(--ink);flex-direction:column;align-items:flex-start;justify-content:center;padding:0 var(--gut);gap:22px;visibility:hidden;opacity:0;transition:opacity .35s,visibility .35s}
 .gnav a{color:#fff;font-family:var(--mincho);font-size:1.4rem}
 .gnav a:not(.btn){background-image:none}
 .gnav .btn{border-color:rgba(255,255,255,.6);color:#fff;font-family:var(--gothic);font-size:.9rem;margin-top:14px}
 .nav-open .gnav{visibility:visible;opacity:1}
 .menu{display:inline-flex;position:relative;z-index:2}
 .nav-open .menu{color:#fff}.nav-open .menu i{border-color:#fff}
 .hero .wrap{grid-template-columns:1fr}
 .hero-copy{min-height:0;padding-top:24px}
 .hero-pic{min-height:0;aspect-ratio:4/3;margin-left:calc(var(--gut) * -1)}
 .hero-pic .p1{inset:0 0 56px 0}
 .hero-pic .p2{left:var(--gut);width:34%}
 .hero-pic .cap{display:none}
 .about .wrap,.contact .wrap{grid-template-columns:1fr}
 .about figure{aspect-ratio:4/3;order:-1}
 .svc-grid{grid-template-columns:1fr}
 .svc-pic{display:none}
 .svc-row{grid-template-columns:1fr}
 .svc-row .m{display:block;grid-column:1/-1;aspect-ratio:16/9;overflow:hidden;margin-bottom:10px}
 .svc-row .m img{width:100%;height:100%;object-fit:cover}
 .svc-row .pr{text-align:left}
 .sh{flex-wrap:wrap;row-gap:4px}
 .sh span{flex-basis:100%;padding-left:46px}
 .flow ol{grid-template-columns:1fr 1fr;row-gap:40px}
 .ft .top{grid-template-columns:1fr 1fr}
 .ft .top > div:first-child{grid-column:1/-1}
}
@media(max-width:600px){
 body{font-size:14.5px}
 .hd .wrap{height:68px}
 .mark small{display:none}
 .flow ol{grid-template-columns:1fr}
 .lc-t th,.lc-t td{display:block;width:100%;padding:12px 0}
 .lc-t th{padding-bottom:0;border-bottom:0;font-size:.82rem;color:var(--sub)}
 .lc-t td.r{text-align:left;white-space:normal}
 .ft .top{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
 *,*:before,*:after{transition:none!important;animation:none!important}
 .js .hero .p1{clip-path:none}.js .hero .p2,.js .hero .later,.js .hero .vh .c{opacity:1;transform:none}
 .js .hero .p1 img{transform:none}
}/* contact form (2026-11-09) */
.cf{margin:8px 0 48px;border-top:1px solid var(--line,#ddd)}
.cf-row{display:grid;grid-template-columns:13em 1fr;gap:8px 24px;padding:16px 0;border-bottom:1px solid var(--line,#ddd);align-items:start}
.cf-row label{font-weight:700;font-size:.92rem;padding-top:10px}
.cf-row label em,.cf-row label span{display:inline-block;margin-left:8px;font-style:normal;font-size:.7rem;font-weight:500;padding:1px 6px;border:1px solid currentColor;vertical-align:2px}
.cf-row label em{color:#8a2b2b}.cf-row label span{color:#777}
.cf input[type=text],.cf input[type=email],.cf input[type=tel],.cf select,.cf textarea{width:100%;max-width:100%;box-sizing:border-box;font:inherit;font-size:16px;padding:10px 12px;border:1px solid #bbb;background:#fff;color:inherit;border-radius:0}
.cf textarea{resize:vertical}
.cf-agree{padding:18px 0 6px}.cf-agree input{width:18px;height:18px;vertical-align:-3px}
.cf .btn{margin:14px 0 10px;cursor:pointer;border:0;font:inherit}
.cf-err{color:#8a2b2b;font-weight:700;margin:8px 0 0}
@media (max-width:760px){.cf-row{grid-template-columns:1fr}.cf-row label{padding-top:0}}
#form{scroll-margin-top:110px}