/* flow.html（買取の流れ）専用スタイル
   共通の骨格・部品は base.css。ここは .p-flow- 接頭辞のみ */

/* ---------- 方法の切り替えタブ ---------- */
.p-flow-tablist {
  display: flex;
  gap: 8px 32px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
}
.p-flow-tab {
  position: relative;
  padding: 16px 0;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--ink-2);
  transition: color .3s var(--ease);
}
.p-flow-tab::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.p-flow-tab:hover { color: var(--ink); }
.p-flow-tab[aria-selected="true"] { color: var(--ink); }
.p-flow-tab[aria-selected="true"]::after { transform: scaleX(1); }

/* ---------- パネル（写真｜見出し・ステップ・表） ---------- */
.p-flow-panels { margin-top: 40px; }
@media (min-width: 768px) { .p-flow-panels { margin-top: 56px; } }

.p-flow-panel__media img {
  width: 100%; height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.p-flow-panel__body { margin-top: 32px; }
.p-flow-panel__body .c-steps { margin-top: 28px; }
@media (min-width: 768px) {
  .p-flow-panel__media { grid-column: 1 / 12; }
  .p-flow-panel__body { grid-column: 13 / 24; margin-top: 0; }
}

.p-flow-meta { margin-top: 8px; }

/* ---------- お持ちいただくもの（罫の行） ---------- */
.p-flow-list { margin-top: 32px; max-width: 46em; }
.p-flow-list li {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px; line-height: 1.9;
}
.p-flow-list li:first-child { border-top: 1px solid var(--line); }

/* ---------- お支払い ---------- */
.p-flow-pay { margin-top: 32px; max-width: 46em; }

/* フッター等からの #store #visit #delivery の着地点（タブの直上・ヘッダーの高さ分を空ける） */
.p-flow-anchor { display: block; height: 0; scroll-margin-top: 120px; }