/* b2b.css — 法人向け強化（2026-09）の共通コンポーネント。head.html が common.css の直後に全ページで読み込む。
   色は common.css の var(--color-*) だけを使う（色値を直書きしない）。既存セレクタと衝突しないよう接頭辞 b2b- / nav- を使い、
   Bulma の .tag .box .table .card .notification はクラス名に使わない。 */

/* 関連: フッターのリンクの折り返し（769〜1023px）は既存コンポーネント .footer-navlink の規則なので、common.css のフッター節に置いてある。 */

/* ---- navbar: 「福利厚生」1 項目追加ぶんの幅調整（DOM 実測 2026-09-20: 追加前の空き JA 167px@1280 / 24px@1024） ---- */
/* <1024px はバーガー内なので長ラベル、1024〜1407px は短縮ラベル、1408px 以上は長ラベル。
   navbar の container は実測 1009px@1024 / 1152px@1216〜1407 / 1344px@1408（common.css の max-width:1200px は navbar には効いていない）。
   1216〜1407px で長ラベルを出すと残り約 13px しかなく、書体の差で折り返しうるので短縮のままにする。 */
.nav-short{display:none}
@media screen and (min-width:1024px) and (max-width:1407px){
  .nav-long{display:none}
  .nav-short{display:inline}
}
/* 1024〜1215px だけ全ナビ項目の左右余白を .75rem → .5rem（項目は削らない） */
@media screen and (min-width:1024px) and (max-width:1215px){
  .navbar .navbar-item{padding-left:.5rem;padding-right:.5rem}
  /* 横はみ出し 12px の修正（変更前からの不具合・実測 2026-09-20）。Bulma は 1024px 以上で navbar-brand / navbar-menu に
     -.75rem のマージンを付け、コンテナの外側に余白がある前提で動く。ところがこの幅では common.css の .container{max-width:1200px} が
     Bulma の 960px に後勝ちしてコンテナが画面全幅になり、メニューが右へ 12px はみ出し（横スクロール）、ロゴの左 4px が欠けていた。
     その余白を padding で補う。1216px 以上は Bulma の .container:not(…) が勝ってコンテナが 1152 / 1344px になるので不要。
     ナビが使える幅は 24px 減る（JA 1024px の余り 48 → 24px）。項目を足す時は 1024px で 1 行に収まるか測り直すこと。 */
  .navbar > .container{padding-left:.75rem;padding-right:.75rem}
}

/* ---- 基礎 ---- */
/* 淡色地の eyebrow。既存 .eyebrow は amber 固定（白地 2.36:1）なので、新設節は text 色（白地 6.95:1）にする */
.eyebrow--ink{color:var(--color-text)}
/* .btn-ghost は index.css にしか無いので同値で再定義（top では index.css が後から同じ値で上書きする） */
.btn-ghost{border:1.5px solid var(--color-border-btn);border-radius:9px;font-weight:700;color:var(--color-ink);transition:border-color .2s,background .2s}
.btn-ghost:hover{border-color:var(--color-ink);background:var(--color-bg-alt)}
/* 文中の導線。タップ領域 44px を確保 */
.b2b-link{display:inline-flex;align-items:center;min-height:44px;font-size:0.875rem;font-weight:700;color:var(--color-ink);text-decoration:underline;text-underline-offset:4px}
.b2b-link:hover{color:var(--color-ink-text)}
/* フォーカスリング: 淡色地は ink（amber は白地で 2.36:1 のため使わない）、ダーク地は amber */
.b2b-link:focus-visible,.btn-ghost:focus-visible{outline:3px solid var(--color-ink);outline-offset:3px;border-radius:4px}
.sec-dark .b2b-link:focus-visible{outline-color:var(--color-amber)}
/* ink 地の上の導線は白（ink のままだと読めない） */
.sec-dark .b2b-link{color:var(--color-white)}
.sec-dark .b2b-link:hover{color:var(--color-text-silver2)}

/* ---- 対象者別カード（役割 × Q&A） ---- */
.b2b-roles{background:var(--color-white);border:1px solid var(--color-border);border-radius:16px;overflow:hidden}
/* grid のトラックは minmax(0,1fr)。素の 1fr は中身の最小幅より狭くならず、英語の長い語で 375px からはみ出す */
.b2b-role-row{display:grid;grid-template-columns:240px minmax(0,1fr);border-top:1px solid var(--color-border)}
.b2b-role-row:first-child{border-top:0}
.b2b-role-head{padding:2.125rem;border-right:1px solid var(--color-border)}
.b2b-role-num{font-family:'Schibsted Grotesk';font-size:0.81rem;font-weight:900;color:var(--color-text-muted);margin-bottom:1rem}
.b2b-role-name{font-size:1.06rem;font-weight:700;margin-bottom:0.375rem}
.b2b-role-note{font-size:0.81rem;line-height:1.6;color:var(--color-text)}
.b2b-role-qas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:2.125rem}
.b2b-qa-q{font-size:0.875rem;font-weight:700;color:var(--color-text);margin-bottom:0.5rem}
.b2b-qa-a{font-size:0.91rem;line-height:1.85;color:var(--color-ink-text);margin-bottom:0.25rem}
@media screen and (max-width:1023px){
  .b2b-role-row{grid-template-columns:minmax(0,1fr)}
  .b2b-role-head{border-right:0;border-bottom:1px solid var(--color-border);padding:1.5rem 1.5rem 1.25rem}
  .b2b-role-qas{padding:1.5rem}
}
@media screen and (max-width:768px){
  .b2b-role-qas{grid-template-columns:minmax(0,1fr);gap:20px}
}

/* ---- 新設ページ・新設節の見出し（既存ページは節ごとに指定しているので、新設分だけここで揃える） ---- */
.b2b-sec .sec-title{font-size:2.25rem;line-height:1.32}
.b2b-sec .sec-header .sec-sub,.b2b-lead{font-size:0.97rem;line-height:1.95;margin-top:0.75rem}
.b2b-sec.sec-dark .sec-title{color:var(--color-white)}
.b2b-sec.sec-dark .b2b-lead,.b2b-sec.sec-dark .sec-header .sec-sub{color:var(--color-text-silver2)}
.b2b-narrow{max-width:760px}
.has-text-centered .b2b-narrow{margin-left:auto;margin-right:auto}
@media screen and (max-width:768px){.b2b-sec .sec-title{font-size:1.75rem}}

/* ---- グリッド（Bulma columns ではなく素の grid。トラックは minmax(0,1fr)） ---- */
.b2b-grid{display:grid;gap:24px;grid-template-columns:repeat(3,minmax(0,1fr))}
.b2b-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.b2b-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media screen and (max-width:1023px){.b2b-grid,.b2b-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media screen and (max-width:768px){.b2b-grid,.b2b-grid--4,.b2b-grid--2{grid-template-columns:minmax(0,1fr);gap:18px}}

/* ---- チップ（Bulma の .tag は使わない） ---- */
.b2b-chip{display:inline-block;font-size:0.72rem;font-weight:700;line-height:1.2;letter-spacing:.04em;border-radius:999px;padding:0.3rem 0.75rem;background:var(--color-bg-chip);color:var(--color-text)}
.b2b-chip--ink{background:var(--color-ink);color:var(--color-white)}

/* ---- 番号カード（効果・理由・手順・始め方で共用） ---- */
.b2b-numcard{background:var(--color-white);border:1px solid var(--color-border);border-radius:16px;padding:2.125rem;height:100%}
.b2b-numcard-num{font-family:'Schibsted Grotesk';font-size:0.81rem;font-weight:900;color:var(--color-text-muted);margin-bottom:1.125rem}
.b2b-numcard h3{font-size:1.19rem;font-weight:700;line-height:1.5;margin-bottom:0.6875rem}
.b2b-numcard p{font-size:0.91rem;line-height:1.9;color:var(--color-text)}
.sec-dark .b2b-numcard{background:var(--color-ink-card);border-color:var(--color-ink-border)}
.sec-dark .b2b-numcard-num{color:var(--color-amber)}
.sec-dark .b2b-numcard h3{color:var(--color-white)}
.sec-dark .b2b-numcard p{color:var(--color-text-silver2)}

/* ---- メニューカード 1: 導入実績のある形（写真つき・黒チップ） ---- */
.b2b-proven{display:flex;flex-direction:column;background:var(--color-white);border:1px solid var(--color-border);border-radius:18px;overflow:hidden;height:100%}
.b2b-proven-img{width:100%;height:200px;overflow:hidden}
.b2b-proven-img img{width:100%;height:100%;object-fit:cover;display:block}
.b2b-proven-body{display:flex;flex-direction:column;flex:1;padding:1.75rem 1.875rem 2rem}
.b2b-proven-body h3{font-size:1.31rem;font-weight:700;line-height:1.45;margin:0.875rem 0 0.5rem}
.b2b-proven-who{font-size:0.84rem;font-weight:700;line-height:1.7;color:var(--color-ink-text);margin-bottom:0.75rem}
.b2b-proven-desc{font-size:0.91rem;line-height:1.9;color:var(--color-text);flex:1}
.b2b-proven-price{margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--color-border);font-family:'Schibsted Grotesk','Zen Kaku Gothic New';font-size:1.06rem;font-weight:900;color:var(--color-ink)}

/* ---- メニューカード 2: ご相談いただけるメニュー（提案。破線・写真なし。実績カードと見た目で区別する） ---- */
.b2b-proposal{display:flex;flex-direction:column;background:var(--color-white);border:1.5px dashed var(--color-border-btn);border-radius:16px;padding:1.75rem 1.875rem 1.25rem;height:100%}
.b2b-proposal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:1rem}
.b2b-proposal-num{font-family:'Schibsted Grotesk';font-size:0.81rem;font-weight:900;color:var(--color-text-muted)}
.b2b-proposal h3{font-size:1.19rem;font-weight:700;line-height:1.5;margin-bottom:0.6875rem}
.b2b-proposal-who{font-size:0.84rem;line-height:1.8;color:var(--color-ink-text);margin-bottom:0.75rem}
.b2b-proposal-what{font-size:0.91rem;line-height:1.9;color:var(--color-text);flex:1}
.b2b-proposal .b2b-link{margin-top:0.5rem;align-self:flex-start}

/* ---- 統計枠（ink 地。1 枠 = partial 1 回呼び出し。破線は既存の --color-ink-border） ---- */
.b2b-stat{display:flex;flex-direction:column;background:var(--color-ink-card);border:1.5px dashed var(--color-ink-border);border-radius:16px;padding:1.75rem 1.875rem;height:100%}
.b2b-stat-title{font-size:0.84rem;font-weight:700;line-height:1.7;color:var(--color-text-silver2);margin-bottom:0.875rem}
.b2b-stat-value{font-family:'Schibsted Grotesk';font-size:2.875rem;font-weight:900;line-height:1;color:var(--color-amber);margin-bottom:1rem}
.b2b-stat-claim{font-size:0.91rem;line-height:1.9;color:var(--color-white);margin-bottom:0.875rem}
.b2b-stat-note{font-size:0.78rem;line-height:1.85;color:var(--color-text-pale);flex:1}
.b2b-stat-src{margin-top:1rem;padding-top:0.875rem;border-top:1px solid var(--color-ink-border);font-size:0.78rem;line-height:1.7;color:var(--color-text-pale)}
.b2b-stat-src a{display:inline-flex;align-items:center;min-height:44px;color:var(--color-amber);text-decoration:underline;text-underline-offset:3px}
.b2b-stat-src a:focus-visible{outline:3px solid var(--color-amber);outline-offset:3px;border-radius:4px}

/* ---- 表（ラベル / 値。稟議ボックスと支払い・書類で共用。Bulma の .table は使わない） ---- */
.b2b-table{display:grid;grid-template-columns:minmax(88px,140px) minmax(0,1fr);border-top:1px solid var(--color-border)}
.b2b-table dt,.b2b-table dd{padding:0.9375rem 0;border-bottom:1px solid var(--color-border);font-size:0.91rem;line-height:1.8}
.b2b-table dt{font-weight:700;color:var(--color-ink);padding-right:1rem}
.b2b-table dd{color:var(--color-ink-text)}
.sec-dark .b2b-table,.sec-dark .b2b-table dt,.sec-dark .b2b-table dd{border-color:var(--color-ink-border)}
.sec-dark .b2b-table dt{color:var(--color-white)}
.sec-dark .b2b-table dd{color:var(--color-text-silver2)}

/* ---- 効果カード（番号カード + 対象者チップ。チップはカードの下端に揃える） ---- */
.b2b-numcard.b2b-effect{display:flex;flex-direction:column}
.b2b-effect p{flex:1}
.b2b-effect-role{margin-top:1.25rem}

/* ---- 一行ずつのリスト（困りごと → 答え） ---- */
.b2b-lines{list-style:none;border-top:1px solid var(--color-border)}
.b2b-lines li{padding:1rem 0;border-bottom:1px solid var(--color-border);font-size:0.94rem;line-height:1.8;color:var(--color-ink-text)}
.b2b-after-list{margin-top:1.5rem}
/* a.btn-amber は inline のままだと上下の padding が行に反映されない。flex の外で使う時に付ける */
.b2b-inline-btn{display:inline-block}

/* ---- 英語対応の帯（ink 地。amber は ✓ だけ） ---- */
.b2b-en-list{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.b2b-en-list li{display:flex;gap:12px;align-items:flex-start;background:var(--color-ink-card);border:1px solid var(--color-ink-border);border-radius:14px;padding:1.25rem 1.375rem;font-size:0.94rem;line-height:1.7;color:var(--color-white)}
.b2b-en-list li::before{content:"✓";flex:none;font-weight:900;color:var(--color-amber)}
@media screen and (max-width:1023px){.b2b-en-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media screen and (max-width:768px){.b2b-en-list{grid-template-columns:minmax(0,1fr);gap:12px}}

/* ---- 稟議ボックス ---- */
.b2b-approval{background:var(--color-white);border:1px solid var(--color-border);border-radius:18px;padding:2.5rem;box-shadow:0 14px 40px var(--color-shadow-sm)}
.b2b-approval-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:2rem}
.b2b-approval-actions .btn-ghost{padding:1rem 1.875rem;font-size:0.94rem;background:var(--color-white);cursor:pointer;font-family:inherit}
@media screen and (max-width:768px){
  .b2b-approval{padding:1.5rem}
  .b2b-numcard,.b2b-proposal{padding:1.5rem}
  .b2b-proven-body{padding:1.5rem}
  .b2b-table{grid-template-columns:minmax(0,1fr)}
  .b2b-table dt{border-bottom:0;padding-bottom:0}
  .b2b-table dd{padding-top:0.25rem}
}

/* ---- FAQ（<details>。JS なし。Bulma は details / summary に既定スタイルを持たない） ---- */
.b2b-faq-list{border-top:1px solid var(--color-border)}
.b2b-faq{border-bottom:1px solid var(--color-border)}
/* summary 全体がタップ領域（44px 以上）。既定の三角は消し、右端の ＋ / − で開閉を示す */
.b2b-faq summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:44px;padding:1.25rem 0;cursor:pointer;list-style:none}
.b2b-faq summary::-webkit-details-marker{display:none}
.b2b-faq summary::after{content:"+";flex:none;width:28px;height:28px;border-radius:50%;background:var(--color-bg-chip);color:var(--color-ink);display:flex;align-items:center;justify-content:center;font-family:'Schibsted Grotesk';font-size:1.125rem;font-weight:700;line-height:1}
.b2b-faq[open] summary::after{content:"−"}
.b2b-faq summary:focus-visible{outline:3px solid var(--color-ink);outline-offset:3px;border-radius:4px}
.b2b-faq-q{font-size:1rem;font-weight:700;line-height:1.7;color:var(--color-ink)}
.b2b-faq-a{padding:0 2.75rem 1.5rem 0;font-size:0.94rem;line-height:1.95;color:var(--color-ink-text)}
.sec-alt .b2b-faq summary::after{background:var(--color-white);border:1px solid var(--color-border)}
@media screen and (max-width:768px){.b2b-faq-a{padding-right:0}}

/* ---- CTA 帯（新設ページの末尾。.cta-title 等は index.css にしか無いので、新しい名前で同値を定義） ---- */
.b2b-cta-title{font-family:'Schibsted Grotesk','Zen Kaku Gothic New';font-size:2.25rem;font-weight:900;letter-spacing:-.01em;line-height:1.35;margin-bottom:1rem;color:var(--color-white)}
.b2b-cta-sub{font-size:1rem;line-height:1.9;color:var(--color-text-pale);margin:0 auto 2.125rem;max-width:720px}
.b2b-cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
@media screen and (max-width:768px){.b2b-cta-title{font-size:1.625rem}}

/* ---- 新設ページの hero（events.css と同じく、モバイルは 2.25rem。既存の 1 文字折り返しの罠を避ける） ---- */
.b2b-hero{min-height:560px}
.b2b-hero .hero-title{font-size:3.5rem;text-wrap:balance}
/* 日本語の見出しは文節で折り返す（「…7 つのこと / に、…」のような泣き別れを避ける。未対応のブラウザでは従来どおり） */
.b2b-hero .hero-title:lang(ja){word-break:auto-phrase}
@media screen and (max-width:768px){
  .b2b-hero{min-height:480px}
  .b2b-hero .hero-title{font-size:2.25rem}
  .b2b-hero .hero-content{padding:4rem 1.25rem}
}

/* ---- 印刷（「印刷 / PDF 保存」ボタン用。ナビ・フッター・ボタン類を出さない） ---- */
@media print{
  .navbar,.footer,.b2b-noprint,.hero-ctas,.b2b-approval-actions{display:none !important}
  .hero-dark,.sec-dark{background:none !important;color:var(--color-ink) !important}
  .hero-dark *,.sec-dark *{color:var(--color-ink) !important;text-shadow:none !important}
  .hero-overlay{display:none !important}
  .section{padding:1.5rem 0 !important}
  .b2b-approval{box-shadow:none;break-inside:avoid}
}