/* =====================================================================
   資料ダウンロード /new/documents/(ページの枠)
   一覧・検索・絞り込み・パスワードの部品は docs-center.css(WEBオーダーの資料ページと共通)
   1. 資料センターの章  2. 代理店のお申込み(申込書の提出先・取引開始までの流れ)
   ===================================================================== */

/* 1. 資料センターの章: 見出し帯のすぐ下から検索欄を始める(最初の画面に検索欄と目的別の入口を入れる) */
.docs-center { padding-top: clamp(24px, 3vw, 40px); }

/* 2. 代理店のお申込み ------------------------------------------------- */
.docs-apply__grid { display: grid; gap: 40px; }
@media (min-width: 1024px) { .docs-apply__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; } }
.docs-apply__title { margin-top: 12px; font-size: var(--fs-h3); line-height: 1.5; }
.docs-apply .apply-notice { background: #fff; }
.docs-apply__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 24px; }

/* 申込書を記入した後の流れ: 代理店募集・トップと同じ段の流れ(flow.css)を、この列では縦に並べる(.flow--v。明るい面の色 .flow--light)。
   スクロールに合わせて段ごとに四隅が寄り、番号と点が灯り、次の段への線が伸びる */
.docs-flow { padding: clamp(24px, 3vw, 36px) clamp(20px, 3vw, 36px) clamp(20px, 2.4vw, 28px); border-radius: var(--radius-lg); background: #fff; }
.docs-flow__title { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; font-size: var(--fs-h4); }
.docs-flow__title .icon { width: 22px; height: 22px; color: var(--blue); }
.docs-flow .flow__note { margin-top: 4px; }
/* スマホ: 白い面をやめて1段に(縦の線と点が左端) */
@media (max-width: 599px) {
  .docs-flow { padding: 0; background: none; }
}