/* =====================================================================
   段の流れ(録画機の画面のロックオン)
   スクロールに合わせて段ごとにピントが合う(四隅が寄り、番号と点が灯り、線が伸びる)。CSS の view-timeline だけで、JS は使わない。
   使う場所: トップのパートナー支援(.flow)・代理店募集の取引開始までの流れ(.flow--text)・資料ダウンロードの流れ(.flow--text.flow--v.flow--light)
   読み込みは ips_site_get_header(['css' => ['flow']])(ページ別の CSS の後に読まれる)。
   対応しないブラウザ・動きを減らす設定では、すべての段にピントが合った状態で見せる。transform と opacity だけを動かす
   ===================================================================== */

/* 1. 基本(トップのパートナー支援。濃色の面の上) --------------------------- */
.flow { position: relative; display: grid; gap: 0; margin-top: 8px; }
.flow::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: var(--line-dark); }
.flow::after { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(var(--sky), var(--blue-bright)); transform: scaleY(0); transform-origin: top; transition: transform 1.6s var(--ease-out) .2s; }
.flow.is-in::after, .no-js .flow::after { transform: none; }
.flow__step { position: relative; padding: 0 0 40px 40px; }
.flow__dot { position: absolute; left: 0; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--navy-deep); border: 2px solid var(--sky); box-shadow: 0 0 0 5px rgba(124, 200, 255, .12); }
/* 点の中の灯り(ピントが合った段階) */
.flow__dot::after { content: ""; position: absolute; inset: 1px; border-radius: 50%; background: var(--sky); }
/* 段階の番号: 大きな数字(Manrope 300)の下に「STEP」と英字の名前。読み上げは「STEP 01 / CONSULT」の順 */
.flow__num {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "no no" "label en"; justify-content: start; align-items: baseline; column-gap: 10px;
  font-family: var(--font-en); font-size: var(--fs-xs); font-weight: 800; line-height: 1.4; letter-spacing: var(--track-label); color: var(--sky);
}
.flow__label { grid-area: label; }
.flow__no { grid-area: no; margin-bottom: 8px; font-size: 2.25rem; font-weight: 300; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.flow__en { grid-area: en; color: var(--on-dark-3); font-weight: 700; }
/* 区切りの「 / 」は読み上げだけ(見た目は英字の名前を STEP の右に並べる) */
.flow__slash { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* 段階ごとのファインダーの四隅(表示し終わった状態では4つとも。録画機の4分割の画面) */
.flow .vf--step { inset: 12px -14px 4px -14px; z-index: 0; opacity: .55; --vf-c: rgba(124, 200, 255, .8); --vf-s: 14px; }
.flow__title { margin-top: 10px; font-size: var(--fs-h3); letter-spacing: var(--track-head); }
.flow__items { margin-top: 14px; display: grid; gap: 6px; }
.flow__items li { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); color: var(--on-dark-2); }
.flow__items .icon { width: 16px; height: 16px; color: var(--sky); }
@media (min-width: 640px) and (max-width: 1023px) {
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .flow::before, .flow::after { display: none; }
  .flow__step { padding: 28px 0 36px; border-top: 1px solid var(--line-dark); }
  .flow__dot { top: -6px; }
  .flow .vf--step { inset: 12px -14px 14px; }
}
@media (min-width: 1024px) {
  .flow { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 28px; }
  .flow::before, .flow::after { left: 0; right: 0; top: 33px; bottom: auto; width: auto; height: 1px; }
  .flow::after { background: linear-gradient(90deg, var(--sky), var(--blue-bright)); transform: scaleX(0); transform-origin: left; }
  .flow.is-in::after, .no-js .flow::after { transform: none; }
  .flow__step { padding: 36px 32px 8px 0; }
  .flow__dot { top: 0; }
  .flow__step:not(:first-child) { padding-left: 0; }
  /* 四隅は段の文字の左右に 12px ずつ(隣の段の四隅との間は 8px) */
  .flow .vf--step { inset: 22px 20px -10px -12px; --vf-s: 18px; }
  .flow__no { font-size: clamp(3rem, 4.8vw - 1px, 4.25rem); margin-bottom: 10px; }
}
/* スクロールに合わせて STEP 01 → 04 の順にピントが合う: 四隅が外から寄って現れ、番号と点が灯る(1024px以上は線も伸びる)。
   4つの段の動きは同じ時間軸(.flow が画面を通り過ぎる間)に段ごとの区間を割り当てる。transform と opacity だけを動かす。
   スクロール連動に対応したブラウザで、動きを減らす設定でない時だけ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .flow { view-timeline: --flow block; }
    .flow__step:nth-child(1) { --lock: 14%; }
    .flow__step:nth-child(2) { --lock: 25%; }
    .flow__step:nth-child(3) { --lock: 36%; }
    .flow__step:nth-child(4) { --lock: 47%; }
    .flow .vf--step { animation: step-lock linear both; }
    .flow__no { animation: step-lit linear both; }
    .flow__dot::after { animation: dot-lit linear both; }
    .flow .vf--step, .flow__no, .flow__dot::after { animation-timeline: --flow; animation-range: cover var(--lock) cover calc(var(--lock) + 8%); }
  }
  @media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
    .flow::after { transform: none; transition: none; animation: flow-fill linear both; animation-timeline: --flow; animation-range: cover 14% cover 55%; }
  }
}
/* 四隅は寄りきった時に一度明るくなり(ピントが合った合図)、落ち着いた明るさに戻る */
@keyframes step-lock { from { opacity: 0; transform: scale(1.12); } 60% { opacity: 1; transform: none; } to { opacity: .55; transform: none; } }
@keyframes step-lit { from { opacity: .55; } to { opacity: 1; } }
@keyframes dot-lit { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
@keyframes flow-fill { from { transform: scaleX(0); } to { transform: none; } }
@keyframes flow-fill-y { from { transform: scaleY(0); } to { transform: none; } }

/* スマホ(トップ): ページを短くするため2列に */
@media (max-width: 639px) {
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .flow::before, .flow::after { display: none; }
  .flow__step { padding: 22px 0 24px; border-top: 1px solid var(--line-dark); }
  .flow__dot { top: -6px; }
  .flow__title { margin-top: 6px; font-size: 1.125rem; }
  .flow__items { margin-top: 8px; gap: 2px; }
  .flow__items li { font-size: var(--fs-sm); gap: 6px; align-items: flex-start; line-height: 1.6; }
  .flow__items .icon { margin-top: 3px; width: 14px; height: 14px; }
  .flow__en { display: none; }
  /* 番号は「STEP 01」の1行(段を高くしない) */
  .flow__num { grid-template-columns: auto auto; grid-template-areas: "label no"; }
  .flow__no { margin-bottom: 0; font-size: 1.625rem; }
  .flow .vf--step { inset: 8px -6px 10px; --vf-s: 12px; }
}

/* 360px未満: 支援の流れの2列の項目(「アフターサポート」など)が語の途中で折り返さないように、列の間とアイコンの間を詰める */
@media (max-width: 359px) { .flow { column-gap: 12px; } .flow__items li { gap: 4px; } .flow .vf--step { inset-inline: -2px; } }

/* 2. 文章の段(.flow--text): 代理店の取引開始までの流れ(ips_site_partner_flow)。題と2文の説明 -------------- */
.flow--text .flow__title { font-size: var(--fs-h4); line-height: 1.5; }
/* 2文以上の説明なので、文節で区切らず通常の和文の組み方(行の長さがそろう) */
.flow__text { margin-top: 8px; font-size: var(--fs-sm); line-height: 1.9; color: var(--on-dark-2); word-break: normal; line-break: strict; }
.flow__note { margin-top: 16px; font-size: .875rem; line-height: 1.8; color: var(--muted); }
.sec--dark .flow__note { color: var(--on-dark-2); }
@media (min-width: 1024px) { .flow--text .flow__step { padding-right: 36px; } }
/* 1024〜1199px は4列だと説明が1行12字ほどに細くなるので、2列×2段(640〜1023px と同じ組み方) */
@media (min-width: 1024px) and (max-width: 1199px) {
  .flow.flow--text:not(.flow--v) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; padding-top: 0; }
  .flow.flow--text:not(.flow--v)::before, .flow.flow--text:not(.flow--v)::after { display: none; }
  .flow.flow--text:not(.flow--v) .flow__step { padding: 28px 0 36px; border-top: 1px solid var(--line-dark); }
  .flow.flow--text:not(.flow--v) .flow__dot { top: -6px; }
  .flow.flow--text:not(.flow--v) .vf--step { inset: 12px -14px 14px; }
}

/* 3. 縦の流れ(.flow--v): 狭い列(資料ダウンロード)。左に縦の線と点、段ごとに四隅。
   代理店募集(.flow--text)も 639px以下は同じ縦の流れにする(2列だと説明が1行10字ほどに細くなるため)。
   段から次の段の点までの線は、段ごとに引く(::before が静止の線、::after が灯る線) */
.flow.flow--v { grid-template-columns: minmax(0, 1fr); column-gap: 0; margin-top: 0; padding-top: 4px; overflow-x: clip; }
.flow.flow--v::before, .flow.flow--v::after { display: none; }
.flow.flow--v .flow__step { padding: 0 4px 32px 40px; border-top: 0; }
.flow.flow--v .flow__step:last-child { padding-bottom: 12px; }
.flow.flow--v .flow__dot { top: 7px; }
.flow.flow--v .flow__step:not(:last-child)::before, .flow.flow--v .flow__step:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: 18px; bottom: -7px; width: 1px; }
.flow.flow--v .flow__step::before { background: var(--line-dark); }
.flow.flow--v .flow__step::after { background: linear-gradient(var(--sky), var(--blue-bright)); transform-origin: top; }
.flow.flow--v .flow__num { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "label no en"; column-gap: 8px; }
.flow.flow--v .flow__no { margin-bottom: 0; font-size: 1.75rem; }
.flow.flow--v .flow__en { display: block; }
.flow.flow--v .flow__title { margin-top: 6px; font-size: var(--fs-h4); }
/* 四隅は列の中に収める(ピントが合う前の拡大した状態で列の外へ出て、スマホで横にはみ出さないように。はみ出した分は列で切る) */
.flow.flow--v .vf--step { inset: -10px 0 18px 26px; --vf-s: 12px; }
@media (max-width: 639px) {
  .flow.flow--text { grid-template-columns: minmax(0, 1fr); column-gap: 0; margin-top: 0; padding-top: 4px; }
  .flow.flow--text::before, .flow.flow--text::after { display: none; }
  .flow.flow--text .flow__step { padding: 0 4px 32px 40px; border-top: 0; }
  .flow.flow--text .flow__step:last-child { padding-bottom: 12px; }
  .flow.flow--text .flow__dot { top: 7px; }
  .flow.flow--text .flow__step:not(:last-child)::before, .flow.flow--text .flow__step:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: 18px; bottom: -7px; width: 1px; }
  .flow.flow--text .flow__step::before { background: var(--line-dark); }
  .flow.flow--text .flow__step::after { background: linear-gradient(var(--sky), var(--blue-bright)); transform-origin: top; }
  .flow.flow--text .flow__num { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "label no en"; column-gap: 8px; }
  .flow.flow--text .flow__no { margin-bottom: 0; font-size: 1.75rem; }
  .flow.flow--text .flow__en { display: block; }
  .flow.flow--text .flow__title { margin-top: 6px; font-size: var(--fs-h4); }
  .flow.flow--text .vf--step { inset: -10px -4px 18px 26px; --vf-s: 12px; }
}
/* 縦の流れのロックオン: 段ごとに自分の時間軸(画面の下から 8割 → 6割の高さに来る間)でピントが合い、次の段への線が伸びる */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .flow.flow--v .flow__step { view-timeline: --fstep block; }
    .flow.flow--v .vf--step, .flow.flow--v .flow__no, .flow.flow--v .flow__dot::after { animation-timeline: --fstep; animation-range: cover 18% cover 34%; }
    .flow.flow--v .flow__step::after { animation: flow-fill-y linear both; animation-timeline: --fstep; animation-range: cover 30% cover 62%; }
  }
  @media (prefers-reduced-motion: no-preference) and (max-width: 639px) {
    .flow.flow--text .flow__step { view-timeline: --fstep block; }
    .flow.flow--text .vf--step, .flow.flow--text .flow__no, .flow.flow--text .flow__dot::after { animation-timeline: --fstep; animation-range: cover 18% cover 34%; }
    .flow.flow--text .flow__step::after { animation: flow-fill-y linear both; animation-timeline: --fstep; animation-range: cover 30% cover 62%; }
  }
}

/* 4. 明るい面の上(.flow--light): 資料ダウンロード。空色の代わりに青。
   灯る前の番号の不透明度は .72(淡いグレーの面の上で、大きな文字の 3:1 を保つ) */
.flow--light .flow__dot { background: #fff; border-color: var(--blue); box-shadow: 0 0 0 5px rgba(0, 104, 196, .1); }
.flow--light .flow__dot::after { background: var(--blue); }
.flow--light .flow__num { color: var(--blue); }
.flow--light .flow__en { color: var(--muted); }
.flow--light .flow__title { color: var(--ink); }
.flow--light .flow__text { color: var(--ink-2); }
.flow.flow--light .vf--step { --vf-c: rgba(0, 104, 196, .7); }
.flow.flow--light .flow__step::before { background: var(--line-2); }
.flow.flow--light .flow__step::after { background: linear-gradient(var(--blue), var(--blue-bright)); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) { .flow--light .flow__no { animation-name: step-lit-light; } }
}
@keyframes step-lit-light { from { opacity: .72; } to { opacity: 1; } }