/* 法人のお客様へ（/business/）2026-10-05 新規。pages/business/index.astro 用
   共通の部品（kit.css の k-）を土台に、このページだけの図（明細の見本・年間利用額・料金・お金の流れ・手順の絵）を bz- で足す */
.bz-ic { width: 20px; height: 20px; flex: none; }
.k-ic .bz-ic { width: 26px; height: 26px; }

/* 1 見出し：左に文・右に写真＋明細の見本 */
.bz-hero { position: relative; overflow: hidden; padding: 28px 0 72px; background: linear-gradient(180deg, #eef7ff 0%, #fff 100%); }
.bz-hero__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.bz-hero .rs-crumbs { margin-bottom: 26px; }
.bz-h1 { margin: 0; font: 900 clamp(26px, 3.4vw, 46px)/1.35 "Noto Sans JP", sans-serif; letter-spacing: -.03em; color: var(--k-tx); }
.bz-lead { margin: 18px 0 0; color: var(--k-tx2); font-size: 17px; line-height: 1.85; }
.bz-hero .k-checks { margin-top: 22px; }
.bz-hero__vis { position: relative; padding: 0 0 96px 72px; } /* 11/2 明細の札を小さくして、写真に重なる所を減らした */
.bz-hero__photo { box-shadow: 0 30px 70px -30px rgba(0,40,90,.35); }
/* AI画像の作成待ちの間だけ：説明の文字が明細に隠れないよう右上に寄せる（画像に差し替えると k-ai が外れて効かなくなる） */
.bz-hero__photo.k-ai { align-content: start; justify-items: end; padding: 28px 28px 0 38%; text-align: right; }
.bz-hero__stmt { position: absolute; left: 0; bottom: 0; width: min(320px, 66%); }

/* 利用明細の見本（トップの rd-stmt と同じ考え方） */
.bz-stmt { padding: 22px 22px 16px; border-radius: 22px; background: #fff; color: var(--k-tx); font-size: 14px; box-shadow: 0 0 0 1px var(--k-bd), 0 30px 70px -26px rgba(0,100,200,.45); }
.bz-stmt p { margin: 0; }
.bz-stmt__h { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--k-bd); font-weight: 800; }
.bz-stmt__h em { font-style: normal; color: var(--k-tx2); font-weight: 500; white-space: nowrap; }
.bz-stmt__row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 10px 10px; margin: 2px -10px 0; border-radius: 12px; color: var(--k-tx2); }
.bz-stmt__row b { font: 700 15px "Inter", sans-serif; color: var(--k-tx); font-variant-numeric: tabular-nums; }
.bz-stmt__d { font: 600 13px "Inter", sans-serif; }
.bz-stmt__n { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.bz-stmt__n i { padding: 2px 8px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0,119,217,.35); color: var(--k-blue); font-size: 11px; font-weight: 800; font-style: normal; white-space: nowrap; }
.bz-stmt__row--hl { background: #e8f5ff; color: var(--k-tx); font-weight: 800; }
.bz-stmt__note { margin-top: 8px !important; text-align: right; color: var(--k-tx2); font-size: 11px; }

/* 2 できること（PCは写真を左に。スマホは見出しを先に、写真を後に） */
.bz-can > figure { order: -1; }
.bz-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.bz-types li { display: grid; justify-items: center; gap: 2px; padding: 18px 10px 16px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--k-bd), 0 12px 28px rgba(0,40,90,.06); }
.bz-types .k-ic { margin-bottom: 8px; }
.bz-types b { font-size: 17px; font-weight: 900; color: var(--k-tx); }
.bz-pays__h { margin: 26px 0 10px; font-size: 14px; font-weight: 800; color: var(--k-tx2); }
.bz-pays { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bz-pays li { display: inline-flex; align-items: baseline; gap: 6px; padding: 9px 16px; border-radius: 999px; background: var(--k-tint); font-size: 15px; font-weight: 800; color: var(--k-tx); }
.bz-pays small { font-size: 12px; font-weight: 700; color: var(--k-tx2); }
.bz-line { margin: 18px 0 0; color: var(--k-tx2); font-size: 15px; line-height: 1.8; }

/* 3 よいところ：3枚のカード（上に図） */
.bz-merit .k-card { display: flex; flex-direction: column; }
.bz-merit .k-h3 { margin-top: 18px; }
.bz-merit__vis { position: relative; display: grid; place-items: center; height: 190px; border-radius: 16px; background: linear-gradient(160deg, #eef7ff, #eefbf6); overflow: hidden; }
.bz-merit__card { width: 150px; height: auto; transform: rotate(-6deg); filter: drop-shadow(0 16px 24px rgba(0,40,90,.25)); }
.bz-chip { position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px 7px 9px; border-radius: 999px; background: #fff; box-shadow: 0 10px 22px rgba(0,40,90,.14); font-size: 14px; font-weight: 800; color: var(--k-tx); }
.bz-chip .bz-ic { width: 22px; height: 22px; color: var(--k-blue); }
.bz-chip--pt { left: 8%; top: 18%; }
.bz-chip--mi { right: 8%; bottom: 16%; }
.bz-chip--mi .bz-ic { color: #0f9e7b; }
/* 年間利用額：月ごとに積み上がる棒（下＝賃料、上＝ほかの支払い） */
.bz-meter { width: min(260px, 86%); }
.bz-merit .bz-meter__k { margin: 0 0 8px; font-size: 12px; font-weight: 800; color: var(--k-tx2); }
.bz-meter__bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; align-items: end; height: 100px; padding: 0 2px; border-bottom: 1.5px solid rgba(11,27,43,.25); }
.bz-meter__bars i { display: block; height: calc(var(--r) + var(--o)); border-radius: 4px 4px 0 0; background: linear-gradient(0deg, #009ffd 0 var(--r), #c9d6e3 var(--r) 100%); }
.bz-meter__axis { display: flex; justify-content: space-between; margin-top: 4px; font: 700 10px "Inter", "Noto Sans JP", sans-serif; color: var(--k-tx2); }
.bz-meter__leg { display: flex; gap: 12px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 11px; font-weight: 700; color: var(--k-tx2); }
.bz-meter__leg li { display: inline-flex; align-items: center; gap: 4px; }
.bz-meter__leg i { width: 10px; height: 10px; border-radius: 3px; background: #c9d6e3; }
.bz-meter__leg i.is-rent { background: #009ffd; }
/* 上限なし */
.bz-nolimit { display: grid; justify-items: center; gap: 2px; }
.bz-nolimit__ic { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 6px; border-radius: 20px; background: #fff; box-shadow: 0 10px 22px rgba(0,40,90,.1); color: var(--k-blue); }
.bz-nolimit__ic .bz-ic { width: 38px; height: 38px; }
.bz-merit .bz-nolimit__t { margin: 0; font-size: 14px; font-weight: 800; color: var(--k-tx2); }
.bz-merit .bz-nolimit__v { margin: 0; font: 900 40px/1.1 "Noto Sans JP", sans-serif; color: var(--k-blue); }

/* 4 料金：2つの率を同じ大きさで並べる＋0円 */
.bz-fee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.05fr); gap: 16px; margin: 40px 0 0; }
.bz-fee__rate { display: grid; justify-items: center; align-content: center; gap: 6px; padding: 26px 18px; border-radius: var(--k-r); background: #fff; box-shadow: 0 0 0 1px var(--k-bd), 0 18px 40px rgba(0,40,90,.06); text-align: center; }
.bz-fee__brands { display: inline-flex; gap: 8px; height: 34px; }
.bz-fee__brands img { height: 34px; width: auto; }
.bz-fee__k { margin: 6px 0 0; font-size: 15px; font-weight: 800; color: var(--k-tx2); }
.bz-fee__v { margin: 0; font: 900 64px/1 "Inter", sans-serif; letter-spacing: -.03em; color: var(--k-blue); }
.bz-fee__v small { margin-left: 2px; font-size: 30px; }
.bz-fee__zero { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.bz-fee__zero li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 24px; border-radius: var(--k-r); background: var(--k-tint); }
.bz-fee__zero span { font-size: 15px; font-weight: 800; color: var(--k-tx); }
.bz-fee__zero b { font: 900 40px/1 "Inter", sans-serif; color: var(--k-mint); }
.bz-fee__zero b small { margin-left: 2px; font: 800 16px "Noto Sans JP", sans-serif; }
#fee .bz-line { margin-top: 20px; }

/* 5 お金の流れ（不動産会社様ページの図と同じ作り） */
.bz-flow { display: grid; grid-template-columns: 1fr minmax(110px, .7fr) 1fr minmax(110px, .7fr) 1fr; align-items: center; margin-top: 44px; }
.bz-node { display: grid; justify-items: center; gap: 4px; text-align: center; }
.bz-node__ic { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px var(--k-bd), 0 16px 34px rgba(0,40,90,.08); color: var(--k-blue); }
.bz-node__ic .bz-ic { width: 44px; height: 44px; stroke-width: 1.6; }
.bz-node__app { width: 96px; height: 96px; border-radius: 26px; box-shadow: 0 16px 34px rgba(0,119,217,.25); }
.bz-node b { margin-top: 8px; font-size: 18px; font-weight: 900; color: var(--k-tx); }
.bz-node > span:last-child { font-size: 14px; font-weight: 700; color: var(--k-tx2); }
.bz-arrow { position: relative; display: grid; justify-items: center; gap: 8px; padding: 0 4px 40px; }
.bz-arrow__line { position: relative; display: block; width: 100%; height: 3px; border-radius: 2px; background: rgba(0,159,253,.25); overflow: hidden; }
.bz-arrow__line::before { content: ""; position: absolute; top: 0; left: -40%; width: 40%; height: 100%; background: linear-gradient(90deg, rgba(0,159,253,0), #009ffd); animation: bz-flow 2.4s linear infinite; }
.bz-arrow::after { content: ""; position: absolute; right: 6px; top: -3px; width: 9px; height: 9px; border-top: 3px solid #009ffd; border-right: 3px solid #009ffd; transform: rotate(45deg); }
.bz-arrow--in .bz-arrow__line { background: rgba(25,195,154,.3); }
.bz-arrow--in .bz-arrow__line::before { background: linear-gradient(90deg, rgba(25,195,154,0), #19c39a); animation-delay: 1.2s; }
.bz-arrow--in::after { border-color: #19c39a; }
.bz-arrow p { margin: 0; padding: 8px 14px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--k-bd); font-size: 13px; font-weight: 700; color: var(--k-tx2); text-align: center; line-height: 1.4; white-space: nowrap; }
.bz-arrow p b { display: block; font-size: 17px; font-weight: 900; color: var(--k-tx); }
@keyframes bz-flow { to { left: 100%; } }
@keyframes bz-flow-v { to { top: 100%; } }
.bz-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 960px; margin: 36px auto 0; padding: 0; list-style: none; }
.bz-facts li { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--k-bd); }
.bz-facts .bz-ic { width: 30px; height: 30px; color: var(--k-blue); }
.bz-facts b { font-size: 15px; font-weight: 800; line-height: 1.55; color: var(--k-tx); }
.bz-alert { display: flex; align-items: center; justify-content: center; gap: 8px; max-width: 960px; margin: 16px auto 0; color: var(--k-tx); font-size: 15px; font-weight: 800; line-height: 1.6; text-align: center; }
.bz-alert .bz-ic { width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--k-mint); color: #fff; stroke-width: 3; }

/* 6 はじめ方 */
.bz-need { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 18px; margin: 32px auto 0; }
.bz-need__h { margin: 0; font-size: 14px; font-weight: 800; color: var(--k-tx2); }
.bz-need ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.bz-need li { display: grid; grid-template-columns: 26px auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 10px 18px 10px 14px; border-radius: 16px; background: var(--k-tint); }
.bz-need .bz-ic { grid-row: span 2; width: 26px; height: 26px; color: var(--k-blue); }
.bz-need b { font-size: 15px; font-weight: 800; color: var(--k-tx); line-height: 1.4; }
.bz-need small { font-size: 12px; font-weight: 700; color: var(--k-tx2); line-height: 1.4; }
.bz-steps { margin-top: 32px; }
.bz-steps__vis { position: relative; display: grid; place-items: center; height: 220px; margin: 0 0 14px; border-radius: 16px; background: linear-gradient(160deg, #eef7ff, #eefbf6); overflow: hidden; }
.bz-steps__t { margin: 0; color: var(--k-tx2); font-size: 14px; line-height: 1.75; }
.bz-talk { display: grid; gap: 10px; width: 86%; }
.bz-talk p { margin: 0; padding: 10px 12px; border-radius: 14px; font-size: 12px; font-weight: 700; line-height: 1.5; }
.bz-talk__me { justify-self: end; max-width: 88%; background: var(--k-blue); color: #fff; border-bottom-right-radius: 4px; }
.bz-talk__ll { display: flex; align-items: center; gap: 6px; justify-self: start; max-width: 88%; background: #fff; color: var(--k-tx); box-shadow: 0 0 0 1px var(--k-bd); border-bottom-left-radius: 4px; }
.bz-talk__ll .bz-ic { width: 18px; height: 18px; color: var(--k-blue); }
.bz-phone { position: absolute; top: 22px; width: 128px; padding: 5px; border-radius: 24px; background: #0b0f14; box-shadow: 0 20px 40px rgba(0,40,90,.22); }
.bz-phone img { display: block; width: 100%; height: auto; aspect-ratio: 600 / 1305; object-fit: cover; object-position: top; border-radius: 19px; }
.bz-cardvis { display: grid; justify-items: center; gap: 14px; }
.bz-cardvis svg { width: 150px; height: auto; filter: drop-shadow(0 14px 22px rgba(0,40,90,.22)); }
.bz-cardvis__brands { display: inline-flex; gap: 8px; padding: 6px 10px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--k-bd); }
.bz-cardvis__brands img { height: 24px; width: auto; }
.bz-more { margin: 24px 0 0; text-align: center; }
.k-link .bz-ic { width: 18px; height: 18px; }

/* 7 よくある質問のあと：自分で調べる道 */
.bz-help { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.bz-help .k-btn { height: 50px; font-size: 15px; }

/* 8 ダウンロード */
.bz-cta .k-cta__in { align-items: center; }
.bz-stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.bz-stores img { display: block; width: auto; height: 50px; }
.bz-qr { flex: none; display: grid; justify-items: center; gap: 8px; padding: 14px 14px 12px; border-radius: 18px; background: #fff; color: var(--k-tx); text-align: center; }
.bz-qr img { display: block; width: 120px; height: 120px; }
.bz-qr p { margin: 0 !important; opacity: 1 !important; font-size: 12px; font-weight: 800; line-height: 1.5; }

@media (max-width: 960px) {
  .bz-hero { padding: 20px 0 48px; }
  .bz-hero__in { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .bz-lead { font-size: 15px; }
  .bz-hero__vis { padding: 0; }
  .bz-hero__stmt { position: relative; width: auto; margin: -56px 12px 0; }
  .bz-types { gap: 8px; margin-top: 22px; }
  .bz-types li { padding: 14px 6px 12px; }
  .bz-types b { font-size: 15px; }
  .bz-pays li { font-size: 14px; padding: 8px 14px; }
  .bz-merit__vis { height: 200px; }
  .bz-can > figure { order: 0; }
  .bz-fee { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 28px; }
  .bz-fee__rate { padding: 20px 10px; }
  .bz-fee__brands, .bz-fee__brands img { height: 26px; }
  .bz-fee__k { font-size: 13px; }
  .bz-fee__v { font-size: 46px; }
  .bz-fee__v small { font-size: 22px; }
  .bz-fee__zero { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .bz-fee__zero li { flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 18px; }
  .bz-fee__zero span { font-size: 13px; }
  .bz-fee__zero b { font-size: 34px; }
  .bz-flow { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 28px; }
  .bz-node { grid-template-columns: 64px 1fr; grid-template-rows: auto auto; justify-items: start; column-gap: 14px; row-gap: 0; text-align: left; padding: 12px 16px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--k-bd); }
  .bz-node__ic, .bz-node__app { grid-row: span 2; width: 64px; height: 64px; border-radius: 18px; box-shadow: none; }
  .bz-node__ic { background: var(--k-tint); }
  .bz-node__ic .bz-ic { width: 32px; height: 32px; }
  .bz-node b { margin: 0; align-self: end; font-size: 17px; }
  .bz-node > span:last-child { align-self: start; }
  .bz-arrow { grid-template-columns: 3px auto; justify-content: start; align-items: center; gap: 16px; height: 80px; padding: 0 0 0 46px; }
  .bz-arrow__line { width: 3px; height: 100%; }
  .bz-arrow__line::before { top: -40%; left: 0; width: 100%; height: 40%; background: linear-gradient(180deg, rgba(0,159,253,0), #009ffd); animation-name: bz-flow-v; }
  .bz-arrow--in .bz-arrow__line::before { background: linear-gradient(180deg, rgba(25,195,154,0), #19c39a); }
  .bz-arrow::after { right: auto; top: auto; left: 43px; bottom: 2px; transform: rotate(135deg); }
  .bz-arrow p { text-align: left; }
  .bz-facts { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 28px; }
  .bz-facts li { padding: 14px 16px; }
  .bz-alert { justify-content: flex-start; align-items: flex-start; text-align: left; font-size: 14px; }
  .bz-need { justify-content: flex-start; }
  .bz-need ul { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .bz-steps__vis { height: 200px; }
  .bz-help .k-btn { width: 100%; }
  .bz-stores { justify-content: center; }
  .bz-stores img { height: 46px; }
  .bz-qr { display: none; }
}
@media (prefers-reduced-motion: reduce) { .bz-arrow__line::before { animation: none; display: none; } }
/* 2026-10-13 リニューアル後は Visa・Mastercard だけ（JCB 不可）：利用料の箱は1つ＋0円の一覧 */
.bz-fee--one { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }

/* ===== 2026-11-02 法人向けページの直し（栄成さん「ここのページのデザインも修正したいです」→「お願いします。」） ===== */
/* ④ お金の流れ：オーナー様・管理会社様へのページの図（ow-flow2）と同じ作り */
.bz-flow2 { list-style: none; margin: 36px auto 0; padding: 0; max-width: 1080px; display: grid; grid-template-columns: 1fr 130px 1fr 150px 1.35fr; align-items: center; }
.bz-flow2__step { display: grid; justify-items: center; gap: 8px; text-align: center; }
.bz-flow2__vis { display: grid; place-items: center; height: 200px; }
.bz-flow2__card { width: 190px; height: auto; filter: drop-shadow(0 24px 30px rgba(0,40,90,.28)); }
.bz-flow2__icon { width: 116px; height: 116px; border-radius: 28px; box-shadow: 0 24px 40px -22px rgba(0,60,120,.45); }
.bz-flow2__book { width: 100%; max-width: 260px; height: 200px; object-fit: contain; mix-blend-mode: multiply; }
.bz-flow2__who { font-size: 22px; font-weight: 700; color: var(--k-tx); }
.bz-flow2__do { margin: 0; display: flex; align-items: flex-start; justify-content: center; gap: 8px; font-size: 16px; font-weight: 700; line-height: 1.5; color: #0a8fe6; }
.bz-flow2__n { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: linear-gradient(135deg, #009ffd, #23e4ab); color: #fff; font: 800 13px/1 "Inter", sans-serif; }
.bz-flow2__step--main { padding: 24px 20px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px var(--k-bd), 0 30px 60px -40px rgba(0,40,90,.4); }
.bz-flow2__arrow { position: relative; display: grid; justify-items: center; padding-bottom: 46px; }
.bz-flow2__arrow span { font-size: 13px; font-weight: 800; line-height: 1.5; color: #0b2a4a; text-align: center; }
.bz-flow2__arrow::after { content: ""; position: absolute; left: 12%; right: 14%; bottom: 26px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #009ffd, #23e4ab); }
.bz-flow2__arrow::before { content: ""; position: absolute; right: 8%; bottom: 20px; border-style: solid; border-width: 8px 0 8px 12px; border-color: transparent transparent transparent #23e4ab; }
@media (max-width: 900px) {
  .bz-flow2 { grid-template-columns: 1fr; gap: 4px; }
  .bz-flow2__vis { height: 150px; } .bz-flow2__card { width: 150px; } .bz-flow2__icon { width: 92px; height: 92px; border-radius: 22px; } .bz-flow2__book { height: 150px; }
  .bz-flow2__arrow { padding: 8px 0 36px; }
  .bz-flow2__arrow::after { left: 50%; right: auto; bottom: 8px; width: 4px; height: 24px; margin-left: -2px; }
  .bz-flow2__arrow::before { right: auto; left: 50%; bottom: 0; margin-left: -8px; border-width: 12px 8px 0; border-color: #23e4ab transparent transparent; }
}
/* ⑤ よくある質問：Q の札と札の枠を外し、線で区切った文字の一覧に */
.bz-faq { gap: 0; border-top: 1px solid var(--k-bd); }
.bz-faq details { border-radius: 0; background: none; box-shadow: none; border-bottom: 1px solid var(--k-bd); }
.bz-faq summary { padding: 20px 48px 20px 0; font-weight: 700; }
.bz-faq summary::before { content: none; }
.bz-faq summary::after { right: 4px; background: none; }
.bz-faq details > p { padding: 0 48px 22px 0; }