/* ============================================================
   flow.html 専用スタイル
   style.css の後に読み込む。色は必ず var(--yg-*/--sb-*/--text-*) を使用。
============================================================ */

/* ---------- シンプルなページ見出し(hero-simple) ---------- */
.hero-simple {
  padding-top: calc(var(--header-h) + 48px);
  background: var(--bg-tint-green);
}
.hero-simple h1 {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  line-height: 1.55;
  max-width: 22em;
}
.hero-simple .sec-lead { margin-top: 22px; max-width: 42em; }
.hero-simple .hero__facts { margin-top: 26px; }

/* ---------- STEP詳細リスト ---------- */
.flow-detail { margin-top: 44px; display: grid; gap: 18px; }
.flow-detail__item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 28px 26px;
}
.flow-detail__item--fig {
  display: grid; grid-template-columns: 1fr 220px; gap: 30px; align-items: center;
}
.flow-detail__fig { order: 2; text-align: center; }
.flow-detail__fig img { width: 100%; max-width: 220px; margin-inline: auto; }
.flow-detail__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.flow-detail__badges .step__meta,
.flow-detail__badges .step__work { margin-top: 0; }
.step__work {
  display: inline-block; font-size: 11.5px; font-weight: 700; color: var(--yg-800);
  background: var(--yg-50); padding: 3px 10px; border-radius: 6px;
}
.flow-detail__item .step__name { font-size: 17px; margin-top: 6px; }
.flow-detail__item .step__desc { font-size: 14px; margin-top: 12px; max-width: 46em; }
@media (max-width: 780px) {
  .flow-detail__item--fig { grid-template-columns: 1fr; }
  .flow-detail__fig { order: -1; }
  .flow-detail__fig img { max-width: 200px; }
}

/* ---------- よくある日程パターン(dept-colsを流用するための見出し補助) ---------- */
.pattern-note { margin-top: 40px; }
.pattern-note h3 { font-size: 16px; font-weight: 700; margin-bottom: 14px; }