@charset "utf-8";
/* =========================================================
   株式会社ゾーサック コーポレートサイト
   ダーク基調／黒と青／名刺のロゴ（対角＋青い円）に合わせています。
   直したら、各HTMLの style.css?v=N の数字を1つ増やしてください。
   ========================================================= */

:root{
  --bg:#05070b;
  --bg-2:#080b12;
  --panel:#0c111a;
  --panel-2:#101725;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.18);
  --ink:#e8eef8;
  --ink-2:#aab6c8;
  --ink-3:#6c7a8d;
  --blue:#1b7fd4;          /* 名刺の青 */
  --blue-hi:#3fa2ff;
  --blue-lo:#0d4f8a;
  --glow:rgba(27,127,212,.40);
  --maxw:1180px;
  --pad:clamp(20px,5vw,48px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Zen Kaku Gothic New",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  font-size:16px;line-height:2;letter-spacing:.05em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;height:auto;display:block;}
a{color:inherit;}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.35;letter-spacing:.02em;}
p{margin:0 0 1.4em;}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);position:relative;z-index:2;}
.narrow{max-width:880px;}
.mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;}

/* ===== 背景：製図のようなグリッド ===== */
.bg-grid{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(27,127,212,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(27,127,212,.055) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 25%,transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 25%,transparent 85%);}
/* マウスを追う青い光（パソコンのみ） */
.spot{position:fixed;width:760px;height:760px;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(27,127,212,.13),transparent 62%);
  transform:translate(-50%,-50%);transition:opacity .5s;opacity:0;will-change:left,top;}

/* ===== ヘッダー ===== */
.hd{position:fixed;top:0;left:0;right:0;z-index:70;transition:background .35s,border-color .35s,backdrop-filter .35s;
  border-bottom:1px solid transparent;}
.hd.stuck{background:rgba(5,7,11,.78);backdrop-filter:blur(14px);border-bottom-color:var(--line);}
.hd-in{max-width:var(--maxw);margin-inline:auto;padding:0 var(--pad);height:74px;display:flex;align-items:center;gap:26px;}
.hd-logo{display:flex;align-items:center;gap:12px;text-decoration:none;}
.hd-logo .mk{width:26px;color:var(--ink);flex:0 0 auto;}
.hd-logo .tx{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:1.02rem;letter-spacing:.3em;}
.hd-nav{margin-left:auto;display:flex;align-items:center;gap:clamp(16px,2.3vw,34px);}
.hd-nav a{text-decoration:none;font-size:.82rem;letter-spacing:.12em;color:var(--ink-2);position:relative;padding:.4em 0;transition:color .25s;}
.hd-nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--blue-hi);transition:width .3s var(--ease);}
.hd-nav a:hover{color:#fff;}
.hd-nav a:hover::after{width:100%;}
.btn-contact{border:1px solid var(--blue);color:var(--blue-hi)!important;padding:.7em 1.5em;
  font-size:.78rem!important;letter-spacing:.14em;transition:background .3s,color .3s,box-shadow .3s;}
.btn-contact::after{display:none!important;}
.btn-contact:hover{background:var(--blue);color:#fff!important;box-shadow:0 0 26px var(--glow);}
.burger{display:none;margin-left:auto;width:46px;height:46px;border:0;background:none;cursor:pointer;padding:0;}
.burger span{display:block;width:24px;height:1.5px;background:var(--ink);margin:6px auto;transition:.3s var(--ease);}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

.drawer{position:fixed;inset:0;z-index:65;background:rgba(5,7,11,.97);backdrop-filter:blur(10px);
  padding:100px var(--pad) 60px;transform:translateY(-100%);transition:transform .45s var(--ease);overflow-y:auto;}
.drawer.open{transform:translateY(0);}
.drawer a{display:block;text-decoration:none;padding:1.1em .1em;border-bottom:1px solid var(--line);
  font-size:1.15rem;font-weight:700;letter-spacing:.08em;}
.drawer a .en{display:block;font-family:"JetBrains Mono",monospace;font-size:.66rem;color:var(--blue-hi);letter-spacing:.22em;margin-bottom:.2em;}
.drawer .btn-contact{display:block;text-align:center;margin-top:30px;border-bottom:1px solid var(--blue);font-size:.9rem!important;}
body.locked{overflow:hidden;}

/* ===== ヒーロー ===== */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;}
#heroCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:.85;}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,7,11,.55) 0%,transparent 30%,transparent 62%,var(--bg) 100%);}
.hero-in{position:relative;z-index:3;max-width:var(--maxw);margin-inline:auto;padding:120px var(--pad) 90px;width:100%;}
.hero-tag{display:inline-flex;align-items:center;gap:.9em;font-family:"JetBrains Mono",monospace;
  font-size:.7rem;letter-spacing:.3em;color:var(--blue-hi);margin-bottom:2.2em;}
.hero-tag::before{content:"";width:44px;height:1px;background:var(--blue);}
.hero h1{font-size:clamp(2.3rem,7.4vw,5.4rem);line-height:1.14;letter-spacing:.01em;margin-bottom:.5em;}
.hero h1 .ln{display:block;overflow:hidden;}
.hero h1 .ln>span{display:block;transform:translateY(105%);opacity:0;
  animation:riseIn 1s var(--ease) forwards;}
.hero h1 .ln:nth-child(2)>span{animation-delay:.13s;}
.hero h1 .ln:nth-child(3)>span{animation-delay:.26s;}
.hero .accent{color:var(--blue-hi);}
.hero-lead{max-width:33em;color:var(--ink-2);font-size:clamp(.9rem,1.6vw,1rem);
  opacity:0;animation:fadeUp .9s var(--ease) .62s forwards;}
.hero-meta{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,56px);margin-top:clamp(38px,6vw,66px);
  opacity:0;animation:fadeUp .9s var(--ease) .8s forwards;}
.hero-meta div{border-left:1px solid var(--line-2);padding-left:16px;}
.hero-meta .n{font-family:"Space Grotesk",sans-serif;font-size:clamp(1.5rem,3.4vw,2.3rem);font-weight:700;line-height:1.2;}
.hero-meta .n small{font-size:.5em;color:var(--blue-hi);margin-left:.25em;}
.hero-meta .l{font-family:"JetBrains Mono",monospace;font-size:.64rem;letter-spacing:.18em;color:var(--ink-3);}
.scroll-cue{position:absolute;left:50%;bottom:26px;z-index:3;transform:translateX(-50%);
  font-family:"JetBrains Mono",monospace;font-size:.6rem;letter-spacing:.24em;color:var(--ink-3);
  display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;animation:fadeUp .9s 1.1s forwards;}
.scroll-cue::after{content:"";width:1px;height:52px;background:linear-gradient(var(--blue-hi),transparent);
  animation:cue 1.9s infinite;}

@keyframes riseIn{to{transform:translateY(0);opacity:1;}}
@keyframes fadeUp{from{transform:translateY(22px);}to{transform:translateY(0);opacity:1;}}
@keyframes cue{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;}}

/* ページ見出し（下層） */
.phead{position:relative;padding:clamp(140px,17vw,210px) 0 clamp(52px,7vw,84px);border-bottom:1px solid var(--line);overflow:hidden;}
.phead::before{content:"";position:absolute;right:-6%;top:-40%;width:52vw;height:52vw;border-radius:50%;
  background:radial-gradient(circle,rgba(27,127,212,.16),transparent 65%);pointer-events:none;}
.phead h1{font-size:clamp(1.9rem,5vw,3.2rem);}
.phead .en{display:block;font-family:"JetBrains Mono",monospace;font-size:.68rem;letter-spacing:.3em;
  color:var(--blue-hi);margin-bottom:1.4em;}
.phead p{color:var(--ink-2);max-width:34em;margin:1.5em 0 0;font-size:.93rem;}

/* ===== セクション ===== */
.sec{position:relative;padding:clamp(72px,11vw,140px) 0;}
.sec-2{background:linear-gradient(180deg,transparent,var(--bg-2) 12%,var(--bg-2) 88%,transparent);}
.sec-head{margin-bottom:clamp(38px,6vw,68px);}
.sec-head .en{display:flex;align-items:center;gap:1em;font-family:"JetBrains Mono",monospace;
  font-size:.66rem;letter-spacing:.28em;color:var(--blue-hi);margin-bottom:1.1em;}
.sec-head .en::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent);}
.sec-head h2{font-size:clamp(1.45rem,3.6vw,2.3rem);}
.lead{color:var(--ink-2);font-size:.94rem;max-width:42em;}

/* 現れる動き */
.rv{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.rv.in{opacity:1;transform:none;}
.rv.d1{transition-delay:.1s;} .rv.d2{transition-delay:.2s;} .rv.d3{transition-delay:.3s;}
.rv.d4{transition-delay:.4s;} .rv.d5{transition-delay:.5s;}

/* ===== 事業カード ===== */
.biz{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:clamp(18px,2.4vw,28px);}
.biz-card{position:relative;background:var(--panel);border:1px solid var(--line);
  padding:clamp(28px,3.6vw,46px);display:flex;flex-direction:column;overflow:hidden;
  transition:border-color .4s,transform .5s var(--ease),box-shadow .5s;}
.biz-card::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .5s;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,0%),rgba(27,127,212,.16),transparent 60%);}
.biz-card::after{content:"";position:absolute;right:-1px;bottom:-1px;width:0;height:0;
  border-style:solid;border-width:0 0 26px 26px;border-color:transparent transparent var(--blue) transparent;
  opacity:.5;transition:opacity .4s,border-width .4s var(--ease);}
.biz-card:hover{border-color:var(--line-2);transform:translateY(-6px);box-shadow:0 26px 60px -28px rgba(0,0,0,.9);}
.biz-card:hover::before{opacity:1;}
.biz-card:hover::after{opacity:1;border-width:0 0 40px 40px;}
.biz-card>*{position:relative;z-index:1;}
.biz-card .no{font-family:"JetBrains Mono",monospace;font-size:.66rem;letter-spacing:.24em;color:var(--blue-hi);}
.biz-card h3{font-size:1.28rem;margin:.7em 0 .45em;}
.biz-card .sub{font-family:"JetBrains Mono",monospace;font-size:.66rem;color:var(--ink-3);letter-spacing:.14em;margin-bottom:1.6em;}
.biz-card p{font-size:.9rem;color:var(--ink-2);}
.biz-card .more{margin-top:auto;padding-top:1.4em;font-size:.78rem;letter-spacing:.14em;
  color:var(--blue-hi);text-decoration:none;display:inline-flex;align-items:center;gap:.7em;}
.biz-card .more span{transition:transform .35s var(--ease);}
.biz-card:hover .more span{transform:translateX(8px);}

/* ===== 流れる文字 ===== */
.marq{border-block:1px solid var(--line);padding:22px 0;overflow:hidden;white-space:nowrap;background:var(--bg-2);}
.marq-in{display:inline-flex;gap:60px;animation:marq 36s linear infinite;}
.marq span{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(1.3rem,3.4vw,2.1rem);
  letter-spacing:.1em;color:transparent;-webkit-text-stroke:1px var(--line-2);}
.marq span:nth-child(even){color:var(--blue);-webkit-text-stroke:0;opacity:.55;}
@keyframes marq{to{transform:translateX(-50%);}}

/* ===== 数字 ===== */
.nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:clamp(18px,2.4vw,26px);}
.num{border:1px solid var(--line);background:var(--panel);padding:clamp(24px,3vw,34px);}
.num .v{font-family:"Space Grotesk",sans-serif;font-size:clamp(1.9rem,4.4vw,2.9rem);font-weight:700;line-height:1.1;}
.num .v small{font-size:.42em;color:var(--blue-hi);margin-left:.3em;}
.num .k{font-family:"JetBrains Mono",monospace;font-size:.64rem;letter-spacing:.16em;color:var(--ink-3);margin-top:.8em;}

/* ===== 表 ===== */
.tbl{width:100%;border-collapse:collapse;font-size:.9rem;}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:1.3em .2em;border-bottom:1px solid var(--line);}
.tbl th{width:11em;font-weight:400;color:var(--ink-3);letter-spacing:.12em;white-space:nowrap;
  font-family:"JetBrains Mono",monospace;font-size:.7rem;}
.tbl td{color:var(--ink);}
.tbl a{color:var(--blue-hi);}
@media(max-width:620px){
  .tbl th,.tbl td{display:block;width:auto;border-bottom:0;padding:.1em;}
  .tbl th{padding-top:1.3em;}
  .tbl td{padding-bottom:1.3em;border-bottom:1px solid var(--line);}
}

/* ===== 沿革 ===== */
.hist{list-style:none;padding:0;margin:0;}
.hist li{display:flex;gap:clamp(18px,4vw,52px);padding:1.5em 0;border-bottom:1px solid var(--line);font-size:.92rem;}
.hist .y{flex:0 0 auto;width:8em;color:var(--blue-hi);font-family:"JetBrains Mono",monospace;font-size:.76rem;letter-spacing:.1em;padding-top:.35em;}
@media(max-width:620px){.hist li{flex-direction:column;gap:.3em;}}

/* ===== 工程 ===== */
.flow{counter-reset:f;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);}
.flow li{counter-increment:f;list-style:none;background:var(--panel);padding:clamp(24px,3vw,34px);
  display:flex;gap:clamp(18px,3vw,34px);align-items:flex-start;transition:background .4s;}
.flow li:hover{background:var(--panel-2);}
.flow li::before{content:"0" counter(f);font-family:"Space Grotesk",sans-serif;font-weight:700;
  font-size:1.5rem;color:var(--blue);line-height:1;flex:0 0 auto;opacity:.8;}
.flow h3{font-size:1.02rem;margin-bottom:.5em;}
.flow p{font-size:.87rem;color:var(--ink-2);margin:0;}

/* ===== 事例 ===== */
.works{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(16px,2.2vw,24px);}
.work{border:1px solid var(--line);background:var(--panel);overflow:hidden;transition:border-color .4s,transform .5s var(--ease);}
.work:hover{border-color:var(--line-2);transform:translateY(-5px);}
.work .ph{aspect-ratio:4/3;background:
  repeating-linear-gradient(45deg,rgba(255,255,255,.018) 0 12px,transparent 12px 24px),var(--panel-2);
  display:flex;align-items:center;justify-content:center;color:var(--ink-3);
  font-family:"JetBrains Mono",monospace;font-size:.66rem;letter-spacing:.18em;position:relative;overflow:hidden;}
.work .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);}
.work:hover .ph img{transform:scale(1.05);}
.work .body{padding:22px 24px 28px;}
.work .tag{font-family:"JetBrains Mono",monospace;font-size:.62rem;letter-spacing:.18em;color:var(--blue-hi);}
.work h3{font-size:1rem;margin:.7em 0 .4em;}
.work p{font-size:.85rem;color:var(--ink-2);margin:0;}

/* ===== 採用 ===== */
.job{border:1px solid var(--line);background:var(--panel);padding:clamp(26px,3.6vw,44px);}
.job h3{font-size:1.15rem;margin-bottom:1em;}

/* ===== CTA ===== */
.cta{position:relative;overflow:hidden;border-top:1px solid var(--line);
  padding:clamp(70px,10vw,130px) var(--pad);text-align:center;background:var(--bg-2);}
.cta::before{content:"";position:absolute;left:50%;top:120%;width:120vw;height:120vw;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(27,127,212,.16),transparent 55%);pointer-events:none;}
.cta>*{position:relative;z-index:1;}
.cta h2{font-size:clamp(1.35rem,3.6vw,2.2rem);margin-bottom:.8em;}
.cta p{color:var(--ink-2);font-size:.92rem;max-width:36em;margin-inline:auto;}
.btn{display:inline-flex;align-items:center;gap:1em;margin-top:1.8em;border:1px solid var(--blue);
  background:transparent;color:var(--ink);text-decoration:none;padding:1.05em 2.8em;
  font-size:.86rem;letter-spacing:.16em;position:relative;overflow:hidden;transition:color .35s,box-shadow .4s;}
.btn::before{content:"";position:absolute;inset:0;background:var(--blue);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);z-index:-1;}
.btn:hover{box-shadow:0 0 40px var(--glow);}
.btn:hover::before{transform:scaleX(1);}
.btn span{transition:transform .35s var(--ease);}
.btn:hover span{transform:translateX(6px);}

/* ===== フッター ===== */
.ft{border-top:1px solid var(--line);padding:clamp(52px,7vw,84px) 0 30px;font-size:.85rem;background:var(--bg);}
.ft-in{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,70px);}
.ft-brand{display:flex;align-items:center;gap:12px;margin-bottom:1.2em;}
.ft-brand .mk{width:30px;color:var(--ink);}
.ft-brand .tx{font-family:"Space Grotesk",sans-serif;font-weight:700;letter-spacing:.28em;}
.ft address{font-style:normal;color:var(--ink-3);line-height:2.1;font-size:.82rem;}
.ft-nav{display:flex;flex-direction:column;gap:.75em;}
.ft-nav a{text-decoration:none;color:var(--ink-2);transition:color .25s;font-size:.83rem;}
.ft-nav a:hover{color:var(--blue-hi);}
.ft-btm{margin-top:clamp(36px,5vw,60px);padding-top:22px;border-top:1px solid var(--line);
  color:var(--ink-3);font-family:"JetBrains Mono",monospace;font-size:.64rem;letter-spacing:.14em;
  display:flex;flex-wrap:wrap;gap:1em;justify-content:space-between;}

/* ===== フォーム ===== */
.f-row{margin-bottom:1.6em;}
.f-row label{display:block;font-family:"JetBrains Mono",monospace;font-size:.66rem;letter-spacing:.16em;
  margin-bottom:.7em;color:var(--ink-3);}
.f-row .req{color:var(--blue-hi);margin-left:.7em;}
.f-row input,.f-row textarea,.f-row select{
  width:100%;padding:.95em 1.1em;border:1px solid var(--line);background:var(--panel);
  font-family:inherit;font-size:.92rem;line-height:1.9;color:var(--ink);transition:border-color .3s,box-shadow .3s;}
.f-row input:focus,.f-row textarea:focus,.f-row select:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(27,127,212,.15);}
.f-row textarea{min-height:12em;resize:vertical;}
.f-row input.bad,.f-row textarea.bad,.f-row select.bad{border-color:#e5484d;}
.f-row select{appearance:none;cursor:pointer;}
.f-btn{background:var(--blue);color:#fff;border:0;padding:1.1em 3.2em;
  font-family:inherit;font-size:.88rem;letter-spacing:.16em;cursor:pointer;transition:box-shadow .35s,background .3s;}
.f-btn:hover{background:var(--blue-hi);box-shadow:0 0 40px var(--glow);}
.f-err{display:none;border:1px solid rgba(229,72,77,.5);background:rgba(229,72,77,.08);color:#ff9ea1;
  padding:1.1em 1.3em;font-size:.85rem;margin-bottom:1.6em;}
.f-note{font-size:.8rem;color:var(--ink-3);line-height:2;}
.direct{border:1px solid var(--line);background:var(--panel);padding:clamp(26px,3.6vw,40px);
  margin-bottom:clamp(36px,5vw,56px);display:grid;gap:1.5em;}
.direct dt{font-family:"JetBrains Mono",monospace;font-size:.64rem;letter-spacing:.18em;color:var(--ink-3);margin:0;}
.direct dd{margin:.35em 0 0;font-size:1.08rem;}
.direct dd a{color:var(--blue-hi);text-decoration:none;}
.direct dd a:hover{text-decoration:underline;}

/* ===== 制作メモ（公開時に自動で取り除かれます） ===== */
.memo{border:1px dashed rgba(255,196,84,.45);background:rgba(255,196,84,.06);color:#ffd79a;
  padding:20px 24px;font-size:.8rem;line-height:2;letter-spacing:.03em;
  margin:clamp(30px,4vw,48px) auto;max-width:var(--maxw);position:relative;z-index:2;}
.memo b{color:#ffc454;}
.tbc{color:#ff8f93;font-size:.8rem;letter-spacing:.06em;}

/* ===== スマホ ===== */
@media(max-width:920px){
  .hd-nav{display:none;}
  .burger{display:block;}
}
@media(min-width:921px){
  .drawer{display:none;}
}
@media(max-width:620px){
  body{line-height:1.95;}
  .hero-meta div{border-left:0;border-top:1px solid var(--line-2);padding:14px 0 0;}
}

/* ===== 動きを減らす設定の方へ ===== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;}
  .hero h1 .ln>span{transform:none;opacity:1;}
  .hero-lead,.hero-meta,.scroll-cue{opacity:1;}
  .rv{opacity:1;transform:none;}
  /* ヒーローの什器は消さず、動かさずに1枚だけ描きます（motion.js 側で判定） */
}