/* =========================================================
   /support/ 業務効率化・伴走支援(ページ固有)
   共通部品は site.css。ここには伴走ページだけで使うものを置く
   ========================================================= */

/* 表の調整(subsidy.css と同じ。共通化するなら site.css へ) */
.table--fit thead th.col-em { background: var(--green); color: #fff; }
.why-table tbody th { white-space: nowrap; }

/* よくあるご相談 */
.consults { display: grid; gap: 24px; }
.consult {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 0;
  background: #fff; border: 1px solid #fff; border-radius: var(--radius);
}
.consult-head { padding: 36px 36px 36px; border-right: 1px solid var(--line); }
.consult-num { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; }
.consult-num .num { font-size: 40px; }
.consult-num-label { font-size: 12px; font-weight: 700; color: var(--green); letter-spacing: .1em; }
.consult-title { font-size: 21px; font-weight: 900; line-height: 1.55; margin: 0 0 14px; }
.consult-voice { margin: 0; font-size: 14.5px; color: var(--ink-2); padding-left: 14px; border-left: 2px solid var(--line-strong); }
.consult-body { margin: 0; padding: 20px 36px; }
.consult-row { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; padding: 16px 0; }
.consult-row + .consult-row { border-top: 1px solid var(--line); }
.consult-row dt { font-size: 13px; font-weight: 700; color: var(--green); letter-spacing: .08em; padding-top: 2px; }
.consult-row dd { margin: 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.85; }
.consult-steps { list-style: none; counter-reset: cstep; }
.consult-steps li { counter-increment: cstep; position: relative; padding-left: 28px; margin: 0 0 6px; }
.consult-steps li:last-child { margin-bottom: 0; }
.consult-steps li::before {
  content: counter(cstep); position: absolute; left: 0; top: .3em; width: 18px; height: 18px; border-radius: 50%;
  background: var(--green-100); color: var(--green-dark); font-family: var(--num); font-weight: 600; font-size: 13px;
  line-height: 18px; text-align: center;
}
.consult-outputs { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.consult-outputs li {
  font-size: 13px; font-weight: 700; color: var(--green-dark); background: var(--green-50);
  border: 1px solid var(--green-100); padding: 2px 12px; border-radius: 2px; line-height: 1.8;
}

/* 伴走の全体像(工程×月) */
.gantt { border: 1px solid var(--line); background: #fff; }
.gantt-head, .gantt-row, .gantt-phase { display: grid; grid-template-columns: 320px minmax(0, 1fr); }
.gantt-head { background: var(--green-50); border-bottom: 1px solid var(--line); }
.gantt-head-label { padding: 12px 24px; font-size: 13px; font-weight: 700; color: var(--green-dark); }
.gantt-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.gantt-months span {
  text-align: center; font-family: var(--num); font-weight: 600; font-size: 15px; color: var(--green-dark);
  padding: 12px 0; border-left: 1px solid var(--line);
}
.gantt-rows { list-style: none; }
.gantt-row + .gantt-row { border-top: 1px solid var(--line); }
.gantt-label { display: flex; gap: 16px; align-items: flex-start; padding: 18px 24px; }
.gantt-label .num { font-size: 26px; flex: none; width: 30px; }
.gantt-title { font-size: 17px; font-weight: 900; margin: 0; line-height: 1.5; }
.gantt-period { display: inline-block; margin-left: 10px; font-size: 12px; font-weight: 700; color: var(--green); vertical-align: 1px; }
.gantt-text { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.7; }
.gantt-track {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center;
  background-image: linear-gradient(to right, var(--line) 1px, transparent 1px);
  background-size: calc(100% / 12) 100%;
}
.gantt-bar { grid-row: 1; height: 16px; margin: 0 6px; background: var(--green); border-radius: 2px; }
.gantt-bar--light { background: var(--green-600); opacity: .55; }
.gantt-phase { border-top: 1px solid var(--line); background: var(--beige); }
.gantt-phase .gantt-head-label { color: var(--ink-2); }
.gantt-phase-track { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; padding: 10px 0; }
.gantt-phase-item { font-size: 13px; font-weight: 700; text-align: center; padding: 6px 8px; margin: 0 6px; border-radius: 2px; line-height: 1.5; }
.gantt-phase-item--training { grid-column: 1 / 4; background: var(--green); color: #fff; }
.gantt-phase-item--support { grid-column: 4 / 13; background: var(--green-100); color: var(--green-dark); }
.overview-text { margin: 28px 0 0; max-width: 860px; color: var(--ink-2); }

/* 残る成果物 */
.deliverables { list-style: none; border-top: 1px solid var(--line-strong); }
.deliverables li {
  display: grid; grid-template-columns: 72px 300px minmax(0, 1fr); align-items: baseline; gap: 16px;
  padding: 24px 8px; border-bottom: 1px solid var(--line-strong);
}
.deliverables .num { font-size: 32px; }
.deliverable-title { font-size: 19px; font-weight: 900; margin: 0; }
.deliverable-text { margin: 0; font-size: 15px; color: var(--ink-2); }

/* 導入事例 */
.case-card { display: flex; flex-direction: column; }
.case-card .card-tag { align-self: flex-start; }
.case-card .card-title { font-size: 17.5px; }
.before-after { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; margin: 8px 0 20px; border: 1px solid var(--line); }
.before-after > div { padding: 12px 14px; }
.before-after > div + div { border-left: 1px solid var(--line); background: var(--green-50); }
.before-after dt { font-family: var(--num); font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--muted); margin: 0 0 2px; }
.before-after > div + div dt { color: var(--green); }
.before-after dd { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--ink-2); }
.before-after > div + div dd { color: var(--green-dark); }

/* 私たちが伴走する理由 */
.reason-split { align-items: center; margin-bottom: 48px; }
.reason-split .section-head { margin-bottom: 24px; }
.reason-lead { color: var(--ink-2); margin: 0 0 24px; }
.reason-fact { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin: 0; padding-top: 20px; border-top: 1px solid var(--line-strong); }
.reason-fact .num { font-size: 48px; }
.reason-fact-unit { font-size: 16px; font-weight: 700; color: var(--green); }
.reason-fact-label { font-size: 14px; font-weight: 700; margin-left: 12px; }
.reason-photo img { aspect-ratio: 4 / 3; object-position: 80% center; }

/* 料金 */
.price-table th .price-table-sub { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.price-table .price-cell { white-space: nowrap; }
.price-table .price-cell strong { display: block; font-size: 17px; }
.price-table .price-cell span { font-size: 12.5px; color: var(--muted); }
.price-split { margin-top: 56px; }
.start-flow { list-style: none; counter-reset: sflow; border-left: 1.5px solid var(--green-100); margin-left: 12px; }
.start-flow li { counter-increment: sflow; position: relative; padding: 0 0 14px 28px; font-size: 15px; color: var(--ink-2); }
.start-flow li:last-child { padding-bottom: 0; }
.start-flow li::before {
  content: counter(sflow); position: absolute; left: -13px; top: 1px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--green); color: #fff; font-family: var(--num); font-weight: 600; font-size: 14px; line-height: 24px; text-align: center;
}

@media (max-width: 1080px) {
  .gantt-head, .gantt-row, .gantt-phase { grid-template-columns: 260px minmax(0, 1fr); }
  .deliverables li { grid-template-columns: 64px 240px minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .consult { grid-template-columns: 1fr; }
  .consult-head { padding: 28px 22px 22px; border-right: 0; border-bottom: 1px solid var(--line); }
  .consult-title { font-size: 19px; }
  .consult-body { padding: 8px 22px 12px; }
  .consult-row { grid-template-columns: 1fr; gap: 6px; }

  .gantt-head, .gantt-row, .gantt-phase { grid-template-columns: 1fr; }
  .gantt-head .gantt-head-label { display: none; }
  .gantt-months span { font-size: 13px; padding: 8px 0; }
  .gantt-label { padding: 16px 16px 8px; gap: 12px; }
  .gantt-label .num { font-size: 22px; width: 24px; }
  .gantt-title { font-size: 16px; }
  .gantt-track { height: 30px; margin-bottom: 10px; }
  .gantt-bar { height: 12px; margin: 0 3px; }
  .gantt-phase .gantt-head-label { display: none; }
  .gantt-phase-item { font-size: 12px; margin: 0 3px; padding: 6px 4px; }

  .deliverables li { grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; padding: 20px 4px; }
  .deliverables .num { font-size: 26px; }
  .deliverable-title { font-size: 17px; }
  .deliverable-text { grid-column: 2; font-size: 14.5px; }

  .before-after > div { padding: 10px 12px; }
  .before-after dd { font-size: 14px; }
  .reason-split { margin-bottom: 32px; }
  .reason-fact-label { margin-left: 0; flex-basis: 100%; }
  .price-split { margin-top: 40px; }
}