/* ===================================================
   service-detail.css — 商材詳細ページ共通レイアウト
   （/service/advisory・/service/rule-documentation ほか、今後の商材詳細ページで共用）

   .service-detail（<article class="handoff-page service-detail page-<name>"> の
   スコープ class）配下にスコープ。handoff-base.css のトークンを流用し、
   色・タイポはここでは再定義しない。

   ⚠️ 読み込み順が仕様の一部:
   handoff-base.css → service-detail.css → page-<name>.css の順で読み込むこと。
   .handoff-page .crumb（handoff-base.css: hero 用の白文字）と
   .service-detail .crumb（本ファイル: 濃色）は詳細度が同点(0,2,0)のため、
   本ファイルが後に読まれないとパンくずが白文字（不可視）になる。

   接頭辞 adv- は advisory 初出の歴史的経緯によるもので、意味は「商材詳細ページ共通」。

   構成: 軽量ファーストビュー + 左スティッキー目次 + 本文
   Mobile: 上部横スクロール目次 + 下部固定 CTA
   =================================================== */

/* ============================================================
   ページシェル（大型 Hero は使わない。パンくず→キッカー→H1→概要）
   ============================================================ */
/* 固定ヘッダーの実高。header-compact（500px スクロール後）で 72px → 48px に縮むため、
   sticky のオフセットとアンカー補正をこの変数に追従させる。
   is-header-compact は partials/service-detail-toc-script.blade.php の JS が
   body へページ条件なしで付与する（#header.header-compact のミラー）。 */
.service-detail { --hdr: 72px; }
body.is-header-compact .service-detail { --hdr: 48px; }

.service-detail .adv-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px clamp(56px, 7vw, 96px);
  display: grid;
  grid-template-columns: 248px 1fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}

/* 固定ヘッダー（72px）分を確保した導入部。緑ベタ塗りの Hero にはしない */
.service-detail .adv-intro {
  grid-column: 1 / -1;
  padding: calc(72px + clamp(28px, 4vw, 48px)) 0 clamp(28px, 3.5vw, 44px);
  border-bottom: 1px solid var(--rule);
  max-width: 820px;
}
.service-detail .crumb { margin: 0 0 24px; color: var(--ink-soft); }
.service-detail .crumb a { color: var(--ink-soft); }
.service-detail .crumb a:hover { color: var(--green-deep); }
.service-detail .crumb .sep { color: var(--rule); }

/* 対象読者キッカー */
.service-detail .adv-kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px; letter-spacing: 0.18em; font-weight: 600;
  color: var(--accent);
  margin: 0 0 18px;
}
.service-detail .adv-kicker::before {
  content: ""; width: 26px; height: 1px; background: var(--accent);
}
.service-detail .adv-intro h1 {
  /* #overview へ直リンクされたとき、固定ヘッダーに H1 が隠れないようにする
     （JS を経由しないネイティブジャンプ経路のため .adv-section とは別に必要） */
  scroll-margin-top: 96px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.45;
  letter-spacing: 0.03em;
  margin: 0 0 22px;
  color: var(--ink);
  text-wrap: pretty;
}
.service-detail .adv-lead {
  margin: 0;
  font-size: clamp(17px, 1.3vw, 18px);
  font-weight: 400;
  line-height: 1.85;
  color: var(--ink);
}
.service-detail .adv-lead + .adv-lead { margin-top: 12px; }

/* ============================================================
   左カラム：スティッキー目次 + CTA
   ============================================================ */
.service-detail .adv-side { position: sticky; top: 96px; align-self: start; }
.service-detail .toc-head {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); font-weight: 600;
  margin: 0 0 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.service-detail .adv-toc ol { list-style: none; margin: 0; padding: 0; }
.service-detail .adv-toc li { margin: 0; }
.service-detail .adv-toc a {
  display: block;
  text-decoration: none; color: var(--ink);
  font-size: clamp(15px, 1.1vw, 16px); font-weight: 400; line-height: 1.6; letter-spacing: 0.01em;
  padding: 9px 12px;
  border-left: 2px solid transparent;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.service-detail .adv-toc a:hover { background: var(--sage); color: var(--green-deep); }
.service-detail .adv-toc a.active {
  color: var(--green-deep); background: var(--sage);
  border-left-color: var(--accent); font-weight: 600;
}

/* 目次下 CTA（Desktop のみ。Mobile は下部固定 CTA を使う） */
.service-detail .side-cta {
  display: block; margin-top: 24px;
  text-align: center; text-decoration: none;
  font-size: 13px; font-weight: 600; line-height: 1.6;
  color: var(--green-deep);
  background: #fff;
  border: 1px solid var(--green-deep);
  padding: 14px 16px;
  transition: background .25s ease, color .25s ease;
}
.service-detail .side-cta:hover { background: var(--green-deep); color: #fff; }

/* ============================================================
   右カラム：本文
   ============================================================ */
.service-detail .adv-body { min-width: 0; max-width: 820px; }
.service-detail .adv-section {
  padding: clamp(40px, 4.5vw, 60px) 0;
  border-bottom: 1px solid var(--rule);
  /* 固定ヘッダーにアンカー見出しが隠れないようにする */
  scroll-margin-top: 96px;
}
.service-detail .adv-section:last-of-type { border-bottom: none; }
.service-detail .adv-section > h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(19px, 2.1vw, 25px);
  line-height: 1.5; letter-spacing: 0.03em;
  margin: 0 0 clamp(22px, 2.6vw, 32px);
  color: var(--ink);
}
.service-detail .adv-section h3 {
  font-size: 14.5px; font-weight: 600; line-height: 1.6;
  color: var(--ink); margin: 0 0 8px; letter-spacing: 0.02em;
}
.service-detail .adv-section p {
  font-size: clamp(17px, 1.3vw, 18px);
  font-weight: 400;
  line-height: 1.85;
  color: var(--ink);
  margin: 0;
}

/* ============================================================
   2. コンサルタントが行うこと — 上段2カラム + 下段全幅
   ============================================================ */
.service-detail .role-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3vw, 36px) clamp(28px, 4vw, 48px);
  align-items: start;
}
.service-detail .role-item--wide { grid-column: 1 / -1; }

/* ============================================================
   3. ご相談への対応イメージ — 起点から3方向への分岐
   ============================================================ */

.service-detail .adv-section p.response-map-note {
  margin-top: 16px;
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.75;
}

/* ============================================================
   4. 依頼できる実務 — 関連サービスへのシンプルなリンク一覧
   ============================================================ */
.service-detail .task-intro {
  border-left: 2px solid var(--accent);
  padding-left: 16px;
  margin-bottom: clamp(24px, 3vw, 34px) !important;
}
.service-detail .task-list { list-style: none; margin: 0; padding: 0; }
.service-detail .task-list li { border-bottom: 1px solid var(--rule-soft); }
.service-detail .task-list li:first-child { border-top: 1px solid var(--rule-soft); }
/* 最後の行の下線はセクション下端の線と二重に見えるため省く */
.service-detail .task-list li:last-child { border-bottom: none; }
.service-detail .task-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  color: var(--ink);
  font-size: clamp(17px, 1.3vw, 18px);
  font-weight: 500;
  line-height: 1.6;
  text-decoration: none;
  transition: color .2s ease;
}
.service-detail .task-list a:hover { color: var(--green-deep); }
.service-detail .task-list a i { flex: 0 0 auto; color: var(--accent); font-size: 11px; }

/* ============================================================
   5. ご利用方法 — 左ラベル + 右説明
   ============================================================ */
/* 本文系の項目のため行間の線は引かず、余白と深緑の小見出しで区切る
   （セクション下端の線と二重に見えるのを避ける） */
.service-detail .use-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(24px, 2.8vw, 34px) 0;
  align-items: start;
}
.service-detail .use-row:first-child { padding-top: 0; }
.service-detail .use-row h3 { margin: 0; color: var(--green-deep); }
.service-detail .use-row p + p { margin-top: 10px; }

/* ============================================================
   6. 担当コンサルタント — 写真・アバターは使わない（テキストのみ）
   ============================================================ */
.service-detail .consultant-role {
  font-size: clamp(15px, 1.1vw, 16px); font-weight: 400; line-height: 1.8; color: var(--ink-soft);
  letter-spacing: 0.06em; margin: 0 0 18px !important;
}
.service-detail .consultant-body p + p { margin-top: 12px; }
.service-detail .consultant-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px;
  font-size: 13px; font-weight: 600; text-decoration: none;
  color: var(--green-deep);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 3px;
  transition: color .25s ease, border-color .25s ease;
}
.service-detail .consultant-link:hover { color: var(--accent); border-color: var(--accent); }
.service-detail .consultant-link i { font-size: 10px; }

/* ============================================================
   8. ご相談・お問い合わせ — 本文の延長。大型 LP バナーにはしない
   ============================================================ */
.service-detail .adv-contact { background: var(--sage); padding: clamp(28px, 3.4vw, 40px); }
.service-detail .adv-contact h2 { margin-bottom: 16px; }
.service-detail .adv-contact p {
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--ink-soft);
}
.service-detail .adv-contact p + p { margin-top: 10px; }
.service-detail .btn-contact {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 24px;
  text-decoration: none; color: #fff;
  background: var(--green-deep);
  font-size: 13.5px; font-weight: 600; letter-spacing: 0.04em;
  padding: 15px 30px;
  transition: background .25s ease, transform .25s ease;
}
.service-detail .btn-contact:hover { background: var(--green-darker); transform: translateY(-2px); }
.service-detail .btn-contact i { font-size: 12px; }

/* ============================================================
   リンクを置かない一覧（task-list の派生）
   .task-list はパディング・文字サイズを a 側に持つため、
   li 直下テキストの一覧では本モディファイアで同じ見た目を補う
   （page-rule-documentation.css の個別対応を共通化したもの）
   ============================================================ */
.service-detail .task-list--plain li {
  padding: 14px 0;
  font-size: clamp(17px, 1.3vw, 18px);
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink);
}

/* ============================================================
   本文中の箇条書き（.adv-section 内の通常本文で使う）
   ============================================================ */
.service-detail .adv-list {
  margin: clamp(16px, 2vw, 22px) 0 0;
  padding-left: 1.4em;
}
.service-detail .adv-list li {
  padding-left: 0.2em;
  font-size: clamp(17px, 1.3vw, 18px);
  font-weight: 400;
  line-height: 1.8;
  color: var(--ink);
}
.service-detail .adv-list li + li { margin-top: 8px; }
.service-detail .adv-list li::marker { color: var(--accent); }
.service-detail .adv-list + p { margin-top: clamp(16px, 2vw, 22px); }

/* ============================================================
   順番のある工程表示（1 → 2 → 3 → 4）
   role-grid は「並列の内容」を並べる部品のため、順序のある工程では使わない。
   <ol class="flow-steps"> + <li class="flow-step"> で順序をセマンティクスに持たせる
   ============================================================ */
.service-detail .flow-steps { list-style: none; margin: 0; padding: 0; }
.service-detail .flow-step {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 18px;
  padding-bottom: clamp(24px, 3vw, 34px);
}
.service-detail .flow-step:last-child { padding-bottom: 0; }
/* 工程間をつなぐ縦線（番号円の中心 20px に合わせる） */
.service-detail .flow-step::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 40px;
  bottom: 0;
  width: 1px;
  background: var(--rule);
}
.service-detail .flow-step:last-child::before { display: none; }
.service-detail .flow-num {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: #fff;
  color: var(--green-deep);
  font-size: 15px; font-weight: 600; line-height: 1;
}
.service-detail .flow-body h3 { margin: 9px 0 8px; }
.service-detail .flow-body p { font-size: clamp(15.5px, 1.2vw, 16.5px); line-height: 1.8; }

/* ============================================================
   役割分担表示（自社が行うこと／専門家等が行うことの左右比較）
   .duty-map（起点つきの図解枠）はなくても .duty-split 単体で使える
   ============================================================ */

.service-detail p + .duty-split { margin-top: clamp(20px, 2.6vw, 28px); }
.service-detail .duty-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 32px);
  align-items: start;
}
.service-detail .duty-col {
  border-top: 2px solid var(--rule);
  padding: 16px 4px 0;
}
.service-detail .duty-col h3 { margin-bottom: 12px; }
.service-detail .duty-col ul { list-style: none; margin: 0; padding: 0; }
.service-detail .duty-col li {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  padding: 7px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.service-detail .duty-col li:last-child { border-bottom: none; }
.service-detail .duty-col > p { font-size: 15px; line-height: 1.8; color: var(--ink-soft); }
/* 自社側のカラム（「現在地」表現と同じ --sage を流用） */
.service-detail .duty-col--own {
  background: var(--sage);
  border-top-color: var(--green-deep);
  padding: 16px 14px 14px;
}
.service-detail .duty-col--own h3 { color: var(--green-deep); }

.service-detail .adv-section p.duty-note {
  margin-top: 16px;
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.75;
}

/* 「3つの領域」等のカード内リンク（page-rule-documentation.css から共通化。
   下線で内部リンクだと分かるようにしつつ、色は本文と同系に保つ） */

/* ============================================================
   Mobile 固定 CTA（既定は非表示。Desktop では出さない）
   ============================================================ */
.service-detail .adv-fixed-cta { display: none; }

/* ============================================================
   Responsive
   ============================================================ */

/* --- タブレット：3カラム/2カラムを緩める --- */
@media (max-width: 1100px) {
  .service-detail .adv-wrap { grid-template-columns: 210px 1fr; }
  .service-detail .use-row { grid-template-columns: 160px 1fr; }
}

/* --- 〜900px：1カラム化 + 上部横スクロール目次 + 下部固定 CTA --- */
@media (max-width: 900px) {
  .service-detail .adv-wrap {
    grid-template-columns: 1fr;
    gap: 0;
    padding-bottom: 24px;
  }
  .service-detail .adv-intro { padding-top: calc(72px + 24px); }

  /* 左目次は使わず、上部の横スクロール型ナビへ変換する */
  .service-detail .adv-side {
    position: sticky;
    /* 固定ヘッダーの直下に貼り付く。ヘッダーは 500px スクロール後に
       header-compact で 72px → 48px へ縮むため、追従させないと隙間が空く
       （common.css:60 / header-scripts.blade.php:20-22） */
    top: var(--hdr);
    z-index: 20;
    /* 1 列グリッドの最小幅に、横スクロール目次（nowrap）の合計幅が効かないようにする。
       無いと目次ラベルの長さだけページ全体が画面外へはみ出す（2026-11-03） */
    min-width: 0;
    margin: 0 -24px;        /* 画面端まで伸ばす */
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--rule);
  }
  .service-detail .toc-head { display: none; }
  .service-detail .adv-toc ol {
    display: flex;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 12px;
  }
  .service-detail .adv-toc ol::-webkit-scrollbar { display: none; }
  .service-detail .adv-toc li { flex: 0 0 auto; }
  .service-detail .adv-toc a {
    white-space: nowrap;
    padding: 13px 12px;
    font-size: 15px;
    border-left: none;
    border-bottom: 2px solid transparent;
  }
  .service-detail .adv-toc a:hover { background: transparent; }
  .service-detail .adv-toc a.active {
    background: transparent;
    border-bottom-color: var(--accent);
  }
  /* 目次下 CTA は Mobile では下部固定 CTA に置き換える */
  .service-detail .side-cta { display: none; }

  .service-detail .adv-body { max-width: none; }
  /* アンカー移動時に、固定ヘッダー + 横スクロール目次の両方を避ける */
  .service-detail .adv-section,
  .service-detail .adv-intro h1 { scroll-margin-top: 124px; }

  /* 下部固定 CTA */
  .service-detail .adv-fixed-cta {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    /* チャットボット FAB（chatbot.css: z-index 9999）より前面に出す。
       FAB 自体もバーに重ならないよう下段で押し上げる。 */
    z-index: 10000;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--rule);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  }
  .service-detail .adv-fixed-cta a {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    text-decoration: none; color: #fff;
    background: var(--green-deep);
    font-size: 13.5px; font-weight: 600; letter-spacing: 0.03em;
    padding: 14px 20px;
  }
  .service-detail .adv-fixed-cta a i { font-size: 12px; }
  /* 固定 CTA がフッターを隠さないよう、ページ全体の末尾に逃げを作る。
     サイトフッターは .service-detail の外にあるため、body 側に余白を置く必要がある。 */
  body.has-fixed-cta { padding-bottom: 84px; }

  /* チャットボット FAB を固定 CTA バーの上へ逃がす（商材詳細ページのみ）。
     既定は bottom:24px、480px 以下では bottom:16px（chatbot.css:9,351）。 */
  body.has-fixed-cta .chatbot-fab { bottom: calc(84px + env(safe-area-inset-bottom)); }

  /* Desktop の複数カラムを 1カラムへ */
  .service-detail .role-grid { grid-template-columns: 1fr; }
  .service-detail .use-row { grid-template-columns: 1fr; gap: 8px; }

}

@media (max-width: 560px) {
  .service-detail .adv-wrap { padding-left: 20px; padding-right: 20px; }
  .service-detail .adv-side { margin: 0 -20px; }
  .service-detail .adv-contact { padding: 24px 20px; }
}

/* --- 追加共通部品（flow-steps / duty-split）の Mobile 対応 --- */
@media (max-width: 900px) {
  .service-detail .flow-step { grid-template-columns: 34px 1fr; gap: 14px; }
  .service-detail .flow-num { width: 34px; height: 34px; font-size: 13.5px; }
  .service-detail .flow-step::before { left: 17px; top: 34px; }
  .service-detail .flow-body h3 { margin-top: 6px; }

  .service-detail .duty-split { grid-template-columns: 1fr; gap: 20px; }
  .service-detail .duty-col { padding-left: 0; padding-right: 0; }
  .service-detail .duty-col--own { padding: 16px 12px 12px; }
}

/* モーションを抑制する設定の環境では追従アニメーションを無効化する */
@media (prefers-reduced-motion: reduce) {
  .service-detail .btn-contact:hover { transform: none; }
  /* common.css:35 の html{scroll-behavior:smooth} を打ち消さないと、
     JS 側の behavior:'auto' がルートの smooth に解決されてしまう。
     html には body のクラスが届かないため、page-scripts の JS が
     html.service-detail-reduce-motion を付与する。 */
  html.service-detail-reduce-motion { scroll-behavior: auto; }
}