/* PromptPalette 取扱説明書専用。共通の見た目（色・文字・目次・注意枠・表・画像）は /assets/site.css の .manual で指定する。
   ここにはこの説明書だけで使う部品（入力と結果の比較・ボタン）を書く。 */
@media (min-width: 1180px) { .pp .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.pp .ba { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; margin: 20px 0; }
.pp .ba figure { margin: 0; }
.pp .ba img { display: block; width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.pp .ba figcaption { margin-top: 6px; font-size: 13px; color: var(--muted); text-align: center; }
.pp .ba .arrow { font-size: 28px; color: var(--muted); }
.pp figure.shot.narrow img { max-width: min(640px, 100%); }
.pp .btn { display: inline-block; padding: 10px 18px; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 600; text-decoration: none; }
.pp .btn.disabled { opacity: .55; }

@media (max-width: 560px) {
  .pp .ba { grid-template-columns: minmax(0, 1fr); }
  .pp .ba .arrow { justify-self: center; transform: rotate(90deg); }
}