/* 東央技研 共通スタイル */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
:root {
  --blue: #1a6ea8; --blue-mid: #2a8fd1; --blue-light: #e8f2fa;
  --glow: rgba(26,110,168,0.35); --text: #1a1a1a; --sub: #555; --bg: #eff1f4;
  --grid-major: rgba(26,90,168,0.13); --grid-minor: rgba(26,90,168,0.06);
}
html { scroll-behavior: smooth; }
body { font-family: 'Hiragino Sans','Noto Sans JP',sans-serif; color: var(--text); background-color: var(--bg);
  background-image: linear-gradient(var(--grid-major) 1.5px,transparent 1.5px), linear-gradient(90deg,var(--grid-major) 1.5px,transparent 1.5px), linear-gradient(var(--grid-minor) 1px,transparent 1px), linear-gradient(90deg,var(--grid-minor) 1px,transparent 1px);
  background-size: 80px 80px,80px 80px,20px 20px,20px 20px; background-attachment: fixed; overflow-x: hidden; }
#header { position:fixed; top:0; left:0; right:0; z-index:9999; height:70px; padding:0 40px; display:flex; align-items:center; justify-content:space-between; background:rgba(6,15,24,0.88); backdrop-filter:blur(12px); border-bottom:1px solid rgba(125,211,252,0.08); }
#header nav { display:flex; gap:28px; align-items:center; }
#header nav a { text-decoration:none; font-size:14px; font-weight:600; color:rgba(255,255,255,0.7); position:relative; padding-bottom:4px; transition:color .2s; }
#header nav a::after { content:''; position:absolute; bottom:0; left:0; width:0; height:2px; background:#7dd3fc; transition:width .3s; }
#header nav a:hover { color:#fff; }
#header nav a:hover::after, #header nav a.active::after { width:100%; }
#header nav a.active { color:#7dd3fc; }
#header .nav-cta { background:linear-gradient(90deg,var(--blue),var(--blue-mid)); color:#fff !important; padding:9px 22px; border-radius:4px; font-weight:700 !important; }
#header .nav-cta::after { display:none !important; }
.page-hero { margin-top:70px; height:320px; position:relative; overflow:hidden; display:flex; align-items:center; background:linear-gradient(135deg,#061520 0%,#0a2a42 55%,#0f3d60 100%); clip-path:polygon(0 0,100% 0,100% calc(100% - 48px),0 100%); }
#hero-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.page-hero-inner { position:relative; z-index:2; max-width:1100px; margin:0 auto; padding:0 48px; width:100%; }
.page-hero-label { font-size:11px; font-weight:700; letter-spacing:.28em; color:rgba(125,211,252,0.65); text-transform:uppercase; margin-bottom:16px; display:flex; align-items:center; gap:12px; }
.page-hero-label::before { content:''; width:28px; height:1px; background:rgba(125,211,252,0.4); }
.page-hero-title { font-size:clamp(38px,5vw,60px); font-weight:900; color:#fff; line-height:1.1; }
.page-hero-title span { color:#7dd3fc; }
.page-hero-sub { margin-top:14px; font-size:13px; color:rgba(255,255,255,0.45); letter-spacing:.06em; }
.breadcrumb { background:rgba(255,255,255,0.75); backdrop-filter:blur(4px); padding:12px 48px; border-bottom:1px solid rgba(26,90,168,0.1); position:relative; z-index:1; }
.breadcrumb-inner { max-width:1100px; margin:0 auto; display:flex; align-items:center; gap:8px; font-size:12px; color:#999; }
.breadcrumb a { color:#999; text-decoration:none; transition:color .2s; }
.breadcrumb a:hover { color:var(--blue); }
footer { background:#040d14; color:rgba(255,255,255,0.5); padding:48px 40px 28px; position:relative; z-index:1; }
.footer-inner { max-width:1100px; margin:0 auto; }
.footer-top { display:flex; justify-content:space-between; gap:40px; margin-bottom:40px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,0.08); flex-wrap:wrap; }
.footer-logo { color:#fff; font-size:18px; font-weight:900; margin-bottom:6px; }
.footer-tagline { font-size:12px; margin-bottom:8px; }
.footer-email a { color:rgba(255,255,255,.4); text-decoration:none; font-size:12px; }
.footer-nav { display:flex; gap:48px; flex-wrap:wrap; }
.footer-nav-group h4 { color:#fff; font-size:13px; font-weight:700; margin-bottom:12px; }
.footer-nav-group a { display:block; color:rgba(255,255,255,.4); font-size:12px; text-decoration:none; margin-bottom:8px; transition:color .2s; }
.footer-nav-group a:hover { color:#fff; }
.footer-bottom { text-align:center; font-size:12px; color:rgba(255,255,255,.25); }
.btn-main { display:inline-flex; align-items:center; gap:8px; padding:15px 34px; background:linear-gradient(90deg,var(--blue),var(--blue-mid)); color:#fff; font-size:14px; font-weight:700; border-radius:4px; text-decoration:none; transition:transform .2s,box-shadow .2s; white-space:nowrap; }
.btn-main:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(26,110,168,.4); }
.btn-outline { display:inline-flex; align-items:center; gap:8px; padding:15px 34px; border:1px solid rgba(255,255,255,.25); color:#fff; font-size:14px; font-weight:700; border-radius:4px; text-decoration:none; white-space:nowrap; transition:border-color .2s,background .2s; }
.btn-outline:hover { border-color:rgba(255,255,255,.6); background:rgba(255,255,255,.07); }
@media(max-width:768px){ #header { padding:0 20px; } .page-hero-inner, .breadcrumb { padding-left:20px; padding-right:20px; } footer { padding:48px 20px 28px; } }