/*
  Services一覧(services.html)専用。TOPのAstra由来トークンを継承しつつ、
  FVほど強い演出はしない(発光はHoverのみ、常時はごく控えめ)。
  見出し・本文フォントはFV専用サブセットではなく、全ページ読み込み済みの
  フルセット(--font-heading/--font-main)を使う。
  .tl-head/.tl-eyebrowはcss/top-lower.css・css/about.cssと同名だが、
  services.htmlはどちらも読み込まないため、ここで同等の見た目を独立定義している。
*/

.tl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 40px; }
.tl-head h2 { margin: 0; font-family: var(--font-heading); font-size: clamp(22px,2.1vw,30px); font-weight: 700; letter-spacing: .03em; color: var(--navy); }
.tl-eyebrow { display: flex; align-items: center; gap: 10px; font-family: var(--font-latin); font-size: 11px; letter-spacing: .18em; color: #8693b4; white-space: nowrap; }
.tl-eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--gradient); }
@media (max-width: 760px) { .tl-head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 28px; } }

/* ---------- 導入 ---------- */
.svc-intro { padding-top: 128px; padding-bottom: 40px; }
@media (max-width: 760px) { .svc-intro { padding-top: 96px; padding-bottom: 24px; } }
.svc-intro-inner { max-width: 720px; }
.svc-intro-inner > .tl-eyebrow { margin-bottom: 24px; }
.svc-intro h1 { margin: 0 0 20px; font-family: var(--font-heading); font-size: clamp(28px,3.2vw,40px); font-weight: 700; line-height: 1.5; color: var(--navy); }
.svc-intro p { margin: 0; color: var(--secondary-text); line-height: 1.9; font-size: 16px; }

/* ---------- カード群 ---------- */
.svc-section { padding-top: 40px; padding-bottom: 96px; }
@media (max-width: 760px) { .svc-section { padding-top: 24px; padding-bottom: 56px; } }

.svc-grid { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: clamp(20px,2.4vw,28px); }
.svc-card {
  position: relative; border: 1px solid var(--op-border); border-radius: var(--radius-panel);
  background: linear-gradient(120deg, rgba(255,255,255,.85), rgba(255,255,255,.6));
  overflow: hidden; isolation: isolate;
  transition: box-shadow var(--duration-hover) var(--easing), border-color var(--duration-hover);
}
.svc-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: radial-gradient(ellipse 80% 80% at 50% 0%, rgba(149,145,254,.18), transparent 70%);
  transition: opacity var(--duration-hover) var(--easing);
}
.svc-card:hover { border-color: var(--border-hover); box-shadow: 0 22px 50px -30px rgba(46,69,123,.25); }
.svc-card:hover::after { opacity: 1; }
.svc-card-inner { position: relative; padding: clamp(28px,3vw,40px); display: flex; flex-direction: column; height: 100%; }
.svc-photo { position: relative; border-radius: 14px; overflow: hidden; margin-bottom: 24px; isolation: isolate; }
.svc-photo img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.svc-photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); pointer-events: none; }
.svc-card h2, .svc-card h3 { margin: 0 0 10px; font-family: var(--font-heading); font-weight: 700; color: var(--navy); }
.svc-card .svc-lead { margin: 0 0 16px; color: var(--secondary-text); line-height: 1.8; }
.svc-link { margin-top: auto; font-family: var(--font-latin); font-size: 13px; color: var(--accent-blue); display: inline-flex; align-items: center; gap: 8px; }
.svc-link span { transition: transform var(--duration-hover) var(--easing); }
.svc-card:hover .svc-link span { transform: translateX(4px); }

/* 研修カード: 「研修」1サービスの中に個人向け/法人向けの2対象を並べる。
   文量が多く2列の小カードに入らない(隣の人材紹介カードと同じ高さに収まらない)ため、グリッドの次の行に全幅で置く */
.svc-card--wide { grid-column: 1 / -1; }
.svc-card--wide .svc-card-inner { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: clamp(28px,4vw,56px); align-items: center; }
.svc-card--wide .svc-photo { margin-bottom: 0; }
.svc-card--wide .svc-photo img { aspect-ratio: 4/3; }
.svc-card--wide h3 { font-size: clamp(22px,2.2vw,28px); }
.svc-card--wide .svc-lead { font-size: clamp(15px,1.3vw,17px); }
.svc-sub-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid var(--op-border); }
.svc-sub { padding: 20px 24px 0 0; display: flex; flex-direction: column; }
.svc-sub + .svc-sub { padding: 20px 0 0 24px; border-left: 1px solid var(--op-border); }
.svc-card .svc-sub h4 { margin: 0 0 4px; font-family: var(--font-heading); font-size: 16px; font-weight: 700; color: var(--navy); }
.svc-sub-copy { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--accent-blue); line-height: 1.7; }
.svc-sub-text { margin: 0 0 14px; font-size: 13px; line-height: 1.8; color: var(--secondary-text); }
.svc-sub .svc-link { margin-top: auto; }
@media (max-width: 900px) {
  .svc-card--wide .svc-card-inner { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 600px) {
  .svc-sub-list { grid-template-columns: minmax(0,1fr); }
  .svc-sub, .svc-sub + .svc-sub { padding: 18px 0 0; border-left: none; }
  .svc-sub + .svc-sub { margin-top: 18px; border-top: 1px solid var(--op-border); }
}

/* ---------- 人材紹介(プライマリ) ---------- */
.svc-primary .svc-photo { margin-bottom: 28px; }
.svc-primary .svc-photo img { aspect-ratio: 4/3; }
.svc-primary h2 { font-size: clamp(24px,2.4vw,32px); }
.svc-strength { margin: 4px 0 22px; padding: 16px 20px; border-left: 2px solid var(--accent-blue); border-radius: 0 12px 12px 0; background: var(--surface); }
.svc-strength-title { margin: 0 0 6px; font-family: var(--font-heading); font-size: 16px; font-weight: 700; line-height: 1.6; color: var(--navy); }
.svc-strength-em { color: var(--accent-blue); }
.svc-strength-text { margin: 0; font-size: 13px; line-height: 1.8; color: var(--secondary-text); }
.svc-primary .svc-lead { font-size: clamp(15px,1.3vw,17px); }
.svc-supplement { margin: 0 0 4px; font-size: 13px; line-height: 1.8; color: var(--secondary-text); }

.svc-track-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin: 4px 0 28px; padding-top: 20px; border-top: 1px solid var(--op-border); }
.svc-track-label { margin: 0 0 6px; font-family: var(--font-heading); font-size: 15px; font-weight: 700; color: var(--navy); }
.svc-track-tag { display: block; font-family: var(--font-latin); font-size: 10px; letter-spacing: .1em; color: #8693b4; margin-bottom: 4px; font-weight: 400; }
.svc-track-desc { margin: 0; font-size: 13px; line-height: 1.7; color: var(--secondary-text); }

/* ---------- Webコンテンツ制作 / 研修(セカンダリ) ---------- */
.svc-secondary-grid .svc-photo img { aspect-ratio: 6/5; }
.svc-secondary-grid .svc-supplement { margin: 0 0 20px; }
.svc-item-list { list-style: none; margin: 0 0 28px; padding: 0; border-top: 1px solid var(--op-border); }
.svc-item { padding: 16px 0; border-bottom: 1px solid var(--op-border); }
.svc-item-title { margin: 0 0 4px; font-family: var(--font-heading); font-size: 15px; font-weight: 700; color: var(--navy); }
.svc-item-text { margin: 0; font-size: 13px; line-height: 1.8; color: var(--secondary-text); }
.svc-secondary-grid { display: grid; grid-template-rows: minmax(0,1fr); gap: clamp(20px,2.4vw,28px); }
.svc-secondary-grid .svc-card h3 { font-size: clamp(18px,1.6vw,22px); }

@media (max-width: 900px) {
  .svc-grid { grid-template-columns: 1fr; }
  .svc-primary .svc-photo img { aspect-ratio: 16/10; }
}
@media (max-width: 480px) {
  .svc-track-row { grid-template-columns: 1fr; gap: 14px; }
}