/* 2026-11-02 法人向けのページをトップの形（パターン1：トップ・年間いくら？・払い方の違い）に。11/4 本採用（栄成さん「法人向けのページは見本の形がいいです。」）
   パターン1の作り：白い地・見出しは中央で太く大きく（page-np.css の np-h1・np-h2 と同じ）・最初の画面は文が上で絵が下・区画は白と薄いグレーの交互・最後の案内は紺の箱 */
.bz-p1 .bz-hero { padding: 28px 0 80px; background: #fff; text-align: center; }
.bz-p1 .bz-hero__in { display: block; }
.bz-p1 .bz-hero__text { max-width: 760px; margin: 0 auto; }
.bz-p1 .bz-h1 { font: 800 clamp(28px, 5.2vw, 64px)/1.2 "Noto Sans JP", sans-serif; letter-spacing: -.04em; }
.bz-p1 .bz-lead { margin-left: auto; margin-right: auto; font-size: 17px; }
.bz-p1 .bz-hero .k-checks, .bz-p1 .bz-hero .k-actions { justify-content: center; }
.bz-p1 .bz-hero__vis { max-width: 620px; margin: 48px auto 0; padding: 0 0 96px 72px; text-align: left; }
.bz-p1 .k-sec { padding: 96px 0; background: #fff; }
.bz-p1 .k-sec--tint { background: #f6f8fa; }
.bz-p1 .k-h2 { font: 800 clamp(26px, 3.8vw, 46px)/1.3 "Noto Sans JP", sans-serif; letter-spacing: -.04em; text-align: center; }
.bz-p1 .bz-can { display: block; max-width: 760px; text-align: center; }
.bz-p1 .bz-can > figure { order: 0; max-width: 620px; margin: 40px auto 0; }
.bz-p1 .bz-pays { justify-content: center; }
.bz-p1 .bz-pays__h { margin-top: 28px; }
.bz-p1 .k-btn:not(.k-btn--line):not(.k-btn--white) { background: #0b1b2b; box-shadow: none; }
.bz-p1 .k-cta__in { background: radial-gradient(90% 140% at 100% 0%, rgba(0,159,253,.32), transparent 60%), radial-gradient(70% 120% at 0% 100%, rgba(35,228,171,.22), transparent 60%), #0b1b2b; }
@media (max-width: 900px) {
  .bz-p1 .bz-hero { padding: 20px 0 56px; }
  .bz-p1 .bz-lead { font-size: 15px; }
  .bz-p1 .bz-hero__vis { margin-top: 32px; padding: 0; }
  .bz-p1 .k-sec { padding: 72px 0; }
  .bz-p1 .bz-can > figure { margin-top: 28px; }
}
/* 2026-11-04 ごちゃごちゃを減らす（お金の流れ：注意は1行だけ／手順：番号つきの文だけ） */
.bz-note { max-width: 40em; margin: 36px auto 0; font-size: 14px; font-weight: 700; line-height: 1.7; color: #4f5b67; text-align: center; }
.bz-need1 { max-width: 40em; margin: 18px auto 0; font-size: 15px; line-height: 1.8; color: #4f5b67; text-align: center; }
.bz-steps2 { list-style: none; max-width: 720px; margin: 36px auto 0; padding: 0; border-top: 1px solid var(--k-bd); }
.bz-steps2 li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; align-items: start; padding: 20px 4px; border-bottom: 1px solid var(--k-bd); }
.bz-steps2__n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #0b1b2b; color: #fff; font: 800 15px/1 "Inter", sans-serif; }
.bz-steps2 b { display: block; font-size: 18px; font-weight: 800; color: var(--k-tx); line-height: 1.5; }
.bz-steps2 p { margin: 4px 0 0; font-size: 15px; line-height: 1.75; color: #4f5b67; }
@media (max-width: 600px) { .bz-steps2 li { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 16px 0; } .bz-steps2__n { width: 30px; height: 30px; font-size: 14px; } .bz-steps2 b { font-size: 16px; } .bz-steps2 p { font-size: 14px; } .bz-need1 { font-size: 14px; text-align: left; } .bz-note { text-align: left; font-size: 13px; } }
/* 2026-11-04 スマホのお金の流れ：縦に長すぎる（約1,200px）ので、絵を小さくして「絵｜だれ・すること」の行に */
@media (max-width: 900px) {
  .bz-flow2 { max-width: 420px; gap: 0; }
  .bz-flow2__step { grid-template-columns: 76px minmax(0, 1fr); grid-template-areas: "vis who" "vis do"; justify-items: start; align-items: center; column-gap: 16px; row-gap: 2px; text-align: left; padding: 6px 0; }
  .bz-flow2__vis { grid-area: vis; height: 64px; width: 76px; }
  .bz-flow2__card { width: 76px; } .bz-flow2__icon { width: 56px; height: 56px; border-radius: 14px; } .bz-flow2__book { width: 76px; height: 64px; }
  .bz-flow2__who { grid-area: who; font-size: 17px; align-self: end; }
  .bz-flow2__do { grid-area: do; justify-content: flex-start; font-size: 14px; align-self: start; }
  .bz-flow2__arrow { justify-items: start; padding: 4px 0 4px 96px; }
  .bz-flow2__arrow::after { left: 37px; height: 100%; top: 0; bottom: auto; }
  .bz-flow2__arrow::before { left: 31px; bottom: -6px; }
  .bz-flow2__arrow span { text-align: left; font-size: 12px; }
}
/* 2026-11-04 オフィス・店舗・倉庫の写真3つ */
.bz-types3 { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 900px; margin: 36px auto 0; padding: 0; }
.bz-types3 li { display: grid; gap: 8px; justify-items: center; }
.bz-types3 img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; }
.bz-types3 span { font-size: 16px; font-weight: 800; color: var(--k-tx); }
@media (max-width: 600px) { .bz-types3 { gap: 8px; margin-top: 24px; } .bz-types3 img { aspect-ratio: 1; border-radius: 12px; } .bz-types3 span { font-size: 14px; } }