/* 企業・自治体向けAI活用支援: responsive layout on fluid.css. Figma 15:121 is the visual reference. */

.bz-hero-lead{font:400 clamp(16px,.8rem + .4vw,20px)/1.6 "Noto Serif JP",serif;color:var(--navy)}

.bz-why-text{max-width:36em}
/* 帯の上で白い箱だけが浮いて見えていたので、縁を付けて見出しと頭をそろえる。 */
.bz-why-inner{align-items:start}
.bz-concerns{background:#fff;border:1px solid var(--border);border-radius:8px;padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px)}
.bz-concerns li{display:grid;grid-template-columns:26px 1fr;gap:14px;align-items:center}
.bz-concerns li img{width:26px;height:26px}
.bz-concerns li span{font:400 var(--fs-sm)/1.7 "Noto Sans JP",sans-serif;color:var(--ink)}

.bz-support-head{margin-bottom:clamp(28px,3.4vw,44px)}
.bz-support-note{margin-top:14px!important;max-width:46em;color:var(--muted);font-size:var(--fs-sm);font-family:"Noto Sans JP",sans-serif}
.bz-support-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
/* 行の高さは一番長いカードに合う。余った高さを中の行に配らせると、アイコンの段が間延びして
   カードごとに上端がずれる（説明文が3行のカードだけ上に見えていた）。上に詰める。 */
.bz-support-list li{display:grid;grid-template-columns:30px auto;align-items:center;gap:8px 10px;align-content:start}
.bz-support-icon{position:relative;width:30px;height:30px}
.bz-support-icon img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.bz-support-icon img.bz-glyph{inset:auto;object-fit:fill}
.bz-support-num{font:700 var(--fs-sm)/1.4 "Noto Sans JP",sans-serif;color:var(--terracotta)}
.bz-support-item{grid-column:1/-1;display:flex;flex-direction:column;gap:6px;margin-top:8px}
.bz-support-item h3{font:700 var(--fs-h3)/1.4 "Noto Serif JP",serif;color:var(--navy);min-height:2.8em;text-wrap:balance;word-break:auto-phrase;overflow-wrap:anywhere}
/* ↑ 小見出しは文節で折り返す（「小さ／く試す」「見つけ／る」のように語の途中で切れていた）。 */
.bz-support-item p{font:400 var(--fs-sm)/1.7 "Noto Sans JP",sans-serif;color:var(--ink)}

.bz-train-head{margin-bottom:clamp(24px,2.8vw,36px)}
.bz-train-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,28px)}
.bz-train-card{display:flex;flex-direction:column;gap:12px;background:#fff;border-radius:8px;padding:clamp(22px,2.4vw,32px)}
.bz-train-card img{width:36px;height:36px}
.bz-train-card h3{font:400 var(--fs-h3)/1.5 "Noto Serif JP",serif;color:var(--navy)}
.bz-train-card .f-body{font-size:var(--fs-sm);font-family:"Noto Sans JP",sans-serif;color:var(--ink);max-width:none}
.bz-train-sub{margin-top:clamp(32px,3.6vw,48px);max-width:44em}
.bz-train-sub-title{font:700 var(--fs-h3)/1.4 "Noto Serif JP",serif;color:var(--navy)}

.bz-uses-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 24px;margin-bottom:clamp(24px,3vw,40px)}
.bz-use-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.bz-use{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:4px;overflow:hidden}
/* Sprite crop: keep this aspect-ratio + percentage box so the sheet's offsets stay correct.
   The tag keeps its percentage/cqw box so it keeps covering the label baked into the sheet. */
.bz-use-media{position:relative;overflow:hidden;aspect-ratio:218/95;container-type:inline-size}
.bz-use-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bz-use-tag{position:absolute;top:71.5789%;display:flex}
.bz-use-tag span{display:inline-block;background:#fff;border-radius:999px;padding:1.8349cqw 5.5046cqw;font:400 4.5872cqw/7.7982cqw "Noto Sans JP",sans-serif;color:var(--navy);white-space:nowrap}

.bz-use-copy{display:flex;flex-direction:column;gap:8px;padding:16px clamp(14px,1.6vw,20px) 20px}
.bz-use-copy h3{font:700 var(--fs-h3)/1.4 "Noto Serif JP",serif;color:var(--navy)}
.bz-use-copy .f-body{font-size:var(--fs-sm);font-family:"Noto Sans JP",sans-serif}

@media(max-width:1023px){
 .bz-support-head{grid-template-columns:1fr;gap:16px}
 .bz-support-list{grid-template-columns:repeat(2,minmax(0,1fr))}
 .bz-train-list{grid-template-columns:1fr}
 .bz-use-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767px){
 .bz-support-item h3{min-height:0}
 .bz-support-list{grid-template-columns:1fr}
 .bz-uses-head{flex-direction:column;align-items:flex-start;gap:12px}
 .bz-use-list{grid-template-columns:1fr}
}