/* ご利用の流れの動画（ページに埋め込む版）。動画の試作 90_生成元/ビズリス_ご利用の流れ40秒_試作_20260924.html と同じ絵柄。
   すべて .bz-flow の中だけに効くようにして、サイト本体のクラス（.card など）とぶつからないようにする。 */
.bz-flow {
  --paper: #FFFDF6; --ink: #1B1B1B; --navy: #1D3F91; --yellow: #FFD44A; --sky: #A8D8F5; --mint: #9FE3C4;
  --round: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  margin: 24px 0;
}
.bz-flow .stage {
  width: 100%; aspect-ratio: 16 / 9; container-type: size; position: relative; overflow: hidden;
  background: var(--paper); color: var(--ink); font-family: var(--round);
  border: 3px solid var(--ink); border-radius: 14px; box-shadow: 6px 7px 0 var(--ink);
}
.bz-flow .scene { position: absolute; inset: 0; display: none; flex-direction: column; justify-content: center; align-items: center; gap: 2.6cqmin; padding: 7cqmin; text-align: center; }
.bz-flow .scene.on { display: flex; }
.bz-flow .scene > *, .bz-flow .scene .row, .bz-flow .scene .steprow { max-width: 92cqmin; }
.bz-flow .scene.turn { background: var(--navy); color: #FFFFFF; }
.bz-flow .scene.turn .head, .bz-flow .scene.turn .sub { color: #FFFFFF; }
.bz-flow .kicker { font-size: 3.2cqmin; font-weight: 700; color: var(--navy); margin: 0; letter-spacing: 0.08em; }
.bz-flow .head { font-size: 7.2cqmin; font-weight: 900; line-height: 1.34; margin: 0; }
.bz-flow .head.sm { font-size: 5.4cqmin; }
.bz-flow .sub { font-family: "Noto Sans JP", sans-serif; font-size: 2.9cqmin; font-weight: 700; color: #4A463D; margin: 0; line-height: 1.65; }
.bz-flow .mk { display: inline-block; padding: 0 0.3em; background-image: linear-gradient(var(--yellow), var(--yellow)); background-repeat: no-repeat; background-position: 0 86%; background-size: 100% 0.44em; }
.bz-flow .scene.on .mk { animation: bzmark .5s cubic-bezier(.3,.8,.3,1) both; animation-delay: var(--m, .4s); }
@keyframes bzmark { from { background-size: 0% 0.44em; } to { background-size: 100% 0.44em; } }

.bz-flow .steprow { display: flex; align-items: center; justify-content: center; gap: 3cqmin; }
.bz-flow .stepno { font-family: "Noto Sans JP", sans-serif; font-size: 2.6cqmin; font-weight: 700; color: #FFFFFF; background: var(--navy); border-radius: 99cqmin; padding: 1cqmin 3cqmin; flex: none; margin: 0; }
.bz-flow .bigicon { width: 22cqmin; height: 22cqmin; flex: none; }
.bz-flow .card { background: #FFFFFF; border: 0.9cqmin solid var(--ink); border-radius: 3cqmin; padding: 2.6cqmin 3cqmin; box-shadow: 0.8cqmin 0.9cqmin 0 var(--ink); font-family: "Noto Sans JP", sans-serif; font-size: 2.7cqmin; font-weight: 700; line-height: 1.6; }
.bz-flow .row { display: flex; gap: 2.4cqmin; width: 100%; justify-content: center; align-items: stretch; }
.bz-flow .row .card { flex: 1 1 0; min-width: 0; }
.bz-flow .badge { font-family: "Noto Sans JP", sans-serif; font-size: 2.6cqmin; font-weight: 700; background: var(--yellow); border: 0.7cqmin solid var(--ink); border-radius: 99cqmin; padding: 1.2cqmin 3cqmin; margin: 0; }
.bz-flow .brand { font-size: 12cqmin; font-weight: 900; margin: 0; }
.bz-flow .url { font-size: 5.4cqmin; font-weight: 900; color: var(--navy); margin: 0; }
.bz-flow .logo-row { display: flex; align-items: center; gap: 2.4cqmin; }
.bz-flow .logo { width: 12cqmin; height: 12cqmin; flex: none; }
.bz-flow .logo-big { width: 18cqmin; height: 18cqmin; }

.bz-flow .scene.on .pop { animation: bzpop .55s cubic-bezier(.2,1.5,.4,1) both; animation-delay: var(--d, 0s); }
.bz-flow .scene.on .rise { animation: bzrise .5s cubic-bezier(.2,1.3,.4,1) both; animation-delay: var(--d, 0s); }
@keyframes bzpop { from { opacity: 0; transform: scale(.7) rotate(-4deg); } to { opacity: 1; transform: none; } }
@keyframes bzrise { from { opacity: 0; transform: translateY(3cqmin); } to { opacity: 1; transform: none; } }

.bz-flow .flow-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.bz-flow .flow-time { font-variant-numeric: tabular-nums; color: var(--text-sub); font-size: 14px; }

/* 動きを減らす設定の人には、止まったまま全部を文章で読んでもらう */
@media (prefers-reduced-motion: reduce) {
  .bz-flow .scene.on .pop, .bz-flow .scene.on .rise, .bz-flow .scene.on .mk { animation: none; }
}


/* 狭い画面（スマートフォン）は 1:1 にして、中の文字とカードを大きくする。
   16:9 のまま縮めると本文が 5px 相当になり読めないため。カードは縦に積む。 */
@media (max-width: 700px) {
  .bz-flow .stage { aspect-ratio: 1 / 1; }
  .bz-flow .scene { padding: 6cqmin; gap: 2.4cqmin; }
  .bz-flow .head { font-size: 8cqmin; }
  .bz-flow .head.sm { font-size: 6.2cqmin; }
  .bz-flow .kicker { font-size: 3.6cqmin; }
  .bz-flow .sub { font-size: 3.4cqmin; }
  .bz-flow .row { flex-direction: column; gap: 2cqmin; }
  .bz-flow .card { font-size: 3.6cqmin; padding: 2.4cqmin 3cqmin; border-width: 0.8cqmin; box-shadow: 0.7cqmin 0.8cqmin 0 var(--ink); }
  .bz-flow .steprow { gap: 2.4cqmin; }
  .bz-flow .stepno { font-size: 3.2cqmin; }
  .bz-flow .bigicon { width: 15cqmin; height: 15cqmin; }
  .bz-flow .logo-big { width: 20cqmin; height: 20cqmin; }
  .bz-flow .brand { font-size: 14cqmin; }
  .bz-flow .url { font-size: 6.4cqmin; }
  .bz-flow .badge { font-size: 3.2cqmin; }
  .bz-flow .logo { width: 14cqmin; height: 14cqmin; }
}