:root{--bg:#0d3b66;--bg2:#0a2f52;--line:#9fd0ff;--soft:rgba(159,208,255,.22);--w:#f2f8ff;--acc:#ffd23f;--jp:'Zen Kaku Gothic New',sans-serif;--mono:'JetBrains Mono',monospace}
@view-transition{navigation:auto}
::view-transition-old(root){animation:.3s ease both vo}
::view-transition-new(root){animation:.5s .05s ease both vn}
@keyframes vo{to{opacity:0}}
@keyframes vn{from{opacity:0;clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--jp);background:var(--bg);color:var(--w);line-height:1.85;overflow-x:hidden;font-weight:500;
 background-image:linear-gradient(var(--soft) 1px,transparent 1px),linear-gradient(90deg,var(--soft) 1px,transparent 1px),linear-gradient(rgba(159,208,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(159,208,255,.07) 1px,transparent 1px);
 background-size:120px 120px,120px 120px,24px 24px,24px 24px;background-attachment:fixed}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.mono{font-family:var(--mono)}
.tbc{background:var(--acc);color:var(--bg2);font-size:.78em;padding:0 .6em;font-weight:700;white-space:nowrap}
.tag{display:block;font:700 11px var(--mono);letter-spacing:.2em;color:var(--acc);margin-bottom:1rem}
.rv{opacity:0;transform:translateY(30px);transition:opacity .8s,transform .8s}
.rv.on{opacity:1;transform:none}
/* 十字カーソル */
#vx,#vy{position:fixed;background:var(--acc);opacity:.5;pointer-events:none;z-index:90}
#vx{width:1px;top:0;bottom:0;left:-10px}#vy{height:1px;left:0;right:0;top:-10px}
#xy{position:fixed;left:-99px;top:-99px;z-index:91;pointer-events:none;font:11px var(--mono);color:var(--acc);background:var(--bg2);padding:1px 6px;border:1px solid var(--acc)}
/* ヘッダ */
.hd{position:sticky;top:0;z-index:60;display:flex;justify-content:space-between;align-items:center;padding:12px 4vw;background:rgba(10,47,82,.9);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.logo{font-weight:900;letter-spacing:.2em;display:flex;gap:.8em;align-items:center}
.logo .lm{height:32px;width:auto}
.logo small{font:400 10px var(--mono);letter-spacing:.3em;color:var(--line)}
.gn{display:flex;gap:1.6rem;font:400 .78rem var(--mono)}
.gn a{padding:.2em 0;border-bottom:1px solid transparent;transition:.2s}
.gn a:hover,body[data-page=business] [data-p=business],body[data-page=works] [data-p=works],body[data-page=company] [data-p=company],body[data-page=news] [data-p=news],body[data-page=contact] [data-p=contact]{color:var(--acc);border-color:var(--acc)}
.bg{display:none;width:44px;height:44px;background:none;border:1px solid var(--line);position:relative;cursor:pointer}
.bg i{position:absolute;left:10px;right:10px;height:2px;background:var(--w);transition:.3s}
.bg i:nth-child(1){top:15px}.bg i:nth-child(2){top:25px}
body.mo .bg i:nth-child(1){top:20px;transform:rotate(25deg)}body.mo .bg i:nth-child(2){top:20px;transform:rotate(-25deg)}
/* 表題欄(右下固定) */
.tb{position:fixed;right:14px;bottom:14px;z-index:70;display:grid;grid-template-columns:repeat(4,auto);border:2px solid var(--line);background:rgba(10,47,82,.92)}
.tb div{padding:4px 10px;border-right:1px solid var(--line)}.tb div:last-child{border:0}
.tb small{display:block;font:9px var(--mono);color:var(--acc);letter-spacing:.15em}
.tb b{font:700 .78rem var(--mono)}
/* シート */
.sheet{padding:10vh 4vw;border-bottom:1px dashed var(--line);position:relative}
h1.big{font-weight:900;font-size:clamp(3rem,13vw,11rem);line-height:1;letter-spacing:.04em}
h1.big em{font-style:normal;color:transparent;-webkit-text-stroke:2px var(--w)}
.h2{font-weight:900;font-size:clamp(1.8rem,4.6vw,3.4rem);line-height:1.3;margin-bottom:.4em}
.lead{max-width:34em;margin-top:1.4em}
.hero{min-height:88vh;display:flex;flex-direction:column;justify-content:center}
.draw{position:absolute;right:3vw;bottom:8vh;width:min(46vw,560px)}
.draw *{fill:none;stroke:var(--line);stroke-width:2;stroke-dasharray:1200;stroke-dashoffset:1200;animation:dr 4s ease forwards}
.draw .y{stroke:var(--acc)}.draw *:nth-child(2){animation-delay:.6s}.draw *:nth-child(3){animation-delay:1.2s}.draw *:nth-child(4){animation-delay:1.8s}.draw *:nth-child(5){animation-delay:2.4s}
@keyframes dr{to{stroke-dashoffset:0}}
.dim{position:absolute;left:4vw;right:4vw;bottom:3vh;border-top:1px solid var(--line);font:11px var(--mono);display:flex;justify-content:space-between;padding-top:4px}
/* ベント */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:2rem}
.card{border:1px solid var(--line);background:rgba(10,47,82,.72);padding:22px;position:relative;transition:.3s;min-height:250px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.card.s3{grid-column:span 3}.card.s2{grid-column:span 2}
.card:hover{background:var(--acc);color:var(--bg2);transform:translate(-4px,-4px);box-shadow:6px 6px 0 var(--line)}
.card:hover svg{stroke:var(--bg2)}
.card svg.ic{position:absolute;top:14px;right:14px;width:110px;height:110px}
svg.ic{fill:none;stroke:var(--line);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:.3s}
.card h3{font-size:1.8rem;font-weight:900}
.card p{font-size:.85rem;margin-top:.3em}
.card .n{position:absolute;top:14px;left:18px;font:700 12px var(--mono)}
/* 表題欄テーブル */
.title-block{display:grid;grid-template-columns:repeat(6,1fr);border:2px solid var(--line);background:rgba(10,47,82,.78)}
.title-block div{padding:12px 14px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.title-block small{display:block;font:10px var(--mono);color:var(--acc);letter-spacing:.15em}
.s6{grid-column:span 6}.s3{grid-column:span 3}.s2{grid-column:span 2}
/* 図面一覧(実績) */
.list{border:2px solid var(--line);background:rgba(10,47,82,.78)}
.lr{display:grid;grid-template-columns:6rem 1fr 9rem 14rem;gap:1rem;padding:14px 18px;border-bottom:1px solid var(--line);align-items:center;transition:.2s}
.lr:last-child{border-bottom:0}
.lr.head{font:11px var(--mono);color:var(--acc);letter-spacing:.15em}
a.lr:hover{background:var(--acc);color:var(--bg2)}
.lr .no{font:700 .85rem var(--mono)}
.lr.hide{display:none}
.filter{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.6rem}
.filter button{font:700 .8rem var(--mono);background:none;color:var(--w);border:1px solid var(--line);padding:.3em 1.2em;cursor:pointer;transition:.2s}
.filter button.on,.filter button:hover{background:var(--acc);color:var(--bg2);border-color:var(--acc)}
/* 事業シート */
.work{display:grid;grid-template-columns:minmax(160px,.6fr) 2fr;gap:4vw;align-items:center;scroll-margin-top:80px}
.work svg.ic{width:100%;max-width:240px;aspect-ratio:1}
.work h2{font-size:clamp(2rem,5vw,3.6rem);font-weight:900;line-height:1.2;margin-bottom:.4em}
.pts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.pts li{border:1px solid var(--line);padding:0 1em;font:.82rem var(--mono)}
/* お知らせ */
.nl a{display:grid;grid-template-columns:9rem 1fr 6rem;gap:1rem;padding:1.3rem .6rem;border-bottom:1px solid var(--line);align-items:center;transition:.2s}
.nl a:first-child{border-top:1px solid var(--line)}
.nl a:hover{background:var(--acc);color:var(--bg2);padding-left:1.4rem}
.nl time{font:.85rem var(--mono)}.nl span{font:700 .7rem var(--mono);text-align:right;letter-spacing:.15em}
.cta{text-align:center}
a.tel{display:inline-block;font:700 clamp(1.8rem,7vw,4.4rem) var(--mono);border:2px solid var(--acc);padding:.2em .6em;margin:.6em 0;color:var(--acc);transition:.2s}
a.tel:hover{background:var(--acc);color:var(--bg2)}
.btn{display:inline-block;border:2px solid var(--w);background:none;color:var(--w);padding:.7rem 2.2rem;font:700 .95rem var(--jp);cursor:pointer;transition:.2s}
.btn:hover{background:var(--w);color:var(--bg2)}
.form{display:grid;gap:1.2rem;max-width:720px;margin-top:1.6rem}
.form label{display:grid;gap:.3rem;font:700 .8rem var(--mono);color:var(--acc);letter-spacing:.1em}
.form input,.form textarea,.form select{font:500 1rem var(--jp);color:var(--w);padding:.8rem 1rem;border:1px solid var(--line);background:rgba(10,47,82,.7);border-radius:0;width:100%}
.form option{color:#000}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--acc)}
.ft{display:flex;flex-direction:column;gap:.2rem;padding:24px 4vw 80px;font:11px var(--mono);color:var(--line)}
.ft a:hover{color:var(--acc)}
@media(max-width:860px){
  .gn{display:none}.bg{display:block}
  body.mo .gn{display:flex;position:fixed;inset:57px 0 0 0;background:var(--bg2);flex-direction:column;padding:6vh 8vw;gap:1.4rem;font-size:1.1rem}
  .bento{grid-template-columns:1fr 1fr}.card.s3,.card.s2{grid-column:span 2}
  .title-block{grid-template-columns:1fr 1fr}.title-block .s2,.title-block .s3,.title-block .s6{grid-column:span 2}
  .draw{position:static;width:100%;margin-top:2rem}
  .work{grid-template-columns:1fr}.work svg.ic{max-width:120px}
  .lr{grid-template-columns:4.4rem 1fr}.lr .k,.lr .o{grid-column:2}.lr.head{display:none}
  .nl a{grid-template-columns:1fr}.nl span{text-align:left}
  #vx,#vy,#xy{display:none}.tb div:nth-child(3),.tb div:nth-child(4){display:none}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}.draw *{stroke-dashoffset:0}}
/* ロゴ・社屋写真 */
.flogo{width:170px;height:auto;display:block;margin-bottom:1rem}
.fig{margin:0 0 1.6rem;border:2px solid var(--line);padding:10px;background:rgba(10,47,82,.7)}
.fig img{display:block;width:100%;height:auto;aspect-ratio:21/9;object-fit:cover}
.fig figcaption{font:11px var(--mono);color:var(--acc);padding-top:6px;letter-spacing:.15em}