:root {
  --bg:#f6f8fb;
  --white:#fff;
  --text:#1d2733;
  --sub:#5b6877;
  --navy:#172a4a;
  --blue:#1f6fb2;
  --blue-dark:#155387;
  --accent:#3a9bdc;
  --border:#dbe3ec;
  --shadow:0 12px 30px rgba(23,42,74,.09);
  --shadow2:0 18px 45px rgba(23,42,74,.12);
  --radius:22px;
  --max:1160px;
}

* { box-sizing:border-box; }

html {
  font-size:20px;
  scroll-behavior:smooth;
}

body {
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic",Meiryo,sans-serif;
  font-size:1.05rem;
  line-height:1.82;
  letter-spacing:.02em;
  color:var(--text);
  background:var(--bg);
}

a { color:inherit; text-decoration:none; }
img { max-width:100%; height:auto; vertical-align:middle; }

.site-header {
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(219,227,236,.8);
}

.header-inner {
  width:min(var(--max),calc(100% - 32px));
  min-height:78px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.brand {
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:700;
  color:var(--navy);
  white-space:nowrap;
}

.brand-logo { width:120px; }
.brand-name { font-size:.95rem; }

.header-nav {
  display:flex;
  align-items:center;
  gap:22px;
  font-size:.95rem;
  color:var(--sub);
}

.header-nav a {
  transition:color .2s ease;
}

.header-nav a:hover { color:var(--blue); }

.header-nav a[aria-current="page"] {
  color:var(--navy);
  font-weight:700;
}

.header-contact {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 18px;
  border-radius:999px;
  background:var(--blue);
  color:#fff !important;
  font-weight:700;
  box-shadow:0 8px 18px rgba(31,111,178,.22);
}

.page-hero {
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 18%,rgba(58,155,220,.2),transparent 32%),
    radial-gradient(circle at 86% 24%,rgba(31,111,178,.14),transparent 30%),
    linear-gradient(135deg,#fff 0%,#eef5fb 56%,#e8f0f8 100%);
  border-bottom:1px solid var(--border);
}

.page-hero:before {
  content:"";
  position:absolute;
  right:-140px;
  bottom:-230px;
  width:520px;
  height:520px;
  border-radius:50%;
  background:rgba(23,42,74,.06);
}

.page-hero-inner {
  position:relative;
  width:min(var(--max),calc(100% - 32px));
  margin:0 auto;
  padding:74px 0 68px;
}

.breadcrumb {
  margin:0 0 18px;
  color:var(--blue-dark);
  font-size:.9rem;
  font-weight:800;
  letter-spacing:.08em;
}

.page-title {
  margin:0;
  color:var(--navy);
  font-size:clamp(2.35rem,4.2vw,3.55rem);
  line-height:1.25;
}

.page-lead {
  max-width:940px;
  margin:22px 0 0;
  color:#344253;
  font-size:1.04rem;
  line-height:1.8;
}

.section {
  padding:70px 0;
}

.section.alt {
  background:var(--white);
}

.section-inner {
  width:min(var(--max),calc(100% - 32px));
  margin:0 auto;
}

.section-head {
  margin-bottom:32px;
}

.section-label {
  margin:0 0 8px;
  color:var(--blue);
  font-size:.9rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.section-title {
  margin:0;
  color:var(--navy);
  font-size:clamp(1.65rem,2.6vw,2.25rem);
  line-height:1.38;
}

.section-desc {
  max-width:900px;
  margin:14px 0 0;
  color:var(--sub);
  font-size:1rem;
  line-height:1.75;
}

.cta {
  padding:62px 0;
  background:
    radial-gradient(circle at 20% 20%,rgba(58,155,220,.25),transparent 28%),
    linear-gradient(135deg,#172a4a,#1f6fb2);
  color:#fff;
}

.cta-inner {
  width:min(var(--max),calc(100% - 32px));
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr auto;
  gap:34px;
  align-items:center;
}

.cta h2 {
  margin:0;
  font-size:clamp(1.55rem,2.4vw,2.05rem);
  line-height:1.45;
}

.cta p {
  margin:10px 0 0;
  color:rgba(255,255,255,.86);
  font-size:1rem;
  line-height:1.75;
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:13px 24px;
  border-radius:999px;
  background:#fff;
  color:var(--blue-dark);
  font-size:1rem;
  font-weight:700;
  box-shadow:0 8px 18px rgba(23,42,74,.08);
}

.site-footer {
  padding:34px 0;
  background:#0f1d32;
  color:rgba(255,255,255,.78);
}

.footer-inner {
  width:min(var(--max),calc(100% - 32px));
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  font-size:.9rem;
  line-height:1.65;
}

.footer-company {
  display:flex;
  align-items:center;
  gap:12px;
  color:#fff;
  font-weight:700;
}

.footer-logo {
  width:100px;
  background:#fff;
  padding:4px 8px;
  border-radius:8px;
}

.footer-meta {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:12px;
}

.footer-nav {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px 18px;
  font-size:.88rem;
  color:rgba(255,255,255,.82);
}

.footer-nav a:hover { color:#fff; }

@media (max-width:920px) {
  .header-nav { display:none; }
  .cta-inner { grid-template-columns:1fr; }
  .cta .btn { justify-self:start; }
}

@media (max-width:680px) {
  html { font-size:19px; }
  body { font-size:1.02rem; line-height:1.75; }
  .header-inner { min-height:68px; }
  .brand-logo { width:104px; }
  .brand-name { display:none; }
  .page-hero-inner { padding:46px 0 42px; }
  .page-title { font-size:clamp(1.9rem,8vw,2.45rem); }
  .page-lead { font-size:.98rem; }
  .section { padding:54px 0; }
  .section-head { margin-bottom:26px; }
  .section-title { font-size:clamp(1.45rem,6.4vw,2rem); }
  .footer-inner { flex-direction:column; align-items:flex-start; }
  .footer-meta,
  .footer-nav { align-items:flex-start; justify-content:flex-start; }
}