/* =========================================================
 * services.css : 「03 サービス一覧」ページ固有スタイル
 * 共通コンポーネント（par-subtitle / breadcrumbs / support-* / service-card /
 * consult-card / btn-pill）は reasons.css / top.css と同じ値を自己完結で定義。
 * ========================================================= */

/* ----- ヒーローサブ ----- */
.svc-hero {
  position: relative;
  width: 100%;
  height: 360px;
  overflow: hidden;
  color: var(--color-bg-white);
}

@media (min-width: 1025px) {
  .svc-hero {
    height: 483px;
  }
}

.svc-hero__bg {
  position: absolute;
  inset: 0;
  background-image: url("../images/services/hero.jpg");
  background-size: cover;
  background-position: center;
}

.svc-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.3) 55%, rgba(0, 0, 0, 0.1) 100%);
}

.svc-hero__content {
  position: relative;
  height: 100%;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-sp);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}

@media (min-width: 1025px) {
  .svc-hero__content {
    padding-inline: 0;
    gap: 28px;
  }
}

.svc-hero__title {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--color-bg-white);
}

@media (min-width: 1025px) {
  .svc-hero__title {
    font-size: 40px;
    letter-spacing: 2px;
  }
}

.svc-hero__lead {
  max-width: 600px;
  font-family: var(--font-jp);
  font-weight: 700;      /* Figma SP/PC=700 */
  font-size: 14px;
  line-height: 22px;     /* Figma SP=22px（PCは@mediaで28px） */
  color: var(--color-bg-white);
}

@media (min-width: 1025px) {
  .svc-hero__lead {
    max-width: 606px;
    font-size: 16px;
    line-height: 28px;
  }
}

/* ----- 共通：par/サブタイトル（英語サブ + 紺h2） ----- */
.par-subtitle {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 15px;
}

.par-subtitle__en {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 12px;
  line-height: 22px;
  letter-spacing: 0;
  color: var(--color-accent);
}

@media (min-width: 1025px) {
  .par-subtitle__en {
    font-size: 16px;
    line-height: 28px;
  }
}

.par-subtitle__jp {
  color: var(--color-navy);
}

@media (min-width: 1025px) {
}

/* ----- 共通：ピルボタン（top.css と同値） ----- */
.btn-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  padding: 12px 40px;
  border-radius: 50px;
  background: var(--color-accent);
  color: var(--color-bg-white);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 14px;
  line-height: 24px;
  white-space: nowrap;
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.btn-pill:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.btn-pill__arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
}

.btn-pill--navy { background: var(--color-navy); }
.btn-pill--deep { background: var(--color-bg-deep-beige); }

/* 料金一覧ボタン（Figma lh=25 / SP fs=13・PC fs≒14） */
.svc-intro__more .btn-pill { line-height: 25px; }
@media (max-width: 1024px) {
  .svc-intro__more .btn-pill { font-size: 13px; }
}

/* 内製化研修ボタン（Figma SP=12/lh22・PCは14/24デフォルト） */
@media (max-width: 1024px) {
  .support-wide__btn { font-size: 12px; line-height: 22px; }
}

/* =========================================================
 * イントロ：3つの支援スタイル
 * ========================================================= */
.svc-intro {
  background: var(--color-bg-white);
  padding-top: 56px;
  padding-bottom: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

@media (min-width: 1025px) {
  .svc-intro {
    padding-top: 80px;
    padding-bottom: 80px;
    gap: 46px;
  }
}

.svc-intro .par-subtitle {
  padding-top: 24px;
}

@media (min-width: 1025px) {
  .svc-intro .par-subtitle {
    padding-top: 0;
  }
}

.svc-intro__heading {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 20px;       /* Figma SP=20px（PCは@mediaで40px） */
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--color-navy);
  text-align: center;
  padding-inline: var(--container-pad-sp);
}

@media (min-width: 1025px) {
  .svc-intro__heading {
    font-size: 40px;
    letter-spacing: 2px;
    padding-inline: 0;
  }
}

.svc-style-cards {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-sp);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

@media (min-width: 1025px) {
  .svc-style-cards {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 28px;
    padding-inline: 0;
  }
}

.svc-style-card {
  width: 100%;
  max-width: 360px;
  background: rgba(239, 244, 248, 0.7); /* #EFF4F8 70%（トークン未定義） */
  border-radius: 20px;
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

@media (min-width: 1025px) {
  .svc-style-card {
    width: 323px;
    max-width: none;
    padding: 44px 18px;
    gap: 28px;
  }
}

.svc-style-card__icon {
  display: block;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.svc-style-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.svc-style-card__label {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;         /* Figma SP=16（PCは@mediaで20） */
  line-height: 24px;       /* Figma SP=24px */
  letter-spacing: 0;       /* Figma SP=0 */
  color: var(--color-text-black);
  text-align: center;
}

@media (min-width: 1025px) {
  .svc-style-card__label {
    font-size: 20px;
    line-height: 1.6;         /* PCはAUTO相当（照合対象外） */
    letter-spacing: 0.05em;   /* Figma PC=1px(=0.05em@20) */
  }
}

.svc-intro__note {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 14px;       /* Figma SP=14（PCは@mediaで18） */
  line-height: 22px;     /* Figma SP=22px（PCは@mediaで32px） */
  color: var(--color-text-black);
  text-align: left;
  padding-inline: var(--container-pad-sp);
}

@media (min-width: 1025px) {
  .svc-intro__note {
    font-size: 18px;
    line-height: 32px;
    padding-inline: 0;
    text-align: center;
  }
}

.svc-intro__more {
  display: flex;
  justify-content: center;
}

/* =========================================================
 * 共通：支援ブロック帯（top.css と同値）
 * ========================================================= */
.support-band {
  width: 100%;
  padding-block: 56px;
}

@media (min-width: 1025px) {
  .support-band {
    padding-block: 80px;
  }
}

.support-band--flush {
  padding-top: 0;
}

@media (min-width: 1025px) {
  .support-band--flush {
    padding-top: 24px;
  }
}

.support-inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-sp);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

@media (min-width: 1025px) {
  .support-inner {
    padding-inline: 0;
    gap: 40px;
  }
}

.support-block__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 15px;
}

.support-block__num {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 24px;                 /* Figma SP=24（01のみ22 / PCは40） */
  line-height: 1.3;
  letter-spacing: 0.05em;
  color: var(--color-navy);        /* Figma SP=#00103e（PCは#121212） */
}

/* 01 の番号見出しだけ SP=22px */
.support-block__num--01 {
  font-size: 22px;
}

@media (min-width: 1025px) {
  .support-block__num {
    font-size: 40px;
    letter-spacing: 2px;
    color: var(--color-text-black);  /* Figma PC=#121212 */
  }
  .support-block__num--01 {
    font-size: 40px;
  }
}

.support-block__catch {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 18px;       /* Figma SP=18（PCは@mediaで24） */
  line-height: 28px;     /* Figma SP=28px */
  letter-spacing: 0;     /* Figma SP=0（03のみ0.9 / PCは1.2px） */
  color: var(--color-text-black);
}

/* 03(コンサル)のキャッチだけ Figma SP ls=0.9px */
@media (max-width: 1024px) {
  .svc-service--blue .support-block__catch {
    letter-spacing: 0.9px;
  }
}

@media (min-width: 1025px) {
  .support-block__catch {
    font-size: 24px;
    line-height: 1.4;      /* PCはAUTO相当（照合対象外） */
    letter-spacing: 1.2px;
  }
}

.support-block__intro {
  max-width: 800px;
  color: var(--color-text-sub);
  text-align: left;
}

/* 02(内製化)・03(コンサル)の導入文だけ SP=weight400/lh24/#121212
   （01はFigma通り t-text-sm-bold の 700/22/#3f3b3a のまま） */
@media (max-width: 1024px) {
  .svc-service--beige .support-block__intro,
  .svc-service--blue .support-block__intro {
    font-weight: 400;
    line-height: 24px;
    color: var(--color-text-black);
  }
}

@media (min-width: 1025px) {
  .support-block__intro {
    text-align: center;
  }
}

.support-block__more {
  display: flex;
  justify-content: center;
}

/* 帯内の中見出し（運用代行サービス / コンサルティング） */
.svc-band__title {
  color: var(--color-text-black);
  text-align: center;
}

/* 運用代行サービス帯タイトルだけ SP=#00103e（Figma。コンサル帯はPC/SPとも#121212） */
@media (max-width: 1024px) {
  .svc-band__title.svc-band__title--navy {
    color: var(--color-navy);
  }
}

/* =========================================================
 * サービスカード（5枚 / top.css と同値）
 * ========================================================= */
.service-cards {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 1025px) {
  .service-cards {
    flex-direction: row;
    gap: 40px;
  }
}

.service-card {
  flex: 1 1 0;
  min-width: 0;
  background: var(--color-bg-beige);
  border-radius: 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

@media (min-width: 1025px) {
  .service-card {
    padding: 40px 24px;
  }
}

.service-card__icon {
  display: block;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}

.service-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.service-card__title {
  color: var(--color-text-black);
}

/* 公式LINEカードの見出しだけ Figma SP=16/lh24（他カードは t-text-lg-bold の 18/28）。
   PCは token通り 18/32 のまま */
@media (max-width: 1024px) {
  .service-card__title.service-card__title--sm {
    font-size: 16px;
    line-height: 24px;
  }
}

@media (min-width: 1025px) {
  /* カード見出しは nowrap で1行に固定 */
  .service-card__title {
    white-space: nowrap;
  }
}

.service-card__text {
  color: var(--color-text-sub);
  text-align: left;
}

@media (min-width: 1025px) {
}

/* =========================================================
 * 02：横長プランカード（top.css と同値）
 * ========================================================= */
.support-wide {
  width: 100%;
  background: var(--color-bg-white);
  border-radius: 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

@media (min-width: 1025px) {
  .support-wide {
    flex-direction: row;
    align-items: center;
    gap: 40px;
    padding: 50px 66px;
  }
}

.support-wide__image {
  width: 100%;
  max-width: 280px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 221 / 190;
}

@media (min-width: 1025px) {
  .support-wide__image {
    width: 221px;
  }
}

.support-wide__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.support-wide__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.support-wide__title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--color-text-black);
  text-align: center;
}

@media (min-width: 1025px) {
  .support-wide__title {
    font-size: 24px;
    letter-spacing: 1.2px;
  }
}

.support-wide__text {
  color: var(--color-text-sub);
}

@media (min-width: 1025px) {
}

.support-wide__btn {
  align-self: center;
  margin-top: 4px;
}

@media (min-width: 1025px) {
  .support-wide__btn {
    align-self: center;
  }
}

/* =========================================================
 * 03：コンサル 2カード（top.css と同値）
 * ========================================================= */
.consult-cards {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 1025px) {
  .consult-cards {
    flex-direction: row;
    gap: 24px;
    align-items: stretch;
  }
}

.consult-card {
  flex: 1 1 0;
  min-width: 0;
  background: var(--color-bg-white);
  border-radius: 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 48px 48px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.consult-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 92px;
}

.consult-card__icon img {
  max-height: 92px;
  width: auto;
  object-fit: contain;
}

.consult-card__title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 20px;       /* Figma SP=20（PCは@mediaで24） */
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--color-text-black);
}

@media (min-width: 1025px) {
  .consult-card__title {
    font-size: 24px;
    letter-spacing: 1.2px;
  }
}

.consult-card__text {
  color: var(--color-text-sub);
  text-align: left;
}

@media (min-width: 1025px) {
}

/* =========================================================
 * セクション背景バリエーション
 * ========================================================= */
.svc-cases-band {
  width: 100%;
  background: var(--color-bg-beige);   /* #F9F7F2 */
  padding-block: 56px;
}

@media (min-width: 1025px) {
  .svc-cases-band {
    padding-block: 80px;
  }
}

.svc-service--beige {
  background: var(--color-bg-beige);   /* #F9F7F2 */
}

.svc-service--blue {
  background: var(--color-bg-blue-gray); /* #F0F2F5 */
}

/* =========================================================
 * お客様成功例カード（3枚）
 * ========================================================= */
.svc-cases__title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.3;
  letter-spacing: 0.05em;
  color: var(--color-text-black);
  text-align: center;
}

/* 01(運用代行)セクションの成功例見出しだけ Figma SP=24（03=26）。PCは両方40 */
@media (max-width: 1024px) {
  .svc-cases__title--sm {
    font-size: 24px;
  }
}

@media (min-width: 1025px) {
  .svc-cases__title {
    font-size: 40px;
    letter-spacing: 2px;
  }
}

.svc-case-cards {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

@media (min-width: 1025px) {
  .svc-case-cards {
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 33px;
  }
}

.svc-case-card {
  width: 100%;
  max-width: 360px;
  background: var(--color-bg-white);
  border: 1px solid #e0e7f1;          /* ボーダー薄青（トークン未定義） */
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
}

@media (min-width: 1025px) {
  .svc-case-card {
    width: 320px;
    max-width: none;
  }
}

.svc-case-card__image {
  width: 100%;
  aspect-ratio: 362 / 190;
  overflow: hidden;
  background: #e0e7f1;
}

.svc-case-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.svc-case-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
  padding: 20px 18px 25px;
}

.svc-case-card__tag {
  display: inline-block;
  background: #eff2f6;                  /* タグ背景（トークン未定義） */
  border-radius: 8px;
  padding: 3px 8px;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 12px;       /* Figma SP=12（PCは@mediaで14） */
  line-height: 22px;     /* Figma SP=22px（PCは24px） */
  color: var(--color-text-black);
}

@media (min-width: 1025px) {
  .svc-case-card__tag {
    font-size: 14px;
    line-height: 24px;
  }
}

.svc-case-card__title {
  color: var(--color-text-black);
}

.svc-case-card__text {
  color: var(--color-text-black);
}