/* ============================================================
   hikaku.css — 比較ページ専用スタイル
   転職ガイドナビ Phase 2
   ============================================================ */

/* ── ヒーロー ── */
.hikaku-hero {
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
  color: #fff;
  padding: 2.5rem 0;
  text-align: center;
}
.hikaku-hero__badge {
  display: inline-block;
  background: rgba(255,255,255,.2);
  border-radius: 20px;
  padding: 4px 18px;
  font-size: .8rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.hikaku-hero__title {
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.35;
  margin-bottom: .8rem;
}
.hikaku-hero__desc {
  font-size: 1rem;
  opacity: .92;
  max-width: 620px;
  margin: 0 auto 1.6rem;
  line-height: 1.75;
}
.hikaku-summary-bar {
  display: flex;
  justify-content: center;
  gap: 2.4rem;
  flex-wrap: wrap;
}
.hikaku-summary-bar__num  { font-size: 1.6rem; font-weight: 800; }
.hikaku-summary-bar__label { font-size: .78rem; opacity: .85; }

/* ── 比較テーブル ── */
.hikaku-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  margin-bottom: 1.2rem;
}
.hikaku-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: .88rem;
  background: #fff;
}
.hikaku-table thead th {
  background: #1d4ed8;
  color: #fff;
  padding: 12px 14px;
  text-align: center;
  font-weight: 700;
  white-space: nowrap;
}
.hikaku-table thead th:first-child { text-align: left; min-width: 170px; }
.hikaku-table td {
  padding: 13px 14px;
  border-bottom: 1px solid #e5e7eb;
  text-align: center;
  vertical-align: middle;
}
.hikaku-table td:first-child { text-align: left; }
.hikaku-table tr:last-child td { border-bottom: none; }
.hikaku-table tr:nth-child(even) td { background: #f8faff; }
.hikaku-table tr:hover td { background: #eff6ff; transition: background .15s; }

/* サービス名セル */
.hikaku-svc-cell { display: flex; align-items: center; gap: 10px; }
.hikaku-svc-logo {
  width: 38px; height: 38px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: .72rem; font-weight: 700; flex-shrink: 0;
}
.hikaku-svc-name { font-weight: 700; font-size: .9rem; line-height: 1.3; }
.hikaku-svc-name a { color: #1d4ed8; text-decoration: none; }
.hikaku-svc-name a:hover { text-decoration: underline; }
.hikaku-svc-tagline { font-size: .72rem; color: #6b7280; line-height: 1.35; margin-top: 2px; }

/* 編集部スコア表示 */
.hikaku-score {
  display: inline-flex; align-items: baseline; gap: 1px;
  font-size: .95rem; font-weight: 800; color: #1d4ed8;
}
.hikaku-score small { font-size: .65rem; color: #6b7280; font-weight: 400; }

/* 求人数・料金ハイライト */
.hikaku-jobs { font-weight: 800; color: #1d4ed8; }
.hikaku-free { color: #16a34a; font-weight: 700; }

/* 公式サイトボタン */
.hikaku-cta-link {
  display: inline-block;
  padding: 6px 13px;
  background: #1d4ed8;
  color: #fff !important;
  border-radius: 5px;
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.hikaku-cta-link:hover { background: #1e40af; }

/* ── 目的別カード ── */
.scenario-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.1rem;
  margin-top: 1.5rem;
}
.scenario-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 1.25rem;
  transition: box-shadow .2s, transform .2s;
}
.scenario-card:hover {
  box-shadow: 0 6px 16px rgba(29,78,216,.12);
  transform: translateY(-2px);
}
.scenario-card__label {
  font-size: .72rem; font-weight: 700; color: #6b7280;
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: .3rem;
}
.scenario-card__title {
  font-size: .95rem; font-weight: 800; color: #111827;
  margin-bottom: .8rem; line-height: 1.4;
}
.scenario-card__svc {
  display: flex; align-items: center; gap: 9px; margin-bottom: .7rem;
}
.scenario-card__svc-logo {
  width: 34px; height: 34px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: .7rem; font-weight: 700; flex-shrink: 0;
}
.scenario-card__svc-name { font-weight: 700; font-size: .9rem; }
.scenario-card__reason {
  font-size: .83rem; color: #4b5563; line-height: 1.65; margin-bottom: 1rem;
}
.scenario-card__link {
  display: inline-block;
  padding: 7px 16px;
  border: 2px solid #1d4ed8;
  color: #1d4ed8 !important;
  border-radius: 5px;
  font-size: .82rem; font-weight: 700; text-decoration: none;
}
.scenario-card__link:hover {
  background: #1d4ed8; color: #fff !important;
}

/* ── 詳細CTA ── */
.hikaku-ranking-cta {
  text-align: center;
  padding: 2rem 1rem;
}
.hikaku-ranking-cta p {
  color: #4b5563; margin-bottom: 1.4rem; font-size: .95rem;
}

/* ── レスポンシブ ── */
@media (max-width: 640px) {
  .hikaku-hero__title  { font-size: 1.4rem; }
  .hikaku-hero__desc   { font-size: .9rem; }
  .hikaku-table        { min-width: 600px; font-size: .8rem; }
  .scenario-grid       { grid-template-columns: 1fr; }
  .hikaku-summary-bar  { gap: 1.4rem; }
}