:root{
    --navy: #14213D;
    --blue: #1657FF;
    --blue-deep: #0C3FC7;
    --blue-tint: #EEF3FF;
    --orange: #FF8A3D;
    --orange-deep: #E96F1F;
    --orange-tint: #FFF1E5;
    --bg: #FFFFFF;
    --bg-alt: #F7F9FF;
    --line: #E4E9F5;
    --text: #1B2440;
    --text-sub: #5C6B8A;
    --ff-head: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', sans-serif;
    --ff-body: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
    --maxw: 1160px;
  }

  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  body{
    margin:0;
    font-family: var(--ff-body);
    color: var(--text);
    background: var(--bg);
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  img,svg{ max-width:100%; display:block; }
  a{ color: inherit; text-decoration: none; }
  ul{ margin:0; padding:0; list-style:none; }
  h1,h2,h3,h4{ font-family: var(--ff-head); margin:0; color: var(--navy); }
  p{ margin:0; }
  .container{ max-width: var(--maxw); margin: 0 auto; padding: 0 32px; position:relative; }

  :focus-visible{ outline: 2px solid var(--blue); outline-offset: 3px; }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  }

  /* ---------- Scroll reveal ---------- */
  .reveal{ opacity:0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
  .reveal.in-view{ opacity:1; transform:none; }
  .reveal-d1.in-view{ transition-delay: .08s; }
  .reveal-d2.in-view{ transition-delay: .16s; }
  .reveal-d3.in-view{ transition-delay: .24s; }
  .reveal-d4.in-view{ transition-delay: .32s; }

  /* ---------- Decorative blobs ---------- */
  .blob{
    position:absolute; border-radius:50%; filter: blur(2px); pointer-events:none; z-index:0;
    opacity:.55;
  }
  @keyframes drift{
    0%{ transform: translate(0,0) rotate(0deg); }
    50%{ transform: translate(14px,-18px) rotate(8deg); }
    100%{ transform: translate(0,0) rotate(0deg); }
  }
  @keyframes drift2{
    0%{ transform: translate(0,0) rotate(0deg); }
    50%{ transform: translate(-16px,16px) rotate(-6deg); }
    100%{ transform: translate(0,0) rotate(0deg); }
  }
  @keyframes float{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-14px); }
  }
  @keyframes pulseSoft{
    0%,100%{ transform: scale(1); }
    50%{ transform: scale(1.05); }
  }
  @keyframes spinSlow{
    to{ transform: rotate(360deg); }
  }

  /* ---------- Grain texture (2026: anti-AI "hand touch") ---------- */
  .grain{
    position:fixed; inset:0; z-index:400; pointer-events:none;
    opacity:.035; mix-blend-mode:overlay;
    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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:160px 160px;
  }

  /* ---------- Scroll progress ---------- */
  .scroll-progress{
    position:fixed; top:0; left:0; height:3px; width:0%; z-index:500;
    background: linear-gradient(90deg, var(--blue), var(--orange));
  }

  /* ---------- Header ---------- */
  .site-header{
    position: sticky; top:0; z-index: 200;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid transparent;
    transition: box-shadow .3s ease, border-color .3s ease;
  }
  .site-header.scrolled{
    box-shadow: 0 6px 24px rgba(20,33,61,0.06);
    border-color: var(--line);
  }
  .site-header .container{
    display:flex; align-items:center; justify-content:space-between;
    height: 76px;
  }
  .logo{
    font-family: var(--ff-head); font-weight:900; font-size: 20px; letter-spacing: 0.02em;
    color: var(--navy); display:flex; align-items:baseline; gap:8px;
  }
  .logo span{ font-size: 11px; font-weight:500; color: var(--text-sub); font-family: var(--ff-body); }
  .main-nav{ display:flex; align-items:center; gap: 36px; }
  .main-nav ul{ display:flex; gap: 30px; }
  .main-nav a{
    font-size: 14.5px; font-weight:500; color: var(--navy);
    position:relative; padding: 4px 0;
  }
  .main-nav a::after{
    content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
    background: var(--blue); transform: scaleX(0); transform-origin: left;
    transition: transform 0.25s ease;
  }
  .main-nav a:hover::after{ transform: scaleX(1); }
  .nav-cta{
    background: var(--blue); color:#fff; font-size:14px; font-weight:700;
    padding: 11px 24px; border-radius: 999px; white-space:nowrap;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 8px 18px rgba(22,87,255,0.25);
  }
  .nav-cta:hover{ background: var(--blue-deep); transform: translateY(-2px); }

  .nav-toggle{
    display:none; width:40px; height:40px; border:none; background:none; cursor:pointer;
    flex-direction:column; justify-content:center; align-items:center; gap:5px;
  }
  .nav-toggle span{ width:22px; height:2px; background:var(--navy); border-radius:2px; transition: all .3s ease; }
  .nav-toggle.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  /* ---------- Hero ---------- */
  .hero{
    padding: 84px 0 80px;
    background: linear-gradient(180deg, var(--blue-tint) 0%, #fff 78%);
    overflow:hidden;
    position:relative;
  }
  .hero .container{
    display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items:center;
  }
  .hero-eyebrow{
    font-size: 13px; color: var(--blue); font-weight:700; margin-bottom: 18px;
    display:flex; align-items:center; gap:10px;
    opacity:0; animation: fadeUp .7s ease forwards; animation-delay:.05s;
  }
  .hero-eyebrow::before{ content:""; width: 24px; height: 1px; background: var(--blue); }
  .hero-heading-wrap{ position:relative; }
  .ghost-text{
    position:absolute; top:-46px; left:-4px; z-index:0;
    font-family: var(--ff-head); font-weight:900; letter-spacing:.02em;
    font-size: clamp(64px, 9vw, 128px); line-height:1; color: var(--blue);
    opacity:.07; white-space:nowrap; pointer-events:none; user-select:none;
  }
  .hero h1{
    position:relative; z-index:1;
    font-size: clamp(30px, 4.1vw, 48px);
    font-weight:900; line-height:1.48; letter-spacing: 0.01em;
    margin-bottom: 26px;
    opacity:0; animation: fadeUp .7s ease forwards; animation-delay:.15s;
  }
  .hero-lead{
    font-size: 16px; color: var(--text-sub); max-width: 44ch; margin-bottom: 36px;
    opacity:0; animation: fadeUp .7s ease forwards; animation-delay:.28s;
  }
  .hero-actions{
    display:flex; gap:16px; flex-wrap:wrap;
    opacity:0; animation: fadeUp .7s ease forwards; animation-delay:.4s;
  }
  @keyframes fadeUp{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:none; } }

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding: 15px 30px; font-size: 14.5px; font-weight:700; border-radius: 999px;
    transition: all 0.22s ease; border: 1px solid transparent;
  }
  .btn-primary{ background: var(--blue); color:#fff; box-shadow: 0 10px 24px rgba(22,87,255,0.28); }
  .btn-primary:hover{ background: var(--blue-deep); transform: translateY(-2px); }
  .btn-ghost{ border-color: var(--line); color: var(--navy); background:#fff; }
  .btn-ghost:hover{ border-color: var(--blue); color: var(--blue); transform: translateY(-2px); }

  .hero-art{ position:relative; width:100%; z-index:1; }
  .hero-art .float-el{ animation: float 4.2s ease-in-out infinite; }
  .hero-art .float-el.d2{ animation-delay:.6s; animation-duration:4.8s; }
  .hero-art .float-el.d3{ animation-delay:1.2s; animation-duration:3.9s; }
  .hero-art .scale-in{ opacity:0; animation: scaleIn .6s cubic-bezier(.2,.8,.2,1) forwards; }
  @keyframes scaleIn{ from{ opacity:0; transform: scale(.85); } to{ opacity:1; transform: scale(1); } }

  /* ---------- Marquee ---------- */
  .marquee{
    background: var(--navy); overflow:hidden; padding: 18px 0;
    transform: rotate(-1.2deg); margin: -18px 0 56px;
    position:relative; z-index:2;
  }
  .marquee-track{
    display:flex; width:max-content; gap: 48px;
    animation: marquee 22s linear infinite;
  }
  .marquee-track span{
    font-family: var(--ff-head); font-weight:700; font-size: 16px; color:#fff;
    display:flex; align-items:center; gap:14px; white-space:nowrap;
  }
  .marquee-track span::after{ content:"◆"; color: var(--orange); font-size:10px; }
  @keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

  /* ---------- Section basics ---------- */
  section{ padding: 88px 0; position:relative; }
  .section-alt{ background: var(--bg-alt); }
  .section-head{ margin-bottom: 52px; max-width: 640px; }
  .section-head .sub{ font-size:13px; color: var(--blue); font-weight:700; margin-bottom:10px; }
  .section-head h2{ font-size: clamp(24px, 3vw, 34px); line-height:1.5; margin-bottom: 16px; }
  .section-head p{ color: var(--text-sub); font-size:15px; }

  /* ---------- What we do ---------- */
  .about-grid{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap: 60px; align-items:center; position:relative; z-index:1; }
  .about-grid .lead-num{
    font-family: var(--ff-head); font-size: 15px; color: var(--text-sub);
    border-left: 2px solid var(--blue); padding-left: 16px; margin-bottom: 22px;
  }
  .about-grid h2{ font-size: clamp(24px,3vw,32px); line-height:1.6; margin-bottom: 20px; }
  .about-body p{ color: var(--text-sub); font-size:15px; margin-bottom: 18px; }
  .about-body p:last-child{ margin-bottom:0; }
  .about-art{ justify-self:center; }

  /* ---------- Services ---------- */
  .service-grid{
    display:grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
    position:relative; z-index:1;
  }
  .service-card{
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(0px) saturate(160%);
    -webkit-backdrop-filter: blur(0px) saturate(160%);
    border:1px solid var(--line); border-radius: 20px; padding: 32px;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, backdrop-filter .3s ease, background .3s ease;
    position:relative; overflow:hidden;
  }
  .service-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 20px 44px rgba(20,33,61,0.12);
    border-color: rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
  }
  .service-card .badge{
    width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center;
    margin-bottom:22px; transition: transform .3s ease;
  }
  .service-card:hover .badge{ transform: rotate(-6deg) scale(1.06); }
  .service-card.blue .badge{ background: var(--blue-tint); }
  .service-card.orange .badge{ background: var(--orange-tint); }
  .service-card .tag{ font-size:12px; font-weight:700; color: var(--text-sub); margin-bottom:8px; font-family: var(--ff-head); }
  .service-card h3{ font-size:19px; margin-bottom:12px; }
  .service-card p{ color: var(--text-sub); font-size: 14.5px; }

  /* ---------- Process ---------- */
  .process-list{ position:relative; }
  .process-item{
    display:grid; grid-template-columns: 88px 1fr; gap: 28px;
    padding: 0 0 48px; position:relative;
  }
  .process-item:last-child{ padding-bottom:0; }
  .process-item .line{
    position:absolute; left:43px; top: 88px; bottom:-2px; width:2px;
    background: var(--line); overflow:hidden;
  }
  .process-item .line::after{
    content:""; position:absolute; inset:0; background: var(--blue);
    transform: scaleY(0); transform-origin: top; transition: transform .8s ease;
  }
  .process-item.in-view .line::after{ transform: scaleY(1); }
  .process-item:last-child .line{ display:none; }
  .p-num{
    font-family: var(--ff-head); font-weight:900; font-size: 24px; color: var(--blue);
    width:88px; height:88px; border:1px solid var(--line); border-radius:50%;
    display:flex; align-items:center; justify-content:center; background:#fff; z-index:1;
    transition: background .3s ease, color .3s ease, border-color .3s ease;
  }
  .process-item.in-view .p-num{ background: var(--blue); color:#fff; border-color: var(--blue); }
  .p-body h3{ font-size:18px; margin-bottom:8px; padding-top: 22px; }
  .p-body p{ color: var(--text-sub); font-size:14.5px; max-width:58ch; }

  /* ---------- Stats ---------- */
  .stats{ background: var(--navy); color:#fff; overflow:hidden; }
  .stats .section-head h2, .stats .section-head p{ color:#fff; }
  .stats .section-head p{ color: rgba(255,255,255,0.6); }
  .stat-grid{ display:grid; grid-template-columns: repeat(4,1fr); position:relative; z-index:1; }
  .stat-item{ padding: 0 28px; border-left: 1px solid rgba(255,255,255,0.15); }
  .stat-item:first-child{ padding-left:0; border-left:none; }
  .stat-num{ font-family: var(--ff-head); font-weight:900; font-size: clamp(30px,3.4vw,44px); line-height:1; color: var(--orange); }
  .stat-num .unit{ font-size: 0.45em; font-weight:500; margin-left:4px; color:#fff; }
  .stat-label{ margin-top:14px; font-size: 13.5px; color: rgba(255,255,255,0.62); }

  /* ---------- News ---------- */
  .news-list{ border-top: 1px solid var(--line); }
  .news-row{
    display:grid; grid-template-columns: 130px 130px 1fr; gap: 24px; align-items:baseline;
    padding: 22px 0; border-bottom: 1px solid var(--line);
    transition: background .2s ease;
  }
  .news-row:hover{ background: var(--bg-alt); }
  .news-row time{ font-size:13.5px; color: var(--text-sub); font-family: var(--ff-head); }
  .news-tag{
    font-size:12px; color: var(--blue); font-weight:700; align-self:center;
    border: 1px solid var(--blue); border-radius: 999px; padding: 3px 12px; width:fit-content;
  }
  .news-row a{ font-size:15px; }
  .news-row a:hover{ color: var(--blue); }
  .news-foot{ margin-top: 32px; }
  .news-foot a{ font-size:14px; color: var(--navy); border-bottom:1px solid var(--navy); padding-bottom:2px; }
  .news-foot a:hover{ color: var(--blue); border-color: var(--blue); }

  /* ---------- Recruit ---------- */
  .recruit{
    background: linear-gradient(120deg, var(--orange-tint), var(--blue-tint));
    padding: 80px 0; overflow:hidden;
  }
  .recruit .container{
    display:grid; grid-template-columns: 1fr auto 0.7fr; gap: 40px; align-items:center;
  }
  .recruit h2{ font-size: clamp(22px,2.8vw,30px); line-height:1.5; }
  .recruit p{ color: var(--text-sub); margin-top:12px; font-size:14.5px; }
  .recruit-art{ justify-self:center; }

  /* ---------- Footer ---------- */
  footer{ background: var(--navy); color: rgba(255,255,255,0.75); padding: 64px 0 32px; position:relative; overflow:hidden; }
  .footer-top{
    display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
    padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.14);
    position:relative; z-index:1;
  }
  .footer-logo{ font-family: var(--ff-head); font-weight:900; font-size:19px; color:#fff; margin-bottom:14px; }
  .footer-top address{ font-style:normal; font-size:13.5px; line-height:1.9; color: rgba(255,255,255,0.55); }
  .footer-col h4{ color:#fff; font-size:13.5px; font-weight:500; margin-bottom:16px; }
  .footer-col ul li{ margin-bottom:10px; }
  .footer-col a{ font-size:13.5px; color: rgba(255,255,255,0.6); transition: color .2s ease; }
  .footer-col a:hover{ color: var(--orange); }
  .footer-bottom{
    padding-top: 28px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
    position:relative; z-index:1;
  }
  .footer-bottom small{ font-size:12.5px; color: rgba(255,255,255,0.45); }

  /* ---------- Responsive ---------- */
  @media (max-width: 900px){
    .hero .container{ grid-template-columns:1fr; }
    .hero-art{ order:-1; max-width:320px; margin:0 auto 12px; }
    .about-grid{ grid-template-columns:1fr; gap:32px; text-align:left; }
    .about-art{ order:-1; max-width:280px; margin:0 auto; }
    .service-grid{ grid-template-columns:1fr; }
    .stat-grid{ grid-template-columns: repeat(2,1fr); row-gap:32px; }
    .stat-item:nth-child(3){ border-left:none; padding-left:0; }
    .footer-top{ grid-template-columns: 1fr 1fr; row-gap:32px; }
    .recruit .container{ grid-template-columns:1fr; text-align:center; }
    .recruit-art{ order:-1; max-width:200px; }
  }
  @media (max-width: 720px){
    .nav-toggle{ display:flex; }
    .main-nav{
      position:fixed; inset: 76px 0 auto 0; background:#fff; flex-direction:column; align-items:stretch;
      padding: 8px 32px 24px; border-bottom:1px solid var(--line);
      transform: translateY(-12px); opacity:0; pointer-events:none;
      transition: opacity .25s ease, transform .25s ease;
    }
    .main-nav.open{ transform:none; opacity:1; pointer-events:auto; box-shadow: 0 16px 30px rgba(20,33,61,0.08); }
    .main-nav ul{ flex-direction:column; gap:0; }
    .main-nav ul li{ border-bottom:1px solid var(--line); }
    .main-nav ul li a{ display:block; padding:16px 0; }
    .nav-cta{ margin-top:16px; text-align:center; }
    section{ padding: 60px 0; }
    .news-row{ grid-template-columns: 1fr; gap:6px; }
    .marquee{ transform: rotate(-2deg); }
  }