/* ProjectButler ページ固有CSS */
/* 新規部品：.pbx（PMO位置づけ 2軸4象限マトリクス図。relfig=役割相関図ほか既存図部品では代用不可） */
/* ABOUT：フィジカルAI「Modalixとは」と同型（intro-headのリード文→中央写真）。写真は支援風景の横写真のため幅720 */
.pb-ph{width:min(720px,100%);aspect-ratio:16/8;margin:0 auto}
img.pb-ph{display:block;object-fit:cover;border-radius:var(--rd-md)}
/* サービスカード：.case見出し内の SERVICE 番号を見出しの上に縦積み（直接子・ページ固有） */
#services .case>:is(h3,h4,h5,h6){flex-direction:column;gap:calc(4px * var(--sp-k));align-items:flex-start} /* 2026-09-30: 事例カードの見出し左揃え（共通）に合わせて縦積みも左へ */
/* v3.1 2026-08-18：余白統一――ピルは4方向とも象限縁から39px外へ突き出し、padding全辺55pxで外周余白16px・象限インセット55pxに揃える（旧：左右ピルがパネル内縁から22pxはみ出していた） */
.pbx{padding:calc(55px * var(--sp-k))}
.pbf{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:calc(56px * var(--sp-k))}
.pbf::before{content:"";position:absolute;left:calc(50% - 1px);top:-14px;bottom:-14px;width:2px;background:color-mix(in oklab,var(--sol) 35%,#fff)}
.pbf::after{content:"";position:absolute;top:calc(50% - 1px);left:-14px;right:-14px;height:2px;background:color-mix(in oklab,var(--sol) 35%,#fff)}
.pbx .q{background:#fff;border:1px solid var(--line);border-radius:var(--rd-md);padding:calc(26px * var(--sp-k)) calc(28px * var(--sp-k))}
.pbx .qk{font-size:var(--fs-label);font-weight:700;color:var(--ink-mute)}
.pbx .q :is(h3,h4,h5,h6){font-size:var(--fs-card);font-weight:900;color:var(--navy);margin-top:calc(8px * var(--sp-k))}
.pbx .q p{font-size:var(--fs-body);line-height:1.85;color:var(--ink-soft);margin-top:calc(10px * var(--sp-k))}
.pbx .q.on{background:#007D4C;border-color:#007D4C}
.pbx .q.on .qk{color:rgba(255,255,255,.72)}
.pbx .q.on :is(h3,h4,h5,h6){color:#fff}
.pbx .q.on p{color:rgba(255,255,255,.92)}
.pbx .bdg{display:inline-block;margin-top:calc(14px * var(--sp-k));background:#fff;color:var(--navy);font-weight:900;font-size:var(--fs-sub);border-radius:var(--shape-pill);padding:calc(7px * var(--sp-k)) calc(18px * var(--sp-k))}
.axc{position:absolute;display:grid;justify-items:center;z-index:1}
.axc .axp{display:inline-flex;align-items:center;background:color-mix(in oklab,var(--sol) 24%,#fff);color:var(--ink);font-size:var(--fs-sub);font-weight:700;line-height:1;padding:calc(8px * var(--sp-k)) calc(16px * var(--sp-k));border-radius:var(--shape-pill);white-space:nowrap}
.axc.t{left:50%;top:-9px;transform:translate(-50%,-100%)}
.axc.b{left:50%;top:calc(100% + 9px);transform:translateX(-50%)}
.axc.l{left:-39px;top:50%;transform:translateY(-50%)}
.axc.r{right:-39px;top:50%;transform:translateY(-50%)}
@media(max-width:760px){
.pbx{padding:0}
.pbf{grid-template-columns:1fr;gap:calc(14px * var(--sp-k))}
.pbf::before,.pbf::after,.axc{display:none}
}