/* =========================================================
   services.css — 事業詳細ページ（services.html）専用スタイル
   ---------------------------------------------------------
   ・共通部分（:root トークン / header / footer / .btn / .section-tag / .reveal）
     は style.css から来る。ここでは services.html にしかない部品だけを書く。
   ・var() には必ずフォールバック値を付けてある（style.css の旧版と併用しても壊れないように）。
   ・方針: 枠・影・角丸を使わず、1px の罫線と余白だけで区切る。
   ========================================================= */

.services-lp-body {
  background-color: var(--paper, #ffffff);
}

/* ---------- ヘッダー内「トップページへ戻る」 ---------- */
/* .btn の共通指定より小さく。secondary の見た目（黒1px枠・透明）に合わせる */
.btn-back {
  font-size: 0.85rem;
  padding: 8px 16px;
  border: 1px solid var(--ink, #0f172a);
  background: transparent;
  color: var(--ink, #0f172a);
  border-radius: var(--radius, 4px);
  box-shadow: none;
  transform: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-back:hover {
  background: var(--ink, #0f172a);
  color: var(--paper, #ffffff);
  transform: none;
  box-shadow: none;
}

/* ---------- ヒーロー（ページ見出し） ---------- */
.services-hero {
  /* ヘッダーが固定表示なので、その高さぶん上に余白を取る。
     トップページのヒーローと同じ薄緑の色面＋波モチーフ。右に6項目の目次 */
  position: relative;
  overflow: hidden;
  /* 下は波の帯（110px）ぶん余分に空ける */
  padding: 140px 5% calc(var(--sp-4, 64px) + 110px);
  background: var(--paper-green, #ecf8f1);
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--sp-4, 64px);
  align-items: end;
  /* グリッドの中身をコンテンツ幅に収める */
  padding-left: max(5%, calc((100% - var(--max, 1280px)) / 2));
  padding-right: max(5%, calc((100% - var(--max, 1280px)) / 2));
}

.services-hero::before {
  content: '';
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: 0;
  height: 120px;
  /* 波の線が帯の中に2〜3本入るよう、上にずらして敷く */
  background: var(--wave) center -95px / 100% auto no-repeat;
  opacity: 0.55;
  pointer-events: none;
}

.services-hero > * {
  position: relative;
  z-index: 1;
}

.services-hero-inner {
  max-width: 40em;
}

/* 目次（白地の小さなパネル。罫線区切り） */
.services-toc {
  background: var(--paper, #ffffff);
  border-radius: var(--radius, 4px);
  padding: var(--sp-3, 32px);
}

.services-toc-label {
  display: block;
  font-family: var(--font-en, 'Outfit', sans-serif);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ink-3, #94a3b8);
  margin-bottom: var(--sp-1, 8px);
}

.services-toc ol {
  list-style: none;
}

.services-toc li {
  border-top: 1px solid var(--line, #e2e8f0);
}

.services-toc a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink, #0f172a);
  text-decoration: none;
  transition: color 0.2s ease;
}

.services-toc a:hover {
  color: var(--green-dark, #00994D);
}

.services-toc .toc-num {
  font-family: var(--font-en, 'Outfit', sans-serif);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--green-dark, #00994D);
}

.services-hero .section-tag {
  font-family: var(--font-en, 'Outfit', sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3, #94a3b8);
  display: block;
  margin-bottom: var(--sp-2, 16px);
}

.services-hero h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink, #0f172a);
  margin-bottom: var(--sp-3, 32px);
}

/* 2行目だけ緑（トップページのヒーローと同じ組み方） */
.services-hero .highlight-text {
  color: var(--green-dark, #00994D);
}

.services-intro {
  max-width: 40em;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--ink-2, #475569);
}

.services-intro strong {
  color: var(--ink, #0f172a);
  font-weight: 700;
}

/* ---------- サービス詳細（6項目） ---------- */
.services-details-section {
  padding: var(--sp-4, 64px) 5% var(--sp-5, 120px);
}

.services-details-container {
  max-width: var(--max, 1280px);
  margin: 0 auto;
}

/* 1項目 = 「番号・アイコン ｜ 本文 ｜ 料金」の3カラム。区切りは上端の罫線だけ */
.service-detail-card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 280px;
  column-gap: var(--sp-3, 32px);
  padding: var(--sp-4, 64px) 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line, #e2e8f0);
  border-radius: 0;
  box-shadow: none;
  transition: none;
  scroll-margin-top: 120px; /* #service-1 などのアンカー着地位置（固定ヘッダーぶん） */
}

.service-detail-card:last-child {
  border-bottom: 1px solid var(--line, #e2e8f0);
}

.service-detail-card:hover {
  transform: none;
  box-shadow: none;
}

/* 左列: 線画アイコンと番号 */
.service-detail-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2, 16px);
}

.service-detail-icon {
  display: inline-flex;
  width: 32px;
  height: 32px;
  background: none;
  border-radius: 0;
  color: var(--ink, #0f172a);
}

.service-detail-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.service-detail-num {
  font-family: var(--font-en, 'Outfit', sans-serif);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--green-dark, #00994D);
  line-height: 1;
}

/* 中列: 見出しと説明 */
.service-detail-body h2 {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink, #0f172a);
  margin-bottom: var(--sp-2, 16px);
}

.service-detail-desc {
  max-width: 40em;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--ink-2, #475569);
}

/* 右列: 料金。箱で囲まず、上に細い罫線＋余白で「価格を大きく、注釈を小さく」 */
.service-price-box {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line, #e2e8f0);
  border-radius: 0;
  padding: var(--sp-2, 16px) 0 0;
  align-self: start;
}

.highlight-price {
  background: transparent;
}

.price-label {
  display: block;
  font-family: var(--font-en, 'Outfit', sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--green-dark, #00994D); /* コーポレートカラー（文字用の緑） */
  margin-bottom: var(--sp-1, 8px);
}

.price-value {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink, #0f172a);
}

.price-note {
  display: block;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink-2, #475569);
  margin-top: 2px;
}

.price-note:empty {
  display: none;
}

.price-subtext {
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--ink-2, #475569);
  margin-top: var(--sp-2, 16px);
}

.price-subtext strong {
  color: var(--ink, #0f172a);
  font-weight: 700;
}

/* 料金が明示されている項目（研修・導入支援）はラベルだけ緑にして目印にする。枠や影は付けない */
/* .highlight-card はアンカー等で参照される可能性があるので残すが、旧版の緑枠・影は使わない */
.highlight-card {
  /* 主力サービス（03 生成AIツール導入支援）だけ薄緑の色面で目立たせる（2026-08-25 本人指示） */
  background: var(--paper-green, #ecf8f1);
  border-top: 3px solid var(--green, #00C362);
  padding-left: var(--sp-3, 32px);
  padding-right: var(--sp-3, 32px);
  box-shadow: none;
  position: relative;
}
.highlight-card::before {
  content: '主力サービス';
  position: absolute;
  top: 0;
  right: var(--sp-3, 32px);
  background: var(--green-deep, #0a4a31);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 6px 14px;
}

/* ---------- CTA（相談導線） ---------- */
.services-cta {
  position: relative;
  overflow: hidden;
  padding: var(--sp-5, 120px) 5%;
  /* トップページの CONTACT と同じ濃紺の帯＋波モチーフで締める */
  background: var(--ink-band, #0b1220);
  color: #fff;
  text-align: center;
}

.services-cta::before,
.services-cta::after {
  content: '';
  position: absolute;
  bottom: -20%;
  width: 55%;
  height: 90%;
  background: var(--wave) center / 100% auto no-repeat;
  opacity: 0.18;
  pointer-events: none;
}

.services-cta::before { left: -18%; }
.services-cta::after  { right: -18%; transform: scaleX(-1); }

.services-cta > * {
  position: relative;
  z-index: 1;
}

.cta-content {
  max-width: 40em;
  margin: 0 auto;
}

.services-cta h2 {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  margin-bottom: var(--sp-2, 16px);
}

.services-cta p {
  font-size: 1rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: var(--sp-3, 32px);
}

/* 旧版は白ボタン＋影だったが、共通の .btn-primary（緑）に統一。少しだけ大きめ */
.btn-large {
  font-size: 1rem;
  padding: 16px 40px;
  box-shadow: none;
  transform: none;
}

.btn-large:hover {
  transform: none;
  box-shadow: none;
}

/* ---------- レスポンシブ ---------- */
/* 1024px 以下: 料金を本文の下に落として2カラムに */
@media (max-width: 1024px) {
  .service-detail-card {
    grid-template-columns: 72px minmax(0, 1fr);
    row-gap: var(--sp-3, 32px);
    padding: var(--sp-3, 32px) 0 var(--sp-4, 64px);
  }

  .service-price-box {
    grid-column: 2;
  }
}

/* 768px 以下: 全部1列。アイコンと番号は横並びにして高さを節約 */
@media (max-width: 1024px) {
  .services-hero {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--sp-3, 32px);
  }
  .services-toc {
    padding: var(--sp-2, 16px) var(--sp-2, 16px) var(--sp-1, 8px);
  }
  .services-toc a {
    font-size: 0.85rem;
  }
}

@media (max-width: 768px) {
  .services-hero {
    grid-template-columns: 1fr;
    gap: var(--sp-3, 32px);
    padding: 96px 5% calc(var(--sp-3, 32px) + 90px);
    align-items: start;
  }

  .services-toc {
    padding: var(--sp-2, 16px) var(--sp-2, 16px) var(--sp-1, 8px);
  }

  .services-hero h1 {
    margin-bottom: var(--sp-2, 16px);
  }

  .services-details-section {
    padding: var(--sp-3, 32px) 5% var(--sp-4, 64px);
  }

  .service-detail-card {
    grid-template-columns: 1fr;
    row-gap: var(--sp-2, 16px);
    padding: var(--sp-3, 32px) 0;
    scroll-margin-top: 96px;
  }

  .service-detail-meta {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-2, 16px);
  }

  .service-detail-icon {
    width: 28px;
    height: 28px;
  }

  .service-price-box {
    grid-column: 1;
    margin-top: var(--sp-1, 8px);
  }

  .price-value {
    font-size: 1.4rem;
  }

  .services-cta {
    padding: var(--sp-4, 64px) 5%;
  }

  .services-cta h2 {
    font-size: 1.4rem;
  }

  .btn-back {
    font-size: 0.8rem;
    padding: 6px 12px;
  }
}

/* ---------- 対応例・事例（各サービスの箇条書き） ---------- */
.service-examples {
  margin-top: var(--sp-3, 32px);
  max-width: 40em;
}

.service-examples-title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-3, #94a3b8);
  margin-bottom: var(--sp-1, 8px);
}

.service-examples ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.service-examples li {
  position: relative;
  padding-left: 1.1em;
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--ink-2, #475569);
}

/* 行頭の点は擬似要素で細く（デフォルトの黒丸より控えめ） */
.service-examples li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 5px;
  height: 1px;
  background: var(--ink-3, #94a3b8);
}

/* 実績（事例）は先頭に小さな緑ラベル。対応例（未実施の想定）と区別する */
.example-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--green-dark, #00994D);
  border: 1px solid currentColor;
  border-radius: var(--radius, 4px);
  padding: 2px 5px;
  margin-right: 8px;
  vertical-align: 0.1em;
}

/* 料金一覧末尾の共通注釈 */
.services-price-common-note {
  margin-top: var(--sp-2, 16px);
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--ink-3, #94a3b8);
}

/* スマホ幅: CTA 見出しが「くださ／い。」で折れないよう少し小さく */
@media (max-width: 480px) {
  .services-cta h2 {
    font-size: 1.25rem;
  }
}

/* ================================================================
   対応できるツール（#tools）
   ベンダー中立であることを見せる。カードは使わず罫線で区切る
   ================================================================ */
.tools-section {
  padding: var(--sp-5) var(--sp-3);
  background: var(--paper-2);
  border-top: 1px solid var(--line);
}
.tools-inner { max-width: var(--max); margin: 0 auto; }
.tools-inner h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 900;
  margin: var(--sp-1) 0 var(--sp-2);
  line-height: 1.4;
}
.tools-lead {
  max-width: 68ch;
  color: var(--ink-2);
  line-height: 1.95;
  font-size: 0.9375rem;
  margin-bottom: var(--sp-3);
}
.tools-lead strong { color: var(--ink); font-weight: 700; }
.tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}
.tool-group { border-top: 2px solid var(--green); padding-top: var(--sp-2); }
.tool-group h3 {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 6px;
}
.tool-group h3 small {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--ink-3);
  margin-top: 3px;
}
.tool-group p { font-size: 0.875rem; color: var(--ink-2); line-height: 1.9; }
.tools-note {
  margin-top: var(--sp-3);
  font-size: 0.8125rem;
  color: var(--ink-3);
}

/* ================================================================
   AIに渡しやすい仕事の見分け方（#how-to-sort）
   ================================================================ */
.sort-section { padding: var(--sp-5) var(--sp-3); border-top: 1px solid var(--line); }
.sort-inner { max-width: var(--max); margin: 0 auto; }
.sort-inner h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 900;
  margin: var(--sp-1) 0 var(--sp-2);
  line-height: 1.4;
}
.sort-lead {
  max-width: 68ch;
  color: var(--ink-2);
  line-height: 1.95;
  font-size: 0.9375rem;
  margin-bottom: var(--sp-3);
}
.sort-cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--sp-4); }
.sort-h {
  font-size: 1rem;
  font-weight: 700;
  color: var(--green-deep);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--green);
  margin-bottom: var(--sp-2);
}
.sort-h-no { color: var(--ink-2); border-bottom-color: var(--line); }
.sort-list { list-style: none; counter-reset: sortnum; }
.sort-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.sort-list b { display: block; font-size: 0.9375rem; font-weight: 700; }
.sort-list span {
  display: block;
  margin-top: 4px;
  font-size: 0.8125rem;
  color: var(--ink-2);
  line-height: 1.8;
}
ol.sort-list li { counter-increment: sortnum; padding-left: 32px; position: relative; }
ol.sort-list li::before {
  content: counter(sortnum);
  position: absolute;
  left: 0;
  top: 14px;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--green-dark);
}
.sort-list-no li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22px;
  width: 10px;
  height: 1px;
  background: var(--ink-3);
}
.sort-list-no li { padding-left: 22px; position: relative; }
.sort-note {
  margin-top: var(--sp-2);
  font-size: 0.8125rem;
  color: var(--ink-2);
  line-height: 1.9;
}
.sort-note strong { color: var(--ink); font-weight: 700; }

/* ================================================================
   よくいただくご相談（#faq）
   ================================================================ */
.faq-section {
  padding: var(--sp-5) var(--sp-3);
  background: var(--paper-green);
  border-top: 1px solid var(--line);
}
.faq-inner { max-width: var(--max); margin: 0 auto; }
.faq-inner h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 900;
  margin: var(--sp-1) 0 var(--sp-3);
  line-height: 1.4;
}
.faq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-4); }
.faq-list > div { padding: 16px 0; border-bottom: 1px solid rgba(10, 74, 49, 0.14); }
.faq-list dt {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--green-deep);
  line-height: 1.55;
}
.faq-list dd {
  margin: 6px 0 0;
  padding-left: 18px;
  position: relative;
  font-size: 0.875rem;
  color: var(--ink-2);
  line-height: 1.85;
}
.faq-list dd::before {
  content: '▶';
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 0.625rem;
  color: var(--green-dark);
}
.faq-close {
  margin-top: var(--sp-3);
  font-size: 0.9375rem;
  color: var(--ink-2);
  line-height: 1.9;
}
.faq-close strong { color: var(--green-deep); font-weight: 700; }

@media (max-width: 900px) {
  .tools-grid { grid-template-columns: repeat(2, 1fr); }
  .sort-cols { grid-template-columns: 1fr; gap: var(--sp-3); }
  .faq-list { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 560px) {
  .tools-grid { grid-template-columns: 1fr; }
  .tools-section, .sort-section, .faq-section { padding: var(--sp-4) var(--sp-2); }
}

/* ================================================================
   AI顧問と導入支援の違い（#compare）
   ここが売りの核心。違いは「チャットの回数」と「手を動かすか」の2点
   ================================================================ */
.compare-section {
  padding: var(--sp-5) var(--sp-3);
  border-top: 1px solid var(--line);
}
.compare-inner { max-width: var(--max); margin: 0 auto; }
.compare-inner h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 900;
  margin: var(--sp-1) 0 var(--sp-2);
  line-height: 1.4;
}
.compare-lead {
  max-width: 68ch;
  color: var(--ink-2);
  line-height: 1.95;
  font-size: 0.9375rem;
  margin-bottom: var(--sp-3);
}
.compare-lead strong { color: var(--ink); font-weight: 700; }

.compare-key {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.ck {
  border-top: 3px solid var(--green);
  padding-top: var(--sp-2);
  position: relative;
}
.ck-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: var(--green-deep);
  color: #fff;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 0.875rem;
  border-radius: 50%;
  margin-bottom: 10px;
}
.ck b { display: block; font-size: 1.0625rem; font-weight: 700; margin-bottom: 8px; }
.ck p { font-size: 0.875rem; color: var(--ink-2); line-height: 1.9; }
.ck p strong { color: var(--green-deep); font-weight: 700; }

/* スクロール案内はスマホ幅でだけ表示（表がはみ出す幅でしか意味がないため） */
.compare-scroll-hint {
  display: none;
  font-size: 0.75rem;
  color: var(--ink-3);
  text-align: center;
  margin-bottom: 8px;
}
.compare-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.compare-table thead th {
  padding: 14px 16px;
  text-align: left;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  vertical-align: bottom;
}
.compare-table thead th span {
  display: block;
  font-family: var(--font-en);
  font-size: 0.9375rem;
  color: var(--green-dark);
  margin-top: 4px;
}
.compare-table thead th.th-hi { background: var(--paper-green); border-bottom-color: var(--green); }
.compare-table tbody th {
  padding: 13px 16px;
  text-align: left;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
  width: 22%;
}
.compare-table tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  line-height: 1.7;
}
.compare-table td.td-hi { background: var(--paper-green); color: var(--ink); }
.compare-table td b { font-weight: 700; color: var(--green-deep); }
.compare-note {
  margin-top: var(--sp-3);
  font-size: 0.8125rem;
  color: var(--ink-2);
  line-height: 1.9;
}
.compare-note strong { color: var(--ink); font-weight: 700; }

@media (max-width: 900px) {
  .compare-key { grid-template-columns: 1fr; gap: var(--sp-2); }
}
@media (max-width: 700px) {
  .compare-scroll-hint { display: block; }
  /* スマホでは余白を詰めて、1画面に入る列を少しでも増やす */
  .compare-table { min-width: 560px; font-size: 0.8125rem; }
  .compare-table thead th,
  .compare-table tbody th,
  .compare-table tbody td { padding: 11px 10px; }
}
@media (max-width: 560px) {
  .compare-section { padding: var(--sp-4) var(--sp-2); }
}