/* ===================================================
   page-advisory.css — /service/advisory 固有スタイル
   共通レイアウト（2カラム・目次・response-map 等）は service-detail.css へ
   移管済み。本ファイルには advisory にしか無い部品だけを残す。
   読み込み順: handoff-base.css → service-detail.css → 本ファイル。
   =================================================== */

/* ============================================================
   1. ご相談内容の例 — 見出し＋説明の縦並び
   本文系の項目のため線は引かず、余白と深緑の小見出しで区切る
   （セクション下端の線と二重に見えるのを避ける）
   ============================================================ */
.page-advisory .consult-item {
  padding: clamp(22px, 2.6vw, 30px) 0;
}
.page-advisory .consult-item:first-child { padding-top: 0; }
.page-advisory .consult-item h3 {
  font-size: clamp(16px, 1.2vw, 17px);
  color: var(--green-deep);
  margin-bottom: 6px;
}
.page-advisory .consult-item p + p { margin-top: 8px; }

/* ============================================================
   2. HIクロスマネジメントに相談する特徴 — role-grid を 2×2 カード化
   ============================================================ */
.page-advisory .adv-feature-grid { align-items: stretch; gap: clamp(16px, 2vw, 24px); }
.page-advisory .adv-feature-grid .role-item {
  background: var(--bone);
  border: 1px solid var(--rule-soft);
  padding: clamp(20px, 2.4vw, 28px);
}
.page-advisory .adv-feature-grid h3 {
  font-size: clamp(15.5px, 1.2vw, 16.5px);
  color: var(--green-deep);
  margin-bottom: 10px;
}
.page-advisory .adv-feature-grid p {
  font-size: clamp(15.5px, 1.2vw, 16.5px);
  line-height: 1.8;
}
.page-advisory .adv-feature-grid p + p { margin-top: 8px; }

/* ============================================================
   3. 相談から発展するご依頼 — 2段落の導入文・リンク先の無い項目
   ============================================================ */
.page-advisory .task-intro p + p { margin-top: 8px; }

/* 対応する既存サービスが無い項目。a と同じ余白・文字サイズで揃える */
.page-advisory .task-list li.task-plain {
  padding: 14px 0;
  font-size: clamp(17px, 1.3vw, 18px);
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink);
}

/* ============================================================
   4. ご利用方法 — スポット相談は月額契約の補足として控えめに見せる
   ============================================================ */
.page-advisory .use-spot {
  margin-top: clamp(8px, 1vw, 12px);
  padding: clamp(16px, 2vw, 20px) clamp(18px, 2.2vw, 24px);
  background: var(--bone);
}
.page-advisory .use-spot h3 { font-size: 14px; color: var(--ink-soft); margin-bottom: 6px; }
.page-advisory .adv-section .use-spot p {
  font-size: clamp(15px, 1.1vw, 16px);
  line-height: 1.8;
  color: var(--ink-soft);
}
.page-advisory .use-spot p + p { margin-top: 6px; }

/* ============================================================
   5. 担当コンサルタント — 氏名
   ============================================================ */
.page-advisory .adv-section p.consultant-name {
  font-size: clamp(19px, 1.6vw, 21px);
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

/* ============================================================
   6. FAQ — details/summary（既存 jlpt-customize と同方式）
   ============================================================ */
.page-advisory .faq details {
  border-bottom: 1px solid var(--rule);
}
/* 最後の項目の下線はセクション下端の線と二重に見えるため省く */
.page-advisory .faq details:last-of-type { border-bottom: none; }
.page-advisory .faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 18px 0;
  font-size: 16px; font-weight: 600; line-height: 1.7;
  color: var(--ink);
  transition: color .2s ease;
}
.page-advisory .faq summary::-webkit-details-marker { display: none; }
.page-advisory .faq summary:hover { color: var(--green-deep); }
/* キーボード操作時のフォーカスを既存サイトと同等に可視化する */
.page-advisory .faq summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.page-advisory .faq summary .mark {
  flex: 0 0 auto; position: relative;
  width: 12px; height: 12px; margin-top: 6px;
}
.page-advisory .faq summary .mark::before,
.page-advisory .faq summary .mark::after {
  content: ""; position: absolute; background: var(--ink-mute);
  transition: transform .25s ease, background .25s ease;
}
.page-advisory .faq summary .mark::before { top: 5px; left: 0; width: 12px; height: 1px; }
.page-advisory .faq summary .mark::after  { top: 0; left: 5px; width: 1px; height: 12px; }
.page-advisory .faq details[open] summary .mark::after { transform: scaleY(0); }
.page-advisory .faq details[open] summary { color: var(--green-deep); }
.page-advisory .faq details[open] summary .mark::before { background: var(--accent); }
.page-advisory .faq-a { padding: 0 0 20px; }
.page-advisory .faq-a p + p { margin-top: 10px; }