@font-face {
    font-family: "Plex";
    font-weight: 600;
    font-style: normal;
    src: url("fonts/plex-600.ttf") format("truetype");
    font-display: swap;
  }
  @font-face {
    font-family: "Plex";
    font-weight: 700;
    font-style: normal;
    src: url("fonts/plex-700.ttf") format("truetype");
    font-display: swap;
  }

  :root{
    --navy: #0f1e42;
    --navy-2: #16295c;
    --blue: #2d84d9;
    --blue-2: #4fa3e8;
    --sky: #bfe0fb;
    --amber: #ef9f36;
    --coral: #e8734a;

    --bg: #f5f8fc;
    --surface: #ffffff;
    --surface-2: #eef3fa;
    --ink: #131c33;
    --ink-soft: #3c4a68;
    --muted: #67759259;
    --muted-solid: #647087;
    --border: #dfe6f1;
    --hero-text: #f3f7ff;

    --jp: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;
    --disp: "Plex", "Hiragino Sans", "Yu Gothic UI", sans-serif;

    --shadow: 0 20px 50px -25px rgba(15,30,66,.35);
  }

  /* Design comprometido com fundo branco sempre - sem variante escura de proposito. */

  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  body{
    margin:0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--jp);
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  img{ max-width:100%; display:block; }
  a{ color: inherit; }
  .wrap{ max-width: 1120px; margin: 0 auto; padding: 0 28px; }
  section{ position: relative; }
  h1,h2,h3,h4{ margin:0; font-weight:600; }
  .eyebrow{
    font-family: var(--disp);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--blue-2);
  }
  .num{ font-family: var(--disp); font-variant-numeric: tabular-nums; }

  /* ---------- header ---------- */
  .site-header{
    position: sticky; top:0; z-index: 40;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
  }
  .site-header .wrap{
    display:flex; align-items:center; justify-content:space-between;
    height: 72px;
  }
  .brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
  .brand__mark{ width:38px; height:38px; flex:none; }
  .brand__word{ font-family: var(--disp); font-weight:700; font-size:18px; line-height:1.15; letter-spacing:.02em; color: var(--ink); display:block; }
  .brand__sub{ font-family: var(--disp); font-size:9px; line-height:1.15; letter-spacing:.24em; color: var(--muted-solid); text-transform:uppercase; display:block; margin-top:0;}
  nav.site-nav{ display:flex; gap:30px; }
  nav.site-nav a{
    font-size: 12.5px; text-decoration:none; color: var(--ink-soft); font-weight:500;
    letter-spacing:.03em; text-transform:uppercase; transition: color .2s ease;
  }
  nav.site-nav a:hover{ color: var(--blue); }
  .nav-cta{
    background: var(--navy); color:#fff !important; padding: 10px 20px; border-radius:999px;
    font-size:13px; font-weight:700; text-decoration:none;
  }
  .nav-toggle{
    display:none; flex-direction:column; justify-content:center; gap:5px;
    width:28px; height:22px; background:none; border:none; cursor:pointer; padding:0; flex:none;
  }
  .nav-toggle span{ display:block; width:100%; height:2px; background:var(--ink); border-radius:2px; transition: transform .25s ease, opacity .25s ease; }
  .site-header.nav-open .nav-toggle span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .site-header.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
  .site-header.nav-open .nav-toggle span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
  @media (max-width: 760px){
    .nav-toggle{ display:flex; }
    nav.site-nav{
      display:flex; flex-direction:column; gap:0;
      position:absolute; top:72px; left:0; right:0;
      background: var(--surface); border-bottom:1px solid var(--border);
      max-height:0; overflow:hidden; transition: max-height .3s ease;
      padding:0 28px;
    }
    nav.site-nav a{ padding:14px 0; border-top:1px solid var(--border); }
    nav.site-nav a:first-child{ border-top:none; }
    .site-header.nav-open nav.site-nav{ max-height:400px; padding:8px 28px 16px; }
  }
  .header-right{ display:flex; align-items:center; gap:30px; }
  .lang-switch{ display:flex; align-items:center; gap:9px; padding-left:22px; border-left:1px solid var(--border); }
  .lang-switch a{
    display:block; width:22px; height:16px; border-radius:3px; overflow:hidden;
    opacity:.55; filter: grayscale(35%); box-shadow: 0 0 0 1px rgba(15,30,66,.08);
    transition: opacity .2s ease, filter .2s ease, transform .2s ease;
  }
  .lang-switch a svg{ display:block; width:100%; height:100%; }
  .lang-switch a:hover{ opacity:1; filter:grayscale(0%); transform: translateY(-1px); }
  .lang-switch a.is-active{ opacity:1; filter:grayscale(0%); }


  /* ---------- hero ---------- */
  .hero{
    background:
      radial-gradient(1100px 500px at 82% -10%, color-mix(in srgb, var(--blue) 16%, transparent) 0%, transparent 62%),
      var(--bg);
    color: var(--ink);
    overflow:hidden;
    padding: 76px 0 96px;
    border-bottom: 1px solid var(--border);
  }
  .hero-deco{ position:absolute; inset:0; pointer-events:none; opacity:.5; }
  .hero-deco svg{ position:absolute; }
  .hero .wrap{
    position:relative; z-index:2;
    display:grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items:center;
  }
  .hero-kicker{ display:flex; align-items:center; gap:10px; margin-bottom:22px; }
  .hero-kicker .dot{ width:7px;height:7px;border-radius:50%; background: var(--amber); }
  .hero-kicker span{ font-family: var(--disp); font-size:12px; letter-spacing:.3em; color: var(--blue); text-transform:uppercase; font-weight:700;}
  .hero h1{
    font-size: 44px; line-height:1.5; font-weight:700; letter-spacing:.01em;
    margin-bottom: 26px;
  }
  .hero h1 em{ font-style:normal; color: var(--blue); }
  .hero p.lead{ font-size:15.5px; color: var(--ink-soft); max-width:46ch; margin-bottom:34px; }
  .hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding: 14px 26px; border-radius: 999px; font-size:14px; font-weight:700;
    text-decoration:none; transition: transform .2s ease, box-shadow .2s ease;
  }
  .btn-primary{ background: var(--blue); color:#fff; box-shadow: 0 14px 30px -12px rgba(45,132,217,.65); }
  .btn-primary:hover{ transform: translateY(-2px); }
  .btn-ghost{ border:1px solid var(--border); color: var(--ink); }
  .btn-ghost:hover{ border-color: var(--navy); }

  .hero-quote{
    margin-top:42px; padding-top:22px; border-top: 1px solid var(--border);
    font-family: var(--disp); font-size:13.5px; letter-spacing:.04em; color: var(--muted-solid);
  }
  .hero-quote b{ color: var(--navy); }

  .hero-collage{ position:relative; height: 520px; }
  .diamond{
    position:absolute; overflow:hidden;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    border: 4px solid #ffffff;
    box-shadow: 0 24px 50px -20px rgba(15,30,66,.4);
  }
  .diamond img{ width:100%; height:100%; object-fit:cover; }
  .d1{ width:300px; height:300px; top: 0; left: 30px; }
  .d2{ width:250px; height:250px; top: 240px; left: 220px; }
  .d3{ width:195px; height:195px; top: 10px; left: 300px; opacity:.9; }

  /* ---------- section shells ---------- */
  .section{ padding: 96px 0; }
  .section-tight{ padding: 72px 0; }
  .section-head{ max-width: 620px; margin-bottom: 48px; }
  .section-head h2{ font-size: 30px; margin-top:10px; letter-spacing:.01em; }
  .section-head p{ color: var(--muted-solid); font-size:14.5px; margin-top:14px; }
  .rule{ width:40px; height:3px; background: var(--blue); border-radius:2px; margin-top:14px; }

  .bg-alt{ background: var(--surface-2); }

  /* ---------- 会社概要 ---------- */
  .profile{ display:grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items:start; }
  .profile-photo{
    border-radius: 18px; overflow:hidden; box-shadow: var(--shadow);
    aspect-ratio: 4/5;
  }
  .profile-photo img{ width:100%; height:100%; object-fit:cover; }
  dl.facts{ display:grid; grid-template-columns: 120px 1fr; row-gap:0; column-gap: 20px; }
  dl.facts div.row{ display:contents; }
  dl.facts dt{
    font-family: var(--disp); font-size:11.5px; letter-spacing:.12em; color: var(--muted-solid);
    text-transform:uppercase; padding: 18px 0; border-top:1px solid var(--border);
  }
  dl.facts dd{
    margin:0; padding: 18px 0; border-top:1px solid var(--border); font-size:15px; font-weight:600;
  }
  dl.facts .row:last-child dt, dl.facts .row:last-child dd{ border-bottom:1px solid var(--border); }

  /* ---------- 企業理念 ---------- */
  .philosophy{
    background: var(--surface-2);
    color: var(--ink); text-align:center; padding: 92px 0;
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  }
  .philosophy .wrap{ max-width: 760px; }
  .philosophy .eyebrow{ justify-content:center; display:flex; margin-bottom:20px; }
  .philosophy blockquote{
    margin:0; font-size: 26px; line-height:1.85; font-weight:600;
  }
  .philosophy .desc{ margin-top:34px; color: var(--muted-solid); font-size:14px; line-height:2; }
  .philosophy .credo{
    margin-top:30px; font-family: var(--disp); font-size:14px; letter-spacing:.06em; color: var(--navy);
    padding-top: 24px; border-top:1px solid var(--border);
  }

  /* ---------- 事業紹介 ---------- */
  .cards3{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
  .service-card{
    background: var(--surface); border:1px solid var(--border); border-radius:18px;
    padding: 30px 26px; position:relative; overflow:hidden;
  }
  .service-card .idx{
    font-family: var(--disp); font-weight:700; font-size:34px; color: var(--sky); line-height:1;
  }
  .service-card h3{ font-size:18px; margin: 14px 0 12px; }
  .service-card ul{ margin:0; padding-left:18px; color: var(--ink-soft); font-size:13.8px; line-height:1.9; }
  .service-card ul li::marker{ color: var(--blue); }

  /* ---------- team dispatch ---------- */
  .cards2{ display:grid; grid-template-columns: 1fr 1fr; gap:24px; }
  .mode-card{
    background: var(--surface); border-radius:18px; border:1px solid var(--border);
    padding: 30px 28px;
  }
  .mode-card .tag{
    display:inline-block; font-family: var(--disp); font-size:11px; letter-spacing:.14em;
    text-transform:uppercase; padding:5px 12px; border-radius:999px; font-weight:700;
    margin-bottom:16px;
  }
  .mode-card.offline .tag{ background: color-mix(in srgb, var(--amber) 18%, transparent); color: #a05a12; }
  .mode-card.online .tag{ background: color-mix(in srgb, var(--blue) 16%, transparent); color: var(--blue); }
  .mode-card h3{ font-size:19px; margin-bottom:16px; }
  .mode-card ul{ margin:0; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:11px; }
  .mode-card ul li{
    font-size:13.6px; color: var(--ink-soft); padding-left:22px; position:relative; line-height:1.7;
  }
  .mode-card ul li::before{
    content:""; position:absolute; left:0; top:8px; width:8px; height:8px; border-radius:2px;
    transform: rotate(45deg); background: var(--blue);
  }
  .mode-card.offline ul li::before{ background: var(--amber); }

  /* ---------- benefits ---------- */
  .benefits{ display:grid; grid-template-columns: repeat(3,1fr); gap:0; border:1px solid var(--border); border-radius:18px; overflow:hidden; }
  .benefit{ padding: 34px 30px; border-left:1px solid var(--border); }
  .benefit:first-child{ border-left:none; }
  .benefit h3{ font-size:16px; margin-bottom:10px; }
  .benefit p{ margin:0; font-size:13.5px; color: var(--muted-solid); line-height:1.85; }
  @media (max-width: 860px){ .benefits{ grid-template-columns:1fr; } .benefit{ border-left:none; border-top:1px solid var(--border);} .benefit:first-child{border-top:none;} }

  /* ---------- strengths ---------- */
  .strength-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items:center; padding-top: 64px; padding-bottom: 64px; }
  .strength-row.rev{ grid-template-columns: 1fr 1fr; }
  .strength-row.rev .strength-photo{ order:2; }
  .strength-photo{ border-radius:18px; overflow:hidden; box-shadow: var(--shadow); aspect-ratio: 5/4; }
  .strength-photo img{ width:100%; height:100%; object-fit:cover; }
  .strength-no{ font-family: var(--disp); color: var(--blue); font-weight:700; font-size:12px; letter-spacing:.2em; }
  .strength-row h3{ font-size:22px; margin: 10px 0 16px; }
  .strength-block{ margin-bottom: 22px; }
  .strength-block:last-child{ margin-bottom:0; }
  .strength-block h4{ font-size:14.5px; margin-bottom:8px; color: var(--ink); }
  .strength-block p, .strength-block ul{ font-size:13.6px; color: var(--muted-solid); margin:0; line-height:1.9; }
  .strength-block ul{ padding-left:18px; }
  .strength-block ul li::marker{ color: var(--blue); }
  .visa-list{ display:flex; flex-direction:column; gap:12px; }
  .visa-item{ display:flex; gap:12px; }
  .visa-item .vt{
    flex:none; width:88px; font-family: var(--disp); font-weight:700; font-size:12px;
    color: var(--blue); padding-top:2px;
  }
  .visa-item .vd{ font-size:13.4px; color: var(--ink-soft); }
  .visa-item .vd b{ color: var(--ink); font-weight:600; }
  hr.split{ border:none; border-top:1px solid var(--border); margin: 6px 0 60px; }

  /* ---------- stats ---------- */
  .stats-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 30px; }
  .stat-card{
    background: var(--surface); border:1px solid var(--border); border-radius:18px; padding:28px;
    text-align:center;
  }
  .stat-card h3{ font-size:14px; margin-bottom:20px; color: var(--ink); }
  .donut{ width:150px; height:150px; margin: 0 auto 16px; position:relative; border-radius:50%; }
  .donut::after{
    content:""; position:absolute; inset:18px; border-radius:50%; background: var(--surface);
  }
  .donut-label{
    position:absolute; inset:18px; display:flex; align-items:center; justify-content:center;
    flex-direction:column; z-index:2;
  }
  .donut-label b{ font-family: var(--disp); font-size:20px; }
  .donut-label span{ font-size:10.5px; color: var(--muted-solid); }
  .legend{ display:flex; flex-direction:column; gap:8px; text-align:left; font-size:12.5px; }
  .legend .li{ display:flex; align-items:center; gap:8px; color: var(--ink-soft); }
  .legend .sw{ width:10px; height:10px; border-radius:3px; flex:none; }
  .legend b{ font-family: var(--disp); color: var(--ink); margin-left:auto; }
  .stat-note{ margin-top:18px; font-size:12.5px; color: var(--muted-solid); line-height:1.8; }
  .stat-note b{ color: var(--blue); font-family: var(--disp); }

  /* ---------- closing ---------- */
  .closing{
    background: var(--bg);
    color: var(--ink); text-align:center; padding: 96px 0;
    position:relative; overflow:hidden;
    border-top: 1px solid var(--border);
  }
  .closing .wrap{ max-width: 660px; position:relative; z-index:2; }
  .closing p{ font-size:15px; color: var(--muted-solid); line-height:2.05; margin:0 0 10px; }
  .closing .btn{ margin-top:30px; }

  /* ---------- footer ---------- */
  footer{ background: var(--bg); padding: 56px 0 40px; }
  .foot-grid{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:36px; border-bottom:1px solid var(--border); }
  .foot-brand .brand__word{ font-size:20px; }
  .foot-brand p{ margin-top:12px; font-size:12.5px; color: var(--muted-solid); max-width:34ch; line-height:1.9; }
  .foot-contact{ display:flex; gap:56px; flex-wrap:wrap; }
  .foot-col h4{ font-family: var(--disp); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color: var(--muted-solid); margin-bottom:12px; }
  .foot-col p, .foot-col a{ font-size:13.5px; margin:0 0 6px; text-decoration:none; color: var(--ink-soft); display:block; }
  .foot-col a:hover{ color: var(--blue); }
  .foot-bottom{ display:flex; justify-content:space-between; padding-top:26px; font-size:11.5px; color: var(--muted-solid); flex-wrap:wrap; gap:10px; }
  .preview-badge{
    font-family: var(--disp); background: var(--amber); color:#241300; padding:3px 10px;
    border-radius:999px; font-size:10px; letter-spacing:.08em; font-weight:700;
  }

  @media (max-width: 900px){
    .hero .wrap{ grid-template-columns:1fr; }
    .hero-collage{ height:280px; }
    .profile{ grid-template-columns:1fr; }
    .cards3, .cards2, .stats-grid{ grid-template-columns:1fr; }
    .strength-row, .strength-row.rev{ grid-template-columns:1fr; }
    .strength-row.rev .strength-photo{ order:0; }
    .hero h1{ font-size:32px; }
    .philosophy blockquote{ font-size:21px; }
  }

  /* ---------- simple page hero (sub-paginas) ---------- */
  .page-hero{
    background:
      radial-gradient(900px 400px at 85% -20%, color-mix(in srgb, var(--blue) 14%, transparent) 0%, transparent 60%),
      var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 36px 0 32px;
  }
  .page-hero .eyebrow{ margin-bottom:8px; }
  .page-hero h1{ font-size:34px; font-weight:700; letter-spacing:.01em; line-height:1.25; margin-bottom:8px; }
  .page-hero p{ color: var(--ink-soft); font-size:14.5px; line-height:1.5; max-width:56ch; margin:0; }

  /* ---------- nav ativo ---------- */
  nav.site-nav a.is-active{ color: var(--blue); }

  /* ---------- jobs ---------- */
  .job-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:24px; }
  .job-card{
    background: var(--surface); border:1px solid var(--border); border-radius:18px;
    padding: 30px 28px; display:flex; flex-direction:column; gap:14px;
  }
  .job-card__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
  .job-card__cat{
    font-family: var(--disp); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
    padding:5px 12px; border-radius:999px; font-weight:700;
    background: color-mix(in srgb, var(--blue) 16%, transparent); color: var(--blue);
  }
  .job-card__new{
    font-family: var(--disp); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
    color:#fff; background: var(--coral); padding:4px 10px; border-radius:999px; font-weight:700;
    flex:none;
  }
  .job-card h3{ font-size:19px; margin:0; }
  .job-card .job-meta{ display:flex; flex-direction:column; gap:8px; }
  .job-meta .mi{ display:flex; gap:10px; font-size:13.5px; color: var(--ink-soft); }
  .job-meta .mi .ml{
    flex:none; width:72px; font-family:var(--disp); font-size:11px; letter-spacing:.08em;
    color:var(--muted-solid); text-transform:uppercase; padding-top:1px;
  }
  .job-card .job-desc{ font-size:13.6px; color: var(--muted-solid); line-height:1.9; margin:0; }
  .job-card .job-pay{ font-family: var(--disp); font-weight:700; font-size:20px; color: var(--navy); }
  .job-card .job-pay span{ font-size:12px; font-weight:400; color: var(--muted-solid); margin-left:4px; }
  .job-card .btn{ align-self:flex-start; margin-top:6px; }
  .jobs-intro{ max-width:680px; }

  /* ---------- contato ---------- */
  .contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .contact-card{
    background: var(--surface); border:1px solid var(--border); border-radius:18px;
    padding: 30px 28px;
  }
  .contact-card h3{ font-size:17px; margin-bottom:16px; }
  .contact-card .ci{ display:flex; gap:12px; font-size:14px; color: var(--ink-soft); margin-bottom:12px; }
  .contact-card .ci:last-child{ margin-bottom:0; }
  .contact-card .ci .cl{
    flex:none; width:120px; font-family:var(--disp); font-size:11px; letter-spacing:.06em;
    color:var(--muted-solid); text-transform:uppercase; padding-top:2px;
  }
  .contact-card a{ text-decoration:none; }
  .contact-card a:hover{ color: var(--blue); }
  .contact-hours{ font-size:13px; color: var(--muted-solid); margin-top:18px; line-height:1.9; }

  @media (max-width: 860px){
    .job-grid, .contact-grid{ grid-template-columns:1fr; }
  }