@charset "UTF-8";
/* ==========================================================
   青澄テクニカ 採用サイト — 共通テーマ「青焼き」
   図面の言葉（寸法線・中心線・表題欄・引出線）で、ものづくりの面白さを描く。
   全ページの最後に読み込み、ヘッダー・フッター・書体・ボタンを統一する。
   ========================================================== */
@font-face{font-family:"AZ Display";src:url(assets/fonts/mplus1.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"AZ Text";src:url(assets/fonts/bizud-r.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"AZ Text";src:url(assets/fonts/bizud-b.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"AZ Num";src:url(assets/fonts/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}

:root{
  --paper:#f4f4f1;      /* 製図用紙 */
  --paper-2:#e8e9e5;
  --white:#fdfdfb;
  --ink:#0f1b3a;        /* 作業着の紺 */
  --ink-2:#4a5468;
  --blue:#1f4fd1;       /* 青澄の青（青焼き線） */
  --blue-deep:#16348f;
  --red:#e2442f;        /* 検図の赤ペン */
  --line:#cfd2d7;
  --grid:rgba(31,79,209,.07);
  --pale:var(--paper);
  --orange:var(--red);
  --display:"AZ Display","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --text:"AZ Text","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --num:"AZ Num","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --grid-bg:linear-gradient(var(--grid) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/24px 24px;
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 10'%3E%3Cpath d='M0 5h20M15 1l5 4-5 4' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E");
}
body{font-family:var(--text);background:var(--paper);color:var(--ink);letter-spacing:.02em;-webkit-font-smoothing:antialiased;word-break:auto-phrase}
h1,h2,h3,.brand{font-family:var(--display);font-feature-settings:"palt" 1}
h1,h2{font-weight:800;letter-spacing:.01em}
h3{font-weight:700;letter-spacing:.01em}
em{color:var(--blue);font-style:normal}
::selection{background:#c9d6f7}
:focus-visible{outline:2px solid var(--blue)!important;outline-offset:3px!important}

/* ---------- small type: view label ---------- */
.eyebrow{font-family:var(--text);color:var(--ink-2);font-size:12px;letter-spacing:.12em;font-weight:700;gap:12px}
.eyebrow:before,.eyebrow::before{content:"";width:13px;height:13px;flex:none;border-radius:50%;background:radial-gradient(circle,var(--blue) 0 1.5px,transparent 2px),linear-gradient(var(--blue),var(--blue)) center/100% 1px no-repeat,linear-gradient(var(--blue),var(--blue)) center/1px 100% no-repeat;box-shadow:inset 0 0 0 1px var(--blue);background-color:transparent}

/* ---------- buttons & links ---------- */
.button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:52px;padding:12px 22px 12px 24px;border-radius:2px;background:var(--ink);color:var(--white);font-family:var(--text);font-size:14px;font-weight:700;letter-spacing:.06em;border:1px solid var(--ink);transition:background .25s,color .25s,border-color .25s;transform:none!important}
.button::after,.btn::after{content:"";width:22px;height:10px;flex:none;background:currentColor;-webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat;transition:transform .3s var(--ease)}
.button:hover,.btn:hover{background:var(--blue);border-color:var(--blue);color:var(--white)}
.button:hover::after,.btn:hover::after{transform:translateX(4px)}
.button.dark{background:var(--ink)}
.text-link{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-weight:700;border-bottom:1px solid var(--ink);padding-bottom:4px}
.text-link::after{content:"";width:18px;height:8px;background:currentColor;-webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat;transition:transform .3s var(--ease)}
.text-link:hover{color:var(--blue);border-color:var(--blue)}
.text-link:hover::after{transform:translateX(3px)}

/* ---------- header ---------- */
header{height:76px;padding:0 clamp(20px,3vw,40px);background:rgba(244,244,241,.9);backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);border-bottom:1px solid var(--line)}
.brand{font-size:21px;font-weight:800;letter-spacing:.06em;gap:12px}
.brand svg{color:var(--blue);width:26px;height:32px}
.brand small{font-family:var(--num);font-weight:500;letter-spacing:.22em;font-size:9.5px;color:var(--ink-2)}
header nav{font-family:var(--text);font-size:13px;gap:clamp(14px,2vw,28px)}
header nav>a:not(.button),.nav-people-toggle{position:relative}
header nav>a:not(.button):hover,.nav-people-toggle:hover,.nav-people-toggle[aria-expanded=true]{color:var(--blue)}
header nav .button{min-height:44px;padding:8px 18px;font-family:var(--num);letter-spacing:.14em;font-size:13px}
.people-subnav{border-radius:2px;border:1px solid var(--ink);box-shadow:6px 6px 0 rgba(15,27,58,.08);background:var(--white);padding:6px}
.people-subnav a{border-radius:0;border-bottom:1px solid var(--paper-2)}
.people-subnav a:last-child{border-bottom:0}
.people-subnav a:hover{background:var(--paper);color:var(--blue)}
.menu{font-family:var(--text);font-weight:700;letter-spacing:.1em}

/* ---------- photos ---------- */
.photo{border-radius:2px}
.detail-hero .photo,.interview-hero .photo{box-shadow:none;outline:1px solid var(--line);outline-offset:8px}

/* ---------- heroes: drawing paper ---------- */
.detail-hero,.company-hero,.culture-hero,.message-hero,.overview-hero,.work-index-hero{background:var(--grid-bg),var(--paper)!important;border-bottom:1px solid var(--line)}
.company-hero:before,.culture-hero:before,.message-hero:before,.overview-hero:before{display:none!important}
.jobs-hero{background:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px) 0 0/24px 24px,var(--blue-deep)!important}
.jobs-hero:before{display:none!important}
.hero h1 em:after{height:2px!important;background:var(--blue)!important;transform:none!important;bottom:-6px!important}
.company-ghost{color:rgba(31,79,209,.07)!important;font-family:var(--num);font-stretch:75%}
.minute{font-family:var(--num);font-stretch:75%;font-weight:700}
[class*="number"],.data-grid strong,.numbers strong{font-family:var(--num)}
time{font-family:var(--num);letter-spacing:.02em}

/* ---------- footer ---------- */
.az-footer{background:var(--grid-bg),var(--ink);--grid:rgba(255,255,255,.04);color:var(--white);padding:clamp(64px,8vw,104px) 0 28px}
.az-footer .wrap{display:block;width:min(1240px,calc(100% - 2*clamp(20px,4vw,56px)));margin:auto}
.az-footer .ft-top{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.18)}
.az-footer .brand{font-size:26px;color:var(--white)}
.az-footer .brand small{color:rgba(255,255,255,.6)}
.az-footer .ft-cta{display:flex;gap:12px;flex-wrap:wrap}
.az-footer .ft-cta .btn{background:var(--white);color:var(--ink);border-color:var(--white)}
.az-footer .ft-cta .btn:hover{background:var(--blue);border-color:var(--blue);color:var(--white)}
.az-footer .ft-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;padding:40px 0}
.az-footer .ft-cols strong{display:block;font-size:12px;letter-spacing:.14em;color:rgba(255,255,255,.55);font-weight:400;margin-bottom:12px}
.az-footer .ft-cols a{display:block;font-size:14px;padding:5px 0;width:fit-content;color:var(--white)}
.az-footer .ft-cols a:hover{color:#9cb6f5}
.az-footer .ft-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.18);padding-top:20px}
.az-footer .ft-bottom p{font-size:11px;line-height:1.8;color:rgba(255,255,255,.62);margin:0;max-width:760px}
.az-footer .ft-bottom small{font-family:var(--num);font-size:11px;letter-spacing:.16em;color:rgba(255,255,255,.62)}

/* ---------- dialog ---------- */
dialog{border-radius:4px!important;border:1px solid var(--ink)!important}

@media(max-width:800px){
  header{height:68px}
  header nav{top:68px!important;background:var(--white)!important;box-shadow:0 12px 24px rgba(15,27,58,.08)!important;border-bottom:1px solid var(--line)}
  header nav>a,.nav-people-toggle{font-family:var(--display);font-weight:700;font-size:17px;border-bottom:1px solid var(--paper-2)}
  header nav .button{margin-top:16px;font-size:14px}
  .people-subnav{box-shadow:none;border:0;background:var(--paper)}
  .az-footer .ft-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* v2: 共通 — デモ帯・固定CTA・空になった矢印 */
.az-demo{background:var(--ink);color:#fff;text-align:center;font-size:12px;letter-spacing:.1em;line-height:28px}
.m-cta{display:none}
.culture-start span:empty,.jobs-start span:empty,.overview-start span:empty{position:relative}
.culture-start span:empty::after,.jobs-start span:empty::after,.overview-start span:empty::after{content:"";position:absolute;inset:0;margin:auto;width:14px;height:10px;background:currentColor;-webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat;transform:rotate(90deg)}
.jobs-start span:empty::after{background:var(--ink)}
@media(max-width:1000px){
  .m-cta{display:grid;grid-template-columns:auto 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:45;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(244,244,241,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line)}
  .m-cta a{display:grid;place-items:center;min-height:48px;padding:0 18px;border:1.5px solid var(--ink);font-weight:700;font-size:14px;border-radius:2px;color:var(--ink)}
  .m-cta .m-cta-main{background:var(--ink);color:#fff}
  body{padding-bottom:76px}
}
.jobs-hero em{color:#c9d6ff!important}
.ng-banner{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:28px 0 8px;padding:16px 20px;border:1.5px solid var(--ink);background:var(--white);font-weight:700;font-size:15px}
.ng-banner b{background:var(--blue);color:#fff;font-size:12px;padding:3px 10px;letter-spacing:.08em}
.ng-banner::after{content:"";margin-left:auto;width:22px;height:10px;background:currentColor;-webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat}
.ng-banner:hover{color:var(--blue);border-color:var(--blue)}

.m-cta{transition:transform .35s var(--ease)}
.m-cta.is-hidden{transform:translateY(110%)}
.breadcrumb a{display:inline-block;padding:12px 0}
.breadcrumb{align-items:center}
.report .survey{display:block;font-size:11px;font-weight:400;color:rgba(255,255,255,.55);margin-top:2px}
.entry-dialog-links{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}

.az-demo{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:4px 18px;padding:7px 16px;height:auto;line-height:1.6}.az-demo .demo-credit{color:inherit;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;font-size:inherit}