/* サービス別フローのURLタブ */
.flow-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 var(--s8);
  padding: 1px;
  border: 1px solid var(--line);
  border-radius: var(--r3);
  background: var(--line);
  overflow: hidden;
}
.flow-tabs a {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: center;
  padding: var(--s3) var(--s4);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
}
.flow-tabs a:hover { background: var(--surface-2); color: var(--ink); }
/* 現在地は リンクと 同じ ブランドブルーで 示す。
   🔴 トーン（--accent）で 示すと 対象別に 色が 変わり、同じ ページに
      青い リンクと 橙の 現在地が 混ざる。トーンは 面・角丸・影で 出す。 */
.flow-tabs a[aria-current="page"] {
  position: relative;
  z-index: 1;
  background: var(--cta-bg);
  color: var(--cta-ink);
  box-shadow: inset 0 -3px 0 var(--cta);
}
.flow-tabs a:focus-visible { outline: 3px solid var(--cta); outline-offset: -3px; }


@media (max-width: 760px) {
  .flow-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-tabs a { min-height: 56px; padding: var(--s3); font-size: 13px; }
}

/* 手順は行長を抑える。本文（wrap--narrow 760px）より少し狭く保つ */
.steps { max-width: 720px; }