/* guide.css — /guide/ 固有。共通コンポーネントは b2b.css。色は var(--color-*) のみ。 */

/* ---- hero（写真は catering の hero を流用。image-spec.md #10） ---- */
.hero-guide .hero-inner{background-image:url('../images/catering_hero_background.jpg');background-size:cover;background-position:center}

/* ---- intro ---- */
.guide-intro-link{margin-top:1rem}

/* ---- 7 worries（困りごと × 答え の表。Bulma の .table は使わない） ---- */
/* 角丸を効かせるため border-collapse は separate（Bulma の既定は collapse） */
.guide-wt{width:100%;border-collapse:separate;border-spacing:0;background:var(--color-white);border:1px solid var(--color-border);border-radius:16px;overflow:hidden}
.guide-wt th,.guide-wt td{padding:1.375rem 1.5rem;border-top:1px solid var(--color-border);vertical-align:top;text-align:left;font-size:0.94rem;line-height:1.85}
.guide-wt thead th{border-top:0;font-size:0.81rem;font-weight:700;color:var(--color-text);background:var(--color-bg-chip)}
.guide-wt .guide-wt-num{width:56px;padding-right:0;font-family:'Schibsted Grotesk';font-size:0.81rem;font-weight:900;color:var(--color-text-muted)}
.guide-wt-q{width:40%;font-weight:700;color:var(--color-ink)}
.guide-wt-a{color:var(--color-ink-text)}
.guide-wt-note{margin-top:1.25rem;font-size:0.84rem;line-height:1.85;color:var(--color-text)}
@media screen and (max-width:768px){
  /* 1 行 = 番号 + 困りごと、その下に答え。見出し行は読み上げ用に残して視覚的に隠す */
  .guide-wt,.guide-wt tbody{display:block}
  .guide-wt thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .guide-wt tr{display:grid;grid-template-columns:40px minmax(0,1fr);padding:1.25rem 1.25rem 1.375rem;border-top:1px solid var(--color-border)}
  .guide-wt tbody tr:first-child{border-top:0}
  .guide-wt th,.guide-wt td{display:block;padding:0;border-top:0}
  .guide-wt .guide-wt-num{width:auto;padding-top:0.125rem}
  .guide-wt-q{width:auto}
  .guide-wt-a{grid-column:2;margin-top:0.5rem}
}

/* ---- scenarios（カードは b2b-proven を流用。条件の行だけ固有） ---- */
.guide-sc-meta{margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--color-border);font-size:0.84rem;font-weight:700;line-height:1.7;color:var(--color-ink)}

/* ---- 5 steps（1216px 以上は 5 列、769〜1215px は 3 列、768px 以下は b2b-grid の 1 列） ---- */
.guide-steps{list-style:none}
@media screen and (min-width:1216px){
  .guide-steps{grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
  .guide-steps .b2b-numcard{padding:1.625rem 1.5rem}
}
@media screen and (min-width:769px) and (max-width:1215px){
  .guide-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---- checklist（枠は b2b-approval を流用。□ は飾りで、操作はできない） ---- */
.guide-ck-list{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2.5rem}
.guide-ck-list li{display:flex;gap:14px;align-items:flex-start;padding:1rem 0;border-bottom:1px solid var(--color-border);font-size:0.91rem;line-height:1.8;color:var(--color-ink-text)}
.guide-ck-list li::before{content:"";flex:none;width:18px;height:18px;margin-top:0.3125rem;border:1.5px solid var(--color-text-muted);border-radius:4px;background:var(--color-white)}
@media screen and (max-width:768px){.guide-ck-list{grid-template-columns:minmax(0,1fr)}}

/* ---- not for ---- */
.guide-nf-list li{display:flex;gap:14px;align-items:flex-start}
.guide-nf-list li::before{content:"—";flex:none;color:var(--color-text-muted);font-weight:700}

/* ---- CTA の下の導線（ink 地） ---- */
.guide-cta-links{display:flex;flex-wrap:wrap;justify-content:center;gap:0.25rem 2rem;margin-top:1.75rem}

/* ---- 「このボックスを印刷」: body.guide-print-box の時だけ、チェックリスト以外を刷らない ---- */
@media print{
  .guide-print-box .hero-dark,.guide-print-box main > section:not(#checklist){display:none !important}
  .guide-ck-list{grid-template-columns:minmax(0,1fr)}
  .guide-ck-list li{break-inside:avoid}
}