/* =====================================================================
   AIPro Corporate Site — shared stylesheet
   2ページ（index.html / contact.html / privacy.html）で共有
   配色・タイポは確定デザインを忠実に再現（変更不可）
   ===================================================================== */

:root{
  --blue:#2E9BE6; --blue-d:#1E84CC; --blue-pale:#EAF4FC; --blue-line:#CDE6F8;
  --sky:#8CC4F2; --navy:#0C447C; --ink:#16202B; --gray:#5B6573; --gray-l:#8A95A3; --hair:#E6ECF2;
  --sans:'Zen Kaku Gothic New',sans-serif; --disp:'Outfit',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.6;
  background:linear-gradient(180deg,#FFFFFF 0%,#F2F9FF 40%,#E2F1FC 100%);}

/* ===== FIXED silk background ===== */
#silk{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;}
.noise{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.04;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

.page{position:relative;z-index:2;}

/* ===== header ===== */
.hd{position:fixed;top:0;left:0;right:0;z-index:20;padding:22px 0;transition:background .3s,box-shadow .3s,padding .3s;}
.hd.scrolled{background:rgba(255,255,255,.8);backdrop-filter:blur(12px);box-shadow:0 6px 24px -12px rgba(12,68,124,.25);padding:14px 0;}
.hd-in{max-width:1120px;margin:0 auto;padding:0 48px;display:flex;align-items:center;justify-content:space-between;}
.logo{font-family:var(--disp);font-weight:700;font-size:25px;letter-spacing:.5px;text-decoration:none;}
.logo .ai,.logo .pro{color:var(--blue);}
.nav{display:flex;gap:30px;}
.nav a{font-family:var(--disp);font-size:14px;font-weight:500;color:var(--navy);text-decoration:none;letter-spacing:.04em;opacity:.85;cursor:pointer;}
.nav a:hover{opacity:1;}

/* ===== hero ===== */
.hero{position:relative;height:100vh;min-height:640px;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 24px;}
.halo{position:relative;}
.halo::before{content:"";position:absolute;inset:-30% -18%;z-index:-1;
  background:radial-gradient(62% 62% at 50% 50%,rgba(255,255,255,.96),rgba(255,255,255,.5) 45%,rgba(255,255,255,0) 75%);filter:blur(14px);}
.mission{font-size:89px;font-weight:900;line-height:1.42;letter-spacing:.02em;
  background:linear-gradient(120deg,#0C447C 0%,#1E84CC 42%,#3E96DB 70%,#5BAEE8 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 0 2px rgba(255,255,255,.95)) drop-shadow(0 0 2px rgba(255,255,255,.95)) drop-shadow(0 0 4px rgba(255,255,255,.8)) drop-shadow(0 4px 14px rgba(12,68,124,.22));
  opacity:0;transform:translateY(34px) scale(.97);animation:rise 1.3s .3s cubic-bezier(.2,.7,.2,1) forwards;}
@keyframes rise{to{opacity:1;transform:translateY(0) scale(1);}}
.scrollhint{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);color:var(--navy);opacity:.65;animation:bob 1.8s ease-in-out infinite;}
.scrollhint svg{width:24px;height:24px;}
@keyframes bob{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,8px);}}

/* ===== frosted glass panel ===== */
.panel{max-width:1120px;margin:0 auto 90px;padding:72px 60px;border-radius:30px;
  background:rgba(255,255,255,.58);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.7);
  box-shadow:0 36px 80px -38px rgba(12,68,124,.42);}

/* ===== SERVICE ===== */
.svc-head{text-align:left;margin-bottom:54px;}
.eyebrow{display:inline-block;font-family:var(--disp);font-size:clamp(40px,12vw,88px);font-weight:700;letter-spacing:.02em;line-height:1.05;color:var(--blue);margin-bottom:18px;}
.svc-title{font-size:33px;font-weight:900;letter-spacing:.01em;line-height:1.45;color:var(--ink);}
.svc-title .hl{color:var(--blue);}
.svc-lead{font-size:15px;color:var(--gray);line-height:2;margin-top:20px;max-width:680px;margin-left:0;margin-right:0;}
.target-label{font-size:12px;font-weight:700;color:var(--gray-l);letter-spacing:.14em;margin-top:32px;margin-bottom:14px;text-align:left;}
.targets{display:flex;gap:11px;justify-content:flex-start;flex-wrap:wrap;}
.target{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--blue-d);
  background:rgba(234,244,252,.8);border:1.5px solid var(--blue-line);padding:9px 18px;border-radius:999px;letter-spacing:.02em;}
.target svg{width:18px;height:18px;stroke:var(--blue-d);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}

.flow{display:grid;grid-template-columns:1fr 46px 1fr 46px 1fr;align-items:stretch;}
.arrow{display:flex;align-items:center;justify-content:center;color:var(--blue);}
.arrow svg{width:28px;height:28px;}
.card{position:relative;border-radius:22px;background:rgba(255,255,255,.92);border:1.5px solid var(--hair);overflow:hidden;
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;box-shadow:0 14px 34px -26px rgba(22,32,43,.4);}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--blue),var(--blue-line));}
.card:hover{transform:translateY(-7px);box-shadow:0 30px 56px -26px rgba(46,155,230,.42);border-color:var(--blue-line);}
.card .inner{position:relative;padding:32px 28px 30px;display:flex;flex-direction:column;height:100%;}
.bgnum{position:absolute;top:14px;right:20px;font-family:var(--disp);font-size:66px;font-weight:800;line-height:1;color:var(--blue-pale);z-index:0;pointer-events:none;}
.ic{position:relative;z-index:1;width:54px;height:54px;border-radius:15px;background:var(--blue-pale);display:flex;align-items:center;justify-content:center;margin-bottom:20px;}
.ic svg{width:27px;height:27px;stroke:var(--blue-d);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.phase{position:relative;z-index:1;font-family:var(--disp);font-size:12px;font-weight:600;color:var(--blue);letter-spacing:.14em;margin-bottom:9px;}
.biz{position:relative;z-index:1;font-size:20px;font-weight:900;color:var(--ink);line-height:1.4;margin-bottom:13px;}
.catch{position:relative;z-index:1;font-size:15.5px;font-weight:700;color:var(--blue-d);line-height:1.7;margin-bottom:16px;}
.svc-link{position:relative;z-index:1;display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);font-size:14.5px;font-weight:700;
  color:#fff;background:linear-gradient(120deg,var(--blue),var(--blue-d));border:none;padding:13px 24px;border-radius:12px;
  text-decoration:none;margin-top:auto;align-self:flex-start;box-shadow:0 12px 26px -10px rgba(46,155,230,.65);
  transition:transform .25s,box-shadow .25s;}
.svc-link:hover{transform:translateY(-3px);box-shadow:0 18px 34px -12px rgba(46,155,230,.75);}
.svc-link svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s;}
.svc-link:hover svg{transform:translateX(3px);}
.svc-link.soon{background:#EEF1F4;color:var(--gray-l);box-shadow:none;cursor:default;}
.svc-link.soon:hover{transform:none;box-shadow:none;background:#EEF1F4;}

/* ===== COMPANY / MESSAGE ===== */
.dash{font-family:var(--disp);font-size:clamp(40px,12vw,88px);letter-spacing:.02em;line-height:1.05;color:var(--blue-d);font-weight:700;}
.msg-grid{display:grid;grid-template-columns:7.5fr 2.5fr;gap:64px;align-items:start;margin-top:24px;}
.headline{font-size:clamp(25px,3vw,37px);font-weight:900;line-height:1.42;letter-spacing:.01em;margin:0 0 34px;color:var(--ink);}
.headline em{font-style:normal;background:linear-gradient(92deg,var(--navy),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent;}
.msg-body p{font-size:15.5px;color:#2b333d;margin-bottom:20px;line-height:2.02;}
.msg-body p:last-child{margin-bottom:0;}
.right{margin-top:0;}
.msg-left{min-width:0;}
.photo-wrap{position:relative;max-width:215px;}
.photo-wrap::before{content:"";position:absolute;inset:12px -8px -12px 8px;background:linear-gradient(160deg,rgba(46,155,230,.16),rgba(12,68,124,.10));border-radius:6px;}
.photo{position:relative;aspect-ratio:4/5;border-radius:6px;overflow:hidden;background:linear-gradient(160deg,#eef5fb,#dbe8f4);border:1px solid var(--line,#e4ecf4);display:flex;align-items:center;justify-content:center;text-align:center;color:#9bb2c6;font-size:12px;letter-spacing:.08em;}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.photo .photo-ph{line-height:1.9;padding:0 8px;}
.profile{margin-top:28px;}
.profile .who{font-size:17px;font-weight:800;letter-spacing:.06em;margin-bottom:12px;}
.profile .who .ttl{font-size:12px;font-weight:700;color:var(--sub,#5a6573);letter-spacing:.12em;margin-right:12px;}
.profile .bio{font-size:12.5px;color:#5f6b78;line-height:1.95;}

/* ===== COMPANY 小見出し（代表挨拶 / 会社概要 を統一デザインに） ===== */
.sub-h{font-size:18px;font-weight:900;color:var(--ink);margin:34px 0 18px;}

/* ===== overview table ===== */
.ov{margin-top:60px;border-top:1px solid var(--hair);padding-top:46px;}
.ov h3{font-size:18px;font-weight:900;color:var(--ink);margin-bottom:22px;}
.ov table{width:100%;border-collapse:collapse;}
.ov th,.ov td{text-align:left;padding:15px 6px;border-bottom:1px solid var(--hair);font-size:14.5px;vertical-align:top;}
.ov th{width:150px;color:var(--gray);font-weight:700;}
.ov td{color:var(--ink);}

/* ===== contact section (HOME) ===== */
.contact{text-align:left;}
.contact h2{font-size:30px;font-weight:900;color:var(--ink);margin-bottom:14px;}
.contact p{font-size:15px;color:var(--gray);margin-bottom:30px;}
.cta{display:inline-flex;align-items:center;gap:10px;font-family:var(--disp);font-size:15px;font-weight:700;color:#fff;
  background:linear-gradient(120deg,var(--blue),var(--blue-d));padding:16px 34px;border-radius:14px;text-decoration:none;
  box-shadow:0 16px 34px -16px rgba(46,155,230,.6);transition:transform .25s;border:none;cursor:pointer;}
.cta:hover{transform:translateY(-3px);}

/* ===== footer ===== */
.footer{position:relative;z-index:2;background:rgba(7,46,88,.92);color:#fff;padding:54px 0 34px;margin-top:30px;}
.footer-in{max-width:1120px;margin:0 auto;padding:0 48px;display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:30px;}
.footer .logo .ai,.footer .logo .pro{color:#fff;}
.footer .fnav{display:flex;gap:26px;flex-wrap:wrap;}
.footer .fnav a{font-family:var(--disp);font-size:13px;color:rgba(255,255,255,.8);text-decoration:none;letter-spacing:.04em;}
.footer .fnav a:hover{color:#fff;}
.footer .copy{width:100%;text-align:center;margin-top:34px;font-family:var(--disp);font-size:12px;color:rgba(255,255,255,.55);letter-spacing:.06em;}

/* ===== fade up ===== */
.fade{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease;}
.fade.in{opacity:1;transform:translateY(0);}

@media(max-width:860px){
  .hd{padding:18px 0;} .hd.scrolled{padding:12px 0;} .hd-in{padding:0 20px;} .nav{display:none;}
  .footer{padding:40px 0 28px;} .footer-in{padding:0 22px;}
  /* スマホでヒーロー見出しが収まるよう縮小（2行レイアウト・配色は維持） */
  .mission{font-size:clamp(20px,6.5vw,56px);}
  .panel{padding:44px 24px;margin:0 16px 60px;border-radius:24px;}
  .svc-title{font-size:24px;}
  .flow{grid-template-columns:1fr;}
  .arrow{padding:12px 0;} .arrow svg{transform:rotate(90deg);}
  .msg-grid{grid-template-columns:1fr;gap:38px;} .right{margin-top:0;} .photo-wrap{max-width:300px;}
  .ov th{width:110px;}
}
@media(prefers-reduced-motion:reduce){
  .mission{animation:none;opacity:1;transform:none;}
  .fade{transition:none;opacity:1;transform:none;}
  .scrollhint{animation:none;}
}