/* bell-co.jp 事業ページ共通スタイル（2026-10 リデザイン：案A「重厚・濃紺」。アポマッチLPと同じ考え方）
   対象：/marketing/ /zero-apo/ /bell-post/ /sns/。<body class="bz"> のページだけに効く。
   ・新しい部品は .bz-*（最初の画面・理由・カード・濃紺の帯・数字）
   ・料金・FAQ・資料DL・最後のCTAは既存のマークアップのまま、後半の「既存ブロックの見た目合わせ」で揃えている
   ・文字は「短い見出し＋1行」。説明の段落は足さない
   変更したら各ページの biz.css?v=N を上げること（CSSは1日キャッシュされる）。 */
.bz{
  --bz-ink:#0E1A33;--bz-sub:#56627A;--bz-line:#DCE2EB;--bz-mist:#F2F5F9;
  --bz-navy:#1A4B8C;--bz-deep:#0D2547;--bz-blue:#1F7AE0;--bz-sky:#8CC4FF;
  --bz-display:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;
  --bz-num:"Outfit","Noto Sans JP",sans-serif;
  color:var(--bz-ink);
}

/* ── 最初の画面：左に濃紺、右に写真。相談カードは境目にまたがせる ── */
.bz-hero{position:relative;display:grid;grid-template-columns:1fr 1fr;background:var(--bz-deep);min-height:680px}
.bz-hero-photo{grid-column:2;grid-row:1;position:relative;overflow:hidden;background:#1B2A48}
/* 写真は枠いっぱいに敷くだけ（縦横比で画面の高さが変わらないように）。見せたい位置は img の --pos / --pos-m で指定 */
.bz-hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,100% center)}
.bz-hero-in{grid-column:1/-1;grid-row:1;position:relative;width:100%;max-width:1240px;margin:0 auto;padding:72px 48px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"text card" "meta card";align-content:center}
.bz-hero-text{grid-area:text;align-self:end;color:#fff;padding-right:92px}
.bz-hero-meta{grid-area:meta;align-self:start;color:#fff;padding-right:92px}
.bz-hero-logo{display:block;height:40px;width:auto;margin-bottom:22px}
.bz-eyebrow{margin:0;font-size:14px;font-weight:700;letter-spacing:.08em;color:var(--bz-sky)}
.bz-h1{margin:16px 0 18px;font-family:var(--bz-display);font-weight:700;font-size:clamp(34px,3.75vw,54px);line-height:1.35;letter-spacing:.01em;color:#fff}
.bz-h1--s{font-size:clamp(30px,3.05vw,44px);line-height:1.4}
.bz-h1 em{font-style:normal;color:var(--bz-sky)}
.bz-lead{margin:0;font-size:17px;line-height:1.8;color:rgba(255,255,255,.8)}
.bz-terms{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:28px 0 0;padding:18px 0 0;border-top:1px solid rgba(255,255,255,.22)}
.bz-terms li{font-size:13px;line-height:1.5;color:rgba(255,255,255,.72)}
.bz-terms b{display:block;margin-top:2px;font-size:19px;font-weight:700;line-height:1.3;color:#fff}
.bz-terms b.w{font-size:25px;padding-top:9px}
.bz-terms em{font-style:normal;font-family:var(--bz-num);font-weight:600;font-size:40px;line-height:1.1}
.bz-terms small{font-size:13px;font-weight:700}
.bz-hero-card{grid-area:card;align-self:center;justify-self:start;width:380px;max-width:100%;margin-left:-64px;background:#fff;color:var(--bz-ink);border-radius:8px;box-shadow:0 24px 64px rgba(4,14,36,.35);padding:28px 28px 24px;display:flex;flex-direction:column;gap:16px}
.bz-hero-card .logo{height:30px;width:auto;align-self:flex-start}
.bz-hero-card .t{margin:0;font-weight:700;font-size:19px;line-height:1.5}
.bz-hero-card .sub{font-size:13px;line-height:1.6;text-align:center;color:var(--bz-sub)}
.bz-hero-card a.sub{text-decoration:underline}
.bz-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14.5px}
.bz-checks li{position:relative;padding-left:18px;line-height:1.75}
.bz-checks li::before{content:"";position:absolute;left:0;top:.74em;width:8px;height:8px;border-radius:50%;background:var(--bz-blue)}
.bz-btn{display:block;text-align:center;background:var(--bz-navy);color:#fff;font-weight:700;font-size:16px;line-height:1.5;padding:16px;border-radius:6px;text-decoration:none;transition:background .15s}
.bz-btn:hover{background:#143D73}

/* ── セクション共通 ── */
.bz-sec{padding:112px 0;background:#fff}
.bz-sec--mist{background:var(--bz-mist)}
.bz-w{max-width:1240px;margin:0 auto;padding:0 48px}
.bz-label{display:flex;align-items:center;gap:12px;margin:0 0 18px;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--bz-navy)}
.bz-label::before{content:"";width:28px;height:2px;background:currentColor}
.bz-h2{margin:0;font-family:var(--bz-display);font-weight:700;font-size:42px;line-height:1.45;letter-spacing:.01em;color:var(--bz-ink)}
.bz-h2 em{font-style:normal;color:var(--bz-blue)}

/* 左に文、右に画面や図 */
.bz-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}
.bz-rows{margin-top:40px;border-top:1px solid var(--bz-line)}
.bz-row{display:flex;gap:28px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--bz-line)}
.bz-row .n{flex:none;min-width:54px;font-family:var(--bz-num);font-weight:600;font-size:44px;line-height:1;color:var(--bz-navy)}
.bz-row h3{margin:0;font-family:var(--bz-display);font-weight:700;font-size:26px;line-height:1.45;color:var(--bz-ink)}
.bz-row p{margin:6px 0 0;font-size:15px;line-height:1.8;color:var(--bz-sub)}
.bz-screen{margin:0;background:var(--bz-mist);border-radius:10px;padding:18px;box-shadow:0 18px 48px rgba(14,26,51,.1)}
.bz-screen::before{content:"";display:block;width:10px;height:10px;border-radius:50%;background:var(--bz-line);box-shadow:16px 0 0 var(--bz-line),32px 0 0 var(--bz-line);margin:0 4px 12px}
.bz-screen img{display:block;width:100%;height:auto;border-radius:6px;border:1px solid var(--bz-line)}

/* カードの並び（サービス・機能） */
.bz-cards{margin-top:48px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.bz-ci{display:flex;flex-direction:column;background:var(--bz-mist);border-radius:8px;border-top:3px solid var(--bz-navy);padding:30px 28px 26px}
.bz-sec--mist .bz-ci{background:#fff}
.bz-ci .tag{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--bz-blue)}
.bz-ci h3{margin:0;font-family:var(--bz-display);font-weight:700;font-size:22px;line-height:1.5;color:var(--bz-ink)}
.bz-ci p{margin:8px 0 0;font-size:14.5px;line-height:1.8;color:var(--bz-sub)}
.bz-ci .price{margin-top:auto;padding-top:18px;font-size:14px;font-weight:700;color:var(--bz-navy)}
.bz-ci .price::before{content:"";display:block;border-top:1px solid var(--bz-line);margin-bottom:14px}

/* 濃紺の帯＋写真 */
.bz-band{display:grid;grid-template-columns:1fr 1fr;min-height:560px}
.bz-band-in{display:flex;flex-direction:column;justify-content:center;background:var(--bz-deep);color:#fff;padding:96px 64px 96px max(48px,calc((100vw - 1240px)/2 + 48px))}
.bz-band-in .bz-label{color:var(--bz-sky)}
.bz-band-in .bz-h2{color:#fff;font-size:clamp(26px,3.1vw,38px)} /* 帯の中は横幅が狭いので少し小さく（12字が1行に収まる大きさ） */
.bz-band-in .bz-h2 em{color:var(--bz-sky)}
.bz-band-list{list-style:none;margin:36px 0 0;padding:0;display:flex;flex-direction:column;gap:22px}
.bz-band-list .tag{margin:0;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--bz-sky)}
.bz-band-list h3{margin:0;font-family:var(--bz-display);font-weight:700;font-size:24px;line-height:1.5;color:#fff}
.bz-band-list p{margin:2px 0 0;font-size:15px;line-height:1.8;color:rgba(255,255,255,.76)}
.bz-band-note{margin:32px 0 0;font-family:var(--bz-display);font-weight:700;font-size:22px;color:var(--bz-sky)}
.bz-band-nums{list-style:none;margin:36px 0 0;padding:0;border-top:1px solid rgba(255,255,255,.2)}
.bz-band-nums li{display:grid;grid-template-columns:168px minmax(0,1fr);gap:20px;align-items:center;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.2)}
.bz-band-nums b{font-family:var(--bz-num);font-weight:600;font-size:54px;line-height:1;color:#fff;white-space:nowrap}
.bz-band-nums b small{font-family:var(--bz-display);font-size:22px;font-weight:700;margin-left:2px}
.bz-band-nums h3{margin:0;font-size:15px;font-weight:700;line-height:1.6;color:#fff}
.bz-band-nums p{margin:2px 0 0;font-size:14px;line-height:1.7;color:rgba(255,255,255,.76)}
.bz-band-photo{position:relative;min-height:420px;overflow:hidden;background:#1B2A48}
.bz-band-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,center)}

/* 大きな数字（実績） */
.bz-nums{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.bz-nums li{border-top:3px solid var(--bz-navy);padding-top:22px}
.bz-nums b{display:block;font-family:var(--bz-num);font-weight:600;font-size:72px;line-height:1;color:var(--bz-navy);white-space:nowrap}
.bz-nums b small{font-family:var(--bz-display);font-size:26px;font-weight:700;margin-left:2px}
.bz-nums h3{margin:14px 0 0;font-size:16px;font-weight:700;line-height:1.6;color:var(--bz-ink)}
.bz-nums p{margin:4px 0 0;font-size:14.5px;line-height:1.8;color:var(--bz-sub)}

/* ── 既存ブロックの見た目合わせ（マークアップ・id・JSはそのまま） ── */
.bz .sec-eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:none;color:var(--bz-navy);margin-bottom:18px}
.bz .sec-eyebrow::before{content:"";width:28px;height:2px;background:currentColor}
.bz .sec-h2{font-family:var(--bz-display);font-weight:700;font-size:42px;line-height:1.45;letter-spacing:.01em;color:var(--bz-ink)}
/* 料金（ゼロアポ：2枚のカード／SNS：4プラン） */
.bz .pricing{background:var(--bz-mist);padding:112px 48px}
.bz .plan-card{border-radius:8px;border:0;border-top:4px solid var(--bz-navy);box-shadow:none}
.bz .plan-card:hover{box-shadow:0 12px 40px rgba(14,26,51,.1);transform:none}
.bz .plan-card.featured{background:var(--bz-deep);border-top-color:var(--bz-blue)}
.bz .plan-price{font-family:var(--bz-num);font-weight:600;font-size:68px;letter-spacing:0}
.bz .plan-desc{font-family:var(--bz-display);font-weight:700;font-size:19px;color:var(--bz-ink)}
.bz .plan-card.featured .plan-desc{color:#fff}
.bz .plan-btn{border-radius:6px}
.bz .plan-price-box{border-radius:6px;background:var(--bz-mist)}
.bz .plan-max-val{font-size:24px}
.bz .plan-name{font-family:var(--bz-display)}
/* 料金（ラクポス：表） */
.bz .uni-pricing{background:var(--bz-mist);padding:112px 48px}
.bz .uni-pricing-eyebrow{font-size:13px;letter-spacing:.06em}
.bz .uni-pricing-title{font-family:var(--bz-display);font-weight:700;font-size:42px;letter-spacing:.01em;color:var(--bz-ink)}
.bz .bp-table{border-radius:8px;box-shadow:none}
.bz .bp-table td{font-family:var(--bz-num);font-weight:600;font-size:30px}
.bz .bp-table td.bp-row-label{font-family:inherit;font-weight:700;font-size:14px}
.bz .uni-btn{border-radius:6px!important}
/* よくある質問・資料DL */
.bz .faq-sec{background:#fff;padding:112px 48px}
.bz .dl-band{background:var(--bz-mist);border-top:0;padding:96px 48px}
.bz .dl-band-title{font-family:var(--bz-display);font-weight:700;font-size:30px;letter-spacing:.01em;line-height:1.5;color:var(--bz-ink)}
.bz .dl-f-input{border-radius:6px}
.bz .dl-f-btn{border-radius:6px;background:var(--bz-navy)}
/* 最後のCTA：ビルの写真に濃紺を重ねる */
.bz .cta,.bz .cta-sec{position:relative;overflow:hidden;text-align:left;padding:128px 48px;background:var(--bz-deep) url("biz/end.webp?v=1") center/cover no-repeat}
.bz .cta::before,.bz .cta-sec::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,37,71,.94),rgba(13,37,71,.66))}
.bz .cta-sec-inner{position:relative;max-width:1144px;margin:0 auto}
.bz .cta>*{position:relative;max-width:1144px;margin-left:auto;margin-right:auto}
.bz .cta>a{display:block;width:fit-content;margin-left:max(0px,calc((100% - 1144px)/2));margin-right:0}
.bz .cta h2,.bz .cta-sec h2{font-family:var(--bz-display);font-weight:700;font-size:46px;line-height:1.4;letter-spacing:.01em;color:#fff}
.bz .cta p,.bz .cta-sec p{color:rgba(255,255,255,.78);max-width:34em;margin-left:0}
.bz .cta>p{margin-left:max(0px,calc((100% - 1144px)/2))}
.bz .cta-sec .sec-eyebrow{color:var(--bz-sky)}
.bz .cta .btn-white,.bz .cta-sec .btn-p{background:#fff;color:var(--bz-navy);border-radius:6px;font-size:16px;padding:18px 32px}

/* ── お問い合わせページ（/contact/）── */
.bz-hero-card--wide{width:430px}
.bz-note{margin:18px 0 0;max-width:28em;font-size:15px;line-height:1.8;color:var(--bz-sub)}
.bz-form{background:#fff;border-radius:8px;padding:36px}
/* 予約カードの「ご相談のサービス」：2列の選択肢 */
.bz .svc-pick-q{margin:0;text-align:left;font-size:13px;font-weight:700;color:var(--bz-sub)}
.bz .svc-pick{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0}
.bz .svc-pick button{min-height:50px;padding:6px 8px;border-radius:6px;border-color:var(--bz-line);font-size:13.5px}
.bz .svc-pick button:hover{border-color:var(--bz-navy)}
.bz .svc-pick button[aria-checked="true"]{background:var(--bz-navy);border-color:var(--bz-navy)}
/* フォームと資料DL（マークアップ・id・JSはそのまま） */
.bz .cf-input{border-radius:6px}
.bz .cf-req{border-radius:3px}
.bz .cf-submit{border-radius:6px;background:var(--bz-navy)}
.bz .dl-card{border-radius:8px;border:1px solid var(--bz-line)}
.bz .dl-card-icon{display:none}
.bz .dl-card-name{font-family:var(--bz-display);font-weight:700;font-size:18px}
.bz .dl-btn{border-radius:6px;background:var(--bz-navy)}
.bz .dl-btn.done{background:#22c55e}

/* ── 幅が狭いとき ── */
@media (max-width:1100px){
  .bz-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bz-split{gap:48px}
}
@media (max-width:980px){
  /* 左右分割をやめて、写真を上に積む */
  .bz-hero{grid-template-columns:1fr;min-height:0}
  .bz-hero-photo{grid-column:1;grid-row:1;aspect-ratio:16/7}
  .bz-hero-photo img{object-position:var(--pos-m,center)}
  .bz-hero-in{grid-row:2;grid-template-columns:1fr;grid-template-areas:"text" "card" "meta";row-gap:26px;padding:36px 24px 44px}
  .bz-hero-text,.bz-hero-meta{padding-right:0}
  .bz-hero-card{margin-left:0;width:auto;max-width:520px;justify-self:stretch}
  .bz-terms{margin-top:0}
  .bz-h1{font-size:40px}
  .bz-h1--s{font-size:34px}
  .bz-split{grid-template-columns:1fr;gap:40px}
  .bz-band{grid-template-columns:1fr;min-height:0}
  .bz-band-in{padding:72px 24px}
  .bz-band-photo{order:-1;min-height:0;aspect-ratio:16/9}
  .bz-h2,.bz-band-in .bz-h2,.bz .sec-h2,.bz .uni-pricing-title{font-size:34px}
  .bz .pricing,.bz .uni-pricing,.bz .faq-sec,.bz .dl-band{padding:80px 24px}
  .bz .cta,.bz .cta-sec{padding:96px 24px}
  .bz-w{padding:0 24px}
  .bz-sec{padding:80px 0}
}
@media (max-width:600px){
  .bz-hero-photo{aspect-ratio:16/9}
  .bz-hero-in{padding:28px 20px 40px}
  .bz-hero-logo{height:32px;margin-bottom:16px}
  .bz-h1{font-size:30px;margin:12px 0 14px}
  .bz-h1--s{font-size:26px}
  .bz-lead{font-size:15px}
  .bz-terms b{font-size:16px}
  .bz-terms b.w{font-size:19px;padding-top:8px}
  .bz-terms em{font-size:30px}
  .bz-w{padding:0 20px}
  .bz-sec{padding:64px 0}
  .bz-h2,.bz .sec-h2,.bz .uni-pricing-title{font-size:26px}
  .bz-band-in .bz-h2{font-size:24px}
  .bz-cards,.bz-nums{grid-template-columns:1fr}
  .bz-row{gap:14px;padding:22px 0}
  .bz-row .n{font-size:30px;min-width:36px}
  .bz-row h3{font-size:20px}
  .bz-ci h3{font-size:20px}
  .bz-band-in{padding:56px 20px}
  .bz-band-list h3{font-size:20px}
  .bz-band-nums li{grid-template-columns:128px minmax(0,1fr);gap:14px}
  .bz-band-nums b{font-size:40px}
  .bz-band-nums b small{font-size:17px}
  .bz-nums b{font-size:56px}
  .bz .pricing,.bz .uni-pricing,.bz .faq-sec,.bz .dl-band{padding:64px 20px}
  .bz .plan-price{font-size:48px}
  .bz .bp-table td{font-size:19px}
  .bz .bp-table td.bp-row-label{font-size:12px}
  .bz .cta,.bz .cta-sec{padding:72px 20px}
  .bz .cta h2,.bz .cta-sec h2{font-size:28px}
  .bz .dl-band-title{font-size:24px}
  .bz-form{padding:24px 20px}
  .bz .dl-card-name{font-size:16px}
  .bz .svc-pick button{font-size:13px;padding:6px 4px}
}
@media (max-width:360px){
  /* 幅320pxの小さいスマホで、ラクポスの料金表が横にはみ出すのを防ぐ */
  .bz .bp-table td{font-size:16px;padding:14px 4px}
  .bz .bp-table th{font-size:12px;padding:12px 4px}
  .bz .bp-unit{font-size:10px}
}