:root{--sky:#dfe9e4;--g1:#4f6b4a;--s1:#dfeaf0;--s2:#7a5c3e;--s3:#5a4230;--s4:#3b2c21;--s5:#241a14;--s6:#15100c;--ink:#1b1510;--paper:#f4efe6;--acc:#e8a33d;--serif:'Shippori Mincho',serif;--sans:'Noto Sans JP',sans-serif}
@view-transition{navigation:auto}
::view-transition-old(root){animation:.35s ease both vo}
::view-transition-new(root){animation:.5s .05s ease both vn}
@keyframes vo{to{opacity:0}}
@keyframes vn{from{opacity:0;transform:translateY(24px)}}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--paper);background:var(--s5);line-height:1.9;overflow-x:hidden}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.tbc{background:var(--acc);color:var(--ink);font-size:.78em;padding:0 .6em;border-radius:3px;white-space:nowrap;font-weight:700}
.rv{opacity:0;transform:translateY(40px);transition:opacity 1s,transform 1s}
.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:16px 5vw;mix-blend-mode:difference;color:#fff}
.logo{font-family:var(--serif);font-weight:800;font-size:1.3rem;letter-spacing:.2em}
.gn{display:flex;gap:1.8rem;font-size:.85rem;letter-spacing:.08em}
.gn a{position:relative;padding:.2em 0}
.gn a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#fff;transform:scaleX(0);transform-origin:right;transition:transform .35s}
.gn a:hover::after,body[data-page=business] [data-p=business]::after,body[data-page=works] [data-p=works]::after,body[data-page=company] [data-p=company]::after,body[data-page=news] [data-p=news]::after,body[data-page=contact] [data-p=contact]::after{transform:scaleX(1);transform-origin:left}
.bg{display:none;width:44px;height:44px;background:none;border:0;position:relative;cursor:pointer}
.bg i{position:absolute;left:8px;right:8px;height:2px;background:#fff;transition:.3s}
.bg i:nth-child(1){top:16px}.bg i:nth-child(2){top:26px}
body.mo .bg i:nth-child(1){top:21px;transform:rotate(25deg)}body.mo .bg i:nth-child(2){top:21px;transform:rotate(-25deg)}
#depth{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:11px;letter-spacing:.1em;mix-blend-mode:difference;color:#fff;writing-mode:horizontal-tb}
#depth .bar{width:2px;height:36vh;background:rgba(255,255,255,.3);position:relative}
#depth .bar i{position:absolute;left:-4px;width:10px;height:10px;border-radius:50%;background:var(--acc);top:0}
/* ヒーロー */
.hero{height:130vh;position:relative;background:linear-gradient(var(--sky) 0,#f2dfc0 55%,var(--g1) 55.1%)}
.stick{position:sticky;top:0;height:100vh;overflow:hidden}
.hero svg{position:absolute;left:-5%;width:110%;bottom:0}
.hero .sub{position:absolute;top:14vh;left:6vw;color:var(--ink);font-size:.85rem;letter-spacing:.3em}
.hero h1{position:absolute;top:22vh;left:6vw;right:6vw;color:var(--ink);font-family:var(--serif);font-size:clamp(2.4rem,8vw,6.5rem);line-height:1.2;font-weight:800;letter-spacing:.04em}
.hero h1 span{display:block;opacity:0;transform:translateY(30px);animation:up 1s forwards}
.hero h1 span:nth-child(2){animation-delay:.25s}.hero h1 span:nth-child(3){animation-delay:.5s}
@keyframes up{to{opacity:1;transform:none}}
.scroll{position:absolute;bottom:5vh;left:50%;transform:translateX(-50%);font-size:.72rem;letter-spacing:.3em;text-align:center}
.scroll::after{content:"";display:block;width:1px;height:46px;background:var(--paper);margin:8px auto 0;animation:drop 1.8s 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}}
/* 地層 */
.layer{position:relative;padding:15vh 8vw;min-height:75vh;display:grid;grid-template-columns:1fr 1.3fr;gap:6vw;align-items:center}
.layer .no{font-family:var(--serif);font-size:clamp(6rem,20vw,16rem);line-height:.8;opacity:.2;font-weight:800}
.layer h2{font-family:var(--serif);font-size:clamp(2rem,5vw,3.6rem);line-height:1.3;margin-bottom:.6em}
.layer h2 small{display:block;font-family:var(--sans);font-size:.78rem;letter-spacing:.3em;color:var(--acc);margin-bottom:.8em}
.layer ul.pts{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.4em}
.layer ul.pts li{border:1px solid rgba(244,239,230,.5);padding:2px 14px;border-radius:99px;font-size:.85rem}
.layer::before{content:"";position:absolute;inset:0 0 auto 0;height:26px;background:inherit;clip-path:polygon(0 100%,8% 20%,19% 70%,33% 10%,47% 60%,61% 0,78% 55%,90% 15%,100% 70%,100% 100%);transform:translateY(-99%)}
.ls{background:#2b3f4e;color:var(--paper)}.ls h2 small{color:#9fd0ff}
.l2{background:var(--s2)}.l3{background:var(--s3)}.l4{background:var(--s4)}.l5{background:var(--s5)}.l6{background:var(--s6)}
.layer .more{display:inline-block;margin-top:1.4em;border-bottom:1px solid currentColor;font-size:.9rem}
/* 紙面セクション */
.paper{background:var(--paper);color:var(--ink);padding:14vh 8vw;position:relative}
.paper h2,.cta h2{font-family:var(--serif);font-size:clamp(1.8rem,4vw,3rem);margin-bottom:.8em}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:2rem}
.facts div{border-top:2px solid var(--s2);padding-top:.8rem}
.facts small{display:block;color:var(--s2);font-weight:700;letter-spacing:.1em}
.facts b{font-family:var(--serif);font-size:1.4rem}
.nl a{display:grid;grid-template-columns:9rem 1fr auto;gap:1rem;padding:1.3rem .4rem;border-bottom:1px solid #cfc6b5;align-items:center;transition:.3s}
.nl a:first-child{border-top:1px solid #cfc6b5}
.nl a:hover{background:#e9e1d1;padding-left:1.2rem}
.nl time{color:var(--s2);font-weight:700}
.nl span{font-size:.7rem;letter-spacing:.15em;border:1px solid var(--ink);padding:0 .9em;border-radius:99px}
.cta{background:var(--acc);color:var(--ink);text-align:center;padding:12vh 6vw}
.cta a.tel{display:inline-block;font-size:clamp(2rem,7vw,4.4rem);font-weight:700;border-bottom:4px solid var(--ink);margin:.2em 0 .5em}
.btn{display:inline-block;background:var(--ink);color:var(--paper);padding:.9rem 2.6rem;border:0;font:700 1rem var(--sans);cursor:pointer;border-radius:99px;transition:.3s}
.btn:hover{background:var(--s2)}
/* 下層ヘッダ */
.ph{padding:30vh 8vw 10vh;position:relative;background:var(--s2);overflow:hidden}
.ph::after{content:"";position:absolute;inset:auto 0 0 0;height:90px;background:var(--s3);clip-path:polygon(0 60%,12% 30%,28% 70%,45% 20%,63% 65%,80% 25%,100% 60%,100% 100%,0 100%)}
.ph small{font-size:.78rem;letter-spacing:.3em;color:var(--acc)}
.ph h1{font-family:var(--serif);font-weight:800;font-size:clamp(2.8rem,10vw,8rem);line-height:1.15}
.ph p.dp{margin-top:.6rem;opacity:.7;font-size:.85rem;letter-spacing:.2em}
.dl{display:grid;grid-template-columns:11em 1fr;max-width:820px}
.dl dt,.dl dd{padding:1.1rem 0;border-bottom:1px solid #cfc6b5}
.dl dt{font-weight:700;color:var(--s2)}
.box{background:var(--paper);color:var(--ink);padding:14vh 8vw}
.box .in{max-width:900px}
.filter{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.6rem 0 2.4rem}
.filter button{font:700 .9rem var(--sans);background:none;color:var(--ink);border:1px solid var(--ink);border-radius:99px;padding:.3em 1.4em;cursor:pointer;transition:.25s}
.filter button.on,.filter button:hover{background:var(--ink);color:var(--paper)}
.cores{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem}
.core{display:block;transition:transform .3s}
.core:hover{transform:translateY(-6px)}
.core.hide{display:none}
.core .col{aspect-ratio:3/4;border:2px solid var(--ink);border-radius:6px 6px 0 0;position:relative;overflow:hidden}
.core .col em{position:absolute;left:8px;top:8px;font:normal 700 .65rem var(--sans);letter-spacing:.15em;background:var(--paper);color:var(--ink);padding:0 .6em;border-radius:99px}
.core h3{font-family:var(--serif);font-size:1.05rem;margin-top:.7rem}
.core p{font-size:.8rem;color:#6a5a48}
.c1 .col{background:linear-gradient(#dfeaf0 0 12%,#7a5c3e 12% 38%,#5a4230 38% 64%,#3b2c21 64% 86%,#241a14 86%)}
.c2 .col{background:linear-gradient(#4f6b4a 0 18%,#a58863 18% 30%,#7a5c3e 30% 70%,#3b2c21 70%)}
.c3 .col{background:linear-gradient(#e8a33d 0 8%,#7a5c3e 8% 52%,#241a14 52% 60%,#5a4230 60%)}
.c4 .col{background:linear-gradient(#dfeaf0 0 20%,#5a4230 20% 45%,#4f6b4a 45% 55%,#3b2c21 55%)}
.form{display:grid;gap:1.3rem;max-width:720px;margin-top:2rem}
.form label{display:grid;gap:.3rem;font-weight:700;font-size:.9rem}
.form input,.form textarea,.form select{font:inherit;padding:.8rem 1rem;border:1px solid var(--ink);background:#fff;border-radius:0;width:100%}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--acc);outline-offset:2px}
.big-tel{display:inline-block;font-size:clamp(2.2rem,8vw,5rem);font-weight:700;border-bottom:4px solid var(--ink);line-height:1.3}
/* フッタ(岩盤) */
.ft{background:var(--s6);padding:12vh 8vw 3rem;font-size:.85rem;color:#b9ad9c}
.ft .fl{font-family:var(--serif);font-weight:800;font-size:2rem;letter-spacing:.2em;color:var(--paper);margin-bottom:1rem}
.ft .cols{display:grid;grid-template-columns:1.4fr 1fr;gap:2rem}
.ft ul{display:grid;grid-template-columns:1fr 1fr;gap:.2rem 1.5rem;align-content:start}
.ft a:hover{color:var(--acc)}
.ft small{display:block;margin-top:3rem;color:#7d725f}
@media(max-width:860px){
  .gn{display:none}.bg{display:block}
  body.mo .gn{display:flex;position:fixed;inset:0;background:var(--acc);color:var(--ink);flex-direction:column;justify-content:center;gap:1rem;padding:0 10vw;font-family:var(--serif);font-size:2rem;font-weight:800;mix-blend-mode:normal}
  body.mo .hd{mix-blend-mode:normal;color:var(--ink)}body.mo .bg i{background:var(--ink)}
  #depth{display:none}
  .layer{grid-template-columns:1fr;gap:1rem}.layer .no{font-size:6rem}
  .facts{grid-template-columns:1fr}.nl a{grid-template-columns:1fr}
  .cores{grid-template-columns:1fr 1fr}.dl{grid-template-columns:7em 1fr}.ft .cols{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv,.hero h1 span{opacity:1;transform:none}}
/* ロゴ・社屋写真 */
.lgm{position:fixed;left:3.2vw;top:8px;z-index:51;height:46px}
.lgm img{height:100%;width:auto;display:block}
.hd .logo{margin-left:54px}
.flogo{width:180px;height:auto;display:block;margin-bottom:1.4rem}
.shot{width:100%;aspect-ratio:21/9;object-fit:cover;display:block;border-radius:4px;margin-bottom:2rem}