:root{--paper:#f1ede4;--paper2:#e8e2d5;--ink:#16201c;--mute:#667068;--line:rgba(22,32,28,.18);--acc:#d9482b;--moss:#3f4d3a;--serif:'Zen Old Mincho',serif;--sans:'Zen Kaku Gothic New',sans-serif;--en:'Jost',sans-serif}
@view-transition{navigation:auto}
::view-transition-old(root){animation:.4s ease both vo}
::view-transition-new(root){animation:.5s .1s ease both vn}
@keyframes vo{to{opacity:0;transform:translateY(-12px)}}
@keyframes vn{from{opacity:0;transform:translateY(16px)}}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.95;font-size:16px;overflow-x:hidden}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img,canvas{display:block}
.en{font-family:var(--en);letter-spacing:.22em;font-size:.72rem;text-transform:uppercase}
.k{color:var(--acc);margin-bottom:1.4em}
.tbc{background:var(--acc);color:#fff;font-size:.78em;padding:0 .6em;border-radius:2px;white-space:nowrap}
.rv{opacity:0;transform:translateY(34px);transition:opacity 1s,transform 1s cubic-bezier(.2,.8,.2,1)}
.rv.on{opacity:1;transform:none}
/* ヘッダ・メニュー */
.hd{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:18px 4vw;transition:background .4s}
.hd.sc{background:rgba(241,237,228,.86);backdrop-filter:blur(8px)}
.logo{font-family:var(--serif);font-weight:900;font-size:1.5rem;letter-spacing:.2em;display:flex;align-items:center;gap:.6em;position:relative;z-index:60}
.logo .lm{height:36px;width:auto}
.logo small{font:500 .62rem var(--en);letter-spacing:.3em;color:var(--mute)}
.mbtn{position:relative;z-index:60;background:none;border:1px solid var(--ink);border-radius:99px;padding:.5em 1.4em;font:500 .75rem var(--en);letter-spacing:.2em;cursor:pointer;color:var(--ink);transition:.3s}
.mbtn:hover{background:var(--ink);color:var(--paper)}
.menu{position:fixed;inset:0;z-index:55;background:var(--moss);color:var(--paper);display:flex;flex-direction:column;justify-content:center;padding:0 8vw;clip-path:circle(0 at calc(100% - 6vw) 36px);transition:clip-path .8s cubic-bezier(.7,0,.2,1);visibility:hidden}
body.mo .menu{clip-path:circle(150% at calc(100% - 6vw) 36px);visibility:visible}
body.mo .logo,body.mo .mbtn{color:var(--paper);border-color:var(--paper)}
.menu ul{display:flex;flex-direction:column}
.menu li a{font-family:var(--serif);font-weight:700;font-size:clamp(2.2rem,7.5vw,5.6rem);line-height:1.25;display:flex;align-items:baseline;gap:.5em;transition:.3s}
.menu li a b{font:500 .8rem var(--en);letter-spacing:.2em;color:#e9a08f}
.menu ul:hover a{opacity:.28}.menu ul a:hover{opacity:1;transform:translateX(18px)}
.menu .mt{margin-top:3rem;font-size:.9rem;opacity:.8}
.fab{display:none}
/* ヒーロー */
canvas.topo{position:absolute;inset:0;width:100%;height:100%}
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden}
.hero-in{position:absolute;left:4vw;right:4vw;bottom:11vh;pointer-events:none}
.hero h1{font-family:var(--serif);font-weight:900;font-size:clamp(3.4rem,12vw,11rem);line-height:1.08;letter-spacing:.02em;margin:.25em 0 .35em}
.hero .l{display:block;overflow:hidden;padding-bottom:.08em}
.hero .l>span{display:block;transform:translateY(110%);animation:in 1.2s cubic-bezier(.2,.8,.2,1) .2s forwards}
.hero .l:nth-child(2)>span{animation-delay:.4s}
@keyframes in{to{transform:none}}
.hero .sub{max-width:30em;font-weight:500;opacity:0;animation:fade 1s 1s forwards}
@keyframes fade{to{opacity:1}}
.hint{position:absolute;right:4vw;bottom:5vh;writing-mode:vertical-rl;font:500 .7rem var(--en);letter-spacing:.3em}
.hint::after{content:"";display:block;width:1px;height:60px;background:var(--ink);margin:10px auto 0;animation:drop 2s infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* 紹介 */
.wrap{padding:16vh 4vw}
.intro{max-width:1100px;margin:0 auto}
.split{font-family:var(--serif);font-weight:700;font-size:clamp(1.5rem,3.4vw,2.8rem);line-height:1.8}
.split span{opacity:.16;transition:opacity .25s}
.split span.on{opacity:1}
.more{display:inline-block;margin-top:3em;border-bottom:1px solid var(--ink);padding-bottom:.2em;font-weight:500;transition:.3s}
.more:hover{color:var(--acc);border-color:var(--acc);letter-spacing:.1em}
/* 事業の行 */
.rows{border-top:1px solid var(--ink);margin-top:3rem}
.row{position:relative;display:grid;grid-template-columns:5rem 1.1fr 1.4fr 3rem;gap:2vw;align-items:center;padding:2.6rem 1rem;border-bottom:1px solid var(--ink);transition:background .4s,color .4s,padding .4s}
.row .no{font:500 .8rem var(--en);letter-spacing:.2em}
.row .nm{font-family:var(--serif);font-weight:900;font-size:clamp(2rem,5vw,4.2rem);line-height:1.2}
.row .ds{font-size:.95rem;max-width:26em}
.row .ar{font-size:1.6rem;transition:transform .4s}
.row:hover{background:var(--ink);color:var(--paper);padding-left:2rem}
.row:hover .ar{transform:rotate(-45deg);color:#ff9d83}
.row .thumb{position:fixed;left:0;top:0;width:260px;height:180px;pointer-events:none;opacity:0;transform:translate(var(--mx,0),var(--my,0)) scale(.8);transition:opacity .3s,transform .15s linear;z-index:20;border:1px solid var(--paper);background:var(--paper)}
.row:hover .thumb{opacity:1;transform:translate(var(--mx,0),var(--my,0)) scale(1)}
.row .thumb canvas{width:100%;height:100%}
/* 実績ストリップ */
.strip-h{display:flex;justify-content:space-between;align-items:flex-end;padding:0 4vw;margin-bottom:2rem}
.h2{font-family:var(--serif);font-weight:900;font-size:clamp(2rem,5vw,4rem);line-height:1.3}
.strip{display:flex;gap:1.4rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 4vw 2rem;scrollbar-width:thin}
.strip .tile{flex:0 0 min(78vw,380px);scroll-snap-align:start}
.tile{display:block}
.tile .im{aspect-ratio:4/3;position:relative;background:var(--paper2);border:1px solid var(--line);overflow:hidden}
.tile .im canvas{width:100%;height:100%;transition:transform .8s}
.tile:hover .im canvas{transform:scale(1.1)}
.tile .im em{position:absolute;left:10px;top:10px;font:normal 500 .65rem var(--en);letter-spacing:.2em;background:var(--paper);padding:.1em .8em;border-radius:99px}
.tile h3{font-family:var(--serif);font-size:1.15rem;margin-top:.9rem}
.tile p{font-size:.82rem;color:var(--mute)}
/* お知らせ */
.nlist{border-top:1px solid var(--ink)}
.nl{display:grid;grid-template-columns:9rem 1fr auto;gap:1rem;align-items:center;padding:1.5rem .5rem;border-bottom:1px solid var(--line);transition:.3s}
.nl:hover{background:var(--paper2);padding-left:1.4rem}
.nl time{font:500 .85rem var(--en);letter-spacing:.1em;color:var(--mute)}
.nl h3{font-size:1rem;font-weight:500}
.nl span{font:500 .65rem var(--en);letter-spacing:.2em;border:1px solid var(--ink);border-radius:99px;padding:.1em 1em}
/* CTA */
.cta{background:var(--moss);color:var(--paper);position:relative;overflow:hidden;text-align:center;padding:18vh 4vw}
.cta canvas.topo{opacity:.35;filter:invert(1)}
.cta>*{position:relative}
.cta .h2{margin-bottom:.4em}
.cta .tel{display:inline-block;font:500 clamp(2.2rem,8vw,6rem) var(--en);letter-spacing:.06em;border-bottom:2px solid var(--paper);margin:.2em 0 .5em;transition:.3s}
.cta .tel:hover{color:#ffb4a0;border-color:#ffb4a0}
/* フッタ */
.ft{display:grid;grid-template-columns:1.4fr 1fr;gap:3rem;padding:6rem 4vw 2rem;font-size:.85rem;background:var(--paper)}
.ft .fl{font-family:var(--serif);font-weight:900;font-size:1.6rem;letter-spacing:.2em;margin-bottom:.6em}
.ft ul{display:grid;grid-template-columns:1fr 1fr;gap:.4rem 2rem;align-content:start}
.ft a:hover{color:var(--acc)}
.ft small{grid-column:1/-1;color:var(--mute);border-top:1px solid var(--line);padding-top:1.4rem}
/* 下層ページ */
.phead{position:relative;height:56vh;min-height:360px;overflow:hidden;border-bottom:1px solid var(--ink)}
.phead .in{position:absolute;left:4vw;right:4vw;bottom:5vh}
.phead h1{font-family:var(--serif);font-weight:900;font-size:clamp(2.6rem,9vw,7rem);line-height:1.15}
.two{display:grid;grid-template-columns:minmax(180px,.7fr) 2fr;gap:4vw;padding:12vh 4vw;border-bottom:1px solid var(--line)}
.two .lab{position:sticky;top:100px;align-self:start}
.two .lab .n{font:500 4rem var(--en);line-height:1;color:var(--acc)}
.two h2{font-family:var(--serif);font-weight:900;font-size:clamp(1.8rem,4vw,3rem);line-height:1.3;margin-bottom:.6em}
.two p+p{margin-top:1em}
.two ul.pts{margin-top:1.6em;display:flex;flex-wrap:wrap;gap:.6rem}
.two ul.pts li{border:1px solid var(--ink);border-radius:99px;padding:.1em 1.1em;font-size:.88rem}
.dl{display:grid;grid-template-columns:11em 1fr;border-top:1px solid var(--ink)}
.dl dt,.dl dd{padding:1.2rem .4rem;border-bottom:1px solid var(--line)}
.dl dt{font-weight:700}
.flow{counter-reset:s;margin-top:1.6em;border-left:1px solid var(--ink);padding-left:2rem}
.flow li{position:relative;padding-bottom:1.4rem;counter-increment:s}
.flow li::before{content:counter(s);position:absolute;left:calc(-2rem - 14px);top:2px;width:27px;height:27px;border-radius:50%;background:var(--ink);color:var(--paper);font:500 .8rem/27px var(--en);text-align:center}
.filter{display:flex;flex-wrap:wrap;gap:.6rem;padding:3rem 4vw 0}
.filter button{font:500 .9rem var(--sans);background:none;border:1px solid var(--ink);border-radius:99px;padding:.3em 1.4em;cursor:pointer;transition:.25s;color:var(--ink)}
.filter button.on,.filter button:hover{background:var(--ink);color:var(--paper)}
.gw{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem 1.6rem;padding:2.5rem 4vw 12vh}
.gw .tile.hide{display:none}
.note{padding:0 4vw;color:var(--mute);font-size:.85rem}
.map{aspect-ratio:16/8;border:1px solid var(--ink);position:relative;margin-top:2rem;overflow:hidden}
.map .in{position:absolute;inset:0;display:grid;place-items:center;text-align:center;background:rgba(241,237,228,.78)}
.form{display:grid;gap:1.4rem;max-width:720px}
.form label{display:grid;gap:.4rem;font-weight:700;font-size:.9rem}
.form input,.form textarea,.form select{font:inherit;padding:.9rem 1rem;border:1px solid var(--ink);background:transparent;border-radius:0;width:100%}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--acc);outline-offset:2px}
.btn{display:inline-block;background:var(--ink);color:var(--paper);border:0;padding:1rem 3rem;font:700 1rem var(--sans);cursor:pointer;transition:.3s;justify-self:start;border-radius:99px}
.btn:hover{background:var(--acc);letter-spacing:.15em}
@media(max-width:820px){
  .row{grid-template-columns:2.4rem 1fr 2rem;padding:1.8rem .4rem}.row .ds{grid-column:2/3;font-size:.85rem}.row .thumb{display:none}
  .nl{grid-template-columns:1fr auto}.nl time{grid-column:1/-1}
  .two{grid-template-columns:1fr}.two .lab{position:static}
  .gw{grid-template-columns:1fr 1fr}.ft{grid-template-columns:1fr}
  .dl{grid-template-columns:7em 1fr}
  .hint{display:none}
  .fab{display:grid;position:fixed;right:14px;bottom:14px;z-index:40;width:58px;height:58px;border-radius:50%;background:var(--acc);color:#fff;place-items:center;font:500 .8rem var(--en);letter-spacing:.1em;box-shadow:0 6px 18px rgba(0,0,0,.25)}
}
@media(max-width:520px){.gw{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}.hero .l>span{transform:none}.hero .sub{opacity:1}}
/* 社屋写真・ロゴ */
.photo{padding:0 4vw 14vh}
.photo img{width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;display:block}
.photo .cap{margin-top:.8rem;color:var(--mute)}
.flogo{width:170px;height:auto;margin-bottom:1rem;display:block}