/* ========== Dark Theme Base / Reset ========== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
:root{
  --bg:#0b1220;            /* ページ背景（限りなく黒に近い） */
  --panel:#0f172a;         /* カード/テーブル背景 */
  --panel-2:#111827;       /* もう少し濃い面 */
  --line:#1f2937;          /* 枠線 */
  --ink:#f1f3f6;           /* 文字色（高コントラスト） */
  --muted:#d1d8e0;         /* 補助テキスト */
  --accent:#3b82f6;        /* 強調・リンク青 */
  --accent-strong:#2563eb; /* ボタンhoverなど */
  --shadow:0 10px 30px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.4);
  --radius:18px;
  --radius-lg:26px;
  --max:1100px;
}
body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  line-height: 1.7;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display:block; }

/* ========== Layout ========== */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.section { padding: 72px 0; }
.section.is-slim { padding: 48px 0; }
.grid { display: grid; gap: 28px; }
@media (min-width: 960px){
  .grid-2 { grid-template-columns: 1.1fr 1fr; }
}

/* ========== Header / Nav ========== */
.skip{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip:focus{ position:static; width:auto; height:auto; padding:8px 12px; background:#000; color:#fff; z-index:9999; }

header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(160%) blur(10px);
  background: rgba(9,12,20,.75);
  border-bottom: 1px solid var(--line);
}
.nav {
  display:flex; align-items:center; justify-content:space-between; height:64px;
}
.brand {
  display:flex; align-items:center; gap:12px; font-weight: 800; color: var(--ink);
}
/* 社名をもっと大きく */
.brand-title{
  display:block; line-height:1.2;
  font-size: clamp(22px, 3.2vw, 34px);
  letter-spacing: .02em;
}

.menu-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border:1px solid var(--line); border-radius:10px;
  background: var(--panel-2); cursor:pointer; color: var(--ink);
}
.menu-btn span{ width:18px; height:2px; background:var(--ink); position:relative; display:block; }
.menu-btn span::before, .menu-btn span::after{
  content:""; position:absolute; left:0; width:18px; height:2px; background:var(--ink); transition:.25s;
}
.menu-btn span::before{ top:-6px; }
.menu-btn span::after{ top:6px; }
.menu-btn.is-open span{ background:transparent; }
.menu-btn.is-open span::before{ top:0; transform:rotate(45deg); }
.menu-btn.is-open span::after{ top:0; transform:rotate(-45deg); }

.nav-links{
  display:none; gap:20px; align-items:center; font-weight:700;
}
.nav-links a{ padding:10px 12px; border-radius:10px; color: var(--ink); }
.nav-links a:hover{ text-decoration: underline; }
@media (min-width: 960px){
  .menu-btn{ display:none; }
  .nav-links{ display:flex; }
}
.drawer{
  display:none; border-top:1px solid var(--line); background:var(--panel-2);
}
.drawer a{ display:block; padding:16px 20px; border-bottom:1px solid var(--line); font-weight:700; color: var(--ink); }
.drawer a:last-child{ border-bottom:none; }
.drawer.is-open{ display:block; }

/* ★ ヘッダーだけフル幅＆左余白を小さめに → 社名をさらに左寄せ */
header .wrap{
  max-width: none;                          /* 幅制限を解除してフル幅に */
  padding-left: clamp(8px, 2vw, 16px);      /* 左余白を小さめに */
  padding-right: clamp(8px, 2vw, 16px);     /* 右はナビ用に同程度 */
}

/* ========== Hero ========== */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(60% 60% at 70% 10%, rgba(17,24,39,.6) 0%, rgba(2,6,23,.6) 45%, rgba(0,0,0,.5) 100%),
    linear-gradient(180deg, rgba(30,58,138,.25), rgba(2,6,23,.2));
  border-bottom:1px solid var(--line);
}
.hero .wrap{ padding-top:48px; padding-bottom:48px; }
@media (min-width: 960px){
  .hero .wrap{ padding-top:72px; padding-bottom:72px; }
}
.hero-title{
  font-size: clamp(28px, 4vw, 42px); font-weight: 800; line-height:1.2; margin: 0 0 12px; color: var(--ink);
}
.hero-lead{ color: var(--muted); font-size: clamp(15px, 2vw, 18px); margin: 0 0 28px; }
.badges{ display:flex; flex-wrap:wrap; gap:12px; margin: 20px 0 30px; }
.badge{
  border:1px solid #172554; padding:8px 12px; border-radius:999px;
  background:#0b1328; font-weight:700; font-size:13px; color:#bfdbfe;
}
.cta{ display:flex; gap:12px; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:12px;
  font-weight:800; border:1px solid var(--line); background: var(--panel-2); box-shadow: var(--shadow); color: var(--ink);
}
.btn.-primary{ background: var(--accent); color:#fff; border-color:transparent; }
.btn.-primary:hover{ background: var(--accent-strong); }
/* ボタン内アイコン */
.btn svg{ width:18px; height:18px; fill: currentColor; }

/* ========== Titles / Cards ========== */
.section-title{ font-size: clamp(22px, 3vw, 28px); font-weight:800; margin:0 0 8px; color: var(--ink); }
.section-lead{ color: var(--muted); margin:0 0 24px; }

.card{ background:var(--panel); border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding:22px; }
.card h3{ margin:0 0 10px; font-size:18px; color: var(--ink); }
.kv{ display:flex; align-items:center; gap:12px; margin:0 0 8px; }
.kv svg{ width:20px; height:20px; fill:#93c5fd; }

/* ========== Company Table ========== */
table.company { width:100%; border-collapse: collapse; background:var(--panel); border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; color: var(--ink); table-layout: fixed; }
.company th, .company td { padding:14px 16px; border-bottom:1px solid var(--line); vertical-align: top; word-break: break-word; }
.company th { width:32%; background:var(--panel-2); text-align:left; color:#cbd5e1; font-weight:700; }
.company tr:last-child th, .company tr:last-child td { border-bottom:none; }

/* ========== Footer ========== */
footer{ border-top:1px solid var(--line); background:var(--panel-2); }
.foot{ display:flex; flex-direction:column; gap:16px; padding:24px 0; color:#94a3b8; font-size:14px; }
.foot a { color: var(--accent); text-decoration: underline; }
.foot-nav{ display:flex; gap:18px; flex-wrap:wrap; }
.copyright{ color:#64748b; }

/* ========== Utilities ========== */
.muted{ color: var(--muted); }
.note{ font-size:13px; color:#9aa7bd; }
.hide-sm{ display:none; }
@media (min-width: 960px){ .hide-sm{ display:inline; } }
.pill{ display:inline-block; padding:.25em .6em; border-radius:999px; background:#0b1328; border:1px solid #172554; color:#bfdbfe; font-size:1.6rem; font-weight:800; }
.divider{ height:1px; background:var(--line); margin:24px 0; }

/* ========== Service Cards with Images ========== */
.cards-2col{ display:grid; gap:28px; }
@media (min-width: 880px){
  .cards-2col{ grid-template-columns: repeat(2, 1fr); }
}
.card-link{
  display:block; border:1px solid var(--line); border-radius: var(--radius); background: var(--panel);
  overflow:hidden; box-shadow: var(--shadow);
  transition: border-color .15s ease;
}
.card-link:hover{ text-decoration:none; border-color: var(--accent); }
/* figure 既定マージンを打ち消し（左・上の余白排除） */
.thumb{ width:100%; aspect-ratio:16/9; background:#0b1328; border-bottom:1px solid var(--line); overflow:hidden; margin:0; }
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.card-body{ padding:18px; }
.card-body h3{ margin:0 0 8px; font-size:18px; color: var(--ink); }
.card-body p{ margin:0; color:var(--muted); }

/* ========== Responsive Tweaks ========== */
/* スマホでCTAが折り返しても崩れないように */
@media (max-width: 600px){
  .section{ padding: 56px 0; }
  .cta .btn{ width:100%; justify-content:center; }
  .brand-title{ font-size: clamp(22px, 6vw, 32px); }
}

/* タブレットで余白・行高を最適化 */
@media (min-width: 600px) and (max-width: 959px){
  .section{ padding:64px 0; }
}

/* ★ スマホ／タブレットでヒーロー＆フッターの左右余白を増やす */
@media (max-width: 959px){
  .hero .wrap,
  footer .wrap{
    padding-left: clamp(20px, 6vw, 32px);
    padding-right: clamp(20px, 6vw, 32px);
  }
}