/* ============================================================
   TripClear Services  —  サービス一覧ページ
   前提: ../styles.css（body-home のダークテーマ）を先に読み込む。
   トーン: ヒーロー=ダーク → 一覧=ライト(#f5f5f6) → CTA=ブランドグラデ
   ※ デザインFB原則:
     ①テキスト量の多い一覧面はライト背景に切り替えて可読性と区切りを作る
     ②角丸・見出しフォント・グラデーションは既存トークンを再利用する
   ============================================================ */

.body-services {
  /* サイト共通のブランドグラデーション（styles.css / sns.css と同値） */
  --tc-grad: linear-gradient(135deg, #a06bff 0%, #7b6bff 45%, #38d0e6 100%);
  --svc-light-bg: #f5f5f6;
  --svc-card-bg: #ffffff;
  --svc-ink: #14172e;
  --svc-ink-2: #4a4a6a;
  --svc-ink-3: #6b7086;
  --svc-line: rgba(20, 23, 46, 0.12);
  --svc-line-strong: rgba(20, 23, 46, 0.26);
}

/* ---------- page hero (dark) ---------- */
.svc-hero {
  border-bottom: none;
  padding-bottom: 64px;
}

.svc-hero-en {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--home-ink-3);
  margin: -8px 0 18px;
}

/* ---------- list section (light) ---------- */
.svc-list {
  background: var(--svc-light-bg);
  color: var(--svc-ink);
  border-top: 1px solid var(--svc-line);
  border-bottom: 1px solid var(--svc-line);
  padding: 88px 64px 104px;
}

.svc-list-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 72px;
}

/* ---------- group label ---------- */
.svc-group-label {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 26px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--svc-ink-3);
}

.svc-group-label i {
  flex: 1;
  height: 1px;
  background: var(--svc-line);
}

/* ---------- grid : 2 columns × 3 rows ---------- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

/* ---------- card ---------- */
.svc-card {
  display: flex;
  flex-direction: column;
  background: var(--svc-card-bg);
  border: 1px solid var(--svc-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform 0.5s var(--ease-out-expo),
    border-color 0.4s ease,
    box-shadow 0.5s var(--ease-out-expo);
}

a.svc-card:hover {
  transform: translateY(-6px);
  border-color: var(--svc-line-strong);
  box-shadow: 0 24px 60px rgba(20, 23, 46, 0.14);
}

/* リンクを持たないカード（UGC研究所）。押せそうに見せない */
.svc-card--static {
  cursor: default;
}

/* ---------- card visual ---------- */
/* 画像はカード幅いっぱいに敷く。素材は 3:2 に揃えてあるので cover でも欠けない */
.svc-card-visual {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-bottom: 1px solid var(--svc-line);
  background: #eef0f6;
}

.svc-card-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out-expo);
}

a.svc-card:hover .svc-card-visual img {
  transform: scale(1.03);
}

/* ---------- card body ---------- */
.svc-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 28px 28px;
}

.svc-card-eyebrow {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--svc-ink-3);
  margin: 0;
}

.svc-card-title {
  font-family: var(--font-heading);
  font-size: clamp(20px, 2.1vw, 25px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.01em;
  font-feature-settings: 'palt' 1;
  color: var(--svc-ink);
  margin: 0;
}

.svc-card-desc {
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--svc-ink-2);
  margin: 0 0 4px;
}

/* ---------- CTA inside the card（押せるサインを明示） ---------- */
.svc-card-more {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--tc-grad);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
  box-shadow: 0 10px 26px rgba(123, 107, 255, 0.3);
  transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
}

a.svc-card:hover .svc-card-more {
  transform: translateX(3px);
  box-shadow: 0 14px 32px rgba(123, 107, 255, 0.38);
}

.svc-ext {
  display: inline-flex;
  width: 14px;
  height: 14px;
}

.svc-ext svg {
  width: 100%;
  height: 100%;
}


/* ---------- CTA section ---------- */
.svc-cta {
  padding: 96px 64px 104px;
  text-align: center;
}

.svc-cta-inner {
  max-width: 780px;
  margin: 0 auto;
  padding: 56px 48px 60px;
  border-radius: var(--radius-xl);
  background: var(--tc-grad);
  box-shadow: 0 28px 70px rgba(123, 107, 255, 0.32);
}

.svc-cta-title {
  font-family: var(--font-heading);
  font-size: clamp(22px, 3.2vw, 34px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.01em;
  font-feature-settings: 'palt' 1;
  color: #fff;
  margin: 0 0 14px;
}

.svc-cta-desc {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.86);
  margin: 0 0 28px;
}

.svc-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  padding: 16px 40px;
  border-radius: 999px;
  background: #fff;
  color: #2b2352;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  white-space: nowrap;
  transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
}

.svc-cta-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(20, 23, 46, 0.26);
}

/* 見出しが中途半端な位置で折り返さないよう、改行位置を明示する */
.svc-cta-br { display: block; }

/* ============================================================
   RESPONSIVE
   ※ FB原則④: スマホはPCの縮小ではなく専用の詰め方にする
   ============================================================ */
@media (max-width: 1000px) {
  .svc-list { padding: 72px 40px 88px; }
  .svc-grid { gap: 24px; }
  .svc-cta { padding: 80px 40px 88px; }
}

@media (max-width: 760px) {
  .svc-hero { padding-bottom: 44px; }
  .svc-hero-en { font-size: 12px; letter-spacing: 0.14em; }

  .svc-list {
    padding: 56px 20px 68px;
  }
  .svc-list-inner { gap: 48px; }

  /* モバイルは1カラム */
  .svc-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .svc-group-label {
    gap: 14px;
    margin-bottom: 18px;
    font-size: 12px;
  }

  .svc-card { border-radius: var(--radius-md); }

  .svc-card-visual { aspect-ratio: 3 / 2; }

  .svc-card-body { padding: 20px 20px 22px; gap: 8px; }
  .svc-card-title { font-size: 19px; }
  .svc-card-desc { font-size: 14px; line-height: 1.85; }
  .svc-card-more { padding: 10px 18px; font-size: 12.5px; }

  .svc-cta { padding: 64px 20px 72px; }
  .svc-cta-inner {
    padding: 40px 22px 44px;
    border-radius: var(--radius-lg);
  }
  .svc-cta-title { font-size: 21px; line-height: 1.5; }
  .svc-cta-br { display: block; }
  .svc-cta-desc { font-size: 13.5px; }
  .svc-cta-btn {
    width: 100%;
    min-width: 0;
    padding: 15px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .svc-card,
  .svc-card-visual img,
  .svc-card-more,
  .svc-cta-btn {
    transition: none;
  }
}