/* ===================================================
   page-hearing.css — /service/hearing 固有スタイル
   共通レイアウトは service-detail.css を使用。
   読み込み順: handoff-base.css → service-detail.css → 本ファイル。
   =================================================== */

/* 「対応する場面」: 社員面談の説明文に続く場面の一覧 */
.page-hearing .use-row p + .task-list { margin-top: 14px; }

/* 「対応する場面」: オンライン限定の条件。依頼の可否を左右するため、
   注意書きのように小さくせず本文と同じ大きさで、左罫線で区切って示す */
.page-hearing .adv-section p.online-only {
  margin-top: clamp(20px, 2.4vw, 28px);
  border-left: 2px solid var(--accent);
  padding-left: 16px;
}

/* ============================================================
   よくあるご質問 — details/summary
   /service/advisory（page-advisory.css「6. FAQ」）と同じ見た目・操作にそろえる。
   advisory 側を変えたらこちらも合わせること。
   ============================================================ */
.page-hearing .faq details {
  border-bottom: 1px solid var(--rule);
}
/* 最後の項目の下線はセクション下端の線と二重に見えるため省く */
.page-hearing .faq details:last-of-type { border-bottom: none; }
.page-hearing .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-hearing .faq summary::-webkit-details-marker { display: none; }
.page-hearing .faq summary:hover { color: var(--green-deep); }
/* キーボード操作時のフォーカスを既存サイトと同等に可視化する */
.page-hearing .faq summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.page-hearing .faq summary .mark {
  flex: 0 0 auto; position: relative;
  width: 12px; height: 12px; margin-top: 6px;
}
.page-hearing .faq summary .mark::before,
.page-hearing .faq summary .mark::after {
  content: ""; position: absolute; background: var(--ink-mute);
  transition: transform .25s ease, background .25s ease;
}
.page-hearing .faq summary .mark::before { top: 5px; left: 0; width: 12px; height: 1px; }
.page-hearing .faq summary .mark::after  { top: 0; left: 5px; width: 1px; height: 12px; }
.page-hearing .faq details[open] summary .mark::after { transform: scaleY(0); }
.page-hearing .faq details[open] summary { color: var(--green-deep); }
.page-hearing .faq details[open] summary .mark::before { background: var(--accent); }
.page-hearing .faq-a { padding: 0 0 20px; }
.page-hearing .faq-a p + p { margin-top: 10px; }