/* 基本レイアウト */
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Noto Sans JP", Meiryo, sans-serif;
  color: #222;
  background: #f7f9fc;
  line-height: 1.6;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: min(92%, 1200px);
  margin: 0 auto;
}

/* ヘッダー */
.site-header {
  background: #004c8c;
  color: #fff;
}
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
}
.logo-text {
  font-size: 1.4rem;
  font-weight: 700;
}
.site-nav {
  display: flex;
  gap: 1.2rem;
  font-size: 0.95rem;
}
.site-nav a {
  color: #fff;
}
.btn-primary.small {
  background: #fff;
  color: #004c8c;
  padding: 0.4rem 1rem;
  border-radius: 4px;
  font-weight: 600;
}
.btn-primary.small:hover {
  background: #e9eef2;
}

/* メインコンテンツ */
.section {
  padding: 3rem 0;
  background: #fff;
  border-radius: 8px;
  margin-top: 2rem;
}
.section-title {
  font-size: 2rem;
  color: #004c8c;
  margin-bottom: 1.5rem;
  border-bottom: 3px solid #004c8c;
  padding-bottom: 0.5rem;
}
.mt-24 {
  margin-top: 1.5rem;
}
p {
  margin: 0.5rem 0 1rem;
}

/* フッター */
.site-footer {
  background: #e9eef2;
  padding: 2rem 0 1rem;
  margin-top: 3rem;
}
.footer-inner {
  text-align: center;
}
.footer-links {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-links a {
  color: #004c8c;
  font-weight: 500;
}
.copy {
  font-size: 0.85rem;
  color: #666;
}

/* レスポンシブ */
@media (max-width: 768px) {
  .header-inner {
    flex-direction: column;
    gap: 0.6rem;
    text-align: center;
  }
  .site-nav {
    flex-wrap: wrap;
    justify-content: center;
  }
}
/* ===== HERO: services ===== */
.hero {
  background:
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.25)),
    url("images/services-hero.jpg") center/cover no-repeat, 
    #e9eef2; /* 画像が無い時の代替色 */
  color:#fff;
}
.hero .hero-inner { padding: 3.2rem 0 2.6rem; }
.hero h1 { font-size: 2.2rem; margin: .2rem 0 .6rem; }
.hero .lead { margin: 0 0 1rem; font-size: 1.05rem; opacity: .95; }

/* パンくず */
.breadcrumb { font-size:.9rem; opacity:.9; margin-bottom:.6rem; }
.breadcrumb a { color:#fff; text-decoration:underline; text-underline-offset:3px; }
.breadcrumb span { margin:0 .4rem; }

/* バッジ／CTA */
.hero-badges { display:flex; gap:.6rem; flex-wrap:wrap; margin:.6rem 0 1.0rem; }
.hero-badges span{
  display:inline-block; padding:.35rem .6rem; border-radius:999px;
  background:rgba(255,255,255,.18); backdrop-filter: blur(2px); font-weight:700;
}
.hero-ctas { display:flex; gap:.8rem; flex-wrap:wrap; }
.btn-outline{
  display:inline-block; padding:.8rem 1.6rem; border-radius:8px;
  background:transparent; color:#fff; border:2px solid #fff; font-weight:800;
}
.btn-outline:hover{ background:rgba(255,255,255,.15); }

/* HERO内のみスマホで折返し */
@media (max-width: 768px){
  .hero .hero-inner { padding: 2.4rem 0 2rem; text-align:center; }
  .sp{ display:inline; }
}

/* ===== ページ内目次 ===== */
.section-index { margin-top: 1rem; }
.index-grid{
  display:grid; gap: .8rem;
  grid-template-columns: repeat(4, 1fr);
}
.index-card{
  display:block; text-align:center; padding:1rem; border-radius:10px;
  background:#fff; border:1px solid #e0e4e8; font-weight:800; color:#004c8c;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.index-card:hover{ background:#f7f9fc; }

/* モバイル最適化 */
@media (max-width: 900px){ .index-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .index-grid{ grid-template-columns: 1fr; } }