/* ==========================================================================
   c-card-service — Figma: card-service-management / card-service-consulting
   サービス種別はモディファイア（--management / --consulting）で箇条書きの色を切り替える
   PC: 内側 32px・アイコン 80px・英字名 renewal/EN/Heading/28/Bold
   SP: 内側 16px・アイコン 40px（縦積み）・英字名 renewal/EN/Heading/24/Bold・箇条書きはブランド色 6px
   ========================================================================== */

.c-card-service {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  padding: var(--space-32);
  position: relative; /* 「詳細を見る」のリンクをカード全体に広げる基準 */
  border: 1px solid var(--color-border-default);
  background-color: var(--color-bg-base);
  box-shadow: var(--shadow-box);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* ホバー: 背景 bg/subtle（#F1F3F8）・影 Dropshadow-select（静的HTML の c-card-service と同じ） */
.c-card-service:hover,
.c-card-service:focus-within {
  background-color: var(--color-bg-subtle);
  box-shadow: var(--shadow-select);
}

/* カード全体をクリックできるようにする（静的HTML はカード全体がリンク） */
.c-card-service .c-text-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.c-card-service__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
}

.c-card-service__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  width: 100%;
}

.c-card-service__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-16);
}

.c-card-service__icon {
  flex-shrink: 0;
  width: 80px; /* アイコンサイズ */
  height: 80px;
}

.c-card-service__titles {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.c-card-service__name {
  white-space: nowrap;
}

.c-card-service__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 100%;
}

.c-card-service__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
}

.c-card-service__item::before {
  content: "";
  flex-shrink: 0;
  width: 10px;  /* Figma 固有寸法: 28px 枠の中央に 10px の四角 */
  height: 10px;
  margin: 9px; /* (28 − 10) ÷ 2 */
  background-color: var(--color-bg-brand);
}

.c-card-service--management .c-card-service__item::before {
  background-color: var(--color-bg-brand-management);
}

.c-card-service--consulting .c-card-service__item::before {
  background-color: var(--color-bg-brand-consulting);
}

.c-card-service__illust {
  width: 320px; /* イラスト寸法（Figma） */
  max-width: 100%;
}

@media (max-width: 1023px) {

  .c-card-service {
    gap: var(--space-16);
    padding: var(--space-16);
  }

  .c-card-service__intro {
    gap: var(--space-8);
  }

  .c-card-service__head {
    flex-direction: column;
  }

  .c-card-service__icon {
    width: 40px; /* アイコンサイズ（SP） */
    height: 40px;
  }

  .c-card-service__name {
    font-size: 1.5rem; /* SP: renewal/EN/Heading/24/Bold（tokens.css .t-en-heading-24-bold） */
    line-height: calc(36 / 24);
    white-space: normal;
  }

  .c-card-service__item::before,
  .c-card-service--management .c-card-service__item::before,
  .c-card-service--consulting .c-card-service__item::before {
    width: 6px;  /* Figma SP: List/UL（6px・ブランド色） */
    height: 6px;
    margin: 11px 0; /* (28 − 6) ÷ 2 */
    background-color: var(--color-bg-brand);
  }

  .c-card-service__illust {
    width: 100%;
  }
}