:root {
  --navy: #061d61;
  --blue: #0c3197;
  --pale: #f2f6fc;
  --ink: #0d1d43;
  --muted: #59657a;
  --line: #dfe7f2;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; }

.site-header {
  height: 84px;
  padding: 0 max(28px, calc((100vw - 1280px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,.97);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 1px 12px rgba(6,29,97,.08);
}
.brand { width: 270px; display: flex; flex-direction: column; line-height: 1; }
.brand-en { color: #111; font: 800 italic 13px/1 Arial, sans-serif; letter-spacing: .02em; }
.brand strong {
  color: #fff;
  margin-top: 6px;
  background: var(--navy);
  padding: 6px 12px;
  font-size: 18px;
  letter-spacing: .12em;
  position: relative;
}
.brand strong::after {
  content: "";
  position: absolute;
  right: -9px; top: 0;
  width: 5px; height: 100%;
  background: #fff;
  border-right: 3px solid var(--blue);
  transform: skew(-25deg);
}
.nav { display: flex; align-items: center; gap: clamp(14px,2vw,32px); font-weight: 700; font-size: 13px; }
.nav a:not(.nav-contact) { position: relative; padding: 31px 0; }
.nav a:not(.nav-contact)::after {
  content:""; position:absolute; bottom:22px; left:0; width:0; height:2px; background:var(--blue); transition:.25s;
}
.nav a:hover::after { width:100%; }
.nav-contact { color:#fff; background:var(--navy); padding:15px 20px; }
.menu-button { display:none; border:0; background:none; padding:10px; }
.menu-button span { display:block; width:25px; height:2px; margin:5px; background:var(--navy); }

.hero { min-height: 600px; position: relative; overflow: hidden; display:flex; align-items:center; }
.hero > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.88) 27%,rgba(255,255,255,.12) 62%,rgba(6,29,97,.08)); }
.hero-content { position:relative; z-index:2; width:min(1280px,92%); margin:auto; padding:65px 0; }
.eyebrow { color:var(--blue); font:800 11px/1.3 Arial,sans-serif; letter-spacing:.14em; margin:0 0 10px; }
.eyebrow.light { color:#9ebcff; }
.hero h1 { font-size:clamp(46px,5vw,74px); line-height:1.28; letter-spacing:.06em; margin:0 0 16px; color:var(--navy); }
.hero-copy { font-weight:700; font-size:16px; line-height:2; margin:0 0 28px; }
.hero-points { display:flex; gap:38px; margin:0 0 27px; color:var(--blue); }
.hero-points span { display:grid; grid-template-columns:30px auto; align-items:center; gap:6px; font-size:27px; }
.hero-points b { font-size:12px; white-space:nowrap; color:var(--ink); }
.button {
  display:inline-flex; align-items:center; justify-content:center; gap:30px;
  padding:16px 24px; min-width:240px; background:var(--navy); color:#fff;
  font-size:13px; font-weight:800; border:0; cursor:pointer; transition:.25s;
}
.button:hover { background:#1345bd; transform:translateY(-2px); }
.button i { font-style:normal; margin-left:auto; }
.button.small { margin-top:22px; min-width:210px; padding:14px 18px; }

.section {
  padding:70px max(24px, calc((100vw - 1280px) / 2));
  display:grid; grid-template-columns:270px 1fr; gap:50px;
}
.section.soft { background:var(--pale); }
.section-lead h2, .contact h2 { font-size:28px; margin:0 0 18px; letter-spacing:.06em; color:var(--navy); }
.section-lead > p:last-of-type { color:var(--muted); font-size:14px; line-height:2; margin:0; }
.card-grid { display:grid; gap:14px; }
.service-grid { grid-template-columns:repeat(4,1fr); }
.service-card { background:#fff; border:1px solid var(--line); box-shadow:0 7px 25px rgba(7,35,100,.06); }
.service-card img { width:100%; height:150px; object-fit:cover; }
.service-card div { padding:19px 17px 22px; }
.service-card h3, .safety-card h3 { color:var(--navy); font-size:15px; margin:0 0 12px; }
.service-card p, .safety-card p { font-size:12px; color:var(--muted); line-height:1.9; margin:0; }

.safety-grid { grid-template-columns:repeat(4,1fr); }
.safety-card { background:#fff; text-align:center; padding:24px 18px; border-bottom:3px solid var(--blue); }
.circle-icon {
  width:45px; height:45px; display:grid; place-items:center; margin:0 auto 13px;
  border-radius:50%; background:var(--navy); color:#fff; font-weight:900; font-size:19px;
}

.strengths {
  padding:42px max(24px,calc((100vw - 1280px) / 2));
  display:grid; grid-template-columns:1.2fr repeat(4,1fr); gap:0;
  background:linear-gradient(120deg,#06164d,#0b359c); color:#fff;
}
.strength-heading { padding-right:30px; }
.strength-heading h2 { font-size:26px; margin:0 0 13px; }
.strength-heading p:last-child, .strengths article p { font-size:12px; line-height:1.8; opacity:.8; }
.strengths article { border-left:1px solid rgba(255,255,255,.2); text-align:center; padding:5px 25px; }
.strengths article > span { font-size:34px; }
.strengths article h3 { font-size:15px; margin:10px 0 6px; }

.works-section { align-items:start; }
.works-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.works-grid figure { margin:0; }
.works-grid img { width:100%; height:145px; object-fit:cover; }
.works-grid figcaption { color:var(--navy); font-weight:800; font-size:11px; text-align:center; padding:10px 3px; line-height:1.6; }
.works-grid small { display:block; color:var(--muted); font-weight:500; }

.flow-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
.flow-grid article { background:#fff; min-height:210px; padding:14px; position:relative; border:1px solid var(--line); }
.flow-grid article:not(:last-child)::after { content:"›"; position:absolute; right:-9px; top:45%; z-index:2; font-size:24px; color:var(--navy); }
.flow-grid article > span { color:var(--blue); font:bold 10px Arial; letter-spacing:.12em; }
.flow-icon { color:var(--blue); font-size:24px; text-align:center; margin:13px 0; }
.flow-grid h3 { font-size:12px; text-align:center; margin:0 0 10px; }
.flow-grid p { color:var(--muted); font-size:10px; line-height:1.8; margin:0; }

.about-section { grid-template-columns:250px 1fr 1fr; align-items:center; }
.company-table { margin:0; }
.company-table div { display:grid; grid-template-columns:100px 1fr; border-bottom:1px solid var(--line); padding:8px 5px; font-size:12px; }
.company-table dt { font-weight:800; }
.company-table dd { margin:0; color:var(--muted); }
.about-image { width:100%; height:260px; object-fit:cover; }

.recruit { min-height:420px; position:relative; display:flex; align-items:center; justify-content:flex-end; overflow:hidden; }
.recruit > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 38%; }
.recruit-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,25,81,.18),rgba(6,29,97,.85) 58%,rgba(6,29,97,.96)); }
.recruit-copy { position:relative; z-index:2; color:#fff; width:50%; padding:60px max(35px,calc((100vw - 1280px) / 2)); padding-left:60px; }
.recruit-copy h2 { font-size:34px; letter-spacing:.05em; margin:0 0 18px; }
.recruit-copy p { font-size:14px; line-height:2; margin-bottom:28px; }
.button.white { background:#fff; color:var(--navy); }

.contact {
  padding:60px max(24px,calc((100vw - 1280px) / 2));
  display:grid; grid-template-columns:1fr 1.4fr; gap:65px; color:#fff;
  background:linear-gradient(120deg,#061446,#0a369d);
}
.contact h2 { color:#fff; font-size:30px; }
.contact-heading > p { font-size:13px; line-height:1.8; opacity:.8; }
.phone { display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:10px; background:#fff; color:var(--navy); padding:15px 18px; margin-top:25px; max-width:400px; font-size:20px; }
.phone b { font-size:27px; letter-spacing:.05em; }
.phone small { grid-column:2; font-size:10px; }
.contact-email {
  display:block;
  width:fit-content;
  margin-top:14px;
  font-size:13px;
  font-weight:700;
  border-bottom:1px solid rgba(255,255,255,.55);
  overflow-wrap:anywhere;
}
.contact-form { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.contact-form label { display:flex; flex-direction:column; gap:7px; font-weight:700; font-size:12px; }
.contact-form label:nth-child(3), .contact-form .submit, .form-message { grid-column:1/-1; }
.contact-form input, .contact-form textarea { width:100%; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.98); padding:12px; color:var(--ink); outline:none; }
.contact-form input:focus, .contact-form textarea:focus { box-shadow:0 0 0 3px #7ea8ff; }
.contact-form .submit { background:#fff; color:var(--navy); width:100%; }
.form-message { margin:0; padding:10px; background:#eaf4ff; color:var(--navy); text-align:center; font-size:13px; }

footer {
  max-width:1280px; margin:auto; padding:32px 24px 24px;
  display:grid; grid-template-columns:280px 1fr; align-items:center; gap:30px;
}
footer nav { display:flex; gap:22px; justify-content:flex-end; font-size:11px; font-weight:700; }
footer > small { grid-column:1/-1; text-align:center; color:#8a93a2; font-size:10px; }

@media (max-width: 1050px) {
  .site-header { height:70px; padding:0 20px; }
  .brand { width:235px; }
  .brand strong { font-size:15px; }
  .menu-button { display:block; }
  .nav {
    display:none; position:absolute; top:70px; left:0; right:0; padding:16px 24px 24px;
    background:#fff; flex-direction:column; align-items:stretch; gap:0; box-shadow:0 12px 20px rgba(6,29,97,.12);
  }
  .nav.open { display:flex; }
  .nav a:not(.nav-contact) { padding:14px 2px; border-bottom:1px solid var(--line); }
  .nav-contact { text-align:center; margin-top:12px; }
  .hero { min-height:560px; }
  .service-section, .section { grid-template-columns:1fr; gap:30px; }
  .section-lead { max-width:640px; }
  .service-grid, .safety-grid { grid-template-columns:repeat(2,1fr); }
  .strengths { grid-template-columns:1fr 1fr; }
  .strength-heading { grid-column:1/-1; padding:0 0 25px; }
  .strengths article { border-left:0; border-top:1px solid rgba(255,255,255,.2); padding:24px; }
  .works-grid { grid-template-columns:repeat(3,1fr); }
  .flow-grid { grid-template-columns:repeat(3,1fr); }
  .about-section { grid-template-columns:1fr 1fr; }
  .about-section .section-lead { grid-column:1/-1; }
  .contact { grid-template-columns:1fr; }
  footer { grid-template-columns:1fr; }
  footer nav { justify-content:flex-start; flex-wrap:wrap; }
}

@media (max-width: 640px) {
  .site-header { height:64px; }
  .nav { top:64px; }
  .brand { width:200px; }
  .brand-en { font-size:10px; }
  .brand strong { margin-top:4px; padding:5px 8px; font-size:13px; }
  .hero { min-height:620px; align-items:flex-start; }
  .hero > img { object-position:62% center; }
  .hero-shade { background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.9) 60%,rgba(255,255,255,.2)); }
  .hero-content { padding-top:55px; }
  .hero h1 { font-size:43px; }
  .hero-copy { font-size:13px; }
  .hero-points { gap:12px; }
  .hero-points span { grid-template-columns:1fr; text-align:center; font-size:24px; }
  .hero-points b { font-size:9px; }
  .section { padding:50px 20px; }
  .service-grid, .safety-grid { grid-template-columns:1fr; }
  .service-card { display:grid; grid-template-columns:42% 58%; }
  .service-card img { height:100%; min-height:175px; }
  .strengths { grid-template-columns:1fr; padding:45px 20px; }
  .strength-heading { grid-column:auto; }
  .works-grid { grid-template-columns:repeat(2,1fr); }
  .works-grid img { height:115px; }
  .flow-grid { grid-template-columns:repeat(2,1fr); }
  .flow-grid article:not(:last-child)::after { display:none; }
  .about-section { grid-template-columns:1fr; }
  .about-section .section-lead { grid-column:auto; }
  .company-table div { grid-template-columns:80px 1fr; }
  .recruit { min-height:520px; align-items:flex-end; }
  .recruit > img { object-position:43% center; }
  .recruit-overlay { background:linear-gradient(0deg,rgba(6,29,97,.98),rgba(6,29,97,.42)); }
  .recruit-copy { width:100%; padding:45px 20px; }
  .recruit-copy h2 { font-size:27px; }
  .contact { padding:50px 20px; gap:35px; }
  .phone b { font-size:22px; }
  .contact-form { grid-template-columns:1fr; }
  .contact-form label, .contact-form label:nth-child(3), .contact-form .submit, .form-message { grid-column:1; }
  footer { padding:30px 20px; }
  footer nav { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  * { transition:none !important; }
}